@font-face {
    font-family: 'Gotham-Light';
    src: url('../fonts/Gotham-Light.woff2') format('woff2'),
        url('../fonts/Gotham-Light.woff') format('woff');
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gotham-Black';
    src: url('../fonts/Gotham-Black.woff2') format('woff2'),
        url('../fonts/Gotham-Black.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gotham-Bold';
    src: url('../fonts/Gotham-Bold.woff2') format('woff2'),
        url('../fonts/Gotham-Bold.woff') format('woff');
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Gotham';
    src: url('../fonts/Gotham-Book.woff2') format('woff2'),
        url('../fonts/Gotham-Book.woff') format('woff');
    font-style: normal;
    font-display: swap;
}

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

:root {
    --color-orange: #ff3f00;
    --color-black: #000;
    --color-white: #f8f8f8;
    --color-grey: #353535;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    font-family: 'Gotham';
    font-weight: 500;
    background-color: #f8f8f8;
    color: #353535;
    line-height: 1.2;
    font-size: 16px;
    overflow-x: hidden;
}

/* Utility Text Classes */
.text-orange {
    color: var(--color-orange) !important;
}

.text-black {
    color: var(--color-black) !important;
}

.text-white {
    color: var(--color-white) !important;
}

.text-grey {
    color: var(--color-grey) !important;
}

/* Utility Background Classes */
.bg-orange {
    background-color: var(--color-orange) !important;
}

.bg-black {
    background-color: var(--color-black) !important;
}

.bg-white {
    background-color: var(--color-white) !important;
}

.bg-grey {
    background-color: var(--color-grey) !important;
}



/* ----------font-size------- */

.section-title,
.hero-title {
    font-family: 'Gotham-Black';
    font-size: 100px;
    line-height: 100px;
    font-style: italic;
    padding: 0;
    margin-bottom: 30px !important;
}

.section-description,
.font-30 {
    font-size: 30px !important;
    line-height: 100% !important;
    font-family: 'Gotham-Light';
    margin-bottom: 60px;
}

.font-25 {
    font-size: 23px !important;
    line-height: 100% !important;
}

.font-20 {
    font-size: 20px !important;
    line-height: 100% !important;
}



/* =============================
     BUTTONS
  ============================= */
.btn-light {
    background: var(--color-white);
    color: var(--color-grey);
    border: none;
    font-weight: 500;
    transition: all 0.3s ease;
    font-style: italic;
    font-weight: 600;
}

.btn-light:hover {
    background: var(--color-grey);
    color: var(--color-white);
    border: none;
    transform: translateY(-2px);
}

.btn-orange {
    background: var(--color-orange);
    color: var(--color-grey);
    border: none;
    font-weight: 500;
    transition: all 0.3s ease;
    font-style: italic;
    font-weight: 600;
}

.btn-orange:hover {
    background: var(--color-grey);
    color: var(--color-white);
    border: none;
    transform: translateY(-2px);
}

.btn-light i,
.btn-orange i {
    margin-right: 5px;
}

.btn-light .fab.fa-apple,
.btn-orange .fab.fa-apple {
    font-size: 125%;
}



/*---------- background pattern----------- */

.bg-pattern-1 {
    background-image: url("../images/pattern_1.png") !important;
    /* Orange pattern */
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
}

.bg-pattern-2 {
    background-image: url("../images/pattern_2.png") !important;
    /* Orange pattern */
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
}

.bg-pattern-3 {
    background-image: url("../images/pattern_3.png") !important;
    /* Orange pattern */
    background-size: cover !important;
    background-position: top !important;
    background-repeat: no-repeat !important;
}


/* =============================
   STICKY HEADER
============================= */
.main-header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    background: var(--color-orange);
    transition: all 0.3s ease;
    padding: 55px 0px;
}

.home .main-header {
    background: transparent;
}

.logo {
    max-height: 85px;
}

/* =============================
   Main
============================= */

.home main {
    padding-top: 0px;
}

main {
    padding-top: 110px;
}


/* =============================
     HERO SECTION
  ============================= */
.hero-section {
    padding: 130px 0 0 0;
}

.hero-image {
    max-width: 115% ;
    transform: translateX(-40px);
	height: auto;
}

.hero-container {
    position: relative;
}

.hero-image-container {
    position: absolute;
    right: 0;
    bottom: 0;
}

.hero-section small {
    font-size: 20px;
}

.hero-section p {
    font-family: 'Gotham-Light';
}

/* =======================
 Galactique Section & Information section
============================= */

