@font-face {
     font-family: 'StratumGMC-Black';
     font-style: normal;
     font-weight: 100 900;
     font-display: swap;
     src: url(../../assets/fonts/Stratum-GMC/StratumGMC-Black.otf) format("opentype");
 }

 @font-face {
     font-family: 'StratumGMC-Bold';
     font-style: normal;
     font-weight: 100 900;
     font-display: swap;
     src: url(../../assets/fonts/Stratum-GMC/StratumGMC-Bold.otf) format("opentype");
 }

 @font-face {
     font-family: 'StratumGMC-Light';
     font-style: normal;
     font-weight: 100 900;
     font-display: swap;
     src: url(../../assets/fonts/Stratum-GMC/StratumGMC-Light.otf) format("opentype");
 }

 @font-face {
     font-family: 'StratumGMC-Medium';
     font-style: normal;
     font-weight: 100 900;
     font-display: swap;
     src: url(../../assets/fonts/Stratum-GMC/StratumGMC-Medium.otf) format("opentype");
 }

 @font-face {
     font-family: 'StratumGMC-Regular';
     font-style: normal;
     font-weight: 100 900;
     font-display: swap;
     src: url(../../assets/fonts/Stratum-GMC/StratumGMC-Regular.otf) format("opentype");
 }

 @font-face {
     font-family: 'StratumGMC-Thin';
     font-style: normal;
     font-weight: 100 900;
     font-display: swap;
     src: url(../../assets/fonts/Stratum-GMC/StratumGMC-Thin.otf) format("opentype");
 }

 @font-face {
     font-family: 'Bukra-Black';
     font-style: normal;
     font-weight: 100 900;
     font-display: swap;
     src: url(../../assets/fonts/Bukra/29LTBukraGM-Black.ttf) format("opentype");
 }

 @font-face {
     font-family: 'Bukra-Bold';
     font-style: normal;
     font-weight: 100 900;
     font-display: swap;
     src: url(../../assets/fonts/Bukra/29LTBukraGMCorp.-Bold.otf) format("opentype");
 }

 @font-face {
     font-family: 'Bukra-Light';
     font-style: normal;
     font-weight: 100 900;
     font-display: swap;
     src: url(../../assets/fonts/Bukra/29LTBukraGMCorp.-Light.otf) format("opentype");
 }

 @font-face {
     font-family: 'Bukra-Medium';
     font-style: normal;
     font-weight: 100 900;
     font-display: swap;
     src: url(../../assets/fonts/Bukra/29LTBukraGMCorp.-Medium.otf) format("opentype");
 }

 @font-face {
     font-family: 'Bukra';
     font-style: normal;
     font-weight: 100 900;
     font-display: swap;
     src: url(../../assets/fonts/Bukra/29LTBukraGMCorp..otf) format("opentype");
 }

 @font-face {
     font-family: 'Tajawal';
     font-style: normal;
     font-weight: 100 900;
     font-display: swap;
     src: url(../../assets/fonts/Tajawal/Tajawal-Regular.ttf) format("truetype");
 }

 :root {
     --font-black: "StratumGMC-Black", sans-serif;
     --font-bold: "StratumGMC-Bold", sans-serif;
     --font-medium: "StratumGMC-Medium", sans-serif;
     --font-regular: "StratumGMC-Regular", sans-serif;
     --font-light: "StratumGMC-Light", sans-serif;
     --font-thin: "StratumGMC-Thin", sans-serif;
     --font-bukra: "Bukra", sans-serif;
     --font-bukra-bold: "Bukra-Bold", sans-serif;
     --font-bukra-black: "Bukra-Black", sans-serif;
     --font-bukra-light: "Bukra-Light", sans-serif;
     --font-bukra-medium: "Bukra-Medium", sans-serif;
     --font-tajawal: "Tajawal", sans-serif;
     --nav-background-color: #060606;
     --owl-color: rgba(255, 255, 255, 0.42);
     --owl-filled-color: #CC0000;
     --primary-font-color: #000000;
     --secondary-font-color: #ffffff;
     --primary-button-color: #CC0000;
     --form-bg-color: rgba(0, 0, 0, 0.7);
     --footer-color: #050505;
     --form-input-bg: rgba(255, 255, 255, 0.85);
     --form-input-text-color: #060606;
     --form-input-placeholder-color: #7C7C7C;
     --success-overlay-bg-color: rgba(0, 0, 0, 0.8);
     --language-selector-bg: #FFFFFFD9;
 }

 /* ==========================
   GLOBAL STYLES
========================== */
 html {
     scroll-behavior: smooth;
     overflow-x: hidden;
 }

 body {
     margin: 0;
     color: var(--primary-font-color);
     background: #060606;
 }

 body.ar {
     font-family: var(--font-bukra)
 }

 /* Shared container width */
 .container {
     width: 90%;
     max-width: 90%;
     margin: 0 auto;
     clear: both;
 }

 p {
     font-family: var(--font-regular);
     font-weight: 400;
     font-size: 16px;
     color: var(--secondary-font-color);
     margin-bottom: 2rem;

 }

 .ar p {
     font-family: var(--font-bukra-light);
     font-size: 13px;
     line-height: 22px;

 }

 p span {
     font-family: var(--font-black);
     font-size: 16px;

 }

 .ar p span {
     font-size: 14px;
 }


 h3 {
     font-family: var(--font-bold);
     font-weight: 700;
     font-size: 28px;
     text-transform: uppercase;
     color: var(--secondary-font-color);

 }

 .ar h3 {
     font-family: var(--font-bukra-bold);
     font-size: 21px;
 }

 .ar h3 span {
     font-family: var(--font-black);
     font-size: 28px;
 }

 h2 {
     font-family: var(--font-black);
     font-weight: 900;
     font-size: 28px;
     text-transform: uppercase;
     color: var(--secondary-font-color);
     margin: 10px;
 }

 .ar h2 {
     font-family: var(--font-bukra-bold);
     font-size: 21px;
     text-align: center;
     margin-left: 0;
     margin-right: 0;
 }

 .ar h2 span,
 .ar h5 span {
     font-family: var(--font-black);
     font-size: 26px;
 }

 h5 {
     font-family: var(--font-medium);
     font-weight: 500;
     font-size: 24px;
     line-height: 22px;
     text-align: center;
     color: var(--secondary-font-color);
     margin: 20px;

 }

 .ar h5 {
     font-family: var(--font-bukra-medium);
     font-size: 22px;
 }

 h4 {
     font-family: var(--font-medium);
     font-weight: 500;
     font-size: 14px;
     line-height: 22px;
     color: var(--secondary-font-color);
     margin: 0;

 }

 .ar h4 {
     font-family: var(--font-bukra);
     font-size: 12px;
 }

 label {
     font-family: var(--font-light);
     font-weight: 300;
     font-size: 10px;
     line-height: 11.5px;
     text-decoration-style: solid;
     color: var(--secondary-font-color);

 }

 .ar label {
     font-family: var(--font-bukra-light);
 }

 a {
     font-weight: 700;
     font-style: Bold;
     font-size: 10px;
     line-height: 11.5px;
     text-decoration: underline;
     color: var(--primary-button-color);

 }

 /* ==========================
   HEADER (DESKTOP)
========================== */
 header {
     position: sticky;
     top: 0;
     width: 100%;
     background-color: var(--nav-background-color);
     z-index: 999;
     padding: 1.2rem 0;
 }

 /* Align logo left and navigation right */
 header .logo-nav-div {
     display: flex;
     align-items: center;
     justify-content: space-between;
     width: 100%;
 }

 /* GMC logo sizing */
 header .logo-img {
     width: 180px;
     height: auto;
 }

 /* Desktop navigation menu */
 header nav ul {
     display: flex;
     list-style: none;
     gap: 60px;
     padding: 0;
     margin: 0;
 }

 /* Nav links base */
 header nav ul li a {
     font-family: var(--font-medium);
     font-size: 20px;
     color: var(--secondary-font-color);
     text-decoration: none;
     font-weight: 500;
     position: relative;
     display: inline-block;
     padding-bottom: 6px;
     /* space between text and red line */
 }

 .ar header nav ul li a {
     font-family: var(--font-bukra);
     font-weight: 400;
     font-size: 16px;

 }

 .ar .eng-nav {
     font-family: var(--font-medium);
     font-size: 20px;

 }

 /* Hidden red line */
 header nav ul li a::after {
     content: "";
     position: absolute;
     left: 0;
     bottom: -6px;
     /* sits below text because of padding-bottom */
     width: 100%;
     height: 2px;
     background-color: var(--primary-button-color);
     transform: scaleX(0);
     transform-origin: left;
     transition: transform 0.35s ease, opacity 0.35s ease;
     opacity: 0;
 }

 /* Show red line on hover */
 header nav ul li a:hover::after {
     transform: scaleX(1);
     opacity: 1;
 }


 /* ==========================
   HAMBURGER ICON (MOBILE)
========================== */
 header .hamburger {
     display: none;
     flex-direction: column;
     gap: 5px;
     cursor: pointer;
 }

 header .hamburger span {
     width: 25px;
     height: 3px;
     background-color: var(--secondary-font-color);
 }

 /* ==========================
   MOBILE MENU PANEL
========================== */



 /* Mobile menu links layout */
 header .mobile-menu ul {
     list-style: none;
     padding: 0;
     margin: 0;
     display: flex;
     flex-direction: column;
     gap: 30px;
     justify-content: center;
     align-items: center;
 }

 /* Mobile menu links */
 header .mobile-menu ul li a {
     font-family: var(--font-medium);
     font-size: 20px;
     color: var(--secondary-font-color);
     text-decoration: none;
     font-weight: 500;
     position: relative;
     display: inline-block;
     padding-bottom: 0.7rem;
     /* space between text and line */
 }

 .ar header .mobile-menu ul li a {
     font-family: var(--font-bukra);
     font-size: 16px;
 }

 header .mobile-menu ul li a {
     position: relative;
     display: inline-block;
     padding-bottom: 0.7rem;
 }

 header .mobile-menu ul li a::after {
     content: "";
     position: absolute;
     left: 0;
     bottom: 0;
     width: 100%;
     height: 2px;
     background-color: var(--primary-button-color);
     opacity: 0;
     transform: scaleX(0);
     transform-origin: left;
     transition: transform 0.3s ease, opacity 0.3s ease;
     z-index: 99999;
 }

 .ar header .mobile-menu ul li a::after {
     top: 25px;
     bottom: unset;
 }

 header .mobile-menu ul li a.active::after {
     opacity: 0.9;
     transform: scaleX(1);
 }


 .menu-overlay {
     position: fixed;
     inset: 0;
     background: rgba(0, 0, 0, 0.55);
     opacity: 0;
     visibility: hidden;
     transition: opacity 0.3s ease;
     z-index: 998;
 }

 .menu-overlay.active {
     opacity: 1;
     visibility: visible;
 }

 header .mobile-menu {
     position: fixed;
     top: -100%;
     left: 0;
     width: 100%;
     height: auto;
     background-color: var(--primary-font-color);
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 30px;
     z-index: 999;
     padding-bottom: 10px;
     transition: top 0.4s ease;
 }

 /* When open */
 header .mobile-menu.active {
     top: 0;
 }

 .swipe-line {
     width: 60px;
     height: 5px;
     background: #ccc;
     border-radius: 10px;
     margin-top: 8px;
     margin-bottom: 10px;
 }



 /* ==========================
   VISIBILITY
========================== */
 .hide-mobile {
     display: block;
 }

 .hide-desktop {
     display: none;
 }

 /* Owl Carousel dots styling */
 #header-image .owl-dots {
     position: absolute;
     bottom: 20px;
     left: 50%;
     transform: translateX(-50%);
     display: flex;
     justify-content: center;
     z-index: 10;
 }

 #header-image .owl-dots .owl-dot span {
     background: var(--owl-color);
     width: 84px;
     height: 3px;
     display: block;
     margin: 0 3px;
 }

 #header-image .owl-dots .owl-dot.active span {
     background: var(--owl-filled-color);
 }

 /* Ensure hero images cover properly */
 #header-image .owl-carousel .owl-item img {
     width: 100%;
     height: auto;
     display: block;
     object-fit: cover;
     object-position: left;
 }

 .image-header-div {
     position: relative;
 }

 /* HERO FORM POSITION */
 .header-image-section {
     position: relative;
 }

 .hero-form-wrapper {
     position: absolute;
     right: 5%;
     top: 50%;
     transform: translateY(-50%);
     z-index: 5;
     width: 460px;
 }

 /* FORM CONTAINER */
 .hero-form {
     background: rgba(0, 0, 0, 0.75);
     padding: 25px;
 }

 .ramdan-logo {
     position: absolute;
     left: 5%;
     /* distance from the left edge */
     top: 20%;
     /* vertically center */
     transform: translateY(-50%);
     z-index: 5;
     max-width: 120px;
     /* adjust size as needed */
 }

 .ramdan-logo img {
     width: 182px;
     height: 203px;

 }

 #language-selector {
     margin-bottom: 1rem;
 }

 #language-selector a {
     font-family: var(--font-tajawal);
     color: var(--secondary-bg-color);
     text-decoration: none;
     font-size: 16px;
     font-weight: 500;
     text-decoration: none;
     border: 1px solid var(--secondary-font-color);
     padding: 5px 10px;
     background-color: var(--language-selector-bg);


 }

 .ar #language-selector a {
     font-family: var(--font-light);
     font-weight: 400;

 }

 #About {
     margin-top: 2rem;
     margin-bottom: 2rem;
 }

 #About .about-div {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 40px;
 }

 #About .about-div>div {
     flex: 0 0 50%;
     max-width: 50%;
 }

 #About .about-image {
     width: 100%;
     height: auto;
     display: block;
 }

 #About .table-image {
     width: 100%;
     height: auto;
     display: block;

 }

 .bottom-cta {
     width: 22%;
     height: 42px;
     margin: 50px auto;
     border: solid 1px var(--primary-button-color);
     background: var(--primary-button-color);
     text-align: center;
     cursor: pointer;
     font-family: var(--font-black);
     font-weight: 900;
     font-size: 21px;
     text-transform: uppercase;
     color: var(--secondary-font-color);
     text-decoration: none;
     display: flex;
     justify-content: center;
     align-items: center;
 }

 .ar .bottom-cta {
     font-family: var(--font-bukra-bold);
 }

 footer {
     background-color: var(--footer-color);
     height: 30px;
     margin-top: 2rem;
 }

 .form-container {
     width: 100%;
     max-width: 420px;
     margin: 2rem 0 0 auto;
     padding: 20px;
     background: var(--form-bg-color);
     border-radius: 5px;
 }

 fieldset {
     border: none;
     margin: 0 auto;
     padding: 0;
     width: 100%;
 }

 .form input,
 .form select {
     width: 100%;
     height: 38px;
     border: none;
     color: var(--form-input-text-color);
     background: var(--form-input-bg);
     padding: 0 12px;
     font-weight: 300;
     font-size: 14px;
     line-height: 18px;
     box-sizing: border-box;
     font-family: var(--font-light);
     border-radius: 0;
 }

 .ar .form input,
 .ar .form select {
     font-family: var(--font-bukra-light);
 }

 .ar .iti__tel-input {
     text-align: right;

 }

 .form input{
     color: var(--form-input-text-color);
 }
