@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;900&display=swap');
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: Inter, system-ui;
}
html,body {
    margin:0;
    padding:0;
    overflow-x:hidden;
    line-height: 1.5;
}
body{
    width: 101vw;
    position: relative;
}
main{
    padding: 0px 32px;
    margin: 0 auto;
    width: 100%;
    max-width: 1400px;
}
/* 

 NAV BAR

*/
.nav_container{
    height: 80px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    max-width: 1400px;
}
.logo{
    display: flex;
    align-items:center;
}
.logo_img{
    width: 30px;
    padding-right: 4px;
}
.nav_links{
    display: flex;
}
.active{
    text-decoration: none;
    color: grey;
    font-weight: bold;
    transition: all 300ms ease;
    letter-spacing: 0.025em;
    line-height: 1.5;
    padding-bottom: 3px;
    border-bottom: transparent;
}
.active:hover{
    border-bottom: 2px solid rgb(88, 18, 138);
    color: rgb(88, 18, 138);
    transition: all 300ms ease;
}
li{
    list-style-type: none;
    padding: 0 12px;
    font-size: 14px;
}
.login_link{
    padding-left: 50px;
}
.sign_up-link{
    text-decoration: none;
    border: none;
    padding: 6px 20px;
    background-color: rgb(100,21,255);
    color: white;
    border-radius: 9999px;
    transition: all 300ms ease;
}
.sign_up-link:hover{
    background-color:rgb(82, 13, 221) ;
    text-decoration: none;
}
.sub_heading{
    color: rgb(36,62,99);
}
.purple{
    color: rgb(100,21,255);
}


