﻿:root{
    --font-family: "Inter", Arial, Helvetica, sans-serif;

    --text-dark:#1F2937;
    --text-light:#5F6B7A;
    --heading:#111827;
    --blue:#0069B4;
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:var(--font-family);
    font-size:16px;
    font-weight:400;
    line-height:1.6;
    color:var(--text-dark);
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
    text-rendering:optimizeLegibility;
}

 .hero {
        position: relative;
        height: 100vh;
        overflow: hidden;
    }
    .slides {
        position: absolute;
        width: 100%;
        height: 100%;
    }
    .slide {
        position: absolute;
        width: 100%;
        height: 100%;
        background-size: cover;
        background-position: center;
        opacity: 0;
        transition: opacity 1s ease-in-out;
    }
    .slide.active {
        opacity: 1;
    }
    .swiper {
      width: 100%;
      height: 100vh;
    }

    .swiper-slide {
      position: relative;
      background-size: cover;
      background-position: center;
      display: flex;
      align-items: flex-end;
      justify-content: flex-start;
      padding: 100px 50px 50px; /* top padding to avoid navbar overlap */
      color: #fff;
    }

    .content-box {
        width:600px;
      height:250px;
      background: rgba(0,0,0,0.5);
      padding: 30px;
      margin-left:30px;
      /*margin-bottom:2vh;*/
      /*margin-top:20px;*/
      animation: fadeInUp 2.5s ease forwards;
      animation-delay: 0.3s;
     }
    @keyframes fadeInUp {
        from {
            opacity: 0;
            /*transform: translate(-5%, 0%);*/
        }
        to {
            opacity: 1;
            /*transform: translate(-5%, -5%);*/
        }
    }
        .content-box p
        {
             opacity: 0;
            position:absolute;
            
            width:30%;
            margin-left:60px;
        }

    .content-box h1 {
          padding:10px;
          font-weight:400;
          letter-spacing:2px;
          line-height:1.5;
          font-size:44px; 
              text-transform: capitalize;
    }

    .animate p {
       animation: slideLeft 1s ease forwards;
      animation-delay: 0.8s;
    }

    .animate .arrow-btn {

     animation: slideLeft 1s ease forwards;
      animation-delay: 0.8s;
    }

    .arrow-btn {
      width: 35px;
      height: 35px;
      border-radius: 50%;
      border:1px solid #cfcfcf;
      background-color:transparent;
      display: flex;
      position:relative;
      align-items: center;
      vertical-align:middle;
      justify-content: center;
      color: #ffffff;
      font-size: 26px;
      cursor: pointer;
      transition: transform 0.3s ease;
      opacity:0;
      margin-left:10px;
    }
    /* Circular ring (hidden by default) */
.arrow-btn::before {
  content: "";
  position: absolute;
  opacity:0;
  top: -8px;
  left: -8px;
  width: 45px;
  height: 45px;
  padding:1.5px;
  border-color:#75c0f7;
  border-radius: 50%;/*background-color:#75c0f7*/
  background: conic-gradient(#75c0f7 0deg 80deg,transparent 80deg 120deg, #75c0f7 120deg 200deg,transparent 200deg 240deg,#75c0f7 240deg 320deg,transparent 320deg 360deg);

    /* thickness */
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 1px), #000 0);
    mask: radial-gradient(farthest-side,transparent calc(100% - 1px), #000 0);
}


.content-box p:hover + .arrow-btn::before {
  opacity: 1;
  animation: rotateCircle 3s linear infinite; 
}

/* Ring rotation animation */
@keyframes rotateCircle {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
  
    @keyframes fadeUp {
      from { opacity: 0; transform: translateY(30px); }
      to { opacity: 1; transform: translateY(0); }
    }

    @keyframes slideLeft {
      from { opacity: 0; transform: translateX(-50px); }
      to { opacity: 1; transform: translateX(0); }
    }

    @keyframes bounceIn {
      from { opacity: 0; /*transform: scale(0.5);*/ }
      to { opacity: 1; /*transform: scale(1);*/ }
    }

    .swiper-pagination {
     position: absolute !important;
    right: 30px !important;
    bottom: 30px !important;
    top: auto !important;
    left: auto !important;

    display: flex !important;
    flex-direction: row !important;   /* row me */
    gap: 12px;
    width: auto !important;
    z-index: 20;

    }


    .swiper-pagination-bullet {
        position: relative;
   width: 30px !important;
    height: 30px !important;
    border-radius: 50%;
    background:hsla(0,0%,100%,.21);
    border: 1px solid #D7D7D775;
    color: #fff;
    font-weight: bold;
    font-size: 14px;
    opacity: 1 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 !important;
     overflow: hidden;
    }
    
     .logo-text{
    fill:#fff;
    transition:0.3s;
        font-size: 160px;
}

.navCon.active .logo-text
{
    fill:#1b6da7;
}
.navCon.active .menu-toggle span
{
    background:#1b6da7;
}
 .logo-slider
        {
            overflow:hidden;
            position:relative;
            margin-bottom:30px;
        }  
  .swiper-pagination-bullet::before{
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: conic-gradient(rgba(255,255,255,0.25) 360deg,rgba(255,255,255,0.25) 360deg);
    
    /* ring thickness */
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 0);
            mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 0);
}

.swiper-pagination-bullet-active::before{
    animation: progressFill 2s linear forwards;

}

