@charset "utf-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@200;300;400;500;600;700;800&display=swap');

.BG2 				        { clear: both; background-color: #F8F8F8; padding-top: 0;  font-family: 'Montserrat' !important; line-height: 1.2; }
.BG 				        { clear: both; background-color: #FFFFFF; padding-top: 0;  font-family: 'Montserrat' !important; line-height: 1.2; }

h1, h2, h3, h4, h5, h6 {
    color: #1a93cc;
    font-family: 'Montserrat' !important;
    font-weight: 600;
}
p {
    color: #7d7d7d;
    font-family: 'Montserrat' !important;
    font-size: 18px;
}
ul li {
    color: #7d7d7d;
    font-family: 'Montserrat' !important;
    font-size: 18px;
}
/* ===== HERO HEADER ===== */
.hero-header {
    text-align: center;
    padding: 60px 20px 40px;
    max-width: 1100px;
    margin: 0 auto;
}

.hero-top {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 40px;
    margin-bottom: 30px;
}

.hero-box {
    text-align: center;
}

.hero-number {
    font-size: 90px;
    font-weight: 800;
    margin-bottom: 5px;
}

.hero-number.red {
    color: #be0139;
}

.hero-dirham {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.sec1-param-instruct{
     position: absolute !important;
    z-index: 9 !important;
    color: #ffffff !important;
    padding: 10px !important;
    bottom: 0;
    left: 90px;
    font-size: 6px !important;
    font-weight: 300;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}
.sec2-param-instruct{
     position: absolute !important;
    z-index: 9 !important;
    color: #ffffff !important;
    padding: 10px !important;
    bottom: 0;
    right: 120px;
    font-size: 6px !important;
        font-weight: 300;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}
.sec3-param-instruct{
    position: absolute !important;
    z-index: 9 !important;
    color: #ffffff !important;
    bottom: -5px;
    right: 15px;
    font-size: 6px !important;
        font-weight: 300;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}
/* Arabic (RTL) → image AFTER text */


.hero-box p {
    font-size: 20px;
    color: #666;
}

.hero-divider {
    width: 1px;
    height: 60px;
    background: #ddd;
}

.hero-main {
    color: #0A4C78;
    font-size: 28px;
    font-weight: 700;
    margin: 20px 0 10px;
}

.hero-sub {
    color: #555;
    font-size: 15px;
    margin: 0 auto;
    line-height: 1.6;
}

/* ===== FLOATING FORM ===== */
.form-wrapper {
    display: flex;
    justify-content: center;
    margin-top: 20px;
    padding: 5px;
    border-radius: 10px;
}

.form-wrapper form {
    /* background: #fff; */
    max-width: 1200px;
    width: 100%;
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.12);
    padding: 5px 30px;
}

/* Default: normal flow (mobile) */
.fixed-form {
    position: absolute;
    width: 100%;
    max-width: 100%;
    right: 0;
    top: auto;
    transform: none;
    z-index: 999;
     transition: transform 0.5s ease;
}

/* Card look */
.fixed-form form {
    background: #F8F8F8;
    border-radius: 16px;
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.15);
    padding: 3px;
    max-height: none;
    overflow-y: visible;
}

/* Remove Bootstrap side effects */
.fixed-form .row {
    margin-left: 0;
    margin-right: 0;
}

/* ===============================
   DESKTOP FIXED FORM
================================ */
@media (min-width: 768px) {

    .fixed-form {
        width: 290px;
    }

        .col-sm-3 {
        width: 18% !important;
    }

    /* Activated ONLY when JS adds .is-fixed */
    .fixed-form.is-fixed {
        position: fixed;
        right: 10px;
        top: 50%;
        transform: translateY(-50%);
        z-index: 99999;
    }

    /* Limit height only on desktop fixed */
    .fixed-form.is-fixed form {
        max-height: 90vh;
        overflow-y: auto;
    }
}
/* ===== CONTENT OFFSET ===== */

.video-section {
    position: relative;
    width: 100%;
    height: 400px; /* adjust as needed */
    overflow: hidden;
}

.video-section video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* fills div like background-image */
    z-index: -1;
}

.video-section .content {
    position: relative;
    z-index: 1;
    color: #fff;
    text-align: center;
    top: 50%;
    transform: translateY(-50%);
}

.price-widget {
    position: relative;
    width: 100%;
    height: 430px;
    overflow: hidden;
    border-radius: 16px;
    margin: 20px 0px 0px 10px;
}

