:root {
  --brand-blue: #1e40af;
  --brand-light: #3b82f6;
  --brand-yellow: #f59e0b;
  --brand-red: #dc2626;
  --brand-dark: #0f172a;
  --bg-soft: #f8fafc;
  --text-muted: #64748b;
  --text-primary: #1e293b;
  --gradient-primary: linear-gradient(135deg, #1e40af 0%, #3b82f6 50%, #60a5fa 100%);
  --gradient-secondary: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
  --gradient-accent: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
  --gradient-hero: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.12);
  --shadow-xl: 0 24px 64px rgba(0, 0, 0, 0.16);
  --shadow-glow: 0 0 30px rgba(59, 130, 246, 0.25);
  --shadow-glow-red: 0 0 30px rgba(220, 38, 38, 0.25);
  --shadow-glow-yellow: 0 0 30px rgba(245, 158, 11, 0.25);
  --border-subtle: rgba(59, 130, 246, 0.08);
  --border-hover: rgba(59, 130, 246, 0.2);
}
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
body {
  direction: rtl;
  font-family: 'Tajawal', sans-serif;
  min-height: 100vh;
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
  color: var(--text-primary);
  line-height: 1.7;
  font-size: 16px;
}
html,body {
  overflow-x: hidden !important;
}
img {
  max-width: 100%;
  display: block;
}
header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: transparent;
  backdrop-filter: none;
  box-shadow: none;
  border-bottom: none;
  transition: all 0.3s ease;
  padding: 20px 0;
}
header.scrolled {
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(16px);
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.06);
  border-bottom: 1px solid rgba(226, 232, 240, 0.6);
  padding: 5px 0;
}
.navbar {
  padding: 1rem 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: all 0.3s ease;
}
.navbar-brand {
  gap: .75rem;
}
.navbar-brand h1,.navbar-brand p {
  margin: 0;
  transition: all 0.3s ease;
}
.navbar-brand:hover h1 {
  color: var(--brand-blue);
}
.navbar-links {
  display: flex;
  justify-content: center;
  list-style: none;
  gap: 10px;
  margin: 0;
  padding: 0;
}
.nav-items {
  display: block;
}
/* Hide nav-items by default on mobile - will be shown via .show class */
@media (max-width: 990px) {
  .nav-items {
    display: none;
  }
  .nav-items.show {
    display: block;
  }
}
/* Burger button visibility */
@media (min-width: 991px) {
  .navbar-toggler {
    display: none;
  }
}
@media (max-width: 990px) {
  .navbar-toggler {
    display: flex !important;
  }
}
/* Contact button visibility */
@media (min-width: 991px) {
  .navbar-contact-btn {
    display: inline-block;
  }
}
@media (max-width: 990px) {
  .navbar-contact-btn {
    display: none;
  }
}
/* Desktop navbar styles */
@media (min-width: 991px) {
  .nav-items {
    display: block !important;
    position: static;
    transform: none;
    opacity: 1;
    pointer-events: auto;
    background: transparent;
    padding: 0;
    box-shadow: none;
  }
  .navbar-links {
    flex-direction: row;
  }
  .nav-item {
    width: auto;
  }
  .nav-link {
    padding: 0.5rem 0;
  }
}
/* Mobile navbar styles */
@media (max-width: 990px) {
  .nav-items.show {
    position: fixed;
    top: 70px;
    left: 0;
    right: 0;
    background: white;
    padding: 2rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    transform: translateY(0);
    opacity: 1;
    transition: all 0.3s ease;
    pointer-events: auto;
  }
}
.nav-item .nav-link {
  text-decoration: none !important;
}

/* Dropdown hover styles */
.nav-item.dropdown {
  position: relative;
}

.nav-item.dropdown .dropdown-toggle {
  position: relative;
}

.nav-item.dropdown .dropdown-toggle::after {
  content: '\f107';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  margin-right: 0.5rem;
  transition: transform 0.3s ease;
  font-size: 0.8rem;
}

.nav-item.dropdown:hover .dropdown-toggle::after {
  transform: rotate(180deg);
}

.nav-item.dropdown .dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 15px);
  right: 0;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.95));
  min-width: 220px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(59, 130, 246, 0.08);
  border-radius: 16px;
  padding: 0.75rem 0;
  z-index: 1000;
  backdrop-filter: blur(20px);
  animation: dropdownFadeIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.dropdown-menu {
  list-style: none;
}
@keyframes dropdownFadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.nav-item.dropdown:hover .dropdown-menu {
  display: block;
}

