/*!
Theme Name: Best Profile
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
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 */








/* ── Mobile toggle (hidden by default) ── */
.menu-toggle {
  display: none;
  background: none;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 3px;
  padding: 8px 10px;
  cursor: pointer;
  gap: 5px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
 
.menu-toggle::before,
.menu-toggle::after,
.menu-toggle span {
  content: '';
  display: block;
  width: 22px;
  height: 2px;
  background: var(--bp-white);
  border-radius: 2px;
  transition: transform 0.3s, opacity 0.3s;
}
 /* Animate to X when open */
.menu-toggle.toggled::before {
    transform: translateY(7px) rotate(45deg);
}
.menu-toggle.toggled span {
    opacity: 0;
}
.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;
  }
}
 
/* Mobile */
@media (max-width: 768px) {
  #masthead.site-header {
    height: auto;
    min-height: var(--bp-header-h);
    flex-wrap: wrap;
    align-items: center;
    padding: 0 5%;
    position: relative;
  }
 
  .site-branding {
    padding: 14px 0;
  }
 
  /* Show hamburger */
  .menu-toggle {
    display: flex;
  }
 
  /* 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(--bp-red-light);
  }
 
  /* 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);
}













/* =========
   HERO
   ========= */
.hero {
  position: relative;
  min-height: 100vh;
  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;
}

.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: wrap;
  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: -280px;        
  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 .dot {
  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
   ============ */

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

  .hero-right {
    max-width: 100%;
    width: 100%;
  }

  .hero-card {
    max-width: 480px;
  }
}

/* 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: 100svh;
  }

  .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: column;
    gap: 10px;
  }

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

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

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

/* 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: 60px 0 48px;
  }
  .about-image-wrap{
    display: none;
  }

  .about-image-wrap-2{
    display: block;
    width: 100%;
    /* max-width: 380px; */
    height: 280px;
  }
  .top-title p {
    text-align: left;
    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;
}

.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-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: 240px;
}

.service-title {
    color: #ffffff;
    font-size: 20px;
    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);
  }
}

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

  .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: 260px;
    scroll-snap-align: start;
    flex-shrink: 0;
  }
}

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

  /* .service-card {
    width: 240px;
    padding: 22px 18px 20px;
  } */

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

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

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

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

/* 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; }

/* Switch to flex for order to work */
/* .portugal-grid {
  display: flex;
  flex-wrap: wrap;
} */

/* .portugal-card {
  width: 25%;  
} */












.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
══════════════════════════════ */

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

} */


@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;
  }

  .card-title {
    font-size: 16px;
  }

  .card-text {
    font-size: 13px;
  }
}

/* Mobile — full width stack */
@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--image {
    min-height: 220px;
  }
}
/* 
@media (max-width: 768px) {
  .portugal-section {
    padding: 70px 0 60px;
  }

  .portugal-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(4, 180px);
    border-radius: 8px;
  }

  .portugal-card--text {
    padding: 22px 18px;
  }
}


@media (max-width: 540px) {
  .portugal-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  .portugal-card--image {
    height: 200px;
  }

  .portugal-card--text {
    padding: 24px 20px;
  }
}

@media (max-width: 360px) {
  .portugal-card--image {
    height: 170px;
  }

  .card-title {
    font-size: 13.5px;
  }
} */




