.logo{
    height: 50px;
    width: 160px;
}
@import url('https://fonts.googleapis.com/css2?family=Spartan:wght@100;200;300;400;500;600;700;800;900&display=swap');
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Spartan',sans-serif;
}
h1{
    font-size: 50px;
    line-height: 64px;
    color: #222;
}
h2{
     font-size: 46px;
    line-height: 54px;
    color: #222;
}
h4{
    font-size: 20px;
    color: #222;
}
h6{
    font-weight: 700;
    font-size: 12px;
}
p{
    font-size: 16px;
    color: #465b52;
    margin: 15px 0 20px 0;
}
.section-p1{
    padding: 40px 80px;
}
.section-m1{
    margin: 40px 0;
}
body{
    width: 100%;
}
button.normal{
    font-size: 14px;
    font-weight: 600;
    padding: 15px 30px;
    color:#fff;
    background-color:  #088178;
    border-radius: 4px;
    cursor: pointer;
    border: none;
    outline: none;
    transition: 0.2s;
}
button.white{
    font-size: 13px;
    font-weight: 600;
    padding: 11px 18px;
    color:#fff;
    background-color: transparent;
    cursor: pointer;
    border: 1px solid #fff;
    outline: none;
    transition: 0.2s;
}

#header{
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 80px;
    background: #E3E6F3;
    box-shadow: 0 5px 15px rgba(0,0,0,0.06);
    z-index: 999;
    position: sticky;
    top: 0;
    left: 0;
}
#navbar{
    display: flex;
    align-items: center;
    justify-content: center;
}
#navbar li{
    list-style: none;
    padding: 0 20px;
    position: relative;
}
#navbar li a{
    text-decoration: none;
    font-size: 16px;
    font-weight: 600;
    color: #1a1a1a;
    transition: 0.3s ease;
}
#navbar li a:hover,
#navbar li a.active{
    color: #088178;
}
#navbar li a.active::after,
#navbar li a:hover::after{
    content: "";
    width: 30%;
    height: 2px;
    background-color: #088178;
    position: absolute;
    bottom: -4px;
    left: 20px;
}
#ipad {
    display: none;
    align-items: center;
}
#close{
    display: none;
}
#hero{
    background-image: url(https://img.freepik.com/free-vector/hand-drawn-fashion-shop-pattern-background_23-2150849923.jpg?ga=GA1.1.1860261136.1743661650&semt=ais_items_boosted&w=740);
    height: 90vh;
    width: 100%;
    background-size: cover;
    background-position: top 25% right 0;
    padding: 0 100px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}
