@import url('https://fonts.googleapis.com/css2?family=Geist:wght@100..900&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Outfit:wght@100..900&family=Pacifico&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Young+Serif&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Geist:wght@100..900&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Outfit:wght@100..900&family=Overpass:ital,wght@0,100..900;1,100..900&family=Pacifico&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Young+Serif&display=swap');


*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
body{
  
    font-family: "Overpass", sans-serif;
}

main{
    width: 100%;
    height: 100vh;
    background-color: hsl(356, 100%, 66%);
    border-bottom-left-radius: 15%;
    background-image: url(images/bg-pattern-intro-desktop.svg);
    background-repeat: no-repeat;
    background-position: 21% 54%;
}
header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px ;
    flex-wrap: wrap;
    
}
nav{
    display: flex;
    gap: 20px;
}
.logo{
    font-size: 20px;
    color: white;
    font-weight: 600;

}
.nav_container{
    gap: 20px;
   
}

.items, .child{
    list-style: none;
    cursor: pointer;
    color: #fff;   
}
.items{
    font-weight: 400;
    font-size: 1.2rem;
    position: relative;
    
}
.child {
   position: absolute;
   display: none;
   font-size: 16px;
   margin-top: 10px;
   background-color: #fff;
    padding: 10px;
    color: #000;
    border-radius: 5px;
    z-index: 99;
    line-height: 28px;
   

}
.child li:hover{
    background-color: hsl(355, 100%, 74%);
    color: #fff;
}
.open{
    display: block;
}

.header-btn{
    display: flex;
    gap: 20px;
}
.header-btn .login{
    padding:5px 15px;
    background-color: transparent;
    border: none;
    font-size: 1.2rem;
    color: #fff;
    transition: all .6s ease-out;
}
.header-btn .login:hover{
    transform: scale(1.5s);
    background-color: #fff;
    border-radius: 20px;
    color:hsl(356, 100%, 66%) ;
}
.header-btn .signUp{
    padding:7px 20px;
    background-color: #fff;
    border-radius: 20px;
    border: none;
    font-size: 1.2rem;
    color: hsl(356, 100%, 66%);
}
.header-btn .signUp:hover{
    background-color: transparent;
    color: #fff;
}
.container{
       text-align: center;
       margin-top: 30px;
       transition: all 0.5s ease-in;
       position: absolute;
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
}

.textContainer h2{
    font-size: 3rem;
    color: #fff;
    margin-bottom: 15px;
}
.textContainer p{
    color: #fff;
    font-size: 20px;
    margin-bottom: 10px;
}
.button{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}
.buttonStart{
    padding: 10px 15px;
    border-radius: 20px;
    border: none;
    outline: none;
    color: hsl(356, 100%, 66%);
    font-size: 16px;
}
.buttonStart:hover{
    background-color: hsl(356, 100%, 66%);
    color: #fff;
}
.buttonLearn{
    padding: 10px 15px;
    border:1px solid #fff;
    border-radius: 20px;
    background-color: transparent;
    color: white;
    font-size: 16px;
}
.buttonLearn:hover{
    background-color: #fff;
    color: hsl(0, 3%, 37%);
}
.media{
    width: 100%;
    /* height: 100vh; */
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 100px 50px;
    opacity:0;
    visibility: hidden;
    backdrop-filter: blur(32px);
    transition: all .6s ease-in-out;
    
}
.nav_container_media nav{
    display: flex;
    flex-direction: column;
    
}
.nav_container_media .child{
    right: 100px;
    top: 0;

}
.media.show{
    opacity: 1;
    visibility: visible;
    left: 0;
}
.header-btn_media{
    
    display: flex;
    gap: 10px;
    flex-direction: column;
}
.header-btn_media .login{
    padding:5px 15px;
    background-color: transparent;
    border: none;
    font-size: 16px;
    color: #fff;
    transition: all .6s ease-out;
}
.header-btn_media .login:hover{
    transform: scale(1.5s);
    background-color: #fff;
    border-radius: 20px;
    color:hsl(356, 100%, 66%) ;
}
.header-btn_media .signUp{
    padding:7px 20px;
    background-color: #fff;
    border-radius: 20px;
    border: none;
    font-size: 16px;
    color: hsl(356, 100%, 66%);
}
.header-btn_media .signUp:hover{
    background-color: transparent;
    color: #fff;
}
#click{
    color: #fff;
    font-size: 30px;
    display: none;
    z-index: 10001;
}

/* section 2 */
section{
    margin-top: 50px;
   
}
section h2{
   margin-top: 50px;
   margin-bottom: 15px;
   text-align: center;
   color: hsl(208, 49%, 24%);
}
.sec2_container{
    display: flex;
    gap: 20px;
    align-items: center;
}
.sec2_container .leftCOl{
    margin-top: 50px;
    padding: 50px;
} 

.leftCol{
    flex-basis: 50%;
}

.leftCol .title{
    margin: 10px;
    color: hsl(208, 49%, 24%);
    margin-left: 50px;
    
}

