/*!
Theme Name: Best Profile
Theme URI: https://bestprofilept.com/
Author:GWT
Author URI:  https://www.genesiswtech.com/
Description: Website by Genesis Web Technology
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: best-profile
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

Best Profile is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* Normalize
--------------------------------------------- */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
	 ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
/* html {
	line-height: 1.15;
	-webkit-text-size-adjust: 100%;
} */

/* Sections
	 ========================================================================== */

/**
 * Remove the margin in all browsers.
 */
/* body {
	margin: 0;
} */

/**
 * Render the `main` element consistently in IE.
 */
/* main {
	display: block;
} */

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
/* h1 {
	font-size: 2em;
	margin: 0.67em 0;
} */

/* Grouping content
	 ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
/* hr {
	box-sizing: content-box;
	height: 0;
	overflow: visible;
} */

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
/* pre {
	font-family: monospace, monospace;
	font-size: 1em;
} */

/* Text-level semantics
	 ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */
/* a {
	background-color: transparent;
} */

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
/* abbr[title] {
	border-bottom: none;
	text-decoration: underline;
	text-decoration: underline dotted;
} */

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
/* b,
strong {
	font-weight: bolder;
} */

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
/* code,
kbd,
samp {
	font-family: monospace, monospace;
	font-size: 1em;
} */

/**
 * Add the correct font size in all browsers.
 */
/* small {
	font-size: 80%;
} */

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
/* sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
} */

/* Embedded content
	 ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */
/* img {
	border-style: none;
} */

/* Forms
	 ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
/* button,
input,
optgroup,
select,
textarea {
	font-family: inherit;
	font-size: 100%;
	line-height: 1.15;
	margin: 0;
} */

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
/* button,
input {
	overflow: visible;
} */

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
/* button,
select {
	text-transform: none;
} */

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
/* button,
[type="button"],
[type="reset"],
[type="submit"] {
	-webkit-appearance: button;
} */

/**
 * Remove the inner border and padding in Firefox.
 */
/* button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
	border-style: none;
	padding: 0;
} */

/**
 * Restore the focus styles unset by the previous rule.
 */
/* button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
	outline: 1px dotted ButtonText;
} */

/**
 * Correct the padding in Firefox.
 */
/* fieldset {
	padding: 0.35em 0.75em 0.625em;
} */

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *		`fieldset` elements in all browsers.
 */
/* legend {
	box-sizing: border-box;
	color: inherit;
	display: table;
	max-width: 100%;
	padding: 0;
	white-space: normal;
} */

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
/* progress {
	vertical-align: baseline;
} */

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
/* textarea {
	overflow: auto;
} */

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
/* [type="checkbox"],
[type="radio"] {
	box-sizing: border-box;
	padding: 0;
} */

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
/* [type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
	height: auto;
}
 */

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
/* [type="search"] {
	-webkit-appearance: textfield;
	outline-offset: -2px;
} */

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
/* [type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
} */

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
/* ::-webkit-file-upload-button {
	-webkit-appearance: button;
	font: inherit;
} */

/* Interactive
	 ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
/* details {
	display: block;
} */

/*
 * Add the correct display in all browsers.
 */
/* summary {
	display: list-item;
} */

/* Misc
	 ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */
/* template {
	display: none;
} */

/**
 * Add the correct display in IE 10.
 */
/* [hidden] {
	display: none;
} */

/* Box sizing
--------------------------------------------- */

/* Inherit box-sizing to more easily change it's value on a component level.
@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
/* *,
*::before,
*::after {
	box-sizing: inherit;
}

html {
	box-sizing: border-box;
} */

/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/

/* Typography
--------------------------------------------- */


/* ─────────────────────────────────────────────────────────────
   Best Profile – Main Stylesheet
   Fonts: Montserrat 700 (headings) · Inter 500 (body)
───────────────────────────────────────────────────────────── */


/* ===========================
   BEST PROFILE — Hero Section
   =========================== */

/* ── Variables ── */

/* ── Reset for header scope ── */
/* #masthead *,
#masthead *::before,
#masthead *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
} */

/* ══════════════════════════════
   HEADER WRAPPER
══════════════════════════════ */
/* #masthead.site-header {
  position: sticky;
  top: 0;
  z-index: 999;
  width: 100%;
  height: var(--bp-header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4%;
  background: linear-gradient(
    90deg,
    var(--bp-navy-dark) 0%,
    var(--bp-navy) 60%,
    #0f2847 100%
  );
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: 0 2px 24px rgba(0, 0, 0, 0.45);
  font-family: var(--primary-font);
} */

#masthead.site-header {
  position: sticky !important;
  top: 0;
  position: fixed !important;
  /* z-index: 99; */
  z-index: 9999;
  width: 100%;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4%;

  background: rgba(10, 22, 40, 0.25);
  backdrop-filter: blur(12px) saturate(180%);
  -webkit-backdrop-filter: blur(12px) saturate(180%);

  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  margin-bottom: -72px;
  font-family: var(--primary-font);
}

/* ══════════════════════════════
   SITE BRANDING (Logo area)
══════════════════════════════ */
.site-branding {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2px;
}

/* Custom logo image */
.site-branding .custom-logo-link {
  display: flex;
  align-items: center;
  justify-content: center;
}

.site-branding .custom-logo {
  height: 80px;
  width: auto;
  object-fit: contain;
  filter: brightness(1) invert(0);
}

/* Fallback text logo (when no custom logo set) */
.site-branding .site-title {
  font-family: var(--primary-font);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  line-height: 1;
  margin-top: 4px;
}

.site-branding .site-title a {
  color: #ffffff;
  text-decoration: none;
}

.site-branding .site-title a:hover {
  opacity: 0.85;
}

.site-branding .site-description {
  font-size: 8.5px;
  letter-spacing: 1px;
  color: rgba(255, 255, 255, 0.50);
  text-transform: lowercase;
  margin-top: 1px;
}

/* ══════════════════════════════
   MAIN NAVIGATION
══════════════════════════════ */
.main-navigation {
  display: flex;
  align-items: center;
}

/* WP generates: nav > div > ul */
.main-navigation ul {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
  padding: 0;
}

.main-navigation ul li {
  position: relative;
}

.main-navigation ul li a {
  display: block;
  padding: 6px 14px;
  font-size: 16px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s;
  position: relative;
  text-transform: capitalize;
  font-family: var(--primary-font);
  letter-spacing: 2%;
  line-height: 16px;
}

/* Red underline accent */
.main-navigation ul li a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 14px;
  right: 14px;
  height: 2px;
  background: var(--primary);
  border-radius: 1px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}

.main-navigation ul li a:hover {
  color: var(--white);
}

.main-navigation ul li a:hover::after {
  transform: scaleX(1);
}

/* Active / current page */
.main-navigation ul li.current-menu-item>a,
.main-navigation ul li.current_page_item>a,
.main-navigation ul li.current-menu-ancestor>a {
  color: var(--white);
  font-weight: 600;
}

.main-navigation ul li.current-menu-item>a::after,
.main-navigation ul li.current_page_item>a::after,
.main-navigation ul li.current-menu-ancestor>a::after {
  transform: scaleX(1);
}

/* ── Dropdown sub-menus ── */
.main-navigation ul ul {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  min-width: 120px;
  flex-direction: column;
  gap: 0;
  background: #C32627;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-top: 2px solid var(--bp-red);
  border-radius: 0 0 4px 4px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
  z-index: 100;
  padding: 4px 0;
  margin-top: 20px;
}

.main-navigation ul li:hover>ul,
.main-navigation ul li:focus-within>ul {
  display: flex;
}

.main-navigation ul ul li a {
  padding: 10px 18px;
  font-size: 12.5px;
  border-radius: 0;
  color: rgba(255, 255, 255, 0.78);
}

.main-navigation ul ul li a::after {
  display: none;
}

.main-navigation ul ul li a:hover {
  background: rgba(195, 38, 39, 0.15);
  color: var(--bp-white);
}

/* hamburger */
button.menu-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 8px 10px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.4);
  cursor: pointer;
  align-items: center;
  justify-content: center;
}

button.menu-toggle::before,
button.menu-toggle::after {
  content: '';
  display: block;
  width: 22px;
  height: 2px;
  background: #ffffff;
  border-radius: 2px;
  transition: transform 0.3s, opacity 0.3s;
}

button.menu-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: #ffffff;
  border-radius: 2px;
  transition: opacity 0.3s;
}


/* Animate to X when open */
button.menu-toggle.toggled::before {
  transform: translateY(7px) rotate(45deg);
}

button.menu-toggle.toggled span {
  opacity: 0;
}

button.menu-toggle.toggled::after {
  transform: translateY(-7px) rotate(-45deg);
}











/* ══════════════════════════════
   RESPONSIVE
══════════════════════════════ */

/* Tablet */
@media (max-width: 900px) {
  #masthead.site-header {
    padding: 0 5%;
  }

  .main-navigation ul {
    gap: 0;
  }

  .main-navigation ul li a {
    padding: 8px 10px;
    /* font-size: 12.5px; */
  }

  .hero-right {
    width: 100%;
    margin: 20px 0;
  }

  .hero-card {
    width: 100%;
  }
}