#hero h4{
    padding-bottom: 15px;
    text-shadow: 1px 1px 0 #087981;
}
#hero h1{
    color: #088178;
}
#hero button{
    background-image: url(./240_F_736894546_QPlMu7d0J44INqLP3J6EFNK1utLk1ZXA-Picsart-BackgroundRemover.jpg);
    background-color: transparent;
    background-size: cover;
    border: 0;
    padding: 14px 80px 16px 65px;
    color: #088178;
    background-repeat: no-repeat;
    cursor: pointer;
    font-weight: 700;
    font-size: 18px;
}
#feature{
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
}
#hero p{
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    text-shadow: 1px 2px 0 white;
}
.fe-box img{
    height: 150px;
}
#feature .fe-box{
    width: 180px;
    text-align: center;
    padding: 25px 15px;
    box-shadow: 20px 20px 34px rgba(0,0,0,0.03);
    border: 1px solid #cce7d0;
    border-radius: 4px;
    margin: 15px 0;
}
#feature .fe-box:hover{
     box-shadow: 10px 10px 54px rgba(70,62,221,0.1);
}
#feature .fe-box img{
    width: 100%;
    margin-bottom: 10px;
}
#feature .fe-box h6{
    display: inline-block;
    padding: 9px 8px 6px 8px;
    line-height: 1;
    border-radius: 4px;
    color: #088178;
    background-color: #fddde4;
}
#feature .fe-box:nth-child(2) h6{
    background-color: #cdebbc;
}
#feature .fe-box:nth-child(3) h6{
    background-color: #d1e8f2;
}
#feature .fe-box:nth-child(4) h6{
    background-color: #D2B48C;
}
#feature .fe-box:nth-child(5) h6{
    background-color: rgb(199,202,128);
}
#feature .fe-box:nth-child(6) h6{
    background-color: rgb(241,178,90);
}
#product1{
    text-align: center;
}
#product1 .pro-container{
    display: flex;
    justify-content: space-between;
    padding-top: 20px;
    flex-wrap: wrap;
}
#product1 .pro{
    width: 23%;
    min-height: 250px;
    padding: 10px 12px;
    border: 1px solid #cce7d0;
    border-radius: 25px;
    cursor: pointer;
    box-shadow: 20px 20px 30px rgba(0,0,0,0.02);
    margin: 15px 0;
    transition: 0.2s ease;
    position: relative;
}
#product1 .pro:hover{
    box-shadow: 20px 20px 30px rgba(0,0,0,0.06);
}
#product1 .pro img{
    width: 100%;
    border-radius: 20px;
    height: 300px;
}
#product1 .pro .des{
    text-align: start;
    padding: 10px 0;
}
#product1 .pro .des span{
    color: #606063;
    font-size: 12px;
}
#product1 .pro .des h5{
    padding-top: 7px;
    color: #1a1a1a;
    font-size: 14px;
}
#product1 .pro .des i{
    font-size: 12px;
    color: rgb(243, 181, 23);
}
#product1 .pro .des h4{
    padding-top: 7px;
    font-size: 15px;
    font-weight: 700;
    color: #088178;
}
#product1 .pro #cart{
    width: 40px;
    height: 40px;
    line-height: 40px;
    border-radius: 50px;
    background-color: #e8f6ea;
    font-weight: 500;
    color: #088178;
    border: 1px solid #cce7d0;
    position: absolute;
    bottom: 20px;
    right: 10px;
}
#banner{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-image: url(https://img.freepik.com/free-vector/sunglasses-pattern-with-geometric-shapes_23-2147556485.jpg?ga=GA1.1.1860261136.1743661650&semt=ais_items_boosted&w=740);
    width: 100%;
    height: 40vh;
    background-size: cover;
    background-position: center;
}
#banner h4{
    color: #804000;
    font-size: 20px;
}
#banner h2{
    font-size: 38px;
    color: #1a1a1a;
    padding: 10px 0;
}
#banner h2 span{
    color: #ef3636;
}
#banner button:hover{
    background-color: #8ca8a8;
    color:darkviolet;
}
#sm-banner{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
#sm-banner .banner-box{
     display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    text-align: center;
    background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRtsguXs9FMvMfZQLqPn6FNgCkK87HRGmQIRw&s);
    min-width: 580px;
    height: 50vh;
    background-size: cover;
    background-position: center;
    padding: 30px;
}
#sm-banner .banner-box2{
    background-image: url(data:image/jpeg;base64,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);
}
#sm-banner h4{
    color: #fff;
    font-size: 20px;
    font-weight: 300;
}
#sm-banner h2{
    color: #fff;
    font-size: 28px;
    font-weight: 800;
}
#sm-banner span{
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    padding-bottom: 15px;
    text-shadow: 1px 1px 1px black;
}
#sm-banner .banner-box:hover button{
    background-color: #088178;
    border: 1px solid #088178;
}
#banner3{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 0 80px;
}

#banner3 .banner-box{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    text-align: center;
    background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRYUSzNWF5BI2LUvkDMcdlEj6IdfBAtoVUR3A&s);
    min-width: 30%;
    height: 30vh;
    background-size: cover;
    background-position: center;
    padding: 20px;
    margin-bottom: 20px;
}
#banner3 .banner-box2{
    background-image: url(https://cdn.pixabay.com/photo/2016/05/17/22/16/baby-1399332_640.jpg);
}
#banner3 .banner-box3{
    background-image: url(https://img.freepik.com/premium-photo/cheerful-gorgeous-caucasian-woman-dress-holding-shopping-bags-sunglasses_1258-8018.jpg?ga=GA1.1.1860261136.1743661650&semt=ais_hybrid&w=740);
}
#banner3 h2{
    color: #fff;
    font-weight: 900;
    font-size: 22px;
}
#banner3 h3{
    color: red;
    font-weight: 800;
    font-size: 15px;
    text-shadow: 1px 0px 1px #fff;
}
#newsletter{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    align-items: center;
    /* background-image: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTwAbfGNBZFPUxIKGwe2OIUDKeTGkNz6z2Jpg&s); */
    background-repeat: no-repeat;
    background-position: 20% 30%;
    background-color: #041e42;
}
#newsletter h4{
    font-size: 22px;
    font-weight: 700;
    color: #fff;
}
#newsletter p{
    font-size: 14px;
    font-weight: 600;
    color: #818ea0;
}
#newsletter p span{
    color: #ffbd27;
}
#newsletter .form{
    display: flex;
    width: 40%;
}
#newsletter input{
    height: 3.125rem;
    padding: 0 1.25em;
    font-size: 14px;
    width: 100%;
    border: 1px solid transparent;
    border-radius: 4px;
    outline: none;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