.nav-item.dropdown .dropdown-item {
  padding: 0.875rem 1.75rem;
  color: var(--text-primary);
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  font-weight: 500;
  font-size: 0.95rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  position: relative;
  overflow: hidden;
}
.nav-item.dropdown .dropdown-item::before {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  width: 4px;
  height: 100%;
  background: var(--brand-blue);
  transform: scaleY(0);
  transition: transform 0.3s ease;
}
.nav-item.dropdown .dropdown-item:hover {
  background: linear-gradient(135deg, var(--brand-blue), var(--brand-light));
  color: white;
  transform: translateX(-8px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
}
.nav-item.dropdown .dropdown-item:hover::before {
  transform: scaleY(1);
}
/* Mobile and tablet dropdown styles */
@media (max-width: 990px) {
  .nav-item.dropdown .dropdown-menu {
    position: static;
    display: block;
    box-shadow: none;
    background: transparent;
    border: none;
    padding: 0;
    margin-top: 0;
    animation: none;
    backdrop-filter: none;
  }

  .nav-item.dropdown .dropdown-toggle::after {
    display: none;
  }

  .nav-item.dropdown .dropdown-item {
    padding: 0.5rem 1rem;
    background: transparent;
    margin-bottom: 0;
    border-radius: 8px;
    color: #475569;
    font-weight: 600;
    display: block;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  }

  .nav-item.dropdown .dropdown-item::before {
    display: none;
  }

  .nav-item.dropdown .dropdown-item:hover {
    background: var(--brand-blue);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(30, 64, 175, 0.3);
  }
}
.navbar-nav .nav-link {
  color: #475569;
  font-weight: 600;
  padding: 0.5rem 1rem;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 8px;
  position: relative;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
}
.navbar-nav .nav-link.active,
.navbar-nav .nav-link:hover {
  color: #fff;
  background: var(--brand-blue);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(30, 64, 175, 0.3);
}
navbar-nav .nav-item+.nav-item {
  margin-inline-start: 1rem;
}
.navbar-toggler {
  border: none;
  padding: 10px 20px;
  background: transparent;
  cursor: pointer;
  color: #1e40af;
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 4px;
  transition: all 0.3s ease;
   display: none;
}
.navbar-toggler:hover {
  background-color: var(--brand-dark);
  color: white;
}
.navbar-toggler:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);
}
.btn-brand {
  background: var(--gradient-secondary);
  color: #fff;
  border: none;
  font-weight: 700;
  padding: 0.75rem 2rem;
  border-radius: 10px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 4px 16px rgba(220, 38, 38, 0.25);
  position: relative;
  overflow: hidden;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  text-decoration: none;
}
.btn-brand::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left 0.5s ease;
}
.btn-brand:hover::before {
  left: 100%;
}
.btn-brand:hover,.btn-brand:focus {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(220, 38, 38, 0.35);
  background: var(--gradient-secondary);
}
@media (max-width: 990px) {
  .navbar-nav {
    text-align: center;
  }
  .navbar-nav .nav-item+.nav-item {
    margin-inline-start: 0;
  }
  .navbar-collapse {
    margin-top: 1rem;
  }
}
.hero-section {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  background-image: url("/assets/images/hero.jpeg");
  background-size: cover;
  color: #0077b5 !important;
  overflow: hidden;
  padding: 8rem 0 4rem 0;
}
.hero-info{
  padding-top: 50px;
}
.hero-section .container {
  position: relative;
  z-index: 2;
}
.hero-section::before {
  content: '';
  position: absolute;
  width: 60rem;
  height: 60rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(59, 130, 246, 0.12) 0%, transparent 70%);
  top: -10rem;
  right: -15rem;
  filter: blur(80px);
  pointer-events: none;
  animation: float 12s ease-in-out infinite;
}
.hero-section .hero-content {
  animation: fadeInUp 1s ease;
}
.hero-section::after {
  content: '';
  position: absolute;
  width: 50rem;
  height: 50rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245, 158, 11, 0.1) 0%, transparent 70%);
  bottom: -15rem;
  left: -15rem;
  filter: blur(70px);
  animation: float 15s ease-in-out infinite reverse;
}
.hero-section .lead {
  max-width: 45rem;
  color: #004470;
  font-size: 1.2rem;
  line-height: 1.8;
  margin-bottom: 2.5rem;
  font-weight: 400;
}
.hero-section .btn-brand {
  background: var(--gradient-accent);
  color: var(--brand-dark);
  border: none;
  font-weight: 700;
  box-shadow: 0 6px 20px rgba(245, 158, 11, 0.35);
  padding: 0.9rem 2.25rem;
  font-size: 1rem;
}
.hero-btns {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    padding-top: 40px;
}
.hero-section .btn-outline-light {
  border-color: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
  padding: 1rem 1.5rem;
  font-size: 1.05rem;
  text-decoration: none;
  background-color: aliceblue;
  font-weight: bold;
  border-radius: 10px;
}
.hero-section .btn-outline-light:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.9);
  transform: translateY(-2px);
}
.section-title {
  font-size: clamp(1.8rem, 2.5vw, 2.3rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  margin-bottom: 1.25rem;
  background: linear-gradient(135deg, var(--brand-dark), var(--brand-blue));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  position: relative;
  display: inline-block;
}
.section-subtitle {
  color: var(--text-muted);
  max-width: 50rem;
  margin: 0 auto 2.5rem;
  font-size: 1.1rem;
  line-height: 1.75;
  font-weight: 400;
}
.card-hero {
  border: none;
  border-radius: 24px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.98);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
  backdrop-filter: blur(20px);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid rgba(255, 255, 255, 0.5);
  padding: 2.5rem;
}
.card-hero:hover {
  transform: translateY(-8px) scale(1.01);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.18);
}
.banner-logo {
  max-width: 120px;
  object-fit: contain;
}
.hero-stat {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  background: rgba(255, 255, 255, 0.2);
  padding: 1rem 1.5rem;
  border-radius: 50px;
  margin-bottom: 1.5rem;
  font-weight: 700;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  animation: fadeInDown 0.8s ease;
}
.hero-stat span {
  color: #fff;
}
.feature-card,
.card,
.stats-box,
.contact-card {
  border-radius: 24px;
}
.about-features {
  display: flex;
  justify-content: space-between;
}
.feature-card,
.card,
.stats-box,
.contact-card {
  border: 1px solid rgba(15, 34, 78, .08);
  background: #fff;
}
.feature-card {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid var(--border-subtle);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.95));
  backdrop-filter: blur(10px);
  padding: 1.5rem;
  text-align: center;
  max-width: 220px;
}
.feature-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 60px rgba(59, 130, 246, 0.15);
  border-color: var(--brand-blue);
  background: linear-gradient(145deg, rgba(255, 255, 255, 1), rgba(248, 250, 252, 0.98));
}
.feature-card h5,
.service-card h5 {
  color: var(--brand-dark);
  font-weight: 700;
  font-size: 1.25rem;
  margin-bottom: 0.75rem;
  transition: color 0.3s ease;
}
.Terms-of-employment {
  display: flex;
  justify-content: space-between;
}
.feature-card:hover h5,
.service-card:hover h5 {
  color: var(--brand-blue);
}
a.btn.btn-primary.form-btn {
  text-decoration: none;
  background-color: var(--brand-light);
  padding: 10px 10px;
  border-radius: 10px;
  color: white;
  font-weight: bold;
  transition: all 0.3s ease;
}
a.btn.btn-primary.form-btn:hover {
  background-color: #004470;
}

.burrger-btn{
  background-color: var(--brand-dark);
  color: white;
}
.service-card {
  min-height: 280px;
  padding: 1.5rem;
  border-radius: 20px;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid var(--border-subtle);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.95));
  backdrop-filter: blur(10px);
  text-align: center;
  max-width: 320px;
}
.service-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 25px 60px rgba(59, 130, 246, 0.18);
  border-color: var(--brand-blue);
  background: linear-gradient(145deg, rgba(255, 255, 255, 1), rgba(248, 250, 252, 0.98));
}
.service-card .service-icon {
  width: 65px;
  height: 65px;
  border-radius: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  color: #fff;
  background: var(--gradient-primary);
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.3);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.service-card:hover .service-icon {
  transform: scale(1.08) rotate(4deg);
  box-shadow: 0 10px 30px rgba(59, 130, 246, 0.4);
}
.imagesofoffice {
  margin-top: 2rem;
}
.officeimages {
  display: flex;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}