/* Mobile */
@media (max-width: 768px) {
  #masthead.site-header {
    height: auto;
    align-items: center;
    padding: 0 5%;
    position: relative;
    display: flex;
  }

  .site-branding {
    padding: 14px 0;
  }

  /* Show hamburger */
  /* .menu-toggle {
    display: flex;
  }
  .button.menu-toggle{
    display: block;
  } */

  /* Hide nav by default on mobile */
  .main-navigation {
    width: 100%;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
  }

  /* JS adds .toggled to nav#site-navigation */
  .main-navigation.toggled {
    max-height: 600px;
  }

  .main-navigation ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 0 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
  }

  .main-navigation ul li a {
    padding: 12px 6px;
    /* font-size: 14px; */
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  }

  .main-navigation ul li a::after {
    display: none;
  }

  .main-navigation ul li.current-menu-item>a {
    color: var(--primary);
  }

  /* Dropdowns stack on mobile */
  .main-navigation ul ul {
    position: static;
    border: none;
    border-top: none;
    box-shadow: none;
    border-left: 2px solid var(--bp-red);
    margin-left: 12px;
    background: transparent;
    display: none;
    padding: 0;
  }

  .main-navigation ul li.focus>ul,
  .main-navigation ul li:focus-within>ul {
    display: flex;
  }

  .main-navigation ul ul li a {
    color: rgba(255, 255, 255, 0.65);
    padding: 10px 12px;
    font-size: 13px;
  }
}

.small-title p {
  font-family: var(--secondary-font);
  font-size: 16px;
  line-height: 25px;
  letter-spacing: -1%;
  font-weight: 400;
  color: var(--white);
}

.small-title-black p {
  color: var(--tertiary) !important;
}

.contact-us-section .small-title p {
  color: var(--white);
}


/* ── Large Desktop (1200px–1439px) ──────── */
@media (max-width: 1439px) {
  .contact-us-section {
    min-height: 78vh;
  }
}

/* ── Desktop (992px–1199px) ─────────────── */
@media (max-width: 1199px) {
  .contact-us-section {
    min-height: 75vh;
  }
}

/* ── Tablet Landscape (768px–991px) ─────── */
@media (max-width: 991px) {
  .contact-us-section {
    min-height: 65vh !important;
  }
}

/* ── Tablet Portrait (576px–767px) ──────── */
@media (max-width: 767px) {
  .contact-us-section {
    min-height: 60vh !important;
    justify-content: flex-start;
    padding-top: 48px;
    padding-bottom: 48px;
  }
}

/* ── Mobile Large (425px–575px) ─────────── */
@media (max-width: 575px) {
  .contact-us-section {
    min-height: 55vh !important;
    justify-content: flex-start;
    padding-top: 40px;
    padding-bottom: 40px;
  }
}

/* ── Mobile Medium (375px–424px) ────────── */
@media (max-width: 424px) {
  .contact-us-section {
    min-height: 50vh !important;
    justify-content: flex-start;
    padding-top: 36px;
    padding-bottom: 36px;
  }
}

/* ── Mobile Small (320px–374px) ─────────── */
@media (max-width: 374px) {
  .contact-us-section {
    min-height: auto;
    justify-content: flex-start;
    padding-top: 30px;
    padding-bottom: 30px;
  }
}

/* ── Landscape Mode (phones tilted) ─────── */
@media (max-height: 500px) and (orientation: landscape) {
  .contact-us-section {
    min-height: 100vh;
    justify-content: center;
    padding-top: 40px;
    padding-bottom: 40px;
  }
}

/* common babber responsive  */













/* =========
   HERO
   ========= */
.hero {
  position: relative;
  min-height: 95vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-top: 72px;
}


/* subtle noise grain overlay */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 1;

}

/* =========
   NAVBAR
   ========= */
.navbar {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-height);
  padding: 0 5%;
  background: rgba(10, 22, 40, 0.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}


/* Nav links */
.nav-links {
  list-style: none;
  display: flex;
  gap: 32px;
}

.nav-links a {
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.5px;
  color: var(--off-white);
  transition: color 0.2s;
  position: relative;
  padding-bottom: 4px;
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--red);
  transition: width 0.25s ease;
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--white);
}

.nav-links a:hover::after,
.nav-links a.active::after {
  width: 100%;
}

/* Hamburger */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
}

.nav-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--white);
  border-radius: 2px;
  transition: transform 0.3s, opacity 0.3s;
}

/* ===============
   HERO CONTENT
   =============== */
.hero-content {
  position: relative;
  z-index: 5;
  flex: 1;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  /* padding: 0 5% 80px; */
  gap: 40px;
  padding: 175px 0 80px;

  /* min-height: calc(100vh - var(--bp-header-h)); */

}


.hero-left {
  /* max-width: 480px; */
  display: flex;
  flex-direction: column;
  /* gap: 15px; */
  padding-bottom: 10px;
  width: 78%;
}

.small-text-top {
  font-family: var(--primary-font);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -1%;
  line-height: 130%;
  text-transform: uppercase;
  margin-bottom: 16px;
  opacity: 0;
  animation: fadeUp 0.7s 0.2s forwards;
  color: #1A1A1A;
}

/* .small-text-top-black {
  color: #1A1A1A;
} */
.small-text-top-white {
  color: var(--white);
}


.hero-heading {
  font-family: var(--primary-font);
  /* font-size: clamp(64px, 6vw, 72px); */
  font-size: 64px;
  font-weight: 700;
  /* line-height: 70px; */
  color: var(--white);
  letter-spacing: -1%;
  margin-bottom: 25px;
  opacity: 0;
  animation: fadeUp 0.7s 0.35s forwards;
}

/* CTA buttons */
.hero-cta {
  display: flex;
  gap: 14px;
  flex-wrap: nowrap;
  opacity: 0;
  animation: fadeUp 0.7s 0.5s forwards;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 17px;
  font-weight: 500;
  letter-spacing: 0.4px;
  border-radius: 5px;
  text-decoration: none;
  transition: all 0.22s ease;
  cursor: pointer;
  font-family: var(--primary-font);
  font-size: 16px;
}

.btn-primary {
  background: var(--primary);
  color: var(--white);
  border: 2px solid var(--primary);
}

.btn-primary:hover {
  background: var(--white);
  border-color: var(--white);
  transform: translateY(-2px);
  color: var(--primary);
}

.btn-space {
  margin-top: 20px;
}

.btn-outline {
  background: var(--white);
  color: var(--tertiary);
  border-radius: 5px;
}

.btn-outline:hover {
  background: rgba(5, 0, 0, 0.08);
  transform: translateY(-2px);
  color: var(--white);
  background: var(--primary);
  border-color: var(--primary);
}

.btn svg {
  transition: transform 0.2s ease;
}

.btn:hover svg {
  transform: translateX(3px);
}

/* Right column — card */



.hero-right {
  position: absolute;
  right: 5%;
  bottom: -150px;
  /* bottom: 5px; */
  top: auto;
  transform: none;
  max-width: 435px;
  width: 100%;
  opacity: 0;
  animation: fadeUp 0.7s 0.6s forwards;
  z-index: 2;
}

.hero-card {
  background: rgba(255, 248, 235, 0.12);
  backdrop-filter: blur(20px) saturate(150%) brightness(1.1);
  -webkit-backdrop-filter: blur(20px) saturate(150%) brightness(1.1);

  border: 1px solid rgba(255, 255, 255, 0.20);
  border-left: 3px solid var(--red);
  border-radius: 8px;
  padding: 28px 24px;

  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.hero-card p {

  font-size: 13px;
  line-height: 1.85;
  color: rgba(255, 255, 255, 0.92);
  font-weight: 400;
  font-family: var(--secondary-font);
}

/* ============
   TICKER BAR
   ============ */
.ticker-bar {
  position: relative;
  z-index: 10;
  background: var(--primary);
  overflow: hidden;
  padding: 13px 0;
  white-space: nowrap;
}

.ticker-bar ul {
  display: flex;
  /* flex instead of inline for ul */
  list-style: none;
  /* removes bullet points */
  margin: 0;
  /* removes default ul margin */
  padding: 0;
  /* removes default ul padding */
  width: max-content;
  animation: ticker-scroll 30s linear infinite;

}

.ticker-bar li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 300;
  text-transform: uppercase;
  color: var(--white);
  padding: 0 28px;
  font-family: var(--primary-font);
}



.ticker-bar li::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
  flex-shrink: 0;
}

