/*-----------------
Root Colors 
------------------*/
:root {
  --primary-color: #7e1416;
  --secondary-color: #1e295d;
  --text-color: #333;
  --light-bg: #f8f9fa;
  --info: #457b9d;          /* Survey blue */
  --warning: #ffc107;       /* Yellow */
  --danger: #e63946;        /* PDF red */
}
}

/* Use CSS variables throughout */
.btn-primary {
  background-color: var(--primary-color);
}

/* Optimize animations with will-change */
#services .card {
  will-change: transform, box-shadow;
}

/* Reduce layout shifts with aspect-ratio */
.card-img-top {
  aspect-ratio: 1/1;
  object-fit: cover;
}

/*--------------------------
General Styles 
----------------------------*/
body {
  font-family: 'Roboto', sans-serif;
  color: #1e295d;
  margin: 0;
  padding: 0;
}

/*------------------------
Navbar Styles 
--------------------------*/
#navbar {
  background: transparent;
  transition: background 0.6s, color 0.9s;
  z-index: 1000; /* Ensure navbar is on top */
}

#navbar.scrolled {
  backdrop-filter: blur(10px); /* Frosted glass effect */
  -webkit-backdrop-filter: blur(10px);
  background: rgba(255, 255, 255, 0.88); /* Slightly more transparent */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

#navbar.scrolled .nav-link {
  color: #1e295d !important; /* Primary color for text */
}

#navbar.scrolled .navbar-brand {
  color: #1e295d; /* Primary color for brand text */
}

/* Navbar Link Styles */
.navbar-nav .nav-link {
  font-size: 0.9rem; /* Slightly bigger text */
  font-weight: 600; /* Bold text */
  text-transform:uppercase;
  margin: 0 5px; /* Increase spacing between links */
  padding: 5px 0; /* Add padding for better click area */
  position: relative;
  transition: color 0.3s ease;
}

.navbar-nav .nav-link:hover {
  color: #7e1416 !important; /* Change color on hover */
}

/* Dropdown Styles */
.navbar-nav .dropdown-menu {
  background-color: rgba(255, 255, 255, 0.95); /* Match navbar background */
  border: none;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.navbar-nav .dropdown-item {
  color: #1e295d !important; /* Primary color for text */
  font-size: 1rem;
  font-weight: 500;
  padding: 10px 20px;
  transition: background-color 0.3s ease;
}

.navbar-nav .dropdown-item:hover {
  background-color: rgba(126, 20, 22, 0.1); /* Light red background on hover */
}

/*-----------------------------
NAV Link subtle micro-interactions 
-------------------------------*/
.nav-link {
  position: relative;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--primary-color);
  transition: width 0.3s ease;
}

.nav-link:hover::after {
  width: 100%;
}

/*-----------------------------------
Scroll Indicator - Simple Version 
-------------------------------------*/
.navbar-scroll-indicator {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  z-index: 1031; /* Above navbar (Bootstrap navbar z-index is 1030) */
  background: transparent;
}

.navbar-scroll-indicator__progress {
  height: 100%;
  width: 0;
  background: #7e1416; /* Your primary color */
  transition: width 0.1s linear;
}

/* When navbar is scrolled (dark mode) */
.navbar.scrolled .navbar-scroll-indicator__progress {
  background: #ff6b6b; /* High-contrast color */
}

/* Thicker glowing version */
/*.navbar-scroll-indicator__progress {
  height: 4px;
  box-shadow: 0 0 10px rgba(126, 20, 22, 0.7);
}

.navbar.scrolled .navbar-scroll-indicator__progress {
  box-shadow: 0 0 10px rgba(255, 107, 107, 0.9);
}*/

/*--------------------------
Search Icon Styles 
----------------------------*/
.search-icon {
  font-size: 1.2rem; /* Slightly bigger icon */
  margin-left: 15px; /* Add spacing between Contact Us and search icon */
  transition: transform 0.3s ease;
}

.search-icon:hover {
  transform: scale(1.2); /* Animate icon on hover */
}

/* Logo Styles */
.navbar-brand img {
  height: 60px; /* Adjust height as needed */
  width: auto; /* Maintain aspect ratio */
  margin-right: 10px; /* Add spacing between logo and nav links */
}

/* Hide the dark logo by default */
.logo-dark {
  display: none;
}

/* Show dark logo when navbar is scrolled */
#navbar.scrolled .logo-light {
  display: none;
}

#navbar.scrolled .logo-dark {
  display: inline-block;
}

/* Navbar Toggler Icon Color Control */
.navbar-toggler {
  border: none;
  padding: 0.5rem;
}

.navbar-toggler:focus {
  box-shadow: none;
  outline: none;
}

/* Default color (light for dark backgrounds) */
.navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.8%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
  transition: all 0.3s ease;
}

/* Scrolled state - dark color for light backgrounds */
#navbar.scrolled .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2830, 41, 93, 0.8%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
/*--------------------------
Section Styles 
----------------------------*/
.landing-section {
  height: 100vh;
  background-size: cover;
  background-position: center;
  position: relative;
}

.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* background-color: rgba(0, 0, 0, 0.5); Dark overlay for better text contrast */
}

.landing-section .container {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}


.landing-section {
  background-position: center center;
  transition: background-position 1s ease-out;
}

/* Add to your existing landing-section styles */
.landing-section {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 90%;
}

.hero-image-container {
  position: relative;
  z-index: 2;
  padding: 2rem;
  max-width: 900px; /* Adjust this value */
  margin: 0 auto;  
}

.hero-image {
  max-height: 70vh;
  object-fit: contain;
  filter: drop-shadow(0 10px 20px rgba(0,0,0,0.3));
  animation: float 6s ease-in-out infinite;
  width: auto;
  max-width: 100%; 
}

.hero-content h1 {
  font-size: 2.5rem !important; /* Override Bootstrap */
  font-weight: 600 !important;
  margin-bottom: 1.5rem !important;
}

.hero-content p {
  font-size: 1.1rem;
  line-height: 1.6;
  margin-bottom: 2rem;
}


/* Floating animation for the image */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-20px); }
}

/* Responsive adjustments */
@media (max-width: 992px) {
  .hero-content {
    max-width: 100%;
    padding-right: 0;
    text-align: center;
  }
  
  .hero-content h1 {
    font-size: 2rem !important;
  }
}


/* Responsive adjustments */

/* Background Images for Each Section */
/*#home {
  background-image: url('../images/bg/home-poster.jpg');
}*/
/*----------------
Backgrounds
------------------*/