/* Exact Circular Progress */
@keyframes progressFill{
    0%{
        background: conic-gradient(#2f6fb2 0%,rgba(255,255,255,0.25) 0%);
    }
    25%{
        background: conic-gradient(#2f6fb2 25%, rgba(255,255,255,0.25) 25%);
    }
    50%{
        background: conic-gradient(#2f6fb2 50%, rgba(255,255,255,0.25) 50%);
    }
    75%{
        background: conic-gradient(#2f6fb2 75%,rgba(255,255,255,0.25) 75%);
    }
    100%{
        background: conic-gradient(#2f6fb2 100%,rgba(255,255,255,0.25) 100%);
    }
}
    .swiper-pagination-bullet-active {
      background-color:transparent;
      color: #fff;
    }
   

/* NAVBAR */
        .top-nav
        {
            position: fixed; /* fixed hatao */
            top: 0;
            left: 0;
            width: 100%;
            z-index: 999;
        }
                .navCon.hide-header{
    transform:translateY(-100%);
    color:#000;
    background:#fff;
}
        .navCon
        {
            height: 65px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            angle: 0 deg;
            opacity: 1;
            padding-top: 10px;
            padding-right: 10px;
            padding-bottom: 10px;
            padding-left: 67px;
            border-bottom-width: 1px;
            /*background:rgba(44,50,57,.92);*/
            background: rgba(255,255,255,0.08);
            border-bottom: 1px solid rgba(255,255,255,0.25); /* transparent 
            border-bottom: 1px solid rgba(255,255,255,0.25);
            /*backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);*/
                /*background: rgb(0 0 0 / 41%);*/
                
                    background: rgb(0 0 0 / 42%) !important;
        }

            .navCon .logo
            {
                font-size: 34px;
                font-weight: 700;
                color: #fff;
                text-decoration: none;
                letter-spacing: 20%;
                text-align: left;
                vertical-align: middle;
            }


/* NAV LINKS */
 .nav-links {
    list-style: none;
    display: flex;
    /*gap: 12px;*/
    padding-right:47px;
    text-align:right;
    vertical-align:middle;
}
 /* Hamburger */
.menu-toggle{
    display:none;
    width:32px;
    cursor:pointer;
    margin-right:20px;
}

.menu-toggle span{
    display:block;
    width:100%;
    height:3px;
    background:#fff;
    margin:6px 0;
    transition:.3s;
}
  .nav-links1{
    list-style: none;
    display: flex;
    gap: 32px;
    text-align:right;
    padding-right:60px;
    vertical-align:middle;
}
 .nav-links li a{
 position: relative;
    display: inline-block;
    padding: 21px 20px;
    cursor: pointer;  
font-weight: 400;
font-size: 16px;
leading-trim: NONE;
line-height: 22px;
letter-spacing: 1%;
color:#ffffff;
text-decoration:none;

}
        .nav-links li a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background: #fff;
    transition: width 0.3s ease;
}
 .nav-links li a:hover::after {
    width: 100%;
  
    box-shadow: 0 0 8px #fff, 0 0 15px #fff, 0 0 25px #fff;
}
 .nav-links1 li a {
 position: relative;
    display: inline-block;
    padding: 27px 0px;
    cursor: pointer;  
font-weight: 500;
font-size: 15px;
leading-trim: NONE;
line-height: 22px;
letter-spacing: 1%;
color:#ffffff;
text-decoration:none;

}
 
       .nav-links1 li a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background: #fff;
    transition: width 0.3s ease;
}
 .nav-links1 li a:hover::after {
    width: 100%;  
    box-shadow: 0 0 8px #fff, 0 0 15px #fff, 0 0 25px #fff;
}
   .logo-text{
    fill:#fff;
    transition:0.3s;
}

.navCon.active .logo-text{
    fill:#1b6da7;
}
.mega-menu{
    position:absolute;
    top:65px;
    left:0;
    width:100%;
    height:400px;
    display:flex;
    align-items:flex-start;
    background:rgba(44,50,57,.92);
    opacity:0;
    visibility:hidden;
    transform:translateY(10px);
    transition:.35s;
    z-index:9999;
   
}

.mega-menu.active{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

/* LEFT MENU */

.mega-left{
    /*width:320px;*/
    /*margin-top:20px;*/
    margin-left:270px;
    display:flex;
    flex-direction:column;
    /*gap:12px;*/
    /*z-index:2;*/
}
.mega-left a{
    color:#fff;
    text-decoration:none;
    font-size:18px;
    font-weight:500;
    height:auto;
    padding:0;
    display:flex;
    text-align:left;
    justify-content:space-between;
    align-items:center;
    padding:10px 0;
    /*transition:.25s;*/
}
/* =========================
   HERO RESPONSIVE
========================= */

/* Tablet */
@media (max-width:1024px){

       .hero,
    .swiper,
    .swiper-slide{
        height:50vh;
    }
    .swiper-slide{
        padding:90px 40px 40px;
        align-items:flex-end;
    }

    .content-box{
        width:80%;
        max-width:650px;
        height:auto;
        padding:25px;
        margin-left:0;
    }

    .content-box h1{
        font-size:36px;
        line-height:1.3;
        padding:0;
    }

    .content-box p{
        position:relative;
        width:100%;
        margin:15px 0;
        font-size:16px;
        line-height:26px;
    }

    .arrow-btn{
        margin-left:0;
    }

    .swiper-pagination{
        right:20px !important;
        bottom:20px !important;
    }

}
@media(max-width:991px){

.navCon{
    padding:10px 20px;
    position:relative;
}

.menu-toggle{
    display:block;
}

.nav-links{
    position:absolute;
    top:65px;
    left:0;
    width:100%;
    background:#24384a;
    flex-direction:column;
    align-items:flex-start;
    padding:0;
    max-height:0;
    overflow:hidden;
    transition:.4s ease;
}

.nav-links.active{
    max-height:500px;
}

.nav-links li{
    width:100%;
}

.nav-links li a{
    display:block;
    width:100%;
    padding:16px 20px;
    border-bottom:1px solid rgba(255,255,255,.1);
}

.nav-links1{
    display:none;
}

.logo{
    font-size:26px !important;
}

}

/* Small Mobile */

@media(max-width:576px){

.navCon{
    padding:10px 15px;
}

.logo{
    font-size:22px !important;
}

.menu-toggle{
    margin-right:5px;
}

.nav-links li a{
    font-size:15px;
}

}
/* Mobile */
@media (max-width:768px){

    .hero,
    .swiper,
    .swiper-slide{
        height:50vh;
    }

    .swiper-slide{
        padding:90px 20px 30px;
        justify-content:flex-start;
        align-items:flex-end;
    }

    .content-box{
        width:100%;
        max-width:100%;
        height:auto;
        margin:0;
        padding:20px;
        background:rgba(0,0,0,.55);
    }
    .content-box h1{
        font-size:28px;
        line-height:1.25;
        letter-spacing:1px;
        padding:0;
    }
    .content-box p{
        position:relative;
        width:100%;
        margin:18px 0;
        font-size:15px;
        line-height:24px;
    }
    .arrow-btn{
        width:40px;
        height:40px;
        font-size:22px;
        margin-left:0;
    }
    .arrow-btn::before{
        width:50px;
        height:50px;
    }
    .swiper-pagination{
        right:15px !important;
        bottom:15px !important;
        gap:8px;
    }
    .swiper-pagination-bullet{
        width:24px !important;
        height:24px !important;
        font-size:12px;
    }
}
/* Small Mobile */
@media (max-width:480px){
    .swiper-slide{
        padding:80px 15px 20px;
    }
    .content-box{
        padding:18px;
    }
    .content-box h1{
        font-size:22px;
        line-height:1.3;
    }
    .content-box p{
        font-size:14px;
        line-height:22px;
    }
    .arrow-btn{
        width:36px;
        height:36px;
        font-size:18px;
    }
    .arrow-btn::before{
        width:46px;
        height:46px;
    }
    .swiper-pagination{
        right:10px !important;
        bottom:10px !important;
    }
    .swiper-pagination-bullet{
        width:20px !important;
        height:20px !important;
        font-size:10px;
    }
}
/*======================================================================================*/
/* MAIN SECTION */
.industry-section {
    padding: 0px;
    background: #ffffff; 
    /* light grey background (optional)f8f9fb */
}

/* 2-COLUMN FLEX ROW */
.industry-section .row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width:1200px;
    margin:0;
    padding:30px 0;
    margin: auto;
    /*height:975px;*/
}

/* LEFT BOX */
.left-box {
    max-width: 50%;
    padding: 0px 30px 0px 0px;
    border-radius: 6px;
    background: #ffffff;
}

.left-box h2 {
    font-size: 28px;
    margin-bottom: 20px;
    color: #2f6da5;
    font-weight: 600;
}

.left-box p {
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 15px;
    color: #444;
    text-align:justify;
}

/* RIGHT IMAGE BOX */
.right-image {
    max-width: 50%;
   background: #F7F7F7;
    /*padding:100px;*/
        overflow: hidden;
}

.right-image img {
    width: 100%;    
    /*height: 500px;*/    
    border-radius: 6px;
    object-fit: cover;
    animation: zoomShrink 3s ease-in-out forwards;
}
        @keyframes zoomShrink
        {
            0%
            {
               padding:0px; transform: scale(1.2); /* Start big */
            }

            100%
            {
                padding:80px;transform: scale(1); /* End small */
            }
        }
        /* Large Tablet */
@media (max-width:1024px){
.industry-section .row{
    max-width:100%;
    padding:40px 20px;
    gap:30px;
}
.left-box{
    width:50%;
    padding:0 15px;
}
.left-box h2{
    font-size:24px;
}
.left-box p{
    font-size:15px;
    line-height:1.7;
}
.right-image{
    width:50%;
}
.right-image img{
    width:100%;
}
}
/* Tablet */
/*=========================
    Mobile View
==========================*/

@media (max-width:768px){

    .industry-section{
        padding:30px 15px;
    }

    .industry-section .row{
        display:flex;
        flex-direction:column;
        gap:25px;
        max-width:100%;
        width:100%;
        padding:0;
    }

    .left-box,
    .right-image{
        width:100%;
        max-width:100%;
        flex:0 0 100%;
    }
    .right-image img{
        display:block;
        width:100%;
        height:auto;
        padding:0 !important;
        transform:none !important;
        animation:none;
        border-radius:6px;
    }

    .left-box h2{
        font-size:24px;
        margin-bottom:15px;
    }

    .left-box p{
        font-size:15px;
        line-height:1.8;
        text-align:left;
    }
    
    .right-image img{
        animation:zoomShrinkMobile 1.5s ease forwards;
    }

    @keyframes zoomShrinkMobile{
        from{
            transform:scale(1.1);
        }
        to{
            transform:scale(1);
        }
    }
}

/* Mobile */
@media (max-width:576px){
.industry-section .row{
    padding:30px 15px;
    gap:25px;
}
.left-box h2{
    font-size:22px;
    line-height:1.4;
}
.left-box p{
    font-size:14px;
    line-height:1.7;
}
.right-image{
    border-radius:6px;
     width:100%;
}
.right-image img{
    width:100%;
    padding:18px !important;
}
}
/* Small Mobile */
@media (max-width:400px){
.left-box h2{
    font-size:20px;
}
.left-box p{
    font-size:13px;
}
.right-image img{
    padding:12px !important;
}
}
/*====================================3ed====================================*/

.industrial {
  padding: 80px 0;
  background-color:#E3E5E8;
}

.container {
  max-width: 1200px;
  margin: auto;
}

h2 {
  /*font-size: 32px;
  font-weight: 300;*/
  color: #1B6DA7;
  margin-bottom: 50px;
font-weight: 200;
font-style: Thin;
font-size: 40px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;

}

/* Cards layout */
.card-wrapper {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  background:#E3E5E8;
}

/* Card */
.card {
  width: 270px;
  border-radius:0px;
  background-color:transparent;
border:none;
}
        /*.card:hover
        {
            transform: translateY(-5px) scale(1.005) translateZ(0);
  box-shadow: 0 24px 36px rgba(0,0,0,0.11),
    0 24px 46px var(--box-shadow-color);
        }*/
.card img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  padding:0;
   /*border-radius:20px 20px 0px 0px;*/
}
        .card .Con
        {
              padding:0px;
        }
/* Title */
.card h3 {
    font-size:1.17rem;
font-weight:300;
font-style: Thin;
leading-trim: NONE;
line-height: 1.05;
letter-spacing: 0%;
  color: #005aff;
  margin: 15px 0 10px;
height:35px;
}

/* Text */
.card p {
font-style: Thin;
font-size: 14px;
leading-trim: NONE;
line-height: 17px;
letter-spacing: 0%;
height:100px;
  color: #1f3144;
  line-height: 1.4;
  margin-bottom: 20px;

}

/* Explore link */
.explore {
  display: flex;
  align-items: center;
  text-decoration: none;
font-weight: 300;
font-style: Light;
font-size: 12px;
leading-trim: NONE;
line-height: 22px;
letter-spacing: 0%;
color:#000000;
  gap: 20px;
  position:relative;

}

/* Circle arrow */
.circle {
  width: 40px;
  height: 40px;
  border: 1px solid #1B6DA7;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #2b6ea6;
  font-size: 14px;
  transition: 0.3s;  
  overflow:hidden;
}

.explore:hover{
       color:#1B6DA7;
}

.explore:hover .circle{
   border: 1px solid #000;
   }

.explore:hover .circle i{   
    color:#000;
}
.circle::before{
 content:"";
    position:absolute;
    top:-6px;
    left:-6px;
    width:50px;
    height:50px;
    border-radius:50%;

    border-color:red;
    /*border-top:1px solid #1B6DA7;
    border-right:1px solid #1B6DA7;*/

    opacity:0;
    background: conic-gradient(#75c0f7 0deg 80deg,transparent 80deg 120deg, #75c0f7 120deg 200deg,transparent 200deg 240deg,#75c0f7 240deg 320deg,transparent 320deg 360deg);

    /* thickness */
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 1px), #000 0);
    mask: radial-gradient(farthest-side,transparent calc(100% - 1px), #000 0);
}

.explore:hover .circle::before{
    opacity:1;
    animation:spin 3s linear infinite;
}

@keyframes spin{
 from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
/* Large Tablet */
@media (max-width:1024px){

.container{
    width:100%;
    max-width:100%;
    padding:0 20px;
    box-sizing:border-box;
    margin:0 auto;
}

.industrial{
    padding:60px 0;
}

.card-wrapper{
    display:flex;
    flex-wrap:wrap;
    gap:25px;
}

.card{
    width:calc(50% - 13px);
}

.card img{
    width:100%;
    height:220px;
}

h2{
    font-size:34px;
    margin-bottom:35px;
}

.card h3{
    font-size:24px;
    height:auto;
}

.card p{
    height:auto;
    min-height:80px;
}

}


/* Mobile */
@media (max-width:768px){

.container{
    width:100%;
    padding:0 15px;
    margin:0 auto;
    box-sizing:border-box;
}

.industrial{
    padding:45px 0;
}

h2{
    font-size:28px;
    line-height:1.3;
    margin-bottom:30px;
    text-align:center;
}

.card-wrapper{
    display:flex;
    flex-direction:column;
    gap:30px;
}

.card{
    width:100%;
}

.card img{
    width:100%;
    height:auto;
    aspect-ratio:16/9;
    object-fit:cover;
}

.card .Con{
    padding:15px 0;
}

.card h3{
    font-size:22px;
    height:auto;
    margin-bottom:10px;
}

.card p{
    font-size:15px;
    line-height:1.7;
    height:auto;
    margin-bottom:18px;
}

.explore{
    gap:15px;
    font-size:14px;
}

.circle{
    width:38px;
    height:38px;
}

}


/* Small Mobile */
@media (max-width:480px){

.container{
    padding:0 12px;
    margin:0 auto;
}

h2{
    font-size:24px;
}

.card{
    border-radius:0;
}

.card img{
    aspect-ratio:4/3;
}

.card h3{
    font-size:20px;
     padding:0 20px;
}

.card p{
    font-size:14px;
    padding:0 20px;
}

.explore{
    font-size:13px;
     padding:0 20px;
}

.circle{
    width:34px;
    height:34px;
    font-size:12px;
}

}
/*================================4th ============================================*/


.backbone {
  padding: 80px 0;
  background:#ffffff;
}

.containerBB {
  width: 1200px;
  margin: auto;
}

/* Layout */
.rowBB {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 60px;
}

/* LEFT CONTENT */
.contentBB {
  width: 50%;
}

h1,h2,h3,h4,h5,h6{
    font-weight: 500;
}

.contentBB h2 {
  font-size: 28px;
  font-weight: 500;
  font-style:normal;
  color: #1B6DA7;
  margin-bottom: 20px;
}

.contentBB p {
  font-size: 14px;
  color: #6b6b6b;
  line-height: 1.8;
  margin-bottom: 15px;
  text-align:justify;
}

/* BUTTON */
.exploreBB {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
  text-decoration: none;
  color: #000;
  font-size: 14px;
}

/* CIRCLE */
.circleBB {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #2b6ea6;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  transition: 0.3s;
  position:relative;
}
.exploreBB:hover{
       color:#1B6DA7;
}

.exploreBB:hover .circleBB{
  background:#000;
   }

.exploreBB:hover .circleBB i{   
    color:#000;
}
.circleBB::before{
 content:"";
    position:absolute;
    top:-6px;
    left:-6px;
    width:45px;
    height:45px;
    border-radius:50%;
    border-color:red;
    opacity:0;
    background: conic-gradient(#75c0f7 0deg 80deg,transparent 80deg 120deg, #75c0f7 120deg 200deg,transparent 200deg 240deg,#75c0f7 240deg 320deg,transparent 320deg 360deg);

    /* thickness */
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 1px), #000 0);
    mask: radial-gradient(farthest-side,transparent calc(100% - 1px), #000 0);
}

.exploreBB:hover .circleBB::before{
    opacity:1;
    animation:spin 3s linear infinite;
}
/* RIGHT IMAGE */
.image {
  width: 50%;
}

.image img {
  width: 100%;
  height: 320px;
  object-fit: cover;
  border-radius: 4px;
}
/* Laptop / Tablet */
@media (max-width:1024px){

.containerBB{
    width:100%;
    max-width:100%;
    padding:0 20px;
    margin:0 auto;
    box-sizing:border-box;
}

.backbone{
    padding:60px 0;
}

.rowBB{
    gap:40px;
}

.contentBB,
.image{
    width:50%;
}

.contentBB h2{
    font-size:32px;
}

.contentBB p{
    font-size:15px;
}

.image img{
    width:100%;
    height:280px;
    object-fit:cover;
}

}


/* Mobile */
@media (max-width:768px){

.containerBB{
    width:100%;
    max-width:100%;
    padding:0 15px;
    margin:0 auto;
    box-sizing:border-box;
}

.backbone{
    padding:45px 0;
}

.rowBB{
    display:flex;
    flex-direction:column;
    gap:30px;
}

.image,
.contentBB{
    width:100%;
    max-width:100%;
}

.image{
    order:1;
}

.contentBB{
    order:2;
}

.image img{
    width:100%;
    height:auto;
    aspect-ratio:16/9;
    object-fit:cover;
    display:block;
}

.contentBB h2{
    font-size:28px;
    line-height:1.3;
    margin-bottom:18px;
}

.contentBB p{
    font-size:15px;
    line-height:1.8;
    text-align:left;
}

.exploreBB{
    margin-top:20px;
    font-size:14px;
    gap:12px;
}

.circleBB{
    width:38px;
    height:38px;
    font-size:16px;
}

}


/* Small Mobile */
@media (max-width:480px){

.containerBB{
    padding:0 12px;
}

.backbone{
    padding:35px 0;
}

.contentBB h2{
    font-size:24px;
}

.contentBB p{
    font-size:14px;
    line-height:1.7;
}

.image img{
    aspect-ratio:4/3;
}

.exploreBB{
    font-size:13px;
}

.circleBB{
    width:34px;
    height:34px;
    font-size:14px;
}

}
/*=============================News===============================*/

.news-sectionN {
  background: #ffffff;
  padding: 0 20px;

}

.containerN {
  max-width: 1200px;
  margin: auto;
}

/* Header */
.news-headerN {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 40px;
  flex-wrap: wrap;
 padding:20px 40px;

}

.titleN {
     align-items: center;
      font-size: 28px;     
  color: #2a6fb5;

}

/* See all */
.see-allN {
  display: flex;
  align-items:left;
  gap: 10px;
  padding:0;
  justify-content: space-between;
  align-items: center;
}

.circleN {
  width: 35px;
  height: 35px;
  border: 1px solid #2a6fb5;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #2a6fb5;
  font-size: 16px;
  position:relative;
  padding:0;
 align-items:top;
}
#moreNews{
    display:none;
}

.see-allN :hover{
       color:#1B6DA7;
}

.see-allN:hover .circleN{
   border: 1px solid #000;
   }

.see-allN:hover .circleN i{   
    color:#000;
}
.circleN::before{
 content:"";
    position:absolute;
    top:-6px;
    left:-6px;
    width:45px;
    height:45px;
    border-radius:50%;
    border-color:red;
    opacity:0;
    background: conic-gradient(#75c0f7 0deg 80deg,transparent 80deg 120deg, #75c0f7 120deg 200deg,transparent 200deg 240deg,#75c0f7 240deg 320deg,transparent 320deg 360deg);

    /* thickness */
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 1px), #000 0);
    mask: radial-gradient(farthest-side,transparent calc(100% - 1px), #000 0);
}

.see-allN:hover .circleN::before{
    opacity:1;
    animation:spin 3s linear infinite;
}
.see-allN a{
  text-decoration: none;
  color: #666;
  font-size: 14px;
  text-align:center;
  vertical-align:middle;
}

/* Cards */
.news-cardsN {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  padding-bottom:80px;
}
        .cardN:hover
        {
            background:#cfcfcf;
        }
.cardN {
  background: #fff;
  padding: 20px; 
  border: 1px solid #ddd;
  transition: 0.3s;

}

/*.cardN:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
}*/

.tagN {

font-weight: 300;
font-style: Light;
font-size: 16px;
leading-trim: NONE;
line-height: 22px;
letter-spacing: 0%;

  color: #1B6DA7;
  margin-bottom: 8px;
  display: block;
}

.cardN h3 {
height:90px;
font-weight: 500;
font-style: Thin;
font-size: 28px;
leading-trim: NONE;
line-height: 30px;
letter-spacing: 0%;

  margin-bottom: 10px;
  color: #333;
}

.cardN p {
font-weight: 200;
font-size: 16px;
leading-trim: NONE;
line-height: 22px;
letter-spacing: 0%;
 height:100px;

  color: #000000;
 


}
/* ---------- Tablet (1024px) ---------- */
@media (max-width:1024px){

.news-sectionN{
    padding:0 20px;
}

.containerN{
    max-width:100%;
}

.news-headerN{
    padding:20px 0;
    margin-bottom:30px;
}

.titleN{
    font-size:32px;
}

.news-cardsN{
    grid-template-columns:repeat(2,1fr);
    gap:25px;
    padding-bottom:60px;
}

.cardN{
    padding:20px;
}

.cardN h3{
    font-size:24px;
    line-height:1.3;
}

.cardN p{
    font-size:15px;
    height:auto;
    min-height:90px;
}

}


/* ---------- Mobile (768px) ---------- */
@media (max-width:768px){

.news-sectionN{
    padding:0 15px;
}

.containerN{
    width:100%;
}

.news-headerN{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:18px;
    padding:20px 0;
    margin-bottom:25px;
}

.titleN{
    font-size:28px;
    line-height:1.3;
}

.see-allN{
    width:100%;
    justify-content:flex-start;
    gap:12px;
}

.news-cardsN{
    grid-template-columns:1fr;
    gap:20px;
    padding-bottom:40px;
}

.cardN{
    width:100%;
    padding:18px;
    box-sizing:border-box;
}

.tagN{
    font-size:15px;
}

.cardN h3{
    font-size:22px;
    line-height:1.3;
}

.cardN p{
    font-size:15px;
    line-height:1.7;
    height:auto;
    min-height:auto;
}

.circleN{
    width:38px;
    height:38px;
}

}


    /*===========================report===============*/
    .report-sectionR {
  background: #efefef;
  padding: 80px 0px;
}

.containerR {
  max-width: 1200px;
  margin: auto;
}

/* Layout */
.report-wrapperR {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 50px;
}

/* Left Content */
.report-contentR {
  flex: 1;
}

.report-contentR h2 {

font-weight: 200;
font-style: Thin;
font-size: 48px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;

  color: #1B6DA7;
  line-height: 1.3;
  margin-bottom: 25px;
}
.report-btnR{
    display:inline-flex;
    align-items:center;
    gap:12px;
    padding:14px 0px;
    /*background:#fff;*/
    color:#111;
    border-radius:50px;
    text-decoration:none;
    /*position:relative;*/
    overflow:hidden;
    transition:all .45s ease;
}

.circleR{
    width:35px;
    height:35px;
    border-radius:50%;
    background:#1c1fc6;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    transition:all .45s ease;
    position:relative;
}
.circleR::before{
 content:"";
    position:absolute;
    top:-6px;
    left:-6px;
    width:45px;
    height:45px;
    border-radius:50%;
    border-color:red;
    opacity:0;
    background: conic-gradient(#75c0f7 0deg 80deg,transparent 80deg 120deg, #75c0f7 120deg 200deg,transparent 200deg 240deg,#75c0f7 240deg 320deg,transparent 320deg 360deg);

    /* thickness */
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 1px), #000 0);
    mask: radial-gradient(farthest-side,transparent calc(100% - 1px), #000 0);
}

.report-btnR:hover .circleR::before{
    opacity:1;
    animation:spin 3s linear infinite;
}
.report-btnR:hover{
       color:#1B6DA7;
}

.report-btnR:hover .circleR{
    background:#000;
   }

.report-btnR:hover .circleR img{
   
    color:#fff;
}

.report-imageR {
  flex: 2;
}

.report-imageR img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
}

@media (max-width: 992px) {
  .report-wrapperR {
    flex-direction: column;
    text-align: center;
  }

  .report-contentR h2 {
    font-size: 32px;
  }

  .report-btnR {
    justify-content: center;
  }
}


@media (max-width: 600px) {
  .report-sectionR {
    padding: 50px 15px;
  }

  .report-contentR h2 {
    font-size: 26px;
  }

  .circleR {
    width: 32px;
    height: 32px;
  }
}
    /*=========================core================*/
    .core-sectors {
  background: #ffffff;
  padding: 30px 20px;
}

.core-container {
  max-width: 1200px;
  margin: auto;
  padding:30px;
  background: #ffffff;
}

.core-title {

font-weight: 200;
font-style: Thin;
font-size: 40px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;

  color: #1B6DA7;
  margin-bottom: 25px;
  font-weight: 500;
}

.core-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px;
  padding: 30px 0;
}
.core-item  {
  margin:auto;    
text-align:center;
vertical-align:middle;
}
.core-item img {
  width: 180px;
  height: 180px;

}

.core-item p {

font-weight: 500;
font-size: 32px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
  color: #000000;
  text-align:justify;
}

/* ✅ Tablet */
@media (max-width: 992px) {
  .core-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
  }
}

/* ✅ Mobile */
@media (max-width: 576px) {
  .core-grid {
    grid-template-columns: 1fr;
    gap: 25px;
  }

  .core-title {
    font-size: 20px;
  }
}
    /*======================sustainability==============*/
.sustainability {
  background: #1f6f66;
  padding: 0px 20px;

  color: #fff;
}
.sustain-title {
     max-width: 1200px;
  margin: auto;

font-weight: 200;
font-style: Thin;
font-size: 48px;
leading-trim: NONE;
line-height: 100%;
letter-spacing: 0%;
color:#ffffff;

}
.sustainability-container {
  max-width: 1200px;
  margin: auto;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 50px;
  align-items: center;
}

/* LEFT SIDE */


.sustain-text {
  font-size: 14px;
  line-height: 1.7;
  color: #d6ebe7;
  margin-bottom: 15px;
}

/* LINKS */
.sustain-links {
  margin-top: 25px;
}

.s-link {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #d6ebe7;
  text-decoration: none;
  margin-bottom: 14px;
  font-size: 14px;
  transition: 0.3s;
}

.s-link:hover {
  color: #fff;
}

/* CIRCLE ICON */
.circleSt {
  width: 35px;
  height: 35px;
  border: 1px solid #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: 0.3s;
  position:relative;
}
.circleSt::before{
 content:"";
    position:absolute;
    top:-6px;
    left:-6px;
    width:45px;
    height:45px;
    border-radius:50%;
    border-color:red;
    opacity:0;
    background: conic-gradient(#75c0f7 0deg 80deg,transparent 80deg 120deg, #75c0f7 120deg 200deg,transparent 200deg 240deg,#75c0f7 240deg 320deg,transparent 320deg 360deg);

    /* thickness */
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 1px), #000 0);
    mask: radial-gradient(farthest-side,transparent calc(100% - 1px), #000 0);
}

.s-link:hover .circleSt::before{
    opacity:1;
    animation:spin 3s linear infinite;
}
.s-link:hover .circleSt {
  border:1px solid #fff;
  color: #1f6f66;

}

/* RIGHT IMAGE */
.sustain-right img {
  width: 100%;
  height: auto;
  display: block;
}

/* ✅ Tablet */
@media (max-width: 992px) {
  .sustainability-container {
    grid-template-columns: 1fr;
  }

  .sustain-title {
    font-size: 32px;
  }
}

/* ✅ Mobile */
@media (max-width: 576px) {
  .sustain-title {
    font-size: 26px;
  }

  .sustain-text {
    font-size: 13px;
  }

  .circle {
    width: 28px;
    height: 28px;
  }
}
    /*=======================purpose======================*/
.purpose-section {
  background: #ffffff;
  padding: 30px 20px;
}

/* CONTAINER */
.purpose-container {
  max-width: 1200px;
  margin: 0px auto;
  display: grid;
  grid-template-columns: 0.75fr 1.25fr;
  gap: 20px;
  align-items: top;
}

/* LEFT BOX */
.purpose-left {
  padding: 20px;
  background: #ffffff;
  transition: 0.3s ease;
}

.purpose-left:hover {
  box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

/* TITLE */
.purpose-title {
  font-size: 34px;
  font-weight: 500;
  line-height: 1.25;
  color: #2b2b2b;
  margin-bottom: 20px;
}

/* TEXT */
.purpose-text {
  font-size: 14.5px;
  line-height: 1.75;
  color: #555;
  margin-bottom: 28px;
}

/* BUTTON */
.purpose-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: #000;
  font-weight: 600;
  font-size: 15px;
}

/* ICON */
.btn-icon {
  width: 34px;
  height: 34px;
  background: #2f6fb2;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position:relative;
}
.btn-icon::before{
 content:"";
    position:absolute;
    top:-6px;
    left:-6px;
    width:45px;
    height:45px;
    border-radius:50%;
    border-color:red;
    opacity:0;
    background: conic-gradient(#75c0f7 0deg 80deg,transparent 80deg 120deg, #75c0f7 120deg 200deg,transparent 200deg 240deg,#75c0f7 240deg 320deg,transparent 320deg 360deg);

    /* thickness */
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 1px), #000 0);
    mask: radial-gradient(farthest-side,transparent calc(100% - 1px), #000 0);
}

.purpose-btn:hover .btn-icon::before{
    opacity:1;
    animation:spin 3s linear infinite;
}
/* HOVER EFFECT */
.purpose-btn:hover .btn-icon {
  background: #000;
}

.purpose-btn:hover {
  color: #1d5aa0;
}

/* RIGHT IMAGE */
.purpose-right {
  padding: 12px;
  overflow: hidden;
   position: relative;

}

/* IMAGE */
.purpose-right img {
  width: 100%;
  height: auto;
  display: block;
  
}
.mmt-svg{
    position:absolute;
    top:20px;
    left:50%;
    transform:translateX(-50%);
    width:180px;
    z-index:10;
}
/* IMAGE HOVER ZOOM */
.purpose-right:hover img {
  transform: scale(1.05);
}

@media (max-width: 992px) {
  .purpose-container {
    grid-template-columns: 1fr;
  }

  .purpose-title {
      text-align:center;
    font-size: 28px;
    font-weight:500;
  }
}


@media (max-width: 576px) {
  .purpose-left {
      
    padding: 25px;
  }

  .purpose-title {
      text-align:left;
     font-size: 22px;
        line-height: 1.4;
  }

  .purpose-text {
    font-size: 13px;
  }

  .btn-icon {
    width: 30px;
    height: 30px;
  }
}
    /*=======================brand====================*/
    .brand-section {
  background: #ffffff;
  padding: 30px 20px;
    overflow:hidden;
}

.brand-container {
  max-width: 1200px;
  margin: auto;
  overflow: hidden;
}

/* FLEX ROW */
.brand-track {
     display: flex;
    align-items: center;
    gap: 40px;
    width: max-content;
    flex-wrap: nowrap;      /* wrap hatao */
    animation: scrollBrands 20s linear infinite;
}

/* LOGO */
.brand-item {
   flex: 0 0 auto;
  min-width: 150px;
  text-align: center;
}

.brand-item img {
  max-width: 150px;
  height: auto;
  opacity: 1;
  transition: 0.3s;
  flex-shrink:0;
}

/* HOVER EFFECT */
.brand-item img:hover {
  opacity: 1;
  transform: scale(1.05);
}

/* ✅ Tablet */
@media (max-width: 992px) {
  .brand-track {
    justify-content: center;
    gap: 30px;
  }
}

/* ✅ Mobile */
@media (max-width: 576px) {
  .brand-track {
    gap: 20px;
  }

  .brand-item img {
    max-width: 90px;
  }
}

@keyframes scrollBrands {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}
  /*====================newsletter=====================*/
  .newsletter {
  background: #ffffff;
  padding: 70px 20px;
}

.newsletter-container {
  max-width: 1200px;
  margin: auto;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 50px;
  align-items: center;
}

/* LEFT IMAGE */
.newsletter-left img {
  width: 100%;
  height: auto;
  display: block;
}

/* RIGHT CONTENT */
.newsletter-title {
  font-size: 32px;
  font-weight: 500;
  margin-bottom: 15px;
  color: #333;
}

.newsletter-text {
  font-size: 14px;
  color: #666;
  line-height: 1.7;
  margin-bottom: 25px;
}

/* FORM */
.newsletter-form {
  width: 100%;
}

.form-group {
  margin-bottom: 15px;
}

.form-group label {
  display: block;
  font-size: 12px;
  color: #555;
  margin-bottom: 6px;
}

.form-group label span {
  color: red;
}

/* INPUT */
.form-group input {
  width: 100%;
  height: 40px;
  border: 1px solid #cfcfcf;
  padding: 0 10px;
  font-size: 14px;
  outline: none;
  background: #fff;
}

/* INPUT FOCUS */
.form-group input:focus {
  border-color: #2f6fb2;
}

/* CHECKBOX */
.form-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 10px;
  font-size: 12px;
  color: #555;
}

.form-check input {
  margin-top: 3px;
}

/* BUTTON */
.submit-btn {
  margin-top: 20px;
  background: #2f6fb2;
  color: #fff;
  border: none;
  padding: 10px 22px;
  border-radius: 20px;
  cursor: pointer;
  font-size: 13px;
  transition: 0.3s;
}

.submit-btn:hover {
  background: #1d5aa0;
}

/* ✅ Tablet */
@media (max-width: 992px) {
  .newsletter-container {
    grid-template-columns: 1fr;
  }

  .newsletter-title {
    font-size: 26px;
  }
}

@media (max-width: 576px) {
  .newsletter {
    padding: 50px 15px;
  }

  .newsletter-title {
    font-size: 22px;
  }

  .newsletter-text {
    font-size: 13px;
  }
}
    /*======================vestas==============*/
    /* SECTION BASE */
.vestas-section {
  width: 100%;
  background: #ffffff;
}

/* CONTAINER */
.vestas-container {
  max-width: 1200px;
  margin: auto;
  padding: 60px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 100px;
}

/* LEFT SIDE */
.vestas-left {
  flex: 1;
}

.vestas-tag {
  font-size: 14px;
  color: #666;
  display: block;
  margin-bottom: 10px;
}

.vestas-left h2 {
  font-size: 42px;
  font-weight: 400;
  color: #222;
}

/* RIGHT SIDE */
.vestas-right {
  flex: 1.2;
  padding-left: 150px;
  margin-left:200px;
}

.vestas-right p {
  font-size: 15px;
  color: #555;
  line-height: 1.6;
  margin-bottom: 20px;
  text-align:justify;
}

/* BUTTON */
.vestas-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  color: #1b4f72;
}

.vestas-btn .arrow {
  width: 35px;
  height: 35px;
  /*background: #2c6fa3;*/
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 16px;
}

/* IMAGE SECTION */
.vestas-image {
  width: 100%;
  height: 550px;
  background: url('image/chiller-img-footer.png') center/cover no-repeat;
  margin-bottom:60px;
}

/* RESPONSIVE */
@media (max-width: 992px) {
  .vestas-container {
    flex-direction: column;
    text-align: center;
  }

  .vestas-left h2 {
    font-size: 32px;
  }

  .vestas-right {
    max-width: 600px;
  }

  .vestas-btn {
    justify-content: center;
  }
}

@media (max-width: 576px) {
  .vestas-left h2 {
    font-size: 26px;
  }

  .vestas-image {
    height: 250px;
  }
}
/*===========================footer================================*/
.vestas-footer {

  color: #ffffff;
  background: #24384a;
  /*width:1340px;
  margin:auto;*/
}

/* TOP BAR */
.footer-top {
  background: #ffffff;
  color: #333;
  text-align: center;
  vertical-align:central;
  padding: 10px;
  font-size: 14px;

}

.footer-top .social-icons {
  margin-top: 5px;
}

.footer-top i {
  margin: 0 5px;
  cursor: pointer;
}

/* MAIN FOOTER */
.footer-main {
  display: flex;
  flex-wrap: wrap;
  background: #24384a;   
  width:100%;
}
        .footerSec
        {
               display:grid;
    grid-template-columns:2fr 1fr 1fr 1fr;
    gap:40px;
    width:78%;
    padding:40px;
            }
        .colbox
        {

   margin:auto;
   gap: 10px;
        }
.footer-col,
.company
{
    width: 100%;
    padding: 0;
      
}
a,
a:link,
a:visited,
a:hover,
a:active {
    text-decoration: none;
}
.footer-col h4 {
font-weight: 400;
font-style: bold;
font-size: 16px;
leading-trim: NONE;
line-height: 0px;
letter-spacing: 0%;
  margin-bottom: 20px;
  color: #fff;
  padding-top:50px;

}

.footer-col ul {
  list-style: none;
  padding: 0;
}

.footer-col li a{
text-decoration:none;
font-weight: 400;
font-size: 16px;
leading-trim: NONE;
line-height: 22px;
letter-spacing: 0%;
 opacity:20;
  color: #fff;
}

.company h3 {
    line-height:25px;
  font-size: 1.5rem;
  margin-bottom: 10px;
  text-align:left;
}

.company span {
  font-weight: 300;
}

.company p {

font-weight:lighter;
font-style: normal;
font-size: 12px;
leading-trim: NONE;
line-height: 22px;
letter-spacing: 0%;
  color: rgba(255, 255, 255, 1);
}

/* BUTTON */
.contact-btn,
.report-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 15px;
  color: #fff;
  text-decoration: none;
  font-size: 14px;


}

        .contact-btn span
        {
 
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  border:1px solid #2c6fa3;
  justify-content: center;
  border-radius: 50%;
        }
.report-btn span {
    background:#1B6DA7;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  border:1px solid #2c6fa3;
  justify-content: center;
  border-radius: 50%;
}

/* PRICE BOX */
.footer-price {
    flex:1; 
    width:30%;   
 padding:40px;
  background:#37424A;
  /*padding: 30px;*/
  margin:0;
  /*min-width: 250px;*/
  
}

.footer-price .label {

font-weight: 200;
font-style: Thin;
font-size: 16px;
leading-trim: NONE;
line-height: 22px;
letter-spacing: 0%;

  font-size: 12px;
  color: #aaa;
}

.footer-price h2 {

font-weight: 600;
font-style: Semibold;
font-size: 48px;
leading-trim: NONE;
line-height: 22px;
letter-spacing: 0%;
  margin: 10px 0;
  color:#fff;
}

.footer-price span {

font-weight:lighter;

font-size: 11px;
leading-trim: NONE;
line-height: 22px;
letter-spacing: 0%;
  color: #aaa;
}

/* BOTTOM */
.footer-bottom {
  background: #1b2b38;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  font-size: 13px;
  flex-wrap: wrap;
}

.bottom-links span {
  margin: 0 10px;
}

.tagline {
  font-weight: 600;
}
/* ==========================
   Responsive Footer
========================== */

@media (max-width:991px){

.footer-main{
    flex-direction:column;
}

/* Left Section */
.footerSec{
    width:100%;
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:30px;
    padding:30px 20px;
    box-sizing:border-box;
    margin:auto;
}

/* Company, Contact, Product, Quick Link */
.footer-col,
.company{
    width:100%;
    padding:0;
    margin:0;
}

.footer-col h4{
    padding-top:0;
    margin-bottom:15px;
    line-height:1.4;
}

.footer-col ul{
    margin:0;
    padding:0;
}

.footer-col li{
    margin-bottom:8px;
    list-style:none;
}

.company h3{
    font-size:22px;
}

.company p{
    line-height:24px;
}

/* Right Box */
.footer-price{
    width:100%;
    padding:30px 20px;
    box-sizing:border-box;
}

.footer-price h2{
    font-size:32px;
}

/* Bottom */
.footer-bottom{
    flex-direction:column;
    justify-content:center;
    text-align:center;
    gap:10px;
}

}


/* Mobile */

@media (max-width:576px){

.footerSec{
    margin:auto;
    grid-template-columns:repeat(2,1fr);
    gap:20px;
    padding:20px 15px;
}

.company h3{
    font-size:18px;
}

.company p,
.footer-col li,
.footer-col li a{
    font-size:13px;
}

.footer-col h4{
    font-size:15px;
}

.footer-price{
    padding:25px 15px;
}

.footer-top p{
    font-size:13px;
}

}
.bi{
    font-size:30px;
    color:#fff;
    display:flex;
}
/*==========================================who we are==============================*/

.vision-section{
    width:100%;
    padding:90px 0;
    background:#fff;
}

.vision-container{
    width:100%;
    max-width:1280px;
    margin:auto;
    padding:0 20px;
    display:grid;
    grid-template-columns:35% 65%;
    /*column-gap:30px;*/
}

/* LEFT */

.vision-left h2{
    font-size:2rem;
    font-weight:300;
    line-height:1.25;
    letter-spacing:-2px;
    color:#222;
}

.vision-left span{
    display:block;
    color:#156DFF;
}

/* RIGHT */

.vision-right{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:40px;

}

.vision-col p{
    /*margin:0 0 34px;*/
    font-size:14px;
    line-height:1.50;
    color:#2f3d4d;
    font-weight:300;
    text-align:left;
        text-align:justify;
}

.vision-col p:last-child{
    margin-bottom:0;
}

/*=========================
LAPTOP
==========================*/

@media(max-width:1200px){

.vision-container{

grid-template-columns:35% 65%;

column-gap:60px;

}

.vision-left h2{

font-size:48px;

}

.vision-col p{

font-size:18px;

}

}

/*=========================
TABLET
==========================*/

@media(max-width:991px){

.vision-container{

grid-template-columns:1fr;

row-gap:60px;

}

.vision-right{

grid-template-columns:1fr 1fr;

gap:40px;

}

.vision-left h2{

font-size:42px;
max-width:550px;

}

}

/*=========================
MOBILE
==========================*/

@media(max-width:767px){

.vision-section{

padding:70px 0;

}

.vision-container{

padding:0 24px;

}

.vision-right{

grid-template-columns:1fr;

gap:20px;

}

.vision-left h2{

font-size:34px;
letter-spacing:-0.8px;

}

.vision-col p{

font-size:16px;
line-height:1.8;

}

}
        /*========================================*/
        /*=========================
 MMT Distributor SECTION
==========================*/

.vs-business{

    position:relative;
    width:100%;
    min-height:700px;
    background:url(image/HI2.png) center center/cover no-repeat;
    display:flex;
    align-items:center;
    overflow:hidden;

}

/* Dark Overlay */

.vs-overlay{

    position:absolute;
    inset:0;

    background:rgba(0,0,0,.22);

}


/* Container */

.vs-container{
    position:relative;
    z-index:2;
    /*width:90%;
    max-width:1180px;*/
    padding:0 100px;
    margin:auto;
    display:grid;
    grid-template-columns:1fr 1fr 1fr;
    gap:44px;

}
/* Card */

.vs-card{

    text-decoration:none;
    color:#fff;

    padding:50px 30px;
    display:flex;
    flex-direction:column;

    justify-content:space-between;

    background:rgba(70,83,97,.58);

    backdrop-filter:blur(14px);

    -webkit-backdrop-filter:blur(14px);

    transition:.45s;

}
.vs-card:hover{

    background:rgba(58,70,84,.78);

    transform:translateY(-10px);

}
/* Top */

.vs-top{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
}
.vs-top p{
    font-size:17px;
    font-weight:300;
    line-height:1.6;
    color:#fff;
}
.vs-top span{
    font-size:30px;
 font-weight:300;
 margin-left:85px;
 line-height:1.6;
 text-align:match-parent;
    transition:.35s;
}
.vs-card:hover span{
    transform:translateX(8px);
}
.vs-card h2{
    /*margin:35px 0;*/
    font-weight:100;
    font-size:45px;
    line-height:1.05;
    letter-spacing:2px;
}
.vs-line{
    width:100%;
    height:1px;
    background:rgba(255,255,255,.75);
}
/*=======================================================================================================================*/
/*=============================
 Sustainable Energy Section
=============================*/

.ses-section{
    width:100%;
    background:#fff;
    padding:75px 0 100px;
    /*font-family:"Helvetica Neue",Arial,sans-serif;*/
}

.ses-container{
    width:100%;
    max-width:1260px;
    margin:auto;
    padding:0 15px;
    box-sizing:border-box;
}

/*====================
Top
=====================*/

.ses-top{
    display:grid;
    grid-template-columns:420px 1fr;
    gap:50px;
    align-items:start;
}

.ses-left h2{
    font-size:2rem;
    font-weight:100;
    line-height:1.06;
    color:#18324a;
    letter-spacing:1px;
}

.ses-right p{

    /*margin:0 0 28px;*/

    font-size:14px;
    line-height:1.50;
    font-weight:100;
    color:#23384d;
    text-align:justify;
}

.ses-right p:last-child{
    margin-bottom:0;
}

/*==================
Bottom
===================*/

.ses-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:40px;
    margin-top:80px;

}

.ses-item h3{
  font-size:1.5rem;
    font-weight:100;
    line-height:1.06;
    color:#18324a;
    letter-spacing:1px;
    margin-bottom:2px;
}

.ses-item p{
    font-size:14px;
    line-height:1.50;
    font-weight:100;
    color:#23384d;
    text-align:justify;
}

/*=========================
Laptop
==========================*/

@media(max-width:1200px){

.ses-top{

grid-template-columns:280px 1fr;

gap:70px;

}

.ses-left h2{

font-size:48px;

}

.ses-item h3{

font-size:30px;

}

.ses-right p,
.ses-item p{

font-size:18px;

}

}

/*=====================
Tablet
======================*/

@media(max-width:991px){

.ses-top{

grid-template-columns:1fr;

gap:45px;

}

.ses-grid{

grid-template-columns:1fr;

gap:60px;

margin-top:70px;

}

.ses-left h2{

font-size:44px;

max-width:500px;

}

}

/*=====================
Mobile
======================*/

@media(max-width:767px){

.ses-section{

padding:70px 0;

}

.ses-container{

padding:0 22px;

}

.ses-left h2{

font-size:34px;

line-height:1.1;

}

.ses-item h3{

font-size:28px;

}

.ses-right p,
.ses-item p{

font-size:17px;

line-height:1.75;

}

.ses-grid{

gap:45px;

margin-top:55px;

}

}
        /*===============================================================================================================*/
.vestas-sustainability{

    width:100%;
    background:#fff;
    overflow:hidden;
}

.vs-wrapper{

    display:flex;
    height:300px;
}
.vs-content{

    width:50%;
    background:#ffffff;
    display:flex;
    justify-content:center;
    align-items:center;
    padding:100px 70px;
    box-sizing:border-box;
}

.vs-inner{

    width:100%;
    max-width:620px;
}

.vs-columns{

    display:grid;
    grid-template-columns:1fr 1fr;
    gap:55px;
}

.vs-col p{
 font-size:14px;
    line-height:1.50;
    font-weight:100;
    color:#23384d;
    text-align:justify;
}

.exploreBB {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
  text-decoration: none;
  color: #000;
  font-size: 14px;
}

/* CIRCLE */
.circleBB {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #2b6ea6;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  transition: 0.3s;
  position:relative;
}
.exploreBB:hover{
       color:#1B6DA7;
}

.exploreBB:hover .circleBB{
  background:#000;
   }

.exploreBB:hover .circleBB i{   
    color:#000;
}
.circleBB::before{
 content:"";
    position:absolute;
    top:-6px;
    left:-6px;
    width:45px;
    height:45px;
    border-radius:50%;
    border-color:red;
    opacity:0;
    background: conic-gradient(#75c0f7 0deg 80deg,transparent 80deg 120deg, #75c0f7 120deg 200deg,transparent 200deg 240deg,#75c0f7 240deg 320deg,transparent 320deg 360deg);

    /* thickness */
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 1px), #000 0);
    mask: radial-gradient(farthest-side,transparent calc(100% - 1px), #000 0);
}

.exploreBB:hover .circleBB::before{
    opacity:1;
    animation:spin 3s linear infinite;
}
@keyframes spin{
 from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
.vs-image{

     width: 50%;
   background: #F7F7F7;
   /*overflow: hidden;*/
   justify-content:center;
   align-items:center;
}

.vs-image img{
    /*height:250px;*/
  width: 100%;    
    border-radius: 6px;
    object-fit: cover;
    animation: zoomShrink 3s ease-in-out forwards;
}
  @keyframes zoomShrink
        {
            0%
            {
               padding:0px; transform: scale(1.2); /* Start big */
            }

            100%
            {
                padding:30px;transform: scale(1); /* End small */
            }
        }
/*=========================
Large Laptop
=========================*/

@media(max-width:1400px){

.vs-wrapper{

min-height:680px;

}

.vs-content{

padding:80px 50px;

}

.vs-image{

padding:60px;

}

}

/*=========================
Tablet
=========================*/

@media(max-width:991px){

.vs-wrapper{

flex-direction:column;

}

.vs-content,
.vs-image{

width:100%;

}

.vs-content{

padding:70px 35px;

}

.vs-columns{

grid-template-columns:1fr;

gap:20px;

}

.vs-image{

padding:50px 30px;

}

.vs-image img{

max-width:600px;

}

}

/*=========================
Mobile
=========================*/

@media(max-width:576px){

.vs-content{

padding:50px 22px;

}

.vs-image{

padding:30px 20px;

}

.vs-col p{

font-size:17px;
line-height:1.8;

}

.vs-btn{

font-size:15px;

}

.vs-icon{

width:38px;
height:38px;

}

}
    /*===================================our values===============================*/
    .hwa-section{
    width:100%;
    background:#fff;
    padding:70px 0;
    box-sizing:border-box;
}
.hwa-container{
    width:100%;
    max-width:1240px;
    margin:auto;
    padding:0;
    box-sizing:border-box;
}
.hwa-title{
    margin:0 0 28px;
    font-size:44px;
    font-weight:300;
    line-height:1.1;
    color:#0f2747;
    /*font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;*/
}

.hwa-title span{
    color:#3D7BFF;
    font-weight:300;
}

.hwa-content{
    max-width:1180px;
}

.hwa-content p{
    margin:0;
    color:#15304c;
    font-size:14px;
    font-weight:300;
    line-height:1.5;
    text-align:justify;
    /*font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;*/
}

.hwa-content p:last-child{
    margin-bottom:0;
}


/*==============================
        Laptop
==============================*/

@media (max-width:1200px){

.hwa-container{
    padding:0 45px;
}

.hwa-title{
    font-size:48px;
}

.hwa-content p{
    font-size:16px;
}

}


/*==============================
        Tablet
==============================*/

@media (max-width:991px){

.hwa-section{
    padding:60px 0;
}

.hwa-container{
    padding:0 35px;
}

.hwa-title{
    font-size:42px;
}

.hwa-content p{
    font-size:15.5px;
    line-height:1.75;
}

}


/*==============================
        Mobile
==============================*/

@media (max-width:767px){

.hwa-section{
    padding:45px 0;
}

.hwa-container{
    padding:0 22px;
}

.hwa-title{
    font-size:34px;
    margin-bottom:22px;
}

.hwa-content p{
    font-size:15px;
    line-height:1.7;
    margin-bottom:20px;
}

}


/*==============================
      Small Mobile
==============================*/

@media (max-width:480px){

.hwa-container{
    padding:0 18px;
}

.hwa-title{
    font-size:30px;
}

.hwa-content p{
    font-size:14px;
    line-height:1.65;
}

}
/*==========================
        VALUES
===========================*/

.v-values-section{
    width:100%;
    background:#fff;
    padding:0;
}

.v-values-container{

    width:100%;
    max-width:1180px;
    margin:auto;

}

.v-values-row{

    display:grid;
    grid-template-columns:1fr 1fr;
    align-items:center;
    gap:80px;

    margin-bottom:110px;

}

.v-values-row:last-child{
    margin-bottom:0;
}

/* reverse */

.v-values-row.reverse{

    grid-template-columns:1fr 1fr;

}

/* TEXT */

.v-values-content{

    max-width:380px;
    margin:auto;

}

.v-values-content h3{

    font-size:24px;
    font-weight:300;
    color:#163453;
    margin:0 0 24px;

}

.v-values-content p{

    font-size:21px;
    line-height:1.7;
    font-weight:300;
    color:#163453;
    margin:0;

}

/* IMAGE */

.v-values-image{

    width:100%;
    overflow:hidden;

}

.v-values-image img{

    width:100%;
    display:block;

}

/*==========================
      1200
===========================*/

@media(max-width:1200px){

.v-values-container{

    padding:0 40px;

}

.v-values-row{

    gap:60px;

}

.v-values-content p{

    font-size:19px;

}

}


/*==========================
        Tablet
===========================*/

@media(max-width:991px){

.v-values-container{

    padding:0 30px;

}

.v-values-row{

    gap:40px;
    margin-bottom:70px;

}

.v-values-content{

    max-width:100%;

}

.v-values-content h3{

    font-size:22px;

}

.v-values-content p{

    font-size:18px;

}

}


/*==========================
        Mobile
===========================*/

@media(max-width:768px){

.v-values-row{

    grid-template-columns:1fr;
    gap:30px;

}

.v-values-row.reverse{

    display:flex;
    flex-direction:column;

}

.v-values-image{

    order:1;

}

.v-values-content{

    order:2;

}

.v-values-content{

    max-width:100%;

}

.v-values-content p{

    font-size:17px;
    line-height:1.6;

}

}


/*==========================
      Small Mobile
===========================*/

@media(max-width:480px){

.v-values-container{

    padding:0 20px;

}

.v-values-content h3{

    font-size:20px;

}

.v-values-content p{

    font-size:16px;

}

}
    /*================================contact=================================================*/
            .heroc {
             position: relative;
             height:8vh;
             /*overflow: hidden;*/
         }
        /* NAVBAR */
        .top-navc
        {
            position: fixed; /* fixed hatao */
            top: 0;
            left: 0;
            width: 100%;
            z-index: 999;
        }
                .navConc.hide-headerc{
    transform:translateY(-100%);
    color:#000;
    background:#fff;
}
        .navConc
        {
            height: 65px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            angle: 0 deg;
            opacity: 1;
            padding-top: 10px;
            padding-right: 10px;
            padding-bottom: 10px;
            padding-left: 67px;
            border-bottom-width: 1px;
            background:rgba(44,50,57,.92);
            /*background: rgba(255,255,255,0.08); /* transparent */
            border-bottom: 1px solid rgba(255,255,255,0.25);
            /*backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);*/
        }

            .navCon .logoc
            {
                font-size: 34px;
                font-weight: 700;
                color: #fff;
                text-decoration: none;
                letter-spacing: 20%;
                text-align: left;
                vertical-align: middle;
            }


/* NAV LINKS */
 .nav-linksc {
    list-style: none;
    display: flex;
    gap: 32px;
    padding-right:67px;
    text-align:right;
    vertical-align:middle;
}
  .nav-linksc{
    list-style: none;
    display: flex;
    gap: 32px;
    text-align:right;
    padding-right:25px;
    vertical-align:middle;
}
 .nav-linksc li a{
 position: relative;
    display: inline-block;
    padding: 21px 20px;
    cursor: pointer;  
font-weight: 600;
font-size: 16px;
leading-trim: NONE;
line-height: 22px;
letter-spacing: 1%;
color:#ffffff;
text-decoration:none;

}

       .nav-linksc li a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background: #fff;
    transition: width 0.3s ease;
}
 .nav-linksc li a:hover::after {
    width: 100%;
  
    box-shadow: 0 0 8px #fff, 0 0 15px #fff, 0 0 25px #fff;
}
 .nav-linksc li a {
 position: relative;
    display: inline-block;
    padding: 27px 0px;
    cursor: pointer;  
font-weight: 600;
font-size: 16px;
leading-trim: NONE;
line-height: 22px;
letter-spacing: 1%;
color:#ffffff;
text-decoration:none;

}
 
       .nav-linksc li a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background: #fff;
    transition: width 0.3s ease;
}
 .nav-linksc li a:hover::after {
    width: 100%;  
    box-shadow: 0 0 8px #fff, 0 0 15px #fff, 0 0 25px #fff;
}

.mega-menuc{
    position:absolute;
    top:65px;
    left:0;
    width:100%;
    height:400px;
    display:flex;
    align-items:flex-start;
    background:rgba(44,50,57,.92);
    opacity:0;
    visibility:hidden;
    transform:translateY(10px);
    transition:.35s;
    z-index:9999;
   
}

.mega-menuc.active{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

/* LEFT MENU */

.mega-leftc{
    /*width:320px;*/
    /*margin-top:20px;*/
    margin-left:270px;
    display:flex;
    flex-direction:column;
    /*gap:12px;*/
    /*z-index:2;*/
}
.mega-leftc a{
    color:#fff;
    text-decoration:none;
    font-size:18px;
    font-weight:500;
    height:auto;
    padding:0;
    display:flex;
    text-align:left;
    justify-content:space-between;
    align-items:center;
    padding:10px 0;
    /*transition:.25s;*/
}

/* RESPONSIVE FIXES */
@media (max-width: 992px) {
    .hero-contentc h1 { font-size: 54px; }
    .booking-boxc { grid-template-columns: repeat(2, 1fr); bottom: -180px; }
    .nav-linksc{
        position: fixed;
        top: 60px;
        right: -100%;
        width: 280px;
        height: calc(100vh - 60px);
        background: #2c3239;
        transition: .3s;
        flex-direction: column;
    }

    .nav-linksc.active{
        right: 0;
    }
}

@media (max-width: 600px) {
    .hero-contentc h1 { font-size: 36px; }
    .booking-boxc { grid-template-columns: 1fr; bottom: -340px; }
    .nav-linksc{
        position: fixed;
        top: 60px;
        right: -100%;
        width: 280px;
        height: calc(100vh - 60px);
        background: #2c3239;
        transition: .3s;
        flex-direction: column;
    }

    .nav-linksc.active{
        right: 0;
    }
    
}
@media (max-width:768px){

    .nav-linksc{
        position: fixed;
        top: 60px;
        right: -100%;
        width: 280px;
        height: calc(100vh - 60px);
        background: #2c3239;
        transition: .3s;
        flex-direction: column;
    }

    .nav-linksc.active{
        right: 0;
    }

}
/*===============================1st section=============================*/ 
.vt-location-section{
    width:100%;
    background:#fff;
    padding:34px 0 20px;
    box-sizing:border-box;
}

.vt-location-container{
    max-width:1240px;
    width:100%;
    margin:0 auto;
    padding:0;

    display:grid;
    grid-template-columns:1.6fr 1fr;
    column-gap:90px;
    align-items:start;
    box-sizing:border-box;
}

/* Left */

.vt-location-label{
    display:block;
    font-size:16px;
    font-weight:300;
    color:#153a63;
    margin-bottom:14px;
    line-height:1.4;
    /*font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;*/
}

.vt-location-title{
    margin:0;
    font-size:54px;
    font-weight:500;
    line-height:1.08;
    letter-spacing:-1px;
    color:#1b2f4c;
    /*font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;*/
}

/* Right */

.vt-location-right{
    padding-top:28px;
}

.vt-location-right p{
    margin:0;
    font-size:16px;
    font-weight:300;
    line-height:1.7;
    color:#173657;
    /*font-family:"Helvetica Neue", Helvetica, Arial, sans-serif;*/
}

@media(max-width:1200px){

.vt-location-container{
    padding:0 35px;
    column-gap:70px;
}

.vt-location-title{
    font-size:54px;
}

.vt-location-right p{
    font-size:17px;
}

}

@media(max-width:991px){

.vt-location-container{
    grid-template-columns:1fr;
    row-gap:30px;
    padding:0 30px;
}

.vt-location-right{
    padding-top:0;
    max-width:650px;
}

.vt-location-title{
    font-size:48px;
}

}

@media(max-width:768px){

.vt-location-section{
    padding:30px 0 55px;
}

.vt-location-container{
    padding:0 22px;
}

.vt-location-label{
    font-size:16px;
    margin-bottom:10px;
}

.vt-location-title{
    font-size:40px;
    letter-spacing:-0.5px;
}

.vt-location-right p{
    font-size:16px;
    line-height:1.7;
}

}
@media(max-width:480px){

.vt-location-container{
    padding:0 18px;
}

.vt-location-title{
    font-size:32px;
}

.vt-location-right p{
    font-size:15px;
}

}
        /*=======================location map===============================*/
        .locmap
        {
              
    background:#fff;
    width:100%;
    margin-top:50px;
    align-items:start;
    box-sizing:border-box;
        }
        .fr
        {
            width:100%;
        }
/*==========================3ed section========================*/

.vhq-section{

    width:100%;
    background:#fff;
    padding:80px 0;
    box-sizing:border-box;

}

.vhq-container{

    max-width:1260px;
    margin:auto;

    padding:0 40px;

    display:grid;
    grid-template-columns:500px 1fr;

    gap:90px;

    align-items:start;

    box-sizing:border-box;

}


/* LEFT */

.vhq-content{

    width:100%;

}

.vhq-block{

    margin-bottom:42px;

}

.vhq-block h2{

    margin:0 0 12px;

    font-size:24px;

    font-weight:500;

    color:#183452;

    line-height:1.25;
}

.vhq-block p{

    margin:0;

    font-size:16px;

    line-height:1.7;

    color:#183452;

    font-weight:300;

}

.vhq-block a{

    color:#1b6da7;

    text-decoration:none;

}

.vhq-block a:hover{

    text-decoration:underline;

}

.vhq-bottom{

    max-width:420px;

}

.vhq-bottom p{

    margin:0;

    font-size:16px;

    line-height:1.8;

    color:#183452;

}


/* IMAGE */

.vhq-image{
    width:100%;
    
}

.vhq-image img{

    width:100%;
    height:700px;
    /*display:block;

    object-fit:cover;*/

}
@media(max-width:1200px){

.vhq-container{

    gap:60px;

    grid-template-columns:430px 1fr;

}

}

@media(max-width:991px){

.vhq-container{

    grid-template-columns:1fr;

    gap:50px;

}

.vhq-image{

    order:-1;

}

}

@media(max-width:768px){

.vhq-section{

    padding:60px 0;

}

.vhq-container{

    padding:0 22px;

}

.vhq-block h2{

    font-size:22px;
    font-weight:500;
text-align:left;
}

.vhq-block p{

    font-size:15px;

}

.vhq-bottom p{

    font-size:15px;

}

}
@media(max-width:480px){

.vhq-container{

    padding:0 18px;

}

.vhq-block h2{
text-align:left;
    font-size:24px;
font-weight:500;
}

.vhq-block{

    margin-bottom:32px;

}

}
        /*=================================================section 4th=====================================*/
.v-contact-section{

    width:100%;
    background:#fff;
    padding:70px 0 90px;

}

.v-contact-container{

    max-width:1240px;

    margin:auto;

    padding:0 40px;

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:48px;

    box-sizing:border-box;

}

.v-contact-card{
    text-decoration:none;
    color:#163453;
    display:block;
}

.v-contact-image{
    overflow:hidden;
}

.v-contact-image img{
    width:100%;
    height:200px;
    display:block;
    transition:.55s;
}

.v-contact-card:hover img{
    transform:scale(1.06);
}

.v-contact-content{
    padding-top:30px;
}

.v-contact-small{
    display:block;
    color:#9aa4b3;
    font-size:14px;
    font-weight:300;
    /*margin-bottom:12px;*/
}

.v-contact-content h3{
    margin:0;
    font-size:26px;
    font-weight:300;
    line-height:1.1;
    color:#173657;
    display:flex;
    align-items:center;
    gap:8px;
}

.v-contact-arrow{
    color:#0068ff;
    font-size:26px;
    font-weight:600;
    transition:.3s;

}

.v-contact-card:hover .v-contact-arrow{

    transform:translateX(8px);

}


/*=========================
        Laptop
==========================*/

@media(max-width:1200px){

.v-contact-container{

    gap:35px;

}

.v-contact-content h3{

    font-size:40px;

}

}


/*=========================
        Tablet
==========================*/

@media(max-width:991px){

.v-contact-container{

    grid-template-columns:repeat(2,1fr);

}

}


/*=========================
        Mobile
==========================*/

@media(max-width:768px){

.v-contact-section{

    padding:55px 0;

}

.v-contact-container{

    grid-template-columns:1fr;

    padding:0 22px;

    gap:45px;

}

.v-contact-content{

    padding-top:22px;

}

.v-contact-content h3{

    font-size:32px;

}

.v-contact-arrow{

    font-size:34px;

}

.v-contact-small{

    font-size:15px;

}

}


/*=========================
      Small Mobile
==========================*/

@media(max-width:480px){

.v-contact-container{

    padding:0 18px;

}

.v-contact-content h3{

    font-size:28px;

}

}
    /*=======================================================Client page===============================*/


.mmt-clients{
    width:100%;
    padding:50px 0;
    background:#f6f8fb;
    overflow:hidden;
    position:relative;
}

.mmt-clients *{
    box-sizing:border-box;
}

.mmt-clients-container{
    width:90%;
    max-width:1400px;
    margin:auto;
}

/*=====================
Heading
=====================*/

.mmt-clients-heading{
    text-align:center;
    margin-bottom:20px;
}

.mmt-clients-heading span{
    display:inline-block;
    font-size:15px;
    letter-spacing:2px;
    text-transform:uppercase;
    color:#0A73B7;
    font-weight:600;
    margin-bottom:15px;
}

.mmt-clients-heading h2{
    font-size:38px;
    font-weight:700;
    color:#16253D;
    margin-bottom:10px;
    line-height:1.2;
}

.mmt-clients-heading p{
    margin:auto;
    font-size:17px;
    line-height:30px;
    color:#666;
}

/*=====================
Row
=====================*/

.mmt-client-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    /*gap:60px;
    margin-bottom:30px;*/
}

.mmt-client-content{
    width:45%;
    background:#aaaabd;
    padding:60px;
       height:650px;
       background:linear-gradient(180deg,#aaaabd 0%,#f5f8fc 45%,#eef5fb 100%);
    /*border-radius:24px;*/
    /*box-shadow:0 20px 45px rgba(0,0,0,.08);
    transition:.4s;*/
}

.mmt-client-content:hover{
    /*transform:translateY(-8px);*/
}

.mmt-client-content span{
    display:inline-block;
    font-size:13px;
    text-transform:uppercase;
    letter-spacing:2px;
    color:#0A73B7;
    font-weight:600;
    margin-bottom:15px;
}

.mmt-client-content h3{
    font-size:38px;
    color:#16253D;
    margin-bottom:15px;
    line-height:1.2;
}

.mmt-client-content p{
    font-size:15px;
    color:#666;
    line-height:25px;
    margin-bottom:15px;
    text-align:justify;
}

/*=====================
List
=====================*/

.mmt-client-list{
    list-style:none;
    margin:0 0 40px;
    padding:0;
}

.mmt-client-list li{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:5px;
    font-size:16px;
    color:#444;
}

.mmt-client-list li i{
    width:22px;
    height:22px;
    border-radius:50%;
    background:#0A73B7;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:12px;
}

/*=====================
Button
=====================*/

.mmt-client-btn{
    display:inline-flex;
    align-items:center;
    gap:12px;
    padding:15px 34px;
    border-radius:60px;
    background:#0A73B7;
    color:#fff;
    text-decoration:none;
    font-weight:600;
    transition:.35s;
}

.mmt-client-btn:hover{
    background:#16253D;
}

.mmt-client-btn i{
    transition:.35s;
}

.mmt-client-btn:hover i{
    transform:translateX(5px);
}

/*=====================
Logo Area
=====================*/

.mmt-client-logo-area{
    width:70%;
    height:650px;
}

.mmt-logo-box{
    background:#fff;
    padding:25px;
    height:650px;
    /*border-radius:24px;
    padding:25px;
    box-shadow:0 20px 45px rgba(0,0,0,.08);*/
}

/*=====================
Logo Grid
=====================*/

.mmt-logo-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:22px;
}

.mmt-logo{
    background:#fff;
    border:1px solid #edf1f5;
    border-radius:18px;

    display:flex;
    align-items:center;
    justify-content:center;

    transition:.35s;
}

.mmt-logo img{
    max-width:100%;
    max-height:250px;
    transition:.35s;
}

.mmt-logo:hover{
    transform:translateY(-8px);
    box-shadow:0 15px 35px rgba(0,0,0,.12);
}

.mmt-logo:hover img{
    transform:scale(1.08);
}

/*=====================
Alternate Row
=====================*/

.mmt-client-row.reverse{
    flex-direction:row-reverse;
}

/*=====================
Background Decoration
=====================*/

.mmt-clients::before{
    content:'';
    position:absolute;
    top:-180px;
    right:-180px;
    width:420px;
    height:420px;
    background:#0A73B7;
    opacity:.05;
    border-radius:50%;
}

.mmt-clients::after{
    content:'';
    position:absolute;
    bottom:-180px;
    left:-180px;
    width:420px;
    height:420px;
    background:#0A73B7;
    opacity:.05;
    border-radius:50%;
}
/*==================================
Responsive
==================================*/

@media(max-width:1400px){

.mmt-client-content{
    padding:50px;
}

.mmt-client-content h3{
    font-size:34px;
}

.mmt-logo{
    height:110px;
}

}


@media(max-width:1200px){

.mmt-client-row{
    gap:40px;
}

.mmt-client-content{
    width:42%;
}

.mmt-client-logo-area{
    width:58%;
}

.mmt-logo-grid{
    grid-template-columns:repeat(3,1fr);
}

.mmt-logo{
    height:100px;
}

}



@media(max-width:991px){

.mmt-clients{
    padding:80px 0;
}

.mmt-clients-heading h2{
    font-size:38px;
}

.mmt-client-row,
.mmt-client-row.reverse{

    flex-direction:column;

}

.mmt-client-content,
.mmt-client-logo-area{

    width:100%;

}

.mmt-client-logo-area{

    order:-1;

}

.mmt-client-content{

    padding:45px;

}

.mmt-logo-grid{

    grid-template-columns:repeat(4,1fr);

}

}



@media(max-width:768px){

.mmt-clients{

    padding:70px 0;

}

.mmt-clients-heading{

    margin-bottom:50px;

}

.mmt-clients-heading h2{

    font-size:32px;

}

.mmt-clients-heading p{

    font-size:15px;

    line-height:28px;

}

.mmt-client-content{

    padding:35px;

}

.mmt-client-content h3{

    font-size:30px;

}

.mmt-client-content p{

    line-height:28px;

}

.mmt-logo-box{

    padding:30px;

}

.mmt-logo-grid{

    grid-template-columns:repeat(3,1fr);

    gap:18px;

}

.mmt-logo{

    height:90px;

}

.mmt-logo img{

    max-width:100px;

}

}



@media(max-width:576px){

.mmt-clients{

    padding:60px 0;

}

.mmt-clients-container{

    width:92%;

}

.mmt-clients-heading span{

    font-size:13px;

}

.mmt-clients-heading h2{

    font-size:28px;

}

.mmt-client-row{

    margin-bottom:45px;

}

.mmt-client-content{

    padding:28px;

    border-radius:18px;

}

.mmt-client-content h3{

    font-size:26px;

}

.mmt-client-content p{

    font-size:15px;

}

.mmt-client-list li{

    font-size:15px;

}

.mmt-client-btn{

    width:100%;

    justify-content:center;

}

.mmt-logo-box{

    padding:22px;

    border-radius:18px;

}

.mmt-logo-grid{

    grid-template-columns:repeat(2,1fr);

    gap:15px;

}

.mmt-logo{

    height:80px;

    border-radius:14px;

}

.mmt-logo img{

    max-width:150px;

    max-height:150px;

}

}


/*=========================
Animation
==========================*/

/*.mmt-client-content,
.mmt-logo-box{

    transition:.4s ease;

}

.mmt-client-content:hover,
.mmt-logo-box:hover{

    transform:translateY(-6px);

    box-shadow:0 25px 60px rgba(0,0,0,.12);

}*/


/*=========================
Logo Effect
==========================*/

.mmt-logo{
    overflow:hidden;
    position:relative;
    height:175px;
}

.mmt-logo::before{

    content:"";

    position:absolute;

    top:-120%;

    left:-40%;

    width:40px;

    height:250%;

    background:rgba(255,255,255,.5);

    transform:rotate(25deg);

    transition:.8s;

}

.mmt-logo:hover::before{

    left:140%;

}

/*.mmt-logo img{

width:100%;
height:500px;

}*/

.mmt-logo:hover img{

    filter:none;

    opacity:1;

}
/*=======================================product page=============================================*/

.mmtProducts{
    padding:80px 0;
    background:#fff;
}

.mmtProducts *{
    box-sizing:border-box;
}

.mmtProducts .mmtContainer{
    width:min(1400px,92%);
    margin:auto;
}

/*==========================
        TABS
==========================*/

.mmtTabs{
    display:flex;
    align-items:center;
    border:1px solid #E8E8E8;
    border-radius:14px;
    overflow:hidden;
    margin-bottom:45px;
}

.mmtTab{

    flex:1;

    height:66px;

    display:flex;
    align-items:center;
    justify-content:center;

    gap:10px;

    cursor:pointer;

    background:#fff;

    position:relative;

    transition:.3s;
}

.mmtTab:hover{
    background:#f8f8f8;
}

.mmtTab.active{
    color:#005EB8;
    font-weight:600;
}

.mmtTab.active::after{

    content:"";

    position:absolute;

    left:0;
    bottom:0;

    width:100%;
    height:3px;

    background:#005EB8;

}
/*==========================
      PRODUCT GRID
==========================*/

.mmtProducts .mmtGrid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:26px;
}

