@import url('https://fonts.googleapis.com/css2?family=Playfair+Display&family=Poppins&family=Stick+No+Bills:wght@800&display=swap');
/* Webfont: Kompagnia-Regular */@font-face {
    font-family: 'Kompagnia';
    src: url('./Font/Kompagnia.woff2') format('woff2'), /* Modern Browsers */
         url('./Font/Kompagnia.woff') format('woff'); /* Safari, Android, iOS */
             font-style: normal;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}


:root {
    /* Primary color (base) */
    --color-primary-500: #3498db;
  
    /* Primary color lighter variants */
    --color-primary-50: #eaf4fb;      /* Very light */
    --color-primary-100: #d6eaf8;
    --color-primary-200: #aed6f1;
    --color-primary-300: #85c1e9;
    --color-primary-400: #5dade2;
  
    /* Primary color darker variants */
    --color-primary-600: #DC57E7;
    --color-primary-700: #870F88;
    --color-primary-800: #510752;
    --color-primary-900: #270E35;
      /* Gray color variants */
      --color-gray-100: #f8f9fa; /* Lightest gray */
      --color-gray-200: #e9ecef;
      --color-gray-300: #dee2e6;
      --color-gray-400: #ced4da;
      --color-gray-500: #adb5bd; /* Medium gray */
      --color-gray-600: #6c757d;
      --color-gray-700: #495057;
      --color-gray-800: #343a40;
      --color-gray-900: #212529; /* Darkest gray */
    }
  

.product-launch{
    color: white;
    max-width: 1200px;
    margin: 10px auto;
    
}
.product-launch-content{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 60px;
}


.product-launch-video video{

    position: absolute;
    height: 70%; 
    width:50%;
    top: 15%;
    left: 0;
    display: flex;
    /* align-items: center;
    justify-content: center; */
    transform: translate(50%, 0%);

}

.product-launch-video  .frame{
    
    width: 90%;
     height: 100%; 

    /* position: relative ; */
    /* top: 0; */
    z-index: 1;
}


.product-launch-video {
    position: relative;
    /* border: 1px solid rgb(254, 250, 0); */
    /* position: absolute; */
    /* position: absolute;  */
    /* z-index: 2; */
}

.product-launch-heading{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-size: 30px;
    text-align: center;
    color: white;
    margin: 10px 0px;
    font-size: 30px;
    font-weight: 700;
    text-transform: uppercase;

    background: linear-gradient(180deg, #800785 0%, #BF82C1 80%);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.product-launch-heading h1{
    font-family:'Kompagnia';
}
.product-launch-heading ul{
    padding: 10px;
}

.product-launch-video-content-lists{
    color: whitesmoke;
    list-style: none;
}

.product-launch-video-content-sublists{
    list-style: none;
}

.product-launch-video-content-sublists-bullets{
    width: 10px;
    background-color: var(--color-primary-700);
    box-shadow: 0px 0px 8px 3px var(--color-primary-800);
    margin: 0 8px;
}

.product-launch-video-content-sublists{
    color: whitesmoke;
    margin-left: 40px;
}

.product-launch-content{
    display: flex;
    flex-direction: row;
    gap: 20px;
    display: grid;
grid-template-columns: repeat(2, 1fr);
/* grid-template-rows: repeat(2, 1fr); */
grid-column-gap: 10px;
grid-row-gap: 10px;
}
@media screen and (max-video:1000px) {
    .product-launch-content{
        display: flex;
        flex-direction: column;
    }
    
}

.product-launch-video-content{
    display: flex;
    align-items: center;
    flex-direction: column;
    font-family: 'Playfair Display', serif;

}
.product-launch-description{
    grid-area: 2 / 1 / 3 / 3; 
    padding: 10px;   
    font-family: 'Playfair Display', serif;
}
@media screen and (max-width:1000px) {
    .product-launch-content{
        display: grid;

grid-template-columns: 1fr;
grid-template-rows: repeat(3, 1fr);
grid-column-gap: 0px;
grid-row-gap: 0px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 13px;
    }
    .product-launch-video frame{
        /* height: 320px; */

            width: 90%;
    }
    .product-launch-video{
        position: relative;
        /* top: 50px; */
        left: 0%;
        width: 100vw;
        height: 40vh;
    }

    .product-launch-video-content{
        position: relative;
        /* top: -50px; */
        left: 5px;

    }
}