/* =================================================
 CSS Custom Properties (Variables)
 -------------------------------------------------
 Define reusable color and spacing values
================================================= */
:root {
  /* Color Variables */
  --primary-gradient-start: #e066ff;
  --primary-gradient-end: #6666ff;
  --secondary-gradient-start: #8B5CF6;
  --secondary-gradient-end: #EC4899;
  --primary-purple: #8b5cf6;
  --dark-bg: #1f1f2e;
  --text-primary: #000000;
  --text-secondary: rgba(0, 0, 0, 0.5);
  --text-muted: #666;
  --white: #ffffff;
  --light-bg: rgba(255, 255, 255, 0.95);
  --hero-gradient-bg: rgba(233, 220, 242, 0.3);
  
  /* Spacing Variables */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-xxl: 3rem;
  --spacing-xxxl: 4rem;
  
  /* Border Radius Variables */
  --border-radius-sm: 0.5rem; /* 8px */
  --border-radius-md: 0.9375rem; /* 15px */
  --border-radius-lg: 1.375rem; /* 22px */
  --border-radius-xl: 3.125rem; /* 50px */
  
  /* Font Sizes */
  --font-size-xs: 0.85rem;
  --font-size-sm: 1rem;
  --font-size-md: 1.1rem;
  --font-size-lg: 1.2rem;
  --font-size-xl: 1.5625rem; /* 25px */
  --font-size-xxl: 3.125rem; /* 50px */
  --font-size-xxxl: 4.6875rem; /* 75px */
  
  /* Shadows */
  --shadow-light: 0 0.125rem 0.625rem rgba(0, 0, 0, 0.1); /* 2px 10px */
  --shadow-medium: 0 0.25rem 0.9375rem rgba(0, 0, 0, 0.1); /* 4px 15px */
  --shadow-heavy: 0 0.5rem 1rem rgba(0, 0, 0, 0.25);
}

/* =================================================
 Step 1: Typography Styles
 -------------------------------------------------
 Group styles for headings and text formats used for 
 display texts (display-4, display-5, display-6, etc.).
================================================= */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;500;600;700&display=swap');

/* Apply Poppins font to all elements */
* {
  font-family: 'Poppins', sans-serif;
  color: inherit;
}

body {
  color: var(--text-primary);
}


.display-4 {
  font-style: normal;
  font-weight: 700;
  font-size: var(--font-size-xxxl);
  letter-spacing: 0.1rem;
  color: var(--text-primary);
}

.display-5 {
  font-style: normal;
  font-weight: 700;
  font-size: var(--font-size-xxl);
  line-height: var(--font-size-xxl);
  text-align: center;
  letter-spacing: 0;
  color: var(--text-primary);
}

.display-6-gray {
  font-style: normal;
  font-weight: 400;
  font-size: var(--font-size-xl);
  text-align: center;
  color: var(--text-secondary);
}

.display-6 {
  font-style: normal;
  font-weight: 300;
  font-size: var(--font-size-xl);
  text-align: center;
  color: var(--text-primary);
}

.display-7 {
  font-style: normal;
  font-weight: 400;
  font-size: 1.2rem;
  text-align: center;
  color: var(--text-primary);
}

/* =================================================
        Step 2: Navigation Styles
        -------------------------------------------------
        Consolidate all navigation styles including nav-links
        and navbar specifics.
        ================================================= */
.nav-link {
  color: var(--text-primary);
  text-decoration: none;
  padding: var(--spacing-sm) var(--spacing-md);
}

.navbar {
  height: 4.375rem; /* 70px */
  display: flex;
  align-items: center;
  background-color: var(--light-bg);
  box-shadow: none;
}

.navbar-nav .nav-link {
  font-size: var(--font-size-md);
  font-weight: 500;
  padding: 0 1.2rem;
  margin: 0;
  line-height: 1;
  color: var(--text-primary);
  transition: all 0.3s ease;
  position: relative;
  height: auto;
}

.navbar-nav .nav-link:hover {
  color: var(--text-primary);
  opacity: 0.8;
}

.navbar-nav .nav-link::after {
  content: '';
  position: absolute;
  width: 0;
  height: 0.125rem; /* 2px */
  bottom: 1.5625rem; /* 25px */
  left: 50%;
  background: linear-gradient(90deg, var(--secondary-gradient-start), var(--secondary-gradient-end));
  transition: all 0.3s ease;
  transform: translateX(-50%);
}

