/* Modern simplified stylesheet for Smart Engineering
   - Uses Inter and Raleway (loaded from Google Fonts in HTML)
   - Clean neutral palette with accent color
*/ 
:root{
  --bg:#ffffff;
  --text:#0f1720;
  --muted:#59626a;
  --accent:#0f7a88;
  --accent-2:#0b99a6;
  --card:#f6fbfb;
  --radius:10px;
} 
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  padding-top:68px;
  font-family:Inter, system-ui, -apple-system, "Open Sans", Roboto, "Helvetica Neue", Arial;
  color:var(--text);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
}
.container{max-width:1400px;margin:0 auto;padding:0 10px}
/* Header */
@keyframes slideDownHeader {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes shadowFadeIn {
  from {
    box-shadow: 0px 2px 15px rgba(0, 0, 0, 0);
  }
  to {
    box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
  }
}

.site-header{border-bottom:0.5px solid rgba(255, 255, 255, 0.03);background:var(--bg);position:fixed;top:0;left:0;right:0;z-index:40;animation:slideDownHeader 0.6s ease-out forwards;transition:all 0.3s ease}
.header-scrolled {
    box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
    animation: shadowFadeIn 1s ease-in-out forwards;
}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:14px 0;transition:all 0.3s ease}
.header-scrolled .header-inner{padding:8px 0;border-radius: 10px;width: 100%;}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--text);font-weight:700}
.brand img{height:40px;width:auto;display:block;transition:all 0.3s ease}
.header-scrolled .brand img{height:32px}
.nav{display:flex;gap:18px;align-items:center}
.nav-link{color:var(--muted);text-decoration:none;padding:8px 10px;border-radius:8px;font-weight:600}
.nav-link:hover{color:var(--text);background:#f3fbfb}
.cta{background:linear-gradient(90deg,var(--accent),var(--accent-2));color:#fff;padding:8px 14px;border-radius:8px;text-decoration:none;font-weight:700;transition:all 0.3s ease;position:relative;overflow:hidden;box-shadow:0 4px 12px rgba(15,122,136,0.2)}
.cta::before{content:'';position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.3),transparent);transition:left 0.5s ease}
.cta:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(15,122,136,0.3)}
.cta:hover::before{left:100%}
.mobile-toggle{display:none;background:transparent;border:0;font-size:20px}
@media(max-width:820px){
  .nav .nav-link{display:none}
  .nav .cta{display:none}
  .mobile-toggle{display:block}
}

