/********** Template CSS **********/

/*** WhatsApp Float Button ***/
.whatsapp-float {
    position: fixed;
    right: 30px;
    bottom: 45px;
    width: 48px;
    height: 48px;
    background-color: #25D366;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
    z-index: 100;
    transition: background-color .3s, box-shadow .3s;
    animation: waBounce 2.2s ease-in-out infinite;
}

.whatsapp-float:hover {
    background-color: #1ebe57;
    color: #fff;
    animation-play-state: paused;
}

@keyframes waBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-19px); }
}

@media (max-width: 576px) {
    .whatsapp-float {
        width: 42px;
        height: 42px;
        font-size: 22px;
        right: 20px;
        bottom: 30px;
    }
}


/*** Spinner ***/
#spinner {
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s ease-out, visibility 0s linear .5s;
    z-index: 99999;
}

#spinner.show {
    transition: opacity .5s ease-out, visibility 0s linear 0s;
    visibility: visible;
    opacity: 1;
}


/*** Button ***/
.btn {
    font-weight: 600;
    transition: .5s;
    border-radius: 50px;
}



.btn-lg-square {
    width: 48px;
    height: 48px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: inherit;
}

/* ============================= */
/* LIGHTBOX MODAL (GLASS UI) */
/* ============================= */

/* Overlay */




/* Modal Box (Glass) */


/* Glow border */

/* Noise texture */

