/* ============================================================================
   TEMPLATE   : Hopeful — Multipage Nonprofit, Charity & Donation HTML Template
   AUTHOR     : Themesfamily
   DESCRIPTION: Core stylesheet for all pages (home variants, about, causes,
                events, blog, donation flow, volunteer, contact, 404, etc.)
   VERSION    : 1.0.0
   NOTE       : Organized and documented for easier maintenance. Section
                numbers below correspond to the numbered banners inside
                this file — search for "N. TITLE" to jump to a section.
============================================================================ */

/* ============================================================================
   TABLE OF CONTENTS
   ----------------------------------------------------------------------------
    1.  Root Variables (design tokens)
    2.  Reset / Base
    3.  Section Heading (eyebrow + title kit)
    4.  Buttons
    5.  Preloader
    6.  Topbar
        Bootstrap Navigation Overrides (header, menu, search, mobile nav)
    8.  Hero
        Hero Slick Slider (Home Three variant)
        Marquee / Logo Ticker Strip
    9.  Page / Inner Banner (breadcrumb)
    10. About Section
    11. Counter Section
    12. Cause Cards
    13. Steps / Process
    14. Volunteer / CTA Split
    15. Events
    16. Testimonials
    17. Blog
    18. Sponsors
    19. Newsletter Band
    20. Footer
    21. Sidebar (Blog / Cause Details)
    22. Donation Page
    23. Forms / Contact
    24. FAQ
    25. Cause Details
    26. Volunteer Page
    27. 404 Page
        Coming Soon Page
    28. Pagination
    29. Blog Details
    30. Reveal Animation base states (GSAP controlled)
    31. Utility
        Slick Slider — shared arrow & dot styles
============================================================================ */

/* ==========================================================================
   1. ROOT VARIABLES
   Design tokens: brand colors, typography, radius, shadow
   and transition scale, consumed everywhere via var(--token).
========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Recursive:wght@300..1000&display=swap');

:root{
  /* Brand & semantic colors */
  --primary:#F2542D;          /* main brand orange — CTAs, links, accents */
  --primary-dark:#D2451F;     /* hover/active state of --primary */
  --primary-light:#FFF1EC;    /* tint used for soft backgrounds/badges */
  --secondary:#0B1B33;        /* main brand navy — headings, dark sections */
  --secondary-light:#132743;  /* secondary gradient stop */
  --accent:#FFC93C;           /* yellow accent — icons on dark backgrounds */
  --green:#2FAE60;            /* success / validation state */

  /* Neutrals (light -> dark) */
  --light:#F7F8FB;
  --gray-100:#F2F3F5;
  --gray-300:#DCE0E6;
  --gray-500:#8A93A3;
  --gray-700:#525C6B;         /* default body text color */
  --dark:#0B1B33;
  --white:#FFFFFF;
  --border: #dddddd;

  /* Typography */
  --font-head:"Recursive", sans-serif;     /* headings */
  --font-body:'Inter', sans-serif;         /* body copy */
  --atf-ff-fontawesome: "Font Awesome 7 free";

  /* Border radius scale */
  --radius-sm:8px;
  --radius-md:16px;
  --radius-lg:28px;
  --radius-pill:100px;        /* fully rounded pills/buttons */

  /* Elevation (box-shadow) scale */
  --shadow-sm:0 4px 16px rgba(11,27,51,.06);
  --shadow-md:0 12px 40px rgba(11,27,51,.10);
  --shadow-lg:0 24px 60px rgba(11,27,51,.16);

  /* Shared transition timing used across hover/interactive states */
  --transition: all .35s cubic-bezier(.4,0,.2,1);
}

/* ==========================================================================
   2. RESET / BASE
   Browser reset, base typography, form field defaults and
   section-level spacing utilities (.section-pad / .section-pad-sm).
========================================================================== */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-body);
  color:var(--gray-700);
  font-size:16px;
  line-height:1.75;
  background:var(--white);
  overflow-x:hidden;
}
h1,h2,h3,h4,h5,h6{
  font-family:var(--font-head);
  color:var(--secondary);
  font-weight:700;
  line-height:1.25;
  margin:0 0 .75rem;
}
p{margin:0 0 1rem;}
a{color:inherit;text-decoration:none;transition:var(--transition);}
a:hover{color:var(--primary);}
img{max-width:100%;height:auto;display:block;}
ul{margin:0;padding:0;list-style:none;}
button{font-family:var(--font-body);cursor:pointer;}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px;}
.container{max-width:1260px;}
a,
button {
    color: inherit;
    outline: none;
    border: none;
    background: transparent;
}
button:hover {
    cursor: pointer;
}
button:focus {
    outline: 0;
}
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="url"],
textarea {
    outline: none;
    height: 56px;
    width: 100%;
    line-height: 56px;
    font-size: 16px;
    padding-left: 25px;
    padding-right: 25px;
    color: var(--secondary);
    border: 1px solid rgba(255, 255, 255, 0.1);
    background-color: var(--white);
	border-radius: 15px;
}
input[type="text"]::-webkit-input-placeholder,
input[type="email"]::-webkit-input-placeholder,
input[type="tel"]::-webkit-input-placeholder,
input[type="number"]::-webkit-input-placeholder,
input[type="password"]::-webkit-input-placeholder,
input[type="url"]::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
    /* Chrome/Opera/Safari */
   color: var(--gray-700);
    font-size: 16px;
}
input[type="text"]::-moz-placeholder,
input[type="email"]::-moz-placeholder,
input[type="tel"]::-moz-placeholder,
input[type="number"]::-moz-placeholder,
input[type="password"]::-moz-placeholder,
input[type="url"]::-moz-placeholder,
textarea::-moz-placeholder {
    /* Firefox 19+ */
    color: var(--gray-700);
    font-size: 16px;
}
input[type="text"]:-moz-placeholder,
input[type="email"]:-moz-placeholder,
input[type="tel"]:-moz-placeholder,
input[type="number"]:-moz-placeholder,
input[type="password"]:-moz-placeholder,
input[type="url"]:-moz-placeholder,
textarea:-moz-placeholder {
    /* Firefox 4-18 */
    color: var(--gray-700);
    font-size: 16px;
}
input[type="text"]:-ms-input-placeholder,
input[type="email"]:-ms-input-placeholder,
input[type="tel"]:-ms-input-placeholder,
input[type="number"]:-ms-input-placeholder,
input[type="password"]:-ms-input-placeholder,
input[type="url"]:-ms-input-placeholder,
textarea:-ms-input-placeholder {
    /* IE 10+  Edge*/
    color: var(--gray-700);
    font-size: 16px;
}
input[type="text"]::placeholder,
input[type="email"]::placeholder,
input[type="tel"]::placeholder,
input[type="number"]::placeholder,
input[type="password"]::placeholder,
input[type="url"]::placeholder,
textarea::placeholder {
    /* MODERN BROWSER */
    color: var(--gray-700);
    font-size: 16px;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="password"]:focus,
input[type="url"]:focus,
textarea:focus {
    border: 1px solid var(--primary);
    font-size: 16px;
}
input[type="text"]:focus::placeholder,
input[type="email"]:focus::placeholder,
input[type="tel"]:focus::placeholder,
input[type="number"]:focus::placeholder,
input[type="password"]:focus::placeholder,
input[type="url"]:focus::placeholder,
textarea:focus::placeholder {
    opacity: 0;
}
textarea {
    line-height: 1.4;
    padding-top: 17px;
    padding-bottom: 17px;
}
input[type="color"] {
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    background: none;
    border: 0;
    cursor: pointer;
    height: 100%;
    width: 100%;
    padding: 0;
    border-radius: 50%;
}
section{position:relative;}
.section-pad{padding:120px 0;}
.section-pad-sm{padding:80px 0;}
@media(max-width:991px){
  .section-pad{padding:90px 0;}
  .section-pad-sm{padding:60px 0;}
}
@media(max-width:575px){
  .section-pad{padding:70px 0;}
  .section-pad-sm{padding:50px 0;}
}
.primary-bg{background:var(--primary);}
.black-bg{background:var(--secondary);}
.primary-light{background:var(--primary-light);}
.bg-light{background:var(--light) !important;}
.bg-dark-section{background:var(--secondary) !important; color:rgba(255,255,255,.75);}
.bg-dark-section h1,.bg-dark-section h2,.bg-dark-section h3,.bg-dark-section h4{color:var(--white);}
.bg-primary-soft{background:var(--primary-light) !important;}
.text-green{color:var(--green) !important;}
.gray-300{color:var(--gray-300) !important;}
.gray-100{color:var(--gray-100) !important;}

.abstract-bg-1 {
  width: 100vw;
  background-color: #ff9999;
  background-image: 
    radial-gradient(at 0% 0%, hsla(253,16%,7%,1) 0, transparent 50%), 
    radial-gradient(at 50% 0%, hsla(225,39%,30%,1) 0, transparent 50%), 
    radial-gradient(at 100% 0%, hsla(339,49%,30%,1) 0, transparent 50%), 
    radial-gradient(at 0% 100%, hsla(339,49%,30%,1) 0, transparent 50%), 
    radial-gradient(at 100% 100%, hsla(253,16%,7%,1) 0, transparent 50%);
  background-size: cover;
}
.abstract-bg-2 {
  background: linear-gradient(135deg, var(--secondary), var(--secondary-light), var(--dark));
  position: relative;
  overflow: hidden;
  z-index: 1;
}
.abstract-bg-2::before {
  content: '';
  position: absolute;
  top: -10%;
  left: -10%;
  width: 50vw;
  height: 50vw;
  background: radial-gradient(circle, rgba(242, 84, 45, 0.4) 0%, transparent 70%); /* --primary glow */
  filter: blur(50px);
  z-index: -1;
}
.abstract-bg-2::after {
  content: '';
  position: absolute;
  bottom: -10%;
  right: -10%;
  width: 60vw;
  height: 60vw;
  background: radial-gradient(circle, rgba(255, 201, 60, 0.4) 0%, transparent 70%); /* --accent glow */
  filter: blur(60px);
  z-index: -1;
}
.atf-cover-bg {
    position: relative;
    z-index: 1;
}
.atf-cover-bg::before {
    content: "";
	width: 100%;
    height: 100%;
	top: 0;
    left: 0;
    position: absolute;
    background: rgba(0, 0, 0, 0.4);
    z-index: -1;
}
/* shape */
.shape-1 {
	position: absolute;
	right: 14%;
	bottom: -11px;
	width: 4%;
	background-size: cover;
	background-position: center;
	z-index: 0;
	object-fit: cover;
	animation: floatX 4s ease-in-out infinite .8s;
}
.shape-2 {
	position: absolute;
	right: -116px;
	top: 5%;
	background-size: cover;
	background-position: center;
	z-index: 1;
	object-fit: cover;
	animation: floatX 4s ease-in-out infinite .8s;
	width: 15%;
}
.about-shape-1 {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 40%;
	background-size: cover;
	background-position: center;
	z-index: 3;
	object-fit: cover;
}
.about-shape-2 {
	position: absolute;
	right: 6%;
	bottom: 32%;
	width: 28%;
	background-size: cover;
	background-position: center;
	z-index: 3;
	object-fit: cover;
	animation: floatX 4s ease-in-out infinite .8s;
}
.causes-shape-1 {
	position: absolute;
	right: -2px;
	top: 0;
	width: 40%;
	background-size: cover;
	background-position: center;
	z-index: 3;
	object-fit: cover;
}
.causes-shape-2 {
	position: absolute;
	left: 0%;
	bottom: 0%;
	width: 40%;
	background-size: cover;
	background-position: center;
	z-index: 3;
	object-fit: cover;
}
.cta-shape-1 {
	position: absolute;
	left: 28%;
	bottom: 0%;
	width: 62%;
	background-size: cover;
	background-position: center;
	z-index: 3;
	object-fit: cover;
}
.event-shape-1 {
	position: absolute;
	right: 0%;
	bottom: 0%;
	width: 62%;
	background-size: cover;
	background-position: center;
	z-index: 0;
	object-fit: cover;
}
.client-shape-1 {
	position: absolute;
	left: 6%;
	bottom: 0%;
	width: 43%;
	background-size: cover;
	background-position: center;
	z-index: 0;
	object-fit: cover;
	animation: floatX 4s ease-in-out infinite .8s;
}
.client-shape-2 {
	position: absolute;
	left: 0%;
	top: 0%;
	width: 50%;
	background-size: cover;
	background-position: center;
	z-index: -1;
	object-fit: cover;
	opacity: 0.43;
}
.footer-shape-2 {
	position: absolute;
	left: 0%;
	bottom: 0%;
	width: 45%;
	background-size: cover;
	background-position: center;
	z-index: -1;
	object-fit: cover;
	opacity: 0.43;
}
/*---------------------------------
   COMMON CLASSES
---------------------------------*/
.atf_attach_bg {
	background-position: center !important;
	background-size: cover !important;
	background-repeat: no-repeat !important;
}
.fix {
    overflow: hidden;
}
.clear {
    clear: both;
}
.p-relative {
    position: relative;
}
.p-absolute {
    position: absolute;
}
.bg_fixed {
    background-attachment: fixed;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
.atf-title-hover {
 background-position: 0 95%;
  background-repeat: no-repeat;
  background-size: 0% 1px;
  display: inline;
}
.atf-title-hover:hover {
  color: var(--primary);
  background-size: 100% 2px;
  background-image: linear-gradient(180deg, var(--primary) 0%, var(--primary) 100%);
}
/* Custom cursor — replaces the native pointer with a two-part
   dot + ring cursor; positions are updated via JS on mousemove. */
.cursor_body {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 9999;
}

.cursor_body .cursor-in,
.cursor_body .cursor-out {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  will-change: transform;
}

/* Inner dot */
.cursor_body .cursor-in {
  width: 10px;
  height: 10px;
  background-color: var(--primary);
  transition: all 0.25s ease-out;
}

/* Outer ring */
.cursor_body .cursor-out {
  width: 40px;
  height: 40px;
  border: 1px solid var(--primary);
  opacity: 0.5;
  transition: all 0.2s ease;
}  
/* ==========================================================================
   3. SECTION HEADING
   Reusable heading kit used at the top of every content block:
   eyebrow label (.sub-title) + big heading (.sec-title) + intro text.
========================================================================== */
.sub-title{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-head);
  font-weight:600;
  font-size:14px;
  letter-spacing:.5px;
  text-transform:uppercase;
  color:var(--primary);
  background:var(--primary-light);
  padding:8px 20px 8px 14px;
  border-radius:var(--radius-pill);
  margin-bottom:18px;
}
.sub-title i{font-size:16px;}
.bg-dark-section .sub-title{background:rgba(255,255,255,.08); color:var(--accent);}

