.logo_main{
  width: 300px !important;
  float: left;
  padding-top: 30px;
}

.mr-tb{
  margin-top: 100px;
  margin-bottom: 100px;
}
.mr-b{
  margin-bottom: 100px;
}
.p-100{
  padding: 100px 0;
}

.mr-auto a{
  margin: 0 auto;
}

/* .video-wrapper{
    height: 280px;
} */
.video-background{
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.48), rgba(0, 0, 0, 0.58));
    filter: blur(5);
}
.overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    box-sizing: border-box;
    /* padding: 5% 0px 32px; */
    line-height: 1.5;
    text-align: center;
    position: absolute;
    inset: 0;
    z-index: 1;
}
 #animatedTitle{
  font-size: 80px;
  line-height: 100px;
  font-weight: 400;
  margin-top: 30px;
  /* text-shadow: 4px 7px 5px #0e0e0e; */
  letter-spacing: 2px;
 }

  .animated {
    animation-duration: 1s;
    animation-fill-mode: both;
    animation-timing-function: cubic-bezier(.33,1,.68,1);
    font-size: 80px !important;
}

.animated-infinite {
    animation-iteration-count: infinite
}

.animate-delay-1 {
    animation-delay: var(--animate-delay)
}


.button-h {
	display: inline-block;
	padding: .75rem 1.25rem;
	border-radius: 10rem;
	color: #fff;
	text-transform: uppercase;
	font-size: 1rem;
	letter-spacing: .15rem;
	transition: all .3s;
	position: relative;
	overflow: hidden;
	z-index: 1;
  background:blueviolet;}

	.button-h:before {
		content: '';
		position: absolute;
		bottom: 0;
		left: 0;
		width: 0%;
		height: 100%;
		background-color: darken(blue, 15%);
		transition: all .3s;
		border-radius: 10rem;
		z-index: -1;
	}
	.button-h:hover {
		color: #fff;	
        background: #ecc100;
    }


    /* HERO SECTION */
    .hero-section{
        padding: 64px 0;
        overflow: hidden;
      }
  
      /* small EVENT Tag */
      .eyebrow{
        display:inline-block;
        font-weight:700;
        letter-spacing:2px;
        color: var(--headline);
        font-size:0.85rem;
        margin-bottom:18px;
        position:relative;
        padding-bottom:6px;
      }
      .eyebrow::after{
        content:"";
        position:absolute;
        left:0;
        bottom:0;
        height:3px;
        width:32px;
        /* background: var(--accent);
        border-radius:2px; */
      }
  
      /* Headline */
      .hero-title{
        font-size: 2.9rem;
        line-height:1.32;
        color: var(--headline);
        font-weight:600;
        margin: 6px 0 18px;
        letter-spacing: -0.6px;
      }
  
      /* highlighted spans inside headline */
      .hero-title .accent{
        color: #ecc100;
        font-weight:500;
      }
  
      /* lead paragraph */
      .hero-lead{
        color: var(--muted);
        max-width: 64ch;
        margin-bottom: 28px;
        font-size:1rem;
      }
  
      /* CTA pill */
      .btn-cta{
        display:inline-flex;
        align-items:center;
        gap:12px;
        padding: 12px 18px;
        border-radius: 999px;
        color: #fff;
        font-weight:600;
        background: var(--cta-grad);
        border: none;
        box-shadow: 0 8px 30px rgba(107,76,255,0.18);
        transition: transform .22s cubic-bezier(.2,.9,.2,1), box-shadow .22s, filter .22s;
        text-decoration:none;
        background-color: cornflowerblue;
        color: #fff !important;
      }
      .btn-cta:hover{
        transform: translateY(-4px) scale(1.02);
        box-shadow: 0 18px 40px rgba(107,76,255,0.22);
      }
      .btn-cta .arrow{
        display:inline-block;
        transform: translateX(-2px);
        transition: transform .22s;
        opacity:0.95;
      }
      .btn-cta:hover .arrow{ transform: translateX(4px); }
  
      /* right image card */
      .hero-visual{
        position:relative;
        border-radius:8px;
        overflow:hidden;
        min-height:320px;
        box-shadow: 0 12px 40px rgba(6,10,30,0.12);
        background: linear-gradient(180deg, rgba(0,0,0,0.02), rgba(0,0,0,0.02));
      }
  
      /* actual image and effects */
      .hero-visual img {
        width:100%;
        height:100%;
        object-fit:cover;
        display:block;
        transform-origin: center center;
        transition: transform 10s cubic-bezier(.2,.8,.2,.99);
        will-change: transform;
      }
      /* slow zoom (parallax-like) */
      .hero-visual:hover img { transform: scale(1.06) translateY(-4px); }
  
      /* fireworks overlay using pseudo element */
      .hero-visual::after{
        content:"";
        position:absolute;
        inset:0;
        background-image: url('/mnt/data/c34a28a9-def2-418c-803a-b0f027d773b4.png');
        /* The above is your provided image — we will use a semi-transparent fireworks overlay effect */
        background-size: cover;
        background-position:center;
        mix-blend-mode: screen;
        opacity:0.12; /* tune to taste */
        pointer-events:none;
        transition: opacity .4s;
      }
      .hero-visual:hover::after{ opacity:0.18; transform: translateY(-6px); }
  
      /* small watermark / label bottom-right similar to screenshot */
      .photo-label{
        position:absolute;
        right:12px;
        bottom:10px;
        font-size:0.78rem;
        color: rgba(255,255,255,0.9);
        background: linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
        padding:6px 10px;
        border-radius:6px;
        backdrop-filter: blur(4px);
        display:inline-block;
      }
  
      /* Entrance animations - simple and lightweight */
      .reveal {
        opacity:0;
        transform: translateY(18px);
        animation: revealUp .7s cubic-bezier(.2,.8,.2,.95) forwards;
      }
      .reveal.delay-1{ animation-delay: .12s; }
      .reveal.delay-2{ animation-delay: .22s; }
      .reveal.delay-3{ animation-delay: .32s; }
  
      @keyframes revealUp{
        to { opacity:1; transform: translateY(0); }
      }
  
      /* responsive spacing */
      @media (max-width:991.98px){
        .hero-section{ padding: 48px 0; }
        .photo-label{ font-size:0.72rem; right:10px; bottom:8px; }
      }
      @media (max-width:575.98px){
        .hero-section{ padding:36px 0; }
        .hero-visual{ min-height:260px; margin-top:22px; }
      }


      .footer-section {
        background-color: rgb(0 56 86);
        position: relative;
      }
      .footer-cta {
        border-bottom: 1px solid #373636;
      }
      .single-cta i {
        color: #ff5e14;
        font-size: 30px;
        float: left;
        margin-top: 8px;
      }
      .cta-text {
        padding-left: 15px;
        display: inline-block;
      }
      .cta-text h4 {
        color: #fff;
        font-size: 20px;
        font-weight: 600;
        margin-bottom: 2px;
      }
      .cta-text span {
        color: #757575;
        font-size: 15px;
      }
      .footer-content {
        position: relative;
        z-index: 2;
      }
      .footer-pattern img {
        position: absolute;
        top: 0;
        left: 0;
        height: 330px;
        background-size: cover;
        background-position: 100% 100%;
      }
      .footer-logo {
        margin-bottom: 30px;
      }
      .footer-logo img {
        max-width: 96%;
      }
      .footer-logo h2{
        margin-top: 30px;
        margin-left: 20px;
      }
      .footer-text p {
        margin-bottom: 14px;
        font-size: 14px;
            color: #ffffff;
        line-height: 28px;
        text-align: left !important;

      }
      .footer-social-icon span {
        color: #fff;
        display: block;
        font-size: 20px;
        font-weight: 700;
        font-family: 'Poppins', sans-serif;
        margin-bottom: 20px;
      }
      .footer-social-icon a {
        color: #fff;
        font-size: 16px;
        margin-right: 15px;
      }
      .footer-social-icon i {
        height: 40px;
        width: 40px;
        text-align: center;
        line-height: 38px;
        border-radius: 50%;
      }
      .facebook-bg{
        background: #3B5998;
      }
      .twitter-bg{
        background: #55ACEE;
      }
      .google-bg{
        background: #DD4B39;
      }
      .footer-widget-heading h3 {
        color: #fff;
        font-size: 20px;
        font-weight: 600;
        margin-bottom: 40px;
        position: relative;
      }
      .footer-widget-heading h3::before {
        content: "";
        position: absolute;
        left: 0;
        bottom: -15px;
        height: 2px;
        width: 50px;
        background: #ff5e14;
      }
      .footer-widget ul li {
        margin-bottom: 12px;
      }
      .footer-widget ul li a:hover{
        color: #ff5e14;
      }
      .footer-widget ul li a {
        color: #ffffff;
        text-transform: capitalize;
      }
      .subscribe-form {
        position: relative;
        overflow: hidden;
      }
      .subscribe-form input {
        width: 100%;
        padding: 14px 28px;
        background: #2E2E2E;
        border: 1px solid #2E2E2E;
        color: #fff;
      }
      .subscribe-form button {
          position: absolute;
          right: 0;
          background: #ff5e14;
          padding: 13px 20px;
          border: 1px solid #ff5e14;
          top: 0;
      }
      .subscribe-form button i {
        color: #fff;
        font-size: 22px;
        transform: rotate(-6deg);
      }
      .copyright-area{
        background: #202020;
        padding: 25px 0;
      }
      .copyright-text p {
        margin: 0;
        font-size: 14px;
        color: #ffffff;
      }
      .copyright-text p a{
        color: #ff5e14;
      }
      .footer-menu li {
        display: inline-block;
        margin-left: 20px;
      }
      .footer-menu li:hover a{
        color: #ff5e14;
      }
      .footer-menu li a {
        font-size: 14px;
        color: #ffffff;
      }




      /* 3 */