.galactique-section {
    background-color: var(--color-grey);
    border-radius: 0 0 40px 40px;
    padding: 150px 0px;
}

.galactique-section .container.text-white.pt-4.pb-5 {
    margin: 4rem auto;
}

.information-section {
    background-color: var(--color-grey);
    border-bottom: 2px solid var(--color-orange);
    padding-top: 100px !important;
    padding-bottom: 100px !important;
}

.information-section .section-title {
    font-size: 35px !important;
    margin-bottom: 40px !important;
    line-height: 35px;
    margin-bottom: 100px;
}

.feature-card {
    background: var(--color-white);
    border-radius: 12px;
    padding: 20px 30px;
    height: 100%;
    min-height: 150px;
    font-style: italic;
}


.information-section .feature-card {
    display: flex;
    justify-content: center;
    align-items: start;
    min-height: 150px;
    transition: 0.4s all ease;
    text-align: left;
    flex-direction: column;
    gap: 10px;
}

.information-section .feature-card:hover {
    background: var(--color-orange);
    color: var(--color-white) !important;
}

.feature-card .icon svg {
    width: 20px;
    height: 20px;
    fill: #ff3f00;
}

.feature-card h2 {
    font-weight: 600;
}



/* real madrif section */

.real-madrid-section {
    background: var(--color-white);
    padding: 125px 0px 40px 0px;
}

#une-application.real-madrid-section {
    padding: 0 0 70px !important;
}

#mouvment.real-madrid-section {
    padding: 0 !important;
}

#mouvment p {
    font-family: 'Gotham-Light';
}


.benefits-list li {
    padding: 15px 0;
    border-bottom: 1px solid #ddd;
    font-style: italic;
    font-family: 'Gotham-Black';
}

.benefits-list li:last-child {
    border-bottom: none;
}

.real-madrid-content-wrapper {
    border-radius: 0 0 30px 30px;
    padding: 175px 0 !important;
}

/* une appliction section  */
.phone-mockup {
    position: relative;
    z-index: 2;
}

.card-mockup {
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
}

.bg-pattern {
    background-image: url("pattern.png");
    /* Your background pattern image */
    background-repeat: no-repeat;
    background-size: cover;
    padding: 30px;
}



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

.footer-heading {
    font-family: 'Gotham-Black';
    font-size: 72px;
    font-style: italic;
    letter-spacing: -3px;
}

footer a:hover {
    color: white !important;
}

footer svg {
    vertical-align: middle;
    height: 30px;
    width: 30px;
}

footer a:hover svg path {
    fill: white !important;
}

