/*
Web Design By: Tech-SKD
*/

/*--------------------------------------------------------------
This is main CSS file that contains custom style rules used in this template
--------------------------------------------------------------*/

/*------------------------------------*\
    Table of contents
\*------------------------------------*/

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

CSS STRUCTURE:

1. VARIABLES

2. GENERAL TYPOGRAPHY
  2.1 General Styles
  2.2 Background Color
  2.3 Section
    - Section Paddings
    - Section Margins
    - Section Title
  2.4 Buttons
    - Primary Buttons
    - Button Hover Effect

3. CONTENT ELEMENTS
  - Dropdown
  - Breadcrumb
  - Pagination
  - Accordion
  - Form
  - Swiper
  - Modal Video

4. SITE STRUCTURE
  4.1 Header
  4.2 Guaranteed Rent
  4.3 Work with Profesionals Section
  4.4 Why Work With Us Section
  4.5 Trust & Reassurance Section
  4.6 What We Do Section
  4.7 How It Works Section

5. PAGES STYLE
  5.1 Home Page
  5.2 What We Do
  5.3 How It Works
  5.4 Meet The Team
  5.5 Contact Page
    

  
/*--------------------------------------------------------------
/** 1. VARIABLES
--------------------------------------------------------------*/
:root {
  --primary-color: #F2B821;
  --secondary-color: #05213C;
  --black-color: #292929;
  --light-black-color: #343536;
  --dark-color: #313131;
  --body-color: #5A5A5A;
  --gray-color: #777F81;
  --light-color: #fdfdfd;

  /* Bootstrap Theme Color  */
  --bs-gray-100: #F6F6F6;
  --bs-gray-300: #DCDCDC;
  --bs-primary-text-emphasis: var(--primary-color);
  --bs-body-color-rgb: 90, 90, 90;
  --bs-light-rgb: rgba(255, 255, 255, 1);
  --bs-dark-rgb: 41, 41, 41;
  --bs-primary-rgb: 178, 142, 113;
}

/* Fonts */
:root {
  --heading-font: "Poppins", sans-serif;
  --body-font: "Poppins", sans-serif;
}

/*----------------------------------------------*/
/* 2 GENERAL TYPOGRAPHY
/*----------------------------------------------*/

/* 2.1 General Styles
/*----------------------------------------------*/
*,
*::before,
*::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html {
  box-sizing: border-box;
}

body {
  background-color: var(--light-color);
  font-family: var(--body-font);
  font-size: 16px;
  font-weight: 400;
  line-height: 164%;
  letter-spacing: 0.32px;
  color: var(--body-color);
  margin: 0;
  padding-top: 120px; /* adjust to match your header-top height */
}

p {
  color: var(--body-color);
}

a {
  color: inherit;
  text-decoration: none;
  transition: 0.3s ease-in-out;
}

a:hover {
  color: var(--primary-color);
}

.text-light {
  color: var(--light-color) !important;
}

.text-primary {
  color: var(--primary-color) !important;
}

.text-black {
  color: var(--black-color) !important;
}

/*---------------------------
Smooth Scroll
----------------------------*/
html {
  scroll-behavior: smooth;
}

/* Small fallback margin — JS will set exact value dynamically */
section {
  scroll-margin-top: 80px;
}


/* 2.2 Background Color
/*----------------------------------------------*/
.bg-light {
  background-color: var(--light-color) !important;
}

.bg-primary {
  background-color: var(--primary-color) !important;
}

.bg-secondary {
  background-color: var(--secondary-color) !important;
}

.bg-gray {
  background-color: var(--bs-gray-100) !important;
}


/*--------------------------------------------------------------
/** 2.3 Section
--------------------------------------------------------------*/
/* - Section Padding
--------------------------------------------------------------*/
.padding-small {
  padding-top: 8em;
  padding-bottom: 8em;
}

.padding-medium {
  padding-top: 10em;
  padding-bottom: 10em;
}

.padding-large {
  padding-top: 12em;
  padding-bottom: 12em;
}

@media only screen and (max-width: 990px) {
  .padding-small {
    padding-top: 6em;
    padding-bottom: 6em;
  }
}

/* - Section Margin
--------------------------------------------------------------*/
.margin-small {
  margin-top: 8.125em;
  margin-bottom: 8.125em;
}

.margin-medium {
  margin-top: 10em;
  margin-bottom: 10em;
}

.margin-large {
  margin-top: 12em;
  margin-bottom: 12em;
}


/* - Section Title
--------------------------------------------------------------*/
h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--dark-color);
  font-family: var(--heading-font);
  text-transform: capitalize;
  font-weight: 600;
  letter-spacing: 0.84px;
  line-height: 115%;
}