.btn-3 {
    background: rgb(0,172,238);
  background: linear-gradient(0deg, rgba(0,172,238,1) 0%, rgba(2,126,251,1) 100%);
    width: 130px;
    height: 40px;
    line-height: 42px;
    padding: 0;
    border: none;
    
  }
  .btn-3 span {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
  }
  .btn-3:before,
  .btn-3:after {
    position: absolute;
    content: "";
    right: 0;
    top: 0;
     background: rgba(2,126,251,1);
    transition: all 0.3s ease;
  }
  .btn-3:before {
    height: 0%;
    width: 2px;
  }
  .btn-3:after {
    width: 0%;
    height: 2px;
  }
  .btn-3:hover{
     background: transparent;
    box-shadow: none;
  }
  .btn-3:hover:before {
    height: 100%;
  }
  .btn-3:hover:after {
    width: 100%;
  }
  .btn-3 span:hover{
     color: rgba(2,126,251,1);
  }
  .btn-3 span:before,
  .btn-3 span:after {
    position: absolute;
    content: "";
    left: 0;
    bottom: 0;
     background: rgba(2,126,251,1);
    transition: all 0.3s ease;
  }
  .btn-3 span:before {
    width: 2px;
    height: 0%;
  }
  .btn-3 span:after {
    width: 0%;
    height: 2px;
  }
  .btn-3 span:hover:before {
    height: 100%;
  }
  .btn-3 span:hover:after {
    width: 100%;
  }

  .custom-btn-new {
    color: #230074;
    border-radius: 5px;
    font-family: 'Lato', sans-serif;
    font-weight: 500;
    background: #fff;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    display: inline-block;
     box-shadow:2px 2px 2px 0px rgba(255,255,255,.5),
     7px 7px 20px 0px rgba(0,0,0,.1),
     4px 4px 5px 0px rgba(0,0,0,.1);
    outline: none;
  }

  .btnn {
    padding: 10px 20px;
    margin: 10px;
    border: none;
    cursor: pointer;
    font-size: 16px;
    transition: all 0.3s ease;
  }

  /* 3. Border Reveal */
