*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
:root{
    --primary-color:rgb(15,77,104);
}
a{
    text-decoration: none;
    color: black;
}
ul{
    list-style: none;
}

body {
    font-family:Poppins;
    background-color: #f5f5f5;
}
.parent{
    background-color: rgb(244, 245, 246);
}
.parent .continer{
    width: 90%;
    margin: auto;
    /* padding: 20px 0; */
}
.container{
    /* background-color: aqua; */
    width: 90%;
    margin: auto;
}
/* start header */
header{
    /* margin-top: 46px; */
    /* margin-bottom: 46px; */
    display: flex;
    flex-direction: column;
    
}
header .logo{
width: 118px;
height:53.45px;
    
}

header .navbar{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
}

header .navbar nav ul{
    display: flex;
    gap: 40px;
}

header .navbar nav ul li{
    line-height: 27px;
    font-weight: 500;
    font-size: 18px;
    text-transform: capitalize;

}
header .navbar nav ul li:hover{
    text-decoration: underline solid rgb(14, 86, 117) 2px;
  }
.uniqe-text{
    color: var(--primary-color);
}
header .navbar nav ul .categories{
    display: flex;
 align-items: center;
}
header .navbar nav ul .categories .arrow-down{
    margin-left: 10px;
}

header .navbar #language{
font-size: 18px;
line-height: 27px;
font-weight: 700;
}
header .navbar .img-icons{
    margin-right: 1.5rem;
    
}
header .navbar .img-icons a img{
    width: 32px;
    height: 32px;
   margin-right: 15px;
}


header .searchbar{
    /* background-color: aqua; */
    margin-top: 10px;
}
header .searchbar form{
    position: relative;
    z-index: 1000;
}
 header .searchbar form select,
 header .searchbar form #search{
    border-radius: 10px;
    border: 2px solid #171717;
    
}
 header .searchbar form select{
    width: 23%;
    padding:12px 25px;
}
header .searchbar form #location-icon{
    position: absolute;
    top: 13px; 
    left: 8px;
    height: 24px;
    width: 24px;
}
header .searchbar form #search{
    width: 59%;
    margin: 3px;
    padding:14px 18px;
   
}
 header .searchbar form #search-icon{
    position: absolute;
    right: 19%;
    top: 14px;
    height: 24px;
    width: 24px;
   
}

 header .searchbar form input[type="button"]{
    width: 15%;
    padding:8px 16px;
    border-radius: 10px;
    font-weight: 700;
    font-size: 20px;
    line-height: 30px;
    border: none;
    background-color: var(--primary-color);
    color: #fff;
}
 header .searchbar form input[type="button"]:hover{
    cursor: pointer;
    background-color:rgba(15, 77, 104, 0.736) ;
}

/* end header */


/* main */
main .side,main .side a{
    margin-top: 20px;
    color: rgba(15, 77, 104, 0.408);
    text-transform: capitalize;
    font-size: 27.2px;
}

main .side span{
    margin-top: 20px;
    color: var(--primary-color);
    font-weight: 500;
    font-size: 32px;
}
main .about{
    /* background-color: aqua; */
    display: flex;
    justify-content: space-evenly;
    align-items: center;
}
main .about .content .title{
   margin-bottom: 1rem;
   text-transform: capitalize;
    font-size: 2rem;
    font-weight: 600;
    color: #082634;
}
main .about .content p{
    max-width: 70%;
    line-height:42px;
    font-size: 18px;
}

main .Services{
    margin-top: 2rem;
    margin-bottom: 2rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    grid-gap: 20px;
}
main .Services .Service{
    /* background-color: aqua; */
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 20px;
    border-radius: 20px;
    border: solid 2px var(--primary-color);
    color: rgb(15,77,104);
}
main .Services .uniqe {
    background-color: var(--primary-color);
    color: white;
}
main .Services .Service .num{
    letter-spacing: 1px;
    font-weight: 700;
    font-size: 20px;
}



main .carts{
    margin-top: 4rem;
    margin-bottom: 2rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
    grid-gap: 20px;
}
main .carts .cart{
    height: 50vh;
    background-image: url('../images/image\ 51.svg');
    background-position: center;
    background-size: contain;
    background-repeat:no-repeat;
    border: solid 1px var(--primary-color); 
    border-radius: 8px;
    background-color: #EEEEEE;

}
main .carts .cart .content{
    background-color: #EEEEEE;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
    border-radius: 10px;
    margin:13rem 10px 0 10px ;
}
main .carts .cart .content .name{
    font-weight: 900;
    font-size: 25px;
}
main .carts .cart .content ul{
    list-style: none;
    display: flex;
    gap: 10px;
}
.icon-dotted{
    text-align: center;
    padding-bottom: 2rem;
}
.icon-dotted i{
    color: rgba(206, 206, 206, 0.804);
    font-size: 10px;
}
.icon-dotted .uniqe{
    color: var(--primary-color);
}




/* start  footer */

footer{
    background-color:var(--primary-color);  
}
footer .continear{
    width: 90%;
    padding: 20px 20px 0 0;
    margin-bottom: 1rem;
    display: flex;
    justify-content:space-around;
    align-items:center ;
    
}

footer .continear .coulmn1 .social {
    margin-top: 30px;
}
footer .continear .coulmn1 .social ul{
    display: flex;
    gap: 10px;
}
footer .continear .coulmn1 .social ul li i
,footer .continear .coulmn  ul li a
,footer .continear .coulmn  ul li{
    color: white;
    font-size: 14px;
}
footer .continear .coulmn  .row1{
    font-size: 18px;
}
footer .continear .coulmn1 .row1{
    color: white;
    font-size:25px;
    margin-bottom: 10px;
}
footer .continear .coulmn{
    margin: 10px 5px;
    padding-top: 20px;
}
footer .continear .coulmn ul{
    display: flex;
    flex-direction: column;
    gap:16px;
}
footer .copyright{
    height: 13%;
    /* background-color: rgb(25, 210, 86); */
}
footer .copyright p a{
    margin: 0 1rem;
}
footer .copyright p,
footer .copyright p a{
    color: white;
    text-align: center;
    padding-top: 10px;
    font-size: 15px;
    padding-bottom: 1rem;
}
/* End  footer */


