/*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        :#233b75;
   --cl2        :#770c12;
   --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;
 
}



.auto-container{
  max-width: 1300px;
  margin: auto;
  position: relative;
}




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



.delighter.top { transform:translateY(-18%); opacity:0; transition: all 1.2s ease-out; }
.delighter.top.started { transform:none; 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: 10px 5%;
  z-index: 1;
}


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

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

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

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


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





.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: 10px 2%;
  position: relative;
  top: 0px; left: 0px; 
  background-color: #fff;
  width: 100%;
}

.rs-header .hd-logo{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 20px;
}

 .rs-header .hd-logo img{
  width: 250px;
 }

.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 .auto-container{
  overflow: visible!important;
  
}




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

.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: 400 18px/1.1 var(--arial);
  text-transform: capitalize;
  letter-spacing: 1px;padding-bottom: 15px;
  position: relative;
}

.rs-header .menu-area .row-table li a::before{
  content: ''; position: absolute;
  bottom: 0px; left: 0px;
  width: 0%; height: 2px;
  background-color: var(--cl1);
}

.rs-header .menu-area .row-table li a:hover::before{
  width: 100%; height: 2px;
  transition: all .4s linear;
  border-radius: 4px;
}

.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);
}



.full-width-header .rs-header .menu-area .main-menu .rs-menu ul.nav-menu li.current-menu-item > a {
  color: var(--cl1)!important;
  position: relative;
}

.full-width-header .rs-header .menu-area .main-menu .rs-menu ul.nav-menu li.current-menu-item > a::before {
  content: ''; position: absolute;
  left: 0px; bottom: 0px;
  width: 100%; height: 2px;
  background-color: var(--cl1);
}

.rs-header .menu-area .row-table li {
  margin-left: 24px;
}

.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: 40px;
}

.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;
}

.menu-item a{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  position: relative;
  z-index: 2;
  letter-spacing: 1px;
}



.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;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 2px 0px;
  visibility:visible; 
  min-width: 200px; 
  min-height: 120px;
}

.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: 10px 20px;
  background-color: #fff;
  display: block!important;
  
}

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

.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: var(--cl2)!important;
  font: 500 13px/1.3 var(--pop)!important;
  padding: 0px!important;
} 

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

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

 .menu-item i{
  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: var(--cl1);
}



.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: 5%!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-caption .sl-title1{
  color: #fff;
  font: 600 52px / 1.2 var(--arial);
  animation-name: maintitle2;
  animation-duration: 4s;
  transition: all .2s ease;
  margin-bottom: 10px;
}

.main-slider .desc{
  max-width: 50%;
}

.main-slider .desc p{
  font: 400 17px/1.5 var(--arial);
  color: #fff;
}

.main-slider .btn a{
  padding: 10px 20px;
  background-color: var(--cl1);
  color: #fff;
  font: 400 16px/1 var(--arial);
  border-radius: 5px;
}

.main-slider .btn a:hover{
  background-color: var(--cl2);
  transition: all .2s linear;
  color: #fff;
}

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

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







.main-slider .carousel-caption .sl-title2{
  font: 400 26px / 30px var(--jost);
  animation-name: maintitle;
  animation-duration: 4s;
  transition: all .2s ease;
}

@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;
}




  /**************
  ================================
  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 15px 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;
  }

  .blog-page .blo-btn{
    margin: 1.5rem 0rem 1rem 0px;
  }


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

  .blog-page .blo-btn span{
    background-color: #000;
    color: #fff;
    padding: 8px 20px;
    font: 500 15px/1 var(--arial);
  }


  .blog-page .blo-btn span:hover{
    background-color: var(--cl1);
  }

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

  .rs-inner-blog li a{
    color: #000;
  }

  .rs-inner-blog li{
    margin: 8px 0px;
  }

  .rs-inner-blog li a:hover{
    color: var(--cl1);
    transition: all .2s linear;
  }

  .rs-inner-blog .widget-title{
    margin-bottom: 1rem;
  }

  .nav-bllink h3{
    font-size: 20px;
  }


/**************
================================
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;
}
.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;  
}



/**************
================================
ABOUT US ----------------------------------------------------------------------------------------------------------------------------------------
=================================
*****************/
.al-about{
 padding: 3rem 5% 1rem 5%!important;
}
.al-about .hd-title h3{
  font: 500 24px/1.2 var(--arial);
  color: var(--cl1);
  margin-bottom: 5px!important;
}


