/* ----- Gallery item rounded corners and hover scaling ----- */

.mbr-gallery-item {
  position: relative;
  border-radius: 20px;
}

.mbr-gallery-item > a {
  display: block; 
  text-decoration: none; 
  border-radius: 22px;
  transition: transform 0.3s ease, border-color 0.3s ease !important; 
  overflow: hidden; 
  border: 4px solid transparent; 
  box-sizing: border-box; 
  position: relative; 
}

.mbr-gallery-item img {
  display: block;
  width: 100%;
  border-radius: 20px 20px 0 0;
  transition: transform 0.3s ease;
}

.mbr-gallery-title {
  position: relative;
  z-index: 2;
  background-color: rgba(0,0,0,0.7);
  color: #fff;
  padding: 10px 12px;
  font-size: 1rem;
  border-bottom-left-radius: 20px;
  border-bottom-right-radius: 20px;
  margin: 0;
  box-sizing: border-box;
}

.mbr-gallery-item:hover > a {
  transform: scale(1.05);
  border-color: #faaf40; 
}

/*
================================================================================
  FIX: PREVENT GALLERY TITLE FROM DISAPPEARING ON HOVER
================================================================================
*/
.mbr-gallery-item > a:hover .mbr-gallery-title {
  background-color: rgba(0,0,0,0.7) !important;
}

/*
================================================================================
  DEFINITIVE FIX: REMOVE THE DARK HOVER OVERLAY
================================================================================
*/
.mbr-gallery-item a .icon-focus {
  display: none !important;
}

/* ----- Selector buttons styling ----- */

.mbr-gallery-filter li {
  display: inline-block;
  margin-right: 5px;
  margin-bottom: 5px;
}

.mbr-gallery-filter li a {
  border-radius: 5px !important;
  padding: 6px 12px;
  display: inline-block;
  background-color: #f0f0f0;
  color: #333;
  text-decoration: none;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.mbr-gallery-filter li a:hover,
.mbr-gallery-filter li.active a {
  border-radius: 5px !important;
  background-color: #33333300;
  color: #fff;
}

.mbr-gallery-filter ul li {
  border-radius: 15px; /* This creates the rounded corners */
  padding-left: 15px;  /* Adds some space on the sides */
  padding-right: 15px; /* Adds some space on the sides */
}

/* ----- Nudge Slider Arrows for Centering ----- */

.mbr-slider .carousel-control .icon-prev {
  transform: translateX(-9px);
}

.mbr-slider .carousel-control .icon-next {
  transform: translateX(-7px);
}

/*
================================================================================
          CONSOLIDATED HOMEPAGE SLIDER ARROW LOGIC
This section handles the positioning and visibility of the down arrow
to avoid CSS conflicts.
================================================================================
*/

/* --- Step 1: Define the arrow's POSITION and STYLE --- */
/* This rule is now ONLY for positioning, not for displaying. */
section#slider-ae.mbr-slider .mbr-arrow.mbr-arrow-floating {
    position: absolute !important;
    bottom: 40px !important;
    right: 1.75rem !important;
    left: auto !important;
    width: auto !important;
    text-align: right !important;
    transform: none !important;
    z-index: 999 !important;
}

/* --- Step 2: Define VISIBILITY based on screen size --- */

/* For DESKTOP screens (768px and wider), SHOW the arrow */
@media (min-width: 768px) {
  section#slider-ae.mbr-slider .mbr-arrow.mbr-arrow-floating {
    display: block !important;
  }
}

/* For MOBILE screens (767px and narrower), HIDE the arrow AND slider controls */
@media (max-width: 767px) {
  #slider-ae .carousel-control {
    display: none;
  }
  section#slider-ae.mbr-slider .mbr-arrow.mbr-arrow-floating {
    display: none !important;
  }
}

/* --- Top Arrow Icon Centering & Animation --- */
section#slider-ae .mbr-arrow a {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

#slider-ae .mbr-arrow.mbr-arrow-floating a {
    animation: float-arrow 1.5s infinite;
}

@keyframes float-arrow {
  0% { transform: translateY(0); }
  50% { transform: translateY(15px); }
  100% { translateY(0); }
}

/*
================================================================================
          GLOBAL SITE STYLES
================================================================================
*/

/* --- Ensure scroll-to-top arrow aligns with the homepage down arrow --- */
.mbr-arrow-up {
    right: 1.75rem !important;
}

/* --- Ensure navigation menu appears above other content --- */
#menu-af {
  position: relative;
  z-index: 1000;
}

/*
================================================================================
          MOBILE-ONLY HOMEPAGE FONT SIZE & ELEMENT TWEAKS
================================================================================
*/
@media (max-width: 767px) {

  /* --- 1. Slider (Carousel) Main Title on Mobile --- */
  #slider-ae .mbr-section-title.display-1 {
    font-size: 2.2rem !important; /* Tweak this value for mobile */
  }

  /* --- 2. Slider (Carousel) Lead Paragraph on Mobile --- */
  #slider-ae .mbr-section-lead.lead {
    font-size: 1.1rem !important; /* Tweak this value for mobile */
  }

  /* --- 3. "Portfolio" Section Title on Mobile --- */
  #header3-ag .mbr-section-title.display-2 {
    font-size: 2rem !important; /* Tweak this value for mobile */
  }

  /* --- 4. Portfolio Lead Paragraph on Mobile (Set to 12px) --- */
  #content2-aj .lead {
    font-size: 0.50rem !important; 
    line-height: 1.35 !important; 
  }

  /* --- HIDE THE PORTFOLIO FILTER BAR ON MOBILE --- */
  /* This is the definitive fix for the button layout issues. */
  #gallery4-6r .mbr-gallery-filter {
    display: none !important;
  }