.btn-border-reveal {
    background-color: transparent;
    color: #9b59b6;
    border: 2px solid #9b59b6;
    position: relative;
  }
  
  .btn-border-reveal::after {
    content: "";
    position: absolute;
    width: 0;
    height: 100%;
    top: 0;
    left: 0;
    background-color: #9b59b6;
    transition: width 0.3s ease;
    z-index: -1;
  }
  
  .btn-border-reveal:hover::after {
    width: 100%;
  }
  
  .btn-border-reveal:hover {
    color: white;
    background-color: #9b59b6;
    transition: cubic-bezier(0.55, 0.085, 0.68, 0.53)


  }



  /* Centering wrapper */
  .subscribe-hero{
    min-height: 72vh;          /* adjust vertical size */
    display:flex;
    align-items:center;
    justify-content:center;
    padding: 56px 20px;
  }

  .subscribe-card{
    width:100%;
    max-width:980px;
    text-align:center;
  }

  /* eyebrow / small label */
  .eyebrow{
    display:inline-block;
    color: var(--muted);
    font-weight:600;
    letter-spacing:1px;
    margin-bottom: 14px;
    position:relative;
    padding-left: 18px;
    font-size:0.95rem;
  }
  .eyebrow::before{
    content:"—";
    position:absolute;
    left:0;
    top:0;
    color: var(--muted);
    font-weight:700;
    transform: translateY(-2px);
  }

  /* Large headline */
  .subscribe-title{
    font-weight:300;
    font-size: clamp(1.8rem, 4.8vw, 3.6rem);
    line-height:1.04;
    margin: 8px 0 26px;
    color: #fff;
    letter-spacing: -0.5px;
  }

  /* Input + button row */
  .subscribe-form{
    margin-top: 18px;
    display:flex;
    justify-content:center;
    gap:16px;
    align-items:center;
    flex-wrap:wrap;
  }

  /* Rounded large input */
  .email-input{
    min-width:320px;
    max-width:640px;
    flex: 1 1 480px;
    background: transparent;
    border: 1px solid var(--input-border);
    color: #fff;
    padding: 18px 22px;
    border-radius: 999px;
    outline: none;
    font-size:1rem;
    transition: box-shadow .18s, border-color .18s, transform .12s;
    -webkit-appearance: none;
    appearance: none;
  }
  .email-input::placeholder{ color: var(--muted); opacity:0.9; font-weight:300; }
  .email-input:focus{
    border-color: rgba(255,255,255,0.36);
    box-shadow: 0 8px 24px rgba(0,0,0,0.45), 0 0 0 6px rgba(255,255,255,0.02);
    transform: translateY(-1px);
  }

  /* Pill button */
  .btn-pill{
    border-radius: 999px;
    padding: 12px 26px;
    min-height:48px;
    display:inline-flex;
    align-items:center;
    gap:12px;
    background: blueviolet;
    border: 1px solid #151414;
    color: #DD4B39;
    font-weight:600;
    font-size:0.98rem;
    cursor:pointer;
    transition: transform .16s ease, box-shadow .16s ease, blueviolet .16s;
    position:relative;
    overflow:hidden;
  }
  .btn-pill:hover{
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.5);
    background: rgba(255,255,255,0.02);
  }

  /* small dot on the button (right side) */
  .btn-pill .dot{
    width:9px;
    height:9px;
    background: #fff;
    border-radius:50%;
    display:inline-block;
    box-shadow: 0 2px 6px rgba(255,255,255,0.08);
    transition: transform .18s ease, opacity .18s;
    opacity:0.95;
    margin-left:6px;
  }

  /* subtle pulsing on hover */
  .btn-pill:hover .dot{
    transform: scale(1.25);
    opacity:1;
  }

  /* optional micro interaction: pressing */
  .btn-pill:active{ transform: translateY(-2px) scale(.995); }

  /* small helper text below */
  .helper{
    margin-top: 14px;
    color: var(--muted);
    font-size:0.92rem;
  }

  /* responsive tweaks */
  @media (max-width:640px){
    .email-input{ flex-basis: 100%; max-width:100%; min-width:0; }
    .btn-pill{ flex-basis: auto; }
    .subscribe-title{ font-size: clamp(1.7rem, 7.5vw, 2.2rem); }
    .subscribe-form{ gap:10px; }
  }

  .bg-offBlack {
    --tw-bg-opacity: 1;
    background-color: rgb(29 29 29);
    color: #fff;
}





   /* HERO WRAPPER */
   .testimonial-hero{
    position: relative;
    width: 100%;
    min-height: 420px;           /* desktop height */
    display:flex;
    align-items: stretch;
    overflow: hidden;
    border-radius: 2px;
  }

  /* background image container */
  .testimonial-bg{
    position:absolute;
    inset:0;
    background-image: url('../images/long-shot-kids-running-field.jpg');
    background-position: center right; /* align image to right as in screenshot */
    background-size: cover;
    background-repeat: no-repeat;
    z-index:0;
    transform: translateZ(0);
  }

  /* dark translucent overlay for legibility */
  .testimonial-overlay{
    position:absolute;
    inset:0;
    background: linear-gradient(180deg, rgba(0,0,0,0.48), rgba(0,0,0,0.58));
    z-index:1;
  }

  /* CONTENT PANE (left) */
  .testimonial-content{
    position: relative;
    z-index:2;
    display:flex;
    align-items:flex-end;         /* keeps quote anchored near bottom like screenshot */
    width:100%;
    padding: clamp(28px, 6vw, 64px);
    /* limit width on very wide screens so text doesn't run too long */
    box-sizing:border-box;
    
  }

  .testimonial-inner{
    max-width: 720px;           /* controls line-length */
    width:100%;
    color: var(--quote-color);
  }

  blockquote{
    margin: 0 0 18px 0;
    padding: 100px 0px;
    font-weight: 300;
    font-size: clamp(1.25rem, 2.85vw, 2rem); /* responsive size */
    line-height: 1.32;
    letter-spacing: -0.2px;
    text-shadow: 0 6px 18px rgba(0,0,0,0.45);
    position: relative;
    color: rgb(255, 255, 255) !important;
  }

  /* big decorative opening quote (optional) */
  blockquote::before{
    content: "“";
    position:absolute;
    left: -20px;
    top: -28px;
    font-size: clamp(3rem, 7vw, 5.6rem);
    color: rgba(255,255,255,0.07);
    line-height:1;
    font-weight:300;
    pointer-events:none;
  }

  /* author and role */
  .testimonial-author{
    margin-top: 12px;
    font-size:0.95rem;
    color: var(--muted);
    font-weight:500;
    color: #fff;
  }
  .testimonial-role{
    margin-top:4px;
    font-size:0.86rem;
    color: rgba(255,255,255,0.7);
    font-weight:400;
  }

  /* thin bottom divider like screenshot */
  .hero-divider{
    position:absolute;
    left: clamp(28px, 6vw, 64px);
    right: clamp(28px, 6vw, 64px);
    bottom: 10px;
    height:1px;
    background: #ffffff;
    z-index:2;
    opacity:0.95;
  }

  /* small visual padding on mobile */
  @media (max-width:767.98px){
    .testimonial-hero{ min-height:360px; }
    blockquote::before{ left:-14px; top:-18px; font-size: clamp(2rem, 10vw, 3.5rem); }
    .testimonial-content{ padding: 22px; align-items:flex-start; } /* push to top on small screens */
    .testimonial-inner{ max-width: 100%; }
    .hero-divider{ left:16px; right:16px; bottom:8px; }
  }

  /* subtle entrance animation */
  .reveal {
    opacity: 0;
    transform: translateY(6px);
    animation: revealUp .7s cubic-bezier(.2,.9,.2,1) forwards;
  }
  .reveal.delay-1{ animation-delay: .08s; }
  .reveal.delay-2{ animation-delay: .2s; }

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


