*{
    padding:0;
    margin: 0;
    box-sizing: border-box;
    font-family: 'Montserrat';
    color: var(--darkblue);
}

@font-face {
    font-family: 'Montserrat';
    src: url(./Fonts/Montserrat-VariableFont_wght.ttf);
}

html{
    scroll-behavior: smooth;
    --darkblue: #000066;
    --white: #FFFFFF;
    --blue: #0B00B5;
    --gradient: linear-gradient(144deg, rgb(186, 10, 255) 0%, rgb(16, 48, 230) 46%,  rgb(6, 0, 85) 93%);
}

.container{
    width:1180px;
    margin:0 auto;
}

p{
    line-height: 150%;
    font-size: 18px;
}

a{
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    
}

/* Hero Section */

.mobileOnly{
    display: none;
}

.navbar{
    height:70px;
    width:80%;
    top: 10px;
    left:10%;
    background-color: var(--white);
    border-radius: 150px;
    position: fixed;
    z-index: 111;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding:0 50px;
    box-shadow: 1px 1px 5px rgba(138, 4, 255, 0.242);

}

.logo{
    height: 40px;
}

.navbarLinkBox{
    display: flex;
    gap:20px;
    transition: all .5s ease;
    
}


.navbarLink{
    padding:5px;
    color: var(--blue);
    transition: all.5s ease;
}


.navbarLink:hover{
    color: var(--darkblue);
    transition: all.5s ease;
}

.heroSectionGrid{
    display: grid;
    grid-template-columns: 45% 55%;
    height: 100vh;
}

.heroSectionTextBox{
    margin:0px 0 0 0;
    display: flex;
    align-items: left;
    flex-direction: column;
    justify-content: center;
}

.mainHeading{
    font-size: 56px;
    line-height: 105%;
    font-weight: 900;
    text-transform: uppercase;
}

.smallerHeading{
    font-size: 24px;
    font-weight: 800;
    text-transform: uppercase;
}

.subHeading{
    margin: 20px 0 40px 0;
    font-size: 18px;
    font-weight: 600;

}

.CTA{
    font-size: 25px;
    font-weight: 700;
    text-transform: uppercase;
    padding:15px 40px;
    background: var(--gradient);
    background-color: var(--blue);
    border-radius: 4px;
    color: var(--white);
    line-height: 80%;
    text-decoration: none;
    width:fit-content;

}

.SmallerCTA{
    font-size: 16px;
    color: var(--white);

}

.CTA:hover{
    background: linear-gradient(var(--blue), var(--darkblue));

}

.heroSectionImageBox{
    width:115%;
    
}

.heroSectionImage{
    width: 100%;
}

.heroSectionFacts{
    display: flex;
    justify-content: space-between;
    grid-column: 1/-1;
}

.fact{
    display: flex;
    gap: 20px;
    justify-content: center;
    align-items: center;
    
}

.factIcon{
    width:50px;
}


/* About Us Section */

.aboutSection{
    margin: 180px 0;
 
    
}

.aboutSectionGrid{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 30vh 1fr;
    gap:50px;
}


.sectionheadingBox{
    text-align: left;
    grid-row: 1/2;
    grid-column: 1/2;
    position: sticky;
    top:110px;
    padding:50px;
    border-radius: 12px;

}

.sectionheadingBox .aboutSectionHeading{
    font-size: 28px;
}



.aboutSectionTextBox{
    grid-column: 1/2;
    grid-row: 2/3;
    

}


.aboutSectionTextItem{
    padding:40px;
    background: #ffffff;
    background: linear-gradient(144deg,rgba(255, 255, 255, 1) 34%, rgba(212, 214, 255, 1) 100%);
    position: sticky;
    top: 50vh;
    border-radius: 12px;
    height: 40vh;
    box-shadow: 2px 2px 5px 0 rgb(244, 231, 255);

}

.aboutSectionTextItem:nth-child(odd){ 

   background: linear-gradient(144deg,rgba(255, 255, 255, 1) 34%, rgba(235, 212, 255, 1) 100%);

}

.aboutSectionHeading{
    font-size: 22px;
    margin-bottom: 25px;
    text-transform: uppercase;
}


.aboutSectionVideoBox{
    width:100%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: start;
    position: sticky;
    top: 100px;
    align-items: center;
    height: calc(100vh - 120px);
    border-radius: 12px;
    

    
}
.aboutSectionVideo{
    height:100%;

}