.officeimages:last-child {
  margin-bottom: 0;
}
.officeimages .col-md-4 {
  flex: 1;
  min-width: 0;
}
.room-card {
  position: relative;
  overflow: hidden;
  min-height: 280px;
  height: 280px;
  width: 100%;
  display: flex;
  align-items: flex-end;
  padding: 2rem;
  color: #fff;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  border-radius: 20px;
}
.room-card::before {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0.25;
  background: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="200" height="200" viewBox="0 0 200 200"%3E%3Ccircle cx="50" cy="50" r="50" fill="white" opacity="0.08"/%3E%3Ccircle cx="150" cy="150" r="50" fill="white" opacity="0.08"/%3E%3C/svg%3E') no-repeat center/contain;
  transition: opacity 0.3s ease;
}
.receptionroom {
  background-image: url("/assets/images/reseptionroom.jpeg");
  background-size: cover;
  background-position: center;
}
.meetingroom {
  background-image: url("/assets/images/meetingroom.jpeg");
  background-size: cover;
  background-position: center;
}
.reception2 {
  background-image: url("/assets/images/reception2.jpeg");
  background-size: cover;
  background-position: center;
}
.managerroom {
  background-image: url("/assets/images/maktb1.jpeg");
  background-size: cover;
  background-position: center;
}
.managerroom2 {
  background-image: url("/assets/images/mak1.jpeg");
  background-size: cover;
  background-position: center;
}
.socialroom {
  background-image: url("/assets/images/maktb2.jpeg");
  background-size: cover;
  background-position: center;
}
.room-card h4,
.room-card p {
  position: relative;
  z-index: 1;
  transition: transform 0.3s ease;
}
.room-card h4 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.room-card p {
  font-size: 1rem;
  opacity: 0.9;
}
.room-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 25px 50px rgba(59, 130, 246, 0.3);
}
.room-card:hover::before {
  opacity: 0.4;
}
.room-card:hover h4 {
  transform: translateY(-5px);
}
.person-card {
  overflow: hidden;
  border-radius: 20px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid rgba(255, 255, 255, 0.3);
}
.person-card:hover {
  transform: scale(1.02);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.18);
}
.person-card img {
  width: 100%;
  height: 100%;
  min-height: 420px;
  object-fit: cover;
}
.manager-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--gradient-accent);
  color: var(--brand-dark);
  padding: 0.75rem 1.5rem;
  border-radius: 50px;
  margin-top: 1.5rem;
  font-weight: 700;
  box-shadow: 0 6px 20px rgba(245, 158, 11, 0.35);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.manager-badge:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(245, 158, 11, 0.45);
}
.contact-card {
  padding: 2.25rem;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.1);
  border: 1px solid var(--border-subtle);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.95));
  backdrop-filter: blur(10px);
}















.contact-card:hover {



  transform: translateY(-4px);



  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.15);



  border-color: var(--border-hover);



}















.contact-card ul {







  gap: 1rem;







}















.contact-card li {







  display: flex;







  align-items: center;







  gap: .85rem;







  margin-bottom: 1.1rem;







  color: var(--text-muted);







}















.contact-card li strong {







  min-width: 90px;







}















.btn-contact {



  border-radius: 10px;



  padding: 0.75rem 2rem;



  background: var(--gradient-primary);



  border: none;



  color: #fff;



  font-weight: 700;



  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);



  box-shadow: 0 4px 16px rgba(59, 130, 246, 0.3);



  position: relative;



  overflow: hidden;



  font-size: 0.95rem;



}















.btn-contact::before {







  content: '';







  position: absolute;







  top: 0;







  left: -100%;







  width: 100%;







  height: 100%;







  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);







  transition: left 0.5s ease;







}















.btn-contact:hover::before {







  left: 100%;







}







.btn-contact:hover {



  transform: translateY(-2px);



  box-shadow: 0 8px 24px rgba(59, 130, 246, 0.4);



}







/* Partners Section Styles */
.partners-swiper {
  padding: 2rem 0;
}

.partners-swiper .swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
  width: auto !important;
}

.partner-link {
  display: block;
  text-decoration: none;
  transition: all 0.3s ease;
}

.partner-logo {
  width: 220px;
  height: 140px;
  object-fit: contain;
  border-radius: 12px;
  padding: 1.5rem;
  background: white;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.partner-logo:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

.partner-logo-placeholder {
  width: 220px;
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--brand-blue), var(--brand-light));
  color: white;
  font-size: 1.5rem;
  font-weight: 700;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
}

.partner-logo-placeholder:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 24px rgba(59, 130, 246, 0.3);
}

.partners-swiper .swiper-button-next,
.partners-swiper .swiper-button-prev {
  color: var(--brand-blue);
}

.partners-swiper .swiper-pagination-bullet-active {
  background: var(--brand-blue);
}

/* Team Section Styles */
.team-swiper {
  padding: 2rem 0;
}

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

.team-card {
  background: white;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  width: 320px;
  text-align: center;
  border: 1px solid rgba(59, 130, 246, 0.1);
}

.team-card:hover {
  transform: translateY(-12px) scale(1.02);
  box-shadow: 0 20px 48px rgba(59, 130, 246, 0.2);
  border-color: rgba(59, 130, 246, 0.3);
}

.team-photo {
  width: 100%;
  height: 320px;
  object-fit: cover;
  object-position: center top;
}

.team-photo-placeholder {
  width: 100%;
  height: 320px;
  background: linear-gradient(135deg, var(--brand-blue), var(--brand-light));
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 5rem;
}

.team-info {
  padding: 1.5rem;
}

.team-name {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--brand-dark);
  margin-bottom: 0.5rem;
}

.team-role {
  font-size: 0.95rem;
  color: var(--text-muted);
  margin: 0;
}

.team-swiper .swiper-button-next,
.team-swiper .swiper-button-prev {
  color: var(--brand-blue);
}

.team-swiper .swiper-pagination-bullet-active {
  background: var(--brand-blue);
}

/* Licenses Section Styles */
.licenses-swiper {
  padding: 2rem 0;
}

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

