/* ============================================================
   UGO GREENTECH SOLUTIONS — MAIN STYLESHEET v2
   Palette: Deep Forest #1B4332 · Emerald #2D6A4F · Sage #95D5B2
            Mint #D8F3DC · Soft White #F8FFF9 · Lime #B7EF3A
   ============================================================ */
    

/* ── TOKENS ── */
:root {
  /* Brand palette */
  
background: linear-gradient(
135deg,

#12a48ca2 0%,     /* light mint */

#02353c 22%,    /* deep ocean */

#28675e 38%,    /* teal forest */

#50824f 58%,    /* natural green */

#509279 78%,    /* aqua green */

#3fd0c9 100%    /* cyan water */
) ;
  --emerald:      #2D6A4F;
  --sage:         #95D5B2;
  --mint:         #D8F3DC;
  --soft-white:   #F8FFF9;
  --lime:         #B7EF3A;

  /* Dark UI colours */
  
background: linear-gradient(
135deg,

#12a48ca2 0%,     /* light mint */

#02353c 22%,    /* deep ocean */

#28675e 38%,    /* teal forest */

#50824f 58%,    /* natural green */

#509279 78%,    /* aqua green */

#3fd0c9 100%    /* cyan water */
) !important;
  --bg-2:         #112b1e;
  --bg-card:      rgba(27,67,50,0.55);
  --glass-border: rgba(149,213,178,0.18);
  --glass-glow:   rgba(183,239,58,0.15);

  /* Typography */
  --font-display: 'Montserrat', sans-serif;
  --font-body:    'Montserrat', sans-serif;
  --font-mono:    'Montserrat', sans-serif;

  /* Glow */
  --glow-lime:    0 0 20px rgba(183,239,58,0.35);
  --glow-sage:    0 0 30px rgba(149,213,178,0.25);
  --glow-lg:      0 0 60px rgba(183,239,58,0.2);

  /* Gradients */
  --grad-hero:    linear-gradient(135deg,#0d2318 0%,#1B4332 60%,#112b1e 100%);
  --grad-lime:    linear-gradient(90deg,#B7EF3A,#95D5B2);
  --grad-text:    linear-gradient(90deg,#B7EF3A 0%,#95D5B2 50%,#D8F3DC 100%);
  --grad-card:    linear-gradient(135deg,rgba(27,67,50,0.7),rgba(13,35,24,0.9));

  /* Radius */
  --r-sm: 8px; --r-md: 16px; --r-lg: 24px; --r-xl: 40px;

  /* Transitions */
  --t: all 0.38s cubic-bezier(0.25,0.46,0.45,0.94);
  --t-fast: all 0.18s ease;
}

/* ── RESET ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0; font-family: 'Montserrat', sans-serif;}
html{scroll-behavior:smooth;overflow-x:hidden;font-size:16px}
body{font-family:'Montserrat', sans-serif;background:var(--bg);color:var(--soft-white);line-height:1.6;overflow-x:hidden}
img{max-width:100%;display:block; }
a{text-decoration:none;color:inherit}
ul{list-style:none}
button{cursor:pointer;border:none;outline:none;background:none}

/* ── SCROLLBAR ── */
::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--emerald);border-radius:3px}
::-webkit-scrollbar-thumb:hover{background:var(--lime)}

/* ── CURSOR ── */
.cursor{width:12px;height:12px;background:var(--lime);border-radius:50%;position:fixed;pointer-events:none;z-index:10000;transform:translate(-50%,-50%);transition:transform .1s,width .25s,height .25s;mix-blend-mode:screen}
.cursor-ring{width:36px;height:36px;border:1.5px solid rgba(183,239,58,.5);border-radius:50%;position:fixed;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);transition:transform .14s}

/* ── PARTICLES ── */
#particles-canvas{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:0;opacity:.35}

/* ── PAGE LOADER ── */
.page-loader{position:fixed;inset:0;background:#ffffff  ;z-index:99999;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;transition:opacity .6s ease,visibility .6s ease}
.page-loader.hidden{opacity:0;visibility:hidden}
.loader-logo-img{width:120px;animation:logoPulse 1.2s ease infinite}
@keyframes logoPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(0.97)}}
.loader-bar-outer{width:200px;height:2px;background:black;border-radius:2px;overflow:hidden}
.loader-bar-inner{height:100%;background:var(--grad-lime);animation:loaderFill 1.8s ease-in-out infinite}
@keyframes loaderFill{0%{width:0;margin-left:0}50%{width:100%;margin-left:0}100%{width:0;margin-left:100%}}
.loader-text{font-family: 'Montserrat'!important;font-size:18px;letter-spacing:.25em;color:#000;text-transform:uppercase}

/* ── NAVBAR ── */
.navbar{position:fixed;top:0;left:0;right:0;z-index:1000;padding:0 5%;height:80px;display:flex;align-items:center;justify-content:space-between;transition:var(--t);   
background: linear-gradient(
135deg,

#12a48ca2 0%,     /* light mint */

#02353c 22%,    /* deep ocean */

#28675e 38%,    /* teal forest */

#50824f 58%,    /* natural green */

#509279 78%,    /* aqua green */

#3fd0c9 100%    /* cyan water */
) }
.navbar.scrolled{backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-bottom:1px solid var(--glass-border);box-shadow:0 4px 30px rgba(0,0,0,.4);  }
.logo{display:flex;align-items:center;gap:12px;text-decoration:none}
.logo-img{height:73px;width:auto;object-fit:contain;filter:drop-shadow(0 0 8px rgba(183,239,58,.3))}
.logo-tagline{font-family:'Montserrat', sans-serif;font-size:23px;letter-spacing:.18em;color:rgb(247, 251, 249);display:block;margin-top:2px}
.logo-name{font-family:'Montserrat', sans-serif;font-size:23px;font-weight:400;letter-spacing:.12em;color:var(--soft-white);display:block;}
.nav-links{display:flex;align-items:center;gap:8px}
.nav-links>a{font-size:23px;font-weight:400;color:rgba(255,255,255,.75);padding:8px 14px;border-radius:var(--r-sm);transition:var(--t);position:relative}
.nav-links>a:hover,.nav-links>a.active{color:var(--soft-white); font-family: 'Montserrat', sans-serif;}

.nav-links>a::after{content:'';position:absolute;bottom:4px;left:14px;right:14px;height:1.5px;background:var(--lime);transform:scaleX(0);transform-origin:left;transition:transform .3s ease}
.nav-links>a:hover::after,.nav-links>a.active::after{transform:scaleX(1)}
.nav-links > a {
    position: relative;
}
.nav-links > a {
    position: relative;
}
.nav-links > a {
    position: relative !important;
    display: inline-block;
}

/* Underline */
.nav-links > a::after {
    content: "" !important;
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 2px;
    height: 2px;
    background: var(--lime);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease;
    display: block !important;
}

/* Hover + Active */
.nav-links > a:hover::after,
.nav-links > a.active::after {
    transform: scaleX(1);
}

/* Mega dropdown */
.nav-item-dropdown{position:relative}
.nav-item-dropdown>a{font-size:23px;font-weight:200;color:rgba(255,255,255,.75);padding:8px 14px;border-radius:var(--r-sm);transition:var(--t);cursor:pointer;font-family: 'Montserrat', sans-serif;}
.nav-item-dropdown:hover>a{color:var(--soft-white)}
.dropdown-mega{position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%) translateY(-8px) ; font-family: 'Montserrat', sans-serif;background: linear-gradient(
135deg,

#12a48ca2 0%,     /* light mint */

#02353c 22%,    /* deep ocean */

#28675e 38%,    /* teal forest */

#50824f 58%,    /* natural green */

#509279 78%,    /* aqua green */

#3fd0c9 100%    /* cyan water */
);backdrop-filter:blur(24px);border:1px solid var(--glass-border);border-radius:var(--r-md);padding:24px;display:grid;grid-template-columns:repeat(3,200px);gap:24px;opacity:0;visibility:hidden;transition:var(--t);box-shadow:0 20px 60px rgba(0,0,0,.5),var(--glow-sage);min-width:640px}
.nav-item-dropdown:hover .dropdown-mega{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
/* =========================
   MEGA MENU FIX
========================= */

.dropdown-mega {
  display: flex !important;
  flex-direction: row !important;
  align-items: flex-start !important;
  flex-wrap: nowrap !important;
  gap: 35px !important;
  width: max-content !important;
}

/* DROPDOWN COLUMNS */
.dropdown-col,
.ugo-menu-column {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  flex: 0 0 auto !important;
  min-width: 180px !important;
}

/* ALL HEADINGS */
.dropdown-col h4,
.ugo-menu-title {
  font-family: 'Montserrat', sans-serif !important;
  font-size: 12px !important;
  letter-spacing: .15em !important;
  color: #00c896 !important;
  text-transform: uppercase !important;

  margin: 0 0 10px 0 !important;
  padding: 0 0 6px 0 !important;

  border-bottom: 1px solid rgba(149, 213, 178, .15) !important;

  white-space: nowrap !important;
  word-break: keep-all !important;
  overflow-wrap: normal !important;

  width: max-content !important;
  min-width: max-content !important;

  line-height: 20px !important;
}

/* LINKS */
.dropdown-col a,
.ugo-menu-column a {
  display: block !important;
  font-family: 'Montserrat', sans-serif !important;
  font-size: 17px !important;
  color: #fff !important;

  padding: 5px 0 !important;
  white-space: nowrap !important;

  transition: var(--t-fast) !important;
}

/* LINK HOVER */
.dropdown-col a:hover,
.ugo-menu-column a:hover {
  color: var(--lime) !important;
  padding-left: 6px !important;
}

/* DUPLICATE SUSTAINABILITY HIDE */
.dropdown-col h4[style] {
  display: none !important;
}

.dropdown-col h4[style] + a {
  display: none !important;
}

/* Nav CTA button */
.btn-nav-cta{color:rgba(255, 255, 255, .75);border-radius:var(--r-sm)!important;padding:8px 18px!important;margin-left:8px}

.btn-nav-cta::after{display:none!important}

/* Hamburger */
.hamburger{display:none;flex-direction:column;gap:5px;padding:8px;cursor:pointer}
.hamburger span{display:block;width:24px;height:2px;background:var(--soft-white);border-radius:2px;transition:var(--t)}
.hamburger.open span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.hamburger.open span:nth-child(2){opacity:0;transform:translateX(-8px)}
.hamburger.open span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px)}

/* Mobile nav */
.mobile-nav{position:fixed;top:80px;left:0;right:0;background:rgba(13,35,24,.97);backdrop-filter:blur(24px);border-bottom:1px solid var(--glass-border);z-index:999;padding:20px 5%;display:flex;flex-direction:column;gap:4px;transform:translateY(-100%);opacity:0;visibility:hidden;transition:var(--t)}
.mobile-nav.open{transform:translateY(0);opacity:1;visibility:visible}
.mobile-nav a{font-size:.95rem;color:rgba(255,255,255,.75);padding:10px 0;border-bottom:1px solid rgba(149,213,178,.08);transition:var(--t-fast)}
.mobile-nav a:hover{color:var(--lime);padding-left:8px}
.mobile-nav a.active{color:var(--lime)}
.mobile-accordion-btn{display:flex;justify-content:space-between;align-items:center;font-size:.95rem;color:rgba(255,255,255,.75);padding:10px 0;border-bottom:1px solid rgba(149,213,178,.08);width:100%;background:transparent;cursor:pointer;transition:var(--t-fast)}
.mobile-accordion-btn:hover{color:var(--lime)}
.mobile-accordion-body{display:none;padding-left:16px}
.mobile-accordion-body.open{display:flex;flex-direction:column}
.mobile-accordion-body a{border-bottom:1px solid rgba(149,213,178,.05);font-size:.87rem}

/* ── BUTTONS ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 28px;border-radius:var(--r-sm);font-family:var(--font-display);font-weight:600;font-size:.9rem;letter-spacing:.02em;cursor:pointer;transition:var(--t);position:relative;overflow:hidden;text-decoration:none;border:none}
.btn::before{content:'';position:absolute;inset:0;background:rgba(255,255,255,.06);transform:translateY(100%);transition:transform .3s ease}
.btn:hover::before{transform:translateY(0)}
.btn-primary{background:linear-gradient(135deg, rgb(56, 176, 0), rgb(45, 106, 79));color:var(--deep-forest);box-shadow:0 4px 20px rgba(183,239,58,.25); font-family: poppins; font-weight: 800;}
.btn-primary:hover{background:linear-gradient(135deg, rgb(56, 176, 0), rgb(45, 106, 79));box-shadow:var(--glow-lime);transform:translateY(-2px)}
.btn-outline{background:transparent;border:1.5px solid rgba(183,239,58,.5);color:var(--lime)}
.btn-outline:hover{background:rgba(183,239,58,.08);border-color:var(--lime);box-shadow:var(--glow-lime)}
.btn-ghost{background:rgba(149,213,178,.08);border:1px solid var(--glass-border);color:#fff; font-family: poppins; font-weight: 500;}
.btn-ghost:hover{background:rgba(149,213,178,.14);color:var(--soft-white)}

/* ── GLASS CARD ── */
.glass-card{background:var(--bg-card);border:1px solid var(--glass-border);border-radius:var(--r-md);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);transition:var(--t)}
.glass-card:hover{border-color:rgba(183,239,58,.3);box-shadow:0 12px 40px rgba(0,0,0,.3),var(--glow-sage)}

/* ── SECTION UTILITIES ── */
.section-padding{padding:20px 0;position:relative;z-index:1}
.container{max-width:1469px;margin:0 auto;padding:0 5%}

