:root {

    --dark: #000;

    --white: #fff;

    --text-color: #555555;

    --mont-normal: 'Montserrat Thin';

    --mont-light: 'Montserrat-T';

    --mont-italic: 'Montserrat-TI';

    --playfairdisplay: 'Playfair Display';

    --roboto-normal: 'Roboto-R';

    --roboto-bold: 'Roboto-M';

    

}

@font-face {

    font-family: 'Montserrat Thin';

    src: url('../fonts/MontserratThin-Thin.ttf') format('truetype');

    font-weight: 100;

    font-style: normal;

    font-display: swap;

}

@font-face {

    font-family: 'Montserrat-T';

    src: url('../fonts/Montserrat-Thin.ttf') format('truetype');

    font-weight: 100;

    font-style: normal;

    font-display: swap;

}

@font-face {

    font-family: 'Montserrat-TI';

    src: url('../fonts/Montserrat-ThinItalic.ttf') format('truetype');

    font-weight: 100;

    font-style: italic;

    font-display: swap;

}

@font-face {

    font-family: 'Roboto-R';

    src: url('../fonts/Roboto-Regular.ttf') format('truetype');

    font-weight: normal;

    font-style: normal;

    font-display: swap;

}

@font-face {

    font-family: 'Roboto-M';

    src: url('../fonts/Roboto-Medium.ttf') format('truetype');

    font-weight: 500;

    font-style: normal;

    font-display: swap;

}

@font-face {

    font-family: 'Playfair Display';

    src: url('../fonts/PlayfairDisplay-Regular.ttf') format('truetype');

    font-weight: normal;

    font-style: normal;

    font-display: swap;

}



* {outline: none;}

::-webkit-scrollbar {

    width: 8px !important;

}

::-webkit-scrollbar-thumb {

    background: #9e9e9e;

    border-radius: 2px;

    height: 50px;

}

body {

    font-family: 'montserrat-normal', sans-serif;

    font-optical-sizing: auto;

    font-weight: 400;

    font-style: normal;

    background-color: #fff;

    overflow-x: hidden;

}

p {font-weight: 400;}

/* .container {

  max-width: 1200px;

  margin: 0 auto;

  padding: 0 20px;

} */

ul {list-style: none;padding: 0;}

/* Header Styles */

.header {

  position: fixed;

  top: 0;

  left: 0;

  right: 0;

  background-color: #000;

  backdrop-filter: blur(10px);

  z-index: 1000;

  padding: 20px 0;

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

}



.header .container {

  display: flex;

  align-items: center;

  justify-content: space-between;

}

.header.scrolled {

    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);

    transition: all 0.3s ease;

}

/* scroll header css */

/* .header.scrolled {padding: 10px;} */

.header.scrolled .main-logo {max-width: 70px;transition: all 0.3s ease-out;}

.header.scrolled .cta-button {padding: 12px 14px;font-size: 14px;}

.header.scrolled .nav-list {margin-bottom: 0;}





/* Logo Styles */

.logo {

  display: flex;

  align-items: center;

  gap: 15px;

}

.main-logo {

    max-width: 100px;

}

.logo-icon {

  width: 60px;

  display: flex;

  align-items: center;

  justify-content: center;

}



.logo-text {

  font-size: 24px;

  font-weight: bold;

  color: #a8a8a8;

}



.logo-info {

  display: flex;

  flex-direction: column;

}



.company-name {

  font-size: 16px;

  font-weight: bold;

  line-height: 1.2;

  letter-spacing: 1px;

}



.tagline {

  font-size: 10px;

  letter-spacing: 2px;

  opacity: 0.8;

  margin-top: 2px;

}



/* Navigation Styles */

.nav-list {

  display: flex;

  list-style: none;

  gap: 40px;

  align-items: center;

}



.nav-link {

  color: #ffffff;

  text-decoration: none;

  font-size: 14px;

  font-weight: 500;

  letter-spacing: 1px;

  transition: opacity 0.3s ease;

  position: relative;

}



.nav-link:hover,

.nav-link.active {

  opacity: 1;

  color: #edeff0;

}



.nav-link:not(.active) {

  opacity: 0.7;

}



.nav-link.active::after {

  content: "";

  position: absolute;

  bottom: -5px;

  left: 0;

  right: 0;

  height: 1px;

  background-color: #ffffff;

}