.footer-bottom-row {
    border-top: 1px solid var(--color-orange);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-bottom-links {
    display: flex;
}

a.text-orange.text-decoration-none.d-block.font-30.my-4.cta-section-links-footer {
    margin-top: 2.5rem !important;
    margin-bottom: 2.5rem !important;
    font-family: 'Gotham-Light';
}

a.text-orange.text-decoration-none.d-block.font-30.cta-section-links-footer {
    font-size: 30px !important;
    margin-bottom: 0px !important;
}

.cta-app-galactique-download-footer i {
    font-size: 120% !important;
    margin-right: 10px;
}

.cta-app-galactique-download-footer i.fa-apple {
    font-size: 150% !important;
}

/* FAQ Page */
.faq {
    padding: 100px 0px;
}

.faq ol li {
    margin-bottom: 20px;
}

.faq ol li strong {
    font-size: 22px;
}

.col-md-6.text-md-end.small.footer-bottom-copyrigthts {
    font-size: 12px;
}

.col-md-6.text-md-end.d-flex.flex-column.justify-content-end.align-items-end.gap-4 a.text-orange.mb-0.font-30 {
    border-bottom: 0.5px solid #ff3f0066;
}


/* Contact Page */
.contact-section {
    padding: 55px 0px;
}

.contact-part {
    margin-top: 20px;
    background-color: #ffffff;
    border: 1px solid #ffffff;
    border-radius: 20px;
    padding: 65px 15px 15px 15px;
}

.contact-part form {
    max-width: 1320px;
    margin: 0 auto;
}

.contact-part p {
    margin: 0px;
}

.contact-part .row {
    margin-bottom: 25px;
}

.contact-part .wpcf7-list-item {
    margin: 0px;
}

.cs-label,
.cs-fields {
    display: inline-block;
    float: left;
    padding-top: 15px;
}

.cs-label {
    min-width: 145px;
    max-width: 145px;
    color: #333333;
    font-weight: 600;
    font-size: 16px;
}

.cs-radio,
.cs-fields {
    font-size: 17px;
}

.cs-fields {
    width: calc(100% - 145px);
    border-bottom: 1px solid var(--color-orange);
}

.cs-full-border {
    border: 1px solid var(--color-orange);
}

.cs-fields input,
.cs-fields textarea {
    border-bottom: 1px solid var(--color-orange);
    padding-left: 30px;
    padding-bottom: 15px;
    background: transparent;
    border: none;
    width: 100%;
}

.cs-fields textarea {
    height: 160px;
    max-height: 160px;
}

.cs-fields input:focus,
.cs-fields textarea:focus {
    border: none;
    outline: none;
}

/* Hide native radio */
.cs-radio input[type="radio"] {
    opacity: 0;
    position: absolute;
    pointer-events: none;
}

/* Style label */
.cs-radio .wpcf7-list-item label {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    position: relative;
    margin-right: 30px;
}

/* Custom outer circle */
.cs-radio .wpcf7-list-item label::before {
    content: '';
    width: 18px;
    min-width: 18px;
    height: 18px;
    min-height: 18px;
    border: 1px solid #f15a24;
    border-radius: 50%;
    margin-right: 8px;
    display: inline-block;
    box-sizing: border-box;
}

/* Custom filled circle (only when checked) */
.cs-radio input[type="radio"]:checked+.wpcf7-list-item-label::after {
    content: '';
    width: 8px;
    height: 8px;
    background-color: #f15a24;
    border-radius: 50%;
    position: absolute;
    left: 5px;
    top: 50%;
    transform: translateY(-50%);
}

.wpcf7-spinner {
    position: absolute;
}

.wpcf7-not-valid-tip {
    margin-top: -5px;
    font-weight: bold;
    font-size: 12px;
}

.contact-part .btn-orange {
    margin-top: 15px;
    padding-left: 15px;
    padding-right: 15px;
}


/* Media Query - Start */
@media screen and (min-width: 1800px) {

    .container,
    .container-lg,
    .container-md,
    .container-sm,
    .container-xl,
    .container-xxl {
        max-width: 1580px;
    }

    .home .col-lg-6.text-lg-start.pb-4 {
        padding-bottom: 160px !important;
        padding-top: 125px;
    }
}

@media (min-width: 1401px) and (max-width: 1799px) {

    .main-header {
        padding: 45px 0px;
    }

    .logo {
        max-height: 80px;
    }

    .hero-title,
    .section-title {
        font-size: 80px !important;
        line-height: 78px !important;
        margin-bottom: 20px !important;
    }
	 [lang="en"] .hero-title{
        font-size: 65px !important;
			line-height: 72px !important;align-content
	}

    .section-description,
    .font-30 {
        font-size: 26px !important;
    }

    .galactique-section,
    .real-madrid-section,
    .real-madrid-content-wrapper {
        padding: 130px 0px !important;
    }

    .font-25 {
        font-size: 22px !important;
    }

    .font-20 {
        font-size: 18px !important;
    }

    a.text-orange.text-decoration-none.d-block.font-30.my-4.cta-section-links-footer {
        margin-top: 2rem !important;
        margin-bottom: 2rem !important;
        font-size: 28px !important;
    }
}

@media (min-width: 1200px) and (max-width: 1400px) {

    .main-header {
        padding: 45px 0px;
    }

    .logo {
        max-height: 75px;
    }


    .hero-title,
    .section-title {
        font-size: 65px !important;
        line-height: 58px !important;
        margin-bottom: 20px !important;
    }

    .section-description,
    .font-30 {
        font-size: 20px !important;
    }

    .btn.px-4 {
        padding-right: 1rem !important;
        padding-left: 1rem !important;
        font-size: 14px;
    }

    .galactique-section,
    .real-madrid-section,
    .real-madrid-content-wrapper,
    .information-section {
        padding: 100px 0px !important;
    }

    .section-description,
    .font-30 {
        margin-bottom: 65px;
    }

    #real-madrid.real-madrid-section .section-description {
        margin-bottom: 65px !important;
    }

    .font-20 {
        font-size: 18px !important;
    }

    .font-25 {
        font-size: 20px !important;
    }

    .information-section .feature-card {
        min-height: 130px;
    }

    #une-application.real-madrid-section {
        padding: 0 0 50px !important;
    }

    a.text-orange.text-decoration-none.d-block.font-30.my-4.cta-section-links-footer {
        margin-top: 2rem !important;
        margin-bottom: 2rem !important;
        font-size: 25px !important;
    }

    .footer-heading {
        font-size: 55px;
        letter-spacing: -3px;
    }
}

