/*

 Theme Name:   Twenty Twenty-Four Child

 Theme URI:    https://example.com/

 Description: Child theme for Twenty Twenty-Four

 Author:      Your Name

 Author URI:  https://example.com/

 Template:    twentytwentyfour

 Version:     1.0.0

*/



@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap');



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

   ROOT VARIABLES - GLOBAL THEME

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

:root {

    /* Fonts */

    --font-main: "Manrope", sans-serif;



    /* Core Colors */

    --color-primary: #198344;

    --color-secondary: #39b6f8;

    --color-green: #0b7b38;

    --color-yellow: #ffcc00;

    --color-yellow-hover: #ffe26a;

    --color-white: #ffffff;

    --color-dark: #1e1e2d;

    --color-muted: #555;

    --color-bg-light: rgba(11, 123, 56, 0.08);



    /* Text Colors (added for consistency) */

    --text-light: #ffffff;

    --text-dark: #1e1e2d;



    /* Transparency */

    --white-25: rgba(255, 255, 255, 0.25);

    --white-40: rgba(255, 255, 255, 0.40);

    --white-60: rgba(255, 255, 255, 0.60);

    --white-90: rgba(255, 255, 255, 0.90);

    --black-25: rgba(0, 0, 0, 0.25);

    --green-10: rgba(25, 131, 68, 0.1);



    /* Gradients */

    --grad-hero: linear-gradient(120deg, rgb(65, 175, 234), rgba(12, 120, 55, 0.5));

    --grad-soft: linear-gradient(135deg, #f8fffb 0%, #e8f7f0 100%);

    --grad-primary: linear-gradient(135deg, var(--color-primary), var(--color-secondary));

    --grad-btn: linear-gradient(135deg, #ff4d4d, #ff9900);



    /* Shadows */

    --shadow-glass: 0 10px 40px rgba(0, 0, 0, 0.10);

    --shadow-card: 0 10px 40px rgba(0, 0, 0, 0.08);

    --shadow-card-hover: 0 25px 60px rgba(0, 0, 0, 0.20);

    --shadow-btn-hover: 0 10px 20px rgba(0, 0, 0, 0.30);

    --shadow-tab-active: 0 15px 35px rgba(25, 131, 68, 0.40);



    /* Border Radius */

    --radius-main: 50px;

    --radius-card: 24px;

    --radius-tabs: 25px;



    /* Transitions */

    --transition: all 0.3s ease;

    --transition-long: all 0.5s ease;

}





p {

    margin: 0px;

}



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

   RESET & BASE

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

* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



body {

    font-family: var(--font-main);

    background: var(--color-bg-light);

    overflow-x: hidden;

    color: var(--color-dark);

}



section {

    padding: 60px 0;

}



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

   TYPOGRAPHY

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

h2,

.section-title {

    font-weight: 800;

    background: var(--grad-primary);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;

}



.section-title {

    font-size: 4rem;

    text-align: center;

    margin-bottom: 60px;

    position: relative;

}



.section-title::after {

    content: '';

    position: absolute;

    bottom: -15px;

    left: 50%;

    transform: translateX(-50%);

    width: 150px;

    height: 8px;

    background: var(--grad-primary);

    border-radius: 50px;

}



.section-subtitle {

    max-width: 800px;

    margin: 0 auto 40px;

    text-align: center;

    font-size: 1.1rem;

    opacity: 0.9;

}



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

   NAVBAR

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

.navbar {

    position: fixed;

    top: 0;

    width: 100%;

    z-index: 999;

    background: transparent !important;

    transition: var(--transition);

    padding: 20px 0;

}



.navbar.scrolled {

    background: rgba(255, 255, 255, 0.95) !important;

    backdrop-filter: blur(10px);

    box-shadow: 0 3px 10px rgba(240, 240, 240, 0.57);

    padding: 8px 0 !important;

}



.nav_bar li a,

.scrolled li a {

    margin-right: 30px;

    white-space: nowrap;

    font-size: 24px;

    font-weight: 500;

    color: var(--text-light) !important;

    transition: var(--transition);

}



.scrolled li a {

    color: var(--color-green) !important;

}



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

   BUTTONS

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

.btn-main {

    background: var(--grad-btn);

    color: var(--text-light);

    border: none;

    padding: 10px 30px;

    font-weight: 700;

    border-radius: var(--radius-main);

    position: relative;

    overflow: hidden;

    cursor: pointer;

    transition: var(--transition);

}



.btn-main span {

    position: relative;

    z-index: 2;

}



.btn-main:hover {

    transform: translateY(-3px);

    box-shadow: var(--shadow-btn-hover);

}



.btn-main:hover span {

    opacity: 0;

    transform: translateY(-20px);

}



.btn-main.fx-slide::before {

    content: "BUY TICKET";

    position: absolute;

    top: 0;

    left: -100%;

    width: 100%;

    height: 100%;

    background: var(--grad-btn);

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--text-light);

    transition: 0.4s ease;

    z-index: 1;

}



.btn-main.fx-slide:hover::before {

    left: 0;

}



.btn-ticket {

    background: var(--color-yellow);

    color: var(--text-dark);

    padding: 12px 30px;

    font-weight: 700;

    border-radius: var(--radius-main);

    text-decoration: none;

    display: inline-block;

    transition: var(--transition);

}



.btn-ticket:hover {

    background: var(--color-yellow-hover);

}







.cta-btn,

.about-btn {

    background: var(--grad-primary);

    color: var(--text-light);

    padding: 12px 30px;

    border-radius: var(--radius-main);

    font-weight: 700;

    box-shadow: 0 10px 30px rgba(25, 131, 68, 0.4);

    transition: var(--transition);

}



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

   HERO SECTION

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

.video_banner {

    position: relative;

    width: 100%;

    height: 80vh;

    overflow: hidden;

}



.video_banner video {

    width: 100%;

    height: 100%;

    object-fit: cover;

    position: absolute;

    inset: 0;

    z-index: 1;

}



.video_overlay {

    position: absolute;

    inset: 0;

    z-index: 2;

    background: var(--grad-hero);

}



.video_content {

    position: absolute;

    top: 40%;

    left: 50%;

    transform: translate(-50%, -50%);

    z-index: 3;

    text-align: center;

    color: var(--text-light);

    width: 100%;

    max-width: 1200px;

    padding: 0 20px;

}



.video_content h3 {

    font-size: 20px;

    font-weight: 300;

    margin-bottom: 10px;

}



.video_content h1 {

    font-size: 48px;

    font-weight: 900;

    margin-bottom: 18px;

    line-height: 1.1;

}



.video_content p {

    font-size: 18px;

    margin-bottom: 30px;

}



.hero_btns {

    display: flex;

    justify-content: center;

    gap: 20px;

    flex-wrap: wrap;

}

.wp-block-site-logo.is-default-size img {

    height: auto;

    width: 90px;

}

/* Countdown Box */

.bottom_countdown_box {

    position: absolute;

    bottom: 25px;

    left: 50%;

    transform: translateX(-50%);

    z-index: 10;

    max-width: 1200px;

    width: 100%;

    padding: 20px;

    border: 2px solid var(--white-90);

    border-radius: var(--radius-main);

    text-align: center;

    color: var(--text-light);

    backdrop-filter: blur(5px);

    background: var(--black-25);

}



.bottom_countdown_box h4 {

    font-size: 38px;

    font-weight: 600;

    margin-bottom: 15px;

}



.timer {

    display: flex;

    justify-content: center;

    gap: 40px;

    flex-wrap: wrap;

}



.timer div span {

    font-size: 76px;

    font-weight: 700;

    color: var(--text-light);

}



.timer div p {

    font-size: 24px;

    letter-spacing: 1px;

    color: var(--text-light);

}



.event_location {

    font-size: 26px;

    opacity: 0.9;

    margin-top: 8px;

    color: var(--text-light);

}



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

   GLASS TABS

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

.glassy-tabs {

    display: flex;

    flex-wrap: wrap;

    justify-content: center;

    gap: 15px;

    padding: 20px;

    background: var(--white-25);

    backdrop-filter: blur(15px);

    border: 1px solid var(--white-40);

    border-radius: var(--radius-tabs);

    box-shadow: var(--shadow-glass);

    max-width: fit-content;

    margin: 0 auto 60px;

}



.glassy-tabs .nav-link {

    padding: 16px 32px;

    border-radius: var(--radius-main);

    font-weight: 600;

    color: var(--color-dark);

    background: var(--white-60);

    border: none;

    transition: var(--transition-long);

}



.glassy-tabs .nav-link.active {

    background: var(--grad-primary);

    color: #fff;

    box-shadow: var(--shadow-tab-active);

    transform: translateY(-6px);

}



.glassy-tabs .nav-link:hover:not(.active) {

    background: rgba(25, 131, 68, 0.15);

    transform: translateY(-3px);

}



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

   CARDS (Service, Benefit, Software)

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

.service-card,

.benefit-card {

    background: var(--grad-soft);

    border-radius: var(--radius-card);

    padding: 32px;

    height: 100%;

    box-shadow: var(--shadow-card);

    transition: var(--transition-long);

    position: relative;

    overflow: hidden;

}



.service-card::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    width: 6px;

    height: 100%;

    background: var(--grad-primary);

    opacity: 0;

    transition: 0.4s ease;

}