.mmtProducts .mmtCard{
    background:#fff;
    border:1px solid #ECECEC;
    border-radius:18px;
    overflow:hidden;
    transition:.35s;
    display:flex;
    flex-direction:column;
    position:relative;
}
.mmtProducts .mmtCard:hover{
    transform:translateY(-8px);
    box-shadow:0 20px 45px rgba(0,0,0,.08);
}
.mmtProducts .mmtImage{

    height:200px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:25px;
    background:#fff;
}

.mmtProducts .mmtImage img{
    max-width:100%;
    max-height:180px;
    transition:.4s;
}
.mmtProducts .mmtCard:hover img{
    transform:scale(1.06);
}
.mmtProducts .mmtContent{
    padding:0 20px 20px;
    position:relative;
}

.mmtProducts .mmtContent span{
    display:block;
    font-size:11px;
    letter-spacing:1px;
    color:#005EB8;
    font-weight:700;
    margin-bottom:5px;
}

.mmtProducts .mmtContent h3{
    font-size:20px;
    line-height:1.25;
    margin-bottom:15px;
    color:#101828;
    font-weight:600;
}

.mmtProducts .mmtContent p{
    font-size:14px;
    line-height:28px;
    color:#6B7280;
    max-width:90%;
}
.mmtProducts .mmtArrow{
    position:absolute;
    right:22px;
    bottom:26px;
    width:35px;
    height:35px;
    border-radius:50%;
    border:1px solid #E6E6E6;
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
    color:#111;
    background:#fff;

    transition:.35s;
}

