*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
       -moz-osx-font-smoothing: antialiased;
    -webkit-font-smoothing: antialiased;
    font-family: 'Montserrat', sans-serif;  }
:root{
    --yellow: #00A0E1;
    --white: #fff;
    --black: #2D2C2B;
    --dark: #000;
    --primary: #00A0E1;
    --dark-yellow : #00A0E1;


}  
/* topbar section start here */

.topbar{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    flex-direction: row;
    background-color: var(--yellow) !important;
    color: var(--dark);
    padding: 3px 0px ;
}
.top-navbar .right-side-top{
    display: flex;
    flex-wrap: wrap;
    color: #000;
    justify-content: space-evenly;
    align-items: center;

}
.top-navbar .right-side-top .top-location{
    margin-right: 15px;
     text-align: center;
    display: flex;
    color: var(--white) !important; 
    
    justify-content: space-between;
}
.top-navbar .right-side-top .top-location .fa{
    font-size: 25px;
    margin-right: 5px;

    text-align: center;
    color: var(--white);

 }
.top-navbar .right-side-top .top-location a{
    font-size: 17px;
    text-decoration: none;
    text-align: center;
    color: var(--dark);
 
 }
.topbar-section .top-navbar{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
 
}
.topbar{
  background-color: var(--white);
}

.top-navbar .left-side-top .top-social-link .fa-brands {
    margin-right: 9px !important;
    font-size: 22px;
    color: var(--dark) !important;   
}
.social-media a .fab{
  color: var(--dark);
}

@media (max-width:800px){
    .top-navbar{
        display: none;
    }
}
/* topbar section end here */