.service-card:hover,

.benefit-card:hover {

    transform: translateY(-12px);

    box-shadow: var(--shadow-card-hover);

}



.service-card:hover::before {

    opacity: 1;

}



.service-card i,

.gradient-icon i {

    font-size: 3rem;

    margin-bottom: 20px;

    background: var(--color-yellow-hover);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;

}



.gradient-icon {

    width: 90px;

    height: 90px;

    background: var(--grad-primary);

    border-radius: 50%;

    display: grid;

    place-items: center;

    margin: 0 auto 1.5rem;

}



.gradient-icon i {

    font-size: 2.8rem;

    color: var(--text-light);

}



.service-card h3,

.benefit-card h3 {

    font-size: 1.6rem;

    font-weight: 700;

    color: var(--text-dark);

    margin-bottom: 15px;

}



.service-card p {

    color: var(--color-muted);

    line-height: 1.8;

}



.read-more {

    color: var(--color-yellow);

    font-weight: 600;

    text-decoration: none;

    display: inline-flex;

    align-items: center;

    gap: 8px;

    transition: var(--transition);

}



.read-more:hover {

    color: var(--color-yellow-hover);

    gap: 12px;

}



.circle-effect {

    position: absolute;

    top: -50px;

    right: -50px;

    width: 150px;

    height: 150px;

    background: radial-gradient(circle, var(--green-10), transparent 70%);

    border-radius: 50%;

}