h6 {
  font-weight: 500;
  letter-spacing: 0.3rem;
}

/* - Content width
--------------------------------------------------------------*/
.container-md {
  max-width: 1465px;
}

.container-lg {
  max-width: 1750px;
}

/* Animation */
@media (min-width: 200px) {
  .animate {
    animation-duration: 0.3s;
    -webkit-animation-duration: 0.3s;
    animation-fill-mode: both;
    -webkit-animation-fill-mode: both;
  }
}

/* Animate Slide */
@keyframes slide {
  0% {
    transform: translateY(1rem);
    opacity: 0;
  }

  100% {
    transform: translateY(0rem);
    opacity: 1;
  }

  0% {
    transform: translateY(1rem);
    opacity: 0;
  }
}

@-webkit-keyframes slide {
  0% {
    -webkit-transform: transform;
    -webkit-opacity: 0;
  }

  100% {
    -webkit-transform: translateY(0);
    -webkit-opacity: 1;
  }

  0% {
    -webkit-transform: translateY(1rem);
    -webkit-opacity: 0;
  }
}

.slide {
  -webkit-animation-name: slide;
  animation-name: slide;
}

/*--------------------------------------------------------------
/** 2.4 Buttons
--------------------------------------------------------------*/

.btn {
  --bs-btn-padding-x: 2rem;
  --bs-btn-padding-y: 1rem;
  --bs-btn-font-size: 1rem;
  --bs-btn-font-weight: 500;
  text-transform: uppercase;
  border-radius: 0px;
  transition: all 0.5s ease-in-out;
}

/* - Primary Buttons
--------------------------------------------------------------*/
.btn-primary {
  --bs-btn-color: var(--light-color);
  --bs-btn-bg: var(--primary-color);
  --bs-btn-border-color: var(--primary-color);
  --bs-btn-hover-color: var(--light-color);
  --bs-btn-hover-bg: var(--primary-color);
  --bs-btn-hover-border-color: var(--primary-color);
  --bs-btn-focus-shadow-rgb: 49, 132, 253;
  --bs-btn-active-color: var(--light-color);
  --bs-btn-active-bg: var(--primary-color);
  --bs-btn-active-border-color: var(--primary-color);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: var(--light-color);
  --bs-btn-disabled-bg: var(--primary-color);
  --bs-btn-disabled-border-color: var(--primary-color);
}

/* - Button Hover Effect
--------------------------------------------------------------*/
.btn-slide.btn-bg {
  background-color: var(--light-color);
}

.btn-slide {
  position: relative;
  display: inline-block;
  border: none;
  cursor: pointer;
  background-color: var(--secondary-color);
}

.btn-slide.hover-slide-right::before {
  top: 0;
  bottom: 0;
  left: 0;
  height: 100%;
  width: 3%;
  position: absolute;
  content: "";
  background-color: var(--primary-color);
  transition: 0.3s ease-in-out;
}

.btn-slide span {
  position: relative;
  display: inline-block;
  top: 0;
  left: 0;
  width: 100%;
  transition: 0.3s;
  font-weight: 600;
}

.btn-slide.hover-slide-right:hover::before {
  width: 100%;
}

.btn-slide.hover-slide-right:hover span {
  color: var(--light-color);
}

/*--------------------------------------------------------------
/** 3.CONTENT ELEMENTS
--------------------------------------------------------------*/

/* Dropdown
------------------------------------------------------------- */
.dropdown-item {
  text-transform: uppercase;
  font-weight: 500;
  color: var(--dark-color);
  font-family: var(--heading-font);
}

.dropdown-item.active,
.dropdown-item:hover,
.dropdown-item:active {
  color: var(--dark-color);
}

.dropdown-toggle::after {
  border: none;
  margin-left: 0em;
  vertical-align: 0em;
  color: #1d3a63;
}


/* Breadcrumb
------------------------------------------------------------- */
.breadcrumb-item+.breadcrumb-item::before {
  color: var(--bs-light);
  position: relative;
}


/* Pagination
------------------------------------------------------------- */
.pagination {
  --bs-pagination-color: var(--black-color);
  --bs-pagination-hover-color: #fff;
  --bs-pagination-hover-bg: var(--primary-color);
  --bs-pagination-hover-border-color: var(--primary-color);
  --bs-pagination-focus-color: #fff;
  --bs-pagination-focus-bg: var(--primary-color);
  --bs-pagination-focus-box-shadow: none;
  --bs-pagination-active-bg: var(--primary-color);
  --bs-pagination-active-border-color: var(--primary-color);
}