/* new  yyyyyyyyyyyyyyyyyyyyyyyy */
.cards-row{
    max-width:1480px;
    margin:0 auto;
  }
  
  /* card container */
  .card-hover{
    position:relative;
    overflow:hidden;
    border-radius:8px;
    height:420px;
    background:#111;
    cursor:pointer;
    box-shadow:0 10px 30px rgba(16,24,40,0.05);
    transition:box-shadow 300ms ease;
  }
  
  .card-hover:hover{
    box-shadow:0 24px 50px rgba(16,24,40,0.12);
  }
  
  /* image wrapper */
  .card-img-wrap{
    position:absolute;
    inset:0;
    overflow:hidden;
    border-radius:8px;
  }
  
  /* image zoom IN */
  .card-img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    transform-origin:center center;
    transition:transform 380ms cubic-bezier(.2,.9,.25,1),
               filter 380ms cubic-bezier(.2,.9,.25,1);
  }
  
  .card-hover:hover .card-img{
    transform:scale(1.08); /* 🔥 zoom IN */
    filter:brightness(0.8);
  }
  
  /* subtle circle overlay */
  .card-overlay-circle{
    position:absolute;
    width:70%;
    height:140%;
    left:-20%;
    top:-15%;
    border-radius:50%;
    border:2px solid rgba(255,255,255,0.08);
    pointer-events:none;
  }
  
  /* bottom gradient */
  .card-bottom-fade{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:56%;
    background:linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,0.55));
    z-index:3;
    pointer-events:none;
  }
  
  /* top-left title */
  .card-top-title{
    position:absolute;
    left:18px;
    top:18px;
    z-index:4;
    color:#fff;
    font-size:1.9rem;
    font-weight:300;
    text-shadow:0 6px 16px rgba(0,0,0,0.55);
  }
  
  /* caption reveal */
  .card-caption{
    position:absolute;
    left:20px;
    right:20px;
    bottom:18px;
    opacity:0;
    transform:translateY(14px);
    transition:opacity 320ms ease, transform 320ms ease;
    color:#fff;
    z-index:4;
  }
  
  .card-hover:hover .card-caption{
    opacity:1;
    transform:translateY(0);
  }
  
  .card-caption h3{
    margin:0;
    font-weight:400;
    font-size: 2rem;;
  }
  
  .card-caption p{
    margin-top:6px;
    font-size:0.88rem;
    color:rgba(255,255,255,0.9);
  }
  
  @media(max-width:767px){
    .card-hover{height:260px;}
    .card-caption{left:14px; right:14px; bottom:12px;}
  }
  
  
  .btn {
    padding: 10px 20px;
    margin: 10px;
    border: none;
    cursor: pointer;
    font-size: 16px;
    transition: all 0.3s ease;
  }
  
  /* 1. Pulse Animation */
  .btn-pulse {
    background-color: #3498db;
    color: white;
    animation: pulse 1.5s infinite;
  }
  
  @keyframes pulse {
    0% {
      transform: scale(1);
    }
    50% {
      transform: scale(1.1);
    }
    100% {
      transform: scale(1);
    }
  }
  
  /* 2. Wobble Animation */
  .btn-wobble {
    background-color: #e74c3c;
    color: white;
  }
  
  .btn-wobble:hover {
    animation: wobble 0.8s;
  }
  
  @keyframes wobble {
    0%,
    100% {
      transform: translateX(0%);
    }
    15% {
      transform: translateX(-25%) rotate(-5deg);
    }
    30% {
      transform: translateX(20%) rotate(3deg);
    }
    45% {
      transform: translateX(-15%) rotate(-3deg);
    }
    60% {
      transform: translateX(10%) rotate(2deg);
    }
    75% {
      transform: translateX(-5%) rotate(-1deg);
    }
  }
  
  /* 3. Border Reveal */
  .btn-border-reveal {
    background-color: transparent;
    color: #9b59b6;
    border: 2px solid #9b59b6;
    position: relative;
  }
  
  .btn-border-reveal::after {
    content: "";
    position: absolute;
    width: 0;
    height: 100%;
    top: 0;
    left: 0;
    background-color: #9b59b6;
    transition: width 0.3s ease;
    z-index: -1;
  }
  
  .btn-border-reveal:hover::after {
    width: 100%;
  }
  
  .btn-border-reveal:hover {
    color: white;
  }
  
  /* 4. Rotate 3D */
  .btn-rotate-3d {
    background-color: #f39c12;
    color: white;
    perspective: 300px;
    transform-style: preserve-3d;
  }
  
  .btn-rotate-3d:hover {
    animation: rotate3d 0.7s;
  }
  
  @keyframes rotate3d {
    0% {
      transform: rotateX(0deg);
    }
    50% {
      transform: rotateX(180deg);
    }
    100% {
      transform: rotateX(360deg);
    }
  }

  
