indexv2.css

* {
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family: 'Spartan', sans-serif;
}

h1{

    line-height: 64px;
    font-weight:600;
    color: #222;
}

h2{
    font-size: 46px;
    line-height: 54px;
    color:#222;
}

h4{
    font-size:17px;
    color: #222;
}

h6{
    font-weight: 700;
    font-size:12px;
}

p{
    font-size: 16px;
    color:#465b52;
    margin:15px 0 20px 0;
}

.section-p1{
    padding:20px 40px;
}

.section-m1{
    margin:40px 0;
}

body{
    width:100%;

}

button.normal {
   font-size:14px;
   font-weight:600;
   padding:15px 30px;
   color:#000;
   background-color:#fff;
   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;

}




.logo{
    height:100px;
    width:100px;
}

/* Header start */

#header{
    display:flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    background-color: #e3e6f3;
    box-shadow:0 5px 15px rgb(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;
}
.menu-bar{
    text-decoration: none;
    font-size:16px;
    font-weight:600px;
}

#navbar li a:hover,
#navbar li a.active {
    color: #088178;
}

#navbar li a.active::after,
#navbar li a:hover::after{
    content:"";
    width:30px;
    height:2px;
    background:#088178;
    position:absolute;
    bottom:-4px;
    left:20px;
}

.mobile{

   align-items:center;
   display:none;
   position: absolute;
   font-size: xx-large;
   color: black;
}
#menu{
    display: none;
}

/* Home Page */

#hero {
    background-image: url("https://res.cloudinary.com/dqnhksjp6/image/upload/v1686718264/1686129228225_nwfl2a.jpg");
    background-size: cover;
    height:90vh;
    width:100%;
    padding:0 80px;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    justify-content:center;

}

.heading1{
    padding-bottom:15px;
}
.heading2{
    color:#088178;
    font-weight:700;
}

#hero button{
    background-color:#cdd4f8;
    color:#222;
    border:0;
    padding:14px 80px 14px 65px;
    background-repeat:no-repeat;
    cursor:pointer;
    font-weight:600;
    font-size:15px;
}

#hero button:hover {
    background-color:#088178;
    color:#fff;
}


/* feature section */

.fe-img{
    width:120px;
    height:120px;
}

#feature{
  display:flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap:wrap;
}

.fe-desc{
    font-size:8px;
    font-weight:600;
    padding-top:10px;
}

#feature .fe-box{
    width:180px;
    text-align:center;
    padding: 15px 15px;
    box-shadow: 20px 20px 34px rgba(0,0,0,0.03);
    border:1px solid #cce7d0;
    border-radius:4px;
    margin: 10px 0;
}
#feature .fe-box:hover{
    box-shadow: 10px 10px 54px rgba(70,62,221,0.1);
}

#feature .fe-box img{
    width:100%;
    margin-bottom: 7px;
}
#feature .fe-box h5{
    padding:9px 8px 6px 8px;
    display:inline-block;
    line-height: 1;
    border-radius:4px;
    color:#088178;
    background-color: #fddde4;

}
#feature .fe-box:nth-child(2) h5{
    background-color: #cdebbc;
}

#feature .fe-box:nth-child(3) h5{
    background-color: #d1e8f2 ;
}

#feature .fe-box:nth-child(4) h5{
    background-color:#cdd4f8 ;
}

#feature .fe-box:nth-child(5) h5{
    background-color:#f6dbf6 ;
}

#feature .fe-box:nth-child(6) h5{
    background-color: #fff2e5;
}

/* product1 details */

#product1 {
    text-align:center;


}

.pro-img{
    height:240px;
    width:160px;
    background-color: #d1e8f2;
}

#product1 .pro-container{
    display:flex;
    justify-content:space-between;
    padding-top:20px;
    flex-wrap:wrap;
}

#product1 .pro{
    width:23%;
    min-width:250px;
    padding:10px 12px;
    border:1px solid #cce7d0;
    border-radius:25px;
    cursor:pointer;
    box-shadow: 20px 20px 30px rgba(0,0,0,0.03);
    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;
}

#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,25);
}

#product1 .pro .des h4{
    padding-top:7px;
    color:#088178;
    font-weight:700;
    font-size:14px;
}

#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 section */

#banner {
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align: center;
    background-image: url("https://img.freepik.com/free-vector/blue-grunge-halftone-detailed-texture-background_1409-1358.jpg?w=1480&t=st=1686380960~exp=1686381560~hmac=bf6b7a2b90c1aeedb5f53577a1df6724f973c6e54b473bf49b14a2fcf4addac2");
    width:100%;
    height:60vh;
    background-size: cover;
    background-position: center;
}