/* Accordion
------------------------------------------------------------- */
.accordion {
  --bs-accordion-btn-icon: url('https://api.iconify.design/ion/caret-down.svg?color=%23F2B821&width=30');
  --bs-accordion-btn-active-icon: url('https://api.iconify.design/ion/caret-down.svg?color=%23F2B821&width=30');
  --bs-accordion-border-radius: 0px;
}

.accordion-button:focus {
  box-shadow: none;
}

.accordion-button:not(.collapsed) {
  background-color: transparent;
  box-shadow: none;
}


/* Form
------------------------------------------------------------- */
.form-control:focus {
  border: 1px solid #acacac;
  box-shadow: none;
}


/* Swiper
------------------------------------------------------------- */
.swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet,
.swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet {
  margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 8px);
  width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 12px));
  height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 12px));
}

.swiper-pagination-bullet.swiper-pagination-bullet-active {
  background: var(--dark-color);
}


/* Modal Video
------------------------------------------------------------- */
.modal-dialog {
  max-width: 800px;
  margin: auto;
  height: 100vh;
  display: flex;
  align-items: center;
}

.modal-content {
  padding: 0;
  background-color: #f5f3ef;
  border: none;
  border-radius: 0
}



/*----------------------------------------------*/
/* 4 SITE STRUCTURE */

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

/* 4.1 Header
/*----------------------------------------------*/

/* Slideshow background inside .header-top */
.header-top {
  position: fixed;   /* stick it to the top */
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1050;
  background: #fff;  /* or keep your slideshow overlay */
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}


.header-icons {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: -2;
}

.header-icons img {
  position: absolute;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  animation: fadeHeader 16s infinite;
}

.header-icons img:nth-child(1) { animation-delay: 0s; }
.header-icons img:nth-child(2) { animation-delay: 4s; }
.header-icons img:nth-child(3) { animation-delay: 8s; }
.header-icons img:nth-child(4) { animation-delay: 12s; }

@keyframes fadeHeader {
  0% { opacity: 0; }
  5% { opacity: 1; }
  25% { opacity: 1; }
  30% { opacity: 0; }
  100% { opacity: 0; }
}

/* Overlay above slideshow */
.header-overlay {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(230, 236, 246, 0.6);
  z-index: -1;
}

/* === Reduce logo height === */
/* === Reduce logo height === */
.navbar-brand img {
  height: 6rem;      /* ~56px on mobile */
}

@media (min-width: 992px) {
  .navbar-brand img {
    height: 7rem;      /* ~80px on desktop */
  }
}

/* === Reduce vertical padding of navbar === */
#primary-header.navbar {
  padding-top: 0.5rem !important;   /* was py-3 (~1rem) */
  padding-bottom: 0.5rem !important;
}

/* Desktop nav links */
#primary-header .nav-link {
  font-size: 1.1rem;
  font-weight: 600;
  color: #1d3a63;
}
#primary-header .nav-link:hover,
#primary-header .nav-link.active {
  color: #f36f21;
}

/* Mobile offcanvas */
.offcanvas {
  background-color: #fff;
  height: 50%;
 
}
.offcanvas .nav-link {
  font-size: 1.4rem;
  font-weight: bold;
  color: #1d3a63;
}
.offcanvas .nav-link:hover {
  color: #f36f21;
}


a.nav-link {
  text-transform: capitalize;
  font-weight: 600px;
  color: #1d3a63;
  font-family: "Montserrat", sans-serif;
  transition: all 0.3s ease-in-out;
  font-size: 20px;
}

a.nav-link::after {
  content: "";
  text-align: center;
  display: block;
  width: 0;
  height: 2px;
  background: #f36f21;
  transition: width 0.9s;
  color: #f36f21;
}

a.nav-link.active::after,
a.nav-link:focus::after,
a.nav-link:hover::after {
  width: 100%;
  transition: width 0.9s;
}

.navbar-toggler svg{
  color: #1d3a63;
}

#primary-header .dropdown .search::after {
  content: none;
}

#primary-header .search-dropdown .dropdown-menu {
  width: 260px;
}

#primary-header .search-dropdown .dropdown-menu input {
  min-width: 50%;
}

#primary-header .search-dropdown .dropdown-menu button {
  padding: 0 12px;
  min-height: -webkit-fill-available;
  border-radius: 0.25rem;
}

@media only screen and (max-width: 990px) {
  a.nav-link {
    font-size: 1.5rem;
  }

  a.nav-link.active::after,
  a.nav-link:focus::after,
  a.nav-link:hover::after {
    width: 0%;
  }

  a.nav-link.active,
  a.nav-link:focus,
  a.nav-link:hover {
    color: #f36f21;
  }
}