@media screen and (max-width: 1200px) {

    .hero-title,
    .section-title {
        font-size: 65px !important;
        line-height: 58px !important;
        margin-bottom: 20px !important;
    }

    .section-description,
    .font-30 {
        font-size: 18px !important;
    }

    .font-25 {
        font-size: 16px !important;
    }

    .font-20 {
        font-size: 15px !important;
        line-height: 15px !important;
    }

    .contact-part {
        padding: 30px 20px 20px 20px;
    }

    .cs-label,
    .cs-radio,
    .cs-fields {
        font-size: 15px;
    }

    .cs-radio-b {
        width: calc(100% - 145px);
        float: left;
    }

    .contact-part .wpcf7-list-item {
        width: 95px;
    }

    .cs-radio .wpcf7-list-item label {
        margin-right: 15px;
    }
}

@media screen and (max-width: 1000px) {
    .footer-heading {
        font-size: 60px;
        letter-spacing: 0px;
    }

    .footer-bottom-row {
        flex-direction: column;
        gap: 20px;
    }

    .footer-bottom-links {
        width: 100% !important;
        justify-content: center;
    }

    .footer-bottom-copyrigthts {
        width: 100%;
        text-align: center !important;
    }

    .footer-bottom-links {
        flex-direction: column;
        align-items: center;
    }

    .footer-bottom-links a {
        margin: 0 !important;
    }

    .footer-bottom-copyrigthts {
        width: 100%;
        text-align: center !important;
    }

    .contact-part .col-lg-6:nth-child(2) {
        margin-top: 20px;
    }

}

@media screen and (min-width:992px) {

    #real-madrid.real-madrid-section img {
        max-width: 125%;
        transform: translateX(-20%);
    }

    #real-madrid.real-madrid-section .benefits-list,
    #une-application .benefits-list {
        max-width: 68%;
    }

    #real-madrid.real-madrid-section .section-description {
        margin-bottom: 120px !important;
    }

    #mouvment .d-flex.gap-3.flex-wrap.justify-content-center.justify-content-lg-start {
        margin-top: 60px;
    }

    .home .col-lg-6.text-lg-start.pb-4 {
        padding-bottom: 100px !important;
        padding-top: 50px;
		z-index: 2;
    }
}


@media screen and (max-width: 991px) {
    .mb-order-2 {
        order: 2;
    }

    .hero-image-container {
        position: relative !important;
        padding: 0px;
    }

    .hero-image {
    max-width: 102%;
	    transform:none !important;
}
}

/* Tablet Devices: 768px to 1023px */
@media (min-width: 768px) and (max-width: 1023px) {
    .main-header {
        padding: 40px 0px;
    }

    .logo {
        max-height: 70px;
    }

    .hero-image {
        max-width: 100%;
    }

    .galactique-section,
    .real-madrid-section,
    .real-madrid-content-wrapper,
    .information-section {
        padding: 90px 0px !important;
    }

    .section-description,
    .font-30 {
        margin-bottom: 50px;
    }

    #une-application.real-madrid-section {
        padding: 0 0 0px !important;
    }


    a.text-orange.text-decoration-none.d-block.font-30.cta-section-links-footer {
        font-size: 20px !important;
    }

    a.text-orange.text-decoration-none.d-block.font-30.my-4.cta-section-links-footer {
        margin-top: 2rem !important;
        margin-bottom: 2rem !important;
    }

    .footer-bottom-row {
        padding-top: 20px !important;
    }
}

@media screen and (max-width: 768px) {
    .bg-pattern-1 {
        background-image: url("../images/pattern_1_mb.png") !important;
        /* Orange pattern */
        background-size: cover;
        background-position: top;
    }

    .bg-pattern-2 {
        background-image: url("../images/pattern_2_mb.png") !important;
        /* Orange pattern */
        background-size: cover;
        background-position: center;
    }

    .bg-pattern-3 {
        background-image: url("../images/pattern_3_mb.png") !important;
        /* Orange pattern */
        background-size: cover;
        background-position: center;
        background-position: right top !important;
    }

    .real-madrid-section {
        padding-bottom: 0 !important;
    }

    .card-mockup {
        position: relative;
        bottom: 0;
        left: 0;
        transform: none;
        margin-top: 20px;
    }

    .faq {
        padding: 50px 0px;
    }

    .real-madrid-content-wrapper {
        border-radius: 0 0 30px 30px;
        padding: 2rem 0 !important;
    }

    .col-md-6.text-md-end.d-flex.flex-column.justify-content-end.align-items-end.gap-4 .font-30,
    .col-md-6.text-md-end.d-flex.flex-column.justify-content-end.align-items-end.gap-4 .font-25,
    a.text-orange.text-decoration-none.d-block.font-30.cta-section-links-footer {
        font-size: 18px !important;
    }

    .feature-card {
        padding: 10px 20px;
        min-height: 117px;
    }

    .information-section .feature-card {
        min-height: 90px;
    }

}