/* Background Video */
.price-widget video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

.childitems-widget {
    position: relative;
    width: 48%;
    height: 420px;
    overflow: hidden;
    border-radius: 16px;
        margin-right: 8px;
}

/* Background Video */
.childitems-widget video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}


.childitems-widget2 {
    position: relative;
    width: 48%;
    height: 420px;
    overflow: hidden;
    border-radius: 16px;
}

/* Background Video */
.childitems-widget2 video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}



/* Content Layout */
.widget-content {
    display: flex;
    height: 100%;
    /* padding: 20px; */
}

.widget-content2 {
    display: flex;
    height: 100%;
    /* padding: 20px; */
}

.widget-content-sub {
    display: flex;
    height: 100%;
    padding: 20px;
    justify-content: center;
}

/* Left Section */
.left-box {
    width: 30%; 
    color: #fff;
    z-index: 2;
    height: 100%;
    text-align: center;
    top: 7%;
}

.left-box2 {
    width: 30%; 
    color: #fff;
    z-index: 2;
    height: 100%;
    text-align: center;
    top: 4%;
}

.left-box h2 {
    margin-bottom: 15px;
}

.left-box2 h2 {
    margin-bottom: 15px;
}


.child-pro-box {
     width: 100%;
    color: #fff;
    z-index: 2;
    height: 100%;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0px;
    justify-content: space-between;
}

.child-pro-box h2 {
    margin-bottom: 15px;
}

.main-img {
    width: 30%;
    margin: 30px;
    transition: transform 0.5s ease;
}

.number-img {
    width: 30%;
    margin: 20px;
    transition: transform 0.5s ease;
}

.number-img2 {
    width: 25%;
    margin: 10px;
    transition: transform 0.5s ease;
}

.number-img3 {
    height: 35%;
    margin: 5px;
    transition: transform 0.5s ease;
}

.number-img3-1 {
    height: 20%;
    margin: 5px;
    transition: transform 0.5s ease;
}

.winner-img {
    width: 90%;
}

.winner-img2 {
    width: 90%;
}

.winner-img3 {
    width: 80%;
    margin: 5px;
}

.sub-widget-items{
    display: flex;justify-content: space-between;
    padding: 0;
}

.stats-widget-items{
    display: flex;justify-content: center;
}

.heading-zeekr{
        color: white;
    font-size: 90px;
    font-family: Montserrat;
    font-weight: 800;
    line-height: 60px;
    word-wrap: break-word;
    text-shadow: 0px 8px 7px rgba(0, 0, 0, 0.10);
    width: 500px;
    
}

.heading-tiggo{
        color: white;
    font-size: 90px;
    font-family: Montserrat;
    font-weight: 800;
    line-height: 60px;
    word-wrap: break-word;
    text-shadow: 0px 8px 7px rgba(0, 0, 0, 0.10);
    width: 500px;
    position: relative;
    left: -150px;
    
}

.heading-zeekr-sub{
color: white;
 font-size: 24px;
 font-family: Montserrat;
 font-weight: 600;
 line-height: 22px;
 word-wrap: break-word;
    
}

/* Right Section */
.right-box {
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: url(/wp-content/themes/fhg_theme/images/rabehcarg.png)   right bottom no-repeat;
    background-size: 65% !important;
    overflow: hidden;
    /* bottom: -20px; */
}
/* Gradient overlay */
.right-box::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(207, 9, 44, 0.75) 0%,
        rgba(98, 112, 105, 0.75) 100%
    );
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
    z-index: 1;
}

.right-box:hover::after {
    opacity: 1;
}

/* Content above gradient */
.right-box > * {
    position: relative;
    z-index: 2;
}

.right-box2 {
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    background: url(/wp-content/themes/fhg_theme/images/rabehcarg.png)
                left bottom no-repeat;
    background-size: 65% !important;
    overflow: hidden;
}

/* Gradient overlay */
.right-box2::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        180deg,
        rgba(207, 9, 44, 0.75) 0%,
        rgba(98, 112, 105, 0.75) 100%
    );
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
    z-index: 1;
}

.right-box2:hover::after {
    opacity: 1;
}

/* Content above gradient */
.right-box2 > * {
    position: relative;
    z-index: 2;
}

/* Car Image */
.car-img {
    width: 65%;
    transition: transform 0.5s ease;
    top: 10%;
    position: relative;
}

