@import url('https://fonts.googleapis.com/css2?family=Gowun+Dodum&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Spline+Sans:wght@300..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Spline+Sans:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Kantumruy+Pro:ital,wght@0,100..700;1,100..700&family=Spline+Sans:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Kantumruy+Pro:ital,wght@0,100..700;1,100..700&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Spline+Sans:wght@300&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Kantumruy+Pro:ital,wght@0,100..700;1,100..700&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Spline+Sans:wght@300..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

header {

  width: 100%;
   background: #ffffffc0;
  flex-wrap: wrap;
  backdrop-filter: blur(25px);
  border-bottom: 1px solid rgba(136, 135, 135, 0.178);
  position: sticky; top: 0; left: 0; right: 0; z-index: 100;
  transition: background 0.35s ease, border-color 0.35s ease;
  

 
}
 

.header {
  
  padding: 0px;
  margin: 0px;
  height: 90px;
  padding-left: 1.4vw;
  padding-right: 1.4vw;
  display: flex;
  justify-content: space-between;
  flex-direction: row;
}

.header:hover {
 
  transition: 0.4s;
}
.lefthead {
  width: 1fr;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  
 
  
  
}
.plogo {
  border-radius: 5px;
  align-items: center;
  max-width: 70px ;
  height: fit-content;
 
  
 

}
@media (max-width: 900px) {
  .plogo {
    flex: none;
    height: auto;
    align-self: center;
  }
}

.plogo:hover{
  transform: scale3d(1.01,1.01,1.01);
  transition: transform 0.3s ease-in;
}

.logo {
  
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  padding-left: 4.1vw;
  padding-top: 1.2vh;
  width: 1fr;
  justify-content: center;
  align-items: center;

 
}

.centerhead {
  display: flex;
  flex-direction: row;
  width: 100%;
  padding-left: 30vw;
  padding-right: 7vw;
  justify-content: space-between;
  text-align: center;
}
@media (  max-width: 1400px )  {
  .centerhead {
    padding-left: 20vw;
  }
}

h1 {
  font-family: 'Kantumruy Pro', sans-serif;
  font-size: 1.255rem;
  font-weight: 305;
  font-style: normal;
  color: rgb(0, 0, 0);
}
.homel {
  
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.homel h1 {
  text-decoration: none;
 
}
.homel a {
  text-decoration: none;
  
}
.homel:hover {
  
  
  transform: scale3d(1.1, 1.11, 1.1);
  transition: transform 0.4s ease-in-out;
}

.homel:hover :active {
  color: rgb(4, 71, 129);
  transform: scale3d(1.02, 1.02, 1.02);
  transition: transform 0.2s ease-out;
  transition: color 0s ease-out;
}




.aboutusl {
 
  height: 100%;
  width: 1fr;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.aboutusl:hover {
  
  
  transform: scale3d(1.1, 1.11, 1.1);
  transition: transform 0.4s ease-in-out;
}
.aboutusl:hover :active {
  color: rgb(4, 71, 129);
  transform: scale3d(1.02, 1.02, 1.02);
  transition: transform 0.2s ease-out;
  transition: color 0s ease-out;
}

.ourproductsl {
  
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.ourproductsl:hover {
  
  
  transform: scale3d(1.1, 1.11, 1.1);
  transition: transform 0.4s ease-in-out;
}

.ourproductsl:hover :active {
  color: rgb(4, 71, 129);
  transform: scale3d(1.02, 1.02, 1.02);
  transition: transform 0.2s ease-out;
  transition: color 0s ease-out;
}



.contactusl {
  
  width: 1fr;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.contactusl:hover {
  
  
 transform: scale3d(1.1, 1.11, 1.1);
  transition: transform 0.4s ease-in-out;
}
.contactusl:hover :active {
  color: rgb(4, 71, 129);
  transform: scale3d(1.02, 1.02, 1.02);
  transition: transform 0.2s ease-out;
  transition: color 0s ease-out;
}

.galleryl {
 
  height: 100%;
  width: 1fr;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.galleryl:hover {
  
  
  transform: scale3d(1.1, 1.11, 1.1);
  transition: transform 0.4s ease-in-out;
}
.galleryl:hover :active {
  color: rgb(4, 71, 129);
  transform: scale3d(1.02, 1.02, 1.02);
  transition: transform 0.2s ease-out;
  transition: color 0s ease-out;
}

.engagel {
  
  
  
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.engagel:hover {
  
  transform: scale3d(1.1, 1.11, 1.1);
  transition: transform 0.4s ease-in-out;
}
.engagel:hover :active {
  color: rgb(4, 71, 129);
  transform: scale3d(1.02, 1.02, 1.02);
  transition: transform 0.2s ease-out;
  transition: color 0s ease-out;
}

.righthead {
 
  align-items: center;
  align-content: center;
  width: 13vw;
  display: flex;
 
  justify-content: space-between;
  

}
:root {
  /*========== Colors ==========*/
  /*Color mode HSL(hue, saturation, lightness)*/
  
  --dark-color: hsl(235, 6%, 40%);
  --white-color: #91ccff;
 

  /*========== Font and typography ==========*/
  /*.5rem = 8px | 1rem = 16px ...*/
  
  --normal-font-size: 1rem;
}  
.call-btn{

    position:relative;

    background:rgba(1,80,151,.92);

    backdrop-filter:blur(12px);

    border:1px solid rgba(255,255,255,.18);

    border-radius:4rem;
    height:40px;
    width:120px;
    box-shadow:
    0 16px 30px rgba(1,80,151,.18),
    0 6px 12px rgba(0,0,0,.12),
    inset 0 1px 1px rgba(255,255,255,.25);

    transform:translateY(-3px);

    transition:
    transform .35s cubic-bezier(.22,1,.36,1),
    box-shadow .35s ease;

}
.call-btn a{

    position:relative;
    z-index:2;

    color:white;

    text-decoration:none;

    font-family:'Sora',sans-serif;

    font-size:.95rem;

    font-weight:500;

    letter-spacing:.02em;

}
.call-btn::before{

    content:"";

    position:absolute;

    top:2px;
    left:8%;

    width:84%;
    height:45%;

    border-radius:999px;

    background:
    linear-gradient(
      to bottom,
      rgba(255,255,255,.28),
      rgba(255,255,255,0)
    );

    pointer-events:none;

}
.call-btn:hover{

    transform:translateY(-1px);

    box-shadow:
    0 10px 18px rgba(1,80,151,.16),
    0 4px 8px rgba(0,0,0,.10),
    inset 0 1px 1px rgba(255,255,255,.25);

}
.call-btn:active{

    transform:translateY(2px);

    box-shadow:
    0 3px 6px rgba(0,0,0,.10),
    inset 0 2px 3px rgba(0,0,0,.18);

}
.call-btn:hover::before{

    left:180%;

    transition:1s ease;

}
@keyframes floatGlass{

    0%,100%{

        transform:translateY(-3px);

    }

    50%{

        transform:translateY(-5px);

    }

}


.call-btn{

    animation:
    floatGlass 4s ease-in-out infinite;

}
.call-btn:hover,
.call-btn:active{

    animation:none;

}





/* When the 'active' class is added via JS, the bar expands */
.menucontainer::before{

    content:"";

    position:absolute;
    inset:0;

    pointer-events:none;

    background-image:
    radial-gradient(
        rgba(0,0,0,.05) .8px,
        transparent .8px
    );

    background-size:4px 4px;

    opacity:.35;

}
.menucontainer::after{

    content:"";

    position:absolute;

    width:400px;
    height:400px;

    right:-150px;
    top:-100px;

    border-radius:50%;

    background:
    radial-gradient(
        circle,
        rgba(26, 64, 160, 0.281),
        transparent 70%
    );

    filter:blur(70px);

    pointer-events:none;

}
.menucontainer{
    position:fixed;

    top:0;
    right:0;

    width:min(380px,85vw);
    height:100vh;

     background:
    linear-gradient(
        180deg,
        #ffffffe8,
        #ffffffda
    );

    backdrop-filter:blur(25px);
    -webkit-backdrop-filter:blur(25px);


    border-left:1px solid rgba(26,63,160,.08);

     box-shadow:
    -60px 0 120px rgba(0,0,0,.12);
    padding:110px 40px 40px;

    z-index:9999;

    display:none;
    flex-direction:column;

    transform:translateX(100%);
    opacity:0;
    visibility:hidden;

    transition:
    transform .8s cubic-bezier(.22,1,.36,1),
    opacity .4s ease,
    visibility .4s ease;
}
@media(max-width:768px)   {
  .menucontainer{
    width: 75dvw; 
  }
  
}
.menuBtn{
    width:42px;
    height:20px;

    display:flex;
    flex-direction:column;
    justify-content:space-between;

    background:none;
    border:none;

    cursor:pointer;

    position:relative;
    z-index:10000;
}
.show{
    transform:translateX(0);
    opacity:1;
    visibility:visible;
    display: flex;
}
.bar{

    width:100%;
    height:1.5px;

    background:#111;

    border-radius:50px;

    transition:
    transform .5s cubic-bezier(.22,1,.36,1),
    opacity .3s ease;

}

.menuBtn:hover {
  transform: scale3d(1.05, 1.05, 1.05);
  transition: 0.5s ease-in-out;
}
.menuBtn:hover .bar:nth-child(2) {
  transform: scaleX(0.7);
  transition: 0.3s ease-in ;
}
  

.menuBtn.active .bar:nth-child(1) {
  transform: rotate(45deg) translateY(10.5px);
}
.menuBtn.active .bar:nth-child(2) {
  opacity: 0;
  transform: translateX(-20px);
}
.menuBtn.active .bar:nth-child(3) {
  transform: rotate(-45deg) translateY(-10.5px);
}

.sidebar li {
  text-decoration: none;
  list-style-type: none;
  
   list-style:none;

    opacity:0;
    transform:translateY(25px);

    transition:
    transform .6s cubic-bezier(.22,1,.36,1),
    opacity .6s ease;
  color: rgb(0, 0, 0);
}
.menucontainer.show .sidebar li{
    opacity:1;
    transform:translateY(0);
}
.sidebar a{

    display:flex;
    align-items:center;

    text-decoration:none;

    font-family:'Kantumruy Pro',sans-serif;

    font-size:clamp(1.3rem,2vw,1.8rem);

    font-weight:300;

    color:#111;

    padding:14px 0;

    border-bottom:
    1px solid rgba(0,0,0,.05);

    transition:
    transform .4s ease,
    color .4s ease;
    

   

    font-weight:300;

    letter-spacing:-0.02em;

    color:#111;

    border-bottom:none;

    padding:14px 0;


}
@media(max-width:700px) {
    .sidebar a{
      font-size: 1.3rem;
    }
}
.products-submenu{

    max-height:0;

    overflow:hidden;

    padding-left:20px;

    transition:
    max-height .6s cubic-bezier(.22,1,.36,1);

}
.products-submenu a{

    font-size:1.35rem;

    opacity:.7;

    padding:10px 0 10px 30px;

}
.products-parent.active .products-submenu{

    max-height:300px;

}
.submenu-arrow{

    margin-left:auto;

    transition:
    transform .4s ease;

    font-size:.75rem;

}
.products-parent.active .submenu-arrow{

    transform:rotate(180deg);

}


.products-submenu a:hover{

    opacity:1;

    transform:translateX(10px);

}
.submenu-arrow{

    margin-left:auto;

    font-size:1.3rem;

    font-weight:300;

    transition:.4s cubic-bezier(.22,1,.36,1);

}
.products-parent.active .submenu-arrow{

    transform:rotate(-90deg);

}
.menu-contact{

    margin-top:auto;

    padding-top:35px;

    border-top:
    1px solid rgba(0,0,0,.08);

}
.menu-contact h4 {
  font-family: 'Sora',sans-serif;
  padding-bottom: 14px;
}
.menu-contact a{

    display:flex;
    align-items:center;
    

    text-decoration:none;

    color:#292929;

    font-size:1rem;
    font-weight:300;
  

   

    transition:.35s ease;
}
@media(max-width:700px) {
  .menu-contact a{
    font-size: 0.9rem;
    padding-left: 0px;
    margin-left:0px;
  }
}
.menu-contact-tel{
  padding: 0;
  margin: 0;
}
.menu-contact a:hover{

    color:#1a3fa0;

    transform:translateX(8px);

}
.menu-contact span{

    width:22px;

    display:flex;
    justify-content:center;

    opacity:.75;

    font-size:1rem;
}
.menucontainer.show .sidebar li:nth-child(1){transition-delay:.08s;}
.menucontainer.show .sidebar li:nth-child(2){transition-delay:.14s;}
.menucontainer.show .sidebar li:nth-child(3){transition-delay:.20s;}
.menucontainer.show .sidebar li:nth-child(4){transition-delay:.26s;}
.menucontainer.show .sidebar li:nth-child(5){transition-delay:.32s;}
.menucontainer.show .sidebar li:nth-child(6){transition-delay:.38s;}
.menucontainer.show .sidebar li:nth-child(7){transition-delay:.44s;}
.menucontainer.show .sidebar li:nth-child(8){transition-delay:.50s;}
.menucontainer.show .sidebar li:nth-child(9){transition-delay:.56s;}
.sidebar a:hover{

   

    transform:translateX(12px);

}
.sidebar a:active{
  color: rgb(3, 85, 156);
}


.crossside {
  display: flex;
  justify-content: right;
  padding-right: 10px;
  padding-bottom: 10px;
  padding-top: 10px;
  z-index: 999;
}


@media (max-width: 768px) {
  .centerhead {
    display: none;
    
  }
}
@media (min-width: 769px) and (max-width: 1024px) {
  .centerhead {
    display: none;
  }
  
}
@media (min-width: 769px) and (max-width: 1300px) {
 
  .call-btn {
    display: none;
  }
}