#product-hero-section{
    padding: 0px 7%;
    background: linear-gradient(to bottom, #fff, #e6d9fb);
    
    .product-main-container{
        min-height: 90vh;
    }
    .product-img-container{
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .product-content h1{
        font-weight: 600;
        font-size: clamp(2rem, 4vw, 4.1rem);
    }
    .product-content p{
        font-size: clamp(1.2rem,4vw,1.5rem);
    }
    
}

#about-product{
    background: linear-gradient(to bottom,  #e6d9fb,#fff);
    padding: 0px 7%;
    .about-product-container{
        min-height: 45vh;
        align-items: center;
        margin-bottom: 20px;
        padding: 20px 0px;
    }

    .product-about{
        padding: 0px 5%;
    }


    .product-about h2.yellow{
        color: #f78c1f;
    }
    .product-about h2{
        font-weight: 700;
        font-size: clamp(2.5rem,4vw,3.5rem);
    }
    .product-about h3{
        font-size: clamp(1.5rem,4vw,2.7rem);
        font-weight: 500;
    }
    .product-about p{
        font-size: clamp(1rem,4vw,1.5rem);
        font-weight: 400;
    }

    .offer-cta {
        font-size: 1.4rem;
        font-weight: 700;
        text-decoration: none;
        color: #3023ae;
    }
}

#contact-section{
    background: linear-gradient(to bottom,  #fff,#e6d9fb);
    .contact-hero{
        min-height: 40vh;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .contact-hero h1{
        font-size: clamp(2rem,4vw,3.5rem);
    }
    .contact-hero p{
        font-size: clamp(1rem,4vw,1.3rem);
    }

}

#contact-main{

    .form-main{
        box-shadow: 0px -1px 40px -2px #00000030;
        border-radius: 10px;
        overflow: hidden;
    }

    .contact-desc{
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        height: 100%;
        border-right: 1px solid #e5e5e5;
        background: #b2acce;
        background: -webkit-linear-gradient(327deg, #b2acce 0%, rgba(89, 0, 140, 1) 100%);
        background: -moz-linear-gradient(327deg, #b2acce 0%, rgba(89, 0, 140, 1) 100%);
        background: linear-gradient(327deg, #b2acce 0%, rgba(89, 0, 140, 1) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#b2acce", endColorstr="#59008C", GradientType=0);
    }

    .contact-info{
        :is(h2){
            font-size: clamp(1.2rem,4vw,2rem);
            font-weight: 600;
            color: #fff;
        }
        :is(ul){
            list-style: none;
            padding: 0px;
            color: #fff;
        }
        :is(i){
            color: #fff;
            font-size: clamp(1rem,4vw,1.2rem);
            padding-right: 10px;
        }
        :is(p,li){
            font-size: clamp(0.9rem,4vw,1.1rem);
            font-weight: 500;
            color: #fff;
        }
        :is(a){
            color: #fff;
        }
    }

    form{
        :is(h1){
            font-size: clamp(1.5rem,4vw,1.8rem);
            font-weight: 600;
            color: #392569;
        }
        :is(input){
            padding-left: 10px;
        }
        :is(select){
            padding-left: 5px;
        }
        :is(input,select){
            border: 0px;
            border-bottom: 1px solid #afafaf;
            outline:none;
            height: 35px;
            background-color: transparent;
            line-height: 1.1rem;
        }

        :is(textarea){
            border: 0px;
            border-bottom: 1px solid #afafaf;
            outline:none;
            background-color: transparent;
        }

        :is(label){
            color: #52209c;
            font-size: clamp(1rem,4vw,1.2rem);
        }
        .form-container{
            gap: 40px;
        }

        .contact-button{
            padding: 10px 50px;
            border-radius: 5px;
            border: none;
            color: #fff;
            background: #4c3b99;
        background: -webkit-linear-gradient(327deg, #4c3b99 0%, rgba(89, 0, 140, 1) 100%);
        background: -moz-linear-gradient(327deg, #4c3b99 0%, rgba(89, 0, 140, 1) 100%);
        background: linear-gradient(327deg, #4c3b99 0%, rgba(89, 0, 140, 1) 100%);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#b2acce", endColorstr="#59008C", GradientType=0);
        }
    }
}

#foundation-info{
    padding: 20px 0px;
    background-color: #f4edff;
    :is(h1){
        font-weight: 900;
        color: #3023ae;
        font-size: clamp(2rem,4vw,6rem);
    }
    :is(span){
        font-weight: 700;
        color: #3023ae;
        font-size: clamp(1rem,4vw,1.5rem);
    }
}

.info-content-box{
    height: 400px;
    border-radius: 40px;
    background-color: #F7F1FF;
    padding: 45px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.info-container {
    padding: 50px 12%;
    :is(h1){
        font-size: clamp(1.5rem, 4vw, 2.5rem);
        font-weight: 700;
    }
    :is(p){
        font-size: clamp(1rem,4vw,1.5rem);
    }
}

#media-coverage{
    background: linear-gradient(to bottom, #fff, #e6d9fb,#fff );
    .media-coverage-content{
        min-height: 365px;
        border-radius: 30px;
        background-color: #F7F1FF;
        padding: 25px;
    }

    .media-content-container{
        :is(h2){
            font-size: clamp(1.5rem,4vw,2rem);
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
            line-height: 1.2em;
            max-height: 2.4em; /* 4 lines * 1.5 line-height */
        }
        :is(p){
            font-size: clamp(1rem,4vw,1.3rem);
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
            text-overflow: ellipsis;
            line-height: 1.5em;
            max-height: 6em; /* 4 lines * 1.5 line-height */
        }
    }

    .media-logo-container{
        width: 100%;
        height: 55px;
        display: flex;
        align-items: center;
        :is(img){
            width: clamp(100px,50%,200px);
        }
    }
}