/* ============================================================================
   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 10px;
}

a {
	color: inherit;
	text-decoration: none;
	transition: var(--transition);
}

a:hover {
	color: #970202;
}

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 #970202;
	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: 45px;
    width: 100%;
    line-height: 51px;
    font-size: 14px;
    padding-left: 10px;
    padding-right: 10px;
    color: var(--secondary);
    border: 1px solid rgba(255, 255, 255, 0.1);
    background-color: var(--white);
    border-radius: 9px;
}

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: 14px;
}

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 #970202;
	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;
    height: 80px;
}

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%;
}

/**home-pagefaq**/

/* =========================================
   SELF DRIVE CONTENT - MODERN DESIGN
========================================= */

.self-drive-content {
    /* max-width: 1100px; */
    margin: 0 auto;
    padding: 25px 25px;
    background: #ffffff;
    border-radius: 18px;
    box-shadow: 0 8px 35px rgba(0, 0, 0, 0.06);
}

/* Main Heading */
.self-drive-content .section-title h1 {
    position: relative;
    font-size: 28px;
    line-height: 1.25;
    font-weight: 700;
    color: #09264f;
    margin: 0 0 22px;
    padding-bottom: 16px;
}

.self-drive-content .section-title h1::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 65px;
    height: 4px;
    border-radius: 10px;
    background: #980303;
}

/* Paragraph */
.self-drive-content p {
    font-size: 16px;
    line-height: 1.85;
    color: #53657a;
    margin: 0 0 18px;
}

/* Section Headings */
.self-drive-content h2 {
    position: relative;
    font-size: 27px;
    line-height: 1.35;
    color: #09264f;
    font-weight: 700;
    margin: 42px 0 22px;
    padding-left: 17px;
}

.self-drive-content h2::before {
    content: "";
    position: absolute;
    left: 0;
    top: 3px;
    width: 5px;
    height: calc(100% - 6px);
    border-radius: 10px;
    background: #980303;
}

.self-drive-content h3 {
    position: relative;
    font-size: 23px;
    line-height: 1.4;
    color: #09264f;
    font-weight: 700;
    margin: 38px 0 20px;
    padding-bottom: 11px;
    border-bottom: 1px solid #e7edf3;
}

.self-drive-content h3::after {
    content: "";
    display: block;
    width: 45px;
    height: 3px;
    border-radius: 10px;
    background: #980303;
    position: absolute;
    bottom: -2px;
    left: 0;
}

/* =========================================
   FEATURE LIST
========================================= */

.self-drive-content ul {
	list-style: none;
    padding: 0;
    margin: 15px 0 15px;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px 10px;
}

.self-drive-content ul li {
    position: relative;
    background: #f7f9fc;
    border: 1px solid #e8edf3;
    border-radius: 12px;
    padding: 19px 20px 19px 48px;
    color: #53657a;
    font-size: 15px;
    line-height: 1.75;
    transition: all 0.3s ease;
}

.self-drive-content ul li::before {
    content: "✓";
    position: absolute;
    left: 17px;
    top: 19px;
    width: 23px;
    height: 23px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #980303;
    color: #fff;
    border-radius: 50%;
    font-size: 13px;
    font-weight: 700;
}

.self-drive-content ul li:hover {
    transform: translateY(-3px);
    background: #ffffff;
    border-color: #980303;
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.07);
}

.self-drive-content ul li strong {
    color: #09264f;
    font-weight: 700;
}

/* =========================================
   NUMBERED LIST
========================================= */

.self-drive-content ol {
    padding: 0;
    margin: 15px 0 25px;
    list-style: none;
    counter-reset: content-counter;
}

.self-drive-content ol li {
    counter-increment: content-counter;
    position: relative;
    padding: 18px 20px 18px 63px;
    margin-bottom: 12px;
    background: #f8fafc;
    border: 1px solid #e8edf3;
    border-radius: 12px;
    color: #53657a;
    font-size: 15px;
    line-height: 1.75;
}

