/* =========================
   UPDATED IMAGE SIZE
========================= */

.service-feature-image{
  width: 100%;
  max-width: 480px;   
  height: 520px;     
  margin-left: auto;
  position: relative;
  overflow: hidden;
  border-radius: 46px;
  background: #eaf1fb;
  box-shadow: 0 18px 45px rgba(20, 43, 86, 0.12);
}

.service-feature-image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.service-feature-image{
  width: 100%;
  max-width: 500px;   /* balanced width */
  height: 520px;      /* proper height */
  margin-left: auto;
  position: relative;
  overflow: hidden;
  border-radius: 46px;
  background: #eaf1fb;
  box-shadow: 0 18px 45px rgba(20, 43, 86, 0.12);
}

.service-feature-image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* blue overlay */
.service-feature-image::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(96, 146, 219, 0.14),
    rgba(96, 146, 219, 0.22)
  );
}
/* =========================
   COMMON IMAGE STYLE (ALL TABS)
========================= */

.service-feature-image{
  width: 100%;
  max-width: 500px;   /* perfect width */
  height: 520px;      /* balanced height */
  margin-left: auto;
  position: relative;
  overflow: hidden;
  border-radius: 46px;
  background: #eaf1fb;
  box-shadow: 0 18px 45px rgba(20, 43, 86, 0.12);
}

.service-feature-image img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* optional soft overlay */
.service-feature-image::after{
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(96, 146, 219, 0.12),
    rgba(96, 146, 219, 0.18)
  );
}

/* =========================
   RESPONSIVE
========================= */

@media (max-width: 991px){
  .service-feature-image{
    max-width: 380px;
    height: 500px;
    margin: 0 auto;
  }
}

@media (max-width: 576px){
  .service-feature-image{
    max-width: 100%;
    height: 440px;
  }
}


.brand{
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.brand-logo{
  height: 42px;
  width: auto;
}

.brand-text{
  font-size: 20px;
  font-weight: 700;
  color: #2E2F78;
}   
/* =========================
   FLASH SCREEN
========================= */
#flash-screen{
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  overflow: hidden;
  transition: opacity 0.7s ease, visibility 0.7s ease;
}