.sec-title{
  font-size:44px;
  margin-bottom:18px;
  letter-spacing:-2px;
}
.sec-desc{
  max-width:600px;
  font-size:17px;
}
.mx-auto-block{margin-left:auto;margin-right:auto;}
h1,h2{
letter-spacing:-2px;	
}
@media(max-width:767px){
  .sec-title{font-size:30px;letter-spacing:0px;}
  h1,h2{
	letter-spacing:0px;	
	}
}

/* ==========================================================================
   4. BUTTONS
   Primary pill button (.atf-themes-btn) and secondary text button
   (.themes-btn), both with an animated icon + sliding label on hover.
========================================================================== */
.atf-themes-btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 10px;
  position: relative;
  background-color: var(--primary);
  font-size: 16px;
  font-weight: 500;
  padding: 5px 5px 5px 25px;
  text-align: center;
  border-radius: 50px;
  line-height: 1;
  z-index: 2;
  overflow: hidden;
  white-space: nowrap;
}
.atf-themes-btn .btn-text {
  color: var(--white);
  overflow: hidden;
}
.atf-themes-btn .btn-text span {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  line-height: 1;
  text-shadow: 0 30px 0;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
          transform: translateY(0);
  -webkit-transition: 0.4s ease-in-out;
  transition: 0.4s ease-in-out;
}
.atf-themes-btn .btn-icon {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 20px;
  line-height: 1;
  width: 42px;
  height: 42px;
  overflow: hidden;
  background-color: var(--primary-dark);
  border-radius: 50%;
}
.atf-themes-btn .btn-icon i {
  color: var(--white);
  -webkit-transform: rotate(45deg);
      -ms-transform: rotate(45deg);
          transform: rotate(45deg);
  -webkit-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}
.atf-themes-btn.btn-dark {
  background-color: var(--primary-dark);
}
.atf-themes-btn.btn-dark .btn-icon {
  background-color: var(--white);
}
.atf-themes-btn.btn-dark .btn-icon i {
  color: var(--primary-dark);
}
.atf-themes-btn.transparent-btn {
  background-color: transparent;
  border: 1px solid var(--border);
}
.atf-themes-btn.transparent-btn .btn-text {
  color: var(--primary);
}
.atf-themes-btn.transparent-btn:hover {
  border-color: var(--primary-dark);
}
.atf-themes-btn:hover .btn-text span {
  -webkit-transform: translateY(-30px);
      -ms-transform: translateY(-30px);
          transform: translateY(-30px);
}
.atf-themes-btn:hover .btn-icon i {
  -webkit-transform: rotate(0);
      -ms-transform: rotate(0);
          transform: rotate(0);
}
.atf-themes-btn-lg {
  font-size: 20px;
  padding: 7px 7px 7px 44px;
  gap: 14px;
}
.atf-themes-btn-lg .btn-icon {
  font-size: 27px;
  width: 59px;
  height: 59px;
}

.themes-btn {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  gap: 10px;
  position: relative;
  font-size: 16px;
  font-weight: 500;
  text-align: center;
  line-height: 1;
  z-index: 2;
}
.themes-btn .btn-text {
  color: var(--primary);
  overflow: hidden;
}
.themes-btn .btn-text span {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  line-height: 1;
  text-shadow: 0 30px 0;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-transform: translateY(0);
      -ms-transform: translateY(0);
          transform: translateY(0);
  -webkit-transition: 0.4s ease-in-out;
  transition: 0.4s ease-in-out;
}
.themes-btn .btn-icon {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  font-size: 20px;
  line-height: 1;
  width: 30px;
  height: 30px;
  overflow: hidden;
  background-color: var(--primary-dark);
  border-radius: 50%;
}
.themes-btn .btn-icon i {
	color: var(--white);
	-webkit-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	transform: rotate(-45deg);
	-webkit-transition: all 0.3s ease-in-out;
	transition: all 0.3s ease-in-out;
	font-size: 14px;
}
.themes-btn:hover .btn-text span {
  -webkit-transform: translateY(-30px);
      -ms-transform: translateY(-30px);
          transform: translateY(-30px);
}
.themes-btn:hover .btn-icon {
  background-color: var(--primary);
}
.themes-btn:hover .btn-icon i {
  -webkit-transform: rotate(0);
      -ms-transform: rotate(0);
          transform: rotate(0);
}
/* ==========================================================================
   5. PRELOADER
   Full-screen loading screen shown before the page paints:
   overlay fade-out, bouncing-ball loader and animated logo text.
========================================================================== */
/* ==========================================
   1. MAIN WRAPPER & STATES
   ========================================== */
.atf-preloader {
  position: fixed;
  top: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 100%;
  background-color: var(--secondary);
  z-index: 100000000;
  color: var(--primary-light);
  user-select: none;
}

.atf-preloader.is-loading .atf-preloader-hop-inner,
.atf-preloader.is-loading .atf-preloader-hop-shadow {
  animation-play-state: running;
}

.atf-preloader.is-loaded { pointer-events: none; }
.atf-preloader.is-loaded .atf-preloader-hop-shadow { display: none; }
.atf-preloader.is-loaded .atf-preloader-text { opacity: 0; visibility: hidden; }
.atf-preloader.is-loaded .atf-preloader-hop-inner { animation: fadeLeftToRight 0.7s linear; }

.atf-preloader .atf-preloader-overlay {
  position: fixed;
  top: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 100%;
  background-color: var(--secondary);
  z-index: 99999999;
  opacity: 1;
  animation: atf-fade-out 2s forwards;
}

/* ==========================================
   2. LAYOUT & FLEXBOX SETUP
   ========================================== */
.atf-preloader .atf-preloader-inner,
.atf-preloader .atf-preloader-hop-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}
.atf-preloader .atf-preloader-inner { width: 100%; height: 100%; }

.atf-preloader .atf-preloader-hop-wrap {
  gap: 10px;
  position: relative;
  inset-inline-start: 0;
  transform: translateX(16px);
}

.atf-preloader .atf-preloader-hop-inner-wrap {
  position: absolute;
  width: 10px;
  height: 100%;
  top: 50%;
  inset-inline-start: -16px;
  transform: translate(-100%, -50%);
  z-index: 10000;
}

@media only screen and (min-width: 1025px) {
  .atf-preloader .atf-preloader-hop-wrap { transform: none; }
  .atf-preloader .atf-preloader-hop-inner-wrap { inset-inline-start: -30px; }
}

/* ==========================================
   3. SHADOW & BOUNCING BALLS
   ========================================== */
.atf-preloader .atf-preloader-hop-shadow {
  position: absolute;
  width: 16px;
  height: 4px;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  background-color: var(--primary-light);
  bottom: 0;
  border-radius: 50%;
  filter: blur(12px);
  box-shadow: 0 4px 20px 0 #20e7b7;
  transition: 0.7s cubic-bezier(0.77, 0, 0.175, 1);
  animation: atf-shadow-blur 1s linear infinite paused;
}

.atf-preloader .atf-preloader-hop-inner {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--primary-light);
  box-shadow: 0 0 12px 0 #fdfdf9;
  transition: 0.7s cubic-bezier(0.77, 0, 0.175, 1);
  animation: atf-bounce-anim 1s linear infinite paused;
}

.atf-preloader .atf-preloader-hop {
  position: absolute;
  width: 14px;
  height: 14px;
  bottom: 50%;
  inset-inline-start: 50%;
  transform: translate(-50%, 50%);
  border-radius: 50%;
  background-color: rgba(0, 255, 194, 0.1);
  box-shadow: 0 0 20px 0 #20e7b7;
  filter: blur(10px);
}

/* ==========================================
   4. TEXT & LETTER DELAYS
   ========================================== */
.atf-preloader .atf-preloader-text {
  font-size: 20px;
  position: relative;
  transform: translateY(-0.03em);
  transition: 0.3s;
  font-weight: 500;
}
@media only screen and (max-width: 767px) {
  .atf-preloader .atf-preloader-text { font-size: 16px; }
}

#atf-hopeful-anim span {
  position: relative;
  transition: all 0.3s ease;
  display: inline-block;
  animation: atf-hopeful-anim 1.15s ease infinite;
  transform-origin: 100% 50%;
  transform-style: preserve-3d;
}

/* Short Delay Loop Mapping */
#atf-hopeful-anim span:nth-child(1)  { animation-delay: 0s; }
#atf-hopeful-anim span:nth-child(2)  { animation-delay: 0.05s; }
#atf-hopeful-anim span:nth-child(3)  { animation-delay: 0.1s; }
#atf-hopeful-anim span:nth-child(4)  { animation-delay: 0.15s; }
#atf-hopeful-anim span:nth-child(5)  { animation-delay: 0.2s; }
#atf-hopeful-anim span:nth-child(6)  { animation-delay: 0.25s; }
#atf-hopeful-anim span:nth-child(7)  { animation-delay: 0.3s; }
#atf-hopeful-anim span:nth-child(8)  { animation-delay: 0.35s; }
#atf-hopeful-anim span:nth-child(9)  { animation-delay: 0.4s; }
#atf-hopeful-anim span:nth-child(10) { animation-delay: 0.45s; }
#atf-hopeful-anim span:nth-child(11) { animation-delay: 0.5s; }
#atf-hopeful-anim span:nth-child(12) { animation-delay: 0.55s; }
#atf-hopeful-anim span:nth-child(13) { animation-delay: 0.6s; }
#atf-hopeful-anim span:nth-child(14) { animation-delay: 0.65s; }
#atf-hopeful-anim span:nth-child(15) { animation-delay: 0.7s; }
#atf-hopeful-anim span:nth-child(16) { animation-delay: 0.75s; }
#atf-hopeful-anim span:nth-child(17) { animation-delay: 0.8s; }
#atf-hopeful-anim span:nth-child(18) { animation-delay: 0.85s; }
#atf-hopeful-anim span:nth-child(19) { animation-delay: 0.9s; }
#atf-hopeful-anim span:nth-child(20) { animation-delay: 0.95s; }
#atf-hopeful-anim span:nth-child(21) { animation-delay: 1s; }
#atf-hopeful-anim span:nth-child(22) { animation-delay: 1.05s; }
#atf-hopeful-anim span:nth-child(23) { animation-delay: 1.15s; }

/* ==========================================
   5. OPTIMIZED KEYFRAMES
   ========================================== */
@keyframes atf-fade-out {
  0%, 50% { opacity: 1; }
  to { opacity: 0; }
}

@keyframes atf-shadow-blur {
  0%, to { filter: blur(12px); transform: translate(-50%) scale(0.6); opacity: 0.4; }
  30% { filter: blur(2px); transform: translate(-50%, -0.5rem) scale(1); opacity: 1; }
}

@keyframes fadeLeftToRight {
  0% { filter: blur(0); transform: translate(0) scale(1); opacity: 1; }
  30% { transform: translate(-3000%, 0); }
  40% { transform: translate(-2000%, 0); }
  60% { transform: translate(0%); }
  to { filter: blur(12px); transform: translate(1000%, 0) scale(7); opacity: 0.4; }
}

@keyframes atf-bounce-anim {
  0%, to { transform: translateY(calc(-50% - 1rem)) scaleX(1.4); }
  3% { transform: translateY(calc(-50% - 0.95rem)) scale(1.1, 1.05); }
  5% { transform: translateY(calc(-50% - 0.9rem)) scale(1.2, 1.1); }
  8% { transform: translateY(calc(-50% - 0.8rem)) scale(0.98, 1.15); }
  12% { transform: translateY(calc(-50% - 0.7rem)) scale(0.95, 1.2); }
  16% { transform: translateY(calc(-50% - 0.5rem)) scale(0.92, 1.25); }
  20%, 48% { transform: translateY(calc(-50% - 0.2rem)) scale(0.9, 1.4); }
  24% { transform: translateY(calc(-50% + 0.4rem)) scale(0.9, 1.7); }
  26% { transform: translateY(calc(-50% + 0.8rem)) scale(0.9, 1.4); }
  28% { transform: translateY(calc(-50% + 0.95rem)) scale(1.2, 0.7); }
  30% { transform: translateY(calc(-50% + 1rem)) scale(1.5, 0.3); }
  32% { transform: translateY(calc(-50% + 0.8rem)) scale(1.4, 0.4); }
  36% { transform: translateY(calc(-50% + 0.5rem)) scale(1.2, 0.8); }
  42% { transform: translateY(calc(-50% + 0.2rem)) scaleY(1.2); }
  54% { transform: translateY(calc(-50% - 0.3rem)) scale(0.92, 1.3); }
  62% { transform: translateY(calc(-50% - 0.5rem)) scale(0.95, 1.2); }
  68% { transform: translateY(calc(-50% - 0.6rem)) scale(0.97, 1.15); }
  75% { transform: translateY(calc(-50% - 0.7rem)) scale(0.98, 1.1); }
  80% { transform: translateY(calc(-50% - 0.8rem)) scale(0.99, 1.08); }
  85% { transform: translateY(calc(-50% - 0.9rem)) scaleY(1.05); }
  90% { transform: translateY(calc(-50% - 0.95rem)) scale(1.2, 1.03); }
  95% { transform: translateY(calc(-50% - 0.98rem)) scale(1.1, 1.01); }
}

