@font-face {
  font-family: "Montserrat-Black";
  src: url("../../../../front-asset/font/Montserrat-Black.otf") format("opentype");
}

@font-face {
  font-family: "Montserrat-Bold";
  src: url("../../../../front-asset/font/Montserrat-Bold.otf") format("opentype");
}

@font-face {
  font-family: "Montserrat-Regular";
  src: url("../../../../front-asset/font/Montserrat-Regular.otf") format("opentype");
}

body {
  font-family: "Montserrat-Regular";
  background-color: #fff;
}

main .bg {
  position: relative;
  height: 100vh;
}
main .bg img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
main .bg .title {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.78rem;
  color: #fff;
  font-family: "Montserrat-Bold";
  overflow: hidden;
}
main .bg .title span {
  transform: translateY(100%);
  opacity: 0;
  transition: all 0.8s;
  display: block;
}
main .bg .title .text_down {
  transform: translateY(0%);
  opacity: 1;
}
main .bg .brand_banner_line {
  position: absolute;
  width: 100%;
  bottom: 0;
  left: 0;
  overflow: hidden;
}
main .bg .brand_banner_line div {
  background-color: rgb(254, 118, 0);
  width: 50%;
  height: 3px;
  margin-top: 0.06rem;
}
 

main .content {
  width: 60%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  flex-direction: column;
  padding: 1.177rem 0;
}
main .content .t1 {
  font-size: 0.45rem;
  font-family: "Montserrat-Bold";
}
main .content .t2 {
  font-size: 0.25rem;
  font-family: "Montserrat-Bold";
  text-align: center;
  line-height: 0.38rem;
  margin-top: 0.6rem;
  margin-bottom: 0.36rem;
}
main .content .t2 span {
  color: #ff8002;
}
main .content .box {
  width: 100%;
}
main .content .box .t {
  text-transform: uppercase;
  font-size: 0.25rem;
  font-family: "Montserrat-Bold";
}
main .content .box .tabs {
  display: flex;
  align-items: center;
  gap: 0.18rem;
  margin-top: 0.27rem;
}
main .content .box .tabs .tab {
  flex: 1;
  height: 0.58rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.19rem;
  color: #5b5b5b;
  border: 1px solid #5b5b5b;
  cursor: pointer;
  text-transform: uppercase;
}
main .content .box .tabs .tab.active {
  background-color: #000;
  color: #fff;
}
main .content .box input {
  border: none;
  outline: none;
  font-size: 0.25rem;
  flex: 1;
  font-family: "Montserrat-Regular";
}
main .content .box .input-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 0.32rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.3);
  margin-top: 0.7rem;
  position: relative;
}
main .content .box .input-box img {
  width: 0.3rem;
}
main .content .box .input-box ul {
  position: absolute;
  top: 0.65rem;
  width: 100%;
  font-size: 0.2rem;
  z-index: 4;
  background-color: #fff;
  box-shadow: 0 0 0.5rem 0 rgba(0, 0, 0, 0.1);
  height: 4.2rem;
  overflow-y: scroll;
  overflow-x: hidden;
  transition: all 0.5s;
}
main .content .box .input-box ul li {
  padding: 0.2rem;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 0.25rem;
}
main .content .box .input-box ul li:hover {
  background-color: rgba(0, 0, 0, 0.15);
}
main .content .box textarea {
  width: 100%;
  font-family: "Montserrat-Regular";
  font-size: 0.25rem;
  height: 1.84rem;
  resize: none;
  margin-top: 0.45rem;
  padding: 0.2rem 0.3rem;
}
main .content .box2 {
  margin-top: 1.3rem;
}
main .content .privacy-box {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-top: 1rem;
}
main .content .privacy-box .box {
  width: 0.3rem;
  height: 0.3rem;
  border: 3px solid #030303;
  margin-right: 0.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
main .content .privacy-box .box img {
  width: 70%;
}
main .content .privacy-box .t {
  font-size: 0.23rem;
  display: flex;
}
main .content .privacy-box .t .link {
  text-decoration: underline;
  cursor: pointer;
}
main .content .btn {
  display: block;
  width: 2.5rem;
  height: 0.6rem;
  line-height: 0.6rem;
  text-align: center;
  font-size: 0.14rem;
  cursor: pointer;
  margin-top: 0.7rem;
  background-color: #000;
  color: #fff;
  border-radius: 0.5rem;
  font-family: "Montserrat-Bold";
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.5rem;
}
main .content .btn img {
  width: 0.2rem;
}

.privacy_close_box {
  position: sticky;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  height: 1rem;
}

.privacy_close {
  width: 0.3rem;
  opacity: 0.5;
  transition: all 0.3s;
  cursor: pointer;
  margin-right: 0.4rem;
}

.privacy_close:hover {
  opacity: 1;
}

.privacy_pop .page_title {
  font-size: 0.44rem;
  color: #333;
  text-align: center;
  font-family: "Montserrat-Bold";
  font-weight: 700;
  letter-spacing: 0.022rem;
}

.privacy_pop .page_main {
  margin-top: 0.5rem;
  font-size: 0.18rem;
  line-height: 0.4rem;
  color: #333;
  font-family: "Montserrat-Regular";
}

.privacy_pop .page {
  padding: 0.2rem 1.2rem 1.2rem;
}

.privacy_pop {
  width: 100%;
  height: 100vh;
  z-index: 50000;
  position: fixed;
  opacity: 0;
  transition: all 0.4s;
  pointer-events: none;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.4);
}

