@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
    text-decoration: none;
}
#header{
    position: sticky;
    top: 0;
    z-index: 2000;
}

.top{
    padding: 10px;
    background-color: #212529;
    width: 100%;


    
}
.top a{
    color: #fff;
    text-decoration: none;
    font-size: 16px;
    margin: 0 10px;
    position: relative;
    animation-name: top;
    animation-duration: 30s;
    animation-iteration-count: infinite;
    animation-timing-function:ease;
    animation-delay: 2s;
  
}
.top:hover a{
    animation-play-state: paused;
}
@keyframes top{
   0% {
       left: 5%;

   }
   50%{
       left: 80%;
     

   }
   100%{
       left: 5%;
     
   }
}


.nav{
    padding:20px 10% 20px 10%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    text-align: center;
    align-items: center;
    box-shadow: 0px 5px 10px rgb(0, 0, 0,.1); 
    width: 100%;
    background-color: #fff;
}
.active{
    display: block; 
}

.logo{
    width: 205px;
}
#bar{
    display: none;
    border: 1px solid #000;
    padding: 5px 8px;
    font-size: 24px;
    transition: 1s;
}
.rotate{
    transform: rotate(180deg);
}
.navbar li{
    display: inline-block;
    margin:0 20px;
    text-align: center;   
}
.navbar li a{
    position: relative;
    letter-spacing: 2px;
}
.navbar li a::before,.navbar li button::before,.dropdown li a::before{
    content: " ";
    width: 0;
    height: 2px;
    bottom: -7px;
    left: 0;
    background-color: #F5E44F;
    position:absolute;
    transition: .7s;

}
.navbar li a:hover::before,.navbar li button:hover::before{
   width: 100%;
}
.dropdown li a:hover::before{
    width: 100%;
    background-color: #777;
}
.dropdown li a::after{
    background-color: #F5E44F !important;
}
.navbar li a::after,.navbar li button::after{
    content: " ";
    width: 100%;
    height: 2px;
    bottom: -7px;
    right: 0;
    background-color: #777;
    position:absolute;
    transition: .7s;

}
.navbar li a:hover::after,.navbar li button:hover::after{
    width: 0;
}

.navbar li a,.dropdown li a,.navbar li button{
    text-decoration: none;
    color: #000;
    font-size: 16px;
    cursor: pointer;
    
}
.navbar li a:hover,.dropdown li a:hover,.navbar li button:hover{
    color: #6E2A36;
}
#product{
    position: relative;
}
.navbar li .products{
    background:none;
    border: none;
}

.dropdown {
    position: absolute;
    width: 300px;
    height: 200px;
    left: 0;
    margin-top: 25px;
    background-color: #F5E44F;
    padding: 10px 0 10px 10px;
    display: none; 
    overflow: auto;
    border-left: 2px dashed #777;
    border-bottom: 2px dashed #777;
}
.dropdown::-webkit-scrollbar{
    width: 5px;
    background-color: #777;
}
.dropdown::-webkit-scrollbar-thumb{
    background-color: #000;
}
.left{
    right: -400px;
}
.right{
    right: 0;
}
.active{
    display: block;
}
.dropdown li{
    display: block;
    margin: 10px 0;
    text-align: left;
}

.dropdown li a{
    display: inline-block;
    position: relative;
    font-size: 14px;
    color: #000;
    font-weight: 300;
    letter-spacing: 0;
}
.dropdown li:hover a{
    color: #fff;
    
}
.banner{
    width: 100%;
}

.banner img{
    width: 100%;
}


/* fixed icon */
.socail-icon{
    position: relative;
}
.fixed-whatsp{
    position: fixed;
    z-index: 1000;
    left: 3%;
    top: 85%;
    color: #F5E44F;
    font-size: 36px;
  }
  .fixed-call{
    position: fixed;
    z-index: 1000;
    right: 3%;
    top: 80%;
    color: #F5E44F;
    font-size: 36px;
  }
  .fixed-mail{
    position: fixed;
    z-index: 1000;
    right: 3%;
    top: 90%;
    color: #F5E44F;
    font-size: 36px;
  }


/* fixed icon */

/* section-1 */