/* Burger Menu */
.btn__menu{
    background-color: transparent;
    font-size: 40px;
    border: none;
    text-align: center;
    color: rgb(100,21,255);
    display: none;
}
.menu__backdrop{
    position: absolute;
    background-color: #242424;
    top:0;
    left:0;
    width:100vw;
    height: 100vh;
    z-index:100;
    display: flex;
    justify-content: center;
    transition: all 300ms ease-in-out;
    align-items: center;
    opacity: 0;
    visibility: hidden;
}
.menu_open .menu__backdrop{
    opacity: 1;
    visibility: visible;
}
.menu_open{
    max-height: 100vh;
    overflow-y: hidden;
}
.menu__links{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.menu__list{
    padding: 16px 0px;
}
.menu__link{
    font-size: 16px;
    color: white;
    text-decoration: none;
}
.btn__menu--close{
    right: 20px;
    top:10px;
    position: absolute;
    padding: 8px;
    color: white;
}

/* 
Template image section
*/
@keyframes fade-left {
    0%{
        opacity: 0;
        transform: translateX(500px);
    }
    100%{
        opacity: 1;
        transform: translateX(0);
    }
}
.templates_container{
    display: flex;
    padding: 64px 0px;
    animation: fade-left 1.5s;
}
.right_section{
    width:55%;
}
.left_section{
    width: 45%;
}
.template_img{
    width: 100%;
    max-width: 750px;
}
.template_heading{
    font-size: 60px;
    color: rgb(36,62,99);
}
.template_paragraph{
    padding: 32px 0px;
    font-size: 20px;
    color: rgb(175, 169, 169);
}
.your_email-container{
    max-width: 450px;
}
.btb{
    margin-top: 10px;
    border: none;
    color: white;
    padding: 20px;
    font-size: 17px;
    width: 100%;
    background-color: rgb(100,21,255);
    border-radius: 50px;
    transition: all 300ms ease-in-out;
}
.btb:hover{
    background-color:rgb(82, 13, 221) ;
}
.input_text{
    font-size: 18px;
    font-size: bold;
    padding:  20px;
    width: 100%;
    border-radius: 60px;
    border: 1px solid rgb(207, 207, 207);
    transition: all 300ms ease;
}
.input_text:hover{
    border: 1px solid grey
}
.trsuted_customers{
    margin-top: 40px;
}
.customers_logo{
    margin-top: 10px;
    width: 500px;
}
.trusted_customers-para{
    font-weight: bold;
    color: rgb(204, 202, 202);
}


/*  
  FEATURES
*/
.row{
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    position: relative;
    padding-top: 100px;
}
.holder{
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
}
.services_container{
    display: flex;
    flex-wrap: wrap;
}
.features_element_container{
    width: calc(100% / 3);
    padding-top:45px;
}
.features_element-wrapper{
    display: flex;
}

.features_heading{
    padding-bottom: 12px;
    font-size: 20px;
}
.sub_heading{
    font-weight: 700;
    padding-bottom: 12px;
    font-size: 40px;
}
.features_heading-para{
    width: 100%;
    color: rgb(177, 174, 174);
    max-width: 600px;
    padding: 10px;
}
.features_text-header{
    padding-bottom: 12px;
    font-size: 28px;
}
.features_img{
    padding-right: 16px;
    border: 1px solid rgb(207, 206, 206);
    padding: 14px;
    border-radius: 50%;
}
.border{
    padding-right:20px;
}
.features_text{
    width: 100%;
    max-width: 200px;
}
.features_text-paragraph{
    font-size:15px;
    color: rgb(177, 174, 174);
}
.features_text-header{
    color:rgb(36,62,99)
}
.row:before{
   background: url("blob.svg");
   content: "";
   position: absolute;
   width: 101vw;
   height: 12vw;
   background-repeat: no-repeat;
   transform: translate(-290px, -250px);
   z-index:1;
   opacity: 0.05;
}
.row:after{
    background: url("blob2.svg");
    content: "";
    position: absolute;
    width: 101vw;
    height: 12vw;
    background-repeat: no-repeat;
    transform: translate(1050px, -30px);
    z-index:1;
    opacity: 0.3;
 }

/* 
QUALITY WORK
*/
.quality_work-wrapper{
    display: flex;
}
#quality_work{
    margin: 0 auto;
}
.quality_work-container{
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    animation: fade-left 1.5s;
}
.quality_work-left, .quality_work-right{
    width: 50%;
}
.quality_work-img{
    width: 100%;
    max-width: 600px;
}
.quality_work-header{
    letter-spacing: 0.025em;
    font-size: 12px;
}
.quality_work-wrapper{
    padding-top: 250px;
}
.quality_work-sub{
    padding-top: 10px;
    font-size: 40px;
    color:rgb(36,62,99)
}
.quality_work-para{
    color:rgb(175, 169, 169);
    font-size: 20px;
    padding-top: 10px;
    max-width: 550px;
}
.quality_work-button{
    margin-top: 35px;
    padding: 10px;
    width: 150px;
    background-color: rgb(82, 13, 221);
    color: white;
    border: none;
    border-radius: 50px;
}
.quality_work-left{
    padding-left: 50px;
}

/* 
    Steps
*/

.steps_wrapper{
    display: flex;
    height: 800px;
    align-items:center;
}
.left_side, .right_side{
    width: 50%;
    padding-left: 50px;
}
ol{
    padding-bottom:50px;
}
.steps_img{
    width: 100%;
    max-width: 600px;
}
.heading{
    letter-spacing: 00.025em;
    padding-bottom: 20px;
}
.step_headings{
    display: flex;
    flex-direction: column;
}
.steps_list{
    display: flex;
    padding-left: 0px;
    padding-top: 25px;
}
.step_para{
    font-size: 15px;
    color: rgb(177, 175, 175);
    padding-top: 10px;
    max-width: 300px;
}
.number{
    padding-right:20px;
    font-size: 30px;
}
.step_heading{
    color: rgb(36,62,99);
}
.number{
    color:rgb(218, 218, 218)
}