/* ============
   ANIMATIONS
   ============ */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(22px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes ticker {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

/* ============
   RESPONSIVE
   ============ */


/* ── Large Desktop (1200px–1439px) ──────── */
/* @media (max-width: 1439px) {
  .hero {
    min-height: 100vh;
    padding-top: 68px;
  }
}

@media (max-width: 1199px) {
  .hero {
    min-height: 100vh;
    padding-top: 64px;
  }
} */

/* ── Tablet Landscape (768px–991px) ─────── */
@media (max-width: 991px) {
  .hero {
    min-height: 60vh;
    padding-top: 60px;
  }
}

/* ── Tablet Portrait (576px–767px) ──────── */
@media (max-width: 767px) {
  .hero {
    min-height: 60vh;
    padding-top: 56px;
  }
}

/* ── Mobile Large (425px–575px) ─────────── */
@media (max-width: 575px) {
  .hero {
    min-height: 55vh;
    padding-top: 56px;
  }
}

/* ── Mobile Medium (375px–424px) ────────── */
@media (max-width: 424px) {
  .hero {
    min-height: 50vh;
    padding-top: 52px;
  }
}

/* ── Mobile Small (320px–374px) ─────────── */
@media (max-width: 374px) {
  .hero {
    min-height: 50vh;
    padding-top: 48px;
  }
}

/* ── Landscape Mode (phones tilted) ─────── */
/* @media (max-height: 500px) and (orientation: landscape) {
  .hero {
    min-height: 100vh;
    padding-top: 52px;
  }
} */

/* Tablet — ≤ 900px */




@media (max-width: 900px) {
  .hero-content {
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-end;
    padding-bottom: 60px;
  }


}

/* Mobile nav — ≤ 768px */
@media (max-width: 768px) {
  .nav-toggle {
    display: flex;
  }

  .nav-links {
    display: none;
    flex-direction: column;
    gap: 0;
    position: absolute;
    top: var(--nav-height);
    left: 0;
    right: 0;
    background: rgba(10, 22, 40, 0.97);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    z-index: 100;
    padding: 8px 0;
  }

  .nav-links.open {
    display: flex;
  }

  .nav-links li {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  }

  .nav-links a {
    display: block;
    padding: 14px 5%;
  }

  .nav-links a::after {
    display: none;
  }

  /* .hero {
    min-height: 69vh;
  } */

  .hero-content {
    padding: 0 5% 48px;
    gap: 28px;
  }

  .hero-heading {
    /* font-size: clamp(36px, 9vw, 54px); */
    font-size: 36px;
  }
}

/* Small mobile — ≤ 480px */
@media (max-width: 480px) {

  .hero-cta {
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    width: 100%;
  }

  .hero-cta .btn-explore,
  .hero-cta .btn-contact {
    flex: 1;
    text-align: center;
    white-space: nowrap;
  }

  .btn {
    width: 100%;
    justify-content: center;
  }

  .hero-card p {
    font-size: 12px;
  }

  .ticker-item {
    font-size: 10px;
    padding: 0 18px;
  }
}

@media (max-width: 411px) {
  .hero-cta {
    gap: 8px;
  }

  .hero-cta a,
  .hero-cta button {
    /* font-size: 13px; */
    padding: 10px 14px;
  }
}

/* ── 375px ─────────────────────────────── */
@media (max-width: 375px) {
  .hero-cta {
    gap: 6px;
  }

  .hero-cta a,
  .hero-cta button {
    font-size: 12px;
    padding: 9px 12px;
  }
}

/* ── 360px ─────────────────────────────── */
@media (max-width: 360px) {
  .hero-cta {
    gap: 6px;
  }

  .hero-cta a,
  .hero-cta button {
    font-size: 12px;
    padding: 8px 10px;
  }
}

/* ── 320px ─────────────────────────────── */
@media (max-width: 320px) {
  .hero-cta {
    flex-direction: column;
    /* ← stack only on smallest screens */
    gap: 8px;
  }

  .hero-cta a,
  .hero-cta button {
    width: 100%;
    /* ← full width when stacked */
    text-align: center;
    font-size: 12px;
    padding: 10px;
  }
}



/* about-us section  */

.about-section {
  padding: 0 0 80px;
}

.title-center {
  text-align: center;
  margin-bottom: 50px;
}

.title-center h2 {
  color: var(--secondary) !important;
}

.title-center-black h2 {
  color: var(--text-dark) !important;
}

.about-image-wrap-2 {
  display: none;
}


/* ══════════════════════════════
   TOP: IMAGE + CONTENT
══════════════════════════════ */
.about-top {
  display: flex;
  align-items: center;
  gap: 60px;
}

/* ── Image ── */
.about-image-wrap {
  position: relative;
  flex-shrink: 0;
  /* width: 340px; */
  /* height: 320px; */
  border-radius: 5px;
  overflow: visible;
}

.about-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 5px;
  display: block;
}

/* Since / Year badge — top right corner */
.about-year-badge {
  position: absolute;
  top: 30px;
  right: -1px;
  background: var(--white);
  border: 1px solid rgba(0, 0, 0, 0.08);
  padding: 10px 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.10);
  min-width: 72px;
  border-bottom-left-radius: 5px;
  border-top-left-radius: 5px;
}

.badge-since {
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0%;
  text-transform: uppercase;
  color: #1A1A1A;
  margin-bottom: 10px;
  line-height: 16px;
}

.badge-year {
  font-size: 32px;
  font-weight: 500;
  color: var(--tertiary);
  letter-spacing: 0%;
  line-height: 16px;
}

/* ── Content ── */
.about-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  /* gap: 14px; */
}



.top-title h2 {
  font-family: var(--primary-font);
  font-size: 36px;
  font-weight: 700;
  line-height: 44px;
  color: var(--text-dark);
  letter-spacing: -1%;
  text-transform: capitalize;
  margin-bottom: 20px;
}

.top-title p {
  font-size: 16px;
  font-weight: 400;
  line-height: 25px;
  letter-spacing: -1%;
  color: var(--text-dark);
  font-family: var(--secondary-font);
  margin-bottom: 15px;
}

/* ══════════════════════════════
   BOTTOM: STATS
══════════════════════════════ */
.about-stats {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0;
  padding: 70px 90px 0;
}

.stat-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}

.stat-dot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

/* Circle */
.stat-circle {
  position: relative;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  border: 2px dashed #b0c4de;
  background: transparent;
  display: flex;
  align-items: center;
  justify-content: center;

}

.stat-circle::before {
  content: '';
  position: absolute;
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: #dce9f8;
}



.stat-number {
  font-size: 22px;
  font-weight: 700;
  color: var(--tertiary);
  position: relative;
  z-index: 1;
}

.stat-label {
  font-size: 16px;
  font-weight: 500;
  color: #1A1A1A;
  text-align: center;
  letter-spacing: 0%;
  line-height: 16px;
  margin: 0;
}

/* Vertical divider between stats */
.stat-divider {
  width: 2px;
  height: 151px;
  background: rgba(0, 0, 0, 0.10);
  flex-shrink: 0;
}




/* ══════════════════════════════
   RESPONSIVE
══════════════════════════════ */

/* Tablet — ≤ 900px */
@media (max-width: 900px) {
  .about-top {
    gap: 40px;
  }

  .about-image-wrap {
    width: 280px;
    height: 270px;
  }

  .about-stats {
    gap: 8px;
  }

  .stat-circle {
    width: 78px;
    height: 78px;
  }

  .stat-number {
    font-size: 22px;
  }
}

/* Tablet portrait — ≤ 768px */
@media (max-width: 768px) {
  .about-section {
    padding: 0 0 50px;
  }

  .services-section {
    padding: 0 0 50px !important;
  }

  .why-choose-section {
    padding: 0 0 50px !important;
  }

  .partners-section {
    padding: 0 0 50px !important;
  }

  .timezone-section {
    padding: 0 0 50px !important;
  }

  .testimonial-section {
    padding: 0 0 50px !important;
  }

  .contact-us-section {
    padding: 0 0 50px !important;
  }

  .btn-wrap {
    margin-top: 0 !important;
  }

  .why-choose-section .btn-wrap {
    margin-top: 40px !important;
  }



  .about-image-wrap {
    display: none;
  }

  .about-image-wrap-2 {
    display: block;
    width: 100%;
    /* max-width: 380px; */
    height: 280px;
  }

  .top-title p {
    text-align: center;
    margin-top: 20px;
  }

  .about-top {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 32px;
  }

  .btn .btn-primary {
    margin-left: auto;
    margin-right: auto;
  }

  .btn .btn-primary {
    align-self: center;
  }

  .about-stats {
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px 0;
    padding: 20px 0 0;
  }

  .stat-item {
    flex: 0 0 50%;
  }

  .stat-divider {
    display: none;
  }
}

/* Mobile — ≤ 480px */
@media (max-width: 480px) {
  .about-section {
    padding: 48px 0 40px;
  }

  .about-image-wrap {
    height: 240px;
  }

  .badge-year {
    font-size: 24px;
  }

  .about-stats {
    gap: 20px 0;
  }

  .stat-item {
    flex: 0 0 50%;
  }

  .stat-circle {
    width: 70px;
    height: 70px;
  }

  .stat-number {
    font-size: 20px;
  }

  .stat-label {
    font-size: 11.5px;
  }
}

/* Small mobile — ≤ 360px */
@media (max-width: 360px) {
  .about-image-wrap {
    height: 210px;
  }

  .stat-item {
    flex: 0 0 100%;
  }
}

/* services section */

