/*--------------------------------------------------------------
# Font & Color Variables
--------------------------------------------------------------*/
@font-face {
    font-family: 'Roboto-Fallback';
    src: local('Arial');
    ascent-override: 93%;
    descent-override: 22%;
    line-gap-override: 0%;
    size-adjust: 100%;
}
/* Fonts */

:root {
  /* Keep it simple: only define your primary font name */
  --default-font: "Roboto", sans-serif;
}

/* Global Colors - The following color variables are used throughout the website. Updating them here will change the color scheme of the entire website */
:root { 
  --background-color: #05071e; /* Background color for the entire website, including individual sections */
  --default-color: #e8e7f7; /* Default color used for the majority of the text content across the entire website */
  --heading-color: #e4e6ee; /* Color for headings, subheadings and title throughout the website */
  --accent-color: #524dd3; /* Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */
  --surface-color: #131428; /* The surface color is used as a background of boxed elements within sections, such as cards, icon boxes, or other elements that require a visual separation from the global background. */
  --contrast-color: #dfdeea; /* Contrast color for text, ensuring readability against backgrounds of accent, heading, or default colors. */
  --alert-color: #ff4d4d;
  --success-color:#079a07;
}

/* Nav Menu Colors - The following color variables are used specifically for the navigation menu. They are separate from the global colors to allow for more customization options */
:root {
   /* containers */
    --container-normal: 1100px;
    --container-wide: 1400px;
    --container-narrow: 700px;
    /* font weights */
    --weight-normal: 300;
    --weight-bold: 600;
}
/* Smooth scroll */

/* Color Presets - These classes override global colors when applied to any section or element, providing reuse of the sam color scheme. */
.light-bg {
  --background-color: #0c114a;
}

.dark-bg {
  --background-color: #01020e;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; 
}
html {
    scroll-behavior: smooth;
    font-size: 16px; /* ensure 1 rem = 16px */
    scrollbar-gutter: stable; /* Stops the scrollbar from shifting the body layout */
}


/*--------------------------------------------------------------
# General Styling & Shared Classes
--------------------------------------------------------------*/
/*
body {
    -webkit-font-smoothing: antialiased;
    font-family: 'Roboto', 'Roboto-Fallback', Arial, sans-serif;
    letter-spacing: 0.5px;
    color: var(--default-color);
    background-color: var(--background-color);
    line-height: 1.6;
    font-weight: var(--weight-normal);
}*/

/* Apply it directly to the body with an instant system font fallback */
body {
  font-family: "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
}


a {
  color: var(--accent-color);
  text-decoration: none;
  transition: 0.3s;
}

a:hover {
  color: color-mix(in srgb, var(--accent-color), transparent 25%);
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--heading-color);
  font-family: var(--default-font);
}
p{
  font-size: 1.25rem;
}
h4{
  font-size: 1.5rem;
}

ul {
    list-style: none;
    padding:0;
}
li{
  font-size: 1.25rem;
  font-weight: var(--weight-normal);
}

/*
li {
  display: flex;
  align-items: center; 
}
*/

/*---------------------------------------------*/
/*                 Grid System                 */
/*---------------------------------------------*/
img {
    max-width: 100%;
    height: auto;
    display: block;
}
.grid {
    display: grid;
    gap: 2rem;
     /* align-items: center;
  align-items: start;*/
    /* Aligns all grid items to the top */
    align-items: stretch;
}
.col-1 {
    grid-template-columns: 1fr;
}
.col-2 {
    grid-template-columns: repeat(2, 1fr);
}
.col-3 {
    grid-template-columns: repeat(3, 1fr);
}
.col-4 {
    grid-template-columns: repeat(4, 1fr);
}
.col-6 {
    grid-template-columns: repeat(6, 1fr);
}
.col-auto {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
/* buttons */
.button-holder {
display: flex;
justify-content: space-evenly;
margin-top: 100px;
}

.button-holder .btn {
  padding: 15px 30px;
  font-weight:var(--weight-bold);
  border-radius: 50px;
  text-decoration: none;
  transition: all 0.3s ease;
  font-size: 1.25rem;
}

.button-holder .btn.btn-primary {
  background: var(--accent-color);
  color: var(--contrast-color);
  border: 2px solid var(--accent-color);
}

.button-holder .btn.btn-primary:hover {
  background: color-mix(in srgb, var(--accent-color), black 10%);
  border-color: color-mix(in srgb, var(--accent-color), black 10%);
  transform: translateY(-2px);
  cursor: pointer;
}

.button-holder .btn.btn-outline {
  background: transparent;
  color: var(--accent-color);
  border: 2px solid var(--accent-color);
}

.button-holder .btn.btn-outline:hover {
  background: var(--accent-color);
  color: var(--contrast-color);
  transform: translateY(-2px);
}


i {
    color: var(--accent);
}

.card {
  display: flex;
  flex-direction: column;
  padding: 1.5rem 0.5rem; /* REMOVE OR COMMENT THIS OUT */
  
  overflow: hidden;          /* Keeps the image corners rounded to match the card */
  cursor: pointer;
  background: var(--surface-color);
  border-radius: 20px;
  text-align: center;
  position: relative;
  height: 100%;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
  transition: all 0.3s ease;
}

/*
.card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  border-color: color-mix(in srgb, var(--accent-color), transparent 70%);
}



/* =========================================================================
   Lightweight Scroll Animation Library
   ========================================================================= */

/* 1. Base hidden state for all animated elements */
.fade-in, .slide-up, .slide-left, .slide-right, .zoom-out {
    opacity: 0;
    transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), 
                transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: transform, opacity; /* Hints the browser to use GPU acceleration */
}