/* navbar section start here */

    
    /*** Spinner ***/
    #spinner {
      opacity: 0;
      visibility: hidden;
      transition: opacity .5s ease-out, visibility 0s linear .5s;
      z-index: 99999;
  }
  
  #spinner.show {
      transition: opacity .5s ease-out, visibility 0s linear 0s;
      visibility: visible;
      opacity: 1;
  }
  .navbar-toggler .fa-bars{
    font-size: 29px;
  }
  
  /*** Button ***/
  .btn {
      font-weight: 500;
      transition: .5s;
  }
  
  .btn.btn-primary {
      color: #FFFFFF;
  }
  
  .btn-square {
      width: 38px;
      height: 38px;
  }
  
  .btn-sm-square {
      width: 32px;
      height: 32px;
  }
  
  .btn-lg-square {
      width: 48px;
      height: 48px;
      color: var(--dark) !important;
  }
 
  /* topbar start */
  .topbar .breadcrumb .breadcrumb-item a{
    text-decoration: none;
    color: var(--primary);
  }
  .topbar .follow-us a {
    text-decoration: none;
  }
  .topbar .follow-us a i{
    color: var(--primary);
  }
  /* topbar end */
  /*** Navbar ***/
  .navbar{
    background-color: var(--white) !important;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
  }
  .navbar .dropdown-toggle::after {
      border: none;
      content: "\f0c9";
      font-family: "Font Awesome 5 Free";
      font-weight: 900;
      vertical-align: middle;
      margin-left: 8px;
      
  }
  
  .navbar .navbar-nav .nav-link {
      padding: 35px 15px;
       color: var(--dark) !important;
      outline: none;
  }
  .navbar .navbar-nav .nav-link:hover {
        color: var(--dark) !important;
    
  }
  
  /* .navbar .navbar-nav .nav-link:hover,
  .navbar .navbar-nav .nav-link.active {
      color: var(--dark) !important ;
  }
   */
  .navbar.fixed-top {
      transition: .5s;
  }
  .navbar .call-us .call-icon i{
   color: var(--primary);
  }
  .navbar .call{
      text-decoration: none;
      color: var(--white);
  }
  /* .dropdown-menu{
    overflow-y: scroll;
    height: 600px;
  } */
  .dropdown-menu a:hover {
    background-color: var(--yellow);
    color: var(--white);
  }
  @media (max-width: 991.98px) {
      .navbar .navbar-nav {
          margin-top: 10px;
          border-top: 1px solid rgba(255, 255, 255, .3);
          background: var(--dark);
      }
  
      .navbar .navbar-nav .nav-link {
          padding: 10px 0;
      }
      .navbar-brand img{
          width: 170px;
      }
  }
  
  @media (min-width: 992px) {
      /* .navbar .nav-item .dropdown-menu {
          display: block;
          visibility: hidden;
          top: 100%;
          transform: rotateX(-75deg);
          transform-origin: 0% 0%;
          transition: .5s;
          opacity: 0;
      }
  
      .navbar .nav-item:hover .dropdown-menu {
          transform: rotateX(0deg);
          visibility: visible;
          transition: .5s;
          opacity: 1;
      } */
  }
  
  
  
        
      
      .back-to-top {
          position: fixed;
          display: none;
          right: 30px;
          bottom: 30px;
          z-index: 99;
      }
      
      
      /*** Spinner ***/
      #spinner {
          opacity: 0;
          visibility: hidden;
          transition: opacity .5s ease-out, visibility 0s linear .5s;
          z-index: 99999;
      }
      
      #spinner.show {
          transition: opacity .5s ease-out, visibility 0s linear 0s;
          visibility: visible;
          opacity: 1;
      }
      
      
      /*** Button ***/
      .btn {
          font-weight: 500;
          transition: .5s;
      }
      
      .btn.btn-primary {
          color: #FFFFFF;
      }
      
      .btn-square {
          width: 38px;
          height: 38px;
      }
      
      .btn-sm-square {
          width: 32px;
          height: 32px;
      }
      
      .btn-lg-square {
          width: 48px;
          height: 48px;
      }
      
      .btn-square,
      .btn-sm-square,
      .btn-lg-square {
          padding: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          font-weight: normal;
      }
      
      /* topbar start */
      .topbar .breadcrumb .breadcrumb-item a{
        text-decoration: none;
        color: var(--primary);
      }
      .topbar .follow-us a {
        text-decoration: none;
      }
      .topbar .follow-us a i{
        color: var(--white);
      }
      /* topbar end */
      /*** Navbar ***/
      .navbar{
        background-color: var(--black);
      }
      .navbar .dropdown-toggle::after {
          border: none;
          content: "\f107";
          font-family: "Font Awesome 5 Free";
          font-weight: 900;
          vertical-align: middle;
          margin-left: 8px;
      }
     
      .dropdown:hover  .dropdown-menu{
        display: block;
      }
      
      .navbar .navbar-nav .nav-link {
          padding: 35px 15px;
          color: var(--white);
          outline: none;
          font-size: 18px;
          font-weight: 600;
      }
      
      .navbar .navbar-nav .nav-link:hover,
      .navbar .navbar-nav .nav-link.active {
          color: var(--primary) !important;
       }

      
      .navbar.fixed-top {
          transition: .5s;
      }
      .navbar .call-us .call-icon i{
       color: var(--primary);
      }
      .call-us a{
        background-color: var(--yellow);
        text-decoration: none;
        font-size: 18px;
        color: var(--white);
        padding: 8px 26px;
        border-radius: 8px;
      }
      .navbar .call{
          text-decoration: none;
          color: var(--white);
      }
      .navbar-brand img{
        width: 170px;
    }
    .navbar-toggler{
      color: var(--black);
      background-color: var(--white);
    }
    .navbar-toggler-icon{
      color: var(--black);
    }
      @media (max-width: 991.98px) {
          .navbar .navbar-nav {
              margin-top: 10px;
              border-top: 1px solid rgba(255, 255, 255, .3);
              background: var(--white);
          }
      
          .navbar .navbar-nav .nav-link {
              padding: 10px 0;
          }
          .navbar-brand img{
              width: 100px;
          }
      }
      
      @media (min-width: 992px) {
          /* .navbar .nav-item .dropdown-menu {
              display: block;
              visibility: hidden;
              top: 100%;
              transform: rotateX(-75deg);
              transform-origin: 0% 0%;
              transition: .5s;
              opacity: 0;
          }
      
          .navbar .nav-item:hover .dropdown-menu {
              transform: rotateX(0deg);
              visibility: visible;
              transition: .5s;
              opacity: 1;
          } */
      }
      
      
      /*** Header ***/
      .header-carousel .owl-carousel-inner {
          position: absolute;
          width: 100%;
          height: 100%;
          top: 0;
          left: 0;
          display: flex;
          align-items: center;
          background: rgba(65, 64, 64, 0.411);
      }
      .header-carousel .owl-carousel-inner .readmore-btn{
        background-color: var(--primary);
      }
      @media (max-width: 768px) {
          .header-carousel .owl-carousel-item {
           
          }
      
          .header-carousel .owl-carousel-item img {
              
          }
      
          .header-carousel .owl-carousel-item p {
              font-size: 16px !important;
          }
      }
      
      .header-carousel .owl-nav {
          position: relative;
          width: 80px;
          height: 80px;
          margin: -40px auto 0 auto;
          display: flex;
          justify-content: center;
          align-items: center;
      }
      
      .header-carousel .owl-nav::before {
          position: absolute;
          content: "";
          width: 100%;
          height: 100%;
          top: 0;
          left: 0;
          background: #FFFFFF;
          transform: rotate(45deg);
      }
      
      .header-carousel .owl-nav .owl-prev,
      .header-carousel .owl-nav .owl-next {
          position: relative;
          font-size: 40px;
          color: var(--primary);
          transition: .5s;
          z-index: 1;
      }
      
      .header-carousel .owl-nav .owl-prev:hover,
      .header-carousel .owl-nav .owl-next:hover {
          color: var(--dark);
      }
      
      .page-header {
          margin-bottom: 6rem;
          background: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .5)), url(../image/banner/banner-1.jpg) center center no-repeat;
          background-size: cover;
      }
      .banner-text{
          background-color: #ffffff53;
          padding:20px 10px;
      }
      .banner-text span{
          color: var(--red);
      }
      
      .breadcrumb-item+.breadcrumb-item::before {
          color: var(--light);
      }
       
      
      
    /* navbar section end here */

    

    /* about us section start here */
    .about-us-section{
        background: linear-gradient(rgba(0, 0, 0, 0.848),rgba(0, 0, 0, 0.837)), url("../image/card-image/soloar-back-iamge.jpg");
        background-position: center;
        background-size: cover;
        background-repeat: no-repeat;
        background-attachment: fixed;
    }
    .about-head p{
        font-size: 20px;
        font-weight: 600;
        color: var(--white);
    }
    .about-highlight{
        font-size: 18px;
        color: var(--yellow);
        font-weight: 600;
    }

    .about-right a{
        background-color: var(--yellow);
        color: var(--black);
        text-decoration: none;
        font-size: 17px;
        padding: 5px;
        border-radius: 5px;
     
    }
    .about-right a:hover{
        background-color: var(--white);
        color: var(--yellow);
        text-decoration: none;
        font-size: 17px;
        padding: 5px;
     
    }
    .about-text{
        text-align: justify;
        color: var(--white);
        box-shadow: rgba(216, 214, 214, 0.24) 0px 3px 8px;
        padding: 10px 15px;
    }
    .about-text-about{
      line-height: 2.0;
    }

    /* about us section end here */



    /* rooftop solution section css start here */
    .rooftop-head h1{
        font-size: 29px;
         font-weight: 600;

    }
    .roof-card h2{
      margin-top: 13px;
        font-size: 18px;
        text-align: center;
        font-weight: 600;


    }
    .roof-card{
        text-align: center;
        
    }
    /* rooftop solution section css end here */



    /* core-value section css start here */
    .core-value{
        background-position: center;
        background-size: cover;
        padding: 60px 10px ;
        background-repeat: no-repeat;
        background-attachment:  fixed !important;
        /* background: linear-gradient(rgba(28, 21, 21, 0.758),rgba(34, 27, 27, 0.719)),url("../image/card-image/photovoltaic-solar-power-panel-field-green-clean-alternative-power-energy-concept-ai-generative.jpg"); */
    }
    .core-card{
        margin: 30px 0px;
        text-align: center;
        background-color: var(--yellow);
        padding: 10px 0px;
        box-shadow: rgba(21, 18, 18, 0.25) 0px 14px 28px, rgba(23, 17, 17, 0.22) 0px 10px 10px;

        /* box-shadow: rgba(19, 16, 16, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;    */
      }
      .core-card:hover{
        transform: scale(1.1);
        transition: all 0.5s ease-in-out;
      }
     
      .core-head{
        color: var(--black);
        font-size: 20px;
        font-weight: 600;
      }

    .core-text{
        text-align: center;
        color: var(--white);
        /* box-shadow: rgba(0, 0, 0, 0.25) 0px 14px 28px, rgba(0, 0, 0, 0.22) 0px 10px 10px; */
        font-size: 18px;
        margin-top: 9px;
        font-weight: 600;
     }

    /* core-value section css end here */



    /* service-section start here */
    .service-section {
      background: linear-gradient(rgba(0, 0, 0, 0.664), rgba(0, 0, 0, 0.859)), url(../image/card-image/soloar-back-iamge.jpg);
      background-repeat: no-repeat;
      background-size: cover;
      color: var(--white);
      background-attachment: fixed;
  }
   .service-section h1{
        font-weight: 600;
   }
    .service-section .table{
        color: var(--dark);
    }
    .product-tab{
      background-color: var(--yellow) !important;
    }
    .btns .get-back{
      background-color: var(--yellow);
      color: var(--dark) ;
    }
    .btns  .get-back:hover{
      background-color: var(--dark);
      color: var(--white);
    }
    