.al-about .hd-title p{
  font: 400 14px/22px var(--arial);
  color: var(--cl1);
  margin: 0px!important;
}

.al-about .desc{
  margin: 20px 0px 30px 0px;
  /* font: 400 15px/22px var(--arial);
  color: #000;
  margin: 0px!important; */
}

.al-about .desc p{
  color: #000;
  font:400 16px/22px var(--arial);
  letter-spacing: .2px;
  /* display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  letter-spacing: .5px; */
}


.al-about .ab-btn{
  display: flex; align-items: center;
  justify-content: center;
  margin: 1.5rem 0px;
}




.al-about .ab-btn .ab-button{
  width: 130px; height: 40px;
 background-color: var(--cl1);
 border-radius: 5px;
 display: inline-block;
 position: relative;
 overflow: hidden;
 
}

.al-about .ab-btn .ab-button::before{
  position: absolute;
  content: ''; width: 100%;
  height: 100%; background-color: #000;
  top: 0px; left: -100%;
  z-index: 0;
  transition: all .2s linear;
}

.al-about .ab-btn .ab-button::after{
  position: absolute;
  content: ''; width: 100%;
  height: 100%; background-color: #000;
  top: 0px; right: -100%;
  z-index: 0;
  transition: all .2s linear;
}

.al-about .ab-btn .ab-button a{
  font: 400 16px /1 var(--arial);
  color: #fff;
 display: flex;
 align-items: center;
 justify-content: center;
 width: 100%; height: 100%;
 position: relative;
 z-index: 1;
 transition: all .2s ease;
 margin: 0px!important;padding: 0px!important;
}

.al-about .ab-btn .ab-button a span{
  transform: translateY(1px);
}


.al-about .ab-btn .ab-button:hover a{
  color: #fff;
}

.al-about .ab-btn .ab-button:hover span{
  color: #fff;
}

.al-about .ab-btn .ab-button:hover::before{
  left: -50%;
}

.al-about .ab-btn .ab-button:hover::after{
  right: -50%;
}



/**************
================================
Company ----------------------------------------------------------------------------------------------------------------------------------------
=================================
*****************/

.pro-cat{
  padding: 0px 8% 30px 8%;
}

.pro-cat .item{
  padding: 20px;
}

.pro-cat .item .inner{
  background-color: #dbdcde;
  padding: 30px 40px;
  text-align: center;
}

.pro-cat .item .inner .cbtn a{
   display: block!important;
   width: 100%;
   background-color: #fff;
   color: var(--cl1);
   padding: 10px 20px;
   font: 500 16px/1 var(--arial) ;
}

.pro-cat .item .inner .cbtn a:hover{
   background-color: var(--cl1);
   color: #fff;
   transition: all .2s ease-in;
}


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

.alpro{
  background-color: #f9f8f8;
  padding: 40px 5%;
}



.pro-con .pro-item{
  overflow: hidden;
}

.alpro h3{
  font: 600 24px/1.3 var(--arial)!important;
  color: var(--cl1)!important;
}

.alpro .owl-carousel .owl-stage-outer {
  overflow: visible!important;
}

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

.pro-con .pro-inn{
  display: block!important;
  overflow: hidden;
  padding: 15px;
}

.pro-con .pro-inn .img{
   background-color: #fff;
}

.pro-con .pro-item .pro-dts h4{
  font: 500 16px/1.3 var(--pop);
  margin: 15px 0px;
  color: #000;
}

.alpro .hd-title p{
  font: 400 16px/1.4 var(--arial)!important;
  margin-bottom: 4rem!important;
}