.lightbox-content::after {
    content: "";
    position: absolute;
    inset: 0;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    background: rgba(255, 255, 255, 0.02);
    pointer-events: none;
    background-image:
        url("https://www.transparenttextures.com/patterns/noise.png");
    background-blend-mode: overlay;
    opacity: 0.04;
}
/* Animations */
@keyframes fadeZoom {
    from { transform: scale(0.8); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

@keyframes float {
    0% { transform: translateY(10px); }
    100% { transform: translateY(0px); }
}

/* Layout */


/* Image */


/* Modal Image Animation */


/* When modal active, fade in image */
.lightbox-modal.active .modal-img img {
    opacity: 1;
    transform: translateY(0);
}

/* Info */


/* Text */






/* Button */


/* Close */


/* Responsive */




/*** Navbar ***/
/* Light transparent gradient by default,
   dark transparent gradient once scrolled (bg-dark added via JS) */
.navbar {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 9;
    transition: .5s;
    background: linear-gradient(to bottom, rgba(255, 255, 255, .16), rgba(255, 255, 255, .02));
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.navbar.bg-dark {
    background: linear-gradient(to bottom, rgba(10, 14, 22, .92), rgba(10, 14, 22, .72)) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

.navbar .navbar-nav .nav-link {
    margin-right: 25px;
    padding: 40px 0;
    color: var(--bs-white);
    font-size: 17px;
    text-transform: uppercase;
    outline: none;
    transition: .5s;
}

.navbar .navbar-nav .nav-link:hover,
.navbar .navbar-nav .nav-link.active {
    color: var(--bs-primary);
}

@media (max-width: 991.98px) {
    .navbar .navbar-nav .nav-link,
    .navbar.bg-dark .navbar-nav .nav-link {
        margin-right: 0;
        padding: 10px 0;
    }

    .navbar .navbar-nav {
        margin-top: 8px;
        border-top: 1px solid var(--bs-light);
    }
}

@media (min-width: 992px) {
    .navbar.bg-dark .navbar-nav .nav-link {
        padding: 20px 0;
    }




}




/*** Header ***/


.carousel-control-prev,
.carousel-control-next {
    width: 10%;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
    width: 3rem;
    height: 3rem;
}

#videoCarousel{
    max-width: 1280px;
    margin: 40px auto;
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,.15);
}

.video-banner{
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
}

.page-header {
    padding-top: 200px;
    background: radial-gradient(
        circle at top left,
        rgba(37,99,235,.18),
        transparent 35%
    ),
    radial-gradient(
    circle at bottom right,
    rgba(255,166,0,.10),
    transparent 40%
    );
    background-size: cover;
}




/*** Title ***/
.title {
    margin-bottom: 2rem;
}

.title .title-center {
    display: inline-block;
    max-width: 100%;
    text-transform: uppercase;
    overflow: hidden;
    text-align: center;
}

.title .title-center h5 {
    position: relative;
    display: inline-block;
    font-size: 18px;
    font-weight: 300;
}

.title .title-center h5::before,
.title .title-center h5::after {
    position: absolute;
    content: "";
    width: 500%;
    height: 0;
    top: 9px;
    border-bottom: 1px solid var(--bs-white);
}

.title .title-center h5::after {
    left: calc(100% + 15px);
}

.title .title-center h5::before {
    right: calc(100% + 15px);
}

.title .title-center h1 {
    border-bottom: 1px solid var(--bs-white);
    overflow-wrap: break-word;
}



/*** Service ***/


.service-item .service-img {
    position: relative;
    display: inline-block;
}

/* Uniform 0.8 scale of the whole card (image cap, padding, margins, type),
   computed directly from the original measured values so every part shrinks
   together proportionally. The fluid resize behavior underneath is fully
   preserved -- this cap only engages at wider viewports where the natural
   fluid image size would otherwise exceed it. */
.service-item .service-img img {
    max-width: min(100%, 355px);
}

.service-item .service-img.p-5 {
    padding: 2.4rem !important;
}

.service-item .service-text.px-5.px-md-0.py-md-5 {
    padding-left: 2.4rem;
    padding-right: 2.4rem;
}
@media (min-width: 768px) {
    .service-item .service-text.px-5.px-md-0.py-md-5 {
        padding-left: 0;
        padding-right: 0;
        padding-top: 2.4rem;
        padding-bottom: 2.4rem;
    }
}

.service-item .service-text h3 {
    font-size: 1.4rem;
    margin-bottom: 0.4rem;
    overflow-wrap: break-word;
    word-break: break-word;
}

.service-item .service-text p {
    font-size: 0.9rem;
    padding: 0 20px;
    margin-bottom: 1.2rem;
    overflow-wrap: break-word;
    word-break: break-word;
}

.service-item .service-img::before {
    position: absolute;
    content: "";
    width: calc(100% - 12rem);
    height: calc(100% - 12rem);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 3rem solid rgba(0, 0, 0, .0);
    border-radius: 300px;
    z-index: 1;
}

.service-item.service-item-left {
    border-radius: 500px 0 0 500px;
    background: linear-gradient(to right, var(--bs-secondary), var(--bs-dark));
}

.service-item.service-item-right {
    border-radius: 0 500px 500px 0;
    background: linear-gradient(to left, var(--bs-secondary), var(--bs-dark));
}



/*** profile ***/
.profile-item {
    position: relative;
    height: 100%;
    margin-top: 2.5rem;
    overflow: hidden;
}

.profile-item > .row {
    height: 100%;
}

.profile-item .profile-img {
    position: relative;
    display: inline-block;
}

.profile-item .profile-img::before {
    position: absolute;
    content: "";
    width: calc(100% - 12rem);
    height: calc(100% - 12rem);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 3rem solid rgba(0, 0, 0, .0);
    border-radius: 300px;
    z-index: 1;
}








/*** Team ***/






body {
    position: relative;
    overflow-x: hidden;
    min-height: 100vh;
    background:
        radial-gradient(circle at 15% 20%, rgba(39,120,255,.22), transparent 35%),
        radial-gradient(circle at 85% 25%, rgba(255,140,0,.20), transparent 32%),
        radial-gradient(circle at 55% 85%, rgba(0,170,255,.10), transparent 38%),
        linear-gradient(135deg,#07111f 0%,#0b1628 35%,#101d30 65%,#09111d 100%);
    background-attachment: fixed;
}

body::before,
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;}
body::before{background:radial-gradient(circle at 20% 30%,rgba(0,180,255,.08),transparent 28%),radial-gradient(circle at 80% 70%,rgba(255,150,40,.08),transparent 25%);}
body::after{background-image:linear-gradient(rgba(255,255,255,.015) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.015) 1px,transparent 1px);background-size:80px 80px;opacity:.18;}


/*** Testimonial ***/


/*** Team ***/


/* =========================
   VISION IMAGE (CLEAN)
   ========================= */

.vision-image {
    margin-top: 25px;
    width: 100%;
    border-radius: 12px;
    overflow: hidden;

    /* subtle glass feel like your modal */
    background: rgba(255,255,255,0.03);
    backdrop-filter: blur(6px);

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

.vision-image img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;

    /* smooth hover effect */
    transition: transform 0.6s ease;
}

.vision-image:hover img {
    transform: scale(1.03);
}
/*** Footer ***/
@keyframes footerAnimatedBg {
	0% {
        background-position: 0 0;
    }

	100% {
        background-position: -1000px 0;
    }
}

.footer {
	background-image: url(../img/footer-bg.png);
	background-position: 0px 0px;
    background-repeat: repeat-x;
	animation: footerAnimatedBg 50s linear infinite;
}

/* Footer info card: offices + certifications/partners */
.footer-info-row{
    max-width:960px;
    margin:0 auto;
    text-align:left;
    padding:36px 40px;
    border-radius:20px;
    background:rgba(255,255,255,.03);
    border:1px solid rgba(255,255,255,.08);
}
.footer-info-col{
    padding:0 8px;
}
.footer-info-col-divider{
    border-left:1px solid rgba(255,255,255,.08);
}
@media (max-width:767px){
    .footer-info-col-divider{
        border-left:none;
        border-top:1px solid rgba(255,255,255,.08);
        padding-top:24px;
        margin-top:8px;
    }
}
.footer-heading{
    position:relative;
    display:inline-block;
    color:#fff;
    font-weight:700;
    font-size:14px;
    text-transform:uppercase;
    letter-spacing:1px;
    padding-bottom:10px;
    margin-bottom:20px;
}
.footer-heading::after{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width:36px;
    height:2px;
    background:#0d6efd;
}
.footer-office-list{
    list-style:none;
    padding:0;
    margin:0;
}
.footer-office-list li{
    display:flex;
    align-items:flex-start;
    gap:10px;
    color:rgba(255,255,255,.7);
    font-size:14px;
    line-height:1.6;
    margin-bottom:14px;
}
.footer-office-list li:last-child{
    margin-bottom:0;
}
.footer-office-list li i{
    color:#0d6efd;
    font-size:13px;
    margin-top:4px;
    flex-shrink:0;
}
.footer-office-list li strong{
    color:#fff;
}
.footer-badge-list{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
}
.footer-badge{
    display:inline-flex;
    align-items:center;
    gap:7px;
    padding:8px 16px;
    border-radius:30px;
    background:rgba(59,130,246,.12);
    border:1px solid rgba(96,165,250,.25);
    color:#93c5fd;
    font-size:13px;
    font-weight:600;
    text-decoration:none;
    transition:.25s;
}
.footer-badge i{
    font-size:11px;
}
.footer-badge:hover{
    background:rgba(59,130,246,.25);
    border-color:rgba(96,165,250,.5);
    color:#fff;
    transform:translateY(-2px);
}
.footer-clients-row{
    margin-top:28px;
    padding-top:28px;
    border-top:1px solid rgba(255,255,255,.08);
}
.footer-badge-client{
    background:rgba(255,255,255,.05);
    border-color:rgba(255,255,255,.14);
    color:rgba(255,255,255,.75);
    font-weight:500;
}
.footer-badge-client:hover{
    background:rgba(255,255,255,.12);
    border-color:rgba(255,255,255,.3);
    color:#fff;
}
.footer-badge-client i{
    color:rgba(255,255,255,.4);
}
.footer-divider{
    border:none;
    border-top:1px solid rgba(255,255,255,.1);
    max-width:960px;
    margin:0 auto 30px;
}

/* Visitor counter widget (contact page, below the map) */
.visitor-counter-box{
    display:inline-flex;
    align-items:center;
    gap:22px;
    padding:16px 32px;
    border-radius:50px;
    background:rgba(18,25,40,.72);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    border:1px solid rgba(255,255,255,.08);
    color:#fff;
    font-size:14px;
    flex-wrap:wrap;
    justify-content:center;
}
.visitor-stat{
    display:flex;
    align-items:center;
    gap:10px;
}
.visitor-stat i{
    color:#0d6efd;
    font-size:16px;
}
.visitor-stat span:nth-child(2){
    color:rgba(255,255,255,.75);
}
.visitor-stat #visitor-count,
.visitor-stat #active-visitor-count{
    font-weight:700;
    color:#93c5fd;
    font-size:16px;
}
.visitor-stat-divider{
    width:1px;
    height:20px;
    background:rgba(255,255,255,.15);
}
.visitor-live-dot{
    font-size:10px !important;
    color:#22c55e !important;
    animation:visitorLivePulse 2s infinite;
}
@keyframes visitorLivePulse{
    0%,100%{ opacity:1; transform:scale(1); }
    50%{ opacity:.5; transform:scale(.8); }
}
@media (max-width:480px){
    .visitor-counter-box{
        gap:14px;
        padding:16px 22px;
    }
    .visitor-stat{
        gap:6px;
        font-size:13px;
    }
}


