@import url('https://fonts.googleapis.com/css2?family=Bai+Jamjuree:ital,wght@0,300;0,500;1,400&family=Barlow+Condensed:wght@200;300&family=Hanken+Grotesk:wght@200;500&family=Lexend+Deca&family=Nunito:wght@200&family=Overpass:wght@100;200&family=Poppins:wght@100&family=Roboto:wght@300&display=swap');



*{
margin: 0; 
padding: 0;
}
body {
background: white;
min-height: 100vh;
}


nav {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
font-size: 18px;
font-weight: bold;
font-family: sans-serif;
text-align: center;
padding: 15px;
width: 106%;
padding: 0.5rem;
background-color: hsl(13, 100%, 72%);
border-bottom-left-radius: 6rem;
background-image:  url('../img/bg-pattern-intro-mobile.svg');

background-position: center ;
background-repeat: no-repeat;


}
main{
    text-align: center;
    align-items: center;
    justify-content: center;
}


nav a {
text-decoration: none;
color:white;

}

button{
    width: 9rem;
    height: 4rem;
    background-color: white;
    color: #000;
    border-radius: 2rem;
    font-size: 20px;
    font-weight: bold;
    border: none;
    margin-top: -1rem;
    cursor: pointer;
}

.icon-hamburger{
    margin-top: 4rem;
    margin-right: 1rem;
}

.svg{
    margin-top: 4rem;
    margin-left: 1rem;
}
ul li ul.dropdown{
    width: 100%;
    position: absolute;
    z-index: 999;
}
.list{
	display: flex;
	list-style: none;
	gap: 25px;
}

#toggler, label{
display: none;
}
label i{
color:white;
}

img{
    color: black;
}

.hero , .main{
    color:white;
    padding-top: 3rem;
    font-size: 37px;
    margin-left: rem;

    font-weight: 700;
    text-align: center;
    font-family:'Ubuntu' sans-serif;
}


.span{
   color: white;
   text-align: center; 
   align-content: center;
   margin-top: 1rem;
   font-size: 25px;
   font-weight: lighter;
   font-family: 'Ubuntu', sans-serif;
  

}

.click{
 
   display:flex;
   align-items: center;
   justify-content: center;
   gap: 1rem; 
   margin-top: 4rem;
   
}



.btn{
    background-color: white;
    color: hsl(356, 100%, 66%);
    border-radius: 2rem;
    font-size: 20px;
    font-weight: bold;
    border: none;
    width: 10rem;
}
.but{
   background-color: hsl(0, 0% 98);

   background-color: transparent;
   color: white;
   box-shadow: inset 0 0 0 0.2rem;
   width: 10rem;
   height: 4rem;
   font-size: 20px;
}

h1{
    margin-top: 4rem;
    font-family:'Ubuntu', sans-serif;
    font-size: 35px;
 
    color: hsl(237, 17%, 21%);
}

h2{
    color: white;
    font-family: 'Ubuntu', sans-serif;
    font-size: 45px;
    margin: 0.8rem;
    margin-top: 8rem;
}
p{
   color: hsl(240, 4%, 67%); 
   font-size: 18px;
   font-weight: 300;
   font-family:'Overpass', sans-serif;
    margin: 3rem;
    font-weight: lighter;
   
}

h3{
    color: white;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 45px;
    text-align: center;
    margin-top: -3rem;  
}

h5{
    margin: 1rem;
}



.image{
    margin-top: 5rem;
    
}

.laptop{
    width: 25rem;
}
.editor{
    font-size: 36px;
  
}

.mob{
   height: 46rem;
   width: 100%;
   padding: 0.9rem;
   margin-top: 16rem;
   background-color: hsl(236, 44%, 14%); 
   background-image: url('../img/bg-pattern-circles.svg');
   background-size: 100%;
   background-repeat: no-repeat;
   background-position: center;
    border-top-right-radius: 6rem;
    border-bottom-left-radius: 6rem;
}

.mobile{
    width: 25rem;
    margin-left: -2rem;
    margin-top: -10rem;
}



h4{
  font-size: 20px;
  color: white; 
  font-family: 'Ubuntu' sans-serif;
}

