/*==============================================================================
[Master Stylesheet]

Project:        Rezolve - Business Consulting
Version:        1.0
Primary use:    Main Website Stylesheet
Description:    Rezolve is modern and elegant HTML 5 Bootstrap Template for business consulting website.
                You can also use this for business consulting firms, corporate advisors, financial consultants, startups, and professional service providers, etc
==============================================================================*/

/*==============================================================================
[Master Stylesheet]

Project:        Rezolve - Business Consulting
Version:        1.0
Primary use:    Main Website Stylesheet
Description:    Rezolve is modern and elegant HTML 5 Bootstrap Template for business consulting website.
                You can also use this for business consulting firms, corporate advisors, financial consultants, startups, and professional service providers, etc
==============================================================================*/

/*==============================================================================
[Table of Contents]

1.0 Import Vendor
2.0 Variable Settings
    2.1 Color Variable
    2.2 Font Family Variable
    2.3 Animation Duration Preset
    2.4 Animation Delay Preset
3.0 Animation Settings
4.0 Base Settings
5.0 Base Section
6.0 Base Content Container
7.0 Button Style
8.0 Card Style
9.0 Color Style
10.0 Image Style
11.0 Heading Style
12.0 Banner Style
13.0 Header Style
14.0 Sidebar Style
15.0 Footer Style
16.0 Banner Content Style
17.0 Partnership Style
18.0 About Style
19.0 What We Do Style
20.0 Achievement Style
21.0 Service Style
22.0 Why Choose Us Style
23.0 Case Studies Style
24.0 Testimonial Style
25.0 Work Process Style
26.0 Blog Style
27.0 Team Style
28.0 Pricing Style
29.0 FAQ Style
30.0 Appointment Style
31.0 Contact Style
32.0 Maps Style
33.0 Notfound Style
34.0 Contact CTA Style
35.0 Form Style
36.0 Accordion Style
37.0 List Style
38.0 Animation Style
39.0 Icon Style
40.0 Video & Modal Style
41.0 Spacing Style

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

/*==============================================================================
[Color Glossary]

PRIMARY: #FFFFFF (White) - Main text on dark theme
SECONDARY: #5E4AE3 (Vibrant Purple) - Brand color, primary CTAs
TEXT: #ECECEC (Light Gray) - Body text, secondary content
ACCENT: #DDF45B (Lime Yellow) - Secondary brand, highlights
BACKGROUNDS: #0B0A07 (Near Black), #1D1D1D (Dark Gray)
SUPPORTING: #3D2E9C (Deep Purple), #B4B4B4 (Medium Gray)

--primary: #FFFFFF - White text (20.4:1 on near black) AAA
--secondary: #5E4AE3 - Purple brand accent (4.5:1 on black) AA
--text-color: #ECECEC - Light gray text (18.2:1 on near black) AAA
--accent-color: #DDF45B - Lime yellow highlight (14.5:1 on near black) AAA
--accent-color-2: #0B0A07 - Near black background (main)
--accent-color-3: #1D1D1D - Dark gray surfaces (depth layer)
--accent-color-4: #02010100 - Transparent (gradients)
--accent-color-5: #3D2E9C - Deep purple (darker brand shade)
--accent-color-6: #B4B4B4 - Medium gray (borders, muted)
--accent-color-7: #5E4AE333 - Purple 20% opacity (subtle bg)
--accent-overlay: rgba(51,51,51,.5) - Dark overlay 50%

DARK THEME STRUCTURE:
Body bg: Near black (#0B0A07), Cards: Dark gray (#1D1D1D)
Text: White/Light gray, Accents: Purple/Yellow
All WCAG AAA for primary text, AA minimum for all elements

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

/*==============================================================================
[Typography System]

FONTS: DM Sans (headings) + Manrope (body)
THEME: Light text on dark backgrounds (inverted theme)

h1: 62px, 600 weight, 1.2em line-height (Hero)
h2: 46px, 500 weight, 1.3em (Sections) 
h3: 28px, 500 weight, 1.3em (Cards)
h4: 25px, 500 weight, 1.3em (Widgets)
h5: 23px, 500 weight, 1.3em (Labels)
h6: 20px, 500 weight, 1.3em (Small headers)

Body: Manrope, white/light gray on dark
Special: Team designation 14px lime yellow

SCALE RATIO: ~1.25x average
RESPONSIVE: Desktop full → Tablet -20% → Mobile -40%
MIN SIZE: 14px (team designation smallest)

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

/*==============================================================================
[Animation System]

KEYFRAMES:
@keyframes ripple - Expanding circle (scale 1→1.7, opacity 1→0, border 0→13px)
@keyframes fade-in - Opacity 0→1
@keyframes fade-up - Opacity + translateY(80px→0)
@keyframes fade-down - Opacity + translateY(-80px→0)  
@keyframes fade-left - Opacity + translateX(-120px→0)
@keyframes fade-right - Opacity + translateX(120px→0)

DURATIONS:
--anim-duration-fast: 0.8s (UI interactions)
--anim-duration-normal: 1.1s (content reveals)
--anim-duration-slow: 1.6s (hero sections)

DELAYS:
--anim-delay-none: 0s (immediate)
--anim-delay-sm: 0.25s (stagger)
--anim-delay-md: 0.45s (tertiary)

ACCESSIBILITY:
@media (prefers-reduced-motion: reduce) {
  .animation-box: animation none, opacity 1, transform none
}

EASING: cubic-bezier(0.25, 0.8, 0.25, 1)
PERFORMANCE: GPU-only (opacity, transform)
STAGGER MAX: 5-7 items (1.5s total recommended)

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

/* ======================= 
    1.0 Import Vendor
==========================*/

@import url('../css/fonts.css');
@import url('../css/vendor/bootstrap.min.css');
@import url('../css/vendor/fontawesome.min.css');
@import url('../css/vendor/brands.css');
@import url('../css/vendor/regular.css');
@import url('../css/vendor/solid.css');
@import url('../css/vendor/swiper.min.css');
@import url('../css/vendor/flatpickr.min.css');
@import url('../css/vendor/animate.min.css');

/* ======================= 
    2.0 Variable Settings
==========================*/

:root{
    /* 2.1 Color Variable */
    --primary: #FFFFFF;
    --secondary: #5E4AE3;
    --text-color: #ECECEC;
    --accent-color: #DDF45B;
    --accent-color-2: #0B0A07;
    --accent-color-3: #1D1D1D;
    --accent-color-4: #02010100;
    --accent-color-5: #3D2E9C;
    --accent-color-6: #B4B4B4;
    --accent-color-7: #5E4AE333;
    --accent-overlay: rgba(51,51,51,.5);

    /* 2.2 Font Family Variable */
    --font-family-heading: "DM Sans", sans-serif;
    --font-family-text: "Manrope", sans-serif;

    /* 2.3 Animation Duration Preset */
    --anim-duration-fast: 0.8s;
    --anim-duration-normal: 1.1s;
    --anim-duration-slow: 1.6s;

    /* 2.4 Animation Delay Preset */
    --anim-delay-none: 0s;
    --anim-delay-sm: 0.25s;
    --anim-delay-md: 0.45s;
}


/* ======================= 
    3.0 Animation Settings
==========================*/