.self-drive-content ol li::before {
    content: counter(content-counter);
    position: absolute;
    left: 18px;
    top: 17px;
    width: 31px;
    height: 31px;
    border-radius: 50%;
    background: #09264f;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
}

.self-drive-content ol li strong {
    color: #09264f;
    font-weight: 700;
}

.self-drive-content ol li:hover {
    border-color: #dce3eb;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
}

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

.self-drive-content a {
    color: #e94b2d;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
}

.self-drive-content a:hover {
    color: #09264f;
    text-decoration: underline;
}

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

.self-drive-content h3 + ol li br + * {
    color: #53657a;
}

.self-drive-content h3:last-of-type {
    margin-top: 45px;
}

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

.self-drive-content a[href^="tel"] {
    white-space: nowrap;
}

.self-drive-content a[href^="mailto"] {
    word-break: break-word;
}

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

@media (max-width: 991px) {

    .self-drive-content {
        padding: 40px 30px;
    }

    .self-drive-content .section-title h1 {
        font-size: 32px;
    }

    .self-drive-content h2 {
        font-size: 25px;
    }

    .self-drive-content ul {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 767px) {

    .self-drive-content {
        padding: 30px 20px;
        border-radius: 12px;
    }

    .self-drive-content .section-title h1 {
        font-size: 27px;
        margin-bottom: 18px;
    }

    .self-drive-content h2 {
        font-size: 22px;
        margin-top: 32px;
    }

    .self-drive-content h3 {
        font-size: 20px;
        margin-top: 30px;
    }

    .self-drive-content p {
        font-size: 15px;
        line-height: 1.75;
    }

    .self-drive-content ul li,
    .self-drive-content ol li {
        font-size: 14px;
        line-height: 1.7;
    }

    .self-drive-content ul li {
        padding: 16px 15px 16px 45px;
    }

    .self-drive-content ol li {
        padding: 16px 15px 16px 55px;
    }

    .self-drive-content ul li::before {
        left: 14px;
        top: 17px;
    }

    .self-drive-content ol li::before {
        left: 14px;
        top: 27px;
    }
}

@media (max-width: 480px) {

    .self-drive-content {
        padding: 25px 15px;
    }

    .self-drive-content .section-title h1 {
        font-size: 24px;
    }

    .self-drive-content h2 {
        font-size: 20px;
    }

    .self-drive-content h3 {
        font-size: 19px;
    }
}

.gmv-faq-section {
	--faq-primary: #0b3d62;
	--faq-secondary: #f5f8fb;
	--faq-border: #e2e8f0;
	--faq-text: #243447;
	--faq-muted: #64748b;
	--faq-white: #ffffff;
	max-width: 1000px;
	margin: 50px auto;
	padding: 0 20px;
	font-family: Arial, Helvetica, sans-serif;
	color: var(--faq-text);
}

.about-wrapper h1{
	margin-bottom: 12px;
    font-size: 27px;
    letter-spacing: 0px;
}
.about-wrapper p{
	margin-bottom: 12px;
	font-size: 17px;
}
.about-wrapper h2{
	margin-bottom: 12px;
    font-size: 25px;
    letter-spacing: 0px;
}
.about-wrapper h3{
	margin-bottom: 12px;
    font-size: 24px;
    letter-spacing: 0px;
}

.gmv-faq-header {
	text-align: center;
	margin-bottom: 30px;
}

.gmv-faq-header h2 {
	margin: 0 0 10px;
	color: var(--faq-primary);
	font-size: 32px;
	line-height: 1.25;
	font-weight: 700;
}

.gmv-faq-header p {
	max-width: 700px;
	margin: 0 auto;
	color: var(--faq-muted);
	font-size: 16px;
	line-height: 1.7;
}

.gmv-faq-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.gmv-faq-item {
	background: var(--faq-white);
	border: 1px solid var(--faq-border);
	border-radius: 10px;
	overflow: hidden;
	transition: all 0.25s ease;
}

.gmv-faq-item:hover {
	border-color: #c7d5e2;
	box-shadow: 0 6px 20px rgba(11, 61, 98, 0.07);
}

.gmv-faq-question {
	width: 100%;
	border: 0;
	background: transparent;
	color: var(--faq-primary);
	padding: 20px 55px 20px 22px;
	text-align: left;
	font-size: 17px;
	line-height: 1.5;
	font-weight: 600;
	cursor: pointer;
	position: relative;
}

.gmv-faq-question::after {
	content: "+";
	position: absolute;
	right: 22px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 25px;
	font-weight: 400;
	color: var(--faq-primary);
	transition: transform 0.25s ease;
}

.gmv-faq-item.gmv-faq-active .gmv-faq-question::after {
	content: "−";
}

.gmv-faq-answer {
	display: none;
	padding: 0 22px 21px;
	background: var(--faq-white);
}

.gmv-faq-item.gmv-faq-active .gmv-faq-answer {
	display: block;
}

.gmv-faq-answer p {
	margin: 0;
	color: #4b5d70;
	font-size: 15.5px;
	line-height: 1.75;
}

.gmv-faq-answer strong {
	color: var(--faq-primary);
	font-weight: 600;
}

@media (max-width: 767px) {
	.gmv-faq-section {
		margin: 35px auto;
		padding: 0 15px;
	}

	.gmv-faq-header h2 {
		font-size: 26px;
	}

	.gmv-faq-header p {
		font-size: 14px;
	}

	.gmv-faq-question {
		padding: 17px 48px 17px 17px;
		font-size: 15.5px;
	}

	.gmv-faq-question::after {
		right: 17px;
		font-size: 22px;
	}

	.gmv-faq-answer {
		padding: 0 17px 18px;
	}

	.gmv-faq-answer p {
		font-size: 14.5px;
		line-height: 1.7;
	}
	
}

/* ================================
   Attractive FAQ / Tour Accordion
================================ */

.faq-content {
    width: 100%;
}

.faq-content .accordion {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Accordion Item */
.faq-content .accordion-item {
    border: 1px solid #e6e9ee;
    border-radius: 12px !important;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.faq-content .accordion-item:hover {
    border-color: #d5dbe3;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}

/* Accordion Button */
.faq-content .accordion-button {
    position: relative;
    padding: 12px 50px 11px 22px;
    background: #fff;
    color: #222;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.5;
    border: 0;
    box-shadow: none !important;
    transition: all 0.3s ease;
}

/* Left Accent */
.faq-content .accordion-button::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 4px;
    height: 100%;
    background: #e7e7e7;
    transition: all 0.3s ease;
}

/* Arrow */
.faq-content .accordion-button::after {
    position: absolute;
    right: 20px;
    width: 13px;
    height: 13px;
    background-size: 13px;
    transition: transform 0.3s ease;
}

/* Open State */
.faq-content .accordion-button:not(.collapsed) {
    color: #fff;
    background: #222;
}

.faq-content .accordion-button:not(.collapsed)::before {
    background: #f5b400;
    width: 5px;
}

.faq-content .accordion-button:not(.collapsed)::after {
    filter: brightness(0) invert(1);
    transform: rotate(-180deg);
}

/* Body */
.faq-content .accordion-collapse {
    border: 0;
}

.faq-content .accordion-body {
    padding: 17px 17px 17px;
    background: #fff;
    color: #555;
    font-size: 15px;
    line-height: 1.8;
}

/* Body Paragraph */
.faq-content .accordion-body p {
    margin-bottom: 12px;
}

.faq-content .accordion-body p:last-child {
    margin-bottom: 0;
}

/* Lists inside content */
.faq-content .accordion-body ul {
    margin: 12px 0;
    padding-left: 20px;
}

.faq-content .accordion-body li {
    margin-bottom: 7px;
}

/* Images if enabled later */
.faq-content .accordion-image {
    overflow: hidden;
    border-radius: 10px;
}

.faq-content .accordion-image img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    border-radius: 10px;
    transition: transform 0.4s ease;
}

.faq-content .accordion-image:hover img {
    transform: scale(1.02);
}

/* Smooth Opening */
.faq-content .accordion-collapse {
    transition: height 0.35s ease;
}


/* ================================
   Mobile Responsive
================================ */

@media (max-width: 767px) {

    .faq-content .accordion {
        gap: 10px;
    }

    .faq-content .accordion-button {
        padding: 15px 30px 15px 16px;
        font-size: 15px;
        line-height: 1.45;
    }

    .faq-content .accordion-button::after {
        right: 16px;
        width: 11px;
        height: 11px;
        background-size: 11px;
    }

    .faq-content .accordion-body {
        padding: 17px 18px 20px;
        font-size: 14px;
        line-height: 1.7;
    }

    .faq-content .accordion-item {
        border-radius: 9px !important;
    }
	.breadcrumb-list{
		display: none!important;
	}
}

/**home-pagefaq**/
section {
	position: relative;
}

.section-pad {
	padding: 80px 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: #970202;
}

.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: rgb(0 0 0 / 92%);
	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: #970202;
	background-size: 100% 2px;
	background-image: linear-gradient(180deg, #970202 0%, #970202 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: #970202;
	transition: all 0.25s ease-out;
}

/* Outer ring */
.cursor_body .cursor-out {
	width: 40px;
	height: 40px;
	border: 1px solid #970202;
	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: #970202;
	background: var(--primary-light);
	padding: 7px 17px 7px 13px;
	border-radius: var(--radius-pill);
	margin-bottom: 10px;
}

.sub-title i {
	font-size: 16px;
}

.bg-dark-section .sub-title {
	background: rgba(255,255,255,.08);
	color: var(--accent);
}

.atf-section-title{
	/*text-align: center;*/
}

.sec-title {
	font-size: 25px;
	margin-bottom: 12px;
	letter-spacing: 0px;
}

.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: 22px;
		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: #970202;
	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: 19px;
    line-height: 1;
    width: 35px;
    height: 35px;
    overflow: hidden;
    background-color: #550a0a;
    border-radius: 30px;
}

.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;
	font-size: 15px;
}