.services-section {
  /* position: relative; */
  padding: 0 0 80px;
  background-attachment: fixed !important;
  /* background:
     url('http:assets/img/services-bg.png')
    center / cover no-repeat; */
  /* background: url('../assets/img/services-bg.png'); */
  /* background: url('../assets/img/services-bg.png') center / cover no-repeat; */
  background: linear-gradient(to right, #0a0f5c, #0d1466, #1a2080);



}

.swiper-button-disabled {
  opacity: 0.3;
  pointer-events: none;
}

.small-text-top span.line {
  display: inline-block;
  width: 30px;
  height: 1px;
  background: #ffffff;
  vertical-align: middle;
  flex-shrink: 0;
  margin-right: 5px;
  margin-left: 5px;
}

.small-text-top span.line-black {
  display: inline-block;
  width: 30px;
  height: 1px;
  background: var(--tertiary);
  vertical-align: middle;
  flex-shrink: 0;
  margin-right: 5px;
  margin-left: 5px;
}


/* ══════════════════════════════
   GRID
══════════════════════════════ */
.services-slider-wrap {
  width: 100%;
  overflow: hidden;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  width: 100%;
}

/* ══════════════════════════════
   CARD
══════════════════════════════ */

.service-card {
  /* background: #0f2a6e; */
  border-radius: 16px;
  width: 100%;
  padding-bottom: 20px;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

.service-icon img {
  width: 32px;
  height: 32px;
  object-fit: contain;
  filter: brightness(0) invert(1);
}

.service-connector {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.connector {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  padding: 0;
  margin: 0;
}

.connector-line {
  width: 2px;
  height: 60px;
  border-left: 2px dashed #ffffff;
  margin: 0;
}

.connector-dot-bottom {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid #002887;
}


/* first two spans = small dots (dashed line effect) */
.service-icon-dots span:nth-child(1),
.service-icon-dots span:nth-child(2) {
  width: 3px;
  height: 3px;
  background: rgba(100, 140, 255, 0.5);
}

/* last span = larger solid dot at bottom */
.service-icon-dots span:nth-child(3) {
  width: 8px;
  height: 8px;
  background: #1a3a8f;
  border: 2px solid rgba(100, 140, 255, 0.6);
  margin-top: 2px;
}

/* ── Card body (lighter section) ── */
.service-card-body {
  background: linear-gradient(to bottom, #002887, #0245E7);
  border-radius: 12px;
  /* margin: 0 10px; */
  padding: 40px 14px 60px;
  position: relative;
  flex: 1;
  max-height: 220px;
}

.service-title {
  color: #ffffff;
  font-size: 19px;
  font-weight: 600;
  margin: 0 0 20px;
  line-height: 1.3;
  font-family: var(--primary-font);
  letter-spacing: -1%;
}

.service-text {
  color: #F5F5F5F0;
  font-size: 16px;
  line-height: 25px;
  letter-spacing: -1%;
  font-family: var(--secondary-font);
  font-weight: 500;
}

/* ── Arrow button (bottom-right) ── */
.service-arrow {
  position: absolute;
  bottom: 20px;
  right: 20px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1.5px solid #F5F5F5F0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #F5F5F5F0;
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s;
}


/* ── Icon area ── */
.service-icon-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* gap: 12px; */
  /* margin-bottom: 24px; */
}

.service-icon {
  width: 56px;
  height: 56px;
  background: #002887;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

/* Dotted connector line below icon */
.service-icon-dots {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;

}

.service-icon-dots span {
  display: block;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.35);
}

.service-arrow:hover {
  border-color: #c32627;
  background: #c32627;
  color: #ffffff;
}

/* ══════════════════════════════
   NAV ARROWS
══════════════════════════════ */
.services-nav {
  display: flex;
  gap: 10px;
  justify-content: center;
  margin-top: 20px;
}

.nav-arrow {
  width: 50px;
  height: 30px;
  border-radius: 12%;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, transform 0.2s;
}

.nav-prev {
  background: #c32627;
  color: #ffffff;
}

.nav-next {
  background: rgba(255, 255, 255, 0.15);
  color: #ffffff;
}

.nav-arrow:hover {
  transform: scale(1.08);
}

.nav-next:hover {
  background: #c32627;
}

/* ══════════════════════════════
   RESPONSIVE
══════════════════════════════ */

/* Tablet landscape — ≤ 1024px */
@media (max-width: 1024px) {
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .hero-right {
    margin-bottom: 20px;
  }
}

/* Tablet portrait — ≤ 768px */
@media (max-width: 768px) {
  .services-slider-wrap {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }

  .services-slider-wrap::-webkit-scrollbar {
    display: none;
  }

  .services-grid {
    display: flex;
    gap: 16px;
    width: max-content;
  }

  .service-card {
    width: 100%;
    /* ⬆ was 260px */
    scroll-snap-align: start;
    flex-shrink: 0;
    height: auto;
  }
}

/* Mobile — ≤ 480px */
@media (max-width: 480px) {
  .service-card {
    width: 100%;
    height: auto;
  }

  .service-card-body {
    max-height: unset;
    padding: 32px 18px 60px;
  }

  .service-icon {
    width: 52px;
    height: 52px;
  }

  .service-title {
    font-size: 17px;
  }

  .service-text {
    font-size: 14px;
  }

  .nav-arrow {
    width: 42px;
    height: 42px;
  }
}


/* why choose us section  */

.why-choose-section {
  padding: 0 0 80px;

}

/* ══════════════════════════════
   GRID
══════════════════════════════ */

.portugal-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(2, 260px);
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 4px 32px rgba(0, 0, 0, 0.07);
}

.portugal-card {
  position: relative;
  overflow: hidden;
}



/* Row 2 swaps: image first, then text */
.portugal-card:nth-child(5) {
  order: 6;
}

.portugal-card:nth-child(6) {
  order: 5;
}

.portugal-card:nth-child(7) {
  order: 8;
}

.portugal-card:nth-child(8) {
  order: 7;
}

.portugal-card--text {
  background: #ffffff;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.card-title {
  font-family: var(--primary-font);
  font-size: 20px;
  font-weight: 600;
  color: #272727;
  line-height: 26px;
  margin: 0;
  letter-spacing: -1%;
}

.card-text {
  font-size: 15px;
  line-height: 24px;
  color: #272727;
  margin: 0;
  font-weight: 400;
  font-family: var(--secondary-font);
  letter-spacing: -1%;
}

.portugal-card--image {
  overflow: hidden;
}

.portugal-card--image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.portugal-card--image:hover img {
  transform: scale(1.05);
}


/* ══════════════════════════════
   RESPONSIVE
══════════════════════════════ */
@media (max-width: 1024px) {
  .portugal-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
  }

  /* Each pair = one row (text + image side by side) */
  .portugal-card {
    width: 100%;
  }

  /* Make every 2 cards a row */
  .portugal-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 280px;
  }

  /* Row 1 — text left, image right (default) */
  .portugal-card:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
  }

  .portugal-card:nth-child(2) {
    grid-column: 2;
    grid-row: 1;
  }

  /* Row 2 — image left, text right (swap) */
  .portugal-card:nth-child(3) {
    grid-column: 2;
    grid-row: 2;
  }

  .portugal-card:nth-child(4) {
    grid-column: 1;
    grid-row: 2;
  }

  /* Row 3 — text left, image right */
  .portugal-card:nth-child(5) {
    grid-column: 1;
    grid-row: 3;
  }

  .portugal-card:nth-child(6) {
    grid-column: 2;
    grid-row: 3;
  }

  /* Row 4 — image left, text right (swap) */
  .portugal-card:nth-child(7) {
    grid-column: 2;
    grid-row: 4;
  }

  .portugal-card:nth-child(8) {
    grid-column: 1;
    grid-row: 4;
  }

  /* Image cards fill height */
  .portugal-card--image {
    min-height: 280px;
    height: 100%;
  }

  .portugal-card--image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Text cards padding */
  .portugal-card--text {
    padding: 28px 24px;
  }
}


/* 
@media (max-width: 575px) {
  .portugal-grid {

    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }

  .portugal-card:nth-child(n) {
    grid-column: 1;
    grid-row: auto;
  }

  .portugal-card {
    width: 100%;
  }

  .portugal-card--image {
    min-height: 220px;
  }

  .portugal-card:nth-child(1) {
    order: 1;
  }

  .portugal-card:nth-child(2) {
    order: 2;
  }

  .portugal-card:nth-child(3) {
    order: 3;
  }

  .portugal-card:nth-child(4) {
    order: 4;
  }

  .portugal-card:nth-child(5) {
    order: 5;
  }

  .portugal-card:nth-child(6) {
    order: 6;
  }

  .portugal-card:nth-child(7) {
    order: 7;
  }

  .portugal-card:nth-child(8) {
    order: 8;
  }
}
 */
@media (max-width: 575px) {
  .portugal-grid {
    display: flex;
    flex-direction: column;
    gap: 24px;
  }

  .portugal-card {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0;
    /* border-radius: 12px; */
    overflow: hidden;
    background: #fff;
  }

  .portugal-card--image {
    width: 100%;
    height: 220px;
    display: block;
    flex-shrink: 0;
  }

  .portugal-card--image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 0;
  }

  .portugal-card--content {
    padding: 16px;
    background: #fff;
  }

  .portugal-card--content h3,
  .portugal-card--title {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 8px;
    color: #111;
  }

  .portugal-card--content p,
  .portugal-card--desc {
    font-size: 14px;
    line-height: 1.6;
    color: #555;
    margin: 0;
  }

  .portugal-card:nth-child(n) {
    grid-column: unset;
    grid-row: unset;
    order: unset;
    border-bottom: none;
  }
}