@keyframes atf-hopeful-anim {
  0%, 24%, 36% { transform: translate3D(0, 0, 0) scale(1) rotateY(0); }
  12% { transform: translate3D(2px, -2px, 2px) scale(1.16) rotateY(6deg); }
  100% { transform: scale(1); }
}
/* ==========================================================================
   6. TOPBAR
   Slim top utility bar (social links / contact info) shown above
   the main navigation on desktop.
========================================================================== */
/* --------------------------------------------------------------------------
   BOOTSTRAP NAVIGATION OVERRIDES — START
   Custom header, main menu, search overlay and mobile
   hamburger menu, layered on top of the Bootstrap navbar.
-------------------------------------------------------------------------- */
/* header top */
.atf-top-header {
    position: relative;
    z-index: 1;
    padding:12px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.4s ease;
	overflow: hidden;
}
.header-social-title.text-white {
	padding-right: 55px;
	font-size: 14px;
}
.header-social-divider {
	width: 35px;
	height: 1px;
	background-color: #fbf2f2;
	position: absolute;
	right: 125px;
	top: 17px;
}
.atf-header-top-social {
    font-size: 16px;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
	gap:10px;
    transition: all 0.4s ease;
    color: var(--white);
    text-align: center;
}
.atf-header-top-social ul {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
}
.atf-header-top-social ul li {
	list-style:none;
}
.atf-header-top-social ul li a {
	color: rgba(255, 255, 255, 0.8);
	font-size: 16px;
	transition: all 0.5s ease-out;
}
.atf-header-top-social ul li a:hover{
	color: var(--white);
}
.atf-top-header .atf-top-header-in {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    transition: all 0.4s ease;
}
.atf-top-header-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
}
.atf-top-header-list li {
    margin-right: 30px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 16px;
}
.atf-top-header-list li a {
	color: rgba(255, 255, 255, 0.8);
	transition: all 0.3s ease-out;
	-webkit-transition: all 0.3s ease-out;
	position: relative;
}
.atf-top-header-list li a::after {
	position: absolute;
	width: 0;
	height: 1px;
	bottom: 0;
	left: 0;
	content: "";
	opacity: 0;
	visibility: hidden;
	background: #9fa8ae;
	-webkit-transition: all 0.3s ease-out;
	-moz-transition: all 0.3s ease-out;
	-ms-transition: all 0.3s ease-out;
	-o-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
}
.atf-top-header-list li a:hover {
	color: var(--white);
}
.atf-top-header-list li a:hover::after {
	width: 100%;
	opacity: 1;
	visibility: visible;
}
.atf-top-header-list li:last-child {
    margin-right: 0;
}
.atf-top-header-list li i {
	margin-right: 10px;
	color: var(--white);
}
/* --------------------------------------------------------------------------
   Search Overlay
   Full-screen search panel toggled by the header search icon.
-------------------------------------------------------------------------- */
.atf-searching-area {
    position: fixed;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    height: 100%;
    width: 0%;
    background-color: var(--secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
    z-index: 1024;
    
}
.atf-searching-area.active {
    opacity: 1;
    visibility: visible;
	width: 100%;
}
.atf-searching-area .atf-searching-close-btn {
    position: absolute;
    top: 30px;
    right: 50px;
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 40px;
    height: 40px;
    border: 1px solid var(--primary);
    background-color: var(--white);
    color: var(--primary);
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}
.atf-searching-area .atf-searching-form button:hover,
.atf-searching-area .atf-searching-close-btn:hover {
    background-color: var(--primary);
	color: var(--white);
}

@media (max-width: 575px) {
    .atf-searching-area .atf-searching-close-btn {
        right: 30px;
    }
}
.atf-searching-area .atf-searching-form {
    display: flex;
    width: 500px;
}
@media (max-width: 575px) {
    .atf-searching-area .atf-searching-form {
        width: 300px;
    }
}
.atf-searching-area .atf-searching-form input {
	border: 1px solid var(--border);
	border-right: none;
	flex-grow: 1;
	-webkit-transition: all 0.5s;
	-o-transition: all 0.5s;
	transition: all 0.5s;
	padding: 12px 18px;
	color: var(--secondary);
	border-radius: 0;
}
.atf-searching-area .atf-searching-form input:focus {
    border-color: var(--primary);
}
.atf-searching-area .atf-searching-form button {
    width: 60px;
    background-color: var(--primary);
    color: var(--white);
    display: flex;
    justify-content: center;
    align-items: center;
    border-color: var(--white);
}
.atf-header-bottom-right {
    gap: 25px;
}
.atf-searching-btn {
    background: transparent;
    font-size: 18px;
    color: var(--primary);
    border: none;
}
/* header */
.atf-site-branding img {
    max-width: 190px;
    height: auto;
}
.atf-site-branding {
    font-size: 2rem;
}
.atf-site-header.atf-style1 {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
	transition: all 0.4s ease-out;
}
.header .header-top {
    padding: 20px 0
}
.atf-site-header.atf-style1.atf-sticky-active {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 1;
    z-index: 990;
    visibility: visible;
    color: var(--secondary);
    background-color: var(--white);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    box-shadow: 0px 8px 24px rgba(149, 157, 165, 0.2);
    -webkit-animation: 0.95s ease 0s normal forwards 1 running fadeInDown;;
    -khtml-animation: 0.95s ease 0s normal forwards 1 running fadeInDown;
    -moz-animation: 0.95s ease 0s normal forwards 1 running fadeInDown;
    -ms-animation: 0.95s ease 0s normal forwards 1 running fadeInDown;
    -o-animation: 0.95s ease 0s normal forwards 1 running fadeInDown;
    animation: 0.95s ease 0s normal forwards 1 running fadeInDown;
}
.atf-site-header.atf-style1.atf-style2.atf-sticky-active{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 1;
    z-index: 990;
    visibility: visible;
    color: var(--secondary);
    background-color: var(--white);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    box-shadow: 0px 8px 24px rgba(149, 157, 165, 0.2);
    -webkit-animation: 0.95s ease 0s normal forwards 1 running stickyDown;
    -khtml-animation: 0.95s ease 0s normal forwards 1 running stickyDown;
    -moz-animation: 0.95s ease 0s normal forwards 1 running stickyDown;
    -ms-animation: 0.95s ease 0s normal forwards 1 running stickyDown;
    -o-animation: 0.95s ease 0s normal forwards 1 running stickyDown;
    animation: 0.95s ease 0s normal forwards 1 running stickyDown;
}
@keyframes stickyDown {
  0% {
    margin-top: -150px;
  }
  100% {
    margin-top: 0;
  }
}
.atf-main-menu nav ul {
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.3s ease-out;
}
.atf-main-menu > nav > ul > li > a:active,
.atf-main-menu > nav > ul > li > a:focus,
.atf-main-menu > nav > ul > li > a:hover {
    color: var(--primary);
}
.atf-main-menu > nav > ul > li {
	position: relative;
	display: inline-block;
	margin-right: 35px;
}
.atf-main-menu > nav > ul > li.menu-icon > a::before {
	content: "\f067";
	font-size: 10px;
	position: absolute;
	top: 50%;
	right: -12px;
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	transform: translateY(-50%);
	font-family: var(--atf-ff-fontawesome);
	font-weight: 900;
	 -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}

.atf-main-menu > nav > ul > li.menu-icon > a:hover::before {
	content: "\f068";
	opacity:1;
}
@media only screen and (max-width: 1199px) {
   .atf-main-menu > nav > ul > li.menu-icon > a::before {
		display:none;
	}
}
.atf-main-menu > nav > ul > li:last-child {
    margin-right: 0px !important;
}
.atf-main-menu > nav > ul > li > a {
    position: relative;
    font-size: 17px;
    font-weight: 600;
    padding: 37px 0;
    display: block;
    color: var(--secondary);
    text-transform: capitalize;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
    text-transform: capitalize;
}
/*-------------------------------
# dropdwon menu 
--------------------------------*/
.atf-main-menu > nav > ul > li .sub-menu li .sub-menu, .atf-main-menu > nav > ul > li .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	padding: 10px 0;
	display: block;
	min-width: 220px;
	visibility: hidden;
	transform: scaleY(0);
	transform-origin: top center;
	background: var(--white);
	border-top: 3px solid var(--primary);
	box-shadow: 0px 10px 30px 0px rgba(25, 25, 26, 0.1);
	z-index: 6;
	transition: all 0.3s ease-out;
}
.atf-main-menu > nav > ul > li .sub-menu li:hover > .sub-menu,
.atf-main-menu > nav > ul > li:hover > .sub-menu {
    transform: scaleY(1);
    visibility: visible;
}
.atf-main-menu > nav > ul > li .sub-menu li {
	position: relative;
	display: block;
	text-align: left;
	padding-left: 20px;
}
.atf-main-menu > nav > ul > li .sub-menu li > a {
	font-weight: 600;
	padding: 5px 0px;
	display: inline-block;
	text-transform: capitalize;
	text-align: left;
	position: relative;
	font-size: 17px;
	-webkit-transition: all 0.3s ease-out;
	-moz-transition: all 0.3s ease-out;
	-ms-transition: all 0.3s ease-out;
	-o-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
}
.atf-main-menu > nav > ul > li .sub-menu li:hover > a {
	color: var(--secondary);
}