.atf-themes-btn.btn-dark {
	background-color: #550a0a;
}

.atf-themes-btn.btn-dark .btn-icon {
	background-color: var(--white);
}

.atf-themes-btn.btn-dark .btn-icon i {
	color: #550a0a;
}

.atf-themes-btn.transparent-btn {
	background-color: transparent;
	border: 1px solid var(--border);
}

.atf-themes-btn.transparent-btn .btn-text {
	color: #970202;
}

.atf-themes-btn.transparent-btn:hover {
	border-color: #550a0a;
}

.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: 5px;
	position: relative;
	font-size: 16px;
	font-weight: 500;
	text-align: center;
	line-height: 1;
	z-index: 2;
}

.themes-btn .btn-text {
	color: #970202;
	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: 18px;
    line-height: 1;
    width: 25px;
    height: 25px;
    overflow: hidden;
    background-color: #550a0a;
    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: #970202;
}

.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 #970202;
	background-color: var(--white);
	color: #970202;
	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: #970202;
	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: #970202;
}

.atf-searching-area .atf-searching-form button {
	width: 60px;
	background-color: #970202;
	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: #970202;
	border: none;
}
/* header */
.atf-site-branding img {
	max-width: 190px;
	height: auto;
}

.atf-site-branding {
	font-size: 19px;
}