/* CTA Button */

.cta-button {

    background-color: var(--white);

    color: var(--dark);

    padding: 16px 22px;

    text-decoration: none;

    font-size: 16px;

    font-family: var(--mont-light);

    letter-spacing: 2px;

    border-radius: 2px;

    transition: background-color 0.3s ease;

    border: 1px solid transparent;

    font-weight: bold;

}



.cta-button:hover {

    background-color: var(--dark);

    color: var(--white);

    border-color:  var(--white);

    

}



/* Mobile Menu Toggle */

.mobile-menu-toggle {

  display: none;

  flex-direction: column;

  cursor: pointer;

  gap: 4px;

}



.mobile-menu-toggle span {

  width: 25px;

  height: 2px;

  background-color: #ffffff;

  transition: all 0.3s ease;

}



/* Main Content */

.main {

    margin-top: 90px;

    min-height: calc(100vh - 90px);

    /* display: flex;

    align-items: center;

    justify-content: center; */

}



/* ==== video slider ------- */

.video-wrapper {

    position: relative;

    width: 100%;

    height: 70vh;

    overflow: hidden;

}



.bg-video {

    position: absolute;

    top: 50%;

    left: 50%;

    min-width: 100%;

    min-height: 100%;

    width: auto;

    height: auto;

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

    z-index: 0;

    object-fit: cover;

}



.carousel-caption {

    position: absolute;

    z-index: 1;

    color: white;

}



.hp-silder .showlogo .slider-logo {width: 180px;}

.hp-silder .carousel-caption {

    top: 50%;

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

    display: flex;

    flex-direction: column;

    justify-content: center;

}

/* ==== video slider ------- */

.hero-section {

  width: 100%;

  height: 100%;

  display: flex;

  align-items: center;

  justify-content: center;

  min-height: 60vh;

}

.hp-silder .carousel-inner {position: relative;}

.hp-silder .carousel-inner::after{

        content: '';

    display: block;

    position: absolute;

    top: 0;

    bottom: 0;

    left: 0;

    right: 0;

    background: #0b0909;

    opacity: 0.7;

}

.hp-silder .carousel-caption {z-index: 1;}

.hp-silder .montserrat {font-family: var(--mont-normal);font-size: 1.5em;text-transform: uppercase;font-weight: bold;}

.hp-silder .playfairdisplay {font-family: var(--playfairdisplay);font-size: 1.5em;}



/* --------- Why Choose Us section styles ---------- */

.why-choose-us {

    position: relative;

    width: 100%;

    /* min-height: calc(100vh - 90px - 120px); */

    background-image: url("../images/why-choose-us.jpg");

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    display: flex;

    align-items: center;

    justify-content: center;

}



.why-choose-us-overlay {

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background-color: rgba(0, 0, 0, 0.7);

    z-index: 1;

}



.why-choose-us-content {

    position: relative;

    z-index: 2;

    text-align: center;

    padding: 60px 20px;

}



.why-choose-us-title {

    font-size: 4rem;

    font-weight: 300;

    letter-spacing: 8px;

    margin-bottom: 20px;

    color: #ffffff;

    font-family: var(--playfairdisplay);

}



.title-underline {

    width: 80px;

    height: 2px;

    background-color: #ffffff;

    margin: 0 auto 40px;

}



.why-choose-us-description {

    font-size: 1.1rem;

    line-height: 1.8;

    color: #ffffff;

    margin-left: auto;

    margin-right: auto;

    font-weight: 300;

    font-family: var(--mont-light);

}



.statistics {

    display: flex;

    justify-content: center;

    gap: 120px;

    margin-bottom: 60px;

}



.stat-item {

    text-align: center;

    color: #ffffff;

}



.stat-number {

    font-size: 4.5rem;

    font-weight: 300;

    margin-bottom: 15px;

    letter-spacing: 2px;

}



.stat-label {

    display: flex;

    flex-direction: column;

    font-size: 0.9rem;

    letter-spacing: 2px;

    font-weight: 400;

    line-height: 1.4;

}



.action-buttons {

    display: flex;

    justify-content: center;

    gap: 30px;

}



.action-btn {

    padding: 15px 35px;

    border: 2px solid #ffffff;

    background-color: transparent;

    color: #ffffff;

    text-decoration: none;

    font-size: 0.9rem;

    font-weight: 500;

    letter-spacing: 2px;

    transition: all 0.3s ease;

    position: relative;

    display: inline-block;

}