#services {
  background-image: url('../images/bg/services.jpg');
    background-size: fit; /*temporal*/
  background-position: center; /*temporal*/
}

#equip {
  background-image: url('../images/bg/equip.jpg');
}

#team {
  background-image: url('../images/bg/team.jpg');
  background-size: cover; /*temporal*/
  background-position: center; /*temporal*/
  filter: brightness(0.8) contrast(1.1);  /*Better text contrast or opacity: 0.15;*/
}


#reviews {
  background-image: url('../images/bg/reviews.jpg');
}

#contact {
  background-image: url('../images/bg/contact.jpg');
}


/*-------------------------------------
Home Video Background
---------------------------------------*/
/* Video Background Styles */
.video-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -2; /* Behind overlay but above default background */
  overflow: hidden;
}

.video-background video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  object-fit: cover;
    /*filter: brightness(0.8) contrast(1.1);  Better text contrast */
}

.video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.3); /* Adjust opacity as needed */
  z-index: 1;
}

/* Fallback for browsers that don't support video */
.no-video .video-background {
  background: url('../assets/images/bg/home-fallback.jpg') no-repeat center center;
  background-size: cover;
}

.video-background.loading {
  background: url('../images/bg/home-fallback.jpg') center/cover; /* Original BG */
}

.video-background.no-video video {
  display: none;
}

.video-background.no-video {
  background: url('../images/bg/home-fallback.jpg') center/cover;
}


/*----------------------------
BTN Button Styles 
------------------------------*/
.btn-primary {
  background-color: #7e1416;
  border: none;
  padding: 10px 20px !important;
  color: white;
  transition: background-color 0.3s;
}

.btn-primary:hover {
  background-color: #6a1012;
}


.btn-special {
  background-color: #1e295d;
  border: none;
  padding: 10px 20px !important;
  color: white;
  transition: background-color 0.3s;
}

.btn-special:hover {
  background-color: white;
}

.btn-outline {
  background-color: transparent;
  border: 1;
  border-color: #f8f9fa;  
  padding: 10px 20px !important;
  color: white;
  transition: background-color 0.3s;
}

.btn-outline:hover {
  background-color: #1e295d;
  color: white;
}

/*--------------------------
Footer Styles + Faux Line
----------------------------*/
.footer {
  background-color: #1e295d; /* Dark blue background */
  color: white;
}

.footer a {
  color: white;
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer a:hover {
  color: #7e1416; /* Primary color on hover */
}

.footer h5 {
  margin-bottom: 1rem;
}

.footer .list-unstyled {
  padding-left: 0;
  list-style: none;
}

.footer .list-unstyled li {
  margin-bottom: 0.5rem;
}

.footer .fab {
  margin-right: 0.5rem;
}

/* Horizontal Faux Line */
.footer .text-center {
  position: relative;
}

.footer .text-center::before {
  content: '';
  position: absolute;
  top: -20px; /* Adjust position above the text */
  left: 10%; /* Start 10% from the left */
  width: 80%; /* Stretch 80% of the viewport width */
  height: 1px; /* Line thickness */
  background-color: rgba(255, 255, 255, 0.3); /* Light gray line color */
}

/* Footer Logo */
.footer img {
  opacity: 0.8; /* Slightly transparent */
  transition: opacity 0.3s ease;
}

.footer img:hover {
  opacity: 1; /* Fully visible on hover */
}

/* Map Styles */
.footer iframe {
  border-radius: 8px; /* Rounded corners */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow */
}

/*-------------------
About Us Footer Section 
---------------------*/
.footer .col-md-3 {
  text-align: justify; /* Justify text for better alignment */
  margin-bottom: 1.5rem; /* Add margin at the bottom */
}

/* Footer Logo */
.footer img {
  width: 100%; /* Make the logo fill the width of its column */
  height: auto; /* Maintain aspect ratio */
  margin-top: 0rem; /* Add margin at the top */
  opacity: 0.3; /* Slightly transparent */
  transition: opacity 0.3s ease;
}

.footer img:hover {
  opacity: 1; /* Fully visible on hover */
}

.footer p {
    margin-top: 0;
    margin-bottom: 0rem;   
}

/*---------------------
Services Section 
-----------------------*/
#services h2 {
  color: white;
  /*margin-bottom: 1.5rem;*/
}

#services .lead { /*The text under services h2*/
    font-size: 1.25rem;
    font-weight: 300;
    color: white;
}


#services .card {
  height: 100%; /* Uniform height */
  transition: all 0.3s ease;
  border: none;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  cursor: pointer;
}

#services .card-body {
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

#services .card:hover {
  transform: translateY(-10px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

#services .card-title {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--secondary-color);
}

#services .card-text {
  font-size: 0.9rem;
  color: #666;
}


/*----------------------
Service Modal Styles 
------------------------*/
.modal {
    --bs-modal-zindex: 1055;
    --bs-modal-width: 97%;
    --bs-modal-padding: 5rem;
    --bs-modal-margin: 0.5rem;
   
}
.modal-content {
  background-color: #ffffff; /* White background */
  border-radius: 10px; /* Rounded corners */
  border: none; /* Remove default border */
  /*max-width: 900px;  Add your custom width here */
  margin: 0 auto; /* This helps center the modal */
  width: 100%; /* Fallback for smaller screens */  
}

.modal-header {
  background-color: #7e1416 !important; /* Dark blue background */
  color: #ffffff; /* White text */
  border-top-left-radius: 10px; /* Match modal's rounded corners */
  border-top-right-radius: 10px;
  /*padding-top: 70px */ 
}

.modal-title {
  font-weight: 600; /* Bold title */
}

.modal-body {
  color: #1e295d; /* Dark blue text */
  padding-top: 2rem;
}

.modal-body ul {
  padding-left: 20px; /* Add padding to bullet points */
}

.modal-body ul li {
  margin-bottom: 10px; /* Add spacing between bullet points */
}

.modal-footer {
  border-top: none; /* Remove default border */
  background-color: #f8f9fa; /* Light gray background */
  padding: calc(1rem);
}

.btn-secondary {
  background-color: #7e1416; /* Primary color for close button */
  border: none; /* Remove default border */
}

.btn-secondary:hover {
  background-color: #6a1012; /* Darker shade on hover */
}


/*----------------------------
Equip Your Managers Section 
-----------------------------*/
#equip .card {
  border: none;
  overflow: hidden;
  position: relative;
}