@media screen and (max-width: 750px) {

    .main-header {
        padding: 40px 0px;
    }

    .logo {
        max-height: 50px;
    }

    .hero-section small {
        font-size: 15px;
    }

    .btn-light i,
    .btn-orange i {
        margin-right: 0px;
    }

    .btn.px-4 {
        padding-right: 10px !important;
        padding-left: 10px !important;
    }

    .hero-title,
    .section-title {
        font-size: 55px !important;
        line-height: 50px !important;
        margin-bottom: 15px !important;
        text-align: left;
    }

    .section-description,
    .font-30 {
        font-size: 13.5px !important;
        text-align: left;
        margin-bottom: 65px !important;
    }

    .font-25 {
        font-size: 12px !important;
        text-align: left;
    }

    .font-20 {
        font-size: 11.5px !important;
        text-align: left;
    }

    .galactique-section {
        padding: 90px 0px;
    }

    .real-madrid-section {
        padding: 60px 0px;
    }

    #mouvment p.font-20 {
        font-size: 15px !important;
        line-height: 18px !important;
    }

    .information-section {
        padding-top: 50px !important;
        padding-bottom: 70px !important;
    }

    footer.py-5 {
        padding-top: 50px !important;
    }

    a.text-orange.text-decoration-none.d-block.font-30.my-4.cta-section-links-footer {
        margin-top: 2rem !important;
        margin-bottom: 2rem !important;
    }

    footer p.font-30 {
        margin-bottom: 15px !important;
    }

    .col-md-6.text-md-end.small.footer-bottom-copyrigthts {
        padding-top: 45px;
    }

    a.text-orange.text-decoration-none.d-block.font-30.cta-section-links-footer {
        margin-bottom: 20px !important;
    }

    .footer-bottom-row::before {
        content: '';
        border-top: 1px solid var(--color-orange);
        width: 90%;
    }

    .footer-bottom-row {
        padding-top: 20px !important;
        border-top: none;
    }

    .contact-part {
        margin-left: -15px;
        margin-right: -15px;
        border: none;
        border-radius: 0px;
    }
}

@media screen and (max-width: 540px) {

    .btn-light,
    .btn-orange {
        font-size: 12px;
    }
}

.footer-logo-1,.footer-logo-2{
	padding: 0 25px;
	display:block;
}
.footer-logo-1{
	padding-left:0 !important;
}
.footer-logo-2{
	border-left:1px solid #fff;
	padding-right:0 !important;
}

/* ---terms and condition page-- */
.terms-and-condition-container{
          display: grid;
          grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
          gap: 30px;
          margin: 0 auto;
        }
         .terms-title {
          color: #e64500;
          font-size: 22px !important;
          margin-bottom: 10px;
        }
        
        .section-description {
          margin-bottom: 10px;
          font-size: 1rem;
          color: #333;
          text-align: justify;
        }
        
        
        @media (min-width: 768px) {
          .terms-and-condition-container {
            grid-template-columns: repeat(2, 1fr);
          }
        
          .terms-box:nth-child(odd) {
            grid-column: 1;
          }
        
          .terms-box:nth-child(even) {
            grid-column: 2;
          }
        }
.terms-condition-heading{
	font-size: 22px;
    font-weight: 700;
    margin-bottom: 30px;
}
@media screen and (min-width:768px){
	.terms-condition-heading{   
	padding-top: 110px !important;
	}
}
.terms-condition-heading{   
	padding-top: 60px !important;
	}
@media (min-width: 992px) and (max-width: 1200px) {
	.main-header {
    padding: 25px 0px;
}
	.hero-section {
    padding: 80px 0 0 0;
}
	.logo {
    max-height: 70px;
}
    .home .col-lg-6.text-lg-start.pb-4 {
        padding-bottom: 52px !important;
        padding-top: 50px;
    }
	.hero-image {
    max-width: 115%;
    transform: translateX(-20px);
    height: auto;
}
	.hero-title {
        font-size: 51px !important;
        line-height: 48px !important;
        margin-bottom: 20px !important;
    }
}

/* Media Query - End */