/* our team section */
.our-team-section {
  padding: 0 0 80px;
  background: linear-gradient(120deg, #282A87 0%, #0A0A21 70%);

}


/* ===== TEAM CARD ===== */
.team-card {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
}

.team-card img {
  width: 100%;
  display: block;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  transition: transform 0.5s ease;
}

/* ===== DARK OVERLAY (always present, stronger on hover) ===== */
.team-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(10, 10, 33, 0.25);
  transition: background 0.4s ease;
  z-index: 1;
  border-radius: 14px;
}

.team-card:hover::before {
  background: rgba(10, 10, 33, 0.72);
}

/* ===== SOCIAL ICONS ===== */
.team-social {
  position: absolute;
  top: 15%;
  left: 90%;
  transform: translate(-50%, -10px);
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 3;
  opacity: 0;
  transition: opacity 0.4s ease, transform 0.4s ease;
}

.team-card:hover .team-social {
  opacity: 1;
  transform: translate(-50%, -30px);
}

.team-social a {
  width: 26px;
  height: 26px;
  border-radius: 20%;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 14px;
  text-decoration: none;
  backdrop-filter: blur(4px);
  transition: background 0.2s ease, transform 0.2s ease;
}

.team-social a:hover {
  background: #c32627;
  transform: scale(1.1);
}

/* ===== OVERLAY (name + designation) ===== */
.team-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px 18px 18px;
  z-index: 2;
  text-decoration: none;
  display: block;

  /* Hidden below the card by default */
  /* transform: translateY(100%);
    opacity: 0;
    transition: transform 0.4s ease, opacity 0.4s ease; */
}

.team-card:hover .team-overlay {
  transform: translateY(0);
  opacity: 1;
}

.team-overlay span {
  display: block;
  font-size: 1.1rem;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 4px;
}

.team-overlay p {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.72);
  margin: 0;
}

/* ===== ZOOM IMAGE ON HOVER ===== */
.team-card:hover img {
  transform: scale(1.06);
}

/* ===== RESPONSIVE ===== */

/* Tablet — 2 columns */


/* Show hamburger button on mobile */
@media (max-width: 992px) {
  button.menu-toggle {
    display: flex;

  }

  /* Hide nav by default on mobile */
  .main-navigation {
    display: none;
    width: 100%;
    /* width: 100vw; */
    height: 100vh;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #002887;
    z-index: 999;
    padding: 50px;
  }

  /* Show nav when toggled */
  .main-navigation.toggled {
    display: block;
  }

  .main-navigation ul {
    flex-direction: column;
    gap: 20px;
  }

  .main-navigation ul li a {
    display: block;
    padding: 12px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }
}

/* ── Hamburger icon (3 lines) ── */
button.menu-toggle span,
button.menu-toggle span::before,
button.menu-toggle span::after {
  display: block;
  width: 22px;
  height: 2px;
  background: #ffffff;
  position: relative;
  transition: all 0.3s ease;
}

button.menu-toggle span::before,
button.menu-toggle span::after {
  content: "";
  position: absolute;
  left: 0;
}

button.menu-toggle span::before {
  top: -7px;
}

button.menu-toggle span::after {
  top: 7px;
}

/* ── Close icon (X) when toggled ── */
button.menu-toggle.toggled span {
  background: transparent;
  /* hide middle line */
}

button.menu-toggle.toggled span::before {
  transform: rotate(45deg);
  top: 0;
}

button.menu-toggle.toggled span::after {
  transform: rotate(-45deg);
  top: 0;
}


/* @media (max-width: 992px) {
  .main-navigation ul {
    display: none;
  }

  button.menu-toggle {

    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 8px 10px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.4);
    cursor: pointer;
    align-items: center;
    justify-content: center;
  }
} */

@media (max-width: 991px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
  }

  .top-title h2 {
    font-size: 2rem;
  }
}

/* Mobile — 1 column */
@media (max-width: 575px) {
  .our-team-section {
    padding: 60px 16px;
  }

  .grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .top-title {
    margin-bottom: 40px;
  }

  .top-title h2 {
    font-size: 1.7rem;
  }

  .top-title p {
    font-size: 0.9rem;
    text-align: left;
  }

  /* On mobile: always show overlay since no hover */
  .team-social {
    opacity: 1;
    transform: translate(-50%, -30px);
  }

  .team-overlay {
    transform: translateY(0);
    opacity: 1;
  }

  .team-card::before {
    background: rgba(10, 10, 33, 0.55);
  }
}

/* testimonial section  */
.testimonial-section {
  background: #f0f0f0;
  padding: 0 0 80px;
}


/* ===== TESTIMONIAL CARD ===== */
.testimonial-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 50px 36px 32px;
  position: relative;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 320px;
  /* max-width: 380px; */
  width: 100%;
  margin-bottom: 40px;
}

.testimonial-card p {
  /* color: #6C6C6C;
    font-size: 16px;
    margin-bottom: 20px;
    position: relative;
    z-index: 1; */
  margin-top: 50px;
  /* font-weight: 400;
    line-height: 25px;
    letter-spacing: -2%; */
  /* font-family: var(--primary-font); */
}

/* ===== PROFILE IMAGE ===== */
.profile-img {
  position: absolute;
  top: -40px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  border: 5px solid #f0f0f0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  background: #fff;
}

.profile-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ===== QUOTE ICONS ===== */
.quote-content {
  position: relative;
}

.quote-icon {
  position: absolute;
  line-height: 1;
  user-select: none;
}

.quote-icon.open {
  top: -10px;
  left: 0px;
}

.quote-icon.close {
  bottom: -10px;
  right: 0px;
}

/* ===== QUOTE TEXT ===== */
.quote-content>p {
  color: #6C6C6C;
  font-size: 16px;
  line-height: 37.76px;
  /* margin: 30px 0 20px; */
  position: relative;
  z-index: 1;
  font-weight: 400;
  letter-spacing: 0%;
}

/* ===== NAME & ROLE ===== */
.name {
  font-size: 18px;
  font-weight: 600;
  color: #1B1B1B;
  margin: -25px 0 4px;
}

.role {
  font-size: 16px;
  color: #6C6C6C;
  font-weight: 400;
  margin: 0;
}

/* ===== READ MORE BUTTON (if needed) ===== */
.btn-wrap {
  text-align: center;
  margin-top: 50px;
}

/* ===== RESPONSIVE ===== */

/* Tablet — 2 columns */
@media (max-width: 991px) {


  .title-center-black h2 {
    font-size: 1.9rem;
  }
}

/* Mobile — 1 column */
@media (max-width: 600px) {

  .testimonial-card {
    padding: 50px 24px 28px;
    min-height: unset;
  }

  .title-center-black h2 {
    font-size: 1.6rem;
  }

  .quote-content>p {
    font-size: 14px;
  }
}


/* contact us section  */
.contact-us-section {

  position: relative;
  width: 100%;
  min-height: 80vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}

.contact-us-section img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
}

.contact-title {
  z-index: 1;
}

.top-title.title-center.contact-title {
  text-align: center;
  max-width: 700px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Dark overlay */
.contact-us-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  /* adjust opacity as needed */
  z-index: 1;

}


/* ===== BOTTOM TICKER BAR ===== */
.contact-ticker {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  padding: 14px 40px;
  overflow: hidden;
}

.contact-ticker ul {
  display: flex;
  align-items: center;
  gap: 60px;
  animation: ticker-scroll 18s linear infinite;
  white-space: nowrap;
  width: max-content;
  color: var(--white);
}

.contact-ticker-ul:hover {
  animation-play-state: paused;
}

.ticker-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, 0.88);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.3px;
  padding-right: 50px;
}

/* .ticker-item::before {
      content: '•';
      color: rgba(255, 255, 255, 0.5);
      font-size: 16px;
    } */

@keyframes ticker-scroll {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

/* ===== RESPONSIVE ===== */


@media (max-width: 992px) {
  .hero-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 120px 0 60px;
    gap: 0;
    width: 100%;
    margin: auto;
  }

  .hero-left {
    width: 100%;
    display: contents;
    /* dissolves into hero-content so order works */
  }

  /* hero-right back to normal flow */
  .hero-right {
    position: relative;
    right: auto;
    bottom: auto;
    max-width: 100%;
    width: 100%;
    opacity: 1;
    animation: none;

    width: 70%;
    align-items: center;
  }

  /* .small-text-top { order: 1; } */
  .hero-heading {
    order: 2;
    width: 95%;
    text-align: center;
  }

  .hero-right {
    order: 3;
  }

  .hero-cta {
    order: 4;
  }
}

@media (max-width: 480px) {
  .hero-right {
    width: 100%;
  }

  .hero-heading {
    font-size: 38px;
  }
}

@media (max-width: 410px) {
  .hero-heading {
    font-size: 32px;
  }
}

@media (max-width: 375px) {
  .hero-heading {
    font-size: 26px;
  }
}





/* fotter plugins  */
.menu-navigate-container ul,
li a {
  list-style: none;
  color: #1A1A1A;
  transition: color 0.2s ease;
  font-size: 14px;
  font-weight: 400;
  font-family: var(--secondary-font);
  line-height: 23px;
  letter-spacing: 3%;
}