#equip .card-img {
  filter: brightness(0.7); /* Darken the background image */
  transition: transform 0.3s ease, filter 0.3s ease;
}

#equip .card:hover .card-img {
  transform: scale(1.1); /* Zoom effect on hover */
  filter: brightness(0.5); /* Darken further on hover */
}

#equip .card-img-overlay {
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.2)); /* Gradient overlay */
}

#equip .card img{
  height: 260px;
  object-fit: cover;
}
#equip .card-title {
  font-size: 1.5rem;
  font-weight: 600;
}

#equip .card-text {
  font-size: 0.9rem;
  color: #ddd;
}

#equip .btn-primary {
  background-color: #7e1416; /* Primary color */
  border: none;
  transition: background-color 0.3s ease;
}

#equip .btn-primary:hover {
  background-color: #6a1012; /* Darker shade on hover */
}

@media (max-width: 768px) {
  #equip .col-md-6, #equip .col-md-4, #equip .col-md-12 {
    flex: 0 0 100%;
    max-width: 100%;
  }
}


/*--------------------------
Back to Top Button
----------------------------*/
#back-to-top {
  display: none; /* Hidden by default */
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 1000; /* Ensure it's above other elements */
  padding: 10px 15px;
  font-size: 1.2rem;
  border-radius: 50%; /* Circular button */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); /* Subtle shadow */
  transition: opacity 0.3s ease, transform 0.3s ease;
    width: 50px;
  height: 50px;
}

#back-to-top:hover {
  transform: scale(1.1); /* Slightly enlarge on hover */
}

/*--------------------------
Team Section Styles 
----------------------------*/
/* Team Section Styles */
#team .card {
  border: none;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  /*background-image: url('../images/team/team1.jpg');*/
    background-color: #1e295d;
}

#team .card:hover {
  transform: translateY(-10px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

#team .card-img-top:hover {
  border: 4px solid #7e1416; /* White border around the image */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

#team .card-img-top {
  border: 4px solid #fff; /* White border around the image */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

#team .card-title {
  font-size: 1.1rem; /* Slightly smaller title */
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: white;  
}

#team .card-subtitle {
  font-size: 0.85rem; /* Slightly smaller subtitle */
  color: #c9cfd4 !important; /* Gray color for the subtitle */
}

#team .card-text {
  font-size: 0.8rem; /* Slightly smaller text */
  color: #666;
  margin-bottom: 1rem;
}

#team .social-icons a {
  font-size: 1rem; /* Slightly smaller icons */
  transition: color 0.3s ease;
}

#team .social-icons a:hover {
  color: #7e1416; /* Primary color on hover */
}

#team .card:hover .card-img-top {
  transform: scale(1.3); /* Scale the inner image */
}

#team .social-icons {
  opacity: 0;
  transform: translateY(10px);
  transition: all 0.3s ease;
}

#team .card:hover .social-icons {
  opacity: 1;
  transform: translateY(0);
}
#team h2 {
  color: white;
  /*margin-bottom: 1.5rem;*/
}

#team .lead { /*The text under services h2*/
    font-size: 1.25rem;
    font-weight: 300;
    color: white;
}
/*-------------------------
Team Modal Tabs 
---------------------------*/
.nav-tabs .nav-link {
  color: #1e295d; /* Dark blue text */
  font-weight: 500;
  border: none;
  border-bottom: 2px solid transparent;
  transition: all 0.3s ease;
}

.nav-tabs .nav-link.active {
  color: #7e1416; /* Primary color for active tab */
  border-bottom: 2px solid #7e1416; /* Primary color for active tab */
}

.nav-tabs .nav-link:hover {
  color: #7e1416; /* Primary color on hover */
  border-bottom: 2px solid #7e1416; /* Primary color on hover */
}

.tab-content {
  padding: 20px;
  background-color: #f8f9fa; /* Light gray background */
  border-radius: 0 0 8px 8px;
}


/*---------------------------
Team Modal Title Styles 
-----------------------------*/
/* Team Member Image in Modal */
.modal-profile-img {
  width: 120px;
  height: 120px;
  object-fit: cover;
  border: 4px solid #fff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  position: absolute;
  top: -60px; /* Position above the modal header */
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000; /* Ensure it's above other elements */
}

/* Modal Header Adjustments */
/* Center the modal title */
.modal-header {
  position: relative; /* Ensure the header is a positioning context */
  text-align: left; /* Center the text */
  padding-top: 30px; /* Add space for the image */ /* Original wpadding-top: 70px;  */
  padding-bottom: 20px; /* Add some bottom padding */
}

/* Style the modal title */
.modal-title {
  margin: 0; /* Remove default margin */
  font-size: 1.5rem; /* Adjust font size if needed */
  font-weight: 600; /* Make the title bold */
  width: 100%; /* Ensure the title takes full width */
}

.modal-service-title {
  margin: 0; /* Remove default margin */
  font-size: 1.7rem; /* Adjust font size if needed */
  font-weight: 600; /* Make the title bold */
  width: 100%; /* Ensure the title takes full width */
  text-align: center;  
}

/* Position the team member image */
.modal-profile-img {
  width: 190px;/* Original width: 120px;  */
  height: 190px; /* Original height: 120px;;  */
  object-fit: cover;
  border: 4px solid #fff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  position: absolute;
  top: -20px; /* Position above the header */
  left: 80%; /* Original left: 50%;  */
  transform: translateX(-50%); /* Center horizontally */
  z-index: 1000; /* Ensure it's above other elements */
}

/* Adjust the close button position */
.modal-header .btn-close {
  position: absolute;
  top: 20px; /* Position from the top */
  right: 20px; /* Position from the right */
  z-index: 1001; /* Ensure it's above the image */
}

@media (max-width: 768px) {
  .modal-profile-img {
  width: 120px;/* Original width: 120px;  */
  height: 120px; /* Original height: 120px;;  */
  object-fit: cover;
  border: 4px solid #fff;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  position: absolute;
  top: -10px; /* Position above the header */
  left: 50%; /* Original left: 50%;  */
  transform: translateX(-50%); /* Center horizontally */
  z-index: 1000; /* Ensure it's above other elements */
}
    .modal-header {
  position: relative; /* Ensure the header is a positioning context */
  text-align: center; /* Center the text */
  padding-top: 30px; /* Add space for the image */ /* Original wpadding-top: 70px;  */
  padding-bottom: 60px; /* Add some bottom padding */
  /*top: 40px;  Position from the top */
}
    .modal {
    --bs-modal-padding: 1rem;
    --bs-modal-margin: 0.5rem;
    --bs-modal-width: 90%;            
}
    .modal-title {
  display: none;  
}
}
/*---------------------------
Contact Section Styles 
-----------------------------*/
#contact .card {
  border: none;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  min-height: 400px; /* Minimum height for all cards */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