/* 2. Individual spatial offsets before reveal */
.slide-up    { transform: translateY(40px); }
.slide-left  { transform: translateX(-40px); }
.slide-right { transform: translateX(40px); }
.zoom-out    { transform: scale(0.92); }

/* 3. Global active state triggered cleanly by your JavaScript Observer */
.fade-in.visible,
.slide-up.visible,
.slide-left.visible,
.slide-right.visible,
.zoom-out.visible {
    opacity: 1;
    transform: translateY(0) translateX(0) scale(1);
}

/* 4. Staggered Delay Utilities (Great for lists or grids of cards!) */
.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }
.delay-5 { transition-delay: 0.5s; }
.delay-6 { transition-delay: 0.6s; }


/*------------------------------*/
/*      Structure               */
/*------------------------------*/
.section {
    margin: 0;
    padding: 7rem 0;
}


.container {
    max-width: var(--container-normal);
    margin: 0 auto;
    padding: 0 1.5rem;
}

.container-lg {
    max-width: var(--container-wide);
    margin: 0 auto;
    padding: 0 1.5rem;
}

.container-sm {
    max-width: var(--container-narrow);
    margin: 0 auto;
    padding: 0 1.5rem;
}
.container,
.container-lg,
.container-sm{
    clear: both;
    overflow: auto;
    /*This forces the container to respect the height of elements inside it */
}

/*------------------------------------------*/
/*           Section Header                 */
/*------------------------------------------*/
.section-header {
    max-width: 750px;
    margin: 0 auto;
    margin-bottom: 4rem;
}
.section-header h2{
    text-align: center;
    padding-top: 2rem;
    padding: 0;
    font-size: 1rem;
    margin-bottom: 1rem;
    font-weight: var(--weight-bold);
    letter-spacing: .5rem;
    color: var(--accent-color);
    
}
.section-header h3 {
    text-align: center;
    padding: 0;
    font-size: 2rem;

}
.section-header .heading-border {
    width: 64px;
    height: 4px;
    background: var(--accent-color);
    margin: 1rem auto;
    padding:0;
}

/*------------------------------------------*/
/*               Navbar                     */
/*------------------------------------------*/

header .navbar{
  /*color: #e8e7f7;
  background-color: #05071e;;*/
  padding: 10px 30px; 
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1000;
}

.navbar {
  /*transition: all 0.5s ease-in-out; */
  border: 2px solid var(--accent-color);
  border-radius: 50px;
  margin: 10px 20px;
  box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1);
}

.navbar.navbar-scroll {
    background-color: rgba(54, 48, 87, 0.7);
    backdrop-filter: blur(10px);
}

.navbar-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%; /* Ensures the flex box spans the entire width of the capsule */
}

.navbar img {
    max-width: 100%;  
    width: 100px;     
    height: auto;     
    display: block; /* Removes any default inline bottom whitespace under the logo */
}
.navbar img:hover{
  cursor:pointer;
}