.img-responsive{
    width: 290px;
}

@media screen and (max-width:967px) {
  .header-area .main-nav .logo h4{
    float: none;
    height: 80px;
    line-height: 31px;
    margin-top: 17px;
    color: rgb(0, 37, 58);
  }
  .header-area .main-nav .menu-trigger span, .header-area .main-nav .menu-trigger span:before, .header-area .main-nav .menu-trigger span:after, .header-area .main-nav .menu-trigger span:before{
    background-color:  rgb(0, 37, 58);;
  }
  .hero{
    text-align: left;
  }
  #animatedTitle{
    text-align: left;
    font-size: 50px !important;
    line-height: 60px;
    margin-top: 20px;
    font-family: 'Poppins' !important;
  }
  .overlaytext{
    font-weight: 20px;
    line-height: 30px;
    text-align: left;
    font-family: 'Poppins' !important;
  }

 .video-background {
    position: absolute;
    left: 50%;
    top: 38%;
    height: 124%;

  }
  .overlay{
    padding: 10px 0px;
  }
  .main-banner {
    padding-top: 0px;
}
.main-banner::before{
  margin-left: 0px;
  width: 75px;
}
.video-wrapper{
  height: auto;
}
}


.wrapperb {
  margin: 0 auto;
}

.wrapperb a {
  width: auto;
  height: 56px;
  line-height: 56px;
  font-size: 18px;
  font-family: sans-serif;
  text-decoration: none;
  color: #052f52;
  border: 1px solid #000000;
  letter-spacing: 2px;
  text-align: center;
  position: relative;
  transition: all .35s;
  background: #fff;
  border-radius: 4px;
  padding: 10px 20px;
  cursor: pointer;
  /* Smoothly rounded corners (adjust value as needed) */
  transition: background-color 0.3s ease;
  /* Smooth transition */

}