.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: #970202;
}

.atf-main-menu > nav > ul > li {
	position: relative;
	display: inline-block;
	margin-right: 25px;
}

.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: 16px;
	font-weight: 600;
	padding: 35px 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 #970202;
	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: 3px 13px;
    line-height: 1.5;
    border-bottom: 1px solid #0000001f;
}

.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: 15px;
	-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: #970202;
}

.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 #970202;
}

@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: #970202;
	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: 25px;
	color: var(--atf-text-body);
}

.atf-hamburger-close-toggle:hover {
	color: #970202;
}

@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: 15px;
		border-bottom: 1px solid var(--border);
		padding-bottom: 15px;
	}
}

.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: #970202;
}

.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: #970202;
	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: #970202;
	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: 6px 17px 6px 10px;
	border-radius: var(--radius-pill);
	box-shadow: var(--shadow-sm);
	font-size: 13px;
	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: 38px;
    margin-bottom: 12px;
    line-height: 1.1;
}

.hero h1 .highlight {
	color: #970202;
	position: relative;
	display: inline-block;
}

.hero-desc {
	font-size: 17px;
    /*max-width: 520px;*/
    margin-bottom: 24px;
}

.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: #970202;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: var(--shadow-md);
	animation: playPulse 2.2s infinite;
	border: 1px solid #550a0a;
}