#newsletter button{
    background-color: #088178;
    color: #fff;
    white-space: nowrap;
     border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
footer{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
footer .col{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 20px;
}
footer .logo2{
    margin-bottom: 30px;
}
footer h4{
    font-size: 14px;
    padding-bottom: 20px;
}
footer p{
    font-size: 13px;
   margin: 0 0 8px 0;
}
footer a{
    font-size: 13px;
    text-decoration: none;
    color: #222;
   margin: 10px;
}
footer .follow{
    margin-top: 20px;
}
footer .follow i{
    color: #465b52;
    padding-right: 4px;
    cursor: pointer;
}
footer .install img{
    margin: 10px 0 15px 0;
}
footer .follow i:hover,
footer a:hover{
    color: #088178;
}
footer .copyright{
    width: 100%;
    text-align: center;
}

/* shop page/ */
#page-header{
    background-image: url(https://media.istockphoto.com/id/2149914572/photo/mens-clothes-shoes-and-accessories-on-a-white-background-autumn-seasonal-clothing-top-view.jpg?s=612x612&w=0&k=20&c=U38TkhmKsS4R5N20YJzxBqKKilPmTUdnDZYqTTEsHJk=);
    width: 100%;
    height: 40vh;
    background-repeat: no-repeat;
    /* background-attachment: fixed; */
    background-size: cover;
    display: flex;
    justify-content: center;
    text-align: center;
    flex-direction: column;
    padding: 14px;
}
#page-header h2{
    color: #800080;
    text-shadow:2px 1px 2px  #EDE275;
}
#page-header p{
    color: black;
    text-shadow:2px 1px 2px  #fff;
    font-weight: 700;
}

#pagination{
    text-align: center;

}
#pagination a{
    text-decoration: none;
    background-color: #088178;
    padding: 15px 20px;
    border-radius: 4px;
    color: #fff;
    font-weight: 600;
}
#pagination a i{
    font-size: 16px;
    font-weight: 600;
}
#prodetails{
    display: flex;
    margin-top: 20px;
}
#prodetails .single-pro-image{
    width: 40%;
    margin-right: 50px;
}
.small-img-group{
    display: flex;
    justify-content: space-between;
}

.small-img-col{
    flex-basis: 24%;
    cursor: pointer;
}

#prodetails .single-pro-details{
    width: 50%;
    padding-top: 30px;
}
#prodetails .single-pro-details h4{
    padding:40px 0 20px 0;
}
#prodetails .single-pro-details h2{
   font-size: 26px;
}
#prodetails .single-pro-details select{
    display: block;
    padding: 5px 10px;
    margin-bottom: 10px;
}
#prodetails .single-pro-details input{
    width: 50px;
    height: 47px;
    padding-left: 10px;
    font-size: 16px;
    margin-right:10px ;
}
#prodetails .single-pro-details input:focus{
    outline: none;
}
#prodetails .single-pro-details button{
    background-color: #088178;
    color: #fff;
}

#prodetails .single-pro-details span{
    line-height: 25px;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* blog page/ */

#page-header.blog-header{
    background-image: url(./flat-lay-travel-items-arrangement.jpg);
}
#page-header.blog-header h2{
    font-size:55px ;
    color:#fff ;
    text-shadow:2px 2px 2px rgb(73,0,51);
}
#blog{
    padding:150px 150px 0 150px ;
}
#blog .blog-box{
    display: flex;
    align-items: center;
    width: 100%;
    position: relative;
    padding-bottom: 90px;
}
#blog .blog-img{
    width: 50%;
    margin-right: 40px;
}
#blog img{
    width: 100%;
    height: 300px;
    object-fit: cover;
}
#blog .blog-details{
    width: 50%;
}
#blog .blog-details a{
    text-decoration: none;
    font-size: 11px;
    color: #000;
    font-weight: 700;
    position: relative;
    transition: 0.3s;
}
#blog .blog-details a::after{
    content: "";
    width: 50px;
    height: 1px;
    background-color: #000;
    position: absolute;
    top: 4px;
    right: -60px;
}
#blog .blog-details a:hover{
    color: #088178;
}
#blog .blog-details a:hover::after{
    background-color: #088178;
}
#blog .blog-box h1{
    position: absolute;
    top: -40px;
    left: 0;
    font-size: 70px;
    font-weight: 700;
    color: #c9cbce;
    z-index: -9;
}


/* aboutpage */