@media screen and (min-width: 500px) and (max-width:900px){

    /* start header */
header{
    padding-top: 20px;   
}

header .navbar{
    display: flex;
    flex-direction: column;
    padding: 10px 0;
}

header .navbar nav ul{
    width: 100%;
    gap: 40px;
    margin: 10px;
}
header .navbar nav ul li{
    font-weight: 600;
    font-size: 25px;
}
header .navbar #language{
    margin: 10px;
    font-size: 25px;
    }
    header .navbar .img-icons{
        margin-right: 0rem;
        
    }
    header .navbar .img-icons a img{
       margin-right: 20px;
    }
    
    header .searchbar{
        /* background-color: aqua; */
        margin-top: 10px;
    }
     header .searchbar form select{
        width: 24%;
    }
    header .searchbar form #location-icon{
        top: 16px; 
        left: 5px;
    }
    header .searchbar form #search{
        width: 40%;
    }
     header .searchbar form #search-icon{
        right: 39%;
        top: 12px;
       
    }
    
     header .searchbar form input[type="button"]{
        width: 30%;
    }
      main .about{
        flex-direction: column;
    }
    main .about .content .title{
        margin-top: 1rem;
     }
     main .about .content p{
        max-width:  100%;
        /* background-color: aqua; */
        padding: 10px;
        margin-bottom: 1rem;
     }
     main .about .imgs{
       gap: 10px;
        margin-bottom: 1rem;
        display: flex;
       
     }footer .continear{
        padding-left: 2rem;
        width: 95%;
        align-items:flex-start ;
    }
    footer .continear .coulmn1 .social {
        margin-top: 10px;
    }
    footer .continear .coulmn1 .row1{
        margin-top: 18px;
        font-size:20px;
        margin-bottom: 10px;
    }
    footer .continear .coulmn1 .social ul li i
    ,footer .continear .coulmn  ul li a
    ,footer .continear .coulmn  ul li{
        font-size: 10px;
    }
    footer .continear .coulmn  .row1{
        font-size: 15px;
    }
    footer .continear .coulmn {
        font-size: 20px;
        margin:0 10px;
    }
    
    footer .copyright p a{
        margin: 0 0.2rem;
    }
    footer .copyright p,
    footer .copyright p a{
        color: white;
        text-align: center;
        padding-top: 10px;
        font-size: 15px;
        padding-bottom: 1rem;
    }  
     main .about .imgs .img3{
     width:300px;
     } 

    
}


@media screen and (max-width: 500px){
    .container,.continear{
        width: 95%;
        margin: auto;
    }
    /* start header */
header{
    padding-top: 10px;   
}
header .logo{
width: 118px;
height:53.45px;
    
}

header .navbar{
    display: flex;
    flex-direction: column;
    padding: 10px 0;
}

header .navbar nav ul{
    width: 100%;
    gap: 20px;
    margin: 10px;
}
header .navbar #language{
    margin: 10px;
    }
    header .navbar .img-icons{
        margin-right: 0rem;
        
    }
    header .navbar .img-icons a img{
       margin-right: 20px;
    }
    
    header .searchbar{
        margin-top: 10px;
    }
    header .searchbar form{
        position: relative;
        z-index: 1000;
    }
     header .searchbar form select,
     header .searchbar form #search{
        border-radius: 10px;
        border: 2px solid #171717;
        
    }
     header .searchbar form select{
        width: 24%;
        padding:12px 10px 12px 16px;
    }
    header .searchbar form #location-icon{
        top: 18px; 
        left: 5px;
        height: 15px;
        width: 15px;
    }
    header .searchbar form #search{
        width: 40%;
        padding-left: 1px;
        padding-right: 0px;
       
    }
     header .searchbar form #search-icon{
        right: 36%;
        top: 10px;
        height: 15px;
        width: 15px;
       
    }
    
     header .searchbar form input[type="button"]{
        width: 30%;
    }


    main .about{
        flex-direction: column;
    }
    main .about .content .title{
        margin-top: 1rem;
     }
     main .about .content p{
        max-width:  100%;
        padding: 10px;
        margin-bottom: 1rem;
     }
     main .about .imgs{
       gap: 10px;
        margin-bottom: 1rem;
        display: flex;
        flex-direction: column;
       
     }
     main .about .imgs .img3{
     width:300px;
     } 
     footer .continear{
        padding-left: 2rem;
        width: 95%;
        align-items:flex-start ;
    }
    footer .continear .coulmn1 .social {
        margin-top: 10px;
    }
    footer .continear .coulmn1 .row1{
        margin-top: 18px;
        font-size:20px;
        margin-bottom: 10px;
    }
    footer .continear .coulmn1 .social ul li i
    ,footer .continear .coulmn  ul li a
    ,footer .continear .coulmn  ul li{
        font-size: 10px;
    }
    footer .continear .coulmn  .row1{
        font-size: 15px;
    }
    footer .continear .coulmn {
        font-size: 20px;
        margin:0 10px;
    }
    
    footer .copyright p a{
        margin: 0 0.2rem;
    }
    footer .copyright p,
    footer .copyright p a{
        color: white;
        text-align: center;
        padding-top: 10px;
        font-size: 15px;
        padding-bottom: 1rem;
    }
}