/* 4.2 Brand Section/Bill Board
/*----------------------------------------------*/
img.brand-image {
  filter: contrast(0);
  transition: all 0.3s ease-in;
}

img.brand-image:hover {
  filter: contrast(1);
}

#billboard h3{
  color: #f36f21;
}

#billboard .btn{
  background: #f36f21;
  border-radius: 4px;
}

#billboard .btn span{
  color: #fff;
}

#billboard p{
  color: #f36f21;
}

/*---------------------------------------------
Why Work With Us
---------------------------------------------*/
/* Section title */
#why-work-with-us h2{
  font-size: 2rem;
  font-weight: 700;
  color: #f36f21;
}

#why-work-with-us h6{
  font-size: 1.3rem;
  color: #fff;
  line-height: 2.1rem;
  text-align: justify;
}

#why-work-with-us{
  background: url(images/we-manage.jpg);
  margin-top: 1rem;
}

/* Card design */
.why-card {
  background: #ffffff;
  border: 2px solid #f36f21;
  border-radius: 5px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0px 4px 10px rgba(0,0,0,0.05);
}

.why-card:hover {
  transform: translateY(-5px);
  box-shadow: 0px 8px 20px rgba(0,0,0,0.1);
}

/* Icon styling */
.why-card .icon {
  color: #f36f21;
}

/* Text */
.why-card h4 {
  font-size: 1.4rem;
  font-weight: 600;
  color: #1d3a63;
}

.why-card p {
  font-size: 1.2rem;
  color: #555;
  text-align: left;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  #why-work-with-us h2{
    font-size: 2rem;
  }
}


/*-------------------------------------
Trust & Reassurance
------------------------------------*/
.trust-section {
  position: relative;
  width: 100%;
  min-height: 90vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.trust-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}

.trust-img-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;
}

.bg-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0;
  animation: fadeSlides 15s infinite;
}

/* Each slide’s image */
.bg1 {
  background-image: url("images/Trust-3.jpg");
  animation-delay: 0s;
}
.bg2 {
  background-image: url("images/what-we-do.jpg");
  animation-delay: 5s;
}
.bg3 {
  background-image: url("images/guaranteed-rent.jpg");
  animation-delay: 10s;
}

/* Fade animation */
@keyframes fadeSlides {
  0% { opacity: 0; }
  5% { opacity: 1; }
  30% { opacity: 1; }
  35% { opacity: 0; }
  100% { opacity: 0; }
}

.trust-img-overlay::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #1d3a63;
  opacity: 0.7;
}

/* Text content */
.trust-content {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
  padding: 4rem 2rem;
  color: #fff;
  text-align: center;
}

.trust-content h2 {
  font-weight: 700;
  color: #f36f21;
  margin-bottom: 0.5rem;
}

.trust-content .sub-heading {
  font-size: 1.6rem;
  margin-bottom: 2.5rem;
  color: #fff;
  text-align: justify;
  line-height: 1.5rem;
}

/* Trust Items layout */
/* Keep your existing trust-section background styles */

.trust-items-row {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}

.trust-card {
  flex: 1 1 30%;
  padding: 2rem 1.5rem;
  color: #fff;
  text-align: center;
}

/* Initial hidden state for slide-in effect */
/* Hidden state for all cards */
.trust-card {
  opacity: 0;
  transition: all 2s ease-out;
}

/* Slide in from left */
.trust-card.left {
  transform: translateX(-80px);
}

/* Slide in from right */
.trust-card.right {
  transform: translateX(80px);
}

/* Final visible state */
.trust-card.show {
  opacity: 1;
  transform: translateX(0);
}


/* Icon styling */
.trust-card .icon {
  font-size: 3.5rem;
  color: #f36f21;
  margin-bottom: 1rem;
}

/* Headings */
.trust-card h4 {
  font-size: 1.4rem;
  font-weight: 600;
  margin-bottom: 1rem;
  color: #f36f21;
}

/* Paragraph */
.trust-card p {
  font-size: 1.2rem;
  line-height: 1.6rem;
  color: #fff;
  text-align: center;
}

/* Hover effect */
.trust-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 15px rgba(0,0,0,0.3);
}

/* Mobile view */
@media (max-width: 950px) {
  .trust-items-row {
    flex-direction: column;
    gap: 1.5rem;
  }

  .trust-card {
    flex: 1 1 100%;
    width: 100%;
    padding: 1.5rem 1rem;
  }

  .trust-card p{
    text-align: center;
  }
}



/* ----------------------------------------------
About-Us Section 
/*----------------------------------------------*/
svg.play-icon {
  animation: play 1.5s alternate infinite ease-in;
}