#page-header.about-header{
    background-image: url(https://wallpapers.com/images/hd/futuristic-city-poster-art-63ycuv105dxmlcew.webp);
}
#about-head{
    display: flex;
    align-items: center;
}
#about-head img{
    width: 50%;
    height: 420px;
}
#about-head div{
    padding-left: 40px;
}
/* #about-app{
    text-align: center;
} */
 /* #about-app .video{
     width: 70%;
     height: 100%;
     margin: 30px auto 0 auto;
 }
 #about-app .video video{
    width: 100%;
    height: 100%;
    border-radius: 20px;
 } */



 /* contactpage */

 #contact-details{
    display: flex;
    align-items: center;
    justify-content: space-between;
 }

 #contact-details .details{
    width: 40%;
 }
 #contact-details .details span,
 #form-details form span{
    font-size: 12px;
 }
 #contact-details .details h2,
 #form-details form h2{
    font-size: 26px;
    line-height: 36px;
    padding: 20px 0;
 }
 #contact-details .details h3{
    font-size: 16px;
    padding-bottom: 15px;
 }
 #contact-details .details li{
    list-style: none;
    display: flex;
    padding: 10px 0;
 }
 #contact-details .details li i{
    font-size: 14px;
    padding-right: 22px;
 }
 #contact-details .details li p{
    margin: 0;
    font-size: 14px;
 }
 #contact-details .map{
    width: 55%;
    height: 400px;
 }
 #contact-details .map iframe{
    width: 100%;
    height: 100%;
 }
 #form-details{
    display: flex;
    justify-content: space-between;
    margin: 30px;
    padding: 80px;
    border: 1px solid #e1e1e1;
 }
 #form-details form{
    width: 65%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
 }
#form-details form input,
#form-details form textarea{
    width: 100%;
    padding: 12px 15px;
    outline: none;
    margin-bottom: 20px;
    border: 1px solid #bbb8b8;
}

#form-details .people div{
    padding-bottom: 25px;
    display: flex;
    align-items: flex-start;
}
#form-details .people div img{
    width: 65px;
    height: 65px;
    object-fit: cover;
    margin-right: 15px;
}
#form-details .people div p{
    margin: 0;
    font-size: 13px;
    line-height: 25px;

}
#form-details .people div p span{
    display: block;
    font-size: 16px;
    font-weight: 500;
    color: #000;
}


/* cartpage */
#cart {
    overflow-x: auto;
}

#cart table{
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    white-space: nowrap;
}

#cart table img{
    width: 70px;
}
#cart table td:nth-child(1){
    width: 100px;
    text-align: center;
}
#cart table td:nth-child(2){
    width: 150px;
    text-align: center;
}
#cart table td:nth-child(3){
    width: 250px;
    text-align: center;
}
#cart table td:nth-child(4),
#cart table td:nth-child(5),
#cart table td:nth-child(6){
    width: 150px;
    text-align: center;
}
#cart table td:nth-child(5) input{
    width: 70px;
    padding: 10px 5px 10px 15px;
}
#cart table thead{
    border: 1px solid #e2e9e1;
    border-left: none;
    border-right: none;
}
#cart table thead td{
    font-weight: 700;
    text-transform: uppercase;
    font-size: 13px;
    padding: 18px 0;
}
#cart table tbody tr td {
    padding-top: 15px;
}
#cart table tbody td{
    font-size: 13px;
}

#cart-add{
    display: flex;
    flex-wrap:wrap ;
    justify-content: space-between;
}
#coupon{
    width: 50%;
    margin-bottom: 30px;
}
#coupon h3,
#subtotal h3{
    padding-bottom: 15px;
}
#coupon input{
    padding: 10px 20px;
    outline: none;
    width: 60%;
    margin-right: 10px;
    border: 1px solid #e2e9e1;
}
#coupon button,
#subtotal button{
    padding: 12px 20px;
}
#subtotal{
    width: 50%;
    margin-bottom: 30px;
    border: 1px solid #e2e9e1;
    padding: 30px;
}
#subtotal table{
    border-collapse: collapse;
    width: 100%;
    margin-bottom: 20px;
}
#subtotal table td{
    width: 50%;
    border:1px solid #e2e9e1;
    padding:10px;
    font-size: 13px;
}






/* .pro1{
    grid-area: one;
}
.pro2{
    grid-area: two;
}
.pro3{
    grid-area: three;
}
.pro4{
    grid-area: four;
}
.pro5{
    grid-area: five;
}
.pro6{
    grid-area: six;
}
.pro7{
    grid-area: seven;
}
.pro8{
    grid-area: eight;
} */