.atf-main-menu > nav > ul > li .sub-menu li > a:hover {
	transform: initial;
}
.atf-main-menu > nav > ul > li .sub-menu li > a::after {
	height: 2px;
	background: var(--primary);
}
.atf-main-menu > nav > ul > li .sub-menu li:hover > a::after {
	opacity: 1;
	transform-origin: left center;
	transform: scaleX(1);
}
.atf-main-menu > nav > ul > li .sub-menu li > a::after {
	content: "";
	width: 100%;
	position: absolute;
	bottom: 6px;
	left: 0;
	transform-origin: right center;
	transition: -webkit-transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), -webkit-transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
	transform: scaleX(0);
}
/* Arrow icon insert style */
.atf-main-menu > nav > ul > li.menu-item-children > a::after {
	content: "\f107";
	font-family: var(--atf-ff-fontawesome);
	font-weight: 900;
	display: inline-block;
	margin-left: 5px;
	transition: transform 0.3s ease-in-out;
	font-size: 14px;
}
/* Hover korle icon rotate hobe */
.atf-main-menu > nav > ul > li.menu-item-children:hover > a:after {
    transform: rotate(180deg);
}
.atf-main-menu > nav > ul > li .sub-menu li .sub-menu {
	right: auto;
	left: 220px;
	top: 10%;
	border-top: none;
	border-left: 2px solid var(--primary);
}
@media only screen and (max-width: 1199px) {
    .atf-main-menu > nav > ul > li {
        margin-right: 30px;
    }
    .atf-site-header.atf-style1 {
        padding: 15px 0;
    }
}
/* sub-menu animation */
@media only screen and (min-width:1199px) {
  .sub-menu {
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
    -webkit-transition: opacity 350ms ease, -webkit-transform 350ms ease;
    transition: opacity 350ms ease, -webkit-transform 350ms ease;
    transition: opacity 350ms ease, transform 350ms ease;
    transition: opacity 350ms ease, transform 350ms ease, -webkit-transform 350ms ease;
  }
  .sub-menu li {
    opacity: 0;
    -webkit-transform: translateY(10px);
            transform: translateY(10px);
    -webkit-transition: opacity 350ms ease, -webkit-transform 350ms ease;
    transition: opacity 350ms ease, -webkit-transform 350ms ease;
    transition: opacity 350ms ease, transform 350ms ease;
    transition: opacity 350ms ease, transform 350ms ease, -webkit-transform 350ms ease;
  }
  .menu-item-children:hover .sub-menu {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  .menu-item-children:hover .sub-menu li {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  .menu-item-children:hover .sub-menu li:nth-child(1) {
    -webkit-transition-delay: 100ms;
            transition-delay: 100ms;
  }
  .menu-item-children:hover .sub-menu li:nth-child(2) {
    -webkit-transition-delay: 200ms;
            transition-delay: 200ms;
  }
  .menu-item-children:hover .sub-menu li:nth-child(3) {
    -webkit-transition-delay: 300ms;
            transition-delay: 300ms;
  }
  .menu-item-children:hover .sub-menu li:nth-child(4) {
    -webkit-transition-delay: 400ms;
            transition-delay: 400ms;
  }
  .menu-item-children:hover .sub-menu li:nth-child(5) {
    -webkit-transition-delay: 500ms;
            transition-delay: 500ms;
  }
  .menu-item-children:hover .sub-menu li:nth-child(6) {
    -webkit-transition-delay: 600ms;
            transition-delay: 600ms;
  }
  .menu-item-children:hover .sub-menu li:nth-child(7) {
    -webkit-transition-delay: 700ms;
            transition-delay: 700ms;
  }
  .menu-item-children:hover .sub-menu li:nth-child(8) {
    -webkit-transition-delay: 800ms;
            transition-delay: 800ms;
  }
  .menu-item-children:hover .sub-menu li:nth-child(9) {
    -webkit-transition-delay: 900ms;
            transition-delay: 900ms;
  }
  .menu-item-children:hover .sub-menu li:nth-child(10) {
    -webkit-transition-delay: 1000ms;
            transition-delay: 1000ms;
  }
  .menu-item-children:hover .sub-menu li:nth-child(11) {
    -webkit-transition-delay: 1100ms;
            transition-delay: 1100ms;
  }
  .menu-item-children:hover .sub-menu li:nth-child(12) {
    -webkit-transition-delay: 1200ms;
            transition-delay: 1200ms;
  }
  .menu-item-children:hover .sub-menu li:nth-child(13) {
    -webkit-transition-delay: 1300ms;
            transition-delay: 1300ms;
  }
  .menu-item-children:hover .sub-menu li:nth-child(14) {
    -webkit-transition-delay: 1400ms;
            transition-delay: 1400ms;
  }
  .menu-item-children:hover .sub-menu li:nth-child(15) {
    -webkit-transition-delay: 1500ms;
            transition-delay: 1500ms;
  }
  .menu-item-children:hover .sub-menu li:nth-child(16) {
    -webkit-transition-delay: 1600ms;
            transition-delay: 1600ms;
  }
  .menu-item-children:hover .sub-menu li:nth-child(17) {
    -webkit-transition-delay: 1700ms;
            transition-delay: 1700ms;
  }
  .menu-item-children:hover .sub-menu li:nth-child(18) {
    -webkit-transition-delay: 1800ms;
            transition-delay: 1800ms;
  }
  .menu-item-children:hover .sub-menu li:nth-child(19) {
    -webkit-transition-delay: 1900ms;
            transition-delay: 1900ms;
  }
  .menu-item-children:hover .sub-menu li:nth-child(20) {
    -webkit-transition-delay: 2000ms;
            transition-delay: 2000ms;
  }
}
/* --------------------------------------------------------------------------
   Mobile Menu — Hamburger Panel
   Slide-in off-canvas panel (trigger button + panel shell).
-------------------------------------------------------------------------- */
.atf-hamburger-logo img{
	width:190px;
	height:auto;
}
.atf-main-menu-bars button {
    font-size: 18px;
    padding: 10px 15px;
    border-radius: 5px;
    color: var(--white);
    background-color: var(--primary);
    transition: 0.3s;
}
.atf-hamburger {
    position: fixed;
    background: var(--white);
    width: 500px;
    right: 0;
    top: 0;
    padding: 50px 40px;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    -webkit-transform: translateX(100%);
    -moz-transform: translateX(100%);
    -ms-transform: translateX(100%);
    -o-transform: translateX(100%);
    transform: translateX(100%);
    -webkit-transition: 0.3s 0.3s ease-out;
    -moz-transition: 0.3s 0.3s ease-out;
    -ms-transition: 0.3s 0.3s ease-out;
    -o-transition: 0.3s 0.3s ease-out;
    transition: 0.3s 0.3s ease-out;
    overflow-y: scroll;
    overscroll-behavior-y: contain;
    scrollbar-width: none;
    z-index: 1088;
	overflow-y: auto !important; /* Hamburger scroll */
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}
body.menu-open {
    overflow: hidden !important; /* Stop background scroll */
}
.atf-hamburger-overlay.atf-hamburger-overlay-open {
    pointer-events: auto;
    touch-action: none;
}
@media only screen and (max-width: 574px) {
    .atf-hamburger {
        width: 100% ! important;
        padding: 35px 30px;
    }
}
@media only screen and (max-width: 400px) {
    .atf-hamburger {
        width: 100% ! important;
        padding: 35px 30px;
    }
}
.atf-hamburger-open {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
}
.atf-hamburger-close-toggle {
    font-size: 30px;
    color: var(--atf-text-body);
}
.atf-hamburger-close-toggle:hover {
    color: var(--primary);
}
@media only screen and (min-width: 992px) and (max-width: 1199px), only screen and (min-width: 768px) and (max-width: 991px), (max-width: 575px) {
    .atf-hamburger-header {
        margin-bottom: 40px;
		border-bottom: 1px solid var(--border);
		padding-bottom: 30px;
    }
}
.atf-hamburger-title {
    font-size: 35px;
}
.atf-hamburger-info span {
    font-size: 16px;
    display: block;
    margin-bottom: 5px;
    color: var(--secondary);
}
.atf-hamburger-sm-title {
    font-size: 25px;
    margin-bottom: 15px;
}
.atf-hamburger-social a {
    font-size: 14px;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border-radius: 8px;
    display: inline-block;
    color: var(--secondary);
    border: 1px solid rgba(2, 11, 24, 0.1);
    margin-right: 5px;
	transition: all 0.3s ease-out;
}
.atf-hamburger-social a:hover{
	color: var(--white);
	background:var(--primary);
}
.atf-hamburger-overlay {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 888;
    width: 100%;
    height: 100%;
    visibility: hidden;
    opacity: 0;
    transition: 0.45s ease-in-out;
    background: rgba(24, 24, 24, 0.4);
}
.atf-hamburger-overlay-open {
    opacity: 0.7;
    visibility: visible;
}
/* --------------------------------------------------------------------------
   Mobile Menu — Nested Menu List
   Accordion-style nested <ul> links inside the hamburger panel.
-------------------------------------------------------------------------- */
.atf-hamburger-menu ul {
    list-style: none;
}
.atf-hamburger-menu ul li {
    position: relative;
}
.atf-hamburger-menu ul li > a {
    padding: 8px 0;
    display: block;
    font-size: 16px;
    font-weight: 500;
    -webkit-transition: all 0.3s ease-out;
    -moz-transition: all 0.3s ease-out;
    -ms-transition: all 0.3s ease-out;
    -o-transition: all 0.3s ease-out;
    transition: all 0.3s ease-out;
}
.atf-hamburger-menu ul li > a:hover {
    color: var(--secondary);
}
.atf-hamburger-menu ul li:not(:last-child) > a {
    border-bottom: 1px solid rgba(1, 15, 28, 0.1);
}
.atf-hamburger-menu ul li.active > a {
    color: var(--secondary);
}
.atf-hamburger-menu ul li.active > .atf-menu-close {
    color: var(--secondary);
    border-color: var(--secondary);
}
.atf-hamburger-menu ul li.active > .atf-menu-close i {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
}
.atf-hamburger-menu ul li .sub-menu {
	display: none;
	padding-left: 15px;
	position: relative;
}
.atf-hamburger-menu ul li .sub-menu li{
	padding-left: 15px;
	position: relative;
}
.atf-hamburger-menu ul li .sub-menu li::before {
	content: '';
	background: var(--primary);
	left: 0;
	top: 20px;
	width: 8px;
	height: 8px;
	position: absolute;
	border-radius: 50%;
}
.atf-hamburger-menu ul li .sub-menu.atf-mega-menu {
    padding-left: 0;
}
.atf-menu-close {
    position: absolute;
    right: 0;
    top: 7.5px;
    border: 1px solid rgba(1, 15, 28, 0.0);
    height: 30px;
    width: 30px;
    text-align: center;
    font-size: 12px;
    line-height: 29px;
    -webkit-transition: 0.3s 0.3s ease-out;
    -moz-transition: 0.3s 0.3s ease-out;
    -ms-transition: 0.3s 0.3s ease-out;
    -o-transition: 0.3s 0.3s ease-out;
    transition: 0.3s 0.3s ease-out;
}
.atf-menu-close:hover {
    border: 1px solid var(--secondary);
}
.call-to-action-icon {
	width: 50px;
	height: 50px;
	background: var(--primary);
	text-align: center;
	line-height: 50px;
	margin-right: 15px;
	font-size: 18px;
	color: var(--white);
	border-radius: 50%;
}
.call-to-action-phone {
	font-size: 15px;
	font-weight:400;
}
.call-to-action-text h3 {
	font-weight: 500;
	font-size: 16px;
}
/* --------------------------------------------------------------------------
   BOOTSTRAP NAVIGATION OVERRIDES — END
-------------------------------------------------------------------------- */

/* ==========================================================================
   8. HERO
   Homepage hero/banner: heading, CTA buttons, stats strip,
   floating info cards and the circular rotating badge.
========================================================================== */
.hero{
  background:var(--primary-light);
  padding:70px 0;
  overflow:hidden;
  position:relative;
}
.hero-shape{position:absolute;border-radius:50%;background:var(--primary-light);z-index:0;}
.hero-badge{
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 10px 20px 10px 10px;
	border-radius: var(--radius-pill);
	box-shadow: var(--shadow-sm);
	font-size: 14px;
	font-weight: 600;
	color: var(--secondary-light);
	margin-bottom: 24px;
	background: rgba(255,255,255,0.32);
}
.hopeful-content .hero-badge{
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 10px 20px 10px 10px;
	border-radius: var(--radius-pill);
	box-shadow: var(--shadow-sm);
	font-size: 15px;
	font-weight: 600;
	color: var(--gray-100);
	margin-bottom: 24px;
	background: rgba(255,255,255,0.32);
}
.hero-badge img{width:32px;height:32px;border-radius:50%;object-fit:cover;}
.hero h1 {
	font-size: 58px;
	margin-bottom: 22px;
	line-height: 1.1;
}
.hero h1 .highlight{color:var(--primary); position:relative; display:inline-block;}
.hero-desc{font-size:18px;max-width:520px;margin-bottom:34px;}
.hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:22px;margin-bottom:50px;}
.hero-play{display:flex;align-items:center;gap:14px;font-family:var(--font-head);font-weight:700;color:var(--secondary);}
.play-btn {
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--white);
	color: var(--primary);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: var(--shadow-md);
	animation: playPulse 2.2s infinite;
	border: 1px solid var(--primary-dark);
}
@keyframes playPulse{0%{box-shadow:0 0 0 0 rgba(242,84,45,.4);}70%{box-shadow:0 0 0 16px rgba(242,84,45,0);}100%{box-shadow:0 0 0 0 rgba(242,84,45,0);}}

.hero-stats{display:flex;gap:0; max-width:560px;}
.hero-stats .stat-item {
	flex: 1;
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	line-height: 1;
	padding: 15px 0;
	text-align: center;
}
.stat-item .counter-number {
	font-family: var(--font-head);
	font-weight: 800;
	font-size: 40px;
	color: var(--primary);
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 2px;
	line-height: 1.1;
	margin-bottom: 0px;
}
.hero-stats .stat-item h3{font-size:34px;margin-bottom:2px;color:var(--primary);}
.hero-stats .stat-item span{font-size:14px;color:var(--gray-700);font-weight:700;}

.hero-img-wrap{position:relative;z-index:1;}
.hero-img-wrap img.main-img {
	border-radius: 50%;
	border: 10px solid var(--primary-light);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
	object-fit:cover;
}
.hero-float-card{
  position:absolute;background:var(--white);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);
  padding:18px 22px;display:flex;align-items:center;gap:14px;
}
.hero-float-card .ico{width:50px;height:50px;border-radius:50%;background:var(--primary);color:var(--white);display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;}
.hero-float-card strong {
	display: block;
	font-family: var(--font-head);
	color: var(--secondary);
	font-size: 18px;
	line-height: 1.1;
}
.hero-float-card span{font-size:14px;color:var(--gray-700);}
.hero-float-card.card-top {
	top: 8%;
	left: 0%;
	animation: floatY 4s ease-in-out infinite;
}
.hero-float-card.card-bottom {
	bottom: 7%;
	right: 0%;
	animation: floatY 4s ease-in-out infinite .8s;
}
@keyframes floatY{0%,100%{transform:translateY(0);}50%{transform:translateY(-16px);}}
@keyframes floatX{0%,100%{transform:translateX(-16px);}50%{transform:translateX(0px);}}
.hero-wave{position:absolute;left:0;right:0;bottom:-1px;line-height:0;z-index:1;}

@media(max-width:1199px){.hero h1{font-size:46px;} .hero-float-card{padding:12px 16px;} .hero-float-card.card-top{left:0;} .hero-float-card.card-bottom{right:0;}}
@media(max-width:767px){
  .hero h1{font-size:34px;}
  .hero-stats{flex-wrap:wrap;gap:20px;}
  .hero-stats .stat-item{flex:0 0 45%;}
  .hero-float-card{display:none;}
}
/**----------------------------------------
START: Hero CSS
----------------------------------------*/
.hopeful-spacing-x {
	-webkit-margin-start: 16px;
	margin-inline-start: 16px;
	-webkit-margin-end: 16px;
	margin-inline-end: 16px;
}
.atf-hopeful-section {
  position: relative;
}

/* "Hopeful" hero variant: a two-column split hero — dark content
   panel on the left (.hopeful-left-box) and an image panel on the
   right (.hopeful-right-box) — used on an alternate homepage layout. */
.hopeful-area {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  min-height: 792px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .hopeful-area {
    min-height: 700px;
  }
}