/* Software Cards */

.thesoftware_use {

    padding: 60px 0;

    position: relative;

    overflow: hidden;

}



.thesoftware_use::before {

    content: '';

    position: absolute;

    inset: 0;

    /* background: url(data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'><polygon fill='var(--green-10)' points='0,100 100,0 100,100'/></svg>); */

    background-size: cover;

    pointer-events: none;

    background: repeating-radial-gradient(#67beefb8, transparent 100px);

}



.software-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));

    gap: 40px;

    max-width: 1200px;

    margin: 0 auto;

    padding: 0 20px;

}



.software-card {

    background: var(--grad-primary);

    backdrop-filter: blur(15px);

    border-radius: var(--radius-card);

    padding: 30px 20px;

    text-align: center;

    transition: var(--transition-long);

    position: relative;

    overflow: hidden;

}



.software-card::before {

    content: '';

    position: absolute;

    inset: 0;

    background: var(--grad-primary);

    opacity: 0;

    transition: 0.6s ease;

    border-radius: var(--radius-card);

}



.software-card:hover {

    transform: translateY(-20px) scale(1.05);

    box-shadow: 0 30px 80px rgba(25, 131, 68, 0.4);

}



.software-card:hover::before {

    opacity: 0.15;

}



.software-card img {

    height: 70px;

    width: auto;

    margin-bottom: 20px;

    transition: var(--transition);

}