/* ---GALLERY GUTTER SPACING CONTROL --- */
/* This selector targets the gallery items and overrides their default padding */
#gallery4-6r .mbr-gallery-item--p1 {
  padding: 0.25rem; /* The theme's default is likely 0.5rem or 1rem. Adjust this value as needed. */
}

/* --- DISABLE GALLERY ITEM HOVER EFFECTS ON MOBILE --- */
  .mbr-gallery-item:hover > a {
    transform: none !important; /* Prevents the zoom effect */
    border-color: transparent !important; /* Prevents the orange highlight */
  }

}

/* This new rule prevents the image INSIDE the frame from zooming */
  .mbr-gallery-item:hover > a img {
    transform: none !important;
  }

  /* --- CONTACT PAGE: Reduce Title Size on Mobile --- */
  #msg-box5-1a .mbr-section-title.display-2 {
    font-size: 1.75rem !important; /* Adjust this value as needed */
  }

/* =================================================================== */
/*  START: Custom CSS for Slider Dot Microanimation                    */
/*  This code can be added to your custom stylesheet.                  */
/* =================================================================== */

/*
 *  1. Base Style for Individual Dots
 *  This overrides Bootstrap's default rectangular indicators and turns
 *  them into small, semi-transparent circles.
*/
.carousel-indicators li {
    width: 10px;
    height: 10px;
    margin: 0 6px; /* Adjusts spacing between dots */
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 50%; /* This is crucial for making the dots circular */
    border: none; /* Removes any default borders */
    cursor: pointer;
    /* The transition ensures the color fades smoothly when not animating */
    transition: width 0.3s ease-in-out, background-color 0.3s ease-in-out;
}

/*
 *  2. Style for the Active Dot
 *  When the slider adds the '.active' class to a dot, this rule
 *  makes the dot opaque and, most importantly, triggers the animation.
*/
.carousel-indicators li.active {
    background-color: rgba(255, 255, 255, 1);
    /* This line applies our custom animation sequence */
    animation: dot-animation 0.5s ease-in-out forwards;
}

/*
 *  3. The Animation Keyframes
 *  This is the heart of the microanimation. It defines the exact
 *  steps of the motion from start to finish.
*/
@keyframes dot-animation {
    /* Stage 1: The animation starts with the dot slightly smaller */
    0% {
        width: 8px;
    }
    /* Stage 2: It expands to its largest size, creating the 'pop' */
    50% {
        width: 28px;
    }
    /* Stage 3: It settles into its final, wider 'on' state */
    100% {
        width: 20px;
    }
}

/* =================================================================== */
/*  END: Custom CSS for Slider Dot Microanimation                      */
/* =================================================================== */


/* =================================================================== */
/*  START: FINAL Wavy Banner Effect (Corrected Height and Position)  */
/* =================================================================== */

/* --- Step 1: Make the original navbar element transparent --- */

/* =================================================================== */
/*  FIX: Pull Slider back up to its original position                */
/*  This counteracts the padding added to the nav banner above it.   */
/* =================================================================== */
#slider-ae {
    margin-top: -80px !important;
}

#menu-af .navbar {
    background: transparent !important;
}

/* --- Step 2: Apply the solid "sky" background to the main container --- */
#menu-af {
    background-color: #4986bc !important;
    position: relative !important;
    overflow: hidden !important;
    /* CORRECTED: Restored to 80px to give the banner its full height back. */
    padding-bottom: 80px !important; 
}

/* --- Step 3: Common Styles for All Three Wave Layers --- */
#menu-af::before,
#menu-af::after,
#menu-af .wave-layer-nav {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    width: 100% !important;
    /* The waves remain short, as requested */
    height: 45px !important;
    background-repeat: repeat-x !important;
    background-size: 2000px 60px !important;
    z-index: 999 !important; 
}

/* --- Step 4: Reposition the Short Waves at the Bottom of the Tall Banner --- */

/* Wave 1 (Rearmost) */
#menu-af .wave-layer-nav {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cpath d='M0,60 C250,120 750,0 1000,60 L1000,100 L0,100 Z' fill='%23679dcb'/%3E%3C/svg%3E") !important;
    /* CORRECTED: Repositioned much lower in the restored space */
    bottom: 0px !important;
    opacity: 0.3 !important;
    animation: animate-wave-nav 15s linear infinite reverse !important;
}

/* Wave 2 (Middle) */
#menu-af::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cpath d='M0,50 C200,80 800,20 1000,50 L1000,100 L0,100 Z' fill='%2385b4d9'/%3E%3C/svg%3E") !important;
    /* CORRECTED: Repositioned much lower in the restored space */
    bottom: 0px !important;
    opacity: 0.3 !important;
    animation: animate-wave-nav 11s linear infinite !important;
}

/* Wave 3 (Foremost) */
#menu-af::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 100' preserveAspectRatio='none'%3E%3Cpath d='M0,80 C500,120 500,40 1000,80 L1000,100 L0,100 Z' fill='%23a3cbe8'/%3E%3C/svg%3E") !important;
    /* CORRECTED: Repositioned much lower in the restored space */
    bottom: 15px !important;
    opacity: 0.3 !important;
    animation: animate-wave-nav 9s linear infinite reverse !important;
}

/* --- Step 5: The Keyframe Animation --- */
@keyframes animate-wave-nav {
    from {
        background-position-x: 0;
    }
    to {
        background-position-x: -2000px;
    }
}

/* =================================================================== */
/*  END: Wavy Banner Effect for Top Navigation                         */
/* =================================================================== */