.footer-column {
   
    margin-right: 20px;
    box-sizing: border-box;
    text-align: center;
    margin-top: 4rem;
}

.footer-column:last-child {
    margin-right: 0;
}

ul {
    list-style: none;
    padding: 0;
    font-family: 'Ubuntu' sans-serif;
    margin-top: 1rem;
}

 a , h5{
    text-decoration: none;
    color: hsl(240, 4%, 67%);
    font-family: 'Ubuntu' sans-serif; 
    font-family: 'Ubuntu', sans-serif;
   font-size: 20px;
   margin-top: 4px;
}

h3 {
    font-size: px;
    text-align: center;

}
/* a , h5 ,h4{
  display: block;
 text-decoration: none;
 text-align: center;
 color: white;
 gap: 2rem;
 margin: 0.6rem;
 font-family: 'Ubuntu', sans-serif; 
}

h5{
    color: hsl(240, 4%, 67%);  
}
h4{
    margin-top: 3rem;
}

.col3{
    margin-top: 10px;
} */



footer{
    background-color:hsl(237, 17%, 21%);
    padding: 10rem 3rem;
    border-top-right-radius: 7rem;
    margin-right: -2rem;
    color: hsl(240, 4%, 67%);
    font-family: 'Ubuntu' sans-serif;
    
}


@media (min-width:700px){
    /* .menu{
        width: 100%;
        max-height: 0;
        overflow: hidden;
        }
        label{
        display: inline-flex;
        }
        #toggler:checked~.menu{
        max-height: 100%;
        }
        .list{
        flex-direction: column;
        align-items: center;
        padding: 25px;
        background-color: hsl(356, 100%, 66%);
        border-radius: 4rem;
        
        } */
}

@media (min-width:720px){
    .menu{
        float: right;
        margin-left: 7rem;

    }

    .hero {
        margin-left: 6rem;
    }

    .span{
        margin-left: 6rem;
    }

    button{
        margin-top: -3rem;
    }

    .list{
        gap: 15px;
        margin-top: -6rem;
        gap:5px;
        margin-left: 3rem;
    }

    .mobile{
        width: 30rem;
        margin-left: -5rem;
    }

    .click{
        margin-left: 3rem;
    }

    

   
}

@media (min-width:800px) {
    .list{
        margin-left: 5rem;
    }

    .hero{
        margin-left: 8rem;
        margin-top: -10rem;
    }

    .span{
        margin-left: 9rem;
        margin-top: 6rem;
    }

    .click{
        margin-left: 6rem;
    }
    p{
        font-size: 30px;
    
    }

    .laptop{
        margin-top: 4rem;
        width:40rem ;
    }

    h1{
        font-size: 40px;
    }

    h2{
        margin-top:1rem;
        font-size: 35px;
    }
    .list{
        margin-top: -5rem;
    }

    .laptop{
        width: 50rem;
    }

    
    .image{
        width: 35rem;
    }
    h5{
        margin: 0.5rem;
    }
    .footer-column{
        display: inline-block;
        gap: 3rem;
        margin-left: 6em;
        flex-direction: row-reverse ;
    }
}

@media (min-width:900px) {
    .hero{
        text-align: center;
    }
    .span{
        text-align: right;
    }

    .click{
        margin-left: 7rem;
    }
    h3{
        text-align: left;
    }

    .list{
        margin-top: 4rem;
    }

    .footer-column{
        display: inline-block;
        gap: 3rem;
        margin-top: 3rem;
        margin-left: 7rem;
        flex-direction: column-reverse;
    }
    h5{
        margin: 1.5rem;
    }

    .img{
        margin-top: -1rem;
        margin-left: -10rem;
        float: left;
    }

    h4{margin-top: -2rem;
        margin-left: rem;
    }
}


@media (min-width:1000px){


}



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

.menu{
width: 100%;
max-height: 0;
overflow: hidden;
}
label{
display: inline-flex;
}
#toggler:checked~.menu{
max-height: 100%;
}
.list{
flex-direction: column;
align-items: center;
padding: 25px;


}
}