/* This makes the hover effect work for both states */
.navbar-nav .nav-link:hover::after,
.navbar-collapse .nav-link:hover::after {
  width: 80%;
}

/* Fix the navbar-brand vertical alignment */
.navbar-brand {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 4.375rem; /* 70px - Match navbar height */
}

.navbar>.container {
  display: flex;
  align-items: center;
  height: 4.375rem; /* 70px - Match navbar height */
  padding-top: 0;
  padding-bottom: 0;
  min-height: 0;
}

.logo {
  height: 3.75rem; /* 60px */
  width: auto;
  margin: 0;
  padding: 0;
  object-fit: contain; /* Maintain aspect ratio */
  vertical-align: middle; /* Important for consistent alignment */
}

/* =================================================
        Step 3: Button Styles
        -------------------------------------------------
        Style solid, gradient, outline, and action buttons.
        ================================================= */
.gradient-button {
  display: inline-block;
  padding: var(--spacing-md) var(--spacing-xl);
  background-color: var(--dark-bg);
  color: var(--white);
  text-decoration: none;
  border-radius: var(--border-radius-xl);
  position: relative;
  z-index: 1;
  text-align: center;
  font-size: var(--font-size-sm);
  line-height: 1.4;
}

.gradient-button::before {
  content: '';
  position: absolute;
  top: -0.125rem; /* -2px */
  right: -0.125rem; /* -2px */
  bottom: -0.125rem; /* -2px */
  left: -0.125rem; /* -2px */
  background: linear-gradient(90deg, var(--primary-gradient-start), var(--primary-gradient-end));
  border-radius: 3.25rem; /* 52px */
  z-index: -1;
}

.gradient-button:hover {
  text-decoration: none;
}

.action-button {
  display: flex;
  width: 12.5rem; /* 200px */
  background-color: var(--dark-bg);
  color: var(--white);
  border-radius: var(--border-radius-xl);
  padding: var(--spacing-xl);
  text-decoration: none;
  margin: var(--spacing-xl);
  align-items: center;
  justify-content: center;
  text-align: center;
  transition: background-color 0.3s ease;
}

.top-button:hover {
  background-color: var(--primary-purple);
  text-decoration: none;
}

.gradient-outline-button {
  padding: var(--spacing-md) var(--spacing-xl);
  background-color: var(--dark-bg);
  color: var(--white);
  text-decoration: none;
  position: relative;
  z-index: 1;
  text-align: center;
  align-items: center;
  font-size: var(--font-size-sm);
  line-height: 1.4;
  border-radius: var(--border-radius-xl);
}

.gradient-outline-button::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--primary-gradient-start), var(--primary-gradient-end));
  border-radius: inherit;
  padding: 0.125rem; /* 2px */
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

.gradient-outline-button:hover {
  text-decoration: none;
  transform: translateY(-0.0625rem); /* -1px */
}

.hero-gradient-button {
  background-color: var(--dark-bg);
  color: var(--white);
  border: 0.125rem solid transparent; /* 2px */
  background-image: linear-gradient(var(--dark-bg), var(--dark-bg)), 
                    linear-gradient(90deg, var(--primary-gradient-start), var(--primary-gradient-end));
  background-origin: border-box;
  background-clip: padding-box, border-box;
  transition: all 0.3s ease;
  position: relative;
}