.header-video{
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
    object-fit: cover;
    z-index: 0;
}

.video-header .container{
    position: relative;
    z-index: 2;
}




/* optional dark overlay */
.video-header{
    position: relative;
    overflow: hidden;
    height: 70vh;
    min-height: 500px;
}
/* Overlay */
.lightbox-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
    135deg,
    rgba(18, 18, 25, 0.95),
    rgba(40, 40, 55, 0.95)
);
    backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: 0.4s;
    z-index: 9999;
}
.lightbox-modal.active {
    opacity: 1;
    visibility: visible;
}

/* Modal Box */
.lightbox-content {
    outline: 1px solid rgba(255,255,255,0.08);
    position: relative;
    width: 90%;
    max-width: 800px;
    border-radius: 18px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow:
        0 20px 60px rgba(0,0,0,0.6),
        inset 0 0 30px rgba(255,255,255,0.05);
    animation: fadeZoom 0.4s ease;
}

/* Parallax pseudo layer behind image */
.modal-img::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(30,40,60,0.35), rgba(20,25,35,0.35));
    backdrop-filter: blur(8px);
    z-index: -1; /* behind the image */
}

.lightbox-content::before {
    pointer-events: none;
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 18px;
    padding: 1px;
    background: linear-gradient(
        135deg,
        rgba(255,255,255,0.25),
        rgba(255,255,255,0.05)
    );
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}
/* Grid Layout */
.modal-grid {
    display: flex;
    flex-wrap: wrap;
}