#mute{
    width:30px;
    height:24px;
    position:absolute;
    right:25px;
    bottom:25px;
    cursor:pointer;
    background-image: url(../images/mute.svg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 0.75;

}

#mute:hover{
    opacity: 1;

}

/* pricing Section */

.pricingSection
{
    margin:200px 0;
}

.pricingSectionBox{
    padding:75px 100px;
    background-color: #fff;
    background: linear-gradient(144deg,rgba(255, 255, 255, 1) 34%, rgba(235, 212, 255, 1) 100%);
    box-shadow: 2px 2px 10px 0 rgba(138, 4, 255, 0.242);
    border-radius: 20px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap:50px;
}

.pricingHeadingBox .sectionHeading{
    margin:0;
}

.pricingHeadingBox .smallerHeading{
    font-size: 18px;
}

.right{
    text-align: right;
}

.featureListItem{
    display: flex;
    justify-content: center;
    align-items: start;

}

.tick{
    width:30px;

}

.featureListItem{
    margin: 25px 0 0 0;
}

.features{
    margin-left: 20px;
}

.specialPoint{
    margin-left: 50px;
}

.pricingSCTA{
    padding:20px 50px;
    border: 2px solid transparent;
    border-radius: 4px;
    transition: all 0.5s ease ;

}

.pricingSCTA:hover{
    border: 2px solid var(--blue);
    color:var(--blue) ;
    transition: all 0.5s ease ;

}

.pricingPCTA{
    padding:20px 50px;
    border-radius: 4px;
    text-align: right;
    background: var(--gradient);
    transition: all 0.5s ease ;
    color: var(--white);

}

