@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');


/* Resets */
*,
*::before,
*::after {
    box-sizing: inherit;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px; 
    scroll-behavior: smooth; 
    -webkit-font-smoothing: antialiased; 
    text-rendering: optimizeLegibility; 
}

body {
    margin: 0;
    padding: 0;
    overflow-x: hidden; 
    box-sizing: border-box; 
    width: 100%; 
    font-display: swap;	
}


:root{
    --rob: "Roboto", serif;
    --pop:"Poppins", serif;
    --op-san:"Open Sans", serif;
    --mon:"Montserrat", serif;
    --cin:"Cinzel", serif;
    --arm:"Arimo", serif;
    --jost:"Jost", serif;
    --cl1:#14b1bb;
    --cl2:#033c4d;
    --black:#000;
    --white:#fff;  
}

/* .row{
   overflow: hidden;
   margin: 0px;
} */
/* -------------- */


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

.sub-container{
   max-width: 1000px;
   margin: 0 auto;
}

.spadd1{
    padding: 50px 5%;
}

.spadd7{
   padding: 70px 5%;
}

.desc{
    color: #333;
    /* font-size: 16px; */
    font: 400 16px/1.5 var(--op-san);
}

a{
    text-decoration: none!important;
}


.hd-ctitle  h2{
    font: 600 28px/1.2 var(--cin);
    margin-bottom: 5px;
    color: var(--cl2);
}


/* button ---------------- */



/*******************************************************
--------------------- Header ------------------
****************************************************/

.header-sec .hd-top{
    background-color: var(--cl1);
    padding: 10px 5%;
}

.header-sec i{
    color: #fff;
    font-size: 18px;
 }

.header-sec .hd-left p{
   color: #fff;
   font: 500 16px /1.1 var(--jost);
}

.header-sec .hd-left a{
    color: #fff;
    font: 500 16px /1.1 var(--jost);
 }


 .al-header{
    background-color: var(--white);
    padding: 20px 5%;
    overflow-x: none!important;
 }

 .al-header .log-sec img{
    width: 350px;
 }


 .al-header .main-nav nav a{
    color: var(--cl2);
    font: 600 16px /1 var(--cin);
    letter-spacing: .5px;
    padding: 10px 0px;
    position: relative;
 }

 .al-header .main-nav nav a::after{
  content: ''; position: absolute;
  bottom: 0px; left: 0px;
  width: 0%; height: 2px;
  background-color: var(--cl1);
  transition: all .2s linear;
}

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

.al-header .main-nav nav a:hover::after{
   width: 100%;
}

.al-header .toogler .toog-con{
   width: 30px; height: 30px;
   /* border: 1px solid #000; */
   display: flex;
   align-items: center;
   justify-content: center;
   flex-direction: column;
   gap: 7px;
   cursor: pointer;
}

/* .al-header .toogler .toog-con:hover{
   gap: 0px;
   transition: all .5s linear;
} */

.al-header .toogler .toog-con .line{
   width: 100%; height: 2px;
   background-color: var(--cl2);
}

.al-header .navbar-collaps{
   position: absolute;
   bottom: -280px; 
   max-width: 300px;
   right: 0px;
   display: flex;
   align-items: center;
   justify-content: flex-end;
   overflow: hidden;
   visibility: hidden;
   box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;
   
}

.al-header .navbar-collaps .navcol-innner{
   display: flex;
   align-items: flex-start;
   justify-content: flex-start;
   flex-direction: column;
   gap: 8px;
   min-width: 300px;
   max-width: 300px;
   padding: 20px 0px;
   background-color: var(--white);
   transform: translateX(300px);
}

.al-header .navbar-collaps a{
   color: var(--cl2);
   font: 600 15px/1.2 var(--cin);
   border-bottom: 1px solid #e0e0e0;
   width: 100%;
   padding: 10px 20px;
}

.al-header .navbar-collaps a:hover{
  border-bottom: 2px solid var(--cl1);
  color: var(--cl1);
  transition: all .2s linear;
}

.al-header .navbar-collaps a:last-child{
   border: none ;
}


 /*********************************************************
 ----------------- Banner ------------------------
 *************************************************/

 .main-banner .carousel-caption{
    width: 70%;
    margin: 0 auto;
    left: 0px!important;
    bottom: 10%!important;
    right: auto!important;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    padding: 0px 9%;
 }



 .main-banner .carousel-caption h5{
    font: 600 50px / 1 var(--cin);
    text-align: start;
 }

 .main-banner .carousel-caption p{
    font: 400 20px / 1 var(--jost);
    text-align: start;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
 }


 .main-banner .sl-btn a{
    background-color: var(--cl1);
    padding: 15px 30px;
    color: #fff;
    font: 400 18px/1 var(--jost);
    border-radius: 6px;
 }


 /****************************************************************
 ============================= About us --------------------
 **********************************************************/


 .about-us .desc-container{
    max-width: 1200px;
    margin: 0 auto;
 }

 .about-us .desc-container p{
   display: -webkit-box;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
   overflow: hidden;
 }



 .about-us .ab-right h3{
    color: var(--cl2);
    font: 600 22px / 1.2 var(--cin);
 }


 .about-us .ab-right p{
    display: -webkit-box;
   -webkit-line-clamp: 9;
   -webkit-box-orient: vertical;
   overflow: hidden;
 }

 .st-btn{
   margin-top: 30px;
 }
 .st-btn a{
   font: 400 18px/1 var(--jost);
   color: var(--white);
   background-color: var(--cl2);
   padding: 8px 20px;
 }


 /* **************************************
 ---------------- Gallery --------------------------
 *************************************** */

 .al-photogall{
   background-color: var(--cl2);
   position: relative;
   overflow: hidden;
 }

 .al-photogall .el1{
   position: absolute;
   bottom: -250px; left: -200px;
   width: 400px;
   z-index: 0;
   opacity: .4;
   animation-name: elp1;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in-out; /* Smoother easing */
}

