/* ================= GLOBAL ============== ================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
  scroll-behavior:smooth;
}


body{
    font-family:Arial,sans-serif;
     background:
    linear-gradient(180deg,#050816,#0b1430);
}



/* =================   ROOT VARIABLES ========================================= */
:root{

   /* FOR NAVBAR LOGO*/
    --logo-glow1:#00ffff;
    --logo-glow2:#00bfff;
    --logo-glow3:#0066ff;
    --logo-glow4:#7a5cff;

    --logo-glow-strength:1px;

/*SLIDER PART */

    /* TEXT SIZE */
    --am-h1-size:72px;
    --am-h3-size:30px;
    --am-text-size:18px;
    /* TEXT WEIGHT */
      --am-h1-weight: 900;
    --am-h3-weight: 500;

    /* IMAGE SIZE */
    --am-image-width:545px;

    /* GLOW for text*/

   /* GLOW for image*/
    --am-glow:45px;
     --img-white-glow: 45px; /* independent white glow control */
    
 
    /* FLOAT */
    --am-float:18px;

    /* BUTTON */
    --am-btn-color:#ff8800;

  /* TEXT GLOW */
--am-white-glow: 40px;

 /* GLOW VOLUME */
     --glow-strength:10px;

 /* display page image size increase/deccrease  */
 --display-page-image: 0.9; /* default 90% image size */

 /* EMAIL AND PHONE SIGNAL */
    --signal-size: 80px;
    --beam-length: 2.8;
  --slider-button-color: linear-gradient(135deg, #ff7a00, #ffb347);

}

/* GLOBAL WEBSITE FONT */

/* SPECIAL TITLES */

.pg-section-title{
    font-family:'Oswald',sans-serif;
}

/* ================= GLOBAL ADDITONAL lazy image load   ================= */

/* PERFORMANCE HINT */
.regular-product-card,
.products-card,
.product-video-card{
    will-change: transform;
}

/* ACCESSIBILITY */
@media (prefers-reduced-motion: reduce){
  *{
    animation:none !important;
    transition:none !important;
  }
}

/* SCROLL REVEAL */
.lazy-item{
    opacity:0;
    transform:translateY(30px);
    transition:0.5s ease;
}

.lazy-item.show{
    opacity:1;
    transform:translateY(0);
}




/* ================= BODY FLASH CSS ================= */



/* ================= PAGE (CINEMATIC START STATE) ================= */

#page {
    opacity: 0;
    transform: scale(1.45) translateY(30px);
    filter: blur(22px);
    will-change: transform, opacity, filter;
}

/* ================= FINAL REVEAL (IMPROVED CAMERA FEEL) ================= */

body.page-ready #page {
    transition: transform 1.8s cubic-bezier(.16, 1, .3, 1),
                opacity 1.8s ease,
                filter 1.8s ease;

    opacity: 1;
    transform: scale(1) translateY(0);
    filter: blur(0);
}

/* ================= IMAGE INSIDE PAGE (SMOOTHER ENTRY) ================= */


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

#flash {
    position: fixed;
    inset: 0;
    z-index: 999999;
    pointer-events: none;
}

/* FLASH BURST */
.flash {
    position: absolute;
    inset: 0;
    background: white;
    animation: flash 0.9s ease-out forwards;
}

@keyframes flash {
    0% { opacity: 0; }
    8% { opacity: 1; }
    100% { opacity: 0; }
}

/* FIREBALL (MORE DEPTH) */
.fireball {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    transform: translate(-50%,-50%) scale(.08);
    background: radial-gradient(circle,
        #fff 0%,
        #ffe08a 15%,
        #ff9d00 35%,
        #ff3d00 65%,
        transparent 100%);
    animation: fire 2.2s ease-out forwards;
}

@keyframes fire {
    0% { opacity: 0; transform: translate(-50%,-50%) scale(.08); }
    12% { opacity: 1; }
    100% { opacity: 0; transform: translate(-50%,-50%) scale(22); }
}