.menu-navigate-container .menu-item a:hover {
  color: var(--primary);
}

.main-navigation-container .menu_item a {
  margin-top: 10px;
}


/* footer services  */
.menu .menu-item {
  margin-top: 10px;
  list-style: none;
}

/* .menu-services-container ul,
li a {
  list-style: none;
  color: #1A1A1A;
  transition: color 0.2s ease;
  font-size: 14px;
  font-weight: 400;
  font-family: var(--secondary-font);
  line-height: 23px;
  letter-spacing: 3%;
  margin-top: 10px;
} */

.menu-services-container .menu-item a:hover {
  color: var(--primary);
}

.menu-services-container .menu_item a {
  margin-top: 10px;
}






/* footer section  */

.footer-top {
  display: grid;
  grid-template-columns: 1.8fr 1fr 1.4fr 1fr;
  gap: 40px;
  padding-bottom: 50px;
}

.footer-logo {
  margin-bottom: 18px;
}

.footer-logo img {
  max-width: 160px;
  height: auto;
  display: block;
}

.footer-desc {
  font-size: 14px;
  color: #1A1A1A;
  line-height: 25PX;
  margin-bottom: 22px;
  max-width: 280px;
  font-weight: 400;
  letter-spacing: 0%;
}

.footer-socials {
  display: flex;
  align-items: center;
  gap: 10px;
}

.footer-socials a {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: #002887;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: 13px;
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}

.footer-socials a:hover {
  background: var(--primary);
  color: #fff;
}

.footer-heading {
  font-size: 16px;
  font-weight: 600;
  color: var(--tertiary);
  letter-spacing: 0%;
  text-transform: uppercase;
  margin-bottom: 20px;
  line-height: 22px;
  font-family: var(--primary-font);
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}

.footer-links li a {
  font-size: 14px;
  color: #1A1A1A;
  text-decoration: none;
  transition: color 0.2s ease;
  display: inline-block;
  font-weight: 400;
  font-family: var(--secondary-font);
  letter-spacing: -1%;
  line-height: 34px;
}




.footer-col .page_item a {
  list-style: none;
  color: #1A1A1A;
  /* text-decoration: underline; */
  transition: color 0.2s ease;
  font-size: 14px;
  font-weight: 400;
  font-family: var(--secondary-font);
  line-height: 23px;
  letter-spacing: 3%;
}

.footer-col .page_item {
  list-style: none;
  margin-top: 10px;
  text-transform: capitalize;
}

.footer-col .page_item a:hover {
  color: var(--primary);
}







.footer-links li a:hover {
  color: var(--primary);
}

.footer-bottom {
  border-top: 1px solid #e8e8e8;
  padding: 20px 0;
  text-align: center;
}

.footer-bottom p {
  font-size: 14px;
  color: #1A1A1A;
  margin: 0;
  line-height: 23px;
  letter-spacing: 3%;
  font-family: var(--secondary-font);
}

.footer-bottom a {
  color: #1A1A1A;
  text-decoration: underline;
  transition: color 0.2s ease;
  font-size: 14px;
  font-weight: 400;
  font-family: var(--secondary-font);
  line-height: 23px;
  letter-spacing: 3%;
}

.footer-bottom a:hover {
  color: var(--primary);
  text-decoration: underline;
}

/* ===== RESPONSIVE ===== */

@media (max-width: 991px) {
  .footer-top {
    grid-template-columns: 1fr 1fr;
    gap: 36px;
  }

  .footer-about {
    grid-column: 1 / -1;
  }

  .footer-desc {
    max-width: 100%;
  }
}