@keyframes elp1 {
   0% {
      transform: scale(100%) translateX(0px) translateY(0px);
   }
   50% {
      transform: scale(120%) translateX(30px) translateY(-10px); /* Combine transformations */
   }
   100% {
      transform: scale(100%) translateX(0px) translateY(0px); /* Return to original */
   }
}


 .al-photogall .el2{
   position: absolute;
   top: -250px; right: -200px;
   width: 400px;
   z-index: 0;
   opacity: .4;
   animation-name: elp2;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in-out; /* Smoother easing */
}

@keyframes elp2 {
   0% {
      transform: scale(100%) translateX(0px) translateY(0px);
   }
   50% {
      transform: scale(120%) translateX(30px) translateY(30px); /* Combine transformations */
   }
   100% {
      transform: scale(100%) translateX(0px) translateY(0px); /* Return to original */
   }
}


 .al-photogall .tr1 {
   position: absolute;
   top: 100px;
   left: 60px;
   width: 80px;
   height: 80px; 
   z-index: 0;
   transform: rotate(45deg); 
   opacity: 0.4;
   animation-name: trio1;
   animation-duration: 5s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in-out; /* Smoother easing */
}

@keyframes trio1 {
   0% {
      transform: rotate(45deg) translateX(0px);
   }
   50% {
      transform: rotate(90deg) translateX(30px); /* Combine transformations */
   }
   100% {
      transform: rotate(45deg) translateX(0px); /* Return to original */
   }
}



 .al-photogall .tr2{
   position: absolute;
   bottom: 100px; right: 60px;
   width: 80px;
   z-index: 0;
   rotate: 45deg;
   opacity: .4;
   animation-name: trio2;
   animation-duration: 4s;
   animation-iteration-count: infinite;
   animation-timing-function: ease-in-out; /* Smoother easing */
}

@keyframes trio2 {
   0% {
      transform: rotate(45deg) translateX(0px);
   }
   50% {
      transform: rotate(120deg) translateX(40px); /* Combine transformations */
   }
   100% {
      transform: rotate(45deg) translateX(0px); /* Return to original */
   }
}

 .al-photogall .hd-ctitle h2{
   color: #fff;
 }


 .al-gallcontainer img{
   max-width: 100%;
 }

 .al-gallcontainer .gal-item{
   border-right: 2px solid #fff!important;
   z-index: 1;
   position: relative;
   overflow: hidden;
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
 }

 .al-gallcontainer .gal-item a{
   z-index: 4;
 }

 .al-gallcontainer .gal-item a .gal-img{
   z-index: 1;
 }

 .al-gallcontainer .gal-item .expand{
   position: absolute;
   width: 0px;
   z-index: 3;
   transition: all .5s linear;
   opacity: 0;
 }

 .al-gallcontainer .gal-item:hover .expand{
   width: 36px;
   opacity: 1;
 }

 .al-gallcontainer .gal-item a::before{
   content: ''; position: absolute;
   top: -300px; left: 0px;
   width: 100%; height: 100%;
   background-color: var(--cl1);
   opacity: .6;
   transition: all .4s ease;
   z-index: 3;
 }

 .al-gallcontainer .gal-item a:hover::before{
   top: 0px;
 }



 .al-gallcontainer .gbnone{
   border-right: none;
 }

 .al-gallcontainer .btwht{
   border-top: 2px solid #fff;
 }

 
/***********************************
------------- Pro-details -------------------
***************************/

.al-prodte .dte-title h4{
   font: 500 55px /1 var(--cin); 
}


.al-prodte .title2{
   font-style: italic!important;
   margin-left: 13rem;
}

.al-prodte .al-dte .itm{
   border-bottom: 1px solid #b7b7b7;
   padding: 30px 0px;
}


.al-prodte .al-dte .itm-header .hd-name{
   display: flex;
   align-items: center;
   justify-content: flex-start;
   gap: 12px;
}

.al-prodte .al-dte .itm-header  h3{
  font: 500 18px /1 var(--jost);
  color: #2e3030;
  margin-bottom: 0px;
}