.software-card:hover img {

    transform: scale(1.15);

}



.software-card h4 {

    color: #ff4d4d;

    font-size: 1.7rem;

    font-weight: 800;

}



/* Section Backgrounds */

.outsource_bookkeeping,

.our-gallery {

    background: var(--grad-soft);

}



.our-gallery {

    background: #f8fffb;

}



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

   ABOUT, TESTIMONIALS & FOOTER

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



/* Homepage navbar */

.home .site-navbar,

.front-page .site-navbar {

  background: transparent;

  margin-bottom: 0;

}



/* All other pages */

/* .page:not(.home) .site-navbar {

  background-color: #000 !important;

  margin-bottom: 15px;

} */





.about-us,

.testimonials {

    background: linear-gradient(135deg, #0b1e1a 0%, #001510 100%);

    position: relative;

    overflow: hidden;

    color: var(--text-light);

}



.pattern-bg {

    position: absolute;

    inset: 0;

    opacity: 0.05;

    background: url('https://www.transparenttextures.com/patterns/carbon-fibre.png') cover;

}



.about-title,

.testimonials-title {

    background: var(--grad-primary);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;

}



.testimonials-title {

    background: linear-gradient(135deg, #39b6f8, #198344);

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    background-clip: text;

}



.bg-glow {

    position: absolute;

    border-radius: 50%;

}



.bg-glow-1 {

    top: -100px;

    right: -100px;

    width: 600px;

    height: 600px;

    background: radial-gradient(circle, rgba(57, 182, 248, 0.15), transparent 70%);

}



.bg-glow-2 {

    bottom: -150px;

    left: -150px;

    width: 700px;

    height: 700px;

    background: radial-gradient(circle, rgba(25, 131, 68, 0.15), transparent 70%);

}



.testimonial-card {

    padding: 3rem;

    border-radius: 1.5rem;

    color: #fff;

    height: 100%;

    position: relative;

    transition: var(--transition-long);

}



.testimonial-card:hover {

    transform: translateY(-15px);

    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);

}



.glass-card {

    background: rgba(255, 255, 255, 0.07);

    backdrop-filter: blur(15px);

    border: 1px solid rgba(255, 255, 255, 0.1);

}



.gradient-card {

    background: linear-gradient(135deg, rgba(25, 131, 68, 0.6), rgba(57, 182, 248, 0.6));

    backdrop-filter: blur(15px);

}



.quote-icon {

    position: absolute;

    top: 10px;

    right: 10px;

    font-size: 4rem;

    opacity: 0.1;

    color: #fff;

}



/* Gallery */

.gallery-img {

    height: 280px;

    object-fit: cover;

    transition: all 0.6s ease;

}



.gallery-item:hover .gallery-img {

    transform: scale(1.15) rotate(3deg);

}



.gallery-item:hover {

    transform: scale(1.05);

    box-shadow: 0 20px 40px rgba(25, 131, 68, 0.25);

}



.client-img-large {

    width: 75px;

    border-radius: 50%;

    margin-right: 20px;

}



/* Image */

.about-main-img {

    max-width: 100%;

    border-radius: 1.5rem;

}



/* ===== Floating Badge Circle ===== */

.badge-circle {

    position: absolute;

    top: -20px;

    right: -20px;

    width: 90px;

    height: 90px;

    background: var(--color-primary);

    color: var(--color-white);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);

    z-index: 2;

}



.badge-number {

    font-size: 24px;

    font-weight: 800;

    line-height: 1;

}



.badge-label {

    font-size: 12px;

    letter-spacing: 1px;

}



/* ===== Floating Badge Pill ===== */