::placeholder {
     color: var(--form-input-placeholder-color);
 }
 .iti {
     width: 100%;
 }

 .select-wrap {
     position: relative;
 }

 .select-wrap select {
     -webkit-appearance: none;
     -moz-appearance: none;
     appearance: none;
     width: 100%;
     height: 38px;
     padding: 0 30px 0 12px;
     /* space for arrow */
     box-sizing: border-box;
     cursor: pointer;
 }

 .ar .select-wrap select {
     padding: 0 12px 0 30px;
 }

 /* 🔻 Your arrow now works */
 .select-wrap::after {
     content: '';
     position: absolute;
     top: 50%;
     right: 12px;
     transform: translateY(-50%);
     width: 0;
     height: 0;
     border-left: 3px solid transparent;
     border-right: 3px solid transparent;
     border-top: 4px solid #333;
     pointer-events: none;
 }

 .ar .select-wrap::after {
     right: auto;
     left: 12px;
 }

 .submit {
     border: none;
     background: var(--primary-button-color);
     width: 100%;
     font-family: var(--font-black);
     font-weight: 900;
     font-size: 21px;
     text-align: center;
     text-transform: uppercase;
     cursor: pointer;
     color: var(--secondary-font-color);
     padding: 10px;
 }

 .ar .submit {
     font-family: var(--font-bukra-bold);
 }

 .form-group {
     position: relative;
     margin: 0 0 5px 0;
     width: 100%;
 }

 .flex-group,
 .flex-group-one {
     display: flex;
     gap: 5px;
 }

 .flex-group-one .form-group:first-child {
     width: 75px;
     flex: 0 0 75px;
 }

 .flex-group-one .form-group:nth-child(2),
 .flex-group-one .form-group:nth-child(3) {
     width: calc((100% - 75px - 2px) / 2);
 }