.hopeful-left-box {
  background-color: var(--secondary);
  border-radius: 12px;
  padding: 70px;
  width: calc(50% - 15px);
  -webkit-margin-end: 15px;
          margin-inline-end: 15px;
  position: relative;
  z-index: 1;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  overflow: hidden;
}
.hopeful-left-box::before {
  content: "";
  position: absolute;
  top: 5%;
  inset-inline-start: 5%;
  width: 350px;
  height: 350px;
  border-radius: 50%;
  background: var(--primary);
  -webkit-filter: blur(65px);
  filter: blur(65px);
  opacity: 0.26;
  z-index: -1;
  backdrop-filter: blur(10px);
}
@media only screen and (min-width: 1400px) and (max-width: 1600px) {
  .hopeful-left-box {
    -webkit-padding-end: 40px;
            padding-inline-end: 40px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), only screen and (min-width: 992px) and (max-width: 1199px) {
  .hopeful-left-box {
    -webkit-padding-start: 50px;
            padding-inline-start: 50px;
    -webkit-padding-end: 40px;
            padding-inline-end: 40px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .hopeful-left-box {
    width: 100%;
    -webkit-margin-end: 0;
            margin-inline-end: 0;
    margin-bottom: 15px;
    padding: 60px 0;
  }
}

.hopeful-content {
  max-width: 635px;
  width: 100%;
  -webkit-margin-start: auto;
          margin-inline-start: auto;
}
.hopeful-content .sub-title {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 8px;
  color: var(--white);
  font-size: 14px;
  line-height: 1;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  font-weight: 600;
  border: 1px dashed var(--border);
  padding: 6px 10px;
  margin-bottom: 20px;
  border-radius: 4px;
}
.hopeful-content .sub-title i {
  color: var(--primary);
  font-size: 22px;
}
.hopeful-content .hopeful-title {
  color: var(--white);
  line-height: 1.135;
  margin-bottom: 15px;
}
.hopeful-content .hopeful-title span {
	display: inline-block;
	color: var(--primary);
	font-weight: 700;
	-webkit-text-fill-color: transparent;
	-webkit-text-stroke-color: var(--gray-500);
	-webkit-text-stroke-width: 1px;
	letter-spacing: 1px;
}
@media only screen and (min-width: 1400px) and (max-width: 1600px) {
  .hopeful-content .hopeful-title {
    font-size: 58px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .hopeful-content .hopeful-title {
    font-size: 52px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .hopeful-content .hopeful-title {
    font-size: 45px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px) {
  .hopeful-content .hopeful-title {
    font-size: 45px;
  }
}
@media (max-width: 575px) {
  .hopeful-content .hopeful-title {
    font-size: 38px;
  }
}
.hopeful-content .hopeful-link {
  font-size: 75px;
  color: var(--white);
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  line-height: 1;
  padding: 10px 30px 15px 0;
  -webkit-border-end: 1px dashed var(--border);
          border-inline-end: 1px dashed var(--border);
}
.hopeful-content .hopeful-link span {
  overflow: hidden;
}
.hopeful-content .hopeful-link i {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  line-height: 1;
  -webkit-transform: rotate(-45deg) translateX(0);
      -ms-transform: rotate(-45deg) translateX(0);
          transform: rotate(-45deg) translateX(0);
  -webkit-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
  text-shadow: -120px 0 0;
}
.hopeful-content .hopeful-link:hover i {
  -webkit-transform: rotate(-45deg) translateX(120px);
      -ms-transform: rotate(-45deg) translateX(120px);
          transform: rotate(-45deg) translateX(120px);
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .hopeful-content .hopeful-link {
    font-size: 60px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .hopeful-content .hopeful-link {
    font-size: 50px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .hopeful-content .hopeful-link {
    font-size: 45px;
  }
}
.hopeful-content .hopeful-desc-area {
  max-width: 475px;
  width: 100%;
}
.hopeful-content .hopeful-desc {
	color: var(--gray-300);
	font-size: 17px;
	line-height: 1.7;
	max-width: 517px;
}
@media only screen and (min-width: 1200px) and (max-width: 1399px), (max-width: 575px) {
  .hopeful-content .hopeful-desc {
    font-size: 16px;
  }
}
@media only screen and (min-width: 1200px) and (max-width: 1399px) {
  .hopeful-content {
    max-width: 565px;
    -webkit-padding-start: 10px;
            padding-inline-start: 10px;
  }
}
@media only screen and (min-width: 992px) and (max-width: 1199px) {
  .hopeful-content {
    -webkit-padding-start: 10px;
            padding-inline-start: 10px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .hopeful-content {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 15px;
  }
}

.hopeful-img {
  width: 100%;
  height: 100%;
  border-radius: 12px;
  position: relative;
  overflow: hidden;
}
.hopeful-img img {
	width: 100%;
	-o-object-fit: cover;
	object-fit: cover;
	border-radius: 12px;
	height: 100%;
}

.hopeful-shape {
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  pointer-events: none;
}
.hopeful-shape img {
  width: 100%;
  height: 100%;
}
.hopeful-right-box {
  width: 50%;
  position: relative;
  min-height: 390px;
}
@media only screen and (min-width: 768px) and (max-width: 991px), only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .hopeful-right-box {
    width: 100%;
  }
}
.achived-area {
	background-color: rgba(255,255,255,0.42);
	position: absolute;
	bottom: 0;
	inset-inline-start: 0;
	max-width: 460px;
	width: 100%;
	padding: 15px 15px 0 0;
	border-start-end-radius: 12px;
}
.customers-achived {
	background-color: rgba(255,255,255,0.42);
	border-radius: 0px 10px 0 0;
	padding: 20px 25px;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .customers-achived {
    padding: 25px 18px 20px;
  }
}
.client-thumb ul {
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  list-style: none;
}
.client-thumb ul li {
  line-height: 1;
  -webkit-margin-start: -15px;
          margin-inline-start: -15px;
}
.client-thumb ul li img {
  background-color: var(--white);
  border-radius: 50%;
  -webkit-box-shadow: 0 0 0 2px var(--white);
          box-shadow: 0 0 0 2px var(--white);
}
.client-number-area {
	text-align: center;
}
.client-thumb ul li:first-child {
  -webkit-margin-start: 0;
          margin-inline-start: 0;
}
.client-thumb ul li:last-child span {
	width: 55px;
	height: 53px;
	border-radius: 50%;
	background-color: var(--primary);
	color: var(--white);
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	font-size: 16px;
	-webkit-box-shadow: 0 0 0 2px var(--white);
	box-shadow: 0 0 0 2px var(--white);
}
.client-thumb ul li:last-child span i {
	line-height:1;
}

@media (max-width: 575px) {
  .client-thumb ul li {
    -webkit-margin-start: -16px;
            margin-inline-start: -16px;
  }
}
.client-number.counter-number {
	color: var(--secondary);
	font-size: 40px;
	line-height: 0.8;
	letter-spacing: -1.2px;
	font-family: var(--font-head);
	font-weight: 600;
	margin-bottom: 10px;
	justify-content: center;
	display: flex;
	align-items: center;
}
@media only screen and (min-width: 576px) and (max-width: 767px), (max-width: 575px) {
  .client-number {
    font-size: 30px;
    padding: 20px 0 10px 0;
  }
}

.client-text {
  color: var(--secondary);
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: 0;
  margin-bottom: 0;
  font-weight: 400;
}
/* --- hero round image CSS --- */
.hero_round_image {
	position: absolute;
	background: rgba(255,255,255,0.62);
	border-radius: 50%;
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
	z-index: 10;
	bottom: 2%;
	left: auto;
	right: 8%;
}
.hero_round_text_area {
	position: relative;
	width: 140px;
	animation: spin 15s linear infinite;
	margin: 0 auto;
	padding: 5px;
}
.hero_round_text_area .about_round_text text {
	font-size: 22px;
	fill: var(--secondary);
	text-transform: uppercase;
	letter-spacing: 3px;
}
.hero_round_image .center-arrow {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-weight: 700;
	z-index: 20;
	font-size: 22px;
	color: var(--primary);
}
.rotate {
	animation: spin 15s linear infinite;
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* --- Trusted Company Section --- */
.trusted-text {
    font-size:1rem;
    color: var(--white);
    margin-bottom: 10px;
}

.logo-item {
    color: var(--gray-300);
    font-size: 1.2rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
}
/* --------------------------------------------------------------------------
   Hero Slick Slider (Home Three variant)
   Full-screen image slider hero used on the alternate homepage,
   including slide content animation delays and nav arrows.
-------------------------------------------------------------------------- */
.atf-home-overlay {
    background: rgba(0, 0, 0, 0.5);
    height: 100%;
    width: 100%;
}
.atf-slider-content {
	padding-top:200px;
	padding-bottom:200px;
}
.atf-slider-content .sub-title {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 10px 20px 10px 10px;
	border-radius: var(--radius-pill);
	box-shadow: var(--shadow-sm);
	font-size: 14px;
	font-weight: 600;
	color: var(--gray-100);
	margin-bottom: 24px;
	background: rgba(255,255,255,0.32);
}
.atf-slider-content .sub-title img {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	object-fit: cover;
}
.atf-slider-content .slider-title {
	color: var(--white);
	font-size: 58px;
	font-weight: 700;
	line-height: 1;
	text-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
	letter-spacing: -2px;
}
.atf-slider-content .description {
    color: var(--white);
    font-size: 18px;
    margin: 20px 0 30px;
}
.atf-slick-slider-1.slick-arrow-1 .slick-arrow {
	left: 0;
	right: auto;
	opacity: 0;
	border-radius: 50%;
	width: 65px;
	height: 65px;
	line-height: 63px;
}
.atf-slick-slider-1.slick-arrow-1 .slick-next {
    right: 0px;
    left: auto;
	opacity:0;
	border-radius:50%;
}
@media (min-width: 1350px) {
    .atf-slick-slider-1.slick-arrow-1:hover .slick-arrow {
        left: 25px;
        right: auto;
		opacity:1;
    }
    .atf-slick-slider-1.slick-arrow-1:hover .slick-next {
        right: 25px;
        left: auto;
		opacity:1;
    }
	.atf-slider-content .slider-title {
		font-size:52px;
	}
}
@media (max-width: 1199px) {
    .atf-slider-content .title {
        font-size: 48px;
    }
	.atf-slider-content .slider-title br{
		display:none;
	}
}
@media (max-width: 768px) {
    .atf-slick-slider-1.slick-arrow-1 .slick-arrow,
    .atf-slick-slider-1.slick-arrow-1 .slick-next {
        display: none !important;
    }
    .atf-slick-slider-1.slick-arrow-1 .slick-dots {
        display: block !important;
    }
	.atf-slider-content .slider-title {
		font-size: 44px;
		letter-spacing: 0;
	}
}
@media screen and (min-width: 320px) and (max-width: 479px) {
    .atf-slider-content .slider-title {
        font-size: 36px !important;
    }
    .atf-slider-content .description br {
        display: none;
    }
}
.achived-area.v2 {
	left: 2%;
	padding: 15px;
	border-radius: 15px 15px 0 0;
}
.customers-achived.v2 {
	border-radius: 15px;
}
.hero-right-dots {
	position: absolute;
	right: 6%;
	bottom: 0;
	width: 200px;
	height: 190px;
	opacity: 0.25;
	z-index: 325;
	background: var(--primary-light);
	border-top-left-radius: 50%;
	border-top-right-radius: 50%;
	z-index: 0;
}
.slick-active .atf-single-slider .sub-title {
    -webkit-animation: 0.5s 0.5s fadeInDown both;
	animation: 0.5s 0.5s fadeInDown both;
}
.slick-active .atf-single-slider .slider-title {
    -webkit-animation: 0.5s 0.5s fadeInUp both;
    animation: 0.5s 0.5s fadeInUp both;
}
.slick-active .atf-single-slider .description {
    -webkit-animation: 0.5s 0.7s fadeInUp both;
    animation: 0.5s 0.7s fadeInUp both;
}
.slick-active .atf-hero-btn {
    -webkit-animation: 0.5s 9s fadeInUp both;
    animation: 0.5s 0.9s fadeInUp both;
}
.slick-active .atf-single-slider .achived-area.v2 {
    -webkit-animation: 0.5s 0.7s fadeInUp both;
    animation: 0.5s 0.7s fadeInUp both;
}
.slick-active .atf-single-slider .hero_round_image {
    -webkit-animation: 0.5s 0.7s fadeInUp both;
    animation: 0.5s 0.7s fadeInUp both;
}
.slick-active .atf-single-slider {
	animation: zoomOutEffect 5s ease forwards;
	transition: all 2s ease; 
}
@keyframes zoomOutEffect {
	0%   { transform: scale(1.05); }
	100% { transform: scale(1); }
}
/* --------------------------------------------------------------------------
   Marquee / Logo Ticker Strip
   Infinite horizontally-scrolling text/logo strip.
-------------------------------------------------------------------------- */
.marquee-strip{
  background:var(--secondary);
  padding:18px 0;
  overflow:hidden;
  white-space:nowrap;
}
.marquee-track{display:inline-flex;animation:marquee 26s linear infinite;}
.marquee-track span{
  font-family:var(--font-head);font-weight:700;font-size:20px;color:rgba(255,255,255,.85);
  text-transform:uppercase;letter-spacing:1px;padding:0 30px;display:inline-flex;align-items:center;gap:20px;
}
.marquee-track span i{color:var(--primary);font-size:22px;}
@keyframes marquee{from{transform:translateX(0);}to{transform:translateX(-50%);}}

/* ==========================================================================
   9. PAGE / INNER BANNER
   Breadcrumb / page-title banner used on all inner pages
   (About, Causes, Blog, Contact, etc.).
========================================================================== */
.breadcrumb {
	background: var(--secondary);
	padding: 130px 0 110px;
	text-align: center;
	position: relative;
	overflow: hidden;
	margin: 0px;
}
.breadcrumb__shape_1 {
	position: absolute;
	border-radius: 50%;
	background: var(--accent);
	opacity: .18;
	width: 242px;
	height: 242px;
	top: -68px;
	left: -84px;
	animation: floatY 4s ease-in-out infinite .8s;
}
.breadcrumb__shape_2 {
	position: absolute;
	border-radius: 50%;
	background: var(--accent);
	opacity: .18;
	width:140px;height:140px;bottom:-50px;right:8%;
	animation:floatX 4s ease-in-out infinite .8s;
}
.breadcrumb .breadcrumb-title {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-head);
	font-weight: 600;
	font-size: 14px;
	letter-spacing: .5px;
	text-transform: uppercase;
	color: var(--gray-300);
	background: rgba(255,255,255,0.12);
	padding: 8px 20px 8px 14px;
	border-radius: var(--radius-pill);
	margin-bottom: 12px;
}
.breadcrumb .breadcrumb-sec-title{color:var(--white);font-size:46px;margin-bottom:14px;position:relative;}
.breadcrumb-list{display:flex;justify-content:center;gap:8px;list-style:none;position:relative;font-family:var(--font-head);font-weight:600;}
.breadcrumb-list a{color:rgba(255,255,255,.65);}
.breadcrumb-list a:hover{color:var(--primary);}
.breadcrumb-list li:not(:last-child)::after{content:"/";margin-left:8px;color:rgba(255,255,255,.35);}
.breadcrumb-list li.active{color:var(--gray-300);}

/* ==========================================================================
   10. ABOUT SECTION
   'About us' image collage + content layout, used in two
   variants across the About and Home pages.
========================================================================== */
.about-img-group img.img-1 {
	border-radius: var(--radius-lg);
	width: 100%;
	max-width: 420px;
	height: 340px;
	border: 8px solid var(--primary-light);
}
.about-img-group img.img-2 {
	border-radius: var(--radius-md);
	border: 8px solid var(--primary-light);
	width: 100%;
	position: absolute;
	bottom: 0;
	right: 0;
	max-width: 400px;
	height: 340px;
	object-fit: contain;
}
.about-experience {
	position: absolute;
	top: 35px;
	right: 25px;
	background: var(--primary);
	color: var(--white);
	border-radius: 50%;
	width: 130px;
	height: 130px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	box-shadow: var(--shadow-lg);
}
.about-experience h3{color:var(--white);font-size:34px;margin:0;}
.about-experience span{font-size:13px;color:rgba(255,255,255,.85);}

.about-list{margin:26px 0;}
.about-list li{display:flex;align-items:flex-start;gap:14px;margin-bottom:16px;font-family:var(--font-head);font-weight:500;color:var(--secondary);}
.about-list li i {
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--primary-light);
	color: var(--primary);
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
	margin-top: 0px;
	box-shadow: var(--shadow-lg);
}
.about-signature{display:flex;align-items:center;gap:18px;}
.about-signature img{width:60px;height:60px;border-radius:50%;object-fit:cover;}
.about-signature strong {
	display: block;
	color: var(--secondary);
	font-family: var(--font-head);
	font-size: 20px;
	line-height: 1.1;
}
.about-img-group .about_avatar_2 {
	position: absolute;
	bottom: 40px;
	left: 10px;
	z-index: 1;
	background: var(--primary-light);
	padding: 22px;
	border-radius: 20px;
}
.about-img-group .avatars img {
	width: 55px;
	height: 55px;
	border-radius: 50%;
	border: 3px solid var(--white);
	margin-left: -25px;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
}
.about-img-group .customer-text .title {
    font-weight: 500;
	color: var(--secondary);
	margin-bottom:10px;
	display: inline-block;
}
.customer-text .counter-number {
	font-family: var(--font-head);
	font-size: 28px;
	color: var(--primary);
}
/* about two section  */
/* ===== Section wrapper ===== */
.about-section{
  position:relative;
  overflow:hidden;
  padding:clamp(48px, 8vw, 110px) 0;
  background:var(--white);
}

/* soft brush strokes behind the layout, purely decorative */
.brush{
  position:absolute;
  background:var(--primary-light);
  opacity:.55;
  filter:blur(1px);
  z-index:0;
  border-radius:50% 40% 60% 50% / 40% 50% 50% 60%;
}
.brush-right{
  width:520px; height:520px;
  top:-60px; right:-180px;
  transform:rotate(12deg);
}
.brush-left{
  width:380px; height:380px;
  bottom:-120px; left:-160px;
  transform:rotate(-10deg);
}

.about-inner{
  position:relative;
  z-index:1;
}

/* ===== Image collage columns ===== */
.about-common{
  position:relative;
  width:100%;
}

.about-common-img{
  border-radius:var(--radius-md);
  object-fit:cover;
  box-shadow:var(--shadow-md);
  display:block;
  width:100%;
}

/* Left collage: big group photo + floating smaller portrait */
.about-thumb-left{
  position:relative;
  min-height:340px;
}
.about-common-img.img-main{
  width:88%;
  height:300px;
  margin-left:auto;
}
.about-common-img.img-float{
  position:absolute;
  top:-30px;
  left:0;
  width:46%;
  height:170px;
  border:6px solid var(--white);
  z-index:2;
}

/* Right collage: classroom photo on top, smiling woman on bottom */
.about-thumb-right{
  display:flex;
  flex-direction:column;
  gap:22px;
}
.about-common-img.img-top{
  height:220px;
}
.about-common-img.img-bottom{
  height:170px;
  width:88%;
  margin-left:auto;
}

/* Small bottom-left cluster: heart icon box, hands photo, stats */
.mini-cluster{
  display:flex;
  align-items:flex-end;
  gap:18px;
  margin-top:28px;
}
.heart-box{
  width:76px;
  height:76px;
  flex:0 0 auto;
  border-radius:var(--radius-sm);
  border:1.5px solid var(--gray-300);
  display:flex;
  align-items:center;
  justify-content:center;
  color:var(--primary);
  font-size:28px;
  animation: floatY 4s ease-in-out infinite;
}
.mini-photo{
  width:130px;
  height:96px;
  border-radius:var(--radius-sm);
  object-fit:cover;
  box-shadow:var(--shadow-sm);
  flex:0 0 auto;
}

/* ===== Center content ===== */
.content-col{
  text-align:center;
  padding:0 8px;
}
.stats-row{
  display:flex;
  justify-content:center;
  gap:clamp(20px, 4vw, 56px);
  margin-bottom:30px;
  flex-wrap:wrap;
}

.stat-item{
  text-align:center;
}
.stat-number{
  font-family:var(--font-head);
  font-weight:800;
  color:var(--primary);
  font-size:clamp(1.35rem, 2.4vw, 1.75rem);
  line-height:1.1;
}
.stat-label{
  font-size:.85rem;
  color:var(--gray-700);
  margin-top:4px;
}

/* ===== Responsive breakpoints ===== */

/* Tablet */
@media (max-width: 991.98px){
  .about-common-left{ min-height:280px; }
  .about-common-left .img-main{ height:250px; }
  .about-common-left .img-float{ height:140px; top:-24px; }
  .about-common-right .img-top{ height:190px; }
  .about-common-right .img-bottom{ height:150px; }
  .content-col{ order:-1; margin-bottom:24px; }
}

/* Mobile */
@media (max-width: 767.98px){
  .about-common-left, .collage-right{ margin-bottom:20px; }
  .about-common-left{ min-height:260px; }
  .about-common-left .img-main{ width:82%; height:230px; }
  .about-common-left .img-float{ width:52%; height:130px; top:-20px; }
  .about-common-right .img-top{ height:190px; }
  .about-common-right .img-bottom{ width:82%; height:150px; }
  .mini-cluster{ justify-content:center; }
  .stats-row{ gap:24px; }
  .brush-right, .brush-left{ opacity:.35; }
}

@media (max-width: 575.98px){
  .mini-cluster{ flex-wrap:wrap; }
  .mini-photo{ width:110px; height:84px; }
  .stat-item{ width:40%; }
}
/* ==========================================================================
   11. COUNTER SECTION
   Dark stats strip with animated counters (donors, funds
   raised, volunteers, campaigns).
========================================================================== */
.counter-section{
  background:var(--secondary);
  border-radius:var(--radius-lg);
  padding:60px 40px;
  position:relative;
  overflow:hidden;
}
.counter-item{text-align:center;color:var(--white);position:relative;}
.counter-item:not(:last-child)::after{
  content:"";position:absolute;right:-2px;top:10%;height:80%;width:1px;background:rgba(255,255,255,.12);
}
.counter-icon{
  width:64px;height:64px;border-radius:50%;background:rgba(255,255,255,.08);color:var(--accent);
  display:flex;align-items:center;justify-content:center;font-size:28px;margin:0 auto 18px;
}
.counter-number{
  font-family:var(--font-head);font-weight:800;font-size:44px;color:var(--white);display:flex;align-items:baseline;justify-content:center;gap:2px;
}
.counter-label{font-size:15px;color:rgba(255,255,255,.65);margin-top:6px;}
@media(max-width:767px){
  .counter-item:not(:last-child)::after{display:none;}
  .counter-item{margin-bottom:30px;}
}

/* ==========================================================================
   12. CAUSE CARDS
   Donation/cause cards: image, progress bar toward the goal,
   meta info and footer CTA. Also covers the cause details page.
========================================================================== */
.cause-card{
  background:var(--white);border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-sm);
  transition:var(--transition); height:100%; border:1px solid var(--gray-100);
}
.cause-card:hover{box-shadow:var(--shadow-md);}
.cause-img{position:relative;overflow:hidden;height:230px;}
.cause-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .6s ease;
	padding: 10px;
	border-radius:var(--radius-lg);
}
.cause-tag{
  position:absolute;top:16px;left:16px;background:var(--primary);color:var(--white);font-size:12px;font-weight:700;
  padding:6px 14px;border-radius:var(--radius-pill);text-transform:uppercase;letter-spacing:.4px;
}
.cause-body{padding:26px;}
.cause-meta i{color:var(--primary);}
.cause-meta{display:flex;align-items:center;gap:16px;font-size:14px;color:var(--gray-700);margin-bottom:12px;}
.cause-meta span{display:flex;align-items:center;gap:6px;}
.cause-body h3{font-size:20px;margin-bottom:14px;}
.cause-body h3 a:hover{color:var(--primary);}
.progress-wrap{margin-top:18px;}
.progress-labels{display:flex;justify-content:space-between;font-size:13px;font-weight:600;color:var(--secondary);margin-bottom:8px;}
.progress-labels .raised{color:var(--primary);}
.progress-track{height:8px;background:var(--gray-100);border-radius:20px;overflow:hidden;}
.progress-fill{height:100%;border-radius:20px;background:linear-gradient(90deg,var(--primary),var(--accent));width:0%;transition:width 1.6s cubic-bezier(.4,0,.2,1);}
.cause-footer{display:flex;align-items:center;justify-content:space-between;margin-top:30px;padding-top:18px;border-top:1px dashed var(--gray-300);}
.cause-footer .goal{font-size:15px;color:var(--gray-700);}
.cause-footer .goal strong{color:var(--secondary);font-family:var(--font-head);}
.causes_details_tag .cause-tag{
	position:static;
}
.causes_details_thumb img {
	object-fit:cover;height:420px;
}
.causes_details_thumb_two {
	object-fit:cover;height:300px;
}
.causes_details_tag .cause-meta{
	margin:0;
}
.img-anim {
	position: relative;
	overflow: hidden;
	border-radius: var(--radius-md);
}
.img-anim img {
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	object-fit: cover;
	-webkit-transition: -webkit-transform 0.5s;
	transition: -webkit-transform 0.5s;
	transition: transform 0.5s;
	transition: transform 0.5s, -webkit-transform 0.5s;
	-webkit-transform-origin: center center;
	-ms-transform-origin: center center;
	transform-origin: center center;
	-webkit-transform: perspective(0) rotateX(0) rotateY(0) scaleX(1) scaleY(1);
	transform: perspective(0) rotateX(0) rotateY(0) scaleX(1) scaleY(1);
	border-radius: var(--radius-md);
}
.img-anim-card:hover .img-anim img {
  -webkit-transform: perspective(600px) rotateX(0deg) rotateY(0.05deg) scaleX(1.1) scaleY(1.1) !important;
	transform: perspective(600px) rotateX(0deg) rotateY(0.05deg) scaleX(1.1) scaleY(1.1) !important;
}
/* ==========================================================================
   13. STEPS / PROCESS
   'How it works' step cards with connecting dashed line
   between each step on desktop.
========================================================================== */
.step-card {
	text-align: center;
	padding: 40px 26px;
	position: relative;
	border-radius: var(--radius-md);
	transition: var(--transition);
	border: 2px solid var(--white);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
}
.step-card:hover {
	transform:translateY(-8px);
	box-shadow:var(--shadow-lg);
}
.step-card:hover .step-num{
	transform:scale(1.1);
}
.step-num{
  width:74px;height:74px;border-radius:50%;background:var(--primary-light);color:var(--primary);
  display:flex;align-items:center;justify-content:center;font-size:30px;margin:0 auto 24px;position:relative;
  transition:var(--transition);
}
.step-num::after{
  content:"";position:absolute;inset:-8px;border:2px dashed var(--gray-300);border-radius:50%;
}
.step-card p {
	color: var(--gray-300);
}
.step-card h3 {
	font-size: 20px;
	color: var(--gray-100);
}
.step-connector {
	position: absolute;
	top: 80px;
	left: 60%;
	width: 100%;
	border-top: 2px dashed var(--gray-300);
	z-index: -1;
}
@media(max-width:991px){.step-connector{display:none;}}

/* ==========================================================================
   14. VOLUNTEER / CTA SPLIT
   Full-width call-to-action band inviting visitors to donate
   or volunteer.
========================================================================== */
.cta-split{
  background:var(--primary-dark);
  border-radius:var(--radius-lg);
  overflow:hidden;
  position:relative;
}
.cta-split-content{padding:70px 60px;color:var(--white);}
.cta-split-content .sub-title{background:rgba(255,255,255,.15);color:var(--white);}
.cta-split-content h2{color:var(--white);}
@media(max-width:767px){.cta-split-content{padding:40px 28px;}}

/* ==========================================================================
   15. EVENTS
   Upcoming event cards with date badge, meta info and
   the matching event-details page layout.
========================================================================== */
.event-card{background:var(--white);border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-sm);transition:var(--transition);height:100%;}
.event-card:hover{box-shadow:var(--shadow-lg);}
.event-img{position:relative;height:220px;overflow:hidden;}
.event-img img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease;}
.event-card:hover .event-img img{transform:scale(1.08);}
.event-date-badge{
  position:absolute;top:16px;left:16px;background:var(--white);border-radius:12px;padding:10px 14px;text-align:center;box-shadow:var(--shadow-sm);
}
.event-date-badge strong{display:block;font-family:var(--font-head);font-size:22px;color:var(--primary);line-height:1;}
.event-date-badge span{font-size:11px;text-transform:uppercase;color:var(--gray-500);font-weight:700;}
.event-body{padding:24px 26px;}
.event-meta{display:flex;flex-wrap:wrap;gap:14px;font-size:14px;color:var(--gray-700);margin-bottom:12px;}
.event-meta i{color:var(--primary);}
.event-meta span{display:flex;align-items:center;gap:6px;}
.event-body h3 {
	font-size: 20px;
	margin-bottom: 10px;
	padding-bottom: 30px;
	border-bottom: 1px dashed var(--gray-300);
}

.event_details_thumb img {
	object-fit:cover;height:420px;
}
.event_details_thumb_two {
	object-fit:cover;height:300px;
}
.event_details_tag .event-meta{
	margin:0;
}
/* ==========================================================================
   16. TESTIMONIALS
   Donor / volunteer testimonial slider cards.
========================================================================== */
.testi-section{position:relative;}
.testi-card {
	background: var(--white);
	border-radius: var(--radius-md);
	padding: 38px 34px;
	box-shadow: var(--shadow-md);
	margin: 14px 10px 40px;
	position: relative;
	border: 1px solid var(--primary-dark);
}
.testi-person strong {
	display: block;
	color: var(--secondary);
	font-family: var(--font-head);
	font-size: 20px;
	margin-bottom: 0;
	line-height: 1.1;
}
.testi-stars{color:var(--accent);margin-bottom:16px;font-size:14px;}
.testi-text{font-style:italic;color:var(--gray-700);margin-bottom:24px;}
.testi-person{display:flex;align-items:center;gap:14px;}
.testi-person img{width:56px;height:56px;border-radius:50%;object-fit:cover;}
.testi-person strong{display:block;color:var(--secondary);font-family:var(--font-head);}
.testi-person span {
	font-size: 14px;
	color: var(--gray-700);
}
.atf__client_slider_active .slick-dots {
	justify-content: start;
	display: flex;
	padding-left: 20px;
	margin-top: 0;
}
.testi-quote {
	color: var(--primary-light);
	font-size: 50px;
	position: absolute;
	top: 8px;
	right: 27px;
}
/* ==========================================================================
   17. BLOG
   Blog listing cards (image, meta, excerpt, read-more link).
========================================================================== */
.blog-card{background:var(--white);border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-sm);transition:var(--transition);height:100%;}
.blog-card:hover{box-shadow:var(--shadow-md);}
.blog-img{height:230px;overflow:hidden;}
.blog-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .6s ease;
	padding: 10px;
	border-radius: var(--radius-lg);
}
.blog-card:hover .blog-img img{transform:scale(1.08);}
.blog-body{padding:26px;}
.blog-meta{display:flex;gap:16px;font-size:14px;color:var(--gray-700);margin-bottom:12px;}
.blog-meta i{color:var(--primary);}
.blog-meta span{display:flex;align-items:center;gap:6px;}
.blog-body h3 {
	font-size: 20px;
	margin-bottom: 10px;
	padding-bottom: 20px;
	border-bottom: 1px dashed var(--gray-300);
	line-height: 1.4;
}
.readmore i {
	color: var(--primary);
}
.blog-body h3 a:hover{color:var(--primary);}
.blog-readmore{font-family:var(--font-head);font-weight:700;font-size:14px;color:var(--primary);display:inline-flex;align-items:center;gap:8px;margin-top:14px;}
.blog-readmore i{transition:var(--transition);}
.blog-readmore:hover i{transform:translateX(4px);}

