/*
Theme Name: Visaland
Author: ModinaTheme
Author URI: https://themeforest.net/user/modinatheme/
Description: Immigration & Visa Consulting HTML Template
Version: 1.1.0
*/
/*
=================================
|*** Table of contents: ***|
=================================
1. General styles
2. Typography
3. Helpers
4. Preloader
5. Go up button
6. Header and navigation
7. Hero Section
8. About us
9. Services
10. Fun facts
11. Projects
12. Pricing
13. Testimonial
14. CTA
15. Team
16. Video Banner
17. Shop
18. Marquee
19. Blog
20. Footer
Main Style file-> assets/css/main.css
*/
/* Typography matched to the Bhavishya Academy site: Montserrat for
headings, Inter for body text. main.css already declares body/h1-h6
as "Inter" but never actually loads it (no @font-face, no Google
Fonts link anywhere in the template) — it was silently falling back
to the browser's default sans-serif. The element used both
as the visible desktop menu AND as meanmenu's source list — meanmenu
(main.js) renders its OWN generated bar/toggle into the offcanvas
sidebar (`meanMenuContainer: '.mobile-menu'`), not into this header row,
and only hides the original nav here once its JS has finished running.
Hiding it here in plain CSS guarantees the header row never shows
anything but the logo + hamburger on mobile, regardless of JS timing. */
@media (max-width: 991px) {
.header-1 .mega-menu-wrapper .header-main .header-left #mobile-menu {
display: none !important;
}
}
/* Bootstrap's default .container gutter is only 12px each side (half of
--bs-gutter-x: 1.5rem) — too tight on small phones, most noticeable in
the footer where widget text runs right up to the screen edge. */
@media (max-width: 575px) {
.footer-section .container {
padding-left: 20px;
padding-right: 20px;
}
}
/* Bhavishya Overseas brand override — re-themes the template's default
red (#E20935) accent to the real brand orange, since main.css drives
almost every accent color off these CSS custom properties. */
:root {
--theme: #FC9C44;
--theme2: #F06D22;
--base: #FC9C44;
--button: #24446E;
--button2: #14141A;
}
/* Standard spinner-only preloader — the template's default letter-flip
animation + 4-panel wipe reveal removed; .preloader itself needs an
explicit background now that the wipe panels (which used to double as
the white mask) are gone. */
.preloader {
background-color: #fff;
}
.header-logo img {
max-height: 56px;
width: auto;
}
.offcanvas__logo img {
max-height: 48px;
width: auto;
}
.footer-widget-logo-text {
font-family: "Inter", sans-serif;
font-weight: 800;
font-size: 1.5rem;
color: #fff;
}
.footer-widget-logo-text em {
font-style: normal;
color: var(--theme);
}
/* Plain native in the contact form, styled to match the
template's own .form-clt input/textarea look (swapped in for
nice-select's demo markup, which needs a live JS-enhanced element
the static template didn't actually wire up). */
.contact-wrapper .contact-left .form-clt select {
border: none;
outline: none;
width: 100%;
background-color: var(--white);
padding: 18px 44px 18px 30px;
color: var(--text);
font-family: inherit;
font-size: 16px;
border-radius: 0;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%235E5F63' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 20px center;
}
.contact-wrapper .contact-left .form-clt select::-ms-expand {
display: none;
}
/* Simplified contact form/map block — removed the template's red diagonal
background photo (.contact-bg) + shape overlay (.contact-shape), the
map's diagonal clip-path, and its 730px fixed height, in favor of a
plain, shorter two-column card layout. */
.contact-wrapper .contact-left {
margin-right: 0;
padding: 40px;
background: #fff;
border-radius: 12px;
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
}
/* The fields were originally white boxes on a red background — visible
from color contrast alone, no border needed. On the new white card
they need an explicit border or they'd disappear entirely. */
.contact-wrapper .contact-left .form-clt input,
.contact-wrapper .contact-left .form-clt textarea,
.contact-wrapper .contact-left .form-clt select {
border: 1.5px solid var(--border);
}
.contact-wrapper .contact-left .form-clt input:focus,
.contact-wrapper .contact-left .form-clt textarea:focus,
.contact-wrapper .contact-left .form-clt select:focus {
border-color: var(--theme);
}
@media (max-width: 575px) {
.contact-wrapper .contact-left {
padding: 25px;
}
}
.contact-wrapper .contact-right {
margin: 0;
}
.contact-wrapper .contact-right::before {
display: none;
}
.contact-wrapper .contact-right .google-map-box {
clip-path: none;
border-radius: 12px;
overflow: hidden;
}
.contact-wrapper .contact-right .google-map-box iframe {
height: 100%;
min-height: 480px;
mix-blend-mode: normal;
}
@media (max-width: 991px) {
.contact-wrapper .contact-right .google-map-box iframe {
min-height: 400px;
}
}
@media (max-width: 767px) {
.contact-wrapper .contact-right .google-map-box iframe {
min-height: 320px;
}
}
/* Floating call/WhatsApp CTA — bottom-left, deliberately opposite side
from .scroll-up (bottom-right, main.css), so they never collide once
the back-to-top button appears on scroll. */
.floating-cta {
position: fixed;
right: 25px;
/* Clears the template's own .scroll-up (back-to-top) button, which
sits at right:25px/bottom:35px/50px tall — stacking here would
overlap it. */
bottom: 100px;
z-index: 9999;
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
}
.floating-cta a {
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
color: #fff;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
transition: all 0.3s ease;
}
.floating-cta a:hover {
transform: scale(1.08);
}
.floating-cta .fc-call {
width: 46px;
height: 46px;
font-size: 18px;
background-color: var(--theme);
}
.floating-cta .fc-whatsapp {
width: 56px;
height: 56px;
font-size: 28px;
background-color: #25d366;
}
@media (max-width: 575px) {
.floating-cta {
right: 15px;
bottom: 90px;
}
.floating-cta .fc-call {
width: 40px;
height: 40px;
font-size: 16px;
}
.floating-cta .fc-whatsapp {
width: 48px;
height: 48px;
font-size: 24px;
}
}
/* Hero height cut ~20% overall — same 20% applied to the vertical padding
(the section's biggest height driver) and to the heading size at every
breakpoint, so the whole block scales down together rather than just
getting cramped padding around an unchanged headline. */
.hero-1 .hero-content {
padding: 144px 0;
}
@media (max-width: 767px) {
.hero-1 .hero-content {
padding: 104px 0;
}
}
.hero-1 .hero-content h6 {
margin-bottom: 24px;
}
.hero-1 .hero-content h1 {
font-size: 68px;
margin-bottom: 12px;
}
@media (max-width: 1399px) {
.hero-1 .hero-content h1 {
font-size: 56px;
}
}
@media (max-width: 991px) {
.hero-1 .hero-content h1 {
font-size: 45px;
}
}
@media (max-width: 767px) {
.hero-1 .hero-content h1 {
font-size: 34px;
}
}
@media (max-width: 575px) {
.hero-1 .hero-content h1 {
font-size: 27px;
}
}
.hero-1 .hero-content p {
margin-bottom: 32px;
}
.form-message {
margin-top: 15px;
font-weight: 600;
}
.form-message.success {
color: #1c8a4b;
}
.form-message.error {
color: #d92c2c;
}
/* Testimonial avatars — real names/quotes, but no real photos, so an
initials badge instead of implying a specific stock photo is them. */
.author-image.initials-avatar {
display: flex;
align-items: center;
justify-content: center;
background-color: var(--theme) !important;
color: #fff;
font-weight: 800;
font-size: 20px;
}
/* Enquiry popup — mirrors the Bhavishya Academy site's popup: overlay +
centered white card, closable only via the X button. Deliberately no
`body.enquiry-modal-open { overflow: hidden }` background-scroll-lock
here — body is an ancestor of the popup's , and any ancestor
with overflow other than visible corrupts Chrome's native dropdown
rendering (see the notes on .enquiry-modal-overlay/.enquiry-modal-panel
below). That includes main.css's own base `body { overflow-x: hidden }`
rule (present from the original template, not something added here) —
this override cancels it specifically while the popup is open, reusing
the class enquiry-popup.js already toggles on . */
body.enquiry-modal-open {
overflow-x: visible;
}
.enquiry-modal-overlay {
display: none;
position: fixed;
inset: 0;
z-index: 99999;
background: rgba(20, 20, 26, 0.6);
align-items: center;
justify-content: center;
padding: 20px;
/* No overflow here either (see .enquiry-modal-panel below) — Chrome's
native dropdown renders corrupted (page content bleeding
through the options list) when ANY ancestor of the , not
just its direct parent, has overflow:auto/scroll. Moving the scroll
handling from the panel up to this overlay wasn't enough by itself;
removing it from both is what actually fixes it. The form is short
enough that this isn't needed in practice. */
}
.enquiry-modal-overlay.is-open {
display: flex;
}
.enquiry-modal-panel {
position: relative;
background: #fff;
width: 100%;
max-width: 460px;
border-radius: 12px;
padding: 40px 35px 35px;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
/* No overflow/max-height here on purpose: a native 's dropdown
list renders corrupted (page content bleeding through the options)
when its direct ancestor has overflow:auto — moved scroll handling
up to .enquiry-modal-overlay instead, which the isn't a
direct child of. */
}
.enquiry-modal-close {
position: absolute;
top: 16px;
right: 16px;
width: 34px;
height: 34px;
border-radius: 50%;
border: none;
background: var(--bg);
color: var(--header);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.enquiry-modal-close:hover {
background: var(--theme);
color: #fff;
}
.enquiry-modal-panel h3 {
margin-bottom: 20px;
font-size: 24px;
}
.enquiry-modal-panel .form-clt {
margin-bottom: 15px;
}
.enquiry-modal-panel .form-clt input {
border: 1.5px solid var(--border);
outline: none;
width: 100%;
background-color: #fff;
padding: 14px 20px;
color: var(--text);
font-family: inherit;
/* 16px, not 15 — anything smaller makes iOS Safari auto-zoom the whole
page on focus, a real (if easy to miss) mobile usability bug. */
font-size: 16px;
border-radius: 6px;
}
@media (max-width: 480px) {
.enquiry-modal-panel {
padding: 30px 22px 25px;
}
.enquiry-modal-panel h3 {
font-size: 20px;
}
}
.enquiry-modal-panel .form-clt input:focus {
border-color: var(--theme);
}
/* Custom dropdown replacing the native in the popup. A native
select's own dropdown list is positioned by the browser (not by our
CSS) based on viewport space — that's why it opened upward with no
overlap on the Academy site but opened downward over the Submit
button here: same markup, different per-page viewport math, nothing
we can force via CSS. Building the list ourselves lets JS decide the
open direction explicitly (see enquiry-popup.js), so it's reliable on
every page instead of left to the browser's own heuristic. */
.custom-select-wrap {
position: relative;
}
.custom-select-trigger {
width: 100%;
border: 1.5px solid var(--border);
outline: none;
background-color: #fff;
padding: 14px 20px;
color: var(--text);
font-family: inherit;
font-size: 16px;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
cursor: pointer;
text-align: left;
}
.custom-select-wrap:not(.has-value) .custom-select-value {
color: #6c6c6c;
}
.custom-select-trigger i {
font-size: 13px;
color: #5e5f63;
flex-shrink: 0;
transition: transform 0.2s ease;
}
.custom-select-wrap.is-open .custom-select-trigger {
border-color: var(--theme);
}
.custom-select-wrap.is-open .custom-select-trigger i {
transform: rotate(180deg);
}
.custom-select-wrap.is-invalid .custom-select-trigger {
border-color: #d9364f;
}
.custom-select-options {
list-style: none;
margin: 0;
padding: 6px;
position: absolute;
left: 0;
right: 0;
z-index: 20;
background: #fff;
border: 1px solid var(--border);
border-radius: 8px;
box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18);
max-height: 240px;
overflow-y: auto;
display: none;
}
.custom-select-options.open-down {
top: calc(100% + 6px);
bottom: auto;
}
.custom-select-options.open-up {
bottom: calc(100% + 6px);
top: auto;
}
.custom-select-wrap.is-open .custom-select-options {
display: block;
}
.custom-select-options li {
padding: 10px 14px;
border-radius: 5px;
cursor: pointer;
font-size: 15px;
color: var(--text);
}
.custom-select-options li:hover,
.custom-select-options li.is-active {
background: var(--bg);
color: var(--theme);
}
.enquiry-modal-panel .theme-btn {
border: none;
cursor: pointer;
}
.enquiry-modal-panel .theme-btn:disabled {
opacity: 0.65;
cursor: not-allowed;
}
.enquiry-form-message {
font-weight: 600;
font-size: 14px;
}
.enquiry-form-message.success {
background: #eafaf0;
color: #1c8a4b;
padding: 10px 14px;
border-radius: 6px;
margin-bottom: 15px;
}
/* Counter section stat numbers — smaller than the template default so
they don't dominate the section at this content length. */
.counter-wrapper .counter-items .content h2 {
font-size: 45px;
}
@media (max-width: 767px) {
.counter-wrapper .counter-items .content h2 {
font-size: 38px;
}
}
@media (max-width: 575px) {
.counter-wrapper .counter-items .content h2 {
font-size: 34px;
}
}
.enquiry-form-message.error {
background: #fdecec;
color: #d92c2c;
padding: 10px 14px;
border-radius: 6px;
margin-bottom: 15px;
}