@media (max-width: 575px) {
  .site-footer {
    padding-top: 40px;
  }

  .footer-top {
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .footer-about {
    grid-column: auto;
  }

  .footer-logo img {
    max-width: 130px;
  }

  .footer-bottom p {
    font-size: 12px;
  }
}










/* ===== TIMEZONE SECTION ===== */
.timezone-section {
  padding: 0 0 80px;
}

.timezone-wrapper {
  margin-top: 50px;
}

/* ===== ROW ===== */
.timezone-row {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 40px;
  gap: 0;
}

.timezone-row:last-child {
  margin-bottom: 0;
}

/* ===== LABELS ===== */
.tz-label-side {
  width: 110px;
  flex-shrink: 0;
}

.tz-label-side.left {
  text-align: right;
  padding-right: 10px;
}

.tz-label-side.right {
  text-align: left;
  padding-left: 10px;
}

.tz-city {
  font-size: 12px;
  color: #777;
  margin-bottom: 3px;
  font-weight: 400;
}

.tz-country {
  font-size: 13px;
  font-weight: 700;
  color: #1a1a2e;
  letter-spacing: 0.5px;
}

/* ===== CONNECTORS ===== */
.connector {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.dot-red {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #c0392b;
  flex-shrink: 0;
}

.dash-line {
  width: 180px;
  height: 0;
  border-top: 3px dashed #bbb;
  flex-shrink: 0;
}

/* ===== CLOCK ===== */
.clock-wrap {
  flex-shrink: 0;
}

.clock-wrap+.clock-wrap {
  margin-left: 120px;
}

.clock-box {
  position: relative;
  width: 190px;
  height: 190px;
}

.clock-box img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

.clock-hands {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* ===== RESPONSIVE ===== */

/* Tablet landscape */
@media (max-width: 1024px) {
  .dash-line {
    width: 100px;
  }

  .clock-wrap+.clock-wrap {
    margin-left: 60px;
  }

  .clock-box {
    width: 150px;
    height: 150px;
  }
}

/* Tablet portrait */
@media (max-width: 768px) {
  .dash-line {
    width: 40px;
  }

  .clock-wrap+.clock-wrap {
    margin-left: 30px;
  }

  .clock-box {
    width: 110px;
    height: 110px;
  }

  .tz-label-side {
    width: 80px;
  }

  .tz-city {
    font-size: 11px;
  }

  .tz-country {
    font-size: 12px;
  }
}

/* Mobile landscape */
/* @media (max-width: 600px) {
  .dash-line {
    width: 16px;
  }

  .clock-wrap+.clock-wrap {
    margin-left: 12px;
  }

  .clock-box {
    width: 85px;
    height: 85px;
  }

  .tz-label-side {
    width: 65px;
  }

  .tz-city {
    font-size: 10px;
  }

  .tz-country {
    font-size: 11px;
  }

  .timezone-row {
    margin-bottom: 24px;
  }
}

@media (max-width: 480px) {
  .timezone-section {
    padding: 0 0 50px;
  }

  .timezone-wrapper {
    margin-top: 30px;
  }

  .timezone-row {
    flex-direction: row;
    align-items: center;
    margin-bottom: 30px;
    background: #f9f9f9;
    border-radius: 16px;
    padding: 24px 16px;
    gap: 16px;
  }

  .connector {
    display: none;
  }

  .timezone-row .clock-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }

  .clock-wrap {
    position: relative;
  }

  .clock-wrap+.clock-wrap {
    margin-left: 0;
  }


  .clock-box {
    width: 110px;
    height: 110px;
  }
}

@media (max-width: 410px) {
  .timezone-section {
    padding: 0 0 40px;
  }

  .timezone-wrapper {
    margin-top: 24px;
  }

  .timezone-row {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    border-radius: 14px;
    padding: 20px 12px;
    gap: 12px;
  }

  .timezone-row .clock-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }

  .clock-box {
    width: 95px;
    height: 95px;
  }
}

@media (max-width: 360px) {
  .clock-box {
    width: 90px;
    height: 90px;
  }
}
 */


/* ── 600px ─────────────────────────────── */
@media (max-width: 600px) {
  .dash-line {
    width: 16px;
  }

  .clock-wrap+.clock-wrap {
    margin-left: 12px;
  }

  .clock-box {
    width: 85px;
    height: 85px;
  }

  .tz-label-side {
    width: 65px;
  }

  .tz-city {
    font-size: 10px;
  }

  .tz-country {
    font-size: 11px;
  }

  .timezone-row {
    margin-bottom: 24px;
  }
}

/* ── 480px ─────────────────────────────── */
@media (max-width: 480px) {
  .timezone-section {
    padding: 0 0 50px;
  }

  .timezone-wrapper {
    margin-top: 30px;
  }

  .timezone-row {
    display: flex;
    /* ← explicitly set */
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    /* ← prevent wrapping */
    margin-bottom: 30px;
    background: #f9f9f9;
    border-radius: 16px;
    padding: 24px 16px;
    gap: 16px;
  }

  .connector {
    display: none !important;
    /* ← force hide */
  }

  .clock-wrap {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }

  .clock-wrap+.clock-wrap {
    margin-left: 0 !important;
    /* ← override 600px margin */
  }

  .clock-box {
    width: 100px;
    /* ← reduced from 110px — fits better */
    height: 100px;
  }

  .tz-label-side {
    width: auto;
    text-align: center;
  }

  .tz-city {
    font-size: 10px;
    text-align: center;
  }

  .tz-country {
    font-size: 11px;
    text-align: center;
  }
}

/* ── 410px ─────────────────────────────── */
@media (max-width: 445px) {
  .timezone-section {
    padding: 0 0 40px;
  }

  .timezone-wrapper {
    margin-top: 24px;
  }

  .timezone-row {
    margin-bottom: 24px;
    border-radius: 14px;
    padding: 18px 10px;
    gap: 10px;
  }

  .clock-wrap {
    gap: 8px;
  }

  .clock-box {
    width: 88px;
    height: 88px;
  }

  .tz-city {
    font-size: 9px;
  }

  .tz-country {
    font-size: 10px;
  }
}

/* ── 375px ─────────────────────────────── */
@media (max-width: 375px) {
  .timezone-row {
    padding: 16px 8px;
    gap: 8px;
  }

  .clock-box {
    width: 82px;
    height: 82px;
  }
}

/* ── 360px ─────────────────────────────── */
@media (max-width: 360px) {
  .timezone-section {
    padding: 0 0 30px;
  }

  .timezone-wrapper {
    margin-top: 20px;
  }

  .timezone-row {
    padding: 14px 8px;
    gap: 6px;
    margin-bottom: 20px;
    border-radius: 12px;
  }

  .clock-box {
    width: 78px;
    height: 78px;
  }

  .tz-city {
    font-size: 9px;
  }

  .tz-country {
    font-size: 10px;
  }
}

/* ── 320px ─────────────────────────────── */
@media (max-width: 320px) {
  .timezone-row {
    padding: 12px 6px;
    gap: 4px;
  }

  .clock-box {
    width: 70px;
    height: 70px;
  }

  .tz-label-side {
    display: none;
    /* ← hide labels on smallest screens */
  }
}






/* about-us page */
.about-us-page {
  position: relative;
  min-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-top: 72px;
}

.about-us-page::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 1;
}

.about-us-page-text-section {
  margin-top: 20px;
}

.about-us-page-text-section h3 {
  color: var(--text-dark);
  font-size: 16px;
  margin-bottom: 10px;
  font-weight: 700;
  font-family: var(--secondary-font);
  line-height: 25px;
  letter-spacing: -1%;
}

.partners-section {
  padding: 0 0 80px;
  background: #F0F0F0;
  width: 100%;
  overflow: hidden
}

.partners-banner-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 30px;
}

.pipeline-container {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  /* max-width: 800px;  */
  /* padding: 0 50px; */
  margin-top: 40px;
}

/* The Dashed Connecting Line */
.trusted-partners-dashed-line {
  position: absolute;
  top: 50%;
  left: 50px;
  right: 50px;
  height: 1px;
  border-top: 2px dashed #a0a0a0;
  /* Gray dashed line */
  transform: translateY(-50%);
  z-index: 1;
}

/* Node Elements */
.trusted-partners-node {
  position: relative;
  z-index: 2;
  /* Sits on top of the dashed line */
}

/* White Circular Badges */
.trusted-partners-circle {
  width: 130px;
  height: 130px;
  background-color: #ffffff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  /* Soft shadow for depth */
  transition: transform 0.3s ease;
}

/* Hover Effect for Interactivity */
.trusted-partners-circle:hover {
  transform: scale(1.05);
}

/* Logo Images Styling */
.trusted-partners-logo {
  width: 80%;
  /* Ensures logos scale comfortably inside the circle */
  height: 80%;
  object-fit: contain;
  /* Prevents stretching */
}

/* ── Base / Desktop First (1440px+) ─────── */


/* ── Large Desktop (1200px–1439px) ──────── */

/* ── Tablet Landscape (768px–991px) ─────── */
@media (max-width: 991px) {
  .about-us-page {
    height: 70vh;
    min-height: 420px;
    padding-top: 60px;
  }
}

/* ── Tablet Portrait (576px–767px) ──────── */
@media (max-width: 767px) {
  .about-us-page {
    height: 50vh;
    min-height: 360px;
    padding-top: 56px;
  }
}

/* ── Mobile Large (425px–575px) ─────────── */
@media (max-width: 575px) {
  .about-us-page {
    height: 55vh;
    min-height: 300px;
    padding-top: 56px;
  }

  .about-us-page-text-section h3 {
    text-align: left;
  }
}

/* ── Mobile Medium (375px–424px) ────────── */
@media (max-width: 424px) {
  .about-us-page {
    height: 50vh;
    min-height: 260px;
    padding-top: 52px;
  }
}

/* ── Mobile Small (320px–374px) ─────────── */
@media (max-width: 374px) {
  .about-us-page {
    height: 50vh;
    min-height: 220px;
    padding-top: 48px;
  }
}



/* Tablet: Scaling down circles */
@media (max-width: 768px) {
  .trusted-partners-circle {
    width: 100px;
    height: 100px;
  }

  .section {
    padding-top: 40px !important;
  }
}

/* Mobile: Vertical stacking and line adjustment */
@media (max-width: 576px) {

  /* Transform the horizontal line into a vertical one */
  .trusted-partners-dashed-line {
    top: 40px;
    bottom: 40px;
    left: 50%;
    right: auto;
    width: 0;
    height: calc(100% - 80px);
    border-top: none;
    border-left: 2px dashed #b5b5b5;
    transform: translateX(-50%);
  }

  .partners-section h2 {
    font-size: 1.8rem;
    /* Shrinks heading for small screens */
  }
}







/* services page  */
.services-page {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-top: 72px;

  background:
    linear-gradient(105deg,
      rgba(10, 22, 40, 0.95) 0%,
      rgba(10, 22, 40, 0.75) 0%,
      rgba(10, 22, 40, 0.30) 50%),
    url('http:assets/img/services-page-banner.png') center / cover no-repeat;
}

/* testimonial page  */
.testimonial-page {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-top: 72px;

  background:
    linear-gradient(105deg,
      rgba(10, 22, 40, 0.95) 0%,
      rgba(10, 22, 40, 0.75) 0%,
      rgba(10, 22, 40, 0.30) 50%),
    url('http:assets/img/testimonial-page-banner.png') center / cover no-repeat;
}

/* why choose us page   */
.why-choose-us-page {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-top: 72px;

  background:
    linear-gradient(105deg,
      rgba(10, 22, 40, 0.95) 0%,
      rgba(10, 22, 40, 0.75) 0%,
      rgba(10, 22, 40, 0.30) 50%),
    url('http:assets/img/why-choose-us-page-banner.png') center / cover no-repeat;
}

.card-features-section {
  padding: 0 0 80px;
  background: #F0F0F0;
}

.card-feature-card {
  background-color: var(--white);
  display: flex;
  flex-direction: row;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  margin-bottom: 40px;
  min-height: 320px;
}

/* Alternating rows logic for modern screens */
.card-feature-card:nth-child(even) {
  flex-direction: row-reverse;
}

/* Image Column Wrapper */
.card-feature-image {
  flex: 0 0 35%;
  min-width: 320px;
  position: relative;
}

.card-feature-image img {
  width: 100%;
  height: 100%;
  /* object-fit: cover; */
  display: block;
}

/* Content Text Column Wrapper */
.card-feature-content {
  flex: 1;
  padding: 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.card-feature-content h3 {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 18px;
  font-family: var(--primary-font);
  line-height: 26px;
  letter-spacing: -1%;
}

.card-feature-content p {
  font-size: 15px;
  color: var(--text-dark);
  margin-bottom: 12px;
  font-weight: 400;
  font-family: var(--secondary-font);
  line-height: 25px;
  letter-spacing: -1%;
}

.card-feature-content p:last-child {
  margin-bottom: 0;
}

/* ==========================================================================
   4. Responsive Breakpoints
   ========================================================================== */

/* Tablet & Smaller Desktops */
@media (max-width: 900px) {
  .card-feature-content {
    padding: 30px;
  }

  .card-feature-image {
    flex: 0 0 40%;
    min-width: 280px;
  }
}

/* Mobile Environments (Stacks columns beautifully) */
@media (max-width: 768px) {


  .card-feature-card,
  .card-feature-card:nth-child(even) {
    flex-direction: column;
    /* Force standard top-down stack */
  }

  .card-feature-image {
    width: 100%;
    height: 240px;
    flex: none;
    min-width: 0;
  }

  .card-feature-content {
    padding: 25px 20px;
  }

  .card-feature-content h3 {
    font-size: 18px;
    margin-bottom: 12px;
  }

  .card-feature-content p {
    font-size: 14px;
    text-align: left;
    /* Easier reading adjustments for mobile viewports */
  }
}











/* single service page   */
.single-service-page {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-top: 72px;

  background:
    linear-gradient(105deg,
      rgba(10, 22, 40, 0.95) 0%,
      rgba(10, 22, 40, 0.75) 0%,
      rgba(10, 22, 40, 0.30) 50%),
    url('http:assets/img/service-single-page-banner.png') center / cover no-repeat;
}

.related-services-section {
  /* position: relative; */
  padding: 0 0 80px;
  background: #F0F0F0;
}

.related-services-section .top-title h2 {
  color: var(--text-dark) !important;
}

.related-services-section .connector-line {
  border-left: 2px dashed #002887 !important;
}

.property-investment-section {
  padding: 0 0 80px;
}

.property-investment-section .top-title h2 {
  color: var(--text-dark) !important;
}

.property-investment-section p {
  font-size: 16px;
  font-weight: 400;
  line-height: 25px;
  letter-spacing: -1%;
  color: var(--text-dark);
  font-family: var(--secondary-font);
  width: 65%;
  margin: 20px auto;
}

.property-investment-section .title-center {
  margin-bottom: 0;
}


/* contact-us page  */
.contact-us-page {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-top: 72px;

  background:
    linear-gradient(105deg,
      rgba(10, 22, 40, 0.95) 0%,
      rgba(10, 22, 40, 0.75) 0%,
      rgba(10, 22, 40, 0.30) 50%),
    url('http:assets/img/contact-us-page-banner.png') center / cover no-repeat;
}

.contact-us-body-section {
  padding: 0 0 80px;
  background: #F0F0F0;
}


.contact-cards-wrap {
  display: flex;
  gap: 30px;
  flex-wrap: wrap;
  justify-content: center;
}

/* --- LEFT CARD: Info Card --- */
.info-card {
  /* background-image: url('http:assets/img/contact-page-img.png');
  background-size: cover;
  background-position: center;
  position: relative;
  min-height: 450px;
  border-radius: 20px;
  width: 508px;
  height: 624px; */

  position: relative;
  min-height: 450px;
  border-radius: 20px;
  width: 508px;
  height: 624px;
}


.info-overlay {
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.85) 100%);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 40px 30px;
  color: #ffffff;
  border-radius: 20px;
}