.badge-pill {

    position: absolute;

    bottom: -15px;

    left: -20px;

    background: var(--color-yellow);

    color: var(--text-light);

    padding: 10px 18px;

    border-radius: 50px;

    font-size: 14px;

    font-weight: 600;

    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.25);

    z-index: 2;

}



.footer-brand img {

    width: 220px;

    margin: 0 auto;

}

.uagb-tabs-list {

	text-decoration: navajowhite;

}

.wp-block-button__link.uagb-text-link {

  text-decoration: none;

  color: #fdd21f;

}

.social-links {

    display: flex;

    gap: 14px;

}



/* Base Icon */

.social-links .social-icon {

    width: 44px;

    height: 44px;

    border-radius: 12px;

    display: flex;

    align-items: center;

    justify-content: center;

    text-decoration: none;

    font-size: 17px;

    color: var(--black-25);

    background: rgba(255, 255, 255, 0.15);

    border: 1px solid rgba(255, 255, 255, 0.2);

    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;

}



/* Hover Effect */

.social-links .social-icon:hover {

    transform: translateY(-4px);

    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.25);

    color: #fff;

}



/* Brand Hover Colors */

.social-icon.fb:hover {

    background: #1877f2;

}



.social-icon.tw:hover {

    background: #1da1f2;

}



.social-icon.ig:hover {

    background: #e1306c;

}



.social-icon.yb:hover {

    background: #ff0000;

}



.social-icon.ln:hover {

    background: #0077b5;

}



.footer-title {

    font-size: 29px;

    font-weight: 800;

    white-space: nowrap;

    color: var(--color-primary);

}



.footer-list {

    padding-left: 0;

}



.footer-list li {

    padding: 5px 0;

    list-style: none;

}



.footer-list li a {

    position: relative;

    text-decoration: none;

    font-size: 17px;

    font-weight: 400;

    color: var(--color-dark);

    display: inline-block;

    transition: color 0.3s ease;

}



/* Underline hover effect */

.footer-list li a::after {

    content: "";

    position: absolute;

    left: 0;

    bottom: -4px;

    width: 0;

    height: 2px;

    background: var(--grad-primary);

    transition: width 0.3s ease;

}



.footer-list li a:hover {

    color: var(--primary);

}



.footer-list li a:hover::after {

    width: 100%;

}



.footer-contact-item {

    display: flex;

    gap: 10px;

    margin: 10px 0;

}



.footer-contact-item a {

    text-decoration: none;

    color: var(--color-green);

}



.footer-link {

    text-decoration: none;

    color: var(--color-green) !important;

}





/* About Sekwez start */



.about_banner {

    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(/wp-content/uploads/2026/02/business-team-working-meeting-brainstorming-concept-1-1-scaled.jpg) center/cover no-repeat fixed;

    height: 100vh;

    display: flex;

    justify-content: center;

    align-items: center;



}



/* Content Box */

.about_content {

    max-width: 900px;

    color: var(--color-white);

}



/* Small Heading */

.about_content h3 {

    font-size: 18px;

    font-weight: 500;

    letter-spacing: 1px;

    text-transform: uppercase;

    color: var(--color-green);

    margin-bottom: 15px;

}



/* Main Heading */

.about_content h1 {

    font-size: clamp(36px, 5vw, 106px);

    font-weight: 800;

    margin-bottom: 20px;

    line-height: 1.2;

}



/* Description */

.about_content p {

    font-size: 18px;

    line-height: 1.7;

    color: var(--white-40);

    margin-bottom: 35px;

}



.committed_groupaccountingtxt p {

    font-size: 18px;

    font-weight: 300;

    color: var(--text-dark);



}



/* About Sekwez start */



.services_banner {

    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(/wp-content/uploads/2025/12/modern-technologies-makes-life-simpler-young-people-working-call-center-new-deals-is-coming.jpg) center/cover no-repeat fixed;

    height: 100vh;

    display: flex;

    justify-content: center;

    align-items: center;

}