.section-tag{display:inline-flex;align-items:center;gap:8px;font-family:'Montserrat', sans-serif;font-size:22px;letter-spacing:.2em;color:#ffffff;text-transform:uppercase;margin-bottom:14px;}

.section-title{
font-family:'Montserrat', sans-serif !important;
font-size:75px;
font-weight:200;
line-height:1.15;
margin-bottom:16px
}
.section-title span,.section-title .accent{background:var(--grad-text);-webkit-background-clip:text;background-clip:text}
.section-desc{color:#ffffff;font-size:16px;line-height:1.75;max-width:580px; font-family: 'Montserrat', sans-serif; font-weight: 200;}
.section-header{text-align:center;margin-bottom:60px}
.section-header .section-desc{margin:0 auto}
.section-header .section-tag{justify-content:center;font-family: 'Montserrat', sans-serif; margin-top: 40px;font-size: 22px;}
.section-header .section-tag::before{display:none}
.gradient-text{background:var(--grad-text);background:#ffffff;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;;background-clip:text}
.outline-text{-webkit-text-stroke:2px var(--lime);color:transparent}

/* ── CHIP ── */
.chip{display:inline-flex;align-items:center;gap:4px;background:rgba(149,213,178,.1);border:1px solid rgba(149,213,178,.25);border-radius:50px;padding:3px 12px;font-size:14px;font-weight:500;color:#ffffff;font-family:'Montserrat', sans-serif;letter-spacing:.04em}
.chip-lime{color:#ffffff ; }

/* ── SCROLL REVEAL ── */
.reveal,.reveal-left,.reveal-right{opacity:0;transition:opacity .7s ease,transform .7s ease}
.reveal{transform:translateY(28px)}
.reveal-left{transform:translateX(-28px)}
.reveal-right{transform:translateX(28px)}
.reveal.visible,.reveal-left.visible,.reveal-right.visible{opacity:1;transform:none}

/* ── PAGE HERO (inner pages) ── */
.page-hero{padding:140px 5% 80px;position:relative;overflow:hidden;text-align:center}
.page-hero-bg{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 0%,rgba(183,239,58,.1) 0%,transparent 65%);pointer-events:none}
.page-hero-content{position:relative;z-index:1;max-width:720px;margin:0 auto}
.page-hero h1{font-family:;font-size:50px;font-weight:600;line-height:1.15;margin-bottom:20px}
.page-hero p{color:#ffffff;font-size:15px;line-height:1.75;margin-bottom:28px}
.page-badge{display:inline-flex;align-items:center;gap:8px;border-radius:50px;padding:6px 18px;font-size:25px;font-family:var(--font-mono);letter-spacing:.15em;;text-transform:uppercase;margin-bottom:20px; font-weight: 600;}

/* ── CTA BANNER ── */
.cta-banner{padding:100px 5%;position:relative;overflow:hidden;text-align:center;z-index:1}
.cta-banner-bg{position:absolute;inset:0;border-top:1px solid var(--glass-border);border-bottom:1px solid var(--glass-border)}
.cta-banner-glow{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 50%,rgba(183,239,58,.08),transparent 65%);pointer-events:none}
.cta-content{position:relative;z-index:1}
.cta-icon{font-size:2.5rem;margin-bottom:20px; margin-top:-80px;}
.cta-title{font-family:'Montserrat', sans-serif;font-size:40px;font-weight:200;margin-bottom:16px}
.cta-desc{color:#ffffff;font-size:16px;line-height:1.7;max-width:600px;margin:0 auto 36px;font-family: 'Montserrat', sans-serif;}
.cta-buttons{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}

/* ── FOOTER ── */
.footer{position:relative;z-index:1;background:rgba(9,22,15,.95);border-top:1px solid var(--glass-border)}
.footer-glow{position:absolute;top:0;left:50%;transform:translateX(-50%);width:600px;height:1px;background:var(--grad-lime);box-shadow:0 0 30px rgba(183,239,58,.3);pointer-events:none}
.footer-top{display:grid;grid-template-columns:1.8fr 1fr 1.2fr 1fr;gap:48px;padding:64px 5% 48px}
.footer-brand p{font-size:.85rem;color:rgba(255,255,255,.55);line-height:1.75;margin-top:16px;max-width:280px}
.footer-logo-img{height:52px;width:auto;object-fit:contain;margin-bottom:4px;filter:drop-shadow(0 0 10px rgba(183,239,58,.25))}
.footer-tagline{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.2em;color:rgba(149,213,178,.5);text-transform:uppercase;margin-bottom:12px}
.footer-social{display:flex;gap:10px;margin-top:20px}
.social-icon{width:36px;height:36px;background:rgba(27,67,50,.7);border:1px solid var(--glass-border);border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:700;color:rgba(255,255,255,.6);transition:var(--t);cursor:pointer;text-decoration:none}
.social-icon:hover{background:var(--lime);color:var(--deep-forest);border-color:var(--lime);box-shadow:var(--glow-lime);transform:translateY(-3px)}

.footer-col h4{font-family:var(--font-display);font-size:.9rem;font-weight:700;margin-bottom:18px;color:var(--soft-white)}
.footer-links{display:flex;flex-direction:column;gap:8px}
.footer-links a{font-size:.83rem;color:rgba(255,255,255,.5);transition:var(--t-fast)}
.footer-links a:hover{color:var(--lime);padding-left:6px}

.footer-contact-item{display:flex;align-items:flex-start;gap:10px;margin-bottom:12px}
.footer-contact-icon{width:28px;height:28px;background:rgba(183,239,58,.08);border:1px solid rgba(183,239,58,.2);border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:.82rem;flex-shrink:0;margin-top:2px}
.footer-contact-text{font-size:.82rem;color:rgba(255,255,255,.55);line-height:1.6}
.footer-contact-text a{color:rgba(255,255,255,.55);transition:color .2s}
.footer-contact-text a:hover{color:var(--lime)}

.hours-table{display:flex;flex-direction:column;gap:6px}
.hours-row{display:flex;justify-content:space-between;font-size:.78rem;padding:6px 0;border-bottom:1px solid rgba(149,213,178,.07)}
.hours-row .day{color:#ffff; font-size: 15px;}
.hours-row .time{color:#fff;font-family:poppins;font-size:15px}
.hours-row.closed .time{color:red;font-size: 15px; font-weight: 500;}

.newsletter-form{display:flex;gap:0;margin-top:12px;border-radius:8px;overflow:hidden;border:1px solid var(--glass-border)}
.newsletter-input{flex:1;background:rgba(27,67,50,.4);border:none;padding:10px 14px;color:var(--soft-white);font-family:var(--font-body);font-size:.83rem;outline:none;min-width:0}
.newsletter-input::placeholder{color:rgba(255,255,255,.3)}
.newsletter-btn{background:var(--lime);color:var(--deep-forest);border:none;padding:10px 18px;font-family:var(--font-display);font-weight:700;font-size:.78rem;cursor:pointer;transition:var(--t);white-space:nowrap}
.newsletter-btn:hover{background:#c8f546}

.footer-map iframe{width:100%;height:120px;border:0;border-radius:var(--r-sm);filter:invert(.85) hue-rotate(135deg) saturate(.8);margin-top:14px;border:1px solid var(--glass-border)}

.footer-bottom{display:flex;justify-content:space-between;align-items:center;padding:18px 5%;border-top:1px solid rgba(149,213,178,.08);flex-wrap:wrap;gap:12px}
.footer-bottom span{font-size:.75rem;color:rgba(255,255,255,.3)}
.footer-bottom-links{display:flex;gap:20px}
.footer-bottom-links a{font-size:.75rem;color:rgba(255,255,255,.3);transition:color .2s}
.footer-bottom-links a:hover{color:var(--lime)}

/* WhatsApp float */
.whatsapp-float{position:fixed;bottom:28px;right:28px;width:54px;height:54px;background:#25d366;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.4rem;z-index:900;box-shadow:0 4px 20px rgba(37,211,102,.4);transition:var(--t);text-decoration:none}
.whatsapp-float:hover{transform:scale(1.12);box-shadow:0 6px 30px rgba(37,211,102,.6)}

/* Scroll to top */
.scroll-top{position:fixed;bottom:28px;right:90px;width:40px;height:40px;background:rgba(27,67,50,.8);border:1px solid var(--glass-border);border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;font-size:.9rem;color:var(--lime);z-index:900;transition:var(--t);opacity:0;visibility:hidden}
.scroll-top.visible{opacity:1;visibility:visible}
.scroll-top:hover{background:var(--lime);color:var(--deep-forest);box-shadow:var(--glow-lime)}

/* Counter */
.counter-number{font-family:var(--font-display);font-weight:800}

/* Progress bars */
.progress-bar-outer{height:6px;background:rgba(149,213,178,.12);border-radius:3px;overflow:hidden;margin-top:6px}
.progress-bar-inner{height:100%;background:#ffffff;border-radius:3px;width:0;transition:width 1.2s ease}

/* Floating leaves */
.float-leaf{position:absolute;pointer-events:none;animation:floatLeaf 8s ease-in-out infinite;opacity:.15; }
@keyframes floatLeaf{0%,100%{transform:translateY(0) rotate(0deg)}33%{transform:translateY(-18px) rotate(8deg)}66%{transform:translateY(-8px) rotate(-5deg)}}

/* Form elements */
.form-group{display:flex;flex-direction:column;gap:7px;margin-bottom:16px}
.form-group label{font-size:18px;color:#ffffff;font-weight:500; font-family:'Montserrat', sans-serif;}
.form-group input,.form-group select,.form-group textarea{background:rgba(27,67,50,.4);border:1px solid rgba(149,213,178,.2);border-radius:var(--r-sm);color:var(--soft-white);font-family:var(--font-body);font-size:.9rem;padding:12px 14px;outline:none;transition:border-color .3s,box-shadow .3s;width:100%}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--lime);box-shadow:0 0 0 3px rgba(183,239,58,.08)}
.form-group input::placeholder,.form-group textarea::placeholder{color:rgba(255,255,255,.25)}
.form-group select option{background:var(--bg);color:var(--soft-white)}
.form-group textarea{resize:vertical;min-height:110px}
.form-row-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}

/* ── RESPONSIVE ── */
@media(max-width:1024px){
  .footer-top{grid-template-columns:1fr 1fr}
  .dropdown-mega{min-width:520px;grid-template-columns:repeat(2,200px)}
}
@media(max-width:768px){
  .nav-links{display:none}
  .hamburger{display:flex}
  .footer-top{grid-template-columns:1fr;gap:32px}
  .footer-bottom{flex-direction:column;text-align:center}
  .form-row-2{grid-template-columns:1fr}
  .section-padding{padding:70px 0}
}
@media(max-width:480px){
  .cta-buttons{flex-direction:column;align-items:center}
  .scroll-top{right:28px;bottom:90px}
}

/* hero section slider */



/* ===========================
   HERO SLIDER
=========================== */

.hero-slider{
    width:100% !important;
    height:100vh !important;
    position:relative !important;
    overflow:hidden !important;
    background:#000 !important;
    isolation:isolate !important;
}

/* ===========================
   SLIDES
=========================== */

.slide{
    position:absolute !important;
    width:100% !important;
    height:100% !important;
    top:0 !important;
    left:0 !important;
    opacity:0 !important;
    transition:all 1.5s ease-in-out !important;
    transform:scale(1.1) !important;
}

.slide.active{
    opacity:1 !important;
    z-index:5 !important;
    transform:scale(1) !important;
}

/* ===========================
   SLIDE IMAGES
=========================== */

.slide img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    filter:brightness(55%) !important;
    transition:transform 7s ease !important;
}

.slide.active img{
    transform:scale(1.12) !important;
}

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

.overlay{
    position:absolute !important;
    inset:0 !important;
    background:
    linear-gradient(
        90deg,
        rgba(0,0,0,0.88),
        rgba(0,50,25,0.55),
        rgba(0,0,0,0.25)
    ) !important;
    z-index:1 !important;
}

/* ===========================
   GLOW EFFECT
=========================== */

.overlay::before{
    content:'' !important;
    position:absolute !important;
    width:700px !important;
    height:700px !important;
    background:radial-gradient(#8cffc8,transparent) !important;
    top:-200px !important;
    right:-200px !important;
    opacity:.15 !important;
    animation:rotate 12s linear infinite !important;
}

@keyframes rotate{

    from{
        transform:rotate(0deg) !important;
    }

    to{
        transform:rotate(360deg) !important;
    }

}

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

.leaf{
    position:absolute !important;
    color:#8cffc8 !important;
    font-size:18px !important;
    animation:float 10s linear infinite !important;
    opacity:.45 !important;
    z-index:20 !important;
    will-change:transform !important;
    pointer-events:none !important;
}

.leaf:nth-child(1){
    left:10% !important;
    animation-delay:0s !important;
}

.leaf:nth-child(2){
    left:30% !important;
    animation-delay:2s !important;
}

.leaf:nth-child(3){
    left:60% !important;
    animation-delay:4s !important;
}

.leaf:nth-child(4){
    left:85% !important;
    animation-delay:1s !important;
}

@keyframes float{

    0%{
        transform:translateY(100vh) rotate(0deg) !important;
    }

    100%{
        transform:translateY(-120px) rotate(360deg) !important;
    }

}

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

.content{
    position:absolute !important;
    top:50% !important;
    left:8% !important;
    transform:translateY(-50%) !important;
    z-index:10 !important;
    max-width:700px !important;
    opacity:0 !important;
    transition:all 1s ease !important;
}

.slide.active .content{
    opacity:1 !important;
    transform:translateY(-50%) translateX(0) !important;
    animation:contentAnim 1.2s ease !important;
}

@keyframes contentAnim{

    0%{
        opacity:0 !important;
        transform:translateY(-50%) translateX(-80px) !important;
    }

    100%{
        opacity:1 !important;
        transform:translateY(-50%) translateX(0px) !important;
    }

}

/* ===========================
   TAG
=========================== */

.tag{
    display:inline-flex !important;
    align-items:center !important;
    gap:10px !important;
    padding:12px 24px !important;
    border-radius:50px !important;
    background:rgba(140,255,200,0.12) !important;
    border:1px solid rgba(140,255,200,0.4) !important;
    backdrop-filter:blur(10px) !important;
    color:#caffea !important;
    font-size:14px !important;
    margin-bottom:28px !important;
    letter-spacing:1px !important;
    box-shadow:0 0 20px rgba(140,255,200,.15) !important;
}

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

.content h1{
    font-family: 'Montserrat', sans-serif;
    color:#fff !important;
    font-size:65px !important;
    line-height:1.1 !important;
    font-weight:500 !important;
    margin-bottom:25px !important;
    text-shadow:0 10px 40px rgba(0,0,0,.5) !important;
}

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

.green-text{
    background:linear-gradient(to right,#6effb7,#caffea) !important;
    -webkit-background-clip:text !important;
    -webkit-text-fill-color:transparent !important;
}

/* ===========================
   TYPING
=========================== */

.typing{
    color:#caffea !important;
    border-right:3px solid #8cffc8 !important;
    white-space:nowrap !important;
    overflow:hidden !important;
    display:inline-block !important;
    padding-right:6px !important;
    min-height:80px !important;
}

/* ===========================
   PARAGRAPH
=========================== */

.content p{
    font-family: 'Montserrat', sans-serif;
    color:#ffffff !important;
    font-size:18px !important;
    line-height:1.9 !important;
    margin-bottom:40px !important;
    max-width:620px !important;
}

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

.btn-group{
    display:flex !important;
    gap:20px !important;
    flex-wrap:wrap !important;
}

.btn{
    font-family: 'Montserrat', sans-serif;
    position:relative !important;
    overflow:hidden !important;
    padding:17px 38px !important;
    border-radius:60px !important;
    text-decoration:none !important;
    font-size:18px !important;
    font-weight:200 !important;
    transition:.4s !important;
}

/* Green Button */

.btn-green{
    font-family: 'Montserrat', sans-serif;
    background:linear-gradient(to right,#a0d137,#8cffc8) !important;
    color:#021b12 !important;
    box-shadow:0 10px 30px rgba(140,255,200,.35) !important;
}

.btn-green:hover{
    transform:translateY(-6px) !important;
    box-shadow:0 20px 40px rgba(140,255,200,.5) !important;
}

/* Outline Button */

.btn-outline{
    font-weight: 200 !important;
    border:2px solid rgba(255,255,255,.4) !important;
    color:#fff !important;
    backdrop-filter:blur(10px) !important;
    font-family: 'Montserrat', sans-serif;
}

.btn-outline:hover{
    background:#fff !important;
    color:#000 !important;
}

/* ===========================
   WATER WAVE
=========================== */

.wave{
    position:absolute !important;
    bottom:0 !important;
    left:0 !important;
    width:100% !important;
    height:120px !important;
    z-index:5 !important;
    opacity:.75 !important;
}

/* ===========================
   DOTS
=========================== */

.dots{
    position:absolute !important;
    bottom:40px !important;
    left:50% !important;
    transform:translateX(-50%) !important;
    display:flex !important;
    gap:15px !important;
    z-index:50 !important;
}

.dot{
    width:12px !important;
    height:12px !important;
    border-radius:50% !important;
    background:rgba(255,255,255,.3) !important;
    cursor:pointer !important;
    transition:.4s !important;
    position:relative !important;
}

.dot.active{
    background:#a0d137 !important;
    box-shadow:0 0 20px #8cffc8 !important;
    transform:scale(1.3) !important;
}

/* ===========================
   ARROWS
=========================== */

.arrow{
    position:absolute !important;
    top:50% !important;
    transform:translateY(-50%) !important;
    width:65px !important;
    height:65px !important;
    border-radius:50% !important;
    border:none !important;
    cursor:pointer !important;
    z-index:50 !important;
    color:#fff !important;
    font-size:22px !important;
    backdrop-filter:blur(12px) !important;
    background:rgba(255,255,255,.08) !important;
    transition:.4s !important;
}

.arrow:hover{
    background:#8cffc8 !important;
    color:#021b12 !important;
}

.prev{
    left:25px !important;
}

.next{
    right:25px !important;
}

/* ===========================
   WATER GLOW
=========================== */

.water-glow{
    position:absolute !important;
    bottom:-100px !important;
    right:-100px !important;
    width:500px !important;
    height:500px !important;
    background:#8cffc8 !important;
    filter:blur(160px) !important;
    opacity:.08 !important;
    z-index:1 !important;
}

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

@media(max-width:991px){

    .content{
        left:5% !important;
        right:5% !important;
        max-width:100% !important;
    }

    .content h1{
        font-size:56px !important;
    }

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

}

@media(max-width:768px){

    .hero-slider{
        height:92vh !important;
    }

    .content h1{
        font-size:40px !important;
    }

    .typing{
        min-height:auto !important;
    }

    .content p{
        font-size:14px !important;
        line-height:1.8 !important;
    }

    .btn{
        padding:14px 24px !important;
        font-size:14px !important;
    }

    .arrow{
        width:48px !important;
        height:48px !important;
        font-size:18px !important;
    }

    .dots{
        bottom:25px !important;
    }

}

/* 0our organization */

    /* =======================================================
   UGO ABOUT V2 SECTION
======================================================= */

.ugo-about-v2-section{
    width:100%;
    padding:0px 7%;

/* Royal Light Blue */
 /* PREMIUM BLUE + CYAN + GREEN GRADIENT */
/* DEEP FOREST + WATER + FIRE PREMIUM GRADIENT */
/* LIGHT WATER + WIND + FIRE + FOREST SHADE */
/* BRIGHTSCOUT STYLE PREMIUM GRADIENT */
/* BRIGHTSCOUT STYLE PREMIUM GRADIENT */

background: linear-gradient(
135deg,

#12a48ca2 0%,     /* light mint */

#02353c 22%,    /* deep ocean */

#28675e 38%,    /* teal forest */

#50824f 58%,    /* natural green */

#509279 78%,    /* aqua green */

#3fd0c9 100%    /* cyan water */
) !important;
overflow:hidden;
    position:relative;
}

.ugo-about-v2-container{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:80px;
    flex-wrap:wrap;
}

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

.ugo-about-v2-left{
    flex:1;
    min-width:320px;
}

.ugo-about-v2-tag{
    font-family: 'Montserrat', sans-serif;
    display:inline-block;
    padding:10px 22px;
    
    color:#ffffff;
    border-radius:50px;
    font-size:25px;
    font-weight:200;
    margin-bottom:15px;
}

.ugo-about-v2-title{
    font-family: 'Montserrat', sans-serif;
    font-size:50px;
    line-height:1.1;
    font-weight:200;
    color: #ffff;
    margin-bottom:25px;
}

.ugo-about-v2-title span{
    color:#ffffff;
}
.ugo-about-v2-text{
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    line-height: 1.9;
    color: #fff;
    margin-bottom: 20px;
    text-align: justify;
    text-justify: inter-word;

}

.ugo-about-v2-text.second{
    margin-bottom:35px;
}

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

.ugo-about-v2-buttons{
    display:flex;
    gap:20px;
    flex-wrap:wrap;
    margin-bottom:45px;
}

.ugo-about-v2-main-btn{
    font-family: 'Montserrat', sans-serif;
    padding:15px 35px;
    background:#18a558;
    color:#fff;
    text-decoration:none;
    border-radius:50px;
    font-weight:400;
    transition:0.4s;
    box-shadow:0 10px 30px rgba(24,165,88,0.25);
}

.ugo-about-v2-main-btn:hover{
    transform:translateY(-5px);
}

.ugo-about-v2-border-btn{
    padding:15px 35px;
    border:2px solid #18a558;
    color:#ffffff;
    text-decoration:none;
    border-radius:50px;
    font-weight:200;
    transition:0.4s;
   
}

.ugo-about-v2-border-btn:hover{
    background:#18a558;
    color:#fff;
}

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

.ugo-about-v2-info-cards{
    display:flex;
    gap:25px;
    flex-wrap:wrap;
}

.ugo-about-v2-info-card{
    
    padding:22px;
    border-radius:20px;
    display:flex;
    align-items:flex-start;
    gap:18px;
    width:280px;
    
    transition:0.4s;
}

.ugo-about-v2-info-card:hover{
    transform:translateY(-8px);
}

.ugo-about-v2-icon{
    width:55px;
    height:55px;
   
    color:#fff;
    border-radius:15px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:24px;
}

.ugo-about-v2-info-card h4{
    font-family: 'Montserrat', sans-serif;
    font-size:20px;
    margin-bottom:8px;
    color:#fff;
}

.ugo-about-v2-info-card p{
    font-family: 'Montserrat', sans-serif;
    font-size:14px;
    color:#fff;
    line-height:1.6;
}

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

.ugo-about-v2-right{
    flex:1;
    min-width:320px;
    position:relative;
    height:750px;
    display:flex;
    align-items:center;
    justify-content:center;
}

/* =======================================================
   RINGS
======================================================= */

.ugo-about-v2-ring{
    position:absolute;
    border-radius:50%;
    border:2px dashed #ffffff;
    animation:ugoRotate 25s linear infinite;
}

.ugo-about-v2-ring1{
    width:540px;
    height:540px;
}

.ugo-about-v2-ring2{
    width:420px;
    height:420px;
    animation-direction:reverse;
}

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

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

.ugo-about-v2-main-image-card{
    width:360px;
    height:360px;
    border-radius:50%;
    overflow:hidden;
    position:relative;
    z-index:5;
    box-shadow:0 30px 60px rgba(0,0,0,0.15);
}

.ugo-about-v2-main-image-card img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.ugo-about-v2-image-glow{
    position:absolute;
    inset:0;
    background:linear-gradient(to top, rgba(0,0,0,0.3), transparent);
    z-index:2;
}

/* =======================================================
   GLASS BOXES
======================================================= */
.ugo-about-v2-glass-box{
    position:absolute;
    padding:22px 28px;
    
    
  backdrop-filter:blur(15px);
 
    z-index:12;
    
    text-align:center;
}

.ugo-about-v2-glass-box span{
    font-family: 'Montserrat', sans-serif;
    display:block;
    font-size:34px;
    font-weight:400;
    color:#ffffff;
    margin-bottom:15px;
}

.ugo-about-v2-glass-box p{
    color:#fff;
    font-size:15px;
    font-weight:500;
}

/* BOTH BOXES BOTTOM CENTER */
.ugo-about-v2-gb1{
    bottom:-61px;
    left:30%;
    transform:translateX(-120%);
}

.ugo-about-v2-gb2{
    bottom:-61px;
    left:30%;
    transform:translateX(20%);
}

/* ================================
   RESPONSIVE GLASS BOXES
================================ */

@media(max-width:768px){

    .ugo-about-v2-glass-box{
        padding:16px 18px;
    }

    .ugo-about-v2-glass-box span{
        font-size:24px;
        margin-bottom:8px;
    }

    .ugo-about-v2-glass-box p{
        font-size:13px;
    }

    .ugo-about-v2-gb1{
        bottom:-35px;
        left:50%;
        transform:translateX(-115%);
    }

    .ugo-about-v2-gb2{
        bottom:-35px;
        left:50%;
        transform:translateX(15%);
    }

}

/* MOBILE */
@media(max-width:480px){

    .ugo-about-v2-glass-box{
        padding:12px 14px;
    }

    .ugo-about-v2-glass-box span{
        font-size:18px;
        margin-bottom:5px;
    }

    .ugo-about-v2-glass-box p{
        font-size:11px;
        line-height:1.4;
    }

    .ugo-about-v2-gb1{
        bottom:-83px;
        left:46%;
        transform:translateX(-105%);
    }

    .ugo-about-v2-gb2{
        bottom:-83px;
        left:46%;
        transform:translateX(5%);
    }

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

@media(max-width:992px){

    .ugo-about-v2-container{
        flex-direction:column;
    }

    .ugo-about-v2-title{
        font-size:42px;
    }

    .ugo-about-v2-right{
        height:650px;
    }

    .ugo-about-v2-ring1{
        width:420px;
        height:420px;
    }

    .ugo-about-v2-ring2{
        width:320px;
        height:320px;
    }

    .ugo-about-v2-main-image-card{
        width:280px;
        height:280px;
    }

}

@media(max-width:576px){

    .ugo-about-v2-section{
        padding:90px 20px;
    }

    .ugo-about-v2-title{
        font-size:34px;
    }

    .ugo-about-v2-right{
        height:550px;
    }

    .ugo-about-v2-ring1{
        width:320px;
        height:320px;
    }

    .ugo-about-v2-ring2{
        width:250px;
        height:250px;
    }

    .ugo-about-v2-main-image-card{
        width:220px;
        height:220px;
    }

    .ugo-about-v2-small-image{
        width:90px;
        height:90px;
    }

    .ugo-about-v2-glass-box{
        padding:15px 18px;
    }

    .ugo-about-v2-glass-box span{
        font-size:24px;
    }

}


/* =========================
COMMON MARQUEE
========================= */

.eco-marquee{

width:100% !important;

overflow:hidden !important;

position:relative !important;

padding:18px 0 !important;

background: linear-gradient(
135deg,

#12a48ca2 0%,     /* light mint */

#02353c 22%,    /* deep ocean */

#28675e 38%,    /* teal forest */

#50824f 58%,    /* natural green */

#509279 78%,    /* aqua green */

#3fd0c9 100%    /* cyan water */
) !important;

border-top:1px solid rgba(140,255,200,.15) !important;

border-bottom:1px solid rgba(140,255,200,.15) !important;

margin-bottom:18px !important;

}

/* =========================
SIDE GLOW
========================= */

.eco-marquee::before,
.eco-marquee::after{

content:'' !important;

position:absolute !important;

top:0 !important;

width:180px !important;

height:100% !important;

z-index:2 !important;

pointer-events:none !important;

}

.eco-marquee::before{

left:0 !important;

background:
linear-gradient(
to right,
#02150f,
transparent
) !important;

}

.eco-marquee::after{

right:0 !important;

background:
linear-gradient(
to left,
#02150f,
transparent
) !important;

}

/* =========================
TRACK
========================= */

.eco-track{

display:flex !important;

align-items:center !important;

gap:70px !important;

width:max-content !important;

will-change:transform !important;

}

/* =========================
FIRST TRACK
========================= */

.track-one{

animation:leftMove 28s linear infinite !important;

}

/* =========================
SECOND TRACK
========================= */

.track-two{

animation:rightMove 28s linear infinite !important;

}

/* =========================
ITEMS
========================= */

.eco-track span{
font-family: 'Montserrat', sans-serif;
display:flex !important;

align-items:center !important;

gap:10px !important;

font-size:18px !important;

font-weight:200!important;

white-space:nowrap !important;

color:#e8fff3 !important;

letter-spacing:.5px !important;

text-shadow:
0 0 12px rgba(140,255,200,.22) !important;

transition:
transform .4s ease,
color .4s ease !important;

}

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

.eco-track span:hover{

transform:scale(1.08) !important;

color:#8cffc8 !important;

}

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

@keyframes leftMove{

0%{

transform:translateX(0);

}

100%{

transform:translateX(-50%);

}

}

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

@keyframes rightMove{

0%{

transform:translateX(-50%);

}

100%{

transform:translateX(0);

}

}

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

@media(max-width:768px){

.eco-marquee{

padding:14px 0 !important;

}

.eco-track{

gap:40px !important;

}

.eco-track span{

font-size:14px !important;

}

.track-one,
.track-two{

animation-duration:18s !important;

}

}

/* =========================
EXTRA SMALL DEVICES
========================= */

@media(max-width:480px){

.eco-track{

gap:28px !important;

}

.eco-track span{

font-size:12px !important;

letter-spacing:.3px !important;

}

.eco-marquee{

padding:12px 0 !important;

}

}


/* our organization */

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

.eco-section{

width:100% !important;

min-height:100vh !important;

padding:90px 8% !important;

display:flex !important;

align-items:center !important;

justify-content:space-between !important;

gap:80px !important;
ba


overflow:hidden !important;

position:relative !important;

}

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

.eco-left{

width:50% !important;

display:flex !important;

flex-direction:column !important;

gap:30px !important;

animation:leftReveal 1s ease !important;

}

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

.image-wrapper{

position:relative !important;

width:100% !important;

max-width:500px !important;

margin:auto !important;

animation:floatImage 5s ease-in-out infinite !important;

}

.image-wrapper::before{

content:'' !important;

position:absolute !important;

inset:-12px !important;

border-radius:40px !important;

background:
linear-gradient(
135deg,
#8cffc8,
#42d392,
#0f5132
) !important;

filter:blur(25px) !important;

opacity:.45 !important;

z-index:1 !important;

}

.image-wrapper img{

width:100% !important;

position:relative !important;

z-index:3 !important;

display:block !important;

filter:
drop-shadow(0 35px 40px rgba(0,0,0,.35)) !important;

}


/* BOX */

.glass-box{

padding:16px 28px !important;

border-radius:18px !important;

background:
rgba(255,255,255,.08) !important;

border:
1px solid rgba(255,255,255,.12) !important;

backdrop-filter:blur(12px) !important;

color:#fff !important;

font-size:16px !important;

font-weight:600 !important;

white-space:nowrap !important;

box-shadow:
0 10px 25px rgba(0,0,0,.18) !important;

}

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

.eco-right{

width:45% !important;

animation:rightReveal 1s ease !important;

}

.eco-tag{

display:inline-block !important;

padding:10px 22px !important;
 font-weight: 200;

font-family: 'Montserrat', sans-serif;



color:#ffffff !important;

font-size:25px !important;

letter-spacing:2px !important;

margin-bottom:25px !important;

}

.eco-title{

font-size:50px !important;
font-family: 'Montserrat', sans-serif;

font-weight:200 !important;

line-height:1.1 !important;

color:#fff !important;

margin-bottom:25px !important;

}



.eco-text{
    font-family: 'Montserrat', sans-serif;

font-size:15px !important;

line-height:2 !important;

color:#ffffff !important;

margin-bottom:40px !important;

max-width:650px !important;

}

.eco-btn{

display:inline-block !important;

padding:16px 34px !important;

border-radius:50px !important;

background:
linear-gradient(135deg,#8cffc8,#42d392) !important;

color:#05281d !important;

font-weight:700 !important;

text-decoration:none !important;

transition:.4s ease !important;

}

.eco-btn:hover{

transform:
translateY(-6px)
scale(1.05) !important;

}

/* =========================================
ANIMATION
========================================= */

@keyframes moveLeft{

0%{
transform:translateX(0) !important;
}

100%{
transform:translateX(-50%) !important;
}

}

@keyframes moveRight{

0%{
transform:translateX(-50%) !important;
}

100%{
transform:translateX(0) !important;
}

}

@keyframes floatImage{

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

50%{
transform:translateY(-18px) !important;
}

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

}

@keyframes leftReveal{

from{
opacity:0 !important;
transform:translateX(-100px) !important;
}

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

}

@keyframes rightReveal{

from{
opacity:0 !important;
transform:translateX(100px) !important;
}

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

}

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

@media(max-width:992px){

.eco-section{

flex-direction:column !important;

text-align:center !important;

}

.eco-left,
.eco-right{

width:100% !important;

}

.eco-title{

font-size:52px !important;

}

}

@media(max-width:576px){

.eco-section{

padding:70px 5% !important;

}

.eco-title{

font-size:38px !important;

}

.eco-text{

font-size:15px !important;

line-height:1.8 !important;

}

.glass-box{

font-size:14px !important;

padding:14px 22px !important;

}

}

/* footer */

/* Footer Top - All in One Row */
.footer-top{
  display:flex !important;
  flex-direction:row !important;
  justify-content:space-between !important;
  align-items:flex-start !important;
  gap:20px !important;
  flex-wrap:nowrap !important;
}

/* All Footer Columns */
.footer-brand,
.footer-col,
.footer-certifications{
  flex:1 !important;
  min-width:auto !important;
}

/* Footer Links */
.footer-links{
  display:flex !important;
  flex-direction:column !important;
  gap:10px !important;
}

.footer-links a{
  text-decoration:none !important;
  color:#fff !important;
  transition:0.3s !important;
}

.footer-links a:hover{
  color:#00c896 !important;
}

/* Footer Bottom */
.footer-bottom{
  display:flex !important;
  justify-content:space-between !important;
  align-items:center !important;
  flex-wrap:wrap !important;
  gap:15px !important;
}

/* Responsive */
@media(max-width:991px){
  .footer-top{
    flex-wrap:wrap !important;
  }
}



/* our  Achievemnet */


.ugo-achievement-section{
    width:100% !important;
    padding:90px 6% !important;
    position:relative !important;
    overflow:hidden !important;
    
}

/* Animated Background Glow */

.ugo-achievement-section::before{
    content:"" !important;
    position:absolute !important;

    width:500px !important;
    height:500px !important;

    background:rgba(34,197,94,0.12) !important;

    border-radius:50% !important;

    filter:blur(120px) !important;

    top:-180px !important;
    left:-180px !important;

    animation:ugoGlow 8s linear infinite alternate !important;
}

@keyframes ugoGlow{

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

    100%{
        transform:translate(120px,80px);
    }

}

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

.ugo-section-title{
    text-align:center !important;
    margin-bottom:60px !important;
    position:relative !important;
    z-index:2 !important;
}

.ugo-section-title h4{
    font-family: 'Montserrat', sans-serif;
    color:#ffffff !important;
    font-size:25px !important;
    font-weight:200 !important;
    letter-spacing:4px !important;
    text-transform:uppercase !important;
    margin-bottom:16px !important;

    animation:fadeDown 1s ease !important;
}

.ugo-section-title h1{
    font-family: 'Montserrat', sans-serif;
    font-size:50px !important;
    font-weight:200!important;
    margin-bottom:18px !important;
    line-height:1.2 !important;

    animation:zoomIn 1s ease !important;
}

/* Gradient Animated Text */

.ugo-section-title h1 span{

    background:#ffffff !important;

    background-size:58px !important;

    -webkit-background-clip:text !important;

    -webkit-text-fill-color:transparent !important;

    animation:textMove 4s linear infinite !important;
}

@keyframes textMove{

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

    100%{
        background-position:200% center;
    }

}

.ugo-section-title p{
    font-family: 'Montserrat', sans-serif;
    max-width:760px !important;
    margin:auto !important;

    color:#ffffff !important;

    font-size:18px !important;

    line-height:1.9 !important;

    animation:fadeUp 1.2s ease !important;
}

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

.ugo-achievement-grid{
    display:grid !important;

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

    gap:30px !important;

    position:relative !important;
    z-index:2 !important;
}

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

.ugo-achievement-card{
    background:rgba(255,255,255,0.05) !important;

    border:1px solid rgba(255,255,255,0.08) !important;

    border-radius:26px !important;

    overflow:hidden !important;

    position:relative !important;

    transition:.45s ease !important;

    backdrop-filter:blur(10px) !important;

    opacity:1 !important;

    animation:cardFade 1s ease !important;
}

/* Hover */

.ugo-achievement-card:hover{
    transform:translateY(-12px) !important;

    box-shadow:0 20px 45px rgba(0,0,0,.45) !important;
}

/* Gradient Border */

.ugo-achievement-card::before{
    content:"" !important;

    position:absolute !important;

    inset:0 !important;

    padding:1px !important;

    border-radius:26px !important;

   

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

    -webkit-mask-composite:xor !important;

    mask-composite:exclude !important;

    pointer-events:none !important;
}

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

.ugo-card-image{
    width:100% !important;
    height:250px !important;
    overflow:hidden !important;
    position:relative !important;
}

.ugo-card-image img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;

    transition:.7s ease !important;
}

/* Hover Zoom */

.ugo-achievement-card:hover .ugo-card-image img{
    transform:scale(1.08) !important;
}

/* Overlay */

.ugo-card-image::after{
    content:"" !important;

    position:absolute !important;

    inset:0 !important;

    background:linear-gradient(
    to top,
    rgba(0,0,0,.55),
    transparent
    ) !important;
}

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

.ugo-card-content{
    padding:24px !important;
}

/* Year Badge */


/* Card Text */
 
/* ================= ANIMATIONS ================= */

@keyframes fadeUp{

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

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

}

@keyframes fadeDown{

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

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

}

@keyframes zoomIn{

    from{
        opacity:0;
        transform:scale(.8);
    }

    to{
        opacity:1;
        transform:scale(1);
    }

}

@keyframes cardFade{

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

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

}

@keyframes ugoPulse{

    0%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.05);
    }

    100%{
        transform:scale(1);
    }

}

/* ================= LAPTOP ================= */

@media(max-width:1200px){

.ugo-achievement-grid{
    gap:24px !important;
}

.ugo-card-content h3{
    font-size:16px !important;
}

}

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

@media(max-width:992px){

.ugo-achievement-grid{
    grid-template-columns:repeat(2,1fr) !important;
}

.ugo-section-title h1{
    font-size:42px !important;
}

.ugo-card-image{
    height:220px !important;
}

}

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

@media(max-width:768px){

.ugo-achievement-section{
    padding:70px 5% !important;
}

.ugo-achievement-grid{
    grid-template-columns:1fr !important;

    gap:22px !important;
}

.ugo-section-title{
    margin-bottom:42px !important;
}

.ugo-section-title h1{
    font-size:32px !important;
}

.ugo-section-title p{
    font-size:13px !important;

    line-height:1.8 !important;
}

.ugo-card-image{
    height:210px !important;
}

.ugo-card-content{
    padding:18px !important;
}

.ugo-card-content h3{
    font-size:15px !important;

    line-height:1.8 !important;
}

}

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

@media(max-width:480px){

.ugo-section-title h4{
    font-size:11px !important;
}

.ugo-section-title h1{
    font-size:26px !important;
}

.ugo-section-title p{
    font-size:12px !important;
}

.ugo-card-image{
    height:190px !important;
}

.ugo-card-content{
    padding:16px !important;
}

.ugo-card-content h3{
    font-size:14px !important;
}

.ugo-year{
    font-size:11px !important;
}

}


/* OUR CORE SERVICES  */


.ugo-services-section{
    width:100% !important;
    padding:100px 6% !important;
    position:relative !important;
    overflow:hidden !important;
    
}

/* Animated Glow */

.ugo-services-section::before{
    content:"" !important;
    position:absolute !important;

    width:550px !important;
    height:550px !important;

    background:rgba(34,197,94,.10) !important;

    border-radius:50% !important;

    filter:blur(120px) !important;

    top:-220px !important;
    right:-150px !important;

    animation:ugoGlow 8s linear infinite alternate !important;
}

@keyframes ugoGlow{

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

    100%{
        transform:translate(-80px,90px);
    }

}

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

.ugo-services-title{
    text-align:center !important;
    margin-bottom:70px !important;
    position:relative !important;
    z-index:2 !important;
}

.ugo-services-title h4{
    font-family: 'Montserrat', sans-serif;
    color:#ffffff!important;

    font-size:25px !important;

    letter-spacing:4px !important;

    text-transform:uppercase !important;

    margin-bottom:15px !important;

    font-weight:200 !important;
}

.ugo-services-title h1{
    font-family: 'Montserrat', sans-serif;
    font-size:58px !important;

    font-weight:200 !important;

    line-height:1.2 !important;

    margin-bottom:18px !important;
}

/* Gradient Text */

.ugo-services-title h1 span{

    background:#ffffff!important;

    background-size:58px auto !important;

    -webkit-background-clip:text !important;

   

    animation:ugoText 4s linear infinite !important;
}

@keyframes ugoText{

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

    100%{
        background-position:200% center;
    }

}

.ugo-services-title p{
    font-family: 'Montserrat', sans-serif;
    max-width:760px !important;

    margin:auto !important;

    color:#ffffff !important;

    font-size:18px !important;

    line-height:1.9 !important;
}

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

.ugo-services-grid{
    display:grid !important;

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

    gap:28px !important;

    position:relative !important;

    z-index:2 !important;
}

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

.ugo-service-card{
    position:relative !important;

    overflow:hidden !important;

    border-radius:26px !important;

    padding:35px 25px !important;

    background:rgba(255,255,255,.04) !important;

    border:1px solid rgba(255,255,255,.07) !important;

    backdrop-filter:blur(10px) !important;

    transition:.45s ease !important;

    text-align:center !important;
}

/* Premium Border */

.ugo-service-card::before{
    content:"" !important;

    position:absolute !important;

    inset:0 !important;

    padding:1px !important;

    border-radius:26px !important;


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

    -webkit-mask-composite:xor !important;

    mask-composite:exclude !important;

    pointer-events:none !important;
}

/* Hover */

.ugo-service-card:hover{
    transform:translateY(-12px) scale(1.02) !important;

    box-shadow:
    0 20px 45px rgba(0,0,0,.45),
    0 0 25px rgba(34,197,94,.18) !important;
}

/* Top Hover Light */

.ugo-service-card::after{
    content:"" !important;

    position:absolute !important;

    width:100% !important;

    height:0 !important;

    top:0 !important;

    left:0 !important;

    background:linear-gradient(
    180deg,
    rgba(34,197,94,.15),
    transparent
    ) !important;

    transition:.5s ease !important;
}

.ugo-service-card:hover::after{
    height:100% !important;
}

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

.ugo-service-icon{
    width:82px !important;

    height:82px !important;

    margin:auto !important;

    margin-bottom:24px !important;

    border-radius:50% !important;

    background:linear-gradient(
    135deg,
    #16a34a,
    #22c55e,
    #3b82f6
    ) !important;

    display:flex !important;

    align-items:center !important;

    justify-content:center !important;

    font-size:32px !important;

    box-shadow:
    0 15px 35px rgba(34,197,94,.28) !important;

    transition:.5s ease !important;

    position:relative !important;
}

/* Icon Glow */

.ugo-service-icon::before{
    content:"" !important;

    position:absolute !important;

    inset:-8px !important;

    border-radius:50% !important;

    border:1px solid rgba(34,197,94,.25) !important;

    animation:ugoPulse 2.5s infinite !important;
}

/* Icon Hover */

.ugo-service-card:hover .ugo-service-icon{
    transform:rotateY(180deg) scale(1.08) !important;
}

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

.ugo-service-card h3{
    font-family: 'Montserrat', sans-serif;
    color:#fff !important;

    font-size:17px !important;

    line-height:1.8 !important;

    font-weight:200 !important;

    transition:.4s ease !important;
}

/* Hover Text */

.ugo-service-card:hover h3{
    color:#ffffff!important;
}

/* ================= ANIMATION ================= */

@keyframes ugoPulse{

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

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

}

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

@media(max-width:1200px){

.ugo-services-grid{
    grid-template-columns:repeat(3,1fr) !important;
}

}

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

@media(max-width:992px){

.ugo-services-title h1{
    font-size:42px !important;
}

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

}

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

@media(max-width:768px){

.ugo-services-section{
    padding:75px 5% !important;
}

.ugo-services-title{
    margin-bottom:45px !important;
}

.ugo-services-title h1{
    font-size:34px !important;
}

.ugo-services-title p{
    font-size:13px !important;

    line-height:1.8 !important;
}

.ugo-services-grid{
    grid-template-columns:1fr !important;

    gap:22px !important;
}

.ugo-service-card{
    padding:28px 20px !important;
}

.ugo-service-icon{
    width:70px !important;
    height:70px !important;
    font-size:28px !important;
}

.ugo-service-card h3{
    font-size:15px !important;

    line-height:1.7 !important;
}

}

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

@media(max-width:480px){

.ugo-services-title h4{
    font-size:11px !important;
}

.ugo-services-title h1{
    font-size:27px !important;
}

.ugo-services-title p{
    font-size:12px !important;
}

.ugo-service-card{
    border-radius:22px !important;
}

.ugo-service-card h3{
    font-size:14px !important;
}

}



/* about banner  */
/* =========================================
   ABOUT BANNER
========================================= */

.about-banner{

    width:100% !important;

    height:72vh !important;

    position:relative !important;

    overflow:hidden !important;

    display:flex !important;

    align-items:center !important;

    justify-content:center !important;

    background:#041b14 !important;

    isolation:isolate !important;
}

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

.about-banner img{

    width:100% !important;

    height:100% !important;

    object-fit:cover !important;

    object-position:center !important;

    position:absolute !important;

    inset:0 !important;

    z-index:1 !important;

    animation:zoomBg 12s ease-in-out infinite alternate !important;

    /* OPACITY LOW */
    opacity:.55 !important;

    filter:
    brightness(.75)
    contrast(1.05)
    saturate(1.1) !important;
}

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

.about-overlay{

    position:absolute !important;

    inset:0 !important;

  
}

/* =========================================
   ANIMATED LINES
========================================= */

.banner-lines{

    position:absolute !important;

    inset:0 !important;

    z-index:3 !important;

    background-image:

    linear-gradient(
    rgba(255,255,255,.04) 1px,
    transparent 1px),

    linear-gradient(
    90deg,
    rgba(255,255,255,.04) 1px,
    transparent 1px);

    background-size:80px 80px !important;

    mask-image:
    linear-gradient(to bottom,
    transparent,
    rgba(0,0,0,.9),
    transparent) !important;

    animation:gridMove 15s linear infinite !important;
}

/* =========================================
   GREEN GLOW
========================================= */

.about-banner::before{

    content:'' !important;

    position:absolute !important;

    width:650px !important;
    height:650px !important;

    top:-250px !important;
    left:-180px !important;

    border-radius:50% !important;

    background:
    radial-gradient(circle,
    rgba(0,255,174,.18),
    transparent 70%) !important;

    filter:blur(90px) !important;

    z-index:2 !important;

    animation:glowMove 8s ease-in-out infinite alternate !important;
}

.about-banner::after{

    content:'' !important;

    position:absolute !important;

    width:450px !important;
    height:450px !important;

    bottom:-180px !important;
    right:-120px !important;

    border-radius:50% !important;

    background:
    radial-gradient(circle,
    rgba(201, 226, 218, 0.15),
    transparent 70%) !important;

    filter:blur(40px) !important;

    z-index:2 !important;

    animation:glowMove2 10s ease-in-out infinite alternate !important;
}

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

.about-content{

    position:relative !important;

    z-index:10 !important;

    text-align:center !important;

    padding:50px 65px !important;

    border-radius:35px !important;

   

    animation:contentFloat 5s ease-in-out infinite !important;
}

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

.about-content h1{

    font-size:57px !important;

    font-weight:800 !important;

    color:#fff !important;

    line-height:1 !important;

    margin-bottom:28px !important;

    text-shadow:
    0 0 20px rgba(0,255,174,.15) !important;
}

.about-content h1 span{

    color:#00ffae !important;

    text-shadow:
    0 0 18px rgba(0,255,174,.6),
    0 0 40px rgba(0,255,174,.35) !important;
}

/* =========================================
   BREADCRUMB
========================================= */

.breadcrumb{

    display:flex !important;

    align-items:center !important;

    justify-content:center !important;

    gap:16px !important;

    flex-wrap:wrap !important;
}

/* HOME */

.breadcrumb a{

    text-decoration:none !important;

    color:#8cffc8 !important;

    font-size:22px !important;

    font-weight:600 !important;

    transition:.35s ease !important;
}

.breadcrumb a:hover{

    color:#00ffae !important;

    transform:translateY(-2px) !important;
}

/* DOT */

.bread-dot{

    width:10px !important;

    height:10px !important;

    border-radius:50% !important;

    background:#00ffae !important;

    box-shadow:
    0 0 15px rgba(0,255,174,.9),
    0 0 35px rgba(0,255,174,.5) !important;

    animation:pulseDot 1.8s infinite !important;
}

/* ABOUT */

.breadcrumb p{

    color:#fff !important;

    font-size:22px !important;

    font-weight:600 !important;
}

/* about us  hero section  */

/* ═════════════ ABOUT SECTION ADVANCED ═════════════ */





.eco-container{
    width:90%;
    max-width:1320px;
    margin:auto;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:70px;
}

/*==========================
    LEFT IMAGE AREA
===========================*/

.eco-about-images{
    position:relative;
    width:50%;
    min-height:650px;
}

/* Common Image Box */

.eco-img-box{
    position:absolute;
    overflow:hidden;
    border-radius:10px;
    background:#ddd;
    box-shadow:0 20px 50px rgba(0,0,0,.12);
    transition:.5s ease;
}

.eco-img-box img{
    width:100%;
    height:100%;
    display:block;
    object-fit:cover;
    transition:transform .7s ease;
}

/* Hover Zoom */

.eco-img-box:hover img{
    transform:scale(1.08);
}

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

/* Top Large Image */

.eco-img1{
    width:390px;
    height:460px;
    top:0;
    right:30px;
    animation:ecoFloat1 5s ease-in-out infinite;
     border:2px solid #fff;
}

/* Left Bottom Image */

.eco-img2{
    width:340px;
    height:390px;
    left:0;
    top:200px;
    border:2px solid #fff;
    z-index:2;
    animation:ecoFloat2 6s ease-in-out infinite;
    margin-left: -46px;
}

/* Bottom Small Image */

.eco-img3{
  
    width:330px;
    height:210px;
    right:0;
    bottom:0;
    animation:ecoFloat3 7s ease-in-out infinite;
     border:2px solid #fff;
}

/* Floating Animations */

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

@keyframes ecoFloat2{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(10px);}
}

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



.eco-experience-box h2{
    font-size:58px;
    color:#064f46;
    font-weight:800;
    line-height:1;
}

.eco-experience-box span{
    font-size:22px;
    color:#064f46;
    font-weight:600;
    line-height:1.3;
}

@keyframes pulseBox{
    0%{transform:scale(1);}
    50%{transform:scale(1.04);}
    100%{transform:scale(1);}
}

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

.eco-about-content{
    width:50%;
}

.eco-sub-title{
    display:inline-block;
    color:#666;
    font-size:22px;
    margin-bottom:15px;
}

.eco-about-content h1{
    font-size:50px;
    line-height:1.1;
    color:#fff;
    margin-bottom:25px;
    font-weight: 200;
}
.eco-about-content p{
    color: #fff;
    font-size: 15px;
    line-height: 1.8;
    margin-bottom: 28px;
    max-width: 550px;      /* paragraph ki fixed width */
    width: 100%;
    text-align: justify;   /* dono side se align */
    word-break: normal;
    overflow-wrap: break-word;
}

.eco-features{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:18px 0px;
    margin-bottom:40px;
    
}

.eco-features div{
    color:#fff;
    font-size:15px;
    transition:.3s;
}

.eco-features div:hover{
    color:#fff;
    transform:translateX(5px);
}

/* Bottom */

.eco-bottom-area{
    display:flex;
    align-items:center;
    gap:30px;
    flex-wrap:wrap;
}

.eco-btn:hover{
    background:#064f46;
    color:#fff;
    transform:translateY(-5px);
}

.eco-donation small{
    display:block;
    color:#777;
    font-size:17px;
}

.eco-donation h3{
    color:#111;
    font-size:32px;
    margin-top:5px;
}

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

@media(max-width:1100px){

    .eco-container{
        flex-direction:column;
    }

    .eco-about-images,
    .eco-about-content{
        width:100%;
    }

    .eco-about-images{
        max-width:700px;
        margin:auto;
    }
}

@media(max-width:768px){

    .eco-about-images{
        display:grid;
        grid-template-columns:1fr 1fr;
        gap:15px;
        min-height:auto;
    }

    .eco-img-box,
    .eco-experience-box{
        position:relative !important;
        width:100% !important;
        height:220px !important;
        top:auto !important;
        left:auto !important;
        right:auto !important;
        bottom:auto !important;
        animation:none;
    }

    .eco-img-box img{
        width:100%;
        height:100%;
        object-fit:cover;
    }

    .eco-experience-box{
        grid-column:1 / -1;
        justify-content:center;
        height:auto !important;
        padding:20px;
    }

    .eco-about-content{
        text-align:center;
    }

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

    .eco-about-content p{
        font-size:17px;
    }

    .eco-features{
        grid-template-columns:1fr;
    }

    .eco-bottom-area{
        justify-content:center;
    }
}

/* our visson and mission  */


/* ═════════════ VISION SECTION ═════════════ */

.vision-section{

    position:relative !important;

    overflow:hidden !important;

    padding:120px 7% !important;

    display:grid !important;

    grid-template-columns:420px 1fr !important;

    gap:80px !important;

    align-items:center !important;

   
}

/* GLOW */

.vision-section::before{

    content:'' !important;

    position:absolute !important;

    width:700px !important;

    height:700px !important;

    border-radius:50% !important;

    background:
    radial-gradient(circle,
    rgba(0,255,170,0.12),
    transparent 70%) !important;

    top:-250px !important;

    right:-250px !important;

    filter:blur(50px) !important;
}

/* LEFT SIDE */

.vision-left{

    display:grid !important;

    grid-template-columns:1fr 1fr !important;

    gap:18px !important;

    position:relative !important;

    z-index:2 !important;
}

/* CARD */

.vision-card{

    position:relative !important;

    overflow:hidden !important;

    padding:22px 18px !important;

    border-radius:24px !important;

    background:
    rgba(255,255,255,0.06) !important;

    border:
    1px solid rgba(255,255,255,0.08) !important;

    backdrop-filter:blur(16px) !important;

    transition:0.45s ease !important;

    min-height:210px !important;
}

/* RUNNING BORDER */

.vision-card::before{

    content:'' !important;

    position:absolute !important;

    inset:-2px !important;

    border-radius:26px !important;

    padding:2px !important;

    background:
    linear-gradient(
    90deg,
    transparent,
    #00ffae,
    transparent,
    transparent
    ) !important;

    background-size:300% 300% !important;

    opacity:0 !important;

    animation:borderRun 4s linear infinite !important;

    transition:0.4s ease !important;

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

    -webkit-mask-composite:xor !important;

    mask-composite:exclude !important;
}

.vision-card:hover::before{

    opacity:1 !important;
}

.vision-card:hover{

    transform:translateY(-10px) !important;

    box-shadow:
    0 18px 40px rgba(0,255,170,0.12) !important;
}

/* ICON */

.vision-icon{

    width:55px !important;

    height:55px !important;

    border-radius:18px !important;

    display:flex !important;

    align-items:center !important;

    justify-content:center !important;

    font-size:24px !important;

    background:
    rgba(0,255,170,0.12) !important;

    margin-bottom:18px !important;
}

/* CARD TITLE */

.vision-card h3{
     font-family: 'Montserrat', sans-serif;

    color:#ffffff !important;

    font-size:18px !important;

    margin-bottom:14px !important;

    font-weight:200 !important;
}

/* CARD TEXT */

.vision-card p{
  font-family: 'Montserrat', sans-serif;
    color:#ffffff !important;

    line-height:1.8 !important;

    font-size:13px !important;
}

/* RIGHT CONTENT */

.vision-right{

    position:relative !important;

    z-index:2 !important;
}

/* TAG */

.vision-tag{
    font-family: 'Montserrat', sans-serif;

    display:inline-flex !important;

    align-items:center !important;

    gap:10px !important;

    padding:12px 24px !important;

    font-size: 22px;

  

    

    color:#ffffff !important;

    font-weight:200 !important;

    margin-bottom:28px !important;

    
}

/* TITLE */

.vision-right h2{
font-family: 'Montserrat', sans-serif;
    font-size:40px !important;

    line-height:1.15 !important;

    color:#ffffff !important;

    margin-bottom:32px !important;

    font-weight:200!important;
}

/* GREEN TEXT */

.vision-right h2 span{

    background:#ffffff !important;

    -webkit-background-clip:text !important;

    -webkit-text-fill-color:transparent !important;
}

/* PARAGRAPH */

.vision-right p{
 font-family: 'Montserrat', sans-serif;
    color:#ffffff !important;

    line-height:2 !important;

    font-size:16px !important;

    margin-bottom:22px !important;

    max-width:850px !important;
}

/* ANIMATION */

@keyframes borderRun{

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

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

/* RESPONSIVE */

@media(max-width:1200px){

    .vision-section{

        grid-template-columns:1fr !important;

        gap:60px !important;
    }

    .vision-right h2{

        font-size:54px !important;
    }
}

@media(max-width:768px){

    .vision-section{

        padding:90px 5% !important;
    }

    .vision-left{

        grid-template-columns:1fr 1fr !important;
    }

    .vision-right h2{

        font-size:38px !important;

        line-height:1.3 !important;
    }

    .vision-right p{

        font-size:15px !important;

        line-height:1.9 !important;
    }

    .vision-card{

        min-height:190px !important;

        padding:18px 16px !important;
    }

    .vision-card h3{

        font-size:15px !important;
    }

    .vision-card p{

        font-size:12px !important;
    }
}

@media(max-width:520px){

    .vision-left{

        grid-template-columns:1fr !important;
    }

    .vision-right h2{

        font-size:32px !important;
    }
}



/* our core values about section  */





/* footer */

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

.ugo-footer{

    position:relative !important;

    overflow:hidden !important;

    padding:90px 6% 35px !important;

    color:#fff !important;

    background:#032619 !important;

    isolation:isolate !important;

    font-family:'Poppins',sans-serif !important;
}

/* BACKGROUND */

.footer-bg{

    position:absolute !important;

    inset:0 !important;

    width:100% !important;

    height:100% !important;

    object-fit:cover !important;

    opacity:.40 !important;

    animation:bgZoom 18s ease-in-out infinite alternate !important;

    z-index:-5 !important;
}

@keyframes bgZoom{

    0%{
        transform:scale(1.05) !important;
    }

    100%{
        transform:scale(1.15) !important;
    }
}

/* OVERLAY */

.footer-overlay{

    position:absolute !important;

    inset:0 !important;

    z-index:-4 !important;
}

/* GREEN GLOW */

.footer-glow{

    position:absolute !important;

    width:850px !important;

    height:850px !important;

    border-radius:50% !important;

    background:
    radial-gradient(circle,
    rgba(0,255,170,0.18) 0%,
    transparent 70%) !important;

    top:-320px !important;

    right:-220px !important;

    filter:blur(30px) !important;

    animation:glowMove 8s ease-in-out infinite alternate !important;

    z-index:-3 !important;
}

@keyframes glowMove{

    from{
        transform:translateY(0px) !important;
    }

    to{
        transform:translateY(50px) !important;
    }
}

/* GRID */

.footer-container{

    display:grid !important;

    grid-template-columns:
    2fr
    1fr
    1fr
    1.4fr !important;

    gap:45px !important;

    align-items:flex-start !important;

    position:relative !important;

    z-index:5 !important;
}

/* LOGO */

.footer-logo{

    width:73px !important;

    margin-bottom:20px !important;
}

/* BADGE */

.footer-badge{

    display:inline-flex !important;

    align-items:center !important;

    gap:10px !important;

    padding:10px 20px !important;

    border-radius:50px !important;

    background:
    rgba(255,255,255,0.07) !important;

    border:
    1px solid rgba(255,255,255,0.08) !important;

    color:#8fffd8 !important;

    font-size:13px !important;

    backdrop-filter:blur(12px) !important;

    margin-bottom:24px !important;
}

/* TITLE */

.footer-brand h2{
    font-family: 'Montserrat', sans-serif;

    font-size:12px !important;

    line-height:1.3 !important;

    font-weight:200 !important;

    margin-bottom:20px !important;

    background:
    linear-gradient(
    to right,
    #ffffff,
    #8dffd7) !important;

    -webkit-background-clip:text !important;

    -webkit-text-fill-color:transparent !important;
}

.footer-brand p{

    color:#fff !important;

    line-height:1.9 !important;

    font-size:20px !important;
    font-weight: 500 !important;
}

/* SOCIAL */

.footer-social{

    display:flex !important;

    gap:15px !important;

    margin-top:30px !important;
}

.footer-social a{

    width:35px !important;

    height:34px !important;

    border-radius:50% !important;

    display:flex !important;

    align-items:center !important;

    justify-content:center !important;

    text-decoration:none !important;

    color:#fff !important;

    background:
    rgba(255,255,255,0.08) !important;

    border:
    1px solid rgba(255,255,255,0.08) !important;

    backdrop-filter:blur(10px) !important;

    transition:0.4s ease !important;
}

.footer-social a:hover{

    transform:
    translateY(-8px)
    scale(1.08) !important;

    background:
    linear-gradient(
    135deg,
    #00ffae,
    #00c26e) !important;

    box-shadow:
    0 10px 30px rgba(0,255,170,0.35) !important;
}

/* ALL BOX */

.footer-col,
.footer-brand{

    margin-left: -20px;
margin-top: -5px;


    padding:15px !important;

   

  

    transition:0.4s ease !important;
}

.footer-col:hover,
.footer-brand:hover{

    transform:translateY(-8px) !important;

    
}

/* HEADINGS */

.footer-col h3{
    font-family: 'Montserrat', sans-serif;

    position:relative !important;

    font-size:20px !important;

    margin-bottom:19px !important;

    display:inline-block !important;
}

/* RUNNING GLOW LINE */

.footer-col h3::after{

    content:'' !important;

    position:absolute !important;

    left:0 !important;

    bottom:-12px !important;

    width:100% !important;

    height:3px !important;

    border-radius:20px !important;

    overflow:hidden !important;

    background:
    rgba(255,255,255,0.1) !important;
}


@keyframes runningLine{

    0%{
        left:-40px !important;
    }

    100%{
        left:100% !important;
    }
}

/* LINKS */

.footer-links{

    list-style:none !important;
}

.footer-links li{

    margin-bottom:5px !important;
}

.footer-links li a{
    font-family: 'Montserrat', sans-serif;
    color:#ffffff !important;

    text-decoration:none !important;

    transition:0.3s ease !important;

    position:relative !important;
    font-size: 15px;
}

.footer-links li a:hover{

    color:#00ffae !important;

    padding-left:10px !important;
}

/* CONTACT */

.contact-box{

    display:flex !important;

    gap:15px !important;

    margin-bottom:-2px !important;
}

.contact-icon{

    margin-left:-16px !important;

    width:45px !important;

    height:45px !important;

    min-width:45px !important;

    border-radius:14px !important;

    display:flex !important;

    align-items:center !important;

    justify-content:center !important;

    color:#00ffae !important;
}

.contact-box a,
.contact-box p{

    margin-top:9px !important;

    margin-left:-25px !important;

    color:#ffffff !important;

    line-height:1.8 !important;

    text-decoration:none !important;
}

/* HOURS */

.hours-card{

    margin-top:11px !important;

    padding:7px !important;
}

.hour-row{

    display:flex !important;

    justify-content:space-between !important;

    margin-bottom:16px !important;

    color:#d7eee1 !important;
}

/* GREEN TEXT BOX */

.green-box{

    margin-top:20px !important;

    padding:18px !important;

    border-radius:18px !important;

    background:
    linear-gradient(
    135deg,
    rgba(0,255,170,0.12),
    rgba(0,180,110,0.06)) !important;

    border:
    1px solid rgba(0,255,170,0.08) !important;

    color:#dffdf1 !important;

    line-height:1.8 !important;
}

/* FOOTER BOTTOM */

.footer-bottom{

    margin-top:75px !important;
    

    padding-top:24px !important;

    border-top:
    1px solid rgba(255,255,255,0.08) !important;

    display:flex !important;

    justify-content:space-between !important;

    align-items:center !important;

    flex-wrap:wrap !important;

    gap:20px !important;
}

.footer-bottom p{

    color:#d5ece0 !important;

    font-size:14px !important;
}

.bottom-links{

    display:flex !important;

    gap:25px !important;
}

.bottom-links a{

    color:#d5ece0 !important;

    text-decoration:none !important;

    transition:0.3s !important;
}

.bottom-links a:hover{

    color:#00ffae !important;
}

/* MOBILE */

@media(max-width:1100px){

    .footer-container{

        grid-template-columns:
        1fr 1fr !important;
    }
}

@media(max-width:768px){

    .footer-container{

        grid-template-columns:1fr !important;
    }

    .footer-brand h2{

        font-size:28px !important;
    }

    .footer-bottom{

        flex-direction:column !important;

        align-items:flex-start !important;
    }
}



/* carres new css */
/* =========================================
   PREMIUM GREEN ANIMATED SECTION
========================================= */


/* ========================================= */

.serve-section{
    position:relative !important;
    width:100% !important;
    padding:120px 7% !important;
    overflow:hidden !important;

 
}

/* =========================================
   ANIMATED GLOW
========================================= */

.bg-blur{
    position:absolute !important;
    border-radius:50% !important;
    filter:blur(130px) !important;
    z-index:0 !important;
}

.blur1{
    width:400px !important;
    height:400px !important;
    background:#00ff8840 !important;

    top:-120px !important;
    left:-120px !important;

    animation:moveGlow1 8s ease-in-out infinite alternate !important;
}

.blur2{
    width:300px !important;
    height:300px !important;
    background:#00ff6a20 !important;

    bottom:-80px !important;
    right:-80px !important;

    animation:moveGlow2 8s ease-in-out infinite alternate !important;
}

@keyframes moveGlow1{

    from{
        transform:translate(0,0) !important;
    }

    to{
        transform:translate(50px,30px) !important;
    }
}

@keyframes moveGlow2{

    from{
        transform:translate(0,0) !important;
    }

    to{
        transform:translate(-40px,-30px) !important;
    }
}

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

.serve-container{
    position:relative !important;
    z-index:2 !important;

    display:grid !important;
    grid-template-columns:1fr 1fr !important;

    align-items:center !important;
    gap:100px !important;
}

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

.serve-left{
    animation:fadeLeft 1.2s ease forwards !important;
}

@keyframes fadeLeft{

    from{
        opacity:0 !important;
        transform:translateX(-60px) !important;
    }

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

.main-image{
    position:relative !important;
    width:100% !important;
    max-width:500px !important;
}

/* moving image */

.main-image img{
    width:100% !important;
    height:650px !important;

    object-fit:cover !important;

    border-radius:28px !important;

    border:1px solid rgba(255,255,255,0.08) !important;

    box-shadow:
    0 30px 80px rgba(0,0,0,0.45) !important;

    transition:.6s ease !important;

    animation:floatingImage 5s ease-in-out infinite !important;
}

@keyframes floatingImage{

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

    50%{
        transform:translateY(-15px) !important;
    }

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

.main-image:hover img{
    transform:scale(1.03) !important;
}

/* =========================================
   ROTATING BADGE
========================================= */

.rotating-text{
    position:absolute !important;

    width:180px !important;
    height:180px !important;

    background:
    linear-gradient(135deg,#00ff88,#00c76a) !important;

    border-radius:50% !important;

    bottom:-60px !important;
    left:50% !important;

    transform:translateX(-50%) !important;

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

    box-shadow:
    0 20px 60px rgba(0,255,136,0.35) !important;

    animation:badgeFloat 4s ease-in-out infinite !important;
}

@keyframes badgeFloat{

    0%{
        transform:translateX(-50%) translateY(0px) !important;
    }

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

    100%{
        transform:translateX(-50%) translateY(0px) !important;
    }
}

.rotating-text svg{
    position:absolute !important;
    width:100% !important;
    height:100% !important;

    animation:rotateText 12s linear infinite !important;
}

.rotating-text text{
    fill:white !important;
    font-size:13px !important;
    letter-spacing:4px !important;
    font-weight:700 !important;
}

.center-icon{
    width:70px !important;
    height:70px !important;

    background:white !important;

    border-radius:50% !important;

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

    color:#00b85c !important;
    font-size:28px !important;

    animation:iconPulse 2s infinite !important;
}

@keyframes iconPulse{

    0%{
        transform:scale(1) !important;
    }

    50%{
        transform:scale(1.1) !important;
    }

    100%{
        transform:scale(1) !important;
    }
}

@keyframes rotateText{

    from{
        transform:rotate(0deg) !important;
    }

    to{
        transform:rotate(360deg) !important;
    }
}

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

.serve-right{
    max-width:620px !important;

    animation:fadeRight 1.2s ease forwards !important;
}

@keyframes fadeRight{

    from{
        opacity:0 !important;
        transform:translateX(60px) !important;
    }

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

/* ========================================= */

.mini-title{
    display:inline-block !important;

    padding:10px 20px !important;

    border-radius:100px !important;
   font-family: 'Montserrat', sans-serif;
    

    color:#ffffff!important;

    font-size:22px !important;
    font-weight:200 !important;

    letter-spacing:1px !important;

    margin-bottom:25px !important;

    animation:fadeUp 1s ease forwards !important;
}

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

.serve-right h2{
    font-size:40px !important;

    line-height:1.05 !important;

    color:white !important;

    margin-bottom:30px !important;

    font-weight:200!important;

    animation:fadeUp 1.2s ease forwards !important;
    font-family: 'Montserrat', sans-serif;
}

.serve-right h2 span{

    background:
    linear-gradient(90deg,#00ff88,#9effca) !important;

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

/* ========================================= */

.serve-right p{
    font-family: 'Montserrat', sans-serif;
    font-size:16px !important;
    line-height:1.9 !important;

    color:#F8FFF9 !important;

    margin-bottom:40px !important;

    animation:fadeUp 1.4s ease forwards !important;
}

@keyframes fadeUp{

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

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

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

.feature-list{
    display:flex !important;
    flex-direction:column !important;
    gap:20px !important;
}

.feature-card{
    display:flex !important;
    align-items:flex-start !important;
    gap:18px !important;

    padding:24px !important;

    border-radius:24px !important;

    background:
    rgba(255,255,255,0.04) !important;

    backdrop-filter:blur(14px) !important;

    border:1px solid rgba(255,255,255,0.06) !important;

    transition:.5s ease !important;

    animation:cardMove 5s ease-in-out infinite !important;
}

.feature-card:nth-child(2){
    animation-delay:1.5s !important;
}

@keyframes cardMove{

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

    50%{
        transform:translateY(-10px) !important;
    }

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

.feature-card:hover{
    transform:translateY(-10px) scale(1.02) !important;

    border-color:rgba(0,255,136,0.25) !important;

    box-shadow:
    0 20px 50px rgba(0,255,136,0.12) !important;
}

.feature-card span{
    font-size:30px !important;
}

.feature-card h4{
    font-family: 'Montserrat', sans-serif;
    color:white !important;
    margin-bottom:8px !important;
    font-size:20px !important;
}

.feature-card p{
    margin:0 !important;
    font-size:15px !important;
    color:#fff !important;
}

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

@media(max-width:1100px){

    .serve-container{
        grid-template-columns:1fr !important;
        gap:120px !important;
    }

    .serve-right{
        max-width:100% !important;
        text-align:center !important;
    }

    .main-image{
        margin:auto !important;
    }

    .feature-card{
        text-align:left !important;
    }
}

@media(max-width:768px){

    .serve-section{
        padding:90px 20px !important;
    }

    .main-image img{
        height:500px !important;
    }

    .rotating-text{
        width:140px !important;
        height:140px !important;
    }

    .center-icon{
        width:55px !important;
        height:55px !important;
        font-size:22px !important;
    }

    .serve-right h2{
        font-size:3rem !important;
    }
}

@media(max-width:480px){

    .main-image img{
        height:400px !important;
    }

    .serve-right h2{
        font-size:2.2rem !important;
    }

    .serve-right p{
        font-size:15px !important;
    }

    .feature-card{
        padding:18px !important;
    }
}



/* cards  */
/* ====================================
   4 MINI GLASS BOXES
==================================== */

.career-stats-grid{

    display:grid !important;

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

    gap:22px !important;

    width:100% !important;

    max-width:520px !important;
}

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

.career-mini-card{

    position:relative !important;

    padding:35px 25px !important;

    border-radius:28px !important;

    overflow:hidden !important;

    background:
    rgba(255,255,255,0.05) !important;

    backdrop-filter:blur(16px) !important;

    border:
    1px solid rgba(255,255,255,0.08) !important;

    transition:.5s ease !important;

    text-align:center !important;

    cursor:pointer !important;
}

/* glow */

.career-mini-card::before{

    content:'' !important;

    position:absolute !important;

    width:180px !important;
    height:180px !important;

    background:
    radial-gradient(circle,#00ff8840 0%,transparent 70%) !important;

    top:-90px !important;
    right:-70px !important;

    opacity:0 !important;

    transition:.5s ease !important;
}

/* hover */

.career-mini-card:hover{

    transform:
    translateY(-10px)
    scale(1.03) !important;

    border-color:
    rgba(0,255,136,0.28) !important;

    box-shadow:
    0 25px 60px rgba(0,255,136,0.14) !important;
}

.career-mini-card:hover::before{

    opacity:1 !important;
}

/* number */

.career-mini-card h3{
     font-family: 'Montserrat', sans-serif;

    font-size:3rem !important;

    font-weight:200 !important;

    margin-bottom:10px !important;

    background:#ffffff!important;

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

/* text */

.career-mini-card p{

    color:
    rgba(255,255,255,0.72) !important;
    font-family: 'Montserrat', sans-serif;

    font-size:15px !important;

    line-height:1.6 !important;
}

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

@media(max-width:768px){

    .career-stats-grid{

        gap:16px !important;
    }

    .career-mini-card{

        padding:28px 18px !important;

        border-radius:22px !important;
    }

    .career-mini-card h3{

        font-size:2.3rem !important;
    }

    .career-mini-card p{

        font-size:13px !important;
    }
}

@media(max-width:480px){

    .career-stats-grid{

        grid-template-columns:
        1fr 1fr !important;
    }

    .career-mini-card{

        padding:24px 14px !important;
    }

    .career-mini-card h3{

        font-size:2rem !important;
    }
}


/* opening  */

/* =========================================
   UGO CAREER OPENINGS
========================================= */

.ugo-career-openings{

    position:relative !important;

    width:100% !important;

    overflow:hidden !important;

    padding:120px 7% !important;

    
}

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

.ugo-career-glow{

    position:absolute !important;

    border-radius:50% !important;

    filter:blur(120px) !important;

    opacity:.5 !important;
}

.glow-left{

    width:320px !important;
    height:320px !important;

    background:#00ff8840 !important;

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

.glow-right{

    width:280px !important;
    height:280px !important;

    background:#d4ff0030 !important;

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

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

.ugo-career-container{

    position:relative !important;

    z-index:2 !important;

    display:grid !important;

    grid-template-columns:1fr 1fr !important;

    gap:80px !important;

    align-items:center !important;
}

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

.ugo-career-tag{
    font-family: 'Montserrat', sans-serif;

    display:inline-flex !important;

    align-items:center !important;

    gap:10px !important;

    padding:12px 20px !important;

    color:#ffffff!important;

    font-size:22px !important;

    font-weight:200 !important;

    margin-bottom:25px !important;
}

.ugo-career-left h2{
   font-family: 'Montserrat', sans-serif;
    font-size:40px !important;

    line-height:1.05 !important;

    color:#ffffff !important;

    font-weight:200!important;

    margin-bottom:28px !important;
}

.ugo-career-left h2 span{

    background:#ffffff !important;

    -webkit-background-clip:text !important;

    -webkit-text-fill-color:transparent !important;
}

.ugo-career-desc{
    font-family: 'Montserrat', sans-serif;
    color:#ffffff !important;

    font-size:16px !important;

    line-height:1.9 !important;

    margin-bottom:40px !important;
}

/* mini stats */

.ugo-career-mini{

    display:flex !important;

    gap:20px !important;

    flex-wrap:wrap !important;
}

.ugo-mini-box{

    min-width:160px !important;

    padding:24px !important;

    border-radius:24px !important;

    background:
    rgba(255,255,255,0.04) !important;

    backdrop-filter:blur(14px) !important;

    border:
    1px solid rgba(255,255,255,0.08) !important;

    transition:.4s ease !important;
}

.ugo-mini-box:hover{

    transform:translateY(-8px) !important;

    border-color:
    rgba(0,255,136,0.25) !important;

    box-shadow:
    0 20px 40px rgba(0,255,136,0.12) !important;
}

.ugo-mini-box h3{
    font-family: 'Montserrat', sans-serif;
    font-size:2rem !important;

    margin-bottom:8px !important;

    background:#ffffff !important;

    -webkit-background-clip:text !important;

    -webkit-text-fill-color:transparent !important;
}

.ugo-mini-box p{
   font-family: 'Montserrat', sans-serif;
    color:rgba(255,255,255,0.72) !important;
}

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

.ugo-career-right{

    display:flex !important;

    flex-direction:column !important;

    gap:24px !important;
}

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

.ugo-job-card{

    display:flex !important;

    align-items:flex-start !important;

    gap:0px !important;

    padding:8px !important;

    border-radius:28px !important;

   
}

.ugo-job-card:hover{

    transform:
    translateY(-8px)
    scale(1.02) !important;

    border-color:
    rgba(0,255,136,0.25) !important;

    box-shadow:
    0 20px 60px rgba(0,255,136,0.12) !important;
}

/* icon */

.ugo-job-icon{

    min-width:75px !important;

    width:75px !important;
    height:75px !important;

    border-radius:24px !important;

    display:flex !important;

    align-items:center !important;

    justify-content:center !important;

    font-size:32px !important;

  
}

/* content */

.ugo-job-content h3{
 font-family: 'Montserrat', sans-serif;
    color:#ffffff !important;

    font-size:22px!important;

    margin-bottom:10px !important;
     margin-top: 10px;
   margin-left: -14;
}

.ugo-job-content p{
    font-family: 'Montserrat', sans-serif;
    color:#ffffff !important;

    line-height:1.8 !important;

    font-size:16px !important;
}

/* =========================================
   APPLY BOX
========================================= */

.ugo-apply-box{

    padding:35px !important;

    border-radius:28px !important;

    background:
    linear-gradient(
        135deg,
        rgba(0,255,136,0.12),
        rgba(255,255,255,0.04)
    ) !important;

    border:
    1px solid rgba(0,255,136,0.18) !important;
}

.ugo-apply-box h4{
    font-family: 'Montserrat', sans-serif;
    color:#ffffff !important;

    font-size:22px !important;

    margin-bottom:15px !important;
}

.ugo-apply-box p{
    font-size: 16px;

    color:#ffffff!important;

    line-height:1.8 !important;

    margin-bottom:20px !important;
}

.ugo-apply-box a{
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;

    display:inline-flex !important;

    align-items:center !important;

    gap:10px !important;

    padding:9px 17px !important;

    border-radius:100px !important;

    text-decoration:none !important;

    font-weight:200!important;

    background:
    linear-gradient(90deg,#00ff88,#00c76a) !important;

    color:#04110a !important;

    transition:.4s ease !important;
}

.ugo-apply-box a:hover{

    transform:translateY(-5px) !important;

    box-shadow:
    0 15px 40px rgba(0,255,136,0.25) !important;
}

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

@media(max-width:1100px){

    .ugo-career-container{

        grid-template-columns:1fr !important;

        gap:60px !important;
    }
}

@media(max-width:768px){

    .ugo-career-openings{

        padding:90px 20px !important;
    }

    .ugo-career-left h2{

        font-size:3rem !important;
    }

    .ugo-job-card{

        padding:22px !important;

        border-radius:22px !important;
    }

    .ugo-job-icon{

        min-width:60px !important;

        width:60px !important;
        height:60px !important;

        font-size:24px !important;
    }

    .ugo-job-content h3{

        font-size:1.2rem !important;
    }
}

@media(max-width:480px){

    .ugo-career-left h2{

        font-size:2.2rem !important;
    }

    .ugo-job-card{

        flex-direction:column !important;
    }

    .ugo-mini-box{

        width:100% !important;
    }

    .ugo-apply-box{

        padding:25px !important;
    }

    .ugo-apply-box h4{

        font-size:1.4rem !important;
    }

    .ugo-apply-box a{

        width:100% !important;

        justify-content:center !important;

        text-align:center !important;
    }
}



/* project new css */


.ugo-hero-section{

    position:relative !important;

    width:100% !important;

    min-height:100vh !important;

    overflow:hidden !important;

    padding:120px 7% 100px !important;

}

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

.ugo-grid{

    position:absolute !important;

    inset:0 !important;

    

    background-size:50px 50px !important;

    mask-image:
    radial-gradient(circle at center,black 25%,transparent 90%) !important;
}

/* =========================================
   GLOW ORBS
========================================= */

.ugo-orb{

    position:absolute !important;

    border-radius:50% !important;

    filter:blur(120px) !important;

    opacity:.5 !important;

    z-index:0 !important;
}

.orb1{

    width:340px !important;
    height:340px !important;

    background:#00ff8840 !important;

    top:-100px !important;
    left:-100px !important;

    animation:orbMove1 8s ease-in-out infinite alternate !important;
}

.orb2{

    width:280px !important;
    height:280px !important;

    background:#d4ff0030 !important;

    bottom:-100px !important;
    right:-100px !important;

    animation:orbMove2 7s ease-in-out infinite alternate !important;
}

.orb3{

    width:220px !important;
    height:220px !important;

    background:#00c76a30 !important;

    top:40% !important;
    left:45% !important;
}

@keyframes orbMove1{

    from{
        transform:translateY(0px) !important;
    }

    to{
        transform:translateY(40px) !important;
    }
}

@keyframes orbMove2{

    from{
        transform:translateX(0px) !important;
    }

    to{
        transform:translateX(-40px) !important;
    }
}

/* =========================================
   HERO CONTAINER
========================================= */

.ugo-hero-container{

    position:relative !important;

    z-index:2 !important;

    display:grid !important;

    grid-template-columns:1fr 1fr !important;

    align-items:center !important;

    gap:80px !important;
}

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

.ugo-hero-content{

    max-width:650px !important;
}

.ugo-hero-badge{

    display:inline-flex !important;

    align-items:center !important;

    padding:12px 24px !important;

    border-radius:100px !important;

   
 font-family: 'Montserrat', sans-serif;
   

    color:#ffffff !important;

    font-size:22px !important;

    font-weight:200 !important;

    margin-bottom:28px !important;

   

   
}

/* heading */

.ugo-hero-content h1{
   font-family: 'Montserrat', sans-serif;
    font-size:40px !important;

    line-height:1 !important;

    color:#ffffff !important;

    font-weight:200 !important;

    margin-bottom:28px !important;

    letter-spacing:-2px !important;

    animation:fadeUp 1.2s ease !important;
}

.ugo-hero-content h1 span{

    background:#ffffff !important;

    -webkit-background-clip:text !important;

    -webkit-text-fill-color:transparent !important;
}

/* text */

.ugo-hero-content p{
 font-family: 'Montserrat', sans-serif;
    color:#ffffff !important;

    font-size:16px !important;

    line-height:1.9 !important;

    margin-bottom:42px !important;

    max-width:600px !important;

    animation:fadeUp 1.4s ease !important;
    
}

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

.ugo-hero-buttons{

    display:flex !important;

    align-items:center !important;

    gap:18px !important;

    flex-wrap:wrap !important;

    margin-bottom:50px !important;
}

.ugo-btn-primary{

    padding:18px 34px !important;

    border-radius:100px !important;

    text-decoration:none !important;

    font-weight:200 !important;

    background:
    linear-gradient(
        90deg,
        #00ff88,
        #00c76a
    ) !important;

    color:#ffffff !important;

    transition:.4s ease !important;

    box-shadow:
    0 15px 40px rgba(0,255,136,0.18) !important;
}

.ugo-btn-primary:hover{

    transform:
    translateY(-6px)
    scale(1.03) !important;

    box-shadow:
    0 25px 60px rgba(0,255,136,0.28) !important;
}

.ugo-btn-outline{
     font-family: 'Montserrat', sans-serif;

    padding:18px 34px !important;

    border-radius:100px !important;

    text-decoration:none !important;

    font-weight:200 !important;

    color:#ffffff !important;

    border:
    1px solid rgba(255,255,255,0.08) !important;

    background:
    rgba(255,255,255,0.04) !important;

    backdrop-filter:blur(10px) !important;
}

/* =========================================
   MINI STATS
========================================= */

.ugo-mini-stats{

    display:flex !important;

    gap:20px !important;

    flex-wrap:wrap !important;
}

.ugo-stat{

    min-width:160px !important;

    padding:24px !important;

    border-radius:24px !important;

    background:
    rgba(255,255,255,0.04) !important;

    border:
    1px solid rgba(255,255,255,0.08) !important;

    backdrop-filter:blur(14px) !important;

    transition:.4s ease !important;
}

.ugo-stat:hover{

    transform:
    translateY(-8px)
    scale(1.02) !important;

    border-color:
    rgba(0,255,136,0.22) !important;

    box-shadow:
    0 20px 40px rgba(0,255,136,0.1) !important;
}

.ugo-stat h3{

    font-size:2rem !important;

    margin-bottom:8px !important;

    background:
    linear-gradient(
        90deg,
        #00ff88,
        #8dffc0
    ) !important;

    -webkit-background-clip:text !important;

    -webkit-text-fill-color:transparent !important;
}

.ugo-stat span{

    color:rgba(255,255,255,0.72) !important;
}

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

.ugo-hero-visual{

    position:relative !important;

    display:flex !important;

    justify-content:center !important;

    align-items:center !important;

    min-height:750px !important;
}

/* =========================================
   ROTATING RING
========================================= */

.hero-ring{

    position:absolute !important;

    width:620px !important;
    height:620px !important;

    border-radius:50% !important;

    z-index:1 !important;

    border:
    2px dashed rgba(255,255,255,0.08) !important;

    background:
    radial-gradient(
        circle,
        rgba(0,255,136,0.08) 0%,
        rgba(0,255,136,0.03) 45%,
        transparent 70%
    ) !important;

    box-shadow:
    inset 0 0 80px rgba(0,255,136,0.08),
    0 0 80px rgba(0,255,136,0.08) !important;

    animation:
    rotateRing 18s linear infinite !important;
}

/* glowing ring */

.hero-ring::before{

    content:'' !important;

    position:absolute !important;

    inset:-14px !important;

    border-radius:50% !important;

    border:
    3px solid transparent !important;

    border-top:
    3px solid #00ff88 !important;

    border-right:
    3px solid #d4ff00 !important;

    animation:
    rotateReverse 10s linear infinite !important;

    filter:
    drop-shadow(0 0 18px #00ff88) !important;
}

/* inner ring */

.hero-ring::after{

    content:'' !important;

    position:absolute !important;

    inset:40px !important;

    border-radius:50% !important;

    border:
    1px dashed rgba(255,255,255,0.12) !important;
}

@keyframes rotateRing{

    from{
        transform:rotate(0deg) !important;
    }

    to{
        transform:rotate(360deg) !important;
    }
}

@keyframes rotateReverse{

    from{
        transform:rotate(360deg) !important;
    }

    to{
        transform:rotate(0deg) !important;
    }
}

/* =========================================
   IMAGE PERFECTLY INSIDE RING
========================================= */

.hero-image-wrap{

    position:relative !important;

    z-index:3 !important;

    width:100% !important;

    display:flex !important;

    justify-content:center !important;

    align-items:center !important;
}

/* image */

.hero-image-wrap img{

    width:100% !important;

    max-width:420px !important;

    height:540px !important;

    object-fit:cover !important;

    border-radius:50px !important;

 

   

    animation:
    floatImage 5s ease-in-out infinite !important;
}

@keyframes floatImage{

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

    50%{
        transform:translateY(-16px) !important;
    }

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

/* =========================================
   FLOATING TAGS
========================================= */

.floating-tag{
 font-family: 'Montserrat', sans-serif;
    position:absolute !important;

    padding:14px 24px !important;

    border-radius:100px !important;

    background:
    rgba(255,255,255,0.06) !important;

    border:
    1px solid rgba(255,255,255,0.08) !important;

    backdrop-filter:blur(14px) !important;

    color:#ffffff !important;

    font-weight:200!important;

    z-index:5 !important;

    animation:
    tagFloat 4s ease-in-out infinite !important;
}

/* positions */

.tag1{

    top:12% !important;
    left:-6% !important;
}

.tag2{

    top:48% !important;
    right:-10% !important;

    animation-delay:1s !important;
}

.tag3{

    bottom:10% !important;
    left:-2% !important;

    animation-delay:2s !important;
}

@keyframes tagFloat{

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

    50%{
        transform:translateY(-10px) !important;
    }

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

/* =========================================
   FADE ANIMATION
========================================= */

@keyframes fadeUp{

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

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

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

@media(max-width:1100px){

    .ugo-hero-container{

        grid-template-columns:1fr !important;

        gap:90px !important;

        text-align:center !important;
    }

    .ugo-hero-content{

        margin:auto !important;
    }

    .ugo-hero-buttons,
    .ugo-mini-stats{

        justify-content:center !important;
    }

    .ugo-hero-visual{

        min-height:650px !important;
    }

    .hero-ring{

        width:500px !important;
        height:500px !important;
    }

    .hero-image-wrap img{

        max-width:360px !important;
        height:470px !important;
    }
}

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

@media(max-width:768px){

    .ugo-hero-section{

        padding:90px 20px 80px !important;
    }

    .ugo-hero-content h1{

        font-size:3.4rem !important;
    }

    .ugo-hero-content p{

        font-size:16px !important;
    }

    .ugo-hero-visual{

        min-height:520px !important;
    }

    .hero-ring{

        width:380px !important;
        height:380px !important;
    }

    .hero-image-wrap img{

        max-width:280px !important;
        height:380px !important;

        border-radius:32px !important;
    }

    .floating-tag{

        font-size:12px !important;

        padding:10px 16px !important;
    }

    .tag1{
        left:0 !important;
    }

    .tag2{
        right:0 !important;
    }
}

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

@media(max-width:480px){

    .ugo-hero-content h1{

        font-size:2.5rem !important;
    }

    .ugo-hero-content p{

        font-size:15px !important;
    }

    .hero-ring{

        width:280px !important;
        height:280px !important;
    }

    .hero-ring::after{

        inset:20px !important;
    }

    .hero-image-wrap img{

        max-width:210px !important;
        height:280px !important;

        border-radius:24px !important;
    }

    .floating-tag{

        font-size:10px !important;

        padding:8px 12px !important;
    }

    .tag1{

        top:0 !important;
    }

    .tag2{

        top:50% !important;
    }

    .tag3{

        bottom:0 !important;
    }

    .ugo-stat{

        width:100% !important;
    }
}




/* audit css */
/* =========================
   SIMPLE GREEN THEME CSS
========================= */

.energy-audit-section{
    width:100%;
    padding:80px 6%;
   
}

.energy-container{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:50px;
    flex-wrap:wrap;
}

/* LEFT IMAGE */

.energy-image{
    flex:1 1 500px;
    position:relative;
    overflow:hidden;
    border-radius:24px;
    box-shadow:0 10px 30px rgba(0,0,0,0.10);
}

.energy-image img{
    width:100%;
    display:block;
    border-radius:24px;
    transition:0.5s;
}

.energy-image:hover img{
    transform:scale(1.05);
}

/* OVERLAY */

.image-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(
        to top,
        rgba(0,0,0,0.35),
        rgba(0,0,0,0.05)
    );
}

/* FLOATING CARD */

.floating-card{
    position:absolute;
    bottom:25px;
    left:25px;
    background:#fff;
    padding:18px 24px;
    border-radius:16px;
    z-index:2;
    box-shadow:0 8px 20px rgba(0,0,0,0.12);
}

.floating-card h3{
    font-size:36px;
    color:#0f9d58;
    margin-bottom:5px;
    font-weight:700;
}

.floating-card p{
    margin:0;
    color:#555;
    font-size:15px;
}

/* RIGHT CONTENT */

.energy-content{
    flex:1 1 500px;
}

.energy-content h2{
    font-size:50px;
    line-height:1.2;
    margin-bottom:20px;
    font-weight:200;
    color:#ffffff;
}

.energy-content h2 span{
    color:#fff;
}

/* TEXT */

.main-text{
    font-size:18px;
    line-height:1.9;
    color:#444;
    margin-bottom:20px;
}

.energy-content p{
    font-size:16px;
    line-height:1.9;
    color:#ffffff;
    margin-bottom:20px;
}

/* BUTTON */

.energy-btn{
    display:inline-block;
    padding:15px 34px;
    background:#0f9d58;
    color:#fff;
    text-decoration:none;
    border-radius:50px;
    font-weight:600;
    transition:0.4s;
    box-shadow:0 8px 18px rgba(15,157,88,0.25);
}

.energy-btn:hover{
    background:#087c44;
    transform:translateY(-3px);
}

/* RESPONSIVE */

@media(max-width:992px){

    .energy-container{
        flex-direction:column;
    }

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

@media(max-width:576px){

    .energy-audit-section{
        padding:60px 20px;
    }

    .energy-content h2{
        font-size:32px;
    }

    .main-text,
    .energy-content p{
        font-size:15px;
    }

    .energy-btn{
        width:100%;
        text-align:center;
    }
}



  /* marquee tag slider  */


.association-section{
    padding:80px 0;
    background:#3679bc;
    overflow:hidden;
}

.association-title{
    text-align:center;
    font-size:50px;
    font-weight:200;
    color:#ffffff;
    margin-bottom:50px;
  
    letter-spacing:2px;
}

.logo-slider{
    width:100%;
    overflow:hidden;
    margin:20px 0;
    position:relative;
}

.logo-track{
    display:flex;
    gap:25px;
    width:max-content;
}

.logo-card{
    width:220px;
    height:130px;
    flex-shrink:0;

    background:#fff;
    border-radius:16px;

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

    padding:20px;

    border:1px solid #e5e7eb;
    box-shadow:0 5px 20px rgba(0,0,0,.06);
}

.logo-card img{
    max-width:100%;
    max-height:100px;
    object-fit:contain;
}

.logo-slider::before,
.logo-slider::after{
    content:'';
    position:absolute;
    top:0;
    width:120px;
    height:100%;
    z-index:5;
    pointer-events:none;
}




@media(max-width:768px){

    .association-title{
        font-size:28px;
    }

    .logo-card{
        width:170px;
        height:100px;
    }

    .logo-card img{
        max-height:50px;
    }

}






/* ===== Skills Section ===== */

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

.skills-left p{
    
    line-height:1.8;
    margin-bottom:30px;
}

/* ===== Credentials ===== */

.cred-badges{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:15px;
    margin-top:30px;
}

.cred-badge{

    padding:18px 12px;

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

    min-height:120px;

   
}

.cred-badge span{
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:10px;
}

.cred-badge img{
    width:60px;
    height:60px;
    object-fit:contain;
}


/* ===== Right Side ===== */



/* ===== Progress Bars ===== */

.skill-bar-item{
    margin-bottom:22px;
}

.skb-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:10px;

    font-size:14px;
    font-weight:600;
    color:#111827;
}

.skb-pct{
    color:#f8fafc;
    font-weight:700;
}

.progress-bar-outer{
    height:5px;
    
    border-radius:35px;
    overflow:hidden;
}

.progress-bar-inner{
    height:100%;
    width:0;
    border-radius:50px;
    background:#ffffff;

    transition:width 1.5s ease;
}

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

@media(max-width:991px){

    .skills-grid{
        grid-template-columns:1fr;
        gap:40px;
    }

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

}

@media(max-width:576px){

    .cred-badges{
        grid-template-columns:repeat(2,1fr);
        gap:10px;
    }

    .cred-badge{
        min-height:100px;
        padding:12px;
        font-size:11px;
    }

    .cred-badge img{
        width:30px;
        height:30px;
    }

    .skills-right{
        padding:20px;
    }

}




/* Section add */
.certification-section {
   
    padding: 60px 0;
    overflow: hidden;
}

.certification-title {
    text-align: center;
    font-size: 50px;
    font-weight: 200;
    color: #fff;
    margin-bottom: 35px;
}

/* Marquee */
.certification-marquee {
    width: 100%;
    overflow: hidden;
    position: relative;
}

.certification-track {
    display: flex;
    gap: 20px;
    width: max-content;
    animation: marquee 50s linear infinite;
}

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

/* Cards */
.cert-card {
    width: 180px;
    height: 110px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px;
    flex-shrink: 0;
}

.cert-card img {
    max-width: 100%;
    max-height: 100px;
    object-fit: contain;
}

/* Animation */
@keyframes marquee {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}


/* section add */


.our-firsts{
   
    color:#fff;
    padding:80px 8%;
}

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

.heading h2{
    font-size:50px;
    margin:15px 0;
    font-weight: 200;
}


.firsts-wrapper{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:50px;
    align-items:center;
}

.left-panel .item{
    border-bottom:1px solid rgba(255,255,255,.15);
    padding:22px 0;
    cursor:pointer;
    transition:.3s;
}

.left-panel .item:hover,
.left-panel .item.active{
    padding-left:40px
}

.count{
    display:inline-flex;
    width:40px;
    height:40px;
    border:2px solid #f8fafc;
    border-radius:50%;
    align-items:center;
    justify-content:center;
    color:#fff;
    margin-bottom:10px;
    font-size:14px;
}

.item.active h3{
    color:#ffffff;
}

.item h3{
    font-size:22px;
    transition:.3s;
    font-weight: 200;
}

.right-panel{
    position:sticky;
    top:100px;
}

.image-box{
    overflow:hidden;
    border-radius:18px;
    margin-bottom:25px;
}

.image-box img{
    width:100%;
    height:350px;
    object-fit:cover;
    transition:.4s;
}

.content h3{
    color:#ffffff;
    margin-bottom:15px;
    font-size:28px;
}

.content p{
    line-height:1.8;
    color:#ddd;
}

.fade{
    animation:fade .5s ease;
}

@keyframes fade{
    from{
        opacity:0;
        transform:translateY(15px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

@media(max-width:900px){
    .firsts-wrapper{
        grid-template-columns:1fr;
    }

    .heading h2{
        font-size:38px;
    }

    .image-box img{
        height:250px;
    }
}


/* our latest new  */


.update-section{
    max-width:1400px;
    margin:auto;
}

.section-title{
    text-align:center;
    color:#fff !important;
    font-size:48px;
    margin-bottom:15px;
}

.section-title span{
    color:#f8fafc;
}

.section-subtitle{
    text-align:center;
    color:#cfcfcf;
    max-width:700px;
    margin:auto;
    margin-bottom:40px;
}

.filter-buttons{
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:15px;
    margin-bottom:40px;
}

.filter-btn{
    border:none;
    padding:12px 28px;
    border-radius:50px;
    background:rgba(255,255,255,.08);
    color:#fff;
    cursor:pointer;
    font-weight:600;
    transition:.3s;
}

.filter-btn.active,
.filter-btn:hover{
    background:#44d886;
}

.card-container{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,280px));
    justify-content:center;
    gap:25px;
}

.update-card{
    position:relative;
    height:400px;
    border-radius:25px;
    overflow:hidden;
    transition:.4s;
    cursor:pointer;
}

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

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

.card-image{
    position:relative;
}

.card-image img{
    object-fit:cover;
    transition:.5s;
}

.update-card:hover img{
    transform:scale(1.05);
}

.card-image::after{
    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
    height:65%;
    background:linear-gradient(to top,rgba(0,40,28,.95),rgba(0,40,28,.75),transparent);
}

.card-arrow{
    position:absolute;
    top:15px;
    right:15px;
    width:55px;
    height:55px;
    border-radius:50%;
    background:#44d886;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:26px;
    z-index:2;
}

.card-info{
    position:absolute;
    left:0;
    bottom:20px;
    width:100%;
    text-align:center;
    padding:0 15px;
    z-index:3;
}

.card-info h2{
    color:#fff;
    font-size:28px;
    margin-bottom:10px;
}

.designation{
    display:inline-block;
    padding:8px 20px;
    background:rgba(255,255,255,.1);
    border-radius:30px;
    color:#fff;
    margin-bottom:12px;
    font-size:13px;
}

.hover-content{
    max-height:0;
    overflow:hidden;
    opacity:0;
    transition:.5s;
}

.update-card:hover .hover-content{
    max-height:200px;
    opacity:1;
}

.hover-content p{
    color:#fff;
    font-size:13px;
    margin-bottom:12px;
}

.social-icons{
    display:flex;
    justify-content:center;
    gap:10px;
}

.social-icons a{
    width:40px;
    height:40px;
    border-radius:50%;
    background:rgba(255,255,255,.1);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    text-decoration:none;
}

.hide{
    display:none;
}

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

    .update-card{
        height:350px;
    }

    .card-info h2{
        font-size:22px;
    }
}


/* banner  */

/* =========================
   HERO BANNER
========================= */

.hero-banner{
    margin-top: 80px;
    position: relative;
    width: 100%;
    height: 400px;
    overflow: hidden;
}

.hero-content{
    position: relative;
    width: 100%;
    height: 100%;
}

.hero-content img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Overlay */

.hero-overlay{
    position: absolute;
    inset: 0;
   
    z-index: 1;
}

/* Title */

.hero-content h1{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-60%);
    z-index: 2;
    color: #fff;
    font-size: 90px;
    font-weight: 700;
    font-family: 'Outfit', sans-serif;
}

/* =========================
   BREADCRUMB
========================= */

.breadcrumb-box{
    position: absolute;
    left: 50%;
    bottom: -1px;
    transform: translateX(-50%);
    z-index: 5;

    background: #fff;
    padding: 4px 23px;
    border-radius: 20px 20px 0 0;

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

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

/* Text */

.breadcrumb-box a,
.breadcrumb-box span{
    text-decoration: none;
    color: #16384b;
    font-weight: 600;
}

/* ===== Curved Side Shape ===== */

.breadcrumb-box::before,
.breadcrumb-box::after{
    content: "";
    position: absolute;
    bottom: 0;
    width: 32px;
    height: 32px;
    background: transparent;
}

.breadcrumb-box::before{
    left: -32px;
    border-bottom-right-radius: 32px;
    box-shadow: 16px 16px 0 #fff;
}

.breadcrumb-box::after{
    right: -32px;
    border-bottom-left-radius: 32px;
    box-shadow: -16px 16px 0 #fff;
}

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

@media(max-width:768px){

    .hero-banner{
        height: 280px;
    }

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

    .breadcrumb-box{
        padding: 12px 22px;
        font-size: 16px;
    }

    .breadcrumb-box::before,
    .breadcrumb-box::after{
        width: 22px;
        height: 22px;
    }

    .breadcrumb-box::before{
        left: -22px;
        border-bottom-right-radius: 22px;
        box-shadow: 11px 11px 0 #fff;
    }

    .breadcrumb-box::after{
        right: -22px;
        border-bottom-left-radius: 22px;
        box-shadow: -11px 11px 0 #fff;
    }
}

/* core values  */


.products-section{
    padding:80px 0;
   
    overflow:hidden;
}

.eco-section-title{
    text-align:center;
    margin-bottom:50px;
}

.eco-section-title h2{
    font-size:50px;
    font-weight:200;
  
    margin-bottom:15px;
}

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

.ecoProductSwiper{
    padding:20px 10px 50px;
}

.eco-card{
    position:relative;
    height:340px;
    border-radius:20px;
    overflow:hidden;
}

.eco-card-img{
    position:absolute;
    inset:0;
}

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

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

/* Overlay */

.eco-card-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(
        to top,
        rgba(0,0,0,.9),
        rgba(0,0,0,.45),
        rgba(0,0,0,.1)
    );
}

/* Content */

.eco-card-content{
    position:absolute;
    left:0;
    bottom:0;
    z-index:2;
    width:100%;
    padding:22px;
}

.eco-card-content h3{
    color:#fff;
    font-size:24px;
    margin-bottom:10px;
}

.eco-card-content p{
    color:rgba(255,255,255,.9);
    font-size:14px;
    line-height:1.7;
    margin-bottom:18px;
}

.eco-card-number{
    display:flex;
    align-items:center;
    gap:10px;
    color:#8BE85D;
    font-size:26px;
    font-weight:700;
}

.eco-card-number span{
    width:40px;
    height:2px;
    background:#8BE85D;
}

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

.eco-slider-buttons{
    display:flex;
    justify-content:center;
    gap:15px;
    margin-top:35px;
}

.eco-prev-btn,
.eco-next-btn{
    width:50px;
    height:50px;
    border:none;
    border-radius:50%;
    background:#00c26e;
    color:#fff;
    font-size:20px;
    cursor:pointer;
    transition:.3s;
}

.eco-prev-btn:hover,
.eco-next-btn:hover{
    background:#7bc043;
}

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

@media(max-width:991px){

    .eco-section-title h2{
        font-size:38px;
    }

    .eco-card{
        height:300px;
    }
}

@media(max-width:767px){

    .products-section{
        padding:60px 0;
    }

    .eco-section-title h2{
        font-size:30px;
    }

    .eco-card{
        height:280px;
    }

    .eco-card-content{
        padding:18px;
    }

    .eco-card-content h3{
        font-size:20px;
    }

    .eco-card-content p{
        font-size:13px;
    }
}



/* our impact  */
/* ===========================
   IMPACT SECTION
=========================== */

.impact-area{
    padding:80px 0;
}

.impact-container{
    width:90%;
    max-width:1400px;
    margin:auto;
    display:grid;
    grid-template-columns:430px 1fr;
    gap:60px;
}

/* Left */

.impact-left h1{
    font-size:32px;
    line-height:1.2;
    color:#fff;
    margin-bottom:25px;
    font-weight:700;
}

.impact-left p{
    color:#fff;
    font-size:15px;
    line-height:1.8;
    margin-bottom:18px;
}

/* Right Grid */

.impact-right{
    display:grid;
    grid-template-columns:1fr 1fr;
    grid-template-areas:
    "image stats"
    "vision mission";
    gap:25px;
}

/* Image */

.impact-image{
    grid-area:image;
    height:260px;
    overflow:hidden;
    border-radius:25px;
}

.impact-image img{
    width:100%;
    height:100%;
    object-fit:cover;
}

/* Stats */

.impact-stats{
    grid-area:stats;
}

.impact-stats h2{
    color:#fff;
    font-size:32px;
    margin-bottom:20px;
}

.impact-counter-box{
    border-top:1px solid rgba(255,255,255,.3);
    padding-top:20px;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:15px;
}

.impact-counter h3{
    color:#fff;
    font-size:24px;
    margin-bottom:8px;
}

.impact-counter p{
    color:#fff;
    font-size:14px;
}

/* Cards */

.impact-card{
    padding:35px;
    border-radius:25px;
    transition:.4s;
}

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

.impact-dark{
    grid-area:vision;
    background:#3a5b2cf0;
    color:#fff;
}

.impact-green{
    grid-area:mission;
    background:#90ea66;
    color:#173d3d;
}

.impact-number{
    display:block;
    font-size:48px;
    font-weight:700;
    margin-bottom:15px;
}

.impact-card h3{
    font-size:20px;
    margin-bottom:15px;
}

.impact-card p{
    font-size:15px;
    line-height:1.8;
}

/* Responsive */

@media(max-width:991px){

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

    .impact-right{
        grid-template-columns:1fr;
        grid-template-areas:
        "image"
        "stats"
        "vision"
        "mission";
    }
}

@media(max-width:768px){

    .impact-left h1{
        font-size:28px;
    }

    .impact-counter-box{
        grid-template-columns:1fr;
    }

    .impact-card{
        padding:25px;
    }
}


/* teams */
    .contact-section{
    padding:100px 5%;
   
}

.contact-container{
    max-width:1400px;
    margin:auto;
    display:grid;
    grid-template-columns:1.3fr .8fr;
    gap:40px;
}

.contact-form-box,
.info-card{
   
    border-radius:24px;
    padding:40px;
    box-shadow:0 10px 35px rgba(0,0,0,.08);
}

.sub-title{
    color:#fff;
    font-size:15px;
    letter-spacing:3px;
    font-weight:200;
}

.contact-form-box h2{
    font-size:50px;
    margin:15px 0;
    color:#fff;
}

.contact-form-box p{
    color:#fff;
    line-height:1.7;
    margin-bottom:35px;
}

.form-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:20px;
}

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

.input-group label{
    display:block;
    margin-bottom:8px;
    font-weight:200;
    color:#fff;
}

.input-group input,
.input-group select,
.input-group textarea{
    width:100%;
    padding:16px 20px;
    border:1px solid #fff;
    border-radius:14px;
    outline:none;
    font-size:15px;
    transition:.3s;
    background:#fafafa;
}

.input-group input:focus,
.input-group select:focus,
.input-group textarea:focus{
    border-color:#fff;
    box-shadow:0 0 0 4px rgba(76,175,80,.15);
}

.send-btn{
    width:100%;
    padding:18px;
    border:none;
    border-radius:60px;
    background:linear-gradient(135deg,#38b000,#2d6a4f);
    color:#fff;
    font-size:18px;
    font-weight:200;
    cursor:pointer;
    transition:.4s;
}

.send-btn:hover{
    transform:translateY(-3px);
    box-shadow:0 15px 30px rgba(56,176,0,.25);
}

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

.info-card h3{
    margin-bottom:20px;
    color:#fff;
    font-size:24px;
}

.info-card p{
    color:#fff;
    line-height:1.8;
}

.info-card ul{
    list-style:none;
    padding:0;
    margin:0;
}

.info-card li{
    display:flex;
    justify-content:space-between;
    padding:14px 0;
    border-bottom:1px solid #eee;
}

.info-card li:last-child{
    border:none;
}

@media(max-width:991px){

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

    .form-grid{
        grid-template-columns:1fr;
    }

    .contact-form-box h2{
        font-size:42px;
    }
}




/* applicatopn form  */
.career-section{
    padding:100px 5%;
    background:
     linear-gradient(
        135deg,
        #200f0fa9 0%,
        #1a1616c1 35%,
        #dcbfbf1e 100%
    ),
    url("../image.php?src=images%2Fapplu%20now.jpg");
    background-size:cover;
    background-position:center;
    position:relative;
    overflow:hidden;
}

.career-section::before{
    content:"";
    position:absolute;
    width:400px;
    height:400px;
    background:#00ff8840;
    border-radius:50%;
    filter:blur(120px);
    top:-100px;
    left:-100px;
}

.career-section::after{
    content:"";
    position:absolute;
    width:350px;
    height:350px;
    background:#2ecc7140;
    border-radius:50%;
    filter:blur(120px);
    bottom:-100px;
    right:-100px;
}

.career-wrapper{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:60px;
    align-items:center;
    position:relative;
    z-index:2;
}

.career-tag{
    display:inline-block;
    padding:10px 20px;
    border-radius:50px;
    background:rgba(255,255,255,.08);
    color:#fff;
    font-weight:600;
    margin-bottom:20px;
}

.career-content h2{
    color:#fff;
    font-size:52px;
    line-height:1.2;
    margin-bottom:20px;
    font-family:'Montserrat',sans-serif;
}

.career-content p{
    color:#ffffff;
    line-height:1.8;
    font-size:16px;
}

.career-features{
    margin-top:35px;
    display:flex;
    flex-direction:column;
    gap:20px;
}

.feature-box{
    display:flex;
    gap:18px;
    align-items:center;
    padding:18px;
    background:rgba(255,255,255,.05);
    border:1px solid rgba(255,255,255,.08);
    backdrop-filter:blur(15px);
    border-radius:18px;
}

.feature-box span{
    font-size:28px;
}

.feature-box h4{
    color:#fff;
    margin-bottom:5px;
}

.feature-box a,
.feature-box p{
    color:#bdbdbd;
    text-decoration:none;
}

.career-btn{
    display:inline-block;
    margin-top:30px;
    padding:15px 32px;
    background:linear-gradient(135deg,#00c853,#00e676);
    color:#fff;
    text-decoration:none;
    border-radius:50px;
    font-weight:600;
    transition:.4s;
}

.career-btn:hover{
    transform:translateY(-5px);
}

.form-card{
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.1);
    backdrop-filter:blur(20px);
    padding:40px;
    border-radius:25px;
    box-shadow:0 20px 50px rgba(0,0,0,.25);
}

.form-card h3{
    color:#fff;
    margin-bottom:25px;
    font-size:28px;
}

.input-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:15px;
    margin-bottom:15px;
}

.form-card input,
.form-card select,
.form-card textarea{
    width:100%;
    padding:15px;
    border:none;
    outline:none;
    border-radius:12px;
   
    color:#000;
}

.form-card textarea{
    margin-top:10px;
}

.form-card button{
    width:100%;
    margin-top:20px;
    padding:16px;
    border:none;
    border-radius:12px;
    background:linear-gradient(135deg,#00c853,#00e676);
    color:#fff;
    font-weight:600;
    cursor:pointer;
    transition:.4s;
}

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

@media(max-width:991px){

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

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

.input-row{
    grid-template-columns:1fr;
}

.form-card{
    padding:25px;
}

}



/* new cards  projects */

  .projects-section{
    padding:80px 5%;
   
}

.section-title{
    text-align:center;
    font-size:42px;
    font-weight:700;
    color:#1d3f82;
}

.section-subtitle{
    text-align:center;
    max-width:800px;
    margin:15px auto 40px;
    font-size:18px;
    color:#fff;
}

.filter-buttons{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    justify-content:center;
    margin-bottom:50px;
}

.filter-btn{
    padding:12px 24px;
    border:none;
    border-radius:50px;
    cursor:pointer;
    font-weight:600;
  
    transition:.3s;
    box-shadow:0 3px 10px rgba(0,0,0,.08);
}



.projects-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
    gap:35px;
}

.project-card{
   
    overflow:hidden;
    border-radius:12px;
    transition:.4s;
    box-shadow:0 10px 25px rgba(0,0,0,.08);
}

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

.project-card img{
    width:100%;
    height:260px;
    object-fit:cover;
}

.card-content{
    padding:20px;
}

.certification{
    font-size:15px;
    font-weight:700;
    
    display:block;
    margin-bottom:10px;
}

.card-content h3{
    font-size:15px;
    line-height:1.3;
    margin-bottom:10px;
    font-weight:700;
    
}

.card-content p{
    font-size:20px;
    color:#fff;
    font-family: 'Montserrat', sans-serif;
    font-weight: 700;
}

.rating{
    display:inline-block;
    margin-top:12px;
    font-size:24px;
    font-weight:200;
}

.gold{
    color:#fff;
}

.platinum{
    color:#fff;
    font-weight: 700;
}

.star{
    color:#fff;
    font-weight: 700;
}