/* ==========================================================================
   18. SPONSORS
   Grayscale-to-color sponsor/partner logo grid.
========================================================================== */
.sponsor-item {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 90px;
	filter: grayscale(1);
	opacity: .6;
	transition: var(--transition);
	border: 1px solid var(--primary);
	border-radius: var(--radius-md);
}
.sponsor-item:hover{filter:grayscale(0);opacity:1;}

/* ==========================================================================
   19. NEWSLETTER BAND
   Dark rounded band with an inline email subscribe form.
========================================================================== */
.newsletter-band{background:var(--secondary);border-radius:var(--radius-lg);padding:56px;position:relative;overflow:hidden;}
.newsletter-form{display:flex;gap:0;background:var(--white);border-radius:var(--radius-pill);padding:6px;max-width:460px;}
.newsletter-form input{flex:1;border:none;background:transparent;padding:0 20px;font-size:14px;outline:none;}
@media(max-width:767px){.newsletter-band{padding:34px 24px;text-align:center;} .newsletter-form{margin:0 auto;}}
.newsletter-form input:focus {
	border: none;
}
/* ==========================================================================
   20. FOOTER
   Site footer: about widget, quick links, contact list,
   photo gallery grid and the bottom copyright bar.
========================================================================== */
.site-footer{color:rgba(255,255,255,.65);padding-top:100px;position:relative;}
.footer-widget h3{color:var(--gray-300);font-size:20px;margin-bottom:44px;position:relative;padding-bottom:14px;}
.footer-widget h3::after {
	content: "";
	position: absolute;
	left: 20px;
	bottom: 0;
	width: 40px;
	height: 3px;
	background: var(--gray-500);
	border-radius: 20px;
}
.footer-widget h3::before {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 12px;
	height: 3px;
	background: var(--gray-500);
	border-radius: 20px;
}
.footer-widget p{font-size:15px;}
.footer-about-logo {
	margin-bottom: 30px;
	margin-top: -9px;
}
.footer-social{display:flex;gap:10px;margin-top:22px;}
.footer-social a{
  width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;color:var(--white);
}
.footer-social a:hover{background:var(--primary);}
.footer-links li{margin-bottom:12px;}
.footer-links a{font-size:15px;display:flex;align-items:center;gap:8px;color:rgba(255,255,255,.65);}
.footer-links a::before{content:"\f105"; font-family:"bootstrap-icons"; color:var(--primary);}
.footer-links a:hover{color:var(--white); padding-left:4px;}
.footer-contact li{display:flex;gap:12px;margin-bottom:18px;font-size:14px;}
.footer-contact li i {
	color: var(--gray-300);
	font-size: 18px;
	margin-top: -2px;
}
.footer-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;}
.footer-gallery img{border-radius:8px;aspect-ratio:1/1;object-fit:cover;}
.footer-bottom{border-top:1px solid rgba(255,255,255,.08);margin-top:70px;padding:24px 0;font-size:14px;}
.footer-bottom a{color:var(--primary-light);}
.footer-bottom-links{display:flex;gap:20px;justify-content:flex-end;}
@media(max-width:767px){.footer-bottom-links{justify-content:flex-start;margin-top:10px;} .site-footer{padding-top:70px;}}