.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
  color: #000;
  background-color: var(--yellow);
}
.nav-pills .nav-link {
  background: 0 0;
 border: 1px solid black;
  color: var(--dark);
  margin-right: 15px;
  border-radius: .25rem;
}
    .explore{
        background-color: var(--yellow);
        color: var(--white);
        text-decoration: none;
        padding: 10px;
        border-radius: 5px;
        margin-top: 30px !important;
    }
    .explore:hover{
        background-color: var(--white);
        color: var(--yellow);
    }
    .service-section .table .table-upper{
        background-color: var(--yellow);
    }
    .product-name{
        font-size: 35px;
    }
    .product-text{
        text-align: justify;
        line-height: 2.0;
    }
    /* service-section end here */



/* core strength css start here */
.quality{
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
}
.strength-text h1{
  font-size: 33px;
  font-weight: 600;
}

.strength-text p{
  font-size: 20 px;
  font-weight: 600;
}
.quality:hover{
  box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
  /* transform: scale(1.02); */
  transition: 0.2s all ease-in-out;
}
.quality-text h1{
  font-size: 18px;
  margin: 5px !important;
  font-weight: 600;
}
.quality-text p{
  font-weight: 500;
}
.quality:hover .quality-icon .fa-check{
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  padding: 8px;
  border-radius: 35px;
  color: #FFF;
  background-color: #00A0E1;

}
.quality .quality-icon .fa-check{
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  padding: 8px;
  border-radius: 35px;
   color: #00A0E1;

}
@media (max-width:500px) {
  .strength-text h1{
    font-size: 13px;
    font-weight: 600;
  }
  .quality-text p {
    font-weight: 500;
    font-size: 11px;
}
.strength-text .strength-head{
  font-size: 29px;
}
 
}
/* core strength css end here */