.mmtProducts .mmtArrow:hover{

    background:#005EB8;

    color:#fff;

    border-color:#005EB8;

    transform:translateX(4px);
}

.mmtProducts .mmtArrow:hover svg{

    stroke:#fff;
}


/*==========================
      RESPONSIVE
==========================*/

@media(max-width:1200px){

.mmtProducts .mmtGrid{

grid-template-columns:repeat(3,1fr);

}

}


@media(max-width:992px){

.mmtProducts{

padding:60px 0;

}

.mmtProducts .mmtGrid{

grid-template-columns:repeat(2,1fr);

gap:22px;

}

.mmtProducts .mmtTabs{

justify-content:flex-start;

overflow-x:auto;

flex-wrap:nowrap;

}

.mmtProducts .mmtTabs button{

min-width:170px;

flex:none;

}

}


@media(max-width:576px){

.mmtProducts .mmtGrid{

grid-template-columns:1fr;

}

.mmtProducts .mmtImage{

height:190px;

}

.mmtProducts .mmtContent{

padding:20px;

}

.mmtProducts .mmtContent h3{

font-size:22px;

}

.mmtProducts .mmtContent p{

font-size:14px;

line-height:24px;

max-width:100%;

}

.mmtProducts .mmtArrow{

position:relative;

right:auto;

bottom:auto;

margin-top:18px;

}

}
/* ===========================
   Tablet
=========================== */