/* SHOCKWAVE (STRONGER IMPACT) */
.shock {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    border: 5px solid rgba(255,255,255,.9);
    transform: translate(-50%,-50%) scale(.1);
    animation: shock 1.8s ease-out forwards;
}

@keyframes shock {
    0% { opacity: 1; transform: translate(-50%,-50%) scale(.1); }
    100% { opacity: 0; transform: translate(-50%,-50%) scale(45); }
}

/* SMOKE LAYERS */
.smoke1,
.smoke2 {
    position: absolute;
    left: 50%;
    top: 50%;
    border-radius: 50%;
    transform: translate(-50%,-50%);
}

.smoke1 {
    width: 200vmax;
    height: 200vmax;
    background: radial-gradient(circle,rgba(70,70,70,.9),transparent);
    animation: smoke1 4.5s ease-out forwards;
}

.smoke2 {
    width: 170vmax;
    height: 170vmax;
    background: radial-gradient(circle,rgba(120,120,120,.7),transparent);
    animation: smoke2 4.5s ease-out forwards;
}

@keyframes smoke1 {
    0% { opacity: 0; transform: translate(-50%,-50%) scale(.05); }
    35% { opacity: .9; }
    100% { opacity: 0; transform: translate(-50%,-50%) scale(1.6); }
}

@keyframes smoke2 {
    0% { opacity: 0; transform: translate(-50%,-50%) scale(.05); }
    45% { opacity: .8; }
    100% { opacity: 0; transform: translate(-50%,-50%) scale(1.8); }
}

/* FLASH EXIT */
.hide {
    opacity: 0;
    transition: opacity 0.9s ease;
}



/* ================= NAVBAR SRTART HERE ========BODY AND ROOT VARIABLE AS GLOBAL SO REPLACE FROM HERE TO TOP=============== */



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

.sticky-header{

    position:fixed;
    top:0;
    left:0;

    width:100%;

    z-index:99999;

    /* animated navy gradient */

    background:linear-gradient(
        120deg,
        #050816,
        #0a1a3a,
        #1a4cff,
        #00c6ff,
        #0a1a3a,
        #050816
    );

    background-size:300% 300%;

    animation:
    gradientFlow 8s ease infinite;

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

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

    transition:
    transform 0.1s ease,
    opacity 0.1s ease;

    opacity:1;
}

/* navbar hide */

.sticky-header.hide{

    transform:translateY(-100%);
    opacity:0;
}

/* animated gradient */