#section-1{
    padding: 40px 8%;
}
.profile-box1{
    text-align: center;
    color: #212529;
}
.profile-box1 p{
    text-align: justify;
    color: #23272B;
}
.profile-box2
{
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(287px,1fr));
    gap: 0;
    box-sizing: border-box;
}
.pbox1{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
    padding: 20px;     
}
.pbox1 img{
    width: 30px;
    height: 30px;   
}
.pbox1:hover{
    border: none;
    box-shadow: 5px 5px 10px rgb(0, 0, 0,.4);
    z-index: 1;
}
.one{
    border-right: 1px solid #000;
}
.two{
    border-top:  1px solid #000;
}
.three{
    border-top: 1px solid #000;
    border-right: 1px solid #000;
}

/* section-1 */


/* section-2 */



/* section 2 */
#section-2{
    padding: 60px 8%; 
}
.section-2{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    text-align: center;
    margin: 60px 0;
  
}
.heading2{
    text-align: center;

}
.heading2 h2,.profile-box1 h1{
    font-size: 36px; 
    color: #000;
    position: relative;
    font-weight: bold;
    margin-bottom: 50px;
}
.heading2 h2::after{
    position: absolute;
    content: "";
    height: 3px;
    width: 75px;
    bottom: 0;
    right: 44%;
    background-color: #808080;
}
.profile-box1 h1::after{
    position: absolute;
    content: "";
    height: 3px;
    width: 100px;
    bottom: 0;
    right: 38%;
    background-color: #808080;
}
.heading2 h2::before{
    position: absolute;
    content: "";
    height: 3px;
    width: 100px;
    bottom: 0;
    right: 52%;
    background-color: #808080;
}
.profile-box1 h1::before{
    position: absolute;
    content: "";
    height: 3px;
    width: 126px;
    bottom: 0;
    right: 52%;
    background-color: #808080;
}
.section-2 div{
    border: 1px solid #ccc;
    text-align: center;
    flex-basis: 300px;
    height: 300px;
    position: relative;
    transition: .7s;
}
.section-2 div img{
    width: 300px;
    height: 300px;
    position: absolute;
    top: -1px;
    left: -1px;  
    transition: .7s;

}
.section-2 div:hover img{
    top: -15%;
}
.section-2 div:hover{
    padding-top: 260px;
}
.box2 h3 a,.box22 h3 a{
    text-align: center;
    color: #6E2A36;
    margin-bottom: 5px;
    text-decoration: none;

}

.box2{
    animation-name: serv;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    animation-delay: 0s;
    
}

.box2::before,.box22::before{
    position: absolute;
    top: 0;
    left: -1px;
    z-index: 9;
    border-left: 60px solid transparent;
    border-top: 60px solid #F5E44F;
    content: "";
    height: 0;
    position: absolute;
    width: 0;
    transform: rotate(-90deg);
    transition: .7s;
} 
.box2:hover::before,.box22:hover::before{
    top: -46px;
}
.box2::after,.box22::after{
    position: absolute;
    bottom:-2px;
    right: -2px;
    z-index: 9;
    border-left: 60px solid transparent;
    border-top: 60px solid #777777;
    content: "";
    height: 0;
    position: absolute;
    width: 0;
    transform: rotate(90deg);
}


@keyframes serv{
    0% {
      top:0px
    }
    50% {
        top:25px
      }

    100% {
      top:0px
    }
  }

  .box22{
    flex-basis: 25%;
    animation-name: serv2;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    animation-delay: 1s;
    
}

  @keyframes serv2{
    0% {
      top:5px
    }
    50% {
        top:30px
      }

    100% {
      top:5px
    }
  }
/* section 2 */


/* gallary */
#gallary{
    padding: 50px 8%;
}
.gallary {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
    gap:20px;
}
.boxg{
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(238, 238, 238, 0.75);
}
.boxg:hover{
    transition: 1s;
    border-bottom: 1px solid #6E2A36;
    box-shadow: 2px 2px 5px rgb(0, 0, 0,.1);
}
.boxg h4{
    text-align: center;
    margin: 10px 0;
}
.boxg h4 a{
    font-weight: 500;
    color: rgba(6,6,6,1);
    font-size: 16px;
    text-decoration: none;
}
.boxg:hover h4 a{
    color: #6E2A36;
    transition: 1s;
    
}

.gallary .boxg img{
    width: 100%;
}
.gallary .boxg img:hover{
    transition: 1s;
}
.fullimg{
    background:rgba(0, 0, 0, .8);
    position: fixed;
    height: 100%;
    width: 100%;
    top:0;
    left:0;
    right: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;
}
.fullimg img{
    width: 400px;
    height: 400px;
}
.imgnone{
    display: none;
}