#contact textarea {
  resize: none; /* Disable manual resizing */
}

#contact .card:hover {
  transform: translateY(-10px);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

#contact .card-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

#contact .list-unstyled li {
  font-size: 1rem;
  color: #666;
}

#contact .list-unstyled i {
  width: 20px; /* Ensure icons align properly */
}

#contact form label {
  font-weight: 500;
  color: #1e295d; /* Dark blue for labels */
}

#contact form .form-control {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 10px;
  font-size: 0.9rem;
}

#contact form .form-control:focus {
  border-color: #7e1416; /* Primary color on focus */
  box-shadow: 0 0 5px rgba(126, 20, 22, 0.3);
}

#contact form button {
  background-color: #7e1416; /* Primary color */
  border: none;
  padding: 10px 20px;
  font-size: 1rem;
  transition: background-color 0.3s ease;
}

#contact form button:hover {
  background-color: #6a1012; /* Darker shade on hover */
}

/* Mobile responsiveness */
@media (max-width: 768px) {
  #contact .card {
    min-height: auto;
    margin-bottom: 20px;
  }
  #contact .calendly-inline-widget {
    min-height: 400px !important;
  }
}

/* Form textarea fix */
#contact textarea {
  resize: none;
  flex-grow: 1;
}


/*-------------------------
Equip Modals 
---------------------------*/
/* Equip Modal Styles */
#equip .modal-content {
  border: none;
  border-radius: 10px;
  overflow: hidden;
}

#equip .modal-header {
  background-color: #1e295d;
  color: white;
  border-bottom: none;
  padding: 1.5rem;
}

#equip .modal-title {
  font-weight: 600;
  font-size: 1.5rem;
}

#equip .modal-body {
  padding: 2rem;
}

#equip .modal-body img {
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease;
}

#equip .modal-body img:hover {
  transform: scale(1.02);
}

#equip .modal-body .fa-ul {
  margin-left: 1.5rem;
}

#equip .modal-body .fa-li {
  left: -1.5rem;
  width: 1em;
}

#equip .modal-footer {
  border-top: none;
  background-color: #f8f9fa;
  padding: 1rem 2rem;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  #equip .modal-body .row {
    flex-direction: column;
  }
  
  #equip .modal-body img {
    margin-bottom: 1.5rem;
  }
}




/*------------------------------
Reviews Section Styles 
--------------------------------*/
.star-rating {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
}

.star-rating input {
  display: none;
}

.star-rating label {
  color: #ddd;
  font-size: 1.5rem;
  padding: 0 0.2rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.star-rating input:not(:checked) ~ label:hover,
.star-rating input:not(:checked) ~ label:hover ~ label {
  color: #ffc107;
}

.star-rating input:checked ~ label {
  color: #ffc107;
}

/* Form Validation Styles */
.was-validated .form-control:invalid,
.was-validated .form-select:invalid,
.was-validated .form-check-input:invalid {
  border-color: #dc3545;
}

.was-validated .form-control:valid,
.was-validated .form-select:valid,
.was-validated .form-check-input:valid {
  border-color: #198754;
}

/* Card Styles */
#reviews .card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  border-radius: 10px;
}

#reviews .card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1) !important;
}

/* Responsive Adjustments */
@media (max-width: 767.98px) {
  #reviews .card {
    margin-bottom: 1.5rem;
  }
}

/* Add this to your stylesheet */
#reviews .card-body {
  display: flex;
  flex-direction: column;
  height: 100%;
}

#reviews form {
  display: flex;
  flex-direction: column;
  height: 100%;
}

#reviews .form-content {
  flex: 1; /* This makes the form content take up all available space */
}

#reviews .submit-btn-container {
  margin-top: auto; /* Pushes the button to the bottom */
  padding-top: 1rem;
}

/* Ensure both cards have equal height */
#reviews .card {
  height: 100%;
}

/* Make the forms fill the card body */
#reviews .card-body {
  padding-bottom: 1.5rem; /* Add some padding at the bottom */
}

/* Optional: Make the buttons the same height */
#reviews .btn {
  padding: 0.5rem 1rem;
  font-size: 1rem;
}

/* Fine-tuning if needed */
#reviews .submit-btn-container {
  border-top: 1px solid rgba(0, 0, 0, 0.05); /* Optional subtle divider */
  padding-top: 1.5rem;
  margin-top: 1.5rem;
}


/*------------------------------
Arts Section Styles 
--------------------------------*/
#arts {
  min-height: 600px;
  display: flex;
  align-items: center;
  overflow: hidden;
}

.arts-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('../images/bg/arts-section.jpg');
  background-size: cover;
  background-position: center;
  z-index: -1;
  opacity: 0.15;
}

.arts-card-frame {
  position: relative;
  background: linear-gradient(135deg, rgba(30,41,93,0.9) 0%, rgba(126,20,22,0.8) 100%);
  border-radius: 15px;
  padding: 40px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  margin-top: 80px;
  margin-bottom: 80px;
}

.arts-image-box {
  position: absolute;
  top: -50px;
  right: -30px;
  width: 350px;
  height: 350px;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  border: 5px solid white;
  /*transform: rotate(5deg);*/
  transition: all 0.3s ease;
}

.arts-image-box:hover {
  /*transform: rotate(0deg) scale(1.02);*/
    transform: rotate(5deg);
}

.arts-image-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.arts-text-container {
  max-width: 60%;
  padding: 30px;
  background-color: rgba(255, 255, 255, 0.95);
  border-radius: 10px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.arts-title {
  color: #1e295d;
  font-weight: 700;
  margin-bottom: 20px;
  position: relative;
}

.arts-title::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 0;
  width: 60px;
  height: 3px;
  background-color: #7e1416;
}

.arts-text {
  color: #333;
  font-size: 1.1rem;
  line-height: 1.7;
}

/* Responsive Adjustments */
@media (max-width: 992px) {
  .arts-card-frame {
    margin-top: 60px;
    margin-bottom: 60px;
  }
  
  .arts-image-box {
    width: 300px;
    height: 300px;
    right: -20px;
  }
  
  .arts-text-container {
    max-width: 70%;
  }
}