@keyframes ripple {
    from {
        opacity: 1;
        transform: scale3d(1, 1, 1);
        transform-origin: center;
        border-width: 0px;
    }

    to {
        opacity: 0;
        transform: scale3d(1.7, 1.7, 1.8);
        transform-origin: center;
        border-width: 13px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .animation-box { 
        animation: none !important;
        opacity: 1 !important; 
        transform: none !important; 
    }
}

@keyframes fade-in   { 
    from {opacity:0;} to {opacity:1;} 
}

@keyframes fade-up   { 
    from {opacity:0; transform:translateY(80px);} to {opacity:1; transform:translateY(0);} 
}

@keyframes fade-down { 
    from {opacity:0; transform:translateY(-80px);} to {opacity:1; transform:translateY(0);} 
}

@keyframes fade-left { 
    from {opacity:0; transform:translateX(-120px);} to {opacity:1; transform:translateX(0);} 
}

@keyframes fade-right{ 
    from {opacity:0; transform:translateX(120px);} to {opacity:1; transform:translateX(0);} 
}

/* ======================= 
    4.0 Base Settings
==========================*/

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    background-color: var(--accent-color-2);
    color: var(--primary);
    font-family: var(--font-family-text);
}

h1{
    font-size: 62px;
    font-weight: 600;
    line-height: 1.2em;
}

h2{
    font-size: 46px;
    font-weight: 500;
    line-height: 1.3em;
}

h3{
    font-size: 28px;
    font-weight: 500;
    line-height: 1.3em;
}

h4{
    font-size: 25px;
    font-weight: 500;
    line-height: 1.3em;
}

h5{
    font-size: 23px;
    font-weight: 500;
    line-height: 1.3em;
}

h6{
    font-size: 20px;
    font-weight: 500;
    line-height: 1.5em;
}

h1, h2, h3, h4, h5, h6{
    font-family: var(--font-family-heading);
    margin: 0px;
}

p{
    font-family: var(--font-family-text);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.8em;
    color: var(--text-color);
    margin-bottom: 14.4px;
}

button, a, .btn{
    font-family: var(--font-family-heading);
    font-size: 15px;
    font-weight: 500;
    line-height: 1.2em;
    text-decoration: none;
}

/* ======================= 
    5.0 Base Section
==========================*/

.section{
    padding: 100px 0px;
}

.section-pt-10{
    padding-top: 10px;
}

.section-notfound{
    padding: 250px 0px 100px;
}

/* ======================= 
    6.0 Base Content Container
==========================*/

.hero-container{
    max-width: 1320px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    height: auto;
}

/* ======================= 
    7.0 Button Style
==========================*/

.btn{
    padding: 15px 30px;
    border-radius: 100px;
    box-shadow: none;
    border: none;
    outline: none;
    transition: all 0.3s ease;
}

.btn-accent{
    background-color: var(--accent-color);
    color: var(--accent-color-2);
}

.btn-accent:hover{
    background-color: var(--primary);
    color: var(--accent-color-2);
}

.btn-primary-accent{
    background-color: var(--primary);
    color: var(--accent-color-2);
}

.btn-primary-accent:hover{
    background-color: var(--accent-color);
    color: var(--accent-color-2);
}

.btn-service-detail{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
    justify-content: space-between;
    background-color: transparent;
    background-image: linear-gradient(180deg, var(--accent-color-2) 8%, var(--accent-color-3) 100%);
    border-radius: 10px;
    padding: 7px 15px;
    overflow: hidden;
}

.btn-service-detail span{
    color: var(--primary);
    font-family: var(--font-family-heading);
    font-size: 20px;
    font-weight: 500;
    line-height: 1.5em;
    margin: 0.5em 0em 1em;
}

.btn-service-detail i{
    font-size: 34px;
    color: var(--accent-color);
}

.btn-submit-form{
    width: auto;
    box-shadow: 0 5px 5px 0 rgba(66,133,244,.3);
}

.btn-service-detail:hover i{
    color: var(--primary);
}

/* ======================= 
    8.0 Card Style
==========================*/

.card{
    border: none;
    border-radius: 10px;
}

.card__about-media{
    padding: 20px 20px 0px 20px;
    background-color: transparent;
    background-image: linear-gradient(180deg, var(--accent-color-2) 10%, var(--accent-color-3) 100%);
}

.card__about-media-stat-wrapper{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
    padding: 30px 30px;
    border-radius: 10px 10px 0px 0px;
    background-color: var(--accent-color-5);
}

.card__about-content-experience{
    background-color: transparent;
    background-image: linear-gradient(180deg, var(--accent-color-2) 15%, var(--accent-color-3) 100%);
    padding: 18px 18px 0px 18px;
    margin-top: 157px;
}

.card__about-content-experience-wrapper{
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: center;
    text-align: center;
    background-color: var(--accent-color-5);
    padding: 6px 6px;
    border-radius: 10px 10px 0px 0px;
}

.card__about-values-wrapper{
    background-color: transparent;
    background-image: linear-gradient(180deg, var(--accent-color-2) 0%, var(--accent-color-3) 100%);
    padding: 20px 20px;
}

.card__about-values-body{
    display: flex;
    flex-direction: row;
    gap: 20px;
    background-color: var(--accent-color-5);
    color: var(--primary);
    padding: 15px 15px;
}

.card__what-we-do__wrapper{
    padding: 20px 20px;
    background-color: transparent;
    background-image: linear-gradient(180deg, var(--accent-color-3) 20%, var(--accent-color-2) 100%);
    display: flex;
    flex-direction: column;
    gap: 0px;
    align-items: flex-end;
    justify-content: space-between;
    min-height: 370px;
    height: 100%;
}

.card__what-we-do__content{
    display: flex;
    flex-direction: column;
    gap: 20px;
    background-color: var(--accent-color-5);
    color: var(--primary);
    padding: 20px 20px;
}