.banner-heading {

    font-size: clamp(36px, 5vw, 86px) !important;

    font-weight: 800;

    margin-bottom: 20px;

    line-height: 1.2;

}



/* Service Section */

.service_card {

    background: var(--black-25);

}



/* Card */

.service_card .card {

    border-radius: 18px;

    transition: 0.35s ease;

    position: relative;

    overflow: hidden;

}



/* Hover Action */

.service_card .card:hover {

    transform: translateY(-10px);

    box-shadow: 0 18px 35px rgba(13, 110, 253, .2);

}



/* Icon */

.service_card .icon {

    width: 70px;

    height: 70px;

    margin: auto;

    border-radius: 50%;

    background: var(--color-secondary);

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--color-dark);

    transition: 0.35s ease;

}



.service_card .card:hover .icon {

    transform: scale(1.15) rotate(8deg);

}



/* Title */

.service_card .card-title {

    font-size: 32px;

    font-weight: 800;

    letter-spacing: 1px;

    text-transform: uppercase;

    color: var(--color-primary);

    margin-bottom: 15px;

}



.contact_banner {

    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(/wp-content/uploads/2025/12/photo-1552664730-d307ca884978.jpg) center/cover no-repeat fixed;

    height: 100vh;

    display: flex;

    justify-content: center;

    align-items: center;

}

  /* Contact Section */

        .contact_section {

            padding: 6rem 0;

            background-color: white;

        }



        .contact_wrapper {

            display: flex;

            flex-wrap: wrap;

            gap: 3rem;

        }



        .contact_info {

            flex: 1;

            min-width: 300px;

            background: #f8f9fa;

            border-radius: 15px;

            padding: 3rem;

            box-shadow: var(--shadow);

        }



        .contact_form_container {

            flex: 2;

            min-width: 300px;

        }



        .contact_form {

            background: white;

            border-radius: 15px;

            padding: 3rem;

            box-shadow: var(--shadow);

        }



        .contact_title {

            font-size: 2.2rem;

            font-weight: 700;

            color: var(--dark-color);

            margin-bottom: 1.5rem;

            position: relative;

        }



        .contact_title::after {

            content: '';

            position: absolute;

            left: 0;

            bottom: -10px;

            width: 60px;

            height: 4px;

            background: linear-gradient(to right, var(--primary-color), var(--accent-color));

            border-radius: 2px;

        }



        .contact_subtitle {

            color: var(--secondary-color);

            margin-bottom: 2.5rem;

            font-size: 1.1rem;

            line-height: 1.6;

        }



        /* Contact Info Cards */

        .contact_item {

            display: flex;

            align-items: flex-start;

            margin-bottom: 2.5rem;

            padding: 1.5rem;

            background: white;

            border-radius: 10px;

            transition: all 0.3s;

            border-left: 4px solid var(--primary-color);

        }



        .contact_item:hover {

            transform: translateY(-5px);

            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);

        }



        .contact_icon {

            width: 50px;

            height: 50px;

            background: linear-gradient(135deg, var(--primary-color), #0a58ca);

            border-radius: 50%;

            display: flex;

            align-items: center;

            justify-content: center;

            margin-right: 1.5rem;

            flex-shrink: 0;

        }



        .contact_icon i {

            font-size: 1.5rem;

            color: white;

        }



        .contact_details h4 {

            font-size: 1.3rem;

            font-weight: 600;

            margin-bottom: 0.5rem;

            color: var(--dark-color);

        }



        .contact_details p {

            color: var(--secondary-color);

            margin-bottom: 0.25rem;

        }



        .contact_details small {

            color: #868e96;

            font-size: 0.9rem;

        }

.contact_title {

    font-size: 2.2rem 35.2px;

    font-weight: 700;

    color: var(--dark-color);

    margin-bottom: 1.5rem;

    position: relative;

}

.contact_title::after {

    content: '';

    position: absolute;

    left: 0;

    bottom: -10px;

    width: 60px;

    height: 4px;

    background: var(--grad-btn);

    border-radius: 2px;

}

.contact_subtitle {

    color: var(--color-primary);

    margin-bottom: 2.5rem;

    font-size: 1.1rem;

    line-height: 1.6;

}

.contact_wrapper {

    display: flex;

    flex-wrap: wrap;

    gap: 3rem;

}               

.contact_info {

    flex: 1;

    min-width: 300px;

    background: #f8f9fa;

    border-radius: 15px;

    padding: 3rem;

    box-shadow: var(--shadow);

}



.contact_title {

    font-size: 2.2rem;

    font-weight: 700;

    color: var(--dark-color);

    margin-bottom: 1.5rem;

    position: relative;

}

.contact_item {

    display: flex;

    align-items: flex-start;

    margin-bottom: 2.5rem;

    padding: 1.5rem;

    background: white;

    border-radius: 10px;

    transition: all 0.3s;

    border-left: 4px solid var(--color-secondary);

}

.contact_icon {

    width: 50px;

    height: 50px;

    background: var(--color-green);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-right: 1.5rem;

    flex-shrink: 0;

}

.contact_icon i {

    font-size: 1.5rem;

    color: white;

}

.contact_details h4 {

    font-size: 1.3rem;

    font-weight: 600;

    margin-bottom: 0.5rem;

    color: var(--color-dark);

}

.contact_details p {

    color: var(--black-25);

    margin-bottom: 0.25rem;

}

.contact_details small {

    color: #868e96;

    font-size: 0.9rem;

}

.contact_form {

    background: white;

    border-radius: 15px;

    padding: 3rem;

    box-shadow: var(--shadow);

}

.map_container {

    border-radius: 15px;

    overflow: hidden;

    box-shadow: var(--shadow-card);

    height: 450px;

}

.map_placeholder{

    width: 100%;

    height: 100%;

    background: linear-gradient(rgba(13, 110, 253, 0.8), rgba(32, 201, 151, 0.8)), url(../image/map.jpg);

    background-size: cover;

    background-position: center;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #000;

    font-size: 1.5rem;

    font-weight: 600;

}

.map_placeholdertxt h3{

    font-weight: 900;

    font-size: 2rem;

    color: var(--white-25);

}

.map_placeholdertxt p{

    font-weight: 300;

    font-size: 1rem;

    color: #000;

}

.faq_section{

    background-color: var(--green-10);

}

.faq_item {

    margin-bottom: 1.5rem;

    border-radius: 10px;

    overflow: hidden;

    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.05);

}