/* Back to top */
.back-to-top.active {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
    visibility: visible;
    right: 3%;
    top: 84%;
    -webkit-transform: scale(1);
    transform: scale(1);
}
.back-to-top {
	position: fixed;
	cursor: pointer;
	right: 3%;
	top: 85%;
	background-color: var(--primary);
	box-shadow: 0px 0px 10px rgb(0 0 0 / 31%);
	z-index: 4;
	width: 60px;
	text-align: center;
	height: 60px;
	line-height: 42px;
	border-radius: 50px;
	-webkit-transform: scale(0);
	transform: scale(0);
	visibility: hidden;
	-webkit-transition: .9s;
	transition: .9s;
}
.back-to-top::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
	background-color: var(--primary);
	opacity: 0;
	visibility: hidden;
	-webkit-transition: .5s;
	transition: .5s;
}
.back-to-top i {
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    left: 0;
    right: 0;
    margin: 0 auto;
    color: var(--white);
    -webkit-transition: .5s;
    transition: .5s;
    font-size: 20px;
}
@-webkit-keyframes bounce {

    0%,
    to {
        transform: translateY(5%);
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out
    }

    50% {
        transform: translateY(0);
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out
    }
}

@keyframes bounce {

    0%,
    to {
        transform: translateY(5%);
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out
    }

    50% {
        transform: translateY(0);
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out
    }
}
 

@-webkit-keyframes pulse {
    0% {
        border-color: #48e9d1; 
        box-shadow: 0 0 rgba(72, 233, 209, 0.66);
    }

    70% {
        border-color: #48e9d1; 
        box-shadow: 0 0 0 10px rgba(72, 233, 209, 0);
    }

    to {
        border-color: #48e9d1; 
        box-shadow: 0 0 0 10px rgba(72, 233, 209, 0);
    }
}

@keyframes pulse {
    0% {
        border-color: #48e9d1; 
        box-shadow: 0 0 rgba(72, 233, 209, 0.66);
    }

    70% {
        border-color: #48e9d1; 
        box-shadow: 0 0 0 10px rgba(72, 233, 209, 0);
    }

    to {
        border-color: #48e9d1; 
        box-shadow: 0 0 0 10px rgba(72, 233, 209, 0);
    }
}
/* ==========================================================================
   21. SIDEBAR (BLOG / CAUSE DETAILS)
   Reusable sidebar widgets for blog & cause detail pages:
   search box, categories, recent posts, tags and a CTA card.
========================================================================== */
.sidebar-widget{background:var(--primary-light);border-radius:var(--radius-md);padding:30px;margin-bottom:30px; border: 3px solid var(--white); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);}
.sidebar-widget h4{font-size:22px;margin-bottom:26px;padding-bottom:14px;border-bottom:1px solid var(--gray-300);}
.search-widget{position:relative;}
.search-widget input{width:100%;border:1px solid var(--gray-300);border-radius:var(--radius-pill);padding:14px 55px 14px 22px;font-size:14px;}
.search-widget button{position:absolute;right:6px;top:6px;width:42px;height:42px;border-radius:50%;background:var(--primary);color:var(--white);border:none;}
.cat-list li{border-bottom:1px solid var(--gray-300);}
.cat-list li:last-child{border:none;}
.cat-list a{display:flex;justify-content:space-between;padding:12px 2px;font-size:14.5px;font-weight:500;color:var(--gray-700);}
.cat-list a:hover{color:var(--primary);padding-left:6px;}
.cat-list a span{background:var(--white);border-radius:50%;width:26px;height:26px;display:flex;align-items:center;justify-content:center;font-size:12px;}
.recent-post-item{display:flex;gap:14px;margin-bottom:20px;}
.recent-post-item:last-child{margin-bottom:0;}
.recent-post-item img{width:74px;height:74px;border-radius:10px;object-fit:cover;flex-shrink:0; border: 3px solid var(--white);box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);}
.recent-post-item h5{font-size:16px;margin-bottom:1px;line-height:1.4;}
.recent-post-item h5 a:hover{color:var(--primary);}
.recent-post-item span{font-size:13px;color:var(--gray-500);}
.tag-list{display:flex;flex-wrap:wrap;gap:8px;}
.tag-list a{padding:8px 16px;background:var(--white);border-radius:var(--radius-pill);font-size:13px;font-weight:500;border:1px solid var(--gray-300);}
.tag-list a:hover{background:var(--primary);color:var(--white);border-color:var(--primary);}
.sidebar-cta{background:var(--primary);border-radius:var(--radius-md);padding:34px 28px 45px;text-align:center;color:var(--white);border: 3px solid var(--white);box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);}
.sidebar-cta h4{color:var(--white);border:none;}
.sidebar-cta .heart-sidebar-icon{font-size:40px;margin-bottom:14px;display:block;}

/* ==========================================================================
   22. DONATION PAGE
   Multi-step donation form: step indicator, quick amount
   picker, frequency toggle and payment method selector.
========================================================================== */
.donate-box {
	background: var(--primary-light);
	border-radius: var(--radius-lg);
	padding: 44px;
}
/* Step indicator for the multi-step donation form (e.g. Amount -> Details
   -> Payment). Add/remove ".active" on .donate-step to mark progress. */
.donate-steps{display:flex;justify-content:space-between;margin-bottom:40px;position:relative;}
.donate-steps::before{content:"";position:absolute;top:22px;left:0;right:0;height:2px;background:var(--gray-300);z-index:0;}
.donate-step{text-align:center;position:relative;z-index:1;flex:1;}
.donate-step .num{
  width:46px;height:46px;border-radius:50%;background:var(--white);border:2px solid var(--gray-300);color:var(--gray-500);
  display:flex;align-items:center;justify-content:center;margin:0 auto 10px;font-family:var(--font-head);font-weight:700;transition:var(--transition);
}
.donate-step.active .num{background:var(--primary);border-color:var(--primary);color:var(--white);}
.donate-step span{font-size:20px;font-weight:600;color:var(--gray-500);}
.donate-step.active span{color:var(--secondary);}

.amount-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:24px;}
.amount-opt{
  border:2px solid var(--gray-300);border-radius:var(--radius-sm);padding:18px 10px;text-align:center;font-family:var(--font-head);
  font-weight:700;font-size:18px;color:var(--secondary);cursor:pointer;transition:var(--transition);
}
.amount-opt:hover{border-color:var(--primary);}
.amount-opt.active{border-color:var(--primary);background:var(--primary-light);color:var(--primary);}
.freq-toggle{display:flex;background:var(--gray-100);border-radius:var(--radius-pill);padding:6px;margin-bottom:28px;}
.freq-toggle button{flex:1;border:none;background:transparent;padding:12px;border-radius:var(--radius-pill);font-family:var(--font-head);font-weight:600;font-size:17px;color:var(--gray-500);transition:var(--transition);}
.freq-toggle button.active{background:var(--primary);color:var(--white);}
.payment-opt{border:2px solid var(--gray-300);border-radius:var(--radius-sm);padding:16px 18px;display:flex;align-items:center;gap:14px;margin-bottom:12px;cursor:pointer;transition:var(--transition);}
.payment-opt.active{border-color:var(--primary);background:var(--primary-light);}
.payment-opt img{height:26px;}
.donation-details h4 {
	font-size: 22px;
}
.form-check-input {
	margin-top: 0.45em;
}
.payment-opt-area .form-check-input {
	margin-top: 0.65em;
}
/* Radio button hover ba active state-er border shadow change korar jonno */
.form-check-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 0.25rem rgba(242, 84, 45, 0.25); /* #F2542D er light shadow */
}
/* Radio button check hole background color change hobe */
.form-check-input:checked {
    background-color: var(--primary);
    border-color: var(--primary);
}
.payment-opt-area i {
	color: var(--primary-dark);
	margin-left: 6px;
}
.donate-box.donation-details {
	border: 3px solid var(--white);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
}
.secure-icon {
	font-size: 44px;
	color: var(--white);
	width: 75px;
	height: 80px;
	background: var(--primary-dark);
	border-radius: var(--radius-md);
	align-items: center;
	display: flex;
	justify-content: center;
	margin: 0 auto;
	border: 3px solid var(--white);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
}
/* ==========================================================================
   23. FORMS / CONTACT
   Generic form-control styling with validation states, plus
   the contact info card and address cards used on Contact page.
========================================================================== */
.form-control-custom{
  width:100%;border:1px solid var(--gray-300);border-radius:var(--radius-sm);padding:15px 20px;font-size:14.5px;
  background:var(--light);transition:var(--transition);
}
.form-control-custom:focus{outline:none;border-color:var(--primary);background:var(--white);box-shadow: inherit;}
.form-label-custom {
	font-family: var(--font-head);
	font-weight: 600;
	font-size: 18px;
	color: var(--secondary-light);
	margin-bottom: 8px;
	display: block;
}
.was-validated .form-control-custom:invalid, .form-control-custom.is-invalid{border-color:#E5484D; background:#FFF4F4;}
.was-validated .form-control-custom:valid, .form-control-custom.is-valid{border-color:var(--green);}
.invalid-feedback-custom{color:#E5484D;font-size:12.5px;margin-top:6px;display:none;}
.was-validated .form-control-custom:invalid ~ .invalid-feedback-custom{display:block;}
.contact-info-card{background:var(--secondary);border-radius:var(--radius-lg);padding:44px;color: var(--gray-300);height:100%;}
.contact-info-card h3{color:var(--white);}
.contact-info-item{display:flex;gap:16px;margin-bottom:26px;}
.contact-info-item .ico{width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.1);color:var(--accent);display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0;}
.contact-info-item strong {
	display: block;
	color: var(--white);
	font-family: var(--font-head);
	font-size: 20px;
	line-height: 1.3;
}
.contact-info-item span,.contact-info-item a{font-size:14px;color:rgba(255,255,255,.65);}
.map-frame{border-radius:var(--radius-lg);overflow:hidden;filter:grayscale(.2);}
.map-frame iframe{width:100%;height:420px;border:0;display:block;border-radius:var(--radius-lg);}
/* contact address */
.contact-address-card {
	text-align: center;
	padding: 40px 26px;
	position: relative;
	border: 1px solid var(--border);
	border-radius: var(--radius-md);
	transition:var(--transition);
}
.contact-address-card:hover {
	transform:translateY(-8px);
	box-shadow:var(--shadow-lg);
}
.contact-address-card:hover .contact-address-icon{
	transform:scale(1.1);
}
.contact-address-icon{
  width:74px;height:74px;border-radius:50%;background:var(--primary-light);color:var(--primary);
  display:flex;align-items:center;justify-content:center;font-size:30px;margin:0 auto 24px;position:relative;
  transition:var(--transition);
}
.contact-address-icon::after{
  content:"";position:absolute;inset:-8px;border:2px dashed var(--gray-300);border-radius:50%;
}
.contact-address-card p {
	color: var(--gray-500);
}
.contact-address-card h3 {
	font-size: 20px;
	color: var(--secondary);
}
.contact-info-card.atf-cover-bg::before {
	border-radius: var(--radius-lg);
}
/* ==========================================================================
   24. FAQ
   Accordion-based FAQ list and the matching FAQ category tabs.
========================================================================== */
.accordion-custom .accordion-item{border:1px solid var(--gray-300);border-radius:var(--radius-sm) !important;margin-bottom:16px;overflow:hidden;}
.accordion-custom .accordion-button {
	font-family: var(--font-head);
	font-weight: 600;
	font-size: 20px;
	color: var(--secondary);
	padding: 20px 24px;
	background: var(--white);
	box-shadow: none !important;
}
.accordion-custom .accordion-button:not(.collapsed){color:var(--primary);background:var(--primary-light);}
.accordion-custom .accordion-button::after{
  background-image:none;content:"\f4fe";font-family:"bootstrap-icons";font-size:16px;transition:var(--transition);width:auto;height:auto;
}
.accordion-custom .accordion-button:not(.collapsed)::after{content:"\f2ea";color:var(--primary);}
.accordion-custom .accordion-body {
	padding: 15px 20px 20px;
	font-size: 16px;
	color: var(--gray-700);
}
.faq-tabs .nav-link{
  border:none;border-radius:var(--radius-pill);padding:12px 24px;font-family:var(--font-head);font-weight:600;color:var(--gray-700);margin-right:8px;margin-bottom:10px;background:var(--primary-light);
}
.faq-tabs .nav-link.active{background:var(--primary);color:var(--white);}
.faq-contact li {
	display: flex;
	gap: 12px;
	margin-bottom: 18px;
	font-size: 16px;
}
.faq-contact li i {
	color: var(--primary);
	font-size: 18px;
	margin-top: -2px;
}

/* ==========================================================================
   25. CAUSE DETAILS
   Donor list, tab navigation and share icons for the single
   cause details page.
========================================================================== */
.donor-list-item{display:flex;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid var(--gray-300);}
.donor-list-item:last-child{border:none;}
.donor-list-item img{width:60px;height:60px;border-radius:50%;object-fit:cover;}
.donor-list-item strong {
	display: block;
	color: var(--secondary);
	font-family: var(--font-head);
	font-size: 18px;
	line-height: 1.2;
}
.donor-list-item span{font-size:13px;color:var(--gray-500);}
.donor-list-item .amt{margin-left:auto;font-family:var(--font-head);font-weight:700;color:var(--primary);}
.nav-tabs-custom{border:none;gap:8px;margin-bottom:30px;}
.nav-tabs-custom .nav-link{border:1px solid var(--gray-300);border-radius:var(--radius-pill);padding:12px 26px;font-family:var(--font-head);font-weight:600;color:var(--secondary);}
.nav-tabs-custom .nav-link.active{background:var(--primary);border-color:var(--primary);color:var(--white);}
.share-icons a{width:40px;height:40px;border-radius:50%;background:var(--gray-100);display:inline-flex;align-items:center;justify-content:center;margin-right:8px;color:var(--secondary);}
.share-icons a:hover{background:var(--primary);color:var(--white);}
.share-icons.event-details-share-icon a{
	background:rgba(255,255,255,.15);color:#fff;
	transition:var(--transition);
}
.share-icons.event-details-share-icon a:hover{background:var(--white);color:var(--primary);}
/* ==========================================================================
   26. VOLUNTEER PAGE
   Volunteer profile cards used on the Volunteers listing page.
========================================================================== */
.volunteer-card {
	text-align: center;
	background: var(--primary-light);
	border-radius: var(--radius-md);
	padding: 30px;
	transition: var(--transition);
	border: 3px solid var(--white);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
}
.volunteer-card:hover{box-shadow:var(--shadow-lg);transform:translateY(-8px);}
.volunteer-card img {
	width: 130px;
	height: 130px;
	border-radius: 50%;
	object-fit: cover;
	margin: 0 auto 20px;
	border: 5px solid var(--primary-light);
	padding: 5px;
	box-shadow: var(--shadow-lg);
}
.volunteer-card h3 {
	margin-bottom: 4px;
	font-size: 20px;
	margin: 0;
}
.volunteer-card span{color:var(--primary);font-weight:600;font-size:14px;}
.volunteer-card .social-mini{display:flex;justify-content:center;gap:8px;margin-top:16px;}
.volunteer-card .social-mini a {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--white);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 14px;
}
.volunteer-card .social-mini a:hover{background:var(--primary);color:var(--white);}
.donate-box.volunteer-box {
	border: 3px solid var(--white);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
}
/* ==========================================================================
   22. Gallery ---------------------------------------------------------
========================================================================== */