.license-link {
  display: block;
  text-decoration: none;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.license-image {
  width: 400px;
  height: 300px;
  object-fit: cover;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  border: 3px solid transparent;
}

.license-image:hover {
  transform: scale(1.05) translateY(-8px);
  box-shadow: 0 20px 48px rgba(59, 130, 246, 0.25);
  border-color: rgba(59, 130, 246, 0.4);
}

.licenses-swiper .swiper-pagination-bullet-active {
  background: var(--brand-blue);
}

/* Visas Section Styles */
.visas-swiper {
  padding: 2rem 0;
}

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

.visa-link {
  display: block;
  text-decoration: none;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.visa-image {
  width: 400px;
  height: 300px;
  object-fit: cover;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  border: 3px solid transparent;
}

.visa-image:hover {
  transform: scale(1.05) translateY(-8px);
  box-shadow: 0 20px 48px rgba(59, 130, 246, 0.25);
  border-color: rgba(59, 130, 246, 0.4);
}

.visas-swiper .swiper-pagination-bullet-active {
  background: var(--brand-blue);
}

/* Travelers Section Styles */
.travelers-swiper {
  padding: 2rem 0;
}

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

.traveler-link {
  display: block;
  text-decoration: none;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.traveler-image {
  width: 400px;
  height: 300px;
  object-fit: cover;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  border: 3px solid transparent;
}

.traveler-image:hover {
  transform: scale(1.05) translateY(-8px);
  box-shadow: 0 20px 48px rgba(59, 130, 246, 0.25);
  border-color: rgba(59, 130, 246, 0.4);
}

.travelers-swiper .swiper-pagination-bullet-active {
  background: var(--brand-blue);
}

/* Manager Section Special Cards */
.manager-special-cards {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 2rem;
  flex-wrap: wrap;
}

.manager-special-card {
  flex: 1;
  min-width: 280px;
  max-width: 48%;
  text-align: center;
  padding: 1.5rem;
}

.manager-special-card img {
  max-height: 400px;
  object-fit: contain;
  margin: 0 auto 1rem;
  width: 100%;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.manager-special-card h4 {
  font-weight: bold;
  margin-bottom: 0.5rem;
}

.manager-special-card p {
  color: #6c757d;
  margin-bottom: 0;
}

/* Image Protection - Prevent Copy/Download/Save */
img {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}

/* Prevent image selection on all pages */
body {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

/* Visa Filter Navigation Styles */
.visa-filter-nav {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 2rem;
  padding: 1rem;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.95));
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(59, 130, 246, 0.1);
}

.filter-btn {
  padding: 0.75rem 1.5rem;
  border: 2px solid rgba(59, 130, 246, 0.2);
  background: transparent;
  color: var(--text-primary);
  font-weight: 600;
  font-size: 0.95rem;
  border-radius: 50px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  font-family: 'Tajawal', sans-serif;
  position: relative;
  overflow: hidden;
}
.filter-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left 0.5s ease;
}

.filter-btn:hover::before {
  left: 100%;
}

.filter-btn:hover {
  border-color: var(--brand-blue);
  color: var(--brand-blue);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
}

.filter-btn.active {
  background: linear-gradient(135deg, var(--brand-blue), var(--brand-light));
  color: white;
  border-color: var(--brand-blue);
  box-shadow: 0 6px 20px rgba(59, 130, 246, 0.35);
  transform: translateY(-2px);
}

.filter-btn.active:hover {
  background: linear-gradient(135deg, var(--brand-blue), var(--brand-light));
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(59, 130, 246, 0.4);
}

@media (max-width: 768px) {
  .visa-filter-nav {
    gap: 0.5rem;
    padding: 0.75rem;
  }

  .filter-btn {
    padding: 0.6rem 1.25rem;
    font-size: 0.85rem;
  }
}

/* Location Section Styles */
.location-card {
  background: white;
  border-radius: 24px;
  padding: 2rem;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  max-width: 1000px;
  margin: 0 auto;
}

.location-info {
  text-align: center;
  margin-bottom: 2rem;
  padding-bottom: 2rem;
  border-bottom: 2px solid rgba(59, 130, 246, 0.1);
}

.location-icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, var(--brand-blue), var(--brand-light));
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  color: white;
  font-size: 2.5rem;
  box-shadow: 0 8px 24px rgba(59, 130, 246, 0.3);
}

.location-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--brand-dark);
  margin-bottom: 1rem;
}

.location-address {
  font-size: 1.25rem;
  color: var(--text-muted);
  margin: 0;
  line-height: 1.8;
}

.map-container {
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.map-iframe {
  display: block;
}

.footer {
  background: var(--brand-dark);
  color: #f4f6fb;
  padding: 3rem 0 1.5rem;
  position: relative;
  overflow: hidden;
}
.footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--brand-blue), var(--brand-light), var(--brand-blue));
}
.footer-main {
  display: flex;
  gap: 0;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.footer-section {
  flex: 1;
  padding: 0 1.75rem;
}
.footer-section-right {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}
.footer-section-middle {
  display: flex;
  flex-direction: column;
}
.footer-section-left {
  display: flex;
  flex-direction: column;

}
.footer-divider {
  width: 1px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.3));
}
.footer-logo-section {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.5rem;
}















.footer-logo {







  max-width: 70px;







  height: auto;







}















.footer-company-info {







  display: flex;







  flex-direction: column;







}















.footer-company-name {







  color: #fff;







  font-size: 1.25rem;







  font-weight: 700;







  margin: 0;







  line-height: 1.3;







}















.footer-company-desc {







  color: rgba(255, 255, 255, 0.8);







  font-size: 0.9rem;







  margin: 0.25rem 0 0;







}















.footer-social-section {







  display: flex;







  flex-direction: column;







  gap: 1rem;







}















.footer-social-title {



  color: var(--brand-light);



  font-size: 0.95rem;



  font-weight: 600;



  margin: 0;



}















.footer-social-icons {
  display: flex;
  gap: 1rem;
}
.footer-social-link {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1.1rem;
  transition: all 0.3s ease;
  text-decoration: none;
}
.footer-social-link:hover {



  background: var(--brand-blue);



  color: #fff;



  transform: translateY(-2px);



  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);



}















.footer-section-title {



  color: var(--brand-light);



  font-size: 1.05rem;



  font-weight: 600;



  margin: 0 0 1.25rem;



}















.footer-links-list {







  list-style: none;







  padding: 0;







  margin: 0;







  display: flex;







  flex-direction: column;







  gap: 0.75rem;







}















.footer-links-list li {







  margin: 0;







}















.footer-link {







  color: rgba(255, 255, 255, 0.85);







  text-decoration: none;







  font-size: 0.95rem;







  transition: all 0.3s ease;







  display: inline-block;







}















.footer-link:hover {



  color: var(--brand-light);



  transform: translateX(-4px);



}















.footer-contact-list {







  list-style: none;







  padding: 0;







  margin: 0;







  display: flex;







  flex-direction: column;







  gap: 1rem;







}















.footer-contact-item {







  display: flex;







  align-items: center;







  gap: 0.85rem;







  color: rgba(255, 255, 255, 0.85);







  font-size: 0.95rem;







}















.footer-contact-icon {



  color: var(--brand-light);



  font-size: 1.1rem;



  flex-shrink: 0;



}















.footer-bottom {







  display: flex;







  justify-content: space-between;







  align-items: center;







  padding-top: 1.5rem;







  gap: 1rem;







}















.footer-copyright {







  color: rgba(255, 255, 255, 0.7);







  font-size: 0.9rem;







}















.footer-powered {







  color: rgba(255, 255, 255, 0.7);







  font-size: 0.9rem;







}















.footer-powered-brand {







  color: #d4af37;







  font-weight: 600;







}















.footer p,







.footer small {







  margin: 0;







}















.stats-box {



  padding: 2.25rem;



  text-align: center;



  border: 1px solid var(--border-subtle);



  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);



  background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.95));



  backdrop-filter: blur(10px);



  border-radius: 18px;



}







.stats-box:hover {



  transform: translateY(-6px);



  box-shadow: 0 20px 50px rgba(59, 130, 246, 0.15);



  border-color: var(--border-hover);



  background: linear-gradient(145deg, rgba(255, 255, 255, 1), rgba(248, 250, 252, 0.98));



}















.stats-box h3 {



  font-size: 3.5rem;



  color: var(--brand-blue);



  margin-bottom: 0.5rem;



  font-weight: 800;



  background: var(--gradient-primary);



  -webkit-background-clip: text;



  -webkit-text-fill-color: transparent;



  background-clip: text;



  letter-spacing: -0.02em;



}