/* All product section start here */
.product-head a{
  font-size: 20px;
  text-decoration: none;
  color: var(--white);

}
.product-image{
  box-shadow: rgba(0, 0, 0, 0.19) 0px 10px 20px, rgba(0, 0, 0, 0.23) 0px 6px 6px;
}
.product-head{
  background-color: var(--yellow);
  color: var(--white);
  padding: 5px ; 
  margin-bottom: 8px;
  
}
.product-head:hover .fa-long-arrow-right{
  transform: translateX(8px);
  transition: all 0.5s ease-in-out;
 
}
 
.product-heading{
  color: var(--white);
}
.product-section{
  background: linear-gradient(rgba(0, 0, 0, 0.656),rgba(0, 0, 0, 0.656)),url("../image/card-image/solar-earth.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-attachment: fixed;

}
.product-heading-text{
  padding:  0px 80px ;
  line-height: 1.7;
}
@media(max-width:1100px){
  .product-heading-text{
    padding:  0px 0px ;
    line-height: 1.7;
  }
}
.tab-content ul li{
  line-height: 1.9;
}
/* All product section end here */


/* blog section start here */
.blog-photo img{
  border-radius: 10px;
}
.blog-text{
  margin: 30px;
  transform: translateY(-50px);
  padding: 8px 12px;

  background-color: var(--yellow);
  color: var(--white);
}
.blog-text a{
  text-decoration: none;
  color: var(--white);
}
.blog-text .fa-arrow-circle-right{
  font-size: 20px;
  text-align: center;
}
/* blog section end here */



/* about us css start here */
.banner{
  background: linear-gradient(rgba(0, 0, 0, 0.633),rgba(0, 0, 0, 0.666)),url("../image/banner/banner4.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  text-align: center !important;
}
.banner-txt{
  color: var(--white) ;
  padding: 100px;
  display: flex ;
  flex-direction: column  ;
  justify-content: center;
  align-items: center;

}
.breadcrumb a{
  color: var(--white);
  text-decoration: none   ;
}
@media (min-width:500px) and (max-width:768px){
  .banner-txt{
    padding: 70px;
  }
}
@media (max-width:499px){
  .banner-txt{
    padding: 0px;
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }
}
/* about us css end here */

 

/* working gallery session start here */
.work-gallery {
  position: relative;
  margin-bottom: 20px;
  margin-top: 20px;
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;

}
.work-gallery:hover .view{
  display: block;
   height: 100%;
  width: 100%;

}
.work-heading h1{
  color: var(--black);
}
.high-light{
  color: var(--primary);

}
.work-heading .gallery{
  color: var(--primary);
}
.work-gallery .view {
  transition: transform 0.3s ease;    
  height: 50%;
  background-color: #000000a9;
  width:10%;
  position: absolute;
  top: 0;
  left: 0;
  display: none;
}
.work-gallery .view  .add-icon{
   display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  transform: translateY(180px); 
}
.work-gallery .view  .add-icon a i{
  color: var(--white);
  font-size: 25px;
  
  
}
.work-gallery:hover .fa{
   transform: rotate(180deg);
}

.our-work-section .work-gallery .view  .add-icon{
  display: flex;
 justify-content: center;
 align-items: center;
 text-align: center;
 transform: translateY(100px); 
}
@media (max-width:500px){
  .work-gallery .view  .add-icon{
    display: flex;
   justify-content: center;
   align-items: center;
   text-align: center;
   transform: translateY(40px); 
 }
}
/* working gallery session end here */
 
/* contact us form start here */
.form-head{
  background-color: var(--yellow) !important;
  border-radius: 25px;
  padding: 60px 10px !important;
  margin-bottom: 25px !important;
 }
.captcha-para , .cpatcha-div{
  background: linear-gradient(rgba(0, 0, 0, 0.501),rgba(0, 0, 0, 0.512)),url("../image/card-image/captac.jpg");
  color: var(--white);
  text-align: center;
  padding-bottom: 1px;
  }
 .form-head h2{
  color: var(--white) !important;
 }

 
.contact-heading{
  text-align: center;
}
.contact-heading span{
  color: var(--blue);
}
.address{
  font-size: 18px;
}
.address .fa{
  color: var(--yellow);
}
.contact-form{
  background: linear-gradient(rgba(0, 0, 0, 0.623),rgba(0, 0, 0, 0.629)),url("../image/card-image/floor-solor.png");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;  }

 
 
 
.modal-body button{
  background-color: var(--yellow);
  color: var(--white);
}
.modal-body button:hover{
  background-color: var(--yellow);
  color: var(--white);
}

.refresh{
  background-color: var(--yellow);
  color: var(--white);
}
.form-group input{
  padding: 10px 5px;
}
.address .fa{
  color: var(--white);
}
.address a{
  text-decoration: none;
  color: var(--white);

}
 
.form-head span{
  color: var(--blue);
}
.form-head h2{
  color: var(--yellow);
   font-weight: 600;

}
.form-name{
  color: var(--black);
  font-weight: 400;
  font-size: 17px;
}
.last-name,.first-name{
  border-top: none;
  border: 1px solid gainsboro;

}
.mail,.number{
  border: 1px solid gainsboro;


}
.name button{
  background-color: var(--white);
  color: var(--dark);
}
.name button:hover{
  background-color: var(--yellow);
  color: var(--white);
}
.last-name{
  margin-left: -5px;
}
.name input:hover{
  box-shadow:rgba(121, 138, 198, 0.436) 0px 20px 30px -10px;
 }
.message{

  border-top: none;
  border: 1px solid gainsboro;
 }
.message:hover{
  box-shadow:rgba(10, 33, 117, 0.35) 0px 20px 30px -10px;
 }
.location-product .btn{
  text-align: left;


}
.location-product{
  display: flex;
  justify-content: space-between;
  padding: 10px;
}
.location-product .dropdown-item{
  color: var(--black);
  font-weight: 500;
}
.name{
  padding: 10px;

}
.name-section{
  display: flex;

}
 
  .captcha-para p{
      margin-top: 4px;
      margin-bottom: 3px;
      font-size: 22px;
      padding: 3px 10px;
      font-style: italic;
  }
.submit button{
  margin: 10px;
   padding: 8px;
  border-radius: 5px;
  color: var(--dark);
  border: none;
  background-color: var(--white);
}
.submit button:hover{
  background-color: var(--yellow);
  color: var(--white);
}
 
.addres{
text-align: start;
}
.addres h1{
  font-size: 24px;
  font-weight: 600;
}
.addres p{
padding: 0;
margin: 5px;
}
.address-icon {
  background-color: rgba(172, 161, 161, 0.566);
  padding: 20px 15px; 
  text-align: center;
  border-bottom: 7px solid var(--yellow);
  


}
.contact-address .address-icon .fa-map-location{
  font-size: 55px;
  text-align: center;
  color: var(--black);
  transition: all 0.3s ease-in-out;
}
.contact-address .fa-phone ,.contact-address .fa-envelope{
  font-size: 55px;
  text-align: center;
  color: var(--black);
  transition: all 0.3s ease-in-out;
}
.contact-address .address-icon:hover .fa-solid{
 transform: scale(1.2);

}
.address-icon:hover .fa-envelope{
 transform: scale(1.2);

}
.address-icon:hover .fa-phone{
 transform: scale(1.2);

}
.contact-address .addres a{
  text-decoration: none;
  color: rgb(74, 71, 71);
  font-size: 18px;
}


@media (min-width:767px) and (max-width:991.5px){
  .contact-map iframe{
      height: 663px;
    }
  
}
@media (max-width:760px){
  .addres{
    text-align: center;
    }
    .addres{
      text-align: center;
      }
      
      .form-head{
        background-color: var(--yellow) !important;
        border-radius: 25px;
        padding: 10px 10px !important;
        margin-bottom: 25px !important;
       }
}

/* address section start here */
.call-icon{
  text-align: center;
  /* background-color: #30bb5a; */
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translateY(30px );
  
}
.call{
  text-align: center;
}
.call-icon a{
  background-color: var(--white);
  text-align: center;
  border-radius: 50%;
  text-decoration: none;
  width: 80px;
  display: flex;
  align-items: center;
  justify-content: center;

  height: 80px;

}
.call-icon .fa{
  color: var(--dark);
  font-size: 35px !important;
  transition: all linear 0.3s;

}
.call-icon .fa-location-dot{
  color: var(--dark);
  font-size: 35px !important;
  transition: all linear 0.3s;

}
.call-icon .fa:hover{
  color: var(--yellow);
  font-size: 35px;
  transform: scale(1.4);
}
.call-icon .fa-location-dot:hover{
  color: var(--yellow);
  font-size: 35px;
  transform: scale(1.4);
}
.call-text{
  border: 1px solid;
  padding: 39px 30px;
  background-color: var(--yellow) ;
  color: var(--white);
  border: none;
  text-align: start;

  
}
.call-text a{
  text-decoration: none;
  color: var(--white);
  font-size: 18px;

}
.chat-text{
  border: 1px solid;
  padding: 35px 30px;
  
  background-color: var(--yellow) ;
   border: none;
  text-align: start;
  color: var(--nav-text); 
}
.chat-text a{
  text-decoration: none;   
color: var(--white);
  font-size: 18px;
  border-radius: 3px;
}
.chat-text p,h4{
  text-decoration: none;   
color: var(--white);
  font-size: 18px;
  border-radius: 3px;
}
.chat-text p{
  text-decoration: none;   
color: var(--white);
  font-size: 17px;
  border-radius: 3px;
}
.mail-text{
  border: 1px solid;
  padding: 35px 30px;
  background-color: var(--yellow) ;
  border: none;
  text-align: start;

}
.mail-text a{
  text-decoration: none;
   
  color: var(--white);
 font-size: 18px;
  border-radius: 3px;

}

.address{
  font-size: 18px;
}
.address .fa{
  color: var(--darkblue);
}
/* address section end here */



/* sub product css start here */
.sub-product-section{
  margin-top: 60px;
  margin-bottom: 60px;
}

  .sub-product-card{
    box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
     margin-top: 10px;
     margin-bottom: 10px;

  }
  .sub-product-card .sub-image{
    position: relative;
  }
  
  .sub-product-card .sub-image .sub-back{
    position: absolute;
    top: 0;
    display: none;
    align-items: center;
    justify-content: center;
    background-color: #0000006e !important;
    width: 10%;
    height: 10%;
    color: var(--white);
    transition: all 0.5s ease-in-out;
  }
  .sub-product-card .sub-image:hover .sub-back{
    display: flex;
width: 100%;
height: 100%;
    transition: all 0.3s ease-in-out;

  }
  .sub-back a{
    text-decoration: none;
    background-color: var(--primary);
    padding: 5px 8px;
    color: var(--white);
  }
  .sub-product-section .sub-prod-text{
    background-color: var(--dark-yellow);
    color: var(--white);
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: center;

  }
  
  .sub-product-section .sub-prod-text a{
     color: var(--white);
     text-decoration: none;
     font-size: 18px;
  }


  /* General Styling */
.nav-item {
  position: relative;
}

.dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #fff;
  border: 1px solid #ddd;
  padding: 0;
  min-width: 200px;
  z-index: 1000;
}
.dropdown-menusub {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #fff;
  border: 1px solid #ddd;
  padding: 0;
  min-width: 200px;
  z-index: 1000;
}

@media(max-width:1024px){
  .dropdown-submenu:hover  .dropdown-menusub{
    top: 50px;
    transform: translateX(-300px);
    /* right: 100%; */
    display: block;
  }
}

.dropdown-item {
  display: block;
  padding: 10px 15px;
  color: #333;
  text-decoration: none;
}

.dropdown-item:hover {
  background-color: #f1f1f1;
  color: #000;
}

/* Submenu Styling */
.dropdown-submenu {
  position: relative;
   
}

.dropdown-submenu .dropdown-menusub {
  top: 0;
  left: 100%;
  margin-left: 0.1rem;
 
}

.dropdown-submenu:hover  .dropdown-menusub{
  display: block;
}


@media (min-width:992px) and (max-width:1084px) {
  .call-us a {
    background-color: var(--yellow);
    text-decoration: none;
    font-size: 14px;
    color: var(--white);
    padding: 10px 0px;
    border-radius: 8px;
}
  
}
/* Show Main Dropdown on Hover */


/* sub product css end here */



/* ============================ contact-us end ================== */
  

/* related-product-card section start here */
.related-product  .explore-btn a{
  color: var(--white);
    text-decoration: none;
  font-size: 18px;
  width: 100%;
}
 .explore-btn{
   background-color: var(--yellow);
  padding: 8px 15px;

}
.get-back{
  margin-top: 19px;
  color: var(--white);
}
/* related-product-card section end here */
 
/* products-slider START here*/
.products-slider{
  margin: 20px;
  /* border: 1px solid black; */
  padding: 7px;
  border-radius: 10px 0px 10px 10px;
  /* border-radius: 13px; */
  box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;

}
.products-text a{
  text-decoration: none;
  color: var(--yellow);
  padding-top: 5px;
  font-size: 18px;
}
 
.products-text{
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
    padding: 7px 9px;
   border-radius: 0px 0px 10px 10px;

}
.enqiu .fa-arrow-right{
  color: var(--white);
  padding-right: 2px;
  text-align: center;
  cursor: pointer;
 }
.enqiu{
  color: var(--white);
   background-color: var(--yellow);
}
 
.enqiu a{
  padding: 1px 5px;
  color: var(--white);
 }
 
.Product-craosel{
  padding: 10px 40px;
}

/* products-slider end here*/

    
/*** Footer Start ***/
.footer .footer-item .btn-link {
    line-height: 35px;
    color: rgba(255, 255, 255, .5);
    transition: 0.5s;
  }
  .footer-item .btn-link{
    text-decoration: none;
    color: var(--white) !important;
  }
  .footer-item .soical-icon a{
    background-color: var(--white)  ;
    color: var(--yellow);
  }
  .footer-item .soical-icon a:hover{
    background-color: var(--yellow) ;
    color: var(--white);
  }
  .footer-item .btn-link:hover{
    color: var(--yellow) !important;
    transform: translateX(8px);
  }
  .footer-item p{
    color: var(--white);
  }
  .footer-item h4{
    color: var(--yellow) !important;
  }
  
   
  .trade-asia:hover{
    color: var(--yellow)  !important;
  }
  .footer .footer-item p.mb-4 {
    line-height: 35px;
  }
  
/* call and whatapp icon start here */

.what-icon{
  position: relative;
}
.whatapp-icon img{
  width: 70px !important;
  position: fixed;
  bottom:  100px;
  left: 30px;
  z-index: 9;

}
.whatapp-icon:hover   img{
  transform: scale(1.2);
  transition: all 0.6s ease-in-out;

}
.phone-icon{
  position: relative;
 }
.phonen-icon img{
  width: 70px !important;
  position: fixed;
  bottom:  100px;
  right: 30px;
  z-index: 99;

}
.call-icon:hover   img{
   transform: scale(1.2);
   transition: all 0.5s ease-in-out;
}

@media (max-width:500px){
  .call-icon img{
    width: 60px !important;
   
    
  }
  .whatapp-icon img{
    width: 60px !important;
   
    
  }
}
@media (min-width:502px) and (max-width:992px) {
  .call-icon img{
    width: 70px !important;
   
    position: fixed;
    bottom:  120px;
    right: 9px;
  }
  .whatapp-icon img{
    width: 70px !important;
    position: fixed;
    bottom:  120px;
    left: 9px;
  }

  
}
 

/* call and whatapp icon end here */




  /*** Footer End ***/