/*font-family*/
/*font-family*/

/* clip-path: polygon(0% 0%, 100% 0%, 100% 34%, 75% 34%, 29% 34%, 26% 10%, 0 11%); */



@import url('https://fonts.googleapis.com/css2?family=Arimo:ital,wght@0,400..700;1,400..700&family=Cardo:ital,wght@0,400;0,700;1,400&family=Cinzel:wght@400..900&family=Gothic+A1&family=Jost:ital,wght@0,100..900;1,100..900&family=Manrope:wght@200..800&family=Marcellus&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Tinos:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,200;1,300;1,400;1,500;1,600;1,700;1,800&display=swap');

:root{
   --cl1        :#42121f;
   --cl2        :#c19434;
   --color-bg1  :#faf8ff;
   --arial      : "Arimo", serif;
   --pop        :"Poppins", serif;
   --tino       :"Tinos", serif;
   --op-san     :"Open Sans", serif;
   --mons       :"Montserrat", serif;
   --manrop     :"Manrope", serif;
   --goth       :"Gothic A1", serif;
   --jost       :"Jost", sans-serif;
   --spectral   :"Spectral", serif;
   
 
}


body{
  width: 100%;
  /* height: 100%; */
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  box-sizing: border-box;

}

* {
  box-sizing: border-box;
 
}







 .sl-btn a {
  background-color: var(--cl2);
  padding: 12px 1.2rem;
  border-radius: 5px;
  color: #fff;
  font: 400 16px / 1.3 var(--pop);
  position: relative;
  z-index: 0;
  overflow: hidden; /* keeps ::before within button */
  display: inline-block;
}

 .sl-btn a span {
  position: relative;
  z-index: 2; /* text above ::before */
}

.sl-btn a::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%; /* start hidden to the left */
  background-color: var(--cl1);
  width: 100%;
  height: 100%;
  z-index: 1;
  transition: all 0.4s ease-in-out;
}

 .sl-btn a:hover::before {
  left: 0; /* slide in from left to right */
}

.sl-btn a:hover {
  background-color: var(--cl2);
  transition: all 0.3s ease-in-out;
  color: #fff;
}




/****************
=========================
 Animation ----------------------------------------------------------------------------------------------------------------------------------------
========================
******************/



.delighter.top { transform:translateY(-18%); opacity:0; transition: all 1.2s ease-out; }
.delighter.top.started { transform:none; opacity:1; } 

.delighter.card { transform:translateY(6%); opacity:0; transition: all 1.2s ease-out; }
.delighter.card.started { transform:translateY(-6rem); opacity:1; } 

.delighter.scale { transform:scale(90%); opacity:0; transition: all .5s ease-out; }
.delighter.scale.started { transform:none; opacity:1; } 

.delighter.bottom { transform:translateY(18%); opacity:0; transition: all 1.2s ease-out; }
.delighter.bottom.started { transform:none; opacity:1; } 


.delighter.skew { transform:skew(5deg); opacity:0; transition: all 1.2s ease-out; }
.delighter.skew.started { transform:none; opacity:1; }


.delighter.left { transform:translateX(-15%); opacity:0; transition: all 1.2s ease-out; }
.delighter.left.started { transform:none; opacity:1; } 

.delighter.right { transform:translateX(15%); opacity:0; transition: all 1.2s ease-out; }
.delighter.right.started { transform:none; opacity:1; } 

.delighter.opacity {  opacity:0; transition: all 4s ease-in; }
.delighter.opacity.started { transform:none; opacity:1; } 

.delighter.anshape { opacity:0;transition: all 2s linear; z-index: 3; }
.delighter.anshape.started {  opacity:1;} 

.delighter.text1 { opacity:0;transition: all 1s linear;transform:translateX(-10%); z-index: 2; }
.delighter.text1.started {  opacity:1;transform:none;}  

.delighter.text2 { opacity:0;transition: all 2s linear;transform:translateX(-11%); z-index: 2; }
.delighter.text2.started {  opacity:1;transform:none;}  

/* animation-end */
/* ---------- */



/*****************
=======================
HEADER-SECTION  ----------------------------------------------------------------------------------------------------------------------------------------
=======================
*****************/

.hd-top{
  background-color: var(--cl1)!important;
  padding: 15px 5%;
  z-index: 1;
}