.stats-box p {







  color: var(--text-muted);







}















.footer-links a {







  color: #f4f6fb;







  transition: color 0.3s ease;







  position: relative;







  display: inline-block;







}















.footer-links a::after {







  content: '';







  position: absolute;







  bottom: -2px;







  right: 0;







  width: 0;







  height: 2px;







  background: var(--brand-light);







  transition: width 0.3s ease;







}















.footer-links a:hover::after {







  width: 100%;







}















.footer-links a:hover {







  color: #fff;







}















@media (max-width: 990px) {







  .hero-section {







    padding-top: 3rem;







    min-height: auto;







  }















  .hero-section::before,







  .hero-section::after {







    display: none;







  }















  .hero-section .lead {







    max-width: 100%;







  }















  .card-hero {







    margin-top: 2rem;







  }















  .footer-main {







    flex-direction: column;







    gap: 2rem;







  }















  .footer-divider {







    display: none;







  }















  .footer-section {







    padding: 0;







  }















  .footer-bottom {







    flex-direction: column;







    text-align: center;







    gap: 0.5rem;







  }







}















@media (max-width: 768px) {
  .navbar {
    padding: 0.85rem 0;
  }
  .room-card,
  .person-card img {
    min-height: 260px;
  }
  .hero-section h1 {
    font-size: 2rem;
  }
  .stats-box h3 {
    font-size: 2.5rem;
  }
  .hero-info {
    padding-top: 150px !important;
}
    .hero-section h1 {
        font-size: 21px;
    }
      .hero-section h3 {
      font-size: 20px;
    }
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0) scale(1);
  }
  50% {
    transform: translateY(-30px) scale(1.05);
  }
}
@keyframes fadeInDown {
  from {
   opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* Smooth scroll behavior */
html {
  scroll-behavior: smooth;
}
/* Selection styling */
::selection {
  background: rgba(5, 148, 255, 0.2);
  color: var(--brand-blue);
}















/* Focus visible for accessibility */



:focus-visible {



  outline: 2px solid var(--brand-light);



  outline-offset: 2px;



}







/* Enhanced animations and transitions */



@keyframes pulse-glow {







  0%,



  100% {



    box-shadow: 0 0 20px rgba(59, 130, 246, 0.2);



  }







  50% {



    box-shadow: 0 0 40px rgba(59, 130, 246, 0.4);



  }



}







@keyframes slide-in-right {



  from {



    opacity: 0;



    transform: translateX(30px);



  }







  to {



    opacity: 1;



    transform: translateX(0);



  }



}







@keyframes slide-in-left {



  from {



    opacity: 0;



    transform: translateX(-30px);



  }







  to {



    opacity: 1;



    transform: translateX(0);



  }



}







@keyframes scale-in {



  from {



    opacity: 0;



    transform: scale(0.9);



  }







  to {



    opacity: 1;



    transform: scale(1);



  }



}







/* Better visual hierarchy */



h1,



h2,



h3,



h4,



h5,



h6 {



  line-height: 1.2;



  margin-bottom: 1rem;



}







h1 {



  font-weight: 800;



  letter-spacing: -0.03em;



}







h2 {



  font-weight: 700;



  letter-spacing: -0.02em;



}







h3 {



  font-weight: 700;



  letter-spacing: -0.01em;



}







p {



  margin-bottom: 1rem;



}







/* Improved spacing */



.container {



  padding: 0 1.5rem;



}







section {



  padding: 5rem 0;



}







/* Better hover states for all interactive elements */



a,



button,



.card,



.feature-card,



.service-card,



.room-card,



.contact-card,



.stats-box {



  cursor: pointer;



}







/* Improved loading states */



img {



  transition: opacity 0.3s ease;



}







img[loading] {



  opacity: 0.5;



}







img[loading]:hover {



  opacity: 0.7;



}







/* Better focus states for accessibility */



a:focus-visible,



button:focus-visible {



  outline: 2px solid var(--brand-light);



  outline-offset: 2px;



  border-radius: 4px;



}







/* Improved text selection */



::selection {



  background: rgba(59, 130, 246, 0.2);



  color: var(--brand-blue);



}







/* Better scrollbar */



::-webkit-scrollbar {



  width: 8px;



}







::-webkit-scrollbar-track {



  background: #f1f5f9;



}







::-webkit-scrollbar-thumb {



  background: var(--brand-blue);



  border-radius: 4px;



}







::-webkit-scrollbar-thumb:hover {



  background: var(--brand-light);



}







/* Improved responsive typography */



@media (max-width: 768px) {



  h1 {



    font-size: 2rem;



  }







  h2 {



    font-size: 1.75rem;



  }







  h3 {



    font-size: 1.5rem;



  }







  section {



    padding: 3rem 0;



  }



}







/* Additional professional touches */



/* Smooth image loading */



img {



  image-rendering: -webkit-optimize-contrast;



  image-rendering: crisp-edges;



}







/* Better link underline animation */



a {



  position: relative;



}







a:not(.btn, .nav-link, .footer-link, .footer-social-link)::after {



  content: '';



  position: absolute;



  width: 0;



  height: 2px;



  bottom: -2px;



  right: 0;



  background: var(--brand-blue);



  transition: width 0.3s ease;



}







a:not(.btn, .nav-link, .footer-link, .footer-social-link):hover::after {



  width: 100%;



}







/* Improved input styling */



input,



textarea,



select {



  border: 1px solid var(--border-subtle);



  border-radius: 8px;



  padding: 0.75rem 1rem;



  font-size: 1rem;



  transition: all 0.3s ease;



  background: #fff;



}







input:focus,



textarea:focus,



select:focus {



  outline: none;



  border-color: var(--brand-blue);



  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);



}







input:hover,



textarea:hover,



select:hover {



  border-color: var(--border-hover);



}







/* Better badge styling */



.badge {



  padding: 0.4rem 0.8rem;



  border-radius: 6px;



  font-weight: 600;



  font-size: 0.85rem;



}







/* Improved table styling */



table {



  border-collapse: separate;



  border-spacing: 0;



  width: 100%;



}







th {



  background: var(--gradient-primary);



  color: #fff;



  font-weight: 600;



  padding: 1rem;



  text-align: right;



}







td {



  padding: 1rem;



  border-bottom: 1px solid var(--border-subtle);



}







tr:hover td {



  background: rgba(59, 130, 246, 0.03);



}







/* Better form label styling */



label {



  font-weight: 600;



  margin-bottom: 0.5rem;



  display: block;



  color: var(--text-primary);



}







/* Improved alert styling */



.alert {



  border-radius: 12px;



  border: none;



  padding: 1rem 1.5rem;



}







.alert-info {



  background: linear-gradient(135deg, rgba(59, 130, 246, 0.1), rgba(96, 165, 250, 0.05));



  color: var(--brand-blue);



}







.alert-success {



  background: linear-gradient(135deg, rgba(34, 197, 94, 0.1), rgba(74, 222, 128, 0.05));



  color: #16a34a;



}







.alert-warning {



  background: linear-gradient(135deg, rgba(245, 158, 11, 0.1), rgba(251, 191, 36, 0.05));



  color: #d97706;



}







.alert-danger {



  background: linear-gradient(135deg, rgba(220, 38, 38, 0.1), rgba(239, 68, 68, 0.05));



  color: #dc2626;



}







/* Better progress bar styling */



.progress {



  height: 8px;



  border-radius: 4px;



  background: var(--border-subtle);



  overflow: hidden;



}







.progress-bar {



  background: var(--gradient-primary);



  transition: width 0.6s ease;



}







/* Improved tooltip styling */



[data-bs-toggle="tooltip"] {



  cursor: help;



}







/* Better modal styling */



.modal-content {



  border-radius: 16px;



  border: none;



  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);



}