.faq_question {

    padding: 1.5rem;

    background: #f8f9fa;

    font-weight: 600;

    cursor: pointer;

    display: flex;

    justify-content: space-between;

    align-items: center;

    transition: all 0.3s;

}

.faq_answer {

    padding: 1.5rem;

    background: white;

    border-top: 1px solid #dee2e6;

}

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

   RESPONSIVE

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

@media (max-width: 768px) {

    .section-title {

        font-size: 2.8rem;

    }



    .glassy-tabs .nav-link {

        padding: 12px 20px;

        font-size: 1rem;

    }



    .timer {

        gap: 20px;

    }



    .timer div span {

        font-size: 50px;

    }



    .video_content h1 {

        font-size: 36px;

    }

}

.test_class {

  border: 1px solid #ccc;

  border-radius: 15px;

  box-shadow: 0 10px 15px rgba(0 , 0 ,255 ,0.5);

}

.wp-block-uagb-container.uagb-block-b33b95e9 {

  margin-top: -230px;

}
.custom_single_img.wp-block-template-part img {
    display: block;
    width: 100%;
    height: 600px;
}
/* Keep post tags inside content container */
/* Keep post tags aligned with content width */
.single-post .taxonomy-post_tag.wp-block-post-terms {
    max-width: var(--wp--style--global--content-size);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--wp--style--global--gap, 1rem);
    padding-right: var(--wp--style--global--gap, 1rem);
    box-sizing: border-box;
}
.single-post .wp-block-post-terms {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}