@keyframes gradientFlow{

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

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

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

/* ================= NAV CONTAINER ================= */

.nav-container{

    width:96%;
    margin:auto;

    display:grid;

    grid-template-columns:
    auto
    1fr
    auto;

    align-items:center;

    padding:0 10px;
}

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

.logo-area{

    display:flex;
    align-items:center;
    width:262px;
    position:relative;   /* ADD THIS */
}

.logo-area img{

    height:45px;
    width:auto;
}

/* =====================================  RANDOM LOGO GLOW SYSTEM ============================== */

.random-logo-glow{

    position:relative;

    display:inline-block;

    animation:
    amLogoFloat 5s ease-in-out infinite;

    transition:
    filter 2s ease-in-out;

    filter:

    drop-shadow(
    0 0 calc(var(--logo-glow-strength) * 0.1)
    var(--logo-glow1))

    drop-shadow(
    0 0 calc(var(--logo-glow-strength) * 0.3)
    var(--logo-glow2))

    drop-shadow(
    0 0 calc(var(--logo-glow-strength) * 0.6)
    var(--logo-glow3))

    drop-shadow(
    0 0 var(--logo-glow-strength)
    var(--logo-glow4));

}

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

@keyframes amLogoFloat{

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

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

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

}

/* ===========================   SLOGAN ================================ */

.logo-slogan{

    position:absolute;

    left:50%;

    bottom:-12px;

    transform:translateX(-50%);

    font-size:10px;

    font-weight:500;

    letter-spacing:2px;

   bottom:-5px !important;
    white-space:nowrap;

    color:#fbef55;

    opacity:0;

    pointer-events:none;

    animation:precisionText 4s ease-in-out infinite;
}


/* =================================   SMOOTH APPEAR / DISAPPEAR ========================= */

@keyframes precisionText{

    0%{
        opacity:0;
        transform:translateX(-50%) translateY(4px);
        filter:blur(4px);
    }

    20%{
        opacity:1;
        transform:translateX(-50%) translateY(0);
        filter:blur(0);
    }

    80%{
        opacity:1;
        transform:translateX(-50%) translateY(0);
        filter:blur(0);
    }

    100%{
        opacity:0;
        transform:translateX(-50%) translateY(-4px);
        filter:blur(4px);
    }
}

/* ================= CENTER FLAG ================= */

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

.flag-center img{
    border-radius:4px;
    box-shadow:0 0 20px rgba(255,255,255,.18);
    display:block;
    object-fit:contain;
}
.flag-center .flag{
    width:66px;
    height:42px;
}

.flag-center .welcome{
    width:100px;
    height:38px;
}

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

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

.navigation{

    list-style:none;

    display:flex;
    align-items:stretch;

    height:60px;

    position:relative;

    overflow:visible;
}

.navigation-wrapper{

    position:relative;
}

/* indicator */

.nav-indicator{

    position:absolute;
    top:0;
    left:0;

    height:60px;
    width:0;

    background:#fbef55;

    border-radius:0;

    pointer-events:none;

    z-index:0;

    opacity:0;

    transform:translate3d(0,0,0);

    will-change: transform, width, opacity;

    backface-visibility:hidden;

    -webkit-backface-visibility:hidden;

    transition:
        transform .35s cubic-bezier(.22,.61,.36,1),
        width .35s cubic-bezier(.22,.61,.36,1),
        opacity .25s ease;

   }

/* keep links above indicator */

.navigation li{

    position:relative;

    z-index:1;
}

/*=== END UPGRADE LI========= */


/* main menu */

.navigation > li > a{

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

    height:60px;

    padding:0 22px;

    color:#fff;

    text-decoration:none;

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

    transition:.3s;

    position:relative;
 z-index: 2;   /* Add this */
}

/* hover */

.navigation > li:hover > a{

    color:#192d66;
}

/* active */

.navigation > li.active > a{

    color:#192d66;
}

/* Submenu item active  */
.navigation ul li.active > a {
    color: #FFD700;
    font-weight: 700;
    background: rgba(255, 215, 0, 0.1); /* optional */
    border-left: 5px solid #FF4433;
    padding-left: 12px;
}

.navigation > li.active.active-glow > a{

    color:#fff36a;

    text-shadow:
        0 0 3px rgba(255,243,106,.7),
        0 0 5px rgba(255,243,106,.4);

transition:
    color .08s linear,
    text-shadow .15s ease;
}

/* underline */

.navigation > li > a::after{

    content:'';

    position:absolute;

    left:50%;
    bottom:10px;

    width:0;
    height:3px;

    background:orange;

    transform:translateX(-50%);

    transition:.35s;
}

.navigation > li:hover > a::after,
.navigation > li.active > a::after{

    width:70%;
}

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

.navigation li ul{

    position:absolute;

    top:100%;
    left:0;

    min-width:240px;

    background:#1f3779;

    list-style:none;

    padding:0;
    margin:0;

    opacity:0;
    visibility:hidden;

    transform:translateY(15px);

    transition:.35s;
}

.navigation li:hover > ul{
    opacity:1;
    visibility:visible;
    transform:translateY(0);
}

/* dropdown links */

.navigation li ul li a{

    display:block;

    padding:15px 18px;

    color:#fff;

    text-decoration:none;

    font-weight:bold;

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

    transition:.35s;
}

/* dropdown hover */

.navigation li ul li a:hover{

    background:orange;

    color:#fff;

    padding-left:28px;
}

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

.mobile-toggle{

    display:none;

    font-size:30px;

    color:#fff;

    cursor:pointer;

    width:50px;

    justify-content:flex-end;
}


/* ======================================================
  FOOTER CSS START HERE 
====================================================== */
/* ================= FOOTER ================= */

.ft-main-footer{
    position:relative;

    background:
    linear-gradient(
        to bottom,
        #0c1422,
        #050910
    );

    padding-top:180px;

    overflow:hidden;
}

/* ================= FEATURE MENU WRAPPER ================= */

.ft-feature-wrapper{
    position:absolute;

    top:-110px;
    left:50%;

    transform:translateX(-50%);

    width:90%;

    z-index:20;
}

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

.ft-feature-title{
    text-align:center;
    margin-bottom:35px;
}

.ft-feature-title h2{
    font-size:48px;
    font-weight:900;
    color:#fff;
    letter-spacing:2px;
}

.ft-feature-title span{
    color:#ff7b00;
}

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

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

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

.ft-fold-card{
    perspective:1200px;
}

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

.ft-card-head{
    position:relative;

    background:
    linear-gradient(
        135deg,
        #ff7b00,
        #ff9a00
    );

    border-radius:22px 22px 0 0;

    padding:35px 20px;

    text-align:center;

    transform-origin:top;

    transition:0.45s;

    z-index:5;

    box-shadow:
    0 15px 35px rgba(255,123,0,0.28);
}

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

.ft-head-icon{
    width:82px;
    height:82px;

    margin:auto auto 18px;

    border-radius:50%;

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

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

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

.ft-head-icon svg{
    width:38px;
    height:38px;
    fill:#fff;
}

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

.ft-card-head h3{
    font-size:30px;
    font-weight:800;
    color:#fff;
}

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

.ft-card-body{
    background:#121c2b;

    border:
    2px solid rgba(255,123,0,0.5);

    border-top:none;

    border-radius:0 0 22px 22px;

    transform:
    rotateX(-90deg);

    transform-origin:top;

    opacity:0;

    height:0;

    overflow:hidden;

    transition:0.55s;

    padding:0 30px;
}

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

.ft-fold-card:hover .ft-card-body{

    transform:
    rotateX(0deg);

    opacity:1;

    height:260px;

    padding:30px;
}

.ft-fold-card:hover .ft-card-head{
    transform:translateY(-4px);
}

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

.ft-card-body p{
    color:#d2d2d2;
    line-height:1.9;
    margin-bottom:20px;
    font-size:15px;
}

.ft-card-body a{
    display:block;

    color:#ff9a00;

    text-decoration:none;

    margin-bottom:12px;

    transition:0.3s;

    font-weight:600;
}

.ft-card-body a:hover{
    color:#fff;
    transform:translateX(6px);
}

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

.ft-footer-container{
    width:90%;

    margin:auto;

    display:grid;

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

    gap:40px;

    padding:
    140px 0 40px;
}

/* ================= FOOTER COLUMN ================= */

.ft-column h3{
    position:relative;

    color:#fff;

    font-size:26px;

    margin-bottom:30px;

    padding-bottom:14px;
}

.ft-column h3::after{
    content:'';

    position:absolute;

    left:0;
    bottom:0;

    width:70px;
    height:2px;

    background:#ff7b00;
}

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

.ft-address-item{
    display:flex;

    align-items:flex-start;

    gap:15px;

    margin-bottom:24px;
}

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

.ft-address-icon{
    width:48px;
    height:48px;

    min-width:48px;

    border-radius:14px;

    background:
    rgba(255,123,0,0.12);

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

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

.ft-address-icon svg{
    width:22px;
    height:22px;
    fill:#ff7b00;
}

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

.ft-address-text{
    color:#d7d7d7;
    line-height:1.8;
    font-size:15px;
}

.ft-address-text a{
    color:#d7d7d7;
    text-decoration:none;
    transition:0.3s;
}

.ft-address-text a:hover{
    color:#ff9a00;
}

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

.ft-links{
    list-style:none;
}

.ft-links li{
    margin-bottom:18px;
}

.ft-links a{
    position:relative;

    color:#d5d5d5;

    text-decoration:none;

    padding-left:18px;

    transition:0.3s;
}

.ft-links a::before{
    content:'›';

    position:absolute;

    left:0;

    color:#ff7b00;

    font-size:20px;
}

.ft-links a:hover{
    color:#ff9a00;
    padding-left:24px;
}

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

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

.ft-social-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:16px;
}

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

.ft-social-btn{
    height:62px;
    border-radius:18px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,123,0,0.18);
    display:flex;
    align-items:center;
    justify-content:center;
    transition:0.35s;
    cursor:pointer;
}

/* ICON */
.ft-social-btn svg{
    width:26px;
    height:26px;
    fill: currentColor;
}

/* ================= BASE COLOR ================= */
.ft-social-btn{
    color:#fff;
}

/* ================= REMOVE OLD ORANGE HOVER (IMPORTANT FIX) ================= */
.ft-social-btn:hover{
    transform:translateY(-6px);
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,123,0,0.25);
    box-shadow:none;
}