.modal-header {



  border-bottom: 1px solid var(--border-subtle);



  padding: 1.5rem;



}







.modal-body {



  padding: 1.5rem;



}







.modal-footer {



  border-top: 1px solid var(--border-subtle);



  padding: 1.5rem;



}







/* Improved dropdown styling */



.dropdown-menu {



  border: 1px solid var(--border-subtle);



  border-radius: 12px;



  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);



  padding: 0.5rem;



}







.dropdown-item {



  border-radius: 8px;



  padding: 0.6rem 1rem;



  transition: all 0.2s ease;



}







.dropdown-item:hover {



  background: rgba(59, 130, 246, 0.08);



  color: var(--brand-blue);



}







/* Better accordion styling */



.accordion-button {



  border-radius: 8px;



  font-weight: 600;



  padding: 1rem 1.25rem;



}







.accordion-button:not(.collapsed) {



  background: rgba(59, 130, 246, 0.08);



  color: var(--brand-blue);



}







.accordion-item {



  border: 1px solid var(--border-subtle);



  border-radius: 12px;



  margin-bottom: 0.75rem;



  overflow: hidden;



}







.accordion-body {



  padding: 1.25rem;



}







/* Improved carousel styling */



.carousel-indicators button {



  width: 10px;



  height: 10px;



  border-radius: 50%;



  margin: 0 4px;



}







.carousel-control-prev-icon,



.carousel-control-next-icon {



  width: 3rem;



  height: 3rem;



  background-size: 50%;



}







/* Better pagination styling */



.page-link {



  border: 1px solid var(--border-subtle);



  border-radius: 8px;



  margin: 0 2px;



  padding: 0.5rem 1rem;



  color: var(--brand-blue);



  transition: all 0.2s ease;



}







.page-link:hover {



  background: rgba(59, 130, 246, 0.08);



  border-color: var(--brand-blue);



}







.page-item.active .page-link {



  background: var(--gradient-primary);



  border-color: var(--brand-blue);



  color: #fff;



}







/* Improved breadcrumb styling */



.breadcrumb-item a {



  color: var(--brand-blue);



  text-decoration: none;



  transition: color 0.2s ease;



}







.breadcrumb-item a:hover {



  color: var(--brand-light);



}







.breadcrumb-item.active {



  color: var(--text-muted);



}







/* Better card group styling */



.card-group .card {



  border-radius: 0;



}







.card-group .card:first-child {



  border-top-right-radius: 20px;



  border-bottom-right-radius: 20px;



}







.card-group .card:last-child {



  border-top-left-radius: 20px;



  border-bottom-left-radius: 20px;



}







/* Improved list group styling */



.list-group-item {



  border: 1px solid var(--border-subtle);



  padding: 1rem 1.25rem;



  transition: all 0.2s ease;



}







.list-group-item:hover {



  background: rgba(59, 130, 246, 0.03);



  border-color: var(--border-hover);



}







.list-group-item.active {



  background: var(--gradient-primary);



  border-color: var(--brand-blue);



}







/* Better close button styling */



.btn-close {



  opacity: 0.6;



  transition: opacity 0.2s ease;



}







.btn-close:hover {



  opacity: 1;



}







/* Improved spinner styling */



.spinner-border {



  border-color: var(--brand-blue);



  border-right-color: transparent;



}







/* Better toast styling */



.toast {



  border-radius: 12px;



  border: none;



  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);



}







.toast-header {



  border-bottom: 1px solid var(--border-subtle);



  padding: 1rem 1.25rem;



}







.toast-body {



  padding: 1rem 1.25rem;



}







/* Social Media Section Styling */



.social-media-card {



  padding: 2.25rem;



  margin-top: 30px;



  border: 1px solid var(--border-subtle);



  border-radius: 20px;



  background: linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.95));



  backdrop-filter: blur(10px);



  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.08);



  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);



}







.social-media-card:hover {



  transform: translateY(-4px);



  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.12);



  border-color: var(--border-hover);



}







.social-media-card h5 {



  font-size: 1.25rem;



  font-weight: 700;



  color: var(--text-primary);



  margin-bottom: 0.5rem;



}







.social-icons-wrapper {



  display: flex;



  gap: 1rem;



  flex-wrap: wrap;



}







.social-icon {



  width: 50px;



  height: 50px;



  border-radius: 12px;



  display: inline-flex;



  align-items: center;



  justify-content: center;



  font-size: 1.5rem;



  color: #fff;



  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);



  text-decoration: none;



  position: relative;



  overflow: hidden;



}







.social-icon::before {



  content: '';



  position: absolute;



  width: 100%;



  height: 100%;



  background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), transparent);



  top: 0;



  left: 0;



  opacity: 0;



  transition: opacity 0.3s ease;



}







.social-icon:hover::before {



  opacity: 1;



}







.social-icon:hover {



  transform: translateY(-4px) scale(1.1);



  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);



}







/* Platform-specific colors */