.pro-con .pro-btn {
 display: flex;align-items: center;
 justify-content: center;
 gap: 10px;
}

.pro-con .pro-btn img {
 width: 32px!important;
}

.pro-con .pro-btn a{
  padding: 8px 50px;
  color: #fff;
  font: 400 16px/1 var(--pop);
  background: #2A3770;
  background: linear-gradient(90deg,rgba(42, 55, 112, 1) 0%, rgba(99, 180, 98, 1) 100%);
}

.pro-con .pro-btn a:hover{
  background: #2A3770;
  background: linear-gradient(90deg,rgba(99, 180, 98, 1) 0%, rgba(42, 55, 112, 1) 100%);
  transition: all .2s linear;
}


/**************
================================
 Testimonial ----------------------------------------------------------------------------------------------------------------------------------------
=================================
*****************/

.testimonial{
  padding: 50px 5% 3rem 5%;
}

.testimonial .item{
  padding: 3rem 50px;
}

.testimonial .item .inner{
  position: relative;
}

.testimonial .item .img{
  position: absolute;
}

.testimonial .item img{
  width: 38px;
}

.testimonial .item  .img1{
  top: 0px; left: 40px;
}

.testimonial .item  .img2{
  bottom: 0px; right: 40px;
}

.testimonial .item  .img3{
  top: 0px; right: 40px;
}

.testimonial .item  .img4{
  bottom: 0px; left: 40px;
}


.testimonial .item  .content{
  margin-top: 2rem;
}

.testimonial .item  .content h3{
  text-align: end;font: 500 18px/1.2 var(--arial);
  color: #000;
  margin-top: 2rem;
}


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

.al-brands{
  padding: 2rem 8%;
}

.al-brands .hd-title h3{
  font: 600 24px / 1.3 var(--arial) !important;
  color: var(--cl1);
  margin-bottom: 1.2rem!important;
}

.al-brands .pro-item h4{
  font: 600 18px / 1.3 var(--arial) !important;
  color: #000;
  margin-top: 10px;
}



/*********************
===============================
 PROJECTS   ----------------------------------------------------------------------------------------------------------------------------------------
===============================
*********************** */



.al-product{
  background-color: #f9eee8;
  position: relative;
}



.al-product .owl-carousel{
  z-index: 0!important;
}

.al-product .hd-title h1{
  font: 400 30px / 1.2 var(--jost);
  color: #000;
  margin-bottom: 5px;
  
}

.al-product .hd-title{
  margin-bottom: 2.5rem;
}

.al-product .hd-title p{
  font: 500 18px / 1.2 var(--goth);
  font-style: italic;
  color: #000;
  
}


.al-product .pro-item img{
  width: 100%;
}

.al-product .pro-item .img{
  position: relative;
}

.al-product .pro-item .img::before{
  content: '';
  position: absolute;
  top: 0px; left: 0px;
  width: 100%; height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  opacity: 0;
}

.al-product .cat-pro .img::before{
 display: none;
}

.al-product .cat-pro .content{
  background-color: #faf8ff;
  padding: 20px;
 }

 .al-product .cat-pro .content h2 {
  font: 500 17px / 1.1 var(--pop)!important;
  color: #222!important;
  margin: 0px!important;
}

.al-product .pro-item:hover .img::before{
  opacity: 1;
  transition: all .2s linear;
}

.al-product .pr-more{
  position: absolute;
  display: inline-block;
  border: 1px solid #fff;
  top: 50%; left: 50%;
  transform: translate(-50%,-50%);
  padding: 7px 25px;
  opacity: 0;
}

.al-product .pr-more span{
  color: #fff;
  font: 400 16px / 1.1 var(--pop);
}

.al-product .pro-item:hover .pr-more{
  opacity: 1;
  transition: all .3s linear;
}

.al-product .pro-item .img{
 border-radius: 10px; overflow: hidden;
 max-height: 350px;
}

.al-product .pro-item .content {
  display: flex; align-items: center;
  justify-content: center;
  flex-direction: column;
}