@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: 10px;
    line-height: 1;
    padding: 15px 0;
    text-align: center;
}

.stat-item .counter-number {
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 28px;
    color: #970202;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 2px;
    line-height: 1.1;
    margin-bottom: 5px;
    letter-spacing: 1px;
}

.hero-stats .stat-item h3 {
	font-size: 34px;
	margin-bottom: 2px;
	color: #970202;
}

.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: #970202;
	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: #970202;
	-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: 30px 0 25px;
	}
	.hopeful-content .hero-badge{
		padding: 7px 14px 7px 14px;
		font-size: 11px;
	}
}

.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: #970202;
	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: #970202;
	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: 24px;
	}
	.hopeful-content .hero-badge{
		margin-bottom: 15px;
	}
}

@media (max-width: 575px) {
	.hopeful-content .hopeful-title {
		font-size: 24px;
        line-height: 1.6;
	}
}

.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: 13px;
	}
	.logo-item{
		font-size: 17px;
	}
}

@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: #970202;
	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: #970202;
}

.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: 13px 0;
    overflow: hidden;
    white-space: nowrap;
    margin-top: 70px;
}

.marquee-track {
	display: inline-flex;
	animation: marquee 26s linear infinite;
}

.marquee-track span {
	font-family: var(--font-head);
    font-weight: 700;
    font-size: 17px;
    color: rgba(255, 255, 255, .85);
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 0 20px;
    display: inline-flex;
    align-items: center;
    gap: 20px;
}

.marquee-track span i {
	color: #970202;
	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: 40px 0 40px;
	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: 5px 20px 6px 14px;
    border-radius: var(--radius-pill);
    margin-bottom: 12px;
}

.breadcrumb .breadcrumb-sec-title {
    color: var(--white);
    font-size: 23px;
    margin-bottom: 14px;
    position: relative;
    font-weight: 600;
    letter-spacing: 0;
}

.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: #970202;
}

.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: 15px;
	width: 100%;
	max-width: 420px;
	height: 340px;
	border: 8px solid var(--primary-light);
}

.about-img-group img.img-2 {
	border-radius: 15px;
	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: #970202;
    color: var(--white);
    border-radius: 50%;
    width: 100px;
    height: 100px;
    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: 25px;
	margin: 0;
}

.about-experience span {
	font-size: 10px;
	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: #970202;
	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: #970202;
}
/* 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: #970202;
	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, 35px);
	margin-bottom: 15px;
	/*flex-wrap: wrap;*/
}

.stat-item {
	text-align: center;
}

.stat-number {
	font-family: var(--font-head);
	font-weight: 800;
	color: #970202;
	font-size: clamp(1.35rem, 2.4vw, 1.75rem);
	line-height: 1.1;
}

.stat-label {
    font-size: .85rem;
    color: var(--gray-700);
    margin-top: 5px;
}

/* ===== 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: 35px 30px;
	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: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .08);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin: 0 auto 8px;
}

.counter-number {
	font-family: var(--font-head);
    font-weight: 700;
    font-size: 34px;
    color: var(--white);
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 2px;
}

.counter-label {
	font-size: 18px;
	color: rgba(255,255,255,.65);
	/*margin-top: 6px;*/
	line-height: 1.6;
}

@media(max-width:767px) {
	.counter-item:not(:last-child)::after {
		display: none;
	}

	.counter-item {
		margin-bottom: 30px;
	}
	.counter-label{
		font-size: 14px;
	}
	.counter-number{
		font-size: 28px;
	}
}