@media (max-width: 768px) {
  #arts {
    min-height: auto;
    padding: 60px 0;
  }
  
  .arts-card-frame {
    padding: 30px;
    margin-top: 100px;
  }
  
  .arts-image-box {
    position: relative;
    top: -80px;
    right: auto;
    left: 50%;
    transform: translateX(-50%) rotate(5deg);
    width: 280px;
    height: 280px;
  }
  
  .arts-image-box:hover {
    transform: translateX(-50%) rotate(0deg) scale(1.02);
  }
  
  .arts-text-container {
    max-width: 100%;
    margin-top: -40px;
  }
}

@media (max-width: 576px) {
  .arts-card-frame {
    padding: 20px;
  }
  
  .arts-image-box {
    width: 240px;
    height: 240px;
  }
  
  .arts-title {
    font-size: 1.5rem;
  }
  
  .arts-text {
    font-size: 1rem;
  }
}

/* Animated Messages */
.arts-messages-wrapper {
  position: relative;
  min-height: 200px;
  overflow: hidden;
}

.arts-message {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.8s ease;
  pointer-events: none;
}

.arts-message.active {
  position: relative;
  opacity: 1;
  transform: translateY(0);
  pointer-events: all;
}

.arts-message-dots {
  display: flex;
  justify-content: center;
  margin-top: 25px;
  gap: 10px;
}

.arts-message-dots .dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: rgba(30, 41, 93, 0.3);
  cursor: pointer;
  transition: all 0.3s ease;
}

.arts-message-dots .dot.active {
  background-color: #1e295d;
  transform: scale(1.2);
}

.arts-message-dots .dot:hover:not(.active) {
  background-color: rgba(30, 41, 93, 0.6);
}


/*-------------------
Arts Carousel 
---------------------*/
/* ===== Carousel Structure ===== */
.arts-carousel {
  position: relative;
  min-height: 600px;
}

.arts-card-frame {
  position: absolute !important; /* Override any relative positioning */
  top: 80px !important; /* Match your margin-top */
  left: 0;
  width: 100%;
  margin: 0 !important; /* Remove vertical margins */
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), 
              opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.arts-card-frame.active {
  position: relative;
  opacity: 1;
  transform: scale(1);
  z-index: 2;
}

/* ===== Message Rotator ===== */
.arts-messages-wrapper {
  position: relative;
  min-height: 180px;
}

.arts-message {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  opacity: 0;
  transform: translateY(15px);
  transition: all 0.5s ease;
}

.arts-message.active {
  opacity: 1;
  transform: translateY(0);
}

/* ===== Arts Carousel ===== */
/* Arts Carousel Arrows */
.arts-carousel-prev, 
.arts-carousel-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: white;
  border: none;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
  z-index: 10;
  color: #1e295d;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.arts-carousel-prev:hover, 
.arts-carousel-next:hover {
  background: #1e295d;
  color: white;
}

.arts-carousel-prev { left: -25px; }
.arts-carousel-next { right: -25px; }

/* Dots - Two Levels */
.arts-message-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin: 15px 0;
}

.arts-carousel-dots {
  position: absolute;
  bottom: -40px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 12px;
  z-index: 5;
}

.arts-message-dots .dot,
.arts-carousel-dots .dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: rgba(30, 41, 93, 0.2);
  cursor: pointer;
  transition: all 0.3s ease;
}

.arts-message-dots .dot.active,
.arts-carousel-dots .dot.active {
  background: #1e295d;
  transform: scale(1.3);
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .arts-carousel-prev { left: -15px; }
  .arts-carousel-next { right: -15px; }
  
  .arts-messages-wrapper {
    min-height: 220px;
  }
}


/*-----------------------------
Arts Mobile Carousel Swipe Gestures
-------------------------------*/
.arts-carousel {
  touch-action: pan-y; /* Enable vertical scroll while preventing horizontal */
}

.arts-card-frame {
  user-select: none; /* Prevent text selection during swipe */
}

/* Make touch targets larger on mobile */
@media (max-width: 768px) {
  .arts-carousel-prev,
  .arts-carousel-next {
    width: 60px;
    height: 60px;
  }
  
  .arts-message-dots .dot,
  .arts-carousel-dots .dot {
    width: 14px;
    height: 14px;
  }
}

/* Add transition for smooth swipe effect */
.arts-card-frame {
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1), 
              opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
              left 0.3s ease; /* For swipe animation */
}

/* Swipe animation class */
.arts-card-frame.swiping {
  transition: left 0.1s ease;
  position: relative;
}


/*-------------------------------------
Enhanced Service Card Animations 
--------------------------------------*/
#services .card {
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.1);
  transform: translateY(0) scale(1);
  border: none;
  overflow: hidden;
  position: relative;
  box-shadow: 0 6px 15px rgba(0, 0, 0, 0.08);
}

#services .card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

#services .card:hover i {
  transform: scale(1.1);
  color: var(--primary-color);
}

/* Icon animation */
#services .card i {
  font-size: 1.75rem; /* Smaller icon */
  margin-bottom: 0.75rem;
  color: var(--primary-color);
  transition: transform 0.3s ease;
}


/* Gradient overlay effect */
#services .card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to bottom, rgba(126, 20, 22, 0) 0%, rgba(126, 20, 22, 0.03) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

#services .card:hover::after {
  opacity: 1;
}

/* Button enhancement */
#services .modal .btn-secondary {
  background-color: #7e1416;
  border: none;
  transition: all 0.3s ease;
}

#services .modal .btn-secondary:hover {
  background-color: #5a0e10;
  transform: translateY(-2px);
}


/* Enhanced Border Highlight Effect */
#services .card {
  position: relative;
  border: 2px solid transparent; /* Transparent border by default */
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.1);
}

#services .card::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  border: 2px solid transparent;
  border-radius: inherit; /* Match card's border-radius */
  transition: all 0.3s ease;
  z-index: 1;
  pointer-events: none; /* Allows clicks through the pseudo-element */
}

#services .card:hover::before {
  border-color: #7e1416; /* Your primary color */
  animation: borderPulse 1.5s infinite;
}

/* Border pulse animation */
@keyframes borderPulse {
  0% { border-width: 5px; opacity: 1; }
  50% { border-width: 7px; opacity: 0.7; }
  100% { border-width: 5px; opacity: 1; }
}

/*----------------------------------
Add perspective to cards 
------------------------------------*/
#services .card {
  transform-style: preserve-3d;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

#services .card:hover {
  transform: translateY(-10px) rotateX(5deg);
  box-shadow: 0 20px 30px rgba(0,0,0,0.15);
}