.action-btn:hover {

    background-color: #ffffff;

    color: #000000;

}



.action-btn::after {

    content: "";

    position: absolute;

    bottom: -8px;

    right: -8px;

    width: 15px;

    height: 15px;

    border-right: 2px solid #ffffff;

    border-bottom: 2px solid #ffffff;

    transition: all 0.3s ease;

}



.action-btn:hover::after {

    border-color: #000000;

}

.counter-wrapper {

    display: flex;

    gap: 100px;

    justify-content: center;

    flex-wrap: wrap;

    margin-block: 3rem;

}

.counter-wrapper .counter-box {

    text-align: center;

}

.counter-wrapper .counter {

    font-size: 80px;

    font-weight: 500;

    font-family: var(--playfairdisplay);

}

.counter-wrapper span.tag {font-size: 60px;font-family: var(--mont-light);}

.counter-wrapper .label {

    font-size: 16px;

    margin-top: 10px;

    line-height: 1.3;

    color: #ccc;

    text-transform: uppercase;

}

/* # */



/* Brand Partnerships Section */

.brand-partnerships {

    display: flex;

    /* min-height: 100vh; */

    background-color: #f5f5f5;

}



.brand-slider-container {

    flex: 1;

    background-color: #000000;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    position: relative;

    padding: 60px 40px;

}



.brand-slider {

    width: 100%;

    max-width: 500px;

    height: 400px;

    display: flex;

    align-items: center;

    justify-content: center;

}



.brand-slide {

    display: grid;

    grid-template-columns: 1fr 1fr;

    grid-template-rows: 1fr 1fr 1fr;

    gap: 40px;

    width: 100%;

    height: 100%;

    opacity: 0;

    transform: translateX(50px);

    transition: all 0.6s ease;

}



.brand-slide.active {

    opacity: 1;

    transform: translateX(0);

}



.brand-logo {

    display: flex;

    align-items: center;

    justify-content: center;

    color: #ffffff;

    font-size: 1.8rem;

    font-weight: 300;

    letter-spacing: 2px;

    text-transform: uppercase;

}



.brand-logo.circle {

    background-color: #ffffff;

    color: #000000;

    border-radius: 50%;

    width: 120px;

    height: 120px;

    font-weight: 600;

    font-size: 1.5rem;

    margin: 0 auto;

}



.brand-logo sup {

    font-size: 0.8rem;

    margin-left: 2px;

}



.slider-controls {

    /* position: absolute;

    bottom: 40px;

    left: 50%;

    transform: translateX(-50%); */

    display: flex;

    gap: 20px;

}



.slider-btn {

    background: none;

    border: 2px solid #ffffff;

    color: #ffffff;

    width: 50px;

    height: 50px;

    border-radius: 50%;

    cursor: pointer;

    display: flex;

    align-items: center;

    justify-content: center;

    transition: all 0.3s ease;

    font-size: 1.2rem;

}



.slider-btn:hover {

    background-color: #ffffff;

    color: #000000;

}



.roster-btn {

    display: inline-block;

    padding: 15px 35px;

    border: 2px solid #333333;

    background-color: transparent;

    color: #333333;

    text-decoration: none;

    font-size: 0.9rem;

    font-weight: 500;

    letter-spacing: 2px;

    transition: all 0.3s ease;

    position: relative;

}



.roster-btn:hover {

    background-color: #333333;

    color: #ffffff;

}



.roster-btn::after {

    content: "";

    position: absolute;

    bottom: -8px;

    right: -8px;

    width: 15px;

    height: 15px;

    border-right: 2px solid #333333;

    border-bottom: 2px solid #333333;

    transition: all 0.3s ease;

}



.roster-btn:hover::after {

    border-color: #ffffff;

}



.partnerships-content {

    flex: 1;

    background-color: #f5f5f5;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 60px 40px;

}



.partnerships-info {

    max-width: 500px;

    text-align: left;

}



.partnerships-label {

    font-size: 1rem;

    color: #999999;

    letter-spacing: 3px;

    margin-bottom: 10px;

    font-weight: 400;

}



.partnerships-title {

    font-size: 2.2em;

    color: #333333;

    letter-spacing: 6px;

    margin-bottom: 1rem;

    font-family: var(--playfairdisplay);

    font-weight: bold;

}