.social-facebook {



  background: linear-gradient(135deg, #1877f2, #0d65d9);



  box-shadow: 0 4px 12px rgba(24, 119, 242, 0.3);



}







.social-facebook:hover {



  background: linear-gradient(135deg, #0d65d9, #0a54b8);



  box-shadow: 0 8px 20px rgba(24, 119, 242, 0.4);



}







.social-instagram {



  background: linear-gradient(135deg, #e1306c, #c13584, #833ab4);



  box-shadow: 0 4px 12px rgba(225, 48, 108, 0.3);



}







.social-instagram:hover {



  background: linear-gradient(135deg, #c13584, #833ab4, #6a3b8a);



  box-shadow: 0 8px 20px rgba(225, 48, 108, 0.4);



}







.social-whatsapp {



  background: linear-gradient(135deg, #25d366, #128c7e);



  box-shadow: 0 4px 12px rgba(37, 211, 102, 0.3);



}







.social-whatsapp:hover {



  background: linear-gradient(135deg, #128c7e, #075e54);



  box-shadow: 0 8px 20px rgba(37, 211, 102, 0.4);



}







.social-tiktok {



  background: linear-gradient(135deg, #000000, #25f4ee, #fe2c55);



  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);



}







.social-tiktok:hover {



  background: linear-gradient(135deg, #1a1a1a, #20d4dc, #e0254a);



  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);



}







.social-linkedin {



  background: linear-gradient(135deg, #0077b5, #005885);



  box-shadow: 0 4px 12px rgba(0, 119, 181, 0.3);



}







.social-linkedin:hover {



  background: linear-gradient(135deg, #005885, #004470);



  box-shadow: 0 8px 20px rgba(0, 119, 181, 0.4);



}







.social-threads {



  background: linear-gradient(135deg, #000000, #1a1a1a);



  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);



}







.social-threads:hover {



  background: linear-gradient(135deg, #1a1a1a, #2d2d2d);



  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);



}







.social-snapchat {

  background: linear-gradient(135deg, #fffc00, #ffeb3b);

  box-shadow: 0 4px 12px rgba(255, 252, 0, 0.3);

  color: #000;

}







.social-snapchat:hover {

  background: linear-gradient(135deg, #ffeb3b, #ffc107);

  box-shadow: 0 8px 20px rgba(255, 252, 0, 0.4);

}



.social-google-forms {

  background: linear-gradient(135deg, #673ab7, #512da8);

  box-shadow: 0 4px 12px rgba(103, 58, 183, 0.3);

}







.social-google-forms:hover {

  background: linear-gradient(135deg, #512da8, #4527a0);

  box-shadow: 0 8px 20px rgba(103, 58, 183, 0.4);

}



/* Responsive Styles */

@media (max-width: 990px) {

  .navbar {

    padding: 0.75rem 23px;

  }

  
  .navbar-brand h1 {

    font-size: 1.25rem;

  }

  
  .navbar-brand p {

    font-size: 0.85rem;

  }

  
  .navbar-toggler {

    font-size: 1.25rem;

    width: 40px;

    height: 40px;

  }

  
  .navbar-links {

    flex-direction: column;

    gap: 0.5rem;

  }



  .nav-item {

    width: 100%;

  }



  .nav-link {

    display: block;

    padding: 0.75rem;

    text-align: center;

    font-size: 0.95rem;

  }

  
  .nav-items.show {

    padding: 1.5rem;

  }



  .about-features {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 1rem;

  }

  
  .hero-section {

    padding: 3rem 0;

    min-height: auto;

  }

  
  .hero-section h1 {

    font-size: 2rem;

  }

  
  .hero-section .lead {

    font-size: 1rem;

    max-width: 100%;

  }

  
  .hero-btns {

    flex-direction: column;

    gap: 0.75rem;

  }

  
  .hero-btns .btn {

    width: 100%;

    text-align: center;

  }

  
  .section-title {

    font-size: 1.75rem;

  }

  
  .section-subtitle {

    font-size: 1rem;

  }

  
  .feature-card {

    max-width: 100%;

    padding: 1.25rem;

  }

  
  .Terms-of-employment {

    display: grid;

    grid-template-columns: 1fr;

    gap: 1rem;

  }

  
  .service-card {

    max-width: 100%;

    padding: 1.25rem;

  }

  
  .officeimages {

    flex-direction: column;

    gap: 1rem;

  }

  
  .officeimages .col-md-4 {

    width: 100%;

  }

  
  .room-card {

    height: auto;

    min-height: 250px;

  }

  
  .stats-box {

    padding: 1.75rem;

  }

  
  .stats-box h3 {

    font-size: 2.5rem;

  }

  
  .contact-card {

    padding: 1.75rem;

  }

  
  .social-media-card {

    padding: 1.75rem;

  }

  
  .social-icons-wrapper {

    justify-content: center !important;

  }



  .footer-main {

    flex-direction: column;

    gap: 2rem;

  }



  .footer-divider {

    display: none;

  }



  .footer-section {

    width: 100%;

    padding: 0;

  }

  
  .footer-bottom {

    flex-direction: column;

    text-align: center;

    gap: 0.75rem;

  }

}



@media (max-width: 767px) {

  .navbar {

    padding: 0.5rem 20px;

  }

  
  .navbar-brand h1 {

    font-size: 1.1rem;

  }

  
  .navbar-brand p {

    font-size: 0.8rem;

  }

  
  .navbar-toggler {

    font-size: 1.1rem;

    width: 36px;

    height: 36px;

  }

  
  .nav-link {

    font-size: 0.9rem;

    padding: 0.6rem;

  }

  
  .hero-section {

    padding: 2.5rem 0;

    min-height: auto;

  }

  
  .hero-section h1 {

    font-size: 1.75rem !important;

  }



  .hero-section h3 {

    font-size: 1rem !important;

  }



  .hero-section .lead {

    font-size: 0.95rem;

    line-height: 1.6;

  }

  
  .hero-btns .btn {

    font-size: 0.9rem;

    padding: 0.75rem 1.5rem;

  }

  
  .section-title {

    font-size: 1.5rem;

  }

  
  .section-subtitle {

    font-size: 0.95rem;

  }

  
  .about-features {

    grid-template-columns: 1fr;

    gap: 0.75rem;

  }

  
  .feature-card {

    padding: 1rem;

    min-height: auto;

  }

  
  .feature-card h5 {

    font-size: 1.1rem;

  }

  
  .feature-card p {

    font-size: 0.85rem;

  }

  
  .Terms-of-employment {

    gap: 0.75rem;

  }

  
  .service-card {

    padding: 1rem;

    min-height: auto;

  }

  
  .service-card h5 {

    font-size: 1.1rem;

  }

  
  .service-card .service-icon {

    width: 55px;

    height: 55px;

    font-size: 1.25rem;

  }

  
  .officeimages {

    gap: 0.75rem;

    flex-direction: column;

  }

  
  .room-card {

    min-height: 220px;

    padding: 1.25rem;

  }

  
  .room-card h4 {

    font-size: 1.25rem;

  }

  
  .room-card p {

    font-size: 0.85rem;

  }

  
  .person-card img {

    max-height: 280px;

    object-fit: cover;

  }

  
  .stats-box {

    padding: 1.5rem;

  }

  
  .stats-box h3 {

    font-size: 2rem;

  }

  
  .stats-box p {

    font-size: 0.9rem;

  }

  
  .social-media-card {

    padding: 1.5rem;

  }

  
  .social-media-card h5 {

    font-size: 1.1rem;

  }

  
  .social-icon {

    width: 45px;

    height: 45px;

    font-size: 1.25rem;

  }

  
  .contact-card {

    padding: 1.5rem;

  }

  
  .contact-card li {

    font-size: 0.9rem;

  }

  
  .btn-contact {

    font-size: 0.9rem;

    padding: 0.6rem 1.5rem;

  }

  
  .footer {

    padding: 2rem 0 1rem;

  }

  
  .footer-main {

    gap: 1.5rem;

  }

  
  .footer-section-title {

    font-size: 1rem;

  }

  
  .footer-link {

    font-size: 0.9rem;

  }

  
  .footer-contact-item {

    font-size: 0.85rem;

  }

  
  .footer-social-link {

    width: 36px;

    height: 36px;

    font-size: 1rem;

  }

  
  .footer-copyright,

  .footer-powered {

    font-size: 0.8rem;

  }

  
  section {

    padding: 3rem 0;

  }

}



@media (max-width: 575px) {
header{
  padding: 10px 0;
}
  .container {

    padding-left: 1rem;

    padding-right: 1rem;

  }

  
  .navbar {

    padding: 0.5rem 17px;

  }

  
  .navbar-brand h1 {

    font-size: 1rem;

  }

  
  .navbar-brand p {

    font-size: 0.75rem;

  }

  
  .navbar-toggler {

    font-size: 1rem;

    width: 32px;

    height: 32px;

  }

  
  .nav-link {

    font-size: 0.85rem;

    padding: 0.5rem;

  }
   
  
  .nav-items.show {

    padding: 1rem;

  }

  
  .hero-section {

    padding: 2rem 0;

    min-height: auto;

  }

  
  .banner-logo {

    max-height: 40px;

  }

  
  .banner-logo {

    width: 50px;

    height: 50px;

  }

  
  .hero-section h1 {

    font-size: 20px !important;

  }

  
  .hero-section h3 {

    font-size: 15px !important;

  }

  
  .hero-section .lead {

    font-size: 0.9rem;

    line-height: 1.5;

  }

  
  .hero-btns .btn {

    font-size: 0.85rem;

    padding: 0.65rem 1.25rem;

  }

  
  .section-title {

    font-size: 1.35rem;

  }

  
  .section-subtitle {

    font-size: 0.9rem;

  }

  
  .card-hero {

    padding: 1.5rem;

  }

  
  .about-features {

    gap: 0.5rem;

  }

  
  .feature-card {

    padding: 0.875rem;

  }

  
  .feature-card h5 {

    font-size: 1rem;

  }

  
  .feature-card p {

    font-size: 0.8rem;

  }

  
  .Terms-of-employment {

    gap: 0.5rem;

  }

  
  .service-card {

    padding: 0.875rem;

  }

  
  .service-card h5 {

    font-size: 1rem;

  }

  
  .service-card .service-icon {

    width: 50px;

    height: 50px;

    font-size: 1.1rem;

    margin-bottom: 1rem;

  }

  
  .officeimages {

    gap: 0.5rem;

    flex-direction: column;

  }

  
  .room-card {

    padding: 1rem;

    min-height: 200px;

  }

  
  .room-card h4 {

    font-size: 1.1rem;

  }

  
  .room-card p {

    font-size: 0.8rem;

  }

  
  .person-card img {

    max-height: 250px;

  }

  
  .stats-box {

    padding: 1.25rem;

  }

  
  .stats-box h3 {

    font-size: 1.75rem;

  }

  
  .stats-box p {

    font-size: 0.85rem;

  }

  
  .social-media-card {

    padding: 1.25rem;

  }

  
  .social-media-card h5 {

    font-size: 1rem;

  }

  
  .social-icons-wrapper {

    gap: 0.5rem;

  }

  
  .social-icon {

    width: 40px;

    height: 40px;

    font-size: 1.1rem;

  }

  
  .contact-card {

    padding: 1.25rem;

  }

  
  .contact-card li {

    font-size: 0.85rem;

    gap: 0.5rem;

  }

  
  .contact-card li strong {

    min-width: 70px;

    font-size: 0.85rem;

  }

  
  .btn-contact {

    font-size: 0.85rem;

    padding: 0.5rem 1.25rem;

  }

  
  .footer {

    padding: 1.5rem 0 0.75rem;

  }

  
  .footer-main {

    gap: 1rem;

  }

  
  .footer-logo {

    max-width: 55px;

  }

  
  .footer-company-name {

    font-size: 1.1rem;

  }

  
  .footer-company-desc {

    font-size: 0.8rem;

  }

  
  .footer-section-title {

    font-size: 0.95rem;

    margin-bottom: 1rem;

  }

  
  .footer-link {

    font-size: 0.85rem;

  }

  
  .footer-contact-item {

    font-size: 0.8rem;

    gap: 0.5rem;

  }

  
  .footer-contact-icon {

    font-size: 1rem;

  }

  
  .footer-social-link {

    width: 32px;

    height: 32px;

    font-size: 0.9rem;

  }

  
  .footer-copyright,

  .footer-powered {

    font-size: 0.75rem;

  }

  
  section {

    padding: 2rem 0;

  }

  
  .btn-brand {

    font-size: 0.85rem;

    padding: 0.6rem 1.5rem;

  }

  
  .hero-stat {

    padding: 0.75rem 1rem;

    font-size: 0.85rem;

  }

}


/* Large screens optimization */
@media (min-width: 1400px) {

  .container {

    max-width: 1320px;

  }

  
  .hero-section h1 {

    font-size: 3.5rem;

  }

  
  .hero-section .lead {

    font-size: 1.3rem;

  }

  
  .section-title {

    font-size: 2.5rem;

  }

  
  .section-subtitle {

    font-size: 1.15rem;

  }

  
  .feature-card {

    max-width: 250px;

  }

  
  .service-card {

    max-width: 350px;

  }

  
  .stats-box h3 {

    font-size: 4rem;

  }

  
  .room-card h4 {

    font-size: 1.75rem;

  }

  
  .room-card p {

    font-size: 1.1rem;

  }

}


/* Medium screens optimization */
@media (min-width: 992px) and (max-width: 1199px) {
    .hero-section h1 {
        font-size: 26px;
    }
}

  
  .feature-card {

    max-width: 200px;

  }

  
  .service-card {

    max-width: 300px;

  }

  
  .stats-box h3 {

    font-size: 3rem;

  }

}


/* Extra small screens optimization */
@media (max-width: 400px) {

  .hero-section h1 {

    font-size: 1.35rem !important;

  }

  
  .hero-section .lead {

    font-size: 0.85rem;

  }

  
  .section-title {

    font-size: 1.25rem;

  }

  
  .section-subtitle {

    font-size: 0.85rem;

  }

  
  .room-card {

    min-height: 180px;

    padding: 0.875rem;

  }

  
  .room-card h4 {

    font-size: 1rem;

  }

  
  .room-card p {

    font-size: 0.75rem;

  }

  
  .stats-box h3 {

    font-size: 1.5rem;

  }

  
  .social-icon {

    width: 36px;

    height: 36px;

    font-size: 1rem;

  }

  
  .footer-social-link {

    width: 30px;

    height: 30px;

    font-size: 0.85rem;

  }

}