/* Remove paragraph and adjust button 
#services .card-text {*/
  /*display: none;  Remove description 
}*/



#services .btn-sm {
  padding: 0.25rem 0.5rem;
  font-size: 0.8rem;
  margin-top: auto; /* Push to bottom */
}

/*---------------------------------------------------
Accessibility Improvements Ensure proper contrast 
-----------------------------------------------------*/
/* ARIA attributes */
[aria-current="page"] {
  font-weight: bold;
  color: var(--primary-color);
}


/* ===== Scroll Trigger Animations ===== */
/* Add this section after your existing animations */

[data-animate] {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s ease-out;
}

[data-animate].animate {
  opacity: 1;
  transform: translateY(0);
}

/* Delay classes for staggered animations */
.animate-delay-1 { transition-delay: 0.1s; }
.animate-delay-2 { transition-delay: 0.2s; }
.animate-delay-3 { transition-delay: 0.3s; }


/* ===== Fluid Motion Styles ===== */
/* Add these to support the motion effects */

#services .card,
#equip .card {
  transform-style: preserve-3d;
  transition: transform 0.5s ease, box-shadow 0.3s ease;
  will-change: transform;
}


#services .card::before {
  /* Keep your existing properties but adjust opacity */
  background: linear-gradient(
    to bottom right,
    rgba(126, 20, 22, 0.85) 0%,
    rgba(30, 41, 93, 0.9) 100%
  );
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 1;
}

/* Update hover states to transform colors */
#services .card:hover .card-body {
  position: relative;
  z-index: 2; /* Ensure content stays above overlay */
}

#services .card:hover .card-title,
#services .card:hover .card-text,
#services .card:hover .btn-outline-light {
  color: white !important;
  transition: color 0.3s ease 0.1s; /* Slight delay for smoother effect */
}

#services .card:hover i {
  color: white !important;
  transform: scale(1.2);
}

/* Adjust the button hover state */
#services .card:hover .btn-outline-light {
  border-color: white;
  background-color: transparent;
}



/*-------------------------------------------------------
Hero Section Left align and take up 60% view width 
--------------------------------------------------------*/
.landing-section {
  min-height: 90vh;
  display: flex;
  align-items: center;
  position: relative;
}

.container-xxl {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 2rem;
}

.hero-grid {
  display: grid;
  grid-template-columns: 60% 30%;
  gap: 10%;
  align-items: center;
  position: relative;
  z-index: 2;
}

.hero-text {
  max-width: 800px;
  padding-right: 2rem;
}

.hero-text h1 {
  font-size: calc(1rem + 3.7vw); /*3.5rem*/
  line-height: 1.2;
  margin-bottom: 1.5rem;
  color: white;
  font-weight: 700;
}

.hero-text .lead {
  font-size: 1.25rem;
  color: rgba(255,255,255,0.9);
  margin-bottom: 2rem;
  max-width: 600px;
}

.hero-cta {
  display: flex;
  gap: 1rem;
  margin-top: 2rem;
}

.hero-image {
  position: relative;
  width: 100%; /* Takes full width of its 30% grid column */
  height: 0;
  padding-bottom: 70%; /* Base aspect ratio */
  margin-right: -15%; /* Bleed into the gap space */
  margin-left: -10%; /* Bleed into the text area */
}

.hero-image img {
  position: absolute;
  width: auto; /* Let the image determine its width */
  height: 120%; /* Extend beyond container */
  max-width: none; /* Override any max-width constraints */
  left: 90%;
  transform: translateX(-50%);
  object-fit: contain; /* Prevent forced cropping */
}

/* Optional: Add a subtle floating effect */
@keyframes float {
  0% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(-20px); }
  100% { transform: translateX(-50%) translateY(0); }
}
.hero-image img {
  animation: float 6s ease-in-out infinite;
}

@media (max-width: 1200px) {
  .hero-image {
    margin-right: -10%;
    margin-left: -5%;
  }
}

@media (max-width: 992px) {
  .hero-image {
    margin: 0 -5%; /* Balanced bleed on mobile */
    padding-bottom: 100%;
  }
  .hero-image img {
    height: 110%;
  }
}

/* Mobile Devices (hide image) */
@media (max-width: 992px) {
  .hero-image {
    display: none !important; /* Force hide on mobile */
  }
  
  .hero-grid {
    grid-template-columns: 1fr; /* Single column layout */
    gap: 0; /* Remove gap */
  }
  
  .hero-text {
    padding-right: 0; /* Remove right padding */
    text-align: center; /* Center align text */
    margin: 0 auto; /* Center block */
  }
  
  .hero-cta {
    justify-content: center; /* Center buttons */
  }
}

/* Optional: Show a different mobile-specific image */
@media (max-width: 992px) {
  .mobile-hero-image {
    display: block;
    width: 80%;
    margin: 2rem auto;
  }
}


/*----------------------------
About Section Styles 
------------------------------*/
#about {
  background-color: #f8f9fa;
  position: relative;
  overflow: hidden;
}

.video-container {
  position: relative;
  border-radius: 0.5rem;
  transform: perspective(1000px) rotateY(0deg) rotateX(0deg);
  transition: transform 0.5s ease, box-shadow 0.3s ease;
  will-change: transform;
  border: 5px solid white;
  box-shadow: 0 20px 25px -5px rgba(0,0,0,0.1), 
              0 10px 10px -5px rgba(0,0,0,0.04);
}

.video-container:hover {
  transform: perspective(1000px) rotateY(-3deg) rotateX(2deg) scale(1.02);
  box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
}

.about-features {
  border-left: 3px solid var(--primary-color);
  padding-left: 1.5rem;
}

.feature-item {
  font-size: 1.05rem;
  transition: transform 0.3s ease;
}

.feature-item:hover {
  transform: translateX(5px);
}

/* Responsive Adjustments */
@media (max-width: 992px) {
  #about .row {
    flex-direction: column-reverse;
  }
  
  .video-container {
    margin-bottom: 2rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* YouTube Embed Fixes */
.ratio iframe {
  border-radius: 0.3rem;
}


/* About Section Text Controls */
#about h2 {
  font-size: calc(1.325rem + .9vw); /* Responsive between 1.325rem and 9vw */
  line-height: 1;
  font-weight: 600;
  /*margin-bottom: 1.5rem;*/
}

.about-features span {
  font-size: clamp(0.95rem, 1.25vw, 1.1rem);
  display: inline-block;
}