/*==========================================================================
   12. CAUSE CARDS
   Donation/cause cards: image, progress bar toward the goal,
   meta info and footer CTA. Also covers the cause details page.
==========================================================================*/
.causes-slider .cause-card .cause-footer{
	padding-top: 0; 
    border-top: none;
}
.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);
	margin-bottom: 30px;
}

.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 10px 0;
	border-radius: var(--radius-lg);
}

.cause-tag {
    position: absolute;
    top: 16px;
    right: 16px;
    /* background: #2bb640; */
    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: 15px 15px;
}

.cause-meta i {
	color: #970202;
}

.cause-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 14px;
    color: var(--gray-700);
    margin-bottom: 12px;
    justify-content: space-between;
}

.cause-meta span {
	display: flex;
	align-items: center;
	gap: 6px;
}

.cause-body h3 {
    border-bottom: 1px solid #00000012;
    font-size: 20px;
    text-align: center;
    padding: 0px 0 12px;
    /* border-top: 1px solid #00000012;*/
}

.cause-body h3 a:hover {
	color: #970202;
}

.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: #970202;
}

.progress-track {
	height: 8px;
	background: var(--gray-100);
	border-radius: 20px;
	overflow: hidden;
}

.progress-fill {
	height: 100%;
	border-radius: 20px;
	background: linear-gradient(90deg,#970202,var(--accent));
	width: 0%;
	transition: width 1.6s cubic-bezier(.4,0,.2,1);
}

.cause-footer {
	display: flex;
    align-items: center;
    justify-content: CENTER;
    margin-top: 15px;
    padding-top: 12px;
    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: 25px 25px;
	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: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--primary-light);
    color: #970202;
    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);
	margin-bottom: 0;
	font-size: 14px;
}

.step-card h3 {
	font-size: 21px;
	color: var(--gray-100);
}

.step-connector {
	position: absolute;
	top: 55px;
	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: #550a0a;
	border-radius: var(--radius-lg);
	overflow: hidden;
	position: relative;
}

.cta-split-content {
	padding: 0px 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);
    font-size: 27px;
    letter-spacing: 0;
}

@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: #3bcb4a;
    border-radius: 5px;
    padding: 6px 10px;
    text-align: center;
    box-shadow: var(--shadow-sm);
    line-height: 1.2;
}

.event-date-badge strong {
	display: block;
	font-family: var(--font-head);
	font-size: 14px;
	color: #fff;
	line-height: 1;
}

.event-date-badge span {
	font-size: 11px;
	text-transform: uppercase;
	color: #ffffff;
	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: #970202;
}

.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: 18px 20px;
    box-shadow: var(--shadow-md);
    margin: 7px 7px 7px;
    position: relative;
    border: 1px solid #550a0a;
}

.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: 13px;
	font-size: 14px;
}

.testi-text {
    font-style: italic;
    color: var(--gray-700);
    /* margin-bottom: 24px; */
    font-size: 17px;
	margin-bottom: 0;
}