.al-product .pro-item .content h4{
  font: 400 18px/1 var(--pop);
  color: #000;
}

.al-product .pro-item .content h2{
  font: 500 18px/1.1 var(--pop);
  color: #000;
  margin-top: 1rem;
  margin-bottom: 5px;
}

.al-product .pro-item .content h3{
  font: 400 17px/1.1 var(--pop);
  color: #000;
  margin-top: 1rem;
  margin: 0px;
  padding: 0px;
  margin-bottom: 6px;
}



.al-product .pro-item{
  margin-bottom: 1.5rem;
}


.al-product .pro-item:hover{
  transform: translateY(8px);
  transition: all .2s linear;
}


.pg-projects .pro-item .iiner-content{
  box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
}

.pg-projects .pro-item:hover .iiner-content{
  box-shadow: none;
}

.pg-projects  .pro-item .content {
 padding: 10px;
}

.pg-projects .pro-item img{
  width: 100%;
}

.cat-container{
  max-width: 800px;
  margin: 0 auto;
}

.cat-con{
  padding: 10px 8%;
}

.cat-pro a{
  display: block!important;
  padding: 20px;
  margin-bottom: 0px!important;
}

.cat-pro h1{
  font: 500 17px/1.2 var(--arial);
  color: #000;margin-top: 10px;
}


.btn-effect::before{
    content: '';
    position: absolute;
    top: 0px; left: 0px;
    width: 100%; height: 1px;
    background-color: #538035;
   }
   
   .btn-effect:hover::before{
    width: 0%;
    transition: all .3s linear;
   }
   
   .btn-effect::after{
    content: '';
    position: absolute;
    bottom: 0px; right: 0px;
    width: 100%; height: 1px;
    background-color: #538035;
   }
   
   .btn-effect:hover::after{
    width: 0%;
    transition: all .3s linear;
   }
   
   .btn-effect .img-inner::before {
     content: '';
     position: absolute;
     top: 0px; left: 0px;
     width: 1px; height: 100%;
     background-color: #538035;
   }
   
   .btn-effect:hover .img-inner::before {
     height: 0%;
     transition: all .4s linear;
   }
   
   
   .btn-effect .img-inner::after{
     content: '';
     position: absolute;
     bottom: 0px; right: 0px;
     width: 1px; height: 100%;
     background-color: #538035;
   }
   
   .btn-effect:hover .img-inner::after{
     height: 0%;
     transition: all .4s linear;
   }



   .pr-btn{
  display: inline-block;
  position: relative;
}

.pr-btn .al-btn{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
}

.pr-btn .al-btn span{
 color: #000;
 font: 500 16px/1 var(--arm);
}

.pr-btn .al-btn i{
  color: #000;
  font-size: 16px;
 }

 .cat-pro .btn-effect:hover .pr-btn .al-btn i{
  animation-name: arr-right;
  animation-duration: 1.5s;
  animation-iteration-count: infinite;
  transition: all .2s linear;
  color: var(--cl1);
 }

 .cat-pro .btn-effect:hover span{
   color: var(--cl1);
   transition: all .2s linear;
 }

 @keyframes arr-right{
  0%   {transform: translateX(-5px); opacity: 0;}
  25%  {transform: translateX(10px); opacity: 1;}
  50%  {transform: translateX(5px); opacity: 0;}
  100% {transform: translateX(-5px); opacity: 1;}

 }

/*********************
===============================
Choice  ----------------------------------------------------------------------------------------------------------------------------------------
===============================
*********************** */

.al-choice{
  background-color: var(--cl2);
}

.al-choice .hd-title h1{
  font: 400 28px /1.2 var(--jost);
  color: #000;
  text-transform: uppercase;
  margin-bottom: 2rem;
}

.al-choice .main-container .items{
  padding: 20px 40px!important;
}

.al-choice .main-container .items .items-inner{
  display: flex; align-items: center;
  justify-content: center; flex-direction: column;
  gap: 20px;
}