/* ===== About Us Section ===== */
#about-us {
  padding: 10px 0;
  margin-top: 1rem;
}

#about-us .container {
  max-width: 1200px;
}

#about-us .row {
  display: flex;
  align-items: stretch; /* makes both columns equal height */
}

/* Image column */
#about-us .imageblock {
  width: 100%;
  height: 100%;
}

#about-us .imageblock img {
  width: 100%;
  height: 100%;
  object-fit: cover;         /* keep image proportions while covering */
  border-radius: 8px;        /* optional: rounded corners */
}

/* Text column */
#about-us .section-title {
  font-size: 2rem;
  margin-bottom: 20px;
  font-weight: bold;
  color: #1d3a63;
}

#about-us h3 {
  font-size: 1.5rem;
  margin-bottom: 20px;
  color: #f36f21;
}

#about-us p {
  font-size: 1.2rem;
  line-height: 1.7;
  color: #555;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  #about-us .row {
    flex-direction: column;
  }

  #about-us .imageblock img {
    height: 300px; /* fixed height for smaller screens */
  }
}


/*----------------------------------------
Professional Tenants Section
----------------------------------------*/

.professional-tenants { text-align:center; max-width:1200px; margin:0 auto; }
    .professional-tenants h2 { color:#1d3a63; font-weight:700; margin-bottom:10px; margin-top: 10px; font-size:22px; }

    /* Swiper container sizing */
    .logo-slider { width: 100%; margin: 0 auto; box-sizing: border-box; padding: 18px 0; }
    .swiper-wrapper { align-items: center; } /* vertically center slides */

    .swiper-slide {
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .logo-slide img {
      display: block;
      max-height: 80px;     /* desktop size */
      width: auto;
      object-fit: contain;
      margin: 0 auto;
      transition: transform .25s ease;
    }
    .logo-slide img:hover { transform: scale(1.05); }

    /* Arrow & pagination color */
    .swiper-button-next, .swiper-button-prev { color: #1d3a63; }
    .swiper-pagination-bullet-active { background: #1d3a63; }

    /* Hide arrows on small screens (optional) */
    @media (max-width: 768px) {
      .swiper-button-next, .swiper-button-prev { display: none; }
      .logo-slide img { max-height: 60px; }
    }

/*-----------------------------------------
Services/How It Works
-----------------------------------------*/
#services {
  position: relative;
  padding: 80px 0;
  color: #fff;
  overflow: hidden;
  margin-top: 1rem;
}

.services-bg {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 0;
}

#services .overlay {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  background: rgba(29, 58, 99, 0.8); /* navy overlay */
  z-index: 1;
}

#services .container {
  position: relative;
  z-index: 2;
}

.container h1{
  font-size: 2rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #f36f21;
  text-shadow: 2px 2px 8px rgba(0,0,0,0.6);
}

.service-card {
  border: 2px solid #f36f21;
  border-radius: 10px;
  transition: all 0.3s ease-in-out;
  background: rgba(255,255,255,0.05);
}

.service-card:hover {
  transform: translateY(-10px);
  border-color: #1d3a63;
  background: rgba(255,255,255,0.1);
}

.service-card h3{
  color: #f36f21;
}

.service-card p{
  text-align: left;
  line-height: 1.7rem;
  font-size: large;
}


/*--------------------------------------
Guarenteed Rent
---------------------------------------*/
/* Hero section */
.hero {
  width: 100%;
  background: #fff;
  padding: 0;
  margin-top: 30px;
  background: url(../images/about_1.jpg);
}

.hero-container {
  display: flex;
  flex-wrap: wrap;
  min-height: 100vh; /* Full screen height */
  margin-bottom: 20px;
  border-radius: 5px;
}

/* Left image */
.hero-image {
  flex: 1 1 50%;
}
.hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Right content */
.hero-content {
  flex: 1 1 50%;
  background-color: #1d3a63; /* Your brand blue */
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 3rem;
}

.hero-content h1 {
  font-size: 1.5rem;
  margin-top: 1rem;
  color: #f36f21; /* Orange accent from your logo */
}

.hero-content p {
  margin-top: 1px;
  font-size: 1.2rem;
  line-height: 1.6;
  margin-bottom: 2rem;
  padding: 1rem;
  border: 2px solid #f36f21; /* Brand orange border */
  border-radius: 6px;
  background-color: rgba(29, 58, 99, 0.7); /* Transparent brand color */
  color: #fff; /* White text for readability */
  text-align: left;
}

/* ✅ Expand paragraph boxes on mobile */
@media (max-width: 768px) {
  .hero-content p {
    width: 100%;             /* Take full width */
    box-sizing: border-box;  /* Ensure padding/border don’t overflow */
    margin-left: 0;
    margin-right: 0;
  }
}

/* Responsive design */
@media (max-width: 992px) {
  .hero-container {
    flex-direction: column;
  }
  .hero-image,
  .hero-content {
    flex: 1 1 100%;
  }
  .hero-content {
    padding: 2rem;
    text-align: center;
  }
}

/* -------------------------------
  Animation Initial States
----------------------------------*/
.hero-image,
.hero-content,
.hero-content h1,
.hero-content p {
  opacity: 0;                  /* Hidden before scroll */
  transform: translateY(40px); /* Slightly shifted down */
  transition: all 2s ease;
}

/* When element is visible */
.hero-image.animate-left {
  opacity: 1;
  transform: translateX(0);
  transition-delay: 0.2s;
}

.hero-content.animate-right {
  opacity: 1;
  transform: translateX(0);
  transition-delay: 0.4s;
}

/* Headings staggered */
.hero-content h1.show {
  opacity: 1;
  transform: translateY(0);
}

/* Paragraphs staggered */
.hero-content p.show {
  opacity: 1;
  transform: translateY(0);
}

/* Different directions for left/right slide-in */
.hero-image {
  transform: translateX(-60px); /* slide from left */
}

.hero-content {
  transform: translateX(60px);  /* slide from right */
}


/* 4.4 Services Section
/*----------------------------------------------*/
/* Jarallax */
.jarallax {
  min-height: 350px;
  transition: all 0.5s ease-in-out;
}

.service-block {
  transition: all 0.5s ease-in-out;
}

.service-block:hover .jarallax {
  opacity: 0;
}

.service-btn {
  transition: all 0.5s ease-in-out;
}

.service-block:hover .service-btn {
  color: var(--dark-color);
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

#services i{
  font-size: 5rem;
  margin-left: 10rem;
  color: #f36f21;
}

.section-title {
  margin-top: 2rem;
  font-size: 3rem;
  font-weight: 800;
  color: #f36f21;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 2rem;
  text-shadow: 2px 2px 8px rgba(0,0,0,0.6); /* Makes text pop on images */
}

@media (max-width: 992px) {
  .section-title {
    font-size: 2.4rem;
  }
}

@media (max-width: 576px) {
  .section-title {
    font-size: 1.8rem;
    letter-spacing: 1px;
  }
}



/* 4.5 Project Section
/*----------------------------------------------*/
.swiper-slide.swiper-width {
  width: auto !important;
}

.project-content .portfolio-img {
  transition: all 0.5s ease-in-out;
}

.project-content:hover .portfolio-img {
  opacity: 0.3;
}

.portfolio-description {
  opacity: 0;
  transition: all 0.5s ease-in-out;
}

.project-content:hover .portfolio-description {
  opacity: 1;
}

/*-------------------------------------------
Get In Touch
-------------------------------------------*/
/* Section wrapper */
.contact-section {
  padding: 2rem 2rem;
  background: #f8f7f7;
  text-align: center;
  margin-bottom: 15px;
  margin-top: 15px;
}

/* Title */
.contact-title {
  font-size: 2rem;
  font-weight: bold;
  color: #1d3a63;
  margin-bottom: 2rem;
  text-transform: uppercase;
  position: relative;
}

/* Grid layout */
.contact-container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: flex-start;
}

