*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family: 'Poppins', sans-serif;
}
/* variables */
:root{
    --primary-bg: linear-gradient(135deg, #12b3c7, #041b1e);
    --primary-color:#11738d;
}
 body{
    background:#0f172a;
    min-height:100vh;
}

.main-container{
    width: 100%;
background-color: aliceblue;
}

.top-header{
    width:100%;
    background: linear-gradient(135deg,#0f172a,#1e293b);
    padding:5px 3%;
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:wrap;
    border-bottom:1px solid rgba(255,255,255,0.1);
}

.header-left,
.header-right{
    display:flex;
    align-items:center;
    gap:15px;
}

.header-left a{
    color:#fff;
    text-decoration:none;
    font-size:14px;
    transition:0.3s;
}

.header-left a:hover{
    color:023e7;
}

.header-right a{
    width:25px;
    height:25px;
    background:rgba(255,255,255,0.08);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    text-decoration:none;
    transition:0.4s;
    backdrop-filter:blur(10px);
}

.header-right a:hover{
    background:#38bdf8;
    transform:translateY(-4px);
    box-shadow:0 10px 20px rgba(56,189,248,0.4);
}

@media(max-width:768px){

    .top-header{
        display: none;
        flex-direction:column;
        gap:15px;
        text-align:center;
    }

    .header-left{
        flex-direction:column;
        gap:10px;
    }
}


/* =========================
   NAVBAR
========================= */

.agency-navbar{
    position:sticky;
    top:0;
    width:100%;
    height:85px;

    background:#ffffff;

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

    padding:0 5%;

    border-bottom:1px solid #e8eef5;

    box-shadow:0 8px 30px rgba(0,0,0,0.05);

    z-index:9999;
}

/* =========================
   LOGO
========================= */

.agency-logo{
    font-size:30px;
    font-weight:800;
    text-decoration:none;
    color:#111827;
}

.agency-logo span{
    color:#2563eb;
}
.agency-logo img{
   width: 300px;
}
/* =========================
   NAV LINKS
========================= */

.agency-nav-links{
    display:flex;
    align-items:center;
    list-style:none;
    gap:6px;
}

.agency-nav-links li{
    position:relative;
}

.agency-nav-links li a{
    text-decoration:none;
    color:#374151;

    font-size:15px;
    font-weight:600;

    padding:12px 16px;

    border-radius:12px;

    display:flex;
    align-items:center;
    gap:6px;

    transition:0.3s;
}

.agency-nav-links li a:hover{
    background:#f1f5f9;
    color:var(--primary-color);
}

/* =========================
   DROPDOWN
========================= */

.agency-dropdown{
    position:absolute;
    top:115%;
    left:0;

    width:240px;

    background:#fff;

    border-radius:16px;

    padding:10px;

    list-style:none;

    border:1px solid #eaeef4;

    box-shadow:0 15px 40px rgba(0,0,0,0.08);

    opacity:0;
    visibility:hidden;

    transform:translateY(12px);

    transition:0.3s ease;

    z-index:999;
}

.agency-dropdown li{
    width:100%;
}

.agency-dropdown li a{
    width:100%;
    padding:12px 14px;
    border-radius:10px;
}

/* SHOW DROPDOWN */

.agency-nav-links li:hover > .agency-dropdown{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

/* =========================
   SUB MENU
========================= */

.agency-sub-menu{
    position:relative;
}

.agency-sub-dropdown{
    top:0;
    left:105%;
}

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

.agency-nav-right{
    display:flex;
    align-items:center;
    gap:14px;
}

/* CTA BUTTON */

.agency-cta-btn{
    text-decoration:none;

    background:linear-gradient(135deg, #12b3c7, #041b1e);
    color:#fff;

    padding:14px 22px;

    border-radius:12px;

    font-size:15px;
    font-weight:600;

    transition:0.3s;
}

.agency-cta-btn:hover{
    background:#1d4ed8;
    transform:translateY(-2px);
}

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

.agency-menu-btn{
    width:48px;
    height:48px;

    border-radius:12px;

    background:#f1f5f9;

    display:none;
    align-items:center;
    justify-content:center;

    cursor:pointer;

    font-size:20px;
    color:#111827;

    transition:0.3s;
}

.agency-menu-btn:hover{
    background:#2563eb;
    color:#fff;
}

/* =========================
   SIDEBAR
========================= */

.agency-sidebar{
    position:fixed;
    top:0;
    right:-100%;

    width:340px;
    height:100vh;

    background:#ffffff;

    padding:100px 20px 30px;

    transition:0.4s ease;

    z-index:99999;

    border-left:1px solid #e8eef5;

    overflow-y:auto;
}

.agency-sidebar.active{
    right:0;
}

/* CLOSE */

.agency-close-btn{
    position:absolute;
    top:20px;
    right:20px;

    width:45px;
    height:45px;

    border-radius:12px;

    background:#f1f5f9;

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

    cursor:pointer;

    font-size:20px;
}
.dl, ol, ul  {
    margin-top: 0;
    margin-bottom: 0 !important;
}
/* SIDEBAR LINKS */

.agency-sidebar ul{
    list-style:none;
}

.agency-sidebar ul li{
    margin-bottom:12px;
}

.agency-sidebar ul li a{
    text-decoration:none;
    color:#374151;

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

    padding:14px 16px;

    border-radius:12px;

    background:#f8fafc;

    transition:0.3s;
}

.agency-sidebar ul li a:hover{
    background:#2563eb;
    color:#fff;
}

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



.agency-mobile-dropdown{
    max-height:0;
    overflow:hidden;

    transition:0.4s ease;

    padding-left:12px;
}

.agency-mobile-dropdown a{
    margin-top:10px;
    font-size:14px;
}

.agency-mobile-dropdown .agency-mobile-dropdown{
    padding-left:15px;
    margin-top:10px;
}

.agency-mobile-dropdown .agency-toggle-btn{
    background:#eef4ff;
    margin-top:8px;
}

.agency-mobile-dropdown .agency-mobile-dropdown a{
    background:#fff;
    border-left:2px solid #2563eb;
    padding-left:15px;
}
/* =========================
   OVERLAY
========================= */

.agency-overlay{
    position:fixed;
    inset:0;

    background:rgba(15,23,42,0.35);

    opacity:0;
    visibility:hidden;

    transition:0.3s;

    z-index:999;
}

.agency-overlay.active{
    opacity:1;
    visibility:visible;
}

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

@media(max-width:1100px){

    .agency-nav-links,
    .agency-cta-btn{
        display:none;
    }

    .agency-menu-btn{
        display:flex;
    }
}

@media(max-width:768px){

    .agency-sidebar{
        width:100%;
    }
}
/* main swiper */
.mySwiper{
    width: 100%;
}
.mySwiper img{
    width: 100%;
    height: auto;
}
.mySwiper .main-next, .main-prev{
width: 15px;
color: #fff;
font-weight: 800;
}
.swiper-button-next::after,
.swiper-button-prev::after {
  display: none;
}
.mySwiper .main-next{
margin-right: 20px;
}
.mySwiper .main-prev{
margin-left: 20px;
}

.about-section{
  background: #f8fbff;
}

.vector-blob{
  width: 380px;
  height: 380px;
  background: linear-gradient(135deg,#4f46e5,#8b5cf6);
  opacity: .12;
  border-radius: 58% 42% 70% 30% / 30% 30% 70% 70%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  animation: morph 8s ease-in-out infinite;
}

@keyframes morph{
  0%{
    border-radius: 58% 42% 70% 30% / 30% 30% 70% 70%;
  }
  50%{
    border-radius: 40% 60% 33% 67% / 55% 27% 73% 45%;
  }
  100%{
    border-radius: 58% 42% 70% 30% / 30% 30% 70% 70%;
  }
}

.about-card{
  position: relative;
  z-index: 2;
  background: rgba(255,255,255,0.85);
  backdrop-filter: blur(10px);
  border-radius: 30px;
  padding: 50px 35px;
  max-width: 400px;
  margin: auto;
}

.circle-icon{
  width: 90px;
  height: 90px;
  margin: auto;
  border-radius: 50%;
  background: linear-gradient(135deg, #12b3c7, #041b1e);
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-box{
  width: 55px;
  height: 55px;
  border-radius: 16px;
  background: #eef2ff;
  color: #0f7682;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.icon-box i{
    font-size: 20px;
}
@media(max-width:768px){
  .vector-blob{
    width: 260px;
    height: 260px;
  }

  .about-card{
    padding: 35px 25px;
  }
}
.animated-btn{
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 8px 34px;
    border-radius: 60px;
    text-decoration: none;
    overflow: hidden;
    background: linear-gradient(135deg, #12b3c7, #041b1e);
    color: #fff;
    font-weight: 600;
    letter-spacing: 0.5px;
    transition: all .4s ease;
    box-shadow: 0 10px 25px rgba(79,70,229,0.25);
}

.animated-btn span{
    position: relative;
    z-index: 2;
}

.animated-btn::before{
    content: "";
    position: absolute;
    width: 0%;
    height: 100%;
    left: 0;
    top: 0;
    background: linear-gradient(135deg,#7c3aed,#4f46e5);
    transition: width .4s ease;
    z-index: 1;
}

.animated-btn::after{
    content: "";
    position: absolute;
    width: 30px;
    height: 180%;
    background: rgba(255,255,255,0.35);
    top: -40%;
    left: -80px;
    transform: rotate(25deg);
    transition: .7s;
}

.animated-btn:hover::before{
    width: 100%;
}

.animated-btn:hover::after{
    left: 120%;
}

.animated-btn:hover{
    transform: translateY(-4px);
    box-shadow: 0 15px 35px rgba(79,70,229,0.35);
    color: #fff;
}
/* services */
.modern-services{
    position: relative;
    background: #f4f7ff;
    overflow: hidden;
}

/* Heading */
.service-badge{
    display: inline-block;
    padding: 10px 20px;
    border-radius: 50px;
    background: rgba(79,70,229,.1);
    color: #4f46e5;
    font-weight: 600;
    letter-spacing: .5px;
}

.title{
    font-size: 2rem;
    font-weight: 800;
    line-height: 1.2;
    color: #111827;
}

.title span{
    color: #11738d;
    position: relative;
}

/* .title span::after{
    content: "";
    position: absolute;
    left: 0;
    bottom: -8px;
    width: 100%;
    height: 6px;
    border-radius: 20px;
    background: linear-gradient(90deg,#4f46e5,#8b5cf6);
} */

.service-text{
    font-size: 1.05rem;
    color: #6b7280;
    line-height: 1.9;
    max-width: 700px;
}

/* Cards */
.service-card{
    position: relative;
    background: rgba(255,255,255,.75);
    backdrop-filter: blur(14px);
    border-radius: 30px;
    padding: 40px 30px;
    overflow: hidden;
    transition: .45s ease;
    border: 1px solid rgba(79,70,229,.12);
    height: 100%;
    z-index: 1;
}

.service-card:hover{
    transform: translateY(-14px);
    box-shadow: 0 25px 60px rgba(79,70,229,.15);
}

.service-card::before{
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
    rgba(79,70,229,.08),
    rgba(139,92,246,.08));
    opacity: 0;
    transition: .4s;
}

.service-card:hover::before{
    opacity: 1;
}

.service-icon{
    width: 80px;
    height: 80px;
    border-radius: 24px;
    background: linear-gradient(135deg,#4f46e5,#8b5cf6);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    margin-bottom: 25px;
    position: relative;
    animation: float 4s ease-in-out infinite;
}

.service-icon svg{
    width: 38px;
    height: 38px;
}

.service-card h4{
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 18px;
    color: #111827;
}

.service-card p{
    color: #6b7280;
    line-height: 1.8;
    margin-bottom: 28px;
}

.service-card a{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: #4f46e5;
    font-weight: 600;
    transition: .3s;
}

.service-card a span{
    transition: .3s;
}

.service-card:hover a span{
    transform: translateX(6px);
}

.card-glow{
    position: absolute;
    width: 180px;
    height: 180px;
    background: radial-gradient(rgba(79,70,229,.18),transparent);
    right: -80px;
    top: -80px;
    border-radius: 50%;
    z-index: -1;
}

/* Background Shapes */
.shape{
    position: absolute;
    border-radius: 50%;
    background: linear-gradient(135deg,
    rgba(79,70,229,.12),
    rgba(139,92,246,.08));
    animation: move 10s infinite alternate ease-in-out;
}

.shape-1{
    width: 300px;
    height: 300px;
    top: -120px;
    right: -120px;
}

.shape-2{
    width: 220px;
    height: 220px;
    bottom: -100px;
    left: -100px;
}

/* Animations */
@keyframes float{
    0%,100%{
        transform: translateY(0);
    }
    50%{
        transform: translateY(-10px);
    }
}

@keyframes move{
    from{
        transform: translateY(0) rotate(0deg);
    }
    to{
        transform: translateY(30px) rotate(25deg);
    }
}

/* Responsive */
@media(max-width:991px){

    .service-title{
        font-size: 2.4rem;
    }

}

@media(max-width:768px){

    .service-title{
        font-size: 2rem;
    }

    .service-card{
        padding: 35px 25px;
    }

}
/* brand  */
.brand-wrapper{
    margin-bottom:20px;
}

.brand-title{
    text-align:center;
    color:#888;
    font-size:14px;
    letter-spacing:3px;
    margin-bottom:30px;
    font-weight:600;
}

.brands{
    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    gap:50px;
}

.brand-item{
    font-size:20px;
    font-weight:700;
    color:#ffffff;
    opacity:.75;
    transition:.4s;
    display:flex;
    align-items:center;
    gap:12px;
}

.brand-item:hover{
    opacity:1;
    transform:translateY(-5px);
    color:#5b5eff;
}
/* =========================
LIGHT SERVICES SECTION
========================= */

.services-section{
    background:#F5F9FF;
    /* padding:100px 0; */
    position:relative;
    overflow:hidden;
}


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

.glass-card{
    position:relative;
    padding:35px;
    border-radius:30px;

    background:
    rgba(255,255,255,0.55);

    border:
    1px solid rgba(255,255,255,0.6);

    backdrop-filter:blur(18px);

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

    overflow:hidden;

    transition:0.5s ease;

    height:100%;

    box-shadow:
    0 10px 40px rgba(0,0,0,0.06);
}

/* GLASS SHINE */

.glass-card::before{
    content:"";

    position:absolute;

    top:0;
    left:-100%;

    width:100%;
    height:100%;

    background:
    linear-gradient(
    120deg,
    transparent,
    rgba(255,255,255,0.45),
    transparent
    );

    transition:0.8s;
}

.glass-card:hover::before{
    left:100%;
}

/* HOVER */

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

    border-color:
    rgba(18,179,199,0.35);

    box-shadow:
    0 20px 60px rgba(18,179,199,0.12);
}

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

.service-top{
    display:flex;
    gap:20px;
}

.service-top h4{
    color:#061B3A;
    font-size:24px;
    margin-bottom:12px;
    font-weight:700;
}

.service-top p{
    color:#6B7280;
    line-height:1.8;
    font-size:15px;
}

/* =========================
ICONS
========================= */

.service-icon{
    min-width:70px;
    height:70px;
    border-radius:20px;

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

    font-size:28px;

    position:relative;

    overflow:hidden;

    backdrop-filter:blur(10px);
}

/* ICON COLORS */

.google{
    background:rgba(255,196,0,0.12);
    color:#FFB800;
}

.meta{
    background:rgba(59,130,246,0.12);
    color:#3B82F6;
}

.seo{
    background:rgba(18,179,199,0.12);
    color:#12B3C7;
}

.dev{
    background:rgba(139,92,246,0.12);
    color:#8B5CF6;
}

.lead{
    background:rgba(168,85,247,0.12);
    color:#A855F7;
}

.funnel{
    background:rgba(236,72,153,0.12);
    color:#EC4899;
}

/* =========================
ARROW
========================= */

.service-arrow{
    width:48px;
    height:48px;

    border-radius:50%;

    position:absolute;

    right:25px;
    bottom:25px;

    background:
    rgba(255,255,255,0.7);

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

    color:#061B3A;

    transition:0.4s ease;

    box-shadow:
    0 5px 20px rgba(0,0,0,0.08);
}

.glass-card:hover .service-arrow{

   background: var(--primary-bg);

    color:white;

    transform:rotate(-45deg) scale(1.08);
}

/* =========================
BOTTOM GLOW
========================= */

.card-glow{
    position:absolute;

    width:180px;
    height:180px;

    border-radius:50%;

    background:
    radial-gradient(
    rgba(18,179,199,0.18),
    transparent 70%
    );

    bottom:-120px;
    right:-120px;

    pointer-events:none;
}

/* =========================
BLUR CIRCLES
========================= */

.blur-circle{
    position:absolute;
    border-radius:50%;
    filter:blur(120px);
    opacity:0.25;
}

.blur1{
    width:300px;
    height:300px;

    background:#12B3C7;

    top:-100px;
    left:-100px;
}

.blur2{
    width:350px;
    height:350px;

    background:#8B5CF6;

    bottom:-100px;
    right:-100px;
}

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



@media(max-width:576px){

    .glass-card{
        padding:25px;
    }

    .service-top{
        flex-direction:column;
    }

}


/* counter */
/* =========================
STATS SECTION
========================= */

.stats-section{
    padding:80px 0;
    background:#F5F9FF;
    position:relative;
    overflow:hidden;
}

/* =========================
WRAPPER
========================= */

.stats-wrapper{

    display:grid;

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

    gap:25px;

    padding:35px;

    border-radius:35px;

    background:
    rgba(255,255,255,0.55);

    border:
    1px solid rgba(255,255,255,0.7);

    backdrop-filter:blur(20px);

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

    box-shadow:
    0 20px 60px rgba(0,0,0,0.06);

    position:relative;
    z-index:5;
}

/* =========================
ITEM
========================= */

.stats-item{
    display:flex;
    align-items:center;
    gap:18px;

    padding:20px;

    border-radius:25px;

    transition:0.4s ease;

    position:relative;
}

.stats-item:hover{
    transform:translateY(-8px);

    background:
    rgba(255,255,255,0.45);
}

/* =========================
ICONS
========================= */

.stats-icon{
    min-width:75px;
    height:75px;

    border-radius:22px;

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

    font-size:28px;

    position:relative;

    overflow:hidden;
}

/* ICON COLORS */

.blue{
    background:rgba(59,130,246,0.12);
    color:#3B82F6;
}

.purple{
    background:rgba(168,85,247,0.12);
    color:#A855F7;
}

.cyan{
    background:rgba(18,179,199,0.12);
    color:#12B3C7;
}

.pink{
    background:rgba(236,72,153,0.12);
    color:#EC4899;
}

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

.stats-content h2{
    font-size:42px;
    font-weight:700;
    margin-bottom:5px;

    background:
    linear-gradient(
    90deg,
    #12b3c7,
    #03093e
    );

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.stats-content p{
    color:#6B7280;
    margin:0;
    font-size:15px;
    line-height:1.6;
}

/* =========================
BLUR BG
========================= */

.stats-blur{
    position:absolute;
    border-radius:50%;
    filter:blur(120px);
    opacity:0.2;
}

.blur-left{
    width:300px;
    height:300px;

    background:#12B3C7;

    left:-100px;
    top:-100px;
}

.blur-right{
    width:350px;
    height:350px;

    background:#8B5CF6;

    right:-100px;
    bottom:-100px;
}

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

@media(max-width:991px){

    .stats-wrapper{
        grid-template-columns:
        repeat(2,1fr);
    }

}

@media(max-width:576px){

    .stats-wrapper{
        grid-template-columns:1fr;

        padding:20px;
    }

    .stats-content h2{
        font-size:34px;
    }

    .stats-item{
        padding:15px;
    }

}
/* slider2 */
/* =========================
HERO SECTION
========================= */

.hero-section{
    background:
    linear-gradient(
    135deg,
    #F8FBFF 0%,
    #EEF6FF 40%,
    #F7F1FF 100%
    );

    position:relative;
}

/* =========================
BG BLUR
========================= */

.hero-blur{
    position:absolute;
    border-radius:50%;
    filter:blur(120px);
    opacity:0.3;
}

.blur-one{
    width:350px;
    height:350px;

    background:#12B3C7;

    top:-100px;
    left:-100px;
}

.blur-two{
    width:400px;
    height:400px;

    background:#EC4899;

    right:-120px;
    bottom:-120px;
}

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

.hero-content{
    position:relative;
    z-index:5;
}

.hero-badge{
    display:inline-block;

    padding:12px 22px;

    background:
    rgba(255,255,255,0.65);

    border:
    1px solid rgba(255,255,255,0.7);

    border-radius:50px;

    backdrop-filter:blur(10px);

    color:#12B3C7;

    font-weight:600;
}

.hero-content h1{
    font-size:75px;
    line-height:1.1;
    font-weight:800;

    color:#061B3A;

    margin:30px 0 20px;
}

.hero-content p{
    color:#6B7280;

    font-size:18px;

    line-height:1.9;

    max-width:550px;
}

/* =========================
BUTTONS
========================= */

.hero-btns{
    display:flex;
    gap:18px;

    margin-top:35px;
}

.main-btn{
    padding:16px 35px;

    border-radius:60px;

    text-decoration:none;

    color:white;

    font-weight:600;

    background:
    linear-gradient(
    135deg,
    #FF8A00,
    #EC4899
    );

    box-shadow:
    0 10px 30px rgba(236,72,153,0.2);
}

.outline-btn{
    padding:16px 35px;

    border-radius:60px;

    text-decoration:none;

    color:#061B3A;

    font-weight:600;

    border:
    1px solid rgba(0,0,0,0.08);

    background:white;
}

/* =========================
PLATFORM
========================= */

.platforms{
    margin-top:50px;
}

.platforms span{
    color:#061B3A;

    font-weight:600;

    display:block;

    margin-bottom:18px;
}

.platform-icons{
    display:flex;
    gap:15px;
}

.platform-box{
    width:70px;
    height:70px;

    border-radius:22px;

    background:
    rgba(255,255,255,0.65);

    backdrop-filter:blur(15px);

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

    font-size:26px;

    color:#061B3A;

    box-shadow:
    0 10px 25px rgba(0,0,0,0.06);

    transition:0.4s ease;
}

.platform-box:hover{
    transform:translateY(-8px);
}

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

.hero-image-wrapper{
    position:relative;

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

    min-height:700px;
}

/* BIG CIRCLE */

.hero-circle{
    position:absolute;

    width:520px;
    height:520px;

    border-radius:50%;

    background:
    linear-gradient(
    135deg,
    #FF8A00,
    #EC4899,
    #8B5CF6
    );

    filter:blur(0px);

    animation:rotateCircle 15s linear infinite;
}

@keyframes rotateCircle{

    100%{
        transform:rotate(360deg);
    }

}

/* IMAGE CARD */

.hero-image-card{
    position:relative;

    width:400px;
    height:520px;

    border-radius:250px;

    overflow:hidden;

    background:
    rgba(255,255,255,0.15);

    backdrop-filter:blur(20px);

    border:
    1px solid rgba(255,255,255,0.4);

    z-index:5;

    box-shadow:
    0 20px 60px rgba(0,0,0,0.15);
}

.hero-image-card img{
    width:100%;
    height:100%;

    object-fit:cover;
}

/* FLOAT CARD */

.floating-card{
    position:absolute;

    bottom:100px;
    left:0;

    padding:18px 30px;

    border-radius:25px;

    background:
    rgba(255,255,255,0.65);

    backdrop-filter:blur(20px);

    box-shadow:
    0 15px 40px rgba(0,0,0,0.08);

    z-index:10;
}

.floating-icons{
    display:flex;
    gap:10px;

    margin-bottom:10px;
}

.floating-icons span{
    width:15px;
    height:15px;

    border-radius:50%;
}

.floating-icons span:nth-child(1){
    background:#FF8A00;
}

.floating-icons span:nth-child(2){
    background:#22C55E;
}

.floating-icons span:nth-child(3){
    background:#3B82F6;
}

.floating-card h5{
    margin:0;

    font-size:18px;

    color:#061B3A;
}

/* =========================
SWIPER
========================= */

.swiper-pagination-bullet{
    width:12px;
    height:12px;

    background:#8B5CF6;
}

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

@media(max-width:991px){

    .hero-content{
        text-align:center;
        margin-top:100px;
    }

    .hero-content h1{
        font-size:55px;
    }

    .hero-btns{
        justify-content:center;
    }

    .platform-icons{
        justify-content:center;
    }

    .hero-image-wrapper{
        min-height:600px;
    }

}

@media(max-width:576px){

    .hero-content h1{
        font-size:42px;
    }

    .hero-image-card{
        width:280px;
        height:380px;
    }

    .hero-circle{
        width:350px;
        height:350px;
    }

    .floating-card{
        left:50%;
        transform:translateX(-50%);
        bottom:40px;
    }

}
/* process */
/* =========================
SECTION
========================= */

.mini-process-section{
    padding:80px 0;
    background:#F5F9FF;
    position:relative;
    overflow:hidden;
}

/* =========================
HEADING
========================= */


.sub-title{
    color:#12B3C7;
}

/* =========================
TIMELINE
========================= */
.mini-timeline{
    position:relative;
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-top:50px;
}

/* CENTER LINE */

.process-line{

    position:absolute;

    width:100%;
    height:4px;

    background:
    linear-gradient(
    90deg,
    #12B3C7,
    #8B5CF6,
    #EC4899
    );

    border-radius:50px;

    top:50%;

    transform:translateY(-50%);
}

/* =========================
ITEM
========================= */

.mini-item{
    position:relative;
    width:23%;
    display:flex;
    justify-content:center;
}

/* TOP */

.top-item{
    margin-bottom:280px;
}

/* BOTTOM */

.bottom-item{
    margin-top:300px;
}

/* =========================
DOT
========================= */

.mini-dot{

    position:absolute;

    width:24px;
    height:24px;

    background:white;

    border:5px solid #12B3C7;

    border-radius:50%;

    left:50%;

    transform:
    translate(-50%,-50%);

    z-index:5;

    box-shadow:
    0 0 20px rgba(18,179,199,0.35);
}

.top-dot{
bottom:-50px;
}
.bottom-dot{
top:-35px;
}
/* CONNECTOR LINE */

.mini-item::before{

    content:"";

    position:absolute;

    width:2px;
    height:60px;

    background:
    linear-gradient(
    to bottom,
    #12B3C7,
    #8B5CF6
    );

    left:50%;

    transform:translateX(-50%);
}

/* TOP CONNECT */

.top-item::before{
    bottom:-20px;
}

/* BOTTOM CONNECT */

.bottom-item::before{
    top:-40px;
}

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

.mini-card{

    width:100%;

    padding:28px;

    border-radius:30px;

    background:
    rgba(255,255,255,0.55);

    border:
    1px solid rgba(255,255,255,0.7);

    backdrop-filter:blur(18px);

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

    box-shadow:
    0 15px 40px rgba(0,0,0,0.06);

    text-align:center;

    transition:0.5s ease;
}

.mini-card:hover{

    transform:translateY(-10px);

    box-shadow:
    0 25px 50px rgba(18,179,199,0.15);
}

/* =========================
ICON
========================= */

.mini-icon{

    width:70px;
    height:70px;

    border-radius:22px;

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

    margin:0 auto 20px;

    font-size:28px;
}

/* COLORS */

.blue{
    background:rgba(59,130,246,0.12);
    color:#3B82F6;
}

.purple{
    background:rgba(168,85,247,0.12);
    color:#A855F7;
}

.cyan{
    background:rgba(18,179,199,0.12);
    color:#12B3C7;
}

.pink{
    background:rgba(236,72,153,0.12);
    color:#EC4899;
}

/* TEXT */

.mini-card h4{
    font-size:15px;
    font-weight:700;
    color:#061B3A;
    margin-bottom:12px;
}

.mini-card p{
    color:#6B7280;
    font-size:14px;
    line-height:1.8;
}

/* =========================
BLUR
========================= */

.mini-blur{
    position:absolute;
    border-radius:50%;
    filter:blur(120px);
    opacity:0.25;
}

.blur1{
    width:300px;
    height:300px;

    background:#12B3C7;

    top:-100px;
    left:-100px;
}

.blur2{
    width:350px;
    height:350px;

    background:#8B5CF6;

    right:-100px;
    bottom:-100px;
}

/* =========================
TABLET & MOBILE
========================= */

@media(max-width:991px){

    .mini-timeline{

        flex-direction:column;
        gap:70px;

        margin-top:80px;
    }

    .process-line{

        width:4px;
        height:100%;

        left:50%;
        top:0;

        transform:translateX(-50%);
    }

    .mini-item{

        width:100%;
        margin:0 !important;
    }

    .mini-item::before{
        display:none;
    }

    .mini-dot{

        top:auto;
        left:50%;
    }

    .mini-card{
        max-width:400px;
    }

    .mini-heading h2{
        font-size:42px;
    }
.top-dot{
    top:0px;
}
}

@media(max-width:576px){

    .mini-card{
        padding:25px;
    }

    .mini-card h4{
        font-size:22px;
    }

}
/* testimonial */
/* =========================
   TESTIMONIAL SECTION
========================= */

.testimonial-section{
    background: #071c39;
    position: relative;
    overflow: hidden;
      padding-top:80px;
}

.testimonial-section::before{
    content: "";
    position: absolute;
    width: 400px;
    height: 400px;
    background: rgba(0, 183, 255, 0.08);
    border-radius: 50%;
    top: -120px;
    left: -120px;
}

.testimonial-section::after{
    content: "";
    position: absolute;
    width: 350px;
    height: 350px;
    background: rgba(0, 183, 255, 0.05);
    border-radius: 50%;
    bottom: -100px;
    right: -100px;
}

/* Card */

.testimonal-card{
   position: relative;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
    backdrop-filter: blur(10px);
    border-radius: 24px;
    padding: 30px 25px;
    overflow: hidden;
    transition: 0.4s ease;

    height: 100%;

    display: flex;
    flex-direction: column;
}


/* Glow Effect */

.testimonal-card::before{
    content: "";
    position: absolute;
    width: 180px;
    height: 180px;
    background: rgba(0,198,255,0.12);
    border-radius: 50%;
    top: -70px;
    right: -70px;
}

/* Hover */

.testimonal-card:hover{
    transform: translateY(-10px);
    border-color: rgba(0,198,255,0.4);
    box-shadow: 0 20px 40px rgba(0,0,0,0.25);
}

/* Content */

.testimonial-content{
   position: relative;
    z-index: 2;

    display: flex;
    flex-direction: column;

    height: 100%;
}

.logo-content{
       display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 10px;

}
/* Image */

.testimonial-content img{
    width: 90px!important;
    height: 90px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid #00c6ff;
    padding: 4px;
    margin-bottom: 20px;
    background: #fff;
}

/* Name */

.testimonial-content h4{
    color: #fff;
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 15px;
    text-transform: capitalize;
}

/* Message Box */

.msg{
    position: relative;
    background: rgba(255,255,255,0.05);
    padding: 22px 18px;
    border-radius: 18px;
    border: 1px solid rgba(255,255,255,0.08);

    flex-grow: 1;
}

/* Quote Icon */

.msg::before{
    content: "\f10d";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    top: -12px;
    left: 20px;
    width: 38px;
    height: 38px;
    background: linear-gradient(135deg, #12b3c7, #06444b) !important;
    border-radius: 50%;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

/* Text */

.msg p{
    padding: 5px 10px;;
    color: #d7e4f3;
    font-size: 15px;
    line-height: 28px;
    margin: 0;

    overflow: hidden;

    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
}
/* Responsive */

@media(max-width:768px){

    .testimonal-card{
        margin-bottom: 25px;
    }

    .testimonial-content h4{
        font-size: 20px;
    }

}
/* Slider Spacing */

.testimonial-slider{
    padding-bottom: 70px;
}
/* =========================
   NAVIGATION
========================= */

.owl-nav{

    display: flex !important;
    justify-content: center;
    align-items: center;

    gap: 15px;

    margin-top: 40px;
}

/* Buttons */

.owl-prev,
.owl-next{

    width: 55px;
    height: 55px;

    border-radius: 50% !important;

    background: linear-gradient(135deg, #12b3c7, #06444b) !important;

    color: #fff !important;

    display: flex !important;
    align-items: center;
    justify-content: center;

    transition: 0.3s ease;
}

/* Hover */

.owl-prev:hover,
.owl-next:hover{

    transform: translateY(-5px);

    box-shadow:
    0 10px 20px rgba(0,198,255,0.3);
}

/* Icons */

.owl-prev i,
.owl-next i{

    font-size: 30px;
    color: #fff;
}

/* Remove Default Text */

.owl-prev span,
.owl-next span{
    display: none;
}
/* =========================
   TESTIMONIAL TITLE
========================= */

.testimonial-title{
       font-size: 2rem;;
    font-weight: 800;
    color: #fff;
    text-align: center;
    margin-bottom: 60px;
    position: relative;
    text-transform: capitalize;
    letter-spacing: 1px;

    animation: fadeUp 1s ease;
}

/* Gradient Text */

.testimonial-title span{
    background: linear-gradient(135deg,#00c6ff,#0072ff,#00e1ff);
    background-size: 200% 200%;

    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    animation: gradientMove 4s linear infinite;
}

/* Animated Underline */

.testimonial-title::after{
    content: "";

    width: 120px;
    height: 4px;

    background: linear-gradient(135deg,#00c6ff,#0072ff);

    position: absolute;

    left: 50%;
    bottom: -15px;

    transform: translateX(-50%);

    border-radius: 20px;

    animation: lineGlow 2s infinite alternate;
}

/* =========================
   ANIMATIONS
========================= */

/* Fade Up */

@keyframes fadeUp{

    from{
        opacity: 0;
        transform: translateY(40px);
    }

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

}

/* Gradient Animation */

@keyframes gradientMove{

    0%{
        background-position: 0% 50%;
    }

    100%{
        background-position: 100% 50%;
    }

}

/* Underline Glow */

@keyframes lineGlow{

    from{
        box-shadow: 0 0 5px rgba(0,198,255,0.4);
        width: 90px;
    }

    to{
        box-shadow:
        0 0 10px rgba(0,198,255,0.8),
        0 0 20px rgba(0,198,255,0.5);

        width: 140px;
    }

}

/* Responsive */

@media(max-width:768px){

    .testimonial-title{
        font-size: 34px;
    }

}
/* faq */
/* =========================
   FAQ SECTION
========================= */

.faq-section{
    background: #f8fbff;
    padding: 90px 0;
}

/* Heading */

.faq-title{
     font-size: 2rem;
    font-weight: 800;
    color: #071c39;
    margin-bottom: 15px;
}

.faq-title span{
    background: linear-gradient(135deg, #12b3c7, #043237);;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.faq-heading p{
    color: #6b7280;
    max-width: 650px;
    margin: auto;
    line-height: 30px;
    font-size: 17px;
}

/* Wrapper */

.faq-wrapper{
    max-width: 900px;
    margin: 60px auto 0;
}

/* FAQ Item */

.faq-item{
    background: #fff;

    border-radius: 20px;

    margin-bottom: 20px;

    overflow: hidden;

    border: 1px solid #e6eef7;

    transition: 0.3s ease;

    box-shadow: 0 10px 30px rgba(0,0,0,0.04);
}

/* Hover */

.faq-item:hover{
    transform: translateY(-3px);

    box-shadow:
    0 15px 35px rgba(0,0,0,0.06);
}

/* Question */

.faq-question{

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

    padding: 25px 30px;

    cursor: pointer;
}

.faq-question h4{
    font-size: 20px;
    color: #071c39;
    margin: 0;
    font-weight: 600;
}

/* Icon */

.faq-icon{
    width: 42px;
    height: 42px;

    border-radius: 50%;

    background:linear-gradient(135deg, #12b3c7, #041b1e);

    color: #fff;

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

    font-size: 14px;

    transition: 0.3s ease;
}

/* Answer */

.faq-answer{
    display: none;

    padding: 0 30px 30px;
}

.faq-answer p{
    margin: 0;

    color: #6b7280;

    line-height: 30px;

    font-size: 16px;
}

/* Active */

.faq-item.active .faq-answer{
    display: block;
}

.faq-item.active .faq-icon i{
    transform: rotate(45deg);
}

/* Responsive */

@media(max-width:768px){

    .faq-title{
        font-size: 34px;
    }

    .faq-question{
        padding: 20px;
    }

    .faq-question h4{
        font-size: 17px;
        width: 85%;
    }

    .faq-answer{
        padding: 0 20px 25px;
    }

}
/* CTA SECTION */

.cta-section{
    padding: 100px 0;
    background: #0f172a;
    position: relative;
    z-index: 1;
}

/* CTA WRAPPER */

.cta-wrapper{
    background: linear-gradient(135deg,#00c8ff,#063b49);
    border-radius: 30px;
    padding: 70px 60px;
    position: relative;
    overflow: hidden;
    z-index: 2;
}


/* BLUR BUBBLES */

.cta-wrapper::before,
.cta-wrapper::after{
    content: "";
    position: absolute;
    border-radius: 50%;
    filter: blur(0px);
    z-index: -1;
    animation: bubbleFloat 8s infinite ease-in-out;
}

/* TOP BUBBLE */

.cta-wrapper::before{
    width: 280px;
    height: 280px;
    background: rgba(255,255,255,0.18);
    top: -120px;
    left: -80px;
}

/* BOTTOM BUBBLE */

.cta-wrapper::after{
    width: 240px;
    height: 240px;
    background: rgba(0,255,255,0.20);
    bottom: -100px;
    right: -70px;
    animation-delay: 3s;
}


/* EXTRA BUBBLE */

.blur-bubble{
    position: absolute;
    width: 180px;
    height: 180px;
    background: rgba(255,255,255,0.12);
    border-radius: 50%;
    filter: blur(60px);
    top: 40%;
    right: 25%;
    z-index: -1;
    animation: bubbleMove 10s infinite linear;
}


/* ANIMATION */

@keyframes bubbleFloat{

    0%{
        transform: translateY(0px) translateX(0px);
    }

    50%{
        transform: translateY(-25px) translateX(15px);
    }

    100%{
        transform: translateY(0px) translateX(0px);
    }

}

@keyframes bubbleMove{

    0%{
        transform: translateY(0px);
    }

    50%{
        transform: translateY(-35px);
    }

    100%{
        transform: translateY(0px);
    }

}

/* CONTENT */

.cta-badge{
    display: inline-block;
    background: rgba(255,255,255,0.15);
    color: #fff;
    padding: 10px 20px;
    border-radius: 50px;
    font-size: 14px;
    margin-bottom: 20px;
    backdrop-filter: blur(10px);
}

.cta-content h2{
    font-size: 52px;
    font-weight: 800;
    line-height: 1.2;
    color: #fff;
    margin-bottom: 20px;
}

.cta-content h2 span{
    color: #ffe600;
}

.cta-content p{
    color: rgba(255,255,255,0.85);
    font-size: 17px;
    max-width: 650px;
    line-height: 1.8;
}

/* BUTTON */

.cta-btn{
    width: 230px;
    height: 65px;
    background: #fff;
    color: #0072ff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    border-radius: 60px;
    font-weight: 700;
    text-decoration: none;
    transition: 0.4s;
    position: relative;
    overflow: hidden;
}

.cta-btn:hover{
    transform: translateY(-5px);
    color: #000;
}

.cta-btn i{
    transition: 0.4s;
}

.cta-btn:hover i{
    transform: translateX(5px);
}

/* ANIMATED SHAPES */

.cta-shape{
    position: absolute;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
    animation: floatShape 6s infinite ease-in-out;
}

.shape-1{
    width: 250px;
    height: 250px;
    top: -80px;
    left: -80px;
}

.shape-2{
    width: 180px;
    height: 180px;
    bottom: -60px;
    right: 10%;
    animation-delay: 2s;
}

.shape-3{
    width: 120px;
    height: 120px;
    top: 20%;
    right: -40px;
    animation-delay: 4s;
}

/* VECTOR ICONS */

.cta-vector{
    position: absolute;
    color: rgba(255,255,255,0.15);
    z-index: 1;
    animation: floatVector 5s infinite ease-in-out;
}

.vector-1{
    top: 15%;
    left: 8%;
    font-size: 60px;
}

.vector-2{
    bottom: 15%;
    left: 15%;
    font-size: 50px;
    animation-delay: 2s;
}

.vector-3{
    top: 20%;
    right: 10%;
    font-size: 70px;
    animation-delay: 3s;
}

/* ANIMATION */

@keyframes floatShape{

    0%{
        transform: translateY(0px);
    }

    50%{
        transform: translateY(-20px);
    }

    100%{
        transform: translateY(0px);
    }

}

@keyframes floatVector{

    0%{
        transform: translateY(0px) rotate(0deg);
    }

    50%{
        transform: translateY(-15px) rotate(8deg);
    }

    100%{
        transform: translateY(0px) rotate(0deg);
    }

}

/* RESPONSIVE */

@media(max-width:991px){

    .cta-wrapper{
        padding: 50px 30px;
        text-align: center;
    }

    .cta-content h2{
        font-size: 38px;
    }

    .cta-btns{
        margin-top: 30px;
    }

}

@media(max-width:576px){

    .cta-content h2{
        font-size: 30px;
    }

    .cta-btn{
        width: 100%;
    }

}
/* FOOTER */

.footer-section{
    background: #031b3a;
    padding-top: 100px;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

/* WAVE EFFECT */

.footer-wave{
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, 0.447) 1px, transparent 1px);
    background-size: 30px 30px;
    opacity: 0.2;
    z-index: -1;
}

/* BLUR DOTS */

.blur-dot{
    position: absolute;
    border-radius: 50%;
    filter: blur(90px);
    z-index: -1;
    animation: blurMove 8s infinite ease-in-out;
}

.dot-1{
    width: 260px;
    height: 260px;
    background: rgba(0,200,255,0.22);
    top: -80px;
    left: -60px;
}

.dot-2{
    width: 240px;
    height: 240px;
    background: rgba(0,255,170,0.16);
    bottom: 100px;
    right: -50px;
    animation-delay: 3s;
}

.dot-3{
    width: 180px;
    height: 180px;
    background: rgba(255,255,255,0.10);
    top: 40%;
    left: 45%;
    animation-delay: 5s;
}

/* TOP AREA */

.footer-top{
    padding-bottom: 40px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
}

.footer-logo img{
    max-width: 220px;
}

/* CONTACT */

.footer-contact-wrap{
    display: flex;
    justify-content: space-between;
    gap: 25px;
    flex-wrap: wrap;
}

.footer-contact{
    display: flex;
    align-items: center;
    gap: 15px;
}

.footer-contact .icon{
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #12b3c7;
    font-size: 22px;
    backdrop-filter: blur(10px);
}

.footer-contact h5{
    color: #fff;
    margin-bottom: 5px;
    font-size: 17px;
}

.footer-contact p{
    color: rgba(255,255,255,0.7);
    margin: 0;
    font-size: 15px;
}

/* MAIN */

.footer-main{
    padding: 70px 0;
}

.footer-widget h3{
    color: #fff;
    font-size: 24px;
    margin-bottom: 25px;
    font-weight: 700;
}

.footer-widget p{
    color: rgba(255,255,255,0.7);
    line-height: 1.9;
}

/* LINKS */

.footer-widget ul{
    padding: 0;
    margin: 0;
    list-style: none;
}

.footer-widget ul li{
    margin-bottom: 16px;
}

.footer-widget ul li a{
    color: rgba(255,255,255,0.72);
    text-decoration: none;
    transition: 0.4s;
}

.footer-widget ul li a:hover{
    color: #12b3c7;
    padding-left: 6px;
}

/* SOCIAL */

.footer-social{
    display: flex;
    gap: 12px;
    margin-top: 30px;
}

.footer-social a{
    width: 45px;
    height: 45px;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    transition: 0.4s;
    text-decoration: none;
}

.footer-social a:hover{
    background: linear-gradient(135deg, #12b3c7, #02181b);
    transform: translateY(-5px);
}

/* FORM */

.footer-form input,
.footer-form textarea{
    width: 100%;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    padding: 16px 18px;
    margin-bottom: 18px;
    border-radius: 12px;
    color: #fff;
    outline: none;
}

.footer-form textarea{
    height: 130px;
    resize: none;
}

.footer-form button{
    width: 180px;
    height: 40px;
    border: none;
    border-radius: 12px;
       background: linear-gradient(135deg, #12b3c7, #02181b);
    color: #fff;
    font-weight: 600;
    transition: 0.4s;
}

.footer-form button:hover{
    transform: translateY(-4px);
}

/* PARTNER BAR */

.footer-partner{
    background: rgba(255,255,255,0.04);
    /* padding: 30px; */
    border-radius: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 40px;
}

.partner-text{
    color: #fff;
    font-size: 18px;
    font-weight: 600;
}

.partner-logos{
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
}

.partner-logos span{
    color: rgba(255,255,255,0.8);
    font-size: 24px;
    font-weight: 700;
}

/* COPYRIGHT */

.footer-bottom{
    padding: 25px 0;
    border-top: 1px solid rgba(255,255,255,0.08);
    text-align: center;
}

.footer-bottom p{
    color: rgba(255,255,255,0.65);
    margin: 0;
}

/* ANIMATION */

@keyframes blurMove{

    0%{
        transform: translateY(0px);
    }

    50%{
        transform: translateY(-30px);
    }

    100%{
        transform: translateY(0px);
    }

}

/* RESPONSIVE */

@media(max-width:991px){

    .footer-main{
        padding: 50px 0;
    }

    .footer-contact-wrap{
        margin-top: 30px;
    }

}

@media(max-width:767px){

    .footer-partner{
        text-align: center;
        justify-content: center;
    }

    .partner-logos{
        justify-content: center;
    }

}
/* about us  */
.page-banner{
    position: relative;
    padding: 60px 0 70px;
    background: linear-gradient(135deg,#00c8ff,#063b49);
    overflow: hidden;
}

.page-banner::before{
    content: "";
    position: absolute;
    width: 350px;
    height: 350px;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
    top: -150px;
    right: -100px;
    filter: blur(40px);
}

.page-banner::after{
    content: "";
    position: absolute;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    background: rgba(0,200,255,0.25);
    bottom: -120px;
    left: -80px;
    filter: blur(60px);
}

.page-banner-content{
    text-align: center;
    position: relative;
    z-index: 2;
}

.page-banner-content h1{
    color: #fff;
    font-size: 52px;
    font-weight: 800;
    margin-bottom: 15px;
}

.breadcrumb-list{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.breadcrumb-list li{
    color: rgba(255,255,255,0.9);
    font-size: 16px;
    position: relative;
}

.breadcrumb-list li a{
    color: #fff;
    text-decoration: none;
    transition: .3s;
}

.breadcrumb-list li a:hover{
    color: #b7f7ff;
}

.breadcrumb-list li:not(:last-child)::after{
    content: ">";
    margin-left: 12px;
    color: rgba(255,255,255,0.7);
}

@media(max-width:768px){
    .page-banner{
        padding: 100px 0 60px;
    }

    .page-banner-content h1{
        font-size: 36px;
    }
}

.about-hero{
    padding:60px 0;
    background:#fff;
    overflow:hidden;
    position:relative;
}

.about-image-wrap{
    display: flex;
    position:relative;
    text-align:center;
    justify-content: center;

}

.shape-bg{
    width:450px;
    height:450px;
    background:linear-gradient(135deg,#00c8ff20,#7a5cff20);
    border-radius:50%;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    filter:blur(5px);
}

.main-about-img{
    max-width:420px;
    position:relative;
    z-index:2;
}


@media(max-width:991px){

    .about-content{
        text-align:center;
        margin-bottom:50px;
    }

    .about-content h1{
        font-size:42px;
    }


    .shape-bg{
        width:320px;
        height:320px;
    }

    .main-about-img{
        max-width:280px;
    }
}
/* who we are */
.our-story-section{
    padding:60px 0;
    position:relative;
    overflow:hidden;
}

.section-heading{
    margin-bottom:70px;
}

.section-heading span{
    color:#00c8ff;
    font-weight:700;
    letter-spacing:2px;
}

/* .section-heading h2{
    font-size:52px;
    font-weight:800;
} */

.section-heading h2 span{
    background:var(--primary-bg);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.story-wrapper{
    display:grid;
    grid-template-columns:1fr 1.2fr;
    gap:60px;
    align-items:center;
}

.story-timeline{
    position:relative;
}

.story-timeline::before{
    content:'';
    position:absolute;
    left:30px;
    top:0;
    width:3px;
    height:100%;
    background:var(--primary-bg);
}

.timeline-item{
    position:relative;
    padding-left:80px;
    margin-bottom:50px;
}

.timeline-item::before{
    content:'';
    position:absolute;
    left:20px;
    top:10px;
    width:22px;
    height:22px;
    border-radius:50%;
    background:var(--primary-bg);
    box-shadow:0 0 25px var(--primary-color);
}

.year{
    font-size:24px;
    font-weight:800;
    color:var(--primary-color);
    margin-bottom:8px;
}

.content{
    background:#fff;
    padding:20px;
    border-radius:18px;
    box-shadow:0 15px 40px rgba(0,0,0,.06);
}

.story-content h3{
    color: var(--primary-color);
    font-size:25px;
    font-weight:800;
    margin-bottom:20px;
}

.story-content p{
    color:#666;
    line-height:1.9;
    margin-bottom:20px;
}

.story-highlight{
    display:flex;
    gap:15px;
    flex-wrap:wrap;
    margin-top:30px;
}

.highlight-box{
    padding:12px 22px;
    border-radius:50px;
    background:rgba(0,200,255,.08);
    border:1px solid rgba(0,200,255,.15);
    font-weight:600;
}

@media(max-width:991px){

    .story-wrapper{
        grid-template-columns:1fr;
    }

    .section-heading h2{
        font-size:36px;
    }

    .story-content h3{
        font-size:32px;
    }

}
/* core value */
.core-values-section{
    padding:60px 0;
    position:relative;
}

.value-card{
    background:#fff;
    border-radius:24px;
    padding:35px 25px;
    text-align:center;
    position:relative;
    overflow:hidden;
    height:100%;
    transition:.4s;
    box-shadow:0 15px 40px rgba(0,0,0,.06);
}

.value-card::before{
    content:'';
    position:absolute;
    top:-50px;
    right:-50px;
    width:120px;
    height:120px;
    background:rgba(18,179,199,.08);
    border-radius:50%;
}

.value-card:hover{
    transform:translateY(-10px);
}

.value-icon{
    width:80px;
    height:80px;
    margin:auto;
    border-radius:20px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:30px;
    color:#fff;
    background:linear-gradient(135deg,#12b3c7,#041b1e);
    margin-bottom:20px;
}

.value-card h4{
    font-weight:700;
    margin-bottom:15px;
}

.value-card p{
    color:#666;
    line-height:1.8;
}
/* case study */
.case-studies-section{
    padding:60px 0;
    background:#f8fbfd;
}

.case-study-card{
    background:#fff;
    border-radius:25px;
    overflow:hidden;
    height:100%;
    transition:.4s;
    box-shadow:0 15px 40px rgba(0,0,0,.06);
}

.case-study-card:hover{
    transform:translateY(-10px);
}

.case-study-img{
    height:240px;
    overflow:hidden;
}

.case-study-img img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:.5s;
}

.case-study-card:hover img{
    transform:scale(1.08);
}

.case-study-content{
    padding:30px;
}

.case-category{
    display:inline-block;
    padding:8px 15px;
    border-radius:30px;
    background:rgba(18,179,199,.1);
    color:#12b3c7;
    font-size:13px;
    font-weight:600;
    margin-bottom:15px;
}

.case-study-content h4{
    font-size:24px;
    font-weight:700;
    margin-bottom:15px;
}

.case-study-content p{
    color:#666;
    line-height:1.8;
}

.case-result{
    display:flex;
    justify-content:space-between;
    margin:25px 0;
    padding-top:20px;
    border-top:1px solid #eee;
}

.case-result strong{
    display:block;
    color:#12b3c7;
    font-size:28px;
}

.case-btn{
    display:inline-flex;
    align-items:center;
    gap:10px;
    color:#12b3c7;
    font-weight:600;
    text-decoration:none;
}
/* contact  */
.contact-area{
    padding:60px 0;
    position:relative;
}

.contact-wrapper{
    display:grid;
    grid-template-columns:380px 1fr;
    gap:40px;
    margin-top:60px;
}

.contact-info{
    display:flex;
    flex-direction:column;
    gap:20px;
}

.contact-card{
    background:#fff;
    border-radius:24px;
    padding:25px;
    display:flex;
    align-items:center;
    gap:18px;
    box-shadow:0 15px 40px rgba(0,0,0,.06);
    transition:.3s;
}

.contact-card:hover{
    transform:translateY(-5px);
}

.contact-card .icon{
    width:65px;
    height:65px;
    border-radius:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:22px;
    background:linear-gradient(135deg,#12b3c7,#041b1e);
}
.contact-form-box{
    background:#fff;
    padding:40px;
    border-radius:30px;
    box-shadow:0 20px 60px rgba(0,0,0,.08);
}

.form-group{
    margin-bottom:20px;
}

.form-group input,
.form-group select,
.form-group textarea{
    width:100%;
    border:none;
    background:#f7f9fb;
    padding:16px 20px;
    border-radius:15px;
    outline:none;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
    box-shadow:0 0 0 3px rgba(18,179,199,.15);
}

.captcha-box{
    height:60px;
    border-radius:15px;
    background:#f7f9fb;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:0 20px;
    margin-bottom:15px;
}

#captchaText{
    font-size:24px;
    font-weight:700;
    letter-spacing:5px;
    color:#12b3c7;
}

#refreshCaptcha{
    border:none;
    background:none;
    font-size:24px;
    cursor:pointer;
}

.submit-btn{
    border:none;
    color:#fff;
    padding:16px 40px;
    border-radius:50px;
    background:linear-gradient(135deg,#12b3c7,#041b1e);
    font-weight:600;
}
.contact-wrapper{
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 40px;
    margin-top: 60px;
    align-items: start;
}
.captcha{
display: flex;
}
/* Tablet */
@media (max-width: 991px){
    .contact-wrapper{
        grid-template-columns:100%;
        gap: 30px;
    }
}

/* Mobile */
@media (max-width: 767px){
    .contact-wrapper{
        grid-template-columns: 100%;
        gap: 25px;
        margin-top: 40px;
    }
    .captcha{
flex-direction: column;
}
}
/* service page */
.services-tabs-section{
    padding:60px 0;
    position:relative;
    overflow: hidden;
    z-index:1;
    
}


.blur-shape{
    position:absolute;
    border-radius:50%;
    filter:blur(90px);
    opacity:.25;
    z-index:-1;
}

.services-tabs-section .shape-1{
    width:350px;
    height:350px;
    background:#12b3c7;
    top:-120px;
    left:-120px;
    animation:floatOne 12s infinite ease-in-out;
}

.services-tabs-section .shape-2{
    width:300px;
    height:300px;
    background:#00c8ff;
    right:-80px;
    top:40%;
    animation:floatTwo 10s infinite ease-in-out;
}

.services-tabs-section .shape-3{
    width:250px;
    height:250px;
    background:#7b61ff;
    bottom:-80px;
    left:40%;
    animation:floatThree 14s infinite ease-in-out;
}
.service-tabs{
    justify-content:center;
    gap:15px;
    margin:20px 0;
    border:none;
}

.service-tabs .nav-link{
    border:none;
    padding:14px 28px;
    border-radius:50px;
    background:#fff;
    color:#222;
    font-weight:600;
    box-shadow:0 10px 30px rgba(0,0,0,.06);
    transition:.3s;
}

.service-tabs .nav-link.active{
    color:#fff;
    background:linear-gradient(135deg,#12b3c7,#041b1e);
}

.service-tab-box{
    background:#fff;
    border-radius:30px;
    padding:50px;
    box-shadow:0 20px 60px rgba(0,0,0,.06);
margin-top: 20px;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:50px;
    align-items:center;
}

.service-left span{
    width:70px;
    height:70px;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:20px;
    color:#fff;
    font-size:24px;
    font-weight:700;
    margin-bottom:20px;

    background:linear-gradient(
        135deg,
        #12b3c7,
        #041b1e
    );
}

.service-left h3{
       font-size: 25px;
    font-weight: 600;
}

.service-left ul{
    margin-top:25px;
    padding-left:20px;
}

.service-left li{
    margin-bottom:12px;
    font-weight: 500;
}


.service-right{
    display:grid;
    grid-template-columns:100%;
  
    align-content:start;
    position:relative;
    width:100%;
    height:100%;
}

.service-right::before,
.service-right::after{
    content:"";
    position:absolute;
    border-radius:50%;
    filter:blur(80px);
    z-index:-1;
}

.service-right::before{
    width:250px;
    height:250px;
    background:#00c8ff40;
    top:10%;
    right:15%;
}

.service-right::after{
    width:180px;
    height:180px;
    background:#00e0ff30;
    bottom:10%;
    left:10%;
}
.mini-card:hover{
    transform:translateY(-8px);
}

@media(max-width:991px){

    .service-tab-box{
        grid-template-columns:1fr;
        padding:30px;
    }

    .service-right{
        grid-template-columns:1fr;
    }

    .service-left h3{
        font-size:30px;
    }

    .service-tabs{
        overflow:auto;
        flex-wrap:nowrap;
        padding-bottom:10px;
    }

}
@keyframes floatOne{

    0%,100%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(40px);
    }

}

@keyframes floatTwo{

    0%,100%{
        transform:translateX(0);
    }

    50%{
        transform:translateX(-40px);
    }

}

@keyframes floatThree{

    0%,100%{
        transform:translate(0,0);
    }

    50%{
        transform:translate(30px,-30px);
    }

}
.services-tabs-section::before{
    content:'';
    position:absolute;
    inset:0;

    background-image:
    radial-gradient(
        rgba(18,179,199,.08) 1px,
        transparent 1px
    );

    background-size:30px 30px;

    z-index:-2;
}
.service-tab-box{
    background:rgba(255,255,255,.75);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);

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

    box-shadow:
    0 20px 60px rgba(0,0,0,.08);
}
/* whatsapp */
.wa-box{
    position:fixed;
    bottom:25px;
    right:25px;

    display:flex;
    align-items:center;
    gap:12px;

    background:#fff;
    padding:12px 18px;

    border-radius:20px;

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

    z-index:99999;

    animation:waSlideIn .8s ease;
}

/* WhatsApp Icon */

.wa-icon{
    width:58px;
    height:58px;

    border-radius:50%;

    background:#25D366;

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

    color:#fff;
    font-size:30px;

    animation:waPulse 2s infinite;
}

.wa-content{
    display:flex;
    flex-direction:column;
}

.wa-content span{
    font-size:13px;
    color:#666;
    margin-bottom:2px;
}

.wa-content a{
    text-decoration:none;
    font-size:16px;
    font-weight:700;
    color:#111827;
}

.wa-content a:hover{
    color:#25D366;
}

/* Pulse Animation */

@keyframes waPulse{

    0%{
        box-shadow:0 0 0 0 rgba(37,211,102,.7);
    }

    70%{
        box-shadow:0 0 0 18px rgba(37,211,102,0);
    }

    100%{
        box-shadow:0 0 0 0 rgba(37,211,102,0);
    }
}

/* Slide Animation */

@keyframes waSlideIn{

    from{
        opacity:0;
        transform:translateX(80px);
    }

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

/* Mobile */

@media(max-width:576px){

    .wa-box{
        right:15px;
        bottom:15px;
        padding:10px 14px;
    }

    .wa-icon{
        width:50px;
        height:50px;
        font-size:26px;
    }

    .wa-content a{
        font-size:14px;
    }
}


/* =========================
DIGITAL MARKETING HERO
========================= */

.dm-hero{
    position:relative;
    padding:50px 5%;
    overflow:hidden;
    background:
    linear-gradient(
        135deg,
        #ffffff 0%,
        #f8fbff 50%,
        #eefcff 100%
    );
}

/* BACKGROUND GLOWS */

.dm-hero::before{
    content:"";
    position:absolute;
    width:400px;
    height:400px;
    border-radius:50%;
    background:rgba(18,179,199,.10);
    filter:blur(100px);
    top:-180px;
    left:-100px;
}

.dm-hero::after{
    content:"";
    position:absolute;
    width:350px;
    height:350px;
    border-radius:50%;
    background:rgba(4,27,30,.08);
    filter:blur(120px);
    bottom:-180px;
    right:-120px;
}

.dm-wrap{
    max-width:1300px;
    margin:auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:40px;
    position:relative;
    z-index:2;
}

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

.dm-left{
    flex:1;
}

.dm-badge{
    display:inline-block;
    padding:10px 20px;
    border-radius:50px;
    background:rgba(18,179,199,.12);
    color:#11738d;
    font-size:13px;
    font-weight:600;
    margin-bottom:15px;
}

.dm-title{
    font-size:46px;
    line-height:1.3;
    color:#061b3a;
    font-weight:800;
    margin-bottom:24px;
    letter-spacing:-0.5px;
}

.dm-title span{
    background:linear-gradient(
        135deg,
        #12b3c7,
        #041b1e
    );
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
}

.dm-text{
    font-size:16px;
    color:#6b7280;
    line-height:1.9;
    max-width:560px;
}

/* =========================
BUTTONS
========================= */

.dm-btns{
    display:flex;
    gap:15px;
    margin-top:28px;
}

.dm-btn-primary{
    padding:14px 28px;
    border-radius:50px;
    text-decoration:none;
    color:#fff;
    font-weight:600;
    background:linear-gradient(
        135deg,
        #12b3c7,
        #041b1e
    );
    box-shadow:0 15px 35px rgba(18,179,199,.18);
    transition:.3s ease;
}

.dm-btn-primary:hover{
    transform:translateY(-4px);
}

.dm-btn-secondary{
    padding:14px 28px;
    border-radius:50px;
    text-decoration:none;
    color:#11738d;
    font-weight:600;
    border:1px solid rgba(18,179,199,.25);
    background:#fff;
    transition:.3s ease;
}

.dm-btn-secondary:hover{
    transform:translateY(-4px);
    border-color:#12b3c7;
}

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

.dm-image-box{
    width:100%;
    max-width:560px;
    border-radius:24px;
    overflow:hidden;
    background:#fff;
    box-shadow:0 20px 50px rgba(0,0,0,.08);
    position:relative;
}

.dm-image-box::before{
    content:"";
    position:absolute;
    inset:0;
    background:
    linear-gradient(
        135deg,
        rgba(18,179,199,.04),
        transparent
    );
    z-index:1;
}

.dm-image-box img{
    width:100%;
    height:280px;
    object-fit:cover;
    display:block;
}

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

@media(max-width:991px){

    .dm-wrap{
        flex-direction:column;
        text-align:center;
    }

    .dm-title{
        font-size:38px;
        line-height:1.3;
    }

    .dm-text{
        margin:auto;
    }

    .dm-btns{
        justify-content:center;
    }
}

@media(max-width:768px){

    .dm-hero{
        padding:40px 5%;
    }

    .dm-title{
        font-size:30px;
        line-height:1.35;
    }

    .dm-text{
        font-size:15px;
    }

    .dm-btns{
        flex-direction:column;
        align-items:center;
    }

    .dm-btn-primary,
    .dm-btn-secondary{
        width:100%;
        max-width:280px;
        text-align:center;
    }

    .dm-image-box img{
        height:220px;
    }
}
/* =========================
SERVICES SECTION
========================= */

.kdm-services-area{
    padding:60px 0;
    background:#f8fbff;
    position:relative;
    overflow:hidden;
}



.kdm-head-wrap{
    max-width:800px;
    margin:auto;
}

.kdm-mini-tag{
    display:inline-block;
    padding:8px 20px;
    border-radius:50px;
    background:rgba(18,179,199,.12);
    color:#11738d;
    font-size:13px;
    font-weight:600;
    margin-bottom:15px;
}

.kdm-main-heading{
    font-size:38px;
    font-weight:700;
    color:#061B3A;
    line-height:1.2;
    margin-bottom:15px;
}

.kdm-head-para{
    font-size:16px;
    color:#6B7280;
    line-height:1.8;
    max-width:650px;
    margin:auto;
}

/* SERVICE CARD */

.kdm-service-box{
    background:#fff;
    border-radius:22px;
    padding:25px;
    height:100%;
    border:1px solid #edf2f7;
    transition:.4s ease;
    box-shadow:0 8px 25px rgba(0,0,0,.04);
    position:relative;
    overflow:hidden;
}

.kdm-service-box:hover{
    transform:translateY(-8px);
    border-color:#12b3c7;
    box-shadow:0 18px 40px rgba(18,179,199,.12);
}

.kdm-service-box::before{
    content:"";
    position:absolute;
    width:140px;
    height:140px;
    border-radius:50%;
    background:radial-gradient(
        rgba(18,179,199,.12),
        transparent
    );
    top:-60px;
    right:-60px;
}

/* ICON */

.kdm-icon-wrap{
    width:65px;
    height:65px;
    border-radius:18px;
    background:linear-gradient(
        135deg,
        #12b3c7,
        #041b1e
    );
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:18px;
}

.kdm-icon-wrap i{
    color:#fff;
    font-size:24px;
}

/* CONTENT */

.kdm-service-box h4{
    font-size:21px;
    font-weight:700;
    color:#061B3A;
    margin-bottom:10px;
}

.kdm-service-box p{
    color:#6B7280;
    line-height:1.7;
    font-size:14px;
    margin-bottom:15px;
}

/* LINK */

.kdm-service-box a{
    display:inline-flex;
    align-items:center;
    gap:6px;
    text-decoration:none;
    color:#11738d;
    font-weight:600;
}

/* RESPONSIVE */

@media(max-width:991px){

    .dm-wrap{
        flex-direction:column;
        text-align:center;
    }

    .dm-btns{
        justify-content:center;
    }

    .dm-title{
        font-size:36px;
    }

    .kdm-main-heading{
        font-size:34px;
    }
}

@media(max-width:768px){

    .dm-hero{
        padding:45px 5%;
    }

    .dm-title{
        font-size:30px;
    }

    .dm-btns{
        flex-direction:column;
    }

    .dm-image-box img{
        height:220px;
    }

    .kdm-services-area{
        padding:45px 0;
    }

   

    .kdm-service-box{
        padding:20px;
    }
}
/* =========================
DIGITAL GROWTH SECTION
========================= */

.kdm-growth-section{
    padding:60px 0;
    background:#f8fbff;
}

.kdm-growth-content{
    padding-right:30px;
}

.kdm-growth-tag{
    display:inline-block;
    padding:10px 22px;
    border-radius:50px;
    background:rgba(18,179,199,.12);
    color:#11738d;
    font-weight:600;
    margin-bottom:15px;
    font-size:14px;
}

/* HEADING FIX */

.kdm-growth-content h3{
    margin:0 0 12px;
    padding:0;
    font-size:40px;
    line-height:1.1;
    font-weight:800;
    color:#061B3A;
}

.kdm-growth-content h3 span{
    display:block;
    background:linear-gradient(135deg,#12b3c7,#041b1e);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
}

.kdm-growth-content p{
    margin-top:0;
    color:#6B7280;
    line-height:1.8;
    font-size:16px;
    margin-bottom:25px;
}

.kdm-growth-points{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:12px;
    margin-bottom:25px;
}

.kdm-growth-item{
    background:#fff;
    padding:14px 16px;
    border-radius:14px;
    font-weight:600;
    color:#061B3A;
    box-shadow:0 8px 20px rgba(0,0,0,.05);
    transition:.3s ease;
    border:1px solid rgba(18,179,199,.08);
}

.kdm-growth-item:hover{
    transform:translateY(-4px);
    border-color:rgba(18,179,199,.25);
}

.kdm-growth-item i{
    color:#12b3c7;
    margin-right:8px;
}

.kdm-growth-btn{
    display:inline-block;
    padding:14px 32px;
    border-radius:60px;
    text-decoration:none;
    color:#fff;
    font-weight:600;
    background:linear-gradient(135deg,#12b3c7,#041b1e);
    transition:.4s;
    margin-top:10px;
}

.kdm-growth-btn:hover{
    transform:translateY(-4px);
    box-shadow:0 15px 35px rgba(18,179,199,.25);
}

.kdm-growth-image{
    max-width:420px;
    margin-left:auto;
    border-radius:25px;
    overflow:hidden;
    box-shadow:0 20px 50px rgba(0,0,0,.10);
    background:#fff;
}

.kdm-growth-image img{
    width:100%;
    height:260px;
    object-fit:cover;
    display:block;
}
/* =========================
SECTION 4 - BENEFITS
========================= */

.dm-benefits-alt{
    position:relative;
    padding:60px 5%;
    overflow:hidden;
    background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%);
}

/* BACKGROUND GLOWS */

.dm-benefits-alt::before{
    content:"";
    position:absolute;
    top:-180px;
    right:-150px;
    width:450px;
    height:450px;
    border-radius:50%;
    background:radial-gradient(circle,
    rgba(18,179,199,.12) 0%,
    rgba(18,179,199,.04) 40%,
    transparent 75%);
    filter:blur(40px);
}

.dm-benefits-alt::after{
    content:"";
    position:absolute;
    bottom:-180px;
    left:-180px;
    width:420px;
    height:420px;
    border-radius:50%;
    background:radial-gradient(circle,
    rgba(4,27,30,.08) 0%,
    transparent 70%);
    filter:blur(60px);
}

/* WRAPPER */

.dm-benefits-wrap{
    max-width:1300px;
    margin:auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:60px;
    position:relative;
    z-index:2;
}

/* IMAGE */

.dm-benefits-image{
    flex:0 0 40%;
    position:relative;
    display:flex;
    justify-content:center;
    align-items:center;
}

.dm-benefits-image::before{
    content:"";
    position:absolute;
    width:420px;
    height:420px;
    border-radius:50%;
    background:radial-gradient(circle,
    rgba(18,179,199,.18) 0%,
    rgba(18,179,199,.10) 35%,
    rgba(4,27,30,.05) 60%,
    transparent 80%);
    filter:blur(45px);
    z-index:0;
}

.dm-benefits-image img{
    position:relative;
    z-index:2;
    width:100%;
    max-width:480px;
    height:auto;
    display:block;
}

/* CONTENT */

.dm-benefits-content{
    flex:0 0 55%;
    max-width:55%;
}

.dm-tag{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:10px 22px;
    border-radius:50px;
    background:linear-gradient(135deg,#12b3c7,#041b1e);
    color:#fff;
    font-size:12px;
    font-weight:600;
    letter-spacing:1px;
    margin-bottom:18px;
}

/* HEADING */

.dm-benefits-content h3{
    margin:0 0 12px;
    font-size:40px;
    line-height:1.1;
    font-weight:800;
    color:#061B3A;
}

.dm-benefits-content h3 span{
    display:block;
    background:linear-gradient(135deg,#12b3c7,#041b1e);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
}

/* PARAGRAPH */

.dm-benefits-content p{
    margin:0 0 20px;
    font-size:16px;
    line-height:1.8;
    color:#6b7280;
}

/* BENEFIT LIST */

.dm-benefit-list{
    list-style:none;
    padding:0;
    margin:0;
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:14px;
}

.dm-benefit-list li{
    display:flex;
    align-items:center;
    gap:10px;
    padding:14px 16px;
    background:#fff;
    border:1px solid rgba(18,179,199,.12);
    border-radius:14px;
    color:#061b3a;
    font-size:14px;
    font-weight:600;
    box-shadow:0 8px 20px rgba(0,0,0,.04);
    transition:.3s ease;
}

.dm-benefit-list li:hover{
    transform:translateY(-4px);
    border-color:rgba(18,179,199,.35);
    box-shadow:0 15px 30px rgba(18,179,199,.12);
}

/* BUTTON */

.dm-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:14px 30px;
    border-radius:50px;
    text-decoration:none;
    color:#fff;
    font-weight:600;
    background:linear-gradient(135deg,#12b3c7,#041b1e);
    box-shadow:0 15px 35px rgba(18,179,199,.20);
    transition:.3s ease;
    margin-top:25px;
}

.dm-btn:hover{
    transform:translateY(-4px);
    color:#fff;
}

/* RESPONSIVE */

@media(max-width:991px){

    .dm-benefits-wrap{
        flex-direction:column;
        text-align:center;
        gap:40px;
    }

    .dm-benefits-content{
        max-width:100%;
        flex:100%;
    }

    .dm-benefits-image{
        flex:100%;
    }

    .dm-benefits-image img{
        max-width:320px;
    }

    .dm-benefits-content h3{
        font-size:34px;
    }

    .dm-benefit-list{
        grid-template-columns:1fr;
    }
}

@media(max-width:576px){

    .dm-benefits-alt{
        padding:40px 5%;
    }

    .dm-benefits-content h3{
        font-size:28px;
        line-height:1.2;
    }

    .dm-benefits-content p{
        font-size:15px;
    }

    .dm-benefits-image img{
        max-width:260px;
    }

    .dm-btn{
        width:100%;
    }
}


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

.kdm-industries{
    padding:80px 0;
    background:#f8fbff;
}

/* =========================
TAG (SPAN COLOR FIX)
========================= */

.kdm-process-tag{
    display:inline-block;
    padding:10px 22px;
    border-radius:50px;

    background:rgba(18,179,199,.12);
    color:#12b3c7;

    font-size:13px;
    font-weight:600;
    margin-bottom:15px;
}

/* =========================
GRID (4 × 2 PERFECT)
========================= */

.kdm-industry-grid{
    margin-top:45px;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px;
}

/* =========================
CARD (FIXED PERFECT SQUARE BALANCE)
========================= */

.industry-card{
    background:#fff;

    /* balanced look (not empty, not big) */
    padding:20px 15px;
    min-height:120px;

    border-radius:14px;

    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;

    border:1px solid rgba(18,179,199,.15);
    box-shadow:0 8px 18px rgba(0,0,0,.04);

    transition:0.3s ease;

    cursor:pointer;
}

/* ICON */

.industry-card .icon{
    font-size:26px;
    margin-bottom:8px;
    transition:0.3s ease;
}

/* TEXT */

.industry-card{
    font-size:14px;
    font-weight:600;
    color:#061B3A;
}

/* =========================
HOVER (YOUR GRADIENT)
========================= */

.industry-card:hover{
    transform:translateY(-6px);
    background:linear-gradient(180deg, #12b3c7, #041b1e);
    color:#fff;
    box-shadow:0 18px 40px rgba(18,179,199,.25);
}

.industry-card:hover .icon{
    transform:scale(1.2) rotate(6deg);
}

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

@media(max-width:991px){
    .kdm-industry-grid{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:768px){
    .kdm-industry-grid{
        grid-template-columns:1fr;
    }
}


/* BACKGROUND */
.koi-hero{
  padding: 80px 40px;
  background: linear-gradient(135deg, #f7fcfd, #e6f7f9);
}

/* CONTAINER */
.koi-container{
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1200px;
  margin: auto;
  gap: 60px;
}

/* LEFT */
.koi-left{
  flex: 1;
}

/* BADGE */
.koi-badge{
  display: inline-block;
  padding: 6px 14px;
  background: rgba(18,179,199,0.12);
  color: #12b3c7;
  border-radius: 20px;
  font-size: 13px;
  margin-bottom: 15px;
}

/* HEADING */
.koi-title{
  font-size: 52px;
  font-weight: 700;
  line-height: 1.2;
  color: #000;   /* FIRST LINE BLACK */
}

/* SECOND LINE GRADIENT */
.koi-title span{
  background: linear-gradient(135deg, #12b3c7, #041b1e);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* SUBTEXT */
.koi-subtitle{
  margin-top: 15px;
  font-size: 16px;
  color: #555;
  line-height: 1.6;
}

/* BUTTON */
.koi-btns{
  margin-top: 25px;
}

/* BUTTON STYLE */
.btn{
  padding: 12px 22px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 500;
  display: inline-block;
  transition: 0.3s;
}

/* PRIMARY BUTTON */
.primary{
  background: linear-gradient(135deg, #12b3c7, #041b1e);
  color: #ffffff !important;
  border: none;
}

.primary:hover{
  opacity: 0.9;
}

/* TRUST */
.koi-trust{
  margin-top: 15px;
  font-size: 13px;
  color: #666;
}

/* RIGHT */
.koi-right{
  flex: 1;
  display: flex;
  justify-content: center;
}

/* IMAGE */
.image-box{
  width: 100%;
  max-width: 520px;
  background: #fff;
  padding: 15px;
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.08);
}

.image-box img{
  width: 100%;
  border-radius: 10px;
}

/* RESPONSIVE */
@media(max-width: 900px){
  .koi-container{
    flex-direction: column;
    text-align: center;
  }
}

/*popup model*/
.lead-popup-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.7);
    display:none;
    justify-content:center;
    align-items:center;
    z-index:99999;
    padding:20px;
}

.lead-popup{
    width:950px;
    max-width:100%;
    min-height:550px;
    background:#fff;
    border-radius:25px;
    overflow:hidden;
    display:flex;
    position:relative;
    box-shadow:0 30px 80px rgba(0,0,0,.25);
}

.popup-close{
    position:absolute;
    right:15px;
    top:15px;
    width:40px;
    height:40px;
    border:none;
    border-radius:50%;
    cursor:pointer;
    z-index:10;
}

.popup-left{
    width:45%;
    background:linear-gradient(135deg,#0057d9,#0b2f7a);
    position:relative;
    overflow:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    padding:40px;
}

.left-content{
    position:relative;
    z-index:5;
}

.left-content h2{
    font-size:48px;
    font-weight:800;
}

.left-content p{
    margin-top:15px;
    line-height:1.8;
}

.circle{
    position:absolute;
    border-radius:50%;
    background:rgba(255,255,255,.12);
}

.circle-1{
    width:420px;
    height:420px;
    top:-120px;
    right:-150px;
}

.circle-2{
    width:220px;
    height:220px;
    bottom:30px;
    right:50px;
}

.circle-3{
    width:180px;
    height:180px;
    left:-60px;
    bottom:-60px;
}

.popup-right{
    width:55%;
    padding:50px;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.popup-right h3{
    font-size:25px;
    margin-bottom:25px;
    font-weight:700;
}

.popup-right input,
.popup-right select,
.popup-right textarea{
    width:100%;
    margin-bottom:15px;
    padding:8px 8px;
    border:1px solid #ddd;
    border-radius:10px;
    outline:none;
}

.popup-right textarea{
    height:100px;
    resize:none;
}

.submit-btn{
    width:100%;
    padding:15px;
    border:none;
    border-radius:10px;
    background:#0057d9;
    color:#fff;
    font-weight:700;
}

@media(max-width:768px){

    .lead-popup{
        flex-direction:column;
    }

    .popup-left,
    .popup-right{
        width:100%;
    }

    .popup-left{
        min-height:220px;
    }

    .popup-right{
        padding:25px;
    }
}
./* ==========================
   WEB DEVELOPMENT SERVICES
========================== */

.kdm-services{
    padding:100px 0;
    background:#f7fbfc;
    position:relative;
}

.kdm-services-container{
    width:90%;
    max-width:1400px;
    margin:auto;
}

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

.kdm-services-header{
    text-align:center;
    margin-bottom:60px;
}

.kdm-services-header h2{
    font-size:48px;
    font-weight:700;
    color:#041b1e;
    margin-bottom:15px;
    line-height:1.2;
}

.kdm-services-header h2 span{
    color:#12b3c7;
}

.kdm-services-header p{
    max-width:750px;
    margin:auto;
    color:#667085;
    font-size:18px;
    line-height:1.8;
}

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

.kdm-services-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
}

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

.kdm-card{
    position:relative;
    background:#fff;
    padding:32px;
    border-radius:28px;
    overflow:hidden;
    border:1px solid #e8eef0;
    transition:all .35s ease;
}

/* Top Right Circle */

.kdm-card::before{
    content:'';
    position:absolute;
    top:-45px;
    right:-45px;
    width:140px;
    height:140px;
    border-radius:50%;
    background:rgba(18,179,199,.08);
}

/* Hover */

.kdm-card:hover{
    transform:translateY(-8px);
    border-color:#12b3c7;
    box-shadow:0 15px 35px rgba(18,179,199,.15);
}

/* ==========================
   ICON
========================== */

.kdm-icon-box{
    width:85px;
    height:85px;
    border-radius:24px;
    background:linear-gradient(135deg,#12b3c7,#041b1e);
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:25px;
    transition:.35s;
}

.kdm-card:hover .kdm-icon-box{
    transform:scale(1.08);
}

.kdm-icon-box i{
    color:#fff;
    font-size:34px;
}

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

.kdm-card h3{
    font-size:30px;
    font-weight:700;
    color:#041b1e;
    line-height:1.3;
    margin-bottom:15px;
}

.kdm-card p{
    color:#667085;
    font-size:17px;
    line-height:1.8;
    margin-bottom:22px;
}

.kdm-card a{
    text-decoration:none;
    color:#0b89a2;
    font-size:18px;
    font-weight:700;
    transition:.3s;
}

.kdm-card:hover a{
    color:#12b3c7;
}

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

@media(max-width:1024px){

    .kdm-services-grid{
        grid-template-columns:repeat(2,1fr);
    }

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

}

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

@media(max-width:768px){

    .kdm-services{
        padding:70px 0;
    }

    .kdm-services-grid{
        grid-template-columns:1fr;
        gap:20px;
    }

    .kdm-services-header{
        margin-bottom:40px;
    }

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

    .kdm-services-header p{
        font-size:16px;
    }

    .kdm-card{
        padding:25px;
    }

    .kdm-icon-box{
        width:75px;
        height:75px;
    }

    .kdm-icon-box i{
        font-size:30px;
    }

    .kdm-card h3{
        font-size:24px;
    }

    .kdm-card p{
        font-size:16px;
    }

}

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

@media(max-width:480px){

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

    .kdm-card h3{
        font-size:22px;
    }

    .kdm-card{
        border-radius:22px;
    }

}

.kdm-why {
  padding: 100px 20px;
  font-family: "Poppins", sans-serif;
  background: #ffffff;
}

/* CONTAINER */
.kdm-why-container {
  max-width: 1150px;
  margin: auto;
}

/* HEADER */
.kdm-why-header {
  text-align: center;
  margin-bottom: 60px;
}

.kdm-why-header h2 {
  font-size: 40px;
  color: #041b1e;
  font-weight: 700;
}

.kdm-why-highlight {
  background: linear-gradient(135deg, #12b3c7, #041b1e);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.kdm-why-header p {
  font-size: 16px;
  color: rgba(4, 27, 30, 0.7);
  max-width: 650px;
  margin: auto;
  line-height: 1.6;
}

/* GRID */
.kdm-why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
}

/* CARD */
.kdm-why-card {
  background: linear-gradient(
    135deg,
    rgba(18, 179, 199, 0.06),
    rgba(4, 27, 30, 0.03)
  );

  border: 1px solid rgba(18, 179, 199, 0.20);
  border-radius: 16px;
  padding: 28px;
  transition: 0.3s ease;
  box-shadow: 0 8px 20px rgba(0,0,0,0.04);
}

/* HOVER */
.kdm-why-card:hover {
  transform: translateY(-8px);
  border-color: #12b3c7;
  box-shadow: 0 18px 40px rgba(18, 179, 199, 0.18);
}

/* ICON */
.kdm-why-icon {
  font-size: 26px;
  margin-bottom: 12px;
}

/* TITLE */
.kdm-why-card h3 {
  font-size: 18px;
  margin-bottom: 10px;
  color: #041b1e;
}

/* TEXT */
.kdm-why-card p {
  font-size: 14px;
  color: rgba(4, 27, 30, 0.7);
  line-height: 1.6;
}

/* RESPONSIVE */
@media (max-width: 900px) {
  .kdm-why-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .kdm-why-grid {
    grid-template-columns: 1fr;
  }

  .kdm-why-header h2 {
    font-size: 28px;
  }
}

/* ==========================
   BRANDING HERO SECTION
========================== */

.kbc-hero{
    height:calc(100vh - 80px);
    padding:0 20px;
    background:#fff;
    overflow:hidden;

    display:flex;
    align-items:center;
}

.kbc-container{
    width:100%;
    max-width:1300px;
    margin:0 auto;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:40px;
}

/* LEFT SIDE */

.kbc-left{
    flex:1;
    max-width:600px;
}

.kbc-tag{
    display:inline-flex;
    align-items:center;
    gap:8px;

    padding:10px 18px;

    border-radius:50px;

    background:rgba(18,179,199,0.08);

    border:1px solid rgba(18,179,199,0.15);

    color:#12b3c7;

    font-size:14px;
    font-weight:600;

    margin-bottom:20px;
}

.kbc-left h2{
    font-size:50px;
    line-height:1.05;
    font-weight:800;
    color:#041b1e;

    margin-bottom:20px;
}

.kbc-left h1 span{
    background:linear-gradient(
        135deg,
        #12b3c7,
        #041b1e
    );

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.kbc-left p{
    font-size:17px;
    line-height:1.7;
    color:#5d686a;

    margin-bottom:25px;
}

/* SERVICES */

.kbc-services{
    display:flex;
    flex-wrap:wrap;
    gap:12px;

    margin-bottom:30px;
}

.kbc-services span{
    padding:10px 16px;

    border-radius:50px;

    background:
    linear-gradient(
        135deg,
        rgba(18,179,199,.08),
        rgba(18,179,199,.03)
    );

    border:1px solid rgba(18,179,199,.12);

    color:#041b1e;

    font-size:14px;
    font-weight:600;
}

/* BUTTONS */

.kbc-btns{
    display:flex;
    gap:15px;
}

.kbc-btn-primary{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    text-decoration:none;

    padding:15px 28px;

    border-radius:12px;

    background:
    linear-gradient(
        135deg,
        #12b3c7,
        #041b1e
    );

    color:#fff;
    font-weight:600;

    transition:.3s;
}

.kbc-btn-primary:hover{
    transform:translateY(-3px);
}

.kbc-btn-secondary{
    display:inline-flex;
    align-items:center;
    justify-content:center;

    text-decoration:none;

    padding:15px 28px;

    border-radius:12px;

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

    color:#041b1e;
    font-weight:600;

    transition:.3s;
}

.kbc-btn-secondary:hover{
    background:rgba(18,179,199,.05);
}

/* RIGHT SIDE */

.kbc-right{
    flex:1;

    display:flex;
    justify-content:center;
    align-items:center;
}

.kbc-right img{
    width:100%;
    max-width:650px;
    max-height:80vh;

    object-fit:contain;

    display:block;

    animation:kbcFloat 5s ease-in-out infinite;
}

/* FLOAT EFFECT */

@keyframes kbcFloat{

    0%{
        transform:translateY(0);
    }

    50%{
        transform:translateY(-12px);
    }

    100%{
        transform:translateY(0);
    }
}

/* TABLET */

@media(max-width:991px){

    .kbc-hero{
        height:auto;
        padding:100px 20px 60px;
    }

    .kbc-container{
        flex-direction:column;
        text-align:center;
    }

    .kbc-left{
        max-width:100%;
    }
    

    .kbc-left h1{
        font-size:48px;
    }

    .kbc-services{
        justify-content:center;
    }

    .kbc-btns{
        justify-content:center;
        flex-wrap:wrap;
    }

    .kbc-right img{
        max-width:550px;
        max-height:none;
    }
}

/* MOBILE */

@media(max-width:576px){

    .kbc-left h1{
        font-size:36px;
    }

    .kbc-left p{
        font-size:15px;
    }

    .kbc-services span{
        font-size:13px;
        padding:8px 14px;
    }

    .kbc-btn-primary,
    .kbc-btn-secondary{
        width:100%;
    }

    .kbc-btns{
        flex-direction:column;
    }
}

/* ==========================
   CREATIVE SERVICES
========================== */

.kcd-services-sec{
    padding:90px 20px;
    background:#ffffff;
}

.kcd-services-wrap{
    max-width:1200px;
    margin:auto;
}

.kcd-services-head{
    text-align:center;
    margin-bottom:60px;
}

.kcd-services-head span{
    display:inline-block;

    padding:10px 18px;

    border-radius:50px;

    background:rgba(18,179,199,.08);

    border:1px solid rgba(18,179,199,.15);

    color:#12b3c7;

    font-size:14px;
    font-weight:600;

    margin-bottom:15px;
}

.kcd-services-head h2{
    font-size:48px;
    font-weight:800;
    color:#041b1e;
    margin-bottom:15px;
}

.kcd-services-head p{
    max-width:700px;
    margin:auto;

    color:#667577;
    font-size:16px;
    line-height:1.8;
}

.kcd-services-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:25px;
}

/* CARD */

.kcd-services-card{
    position:relative;
    overflow:hidden;

    padding:35px 30px;

    border-radius:24px;

    background:
    linear-gradient(
        135deg,
        rgba(18,179,199,.10),
        rgba(18,179,199,.03)
    );

    border:1px solid rgba(18,179,199,.15);

    transition:.4s ease;

    box-shadow:
    0 10px 30px rgba(0,0,0,.05);
}

.kcd-services-card::before{
    content:"";

    position:absolute;

    width:150px;
    height:150px;

    top:-70px;
    right:-70px;

    border-radius:50%;

    background:
    rgba(18,179,199,.08);
}

.kcd-services-card::after{
    content:"";

    position:absolute;

    width:90px;
    height:90px;

    bottom:-40px;
    left:-40px;

    border-radius:50%;

    background:
    rgba(18,179,199,.05);
}

/* ICON */

.kcd-services-icon{
    width:70px;
    height:70px;

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

    border-radius:18px;

    margin-bottom:20px;

    background:
    linear-gradient(
        135deg,
        #12b3c7,
        #041b1e
    );

    position:relative;
    z-index:2;
}

.kcd-services-icon i{
    color:#fff;
    font-size:28px;
}

/* TITLE */

.kcd-services-card h3{
    position:relative;
    z-index:2;

    font-size:22px;
    font-weight:700;

    margin-bottom:12px;

    background:
    linear-gradient(
        135deg,
        #12b3c7,
        #041b1e
    );

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

/* TEXT */

.kcd-services-card p{
    position:relative;
    z-index:2;

    font-size:15px;
    line-height:1.8;

    color:#5f6c6d;
}

/* HOVER */

.kcd-services-card:hover{
    transform:translateY(-10px);

    border-color:#12b3c7;

    box-shadow:
    0 20px 40px rgba(18,179,199,.18);
}

/* RESPONSIVE */

@media(max-width:991px){

    .kcd-services-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .kcd-services-head h2{
        font-size:38px;
    }

}

@media(max-width:576px){

    .kcd-services-grid{
        grid-template-columns:1fr;
    }

    .kcd-services-head h2{
        font-size:30px;
    }

    .kcd-services-card{
        padding:28px;
    }

}


/* ==========================
   BEFORE AFTER BRANDING
========================== */

.kbf-brand-transform{
    padding:40px 20px 80px;
    background:#fff;
}

.kbf-transform-wrap{
    max-width:1200px;
    margin:auto;
}

.kbf-transform-head{
    text-align:center;
    margin-bottom:40px;
}

.kbf-transform-tag{
    display:inline-block;
    padding:10px 18px;
    border-radius:50px;
    background:rgba(18,179,199,.08);
    border:1px solid rgba(18,179,199,.15);
    color:#12b3c7;
    font-size:14px;
    font-weight:600;
    margin-bottom:12px;
}

.kbf-transform-head h2{
    font-size:48px;
    font-weight:800;
    color:#041b1e;
    margin:0 0 12px;
    line-height:1.2;
}

.kbf-transform-head h2 span{
    background:linear-gradient(
        135deg,
        #12b3c7,
        #041b1e
    );
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.kbf-transform-head p{
    max-width:700px;
    margin:auto;
    color:#667577;
    font-size:16px;
    line-height:1.8;
}

/* GRID */

.kbf-transform-grid{
    display:grid;
    grid-template-columns:1fr 120px 1fr;
    align-items:center;
    gap:30px;
}

/* BEFORE */

.kbf-before-card{
    padding:40px;
    border-radius:24px;
    background:#fff4f4;
    border:1px solid #ffd9d9;
    box-shadow:0 10px 30px rgba(0,0,0,.05);
}

/* AFTER */

.kbf-after-card{
    padding:40px;
    border-radius:24px;
    background:#f2fffb;
    border:1px solid #b7f0df;
    box-shadow:0 10px 30px rgba(0,0,0,.05);
}

.kbf-label{
    display:inline-block;
    padding:10px 18px;
    border-radius:50px;
    font-size:14px;
    font-weight:700;
    margin-bottom:25px;
    background:#fff;
}

.kbf-before-card .kbf-label{
    color:#e5484d;
}

.kbf-after-card .kbf-label{
    color:#0d9b6d;
}

.kbf-before-card ul,
.kbf-after-card ul{
    margin:0;
    padding:0;
    list-style:none;
}

.kbf-before-card li,
.kbf-after-card li{
    font-size:17px;
    padding:14px 0;
    color:#041b1e;
    border-bottom:1px solid rgba(0,0,0,.05);
}

/* ARROW */

.kbf-arrow-wrap{
    display:flex;
    justify-content:center;
}

.kbf-arrow{
    width:90px;
    height:90px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:42px;
    font-weight:700;
    color:#fff;
    background:linear-gradient(
        135deg,
        #12b3c7,
        #041b1e
    );
    box-shadow:0 15px 35px rgba(18,179,199,.25);
}

/* RESPONSIVE */

@media(max-width:991px){

    .kbf-transform-grid{
        grid-template-columns:1fr;
    }

    .kbf-arrow{
        transform:rotate(90deg);
    }

    .kbf-transform-head h2{
        font-size:38px;
    }
}

@media(max-width:576px){

    .kbf-brand-transform{
        padding:30px 15px 60px;
    }

    .kbf-transform-head{
        margin-bottom:30px;
    }

    .kbf-transform-head h2{
        font-size:30px;
    }

    .kbf-before-card,
    .kbf-after-card{
        padding:28px;
    }

    .kbf-before-card li,
    .kbf-after-card li{
        font-size:15px;
    }
}
:root{
    --gradient: linear-gradient(90deg, #12b3c7, #041b1e);
    --text:#4b5b5e;
}
/* ==========================
HERO HEIGHT FIX (IMPORTANT)
========================== */

.seo-hero{
    position:relative;

    min-height:90vh;
    height:90vh;

    display:flex;
    align-items:center;

    padding:100px 40px;

    background:#ffffff;
    box-sizing:border-box;

    overflow:hidden;
}

/* ==========================
CONTAINER CENTER
========================== */

.seo-container{
    max-width:1200px;
    width:100%;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:60px;
}

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

.seo-left{
    flex:1;
    max-width:600px;
}

/* ==========================
BADGE (HEADING KE UPAR)
========================== */

.seo-badge{
    display:inline-block;

    padding:8px 18px;
    border-radius:50px;

    font-size:13px;
    font-weight:600;

    color:#12b3c7;
    border:1px solid rgba(18,179,199,0.4);
    background:rgba(18,179,199,0.08);

    margin-bottom:20px;
}

/* ==========================
HEADING
========================== */

.seo-left h1{
    font-size:56px;
    line-height:1.1;
    font-weight:800;

    background:var(--gradient);
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;

    margin-bottom:20px;
}

/* ==========================
PARAGRAPH
========================== */

.seo-left p{
    font-size:18px;
    line-height:1.8;
    color:var(--text);
    margin-bottom:30px;
}

/* ==========================
BUTTONS
========================== */

.seo-buttons{
    display:flex;
    gap:15px;
}

/* PRIMARY */

.btn-primary{
    padding:16px 32px;

    background:var(--gradient);
    color:#fff;

    border-radius:50px;
    text-decoration:none;
    font-weight:600;
}

/* SECONDARY */

.btn-secondary{
    padding:16px 32px;

    border:2px solid #12b3c7;
    color:#12b3c7;

    border-radius:50px;
    text-decoration:none;
    font-weight:600;
}

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

.seo-right img{
    width:100%;
    max-width:600px;
}

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

@media(max-width:991px){

    .seo-hero{
        padding:80px 25px;
    }

    .seo-container{
        flex-direction:column;
        text-align:center;
        gap:40px;
    }

    .seo-left h1{
        font-size:42px;
    }

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

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

@media(max-width:576px){

    .seo-left h1{
        font-size:32px;
    }

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

    .btn-primary,
    .btn-secondary{
        width:100%;
    }
}
/* ==========================
TRUSTED SECTION
========================== */

.trusted-section{
    background:#071f22;
    padding:45px 20px;
    border-top:1px solid rgba(255,255,255,.08);
}

.trusted-container{
    max-width:1200px;
    margin:auto;
    text-align:center;
}

.trusted-title{
    color:rgba(255,255,255,.7);
    font-size:15px;
    letter-spacing:2px;
    text-transform:uppercase;
    margin-bottom:35px;
}

.trusted-logos{
    display:flex;
    justify-content:center;
    align-items:center;
    flex-wrap:wrap;
    gap:25px;
}

.logo-item{
    padding:14px 30px;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.08);
    border-radius:50px;
    color:#8FEAF3;
    font-size:16px;
    font-weight:600;
    backdrop-filter:blur(10px);
    transition:.3s;
}

.logo-item:hover{
    transform:translateY(-4px);
    border-color:#12b3c7;
}

@media(max-width:768px){

    .trusted-logos{
        gap:15px;
    }

    .logo-item{
        padding:12px 20px;
        font-size:14px;
    }

}


/* ==========================
WHY SEO MATTERS SECTION
========================== */

.why-seo{
    min-height:100vh;
    display:flex;
    align-items:center;
    padding:100px 20px;
    background:#f7fcfd;
}

.why-seo .container{
    max-width:1200px;
    width:100%;
    margin:auto;
}

/* ==========================
SECTION HEADING
========================== */

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

/* BADGE */
.section-heading span{
    display:inline-block;
    color:#12b3c7;
    font-size:14px;
    font-weight:600;
    letter-spacing:2px;
    text-transform:uppercase;

    margin-bottom:15px;

    background:rgba(18,179,199,0.08);
    border:1px solid rgba(18,179,199,0.25);
    padding:6px 14px;
    border-radius:50px;
}

/* MAIN HEADING (FORCED SOLID COLOR) */
.section-heading h3{
    font-size:52px;
    line-height:1.2;
    font-weight:700;
    margin-bottom:20px;

    color:#12b3c7 !important;
    background: transparent !important;
}

/* PARAGRAPH */
.section-heading p{
    font-size:18px;
    line-height:1.8;
    color:#61757a;
}

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

.why-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:25px;
}

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

.why-card{
    background:#ffffff;
    border:1px solid #dceff2;
    border-radius:24px;
    padding:35px 30px;
    min-height:280px;

    display:flex;
    flex-direction:column;

    box-shadow:0 15px 40px rgba(4,27,30,.05);
    transition:.35s ease;
    position:relative;
    overflow:hidden;
}

/* TOP LINE */
.why-card::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:4px;
    background:#12b3c7;
    transform:scaleX(0);
    transform-origin:left;
    transition:.35s ease;
}

.why-card:hover{
    transform:translateY(-10px);
    border-color:#12b3c7;
    box-shadow:0 20px 50px rgba(18,179,199,.15);
}

.why-card:hover::before{
    transform:scaleX(1);
}

/* ICON */
.why-icon{
    width:70px;
    height:70px;

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

    background:rgba(18,179,199,.10);
    border-radius:18px;

    font-size:30px;
    margin-bottom:25px;
    transition:.3s ease;
}

.why-card:hover .why-icon{
    background:rgba(18,179,199,.18);
    transform:scale(1.05);
}

/* CARD TEXT */
.why-card h3{
    font-size:22px;
    color:#041b1e;
    margin-bottom:15px;
    font-weight:700;
}

.why-card p{
    color:#61757a;
    line-height:1.8;
    font-size:15px;
}

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

@media(max-width:991px){

    .why-seo{
        min-height:auto;
        padding:90px 20px;
    }

    .section-heading h3{
        font-size:40px;
    }

    .why-grid{
        grid-template-columns:repeat(2,1fr);
    }
}

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

@media(max-width:767px){

    .why-seo{
        padding:80px 20px;
    }

    .section-heading h3{
        font-size:32px;
    }

    .section-heading p{
        font-size:16px;
    }

    .why-grid{
        grid-template-columns:1fr;
    }

    .why-card{
        min-height:auto;
        padding:30px 25px;
    }
}
/*toast*/
.popup-overlay{
    display:none;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.6);
    z-index:99999;
}

.popup-box{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
    background:#fff;
    padding:30px;
    border-radius:10px;
    width:400px;
    max-width:90%;
    text-align:center;
    box-shadow:0 10px 30px rgba(0,0,0,.2);
}

.popup-close{
    position:absolute;
    top:10px;
    right:15px;
    cursor:pointer;
    font-size:22px;
    font-weight:bold;
}

.success-msg{
    color:#28a745;
    font-size:18px;
    font-weight:600;
}

.error-msg{
    color:#dc3545;
    font-size:18px;
    font-weight:600;
}
/*case detail*/

.case-badge{
    display:inline-block;
    background:#2563eb;
    padding:8px 20px;
    border-radius:50px;
    margin-bottom:20px;
    font-weight:600;
}

.case-stat{
    background:#fff;
    color:#111;
    border-radius:20px;
    padding:25px;
    text-align:center;
    box-shadow:0 15px 40px rgba(0,0,0,.1);
    transition:.4s;
}

.case-stat:hover{
    transform:translateY(-10px);
}

.case-stat h3{
    color:#2563eb;
    font-size:36px;
    font-weight:700;
}

.content-box{
    background:#fff;
    border-radius:20px;
    padding:35px;
    margin-bottom:30px;
    box-shadow:0 10px 35px rgba(0,0,0,.08);
}

.content-box h2{
    margin-bottom:20px;
    font-weight:700;
}

.result-item{
    background:#f8fafc;
    padding:18px 20px;
    margin-bottom:15px;
    border-radius:12px;
    border-left:4px solid #2563eb;
}

.sidebar-card{
    background:#fff;
    padding:30px;
    border-radius:20px;
    box-shadow:0 10px 35px rgba(0,0,0,.08);
    margin-bottom:25px;
}

.related-case{
    display:flex;
    gap:15px;
    margin-bottom:20px;
    padding-bottom:20px;
    border-bottom:1px solid #eee;
}

.related-case:last-child{
    border:none;
    margin-bottom:0;
}

.related-case img{
    width:80px;
    height:80px;
    object-fit:cover;
    border-radius:10px;
}

.related-case h6{
    margin-bottom:5px;
}

.related-case a{
    text-decoration:none;
    color:#2563eb;
    font-weight:600;
}


@media(max-width:768px){

.case-hero{
    padding:80px 0;
}

.case-stat{
    margin-bottom:15px;
}

}
.website-types-section{
padding:90px 0;
background:#f8fbfc;
}

.section-header{
max-width:700px;
margin:auto;
}

.section-tag{
display:inline-block;
background:#118c9c15;
color:#118c9c;
padding:8px 18px;
border-radius:30px;
font-size:14px;
font-weight:600;
margin-bottom:15px;
}

.section-header h2{
font-size:42px;
font-weight:700;
margin-bottom:15px;
}

.section-header p{
color:#666;
}

.website-types-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:20px;
margin-top:50px;
}

.type-card{
background:#fff;
border-radius:18px;
padding:30px 20px;
text-align:center;
transition:.4s;
border:1px solid #eee;
cursor:pointer;
}

.type-card:hover{
transform:translateY(-8px);
box-shadow:0 15px 40px rgba(0,0,0,.08);
border-color:#118c9c;
}

.type-card i{
font-size:32px;
color:#118c9c;
margin-bottom:15px;
}

.type-card h5{
font-size:18px;
font-weight:600;
margin:0;
}

@media(max-width:991px){
.website-types-grid{
grid-template-columns:repeat(2,1fr);
}
}

@media(max-width:576px){
.website-types-grid{
grid-template-columns:1fr;
}
.section-header h2{
    font-size:30px;
}
}
/*develop process*/
.process-section{
padding:100px 0;
background:#f8fbfc;
}

.process-heading{
max-width:750px;
margin:auto;
}

.process-tag{
display:inline-block;
padding:8px 18px;
background:rgba(17,140,156,.12);
color:#118c9c;
border-radius:30px;
font-size:14px;
font-weight:600;
margin-bottom:15px;
}

.process-heading h2{
font-size:42px;
font-weight:700;
margin-bottom:15px;
}

.process-heading p{
color:#666;
}

.process-card{
background:#fff;
border-radius:20px;
padding:35px 20px;
text-align:center;
position:relative;
height:100%;
transition:.4s;
border:1px solid #eee;
}

.process-card:hover{
transform:translateY(-10px);
border-color:#118c9c;
box-shadow:0 15px 40px rgba(0,0,0,.08);
}

.process-number{
position:absolute;
top:15px;
right:15px;
font-size:14px;
font-weight:700;
color:#118c9c;
background:#118c9c15;
width:38px;
height:38px;
border-radius:50%;
display:flex;
align-items:center;
justify-content:center;
}

.process-card i{
font-size:42px;
color:#118c9c;
margin-bottom:20px;
}

.process-card h5{
font-size:20px;
font-weight:600;
margin-bottom:10px;
}

.process-card p{
font-size:14px;
color:#666;
line-height:1.7;
margin:0;
}

@media(max-width:991px){
.process-heading h2{
font-size:34px;
}
}

/* ==========================================
   KOIMI GOOGLE ADS HERO
========================================== */

.koimi-gads-hero-wrap{
    position:relative;
    overflow:hidden;
    background:#ffffff;
    padding:50px 6%;
    min-height:500px;
}

/* Background Grid */

.koimi-gads-hero-wrap::before{
    content:"";
    position:absolute;
    inset:0;

    background-image:
    linear-gradient(rgba(18,179,199,.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(18,179,199,.04) 1px, transparent 1px);

    background-size:40px 40px;
}

.koimi-gads-hero-wrap::after{
    content:"";
    position:absolute;

    width:500px;
    height:500px;

    top:-200px;
    right:-150px;

    background:
    radial-gradient(
        circle,
        rgba(18,179,199,.15),
        transparent 70%
    );

    filter:blur(80px);
}

/* Container */

.koimi-gads-container{
    max-width:1300px;
    margin:auto;

    display:grid;
    grid-template-columns:1.1fr 1fr;
    gap:50px;

    align-items:center;

    position:relative;
    z-index:2;
}

/* Left Content */

.koimi-gads-badge{
    display:inline-block;

    padding:10px 18px;

    border-radius:50px;

    background:rgba(18,179,199,.08);

    border:1px solid rgba(18,179,199,.15);

    color:#12b3c7;

    font-size:14px;
    font-weight:600;

    margin-bottom:18px;
}

/* Heading */

.koimi-gads-heading{
    font-size:48px;
    line-height:1.08;
    font-weight:700;
    color:#041b1e;
    margin-bottom:18px;
}

.koimi-gads-heading span{
    background:linear-gradient(
        135deg,
        #12b3c7,
        #0b8fa0,
        #041b1e
    );

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
}

.koimi-gads-description{
    font-size:17px;
    line-height:1.8;

    color:#667085;

    margin-bottom:24px;

    max-width:620px;
}

/* Points */

.koimi-gads-points{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:12px;

    margin-bottom:28px;
}

.koimi-gads-points div{
    color:#041b1e;
    font-weight:500;
}

/* Button */

.koimi-gads-btn-primary{
    display:inline-block;

    text-decoration:none;

    padding:16px 30px;

    border-radius:14px;

    background:
    linear-gradient(
        135deg,
        #12b3c7,
        #041b1e
    );

    color:#fff;

    font-weight:700;

    transition:.3s;
}

.koimi-gads-btn-primary:hover{
    transform:translateY(-3px);
}

/* Right Side */

.koimi-gads-visual{
    position:relative;
}

/* Dashboard Card */

.koimi-gads-dashboard{

    max-width:520px;
    margin-left:auto;

    background:
    linear-gradient(
        135deg,
        #12b3c7,
        #041b1e
    );

    padding:15px;

    border-radius:24px;

    box-shadow:
    0 25px 60px rgba(18,179,199,.20);
}

.koimi-gads-topbar{
    display:flex;
    gap:8px;
    margin-bottom:12px;
}

.koimi-gads-topbar span{
    width:12px;
    height:12px;
    border-radius:50%;
    background:#ffffff;
}

/* Dashboard Image */

.koimi-gads-chart{
    height:320px;
    border-radius:16px;
    overflow:hidden;
    background:#fff;
}

.koimi-gads-chart img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

/* Floating Cards */

.koimi-gads-float-one,
.koimi-gads-float-two{

    position:absolute;

    background:#fff;

    padding:10px 15px;

    border-radius:12px;

    font-size:13px;
    font-weight:600;

    color:#041b1e;

    border:1px solid rgba(18,179,199,.15);

    box-shadow:
    0 10px 25px rgba(0,0,0,.08);
}

.koimi-gads-float-one{
    top:60px;
    left:0;
}

.koimi-gads-float-two{
    right:-10px;
    bottom:40px;
}

/* Responsive */

@media(max-width:991px){

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

    .koimi-gads-heading{
        font-size:42px;
    }

    .koimi-gads-points{
        grid-template-columns:1fr;
    }

    .koimi-gads-dashboard{
        max-width:100%;
    }

    .koimi-gads-float-one,
    .koimi-gads-float-two{
        display:none;
    }
}

@media(max-width:767px){

    .koimi-gads-hero-wrap{
        padding:40px 20px;
    }

    .koimi-gads-heading{
        font-size:34px;
    }

    .koimi-gads-btn-primary{
        width:100%;
        text-align:center;
    }
}


/* ===========================
   WHY CHOOSE US SECTION
=========================== */

.koimi-why-section{
    padding:100px 6%;
    background:#fff;
    position:relative;
}

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

.koimi-why-top{
    text-align:center;
    max-width:750px;
    margin:0 auto 70px;
}

.koimi-section-tag{
    display:inline-block;
    padding:10px 18px;
    border-radius:50px;
    background:rgba(18,179,199,.08);
    border:1px solid rgba(18,179,199,.15);
    color:#12b3c7;
    font-size:14px;
    font-weight:600;
    margin-bottom:18px;
}

.koimi-section-heading{
    font-size:40px;
    font-weight:700;
    line-height:1.2;
    color:#041b1e;
    margin-bottom:15px;
}

.koimi-section-heading span{
    background:linear-gradient(
        135deg,
        #12b3c7,
        #0b8fa0,
        #041b1e
    );

    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
}

.koimi-section-desc{
    color:#667085;
    font-size:16px;
    line-height:1.8;
}

/* Cards */

.koimi-why-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:25px;
}

.koimi-why-card{
    position:relative;
    background:#fff;
    padding:30px 25px;
    border-radius:26px;
    border:1px solid rgba(18,179,199,.10);
    overflow:hidden;

    box-shadow:
    0 10px 30px rgba(0,0,0,.04);

    transition:.4s ease;
}

.koimi-why-card::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:4px;

    background:linear-gradient(
        135deg,
        #12b3c7,
        #041b1e
    );
}

.koimi-why-card::after{
    content:"";
    position:absolute;
    width:120px;
    height:120px;
    border-radius:50%;

    top:-60px;
    right:-60px;

    background:
    radial-gradient(
        circle,
        rgba(18,179,199,.15),
        transparent 70%
    );
}

.koimi-why-card:hover{
    transform:translateY(-10px);

    box-shadow:
    0 25px 60px rgba(18,179,199,.15);

    border-color:rgba(18,179,199,.25);
}

/* Icon */

.koimi-why-icon{
    width:68px;
    height:68px;

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

    border-radius:18px;

    background:linear-gradient(
        135deg,
        #12b3c7,
        #041b1e
    );

    color:#fff;
    font-size:28px;

    margin-bottom:20px;

    box-shadow:
    0 15px 30px rgba(18,179,199,.25);
}

/* Number */

.koimi-card-number{
    position:absolute;
    top:20px;
    right:20px;

    font-size:50px;
    font-weight:800;

    color:#041b1e;
    opacity:.05;
}

/* Heading */

.koimi-why-card h3{
    font-size:21px;
    font-weight:700;
    color:#041b1e;
    margin-bottom:12px;
}

/* Description */

.koimi-why-card p{
    font-size:15px;
    line-height:1.8;
    color:#667085;
    margin-bottom:18px;
}

/* Stat Badge */

.koimi-mini-stat{
    display:inline-flex;
    align-items:center;

    padding:8px 14px;

    border-radius:50px;

    background:rgba(18,179,199,.08);

    color:#12b3c7;

    font-size:13px;
    font-weight:600;
}

/* Responsive */

@media(max-width:1200px){

    .koimi-why-grid{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:768px){

    .koimi-why-section{
        padding:70px 20px;
    }

    .koimi-why-grid{
        grid-template-columns:1fr;
    }

    .koimi-section-heading{
        font-size:30px;
    }
}


.koimi-services {
  padding: 60px 6% 70px; /* FIXED GAP */
  background: #f8fafc;
  font-family: Arial, sans-serif;
}

/* Container */
.koimi-services__container {
  max-width: 1200px;
  margin: auto;
}

/* Header */
.koimi-services__header {
  text-align: center;
  margin-bottom: 30px; /* reduced gap */
}

.koimi-services__header h2 {
  font-size: 34px;
  color: #0f172a;
  font-weight: 700;
  margin-bottom: 10px;
}

.koimi-services__header p {
  font-size: 16px;
  color: #475569;
  max-width: 650px;
  margin: auto;
  line-height: 1.6;
}

/* GRID */
.koimi-services__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

/* CARD */
.koimi-service-card {
  background: #ffffff;
  padding: 28px 22px;
  border-radius: 14px;
  border: 1px solid #e2e8f0;
  box-shadow: 0 8px 20px rgba(0,0,0,0.05);
  text-align: center;
  position: relative;
  transition: all 0.3s ease;
  overflow: hidden;
}

/* Top gradient line */
.koimi-service-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 4px;
  width: 100%;
  background: linear-gradient(135deg, #12b3c7, #0b8fa0, #041b1e);
}

/* Hover */
.koimi-service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 15px 35px rgba(18, 179, 199, 0.18);
  border-color: #12b3c7;
}

/* ICON */
.koimi-icon {
  font-size: 34px;
  margin-bottom: 12px;
}

/* ICON COLORS */
.icon-blue { color: #2563eb; }
.icon-green { color: #16a34a; }
.icon-red { color: #ef4444; }
.icon-purple { color: #8b5cf6; }
.icon-orange { color: #f59e0b; }
.icon-teal { color: #12b3c7; }

/* TITLE */
.koimi-service-card h3 {
  font-size: 19px;
  color: #0f172a;
  margin-bottom: 8px;
  font-weight: 600;
}

/* TEXT */
.koimi-service-card p {
  font-size: 14px;
  color: #64748b;
  line-height: 1.6;
}

/* RESPONSIVE */
@media (max-width: 992px) {
  .koimi-services__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .koimi-services__header h2 {
    font-size: 28px;
  }
}

@media (max-width: 600px) {
  .koimi-services {
    padding: 50px 4% 60px;
  }

  .koimi-services__grid {
    grid-template-columns: 1fr;
  }

  .koimi-services__header h2 {
    font-size: 24px;
  }
}


/* =========================
   BENEFITS SECTION (FINAL PREMIUM)
========================= */

.koimi-benefits-section{
  padding: 100px 6%;
  background: #f7fbfc;
}

/* Container */
.koimi-benefits-container{
  max-width: 1200px;
  margin: auto;
}

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

.koimi-benefits-header{
  text-align: center;
  max-width: 800px;
  margin: 0 auto 60px;
}

/* Heading with ICON + GRADIENT */
.koimi-benefits-header h2{
  font-size: 38px;
  font-weight: 800;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;

  background: linear-gradient(135deg, #12b3c7, #0b8fa0, #041b1e);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Heading icon */
.koimi-heading-icon{
  font-size: 32px;
  -webkit-text-fill-color: initial;
}

/* Sub text */
.koimi-benefits-header p{
  font-size: 16px;
  color: #5b6b70;
  margin-top: 10px;
  line-height: 1.7;
}

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

.koimi-benefits-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
}

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

.koimi-benefit-card{
  background: #ffffff;
  padding: 32px 24px;
  border-radius: 18px;

  box-shadow: 0 10px 30px rgba(0,0,0,0.06);
  border: 1px solid rgba(0,0,0,0.05);

  transition: 0.3s ease;
  position: relative;
}

.koimi-benefit-card:hover{
  transform: translateY(-10px);
  box-shadow: 0 18px 45px rgba(0,0,0,0.12);
}

/* =========================
   ICONS (COLORFUL DIFFERENT)
========================= */

.koimi-icon{
  font-size: 42px;
  margin-bottom: 12px;
}

/* Different colors per card */
.koimi-benefit-card:nth-child(1) .koimi-icon{
  color: #12b3c7;
}

.koimi-benefit-card:nth-child(2) .koimi-icon{
  color: #0b8fa0;
}

.koimi-benefit-card:nth-child(3) .koimi-icon{
  color: #ff7a59;
}

.koimi-benefit-card:nth-child(4) .koimi-icon{
  color: #2ecc71;
}

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

.koimi-benefit-card h3{
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 10px;
  color: #0b2b33;
}

.koimi-benefit-card p{
  font-size: 14px;
  color: #5f6f74;
  line-height: 1.6;
  margin-bottom: 12px;
}

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

.koimi-benefit-card ul{
  padding-left: 18px;
  margin: 0;
}

.koimi-benefit-card ul li{
  font-size: 13px;
  color: #4f5f64;
  margin-bottom: 6px;
}

.koimi-benefit-card ul li::marker{
  color: #12b3c7;
}

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

@media (max-width: 992px){
  .koimi-benefits-grid{
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px){
  .koimi-benefits-grid{
    grid-template-columns: 1fr;
  }

  .koimi-benefits-header h2{
    font-size: 30px;
  }
}
/* =========================
   FINAL CTA SECTION
========================= */

.koimi-final-cta{
    padding: 90px 6%;
    background: linear-gradient(135deg, #12b3c7, #0b8fa0, #041b1e);
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* soft glow effect */
.koimi-final-cta::before{
    content:"";
    position:absolute;
    width:300px;
    height:300px;
    background: rgba(255,255,255,0.08);
    filter: blur(80px);
    top:-50px;
    left:-80px;
    border-radius:50%;
}

.koimi-cta-container{
    position: relative;
    max-width: 850px;
    margin: auto;
}

.koimi-final-cta h2{
    font-size: 38px;
    color: #fff;
    margin-bottom: 15px;
    font-weight: 700;
}

.koimi-final-cta p{
    font-size: 18px;
    color: rgba(255,255,255,0.85);
    margin-bottom: 30px;
}

/* Buttons */
.koimi-cta-buttons{
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
}

.koimi-btn{
    padding: 14px 28px;
    border-radius: 50px;
    font-weight: 600;
    text-decoration: none;
    transition: 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* Call Button */
.koimi-call-btn{
    background: #ffffff;
    color: #0b8fa0;
}

.koimi-call-btn:hover{
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}

/* WhatsApp Button */
.koimi-whatsapp-btn{
    background: #25D366;
    color: #fff;
}

.koimi-whatsapp-btn:hover{
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}


/* =========================
   HERO WRAPPER
========================= */
.koimi-metaads-hero-wrap {
    width: 100%;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #ffffff;
    overflow: hidden;
}

/* =========================
   MAIN CONTAINER
========================= */
.koimi-metaads-container {
    width: 100%;
    max-width: 1200px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 60px;
    gap: 40px;
}

/* =========================
   LEFT SECTION (FULL FIX)
========================= */
.koimi-metaads-content {
    width: 58%;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* BADGE */
.koimi-metaads-badge {
    width: fit-content;
    padding: 7px 16px;
    background: linear-gradient(135deg, #12b3c7, #0b8fa0, #000000);
    color: #fff;
    font-size: 12px;
    border-radius: 20px;
    font-weight: 500;
    letter-spacing: 0.5px;
}

/* HEADING */
.koimi-metaads-heading {
    font-size: 48px;
    font-weight: 800;
    line-height: 1.2;
    color: #041b1e;
}

/* HEADING SPAN GRADIENT */
.koimi-metaads-heading span {
    background: linear-gradient(135deg, #12b3c7, #0b8fa0, #000000);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* DESCRIPTION */
.koimi-metaads-description {
    font-size: 16px;
    color: #666;
    line-height: 1.7;
    max-width: 520px;
}

/* POINTS */
.koimi-metaads-points {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 14px;
    color: #222;
}

.koimi-metaads-points div {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* BUTTON */
.koimi-metaads-buttons {
    margin-top: 10px;
}

.koimi-metaads-btn-primary {
    display: inline-block;
    padding: 14px 26px;
    background: linear-gradient(135deg, #12b3c7, #0b8fa0, #000000);
    color: #fff;
    text-decoration: none;
    border-radius: 10px;
    font-weight: 600;
    transition: 0.3s ease;
}

.koimi-metaads-btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 25px rgba(0,0,0,0.25);
}

/* =========================
   RIGHT SECTION
========================= */
.koimi-metaads-visual {
    width: 42%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* DASHBOARD */
.koimi-metaads-dashboard {
    width: 100%;
    max-width: 600px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.12);
    overflow: hidden;
}

/* TOP BAR */
.koimi-metaads-topbar {
    height: 40px;
    background: #f5f7fa;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 12px;
}

.koimi-metaads-topbar span {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #12b3c7;
}

/* IMAGE */
.koimi-metaads-chart img {
    width: 100%;
    display: block;
}

/* FLOATS */
.koimi-metaads-float-one,
.koimi-metaads-float-two {
    position: absolute;
    padding: 10px 14px;
    background: #fff;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 10px 25px rgba(0,0,0,0.12);
}

.koimi-metaads-float-one {
    top: 20px;
    left: 20px;
    color: #12b3c7;
}

.koimi-metaads-float-two {
    bottom: 20px;
    right: 20px;
    color: #0b8fa0;
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 992px) {

    .koimi-metaads-container {
        flex-direction: column;
        padding: 40px 20px;
        text-align: center;
    }

    .koimi-metaads-content,
    .koimi-metaads-visual {
        width: 100%;
    }

    .koimi-metaads-description {
        max-width: 100%;
    }

    .koimi-metaads-heading {
        font-size: 34px;
    }

    .koimi-metaads-visual {
        margin-top: 30px;
    }

    .koimi-metaads-float-one,
    .koimi-metaads-float-two {
        display: none;
    }
}


/* =========================
   TRUST SECTION WRAPPER
========================= */
.koimi-metaads-trust-wrap {
    width: 100%;
    padding: 80px 20px;
    background: #ffffff;
    display: flex;
    justify-content: center;
}

/* =========================
   CONTAINER
========================= */
.koimi-metaads-trust-container {
    width: 100%;
    max-width: 1200px;
    text-align: center;
}

/* =========================
   BADGE
========================= */
.koimi-metaads-trust-badge {
    display: inline-block;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    border-radius: 20px;
    background: linear-gradient(135deg, #12b3c7, #0b8fa0, #000000);
    margin-bottom: 15px;
}

/* =========================
   HEADING
========================= */
.koimi-metaads-trust-heading {
    font-size: 36px;
    font-weight: 800;
    color: #041b1e;
    margin-bottom: 10px;
}

.koimi-metaads-trust-heading span {
    background: linear-gradient(135deg, #12b3c7, #0b8fa0, #000000);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* =========================
   DESCRIPTION
========================= */
.koimi-metaads-trust-desc {
    font-size: 16px;
    color: #666;
    max-width: 700px;
    margin: 0 auto 40px;
    line-height: 1.7;
}

/* =========================
   STATS GRID
========================= */
.koimi-metaads-trust-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 50px;
}

/* CARD */
.koimi-metaads-trust-card {
    background: #ffffff;
    padding: 25px 15px;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    transition: 0.3s ease;
}

.koimi-metaads-trust-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.12);
}

.koimi-metaads-trust-card h3 {
    font-size: 28px;
    color: #12b3c7;
    margin-bottom: 5px;
}

.koimi-metaads-trust-card p {
    font-size: 14px;
    color: #555;
}

/* =========================
   LOGO SECTION
========================= */
.koimi-metaads-trust-logos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
}

.koimi-metaads-logo-box {
    padding: 12px 20px;
    border-radius: 10px;
    background: #f5f7fa;
    font-size: 14px;
    font-weight: 600;
    color: #333;
    transition: 0.3s ease;
}

.koimi-metaads-logo-box:hover {
    background: linear-gradient(135deg, #12b3c7, #0b8fa0);
    color: #fff;
}

/* =========================
   RESPONSIVE
========================= */
@media (max-width: 992px) {

    .koimi-metaads-trust-stats {
        grid-template-columns: repeat(2, 1fr);
    }

}

@media (max-width: 600px) {

    .koimi-metaads-trust-stats {
        grid-template-columns: repeat(1, 1fr);
    }
}


/* =========================
   PROCESS WRAPPER
========================= */
.koimi-metaads-process-wrap {
    width: 100%;
    padding: 90px 20px;
    background: #ffffff;
    display: flex;
    justify-content: center;
}

/* CONTAINER */
.koimi-metaads-process-container {
    width: 100%;
    max-width: 1200px;
    text-align: center;
}

/* BADGE */
.koimi-metaads-process-badge {
    display: inline-block;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    border-radius: 20px;
    background: linear-gradient(135deg, #12b3c7, #0b8fa0, #000000);
    margin-bottom: 15px;
}

/* HEADING */
.koimi-metaads-process-heading {
    font-size: 36px;
    font-weight: 800;
    color: #041b1e;
    margin-bottom: 10px;
}

.koimi-metaads-process-heading span {
    background: linear-gradient(135deg, #12b3c7, #0b8fa0, #000000);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* DESCRIPTION */
.koimi-metaads-process-desc {
    font-size: 16px;
    color: #666;
    max-width: 700px;
    margin: 0 auto 50px;
    line-height: 1.7;
}

/* GRID */
.koimi-metaads-process-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
}

/* CARD */
.koimi-metaads-process-card {
    background: #fff;
    padding: 25px 20px;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    transition: 0.3s ease;
    text-align: left;
    position: relative;
}

.koimi-metaads-process-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.12);
}

/* STEP NUMBER */
.koimi-metaads-step {
    width: 45px;
    height: 45px;
    border-radius: 12px;
    background: linear-gradient(135deg, #12b3c7, #0b8fa0);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    margin-bottom: 15px;
}

/* TITLE */
.koimi-metaads-process-card h3 {
    font-size: 18px;
    margin-bottom: 8px;
    color: #041b1e;
}

/* TEXT */
.koimi-metaads-process-card p {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
}

/* RESPONSIVE */
@media (max-width: 992px) {

    .koimi-metaads-process-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}

@media (max-width: 600px) {

    .koimi-metaads-process-grid {
        grid-template-columns: repeat(1, 1fr);
    }
}


/* =========================
   SERVICES WRAPPER
========================= */
.koimi-metaads-services-wrap {
    width: 100%;
    padding: 90px 20px;
    background: #ffffff;
    display: flex;
    justify-content: center;
}

/* CONTAINER */
.koimi-metaads-services-container {
    width: 100%;
    max-width: 1200px;
    text-align: center;
}

/* BADGE */
.koimi-metaads-services-badge {
    display: inline-block;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    border-radius: 20px;
    background: linear-gradient(135deg, #12b3c7, #0b8fa0, #000000);
    margin-bottom: 15px;
}

/* HEADING */
.koimi-metaads-services-heading {
    font-size: 36px;
    font-weight: 800;
    color: #041b1e;
    margin-bottom: 10px;
}

.koimi-metaads-services-heading span {
    background: linear-gradient(135deg, #12b3c7, #0b8fa0, #000000);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* DESCRIPTION */
.koimi-metaads-services-desc {
    font-size: 16px;
    color: #666;
    max-width: 700px;
    margin: 0 auto 50px;
    line-height: 1.7;
}

/* GRID */
.koimi-metaads-services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
}

/* CARD */
.koimi-metaads-service-card {
    background: #fff;
    padding: 25px 20px;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    transition: 0.3s ease;
    text-align: left;
}

.koimi-metaads-service-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.12);
}

/* ICON */
.koimi-metaads-service-icon {
    font-size: 26px;
    margin-bottom: 12px;
}

/* TITLE */
.koimi-metaads-service-card h3 {
    font-size: 18px;
    margin-bottom: 8px;
    color: #041b1e;
}

/* TEXT */
.koimi-metaads-service-card p {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
}

/* RESPONSIVE */
@media (max-width: 992px) {

    .koimi-metaads-services-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}

@media (max-width: 600px) {

    .koimi-metaads-services-grid {
        grid-template-columns: repeat(1, 1fr);
    }
}




/* =========================
   GLOBAL SECTION FIX (IMPORTANT)
========================= */
section {
    width: 100%;
    margin: 0;
    padding: 60px 0;   /* reduced spacing = gap fix */
}

/* =========================
   HERO SECTION
========================= */
.koimi-metaads-hero-wrap {
    min-height: 100vh;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.koimi-metaads-container {
    width: 100%;
    max-width: 1200px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 60px;
    gap: 40px;
}

/* LEFT */
.koimi-metaads-content {
    width: 58%;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* RIGHT */
.koimi-metaads-visual {
    width: 42%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}


/* =========================
   HEADINGS
========================= */
.koimi-metaads-heading,
.koimi-metaads-trust-heading,
.koimi-metaads-process-heading,
.koimi-metaads-services-heading {
    font-size: 36px;
    font-weight: 800;
    line-height: 1.2;
    color: #041b1e;
}

.koimi-metaads-heading span,
.koimi-metaads-trust-heading span,
.koimi-metaads-process-heading span,
.koimi-metaads-services-heading span {
    background: linear-gradient(135deg, #12b3c7, #0b8fa0, #000000);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* =========================
   DESCRIPTION
========================= */
.koimi-metaads-description,
.koimi-metaads-trust-desc,
.koimi-metaads-process-desc,
.koimi-metaads-services-desc {
    font-size: 16px;
    color: #666;
    line-height: 1.7;
    max-width: 700px;
    margin: 10px auto 0;
}

/* =========================
   GAP FIX (MAIN ISSUE SOLUTION)
========================= */

/* REMOVE EXTRA SPACE BETWEEN SECTIONS */
.koimi-metaads-services-wrap,
.koimi-metaads-process-wrap,
.koimi-metaads-trust-wrap {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
    margin: 0 !important;
}

/* =========================
   GRIDS
========================= */
.koimi-metaads-trust-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 30px;
}

.koimi-metaads-process-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
    margin-top: 30px;
}

.koimi-metaads-services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    margin-top: 30px;
}

.koimi-metaads-trust-card,
.koimi-metaads-process-card,
.koimi-metaads-service-card {
    background: #fff;
    padding: 25px 20px;
    border-radius: 14px;
    border: 1px solid rgba(18, 179, 199, 0.25);
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    transition: 0.3s ease;
}

.koimi-metaads-trust-card:hover,
.koimi-metaads-process-card:hover,
.koimi-metaads-service-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 40px rgba(0,0,0,0.12);
    border-color: #12b3c7;
}
/* =========================
   RESPONSIVE FIX
========================= */
@media (max-width: 992px) {

    .koimi-metaads-container {
        flex-direction: column;
        padding: 40px 20px;
        text-align: center;
    }

    .koimi-metaads-content,
    .koimi-metaads-visual {
        width: 100%;
    }

    .koimi-metaads-trust-stats,
    .koimi-metaads-process-grid,
    .koimi-metaads-services-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {

    .koimi-metaads-trust-stats,
    .koimi-metaads-process-grid,
    .koimi-metaads-services-grid {
        grid-template-columns: 1fr;
    }

    .koimi-metaads-heading {
        font-size: 28px;
    }
}

.koimi-why-section {
    padding: 80px 20px;
    background: linear-gradient(135deg, #ffffff, #f4fbfc);
    font-family: Arial, sans-serif;
}

.koimi-container {
    max-width: 1100px;
    margin: auto;
    text-align: center;
}

.koimi-why-title {
    font-size: 32px;
    font-weight: 700;
    color: #041b1e;
    margin-bottom: 10px;
}

.koimi-why-subtitle {
    font-size: 16px;
    color: #555;
    margin-bottom: 50px;
}

/* 3x2 GRID */
.koimi-why-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.koimi-why-card {
    background: #fff;
    border: 1px solid rgba(18, 179, 199, 0.25);
    border-radius: 14px;
    padding: 25px 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    transition: 0.3s ease;
}

.koimi-why-card:hover {
    transform: translateY(-6px);
    border-color: #12b3c7;
    box-shadow: 0 15px 40px rgba(18, 179, 199, 0.2);
}

.koimi-why-card .icon {
    font-size: 30px;
    margin-bottom: 10px;
}

.koimi-why-card h3 {
    font-size: 18px;
    color: #041b1e;
    margin-bottom: 8px;
}

.koimi-why-card p {
    font-size: 14px;
    color: #555;
}

/* RESPONSIVE */
@media (max-width: 900px) {
    .koimi-why-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 600px) {
    .koimi-why-grid {
        grid-template-columns: 1fr;
    }
}

.koimi-cta-section {
    padding: 90px 20px;
    background: linear-gradient(135deg, #12b3c7, #0b8fa0, #041b1e);
    text-align: center;
    color: #fff;
    font-family: Arial, sans-serif;
}

.koimi-cta-container {
    max-width: 800px;
    margin: auto;
}

.koimi-cta-section h2 {
    font-size: 34px;
    font-weight: 700;
    margin-bottom: 15px;
}

.koimi-cta-section p {
    font-size: 16px;
    opacity: 0.9;
    margin-bottom: 30px;
    line-height: 1.6;
}

/* Buttons */
.koimi-cta-buttons {
    display: flex;
    justify-content: center;
    gap: 15px;
    flex-wrap: wrap;
}

.koimi-btn-primary {
    background: #fff;
    color: #0b8fa0;
    padding: 14px 26px;
    border-radius: 10px;
    font-weight: 600;
    text-decoration: none;
    transition: 0.3s;
}

.koimi-btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}

.koimi-btn-secondary {
    background: transparent;
    border: 1px solid #fff;
    color: #fff;
    padding: 14px 26px;
    border-radius: 10px;
    font-weight: 600;
    text-decoration: none;
    transition: 0.3s;
}

.koimi-btn-secondary:hover {
    background: #fff;
    color: #0b8fa0;
    transform: translateY(-3px);
}



/* HERO WRAPPER */
.kzm-hero-wrap{
  min-height: 80vh;
  width: 100%;
  display: flex;
  align-items: center;
  padding: 10px 8%;
  background: linear-gradient(135deg, #0b8fa0, #041b1e, #012a2f);
  color: #fff;
  overflow: hidden;
}

/* CONTAINER */
.kzm-hero-container{
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

/* LEFT CONTENT */
.kzm-hero-content{
  flex: 1;
  max-width: 600px;
}

.kzm-hero-tagline{
  color: #2fe3ff;
  font-size: 14px;
  letter-spacing: 2px;
  margin-bottom: 15px;
}

.kzm-hero-title{
  font-size: 48px;
  line-height: 1.2;
  font-weight: 700;
}

.kzm-hero-title span{
  color: #2fe3ff;
}

.kzm-hero-text{
  margin-top: 20px;
  color: #c7f6ff;
  font-size: 16px;
  line-height: 1.6;
}

/* CTA */
.kzm-hero-cta{
  margin-top: 30px;
  display: flex;
  gap: 15px;
}

.kzm-btn-primary{
  background: #2fe3ff;
  color: #00181c;
  padding: 12px 20px;
  border-radius: 30px;
  text-decoration: none;
  font-weight: bold;
  transition: 0.3s;
}

.kzm-btn-primary:hover{
  background: #00c2df;
}

.kzm-btn-outline{
  border: 1px solid #2fe3ff;
  color: #2fe3ff;
  padding: 12px 20px;
  border-radius: 30px;
  text-decoration: none;
  transition: 0.3s;
}

.kzm-btn-outline:hover{
  background: #2fe3ff;
  color: #00181c;
}

/* POINTS */
.kzm-hero-points{
  margin-top: 25px;
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
  color: #bff6ff;
  font-size: 14px;
}

/* RIGHT SIDE */
.kzm-hero-media{
  flex: 1;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

.kzm-phone{
  width: 420px;
  filter: drop-shadow(0 10px 30px rgba(0,0,0,0.5));
}

/* BADGES */
.kzm-badge{
  position: absolute;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  padding: 10px 15px;
  border-radius: 12px;
  backdrop-filter: blur(10px);
  font-size: 14px;
}

.kzm-badge-one{
  top: 20%;
  right: 10%;
}

.kzm-badge-two{
  bottom: 25%;
  right: 5%;
}

.kzm-badge-three{
  top: 60%;
  left: 5%;
}

.koimi-services-section{
    padding:80px 0;
    background:#f8fafc;
}

.koimi-services-container{
    max-width:1320px;
    margin:auto;
    padding:0 15px;
}

.koimi-services-title{
    text-align:center;
    margin-bottom:45px;
}

.koimi-services-title h2{
    font-size:52px;
    font-weight:700;
    color:#1d2430;
    margin-bottom:12px;
    line-height:1.2;
}

.koimi-services-title p{
    font-size:17px;
    color:#6b7280;
    max-width:650px;
    margin:auto;
    line-height:1.7;
}

.koimi-services-grid{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:15px;
}

.koimi-service-box{
    background:#fff;
    border:1px solid #e7edf3;
    border-radius:16px;
    padding:20px 12px;
    text-align:center;
    min-height:190px;
    transition:all .3s ease;
}

.koimi-service-box:hover{
    transform:translateY(-6px);
    box-shadow:0 12px 35px rgba(0,0,0,.08);
}

.koimi-service-icon{
    width:54px;
    height:54px;
    margin:0 auto 15px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:22px;
    color:#fff;
}

.instagram-bg{
    background:linear-gradient(
    135deg,
    #fd5949,
    #d6249f,
    #285AEB);
}

.facebook-bg{
    background:#1877f2;
}

.content-bg,
.video-bg,
.ads-bg,
.brand-bg{
       background: linear-gradient(135deg, #12b3c7, #041b1e);
}

.koimi-service-box h3{
    font-size:16px;
    font-weight:600;
    color:#1f2937;
    margin-bottom:8px;
    line-height:1.4;
}

.koimi-service-box p{
    font-size:13px;
    color:#6b7280;
    line-height:1.6;
    margin:0;
}

@media(max-width:1200px){

    .koimi-services-grid{
        grid-template-columns:repeat(3,1fr);
    }
}

@media(max-width:768px){

    .koimi-services-title h2{
        font-size:38px;
    }

    .koimi-services-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .koimi-service-box{
        min-height:auto;
    }
}

@media(max-width:576px){

    .koimi-services-grid{
        grid-template-columns:1fr;
    }

    .koimi-services-title h2{
        font-size:30px;
    }

    .koimi-services-section{
        padding:60px 0;
    }
}

.koimi-advantage-section{
    padding:70px 0;
    background:linear-gradient(
        90deg,
        #02141d 0%,
        #042836 50%,
        #02141d 100%
    );
    overflow:hidden;
}

.koimi-advantage-container{
    max-width:1320px;
    margin:auto;
    padding:0 20px;
}

.koimi-advantage-title{
    text-align:center;
    color:#ffffff;
    font-size:42px;
    font-weight:700;
    margin-bottom:45px;
    line-height:1.2;
}

.koimi-advantage-grid{
    display:grid;
    grid-template-columns:repeat(6,1fr);
}

.koimi-advantage-item{
    text-align:center;
    padding:0 14px;
    position:relative;
}

.koimi-advantage-item:not(:last-child)::after{
    content:"";
    position:absolute;
    top:0;
    right:0;
    width:1px;
    height:100%;
    background:rgba(255,255,255,.15);
}

.koimi-advantage-icon{
    width:50px;
    height:50px;
    margin:0 auto 14px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:26px;
    color:#11d5da;
}

.koimi-advantage-icon i{
    color:#11d5da;
}

.koimi-advantage-item h3{
    color:#ffffff;
    font-size:16px;
    font-weight:600;
    line-height:1.4;
    margin-bottom:10px;
    min-height:44px;
}

.koimi-advantage-item p{
    color:#d3dce5;
    font-size:13px;
    line-height:1.7;
    margin:0;
}

@media(max-width:1200px){

    .koimi-advantage-grid{
        grid-template-columns:repeat(3,1fr);
        gap:35px;
    }

    .koimi-advantage-item:not(:last-child)::after{
        display:none;
    }
}

@media(max-width:768px){

    .koimi-advantage-grid{
        grid-template-columns:repeat(2,1fr);
        gap:30px;
    }

    .koimi-advantage-title{
        font-size:34px;
    }
}

@media(max-width:576px){

    .koimi-advantage-grid{
        grid-template-columns:1fr;
        gap:25px;
    }

    .koimi-advantage-title{
        font-size:28px;
    }

    .koimi-advantage-section{
        padding:55px 0;
    }
}
.koimi-results-section{
    padding:70px 0;
    background:#ffffff;
}

.koimi-results-container{
    max-width:1320px;
    margin:auto;
    padding:0 20px;
}

.koimi-results-heading{
    text-align:center;
    margin-bottom:55px;
}

.koimi-results-heading h2{
    font-size:42px;
    font-weight:700;
    color:#1c2431;
    margin-bottom:10px;
}

.koimi-results-heading p{
    font-size:16px;
    color:#6b7280;
    margin:0;
}

.koimi-results-grid{
    display:grid;
    grid-template-columns:repeat(6,1fr);
    gap:20px;
}

.koimi-result-box{
    text-align:center;
}

.koimi-result-box i{
    font-size:34px;
    color:#11d5da;
    margin-bottom:15px;
}

.koimi-result-box h3{
    font-size:42px;
    font-weight:700;
    color:#11d5da;
    margin-bottom:8px;
    line-height:1;
}

.koimi-result-box span{
    display:block;
    font-size:15px;
    color:#1c2431;
    font-weight:500;
}

@media(max-width:1200px){

    .koimi-results-grid{
        grid-template-columns:repeat(3,1fr);
        row-gap:40px;
    }
}

@media(max-width:768px){

    .koimi-results-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .koimi-results-heading h2{
        font-size:34px;
    }

    .koimi-result-box h3{
        font-size:34px;
    }
}

@media(max-width:576px){

    .koimi-results-grid{
        grid-template-columns:1fr;
        gap:30px;
    }

    .koimi-results-heading h2{
        font-size:28px;
    }
}
/* =========================
   RECENT WORK
========================= */

.kms-work-section{
    padding:90px 6%;
    background:#fff;
}

.kms-work-container{
    max-width:1400px;
    margin:auto;
}

.kms-work-heading{
    text-align:center;
    margin-bottom:55px;
}

.kms-work-heading h2{
    font-size:48px;
    color:#041b1e;
    font-weight:700;
    margin-bottom:10px;
}

.kms-work-heading p{
    color:#666;
    font-size:17px;
}

/* GRID */

.kms-work-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:22px;
}

/* CARD */

.kms-work-card{
    position:relative;
    height:290px;
    border-radius:18px;
    overflow:hidden;
    cursor:pointer;
    transition:.4s ease;
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
}

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

/* SAME TEMP IMAGE */

.kms-work-card1{
    background-image:url("YOUR-IMAGE.jpg");
}

.kms-work-card2{
    background-image:url("YOUR-IMAGE.jpg");
}

.kms-work-card3{
    background-image:url("YOUR-IMAGE.jpg");
}

/* DARK OVERLAY */

.kms-work-overlay{
    position:absolute;
    inset:0;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
    padding:28px;
    background:linear-gradient(
        180deg,
        rgba(0,0,0,0.05) 0%,
        rgba(0,0,0,0.35) 40%,
        rgba(4,27,30,0.95) 100%
    );
}

/* SMALL LABEL */

.kms-work-overlay span{
    display:inline-block;
    width:max-content;
    padding:7px 14px;
    background:#fff;
    color:#041b1e;
    border-radius:30px;
    font-size:12px;
    font-weight:600;
    margin-bottom:14px;
}

/* BIG NUMBER */

.kms-work-overlay h3{
    color:#fff;
    font-size:48px;
    line-height:1;
    font-weight:800;
    margin-bottom:8px;
}

/* GREEN RESULT */

.kms-work-overlay p{
    color:#2ee58d;
    font-size:26px;
    font-weight:700;
}

/* RESPONSIVE */

@media(max-width:991px){

    .kms-work-grid{
        grid-template-columns:1fr;
    }

    .kms-work-card{
        height:260px;
    }

}
/* ==========================
   SHOWCASE SECTION
========================== */

.kms-showcase-sec{
    padding:100px 6%;
    background:#ffffff;
}

.kms-showcase-head{
    text-align:center;
    margin-bottom:60px;
}

.kms-showcase-tag{
    display:inline-block;
    padding:8px 18px;
    border-radius:30px;
    background:rgba(18,179,199,.12);
    color:#12b3c7;
    font-size:14px;
    font-weight:600;
    margin-bottom:15px;
}

.kms-showcase-head h2{
    font-size:46px;
    color:#041b1e;
    margin-bottom:12px;
    font-weight:700;
}

.kms-showcase-head p{
    color:#666;
    font-size:16px;
}

/* GRID */

.kms-showcase-grid{
    max-width:1350px;
    margin:auto;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:24px;
}

/* CARD */

.kms-showcase-card{
    position:relative;
    height:260px;
    border-radius:20px;
    overflow:hidden;
    cursor:pointer;
    transition:.4s ease;
}

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

.kms-showcase-card img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:.5s ease;
}

.kms-showcase-card:hover img{
    transform:scale(1.08);
}

/* OVERLAY */

.kms-showcase-content{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    padding:24px;
    background:linear-gradient(
        to top,
        rgba(4,27,30,.96),
        rgba(4,27,30,.75),
        rgba(4,27,30,0)
    );
}

/* LABEL */

.kms-showcase-content span{
    display:inline-block;
    padding:6px 14px;
    background:#fff;
    color:#041b1e;
    border-radius:30px;
    font-size:12px;
    font-weight:600;
    margin-bottom:12px;
}

/* NUMBER */

.kms-showcase-content h3{
    color:#fff;
    font-size:42px;
    line-height:1;
    margin-bottom:8px;
    font-weight:800;
}

/* RESULT */

.kms-showcase-content p{
    color:#12b3c7;
    font-size:16px;
    font-weight:600;
}

/* RESPONSIVE */

@media(max-width:991px){

    .kms-showcase-grid{
        grid-template-columns:1fr;
    }

    .kms-showcase-card{
        height:240px;
    }

    .kms-showcase-head h2{
        font-size:34px;
    }
}

/* ==========================
   TESTIMONIAL SECTION
========================== */

.mta-testimonial-sec{
    padding:100px 6%;
    background:#f8fcfd;
}

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

.mta-testimonial-head{
    text-align:center;
    margin-bottom:60px;
}

.mta-testimonial-tag{
    display:inline-block;
    padding:8px 18px;
    border-radius:30px;
    background:rgba(18,179,199,.12);
    color:#12b3c7;
    font-weight:600;
    margin-bottom:15px;
}

.mta-testimonial-head h2{
    font-size:46px;
    color:#041b1e;
    margin-bottom:12px;
}

.mta-testimonial-head p{
    color:#666;
}

.mta-testimonial-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:25px;
}

.mta-testimonial-card{
    background:#fff;
    padding:35px;
    border-radius:20px;
    box-shadow:0 15px 40px rgba(0,0,0,.05);
    transition:.3s ease;
}

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

.mta-testimonial-card.featured{
    border:2px solid #12b3c7;
}

.mta-testimonial-stars{
    margin-bottom:20px;
    font-size:18px;
}

.mta-testimonial-card p{
    color:#555;
    line-height:1.8;
    margin-bottom:25px;
}

.mta-testimonial-user{
    display:flex;
    align-items:center;
    gap:15px;
}

.mta-testimonial-avatar{
    width:55px;
    height:55px;
    border-radius:50%;
    background:linear-gradient(135deg,#12b3c7,#0b8fa0);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:700;
}

.mta-testimonial-user h4{
    color:#041b1e;
    margin-bottom:4px;
}

.mta-testimonial-user span{
    color:#777;
    font-size:14px;
}

@media(max-width:991px){

    .mta-testimonial-grid{
        grid-template-columns:1fr;
    }

    .mta-testimonial-head h2{
        font-size:34px;
    }

}

.cta-section{
    background: linear-gradient(
        135deg,
        #006f8d 0%,
        #0097b2 50%,
        #007c95 100%
    );
    padding: 45px 60px;
    position: relative;
    overflow: hidden;
}

.cta-container{
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

.cta-left{
    flex-shrink: 0;
}

.mic-circle{
    width: 110px;
    height: 110px;
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(10px);
    border: 2px solid rgba(255,255,255,0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 48px;
    color: #fff;
}

.cta-content{
    flex: 1;
}

.cta-content h2{
    font-size: 42px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 12px;
    line-height: 1.2;
}

.cta-content p{
    color: rgba(255,255,255,0.9);
    font-size: 18px;
    line-height: 1.7;
    max-width: 650px;
    margin: 0;
}

.cta-buttons{
    display: flex;
    align-items: center;
}

.cta-btn{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #ffffff;
    color: #000000;
    text-decoration: none;
    padding: 12px 20px;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 600;
    border: none;
    transition: all .3s ease;
}

.cta-btn:hover{
    transform: translateY(-3px);
    background: #f5f5f5;
    color: #000;
}

.cta-btn span{
    font-size: 18px;
}

/* Tablet */

@media(max-width:991px){

    .cta-section{
        padding: 40px 25px;
    }

    .cta-container{
        flex-direction: column;
        text-align: center;
    }

    .cta-content h2{
        font-size: 34px;
    }

    .cta-content p{
        max-width: 100%;
    }

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

/* Mobile */

@media(max-width:767px){

    .mic-circle{
        width: 90px;
        height: 90px;
        font-size: 38px;
    }

    .cta-content h2{
        font-size: 28px;
    }

    .cta-content p{
        font-size: 15px;
    }

    .cta-btn{
        width: 100%;
        justify-content: center;
    }
}
/* ==============================
   KOIMI FINAL HERO SECTION
============================== */

.koimi-final-hero{
    position:relative;
    width:100%;
    height:90vh;
    overflow:hidden;

    background:linear-gradient(
        135deg,
        #0b8fa0,
        #041b1e,
        #012a2f
    );

    display:flex;
    align-items:center;
}

/* Container */
.koimi-final-container{
    width:1280px;
    max-width:92%;
    margin:auto;

    display:grid;
    grid-template-columns:1.1fr .9fr;
    align-items:center;
    height:100%;
    gap:60px;

    position:relative;
    z-index:2;
}

/* LEFT */
.koimi-final-left{
    color:#fff;
}

.koimi-final-badge{
    display:inline-block;
    padding:8px 18px;
    background:rgba(255,255,255,0.12);
    border:1px solid rgba(255,255,255,0.2);
    border-radius:50px;
    font-size:13px;
    margin-bottom:18px;
    backdrop-filter:blur(10px);
}

.koimi-final-title{
    font-size:58px;
    line-height:1.1;
    margin-bottom:18px;
}

.koimi-final-title span{
    color:#59d9eb;
}

.koimi-final-desc{
    font-size:17px;
    line-height:1.8;
    color:#d7e6e8;
    max-width:600px;
    margin-bottom:28px;
}

/* RIGHT IMAGE */
.koimi-final-right{
    display:flex;
    justify-content:center;
    align-items:center;
    overflow:hidden;
}

.koimi-final-img{
    width:100%;
    max-width:560px;
    max-height:70vh;
    object-fit:contain;
    border-radius:18px;
    animation:koimiFloat 4s ease-in-out infinite;
    box-shadow:0 20px 60px rgba(0,0,0,0.35);
}

/* FLOAT ANIMATION */
@keyframes koimiFloat{
    0%{transform:translate3d(0,0,0);}
    50%{transform:translate3d(0,-12px,0);}
    100%{transform:translate3d(0,0,0);}
}

/* GLOW EFFECTS */
.koimi-final-glow{
    position:absolute;
    border-radius:50%;
    filter:blur(140px);
    opacity:0.25;
}

.koimi-glow-a{
    width:400px;
    height:400px;
    background:#00e7ff;
    top:-120px;
    left:-100px;
}

.koimi-glow-b{
    width:450px;
    height:450px;
    background:#0b8fa0;
    bottom:-180px;
    right:-120px;
}

/* RESPONSIVE */
@media(max-width:991px){

.koimi-final-hero{
    height:auto;
    padding:110px 0 80px;
}

.koimi-final-container{
    grid-template-columns:1fr;
    text-align:center;
    height:auto;
}

.koimi-final-title{
    font-size:42px;
}

.koimi-final-desc{
    margin:auto auto 25px;
}

.koimi-final-img{
    max-width:420px;
    margin-top:30px;
}
}
/* =========================
KOIMI TRUST + SERVICES SECTION (FINAL)
========================= */

.koimi-trust-strip{
    width:100%;
    padding:45px 0 30px;
    background:#f8fbfc;
    text-align:center;
    border-bottom:1px solid rgba(4,27,30,0.06);
}

/* TRUST TEXT */
.koimi-trust-text{
    font-size:13px;
    font-weight:600;
    letter-spacing:1.5px;
    text-transform:uppercase;
    color:#5f6f75;
    margin-bottom:20px;
}

/* LOGOS ROW */
.koimi-trust-logos{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:40px;
    flex-wrap:wrap;
}

/* LOGO STYLE */
.koimi-trust-logos span{
    font-size:14px;
    font-weight:600;
    color:#041b1e;
    opacity:0.55;
    position:relative;
    transition:all 0.3s ease;
    cursor:default;
}

/* HOVER EFFECT */
.koimi-trust-logos span:hover{
    opacity:1;
    color:#0b8fa0;
    transform:translateY(-2px);
}

/* DOT SEPARATOR */
.koimi-trust-logos span::after{
    content:"";
    position:absolute;
    right:-20px;
    top:50%;
    transform:translateY(-50%);
    width:4px;
    height:4px;
    background:#0b8fa0;
    border-radius:50%;
    opacity:0.3;
}

.koimi-trust-logos span:last-child::after{
    display:none;
}

/* =========================
SERVICES SECTION
========================= */

.koimi-services-wrapper{
    width:1280px;
    max-width:92%;
    margin:0 auto;
    text-align:center;
    padding:90px 0;
}

/* TITLE */
.koimi-services-title{
    font-size:44px;
    font-weight:700;
    color:#041b1e;
    margin-bottom:15px;
    line-height:1.2;
}

/* SUBTITLE */
.koimi-services-subtitle{
    font-size:16px;
    color:#5f6f75;
    max-width:750px;
    margin:0 auto 60px;
    line-height:1.7;
}

/* GRID */
.koimi-services-grid{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    gap:30px;
}

/* CARD */
.koimi-service-card{
    background:#ffffff;
    padding:35px 30px;
    border-radius:18px;
    text-align:left;
    border:1px solid rgba(11,143,160,0.08);
    box-shadow:0 10px 30px rgba(4,27,30,0.06);
    transition:all 0.3s ease;
    position:relative;
    overflow:hidden;
}

/* TOP ACCENT LINE */
.koimi-service-card::before{
    content:"";
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:3px;
    background:linear-gradient(135deg,#0b8fa0,#012a2f);
    opacity:0.8;
}

/* HOVER */
.koimi-service-card:hover{
    transform:translateY(-8px);
    box-shadow:0 18px 45px rgba(4,27,30,0.12);
}

/* CARD TITLE */
.koimi-service-card h3{
    font-size:20px;
    font-weight:700;
    color:#041b1e;
    margin-bottom:10px;
}

/* CARD TEXT */
.koimi-service-card p{
    font-size:14px;
    color:#5f6f75;
    line-height:1.6;
}

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

@media (max-width: 991px){

.koimi-services-grid{
    grid-template-columns:1fr;
}

.koimi-services-title{
    font-size:32px;
}

.koimi-trust-logos{
    gap:18px;
}

.koimi-services-wrapper{
    padding:70px 0;
}

}

/* =========================
SMOOTH ENTRY ANIMATION
========================= */

.koimi-service-card{
    animation:fadeUp 0.6s ease;
}

@keyframes fadeUp{
    from{
        opacity:0;
        transform:translateY(20px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

/* ==============================
   KOIMI CASE STUDY SECTION
   LIGHT PREMIUM VERSION
============================== */

.koimi-case-section{
    width:100%;
    padding:100px 0;

    /* LIGHT PREMIUM GRADIENT */
    background:linear-gradient(
        135deg,
        #0b3a3f,
        #064047,
        #0a4b52
    );

    color:#fff;
}

/* CONTAINER */
.koimi-case-container{
    width:1280px;
    max-width:92%;
    margin:auto;
}

/* HEADER */
.koimi-case-header{
    text-align:center;
    margin-bottom:60px;
}

.koimi-case-badge{
    display:inline-block;
    padding:8px 16px;
    background:rgba(255,255,255,0.12);
    border:1px solid rgba(255,255,255,0.2);
    border-radius:50px;
    font-size:13px;
    margin-bottom:15px;
    backdrop-filter:blur(10px);
}

.koimi-case-title{
    font-size:40px;
    margin-bottom:10px;
    line-height:1.2;
}

.koimi-case-title span{
    color:#59d9eb;
}

.koimi-case-desc{
    font-size:16px;
    color:#cfeaec;
    max-width:700px;
    margin:auto;
    line-height:1.6;
}

/* GRID */
.koimi-case-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:25px;
}

/* CARD */
.koimi-case-card{
    background:rgba(255,255,255,0.10);
    border:1px solid rgba(255,255,255,0.18);
    border-radius:18px;
    padding:25px;
    backdrop-filter:blur(14px);
    transition:0.3s ease;
    box-shadow:0 15px 40px rgba(0,0,0,0.25);
}

.koimi-case-card:hover{
    transform:translateY(-8px);
    background:rgba(255,255,255,0.14);
}

/* TITLE */
.koimi-case-card h3{
    margin-bottom:20px;
    font-size:18px;
}

/* BEFORE AFTER ROW */
.koimi-case-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:20px;
}

.koimi-case-row span{
    font-size:12px;
    color:#a8f5ff;
    letter-spacing:0.5px;
}

.koimi-case-row p{
    margin:5px 0 0;
    font-size:15px;
}

/* ARROW */
.koimi-case-arrow{
    font-size:22px;
    color:#59d9eb;
}

/* HIGHLIGHT */
.koimi-case-highlight{
    padding-top:12px;
    border-top:1px solid rgba(255,255,255,0.15);
    color:#59d9eb;
    font-weight:600;
    font-size:14px;
}

/* RESPONSIVE */
@media(max-width:991px){

.koimi-case-grid{
    grid-template-columns:1fr;
    gap:20px;
}

.koimi-case-title{
    font-size:30px;
}

.koimi-case-desc{
    padding:0 10px;
}
}

/* ==============================
   KOIMI PROCESS SECTION
============================== */

.koimi-process-section{
    width:100%;
    padding:100px 0;
    background:#ffffff;
    color:#111;
}

/* CONTAINER */
.koimi-process-container{
    width:1280px;
    max-width:92%;
    margin:auto;
}

/* HEADER */
.koimi-process-header{
    text-align:center;
    margin-bottom:60px;
}

.koimi-process-badge{
    display:inline-block;
    padding:8px 16px;
    background:#e9fbfd;
    border:1px solid #bdeff5;
    border-radius:50px;
    font-size:13px;
    margin-bottom:15px;
    color:#007c8a;
}

.koimi-process-title{
    font-size:40px;
    margin-bottom:10px;
}

.koimi-process-title span{
    color:#0b8fa0;
}

.koimi-process-desc{
    font-size:16px;
    color:#555;
}

/* GRID */
.koimi-process-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:25px;
}

/* CARD */
.koimi-process-card{
    background:#fff;
    border:1px solid #eaeaea;
    border-radius:16px;
    padding:25px;
    text-align:center;
    box-shadow:0 10px 30px rgba(0,0,0,0.06);
    transition:0.3s ease;
}

.koimi-process-card:hover{
    transform:translateY(-6px);
}

.koimi-process-card h3{
    font-size:18px;
    margin-bottom:10px;
    color:#0b8fa0;
}

.koimi-process-card p{
    font-size:14px;
    color:#555;
    line-height:1.6;
}

/* RESPONSIVE */
@media(max-width:991px){

.koimi-process-grid{
    grid-template-columns:1fr;
    gap:20px;
}

.koimi-process-title{
    font-size:30px;
}
}
/* ==============================
   KOIMI AUDIT SECTION
============================== */

.koimi-audit-section{
    width:100%;
    padding:100px 0;
    background:linear-gradient(135deg,#0b3a3f,#064047,#0a4b52);
    color:#fff;
    position:relative;
    overflow:hidden;
}

/* CONTAINER */
.koimi-audit-container{
    width:1280px;
    max-width:92%;
    margin:auto;

    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:60px;
    align-items:center;
}

/* LEFT */
.koimi-audit-badge{
    display:inline-block;
    padding:8px 16px;
    background:rgba(255,255,255,0.12);
    border:1px solid rgba(255,255,255,0.2);
    border-radius:50px;
    font-size:13px;
    margin-bottom:18px;
    backdrop-filter:blur(10px);
}

.koimi-audit-title{
    font-size:44px;
    line-height:1.2;
    margin-bottom:15px;
}

.koimi-audit-title span{
    color:#59d9eb;
}

.koimi-audit-desc{
    font-size:16px;
    line-height:1.7;
    color:#d7e6e8;
    margin-bottom:20px;
}

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

.koimi-audit-list li{
    margin-bottom:10px;
    color:#cfeaec;
    font-size:15px;
}

/* BUTTON */
.koimi-audit-btn{
    display:inline-block;
    margin-top:25px;
    padding:14px 22px;
    background:#00e7ff;
    color:#002b33;
    font-weight:600;
    border-radius:10px;
    text-decoration:none;
    transition:0.3s ease;
    box-shadow:0 10px 25px rgba(0,231,255,0.25);
}

.koimi-audit-btn:hover{
    background:#59d9eb;
    transform:translateY(-3px);
}

/* RIGHT IMAGE */
.koimi-audit-right{
    display:flex;
    justify-content:center;
    align-items:center;
}

.koimi-audit-img{
    width:100%;
    max-width:420px;
    border-radius:18px;
    box-shadow:0 20px 50px rgba(0,0,0,0.25);
    animation:auditFloat 4s ease-in-out infinite;
}

/* FLOAT ANIMATION */
@keyframes auditFloat{
    0%{transform:translateY(0);}
    50%{transform:translateY(-10px);}
    100%{transform:translateY(0);}
}

/* RESPONSIVE */
@media(max-width:991px){

.koimi-audit-container{
    grid-template-columns:1fr;
    text-align:center;
    gap:30px;
}

.koimi-audit-title{
    font-size:34px;
}

.koimi-audit-img{
    max-width:320px;
}
}

/* ==============================
   WHY CHOOSE KOIMI SECTION
============================== */

.koimi-why-section{
    width:100%;
    padding:100px 0;
    background:#ffffff;
    color:#111;
}

/* CONTAINER */
.koimi-why-container{
    width:1280px;
    max-width:92%;
    margin:auto;
}

/* HEADER */
.koimi-why-header{
    text-align:center;
    margin-bottom:60px;
}

.koimi-why-badge{
    display:inline-block;
    padding:8px 16px;
    background:#e9fbfd;
    border:1px solid #bdeff5;
    border-radius:50px;
    font-size:13px;
    color:#007c8a;
    margin-bottom:15px;
}

.koimi-why-title{
    font-size:40px;
    margin-bottom:10px;
}

.koimi-why-title span{
    color:#0b8fa0;
}

.koimi-why-desc{
    font-size:16px;
    color:#555;
    max-width:700px;
    margin:auto;
    line-height:1.6;
}

/* GRID */
.koimi-why-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:25px;
}

/* CARD */
.koimi-why-card{
    background:#fff;
    border:1px solid #eaeaea;
    border-radius:16px;
    padding:25px;
    box-shadow:0 10px 30px rgba(0,0,0,0.06);
    transition:0.3s ease;
}

.koimi-why-card:hover{
    transform:translateY(-6px);
    box-shadow:0 15px 40px rgba(0,0,0,0.1);
}

.koimi-why-card h3{
    font-size:17px;
    margin-bottom:10px;
    color:#0b8fa0;
}

.koimi-why-card p{
    font-size:14px;
    color:#555;
    line-height:1.6;
}

/* RESPONSIVE */
@media(max-width:991px){

.koimi-why-grid{
    grid-template-columns:1fr;
    gap:20px;
}

.koimi-why-title{
    font-size:30px;
}
}

:root{
    --koimi-primary:#0B8FA0;
    --koimi-dark:#163B63;
    --koimi-orange:#F7941D;
}

.koimi-industries-section{
    padding:90px 8%;
    background:#F8FBFD;
}

.koimi-industries-heading{
    text-align:center;
    margin-bottom:60px;
}

.koimi-industries-heading h2{
    font-size:48px;
    font-weight:700;
    color:#222;
}

.koimi-industries-heading h2 span{
    background:linear-gradient(90deg,#0B8FA0,#163B63);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.koimi-industries-heading p{
    max-width:760px;
    margin:20px auto 0;
    color:#666;
    line-height:28px;
    font-size:17px;
}

.koimi-industries-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:28px;
}

.koimi-industry-card{
    background:#fff;
    border:1px solid rgba(11,143,160,.18);
    border-radius:20px;
    padding:35px 25px;
    text-align:center;
    transition:.35s ease;
    position:relative;
    overflow:hidden;
}

.koimi-industry-card::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:5px;
    background:linear-gradient(90deg,#0B8FA0,#163B63,#F7941D);
}

.koimi-industry-card:hover{
    transform:translateY(-10px);
    box-shadow:0 20px 40px rgba(11,143,160,.15);
    border-color:#0B8FA0;
}

.koimi-industry-icon{
    width:75px;
    height:75px;
    margin:auto;
    border-radius:50%;
    background:linear-gradient(135deg,#0B8FA0,#163B63);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:32px;
    margin-bottom:20px;
}

.koimi-industry-card h3{
    font-size:24px;
    margin-bottom:12px;
    color:#163B63;
    font-weight:700;
}

.koimi-industry-card p{
    color:#666;
    line-height:26px;
    font-size:15px;
}

@media(max-width:1200px){
    .koimi-industries-grid{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:768px){

    .koimi-industries-grid{
        grid-template-columns:1fr;
    }

    .koimi-industries-heading h2{
        font-size:36px;
    }

}
/*==========================
        HERO SECTION
==========================*/

.koimi-content-hero{
    width:100%;
    background:#fff;
    padding:90px 7%;
    overflow:hidden;
    position:relative;
}

.koimi-content-hero::before{
    content:"";
    position:absolute;
    width:520px;
    height:520px;
    background:#e8fcff;
    border-radius:50%;
    top:-180px;
    left:-180px;
    filter:blur(90px);
}

.koimi-content-hero::after{
    content:"";
    position:absolute;
    width:420px;
    height:420px;
    background:#f0fdff;
    border-radius:50%;
    right:-120px;
    bottom:-120px;
    filter:blur(90px);
}

.koimi-hero-wrapper{
    max-width:1320px;
    margin:auto;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:70px;
    position:relative;
    z-index:2;
}

/* Left */

.koimi-hero-left{
    width:70%;
}

.koimi-hero-tag{
    display:inline-block;
    padding:10px 22px;
    background:#eefcff;
    color:#12b3c7;
    border-radius:50px;
    font-size:13px;
    font-weight:700;
    letter-spacing:.8px;
    margin-bottom:25px;
}

.koimi-hero-title{
    font-size:64px;
    line-height:1.15;
    font-weight:800;
    color:#182433;
    margin-bottom:25px;
}

.koimi-hero-title span{
    background:linear-gradient(135deg,#12b3c7,#041b1e);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    background-clip:text;
}

.koimi-hero-description{
    font-size:18px;
    line-height:1.8;
    color:#667085;
    max-width:560px;
    margin-bottom:40px;
}

/* Buttons */

.koimi-hero-buttons{
    display:flex;
    align-items:center;
    gap:18px;
}

.koimi-primary-btn{
    display:inline-flex;
    align-items:center;
    gap:10px;
    text-decoration:none;
    padding:16px 34px;
    border-radius:8px;
    color:#fff;
    font-weight:600;
    background:linear-gradient(135deg,#12b3c7,#041b1e);
    transition:.3s;
}

.koimi-primary-btn:hover{
    transform:translateY(-3px);
}

.koimi-secondary-btn{
    display:inline-flex;
    align-items:center;
    gap:10px;
    text-decoration:none;
    color:#12b3c7;
    font-weight:600;
}

.koimi-secondary-btn:hover{
    color:#041b1e;
}

/* Right */

.koimi-hero-right{
    width:50%;
    display:flex;
    justify-content:flex-end;
}

.koimi-hero-right img{
    width:100%;
    max-width:680px;
    display:block;
}

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

@media(max-width:991px){

    .koimi-hero-wrapper{
        flex-direction:column;
        text-align:center;
    }

    .koimi-hero-left,
    .koimi-hero-right{
        width:100%;
    }

    .koimi-hero-title{
        font-size:46px;
    }

    .koimi-hero-description{
        margin:0 auto 35px;
    }

    .koimi-hero-buttons{
        justify-content:center;
        flex-wrap:wrap;
    }

    .koimi-hero-right{
        justify-content:center;
        margin-top:40px;
    }

}

@media(max-width:576px){

    .koimi-content-hero{
        padding:70px 5%;
    }

    .koimi-hero-title{
        font-size:34px;
        line-height:1.2;
    }

    .koimi-hero-description{
        font-size:16px;
    }

    .koimi-hero-buttons{
        flex-direction:column;
    }

    .koimi-primary-btn,
    .koimi-secondary-btn{
        width:100%;
        justify-content:center;
    }

}

/*=========================
WHY CONTENT MARKETING
=========================*/

.why-content{
    padding:80px 0;
    background:#fff;
}

.container{
    width:1200px;
    max-width:92%;
    margin:auto;
}

.why-wrapper{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:55px;
}

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

.why-left{
    width:300px;
    flex-shrink:0;
}

.section-label{
    display:block;
    color:#16A4BA;
    font-size:12px;
    font-weight:700;
    letter-spacing:1.5px;
    text-transform:uppercase;
    margin-bottom:18px;
}

.section-title{
    font-size:36px;
    font-weight:700;
    line-height:1.15;
    color:#173B56;
    margin:0;
}

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

.why-cards{
    display:flex;
    gap:18px;
}

.why-card{

    width:178px;
    height:165px;

    border:1px solid #E8EDF2;
    border-radius:14px;

    background:#fff;

    padding:18px;

    box-sizing:border-box;

    transition:.35s;
}

.why-card:hover{

    transform:translateY(-4px);

    box-shadow:0 10px 22px rgba(0,0,0,.05);

}

/*=========================
ICON
=========================*/

.card-icon{

    width:42px;
    height:42px;

    border:1px solid #D9EDF2;

    border-radius:10px;

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

    color:#16A4BA;

    font-size:18px;

    margin-bottom:16px;

}

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

.why-card h3{

    font-size:17px;

    font-weight:600;

    color:#173B56;

    line-height:1.35;

    margin:0 0 10px;

}

.why-card p{

    font-size:13px;

    line-height:1.55;

    color:#6E7F91;

    margin:0;

}

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

@media(max-width:1200px){

    .why-wrapper{
        flex-direction:column;
    }

    .why-cards{
        flex-wrap:wrap;
    }

}

@media(max-width:768px){

    .why-cards{
        display:grid;
        grid-template-columns:1fr;
    }

    .why-card{
        width:100%;
        height:auto;
    }

    .section-title{
        font-size:30px;
    }

}

/*=========================================
KOIMI CONTENT MARKETING SERVICES
=========================================*/

.koimi-cms-section{
    padding:50px 0;
    background:#ffffff;
    position:relative;
    overflow:hidden;
    height:150vh;
}

.koimi-cms-heading{
    max-width:720px;
    margin:0 auto 50px;
    text-align:center;
}

.koimi-cms-subtitle{

    display:inline-block;

    font-size:13px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:2px;

    color:#14A8BE;

    margin-bottom:16px;

}

.koimi-cms-heading h2{

    font-size:42px;

    font-weight:700;

    color:#183B56;

    line-height:1.15;

    margin-bottom:18px;

}

.koimi-cms-heading p{

    font-size:16px;

    line-height:1.8;

    color:#667085;

    max-width:620px;

    margin:auto;

}


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

.koimi-cms-grid{

    display:grid;

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

    gap:22px;

}


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

.koimi-cms-card{

    background:#fff;

    border:1px solid #DDEEF4;

    border-radius:18px;

    padding:24px;

    min-height:195px;

    transition:.35s ease;

    display:flex;

    flex-direction:column;

    justify-content:flex-start;

    box-shadow:0 10px 30px rgba(20,168,190,.06);

}

.koimi-cms-card:hover{

    transform:translateY(-6px);

    border-color:#14A8BE;

    box-shadow:0 18px 40px rgba(20,168,190,.15);

}

/*=========================================
ICON
=========================================*/

.koimi-cms-icon{

    width:54px;
    height:54px;

    background:#EAF9FC;

    border:1px solid #CFEAF1;

    border-radius:14px;

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

    color:#14A8BE;

    font-size:22px;

    margin-bottom:18px;

    transition:.3s;

}

.koimi-cms-card:hover .koimi-cms-icon{

    background:#14A8BE;
    color:#ffffff;
    transform:rotate(-5deg);

}

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

.koimi-cms-card h3{

    font-size:19px;

    font-weight:700;

    color:#183B56;

    line-height:1.35;

    margin:0 0 12px;

}

.koimi-cms-card p{

    font-size:14px;

    line-height:1.7;

    color:#667085;

    margin:0;

}

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

.koimi-cms-bottom{

    margin-top:40px;

    text-align:center;

}

.koimi-cms-btn{

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;

    padding:15px 34px;

    background:#14A8BE;

    color:#ffffff;

    border-radius:12px;

    text-decoration:none;

    font-size:15px;

    font-weight:600;

    transition:.35s ease;

}

.koimi-cms-btn:hover{

    background:#108FA3;

    transform:translateY(-3px);

    box-shadow:0 14px 28px rgba(20,168,190,.25);

}

.koimi-cms-btn i{

    transition:.3s;

}

.koimi-cms-btn:hover i{

    transform:translateX(6px);

}

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

@media (max-width:991px){

    .koimi-cms-section{
        padding:60px 0;
    }

    .koimi-cms-heading{
        margin-bottom:40px;
    }

    .koimi-cms-heading h2{
        font-size:36px;
    }

    .koimi-cms-grid{
        grid-template-columns:repeat(2,1fr);
        gap:18px;
    }

}

@media (max-width:767px){

    .koimi-cms-section{
        padding:50px 0;
    }

    .koimi-cms-heading h2{
        font-size:30px;
    }

    .koimi-cms-heading p{
        font-size:15px;
    }

    .koimi-cms-grid{
        grid-template-columns:1fr;
        gap:18px;
    }

    .koimi-cms-card{
        min-height:auto;
        padding:22px;
    }

    .koimi-cms-icon{
        width:48px;
        height:48px;
        font-size:20px;
    }

}
/* HERO SECTION */
.koimiHeroSection {
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;

  background: linear-gradient(135deg, #f7fbff 0%, #eaf6ff 50%, #ffffff 100%);
  color: #061a4a;

  padding: 80px 60px;
  position: relative;
  overflow: hidden;
}

/* soft background glow */
.koimiHeroSection::before {
  content: "";
  position: absolute;
  top: -200px;
  right: -150px;
  width: 500px;
  height: 500px;
  background: rgba(18, 179, 199, 0.15);
  filter: blur(140px);
  border-radius: 50%;
}

.koimiHeroSection::after {
  content: "";
  position: absolute;
  bottom: -200px;
  left: -150px;
  width: 500px;
  height: 500px;
  background: rgba(10, 45, 107, 0.12);
  filter: blur(160px);
  border-radius: 50%;
}

/* WRAPPER */
.koimiHeroWrapper {
  position: relative;
  z-index: 2;

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

  max-width: 1200px;
  width: 100%;
}

/* LEFT CONTENT */
.koimiHeroLeftBox {
  flex: 1;
  text-align: left;
}

/* TAGLINE */
.koimiHeroTagline {
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #12b3c7;
  margin-bottom: 12px;
  display: inline-block;
}

/* TITLE */
.koimiHeroTitle {
  font-size: 52px;
  font-weight: 800;
  line-height: 1.15;
  margin-bottom: 18px;
  color: #061a4a;
}

/* SUBTITLE */
.koimiHeroSubtitle {
  font-size: 17px;
  color: #4b5563;
  line-height: 1.7;
  margin-bottom: 28px;
  max-width: 520px;
}

/* BUTTON GROUP */
.koimiHeroBtnGroup {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
}

/* PRIMARY BUTTON */
.koimiHeroBtnPrimary {
  padding: 13px 26px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;

  background: linear-gradient(90deg, #12b3c7, #0a2d6b);
  color: #fff;

  box-shadow: 0 10px 25px rgba(18, 179, 199, 0.25);
  transition: all 0.3s ease;
}

.koimiHeroBtnPrimary:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 35px rgba(18, 179, 199, 0.35);
}

/* OUTLINE BUTTON */
.koimiHeroBtnOutline {
  padding: 13px 26px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;

  border: 1px solid rgba(18, 179, 199, 0.6);
  color: #061a4a;

  background: rgba(18, 179, 199, 0.05);
  backdrop-filter: blur(10px);

  transition: all 0.3s ease;
}

.koimiHeroBtnOutline:hover {
  background: #12b3c7;
  color: #fff;
  transform: translateY(-3px);
}

/* RIGHT IMAGE */
.koimiHeroRightBox {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* IMAGE STYLE */
.koimiHeroImg {
  width: 100%;
  max-width: 430px;

  border-radius: 18px;
  background: #ffffff;
  padding: 10px;

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

  transition: transform 0.4s ease;
}

.koimiHeroImg:hover {
  transform: scale(1.03);
}

/* RESPONSIVE */
@media (max-width: 992px) {
  .koimiHeroWrapper {
    flex-direction: column;
    text-align: center;
    gap: 40px;
  }

  .koimiHeroLeftBox {
    text-align: center;
  }

  .koimiHeroSubtitle {
    margin: 0 auto 25px;
  }

  .koimiHeroBtnGroup {
    justify-content: center;
  }

  .koimiHeroImg {
    max-width: 320px;
  }
}


.koimiLBSection {
  padding: 100px 60px;
  background: linear-gradient(180deg, #f7fbff 0%, #ffffff 100%);
  font-family: Arial, sans-serif;
}

.koimiLBContainer {
  max-width: 1200px;
  margin: auto;
}

/* HEADER */
.koimiLBHeader {
  text-align: center;
  margin-bottom: 60px;
}

.koimiLBTag {
  font-size: 13px;
  letter-spacing: 2px;
  color: #12b3c7;
  text-transform: uppercase;
}

.koimiLBHeader h2 {
  font-size: 42px;
  color: #061a4a;
  margin: 10px 0;
}

.koimiLBHeader p {
  font-size: 16px;
  color: #5b6472;
  max-width: 650px;
  margin: auto;
  line-height: 1.6;
}

/* GRID */
.koimiLBGrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 25px;
}

/* CARD */
.koimiLBCard {
  background: #ffffff;
  padding: 30px;
  border-radius: 18px;

  border: 1px solid #e6eef5;
  box-shadow: 0 10px 25px rgba(0,0,0,0.05);

  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

/* ICON */
.koimiLBIcon {
  width: 55px;
  height: 55px;

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

  border-radius: 14px;

  background: linear-gradient(135deg, #12b3c7, #0b3a6e);
  color: #fff;
  font-size: 18px;

  margin-bottom: 15px;
}

/* TEXT */
.koimiLBCard h3 {
  font-size: 18px;
  color: #061a4a;
  margin-bottom: 10px;
}

.koimiLBCard p {
  font-size: 14px;
  color: #5b6472;
  line-height: 1.6;
}

/* LINK */
.koimiLBCard a {
  display: inline-block;
  margin-top: 15px;
  color: #12b3c7;
  font-weight: 600;
  text-decoration: none;
  transition: 0.3s;
}

.koimiLBCard a:hover {
  color: #0b3a6e;
  transform: translateX(5px);
}

/* HOVER EFFECT */
.koimiLBCard:hover {
  transform: translateY(-10px);
  border-color: #12b3c7;
  box-shadow: 0 20px 45px rgba(18, 179, 199, 0.15);
}

/* RESPONSIVE */
@media (max-width: 992px) {
  .koimiLBGrid {
    grid-template-columns: repeat(2, 1fr);
  }

  .koimiLBHeader h2 {
    font-size: 34px;
  }
}

@media (max-width: 600px) {
  .koimiLBGrid {
    grid-template-columns: 1fr;
  }

  .koimiLBSection {
    padding: 70px 20px;
  }
}

.koimiPortfolio {
  padding: 80px 60px; /* height reduce + balanced */
  background: #ffffff;
}

/* container */
.koimiPortfolioContainer {
  max-width: 1200px;
  margin: auto;
}

/* HEADER */
.koimiPortfolioHeader {
  text-align: center;
  margin-bottom: 40px; /* reduced spacing */
}

.koimiPortfolioHeader span {
  color: #12b3c7;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* ⭐ IMPROVED HEADING STYLE */
.koimiGradientText {
  font-size: 34px; /* smaller + premium */
  font-weight: 700;
  margin: 10px 0;

  background: linear-gradient(90deg, #12b3c7, #03093e);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  line-height: 1.3;
}

.koimiPortfolioHeader p {
  color: #5b6472;
  font-size: 14px;
}

/* GRID */
.koimiPortfolioGrid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px; /* tighter spacing */
}

/* ⭐ SMALLER PREMIUM CARDS */
.koimiPortfolioCard {
  height: 180px; /* reduced size */
  border-radius: 14px;

  overflow: hidden;

  border: 1px solid #e6eef5;
  box-shadow: 0 8px 20px rgba(0,0,0,0.04);

  transition: all 0.3s ease;
}

/* IMAGE */
.koimiPortfolioCard img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 0.4s ease;
}

/* HOVER */
.koimiPortfolioCard:hover {
  transform: translateY(-8px);
  border-color: #12b3c7;
  box-shadow: 0 20px 40px rgba(18,179,199,0.12);
}

.koimiPortfolioCard:hover img {
  transform: scale(1.06);
}

/* RESPONSIVE */
@media (max-width: 992px) {
  .koimiPortfolioGrid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 600px) {
  .koimiPortfolioGrid {
    grid-template-columns: 1fr;
  }

  .koimiPortfolio {
    padding: 60px 20px;
  }
}

.koimiCTA {
  padding: 100px 60px;
  background: linear-gradient(90deg, #12b3c7, #03093e);
  text-align: center;
  color: #ffffff;
  position: relative;
  overflow: hidden;
}

/* container */
.koimiCTAContainer {
  max-width: 900px;
  margin: auto;
}

/* heading */
.koimiCTA h2 {
  font-size: 40px;
  font-weight: 700;
  margin-bottom: 15px;
  line-height: 1.3;
}

/* text */
.koimiCTA p {
  font-size: 16px;
  opacity: 0.9;
  margin-bottom: 30px;
}

/* buttons */
.koimiCTAButtons {
  display: flex;
  justify-content: center;
  gap: 15px;
  flex-wrap: wrap;
}

/* PRIMARY BUTTON */
.koimiBtnPrimary {
  background: #ffffff;
  color: #03093e;
  padding: 12px 25px;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  transition: 0.3s;
}

.koimiBtnPrimary:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}

/* SECONDARY BUTTON */
.koimiBtnSecondary {
  border: 1px solid #ffffff;
  color: #ffffff;
  padding: 12px 25px;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  transition: 0.3s;
}

.koimiBtnSecondary:hover {
  background: #ffffff;
  color: #03093e;
  transform: translateY(-3px);
}

/* RESPONSIVE */
@media (max-width: 600px) {
  .koimiCTA h2 {
    font-size: 28px;
  }

  .koimiCTA p {
    font-size: 14px;
  }
}
/*==========================
 KOIMI VIDEO HERO SECTION
==========================*/

.koimiVideoHero{
    position: relative;
    overflow: hidden;
    min-height: 80vh;
    display: flex;
    align-items: center;
    background: linear-gradient(135deg,#ffffff 0%,#eefbfd 45%,#f8fcff 100%);
}

/* Decorative Blur Circle */
.koimiVideoHero::before{
    content:"";
    position:absolute;
    width:450px;
    height:450px;
    border-radius:50%;
    background:rgba(18,179,199,.08);
    top:-180px;
    left:-180px;
    filter:blur(20px);
}

.koimiVideoHero::after{
    content:"";
    position:absolute;
    width:500px;
    height:500px;
    border-radius:50%;
    background:rgba(3,9,62,.05);
    bottom:-220px;
    right:-200px;
    filter:blur(15px);
}

/*==========================
 CONTAINER
==========================*/

.koimiVideoHeroContainer{

    width:90%;
    max-width:1250px;
    margin:auto;

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

    gap:70px;

    position:relative;
    z-index:2;

}

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

.koimiVideoHeroContent{

    width:50%;

}

.koimiVideoTag{

    display:inline-block;

    padding:10px 18px;

    border-radius:50px;

    background:rgba(18,179,199,.10);

    color:#12b3c7;

    font-size:14px;

    font-weight:600;

    letter-spacing:1px;

    margin-bottom:22px;

}

.koimiVideoHeroContent h1{

    font-size:58px;

    line-height:1.15;

    font-weight:800;

    color:#061a4a;

    margin-bottom:20px;

}

.koimiVideoHeroContent h1 span{

    background:linear-gradient(90deg,#12b3c7,#03093e);

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}

.koimiVideoHeroContent p{

    font-size:18px;

    color:#5b6472;

    line-height:1.8;

    max-width:560px;

    margin-bottom:35px;

}

/*==========================
 BUTTONS
==========================*/

.koimiVideoButtons{

    display:flex;

    gap:18px;

}

.koimiVideoBtnPrimary{

    text-decoration:none;

    padding:16px 34px;

    border-radius:10px;

    color:#fff;

    font-weight:600;

    background:linear-gradient(90deg,#12b3c7,#03093e);

    transition:.35s;

}

.koimiVideoBtnPrimary:hover{

    transform:translateY(-4px);

    box-shadow:0 15px 35px rgba(18,179,199,.25);

}

.koimiVideoBtnSecondary{

    text-decoration:none;

    padding:16px 34px;

    border-radius:10px;

    border:2px solid #12b3c7;

    color:#061a4a;

    font-weight:600;

    transition:.35s;

}

.koimiVideoBtnSecondary:hover{

    background:linear-gradient(90deg,#12b3c7,#03093e);

    color:#fff;

    border-color:transparent;

}

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

.koimiVideoHeroImage{

    width:50%;

    display:flex;

    justify-content:center;

    align-items:center;

}

.koimiVideoHeroImage img{

    width:100%;

    max-width:540px;

    animation:koimiFloat 5s ease-in-out infinite;

    filter:drop-shadow(0 35px 45px rgba(3,9,62,.12));

}

/*==========================
 FLOAT ANIMATION
==========================*/

@keyframes koimiFloat{

    0%{
        transform:translateY(0px);
    }

    50%{
        transform:translateY(-12px);
    }

    100%{
        transform:translateY(0px);
    }

}

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

@media(max-width:991px){

.koimiVideoHero{

    min-height:auto;
    padding:80px 0;

}

.koimiVideoHeroContainer{

    flex-direction:column-reverse;

    text-align:center;

    gap:50px;

}

.koimiVideoHeroContent{

    width:100%;

}

.koimiVideoHeroImage{

    width:100%;

}

.koimiVideoHeroImage img{

    max-width:450px;

}

.koimiVideoButtons{

    justify-content:center;

}

.koimiVideoHeroContent h1{

    font-size:44px;

}

}

@media(max-width:576px){

.koimiVideoHero{

    padding:60px 0;

}

.koimiVideoHeroContent h1{

    font-size:34px;

}

.koimiVideoHeroContent p{

    font-size:16px;

}

.koimiVideoButtons{

    flex-direction:column;

    width:100%;

}

.koimiVideoBtnPrimary,
.koimiVideoBtnSecondary{

    text-align:center;

}

}

/*=========================
KOIMI SERVICES
==========================*/

.koimiVideoServices{

    padding:90px 0;
    background:#f8fcff;

}

.koimiVideoServicesContainer{

    width:90%;
    max-width:1250px;
    margin:auto;

}

.koimiVideoHeading{

    text-align:center;
    margin-bottom:55px;

}

.koimiVideoHeading span{

    color:#12b3c7;
    font-size:14px;
    letter-spacing:2px;
    font-weight:600;

}

.koimiVideoHeading h2{

    font-size:44px;
    margin:15px 0;
    color:#061a4a;
    font-weight:700;

}

.koimiVideoHeading h2 span{

    font-size:44px;

    background:linear-gradient(90deg,#12b3c7,#03093e);

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}

.koimiVideoHeading p{

    max-width:700px;
    margin:auto;
    color:#6b7280;
    line-height:1.8;
    font-size:17px;

}

/* GRID */

.koimiVideoServicesGrid{

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:28px;

}

/* CARD */

.koimiVideoServiceCard{

    background:#fff;

    border:1px solid #d9edf2;

    border-radius:18px;

    padding:35px 28px;

    transition:.35s;

    position:relative;

    overflow:hidden;

}

.koimiVideoServiceCard::before{

    content:"";

    position:absolute;

    width:170px;
    height:170px;

    background:rgba(18,179,199,.08);

    border-radius:50%;

    top:-90px;
    right:-90px;

    transition:.5s;

}

.koimiVideoServiceCard:hover{

    transform:translateY(-10px);

    border-color:#12b3c7;

    box-shadow:0 25px 50px rgba(18,179,199,.15);

}

.koimiVideoServiceCard:hover::before{

    transform:scale(1.3);

}

/* ICON */

.koimiVideoIcon{

    width:70px;
    height:70px;

    border-radius:18px;

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

    background:linear-gradient(90deg,#12b3c7,#03093e);

    color:#fff;

    font-size:28px;

    margin-bottom:25px;

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

}

.koimiVideoServiceCard h3{

    font-size:24px;

    color:#061a4a;

    margin-bottom:15px;

}

.koimiVideoServiceCard p{

    color:#6b7280;

    line-height:1.8;

    font-size:15px;

    margin-bottom:28px;

}

.koimiVideoServiceCard a{

    text-decoration:none;

    color:#12b3c7;

    font-weight:600;

    transition:.3s;

}

.koimiVideoServiceCard:hover a{

    letter-spacing:.8px;

}

/* Responsive */

@media(max-width:992px){

.koimiVideoServicesGrid{

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

}

}

@media(max-width:768px){

.koimiVideoHeading h2{

font-size:34px;

}

}

@media(max-width:576px){

.koimiVideoServices{

padding:70px 0;

}

.koimiVideoServicesGrid{

grid-template-columns:1fr;

}

}


/*==========================
KOIMI PORTFOLIO
==========================*/

.koimiVideoPortfolio{
    padding:50px 0;
    background:#ffffff;
}

.koimiVideoPortfolioContainer{
    width:90%;
    max-width:1250px;
    margin:auto;
}

.koimiPortfolioHeading{
    text-align:center;
    margin-bottom:55px;
}

.koimiPortfolioHeading span{
    color:#12b3c7;
    font-size:14px;
    letter-spacing:2px;
    font-weight:600;
}

.koimiPortfolioHeading h2{
    font-size:44px;
    margin:15px 0;
    color:#061a4a;
    font-weight:700;
}

.koimiPortfolioHeading h2 span{
    background:linear-gradient(90deg,#12b3c7,#03093e);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
}

.koimiPortfolioHeading p{
    max-width:700px;
    margin:auto;
    color:#6b7280;
    line-height:1.8;
}

.koimiPortfolioGrid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:28px;
}

.koimiPortfolioCard{
    background:#fff;
    border-radius:18px;
    overflow:hidden;
    border:1px solid #e7eef5;
    transition:.4s;
    box-shadow:0 10px 30px rgba(0,0,0,.05);
}

.koimiPortfolioCard:hover{
    transform:translateY(-10px);
    box-shadow:0 25px 45px rgba(18,179,199,.15);
}

.koimiPortfolioImage{
    position:relative;
    height:230px;
    overflow:hidden;
}

.koimiPortfolioImage img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:.5s;
}

.koimiPortfolioCard:hover img{
    transform:scale(1.08);
}

.koimiPortfolioImage::after{
    content:"";
    position:absolute;
    inset:0;
    background:rgba(3,9,62,.35);
    opacity:0;
    transition:.4s;
}

.koimiPortfolioCard:hover .koimiPortfolioImage::after{
    opacity:1;
}

.koimiPlayButton{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%,-50%) scale(.8);
    width:70px;
    height:70px;
    border-radius:50%;
    background:linear-gradient(90deg,#12b3c7,#03093e);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:22px;
    opacity:0;
    transition:.4s;
    z-index:2;
}

.koimiPortfolioCard:hover .koimiPlayButton{
    opacity:1;
    transform:translate(-50%,-50%) scale(1);
}

.koimiPortfolioContent{
    padding:25px;
}

.koimiPortfolioContent h3{
    color:#061a4a;
    margin-bottom:12px;
    font-size:22px;
}

.koimiPortfolioContent p{
    color:#6b7280;
    line-height:1.7;
    font-size:15px;
}

.koimiPortfolioButton{
    margin-top:55px;
    text-align:center;
}

.koimiPortfolioButton a{
    display:inline-block;
    padding:16px 38px;
    border-radius:10px;
    background:linear-gradient(90deg,#12b3c7,#03093e);
    color:#fff;
    text-decoration:none;
    font-weight:600;
    transition:.3s;
}

.koimiPortfolioButton a:hover{
    transform:translateY(-5px);
    box-shadow:0 15px 35px rgba(18,179,199,.25);
}

@media(max-width:992px){

.koimiPortfolioGrid{
grid-template-columns:repeat(2,1fr);
}

}

@media(max-width:576px){

.koimiPortfolioGrid{
grid-template-columns:1fr;
}

.koimiPortfolioHeading h2{
font-size:34px;
}

}


/*==============================
KOIMI PROCESS
==============================*/

.koimiProcessSection{

    padding:90px 0;

    background:#f8fcff;

}

.koimiProcessContainer{

    width:90%;

    max-width:1250px;

    margin:auto;

}

.koimiProcessHeading{

    text-align:center;

    margin-bottom:60px;

}

.koimiProcessHeading span{

    color:#12b3c7;

    font-size:14px;

    letter-spacing:2px;

    font-weight:600;

}

.koimiProcessHeading h2{

    margin:15px 0;

    font-size:44px;

    color:#061a4a;

    font-weight:700;

}

.koimiProcessHeading h2 span{

    background:linear-gradient(90deg,#12b3c7,#03093e);

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}

.koimiProcessHeading p{

    max-width:700px;

    margin:auto;

    color:#6b7280;

    line-height:1.8;

}

.koimiProcessGrid{

    display:grid;

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

    gap:25px;

}

.koimiProcessCard{

    background:#fff;

    padding:35px 25px;

    border-radius:18px;

    text-align:center;

    border:1px solid #e6eef5;

    transition:.35s;

    position:relative;

}

.koimiProcessCard:hover{

    transform:translateY(-10px);

    border-color:#12b3c7;

    box-shadow:0 20px 40px rgba(18,179,199,.15);

}

.koimiProcessNumber{

    width:70px;

    height:70px;

    margin:auto;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:linear-gradient(90deg,#12b3c7,#03093e);

    color:#fff;

    font-size:22px;

    font-weight:700;

    margin-bottom:25px;

}

.koimiProcessCard h3{

    color:#061a4a;

    margin-bottom:15px;

    font-size:22px;

}

.koimiProcessCard p{

    color:#6b7280;

    line-height:1.7;

    font-size:15px;

}

@media(max-width:1100px){

.koimiProcessGrid{

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

}

}

@media(max-width:768px){

.koimiProcessGrid{

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

}

}

@media(max-width:576px){

.koimiProcessGrid{

grid-template-columns:1fr;

}

.koimiProcessHeading h2{

font-size:34px;

}

}

/*=========================================
      WHY CHOOSE KOIMI
==========================================*/

.koimiWhySection{

    position: relative;

    overflow: hidden;

    display: flex;

    align-items: center;

     height: 135vh;

    padding: 90px 0;

    background: linear-gradient(180deg,#ffffff 0%,#f8fcff 100%);

}

.koimiWhySection::before{
    content: "";
    position: absolute;
    width: 450px;
    height:88vh;
    border-radius: 50%;
    background: rgba(18,179,199,.08);
    top: -180px;
    left: -180px;
    filter: blur(30px);
}

.koimiWhySection::after{
    content: "";
    position: absolute;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: rgba(3,9,62,.05);
    bottom: -250px;
    right: -220px;
    filter: blur(35px);
}

.koimiWhyContainer{

    width:90%;
    max-width:1250px;
    margin:auto;

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

    gap:70px;

    position:relative;
    z-index:2;

}

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

.koimiWhyContent{

    width:50%;

}

.koimiWhyContent span{

    display:inline-block;

    font-size:14px;

    font-weight:700;

    color:#12b3c7;

    letter-spacing:2px;

    text-transform:uppercase;

    margin-bottom:18px;

}

.koimiWhyContent h2{

    font-size:54px;

    font-weight:800;

    line-height:1.15;

    letter-spacing:-1px;

    color:#061a4a;

    margin-bottom:24px;

}

.koimiWhyContent h2 span{

    background:linear-gradient(90deg,#12b3c7,#03093e);

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}

.koimiWhyContent p{

    color:#5b6472;

    font-size:17px;

    line-height:1.9;

    max-width:560px;

    margin-bottom:35px;

}

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

.koimiWhyList{

    list-style:none;

    padding:0;

    margin:35px 0;

}

.koimiWhyList li{

    display:flex;

    align-items:center;

    gap:18px;

    margin-bottom:20px;

    font-size:17px;

    font-weight:600;

    color:#061a4a;

    transition:.35s;

    cursor:pointer;

}

.koimiWhyList li:hover{

    transform:translateX(10px);

}

.koimiWhyList i{

    width:45px;

    height:45px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(18,179,199,.12);

    color:#12b3c7;

    transition:.4s;

    font-size:18px;

}

.koimiWhyList li:hover i{

    background:linear-gradient(90deg,#12b3c7,#03093e);

    color:#fff;

    transform:rotate(360deg);

}

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

.koimiWhyBtn{

    display:inline-flex;

    align-items:center;

    gap:12px;

    text-decoration:none;

    padding:17px 36px;

    border-radius:10px;

    color:#fff;

    font-weight:600;

    background:linear-gradient(90deg,#12b3c7,#03093e);

    transition:.4s;

    position:relative;

    overflow:hidden;

}

.koimiWhyBtn::before{

    content:"";

    position:absolute;

    width:0;

    height:100%;

    left:0;

    top:0;

    background:rgba(255,255,255,.15);

    transition:.4s;

}

.koimiWhyBtn::after{

    content:"→";

    font-size:18px;

    transition:.4s;

}

.koimiWhyBtn:hover::before{

    width:100%;

}

.koimiWhyBtn:hover{

    transform:translateY(-6px);

    box-shadow:0 20px 45px rgba(18,179,199,.30);

}

.koimiWhyBtn:hover::after{

    transform:translateX(8px);

}

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

.koimiWhyStats{

    width:50%;

    display:grid;

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

    gap:25px;

}

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

.koimiStatCard{

    position:relative;

    overflow:hidden;

    background:#ffffff;

    padding:45px 30px;

    border-radius:22px;

    border:1px solid #dfeef5;

    box-shadow:0 15px 40px rgba(0,0,0,.05);

    transition:.45s cubic-bezier(.2,.8,.2,1);

}

.koimiStatCard::before{

    content:"";

    position:absolute;

    width:220px;

    height:220px;

    border-radius:50%;

    background:rgba(18,179,199,.08);

    top:-120px;

    right:-120px;

    transition:.6s;

}

.koimiStatCard::after{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:0;

    height:4px;

    background:linear-gradient(90deg,#12b3c7,#03093e);

    transition:.45s;

}

/* Hover */

.koimiStatCard:hover{

    transform:translateY(-12px);

    border-color:#12b3c7;

    box-shadow:0 25px 60px rgba(18,179,199,.18);

}

.koimiStatCard:hover::before{

    transform:scale(1.6);

}

.koimiStatCard:hover::after{

    width:100%;

}

/*=========================================
NUMBER
==========================================*/

.koimiStatCard h3{

    font-size:54px;

    font-weight:800;

    margin-bottom:12px;

    background:linear-gradient(90deg,#12b3c7,#03093e);

    -webkit-background-clip:text;

    -webkit-text-fill-color:transparent;

}

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

.koimiStatCard p{

    font-size:16px;

    font-weight:500;

    line-height:1.7;

    color:#5b6472;

}

/*=========================================
FLOAT ANIMATION
==========================================*/

.koimiStatCard:nth-child(1){

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

}

.koimiStatCard:nth-child(2){

    animation:koimiFloat 4s ease-in-out infinite .4s;

}

.koimiStatCard:nth-child(3){

    animation:koimiFloat 4s ease-in-out infinite .8s;

}

.koimiStatCard:nth-child(4){

    animation:koimiFloat 4s ease-in-out infinite 1.2s;

}

@keyframes koimiFloat{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-8px);

    }

    100%{

        transform:translateY(0);

    }

}

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

@media(max-width:1100px){

.koimiWhyContainer{

    flex-direction:column;

    gap:60px;

}

.koimiWhyContent{

    width:100%;

}

.koimiWhyStats{

    width:100%;

}

}

@media(max-width:768px){

.koimiWhyContent h2{

    font-size:42px;

}

.koimiWhyStats{

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

}

}

@media(max-width:576px){

.koimiWhySection{

    padding:80px 0;

}

.koimiWhyStats{

    grid-template-columns:1fr;

}

.koimiWhyContent h2{

    font-size:34px;

}

.koimiWhyContent p{

    font-size:16px;

}

.koimiWhyBtn{

    width:100%;

    justify-content:center;

}

.koimiWhyList li{

    font-size:16px;

}

}

/*==========================================
        KOIMI PREMIUM CTA SECTION
==========================================*/

.koimiFinalCtaSection{

    position:relative;

    height:100vh;

    display:flex;

    align-items:center;

    justify-content:center;

    overflow:hidden;

    background:linear-gradient(135deg,#12b3c7 0%,#0a7cae 35%,#03093e 100%);

}

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

.koimiFinalCtaSection::before{

    content:"";

    position:absolute;

    width:650px;

    height:650px;

    border-radius:50%;

    background:radial-gradient(circle,
    rgba(255,255,255,.20) 0%,
    rgba(255,255,255,.10) 35%,
    transparent 75%);

    top:-250px;

    left:-250px;

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

}

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

.koimiFinalCtaSection::after{

    content:"";

    position:absolute;

    width:700px;

    height:700px;

    border-radius:50%;

    background:radial-gradient(circle,
    rgba(255,255,255,.14) 0%,
    rgba(255,255,255,.06) 45%,
    transparent 80%);

    right:-300px;

    bottom:-300px;

    animation:koimiGlowRight 10s ease-in-out infinite;

}

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

.koimiFinalCtaContainer{

    width:90%;

    max-width:900px;

    margin:auto;

    text-align:center;

    position:relative;

    z-index:5;

}

.koimiFinalCtaContainer::before{

    content:"";

    position:absolute;

    inset:-120px;

    background-image:

    linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),

    linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);

    background-size:55px 55px;

    opacity:.35;

    z-index:-1;

}

/*=============================
TAG
==============================*/

.koimiFinalCtaContainer span{

    display:inline-block;

    padding:12px 24px;

    border-radius:50px;

    background:rgba(255,255,255,.12);

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

    color:#fff;

    font-size:14px;

    font-weight:700;

    letter-spacing:2px;

    margin-bottom:25px;

    backdrop-filter:blur(10px);

}

/*=============================
HEADING
==============================*/

.koimiFinalCtaContainer h2{

    font-size:62px;

    font-weight:800;

    color:#fff;

    line-height:1.15;

    margin-bottom:25px;

    letter-spacing:-1px;

}

.koimiFinalCtaContainer h2 span{

    color:#d8fcff;

}

/*=============================
PARAGRAPH
==============================*/

.koimiFinalCtaContainer p{

    max-width:700px;

    margin:auto;

    color:rgba(255,255,255,.92);

    font-size:18px;

    line-height:1.9;

    margin-bottom:45px;

}

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

.koimiFinalCtaButtons{

    display:flex;

    justify-content:center;

}

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

.koimiPrimaryBtn{

    position:relative;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    padding:18px 42px;

    background:#fff;

    color:#03093e;

    text-decoration:none;

    border-radius:12px;

    font-size:17px;

    font-weight:700;

    overflow:hidden;

    transition:.4s;

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

}

.koimiPrimaryBtn::before{

    content:"";

    position:absolute;

    left:-100%;

    top:0;

    width:100%;

    height:100%;

    background:rgba(18,179,199,.15);

    transition:.45s;

}

.koimiPrimaryBtn::after{

    content:"→";

    transition:.35s;

    font-size:20px;

}

.koimiPrimaryBtn:hover::before{

    left:0;

}

.koimiPrimaryBtn:hover{

    transform:translateY(-8px);

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

}

.koimiPrimaryBtn:hover::after{

    transform:translateX(8px);

}

/*=============================
ANIMATION
==============================*/

@keyframes koimiGlowLeft{

    0%{

        transform:translate(0,0) scale(1);

    }

    50%{

        transform:translate(35px,25px) scale(1.1);

    }

    100%{

        transform:translate(0,0) scale(1);

    }

}

@keyframes koimiGlowRight{

    0%{

        transform:translate(0,0) scale(1);

    }

    50%{

        transform:translate(-30px,-20px) scale(1.12);

    }

    100%{

        transform:translate(0,0) scale(1);

    }

}

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

@media(max-width:992px){

.koimiFinalCtaSection{

height:auto;

padding:100px 0;

}

.koimiFinalCtaContainer h2{

font-size:48px;

}

}

@media(max-width:768px){

.koimiFinalCtaContainer{

width:92%;

}

.koimiFinalCtaContainer h2{

font-size:38px;

}

.koimiFinalCtaContainer p{

font-size:16px;

}

}

@media(max-width:576px){

.koimiFinalCtaSection{

padding:80px 0;

}

.koimiFinalCtaContainer h2{

font-size:32px;

line-height:1.3;

}

.koimiPrimaryBtn{

width:100%;

padding:16px;

}

}
/*=================================================
        KOIMI HERO SECTION - PART 1
==================================================*/

.ki_gfx_hero_section{

    width:100%;
    min-height:0vh;
    overflow:hidden;
    position:relative;
    display:flex;
    align-items:center;

    background:
    radial-gradient(circle at 90% 15%, rgba(18,179,199,.15), transparent 28%),
    radial-gradient(circle at 10% 90%, rgba(18,179,199,.08), transparent 25%),
    linear-gradient(135deg,#020b0d 0%,#041417 45%,#062328 100%);

}

/*==========================
Background Glow
==========================*/

.ki_gfx_hero_section::before{

    content:"";

    position:absolute;

    width:700px;
    height:700px;

    top:-250px;
    right:-220px;

    border-radius:50%;

    background:rgba(18,179,199,.12);

    filter:blur(150px);

}

.ki_gfx_hero_section::after{

    content:"";

    position:absolute;

    width:550px;
    height:550px;

    left:-200px;
    bottom:-220px;

    border-radius:50%;

    background:rgba(18,179,199,.08);

    filter:blur(130px);

}

/*==========================
Container
==========================*/

.ki_gfx_hero_container{

    width:90%;
    max-width:1400px;

    margin:auto;

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

    gap:80px;

    position:relative;
    z-index:2;

}

/*==========================
Left Side
==========================*/

.ki_gfx_hero_left{

    width:48%;

}

.ki_gfx_badge{

    display:inline-flex;
    align-items:center;

    padding:10px 22px;

    border-radius:50px;

    background:rgba(255,255,255,.05);

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

    color:#16c6d8;

    font-size:14px;
    font-weight:200px;

    letter-spacing:1px;

    text-transform:uppercase;

    margin-bottom:28px;

}

.ki_gfx_heading{

    color:#ffffff;

    font-size:50px;

    line-height:1.08;

    font-weight:600;

    margin-bottom:28px;

}

.ki_gfx_heading span{

    color:#15bfd2;

}

.ki_gfx_description{

    color:#c8d2d4;

    font-size:18px;

    line-height:34px;

    max-width:600px;

    margin-bottom:45px;

}

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

.ki_gfx_btn{

    display:inline-flex;
    align-items:center;
    justify-content:center;

    height:60px;

    padding:0 34px;

    background:#12b3c7;

    color:#fff;

    text-decoration:none;

    font-size:16px;

    font-weight:600;

    border-radius:12px;

    transition:.35s ease;

    box-shadow:0 15px 35px rgba(18,179,199,.30);

}

.ki_gfx_btn:hover{

    background:#18c8dc;

    transform:translateY(-4px);

    box-shadow:0 22px 45px rgba(18,179,199,.40);

}

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

.ki_gfx_hero_right{

    width:52%;

    display:flex;

    align-items:center;

    justify-content:flex-end;

    position:relative;

}

.ki_gfx_hero_img{

    width:100%;

    max-width:700px;

    object-fit:contain;

    filter:drop-shadow(0 35px 70px rgba(0,0,0,.45));

    animation:ki_gfxFloat 5s ease-in-out infinite;

}

/*=========================================
        FLOAT ANIMATION
=========================================*/

@keyframes ki_gfxFloat{

    0%{

        transform:translateY(0px);

    }

    50%{

        transform:translateY(-15px);

    }

    100%{

        transform:translateY(0px);

    }

}

/*=========================================
        IMAGE GLOW
=========================================*/

.ki_gfx_hero_right::before{

    content:"";

    position:absolute;

    width:520px;

    height:520px;

    right:40px;

    top:50%;

    transform:translateY(-50%);

    background:radial-gradient(circle, rgba(18,179,199,.22), transparent 70%);

    filter:blur(60px);

    z-index:-1;

}

/*=========================================
        RESPONSIVE - 1200px
=========================================*/

@media (max-width:1200px){

    .ki_gfx_hero_container{
        gap:50px;
    }

    .ki_gfx_heading{
        font-size:58px;
    }

    .ki_gfx_description{
        font-size:17px;
    }

    .ki_gfx_hero_img{
        max-width:600px;
    }

}


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

@media (max-width:991px){

    .ki_gfx_hero_section{

        min-height:auto;
        padding:100px 0;

    }

    .ki_gfx_hero_container{

        flex-direction:column-reverse;

        text-align:center;

        gap:60px;

    }

    .ki_gfx_hero_left{

        width:100%;

        max-width:700px;

    }

    .ki_gfx_hero_right{

        width:100%;

        justify-content:center;

    }

    .ki_gfx_heading{

        font-size:50px;

    }

    .ki_gfx_description{

        max-width:100%;

        margin:auto;
        margin-bottom:40px;

    }

}


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

@media (max-width:768px){

    .ki_gfx_hero_section{

        padding:80px 0;

    }

    .ki_gfx_heading{

        font-size:40px;

        line-height:1.15;

    }

    .ki_gfx_description{

        font-size:16px;

        line-height:30px;

    }

    .ki_gfx_btn{

        width:100%;

        max-width:320px;

        height:56px;

    }

    .ki_gfx_hero_img{

        max-width:420px;

    }

}


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

@media (max-width:576px){

    .ki_gfx_hero_container{

        width:92%;

    }

    .ki_gfx_badge{

        font-size:12px;

        padding:8px 18px;

    }

    .ki_gfx_heading{

        font-size:32px;

    }

    .ki_gfx_description{

        font-size:15px;

        line-height:28px;

    }

    .ki_gfx_hero_img{

        max-width:300px;

    }

}


/*=========================================
        SMOOTH TRANSITIONS
=========================================*/

.ki_gfx_btn,
.ki_gfx_hero_img{

    transition:.35s ease;

}


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

.ki_gfx_hero_img:hover{

    transform:translateY(-8px) scale(1.02);

}

/*=====================================
        ABOUT SECTION
======================================*/

.ki_gfx_about_section{

    width:100%;
    padding:110px 0;
    background:#f8fbfc;

}

.ki_gfx_about_container{

    width:90%;
    max-width:1200px;
    margin:auto;
    text-align:center;

}

.ki_gfx_about_tag{

    color:#12b3c7;
    font-size:14px;
    font-weight:700;
    letter-spacing:1px;
    text-transform:uppercase;
    display:block;
    margin-bottom:18px;

}

.ki_gfx_about_heading{

    color:#08252b;
    font-size:50px;
    font-weight:800;
    line-height:1.2;
    margin-bottom:25px;

}

.ki_gfx_about_text{

    max-width:820px;
    margin:0 auto 60px;

    color:#5d6b6f;
    font-size:18px;
    line-height:34px;

}

.ki_gfx_about_features{

    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;

}

.ki_gfx_about_card{

    background:#ffffff;
    padding:40px 30px;
    border-radius:18px;

    box-shadow:0 15px 40px rgba(0,0,0,.06);

    transition:.35s;

}

.ki_gfx_about_card:hover{

    transform:translateY(-8px);

    box-shadow:0 25px 50px rgba(18,179,199,.15);

}

.ki_gfx_about_card i{

    font-size:42px;
    color:#12b3c7;
    margin-bottom:20px;

}

.ki_gfx_about_card h4{

    font-size:24px;
    color:#08252b;
    margin-bottom:15px;

}

.ki_gfx_about_card p{

    color:#66757a;
    line-height:28px;

}

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

@media(max-width:991px){

    .ki_gfx_about_features{

        grid-template-columns:1fr;

    }

    .ki_gfx_about_heading{

        font-size:40px;

    }

}

@media(max-width:576px){

    .ki_gfx_about_section{

        padding:80px 0;

    }

    .ki_gfx_about_heading{

        font-size:30px;

    }

    .ki_gfx_about_text{

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

    }

}

/*=========================================
        KOIMI ABOUT SECTION
=========================================*/

.ki_gfx_about_section{

    width:100%;
    height:850px;

    background:#f8fbfc;

    display:flex;
    align-items:center;

    position:relative;
    overflow:hidden;

}

/* Decorative Background */

.ki_gfx_about_section::before{

    content:"";

    position:absolute;

    width:500px;
    height:500px;

    top:-180px;
    right:-180px;

    background:rgba(18,179,199,.08);

    border-radius:50%;

    filter:blur(120px);

}

.ki_gfx_about_section::after{

    content:"";

    position:absolute;

    width:420px;
    height:420px;

    bottom:-180px;
    left:-150px;

    background:rgba(18,179,199,.05);

    border-radius:50%;

    filter:blur(110px);

}

.ki_gfx_about_container{

    width:90%;
    max-width:1250px;

    margin:auto;

    text-align:center;

    position:relative;
    z-index:2;

}

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

.ki_gfx_about_tag{

    display:inline-block;

    color:#12b3c7;

    font-size:15px;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

    margin-bottom:20px;

}

.ki_gfx_about_heading{

    color:#071d22;

    font-size:54px;

    line-height:1.2;

    font-weight:800;

    margin-bottom:28px;

}

.ki_gfx_about_heading span{

    color:#12b3c7;

}

.ki_gfx_about_text{

    max-width:820px;

    margin:0 auto 70px;

    color:#66757a;

    font-size:18px;

    line-height:34px;

}

/*=========================================
        Cards
=========================================*/

.ki_gfx_about_features{

    display:grid;

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

    gap:22px;

}

.ki_gfx_about_card{

    background:#ffffff;

    padding:30px 24px;

    min-height:220px;

    border-radius:16px;

    transition:.35s;

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

    border:1px solid #edf3f5;

}

.ki_gfx_about_card:hover{

    transform:translateY(-8px);

    box-shadow:0 18px 35px rgba(18,179,199,.15);

    border-color:#12b3c7;

}

.ki_gfx_about_card i{

    width:60px;
    height:60px;

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

    margin:0 auto 18px;

    border-radius:50%;

    background:#12b3c715;

    color:#12b3c7;

    font-size:26px;

}

.ki_gfx_about_card h4{

    color:#071d22;

    font-size:20px;

    font-weight:700;

    margin-bottom:12px;

}

.ki_gfx_about_card p{

    color:#66757a;

    font-size:15px;

    line-height:26px;

}

/*=========================================
        SERVICES SECTION
=========================================*/

.ki_gfx_service_section{

    width:100%;
    padding:90px 0;

    background:#07191d;

}

.ki_gfx_service_container{

    width:90%;
    max-width:1250px;
    margin:auto;

    text-align:center;

}

.ki_gfx_service_heading{

    color:#fff;

    font-size:46px;

    font-weight:800;

    margin-bottom:18px;

    line-height:1.2;

}

.ki_gfx_service_text{

    max-width:700px;

    margin:0 auto 50px;

    color:#b7c4c7;

    font-size:17px;

    line-height:30px;

}

/*=========================
Grid
=========================*/

.ki_gfx_service_grid{

    display:grid;

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

    gap:22px;

}

/*=========================
Cards
=========================*/

.ki_gfx_service_card{

    background:#0b2429;

    padding:30px 22px;

    min-height:220px;

    border-radius:16px;

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

    transition:.35s;

}

.ki_gfx_service_card:hover{

    transform:translateY(-8px);

    border-color:#12b3c7;

    box-shadow:0 15px 35px rgba(18,179,199,.15);

}

/*=========================
Icon
=========================*/

.ki_gfx_service_card i{

    width:60px;
    height:60px;

    margin:0 auto 18px;

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

    border-radius:50%;

    background:#12b3c720;

    color:#12b3c7;

    font-size:24px;

}

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

.ki_gfx_service_card h3{

    color:#fff;

    font-size:20px;

    margin-bottom:12px;

}

/*=========================
Paragraph
=========================*/

.ki_gfx_service_card p{

    color:#b7c4c7;

    font-size:15px;

    line-height:26px;

}
/*=========================================
        WHY CHOOSE KOIMI
=========================================*/

.ki_gfx_choose_section{

    width:100%;
    height:720px;

    background:#f8fbfc;

    display:flex;
    align-items:center;

    position:relative;
    overflow:hidden;

}

/*=========================
Background Glow
=========================*/

.ki_gfx_choose_section::before{

    content:"";

    position:absolute;

    width:420px;
    height:420px;

    top:-180px;
    left:-180px;

    background:rgba(18,179,199,.08);

    border-radius:50%;

    filter:blur(110px);

}

.ki_gfx_choose_section::after{

    content:"";

    position:absolute;

    width:380px;
    height:380px;

    bottom:-170px;
    right:-170px;

    background:rgba(18,179,199,.06);

    border-radius:50%;

    filter:blur(100px);

}

/*=========================
Container
=========================*/

.ki_gfx_choose_container{

    width:90%;
    max-width:1280px;

    margin:auto;

    text-align:center;

    position:relative;

    z-index:2;

}

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

.ki_gfx_choose_tag{

    display:inline-block;

    color:#12b3c7;

    font-size:14px;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:2px;

    margin-bottom:15px;

}

.ki_gfx_choose_heading{

    color:#071d22;

    font-size:46px;

    font-weight:800;

    line-height:1.2;

    margin-bottom:18px;

}

.ki_gfx_choose_text{

    max-width:700px;

    margin:0 auto 45px;

    color:#6b767b;

    font-size:17px;

    line-height:30px;

}

/*=========================
Grid
=========================*/

.ki_gfx_choose_grid{

    display:grid;

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

    gap:22px;

}

/*=========================
Cards
=========================*/

.ki_gfx_choose_card{

    background:#ffffff;

    padding:30px 25px;

    min-height:230px;

    border-radius:18px;

    border:1px solid #edf2f4;

    transition:.35s;

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

}

.ki_gfx_choose_card:hover{

    transform:translateY(-8px);

    border-color:#12b3c7;

    box-shadow:0 18px 35px rgba(18,179,199,.16);

}

/*=========================
Icon
=========================*/

.ki_gfx_choose_icon{

    width:65px;
    height:65px;

    margin:0 auto 18px;

    border-radius:50%;

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

    background:rgba(18,179,199,.12);

    color:#12b3c7;

    font-size:28px;

    transition:.35s;

}

.ki_gfx_choose_card:hover .ki_gfx_choose_icon{

    background:#12b3c7;

    color:#fff;

}

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

.ki_gfx_choose_card h3{

    color:#071d22;

    font-size:21px;

    font-weight:700;

    margin-bottom:12px;

}

/*=========================
Card Text
=========================*/

.ki_gfx_choose_card p{

    color:#66757a;

    font-size:15px;

    line-height:26px;

}

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

@media(max-width:991px){

    .ki_gfx_choose_section{

        height:auto;

        padding:90px 0;

    }

    .ki_gfx_choose_grid{

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

    }

    .ki_gfx_choose_heading{

        font-size:38px;

    }

}

@media(max-width:768px){

    .ki_gfx_choose_section{

        padding:80px 0;

    }

    .ki_gfx_choose_grid{

        grid-template-columns:1fr;

    }

    .ki_gfx_choose_heading{

        font-size:32px;

    }

    .ki_gfx_choose_text{

        font-size:16px;

        line-height:28px;

    }

    .ki_gfx_choose_card{

        min-height:auto;

        padding:30px 22px;

    }

}

@media(max-width:576px){

    .ki_gfx_choose_container{

        width:92%;

    }

    .ki_gfx_choose_heading{

        font-size:28px;

    }

    .ki_gfx_choose_text{

        font-size:15px;

        line-height:26px;

        margin-bottom:35px;

    }

    .ki_gfx_choose_tag{

        font-size:13px;

    }

}


/*=========================================
            CTA SECTION
=========================================*/

.ki_gfx_cta_section{

    width:100%;
    height:600px;

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

    position:relative;
    overflow:hidden;

    background:
    radial-gradient(circle at 20% 20%, rgba(18,179,199,.18), transparent 30%),
    radial-gradient(circle at 85% 80%, rgba(18,179,199,.15), transparent 30%),
    linear-gradient(135deg,#021114 0%,#052329 45%,#12b3c7 100%);

}

/* Decorative Glow */

.ki_gfx_cta_section::before{

    content:"";

    position:absolute;

    width:550px;
    height:550px;

    left:-180px;
    top:-180px;

    border-radius:50%;

    background:rgba(255,255,255,.05);

    filter:blur(120px);

}

.ki_gfx_cta_section::after{

    content:"";

    position:absolute;

    width:500px;
    height:500px;

    right:-180px;
    bottom:-180px;

    border-radius:50%;

    background:rgba(18,179,199,.18);

    filter:blur(140px);

}

.ki_gfx_cta_container{

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

    margin:auto;

    text-align:center;

    position:relative;
    z-index:2;

}

.ki_gfx_cta_tag{

    display:inline-block;

    color:#12b3c7;

    background:rgba(255,255,255,.08);

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

    padding:10px 24px;

    border-radius:40px;

    font-size:14px;

    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;

    margin-bottom:25px;

}

.ki_gfx_cta_heading{

    color:#ffffff;

    font-size:56px;

    font-weight:800;

    line-height:1.2;

    margin-bottom:25px;

}

.ki_gfx_cta_text{

    color:#d8e4e6;

    font-size:18px;

    line-height:34px;

    max-width:760px;

    margin:0 auto 45px;

}

.ki_gfx_cta_btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:18px 40px;

    background:#12b3c7;

    color:#ffffff;

    text-decoration:none;

    font-size:17px;

    font-weight:600;

    border-radius:12px;

    transition:.35s;

    box-shadow:0 18px 45px rgba(18,179,199,.30);

}

.ki_gfx_cta_btn:hover{

    transform:translateY(-5px);

    background:#0da8bb;

    box-shadow:0 25px 55px rgba(18,179,199,.40);

}

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

@media(max-width:991px){

    .ki_gfx_cta_section{

        height:auto;

        padding:100px 0;

    }

    .ki_gfx_cta_heading{

        font-size:44px;

    }

}

@media(max-width:768px){

    .ki_gfx_cta_heading{

        font-size:34px;

    }

    .ki_gfx_cta_text{

        font-size:16px;

        line-height:30px;

    }

    .ki_gfx_cta_btn{

        width:100%;

        max-width:320px;

    }

}

@media(max-width:576px){

    .ki_gfx_cta_heading{

        font-size:28px;

    }

    .ki_gfx_cta_text{

        font-size:15px;

        line-height:28px;

    }

}
/*=========================================
        BRAND IDENTITY HERO
=========================================*/

.ki_bi_hero_section{

    width:100%;
    height:100vh;

    position:relative;

    overflow:hidden;

    display:flex;

    align-items:center;

    background:
    radial-gradient(circle at 82% 20%, rgba(18,179,199,.28), transparent 35%),
    radial-gradient(circle at 15% 15%, rgba(18,179,199,.08), transparent 30%),
    linear-gradient(135deg,#021114 0%,#06232a 55%,#0d4752 100%);

}

/*=========================
Background Glow
=========================*/

.ki_bi_hero_section::before{

    content:"";

    position:absolute;

    width:550px;
    height:550px;

    top:-220px;
    left:-220px;

    border-radius:50%;

    background:rgba(18,179,199,.12);

    filter:blur(120px);

}

.ki_bi_hero_section::after{

    content:"";

    position:absolute;

    width:650px;
    height:650px;

    right:-200px;
    top:-150px;

    border-radius:50%;

    background:rgba(18,179,199,.20);

    filter:blur(150px);

}

/*=========================
Container
=========================*/

.ki_bi_hero_container{

    width:90%;

    max-width:1400px;

    margin:auto;

    display:grid;

    grid-template-columns:46% 54%;

    align-items:center;

    gap:40px;

    position:relative;

    z-index:2;
    

}

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

.ki_bi_hero_content{

    max-width:620px;

}

/*=========================
Right Image
=========================*/

.ki_bi_hero_image{

    width:100%;

    display:flex;

    justify-content:flex-end;

    align-items:center;

    position:relative;

}
/*=========================================
        HERO CONTENT
=========================================*/

.ki_bi_hero_tag{

    display:inline-flex;

    align-items:center;

    padding:10px 22px;

    background:rgba(255,255,255,.06);

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

    border-radius:50px;

    color:#12b3c7;

    font-size:14px;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

    margin-bottom:24px;

}

.ki_bi_hero_heading{

    color:#ffffff;

    font-size:68px;

    font-weight:800;

    line-height:1.08;

    margin-bottom:28px;

    letter-spacing:-2px;

}

.ki_bi_hero_heading span{

    color:#12b3c7;

}

.ki_bi_hero_text{

    max-width:560px;

    color:#c7d5d9;

    font-size:18px;

    line-height:34px;

    margin-bottom:42px;

}



/*=========================================
        HERO IMAGE
=========================================*/

.ki_bi_hero_image::before{

    content:"";

    position:absolute;

    width:620px;

    height:620px;

    right:20px;

    top:50%;

    transform:translateY(-50%);

    border-radius:50%;

    background:radial-gradient(circle, rgba(18,179,199,.22), transparent 72%);

    filter:blur(70px);

    z-index:-1;

}

.ki_bi_hero_image img{

    width:100%;

    max-width:760px;

    height:auto;

    display:block;

    object-fit:contain;

    margin-left:auto;

    filter:drop-shadow(0 35px 70px rgba(0,0,0,.45));

    animation:ki_bi_float 5s ease-in-out infinite;

}

@keyframes ki_bi_float{

    0%{

        transform:translateY(0px);

    }

    50%{

        transform:translateY(-14px);

    }

    100%{

        transform:translateY(0px);

    }

}
/*=========================================
        LARGE DESKTOP
=========================================*/

@media (max-width:1400px){

    .ki_bi_hero_heading{

        font-size:60px;

    }

    .ki_bi_hero_image img{

        max-width:680px;

    }

}


/*=========================================
        LAPTOP
=========================================*/

@media (max-width:1200px){

    .ki_bi_hero_section{

        min-height:900px;

    }

    .ki_bi_hero_container{

        grid-template-columns:48% 52%;

        gap:30px;

    }

    .ki_bi_hero_heading{

        font-size:54px;

    }

    .ki_bi_hero_text{

        font-size:17px;

        line-height:32px;

    }

    .ki_bi_hero_image img{

        max-width:600px;

    }

}


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

@media (max-width:991px){

    .ki_bi_hero_section{

        height:auto;

        padding:110px 0 80px;

    }

    .ki_bi_hero_container{

        grid-template-columns:1fr;

        text-align:center;

        gap:50px;

    }

    .ki_bi_hero_content{

        max-width:720px;

        margin:auto;

    }

    .ki_bi_hero_text{

        max-width:100%;

        margin:0 auto 35px;

    }

    .ki_bi_hero_image{

        justify-content:center;

    }

    .ki_bi_hero_image img{

        max-width:520px;

        margin:auto;

    }

    .ki_bi_hero_image::before{

        width:450px;

        height:450px;

        left:50%;

        right:auto;

        transform:translate(-50%,-50%);

    }

}


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

@media (max-width:768px){

    .ki_bi_hero_section{

        padding:90px 0 70px;

    }

    .ki_bi_hero_heading{

        font-size:40px;

        line-height:1.15;

    }

    .ki_bi_hero_text{

        font-size:16px;

        line-height:30px;

    }

    .ki_bi_hero_btn{

        width:100%;

        max-width:280px;

    }

    .ki_bi_hero_image img{

        max-width:400px;

    }

}


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

@media (max-width:576px){

    .ki_bi_hero_container{

        width:92%;

    }

    .ki_bi_hero_tag{

        font-size:12px;

        padding:8px 18px;

    }

    .ki_bi_hero_heading{

        font-size:32px;

    }

    .ki_bi_hero_text{

        font-size:15px;

        line-height:28px;

    }

    .ki_bi_hero_image img{

        max-width:300px;

    }

}


/*=========================================
        EXTRA POLISH
=========================================*/

.ki_bi_hero_content,
.ki_bi_hero_image{

    position:relative;

    z-index:2;

}

.ki_bi_hero_btn,
.ki_bi_hero_image img{

    transition:.35s ease;

}

.ki_bi_hero_image img:hover{

    transform:translateY(-10px) scale(1.02);

}

/*=========================================
        ABOUT BRAND IDENTITY
=========================================*/

.ki_bi_about_section{

    width:100%;
    min-height:700px;

    display:flex;
    align-items:center;

    background:#f8fbfc;

    position:relative;

    overflow:hidden;

}

/*=========================
Background Glow
=========================*/

.ki_bi_about_section::before{

    content:"";

    position:absolute;

    width:420px;
    height:420px;

    top:-180px;
    left:-180px;

    border-radius:50%;

    background:rgba(18,179,199,.08);

    filter:blur(110px);

}

.ki_bi_about_section::after{

    content:"";

    position:absolute;

    width:380px;
    height:380px;

    bottom:-180px;
    right:-180px;

    border-radius:50%;

    background:rgba(18,179,199,.06);

    filter:blur(110px);

}

/*=========================
Container
=========================*/

.ki_bi_about_container{

    width:90%;
    max-width:1280px;

    margin:auto;

    text-align:center;

    position:relative;

    z-index:2;

}

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

.ki_bi_about_tag{

    display:inline-block;

    color:#12b3c7;

    font-size:14px;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

    margin-bottom:18px;

}

.ki_bi_about_heading{

    color:#071d22;

    font-size:48px;

    font-weight:800;

    line-height:1.2;

    margin-bottom:20px;

}

.ki_bi_about_text{

    max-width:720px;

    margin:0 auto 55px;

    color:#66757a;

    font-size:17px;

    line-height:30px;

}

/*=========================
Grid
=========================*/

.ki_bi_about_grid{

    display:grid;

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

    gap:24px;

}

/*=========================
Cards
=========================*/

.ki_bi_about_card{

    background:#ffffff;

    padding:32px 24px;

    min-height:220px;

    border-radius:18px;

    border:1px solid #edf2f4;

    box-shadow:0 10px 30px rgba(0,0,0,.05);

    transition:.35s;

}

.ki_bi_about_card:hover{

    transform:translateY(-8px);

    border-color:#12b3c7;

    box-shadow:0 20px 40px rgba(18,179,199,.15);

}

/*=========================
Icon
=========================*/

.ki_bi_about_card i{

    width:65px;
    height:65px;

    margin:0 auto 20px;

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

    border-radius:50%;

    background:rgba(18,179,199,.12);

    color:#12b3c7;

    font-size:28px;

    transition:.35s;

}

.ki_bi_about_card:hover i{

    background:#12b3c7;

    color:#ffffff;

}

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

.ki_bi_about_card h3{

    color:#071d22;

    font-size:22px;

    font-weight:700;

    margin-bottom:12px;

}

/*=========================
Card Text
=========================*/

.ki_bi_about_card p{

    color:#66757a;

    font-size:15px;

    line-height:26px;

}

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

@media(max-width:991px){

    .ki_bi_about_section{

        min-height:auto;

        padding:90px 0;

    }

    .ki_bi_about_grid{

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

    }

    .ki_bi_about_heading{

        font-size:40px;

    }

}

@media(max-width:768px){

    .ki_bi_about_grid{

        grid-template-columns:1fr;

    }

    .ki_bi_about_heading{

        font-size:34px;

    }

    .ki_bi_about_text{

        font-size:16px;

        line-height:28px;

    }

    .ki_bi_about_card{

        min-height:auto;

    }

}

@media(max-width:576px){

    .ki_bi_about_section{

        padding:70px 0;

    }

    .ki_bi_about_container{

        width:92%;

    }

    .ki_bi_about_heading{

        font-size:28px;

    }

    .ki_bi_about_text{

        font-size:15px;

        line-height:26px;

        margin-bottom:35px;

    }

}

/*=========================================
        BRAND IDENTITY SERVICES
=========================================*/

.ki_bi_service_section{

    width:100%;
    padding:90px 0;

    background:#07191d;

    position:relative;

    overflow:hidden;

}

/*=========================
Background Glow
=========================*/

.ki_bi_service_section::before{

    content:"";

    position:absolute;

    width:450px;
    height:450px;

    top:-180px;
    left:-180px;

    border-radius:50%;

    background:rgba(18,179,199,.08);

    filter:blur(120px);

}

.ki_bi_service_section::after{

    content:"";

    position:absolute;

    width:420px;
    height:420px;

    right:-180px;
    bottom:-180px;

    border-radius:50%;

    background:rgba(18,179,199,.12);

    filter:blur(120px);

}

/*=========================
Container
=========================*/

.ki_bi_service_container{

    width:90%;
    max-width:1280px;

    margin:auto;

    text-align:center;

    position:relative;

    z-index:2;

}

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

.ki_bi_service_tag{

    display:inline-block;

    color:#12b3c7;

    font-size:14px;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

    margin-bottom:18px;

}

.ki_bi_service_heading{

    color:#ffffff;

    font-size:48px;

    font-weight:800;

    line-height:1.2;

    margin-bottom:20px;

}

.ki_bi_service_text{

    max-width:720px;

    margin:0 auto 55px;

    color:#b8c7ca;

    font-size:17px;

    line-height:30px;

}

/*=========================
Grid
=========================*/

.ki_bi_service_grid{

    display:grid;

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

    gap:22px;

}

/*=========================
Cards
=========================*/

.ki_bi_service_card{

    background:#0b252b;

    padding:30px 24px;

    min-height:220px;

    border-radius:18px;

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

    transition:.35s;

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

}

.ki_bi_service_card:hover{

    transform:translateY(-8px);

    border-color:#12b3c7;

    box-shadow:0 20px 40px rgba(18,179,199,.16);

}

/*=========================
Icon
=========================*/

.ki_bi_service_card i{

    width:65px;
    height:65px;

    margin:0 auto 20px;

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

    border-radius:50%;

    background:rgba(18,179,199,.15);

    color:#12b3c7;

    font-size:28px;

    transition:.35s;

}

.ki_bi_service_card:hover i{

    background:#12b3c7;

    color:#ffffff;

}

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

.ki_bi_service_card h3{

    color:#ffffff;

    font-size:21px;

    font-weight:700;

    margin-bottom:12px;

}

/*=========================
Card Text
=========================*/

.ki_bi_service_card p{

    color:#b8c7ca;

    font-size:15px;

    line-height:26px;

}

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

@media(max-width:991px){

    .ki_bi_service_section{

        padding:80px 0;

    }

    .ki_bi_service_heading{

        font-size:40px;

    }

    .ki_bi_service_grid{

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

    }

}

@media(max-width:768px){

    .ki_bi_service_heading{

        font-size:34px;

    }

    .ki_bi_service_text{

        font-size:16px;

        line-height:28px;

        margin-bottom:40px;

    }

    .ki_bi_service_grid{

        grid-template-columns:1fr;

    }

    .ki_bi_service_card{

        min-height:auto;

        padding:28px 22px;

    }

}

@media(max-width:576px){

    .ki_bi_service_section{

        padding:70px 0;

    }

    .ki_bi_service_container{

        width:92%;

    }

    .ki_bi_service_heading{

        font-size:28px;

    }

    .ki_bi_service_text{

        font-size:15px;

        line-height:26px;

    }

}

/*=========================================
        BRAND IDENTITY PROCESS
=========================================*/

.ki_bi_process_section{

    width:100%;

    padding:90px 0;

    background:#f8fbfc;

    position:relative;

    overflow:hidden;

}

/*=========================
Background Glow
=========================*/

.ki_bi_process_section::before{

    content:"";

    position:absolute;

    width:380px;
    height:380px;

    top:-180px;
    left:-180px;

    border-radius:50%;

    background:rgba(18,179,199,.08);

    filter:blur(120px);

}

.ki_bi_process_section::after{

    content:"";

    position:absolute;

    width:380px;
    height:380px;

    right:-180px;
    bottom:-180px;

    border-radius:50%;

    background:rgba(18,179,199,.08);

    filter:blur(120px);

}

/*=========================
Container
=========================*/

.ki_bi_process_container{

    width:90%;

    max-width:1300px;

    margin:auto;

    position:relative;

    z-index:2;

    text-align:center;

}

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

.ki_bi_process_tag{

    display:inline-block;

    color:#12b3c7;

    font-size:14px;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

    margin-bottom:18px;

}

.ki_bi_process_heading{

    color:#071d22;

    font-size:48px;

    font-weight:800;

    line-height:1.2;

    margin-bottom:20px;

}

.ki_bi_process_text{

    max-width:760px;

    margin:0 auto 60px;

    color:#66757a;

    font-size:17px;

    line-height:30px;

}

/*=========================
Grid
=========================*/

.ki_bi_process_grid{

    display:grid;

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

    gap:20px;

}

/*=========================
Card
=========================*/

.ki_bi_process_card{

    background:#ffffff;

    padding:35px 22px;

    border-radius:18px;

    border:1px solid #e9eef0;

    box-shadow:0 10px 30px rgba(0,0,0,.05);

    transition:.35s;

}

.ki_bi_process_card:hover{

    transform:translateY(-8px);

    border-color:#12b3c7;

    box-shadow:0 20px 45px rgba(18,179,199,.16);

}

/*=========================
Number
=========================*/

.ki_bi_process_number{

    width:70px;

    height:70px;

    margin:0 auto 22px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#12b3c7;

    color:#ffffff;

    font-size:24px;

    font-weight:700;

    transition:.35s;

}

.ki_bi_process_card:hover .ki_bi_process_number{

    transform:rotate(360deg);

}

/*=========================
Title
=========================*/

.ki_bi_process_card h3{

    color:#071d22;

    font-size:22px;

    font-weight:700;

    margin-bottom:12px;

}

/*=========================
Text
=========================*/

.ki_bi_process_card p{

    color:#66757a;

    font-size:15px;

    line-height:26px;

}

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

@media(max-width:1200px){

    .ki_bi_process_grid{

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

    }

}

@media(max-width:991px){

    .ki_bi_process_heading{

        font-size:40px;

    }

    .ki_bi_process_grid{

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

    }

}

@media(max-width:768px){

    .ki_bi_process_section{

        padding:80px 0;

    }

    .ki_bi_process_heading{

        font-size:34px;

    }

    .ki_bi_process_text{

        font-size:16px;

        line-height:28px;

        margin-bottom:40px;

    }

    .ki_bi_process_grid{

        grid-template-columns:1fr;

    }

}

@media(max-width:576px){

    .ki_bi_process_container{

        width:92%;

    }

    .ki_bi_process_heading{

        font-size:28px;

    }

    .ki_bi_process_text{

        font-size:15px;

        line-height:26px;

    }

    .ki_bi_process_card{

        padding:30px 20px;

    }

}

/*=========================================
        BRAND IDENTITY CTA
=========================================*/

.ki_bi_cta_section{

    width:100%;

    padding:100px 0;

    position:relative;

    overflow:hidden;

    background:
    radial-gradient(circle at 20% 20%, rgba(18,179,199,.12), transparent 35%),
    radial-gradient(circle at 80% 80%, rgba(18,179,199,.12), transparent 35%),
    linear-gradient(135deg,#021114 0%,#062028 55%,#0d4752 100%);

}

.ki_bi_cta_container{

    width:90%;

    max-width:900px;

    margin:auto;

    text-align:center;

    position:relative;

    z-index:2;

}

.ki_bi_cta_tag{

    display:inline-block;

    padding:10px 22px;

    border-radius:50px;

    background:rgba(255,255,255,.08);

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

    color:#12b3c7;

    font-size:14px;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

    margin-bottom:22px;

}

.ki_bi_cta_heading{

    color:#ffffff;

    font-size:52px;

    font-weight:800;

    line-height:1.2;

    margin-bottom:22px;

}

.ki_bi_cta_text{

    max-width:720px;

    margin:0 auto 40px;

    color:#c7d4d8;

    font-size:17px;

    line-height:32px;

}

.ki_bi_cta_btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:18px 42px;

    background:#12b3c7;

    color:#ffffff;

    text-decoration:none;

    font-size:17px;

    font-weight:600;

    border-radius:12px;

    transition:.35s;

    box-shadow:0 18px 45px rgba(18,179,199,.30);

}

.ki_bi_cta_btn:hover{

    background:#0ea8bc;

    transform:translateY(-6px);

    box-shadow:0 28px 60px rgba(18,179,199,.40);

}

@media(max-width:991px){

    .ki_bi_cta_heading{

        font-size:42px;

    }

}

@media(max-width:768px){

    .ki_bi_cta_section{

        padding:80px 0;

    }

    .ki_bi_cta_heading{

        font-size:34px;

    }

    .ki_bi_cta_text{

        font-size:16px;

        line-height:28px;

    }

}

@media(max-width:576px){

    .ki_bi_cta_container{

        width:92%;

    }

    .ki_bi_cta_heading{

        font-size:28px;

    }

    .ki_bi_cta_text{

        font-size:15px;

        line-height:26px;

    }

    .ki_bi_cta_btn{

        width:100%;

    }

}

.koiHero{
  padding: 80px 10px;
  background: #0b0f14;
  color: #fff;
}

.koiHero__container{
  max-width: 1200px;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 60px;
}

/* LEFT = CONTENT */
.koiHero__left{
  flex: 1;
}

/* RIGHT = IMAGE */
.koiHero__right{
  flex: 1;
  display: flex;
  justify-content: center;
}

.koiHero__mainImg{
  width: 100%;
  max-width: 450px;
  object-fit: contain;
}

/* TEXT */
.koiHero__tag{
  color: #12b3c7;
  font-size: 13px;
  margin-bottom: 15px;
}

.koiHero__title{
  font-size: 42px;
  line-height: 1.2;
  margin-bottom: 20px;
}

.koiHero__title span{
  color: #12b3c7;
}

.koiHero__desc{
  color: #cfd6dd;
  margin-bottom: 25px;
  max-width: 500px;
}

/* BUTTON */
.koiHero__btnPrimary{
  display: inline-block;
  padding: 12px 24px;
  background: linear-gradient(135deg, #12b3c7, #041b1e);
  color: #fff;
  text-decoration: none;
  border-radius: 8px;
}

/* FEATURES */
.koiHero__features{
  margin-top: 20px;
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  color: #d9e2ea;
}

/* RESPONSIVE */
@media (max-width: 768px){
  .koiHero__container{
    flex-direction: column;
    text-align: center;
  }

  .koiHero__desc{
    margin: auto;
  }

  .koiHero__features{
    justify-content: center;
  }
}

/*=========================
WHY SECTION
=========================*/

.koiWhy{

    background:#f7f9fc;

    padding:90px 20px;

}

.koiWhy__container{

    max-width:1200px;

    margin:auto;

}

.koiWhy__heading{

    text-align:center;

    margin-bottom:55px;

}

.koiWhy__tag{

    color:#12b3c7;

    font-size:13px;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

}

.koiWhy__heading h2{

    margin-top:12px;

    font-size:46px;

    font-weight:700;

    color:#111827;

}

.koiWhy__grid{

    display:grid;

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

    gap:28px;

}

.koiWhy__card{

    background:#fff;

    border-radius:18px;

    padding:35px;

    display:flex;

    align-items:flex-start;

    gap:22px;

    box-shadow:0 15px 35px rgba(0,0,0,.08);

    transition:.35s;

}

.koiWhy__card:hover{

    transform:translateY(-8px);

    box-shadow:0 25px 45px rgba(18,179,199,.15);

}

.koiWhy__icon{

    width:70px;

    height:70px;

    border-radius:15px;

    background:#eafcff;

    color:#12b3c7;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:32px;

    flex-shrink:0;

}

.koiWhy__content h3{

    font-size:22px;

    margin-bottom:10px;

    color:#111827;

}

.koiWhy__content p{

    color:#6b7280;

    line-height:1.7;

    font-size:15px;

}

@media(max-width:991px){

.koiWhy__grid{

grid-template-columns:1fr;

}

.koiWhy__heading h2{

font-size:34px;

}

}
/*=========================
WEBSITES WE REDESIGN
=========================*/

.koiRedesign{

    background:#06131a;

    padding:90px 20px;

}

.koiRedesign__container{

    max-width:1250px;

    margin:auto;

}

.koiRedesign__heading{

    text-align:center;

    margin-bottom:55px;

}

.koiRedesign__heading span{

    color:#12b3c7;

    font-size:13px;

    font-weight:700;

    letter-spacing:2px;

    text-transform:uppercase;

}

.koiRedesign__heading h2{

    color:#fff;

    font-size:48px;

    margin-top:12px;

    font-weight:700;

}

.koiRedesign__grid{

    display:grid;

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

    gap:20px;

}

.koiRedesign__card{

    background:#0c1a22;

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

    border-radius:18px;

    padding:35px 22px;

    text-align:center;

    transition:.35s;

}

.koiRedesign__card:hover{

    transform:translateY(-8px);

    border-color:#12b3c7;

    box-shadow:0 20px 40px rgba(18,179,199,.18);

}

.koiRedesign__icon{

    width:70px;

    height:70px;

    margin:auto;

    border-radius:50%;

    border:2px solid #12b3c7;

    color:#12b3c7;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:28px;

    margin-bottom:22px;

}

.koiRedesign__card h3{

    color:#fff;

    font-size:20px;

    margin-bottom:12px;

}

.koiRedesign__card p{

    color:#9ca3af;

    line-height:1.6;

    font-size:15px;

}

@media(max-width:1200px){

.koiRedesign__grid{

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

}

}

@media(max-width:768px){

.koiRedesign__grid{

grid-template-columns:1fr;

}

.koiRedesign__heading h2{

font-size:34px;

}

}

/*=========================
PROCESS SECTION
=========================*/

.koiProcess{

    background:#f8fafc;

    padding:90px 20px;

}

.koiProcess__container{

    max-width:1300px;

    margin:auto;

}

.koiProcess__heading{

    text-align:center;

    margin-bottom:70px;

}

.koiProcess__heading span{

    color:#12b3c7;

    font-size:13px;

    letter-spacing:2px;

    font-weight:700;

    text-transform:uppercase;

}

.koiProcess__heading h2{

    margin-top:10px;

    font-size:48px;

    color:#111827;

}

.koiProcess__timeline{

    display:grid;

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

    gap:20px;

    position:relative;

}

.koiProcess__line{

    position:absolute;

    top:25px;

    left:8%;

    width:84%;

    border-top:2px dashed #12b3c7;

}

.koiProcess__item{

    position:relative;

    text-align:center;

    z-index:2;

}

.koiProcess__number{

    width:50px;

    height:50px;

    background:#12b3c7;

    color:#fff;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-weight:700;

    margin:auto auto 30px;

}

.koiProcess__card{

    background:#fff;

    border-radius:18px;

    padding:35px 25px;

    box-shadow:0 15px 35px rgba(0,0,0,.08);

    transition:.35s;

}

.koiProcess__card:hover{

    transform:translateY(-8px);

}

.koiProcess__icon{

    font-size:34px;

    color:#12b3c7;

    margin-bottom:20px;

}

.koiProcess__card h3{

    margin-bottom:12px;

    color:#111827;

}

.koiProcess__card p{

    color:#6b7280;

    line-height:1.7;

}

@media(max-width:1100px){

.koiProcess__timeline{

grid-template-columns:1fr;

}

.koiProcess__line{

display:none;

}

}

.koimi-vs-section{
  padding: 80px 20px;
  background: #06181c;
  color: #fff;
  font-family: sans-serif;
}

.koimi-vs-container{
  max-width: 1100px;
  margin: auto;
}

.koimi-vs-header{
  text-align: center;
  margin-bottom: 50px;
}

.koimi-vs-header h4{
  color: #12b3c7;
  letter-spacing: 2px;
  font-size: 14px;
  margin-bottom: 10px;
}

.koimi-vs-header h2{
  font-size: 32px;
  font-weight: 700;
}

/* GRID */
.koimi-vs-grid{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}

/* BOX */
.koimi-vs-box{
  flex: 1;
  background: #0b2a30;
  padding: 30px;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}

.koimi-vs-tag{
  display: inline-block;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 12px;
  margin-bottom: 20px;
  font-weight: 600;
}

.koimi-before .koimi-vs-tag{
  background: #ff4d4d;
  color: #fff;
}

.koimi-after .koimi-vs-tag{
  background: #12b3c7;
  color: #fff;
}

.koimi-vs-box ul{
  list-style: none;
  padding: 0;
  margin: 0;
}

.koimi-vs-box ul li{
  padding: 10px 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
  font-size: 15px;
}

/* CENTER VS */
.koimi-vs-center{
  font-size: 28px;
  font-weight: bold;
  color: #12b3c7;
  width: 80px;
  text-align: center;
}

/* RESPONSIVE */
@media (max-width: 768px){
  .koimi-vs-grid{
    flex-direction: column;
  }

  .koimi-vs-center{
    transform: rotate(90deg);
  }
}
.koimi-trust-section{
  padding: 80px 20px;
  background: #f7fbfc;
}

.koimi-container{
  max-width: 1200px;
  margin: auto;
}

.koimi-trust-header{
  text-align: center;
  margin-bottom: 50px;
}

.koimi-trust-header .koimi-subtitle{
  color: #12b3c7;
  font-weight: 600;
  letter-spacing: 1px;
  font-size: 14px;
}

.koimi-trust-header h2{
  font-size: 36px;
  font-weight: 700;
  margin-top: 10px;
  color: #0b1f2a;
}

.koimi-trust-grid{
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
}

.koimi-trust-card{
  background: #ffffff;
  padding: 30px;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.06);
  transition: 0.3s ease;
  text-align: left;
}

.koimi-trust-card:hover{
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(0,0,0,0.1);
}

.koimi-icon{
  font-size: 28px;
  margin-bottom: 15px;
}

.koimi-trust-card h3{
  font-size: 18px;
  margin-bottom: 10px;
  color: #0b1f2a;
}

.koimi-trust-card p{
  font-size: 14px;
  color: #5b6b75;
  line-height: 1.6;
}

/* Responsive */
@media(max-width: 900px){
  .koimi-trust-grid{
    grid-template-columns: repeat(2, 1fr);
  }
}

@media(max-width: 600px){
  .koimi-trust-grid{
    grid-template-columns: 1fr;
  }
}
.koimi-cta-section{
  padding: 90px 20px;
  background: linear-gradient(135deg, #12b3c7, #041b1e);
  position: relative;
  overflow: hidden;
}

/* soft glow effect */
.koimi-cta-section::before{
  content: "";
  position: absolute;
  width: 400px;
  height: 400px;
  background: rgba(18,179,199,0.25);
  filter: blur(120px);
  top: -100px;
  left: -100px;
}

.koimi-cta-section::after{
  content: "";
  position: absolute;
  width: 400px;
  height: 400px;
  background: rgba(0,255,200,0.15);
  filter: blur(120px);
  bottom: -120px;
  right: -120px;
}

.koimi-cta-container{
  max-width: 1100px;
  margin: auto;
  text-align: center;
  position: relative;
  z-index: 2;
}

.koimi-cta-content h2{
  font-size: 42px;
  color: #ffffff;
  font-weight: 700;
  margin-bottom: 10px;
}

.koimi-cta-content p{
  font-size: 18px;
  color: rgba(255,255,255,0.85);
  margin-bottom: 30px;
}

.koimi-cta-btn{
  display: inline-block;
  padding: 14px 28px;
  background: #ffffff;
  color: #041b1e;
  font-weight: 600;
  border-radius: 10px;
  text-decoration: none;
  transition: 0.3s ease;
  box-shadow: 0 10px 25px rgba(0,0,0,0.2);
}

.koimi-cta-btn:hover{
  transform: translateY(-3px);
  background: #e8ffff;
}

.koimi-cta-note{
  margin-top: 18px;
  font-size: 14px;
  color: rgba(255,255,255,0.8);
}

/* responsive */
@media(max-width: 768px){
  .koimi-cta-content h2{
    font-size: 28px;
  }
}

/* =========================
   HERO SECTION (FIXED HEIGHT)
========================= */

.koimiRw25-hero{

    position:relative;
    overflow:hidden;

    min-height:85vh;   /* 🔥 reduced from 100vh */
    display:flex;
    align-items:center;

    padding:70px 7%;   

    background:
    radial-gradient(circle at right top,#12b3c730 0%,transparent 35%),
    linear-gradient(135deg,#041B1E 0%,#081E29 50%,#041B1E 100%);
}

/* Glow */

.koimiRw25-hero::before{

    content:"";
    position:absolute;

    width:600px;
    height:600px;

    background:#12b3c7;

    filter:blur(160px);

    opacity:.08;

    right:-220px;
    top:-160px;

    z-index:0;
}

/* =========================
   CONTAINER
========================= */

.koimiRw25-container{

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

    margin:auto;

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

    gap:60px;

    position:relative;
    z-index:2;
    height:80vh;
}

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

.koimiRw25-left{
    flex:1;
}

.koimiRw25-badge{

    display:inline-flex;
    align-items:center;

    padding:10px 20px;

    border-radius:50px;

    background:rgba(18,179,199,.12);

    border:1px solid rgba(18,179,199,.35);

    color:#12B3C7;

    font-size:12px;
    font-weight:500;

    letter-spacing:.8px;

    margin-bottom:22px;
}

.koimiRw25-heading{

    font-size:62px;
    line-height:1.1;

    color:#fff;
    font-weight:800;

    margin-bottom:20px;
}

.koimiRw25-heading span{
    color:#12B3C7;
}

.koimiRw25-text{

    max-width:580px;

    color:#d3dbe2;

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

    margin-bottom:30px;
}

/* =========================
   BUTTONS
========================= */

.koimiRw25-buttons{
    display:flex;
    gap:16px;
    flex-wrap:wrap;
}

.koimiRw25-btnPrimary{

    text-decoration:none;

    padding:16px 34px;

    background:#12B3C7;
    color:#fff;

    border-radius:60px;

    font-weight:600;

    transition:.3s ease;
}

.koimiRw25-btnPrimary:hover{
    transform:translateY(-4px);
    box-shadow:0 15px 30px rgba(18,179,199,.3);
}

.koimiRw25-btnSecondary{

    text-decoration:none;

    padding:16px 34px;

    border:2px solid #12B3C7;

    color:#fff;

    border-radius:60px;

    font-weight:600;

    transition:.3s ease;
}

.koimiRw25-btnSecondary:hover{
    background:#12B3C7;
}

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

.koimiRw25-right{

    flex:1;

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

    position:relative;
    z-index:2;
}

.koimiRw25-right img{

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

    animation:koimiRw25Float 4.5s ease-in-out infinite;

    filter:drop-shadow(0 30px 60px rgba(0,0,0,.4));
}

@keyframes koimiRw25Float{

    0%{transform:translateY(0);}
    50%{transform:translateY(-15px);}
    100%{transform:translateY(0);}
}

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

@media (max-width:991px){

    .koimiRw25-hero{
        min-height:auto;
        padding:70px 6%;
    }

    .koimiRw25-container{
        flex-direction:column-reverse;
        text-align:center;
        gap:45px;
    }

    .koimiRw25-heading{
        font-size:48px;
    }

    .koimiRw25-text{
        margin:0 auto 25px;
    }

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

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

@media (max-width:576px){

    .koimiRw25-hero{
        padding:60px 20px;
    }

    .koimiRw25-heading{
        font-size:36px;
    }

    .koimiRw25-text{
        font-size:15px;
        line-height:1.6;
    }

    .koimiRw25-buttons{
        flex-direction:column;
        width:100%;
    }

    .koimiRw25-btnPrimary,
    .koimiRw25-btnSecondary{
        width:100%;
        text-align:center;
    }

    .koimiRw25-right img{
        max-width:100%;
    }
}
/*=====================================
KOIMI DEVICE SHOWCASE
======================================*/

.koimiRw25-deviceShowcase{

    background:#ffffff;

    padding:70px 7%;

    min-height:650px;

    display:flex;

    align-items:center;

    overflow:hidden;

}

.koimiRw25-deviceContainer{

    width:100%;

    max-width:1350px;

    margin:auto;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:60px;

}

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

.koimiRw25-deviceContent{

    flex:1;

}

.koimiRw25-deviceBadge{

    display:inline-block;

    padding:10px 22px;

    background:#12b3c714;

    color:#12B3C7;

    border-radius:50px;

    font-size:13px;

    font-weight:700;

    letter-spacing:.6px;

    margin-bottom:20px;

}

.koimiRw25-deviceHeading{

    font-size:46px;

    font-weight:800;

    color:#041B1E;

    line-height:1.15;

    margin-bottom:18px;

}

.koimiRw25-deviceHeading span{

    color:#12B3C7;

}

.koimiRw25-deviceText{

    max-width:560px;

    color:#666;

    font-size:17px;

    line-height:1.8;

    margin-bottom:28px;

}

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

.koimiRw25-deviceFeatures{

    display:grid;

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

    gap:14px;

}

.koimiRw25-deviceFeature{

    background:#F8FBFC;

    border:1px solid #E8EEF2;

    border-radius:14px;

    padding:16px 18px;

    font-size:15px;

    font-weight:600;

    color:#041B1E;

    transition:.35s;

}

.koimiRw25-deviceFeature:hover{

    background:#12B3C7;

    color:#fff;

    transform:translateY(-5px);

    border-color:#12B3C7;

}

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

.koimiRw25-deviceImageArea{

    flex:1;

    display:flex;

    justify-content:center;

    align-items:center;

}

.koimiRw25-deviceImageArea img{

    width:100%;

    max-width:560px;

    border-radius:20px;

    display:block;

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

    transition:.4s ease;

}

.koimiRw25-deviceImageArea img:hover{

    transform:translateY(-10px);

}

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

@media(max-width:991px){

    .koimiRw25-deviceShowcase{

        padding:70px 40px;

        min-height:auto;

    }

    .koimiRw25-deviceContainer{

        flex-direction:column-reverse;

        gap:45px;

        text-align:center;

    }

    .koimiRw25-deviceHeading{

        font-size:38px;

    }

    .koimiRw25-deviceText{

        margin:0 auto 25px;

    }

    .koimiRw25-deviceFeatures{

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

    }

    .koimiRw25-deviceImageArea img{

        max-width:520px;

    }

}

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

@media(max-width:576px){

    .koimiRw25-deviceShowcase{

        padding:60px 20px;

    }

    .koimiRw25-deviceHeading{

        font-size:30px;

    }

    .koimiRw25-deviceText{

        font-size:15px;

        line-height:1.7;

    }

    .koimiRw25-deviceFeatures{

        grid-template-columns:1fr;

    }

    .koimiRw25-deviceFeature{

        padding:15px;

        text-align:left;

    }

    .koimiRw25-deviceImageArea img{

        max-width:100%;

    }

}

/*==========================
FEATURE SHOWCASE
==========================*/

.koimiRw25-featureSection{

    padding:100px 7%;

    background:#041B1E;

    overflow:hidden;

}

.koimiRw25-featureContainer{

    max-width:1350px;

    margin:auto;

}

.koimiRw25-featureHeading{

    text-align:center;

    margin-bottom:70px;

}

.koimiRw25-featureHeading span{

    color:#12B3C7;

    font-size:14px;

    font-weight:700;

    letter-spacing:1px;

}

.koimiRw25-featureHeading h2{

    color:#fff;

    font-size:48px;

    margin:20px 0;

    line-height:1.2;

}

.koimiRw25-featureHeading h2 span{

    color:#12B3C7;

}

.koimiRw25-featureHeading p{

    color:#c7d3dc;

    max-width:700px;

    margin:auto;

    line-height:1.8;

}

/* Showcase */

.koimiRw25-featureShowcase{

    display:grid;

    grid-template-columns:250px 1fr 250px;

    align-items:center;

    gap:40px;

}

.koimiRw25-featureLeft,
.koimiRw25-featureRight{

    display:flex;

    flex-direction:column;

    gap:25px;

}

.koimiRw25-floatingCard{

    background:#0B2B30;

    border:1px solid rgba(18,179,199,.25);

    color:#fff;

    padding:18px 20px;

    border-radius:18px;

    font-weight:600;

    transition:.35s;

}

.koimiRw25-floatingCard:hover{

    background:#12B3C7;

    transform:translateY(-6px);

}

.koimiRw25-featureImage{

    display:flex;

    justify-content:center;

}

.koimiRw25-featureImage img{

    width:100%;

    max-width:700px;

    border-radius:22px;

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

}

/* Tablet */

@media(max-width:991px){

    .koimiRw25-featureShowcase{

        grid-template-columns:1fr;

    }

    .koimiRw25-featureLeft,
    .koimiRw25-featureRight{

        flex-direction:row;

        flex-wrap:wrap;

        justify-content:center;

    }

}

/* Mobile */

@media(max-width:576px){

    .koimiRw25-featureSection{

        padding:70px 20px;

    }

    .koimiRw25-featureHeading h2{

        font-size:34px;

    }

    .koimiRw25-floatingCard{

        width:100%;

        text-align:center;

    }

}

/*==================================
PROCESS SECTION
===================================*/

.koimiRw25-processSection{

    padding:110px 7%;

    background:#ffffff;

}

.koimiRw25-processContainer{

    max-width:1350px;

    margin:auto;

}

.koimiRw25-processHeading{

    text-align:center;

    margin-bottom:70px;

}

.koimiRw25-processHeading span{

    color:#12B3C7;

    font-size:14px;

    font-weight:700;

    letter-spacing:1px;

}

.koimiRw25-processHeading h2{

    font-size:48px;

    color:#041B1E;

    margin:18px 0;

}

.koimiRw25-processHeading h2 span{

    color:#12B3C7;

}

.koimiRw25-processHeading p{

    max-width:700px;

    margin:auto;

    color:#666;

    font-size:18px;

    line-height:1.8;

}

/* Grid */

.koimiRw25-processGrid{

    display:grid;

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

    gap:30px;

}

.koimiRw25-processCard{

    position:relative;

    background:#fff;

    border:1px solid #e8eef2;

    border-radius:22px;

    padding:40px 30px;

    transition:.35s;

    overflow:hidden;

}

.koimiRw25-processCard:hover{

    transform:translateY(-10px);

    border-color:#12B3C7;

    box-shadow:0 20px 45px rgba(18,179,199,.15);

}

.koimiRw25-processNumber{

    position:absolute;

    top:18px;

    right:22px;

    font-size:50px;

    font-weight:800;

    color:#12b3c715;

}

.koimiRw25-processIcon{

    width:75px;

    height:75px;

    border-radius:18px;

    background:#12B3C7;

    display:flex;

    justify-content:center;

    align-items:center;

    font-size:34px;

    margin-bottom:25px;

}

.koimiRw25-processCard h3{

    font-size:24px;

    color:#041B1E;

    margin-bottom:15px;

}

.koimiRw25-processCard p{

    color:#666;

    line-height:1.8;

}

/* Tablet */

@media(max-width:991px){

    .koimiRw25-processGrid{

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

    }

}

/* Mobile */

@media(max-width:576px){

    .koimiRw25-processSection{

        padding:80px 20px;

    }

    .koimiRw25-processHeading h2{

        font-size:34px;

    }

    .koimiRw25-processGrid{

        grid-template-columns:1fr;

    }

}

/*==========================================
KOIMI PORTFOLIO SECTION
==========================================*/

.koimiRw25-portfolioSection{

    padding:110px 7%;

    background:#ffffff;

    overflow:hidden;

}

.koimiRw25-portfolioContainer{

    max-width:1350px;

    margin:auto;

}

/*========================
HEADING
========================*/

.koimiRw25-portfolioHeading{

    text-align:center;

    margin-bottom:80px;

}

.koimiRw25-portfolioHeading span{

    display:inline-block;

    color:#12B3C7;

    font-size:14px;

    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;

    margin-bottom:15px;

}

.koimiRw25-portfolioHeading h2{

    font-size:48px;

    color:#041B1E;

    margin-bottom:18px;

    font-weight:800;

}

.koimiRw25-portfolioHeading p{

    max-width:700px;

    margin:auto;

    color:#666;

    font-size:18px;

    line-height:1.8;

}

/*========================
ROW
========================*/

.koimiRw25-portfolioRow{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:70px;

    margin-bottom:90px;

}

.koimiRw25-rowReverse{

    flex-direction:row-reverse;

}

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

.koimiRw25-portfolioImage{

    flex:1;

    overflow:hidden;

    border-radius:22px;

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

}

.koimiRw25-portfolioImage img{

    width:100%;

    display:block;

    transition:.5s;

}

.koimiRw25-portfolioImage:hover img{

    transform:scale(1.05);

}

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

.koimiRw25-portfolioContent{

    flex:1;

}

.koimiRw25-projectTag{

    display:inline-block;

    background:#12B3C715;

    color:#12B3C7;

    padding:10px 20px;

    border-radius:50px;

    font-size:13px;

    font-weight:700;

    margin-bottom:22px;

}

.koimiRw25-portfolioContent h3{

    font-size:38px;

    color:#041B1E;

    margin-bottom:18px;

    font-weight:700;

}

.koimiRw25-portfolioContent p{

    color:#666;

    line-height:1.9;

    font-size:17px;

    margin-bottom:30px;

}

/*========================
FEATURE TAGS
========================*/

.koimiRw25-projectFeatures{

    display:flex;

    flex-wrap:wrap;

    gap:14px;

    margin-bottom:35px;

}

.koimiRw25-projectFeatures span{

    padding:12px 18px;

    background:#F5FBFC;

    border:1px solid #E5EEF1;

    border-radius:50px;

    color:#041B1E;

    font-size:14px;

    font-weight:600;

    transition:.3s;

}

.koimiRw25-projectFeatures span:hover{

    background:#12B3C7;

    color:#fff;

    border-color:#12B3C7;

}

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

.koimiRw25-projectBtn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:16px 34px;

    background:#12B3C7;

    color:#fff;

    text-decoration:none;

    border-radius:50px;

    font-weight:600;

    transition:.35s;

}

.koimiRw25-projectBtn:hover{

    background:#041B1E;

    transform:translateY(-5px);

}

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

@media(max-width:991px){

    .koimiRw25-portfolioSection{

        padding:90px 40px;

    }

    .koimiRw25-portfolioRow,

    .koimiRw25-rowReverse{

        flex-direction:column;

        gap:40px;

    }

    .koimiRw25-portfolioContent{

        text-align:center;

    }

    .koimiRw25-projectFeatures{

        justify-content:center;

    }

    .koimiRw25-portfolioHeading h2{

        font-size:40px;

    }

}

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

@media(max-width:576px){

    .koimiRw25-portfolioSection{

        padding:70px 20px;

    }

    .koimiRw25-portfolioHeading{

        margin-bottom:60px;

    }

    .koimiRw25-portfolioHeading h2{

        font-size:30px;

    }

    .koimiRw25-portfolioHeading p{

        font-size:16px;

    }

    .koimiRw25-portfolioContent h3{

        font-size:28px;

    }

    .koimiRw25-projectFeatures{

        gap:10px;

    }

    .koimiRw25-projectFeatures span{

        width:100%;

        text-align:center;

    }

    .koimiRw25-projectBtn{

        width:100%;

    }

}

/*==========================================
CTA SECTION
==========================================*/

.koimiRw25-ctaSection{

    padding:100px 7%;

    background:
    radial-gradient(circle at top right,#12b3c730 0%,transparent 35%),
    linear-gradient(135deg,#041B1E,#08262A,#041B1E);

    overflow:hidden;

}

.koimiRw25-ctaContainer{

    max-width:900px;

    margin:auto;

    text-align:center;

}

.koimiRw25-ctaBadge{

    display:inline-block;

    padding:10px 22px;

    background:rgba(18,179,199,.12);

    border:1px solid rgba(18,179,199,.3);

    color:#12B3C7;

    border-radius:50px;

    font-size:13px;

    font-weight:700;

    letter-spacing:1px;

    margin-bottom:25px;

}

.koimiRw25-ctaContainer h2{

    color:#fff;

    font-size:52px;

    line-height:1.2;

    margin-bottom:20px;

    font-weight:800;

}

.koimiRw25-ctaContainer h2 span{

    color:#12B3C7;

}

.koimiRw25-ctaContainer p{

    color:#c9d4d7;

    font-size:18px;

    line-height:1.8;

    max-width:700px;

    margin:0 auto 40px;

}

.koimiRw25-ctaButtons{

    display:flex;

    justify-content:center;

    gap:20px;

    flex-wrap:wrap;

}

.koimiRw25-ctaPrimary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:18px 38px;

    background:#12B3C7;

    color:#fff;

    text-decoration:none;

    border-radius:50px;

    font-weight:600;

    transition:.35s;

}

.koimiRw25-ctaPrimary:hover{

    transform:translateY(-5px);

    box-shadow:0 18px 35px rgba(18,179,199,.35);

}

.koimiRw25-ctaSecondary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:18px 38px;

    border:2px solid #12B3C7;

    color:#fff;

    text-decoration:none;

    border-radius:50px;

    font-weight:600;

    transition:.35s;

}

.koimiRw25-ctaSecondary:hover{

    background:#12B3C7;

}

@media(max-width:768px){

    .koimiRw25-ctaContainer h2{

        font-size:38px;

    }

    .koimiRw25-ctaContainer p{

        font-size:16px;

    }

    .koimiRw25-ctaButtons{

        flex-direction:column;

    }

    .koimiRw25-ctaPrimary,
    .koimiRw25-ctaSecondary{

        width:100%;

    }

}

@media(max-width:576px){

    .koimiRw25-ctaSection{

        padding:70px 20px;

    }

    .koimiRw25-ctaContainer h2{

        font-size:30px;

    }

}

.koimiCms25-hero{

    position:relative;
    overflow:hidden;

    min-height:650px;

    display:flex;
    align-items:center;

    padding:60px 7%;

    background:
    radial-gradient(circle at top right,#12B3C725 0%,transparent 35%),
    linear-gradient(135deg,#041B1E 0%,#08262A 45%,#041B1E 100%);

}

/* Glow */

.koimiCms25-hero::before{

    content:"";

    position:absolute;

    width:500px;
    height:500px;

    background:#12B3C7;

    border-radius:50%;

    filter:blur(180px);

    opacity:.08;

    top:-180px;
    right:-150px;

}

.koimiCms25-container{

    width:100%;

    max-width:1350px;

    margin:auto;

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:60px;

    position:relative;

    z-index:2;

}

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

.koimiCms25-left{

    flex:1;

}

.koimiCms25-badge{

    display:inline-block;

    padding:10px 22px;

    background:rgba(18,179,199,.12);

    border:1px solid rgba(18,179,199,.25);

    border-radius:50px;

    color:#12B3C7;

    font-size:13px;

    font-weight:700;

    letter-spacing:.8px;

    margin-bottom:20px;

}

.koimiCms25-heading{

    font-size:52px;

    font-weight:800;

    line-height:1.15;

    color:#fff;

    margin-bottom:18px;

}

.koimiCms25-heading span{

    color:#12B3C7;

}

.koimiCms25-text{

    max-width:560px;

    color:#C7D3DC;

    font-size:17px;

    line-height:1.8;

    margin-bottom:30px;

}

/*==========================
BUTTONS
==========================*/

.koimiCms25-buttons{

    display:flex;

    gap:18px;

    flex-wrap:wrap;

}

.koimiCms25-primaryBtn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    text-decoration:none;

    padding:16px 34px;

    background:#12B3C7;

    color:#fff;

    border-radius:50px;

    font-weight:600;

    transition:.35s;

}

.koimiCms25-primaryBtn:hover{

    transform:translateY(-5px);

    box-shadow:0 18px 35px rgba(18,179,199,.35);

}

.koimiCms25-secondaryBtn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    text-decoration:none;

    padding:16px 34px;

    border:2px solid #12B3C7;

    color:#fff;

    border-radius:50px;

    font-weight:600;

    transition:.35s;

}

.koimiCms25-secondaryBtn:hover{

    background:#12B3C7;

}

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

.koimiCms25-right{

    flex:1;

    display:flex;

    justify-content:center;

    align-items:center;

}

.koimiCms25-imageBox{

    width:100%;

    max-width:560px;

    border-radius:24px;

    overflow:hidden;

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

}

.koimiCms25-imageBox img{

    width:100%;

    display:block;

    transition:.4s ease;

}

.koimiCms25-imageBox:hover img{

    transform:scale(1.03);

}

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

@media(max-width:991px){

    .koimiCms25-hero{

        min-height:auto;

        padding:70px 40px;

    }

    .koimiCms25-container{

        flex-direction:column-reverse;

        text-align:center;

        gap:45px;

    }

    .koimiCms25-heading{

        font-size:42px;

    }

    .koimiCms25-text{

        margin:0 auto 28px;

    }

    .koimiCms25-buttons{

        justify-content:center;

    }

    .koimiCms25-imageBox{

        max-width:500px;

    }

}

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

@media(max-width:576px){

    .koimiCms25-hero{

        padding:60px 20px;

    }

    .koimiCms25-heading{

        font-size:32px;

    }

    .koimiCms25-text{

        font-size:15px;

        line-height:1.7;

    }

    .koimiCms25-buttons{

        flex-direction:column;

        width:100%;

    }

    .koimiCms25-primaryBtn,

        width:100%;

    }

    .koimiCms25-imageBox{

        max-width:100%;

    }

}
/*=========================
CMS CONTENT SECTION
=========================*/

.koimiCms25-content{

    padding:100px 20px;

    background:#ffffff;

}

.koimiCms25-contentWrap{

    max-width:850px;

    margin:auto;

    text-align:center;

}

.koimiCms25-tag{

    display:inline-block;

    padding:10px 22px;

    border-radius:50px;

    background:#12B3C715;

    border:1px solid rgba(18,179,199,.2);

    color:#12B3C7;

    font-size:13px;

    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;

    margin-bottom:22px;

}

.koimiCms25-contentWrap h2{

    font-size:48px;

    color:#041B1E;

    line-height:1.2;

    font-weight:800;

    margin-bottom:22px;

}

.koimiCms25-contentWrap h2 span{

    color:#12B3C7;

}

.koimiCms25-contentWrap p{

    font-size:18px;

    line-height:1.9;

    color:#666;

    margin-bottom:40px;

}

.koimiCms25-list{

    display:grid;

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

    gap:18px;

    margin-bottom:45px;

}

.koimiCms25-item{

    background:#F8FBFC;

    border:1px solid #E8EEF2;

    padding:18px;

    border-radius:14px;

    font-weight:600;

    color:#041B1E;

    transition:.3s;

}

.koimiCms25-item:hover{

    border-color:#12B3C7;

    transform:translateY(-5px);

    box-shadow:0 15px 30px rgba(18,179,199,.12);

}

.koimiCms25-btn{

    display:inline-block;

    padding:16px 36px;

    background:#12B3C7;

    color:#fff;

    text-decoration:none;

    border-radius:50px;

    font-weight:600;

    transition:.3s;

}

.koimiCms25-btn:hover{

    background:#041B1E;

}

@media(max-width:768px){

    .koimiCms25-content{

        padding:70px 20px;

    }

    .koimiCms25-contentWrap h2{

        font-size:34px;

    }

    .koimiCms25-list{

        grid-template-columns:1fr;

    }

}
/*=========================
CMS PROCESS SECTION
=========================*/

.koimiCms25-process{

    padding:100px 7%;

    background:#041B1E;

}

.koimiCms25-processContainer{

    max-width:1300px;

    margin:auto;

}

.koimiCms25-processHeading{

    text-align:center;

    margin-bottom:70px;

}

.koimiCms25-processHeading h2{

    font-size:48px;

    color:#fff;

    margin:20px 0;

    font-weight:800;

}

.koimiCms25-processHeading h2 span{

    color:#12B3C7;

}

.koimiCms25-processHeading p{

    max-width:700px;

    margin:auto;

    color:#BFCFD3;

    line-height:1.8;

}

.koimiCms25-processGrid{

    display:grid;

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

    gap:25px;

}

.koimiCms25-step{

    background:#0B2B2F;

    padding:35px 30px;

    border-radius:20px;

    border:1px solid rgba(18,179,199,.15);

    transition:.35s;

}

.koimiCms25-step:hover{

    transform:translateY(-8px);

    border-color:#12B3C7;

}

.koimiCms25-step span{

    width:60px;

    height:60px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#12B3C7;

    color:#fff;

    border-radius:50%;

    font-size:22px;

    font-weight:700;

    margin-bottom:25px;

}

.koimiCms25-step h3{

    color:#fff;

    margin-bottom:15px;

    font-size:22px;

}

.koimiCms25-step p{

    color:#BFCFD3;

    line-height:1.8;

    font-size:15px;

}

@media(max-width:991px){

    .koimiCms25-processGrid{

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

    }

}

@media(max-width:576px){

    .koimiCms25-process{

        padding:70px 20px;

    }

    .koimiCms25-processHeading h2{

        font-size:32px;

    }

    .koimiCms25-processGrid{

        grid-template-columns:1fr;

    }

}

/*==============================
CMS PLATFORMS
==============================*/

.koimiCms25-platforms{

    padding:100px 7%;

    background:#fff;

}

.koimiCms25-platformContainer{

    max-width:1300px;

    margin:auto;

}

.koimiCms25-platformHeading{

    text-align:center;

    margin-bottom:70px;

}

.koimiCms25-platformTag{

    display:inline-block;

    padding:10px 22px;

    border-radius:50px;

    background:#12B3C715;

    color:#12B3C7;

    font-size:13px;

    font-weight:700;

    letter-spacing:1px;

}

.koimiCms25-platformHeading h2{

    font-size:48px;

    color:#041B1E;

    margin:20px 0;

    font-weight:800;

}

.koimiCms25-platformHeading h2 span{

    color:#12B3C7;

}

.koimiCms25-platformHeading p{

    max-width:700px;

    margin:auto;

    color:#666;

    line-height:1.8;

}

.koimiCms25-platformGrid{

    display:grid;

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

    gap:25px;

}

.koimiCms25-platformCard{

    background:#F8FBFC;

    border:1px solid #E8EEF2;

    border-radius:20px;

    padding:40px 25px;

    text-align:center;

    transition:.35s;

}

.koimiCms25-platformCard:hover{

    transform:translateY(-10px);

    border-color:#12B3C7;

    box-shadow:0 20px 45px rgba(18,179,199,.12);

}

.koimiCms25-platformCard img{

    width:70px;

    height:70px;

    object-fit:contain;

    margin-bottom:25px;

}

.koimiCms25-platformCard h3{

    font-size:24px;

    color:#041B1E;

    margin-bottom:12px;

}

.koimiCms25-platformCard p{

    color:#666;

    line-height:1.8;

    font-size:15px;

}

@media(max-width:991px){

    .koimiCms25-platformGrid{

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

    }

}

@media(max-width:576px){

    .koimiCms25-platforms{

        padding:70px 20px;

    }

    .koimiCms25-platformHeading h2{

        font-size:32px;

    }

    .koimiCms25-platformGrid{

        grid-template-columns:1fr;

    }

}

/*==================================
WHAT YOU CAN MANAGE
==================================*/

.koimiCms25-manage{

    padding:100px 7%;

    background:#041B1E;

}

.koimiCms25-manageContainer{

    max-width:1300px;

    margin:auto;

}

.koimiCms25-manageHeading{

    text-align:center;

    margin-bottom:70px;

}

.koimiCms25-manageTag{

    display:inline-block;

    padding:10px 22px;

    border-radius:50px;

    background:rgba(18,179,199,.12);

    color:#12B3C7;

    font-size:13px;

    font-weight:700;

}

.koimiCms25-manageHeading h2{

    color:#fff;

    font-size:48px;

    margin:20px 0;

    font-weight:800;

}

.koimiCms25-manageHeading h2 span{

    color:#12B3C7;

}

.koimiCms25-manageHeading p{

    max-width:700px;

    margin:auto;

    color:#C8D4D7;

    line-height:1.8;

}

.koimiCms25-manageGrid{

    display:grid;

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

    gap:25px;

}

.koimiCms25-manageBox{

    background:#0A2A2E;

    border:1px solid rgba(18,179,199,.15);

    border-radius:18px;

    padding:35px 20px;

    text-align:center;

    transition:.35s;

}

.koimiCms25-manageBox:hover{

    transform:translateY(-8px);

    border-color:#12B3C7;

}

.koimiCms25-manageIcon{

    font-size:34px;

    margin-bottom:18px;

}

.koimiCms25-manageBox h3{

    color:#fff;

    font-size:20px;

}

@media(max-width:991px){

    .koimiCms25-manageGrid{

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

    }

}

@media(max-width:576px){

    .koimiCms25-manage{

        padding:70px 20px;

    }

    .koimiCms25-manageHeading h2{

        font-size:32px;

    }

    .koimiCms25-manageGrid{

        grid-template-columns:1fr;

    }

}

/*==================================
TRUST SECTION
==================================*/

.koimiCms25-trust{

    padding:100px 7%;

    background:#ffffff;

}

.koimiCms25-trustContainer{

    max-width:1250px;

    margin:auto;

}

.koimiCms25-trustHeading{

    text-align:center;

    max-width:760px;

    margin:0 auto 60px;

}

.koimiCms25-trustTag{

    display:inline-block;

    padding:10px 22px;

    background:#12B3C715;

    color:#12B3C7;

    border-radius:50px;

    font-size:13px;

    font-weight:700;

    letter-spacing:1px;

}

.koimiCms25-trustHeading h2{

    font-size:48px;

    margin:20px 0;

    color:#041B1E;

    font-weight:800;

}

.koimiCms25-trustHeading span{

    color:#12B3C7;

}

.koimiCms25-trustHeading p{

    color:#666;

    line-height:1.8;

}

.koimiCms25-stats{

    display:grid;

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

    gap:25px;

}

.koimiCms25-statBox{

    text-align:center;

    padding:40px 20px;

    background:#F8FBFC;

    border:1px solid #E8EEF2;

    border-radius:20px;

    transition:.3s;

}

.koimiCms25-statBox:hover{

    transform:translateY(-8px);

    border-color:#12B3C7;

}

.koimiCms25-statBox h3{

    font-size:42px;

    color:#12B3C7;

    margin-bottom:10px;

}

.koimiCms25-statBox p{

    color:#041B1E;

    font-weight:600;

}

@media(max-width:991px){

    .koimiCms25-stats{

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

    }

}

@media(max-width:576px){

    .koimiCms25-trust{

        padding:70px 20px;

    }

    .koimiCms25-trustHeading h2{

        font-size:32px;

    }

    .koimiCms25-stats{

        grid-template-columns:1fr;

    }

}
/*==========================
CMS FAQ
==========================*/

.koimiCms25-faq{

    padding:100px 7%;

    background:#041B1E;

}

.koimiCms25-faqContainer{

    max-width:1000px;

    margin:auto;

}

.koimiCms25-faqHeading{

    text-align:center;

    margin-bottom:60px;

}

.koimiCms25-faqTag{

    display:inline-block;

    padding:10px 22px;

    background:rgba(18,179,199,.12);

    color:#12B3C7;

    border-radius:50px;

    font-size:13px;

    font-weight:700;

    letter-spacing:1px;

}

.koimiCms25-faqHeading h2{

    font-size:48px;

    color:#fff;

    margin:20px 0;

}

.koimiCms25-faqHeading h2 span{

    color:#12B3C7;

}

.koimiCms25-faqHeading p{

    color:#C9D4D7;

    line-height:1.8;

}

.koimiCms25-faqItem{

    background:#0A2A2E;

    border:1px solid rgba(18,179,199,.15);

    border-radius:18px;

    margin-bottom:18px;

    padding:24px;

}

.koimiCms25-faqItem summary{

    cursor:pointer;

    color:#fff;

    font-size:19px;

    font-weight:600;

    list-style:none;

}

.koimiCms25-faqItem summary::-webkit-details-marker{

    display:none;

}

.koimiCms25-faqItem p{

    margin-top:18px;

    color:#C9D4D7;

    line-height:1.8;

}

@media(max-width:576px){

    .koimiCms25-faq{

        padding:70px 20px;

    }

    .koimiCms25-faqHeading h2{

        font-size:32px;

    }

}
/*=========================
LIGHT CTA
=========================*/

.koimiCms25-cta{

    padding:110px 7%;

    background:#F8FBFC;

}

.koimiCms25-ctaContainer{

    max-width:900px;

    margin:auto;

    text-align:center;

    background:#fff;

    padding:70px;

    border-radius:28px;

    border:1px solid #E7EDF0;

    box-shadow:0 20px 60px rgba(0,0,0,.06);

}

.koimiCms25-ctaTag{

    display:inline-block;

    padding:10px 22px;

    background:#12B3C715;

    color:#12B3C7;

    border-radius:50px;

    font-size:13px;

    font-weight:700;

    letter-spacing:1px;

    margin-bottom:25px;

}

.koimiCms25-cta h2{

    font-size:52px;

    color:#041B1E;

    line-height:1.2;

    margin-bottom:20px;

    font-weight:800;

}

.koimiCms25-cta h2 span{

    color:#12B3C7;

}

.koimiCms25-cta p{

    max-width:700px;

    margin:0 auto 40px;

    color:#666;

    line-height:1.9;

    font-size:17px;

}

.koimiCms25-ctaButtons{

    display:flex;

    justify-content:center;

    gap:18px;

    flex-wrap:wrap;

}

.koimiCms25-primaryBtn{

    padding:17px 36px;

    background:#12B3C7;

    color:#fff;

    border-radius:50px;

    text-decoration:none;

    font-weight:600;

    transition:.3s;

}

.koimiCms25-primaryBtn:hover{

    background:#041B1E;

    transform:translateY(-5px);

}

.koimiCms25-secondaryBtn{

    padding:17px 36px;

    border:2px solid #12B3C7;

    color:#12B3C7;

    border-radius:50px;

    text-decoration:none;

    font-weight:600;

    transition:.3s;

}

.koimiCms25-secondaryBtn:hover{

    background:#12B3C7;

    color:#fff;

}

@media(max-width:768px){

    .koimiCms25-cta{

        padding:70px 20px;

    }

    .koimiCms25-ctaContainer{

        padding:45px 25px;

    }

    .koimiCms25-cta h2{

        font-size:34px;

    }

    .koimiCms25-ctaButtons{

        flex-direction:column;

    }

    .koimiCms25-primaryBtn{
        width:100%;

    }

}
  /*==============================
    Consultation Section
================================*/

.kzm-consultation-section{
    padding:100px 0;
    background:#f8fbff;
}

.consultation-wrapper{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:70px;
}

.consultation-left{
    flex:1;
}

.consultation-form{
    width:460px;
    background:#fff;
    padding:40px;
    border-radius:22px;
    box-shadow:0 20px 60px rgba(0,0,0,.08);
    border:1px solid rgba(0,0,0,.05);
}

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

.section-tag{
    display:inline-block;
    padding:10px 22px;
    border-radius:50px;
    background:#eef5ff;
    color:#0057ff;
    font-size:14px;
    font-weight:600;
    margin-bottom:20px;
}

.consultation-left h2{
    font-size:46px;
    font-weight:700;
    line-height:1.2;
    color:#111827;
    margin-bottom:20px;
}

.consultation-left p{
    font-size:17px;
    line-height:1.8;
    color:#6b7280;
    margin-bottom:35px;
}

/*==============================
    Trusted Platforms
================================*/

.trusted-platforms h5{
    font-size:20px;
    margin-bottom:25px;
    color:#111827;
}

.platform-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px;
}

.platform-item{
    background:#fff;
    border-radius:16px;
    padding:18px 10px;
    text-align:center;
    transition:.35s;
    border:1px solid #edf1f7;
}

.platform-item:hover{
    transform:translateY(-8px);
    box-shadow:0 12px 35px rgba(0,87,255,.12);
}

.platform-item img{
    width:42px;
    margin-bottom:12px;
}

.platform-item span{
    display:block;
    font-size:14px;
    font-weight:600;
    color:#111827;
}

/*==============================
    Benefits
================================*/

.benefits{
    margin-top:40px;
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:18px;
}

.benefits div{
    font-size:16px;
    font-weight:500;
    color:#111827;
}

/*==============================
    Form
================================*/

.consultation-form h3{
    font-size:32px;
    color:#111827;
    margin-bottom:10px;
}

.consultation-form p{
    color:#6b7280;
    line-height:1.7;
    margin-bottom:30px;
}

.consultation-form form{
    display:flex;
    flex-direction:column;
    gap:18px;
}

.consultation-form input,
.consultation-form select,
.consultation-form textarea{

    width:100%;
    padding:16px 18px;
    border:1px solid #dbe2ea;
    border-radius:12px;
    font-size:15px;
    outline:none;
    transition:.3s;
    background:#fafcff;
}

.consultation-form textarea{
    resize:none;
}

.consultation-form input:focus,
.consultation-form select:focus,
.consultation-form textarea:focus{

    border-color:#0057ff;
    box-shadow:0 0 0 4px rgba(0,87,255,.12);
    background:#fff;
}

.consultation-form button{

    border:none;
    background:linear-gradient(135deg,#0057ff,#00b4ff);
    color:#fff;
    font-size:17px;
    font-weight:600;
    padding:17px;
    border-radius:12px;
    cursor:pointer;
    transition:.35s;
}

.consultation-form button:hover{

    transform:translateY(-3px);
    box-shadow:0 15px 35px rgba(0,87,255,.30);
}

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

@media(max-width:991px){

    .consultation-wrapper{
        flex-direction:column;
    }

    .consultation-form{
        width:100%;
    }

    .platform-grid{
        grid-template-columns:repeat(3,1fr);
    }

}

@media(max-width:767px){

    .consultation-section{
        padding:70px 0;
    }

    .consultation-left h2{
        font-size:34px;
    }

    .platform-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .benefits{
        grid-template-columns:1fr;
    }

    .consultation-form{
        padding:30px 25px;
    }

}

@media(max-width:480px){

    .platform-grid{
        grid-template-columns:1fr 1fr;
    }

    .consultation-left h2{
        font-size:30px;
    }

    .consultation-form h3{
        font-size:26px;
    }

}

/*==============================
        OUR PROCESS
===============================*/

.koimi-process-section{
    padding:90px 0;
    background:#f8fbff;
}

.koimi-process-container{
    width:90%;
    max-width:1300px;
    margin:auto;
}

.koimi-process-title{
    text-align:center;
    margin-bottom:60px;
}

.koimi-process-title h2{
    font-size:42px;
    color:#0f172a;
    margin-bottom:15px;
}

.koimi-process-title p{
    color:#6b7280;
    max-width:650px;
    margin:auto;
    line-height:1.8;
}

.koimi-process-flow{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:25px;
    flex-wrap:wrap;
}

.koimi-step{
    flex:1;
    min-width:220px;
    background:#fff;
    border-radius:18px;
    padding:35px 20px;
    text-align:center;
    box-shadow:0 15px 40px rgba(0,0,0,.06);
    transition:.35s;
}

.koimi-step:hover{
    transform:translateY(-8px);
    box-shadow:0 25px 45px rgba(13,110,253,.15);
}

.koimi-step-icon{
    width:75px;
    height:75px;
    background:#12b3c7;
    color:#fff;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 auto 20px;
    font-size:30px;
}

.koimi-step h3{
    font-size:24px;
    margin-bottom:10px;
    color:#111827;
}

.koimi-step span{
    color:#6b7280;
    font-size:15px;
}

.koimi-arrow{
    font-size:34px;
    color:var(--primary-color);
}

@media(max-width:991px){

.koimi-process-flow{
    flex-direction:column;
}

.koimi-arrow{
    transform:rotate(90deg);
}

.koimi-step{
    width:100%;
}

}
/*==============================
        RESULTS SECTION
==============================*/

.koimi-achievement-section{
    padding:90px 0;
    background:#f8fbff;
}

.koimi-achievement-container{
    width:90%;
    max-width:1200px;
    margin:auto;
}

.koimi-achievement-heading{
    text-align:center;
    margin-bottom:60px;
}

.koimi-achievement-heading h2{
    font-size:42px;
    font-weight:700;
    color:#0f172a;
    margin-bottom:15px;
}

.koimi-achievement-heading p{
    max-width:650px;
    margin:auto;
    color:#6b7280;
    line-height:1.8;
}

.koimi-achievement-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
}

.koimi-achievement-card{
    background:#fff;
    padding:40px 30px;
    border-radius:18px;
    text-align:center;
    border:1px solid #e5e7eb;
    box-shadow:0 15px 40px rgba(0,0,0,.06);
    transition:.35s;
}

.koimi-achievement-card:hover{
    transform:translateY(-10px);
    box-shadow:0 25px 50px rgba(13,110,253,.15);
}

.koimi-achievement-icon{
    width:80px;
    height:80px;
    margin:auto;
    border-radius:50%;
    background:var(--primary-bg);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:32px;
    margin-bottom:25px;
}

.koimi-achievement-card h3{
    font-size:42px;
    color:var(--primary-color);
    margin-bottom:10px;
    font-weight:700;
}

.koimi-achievement-card span{
    font-size:18px;
    color:#4b5563;
    font-weight:500;
}

@media(max-width:991px){

    .koimi-achievement-grid{
        grid-template-columns:1fr;
    }

    .koimi-achievement-heading h2{
        font-size:34px;
    }

}