.al-prodte .al-dte .itm-header img{
  width: 30px;
 }

 .al-prodte .al-dte .rht-dte .more-btn{
   display: inline-block!important;
   gap: 15px;
   border: 1px solid #b7b7b7;
   border-radius: 20px;
   padding: 6px 15px;
   cursor: pointer;
   background: none;
 } 

 .al-prodte .item-sf{
   min-width: 170px;
 }

 .al-prodte .al-dte .rht-dte .more-btn:hover{
   background-color: var(--cl2);
   transition: all .2 ease-in;
 } 

 .al-prodte .al-dte .rht-dte .more-btn i{
   margin-left: 5px;
   font-size: 16px;
   color: #444;
 } 

 .al-prodte .al-dte .rht-dte .more-btn span{
  font: 500 16px /1 var(--op-san)!important;
  color: #444;
 } 


 .al-prodte .al-dte .rht-dte .more-btn:hover i{
   color: #fff;
   transition: all .2 linear;
 } 

 .al-prodte .al-dte .rht-dte .more-btn:hover span{
  color: #fff;
  transition: all .2 linear;
 }

 .al-prodte .dte-content {
   display: none; /* Hidden by default */
   /* background-color: #f8f9fa; */
   padding: 15px;
   /* border: 1px solid #ddd;
   border-radius: 5px; */
}
 

 .al-prodte .dte-content .dt-con-left .conitm p{
   font: 400 16px.1.1 var(--op-san);
   color: #333;
   margin-bottom: 0px;
 }

 .al-prodte .dte-content .dt-con-left .lft-con{
   min-width: 160px;
 }

 .al-prodte .dte-content .dt-con-left span{
   min-width: 20px;
 }

 .al-prodte .dte-content .dt-con-rht .mn-desc{
   min-width: 160px;
 }

 .al-prodte .dte-content .dt-con-rht  span{
   min-width: 20px;
 }


 /* ***************************************************
 --------------------- High-lights ------------
 ***************************************** */
 .al-highlights{
   padding: 0px 5%;
 }
 .al-highlights li{
   font: 400 16px /1.5 var(--rob);
   color: #000;
   letter-spacing: .5px;
   margin-bottom: 18px;
 }

 .al-highlights li::marker {
   color: var(--cl1);
}

/**********************************************************
--------------------- Contact -------------------------
******************************************* */


.al-contact{
   position: relative;
}


.al-contact::before{
   position: absolute; content: '';
   top: 0px; left: 0px;
   width: 100%; height: 300px;
   background-color: var(--cl1);
   opacity: .2;
   z-index: 0;
}


.al-contact .con-lft h3{
   font: 400 16px/1.2 var(--op-san);
   color: #444;
}

.al-contact .con-lft h4{
   font: 700 32px/1.2 var(--cin);
   color: var(--cl2);
}

.al-contact .al-form{
   background-color: #ffffff;
   border-radius: 10px;
   box-shadow: rgba(50, 50, 93, 0.25) 0px 2px 5px -1px, rgba(0, 0, 0, 0.3) 0px 1px 3px -1px;
   max-width: 500px;
   margin: 0 auto;
   padding: 40px 30px;
}


.al-contact .al-form h3{
   font: 700 25px /1.2 var(--cin);
   color: var(--cl2);
}

.al-contact .al-form .frm-input{
   margin: 25px 0px;
}


.al-contact .al-form .frm-input input, .frm-input textarea{
   width: 100%;
   padding: 12px 6px;
   font: 400 16px / 1 var(--rob);
   color: #ccc;
   border: none; border-bottom: 1px solid #f1f1f1;
   outline: none;
}

.al-contact .frm-input textarea{
   min-height: 90px;
}

.al-contact .al-form .frm-input input:focus, .frm-input textarea:focus{
   border: none; border-bottom: 1px solid var(--cl2);
   transition: all .2s linear;
}


.al-contact .al-form  .frm-btn-con{
   margin-top: 1.5rem;
}

.al-contact .al-form  .frm-btn-con  .frn-btn{
   border: none; padding: 10px 30px;
   background-color: var(--cl2);
   font: 400 16px /1.2 var(--rob);
   color: #fff;
}

.al-contact .con-details{
   bottom: 150px;
}

.al-contact .con-details img{
   max-width: 30px;
}

.al-contact .con-details h5{
  font: 500 20px/1.2 var(--jost);
  color: var(--cl2);
}

.al-contact .con-details a{
   font-size: 16px; color: #333;
 }

 .al-contact .con-details a:hover{
   color: var(--cl2);
   transition: all .2s linear;
 }

 .al-footer{
   border-top: 1px solid #ccc;
   padding: 30px 5% 20px 5%;
 }

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

 .al-footer .foot-rht h4{
   font: 400 17px/1.2 var(--rob);
   color: var(--cl2);
   margin-bottom: 0px;

 }

 .al-footer .foot-rht i{
   font-size: 20px;
   color: var(--cl2);
 }

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


.ft-bottom {
   background-color: #033c4d;
   padding: 10px 5%;
 }

 .ft-bottom p{
   color: #fff;
   margin: 0px;
 }


 /* Location */

 .localtion iframe{
   width: 100%;
 }