.navbar .main-menu-list {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.navbar a {
    color: var(--default-color);
    font-weight: var(--weight-bold);
    font-size: 1rem;
}

.navbar a:hover {
    opacity: 0.8;
}

/* Base styles for the Pill Button */
.nav-pill-btn,
.nav-pill-btn:link,
.nav-pill-btn:visited {
    display: inline-block;
    background-color: var(--accent-color) !important;
    color: var(--default-color) !important;
    /* Forces the text to stay black */

    padding: 0.5rem 1.25rem;
    border-radius: 50px;
    text-decoration: none;
    font-weight: var(--weight-bold);
    /*transition: transform 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
    box-shadow: 0 6px 12px rgba(129, 35, 37, 0.048);*/
     border: 2px solid var(--accent-color);
}

/* Hover Effect */
.nav-pill-btn:hover {
    background-color: var(--accent-color) !important;
    color: var(--dark-color) !important;
    /* Keeps it black on hover
    transform: translateY(-1px);
    border: 2px solid var(--accent-color); */
}

/* =========================================================================
   Navbar Active Links Configuration
   ========================================================================= */

/* 1. Base Active state for normal text links (1 through 5) */
.navbar .main-menu-list a.active {
    opacity: 1;
    border-bottom: 2px solid var(--default-color);
}

/* 2. Remove the underline effect entirely from the Pill Button when it's active */
.navbar .main-menu-list a.nav-pill-btn.active {
    /* border-bottom: none !important; Strips the underline cleanly */
    opacity: 1;                     /* Maintains full visibility */
    
    /* Optional: Add a distinct active visual state for your button if desired */
    background-color: var(--background-color) !important; 
    /* color: var(--background-color) !important; */
    border: 2px solid var(--accent-color);
}


/*------------------------------------------*/
/*             Hero                         */
/*------------------------------------------*/

.hero {
  position: relative;
  overflow: hidden;
  /*background: linear-gradient(135deg, var(--background-color) 0%, color-mix(in srgb, var(--accent-color), transparent 95%) 100%);
  padding: 150px 0;  */
}


.hero .grid.col-2 {

  align-items: center; /* Vertically centers both columns relative to each other */
}

.hero .hero-content h1 {
  font-size: 3.5rem;
  font-weight: var(--weight-bold);
  line-height: 1.2;
  margin-bottom: 1.5rem;
  text-align: center;
  padding-top:3rem;
}
.hero .hero-content p {
  font-size: 1.5rem;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  margin-bottom: 2rem;
  padding-top:50px;
  line-height: 1.6;
  text-align: center;
  letter-spacing: .5rem;
}

.hero .hero-buttons {
  display: flex;
  gap: 1rem;
  margin-bottom: 3rem;
  flex-wrap: wrap;
}

.hero-img {
    position: relative; /* Anchor for the canvas */
    display: inline-block;
    width: 100%;
    cursor: crosshair;
}

.hero-img img {
    display: block;
    width: 100%;
    height: auto;
}

#starCanvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* Allows users to click "through" the stars to the image */
    z-index: 10; /* Sits right above the image */
}


/* =========================================================================
   Responsive Video Modal Styles
   ========================================================================= */

/* The backdrop layout - Keep as you have it */
.modal {
    display: none; 
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(21, 18, 50, 0.8); 
    z-index: 9999; 
    justify-content: center; 
    align-items: center; 
}

/* The container holding the video wrapper */
.modal__content {
    position: relative;
    background-color: var(--background-color);
    padding: 10px;
    border-radius: 8px;
    width: 100%;          /* Forces fluid scale on small screens */
    max-width: 760px;     /* Sets the maximum size allowed on large screens */
    margin: 0 20px;       /* Adds a safe margin on the left/right of mobile screens */
    box-sizing: border-box;
}

/* Modern aspect-ratio scaling for responsive video iframes */
.modal__content iframe {
    width: 100% !important;   /* Overrides the hardcoded width="560" in HTML */
    height: auto !important;  /* Overrides the hardcoded height="315" in HTML */
    aspect-ratio: 16 / 9;     /* Maintains perfect widescreen dimensions automatically */
    display: block;
    border-radius: 4px;
}

/* Close button positioning adjustments */
.modal__close-button {
    position: absolute;
    top: -45px;
    right: 5px; /* Nudges it inwards slightly on mobile layouts */
    color: var(--default-color);
    font-size: 2.5rem;
    cursor: pointer;
    line-height: 1;
}

/*------------------------------------------*/
/*            About                         */
/*------------------------------------------*/
.about .about-content h4 {
  font-size: 2.25rem;
  font-weight: 700;
  margin-bottom: 1rem;
}