/* Image */
.modal-img {
    flex: 1 1 40%;
    min-height: 300px;
}

.modal-img img {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Info */
.modal-info {
    flex: 1 1 60%;
    padding: 30px;
    color: #fff;
    background: linear-gradient(
        135deg,
        rgba(30, 40, 60, 0.65),
        rgba(20, 25, 35, 0.65)
    );
    backdrop-filter: blur(10px);
}

.modal-info h2 {
    font-weight: 700;
    margin-bottom: 10px;
}

.modal-info h5 {
    opacity: 0.9;
    margin-bottom: 15px;
}

.modal-info p {
    font-size: 14px;
    line-height: 1.6;
}

/* Button */


/* Close */
.lightbox-close {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 28px;
    color: #fff;
    cursor: pointer;
    z-index: 10;
}

/* Responsive */



/*** TEAM - MODERN CLIENT CARDS ***/
.team-item {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    background: #111;
    cursor: pointer;
    transition: transform .45s ease, box-shadow .45s ease;
}

.team-item .team-body { position: relative; overflow: hidden; }
.team-item .team-body img {
    width: 100%;
    display: block;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    transition: transform .8s cubic-bezier(.2,.8,.2,1), filter .6s ease;
}
.team-item:hover .team-body img {
    transform: scale(1.10);
    filter: brightness(.85);
}

.team-item:hover .team-body::before { opacity: 1; }
.team-item::before {
    content: "";
    position: absolute;
    top: -120%;
    left: -60%;
    width: 50%;
    height: 250%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
    transform: rotate(25deg);
    z-index: 3;
    transition: .8s;
}
.team-item:hover::before { left: 140%; }



.clients-grid .team-item { height: 100%; }



.product-preview-card:hover{transform:translateY(-8px);box-shadow:0 20px 40px rgba(0,0,0,.15)}
.product-preview-card img{width:100%;height:220px;object-fit:cover;transition:.6s}
.product-preview-card:hover img{transform:scale(1.08)}

@media(max-width:991px){.product-preview-card img{height:180px}}
@media(max-width:575px){.product-preview-card img{height:220px}}
.clients-grid .team-item .team-body img{width:100%;height:auto;object-fit:contain;aspect-ratio:auto!important}


/* ===== BLUE GLASS CLIENT CARD UPGRADE ===== */
.team-item:hover{
    transform: translateY(-10px);
    box-shadow:
        0 20px 45px rgba(0,0,0,.35),
        0 0 25px rgba(59,130,246,.25) !important;
}

.team-item .team-body::before{
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity .45s ease;
    z-index: 1;
    background: linear-gradient(
        to top,
        rgba(15,23,42,.88) 0%,
        rgba(30,64,175,.30) 45%,
        rgba(14,165,233,.12) 75%,
        transparent 100%
    ) !important;
}

.team-item .team-name{
    width: 100%;
    position: absolute;
    left: 15px;
    right: 15px;
    bottom: 15px;
    min-height: 55px;
    height: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 14px;
    z-index: 5;
    transition: transform .35s ease, background .35s ease;
    background: linear-gradient(
        135deg,
        rgba(182, 119, 68, 0.295),
        rgba(14, 164, 233, 0.322)
    ) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(147,197,253,.25) !important;
}

.team-item:hover .team-name{
    transform: translateY(-5px);
    background: linear-gradient(
        135deg,
        rgba(15, 177, 252, 0.514),
        rgba(253, 149, 64, 0.534)
    ) !important;
}

.team-item .team-name h6{
    transition: all .35s ease;
    font-weight: 700;
    letter-spacing: 1px;
    margin: 0;
    text-align: center;
    padding: 12px 10px;
    color:#dbeafe !important;
}

.team-item:hover .team-name h6{
    color:#93c5fd !important;
    text-shadow:0 0 12px rgba(147,197,253,.55) !important;
}
/* PRODUCT GRID GLASS TITLE EFFECT */
.product-preview-card{
    display:block;
    height:100%;
    background:#fff;
    border-radius:18px;
    overflow:hidden;
    text-decoration:none;
    box-shadow:0 5px 15px rgba(0,0,0,.08);
    transition:.35s;
    position:relative;
}
.product-preview-card h5{
    font-size:1rem;
    font-weight:600;
    position:absolute;
    left:12px;
    right:12px;
    bottom:12px;
    margin:0;
    padding:12px 14px;
    border-radius:14px;
    background:rgba(255,255,255,.10);
    backdrop-filter:blur(12px);
    -webkit-backdrop-filter:blur(12px);
    border:1px solid rgba(255,255,255,.12);
    color:#d6d6d6;
    text-align:center;
    transition:all .35s ease;
}
.product-preview-card:hover h5{
    color:#f4c76b;
    background:rgba(255,255,255,.14);
    text-shadow:0 0 10px rgba(244,199,107,.45);
}

















/*=========================================================
  CONTACT PAGE
=========================================================*/

.contact-section{
    position:relative;
    overflow:hidden;
    padding:90px 0;
    /* Background intentionally left transparent so the page uses the same
       body background as every other page (see body{} rule above).
       Previously this had its own dark gradient, which created a visible
       seam where the section ended and the contact form began. */
    background:transparent;
}

/* Background Glow */

.contact-section::before{
    content:"";
    position:absolute;
    width:650px;
    height:650px;
    left:-280px;
    top:-260px;
    border-radius:50%;
    background:rgba(30,144,255,.08);
    filter:blur(120px);
    animation:floatGlow 14s ease-in-out infinite;
}



@keyframes floatGlow{

    from{
        transform:translateY(0);
    }

    to{
        transform:translateY(-35px);
    }

}

/*============================
TITLE
=============================*/

.contact-title{

    position:relative;
    z-index:2;
    max-width:760px;
    margin:auto;

}

.contact-subtitle{

    display:inline-block;
    padding:8px 18px;
    margin-bottom: 16px;

    border-radius:30px;

    background:rgba(59,130,246,.15);

    border:1px solid rgba(96,165,250,.25);

    color:#93c5fd;

    font-weight:700;

    letter-spacing:2px;

    font-size:13px;

    text-transform:uppercase;

}

.contact-title h1{

    font-weight:700;

    font-size:3rem;

    margin-top:20px;

    margin-bottom:20px;

    color:#ffffff;

}

.contact-title p{

    font-size:18px;

    color:#c7d2fe;

    line-height:1.8;

}

/*============================
CARDS
=============================*/

.office-card{

    position:relative;
    overflow:hidden;

    padding:38px;

    border-radius:24px;

    background:rgba(18,25,40,.72);

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

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

    box-shadow:
        0 18px 45px rgba(0,0,0,.45),
        0 0 0 rgba(37,99,235,0);

    transition:.45s;

    z-index:2;
}



/* animated top line */



@keyframes scanLine{

    to{

        left:120%;

    }

}

.headquarters{

    border-left:5px solid #0d6efd;

}

.office-card h2,
.office-card h3{

    font-weight:700;

    margin-bottom:25px;

}

.office-card h2 i,
.office-card h3 i{

    color:#0d6efd;

    margin-right:10px;

}

/*============================
BADGES
=============================*/

.office-badge{

    position:absolute;

    top:18px;

    right:18px;

    padding:8px 16px;

    border-radius:40px;

    background:linear-gradient(135deg,#2563eb,#38bdf8);

    color:white;

    box-shadow:
        0 10px 25px rgba(37,99,235,.35);

    font-size:11px;

    font-weight:700;

    letter-spacing:1px;

}

.office-badge.orange{

    background:linear-gradient(135deg,#ff9800,#ffcc33);

}

.office-badge.blue{

    background:linear-gradient(135deg,#2563eb,#00bfff);

}

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









.office-info li a,
.office-info li span{
    flex:1;
    color:inherit;
    text-decoration:none;
    overflow-wrap:anywhere;
    word-break:break-word;
}


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

.office-card .btn{

    margin-top:15px;

    padding:12px 28px;

    font-weight:600;

    transition:.35s;

}

.office-card .btn-primary{

    box-shadow:0 10px 25px rgba(13,110,253,.25);

}

.office-card .btn:hover{

    transform:translateY(-3px);

}

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

.contact-social{

    position:relative;

    z-index:2;

}

.contact-social h5{

    font-weight:700;

}

.social-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:62px;

    height:62px;

    margin:10px;

    border-radius:50%;

    text-decoration:none;

    color:#fff;

    font-size:22px;

    background:linear-gradient(135deg,#0d6efd,#2aa5ff);

    transition:.35s;

    box-shadow:0 10px 25px rgba(13,110,253,.22);

}

.social-btn:hover{

    transform:translateY(-8px) rotate(10deg);

    box-shadow:0 18px 35px rgba(13,110,253,.35);

    color:#fff;

}

.social-btn:nth-child(3){

    background:linear-gradient(135deg,#1877F2,#3b82f6);

}

.social-btn:nth-child(4){

    background:linear-gradient(135deg,#0A66C2,#4ea1ff);

}

.social-btn:nth-child(5){

    background:linear-gradient(135deg,#ff0000,#ff5a5a);

}

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

@media (max-width:992px){

    .contact-title h1{

        font-size:2.3rem;

    }

    .office-card{

        padding:28px;

    }

}



.contact-section::before,
.contact-section::after{
    pointer-events:none;
}

.contact-section::after{
    content:"";
    position:absolute;
    width:550px;
    height:550px;
    right:-200px;
    bottom:-200px;
    border-radius:50%;
    background:rgba(255,170,0,.08);
    filter:blur(120px);
    opacity:.35;
    animation:floatGlow 18s ease-in-out infinite alternate,
              stars 12s linear infinite;
}

@keyframes stars{

    from{

        filter:blur(120px) brightness(1);

    }

    to{

        filter:blur(140px) brightness(1.25);

    }

}
/* ==========================================================
   Premium Gradient Button
========================================================== */

.btn-gradient{
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 13px 32px;
    border-radius: 50px;

    color:#fff;
    font-weight:600;
    letter-spacing:.4px;
    text-decoration:none;

    border:none;
    overflow:hidden;

    background:linear-gradient(
        135deg,
        #00C6FF 0%,
        #0072FF 40%,
        #3B4DFF 100%
    );

    box-shadow:
        0 8px 25px rgba(0,114,255,.35),
        inset 0 1px 1px rgba(255,255,255,.25);

    transition:.35s ease;
}

/* Glass Highlight */
.btn-gradient::before{
    content:"";
    position:absolute;
    top:0;
    left:-120%;

    width:70%;
    height:100%;

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

    transition:.8s;
}

/* Hover */
.btn-gradient:hover{
    color:#fff;

    transform:translateY(-4px);

    box-shadow:
        0 14px 35px rgba(0,114,255,.55),
        0 0 20px rgba(0,198,255,.35),
        inset 0 1px 1px rgba(255,255,255,.3);
}

.btn-gradient:hover::before{
    left:140%;
}

/* Active */
.btn-gradient:active{
    transform:translateY(-1px);
}

/* Icon Animation */
.btn-gradient i{
    transition:.35s;
}

.btn-gradient:hover i{
    transform:translateX(4px);
}


/* Hybrid scan glow */
.office-card::before{
    content:"";
    position:absolute;
    top:0;
    left:-220px;
    width:220px;
    height:4px;
    background:linear-gradient(90deg,transparent 0%,rgba(13,110,253,0) 15%,rgba(13,110,253,.75) 35%,rgba(255,255,255,.95) 50%,rgba(255,193,7,.75) 65%,rgba(255,193,7,0) 85%,transparent 100%);
    border-radius:50px;
    filter:blur(.6px) drop-shadow(0 0 8px rgba(13,110,253,.7)) drop-shadow(0 0 14px rgba(255,193,7,.35));
    animation:scanGlow 5s linear infinite;
    z-index:3;
}
@keyframes scanGlow{0%{left:-220px;}100%{left:130%;}}
.office-card:hover{
    transform:translateY(-12px);
    border-color:rgba(59,130,246,.35);
    box-shadow:0 22px 45px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.10),0 0 18px rgba(59,130,246,.18),0 0 35px rgba(255,193,7,.08);
}

/* Send Us a Message form: no gradient scan-line, flat card background only */
#contact-form-card::before{
    content:none;
    display:none;
}




/* ===== Transparent Glassmorphic Product Cards ===== */
.service-item{
    margin-top: 2rem;
    position:relative;
    overflow:hidden;
    background:rgba(255,255,255,.06) !important;
    backdrop-filter:blur(18px) saturate(180%);
    -webkit-backdrop-filter:blur(18px) saturate(180%);
    border-radius:20px;
    box-shadow:0 12px 35px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.08);
    transition:all .4s ease;
}
.service-item::before{
    content:"";
    position:absolute;
    inset:0;
    border-radius:inherit;
    pointer-events:none;
    background:linear-gradient(135deg,rgba(255,255,255,.14),rgba(255,255,255,.04) 35%,transparent 60%);
}
.service-item:hover{
    transform:translateY(-8px);
    background:rgba(255,255,255,.09) !important;
    border-color:rgba(90,170,255,.35);
    box-shadow:0 20px 45px rgba(0,0,0,.38),0 0 35px rgba(50,140,255,.18);
}
.service-item.service-item-left{
    background:linear-gradient(to right, rgba(255,255,255,.10), rgba(255,255,255,0) 75%) !important;
}
.service-item.service-item-right{
    background:linear-gradient(to left, rgba(255,255,255,.10), rgba(255,255,255,0) 75%) !important;
}
@media (max-width:767.98px){
    .service-item.service-item-left,
    .service-item.service-item-right {
        border-radius: 500px 500px 0 0;
        padding-bottom: 2rem;
        background: linear-gradient(to bottom, var(--bs-secondary), var(--bs-dark));
        text-align: center;

    }


    /* Center text */
    .profile-item .profile-text{
        text-align:center !important;
    }

    /* Center buttons */
    .profile-item .read-more-btn{
        display:inline-flex;
        align-items:center;
        justify-content:center;
    }

    /* Center image container */
    .profile-item .profile-img{
        display:flex;
        justify-content:center;
        align-items:center;
        text-align:center;
        padding:2rem !important;
    }

    /* Center the image itself */


    /* Optional: slightly reduce image size on phones */
    .profile-item .profile-img img{
    display:block;
    margin:0 auto;
    max-width:220px;
    width:100%;
}


 .service-item.service-item-left,
 .service-item.service-item-right{
    background:rgba(255,255,255,.06) !important;
    border-radius:24px;
    padding-bottom:2rem;
 }
}
/* ===========================================
   CONTACT PAGE RESPONSIVE LINK FIX
=========================================== */

/* Office card list */
.office-info{
    list-style:none;
    padding: 0;
    margin: 0;
}

.office-info li{
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 14px;
    line-height: 1.7;
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Icons */
.office-info li i{
    width:22px;
    flex-shrink:0;
    flex: 0 0 22px;
    margin-top: 4px;
    color: #4ea5ff;
}

/* Links */
.office-info li a{

    color: inherit;
    text-decoration: none;

    overflow-wrap: anywhere;
    word-break: break-word;

    white-space: normal;
}

/* Hover */

.office-info li a:hover{
    color: #6db7ff;
    text-decoration: underline;
}

/* Long email addresses */
.office-info li a[href^="mailto:"]{

    display: inline-block;
    max-width: 100%;

}

/* Phone numbers */
.office-info li a[href^="tel:"]{

    display: inline-block;

}

/* WhatsApp links */


/* Small devices */

@media (max-width:768px){


    .modal-img {
        height: 250px;
    }

    .modal-grid {
    flex-direction: column;
}

    .modal-img img {
        width: 100%;
        height: 100%;
        object-fit: cover;

        /* soften image into glass */
        filter: brightness(0.85) contrast(1.1);
    }


    .contact-title h1{

        font-size:2rem;

    }



    .office-badge{

        position:relative;

        display:inline-block;

        top:auto;

        right:auto;

        margin-bottom:18px;

    }



    .office-card{
    padding:28px 22px;
}

    .office-info li{

        font-size:15px;

        gap:10px;

    }

    .office-info li i{

        flex:0 0 20px;

    }

}

/*** Auto-scrolling Marquee (Products / Clients / Certifications) ***/
.marquee-stack {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.marquee-viewport {
    overflow: hidden;
    width: 100%;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
}

.marquee-track {
    display: flex;
    align-items: stretch;
    width: max-content;
    gap: 1.5rem;
    animation-name: marqueeLeft;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    will-change: transform;
}

.marquee-viewport:hover .marquee-track {
    animation-play-state: paused;
}

@keyframes marqueeLeft {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

.marquee-speed-slow { animation-duration: 45s; }
.marquee-speed-med  { animation-duration: 38s; }
.marquee-speed-fast { animation-duration: 22s; }

/* Product cards inside the marquee need a fixed width (no Bootstrap grid here) */
.marquee-track .product-preview-card {
    flex: 0 0 220px;
    width: 220px;
}

/* Client / certification cards inside the marquee */
.marquee-track .team-item {
    flex: 0 0 220px;
    width: 220px;
}

@media (max-width: 767.98px) {
    .marquee-track .product-preview-card,
    .marquee-track .team-item {
        flex-basis: 170px;
        width: 170px;
    }
    .marquee-speed-slow { animation-duration: 32s; }
    .marquee-speed-med  { animation-duration: 28s; }
    .marquee-speed-fast { animation-duration: 16s; }
}

@media (prefers-reduced-motion: reduce) {
    .marquee-track {
        animation: none;
    }
    .marquee-viewport {
        overflow-x: auto;
    }
}


/*** Brand color override: replace Bootstrap's default pink accent
     with a blue that matches the existing .btn-gradient family ***/
:root {
    --bs-primary: #0072FF;
}

a {
    color: #0072FF;
}
a:hover {
    color: #0058c9;
}

.btn-primary {
    color: #fff;
    background-color: #0072FF;
    border-color: #0072FF;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    color: #fff !important;
    background-color: #005ce6 !important;
    border-color: #005ce6 !important;
}
.btn-check:focus + .btn-primary,
.btn-primary:focus {
    box-shadow: 0 0 0 .25rem rgba(0, 114, 255, .4);
}

.form-control:focus,
.form-select:focus {
    border-color: #66a9ff;
    box-shadow: 0 0 0 .25rem rgba(0, 114, 255, .25);
}
.form-check-input:checked {
    background-color: #0072FF;
    border-color: #0072FF;
}
.form-check-input:focus {
    border-color: #66a9ff;
    box-shadow: 0 0 0 .25rem rgba(0, 114, 255, .25);
}

/* Footer social icons: gradient-filled circular buttons instead of
   plain pink-outlined icons, matching the site's .btn-gradient look */
.social-icon-btn {
    background: linear-gradient(135deg, #00C6FF 0%, #0072FF 40%, #3B4DFF 100%);
    border: none !important;
    color: #fff !important;
    box-shadow: 0 6px 18px rgba(0, 114, 255, .35), inset 0 1px 1px rgba(255, 255, 255, .25);
    transition: .35s ease;
}
.social-icon-btn:hover {
    color: #fff !important;
    transform: translateY(-4px);
    box-shadow: 0 10px 26px rgba(0, 114, 255, .5), 0 0 16px rgba(0, 198, 255, .35), inset 0 1px 1px rgba(255, 255, 255, .3);
}