.feature-item i {
  font-size: clamp(1rem, 1.5vw, 1.2rem);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  #about h2 {
    font-size: clamp(1.5rem, 6vw, 1.75rem);
  }
  
  #about .lead {
    font-size: clamp(1rem, 3vw, 1.1rem);
  }
  
  .about-features span {
    font-size: clamp(0.9rem, 2.5vw, 1rem);
  }
}



/*-------------------------------------
Cookie Consent Banner 
---------------------------------------*/
/* Cookie Consent Banner - Fixed Display */
#cookie-consent {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(30, 41, 93, 0.95);
  color: white;
  padding: 15px 0;
  z-index: 9999;
  box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
  backdrop-filter: blur(10px);
  /* Removed display:none - we'll control visibility via JS */
  display: none;
  transform: translateY(100%);
  transition: transform 0.3s ease;
}

#cookie-consent.show {
  display: block;
  transform: translateY(0);
}

.cookie-policy-link, 
.privacy-policy-link {
  color: #ffcc00;
  text-decoration: underline;
  transition: color 0.2s;
}

.cookie-policy-link:hover,
.privacy-policy-link:hover {
  color: white;
  text-decoration: none;
}


.cookie-settings-modal .modal-content {
  padding: 20px;
}

.cookie-category {
  margin-bottom: 20px;
  padding-bottom: 15px;
  border-bottom: 1px solid #eee;
}

.cookie-category:last-child {
  border-bottom: none;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .cookie-consent-banner .btn {
    display: block;
    width: 100%;
    margin-bottom: 10px;
  }
  
  .cookie-settings-modal {
    padding: 15px;
  }
}


/* Cookie Modal CSS */
.cookie-settings-modal {
  display: none;
  position: fixed;
  bottom: -100%;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  max-width: 600px;
  background: white;
  border-radius: 10px 10px 0 0;
  box-shadow: 0 -5px 25px rgba(0,0,0,0.2);
  z-index: 10000;
  transition: bottom 0.3s ease;
  padding: 20px;
}

.cookie-settings-modal.active {
  bottom: 20px;
    display: block;
}

/* Dark overlay */
.cookie-settings-modal::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.0.5);
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.cookie-settings-modal.active::before {
  opacity: 1;
  pointer-events: all;
}

/* Fix checkbox interaction */
.cookie-settings-modal .form-check-input {
  pointer-events: auto !important;
  opacity: 1 !important;
}

/* Ensure modal content is clickable */
.modal-content {
  pointer-events: auto;
}

/* Fix overlay behavior */
.cookie-settings-modal::before {
  pointer-events: auto;
  z-index: -1; /* Place behind modal content */
}



/*----------------------------------
Our Story Modal
------------------------------------*/
#ourStoryModal .modal-dialog {
  max-width: 90%; /* Adjust as needed */
}

/* Custom modal media styles */
#ourStoryModal .modal-body img {
  border: 1px solid #dee2e6; /* Soft border for images */
}

#ourStoryModal .modal-body .ratio {
  background-color: #f8f9fa; /* Light gray bg for video placeholder */
}

#ourStoryModal .text-primary {
  color: #1e295d !important; /* Match your dark blue theme */
}

/* Image caption overlay styles */
.image-caption-wrapper {
  display: inline-block; /* Ensures proper sizing */
}

.image-caption {
  background: rgba(0, 0, 0, 0.5); /* Semi-transparent dark overlay */
  color: white;
  transition: opacity 0.3s;
}

.image-caption span {
  font-size: 1.5rem;
}

/* Optional: Fade-in effect on hover */
.image-caption-wrapper:hover .image-caption {
  opacity: 0.9;
}



/*----------------------
Enhanced Service Modal Styles 
------------------------*/
/* Hero Image at Top */
.modal-hero-img {
  width: 100%;
  max-height: 20px;
  object-fit: cover;
  border-radius: 8px 8px 0 0;
  margin-bottom: 1.5rem;
}

/* Inline Content Images */
.modal-body .content-img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
  margin: 1rem 0;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

/* Image Grid for Galleries */
.modal-img-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin: 1.5rem 0;
}

/* Caption Styling (from previous example) */
.image-caption-wrapper {
  position: relative;
}
.image-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0,0,0,0.6);
  color: white;
  padding: 8px;
  text-align: center;
}



/* ======================
   RESOURCES SECTION STYLES
   ====================== */

/* Section Base */
#resources {
  background-color: #f8f9fa; /* Light gray background */
}

#resources .card {
  border: none;
  border-radius: 10px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

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

/* Headers */
#resources h2.text-primary {
  color: #1e295d !important; /* Your dark blue */
  font-weight: 600;
}

#resources h3 {
  color: #1e295d;
  font-weight: 500;
  font-size: 1.5rem;
}

/* PDF Cards */
#resources .card-body.text-center {
  padding: 2rem 1rem;
}

#resources .fa-file-pdf {
  opacity: 0.8;
}

#resources .btn-outline-primary {
  border-color: #1e295d;
  color: #1e295d;
}

#resources .btn-outline-primary:hover {
  background-color: #1e295d;
  color: white;
}

/* LinkedIn/Blog Cards */
#resources .card-header.bg-primary {
  background-color: #1e295d !important;
  border-radius: 10px 10px 0 0 !important;
}

#resources .linkedin-embed {
  border: 1px solid #dee2e6;
  padding: 10px;
  border-radius: 8px;
}

#resources .list-group-item {
  border-left: 0;
  border-right: 0;
}

#resources .list-group-item:first-child {
  border-top: 0;
}

/* Survey Cards */
#resources .btn-outline-info {
  border-color: #17a2b8;
  color: #17a2b8;
}

#resources .btn-outline-info:hover {
  background-color: #17a2b8;
}

#resources .btn-outline-success {
  border-color: #28a745;
  color: #28a745;
}

#resources .btn-outline-success:hover {
  background-color: #28a745;
}

/* Bookshelf */
#resources .img-fluid.rounded.shadow {
  transition: transform 0.3s ease;
}

#resources .img-fluid.rounded.shadow:hover {
  transform: scale(1.05);
}

/* Promotional Banner */
#resources .bg-gradient-primary {
  background: linear-gradient(135deg, #1e295d 0%, #3a4a8a 100%);
  border-radius: 10px;
}

#resources .btn-light {
  background-color: white;
  color: #1e295d;
}

/* CTA Section */
#resources .card.border-primary {
  border-color: #1e295d !important;
}

#resources .btn-primary {
  background-color: #1e295d;
  border-color: #1e295d;
}