/* ================= BRAND HOVER COLORS ================= */

/* WhatsApp */
.ft-social-btn[href*="wa.me"]:hover{
    color:#ffffff;
    background:#25D366;
}

/* Facebook */
.ft-social-btn[href*="facebook"]:hover{
    color:#ffffff;
    background:#1877F2;
}

/* YouTube */
.ft-social-btn[href*="youtube"]:hover{
    color:#ffffff;
    background:#FF0000;
}

/* Instagram */
.ft-social-btn[href*="instagram"]:hover{
    color:#ffffff;
    background:linear-gradient(45deg,#feda75,#fa7e1e,#d62976,#962fbf,#4f5bd5);
}

/* LinkedIn */
.ft-social-btn[href*="linkedin"]:hover{
    color:#ffffff;
    background:#0A66C2;
}

/* X (Twitter) */
.ft-social-btn[href*="x.com"]:hover,
.ft-social-btn[href*="twitter"]:hover{
    color:#ffffff;
    background:#000000;
}

/* ================= NEWSLETTER ================= */

.ft-news-form{
    display:flex;
    flex-direction:column;
    gap:16px;
}

/* ================= INPUT ================= */

.ft-news-input{
    width:100%;
    height:56px;

    border:none;
    outline:none;

    border-radius:16px;

    padding:0 20px;

    background:#172233;

    color:#fff;

    border:
    2px solid transparent;

    transition:0.35s;
}

.ft-news-input:focus{
    border-color:#ff7b00;
}

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

.ft-news-btn{
    height:56px;

    border:none;

    border-radius:16px;

    background:
    linear-gradient(
        135deg,
        #ff7b00,
        #ff9a00
    );

    color:#fff;

    font-size:16px;
    font-weight:700;

    cursor:pointer;

    transition:0.35s;
}

.ft-news-btn:hover{
    transform:translateY(-4px);
}

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

.ft-login-btn{
    width:100%;
    height:56px;

    margin-top:18px;

    border-radius:16px;

    background:transparent;

    border:2px solid #ff7b00;

    color:#fff;

    font-size:16px;
    font-weight:700;

    cursor:pointer;

    transition:0.35s;

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

    text-decoration:none;

    box-sizing:border-box;
}

.ft-login-btn:hover{
    background:#ff7b00;
}

/* ================= FOOT NOTE ================= */

.ft-footer-bottom{
    border-top:
    2px solid #ff7b00;

    background:#04070c;

    text-align:center;

    padding:28px 15px;
}

.ft-footer-bottom p{
    color:#bdbdbd;

    letter-spacing:1px;

    font-size:15px;
}


/* ======================================================
  END HERE FOOTER CSS AND INDEX PAGE END HERE
====================================================== */

/* ================= WHEN TROUGH EXCEPTION BY THE FORM ================= */

.newsletter-header{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:5px;
}

/* keep message stable */
.form-exception{
    display:none;
    margin-top:6px;
    font-weight:600;
    font-size:20px;
    white-space:nowrap;
}

.form-exception.show{
    display:inline-block;
}

.form-exception.success{
    color:lime;
}

.form-exception.error{
    color:#EE4B2B;
}

.loading{
    opacity:.7;
    pointer-events:none;
}

/* ================= EXCEPTION MESSAGE ================= */
#msg{
    margin-top: 10px;
    text-align: center;
    font-weight: bold;
    font-size: 13px;
}