.al-choice .main-container .items:hover .img{
 transform: translateY(-10px);
 transition: all .2s linear;
}

.al-choice .main-container .items .items-inner .img{
   width: 100px; height: 100px;
   border-radius: 50%;
   display: flex; align-items: center;
   justify-content: center;
   background-color: #fff;
   padding: 25px;
}

.al-choice .main-container .items .items-inner .img img{
  width: 100%; height: 100%;
 
}

.al-choice .main-container .items .items-inner .inner-content h1{
  color: #000;
  font: 400 20px /1.1 var(--jost);
  text-transform: uppercase;
  margin-bottom: 10px;
}

.al-choice .main-container .items .items-inner .inner-content p{
  color: #000;
  font: 400 16px /1.1 var(--jost);
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}


/*********************
===============================
FRAG ----------------------------------------------------------------------------------------------------------------------------------------
===============================
*********************** */

.al-frag{
  padding: 50px 2%;
}

.al-frag .hd-title h1{
  font: 400 28px /1.2 var(--jost);
  color: #000;
  margin-bottom: 10px;
}

.al-frag .owl-carousel{
 z-index: 0!important;
}

.al-frag .hd-desc{
  max-width: 600px;
  margin: 0 auto;
}

.al-frag .hd-desc p{
 color: #000; font: 400 18px /1.2 var(--jost);
}

.al-frag .hd-title{
 margin-bottom: 3rem;
}

.al-frag .iiner-content{
  position: relative;
  cursor: pointer;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}


.al-frag .iiner-content .img{
 width: 150px; height: 150px;
 border-radius: 50%;
 overflow: hidden;
}

.al-frag .iiner-content img{
  max-width: 100%;
  overflow: hidden;
  /* filter: grayscale(100%); */
}

.al-frag .iiner-content img{
  width: 100%;
}

.al-frag .iiner-content:hover .img img{
  transform: scale(110%);
  transition: all .2s linear;
}


.al-frag .iiner-content .content h2{
  color: #000;
  font: 400 20px/ 1.2 var(--jost);
  position: relative;
  z-index: 3;
  margin-top: 10px;
}






/*********************
===============================
page  -------------------
===============================
*********************** */


.pg-padd{
  padding: 30px 5%;
}

.proitem-page{
  padding: 40px 2%;
}

.proitem-page  .propage-link{
  display: flex; align-items: center;
  justify-content: flex-start;
  gap: 10px;
}

.proitem-page  .propage-link a{
  text-transform: uppercase;
  color: #000;
  font: 500 15px / 1 var(--arial);
}

.proitem-page  .propage-link a:hover{
  color: var(--cl1);
  transition: all .2s linear;
}

.proitem-page  .propage-link span{
  color: #000;
  font-size: 16px;
}

.proitem-page .content-part{
  margin: 1rem 0px;
}

.proitem-page .content-part .item-left img{
  width: 100%;
}

.proitem-page .content-part .item-left .img{
  border: 1px solid #ccc;
  border-radius: 8px;
  overflow: hidden;
}

.about-page .page_nav{
  display: flex; align-items: center;
  justify-content: flex-start; gap: 8px;
  margin-bottom: 15px; flex-wrap: wrap;
}

.about-page .page_nav a,.about-page .page_nav span{
  font: 400 16px/1.2 var(--arial);
  color: #000;
}

.about-page .page_nav a:hover{
  color: #61b561; transition: all .2s linear;
}

.about-page .content-pro h3{
  font: 600 36px/1.2 var(--pop);
  color: var(--cl1);
}

.con-form img{
  width: 100%;
  object-fit: cover;
  margin-bottom: 20px;
}


.proitem-page .content-part .item-right h1{
   font: 400 22px /1.2 var(--jost);
   color: #000;
   margin-bottom: 0px;
}

.proitem-page .content-part .item-right h3{
  font: 400 17px /1.2 var(--jost);
  color: #000;
  margin-top: 5px;
}