/* our team section */
.our-team-section {
    padding: 0 0 80px;
    /* background: radial-gradient(ellipse at 20% 50%, #282A87 0%, #0A0A21 70%); */
    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 */
@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;
    }

    /* 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%;
}
.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;
      background-image: url('../best-profile/assets/img/contactus-bg.png'); 
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      display: flex;
      flex-direction: column;
      justify-content: center;
      background-attachment: fixed;
    }
 .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.45);
      z-index: 0;
    }
   

    /* ===== 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 ===== */

    /* Tablet */
    @media (max-width: 991px) {
      .hero-content h1 {
        font-size: 2rem;
      }

      .hero-content p {
        font-size: 0.9rem;
      }

      .hero-ticker {
        padding: 12px 20px;
      }
    }

    /* Mobile */
    @media (max-width: 600px) {
      .hero-section {
        min-height: 85vh;
      }

      .hero-content {
        padding-top: 60px;
        padding-left: 20px;
        padding-right: 20px;
      }

      .hero-content h1 {
        font-size: 1.65rem;
      }

      .hero-content p {
        font-size: 0.875rem;
      }

      .btn-contact {
        padding: 11px 22px;
        font-size: 13px;
      }

      .ticker-item {
        font-size: 12px;
        padding-right: 30px;
      }
    }












    /* 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;
  }
}










/* time zone 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: 50px;
    height: 0;
    border-top: 2px dashed #bbb;
    flex-shrink: 0;
}

/* ===== CLOCK BOX ===== */
.clock-wrap {
    flex-shrink: 0;
    margin: 0 10px;
}


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

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

/* SVG hands sit exactly on top of image */
.clock-hands {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 860px) {
    .tz-label-side { width: 80px; }
    .dash-line { width: 28px; }
    .clock-box { width: 100px; height: 100px; }
}

@media (max-width: 640px) {
    .tz-label-side { width: 60px; }
    .tz-city { font-size: 10px; }
    .tz-country { font-size: 11px; }
    .dash-line { width: 10px; }
    .clock-box { width: 75px; height: 75px; }
    .clock-wrap { margin: 0 4px; }
    .timezone-row { margin-bottom: 24px; }
}

@media (max-width: 480px) {
    .timezone-row {
        flex-wrap: wrap;
        justify-content: center;
        gap: 16px;
        margin-bottom: 30px;
        background: #f9f9f9;
        border-radius: 16px;
        padding: 20px;
    }
    .connector { display: none; }
    .tz-label-side {
        width: auto;
        text-align: center !important;
        padding: 0 !important;
    }
    .clock-wrap { margin: 0 8px; }
    .clock-box { width: 90px; height: 90px; }
}


/* about-us page */
.about-us-page {
  position: relative;
  min-height: 100vh;
  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: 15px;
    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 */
}

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

/* Mobile: Vertical stacking and line adjustment */
@media (max-width: 576px) {
    .pipeline-container {
        flex-direction: column;
        gap: 40px;
        padding: 40px 0;
    }

    /* 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;
}


.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;
}

/* --- RIGHT CARD: Form Card --- */
.form-card {
    background: linear-gradient(120deg, #282A87 0%, #0A0A21 70%);
    padding: 45px 35px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-radius: 20px;
        /* width: 664px; */
    height: 624px;
}

.form-card h2 {
    color: #ffffff;
    font-size: 1.65rem;
    font-weight: 700;
    margin-bottom: 25px;
    line-height: 1.3;
}

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

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

.form-group {
    flex: 1;
}

form input, form textarea {
    width: 100%;
    padding: 12px 16px;
    border: none;
    border-radius: 8px;
    background-color: #ffffff;
    font-size: 0.9rem;
    color: #333333;
    outline: none;
}

form input::placeholder, form textarea::placeholder {
    color: #a0a0a0;
}

.text-area-group {
    width: 100%;
}

form textarea {
    resize: none;
}

/* Submit Button */
.submit-btn {
    align-self: flex-start;
    background-color: #ffffff;
    color: #00164d;
    border: none;
    padding: 10px 30px;
    font-weight: 600;
    font-size: 0.9rem;
    border-radius: 20px;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.1s ease;
}

.submit-btn:hover {
    background-color: #e2e8f0;
}

.submit-btn:active {
    transform: scale(0.98);
}

.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;
}

/* @media (max-width: 768px) {
    .map-wrap iframe {
        height: 350px; 
    }
} */


/* --- 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;
}