/* Main gallery card */
.gallery-card { 
    border-radius: var(--radius-md); 
    overflow: hidden; 
    margin-bottom: 26px; 
}

/* Image container wrapper */
.gallery-card__image-wrapper {
	position: relative;
	aspect-ratio: 4/6;
	overflow: hidden;
}
.gallery-card__image-wrapper.gallery_two {
	aspect-ratio: inherit;
}
.gallery-card__image.gallery_two_img {
	height: 400px;
	max-height: 100%;
}
@media only screen and (max-width:991px) {
	.gallery-card__image.gallery_two_img {
		height: 100%;
		max-height: 100%;
	}
	.gallery-card__image-wrapper.gallery_two {
		aspect-ratio: 4/6 ! important;
	}
}
/* Gallery image and its hover animation */
.gallery-card__image { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    transition: transform .6s cubic-bezier(.4, 0, .2, 1); 
	border: 4px solid var(--white);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
	border-radius:var(--radius-md);
}

.gallery-card:hover .gallery-card__image { 
    transform: scale(1.1); 
}

/* Gallery overlay (dark blue shadow gradient from bottom) */
.gallery-card__overlay { 
    position: absolute; 
    inset: 0; 
    background: linear-gradient(0deg, rgba(11, 27, 51, .9), transparent 60%); 
    display: flex; 
    flex-direction: column; 
    justify-content: flex-end; 
    padding: 22px; 
    opacity: 0; 
    transition: var(--transition); 
}
.gallery-card:hover .gallery-card__overlay { 
    opacity: 1; 
}
/* Category or tag inside the overlay */
.gallery-card__tag { 
    color: var(--accent); 
    font-size: .78rem; 
    text-transform: uppercase; 
    letter-spacing: .04em; 
    margin-bottom: 4px;
}

/* Title inside the overlay */
.gallery-card__title { 
    font-family: var(--font-head); 
    font-weight: 600;
	font-size:20px;
}

.gallery-card__title a {
    color: var(--white);
    text-decoration: none;
}
/* Lightbox zoom search icon */
.gallery-card__zoom-icon { 
    position: absolute; 
    top: 18px; 
    right: 18px; 
    width: 55px; 
    height: 55px; 
    border-radius: 50%; 
    background: var(--white); 
    color: var(--primary); 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    opacity: 0; 
    transform: translateY(-8px); 
    transition: var(--transition); 
    z-index: 2;
}

.gallery-card__zoom-icon:hover {
	background: var(--primary); 
    color: var(--white);
}
.gallery-card:hover .gallery-card__zoom-icon { 
    opacity: 1; 
    transform: translateY(0); 
}
/* ==========================================================================
   27. 404 PAGE
   Large stylised error number for the 404 / not-found page.
========================================================================== */
.error-page{text-align:center;}
.error-num {
	font-family: var(--font-head);
	font-weight: 800;
	font-size: 180px;
	line-height: 0.7;
	color: var(--primary-light);
	position: relative;
}
.error-num span{color:var(--primary);}
@media(max-width:767px){.error-num{font-size:100px;}}
/* --------------------------------------------------------------------------
   Coming Soon Page
   Countdown + email-capture layout for the 'Coming Soon' page.
-------------------------------------------------------------------------- */
.newsletter-form.v2 {
	max-width: 100%;
}
.comingsoon-details-social a {
	width: 50px;
	height: 50px;
	font-size: 16px;
	line-height: 50px;
	text-align: center;
	border-radius: 50%;
	margin-right: 10px;
	color: var(--primary-dark);
	background: var(--light);
	-webkit-transition: all 0.3s ease-out;
	-moz-transition: all 0.3s ease-out;
	-ms-transition: all 0.3s ease-out;
	-o-transition: all 0.3s ease-out;
	transition: all 0.3s ease-out;
	border: 1px solid var(--border);
}
.comingsoon-details-social a:hover {
	color:var(--white);
	background: var(--primary);
}
.coming-mailchamp {
	display: flex;
	gap: 0;
	background: var(--white);
	border-radius: var(--radius-pill);
	padding: 6px;
}
@media only screen and (max-width:767px) {
	.atf-error-title-box .title,
	.atf-coming-title-box .title{
		font-size:28px;
	}
}
/* ==========================================================================
   28. PAGINATION
   Circular numbered pagination controls.
========================================================================== */
.pagination-custom{display:flex;gap:10px;justify-content:center;}
.pagination-custom a{
  width:48px;height:48px;border-radius:50%;border:1px solid var(--gray-300);display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-weight:600;color:var(--secondary);
}
.pagination-custom a.active,.pagination-custom a:hover{background:var(--primary);border-color:var(--primary);color:var(--white);}

/* ==========================================================================
   29. BLOG DETAILS
   Single blog post layout: featured image, block-quote style,
   author box and comment thread (with nested replies).
========================================================================== */
.blog-details-img{border-radius:var(--radius-lg);margin-bottom:34px;}
.article-body blockquote{
  background:var(--primary-light);border-left:4px solid var(--primary);border-radius:0 var(--radius-sm) var(--radius-sm) 0;
  padding:26px 30px;font-family:var(--font-head);font-weight:600;font-size:19px;color:var(--secondary);margin:30px 0;
}
.article-body img{object-fit:cover;height:420px;}
.article-body .blog-details-img-2{object-fit:cover;height:300px;}
.author-box{display:flex;gap:20px;background:var(--primary-light);border-radius:var(--radius-md);padding:28px;margin-top:40px;align-items:center; border: 3px solid var(--white); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);}
.author-box h4 {
	font-size: 20px;
}
.author-box img{width:120px;height:120px;border-radius:50%;object-fit:cover;flex-shrink:0; border: 3px solid var(--white);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);}
.comment-item{display:flex;gap:18px;margin-bottom:38px;}
.comment-item img{width:90px;height:90px;border-radius:50%;object-fit:cover;flex-shrink:0; border: 3px solid var(--white); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);}
.comment-item .reply-btn{font-size:14px;font-weight:700;color:var(--primary);}
.comment-item.reply{margin-left:80px;}
.comment-item strong {
	font-size: 20px;
	font-weight: 600;
	color: var(--secondary);
	font-family: var(--font-head);
	line-height: 1.1;
}
.comment-form.mt-50 {
	background: var(--primary-light);
	padding: 40px 45px;
	border-radius: var(--radius-md);
	border: 3px solid var(--white);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
}
.atf-contact-form label {
	font-family: var(--font-head);
	font-weight: 600;
	font-size: 18px;
	color: var(--secondary-light);
	margin-bottom: 8px;
	display: block;
}
.atf-contact-form .atf_contact_input input,
.atf-contact-form .atf_contact_input textarea {
    border-radius: var(--radius-md);
    border: 1px solid rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease-in-out 0s;
    margin: 5px 0;
    padding-left: 20px;
}
.atf-contact-form .atf_contact_input input:focus,
.atf-contact-form .atf_contact_input textarea:focus {
    box-shadow: none;
    border: 1px solid var(--primary);
}
.atf-contact-form .atf_contact_input textarea {
	height: 120px;
	width: 100%;
	padding-top: 15px;
	outline: none;
}
.atf_contact_input .nice-select::after {
	right: 20px;
}
.atf_contact_input .nice-select {
	height: 55px;
	line-height: 55px;
	border-radius: 10px;
	border: 1px solid var(--border);
	color: var(--gray-700);
	float: none;
	padding: 0 20px;
	font-size: 16px;
	margin: 14px 0;
	background: var(--white);
}
.atf_contact_input .nice-select.open .list {
	width: 100%;
}
/* ==========================================================================
   30. REVEAL ANIMATION BASE STATES (GSAP CONTROLLED)
   Starting (hidden) states for scroll-reveal animations.
   Actual animation/trigger logic lives in the JS (GSAP).
========================================================================== */
/* These only define the HIDDEN starting state. The actual reveal
   (opacity/transform to 0 / none) is triggered from JS via GSAP
   ScrollTrigger when each element scrolls into view. */
.reveal-up{opacity:0; transform:translateY(50px);}
.reveal-fade{opacity:0;}
.reveal-left{opacity:0; transform:translateX(-60px);}
.reveal-right{opacity:0; transform:translateX(60px);}
.reveal-scale{opacity:0; transform:scale(.85);}

/* ==========================================================================
   31. UTILITY
   Small helper classes and global selection/scrollbar styling.
========================================================================== */
.rounded-lg-custom{border-radius:var(--radius-lg) !important;}
.divider-dot{width:6px;height:6px;border-radius:50%;background:var(--primary);display:inline-block;}
.object-cover{object-fit:cover;}
::selection{background:var(--primary);color:var(--white);}

/* Scrollbar */
::-webkit-scrollbar{width:10px;}
::-webkit-scrollbar-track{background:var(--gray-100);}
::-webkit-scrollbar-thumb{background:var(--primary);border-radius:10px;}
/* --------------------------------------------------------------------------
   Slick Slider — Shared Arrow & Dot Styles
   Global next/prev arrow and pagination-dot styling reused
   by every Slick carousel in the template.
-------------------------------------------------------------------------- */
.slick-arrow-2 .slick-arrow {
    cursor: pointer;
    position: absolute;
    top: -120px;
    height: 60px;
    width: 60px;
    line-height: 58px;
    display: block;
    left: auto;
    right: 100px;
    border: 1px solid;
    text-align: center;
    -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    border-radius: 50%;
}
.slick-arrow-2 .slick-arrow:hover {
    background-color: var(--primary);
    border-color: var(--primary);
    color: var(--white) !important;
}

.slick-arrow-2 .slick-next {
    right: 15px;
    background-color: var(--white);
    border-color: var(--primary);
    color: var(--primary) !important;
}

.slick-arrow-2 .slick-prev {
    background-color: var(--primary);
    border-color: var(--primary);
    color: var(--white) !important;
}

/* slick-arrow */
.slick-arrow {
    cursor: pointer;
    z-index: 3;
}

/* slick-arrow-1 */
.slick-arrow-1 .slick-arrow {
    background-color: var(--white);
    cursor: pointer;
    position: absolute;
    top: 50%;
    left: 15px;
    right: auto;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    line-height: 48px;
    display: block;
    border: 1px solid var(--primary);
    border-radius: 50%;
    text-align: center;
    transition: all 0.5s ease-in-out 0s;
    font-size: 20px;
    color: var(--primary) !important;
    z-index: 1;
    opacity: 0;
    visibility: visible;
}
.slick-arrow-1 .slick-arrow:hover {
    background-color: var(--primary);
    border-color: var(--primary);
    color: var(--white) !important;
}

.slick-arrow-1 .slick-next {
    right: 15px;
    left: auto;
}

.slick-arrow-1:hover .slick-arrow {
    opacity: 1;
    visibility: visible;
}

.slick-arrow-1-inner.slick-arrow-1:hover .slick-arrow {
    left: 50px;
    right: auto;
}

.slick-arrow-1-inner.slick-arrow-1:hover .slick-next {
    right: 50px;
    left: auto;
}

@media (min-width: 1350px) {
    .slick-arrow-1:hover .slick-arrow {
        left: -50px;
        right: auto;
    }
    .slick-arrow-1:hover .slick-next {
        right: -50px;
        left: auto;
    }
}
/* -----------------------------------
    Slick Slider Dots, Arrow
--------------------------------------*/
/* Slick dots */
.slick-dots {
    margin: 30px 0 0px;
    padding: 0;
    display: block;
    text-align: center;
    line-height: 1;
}
.slick-dots li {
    display: inline-block;
    list-style: none;
    display: inline-block;
    font-size: 0;
    height: 10px;
    width: 10px;
    border-radius: 100%;
    margin-right: 10px;
    background-color: var(--primary);
    cursor: pointer;
    margin-top: 0;
    -webkit-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}
.slick-dots li button {
    display: none;
}
.slick-dots li:hover, .slick-dots li.slick-active {
	background-color: var(--primary);
	height: 10px;
	width: 30px;
	margin-bottom: 0px;
	border-radius: 6px;
}
/* --------------------------------------------------------------------------
   Slick Slider — End
-------------------------------------------------------------------------- */