#bgcross{
    color: #fff;
    font-size: 36px;
    position: absolute;
    right: 4%;
    top: 18%;
}
#prevbtn,#nextbtn{
    color: #fff;
    font-size: 36px;
    position: absolute;
}
#prevbtn{
    left: 15%;
}
#nextbtn{
    right: 15%;
}

.bgclick{
    position: absolute;
    top:-100%;
    left:-100%; 
    width: 100%;
    height: 100%;
    background: #F5E44F;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    transform: rotate(45deg);
    transition: .5s;
}

  .boxg:hover .bgclick{
    top:-53%;
    left:-53%;
    }
.bgclick i{
    color: #fff;
    font-size: 32px;
    transform: rotate(-45deg);
    margin-right: 13px;
    margin-top: -56px;
    border: 1px solid #fff;
    padding: 10px;
    border-radius: 50px;
}
.bgclick .callnow{
    transform: rotate(45deg);
    margin-right: -67px;
    margin-top: 99px;
    text-decoration: none;
    padding: 5px 10px;
    transition: 1s;
}
.bgclick .callnow i{
    color: #fff;
    border: 1px solid #fff;
    transform: rotate(-16deg);
}


/* gallary */

/* section 3 */
.section-3{
    padding: 40px 8%;
    position: relative;
    width: 100%;
}

#container{
    width: 915px;
    overflow: hidden;
    margin: auto;  
}
#container:hover .slidebox{
    animation-play-state: paused;
}
.slidebox{
    position: relative;
    width: 3680px;
    animation-name: anni;
    animation-duration: 30s;
    animation-iteration-count: infinite;
    animation-timing-function:ease;

}
.slidebox .box{
    margin-left: 5px;
    width: 300px;
    height: 300px;
    float: left;
    border-radius: 5px;
    border: 1px solid #808080;
    padding: 10px;
}
.slidebox .box h2{
    text-align: center;
}
.slidebox .box h2 a{
    text-decoration: none;
    font-size: 14px;
    color: #000;
}
@keyframes anni{
    0%{
        right: 5px;
        top: 0;
        
    }
    10%{
        right: 5px;
        top: 0;
    }
    11.18%{
        top: 0;
        right: 310px;
    }
    21.18%{
        top: 0;
        right: 310px;
    }
    22.36%{
        top: 0;
        right: 615px;
       
    }
    32.36%{
        top: 0;
        right: 615px;
    }
    33.54%{
        right: 920px;
        top: 0;
    }
    43.54%{
        right: 920px;
        top: 0;
    }
    44.72%{
        right: 1225px;
        top: 0;
    }
    54.72%{
        right: 1225px;
        top: 0;
    }
    55.90%{
        right: 1530px;
        top: 0;
    }
    65.90%{
        right: 1530px;
        top: 0;
    }
    67.08%{
        right: 1835px;
        top: 0;
    }
    78.08%{
        right: 1835px;
        top: 0;
    }
    79.26%{
        right: 2140px;
        top: 0;
    }
    89.26%{
        right: 2140px;
        top: 0;
    }
    90.44%{
        right: 2445px;
        top: 0;
    }
    99.99%{
        right: 2445px;
        top: 0;
    }
    100%{
        right: 5px;
        top: 0;
    }
   }


/* section-2 */

/* footer */
#footer{
    padding: 80px 8% 40px 8%;
    background-color: #212529;
}

.footer{
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
    gap: 10;
}
.footer-box h1{
    color: #F5E44F;
    font-weight: 100;
    margin: 20px 0;
    letter-spacing: 2px;
}
.footer-box h2{
    font-weight: 400;
    color: #fff;
}
.footer-box h3{
    color: #F5E44F;
    font-size: 16px;
}
.footer-box p {
    margin: 10px 0;
}
.footer-box p a span{
    color: #F5E44F;
}
.footer-box p a{
    text-decoration: none;
    color:#6F6F6F;
    font-size: 14px;
}
.footer-box p a i{
    color: #fff;
    border: 1px solid #fff;
    padding: 10px;
    border-radius: 50px;
    margin:0 5px;
    font-size: 24px;
}
.footer-box p a:hover,.footer-box p a i:hover{
    color: #F5E44F;
}
.copy{
    text-align: center;
    margin-top: 20px;
}
.logof{
    color: #fff;
    font-weight: 100;
    font-size: 12px;
    border: 1px solid #6F6F6F;
    padding: 5px 10px;
    margin: 20px 0;
}

