/* ====================================
   CAROUSEL POSITION + CAPTION STYLING
==================================== */
.carousel,
.carousel-inner,
.carousel-item {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* Default carousel offset (desktop) */
#carouselExampleCaptions {
    margin-top: -10px !important;
}

.carousel-caption {
  bottom: initial !important; /* resets Bootstrap's bottom lock */
  top: auto; /* prevent double positioning */
}


/* =====================================================
   GLASS-PREMIUM CAPTION BOX (LEFT CAPTION)
   ===================================================== */
.carousel-caption.glass-premium {
    position: absolute !important;

    /* POSITION */
    left: 25px !important;
    top: 20% !important;

    /* SIZE */
    width: 40% !important;
    min-width: 220px !important;
    max-width: 480px !important;

    display: inline-block !important;

    /* GLASS EFFECT */
    padding: 5px 10px;
    border-radius: 20px;
    background: rgba(5, 30, 65, 0.60);
    backdrop-filter: blur(22px) saturate(210%);
    -webkit-backdrop-filter: blur(22px) saturate(210%);

    /* Blue Glow */
    box-shadow: 0 0 18px rgba(0, 140, 255, 0.45);
    border: 2px solid transparent;
    background-clip: padding-box;

    /* INITIAL STATE (hidden until animation runs) */
    opacity: 0;
    transform: translateY(-30px);
}


/* =====================================================
   GRADIENT BORDER
   ===================================================== */
.carousel-caption.glass-premium::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 20px;
    padding: 2px;

    background: linear-gradient(
      135deg,
      rgba(255, 215, 0, 0.85),
      rgba(0, 140, 255, 0.85)
    );

    -webkit-mask:
      linear-gradient(#fff 0 0) content-box,
      linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;

    /* Glowing border fade-in */
    opacity: 0;
    animation: borderGlowFade 1.4s ease-out 2s forwards;
}


/* =====================================================
   DROP-DOWN ANIMATION
   (Runs AFTER 5 seconds)
   ===================================================== */
.carousel-item.active .carousel-caption.glass-premium {
    animation:
      softDropScale 1s ease-out 2s forwards,          /* Drop-in */
      shadowBloom 2.4s ease-in-out 3.2s forwards,     /* Bloom glow */
      breathingGlowApple 12s ease-in-out 6s infinite; /* Apple-style slow breathing */
}

@keyframes captionDrop {
  0% {
    opacity: 0;
    transform: translateY(-30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes softDropScale {
  0% {
    opacity: 0;
    transform: translateY(-20px) scale(0.92);  /* soft drop + slight shrink */
    filter: blur(3px);
  }

  50% {
    opacity: 0.9;
    transform: translateY(-8px) scale(0.97);   /* easing */
    filter: blur(1px);
  }

  100% {
    opacity: 1;
    transform: translateY(0) scale(1);         /* clean final state */
    filter: blur(0);
  }
}

@keyframes borderGlowFade {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes shadowBloom {
  0% {
  box-shadow: 0 0 18px rgba(0, 140, 255, 0.45);
  }
  50% {
    box-shadow: 0 0 35px rgba(0, 140, 255, 0.60);
  }
  100% {
 box-shadow: 0 0 18px rgba(0, 140, 255, 0.75);
  }
}


/* Apple-style 12s slow breathing glow */
@keyframes breathingGlowApple {
  0% {
    box-shadow: 0 0 14px rgba(0, 140, 255, 0.14);
  }
  25% {
    box-shadow: 0 0 20px rgba(0, 140, 255, 0.22);
  }
  50% {
    box-shadow: 0 0 28px rgba(0, 140, 255, 0.30);
  }
  75% {
    box-shadow: 0 0 20px rgba(0, 140, 255, 0.22);
  }
  100% {
    box-shadow: 0 0 14px rgba(0, 140, 255, 0.14);
  }
}

/* carousel caption rounded image */
.bancolround {
    border-radius: 14px;
    max-width: 100%;
    display: block;
    background-color: #28477E;
    padding: 5px;
    opacity: 0.9;
    transition: transform 0.4s ease;
}

.bancolround:hover {
    transform: translateY(-5px) scale(1.03);
}

/* pulse loop */
.pulse-loop { animation: pulseEffect 1.8s infinite; }

@keyframes pulseEffect { 
    0% { transform: scale(1); } 
    50% { transform: scale(1.03); } 
    100% { transform: scale(1); } 
}

/* ====================================
   MOBILE TWEAKS (max-width: 768px)
==================================== */
@media (max-width: 768px) {

    /* Remove carousel gap completely */
    #carouselExampleCaptions {
        margin-top: 0 !important;
    }

    /* Glass caption centered */
    .carousel-caption.glass-premium {
        width: 70%;
        left: 50%;
        transform: translateX(-50%);
        top: 10% !important;
        text-align: center;
    }
	  #CohCarcapt {
    display: none !important;
  }


    .bancolround {
        transform: translateY(-5px);
    }

    /* Fixed mobile topbar layout */
    .topbar {
        display: flex !important;
        flex-direction: row !important;
        justify-content: flex-end !important;
        align-items: center !important;
        gap: 200px !important;
        padding: 6px 12px !important;
        text-align: left !important;
    }

    /*  Mobile navbar solid blue */
    .main-navbar {
        background: #031d45 !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        box-shadow: none !important;
    }
}
@media (max-width: 768px) {
  section.p-0.m-0 {
    margin-block-start: 0 !important;
    margin-top: 0 !important;
  }
}