.iti__selected-country {
    gap: 2px;
}

 .privacy-box .error {
     bottom: -10px;
    left: 15px;
     right: unset;
 }

 .ar .privacy-box .error {
     text-align: right;
     right: 0;
     bottom: -10px;
     margin-right: 15px;
 }

 .error {
     display: block;
     margin-top: 2px;
     transition: all 0.3s ease;
     color: red;
     font-size: 8px;
     font-family: var(--font-medium);
     text-align: right;
     position: absolute;
     right: 0;
     bottom: 0;
     white-space: nowrap;
     line-height: 1em;
 }

 .ar .error {
     text-align: left;
     right: unset;
     left: 0;
     font-family: var(--font-bukra);
     bottom: 3px;
     margin-top: 0;
 }

 /* Remove Chrome autofill blue background */
 input:-webkit-autofill,
 input:-webkit-autofill:hover,
 input:-webkit-autofill:focus,
 input:-webkit-autofill:active {
     -webkit-box-shadow: 0 0 0 1000px rgb(218 218 220) inset !important;
     /* background color */
 }


 .form-group.checkboxes label {
     position: relative;
     cursor: pointer;
     display: inline-block;
 }

 .main-form .privacy-box input#privacy {
     width: 15px;
     height: 15px;
     background: #FFFFFF4D;
     z-index: 9;
     position: absolute;
     opacity: 0;
     cursor: pointer;
     margin: 0;
 }

 .main-form .privacy-box .checkmark {
     width: 15px;
     height: 15px;
     flex-shrink: 0;
     border: 0.5px solid #ffffff;
     background: rgba(255, 255, 255, 0.3);
     /* #FFFFFF4D */
     box-sizing: border-box;
     position: relative;
     cursor: pointer;
     -webkit-transform: translateZ(0);
     cursor: pointer;
 }

 .main-form .privacy-box {
     display: flex;
     align-items: flex-start;
     gap: 7px;
     margin-bottom: 15px;
     position: relative;
 }

 .main-form .privacy-box input:checked+.checkmark {
     background: rgba(255, 255, 255, 0.3);
 }

 .main-form .privacy-box input:checked+.checkmark::after {
     content: "";
     position: absolute;
     left: 4.5px;
     top: 1px;
     width: 3px;
     height: 8px;
     border: solid #ffffff;
     border-width: 0 2px 2px 0;
     transform: rotate(45deg);
 }