.wrapperb a span {
  position: relative;
  z-index: 2;
}

.wrapperb a:after {
  position: absolute;
  content: "";
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background: #003856;
  transition: all .35s;
}

.wrapperb a:hover {
  color: #fff;
  border-radius: 4px;
}

.wrapperb a:hover:after {
  width: 100%;
  border-radius: 4px;
}


/* our services styles */


.container-narrow{
  margin-left:auto;
  margin-right:auto;
  padding-left:20px;
  padding-right:20px;
}

/* small section label like: “— About us” */
.section-kicker{
  font-size:1rem;
  color:var(--muted);
  letter-spacing:0.16em;
  text-transform:uppercase;
  margin-bottom:12px;
}

/* Hero */
.hero {
  margin-top:36px;
  margin-bottom:28px;
}

.hero .lead-heading{
  font-size: 4.5rem;
  line-height:1.48;
  font-weight:300;
  color:var(--text);
  margin-bottom:20px;
}

.hero .side-note{
  color:var(--muted);
  font-size: 1.2rem;
}

/* big image under hero */
.hero-image {
  margin-top:20px;
  margin-bottom:36px;
}

.hero-image img{ width:100%; height:auto; display:block; border-radius:4px; }

/* Two-column content blocks */
.two-col {
  display:grid;
  grid-template-columns: 1fr 360px;
  gap:36px;
  align-items:start;
  margin-bottom:40px;
}