/* 
Values
*/
.left, .right{
    width: 50%;
}
.values_wrapper{
    display:flex;
    align-items:center;
}
.values_img{
    width:100%;
    padding-right:10px;
}
.values_heading{
    font-size: 25px;
    padding-bottom:20px;
}
.values_sub{
    font-size: 55px;
    font-weight: bold;
    color:rgb(36,62,99);
    padding-bottom: 20px;
}
.values_para{
    color:rgb(177, 174, 174);
    font-size: 18px;
    padding-bottom: 20px;
    max-width: 500px;
    font-weight: bold;
}
.principles{
    display: flex;
}
.principles{
    padding-bottom: 30px;
}
.values_button{
    margin-bottom: 30px;
}
.affordable_para{
    max-width: 250px;
    color: rgb(175, 169, 169);
}
.affordable{
    padding:10px 10px 10px 0px;
}
.a_heading{
    color: rgb(36,62,99);
}
.values_button{
    padding: 15px 20px 15px 20px;
    color: white;
    background-color: rgb(82, 13, 221);
    border: none;
    border-radius: 50px;
    font-weight: 700;
}

/* PRICING */
.plans{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    margin-bottom: 300px;
}
.pricing_para{
    font-size: 20px;
    color: rgb(177, 174, 174);
    max-width: 600px;
    text-align: center;
   margin: 0 auto;
}
.plan-row{
    width: calc(100% / 3);
    max-width: 400px;
    box-shadow: -5px 5px 5px 2px #BFBFBF;
    border-radius: 10px;
}
.wrapper{
    display: flex;
    flex-direction: column;
    text-align: center;
}
.prices{
    border: 1px solid rgb(236, 236, 236);
    display: flex;
    flex-direction: column;
    text-align: center;
    height:200px;
    justify-content: center;
}
.gradient{
    height:10px;
    border-radius: 10px 10px 0px 0px;
    background: linear-gradient(to right, rgba(111, 199, 211, 0.781) 0%, rgba(151, 228, 238, 0.781) 100%);
}
.individuals{
    border: 1px solid rgb(236, 236, 236);
    display: flex;
    flex-direction: column;
    text-align: center;
    height:300px;
    justify-content: center;
}
.btn{
    padding: 15px 20px;
    border: none;
    width:150px;
    border-radius: 50px;
    color: white;
    background: linear-gradient(to right, rgba(111, 199, 211, 0.781) 0%, rgba(151, 228, 238, 0.781) 100%);
}
.plans_button{
    display: flex;
    flex-direction: column;
    text-align: center;
    margin: 0 auto;
    align-items: center;
    height: 100px;
    justify-content: center;
    border: 1px solid rgb(236, 236, 236);
    border-radius: 0px 0px 10px 10px;
}
.indiniduals_heading{
    font-size: 20px;
    font-weight: bold;
}
.p1, .p2, .p3, .p4{
    padding: 10px 0px;
    font-size: 15px;
}
.period{
    font-size: 18px;
    font-weight: bold;
}
.price{
    font-size: 40px;
}
.price_heading-type{
    font-size: 25px;
}
.last{
    background: linear-gradient(to right, rgba(238, 10, 10, 0.781) 0%, rgba(228, 76, 76, 0.781) 100%);
}
.middle{
    background: linear-gradient(to right, rgba(2, 38, 105, 0.781) 0%, rgba(112, 131, 236, 0.781) 100%);
}
.price_middle, .individuals_middle, .button_middle{
    border-top-style: none;
    border-left-style: none;
    border-right-style: none;
}
.individuals_middle, .button_middle{
    border-top: 1px solid rgb(184, 184, 247);
}
.individuals_middle{
    border-bottom:1px solid rgb(184, 184, 247);
}
.button_middle, .prices{
    border-bottom-style:none ;
}
.gradient_middle{
    background: linear-gradient(to right, rgba(2, 38, 105, 0.781) 0%, rgba(112, 131, 236, 0.781) 100%);
}