.proitem-page .item-right{
  padding: 0px 0px 0px 30px;
}

.proitem-page .price{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 2px;
}

.proitem-page .price{
margin: 15px 0px;
}

.proitem-page .price svg{
  width: 30px; height: 30px;
  fill: green;
}


.proitem-page .item-right .price h3{
  font: 500 25px /1 var(--jost);
  color: green;
  margin: 0px;
}

.proitem-page .item-right .desc p{
  font: 400 15px /1.4 var(--op-san);
  color: #000;
  margin: 0px;
}

.proitem-page .item-right .inner-content{
  display: flex; align-items: flex-start;
  justify-content: space-between;
  flex-direction: column;
  min-height: 100%;
}


.proitem-page .item-right .inner-content .order{
  padding: 20px 0px;
  display: flex;
  align-items: center; justify-content: flex-end;
  width: 100%;
}

.proitem-page .item-right .inner-content .order span{
  padding: 12px 40px;
  font: 400 14px /1 var(--arial);
  color: #fff;
  background-color: var(--cl1);
  cursor: pointer;
}

.proitem-page .item-right .inner-content .order span:hover{
 background-color: #000;
 transition: all .2s linear;
}

.proitem-page .item-right .frag{
  margin: 20px 0px 10px 0px;
}

.proitem-page .item-right .frag h1{
  font: 400 22px /1 var(--jost);
  color: #000;
}

.proitem-page .item-right .frag .all-frag{
  margin-top: 15px;
}

.proitem-page .item-right .frag li{
  font: 400 16px /1.2 var(--jost);
  color: #000;
  margin: 6px 0px;
  gap: 10px;
  min-width: 250px;
}

.proitem-page .item-right .frag input[type="radio"] {
  width: 15px;
  height: 15px;
  accent-color: var(--cl3); 
  cursor: pointer;

}

.proitem-page .item-right .frag  .frag-list{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 15px;
}

.frag .frgcd{
  margin: 8px 0px;
  font: 400 17px/ 1 var(--jost);
  color:#000;
  display: flex; align-items: center;
  justify-content: flex-start;
  gap: 20px;
}

.frag .frgcd i{
 font-size: 18px; color: #000;
}


.pro-form{
  min-width: 100%;
  min-height: 100vh;
  position: fixed;
  top: 0px; left: 0px;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 6;
  display: flex; align-items: center;
  justify-content: center;
  padding: 30px;
  transform: scale(0%);
  /* display: none; */
}

.pro-form .al-content{
  background-color: #fff;
  max-width: 900px;
  position: relative;
}


.pro-form .al-content .frm-left {
  padding: 0px!important;
}

.pro-form .al-content .frm-left img{
  width: 100%;
}


.pro-form .al-content .al-frm{
  display: flex;align-items: flex-start;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  padding: 10px 20px 10px 30px;
}

.pro-form .al-content .al-frm .hd-title{
  margin-bottom: 20px;
}

.pro-form .al-content .al-frm .hd-title h3{
  font: 500 32px /1 var(--jost);
  color: var(--cl1);
  margin-bottom: 0px;
}

.pro-form .al-content .al-frm .hd-title h4{
  font: 400 17px /1.2 var(--jost);
  color: #111;
  margin: 5px 0px;
}

.pro-form .al-content .al-frm .fld {
  padding: 0px!important;
  padding-right: 15px!important;
}


.pro-form .al-content .al-frm .frm-btn {
  color: #fff; font: 400 16px /1 var(--arial);
  background-color: var(--cl1);
  border: none; outline: none;
  padding: 10px 40px;
  margin-top: 15px;
}

.pro-form .al-content .al-frm .frm-btn:hover{
  background-color: #000;
  transition: all .2s linear;
}


.pro-form .al-content .al-frm .form-control {
  border: 1px solid #ccc; outline: none;
  font: 400 16px /1 var(--arial);
  color: #444;
  padding: 12px 10px;
}