#resources .btn-primary:hover {
  background-color: #16214b;
}

/* Survey Modal */
#surveyModal .modal-header {
  background-color: #1e295d;
  border-radius: 10px 10px 0 0;
}

#surveyModal iframe {
  min-height: 500px;
  border: none;
  border-radius: 0 0 10px 10px;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  #resources .card-body {
    padding: 1.5rem;
  }
  
  #resources .modal-img-grid {
    grid-template-columns: 1fr;
  }
}

/* Animation for Interactive Elements */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#resources .card {
  animation: fadeInUp 0.6s ease forwards;
}

#resources .col-md-4:nth-child(2) .card,
#resources .col-lg-6:nth-child(2) .card {
  animation-delay: 0.2s;
}

#resources .col-md-4:nth-child(3) .card {
  animation-delay: 0.4s;
}


/* =============================================
   ENHANCED RESOURCES MODAL - WITH HOVER EFFECTS
   =============================================*/
#resourcesModal .modal-content {
  border: none;
  box-shadow: 0 5px 30px rgba(30, 41, 93, 0.2);
  overflow: hidden;
}

/* Card Hover Effects */
#resourcesModal .resource-card {
  position: relative;
  background: white;
  border: none;
  border-radius: 10px;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: 0 3px 10px rgba(0,0,0,0.08);
  overflow: hidden;
  z-index: 1;
}

#resourcesModal .resource-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, 
              rgba(30, 41, 93, 0.03) 0%, 
              rgba(126, 20, 22, 0.03) 100%);
  z-index: -1;
  opacity: 0;
  transition: opacity 0.3s ease;
}

#resourcesModal .resource-card:hover {
  transform: translateY(-7px) scale(1.02);
  box-shadow: 0 15px 25px rgba(30, 41, 93, 0.15);
}

#resourcesModal .resource-card:hover::before {
  opacity: 1;
}

/* PDF Card Specific */
#resourcesModal .pdf-card:hover .card-icon {
  animation: bounce 0.8s ease;
  color: #e63946;
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

/* Survey Card Specific */
#resourcesModal .survey-card:hover {
  border-left: 4px solid #457b9d;
}

/* Promo Banner Hover */
#resourcesModal .promo-banner:hover {
  transform: scale(1.01);
  box-shadow: 0 10px 25px rgba(30, 41, 93, 0.15);
}

/* Podcast Play Button */
#resourcesModal .podcast-play-btn {
  transition: all 0.3s ease;
  transform: scale(0.95);
}

#resourcesModal .media-cover:hover + .podcast-play-btn,
#resourcesModal .podcast-play-btn:hover {
  transform: scale(1.1) translate(-50%, -50%);
  box-shadow: 0 0 0 8px rgba(30, 41, 93, 0.2);
}

/* Button Hover Effects */
#resourcesModal .btn-download {
  position: relative;
  overflow: hidden;
  z-index: 1;
}

#resourcesModal .btn-download::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background-color: #e63946;
  transition: width 0.3s ease;
  z-index: -1;
}

#resourcesModal .btn-download:hover {
  color: white;
  border-color: #e63946;
}

#resourcesModal .btn-download:hover::after {
  width: 100%;
}

/* LinkedIn Preview Hover */
#resourcesModal .linkedin-preview {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  transform-origin: center;
}

#resourcesModal .linkedin-preview:hover {
  transform: scale(1.03) perspective(1000px) rotateX(2deg);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

/* Section Header Underline Animation */
#resourcesModal .section-header {
  display: inline-block;
  position: relative;
}

#resourcesModal .section-header::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 0;
  height: 3px;
  background: #1e295d !important;
  transition: width 0.4s ease;
}

#resourcesModal .section-header:hover::after {
  width: 100%;
}

/* Enhanced Transitions */
#resourcesModal * {
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.1);
}

/*.card-header {
    background-color: #1e295d !important;*/


 /*--------------------------
Ensure the Navbar doesnt break 
-----------------------------*/
@media (max-width: 576px) {
 /* 2. Make logo slightly smaller on mobile */
  .navbar-brand img {
    height: 50px;
    transition: height 0.3s ease;
  }
  
  /* 3. Prevent navbar items from breaking */
  .navbar-collapse {
    padding: 15px;
    margin-top: 10px;
    border-radius: 5px;
  }
} 



/* ---------------------------
BTN Mobile Adjustments 
------------------------------*/ 
@media (max-width: 576px) {
  .hero-cta, .gap-3  {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem; /* reduced space between buttons */  
  }

  .btn-primary, .btn-outline, .btn-special, .btn-outline-primary {
    width: 100%; /* make each button fill the width */
  }
    
  .btn-primary, .btn-outline, .btn-special, .btn-outline-primary {
    font-size: 14px;      /* smaller text */
    padding: 8px 16px !important; /* smaller padding */
  }  
}


/*---------------------------
Linkedin iframe Styles
-----------------------------*/
.iframe-container {
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 aspect ratio */
  overflow: hidden;
}

.iframe-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}






/*---------------------------------
Social Icons Styling 
-----------------------------------*/
.hero-social {
  border-top: 1px solid rgba(255,255,255,0.2);
}

.social-icons {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.social-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  transition: all 0.3s ease;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
}

.social-icon:hover {
  transform: translateY(-3px);
  background: rgba(255,255,255,0.2);
}

/* Platform-specific colors on hover */
.social-icon.linkedin:hover { background: #0a66c2; }
.social-icon.facebook:hover { background: #1877f2; }
.social-icon.twitter:hover { background: #1da1f2; }
.social-icon.instagram:hover { 
  background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
}
.social-icon.youtube:hover { background: #ff0000; }

/* Combo Button Styles */
.btn-group {
  box-shadow: 0 4px 6px rgba(0,0,0,0.1);
  border-radius: 50px !important; /* Rounded pill shape */
  overflow: hidden;
}

.btn-group .btn {
  border-radius: 0;
  padding: 0.75rem 1.5rem;
  transition: all 0.3s ease;
}

.btn-group .btn:first-child {
  border-top-left-radius: 50px !important;
  border-bottom-left-radius: 50px !important;
}

.btn-group .btn:last-child {
  border-top-right-radius: 50px !important;
  border-bottom-right-radius: 50px !important;
}

.btn-group .btn:hover {
  transform: none; /* Disable individual button lift */
  filter: brightness(1.1);
}

.btn-group:hover {
  box-shadow: 0 6px 12px rgba(0,0,0,0.15);
  transform: translateY(-2px);
}