/* Left column (info) */
.contact-info {
  text-align: left;
  margin-top: 1rem;
}

.contact-info .info-item {
  display: flex;              /* keeps icon + text aligned */
  align-items: center;
  margin-bottom: 0.25rem;      /* reduced vertical space */
}

.contact-info .info-item:last-child {
  margin-bottom: 0;           /* remove extra space after the last item */
}

.contact-logo {
  max-width: 200px;
  margin-bottom: 1.5rem;
}

.contact-info img{
   height: 7rem;
   width: 10rem;
   border-radius: 10px;
}

.info-item {
  margin-bottom: 1.2rem;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-size: 1.1rem;
  color: #1d3a63;
}

.info-item i {
  font-size: 1.9rem;
  color: #f36f21;
  margin-bottom: 1.5rem;
}

.info-item p{
  font-size: 0.9rem;
  color: #1d3a63;
}

/* Right column (form) */
#contactForm {
  background: rgba(29, 58, 99, 0.9); /* transparent blue */
  padding: 2rem;
  border-radius: 8px;
}

#contactForm input,
#contactForm textarea {
  width: 100%;
  padding: 0.9rem;
  margin-bottom: 1rem;
  border-radius: 25px;
  border: none;
  outline: none;
  font-size: 1rem;
}

#contactForm textarea {
  resize: none;
  height: 120px;
  border-radius: 15px;
}