@media (max-width:799px){
 
/* .pro-container{
    display: grid; */
    /* grid-template-areas: 'one one two two'
    'three three four four'
    'five five six six'
    'seven seven eight eightz'; */
/* } */


    .section-p1 {
    padding: 40px 40px;
}
    #navbar {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    position: fixed;
    top: 0;
    right: -300px;
    height: 100vh;
    width: 300px;
    background-color: #E3E6F3;
    box-shadow: 0 40px 60px rgba(0,0,0,0.01);
    padding: 80px 0 0 10px;
    transition: 0.3s;
}
#navbar.active{
    right: 0px;
}
#navbar li{
    margin-bottom: 25px;
}
#ipad {
    display: flex;
    align-items: center;
}
#ipad i{
    color: #1a1a1a;
    font-size: 24px;
    padding-left: 20px;
}
#close{
    display: initial;
    position: absolute;
    top: 30px;
    left: 30px;
    color: #222;
    font-size: 24px;
}
#lg-bag{
    display: none;
}


/* hero */
#hero {
    height: 70vh; 
    padding: 0 100px;  
    background-position: top 30% right 30%;
}

/* feature/ */
#feature { 
    justify-content: center;
}
#feature .fe-box {
    margin: 15px 15px;
}
#product1 .pro-container {
    justify-content: space-around;
}
#product1 .pro{
    margin: 15px;
}

/* /banner */
#banner {
    height: 20vh;
   
}

#sm-banner .banner-box {
    min-width:100%;
    height: 30vh;
}

#banner3 {
   
    padding: 0 40px;
}

#banner3 .banner-box {
    width: 28%;
}

#newsletter .form {
    width: 70%;
}

#page-header.about-header {
    height: 200px;
}

/* contactpage */

#form-details {
    padding: 40px;
}
#form-details form {
    width: 50%;
}

}


@media (max-width:477px) {
     #navbar {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    position: fixed;
    top: 0;
    right: -300px;
    height: 100vh;
    width: 180px;
    background-color: #E3E6F3;
    box-shadow: 0 40px 60px rgba(0,0,0,0.01);
    padding: 80px 0 0 10px;
    transition: 0.3s;
}
    .section-p1 {
    padding:20px;
}
    #header {
    padding: 10px 30px;
}
h2 {
    font-size: 32px;
}
h1 {
    font-size: 38px;
}
#hero h4 {
    padding-bottom: 15px;
    text-shadow: 0.5px 0.5px 0 #087981;
}
#hero {
    padding: 0 20px;
    background-position: 70%;
    background-size: cover;
    margin-right: 50px;

}
#feature {
    justify-content: space-between;
}
#feature .fe-box {
    width: 155px;
    margin:0 0 15px 0;
}

#product1 .pro {
    width: 100%;
   
}
#banner {
    height: 40vh;
}
#sm-banner .banner-box {
    height: 30vh;
}
#sm-banner .banner-box2 {
   margin-top: 20px;
}
#banner3 {
    padding: 0 20px;
}
#banner3 .banner-box {
    width: 100%;
}
#newsletter {
   padding: 40px 20px;
}
#newsletter .form {
    width: 100%;
}
footer .copyright {
    text-align: start;
}


/* Single Product */
#prodetails {
    display: flex;
    flex-direction: column;
}
#prodetails .single-pro-image {
    width: 100%;
   margin-right: 0px;
}
#prodetails .single-pro-details {
    width: 100%;
    
}


/* blogpage */

#blog .blog-box {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}
#blog {
    padding: 100px 20px 0 20px;
}
#blog .blog-img {
    width: 100%;
    margin-right: 0px;
    margin-bottom: 30px;
}
#blog .blog-details {
    width: 100%;
}


/* aboutpage */
#about-head {
    flex-direction: column;
}
#about-head img {
   width: 90%;
    height: 220px;
    margin-bottom: 20px;
}
#about-head div{
    padding-left: 0px;
}

/* contactpage */
#contact-details {
    flex-direction: column;
}
#contact-details .details {
    width: 100%;
    margin-bottom: 30px;
}
#contact-details .map {
    width: 100%;
    height: 350px;
}
#form-details {
    margin: 10px;
    padding: 30px 10px;
   flex-wrap: wrap;
}
#form-details form {
    width: 100%;
    margin-bottom: 30px;
}


/* cartpage */

#cart-add {
    flex-direction: column;
}

#coupon {
    width: 100%;
}
#subtotal {
    width: 100%;
    padding: 20px;
}
}