/* success popup */
#success-overlay { display: flex; justify-content: center; align-items: center; position: fixed; top: 0px; bottom: 0px; width: 100%; z-index: 99999999; background-color: rgba(0, 0, 0, 0.8); color: #3d3d3d; }
#success-overlay-innerwrap { display: block; position: relative; width: 92%; max-width: 600px; min-height: 180px; padding: 40px; background-color: rgb(255 255 255 / 90%); border-radius: 5px;    display: flex; justify-content: center; flex-direction: column;    box-sizing: border-box; }
#success-overlay h4 { text-align: center; font-size: 30px; color: #191919; font-family: 'StratumBold'; margin-bottom: 10px; line-height: 1.2em; }
#success-overlay h5 { text-align: center; font-size: 16px; color: #191919; margin: 0;}
#success-overlay-close { position: absolute; right: 0px; top: 0px; font-size: 22px; cursor: pointer; padding: 12px 15px 8px; font-weight: 600; background: #000; color: #fff; font-family: 'Stratum900'; }

.ar #success-overlay h4 { font-family: 'BukraMedium', serif; direction: rtl; margin-bottom: 20px; font-size: 26px;}
.ar #success-overlay h5 { font-family: 'Bukra',serif; direction: rtl; line-height: 1.4em; font-size: 14px; }
.ar #success-overlay-close { left: 0; right: unset; }

 /* 100 years floating logo */
 .floating-logo { width: 235px; height: auto; position: absolute; left: 22px; margin-top: 25px; z-index: 2;}
 .floating-logo img{width: 100%;}