/* Trust Badge Bar */
.trust-bar{background:#f6fbfb;padding:20px 0;border-bottom:0.5px solid rgba(15,23,36,0.03)}
.trust-badge{display:flex;align-items:center;justify-content:space-between;gap:40px}
.badge-section{display:flex;align-items:center;gap:16px;flex-shrink:0}
.iso-badge-img{width:90px;height:90px;object-fit:contain}
.cert-title{font-size:14px;font-weight:700;color:var(--accent)}
.cert-details-section{display:flex;flex-direction:column;gap:10px;flex:1}
.cert-row{display:flex;gap:12px;font-size:13px}
.cert-label{font-weight:600;color:var(--text);min-width:90px}
.cert-value{color:var(--muted)}
@media(max-width:900px){
  .trust-badge{flex-direction:column;gap:20px;text-align:center}
  .badge-section{justify-content:center;width:100%}
  .cert-details-section{gap:12px}
  .cert-row{justify-content:center}
  .iso-badge-img{width:75px;height:75px}
  .cert-title{font-size:13px}
}
@media(max-width:520px){
  .trust-bar{padding:16px 0}
  .badge-section{flex-direction:column}
  .cert-details-section{gap:8px}
  .cert-row{flex-direction:column;gap:4px}
  .cert-label{min-width:auto}
  .iso-badge-img{width:60px;height:60px}
  .cert-title{font-size:12px}
  .cert-row{font-size:12px}
}


.sbar{background:#ffffff;padding:0.01px 0;border-bottom:0.01px solid rgb(255, 255, 255)}

.back-to-top.active {
    visibility: visible;
    opacity: 1;
}

.back-to-top {
    background: var(--accent);
    color: #fff;
    border: none;
    width: 48px;
    height: 48px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(15, 122, 136, 0.2);
    position: fixed;
    visibility: hidden;
    opacity: 0;
    right: 15px;
    bottom: 15px;
    z-index: 996;
    border-radius: 4px;
    transition: all 0.4s;
}
.back-to-top:hover {
    background: var(--accent-2);
    transform: scale(1.1);
    box-shadow: 0 6px 16px rgba(15, 122, 136, 0.3);
}


.align-items-center {
    align-items: center !important;
}
.justify-content-center {
    justify-content: center !important;
}



/* Mobile menu open state */
@media(max-width:820px){
  .nav.nav-open{position:fixed;top:68px;right:20px;left:20px;background:#fff;padding:12px;border-radius:12px;box-shadow:0 14px 40px rgba(2,12,15,0.08);flex-direction:column;align-items:flex-end;gap:8px}
  .nav.nav-open .nav-link{display:block;background:transparent;color:var(--text);padding:10px 14px;border-radius:8px;width:100%;text-align:right;font-weight:600}
  .nav.nav-open .cta{display:inline-block;margin-top:6px}
}    



@keyframes slideInHero {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

#hero {
    width: 100%;
    height: 70vh;
    margin-top: 10px;   
    animation: slideInHero 1s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

#hero h1 {
    margin: 0 0 10px 0;
    font-size: 48px;
    font-weight: 700;
    line-height: 56px;
    color: black;
}

#hero h2 {
    color: #484848;
    margin-bottom: 50px;
    font-size: 24px;
}

#hero .btn-get-started {
    font-family: "Raleway", sans-serif;
    font-weight: 500;
    font-size: 16px;
    letter-spacing: 1px;
    display: inline-block;
    padding: 10px 30px;
    border-radius: 50px;
    transition: 0.5s;
    color: #3E84A8;
    border: 2px solid #3E84A8;
}

#hero .btn-get-started:hover {
    background: #3E84A8;
    color: #fff;
}

#hero .animated {
    animation: up-down 2s ease-in-out infinite alternate-reverse both;
    max-height: 400px;
    height: 100%;
}

@media (min-width: 1024px) {
    #hero {
        background-attachment: fixed;
    }
}

@media (max-width: 991px) {
    #hero {
        height: 100vh;
    }

    #hero .animated {
        -webkit-animation: none;
        animation: none;
    }

    #hero .hero-img {
        text-align: center;
    }

    #hero .hero-img img {
        width: 50%;
    }
}

@media (max-width: 768px) {
    #hero {
        margin-top: 20px;
    }

    #hero h1 {
        font-size: 28px;
        line-height: 36px;
    }

    #hero h2 {
        font-size: 18px;
        line-height: 24px;
        margin-bottom: 30px;
    }

    #hero .hero-img img {
        width: 70%;
    }
}

@media (max-width: 575px) {
    #hero .hero-img img {
        width: 80%;
    }
}

@-webkit-keyframes up-down {
    0% {
        transform: translateY(10px);
    }

    100% {
        transform: translateY(-10px);
    }
}

@keyframes up-down {
    0% {
        transform: translateY(10px);
    }

    100% {
        transform: translateY(-10px);
    }
}