/* Celebration Image */
.celebration-img {
        position: absolute;
    top: -40%;
    width: 60%;
    pointer-events: none;
    transition: opacity 0.5s ease;
    right: 0;    
}

/* Car Image */
.car-img2 {
    width: 65%;
    transition: transform 0.5s ease;
    top: 10%;
    position: relative;
}

/* Celebration Image */
.celebration-img2 {
       position: absolute;
    top: -5%;
    width: 37%;
    pointer-events: none;
    transition: opacity 0.6s ease;
    left: 50px;  
}

/* Hover Effects */
.right-box:hover .main-img {
    transform: scale(1.10);
}

.right-box:hover .car-img {
    transform: scale(1.10);
}

.right-box:hover .celebration-img {
    top: -15%;
    transform: scale(1.0);
    /* content: url("celebration-2.png"); */
}

/* Hover Effects */
.right-box2:hover .number-img2 {
    transform: scale(1.10);
}

.right-box2:hover .car-img2 {
    transform: scale(1.10);
}

.right-box2:hover .celebration-img2 {
    transform: scale(1.08);
     filter: brightness(0) invert(1);
    /* content: url("celebration-2.png"); */
}

/* ===== MOBILE BEHAVIOUR ===== */
@media (max-width: 991px) {
    /* .fixed-form {
        position: relative;
        left: auto;
        top: auto;
        transform: none;
        width: 100%;
        margin-top: 30px;
    } */

    #content .container {
        /* padding-left: 0px; */
    }
    .sub-widget-items
    {
        margin: 0 10px ;
    }
     .price-widget {
        margin: 10px 0;
    }
}


/* ===== RESPONSIVE ===== */
@media (max-width: 768px) {
    .hero-top {
        flex-direction: column;
        gap: 20px;
    }

    .hero-divider {
        width: 60px;
        height: 1px;
    }
    .price-widget {
        margin: 10px 0 !important;
        height: 530px;
    }
    .FormSection{
        display: flex;
    flex-direction: column-reverse !important;
    }

    .hero-main {
        font-size: 22px;
    }

     .hero-number {
        font-size: 60px;
    }
    .hero-header {
        padding: 10px;
    }
    .dirham-red-ico{
        width: 50px !important;margin-top: 0px !important;
    }
    .sec1-param-instruct {
        left: auto;
        /* background-color: #71282c38; */
        border-radius: 10px;
        right: auto !important;
    }

    .sec2-param-instruct {
        right: auto;
        /* background-color: #71282c38; */
        border-radius: 10px;
        left: auto !important;
    }

    .sec3-param-instruct {
        bottom: -10px;
        background-color: #71282c38;
        border-radius: 10px;
        right: auto;
        left: auto !important;
    }

    .right-box {
        flex-direction: column;
        background-position: center bottom !important;
            background-size: 90% !important;
    }
    .right-box2 {
        flex-direction: column;
        background-position: center bottom !important;
            background-size: 90% !important;
    }
    
    /* FIRST on mobile */
    .right-box2 .left-box2 {
        order: 1;
        width: 92%;
    }

    /* SECOND on mobile */
    .right-box2 .celebration-img2 {
        order: 2;
        margin-top: 15px;
    }

    /* THIRD on mobile */
    .right-box2 .car-img2 {
        order: 3;
        margin-top: 10px;
    }

    .main-img {
        width: 15%;
        margin: 15px;
    }

    .number-img2 {
        width: 13%;
        margin: 13px;
    }
    .left-box {
        width: 90%;
        height: auto !important; 
            top: 2%;
    }
    .left-box2 {
        width: 60%;
    }
    .left-box h2 {
        /* margin-bottom: 0px !important; */
    }
    .left-box2 h2 {
        margin-bottom: 0px !important;
    }
    .car-img {
        width: 90% !important;
    }
    .car-img2 {
        width: 85% !important;
        top: -2%;
    }
    .heading-zeekr {
        font-size: 38px;
        width: 100%;
        line-height: 10px;
    }
    .heading-tiggo {
        font-size: 38px;
        width: 380px !important;
        line-height: 10px;
                left: -13px;
    }
    .right-box:hover .celebration-img {
        top: 0%;
    }
    .celebration-img {
        right: 88px !important;
            top: -15% !important;
    }
    .sub-widget-items{
        display: flex;
        justify-content: space-between;
    flex-direction: column;
    align-items: center;
    gap:0px;
    }
    .childitems-widget {
        width: 100% ;
            margin-right: 0px !important;
    }
     .childitems-widget2 {
        width: 100% ;
        margin: 10px;
    }
    .stats-widget-items{
        display: flex;justify-content: center;   
        flex-direction: column;
    }
    .year-long-div {
        background-size: cover !important;
        margin: 0px !important;
        padding: 20px !important;
    }
    .fixed-form {
        position: relative;
    }
    .FormLeftSection {
        padding: 10px 10px 0 !important;
    }



}



