picture img{
    width: 100%;
    height: auto;
    display: block;
}

input{
    border:none;
}

@media (max-width: 768px){
    .contenta,.contentd, .contentb, .navdiv2{
        flex-direction: column;
        justify-content: center;
        width: 100%;
        
    }
    .navdiv2 li{
        font-size: 0.875rem;
    }
    .navdiv2 p{
        padding: 0rem;
        margin: 0;
        font-size: 0.875rem;
    }
    .half1 h6{
        padding: 0.5rem;
        margin: 0;
        font-size: 0.875rem;
    } 
    .half1{
        flex-wrap: wrap;
    }
    .navbar{
        flex-direction: column;
        gap: 10px;
    }
    .text{
        margin: 2px red;
    }
    .content h6{
        text-align:center ;
        justify-content: space-around; 
    }
    .icon1{
        transform: scale(0.8);
        margin-left: 2px;
    }
    
} 

html,body{
    background-color: white;
    width:100%;
    padding: 0;
    margin: 0;
    
}
.curve{
    width: 100%;
    margin-top: 0rem;
    margin-bottom: 0rem;
}
.curve2{
    width: 100%;
    margin-top: 0rem;
    margin-bottom: 0rem;
}
*{
   box-sizing: border-box;
}

.contentb div .image{
    margin-right: none;
    padding-right: none;
    box-sizing: content-box;
}
ul{
    list-style: none;
}
.navbar{
    padding-left: 0.93rem;
    padding-right: 1.56rem;
    background-color: white;
}

a{
    text-decoration: none;
}
.iccons a{
    color: white;
}
.navdiv{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color:black;
    margin-top: 50px;

}
body{
    overflow-x: hidden;
}
.navdiv ul li{
    list-style: none;
    display: inline-block;
   gap: 40px;
}

.navbar2{
    padding-left: 0.94rem;
    padding-right: 0.94rem;
    color: white;
}



.navdiv2{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}


.navdiv2 ul li a {
    color: white;

}

.navdiv2 .items li {
    list-style: none;
    display: block;
    gap: 20px;
    color: white;
}

.navdiv2 .items2 li {
    list-style: none;
    display: inline-block;
    gap: 1.875rem;
    color: white;
    padding-left: 0.625rem;
    align-items: center;
    justify-content: left;
}





.navdiv ul li a{
    color: black;
    font-size: 1.375rem;
    margin-right: 3.44rem;
}

.content{
    
    font-family: OpenSans;
    
    width: 100%;
    margin: none;
    align-items: center;
    justify-content: space-between;
    padding: 2.19rem;
    background-color:  white;
    margin-top: 2.8rem;
    margin-top: 0px;
}


.content1{
    font-family: OpenSans;
    
    width: 100%;
    margin: none;
    align-items: center;
    justify-content: space-between;
    padding: 2.19rem;
    background-color:  hsl(192, 100%, 9%);
    margin-top: 2.8rem;
    margin-top: 0px;
}



.mockup{
    width: 100%;
    margin-top: 5.625rem;
    text-align: center;
}

.col{
    width: 100%;
    margin: 0px;
    
}

.image{
    
     text-align: center;
     box-sizing: border-box;
}

.text{
    font-size: 0.94rem;
    font-weight: 400;
    padding-left: 21.875rem;
    padding-right: 21.875rem;
}
.title1{
    font-size: 2.19rem;
    font-weight: 700;
}

.text1{
    font-size: 1.25rem;
    font-weight: 400;
  
}
.title2{
    font-size: 2.18rem;
    font-weight: 700;
}

.text2{
    font-size: 1.23rem;
    font-weight: 400;
}    
.title3{
    font-size: 2.18rem;
    font-weight: bold;
    

}


.content2{
    font-family: OpenSans;
    display: flex;
    width: 100%;
    margin: none;
    align-items: center;
    justify-content: space-between;
    padding: 2.19rem;
    margin-top: -0.625rem;
    background-color:hsl(207, 100%, 98%);
    height: auto;
}