.about .about-content p {
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  margin-bottom: 1rem;
}
.icon-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.icon-list li {
  display: flex;
  align-items: flex-start; /* Keeps icon aligned with the first line of text */
  margin-bottom: 2px;     /* Slightly increased for better mobile legibility */
}

/* Target the Boxicon inside the list element directly */
.icon-list li .bx {
  flex-shrink: 0;
  margin-right: 5px;      /* Consistent spacing between icon and text across all screens */
  display: inline-flex;    /* Forces Boxicon's internal font container to center itself */
  align-items: center;     
  height: 1.5rem;          /* Matches the natural line-height of your body/span text */
  color: var(--accent-color);
}

/* Ensure the container hides any overflowing parts of the image during the effect */
.about-img {
  overflow: hidden;
  display: inline-block; /* Keeps the container wrapped tightly around the image */
  border-radius: 8px;
}

/* Base state of the image with a smooth transition definition */
.about-img img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.5s ease-in-out; /* Controls the duration and smoothness */
}

/* Hover state: expands by 10% (scale 1.1) and twists (rotates 10 degrees) */
.about-img:hover img {
  transform: scale(1.05) rotate(5deg);
  cursor: pointer;
}

/* Target the text wrapper */
.icon-list .list-txt {
  line-height: 1.5;        /* Explicit line-height ensures both mobile and laptop render the baseline identically */
}

/*. card speech-bubble */
section.thought{
  padding:1rem 0;
}
.speech-bubble{
    padding: 2rem;
}
.speech-bubble p {
    font-size: 1.25rem;
    font-weight: var(--weight-normal);
    letter-spacing: 0.25rem;
    font-style: italic;
   
}
.speech-bubble i {
    color:var(--accent-color);
    padding: 0 5px;
}

/*--------------------------------------------------------------
# Projects Section
--------------------------------------------------------------*/
 
.projects .card{
  padding: 2rem;
}
.projects .card h4{
  margin:1rem 0;
}
.projects ul li,
.projects .card p{
  font-size: 1.1rem;
  text-align: left;
}

.projects .card-img-wrap {
    width: 100%;
    overflow: hidden;   /* Keeps zoom effect clipped inside the frame */
    border-radius: 8px;
    margin-bottom: 20px;
}

.projects .card-img-wrap {
    height: 250px; /* Only locks the frame height for the service cards */
}

.projects .card-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Only crops the service card images */
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.projects .card-img-wrap:hover img {
    transform: scale(1.05);
}


/*--------------------------------------------------------------
# Services Section
--------------------------------------------------------------*/
.services .card:hover .service-icon {
  transform: scale(1.1);
}

.services .service-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 25px;
  background: linear-gradient(135deg, var(--accent-color), color-mix(in srgb, var(--accent-color), #8b5cf6 30%));
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.services .service-icon i {
  font-size: 7rem;
  color: var(--contrast-color);
}

.services h4 {
  margin-bottom: 15px;
  font-weight: var(--weight-bold);
}

.services p {
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  line-height: 1.6;
  margin-bottom: 25px;
}

/*------------------------------*/
/*     gallery     */
/*------------------------------*/

.gallery .card{
    padding:0;
}

/* 1. Make the container the relative anchor for the text and hide overflow */
.gallery .card .img-holder {
  position: relative;
  overflow: hidden;
}

/* 2. Your existing zoom effect 
.gallery .card .img-holder img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  }
*/

  .img-holder img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1; /* Forces all your experiment thumbnails into perfect uniform squares */
    object-fit: cover;   /* Crops images neatly so they fill the square without distorting */
    display: block;
    transition: transform 0.3s ease; /* Smooth zoom transition */
}

.gallery .card .img-holder:hover img {
  transform: scale(1.1);
}

/* 3. Create the text overlay using the image's alt attribute */
.gallery .card .img-holder::after {
  content: attr(data-title); /* Reads custom data attribute or alt text */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  
  /* Styling the overlay */
  background: rgba(63, 34, 84, 0.7); /* Semi-transparent dark background */
  color: var(--default-color);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  padding: 15px;
  box-sizing: border-box;
  text-align: center;
  
  /* Hidden by default */
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none; /* Allows hover to still register on the container */
}

/* 4. Reveal the text overlay on hover */
.gallery .card .img-holder:hover::after {
  opacity: 1;
}

/*------------------------------*/
/*     contact Section            */
/*------------------------------*/

.contact li{
    padding: 1rem 0;
    font-size: 1.25rem;
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
  max-width: 500px; /* Matches your subscription form width */
  margin: 0 auto;
  box-sizing: border-box;
}

/* Form group to stack labels and inputs vertically */
.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
}