.info-header {
  text-align: center;
  margin-top: 40px;
}

.info-header h2 {
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: 1px;
  margin-bottom: 5px;
}

.info-header p {
  font-size: 0.95rem;
  opacity: 0.8;
}

.info-details {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-top: auto;
}

.info-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.85rem;
}



.info-item i {
  background: rgba(255, 255, 255, 0.2);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 0.8rem;
}

.info-item a {
  color: #ffffff;
  text-decoration: none;
  transition: color 0.2s ease;
}

.info-item a:hover {
  color: #e2e8f0;
  text-decoration: underline;
}

/* contact hour */

/* ── Wrapper ───────────────────────────── */
.info-item {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 20px;
}

/* ── Left: Icon + Title ────────────────── */
.wh-header {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  padding-top: 2px;
  align-items: flex-start;
}

.wh-header i {
  font-size: 15px;
  color: rgba(255, 255, 255, 0.7);
  flex-shrink: 0;
}

.wh-title {
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
  white-space: nowrap;
}

/* ── Right: List ───────────────────────── */
.info-item ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* ── Each Row ──────────────────────────── */
.info-item ul li {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* ── Day (first span) ──────────────────── */
.info-item ul li span:first-child {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.75);
  white-space: nowrap;
  min-width: 70px;
}

/* ── Time (last span) ──────────────────── */
.info-item ul li span:last-child {
  font-size: 13px;
  font-weight: 400;
  color: rgba(255, 255, 255, 0.88);
  white-space: nowrap;
}

/* ── Mobile ────────────────────────────── */
@media (max-width: 575px) {
  .info-item {
    /* flex-direction: column; */
    gap: 10px;
  }

  .wh-header {
    padding-top: 0;
  }

  .info-item ul li span:first-child {
    min-width: 65px;
    font-size: 12px;
  }

  .info-item ul li span:last-child {
    font-size: 12px;
  }
}

@media (max-width: 480px) {
  .wh-header i {
    font-size: 13px;
  }

  .wh-title {
    font-size: 13px;
  }

  .info-item ul li {
    gap: 12px;
  }

  .info-item ul li span:first-child {
    min-width: 60px;
    font-size: 12px;
  }

  .info-item ul li span:last-child {
    font-size: 12px;
  }
}
















/* Background */
.right-panel {
  background: linear-gradient(160deg, #0d1b6e 0%, #1535b0 100%);
  border-radius: 20px;
  padding: 40px 30px;
  max-width: 600px;
  width: 100%;
}

/* Title */
.right-panel h2 {
  color: #fff;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 24px;
  width: 100%;
}

/* Hide spinner */
.right-panel .wpcf7-spinner {
  display: none;
}


/* contact fotm right  */
.right-panel .wpcf7-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.right-panel .wpcf7-form p {
  margin: 0;
}

.right-panel .form-row {
  display: flex;
  gap: 14px;
}

.right-panel .form-row.full {
  flex-direction: column;
}

.right-panel .form-row .wpcf7-form-control-wrap {
  flex: 1;
}

.right-panel label {
  display: contents;
}

.right-panel label br {
  display: none;
}

.right-panel input[type="text"],
.right-panel input[type="email"],
.right-panel input[type="tel"] {
  width: 100%;
  background: #fff;
  border: none;
  border-radius: 10px;
  padding: 14px 18px;
  font-size: 14px;
  color: #333;
  outline: none;
  box-sizing: border-box;
}

.right-panel textarea {
  width: 100%;
  background: #fff;
  border: none;
  border-radius: 10px;
  padding: 14px 18px;
  font-size: 14px;
  color: #333;
  outline: none;
  box-sizing: border-box;
  height: 140px;
  resize: none;
}

.right-panel input::placeholder,
.right-panel textarea::placeholder {
  color: #999;
  font-size: 13px;
}

.right-panel input[type="submit"] {
  background: #fff;
  color: #0d1b6e;
  border: none;
  border-radius: 50px;
  padding: 13px 36px;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  margin-top: 4px;
}

.right-panel input[type="submit"]:hover {
  background: #e0e4f5;
}

.right-panel .wpcf7-spinner {
  display: none;
}

/* Grid layout for name/email/phone row */
.wpcf7 form .wpcf7-form-control-wrap {
  display: block;
  width: 100%;
}

.wpcf7 form p:has(textarea) {
  grid-column: span 2;
}

/* Input & Textarea base styles */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea {
  width: 100%;
  padding: 12px 16px;
  border: 1.5px solid #ccc;
  border-radius: 10px;
  background-color: #fff;
  color: #333;
  font-size: 16px;
  font-weight: 400;
  font-family: var(--secondary-font);
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.2s ease;
  text-transform: capitalize;
}

.wpcf7 input[type="text"]::placeholder,
.wpcf7 input[type="email"]::placeholder,
.wpcf7 input[type="tel"]::placeholder,
.wpcf7 textarea::placeholder {
  color: #999;
  font-size: 13px;
}

.wpcf7 input[type="text"]:focus,
.wpcf7 input[type="email"]:focus,
.wpcf7 input[type="tel"]:focus,
.wpcf7 textarea:focus {
  border-color: #aaa;
}

/* Labels - 2 column grid */
.wpcf7 form label {
  display: block;
  margin-bottom: 12px;
  width: 100%;
}


/* Two-column grid for first 4 fields */
.wpcf7 form {
  display: grid !important;
  /* grid-template-columns: 1fr 1fr; */
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  align-items: start;
}

/* Message textarea spans full width */
.wpcf7 form label:nth-child(5) {
  grid-column: 1 / -1;
}

/* Textarea height */
.wpcf7 textarea {
  width: 100%;
  height: 140px;
  resize: none;
  box-sizing: border-box;
}

/* Submit button spans full width */
.wpcf7 form .wpcf7-submit,
.wpcf7 input[type="submit"] {
  grid-column: 1 / -1;
  justify-self: start;
  background-color: #fff;
  color: var(--text-black);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 1px;
  padding: 12px 30px;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  width: fit-content;
  text-transform: uppercase;
  transition: background-color 0.2s ease;
}

.wpcf7 input[type="submit"]:hover {
  background-color: var(--text-black);
  color: var(--secondary);
}

/* Response output */
.wpcf7 .wpcf7-response-output {
  grid-column: 1 / -1;
  margin-top: 10px;
  color: #fff;
  font-size: 13px;
}


.map-section {
  /* padding: 0 0 80px; */
  background: #F0F0F0;
}

.map-section .top-title h2 {
  color: var(--text-dark) !important;
}

.map-wrap {
  width: 100%;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50%;
  margin-right: -50%;
  line-height: 0;
}

.map-wrap iframe {
  width: 100% !important;
  height: 450px;
  display: block;
}


/* --- Responsive Breakpoint --- */
@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }

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

  .form-card {
    padding: 35px 20px;
  }

  .map-wrap iframe {
    height: 350px;
  }
}

.clock-box {
  position: relative;
}

.clock-hands {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.clock-hands line {
  transform-origin: 50px 50px;
}






/* ── Each Row ──────────────────────────── */
.footer-contact-item {
  display: flex;
  align-items: baseline;
  flex-wrap: nowrap;
  gap: 0;
  list-style: none;
}

/* ── Label (Phone: / Email: / Address:) ── */
.footer-contact-label {
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 70px;
  padding-top: 1px;
}

/* ── Value / Link ──────────────────────── */
.footer-contact-link {
  font-size: 14px;
  font-weight: 400;
  color: #1A1A1A;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.2s ease;
  word-break: break-word;
}

.footer-contact-link:hover {
  color: #ffffff;
  text-decoration: underline;
}

/* ── Mobile ────────────────────────────── */
@media (max-width: 480px) {
  .footer-contact-item {
    /* flex-wrap: wrap; */
  }

  .footer-contact-label {
    font-size: 13px;
  }

  .footer-contact-link {
    font-size: 13px;
    white-space: normal;
    word-break: break-all;
  }
}