.logof span{

    font-size: 26px;
    color: #fff;

}
.logof line{
    color: #F5E44F;
}
.logof a{
    text-decoration: none;
    color: #fff;
}

/* contact page */
#contact-page{
    padding: 40px 8%;
    padding: 40px 8%;
    background: #F2F3EB;
    background:linear-gradient(rgba(0,0,0,.7),rgba(0,0,0,.7)),url(../photos/contact-background.jpeg);
    background-size: cover;
    width: 100%;
}
.contact-page{
    position: relative;

}
.contact-box1{
width: 740px;
height: auto;
padding: 40px 150px 40px 40px;
border: 1px solid #000;
background-color: #fff;
}
.contact-box1 h1{
    font-size: 54px;
    font-weight: 200;
}
.con{
    width: 100%;
    margin: 30px 0;
}
.con label,.con input,.con textarea {
    width: 100%;
    padding: 10px 0 ;
}
.con input,.con textarea {
border-top: none;
border-left: none;
border-right: none;
border-bottom: 2px solid #000;
font-size: 19px;
font-weight: 200;
}
.submit button{
background-color: #fff;
border: 2px solid #000;
padding: 10px 25px;
font-size: 22px;
font-weight: 300;
position: relative;
z-index: 2;
}
.submit button:hover{
    color: #fff;
    transition: 1.2s;
}
.submit button::before{
    content: '';
    position: absolute;
    height: 50%;
    width: 0%;
    background-color: #000;
    left: 0;
    top: 0;
    z-index: -1;
}
.submit button::after{
    content: '';
    position: absolute;
    height: 50%;
    width: 0%;
    background-color: #000;
    right: 0;
    bottom: 0;
    z-index: -1;
}
.submit button:hover::after,.submit button:hover::before{
width: 100%;
transition: .7s;
}
.contact-box2{
    position: absolute;
    width: 400px;
    height: 500px;
    top: 15%;
    right: 10%; 
    background-color: #292D33;
}
.con-card1 {
    padding: 20px;
}
.con-card1 p{
    color: #fff;
    margin: 10px 0;
    font-size: 22px;
    font-weight: 100;
}
.con-icon a{
    color: #fff;
    text-decoration: none;
}
.con-icon a i{
    padding: 10px;
    border: 1px solid #fff;
    margin:0 20px;
    border-radius: 50px;
    color: #fff !important;
}
.con-icon a i:hover{
    color: #F5E44F !important;
}
.con-card1 p a{
    text-decoration: none;
    color: #fff;

}
.con-card1 p a i{
    color: #F5E44F;
    margin-right: 20px;
    font-size: 24px;
    
}
/* contact page */


/* about page */
#about-page{
    padding: 40px 8%;
    position: relative;
}
.about-img{
position: absolute;
left: 50%;
top: 240px;
width: 70%;
transform: translate(-50%);
z-index: -1;
opacity: 0.7;

}
.about-page{
width: 100%;
}
.about-page p{
    text-align: justify;
    font-size: 18px;
    font-weight: 300;
}
.about-table{
    width: 100%;
    margin: auto;
}

.about-table{
    border: 1px solid #ccc;
    margin: 20px 0;
}
#about-us .about-pera p{
    font-weight: 300;
    margin-bottom: 20px;
    text-align: justify;
 
}


.about-table h1{
    padding: 10px;
    text-align: center;
    color: #F5E44F;
    border: 1px solid #777;
}
.about-card{
   width: 100%;
   padding: 10px;
   box-shadow: 5px 5px 10px rgb(185 186 187);
   margin: 20px auto;
   

}
.about-card h2{
   color: #6F6F6F;
}

table {
    font-family: arial, sans-serif;
    border-collapse: collapse;
    width: 100%;
  }

  
  td, th {
    border: 1px solid #777;
    text-align: left;
    padding: 8px;
  }
  td{
      width: 30%;   
  }
  th{
      width: 70%;
      font-weight: 300;  
  }
  .product-card2 table tbody td{
      border-top: none;
      border-left: none;
      border-right: none;
  }

/* about page */

/* product */

/* product background */
.product-background-img img{
    width: 100%;
}
/* product background */

/*  */
.backbtn{
    color: #F5E44F;
    padding: 20px 0px 20px 40px;
    background-color: #212529;

}
.backbtn a{
    text-decoration: none;
    color: #fff;
}