.pricingPCTA:hover{

    background: linear-gradient(var(--blue), var(--darkblue));
    transition: all 0.5s ease ;


}

  /* Action Section */

   .ActionSection{
    background-color: #fbc2eb;
    background: linear-gradient(to top, #ffffff 0%, #dbcbff 25%, #fbc2eb 100%);
    
    
   }   
   
   .actionSectionGrid{
    display: grid;
    gap:50px;
    grid-template-columns: 60% 40%;
   }

   .actionSectionTextBox{
    display: flex;
    flex-direction: column;
    justify-content: center;
   }

   .actionSectionDescription{
    margin: 50px 0 75px 0;
   }
   .actionSectionImage{
    width: 100%;
   }



.actionPCTA,
.actionSCTA{
    padding:15px 25px;
    border:2px solid var(--white);
    width:100%;
    margin-right: 15px;
    background: var(--gradient);
    color: var(--white);
    transition: all 0.5s ease;
    border-radius: 8px;
}

.actionSCTA{
    color: var(--darkblue);
    border:2px solid var(--darkblue);
    background: none;
}


.actionPCTA:hover,
.actionSCTA:hover{
    border:2px solid var(--white);
    background: var(--darkblue);
    color: var(--white);
    transition: all 0.5s ease;

}


/* FAQs Section */

    .FAQSection{
        padding: 200px 0 ; 
    
}

     .FAQSection .sectionHeading{
        margin:50px 0 100px 0;
    }


    .FAQBox{
        padding:50px;
        background: linear-gradient(144deg,rgba(255, 255, 255, 1) 34%, rgba(235, 212, 255, 1) 100%);;
        border-radius: 12px;
        box-shadow: 2px 2px 10px 0 rgba(138, 4, 255, 0.242);
    }

    .FAQ{
        list-style: none;
        background: linear-gradient(144deg,rgba(255, 255, 255, 1) 34%, rgba(235, 212, 255, 1) 100%);;
        border-radius: 8px;
        margin-bottom: 30px;
        position: relative;
        padding-bottom: 30px;
        

    }

    .FAQQuestion{
        display: flex;
        align-items: center;
        justify-content: space-between;
        cursor: pointer;
        padding:30px 30px 0 30px;
        border:1px solid transparent;
        transition: all ease 0.5s;
        
    }

    .FAQ:hover {
        transition: all ease 0.5s;
        border-radius: 8px;
        box-shadow: 2px 2px 10px rgba(138, 4, 255, 0.242);
        
    }





    .FAQToggler[type="radio"]{
        display: none;
    }

    .FAQAnswer{

        transition: all ease .5s;
        overflow: hidden;
        margin: -1.5rem 2.5rem 1.5rem 2.5rem;
        max-height:0;
        

    }

    .FAQToggler[type="radio"]:checked + .FAQAnswer{

        transition: all ease 1.5s;
        max-height: 600px;
        

        
    }


    /* footer */
 
footer{
    width:100%;
    height:100vh;
    background: url(./images/Footer-backgroung.webp);
    background-repeat: no-repeat;
    background-position: right top;
    background-size:cover;
    z-index: 111111;
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    justify-items: center;
}



.footerLogoBox{
    grid-row: 2/3;
    
}

.footerLogo{
    width:300px;
    

}

.footerBranding p{
    grid-row: 3/-1;
    display: flex;
    align-items: end;
    height: 100%;
    padding-bottom: 15px;

}

.footerBranding p{
    color: var(--white);
}


    .footerLogoBox{
        margin-left: 30px;
    }


/* responsivness */

@media only screen and (max-width: 768px){

.container{
    width: calc(100% - 60px);
}

.navbar{
    width:calc(100% + 60px);
    border-radius: 0;
    position: static;
    padding:0 30px;
    margin: 0 0 0 -30px;

}



.logo{
    height: 30px;
}

.heroSectionGrid{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: auto;
    padding:50px 0 0 0;
}

.heroSectionTextBox{

    align-items: center;

}

.mainHeading{
    font-size: 36px;
    text-align: center;

}



.subHeading{
    text-align: center;
}

.CTA{
    font-size: 25px;
    font-weight: 700;
    text-transform: uppercase;
    padding:15px 40px;
    background: var(--gradient);
    background-color: var(--blue);
    border-radius: 4px;
    color: var(--white);
    line-height: 80%;
    text-decoration: none;
    width:fit-content;

}

.SmallerCTA{
    font-size: 16px;
    color: var(--white);

}

.CTA:hover{
    background: linear-gradient(var(--blue), var(--darkblue));

}

.heroSectionImageBox{
    width:115%;
    
}

.heroSectionImage{
    width: 100%;
}

.heroSectionFacts{
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap:20px;
    justify-content: space-between;
    grid-column: 1/-1;
    padding: 20px 0 0 20px;
}

.fact{
    display: flex;
    gap: 20px;
    justify-content: center;
    align-items: center;
    
}

.factText{
    font-size: 14px;
}

.factIcon{
    width:30px;
}


/* About Us Section */

.aboutSection{
    margin: 120px 0;
 
    
}

.aboutSectionGrid{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 20vh 40vh 1fr;
}


.sectionheadingBox{
    text-align: center;
    position: static;

}




.aboutSectionTextBox{
    grid-row: 3/4;
    

}


.aboutSectionTextItem{

    position: sticky;
    top: 60vh;


}





.aboutSectionVideoBox{
    grid-row: 2/3;

    top: 10vh;

    height: 40vh;


}

/* pricing Section */

.pricingSection
{
    margin:120px 0;
}

.pricingSectionBox{
    padding:75px 30px;
    display: grid;
    grid-template-columns: 1fr;
    gap:50px;
    align-items: center;
}


  /* Action Section */

   .ActionSection{
    padding:120px 0;
    
   }   
   
   .actionSectionGrid{
    grid-template-columns: 1fr;
   }


   .actionSectionButtonBox{
    display: flex;
    flex-direction: column;
    gap: 30px;
    text-align: center;
   }


.actionPCTA,
.actionSCTA{
    padding:25px 25px;
}





.right{
    text-align: center;
}


/* FAQs Section */

    .FAQSection{
        padding: 0 0 120px 0 ; 
    
}

     .FAQSection .sectionHeading{
        margin:50px 0 100px 0;
    }


    .FAQBox{
        padding:50px 0;

    }

       .FAQBox .sectionHeading{
        margin-left: 30px;
    }

    .FAQ{

        margin-bottom: 0;

        

    }


    .footerLogo{
    width:250px;

    

}

.menuToggler {
    display: block;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
}

.menuToggler span {
    display: block;
    width: 25px;
    height: 3px;
    background: var(--blue);
    border-radius: 3px;
    transition: 0.3s ease;
}



    .menuToggler {
        display: flex;
    }

    .navbarLinkBox {
        position: absolute;
        top: 80px;
        right: -100%;
        width: 100%;
        height: calc(100vh - 80px);
        background: var(--white);
        flex-direction: column;
        align-items: center;
        gap: 50px;
        padding: 20px 0;
        border-radius: 0 0 10px 10px;
        transform: translateX(-100%);
        opacity: 0;
        visibility: hidden;
         transition: 0.5s ease-in all;
         z-index: 111;
    }

    .navbarLinkBox.active {
        transform: translateX(1);
        transition: 0.5s ease-in all;
        opacity: 1;
        visibility: visible;
    }



}