.privacy_pop .privacy_pop_min {
  position: relative;
  width: 80%;
  height: 80vh;
  background-color: #fff;
  top: 80%;
  left: 50%;
  transform: translate(-50%, -50%);
  overflow-y: scroll;
  box-shadow: 0 0 0.5rem 0 rgba(0, 0, 0, 0.1);
  transition: all 0.4s;
}

.privacy_pop.active {
  /* opacity: 1; */
  pointer-events: auto;
}

.privacy_pop.active .privacy_pop_min {
  top: 52%;
}

.privacy_pop.active {
  opacity: 1;
  pointer-events: auto;
}

.submit_ok_pop {
  width: 100%;
  height: 100vh;
  z-index: 50000;
  position: fixed;
  transition: all 0.4s;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.4);
}
.submit_ok_pop .box {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background-color: #fff;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 20%;
  padding: 0.5rem 0;
  border-radius: 0.1rem;
}
.submit_ok_pop .box .t {
  font-family: "Montserrat-Bold";
  font-size: 0.32rem;
  text-align: center;
}
.submit_ok_pop .box .btn {
  display: block;
  width: 2.5rem;
  height: 0.6rem;
  line-height: 0.6rem;
  text-align: center;
  font-size: 0.14rem;
  cursor: pointer;
  margin-top: 0.7rem;
  background-color: #000;
  color: #fff;
  border-radius: 0.5rem;
  font-family: "Montserrat-Bold";
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0.5rem;
}
.submit_ok_pop .box .btn img {
  width: 0.2rem;
}

.footer {
  width: 100%;
}

/* button */
.btn-stay{
  width: 2.7rem;
  height: 0.6rem;
  border-radius: 50px;
  overflow: hidden;
  margin: 0 auto;
  margin-top: 0.7rem;
}
.btn-stay .bt_mask{
  background-color: #000;
}
.btn-stay .bt_t{
  color: #fff;
  font-weight: bold;
}

.btn-stay_1{
  width: 2.7rem;
  height: 0.6rem;
  border-radius: 50px;
  overflow: hidden;
  margin-top: 1.1rem;
}
.btn-stay_1 .bt_mask{
  background-color: #000;
}
.btn-stay_1 .bt_t{
  color: #fff;
  font-weight: bold;
}