@media (max-width:991px){

    .mmtTabs{
        justify-content: center;
        gap:12px;
    }

    .mmtTab{
        padding:12px 18px;
        font-size:14px;
    }

}

/* ===========================
   Mobile
=========================== */

@media (max-width:767px){

    .mmtTabs{
        flex-wrap: nowrap;
        overflow-x: auto;
        justify-content: flex-start;
        gap:10px;
        padding:10px 15px 10px;
        scrollbar-width: none;
        -ms-overflow-style: none;
       }

    .mmtTabs::-webkit-scrollbar{
        display:none;
    }

    .mmtTab{
        flex:0 0 auto;
        min-width:170px;
        padding:12px 18px;
        font-size:14px;
    }
}

/* ===========================
   Small Mobile
=========================== */

@media (max-width:480px){

    .mmtTab{
        min-width:160px;
        font-size:13px;
        padding:10px 16px;
    }
}
    /*==============================================================Media==============================*/
.mmt-media-section{
    padding:50px 0;
    background:#fff;
}

.mmt-media-container{
    width:min(1400px,92%);
    margin:auto;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    column-gap:60px;
}

.mmt-media-card h2{
    height:50px;
    font-size:2rem;
    font-weight:200;
    line-height:1.15;
    color:#1b2d42;
    margin-bottom:28px;
    letter-spacing:-1px;
}