.testi-person {
	display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 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;
}
.tripex-description{
	margin-bottom: 10px;
}
.article-body .splide__track{
	margin-bottom: 10px;
}
.article-body h3{
    font-size: 20px;
    margin-bottom: 10px;
    color: #970202;
}
.article-body h2{
    font-size: 20px;
    margin-bottom: 10px;
}
.article-body h4{
    font-size: 19px;
}
.article-body ul{
	margin-bottom: 10px;
}
.article-body .splide__pagination{
	display: none;
}
.article-body ul li{
	margin-bottom: 9px;
	font-size: 16px;
    line-height: 1.5;
}
.article-body p{
	margin-bottom: 10px;
	font-size: 16px;
    line-height: 1.7;
}
/* ==========================================================================
   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: #970202;
}

.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: #970202;
}

.blog-body h3 a:hover {
	color: #970202;
}

.blog-readmore {
	font-family: var(--font-head);
	font-weight: 700;
	font-size: 14px;
	color: #970202;
	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 #970202;
	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: 35px;
	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-about-logo img{
	background: #fff;
	padding: #fff;
}

.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: #970202;
}

.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: #970202;
}

.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: 0;
}

.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: #970202;
	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: #970202;
	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: 20px;
	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: 20px;
    padding-bottom: 10px;
    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: #970202;
	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: #970202;
	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: 10px;
    margin-bottom: 12px;
    align-items: center;
}

.recent-post-item:last-child {
	margin-bottom: 0;
}

.recent-post-item img {
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
    border: 3px solid var(--white);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
    width: 100px;
}

.recent-post-item h5 {
	font-size: 16px;
	margin-bottom: 1px;
	line-height: 1.4;
}

.recent-post-item h5 a:hover {
	color: #970202;
}

.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: #970202;
	color: var(--white);
	border-color: #970202;
}

.sidebar-cta {
	background: #970202;
	border-radius: var(--radius-md);
	padding: 30px 30px 30px;
	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: 30px;
}
.donate-box h3{
	font-size: 25px;
}
/* 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: #970202;
	border-color: #970202;
	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: #970202;
}

.amount-opt.active {
	border-color: #970202;
	background: var(--primary-light);
	color: #970202;
}

.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: #970202;
	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: #970202;
	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: #970202;
	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: #970202;
	border-color: #970202;
}

.payment-opt-area i {
	color: #550a0a;
	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: #550a0a;
	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: #970202;
	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: 35px;
	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: 15px;
	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: #970202;
	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: 17px;
    color: var(--secondary);
    padding: 14px 20px;
    background: var(--white);
    box-shadow: none !important;
}

.accordion-custom .accordion-button:not(.collapsed) {
	color: #970202;
	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: #970202;
}

.accordion-custom .accordion-body {
    padding: 10px 20px 10px;
    font-size: 15px;
    color: var(--gray-700);
}

.faq-tabs .nav-link {
	border: none;
	border-radius: var(--radius-pill);
	padding: 9px 23px;
	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: #970202;
	color: var(--white);
}

.faq-contact li {
	display: flex;
	gap: 12px;
	margin-bottom: 18px;
	font-size: 16px;
}

.faq-contact li i {
	color: #970202;
	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: #970202;
}

.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: #970202;
	border-color: #970202;
	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: #970202;
	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: #970202;
}
/* ==========================================================================
   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: #970202;
	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: #970202;
	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: #970202;
	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: #970202;
	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: #970202;
}

@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: #550a0a;
	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: #970202;
}

.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: #970202;
	border-color: #970202;
	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 #970202;
	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: #970202;
}

.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: 25px 25px;
	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: 15px;
    color: var(--secondary-light);
    margin-bottom: 2px;
    display: block;
}
.atf-contact-form .atf-themes-btn {
    font-size: 14px;
    padding: 7px 18px;
}

.atf-contact-form .atf_contact_input input,
.atf-contact-form .atf_contact_input textarea {
	border-radius: 4px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease-in-out 0s;
    margin: 0px 0 9px;
    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 #970202;
}

.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: #970202;
	display: inline-block;
}

.object-cover {
	object-fit: cover;
}

::selection {
	background: #970202;
	color: var(--white);
}

/* Scrollbar */
::-webkit-scrollbar {
	width: 10px;
}

::-webkit-scrollbar-track {
	background: var(--gray-100);
}

::-webkit-scrollbar-thumb {
	background: #970202;
	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: 40px;
    width: 40px;
    line-height: 40px;
    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: #970202;
	border-color: #970202;
	color: var(--white) !important;
}

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

.slick-arrow-2 .slick-prev {
	background-color: #970202;
	border-color: #970202;
	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 #970202;
	border-radius: 50%;
	text-align: center;
	transition: all 0.5s ease-in-out 0s;
	font-size: 20px;
	color: #970202 !important;
	z-index: 1;
	opacity: 0;
	visibility: visible;
}

.slick-arrow-1 .slick-arrow:hover {
	background-color: #970202;
	border-color: #970202;
	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: #970202;
	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: #970202;
	height: 10px;
	width: 30px;
	margin-bottom: 0px;
	border-radius: 6px;
}
/* --------------------------------------------------------------------------
   Slick Slider — End
-------------------------------------------------------------------------- */