/* REACT */
.text{
    background-color: rgb(82, 13, 221);
    height: 250px;
    display: flex;
    justify-content: center;
    align-items: center;
    justify-content: space-around;
}
.ul-list{
    display:flex;
}
.text_heading{
    max-width:500px;
    color: white;
    font-size: 32px;
}
.react_wrapper{
    margin-bottom: 100px;
}
.list_items1{
    color: white;
    border: none;
    font-weight: bold;
    padding: 20px 40px 20px 40px;
    border-radius: 50px;
    background-color: rgba(253, 116, 98, 0.918);
    margin-right: 50px;
}
.list_items2{
    color: white;
    border: 1px solid white;
    padding: 20px 40px 20px 40px;
    font-weight: bold;
    border-radius: 50px;
    background-color: rgb(82, 13, 221);
    margin-right: 50px;
}
.container{
    margin-right: 20px;
}




/* FOOTER */
.footer_container{
    width: 100%;
    display: flex;
    background-color: rgb(100,21,255);
    justify-content: center;
    align-items: center;
}
.about{
    width: (100% / 5);
}
.align_items{
    justify-content: center;
}
.box{
    width: 1200px;
}
.box_wrapper{
    display: flex;
    justify-content: space-around;
    margin-bottom: 50px;
    color: white;
    padding: 16px 16px;
}
.copyright{
    display: flex;
    padding: 50px 16px;
    justify-content: space-between;
    color: white;
}
.logo_light-img{
    width:30px;
}
.logo_light{
    display: flex;
}

@media screen and (max-width: 1024px) {
    /* Template */
    .template_heading{
        font-size: 40px;
    }
    .template_paragraph{
        font-size: 15px;
    }
    .input_text{
        font-size: 12px;
        padding: 15px;
        width: 90%;
    }
    .btb{
        font-size: 15px;
        padding: 15px;
        width: 90%;
    }
    .trsuted_customers{
        margin-top: 20px;
    }
    .trusted_customers-para{
        font-size: 10px;
    }
    .customers_logo{
        width: 400px;
    }
    .template_img{
        max-width: 700px;
        padding-left:20px;
    }
    .right_section{
        width: 53%;
    }

    /* FEATURES */
    .quality_work-sub{
        font-size: 30px;
        padding-top: 6px;

    }
    .quality_work-para{
        font-size: 15px;
        padding-top: 6px;
    }

    /* VALUES */
    .values_heading{
        font-size: 15px;
        padding-bottom: 7px;
    }
    .values_sub{
        font-size: 45px;
        padding-bottom: 15px;
    }
    .principles{
        padding-bottom: 20px;
    }

    .plans{
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
    }
    .plan-row{
        width: 100%;
        margin-top:40px
    }
    .middle{
        width: 100%;
    }
    /* USING REACT */
    .text_heading {
        font-size: 25px;
        max-width: 400px;
    }
    /* FOOTER */
    
}

@media screen  and (max-width: 900px){
    .copyright{
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: center;
        margin: 0 auto;
        align-items: center;
    }
    .copyright-statement, .font_awesome{
        margin-top: 20px;
    }
    .box_wrapper{
        display: flex;
        flex-wrap: wrap;
        padding: 0 16px;
        justify-content: space-around;
    }
    .about{
        width: 150px;
    }
    .about_heading{
        margin-top:20px;
    }
}

