@font-face {
font-family: 'montserrat';
src: url('../fonts/montserrat.ttf') format('truetype');
font-weight: 400;
font-style: normal;
font-display: swap;
}

/* =========================================
RESET
========================================= */

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

html,
body {width: 100%;height: 100%;}
body {min-height: 100vh;background-color: #031445;background-image:linear-gradient(90deg,rgba(3, 20, 69, 0.90),rgba(3, 20, 69, 0.20)),url("../assets/background.png");background-size: 100% 100%;background-position: center center;background-repeat: no-repeat;color: #ffffff;overflow: hidden;}


/* =========================================
LOGO
========================================= */
.logo {position: absolute;top: 60px;left: 80px;width: auto;height: 30px;max-width: 180px;z-index: 20;}
/* =========================================
MAIN CONTENT
========================================= */
.main-content {position: relative;z-index: 10;display: flex;flex-direction: column;justify-content: center;align-items: flex-start;width: 60%;height: 100%;padding-left: 150px;padding-right: 30px;}
/* =========================================
LAUNCH SECTION
========================================= */

.launch-section {display: flex;flex-direction: column;align-items: flex-start;width: 100%;margin-top: -10vh;}
.launching-text {width: 100%;max-width: 450px;margin-bottom: 20px;font-size: 16px;font-weight: 300;letter-spacing: 10px;text-align: center;color: #e0e5f0;font-family: "montserrat";}
.fabulous-five-img {display: block;width: 100%;max-width: 450px;height: auto;}


/* =========================================
BOTTOM SECTION
========================================= */

.bottom-section {position: absolute;left: 80px;bottom: 80px;z-index: 10;width: calc(100% - 160px);max-width: 1000px;padding-right: 20px;}
.subtitle {margin-bottom: 15px;font-size: 22px;font-weight: 400;font-family: "montserrat";text-transform: uppercase;letter-spacing: 2.5px;color: #f0f4ff;line-height: 1.4;}
.description {font-size: 13px;font-weight: 300;letter-spacing: 1.5px;color: #c0c8df;font-family: "montserrat";line-height: 26px;}

/* =========================================
GET IN TOUCH BUTTON
========================================= */

.main-enquiry-btn {margin-top: 25px;padding: 12px 35px;font-family: "montserrat";background-color: transparent;color: #ffffff;border: 1px solid #ffffff;font-size: 15px;font-weight: 400;letter-spacing: 2px;cursor: pointer;transition:background-color 0.35s ease,color 0.35s ease,transform 0.35s ease;text-transform: uppercase;}
.main-enquiry-btn:hover {background-color: #ffffff;color: #031445;transform: translateY(-2px);}


/* =========================================
FIXED WHATSAPP + CALL BUTTONS
========================================= */

.fixed-contact {position: fixed;right: 25px;bottom: 25px;display: flex;flex-direction: column;gap: 12px;z-index: 9999;}
.fixed-contact-btn {position: relative;width: 52px;height: 52px;border-radius: 50%;display: flex;align-items: center;justify-content: center;text-decoration: none;font-size: 22px;color: #ffffff;box-shadow:0 8px 25px rgba(0, 0, 0, 0.30);transition:transform 0.3s ease,box-shadow 0.3s ease;}
.fixed-contact-btn:hover {transform: translateY(-4px) scale(1.05);box-shadow:0 12px 30px rgba(0, 0, 0, 0.40);}
.whatsapp-fixed {background: #25D366;}
.call-fixed {background: #031445;border: 1px solid rgba(255, 255, 255, 0.8);}


/* =========================================
TOOLTIP
========================================= */
.fixed-contact-btn::after {content: attr(data-tooltip);position: absolute;right: 65px;top: 50%;transform:translateY(-50%)translateX(5px);white-space: nowrap;padding: 6px 10px;background: #ffffff;color: #031445;font-size: 11px;letter-spacing: 0.5px;border-radius: 3px;opacity: 0;visibility: hidden;transition: all 0.25s ease;pointer-events: none;}
.fixed-contact-btn:hover::after {opacity: 1;visibility: visible;transform:translateY(-50%)translateX(0);}

/* =========================================
POPUP OVERLAY
========================================= */

.popup-overlay {position: fixed;inset: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.72);backdrop-filter: blur(7px);-webkit-backdrop-filter: blur(7px);display: flex;align-items: center;justify-content: center;padding: 20px;z-index: 10000;opacity: 0;visibility: hidden;transition:opacity 0.35s ease,visibility 0.35s ease;}
.popup-overlay.show {opacity: 1;visibility: visible;}

/* =========================================
POPUP CONTENT
========================================= */
.popup-content {position: relative;width: 100%;max-width: 480px;max-height: 90vh;overflow-y: auto;background: #ffffff;color: #031445;padding: 45px 40px 40px;border-radius: 4px;box-shadow:0 25px 80px rgba(0, 0, 0, 0.35);transform:scale(0.92)translateY(20px);opacity: 0;transition:transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),opacity 0.35s ease;}
.popup-overlay.show .popup-content {transform:scale(1)translateY(0);opacity: 1;}

/* =========================================
CLOSE BUTTON
========================================= */

.close-btn {position: absolute;top: 15px;right: 18px;width: 35px;height: 35px;border: none;background: transparent;color: #031445;font-size: 28px;font-weight: 300;line-height: 1;cursor: pointer;transition:transform 0.25s ease;}
.close-btn:hover {transform: rotate(90deg);}

/* =========================================
POPUP HEADING
========================================= */

.popup-eyebrow {margin-bottom: 10px;font-size: 11px;letter-spacing: 5px;text-transform: uppercase;color: #777f95;text-align: center;}
.popup-title {margin-bottom: 8px;font-size: 30px;font-weight: 400;font-family: "montserrat";letter-spacing: 1.5px;text-align: center;}
.popup-description {margin-bottom: 28px;text-align: center;color: #7b8294;font-size: 11px;line-height: 1.6;letter-spacing: 0.5px;font-family: "montserrat";}

/* =========================================
FORM
========================================= */

.enquiry-form {width: 100%;}
.form-group {margin-bottom: 18px;}
.form-label {display: block;margin-bottom: 7px;font-size: 12px;font-weight: 400;letter-spacing: 1px;color: #031445;}
.form-input {width: 100%;height: 48px;padding: 0 14px;border: 1px solid #d7dbe4;border-radius: 2px;outline: none;background: #fafbfc;color: #031445;font-family: 'Jost', sans-serif;font-size: 14px;font-weight: 300;transition:border-color 0.25s ease,box-shadow 0.25s ease,background 0.25s ease;}
.form-input::placeholder {color: #a3a8b3;}
.form-input:focus {border-color: #031445;background: #ffffff;box-shadow:0 0 0 3px rgba(3, 20, 69, 0.06);}

/* =========================================
PHONE INPUT
========================================= */

.phone-wrapper {display: flex;width: 100%;}
.country-code {width: 62px;height: 48px;border: 1px solid #d7dbe4;border-right: none;background: #f4f6f9;color: #031445;display: flex;align-items: center;justify-content: center;font-size: 13px;flex-shrink: 0;}
.phone-input {flex: 1;border-left: 1px solid #d7dbe4;}

/* =========================================
ERROR MESSAGE
========================================= */

.error-msg1 {display: block;min-height: 15px;margin-top: 4px;font-size: 11px;color: #b52d2d;}
.input-error {border-color: #b52d2d !important;}


/* =========================================
SUBMIT BUTTON
========================================= */

.submit-btn {width: 100%;height: 50px;margin-top: 8px;border: 1px solid #031445;background: #031445;color: #ffffff;font-family: "montserrat";font-size: 12px;font-weight: 400;letter-spacing: 2px;text-transform: uppercase;cursor: pointer;transition:background 0.3s ease,color 0.3s ease,transform 0.3s ease;}
.submit-btn:hover {background: #ffffff;color: #031445;transform: translateY(-2px);}
.submit-btn:active {transform: scale(0.98);}
.submit-btn:disabled {cursor: not-allowed;opacity: 0.7;}


/* =========================================
FORM MESSAGE
========================================= */

.form-message {display: none;text-align: center;margin-top: 15px;font-size: 13px;letter-spacing: 0.5px;}
.form-message.success {display: block;color: #247a4b;}
.form-message.error {display: block;color: #b52d2d;}


/* =========================================
LOADING
========================================= */

.submit-btn.loading {pointer-events: none;opacity: 0.7;}
.submit-btn.loading::after {content: " ...";animation: dots 1s infinite;}

@keyframes dots {
0% {
opacity: 0.2;
}
50% {
opacity: 1;
}
100% {
opacity: 0.2;
}
}


/* =========================================
BOTTOM TEXT
========================================= */
.bottom-text {position: absolute;left: 0;bottom: 25px;width: 100%;text-align: center;font-size: 10px;letter-spacing: 3px;color: rgba(255, 255, 255, 0.4);text-transform: uppercase;z-index: 5;}

/* =========================================
LARGE DESKTOP
========================================= */

@media (min-width: 1600px) {

.logo {left: 90px;top: 65px;height: 32px;}
.main-content {padding-left: 180px;}
.launching-text,
.fabulous-five-img {max-width: 500px;}
.bottom-section {left: 90px;bottom: 85px;}
}


/* =========================================
DESKTOP / LAPTOP
========================================= */

@media (max-width: 1400px) and (min-width: 1201px) {
.main-content {width: 62%;padding-left: 120px;}
.launching-text,
.fabulous-five-img {max-width: 430px;}
.bottom-section {left: 70px;bottom: 65px;}
}


/* =========================================
TABLET LANDSCAPE
========================================= */

@media (max-width: 1200px) {
.main-content {width: 70%;padding-left: 80px;}
.launching-text,.fabulous-five-img {max-width: 380px;}
.bottom-section {left: 60px;bottom: 60px;width: calc(100% - 120px);}
.subtitle {font-size: 21px;}
}


/* =========================================
992px
========================================= */

@media (max-width: 992px) {
.logo {top: 40px;left: 50px;height: 25px;}
.main-content {width: 100% !important;padding-left: 50px;padding-right: 25px;}
.launch-section {margin-top: -8vh;}
.launching-text,.fabulous-five-img {max-width: 350px;}
.launching-text {font-size: 15px;letter-spacing: 8px;}
.bottom-section {left: 50px;right: 50px;width: auto;bottom: 25vh;padding-right: 0;}
.subtitle {font-size: 20px;letter-spacing: 2px;}
.description {font-size: 13px;line-height: 24px;}
.fixed-contact {right: 20px;bottom: 25px;}
}


/* =========================================
MOBILE
KEEPING YOUR ORIGINAL DESIGN
========================================= */

@media (max-width: 768px) {
body {background-image:linear-gradient(90deg,rgba(3, 20, 69, 0.90),rgba(3, 20, 69, 0.20)),url("../assets/background-m.jpg");background-size: cover;background-position: center center;background-repeat: no-repeat;overflow: hidden;}
.logo {top: 30px;left: 30px;height: 20px;}
.main-content {width: 90%;padding-left: 30px;}
.launch-section {margin-top: -45vh;align-items: center;}
.launching-text {font-size: 14px;letter-spacing: 6px;margin-bottom: 15px;max-width: 300px;}
.fabulous-five-img {max-width: 300px;}
.bottom-section {left: 30px;right: 30px;bottom: 30px;width: auto;padding-right: 0;}
.subtitle {font-size: 18px;letter-spacing: 1.5px;margin-bottom: 82px;text-transform: uppercase;line-height: 30px;}
.description {font-size: 11px;letter-spacing: 1px;color: #fff;}
.main-enquiry-btn {margin-top: 95px;padding: 10px 25px;font-size: 13px;}

/* =====================================
POPUP
===================================== */

.popup-overlay {padding: 15px;}
.popup-content {max-width: 430px;padding: 40px 25px 28px;max-height: 88vh;}
.popup-title {font-size: 25px;}
.popup-description {font-size: 12px;margin-bottom: 23px;}
.form-input,
.country-code {height: 46px;}
.submit-btn {height: 48px;}
.bottom-text {font-size: 8px;letter-spacing: 2px;bottom: 15px;}

/* =====================================
FIXED BUTTONS
===================================== */

.fixed-contact {right: 18px;bottom: 13vh;gap: 10px;}
.fixed-contact-btn {width: 48px;height: 48px;font-size: 20px;}
}


/* =========================================
SMALL MOBILE
KEEPING YOUR ORIGINAL DESIGN
========================================= */

@media (max-width: 480px) {
body {background-position: 60% center;}
.logo {top: 20px;left: 20px;}
.main-content {padding-left: 20px;padding-right: 20px;width: 100%;}
.launching-text {font-size: 12px;letter-spacing: 4px;max-width: 250px;}
.fabulous-five-img {max-width: 250px;}
.bottom-section {left: 20px;right: 20px;text-align: center;bottom: 11%;padding-right: 0;}
.subtitle {font-size: 20px;letter-spacing: 1px;text-transform: uppercase;line-height: 36px;}
.description {font-size: 8px;letter-spacing: 0.5px;}
.main-enquiry-btn {padding: 10px 22px;font-size: 12px;letter-spacing: 1.5px;}

/* =====================================
POPUP
===================================== */

.popup-overlay {padding: 12px;}
.popup-content {padding: 38px 20px 24px;max-height: 90vh;}
.popup-eyebrow {font-size: 9px;letter-spacing: 4px;}
.popup-title {font-size: 23px;}
.popup-description {font-size: 11px;line-height: 1.5;}
.form-group {margin-bottom: 14px;}
.form-label {font-size: 11px;}
.form-input {height: 44px;font-size: 13px;}
.country-code {height: 44px;width: 58px;}
.submit-btn {height: 46px;font-size: 11px;}

/* =====================================
FIXED CONTACT BUTTONS
===================================== */

.fixed-contact {right: 12px;bottom: 10%;gap: 8px;}
.fixed-contact-btn {width: 44px;height: 44px;font-size: 18px;}
.fixed-contact-btn::after {display: none;}
}


/* =========================================
VERY SMALL HEIGHT
========================================= */
/* 
@media (max-height: 650px) and (min-width: 769px) {
.logo {top: 30px;}
.main-content {padding-top: 20px;}
.launch-section {margin-top: -5vh;}
.bottom-text {bottom: 10px;}
} */


/* =========================================
VERY SMALL MOBILE HEIGHT
========================================= */

/* @media (max-height: 700px) and (max-width: 768px) {
.launch-section {margin-top: -35vh;}
.subtitle {margin-bottom: 35px;}
.main-enquiry-btn {margin-top: 40px;}
} */


/* =========================================
LANDSCAPE MOBILE
========================================= */

@media (max-width: 900px) and (orientation: landscape) {
body {overflow: hidden;}
.logo {top: 18px;left: 25px;height: 18px;}
.main-content {width: 60%;padding-left: 30px;}
.launch-section {margin-top: 0;}
.launching-text {font-size: 11px;letter-spacing: 4px;margin-bottom: 8px;}
.fabulous-five-img {max-width: 220px;}
.bottom-section {left: 30px;bottom: 15px;width: 55%;}
.subtitle {font-size: 15px;line-height: 22px;margin-bottom: 8px;}
.description {font-size: 9px;line-height: 15px;}
.main-enquiry-btn {margin-top: 12px;padding: 7px 18px;font-size: 10px;}
.bottom-text {display: none;}
.fixed-contact {right: 12px;bottom: 15px;gap: 7px;}
.fixed-contact-btn {width: 40px;height: 40px;font-size: 16px;}
}


/* =========================================
REDUCED MOTION
========================================= */

@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {animation-duration: 0.01ms !important;animation-iteration-count: 1 !important;transition-duration: 0.01ms !important;scroll-behavior: auto !important;}
}