.form-row {
  display: flex;
  gap: 1rem;
}

.form-row input {
  flex: 1;
}

.btn-send {
  width: 100%;
  padding: 1rem;
  background: #f36f21;
  border: none;
  border-radius: 25px;
  color: white;
  font-size: 1.1rem;
  cursor: pointer;
  transition: 0.3s;
}

.btn-send:hover {
  background: #d65a15;
}

/* Responsive */
@media (max-width: 768px) {
  .contact-container {
    grid-template-columns: 1fr;
  }

  .contact-info {
    text-align: center;
  }

  .form-row {
    flex-direction: column;
  }
}

.file-upload {
  margin-top: 1rem;
  font-size: 0.95rem;
  color: #f36f21
}

.file-upload input[type="file"] {
  display: block;
  margin-top: 0.5rem;
  padding: 0.4rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #f9f9f9;
  cursor: pointer;
}

.file-upload input[type="file"]:hover {
  border-color: #f36f21;
}

/*---------------------------------------------
Meet The Team
----------------------------------------------*/
/* Team Section */
.team-section {
  padding: 1rem 0;
  background: #f9f9f9;
}

.team-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;       /* centers the cards */
  gap: 6rem;                      /* more space between team members */
}

.team-member {
  flex: 1 1 45%;                  /* wider cards on desktop */
  max-width: 500px;               /* controls the maximum size */
  background: #fff;
  border-radius: 10px;
  padding: 1.5rem;
  text-align: center;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

.team-member img {
  width: 100%;
  height: 380px;
  object-fit: cover;
  aspect-ratio: 4/5;               /* keeps portrait ratio */
  border-radius: 10px;
  margin-bottom: 1rem;
}

.team-section h2{
  color: #1d3a63;
  font-size: 1.9rem;
}

.team-member h3 {
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
  color: #1d3a63;
}

.team-member h4 {
  font-size: 1rem;
  color: #f36f21;
  margin-bottom: 1rem;
}

.team-member p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #555;
  text-align: left;
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .team-row {
    gap: 2rem;                     /* slightly reduce space for mobile */
  }
  .team-member {
    flex: 1 1 85%;                  /* take more width on mobile */
    max-width: 550px;
  }
}


/*--------------------------------------------------------------
# Faq Section
--------------------------------------------------------------*/
.faq.section {
  padding: 60px 0;
  background: linear-gradient(
    rgba(20, 40, 70, 0.05),
    rgba(20, 40, 70, 0.05)
  );
}

.faq .content h3 {
  font-weight: 400;
  font-size: 34px;
  color: #1d3a63;
}

.faq .content h3 strong{
  font-weight: 400;
  font-size: 34px;
  color: #f36f21;
}

.faq .content p {
  color: color-mix(in srgb, var(--default-color), transparent 30%);
}

.faq .faq-container {
  margin-top: 15px;
}

.faq .faq-container .faq-item {
  background-color: var(--surface-color);
  position: relative;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0px 5px 25px 0px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.faq .faq-container .faq-item:last-child {
  margin-bottom: 0;
}

.faq .faq-container .faq-item h3 {
  font-weight: 600;
  font-size: 17px;
  line-height: 24px;
  margin: 0 30px 0 32px;
  transition: 0.3s;
  cursor: pointer;
  color: #1d3a63;
}

.faq .faq-container .faq-item h3 span {
  color: #f36f21;
  padding-right: 5px;
}

.faq .faq-container .faq-item h3:hover {
  color: #f36f21;
}

.faq .faq-container .faq-item .faq-content {
  display: grid;
  grid-template-rows: 0fr;
  transition: 0.3s ease-in-out;
  visibility: hidden;
  opacity: 0;
}

.faq .faq-container .faq-item .faq-content p {
  margin-bottom: 0;
  overflow: hidden;
  color: #1d3a63;
}

.faq .faq-container .faq-item .faq-icon {
  position: absolute;
  top: 22px;
  left: 20px;
  font-size: 22px;
  line-height: 0;
  transition: 0.3s;
  color: #f36f21;
}

.faq .faq-container .faq-item .faq-toggle {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 16px;
  line-height: 0;
  transition: 0.3s;
  cursor: pointer;
  color: #f36f21;
}

.faq .faq-container .faq-item .faq-toggle:hover {
  color: var(--accent-color);
}

.faq .faq-container .faq-active h3 {
  color: #1d3a63;
}

.faq .faq-container .faq-active .faq-content {
  grid-template-rows: 1fr;
  visibility: visible;
  opacity: 1;
  padding-top: 10px;
}

.faq .faq-container .faq-active .faq-toggle {
  transform: rotate(90deg);
  color: #1d3a63;
}


/* -----------------------------
  Registered Logos Section
--------------------------------*/
.registered-section {
  position: relative; /* allows overlay */
  padding: 1rem 1rem;

  /* Background image */
  background: url("images/we-manage.jpg") no-repeat center center/cover;
}

/* Dark overlay on top of background */
.registered-section::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background: rgba(29,58,99,0.6); /* semi-transparent dark overlay */
  z-index: 0;
}