#banner h4{
    color:#56ea48;
    font-size:22px;

}

#banner h2{
    color:#56ea48;
    font-size:30px;
    padding:10px 0;
    font-weight:700;
}

#banner h2 span{
    color:#fff;

}

#banner button:hover {
     background-color:#088178;
     color:#fff;
}


/* new arrivals */

.pro-imagg {
    height:340px;
    width:160px;
    background-color: #d1e8f2;
}

/* banner box */

#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;
    background-image: url("https://img.freepik.com/free-photo/smiley-woman-wearing-glasses-with-sale-tag-holding-credit-card_23-2148684549.jpg?size=626&ext=jpg");
    min-width:580px;
    height:50vh;
    background-size: cover;
    background-position: center;
    padding:30px;

}

#sm-banner .banner-box2 {
    background-image: url(https://img.freepik.com/free-photo/shirt-mockup-concept-with-plain-clothing_23-2149448749.jpg?size=626&ext=jpg&uid=R76596305&ga=GA1.2.621347238.1660062929&semt=ais);
}

#sm-banner h1{
    color:#fff;
    font-size:17px;
}

#sm-banner h4{
    color:#fff;
    font-size:22px;
    font-weight:300;
}

#sm-banner span{
    color:#fff;
    font-size:34px;
    font-weight:800;
    padding-bottom:15px;
}

#sm-banner .banner-box:hover button {
    background-color: #088178;
    border:1px solid #088178;
}

/* banner3 */

#banner3{
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
    padding:0 40px;
}

#banner3 .banner-box{
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:flex-start;
    background-image: url("https://img.freepik.com/free-photo/future-mother-keeps-shirt-baby_8353-5130.jpg?size=626&ext=jpg&uid=R76596305&ga=GA1.2.621347238.1660062929&semt=ais");
    min-width:30%;
    height:30vh;
    background-size: cover;
    background-position: center;
    padding:20px;
    margin-bottom: 20px;
}

#banner3 .banner-box2{
    background-image: url("https://img.freepik.com/free-photo/two-playful-girls-sweaters-hats-sitting-floor-together-while-pointing-away-white-wall_171337-2710.jpg?size=626&ext=jpg&uid=R76596305&ga=GA1.2.621347238.1660062929&semt=ais");
}

#banner3 .banner-box3{
    background-image: url("https://img.freepik.com/free-photo/pile-winter-sweaters-with-pine-cones_23-2148312122.jpg?size=626&ext=jpg&uid=R76596305&ga=GA1.2.621347238.1660062929&semt=ais");
}

#banner3 h2{
    color:#fff;
    font-weight:900;
    font-size:22px;
}

#banner3 h3{
    color:#ec544e;
    font-weight:700;
    font-size:15px;
}

/* section newsletter */


#newsletter {
    display:flex;
    justify-content:space-between;
    flex-wrap:wrap;
    align-items: center;
    background-image:url("");
    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-left-radius: 0;
}

#newsletter button{
    background-color:#088178;
    color:#fff;
    white-space:nowrap;
    border-top-left-radius:0;
    border-bottom-left-radius: 0;
}


/* footer section */

.section-p2{

    margin-top:20px;
}

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 .logo {
    margin-bottom:30px;
}

footer h4{
    font-size:16px;
    padding-bottom:20px;
    font-weight:700;
}

footer p{
    font-size:13px;
    padding-bottom: 0 0 8px 0;
}

footer a{
    font-size:14px;
    font-weight:300;
    text-decoration:none;
    color:#222;
    margin-bottom:16px;
}

footer .follow{
    margin-top:20px;
}

footer .follow i{
    color:#465b52;
    padding-right:4px;
    cursor:pointer;
}

footer .install .row img{
    border: 1px solid #088178;
    border-radius:6px;
    height:50px;
    width:340px;
}

footer .install img{
    margin: 10px 0 15px 0;
}

footer .follow i:hover,
footer a:hover{
    color:#088178;
}


/* copyright section */

.copyright{
    width:100%;
    text-align:center;
    background-color:#041e42;
}

.text{
    color:#fff;
    padding-bottom:20px;
}

.payments{
    height:100px;
    width:300px;
}

.logo-img{
    height:100px;
    width:100px;
}


/* start media query */

@media (max-width:799px){
    #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.1);
       padding:80px 0 0 10px;
    }

    #navbar li{
        margin-bottom:25px;
    }


    }
    #button{
        display: none;
    }
    #button.open{
        display: block;
    }
}