.big-copy{
  font-size:2.5rem;
  line-height:1.3;
  font-weight:300;
  margin-bottom:8px;
}

.two-col .side-copy{
  color:var(--muted);
  font-size:1.2rem;
  line-height:1.6;
}

/* image blocks with small side accents */
.media-grid{
  display:grid;
  grid-template-columns: 1fr 300px;
  gap:24px;
  align-items:center;
  margin-bottom:36px;
}

.media-card img{ width:100%; border-radius:6px; display:block; }

/* values grid */
.values {
  display:grid;
  grid-template-columns: 1fr 360px;
  gap:36px;
  margin-bottom:36px;
}

.values .title{ font-size:1.25rem; font-weight:400; margin-bottom:12px; }
.values .text{ color:var(--muted); font-size:1.2rem; line-height:1.6; }

.value-list .value-item{ margin-bottom:18px; }
.value-item .v-title{ color:#2a8b87; font-weight:600; font-size:0.98rem; margin-bottom:6px; }
.value-item .v-desc{ color:var(--muted); font-size:0.92rem; }

/* quote image block */
.people-quote{
  margin:40px 0;
  display:grid;
  gap:20px;
}
.people-quote .quote-box{
  position:relative;
  border-radius:6px;
  overflow:hidden;

}
.people-quote img{ width:100%; display:block; }

.quote-overlay{
  position:absolute;
  left:18px;
  bottom:30px;
  right:18px;
  color:#fff;
  font-size:2rem;
  /* background:linear-gradient(rgba(0,0,0,0) 0%, rgba(0,0,0,0.45) 100%); */
  padding:28px;
  border-radius:6px;
}

/* join us small hero (image left + text right) */
.join-row{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:28px;
  align-items:center;
  margin:40px 0;
}

.join-media img{ width:100%; border-radius:6px; display:block; }

.join-panel .kicker{ font-size:12px; color:var(--muted); margin-bottom:8px; }
.join-panel .join-heading{ font-size:1.5rem; font-weight:400; margin-bottom:12px; }
.btn-outline{
  border-radius:999px;
  padding:8px 16px;
  border:1px solid rgba(0,0,0,0.1);
  background:transparent;
  color:var(--text);
  font-size:1.2rem;
}

/* careers table */
.jobs-table{
  margin-top:20px;
  border-top:1px solid var(--accent);
  border-collapse:collapse;
  width:100%;
  overflow:auto;
  margin-bottom:48px;
}
.jobs-table th, .jobs-table td{
  text-align:left;
  padding:14px 12px;
  vertical-align:middle;
  border-bottom:1px solid rgba(0,0,0,0.04);
}
.jobs-table th{ font-size:0.9rem; color:var(--muted); font-weight:600; }

/* newsletter dark strip */
.newsletter {
  background:var(--dark);
  color:#fff;
  padding:64px 20px;
  text-align:center;
}

.newsletter .lead{ font-size:1.15rem; margin-bottom:18px; font-weight:300; }

.newsletter .form-inline{ display:inline-flex; gap:8px; align-items:center; flex-wrap:wrap; justify-content:center; }

.newsletter input[type="email"]{
  min-width:260px;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.12);
  background:transparent;
  color:#fff;
  outline:none;
}

.newsletter button{
  border-radius:999px;
  padding:10px 16px;
  border:1px solid rgba(255,255,255,0.12);
  background:#fff;
  color:#111;
}

/* small helpers */
.thin-rule{ height:1px; background:var(--accent); width:120px; margin:16px 0; }
.muted{ color:var(--muted); }

/* RESPONSIVE */
@media (max-width: 992px){
  .two-col, .values, .media-grid, .hero-image { grid-template-columns: 1fr; }
  .join-row{ grid-template-columns: 1fr; }
  .hero .lead-heading{ font-size:1.6rem; }
}

@media (max-width:576px){
  .hero .lead-heading{ font-size:1.35rem; }
  .container-narrow{ padding-left:14px; padding-right:14px; }
  .newsletter input[type="email"]{ min-width:160px; }
  .jobs-table thead{ display:none; }
  .jobs-table tbody tr{ display:block; padding:10px 0;}
  .jobs-table tbody td{ display:block; padding:8px 0;}
}

.featued img{
    background-color: #fff;
    padding: 10px;
    height: 80px;
}