.hd-top .inner-container{
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.hd-top .inner-container .hd-left{
 position: relative;
 display: flex;
 align-items: center;
 justify-content: flex-end;
 gap: 20px;
}

.hd-top .inner-container .hd-left .hd-content i{
  color: #fff;
  font-size: 14px;
}
.hd-top  .hd-left .hd-content a{
  font: 400 14px/1 var(--arial);
  color: #fff;
}

.hd-top  .hd-left .hd-content p{
  font: 400 14px/1 var(--arial);
  color: #fff;margin: 0px!important;
  padding: 0px!important;
}

.hd-top  .hd-left .hd-content a:hover{
  color: var(--cl3);
  transition: all .2s linear;
}


.hd-top  .hd-left .hd-content{
  display: flex; align-items: center;
  justify-content: center;
  gap: 8px;
}

.hd-top .hd-right a{
 background-color: var(--cl2);
 border: 2px solid var(--cl2);
 color: #fff;
 padding: 9px 15px;
 font: 600 13px/1.2 var(--pop);
 border-radius: 3px;
}

.hd-top .hd-right a:hover{
 background: none!important;
 color: var(--cl2);
 transition: all .2s linear;
}


.full-width-header{
 position: relative;
}


.indx-full-header{
  /* top: 0px; left: 0px; */
  width: 100%;
  /* background-color: rgba(0, 0, 0, .5); */
  z-index: 4;
}


.rs-header{
  padding: 0px 5% 10px 5%;
  position: relative;
  top: 0px; left: 0px; 
  background-color: #fff;
  width: 100%;
}

.pg-header h1 {
    color: #000!important;
}


.rs-header .menu-toogler .menu-toogle-container:hover svg {
  color: var(--cl1);
  transition: all .2s linear;
}

/* .rs-header .hd-logo{
  display: flex; align-items: center;
  justify-content: flex-start;
  position: relative;
} */

.rs-header .hd-logo p{
   position: absolute;
   top: 50%; left: 250px;
   transform: translateY(-50%);
   min-width: 450px;
   font: 400 17px/20px var(--tino)!important;
   color: var(--cl3);
   margin-bottom: 0px;
}


.rs-header .auto-container{
  overflow: visible!important; 
}



.rs-header .menu-area .row-table .mn-item{
  display: flex;align-items: center;
  justify-content: center; gap: 40px;
}



.rs-header .menu-area .row-table li a{
  color: #000;
  font: 300 16px/1.1 var(--pop);
  text-transform: uppercase;
  letter-spacing: 1px;
  position: relative;
}



.rs-header .menu-area .row-table li a:hover{
 color: var(--cl2)!important; transition: all .2s linear;
}

.rs-header .menu-area .row-table .sub-menu li a:hover{
 color: #fff!important; transition: all .2s linear;
}

.rs-header .main-menu{
  transform: translateY(8px);
}

.rs-header .menu-toogler .menu-toogle-container {
    transform: translateY(10px);
}

.rs-header .menu-area .row-table .sub-menu a::before {
 display: none!important;
}

.rs-header .navbar {
 padding-bottom: 0px!important;
}

.rs-header .menu-area .row-table li a:hover{
  color: var(--cl1);
}

.rs-header .hd-con a{
  padding: 10px 2rem;
  border: 1px solid var(--cl1);
  border-radius: 20px;
}

.rs-header .hd-con a:hover{
 background-color: var(--cl1);
 color: #fff;
 transition: all .2s linear;
}


.rs-header .menu-toogler{
  display: flex;align-items: center;
  justify-content: center;
}

.rs-header .menu-toogler{
  display: flex;align-items: center;
  justify-content: center;
}


.rs-header .menu-toogler .menu-toogle-container{
  padding: 10px;
  /* background-color: var(--cl1); */
  border-radius: 5px;
  cursor: pointer;
}

.rs-header .menu-toogler .menu-toogle-container:hover{
  /* background-color: var(--cl2); */
  transition: all .3s linear;
}

.rs-header .menu-toogler svg{
  width: 50px; height: 50px;
  color: #000;
}

.rs-header .menu-toogler .menu-toogle-container i{
 color: #000;
 font-size: 30px;
}

.rs-header .menu-toogler .menu-toogle-container i:hover{
  color: var(--cl1)!important;
  transition: all .2s linear;
 }


.menu-item{
  position: relative;
} 


.rs-menu-area .row{
  overflow: visible!important;
}


.rs-header .menu-area .row-table{
  display: flex;align-items: center;
  justify-content: space-between; gap: 8rem;
}

.rs-header .menu-main-items .rs-menu{
 justify-content: end!important;
  margin-top: 0rem;
}

.sticky .rs-menu{
  margin-top: 0rem!important;
}


.rs-header .menu-main-items .menu-main-menu li{
  padding: 0px 15px;
}


.menu-main-items .menu-item a{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  position: relative;
  z-index: 2;
  font: 400 16px/1.2 var(--pop);
  text-transform: uppercase;
  color: #444444;
}

.menu-main-items .menu-item a:hover{
 color: var(--cl2);transition: all .2s linear;
}

.menu-main-items .current-menu-item > a,
.menu-main-items .current_page_item > a {
  color: var(--cl2) !important;
}


.menu-main-items .navbar-collapse .nav-menu{
  gap: 30px!important;
}


.menu-main-items .menu-item a i{
  transform: translateY(-2px);
}


.menu-item .sub-menu{
  position: absolute;
  top: 20px; left: 0px;
  z-index: 1;
  margin: 0px!important; padding: 0px!important;
  visibility: hidden; 
  min-width: 200px; 
  min-height: 120px;
  /* box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px!important; */
}

.menu-item:hover .sub-menu{
  top: 5px!important;
  visibility: visible!important; 
  transition: all .2s linear;
  z-index: 1;
  
} 

.menu-item .sub-menu li:hover{
 transition: all .2s linear;
  
}  

.menu-item .sub-menu li{
  list-style: none;
  margin: 0px!important;
  border-bottom: 1px solid #ccc;
  padding: 11px 20px;
  background-color: #fff;
  border-bottom: 1px solid #c7c7c759;
  display: block!important;
  
}

.menu-item .sub-menu li{
  transform: translateY(65px);
  
}

.menu-item .sub-menu li:hover{
 background-color: var(--cl1);
 transition: all .2s linear;
  
}

.menu-item .sub-menu li:last-child{
 border: none;
}

.menu-item .sub-menu li a{
  justify-content: flex-start!important;
  color: #080808!important;
  font: 400 13px/1.5 var(--pop)!important;
  padding: 0px!important;
} 

.menu-item .sub-menu li:hover a{
  color: #fff!important;
   
 }  


 .menu-item .sub-menu a:hover{
  color: #fff!important;
   
 }  
 
/* 
 .sub-menu a:hover{
  color: #fff!important;
 } */

 .menu-item i{
  color: #444444;
  font-size: 12px;
  /* display: none!important; */
 }


 .pg-header{
   background-color: #000!important;
 }


/****************
===========================
Responsive menu  ----------------------------------------------------------------------------------------------------------------------------------------
===========================
*****************/

/* .right_menu_togle{
  display: none;
} */



.right_menu_togle .respo-menu{
  margin-top: 3rem;
}

.right_menu_togle .respo-menu li a{
  color: #fff; font-size: 16px;
  text-transform: uppercase;
  text-decoration: none;
  font-family: var(--ft-rg);
  margin: 8px 0px;
  display: inline-block;
}


.right_menu_togle .respo-menu li a:hover{
 color: #c19434; transition: all .2s linear;
}



.right_menu_togle .nav-close{
 position: absolute; right: 0px;
 top: -2px;
}

.right_menu_togle .nav-close .close-btn{
  width: 40px;
  height: 40px;
  line-height: 40px;
  cursor: pointer;
 }

 .right_menu_togle .nav-close .line{
  position: absolute;
  left: 50%;
  top: 50%;
  width: 2px !important;
  height: 25px !important;
  background: #ffffff;
  border: none !important;
  transition: all 0.3s ease;
 }

.right_menu_togle .nav-close .line1{
  
  transform: translate(-50%, -50%) rotate(45deg);
  
 }

 .right_menu_togle .nav-close .line2{
  transform: translate(-50%, -50%) rotate(-45deg);
 }


 .right_menu_togle .nav-close .close-btn:hover .line{
   background-color: var(--cl1);
   transition: all .2s linear;
 }


.right_menu_togle .poly-contact{
  margin-top: 3rem;
}

.poly-contact h4{
  font-size: 16px;
  font-family: var(--rob-rg);
  color: #fff;
}


.right_menu_togle .poly-contact .address-list p{
  font-family: var(--rob-rg);
  color: #fff;
  font-size: 14px;
  margin-bottom: 3px!important;
}

.right_menu_togle .poly-contact .address-list a{
  font-family: var(--rob-rg);
  color: #fff;
  font-size: 14px;
  margin-bottom: 3px!important;
  text-decoration: none;
}

.right_menu_togle .poly-contact .address-list a:hover{
  color: var(--cl1);
  transition: all .2s linear;
}

.right_menu_togle .poly-contact .address-list{
  margin-bottom: 20px;
  display: flex;align-items: flex-start;
  justify-content: flex-start;
  gap: 10px;
}

.right_menu_togle .poly-contact .address-list i{
 color: #fff;
 font-size: 16px;
 transform: translateY(5px);
}


.rs-header .menu-toogler{
  padding-bottom: 10px;
}



/**********
=============================
 Main-slider  ----------------------------------------------------------------------------------------------------------------------------------------
=============================
**************/



.main-slider{
  position: relative;
  z-index: 0;
  overflow: hidden;
}


.main-slider .carousel-caption{
  position: absolute!important;
  bottom: 50%!important;left: 10%!important;
  transform: translateY(50%);
  text-align: left!important;
}

.main-slider .carousel-fade .carousel-item-next.carousel-item-left, .carousel-fade .carousel-item-prev.carousel-item-right, .carousel-fade .carousel-item.active {
  z-index: auto!important;
 
}


.main-slider .carousel-control-next, .main-slider  .carousel-control-prev {
  width: 5%!important;
}

.main-slider .cicon{
  width: 50px;height: 50px;
  background-color: #fff;
  border-radius: 50%;
  display: flex;align-items: center;
  justify-content: center;
}

.main-slider .cicon i{
 color: #000000b9!important;
 font-size: 18px;
}


.main-slider .carousel-caption .sl-title1{
  color: #fff;
  font: 600 50px / 1.1 var(--pop);
  text-transform: uppercase;
  animation-name: maintitle2;
  animation-duration: 4s;
  transition: all .2s ease;
  margin-bottom: 10px;
  text-shadow: 0 1px 1px #333;
}

.main-slider .carousel-caption .desc{
  max-width: 800px;
  
}

.main-slider .carousel-caption p{
  color: #fff;
  font: 400 20px / 1.3 var(--pop);
  animation-name: maintitle;
  animation-duration: 4s;
  transition: all .2s ease;
  text-shadow: 0 1px 1px #333;
  
}

.main-slider .carousel-caption .sl-btn{
  margin-top: 2rem;
  
}





@keyframes maintitle2 {
  from {
        opacity: 0;
        transform: translateX(-60px);
      }

  to {
    transform: translateX(0px);
    opacity: 1;
  }
}




@keyframes maintitle {
  from {
        opacity: 0;
        transform: translateY(10px);
      }

  to {
    transform: translateY(0px);
    opacity: 1;
  }
}



.main-slider .carousel-indicators div {
  width: 15px; height: 15px;
  border-radius: 50%;
  background-color: #000;
  cursor: pointer;
}

.main-slider .carousel-indicators  {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}

.main-slider .carousel-indicators .active {
  background-color: #fff;
}

.sl-btn-contaniner{
  margin-top: 1rem;
}
.sl-btn-contaniner .sl-btn{
  width: 130px; height: 50px;
  background-color: var(--cl2);
  position: relative;
  overflow: hidden;
  transition: all .3s linear;
  animation-name: sl-button;
  animation-duration: 4s;
  transition: all .2s ease;
  /* text-transform: uppercase; */
  letter-spacing: 1px;
}

@keyframes sl-button {
  from {
        opacity: 0;
       
      }

  to {
    
    opacity: 1;
  }
}
.sl-btn-contaniner .sl-btn::before{
  content: '';
  position: absolute;
  top: -30px; right: -30px;
  width: 50px; height: 50px;
  border-radius: 50%;
  background-color: var(--cl1);
  z-index: 0;
  transition: all .2s linear;
  opacity: 0;
}

.sl-btn-contaniner .sl-btn:hover::before{
  width: 200px; height: 200px;
  opacity: 1;
}

.sl-btn-contaniner .sl-btn:hover{
  box-shadow: none;
  transform: translateY(-3px);
}

.sl-btn-contaniner .sl-btn a{
  display: flex; align-items: center;
  justify-content: center;
  width: 100%; height: 100%;
  color: #fff;
  font-family: var(--rob-rg);
  position: relative;
  z-index: 1;
}




/**************
================================
Services ----------------------------------------------------------------------------------------------------------------------------------------
=================================
*****************/

.al-services .inner_cld{
  max-width: 1100px;
  margin: 0 auto;
  padding: 40px 30px;
  border-radius: 20px;
  border: 1px solid var(--cl1);
  background-color: #fff;
  /* transform: translateY(-6rem); */
}

.al-services .inner_cld .item .inner{
  display: flex; align-items: center;
  justify-content: center; flex-direction: column;
  gap: 8px; text-align: center;
}

.al-services .inner_cld .item .inner h3{
  font: 500 19px/1.2 var(--pop);
  color: #000;margin-top: 10px;
}

.al-services .spec-btn{
  margin-top: 10px;
}

.al-services .spec-btn a{
  padding: 8px 30px;
  border: 1px solid var(--cl1);
  color: var(--cl1);
  font: 500 15px/1.2 var(--arial);
  border-radius: 20px;
  display: inline-block;
}

.al-services .spec-btn a:hover{
  background-color: var(--cl1);
  color: #fff;
  transition: all .2s linear;
}





/**************
================================
Speciality ----------------------------------------------------------------------------------------------------------------------------------------
=================================
*****************/

.al-spec .inner-con{
  max-width: 1200px;
  margin: 0 auto;
}

.al-spec .item{
  cursor: pointer;
}

.al-spec .item:hover{
 transform: translateY(-4px);
 box-shadow: rgba(0, 0, 0, 0.04) 0px 3px 5px;
 transition: all .2s linear;
}

.al-spec .title h3{
  font: 500 24px/1.2 var(--pop);
  color: #000; margin-bottom: 8px!important;
}

.al-spec .title p{
  font: 400 16px/1.2 var(--pop);
  color: #444444; margin-bottom: 8px!important;
}


.al-spec .item p{
  font: 500 16px/1.2 var(--arial);
  color: #000;margin-top: 1rem;
}




  /**************
  ================================
  Trending Blogs  ----------------------------------------------------------------------------------------------------------------------------------------
  =================================
  *****************/

  .al-blog .inner-container{
    max-width: 1200px;margin: 0 auto;
  }

  .al-blog .blog-con{
   background-color: var(--color-bg1);
   padding: 20px;
  }

  .al-blog .bloimg{
    width: 100%; height: 100%;
  }

  .al-blog .blog-con h4{
    font: 600 17px/1 var(--pop);
    color: #222;
    margin: 0px 0px 14px 0px;
  }

  .al-blog .blog-con .desc p{
    font: 400 16px/1.3 var(--arial);
    color: #474747;
    margin: 0px 0px 10px 0px;
     display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical; /* ✅ Fixed line */
    overflow: hidden; text-overflow: ellipsis;
  }

  .al-blog .item-inner:hover{
    transform: translateY(-10px);
    transition: all .2s linear;
  }


  
/**************
================================
ABOUT US ----------------------------------------------------------------------------------------------------------------------------------------
=================================
*****************/

.al-about{
  padding: 4rem 5%;
  background-color: #f2f2f2;
}

.al-about .inner-con{
  max-width: 1400px;
  margin: 0 auto;
}


.al-about .inner-con .content .title1{
  font: 400 16px/1 var(--arial);
  color: var(--cl1);
  margin-bottom: 10px;
}

.al-about  .content h3{
  font: 500 28px/1 var(--pop);
  color: #2d2d2d;
  text-transform: capitalize;
  margin-bottom: 1.3rem;
}


.al-about  .content p{
  font: 400 14px/1.8 var(--pop)!important;
  color: #777777!important;
}


.al-about .inner-con .image .img {
 width: 500px;
 border-radius: 20px;
 overflow: hidden;
}


.al-about .inner-con .image .img img{
 width: 100%;
}


/****************
=========================
PRODUCTS ----------------------------------------------------------------------------------------------------------------------------------------
========================
******************/

.al-products{
  padding: 5rem 5% 4rem 5%;
}


.al-products .hd-title{
  max-width: 750px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.al-products .hd-title span{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 1rem;
}


.al-products .hd-title span .line{
  width: 62px;
  height: 1px; background-color: var(--cl2);
}

.al-products .hd-title span p{
  font: 400 18px/1.2 var(--pop);
  color: var(--cl2);letter-spacing: 4px;
  margin: 0px!important; padding: 0px!important;
  text-transform: uppercase;
}

.al-products .hd-title h3{
  font: 300 38px/1.2 var(--pop);
  color: #000;margin-bottom: 1.5rem;
}

.al-products .hd-title .desc p{
  font: 400 16px/1.2 var(--arial);
  margin-bottom: 2.5rem;
}

.al-products .inner-con{
  overflow: hidden;
}

.al-products .inner-con img{
 width: 100%;object-fit: cover;
}

/* .al-products .item:hover .inner-con{
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  transform: translateY(-8px);transition: all .2s linear;
} */

.al-products .content h3{
  font: 500 16px/1.4 var(--arial);
  color: #2d2d2d;
  text-transform: uppercase;
  margin: 1.2rem 0px .8rem 0px;
}


.owl-carousel-products .item {
  transition: all 0.3s ease;
  margin-top: 10px;
}

.owl-carousel-products .item:hover {
  transform: translateY(-8px);
  box-shadow: rgba(99, 99, 99, 0.25) 0px 4px 12px 0px;
  z-index: 10;
}

.pro-page{
  padding: 1rem 5% 4rem 5%!important;
}
.pro-page .pro-con{
  max-width: 1170px;
  margin: 0 auto;
}

.pro-page .pro-con .item{
 padding: 15px;
}

.pro-page .pro-con .item a{
 display: block;
 width: 100%; height: 100%;
 border: 1px solid #e4e4e4;
 border-radius: 8px;
 overflow: hidden;
}

.pro-page .pro-con .item a:hover{
 border: none;
 box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px;
 transform: translateY(-8px);
 transition: all .2s linear;
}

.pro-page .pro-con .item .content{
  padding: 8px 10px 3px 10px;
}

.pro-page .pro-con .item h3{
 font: 500 15px/1.4 var(--pop);
}

/* .pro-page .pro-con .item .inner-con{
 background-color: #f7f7f7;
} */


/****************
=========================
Services ----------------------------------------------------------------------------------------------------------------------------------------
========================
******************/

.al-services {
  position: relative;
}
.al-services::before {
  position: absolute;
  left: 0px; top: 0px;
  content: '';
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.356);
  z-index: 1;
}
.al-services img{
  width: 100%;
  max-height: 600px;
  object-fit: cover;
}

.al-services .inner-con{
  position: absolute;
  left: 0px; bottom: 0px;
  z-index: 3;
  padding: 30px 5%;
  width: 100%;
}

.al-services .inner-con .title{
  display: flex; align-items: center;
  justify-content: flex-start;
  gap: 12px;
}

.al-services .inner-con .title .line{
 width: 62px; height: 1px;
 background-color: #fff;
}

.al-services .inner-con .title p{
color: #fff; font: 600 20px/1.2 var(--arial);
margin: 0px; text-transform: uppercase;
letter-spacing: 3px;
}

.al-services .lft h3{
  font: 300 34px/1.5 var(--pop);
  color: #fff;
}

.al-services .rht p{
  font: 400 15px/1.5 var(--pop);
  color: #fff;
}

/****************
=========================
Brands ----------------------------------------------------------------------------------------------------------------------------------------
========================
******************/

.al-brands {
  padding: 3rem 5%;
}

/* Title section */
.al-brands .hd-title {
  padding-bottom: 8px;
}

.al-brands .hd-title h3 {
  font: 500 28px/1.2 var(--pop);
  color: #2d2d2d;
  margin-bottom: 1.3rem;
}

.al-brands .content {
  margin-top: 1.6rem;
}

/* Image block styling */
.al-brands .img-sec {
  border: 1px solid #e2e2e2;
  padding: 15px;
  border-radius: 8px;
  min-height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.al-brands .item{
  cursor: pointer;
}

.al-brands .item:hover{
  transform: translateY(10px);
  transition: all .2s linear;
}

.al-brands .item h3 {
  font: 500 18px/1.2 var(--pop);
  color: #333;
  margin-top: 10px;
}

/* ✅ Restrict carousel width to 1170px and center it */
.al-brands .owl-carousel-brands {
  position: relative;
  max-width: 1170px;
  margin: 0 auto;
}

/* ✅ Stage container (carousel slides area) */
.al-brands .owl-stage-outer {
  overflow: hidden;
}

/* ✅ Navigation outside the .owl-stage-outer */
.al-brands .owl-carousel-brands .owl-nav {
  position: absolute;
  top: 50%;
  left: -90px;   /* Push left arrow outside */
  right: -90px;  /* Push right arrow outside */
  display: flex;
  justify-content: space-between;
  align-items: center;
  transform: translateY(-50%);
  pointer-events: none;
}

/* ✅ Arrow buttons */
.al-brands .owl-carousel-brands .owl-nav button {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  background-color: #fff;
  box-shadow: rgba(0, 0, 0, 0.1) 0px 10px 50px;
  pointer-events: auto;
  transition: all 0.2s linear;
  display: flex;
  align-items: center;
  justify-content: center;
}

.al-brands .owl-carousel-brands .owl-nav button:hover {
  background-color: #000;
}

.al-brands .owl-carousel-brands .owl-nav button i {
  font-size: 14px !important;
  color: #333;
  transition: all 0.2s linear;
}

.al-brands .owl-carousel-brands .owl-nav button:hover i {
  color: #fff;
}



/*********************
===============================
Footer -------------------
===============================
*********************** */

.al-footer{
  padding: 70px 6% 30px 6%;
  background-color: var(--cl1);
}

.al-footer img{
  margin-bottom: 7px;
}

.al-footer .proitem h3{
   font: 500 20px/1.2 var(--pop);
   color: #fff;
   margin-bottom: 1.3rem;
}

.al-footer .ft-content h3{
   font: 500 20px/1.2 var(--pop);
   color: #fff;
   margin-bottom: 1.3rem;
}

.al-footer .proitem a{
   font: 300 15px/1.3 var(--pop);
   color: #313131;
   margin-bottom: 15px;
   display: block;
}

.al-footer .proitem a:hover{
   color: #c19434!important;
   transition: all .2s linear;
}

.al-footer .sub-menu{
  display: none!important;
}


.al-footer .item a, .al-footer .item p{
  font: 300 15px/1.6 var(--arial);
  color: #fff; margin-bottom: 0px!important;
  padding: 0px!important;
}

.al-footer .al-footer img{
  width: 100%;
}

.al-footer .desc{
  max-width: 500px;
}

.al-footer .ft_navsec{
  max-width: 250px;
  margin: 0 auto;
}

.al-footer .ft_navsec a{
 color: #fff!important;
}

.al-footer .desc p{
  font-size: 15px!important;
  line-height: 1.6;
  color: #fff;
}

.al-footer .item i{
  color: #fff; 
  line-height: 1.6;
}


.al-footer .item a:hover{
 color: #c19434!important; transition: all .2s linear;
}

.al-footer .social{
  display: flex;align-items: center;
  gap: 15px!important;margin-top: 1rem;
}

.al-footer .social a{
  font-size: 16px;
}

.al-footer .social a:hover{
  color: #2A3770!important; transition: all .2s linear;
}


.ft-title{
  font: 500 16px/1 var(--pop);
  color: #222;
}

.ft-icon{
  width: 35px; height: 35px;
  border-radius: 50%;
  display: flex;align-items: center;
  justify-content: center;
  background-color: #c19434;
}

.ft-icon:hover{
  background-color: #000;
  transition: all .2s linear;
}

.ft-icon a{
 color: #fff!important;
 display: flex;align-items: center;
  justify-content: center;
 width: 100%;
}

.ft-icon a:hover{
 color: #fff!important;
}

.copy-rights{
  padding: 10px 5% 8px 5%!important;
  background-color: var(--cl1);
  border-top: 1px solid #ffffff5b;
}

.copy-rights p{
 font: 400 15px/1.4 var(--arial)!important;
 color: #fff;
 padding: 0px!important;
}

.al-footer .social i{
  color: #fff!important;
}

.copy-rights a{
 font: 400 15px/1 var(--arial)!important;
 color: #fff;
}

.copy-rights a:hover{
 color: #c19434;
 transition: all .2s linear;
}


/* whatsapp */
/***Whatsapp icon***/
.floating{
  position:fixed;
  width:50px;
  height:50px;
  bottom:50px;
  left:30px;
  background-color:#c19434;
  color:#FFF;
  border-radius:50px;
  text-align:center;
  font-size:30px;
  box-shadow: 2px 2px 3px #31333e;
  z-index:10000;
  transition: all .2s ease-in;
}

.floating:hover{
  background-color:#25D366;
}

.float-button{
  margin-top:10px;
  color:#FFFFFF;	
}



.al-footer .sub-menu{
  display: none!important;
}


/*********************************
  ===================================================
      Product Page-------------------
    =======================================================================
****************************************************/
.pro-body{
  padding: 3rem 5%;
  background-color: #f0f2f6;
}

.pro-body .lft{
  background-color: #fff;
  padding: 40px 30px;
  box-shadow: rgba(17, 17, 26, 0.05) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px;
}

.pro-body .lft .item{
  padding: 14px 10px;
  background-color: #333;
  margin-bottom: 20px;
}

.pro-body .lft .item:hover{
 background-color: var(--cl1);
 transition: all .2s linear;
}

.pro-body .lft .item:last-child{
 margin-bottom: 0px;
}

.pro-body .lft .item a{
  display: block;
  font: 400 14px/1.4 var(--pop);
  text-transform: uppercase;
  color: #fff;
}

.pro-body .lft .con-area{
  margin-top: 1.8rem;
}

.pro-body .lft .con-area h3{
  font: 500 20px/1.2 var(--pop)!important;
  color: #000; margin-bottom: 15px;
}

.pro-body .rht{
  padding: 0px 25px;
}

.pro-body .rht .inner{
  background-color: #fff;
  padding: 40px 20px;
}

.pro-body .con-area .frm .frm-btn{
  background-color: var(--cl1);
  color: #fff; padding: 8px 20px;
  outline: none; border: none;
  font-size: 16px;
}

.pro-body .con-area .frm .frm-btn:hover{
  background-color: #c19434;
  transition: all .2s linear;
}

/*********************************
  ===================================================
      Pages-------------------
    =======================================================================
****************************************************/



.al-banner{
  padding: 8.5rem 5%;
  position: relative;
  background-repeat: no-repeat;
  background-size: 100%;
  object-fit: cover;
}

/* .al-banner::before{
  content: '';
  position: absolute;
  top: 0px; left: 0px;
  width: 100%; height: 100%;
  background-color: rgba(8 ,44, 120,.5);
} */



.al-banner .banner-title h3{
    font: 500 28px/1.2 var(--pop);
    letter-spacing: 1px;
    color: #fff;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    animation-name: ttanm;
    animation-duration: 3s; 
    animation-iteration-count: infinite;
    animation-direction: alternate; 
    animation-timing-function: ease-in-out; 
    margin-bottom: 0px;
}

@keyframes ttanm {
    from {
        transform: translateY(0px);
    }
    to {
        transform: translateY(-6px);
    }
}

/* .al-banner .banner-title h3::after{
    position: absolute;
    content: '';
    left: 50%;
    bottom: -55px;
    width: 1px;
    height: 50px;
    background-color: rgba(255, 255, 255, 0.30);
} */


.al-banner .banner-nav{
  position: absolute;
  bottom: 0px; left: 0px;
  width: 100%;
  display: flex;align-items: center;
  justify-content: center;
}

.al-banner .banner-nav .content{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background-color: rgba(255, 255, 255, 0.15);
  padding: 10px 30px;
}

.al-banner .banner-nav .content a{
 color: #fff; font-size: 16px;
 font-family: var(--rob-rg);
 text-transform: uppercase;
}

.al-banner .banner-nav .content a:hover{
  color: var(--cl1);
  transition: all .2s linear;
 }

.al-banner .banner-nav .content i{
  color: #fff; font-size: 18px;
}

.al-banner .banner-nav .content span{
  color: var(--cl1); font-size: 16px;
  font-family: var(--rob-rg);
  text-transform: uppercase;
}

.mob-banner{
  display: none;
}


.bl-banner{
  padding: 6.5rem 5%;
}



.dft-page{
 margin: 2rem 0px;
}

.dft-page .main-page-content{
  margin-bottom: 2rem;
}

.about-page{
  padding: 0px 5%;
}



.get-touch{
 padding: 50px 5%;
 background: #f7f7f7;
}

.get-touch h3{
 font: 500 23px/1 var(--pop);
 color: #333;
}

.get-touch p{
 font: 400 16px/1.5 var(--arial);
 color: #555555;
 margin: 15px 0px 0px 0px!important;
}


.get-touch .sl-btn a {
    padding: 12px 2rem!important;

}


================================
Cookie  ----------------------------------------------------------------------------------------------------------------------------------------
=================================
*****************/
  
.cc-window.cc-floating {
 max-width: 100%!important;
}

.cc-color-override--1128794508.cc-window {
  width: 100%;
  padding: 15px 8% !important;
}

.cc-color-override--1128794508 .cc-btn:hover {
   background-color: var(--cl1)!important;
   color: #fff!important;
   transition: all .2s linear;
}
.cc-revoke, .cc-window {
  flex-direction: row!important;
  flex-wrap: wrap;
  justify-content:space-between;
  align-items: center; bottom: 0px!important;
}

.cc-floating.cc-theme-classic {
    border-radius: 0px!important;
}

.privacy-pol h3{
   font: 500 25px/1.2 var(--arial)!important; 
   color: #000!important; margin-bottom: 15px;  
}


/***********************
===============================
Contact us-----------------------
===============================
********************* */

.al-contact{
  position: relative;
  margin-bottom: 3rem;
  padding: 20px 5% 4rem 5%;
  background-color: #f2f3f2;
}

/* .al-contact .grey-baground{
  background-color: #f2f3f2;
  height: 30rem;
  position: absolute;
  top: 0px; left: 0px;
  width: 100%;
} */

.frm-cont{
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px; margin-bottom: 2rem;
}

.frm-header {
    margin: 0rem 0px 3rem 0px;
}

.frm-cont .item{
  background-color: #fff;
  padding: 25px 25px;
}

.frm-cont .item i{
  color: var(--cl1);
  line-height: 1.2;
  font-size: 18px;
}

.frm-cont .item a{
  font: 400 16px/1.2 var(--pop);
  color: #000;
}

.frm-header{
  margin: 1.5rem 0px 3rem 0px;
}

.frm-header h3{
 font: 500 32px/1.2 var(--pop);
 margin-bottom: 10px;
}

.frm-header p{
 font: 400 16px/1.3 var(--pop);
}

.al-contact .request-form{
  padding-top: 2rem;
}


.al-contact .request-form .con-container{
  background-color: #103a7a;
  display: flex; align-items: flex-start;
  justify-content: flex-start;
  flex-direction: column;
  padding: 40px 30px;
}

.al-contact .request-form .con-container h1{
  color: #fff; 
  font: 500 22px/1.1 var(--pop);
  margin-bottom: 2rem;
}

.al-contact .request-form .con-container .con-item {
  margin-bottom: 10px;
  display: flex;align-items: center;
  justify-content: center;
  gap: 10px;
}

.al-contact .request-form .con-container .cont-addr {
  margin-bottom: 10px;
  display: flex;align-items: flex-start;
  justify-content: center;
  gap: 10px;
}

.al-contact .request-form .con-container .cont-addr p , .cont-addr i{
 font-size: 16px; color: #fff;
}

.al-contact .request-form .con-container .cont-addr i{
  transform: translateY(9px);
 }

.al-contact .request-form .con-container .con-item i,.con-item a{
  font-size: 16px; color: #fff;
}

.al-contact .request-form .con-container .con-item a{
 font-family: var(--rob-rg);
}

.al-contact .consultation-form{
  padding-left: 30px;
}

.al-contact .consultation-form .al-req-form {
  background-color: #ffff;
  padding: 40px 30px;
  max-width: 900px;
  margin: 0 auto;
}

.al-contact .consultation-form .al-req-form label{
  color: #333;
  font: 500 16px/1 var(--pop)!important;
  margin-bottom: 8px;
}

.al-contact .span2{
  margin-bottom: 8px;
  font: 400 16px/1.3 var(--arial);
  display: inline-block;
}

.al-contact textarea{
 width: 100%!important;
}

.al-contact .consultation-form .form-control{
  min-height: 45px!important;
}

.al-contact .consultation-form .al-req-form h1{
 color: var(--cl1);
 font: 500 24px/1.1 var(--arial);
 margin-bottom: 1.5rem;
}

.al-contact .consultation-form .al-req-form .frm-btn{
  background-color: var(--cl1);
  color: #fff; font-family: var(--rob-rg);
  padding: 5px 25px;
  border: none; outline: none;
 }

 .al-contact .consultation-form .al-req-form .frm-btn:hover{
  background-color: var(--cl2); transition: all .2s linear;
 }

 .al-contact .maplink iframe{
  margin-top: 3rem;
 }

 .al-contact .maplink iframe{
  height: 400px;
  width: 100%;
 }

.al-contact .map-container{
  margin:2.5rem 0px 1rem 0px;
}

.al-contact iframe{
  width: 100%; height: 300px;
}

.al-contact .follow h2{
  font: 500 18px /1 var(--pop);
  color: #fff;
}

.al-contact .follow .social{
 display: flex; align-items: center;
 justify-content: flex-start;
 gap: 10px;
 margin-top: 15px;
}

.al-contact .follow .social span{
  width: 34px; height: 34px;
  background-color: #fff;
  display: flex; align-items: center;
  justify-content: center;
  transition: all .2s linear;
 }

 .al-contact .follow .social span i{
  font-size: 16px; color: var(--cl2);
 }

 .al-contact .follow .social a:hover span {
  background-color: var(--cl1);
 }

 .al-contact .follow .social a:hover span i{
  color: #fff;
 }


 .con-address-con{
  margin-bottom: 3.5rem;
 }

 .con-address-con .item{
  padding: 15px;
 }

 .con-address-con .item .inner{
  padding: 50px 40px;
  background-color: #fff;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  cursor: pointer;
 }

 .con-address-con .item .inner:hover{
  box-shadow: none;
  transform: translateY(10px);
  transition: all .2s linear;
 }

 .con-address-con .item .inner h2{
  font: 500 20px/1.4 var(--pop);
  text-transform: uppercase;
  color: #333;
 }

 .con-address-con .item .inner h3{
  font: 500 16px/1.4 var(--pop);
  text-transform: uppercase;
  color: #333; margin-bottom: 1.2rem;
 }

 .con-address-con .item .inner .con{
  display: flex; 
  justify-content: flex-start;
  gap: 20px; margin-top: 1remss;
  margin-bottom: .5rem;
 }

 .con-address-con .item .inner .con i{
   color: var(--cl1);
   font-size: 18px;
   line-height: 1.7;
 }

 .con-address-con .item .inner .con p{
    font: 400 16px/1 var(--pop);
 }

 .con-address-con .items2 p{
  line-height: 1.5!important;
  margin-bottom: 6px!important;
 }

 .con-address-con .item .inner .con a{
    font: 400 16px/1 var(--pop)!important;
    color: #333;
 }

 .con-address-con .item .inner .con a:hover{
   color: var(--cl2);transition: all .2s linear;
 }

 .frm-cont .item a:hover {
   color: var(--cl2);
   transition: all .2s linear;
}

.frm-cont .item:hover {
  transform: translateY(6px);
  transition: all .2s linear;
}