classypro.css

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'spantan' , 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;
   }
   .section-p1{
       padding: 40px 80px;
       
   }
   
   .top-header-img{
    height: 400px;
    width: 100%;
   }
   
   .header1{
    background-image: url(./images/images/home2\ \(1\).jpg);
   padding-top: 30px;
    height: 200px;
    text-shadow: 3px 3px 3px black;
   }
   .header2{
    height: 200px;
    width: 100%;
    position: relative;
    padding-top: 30px;
    font-size: 60px;
    text-shadow: 3px 3px 3px black;
    background-image: url(./images/images/bg\ blue\ yellow.jfif);
   }
   .header3{
    height: 200px;
    padding-top: 40px;
    text-decoration-color: #000;
    text-shadow: 3px 3px 3px black;
    background-image: url(./images/images/homepage.jpg);
   }
   .header4{
    height: 200px;
    width: 100%;
    margin-top: 20px;
    padding-top: 40px;
    color: White;
    font-size: 50px;
    text-shadow: 3px 3px 4px white;
    background-image: url(./images/images/jewellary-background.jfif);
   }
   .section-m1{
       margin: 40px 0;
   }
   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 30px ;
       color:#fff;
       background-color: transparent;
       border:1px solid #fff;
       cursor: pointer;
       outline: none;
       transition: 0.2s ;
   }
   body{
       width: 100%;
   }
   /*  header page starts */
   #header{
       display: flex;
       align-items: center;
       justify-content: space-between;
       padding: 20px 80px ;
       background: #e3e6e3;
       box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.06);
       z-index: 999;
       position:sticky;
       top:0px;
       left: 0px;
       
   }
   #navbar{
       display: flex;
       align-items: center;
       justify-content: center;
   }
   #navbar li{
       list-style:none ;
       padding: 0px 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;
   }
   /*  header page ends */
   
   /*  hero page starts */
   #hero{
        background-image: url(./images/mix\ products.jpg);
        height: 90vh;
        width: 100%;
        background-size: cover;
        background-position: top 25% right 0%;
        padding: 0px 80px ;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
   }
   #hero h4{
       padding: 15px ;
   }
   #hero h1{
       color: #088178;
   }
   #hero button{
       background-image: url(./img/button.png);
       background-color: transparent;
       color: #088178;
       border: 0;
       padding: 14px 80px 14px 65px;
       background-repeat: no-repeat;
       cursor: pointer;
       font-weight: 700;
       font-size: 15px;
   }
   #feature{
       display: flex;
       align-items: center;
       justify-content: space-between;
       flex-wrap: wrap;
   }
   #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 0px;
   }
   #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 h6:nth-child(2) h6{
       background-color: ;
   } 
   */
   #product1{
       text-align: center;   
   }
   .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.02);
       margin: 15px 0px ;
       transition: 0.2s ease;
       position: relative;
   }
   #product1 .pro:hover{
       box-shadow: 20px 20px 30px rgba(0, 0, 0, 0.09);
       
   }
   #product1 .pro img {
       width: 100%;
       border-radius: 20px;
   }
   #product1 .pro .des{
       text-align: start;
       padding: 10px 0px ;
   }
   #product1 .pro .des span{
       color: #606063;
       font-size: 12px;
   }
   #product1 .pro .des h5{
       padding-top: 7px ;
       color: 14px;
       font-size: 14px;
   }
   #product1 .pro .des i{
       font-size: 12px;
       color: rgb(243,181,25);
   }
   #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(./img/banner/b2.jpg);
       width: 100%;
       height: 40vh;
       background-size: cover;
       background-position: center;
   }
   #banner h4{
       color: #fff;
       font-size: 16px;
   }
   #banner h2{
       color: #fff;
       font-size: 30px;
       padding: 10px 0;
   }
   #banner span{
       color: #ef3636;
   }
   #banner button:hover{
       background-color: #088178;
       color: #fff;
   }
   #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(./img/banner/b17.jpg);
       min-width: 580px;
       height: 40vh;
       background-size: cover;
       background-position: center;
       padding: 30px;
   }
   #sm-banner .banner-box2{
       background-image: url(./img/banner/b10.jpg);
   }
   #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:15px ;
   }
   #sm-banner .banner-box:hover button{
       background: #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;
       background-image: url(./img/banner/b7.jpg);
       min-width: 30%;
       height: 30vh;
       background-size: cover;
       background-position: center;
       padding: 30px;
       margin-bottom: 20px;
   }
   #banner3 .banner-box2{
       background-image: url(./img/banner/b4.jpg);
   }
   #banner3 .banner-box3{
       background-image: url(./img/banner/b18.jpg);
   }
   #banner3 h2{
       color: #fff;
       font-weight: 900;
       font-size: 22px;
   }
   #banner3 h3{
       color: #ec544e;
       font-weight: 800;
       font-size: 15px;
   }
   
   #newletter{
       display: flex;
       justify-content: space-between;
       flex-wrap: wrap;
       align-items: center;
       background-image: url(./img/banner/b18.jpg);
       background-repeat: no-repeat;
       background-position: 20% 30%;
       background-color: #041e42;
   }
   #newletter h4{
       font-size: 22px;
       font-weight: 700;
       color: #fff;
   }
   #newletter p{
       font-size: 14px;
       font-weight: 600;
       color: #818ea0;
   }
   #newletter p span{
       color: #ffbd27;
   }
   #newletter .form{
       display: flex;
       width: 40%;
   }
   #newletter input{
       color: #ffbd27;
       height: 3.125rem;
       padding: 0 1.25em ;
       width: 100%;
       border:1px solid transparent;
       border-radius: 4px;
       outline: none;
       border-top-right-radius: 0;
       border-bottom-left-radius: 0;
   }
   #newletter button{
       background-color: #088178;
       color: white;
       white-space:nowrap ;
       border-top-left-radius: 0;
       border-bottom-left-radius: 0;
   }
   /*  hero page ends */
   /*  footer page started */
   
   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: 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-bottom: 10px;
   }
   footer .follow i{
       color: #456b52;
       padding-right: 4px;
       cursor: pointer;
   }
   footer .install .row img{
       border: 1px solid #088178;
       border-radius: 6px;
   }
   footer .install img{
       margin: 10px 0 15px 0;
   }
   footer .follow i:hover
   footer a:hover{
       color: #088178;
   }
    .copyright{
       width: 100%;
       text-align: center;
   }
   
   /* shop page */
   
   #page-header{
       background-image: url(./img/banner/b1.jpg);
       width: 100%;
       height: 40vh;
       background-size: cover;
       display: flex;
       justify-content: center;
       text-align: center;
       flex-direction: column;
       padding: 14px;
   }
   
   #page-header h2,
   #page-header p{
       color: #fff;
   }
   
   #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;
   }