.registered-title {
  font-size: 1.8rem;
  font-weight: 600;
  color: #f36f21;
  margin-bottom: 2rem;
  text-align: center;
  position: relative;      /* keep above overlay */
  z-index: 1;
}

.registered-logos {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6rem;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;              /* keep above overlay */
}

.registered-logos img {
  width: 170px;
  height: 120px;
  object-fit: contain;
  background: #fff;
  border-radius: 12px;
  padding: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.registered-logos img:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}

/* Responsive for mobile */
@media (max-width: 768px) {
  .registered-logos {
    gap: 2rem;
  }

  .registered-logos img {
    width: 100px;
    height: 100px;
  }
}




/*---------------------------------------
Footer
----------------------------------------*/
/* Footer Base with Background */
.site-footer {
  position: relative;
  color: #a4a2a2;
  padding: 25px 0 20px;
  font-size: 15px;
  line-height: 1.7;
  z-index: 1;
  background: #edecec;
}

/* Footer Logos Section */
.footer-logos {
  display: flex;
  justify-content: center;      /* center horizontally */
  align-items: center;          /* center vertically */
  gap: 25px;                    /* space between logos */
  margin-top: 0;
  background: #edecec;
}

.logo-card {
  background-color: #edecec;    /* dark background for card */
  border-radius: 12px;
  padding: 2px;
  width: 130px;                 /* consistent width */
  height: 100px;                /* consistent height */
  display: flex;
  justify-content: center;
  align-items: center;
  transition: transform 0.3s ease;
  border: 1px solid #1d3a63;
}

.logo-card img {
  max-width: 85%;
  max-height: 85%;
  object-fit: contain;          /* keeps aspect ratio of logos */
}

/* Hover effect on desktop */
.logo-card:hover {
  transform: scale(1.05);
}

/* Mobile responsiveness */
@media (max-width: 767px) {
  .footer-logos {
    justify-content: center;    /* keep side-by-side */
    gap: 15px;                   /* slightly reduce gap */
    flex-wrap: nowrap;           /* prevent stacking */
  }

  .logo-card {
    width: 110px;                /* slightly smaller cards */
    height: 110px;
    padding: 10px;
  }
}

.footer-title {
  color: #1d3a63;
  font-weight: 600;
  margin-bottom: 20px;
  font-size: 1.5rem;
}

.footer-about {
  margin-top: 10px;
  font-size: 14px;
  color: #000;
}

.footer-links li {
  margin-bottom: 10px;
  text-decoration: underline;
  font-size: 1.1rem;
}

.footer-links a {
  color: #1d3a63;
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-links a:hover {
  color: #f36f21; /* highlight on hover */
}

/* Contact Info */
.site-footer p i {
  color: #f36f21;
  font-size: 1.5rem;
}

.site-footer p{
  font-size: 1.1rem;
  color: #1d3a63;
}

.site-footer img{
  width: 10rem;
  height: 7rem;
}

/* Social Media Icons */
.social-icons a {
  display: inline-block;
  margin-right: 12px;
  transition: transform 0.3s ease;
}

.social-icons a:last-child {
  margin-right: 0;
}

.social-icons img.social-logo {
  width: 32px;       /* adjust size as needed */
  height: 32px;      /* keep it square */
  object-fit: contain;
}

.social-icons a:hover img {
  transform: scale(1.15); /* subtle zoom on hover */
}


/* Footer Bottom */
.footer-bottom {
  border-top: 1px solid #1d3a63;
  padding-top: 15px;
  margin-top: 20px;
  font-size: 1.2rem;
  color: #090909;
}

/* Responsive */
@media (max-width: 767px) {
  .site-footer {
    text-align: center;
  }
  .social-icons {
    margin-top: 10px;
  }
}


/*----------------------------------------------*/
/* 5 PAGES STYLE */
/*----------------------------------------------*/


/* 5.1 Projects Page
/*----------------------------------------------*/

button.filter-button {
  border: 0;
  background: transparent;
  text-transform: uppercase;
  transition: all 0.5s ease-in-out;
  border-radius: 20px;
}

button.filter-button.active,
button.filter-button:hover {
  color: var(--bs-light);
  background: var(--primary-color);
}