@media (max-width: 768px) {
  main .bg {
    height: auto;
  }
  main .bg .title {
    font-size: 0.6rem;
    width: 90%;
    text-align: center;
  }
  main .content {
    width: 84%;
    padding: 1rem 0;
  }
  main .content .t1 {
    font-size: 0.55rem;
  }
  main .content .t2 {
    font-size: 0.3rem;
    text-align: left;
    margin-top: 0.2rem;
    margin-bottom: 1rem;
  }
  main .content .box .t {
    font-size: 0.3rem;
  }
  main .content .box .tabs {
    flex-wrap: wrap;
  }
  main .content .box .tabs .tab {
    width: 48.5%;
    flex: none;
    height: 0.9rem;
    font-size: 0.2rem;
  }
  main .content .box input {
    font-size: 0.3rem;
  }
  main .content .box textarea {
    height: 3.6rem;
  }
  main .content .privacy-box .box {
    width: 0.25rem;
    height: 0.25rem;
    border: 1px solid #000000;
  }
  main .content .btn {
    width: 100%;
    height: 0.9rem;
    font-size: 0.25rem;
    justify-content: center;
    position: relative;
  }
  main .content .btn img {
    width: 0.32rem;
    position: absolute;
    right: 0.6rem;
  }
  .submit_ok_pop .box {
    width: 55%;
  }
}/*# sourceMappingURL=contact.css.map */

 

 /* new form */

   /* Container Styling */
.contact-form-container {
  max-width: 100%;
  margin: 0 auto;
  text-align: center;
}

.contact-form-container h2 {
  font-size: 29px;
  color: #ff4500; /* Orange color for the title */
  margin-bottom: 40px;
}

.contact-form-container p {
  font-size: 19px;
  color: #555;
  margin-bottom: 40px;
}

/* Form Styling */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.form-row {
  display: flex;
  gap: 15px;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  padding: 10px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 5px;
  box-sizing: border-box;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: #aaa;
}

/* Specific Styling for Rows */
.form-row input,
.form-row select {
  flex: 1;
}

/* Textarea Styling */
.contact-form textarea {
  resize: vertical;
  min-height: 100px;
}

/* Button Styling */
.submit-button {
  background-color: #333;
  color: #fff;
  border: none;
  padding: 10px;
  font-size: 16px;
  cursor: pointer;
  border-radius: 5px;
  transition: background-color 0.3s;
}

.submit-button:hover {
  background-color: #555;
}

/* end */


/* General Alert Styles */
.alert {
  display: flex;
  align-items: center; /* Center content vertically */
  padding: 15px 20px; /* Top-bottom, left-right padding */
  border-radius: 5px; /* Rounded corners */
  margin-bottom: 20px; /* Space between alerts */
  position: relative; /* Position for the close button */
  font-family: Arial, sans-serif; /* Font family */
}

/* Success Alert Styles */
.alert-success {
  background-color: #d4edda; /* Light green background */
  border: 1px solid #c3e6cb; /* Darker green border */
  color: #155724; /* Dark green text */
}

/* Error Alert Styles */
.alert-danger {
  background-color: #f8d7da; /* Light red background */
  border: 1px solid #f5c6cb; /* Darker red border */
  color: #721c24; /* Dark red text */
}

/* Close Button Styles (Optional) */
.alert .close {
  position: absolute; /* Position the close button */
  right: 15px; /* Space from the right */
  top: 15px; /* Space from the top */
  cursor: pointer; /* Pointer cursor on hover */
  font-size: 18px; /* Font size for the close button */
}

/* Animation for Showing Alerts (Optional) */
@keyframes fadeIn {
  from {
      opacity: 0;
  }
  to {
      opacity: 1;
  }
}

.alert {
  animation: fadeIn 0.5s ease-in; /* Fade-in animation */
}




.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  justify-content: center;
  align-items: center;
}

/* Modal Content */
.modal-content {
  background-color: white;
  padding: 30px;
  border-radius: 8px;
  text-align: center;
  width: 90%; /* Mobile full width */
  max-width: 300px; /* Max width for larger screens */
  margin: 0 auto;
}