.mmt-media-card p{
    height:100px;
    font-size:14px;
    line-height:1.55;
    color:#24384f;
    margin-bottom:15px;
    max-width:520px;
}

.mmt-media-link{
    display:inline-flex;
    align-items:center;
    gap:18px;
    text-decoration:none;
    color:#24384f;
    font-size:20px;
    font-weight:500;
}

.mmt-arrow{
    width:35px;
    height:35px;
    border-radius:50%;
    background:#0057ff;

    display:flex;
    justify-content:center;
    align-items:center;

    flex-shrink:0;
    transition:.3s;
}

.mmt-arrow i{
    color:#fff;
    font-size:24px;
}

.mmt-outline{
    background:#fff;
    border:2px solid #0057ff;
}

.mmt-outline i{
    color:#0057ff;
}

.mmt-media-link:hover .mmt-arrow{
    transform:translateX(6px);
}

.mmt-double-links{
    display:flex;
    gap:55px;
}

/*==============================
Tablet
===============================*/

@media(max-width:1200px){

.mmt-media-container{
    gap:60px;
}

.mmt-media-card h2{
    font-size:42px;
}

.mmt-media-card p{
    font-size:20px;
}

}

/*==============================
Mobile
===============================*/

@media(max-width:991px){

.mmt-media-container{
    grid-template-columns:1fr;
    gap:70px;
}

.mmt-media-card h2{
    font-size:36px;
}

.mmt-media-card p{
    font-size:18px;
    max-width:100%;
}

.mmt-double-links{
    flex-wrap:wrap;
    gap:20px;
}

}

