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

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



@font-face {
  font-family: 'Roboto-Regular';
  src: url(../fonts/Roboto-Regular.ttf);			
}


@font-face {
  font-family: 'Roboto-Medium';
  src: url(../fonts/Roboto-Medium.ttf);			
}




/* Railway ----------------- */

@font-face {
  font-family: 'Montserrat-Regular';
  src: url(../fonts/Montserrat-Regular.ttf);			
}

@font-face {
  font-family: 'Montserrat-SemiBold';
  src: url(../fonts/Montserrat-SemiBold.ttf);			
}


@font-face {
  font-family: 'Montserrat-Medium';
  src: url(../fonts/Montserrat-Medium.ttf);			
}





:root{
  --cl1:#54c5d0;
  --cl2:#03666d;
  --cl-light: #f5f4f3;
  --rob-rg:Roboto-Regular;
  --rob-md:Roboto-Medium;
  --mon-rg:Montserrat-Regular;
  --mon-sd:Montserrat-SemiBold;
  --mon-md:Montserrat-Medium;
}


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.5s 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.5s 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.9s ease-out; }
.delighter.left.started { transform:none; opacity:1; } 

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

.delighter.opacity {  opacity:0; transition: all 1.2s 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
=======================
*****************/

.full-width-header .hd-top{
  background-color: var(--cl-light) ;
  padding: 12px 5%;
}

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


.full-width-header .hd-top .hd-left{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 20px;
}

.full-width-header .hd-top .hd-left .hd-content{
  display: flex; align-items: center;
  justify-content: center;
   gap: 10px;
}

.full-width-header .hd-top .hd-left a{
  font-size: 16px; color: var(--cl2);
  font-family: var(--mon-md);
  line-height: 1;
}

.full-width-header .hd-top .hd-left a:hover{
  color: var(--cl1);
}

.full-width-header .hd-top .hd-left i{
  font-size: 18px; color: var(--cl2);
}

.full-width-header .hd-top .hd-left .hd-mail i{
  font-size: 20px;
}




.rs-header{
  padding: 10px 5%;
}


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

.rs-header .menu-area .row-table li a{
  color: var(--color-gray);
  font-family: var(--rob-md);
  font-size: 18px!important;
  text-transform: uppercase;
}

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

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

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

.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(--cl2);
  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 .menu-toogle-container i{
 color: #fff;
 font-size: 22px;
}


/****************
===========================
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);
 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;
  background-color: var(--cl1);
 }

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

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

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

.main-slider{
  position: relative;
}




.main-slider .carousel-caption{
  position: absolute!important;
  bottom: 30px;left: -200px;
  text-align: left!important;
  width: 60%;
  display: flex; align-items: center;
  justify-content: flex-start;
  gap: 30px;
  padding: 20px 5%;
  background-color: rgba(255, 255, 255, 0.6);
  visibility: hidden;

}

.main-slider .active .carousel-caption{
  left: 0px!important;
  visibility: visible;
 transition: all .4s linear;
}


.main-slider .carousel-caption .slider-icon .icon{
  width: 60px; height: 60px;
  background-color: var(--cl1);
  border-radius: 50%;
  display: flex; align-items: center;
  justify-content: center;
  opacity: 0;transition: all .8s linear;
}

.main-slider .active .carousel-caption .slider-icon .icon{
  opacity: 1;
}

.main-slider .carousel-caption .slider-icon .icon i{
  color: var(--cl2);
  font-size: 20px;
  animation-name: mnicon;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  transition: all .1s ease; 
}

/* ----------------- */

.dr-down{
  /* display: flex; */
  align-items: center;
  justify-content: center;
  display: none;
}

.dr-down .icon-box{
  width: 50px; height: 50px;
  border-radius: 50%;
  background-color: var(--cl1);
  display: flex; align-items: center;
  justify-content: center;
  margin-top: -25px;
  position: relative;
  z-index: 2;
  border: 3px solid #ffff;
}

.dr-down .icon-box i{
  color: var(--cl2);
  font-size: 18px;
  animation-name: mnicon;
  animation-duration: 1s;
  animation-iteration-count: infinite;
  transition: all .1s ease; 
}


@keyframes mnicon {
  from {
        opacity: 0;
        transform: translateY(0);
      }

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




.main-slider .carousel-caption h5{
  font-family: var(--mon-sd);
  color: #000;
  font-size: 30px;
  opacity: 0;
  /* animation-name: maintitle;
  animation-duration: 4s;
  transition: all .2s ease; */
}

.main-slider .active .carousel-caption h5{
  font-family: var(--mon-sd);
  color: #000;
  font-size: 30px;
  opacity: 1;
  transition: all .8s linear;
}

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

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

.main-slider .carousel-caption h3{
  font-family: var(--robc-sb);
  color: #fff;
  font-size: 40px;
  margin-bottom: 1rem;
  animation-name: slsubtitle;
  animation-duration: 4s;
  transition: all .2s ease;
}

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

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




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




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

.al-about{
  position: relative;
  background-image: url(../images/map-bg.png);
  background-position:left;
  background-repeat: no-repeat;
  background-size:contain;
  margin: 3rem 0px;
}

.al-about .ab-left{
  padding: 30px 40px 30px 0px;
}

.al-about .ab-left h3{
  font-size: 18px; color: #7d7777;
  font-family: var(--mon-sd);
}

.al-about .ab-left h1{
  font-size: 30px; color: #000;
  font-family: var(--mon-sd);
}


.al-about .ab-right p{
  font-size: 18px!important; color: #555;
  font-family: var(--rob-rgs);
}

/* about page ------------------- */

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


/*********************
===============================
Products -------------------
===============================
*********************** */



.al-proucts{
  background-color: var(--cl-light);
}

.al-proucts .pro-title h3{
  font-size: 14px; color: #222;
  font-family: var(--mon-md);
}


.al-proucts .pro-title h1{
  font-size: 25px; color: var(--cl2);
  font-family: var(--mon-md);
}



.al-proucts .inner-container{
  margin-top: 3rem!important;
}


.al-products .item{
  padding-bottom: 1rem;
  min-height: 380px;
  border-radius: 5px;
  overflow: hidden;
}


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

.al-proucts .img{
  display: flex; align-items: center;
  justify-content: center;
}


.al-proucts .img .img-inner{
  width: 200px; height: 200px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px;
}

.al-proucts .img .img-inner img{
 width: 100%;
}


.al-proucts .item-content h3{
  font-size: 20px!important; color: #333;
  margin-top: 1rem;
  font-size: var(--mon-md);
}

.al-proucts .pro-btn{
  margin-top: 1.5rem;
}

.al-proucts .pro-btn a{
   padding: 10px 15px;
   font-family: var(--mon-md);
   color: #fff;
   font-size: 16px;
   border-radius: 6px;
   background-color: var(--cl2);
   letter-spacing: 1px;
}


.al-proucts .pro-btn a:hover{
  background-color: var(--cl1);
  transition: all .2s linear;
}

.proitem:hover{
  transform: translateY(10px);
  transition: all .2s linear;
}


/*******************
==================
Products Page---------------------
==================
********************/

.pro-page{
  padding: 40px 5% 70px 5%;
}

.pro-page .inner-container .item{
 
  margin: 10px 0px;

}

.pro-page .inner-container .item .img{
 
  display: flex; align-items: center;
  justify-content: center;

}

.pro-page .inner-container .item .img-inner{
  width: 200px; height: 200px;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: rgba(17, 17, 26, 0.1) 0px 4px 16px, rgba(17, 17, 26, 0.05) 0px 8px 32px;

}


.pro-page .inner-container .item .img-inner img{
  width: 100%; height: 100%;
  
}



.pro-page .inner-container .item .item-content h3{
 
  font-size: 20px; color: #333;
  font-family: var(--mon-sd);
  margin-top: 1rem;
  
}


.pro-page-desc{
  padding: 30px 5% 0px 5%;
}



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

.al-blogs .blog-item{
  padding: 20px 0px;
}

.al-blogs .blog-item{
  padding: 0px 20px;
  margin: 1rem 0px;
}

.al-blogs .blog-item .item{
  background-color: #fff;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
}

.al-blogs .blog-item .item .blog-content{
  padding: 20px 20px 30px 20px;
}

.al-blogs .blog-item .blog-img img{
  width: 100%;
}

.al-blogs .blog-item .item .blog-content h2{
 font-size: 22px; color: #000;
 font-family: var(--rob-md);
}

.blog-btn{
  margin: 25px 0px 0px 0px;
}

.blog-btn .read-btn{
   padding: 6px 15px;
   background-color: var(--cl2);
   color: #fff;
}

.blog-btn .read-btn:hover{
  background-color: var(--cl1);
  transition: all .2s linear;
}


.order-last .widget-area{
    background-color: #fff;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    padding: 20px;
}

.order-last .widget-area h3{
  font-size: 22px; color: #000;
  font-family: var(--rob-md);
}

.order-last .widget-area a{
  font-size: 16px; color: #000;
  font-family: var(--rob-rg);
}

.order-last .widget-area a:hover{
  color: var(--cl-red); transition: all .2s linear;
}


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

.al-footer{
  background-image: url(../images/ft-baground.jpg);
  background-repeat: no-repeat; background-position: center;
  background-attachment: fixed;
  background-size: cover;position: relative;
  padding: 70px 5%;
}

.al-footer::before{
  content: '';position: absolute;
  top: 0px; left: 0px;
  background-color: rgba(0, 0, 0, .8);
  width: 100%; height: 100%;
}


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

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

.al-footer .social i{
  color: #fff;
  font-size: 16px;
}

/* .al-footer .social a:hover span{
  background-color: var(--cl-blue);
  transition: all .3s linear;
} */

.al-footer .social span{
  display: block;
  width: 40px; height: 40px;
  background-color: var(--cl2);
  border-radius: 6px;
  display: flex;align-items: center;
  justify-content: center;
}

.al-footer .social span:hover{

  background-color: var(--cl1)!important;
  transition: all .2s linear;
}

.al-footer .ft-link{
  display: flex;align-items: flex-start;
  justify-content: center;
}


.al-footer .ft-head h2{
  font-size: 22px;color: #fff;
  font-family: var(--mon-sd);
  margin-bottom: 1rem;
  font-weight: normal;
}

.al-footer .ft-head .title{
  margin-bottom: 1.5rem!important;
}

.al-footer .ft-link li{
  margin: 5px 0px;
  --webkit-transform: none;
}


.al-footer .ft-link li a{
  font-size: 16px;
  display: inline-block;
  color: #fff;
  font-family: var(--mon-md);
  margin-left: 2px;
  text-transform: uppercase;
}


.al-footer .ft-cont .item{
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 10px;
}


.al-footer .ft-cont .con-link{
 align-items: center!important;
}


.al-footer .ft-cont .item i{
  color: #fff; font-size: 16px;
}


.al-footer .ft-cont .con-link{
  margin-top: 1rem;
}

.al-footer .ft-cont .con-link a{
 color: #fff;
 font-family: var(--ft-rg);

}

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


 .al-footer .hd-ax  h2{
    transform: translateX(-16px);
 }


 .copy-right{
  background-color: #1a1c27;
  padding: 13px 5%;
 }

 .copy-right p{
  color: #ccc;
  margin: 0px!important;
  font-size: 14px!important;
  font-size: var(--ft-rg);
 }


 
 .copy-right .copy-container{
  display: flex;
  align-items: center;
  justify-content: space-between;
 }

 .copy-right p{
  color: #ccc;
  margin: 0px!important;
  font-size: 14px!important;
  font-size: var(--ft-rg);
 }


 .copy-right .pt-tr{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
 }


 .copy-right .pt-tr a, .copy-right .pt-tr span{
  color: #ffff; font-size: 14px;
  text-transform: none; text-decoration: none;
 }



/* whatsapp */
/***Whatsapp icon***/
.floating{
  position:fixed;
  width:45px;
  height:45px;
  bottom:30px;
  left:30px;
  background-color:var(--cl2);
  color:#FFF;
  border-radius:50px;
  text-align:center;
  font-size:22px;
  box-shadow: 2px 2px 3px #31333e;
  z-index:10000;
  transition: all .2s ease-in;
  display: flex; align-items: center;
  justify-content: center;
}

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

.float-button{
  color:#FFFFFF;	
}








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



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

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



.al-banner .banner-title h3{
    font-size: 35px;
    color: #fff;
    font-family: var(--mon-sd);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
}

.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(--mon-md);
 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(--mon-md);
  text-transform: uppercase;
}


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

/***********************
===============================
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 .request-form .con-container{
  background-color: var(--cl2);
  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-size: 25px;
  font-family: var(--rob-md);
  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 .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{
 font-size: 25px; color: var(--cl-blue);
 font-family: var(--rw-sbd);
 margin-bottom: 1.5rem;
}

.al-contact .consultation-form .al-req-form .frm-btn{
  background-color: var(--cl2);
  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(--cl1); transition: all .2s linear;
 }