/* Modal Heading */
.modal-content h2 {
  font-size: 24px;
  margin-bottom: 20px;
  font-weight: bold;
  color: #333;
}

/* Confirm Button */
.custom-submit-btn {
  background-color: black;
  color: white;
  font-size: 16px;
  font-family:'Montserrat-Regular';
  padding: 10px 25px;
  border: none;
  border-radius: 50px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0 auto;
}

.custom-submit-btn:hover {
  background-color: orange;
}

.custom-submit-btn::after {
  content: '➔';
  font-size: 18px;
  color: orange;
}

/* Ensure Modal is Centered */
.modal {
  display: flex;
  justify-content: center;
  align-items: center;
}



.modal-content-privacy {
  background-color: white;
  padding: 20px;
  border-radius: 8px;
  text-align: center;
  width: 90%; /* Mobile full width */
  max-width: 80%; /* 80% width on desktop */
  max-height: 80%; /* Ensure modal doesn't overflow */
  margin: 0 auto;
  overflow-y: auto; /* Enable scrolling */
}

/* Modal Body (Scrollable Content) */
.modal-body {
  max-height: 50vh; /* Limit the content area height to 50% of the viewport height */
  overflow-y: auto; /* Enable vertical scrolling */
  padding-right: 10px; /* Ensure space for scrollbar */
}


/* Media Query for Mobile */
@media (max-width: 768px) {
  .modal-content-privacy {
      width: 100%; /* Full width on mobile */
      max-width: none; /* Override max width for mobile */
      height: auto; /* Allow auto height on mobile */
  }
}


.no-link-style {
  font-weight: normal !important;
  color: black; /* Inherits the parent element's color */
  text-decoration: none; /* Removes the underline */
  cursor: pointer; /* Keeps the cursor as a pointer to indicate it's clickable */
}

.no-link-style:hover {
  color: inherit; /* Optional: No change on hover */
  text-decoration: underline; /* Optional: Add underline on hover */
}

 /* Modal Container */
#successModal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex; /* Flexbox for centering */
  align-items: center; /* Center vertically */
  justify-content: center; /* Center horizontally */
  z-index: 1000;
  display: none; /* Hidden initially */
}

/* Modal Content */
#successModal .modal-content {
  background-color: white; /* Modal box background */
  border-radius: 10px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  padding: 20px;
  text-align: center;
  width: 310px; /* Fixed width */
  max-width: 90%; /* Responsive */
  max-height: 90vh; /* Prevent the modal from stretching too tall */
  overflow-y: auto; /* Scroll if content exceeds max height */
}

 


.header_mask{
  opacity: 1 !important;
}
.cookies_title{
text-align: center;
font-size: 0.58rem;
font-family: 'Montserrat-Bold';
}
.cookie_min{
padding: 2rem 3rem 2rem;
}
.cookies_detail{
margin-top: 0.8rem;
font-size: 0.24rem;
}
@media (max-width: 768px){
.cookie_min{
  padding: 1rem;
}
}

 
input[type="date"] {
  height: 40px;  
  line-height: 1.5;  
  padding: 5px 10px;  
  font-size: 16px; /* Match font size */
}
.text-danger { color:red; }

.d-none {
  display: none !important;
}
.titleh2 h1 {     font-size: .6rem;
  font-weight: 600; padding-bottom: 35px; }
 @media(min-width:900px){
     main .bg { margin-top: 60px; }
    
   }

   /* ===== Layout ===== */
.form-row{
    display:flex;
    gap:10px;
    width:100%;
}

.form-group{
    flex:1;
}

/* ===== Phone field ===== */
.phone-wrap{
    width:100%;
}

.phone-box{
    display:flex;
    align-items:center;
    border:1px solid #ccc;
    border-radius:4px;
    overflow:hidden;
    background:#fff;
    height:42px;
    width:100%;
}