.pro-form .al-content .frm-close {
 position: absolute; width: 40px;
 height: 40px; border-radius: 50%;
 background-color: #fff;
 display: flex; align-items: center;
 justify-content: center;
 top: -40px; right: -50px;
 cursor: pointer;
}

.pro-form .al-content .frm-close:hover {
  background-color: var(--cl1);
  transition: all .2s linear;
 }

.pro-form .al-content .frm-close svg{
   width: 20px;
  height: 20px; 
 }


 .wpcf7 form .wpcf7-response-output {
  margin: 5px 0px!important;
  padding: 0px!important;
  border: none!important;
  font: 400 16px /1.2 var(--jost)!important;
  color: green;
}

.wpcf7 form.failed .wpcf7-response-output, .wpcf7 form.aborted .wpcf7-response-output {
  color: red!important;
}


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

.al-footer{
  padding: 70px 6% 0px 6%;
  border-top: 1px solid #52af5f;
  background-color: #fafafa;
}

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

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

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

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

.al-footer .proitem a:hover{
   color: var(--cl1);
   transition: all .2s linear;
}

/* whatsapp */
/***Whatsapp icon***/
.floating{
  position:fixed;
  width:50px;
  height:50px;
  bottom:50px;
  left:30px;
  background-color:var(--cl1);
  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;
}


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

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

.al-footer .desc p{
  font-size: 15px!important;
}

.al-footer .item i{
  color: #1f325d; 
}


.al-footer .item a:hover{
 color: #000!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: 40px; height: 40px;
  border-radius: 50%;
  display: flex;align-items: center;
  justify-content: center;
  background-color: var(--cl1);
}

.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: #1f325d;
  margin-top: 2rem;
}

.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: #5bb367;
 transition: all .2s linear;
}


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



.al-banner{
  padding: 8rem 5%;
  position: relative;
  background-repeat: no-repeat;
  background-size: 100%;
}

/* .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: 400 28px/1.2 var(--jost);
    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; 
}

@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%;
  margin: 2rem 0px!important;
}

.about-page .pg-inner-block{
  max-width: 1200px;margin: 0 auto;
}

.about-page .pg-inner-block .ab-con h2{
  font: 500 26px/1 var(--arial);
  color: #000; margin-bottom: 1rem;
}

.about-page .pg-inner-block .img img{
  width: 100%; object-fit: cover;
}

.about-page .pg-inner-block .img a{
  font: 400 14px/1.2 var(--arial);
  color: #fff;
  padding: 8px 30px;
  background-color: var(--cl1);
  margin-bottom: 10px;
}

.about-page .pg-inner-block .img a:hover{
  background-color: #61b561; transition: all .2s linear;
}

.about-page .pg-inner-block .img p{
  font: 400 16px/1.2 var(--pop);
  color: #000;
}

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

.al-contact{
  position: relative;
  margin-bottom: 6rem;
  padding: 20px 5%;
}

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


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

.al-contact .readon{
  background-color: var(--cl1);
  color: #fff;
  padding: 8px 20px;
  outline: none;
}

.al-contact .readon:hover{
  background-color: #000;
  transition: all .2s linear;
}


.al-contact .request-form .con-container{
  background-color: var(--cl1);
  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 26px/1.1 var(--jost);
  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: 20px 30px;
}

.al-contact .consultation-form .al-req-form h1{
 color: var(--cl1);
 font: 500 26px/1.1 var(--jost);
 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: rgb(25, 129, 34); 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 22px /1 var(--tino);
  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: 30px; height: 30px;
  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(--cl1);
 }

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

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

 .con-form .inner{
  padding: 20px 10px;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
 }

 .con-form .inner h3{
  font: 600 20px/1.2 var(--arial);
  color: var(--cl1);
 }

 .con-form .inner p{
  font: 400 16px/1.4 var(--arial);
  color: #222;
 }

 .con-form .inner .title{
  padding: 5px 15px;
 }

 .con-form .btn-viewmore{
  background-color: var(--cl2);
  color: #fff;
  outline: none;
  border: none;
  padding: 8px 20px;
 }