:root {
  --grayBg:#f3f3f3;
  --blackColor:#252525;
  --green:#92d400;
  --geen1:rgb(146,212,0);
  --orangeColor:#ef6a32;
  --redColor:#E00034;
  --yellowColor:#FFC600;
  --blueColor:#009FDA;
  --white:#fff;
  --line:rgba(32,34,31,.2);
  --line1:rgb(37,37,37);
  --color1:rgb(234,234,234);
  --header:104px;
  --mobileheader:82px;
  --shell:1360px;
  --ease:cubic-bezier(.2,.72,.22,1);
  --fontitaly: "Rock Salt", cursive;
   --font1 :"Montserrat", sans-serif;
   --fs1:clamp(16px, calc(16px + (2 * ((100vw - 1400px) / 580))), 18px);
}

*,
*::before,
*::after{box-sizing:border-box}

html{
  scroll-behavior:smooth;
  scroll-padding-top:var(--header);
}

body{margin:0;color:var(--blackColor); font-family: "Montserrat", sans-serif; font-size: 14px; font-style: normal; overflow-x:hidden;}
body.nav-open{overflow:hidden}
a{color:inherit;text-decoration:none; color: #252525;}
button,input{font:inherit}
button{color:inherit}
.section{position:relative;}
h1, h2, h3{font-weight: 600;}
.font-14{font-size: clamp(12px, calc(1.25vw - 2px), 14px);}
.font-16{font-size: clamp(14px, calc(1.25vw - 2px), 16px);}
.font-22{font-size: clamp(15px, calc(1.25vw - 2px), 22px);}

img{max-width: 100%; height: auto;}
.site-header{position:sticky; z-index:999; top:0;  left:0;  right:0;  height:var(--header);  display:flex;  align-items:center;gap:38px;padding: 0 clamp(15px, 5vw, 78px);
  background:var(--grayBg);border-bottom:1px solid transparent;transition:.25s ease;}

  .footer-bottom a{color: #fff;}
  .footer-bottom a:hover{color: var(--green);}
  
 .container-fluid{padding: 0 clamp(15px, 5vw, 78px);} 
.site-header.scrolled{ border-color:rgba(32,34,31,.13); box-shadow:0 8px 24px rgba(0,0,0,.03);}
.logo{ flex:0 0 auto;  display:flex;  align-items:center;  gap:9px;}
.primary-nav{ flex:1;  display:flex;  align-items:center;  justify-content:flex-end;  gap:3px;}
header .nav-item{position:relative}
header .nav-link{display:flex; align-items:center; gap:5px;   padding:22px 10px;  border:0;  background:transparent;  cursor:pointer;  white-space:nowrap;
  font-size:16px;  font-weight:500;  text-transform:uppercase;   color: #252525;}
header .nav-item:hover .nav-link, header .nav-link:focus{color:var(--green) ;}  
header .nav-link span, header .dropdown a span{position: relative;}
header .nav-link span:before, header .dropdown a span:before{width:0%; content: ''; bottom: 0px; background: var(--green); height: 1px; position: absolute; left:0; transition: .2s ease;}
header .nav-item:hover .nav-link span:before, header .dropdown a:hover span:before{width: 100%; transition: .2s ease;}
header .dropdown-toggle i{width:8px; height:8px; border-right:1px solid currentColor; border-bottom:1px solid currentColor;transform:rotate(45deg) translateY(-4px); transition:.2s ease;}
header .dropdown-toggle:after{display: none;}
.has-dropdown.open .dropdown-toggle i{transform:rotate(225deg) translate(-1px,-1px);}
header .dropdown{ position: absolute;top: calc(100% - 8px);left: 0;max-width: 525px;padding: 0 20px 10px 10px; background: #fff; border: 1px solid rgba(32,34,31,.12);
  box-shadow: 0 22px 55px rgba(28,34,27,.14); opacity: 0; visibility: hidden;  clip-path: inset(0 0 100% 0);  transition:
    opacity .4s ease,  transform .5s cubic-bezier(.22,1,.36,1),   clip-path .6s cubic-bezier(.22,1,.36,1),    visibility 0s linear .6s;}
header .dropdown-right{left:auto;right:0}
.has-dropdown.open .dropdown, .has-dropdown .dropdown.dropdown-open, .has-dropdown:hover .dropdown{opacity: 1;visibility: visible; clip-path: inset(0 0 0 0); transition:
    opacity .4s ease,   transform .5s cubic-bezier(.22,1,.36,1),   clip-path .6s cubic-bezier(.22,1,.36,1),   visibility 0s;}
header .dropdown a{display:block;padding:5px 0px;  font-size:14px; font-weight:500; white-space: nowrap; transition:.2s ease; position:relative;}
header .dropdown a:hover{color:var(--green);}
header .dropdown a span:before{bottom: -7px;}
.nav-actions{display:flex; align-items:center; gap:14px; margin-left:10px;}
.resource-login{font-size:12px; font-weight:600;  text-transform:uppercase;   white-space:nowrap; border:1px solid #252525; padding: 5px 15px; color: var(--green);}
.resource-login:hover{ color: var(--green); text-decoration: underline;}
.donate-btn{display:flex; align-items:center;  justify-content:center;  border:1px solid var(--green);   padding: 5px 15px; width: clamp(120px, 15vw, 160px); color:#252525;  background:var(--green); font-size:12px; font-weight:600;text-transform:uppercase;}
.donate-btn:hover{ color: var(--black); text-decoration: underline;}
.nav-toggle{display:none}
button:focus-visible, a:focus-visible {outline: 1px solid #000;outline-offset: 2px;}
/* DOT PAGINATION ============================================== */
.side-dots{position:fixed;z-index:999; top:50%;  right:24px;  transform:translateY(-50%);  display:flex;  flex-direction:column; align-items:center; gap:13px; padding:10px 8px;}
.side-dots .dot{position:relative; width:12px;  height:12px;  border:2px solid #252525;  border-radius:50%; transition:  transform .2s ease,   background .2s ease,    border-color .2s ease;}
.side-dots .dot:hover{border-color:var(--green); background:var(--green);}
.side-dots .dot.is-active{border-color:var(--green); background:var(--green); }

.site-footer{padding:50px 0 20px 0;background:var(--blackColor);}
.site-footer .footer-brand p { color: #fff; margin-top: 25px; font-weight: 600;}
.site-footer .footer-brand ul.socailIcons { display: flex; gap:20px;}
.site-footer .footer-brand ul.socailIcons li img{ width: 30px;}
.site-footer h4{ margin:0 0 13px;  color:var(--green); letter-spacing:.08em;font-size: 14px; text-transform: uppercase;}
.site-footer ul li a:hover{color:var(--green)}
.site-footer ul { padding-left: 0;}
.site-footer ul li {
    list-style: none;
    line-height: 22px;
    margin-bottom: 10px;
     text-transform: uppercase;
}
.site-footer ul li a{color: #fff; font-weight: 600; font-size: 14px;}
.footer-bottom p{color:#fff;  font-size:12px;text-align: center;margin-top: 50px;}


/* RESPONSIVE: same nav DOM, no second nav ===================== */

@media (min-width:1000px){ 
    @keyframes borderSlideIn {
    from {     
        max-width: 0;
     
    }
    to {       
         max-width: 45%;
    }
}
    
}


@media (max-width:1400px){ 
    header .nav-link{font-size: 14px; padding: 22px 6px;}
    .primary-nav{gap:2px}
    .btn-dark-btn{background: var(--green); padding: 10px 25px; color: var(--blackColor); font-size: clamp(12px, .1vw, 16px); font-weight: 600;}
    .arrow-link{border:1px solid #252525; padding: 10px 25px; color: var(--blackColor); font-size: clamp(12px, .1vw, 16px); font-weight: 600;}
    .hero-actions{gap: clamp(12px, .1vw, 26px);}
    
}
@media (max-width:1240px){
  .nav-toggle{display:flex;  flex-direction:column;  justify-content:center;  gap:6px; width:46px; height:46px; margin-left:auto; padding:0 11px; border:0; border-radius:50%;
    color:#252525;  background:var(--ink); cursor:pointer;}
  .nav-toggle span{width:100%; height:1px;background:currentColor; transition:.25s ease;  }
  .nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
  .nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
  .nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-8.5px) rotate(-45deg)}

  /* same .primary-nav moves into overlay; not duplicated */
  .primary-nav{  position: fixed; top: var(--mobileheader); right: 0; bottom: 0; left: auto; height: 100vh; z-index: 999;overflow-y: auto; overflow-x: hidden; width: 100%;
    max-width: 500px;  display: block; padding: 24px 36px 55px; overflow-y: auto; background: var(--grayBg); opacity: 0; visibility: hidden; transform: translateX(100%);   transition:ransform .4s cubic-bezier(.22, 1, .36, 1), visibility 0s linear 0s; transition: all 0.3s linear;}
  .primary-nav.open{ opacity: 1;  visibility: visible;  transform: translateX(0);   }
  .nav-item{border-bottom:1px solid var(--line)}
  .primary-nav > .nav-link{width:100%; min-height:62px; border-bottom:1px solid var(--line);}
  .nav-link{width:100%; min-height:62px; justify-content:space-between; padding:0; font-size:20px; letter-spacing:-.02em; text-align:left;}
  header .dropdown-toggle i{margin-right:8px}
  header .dropdown, header .dropdown-right{ position:static; width:100%; max-height:0; padding:0 0 0 15px; overflow:hidden; border:0;  box-shadow:none;
    background:transparent; opacity:1; visibility:visible; transform:none; transition:max-height .35s var(--ease),padding .35s var(--ease);}
 header .has-dropdown.open .dropdown{ max-height:380px; padding-top:6px; padding-bottom:14px;}
 header .dropdown a{ padding:9px 0; color:#66685f; font-size:14px;}
.nav-actions{margin:30px 0 0; gap:12px; flex-wrap:wrap;}

  .hero-grid{grid-template-columns:55% 45%}
  .hero-copy{padding-left:4vw;padding-right:2vw}
  .hero-title{font-size:clamp(71px,8.4vw,120px)}
  .site-header{height:var(--mobileheader);}
  .logo{width: 136px;}

  .section-shell,
  .contact-content{width:min(calc(100% - 60px),var(--shell))}
  
.site-footer ul li {
    line-height: 28px;
}
.site-footer ul li a {
    font-size: 13px;}
}

@media (max-width:992px){
    .linebanner{max-width: 200px; margin: 0 auto;}
        @keyframes borderSlideIn {
    from {     
        max-width: 0;
     
    }
    to {   
         max-width: 100%;
    }

}
  .site-footer{padding:60px 20px 20px}

}
@media (max-width:766px){
.primary-nav{padding:20px 22px 45px}
  .nav-link{font-size:18px}
  .hero-copy{min-height:585px}
  .hero-title{font-size:clamp(61px,18.8vw,91px)}
  .hero-description{font-size:17px}
  .hero-media{min-height:520px}
  .hero-image-main{left:7%;width:78%} 

  .footer-main{grid-template-columns:1fr}
  .footer-brand{grid-column:auto}
  .footer-bottom{
    flex-direction:column;
    align-items:flex-start;
    padding-top:18px;
  }
  }

  @media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    scroll-behavior:auto!important;
    animation-duration:.001ms!important;
    transition-duration:.001ms!important;
  }
}

 @media(max-width:680px){
.site-footer ul li a {
    font-size: 12px;        line-height: 18px;
    }
.site-footer ul li {
    line-height: 14px;
}
.site-footer ul li {
        margin: 15px 0 0;
    }
    .footer-bottom p {
    margin-top: 10px;
}
}

.fadeBox .fadeItem {opacity:0; transition:opacity 1.5s ease;}

/* visible state */
.fadeBox .fadeItem.show{opacity:1;}

.greenBrush{display:block;width:438px;max-width:55%;height:26px;margin-top:7px;margin-bottom:10px;text-align:left;position:relative;left:-26px; overflow: hidden;}
.greenBrush img{display:block;width:100%;height:100%;object-fit:contain;object-position:left center;clip-path:inset(0 100% 0 0);-webkit-clip-path:inset(0 100% 0 0)}
/* animation start */
.greenBrush.animate img{animation:greenBrushDraw 1.15s cubic-bezier(.65,0,.35,1) forwards}

@keyframes greenBrushDraw {
    0% {
        clip-path: inset(0 100% 0 0);
        -webkit-clip-path: inset(0 100% 0 0);
    }

    100% {
        clip-path: inset(0 0 0 0);
        -webkit-clip-path: inset(0 0 0 0);
    }
}


.skiptomaincontent { position: absolute; left: 10%; z-index: 9999; overflow: hidden; top: 0; background-color: var(--blackColor); color: #fff; transform: translate(-50%,-100%); transition: transform 0.3s; font-size: 16px; padding: 10px;}
.skiptomaincontent:focus {transform: translate(-50%, 0%); color: #fff; background-color:var(--green);}