/* +971 */
.phone-box .cc{
    background:#ffffff;
    padding:0 12px;
    font-size:14px;
    font-weight:600;
    border-right:1px solid #ccc;
    white-space:nowrap;
}

/* Phone input */
.phone-box input{
    border:none !important;
    outline:none;
    padding:0 12px;
    width:100%;
    height:100%;
    font-size:14px;
}

/* Normal inputs */
.form-group input{
    width:100%;
    height:42px;
    box-sizing:border-box;
}
 
/* ===== Mobile ===== */
@media (max-width: 768px){

    .form-row{
        flex-direction:column;
        gap:12px;
    }

    /* On mobile, split +971 and phone */
    .phone-box{
        border:none;
        background:none;
        height:auto;
        gap:10px;
    }

    .phone-box .cc{
        border:1px solid #ccc;
        border-radius:4px;
        padding:11px;
        height: 42px;
    }

    .phone-box input{
        border:1px solid #ccc !important;
        border-radius:4px;
        height:42px;
    }
}


/* Modal Styles */
.modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.7);
    animation: fadeIn 0.3s;
}

.modal-content {
    background-color: #fff;
    margin: 15% auto;
    padding: 30px;
    border-radius: 10px;
    width: 90%;
    max-width: 500px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
    animation: slideIn 0.3s;
    text-align: center;
}

.modal-content h2 {
    margin-bottom: 15px;
    color: #28a745;
    font-size: 24px;
}

.modal-content p {
    margin-bottom: 25px;
    color: #666;
    font-size: 16px;
    line-height: 1.5;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideIn {
    from { transform: translateY(-50px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.custom-submit-btn {
    background-color: #000000;
    color: white;
    border: none;
    padding: 12px 35px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    transition: background-color 0.3s;
    min-width: 120px;
}

.custom-submit-btn:hover {
    background-color: #4f5051;
}

/* Form Styles */
.contact-form-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 30px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.form-row {
    margin-bottom: 20px;
}

.form-row input,
.form-row select,
.form-row textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid #ddd;
    border-radius: 5px;
    font-size: 16px;
    box-sizing: border-box;
}

.form-row textarea {
    min-height: 120px;
    resize: vertical;
}

.phone-wrap {
    position: relative;
}

.iti {
    width: 100%;
}

/* Button States */
.submit-button {
    width: 100%;
    padding: 15px;
    background: #000000;
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}

.submit-button:hover:not(:disabled) {
    background: #58595b;
    transform: translateY(-2px);
}

.submit-button:disabled {
    background: #ccc;
    cursor: not-allowed;
    transform: none;
}

/* Responsive */
@media (max-width: 768px) {
    .contact-form-container {
        padding: 20px;
        margin: 0 15px;
    }
    
    .modal-content {
        margin: 30% auto;
        padding: 20px;
    }
}

/* Row layout */
.form-row {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
}

.form-row input,
.form-row select {
    flex: 1;
    width: 100%;
}

/* Phone wrapper */
.phone-wrap {
    flex: 1;
}

/* intl-tel-input ONLY inside phone-wrap */
.phone-wrap .iti {
    width: 100% !important;
}

.phone-wrap .iti input {
    width: 100% !important;
    box-sizing: border-box;
}

/* Match height with other inputs */
.phone-wrap .iti--separate-dial-code input {
    height: 42px !important;
}

/* Remove inline width restriction */
.phone-wrap .iti--allow-dropdown {
    width: 100% !important;
}

/* Textarea full width */
.contact-form textarea {
    width: 100%;
}

/* Mobile */
@media (max-width: 768px) {
    .form-row {
        flex-direction: column;
    }
}


/* FORCE full width for this page */
main .content {
  width: 90% !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
}

.contact-form-container {
  width: 90% !important;
  max-width: 100% !important;
}


.error-text {
    color: red;
    font-size: 13px;
    margin-top: 4px;
    display: block;
}