.leftCol p{
    line-height: 30px;
    font-size: 16px;
    margin-left: 50px;
    transition:all .6s ease-in;
} 

.rightCol{
    flex-basis: 50%;
   overflow: hidden;
}
.rightCol .svg-col{
    margin-right: -50px;
    
} 


.svg-col img{
    width: 100%;
    height: 100%;
    position: relative;
    right: -180px;
     transition: all .6s ease-in-out;
}


/* section 3 */
.sec3{
    background-color: hsl(237, 17%, 21%);
    height: 480px;
    border-radius: 0px 87px 0px 87px;
    margin-bottom: 113px;
    padding: 32px;
    margin-top: 31px;
    background-image: url(images/bg-pattern-circles.svg);
    background-repeat: no-repeat;
    background-position: -259px -411px;
    background-size: 70%;
}
.sec3_container{
    display: flex;
}
.sec3_leftcol{        
    flex-basis: 47%;
}
.sec3_leftcol img{
    width: 100%;
    transition: all .6s ease-in-out;
    margin-top: -119px;
}
.sec3_rightcol{
    flex-basis: 50%;
    font-size: 17px;
    color: white;
}
.sec3_rightcol h2{
    color: #fff;
    font-size: 20px;
}
.sec3_rightcol p{
    font-size: 16px;
    letter-spacing: 0.5px;
    word-spacing: 2px;
    font-weight: 300;
    line-height: 2;
}
/* section 4 */
.sec4-container{
    display: flex;
    align-items: center;
    margin-bottom: 69px;
}
.sec4_leftcol{
    flex-basis: 50%;
    overflow: hidden;
}
.sec4_leftcol img{
    width: 100%;
    height: 100%;
    transition: all .6s ease-in-out;
    position: relative;
    left: -199px;
    
}
.mobile-img{
    display: none;
}
.sec4_rightcol{
    flex-basis: 50%;

    color: hsl(237, 23%, 32%);
}
.sec4_rightcol p{
    font-size: 16px;
    letter-spacing: 0.5px;
    word-spacing: 2px;
    font-weight: 300;
    transition: all .5s ease-in-out;
}
/* footer */

footer{
    background-color: hsl(240, 10%, 16%);
    border-radius: 0 100px 0 0;
    padding:5% 15%;
}

.footer_container{
    display: flex;
    justify-content: space-between;
    color: #fff;
    font-size: 2rem;
    transition: all .6s ease-in-out;
}

.footer_container ul{
    list-style: none;
   
}
.footer_container ul li .top{
    font-size: 1.5rem;
}
.footer_container li{
    margin-bottom: 10px;
    font-size: 16px;
    font-weight: 300;
}
.footer_container .top{
    margin-bottom: 30px;
}
.attribution {
    font-size: 16px;
    text-align: center;
    padding: 20px;
  }
  .attribution a {
    color: hsl(228, 45%, 44%);
  }
@media(max-width: 900px){
    .nav_container, .header-btn{
        display:none;

    }
    .items{
        font-size: 1.5rem;
    }
    .header-btn_media .login, .header-btn_media .signUp{
        font-size: 1.5rem;
    }
    .container{
        padding: 0 5px;
        margin-top: 90px;
    }
    #click{
        display: block;
    }
    
}
@media(max-width: 750px){
    section h2{
        text-align: center;
    }
    .sec2_container{
        flex-wrap: wrap;
        flex-direction: column-reverse;
    }
    .leftCol, .rightCol{
        flex-basis: 100%;
    }
    .leftCol {
        text-align: center;
        padding: 0 20px;
        }
    .leftCol h2{
        text-align: center;
        font-size: 2rem ;
    }
    .leftCol .title, 
      .leftCol p {
        margin-left: 0;
        
    }
    .rightCol .svg-col{
        margin-right: unset;
    }
    .svg-col img{
        right: unset;
    }
    .sec3{
        background-position: center -80px;
        background-size: contain;
        margin-top: 119px;
        height: unset;
        margin-bottom: unset;
    }
    .sec3_container{
        flex-wrap: wrap;
    }
    .sec3_leftcol, .sec3_rightcol{
        flex-basis: 100%;
    }
    .sec3_rightcol{
        text-align: center;
    }
    .sec3_rightcol h2{
        font-size: 2rem;
    }
    .sec4-container{
        flex-wrap: wrap;
        margin: 30px 0;
    }
    .sec4_leftcol, .sec4_rightcol{
        flex-basis: 100%;
    }
    .sec4_leftcol{
        overflow: visible;
    }
    .sec4_leftcol img{
        position: unset;
        left: unset;
    }
    .desktop-img{
        display: none;
    }
    .mobile-img{
        display: block;
    }
    .sec4_rightcol{
        text-align: center;
        padding: 0 20px;
        line-height: 2;
        font-size: 1.2rem;
    }
    .footer_container{
        flex-wrap: wrap;
        flex-direction: column;
        text-align: center;
        padding-top: 20px;
    }
    .footer_container ul{
        padding: 30px 0;
    }
}