#psection-1{
    padding: 40px 8%;
}
.psection-1 h1{
    text-align: center;
    font-weight: 200;
    font-size: 36px;
    position: relative;
    letter-spacing: 2px;
}
.psection-1 h1::before{
    content: '';
    background-color: #6F6F6F;
    width: 130px;
    height: 2px;
    position: absolute;
    bottom: 8px;
    right: 50%;
}
.psection-1 h1::after{
    content: '';
    background-color: #6F6F6F;
    width: 100px;
    height: 2px;
    position: absolute;
    bottom: 8px;
    right: 38.5%;
}
.psection-1 p{
    margin: 20px 0;
    font-size: 18px;
    font-weight: 300;
    text-align: justify;
}
.psection-2{
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
    gap: 20px;
}
.psbox1 a{
    text-decoration: none;
}
.psbox1{
    padding: 20px;
    border-top: 1px solid #F5E44F;
    border-left: 1px solid #F5E44F;
    text-align: center;

}
.psbox1 h4 a{
    text-decoration: none;
    color: #000;
    font-weight: 400;
}
.psbox1:hover{
    border-top: none;
    border-left: none;
    border-bottom: 1px solid #F5E44F;
    border-right: 1px solid #F5E44F;
}
.psbox1 a img{
    width: 100%;
}

/* product page */

/* sub products  */
#product-section1{
    padding: 40px 8%;

}
#product-section1 h1{
    text-align: center;
    font-weight: 300;
    margin-bottom: 30px;
}
.product-section1{
    height: 316px;
    display: flex;
    align-items: center;
    justify-content: center;
    background:linear-gradient(rgba(0, 0, 0, .4),rgba(0, 0, 0, .4)), url(../photos/product-background.jpeg);
    background-size: cover;
    background-position: center;
}
.product-section1 h1{
    text-align: center;
    font-size: 32px;
    font-weight: 300;
    padding: 20px 30px;
    color: #fff;
}
.product-section2{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: top;
    text-align: center;
    border: 1px solid #6f6f6f25;
    padding: 20px;
}
.product-card2 h5{
    font-size: 18px;
    font-weight:300;
    margin-bottom: 10px;
}
.product-section2 .product-card1,.product-section2 .product-card2{
    flex-basis: 48%;
}
.product-card1 img{
    width: 100%;
}

.product-card1-imgs{
    width: 100%;
    display: none;
}
.pri{
    border-top: 1px dashed #F5E44F;
    border-left: 1px dashed #F5E44F;
}
.pri:hover{
    border: none;
}

.product-card1:hover .product-card1-imgs{
    display: block;
}
.product-card1-imgs img{
    width: 30%;
}
.product-card3 {
    flex-basis: 100%;
    padding: 20px;
}
.product-card3 p{
    text-align: justify;

}
/* sub products */