/* Optional label styling for clarity */
.contact-label {
  font-size: 0.95rem;
}

/* Input and Textarea styling following your brand rules */
.contact-input {
  width: 100%;
  padding: 12px 20px;
  font-size: 1rem;
  border: 1px solid var(--dark-color);
  border-radius: 8px; /* Smooth curves on all sides for a standard layout */
  outline: none;
  box-sizing: border-box;
}

/* Specific styling for the textarea to allow vertical resizing */
.contact-textarea {
  resize: vertical;
  font-family: inherit; /* Ensures consistent font styling */
}


.contact-form .button-holder {
margin-top: 1rem;
}

.contact-email-link {
    color: var(--default-color);
    text-decoration: underline;
    transition: color 0.2s ease;
}
.contact-email-link:hover {
    color: var(--accent-color); /* Changes color on hover to signal interactivity */
}

.social-links {
  display: flex;
  align-items: center;
  justify-content: center;  /*Centres the icons horizontally */
   margin: 1.5rem auto;     /* auto helps block layout centering */
  gap: 1rem;
  padding: 0;
  width: 100%;             /* Ensures it takes up the full width of the parent */
}

/* Individual link item styling */
.social-links a {
  color: var(--dark-color); /* Classy, neutral dark grey primary colour */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: color 0.3s ease, transform 0.3s ease; /* Smooth hover transition */
}

/* Individual Icon adjustments */
.social-links a i {
  display: block;      /* Strips away default font baseline padding */
}

/* Hover Effects */
.social-links a:hover {
  transform: translateY(-3px); /* Subtle, elegant lift effect */
}

/* Brand-specific hover colours */
.social-links a .bxl-facebook-square {
  color: #1877F2;      /* Official Facebook Blue */
}

.social-links a .bxl-instagram {
  color: #E1306C;      /* Official Instagram Pink/Red */
}

.social-links a .bxl-linkedin-square {
  color: #0077B5;      /* Official LinkedIn Blue */
}

.social-links a .bxl-youtube { 
    color: #FF0000; /* Official YouTube Red */ 
}


/* PHP Email Form Messages
------------------------------*/
.my-1{
  margin: 1rem 0;
}
.loading, 
.error-message, 
.sent-message {
  
  display: none;
    /* width: 100%;       Takes up the full width 
  flex-basis: 100%;  /* Forces Flexbox wraps to drop to a new line */
}

/* Styles the input only after the user interacts with it or tries to submit the form */
.subscribe-input:user-invalid, .contact-input:user-invalid {
  border: 3px solid var(--alert-color);
}


/* Update your d-block rule to support this layout */
.d-block {
  display: block !important;
}

.subscribe-form {
  display: flex;
  flex-wrap: wrap; /* Allows items to drop to the next line */
 /* gap: 10px;       /* Spacing between the input, button, and messages */
}

.form-messages {
  flex-basis: 100%; /* Forces the message container to take up its own full line */
  margin-top: 10px;  /* Adds clean spacing below the input/button row */
}

.php-email-form .error-message {
  display: none;
  background: var(--alert-color);
  color: var(--default-color);
  text-align: center;
  padding: 15px;
  margin-bottom: 24px;
  font-weight: var(--weight-bold);
}

.php-email-form .sent-message {
  display: none;
  color: var(--default-color);
  background: var(--success-color);
  text-align: center;
  padding: 15px;
  margin-bottom: 24px;
  font-weight: var(--weight-bold);
}

.php-email-form .loading {
  display: none;
  background: var(--background-color);
  text-align: center;
  padding: 15px;
  margin-bottom: 24px;
}

.php-email-form .loading:before {
  content: "";
  display: inline-block;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  margin: 0 10px -6px 0;
  border: 3px solid var(--default-color);
  border-top-color: var(--surface-color);
  animation: php-email-form-loading 1s linear infinite;
}