/*==============================
Small Mobile
===============================*/

@media(max-width:576px){

.mmt-media-section{
    padding:70px 0;
}

.mmt-media-card h2{
    font-size:30px;
}

.mmt-media-card p{
    font-size:17px;
    line-height:1.8;
}

.mmt-arrow{
    width:50px;
    height:50px;
}

.mmt-media-link{
    font-size:17px;
}

}
        /*=========================================
  MMT MEDIA SECTION
==========================================*/

.mmtMedia{
    width:100%;
    padding:30px 0;
    background:#ffffff;
}


.mmtMedia img{
    max-width:100%;
    display:block;
}

.mmtMedia a{
    text-decoration:none;
}

.mmtMedia__head{
    width:100%;
    margin:0;
    text-align:center;
}

.mmtMedia__sub{
    display:inline-block;
    font-size:13px;
    font-weight:700;
    letter-spacing:4px;
    color:#1d5cff;
    margin-bottom:14px;
}

.mmtMedia__head h2{
    margin:0;
    font-size:2rem;
    line-height:1.1;
    font-weight:600;
    color:#15253f;
    letter-spacing:-1px;
     margin-bottom:15px;
     padding: 10px;
    background-color: #E3E5E8;
}

.mmtMedia__head p{
    margin-bottom:25px;
    font-size:14px;
    line-height:1.8;
    color:#5b6676;
}

.mmtMedia__head::after{
    /*content:"";
    width:80px;
    height:3px;
    background:#1d5cff;
    display:block;
    margin:30px auto 30;
    border-radius:20px;*/
}

/*=========================================
 GRID
==========================================*/

.mmtMedia__grid{

    width:90%;
    margin:auto;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:40px;
}
.mmtCard{
    background:#fff;
    border-radius:18px;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    /*box-shadow:0 12px 40px rgba(0,0,0,.06);

    transition:.35s ease;*/

    /*position:relative;*/

}
/*.mmtCard:hover{

    transform:translateY(-10px);

    box-shadow:
    0 25px 55px rgba(0,0,0,.12);

}*/
/*.mmtCard__image{
    overflow:hidden;
    aspect-ratio:16/10;
    background:#eee;
}*/
/*.mmtCard__image img{
    width:100%;
    height:100%;
    object-fit:cover;
    /*transition:.6s;*/

/*}*/

/*.mmtCard__image:hover img{

   transform: scale(1.1);

}*/

/*=========================================
 BODY
==========================================*/

.mmtCard__body{
    padding:28px 26px 28px;
    display:flex;
    flex-direction:column;
    flex:1;
}
.mmtCard__number{
    font-size:15px;
    font-weight:700;
    color:#1d5cff;
    margin-bottom:18px;
    letter-spacing:1px;
}
.mmtCard h3{
    margin:0;
    color:#1b2d42;
    font-size:1.12rem;
    line-height:1.25;
    font-weight:500;
    letter-spacing: -1px;
    flex:1;
}
.mmtCard__btn{
    width:40px;
    height:40px;
    margin-top:25px;
    border-radius:50%;
    background:#005BFF;
    display:flex;
    justify-content:center;
    align-items:center;
    transition:.35s;
    overflow:hidden;
}
.mmtCard__btn svg{
    width:22px;
    height:22px;
    stroke:#fff;
    stroke-width:2;
    fill:none;
    transition:.35s;

}
.mmtCard:hover .mmtCard__btn{
    width:120px;
    border-radius:50px;
    justify-content:flex-end;
    padding-right:20px;
    color:#fff;
}
.mmtCard:hover .mmtCard__btn svg{
    transform:translateX(4px);
    color:#fff;
}
.mmtCard::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:0;
    height:4px;
    background:#005BFF;
    transition:.45s;
}

.mmtCard:hover::before{

    width:100%;

}

/*=========================================
IMAGE OVERLAY
=========================================*/

.mmtCard__image{

    position:relative;

}

.mmtCard__image::after{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(
    to top,
    rgba(0,0,0,.18),
    transparent 55%
    );

    opacity:0;

    transition:.4s;

    pointer-events:none;

}

.mmtCard:hover .mmtCard__image::after{

    opacity:1;

}

/*=========================================
VIEW ALL BUTTON
=========================================*/

.mmtMedia__footer{

    text-align:center;

    margin-top:70px;

}

.mmtMore{

    display:inline-flex;

    align-items:center;

    gap:18px;

    padding:18px 36px;

    border-radius:100px;

    border:2px solid #005BFF;

    color:#005BFF;

    font-size:17px;

    font-weight:600;

    transition:.35s;

}

.mmtMore:hover{

    background:#005BFF;

    color:#fff;

}

.mmtMore i{

    font-size:20px;

}

/*=========================================
TABLET
=========================================*/

@media (max-width:1200px){

.mmtMedia__grid{

grid-template-columns:repeat(2,1fr);

gap:28px;

}

.mmtMedia__head h2{

font-size:48px;

}

.mmtCard h3{

font-size:26px;

}

}

/*=========================================
MOBILE
=========================================*/

@media (max-width:768px){

.mmtMedia{

padding:70px 0;

}

.mmtMedia__head{

margin-bottom:45px;

}

.mmtMedia__head h2{

font-size:36px;

}

.mmtMedia__head p{

font-size:17px;

line-height:1.7;

}

.mmtMedia__grid{

grid-template-columns:1fr;

gap:24px;

}

.mmtCard h3{

font-size:22px;

}

.mmtCard__body{

padding:22px;

}

.mmtCard__btn{

width:52px;

height:52px;

}

.mmtCard:hover .mmtCard__btn{

width:140px;

}

}

/*=========================================
SMALL MOBILE
=========================================*/

@media (max-width:480px){

.mmtMedia__head h2{

font-size:30px;

}

.mmtMedia__sub{

font-size:12px;

letter-spacing:3px;

}

.mmtCard h3{

font-size:20px;

line-height:1.5;

}

.mmtCard__number{

font-size:13px;

}

}
/*============================================careers==========================================*/
.mmtCareer{
    display:grid;
    grid-template-columns:52% 48%;
    min-height:500px;
    background:#fff;
    overflow:hidden;
}

.mmtCareer__left{
    background:#f7f7f7;
    display:flex;
    align-items:center;
    justify-content:flex-end;
}

.mmtCareer__content{
    width:min(680px,86%);
    padding:0px 0;
    margin:auto;
}

.mmtCareer__title{
    color:#22334d;
    font-size:2rem;
    line-height:1.08;
    font-weight:600;
    letter-spacing:-2px;
    margin-bottom:20px;
    margin-top:20px;
}

.mmtCareer__text{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:30px;
    margin:auto;
}

.mmtCareer__col{
    display:flex;
    flex-direction:column;
    gap:20px;
}

.mmtCareer__col p{

    color:#22334d;
    font-size:16px;
    line-height:1.55;
    font-weight:300;

}
.mmtCareer__btn{
    display:inline-flex;
    align-items:center;
    gap:18px;
    margin-top:30px;
    text-decoration:none;
    color:#24364e;
    font-size:20px;
    font-weight:500;

}

.mmtCareer__right{

    background:#f3f3f3;

    display:flex;

    justify-content:center;

    align-items:center;

    /*padding:80px;
        width: 50%;*/
   background: #F7F7F7;
    /*padding:100px;*/
        overflow: hidden;

}

.mmtCareer__image{

    width:100%;

    max-width:620px;

    overflow:hidden;

    background:#ddd;

}

/*.mmtCareer__image img{

    width:100%;

    display:block;

    object-fit:cover;

}*/
.mmtCareer__right img {
    width: 100%;    
    /*height: 500px;*/    
    border-radius: 6px;
    object-fit: cover;
    animation: zoomShrink 3s ease-in-out forwards;
}
        @keyframes zoomShrink
        {
            0%
            {
               padding:0px; transform: scale(1.2); /* Start big */
            }

            100%
            {
                padding:80px;transform: scale(1); /* End small */
            }
        }
        /*==========================
MMT VALUES SECTION
==========================*/

.mmt-values-section{
    width:100%;
    padding:70px 0;
    background:#fff;
    font-family:inherit;
}

.mmt-values-container{
    width:min(1280px,92%);
    margin:auto;
    display:flex;
    gap:48px;
    align-items:flex-start;
}

.mmt-values-image{
    flex:0 0 31%;
}

.mmt-values-image img{
    width:100%;
    height:953px;
    display:block;
    
}
.mmt-values-content{
    flex:1;
}
.mmt-values-title{
    margin:0 0 15px;
    font-size:2.7rem;
    font-weight:500;
    line-height:1.1;
    color:#233048;
    letter-spacing:-1px;
}
.mmt-value-item{
    padding:0 0 15px;
    margin-bottom:10px;
    border-bottom:1px solid #555;
}
.mmt-value-item:last-child{
   border:none;
}
.mmt-value-item h3{
    margin:0 0 14px;
    font-size:2rem;
    font-weight:300;
    color:#233048;
}
.mmt-value-item p{
    margin:0;
    font-size:21px;
    line-height:1.5;
    color:#233048;
    max-width:90%;
    font-weight:300;
}