#msg.success{ color: #00e676; }
#msg.error{ color: #ff1744; }


/* ======================================================
  ADDITIONAL FEATURES JS CLASS class="typewriter" data-text="
================================================================ */
.typewriter {
     font-size: clamp(20px, 3vw, 42px);
    font-family:'Orbitron';
    margin-bottom:40px;
    font-weight: 700;
    color: #FDDA0D; /* Cadmium Yellow */
    text-shadow: 0 0 10px rgba(255, 204, 102, 0.4);
    white-space: nowrap;
}

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

#tdb-btn{

    position:fixed;
    right:25px;
    bottom:25px;

    width:55px;
    height:55px;

    border:none;
    border-radius:50%;

 background: linear-gradient(135deg,#ff3b30,#d50000);
 
    color:#fff;

       font-size:32px;
    font-weight:800;
    line-height:1;
    cursor:pointer;

    z-index:9999;

    opacity:0;
    visibility:hidden;

    transform:translateY(-800px) scale(.5);
}

/* ================= SHOW STATE ================= */

#tdb-btn.show{

    visibility:visible;

    animation:tdbIn 1s ease forwards;
}

/* ================= HIDE STATE ================= */

#tdb-btn.hide{

    visibility:visible;

    animation:tdbOut 1s ease forwards;
}

