:root { --primary-color: #38618d; --accent-color: #030327; --bg-gradient: linear-gradient(135deg, #1f3a52, #38618d, #acc8df); --text-light: #ffffff; --text-muted: whitesmoke; --hover-color: #1f3a52; --highlight-color: darkgray; --link-underline: #aaaeb3; --blue-accent: #007bff; --background-color1: #266686; --semi-overlay-blue: rgba(50, 65, 104, 0.772); --cool-orange: #afaf1d; --scrollbar-1: white; --overlay-bg: rgba(0, 0, 0, 0.3); /* Semi-transparent black background */ /* AD section specific colors */ --ad-width: 170px; --ad-height: 205px; --ad-bg-overlay: rgba(0, 0, 0, 0.7); --ad-heading-color: white; --ad-paragraph-color: white; /* VISION section specific colors */ --vision-gradient-start: #1f3a52; --vision-gradient-end: #38618d; --vision-text-color: #F0F0F0; --vision-heading-color: whitesmoke; --vision-box-shadow: rgba(0, 0, 0, 0.1); --vision-hover-shadow: rgba(0, 0, 0, 0.15); --vision-overlay: rgba(0, 0, 0, 0.5); /* ABOUT section specific colors */ --about-gradient-start: #1f3a52; --about-gradient-mid: #38618d; --about-gradient-end: #acc8df; --about-text-color: #F0F0F0; --about-heading-color: whitesmoke; --about-link-color: white; --about-link-hover: var(--cool-orange); /* already defined */ --started-btn-hover: #1b8e4f; /* FUN section specific colors */ --fun-gradient: linear-gradient(135deg, var(--color-primary-dark), var(--color-primary-mid), var(--color-primary-light)); --fun-yellow: rgb(179, 179, 45); --fun-white: #ffffff; /* THERAPHY section specific colors */ --therapy-color-background: #0e1c2a; --therapy-card-gradient-start: #1f3a52; --therapy-card-gradient-mid: #38618d; --therapy-card-gradient-end: #acc8df; --therapy-header-text-color: #ffffff; --therapy-highlight-color: #007BFF; --therapy-box-shadow: rgba(0, 0, 0, 0.1); --therapy-box-shadow-hover: rgba(0, 0, 0, 0.2); /* Button gradient for About */ --about-btn-gradient: linear-gradient(135deg, var(--about-gradient-start), var(--about-gradient-mid)); --z-index-low: 1; /* General low z-index */ /* WHY section specific colors */ --why-gradient-start: #1f3a52; --why-gradient-mid: #38618d; --why-gradient-end: #acc8df; --why-title-color: rgb(233, 229, 229); --why-paragraph-color: rgb(233, 229, 229); --why-link-color: white; --why-link-hover: #afaf1d; --why-button-bg: linear-gradient(135deg, var(--why-gradient-start), var(--why-gradient-mid)); --why-button-hover-bg: var(--why-gradient-start); --why-list-icon-color: #afaf1d; --therapist-title-color: #fff; --therapist-subtext-color: #ddd; --therapist-name-color: #fff; --therapist-role-color: #ddd; --therapist-hover-zoom: scale(1.05); --join-link-color: #0d0f85; --join-link-hover: #afaf1d; /* FEATURES section specific colors */ --features-bg-gradient: linear-gradient(135deg, #1f3a52, #38618d, #acc8df); --features-heading-color: #ffffff; --button-session-bg: #0b3251; --button-session-hover: #030450; --button-resource-bg: rgb(4, 103, 4); --button-resource-hover: rgb(2, 46, 2); --carousel-button-bg: #043c75; --carousel-icon-color: #ffffff; --button-text-color: #ffffff; /* TESTIMONIALS section specific colors */ --testimonials-left-bg: #06111a; --testimonials-right-bg: #38618d; --testimonials-overlay-bg: #1f3a52; --testimonials-text-color: white; --testimonials-rating-color: #afaf1d; --testimonials-underline-color: #0da4b1; --testimonials-circle-bg: #043c75; /* ADVERT section specific colors */ --advert-bg: #1f3a52; --advert-highlight: #afaf1d; --advert-highlight-hover: #cfcf4b; --advert-text-color: #fff; --advert-box-bg: rgba(255, 255, 255, 0.05); /*MEDITATION section specific colors */ --med-primary: #38618d; --med-light-gray: #dfe6e9; --med-dark: #1f3a52; --med-nav-bg: rgba(0, 0, 0, 0.5); /* Check Section Colors */ --check-bg-gradient: linear-gradient(135deg, #1f3a52, #38618d, #acc8df); --check-dark-blue: #1f3a52; --check-mid-blue: #38618d; --check-light-blue: #acc8df; --check-white: #ffffff; --check-grey-bg: #d8d7d7; --chat-text-color: #232020; --scrollbar-track: #f1f1f1; --scrollbar-track-bg: #f1f1f1; --scrollbar-thumb-hover: #1f3a52; /* Shadows */ --shadow-light: rgba(0, 0, 0, 0.1); --shadow-mid: rgba(0, 0, 0, 0.2); /* RANGER SECTION */ --ranger-primary: #1f3a52; --ranger-secondary: #38618d; --ranger-accent: #acc8df; --ranger-rating-color: #afaf1d; --overlay-dark: rgba(0, 0, 0, 0.6); --overlay-darker: rgba(0, 0, 0, 0.7); --ranger-card-bg: rgb(196, 190, 190); --text-light: #ffffff; --ranger-primary-text: #1f3a52; /* MOTIVATION SECTION COLORS */ --motivation-bg-dark: #222; --motivation-bg-medium: #444; --motivation-btn-bg: #666; --motivation-btn-hover: #1f3a52; --motivation-text-light: whitesmoke; --motivation-text-white: #fff; --motivation-shadow: rgba(0, 0, 0, 0.5); /*PARTNERS SECTION*/ --partners-bg-gradient: linear-gradient(135deg, #1f3a52, #38618d, #acc8df); --partner-box-bg: #1a364f; --partner-button-bg: #1f2937; --partner-button-hover: #111827; --partner-text-color: white; --partner-underline: white; --partner-overlay-bg: rgba(0, 0, 0, 0.7); /*OUA APP*/ --our-app-bg-dark: #111827; --our-app-bg-darker: #1f2937; --our-app-text: white; --our-app-underline: #1f2937; /*OUR TEAM*/ --team-section-bg: transparent; --team-text-color: white; --team-underline-color: #1f2937; /*FAQ SECTION*/ --faq-bg-gradient-start: #1f3a52; --faq-bg-gradient-middle: #38618d; --faq-bg-gradient-end: #acc8df; --faq-title-color: #ece7e7; --faq-text-color: white; --faq-border-color: #1f2937; --faq-hover-bg: #1f3a52; --faq-answer-bg: #f7f7f7; --faq-question-bg: linear-gradient(135deg, var(--faq-bg-gradient-start), var(--faq-bg-gradient-middle)); --faq-question-color: var(--faq-text-color); --faq-answer-text-color: #333; --faq-border-light: #ddd; /* Contact Section Variables */ --contact-bg: rgba(2, 2, 113, 0.772); --contact-heading-bg: #043c75; --contact-form-border: #555; --contact-input-bg: whitesmoke; --contact-input-color: black; --contact-label-color: #555; --contact-btn-bg: linear-gradient(135deg, #1f3a52, #38618d); --contact-btn-hover-bg: #1f3a52; --contact-icon-color: #fff; --contact-icon-hover-color: #ddd; --contact-form-border: #1f3a52; --contact-input-bg: whitesmoke; --contact-border-color: #555; /* Footer color palette */ --footer-bg-primary: rgba(2, 2, 113, 0.772); --footer-bg-light: #fbfbfd; --footer-text-color: #fff; --footer-muted-text: #6a7695; --footer-highlight: #5e2ced; --footer-icon-bg: #ebeef5; --footer-hover-bg: #1b3750; --footer-bottom-bg: white; --footer-bottom-text: black; --footer-text-color: #6a7695; --footer-hover-link-color: #1f3a52; --footer-social-icon-color: #858da8; --footer-social-icon-bg: #ebeef5; --footer-social-hover-bg: #1b3750; --footer-social-hover-border: #5e2ced; --footer-social-hover-color: #ffffff; --footer-heading-color: #263b5e; --footer-link-hover-color: #5e2ced; --footer-button-hover-bg: transparent; --footer-button-hover-color: #5e2ced; --footer-bottom-text-color: #1f3a52; /* Logout Section Colors */ --logout-link-color: #ffffff; --logout-hover-color: #1f3a52; /* Modal Section Colors */ --modal-overlay-bg: rgba(0, 0, 0, 0.5); --modal-content-bg: #ffffff; --modal-header-bg: #dc3545; --modal-header-text-color: #ffffff; --modal-close-hover-color: #000000; /* Error States */ --input-error-border: red; --error-message-color: red; --font-size-heading: 1.5rem; --font-size-body: 1rem; --spacing-sm: 10px; --spacing-lg: 100px; } h1 { font-size: 1.rem; /* Or your preferred default */ } h2 { margin-bottom: 1rem; } ul { list-style-type: square; padding-left: 1.25rem; } * { margin: 0; padding: 0; box-sizing: border-box; } body, html { margin: 0; padding: 0; height: 100%; /* Ensure the body takes full height */ width: 100%; overflow-x: hidden; overflow-y: auto; /* Ensure vertical scrolling is enabled */ scroll-behavior: smooth; /* Smooth scrolling for better UX */ } /* Scrollbar Styling */ body::-webkit-scrollbar { width: 5px; /* Width of the scrollbar */ } body::-webkit-scrollbar-track { background: var(--scrollbar-1); /* Background color of the track */ border-radius: 10px; /* Rounded corners for the track */ } body::-webkit-scrollbar-thumb { background: var(--scrollbar-1); /* Color of the scrollbar */ border-radius: 10px; /* Rounded corners for the thumb */ } body::-webkit-scrollbar-thumb:hover { background: var(--accent-color); /* Darker color when hovered */ } body::before { content: ''; position: fixed; /* Use fixed positioning to make the background cover the entire page */ top: 0; left: 0; right: 0; bottom: 0; background: #f2f6f9; background-size: 300% 300%; opacity: 1; /* Make the background image faint */ z-index: -1; /* Position the background behind the content */ pointer-events: none; /* Prevent the background from interfering with interactions */ } /* Firefox scrollbar (optional but recommended for scalability) */ @supports (scrollbar-width: thin) { body { scrollbar-width: thin; scrollbar-color: #fff #e4e4e4; } } /*INTRO LAYOUT SECTION*/ /* Overlay */ /*#region PANEL LAYOUT*/ /* Hide by default on desktop */ .slide-hint { display: none; } .intro-logo { position: absolute; top: 20px; /* space from top */ left: 20px; /* space from left */ width: 200px; /* adjust size */ height: auto; z-index: 10; /* keeps it above other elements */ } .intro-cover { position: fixed; inset: 0; display: none; /* hide by default */ z-index: 9999; overflow: hidden; background: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%); color: #fff; transition: transform 1s ease-in-out; } #mainContent { display: none; } .panel { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 40px; transition: transform 1s ease-in-out; } .panel img { max-width: 280px; height: auto; margin-bottom: 20px; } .panel h1 { font-size: 3rem; margin: 0 0 15px; } .panel p { font-size: 1.2rem; margin-bottom: 25px; } .intro-cover .panel img { width: 250px; height: 250px; object-fit: cover; border-radius: 50%; background: linear-gradient(135deg, #70b800, #0481c1); box-shadow: 0 0 10px rgba(4, 129, 193, 0.5), 0 0 25px rgba(112, 184, 0, 0.7); transition: transform 0.3s ease, box-shadow 0.3s ease; } .intro-cover .panel img:hover { transform: scale(1.08); box-shadow: 0 0 20px rgba(4, 129, 193, 0.7), 0 0 40px rgba(112, 184, 0, 0.6); } .start-btn { background: transparent; border: 2px solid #0481C1; color: #0481C1; box-shadow: 0 0 12px rgba(4, 129, 193, 0.6); font-weight: 600; padding: 12px 28px; border-radius: 50px; border: none; cursor: pointer; box-shadow: 0 0 18px rgba(4, 129, 193, 0.6); } .start-btn:hover { background: #0481C1; color: #fff; } .panel button:not(.start-btn) { background: transparent; border: 2px solid #70B800; color: #70B800; box-shadow: 0 0 12px rgba(112, 184, 0, 0.6); font-weight: 600; padding: 12px 24px; border-radius: 50px; border: none; cursor: pointer; transition: transform 0.3s ease, box-shadow 0.3s ease; } .panel button:not(.start-btn):hover { background: #70B800; color: #fff; } .intro-cover.introhidden { transform: translateY(-100%); opacity: 0; transition: transform 1s ease, opacity 1s ease; } /* Exit animation */ .slide-left { transform: translateX(-100%); } .slide-right { transform: translateX(100%); } /*#endregion PANEL LAYOUT*/ /* Optional: Reset margin and add padding to headings if necessary */ section { width: 100vw; /* Full viewport width */ margin: 0; /* Remove outside spacing */ padding: 0; /* Remove inside spacing */ border-radius: 0; /* Remove card-like rounded edges */ box-shadow: none; /* Remove card shadow */ background: none; /* Or keep background if needed */ left: calc(-1 * (100vw - 100%)/2); /* center it back */ } section h2 { margin-top: 0; padding-top: 20px; } /* Adjust spacing to ensure section headings are not hidden behind a fixed header */ /*#region Header*****************************************************HEADER*****************************************/ /* Header Styling */ /* Header Flex Layout */ header { color: var(--text-light); padding: 10px 21px; position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; display: flex; justify-content: space-between; align-items: center; background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.25); transition: transform 0.3s ease-in-out; margin-top: -5px; /* Add this line */ } .logo-container { display: flex; align-items: center; margin-right: 50px; margin-left: 110px; /* Add some margin to separate the logo from the nav */ flex-shrink: 0; /* Prevent it from shrinking on small screens */ } .logo-video { width: 240px; height: 10%; border-radius: 10%; object-fit: contain; } /* --- Icon nav links --- */ nav { display: flex; justify-content: center; align-items: center; } /* Remove bullets and space items evenly */ .nav-links { display: flex; align-items: center; justify-content: center; gap: 60px; /* equal spacing between icons */ list-style: none; /* remove bullets globally */ padding: 0; margin: 0; } /* Each link layout */ .nav-links li a { display: flex; flex-direction: column; /* stack icon on top, text below */ align-items: center; justify-content: center; color: var(--text-muted); font-family: 'Nunito', sans-serif; font-size: 13.5px; font-weight: 200; text-decoration: none; position: relative; overflow: visible; transition: color 0.3s ease, transform 0.3s ease; height: 55px; } /* Icon styling */ .nav-links li a i { font-size: 20px; margin-bottom: 20px; /* πŸ‘ˆ spacing between icon and text */ transition: transform 0.3s ease, color 0.3s ease; } /* Text (span) */ .nav-links li a span { opacity: 0; transform: translateY(8px); transition: all 0.3s ease; pointer-events: none; position: absolute; top: 32px; white-space: nowrap; } /* Hover animations */ .nav-links li a:hover { color: #0481c1; } .nav-links li a:hover i { transform: scale(1.15); } .nav-links li a:hover span { opacity: 1; transform: translateY(0); pointer-events: auto; transition: all 0.25s cubic-bezier(0.22, 0.61, 0.36, 1); /* smoother easing */ } .nav-links.hide { transform: translateY(-200%) !important; transition: transform 0.4s ease; } .dropdown-service { position: relative; } .dropdown-service-toggle { cursor: pointer; } .dropdown-service-menu { display: none; width: 250px; position: absolute; top: 100%; left: -19px; background-color: var(--background-color); padding: 10px; list-style: none; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); } .dropdown-service-menu li { margin: 0; padding: 0; } .dropdown-service-menu li a { display: block; padding: 10px; text-decoration: none; color: var(--text-muted); border-radius: 8px; background-color: transparent; transition: transform 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease, color 0.25s ease; } .dropdown-service-menu li a:hover { transform: scale(1.07); background-color: rgba(4, 129, 193, 0.15); /* soft blue tint */ color: #0481c1; box-shadow: 0 3px 12px rgba(4, 129, 193, 0.4); } .dropdown-service:hover .dropdown-service-menu { display: block; } /* βœ… Align logout with others */ #logout-link { display: flex; /* match layout of other items */ flex-direction: column; align-items: center; justify-content: center; text-decoration: none; color: var(--text-muted); font-family: 'Nunito', sans-serif; font-size: 13.5px; font-weight: 200; height: 55px; margin: 0; /* align perfectly with others */ transition: all 0.3s ease; } /* Hover effect for logout */ #logout-link:hover { color: #acc8df; transform: scale(1.1); cursor: pointer; text-decoration: none; } /* Language selector container */ .language-container { position: relative; width: 158px; margin-left: 25px; top: -7px; /* Adjust as needed */ } /* Language selector button */ .language-select { background: linear-gradient(135deg, #70b800, #0481c1); color: white; padding: 5px; border-radius: 15px; text-align: center; cursor: pointer; font-size: 0.875rem; font-weight: 200; font-family: 'Nunito', sans-serif; transition: all 0.3s ease-in-out; } .language-select:hover { background: var(--hover-color); } /* Language dropdown styles */ .language-dropdown { display: none; position: absolute; width: 100%; background: rgba(50, 65, 104, 0.95); border-radius: 12px; overflow: hidden; padding: 5px 0; list-style: none; margin: 5px 0 0; box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2); } .language-dropdown li { padding: 5px; color: white; text-align: center; cursor: pointer; transition: background 0.3s ease-in-out; font-family: 'Nunito', sans-serif; font-size: 0.877rem; } .language-dropdown li:hover { background: var(--hover-color); } /* Show dropdown when active */ .language-container.active .language-dropdown { display: block; } .subscribe-btn { width: 105px; height: 45px; padding: 10px; border-radius: 30px; background: linear-gradient(135deg, #ff6a00, #ee0979); border-style: outset; color: var(--text-light); cursor: pointer; margin-bottom: 10px; margin-left: 65px; font-size: 0.8rem; font-weight: 600; position: relative; /* Adding the vibration animation with pauses */ animation: shake 3s ease-in-out infinite; animation-delay: 2s; transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease; box-shadow: 0 0 40px rgba(238, 9, 121, 0.6), 0 0 70px rgba(255, 106, 0, 0.5); /* Pause before starting */ } .subscribe-btn .btn-text { transition: opacity 0.4s ease; } .subscribe-btn::after { content: "Welcome ..."; position: absolute; inset: 0; background-color: transparent; color: var(--text-light); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.4s ease; } .subscribe-btn:hover::after { opacity: 1; } .subscribe-btn:hover .btn-text { opacity: 0; } .subscribe-btn:hover { background: linear-gradient(135deg, #70b800, #0481c1); } /* New section styles */ .intro-section { background-color: var(--text-light); padding: 0.5rem 0.5rem; text-align: center; margin-top: -1rem; } .intro-heading { font-size: 2.5rem; font-weight: bold; line-height: 1.2; } .intro-subheading { font-size: 1.25rem; margin: 0; } .intro-tag { font-weight: bold; color: var(--blue-accent); } /*#endregion HEADER*/ /*#region BEAMING CONTAINER ON SCREEN EFFECT*/ .container-i { position: relative; display: flex; flex-direction: column; align-items: center; left: 45px; top: -95px; animation: heartbeat 3.3s infinite; } .circle-container { position: relative; width: 40px; height: 40px; top: 280px; } .large-circle { position: absolute; top: 0; left: 0; width: 40px; height: 40px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.1); /* lightest transparent */ } .medium-circle { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 25px; height: 25px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.15); /* medium transparent */ } .small-circle { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 10px; height: 10px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.2); /* darkest transparent */ } .circle-text-container { background-color: rgba(255, 255, 255, 0.1); backdrop-filter: blur(8px); backdrop-filter: blur(10px); color: white; padding: 5px 10px; border-radius: 25px; margin-top: 245px; /* gap between circle and text */ text-align: center; width: 12%; margin-left: 201px; } /*CONTAINER 2*/ .container-2 { position: relative; display: flex; flex-direction: column; align-items: center; left: 105px; top: -310px; min-height: 400px; /* reserve space */ animation: heartbeat 3.3s infinite; } .circle-container-2 { position: relative; width: 40px; height: 40px; top: 280px; } .large-circle-2 { position: absolute; top: 0; left: 0; width: 40px; height: 40px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.1); /* lightest transparent */ } .medium-circle-2 { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 25px; height: 25px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.15); /* medium transparent */ } .small-circle-2 { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 10px; height: 10px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.2); /* darkest transparent */ } .circle-text-container-2 { background-color: rgba(255, 255, 255, 0.1); backdrop-filter: blur(8px); backdrop-filter: blur(10px); color: white; padding: 5px 10px; border-radius: 25px; margin-top: 245px; /* gap between circle and text */ text-align: center; width: 10%; margin-left: 176px; } @keyframes heartbeat { 0% { transform: scale(1); } 50% { transform: scale(1.2); } 100% { transform: scale(1); } } @keyframes zoom { 0% { transform: scale(0.9); } 50% { transform: scale(1.1); } 100% { transform: scale(0.9); } } /*#endregion HEADER*/ /*#region Backround**********************************************************BACKGROUND********************************************************/ /******************************** Styling for the image header section ************************************/ .section-image { position: relative; background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.25); background-size: cover; background-position: center; background-repeat: no-repeat; width: 100vw; height: 100vh; overflow: hidden; z-index: 2; /* πŸ’‘ The magic mask (square hole on the right side) */ -webkit-mask-image: radial-gradient(circle at 95% 50%, transparent 60px, black 120px); mask-image: radial-gradient(circle at 72% 50%, transparent 80px, black 120px); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } .section-image { transition: -webkit-mask-image 0.6s ease-in-out, mask-image 0.6s ease-in-out; } .section-image:hover { -webkit-mask-image: radial-gradient(circle at 80% 45%, transparent 180px, black 260px); mask-image: radial-gradient(circle at 72% 45%, transparent 180px, black 260px); } .section-image::before { content: ""; position: absolute; top: 0; left: 0; height: 100%; width: 100%; background: rgba(0, 0, 0, 0.5) !important; /* dark overlay */ z-index: 0; } .overlay { flex: 1; display: flex; flex-direction: column; align-items: flex-start; z-index: 2; } .gradient-text { background: linear-gradient(135deg, #70b800, #0481c1); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; font-weight: 800; letter-spacing: 0.5px; text-shadow: 0 0 8px rgba(0, 0, 0, 0.1); /* soft glow */ } /* Define the keyframes for vibration */ @keyframes vibrate { 0%, 100% { transform: translateX(0); } 25%, 75% { transform: translateX(-2px); } 50% { transform: translateX(2px); } } /* Slider Animation (Green Progress Bar) */ @keyframes sliderAnimation { 0% { width: 0%; } 100% { width: 100%; } } .image-progress-bar { position: absolute; bottom: 0; left: 0; height: 10px; background: var(--background-color1); width: 0; animation: sliderAnimation 7s linear infinite; z-index: 1000; } .stress-badge { display: inline-block; background: linear-gradient(135deg, #00dbde, #fc00ff); color: #fff; font-size: 0.85rem; font-weight: 600; padding: 0.45rem 1.1rem; border-radius: 2rem; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 1rem; margin-top: 20px; } /* Overlay effect */ /* Main image overlay container */ .image-overlay { position: absolute; top: 25%; left: 10%; color: white; text-align: left; z-index: 2; } /* H2 container for heading */ .h2-container { text-align: left; line-height: 55px; font-weight: 600; font-size: 50px; padding: 10px; width: 60%; border-radius: 15px; margin-bottom: 10px; margin-left: 25px; transition: all 0.3s ease-in-out; } .h3-container { text-align: left; margin-bottom: 10px; margin-left: 40px; transition: all 0.3s ease-in-out; } /* P container for text */ .b-container { width: 70%; margin-left: 40px; border-radius: 15px; margin-bottom: 10px; transition: all 0.3s ease-in-out; } /* Ensure text stands out in containers */ .h2-container h2, .b-container p { color: white; } /* Donate button */ .donate-button { background-color: rgba(23, 162, 102, 0.9); } /* Styling for image header */ .section-image { position: relative; width: 100vw; height: 100vh; overflow: hidden; margin-top: 0rem; padding: 0; } .image-header-img { width: 100%; height: 800px; display: block; object-fit: cover; } /* Hidden class for elements */ .hidden { display: none; opacity: 0; } /* Fade-in class for elements */ .fade-in { display: block !important; opacity: 1; animation: fadeIn 0.5s ease-in-out; } @keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } } .bottom-container { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); width: 72%; /* <--- Adjust this */ display: flex; gap: 30px; background-color: rgba(255, 255, 255, 0.1); padding: 15px 25px; border-radius: 15px; border: 0.1px solid #e4e5e7; backdrop-filter: blur(10px); color: #fff; z-index: 2; flex-wrap: wrap; justify-content: center; } .counseling-section { text-align: center; max-width: 190px; } .counseling-section i { font-size: 20px; /* adjust as needed */ background: linear-gradient(135deg, #70b800, #0481c1); -webkit-background-clip: text; /* applies gradient to text shape */ -webkit-text-fill-color: transparent; /* hides the original solid text color */ display: inline-block; margin-bottom: 1px; } .counseling-section h6 { font-weight: bold; margin-bottom: 5px; text-align: center; } .counseling-section p { font-size: 0.85rem; text-align: center; margin-left: 10px; } /* Image styling (acts as background) */ /* Container for the image slideshow */ .image-slideshow { position: absolute; bottom: 0; right: 0; /* Positioned at the right edge */ width: 100%; /* Full width of the parent */ height: 90vh; /* Fixed height for the container */ overflow: hidden; /* Hide anything that overflows */ border-radius: 10px; /* Optional: rounded corners */ margin-left: 40px; max-width: none; /* Remove size restriction */ } /* Image styling */ .sec-image { position: absolute; top: 0; left: 0; width: 100%; /* Image will take up the full width of the container */ height: 100%; /* Image will take up the full height of the container */ object-fit: contain; /* Ensures the image covers the entire container without stretching */ border-radius: 10px; /* Optional: rounded corners */ opacity: 0; /* Initially hidden */ transition: opacity 1s ease-in-out, transform 0.5s ease; pointer-events: none; z-index: 1; } /* Show only the active image */ .sec-image.active { opacity: 1; z-index: 1; transform: scale(1.05); /* Optional: slight zoom effect */ pointer-events: auto; } .sec-image2 { position: absolute; bottom: 0; left: 400px; width: 100%; max-width: none; /* Remove size restriction */ height: 90vh; /* Take up most of the viewport height */ border-radius: 10px; object-fit: contain; /* Ensure full image shows without cropping */ opacity: 0; transition: opacity 1s ease-in-out, transform 0.5s ease; pointer-events: none; z-index: 1; } /*#endregion*/ /*#region Brief********************************************************************************BRIEF***********************************************/ /* wrapper controls how long #brief-section is pinned */ .brief { position: fixed; top: 80px; left: 50%; transform: translateX(-50%); width: 92%; height: 80vh; z-index: 1; /* Flex layout preserved */ display: flex; flex-direction: row; /* Text left, video right */ justify-content: space-between; align-items: center; /* Background & aesthetics */ background: linear-gradient(135deg, #eef3f7 0%, #abbeca 100%); background-size: cover; background-position: center; margin: 0 auto; /* Let scroll events pass through outer container */ pointer-events: none; overflow: visible; } .brief.pinned { position: fixed; top: 80px; left: 50%; transform: translateX(-50%); width: 92%; height: 80vh; z-index: 1; /* let scroll pass through */ pointer-events: none; /* let scroll events pass through */ overflow: visible; } .brief.pinned * { pointer-events: auto; /* children stay interactive */ } .brief-scroll-catcher { position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; } /* the wrapper controls when the brief can be pinned */ .brief-wrapper { position: relative; height: 200vh; /* give enough space for scroll */ /* how long the brief area occupies in document flow */ width: 100%; z-index: 1; scroll-margin-top: 100px; } .centered-content { max-width: 45%; /* Text takes left 45% */ text-align: left; margin: 0; margin-top: -30px !important; /* Adjust this value to shift it right */ /* Optional: Limits the width of the content for better readability */ } /*CONTAINER k*/ .container-j { position: absolute; display: flex; flex-direction: column; align-items: center; left: 10px; top: -180px; animation: heartbeat 3.3s infinite; } .circle-container-j { position: relative; width: 40px; height: 40px; top: 280px; left: 25px } .large-circle-j { position: absolute; top: 0; left: 0; width: 40px; height: 40px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.1); /* lightest transparent */ } .medium-circle-j { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 25px; height: 25px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.15); /* medium transparent */ } .small-circle-j { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 10px; height: 10px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.2); /* darkest transparent */ } .circle-text-container-j { background-color: rgba(255, 255, 255, 0.1); backdrop-filter: blur(8px); backdrop-filter: blur(10px); color: white; padding: 5px 10px; border-radius: 25px; margin-top: 245px; /* gap between circle and text */ text-align: center; width: 45%; margin-left: 240px; } /*CONTAINER k*/ .container-k { position: absolute; display: flex; flex-direction: column; align-items: center; left: 10px; top: -20px; animation: heartbeat 3.3s infinite; } .circle-container-k { position: relative; width: 40px; height: 40px; top: 280px; } .large-circle-k { position: absolute; top: 0; left: 0; width: 40px; height: 40px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.1); /* lightest transparent */ } .medium-circle-k { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 25px; height: 25px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.15); /* medium transparent */ } .small-circle-k { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 10px; height: 10px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.2); /* darkest transparent */ } .circle-text-container-k { background-color: rgba(255, 255, 255, 0.1); backdrop-filter: blur(8px); backdrop-filter: blur(10px); color: white; padding: 5px 10px; border-radius: 25px; margin-top: 245px; /* gap between circle and text */ text-align: center; width: 45%; margin-left: 170px; } .video-container { max-width: 50%; /* Video takes right 50% */ position: relative; /* Keep circle overlays */ width: 100%; height: 400px; max-width: 550px; border-radius: 20px; overflow: hidden; margin-top: -50px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); } .video-container video { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 20px; } .head-animate { opacity: 0; transform: translateY(-100%); transition: all 0.8s ease-out; } .head-animate.animate { opacity: 1; transform: translateY(0); } .centered-content-animate { opacity: 0; transform: translateX(-100%); transition: all 0.8s ease-out; } .centered-content-animate.animate { opacity: 1; transform: translateX(0); } /* pinned state: visually fixed to the viewport while wrapper is in view */ .scroll-cue { position: fixed; /* stay at screen edge */ margin-left: 10px !important; /* far left */ top: 65%; /* center vertically */ transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; z-index: 9999; pointer-events: none; opacity: 0; /* hidden by default */ transition: opacity 0.3s ease; } .scroll-cue.active { opacity: 1; /* only show when brief is visible */ } .scroll-btn { pointer-events: auto; /* clickable */ background: rgba(4, 129, 193, 0.8); color: #fff; border: none; border-radius: 50%; width: 25px; height: 25px; font-size: 18px; cursor: pointer; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); transition: transform 0.2s ease; } .scroll-btn:hover { transform: scale(1.1); background: rgba(238, 9, 121, 0.8); } .scroll-text { writing-mode: vertical-rl; text-orientation: mixed; color: #222; font-size: 12px; letter-spacing: 2px; opacity: 0.8; } /* Fun section scroll buttons share the same style as regular scroll-btn */ .fun-up-btn, .fun-down-btn { pointer-events: auto; background: rgba(4, 129, 193, 0.8); color: #fff; border: none; border-radius: 50%; width: 25px; height: 25px; font-size: 18px; cursor: pointer; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); transition: transform 0.2s ease, background 0.2s ease; } .fun-up-btn:hover, .fun-down-btn:hover { transform: scale(1.1); background: rgba(238, 9, 121, 0.8); } /* If you want, you can also optionally make the fun-cue container identical to scroll-cue */ .fun-cue { position: fixed; left: 0; top: 60%; transform: translateY(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; z-index: 9999; pointer-events: none; opacity: 0; transition: opacity 0.3s ease; } .fun-cue.active { opacity: 1; } .brief-heading .heed { font-size: var(--font-size-heading); margin-bottom: var(--spacing-sm); font-weight: bold; color: var(--text-muted); } .brief-heading { font-size: var(--font-size-heading); margin-bottom: var(--spacing-sm); font-weight: bold; color: var(--cool-orange); } /* Style for the GIFs */ .brief-gif-right { position: absolute; top: 20px; right: -10px; width: 230px; height: 230px; object-fit: cover; border: none; border-radius: 50%; animation: bounce 2s infinite; pointer-events: none; cursor: not-allowed; } /* Keyframes to scroll the text */ @keyframes scrollText { 0% { transform: translateX(0%); } 100% { transform: translateX(-100%); } } @keyframes bounce { 0%, 20%, 50%, 80%, 100% { transform: translateY(0); } 40% { transform: translateY(-20px); } 60% { transform: translateY(-10px); } } /* Center the brief-announcement at the bottom of the page */ .centered-content p { line-height: 28px; font-size: medium; color: #222; } /*#endregion*/ /*#region Advert Screen**************ADVET SCREEN*************************************************************/ .ad-container { position: fixed; right: 0; top: 60%; transform: translateY(-50%); width: var(--ad-width); height: var(--ad-height); min-width: 150px; min-height: 150px; z-index: 1000; overflow: hidden; background-color: transparent; border-radius: 10px; display: flex; flex-direction: column; justify-content: center; } /* Main Ad Box */ .ad { position: absolute; right: -300px; /* Off-screen initially */ opacity: 0; transition: opacity 0.5s ease-in-out; pointer-events: none; width: 100%; height: 100%; background: var(--ad-bg-overlay); /* Slight background for contrast */ padding: 10px; border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; } /* Image Container */ .ad-image-container { width: 100%; aspect-ratio: 4 / 3; /* Adjust ratio as needed */ display: flex; justify-content: center; align-items: center; position: relative; overflow: hidden; } .ad img { max-width: 100%; /* Ensure image fits within the container */ max-height: 80%; width: 100%; height: auto; aspect-ratio: 4 / 3; /* Keeps space stable */ /* Prevents stretching */ object-fit: cover; /* Keeps image proportional */ border-radius: 5px; margin-top: -12px; } /* Text Container */ .ad-content { width: 100%; height: 35%; /* Remaining space for text */ text-align: center; display: flex; flex-direction: column; justify-content: center; } .ad-content h3 { font-size: 0.875rem; margin-bottom: 2px; color: var(--ad-heading-color); white-space: normal; word-wrap: break-word; margin-top: 13px; } .ad-content p { font-size: 0.875rem; color: var(--ad-paragraph-color); white-space: normal; word-wrap: break-word; } /* Show ad */ .ad.show { right: 0 !important; opacity: 1 !important; visibility: visible !important; } /* Hide ad */ .ad.hide { right: -300px !important; opacity: 0 !important; visibility: hidden !important; pointer-events: none; } .ad-link { text-decoration: none; color: inherit; display: flex; flex-direction: column; height: 100%; width: 100%; } .ad-link:hover { cursor: pointer; opacity: 0.95; } .subtitle { font-size: 1rem; color: white; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 0.5rem; } /*#endregion Advert Screen****************************/ /*#region WHO WE ARE *********************************************************WHO WE ARE -------------------------------------------*/ .who-we-are-section { display: flex; align-items: flex-start; gap: 0.1rem; padding: 2rem; background: linear-gradient(135deg, #eef3f7 0%, #dfe7ec 100%); background-size: cover; height: 800px; margin-top: 200px; z-index: 10; position: relative; contain: layout paint; } .who-we-are-section, .who-we-are-image, .circle-container-m, .circle-container-n, .circle-container-o, video { will-change: transform, opacity; transform: translateZ(0); } .who-we-are-image { position: relative; width: 600px; /* Desired width */ height: auto; flex-shrink: 0; /* Prevent shrinking */ margin-top: 80px; margin-left: 45px; } .who-we-are-image video { width: 80%; height: 500px; object-fit: cover; border-radius: 40px !important; } /* Rounded white-bordered placeholder */ .image-placeholder { position: absolute; top: -60px; margin-left: -60px; width: 230px; height: 230px; border-radius: 50%; border: 2px solid #fff; background-color: #ddd; overflow: hidden; } .image-placeholder video { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; } /*Circle Container-who*/ .container-m { position: absolute; display: flex; flex-direction: column; align-items: center; left: 45px; top: -95px; animation: heartbeat 3.3s infinite; z-index: 1; } .circle-container-m { position: relative; width: 40px; height: 40px; top: 280px; z-index: 1; } .large-circle-m { position: absolute; top: 0; left: 0; width: 40px; height: 40px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.1); /* lightest transparent */ } .medium-circle-m { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 25px; height: 25px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.15); /* medium transparent */ } .small-circle-m { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 10px; height: 10px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.2); /* darkest transparent */ } .circle-text-container-m { background-color: rgba(255, 255, 255, 0.1); backdrop-filter: blur(8px); backdrop-filter: blur(10px); color: white; padding: 5px 10px; border-radius: 25px; margin-top: 245px; /* gap between circle and text */ text-align: center; width: 45%; margin-left: 201px; } /*Circle Container-who-n*/ .container-n { position: absolute; display: flex; flex-direction: column; align-items: center; left: -85px; top: 45px; animation: heartbeat 3.3s infinite; z-index: 1; } .circle-container-n { position: relative; width: 40px; height: 40px; top: 280px; } .large-circle-n { position: absolute; top: 0; left: 0; width: 40px; height: 40px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.1); /* lightest transparent */ } .medium-circle-n { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 25px; height: 25px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.15); /* medium transparent */ } .small-circle-n { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 10px; height: 10px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.2); /* darkest transparent */ } .circle-text-container-n { background-color: rgba(255, 255, 255, 0.1); backdrop-filter: blur(8px); backdrop-filter: blur(10px); color: white; padding: 5px 10px; border-radius: 25px; margin-top: 245px; /* gap between circle and text */ text-align: center; width: 45%; margin-left: 180px !important; } /*Circle Container-who-o*/ .container-o { position: absolute; display: flex; flex-direction: column; align-items: center; left: 80px; top: 150px; animation: heartbeat 3.3s infinite; z-index: 1; } .circle-container-o { position: relative; width: 40px; height: 40px; top: -37px; left: 175px; } .large-circle-o { position: absolute; top: 0; left: 0; width: 40px; height: 40px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.1); /* lightest transparent */ } .medium-circle-o { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 25px; height: 25px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.15); /* medium transparent */ } .small-circle-o { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 10px; height: 10px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.2); /* darkest transparent */ } .circle-text-container-o { background-color: rgba(255, 255, 255, 0.1); backdrop-filter: blur(8px); backdrop-filter: blur(10px); color: white; padding: 5px 10px; border-radius: 25px; margin-top: 245px; /* gap between circle and text */ text-align: center; width: 45%; margin-left: 180px !important; } /* Right side content */ .who-we-are-content { display: flex; flex-direction: column; gap: 1.5rem; width: 50%; margin-right: -80px !important; } .who-we-are-content h2 { font-size: 2.4rem; color: #222; margin: 0; font-weight: 700; font-family: "Nunito", sans-serif; margin-bottom: 1.5rem !important; word-wrap: break-word; width: 80%; margin-left: -55px; } .who-we-are-content>p { font-size: large; line-height: 1.6; color: #444; margin: 0; margin-left: -55px; word-wrap: break-word; width: 100%; margin-top: -26px; } .card-container { display: flex; gap: 1rem; margin-top: -0.8rem; } .card-box { flex: 1; background-color: #fff; padding: 1.5rem; border-radius: 15px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); position: relative; width: 200px !important; height: 235px; left: -50px; } .card-icon { position: static; top: 1rem; left: 1rem; font-size: 1.8rem; color: white; } .icon-container { width: 48px; height: 48px; background-color: #334155; border-radius: 50%; /* makes it circular */ display: flex; align-items: center; justify-content: center; position: absolute; top: 1rem; left: 1rem; margin-top: -10px; } .card-box h3 { margin-top: 2.5rem; font-size: 1.2rem; color: #2c3e50; } .card-box p { font-size: 0.95rem !important; color: #666; margin-top: 0.5rem !important; font-family: Inter, sans-serif; line-height: 24px !important; text-align: left !important; } .read-more-container { text-align: center; margin-top: 2rem; } .read-more-btn { background: linear-gradient(135deg, #0f172a, #1e293b, #475569); backdrop-filter: blur(8px); box-shadow: 0 4px 12px rgba(71, 85, 105, 0.4); transition: transform 0.3s ease, box-shadow 0.3s ease; color: white; padding: 0.25rem 1.4rem; border-radius: 25px; border: none; /* button edge style */ border-style: outset; /* button edge style */ font-size: 1rem; font-family: 'Nunito', sans-serif; cursor: pointer; position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; transition: background-color 0.4s ease; bottom: 20px; } .read-more-btn .arrow-icon { display: inline-block; transition: transform 0.4s ease; font-size: 1.2rem; } .read-more-btn:hover .arrow-icon { transform: translateX(6px); } .read-more-btn::after { content: "Begin ..."; position: absolute; inset: 0; background-color: transparent; color: white; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.4s ease; } .read-more-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(71, 85, 105, 0.6); } .read-more-btn:hover .btn-who, .read-more-btn:hover .arrow-icon { opacity: 0; background: var(--why-button-hover-bg) !important; } /*#endregion*/ /*#region CONSULT********************************************************** CONSULT*************************************************/ .consult { position: relative; /* Ensures child absolute positioning is relative to this */ min-height: 750px; /* Optional: define height of section if needed */ background: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%); z-index: 5; background-size: cover; border-radius: 30px; margin-top: -40px; left: 51%; transform: translateX(-50%); } .help { display: inline-block; padding: 10px 20px; font-size: 0.95rem; color: #e8f7ff; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 8px; text-decoration: none; backdrop-filter: blur(6px); transition: 0.3s ease; margin-left: 190px; pointer-events: auto; } .help:hover { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.35); } .consult-container { position: absolute; right: 30px; width: 600px; /* Adjust as needed */ height: 550px; /* Adjust as needed */ background: rgba(15, 32, 39, 0.6); /* dark transparent overlay */ backdrop-filter: blur(8px); /* adds depth */ border: none; /* Optional: for visibility */ border-radius: 30px; padding: 20px; box-sizing: border-box; top: 60px; } /* Dark overlay */ .consult-container .overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); z-index: 1; border-radius: 30px; } /* Image box that sits on top of the overlay */ .consult-container .image-box { position: relative; width: 300 px; height: 410px; z-index: 2; /* Above the overlay */ margin: 20px; /* Optional positioning */ border: none; overflow: hidden; margin-left: 210px; border-radius: 30px; } /* Image inside the box */ .consult-container .image-box img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.2); /* Zooms in by 20% */ transform-origin: center; } .text-box p { font-size: 1.3em; line-height: 1.6; color: #f5f5f5; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; margin: 0; padding: 10px 20px; /* ← Added horizontal padding (left & right) */ letter-spacing: 0.5px; border: none; } .consult-container .text-box { position: relative; width: 375px; height: 320px; z-index: 2; /* Above the overlay */ margin: 20px; /* Optional positioning */ border: none; overflow: hidden; left: -20px; margin-top: -255px; border-radius: 30px; background: rgba(32, 58, 67, 0.7); /* dark teal overlay */ color: #f1f5f9; } .text-wrapper { margin-top: -60px; } .button-consult { display: inline-flex; align-items: center; justify-content: center; position: relative; width: 52%; padding: 5px 20px; background: linear-gradient(135deg, #70b800, #0481c1); /* MoodPΓ di green β†’ blue */ color: #f1f5f9; border: none; font-size: 1rem; font-weight: bold; cursor: pointer; /* button edge style */ border-style: outset; /* button edge style */ border-radius: 30px; transition: background 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease; margin: 1.25rem auto; left: 20px; top: -15px; text-align: center; text-decoration: none; overflow: hidden; gap: 0.5rem; } .button-consult .arrow-icon { transition: transform 0.3s ease; font-size: 1.2rem; } .button-consult:hover .arrow-icon { transform: translateY(-3px); box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4); } .button-consult::after { content: "Exploring ..."; position: absolute; inset: 0; background-color: transparent; color: white; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.4s ease; font-weight: bold; } .button-consult:hover::after { opacity: 1; } .button-consult:hover .btn-text, .button-consult:hover .arrow-icon { opacity: 0; } .button-consult:hover { background: linear-gradient(135deg, #3b82f6, #6366f1); /* lighter blue β†’ soft purple */ transform: scale(0.95); /* shrink slightly */ box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35); /* prominent shadow */ } .serif { font-weight: 500; font-style: italic; font-family: Newsreader, "Times New Roman", serif; font-size: 70px; color: #ffffff; margin-top: -15px; /* Optional: for tighter visual spacing */ margin-left: 40px; } .text-side { font-size: 40px; color: #ffffff; font-weight: 500; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; margin: 0; margin-left: 45px !important; margin-top: 110px; white-space: nowrap; } .intro-text { font-size: 20px; color: #f0f0f0; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; margin: 20px 45px 10px 45px; line-height: 1.5; max-width: 45%; word-wrap: break-word; word-break: break-word; white-space: normal; } .keyword-grid { display: flex; gap: 50px; margin: 0 45px; } .column { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; margin-bottom: 18px; } .keyword-button { background-color: #4a5c6a; color: rgb(58, 58, 58); padding: 8px 16px; border-radius: 20px; font-size: 14px; font-weight: 600; text-align: center; white-space: nowrap; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); transition: all 0.3s ease; cursor: pointer; margin-bottom: 10; /* Add this line */ transition: transform 0.3s ease, box-shadow 0.3s ease; /* smooth effect */ } .keyword-button.one { background: linear-gradient(135deg, #ff9a9e, #fad0c4); } .keyword-button.two { background: linear-gradient(135deg, #fbc2eb, #a6c1ee); } .keyword-button.three { background: linear-gradient(135deg, #fda085, #f6d365); } .keyword-button.four { background: linear-gradient(135deg, #89f7fe, #66a6ff); } .keyword-button.five { background: linear-gradient(135deg, #43e97b, #38f9d7); } .keyword-button.six { background: linear-gradient(135deg, #8ec5fc, #e0c3fc); } .keyword-button.seven { background: linear-gradient(135deg, #96fbc4, #f9f586); } .keyword-button.eight { background: linear-gradient(135deg, #84fab0, #8fd3f4); } .keyword-button.nine { background: linear-gradient(135deg, #4facfe, #00f2fe); } .keyword-button.ten { background: linear-gradient(135deg, #667eea, #764ba2); } .keyword-button.eleven { background: linear-gradient(135deg, #43cea2, #185a9d); } /* Hover effect: zoom out (shrink), add shadow, optional text color change */ .keyword-button:hover { transform: scale(0.95); /* shrink slightly on hover */ box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); color: white; /* keeps text readable */ } /*#endregion CONSULT**********************************************************/ /*#region QUOTE****************************************QUOTE*********************************************/ /* Container Layout */ /* Layout remains unchanged */ .content-gallery-container { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; } #fun-section { margin-top: 70px; border-radius: 65px; height: 400px; z-index: 6; background: linear-gradient(135deg, rgba(15, 32, 39, 0.85) 0%, /* dark moody base */ rgba(32, 58, 67, 0.7) 50%, /* slightly lighter mid-tone */ rgba(112, 184, 0, 0.15) 100% /* subtle MoodPΓ di green tint */ ); left: 42%; transform: translateX(-50%); backdrop-filter: blur(4px); /* optional, adds soft frosted effect */ } /* Base state */ .fun { position: relative; width: 80%; height: 100vh; /* fill viewport */ background: linear-gradient(135deg, #0f172a, #1e293b); background-size: cover; z-index: 0; transition: opacity 0.3s ease; border-radius: 65px; margin: 0 auto; /* centers it horizontally */ } /* Active pinned state */ .fun.pinned { position: fixed; top: 0; left: 50%; transform: translateX(-50%); /* ensures perfect centering */ border-radius: 0; /* optional */ } .fun-wrapper { position: relative; height: 100vh; /* how long the brief area occupies in document flow */ width: 100vw; } .content { flex: 1; padding: 20px; } .content h5 { text-align: center; margin-right: auto; margin-left: auto; display: block; font-family: 'Lobster', cursive; font-weight: 1.7px; font-size: 2.3em; margin-bottom: 10px !important; color: #cacfd3; } .fun-heading-container { position: relative; /* Keeps the height fixed */ height: 50px; /* Adjust based on your design */ display: flex; justify-content: center; align-items: center; } h2.fun-heading { text-align: center; color: var(--fun-yellow); font-family: 'Lobster', cursive; position: absolute; transition: opacity 0.3s ease-in-out; opacity: 0; top: 10px; } h2.fun-heading.active { opacity: 1; /* Show the active heading smoothly */ } .gallery { flex: 1; text-align: center; } /* Quote Styling */ .quote-container { position: relative; height: 100px; top: 35px; /* Ensure it doesn't shift */ } .quote { position: absolute; opacity: 0; transition: opacity 1s ease-in-out; color: var(--fun-white); font-size: 1.125rem; text-align: center; } .quote.active { opacity: 1; } /* Image Styling */ .image-container { position: relative; width: 100%; height: auto; max-height: 250px; } .gallery-image { position: absolute; width: 100%; max-width: 350px; height: auto; top: 0; opacity: 0; transition: opacity 1s ease-in-out; right: 100px; } .gallery-image.active { opacity: 1; } /*#endregion FUNFACT*/ /*#region THERAPHY*************************************THERAPHY SECTION**************************************/ /* Section Styles */ .cards-section { position: relative; display: flex; justify-content: space-around; align-items: flex-start; flex-wrap: wrap; gap: 20px; width: 100vw; margin: 0; padding: 40px 20px; background: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%); margin-top: -22px; /* βœ… Dynamic height handling */ min-height: 100vh; /* ensures at least one screen height */ height: auto; /* expands with content automatically */ z-index: 5 !important; box-sizing: border-box; } /* Card Styles */ .card { display: flex; justify-content: space-between; align-items: center; background: rgba(255, 255, 255, 0.05); /* almost black transparent */ backdrop-filter: blur(10px); /* glassy effect */ border-radius: 12px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); background-size: 300% 300%; border-radius: 12px; overflow: hidden; width: 320px; height: 400px !important; transition: transform 0.3s ease, box-shadow 0.3s ease; } .cards-section .header { width: 100%; text-align: center; margin-bottom: 40px; } .cards-section .header h2 { width: 100%; /* Full width of the container */ text-align: center; /* Center text horizontally */ margin-bottom: 20px; /* Add spacing below the header */ font-size: 2.375rem !important; font-weight: bold !important; line-height: 1.1em !important; color: white; } .cards-section .header p { font-size: 1.1rem; color: white; margin-bottom: 0.5rem; font-family: sans-serif; line-height: 1.4em; } .cards-section a { text-decoration: none; } .card:hover { transform: translateY(-10px); box-shadow: 0 8px 16px var(--therapy-box-shadow-hover); cursor: pointer; } /* Text Section */ .card-text { flex: 1; padding: 20px; } .card-text h2 { margin: 0 0 10px; font-size: 1.5rem; color: var(--therapy-header-text-color); } .card-text p { margin: 0; font-size: 1rem; color: var(--therapy-header-text-color); } .card-text .arrow { font-size: 1.2rem; color: var(--therapy-highlight-color); font-weight: bold; } /* Image Section */ .card-image { flex: 1; overflow: hidden; } .card-image img { width: 100%; height: 300%; object-fit: contain; margin-top: -160px; /* Moves the image upward */ } /*#endregion SECTION*********************************************/ /*#region WHO WE ARE *********************************************************JOIN US -------------------------------------------*/ .who-we-are-section1 { width: 100vw; /* true full width */ margin: 0; /* remove gaps */ padding: 2rem; /* inner spacing stays */ display: flex; align-items: flex-start; gap: 0.1rem; background: rgba(15, 32, 39, 0.6); /* dark transparent overlay */ backdrop-filter: blur(8px); /* adds depth */ height: 864px; box-sizing: border-box; position: relative; left: 50%; transform: translateX(-50%); /* centers it back to viewport */ border-radius: 20px; z-index: 5; } .crisis{ text-align:left; width:50%; } /* Rounded white-bordered placeholder */ .image-card-container { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; width: 500px; /* adjust width to match your design */ margin-left: 45px; margin-top: 100px; } .image-card { position: relative; width: 100%; height: 215px; /* adjust height to match your design */ } .image-card img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; } .image-card:hover { transform: var(--therapist-hover-zoom); } .image-card-info { position: absolute; top: 80%; left: 50%; transform: translate(-50%, -50%); /* perfectly centers it */ width: 80%; /* optional: adjust width */ height: 85px; padding: 1rem; background: linear-gradient(135deg, rgba(112, 184, 0, 0.2), rgba(4, 129, 193, 0.2)); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25); /* 0.6 is 60% opaque */ border-radius: 15px; border: black solid; /* button edge style */ border-style: outset; /* button edge style */ color: #fff; text-align: center; z-index: 1; /* ensure it's above the image */ } .image-card-info h4 { font-size: 1.2rem; margin-bottom: 0.5rem; } .image-card-info p { font-size: 1rem; } /* Right side content */ .who-we-are-content1 { display: flex; flex-direction: column; gap: 1.5rem; flex: 1; /* fill the rest of the row */ padding-left: 2rem; /* space from the image grid */ margin-top: 60px; } .who-we-are-content1 h2:first-child { margin-bottom: -2rem !important; } .who-we-are-content1 h2 { font-size: 32px; color: white; font-weight: 100; font-family: "Nunito", sans-serif; margin-bottom: 1.5rem; } .who-we-are-content1>p { font-size: large; line-height: 1.6; color: white; } .card-container2 { display: flex; gap: 1rem; margin-top: 1.5rem; margin-left: 80px !important; } .card-box2 { flex: 1; background: linear-gradient(145deg, #334155, #1e293b); box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25), inset 0 1px 3px rgba(255, 255, 255, 0.1); transition: transform 0.3s ease, box-shadow 0.3s ease; padding: 1.5rem; border-radius: 15px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); position: relative; width: 300px !important; max-width: 450px; height: 150px; left: -50px; } .card-box2:hover { transform: translateY(-5px); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.35), inset 0 1px 5px rgba(255, 255, 255, 0.15); } .card-icon2 { font-size: 2rem; background: linear-gradient(135deg, #06b6d4, #3b82f6, #8b5cf6); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .icon-container2 { width: 48px; height: 48px; background-color: white; border-radius: 50%; /* makes it circular */ display: flex; align-items: center; justify-content: center; position: absolute; top: 1rem; left: 1rem; margin-top: -10px; } .card-box2 h3 { margin-top: 2.5rem; font-size: 1.2rem; color: #2c3e50; } .card-box2 p { font-size: 1.95rem !important; color: white; margin-top: 2.3rem !important; font-family: Inter, sans-serif; line-height: 24px !important; text-align: center !important; } .read-more-container2 { text-align: center; margin-top: 2rem; } .read-more-btn2 { background: linear-gradient(135deg, #06b6d4, #3b82f6, #2563eb); box-shadow: 0 4px 12px rgba(6, 182, 212, 0.3); transition: transform 0.3s ease, box-shadow 0.3s ease; color: white; padding: 0.25rem 1.4rem; border-radius: 25px; border: #0481C1; /* button edge style * /* button edge style */ border-style: outset; /* button edge style */ font-size: 1rem; font-family: 'Nunito', sans-serif; cursor: pointer; position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; transition: background-color 0.4s ease; bottom: 20px; } .who-we-are-text-bg { background: linear-gradient(135deg, rgba(112, 184, 0, 0.2), rgba(4, 129, 193, 0.2)); /* subtle MoodPΓ di gradient, light for readability */ padding: 1.5rem 2rem; border-radius: 15px; backdrop-filter: blur(6px); /* adds soft glow / frosted effect */ color: #ffffff; /* text readable */ line-height: 1.8; font-size: 1.1rem; margin-top: 1rem; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25); } .read-more-btn2 .arrow-icon { display: inline-block; transition: transform 0.4s ease; font-size: 1.2rem; } .read-more-btn .arrow-icon { display: inline-block; transition: transform 0.4s ease; font-size: 1.2rem; } .read-more-btn:hover .arrow-icon { transform: translateX(6px); } .read-more-btn2:hover .arrow-icon { transform: translateX(6px); } .read-more-btn2:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(139, 92, 246, 0.45); } .read-more-btn::after { content: "Begin ..."; position: absolute; inset: 0; background-color: transparent; color: white; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.4s ease; } .read-more-btn2::after { content: "Welocme ..."; position: absolute; inset: 0; background-color: transparent; color: white; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.4s ease; } .read-more-btn2:hover::after { opacity: 1; } .read-more-btn:hover::after { opacity: 1; } .read-more-btn:hover .btn-text, .read-more-btn:hover .arrow-icon { opacity: 0; background: var(--why-button-hover-bg) !important; } .read-more-btn2:hover .btn-text, .read-more-btn2:hover .arrow-icon { opacity: 0; background: var(--why-button-hover-bg) !important; } @keyframes shake-zoom { 0% { transform: scale(1) translateX(0); } 20% { transform: scale(0.9) translateX(-5px); } 40% { transform: scale(0.9) translateX(5px); } 60% { transform: scale(0.9) translateX(-5px); } 80% { transform: scale(0.9) translateX(5px); } 100% { transform: scale(1) translateX(0); } } /*#endregion*/ /*#region WHY****************************************WHY SECTION********************************************/ .why-section-container { display: flex; justify-content: space-between; align-items: stretch; padding: 40px; gap: 20px; /* βœ… Add these: */ max-width: 1400px; /* keeps content from stretching too wide */ margin: 0 auto; /* centers the section horizontally */ box-sizing: border-box; width: 100%; } .choose h4 { color: var(--why-link-color); } .choose a { color: var(--why-link-color); } .choose a:hover { color: var(--why-link-hover); } .why-section-btn { width: 130px; height: 44px; padding: 10px; border-radius: 25px; background: linear-gradient(135deg, #3b82f6, #8b5cf6); box-shadow: 0 4px 12px rgba(6, 182, 212, 0.35); transition: transform 0.3s ease, box-shadow 0.3s ease; color: var(--why-link-color); cursor: pointer; margin-top: 13px; margin-bottom: 10px; margin-left: 65px; font-size: 0.8rem; font-weight: 700 !important; position: relative; /* Adding the vibration animation with pauses */ animation: shake 3s ease-in-out infinite; animation-delay: 2s; /* Pause before starting */ } .why-section-btn .btn-text { transition: opacity 0.4s ease; } .why-section-btn::after { content: "Scheduling ..."; position: absolute; inset: 0; background-color: transparent; color: whitesmoke; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.4s ease; } .why-section-btn:hover::after { opacity: 1; } .why-section-btn:hover .btn-text { opacity: 0; } .why-section-btn:hover { background: linear-gradient(135deg, #8b5cf6, #3b82f6); transform: translateY(-3px); box-shadow: 0 6px 15px rgba(139, 92, 246, 0.65); } /* CSS */ .why-section-container { display: flex; justify-content: space-between; align-items: stretch; padding: 40px; gap: 20px; } .vertical-divider { width: 2px; background-color: #ccc; margin: 0 20px; } .why-section-left h1 { font-size: 2.6rem; margin-bottom: 15px; font-family: 'Lobster', cursive; color: var(--why-title-color); } .why-section-left { flex: 1; max-width: 38%; padding-right: 20px; } .why-section-list { list-style: none; padding-left: 0; } .why-section-list li { display: flex; align-items: center; font-size: 1rem; color: white; margin-bottom: 10px; white-space: nowrap; /* Prevents text from wrapping */ overflow: hidden; /* Prevents text overflow */ text-overflow: ellipsis; /* Adds "..." if text overflows */ max-width: 100%; /* Adjust width to fit the container */ } .why-section-list li i { margin-right: 10px; /* Space between icon and text */ color: var(--why-list-icon-color); /* Bullet point color */ font-size: 1.2rem; } .why-section-center, .why-section-right { flex: 1; max-width: 33%; display: flex; align-items: center; justify-content: center; padding: 10px; } .why-section-main-image { width: 100%; height: 100%; max-width: 200%; max-height: 200%; object-fit: cover; border-radius: 10px; } .why-section-text { font-weight: 700; font-size: 22px; color: white; line-height: 1.53m; } .info-block { text-align: center; } .info-block .heading1 { font-size: 68px; font-weight: 100; color: white; margin-bottom: 10px; } .info-block h1 { font-size: 1.8rem; margin-bottom: 10px; color: var(--why-title-color); } .info-block p { color: white; font-size: 1rem; max-width: 320px; margin: 0 auto; } .serif2 { font-family: 'Times New Roman', serif; font-size: 0.5em; text-align: left; } .heading1 { font-variation-settings: "wght" 300; letter-spacing: -.01em; font-size: 68px; font-weight: 100; line-height: 1.1em; color: white; } .heading1 .serif2 { font-family: var(--serif); font-variation-settings: "wght" 400, "opsz" 72; font-style: italic; font-weight: 200; color: white; } .bold-text { font-family: var(--serif); font-variation-settings: "wght" 400, "opsz" 72; font-style: italic; font-weight: 200; color: white; } /*#endregion WHY*/ /*#region FEATURES***********************************************************Features Background Section****************************************************/ #features { position: relative; background: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%); background-size: 300% 300%; margin-top: -32px; z-index: 5; } /* subtle dark overlay */ #features::before { content: ''; position: absolute; inset: 0; /* top:0; right:0; bottom:0; left:0 */ background: rgba(0, 0, 0, 0.25); /* 25% dark overlay */ z-index: 1; } .features-text { flex-grow: 1; /* Allows this section to expand and take available space */ margin-bottom: 10px; color: var(--features-heading-color); } .features-text p { color: var(--features-heading-color) !important; } .features-heading { font-size: 1.5625rem; margin: 0; color: var(--features-heading-color); line-height: 1; /* Tighter line spacing */ padding: 0; } .features-heading-container { width: fit-content; max-width: 500px; text-align: center; background: var(--features-bg-gradient); padding: 0.1rem 1rem; border-radius: 5px; margin-top: 0; margin: 0 auto 20px auto; height: 2.5rem; display: flex; align-items: center; /* Vertically center */ justify-content: center; /* Horizontally center */ } @keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } .features-heading-container:hover { animation: shake 0.5s ease-in-out; } .features-box { text-align: center; margin-bottom: 20px; } .features-box img { width: 100%; max-height: 340px; /* Adjust this value as needed */ height: auto; border-radius: 15px; object-fit: cover; } @keyframes shake { 0% { transform: translateX(0); } 25% { transform: translateX(-10px); } 50% { transform: translateX(0); } 75% { transform: translateX(-10px); } 100% { transform: translateX(0); } } .features-text h3 { margin-top: 10px; font-size: 1.25rem; } .features-text p { font-size: 0.9rem; color: var(--features-text-color); } .button-link-container { display: flex; align-items: center; margin-top: 10px; /* Adjust space between paragraph and buttons */ } .button-link-container { display: flex; align-items: center; margin-top: 10px; /* Adjust space between paragraph and buttons */ } .d-flex { margin-top: auto; /* Push the button container to the bottom of the card */ justify-content: space-between; /* Keep buttons spaced apart */ } .book-session, .more-resources { display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; padding: 10px 16px; min-width: 148px; border-radius: 10px; border: #0481C1; /* button edge style */ border-style: outset; /* button edge style */ background-color: white; box-shadow: 0 0 10px rgba(74, 72, 72, 0.4); backdrop-filter: blur(3px); color: #1f3a52 !important; cursor: pointer; font-size: 0.8rem; text-decoration: none; transition: all 0.3s ease; overflow: hidden; z-index: 2; margin: 0 5px 10px 5px; position: relative; } .book-session .btn-text, .more-resources .btn-text { transition: opacity 0.3s ease; font-weight: bold; } .book-session::after { content: "Schedulling ..."; position: absolute; left: 50%; transform: translateX(-50%); opacity: 0; transition: opacity 0.3s ease; color: white; font-weight: bold; } .more-resources::after { content: "πŸ›’"; position: absolute; left: 50%; transform: translateX(-50%); opacity: 0; transition: opacity 0.3s ease; color: white; font-weight: bold; } .book-session:hover .btn-text, .more-resources:hover .btn-text { opacity: 0; background: var(--why-button-hover-bg) !important; } .book-session:hover, .more-resources:hover { background: var(--why-button-hover-bg) !important; } .book-session:hover::after, .more-resources:hover::after { opacity: 1; } .book-session, .more-resources { display: inline-flex; align-items: center; gap: 14px; /* Keeps the button layout intact */ text-decoration: none; color: white; transition: all 0.3s ease; } /* Show arrow by default */ .book-session .arrow-icon, .more-resources .arrow-icon { display: flex; align-items: center; justify-content: center; background-color: #1f3a52; color: white; border-radius: 50%; width: 25px; height: 24px; font-size: 14px; transition: all 0.3s ease; flex-shrink: 0; } /* Text styling */ .book-session .btn-text, .more-resources .btn-text { transition: transform 0.3s ease; } /* On hover: arrow fades out, text slides right */ .book-session:hover .arrow-icon, .more-resources:hover .arrow-icon { opacity: 0; transform: translateX(10px); } .book-session:hover .btn-text, .more-resources:hover .btn-text { transform: translateX(6px); } .carousel { position: relative; /* Ensure the carousel container is positioned */ } .custom-carousel-control-prev, .custom-carousel-control-next { position: absolute; /* Ensure proper positioning */ bottom: 60%; /* Position the icons near the bottom of the image */ z-index: 1; /* Keep icons above other elements */ width: 3rem; /* Set size of control buttons */ height: 3rem; /* Set size of control buttons */ display: flex; /* Center the icon inside */ align-items: center; /* Center vertically */ justify-content: center; /* Center horizontally */ border-radius: 50%; /* Make the buttons circular */ background-color: var(--carousel-button-bg); /* Button background color */ } .custom-carousel-control-prev { transform: translateX(40px); /* Move icon left */ } .custom-carousel-control-next { transform: translateX(1100px); /* Move icon right */ } .custom-carousel-control-prev-icon, .custom-carousel-control-next-icon { content: ''; /* Ensure the pseudo-element exists */ display: inline-block; width: 1rem; /* Size of the arrow */ height: 1rem; /* Size of the arrow */ background-size: 100% 100%; /* Ensure the icon scales properly */ /* Base64 encoded SVG for the arrows */ -webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2Ij48cGF0aCBmaWxsPSJ3aGl0ZSIgZD0iTTEwLjcwNyA3TDYuNTI5IDQuNDA0YS4zNS4zNSAwIDAgMC0uNTI5LjI5djYuNjE0YS4zNS4zNSAwIDAgMCAuNTI5LjI5bDQuMTc4LTIuNTk2YS4zNS4zNSAwIDAgMCAwLS41ODh6Ii8+PC9zdmc+'); mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE2IDE2Ij48cGF0aCBmaWxsPSJ3aGl0ZSIgZD0iTTEwLjcwNyA3TDYuNTI5IDQuNDA0YS4zNS4zNSAwIDAgMC0uNTI5LjI5djYuNjE0YS4zNS4zNSAwIDAgMCAuNTI5LjI5bDQuMTc4LTIuNTk2YS4zNS4zNSAwIDAgMCAwLS41ODh6Ii8+PC9zdmc+'); /* Cross-browser support */ background-color: var(--carousel-icon-color); /* Arrow color */ } .custom-carousel-control-prev-icon::before, .custom-carousel-control-next-icon::before { display: none; /* Prevent Bootstrap's default pseudo-elements from showing */ } .carousel-inner .row { display: flex; justify-content: center; /* Centers the items horizontally */ gap: 22px; /* Consistent spacing between items */ margin: 0 auto; /* Center the entire row */ padding: 0 15px; /* Add slight padding to ensure content doesn’t touch the edges */ } /*#endregion FEATURES*/ /*#region SPOTLIGHT*************************************************************SPOTLIGHT SECTION*******************************************************/ /* Testimonials Heading */ /* Styling the testimonials heading container */ .split-container { display: flex; width: 70%; height: 450px; margin: 0 auto; position: relative; overflow: hidden; } /*SPOTLIGHT STYLING**/ .spotlight-wrapper { position: relative; width: 100%; padding: 40px 20px; background: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%); /* Fully transparent */ text-align: center; z-index: 5; margin-top: -32px; } .spotlight-text { max-width: 600px; margin: 0 auto 40px auto; color: var(--testimonials-text-color); z-index: 2; } .spotlight-text h2 { font-size: 2rem; margin-bottom: 10px; } .spotlight-text .underline { width: 60px; height: 4px; background-color: var(--testimonials-underline-color); margin: 0 auto 15px auto; } .spotlight-text p { font-size: 1.1rem; line-height: 1.6; color: var(--testimonials-text-color); } .left-half { flex: 1; background-color: var(--testimonials-left-bg); } .right-half { flex: 1; background-color: var(--testimonials-right-bg); } .inner-overlay { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90%; height: 80%; background: linear-gradient(135deg, rgba(15, 32, 39, 0.85) 0%, /* dark moody base */ rgba(32, 58, 67, 0.7) 50%, /* slightly lighter mid-tone */ rgba(112, 184, 0, 0.15) 100% /* subtle MoodPΓ di green tint */ ); border: 2px solid rgba(255, 255, 255, 0.2); border-radius: 10px; z-index: 2; box-sizing: border-box; display: flex; flex-direction: column; /* Make sure content stacks vertically */ justify-content: flex-start; /* Align content from the top */ align-items: center; /* Center everything */ opacity: 0; backdrop-filter: blur(4px); /* optional, adds soft frosted effect */ } .animate-in { animation: easeIn 1s forwards; } @keyframes easeIn { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); } 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); } } #inner-overlay1 { animation-delay: 0s; /* First overlay eases in immediately */ } #inner-overlay2 { animation-delay: 7s; /* Second overlay eases in after 7 seconds */ } #inner-overlay3 { animation-delay: 14s; /* Third overlay eases in after 14 seconds */ } #inner-overlay4 { animation-delay: 21s; /* Fourth overlay eases in after 21 seconds */ } #inner-overlay5 { animation-delay: 28s; /* Fifth overlay eases in after 28 seconds */ } #inner-overlay6 { animation-delay: 35s; /* Sixth overlay eases in after 35 seconds */ } #inner-overlay7 { animation-delay: 42s; /* Seventh overlay eases in after 42 seconds */ } #inner-overlay8 { animation-delay: 49s; /* Eighth overlay eases in after 49 seconds */ } #inner-overlay9 { animation-delay: 56s; /* Ninth overlay eases in after 56 seconds */ } #inner-overlay10 { animation-delay: 63s; /* Tenth overlay eases in after 63 seconds */ } .vertical-lines { position: absolute; top: 50%; left: 20px; transform: translateY(-50%); display: flex; flex-direction: row; align-items: flex-end; gap: 10px; z-index: 1; } .line { width: 4px; background-color: white; border-radius: 2px; z-index: 1; } .short-line { height: 60px; width: 20px; border-radius: 20px; margin-bottom: 180px; } .tall-line { height: 240px; width: 20px; border-radius: 20px; } .circle-placeholder { width: 180px; height: 180px; border-radius: 50%; background-color: var(--testimonials-circle-bg); border: 3px solid white; margin-left: -38px; z-index: 1; display: flex; justify-content: center; align-items: center; position: relative; overflow: hidden; /* Hide any part of the image that exceeds the circle boundary */ } .circle-placeholder img { width: 100%; /* Make the image's width 100% of the circle */ height: 100%; /* Make the image's height 100% of the circle */ object-fit: cover; /* Ensure the image fills the circle without distorting */ } .text-container { margin-left: 140px; /* Remove the left margin */ /* Position text at the right side of the circle */ color: var(--testimonials-text-color); z-index: 3; width: 50%; /* Adjust width of text container */ max-width: 400px; /* Optional: limit max width */ position: relative; margin-top: 30px; } .text-container .name { font-style: italic; font-size: 1.125rem; margin-bottom: 10px; position: relative; } /* Add opening quote icon */ .text-container .name::before { content: "\201C"; /* Unicode for opening quote β€œ */ font-size: 3.125rem; position: absolute; top: -20px; /* Move the opening quote above the name */ left: -35px; /* Position it slightly to the left of the name */ color: var(--testimonials-text-color); z-index: 3; } /* Add closing quote icon */ .text-container .review::after { content: "\201D"; /* Unicode for closing quote ” */ font-size: 3.125rem; position: absolute; bottom: -25px; /* Position closing quote below the review text */ right: -35px; /* Position it slightly to the right of the review text */ color: var(--testimonials-text-color); z-index: 3; } .text-container .rating { font-size: 1.25rem; margin-bottom: 15px; color: var(--testimonials-rating-color); } .text-container h2 { font-size: 1.375rem; font-weight: bold; margin-bottom: 10px; } .text-container .review { font-size: 1rem; line-height: 1.5; margin-bottom: 15px; position: relative; } /* Social Media Icons Container */ .social-media-icons { margin-top: 20px; /* Space between the brief and the icons */ margin-left: 70px; display: flex; justify-content: center; /* Center icons horizontally */ width: 100%; /* Full width to center items */ gap: 20px; /* Space between icons */ } /* Social Column */ .social-column { display: inline-block; /* Align columns side by side */ text-align: center; /* Ensure text under icons is centered */ } /* Icon Styling */ .social-column .social-icon { font-size: 10px; /* Icon size */ color: white; /* Icon color */ margin-bottom: 10px; /* Space between icon and label */ } /* Text under each icon */ .social-column p { font-size: 1rem; color: white; } /* Styling for specific icons */ #linkedinColumn .social-icon { background-color: #0077b5; padding: 12px; border-radius: 50%; } #twitterColumn .social-icon { background-color: #1da1f2; padding: 12px; border-radius: 50%; } #tiktokColumn .social-icon { background-color: #000000; padding: 12px; border-radius: 50%; } /*#endregion TESTIMONIALS*/ /*#region ADVERT****************************************ADVERT***************************************/ /* General styling for the advert section */ #advert-section { position: relative; padding: 40px; background: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%); color: var(--advert-text-color); margin-top: -20px; height: 900px !important; display: flex; flex-direction: column; align-items: center; /* Center the h2 and other elements */ justify-content: flex-start; z-index: 5; } .ad-title h2 { text-align: center !important; /* Center the text */ /* Adjust margin-top to bring it closer to the top */ margin-bottom: 35px; font-size: 1.75rem; display: block; width: 100%; opacity: 0; /* Start with hidden state */ transform: translateX(-100%); /* Position to the left */ transition: transform 1s ease-out, opacity 1s ease-out; top: -90px !important; } /* Ensure the parent container of ad-title h2 has full width */ .title-container { margin-top: -40px; margin-bottom: 30px; } .text-right-side .underline { width: 400px; height: 3px; background-color: var(--advert-highlight); margin: 10px 0 15px; align-items: center; } .advert-layout { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 40px; } .advert-left { flex: 1; min-width: 55%; position: relative; /* βœ… increased */ } .advert-container { position: relative; height: 510px; /* Set a height for the container */ overflow: hidden; /* Hide any overflowing content */ border-radius: 15px; backdrop-filter: blur(4px); /* optional, adds soft frosted effect */ background: linear-gradient(135deg, rgba(15, 32, 39, 0.85) 0%, /* dark moody base */ rgba(32, 58, 67, 0.7) 50%, /* slightly lighter mid-tone */ rgba(112, 184, 0, 0.15) 70% /* subtle MoodPΓ di green tint */ ); } .advert-slide { position: absolute; /* Stack slides on top of each other */ top: 0; left: 0; width: 100%; height: 100%; /* Ensure the slide fills the container */ opacity: 0; transform: translateY(30px); transition: opacity 1s ease, transform 1s ease; } .advert-slide.active { opacity: 1; transform: translateY(0); z-index: 1; /* Ensure the active slide is on top */ } .advert-btn { display: block; margin: 10px auto; /* Centers the button horizontally */ padding: 8px 16px; background-color: #70B800; color: #000; border: none; border-radius: 5px; cursor: pointer; font-size: 0.875rem; font-weight: bold; transition: background-color 0.3s ease; } .advert-btn:hover { background-color: var(--advert-highlight-hover); } .advert-box { background: var(--advert-box-bg); padding: 20px; border-radius: 15px; width: 600px; height: 600px; } .advert-box img { display: block; /* Ensures the image is a block element */ margin: 0 auto; /* Centers the image horizontally */ width: 50%; /* You can adjust this width as needed */ height: 290px; /* Set a fixed height for the image */ object-fit: contain; /* Ensures the image maintains its aspect ratio */ border-radius: 15px !important; margin-bottom: 15px; } .advert-text a { text-decoration: none; } .advert-text p { margin: 5px 0; font-size: 0.875rem; color: var(--advert-text-color); text-align: center; } .text-right-side { flex: 1; min-width: 40%; font-family: 'Nunito', sans-serif; text-align: left; margin-top: 40px; opacity: 0; /* Hidden state */ transform: translateY(-100%); /* Positioned above */ transition: opacity 1s ease-out, transform 1s ease-out; } .text-right-side.show { opacity: 1; transform: translateY(0); } .text-right-side h2 { font-size: 1.875rem; font-weight: bold; line-height: 1.3; } .text-right-side p { font-size: 0.877rem; line-height: 1.6; margin-bottom: 10px; } .rating-stars { color: var(--advert-highlight); font-size: 1.5rem; margin-top: 10px; } /*#endregion ADVERT*/ /*#region MEDITATION ***********************************MEDITATION********************************/ /* Section styling */ .meditation-section { padding: 60px 20px; background: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%); margin-top: -32px; color: #fff; margin-left: calc(-50vw + 50%); /* cancel container padding if inside bootstrap container */ position: relative; z-index: 5; } .meditation-heading { font-size: 2rem; font-weight: 700; margin-bottom: 30px; text-align: center; letter-spacing: 1px; } /* Carousel wrapper */ .med-carousel-wrapper { position: relative; width: 90%; margin: auto; margin-bottom: 20px; } /* Carousel viewport */ .med-carousel-container { overflow: hidden; border-radius: 20px; position: relative; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25); } /* Carousel track */ .med-carousel { display: flex; transition: transform 0.6s ease; will-change: transform; } /* Each slide (row of cards) */ .track-slide { display: flex; flex: 0 0 100%; gap: 1.5rem; justify-content: center; padding: 20px; } /* Individual track card */ .track { flex: 0 0 30%; max-width: 30%; background: #ffffff; border-radius: 16px; overflow: hidden; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); transition: transform 0.3s ease, box-shadow 0.3s ease; cursor: pointer; } .track:hover { transform: translateY(-8px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25); } /* Video thumbnail */ .track-image { position: relative; width: 100%; height: 200px; overflow: hidden; } .thumbnail-video { width: 100%; height: 100%; object-fit: cover; border-bottom: 1px solid #eee; transition: transform 0.4s ease; } .track:hover .thumbnail-video { transform: scale(1.05); } /* Play icon */ .play-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 2rem; background: rgba(0, 0, 0, 0.6); color: #fff; padding: 14px; border-radius: 50%; cursor: pointer; transition: background 0.3s ease, transform 0.3s ease; } .track:hover .play-icon { background: rgba(0, 0, 0, 0.8); transform: translate(-50%, -50%) scale(1.1); } /* Track info */ .track-info { padding: 15px; text-align: left; } .track-info h3 { font-size: 1rem; margin: 8px 0; color: #1e293b; font-weight: 600; } .track-info p { font-size: 0.875rem; color: #475569; margin-bottom: 10px; } /* Categories */ .track-categories { display: flex; flex-wrap: wrap; gap: 8px; } .category { background-color: #e2e8f0; color: #1e293b; font-size: 0.75rem; padding: 4px 10px; border-radius: 999px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.5px; } /* Navigation buttons */ .med-prev-btn, .med-next-btn { position: absolute; top: 50%; transform: translateY(-50%); font-size: 1.5rem; background: rgba(30, 41, 59, 0.8); border: none; color: #fff; padding: 12px 16px; cursor: pointer; border-radius: 50%; z-index: 10; transition: background 0.3s ease, transform 0.3s ease; } .med-prev-btn:hover, .med-next-btn:hover { background: #0f172a; transform: translateY(-50%) scale(1.1); } .med-prev-btn { left: -40px; } .med-next-btn { right: -40px; } .meditation-subtext { max-width: 700px; /* keeps text in a nice readable width */ margin: 15px auto 30px; /* centers it and adds breathing space */ text-align: center; /* centers the text */ line-height: 1.7; /* improves readability */ font-size: 1.1rem; /* slightly larger than body text */ color: #444; /* soft dark gray for a calm tone */ font-weight: 400; /* clean, not too bold */ font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; color: #b6babe; /* a friendlier neutral */ } /*#endregion MEDITATION*/ /*#region CHECK***********************************************NEW CHECK SECTION*********************************************************/ .toast { visibility: hidden; min-width: 200px; background-color: #4CAF50; color: white; text-align: center; border-radius: 8px; padding: 12px; position: fixed; z-index: 9999; left: 50%; bottom: 30px; transform: translateX(-50%); transition: visibility 0s, opacity 0.5s ease; opacity: 0; } .toast.show { visibility: visible; opacity: 1; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @media print { body * { visibility: hidden; } #pdf-report-wrapper, #pdf-report-wrapper * { visibility: visible; } #pdf-report-wrapper { position: absolute; left: 0; top: 0; } } /*#endregion NEW CHECK*/ /*#region RESULT***********************************************CHAT SECTION*********************************************************/ .insight-container { font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; font-size: 15px; line-height: 1.5; color: #d0d7de; } .insight-container h5, .insight-container h6 { font-weight: 600; letter-spacing: 0.3px; margin-bottom: 8px; color: #e0e6ed; } .insight-container p { margin: 4px 0; font-size: 14px; } .moodBadge { font-weight: 500; font-size: 14px; padding: 10px 15px; border-radius: 20px; display: inline-block; } .chat-icon { width: 60px; height: 60px; background: linear-gradient(135deg, #0481c1, #70b800); /* A calming dark blue */ color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; position: fixed; bottom: 70px; right: 20px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); transition: background 0.3s ease; z-index: 2005; opacity: 1; /* <<< make it always visible */ transition: opacity 0.3s ease-in-out; } .chat-icon:hover { background-color: #3b6e91; /* Slightly lighter blue */ } .chat-icon i { font-size: 24px; color: white; } .chat-container { width: 400px; height: 500px; border-radius: 12px; position: fixed; bottom: 20px; right: 20px; z-index: 1000; display: flex; flex-direction: column; background: linear-gradient(135deg, #1f3a52, #38618d, #acc8df); /* βœ… new gradient */ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); overflow: hidden; } /* All content in the body */ .chat-body { padding: 16px; display: flex; flex-direction: column; flex-grow: 1; } /* Logo at top-left with close on right */ /*.logo-container { display: flex; justify-content: space-between; align-items: center; }*/ .logo-video-chat { width: 170px; height: auto; margin-top: -10px; align-items: center; } /* Text greeting */ .chat-greeting { margin-top: 60px; color: white; font-weight: bold; font-size: 28px; line-height: 34px; font-weight: 600; } /* Message input */ .chat-input-area { display: flex; margin-top: 5px; color: black !important; background-color: white; border-radius: 10px; cursor: pointer; } .chat-placeholder { flex: 1; padding: 8px 12px; border-radius: 20px; border: none; outline: none; } .send-btn-input { background-color: #1f3a52; border: none; margin-left: 5px; border-radius: 50%; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; cursor: pointer; margin-top: 2px; } /* Footer tabs */ .chat-footer-tabs { display: flex; justify-content: space-around; padding: 8px 0; background-color: #fff; border-top: 1px solid #ccc; flex-shrink: 0; /* πŸ‘ˆ Prevent it from shrinking */ margin-top: 170px; } .tab-button { background: none; border: none; display: flex; flex-direction: column; align-items: center; color: black; cursor: pointer; } .tab-button.active { color: #1f3a52; } .tab-button-message { background: none; border: none; display: flex; flex-direction: column; align-items: center; background-color: transparent; cursor: pointer; } .tab-button-message.active svg path { fill: #1f3a52; } .close-btn { position: absolute; top: 10px; right: 15px; font-size: 1.25rem; background: none; border: none; color: black; cursor: pointer; border-radius: 20px; } .close-btn:hover { color: white; } .wave { display: inline-block; animation: wave 1s infinite; } @keyframes wave { 0% { transform: rotate(0deg); } 50% { transform: rotate(15deg); } 100% { transform: rotate(0deg); } } .message-container { width: 400px; height: 500px; border-radius: 12px; position: fixed; bottom: 20px; right: 20px; z-index: 1000; display: flex; flex-direction: column; background-color: white; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); overflow: hidden; } .message-header { padding: 16px; text-align: center; height: 65px; border-bottom: 1px solid #ccc; } .message-header h2 { margin: 0; gap: 8px; font-size: 24px; font-weight: 600; text-align: center; font-size: 18px; color: black; margin-top: -20px; } .message-body { padding: 16px; display: flex; flex-direction: column; align-items: center; flex-grow: 1; border-bottom: none; } .message-body-svg { margin-top: 100px; } .message-body h2 { font-size: 18px; line-height: 24px; font-weight: 600; color: black; margin-top: 10px; } .chat-footer-tabs-message { display: flex; justify-content: space-around; padding: 8px 0; background-color: #fff; border-top: 1px solid #ccc; flex-shrink: 0; /* πŸ‘ˆ Prevent it from shrinking */ margin-top: 14px; } .send-message-btn { background-color: #1f3a52; border: none; padding: 8px 16px; border-radius: 20px; cursor: pointer; display: flex; align-items: center; justify-content: center; color: white; margin-top: 50px; } .send-message-btn svg { margin-right: 8px; } .message-footer { padding: 8px 0; border-top: 1px solid #ccc; flex-shrink: 0; } /*Message-Chat-Container*/ #message-chat-container { position: fixed; bottom: 20px; right: 20px; z-index: 1100; background-color: white; border-radius: 12px; width: 400px; height: 500px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); overflow: hidden; display: flex; flex-direction: column; } .logo-video-message { width: 170px; height: auto; margin-top: 0px; margin-left: -55px; } .message-chat-header { display: flex; align-items: center; padding: 10px; border-bottom: 1px solid #ccc; background-color: #1f3a52; height: 60px; } .back-to-messages { background: none; border: none; padding: 0; margin-right: 10px; color: white; } .user-picture { width: 30px; height: 30px; border-radius: 50%; margin-right: 10px; } .user-name { font-weight: bold; } .message-chat-body { flex: 1; padding: 20px; overflow-y: auto; max-height: calc(100% - 120px); /* adjust the value based on the height of the header and input fields */ } .chat-bubble { margin: 8px; padding: 12px 15px; border-radius: 18px; position: relative; background-color: #f1f1f1; color: #333; font-size: 14px; } .sent-message { background-color: #daf0ff; align-self: flex-end; margin-left: auto; margin-right: -15px; /* πŸ‘ˆ bring bubble closer to right edge */ max-width: 270px; width: fit-content; width: -moz-fit-content; } .received-message { background-color: #e2ffe2; align-self: flex-start; margin-right: auto; margin-left: -15px; /* πŸ‘ˆ bring bubble closer to right edge */ max-width: 270px; width: fit-content; width: -moz-fit-content; } .sender-badge { font-weight: bold; background-color: #e0f3ff; color: #0077b6; padding: 2px 8px; border-radius: 12px; font-size: 0.95em; display: inline-block; margin-right: 6px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); } .bubble-content p { margin: 0 0 6px 0; word-wrap: break-word; } .timestamp { font-size: 11px; color: #666; display: block; text-align: right; } .ask-us-anything { color: #666; } .message-chat-input { position: absolute; bottom: 0; left: 0; width: 100%; padding: 10px; border-top: 1px solid #ccc; background-color: white; box-sizing: border-box; } .input-wrapper { display: flex; align-items: center; min-height: 48px; max-height: 200px; width: 100%; box-sizing: border-box; overflow-y: auto; } .input-wrapper>button, .input-wrapper>label { margin-right: 10px; } .input-container { flex: 1; position: relative; background-color: #f0f0f0; border-radius: 8px; box-sizing: border-box; padding: 10px; display: flex; flex-direction: column; } .input-inner { display: flex; align-items: center; justify-content: space-between; } .message-chat-input-field { outline: none; white-space: pre-wrap; word-break: break-word; font-size: 14px; flex: 1; background: transparent; } .send-button-input { background: rgb(27, 29, 62); color: white; opacity: 0.4; cursor: not-allowed; margin-left: 10px; box-sizing: border-box; border: none; position: relative; transition: color 0.2s, background-color 0.2s, box-shadow 0.2s ease-in-out; border-radius: 32px; font-size: 14px; height: 32px; width: 32px; display: flex; /* Add this line */ -webkit-box-pack: center; justify-content: center; align-items: center; } .send-button-input.enabled { opacity: 1; cursor: pointer; } .emoji-button { border: none; background-color: white; } .typing-indicator { padding: 4px 12px; margin: 4px; font-size: 13px; font-style: italic; color: #777; align-self: flex-start; } .meta-info { display: flex; justify-content: space-between; margin-top: 6px; font-size: 11px; color: #666; } .sender-name { text-align: left; font-style: italic; } .timestamp { text-align: right; } .chat-date-label { text-align: center; margin: 20px auto; color: #555; font-weight: bold; background: #f0f0f0; padding: 6px 12px; border-radius: 20px; width: fit-content; font-size: 0.85rem; } .file-attachment-button { cursor: pointer; /* Add other styles as needed */ } .message-chat-input-field { color: black !important; background-color: white !important; } /*#endregion CHAT */ /*#region RESULT***********************************************RESULT SECTION*********************************************************/ .self-check-container { display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; gap: 10px; height: 500px; /* Ensures responsiveness */ } /* Left section (text & response) */ .left-new-section { width: 51%; position: relative; display: flex; flex-direction: column; margin-top: 210px !important; } /* Content Box */ .badge { display: inline-block; /* Let it size naturally */ background: linear-gradient(135deg, #00dbde, #fc00ff); /* dark background */ color: white; border-radius: 20px; padding: 12px 18px; max-width: 80%; /* responsive width */ margin: 20px auto; /* center horizontally */ text-align: center; font-weight: 500; box-shadow: 0 4px 10px rgba(252, 0, 255, 0.25); word-wrap: break-word; /* force wrapping */ white-space: normal; /* ensure text breaks */ margin-top: 150px; font-size: 15px; } .badge p { margin: 0; /* remove default p spacing */ line-height: 1.4; } .infoBadge { display: inline-block; /* shrink to content */ backdrop-filter: blur(4px); /* optional, adds soft frosted effect */ background: linear-gradient(135deg, rgba(15, 32, 39, 0.85) 0%, /* dark moody base */ rgba(32, 58, 67, 0.7) 50%, /* slightly lighter mid-tone */ rgba(112, 184, 0, 0.15) 100% /* subtle MoodPΓ di green tint */ ); /* dark background */ color: rgb(224, 223, 223); border-radius: 20px; padding: 15px 20px; max-width: 90%; /* responsive width */ margin: 20px auto; /* center horizontally */ text-align: center; font-weight: 500; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); word-wrap: break-word; /* wrap long text */ white-space: normal; /* ensure line breaks */ margin-top: 70px; } .infoBadge p { margin: 0; /* remove default p spacing */ line-height: 1.5; } @media print { body { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; } .moodBadge { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; } } .new-content-container { width: 100%; height: 430px !important; /* Adjust height as needed */ backdrop-filter: blur(4px); /* optional, adds soft frosted effect */ background: linear-gradient(135deg, rgba(15, 32, 39, 0.85) 0%, /* dark moody base */ rgba(32, 58, 67, 0.7) 50%, /* slightly lighter mid-tone */ rgba(112, 184, 0, 0.15) 100% /* subtle MoodPΓ di green tint */ ); padding: 15px; border-radius: 10px; color: black; box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4), -4px -4px 10px rgba(255, 255, 255, 0.05); text-align: center; margin-right: 80px; /* Push it to the right */ overflow-y: auto; /* Enable vertical scrolling */ } .new-content-container::-webkit-scrollbar { width: 5px; /* Width of the scrollbar */ } .insight-block { color: #2c3e50; } .new-content-container::-webkit-scrollbar-track { background: var(--scrollbar-track-bg); /* Track background */ border-radius: 5px; } .new-content-container::-webkit-scrollbar-thumb { background: var(--check-dark-blue) !important; /* Scrollbar color */ border-radius: 5px; } .new-content-container::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); /* Darker shade when hovered */ } .contentbadge { display: inline-block; padding: 4px 10px; border-radius: 12px; font-size: 12px; font-weight: 600; border: 1px solid transparent; margin-right: 6px; } .contentbadge-low { background: #e6fbe6; color: #1f9d1f; border-color: #29c429; } .contentbadge-moderate { background: #fff9e6; color: #a28b00; border-color: #bea925; } .contentbadge-high { background: #fff3e6; color: #b36b00; border-color: orange; } .contentbadge-alert { background: #ffe6e6; color: #a30000; border-color: #be2528; } .result { position: relative; padding: 3rem; background: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%); background-size: cover; color: #fff; height: 1050px; margin-top: -32px; z-index: 5; } .result-header { text-align: center; margin-bottom: 2rem; } .result-header p { font-size: 1.3rem; color: #fff; margin-bottom: 0.5rem; font-family: sans-serif; line-height: 1.4em; } .result-header h2 { font-size: 2.2rem; font-weight: 700; color: #fff !important; margin-bottom: 3rem; line-height: 1.3; } .result-content h1 { font-size: 5rem; line-height: 1.3; font-style: italic; font-weight: 300; } .stat { display: flex; align-items: baseline; gap: 0.2rem; } .stat span { font-size: 3rem; font-style: italic; font-weight: 300; } .serif1 { font-weight: 200; font-style: italic; font-family: serif; margin-left: 0.2rem; /* reduce or remove margin */ } .quote-div { position: absolute; top: 480px; left: 0; width: 100%; max-width: 360px; height: 170px; max-height: 180px; box-sizing: border-box; border-left: 4px solid #0056b3; border-right: 4px solid green; transition: border-color 0.8s ease-in-out; backdrop-filter: blur(4px); /* optional, adds soft frosted effect */ background: linear-gradient(135deg, rgba(15, 32, 39, 0.85) 0%, /* dark moody base */ rgba(32, 58, 67, 0.7) 50%, /* slightly lighter mid-tone */ rgba(112, 184, 0, 0.15) 100% /* subtle MoodPΓ di green tint */ ); /* smooth color change */ } .image-div img { height: 408px !important; width: 430px !important; } #personal_quote { margin-top: -20px; font-family: 'Times New Roman', Times, serif; /* elegant serif for quotes */ font-size: 1rem; /* ~16px, nice balance */ line-height: 1.5; /* improve readability */ font-weight: 400; /* keep it light */ color: rgb(227, 225, 225); /* dark grey for good contrast */ text-align: center; /* center-align inside quote-div */ padding: 0.5rem 1rem; /* breathing space inside */ word-wrap: break-word; /* prevent overflow */ } /* Container for 3 boxes */ .result-content { position: relative; } .right { height: 431px !important; margin-top: 48px; background: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%); } .result-content .box { background: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%); } .banner { position: fixed; bottom: 20px; left: 50%; transform: translateX(100%); background: linear-gradient(145deg, rgba(3, 46, 66, 0.85), rgba(2, 78, 99, 0.8), rgba(0, 128, 128, 0.7)); box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35); border: 1px solid rgba(255, 255, 255, 0.1); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); color: #eaf6ff; /* icy text */ padding: 15px 25px; border-radius: 8px; opacity: 0; transition: all 0.6s ease-in-out; white-space: pre-line; z-index: 9999; font-size: 1rem; max-width: 80%; text-align: center; } /* when visible */ .banner.show { transform: translateX(-50%); /* move to center */ opacity: 1; } .announcement { position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%); background-color: rgba(0, 0, 0, 0.7); padding: 12px 25px; border-radius: 10px; width: 35%; max-width: 800px; height: 50px; overflow: hidden; /* Hide scrolling text overflow */ display: flex; align-items: center; justify-content: start; z-index: 1000; } /* Inner wrapper to animate only the text */ .announcement p { display: inline-block; white-space: nowrap; padding-left: 100%; /* Start offscreen to the right */ animation: scrollText 15s linear infinite; color: rgb(219, 216, 216); font-weight: bold; font-size: 16px; bottom:5px; } /* Hide all language versions by default */ .announcement p.hidden { display: none; } /*#endregion RESULT*/ /*#region BLOG Section***********************************************BLOG***************************************************/ .blog { position: relative; z-index: 5; text-align: center; /* Gradient background */ background: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%); padding: 4rem 2rem; margin-top: -32px; /* βœ… Center section perfectly */ width: 90%; max-width: 1400px; left: 46%; transform: translateX(-50%); position: relative; /* required for transform to work */ box-sizing: border-box; border-radius: 10px; } .blog .result-header p.subtitle { font-size: 1rem; color: white; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 0.5rem; } .blog .result-header h2 { font-size: 2.2rem; font-weight: 700; color: white; margin-bottom: 3rem; line-height: 1.3; } .profile-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; } .profile-card { background: #e3e0e0; border-radius: 1rem; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06); overflow: hidden; transition: transform 0.3s ease; text-align: left; } .profile-card:hover { transform: translateY(-8px); } .profile-image img { width: 100%; height: 220px; object-fit: cover; } .profile-content { padding: 1.5rem; } .icon-container1 { color: #1f3a52; font-size: 1.5rem; margin-bottom: 1rem; } .profile-content h3 { font-size: 1.4rem; margin-bottom: 0.8rem; color: #111827; } .profile-content p { font-size: 0.95rem; line-height: 1.5; color: #374151; margin-bottom: 1.5rem; } .read-more-btn1 { display: inline-block; background: #1f3a52; color: #fff; padding: 0.6rem 1.2rem; font-size: 0.9rem; border: none; border-radius: 999px; cursor: pointer; transition: background 0.3s ease; } .read-more-btn1:hover { background: #4338ca; } /*#endregion Ranger1*/ /*#region RANGER SECTION*********************************************RANGER*************************/ /* General Styles */ .ranger-wrapper { position: relative; width: 100vw; min-height: 100vh; /* Let content expand naturally */ z-index: 14; overflow: hidden; } #ranger-section { z-index: 2; height: 550px; } .ranger { position: relative; width: 100%; /* can keep this if you want narrower than viewport */ min-height: 100vh; /* Instead of fixed height */ margin: 0 auto; /* <-- centers the ranger horizontally */ background: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%); background-size: cover; background-position: center; z-index: 0; overflow: hidden; } .ranger-content { width: 100%; /* full width inside the ranger */ max-width: 1200px; /* optional: prevent it from stretching too wide */ margin: 0 auto; /* centers content inside the ranger */ padding: 50px 20px; background: url("../assets/map2.jpg") no-repeat center center; background-size: cover; background-position: center; text-align: center; color: white; border-radius: 20px; position: relative; overflow: hidden; top: 50px; } /* Dark overlay */ .ranger-content::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--overlay-darker); /* Dark overlay with transparency */ border-radius: 20px; /* Match the border radius of the content */ z-index: 1; /* Ensures overlay is on top of the image */ } /* Make sure the text stays on top of the overlay */ .ranger-content>* { position: relative; z-index: 2; /* Text is above the overlay */ } .global-reach { font-size: 1.5rem; /* Reduced font size */ margin-bottom: 20px; color: white } .sections { display: flex; justify-content: space-between; align-items: center; margin-top: 40px; } .section-left, .section-middle, .section-right { width: 30%; /* Each section takes up 30% of the width */ padding: 20px; } .value { font-size: 2.5rem; /* Large font for the value */ font-weight: bold; color: white } .word { font-size: 1rem; margin-top: 10px; color: white } .rolling-container { display: inline-flex; overflow: hidden; height: 1em; line-height: 1em; vertical-align: middle; font-size: 5rem; /* Increased font size */ font-weight: bold; color: white } .fixed-number { display: inline-block; } .rolling-number { display: inline-block; position: relative; overflow: hidden; width: 1ch; text-align: center; } .rolling-number span { display: block; position: absolute; width: 100%; transition: transform 0.8s ease-in-out; } /* Styling for second row */ .sections-second-row { display: flex; justify-content: space-between; align-items: center; margin-top: 50px; /* Adds space between first and second row */ } .section-left-second, .section-middle-second, .section-right-second { width: 30%; padding: 20px; } .value-second-row { font-size: 5rem; font-weight: bold; color: var(--ranger-primary-text); } .word-second-row { font-size: 1rem; margin-top: 10px; color: var(--ranger-primary-text); } /*#endregion Ranger*/ /*#region ****************************************************Motivational Messages Container**************************** */ /*Container for the Motivational Messages */ .motivational-messages { position: relative; height: 100px; /* Adjust the height as needed */ overflow: hidden; margin-top: 70px; } .motivational-messages p { font-family: 'Roboto', sans-serif; font-weight: 400; /* normal weight */ line-height: 1.6; } /* Style for Each Message */ .message-1, .message-2, .message-3, .message-4, .message-5, .message-6, .message-7, .message-8 { font-size: 1.5em; color: var(--motivation-text-light); position: absolute; width: 100%; opacity: 0; /* Start invisible */ left: 100%; /* Start off-screen to the right */ animation-fill-mode: forwards; /* Keep final state after animation */ } /* Individual animation delays */ .message-1 { animation: slideInOut 6s ease-in-out 0s; } .message-2 { animation: slideInOut 6s ease-in-out 6s; } .message-3 { animation: slideInOut 6s ease-in-out 12s; } .message-4 { animation: slideInOut 6s ease-in-out 18s; } .message-5 { animation: slideInOut 6s ease-in-out 24s; } .message-6 { animation: slideInOut 6s ease-in-out 30s; } .message-7 { animation: slideInOut 6s ease-in-out 36s; } .message-8 { animation: slideInOut 6s ease-in-out 42s; } /* Keyframes for sliding in and out */ /* Keyframes for messages */ @keyframes slideInOut { 0% { opacity: 0; left: 100%; } 20% { opacity: 1; left: 10%; } 60% { opacity: 1; left: 0%; } 80% { opacity: 1; left: 0%; } 100% { opacity: 0; left: -100%; } } /* Now Playing Container */ .now-playing { position: fixed; top: 20%; left: -260px; /* Hidden off-screen initially */ width: 250px; background: var(--motivation-bg-dark); color: var(--motivation-text-white); padding: 15px; border-radius: 10px; transition: left 0.5s ease-in-out; box-shadow: 2px 2px 10px var(--motivation-shadow); z-index: 1000; } /* Reduce font sizes */ .now-playing p { font-size: 0.8125rem; /* Smaller text */ margin: 3px 0; } .now-playing h3 { font-size: 0.875rem; /* Smaller heading */ font-weight: bold; margin: 5px 0; } .now-playing.show { left: 10px; /* Slides in */ } /* Adjust buttons */ .now-playing .controls { display: flex; justify-content: space-between; margin-top: 8px; } .now-playing-controls button { background: var(--motivation-btn-bg); color: var(--motivation-text-white); border: none; padding: 5px 8px; font-size: 0.875rem; cursor: pointer; border-radius: 5px; } .now-playing-controls button:hover { background: var(--motivation-btn-hover); } /* Toggle Button (Expand/Collapse) */ .toggle-btn { position: absolute; top: 50%; right: -25px; /* Position outside */ width: 20px; height: 30px; background: var(--motivation-bg-medium); color: var(--motivation-text-white); display: flex; align-items: center; justify-content: center; cursor: pointer; border-radius: 5px 0 0 5px; font-size: 1rem; transition: background 0.3s; } .toggle-btn:hover { background: var(--motivation-btn-hover); } /*#endregion MOTIVATION*/ /*#region OUR PARTNERS***************************************************PARTNERS***************************************/ .pat-sec { position: relative; text-align: center; margin-top: 0px; background: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%); background-size: cover; z-index: 5; height: auto; /* allow growth */ padding-top: 30px; /* Add space inside the section */ margin-top: 0; } .pat-serif { font-weight: 200; font-style: italic; font-family: serif; margin-left: 0.2rem; /* reduce or remove margin */ } .pat-header { text-align: center; position: relative; color: white; } .pat-subtitle { font-size: 1rem; color: white; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 0.5rem; } .pat-header p { font-size: 1.3rem; color: #fff; margin-bottom: 0.5rem; font-family: sans-serif; line-height: 1.4em; } .pat-header h2 { font-size: 2.2rem; font-weight: 700; color: #fff !important; margin-bottom: 3rem; line-height: 1.3; } .partners-flex-wrapper { display: flex; align-items: center; justify-content: center; gap: 80px !important; /* spacing between text and box */ padding: 40px 20; flex-wrap: wrap; /* mobile responsiveness */ margin-left: 43px; /* push the box farther right */ } .partner-slider { overflow: hidden; position: relative; width: 100%; max-width: 600px; margin: 0; } .partner-slide-track { display: flex; animation: scroll 40s linear infinite; gap: 2rem; width: max-content; } @keyframes scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } .partner-image { width: 140px; height: 70px; border-radius: 15px; object-fit: cover; transition: transform 0.3s ease; } .partner-image:hover { transform: scale(1.05); } .textp-side { color: white; width: 380px; text-align: left; flex: 1; /* ➜ Add this */ } .textp-side h2 { font-size: 2.375rem; font-weight: 300; line-height: 1.1em; color: white; } .pat { font-weight: 200; font-style: italic; font-family: serif; } .textp-side .underline { width: 340px; height: 3px; background-color: var(--partner-underline); margin: 10px 0 15px; } .textp-side p { font-size: 0.877rem; line-height: 1.6; font-family: 'Roboto', sans-serif; } .rating-stars { margin-top: 10px; font-size: 1.25rem; } .partner-button { margin-top: 20px; padding: 12px 20px; background: linear-gradient(135deg, #00c6ff 0%, #0072ff 100%); /* dark neutral */ color: var(--partner-text-color); font-weight: 600; font-size: 0.875rem; border: #0481C1; /* button edge style * /* button edge style */ border-style: outset; /* button edge style */ border-radius: 30px; display: inline-flex; align-items: center; gap: 8px; cursor: pointer; transition: background-color 0.3s ease; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } .partner-button:hover { background: linear-gradient(135deg, #0072ff 0%, #00c6ff 100%); transform: scale(1.05); box-shadow: 0 0 15px rgba(0, 198, 255, 0.6); } .partner-icon { font-size: 0.9375rem; line-height: 1; position: relative; top: 1.5px; /* adjust this until it's visually aligned */ transition: transform 0.3s ease; } .partner-button:hover .partner-icon { transform: translateX(5px); } /* General row styling: you can reuse this for all partner rows */ .partner-image { width: 140px !important; height: 70px !important; /* you had "100 !important" β€” missing unit */ border-radius: 15px; /* subtle rounding for rectangle */ border: none; /* remove any border */ box-shadow: none; /* clean flat look */ object-fit: cover; /* makes image nicely fill the box */ transition: transform 0.3s ease; } .partner-image:hover { transform: scale(1.05); } .partner-slide-left, .partner-slide-fade { opacity: 0; transform: translateX(-50px); transition: all 0.8s ease-out; } .partner-slide-left.partner-animate { opacity: 1; transform: translateX(0); } .partner-slide-fade.partner-animate { opacity: 1; transform: translateX(0); transition-delay: 0.4s; } /*#endregion PARTNERS*/ /*#region *****************************************************OUR APP****************************/ .our-app-section { background: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%) !important; text-align: center; padding: 60px 20px 0; padding-bottom: 0 !important; border: none; box-sizing: border-box; position: relative; z-index: 5; min-height: 100vh; bottom: 0; overflow: hidden; } .our-app-section h2 { font-size: 2.25rem; font-weight: 700; margin-bottom: 10px; color: var(--our-app-text); } .our-app-section .underline { width: 100px; height: 4px; background-color: #fff; margin: 0 auto 20px; border-radius: 2px; } .our-app-section p { font-size: 1rem; color: var(--our-app-text); line-height: 1.6; max-width: 700px; margin: 0 auto 30px; } .store-buttons { display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; } .store-button { display: inline-flex; align-items: center; gap: 10px; padding: 12px 20px; font-size: 0.875rem; font-weight: 600; border-radius: 8px; text-decoration: none; color: white; transition: background-color 0.3s ease; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); } .store-button img { width: 40px; height: 40px; } .google-play, .ios-store { background-color: var(--our-app-bg-dark); } .google-play:hover, .ios-store:hover { background-color: var(--our-app-bg-darker); } .app-slide-left { opacity: 0; transform: translateX(-50px); transition: all 0.8s ease-out; } .app-slide-left.our-app-section-animate { opacity: 1; transform: translateX(0); } /*#endregion*****/ /*#region ********************************************************OUR TEAM*********************/ .our-team-section { text-align: center; padding: 60px 20px; background: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%) !important; margin-left: calc(-50vw + 50%); /* cancel container padding if inside bootstrap container */ position: relative; z-index: 1500; } .our-team-section h2 { font-size: 2.25rem; font-weight: 700; margin-bottom: 10px; color: var(--team-text-color); } .our-team-section p { font-size: 1rem; color: var(--team-text-color); max-width: 700px; margin: 0 auto 40px auto; } .our-team-section .underline { width: 100px; height: 4px; background-color: #fff; margin: 0 auto 20px; border-radius: 2px; } .team-slide-left, .team-slide-fade { opacity: 0; transform: translateX(-50px); transition: all 0.8s ease-out; } .team-slide-left.team-animate { opacity: 1; transform: translateX(0); } .team-slide-fade.team-animate { opacity: 1; transform: translateX(0); transition-delay: 0.4s; } .team-header { text-align: center; margin-bottom: 2rem; } .team-header p { font-size: 1.2rem; color: white; margin-bottom: 0.5rem; font-family: sans-serif; line-height: 1.4em; } .team-header h2 { font-size: 2.2rem; font-weight: 700; color: white; margin-bottom: 3rem; line-height: 1.3; } .serif3 { font-weight: 200; font-style: italic; font-family: serif; margin-left: 0.2rem; /* reduce or remove margin */ } .meet-team-btn-wrapper { text-align: center; margin: 20px 0; } .meet-team-btn { padding: 10px 25px; font-size: 16px; background: linear-gradient(135deg, #00c6ff 0%, #0072ff 100%); /* Choose your preferred color */ color: white; border: #0481C1; /* button edge style * /* button edge style */ border-style: outset; /* button edge style */ border-radius: 15px; cursor: pointer; transition: background-color 0.3s ease; text-decoration: none; } .meet-team-btn:hover { background: linear-gradient(135deg, #0072ff 0%, #00c6ff 100%); transform: scale(1.05); box-shadow: 0 0 15px rgba(0, 198, 255, 0.6); } /*#endregion OUR TEAM********************************/ /*#region FAQS*************************************************FAQS SECTION****************/ .faq-wrapper { background: linear-gradient(135deg, rgba(15, 32, 39, 0.85) 0%, /* dark moody base */ rgba(32, 58, 67, 0.7) 50%, /* slightly lighter mid-tone */ rgba(112, 184, 0, 0.15) 100% /* subtle MoodPΓ di green tint */ ); border: none; width: 80%; text-align: center; border-radius: 55px; } #faq { background: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%); background-size: 300% 300%; width: 100vw; margin: 50px auto; padding: 20px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); margin-bottom: -25px; margin-top: -38px; position: relative; z-index: 5; /* slightly higher than wrapper */ display: flex; justify-content: center; /* Center horizontally */ height: 1100px; align-items: center; /* Center vertically */ } .faq-title { font-size: 1.875rem; /* Increase size for better visibility */ color: var(--faq-title-color); margin-bottom: 20px; text-align: center; display: block; /* Ensures it takes the full width */ width: 100%; /* Makes sure it's centered inside the parent */ } .faq-sub { color: var(--faq-text-color); text-align: center; margin: 0 auto 30px auto; max-width: 800px; /* Optional: controls wrapping width */ line-height: 1.6; font-size: 1rem; display: block; width: 60%; } #faq .underline { width: 150px; height: 4px; background-color: #fff; margin: 0 auto 20px; border-radius: 2px; } /* FAQ item styles */ .faq-container { display: flex; flex-direction: column; gap: 15px; } .faq-item { border-bottom: 1px solid var(--faq-border-light); } .faq-question { background: linear-gradient(135deg, rgba(15, 32, 39, 0.85) 0%, /* dark moody base */ rgba(32, 58, 67, 0.7) 50%, /* slightly lighter mid-tone */ rgba(112, 184, 0, 0.15) 100% /* subtle MoodPΓ di green tint */ ); color: var(--faq-question-color); border: none; padding: 15px; font-size: 1rem; width: 100%; text-align: left; cursor: pointer; border-radius: 8px; transition: background-color 0.3s ease; } .faq-question:hover { background: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%); } /* FAQ answer styles */ .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out, padding 0.3s ease-out; padding: 0 15px; background-color: var(--faq-answer-bg); } .faq-item.open .faq-answer { max-height: 300px; /* Adjust based on content height */ padding: 10px 15px; /* Add some padding when opened */ } .faq-answer p { margin: 0; line-height: 1.6; color: var(--faq-answer-text-color); font-size: 0.9375rem; } @keyframes slideDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } /*#endregion*/ /*#region*************CONTACT AND FOOTER STYLING***************************************/ #contact { background: rgba(2, 2, 113, 0.772); color: #fff; padding: 2rem; border-radius: 8px; max-width: 700px; margin: 0 auto; } /* Form Styling */ #contact form { display: flex; flex-direction: column; gap: 1rem; height: 400px; } /* Input and Textarea Styling */ #contact form input, #contact form textarea { width: 100%; padding: 0.3rem; border: 1px solid #555; border-radius: 4px; background-color: whitesmoke; color: Black; box-sizing: border-box; } /* Textarea Specific Styling */ #contact form textarea { height: 70px; resize: vertical; } /* Button Styling */ #contactForm button { background: linear-gradient(135deg, #0481C1 0%, #0f2027 100%); padding: 0.5rem 1rem; color: #fff; font-size: 0.9rem; border: none; cursor: pointer; border-radius: 4px; width: 8.25rem; margin-top: 1rem; transition: background-color 0.3s ease; box-sizing: border-box; } #contactForm button:hover { background-color: #315372; } /* Label Styling */ #contact form label { color: #555; font-weight: bold; margin-bottom: 0.5rem; } /* Social Media Icons Styling */ .social-icon { color: #fff !important; font-size: 1.5rem; text-decoration: none; transition: color 0.3s ease; margin: 0 0.5rem; } .social-icon:hover { color: #ddd; } .whatsapp-qr-code { text-align: center; margin-top: 1.25rem; } .whatsapp-qr-code img { border: 1px solid #ddd; padding: 10px; border-radius: 8px; } .subfooter { display: flex; justify-content: space-between; padding: 50px 140px; width: 1100px; margin-bottom: -130px !important; box-sizing: border-box; max-width: 1500px; margin: 0 auto; /* Center it if needed */ color: white !important; background: linear-gradient(135deg, rgba(15, 32, 39, 0.85) 0%, /* dark moody base */ rgba(32, 58, 67, 0.7) 50%, /* slightly lighter mid-tone */ rgba(112, 184, 0, 0.15) 100% /* subtle MoodPΓ di green tint */ ); border-radius: 10px; overflow: hidden; } .subfooter-left { display: flex; flex-direction: column; align-items: flex-start; margin-left:-100px; } .subfooter-right { display: flex; justify-content: flex-start; /* Change to flex-start */ width: 60%; align-items: center; margin-top: -65px; transform: translateX(-120px); /* Use transform instead of margin-left */ } .subscribe-container { display: flex; flex-direction: column; align-items: flex-start; } .subscribe-form { display: flex; } .email-input { padding: 10px; border-radius: 10px; border: none; width: 250px !important; } .subf1-button { height: 44px; width: 150px !important; border-radius: 35px !important; background: linear-gradient(135deg, #0481C1 0%, #0f2027 100%); color: #fff; border: #0481C1; border-style: outset; margin-top: 0px; margin-left: 7px; appearance: none; -webkit-appearance: none; cursor: pointer; } .privacy-statement { font-size: 14px; } .about-subtext { line-height: 1.1; text-align: left; margin-top: 30px; margin-bottom: 15px; color: white !important; font-size: 38px !important; line-height: 1.1em; font-weight: 100; } .subf { color: white !important; } .serif-f { line-height: 1.1; text-align: left; margin-bottom: 30px; font-style: italic; font-family: Newsreader, "Times New Roman", serif; font-size: 38px !important; line-height: 1.1em; font-weight: 100; color: #fff !important; } .copy { color: white !important; font-weight: 500 !important; margin-top: 24px; width: 280px; } .copy1 { color: white !important; margin-top: -20px; font-size: 1rem; font-weight: 500 !important; line-height: 28px; } .copy2 { color: white !important; margin-top: -20px; } .logo-video-1 { width: 170px; height: auto; } .image-placeholder1 video { width: 100%; height: 100%; object-fit: cover; width: 250px; height: 250px; border-radius: 10%; margin-top: 50px; margin-left: 60px; } @keyframes shake { 0% { transform: translateX(0); } 25% { transform: translateX(-5px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-5px); } 100% { transform: translateX(0); } } /*#endregion***/ /*#region****FOOTER******************/ #mainContent footer { margin-left: -50px; /* cancel out parent padding */ margin-right: -50px; width: calc(100% + 100px); /* expand back full width */ } footer { /* Matches footer or slightly darker */ color: #fff; display: flex; justify-content: space-around; padding: 1.25rem; flex-wrap: wrap; } /* Custom Footer Area */ .custom_footer_area { background: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%) !important; width: 100% !important; /* override container limits */ max-width: 100% !important; margin: 0 !important; padding: 0 !important; border-radius: 0 !important; /* kill the curve */ position: relative; display: block; clear: both; /* prevent float collapse */ /* make sure it sits above bg layers */ z-index: 5; margin-top: 0 !important; padding-top: 0 !important; margin-bottom: -30px !important; } .f-title { color: #fff; } /* Footer Top */ .custom_footer_top { padding: 100px 120px 140px; /* leave room for compliance footer */ position: relative; overflow-x: hidden; width: 100%; /* βœ… full width */ max-width: 100vw; /* βœ… match viewport */ overflow: visible; /* make sure footer can expand */ } .custom_footer_top .row { display: flex; flex-wrap: nowrap; gap: 54px; color: #fff; } /* Adjust input fields and text area to same width */ .custom_footer_top .contact_widget input, .custom_footer_top .contact_widget textarea { width: 100%; /* Set the width to 100% */ max-width: 100%; /* Ensure they are full-width */ padding: 12px; /* Optional: Adjust padding for better appearance */ margin-bottom: 0.9375rem; /* Space below each input */ } /* Footer Bottom */ .custom_footer_area .footer_bottom { padding-top: 5px; padding-bottom: 50px; } .custom_footer_top .contact_widget p, .custom_footer_top .quick_links_widget p, .custom_footer_top .support_widget p, .custom_footer_top .social_widget p { font-size: 1rem; font-weight: 300; line-height: 28px; color: #6a7695; margin-bottom: 1.25rem; } /* Button Hover */ a:hover, a:focus, .btn:hover, .btn:focus, button:hover, button:focus { text-decoration: none; outline: none; } .custom_footer_top .f_widget .f_list li a:hover { color: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%); } /* Social Icons */ .custom_footer_top .f_social_icon a { width: 46px; height: 46px; border-radius: 50%; font-size: 0.875rem; line-height: 45px; color: #858da8; display: inline-block; background: #ebeef5; text-align: center; transition: all 0.2s linear; } .custom_footer_top .f_social_icon a:hover { background: #1f3a52; border-color: #1f3a52; color: white; } .custom_footer_top .f_social_icon a+a { margin-left: 4px; } /* Footer Background */ /* Keyframes Animation */ @keyframes myfirst { 0% { left: -25%; } 100% { left: 100%; } } @-webkit-keyframes myfirst { 0% { left: -25%; } 100% { left: 100%; } } /* Footer Widget Styling */ .f_widget { margin-bottom: 40px; } .f_widget h3 { font-size: 1.125rem; font-weight: 600; margin-bottom: 1.25rem; color: #fff; } .f_widget .f_list { list-style: none; padding: 0; margin: 0; color: white; } .f_widget .f_list li { margin-bottom: 0.9375rem; } .f_widget .f_list li a { color: #fff; font-size: 0.875rem; text-decoration: none; } .f_widget .f_list li a:hover { color: #5e2ced; } .btn_get_two:hover { background: transparent; color: #5e2ced; } .f_social_icon a { width: 46px; height: 46px; line-height: 46px; background: #ebeef5; border-radius: 50%; color: #858da8; text-align: center; font-size: 1.25rem; margin-right: 10px; transition: all 0.3s ease; } .f_social_icon a:hover { background: #5e2ced; border-color: #5e2ced; color: white; } /* Social Icons Font */ .f_social_icon a i { font-size: 1.25rem; } .top { position: fixed; bottom: 5px; right: 15px; z-index: 1001; font-size: 16px; background: linear-gradient(135deg, #0481C1 0%, #0f2027 100%); color: white; border: none; outline: none; padding: 5px 5px; border-radius: 60px; cursor: pointer; opacity: 1; /* <<< make it always visible */ transition: opacity 0.3s ease-in-out; font-weight: 700; } .top:hover { background-color: #0056b3; } .top.show { opacity: 1; } .input-error { border: 1px solid var(--input-error-border); } .error-message { color: var(--error-message-color); font-size: 0.85em; margin-top: 5px; } /* Custom Modal styles */ .custom-modal { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; display: none; justify-content: center; align-items: center; background-color: var(--modal-overlay-bg); z-index: 9999; pointer-events: auto; } .custom-modal.show { display: flex; /* Show and center modal */ } #errorModal .custom-modal-content { background: linear-gradient(135deg, #ff6a6a, #d93636); color: #fff; box-shadow: 0 8px 24px rgba(217, 54, 54, 0.4); } #successModal .custom-modal-content { background: linear-gradient(135deg, #28a745, #20c997); color: #fff; box-shadow: 0 8px 24px rgba(40, 167, 69, 0.35); } /* Common modal content */ .custom-modal-content { border-radius: 10px; max-width: 260px; /* reduced from 320px */ width: 85%; /* takes less screen space */ padding: 14px 16px; /* reduced padding */ animation: slideUp 0.35s ease-out; pointer-events: auto; z-index: 10000; } /* Header Styling */ .custom-modal-header { background: transparent !important; /* Let gradient show */ border-bottom: 1px solid rgba(255, 255, 255, 0.2); padding-bottom: 6px; display: flex; align-items: center; justify-content: space-between; } .custom-modal-title { font-size: 0.9rem; /* smaller text */ font-weight: 600; letter-spacing: 0.4px; margin: 0; } /* Body */ .custom-modal-body { padding: 8px; font-size: 0.9rem; /* reduced font */ text-align: center; color: white; } /* Footer */ /* Footer */ .custom-modal-footer { padding: 6px; text-align: center; } .custom-modal-footer button { border-radius: 6px; font-size: 0.75rem; /* smaller button text */ padding: 4px 10px; /* smaller button */ box-shadow: none; } /* Animation */ @keyframes slideUp { from { transform: translateY(40px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .hidden { display: none; } #countdown-timer { font-weight: bold; color: green; animation: pulse 1s ease-in-out infinite; } @keyframes pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.3); opacity: 0.7; } } /*#endregion FOOTER*/ /*#region COMPLIANCE FOOTER*/ .compliance-footer { display: flex; flex-direction: column; justify-content: center; /* centers vertically */ align-items: center; /* centers horizontally */ text-align: center; color: #fff; margin-top: 18px; padding: 10px 0; width: 100%; } .badge-line { display: flex; flex-wrap: wrap; justify-content: center; /* centers horizontally */ align-items: center; /* aligns icons vertically */ gap: 8px; font-size: 13px; color: #fff; opacity: 0.95; margin-bottom: 6px; } .badge-line span { display: flex; align-items: center; gap: 6px; white-space: nowrap; } .badge-line i { color: #70b800; font-size: 14px; } .compliance-note { font-size: 12px; line-height: 1.5; color: #dcdcdc; max-width: 80%; text-align: center; } /*#endregion COMPLIANCE*/ /* --------------------------------------------------------------------------------------------------------------------------------------------------------- πŸ“± Media Queries for Responsiveness -------------------------------------------------- */ /*MEDIA QUERY FOR BACKGROUND SECTION*/ /* === Circles Responsive Layout === */ /* Extra Large Monitors (β‰₯2080px) */ /* === Extra Large Monitors (β‰₯2080px) === */ /* Ultra-Wide Screens */ @media (min-width: 2560px){ /*#region BACKGROUND*/ .section-image { height: 100vh; } .nav-links { gap: 60px; /* equal spacing between icons */ top: 10px; } .nav-links li a:hover span { pointer-events: auto; font-size: 16px; /* πŸ‘ˆ increase text size on hover */ } .image-overlay { top: 25%; left: 10%; text-align: left; } .h2-container { font-size: 50px !important; line-height: 1.2; width: 60%; margin-left: 25px; margin-top: 70px !important; } .b-container { font-size: 1.5rem !important; width: 70%; margin-left: 40px; } .h3-container { font-size: 1.5rem !important; margin-left: 40px; } .subscribe-btn { margin-left: 40px; } .container-i { left: 60px !important; top: -170px; } .circle-container { width: 35px; height: 35px; margin-top: 250px !important; } .circle-text-container { width: 14%; margin-left: 305px !important; margin-top: 243px !important; font-size: 1.5rem; } .container-2 { left: 100px !important; top: -320px; } .circle-container-2 { width: 35px; height: 35px; top: 250px; } .circle-text-container-2 { width: 12%; margin-left: 270px !important; margin-top: 210px; font-size: 1.5rem; } .bottom-container { width: 75%; padding: 15px 25px; gap: 25px; } .counseling-section { max-width: 200px; } .image-slideshow { left: 500px !important; height: 90vh; } /*#endregion BRIEF*/ /*#region BRIEF*/ .brief { padding: 50px; } .brief-heading { font-size: 2.6rem; } .centered-content { margin-left: 20px; margin-top: -350px; max-width: 850px; } .centered-content p { font-size: 1.1rem; line-height: 1.6; } .video-container { width: 380px; height: 380px; left: -220px !important; } .circle-text-container-j, .circle-text-container-k { margin-left: 200px; width: 40%; font-size: 0.95rem; } .scroll-cue { bottom: 30px; } /*#endregion BRIEF*/ /*#region WHO WE ARE*/ .who-we-are-section { height: 880px; padding: 3rem; } .who-we-are-image { width: 650px; margin-top: 90px; margin-left: 55px; } .who-we-are-image video { height: 550px; } .circle-text-container-m, .circle-text-container-n, .circle-text-container-o { font-size: 1rem; width: 45%; } .who-we-are-content h2 { font-size: 46px; } .who-we-are-content>p { font-size: 1.15rem; } .card-box { width: 240px !important; height: 250px; } /*#endregion WHO WE ARE*/ /*#region RESULT SECTION*/ .result { height: 1100px; } .result-header h2 { font-size: 2.6rem; } .result-content h1 { font-size: 5.5rem; } .stat span { font-size: 3.2rem; } .new-content-container { height: 470px !important; } .quote-div { top: 500px; max-width: 380px; } .right { left: 905px !important; width: 850px !important; height: 466px !important; } /*#endregion RESULT SECTION*/ /*#region QUOTES*/ .fun.pinned { margin-top: 100px !important; } .fun-wrapper { margin-top: 400px !important; } /*#endregion QUOTES*/ /*#region CONSULT*/ .consult-container { width: 650px; height: 560px; } .consult-container .image-box { width: 320px; height: 430px; margin-left: 220px; } .consult-container .text-box { width: 390px; height: 330px; } .serif { font-size: 72px; } .intro-text { font-size: 21px; max-width: 48%; } .text-wrapper{ transform: translateX(5%); } .consult-container{ right:5%; } /*#endregion CONSULT*/ /*#region WHO WE ARE1*/ .who-we-are-section1 { height: 900px; } .image-card-container { width: 550px; } .who-we-are-content1 h2 { font-size: 36px; } .who-we-are-content1>p { font-size: 1.15rem; } /*#endregion WHO WE ARE*/ /*#region CHOOSE*/ .why-section-left h1 { font-size: 3rem; } .info-block .heading1 { font-size: 72px; } /*#endregion CHOOSE*/ /*#region BLOG SECTION*/ .blog { padding: 5rem 8rem; left: 740px; } .blog .result-header h2 { font-size: 2.4rem; } .profile-cards { gap: 2.5rem; } .profile-image img { height: 240px; } /*#endregion BLOG*/ /*#region MEDITATION*/ .meditation-section { padding: 70px 80px; } .track { flex: 0 0 30%; max-width: 30%; } .track-image { height: 260px; } .meditation-heading { font-size: 2.4rem; } /*#endregion MEDITATION*/ /*#region FEATURES*/ #features { padding: 70px 120px; border-radius: 70px; } .features-heading { font-size: 2.2rem; } .result-header h2 { font-size: 2.6rem; } .result-header p { font-size: 1.3rem; } .features-box img { max-height: 460px; } .custom-carousel-control-prev { transform: translateX(70px); } .custom-carousel-control-next { transform: translateX(1300px); } /*#endregion FEATURES*/ /*#region SPOTLIGHT*/ .spotlight-wrapper { padding: 70px 160px; } .spotlight-text { max-width: 750px; } .spotlight-text h2 { font-size: 2.6rem; } .spotlight-text p { font-size: 1.3rem; line-height: 1.9; } .circle-placeholder { width: 240px; height: 240px; } .text-container { max-width: 500px; } /*#endregion SPOTLIGHT*/ /*#region ADVERT*/ #advert-section { min-height: 100vh !important; /* ensures at least one screen height */ padding: 50px; } .advert-container { height: auto; overflow: visible; } .advert-box { width: 700px; height: auto !important; min-height: 550px; } .advert-box img { width: 65%; height: 350px; } .text-right-side h2 { font-size: 2.2rem; } .text-right-side p { font-size: 1rem; } .text-right-side .underline { width: 480px; } .ad-title { margin-top: -20px; } .advert-left { margin-top: -25px; transform: translate(25%); } .text-right-side{ } /*#endregion ADVERT*/ /*#region RANGER*/ .ranger-content{ transform: translateY(50%) !important; } /*#endregion RANGER*/ /*#region OUR APP*/ #our-app-section { padding-top: 260px !important; /* Adjust the value as needed */ } /*#endregion OUR APP*/ /*#region FOOTER FIX*/ .custom_footer_top { position: relative; padding: 100px 120px 120px; /* extra bottom padding for compliance section */ box-sizing: border-box; min-height: auto; overflow: visible; } .subfooter { position: relative; left: 100%; transform: translateX(-20%); /* βœ… Centers it perfectly */ width: 100vw; /* βœ… Spans full viewport width */ margin: 0 auto; padding: 50px 140px; box-sizing: border-box; display: flex; justify-content: space-between; align-items: center; gap: 80px; background-color: #1f3a52; border-radius: 10px; z-index: 2; bottom:-25px; } .subfooter-left { flex: 1 1 55%; min-width: 480px; align-items: flex-start; } .subfooter-right { flex: 0 0 auto; display: flex; flex-direction: row; align-items: center; justify-content: flex-end; gap: 90px; } .subscribe-container { width: 400px; text-align: right; align-self: center; } .subscribe-form { justify-content: flex-end; } .image-placeholder1 video { width: 340px !important; height: 340px !important; object-fit: cover; border-radius: 12%; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); z-index: 3; margin-right: -120px; /* βœ… reduced */ } .about-subtext, .serif-f { font-size: 2.6rem !important; line-height: 1.1; } .subf1-button { width: 200px !important; height: 50px; font-size: 1rem; } /*#region COMPLIANCE FOOTER (visible + responsive)*/ .compliance-footer { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; color: #fff; padding: 25px 0 30px; /* βœ… extra padding for spacing */ margin-top: 60px; /* βœ… pushes it below the subfooter */ width: 100%; background: linear-gradient(135deg, #1f3a52 0%, #203a43 50%, #70b80020 100%); border-top: 1px solid rgba(255,255,255,0.1); } .badge-line { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; font-size: 14px; color: #fff; opacity: 0.95; margin-bottom: 10px; } .badge-line span { display: flex; align-items: center; gap: 8px; white-space: nowrap; } .badge-line i { color: #70b800; font-size: 16px; } .compliance-note { font-size: 13px; line-height: 1.6; color: #dcdcdc; max-width: 75%; text-align: center; } /*#endregion COMPLIANCE*/ /*#endregion FOOTER*/ } /* Large Desktop / Wide Monitors / iMac */ @media (min-width: 1920px) and (max-width: 2559px){ /*#region CHAT*/ .chat-icon { right: 5px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); z-index: 600; position:fixed; } .close-btn { position: absolute; top: -10px; font-size: 1.8rem; cursor: pointer; } /*#endregion CHAT*/ /*#region BACKGROUND*/ .nav-links { gap: 60px; /* equal spacing between icons */ top: 10px; } .nav-links li a:hover span { pointer-events: auto; font-size: 16px; /* πŸ‘ˆ increase text size on hover */ } .image-overlay { top: 25%; left: 10%; text-align: left; } .h2-container { font-size: 50px !important; line-height: 1.2; width: 60%; margin-left: 25px; margin-top: 70px !important; } .b-container { font-size: 1.5rem !important; width: 70%; margin-left: 40px; } .h3-container { font-size: 1.5rem !important; margin-left: 40px; } .subscribe-btn { display: flex; justify-content: center; /* Center text horizontally */ align-items: center; /* Center text vertically */ padding: 12px 24px; /* Equal top/bottom & left/right padding */ border: none; cursor: pointer; width: 40%; /* Remove forced width so padding controls size */ top:20px; } .btn-text { font-size: 1rem !important; text-align: center; } .container-i { left: 60px !important; top: -170px; } .circle-container { width: 35px; height: 35px; margin-top: 250px !important; } .circle-text-container { width: 14%; margin-left: 305px !important; margin-top: 243px !important; font-size: 1.5rem; } .container-2 { left: 100px !important; top: -320px; } .circle-container-2 { width: 35px; height: 35px; top: 250px; } .circle-text-container-2 { width: 12%; margin-left: 270px !important; margin-top: 210px; font-size: 1.5rem; } .bottom-container { width: 75%; padding: 15px 25px; gap: 25px; } .counseling-section { max-width: 200px; } .image-slideshow { left: 500px !important; height: 90vh; } /*#endregion BACKGROUND*/ /*#region BRIEF*/ .brief { padding: 50px; } .brief-heading { font-size: 2.6rem; } .centered-content { margin-left: 20px; margin-top: -350px; max-width: 850px; } .centered-content p { font-size: 1.1rem; line-height: 1.6; } .video-container { width: 380px; height: 380px; left: -220px !important; } .circle-text-container-j, .circle-text-container-k { margin-left: 200px; width: 40%; font-size: 0.95rem; } .scroll-cue { bottom: 30px; } /*#endregion BRIEF*/ /*#region WHO WE ARE*/ .who-we-are-section { height: 880px; padding: 3rem; } .who-we-are-image { width: 650px; margin-top: 90px; margin-left: 55px; } .who-we-are-image video { height: 550px; } .circle-text-container-m, .circle-text-container-n, .circle-text-container-o { font-size: 1rem; width: 45%; } .who-we-are-content h2 { font-size: 46px; } .who-we-are-content>p { font-size: 1.15rem; } .card-box { width: 240px !important; height: 250px; } /*#endregion WHO WE ARE*/ /*#region RESULT SECTION*/ .result { height: 1100px; } .result-header h2 { font-size: 2.6rem; } .result-content h1 { font-size: 5.5rem; } .stat span { font-size: 3.2rem; } .new-content-container { height: 470px !important; } .quote-div { top: 500px; max-width: 380px; } .right { left: 905px !important; width: 850px !important; height: 466px !important; } /*#endregion RESULT SECTION*/ /*#region QUOTES*/ .fun.pinned { margin-top: 100px !important; } .fun-wrapper { margin-top: 400px !important; } /*#endregion QUOTES*/ /*#region CONSULT*/ /* Fix the entire consult section layout */ .consult { display: flex !important; justify-content: center !important; /* Centers the two main blocks */ align-items: center !important; /* Vertical alignment */ gap: 10px !important; /* Space between left and right */ padding: 0 8% !important; /* Equal left & right spacing */ width: 100% !important; /* <-- This was missing */ transform: translateX(-51%) !important; } /* Remove the force pushing content to the right */ .consult-container .image-box { margin-left: 0 !important; } /* Keep your box sizes as you set */ .consult-container { width: 650px; height: 560px; right:200px; } .consult-container .image-box { width: 320px; height: 430px; } .consult-container .text-box { width: 390px; height: 330px; } .serif { font-size: 72px; } .intro-text { font-size: 21px; max-width: 48%; } /*#endregion CONSULT*/ /*#region THERAPY*/ .cards-section { gap: 10px; height: auto; } .card { width: 300px; height: 400px !important; } .card-text h2 { font-size: 1.5rem; } .cards-section .header h2 { font-size: 2.2rem !important; } /*#endregion THERAPY*/ /*#region WHO WE ARE1*/ .who-we-are-section1 { height: 900px; } .image-card-container { width: 550px; } .who-we-are-content1 h2 { font-size: 36px; } .who-we-are-content1>p { font-size: 1.15rem; } .why-section-btn{ width:40%; } /*#endregion WHO WE ARE*/ /*#region CHOOSE*/ .why-section-left h1 { font-size: 3rem; } .info-block .heading1 { font-size: 72px; } /*#endregion CHOOSE*/ /*#region BLOG SECTION*/ .blog { padding: 5rem 8rem; left: 740px; } .blog .result-header h2 { font-size: 2.4rem; } .profile-cards { gap: 2.5rem; } .profile-image img { height: 240px; } /*#endregion BLOG*/ /*#region MEDITATION*/ .meditation-section { padding: 70px 80px; } .track { flex: 0 0 30%; max-width: 30%; } .track-image { height: 260px; } .meditation-heading { font-size: 2.4rem; } /*#endregion MEDITATION*/ /*#region FEATURES*/ #features { padding: 70px 120px; border-radius: 70px; } .features-heading { font-size: 2.2rem; } .result-header h2 { font-size: 2.6rem; } .result-header p { font-size: 1.3rem; } .features-box img { max-height: 460px; } .custom-carousel-control-prev { transform: translateX(70px); } .custom-carousel-control-next { transform: translateX(1390px); } /*#endregion FEATURES*/ /*#region SPOTLIGHT*/ .spotlight-wrapper { padding: 70px 160px; } .spotlight-text { max-width: 750px; } .spotlight-text h2 { font-size: 2.6rem; } .spotlight-text p { font-size: 1.3rem; line-height: 1.9; } .circle-placeholder { width: 240px; height: 240px; } .text-container { max-width: 500px; } /*#endregion SPOTLIGHT*/ /*#region ADVERT*/ #advert-section { min-height: 100vh !important; /* ensures at least one screen height */ height: auto; /* expands with content automatically */ padding: 50px; } .advert-container { height: auto; overflow: visible; } .advert-box { width: 700px; height: auto !important; min-height: 550px; } .advert-box img { width: 65%; height: 350px; } .text-right-side h2 { font-size: 2.2rem; } .text-right-side p { font-size: 1.3rem; } .text-right-side li{ font-size: 1.3rem !important; line-height: 1.8; margin-bottom: 12px; } .text-right-side .underline { width: 480px; } .ad-title { margin-top: -20px; } .advert-left { margin-top: -25px; transform: translate(25%); } .text-right-side{ margin-top: -38px; } /*#endregion ADVERT*/ /*#region RANGER*/ .ranger-content{ transform: translateY(50%) !important; } /*#endregion RANGER*/ /*#region OUR APP*/ #our-app-section { padding-top: 260px !important; /* Adjust the value as needed */ } /*#endregion OUR APP*/ /*#region FOOTER FIX*/ .custom_footer_top { position: relative; padding: 100px 120px 120px; /* extra bottom padding for compliance section */ box-sizing: border-box; min-height: auto; overflow: visible; } .subfooter { position: relative; left: 100%; transform: translateX(-20%); /* βœ… Centers it perfectly */ width: 100vw; /* βœ… Spans full viewport width */ margin: 0 auto; padding: 50px 140px; box-sizing: border-box; display: flex; justify-content: space-between; align-items: center; gap: 80px; background-color: #1f3a52; border-radius: 10px; z-index: 2; bottom:-25px; } .subfooter-left { flex: 1 1 55%; min-width: 480px; align-items: flex-start; } .subfooter-right { flex: 0 0 auto; display: flex; flex-direction: row; align-items: center; justify-content: flex-end; gap: 90px; } .subscribe-container { width: 400px; text-align: right; align-self: center; } .subscribe-form { justify-content: flex-end; } .image-placeholder1 video { width: 340px !important; height: 340px !important; object-fit: cover; border-radius: 12%; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); z-index: 3; margin-right: -120px; /* βœ… reduced */ } .about-subtext, .serif-f { font-size: 2.6rem !important; line-height: 1.1; } .subf1-button { width: 200px !important; height: 50px; font-size: 1rem; } /*#region COMPLIANCE FOOTER (visible + responsive)*/ .compliance-footer { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; color: #fff; padding: 25px 0 30px; /* βœ… extra padding for spacing */ margin-top: 60px; /* βœ… pushes it below the subfooter */ width: 100%; background: linear-gradient(135deg, #1f3a52 0%, #203a43 50%, #70b80020 100%); border-top: 1px solid rgba(255,255,255,0.1); } .badge-line { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; font-size: 14px; color: #fff; opacity: 0.95; margin-bottom: 10px; } .badge-line span { display: flex; align-items: center; gap: 8px; white-space: nowrap; } .badge-line i { color: #70b800; font-size: 16px; } .compliance-note { font-size: 13px; line-height: 1.6; color: #dcdcdc; max-width: 75%; text-align: center; } /*#endregion COMPLIANCE*/ /*#endregion FOOTER*/ } /* Large Laptops / Standard Desktops */ @media (min-width: 1440px) and (max-width: 1919px){ /*#region CHAT*/ .chat-icon { right: 5px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); z-index: 600; position:fixed; } /*#endregion CHAT*/ /*#region BACKGROUND*/ .section-image { position: relative; height: 100vh; width: 100vw; /* Visuals */ background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.25); background-size: cover; background-position: center; background-repeat: no-repeat; z-index: 2; /* Mask (initial hole) */ -webkit-mask-image: radial-gradient(circle at 77% 50%, transparent 5vw, black 8vw); mask-image: radial-gradient(circle at 77% 50%, transparent 5vw, black 8vw); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; /* Animation behavior */ transition: -webkit-mask-image 0.6s ease-in-out, mask-image 0.6s ease-in-out; will-change: mask-image; pointer-events: auto; /* Allow hover */ } /* Prevent children from blocking hover */ .section-image > * { pointer-events: auto; } /* Hover expansion */ .section-image:hover { -webkit-mask-image: radial-gradient(circle at 77% 50%, transparent 10vw, black 14vw); mask-image: radial-gradient(circle at 77% 50%, transparent 10vw, black 14vw); transform: translateZ(0); /* βœ… forces new layer re-render */ } .nav-links { gap: 55px; /* equal spacing between icons */ top: 10px; } .nav-links li a:hover span { pointer-events: auto; font-size: 16px; /* πŸ‘ˆ increase text size on hover */ } .image-overlay { top: 24%; left: 9%; } .h2-container { font-size: 63px !important; width: 65%; margin-left: 20px; margin-top: 60px !important; line-height: 63px; } .b-container { font-size: 1.6rem !important; width: 75%; margin-left: 30px; } .h3-container { font-size: 1.6rem !important; margin-left: 30px; } .subscribe-btn { margin-left: 30px; font-size: 1.1rem; font-weight: 600; height: 45px; width:30%; top:10px; z-index: 2500; } .container-i { left: 60px !important; top: -170px; } .circle-container { width: 35px; height: 35px; margin-top: 250px !important; } .circle-text-container { width: 14%; margin-left: 260px !important; margin-top: 243px !important; font-size: 1.5rem; } .container-2 { left: 100px !important; top: -320px; } .circle-container-2 { width: 35px; height: 35px; top: 250px; } .circle-text-container-2 { width: 12%; margin-left: 228px !important; margin-top: 210px; font-size: 1.5rem; } .bottom-container { width: 80%; padding: 12px 20px; gap: 20px; } .counseling-section { max-width: 180px; } .counseling-section p { font-size: 0.95rem; text-align: center; margin-left: 10px; } .image-slideshow { left: 470px !important; height: 85vh; } /*#endregion BACKGROUND*/ /*#region BRIEF*/ .brief { padding: 40px; } .brief-heading { font-size: 2rem; } .centered-content { margin-left: 35px; margin-top: -340px; max-width: 700px; } .centered-content p { font-size: 1.3rem; } .video-container { width: 460px; height: 460px; margin-top: 90px; margin-left: -110px !important; } .container-j { left: -130px; margin-top: -5px; } .container-k { left: -30px; margin-top: -30px; } .scroll-cue { bottom: 20px; } /*#endregion BRIEF*/ /*#region WHO WE ARE*/ .who-we-are-section { height: 820px; padding: 2.5rem; } .who-we-are-image { width: 580px; margin-top: 80px; margin-left: 45px; } .who-we-are-image video { height: 500px; } .circle-text-container-m, .circle-text-container-n, .circle-text-container-o { font-size: 0.95rem; width: 42%; } .container-m { left: 25px; top: -195px; } .container-n { left: -90px; top: -85px; } .container-o { left: 50px; top: 50px; } .who-we-are-content h2 { font-size: 40px; } .who-we-are-content>p { font-size: 1.05rem; } .card-box { width: 220px !important; height: 240px; } /*#endregion WHO WE ARE*/ /*#region RESULT*/ .result { height: 1050px; } .result-header h2 { font-size: 2.4rem; } .result-content h1 { font-size: 5rem; } .stat span { font-size: 3rem; } .left-new-section { margin-top: 220px !important; } .new-content-container { height: 450px !important; } .quote-div { top: 490px; max-width: 360px; } .right { left: 682px !important; width: 750px !important; height: 460px !important; top: 210px !important; } /*#endregion RESULT*/ /*#region QUOTES*/ .fun.pinned { margin-top: 130px !important; } .fun-wrapper { top: 170px !important; } /*#endregion QUOTES*/ /*#region CONSULT*/ #consult { height: 430px !important; } .consult-container { width: 600px; height: 540px; margin-top: 60px !important; } .consult-container .image-box { width: 300px; height: 400px; margin-left: 200px; } .consult-container .text-box { width: 370px; height: 310px; } .serif { font-size: 65px; } .intro-text { font-size: 20px; max-width: 46%; } .text-wrapper{ transform: translateX(2%); } .consult-container{ right:2%; } /*#endregion CONSULT*/ /*#region THERAPY*/ .cards-section { padding: 40px; } .card { width: 320px; height: 420px !important; } .card-text h2 { font-size: 1.6rem; } .cards-section .header h2 { font-size: 2.5rem !important; } /*#endregion THERAPHY*/ /*#region WHO WE ARE1*/ .who-we-are-section1 { height: 850px; } .image-card-container { width: 500px; } .who-we-are-content1 h2 { font-size: 32px; } .who-we-are-content1>p { font-size: 1.05rem; } /*#endregion WHO WE ARE*/ /*#region CHOOSE*/ .why-section-left h1 { font-size: 2.6rem; } .info-block .heading1 { font-size: 64px; } /*#endregion CHOOSE*/ /*#region BLOG*/ .blog { padding: 4.5rem 6rem; } .blog .result-header h2 { font-size: 2.2rem; } .profile-image img { height: 220px; } .profile-content h3 { font-size: 1.3rem; } .profile-content p { font-size: 0.95rem; } /*#endregion BLOG*/ /*#region MEDITATION*/ .meditation-section { padding: 60px 70px; } .track { flex: 0 0 31%; max-width: 31%; } .track-image { height: 240px; } .meditation-heading { font-size: 2.2rem; } .meditation-subtext { font-size: 1.05rem; } /*#endregion MEDITATION*/ /*#region FEATURES*/ #features { padding: 60px 100px; border-radius: 60px; } .features-heading { font-size: 2rem; } .result-header h2 { font-size: 2.4rem; } .result-header p { font-size: 1.1rem; } .features-box img { max-height: 400px; } .custom-carousel-control-prev { transform: translateX(60px); } .custom-carousel-control-next { transform: translateX(1200px); } .book-session, .more-resources { font-size: 0.9rem; padding: 12px 18px; } /*#endregion FEATURES*/ /*#region SPOTLIGHT*/ .spotlight-wrapper { padding: 60px 120px; } .spotlight-text { max-width: 700px; } .spotlight-text h2 { font-size: 2.4rem; } .spotlight-text p { font-size: 1.2rem; line-height: 1.8; } .circle-placeholder { width: 220px; height: 220px; } .text-container { max-width: 480px; } /*#endregion SPOTLIGHT*/ /*#region ADVERT*/ #advert-section { height: 800px; min-height: 1000px; padding: 50px; } .advert-box { width: 600px; height: 580px; } .advert-box img { width: 55%; height: 300px; } .text-right-side { margin-top: 20px; } .text-right-side h2 { font-size: 1.9rem; } .text-right-side li { font-size: 1.3rem !important; line-height: 1.8; margin-bottom: 12px; text-align: left; } .text-right-side p { text-align: left; font-size: 1.1rem !important; } .text-right-side{ margin-top:-20px; } .text-right-side .underline { width: 360px; } /*#endregion ADVERT*/ /*#region RANGER*/ .ranger-content { margin-top: 150px; } .ranger-wrapper { top: -5px !important; } /*#endregion RANGER*/ /*#region TEAM*/ .our-team-section { top: -9px !important; } /*#endregion TEAM*/ /*#region OUR APP*/ #our-app-section { padding-top: 270px !important; /* Adjust the value as needed */ } /*#endregion OUR APP*/ /*#region PARTNER*/ .pat-sec { top: -7px !important; } /*#endregion PARTNER*/ /*#region FOOTER FIX*/ .custom_footer_top { position: relative; padding: 100px 120px 120px; /* extra bottom padding for compliance section */ box-sizing: border-box; min-height: auto; overflow: visible; } .subfooter { position: relative; transform: translateX(-9%); /* βœ… Centers it perfectly */ width: 100vw; /* βœ… Spans full viewport width */ margin: 0 auto; padding: 50px 140px; box-sizing: border-box; display: flex; justify-content: space-between; align-items: center; gap: 80px; background-color: #1f3a52; border-radius: 10px; z-index: 2; } .subfooter-left { flex: 1 1 55%; min-width: 480px; align-items: flex-start; } .subfooter-right { flex: 0 0 auto; display: flex; flex-direction: row; align-items: center; justify-content: flex-end; gap: 90px; } .subscribe-container { width: 400px; text-align: right; align-self: center; } .subscribe-form { justify-content: flex-end; } .image-placeholder1 video { width: 340px !important; height: 340px !important; object-fit: cover; border-radius: 12%; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); z-index: 3; margin-right: -120px; /* βœ… reduced */ } .about-subtext, .serif-f { font-size: 2.6rem !important; line-height: 1.1; } .subf1-button { width: 200px !important; height: 50px; font-size: 1rem; } /*#region COMPLIANCE FOOTER (visible + responsive)*/ .compliance-footer { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; color: #fff; padding: 25px 0 30px; /* βœ… extra padding for spacing */ margin-top: 60px; /* βœ… pushes it below the subfooter */ width: 100%; background: linear-gradient(135deg, #1f3a52 0%, #203a43 50%, #70b80020 100%); border-top: 1px solid rgba(255,255,255,0.1); } .badge-line { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; font-size: 14px; color: #fff; opacity: 0.95; margin-bottom: 10px; } .badge-line span { display: flex; align-items: center; gap: 8px; white-space: nowrap; } .badge-line i { color: #70b800; font-size: 16px; } .compliance-note { font-size: 13px; line-height: 1.6; color: #dcdcdc; max-width: 75%; text-align: center; } /*#endregion COMPLIANCE*/ /*#endregion FOOTER*/ } /* Standard Laptops */ @media (min-width: 1281px) and (max-width: 1439px){ /*#region CHAT*/ .chat-icon { right: 5px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); z-index: 600; position:fixed; } .close-btn { position: absolute; top: -10px; font-size: 1.8rem; cursor: pointer; } /*#endregion CHAT*/ /*#region BACKGROUND*/ /* Base state */ .section-image { position: relative; height: 100vh; width: 100vw; /* Visuals */ background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.25); background-size: cover; background-position: center; background-repeat: no-repeat; z-index: 2; /* Mask (initial hole) */ -webkit-mask-image: radial-gradient(circle at 68% 50%, transparent 5vw, black 8vw); mask-image: radial-gradient(circle at 68% 50%, transparent 5vw, black 8vw); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; /* Animation behavior */ transition: -webkit-mask-image 0.6s ease-in-out, mask-image 0.6s ease-in-out; will-change: mask-image; pointer-events: auto; /* Allow hover */ } /* Prevent children from blocking hover */ .section-image > * { pointer-events: none; } /* Hover expansion */ .section-image:hover { -webkit-mask-image: radial-gradient(circle at 68% 50%, transparent 10vw, black 14vw); mask-image: radial-gradient(circle at 68% 50%, transparent 10vw, black 14vw); transform: translateZ(0); /* βœ… forces new layer re-render */ } .image-overlay { top: 22%; left: 8%; } .h2-container { text-align: left; line-height: 55px; font-weight: 600; font-size: 55px; padding: 10px; width: 60%; border-radius: 15px; margin-bottom: 10px; margin-left: 25px; transition: all 0.3s ease-in-out; margin-top: 120px; } .b-container { font-size: 1.3rem; width: 80%; margin-left: 40px; } .h3-container { text-align: left; font-size: 1.3rem; margin-bottom: 10px; margin-left: 40px; transition: all 0.3s ease-in-out; } .subscribe-btn { margin-left: 65px; width:30%; } .container-i { left: 45px; top: 85px; } .circle-container { width: 40px; height: 40px; top: 280px; } .circle-text-container { width: 12%; margin-left: 201px; margin-top: 245px; font-size: 0.85rem; } .container-2 { left: 105px; top: -150px; } .circle-container-2 { width: 40px; height: 40px; top: 280px; } .circle-text-container-2 { width: 10%; margin-left: 176px; margin-top: 245px; font-size: 0.85rem; } .bottom-container { width: 72%; padding: 15px 25px; gap: 30px; flex-wrap: wrap; } .counseling-section { max-width: 190px; } .image-slideshow { height: 90vh; left: 400px; } /*#endregion BACKGROUND*/ /*#region BRIEF*/ .brief { padding: 40px; } .brief-heading { font-size: 2rem; } .centered-content { margin-left: 35px; margin-top: -340px; max-width: 700px; } .centered-content p { font-size: 1.3rem; width: 70% } .video-container { width: 460px; height: 460px; top: 50px; left: -120px !important; } .container-j { left: -130px; margin-top: -5px; } .container-k { left: -30px; margin-top: -30px; } .scroll-cue { bottom: 20px; } /*#endregion BRIEF*/ /*#region WHO WE ARE*/ .who-we-are-section { height: 780px; padding: 2rem; } .who-we-are-image { width: 520px; margin-top: 70px; } .who-we-are-image video { height: 460px; } .container-m { left: 25px; top: -195px; } .container-n { left: -90px; top: -85px; } .container-o { left: 50px; top: 50px; } .who-we-are-content h2 { font-size: 36px; } .who-we-are-content>p { font-size: 1rem; } .card-box { width: 200px !important; height: 230px; } /*#endregion WHO WE ARE*/ /*#region RESULT SECTION*/ .result { height: 1050px; } .result-header h2 { font-size: 2.2rem; } .result-content h1 { font-size: 4.5rem; } .stat span { font-size: 2.7rem; } .left-new-section { margin-top: 205px !important; width: 51%; } .new-content-container { height: 452px !important; } .right { margin-right: -2px; } .quote-div { top: 470px; max-width: 340px; } /*#endregion RESULT*/ /*#region QUOTES*/ .fun.pinned { margin-top: 150px !important; } .fun-wrapper { top: 150px !important; } /*#endregion QUOTES*/ /*#region CONSULT*/ .consult-container { width: 560px; height: 500px; right:23px !important; } .consult-container .image-box { width: 280px; height: 370px; margin-left: 180px; } .consult-container .text-box { width: 340px; height: 300px; font-size: 14px; } .serif { font-size: 60px; } .intro-text { font-size: 19px; max-width: 44%; } .button-consult { width: 220px !important; } .text-wrapper{ transform: translateX(5%); } .consult{ transform: translateX(-51%); } /*#endregion CONSULT*/ /*#region THERAPY*/ .cards-section { gap: 15px; height: auto; } .card { width: 300px; height: 400px !important; } .card-text h2 { font-size: 1.5rem; } .cards-section .header h2 { font-size: 2.2rem !important; } /*#endregion THERAPY*/ /*#region WHO WE ARE1*/ .who-we-are-section1 { flex-direction: row; min-height: 100vh; /* ensures at least one screen height */ height: auto; margin-top: -0px; } .image-card-container { width: 450px; } .who-we-are-content1 h2 { font-size: 28px; } /*#endregion WHO WE ARE*/ /*#region CHOOSE*/ .why-section-left { max-width: 40%; } .why-section-left h1 { font-size: 2.4rem; } .info-block p { font-size: 0.95rem; } /*#endregion CHOOSE*/ /*#region FEATURES*/ #features { min-height: 100vh; /* ensures at least one screen height */ height: auto; /*#endreion FEATURES*/ } .features-heading { top: 10px !important; } /*#endregion FEATURES*/ /*#region RANGER*/ .ranger-content { margin-top: 170px; } .ranger-wrapper { top: -5px !important; } /*#endregion RANGER*/ /*#region BLOG*/ .blog { padding: 4rem 4rem; } .blog .result-header h2 { font-size: 2.1rem; } .profile-cards { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); } .profile-image img { height: 210px; } /*#endregion BLOG*/ /*#region PARTNER*/ .pat-sec { top: -7px !important; } /*#endregion PARTNER*/ /*#region TEAM*/ .our-team-section { top: -9px !important; } /*#endregion TEAM*/ /*#region MEDITATION*/ .track { flex: 0 0 32%; max-width: 32%; } .track-image { height: 220px; } .meditation-subtext { font-size: 1rem; } .med-prev-btn, .med-next-btn { font-size: 1.4rem; padding: 10px 14px; } /*#endregion MEDITATION*/ /*#region SPOTLIGHT*/ .spotlight-wrapper { padding: 50px 80px; } .split-container { height: 480px; } .spotlight-text { max-width: 650px; } .spotlight-text h2 { font-size: 2.2rem; } .spotlight-text p { font-size: 1.1rem; line-height: 1.7; } .circle-placeholder { width: 200px; height: 200px; } .text-container { max-width: 450px; margin-left: 250px; } .social-media-icons { gap: 15px; margin-left: 195px; } /*#endregion SPOTLIGHT*/ /*#region ADVERT*/ #advert-section { height: 800px; min-height: 1000px; padding: 50px; } .advert-box { width: 600px; height: 580px; } .advert-box img { width: 55%; height: 300px; } .text-right-side { margin-top: 20px; } .text-right-side h2 { font-size: 1.9rem; } .text-right-side li { font-size: 1.3rem !important; line-height: 1.8; margin-bottom: 12px; text-align: left; } .text-right-side p { text-align: left; font-size: 1.1rem !important; } .text-right-side{ margin-top:-20px; } .text-right-side .underline { width: 360px; } /*#endregion ADVERT*/ /*#region OUR APP*/ #our-app-section { padding-top: 280px !important; /* Adjust the value as needed */ } /*#endregion OUR APP*/ /*#region FOOTER FIX*/ .custom_footer_top { position: relative; padding: 100px 120px 120px; /* extra bottom padding for compliance section */ box-sizing: border-box; min-height: auto; overflow: visible; margin-top:-15px; } .custom_footer_top .row { gap: 44px; } .subfooter { position: relative; transform: translateX(-10%); /* βœ… Centers it perfectly */ width: 100vw; /* βœ… Spans full viewport width */ margin: 0 auto; padding: 50px 140px; box-sizing: border-box; display: flex; justify-content: space-between; align-items: center; gap: 80px; background-color: #1f3a52; border-radius: 10px; z-index: 2; } .subfooter-left { flex: 1 1 55%; min-width: 480px; align-items: flex-start; } .subfooter-right { flex: 0 0 auto; display: flex; flex-direction: row; align-items: center; justify-content: flex-end; right:30%; } .subscribe-container { width: 400px; text-align: right; align-self: center; } .subscribe-form { justify-content: flex-end; } .image-placeholder1 video { width: 340px !important; height: 340px !important; object-fit: cover; border-radius: 12%; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); z-index: 3; margin-right: -120px; /* βœ… reduced */ } .about-subtext, .serif-f { font-size: 2.6rem !important; line-height: 1.1; } .subf1-button { width: 200px !important; height: 50px; font-size: 1rem; } .compliance-footer { padding: 0px 0 5px; } /*#region COMPLIANCE FOOTER (visible + responsive)*/ .compliance-footer { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; color: #fff; padding: 25px 0 30px; /* βœ… extra padding for spacing */ margin-top: 60px; /* βœ… pushes it below the subfooter */ width: 100%; background: linear-gradient(135deg, #1f3a52 0%, #203a43 50%, #70b80020 100%); border-top: 1px solid rgba(255,255,255,0.1); } .badge-line { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; font-size: 14px; color: #fff; opacity: 0.95; margin-bottom: 10px; } .badge-line span { display: flex; align-items: center; gap: 8px; white-space: nowrap; } .badge-line i { color: #70b800; font-size: 16px; } .compliance-note { font-size: 13px; line-height: 1.6; color: #dcdcdc; max-width: 75%; text-align: center; } /*#endregion COMPLIANCE*/ /*#endregion FOOTER*/ } /* === MY LAPTOP Medium Laptops / Tablets Landscape (1281px – 1439px) === */ @media (max-width: 1280px) { /*#region BACKGROUND*/ .section-image { height: 100vh; } .image-overlay { top: 22%; left: 8%; } .h2-container { text-align: left; line-height: 55px; font-weight: 600; font-size: 50px; padding: 10px; width: 60%; border-radius: 15px; margin-bottom: 10px; margin-left: 25px; transition: all 0.3s ease-in-out; margin-top: 20px; } .b-container { font-size: 0.9rem; width: 80%; margin-left: 40px; } .h3-container { text-align: left; margin-bottom: 10px; margin-left: 40px; transition: all 0.3s ease-in-out; } .subscribe-btn { margin-left: 65px; } .container-i { left: 45px; top: -95px; } .circle-container { width: 40px; height: 40px; top: 280px; } .circle-text-container { width: 12%; margin-left: 201px; margin-top: 245px; font-size: 0.85rem; } .container-2 { left: 105px; top: -310px; } .circle-container-2 { width: 40px; height: 40px; top: 280px; } .circle-text-container-2 { width: 10%; margin-left: 176px; margin-top: 245px; font-size: 0.85rem; } .bottom-container { width: 72%; padding: 15px 25px; gap: 30px; flex-wrap: wrap; } .counseling-section { max-width: 190px; } .image-slideshow { height: 90vh; left: 400px; } /*#endregion BACKGROUND*/ /*#region BRIEF*/ .brief { padding: 35px; } .brief-heading { font-size: 1.8rem; } .centered-content { margin-top: -354px; } /*#endregion BRIEF*/ /*#region WHO WE ARE*/ /*#endregion WHO WE ARE*/ /*#region RESULT*/ /*#endregion RESULT*/ /*#region FEATURES*/ #features { padding: 50px 80px; } .features-heading { font-size: 1.8rem; } .result-header h2 { font-size: 2.2rem; } .features-box img { max-height: 360px; } .custom-carousel-control-prev { transform: translateX(50px); } .custom-carousel-control-next { transform: translateX(1000px); } /*#endregion FEATURES*/ } /* Small Laptops */ @media (min-width: 1024px) and (max-width: 1279px){ /*#region CHAT*/ .chat-icon { right: 5px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); z-index: 600; position:fixed; } .close-btn { position: absolute; top: -10px; font-size: 1.8rem; cursor: pointer; } /*#endregion CHAT*/ /*#region BACKGROUND*/ .section-image { position: relative; background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.25); background-size: cover; background-position: center; background-repeat: no-repeat; width: 100vw; height: 100vh; overflow: hidden; z-index: 2; /* πŸ’‘ The magic mask (square hole on the right side) */ -webkit-mask-image: radial-gradient(circle at 70% 50%, transparent 40px, black 120px); mask-image: radial-gradient(circle at 70% 50%, transparent 40px, black 120px); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } .section-image { transition: -webkit-mask-image 0.6s ease-in-out, mask-image 0.6s ease-in-out; } .section-image:hover { -webkit-mask-image: radial-gradient(circle at 70% 45%, transparent 180px, black 260px); mask-image: radial-gradient(circle at 70% 45%, transparent 180px, black 260px); } .nav-links { gap: 35px; /* equal spacing between icons */ top: 10px; } .nav-links li a:hover span { pointer-events: auto; font-size: 16px; /* πŸ‘ˆ increase text size on hover */ } .logo-container { display: flex; align-items: center; margin-right: 50px; margin-left: 110px; /* Add some margin to separate the logo from the nav */ flex-shrink: 0; /* Prevent it from shrinking on small screens */ } .nav-links li a { font-size: 12px; } .logo-video { width: 180px; height: 10%; border-radius: 10%; object-fit: contain; margin-left: -110px; } .image-overlay { top: 22%; left: 8%; } .h2-container { text-align: left; line-height: 55px; font-weight: 600; font-size: 40px; padding: 10px; width: 60%; border-radius: 15px; margin-bottom: 10px; margin-left: 15px; transition: all 0.3s ease-in-out; margin-top: 120px !important; } .b-container { font-size: 22px !important; width: 63% !important; margin-left: 30px; } .h3-container { font-size: 22px !important; width: 65%; text-align: left; margin-bottom: 10px; margin-left: 30px; transition: all 0.3s ease-in-out; } .subscribe-btn { margin-left: 65px; width:30%; } .container-i { left: -40px; top: 25px; } .circle-container { width: 40px; height: 40px; top: 280px; } .circle-text-container { width: 12%; margin-left: 180px; margin-top: 245px; font-size: 0.85rem; } .container-2 { left: -20px; top: -210px; } .circle-container-2 { width: 40px; height: 40px; top: 280px; } .circle-text-container-2 { width: 10%; margin-left: 156px; margin-top: 245px; font-size: 0.85rem; } .bottom-container { width: 72%; padding: 15px 25px; gap: 30px; flex-wrap: wrap; } .counseling-section { max-width: 190px; } .image-slideshow { height: 90vh; left: 300px; } /*#endregion BACKGROUND*/ /*#region BRIEF*/ .brief { padding: 35px; } .brief.pinned { position: fixed; top: 40px; height: 90vh; } .brief-heading { font-size: 1.8rem; } .centered-content { margin-top: -294px; } .centered-content p { font-size: 1.2rem; line-height: 1.5; } .video-container { margin-top: 80px; } /*#endregion BRIEF*/ /*#region WHO WE ARE*/ .who-we-are-section { flex-direction: column; align-items: center; height: auto; margin-top: 150px; } .who-we-are-image { width: 480px; margin: 0 auto; } .who-we-are-image video { height: 420px; } .who-we-are-content { width: 90%; margin: 2rem auto 0; margin-left: -50px; } .who-we-are-content h2 { font-size: 32px; text-align: center; margin-left: 0; } .who-we-are-content>p { font-size: 1.3rem; text-align: center; margin-left: -30px !important; } .card-container { flex-wrap: wrap; justify-content: center; } .card-box { width: 45% !important; height: auto; } .read-more-container { transform: translate(-60px); } /*Circle Container-who-n*/ .container-n { position: absolute; display: flex; flex-direction: column; align-items: center; left: -85px; top: -45px; animation: heartbeat 3.3s infinite; z-index: 1; } .container-m { position: absolute; display: flex; flex-direction: column; align-items: center; left: -36px; top: -145px; animation: heartbeat 3.3s infinite; z-index: 1; } .container-o { position: absolute; display: flex; flex-direction: column; align-items: center; left: -150px; top: -200px; animation: heartbeat 3.3s infinite; z-index: 1; } /*#endregion WHO WE ARE*/ /*#region RESULT*/ .result { height: 1050px; } .top-left { margin-top: -30px !important; margin-bottom: 10px; } .result-header h2 { font-size: 2rem; } .result-content h1 { font-size: 4rem; } .stat span { font-size: 2.5rem; } .left-new-section { margin-top: 180px !important; width: 50%; } .new-content-container { height: 400px !important; width: 98% !important; font-size: 0.95rem; } .quote-div { top: 450px; max-width: 300px; height: 450px !important; } #personal_quote { font-size: 0.95rem; } .right { height: 400px !important; width: 50% !important; margin-top: 20px; } .image-div img { height: 343px !important; width: 400px !important; } .top { z-index: 100px; } /*#endregion RESULT*/ /*#region QUOTES*/ .fun.pinned { margin-top: 150px !important; } .fun-wrapper { top: 150px !important; } .gallery-image { margin-right: -60px; } /*#endregion QUOTES*/ /*#region CONSULT*/ .consult { height: 80px !important; } .consult-container { position: relative; margin: 0 auto; width: 450px; height: 500px; top: -520px; margin-right: -27px; } .text-side { margin-left: 13px !important; } .consult-container .image-box { margin: 0 auto; width: 260px; height: 340px; } .consult-container .text-box { margin: 20px auto; width: 320px; height: 300px; font-size: 12px; top: -185px; margin-left: 30px; } .button-consult { width: 220px !important; } .text-wrapper p { width: 390px; } .text-wrapper{ margin-left: -10px !important; } .serif { font-size: 55px; margin-left: 20px; } .intro-text { font-size: 18px; max-width: 100%; margin: 20px; } .keyword-grid { gap: 30px; margin: 0 20px; } /*#endregion CONSULT*/ /*#region THERAPY*/ .cards-section { flex-wrap: wrap; justify-content: center; height: auto; gap: 40px; /* βœ… Adds vertical space between rows */ padding: 60px 40px; /* More breathing room */ } .card { width: 45%; height: 500px !important; } .cards-section .header h2 { font-size: 2rem !important; } .card-image { display: flex; justify-content: center; align-items: center; height: 100%; overflow: hidden; } .card-image img { width: 100%; height: auto; /* βœ… preserves image aspect ratio */ max-height: 100%; object-fit: contain; /* βœ… keeps full image visible */ object-position: top center; /* βœ… ensures hair/top remains visible */ margin-top: 0; /* βœ… remove clipping offset */ } /*#endregion THERAPY*/ /*#region WHO WE ARE1*/ .who-we-are-section1 { flex-direction: row; height: auto; margin-top: -0px; } .image-card-container { width: 400px; margin-top: 60px; gap: 10px; } .who-we-are-content1 { margin-top: 40px; } .who-we-are-content1 h2 { font-size: 26px; } .image-card-info{ width:85%; } /*#endregion WHO WE ARE*/ /*#region CHOOSE*/ .why-section-container { gap: 15px; padding: 30px; } .why-section-left { max-width: 42%; } .info-block p { max-width: 280px; } /*#endregion CHOOSE*/ /*#region BLOG*/ .blog { padding: 3rem 3rem; } .blog .result-header h2 { font-size: 2rem; } .profile-cards { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; } .profile-image img { height: 200px; } .profile-content p { font-size: 0.9rem; } /*#endregion BLOG*/ /*#region MEDITATION*/ .track-slide { gap: 1rem; } .track { flex: 0 0 32%; max-width: 32%; } .track-image { height: 200px; } .meditation-subtext { font-size: 0.95rem; } /* βœ… Adjust navigation button positioning */ .med-prev-btn, .med-next-btn { font-size: 1.2rem; padding: 10px 14px; top: 50%; transform: translateY(-50%); } .med-prev-btn { left: -25px; /* move slightly inside view */ right: auto; /* remove conflict */ } .med-next-btn { right: -25px; /* move slightly inside view */ left: auto; /* remove conflict */ } /* βœ… Optional tweak: prevent overlap with tracks */ .med-carousel-wrapper { width: 92%; } /*#endregion MEDITATION*/ /*#region FEATURES*/ #features { padding: 50px 80px; border-radius: 55px; } .features-heading { font-size: 1.8rem; } .result-header h2 { font-size: 2.2rem; } .features-box img { max-height: 360px; } .custom-carousel-control-prev { transform: translateX(50px); } .custom-carousel-control-next { transform: translateX(860px); } /*#endregion FEATURES*/ /*#region SPOTLIGHT*/ .spotlight-wrapper { padding: 40px 60px; } .spotlight-text { max-width: 600px; } .spotlight-text h2 { font-size: 2rem; } .spotlight-text p { font-size: 1rem; line-height: 1.7; } .circle-placeholder { width: 180px; height: 180px; } .text-container { margin-left: 160px; max-width: 600px; } .split-container { width: 90% !important; height: 480px; } .social-media-icons { gap: 15px; margin-left: 195px; } /*#endregion SPOTLIGHT*/ /*#region ADVERT*/ #advert-section { min-height: 100vh; /* ensures at least one screen height */ height: auto; padding: 50px 40px; } .advert-layout { flex-direction: row; gap: 25px; align-items: flex-start; } .advert-left { flex: 0 0 55%; } .advert-container { height: auto !important; /* βœ… Let it grow with its content */ min-height: 580px; overflow: visible !important; /* βœ… Allow inner box & rating to show */ } .advert-box { width: 500px; height: auto !important; /* βœ… Auto adjust height */ min-height: 500px; /* βœ… Maintain base visual size */ padding-bottom: 20px; } .advert-box img { width: 65%; height: 250px; object-fit: contain; } .text-right-side { margin-top: -30px; } .text-right-side h2 { font-size: 1.7rem; } .text-right-side p { font-size: 1.1rem; line-height: 1.6; text-align: left; width:100%; } .text-right-side li { font-size: 1.1rem !important; line-height: 1.5; margin-bottom: 12px; text-align: left; } .text-right-side .underline { width: 320px; } .rating-stars { font-size: 1.4rem; margin-top: 10px; text-align: center; display: block; } /*#endregion ADVERT*/ /*#region RANGER*/ .ranger-content { margin-top: 130px; width: 70vw; } .ranger-wrapper{ margin-top: -10px; } /*#endregion RANGER*/ /*#region PARTNER*/ .pat-sec { top: -15px !important; } /*#endregion PARTNER*/ /*#region OUR TEAM*/ .our-team-section{ margin-top: -19px; } /*#endregion OURTEAM*/ /*#region OUR APP*/ #our-app-section { padding-top: 260px !important; /* Adjust the value as needed */ } /*#endregion OUR APP*/ /*#region FOOTER*/ /*#region FOOTER FIX*/ .custom_footer_top { position: relative; padding: 100px 120px 60px; padding-bottom: 400px; /* Reserve space for the absolute subfooter */ box-sizing: border-box; overflow: visible; margin-top:-15px; } .custom_footer_top .row { gap: 44px; } /* βœ… Use RELATIVE, not ABSOLUTE */ .subfooter { position: absolute; bottom: 100px; /* attach to bottom of this section */ left: 0; right: 0; width: 100%; background-color: #1f3a52; padding: 50px 170px; display: flex; justify-content: space-between; align-items: center; gap: 70px; border-radius: 10px; z-index: 2; } /* βœ… Inner structure */ .subfooter-left { flex: 1 1 55%; min-width: 420px; align-items: flex-start; margin-left:-120px; } .subfooter-right { flex: 0 0 auto; display: flex; flex-direction: row; align-items: center; margin-left:-72px; gap:65px; } .subscribe-container { width: 340px; text-align: right; margin-right: -70px !important; } .subscribe-form { justify-content: flex-end; } .image-placeholder1 { flex-shrink: 0; display: block; } .image-placeholder1 video { width: 260px !important; height: 260px !important; object-fit: cover; border-radius: 12%; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); margin-right: -90px !important; } /* βœ… Typography */ .about-subtext, .serif-f { font-size: 2.2rem !important; line-height: 1.15; } .subf1-button { width: 140px !important; height: 48px; font-size: 0.85rem; } /*#region COMPLIANCE FOOTER (Now visible + attached below)*/ .compliance-footer { display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; color: #fff; padding: 25px 0 5px; width: 100%; background: linear-gradient(135deg, #1f3a52 0%, #203a43 50%, #70b80020 100%); border-top: 1px solid rgba(255,255,255,0.1); } .badge-line { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; font-size: 14px; color: #fff; opacity: 0.95; margin-bottom: 10px; } .badge-line span { display: flex; align-items: center; gap: 8px; white-space: nowrap; } .badge-line i { color: #70b800; font-size: 16px; } .compliance-note { font-size: 13px; line-height: 1.6; color: #dcdcdc; max-width: 75%; text-align: center; } /*#endregion COMPLIANCE*/ /*#endregion FOOTER FIX*/ /*#endregion FOOTER*/ } /******GOOGLE STANDARD MEDIA QUERY RANGES******/ /* βœ… Small / short phones or landscape */ /*#region--------------------------------------------------------------MOBILE MEDIA QUERIES-------------------------------------------------*/ /* ========== MOBILE WIDTH RANGE ========== */ @media (max-width: 359px) { } /* XS phones */ @media (min-width: 360px) and (max-width: 389px) { /*#region INTRO PANEL LOGIC*/ .panel { pointer-events: auto !important; position: relative !important; z-index: 20 !important; } .intro-logo { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); width: 150px; z-index: 2; pointer-events: none; } /* Main cover container */ .intro-cover { position: fixed !important; inset: 0 !important; display: flex !important; flex-direction: row !important; overflow-x: auto !important; /* βœ… allow horizontal swipe */ overflow-y: hidden !important; /* βœ… disable vertical scroll */ scroll-snap-type: x mandatory !important; -webkit-overflow-scrolling: touch; width: 100vw !important; height: 100vh !important; scroll-behavior: smooth; background: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%); z-index: 9999 !important; touch-action: pan-x !important; /* βœ… allow finger swipes horizontally */ } /* Ensure this does NOT override the scrollability */ .intro-cover::-webkit-scrollbar { display: none; } .intro-cover { -ms-overflow-style: none; scrollbar-width: none; } /* Panels inside cover */ .intro-cover .panel { flex: 0 0 100vw !important; /* βœ… make sure each takes full viewport width */ width: 100vw !important; height: 100%; scroll-snap-align: start; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 1rem; box-sizing: border-box; z-index: 10 !important; position: relative !important; } .intro-cover .panel img { width: 80%; height: auto; max-height: 250px; object-fit: cover; border-radius: 12px; margin-bottom: 12px; } .intro-cover .panel h1 { font-size: 1.3rem; margin: 0.5rem 0; } .intro-cover .panel p { font-size: 0.9rem; line-height: 1.3; margin-bottom: 0.4rem; } .start-btn { position: relative !important; z-index: 999999 !important; margin-top: 60px; } /* Slide hint (arrow + text) */ /* Common base style for hints */ .slide-hint { display: flex !important; align-items: center; justify-content: center; margin-top: 18px; font-size: 0.9rem; color: #ffffff; opacity: 0.8; gap: 0.3rem; animation: fadeIn 1s ease-in 0.5s forwards; user-select: none; } /* Right swipe hint (default) */ .right-hint .arrow { animation: slideArrowRight 1.2s infinite ease-in-out !important; } /* Left swipe hint (mirrored animation) */ /* Left arrow: same ➜, but visually mirrored */ .left-hint .arrow { display: inline-block !important; transform: scaleX(-1) !important; animation: slideLeft 1.2s infinite ease-in-out !important; } /* Animate arrow β†’ direction */ @keyframes slideArrowRight { 0% { transform: translateX(0); opacity: 0.8; } 50% { transform: translateX(8px); opacity: 1; } 100% { transform: translateX(0); opacity: 0.8; } } /* Animate arrow ← direction */ @keyframes slideArrowLeft { 0% { transform: translateX(0); opacity: 0.8; } 50% { transform: translateX(-8px); opacity: 1; } 100% { transform: translateX(0); opacity: 0.8; } } /* Optional: subtle position tweak for clarity */ .left-hint { margin-top: 20px; } .introhidden { transform: translateY(-100%); opacity: 0; transition: all 0.6s ease-in-out; } .slide-left { transform: translateX(-100%); transition: transform 0.5s ease; } .slide-right { transform: translateX(100%); transition: transform 0.5s ease; } #introCover { display: none !important; } body[data-intro="show"] #introCover { display: flex !important; } /*#endregion INTRO PANEL LOGIC*/ /*#region CHAT*/ /* πŸ”Ή Chat Icon */ .chat-icon { width: 52px; height: 52px; bottom: 20px; right: 8px; top: 520px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); z-index: 1000; position:fixed; } /* πŸ”Ή Chat & Message Containers */ .chat-container, .message-container, #message-chat-container { width: 90vw; /* Full width for mobile */ height: 70vh; /* Increased height to make content visible */ bottom: 60px; right: 5vw; border-radius: 10px; transition: all 0.3s ease; } /* πŸ”Ή Header */ .message-header h2 { font-size: 16px; margin: 0; padding: 10px 0; } /* πŸ”Ή Message Body */ .message-body { padding: 10px; text-align: center; overflow-y: auto; /* scroll if needed */ } .message-body-svg { width: 40px; height: 40px; margin-top: 20px; margin-bottom: 10px; } .message-body h2 { font-size: 15px; margin-top: 10px; } .message-body span { font-size: 13px; color: #555; display: block; margin-top: 6px; } /* πŸ”Ή Send Message Button */ .send-message-btn { font-size: 13px; padding: 6px 12px; border-radius: 16px; margin-top: 20px; } /* πŸ”Ή Footer Tabs */ .chat-footer-tabs, .chat-footer-tabs-message { flex-direction: row; justify-content: space-around; align-items: center; padding: 6px 0; position: absolute; bottom: 0; left: 0; width: 100%; border-top: 1px solid #ccc; background-color: #fff; z-index: 10; } .chat-input-area { margin-top: 80px; } .chat-greeting { margin-top: 90px !important; } .tab-button, .tab-button-message { background: none; border: none; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #444; cursor: pointer; } .tab-button svg, .tab-button-message svg { width: 20px; height: 20px; } .tab-button span, .tab-button-message span { font-size: 12px; } .tab-button-message.active svg path { fill: #1f3a52; } /* πŸ”Ή Message Chat Layout */ .message-chat-header { height: 50px; padding: 8px; } .logo-video-chat { margin-top: 5px !important; } .logo-video-message { align-self: flex-start; transform: translateY(-193px); width: 170px !important; margin-right: -90px; } .logo-video-chat { align-self: flex-start; transform: translateY(-185px); width: 160px; } .close-btn { position: absolute; top: -187px; font-size: 1.8rem; background: none; border: none; color: black; cursor: pointer; z-index: 1010; transform: translate(95px); } .message-chat-body { padding: 12px; max-height: calc(100% - 110px); } .chat-bubble { font-size: 13px; padding: 8px 12px; max-width: 85%; } .message-chat-input { padding: 8px; } .input-wrapper { min-height: 42px; } .input-container { padding: 6px; } .message-chat-input-field { font-size: 13px; } .send-button-input { width: 28px; height: 28px; } /*#endregion CHAT*/ /*#region INTRO PANEL LOGIC*/ .panel { pointer-events: auto !important; position: relative !important; z-index: 20 !important; } .intro-logo { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); width: 150px; z-index: 2; pointer-events: none; } /* Main cover container */ .intro-cover { position: fixed !important; inset: 0 !important; display: flex !important; flex-direction: row !important; overflow-x: auto !important; /* βœ… allow horizontal swipe */ overflow-y: hidden !important; /* βœ… disable vertical scroll */ scroll-snap-type: x mandatory !important; -webkit-overflow-scrolling: touch; width: 100vw !important; height: 100vh !important; scroll-behavior: smooth; background: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%); z-index: 9999 !important; touch-action: pan-x !important; /* βœ… allow finger swipes horizontally */ } /* Ensure this does NOT override the scrollability */ .intro-cover::-webkit-scrollbar { display: none; } .intro-cover { -ms-overflow-style: none; scrollbar-width: none; } /* Panels inside cover */ .intro-cover .panel { flex: 0 0 100vw !important; /* βœ… make sure each takes full viewport width */ width: 100vw !important; height: 100%; scroll-snap-align: start; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 1rem; box-sizing: border-box; z-index: 10 !important; position: relative !important; } .intro-cover .panel img { width: 80%; height: auto; max-height: 250px; object-fit: cover; border-radius: 12px; margin-bottom: 12px; } .intro-cover .panel h1 { font-size: 1.3rem; margin: 0.5rem 0; } .intro-cover .panel p { font-size: 0.9rem; line-height: 1.3; margin-bottom: 0.4rem; } .start-btn { position: relative !important; z-index: 999999 !important; margin-top: 60px; } /* Slide hint (arrow + text) */ /* Common base style for hints */ .slide-hint { display: flex !important; align-items: center; justify-content: center; margin-top: 18px; font-size: 0.9rem; color: #ffffff; opacity: 0.8; gap: 0.3rem; animation: fadeIn 1s ease-in 0.5s forwards; user-select: none; } /* Right swipe hint (default) */ .right-hint .arrow { animation: slideArrowRight 1.2s infinite ease-in-out !important; } /* Left swipe hint (mirrored animation) */ /* Left arrow: same ➜, but visually mirrored */ .left-hint .arrow { display: inline-block !important; transform: scaleX(-1) !important; animation: slideLeft 1.2s infinite ease-in-out !important; } /* Animate arrow β†’ direction */ @keyframes slideArrowRight { 0% { transform: translateX(0); opacity: 0.8; } 50% { transform: translateX(8px); opacity: 1; } 100% { transform: translateX(0); opacity: 0.8; } } /* Animate arrow ← direction */ @keyframes slideArrowLeft { 0% { transform: translateX(0); opacity: 0.8; } 50% { transform: translateX(-8px); opacity: 1; } 100% { transform: translateX(0); opacity: 0.8; } } /* Optional: subtle position tweak for clarity */ .left-hint { margin-top: 20px; } .introhidden { transform: translateY(-100%); opacity: 0; transition: all 0.6s ease-in-out; } .slide-left { transform: translateX(-100%); transition: transform 0.5s ease; } .slide-right { transform: translateX(100%); transition: transform 0.5s ease; } #introCover { display: none !important; } body[data-intro="show"] #introCover { display: flex !important; } /*#endregion INTRO PANEL LOGIC*/ /*#region BACKGROUND*/ .ad-container { transform: translateY(-50%) !important; width: 120px !important; height: 125px !important; min-width: 130px !important; min-height: 130px !important; } .ad-content h3 { font-size: 0.675rem !important; } .ad-content p { font-size: 0.675rem !important; } .section-image { position: relative; background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.25); background-size: cover; background-position: center; background-repeat: no-repeat; width: 100vw; min-height: 100vh; margin-top: -138px; pointer-events: auto; /* ensure it's active */ height: auto; overflow: hidden; z-index: 200; /* πŸ’‘ The magic mask (square hole on the right side) */ -webkit-mask-image: radial-gradient(circle at 50% 25%, transparent 60px, black 90px); mask-image: radial-gradient(circle at 50% 25%, transparent 60px, black 90px); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } .section-image { transition: -webkit-mask-image 0.6s ease-in-out, mask-image 0.6s ease-in-out; } .section-image:hover { -webkit-mask-image: radial-gradient(circle at 50% 25%, transparent 100px, black 130px); mask-image: radial-gradient(circle at 50% 25%, transparent 100px, black 130px); } header { position: fixed !important; /* keep page content from shifting */ top: 0; left: 0; width: 100%; z-index: 1000; box-sizing: border-box; padding-top: 8px; /* small top gap */ padding-bottom: 78px; /* reserve space inside fixed header for logo */ background-color: var(--background-color); } /* Nav: center in header (stay in normal flow so hitboxes match visuals) */ nav { display: flex !important; justify-content: center !important; align-items: center !important; width: 100%; z-index: 1100; pointer-events: auto; } /* Nav links container */ .nav-links { display: flex !important; gap: 0px !important; /* adjust spacing between icons */ margin: 0; padding: 0; list-style: none; justify-content: center; align-items: center; } /* Restore base link layout but make touch-target comfortable */ .nav-links li a { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 6px 6px !important; min-width: 44px !important; /* good mobile tap size */ height: 55px; font-size: 11px; color: var(--text-muted); position: relative; /* keep absolute span relative to this */ margin: 0 !important; /* override negative margin hacks */ } /* Icon size */ .nav-links li a i { font-size: 18px; margin-bottom: 6px; } /* --- IMPORTANT: keep labels hidden until hover (restore base behaviour) --- */ .nav-links li a span { opacity: 0 !important; transform: translateY(8px) !important; transition: all 0.25s cubic-bezier(0.22, 0.61, 0.36, 1) !important; pointer-events: none !important; position: absolute !important; top: 32px !important; white-space: nowrap !important; } /* Label becomes visible on hover (same as your base CSS) */ .nav-links li a:hover span { opacity: 1 !important; transform: translateY(0) !important; pointer-events: auto !important; } /* Center logo under nav β€” absolutely positioned inside the fixed header */ /* Center logo under nav β€” perfectly aligned */ .logo-container { position: absolute !important; /* keep same vertical placement */ left: 50% !important; /* fine-tune centering (was -50%) */ margin: 0 !important; z-index: 500 !important; text-align: center; } .logo-video { width: 180px !important; margin-top: -18px !important; height: auto !important; object-fit: contain !important; } /* Language selector centered above the nav/logo */ .language-container { position: absolute !important; /* sits near top of header */ left: 50% !important; z-index: 1200 !important; /* above nav */ margin: 0 !important; width: auto !important; } .language-select { margin-top: -15px !important; padding: 6px 10px !important; font-size: 10px !important; white-space: nowrap; border-radius: 12px; } /* dropdown menu for services: ensure it doesn't go off-screen */ /* Dropdown menu for mobile */ .dropdown-service-menu { left: 50% !important; transform: translateX(-50%) !important; top: calc(100% + 6px) !important; z-index: 2000 !important; background-color: white !important; /* white background */ border-radius: 12px !important; /* rounded corners */ width: 100px !important; /* almost full width on mobile */ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important; /* subtle shadow */ padding: 8px 0 !important; /* vertical padding */ } /* Dropdown links styling */ .dropdown-service-menu li a { color: #0a4da2 !important; /* readable blue text */ font-size: 14px !important; /* readable font size */ padding: 10px 20px !important; /* tappable area */ display: block; text-decoration: none; transition: background 0.3s ease; } /* Hover effect for dropdown items */ .dropdown-service-menu li a:hover { background-color: #f0f8ff !important; /* subtle highlight */ color: #0a4da2 !important; } /* Defensive override: remove other negative-margin / shift hacks */ .nav-links li a, .language-container { margin-left: 0 !important; margin-top: 0 !important; } .image-overlay { top: 18%; left: 5%; text-align: center; } .h2-container.background-language-content.active { font-size: clamp(10px, 6vw, 26px); /* responsive font size */ line-height: 1.3; /* spacing between lines */ max-width: 95%; /* avoid overflow */ margin: 14px auto 0 auto; /* horizontal centering */ text-align: center; /* center text */ word-break: normal; /* prevent breaking words */ white-space: normal; /* normal wrapping */ transform: translateX(-9%) !important; margin-top: 240px !important; } .b-container { font-size: clamp(10px, 4vw, 20px); width: 80% !important; transform: translateX(-7%) !important; text-align: center !important; /* center text */ word-break: normal !important; /* prevent breaking words */ white-space: normal !important; margin-top: -5px; } .h3-container { font-size: clamp(10px, 5vw, 16px) !important; transform: translate(28%); text-align: left; width: 40% !important; margin-top: 22px !important; } .subscribe-btn { display: flex; justify-content: center; /* horizontal centering */ align-items: center; /* vertical centering */ padding: 0.8rem 2rem; /* controls button size */ width: 100px; margin-left: 225px !important; margin-top: -60px !important; } .subscribe-btn .btn-text { line-height: 1; /* ensures no vertical spacing issues */ font-size: 0.7rem !important; } .container-i { margin-left: 85px !important; top: -410px !important; display: none; } .circle-container-2 { position: relative; width: 40px; height: 40px; top: 335px; left: -56px; } .container-2 { margin-left: 90px !important; margin-top: -20px !important; } .circle-text-container-2 { width: 24%; margin-left: 6px; margin-top: 300px; font-size: 0.85rem; } /* bottom container: absolute at hero bottom, visible above overlays */ .bottom-container { position: absolute !important; bottom: 5px; top:450px; left: 50%; transform: translateX(-50%); width: calc(100% - 32px); /* small page padding */ max-width: 760px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding: 10px 2px; box-sizing: border-box; height: 230px !important; } /* default: two items per row */ .bottom-container .counseling-section { flex: 0 0 48%; max-width: 48%; box-sizing: border-box; text-align: center; padding: 6px 8px; } /* center the 3rd item below the two (narrower) */ .bottom-container .counseling-section:nth-child(3) { flex: 0 0 60%; max-width: 60%; margin-left: auto; margin-right: auto; align-self: center; } /* hide empty 4th slot if present */ .bottom-container .counseling-section:nth-child(4) { display: none; } /* small typographic tweaks */ .counseling-section i { font-size: 22px; margin-bottom: 6px; display: block; } .counseling-section h6 { font-size: 13px; margin: 4px 0 6px; } .counseling-section p { font-size: 12px; line-height: 1.3; margin: 0; } .image-slideshow { position: absolute !important; /* make sure it sits behind overlays */ top: 315px !important; left: 0 !important; width: 90vw !important; height: 45vh !important; overflow: hidden !important; z-index: 0 !important; /* keep it behind overlay text/buttons */ } .image-slideshow img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } /* Optional: make sure overlay is above */ .image-overlay { position: relative; z-index: 5 !important; } body header { position: relative !important; top: auto !important; left: auto !important; width: 100% !important; transform: none !important; } /* Force logo and language to follow the section flow */ .logo-container, .language-container { position: absolute !important; top: auto !important; left: 50% !important; transform: translateX(-50%) !important; right: auto !important; bottom: auto !important; } /* Optional β€” fine tune */ .language-container { margin-top: 85px !important; } .logo-container { margin-top: 170px !important; } /*#endregion BACKGROUND*/ /*#region BRIEF*/ /* GLOBAL BRIEF SECTION (Desktop & Mobile Compatible) */ .brief { width: 100%; /* βœ… full width for clean centering */ max-width: 95vw; /* keep same visual width but prevent subpixel shifts */ margin: 0 auto; height: auto !important; min-height: 100vh; z-index: 1; border: none; display: flex !important; flex-direction: column-reverse !important; /* βœ… video first, text second */ align-items: center !important; /* βœ… ensures horizontal centering */ justify-content: flex-start !important; /* top alignment */ padding: 20px; text-align: center; } .brief.pinned { position: fixed; top:20px !important; left: 50%; transform: translateX(-50%); width: 92%; height: auto !important; min-height: 100vh; z-index: 0; display: flex !important; flex-direction: column; align-items: center !important; justify-content: flex-start !important; pointer-events: none; overflow: visible; } /* Neutralize layout reflows */ .brief-wrapper, .section-image { overflow: visible !important; transform: none !important; } .brief.pinned * { pointer-events: auto; } .brief-wrapper{ min-height:80px; } .brief-heading { font-size: 1.4rem; } .centered-content { margin-left: -20; margin-top: 65px !important; max-width: 98% !important; text-align: center; transform: translateY(-10%) !important; } .centered-content p { line-height: 24px !important; font-size: 15px !important; } /* 🎯 The key block β€” ensures the video sits dead-center */ /* 🎯 The key block β€” ensures the video sits dead-center */ .video-container { width: 90vw !important; aspect-ratio: 16 / 9 !important; /* maintain ratio */ height: auto !important; margin-top: 2px !important; /* βœ… adds space above */ transform: translateY(14%) !important; } .video-container video { width: 100%; height: auto; object-fit: cover; border-radius: 10px; display: block !important; } .container-j, .container-k { display: none !important; visibility: hidden !important; position: absolute !important; width: 0 !important; height: 0 !important; } .scroll-cue { bottom: 10px; } /*#endregion BRIEF*/ /*#region WHO WE ARE*/ .who-we-are-section { flex-direction: column; height: auto; padding: 1rem; align-items: center; /* βœ… ensure the full content centers */ } .who-we-are-image { width: 100%; max-width: 420px; /* keeps it tidy */ margin: 0 auto; display: flex; /* βœ… enable centering context */ justify-content: center; /* βœ… center horizontally */ align-items: center; /* βœ… center vertically if there's extra height */ position: relative; } .who-we-are-image video { width: 420px; height: 320px; border-radius: 20px !important; object-fit: cover; display: block; /* βœ… ensures no inline spacing issues */ margin: 0 auto; /* βœ… fallback centering */ } .who-we-are-content { width: 100%; margin: 1.5rem auto 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; /* βœ… Reset inherited offsets */ margin-right: 0 !important; margin-left: 0 !important; } .who-we-are-content h2 { font-size: 24px; text-align: center; margin-bottom: 10px; margin-left: 0 !important; /* βœ… reset inherited shift */ } .who-we-are-content>p { font-size: 0.98rem !important; max-width: 95% !important; margin: 0 auto 1.5rem; text-align: center; line-height: 1.5; } .card-container { flex-direction: column; align-items: center; } .card-box { width: 60% !important; height: auto; align-items: center; left: 0 !important; /* βœ… Reset the negative offset */ margin: 0 auto !important; /* βœ… Center horizontally */ } .container-n { position: absolute; display: flex; flex-direction: column; align-items: center; left: -85px; top: -125px; animation: heartbeat 3.3s infinite; z-index: 1; } .container-m { position: absolute; display: flex; flex-direction: column; align-items: center; left: -27px; top: -220px; animation: heartbeat 3.3s infinite; z-index: 1; } .container-o { position: absolute; display: none; flex-direction: column; align-items: center; left: -150px; top: -240px; animation: heartbeat 3.3s infinite; z-index: 1; } .container-n, .container-o { pointer-events: none; /* allows clicks to reach the video underneath */ } .read-more-container .read-more-btn .btn-who { font-size: 1em !important; } /*#endregion WHO WE ARE*/ /*#region RESULT SECTION*/ .result { height: 1000px; padding: 2rem 1rem; /*width: 100%;*/ } .result-content { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 40px; /* increased from 30px to 40px */ } .self-check-container { display: flex; flex-direction: column; align-items: center; justify-content: center; margin-top: 110px !important; margin-bottom: 35px; /* added spacing below before the image */ padding: 0 10px; } /* RIGHT SECTION */ .right { width: 100% !important; height: auto !important; display: none !important;/*The display of this will be for new update*/ flex-direction: column; align-items: center; justify-content: center; margin-top: 420px; margin-bottom: 40px; gap: 25px; position: relative; } /* IMAGE AREA (fully contained and properly aligned) */ .image-div { position: relative; width: 90%; /* keeps image area balanced */ overflow: hidden; /* ensures image does NOT overflow */ display: flex; justify-content: center; } .image-div img { width: 190% !important; /* increases visible width but stays inside */ margin-left: -15%; /* shifts it slightly left */ margin-top: 30px; height: 270px !important; border-radius: 12px; object-fit: cover; transition: all 0.3s ease; } .announcement { width: 290px; } /* QUOTE AREA */ .quote-div { position: relative; top: 85px; width: 85%; max-width: 700px; max-height: 200px; /* Set max height for scrolling */ margin: 0 auto; padding: 10px 0; text-align: center; overflow-y: auto; /* Enable vertical scrolling */ background: rgba(0, 0, 0, 0.3); /* Optional: dark overlay */ border-radius: 8px; /* Optional: rounded corners */ } /* Quote text inside scrollable container */ #personal_quote { font-size: 0.85rem !important; font-weight: 400 !important; line-height: 1.7 !important; color: #F0F0F0; margin: 0 auto !important; text-align: center !important; width: 100% !important; max-width: 480px !important; padding: 0 20px !important; word-wrap: break-word !important; overflow-wrap: break-word !important; white-space: normal !important; box-sizing: border-box; } #mood-summary-option { box-sizing: border-box; width: 90%; /* or use 100% to fill parent */ max-width: 280px; /* adjust width cap */ min-width: 200px; padding: 10px 14px; border-radius: 6px; border: 1px solid #ccc; font-size: 15px; background-color: #fff; text-align: center; appearance: none; cursor: pointer; } /* Optional: if the dropdown list appears narrower than select */ #mood-summary-option option { width: 100%; text-align: center; white-space: nowrap; } .result-header h2 { font-size: 1.6rem; } .result-content h1 { font-size: 3rem; } .stat span { font-size: 2rem; } .left-new-section { width: 100%; margin-top: 210px !important; height:100% !important; } .new-content-container { height: 650px !important; /* fixed viewport height so it doesn’t stretch layout */ overflow-y: auto; /* enable vertical scroll */ overflow-x: hidden; scrollbar-width: thin; /* for Firefox */ scrollbar-color: #ccc transparent; padding-right: 8px; /* prevent text cutoff due to scrollbar */ scroll-behavior: smooth; } /* Optional: custom scrollbar for WebKit (Chrome/Safari/Edge) */ .new-content-container::-webkit-scrollbar { width: 6px; } .new-content-container::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, 0.3); border-radius: 4px; } .new-content-container::-webkit-scrollbar-thumb:hover { background-color: rgba(0, 0, 0, 0.45); } .banner { height: 115px; font-size: 12px; max-width: 95%; text-align: center; } .right { transform: translateX(2.5%); /* small left shift to visually center */ } /* Ensure image centering isn't overcompensated */ .image-div img { margin-left: -5% !important; /* was -15%, slight left shift only */ } /*#endregion RESULT SECTION*/ /*#region QUOTES*/ .fun{ min-height: 90vh; /* ensures at least one screen height */ height: auto; /* expands with content automatically */ margin-top:-2px !important; } .fun-heading-container { margin-bottom: 20px; /* space between "Do you know?" and quotes */ } .content-gallery-container { flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; gap: 35px; } /* Center text area */ .content-gallery-container .content { width: 100%; max-width: 90%; padding: 10px 0; } /* Gallery below text */ .content-gallery-container .gallery { width: 100%; display: flex; justify-content: center; align-items: center; } /* βœ… Fixed container height to prevent clipping */ .image-container { position: relative; width: 100%; max-width: 400px; height: 360px !important; /* keep consistent visual height */ overflow: hidden; } /* βœ… Keep all images absolutely positioned in same spot */ .gallery-image { position: absolute !important; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; max-width: 320px; height: 350px; opacity: 0; transition: opacity 1s ease-in-out; } /* βœ… Only active image visible */ .gallery-image.active { opacity: 1; } /* βœ… Pinned section height consistent */ .fun.pinned { height: 750px !important; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; border-radius: 0; overflow: hidden; top: 20px; } /* Keep quotes visible, properly spaced and centered */ .quote-container { position: relative; height: auto; /* allow it to grow naturally */ margin-top: 15px; /* space between heading and quote */ display: flex; justify-content: center; align-items: center; padding: 0 10px; /* a little side padding */ text-align: center; } /* Each quote stays centered and consistent */ .quote { position: absolute; opacity: 0; transition: opacity 1s ease-in-out; max-width: 85%; /* responsive width that wraps nicely */ line-height: 1.5; color: var(--fun-white); font-size: 1.05rem !important; text-align: center; margin: 0 auto; } /* Active quote fades in */ .quote.active { opacity: 1; position: relative; /* becomes flow element when visible */ } /*#endregion QUOTES*/ /*#region CONSULT*/ .consult { min-height: 100vh; /* ensures at least one screen height */ height: auto; /* expands with content automatically */ padding: 20px 0; } .text-side { font-size: 26px; margin-left: 20px !important; margin-top: 80px; } .serif { font-size: 38px; margin-left: 20px; } .intro-text { font-size: 16px; margin: 10px 20px; max-width: 100%; } .consult-container { position: relative; width: 70%; height: 280px; margin: 20px auto; top: -10px; } .consult-container .image-box { margin: 0 auto; width: 220px; height: 300px; } .consult-container .text-box { margin: 20px auto; margin: 20px auto; width: 95% !important; height: 240px !important; left: 58px; top: -280px; font-size: 10px; height: 240px !important; left: 58px; top: -280px; font-size: 9px; } .btn-text { font-size: 9px; } /* βœ… FIX: Make keyword grid horizontal */ .keyword-grid { display: flex !important; flex-direction: row !important; /* horizontal layout */ justify-content: center !important; /* center across width */ align-items: flex-start !important; flex-wrap: nowrap !important; /* keep in one row */ gap: 5px !important; margin: 20px auto !important; width: 100%; } /* βœ… Ensure each column fits neatly side-by-side */ .keyword-grid .column { display: flex !important; flex-direction: column; align-items: center !important; gap: 10px; flex: 1; /* equal width columns */ } /* βœ… Adjust keyword buttons for mobile readability */ .keyword-button { font-size: 12px !important; padding: 6px 10px !important; text-align: center !important; min-width: 80px; } /*#endregion CONSULT*/ /*#region THERAPHY*/ .cards-section { display: flex; flex-wrap: wrap; /* allow wrapping for rows */ justify-content: center; /* center cards horizontally */ gap: 20px; /* nice spacing between cards */ width: 100%; padding: 20px 0; margin: 0 auto; } .card { width: 45%; /* two cards per row */ height: 240px !important; margin-bottom: 20px; } .cards-section .header h2 { font-size: 1.6rem !important; } .card-text h2 { font-size: 1.4rem; } .card-image img { height: auto; /* let it shrink proportionally */ max-height: 240px; /* keep inside card */ margin-top: 0; /* reset push */ object-fit: contain; } /*#endregion THERAPY*/ /*#region WHO WE ARE1*/ .crisis{ text-align: center !important; margin: 0 auto; width: 100%; } .who-we-are-section1 { display: flex; flex-direction: column; align-items: center; /* βœ… Center horizontally */ justify-content: center; /* βœ… Center vertically if there's room */ text-align: center; /* βœ… Center text alignment */ padding: 1.5rem; width: 100%; height: auto; margin: 0 auto; /* βœ… Ensure full centering */ box-sizing: border-box; } .image-card-container { display: grid; grid-template-columns: 1fr; width: 100%; max-width: 480px; /* βœ… Keep content balanced on small screens */ margin: 0 auto; justify-items: center; /* βœ… Center the image cards */ gap: 1rem; } .who-we-are-content1 { margin-top: 20px; padding: 0 0.1rem; /* βœ… Equal space left and right */ max-width: 480px; width: 100%; box-sizing: border-box; text-align: center; } .who-we-are-content1 h2 { font-size: 24px; line-height: 1.4; margin-bottom: 0.5rem; } .who-we-are-text-bg p { text-align: left; } .card-container2, .read-more-container2 { display: flex; justify-content: center; /* βœ… Center those buttons and cards */ } .container-m{ left:-130px; } /*#endregion WHO WE ARE*/ /*#region CHOOSE*/ .choose { } .why-section-container { flex-direction: column; align-items: center; /* center horizontally */ justify-content: center; padding: 20px; gap: 20px; text-align: center; } .vertical-divider { display: none; } .why-section-left, .why-section-center, .why-section-right { max-width: 100%; padding: 10px 0; } .why-section-left h1 { font-size: 2rem; text-align: center; } /* βœ… Fix list items */ /* Ensure parent (the list) aligns properly */ .why-section-list { display: flex; flex-direction: column; align-items: flex-start; /* βœ… Align list items left */ justify-content: center; text-align: left; margin: 0 auto; /* Keeps the list block centered horizontally */ width: fit-content; /* Prevents full-width centering weirdness */ } /* Fix each list item layout */ .why-section-list li { display: flex; align-items: flex-start; /* Align icon and text properly */ justify-content: flex-start; /* βœ… Text stays left of icon */ text-align: left; gap: 8px; /* space between icon and text */ white-space: normal; overflow: visible; } /* Optional: Adjust icon size and vertical alignment */ .why-section-list li i { font-size: 1.1rem; margin-top: 3px; } .info-block .heading1 { font-size: 50px; } .info-block p { font-size: 0.98rem; max-width: 100%; /* take full width available */ margin: 0 auto; /* center horizontally */ text-align: center; } /*#endregion CHOOSE*/ /*#region BLOG*/ .blog { width: 90% !important; padding: 2rem 0; /* remove side padding */ } .blog .result-header h2 { font-size: 1.8rem; } .profile-cards { display: flex; flex-direction: column; align-items: center; gap: 2rem; } .profile-card { width: 100%; text-align: center; } .profile-image img { height: 180px; } .profile-content h3 { font-size: 1.1rem; } .profile-content p { font-size: 0.9rem; } /*#endregion BLOG*/ /*#region MEDITATION*/ .meditation-section { padding: 40px 15px; border-radius: 25px; text-align: center; } .med-carousel-wrapper { width: 100%; display: flex; justify-content: center; align-items: center; position: relative; } .med-prev-btn, .med-next-btn { position: absolute; top: 50%; transform: translateY(-50%); font-size: 1.5rem; background: rgba(30, 41, 59, 0.8); color: #fff; border: none; border-radius: 50%; width: 35px; height: 35px; cursor: pointer; display: flex; justify-content: center; align-items: center; z-index: 5; } .med-prev-btn { left: 10px; } .med-next-btn { right: 10px; } .med-carousel-container { width: 100%; max-width: 480px; margin: 0 auto; overflow: hidden; position: relative; } .track-slide { display: flex; flex-direction: column; align-items: center; gap: 1.2rem; padding: 10px 0; transition: transform 0.5s ease; height: auto !important; min-height: auto !important; } .track { width: 90%; max-width: 400px; background: rgba(255, 255, 255, 0.05); border-radius: 16px; padding: 10px; box-sizing: border-box; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); text-align: left; height: auto !important; min-height: 360px !important; } .track-image { width: 100%; height: 180px; border-radius: 12px; overflow: hidden; position: relative; } .thumbnail-video { width: 100%; height: 100%; object-fit: cover; display: block; } .play-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 1.5rem; color: white; background: rgba(0, 0, 0, 0.6); border-radius: 50%; padding: 10px; cursor: pointer; } .track-info p { margin-top: 10px; color: white !important; line-height: 1.5; } .track-info h3 { font-size: 1.1rem; margin-bottom: 4px; color: white !important; } .track-categories { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; } .category { background: rgba(255, 255, 255, 0.15); padding: 3px 7px; border-radius: 8px; font-size: 0.75rem; color: white !important; } .meditation-heading { font-size: 1.5rem; margin-bottom: 10px; } .meditation-subtext { font-size: 0.9rem; line-height: 1.5; max-width: 440px; margin: 0 auto 20px; } /*#endregion MEDITATION*/ /*#region FEATURES*/ #features { padding: 35px 25px; border-radius: 25px; } .features-heading { font-size: 1.2rem; } .result-header h2 { font-size: 1.6rem; } .result-header p { font-size: 0.95rem; } .features-box img { max-height: 240px; } .carousel-inner .row { flex-direction: column; gap: 18px; padding: 0 10px; } .custom-carousel-control-prev { transform: translateX(8px); } .custom-carousel-control-next { transform: translateX(560%); } .book-session, .more-resources { font-size: 0.7rem; padding: 7px 10px; } .book-session .arrow-icon, .more-resources .arrow-icon { width: 22px; height: 22px; } /*#endregion FEATURES*/ /*#region SPOTLIGHT*/ .split-container { position: relative; display: flex !important; flex-direction: column !important; justify-content: center !important; /* Center vertically within mobile viewport */ align-items: center !important; /* Center horizontally */ width: 100%; min-height: 430px; /* Maintain visual space */ overflow: visible; /* Prevent layout shifts during animation */ margin-top: 270px !important; /* Preserve your desired vertical offset */ margin-left: 16px !important; transform: translate(-10px); } /* Stack content vertically */ /* πŸ”₯ Key fix: overlays stay absolutely stacked */ .inner-overlay { position: absolute !important; top: 0; left: 50%; transform: translateX(-50%); width: 95%; height: auto; margin: 0 auto; opacity: 0; transition: opacity 0.5s ease-in-out; } /* Hide decorative lines */ .vertical-lines { display: none !important; } /* Center the image properly */ .circle-placeholder { position: relative; margin: 0 auto 20px auto; width: 140px; height: 140px; transform: translate(-80px) !important; } /* Text section directly beneath image */ .text-container { margin: 0 auto; text-align: center; width: 90%; max-width: 400px; margin-top: 45px !important; } .text-container .name { font-size: 1rem; } .text-container h2.title { font-size: 1.1rem; margin-bottom: 6px; } .text-container .review { font-size: 0.9rem; line-height: 1.5; } /* Social icons in a horizontal row */ .social-media-icons { display: flex; flex-direction: row; /* βœ… Horizontal alignment */ align-items: center; justify-content: center; gap: 16px; margin-top: 20px; width: 100%; transform: translate(-40px) !important; } /* Icon + text vertically aligned */ .social-column { display: flex; flex-direction: column; align-items: center; text-align: center; } .social-column .social-icon { font-size: 1.2rem; padding: 10px; } .social-column p { font-size: 0.8rem; margin-top: 6px; } .circle-placeholder img { width: 100%; height: 100%; object-fit: cover; /* keeps proportions but fills the circle */ border-radius: 50%; /* makes it circular */ display: block; border: 3px solid white; /* optional aesthetic touch */ } /* βœ… Show the container again */ /* βœ… Keep the vertical-lines container visible but contained */ /* Keep vertical-lines visible but neutral */ .vertical-lines { display: flex !important; align-items: center; justify-content: center; position: relative !important; width: 100%; margin: 0 auto; padding: 0; background: transparent; } /* Hide decorative vertical lines only */ .vertical-lines .line { display: none !important; } /* βœ… Circle image floats visually into the container */ .vertical-lines .circle-placeholder { position: absolute !important; /* place relative to split-container */ top: -70px; /* slightly overlap inner-overlay */ left: 50%; transform: translateX(-50%); /* center horizontally */ width: 120px; height: 120px; z-index: 3; } .vertical-lines .circle-placeholder img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; border: 3px solid white; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); } /* Adjust content inside inner overlay so it doesn’t collide */ .inner-overlay { margin-top: 70px; /* gives room for image overlap */ } /* Optional fine-tune for text layout */ .text-container { margin-top: 10px; } /*#endregion SPOTLIGHT*/ /*#region ADVERT*/ #advert-section { min-height: 190vh; /* ensures full screen coverage */ height: auto; /* expands with content */ padding: 35px 15px; } .advert-layout { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 25px; } /* Fix the hidden image container issue */ .advert-container { width: 100%; height: auto; min-height: 490px; /* βœ… keeps section visible even before image loads */ display: flex; flex-direction: column; align-items: center; justify-content: center; } .advert-left { width: 100%; } .advert-box { width: 95%; height: auto; display: flex; flex-direction: column; align-items: center; gap: 15px; } .advert-box img { width: 85%; height: auto; max-height: 250px; object-fit: cover; display: block; /* βœ… ensures image displays */ } .text-right-side { width: 90%; text-align: center; margin-top: 20px; } .text-right-side h2 { font-size: 1.5rem; } .text-right-side p { font-size: 0.88rem; } .text-right-side .underline { width: 200px; margin: 10px auto; } /*#endregion ADVERT*/ /*#region RANGER*/ .ranger-wrapper { width: 100% !important; /* ensures it spans full width */ display: flex !important; justify-content: center !important; /* centers the content inside */ background: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%) !important; } #ranger-section { width: 90% !important; /* increase width from typical 70–80% to 90% */ max-width: 1600px !important; /* optional cap for large screens */ margin: 0 auto !important; text-align: center !important; } .global-reach { font-size: 1.2rem; } .value { font-size: 2.0rem; } .word { font-size: 0.85rem; } .rolling-container { font-size: 2.2rem; } /*#endregion RANGER*/ /*#region MOTIVATION*/ .motivational-messages p { font-size: 1.2rem; color: white !important; } .track-info p { color: white !important; } .track-info h3 { color: white !important; } .track-categories .category { color: white !important; } /*#endregion MOTIVATION*/ /*#region FAQ*/ #faq { width: 100%; } .faq-wrapper{ width: 100%!important; } .faq-title { font-size: 0.95rem; width: 95% } .faq-question { font-size: 0.85rem; } .faq-answer { font-size: 0.85rem; } /*#endregion FAQ*/ /*#region FOOTER*/ .custom_footer_top { position: relative; padding: 60px 25px; overflow-x: visible; box-sizing: border-box; } .custom_footer_top .row { flex-wrap: wrap; justify-content: center; gap: 40px; /* Slightly tighter spacing for smaller screens */ } /* βœ… Center the social media icons cleanly */ .f_social_icon { display: flex; justify-content: center; align-items: center; gap: 16px; margin-top: 20px; width: 100%; text-align: center; } .f_social_icon a { font-size: 22px; color: white; transition: all 0.3s ease; } .f_social_icon a:hover { color: #00bcd4; transform: scale(1.1); } .col-md-6, .col-lg-3 { flex: 0 0 100%; max-width: 100%; } .f_widget h3 { text-align: center; } .f_widget .f_list { text-align: center; } /* βœ… Full-width subfooter with vertical stacking */ .subfooter { position: relative; left: 0; right: 0; width: 100%; max-width: none; margin: 0 auto; padding: 45px 35px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 35px; background-color: #1f3a52; border-radius: 10px; box-sizing: border-box; overflow: visible; } /* βœ… Left section (text + logo) */ .subfooter-left { width: 100%; text-align: center; align-items: center; transform: translateX(17%) !important; } /* βœ… Right section (subscribe + video) */ .subfooter-right { width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 25px; margin-top: 20px; } /* βœ… Subscribe section centered */ .subscribe-container { width: 70% !important; text-align: center !important; margin: 0 auto !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; left: 0 !important; right: 0 !important; } .subscribe-form { flex-direction: column; align-items: center; justify-content: center; } .email-input { width: 90% !important; margin-bottom: 10px; } .subf1-button { width: 170px !important; height: 46px; font-size: 0.9rem; } /* βœ… Video responsive and centered */ .image-placeholder1 video { width: 220px !important; height: 220px !important; border-radius: 12%; margin-top: 18px; display: block; object-fit: cover; transform: translate(-7%); /* Keep perfectly centered */ } /* βœ… Typography */ .about-subtext, .serif-f { font-size: 2rem !important; line-height: 1.2; } .privacy-statement { text-align: center; font-size: 0.98rem; margin-top: 8px; } .quick_links_widget { margin-top: 60px !important; } /* βœ… Back-to-top button alignment */ .top { right: 15px; bottom: 15px; } .subfooter-right { width: 100% !important; transform: none !important; margin-top: 0 !important; justify-content: center !important; align-items: center !important; } .subscribe-container { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center !important; margin: 0 auto 25px auto !important; position: relative !important; left: 0 !important; right: 0 !important; transform: none !important; } .image-placeholder1 { display: flex !important; justify-content: center !important; align-items: center !important; width: 100% !important; margin: 0 auto !important; transform: none !important; left: 0 !important; right: 0 !important; position: relative !important; } /*#endregion FOOTER*/ /* For taller phones like Redmi 14C */ @media (min-height: 811px) and (max-height: 840px) { /*#region CHAT*/ /* πŸ”Ή Chat Icon */ .chat-icon { width: 52px; height: 52px; bottom: 20px; right: 8px; top: 670px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); z-index: 1000; position:fixed; } /* πŸ”Ή Chat & Message Containers */ .chat-container, .message-container, #message-chat-container { width: 90vw; /* Full width for mobile */ height: 70vh; /* Increased height to make content visible */ bottom: 60px; right: 5vw; border-radius: 10px; transition: all 0.3s ease; } /* πŸ”Ή Header */ .message-header h2 { font-size: 16px; margin: 0; padding: 10px 0; } /* πŸ”Ή Message Body */ .message-body { padding: 10px; text-align: center; overflow-y: auto; /* scroll if needed */ } .message-body-svg { width: 40px; height: 40px; margin-top: 20px; margin-bottom: 10px; } .message-body h2 { font-size: 15px; margin-top: 10px; } .message-body span { font-size: 13px; color: #555; display: block; margin-top: 6px; } /* πŸ”Ή Send Message Button */ .send-message-btn { font-size: 13px; padding: 6px 12px; border-radius: 16px; margin-top: 20px; } /* πŸ”Ή Footer Tabs */ .chat-footer-tabs, .chat-footer-tabs-message { flex-direction: row; justify-content: space-around; align-items: center; padding: 6px 0; position: absolute; bottom: 0; left: 0; width: 100%; border-top: 1px solid #ccc; background-color: #fff; z-index: 10; } .chat-input-area { margin-top: 80px; } .chat-greeting { margin-top: 90px !important; } .tab-button, .tab-button-message { background: none; border: none; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #444; cursor: pointer; } .tab-button svg, .tab-button-message svg { width: 20px; height: 20px; } .tab-button span, .tab-button-message span { font-size: 12px; } .tab-button-message.active svg path { fill: #1f3a52; } /* πŸ”Ή Message Chat Layout */ .message-chat-header { height: 50px; padding: 8px; } .logo-video-chat { margin-top: 5px !important; } .logo-video-message { align-self: flex-start; transform: translateY(-193px); width: 170px !important; margin-right: -90px; } .logo-video-chat { align-self: flex-start; transform: translateY(-185px); width: 160px; } .close-btn { position: absolute; top: -187px; font-size: 1.8rem; background: none; border: none; color: black; cursor: pointer; z-index: 1010; transform: translate(95px); } .message-chat-body { padding: 12px; max-height: calc(100% - 110px); } .chat-bubble { font-size: 13px; padding: 8px 12px; max-width: 85%; } .message-chat-input { padding: 8px; } .input-wrapper { min-height: 42px; } .input-container { padding: 6px; } .message-chat-input-field { font-size: 13px; } .send-button-input { width: 28px; height: 28px; } /*#endregion CHAT*/ /*#region BACKGROUND*/ .ad-container { transform: translateY(-50%) !important; width: 120px !important; height: 125px !important; min-width: 130px !important; min-height: 130px !important; } .ad-content h3 { font-size: 0.675rem !important; } .ad-content p { font-size: 0.675rem !important; } .section-image { position: relative; background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.25); background-size: cover; background-position: center; background-repeat: no-repeat; width: 100vw; min-height: 100vh; margin-top: -138px; pointer-events: auto; /* ensure it's active */ height: auto; overflow: hidden; z-index: 200; /* πŸ’‘ The magic mask (square hole on the right side) */ -webkit-mask-image: radial-gradient(circle at 50% 35%, transparent 60px, black 90px); mask-image: radial-gradient(circle at 50% 35%, transparent 60px, black 90px); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } .section-image { transition: -webkit-mask-image 0.6s ease-in-out, mask-image 0.6s ease-in-out; } .section-image:hover { -webkit-mask-image: radial-gradient(circle at 50% 35%, transparent 100px, black 130px); mask-image: radial-gradient(circle at 50% 35%, transparent 100px, black 130px); } header { position: fixed !important; /* keep page content from shifting */ top: 0; left: 0; width: 100%; z-index: 1000; box-sizing: border-box; padding-top: 8px; /* small top gap */ padding-bottom: 78px; /* reserve space inside fixed header for logo */ background-color: var(--background-color); } /* Nav: center in header (stay in normal flow so hitboxes match visuals) */ nav { display: flex !important; justify-content: center !important; align-items: center !important; width: 100%; z-index: 1100; pointer-events: auto; } /* Nav links container */ .nav-links { display: flex !important; gap: 0px !important; /* adjust spacing between icons */ margin: 0; padding: 0; list-style: none; justify-content: center; align-items: center; } /* Restore base link layout but make touch-target comfortable */ .nav-links li a { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 6px 6px !important; min-width: 44px !important; /* good mobile tap size */ height: 55px; font-size: 11px; color: var(--text-muted); position: relative; /* keep absolute span relative to this */ margin: 0 !important; /* override negative margin hacks */ } /* Icon size */ .nav-links li a i { font-size: 18px; margin-bottom: 6px; } /* --- IMPORTANT: keep labels hidden until hover (restore base behaviour) --- */ .nav-links li a span { opacity: 0 !important; transform: translateY(8px) !important; transition: all 0.25s cubic-bezier(0.22, 0.61, 0.36, 1) !important; pointer-events: none !important; position: absolute !important; top: 32px !important; white-space: nowrap !important; } /* Label becomes visible on hover (same as your base CSS) */ .nav-links li a:hover span { opacity: 1 !important; transform: translateY(0) !important; pointer-events: auto !important; } /* Center logo under nav β€” absolutely positioned inside the fixed header */ /* Center logo under nav β€” perfectly aligned */ .logo-container { position: absolute !important; /* keep same vertical placement */ left: 50% !important; /* fine-tune centering (was -50%) */ margin: 0 !important; z-index: 500 !important; text-align: center; } .logo-video { width: 180px !important; margin-top: -18px !important; height: auto !important; object-fit: contain !important; } /* Language selector centered above the nav/logo */ .language-container { position: absolute !important; /* sits near top of header */ left: 50% !important; z-index: 1200 !important; /* above nav */ margin: 0 !important; width: auto !important; } .language-select { margin-top: -15px !important; padding: 6px 10px !important; font-size: 10px !important; white-space: nowrap; border-radius: 12px; } /* dropdown menu for services: ensure it doesn't go off-screen */ /* Dropdown menu for mobile */ .dropdown-service-menu { left: 50% !important; transform: translateX(-50%) !important; top: calc(100% + 6px) !important; z-index: 2000 !important; background-color: white !important; /* white background */ border-radius: 12px !important; /* rounded corners */ width: 100px !important; /* almost full width on mobile */ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important; /* subtle shadow */ padding: 8px 0 !important; /* vertical padding */ } /* Dropdown links styling */ .dropdown-service-menu li a { color: #0a4da2 !important; /* readable blue text */ font-size: 14px !important; /* readable font size */ padding: 10px 20px !important; /* tappable area */ display: block; text-decoration: none; transition: background 0.3s ease; } /* Hover effect for dropdown items */ .dropdown-service-menu li a:hover { background-color: #f0f8ff !important; /* subtle highlight */ color: #0a4da2 !important; } /* Defensive override: remove other negative-margin / shift hacks */ .nav-links li a, .language-container { margin-left: 0 !important; margin-top: 0 !important; } .image-overlay { top: 18%; left: 5%; text-align: center; } .h2-container.background-language-content.active { font-size: clamp(10px, 6vw, 26px); /* responsive font size */ line-height: 1.3; /* spacing between lines */ max-width: 95%; /* avoid overflow */ margin: 14px auto 0 auto; /* horizontal centering */ text-align: center; /* center text */ word-break: normal; /* prevent breaking words */ white-space: normal; /* normal wrapping */ transform: translateX(-9%) !important; margin-top: 340px !important; } .b-container { font-size: clamp(10px, 4vw, 20px); width: 80% !important; transform: translateX(-7%) !important; text-align: center !important; /* center text */ word-break: normal !important; /* prevent breaking words */ white-space: normal !important; margin-top: -5px; } .h3-container { font-size: clamp(10px, 5vw, 16px) !important; transform: translate(28%); text-align: left; width: 40% !important; margin-top: 22px !important; } .subscribe-btn { display: flex; justify-content: center; /* horizontal centering */ align-items: center; /* vertical centering */ padding: 0.8rem 2rem; /* controls button size */ width: 100px; margin-left: 225px !important; margin-top: -60px !important; } .subscribe-btn .btn-text { line-height: 1; /* ensures no vertical spacing issues */ font-size: 0.7rem !important; } .container-i { margin-left: 85px !important; top: -410px !important; display: none; } .circle-container-2 { position: relative; width: 40px; height: 40px; top: 335px; left: -56px; } .container-2 { margin-left: 90px !important; margin-top: -20px !important; } .circle-text-container-2 { width: 24%; margin-left: 6px; margin-top: 300px; font-size: 0.85rem; } /* bottom container: absolute at hero bottom, visible above overlays */ .bottom-container { position: absolute !important; bottom: 5px; top:550px; left: 50%; transform: translateX(-50%); width: calc(100% - 32px); /* small page padding */ max-width: 760px; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding: 10px 2px; box-sizing: border-box; height: 230px !important; } /* default: two items per row */ .bottom-container .counseling-section { flex: 0 0 48%; max-width: 48%; box-sizing: border-box; text-align: center; padding: 6px 8px; } /* center the 3rd item below the two (narrower) */ .bottom-container .counseling-section:nth-child(3) { flex: 0 0 60%; max-width: 60%; margin-left: auto; margin-right: auto; align-self: center; } /* hide empty 4th slot if present */ .bottom-container .counseling-section:nth-child(4) { display: none; } /* small typographic tweaks */ .counseling-section i { font-size: 22px; margin-bottom: 6px; display: block; } .counseling-section h6 { font-size: 13px; margin: 4px 0 6px; } .counseling-section p { font-size: 12px; line-height: 1.3; margin: 0; } .image-slideshow { position: absolute !important; /* make sure it sits behind overlays */ top: 315px !important; left: 0 !important; width: 90vw !important; height: 45vh !important; overflow: hidden !important; z-index: 0 !important; /* keep it behind overlay text/buttons */ } .image-slideshow img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } /* Optional: make sure overlay is above */ .image-overlay { position: relative; z-index: 5 !important; } body header { position: relative !important; top: auto !important; left: auto !important; width: 100% !important; transform: none !important; } /* Force logo and language to follow the section flow */ .logo-container, .language-container { position: absolute !important; top: auto !important; left: 50% !important; transform: translateX(-50%) !important; right: auto !important; bottom: auto !important; } /* Optional β€” fine tune */ .language-container { margin-top: 85px !important; } .logo-container { margin-top: 170px !important; } /*#endregion BACKGROUND*/ } } /* Small phones */ @media (min-width: 390px) and (max-width: 419px) { /*#region INTRO PANEL LOGIC*/ .panel { pointer-events: auto !important; position: relative !important; z-index: 20 !important; } .intro-logo { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); width: 150px; z-index: 2; pointer-events: none; } /* Main cover container */ .intro-cover { position: fixed !important; inset: 0 !important; display: flex !important; flex-direction: row !important; overflow-x: auto !important; /* βœ… allow horizontal swipe */ overflow-y: hidden !important; /* βœ… disable vertical scroll */ scroll-snap-type: x mandatory !important; -webkit-overflow-scrolling: touch; width: 100vw !important; height: 100vh !important; scroll-behavior: smooth; background: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%); z-index: 9999 !important; touch-action: pan-x !important; /* βœ… allow finger swipes horizontally */ } /* Ensure this does NOT override the scrollability */ .intro-cover::-webkit-scrollbar { display: none; } .intro-cover { -ms-overflow-style: none; scrollbar-width: none; } /* Panels inside cover */ .intro-cover .panel { flex: 0 0 100vw !important; /* βœ… make sure each takes full viewport width */ width: 100vw !important; height: 100%; scroll-snap-align: start; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 1rem; box-sizing: border-box; z-index: 10 !important; position: relative !important; } .intro-cover .panel img { width: 80%; height: auto; max-height: 250px; object-fit: cover; border-radius: 12px; margin-bottom: 12px; } .intro-cover .panel h1 { font-size: 1.3rem; margin: 0.5rem 0; } .intro-cover .panel p { font-size: 0.9rem; line-height: 1.3; margin-bottom: 0.4rem; } .start-btn { position: relative !important; z-index: 999999 !important; margin-top: 60px; } /* Slide hint (arrow + text) */ /* Common base style for hints */ .slide-hint { display: flex !important; align-items: center; justify-content: center; margin-top: 18px; font-size: 0.9rem; color: #ffffff; opacity: 0.8; gap: 0.3rem; animation: fadeIn 1s ease-in 0.5s forwards; user-select: none; } /* Right swipe hint (default) */ .right-hint .arrow { animation: slideArrowRight 1.2s infinite ease-in-out !important; } /* Left swipe hint (mirrored animation) */ /* Left arrow: same ➜, but visually mirrored */ .left-hint .arrow { display: inline-block !important; transform: scaleX(-1) !important; animation: slideLeft 1.2s infinite ease-in-out !important; } /* Animate arrow β†’ direction */ @keyframes slideArrowRight { 0% { transform: translateX(0); opacity: 0.8; } 50% { transform: translateX(8px); opacity: 1; } 100% { transform: translateX(0); opacity: 0.8; } } /* Animate arrow ← direction */ @keyframes slideArrowLeft { 0% { transform: translateX(0); opacity: 0.8; } 50% { transform: translateX(-8px); opacity: 1; } 100% { transform: translateX(0); opacity: 0.8; } } /* Optional: subtle position tweak for clarity */ .left-hint { margin-top: 20px; } .introhidden { transform: translateY(-100%); opacity: 0; transition: all 0.6s ease-in-out; } .slide-left { transform: translateX(-100%); transition: transform 0.5s ease; } .slide-right { transform: translateX(100%); transition: transform 0.5s ease; } #introCover { display: none !important; } body[data-intro="show"] #introCover { display: flex !important; } /*#endregion INTRO PANEL LOGIC*/ /*#region CHAT*/ /* πŸ”Ή Chat Icon */ .chat-icon { width: 52px; height: 52px; bottom: 20px; right: 8px; top: 630px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); z-index: 600; position:fixed; } /* πŸ”Ή Chat & Message Containers */ .chat-container, .message-container, #message-chat-container { width: 90vw; /* Full width for mobile */ height: 70vh; /* Increased height to make content visible */ bottom: 60px; right: 5vw; border-radius: 10px; transition: all 0.3s ease; } /* πŸ”Ή Header */ .message-header h2 { font-size: 16px; margin: 0; padding: 10px 0; } /* πŸ”Ή Message Body */ .message-body { padding: 10px; text-align: center; overflow-y: auto; /* scroll if needed */ } .message-body-svg { width: 40px; height: 40px; margin-top: 20px; margin-bottom: 10px; } .message-body h2 { font-size: 15px; margin-top: 10px; } .message-body span { font-size: 13px; color: #555; display: block; margin-top: 6px; } /* πŸ”Ή Send Message Button */ .send-message-btn { font-size: 13px; padding: 6px 12px; border-radius: 16px; margin-top: 20px; } /* πŸ”Ή Footer Tabs */ .chat-footer-tabs, .chat-footer-tabs-message { flex-direction: row; justify-content: space-around; align-items: center; padding: 6px 0; position: absolute; bottom: 0; left: 0; width: 100%; border-top: 1px solid #ccc; background-color: #fff; z-index: 10; } .chat-input-area { margin-top: 80px; } .chat-greeting { margin-top: 90px !important; } .tab-button, .tab-button-message { background: none; border: none; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #444; cursor: pointer; } .tab-button svg, .tab-button-message svg { width: 20px; height: 20px; } .tab-button span, .tab-button-message span { font-size: 12px; } .tab-button-message.active svg path { fill: #1f3a52; } /* πŸ”Ή Message Chat Layout */ .message-chat-header { height: 50px; padding: 8px; } .logo-video-chat { margin-top: 5px !important; } .logo-video-message { align-self: flex-start; transform: translateY(-193px); width: 170px !important; margin-right: -90px; } .logo-video-chat { align-self: flex-start; transform: translateY(-185px); width: 160px; } .close-btn { position: absolute; top: -187px; font-size: 1.8rem; background: none; border: none; color: black; cursor: pointer; z-index: 1010; transform: translate(95px); } .message-chat-body { padding: 12px; max-height: calc(100% - 110px); } .chat-bubble { font-size: 13px; padding: 8px 12px; max-width: 85%; } .message-chat-input { padding: 8px; } .input-wrapper { min-height: 42px; } .input-container { padding: 6px; } .message-chat-input-field { font-size: 13px; } .send-button-input { width: 28px; height: 28px; } /*#endregion CHAT*/ /*#region INTRO PANEL LOGIC*/ .panel { pointer-events: auto !important; position: relative !important; z-index: 20 !important; } .intro-logo { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); width: 150px; z-index: 2; pointer-events: none; } /* Main cover container */ .intro-cover { position: fixed !important; inset: 0 !important; display: flex !important; flex-direction: row !important; overflow-x: auto !important; /* βœ… allow horizontal swipe */ overflow-y: hidden !important; /* βœ… disable vertical scroll */ scroll-snap-type: x mandatory !important; -webkit-overflow-scrolling: touch; width: 100vw !important; height: 100vh !important; scroll-behavior: smooth; background: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%); z-index: 9999 !important; touch-action: pan-x !important; /* βœ… allow finger swipes horizontally */ } /* Ensure this does NOT override the scrollability */ .intro-cover::-webkit-scrollbar { display: none; } .intro-cover { -ms-overflow-style: none; scrollbar-width: none; } /* Panels inside cover */ .intro-cover .panel { flex: 0 0 100vw !important; /* βœ… make sure each takes full viewport width */ width: 100vw !important; height: 100%; scroll-snap-align: start; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 1rem; box-sizing: border-box; z-index: 10 !important; position: relative !important; } .intro-cover .panel img { width: 80%; height: auto; max-height: 250px; object-fit: cover; border-radius: 12px; margin-bottom: 12px; } .intro-cover .panel h1 { font-size: 1.3rem; margin: 0.5rem 0; } .intro-cover .panel p { font-size: 0.9rem; line-height: 1.3; margin-bottom: 0.4rem; } .start-btn { position: relative !important; z-index: 999999 !important; margin-top: 60px; } /* Slide hint (arrow + text) */ /* Common base style for hints */ .slide-hint { display: flex !important; align-items: center; justify-content: center; margin-top: 18px; font-size: 0.9rem; color: #ffffff; opacity: 0.8; gap: 0.3rem; animation: fadeIn 1s ease-in 0.5s forwards; user-select: none; } /* Right swipe hint (default) */ .right-hint .arrow { animation: slideArrowRight 1.2s infinite ease-in-out !important; } /* Left swipe hint (mirrored animation) */ /* Left arrow: same ➜, but visually mirrored */ .left-hint .arrow { display: inline-block !important; transform: scaleX(-1) !important; animation: slideLeft 1.2s infinite ease-in-out !important; } /* Animate arrow β†’ direction */ @keyframes slideArrowRight { 0% { transform: translateX(0); opacity: 0.8; } 50% { transform: translateX(8px); opacity: 1; } 100% { transform: translateX(0); opacity: 0.8; } } /* Animate arrow ← direction */ @keyframes slideArrowLeft { 0% { transform: translateX(0); opacity: 0.8; } 50% { transform: translateX(-8px); opacity: 1; } 100% { transform: translateX(0); opacity: 0.8; } } /* Optional: subtle position tweak for clarity */ .left-hint { margin-top: 20px; } .introhidden { transform: translateY(-100%); opacity: 0; transition: all 0.6s ease-in-out; } .slide-left { transform: translateX(-100%); transition: transform 0.5s ease; } .slide-right { transform: translateX(100%); transition: transform 0.5s ease; } #introCover { display: none !important; } body[data-intro="show"] #introCover { display: flex !important; } /*#endregion INTRO PANEL LOGIC*/ /*#region BACKGROUND*/ .ad-container { transform: translateY(-50%) !important; width: 120px !important; height: 125px !important; min-width: 130px !important; min-height: 130px !important; } .ad-content h3 { font-size: 0.675rem !important; } .ad-content p { font-size: 0.675rem !important; } .section-image { position: relative; background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.25); background-size: cover; background-position: center; background-repeat: no-repeat; width: 100vw; min-height: 100svh; margin-top: -138px; pointer-events: auto; /* ensure it's active */ height: auto; overflow: hidden; z-index: 200; /* πŸ’‘ The magic mask (square hole on the right side) */ -webkit-mask-image: radial-gradient(circle at 50% 25%, transparent 60px, black 90px); mask-image: radial-gradient(circle at 50% 25%, transparent 60px, black 90px); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } .section-image { transition: -webkit-mask-image 0.6s ease-in-out, mask-image 0.6s ease-in-out; } .section-image:hover { -webkit-mask-image: radial-gradient(circle at 50% 25%, transparent 100px, black 130px); mask-image: radial-gradient(circle at 50% 25%, transparent 100px, black 130px); } header { position: fixed !important; /* keep page content from shifting */ top: 0; left: 0; width: 100%; z-index: 1000; box-sizing: border-box; padding-top: 8px; /* small top gap */ padding-bottom: 78px; /* reserve space inside fixed header for logo */ background-color: var(--background-color); } /* Nav: center in header (stay in normal flow so hitboxes match visuals) */ nav { display: flex !important; justify-content: center !important; align-items: center !important; width: 100%; z-index: 1100; pointer-events: auto; } /* Nav links container */ .nav-links { display: flex !important; gap: 0px !important; /* adjust spacing between icons */ margin: 0; padding: 0; list-style: none; justify-content: center; align-items: center; } /* Restore base link layout but make touch-target comfortable */ .nav-links li a { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 6px 6px !important; min-width: 44px !important; /* good mobile tap size */ height: 55px; font-size: 11px; color: var(--text-muted); position: relative; /* keep absolute span relative to this */ margin: 0 !important; /* override negative margin hacks */ } /* Icon size */ .nav-links li a i { font-size: 18px; margin-bottom: 6px; } /* --- IMPORTANT: keep labels hidden until hover (restore base behaviour) --- */ .nav-links li a span { opacity: 0 !important; transform: translateY(8px) !important; transition: all 0.25s cubic-bezier(0.22, 0.61, 0.36, 1) !important; pointer-events: none !important; position: absolute !important; top: 32px !important; white-space: nowrap !important; } /* Label becomes visible on hover (same as your base CSS) */ .nav-links li a:hover span { opacity: 1 !important; transform: translateY(0) !important; pointer-events: auto !important; } /* Center logo under nav β€” absolutely positioned inside the fixed header */ /* Center logo under nav β€” perfectly aligned */ .logo-container { position: absolute !important; /* keep same vertical placement */ left: 50% !important; /* fine-tune centering (was -50%) */ margin: 0 !important; z-index: 500 !important; text-align: center; } .logo-video { width: 180px !important; margin-top: -18px !important; height: auto !important; object-fit: contain !important; } /* Language selector centered above the nav/logo */ .language-container { position: absolute !important; /* sits near top of header */ left: 50% !important; z-index: 1200 !important; /* above nav */ margin: 0 !important; width: auto !important; } .language-select { margin-top: -15px !important; padding: 6px 10px !important; font-size: 10px !important; white-space: nowrap; border-radius: 12px; } /* dropdown menu for services: ensure it doesn't go off-screen */ /* Dropdown menu for mobile */ .dropdown-service-menu { left: 50% !important; transform: translateX(-50%) !important; top: calc(100% + 6px) !important; z-index: 2000 !important; background-color: white !important; /* white background */ border-radius: 12px !important; /* rounded corners */ width: 100px !important; /* almost full width on mobile */ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important; /* subtle shadow */ padding: 8px 0 !important; /* vertical padding */ } /* Dropdown links styling */ .dropdown-service-menu li a { color: #0a4da2 !important; /* readable blue text */ font-size: 14px !important; /* readable font size */ padding: 10px 20px !important; /* tappable area */ display: block; text-decoration: none; transition: background 0.3s ease; } /* Hover effect for dropdown items */ .dropdown-service-menu li a:hover { background-color: #f0f8ff !important; /* subtle highlight */ color: #0a4da2 !important; } /* Defensive override: remove other negative-margin / shift hacks */ .nav-links li a, .language-container { margin-left: 0 !important; margin-top: 0 !important; } .image-overlay { top: 18%; left: 5%; text-align: center; } .h2-container.background-language-content.active { font-size: clamp(10px, 6vw, 26px); /* responsive font size */ line-height: 1.3; /* spacing between lines */ max-width: 95%; /* avoid overflow */ margin: 14px auto 0 auto; /* horizontal centering */ text-align: center; /* center text */ word-break: normal; /* prevent breaking words */ white-space: normal; /* normal wrapping */ transform: translateX(-9%) !important; margin-top: 290px !important; } .b-container { font-size: clamp(10px, 4vw, 20px); width: 80% !important; transform: translateX(-4%) !important; text-align: center !important; /* center text */ word-break: normal !important; /* prevent breaking words */ white-space: normal !important; margin-top: -5px; } .h3-container { font-size: clamp(10px, 5vw, 16px) !important; transform: translate(56%); text-align: left; width: 30% !important; margin-top: 37px !important; } .subscribe-btn { display: flex; justify-content: center; /* horizontal centering */ align-items: center; /* vertical centering */ padding: 0.8rem 2rem; /* controls button size */ width: 100px; margin-left: 225px !important; margin-top: -60px !important; } .subscribe-btn .btn-text { line-height: 1; /* ensures no vertical spacing issues */ font-size: 0.7rem !important; } .container-i { margin-left: 85px !important; top: -410px !important; display: none; } .circle-container-2 { position: relative; width: 40px; height: 40px; top: 335px; left: -56px; } .container-2 { margin-left: 90px !important; margin-top: -20px !important; } .circle-text-container-2 { width: 24%; margin-left: 6px; margin-top: 300px; font-size: 0.85rem; } /* bottom container: absolute at hero bottom, visible above overlays */ .bottom-container { position: absolute !important; bottom: 5px; left: 50%; top:570px; transform: translateX(-50%); width: calc(100% - 32px); /* small page padding */ max-width: 760px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; padding: 10px 12px; box-sizing: border-box; height: 185px !important; } /* default: two items per row */ .bottom-container .counseling-section { flex: 0 0 48%; max-width: 48%; box-sizing: border-box; text-align: center; padding: 6px 8px; } /* center the 3rd item below the two (narrower) */ .bottom-container .counseling-section:nth-child(3) { flex: 0 0 60%; max-width: 60%; margin-left: auto; margin-right: auto; align-self: center; } /* hide empty 4th slot if present */ .bottom-container .counseling-section:nth-child(4) { display: none; } /* small typographic tweaks */ .counseling-section i { font-size: 22px; margin-bottom: 6px; display: block; } .counseling-section h6 { font-size: 13px; margin: 4px 0 6px; } .counseling-section p { font-size: 12px; line-height: 1.3; margin: 0; } .image-slideshow { position: absolute !important; /* make sure it sits behind overlays */ top: 315px !important; left: 0 !important; width: 90vw !important; height: 45vh !important; overflow: hidden !important; z-index: 0 !important; /* keep it behind overlay text/buttons */ } .image-slideshow img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } /* Optional: make sure overlay is above */ .image-overlay { position: relative; z-index: 5 !important; } body header { position: relative !important; top: auto !important; left: auto !important; width: 100% !important; transform: none !important; } /* Force logo and language to follow the section flow */ .logo-container, .language-container { position: absolute !important; top: auto !important; left: 50% !important; transform: translateX(-50%) !important; right: auto !important; bottom: auto !important; } /* Optional β€” fine tune */ .language-container { margin-top: 85px !important; } .logo-container { margin-top: 170px !important; } /*#endregion BACKGROUND*/ /*#region BRIEF*/ /* GLOBAL BRIEF SECTION (Desktop & Mobile Compatible) */ .brief { width: 100%; /* βœ… full width for clean centering */ max-width: 95vw; /* keep same visual width but prevent subpixel shifts */ margin: 0 auto; height: auto !important; min-height: 100vh; z-index: 1; border: none; display: flex !important; flex-direction: column-reverse !important; /* βœ… video first, text second */ align-items: center !important; /* βœ… ensures horizontal centering */ justify-content: flex-start !important; /* top alignment */ padding: 20px; text-align: center; gap:0px !important; } .brief.pinned { position: fixed; top:-20px !important; left: 50%; transform: translateX(-50%); width: 92%; height: auto !important; min-height: 100svh; z-index: 0; display: flex !important; flex-direction: column; align-items: center !important; justify-content: flex-start !important; pointer-events: none; overflow: visible; } /* Neutralize layout reflows */ .brief-wrapper, .section-image { overflow: visible !important; transform: none !important; } .brief.pinned * { pointer-events: auto; } .brief-wrapper{ min-height:80px; } .brief-heading { font-size: 1.4rem; } .centered-content { margin-left: -20; transform: translateY(-90px) !important; max-width: 98% !important; text-align: center; position: relative; z-index: 3; } .centered-content p { line-height: 24px !important; font-size: 15px !important; } /* 🎯 The key block β€” ensures the video sits dead-center */ /* 🎯 The key block β€” ensures the video sits dead-center */ .video-container { width: 90vw !important; aspect-ratio: 16 / 9 !important; /* maintain ratio */ height: auto !important; top: -198px !important; /* βœ… adds space above */ } .video-container video { width: 100%; height: auto; object-fit: cover; border-radius: 10px; display: block !important; } .container-j, .container-k { display: none !important; visibility: hidden !important; position: absolute !important; width: 0 !important; height: 0 !important; } .scroll-cue { bottom: 10px; } /*#endregion BRIEF*/ /*#region WHO WE ARE*/ .crisis{ text-align: center !important; margin: 0 auto; width: 100%; } .who-we-are-section { flex-direction: column; height: auto; padding: 1rem; align-items: center; /* βœ… ensure the full content centers */ } .who-we-are-image { width: 100%; max-width: 420px; /* keeps it tidy */ margin: 0 auto; display: flex; /* βœ… enable centering context */ justify-content: center; /* βœ… center horizontally */ align-items: center; /* βœ… center vertically if there's extra height */ position: relative; } .who-we-are-image video { width: 420px; height: 320px; border-radius: 20px !important; object-fit: cover; display: block; /* βœ… ensures no inline spacing issues */ margin: 0 auto; /* βœ… fallback centering */ } .who-we-are-content { width: 100%; margin: 1.5rem auto 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; /* βœ… Reset inherited offsets */ margin-right: 0 !important; margin-left: 0 !important; } .who-we-are-content h2 { font-size: 24px; text-align: center; margin-bottom: 10px; margin-left: 0 !important; /* βœ… reset inherited shift */ } .who-we-are-content>p { font-size: 0.98rem !important; max-width: 95% !important; margin: 0 auto 1.5rem; text-align: center; line-height: 1.5; } .card-container { flex-direction: column; align-items: center; } .card-box { width: 60% !important; height: auto; align-items: center; left: 0 !important; /* βœ… Reset the negative offset */ margin: 0 auto !important; /* βœ… Center horizontally */ } .container-n { position: absolute; display: flex; flex-direction: column; align-items: center; left: -85px; top: -125px; animation: heartbeat 3.3s infinite; z-index: 1; } .container-m { position: absolute; display: flex; flex-direction: column; align-items: center; left: -27px; top: -220px; animation: heartbeat 3.3s infinite; z-index: 1; } .container-o { position: absolute; display: none; flex-direction: column; align-items: center; left: -150px; top: -240px; animation: heartbeat 3.3s infinite; z-index: 1; } .container-n, .container-o { pointer-events: none; /* allows clicks to reach the video underneath */ } .read-more-container .read-more-btn .btn-who { font-size: 1em !important; } /*#endregion WHO WE ARE*/ /*#region RESULT SECTION*/ .result { height: 1000px; padding: 2rem 1rem; /*width: 100%;*/ } .result-content { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 40px; /* increased from 30px to 40px */ } .self-check-container { display: flex; flex-direction: column; align-items: center; justify-content: center; margin-top: 110px !important; margin-bottom: 35px; /* added spacing below before the image */ padding: 0 10px; } /* RIGHT SECTION */ .right { width: 100% !important; height: auto !important; display: none !important;/*The display of this will be for new update*/ flex-direction: column; align-items: center; justify-content: center; margin-top: 420px; margin-bottom: 40px; gap: 25px; position: relative; } /* IMAGE AREA (fully contained and properly aligned) */ .image-div { position: relative; width: 90%; /* keeps image area balanced */ overflow: hidden; /* ensures image does NOT overflow */ display: flex; justify-content: center; } .image-div img { width: 190% !important; /* increases visible width but stays inside */ margin-left: -15%; /* shifts it slightly left */ margin-top: 30px; height: 270px !important; border-radius: 12px; object-fit: cover; transition: all 0.3s ease; } .announcement { width: 290px; } /* QUOTE AREA */ .quote-div { position: relative; top: 85px; width: 85%; max-width: 700px; max-height: 200px; /* Set max height for scrolling */ margin: 0 auto; padding: 10px 0; text-align: center; overflow-y: auto; /* Enable vertical scrolling */ background: rgba(0, 0, 0, 0.3); /* Optional: dark overlay */ border-radius: 8px; /* Optional: rounded corners */ } /* Quote text inside scrollable container */ #personal_quote { font-size: 0.85rem !important; font-weight: 400 !important; line-height: 1.7 !important; color: #F0F0F0; margin: 0 auto !important; text-align: center !important; width: 100% !important; max-width: 480px !important; padding: 0 20px !important; word-wrap: break-word !important; overflow-wrap: break-word !important; white-space: normal !important; box-sizing: border-box; } #mood-summary-option { box-sizing: border-box; width: 90%; /* or use 100% to fill parent */ max-width: 280px; /* adjust width cap */ min-width: 200px; padding: 10px 14px; border-radius: 6px; border: 1px solid #ccc; font-size: 15px; background-color: #fff; text-align: center; appearance: none; cursor: pointer; } /* Optional: if the dropdown list appears narrower than select */ #mood-summary-option option { width: 100%; text-align: center; white-space: nowrap; } .result-header h2 { font-size: 1.6rem; } .result-content h1 { font-size: 3rem; } .stat span { font-size: 2rem; } .left-new-section { width: 100%; margin-top: 210px !important; height:100% !important; } .new-content-container { height: 650px !important; /* fixed viewport height so it doesn’t stretch layout */ overflow-y: auto; /* enable vertical scroll */ overflow-x: hidden; scrollbar-width: thin; /* for Firefox */ scrollbar-color: #ccc transparent; padding-right: 8px; /* prevent text cutoff due to scrollbar */ scroll-behavior: smooth; } /* Optional: custom scrollbar for WebKit (Chrome/Safari/Edge) */ .new-content-container::-webkit-scrollbar { width: 6px; } .new-content-container::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, 0.3); border-radius: 4px; } .new-content-container::-webkit-scrollbar-thumb:hover { background-color: rgba(0, 0, 0, 0.45); } .banner { height: 115px; font-size: 12px; max-width: 95%; text-align: center; } .right { transform: translateX(2.5%); /* small left shift to visually center */ } /* Ensure image centering isn't overcompensated */ .image-div img { margin-left: -5% !important; /* was -15%, slight left shift only */ } /*#endregion RESULT SECTION*/ /*#region QUOTES*/ .fun{ min-height: 90vh; /* ensures at least one screen height */ height: auto; /* expands with content automatically */ margin-top:-2px !important; } .fun-heading-container { margin-bottom: 20px; /* space between "Do you know?" and quotes */ } .content-gallery-container { flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; gap: 35px; } /* Center text area */ .content-gallery-container .content { width: 100%; max-width: 90%; padding: 10px 0; } /* Gallery below text */ .content-gallery-container .gallery { width: 100%; display: flex; justify-content: center; align-items: center; } /* βœ… Fixed container height to prevent clipping */ .image-container { position: relative; width: 100%; max-width: 400px; height: 360px !important; /* keep consistent visual height */ overflow: hidden; } /* βœ… Keep all images absolutely positioned in same spot */ .gallery-image { position: absolute !important; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; max-width: 320px; height: 350px; opacity: 0; transition: opacity 1s ease-in-out; } /* βœ… Only active image visible */ .gallery-image.active { opacity: 1; } /* βœ… Pinned section height consistent */ .fun.pinned { height: 750px !important; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; border-radius: 0; overflow: hidden; top: 20px; } /* Keep quotes visible, properly spaced and centered */ .quote-container { position: relative; height: auto; /* allow it to grow naturally */ margin-top: 15px; /* space between heading and quote */ display: flex; justify-content: center; align-items: center; padding: 0 10px; /* a little side padding */ text-align: center; } /* Each quote stays centered and consistent */ .quote { position: absolute; opacity: 0; transition: opacity 1s ease-in-out; max-width: 85%; /* responsive width that wraps nicely */ line-height: 1.5; color: var(--fun-white); font-size: 1.05rem !important; text-align: center; margin: 0 auto; } /* Active quote fades in */ .quote.active { opacity: 1; position: relative; /* becomes flow element when visible */ } /*#endregion QUOTES*/ /*#region CONSULT*/ .consult { min-height: 100vh; /* ensures at least one screen height */ height: auto; /* expands with content automatically */ padding: 20px 0; } .text-side { font-size: 26px; margin-left: 20px !important; margin-top: 80px; } .serif { font-size: 38px; margin-left: 20px; } .intro-text { font-size: 16px; margin: 10px 20px; max-width: 100%; } .consult-container { position: relative; width: 70%; height: 280px; margin: 20px auto; top: -10px; } .consult-container .image-box { margin: 0 auto; width: 220px; height: 300px; } .consult-container .text-box { margin: 20px auto; margin: 20px auto; width: 95% !important; height: 240px !important; left: 58px; top: -280px; font-size: 10px; height: 240px !important; left: 58px; top: -280px; font-size: 9px; } .btn-text { font-size: 12px; } /* βœ… FIX: Make keyword grid horizontal */ .keyword-grid { display: flex !important; flex-direction: row !important; /* horizontal layout */ justify-content: center !important; /* center across width */ align-items: flex-start !important; flex-wrap: nowrap !important; /* keep in one row */ gap: 5px !important; margin: 20px auto !important; width: 100%; } /* βœ… Ensure each column fits neatly side-by-side */ .keyword-grid .column { display: flex !important; flex-direction: column; align-items: center !important; gap: 10px; flex: 1; /* equal width columns */ } /* βœ… Adjust keyword buttons for mobile readability */ .keyword-button { font-size: 12px !important; padding: 6px 10px !important; text-align: center !important; min-width: 80px; } /*#endregion CONSULT*/ /*#region THERAPHY*/ .cards-section { display: flex; flex-wrap: wrap; /* allow wrapping for rows */ justify-content: center; /* center cards horizontally */ gap: 20px; /* nice spacing between cards */ width: 100%; padding: 20px 0; margin: 0 auto; } .card { width: 45%; /* two cards per row */ height: 240px !important; margin-bottom: 20px; } .cards-section .header h2 { font-size: 1.6rem !important; } .card-text h2 { font-size: 1.4rem; } .card-image img { height: auto; /* let it shrink proportionally */ max-height: 240px; /* keep inside card */ margin-top: 0; /* reset push */ object-fit: contain; } /*#endregion THERAPY*/ /*#region WHO WE ARE1*/ .who-we-are-section1 { display: flex; flex-direction: column; align-items: center; /* βœ… Center horizontally */ justify-content: center; /* βœ… Center vertically if there's room */ text-align: center; /* βœ… Center text alignment */ padding: 1.5rem; width: 100%; height: auto; margin: 0 auto; /* βœ… Ensure full centering */ box-sizing: border-box; } .image-card-container { display: grid; grid-template-columns: 1fr; width: 100%; max-width: 480px; /* βœ… Keep content balanced on small screens */ margin: 0 auto; justify-items: center; /* βœ… Center the image cards */ gap: 1rem; } .who-we-are-content1 { margin-top: 20px; padding: 0 0.1rem; /* βœ… Equal space left and right */ max-width: 480px; width: 100%; box-sizing: border-box; text-align: center; } .who-we-are-content1 h2 { font-size: 24px; line-height: 1.4; margin-bottom: 0.5rem; } .who-we-are-text-bg p { text-align: left; } .card-container2, .read-more-container2 { display: flex; justify-content: center; /* βœ… Center those buttons and cards */ } .container-m{ left:-130px; } /*#endregion WHO WE ARE*/ /*#region CHOOSE*/ .choose { } .why-section-container { flex-direction: column; align-items: center; /* center horizontally */ justify-content: center; padding: 20px; gap: 20px; text-align: center; } .vertical-divider { display: none; } .why-section-left, .why-section-center, .why-section-right { max-width: 100%; padding: 10px 0; } .why-section-left h1 { font-size: 2rem; text-align: center; } /* βœ… Fix list items */ /* Ensure parent (the list) aligns properly */ .why-section-list { display: flex; flex-direction: column; align-items: flex-start; /* βœ… Align list items left */ justify-content: center; text-align: left; margin: 0 auto; /* Keeps the list block centered horizontally */ width: fit-content; /* Prevents full-width centering weirdness */ } /* Fix each list item layout */ .why-section-list li { display: flex; align-items: flex-start; /* Align icon and text properly */ justify-content: flex-start; /* βœ… Text stays left of icon */ text-align: left; gap: 8px; /* space between icon and text */ white-space: normal; overflow: visible; } /* Optional: Adjust icon size and vertical alignment */ .why-section-list li i { font-size: 1.1rem; margin-top: 3px; } .info-block .heading1 { font-size: 50px; } .info-block p { font-size: 0.98rem; max-width: 100%; /* take full width available */ margin: 0 auto; /* center horizontally */ text-align: center; } /*#endregion CHOOSE*/ /*#region BLOG*/ .blog { padding: 2rem 0; /* remove side padding */ } .blog .result-header h2 { font-size: 1.8rem; } .profile-cards { display: flex; flex-direction: column; align-items: center; gap: 2rem; } .profile-card { width: 100%; text-align: center; } .profile-image img { height: 180px; } .profile-content h3 { font-size: 1.1rem; } .profile-content p { font-size: 0.9rem; } /*#endregion BLOG*/ /*#region MEDITATION*/ .meditation-section { padding: 40px 15px; border-radius: 25px; text-align: center; } .med-carousel-wrapper { width: 100%; display: flex; justify-content: center; align-items: center; position: relative; } .med-prev-btn, .med-next-btn { position: absolute; top: 50%; transform: translateY(-50%); font-size: 1.5rem; background: rgba(30, 41, 59, 0.8); color: #fff; border: none; border-radius: 50%; width: 35px; height: 35px; cursor: pointer; display: flex; justify-content: center; align-items: center; z-index: 5; } .med-prev-btn { left: 10px; } .med-next-btn { right: 10px; } .med-carousel-container { width: 100%; max-width: 480px; margin: 0 auto; overflow: hidden; position: relative; } .track-slide { display: flex; flex-direction: column; align-items: center; gap: 1.2rem; padding: 10px 0; transition: transform 0.5s ease; height: auto !important; min-height: auto !important; } .track { width: 90%; max-width: 400px; background: rgba(255, 255, 255, 0.05); border-radius: 16px; padding: 10px; box-sizing: border-box; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); text-align: left; height: auto !important; min-height: 360px !important; } .track-image { width: 100%; height: 180px; border-radius: 12px; overflow: hidden; position: relative; } .thumbnail-video { width: 100%; height: 100%; object-fit: cover; display: block; } .play-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 1.5rem; color: white; background: rgba(0, 0, 0, 0.6); border-radius: 50%; padding: 10px; cursor: pointer; } .track-info p { margin-top: 10px; color: white !important; line-height: 1.5; } .track-info h3 { font-size: 1.1rem; margin-bottom: 4px; color: white !important; } .track-categories { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; } .category { background: rgba(255, 255, 255, 0.15); padding: 3px 7px; border-radius: 8px; font-size: 0.75rem; color: white !important; } .meditation-heading { font-size: 1.5rem; margin-bottom: 10px; } .meditation-subtext { font-size: 0.9rem; line-height: 1.5; max-width: 440px; margin: 0 auto 20px; } /*#endregion MEDITATION*/ /*#region FEATURES*/ #features { padding: 35px 25px; border-radius: 25px; } .features-heading { font-size: 1.2rem; } .result-header h2 { font-size: 1.6rem; } .result-header p { font-size: 0.95rem; } .features-box img { max-height: 240px; } .carousel-inner .row { flex-direction: column; gap: 18px; padding: 0 10px; } .custom-carousel-control-prev { transform: translateX(20px); } .custom-carousel-control-next { transform: translateX(610%); } .book-session, .more-resources { font-size: 0.7rem; padding: 7px 10px; } .book-session .arrow-icon, .more-resources .arrow-icon { width: 22px; height: 22px; } /*#endregion FEATURES*/ /*#region SPOTLIGHT*/ .split-container { position: relative; display: flex !important; flex-direction: column !important; justify-content: center !important; /* Center vertically within mobile viewport */ align-items: center !important; /* Center horizontally */ width: 100%; min-height: 430px; /* Maintain visual space */ overflow: visible; /* Prevent layout shifts during animation */ margin-top: 270px !important; /* Preserve your desired vertical offset */ margin-left: 16px !important; transform: translate(-10px); } /* Stack content vertically */ /* πŸ”₯ Key fix: overlays stay absolutely stacked */ .inner-overlay { position: absolute !important; top: 0; left: 50%; transform: translateX(-50%); width: 95%; height: auto; margin: 0 auto; opacity: 0; transition: opacity 0.5s ease-in-out; } /* Hide decorative lines */ .vertical-lines { display: none !important; } /* Center the image properly */ .circle-placeholder { position: relative; margin: 0 auto 20px auto; width: 140px; height: 140px; transform: translate(-80px) !important; } /* Text section directly beneath image */ .text-container { margin: 0 auto; text-align: center; width: 90%; max-width: 400px; margin-top: 45px !important; } .text-container .name { font-size: 1rem; } .text-container h2.title { font-size: 1.1rem; margin-bottom: 6px; } .text-container .review { font-size: 0.9rem; line-height: 1.5; } /* Social icons in a horizontal row */ .social-media-icons { display: flex; flex-direction: row; /* βœ… Horizontal alignment */ align-items: center; justify-content: center; gap: 16px; margin-top: 20px; width: 100%; transform: translate(-40px) !important; } /* Icon + text vertically aligned */ .social-column { display: flex; flex-direction: column; align-items: center; text-align: center; } .social-column .social-icon { font-size: 1.2rem; padding: 10px; } .social-column p { font-size: 0.8rem; margin-top: 6px; } .circle-placeholder img { width: 100%; height: 100%; object-fit: cover; /* keeps proportions but fills the circle */ border-radius: 50%; /* makes it circular */ display: block; border: 3px solid white; /* optional aesthetic touch */ } /* βœ… Show the container again */ /* βœ… Keep the vertical-lines container visible but contained */ /* Keep vertical-lines visible but neutral */ .vertical-lines { display: flex !important; align-items: center; justify-content: center; position: relative !important; width: 100%; margin: 0 auto; padding: 0; background: transparent; } /* Hide decorative vertical lines only */ .vertical-lines .line { display: none !important; } /* βœ… Circle image floats visually into the container */ .vertical-lines .circle-placeholder { position: absolute !important; /* place relative to split-container */ top: -70px; /* slightly overlap inner-overlay */ left: 50%; transform: translateX(-50%); /* center horizontally */ width: 120px; height: 120px; z-index: 3; } .vertical-lines .circle-placeholder img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; border: 3px solid white; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); } /* Adjust content inside inner overlay so it doesn’t collide */ .inner-overlay { margin-top: 70px; /* gives room for image overlap */ } /* Optional fine-tune for text layout */ .text-container { margin-top: 10px; } /*#endregion SPOTLIGHT*/ /*#region ADVERT*/ #advert-section { min-height: 170vh; /* ensures full screen coverage */ height: auto; /* expands with content */ padding: 35px 15px; } .advert-layout { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 25px; } /* Fix the hidden image container issue */ .advert-container { width: 100%; height: auto; min-height: 490px; /* βœ… keeps section visible even before image loads */ display: flex; flex-direction: column; align-items: center; justify-content: center; } .advert-left { width: 100%; } .advert-box { width: 95%; height: auto; display: flex; flex-direction: column; align-items: center; gap: 15px; } .advert-box img { width: 85%; height: auto; max-height: 250px; object-fit: cover; display: block; /* βœ… ensures image displays */ } .text-right-side { width: 90%; text-align: center; margin-top: 20px; } .text-right-side h2 { font-size: 1.5rem; } .text-right-side p { font-size: 0.88rem; } .text-right-side .underline { width: 200px; margin: 10px auto; } /*#endregion ADVERT*/ /*#region RANGER*/ .ranger-wrapper { width: 100% !important; /* ensures it spans full width */ display: flex !important; justify-content: center !important; /* centers the content inside */ background: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%) !important; } #ranger-section { width: 90% !important; /* increase width from typical 70–80% to 90% */ max-width: 1600px !important; /* optional cap for large screens */ margin: 0 auto !important; text-align: center !important; } .global-reach { font-size: 1.2rem; } .value { font-size: 2.0rem; } .word { font-size: 0.85rem; } .rolling-container { font-size: 2.2rem; } /*#endregion RANGER*/ /*#region MOTIVATION*/ .motivational-messages p { font-size: 1.2rem; color: white !important; } .track-info p { color: white !important; } .track-info h3 { color: white !important; } .track-categories .category { color: white !important; } /*#endregion MOTIVATION*/ /*#region FAQ*/ #faq { width: 100%; } .faq-wrapper{ width: 100%!important; } .faq-title { font-size: 0.95rem; width: 95% } .faq-question { font-size: 0.85rem; } .faq-answer { font-size: 0.85rem; } /*#endregion FAQ*/ /*#region FOOTER*/ .custom_footer_top { position: relative; padding: 60px 25px; overflow-x: visible; box-sizing: border-box; } .custom_footer_top .row { flex-wrap: wrap; justify-content: center; gap: 40px; /* Slightly tighter spacing for smaller screens */ } /* βœ… Center the social media icons cleanly */ .f_social_icon { display: flex; justify-content: center; align-items: center; gap: 16px; margin-top: 20px; width: 100%; text-align: center; } .f_social_icon a { font-size: 22px; color: white; transition: all 0.3s ease; } .f_social_icon a:hover { color: #00bcd4; transform: scale(1.1); } .col-md-6, .col-lg-3 { flex: 0 0 100%; max-width: 100%; } .f_widget h3 { text-align: center; } .f_widget .f_list { text-align: center; } /* βœ… Full-width subfooter with vertical stacking */ .subfooter { position: relative; left: 0; right: 0; width: 100%; max-width: none; margin: 0 auto; padding: 45px 35px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 35px; background-color: #1f3a52; border-radius: 10px; box-sizing: border-box; overflow: visible; } /* βœ… Left section (text + logo) */ .subfooter-left { width: 100%; text-align: center; align-items: center; transform: translateX(17%) !important; } /* βœ… Right section (subscribe + video) */ .subfooter-right { width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 25px; margin-top: 20px; } /* βœ… Subscribe section centered */ .subscribe-container { width: 70% !important; text-align: center !important; margin: 0 auto !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; left: 0 !important; right: 0 !important; } .subscribe-form { flex-direction: column; align-items: center; justify-content: center; } .email-input { width: 90% !important; margin-bottom: 10px; } .subf1-button { width: 170px !important; height: 46px; font-size: 0.9rem; } /* βœ… Video responsive and centered */ .image-placeholder1 video { width: 220px !important; height: 220px !important; border-radius: 12%; margin-top: 18px; display: block; object-fit: cover; transform: translate(-7%); /* Keep perfectly centered */ } /* βœ… Typography */ .about-subtext, .serif-f { font-size: 2rem !important; line-height: 1.2; } .privacy-statement { text-align: center; font-size: 0.98rem; margin-top: 8px; } .quick_links_widget { margin-top: 60px !important; } /* βœ… Back-to-top button alignment */ .top { right: 15px; bottom: 15px; } .subfooter-right { width: 100% !important; transform: none !important; margin-top: 0 !important; justify-content: center !important; align-items: center !important; } .subscribe-container { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center !important; margin: 0 auto 25px auto !important; position: relative !important; left: 0 !important; right: 0 !important; transform: none !important; } .image-placeholder1 { display: flex !important; justify-content: center !important; align-items: center !important; width: 100% !important; margin: 0 auto !important; transform: none !important; left: 0 !important; right: 0 !important; position: relative !important; } /*#endregion FOOTER*/ } /* Medium phones (iPhone 12–15) */ @media (min-width: 420px) and (max-width: 599px) { /*#region INTRO PANEL LOGIC*/ .panel { pointer-events: auto !important; position: relative !important; z-index: 20 !important; } .intro-logo { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); width: 150px; z-index: 2; pointer-events: none; } /* Main cover container */ .intro-cover { position: fixed !important; inset: 0 !important; display: flex !important; flex-direction: row !important; overflow-x: auto !important; /* βœ… allow horizontal swipe */ overflow-y: hidden !important; /* βœ… disable vertical scroll */ scroll-snap-type: x mandatory !important; -webkit-overflow-scrolling: touch; width: 100vw !important; height: 100vh !important; scroll-behavior: smooth; background: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%); z-index: 9999 !important; touch-action: pan-x !important; /* βœ… allow finger swipes horizontally */ } /* Ensure this does NOT override the scrollability */ .intro-cover::-webkit-scrollbar { display: none; } .intro-cover { -ms-overflow-style: none; scrollbar-width: none; } /* Panels inside cover */ .intro-cover .panel { flex: 0 0 100vw !important; /* βœ… make sure each takes full viewport width */ width: 100vw !important; height: 100%; scroll-snap-align: start; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 1rem; box-sizing: border-box; z-index: 10 !important; position: relative !important; } .intro-cover .panel img { width: 80%; height: auto; max-height: 250px; object-fit: cover; border-radius: 12px; margin-bottom: 12px; } .intro-cover .panel h1 { font-size: 1.3rem; margin: 0.5rem 0; } .intro-cover .panel p { font-size: 0.9rem; line-height: 1.3; margin-bottom: 0.4rem; } .start-btn { position: relative !important; z-index: 999999 !important; margin-top: 60px; } /* Slide hint (arrow + text) */ /* Common base style for hints */ .slide-hint { display: flex !important; align-items: center; justify-content: center; margin-top: 18px; font-size: 0.9rem; color: #ffffff; opacity: 0.8; gap: 0.3rem; animation: fadeIn 1s ease-in 0.5s forwards; user-select: none; } /* Right swipe hint (default) */ .right-hint .arrow { animation: slideArrowRight 1.2s infinite ease-in-out !important; } /* Left swipe hint (mirrored animation) */ /* Left arrow: same ➜, but visually mirrored */ .left-hint .arrow { display: inline-block !important; transform: scaleX(-1) !important; animation: slideLeft 1.2s infinite ease-in-out !important; } /* Animate arrow β†’ direction */ @keyframes slideArrowRight { 0% { transform: translateX(0); opacity: 0.8; } 50% { transform: translateX(8px); opacity: 1; } 100% { transform: translateX(0); opacity: 0.8; } } /* Animate arrow ← direction */ @keyframes slideArrowLeft { 0% { transform: translateX(0); opacity: 0.8; } 50% { transform: translateX(-8px); opacity: 1; } 100% { transform: translateX(0); opacity: 0.8; } } /* Optional: subtle position tweak for clarity */ .left-hint { margin-top: 20px; } .introhidden { transform: translateY(-100%); opacity: 0; transition: all 0.6s ease-in-out; } .slide-left { transform: translateX(-100%); transition: transform 0.5s ease; } .slide-right { transform: translateX(100%); transition: transform 0.5s ease; } #introCover { display: none !important; } body[data-intro="show"] #introCover { display: flex !important; } /*#endregion INTRO PANEL LOGIC*/ /*#region CHAT*/ /* πŸ”Ή Chat Icon */ .chat-icon { width: 52px; height: 52px; bottom: 20px; right: 8px; top: 620px !important; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); z-index: 600; } /* πŸ”Ή Chat & Message Containers */ .chat-container, .message-container, #message-chat-container { width: 90vw; /* Full width for mobile */ height: 70vh; /* Increased height to make content visible */ bottom: 60px; right: 5vw; border-radius: 10px; transition: all 0.3s ease; } /* πŸ”Ή Header */ .message-header h2 { font-size: 16px; margin: 0; padding: 10px 0; } /* πŸ”Ή Message Body */ .message-body { padding: 10px; text-align: center; overflow-y: auto; /* scroll if needed */ } .message-body-svg { width: 40px; height: 40px; margin-top: 20px; margin-bottom: 10px; } .message-body h2 { font-size: 15px; margin-top: 10px; } .message-body span { font-size: 13px; color: #555; display: block; margin-top: 6px; } /* πŸ”Ή Send Message Button */ .send-message-btn { font-size: 13px; padding: 6px 12px; border-radius: 16px; margin-top: 20px; } /* πŸ”Ή Footer Tabs */ .chat-footer-tabs, .chat-footer-tabs-message { flex-direction: row; justify-content: space-around; align-items: center; padding: 6px 0; position: absolute; bottom: 0; left: 0; width: 100%; border-top: 1px solid #ccc; background-color: #fff; z-index: 10; } .chat-input-area { margin-top: 80px; } .chat-greeting { margin-top: 90px !important; } .tab-button, .tab-button-message { background: none; border: none; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #444; cursor: pointer; } .tab-button svg, .tab-button-message svg { width: 20px; height: 20px; } .tab-button span, .tab-button-message span { font-size: 12px; } .tab-button-message.active svg path { fill: #1f3a52; } /* πŸ”Ή Message Chat Layout */ .message-chat-header { height: 50px; padding: 8px; } .logo-video-chat { margin-top: 5px !important; } .logo-video-message { align-self: flex-start; transform: translateY(-193px); width: 170px !important; margin-right: -90px; } .logo-video-chat { align-self: flex-start; transform: translateY(-185px); width: 160px; } .close-btn { position: absolute; top: -187px; font-size: 1.8rem; background: none; border: none; color: black; cursor: pointer; z-index: 1010; transform: translate(95px); } .message-chat-body { padding: 12px; max-height: calc(100% - 110px); } .chat-bubble { font-size: 13px; padding: 8px 12px; max-width: 85%; } .message-chat-input { padding: 8px; } .input-wrapper { min-height: 42px; } .input-container { padding: 6px; } .message-chat-input-field { font-size: 13px; } .send-button-input { width: 28px; height: 28px; } /*#endregion CHAT*/ /*#region INTRO PANEL LOGIC*/ .panel { pointer-events: auto !important; position: relative !important; z-index: 20 !important; } .intro-logo { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); width: 150px; z-index: 2; pointer-events: none; } /* Main cover container */ .intro-cover { position: fixed !important; inset: 0 !important; display: flex !important; flex-direction: row !important; overflow-x: auto !important; /* βœ… allow horizontal swipe */ overflow-y: hidden !important; /* βœ… disable vertical scroll */ scroll-snap-type: x mandatory !important; -webkit-overflow-scrolling: touch; width: 100vw !important; height: 100vh !important; scroll-behavior: smooth; background: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%); z-index: 9999 !important; touch-action: pan-x !important; /* βœ… allow finger swipes horizontally */ } /* Ensure this does NOT override the scrollability */ .intro-cover::-webkit-scrollbar { display: none; } .intro-cover { -ms-overflow-style: none; scrollbar-width: none; } /* Panels inside cover */ .intro-cover .panel { flex: 0 0 100vw !important; /* βœ… make sure each takes full viewport width */ width: 100vw !important; height: 100%; scroll-snap-align: start; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 1rem; box-sizing: border-box; z-index: 10 !important; position: relative !important; } .intro-cover .panel img { width: 80%; height: auto; max-height: 250px; object-fit: cover; border-radius: 12px; margin-bottom: 12px; } .intro-cover .panel h1 { font-size: 1.3rem; margin: 0.5rem 0; } .intro-cover .panel p { font-size: 0.9rem; line-height: 1.3; margin-bottom: 0.4rem; } .start-btn { position: relative !important; z-index: 999999 !important; margin-top: 60px; } /* Slide hint (arrow + text) */ /* Common base style for hints */ .slide-hint { display: flex !important; align-items: center; justify-content: center; margin-top: 18px; font-size: 0.9rem; color: #ffffff; opacity: 0.8; gap: 0.3rem; animation: fadeIn 1s ease-in 0.5s forwards; user-select: none; } /* Right swipe hint (default) */ .right-hint .arrow { animation: slideArrowRight 1.2s infinite ease-in-out !important; } /* Left swipe hint (mirrored animation) */ /* Left arrow: same ➜, but visually mirrored */ .left-hint .arrow { display: inline-block !important; transform: scaleX(-1) !important; animation: slideLeft 1.2s infinite ease-in-out !important; } /* Animate arrow β†’ direction */ @keyframes slideArrowRight { 0% { transform: translateX(0); opacity: 0.8; } 50% { transform: translateX(8px); opacity: 1; } 100% { transform: translateX(0); opacity: 0.8; } } /* Animate arrow ← direction */ @keyframes slideArrowLeft { 0% { transform: translateX(0); opacity: 0.8; } 50% { transform: translateX(-8px); opacity: 1; } 100% { transform: translateX(0); opacity: 0.8; } } /* Optional: subtle position tweak for clarity */ .left-hint { margin-top: 20px; } .introhidden { transform: translateY(-100%); opacity: 0; transition: all 0.6s ease-in-out; } .slide-left { transform: translateX(-100%); transition: transform 0.5s ease; } .slide-right { transform: translateX(100%); transition: transform 0.5s ease; } #introCover { display: none !important; } body[data-intro="show"] #introCover { display: flex !important; } /*#endregion INTRO PANEL LOGIC*/ /*#region BACKGROUND*/ .ad-container { transform: translateY(-50%) !important; width: 120px !important; height: 125px !important; min-width: 130px !important; min-height: 130px !important; } .ad-content h3 { font-size: 0.675rem !important; } .ad-content p { font-size: 0.675rem !important; } .section-image { position: relative; background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.25); background-size: cover; background-position: center; background-repeat: no-repeat; width: 100vw; min-height: 100svh; margin-top: -138px; pointer-events: auto; /* ensure it's active */ height: auto; overflow: hidden; z-index: 200; /* πŸ’‘ The magic mask (square hole on the right side) */ -webkit-mask-image: radial-gradient(circle at 50% 25%, transparent 60px, black 90px); mask-image: radial-gradient(circle at 50% 25%, transparent 60px, black 90px); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } .section-image { transition: -webkit-mask-image 0.6s ease-in-out, mask-image 0.6s ease-in-out; } .section-image:hover { -webkit-mask-image: radial-gradient(circle at 50% 25%, transparent 100px, black 130px); mask-image: radial-gradient(circle at 50% 25%, transparent 100px, black 130px); } header { position: fixed !important; /* keep page content from shifting */ top: 0; left: 0; width: 100%; z-index: 1000; box-sizing: border-box; padding-top: 8px; /* small top gap */ padding-bottom: 78px; /* reserve space inside fixed header for logo */ background-color: var(--background-color); } /* Nav: center in header (stay in normal flow so hitboxes match visuals) */ nav { display: flex !important; justify-content: center !important; align-items: center !important; width: 100%; z-index: 1100; pointer-events: auto; } /* Nav links container */ .nav-links { display: flex !important; gap: 0px !important; /* adjust spacing between icons */ margin: 0; padding: 0; list-style: none; justify-content: center; align-items: center; } /* Restore base link layout but make touch-target comfortable */ .nav-links li a { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 6px 6px !important; min-width: 44px !important; /* good mobile tap size */ height: 55px; font-size: 11px; color: var(--text-muted); position: relative; /* keep absolute span relative to this */ margin: 0 !important; /* override negative margin hacks */ } /* Icon size */ .nav-links li a i { font-size: 18px; margin-bottom: 6px; } /* --- IMPORTANT: keep labels hidden until hover (restore base behaviour) --- */ .nav-links li a span { opacity: 0 !important; transform: translateY(8px) !important; transition: all 0.25s cubic-bezier(0.22, 0.61, 0.36, 1) !important; pointer-events: none !important; position: absolute !important; top: 32px !important; white-space: nowrap !important; } /* Label becomes visible on hover (same as your base CSS) */ .nav-links li a:hover span { opacity: 1 !important; transform: translateY(0) !important; pointer-events: auto !important; } /* Center logo under nav β€” absolutely positioned inside the fixed header */ /* Center logo under nav β€” perfectly aligned */ .logo-container { position: absolute !important; /* keep same vertical placement */ left: 50% !important; /* fine-tune centering (was -50%) */ margin: 0 !important; z-index: 500 !important; text-align: center; } .logo-video { width: 180px !important; top: 25px !important; height: auto !important; object-fit: contain !important; } /* Language selector centered above the nav/logo */ .language-container { position: absolute !important; /* sits near top of header */ left: 50% !important; z-index: 1200 !important; /* above nav */ margin: 0 !important; width: auto !important; } .language-select { margin-top: 10px !important; padding: 6px 10px !important; font-size: 10px !important; white-space: nowrap; border-radius: 12px; } /* dropdown menu for services: ensure it doesn't go off-screen */ /* Dropdown menu for mobile */ .dropdown-service-menu { left: 50% !important; transform: translateX(-50%) !important; top: calc(100% + 6px) !important; z-index: 2000 !important; background-color: white !important; /* white background */ border-radius: 12px !important; /* rounded corners */ width: 100px !important; /* almost full width on mobile */ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important; /* subtle shadow */ padding: 8px 0 !important; /* vertical padding */ } /* Dropdown links styling */ .dropdown-service-menu li a { color: #0a4da2 !important; /* readable blue text */ font-size: 14px !important; /* readable font size */ padding: 10px 20px !important; /* tappable area */ display: block; text-decoration: none; transition: background 0.3s ease; } /* Hover effect for dropdown items */ .dropdown-service-menu li a:hover { background-color: #f0f8ff !important; /* subtle highlight */ color: #0a4da2 !important; } /* Defensive override: remove other negative-margin / shift hacks */ .nav-links li a, .language-container { margin-left: 0 !important; margin-top: 0 !important; } .image-overlay { top: 18%; left: 5%; text-align: center; } .h2-container.background-language-content.active { font-size: clamp(10px, 6vw, 26px); /* responsive font size */ line-height: 1.3; /* spacing between lines */ max-width: 95%; /* avoid overflow */ margin: 14px auto 0 auto; /* horizontal centering */ text-align: center; /* center text */ word-break: normal; /* prevent breaking words */ white-space: normal; /* normal wrapping */ transform: translateX(-10%) !important; margin-top: 250px !important; } .b-container { font-size: clamp(10px, 4vw, 20px); width: 80% !important; transform: translateX(-5%) !important; text-align: center !important; /* center text */ word-break: normal !important; /* prevent breaking words */ white-space: normal !important; margin-top: 2px; } .h3-container { font-size: clamp(10px, 5vw, 18px) !important; transform: translate(48%); text-align: left; width: 30% !important; margin-top: 18px !important; } .subscribe-btn { display: flex; justify-content: center; /* horizontal centering */ align-items: center; /* vertical centering */ padding: 0.8rem 2rem; /* controls button size */ width: 100px; margin-left: 250px !important; margin-top: -58px !important; } .subscribe-btn .btn-text { line-height: 1; /* ensures no vertical spacing issues */ font-size: 0.7rem !important; } .container-i { margin-left: 85px !important; top: -410px !important; display: none; } .circle-container-2 { position: relative; width: 40px; height: 40px; top: 335px; left: -56px; } .container-2 { margin-left: 90px !important; margin-top: 10px !important; } .circle-text-container-2 { width: 22%; margin-left: 6px; margin-top: 300px; font-size: 0.85rem; } /* bottom container: absolute at hero bottom, visible above overlays */ .bottom-container { position: absolute !important; bottom: 12px; left: 50%; top:530px; transform: translateX(-50%); width: calc(100% - 32px); /* small page padding */ max-width: 760px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; padding: 10px 12px; box-sizing: border-box; height: 210px !important; } /* default: two items per row */ .bottom-container .counseling-section { flex: 0 0 48%; max-width: 48%; box-sizing: border-box; text-align: center; padding: 6px 8px; } /* center the 3rd item below the two (narrower) */ .bottom-container .counseling-section:nth-child(3) { flex: 0 0 60%; max-width: 60%; margin-left: auto; margin-right: auto; align-self: center; } /* hide empty 4th slot if present */ .bottom-container .counseling-section:nth-child(4) { display: none; } /* small typographic tweaks */ .counseling-section i { font-size: 22px; margin-bottom: 6px; display: block; } .counseling-section h6 { font-size: 13px; margin: 4px 0 6px; } .counseling-section p { font-size: 12px; line-height: 1.3; margin: 0; } .image-slideshow { position: absolute !important; /* make sure it sits behind overlays */ top: 375px !important; left: 0 !important; width: 90vw !important; height: 45vh !important; overflow: hidden !important; z-index: 0 !important; /* keep it behind overlay text/buttons */ } .image-slideshow img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } /* Optional: make sure overlay is above */ .image-overlay { position: relative; z-index: 5 !important; } body header { position: relative !important; top: auto !important; left: auto !important; width: 100% !important; transform: none !important; } /* Force logo and language to follow the section flow */ .logo-container, .language-container { position: absolute !important; top: auto !important; left: 50% !important; transform: translateX(-50%) !important; right: auto !important; bottom: auto !important; } /* Optional β€” fine tune */ .language-container { margin-top: 85px !important; } .logo-container { margin-top: 170px !important; } /*#endregion BACKGROUND*/ /*#region BRIEF*/ /* GLOBAL BRIEF SECTION (Desktop & Mobile Compatible) */ /*#region BRIEF*/ /* ===== BRIEF SECTION ===== */ .brief { width: 100%; max-width: 95vw; margin: 0 auto; display: flex !important; flex-direction: column-reverse !important; /* video first visually */ align-items: center !important; justify-content: flex-start !important; text-align: center; padding: 0 15px 55px !important; gap: 8px !important; /* tighter spacing between video & text */ overflow: visible !important; } .brief-wrapper { position: relative !important; height: 80vh !important; overflow: visible !important; } /* βœ… Pinned behavior (centered & static) */ .brief.pinned { position: fixed !important; top: 0 !important; left: 0 !important; width: 100vw !important; height: 100vh !important; min-height: 100vh !important; margin: 0 !important; padding: 0 !important; transform: none !important; /* βœ… avoid shifting horizontally */ display: flex !important; flex-direction: column-reverse !important; align-items: center !important; justify-content: center !important; /* center vertically, consistently */ background: transparent !important; overflow: hidden !important; z-index: 1000 !important; pointer-events: none !important; /* allow scroll behind */ } /* βœ… Allow internal items to be interactive */ .brief.pinned * { pointer-events: auto !important; } /* ===== TEXT BLOCK ===== */ .centered-content { margin: 0 auto !important; margin-top: 0 !important; /* remove excess top gap */ max-width: 95% !important; text-align: center; transform: translateY(10%) !important; } .stress-badge { display: inline-block; margin-bottom: 5px !important; } .brief-heading { font-size: 1.3rem !important; margin: 5px 0 8px !important; } .centered-content p { line-height: 22px !important; font-size: 14.5px !important; margin-top: 5px !important; margin-left:10px; } /* ===== VIDEO ===== */ .video-container { position: relative !important; width: 88vw !important; aspect-ratio: 16 / 9 !important; height: auto !important; top: 0 !important; margin-bottom: 0 !important; overflow: visible !important; transform: translateY(10%) !important; } .video-container video { width: 100%; height: auto; object-fit: cover; border-radius: 10px; display: block !important; } /* ===== EXTRAS ===== */ .container-j, .container-k { display: none !important; } .scroll-cue { bottom: 10px; left:-5px; } /*#endregion BRIEF*/ /*#region WHO WE ARE*/ .who-we-are-section { flex-direction: column; height: auto; padding: 1rem; align-items: center; /* βœ… ensure the full content centers */ } .who-we-are-image { width: 100%; max-width: 420px; /* keeps it tidy */ margin: 0 auto; display: flex; /* βœ… enable centering context */ justify-content: center; /* βœ… center horizontally */ align-items: center; /* βœ… center vertically if there's extra height */ position: relative; } .who-we-are-image video { width: 420px; height: 320px; border-radius: 20px !important; object-fit: cover; display: block; /* βœ… ensures no inline spacing issues */ margin: 0 auto; /* βœ… fallback centering */ } .who-we-are-content { width: 100%; margin: 1.5rem auto 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; /* βœ… Reset inherited offsets */ margin-right: 0 !important; margin-left: 0 !important; } .who-we-are-content h2 { font-size: 24px; text-align: center; margin-bottom: 10px; margin-left: 0 !important; /* βœ… reset inherited shift */ } .who-we-are-content>p { font-size: 0.98rem !important; max-width: 95% !important; margin: 0 auto 1.5rem; text-align: center; line-height: 1.5; } .card-container { flex-direction: column; align-items: center; } .card-box { width: 60% !important; height: auto; align-items: center; left: 0 !important; /* βœ… Reset the negative offset */ margin: 0 auto !important; /* βœ… Center horizontally */ } .container-n { position: absolute; display: flex; flex-direction: column; align-items: center; left: -85px; top: -125px; animation: heartbeat 3.3s infinite; z-index: 1; } .container-m { position: absolute; display: flex; flex-direction: column; align-items: center; left: 36px; top: -220px; animation: heartbeat 3.3s infinite; z-index: 1; } .container-o { position: absolute; display: none; flex-direction: column; align-items: center; left: -150px; top: -240px; animation: heartbeat 3.3s infinite; z-index: 1; } .container-n, .container-o { pointer-events: none; /* allows clicks to reach the video underneath */ } .read-more-container .read-more-btn .btn-who { font-size: 1em !important; } /*#endregion WHO WE ARE*/ /*#region RESULT SECTION*/ .result { height: 1000px; padding: 2rem 1rem; /*width: 100%;*/ } .result-content { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 40px; /* increased from 30px to 40px */ } .self-check-container { display: flex; flex-direction: column; align-items: center; justify-content: center; margin-top: 110px !important; margin-bottom: 35px; /* added spacing below before the image */ padding: 0 10px; } /* RIGHT SECTION */ .right { width: 100% !important; height: auto !important; display: none !important;/*The display of this will be for new update*/ flex-direction: column; align-items: center; justify-content: center; margin-top: 420px; margin-bottom: 40px; gap: 25px; position: relative; } /* IMAGE AREA (fully contained and properly aligned) */ .image-div { position: relative; width: 90%; /* keeps image area balanced */ overflow: hidden; /* ensures image does NOT overflow */ display: flex; justify-content: center; } .image-div img { width: 190% !important; /* increases visible width but stays inside */ margin-left: -15%; /* shifts it slightly left */ margin-top: 30px; height: 270px !important; border-radius: 12px; object-fit: cover; transition: all 0.3s ease; } .announcement { width: 290px; } /* QUOTE AREA */ .quote-div { position: relative; top: 85px; width: 85%; max-width: 700px; max-height: 200px; /* Set max height for scrolling */ margin: 0 auto; padding: 10px 0; text-align: center; overflow-y: auto; /* Enable vertical scrolling */ background: rgba(0, 0, 0, 0.3); /* Optional: dark overlay */ border-radius: 8px; /* Optional: rounded corners */ } /* Quote text inside scrollable container */ #personal_quote { font-size: 0.85rem !important; font-weight: 400 !important; line-height: 1.7 !important; color: #F0F0F0; margin: 0 auto !important; text-align: center !important; width: 100% !important; max-width: 480px !important; padding: 0 20px !important; word-wrap: break-word !important; overflow-wrap: break-word !important; white-space: normal !important; box-sizing: border-box; } #mood-summary-option { box-sizing: border-box; width: 90%; /* or use 100% to fill parent */ max-width: 280px; /* adjust width cap */ min-width: 200px; padding: 10px 14px; border-radius: 6px; border: 1px solid #ccc; font-size: 15px; background-color: #fff; text-align: center; appearance: none; cursor: pointer; } /* Optional: if the dropdown list appears narrower than select */ #mood-summary-option option { width: 100%; text-align: center; white-space: nowrap; } .result-header h2 { font-size: 1.6rem; } .result-content h1 { font-size: 3rem; } .stat span { font-size: 2rem; } .left-new-section { width: 100%; margin-top: 210px !important; height:100% !important; } .new-content-container { height: 650px !important; /* fixed viewport height so it doesn’t stretch layout */ overflow-y: auto; /* enable vertical scroll */ overflow-x: hidden; scrollbar-width: thin; /* for Firefox */ scrollbar-color: #ccc transparent; padding-right: 8px; /* prevent text cutoff due to scrollbar */ scroll-behavior: smooth; } /* Optional: custom scrollbar for WebKit (Chrome/Safari/Edge) */ .new-content-container::-webkit-scrollbar { width: 6px; } .new-content-container::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, 0.3); border-radius: 4px; } .new-content-container::-webkit-scrollbar-thumb:hover { background-color: rgba(0, 0, 0, 0.45); } .banner { height: 115px; font-size: 12px; max-width: 95%; text-align: center; } .right { transform: translateX(2.5%); /* small left shift to visually center */ } /* Ensure image centering isn't overcompensated */ .image-div img { margin-left: -5% !important; /* was -15%, slight left shift only */ } /*#endregion RESULT SECTION*/ /*#region QUOTES*/ .fun-heading-container { margin-bottom: 20px; /* space between "Do you know?" and quotes */ } .fun{ min-height: 80vh; /* ensures at least one screen height */ height: auto; } .content-gallery-container { flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; gap: 35px; } /* Center text area */ .content-gallery-container .content { width: 100%; max-width: 90%; padding: 10px 0; } /* Gallery below text */ .content-gallery-container .gallery { width: 100%; display: flex; justify-content: center; align-items: center; } /* βœ… Fixed container height to prevent clipping */ .image-container { position: relative; width: 100%; max-width: 400px; height: 250px; /* keep consistent visual height */ overflow: hidden; } /* βœ… Keep all images absolutely positioned in same spot */ .gallery-image { position: absolute !important; top: 30%; left: 50%; transform: translate(-50%, -50%); width: 80%; max-width: 320px; height: auto; opacity: 0; transition: opacity 1s ease-in-out; } /* βœ… Only active image visible */ .gallery-image.active { opacity: 1; } /* βœ… Pinned section height consistent */ .fun.pinned { height: 550px !important; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; border-radius: 0; overflow: hidden; top: 200px; } /* Keep quotes visible, properly spaced and centered */ .quote-container { position: relative; height: auto; /* allow it to grow naturally */ margin-top: 15px; /* space between heading and quote */ display: flex; justify-content: center; align-items: center; padding: 0 10px; /* a little side padding */ text-align: center; } /* Each quote stays centered and consistent */ .quote { position: absolute; opacity: 0; transition: opacity 1s ease-in-out; max-width: 85%; /* responsive width that wraps nicely */ line-height: 1.5; color: var(--fun-white); font-size: 1.05rem !important; text-align: center; margin: 0 auto; } /* Active quote fades in */ .quote.active { opacity: 1; position: relative; /* becomes flow element when visible */ } /*#endregion QUOTES*/ /*#region CONSULT*/ .consult { min-height: auto; padding: 20px 0; } .text-side { font-size: 26px; margin-left: 20px !important; margin-top: 80px; } .serif { font-size: 38px; margin-left: 20px; } .intro-text { font-size: 16px; margin: 10px 20px; max-width: 100%; } .consult-container { position: relative; width: 70%; height: 280px; margin: 20px auto; top: -10px; } .consult-container .image-box { margin: 0 auto; width: 220px; height: 300px; } .consult-container .text-box { margin: 20px auto; width: 80% !important; height: 240px !important; left: 58px; top: -280px; font-size: 9px; } .btn-text { font-size: 9px; } /* βœ… FIX: Make keyword grid horizontal */ .keyword-grid { display: flex !important; flex-direction: row !important; /* horizontal layout */ justify-content: center !important; /* center across width */ align-items: flex-start !important; flex-wrap: nowrap !important; /* keep in one row */ gap: 5px !important; margin: 20px auto !important; width: 100%; } /* βœ… Ensure each column fits neatly side-by-side */ .keyword-grid .column { display: flex !important; flex-direction: column; align-items: center !important; gap: 10px; flex: 1; /* equal width columns */ } /* βœ… Adjust keyword buttons for mobile readability */ .keyword-button { font-size: 12px !important; padding: 6px 10px !important; text-align: center !important; min-width: 80px; } /*#endregion CONSULT*/ /*#region THERAPHY*/ .cards-section { display: flex; flex-wrap: wrap; /* allow wrapping for rows */ justify-content: center; /* center cards horizontally */ gap: 20px; /* nice spacing between cards */ width: 100%; padding: 20px 0; margin: 0 auto; } .card { width: 45%; /* two cards per row */ height: 240px !important; margin-bottom: 20px; } .cards-section .header h2 { font-size: 1.6rem !important; } .card-text h2 { font-size: 1.4rem; } .card-image img { height: auto; /* let it shrink proportionally */ max-height: 240px; /* keep inside card */ margin-top: 0; /* reset push */ object-fit: contain; } /*#endregion THERAPY*/ /*#region WHO WE ARE1*/ .crisis{ text-align: center !important; margin: 0 auto; width: 100%; } .who-we-are-section1 { display: flex; flex-direction: column; align-items: center; /* βœ… Center horizontally */ justify-content: center; /* βœ… Center vertically if there's room */ text-align: center; /* βœ… Center text alignment */ padding: 1.5rem; width: 100%; height: auto; margin: 0 auto; /* βœ… Ensure full centering */ box-sizing: border-box; } .image-card-container { display: grid; grid-template-columns: 1fr; width: 100%; max-width: 480px; /* βœ… Keep content balanced on small screens */ margin: 0 auto; justify-items: center; /* βœ… Center the image cards */ gap: 1rem; } .who-we-are-content1 { margin-top: 20px; padding: 0 0.1rem; /* βœ… Equal space left and right */ max-width: 480px; width: 100%; box-sizing: border-box; text-align: center; } .who-we-are-content1 h2 { font-size: 24px; line-height: 1.4; margin-bottom: 0.5rem; } .who-we-are-text-bg p { text-align: left; } .card-container2, .read-more-container2 { display: flex; justify-content: center; /* βœ… Center those buttons and cards */ } .container-m{ left:-130px; } /*#endregion WHO WE ARE*/ /*#region CHOOSE*/ .choose { } .why-section-container { flex-direction: column; align-items: center; /* center horizontally */ justify-content: center; padding: 20px; gap: 20px; text-align: center; } .vertical-divider { display: none; } .why-section-left, .why-section-center, .why-section-right { max-width: 100%; padding: 10px 0; } .why-section-left h1 { font-size: 2rem; text-align: center; } /* βœ… Fix list items */ /* Ensure parent (the list) aligns properly */ .why-section-list { display: flex; flex-direction: column; align-items: flex-start; /* βœ… Align list items left */ justify-content: center; text-align: left; margin: 0 auto; /* Keeps the list block centered horizontally */ width: fit-content; /* Prevents full-width centering weirdness */ } /* Fix each list item layout */ .why-section-list li { display: flex; align-items: flex-start; /* Align icon and text properly */ justify-content: flex-start; /* βœ… Text stays left of icon */ text-align: left; gap: 8px; /* space between icon and text */ white-space: normal; overflow: visible; } /* Optional: Adjust icon size and vertical alignment */ .why-section-list li i { font-size: 1.1rem; margin-top: 3px; } .info-block .heading1 { font-size: 50px; } .info-block p { font-size: 0.98rem; max-width: 100%; /* take full width available */ margin: 0 auto; /* center horizontally */ text-align: center; } /*#endregion CHOOSE*/ /*#region BLOG*/ .blog { width: 90%; padding: 2.5rem 1rem; } .blog .result-header h2 { font-size: 1.8rem; } .profile-cards { display: flex; flex-direction: column; align-items: center; gap: 2rem; } .profile-card { width: 90%; text-align: center; } .profile-image img { height: 180px; } .profile-content h3 { font-size: 1.1rem; } .profile-content p { font-size: 0.9rem; } /*#endregion BLOG*/ /*#region MEDITATION*/ .meditation-section { padding: 40px 15px; border-radius: 25px; text-align: center; } .med-carousel-wrapper { width: 100%; display: flex; justify-content: center; align-items: center; position: relative; } .med-prev-btn, .med-next-btn { position: absolute; top: 50%; transform: translateY(-50%); font-size: 1.5rem; background: rgba(30, 41, 59, 0.8); color: #fff; border: none; border-radius: 50%; width: 35px; height: 35px; cursor: pointer; display: flex; justify-content: center; align-items: center; z-index: 5; } .med-prev-btn { left: 10px; } .med-next-btn { right: 10px; } .med-carousel-container { width: 100%; max-width: 480px; margin: 0 auto; overflow: hidden; position: relative; } .track-slide { display: flex; flex-direction: column; align-items: center; gap: 1.2rem; padding: 10px 0; transition: transform 0.5s ease; height: auto !important; min-height: auto !important; } .track { width: 90%; max-width: 400px; background: rgba(255, 255, 255, 0.05); border-radius: 16px; padding: 10px; box-sizing: border-box; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); text-align: left; height: auto !important; min-height: 360px !important; } .track-image { width: 100%; height: 180px; border-radius: 12px; overflow: hidden; position: relative; } .thumbnail-video { width: 100%; height: 100%; object-fit: cover; display: block; } .play-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 1.5rem; color: white; background: rgba(0, 0, 0, 0.6); border-radius: 50%; padding: 10px; cursor: pointer; } .track-info p { margin-top: 10px; color: white !important; line-height: 1.5; } .track-info h3 { font-size: 1.1rem; margin-bottom: 4px; color: white !important; } .track-categories { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; } .category { background: rgba(255, 255, 255, 0.15); padding: 3px 7px; border-radius: 8px; font-size: 0.75rem; color: white !important; } .meditation-heading { font-size: 1.5rem; margin-bottom: 10px; } .meditation-subtext { font-size: 0.9rem; line-height: 1.5; max-width: 440px; margin: 0 auto 20px; } /*#endregion MEDITATION*/ /*#region FEATURES*/ #features { padding: 35px 25px; border-radius: 25px; } .features-heading { font-size: 1.2rem; } .result-header h2 { font-size: 1.6rem; } .result-header p { font-size: 0.95rem; } .features-box img { max-height: 240px; } .carousel-inner .row { flex-direction: column; gap: 18px; padding: 0 10px; } .custom-carousel-control-prev { transform: translateX(20px); } .custom-carousel-control-next { transform: translateX(300px) !important; } .book-session, .more-resources { font-size: 0.7rem; padding: 7px 10px; } .book-session .arrow-icon, .more-resources .arrow-icon { width: 22px; height: 22px; } /*#endregion FEATURES*/ /*#region SPOTLIGHT*/ .split-container { position: relative; display: flex !important; flex-direction: column !important; justify-content: center !important; /* Center vertically within mobile viewport */ align-items: center !important; /* Center horizontally */ width: 100%; min-height: 420px; /* Maintain visual space */ overflow: visible; /* Prevent layout shifts during animation */ margin-top: 270px !important; /* Preserve your desired vertical offset */ margin-left: 16px !important; transform: translate(-10px); } /* Stack content vertically */ /* πŸ”₯ Key fix: overlays stay absolutely stacked */ .inner-overlay { position: absolute !important; top: 0; left: 50%; transform: translateX(-50%); width: 95%; height: auto; margin: 0 auto; opacity: 0; transition: opacity 0.5s ease-in-out; } /* Hide decorative lines */ .vertical-lines { display: none !important; } /* Center the image properly */ .circle-placeholder { position: relative; margin: 0 auto 20px auto; width: 140px; height: 140px; transform: translate(-80px) !important; } /* Text section directly beneath image */ .text-container { margin: 0 auto; text-align: center; width: 90%; max-width: 400px; margin-top: 45px !important; } .text-container .name { font-size: 1rem; } .text-container h2.title { font-size: 1.1rem; margin-bottom: 6px; } .text-container .review { font-size: 0.9rem; line-height: 1.5; } /* Social icons in a horizontal row */ .social-media-icons { display: flex; flex-direction: row; /* βœ… Horizontal alignment */ align-items: center; justify-content: center; gap: 16px; margin-top: 20px; width: 100%; transform: translate(-40px) !important; } /* Icon + text vertically aligned */ .social-column { display: flex; flex-direction: column; align-items: center; text-align: center; } .social-column .social-icon { font-size: 1.2rem; padding: 10px; } .social-column p { font-size: 0.8rem; margin-top: 6px; } .circle-placeholder img { width: 100%; height: 100%; object-fit: cover; /* keeps proportions but fills the circle */ border-radius: 50%; /* makes it circular */ display: block; border: 3px solid white; /* optional aesthetic touch */ } /* βœ… Show the container again */ /* βœ… Keep the vertical-lines container visible but contained */ /* Keep vertical-lines visible but neutral */ .vertical-lines { display: flex !important; align-items: center; justify-content: center; position: relative !important; width: 100%; margin: 0 auto; padding: 0; background: transparent; } /* Hide decorative vertical lines only */ .vertical-lines .line { display: none !important; } /* βœ… Circle image floats visually into the container */ .vertical-lines .circle-placeholder { position: absolute !important; /* place relative to split-container */ top: -70px; /* slightly overlap inner-overlay */ left: 50%; transform: translateX(-50%); /* center horizontally */ width: 120px; height: 120px; z-index: 3; } .vertical-lines .circle-placeholder img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; border: 3px solid white; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); } /* Adjust content inside inner overlay so it doesn’t collide */ .inner-overlay { margin-top: 70px; /* gives room for image overlap */ } /* Optional fine-tune for text layout */ .text-container { margin-top: 10px; } /*#endregion SPOTLIGHT*/ /*#region ADVERT*/ #advert-section { min-height: 140vh !important; /* ensures full screen coverage */ height: auto !important; /* expands with content */ padding: 35px 15px; } .advert-layout { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-start !important; gap: 25px !important; } /* Fix the hidden image container issue */ .advert-container { width: 100% !important; height: auto !important; min-height: 490px !important; /* βœ… keeps section visible even before image loads */ display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; } .advert-left { width: 100% !important; } .advert-box { width: 95% !important; height: auto; display: flex; flex-direction: column; align-items: center; gap: 15px; } .advert-box img { width: 85% !important; height: auto; max-height: 250px !important; object-fit: cover !important; display: block !important; /* βœ… ensures image displays */ } .text-right-side { width: 90% !important; text-align: center !important; margin-top: 20px !important; } .text-right-side h2 { font-size: 1.5rem; } .text-right-side p { font-size: 0.88rem; } .text-right-side .underline { width: 200px; margin: 10px auto; } /*#endregion ADVERT*/ /*#region RANGER*/ .ranger-wrapper { width: 100% !important; /* ensures it spans full width */ display: flex !important; justify-content: center !important; /* centers the content inside */ background: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%); } #ranger-section { width: 100vw !important; /* increase width from typical 70–80% to 90% */ max-width: 1600px !important; /* optional cap for large screens */ margin: 0 auto !important; text-align: center !important; top: 150px; } .global-reach { font-size: 1.2rem; } .value { font-size: 2.0rem; } .word { font-size: 0.85rem; } .rolling-container { font-size: 2.2rem; } /*#endregion RANGER*/ /*#region MOTIVATION*/ .motivational-messages p { font-size: 1.2rem; color: white !important; } .track-info p { color: white !important; } .track-info h3 { color: white !important; } .track-categories .category { color: white !important; } /*#endregion MOTIVATION*/ /*#region FAQ*/ #faq { width: 100%; } .faq-wrapper{ width:95%; } .faq-title { font-size: 0.95rem; width: 95% } .faq-question { font-size: 0.85rem; } .faq-answer { font-size: 0.85rem; } /*#endregion FAQ*/ /*#region FOOTER*/ .custom_footer_top { position: relative; padding: 60px 25px; overflow-x: visible; box-sizing: border-box; } .custom_footer_top .row { flex-wrap: wrap; justify-content: center; gap: 40px; /* Slightly tighter spacing for smaller screens */ } /* βœ… Center the social media icons cleanly */ .f_social_icon { display: flex; justify-content: center; align-items: center; gap: 16px; margin-top: 20px; width: 100%; text-align: center; } .f_social_icon a { font-size: 22px; color: white; transition: all 0.3s ease; } .f_social_icon a:hover { color: #00bcd4; transform: scale(1.1); } .col-md-6, .col-lg-3 { flex: 0 0 100%; max-width: 100%; } .f_widget h3 { text-align: center; } .f_widget .f_list { text-align: center; } /* βœ… Full-width subfooter with vertical stacking */ .subfooter { position: relative; left: 0; right: 0; width: 100%; max-width: none; margin: 0 auto; padding: 45px 35px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 35px; background-color: #1f3a52; border-radius: 10px; box-sizing: border-box; overflow: visible; } /* βœ… Left section (text + logo) */ .subfooter-left { width: 100%; text-align: center; align-items: center; transform: translate(20%); } /* βœ… Right section (subscribe + video) */ .subfooter-right { width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 25px; margin-top: 20px; } /* βœ… Subscribe section centered */ .subscribe-container { width: 70% !important; text-align: center !important; margin: 0 auto !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; left: 0 !important; right: 0 !important; } .subscribe-form { flex-direction: column; align-items: center; justify-content: center; } .email-input { width: 90% !important; margin-bottom: 10px; } .subf1-button { width: 170px !important; height: 46px; font-size: 0.9rem; } /* βœ… Video responsive and centered */ .image-placeholder1 video { width: 220px !important; height: 220px !important; border-radius: 12%; margin-top: 18px; display: block; object-fit: cover; transform: translate(-7%); /* Keep perfectly centered */ } /* βœ… Typography */ .about-subtext, .serif-f { font-size: 2rem !important; line-height: 1.2; } .privacy-statement { text-align: center; font-size: 0.98rem; margin-top: 8px; } .quick_links_widget { margin-top: 60px !important; } /* βœ… Back-to-top button alignment */ .top { right: 15px; bottom: 15px; } .subfooter-right { width: 100% !important; transform: none !important; margin-top: 0 !important; justify-content: center !important; align-items: center !important; } .subscribe-container { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center !important; margin: 0 auto 25px auto !important; position: relative !important; left: 0 !important; right: 0 !important; transform: none !important; } .image-placeholder1 { display: flex !important; justify-content: center !important; align-items: center !important; width: 100% !important; margin: 0 auto !important; transform: none !important; left: 0 !important; right: 0 !important; position: relative !important; } /*#endregion FOOTER*/ } /* Large phones & Pro Max */ /* ========== TABLETS AND UP ========== */ @media (min-width: 600px) and (max-width: 899px) { /*#region INTRO PANEL LOGIC*/ .panel { pointer-events: auto !important; position: relative !important; z-index: 20 !important; } .intro-logo { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); width: 150px; z-index: 2; pointer-events: none; } /* Main cover container */ .intro-cover { position: fixed !important; inset: 0 !important; display: flex !important; flex-direction: row !important; overflow-x: auto !important; /* βœ… allow horizontal swipe */ overflow-y: hidden !important; /* βœ… disable vertical scroll */ scroll-snap-type: x mandatory !important; -webkit-overflow-scrolling: touch; width: 100vw !important; height: 100vh !important; scroll-behavior: smooth; background: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%); z-index: 9999 !important; touch-action: pan-x !important; /* βœ… allow finger swipes horizontally */ } /* Ensure this does NOT override the scrollability */ .intro-cover::-webkit-scrollbar { display: none; } .intro-cover { -ms-overflow-style: none; scrollbar-width: none; } /* Panels inside cover */ .intro-cover .panel { flex: 0 0 100vw !important; /* βœ… make sure each takes full viewport width */ width: 100vw !important; height: 100%; scroll-snap-align: start; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 1rem; box-sizing: border-box; z-index: 10 !important; position: relative !important; } .intro-cover .panel img { width: 80%; height: auto; max-height: 250px; object-fit: cover; border-radius: 12px; margin-bottom: 12px; } .intro-cover .panel h1 { font-size: 1.3rem; margin: 0.5rem 0; } .intro-cover .panel p { font-size: 0.9rem; line-height: 1.3; margin-bottom: 0.4rem; } .start-btn { position: relative !important; z-index: 999999 !important; margin-top: 60px; } /* Slide hint (arrow + text) */ /* Common base style for hints */ .slide-hint { display: flex !important; align-items: center; justify-content: center; margin-top: 18px; font-size: 0.9rem; color: #ffffff; opacity: 0.8; gap: 0.3rem; animation: fadeIn 1s ease-in 0.5s forwards; user-select: none; } /* Right swipe hint (default) */ .right-hint .arrow { animation: slideArrowRight 1.2s infinite ease-in-out !important; } /* Left swipe hint (mirrored animation) */ /* Left arrow: same ➜, but visually mirrored */ .left-hint .arrow { display: inline-block !important; transform: scaleX(-1) !important; animation: slideLeft 1.2s infinite ease-in-out !important; } /* Animate arrow β†’ direction */ @keyframes slideArrowRight { 0% { transform: translateX(0); opacity: 0.8; } 50% { transform: translateX(8px); opacity: 1; } 100% { transform: translateX(0); opacity: 0.8; } } /* Animate arrow ← direction */ @keyframes slideArrowLeft { 0% { transform: translateX(0); opacity: 0.8; } 50% { transform: translateX(-8px); opacity: 1; } 100% { transform: translateX(0); opacity: 0.8; } } /* Optional: subtle position tweak for clarity */ .left-hint { margin-top: 20px; } .introhidden { transform: translateY(-100%); opacity: 0; transition: all 0.6s ease-in-out; } .slide-left { transform: translateX(-100%); transition: transform 0.5s ease; } .slide-right { transform: translateX(100%); transition: transform 0.5s ease; } #introCover { display: none !important; } body[data-intro="show"] #introCover { display: flex !important; } /*#endregion INTRO PANEL LOGIC*/ /*#region CHAT*/ /* πŸ”Ή Chat Icon */ .chat-icon { width: 52px; height: 52px; bottom: 20px; right: 8px; top: 610px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); z-index: 600 !important; } /* πŸ”Ή Chat & Message Containers */ .chat-container, .message-container, #message-chat-container { width: 90vw; /* Full width for mobile */ height: 70vh; /* Increased height to make content visible */ bottom: 60px; right: 5vw; border-radius: 10px; transition: all 0.3s ease; } /* πŸ”Ή Header */ .message-header h2 { font-size: 16px; margin: 0; padding: 10px 0; } /* πŸ”Ή Message Body */ .message-body { padding: 10px; text-align: center; overflow-y: auto; /* scroll if needed */ } .message-body-svg { width: 40px; height: 40px; margin-top: 20px; margin-bottom: 10px; } .message-body h2 { font-size: 15px; margin-top: 10px; } .message-body span { font-size: 13px; color: #555; display: block; margin-top: 6px; } /* πŸ”Ή Send Message Button */ .send-message-btn { font-size: 13px; padding: 6px 12px; border-radius: 16px; margin-top: 20px; } /* πŸ”Ή Footer Tabs */ .chat-footer-tabs, .chat-footer-tabs-message { flex-direction: row; justify-content: space-around; align-items: center; padding: 6px 0; position: absolute; bottom: 0; left: 0; width: 100%; border-top: 1px solid #ccc; background-color: #fff; z-index: 10; } .chat-input-area { margin-top: 80px; } .chat-greeting { margin-top: 90px !important; } .tab-button, .tab-button-message { background: none; border: none; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #444; cursor: pointer; } .tab-button svg, .tab-button-message svg { width: 20px; height: 20px; } .tab-button span, .tab-button-message span { font-size: 12px; } .tab-button-message.active svg path { fill: #1f3a52; } /* πŸ”Ή Message Chat Layout */ .message-chat-header { height: 50px; padding: 8px; } .logo-video-chat { margin-top: 5px !important; } .logo-video-message { align-self: flex-start; transform: translateY(-193px); width: 170px !important; margin-right: -90px; } .logo-video-chat { align-self: flex-start; transform: translateY(-185px); width: 160px; } .close-btn { position: absolute; top: -187px; left: -150px; font-size: 1.8rem; background: none; border: none; color: black; cursor: pointer; z-index: 1010; transform: translate(285px); } .message-chat-body { padding: 12px; max-height: calc(100% - 110px); } .chat-bubble { font-size: 13px; padding: 8px 12px; max-width: 85%; } .message-chat-input { padding: 8px; } .input-wrapper { min-height: 42px; } .input-container { padding: 6px; } .message-chat-input-field { font-size: 13px; } .send-button-input { width: 28px; height: 28px; } /*#endregion CHAT*/ /*#region INTRO PANEL LOGIC*/ .panel { pointer-events: auto !important; position: relative !important; z-index: 20 !important; } .intro-logo { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); width: 150px; z-index: 2; pointer-events: none; } /* Main cover container */ .intro-cover { position: fixed !important; inset: 0 !important; display: flex !important; flex-direction: row !important; overflow-x: auto !important; /* βœ… allow horizontal swipe */ overflow-y: hidden !important; /* βœ… disable vertical scroll */ scroll-snap-type: x mandatory !important; -webkit-overflow-scrolling: touch; width: 100vw !important; height: 100vh !important; scroll-behavior: smooth; background: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%); z-index: 9999 !important; touch-action: pan-x !important; /* βœ… allow finger swipes horizontally */ } /* Ensure this does NOT override the scrollability */ .intro-cover::-webkit-scrollbar { display: none; } .intro-cover { -ms-overflow-style: none; scrollbar-width: none; } /* Panels inside cover */ .intro-cover .panel { flex: 0 0 100vw !important; /* βœ… make sure each takes full viewport width */ width: 100vw !important; height: 100%; scroll-snap-align: start; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 1rem; box-sizing: border-box; z-index: 10 !important; position: relative !important; } .intro-cover .panel img { width: 80%; height: auto; max-height: 250px; object-fit: cover; border-radius: 12px; margin-bottom: 12px; } .intro-cover .panel h1 { font-size: 1.3rem; margin: 0.5rem 0; } .intro-cover .panel p { font-size: 0.9rem; line-height: 1.3; margin-bottom: 0.4rem; } .start-btn { position: relative !important; z-index: 999999 !important; margin-top: 60px; } /* Slide hint (arrow + text) */ /* Common base style for hints */ .slide-hint { display: flex !important; align-items: center; justify-content: center; margin-top: 18px; font-size: 0.9rem; color: #ffffff; opacity: 0.8; gap: 0.3rem; animation: fadeIn 1s ease-in 0.5s forwards; user-select: none; } /* Right swipe hint (default) */ .right-hint .arrow { animation: slideArrowRight 1.2s infinite ease-in-out !important; } /* Left swipe hint (mirrored animation) */ /* Left arrow: same ➜, but visually mirrored */ .left-hint .arrow { display: inline-block !important; transform: scaleX(-1) !important; animation: slideLeft 1.2s infinite ease-in-out !important; } /* Animate arrow β†’ direction */ @keyframes slideArrowRight { 0% { transform: translateX(0); opacity: 0.8; } 50% { transform: translateX(8px); opacity: 1; } 100% { transform: translateX(0); opacity: 0.8; } } /* Animate arrow ← direction */ @keyframes slideArrowLeft { 0% { transform: translateX(0); opacity: 0.8; } 50% { transform: translateX(-8px); opacity: 1; } 100% { transform: translateX(0); opacity: 0.8; } } /* Optional: subtle position tweak for clarity */ .left-hint { margin-top: 20px; } .introhidden { transform: translateY(-100%); opacity: 0; transition: all 0.6s ease-in-out; } .slide-left { transform: translateX(-100%); transition: transform 0.5s ease; } .slide-right { transform: translateX(100%); transition: transform 0.5s ease; } #introCover { display: none !important; } body[data-intro="show"] #introCover { display: flex !important; } /*#endregion INTRO PANEL LOGIC*/ /*#region BACKGROUND*/ .section-image { position: relative; background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.25); background-size: cover; background-position: center; background-repeat: no-repeat; width: 100vw; min-height: 100svh; margin-top: -138px; pointer-events: auto; /* ensure it's active */ height: auto; overflow: hidden; z-index: 200; /* πŸ’‘ The magic mask (square hole on the right side) */ -webkit-mask-image: radial-gradient(circle at 50% 25%, transparent 60px, black 90px); mask-image: radial-gradient(circle at 50% 25%, transparent 60px, black 90px); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } .section-image { transition: -webkit-mask-image 0.6s ease-in-out, mask-image 0.6s ease-in-out; } .section-image:hover { -webkit-mask-image: radial-gradient(circle at 50% 25%, transparent 100px, black 130px); mask-image: radial-gradient(circle at 50% 25%, transparent 100px, black 130px); } .ad-container { transform: translateY(-50%) !important; width: 120px !important; height: 125px !important; min-width: 130px !important; min-height: 130px !important; } .ad-content h3 { font-size: 0.675rem !important; } .ad-content p { font-size: 0.675rem !important; } header { position: fixed !important; /* keep page content from shifting */ top: 0; left: 0; width: 100%; z-index: 1000; box-sizing: border-box; padding-top: 8px; /* small top gap */ padding-bottom: 78px; /* reserve space inside fixed header for logo */ background-color: var(--background-color); } /* Nav: center in header (stay in normal flow so hitboxes match visuals) */ nav { display: flex !important; justify-content: center !important; align-items: center !important; width: 100%; z-index: 1100; pointer-events: auto; } /* Nav links container */ .nav-links { display: flex !important; gap: 0px !important; /* adjust spacing between icons */ margin: 0; padding: 0; list-style: none; justify-content: center; align-items: center; } /* Restore base link layout but make touch-target comfortable */ .nav-links li a { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 6px 6px !important; min-width: 44px !important; /* good mobile tap size */ height: 55px; font-size: 11px; color: var(--text-muted); position: relative; /* keep absolute span relative to this */ margin: 0 !important; /* override negative margin hacks */ } /* Icon size */ .nav-links li a i { font-size: 18px; margin-bottom: 6px; } /* --- IMPORTANT: keep labels hidden until hover (restore base behaviour) --- */ .nav-links li a span { opacity: 0 !important; transform: translateY(8px) !important; transition: all 0.25s cubic-bezier(0.22, 0.61, 0.36, 1) !important; pointer-events: none !important; position: absolute !important; top: 32px !important; white-space: nowrap !important; } /* Label becomes visible on hover (same as your base CSS) */ .nav-links li a:hover span { opacity: 1 !important; transform: translateY(0) !important; pointer-events: auto !important; } /* Center logo under nav β€” absolutely positioned inside the fixed header */ /* Center logo under nav β€” perfectly aligned */ .logo-container { position: absolute !important; top: 105px !important; /* keep same vertical placement */ left: 50% !important; transform: translateX(-50%) !important; /* fine-tune centering (was -50%) */ margin: 0 !important; z-index: 500 !important; text-align: center; } .logo-video { width: 180px !important; height: auto !important; object-fit: contain !important; } /* Language selector centered above the nav/logo */ .language-container { position: absolute !important; top: 67px !important; /* sits near top of header */ left: 50% !important; transform: translateX(-50%) !important; z-index: 1200 !important; /* above nav */ margin: 0 !important; width: auto !important; } .language-select { padding: 6px 10px !important; font-size: 10px !important; white-space: nowrap; border-radius: 12px; } /* dropdown menu for services: ensure it doesn't go off-screen */ /* Dropdown menu for mobile */ .dropdown-service-menu { left: 50% !important; transform: translateX(-50%) !important; top: calc(100% + 6px) !important; z-index: 2000 !important; background-color: white !important; /* white background */ border-radius: 12px !important; /* rounded corners */ width: 100px !important; /* almost full width on mobile */ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important; /* subtle shadow */ padding: 8px 0 !important; /* vertical padding */ } /* Dropdown links styling */ .dropdown-service-menu li a { color: #0a4da2 !important; /* readable blue text */ font-size: 14px !important; /* readable font size */ padding: 10px 20px !important; /* tappable area */ display: block; text-decoration: none; transition: background 0.3s ease; } /* Hover effect for dropdown items */ .dropdown-service-menu li a:hover { background-color: #f0f8ff !important; /* subtle highlight */ color: #0a4da2 !important; } /* Defensive override: remove other negative-margin / shift hacks */ .nav-links li a, .logo-container, .language-container { margin-left: 0 !important; margin-top: 0 !important; } .image-overlay { top: 18%; left: 5%; text-align: center; } .h2-container.background-language-content.active { font-size: clamp(10px, 6vw, 26px); /* responsive font size */ line-height: 1.3; /* spacing between lines */ max-width: 95%; /* avoid overflow */ margin: 14px auto 0 auto; /* horizontal centering */ text-align: center; /* center text */ word-break: normal; /* prevent breaking words */ white-space: normal; /* normal wrapping */ transform: translateX(-7%) !important; margin-top: 300px; } .b-container { font-size: clamp(10px, 4vw, 20px); width: 80% !important; transform: translateX(-1%) !important; text-align: center !important; /* center text */ word-break: normal !important; /* prevent breaking words */ white-space: normal !important; margin-top: 10px; } .h3-container { font-size: clamp(10px, 5vw, 18px) !important; transform: translateX(65%) !important; text-align: left; width: 30% !important; margin-top: 56px !important; } .subscribe-btn { display: flex; justify-content: center; /* horizontal centering */ align-items: center; /* vertical centering */ padding: 0.8rem 2rem; /* controls button size */ width: 100px; transform: translateX(300%) !important; margin-top: -65px !important; } .subscribe-btn .btn-text { line-height: 1; /* ensures no vertical spacing issues */ font-size: 0.7rem !important; } .container-i { margin-left: 85px !important; top: -410px !important; } .circle-text-container { width: 26%; margin-left: 145px; margin-top: 245px; font-size: 0.85rem; } .circle-container-2 { position: relative; width: 40px; height: 40px; top: 335px; left: -56px; } .container-2 { margin-left: 90px !important; margin-top: -320px !important; } .circle-text-container-2 { width: 19%; margin-left: 6px; margin-top: 300px; font-size: 0.85rem; } /* bottom container: absolute at hero bottom, visible above overlays */ .bottom-container { position: absolute !important; bottom: 12px; left: 50%; transform: translateX(-50%); width: calc(100% - 32px); /* small page padding */ max-width: 760px; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; padding: 10px 12px; box-sizing: border-box; height: 210px !important; } /* default: two items per row */ .bottom-container .counseling-section { flex: 0 0 48%; max-width: 48%; box-sizing: border-box; text-align: center; padding: 6px 8px; } /* center the 3rd item below the two (narrower) */ .bottom-container .counseling-section:nth-child(3) { flex: 0 0 60%; max-width: 60%; margin-left: auto; margin-right: auto; align-self: center; } /* hide empty 4th slot if present */ .bottom-container .counseling-section:nth-child(4) { display: none; } /* small typographic tweaks */ .counseling-section i { font-size: 22px; margin-bottom: 6px; display: block; } .counseling-section h6 { font-size: 13px; margin: 4px 0 6px; } .counseling-section p { font-size: 12px; line-height: 1.3; margin: 0; } .image-slideshow { position: absolute !important; /* make sure it sits behind overlays */ top: 375px !important; left: 0 !important; width: 90vw !important; height: 45vh !important; overflow: hidden !important; z-index: 0 !important; /* keep it behind overlay text/buttons */ } .image-slideshow img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } /* Optional: make sure overlay is above */ .image-overlay { position: relative; z-index: 5 !important; } body header { position: relative !important; top: auto !important; left: auto !important; width: 100% !important; transform: none !important; } /* Force logo and language to follow the section flow */ .logo-container, .language-container { position: absolute !important; top: auto !important; left: 50% !important; transform: translateX(-50%) !important; right: auto !important; bottom: auto !important; } /* Optional β€” fine tune */ .language-container { margin-top: 85px !important; } .logo-container { margin-top: 170px !important; } /*#endregion BACKGROUND*/ /*#region BRIEF*/ /* GLOBAL BRIEF SECTION (Desktop & Mobile Compatible) */ .brief { width: 100%; /* βœ… full width for clean centering */ max-width: 95vw; /* keep same visual width but prevent subpixel shifts */ margin: 0 auto; height: 80vh; z-index: 1; border: none; display: flex !important; flex-direction: column-reverse !important; /* βœ… video first, text second */ align-items: center !important; /* βœ… ensures horizontal centering */ justify-content: flex-start !important; /* top alignment */ padding: 20px; text-align: center; } .brief.pinned { position: fixed; left: 50%; transform: translateX(-50%); width: 92%; height: 80vh; z-index: 0; display: flex !important; flex-direction: column; align-items: center !important; justify-content: flex-start !important; pointer-events: none; overflow: visible; } /* Neutralize layout reflows */ .brief-wrapper, .section-image { overflow: visible !important; transform: none !important; } .brief.pinned * { pointer-events: auto; } .brief-wrapper{ min-height:80px; } .brief-heading { font-size: 1.4rem; } .centered-content { margin-left: 0; margin-top: 80px !important; max-width: 98% !important; text-align: center; } .centered-content p { line-height: 24px !important; font-size: 15px !important; } /* 🎯 The key block β€” ensures the video sits dead-center */ .video-container { position: relative !important; display: flex !important; justify-content: center !important; align-items: center !important; width: 90vw !important; /* βœ… scales nicely for mobile */ max-width: 320px; /* prevents it from being too large */ height: auto !important; margin-inline: auto !important; /* βœ… modern, full-bidi centering */ top: -10px !important; text-align: center !important; transform: translateX(-5%) !important; } .video-container video { width: 100% !important; height: auto !important; display: block !important; border-radius: 10px; } .container-j, .container-k { display: none !important; visibility: hidden !important; position: absolute !important; width: 0 !important; height: 0 !important; } .scroll-cue { bottom: 10px; } /*#endregion BRIEF*/ /*#region WHO WE ARE*/ .who-we-are-section { flex-direction: column; height: auto; padding: 1rem; align-items: center; /* βœ… ensure the full content centers */ } .who-we-are-image { width: 100%; max-width: 420px; /* keeps it tidy */ margin: 0 auto; display: flex; /* βœ… enable centering context */ justify-content: center; /* βœ… center horizontally */ align-items: center; /* βœ… center vertically if there's extra height */ position: relative; } .who-we-are-image video { width: 420px; height: 320px; border-radius: 20px !important; object-fit: cover; display: block; /* βœ… ensures no inline spacing issues */ margin: 0 auto; /* βœ… fallback centering */ } .who-we-are-content { width: 100%; margin: 1.5rem auto 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; /* βœ… Reset inherited offsets */ margin-right: 0 !important; margin-left: 0 !important; } .who-we-are-content h2 { font-size: 24px; text-align: center; margin-bottom: 10px; margin-left: 0 !important; /* βœ… reset inherited shift */ } .who-we-are-content>p { font-size: 0.98rem !important; max-width: 95% !important; margin: 0 auto 1.5rem; text-align: center; line-height: 1.5; } .card-container { flex-direction: column; align-items: center; } .card-box { width: 60% !important; height: auto; align-items: center; left: 0 !important; /* βœ… Reset the negative offset */ margin: 0 auto !important; /* βœ… Center horizontally */ } .container-n { position: absolute; display: flex; flex-direction: column; align-items: center; left: -85px; top: -125px; animation: heartbeat 3.3s infinite; z-index: 1; } .container-m { position: absolute; display: flex; flex-direction: column; align-items: center; left: 36px; top: -220px; animation: heartbeat 3.3s infinite; z-index: 1; } .container-o { position: absolute; display: none; flex-direction: column; align-items: center; left: -150px; top: -240px; animation: heartbeat 3.3s infinite; z-index: 1; } .container-n, .container-o { pointer-events: none; /* allows clicks to reach the video underneath */ } .read-more-container .read-more-btn .btn-who { font-size: 1em !important; } /*#endregion WHO WE ARE*/ /*#region RESULT SECTION*/ .result { height: 1000px; padding: 2rem 1rem; /*width: 100%;*/ } .result-content { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 40px; /* increased from 30px to 40px */ } .self-check-container { display: flex; flex-direction: column; align-items: center; justify-content: center; margin-top: 110px !important; margin-bottom: 35px; /* added spacing below before the image */ padding: 0 10px; } /* RIGHT SECTION */ .right { width: 100% !important; height: auto !important; display: none !important;/*The display of this will be for new update*/ flex-direction: column; align-items: center; justify-content: center; margin-top: 420px; margin-bottom: 40px; gap: 25px; position: relative; } /* IMAGE AREA (fully contained and properly aligned) */ .image-div { position: relative; width: 90%; /* keeps image area balanced */ overflow: hidden; /* ensures image does NOT overflow */ display: flex; justify-content: center; } .image-div img { width: 190% !important; /* increases visible width but stays inside */ margin-left: -15%; /* shifts it slightly left */ margin-top: 30px; height: 270px !important; border-radius: 12px; object-fit: cover; transition: all 0.3s ease; } .announcement { width: 290px; } /* QUOTE AREA */ .quote-div { position: relative; top: 85px; width: 85%; max-width: 700px; max-height: 200px; /* Set max height for scrolling */ margin: 0 auto; padding: 10px 0; text-align: center; overflow-y: auto; /* Enable vertical scrolling */ background: rgba(0, 0, 0, 0.3); /* Optional: dark overlay */ border-radius: 8px; /* Optional: rounded corners */ } /* Quote text inside scrollable container */ #personal_quote { font-size: 0.85rem !important; font-weight: 400 !important; line-height: 1.7 !important; color: #F0F0F0; margin: 0 auto !important; text-align: center !important; width: 100% !important; max-width: 480px !important; padding: 0 20px !important; word-wrap: break-word !important; overflow-wrap: break-word !important; white-space: normal !important; box-sizing: border-box; } #mood-summary-option { box-sizing: border-box; width: 90%; /* or use 100% to fill parent */ max-width: 280px; /* adjust width cap */ min-width: 200px; padding: 10px 14px; border-radius: 6px; border: 1px solid #ccc; font-size: 15px; background-color: #fff; text-align: center; appearance: none; cursor: pointer; } /* Optional: if the dropdown list appears narrower than select */ #mood-summary-option option { width: 100%; text-align: center; white-space: nowrap; } .result-header h2 { font-size: 1.6rem; } .result-content h1 { font-size: 3rem; } .stat span { font-size: 2rem; } .left-new-section { width: 100%; margin-top: 210px !important; height:100% !important; } .new-content-container { height: 650px !important; /* fixed viewport height so it doesn’t stretch layout */ overflow-y: auto; /* enable vertical scroll */ overflow-x: hidden; scrollbar-width: thin; /* for Firefox */ scrollbar-color: #ccc transparent; padding-right: 8px; /* prevent text cutoff due to scrollbar */ scroll-behavior: smooth; } /* Optional: custom scrollbar for WebKit (Chrome/Safari/Edge) */ .new-content-container::-webkit-scrollbar { width: 6px; } .new-content-container::-webkit-scrollbar-thumb { background-color: rgba(0, 0, 0, 0.3); border-radius: 4px; } .new-content-container::-webkit-scrollbar-thumb:hover { background-color: rgba(0, 0, 0, 0.45); } .banner { height: 115px; font-size: 12px; max-width: 95%; text-align: center; } .right { transform: translateX(2.5%); /* small left shift to visually center */ } /* Ensure image centering isn't overcompensated */ .image-div img { margin-left: -5% !important; /* was -15%, slight left shift only */ } /*#endregion RESULT SECTION*/ /*#region QUOTES*/ .fun{ min-height: 80vh; /* ensures at least one screen height */ height: auto; /* expands with content automatically */ } .fun-heading-container { margin-bottom: 20px; /* space between "Do you know?" and quotes */ } .content-gallery-container { flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; gap: 35px; } /* Center text area */ .content-gallery-container .content { width: 100%; max-width: 90%; padding: 10px 0; } /* Gallery below text */ .content-gallery-container .gallery { width: 100%; display: flex; justify-content: center; align-items: center; } /* βœ… Fixed container height to prevent clipping */ .image-container { position: relative; width: 100%; max-width: 400px; height: 250px; /* keep consistent visual height */ overflow: hidden; } /* βœ… Keep all images absolutely positioned in same spot */ .gallery-image { position: absolute !important; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; max-width: 320px; height: auto; opacity: 0; transition: opacity 1s ease-in-out; } /* βœ… Only active image visible */ .gallery-image.active { opacity: 1; } /* βœ… Pinned section height consistent */ .fun.pinned { height: 550px !important; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; border-radius: 0; overflow: hidden; top: 200px; } /* Keep quotes visible, properly spaced and centered */ .quote-container { position: relative; height: auto; /* allow it to grow naturally */ margin-top: 15px; /* space between heading and quote */ display: flex; justify-content: center; align-items: center; padding: 0 10px; /* a little side padding */ text-align: center; } /* Each quote stays centered and consistent */ .quote { position: absolute; opacity: 0; transition: opacity 1s ease-in-out; max-width: 85%; /* responsive width that wraps nicely */ line-height: 1.5; color: var(--fun-white); font-size: 1.05rem !important; text-align: center; margin: 0 auto; } /* Active quote fades in */ .quote.active { opacity: 1; position: relative; /* becomes flow element when visible */ } /*#endregion QUOTES*/ /*#region CONSULT*/ .consult { min-height: auto; padding: 20px 0; } .text-side { font-size: 26px; margin-left: 20px !important; margin-top: 80px; } .serif { font-size: 38px; margin-left: 20px; } .intro-text { font-size: 16px; margin: 10px 20px; max-width: 100%; } .consult-container { position: relative; width: 70%; height: 280px; margin: 20px auto; top: -10px; } .consult-container .image-box { margin: 0 auto; width: 220px; height: 300px; } .consult-container .text-box { margin: 20px auto; width: 80% !important; height: 240px !important; left: 58px; top: -280px; font-size: 9px; } .btn-text { font-size: 9px; } /* βœ… FIX: Make keyword grid horizontal */ .keyword-grid { display: flex !important; flex-direction: row !important; /* horizontal layout */ justify-content: center !important; /* center across width */ align-items: flex-start !important; flex-wrap: nowrap !important; /* keep in one row */ gap: 5px !important; margin: 20px auto !important; width: 100%; } /* βœ… Ensure each column fits neatly side-by-side */ .keyword-grid .column { display: flex !important; flex-direction: column; align-items: center !important; gap: 10px; flex: 1; /* equal width columns */ } /* βœ… Adjust keyword buttons for mobile readability */ .keyword-button { font-size: 12px !important; padding: 6px 10px !important; text-align: center !important; min-width: 80px; } /*#endregion CONSULT*/ /*#region THERAPHY*/ .cards-section { min-height: 100vh; /* ensures at least one screen height */ height: auto; /* expands with content automatically */ /* allow it to expand with content */ margin-bottom: 20px !important; /* push away from next section */ padding: 20px; flex-wrap: wrap; justify-content: center; } .card { width: 45%; /* two cards per row */ height: 240px !important; margin-bottom: 20px; } .cards-section .header h2 { font-size: 1.6rem !important; } .card-text h2 { font-size: 1.4rem; } .card-image img { height: auto; /* let it shrink proportionally */ max-height: 240px; /* keep inside card */ margin-top: 0; /* reset push */ object-fit: contain; } /*#endregion THERAPY*/ /*#region WHO WE ARE1*/ .who-we-are-section1 { flex-direction: column; padding: 1.5rem; height: auto; } .image-card-container { grid-template-columns: 1fr; width: 100%; margin: 0 auto; } .who-we-are-content1 { margin-top: 20px; padding-left: 0; } .who-we-are-content1 h2 { font-size: 24px; } /*#endregion WHO WE ARE*/ /*#region CHOOSE*/ .choose { } .why-section-container { flex-direction: column; align-items: center; /* center horizontally */ justify-content: center; padding: 20px; gap: 20px; text-align: center; } .vertical-divider { display: none; } .why-section-left, .why-section-center, .why-section-right { max-width: 100%; padding: 10px 0; } .why-section-left h1 { font-size: 2rem; text-align: center; } /* βœ… Fix list items */ /* Ensure parent (the list) aligns properly */ .why-section-list { display: flex; flex-direction: column; align-items: flex-start; /* βœ… Align list items left */ justify-content: center; text-align: left; margin: 0 auto; /* Keeps the list block centered horizontally */ width: fit-content; /* Prevents full-width centering weirdness */ } /* Fix each list item layout */ .why-section-list li { display: flex; align-items: flex-start; /* Align icon and text properly */ justify-content: flex-start; /* βœ… Text stays left of icon */ text-align: left; gap: 8px; /* space between icon and text */ white-space: normal; overflow: visible; } /* Optional: Adjust icon size and vertical alignment */ .why-section-list li i { font-size: 1.1rem; margin-top: 3px; } .info-block .heading1 { font-size: 50px; } .info-block p { font-size: 0.98rem; max-width: 100%; /* take full width available */ margin: 0 auto; /* center horizontally */ text-align: center; } /*#endregion CHOOSE*/ /*#region BLOG*/ .blog { padding: 2.5rem 1rem; } .blog .result-header h2 { font-size: 1.8rem; } .profile-cards { display: flex; flex-direction: column; align-items: center; gap: 2rem; } .profile-card { width: 90%; text-align: center; } .profile-image img { height: 180px; } .profile-content h3 { font-size: 1.1rem; } .profile-content p { font-size: 0.9rem; } /*#endregion BLOG*/ /*#region MEDITATION*/ .meditation-section { padding: 40px 15px; border-radius: 25px; text-align: center; } .med-carousel-wrapper { width: 100%; display: flex; justify-content: center; align-items: center; position: relative; } .med-prev-btn, .med-next-btn { position: absolute; top: 50%; transform: translateY(-50%); font-size: 1.5rem; background: rgba(30, 41, 59, 0.8); color: #fff; border: none; border-radius: 50%; width: 35px; height: 35px; cursor: pointer; display: flex; justify-content: center; align-items: center; z-index: 5; } .med-prev-btn { left: 10px; } .med-next-btn { right: 10px; } .med-carousel-container { width: 100%; max-width: 480px; margin: 0 auto; overflow: hidden; position: relative; } .track-slide { display: flex; flex-direction: column; align-items: center; gap: 1.2rem; padding: 10px 0; transition: transform 0.5s ease; height: auto !important; min-height: auto !important; } .track { width: 90%; max-width: 400px; background: rgba(255, 255, 255, 0.05); border-radius: 16px; padding: 10px; box-sizing: border-box; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); text-align: left; height: auto !important; min-height: 360px !important; } .track-image { width: 100%; height: 180px; border-radius: 12px; overflow: hidden; position: relative; } .thumbnail-video { width: 100%; height: 100%; object-fit: cover; display: block; } .play-icon { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 1.5rem; color: white; background: rgba(0, 0, 0, 0.6); border-radius: 50%; padding: 10px; cursor: pointer; } .track-info p { margin-top: 10px; color: white !important; line-height: 1.5; } .track-info h3 { font-size: 1.1rem; margin-bottom: 4px; color: white !important; } .track-categories { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; } .category { background: rgba(255, 255, 255, 0.15); padding: 3px 7px; border-radius: 8px; font-size: 0.75rem; color: white !important; } .meditation-heading { font-size: 1.5rem; margin-bottom: 10px; } .meditation-subtext { font-size: 0.9rem; line-height: 1.5; max-width: 440px; margin: 0 auto 20px; } /*#endregion MEDITATION*/ /*#region FEATURES*/ #features { padding: 35px 25px; border-radius: 25px; } .features-heading { font-size: 1.2rem; } .result-header h2 { font-size: 1.6rem; } .result-header p { font-size: 0.95rem; } .features-box img { max-height: 240px; } .carousel-inner .row { flex-direction: column; gap: 18px; padding: 0 10px; } .custom-carousel-control-prev { transform: translateX(20px); } .custom-carousel-control-next { transform: translateX(475px) !important; } .book-session, .more-resources { font-size: 0.7rem; padding: 7px 10px; } .book-session .arrow-icon, .more-resources .arrow-icon { width: 22px; height: 22px; } /*#endregion FEATURES*/ /*#region SPOTLIGHT*/ .split-container { position: relative; display: flex !important; flex-direction: column !important; justify-content: center !important; /* Center vertically within mobile viewport */ align-items: center !important; /* Center horizontally */ width: 100%; min-height: 420px; /* Maintain visual space */ overflow: visible; /* Prevent layout shifts during animation */ margin-top: 270px !important; /* Preserve your desired vertical offset */ margin-left: 16px !important; transform: translate(-10px); } /* Stack content vertically */ /* πŸ”₯ Key fix: overlays stay absolutely stacked */ .inner-overlay { position: absolute !important; top: 0; left: 50%; transform: translateX(-50%); width: 95%; height: auto; margin: 0 auto; opacity: 0; transition: opacity 0.5s ease-in-out; } /* Hide decorative lines */ .vertical-lines { display: none !important; } /* Center the image properly */ .circle-placeholder { position: relative; margin: 0 auto 20px auto; width: 140px; height: 140px; transform: translate(-80px) !important; } /* Text section directly beneath image */ .text-container { margin: 0 auto; text-align: center; width: 90%; max-width: 400px; margin-top: 45px !important; } .text-container .name { font-size: 1rem; } .text-container h2.title { font-size: 1.1rem; margin-bottom: 6px; } .text-container .review { font-size: 0.9rem; line-height: 1.5; } /* Social icons in a horizontal row */ .social-media-icons { display: flex; flex-direction: row; /* βœ… Horizontal alignment */ align-items: center; justify-content: center; gap: 16px; margin-top: 20px; width: 100%; transform: translate(-40px) !important; } /* Icon + text vertically aligned */ .social-column { display: flex; flex-direction: column; align-items: center; text-align: center; } .social-column .social-icon { font-size: 1.2rem; padding: 10px; } .social-column p { font-size: 0.8rem; margin-top: 6px; } .circle-placeholder img { width: 100%; height: 100%; object-fit: cover; /* keeps proportions but fills the circle */ border-radius: 50%; /* makes it circular */ display: block; border: 3px solid white; /* optional aesthetic touch */ } /* βœ… Show the container again */ /* βœ… Keep the vertical-lines container visible but contained */ /* Keep vertical-lines visible but neutral */ .vertical-lines { display: flex !important; align-items: center; justify-content: center; position: relative !important; width: 100%; margin: 0 auto; padding: 0; background: transparent; } /* Hide decorative vertical lines only */ .vertical-lines .line { display: none !important; } /* βœ… Circle image floats visually into the container */ .vertical-lines .circle-placeholder { position: absolute !important; /* place relative to split-container */ top: -70px; /* slightly overlap inner-overlay */ left: 50%; transform: translateX(-50%); /* center horizontally */ width: 120px; height: 120px; z-index: 3; } .vertical-lines .circle-placeholder img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; border: 3px solid white; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); } /* Adjust content inside inner overlay so it doesn’t collide */ .inner-overlay { margin-top: 70px; /* gives room for image overlap */ } /* Optional fine-tune for text layout */ .text-container { margin-top: 10px; } /*#endregion SPOTLIGHT*/ /*#region ADVERT*/ #advert-section { min-height: 140vh !important; /* ensures full screen coverage */ height: auto !important; /* expands with content */ padding: 35px 15px; } .advert-layout { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-start !important; gap: 25px !important; } /* Fix the hidden image container issue */ .advert-container { width: 100% !important; height: auto !important; min-height: 490px !important; /* βœ… keeps section visible even before image loads */ display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; } .advert-left { width: 100% !important; } .advert-box { width: 95% !important; height: auto; display: flex; flex-direction: column; align-items: center; gap: 15px; } .advert-box img { width: 85% !important; height: auto; max-height: 250px !important; object-fit: cover !important; display: block !important; /* βœ… ensures image displays */ } .text-right-side { width: 90% !important; text-align: center !important; margin-top: 20px !important; } .text-right-side h2 { font-size: 1.5rem; } .text-right-side p { font-size: 0.88rem; } .text-right-side .underline { width: 200px; margin: 10px auto; } /*#endregion ADVERT*/ /*#region RANGER*/ .ranger-wrapper { width: 100% !important; /* ensures it spans full width */ display: flex !important; justify-content: center !important; /* centers the content inside */ background: linear-gradient(135deg, #0f2027 0%, #203a43 50%, #2c5364 100%); } #ranger-section { width: 90% !important; /* increase width from typical 70–80% to 90% */ max-width: 1600px !important; /* optional cap for large screens */ margin: 0 auto !important; text-align: center !important; top: 150px; } .global-reach { font-size: 1.2rem; } .value { font-size: 2.0rem; } .word { font-size: 0.85rem; } .rolling-container { font-size: 2.2rem; } /*#endregion RANGER*/ /*#region MOTIVATION*/ .motivational-messages p { font-size: 1.2rem; color: white !important; } .track-info p { color: white !important; } .track-info h3 { color: white !important; } .track-categories .category { color: white !important; } /*#endregion MOTIVATION*/ /*#region FAQ*/ #faq { width: 100%; } .faq-title { font-size: 0.95rem; width: 95% } .faq-question { font-size: 0.85rem; } .faq-answer { font-size: 0.85rem; } /*#endregion FAQ*/ /*#region OUR APP*/ .app-slide-left{ margin-top:95px; } /*#endregion OUR APP*/ /*#region FOOTER*/ .custom_footer_top { position: relative; padding: 60px 25px; overflow-x: visible; box-sizing: border-box; } .custom_footer_top .row { flex-wrap: wrap; justify-content: center; gap: 40px; /* Slightly tighter spacing for smaller screens */ } /* βœ… Center the social media icons cleanly */ .f_social_icon { display: flex; justify-content: center; align-items: center; gap: 16px; margin-top: 20px; width: 100%; text-align: center; } .f_social_icon a { font-size: 22px; color: white; transition: all 0.3s ease; } .f_social_icon a:hover { color: #00bcd4; transform: scale(1.1); } .col-md-6, .col-lg-3 { flex: 0 0 100%; max-width: 100%; } .f_widget h3 { text-align: center; } .f_widget .f_list { text-align: center; } /* βœ… Full-width subfooter with vertical stacking */ .subfooter { position: relative; left: 0; right: 0; width: 100%; max-width: none; margin: 0 auto; padding: 45px 35px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 35px; background-color: #1f3a52; border-radius: 10px; box-sizing: border-box; overflow: visible; } /* βœ… Left section (text + logo) */ .subfooter-left { width: 100%; text-align: center; align-items: center; transform: translate(15%); } /* βœ… Right section (subscribe + video) */ .subfooter-right { width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 25px; margin-top: 20px; } /* βœ… Subscribe section centered */ .subscribe-container { width: 70% !important; text-align: center !important; margin: 0 auto !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; left: 0 !important; right: 0 !important; } .subscribe-form { flex-direction: column; align-items: center; justify-content: center; } .email-input { width: 90% !important; margin-bottom: 10px; } .subf1-button { width: 170px !important; height: 46px; font-size: 0.9rem; } /* βœ… Video responsive and centered */ .image-placeholder1 video { width: 220px !important; height: 220px !important; border-radius: 12%; margin-top: 18px; display: block; object-fit: cover; /* Keep perfectly centered */ } /* βœ… Typography */ .about-subtext, .serif-f { font-size: 2rem !important; line-height: 1.2; } .privacy-statement { text-align: center; font-size: 0.98rem; margin-top: 8px; } .quick_links_widget { margin-top: 60px !important; } /* βœ… Back-to-top button alignment */ .top { right: 15px; bottom: 15px; } .subfooter-right { width: 100% !important; transform: none !important; margin-top: 0 !important; justify-content: center !important; align-items: center !important; } .subscribe-container { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center !important; margin: 0 auto 25px auto !important; position: relative !important; left: 0 !important; right: 0 !important; transform: none !important; } .image-placeholder1 { display: flex !important; justify-content: center !important; align-items: center !important; width: 100% !important; margin: 0 auto !important; transform: none !important; left: 0 !important; right: 0 !important; position: relative !important; } /*#endregion FOOTER*/ } /* Tablets portrait */ /* ========== HEIGHT-BASED (ONLY IF NEEDED) ========== */ @media (min-height: 900px) and (max-width: 599px) {} /* Tall phones (Pro Max, etc) */ @media (max-height: 700px) and (max-width: 599px) {} /* Short phones */ @media (min-width: 600px) and (max-width: 879px) and (min-height: 850px) {} /* Foldables */ /*#endregion--------------------------------------------------------------IPHONE MEDIA QUERIES-------------------------------------------------*/ /*#region--------------------------------------------------------------IPHONE MEDIA QUERIES-------------------------------------------------*/ /*#endregion */ /* πŸ”§ Fix Lighthouse font-display warning for Font Awesome */ /* Solid icons */ @font-face { font-family: "Font Awesome 6 Free"; font-style: normal; font-weight: 900; font-display: swap; /* πŸ‘ˆ ensures text/icons are visible immediately */ src: url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/webfonts/fa-solid-900.woff2") format("woff2"), url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/webfonts/fa-solid-900.woff") format("woff"); } /* Brands */ @font-face { font-family: "Font Awesome 6 Brands"; font-style: normal; font-weight: 400; font-display: swap; src: url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/webfonts/fa-brands-400.woff2") format("woff2"), url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/webfonts/fa-brands-400.woff") format("woff"); } /* Oswald */ @font-face { font-family: 'Oswald'; font-style: normal; font-weight: 100 700; /* supports a range of weights */ font-display: swap; src: url('/assets/fonts/Oswald/Oswald-VariableFont_wght.ttf') format('truetype'); } /* Open Sans */ @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 100 700; /* supports a range of weights */ font-display: swap; src: url('/assets/fonts/OpenSans/OpenSans-VariableFont_wdth,wght.ttf') format('truetype'); }