.black{
    width: 100%;
    margin-bottom: 0px;
}
.contentb{
    font-family: OpenSans;
    display: flex;
    width: 100%;
    margin: none;
    align-items: center;
    justify-content: space-between;
    padding: 2.1875rem;
    margin-top:0px;
    background-color:white;
    height: auto;
}

.contentd{
    font-family: OpenSans;
    display: flex;
    width: 100%;
    margin: none;
    align-items: center;
    justify-content: space-between;
    padding: 2.19rem;
    margin-top: 0px;
    background-color:hsl(207, 100%, 98%);
    height: auto;
}
.content2 div p{
     text-align: left;
}

.content2 div h6{
    text-align: left;
    font-size: 1.4375rem;
}
.contenta{
    font-family: OpenSans;
    display: flex;
    width: 100%;
    margin: none;
    align-items: center;
    justify-content: space-between;
    padding-top: 2.8125rem;
    padding-right: 4.6875rem;
    margin-top: -0.625rem;
    background-color:white;
    height: auto;
    text-align: center;
     
}


.icon{
    border: 0.1875rem;
    border-radius: 50%;
    display: inline-block;
    /* padding-left: 30px; */
    text-align: left;
    padding: none;
    margin-left: -2.1875rem;
    margin-top: -15%;
    
}
ul li a p{
    font-size: 0.92rem;
    padding-right: 12.52rem;
    font-weight: 500;
}

ul li  p{
    font-size: 0.92rem;
    padding-right: 12.52rem;
    font-weight: 500;
}
.texts{
    margin-top: -0.625rem;
    font-size: large;
    font-weight: 500;
}
footer{
    background-color:hsl(192, 100%, 9%);
    color: white;
    height: auto;
    width:100%;
    padding: 3.4375rem 0;
    margin: 0px;
    justify-self: center;
    font-size: 1.5625rem;
    margin-top: 0px;
}

.btn{
    background-color: hsl(322, 100%, 66%) ;
    color: white;
    padding:0.625rem 1.875rem;
    border:none;
    box-sizing: border-box;
    width: 11.25rem;
    font-size: 1.5625rem;
    border-radius: 0.625rem;
    margin-left: 1.5rem;
    height:3.4375rem ;
    margin-top: 0.375rem;

}

.btn:active{
    cursor: pointer;
}




.input2{
    width:15.625rem;
    height:1.875rem;
}

.input{
    width:14.375rem;
    height: 3.43rem;
    border-radius: 0.625rem;
}

.icon{
    transform:scale(0.3) ;
}



#free{
      width: 6.5625rem;
      height: 1.875rem;
      padding-left: 0.625rem;
      padding-right: 0.625rem;
      box-sizing: border-box;
      color: hsl(322, 100%, 66%);
      background-color: white;
      border: 0.0625rem solid hsl(322, 100%, 66%);
      border-radius: 0.92rem;
      transform: scale(1.5);
      
}
#free2{
    width: 12.81rem;
    height: 1.875rem;
    padding-left: 0.625rem;
    padding-right: 0.625rem;
    box-sizing: border-box;
    background-color: hsl(322, 100%, 66%);
    color: white;
    border: 2.6px solid hsl(322, 100%, 66%);
    border-radius: 0.92rem;
    transform: scale(1.5);
    font-size: 0.625rem;
    box-shadow: 0.1875rem grey;
    font-weight: 700;
}

.half1{
    justify-content: center;
    text-align: center;
    
}

.half2{
    text-align: center;
    height:18.75rem;
    justify-content: center;
}

#free2:active{
    cursor: pointer;
    background-color: hsl(321, 100%, 78%);
    
    border: none;
}

#free:active{
    cursor: pointer;
    color: hsl(321, 100%, 78%);
    border:2.6px solid hsl(321, 100%, 78%);
}


.iccons:active{
    color: lightblue;
}