.FormMainSection 	{ border-radius: 20px; background: rgba(151, 151, 151, 0.09); backdrop-filter: blur(3.5px); padding: 15px 20px;}
.FormSubSection		{ border-radius: 20px; background-color: #FFFFFF; padding: 20px 25px; margin-top: 10px; margin-bottom: 10px; box-shadow: 0px 11px 32px 0px rgba(0, 0, 0, 0.05);}
.ThanksSection      { text-align: center; padding-bottom: 15px;}

.step 				{ text-align: left; padding: 8px 0 8px 15px; border-left: 5px solid #C7C7C7; color: #7D7D7D;  font-family: 'Montserrat', sans-serif !important; margin-bottom: 10px; }
.step p 			{ color: #7D7D7D; font-family: 'Montserrat', sans-serif !important; font-size: 15px; padding: 0px; margin: 0px; }
.step img			{ margin-right: 5px; }

.stepactive 		{ border-left: 5px solid #1A93CC !important; }
.stepactive label	{ color: #333333;  }

.form-control 		{ height: 40px !important; border-radius: 50px !important; border-color: #a7bfd2 !important; color: #7d7d7d; font-family: 'Montserrat', sans-serif !important; margin-bottom: 10px; margin-right: 5px; 
						font-size: 15px; font-weight: 500; width: 100% !important; }
.form-field-title 	{ font-weight: 500; font-size: 16px; line-height: 19px; font-family: 'Montserrat', sans-serif !important; }

.form-title 		{ font-size: 20px; padding-top: 13px; padding-bottom: 0px; color: #333; font-weight: 600; font-family: 'Montserrat', sans-serif !important; }
.form-title2 		{ padding-top: 13px; padding-top: 5px; padding-bottom: 10px; color: #7D7D7D; font-weight: 600; font-size: 15px; font-family: 'Montserrat', sans-serif !important; }
.form-title3 		{ font-size: 22px; padding-top: 13px; padding-bottom: 0px; color: #333; font-weight: 600; font-family: 'Montserrat', sans-serif !important; }
.form-title4 		{ padding-top: 12px; padding-top: 5px; padding-bottom: 10px; color: #7D7D7D; font-weight: 400; font-size: 20px; font-family: 'Montserrat', sans-serif !important;line-height: 35px; }

.mybutton 			{ border-radius: 50px; color: white; background: #C3103B; padding: 8px 35px; font-size: 15px; margin:20px auto 0 auto;  }
.mybutton:focus,
.mybutton:hover,
.mybutton.focus		{ color:#FFFFFF; background-color: #009bda; border-color:#C3103B; }

.mybutton:active,
.mybutton.active	{}

.mybutton img 		{ margin: -3px 0 0 5px;}

.mybutton2 			{ border-radius: 30px; color: white; background: #1A93CC; font-size: 15px; padding: 8px 35px; margin: 10px auto 15px; width: 175px; font-family: 'Montserrat', sans-serif !important; }
.mybutton2:focus,
.mybutton2:hover,
.mybutton2.focus	{ color:#FFFFFF; background-color: #009bda; border-color:#005380; }

.mybutton2 img 		{ margin: -3px 0 0 5px;}

.FormCenter			{ margin: 5% auto; float: inherit;}

.ARGFormCheckBox            { clear: left; width: 10%; float: left;}
.ARGFormCheckLbl            { float: left; width: 90%; padding-top: 2px;}
.ARGFormCheckLbl label      { font-size: 12px; color: #4E4E4E; line-height: 17px; font-weight: normal;}

.ARGFormCheckLbl a:hover    { text-decoration: underline !important; color: #009bda;}


.ARGReferenceDataSection    { border-radius: 20px; background: rgba(151, 151, 151, 0.09); padding: 17px 24px; margin-bottom: 15px;}

.ARGReferenceDetails        { color: #7D7D7D; font-size: 14px;}
.ARGReferenceDetails img    { margin-right: 5px;}

.ARGReferenceMobile         { float: left; padding-right: 15px;}
.ARGReferenceMobile img     { margin-right: 6px;}

.ARGReferenceEmail          { float: left; }
.ARGReferenceEmail img      { margin-right: 3px;}

.ARGReferenceIcons          { }
.ARGReferenceIcons img      { float: right;  margin-top: 9px;}
.ARGReferenceIcons a        { cursor: pointer; }



.FormLeftSection 	        { background-color: #FFFFFF; color: #012132; padding:10px;}
.FormRightSection           { color: #F8F8F8; flex: 0 0 auto; padding: 0px; display: inline-block;}

.FormLeftSection h1	        { font-size: 22px; color: #012132; padding: 5px 0 5px 0; margin: 0px; font-weight: 400; font-family: 'Montserrat', sans-serif !important;}
.FormLeftSection h1 span    { font-weight: 700; font-family: 'Montserrat', sans-serif !important;}

.FormLeftSection h3	        { font-size: 14px; color: #5B6165; padding: 0 0 20px 0; margin: 0px; line-height: 1.2;}

.GrayBGSection              { background: rgba(151, 151, 151, 0.09); border-radius: 15px; padding: 20px 25px; margin-bottom: 20px;}
.GrayBGSection .Heading     { font-size: 16px; font-weight: 600; padding-top: 10px; padding-bottom: 10px;}

.col-form-label             { padding-top: 12px;}
.labelRight                 { text-align: left; padding-right: 0; margin-top: 10px; }

.CardBGSection              { background: rgba(151, 151, 151, 0.09); border-radius: 15px; padding: 20px 25px 25px; margin: 0 0 20px 0;}
.CardTitleRow               { margin-bottom: 15px !important; margin-right: 0px;}

.CardBGSection .Heading     { font-size: 16px; font-weight: 700; padding-top: 10px; color: #7D7D7D;}
.CardBGSection .Close       { float: right; width: 25px; height: 24px; padding-top: 1px; background-color: #E1E1E1; border-radius: 50px; text-align: center; cursor: pointer;margin-left: 20px;}
.CardBGSection .Close:hover { background-color: #FFFFFF;}
.CardBGSection .col-form-label  { font-size: 13px; padding-top: 13px;}

.CardBGSection.Total            { background: #DEF0FF;}
.CardBGSection.Total .Heading   { color: #00426A;}

.form-control 		        { height: 40px !important; border-radius: 50px !important; border-color: #a7bfd2 !important; color: #292929; font-family: 'Montserrat', sans-serif !important; 
                                margin-bottom: 10px;    margin-top: 10px; margin-right: 0; font-size: 15px; font-weight: 500; width: 100% !important; padding-left: 15px !important; }

.form-group                 { margin-bottom: 10px !important;display: flow !important;}
.CardBGSection .form-group  { margin-bottom: 0;}

.form-control[disabled], 
.form-control[readonly], 
fieldset[disabled] .form-control { background-color: #E0E0E0; }

.form-range                 { margin-bottom: 10px;width: inherit;}

.RangeValueLeft             { font-size: 14px; color: #7D7D7D; text-align: left;}
.RangeValueRight            { font-size: 14px; color: #7D7D7D; text-align: right;}

hr.FormDivider              { border-top: 1px solid #D6D6D6; margin: 0 auto 20px;}

.TnCDetails                 { padding-top: 0; padding-bottom: 10px;}
.TnCDetails p               { color: #505050; font-size: 11px; font-family: 'Montserrat', sans-serif !important;    line-height: 20px;}
.TnCDetails p span          { font-weight: 800; }
    
.FormRightSection .HeadingSmall     { color: #FFFFFF; font-size: 16px; padding-bottom: 3px;}
.FormRightSection .HeadingMedium    { color: #FFFFFF; font-size: 24px; padding-bottom: 3px; font-weight: 600;}
.FormRightSection .HeadingAED       { color: #FFFFFF; font-size: 50px; padding-bottom: 8px; font-weight: 700;}
.FormRightSection .HeadingAED span  { font-size: 30px; font-weight: 500;}
.FormRightSection p                 { color: #FFFFFF; font-size: 16px; font-family: 'Montserrat', sans-serif !important; padding-bottom: 40px; border-bottom: 1px solid #7D7D7D;}

.FormRightSection .HeadingAED span+span  { font-size: 16px; font-weight: 300;}

.PayingValue                    { padding-top: 20px;}
.PayingValue p                  { padding-bottom: 35px; border-bottom: 0px solid #7D7D7D;}

.ApplyMasterSection2            { position: absolute; bottom: 50px; width: calc(100% - 30px);}

.ApplySection                   { background: rgba(255, 255, 255, 0.88); backdrop-filter: blur(30px); border-radius: 15px; padding: 10px;}

.ApplySection .Heading          { font-size: 24px; font-weight: 700; color: #2C323D;    padding: 10px 30px;}
.ApplySection .Close            { float: right; width: 35px; height: 35px; padding-top: 6px; background-color: #E1E1E1; border-radius: 50px; text-align: center; cursor: pointer;}
.ApplySection .Close:hover      { background-color: #FFFFFF;}
.ApplySection .col-form-label   { font-size: 12px; padding-top: 13px;}

.ApplySection .form-group       { margin-bottom: 0;}


.FormRightSection .form-control { margin-bottom: 5px;}

#formFields {
    padding: 20px;
}
/* 
.DefaultLightButton 			{ border-radius: 40px; color: white; background: #009BDA; font-size: 16px; font-weight: 700; padding: 10px 40px; margin: 10px auto 15px; 
                                    font-family: 'Montserrat', sans-serif !important; border-color:transparent; box-shadow: 7px 8px 9px 0px rgba(0, 155, 218, 0.10);} */
.year-long-div{
    font-size: 29px;
    padding: 40px;
    font-weight: 500;
    text-align: center;
    background: url(/wp-content/themes/fhg_theme/images/image256.png) center bottom no-repeat;
    background-size: contain;
    margin: 0px 20px 20px;
        border-radius: 10px;
}
.button-row {
    display: flex;
    justify-content: center; /* center horizontally */
    gap: 20px; /* space between buttons */
    flex-wrap: wrap; /* wrap if screen is too small */
    max-width: 100%;
    margin: 0 auto;
}

.button-row .btn {
     display: inline-flex;
    /* gap: 8px; */
    /* padding: 10px 15px; */
    font-size: 16px;
    border-radius: 35px;
    text-decoration: none;
    color: rgb(255 255 255);
    border: 1px solid #ccc;
    max-width: 340px;
    width: 100%;
    transition: background 0.3s, transform 0.3s;
    box-sizing: border-box;
    background: rgba(9, 68, 107, 1);
    justify-content: space-between;
}

.button-row .btn:hover {
    transform: translateY(-2px);
    background: #f0f0f0; /* hover color */
    background-color: #808080;
}

.button-row .arrow {
font-weight: bold;
    display: inline-block;
    line-height: 1;
    vertical-align: middle;
    transition: transform 0.3s;
    position: relative;
    top: 28px;
}

.button-row .btn:hover .arrow {
    transform: translateX(4px); /* arrow moves slightly on hover */
}

/* Responsive adjustments for mobile */
@media (max-width: 768px) {
    .button-row {
        flex-direction: column;
        align-items: center;
    }

    .button-row .btn {
        max-width: 90%; /* make smaller on mobile */
    }
}

                                
.ListLightButton {
        border-radius: 40px;
        color: #2c323d;
        width: 200px;
        background: #fff;
        font-size: 16px;
        font-weight: 700;
        padding: 10px 40px;
        margin: 10px auto 15px;
        font-family: 'Montserrat', sans-serif !important;
        border-color: transparent;
        border: 2px solid #2c323d;
        box-shadow: 7px 8px 9px 0px rgba(0, 155, 218, 0.10);
        margin-top: 40px;
}
.ListLightButton:focus,
.ListLightButton:hover,
.ListLightButton.focus	    { color:#FFFFFF; background-color: #C3103B; border-color:transparent; }

.DefaultLightButton {
        border-radius: 40px;
    color: #fff;
    width: 100%;
    background: #2c323d;
    font-size: 16px;
    font-weight: 700;
    padding: 10px 40px;
    margin: 10px auto 0px;
    font-family: 'Montserrat', sans-serif !important;
    border-color: transparent;
    border: 2px solid #2c323d;
    box-shadow: 7px 8px 9px 0px rgba(0, 155, 218, 0.10);
    margin-top: 20px;
}
.DefaultLightButton:focus,
.DefaultLightButton:hover,
.DefaultLightButton.focus	    { color:#FFFFFF; background-color: #C3103B; border-color:transparent; }

/* .DisplayStretch1                { padding: 0 20px;}
.DisplayStretch2                { padding: 0 20px;} */

.FormDetailSection              { text-align: center; padding-top: 30px; padding-bottom: 30px; color: #03283A; }
.FormDetailSection p            { font-size: 16px; color: #03283A;  font-family: 'Raleway', sans-serif !important; line-height:1.3; }

.StatsSection                   { padding-top: 20px; padding-bottom: 20px; text-align: center;}
.StatsSection .Stat1stLine      { font-size: 16px; }
.StatsSection .StatMainLine     { font-size: 50px; font-weight: 700; }
.StatsSection .Stat2ndLine      { font-size: 16px; margin-bottom: 30px; }

.SwitchButton 			        { border-radius: 60px; color: #0E3594; background: #F1DE2F; font-size: 18px; font-weight: 600; padding: 16px 45px; margin: 10px auto 15px; line-height: 1.2;
                                  font-family: 'Montserrat', sans-serif !important; border-color:transparent; box-shadow: 0px 0px 20px 0px rgba(0, 155, 218, 0.50);
                                  transition: all ease-in 0.3s;}
.SwitchButton:focus,
.SwitchButton:hover,
.SwitchButton:active:hover,
.SwitchButton:active,
.SwitchButton.focus	            { color:#0E3594; background-color: #c7b401; border-color:transparent; box-shadow: 0px 0px 20px 0px rgb(255 214 64 / 50%); 
                                    outline: transparent;}

.SwitchButton .LeftText         { float: left; padding-right: 15px;}                     
.SwitchButton .SwitchBox        { width: 50px; height: 30px; background-color: #0E3594; float: right; border-radius: 50px; margin-top: 5px; transition: all ease-in 0.3s;}                     
.SwitchButton .SwitchNob        { width: 26px; height: 26px; background-color: #FFFFFF; float: left; border-radius: 50px; margin: 2px 2.5px 2px 3px; transition: all ease-in 0.3s;} 


.SwitchButton:focus .SwitchNob  { float: right;}
.SwitchButton:focus .SwitchBox  { background-color: #00411E; }  

.FaqBG                          { padding-top: 30px; padding-bottom: 30px;}
.card h5                        { padding: 0; margin: 0; border-bottom: 1px solid rgb(212, 212, 212);}
.card .form-field-title         { white-space: normal; width: 100%; text-align: left; padding: 20px 80px 20px 10px; font-size: 18px; color: #012132; font-family: 'Raleway', sans-serif !important;
                                    background: url(/wp-content/themes/fhg_theme/images/Minus-Dark.svg) right center no-repeat;}

.card .form-field-title.collapsed {background: url(/wp-content/themes/fhg_theme/images/Plus-Dark.svg) right center no-repeat;}
.card .form-field-title:focus,
.card .form-field-title:hover,
.card .form-field-title:active:hover,
.card .form-field-title:active,
.card .form-field-title.focus   { color: #009BDA; }

.card .card-body                { padding: 20px; background: rgba(151, 151, 151, 0.09);}

#referenceData {
    display: flow;
}

.row {
    margin-bottom: 0px;
    justify-content: space-between;
}

.d-none {
    display: none !important;
}

.only-uae-national-msg { color: #2c323d !important;padding: 30px 0;font-weight: 500; border-bottom: 0 !important; font-size: 14px !important;}


.error {
    color: #C3103B;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}


/* Loader CSS */
.loader {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: none;
    padding: 21px;
    position: relative;
    animation: rotate 1s linear infinite;
}
.loader::before {
    content: "";
    display: inline-flex;
    inset: 0px;
    border-radius: 50%;
    border: 5px solid #C3103B;
    animation: prixClipFix 2s linear infinite;
    width: 35px;
    height: 35px;
}

.dirham-red-ico{
    width: 80px;margin-top: -7px;
}


@keyframes rotate {
    100%   {transform: rotate(360deg)}
  }

  @keyframes prixClipFix {
      0%   {clip-path:polygon(50% 50%,0 0,0 0,0 0,0 0,0 0)}
      25%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 0,100% 0,100% 0)}
      50%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,100% 100%,100% 100%)}
      75%  {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 100%)}
      100% {clip-path:polygon(50% 50%,0 0,100% 0,100% 100%,0 100%,0 0)}
  }
  

  /* ------------------------- */



@media (max-width: 628px) { 

    .FormRightSection {
        width: -webkit-fill-available;
    }
    .TnCDetailsMob{
        display: flex;
        align-content: flex-start;
        flex-wrap: nowrap;
        height: 385px;
        justify-content: space-between;
        align-items: stretch;
        flex-direction: column;
    }

}

/* Small devices (tablets, 768px and up) */
@media (min-width: 768px) { 

    .labelRight                     { text-align: right; padding-right: 0; }

    .FormLeftSection 	            { padding:10px;}
    .FormRightSection               { padding: 0px;}

    .FormLeftSection h1	            { font-size: 30px; }
    .FormLeftSection h3	            { font-size: 16px; }

    .form-group                     { margin-bottom: 10px !important;display: flow !important;}
    .CardBGSection .form-group      { margin-bottom: 10px;}

    .CardBGSection .col-form-label      { padding-top: 4px;}

    .CardTitleRow                   { margin-bottom: 10px; margin-right: 0px; }
    .CardBGSection                  { padding: 20px 25px 15px;}

    .FormRightSection p             { padding-bottom: 10px;}


    .SavingValue .HeadingSmall      { border-right: 1px solid #7D7D7D; }
    .SavingValue .HeadingMedium     { border-right: 1px solid #7D7D7D; }
    .SavingValue .HeadingAED        { border-right: 1px solid #7D7D7D; display: inherit; color: #f0dd41; }
    .SavingValue p                  { border-right: 1px solid #7D7D7D; border-bottom: 0 solid #7D7D7D;}

    /* .DisplayStretch2                { padding-top: 20px;} */

    .PayingValue                    { padding-top: 0;}
    .StatsSection .Stat2ndLine      { margin-bottom: 0; }
    

   


}
/* 
.hidden-xs{
    display:none;
} */

.form-inline label {
    display: initial !important;
}
/* Medium devices (desktops, 992px and up) */
@media (min-width: 992px) { 

    /* .FormSection                    { display: flex;}
    .FormRightSection               { flex: 0 0 auto; display: block;}

    .NoPadRight                     { padding-right: 0;}
    .NoPadLeft10                    { padding-left: 10px;}

    .NoPadRight10:nth-child(odd)    { padding-right: 20px; padding-right: 10px;}
    .NoPadRight10:nth-child(even)   { padding-left: 10px; padding-right: 20px;}

    
    .FormLeftSection 	            { padding:30px 10px 15px;}
    .FormRightSection               { padding: 0px;}

    .SavingValue .HeadingSmall      { border-right: 0 solid #7D7D7D; }
    .SavingValue .HeadingMedium     { border-right: 0 solid #7D7D7D; }
    .SavingValue .HeadingAED        { border-right: 0 solid #7D7D7D; color: #f0dd41;}
    .SavingValue p                  { border-right: 0 solid #7D7D7D; border-bottom: 1px solid #7D7D7D;}

    .FormRightSection p             { padding-bottom: 30px;};

    .PayingValue                    { padding-top: 15px;}

    .TnCDetails                     { padding-top: 10px;}

    .DisplaySetting                 { display: flow; flex-direction: column; justify-content: space-between; height: 100%; }
    .DisplayStretch1                { flex-flow: column; flex: 0 auto; justify-content: flex-end; align-items: center; display: flex;}
    .DisplayStretch2                { flex-flow: column; flex: 0 auto; justify-content: flex-end;  display: flex;}
    .hidden-xs{
        display:block;
    }
    .img-responsive{
		display:none;
	} */
    
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { 

    .BG 				            { padding: 10px; }

    .FormLeftSection 	            { border-radius: 15px 0 0 15px; padding:10px 10px 0px 5px;}
    .FormRightSection               { border-radius: 0 15px 15px 0; padding: 0px; display: block;}

    .FormLeftSection h1	            { font-size: 34px; }
    .FormLeftSection h3	            { font-size: 16px; }

    .GrayBGSection .Heading         { padding-top: 10px;}

    .col-form-label                 { padding-top: 12px;}

    .CardBGSection                  { background: rgba(151, 151, 151, 0.09); border-radius: 15px; padding: 15px 15px 15px; margin: 0 0 20px 0;}
    .CardTitleRow                   { margin-bottom: 10px; margin-right: 0px;}

    .CardBGSection .col-form-label  { font-size: 12px; padding-top: 25px;}

    .PayingValue                    { padding-top: 20px;}

    .FormDetailSection              { padding-top: 70px; padding-bottom: 70px; }
    .FormDetailSection p            { font-size: 21px; }
     
    
}

@media (man-width: 1200px) { 

     .price-widget {
        margin: 10px 0;
    }
    
}