.flash-inner{
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* LOGO */
.flash-logo-wrap{
  opacity: 0;
  transform: scale(0.75) translateY(18px);
  animation: logoIntro 0.9s ease forwards;
  margin-bottom: 10px;
}

.flash-logo-img{
  width: 165px;
  height: auto;
  object-fit: contain;
  display: block;
}

/* TEXT BLOCK */
.flash-text-wrap{
  text-align: center;
}

.flash-title{
  margin: 0;
  font-size: 68px;
  line-height: 0.95;
  font-weight: 900;
  letter-spacing: -2px;
  color: #09162d;
  font-family: Inter, Arial, sans-serif;
  opacity: 0;
  transform: translateY(18px);
  animation: titleReveal 0.7s ease forwards;
  animation-delay: 0.75s;
}

.flash-subtitle{
  margin: 10px 0 14px;
  font-size: 15px;
  font-weight: 500;
  color: #66758a;
  letter-spacing: 0.2px;
  font-family: Inter, Arial, sans-serif;
  opacity: 0;
  transform: translateY(14px);
  animation: subtitleReveal 0.7s ease forwards;
  animation-delay: 1.15s;
}

/* LOADER */
.flash-loader-wrap{
  width: 360px;
  height: 8px;
  background: #dfe7f1;
  border-radius: 999px;
  overflow: hidden;
  margin: 0 auto;
  opacity: 0;
  transform: translateY(10px);
  animation: loaderWrapReveal 0.5s ease forwards;
  animation-delay: 1.45s;
}

.flash-loader-bar{
  width: 0%;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #0d47a1, #2196f3);
  animation: flashLoad 1.6s ease forwards;
  animation-delay: 1.7s;
}

/* ANIMATIONS */
@keyframes logoIntro{
  to{
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes titleReveal{
  to{
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes subtitleReveal{
  to{
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes loaderWrapReveal{
  to{
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes flashLoad{
  from{
    width: 0%;
  }
  to{
    width: 100%;
  }
}

/* HIDE STATE */
#flash-screen.hide{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* MOBILE */
@media (max-width: 768px){
  .flash-logo-img{
    width: 125px;
  }

  .flash-title{
    font-size: 42px;
    letter-spacing: -1px;
  }

  .flash-subtitle{
    font-size: 13px;
    margin: 8px 0 12px;
  }

  .flash-loader-wrap{
    width: 260px;
    height: 7px;
  }
}

/* ===========================
   MOBILE HEADER
=========================== */

.hamburger{
    display:none;
    width:48px;
    height:48px;
    background:#113d8d;
    border:none;
    border-radius:12px;
    cursor:pointer;

    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:6px;
}

.hamburger span{
    width:24px;
    height:3px;
    background:#fff;
    border-radius:5px;
    transition:.35s;
}

@media(max-width:992px){

.site-header{
    background:#fff;
}

.header-inner{
    height:75px;
}

.brand{
    color:#113d8d !important;
    font-size:22px;
}

.header-cta{
    display:none;
}

.hamburger{
    display:flex;
}

.main-nav{

    position:fixed;

    top:75px;
    left:-100%;

    width:280px;
    height:calc(100vh - 75px);

    background:#fff;

    transition:.4s;

    padding:25px;

    box-shadow:0 0 25px rgba(0,0,0,.12);

    overflow:auto;

    z-index:999;
}

.main-nav.open{
    left:0;
}

.main-nav ul{

    display:flex;

    flex-direction:column;

    gap:18px;

    width:100%;
}

.main-nav ul li{

    width:100%;
}

.main-nav ul li a{

    display:block;

    width:100%;

    color:#222 !important;

    padding:14px 10px;

    border-radius:10px;

    background:#f4f7fb;
}

.mega-menu{

    display:none !important;
}

}

.ready-products{

    padding:120px 0;
    background:#fff;

}

.products-wrapper{

    display:flex;
    flex-direction:column;
    gap:70px;
    margin-top:70px;

}

.product-item{

    display:grid;
    grid-template-columns:1fr 1fr;
    gap:60px;
    align-items:center;

}

.product-item.reverse .product-image{

    order:2;

}

.product-item.reverse .product-content{

    order:1;

}

.product-image img{

    width:100%;
    border-radius:24px;
    box-shadow:0 15px 40px rgba(0,0,0,.08);

}

.product-tag{

    display:inline-block;
    background:#EAF3FF;
    color:#0D5BFF;
    padding:8px 18px;
    border-radius:40px;
    font-size:14px;
    font-weight:600;
    margin-bottom:18px;

}

.product-content h3{

    font-size:34px;
    margin-bottom:18px;
    color:#0A2540;

}

.product-content p{

    color:#666;
    line-height:1.8;
    margin-bottom:30px;

}

@media(max-width:992px){

.product-item{

    grid-template-columns:1fr;
    gap:35px;

}

.product-item.reverse .product-image,
.product-item.reverse .product-content{

    order:unset;

}

.product-content{

    text-align:center;

}

.product-tag{

    margin:auto auto 18px;

}

}


/* new section added*/


/*=====================================
        VELOCHID SHOWCASE
=====================================*/

.vx-showcase{
    padding:120px 0;
    background:#ffffff;
    overflow:hidden;
}

.vx-container{
    width:90%;
    max-width:1450px;
    margin:auto;
    display:grid;
    grid-template-columns:520px 1fr;
    align-items:center;
    gap:80px;
}

/* LEFT */

.vx-badge{
    display:inline-flex;
    align-items:center;
    padding:12px 22px;
    border-radius:50px;
    background:#edf4ff;
    color:#0d5bff;
    font-size:13px;
    font-weight:700;
    letter-spacing:1px;
    margin-bottom:28px;
}

.vx-content h2{
    font-size:68px;
    line-height:1.05;
    font-weight:800;
    color:#111827;
    margin-bottom:28px;
}

.vx-content h2 span{
    color:#0d5bff;
}

.vx-content p{
    font-size:18px;
    line-height:1.9;
    color:#6b7280;
    margin-bottom:35px;
}

.vx-list{
    list-style:none;
    margin:0;
    padding:0;
}

.vx-list li{
    display:flex;
    align-items:center;
    gap:14px;
    margin-bottom:18px;
    font-size:17px;
    color:#1f2937;
    font-weight:500;
}

.vx-list i{
    color:#0d5bff;
    font-size:20px;
}

.vx-buttons{
    display:flex;
    gap:18px;
    margin-top:40px;
}

.vx-btn-primary{
    background:#0d5bff;
    color:#fff;
    text-decoration:none;
    padding:18px 34px;
    border-radius:60px;
    font-weight:600;
    transition:.35s;
}

.vx-btn-primary:hover{
    background:#003fc4;
    transform:translateY(-4px);
}

.vx-btn-outline{
    padding:18px 34px;
    border-radius:60px;
    border:2px solid #0d5bff;
    color:#0d5bff;
    text-decoration:none;
    font-weight:600;
    transition:.35s;
}

.vx-btn-outline:hover{
    background:#0d5bff;
    color:#fff;
}

/* RIGHT */

.vx-media{
    position:relative;
}

.vx-video-card{
    padding:12px;
    background:#fff;
    border-radius:32px;
    box-shadow:0 30px 80px rgba(17,24,39,.12);
    border:1px solid #eef2f7;
}

.vx-video-card video{
    width:100%;
    height:680px;
    object-fit:cover;
    display:block;
    border-radius:24px;
}

/* FLOATING CARDS */

.vx-card{
    position:absolute;
    background:#fff;
    padding:22px 28px;
    border-radius:22px;
    box-shadow:0 15px 45px rgba(0,0,0,.12);
}

.vx-card h3{
    color:#0d5bff;
    font-size:34px;
    margin-bottom:6px;
}

.vx-card p{
    color:#555;
    font-size:15px;
}

.vx-card.one{
    top:35px;
    left:-50px;
}

.vx-card.two{
    bottom:45px;
    right:-35px;
}

.vx-bottom-card{
    position:absolute;
    left:50%;
    bottom:-25px;
    transform:translateX(-50%);
    background:#0d5bff;
    color:#fff;
    padding:16px 28px;
    border-radius:50px;
    display:flex;
    align-items:center;
    gap:10px;
    font-weight:600;
    box-shadow:0 20px 50px rgba(13,91,255,.35);
}

.vx-bottom-card i{
    font-size:18px;
}

/*=========================
        HOVER
=========================*/

.vx-video-card{
    transition:.45s;
}

.vx-video-card:hover{
    transform:translateY(-10px);
    box-shadow:0 45px 100px rgba(0,0,0,.18);
}

.vx-card{
    transition:.4s;
}

.vx-card:hover{
    transform:translateY(-8px);
}

/*=========================
        RESPONSIVE
=========================*/

@media(max-width:1200px){

.vx-container{
    grid-template-columns:1fr;
}

.vx-content{
    text-align:center;
}

.vx-buttons{
    justify-content:center;
}

.vx-list{
    display:inline-block;
    text-align:left;
}

.vx-media{
    margin-top:40px;
}

.vx-card.one{
    left:20px;
}

.vx-card.two{
    right:20px;
}

}

@media(max-width:768px){

.vx-showcase{
    padding:80px 0;
}

.vx-content h2{
    font-size:42px;
}

.vx-content p{
    font-size:16px;
}

.vx-video-card video{
    height:300px;
}

.vx-buttons{
    flex-direction:column;
}

.vx-btn-primary,
.vx-btn-outline{
    width:100%;
    text-align:center;
}

.vx-card{
    display:none;
}

.vx-bottom-card{
    position:relative;
    left:0;
    bottom:0;
    transform:none;
    margin-top:20px;
    justify-content:center;
}

}

.vx-media{
    width:100%;
    display:flex;
    justify-content:center;
    align-items:center;
}

.vx-video-card{

    width:100%;
    max-width:900px;

    aspect-ratio:16/9;

    border-radius:30px;

    overflow:hidden;

    padding:10px;

    background:#fff;

    box-shadow:0 25px 60px rgba(0,0,0,.12);

}

.vx-video-card video{

    width:100%;
    height:100%;

    object-fit:cover;

    border-radius:22px;

    display:block;

}



.hero{

    position: relative;

    width: 100%;

    height:   85vh;      /* 50% screen height */

    min-height: 420px; /* optional */

    overflow: hidden;

    display: flex;

    align-items: center;

}

































































/*=========================================
            OUR SERVICES
==========================================*/

.services-section{
    padding:120px 0;
    background:#fff;
}

.services-container{
    width:min(1200px,90%);
    margin:auto;
}

/*=========================
        Heading
=========================*/

.services-header{
    max-width:520px;
    margin-bottom:90px;
}

.services-header h2{
    font-size:64px;
    font-weight:700;
    color:#111;
    margin-bottom:22px;
    line-height:1.1;
}

.services-header p{
    font-size:18px;
    color:#666;
    line-height:1.8;
}

/*=========================
        Layout
=========================*/
/* First Card */
.right-card:first-child{
    width:430px;
    margin-left:auto;
    margin-top:0;
}

/* Second Card */
.left-card{
    width:430px;
    margin-right:auto;
    margin-top:-80px;   /* वर आणेल */
}

/* Third Card */
.right-card:last-child{
    width:430px;
    margin-left:auto;
    margin-top:-80px;   /* वर आणेल */
}
/* Right Card */

.right-card{
    width:430px;
    margin-left:auto;
}

/* Left Card */

.left-card{
    width:430px;
    margin-right:auto;
}

/*=========================
        Video
=========================*/

.service-video{
    width:100%;
    aspect-ratio:4/5;
    overflow:hidden;
    border-radius:28px;
    background:#eee;
    box-shadow:0 20px 60px rgba(0,0,0,.08);
}

.service-video video{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:1s;
}

.service-card:hover video{
    transform:scale(1.08);
}

/*=========================
        Content
=========================*/

.service-content{
    margin-top:28px;
}

.service-content h3{
    font-size:34px;
    font-weight:600;
    color:#111;
    margin-bottom:16px;
    line-height:1.2;
}

.service-content p{
    font-size:17px;
    color:#666;
    line-height:1.8;
}

/*=========================
        Button
=========================*/

.services-btn{
    margin-top:90px;
    text-align:center;
}

.view-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:230px;
    height:60px;
    border:2px solid #111;
    border-radius:50px;
    text-decoration:none;
    color:#111;
    font-weight:600;
    transition:.35s;
}

.view-btn:hover{
    background:#111;
    color:#fff;
}

/*=========================
        Hover
=========================*/

.service-card{
    transition:.4s;
}

.service-card:hover{
    transform:translateY(-12px);
}

/*=========================
        Responsive
=========================*/

@media(max-width:991px){

.right-card,
.left-card{
    width:100%;
    margin:auto;
}

.services-grid{
    gap:70px;
}

.services-header h2{
    font-size:48px;
}

}

@media(max-width:600px){

.services-section{
    padding:80px 0;
}

.services-header{
    margin-bottom:60px;
}

.services-header h2{
    font-size:36px;
}

.service-content h3{
    font-size:28px;
}

.service-content p{
    font-size:16px;
}

.view-btn{
    width:190px;
    height:54px;
}

}
.right-card:first-child{
    margin-top:-40px;
}

.left-card{
    margin-top:-60px;
}

.right-card:last-child{
    margin-top:-60px;
}
.service-video{
    width:100%;
    max-width:500px;
    height:650px;      /* Screenshot sarkhi height */
    border-radius:28px;
    overflow:hidden;
    background:#f5f5f5;
}

.service-video video{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.service-video{
    width:100%;
    max-width:500px;
    aspect-ratio:4/5;      /* Same feel as screenshot */
    border-radius:28px;
    overflow:hidden;
}

.service-video video{
    width:100%;
    height:100%;
    object-fit:cover;
}





/*=========================================
        STACK SERVICES
=========================================*/

.stack-services{

    width:100%;
    background:#fff;
    padding:80px 0 150px;
    position:relative;

}

.stack-card{

    width:92%;
    max-width:1700px;
    height:760px;

    margin:0 auto 80px;

    border-radius:35px;

    overflow:hidden;

    display:flex;

    align-items:center;

    justify-content:space-between;

    position:sticky;

    top:90px;

    box-shadow:0 35px 80px rgba(0,0,0,.12);

}

/*=========================
        LEFT
=========================*/

.stack-left{

    width:58%;

    padding:70px;

    display:flex;

    flex-direction:column;

    justify-content:center;

}

.stack-tag{

    font-size:14px;

    letter-spacing:3px;

    font-weight:700;

    text-transform:uppercase;

    margin-bottom:25px;

}

.stack-left h2{

    font-size:72px;

    line-height:1.05;

    margin-bottom:30px;

    font-weight:700;

}

.stack-left p{

    font-size:28px;

    line-height:1.8;

    max-width:780px;

    margin-bottom:45px;

}

/*=========================
        LIST
=========================*/

.stack-list{

    display:flex;

    gap:80px;

    margin-bottom:60px;

}

.stack-list ul{

    list-style:disc;

    padding-left:30px;

}

.stack-list li{

    font-size:26px;

    margin-bottom:20px;

}

/*=========================
        BUTTON
=========================*/

.stack-btn{

    width:max-content;

    padding:22px 40px;

    border-radius:14px;

    text-decoration:none;

    font-size:22px;

    font-weight:600;

    display:flex;

    align-items:center;

    gap:12px;

    transition:.4s;

}

.stack-btn:hover{

    transform:translateY(-6px);

}

/*=========================
        RIGHT
=========================*/

.stack-right{

    width:42%;

    height:100%;

    overflow:hidden;

}

.stack-right img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.7s;

}

.stack-card:hover img{

    transform:scale(1.06);

}

/*=========================
        COLORS
=========================*/

.white{

    background:#ffffff;

    color:#111;

}

.white .stack-btn{

    background:#111;

    color:#fff;

}

.purple{

    background:#4f46e5;

    color:#fff;

}

.purple .stack-btn{

    background:#fff;

    color:#111;

}

.yellow{

    background:#ffd633;

    color:#111;

}

.yellow .stack-btn{

    background:#111;

    color:#fff;

}

.orange{

    background:#ff5a1f;

    color:#fff;

}

.orange .stack-btn{

    background:#fff;

    color:#111;

}

/*=========================
        RESPONSIVE
=========================*/

@media(max-width:1200px){

.stack-card{

    flex-direction:column;

    height:auto;

}

.stack-left,
.stack-right{

    width:100%;

}

.stack-right{

    height:500px;

}

.stack-left{

    padding:50px;

}

.stack-left h2{

    font-size:54px;

}

.stack-left p{

    font-size:22px;

}

.stack-list{

    flex-direction:column;

    gap:20px;

}

}

@media(max-width:768px){

.stack-card{

    border-radius:20px;

    margin-bottom:50px;

}

.stack-left{

    padding:30px;

}

.stack-left h2{

    font-size:38px;

}

.stack-left p{

    font-size:18px;

}

.stack-list li{

    font-size:18px;

}

.stack-btn{

    width:100%;

    justify-content:center;

    font-size:18px;

}

.stack-right{

    height:320px;

}

}

/*=========================
        CARD
=========================*/

.stack-card{

    width:92%;
    max-width:1550px;
    height:620px;          /* 760px -> 620px */

    margin:0 auto 70px;

    border-radius:30px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    position:sticky;
    top:90px;

    overflow:hidden;

    box-shadow:0 25px 60px rgba(0,0,0,.12);

}

/*=========================
        LEFT
=========================*/

.stack-left{

    width:48%;             /* Smaller content */
    padding:55px 60px;

}

.stack-tag{

    font-size:13px;
    letter-spacing:2px;
    margin-bottom:18px;

}

.stack-left h2{

    font-size:52px;        /* 72px -> 52px */
    line-height:1.1;
    margin-bottom:20px;

}

.stack-left p{

    font-size:20px;        /* 28px -> 20px */
    line-height:1.7;
    margin-bottom:30px;
    max-width:560px;

}

/*=========================
        LIST
=========================*/

.stack-list{

    display:flex;
    gap:45px;
    margin-bottom:35px;

}

.stack-list li{

    font-size:18px;
    margin-bottom:12px;

}

/*=========================
        BUTTON
=========================*/

.stack-btn{

    padding:16px 28px;
    font-size:18px;
    border-radius:12px;

}

/*=========================
        RIGHT IMAGE
=========================*/

.stack-right{

    width:52%;
    height:100%;
    overflow:hidden;

}

.stack-right img{

    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;

}






















/*====================================
        TABLET
=====================================*/

@media (max-width:991px){

.stack-services{

    padding:70px 20px;
    gap:50px;

}

.stack-card{

    flex-direction:column;
    padding:50px 35px;
    border-radius:30px;
    gap:40px;

}

.stack-left,
.stack-right{

    width:100%;

}

.stack-right{

    display:flex;
    justify-content:center;

}

.stack-right img{

    width:100%;
    max-width:450px;
    height:auto;

}

.stack-left h2{

    font-size:42px;
    line-height:1.15;

}

.stack-left p{

    font-size:17px;

}

.stack-list{

    flex-direction:column;
    gap:20px;

}

.stack-btn{

    width:fit-content;

}

}



/*====================================
        MOBILE
=====================================*/

@media (max-width:768px){

.stack-services{

    padding:60px 18px;
    gap:35px;

}

.stack-card{

    flex-direction:column;
    padding:30px 22px;
    border-radius:24px;
    gap:30px;

}

.stack-left,
.stack-right{

    width:100%;

}

.stack-right{

    order:-1;
    display:flex;
    justify-content:center;

}

.stack-right img{

    width:100%;
    max-width:320px;
    height:auto;
    border-radius:18px;

}

.stack-tag{

    font-size:12px;
    padding:7px 14px;

}

.stack-left h2{

    font-size:30px;
    line-height:1.2;
    margin:15px 0;

}

.stack-left p{

    font-size:16px;
    line-height:1.7;

}

.stack-list{

    display:flex;
    flex-direction:column;
    gap:18px;
    margin:25px 0;

}

.stack-list ul{

    padding-left:18px;

}

.stack-list li{

    font-size:15px;
    margin-bottom:10px;

}

.stack-btn{

    width:100%;
    justify-content:center;
    padding:16px;
    font-size:16px;

}

}



/*====================================
        SMALL MOBILE
=====================================*/

@media (max-width:480px){

.stack-services{

    padding:50px 15px;

}

.stack-card{

    padding:24px 18px;

}

.stack-left h2{

    font-size:26px;

}

.stack-left p{

    font-size:15px;

}

.stack-right img{

    max-width:100%;

}

.stack-btn{

    font-size:15px;
    padding:15px;

}

}












/*==================================
        VELORCHID FOOTER
==================================*/

.vx-footer{
    background:#f3f5f8;
    padding:80px 25px;
}

.vx-footer-box{
    max-width:1500px;
    margin:auto;
    background:#ffffff;
    border-radius:42px;
    padding:70px;
    position:relative;
    overflow:hidden;
    box-shadow:
    0 30px 90px rgba(0,0,0,.08);
}

/*==========================
        TOP
===========================*/

.vx-footer-top{

    display:grid;
    grid-template-columns:
    1.8fr
    1fr
    1fr
    1.2fr;

    gap:70px;

    position:relative;

    z-index:2;

}

.vx-brand{

    max-width:420px;

}

.vx-logo{

    display:flex;

    align-items:center;

    gap:15px;

    text-decoration:none;

    margin-bottom:30px;

}

.vx-logo img{

    width:58px;

    height:58px;

    object-fit:contain;

}

.vx-logo span{

    font-size:30px;

    font-weight:800;

    letter-spacing:2px;

    color:#101010;

}

.vx-brand p{

    font-size:17px;

    line-height:1.9;

    color:#777;

    margin-bottom:35px;

}

/*==========================
       SOCIAL
===========================*/

.vx-social{

    display:flex;

    gap:14px;

}

.vx-social a{

    width:52px;

    height:52px;

    border-radius:50%;

    background:#f5f5f5;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#111;

    font-size:20px;

    text-decoration:none;

    transition:.35s;

}

.vx-social a:hover{

    background:#0f8b6d;

    color:#fff;

    transform:translateY(-6px);

}

/*==========================
      LINKS
===========================*/

.vx-links h4,
.vx-contact h4{

    font-size:22px;

    margin-bottom:28px;

    color:#111;

}

.vx-links{

    display:flex;

    flex-direction:column;

}

.vx-links a{

    text-decoration:none;

    color:#666;

    margin-bottom:18px;

    font-size:17px;

    transition:.3s;

}

.vx-links a:hover{

    color:#0f8b6d;

    padding-left:10px;

}

.vx-contact p{

    color:#666;

    margin-bottom:18px;

    font-size:17px;

    line-height:1.8;

}

/*==========================
     BIG TEXT
===========================*/

.vx-big-text{

    margin-top:90px;

    text-align:center;

    position:relative;

    z-index:1;

}

.vx-big-text h1{

    font-size:clamp(90px,15vw,260px);

    line-height:.82;

    font-weight:900;

    letter-spacing:-8px;

    color:#ececec;

    text-transform:uppercase;

    user-select:none;

}





/*==================================
        FOOTER BOTTOM
==================================*/

.vx-footer-bottom{

    margin-top:40px;

    padding-top:35px;

    border-top:1px solid #e8e8e8;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:30px;

    position:relative;

    z-index:3;

}

.vx-footer-bottom p{

    color:#777;

    font-size:15px;

    letter-spacing:.3px;

}

.vx-bottom-links{

    display:flex;

    align-items:center;

    gap:35px;

}

.vx-bottom-links a{

    position:relative;

    color:#666;

    text-decoration:none;

    font-size:15px;

    transition:.35s;

}

.vx-bottom-links a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-6px;

    width:0;

    height:2px;

    background:#0f8b6d;

    transition:.35s;

}

.vx-bottom-links a:hover{

    color:#111;

}

.vx-bottom-links a:hover::after{

    width:100%;

}

/*==================================
        DECORATION
==================================*/

.vx-footer-box::before{

    content:"";

    position:absolute;

    width:520px;

    height:520px;

    right:-220px;

    top:-220px;

    border-radius:50%;

    background:radial-gradient(circle,
    rgba(15,139,109,.10),
    transparent 70%);

}

.vx-footer-box::after{

    content:"";

    position:absolute;

    width:380px;

    height:380px;

    left:-170px;

    bottom:-170px;

    border-radius:50%;

    background:radial-gradient(circle,
    rgba(15,139,109,.08),
    transparent 70%);

}

/*==================================
        RESPONSIVE
==================================*/

@media(max-width:1200px){

.vx-footer-top{

grid-template-columns:repeat(2,1fr);

gap:50px;

}

.vx-big-text h1{

font-size:130px;

}

}

@media(max-width:768px){

.vx-footer{

padding:30px 15px;

}

.vx-footer-box{

padding:45px 28px;

border-radius:28px;

}

.vx-footer-top{

grid-template-columns:1fr;

gap:40px;

}

.vx-brand{

max-width:100%;

}

.vx-big-text{

margin-top:60px;

}

.vx-big-text h1{

font-size:62px;

letter-spacing:-2px;

}

.vx-footer-bottom{

flex-direction:column;

align-items:flex-start;

}

.vx-bottom-links{

flex-wrap:wrap;

gap:16px;

}

.vx-logo span{

font-size:24px;

}

.vx-links h4,
.vx-contact h4{

font-size:20px;

}

}

@media(max-width:480px){

.vx-footer-box{

padding:35px 22px;

}

.vx-social a{

width:46px;

height:46px;

font-size:18px;

}

.vx-brand p,
.vx-links a,
.vx-contact p{

font-size:15px;

}

.vx-big-text h1{

font-size:46px;

}

}

.vx-footer-box{
max-width:1550px;
}
.vx-big-text h1{
font-weight:900;
letter-spacing:-10px;
}

.vx-footer{

background:var(--bg);

padding:90px 25px;

}

.vx-footer-box{

background:var(--card);

border-radius:46px;

border:1px solid var(--border);

box-shadow:

0 30px 90px rgba(15,25,35,.05);

}

.vx-logo span{

font-size:30px;

font-weight:800;

color:var(--heading);

letter-spacing:2px;

}

.vx-brand p{

color:var(--text);

line-height:1.9;

font-size:17px;

}

.vx-links h4,
.vx-contact h4{

color:var(--heading);

font-size:22px;

font-weight:700;

margin-bottom:28px;

}

.vx-links a{

color:#666;

}

.vx-links a:hover{

color:var(--primary);

}

.vx-social a{

background:var(--icon);

color:#222;

border:1px solid #EBEBEB;

}

.vx-social a:hover{

background:var(--primary);

color:#fff;

box-shadow:

0 18px 45px rgba(30,122,90,.28);

}













































/*==============================
        IDEA SECTION
==============================*/

.idea-section{

    position:relative;

    width:100%;

    height:100vh;

    overflow:hidden;

    display:flex;

    align-items:center;

    justify-content:center;

}

/* Video */

.idea-video{

    position:absolute;

    inset:0;

    width:100%;

    height:100%;

    object-fit:cover;

}

/* Overlay */

.idea-overlay{

    position:absolute;

    inset:0;

    background:
    linear-gradient(
    rgba(0,0,0,.45),
    rgba(0,0,0,.45));

}

/* Content */

.idea-content{

    position:relative;

    z-index:2;

    text-align:center;

}

/* Heading */

.idea-content h2{

    color:#fff;

    font-size:clamp(70px,10vw,180px);

    line-height:.92;

    font-weight:300;

    letter-spacing:-4px;

    margin-bottom:50px;

}

/* Button */

.idea-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:28px 90px;

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

    border-radius:120px;

    text-decoration:none;

    color:#fff;

    font-size:clamp(30px,4vw,90px);

    font-weight:300;

    letter-spacing:2px;

    backdrop-filter:blur(8px);

    transition:.45s;

}

/* Hover */

.idea-btn:hover{

    background:#1E7A5A;

    border-color:#1E7A5A;

    transform:translateY(-6px);

    box-shadow:

    0 30px 60px rgba(30,122,90,.35);

}

/* Mobile */

@media(max-width:768px){

.idea-section{

height:75vh;

}

.idea-content h2{

font-size:60px;

margin-bottom:30px;

}

.idea-btn{

padding:18px 50px;

font-size:34px;

}

}




























/*=========================================
        BENTO SECTION
=========================================*/

.bento-section{
    padding:120px 6%;
    background:#f7f8f6;
}

.bento-heading{
    max-width:750px;
    margin:0 auto 70px;
    text-align:center;
}

.bento-tag{
    display:inline-block;
    padding:10px 22px;
    border-radius:50px;
    background:#e8f5ef;
    color:#0f8b6d;
    font-size:.9rem;
    font-weight:600;
    letter-spacing:2px;
    margin-bottom:18px;
}

.bento-heading h2{
    font-size:clamp(2.8rem,5vw,4.8rem);
    line-height:1.05;
    color:#111;
    margin-bottom:20px;
}

.bento-heading p{
    color:#666;
    line-height:1.8;
    font-size:1.08rem;
}

/*=========================================
        GRID
=========================================*/

.bento-grid{

    display:grid;

    grid-template-columns:repeat(3,1fr);

    grid-auto-rows:360px;

    gap:25px;

}

.large{

    grid-column:span 2;

    grid-row:span 2;

}

.wide{

    grid-column:span 2;

}

/*=========================================
        CARD
=========================================*/

.bento-card{

    position:relative;

    overflow:hidden;

    border-radius:34px;

    background:#fff;

    box-shadow:
    0 18px 55px rgba(0,0,0,.06);

    transition:.5s ease;

}

.bento-card:hover{

    transform:translateY(-12px);

    box-shadow:
    0 35px 70px rgba(0,0,0,.12);

}

/*=========================================
        IMAGE / VIDEO
=========================================*/

.bento-image,
.bento-video{

    position:absolute;

    inset:0;

}

.bento-image img,
.bento-video video{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:1s;

}

.bento-card:hover img,
.bento-card:hover video{

    transform:scale(1.08);

}

/*=========================================
        OVERLAY
=========================================*/

.bento-card::before{

    content:"";

    position:absolute;

    inset:0;

    background:
    linear-gradient(
    to top,
    rgba(0,0,0,.72),
    rgba(0,0,0,.12));

    z-index:1;

}

/*=========================================
        CONTENT
=========================================*/

.bento-content{

    position:absolute;

    left:35px;

    right:35px;

    bottom:35px;

    z-index:2;

    color:#fff;

}

.bento-content span{

    display:inline-block;

    margin-bottom:12px;

    color:#7ef0c4;

    font-weight:700;

    letter-spacing:2px;

}

.bento-content h3{

    font-size:2rem;

    line-height:1.15;

    margin-bottom:15px;

}

.bento-content p{

    color:#ddd;

    line-height:1.8;

    margin-bottom:22px;

}

.bento-content a{

    display:inline-flex;

    align-items:center;

    gap:10px;

    color:#fff;

    text-decoration:none;

    font-weight:600;

    transition:.35s;

}

.bento-content a:hover{

    color:#7ef0c4;

    transform:translateX(8px);

}

/*=========================================
        RESPONSIVE
=========================================*/

@media(max-width:1100px){

.bento-grid{

grid-template-columns:repeat(2,1fr);

}

.large,
.wide{

grid-column:span 2;

}

}

@media(max-width:768px){

.bento-section{

padding:80px 20px;

}

.bento-grid{

grid-template-columns:1fr;

grid-auto-rows:320px;

}

.large,
.wide{

grid-column:span 1;

grid-row:span 1;

}

.bento-heading h2{

font-size:2.4rem;

}

.bento-content{

left:25px;
right:25px;
bottom:25px;

}

.bento-content h3{

font-size:1.6rem;

}

}
/*=========================================
        GLOW BORDER
=========================================*/

.bento-card{

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

    position:relative;

}

.bento-card::after{

    content:"";

    position:absolute;

    inset:0;

    border-radius:34px;

    padding:1px;

    background:linear-gradient(
    135deg,
    rgba(30,122,90,.8),
    transparent,
    rgba(255,255,255,.35));

    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);

    -webkit-mask-composite:xor;

    mask-composite:exclude;

    opacity:0;

    transition:.5s;

}

.bento-card:hover::after{

    opacity:1;

}

.large{

    animation:floatLarge 7s ease-in-out infinite;

}

.wide{

    animation:floatWide 8s ease-in-out infinite;

}

@keyframes floatLarge{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(-10px);

}

}

@keyframes floatWide{

0%,100%{

transform:translateY(0);

}

50%{

transform:translateY(8px);

}

}

.bento-section{

position:relative;

overflow:hidden;

}

.bento-section::before{

content:"";

position:absolute;

width:450px;

height:450px;

background:#1E7A5A22;

border-radius:50%;

filter:blur(120px);

left:-180px;

top:-120px;

}

.bento-section::after{

content:"";

position:absolute;

width:380px;

height:380px;

background:#58b88d22;

border-radius:50%;

filter:blur(120px);

right:-120px;

bottom:-80px;

}
.bento-content a{

position:relative;

overflow:hidden;

}

.bento-content a::before{

content:"";

position:absolute;

left:-120%;

top:0;

width:120%;

height:100%;

background:

linear-gradient(
90deg,
transparent,
rgba(255,255,255,.35),
transparent);

transition:.7s;

}

.bento-content a:hover::before{

left:120%;

}



.service-item{

    min-height: 520px;

}

.service-video{

    width: 58%;

    height: 520px;

    border-radius: 30px;

    overflow: hidden;

}

.service-video video{

    width: 100%;

    height: 100%;

    object-fit: cover;

}


.services-heading h2{

    font-size:72px;

    margin-bottom:20px;

}

.services-heading p{

    font-size:22px;

    max-width:780px;

    line-height:1.8;

}