.partnerships-underline {

    width: 80px;

    height: 2px;

    background-color: #333333;

    margin-bottom: 40px;

}



.partnerships-description {

    font-size: 1.1rem;

    color: #666666;

    line-height: 1.8;

    margin-bottom: 50px;

    font-weight: 300;

}

/* ------ # -------- */



/* What Do You Need section styles */

.what-do-you-need {

    padding: 70px 0;

    background-color: #f8f8f8;

}



.section-header {

    text-align: center;

    margin-bottom: 70px;

}



.section-title {

    font-size: 4rem;

    color: #333333;

    letter-spacing: 8px;

    margin-bottom: 20px;

    font-family: var(--playfairdisplay);

    font-weight: bold;

}



.section-description {

    font-size: 1.2rem;

    color: #666666;

    line-height: 1.8;

    max-width: 800px;

    margin: 0 auto;

    font-weight: 300;

}



.split-cards {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 40px;

    max-width: 1200px;

    margin: 0 auto;

}



.need-card {

    position: relative;

    height: 500px;

    border-radius: 20px;

    overflow: hidden;

    cursor: pointer;

    transition: transform 0.3s ease;

}



.need-card:hover {

    transform: translateY(-10px);

}



.card-image {

    width: 100%;

    height: 100%;

    position: relative;

}



.card-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}



.card-overlay {

    position: absolute;

    bottom: 0;

    left: 0;

    right: 0;

    padding: 36px 40px;

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;

    border-radius: 0 0 20px 20px;

}

.manager-overlay {

    background: linear-gradient(135deg, rgba(233, 30, 99, 0.4), rgba(240, 98, 146, 0.4));

    backdrop-filter: blur(10px);

    -webkit-backdrop-filter: blur(10px); /* For Safari support */

    border-radius: 10px;

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

    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);

}

.talent-overlay {

    background: linear-gradient(135deg, rgba(33, 150, 243, 0.4), rgba(100, 181, 246, 0.4));

    backdrop-filter: blur(10px);

    -webkit-backdrop-filter: blur(10px); /* Safari support */

    border-radius: 10px;

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

    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);

}



/* .manager-overlay {

    background: linear-gradient(135deg, #e91e63, #f06292);

} */



/* .talent-overlay {

    background: linear-gradient(135deg, #2196f3, #64b5f6);

} */



.card-title {

    font-size: 2.5rem;

    color: #ffffff;

    font-weight: 600;

    letter-spacing: 3px;

    margin-bottom: 30px;

    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);

}



.card-button {

    background-color: rgba(255, 255, 255, 0.9);

    color: #333333;

    padding: 15px 40px;

    border-radius: 50px;

    text-decoration: none;

    font-size: 1.1rem;

    font-weight: 600;

    letter-spacing: 1px;

    transition: all 0.3s ease;

    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);

}



.card-button:hover {

    background-color: #ffffff;

    transform: translateY(-2px);

    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);

}



.manager-button:hover {

    color: #e91e63;

}



.talent-button:hover {

    color: #2196f3;

}

/* ------- # ---------- */



/* Creator Niches Section */

.creator-niches {

    background-color: var(--dark);

    padding: 70px 0;

}



.niches-layout {

    display: grid;

    grid-template-columns: 1fr 2fr;

    gap: 80px;

    align-items: start;

}



.niches-intro {

    padding-top: 40px;

}



.niches-label {

    font-size: 1.2rem;

    color: var(--white);

    font-weight: 600;

    letter-spacing: 2px;

    margin-bottom: 30px;

    font-family: var(--roboto-bold);

}



.niches-description {

    font-size: 1.1rem;

    color: var(--white);

    line-height: 1.7;

    margin-bottom: 40px;

    font-weight: 400;

}



.work-brands-btn {

    display: inline-block;

    background-color: #2d5016;

    color: #c8ff65;

    padding: 15px 35px;

    border-radius: 50px;

    text-decoration: none;

    font-size: 1rem;

    font-weight: 600;

    letter-spacing: 1px;

    transition: all 0.3s ease;

    box-shadow: 0 4px 15px rgba(45, 80, 22, 0.3);

}



.work-brands-btn:hover {

    background-color: #1a2f0d;

    transform: translateY(-2px);

    box-shadow: 0 6px 20px rgba(45, 80, 22, 0.4);

}