/*--------------------------------------------------------------
# Clients
--------------------------------------------------------------*/
@keyframes slideInClients {
  from {
    opacity: 0;
    transform: scale(0.97);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.clients {
    background: #f6fbfb;
    padding: 10px 0;
    text-align: center;
    animation: slideInClients 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.client-id-images {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.clients .col-lg-2 {
    display: flex;
    align-items: center;
    justify-content: center;
}

.clients img {
    width: 60%;
    filter: grayscale(100);
    transition: all 0.4s ease-in-out;
    display: inline-block;
    padding: 10px 0;
}

.clients img:hover {
    filter: none;
    transform: scale(1.1);
}

@media (max-width: 768px) {
    .clients img {
        width: 40%;
    }
}

@media (max-width: 575px) {
    .clients img {
        width: 30%;
    }
}


/* Sections */
.section-title{text-align:center;margin-bottom:24px}
.section-title h2{margin:0;font-size:30px;letter-spacing:0.6px;display:flex;align-items:center;justify-content:center;gap:14px;position:relative;color: #243031;}
.section-title h2::before,.section-title h2::after{content:'';flex:1;max-width:120px;height:2px;background:linear-gradient(90deg,var(--accent),var(--accent) 50%,transparent);position:relative}
.section-title h2::before{background:linear-gradient(90deg,transparent,var(--accent) 50%,var(--accent))}
.section-title h2::after{background:linear-gradient(90deg,var(--accent) 50%,var(--accent),transparent)}
.section-title p{color:var(--muted);margin:8px 0 0}
.about{padding:64px 0}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:start}
.about-grid h3{margin:0 0 8px}
@media(max-width:720px){.about-grid{grid-template-columns:1fr}}
.counts{padding:64px 0}
.counts .image{max-width:350px;margin:0 auto}
.counts svg{max-width:100%;height:auto}
.counts .row{display:flex;align-items:center;flex-wrap:wrap}
@media(max-width:1200px){.counts .image{max-width:280px}}
@media(max-width:900px){.counts .image{max-width:250px}}
@media(max-width:600px){.counts{padding:48px 0}.counts .image{margin:0 auto 24px;max-width:100%}}
.purecounter{font-size:36px;font-weight:700;color:var(--accent);display:inline-block;animation:none}
.counts .aos-animate .purecounter{animation:countUp 3.2s ease-out forwards}
.services{padding:64px 0;border-top:0.5px solid rgba(15,23,36,0.03)}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{background:var(--card);padding:24px;border-radius:var(--radius);box-shadow:0 4px 18px rgba(12,30,34,0.04);cursor:pointer;transition:all 0.3s ease;border:1.5px solid transparent;position:relative}
.card:hover{transform:translateY(-6px);border-color:var(--accent);box-shadow:0 12px 32px rgba(15,122,136,0.15);background:rgba(15,122,136,0.08)}
.card-icon{width:48px;height:48px;background:rgba(15,122,136,0.12);border-radius:10px;display:flex;align-items:center;justify-content:center;margin-bottom:16px;transition:all 0.3s ease}
.card:hover .card-icon{background:linear-gradient(135deg,rgba(15,122,136,0.3),rgba(11,153,166,0.3));transform:scale(1.08)}
.card h4{margin:0 0 12px;font-size:15px;color:var(--text);font-weight:600}
.card p{margin:0;color:var(--muted);font-size:13px;line-height:1.5}
.card-details{max-height:0;overflow:hidden;transition:max-height 0.3s ease}
.card.active .card-details{max-height:300px;margin:12px 0}
.card-details ul{margin:0;padding:0 0 0 20px;list-style:disc}
.card-details li{color:var(--muted);font-size:13px;margin:6px 0;line-height:1.4}
.card-btn{background:var(--accent);color:#fff;border:none;padding:8px 16px;border-radius:6px;font-size:13px;font-weight:600;cursor:pointer;opacity:0;transition:all 0.3s ease;outline:none}
.card.active .card-btn{opacity:1}
.card-btn:hover{background:var(--accent-2);transform:translateX(2px)}
@media(max-width:900px){.cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.cards{grid-template-columns:1fr}}
.portfolio{padding:80px 0;border-top:0.5px solid rgba(15,23,36,0.03)}
.portfolio-item{background:transparent;border-radius:12px;overflow:visible;padding:12px;box-shadow:0 10px 36px rgba(12,30,34,0.06)}
.portfolio-item .portfolio-wrap{background:transparent;border-radius:12px;overflow:hidden}
.portfolio-item img{width:100%;display:block;height:186px;object-fit:cover;background:transparent}
.portfolio-item h4{margin:10px;padding:0 12px}

/* ===== PORTFOLIO OPTION 1: MASONRY GRID ===== */
.portfolio-option-1{padding:80px 0;border-top:0.5px solid rgba(15,23,36,0.03)}
.masonry-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px;grid-auto-rows:240px}
.masonry-item{border-radius:14px;overflow:hidden;box-shadow:0 10px 40px rgba(12,30,34,0.08);transition:all 0.4s cubic-bezier(0.34,1.56,0.64,1);cursor:pointer;position:relative}
.masonry-item:hover{transform:translateY(-12px);box-shadow:0 20px 60px rgba(12,30,34,0.15)}
.masonry-lg{grid-column:span 2;grid-row:span 2}
.masonry-wrap{width:100%;height:100%;overflow:hidden;border-radius:12px}
.masonry-wrap a{display:block;width:100%;height:100%}
.masonry-wrap img{width:100%;height:100%;object-fit:cover;transition:transform 0.5s ease}
.masonry-item:hover img{transform:scale(1.08)}
@media(max-width:900px){
  .masonry-grid{grid-auto-rows:200px}
  .masonry-lg{grid-column:span 1;grid-row:span 1}
}
@media(max-width:520px){
  .masonry-grid{grid-template-columns:repeat(2,1fr);grid-auto-rows:180px;gap:16px}
  .masonry-item{padding:8px}
}

/* ===== PORTFOLIO OPTION 2: ANIMATED HOVER CARDS ===== */
.portfolio-option-2{padding:80px 0;border-top:0.5px solid rgba(15,23,36,0.03)}
.portfolio-cards-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.portfolio-card{border-radius:14px;overflow:hidden;box-shadow:0 10px 40px rgba(12,30,34,0.08);transition:all 0.4s ease;cursor:pointer;position:relative;height:280px}
.portfolio-card:hover{transform:translateY(-8px);box-shadow:0 20px 60px rgba(12,30,34,0.15)}
.portfolio-card a{display:block;width:100%;height:100%;position:relative}
.portfolio-card img{width:100%;height:100%;object-fit:cover;transition:transform 0.4s ease}
.portfolio-card:hover img{transform:scale(1.06)}
.card-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(135deg,rgba(15,122,136,0.85),rgba(11,153,166,0.85));opacity:0;transition:opacity 0.4s ease;display:flex;align-items:center;justify-content:center}
.portfolio-card:hover .card-overlay{opacity:1}
.overlay-content{text-align:center;color:#fff}
.overlay-content h3{margin:0 0 12px;font-size:18px;font-weight:700;letter-spacing:-0.5px}
.overlay-content p{margin:0;font-size:14px;display:flex;align-items:center;justify-content:center;gap:6px}
.overlay-content i{font-size:16px}
@media(max-width:900px){
  .portfolio-cards-grid{grid-template-columns:repeat(2,1fr)}
  .portfolio-card{height:240px}
}
@media(max-width:520px){
  .portfolio-cards-grid{grid-template-columns:1fr}
  .portfolio-card{height:200px}
}

/* ===== PORTFOLIO OPTION 3: HERO SHOWCASE ===== */
.portfolio-option-3{padding:80px 0;border-top:0.5px solid rgba(15,23,36,0.03)}
.hero-showcase{display:grid;grid-template-columns:1fr;gap:32px;max-width:1100px;margin:0 auto;position:relative;min-height:789px}
.hero-featured{position:absolute;top:0;left:0;right:0;width:100%;height:675px;border-radius:16px;overflow:hidden;box-shadow:0 20px 80px rgba(12,30,34,0.15);transition:all 0.4s ease;background:#f6fbfb;z-index:10}
.hero-featured a{display:block;width:100%;height:100%}
.hero-featured img{width:100%;height:100%;object-fit:contain;object-position:center;transition:transform 0.4s ease;padding:20px}
.hero-featured:hover img{transform:scale(1.02)}
.thumbnails-carousel-container{display:flex;align-items:center;gap:16px;position:absolute;bottom:0;left:0;right:0;width:100%;height:114px;z-index:20;pointer-events:auto}
.carousel-arrow{background:var(--accent);color:#fff;border:none;width:48px;height:48px;border-radius:50%;cursor:pointer;transition:all 0.3s ease;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;box-shadow:0 4px 12px rgba(15,122,136,0.2)}
.carousel-arrow:hover{background:var(--accent-2);transform:scale(1.1);box-shadow:0 6px 16px rgba(15,122,136,0.3)}
.carousel-arrow-left{order:-1}
.hero-thumbnails-wrapper{flex:1;overflow:hidden;border-radius:12px;height:100%}
.hero-thumbnails{display:flex;gap:14px;transition:transform 0.5s ease;width:100%;padding:8px 0}
.thumbnail-item{border-radius:12px;overflow:hidden;height:100px;cursor:pointer;border:3px solid #e6f4f5;transition:all 0.3s ease;position:relative;background:#fff;flex-shrink:0;width:100px;min-width:100px}
.thumbnail-item:hover{border-color:var(--accent);transform:scale(1.08);box-shadow:0 4px 14px rgba(15,122,136,0.2)}
.thumbnail-item.active{border-color:var(--accent);box-shadow:0 0 0 4px rgba(15,122,136,0.25);transform:scale(1.05)}
.thumbnail-item img{width:100%;height:100%;object-fit:cover}
@media(max-width:900px){
  .hero-featured{height:400px}
  .hero-showcase{min-height:514px}
  .carousel-arrow{width:42px;height:42px;font-size:18px}
  .thumbnail-item{height:90px;width:90px;min-width:90px;border-width:2px}
}
@media(max-width:720px){
  .hero-featured{height:320px}
  .hero-showcase{min-height:434px}
  .carousel-arrow{width:40px;height:40px;font-size:16px}
  .thumbnail-item{height:80px;width:80px;min-width:80px;border-width:2px}
}
@media(max-width:480px){
  .hero-featured{height:240px}
  .hero-showcase{min-height:354px}
  .carousel-arrow{width:36px;height:36px;font-size:14px}
  .thumbnail-item{height:70px;width:70px;min-width:70px;border-width:2px}
  .thumbnails-carousel-container{gap:12px}
}

/* Default old styles still available */
.portfolio-container{display:grid;grid-template-columns:repeat(4,1fr);gap:30px}
@media(max-width:900px){.portfolio-container{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.portfolio-container{grid-template-columns:1fr}}
.team{padding:64px 0;background:#fbfdfd;border-top:0.5px solid rgba(15,23,36,0.03)}
.team .row{row-gap:50px}
.team-executives{background:linear-gradient(135deg,rgba(15,122,136,0.08),rgba(11,153,166,0.06));border-radius:16px;padding:48px 32px;margin-bottom:48px;border:1.5px solid rgba(15,122,136,0.12)}
.team-executives .row{row-gap:40px;}
.team-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:150px 24px}
.member{background:#fff;padding:20px;border-radius:10px;text-align:center;transition:all 0.3s ease;cursor:pointer;height:100%;display:flex;flex-direction:column}
.member:hover{transform:translateY(-8px);box-shadow:0 12px 32px rgba(15,122,136,0.15);border-color:var(--accent)}
.member-img{width:100%;height:240px;overflow:hidden;border-radius:10px;margin-bottom:12px;position:relative;min-height:400px;min-width:100%}
.member-img img,.img-team-fluid{width:100%;height:100%;object-fit:cover;object-position:center;display:block;border-radius:0;transition:transform 0.3s ease}
.member:hover .member-img img{transform:scale(1.05)}
.member h4{margin:10px 0 4px;font-size:15px;transition:color 0.3s ease}
.member span{display:block;color:var(--muted);font-size:13px;transition:color 0.3s ease}
@media(max-width:900px){.team-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.team-grid{grid-template-columns:1fr}}
.contact{padding-top:64px;padding-bottom: 16px;border-top:0.5px solid rgba(15,23,36,0.03)}
.contact .info{background:#fff;padding:18px;border-radius:10px;box-shadow:0 6px 20px rgba(12,30,34,0.04)}
.social-links{display:flex;flex-direction:row;gap:12px;margin-top:16px;justify-content:center}
.social-links a{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:10px;background:rgba(15,122,136,0.1);border:1.5px solid rgba(15,122,136,0.2);transition:all 0.3s ease;cursor:pointer}
.social-links a:hover{background:var(--accent);border-color:var(--accent);transform:translateY(-4px);box-shadow:0 6px 16px rgba(15,122,136,0.2)}
.social-links a svg{width:24px;height:24px}
form .form-group{margin-bottom:12px}
form input, form textarea{width:100%;padding:10px;border:1px solid #e6eef0;border-radius:8px}
form button{padding:10px 16px;border:0;background:var(--accent);color:#fff;border-radius:8px;transition:all 0.3s ease;cursor:pointer;font-weight:600;box-shadow:0 4px 12px rgba(15,122,136,0.2)}
form button:hover{background:var(--accent-2);transform:translateY(-2px);box-shadow:0 8px 24px rgba(15,122,136,0.3)}
form button:active{transform:translateY(0)}
.loading, .error-message, .sent-message{display:none}
.loading.d-block, .error-message.d-block, .sent-message.d-block{display:block}

.rowexe {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 0;
    display: flex;
    flex-wrap: wrap;
    margin-top: calc(-1 * var(--bs-gutter-y));
    margin-right: calc(-.5 * var(--bs-gutter-x));
    margin-left: calc(-.5 * var(--bs-gutter-x));
    justify-content: space-around;
}


.d-flexexe {
    display: contents;
}

.exect {display: contents;}

.member-img-ex{width:100%;height:240px;overflow:hidden;border-radius:10px;margin-bottom:12px;position:relative;min-height:400px;min-width:100%}
.member-img-ex img,.img-team-fluid{width:100%;height:100%;object-fit:cover;object-position:center;display:block;border-radius:0;transition:transform 0.3s ease}


/* Footer */
footer{padding:24px 0;text-align:center;color:var(--muted);font-size:14px;border-top:0.5px solid rgba(15,23,36,0.03)}

/* Quote icon used in testimonials */
.quote-icon{font-size:32px;color:var(--accent);line-height:0.6;margin:0 8px;vertical-align:middle;opacity:0.95}

.testimonials{padding-top:80px;padding-bottom:48px;border-top:0.5px solid rgba(15,23,36,0.03)}
/* Ensure testimonials section background matches page background (same as portfolio) */
.testimonials.section-bg{background:var(--bg)}
.testimonial-item{background:#fff;padding:28px;border-radius:12px;box-shadow:0 10px 36px rgba(12,30,34,0.06);margin:14px}
.testimonial-item h3{font-size:16px;margin:6px 0 10px}
.testimonials .swiper-pagination{padding-bottom:0px}
.testimonials .swiper-pagination .swiper-pagination-bullet{width:10px;height:10px;background:#e6f4f5;border:1px solid var(--accent)}

/* Make testimonial slides slightly separated from the section above */
.testimonials .section-title{margin-top:12px;margin-bottom:18px}

/* Features / Our Technologies - Card-based themed layout */
.features{padding:80px 0;border-top:0.5px solid rgba(15,23,36,0.03)}
.features .section-title{margin-bottom:48px}
.tech-cards{display:none;grid-template-columns:repeat(3,1fr);gap:28px}
.tech-card{display:none;background:var(--card);padding:32px;border-radius:var(--radius);box-shadow:0 4px 18px rgba(12,30,34,0.04);transition:all 0.3s ease;border:1.5px solid transparent}
.tech-card:hover{transform:translateY(-6px);border-color:var(--accent);box-shadow:0 12px 32px rgba(15,122,136,0.15);background:rgba(15,122,136,0.08)}
.tech-card-header{display:flex;align-items:center;gap:14px;margin-bottom:20px}
.tech-card-header svg{width:32px;height:32px;flex-shrink:0}
.tech-card-header h3{margin:0;font-size:16px;color:var(--text);font-weight:600}
.tech-list{margin:0;padding:0 0 0 20px;list-style:disc}
.tech-list li{color:var(--muted);font-size:14px;margin:10px 0;line-height:1.5}
@media(max-width:900px){.tech-cards{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.tech-cards{grid-template-columns:1fr}}
@media(max-width:520px){.tech-card{padding:24px}}
@media(max-width:520px){.tech-card-header{gap:12px}}
@media(max-width:520px){.tech-card-header h3{font-size:15px}}
@media(max-width:520px){.tech-list li{font-size:13px}}



/* Gallery Section - Clean masonry grid with subtle hover effects */


/* Portfolio clean photos: hide any leftover overlays text but keep links visible */
.portfolio-info h4{display:none}

/* FAQ Section - Modern Accordion Design */
.faq{padding:64px 0;border-top:0.5px solid rgba(15,23,36,0.03)}
.faq-container{max-width:800px;margin:0 auto}
.faq-card{margin-bottom:16px;border-radius:12px;background:#fff;border:1.5px solid #e6f4f5;overflow:hidden;transition:all 0.3s ease}
.faq-card:hover{border-color:var(--accent);box-shadow:0 8px 24px rgba(15,122,136,0.12)}
.faq-question{width:100%;background:transparent;border:none;padding:20px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;text-align:left;font-family:Inter, sans-serif;font-weight:600;transition:all 0.3s ease}
.faq-question:hover{background:#f9fcfd}
.faq-question-content{display:flex;align-items:center;gap:14px;flex:1}
.faq-question-content svg{flex-shrink:0}
.faq-question-content h4{margin:0;font-size:16px;color:var(--text);font-weight:600}
.faq-toggle{transition:transform 0.3s ease;flex-shrink:0}
.faq-card.active .faq-toggle{transform:rotate(180deg)}
.faq-answer{max-height:0;overflow:hidden;transition:max-height 0.3s ease}

/* ====================================================== */
/* TRUST BADGE SECTION - REDESIGNED WITH 3 OPTIONS      */
/* ====================================================== */

#trust-badge-section{padding-top: 10px;padding-bottom: 64px;border:none;background:transparent}


/* ========== OPTION 3: Horizontal Certification Banner ========== */
.trust-badge-redesigned.option-3 .cert-banner{background:#fff;border:2px solid #e6f4f5;border-radius:16px;padding:32px 40px;display:flex;align-items:center;gap:32px;box-shadow:0 8px 24px rgba(12,30,34,0.06);transition:all 0.3s ease}
.option-3 .cert-banner:hover{border-color:var(--accent);box-shadow:0 12px 36px rgba(15,122,136,0.12);transform:translateY(-4px)}
.option-3 .banner-logo{flex-shrink:0;display:flex;align-items:center;justify-content:center}
.option-3 .mlk-banner-logo{width:300px;height:auto;filter:drop-shadow(0 4px 8px rgba(15,122,136,0.15));transition:all 0.3s ease}
.option-3 .cert-banner:hover .mlk-banner-logo{filter:drop-shadow(0 8px 16px rgba(15,122,136,0.25))}
.option-3 .banner-divider{width:2px;height:120px;background:linear-gradient(180deg,transparent,var(--accent),transparent);flex-shrink:0}
.option-3 .banner-info{flex:1}
.option-3 .certification-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.option-3 .cert-item{text-align:left;display:flex;gap:12px;align-items:flex-start}
.option-3 .cert-icon{width:40px;height:40px;background:linear-gradient(135deg,rgba(15,122,136,0.15),rgba(11,153,166,0.15));border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;transition:all 0.3s ease}
.option-3 .cert-item:hover .cert-icon{background:linear-gradient(135deg,rgba(15,122,136,0.3),rgba(11,153,166,0.3));transform:scale(1.1)}
.option-3 .cert-text strong{display:block;color:var(--text);font-weight:700;margin-bottom:4px;font-size:15px}
.option-3 .cert-text span{display:block;color:var(--muted);font-size:13px;line-height:1.4}

/* ========== Animations ========== */
@keyframes badgeGlow{
  0%{opacity:0;transform:scale(0.8)}
  50%{opacity:1;transform:scale(1.2)}
  100%{opacity:0;transform:scale(0.8)}
}
@keyframes badgeGlowActive{
  0%{opacity:0.8;transform:scale(0.9)}
  50%{opacity:1;transform:scale(1.3)}
  100%{opacity:0.8;transform:scale(0.9)}
}

/* ========== Responsive ========== */
@media(max-width:900px){
  #trust-badge-section{padding:16px 0}
  .option-1 .badge-logo-container{width:140px;height:140px}
  .option-1 .mlk-logo{width:110px}
  .option-1 .glowing-badge{width:140px;height:140px}
  .option-1 .trust-badge-content{gap:24px}
  .option-1 .badge-info{max-width:100%;text-align:center}
  .option-2 .trust-badge-card{max-width:100%}
  .option-3 .cert-banner{padding:28px 30px;flex-direction:column;gap:20px}
  .option-3 .banner-divider{width:100%;height:2px}
  .option-3 .certification-grid{grid-template-columns:1fr}
}
@media(max-width:720px){
  #trust-badge-section{padding:12px 0}
  .option-1 .badge-logo-container,.option-1 .glowing-badge{width:120px;height:120px}
  .option-1 .mlk-logo{width:90px}
  .option-1 .badge-info h3{font-size:18px}
  .option-1 .badge-info p{font-size:14px}
  .option-2 .badge-card-inner{height:280px}
  .option-2 .card-front,.option-2 .card-back{padding:24px}
  .option-2 .mlk-logo-large{width:100px}
  .option-3 .cert-banner{padding:22px 26px}
  .option-3 .mlk-banner-logo{width:240px}
  .option-3 .certification-grid{gap:16px;grid-template-columns:1fr}
  .option-3 .cert-item{gap:10px}
  .option-3 .cert-icon{width:36px;height:36px;font-size:16px}
}
@media(max-width:480px){
  .option-1 .trust-badge-content{flex-direction:column;gap:16px}
  .option-1 .badge-logo-container,.option-1 .glowing-badge{width:100px;height:100px}
  .option-1 .mlk-logo{width:75px}
  .option-3 .cert-banner{padding:18px 20px}
  .option-3 .mlk-banner-logo{width:210px}
  .option-3 .cert-item strong{font-size:14px}
  .option-3 .cert-text span{font-size:12px}
}
.faq-card.active .faq-answer{max-height:500px;padding:0 20px 20px;border-top:1.5px solid #e6f4f5}
.faq-answer p{margin:0;color:var(--muted);font-size:15px;line-height:1.6}
@media(max-width:720px){
  .faq-question{padding:16px}
  .faq-question-content h4{font-size:14px}
  .faq-card.active .faq-answer{padding:0 16px 16px}
}

@keyframes countUp {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.portfolio #portfolio-flters {
    padding: 0;
    margin: 0 auto 20px auto;
    list-style: none;
    text-align: center;
}

.portfolio #portfolio-flters li {
    cursor: pointer;
    display: inline-block;
    padding: 8px 15px 10px 15px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    text-transform: uppercase;
    color: #222222;
    margin-bottom: 5px;
    transition: all 0.3s ease-in-out;
    border-radius: 3px;
}

.portfolio #portfolio-flters li:hover,
.portfolio #portfolio-flters li.filter-active {
    color: #fff;
    background: #3E84A8;
}

.portfolio #portfolio-flters li:last-child {
    margin-right: 0;
}