.mmt-values-btn{
    margin-top:18px;
    display:inline-flex;
    align-items:center;
    gap:16px;
    text-decoration:none;
}

.mmt-arrow{
    width:46px;
    height:46px;
    border-radius:50%;
    background:#0057ff;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:.3s;
}

.mmt-values-btn span:last-child{
    font-size:18px;
    color:#233048;
    font-weight:500;
}

.mmt-values-btn:hover .mmt-arrow{
    transform:translateX(8px);
}


/*==========================
Laptop
==========================*/

@media(max-width:1200px){

.mmt-values-title{
    font-size:48px;
}

.mmt-value-item h3{
    font-size:27px;
}

.mmt-value-item p{
    font-size:18px;
}

}


/*==========================
Tablet
==========================*/

@media(max-width:991px){

.mmt-values-container{
    flex-direction:column;
}

.mmt-values-image{
    width:100%;
}

.mmt-values-image img{
    width:100%;
}

.mmt-values-title{
    font-size:42px;
}

.mmt-value-item h3{
    font-size:25px;
}

.mmt-value-item p{
    max-width:100%;
}

}


/*==========================
Mobile
==========================*/

@media(max-width:767px){

.mmt-values-section{
    padding:50px 0;
}

.mmt-values-container{
    width:92%;
    gap:35px;
}

.mmt-values-title{
    font-size:33px;
    line-height:1.2;
}

.mmt-value-item{
    padding-bottom:22px;
    margin-bottom:18px;
}

.mmt-value-item h3{
    font-size:23px;
    margin-bottom:12px;
}

.mmt-value-item p{
    font-size:16px;
    line-height:1.7;
}

.mmt-arrow{
    width:42px;
    height:42px;
}

.mmt-values-btn span:last-child{
    font-size:16px;
}

}
        /*====================================
   MMT CAREER SECTION
=====================================*/

.mmt-career-section{
    width:100%;
    padding:75px 0 90px;
    background:#fff;
    overflow:hidden;
}

.mmt-career-container{
    width:min(1240px,92%);
    margin:auto;
}

.mmt-career-heading{
    margin:0 0 34px;
    font-size:58px;
    font-weight:200;
    line-height:1.1;
    color:#2d3c55;
    letter-spacing:-1.4px;
}

.mmt-career-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:48px;
}

/*=========================
CARD
=========================*/

.mmt-career-card{
    display:flex;
    flex-direction:column;
}

/*=========================
IMAGE
=========================*/

.mmt-career-image{
    width:100%;
    aspect-ratio:1.56/1;
    overflow:hidden;
    background:#f2f2f2;
}

.mmt-career-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:.6s ease;
}

/*=========================
CONTENT
=========================*/

.mmt-career-content{
    padding-top:30px;
}

.mmt-career-small{
    display:block;
    margin-bottom:5px;
    font-size:18px;
    font-weight:300;
    color:#a3a8b2;
}

/*=========================
TITLE
=========================*/

.mmt-career-title{
    display:inline-flex;
    align-items:center;
    gap:14px;
    text-decoration:none;
    color:#2d3c55;
    transition:.35s;
}

.mmt-career-title span{
    font-size:2rem;
    line-height:1.25;
    font-weight:300;
}

.mmt-career-title svg{
    width:28px;
    height:28px;
    flex:none;
    transition:.35s;
}

.mmt-career-title svg path{
    fill:none;
    stroke:#0057ff;
    stroke-width:2;
    stroke-linecap:round;
    stroke-linejoin:round;
}

/*=========================
DESCRIPTION
=========================*/

.mmt-career-content p{
    /*margin:16px 0 0;*/
    max-width:92%;
    font-size:19px;
    line-height:1.7;
    color:#687588;
    font-weight:300;
}

/*=========================
HOVER
=========================*/

.mmt-career-card:hover img{
    transform:scale(1.08);
}

.mmt-career-card:hover .mmt-career-title svg{
    transform:translateX(8px);
}

.mmt-career-card:hover .mmt-career-title{
    color:#0057ff;
}
.career-table{
    width:100%;
    max-width:1200px;
    margin:auto;
    padding:30px;
}

.table-head,.table-row{
    display:grid;
    grid-template-columns:35% 25%  20%  20%;
    padding:25px 0;
    border-bottom:1px solid #ddd;
    align-items:center;
}

.table-head{
    font-weight:700;
    border-bottom:2px solid #000;
}

.table-row a{
    color:#111;
    font-weight:700;
    text-decoration:none;
    transition:.3s;
}
.table-row a:hover{
    color:#0073e6;
}

.table-row{
    transition:.3s;
}

.table-row:hover{
    background:#fafafa;
}
/* =========================
   Tablet (992px)
========================= */

@media (max-width:992px){

.table-head,
.table-row{
    grid-template-columns:40% 25% 17.5% 17.5%;
    font-size:15px;
    gap:10px;
    padding:18px 0;
}

}


/* =========================
   Mobile (768px)
========================= */

@media (max-width:768px){

.career-table{
    overflow-x:auto;
}

.table-head,
.table-row{
    min-width:700px;      /* Horizontal scroll */
    grid-template-columns:35% 25% 20% 20%;
}

}


/* =========================
   Small Mobile (480px)
========================= */

@media (max-width:480px){

.career-table{
    padding:20px 10px;
}

.table-head,
.table-row{
    min-width:650px;
    font-size:14px;
    padding:15px 0;
}

.table-row a{
    font-size:14px;
}

}
        .navCon.active .logo-text
{
    fill:#1b6da7;
}
.navCon.active .menu-toggle span
{
    background:#1b6da7;
}

/*=========================================
        Tablet (992px)
=========================================*/

@media (max-width: 900px) {

    .mmtCareer{
        display: flex;
        flex-direction: column;
        gap: 30px;
    }

    .mmtCareer__left,
    .mmtCareer__right{
        width: 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }

    .mmtCareer__text{
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .mmtCareer__col{
        width: 100%;
    }

    .mmtCareer__image img{
        width: 100%;
        height: auto;
        display: block;
    }

    .mmtCareer__title{
        font-size: 32px;
    }
}
/* ==========================
   Mobile View
========================== */

@media (max-width: 768px) {

    .mmtCareer{
        display: flex;
        flex-direction: column;
        gap: 30px;
    }

    .mmtCareer__left{
        width: 100%;
        flex: 0 0 100%;
    }
     .mmtCareer__right{
      display: none;
    }
    .mmtCareer__text{
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .mmtCareer__col{
        width: 100%;
    }

    .mmtCareer__image img{
        width: 100%;
        height: auto;
        display:hidden;
        opacity:0;
    }

    .mmtCareer__title{
        text-align:left;
        font-weight:500;
        font-size: 30px;
    }

}
        /*=============================project gallary===============================*/

.mmt-project-gallery{
    padding:70px 0;
    background:#ffffff;
}

.mmt-project-gallery *{
    box-sizing:border-box;
}

/*==============================
        HEADING
==============================*/

.mmt-gallery-heading{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:18px;
    margin-bottom:35px;
}

.mmt-gallery-heading span{
    width:80px;
    height:2px;
    background:#d9dee8;
    position:relative;
}

.mmt-gallery-heading span::after{
    content:"";
    width:35px;
    height:2px;
    background:#0d6efd;
    position:absolute;
    left:50%;
    transform:translateX(-50%);
}

.mmt-gallery-heading h2{
    margin:0;
    font-size:28px;
    font-weight:700;
    color:#14233b;
    letter-spacing:.5px;
}

/*==============================
        GRID
==============================*/

.mmt-gallery-grid{

    max-width:1320px;
    margin:auto;
    padding:0 15px;

    display:grid;

    grid-template-columns:repeat(3,1fr);

    gap:22px;
}

/*==============================
        CARD
==============================*/

.mmt-gallery-card{

    position:relative;

    overflow:hidden;

    border-radius:12px;

    cursor:pointer;

    background:#ddd;

    height:230px;

    box-shadow:0 8px 25px rgba(0,0,0,.08);

    transition:.4s;
}

.mmt-gallery-card img{

    width:100%;
    height:100%;
    object-fit:cover;
    display:block;

    transition:.6s;
}

/*==============================
        OVERLAY
==============================*/

.mmt-gallery-overlay{

    position:absolute;

    left:0;
    right:0;
    bottom:0;

    padding:22px;

    background:linear-gradient(
        to top,
        rgba(0,0,0,.88),
        rgba(0,0,0,.55),
        transparent
    );

    color:#fff;
}

.mmt-gallery-overlay h3{

    margin:0 0 15px;

    font-size:22px;

    line-height:1.3;

    font-weight:600;
}

.mmt-gallery-overlay a{

    display:inline-flex;

    align-items:center;

    gap:8px;

    color:#1b84ff;

    text-decoration:none;

    font-size:14px;

    font-weight:700;

    transition:.3s;
}

.mmt-gallery-overlay a i{

    transition:.3s;
}

.mmt-gallery-card:hover img{

    transform:scale(1.08);
}

.mmt-gallery-card:hover{

    transform:translateY(-6px);
}

.mmt-gallery-card:hover a i{

    transform:translateX(6px);
}

/*==============================
        TABLET
==============================*/

@media(max-width:991px){

.mmt-gallery-grid{

grid-template-columns:repeat(2,1fr);

gap:18px;
}

.mmt-gallery-card{

height:220px;
}

.mmt-gallery-overlay h3{

font-size:20px;
}

}

/*==============================
        MOBILE
==============================*/

@media(max-width:767px){

.mmt-project-gallery{

padding:45px 0;
}

.mmt-gallery-heading{

gap:10px;
margin-bottom:25px;
}

.mmt-gallery-heading span{

width:35px;
}

.mmt-gallery-heading h2{

font-size:22px;
}

.mmt-gallery-grid{

grid-template-columns:1fr;

gap:18px;
}

.mmt-gallery-card{

height:240px;
}

.mmt-gallery-overlay{

padding:18px;
}

.mmt-gallery-overlay h3{

font-size:18px;
}
}
 /*================whatup button==================*/
   .button-out {
  position: fixed;
  right: 0;
  bottom: 40vh;
  z-index: 999;
}
     .whats-app {
      background: #25D366;
      /* Official WhatsApp green */
      width: 50px;
      height: 50px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 2em;
      position: fixed;
      bottom: 10vh;
      right: 25px;
      z-index: 120000;
      border-radius: 50%;
      color: #fff;
      text-decoration: none;
      animation: float 3s ease-in-out infinite;
      transition: transform 0.3s ease, box-shadow 0;
    }
    
    /* Icon color */
    .whats-app i {
      color: #fff;
    }
    
    /* Premium Pulse Ring */
    .whats-app::before {
      content: "";
      position: absolute;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background: rgba(37, 211, 102, 0.4);
      /* Matching WhatsApp green */
      animation: pulseRing 2.5s infinite;
      z-index: -1;
    }
    
    /* Soft glossy shine */
    .whats-app::after {
      content: "";
      position: absolute;
      inset: 4px;
      border-radius: 50%;
      background: radial-gradient(circle at 30% 30%,
          rgba(255, 255, 255, 0.4),
          transparent 60%);
      pointer-events: none;
    }
    
    /* Hover effect */
    .whats-app:hover {
      animation-play-state: paused;
      transform: scale(1.1);
      background: #1DA851;
      /* Slightly darker green for hover */
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    }
    .whats-app a{
    width:100%;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    text-decoration:none !important;
    border:none !important;
    outline:none !important;
    box-shadow:none !important;
}
    /* Floating animation */
@keyframes float {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }
}

/* Pulse ring animation */
@keyframes pulseRing {
  0% {
    transform: scale(1);
    opacity: 0.7;
  }

  70% {
    transform: scale(1.6);
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}




.mmtProducts .mmtContent a{
    
    color: #6B7280;

}

















/* ===== MMT Product Grid – Image Fix ===== */

.mmtGrid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
}

.mmtCard {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
}

/* Image container — fixed height so every card looks uniform */
.mmtImage {
    width: 100%;
    height: 220px;          /* adjust height as per your design */
    overflow: hidden;
    position: relative;
    background: #f5f5f5;    /* placeholder bg while loading */
}

/* The actual image — fits fully without stretching/distortion */
.mmtImage img {
    width: 100%;
    height: 100%;
    object-fit: cover;      /* image fully covers box, no gaps, no stretch */
    object-position: center;
    display: block;
    transition: transform 0.3s ease;
}

/* Optional: subtle zoom on hover */
.mmtCard:hover .mmtImage img {
    transform: scale(1.06);
}

/* Content below image */
.mmtContent {
    padding: 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.mmtContent span {
    font-size: 12px;
    color: #0d6efd;
    text-transform: uppercase;
    font-weight: 600;
}

.mmtContent h3 {
    margin: 6px 0;
    font-size: 18px;
    color: #111;
}

.mmtContent p {
    font-size: 14px;
    color: #555;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.mmtArrow {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border: 1px solid #ddd;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Responsive */
@media (max-width: 768px) {
    .mmtImage {
        height: 180px;
    }
}




.mmtProducts1 .col-md-6 img {
    width: 100%;
    height: 100%;
    max-height: 420px;
    object-fit: inherit !important;
    border-radius: 14px;
    display: block;
}





.navCon.active {
    background: #ffffff !important;
}

/*.navCon.active .logo-text {*/
/*    fill: #000000 !important;*/
/*}*/

.navCon.active .nav-links li a {
    color: #000000 !important;
}








