.niches-categories {

    display: flex;

    flex-direction: column;

    gap: 40px;

}



.niche-item {

    display: flex;

    flex-direction: column;

    gap: 15px;

}

.niche-item .link {

    display: block;

    font-size: 3.5rem;

    color: var(--white);

    font-weight: 700;

    letter-spacing: 4px;

    margin: 0;

    line-height: 1.1;

    border-bottom: 3.5px solid var(--white);

    border-radius: 2px;

    text-decoration: none;

}

.niche-item .link:hover {color: #d6d5d5;}

.niche-title {

    font-size: 3.5rem;

    color: var(--white);

    font-weight: 700;

    letter-spacing: 4px;

    margin: 0;

    line-height: 1.1;

}



.niche-line {

    width: 100%;

    height: 3px;

    background-color: #2d5016;

    border-radius: 2px;

}

/* ---------- # ------------- */



/* ------- Join Our Network --------- */

.join-our-network {

    position: relative;

    padding: 70px 0;

    background: url('../images/network-bg.jpg') center/cover no-repeat;

    background-attachment: fixed;

}

.join-our-network .overlay {

    position: absolute;

    top: 0; left: 0; right: 0; bottom: 0;

    background: rgba(30, 34, 40, 0.70);

    z-index: 1;

}

.join-our-network .form-box {

    background: rgb(0 0 0 / 39%);

    border-radius: 15px;

    padding: 3rem 2rem;

    max-width: 1000px;

    width: 100%;

    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.25);

    display: flex;

    flex-direction: column;

    gap: 1.5rem;

    z-index: 2;

    position: relative;

    margin: 0 auto;

}



.join-our-network .form-title {

    font-size: 2.3rem;

    font-weight: 700;

    text-align: center;

    margin-bottom: 0;

    font-family: var(--playfairdisplay);

    letter-spacing: 4px;

    color: var(--white);

}

.join-our-network .form-description {

    text-align: center;

    font-size: 1.08rem;

    margin-bottom: 1.5em;

    color: #ccc;

}



.join-our-network .form-group {

    display: flex;

    flex-direction: column;

    gap: 0.5rem;

}

.join-our-network .form-group label {

    color: #eee;

    font-size: 18px;

    letter-spacing: 2px;

    font-family: var(--mont-normal);

    font-weight: bold;

}

.join-our-network .form-group input,

.join-our-network .form-group textarea {

    padding: 0.8em 1em;

    border: none;

    border-radius: 8px;

    font-size: 1rem;

    margin-top: 0.1em;

    background: rgb(255 255 255 / 73%);

    color: #fff;

    outline: none;

    transition: background 0.3s;

}

.join-our-network .form-group input:focus,

.join-our-network .form-group textarea:focus {

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

}



.join-our-network .row {

    display: flex;

    gap: 1rem;

}

.join-our-network .row .form-group {

    flex: 1 1 0%;

}



.join-our-network .form-group textarea {

    min-height: 80px;

    resize: vertical;

}