@media screen and (max-width: 850px){
    .templates_container{
        display: flex;
        flex-direction: column;
        text-align: center;
        margin: 0 auto;
        align-items: center;
    }
    .template_heading{
        font-size: 45px;
    }
    .template_paragraph{
        font-size: 20px;
    }
    .left_section{
        width: 100%;
    }
    .your_email-container {
        max-width: 450px;
        margin: 0 auto;
    }
    .right_section {
        /* width: 53%; */
        margin-top: 30px;
        width: 600px;
    }
    .features_text {
        width: 100%;
        max-width: 200px;
        margin-left: 20px;
    }
    .quality_work-wrapper {
        padding-top: 150px;
    }
    .quality_work-para {
        font-size: 15px;
        width: 320px;
        padding-top: 6px;
    }
    .left_side{
        width: 50%;
    }
    .values_sub {
        font-size: 40px;
        padding-bottom: 15px;
    }
    .values_para{
        font-size: 15px;
    }
    .values_heading{
        font-size: 20px;
    }
    .text{
        display:flex;
        flex-direction: column;
    }
    .text_heading{
        text-align: center;
    }
    .features_element_container {
        width: calc(100% / 2);
        padding-top: 45px;
    }
}
@media screen and (max-width:696px){
    .nav_links{
        display: none;
    }
    .btn__menu{
        display: block;
    }
}
@media screen and (max-width:620px){
    .border{
        padding-right: 0px;
    }
    .features_img{
        padding:7px;
        width:35px;
    }
    .features_text-header{
        font-size: 20px;
    }
    .template_img{
        max-width:550px;
    }
    .quality_work-wrapper {
        display: flex;
        flex-direction: column;
    }
    .quality_work-left, .quality_work-right {
        width: 100%;
    }
    .quality_work-left {
        display: flex;
        padding-left: 0px;
        flex-direction: column;
        text-align: center;
        margin: 0 auto;
        align-items: center;
    }
    .quality_work-para{
        width: 520px;
    }
    .quality_work-button{
        margin: 15px 0px;
    }
    .left_side, .right_side {
        width: 100%;
        padding-left: 0px;
    }
    .steps_wrapper{
        display: flex;
        flex-direction: column;
        text-align:center;
    }
    .steps_img{
        max-width: 400px;
    }
    .steps_list {
        display: flex;
        padding-top: 15px;
        padding-right: 0px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .heading{
        padding-top:20px;
        padding-bottom: 10px;
    }
    #steps{
        padding: 50px 0;
    }
    .values_wrapper {
        display: flex;
        flex-direction: column-reverse;
        align-items: center;
        padding: 100px 0;
    }
    .left, .right{
        width: 100%;
    }
    .values_img {
        width: 400px;
        padding-right: 0px;
    }    
    .right{
        text-align: center;
    }
    .left {
        display: flex;
        align-items: center;
        text-align: center;
        flex-direction: column;
    }
    .principles {
        padding-bottom: 20px;
        display: flex;
        flex-direction: column-reverse;
    }    
    .plans{
        margin-bottom: 100px;
    }
}
@media screen and (max-width:425px){
    .template_heading{
        font-size: 32px;
    }
    .template_paragraph{
        font-size: 15px;
    }
    .customers_logo{
        width: 300px;
    }
    .template_img{
        width: 350px;
    }
    .features_element_container {
        width: 100%;
        padding-top: 45px;
    }
    .features_element-wrapper {
        display: flex;
        justify-content: center;
    }
    .quality_work-para {
        width: 320px;
    }
    .values_img {
        width: 300px;
    }
    .container{
        margin-right: 0px;
    }
    .ul-list {
        display: flex;
        flex-direction: column;
    }
    .list_items1, .list_items2{
        margin-right: 0px;
        padding: 10px 20px ;
    }
    .list_items2{
        margin-top: 10px;
    }
    .text_heading {
        text-align: center;
        font-size: 20px;
    }
    .logo_light-name{
        padding-left: 5px;
    }    
}
@media screen and (max-width: 320px) {
    .template_img{
        padding-left: 0px;
        width: 290px;
    }
    .customers_logo{
        width: 240px;
    }
    .quality_work-sub{
        font-size: 20px;
    }
    .quality_work-para{
        font-size: 12px;
        width: 290px;
    }
    .sub_heading{
        font-size: 25px;
    }
    .values_img{
        width: 290px;
    }
    .about{
        width:100px;
    }
}