@keyframes php-email-form-loading {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* Reserves structural space for the map and contains the zoom boundaries */
.map-wrapper {
  width: 100%;
  aspect-ratio: 4 / 3; /* Matches the 600x450 scale proportion */
  overflow: hidden;    /* CRITICAL: This clips the map as it expands so it doesn't spill out */
  border-radius: 8px;
  margin-top: 2rem;
  
  /* Optional: Adds a smooth border-radius clipping fix for older Safari builds */
  isolation: isolate; 
}

/* Base state of the map iframe */
.map-wrapper iframe {
  width: 100% !important;
  height: 100% !important;
  display: block;         
  box-sizing: border-box; 
  
  /* Smoothly animates the scaling transform over 0.4 seconds */
  transition: transform 0.4s ease-in-out; 
}

/* Hover state: Enlarges the map inside the wrapper container by 8% */
.map-wrapper:hover iframe {
  transform: scale(1.2); 
}



/* footer */
.footer{
    padding: 2rem 0;
    background-color: var(--surface-color);
}
.footer .copyright p{
  font-weight: var(--weight-bold);
  text-align: center;
  font-size: 1.1rem;
}
.footer .credit p{
    text-align: center;
    line-height: 1;
    margin-bottom: 4px; /* Adjust this number down to decrease space */
    margin-top: 0px;    /* Setting one side to 0 avoids layout collapse issues */
    font-size: .8rem;
}

.footer .credit p:nth-child(2) {
  font-style: italic;
}



@media (max-width: 768px) {
    /* Grouping these together makes it highly readable */
    .col-2,
    .col-3,
    .col-4 {
        grid-template-columns: 1fr;
    }

    .col-6 {
        grid-template-columns: repeat(2, 1fr);
    }

.container, .container-lg, .container-sm {
    padding: 0 0.25rem;
    width: 100%;
}

    .section {
        padding: 3rem 0;
    }

    header.section-header {
        padding: 0.5rem 0;
        margin-bottom: 1rem;
    }
    .navbar {
        position: static;
        /* Overrides 'fixed' and restores normal scrolling */
    }

    .navbar .main-menu-items {
        display: none !important;
    }

    .navbar-flex {
        display: flex;
        justify-content: center;
        /* Horizontally centers the logo */
        align-items: center;
        /* Vertically centers the logo */
        width: 100%;
        padding: 3px 0;
        /* Optional padding adjustment for mobile */
    }

    .navbar-flex a[aria-label="Logo"] {
        display: block;
        margin: 0 auto;
        /* Fail-safe centering backup */
    }

    .navbar-flex img {
        max-width: 400px;
    }

    .card {
        padding: 1rem;
        margin: 0 1rem;
    }

    .services .service-icon {
        width: 70px;
        height: 70px;
        margin-bottom: 20px;
    }

    .services .service-icon i {
        font-size: 32px;
    }
    .speech-bubble {
        padding: 1rem;
    }
    .button-holder .btn {
        padding: 10px;
        font-weight: var(--weight-bold);
        font-size: 1.1rem;
    }
    #starCanvas {
        display: none !important;
    }
    .hero .hero-content {
        margin: 5rem 0;
    }
    .hero .hero-content h1 {
        font-size: 2.5rem;
    }

    .hero .hero-content p {
        font-size: 1rem;
    }
    .about .about-content {
        padding: 1rem;
    }
    .about .about-img {
        padding: 1rem 2rem;
    }
    .speech-bubble p {
        font-size: 1rem;
    }
    .projects p {
        text-align: left;
    }
    .contact-content {
        margin: 0 2rem;
    }
    .map-wrapper {
        /* Decreases width to leave 20px of space on each side */
        width: calc(100% - 40px);

        /* Centers the map on the mobile screen */
        margin-left: auto;
        margin-right: auto;

        /* Changes the aspect ratio to be taller and easier to scroll past on phones */
        aspect-ratio: 1 / 1;
    }
}
/*********************************/
/*      Policy Page              */
/*********************************/

.privacy .section-header h2{
color: var(--default-color);
font-size:1.5rem;
}

.privacy .section-header h3{
  text-align: right;
  font-size: 1rem;
  font-weight: var(--weight-normal);
}
.privacy .policy-content h3{
  margin-top:2rem;
  text-decoration: underline;
}
.privacy .policy-content p.revised{
  font-size: 1rem;
  text-align: right;
 
}
.privacy .policy-content p{
  margin-bottom:0.5rem;
  padding: 0.25rem 1.5rem;
}
.privacy .policy-content i{
  padding-right: 5px;
}