.join-our-network .submit-btn {

    background: linear-gradient(90deg, #00b4db 0%, #0083b0 100%);

    color: #fff;

    border: none;

    border-radius: 8px;

    font-size: 1.1rem;

    padding: 0.9em 0;

    cursor: pointer;

    font-weight: 600;

    letter-spacing: 1px;

    margin-top: 0.5em;

    transition: background 0.2s, transform 0.2s;

}

.join-our-network .submit-btn:hover {

    background: linear-gradient(90deg, #0083b0 0%, #00b4db 100%);

    transform: translateY(-2px) scale(1.02);

}

.join-our-network ::placeholder {color: var(--dark);}

.join-our-network .action-btn.learn-more-btn {margin: 0 auto;}

/* ----- # Join Our Network --------- */



/* Footer */

.footer {

    background-color: var(--dark);

    backdrop-filter: blur(10px);

    padding: 30px 0;

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

}



.footer-columns {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 40px;

}



.footer-column {

    flex: 1;

}



/* Logo Column */

.logo-column {

    display: flex;

    justify-content: flex-start;

}



.footer-logo {

    display: flex;

    align-items: center;

    gap: 15px;

}



/* .footer-logo .logo-icon {

    width: 40px;

    height: 40px;

    background-color: #ffffff;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 4px;

} */



.footer-logo .logo-text {

    font-size: 20px;

    font-weight: bold;

    color: #a8a8a8;

}



.footer-logo .logo-info {

    display: flex;

    flex-direction: column;

}



.footer-logo .company-name {

    font-size: 14px;

    font-weight: bold;

    line-height: 1.2;

    letter-spacing: 1px;

}



.footer-logo .tagline {

    font-size: 9px;

    letter-spacing: 2px;

    opacity: 0.8;

    margin-top: 2px;

}



/* Social Column */

.social-column {

    text-align: center;

}



.footer-column-title {

    font-size: 14px;

    font-weight: bold;

    letter-spacing: 2px;

    margin-bottom: 15px;

    opacity: 0.9;

}



.social-links {

    display: flex;

    justify-content: center;

    gap: 20px;

}



.social-link {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 40px;

    height: 40px;

    background-color: rgba(255, 255, 255, 0.1);

    border-radius: 50%;

    color: #ffffff;

    text-decoration: none;

    font-size: 18px;

    transition: all 0.3s ease;

}



.social-link:hover {

    background-color: rgba(255, 255, 255, 0.2);

    transform: translateY(-2px);

}



/* Work Column */

.work-column {

    text-align: right;

}



.work-buttons {

    display: flex;

    gap: 8px;

    align-items: flex-end;

    justify-content: end;

}



.work-button {

    display: inline-block;

    padding: 8px 20px;

    background-color: transparent;

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

    color: #ffffff;

    text-decoration: none;

    font-size: 11px;

    font-weight: 500;

    letter-spacing: 1px;

    text-transform: uppercase;

    transition: all 0.3s ease;

    border-radius: 2px;

    min-width: 100px;

    text-align: center;

}



.work-button:hover {

    background-color: rgba(255, 255, 255, 0.1);

    border-color: rgba(255, 255, 255, 0.5);

    transform: translateY(-1px);

}

.footer .footer-logo .footer-logo {max-width: 120px;}

/* ------- # footer ---------- */



/* Corner Decorations */

/* .header::before,

.header::after,

.footer::before,

.footer::after {

    content: "";

    position: absolute;

    width: 20px;

    height: 20px;

    border: 2px solid rgba(255, 255, 255, 0.3);

}



.header::before {

    top: 15px;

    left: 15px;

    border-right: none;

    border-bottom: none;

}



.header::after {

    top: 15px;

    right: 15px;

    border-left: none;

    border-bottom: none;

}



.footer::before {

    bottom: 15px;

    left: 15px;

    border-right: none;

    border-top: none;

}



.footer::after {

    bottom: 15px;

    right: 15px;

    border-left: none;

    border-top: none;

} */



/* header title */

.ht-headerTitle {background-image: url('../images/why-choose-us.jpg');background-repeat: no-repeat;background-position: center;background-size: cover;padding: 9rem 0;position: relative;}

.ht-headerTitle::after {position: absolute;content: '';background-color: #0000008f;inset: 0;width: 100%;height: 100%;}

.ht-headerTitle .ht-headerTitleText {font-size: 2.5em;color: var(--white);font-weight: 700;position: relative;z-index: 1;}





/* ======== about ================= */

.ht-mission {padding-block: 2rem;}

.section-title32 {

    font-size: 2rem;

    font-weight: 600;

}

.icon-bullet {

    display: flex;

    align-items: flex-start;

    gap: 10px;

    margin-bottom: 15px;

}

.icon-bullet i {

    color: #333;

    font-size: 1.2rem;

    line-height: normal;

}

.ht-list .list-group-item {

    padding-left: 0;

}

.ht-values {padding-bottom: 1rem;}

/* ======== # about ================= */



/* -- ATHLETES -- */

i.bi {font-size: 19px;}

.ht-athleteshero {

    padding: 2rem 0 10px;

    text-align: center;

}

.ht-weOffer {padding-block: 1rem;}

.ht-weOffer .icon {

    font-size: 1.8rem;

    color: #007bff;

    margin-right: 10px;

}

.ht-weOffer .card {

    border: none;

    background-color: #ffffff;

    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.10);

    border-radius: 12px;

}

.ht-whowework {padding-block: 1rem;}

.ht-whowework .list, .ht-whowework .ht-list {display: flex;flex-wrap: wrap;padding-left: 0;}

.ht-whowework .list .list-group-item {flex: 0 0 50%;max-width: 50%;padding: 10px 15px;margin-bottom: 0;}

.ht-delegated {padding-block: 1rem;}

.ht-delegated .card {border-radius: 12px;box-shadow: 0 2px 10px rgb(0 0 0 / 24%);border: 0;}

.ht-delegated .ht-list {margin-bottom: 0;}

.ht-delegated .ht-list li + li {padding-top: 10px;}

.ht-ctabtn {background-color: var(--dark);padding: 3rem 0;text-align: center;color: var(--white);}

/* -- # -- */



/* CTA FORM */

.ht-ctaform .join-our-network {background-image: none;}



/* --- content ---- */

.contetnt .headh3 {font-size: 22px;font-weight: 600;}

.contetnt p {font-family: var(--mont-normal);font-weight: 600;}



/* --- beauty --- */

.ht-container {

    max-width: 1200px;

    margin: auto;

    padding: 40px 20px;

}



.ht-beautyhero {

    background: url("hero-image.jpg") no-repeat center center/cover;

    color: white;

    padding: 100px 20px;

    text-align: center;

}



.ht-beautyhero h1 {

    font-size: 3rem;

    margin-bottom: 20px;

}

.ht-cards {

    display: flex;

    flex-wrap: wrap;

    gap: 20px;

    justify-content: center;

}



.ht-card {

    flex: 1 1 300px;

    background: #fafafa;

    border-radius: 10px;

    padding: 25px;

    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.06);

    transition: 0.3s ease;

}



.ht-card:hover {

    transform: translateY(-5px);

}



.ht-card h3 {

    font-size: 1.2rem;

    margin-bottom: 10px;

}



.ht-card p {

    font-size: 0.95rem;

}

.ht-list li::before {

    content: "✔️";

    margin-right: 10px;

    color: green;

}

.ht-removecheck li::before {display: none;}

.ht-list li {

    margin-bottom: 10px;

    font-size: 1rem;

}



.ht-cta {

    background: #000;

    color: white;

    text-align: center;

    padding: 60px 20px;

}



.ht-cta h2 {

    font-size: 2rem;

    margin-bottom: 20px;

}



.ht-cta p {

    font-size: 1.1rem;

    margin-bottom: 30px;

}



.ht-button {

    background: white;

    color: black;

    padding: 12px 25px;

    border: none;

    cursor: pointer;

    font-weight: bold;

    border-radius: 4px;

    transition: 0.3s;

}



.ht-button:hover {

    background: #eee;

}



.ht-form-section {

    background: #fff;

    padding: 60px 20px;

    text-align: center;

}



.ht-form-section h2 {

    margin-bottom: 20px;

}



.ht-form {

    max-width: 600px;

    margin: auto;

    display: flex;

    flex-direction: column;

    gap: 15px;

}



.ht-form input, .ht-form textarea {

    padding: 12px;

    border: none;

    border-radius: 8px;

    font-size: 1rem;

    box-shadow: 0px 2px 8px 2px rgba(0, 0, 0, 0.25);

}



.ht-form textarea {

    resize: vertical;

    min-height: 120px;

}



.ht-submit-btn {

    padding: 12px;

    background: #000;

    color: white;

    font-weight: bold;

    border: none;

    border-radius: 4px;

    cursor: pointer;

}



.ht-submit-btn:hover {

    background: #333;

}

.ht-col2 {column-count: 2;display: flow  !important;}

@media (max-width: 768px) {

    .ht-card {

        flex: 1 1 100%;

    }



    .ht-hero h1 {

        font-size: 2rem;

    }



    .ht-section h2 {

        font-size: 1.5rem;

    }

}

/* --- # --- */

#loader {
    display: none; /* Crucial: Hides the loader by default */
    width: 30px;
    height: 30px;
    margin: 10px auto; /* Center it horizontally */
    border: 4px solid #f3f3f3; /* Light grey */
    border-top: 4px solid #3498db; /* Blue for the spinner */
    border-radius: 50%; /* Makes it a circle */
    animation: spin 1s linear infinite; /* Apply the animation */
    position: absolute;
    top: 3px;
    left: calc(50% - 1rem);
}

/* Define the spinning animation */
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

#frm_join_our_network .text-danger {
    text-align: left;
}