@media screen and (min-width:769px) {
  .mobile{display: none;}
}
 /* MOBILE RESPONSIVE */
 @media (max-width: 768px) {
    .ar #success-overlay h4 {font-size: 20px;}
    .ar #success-overlay h5{font-size: 12px;}

    .desktop{display: none;}
    .floating-logo{width: 100px; height: auto; margin-top: 10px; }
     .hero-form-wrapper {
         position: static;
         transform: none;
         width: 100%;
         margin-top: -5px;
     }

     .hero-form {
         border-radius: 0;
     }

     .form-row {
         flex-direction: column;
     }
 }

 @media (min-width: 1600px) and (max-width: 3000px) {

     p {
         font-size: 28px;
     }

     p span {
         font-size: 28px;
     }

     h3 {
         font-size: 32px;
     }
 }

 @media (min-width:769px) and (max-width:1400px) {
     #header-image .owl-carousel .owl-item img {
         height: 600px;
     }

     .form-container {
         margin-top: 1rem;
     }

 }

 /* ==========================
   RESPONSIVE (LAPTOP)
========================== */
 @media (max-width: 1400px) {
     header nav ul {
         gap: 30px;
     }


 }


 /* ==========================
   RESPONSIVE (MOBILE)
========================== */
 @media (max-width: 768px) {

     /* Hide desktop nav & logo row layout */
     header nav ul,
     header .logo-nav-div {
         display: none;
     }

     /* Show hamburger */
     header .hamburger {
         display: flex;
     }

     /* Position close hamburger inside mobile menu */
     header #hamburger-active {
         padding-top: 2rem;
         padding-right: 2rem;
     }


     /* Reverse header layout so hamburger appears left */
     header .container {
         flex-direction: row;
         display: flex;
         justify-content: space-between;
     }

     .hide-mobile {
         display: none;
     }

     .hide-desktop {
         display: block;
     }

     .about-div {
         display: flex;
         flex-direction: column;
         gap: 10px;
         align-items: center;
     }

     #About .about-div>div {
         flex: 0 0 100%;
         max-width: 100%;
     }

     header .logo-img {
         width: 101px;
         height: 19px;
     }

     .ramdan-logo {
         position: absolute;
         left: unset;
         right: 10%;
         top: 65px;
         transform: translateY(-50%);
         z-index: 5;
         max-width: 120px;
     }

     .ramdan-logo img {
         width: 130px;
         height: 130px;
     }

     .form-container {
         width: unset;
         max-width: unset;
     }



     .flex-group-one {
         flex-wrap: wrap;
         /* allow wrapping */
     }

     .flex-group-one .form-group:first-child {
         flex: 0 0 120px;
         margin-bottom: 0rem;
     }

     /* Second child: take remaining space */
     .flex-group-one .form-group:nth-child(2) {
         flex: 1;
         /* fill remaining width */
         margin-bottom: 0rem;
     }

     /* Last item: full width, block */
     .flex-group-one .form-group:nth-child(3) {
         width: 100%;
         flex: 0 0 100%;
         display: block !important;
         /* force block */
     }

     #About .container {
         width: 100%;
         max-width: 100%;
     }

     .ar #About .container {
         flex-direction: column-reverse;
     }

     .about-content {
         width: 90%;
         max-width: 90%;
     }

     h2 {
         font-size: 25.5px;
         text-align: center;
     }


     .bottom-cta {
         width: 80%;
         margin: 30px auto 10px auto;
     }

     footer {
         height: 20px;
         margin-top: 0rem;
     }

     h3 {
         margin-bottom: 0;
     }

     p {
         margin-bottom: 1rem;
     }

     .mobile-carousel {
         display: flex;
         align-items: stretch;
         justify-content: space-between;
         width: 90%;
     }

     .mobile-carousel .static,
     .mobile-carousel .mobile-slider {
         width: 50%;
     }

     #About .owl-carousel .owl-item img {
         height: 220px;
     }

     #MobileSlider .owl-dots {
         position: absolute;
         top: -20px;
         left: -100%;
         transform: none;
         /* remove centering shift */
         display: flex;
         justify-content: flex-start;
         /* align dots to the left */
         z-index: 10;
     }

     .ar #MobileSlider .owl-dots {
         top: -20px;
         right: -100%;
         left: unset;
         justify-content: flex-end;
         z-index: 10;
     }

     #About .owl-nav {
         display: none;
     }

     #About {
         margin-top: 0 !important;
         margin-bottom: 0 !important;
     }

     #MobileSlider {
         position: relative;
     }

     #MobileSlider .owl-dots .owl-dot span {
         background: var(--owl-color);
         width: 84px;
         height: 3px;
         display: block;
         margin: 0 3px;
     }

     #MobileSlider .owl-dots .owl-dot.active span {
         background: var(--owl-filled-color);
     }


     .mobile-div>div:first-child {
         order: 3;
     }

     .privacy-box .error {
         bottom: -12px;
        
     }

     .mobile-nav-div {
         display: flex;
         flex-direction: row;
         justify-content: space-between;
         align-items: baseline;
         width: 100%;
         padding-left: 2rem;
         padding-top: 1rem;
     }

     #language-selector {
         position: relative;
         z-index: 99;
         padding-right: 2rem;
         margin-top: -4rem;
     }

     .ar h2 {
         font-size: 17.5px;

     }

     .ar h2 span,
     .ar h5 span {
         font-size: 20px;
     }

     .ar label {
         font-size: 9px;
     }

     .ar .form input,
     .ar .form select {
         font-size: 12px;
     }



 }

 @media (max-width: 500px) {
     #About .owl-carousel .owl-item img {
         height: 220px;
         width: unset !important;
     }

     .ar #About .owl-carousel .owl-item img {
         height: 200px;
     }

     .ar #MobileSlider .owl-item {
         display: flex;
         flex-direction: row;
         justify-content: flex-end;
     }

     .ar .owl-item.active {
         opacity: 1;
     }

     .ar .owl-item {
         opacity: 0;
     }

     .ar #Static-two .item,
     .ar #Static .item {
         display: flex;
         flex-direction: column;
     }
 }