.hero-gradient-button:hover,
.hero-gradient-button:focus {
  background-image: linear-gradient(var(--primary-purple), var(--primary-purple)), 
                    linear-gradient(90deg, var(--primary-gradient-start), var(--primary-gradient-end));
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

/* Override Bootstrap button styles for hero-gradient-button */
.btn.hero-gradient-button,
.btn.hero-gradient-button:hover,
.btn.hero-gradient-button:focus,
.btn.hero-gradient-button:active {
  background-color: var(--dark-bg);
  border-color: transparent;
}

/* Button size modifiers */
.btn-sm {
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: var(--font-size-xs);
}

.btn-lg {
  padding: var(--spacing-lg) var(--spacing-xxl);
  font-size: var(--font-size-md);
}

/* Button width modifiers */
.btn-fixed {
  width: 12.5rem; /* 200px */
}

.btn-full {
  width: 100%;
}

/* Common button combinations as utility classes */
.btn-gradient-outline-action {
  /* Combines gradient-outline-button + action-button styles */
  display: flex;
  width: 12.5rem; /* 200px */
  margin: var(--spacing-xl);
  align-items: center;
  justify-content: center;
}

/* Ensure all button text remains white */
[class*="btn-"],
[class*="-button"] {
  color: var(--white);
}

[class*="btn-"]:hover,
[class*="-button"]:hover {
  color: var(--white);
}

/* =================================================
        Step 4: Gallery, Image, and Card Styles
        -------------------------------------------------
        Group styles related to image galleries, cards,
        rounded borders, and gradients on images.
        ================================================= */
@media (max-width: 768px) {
  .education-services-container {
    max-width: 25rem; /* 400px */
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

.gallery-image {
  max-width: 100%;
  height: auto;
  border-radius: 0.625rem; /* 10px */
}

.image-wrapper {
  max-width: 62.5rem; /* 1000px */
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.card {
  background: var(--white);
  padding: var(--spacing-xxxl);
  border-radius: var(--border-radius-md);
  box-shadow: var(--shadow-medium);
  flex: 1;
  max-width: 18.75rem; /* 300px */
  transition: transform 0.3s ease;
}

.card h2 {
  font-size: 1.125rem; /* 18px */
  margin-bottom: var(--spacing-md);
}

.card p {
  font-size: 0.875rem; /* 14px */
  line-height: 1.5;
  margin: 0;
}

.card img {
  padding: 0.1875rem; /* 3px */
  border-radius: var(--border-radius-lg);
  background: linear-gradient(90deg, var(--secondary-gradient-start), var(--secondary-gradient-end));
  display: inline-block;
  height: 100%;
}

.gradient-border {
  padding: 0.1875rem; /* 3px */
  border-radius: var(--border-radius-lg);
  background: linear-gradient(90deg, var(--secondary-gradient-start), var(--secondary-gradient-end));
  display: inline-block;
  height: 100%;
}

.gradient-border img {
  display: block;
  border-radius: var(--border-radius-lg);
}

.gradient-border-synergasies {
  padding: 0.1875rem; /* 3px */
  border-radius: var(--border-radius-lg);
  background: linear-gradient(90deg, var(--secondary-gradient-start), var(--secondary-gradient-end));
  display: inline-block;
  height: 100%;
}

.gradient-border-synergasies img {
  display: block;
  border-radius: var(--border-radius-lg);
}

.gradient-card-border {
  position: relative;
  height: 100%;
}

.gradient-card-border img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* =================================================
        Step 5: Container and Layout Styles
        -------------------------------------------------
        Organize the core layout containers and positioning.
        ================================================= */
.background-container {
  position: relative;
  width: 100%;
  min-height: 100vh;
  background-color: var(--white);
  overflow: hidden;
}

.content {
  position: relative;
  z-index: 2;
  background: var(--white);
  border-radius: var(--border-radius-lg);
}

.inner-container {
  background-color: var(--text-primary);
  color: var(--white);
  border-radius: var(--border-radius-lg);
  padding: var(--spacing-lg);
}

.spacer {
  height: 3.125rem; /* 50px */
  width: 100%;
}

/* =================================================
        Step 6: Gradient Blobs and Miscellaneous Styles
        -------------------------------------------------
        Add decorative gradients and miscellaneous utility styles.
        ================================================= */
.hero-gradient {
  background: linear-gradient(180deg, transparent 0%, var(--hero-gradient-bg) 100%);
  padding: var(--spacing-xl) 0;
}

/* Gradient-like colored outline shadow for sections */
.gradient-outline-shadow {
  position: relative;
  z-index: 1;
}

.gradient-outline-shadow::before {
  content: '';
  position: absolute;
  inset: -0.125rem; /* -2px */
  border-radius: 0.125rem; /* 2px */
  pointer-events: none;
  z-index: -1;
  background: linear-gradient(90deg, rgba(224,102,255,0.7) 0%, rgba(102,102,255,0.7) 100%);
  filter: blur(0.625rem); /* 10px */
  opacity: 0.85;
}

.gradient-blob-left {
  position: absolute;
  width: 18.75rem; /* 300px */
  height: 18.75rem; /* 300px */
  left: 10%;
  top: 30%;
  transform: translateY(-50%);
  background: radial-gradient(circle at center,
      rgba(224, 102, 255, 0.4) 0%,
      rgba(224, 102, 255, 0.3) 40%,
      rgba(224, 102, 255, 0.2) 70%);
  filter: blur(3.75rem); /* 60px */
  z-index: 1;
}

.gradient-blob-right {
  position: absolute;
  width: 18.75rem; /* 300px */
  height: 18.75rem; /* 300px */
  right: 10%;
  top: 70%;
  transform: translateY(-50%);
  background: radial-gradient(circle at center,
  rgba(102, 102, 255, 0.4) 0%,
  rgba(102, 102, 255, 0.3) 40%,
  rgba(102, 102, 255, 0.2) 70%);
  filter: blur(3.75rem); /* 60px */
  z-index: 2;
}

/* =================================================
        Step 7: Responsive and Two-Image Card Styles
        -------------------------------------------------
        Adjust styles for smaller viewports and
        organize the new "two-images" card layout.
        ================================================= */
@media (max-width: 768px) {
  .card {
    width: 100%;
    max-width: 100%;
  }
}


/* Fix for expanded state nav links to align with logo */
@media (min-width: 992px) {
  .navbar-nav {
    height: 6.25rem; /* 100px - Match navbar height */
    display: flex;
    align-items: center;
  }
  
  .navbar-nav .nav-link {
    display: flex;
    align-items: center;
    height: 100%; /* Take full height of navbar */
  }
}

/* Navbar styling for collapsed state */
@media (max-width: 991.98px) {
  /* Navbar link underline position in collapsed state */
  .navbar-collapse .nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 0.125rem; /* 2px */
    bottom: -0.375rem; /* -6px */
    left: 50%;
    background: linear-gradient(90deg, var(--secondary-gradient-start), var(--secondary-gradient-end));
    transition: all 0.3s ease;
    transform: translateX(-50%);
  }

  /* Center the toggler button */
  .navbar-toggler {
    margin: 0 auto;
    display: block;
  }
  
  /* Style the collapsed menu */
  .navbar-collapse {
    text-align: center;
    padding: var(--spacing-md) 0;
    margin-top: var(--spacing-md);
    background-color: var(--light-bg);
    border-radius: var(--border-radius-sm);
    box-shadow: var(--shadow-light);
  }
  
  /* Style the nav links in collapsed state */
  .navbar-nav {
    margin: 0 auto; /* Center nav items */
  }
  
  /* Override Bootstrap's ms-auto in collapsed state */
  .navbar-collapse .navbar-nav.ms-auto {
    margin-left: auto;
    margin-right: auto;
  }
  
  .navbar-nav .nav-link {
    padding: 0.75rem 0;
    font-size: var(--font-size-md);
  }
  
  /* Add a subtle divider between nav items */
  .navbar-nav .nav-item:not(:last-child) .nav-link {
    border-bottom: 0.0625rem solid rgba(0, 0, 0, 0.1); /* 1px */
  }
  
  /* Center the logo in mobile view */
  .navbar-brand {
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 4.375rem; /* 70px - Match navbar height */
  }
}

/* Media query for smaller screens (max-width: 768px) */
@media (max-width: 768px) {
  /* Education services container */
  .education-services-container {
    max-width: 25rem; /* 400px */
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  /* Increase padding for main content on mobile screens */
  main.hero-gradient {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  /* Additional padding for container elements on mobile */
  main.hero-gradient .container {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  /* Card responsive styles */
  .card {
    width: 100%;
    max-width: 100%;
  }

  /* Make buttons in buttons-wrapper 10% larger on mobile */
  .buttons-wrapper .action-button {
    width: 13.75rem; /* 220px - 10% larger than 200px */
  }

  /* Typography responsive styles */
  h1.display-4,
  .display-4 {
    font-size: 2.2rem;
    line-height: 1.1;
    margin-bottom: 0;
    letter-spacing: 0.02rem;
  }

  h2.display-5,
  .display-5 {
    font-size: 2.5rem;
    line-height: 1.1;
    margin-bottom: var(--spacing-sm);
  }

  p.display-6-gray,
  .display-6-gray {
    font-size: var(--font-size-lg);
    line-height: 1.1;
    font-weight: 400;
  }
  
  /* Responsive styles for all button variants */
  .btn-base,
  .gradient-button, 
  .gradient-outline-button, 
  .action-button,
  .hero-gradient-button {
    font-size: var(--font-size-xs);
    padding: var(--spacing-sm) var(--spacing-md);
    line-height: 1.2;
  }
  
  /* Make the break between lines less prominent in all buttons */
  .btn-base br,
  .gradient-button br,
  .gradient-outline-button br,
  .action-button br,
  .hero-gradient-button br {
    display: inline;
    content: " ";
  }

  /* Hide only the <p> elements within the education services section */
  #education-services .card p {
    display: none;
  }

  /* Enlarge the <strong> text within the <h2> elements inside the cards */
  #education-services .card h2 strong {
    font-size: 1.5rem;
  }

  .btn-responsive {
    /* Override Bootstrap's px-4 on small screens */
    margin-left: 7.0rem;
    margin-right: 7.0rem;
    padding-left: var(--spacing-sm);
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    padding-right: var(--spacing-sm);
    font-size: var(--font-size-xs);
  }
  
  /* Additional responsive styles for combined button classes */
  .gradient-outline-button.action-button.top-button {
    font-size: var(--font-size-xs);
    padding: var(--spacing-sm) 0.75rem;
    line-height: 1.2;
  }
  
  /* If display-7 is used for button text */
  .display-7 {
    font-size: 1rem;
    line-height: 1.2;
  }

  .gradient-card-border {
    position: relative;
    height: auto;
    padding-top: 75%; /* Aspect ratio technique */
  }

  .gradient-card-border img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .card ul {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-left: 0;
    margin: 0;
  }

  .card ul li {
    text-align: center;
    list-style-position: inside;
    /* This keeps the bullets and centers them */
    width: 100%;
    margin-bottom: 0.0rem;
  }

}

/* Media query for very small screens (max-width: 480px) */
@media (max-width: 480px) {
  h1.display-4,
  .display-4 {
    font-size: 1.8rem;
    letter-spacing: 0;
  }
}

/* Consistent width for card text content */
.card-text-content {
  max-width: 20rem; /* 320px */
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

/* Smaller font size for contact links in contact section */
.contact-link-small {
  font-size: var(--font-size-sm);
  padding-top: var(--spacing-xs);
  padding-bottom: var(--spacing-xs);
}

/* Allow contact buttons to wrap text on mobile */
@media (max-width: 768px) {
  .hero-gradient-button.d-block {
    white-space: normal;
    word-wrap: break-word;
    line-height: 1.3;
    padding-top: var(--spacing-sm);
    padding-bottom: var(--spacing-sm);
    font-size: var(--font-size-sm) !important;
  }
}

/* Medium screen improvements for contact page */
@media (min-width: 768px) and (max-width: 991.98px) {
  /* Ensure email button doesn't overflow */
  .hero-gradient-button.text-break {
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: break-word;
  }
  
  /* Better spacing for contact info columns */
  .inner-container .col-md-6 {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }
  
  /* Adjust font sizes for better readability */
  .inner-container .fs-6 {
    font-size: 0.9rem !important;
  }
  
  /* Ensure buttons fit within their containers */
  .inner-container .btn {
    max-width: 100%;
  }
}

/* Ensure text-break utility works properly */
.text-break {
  word-wrap: break-word !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
}

/* Improve touch targets for mobile */
@media (max-width: 768px) {
  /* Ensure all interactive elements have minimum 44px height */
  .btn, 
  .nav-link,
  a.action-button,
  .hero-gradient-button {
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  /* Increase navbar toggle button size */
  .navbar-toggler {
    padding: var(--spacing-md);
    min-height: 48px;
    min-width: 48px;
  }
  
  /* Increase spacing between nav links on mobile */
  .navbar-nav .nav-link {
    padding: var(--spacing-md) var(--spacing-lg);
    min-height: 48px;
  }
  
  /* Footer links with better touch targets */
  footer a {
    display: inline-block;
    padding: var(--spacing-xs) 0;
    min-height: 44px;
    line-height: 44px;
  }
}



/* Enhanced shadow effect for elements */
.shadow-xl {
  box-shadow: 0 0.1rem 0rem rgba(0, 10, 50, 0.5);
}

.shadow-xl-about {
  box-shadow: var(--shadow-heavy);
}

/* Reduce font size by 10% in the CTA section */
.gradient-outline-shadow .h5,
.gradient-outline-shadow h3.h5 {
  font-size: 1.125rem; /* 90% of 1.25rem (default h5 size) */
}

.gradient-outline-shadow .fs-5 {
  font-size: 1.125rem; /* 90% of 1.25rem (default fs-5 size) */
}

/* Footer specific text color to maintain white text on dark background */
footer,
footer * {
  color: var(--white);
}

/* Override Bootstrap text color utilities inside dark elements */
.btn-base .text-dark,
.gradient-button .text-dark,
.gradient-outline-button .text-dark,
.action-button .text-dark,
.hero-gradient-button .text-dark,
.btn-dark .text-dark,
.inner-container .text-dark {
  color: var(--white) !important;
}