.card__service-content{
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: space-between;
    padding: 20px 20px;
    overflow: hidden;
    min-height: 430px;
    color: var(--primary);
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.card__service-content::before{
    content: '';
    position: absolute;
    background-color: transparent;
    background-image: linear-gradient(180deg, #0B0A0724 0%, var(--accent-color-2) 80%);
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.card__service-detail{
    display: flex;
    flex-direction: column;
    gap: 20px;
    background-image: linear-gradient(180deg, var(--accent-color-2) 0%, var(--accent-color-3) 85%);
    padding: 20px 20px;
}

.card-service-detail-content{
    background-color: var(--accent-color-5);
    color: var(--primary);
    padding: 12px 20px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-radius: 10px;
}

.card__why-choose-us__wrapper{
    background-color: transparent;
    background-image: linear-gradient(180deg, var(--accent-color-2) 0%, var(--accent-color-3) 85%);
    padding: 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.card__why-choose-us__content{
    display: flex;
    flex-direction: column;
    gap: 10px;
    background-color: var(--accent-color-5);
    color: var(--primary);
    padding: 20px 20px;
}

.card__why-choose-us__revenue{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-image: linear-gradient(180deg, var(--accent-color-2) 50%, var(--accent-color-3) 100%);
    gap: 20px;
    padding: 25px 25px;
    color: var(--primary);
}

.case-studies__card-stat{
    grid-column: span 4;
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: space-between;
    padding: 20px 20px;
    background-color: transparent;
    background-image: linear-gradient(180deg, var(--accent-color-3) 15%, var(--accent-color-2) 85%);
}

.case-card__container{
    background-color: var(--accent-color-5);
    color: var(--primary);
    padding: 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.card-team{
    display: flex;
    flex-direction: column;
    gap: 20px;
    background-color: var(--accent-color-3);
    color: var(--primary);
    padding: 20px 20px;
    align-items: center;
    text-align: center;
}

.card__pricing{
    display: flex;
    flex-direction: column;
    gap: 20px;
    background-image: linear-gradient(180deg, var(--accent-color-2) 0%, var(--accent-color-3) 100%);
    padding: 20px 20px;
}

.card-pricing__header{
    display: flex;
    flex-direction: column;
    gap: 0px;
    background-color: var(--accent-color-5);
    color: var(--primary);
    padding: 15px 15px;
}

.card__appointment{
    display: flex;
    flex-direction: column;
    gap: 20px;
    background-image: linear-gradient(180deg, var(--accent-color-2) 0%, var(--accent-color-3) 100%);
    padding: 30px 30px;
}

.card__contact-form{
    display: flex;
    flex-direction: column;
    gap: 30px;
    background-image: linear-gradient(180deg, var(--accent-color-2) 0%, var(--accent-color-3) 100%);
    color: var(--primary);
    padding: 30px 30px;
}

.card__contact-info{
    background-image: linear-gradient(180deg, var(--accent-color-2) 10%, var(--accent-color-3) 100%);
    padding: 20px 20px;
    margin-top: 20px;
}

.card-blog{
    display: flex;
    flex-direction: column;
    background-color: transparent;
    background-image: linear-gradient(180deg, var(--accent-color-2) 15%, var(--accent-color-3) 100%);
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.card-blog-body{
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 25px 25px 25px 25px;
}

.card__single-post-quote{
    display: flex;
    flex-direction: row;
    gap: 40px;
    padding: 20px 20px;
    margin-bottom: 30px;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.card__single-post-quote::before{
    content: '';
    position: absolute;
    inset: 0;
    background-color: transparent;
    background-image: linear-gradient(180deg, var(--accent-color-2) 0%, var(--accent-color-3) 100%);
    width: 100%;
    height: 100%;
    z-index: -1;
}

/* ======================= 
    9.0 Color Style
==========================*/

.bg-accent-color-3{
    background-color: var(--accent-color-3);
}

.accent-color{
    color: var(--accent-color);
}

/* ======================= 
    10.0 Image Style
==========================*/

.image-container{
    display: inline-block;
    position: relative;
}

.image-container img{
    display: inline-block;
    max-width: 100%;
    height: auto;
    object-fit: cover;
    object-position: center center;
}

.banner-home-reviewer-avatar{
    display: inline-block;
    vertical-align: middle;
    width: 50px;
    min-height: 50px;
    border-radius: 1000px 1000px 1000px 1000px;
    object-fit: cover;
    border: 4px solid var(--accent-color-2);
}

.banner-home-reviewer-avatar:not(:nth-child(1)) {
    margin-left: -15px;
}

.banner-home-img-highlight{
    margin: 0px 0px 0px -130px;
}

.banner-home-img-highlight img{
    width: 100%;
    position: relative;
    z-index: 1;
}

.banner-home-img-chart-visitor{
    position: absolute;
    right: -37px;
    top: 175px;
    text-align: end;
    z-index: -1;
}

.banner-home-img-chart-visitor img{
    width: 42%;
}

.banner-home-img-chart-income{
    position: absolute;
    left: -100px;
    bottom: 258px;
    text-align: start;
    z-index: 2;
}

.banner-home-img-chart-income img{
    width: 38%;
}

.partner-img img{
    width: 100%;
}

.service-detail-image img{
    border-radius: 10px;
    min-height: 265px;
}

.case-studies-logo{
    width: 20%;
}

.testimonial-quote-logo{
    width: 35%;
}

.testimonial-avatar{
    width: 14%;
}

.testimonial-avatar img{
    border-radius: 100px;
}

.sidebar-logo img{
    width: 50%;
}

.footer-logo img{
    width: 60%;
}

.team-image img{
    width: 100%;
    border-radius: 10px;
}

.notfound-image{
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.notfound-image img{
    width: 45%;
}

.blog-image img{
    width: 100%;
    transition: all 0.3s ease;
}

/* ======================= 
    11.0 Heading Style
==========================*/

.sub-heading-container{
    display: flex;
    flex-direction: row;
    gap: 10px 10px;
    align-items: center;
}

.sub-heading-icon{
    color: var(--accent-color);
    font-size: 13px;
}

.sub-heading{
    color: var(--accent-color);
    font-family: var(--font-family-heading);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2em;
    letter-spacing: 2.5px;
    text-transform: uppercase;
}

/* ======================= 
    12.0 Banner Style
==========================*/

.banner-home{
    padding: 160px 0px 0px 0px;
    background-color: transparent;
    background-image: radial-gradient(at bottom right, #5E4AE333 0%, var(--accent-color-2) 70%);
    position: relative;
    z-index: 2;
}

.banner-home::before{
    content: '';
    position: absolute;
    background-image: url('../images/assets-03.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 0.05;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.banner-page{
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 185px 0px 80px 0px;
    position: relative;
    z-index: 1;
}

.banner-page::before{
    content: '';
    position: absolute;
    background-image: radial-gradient(at bottom right, #5E4AE3D4 0%, var(--accent-color-2) 55%);
    opacity: 0.86;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.banner-page.banner-page-about{
    background-image: url('../images/shell-have-it-all-figured-out-in-no-time-2023-11-27-05-24-19-QXZVZXW.jpg');
}

.banner-page.banner-page-service{
    background-image: url('../images/business-people-having-a-discussion-and-using-a-la-2024-12-07-03-01-03-HL3CSS3.jpg');
}

.banner-page.banner-page-case-studies{
    background-image: url('../images/group-of-business-people-having-meeting-together-2025-02-03-09-47-27-FJUNE3L.jpg');
}

.banner-page.banner-page-appointment{
    background-image: url('../images/shell-have-it-all-figured-out-in-no-time-2023-11-27-05-24-19-QXZVZXW.jpg');
}

.banner-page.banner-page-team{
    background-image: url('../images/team-of-business-people-looking-at-camera-2024-09-18-11-25-27-84EWTZG.jpg');
}

.banner-page.banner-page-pricing{
    background-image: url('../images/financial-graph-calculator-and-notepad-on-table-2024-12-13-06-34-54-ZFU7EE8.jpg');
}

.banner-page.banner-page-faq{
    background-image: url('../images/business-people-having-a-discussion-and-using-a-la-2024-12-07-03-01-03-HL3CSS3.jpg');
}

.banner-page.banner-page.banner-page-blog{
    background-image: url('../images/a-group-of-international-business-people-are-havin-2025-02-10-12-56-15-JWNT8GQ.jpg');
}

.banner-page.banner-page-contact{
    background-image: url('../images/team-of-business-people-looking-at-camera-2024-09-18-11-25-27-84EWTZG.jpg');
}

.banner-page-single-post{
    background-image: url('../images/a-group-of-international-business-people-are-havin-2025-02-10-12-56-15-JWNT8GQ.jpg');
}

.achievement-banner{
    background-attachment: fixed;
    background-image: url('../images/assets-03.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 50px 0px;
    position: relative;
    z-index: 1;
}

.achievement-banner::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    background-color: transparent;
    background-image: radial-gradient(at bottom right, var(--accent-color-5) 0%, var(--accent-color-2) 70%);
    opacity: 0.95;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.contact-cta-banner{
    background-attachment: fixed;
    background-image: url('../images/assets-03.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    z-index: 1;
}

.contact-cta-banner::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    background-color: transparent;
    background-image: radial-gradient(at bottom right, var(--accent-color-5) 0%, var(--accent-color-2) 70%);
    opacity: 0.95;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.work-process-banner{
    background-attachment: fixed;
    background-image: url('../images/explaining-project-points-2023-11-27-04-57-31-TYU277H.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    z-index: 1;
}

.work-process-banner::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    background-color: transparent;
    background-image: radial-gradient(at bottom right, var(--accent-color-5) 0%, var(--accent-color-2) 70%);
    opacity: 0.94;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.footer-banner{
    background-color: transparent;
    background-image: linear-gradient(180deg, var(--accent-color-2) 0%, var(--accent-color-3) 100%);
    padding: 100px 0px 25px 0px;
    position: relative;
}

/* ======================= 
    13.0 Header Style
==========================*/

.header-container{
    position: relative;
    margin-bottom: -100px;
    padding-top: 20px;
    z-index: 10;
}

.navbar{
    background-image: linear-gradient(180deg, var(--accent-color-4) 0%, var(--accent-color-2) 100%);
    position: relative;
    padding: 10px 20px;
    border-radius: 100px;
    
}

.navbar-nav-container{
    display: flex;
    flex-direction: row;
    gap: 20px;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.navbar-logo-container{
    width: 25%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.navbar-logo-container img{
    width: 58%;
}

.nav-link-container{
    width: 55%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.nav-link{
    color: var(--primary);
    padding: 0px 22px !important;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus,
.navbar-nav .nav-link.show,
.navbar-nav .nav-link.active{
    color: var(--accent-color);
}

.dropdown-menu{
    padding: 15px 15px;
    box-shadow: rgba(45, 45, 45, 0.2) 0px 10px 30px 0px;
    background-color: var(--accent-color-2);
    border-radius: 10px;
    min-width: 220px;
}

.dropdown-item{
    padding: 15px 15px;
    background-color: var(--accent-color-2);
    color: var(--primary);
    transition: all 0.3s ease;
}

.dropdown-item:hover,
.dropdown-item:active,
.dropdown-item.active{
    background-color: var(--accent-color-2);
    color: var(--accent-color);
}

.dropdown-toggle::after {
    display: none !important;
}

.nav-btn{
    display: none;
    padding: 6px 6px;
    border-radius: 8px;
    background-color: var(--accent-color);
    color: var(--accent-color-2);
    box-shadow: none;
    outline: none;
    border: none;
    width: 52px;
    font-size: 20px;
    line-height: 1.2em;
}

.navbar-cta-container{
    width: 20%;
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
}

/* ======================= 
    14.0 Sidebar Style
==========================*/


.sidebar-overlay{
    position: fixed;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    min-height: 100vh;
    background: var(--accent-overlay);
    transition: left 0.4s ease-in-out;
    z-index: 11;
    display: none;
}

.sidebar-overlay.active{
    left: 0;
}

.sidebar {
    position: fixed;
    top: 0;
    left: -350px;
    width: 350px;
    height: 100%;
    background: var(--accent-color-2);
    color: var(--primary);
    transition: transform 0.4s ease-in-out;
    z-index: 12;
    overflow-y: auto;
    max-height: 100vh;
    padding: 0px 16px 0px 5px;
    display: none;
}

.sidebar.active{
    transform: translateX(350px);
}

.sidebar-header {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    padding: 20px 20px 20px 20px;
}

.sidebar-close-btn {
    display: inline-block;
    justify-content: center;
    background-color: var(--accent-color);
    border-radius: 8px 8px 8px 8px;
    color: var(--accent-color-2);
    font-weight: 600;
    position: relative;
    font-family: var(--font-family-2);
    font-size: 16px;
    cursor: pointer;
    padding: 8px 18px;
    transition: all 300ms;
    border: none;
    outline: none;
}

.sidebar-close-btn:hover{
    background-color: var(--primary);
    color: var(--accent-color-2);
}

.sidebar-menu {
    list-style: none;
    padding: 0;
    margin-top: 20px;
}

.sidebar-menu li {
    padding: 10px 15px 10px 15px;
}

.sidebar-menu a {
    color: var(--primary);
    text-decoration: none;
    display: block;
    transition: 0.3s;
    letter-spacing: 0px;
}

.sidebar-menu a:hover,
.sidebar-menu a.active,
.sidebar-menu a:focus {
    color: var(--accent-color);
}

.sidebar-dropdown .dropdown-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sidebar-dropdown-btn {
    background: none;
    border: none;
    color: var(--primary);
    font-size: 15px;
    border: 1px solid var(--primary);
    border-radius: 30px;
    cursor: pointer;
    padding: 3px 15px;
    transition: transform 0.3s ease;

}
.sidebar-dropdown-btn:hover {
    color: var(--accent-color);
    border: 1px solid var(--accent-color);
}

.sidebar-dropdown-menu {
    list-style: none;
    padding-left: 20px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-in-out, padding 0.3s ease-in-out;
    padding-top: 0;
    padding-bottom: 0;
}

.sidebar-dropdown-menu.active {
    max-height: 100%;
    padding-top: 10px;
    padding-bottom: 10px;
}
.below-dropdown {
    transition: margin-top 0.1s ease-in-out;
    margin-top: 0px;
}

.sidebar::-webkit-scrollbar {
    width: 5px;
}

.sidebar::-webkit-scrollbar-thumb {
    background: gray;
    border-radius: 5px;
}

/* ======================= 
    15.0 Footer Style
==========================*/

.footer__container{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 30px;
}

.footer__col{
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.footer__col--intro{
    flex: 0 0 29%;
}

.footer-intro__description{
    width: 100%;
}

.footer-divider{
    width: 100%;
    margin: 6px 0px;
    border-bottom: 1px solid #FFFFFF21;
}

.footer__social-media{
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
    color: var(--text-color);
    font-family: var(--font-family-text);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.8em;
}

.footer__social-media i{
    color: var(--accent-color);
}

.footer__col--quick-links{
    flex: 0 0 15%;
}

.footer__col--useful-links{
    flex: 0 0 15%;
}

.footer__list{
    list-style: none;
    padding: 0px;
}

.footer__link-text{
    color: var(--text-color);
    font-family: var(--font-family-text);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.8em;
}

.footer__link-text:hover{
    color: var(--accent-color);
}

.footer__col--newsletter{
    flex: 0 0 33%;
}
.footer__col-copyright{
    flex: 0 0 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    border-top: 1px solid #FFFFFF21;
    padding-top: 25px;
}

/* ======================= 
    16.0 Banner Content Style
==========================*/

/* 16.1 Banner Home Content */

.banner-home-container{
    display: flex;
    flex-direction: row;
    gap: 0px 0px;
    position: relative;
    overflow: hidden;
    z-index: 2;
}

.banner-home-title-container{
    width: 50%;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: center;
    position: relative;
}

.banner-home-title-description{
    max-width: 71%;
}

.banner-home-image-container{
    width: 50%;
    height: auto;
    display: flex;
    flex-direction: column;
    gap: 0px 0px;
    justify-content: flex-end;
    position: relative;
}

.banner-home-spacer{
    height: 100px;
}

.banner-home-reviewer-container{
    display: flex;
    flex-direction: row;
    align-items: center;
}

/* 16.2 Banner Page */

.banner-page__container{
    display: flex;
    flex-direction: row;
    gap: 0px;
    align-items: center;
}

.banner-page__title{
    width: 60%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.banner-page__intro{
    width: 40%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.breadcrumb{
    display: flex;
    flex-direction: row;
    gap: 10px;
    align-items: center;
}

.breadcrumb-link{
    font-family: var(--font-family-text);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.8em;
    color: var(--primary);
}

.breadcrumb-divider{
    color: var(--accent-color);
    font-size: 16px;
}

/* ======================= 
    17.0 Partnership Style
==========================*/

.partnership-content-title{
    color: var(--primary);
    font-size: 23px;
    font-family: var(--font-family-text);
    line-height: 1.4em;
    text-align: start;
}

/* ======================= 
    18.0 About Style
==========================*/

.about__container{
    display: flex;
    flex-direction: column;
    gap: 120px;
    justify-content: space-between;
}

.about__intro{
    display: flex;
    flex-direction: row;
    gap: 20px;
}

.about__media{
    width: 55%;
    display: flex;
    flex-direction: row;
    gap: 20px;
}

.about__media--half-tall-container{
    width: 50%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.about__media-image--half-tall{
    background-image: url('../images/multiracial-business-team-having-a-meeting-2024-09-13-22-45-39-8QNPR6L.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 425px;
    border-radius: 10px;
}

.about__media-image--half-tall .spacer{
    height: 50px;
}

.about__media-image--tall{
    background-image: url('../images/groups-of-people-joining-in-discussions-business-2025-01-16-21-50-06-9XDS6P4.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 50%;
    min-height: 555px;
    border-radius: 10px;
}

.about__media-image--tall .spacer{
    height: 50px;
}

.card__about-media-icon{
    color: var(--accent-color);
    font-size: 50px;
}

.card__about-media-stat{
    color: var(--accent-color);
    font-family: var(--font-family-heading);
    font-size: 60px;
    font-weight: 500;
    line-height: 1.3em;
}

.about__content{
    width: 43%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-left: 20px;
}

.about-content-experience-stat{
    color: var(--accent-color);
    font-family: var(--font-family-heading);
    font-size: 60px;
    font-weight: 500;
    line-height: 1.3em;
}

.about-content-experience-stat-title{
    font-size: 14px;
    margin: 0px;
}

.about__values{
    display: flex;
    flex-direction: row;
    gap: 20px;
}

.about__cards-container{
    width: 50%;
    display: flex;
    flex-direction: column;
    gap: 30px;
    justify-content: space-between;
}

.about__image-values{
    background-image: url('../images/business-people-during-a-conference-in-the-meeting-2023-11-27-05-30-52-MZ9E4A9.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 50%;
    min-height: 588px;
    border-radius: 10px 10px;
}

.about__image-values .spacer{
    height: 50%;
}

.about__values-icon{
    background-color: var(--accent-color-3);
    color: var(--accent-color);
    font-size: 30px;
    width: 55px;
    height: 55px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    text-align: center;
    transition: all .3s;
    padding: 0.5em;
}

/* ======================= 
    19.0 What We Do Style
==========================*/

.what-we-do__container{
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.what-we-do__heading-container{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.what-we-do__image{
    background-image: url('../images/team-of-business-people-looking-at-camera-2024-09-18-11-25-27-84EWTZG.jpg');
    background-position: 0px -80px;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 530px;
    border-radius: 10px;
    margin: 50px 0px 20px 0px;
}

.what-we-do__image .spacer{
    height: 50px;
}

/* ======================= 
    20.0 Achievement Style
==========================*/

.achievement__container{
    display: grid;
    grid-template-columns: repeat(4, auto);
    gap: 20px;
    justify-content: space-between;
}

.achievement__stat-container{
    display: flex;
    flex-direction: column;
    gap: 0px;
    align-items: center;
}

.achievement__stat-counter{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0px;
}

.achievement__stat{
    color: var(--accent-color);
    font-family: var(--font-family-heading);
    font-size: 60px;
    font-weight: 500;
    line-height: 1.3em;
}

/* ======================= 
    21.0 Service Style
==========================*/

/* 21.1 Service */

.service__container{
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
}

.service__heading{
    width: 49%;
    margin: -10px 0px 50px 0px;
    text-align: center;
}

.service__card-list-grid{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 40px 25px;
}

.service__business-strategy{
    background-image: url('../images/diverse-happy-business-people-in-board-room-meetin-2023-11-27-05-07-26-83GNUU2.jpg');
}

.service__financial-consulting{
    background-image: url('../images/businessteam-are-analyzing-graphs-data-2024-12-06-13-26-33-CFRE5XL.jpg');
}

.service__digital-transformation{
    background-image: url('../images/full-concentration-at-work-group-of-multiracial-b-2024-12-10-03-56-48-58MLGG3.jpg');
}

.service__operational-efficiency{
    background-image: url('../images/asian-business-colleagues-meeting-to-analyze-finan-2025-01-10-06-01-36-L8HMEHM.jpg');
}

.service__marketing-brand{
    background-image: url('../images/close-up-of-business-team-developing-marketing-pla-2024-12-13-18-15-44-VLZN2U8.jpg');
}

.service__leadership-development{
    background-image: url('../images/confident-businessman-explaining-strategy-to-a-div-2025-02-12-03-24-51-NJF6XBE.jpg');
}

.service-content__content-body{
    display: flex;
    flex-direction: column;
    gap: 20px;
    transform: translateY(50px);
    transition: all 0.3s ease;
}

.service-content__content-body:hover{
    transform: translateY(0px);
}

.service-content__content-cta{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
    color: var(--accent-color);
}

.service__footer-container{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    background-image: linear-gradient(180deg, var(--accent-color-2) 8%, var(--accent-color-3) 100%);
    margin-top: 20px;
    padding: 15px 15px;
    border-radius: 10px;
}

.service__footer-link{
    display: flex;
    flex-direction: row;
    gap: 20px;
    align-items: center;
}

.service__footer-cta{
    display: flex;
    flex-direction: row;
    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    color: var(--accent-color);
    align-items: center;
}

/* 21.2 Service Detail */

.service-detail__container{
    display: flex;
    flex-direction: row;
    gap: 0px;
}

.service-detail__sidebar{
    width: 33.3333%;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 50px;
    position: sticky;
    top: 1em;
    z-index: 1;
}

.service-detail__content{
    width: 66.6666%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-left: 40px;
}

.service-detail__image{
    background-image: url('../images/presentation-clapping-and-business-woman-manager-2023-11-27-05-13-23-QHH5M7Y.jpg');
    background-position: 0px -45px;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 10px;
}

.service-detail__image .spacer{
    height: 50px;
}

.card__service-detail-number{
    font-family: var(--font-family-heading);
    font-size: 28px;
    font-weight: 500;
    line-height: 1.3em;
    color: var(--accent-color);
}

.service-detail-description{
    font-size: 14px;
    margin: 0;
}

/* ======================= 
    22.0 Why Choose Us Style
==========================*/

.why-choose-us__container{
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.why-choose-us__heading-container{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 50px;
}

.why-choose-us__content-grid {
    display: grid;
    grid-template-columns: 3fr 4fr 3fr;
    gap: 25px;
}

.why-choose-us__card-list{
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 25px;
}

.why-choose-us__card-list--right .card__why-choose-us__wrapper {
    text-align: right;
}

.why-choose-us__card-list--right .card__why-choose-us__content {
    align-items: flex-end;
}

.why-choose-us__revenue-content{
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.why-choose-us__revenue-image{
    background-image: url('../images/chart-03.png');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 305px;
    border-radius: 10px;
    margin-bottom: 10px;
    position: relative;
    z-index: 1;
}

.why-choose-us__revenue-image::before{
    content: '';
    position: absolute;
    background-color: transparent;
    background-image: linear-gradient(180deg, #0B0A0700  0%, var(--accent-color-2) 100%);
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.why-choose-us__revenue-image .spacer{
    height: 50px;
}

.why-choose-us__revenue-stat{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0px;
    color: var(--accent-color);
    font-family: var(--font-family-heading);
    font-size: 60px;
    font-weight: 500;
    line-height: 1.3em;
}

.why-choose-us__revenue-stat.counter{
    color: var(--primary);
}

.why-choose-us__revenue-image-footer{
    background-image: url('../images/multiethnic-business-people-working-together-in-th-2023-11-27-05-06-04-KEKSU5V.jpg');
    background-position: 0px -41px;
    background-repeat: no-repeat;
    background-size: cover;
    min-height: 182px;
    border-radius: 10px;
}

/* ======================= 
    23.0 Case Studies Style
==========================*/

.case-studies__container{
    display: flex;
    flex-direction: column;
    gap: 50px;
}

.case-studies__heading{
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
    text-align: center;
}

.case-studies--title{
    width: 72%;
}

.case-studies__grid-layout{
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 30px;
}

.case-studies__case-card--image{
    grid-column: span 8;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    flex-direction: column;
    gap: 20px;
    min-height: 500px;
    justify-content: space-between;
    border-radius: 10px;
    padding: 25px 25px;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.case-studies__case-card--image.case-card--image-half{
    grid-column: span 6;
}

.case-studies__case-card--image::before{
    content: '';
    position: absolute;
    background-image: linear-gradient(180deg, #0B0A0724 0%, var(--accent-color-2) 80%);
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.case-studies__case-card--image.case-technova-solution{
    background-image: url('../images/diverse-team-innovates-for-sales-kpis-via-collabor-2025-01-09-15-16-28-6R9RK5L.jpg');
}

.case-studies__case-card--image.case-greentech-industries{
    background-image: url('../images/businesswoman-presenting-the-equipment-to-colleagu-2025-02-11-15-35-45-Y754L4D.jpg');
}

.case-studies__case-card--image.case-retail-industries{
    background-image: url('../images/businesswoman-holding-a-piggy-bank-while-putting-c-2024-11-27-04-41-14-R3T8BA9.jpg');
}

.case-studies__case-card--image.case-saas-industries{
    background-image: url('../images/team-working-on-a-project-2025-02-10-08-39-35-4MBSQBK.jpg');
}

.case-studies__case-image-content{
    width: 68%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: -50px;
    transition: all 0.3s ease;
}

.case-studies__case-image-content:hover{
    margin-bottom: 0;
}

.case-studies__case-image-title{
    font-family: var(--font-family-heading);
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    line-height: 1.2em;
    letter-spacing: 2.5px;
    color: var(--primary);
}

.case-studies__card-content-cta{
    display: flex;
    flex-direction: row;
    align-content: center;
    gap: 5px;
    color: var(--accent-color);
}

.case-card__stat-container{
    display: flex;
    flex-direction: row;
    gap: 0px;
    align-items: center;
}

.case-card-stat{
    color: var(--accent-color);
    font-family: var(--font-family-heading);
    font-size: 60px;
    font-weight: 500;
    line-height: 1.3em;
}

.card-testimonial{
    background-image: linear-gradient(180deg, var(--accent-color-3) 15%, var(--accent-color-2) 100%);
    color: var(--primary);
    padding: 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    height: auto;
    min-height: 0;
    align-self: flex-start;
}

.card-testimonial-quote{
    display: flex;
    flex-direction: column;
    gap: 20px;
    background-color: var(--accent-color-5);
    padding: 15px 15px;
}

/* ======================= 
    24.0 Testimonial Style
==========================*/

.testimonial__container{
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.testimonial__heading{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 50px;
}

.testimonial__grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.testimonial-quote__header{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.testimonial-quote-stars-container{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0px;
    color: var(--accent-color);
}

.testimonial-quote__divider{
    border-bottom: 1px solid #FFFFFF21;
}

/* ======================= 
    25.0 Work Process Style
==========================*/

.work-process__container{
    display: flex;
    flex-direction: column;
    gap: 0px;
}

.work-process__heading{
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
    text-align: center;
    margin-bottom: 50px;
}

.work-process__heading h2{
    width: 46%;
}

.work-process__grid{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 35px;
}

.work-process__item{
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
    text-align: center;
}

.work-process__step-header{
    background-color: #DDF45B5E;
    font-family: var(--font-family-text);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.8em;
    color: var(--primary);
    padding: 6px 23px 6px 23px;
    border-radius: 100px;
}

.work-process__divider{
    width: 100%;
    border-bottom: 1px solid #FFFFFF21;
    margin: 8px 0px;
}

/* ======================= 
    26.0 Blog Style
==========================*/

/* 26.1 Blog */

.blog__container{
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.blog__heading{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin-bottom: 50px;
}

.blog-heading-center{
    display: flex;
    flex-direction: column;
    gap: 20px;
    text-align: center;
    align-items: center;
    justify-content: center;
    align-self: center;
    width: 50%;
    margin-bottom: 50px;
}

.blog-image-tag{
    position: absolute;
    top: 15px;
    left: 18px;
    background-color: var(--accent-color-5);
    color: var(--primary);
    padding: 4px 20px;
    font-family: var(--font-family-text);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.8em;
    border-radius: 100px;
}

.blog__meta{
    display: flex;
    flex-direction: row;
    gap: 5px;
    align-items: center;
    color: var(--primary);
    font-family: var(--font-family-text);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.8em;
    border-radius: 100px;
}

.blog__meta i{
    color: var(--accent-color);
}

.blog-link{
    font-family: var(--font-family-heading);
    font-size: 20px;
    font-weight: 500;
    line-height: 1.5em;
    color: var(--primary);
    transition: all 0.3s ease;
}

.card-blog:hover .blog-image img{
    transform: scale(1.05) rotate(2deg);
    opacity: .8;
}

.card-blog:hover .blog-link{
    color: var(--accent-color);
}

/* 26.2 Single Post */

.single-post__container{
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.single-post__image{
    background-image: url('../images/man-working-with-analytics-at-the-office-2023-11-27-05-05-10-FECTUSN-1024x683.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    margin-bottom: 50px;
    border-radius: 10px;
    min-height: 675px;
}

.single-post__image .spacer{
    height: 50px;
}

.single-post__description{
    padding: 0px 100px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.single-post__quote{
    background-color: var(--accent-color-5);
    color: var(--text-color);
    font-family: var(--font-family-text);
    font-size: 23px;
    font-weight: 500;
    line-height: 1.4em;
    padding: 20px 20px 10px 20px;
}

/* ======================= 
   27. Team Style
==========================*/

.team__container{
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.team__heading{
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
    text-align: center;
    margin-bottom: 50px;
}

.team__heading h2{
    width: 48%;
}

.team-designation{
    font-size: 14px;
    color: var(--accent-color);
    margin: 0;
}

.team-social-container{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 0%;
    background-color: #3D2E9C59;
    overflow: hidden;
    display: flex;
    flex-direction: row;
    gap: 10px;
    justify-content: center;
    align-items: center;
    transition: height 0.5s ease;
}

.image-container:hover .team-social-container{
    height: 100%;
}

/* ======================= 
    28. Pricing Style
==========================*/

.pricing__container{
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.pricing__heading{
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
    text-align: center;
    margin-bottom: 50px;
}

.pricing__price{
    display: flex;
    flex-direction: row;
    gap: 0px;
    align-items: flex-end;
}

.pricing__amount{
    color: var(--accent-color);
    font-family: var(--font-family-heading);
    font-size: 60px;
    font-weight: 500;
    line-height: 1em;
}

.pricing__period{
    color: var(--accent-color-6);
    font-family: var(--font-family-text);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.8em;
}

.pricing__divider{
    width: 100%;
    border-bottom: 1px solid #FFFFFF21;
    margin: 6px 0px;
}

.pricing__partner-container{
    display: flex;
    flex-direction: column;
    gap: 20px;
    text-align: center;
    margin-top: 40px;
}

.pricing__partner-heading{
    font-family: var(--font-family-text);
    font-size: 18px;
    font-weight: 400;
    line-gap-override: 1.8em;
}

/* ======================= 
    29. FAQ Style
==========================*/

.faq__container{
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.faq__heading{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 20px;
}

.faq__intro{
    width: 62%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.faq__button-container{
    width: 28%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
}

.faq__accordion-container{
    display: flex;
    flex-direction: column;
    margin-top: 50px;
}

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

/* ======================= 
   30. Appointment Style
==========================*/

.appointment__container{
    display: flex;
    flex-direction: row;
    gap: 20px;
}

.appointment__page-image{
    width: 35%;
    background-image: url('../images/businesspeople-having-a-discussion-in-office-2023-11-27-04-57-08-DLVGKHK.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 10px;
}

.appointment__page-image .spacer{
    height: 50px;
}

.appointment__content-intro{
    width: 65%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 0px 0px 0px 25px;
}

.appointment__content-intro .appointment__content-heading{
    margin-bottom: 30px;
}

/* ======================= 
   31 Contact Style
==========================*/

.contact__container{
    display: flex;
    flex-direction: column;
    overflow: hidden;
    gap: 50px;
}

.contact-info__container{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    background-color: var(--accent-color-5);
    color: var(--primary);
    padding: 20px 20px;
}

.contact-info__item{
    display: flex;
    flex-direction: row;
    gap: 20px;
}

/* ======================= 
   32 Maps Style
==========================*/

.maps{
    border-radius: 10px;
    width: 100%;
    height: 696px;
}

/* ======================= 
    33.0 Notfound Style
==========================*/

.banner-notfound__container{
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: center;
    align-items: center;
}

.banner-notfound-description{
    width: 34%;
    text-align: center;
}

/* ======================= 
    34.0 Contact CTA Style
==========================*/

.contact-cta__container{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 50px;
}

.service-detail__contact-cta{
    background-image: url('../images/assets-03.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 10px;
    padding: 20px 20px;
    min-height: 430px;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: space-between;
    overflow: hidden;
    z-index: 1;
}

.service-detail__contact-cta::before{
    content: '';
    position: absolute;
    background-image: radial-gradient(at bottom right, var(--accent-color-5) 0%, var(--accent-color-2) 70%);
    inset: 0;
    opacity: 0.95;
    width: 100%;
    height: 100%;
    z-index: -1;
}

/* ======================= 
    35.0 Form Style
==========================*/

.form{
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form label{
    font-family: var(--font-family-text);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.8em;
    color: var(--text-color);
}

.form input,
.form textarea,
.form .dropdown-select{
    display: flex;
    flex-direction: row ;
    align-items: center;
    justify-content: space-between;
    font-family: var(--font-family-text);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.8em;
    background-color: var(--accent-color-3);
    color: var(--primary);
    padding: 15px 15px;
    border-radius: 10px;
    outline: none;
    border: none;
    box-shadow: none !important;
}

.form .dropdown-container{
    position: relative;
    width: 100%;
}


.form .dropdown-select i{
    color: var(--primary);
}


.form .dropdown-list {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background-color: transparent;
    color: var(--secondary);
    border: none;
    border-radius: 0;
    z-index: 10;
    margin-top: 5px;
    max-height: 200px;
    overflow-y: auto;
}

.form .dropdown-container.active .dropdown-list {
    display: block;
}

.form .dropdown-option {
    background-color: var(--primary);
    padding: 15px;
    border-radius: 0px 0px 0px 0px;
    border: none;
    color: var(--accent-color-2);
    cursor: pointer;
    font-family: var(--font-family-text);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.8em;
    transition: background-color 0.2s, color 0.2s;
}

.form .dropdown-option:hover {
    background-color: var(--accent-color-6);
    color: var(--accent-color-2);
}

.form .dropdown-option.selected {
    background-color: var(--accent-color-6);
    color: var(--accent-color-2);
}

.form .selected-text {
    color: var(--primary);
    transition: color 0.2s ease;
}

.form .selected-text.has-value {
    color: var(--primary);
}

.form input::placeholder,
.form textarea::placeholder{
    color: var(--accent-color-6);
}

.input-container{
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.input-important-marker{
    color: var(--accent-color);
}

.alert {
    display: flex;
    flex-direction: column;
    gap: 20px 20px;
    align-items: center;
    padding: 2em;
    border-radius: 6px;
    margin-bottom: 15px;
    background-color: var(--primary);
    color: var(--accent-color-2);
    border: 1px solid var(--accent-color-2);
}

.alert p{
    color: var(--accent-color-2);
}

.hidden{
    display: none;
}

/* ======================= 
    36.0 Accordion Style
==========================*/

.accordion-item{
    background-color: transparent;
    color: var(--primary);
    border: none;
}

.accordion-button{
    background-color: var(--accent-color-3);
    color: var(--primary);
    fill: var(--primary);
    font-family: var(--font-family-heading);
    font-size: 20px;
    font-weight: 500;
    line-height: 1.5em;
    padding: 18px;
    border-radius: 10px !important;
    box-shadow: none;
    outline: none;
    border: none;
}

.accordion-button.bg-accent-color-2{
    background-color: var(--accent-color-2);
}

.accordion-body{
    background-color: transparent;
    padding: 18px;
}

.accordion-button::after{
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white" class="bi bi-chevron-down" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z"/></svg>');
}

.accordion-button:not(.collapsed)::after {
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="white" class="bi bi-arrow-up" viewBox="0 0 16 16"><path fill-rule="evenodd" d="M8 2a.5.5 0 0 1 .5.5v10.793l3.146-3.147a.5.5 0 1 1 .708.708l-4 4a.5.5 0 0 1-.708 0l-4-4a.5.5 0 1 1 .708-.708L7.5 13.293V2.5A.5.5 0 0 1 8 2z"/></svg>');
}

.accordion-button:not(.collapsed){
    background-color: var(--accent-color-5);
    color: var(--primary);
    fill: var(--primary);
    box-shadow: none;
}

/* ======================= 
    37.0 List Style
==========================*/

.about__content-list{
    list-style: none;
    padding-left: 0;
    position: relative;
}

.about__content-list::before {
    content: "";
    position: absolute;
    top: 17px;
    bottom: 17px;
    left: 17px;
    width: 1px;
    background-color: var(--secondary);
}

.about__content-list li {
    position: relative;
    display: flex;
    align-items: center;
    padding: 18px 0 18px 50px;
    color: var(--primary);
    font-family: var(--font-family-heading);
    font-size: 20px;
    font-weight: 500;
    line-height: 1.5em;
}

.about__content-list li::before {
    content: "\f058";
    font-family: "Font Awesome 7 Free";
    font-weight: 900;
    position: absolute;
    left: 0;
    background-color: #5E4AE354;
    border-radius: 50%;
    color: var(--secondary);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 34px;
    height: 34px;
    font-size: 20px;
}

.about__content-list li:first-child::before {
    top: 0;
    transform: none;
}

.about__content-list li:last-child::before {
    top: 100%;
    transform: translateY(-100%);
}

.about__content-list li:not(:first-child):not(:last-child)::before {
    top: 50%;
    transform: translateY(-50%);
}


.about__content-list li:first-child{
    padding-top: 0px;
}

.about__content-list li:last-child{
    padding-bottom: 0px;
}

.pricing__list{
    list-style: none;
    padding-left: 0;
    margin-bottom: 0px;
    position: relative;
}

.pricing__list li{
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    font-family: var(--font-family-text);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.8em;
    color: var(--text-color);
    margin-bottom: 10px;
}

.pricing__list li::before{
    content: "\f14a";
    font-family: "Font Awesome 7 Free";
    font-weight: 900;
    color: var(--secondary);
    margin-right: 0.5em;
    font-size: 16px;
    display: inline-block;
}

.service-detail__content-list{
    list-style: none;
    padding-left: 0;
    position: relative;
}

.service-detail__content-list::before {
    content: "";
    position: absolute;
    top: 17px;
    bottom: 17px;
    left: 17px;
    width: 1px;
    background-color: var(--secondary);
}

.service-detail__content-list li {
    position: relative;
    display: flex;
    align-items: center;
    padding: 10px 0 10px 50px;
    color: var(--primary);
    font-family: var(--font-family-heading);
    font-size: 20px;
    font-weight: 500;
    line-height: 1.5em;
}

.service-detail__content-list li::before {
    content: "\f058";
    font-family: "Font Awesome 7 Free";
    font-weight: 900;
    position: absolute;
    left: 0;
    background-color: #5E4AE354;
    border-radius: 50%;
    color: var(--secondary);
    display: flex;
    justify-content: center;
    align-items: center;
    width: 34px;
    height: 34px;
    font-size: 20px;
}

.service-detail__content-list li:first-child::before {
    top: 0;
    transform: none;
}

.service-detail__content-list li:last-child::before {
    top: 100%;
    transform: translateY(-100%);
}

.service-detail__content-list li:not(:first-child):not(:last-child)::before {
    top: 50%;
    transform: translateY(-50%);
}


.service-detail__content-list li:first-child{
    padding-top: 0px;
}

.service-detail__content-list li:last-child{
    padding-bottom: 0px;
}

/* ======================= 
    38.0 Animation Style
==========================*/

.animation-box {
    opacity: 0;
    animation-fill-mode: forwards;
    animation-timing-function: cubic-bezier(0.25, 0.8, 0.25, 1);
    will-change: opacity, transform;
}

.anim-fast {
    --anim-duration: var(--anim-duration-fast);
}

.anim-normal {
    --anim-duration: var(--anim-duration-normal);
}

.anim-slow {
    --anim-duration: var(--anim-duration-slow);
}

.anim-delay-none {
    --anim-delay: var(--anim-delay-none);
}

.anim-delay-sm {
    --anim-delay: var(--anim-delay-sm);
}

.anim-delay-md {
    --anim-delay: var(--anim-delay-md);
}

/* ======================= 
    39.0 Icon Style
==========================*/

.what-we-do__icon{
    color: var(--accent-color);
    font-size: 65px;
}

.service-content__icon{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    background-color: var(--secondary);
    color: var(--accent-color);
    font-size: 40px;
    width: 64px;
    height: 64px;
    padding: 40px;
    border-radius: 50%;
}

.why-choose-us__icon{
    color: var(--accent-color);
    font-size: 42px;
}

.case-card__stat-icon{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 39px;
    line-height: 1;
    background-color: var(--secondary);
    color: var(--accent-color);
    width: 64px;
    height: 64px;
    padding: 40px;
    border-radius: 50%;
    text-align: center;
}

.team-social-icon{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 39px;
    line-height: 1;
    background-color: var(--accent-color);
    color: var(--accent-color-2);
    width: 30px;
    height: 30px;
    font-size: 12px;
    border-radius: 50%;
    text-align: center;
    transition: background-color 0.3s ease;
}

.team-social-icon:hover{
    background-color: var(--primary);
}

.pricing__header-icon{
    width: 55px;
    height: 55px;
    font-size: 28px;
    background-color: var(--accent-color);
    color: var(--accent-color-2);
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.single-post__quote-icon{
    font-size: 55px;
    color: var(--accent-color);
}

.contact-info__icon{
    color: var(--accent-color);
    font-size: 40px;
}

/* =======================
    40.0 Video & Modal Style
==========================*/

.request-loader {
    position: relative;
    width: 75px;
    height: auto;
    border-radius: 50% !important;
    border: none;
    background-color: var(--secondary);
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--primary);
    font-size: 18px;
    aspect-ratio: 1/1;
    transition: all 300ms ease-in-out;
    z-index: 2;
}

.request-loader:hover {
    border: none;
    color: var(--accent-color);
}

.request-loader::after,
.request-loader::before {
    opacity: 0.2;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    position: absolute;
    content: '';
    height: 100%;
    width: 100%;
    color: var(--secondary);
    border: 4px solid currentColor;
    border-radius: 50%;
    animation-name: ripple;
    animation-iteration-count: infinite;
    animation-timing-function: cubic-bezier(.65, 0, .34, 1);
    z-index: 0;
}

.request-loader::after {
    animation-delay: 0.5s;
    animation-duration: 3s;
}

.request-loader::before {
    animation-delay: 0.2s;
    animation-duration: 3s;
}

.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--accent-overlay);
    z-index: 1050;
    justify-content: center;
    align-items: center;
}

.my-modal {
    background-color: var(--accent-color-2);
    padding: 0;
    border-radius: none;
    position: relative;
    max-width: 90%;
    max-height: 90%;
    overflow: auto;
}

.my-modal iframe {
    aspect-ratio: 16/9;
    width: 100%;
    height: 80vh;
}

.my-close {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 16px;
    cursor: pointer;
    font-weight: bold;
    color: var(--primary);
}

.btn-close {
    position: absolute;
    right: 0px;
    top: 0px;
    background-color: var(--primary);
    padding: 16px 16px 16px 16px;
    opacity: 1;
    z-index: 2001;
}

/* ======================= 
    41.0 Spacing Style
==========================*/

/* 41.1 Flex Gap */

.flex-gap-0 { 
    gap: 0px; 
}
.flex-gap-1 { 
    gap: 10px; 
}
.flex-gap-2 { 
    gap: 20px; 
}
.flex-gap-3 { 
    gap: 30px; 
}
.flex-gap-4 { 
    gap: 40px ; 
}
.flex-gap-5 { 
    gap: 50px; 
}
.flex-gap-x-0 { 
    column-gap: 0px; 
}
.flex-gap-x-1 { 
    column-gap: 10px; 
}
.flex-gap-x-2 { 
    column-gap: 20px; 
}
.flex-gap-x-3 { 
    column-gap: 30px; 
}
.flex-gap-x-4 { 
    column-gap: 40px; 
}
.flex-gap-x-5 { 
    column-gap: 50px; 
}

.flex-gap-y-0 { 
    row-gap: 0px; 
}
.flex-gap-y-1 { 
    row-gap: 10px; 
}
.flex-gap-y-2 { 
    row-gap: 20px; 
}
.flex-gap-y-3 { 
    row-gap: 30px; 
}
.flex-gap-y-4 { 
    row-gap: 40px; 
}
.flex-gap-y-5 { 
    row-gap: 50px; 
}

/* 41.2 Grid Gap (row-gap & column-gap) */

.grid-gap-1{
    --bs-gutter-x: 10px;
    --bs-gutter-y: 10px;
}

.grid-gap-2{
    --bs-gutter-x: 20px;
    --bs-gutter-y: 20px;
}

.grid-gap-3{
    --bs-gutter-x: 30px;
    --bs-gutter-y: 30px;
}

.grid-gap-4{
    --bs-gutter-x: 40px;
    --bs-gutter-y: 40px;
}

.grid-gap-5{
    --bs-gutter-x: 50px;
    --bs-gutter-y: 50px;
}

.grid-gap-x-1 {
    --bs-gutter-x: 10px;
}
.grid-gap-x-2 {
    --bs-gutter-x: 20px;
}
.grid-gap-x-3 {
    --bs-gutter-x: 30px;
}
.grid-gap-x-4 {
    --bs-gutter-x: 40px;
}
.grid-gap-x-5 {
    --bs-gutter-x: 50px;
}

.grid-gap-y-1 {
    --bs-gutter-y: 10px;
}
.grid-gap-y-2 {
    --bs-gutter-y: 20px;
}
.grid-gap-y-3 {
    --bs-gutter-y: 30px;
}
.grid-gap-y-4 {
    --bs-gutter-y: 40px;
}
.grid-gap-y-5 {
    --bs-gutter-y: 50px;
}