#tdb-btn:hover{
         background:linear-gradient(
        135deg,
        #00c6ff 0%,
        #0095ff 50%,
        #0066ff 100%
    );
    color:#ffffff;

    transform: scale(1.1);
}

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

@keyframes tdbIn{

    0%{
        opacity:0;
        transform:translateY(-800px) scale(.5);
    }

    100%{
        opacity:1;
        transform:translateY(0) scale(1);
    }

}

@keyframes tdbOut{

    0%{
        opacity:1;
        transform:translateY(0) scale(1);
    }

    100%{
        opacity:0;
        transform:translateY(-800px) scale(.5);
    }

}


/* ================= SCROLL BOTTOM TOP BUTTON END HERE ================= */



/* ================= RESPONSIVE NAVBAR SRTART HERE ================= */

/* ========================================= NAVBAR LOGO  MOBILE ========================================= */

@media(max-width:576px){

    .logo-slogan{

        font-size:8px;

        letter-spacing:1px;

        bottom:-10px;
    }
}

/* desktop dropdown */

@media(min-width:992px){

    .navigation li:hover > ul{

        opacity:1;
        visibility:visible;

        transform:translateY(0);
    }
}

/* ================= 992px TO 1180px FIX ================= */

@media only screen and (min-width:992px) and (max-width:1180px){

    /* NAVBAR HEIGHT */

    .nav-container{

        height:54px;
    }

    /* LOGO SMALLER */

    .logo-area{

        width:190px;
    }

    .logo-area img{

        height:33px;
        width:auto;
    }

    /* FLAG SMALLER */

      .flag-center .flag{
        width:60px;
        height:38px;
    }

    .flag-center .welcome{
        width:80px;
        height:30px;
    }

    /* MENU HEIGHT */

.navigation{

    list-style:none;

    display:flex;

    align-items:stretch;

    height:56px;

    margin:0;
    padding:0;

    position:relative;

    overflow:visible;
}

    /* NAV TEXT + BUTTON SMALLER */

    .navigation > li > a{

        height:54px;

        padding:0 12px;

        font-size:13px;

        font-weight:600;
    }

    /* UNDERLINE POSITION */

    .navigation > li > a::after{

        bottom:8px;
    }

    /* DROPDOWN SIZE */

    .navigation li ul{

        min-width:210px;
    }

    .navigation li ul li a{

        padding:12px 15px;

        font-size:13px;
    }

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

@media(max-width:991px){

    .nav-container{
          height:50px;
    }

    .logo-area{

        width:auto;
    }

    .logo-area img{

        height:30px;
    }

    .flag-center .flag{
        width:50px;
        height:32px;
    }

    .flag-center .welcome{
        width:70px;
        height:27px;
    }
    .mobile-toggle{

        display:flex;
        align-items:center;
    }

.navigation-wrapper{

    position:absolute;

    top:50px;
    left:0;

    width:100%;

    z-index:9999;
}

.navigation{

    display:none;

    position:static;

    width:100%;

    flex-direction:column;

    background:#192d66;

    height:auto;
}

    .navigation.show{

        display:flex;
    }

    .navigation > li{

        width:100%;
    }

    .navigation > li > a{

        height:auto;

        padding:15px 18px;

        justify-content:flex-start;
    }

    .navigation li ul{

        position:static !important;

        display:none;

        width:100%;

        opacity:1 !important;
        visibility:visible !important;

        transform:none !important;

        background:#243f87;
    }

    .navigation li.open > ul{

        display:block;
    }

/* ===== Restore original mobile navbar ===== */



.navigation > li.active > a{

    background:#fbef55 !important;
    color:#192d66 !important;

    text-shadow:none !important;
}

.navigation > li.active.active-glow > a{

    color:#192d66 !important;

    text-shadow:none !important;
}

.navigation > li:hover > a{

    background:transparent !important;
    color:#fff !important;
}
}

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

@media(max-width:576px){

    .nav-container{

        height:40px !important;
        min-height:40px !important;

        padding:0 6px !important;
    }

    .logo-area img{

        height:25px !important;
    }

  .flag-center .flag{
        width:40px;
        height:25px;
    }

    .flag-center .welcome{
        width:60px;
        height:23px;
    }

    .navigation{

        top:40px !important;
    }

    .navigation > li > a{

        height:40px !important;

        padding:0 10px !important;

        font-size:12px !important;
    }

    .mobile-toggle{

        font-size:22px !important;

        height:40px !important;

        line-height:40px !important;

        padding:0 4px !important;
    }

    .navigation li ul li a{

        padding:10px 14px !important;

        font-size:12px !important;
    }
}
/* ===============================
   Z FOLD FOLDED MODE
   320px — 420px
=============================== */

@media screen and (max-width:420px){

    .nav-container{

        height:42px !important;
        min-height:42px !important;

        padding:0 6px !important;
    }

    .logo-area img{

        height:24px !important;
        width:auto !important;
    }

    .flag-center .flag{
        width:30px;
        height:19px;
    }

    .flag-center .welcome{
        width:50px;
        height:19px;
    }


    .navigation{

        top:42px !important;
    }

    .navigation > li > a{

        height:42px !important;

        line-height:42px !important;

        padding:0 9px !important;

        font-size:11px !important;
    }

    .mobile-toggle{

        font-size:21px !important;

        height:42px !important;

        line-height:42px !important;

        padding:0 4px !important;
    }

    .navigation li ul li a{

        padding:10px 14px !important;

        font-size:12px !important;
    }

    /* PREVENT OVERFLOW */

    .navigation,
    .nav-container,
    .navbar{

        overflow:hidden !important;
    }
}

/* ======================================================
  FOOTER RESPONSIVE START HERE 
====================================================== */
/* ================= RESPONSIVE ================= */

@media(max-width:1200px){

    .ft-footer-container{
        grid-template-columns:
        repeat(2,1fr);
    }

}

@media(max-width:992px){

    .ft-feature-grid{
        grid-template-columns:1fr;
    }

    .ft-main-footer{
        padding-top:820px;
    }

}

@media(max-width:768px){

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

    .ft-main-footer{
        padding-top:860px;
    }

    .ft-feature-title h2{
        font-size:36px;
    }

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

.tdb-btn {
        width: 50px;
        height: 50px;
        font-size: 30px;
    }


}


/* ======================================================
  END HERE FOOTER RESPONSIVE AND INDEX PAGE 
====================================================== */