/* enquary form */
#enquary-form{
    padding: 40px 8%;
}
.enquary-form{
    border: 1px solid #6F6F6F;
    padding: 40px;
    width: 800px;
    height: auto;
    margin: auto;
}
.enquary-form form{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.enquary-form h1{
    font-size: 24px;
    font-weight: 200;
    text-align: center;
    margin-bottom: 15px;

}
.enquary-card{
    margin: 10px 0;
    width: 40%;
}
.mailenquary{
    width: 100%;
}
.enquary-textarea{
    width: 100%;
}
.enquary-textarea textarea{
    border-left: none;
    border-top: none;
    border-right: none;
    width: 100%;
}
.enquary-card input{
    border-left: none;
    border-top: none;
    border-right: none;
    border-bottom: 1px solid ;
    width: 100%;
}
.enuary-submit button,.enuary-submit a{
    border: 1px solid #6F6F6F;
    background:none;
    color: #212529;
    padding: 5px 15px;
    display: inline-block;
    font-size: 14px;
    margin: 25px 10px 0 10px;
    position: relative;

}
.enuary-submit button:hover,.enuary-submit a:hover{
color: #fff;
transition: 1.2s;
}
.enuary-submit{
    margin: auto;
}
.enuary-submit button::before,.enuary-submit a::before{
    content: '';
    position: absolute;
    height: 50%;
    width: 0%;
    background-color: #000;
    left: 0;
    top: 0;
    z-index: -1;
}
.enuary-submit button::after,.enuary-submit a::after{
    content: '';
    position: absolute;
    height: 50%;
    width: 0%;
    background-color: #000;
    right: 0;
    bottom: 0;
    z-index: -1;
}
.enuary-submit button:hover::after,.enuary-submit a:hover::after,.enuary-submit button:hover::before,.enuary-submit a:hover::before{
width: 100%;
transition: .7s;
}

/* enquary form */

/* footer */
@media screen and (max-width:768px) {
    .section-2 {
        justify-content: space-around;
    }
    .section-2 div {
        flex-basis: 51%;
        margin: 20px 0;
    }
    .section-2 div img{
        width: 100%;
    }
    #container{
        width: 607px;
    }
        .nav{
        padding: 10px 10%;
        
    }
    #bar{
        display: block;
    }
    .navbar{
        position: fixed;
        top: 100px;
        background-color: #F5E44F;
        width: 400px;
        height: 100%;
        transition: 1s;
    }
    .dropdown{
        position: relative;
        margin:10px auto 0 auto;
    }
    .dropdown li{
        text-align: center;
    }
    
    .navbar li{
        display: block;
        margin: 25px 0;
    }
    .navbar li a,.navbar li button{
        display: inline-block;
        position: relative;
    }
    .navbar li a::before, .navbar li button::before, .dropdown li a::before {
        background-color: #000;
        position: absolute;
    }
    .three ,  .two ,.one,.four {
        border-top: none;
        border-left: none;
        border-bottom: 1px solid #000;
        border-right: 1px solid #000;
    }
    @keyframes top{
        0% {
            left: 5%;
     
        }
        50%{
            left: 60%;
          
     
        }
        100%{
            left: 5%;
          
        }
     }

     .pbox1 p{
        margin: 0 5px;
            }
            #gallary{
                padding: 0 8%;
            }
    .enquary-form{
        width: 100%;
    }
    .product-section2 div{
        flex-basis: 100%;
    }
    .contact-page{
        display: flex;
        flex-wrap: wrap;
    }
    .contact-box1 {
        width: 100%;
        padding: 20px;
        order: 2;
    }
    .contact-box2{
        width: 100%;
        height: auto;
        position:relative;
        top: 0;
        right: 0;
        margin: 20px 0;
        order: 1;
    }
    .psection-1 h1::after {
        right: 25.5%;
    }
    .profile-box1 h1::after{
        right: 28%;
    }
    .heading2 h2::after{
        right: 35%;
    }
    .product-section2 .product-card1, .product-section2 .product-card2 {
        flex-basis: 100%;
    }

}

@media screen and (max-width:540px) {

    @keyframes top{
        0% {
            left: 2%;
     
        }
        50%{
            left: 40%;
          
     
        }
        100%{
            left: 5%;
          
        }
     }

    .three ,  .two ,.one,.four {
        border-top: none;
        border-left: none;
        border-bottom: 1px solid #000;
        border-right: 1px solid #000;
    }
    #container {
        width: 304px;
    }
    .pbox1 p{
font-size: 15px;
    }
    .section-2 div{
        flex-basis: 100%;
        margin: 45px 0;
    }
    #section-2{
        padding: 0px 8%;
    }
    .psection-1 h1::after{
        right: 20.5%;
    }
    .heading2 h2::after{
        right: 27%;
    }
    .profile-box1 h1::after{
        right: 18%;

    }


    
}
@media screen and (max-width:480px) {
    .heading2 h2,.profile-box1 h1{
        font-size: 28px;
        margin-bottom: 20px;
        font-weight: 500;
    }
    .section-2{
        margin: 0;
    }
    .heading2 h2::after,.profile-box1 h1::after{
        right: 24%;
    }
    #contact-page {
        padding: 40px 1%;
    }
    .contact-box1 h1 {
        font-size: 40px;
    }
    .contact-box1 {
        width: 100%;
        padding: 20px;
    }
    .contact-box2{
        width: 100%;
        height: auto;
        position:relative;
        top: 0;
        right: 0;
        margin: 20px 0;
    }
    .con-card1 p a i{
        margin-left: 10px;
    }
    .enquary-card {
        width: 100%;
    }
    #product-section1 h1{
        font-size: 22px;
    }

    .about-page p,.about-card p{
        font-size: 14px;
    }
    .about-table h1,.about-card h2{
        font-size: 18px;
    }

    .psection-1 p{
        font-size: 16px;
    }
    .product-section2 {
        padding: 0;
        
    }
    .enquary-form{
        padding: 5px;
    }
    .psection-1 h1{
        font-size: 24px;
    }
    .psection-1 h1::before,.psection-1 h1::after{
        bottom: 0;
        width: 90px;
    }
    .psection-1 h1::after{
        right: 12.5%;
    }

}


/* icon-clor:#d58319; */