/***********************************
Navbar
***********************************/

.navbar {
  position: sticky; top: 0; z-index: 999;background: var(--slate);border-bottom:solid 2px var(--wht);box-shadow: 0 8px 6px -6px #666;
  padding:12px 0!important;
}

.navbar-brand {
  font-family: 'Open Sans', sans-serif;
  font-size: 18px;
  letter-spacing: .5em;
  font-weight: 300;
  color:var(--wht) !important;
}

.navbar .navbar-brand, .navbar .navbar-brand:hover, .navbar .navbar-brand:focus {
  color: #000;
}

.navbar .navbar-nav>li>a {
  font-family: 'Open Sans', sans-serif;
  font-size: 18px;
  font-weight: 400;
  color: var(--wht);
  outline: none;
  margin:0 .5em;
  letter-spacing: .5px;
}

.navbar .navbar-nav>li>a:focus, .navbar .navbar-nav>li>a:hover {
  color: var(--lgry);
  background-color: transparent;
}

.navbar .navbar-nav>.active>a, .navbar .navbar-nav>.active>a:focus, .navbar .navbar-nav>.active>a:hover {
  color: var(--lgry);
  background-color: transparent;
}

.navbar-toggle {
  position: relative;
  background-color: rgba(255,255,255,.7);
  border-radius: 4px;
}

@media (max-width: 768px) {
  .navbar-collapse {
    background: transparent;
  }
  .p-mob-nav {padding:36px 0;}
  .p-mob-nav ul li {margin-bottom:2em;}
}

.top-nav-collapse {
  padding: 0;
  background: rgba(50, 60, 70, 0.9);
}

.p-mob-nav {}

/* ==========================
Section - Footer
============================= */
footer {
  padding: 0 !important;
  background: var(--coal);
  border-top:2px solid #ccc;
  color:var(--wht);
}

.footer h4 {
   font-family: "Barlow Semi Condensed", sans-serif;
  font-weight: 400;
  font-size:28px;
  color: var(--wht);
  text-decoration: none;
}
.footer p {
  color: var(--wht);
  size: 13px;
  font-weight:400;
}
.footer a {
  color: var(--wht);
  size: 13px;
  font-weight:400;
  text-decoration: none;
  letter-spacing: .5px;
}

.footer li, .social-list li {
  color: var(--wht);
  font-weight: 400;
  font-variant-ligatures: common-ligatures;
  font-size: 1em;
  line-height: 1em;
  margin-top: 0;
  margin-bottom: 1em;
  padding-right: 10px;
}

.footer li a {
    font-weight: 300;
  text-decoration: none;
}

.social-list li {
  transition: 0.2s linear;
  -webkit-transition: 0.2s linear;
  -moz-transition: 0.2s linear;
  opacity: .5;
  display: inline-block;
  margin: 0;
}

.social-list li a {
  font-size: 18px;
  margin-right: 15px;
}

.type-underline, .type-underline:hover {
  color: var(--wht);
}

.footer__lower {
  margin-top: 3.25em;
}

.type--fine-print {
  color: var(--wht);
}
.copyright {color:var(--wht) !important;font-size:14px;letter-spacing: 1px;
}

/*======================================
//--//-->   HERO
======================================*/


#hero { height:auto;min-height:700px !important;
  position:absolute;
  height:auto;
  background-color: rgb(34,43,124);
  background-image: radial-gradient(
  farthest-corner at 75% 50%,
  rgba(0,132,212,1) 5%,
  rgba(39,63,175, .5) 40%,
  rgba(34,43,124, 0) 100%),
url("../../assets/img/bg-fract.svg");
background-size: fit;
  background-repeat: no-repeat;
  background-position: 0% 0%;
z-index: 0;
overflow-y: hidden;
padding:50px 0 0 0 !important;
}

@media (max-width: 480px) {
#hero {
  margin-top:0;
  height:700px;
  background-image: radial-gradient(
  farthest-corner at 5% 65%,
  rgba(0,132,212,1) 5%,
  rgba(39,63,175, .5) 40%,
  rgba(34,43,124, 0) 100%);
}
}

.hbnr {background-image: radial-gradient(
  farthest-corner at 5% 80%,
  rgba(0,132,212) 5%,
  rgba(39,63,175) 50%,
  rgba(34,43,124) 100%);
padding:20px 0 !important;}

@media (max-width: 480px) {
#hero h1 { margin-top:3em;}
}
.wedge-t { width:100%; position: absolute;
    top: 0;
    z-index: 300}
 .wedge-b { width:100%; position: absolute;
    bottom: 0;
    z-index: 300}

    ******************************
Gallery
***********************************/

#gallery {
  background-color: var(--wht);
  min-height: 650px;
  padding:50px 0 100px 0 !important;
}

#gallery .opacity {
  background-color: var(--slate) !important;
   opacity: 0;
   transition: opacity 0.9s ease-in-out;
 }

 #gallery .opacity.scrolled {
   opacity: 1;
 }

  .modal-dialog {
    margin: 0 auto;
  }

  .modal.show .modal-dialog {
    display: flex;
    align-items: center;
    min-height: 100vh;
  }

  .carousel-item {
    min-height: 40vh; /* optional minimum height */
    background-color: var(--lgry);
  }

  
  @media (max-width: 768px) {
    .carousel-item .row {
      flex-direction: column;
    }

    .carousel-item .col-md-6 {
      text-align: center;
      margin-bottom: 1rem;
    }
  }

 .carousel-item .text-white h3, 
 .carousel-item .text-white p {
   color: var(--wht);
 }
  .desc {text-align: start;}
  .desc h3 { color: var(--teal)!important;}
   .desc p {color: var(--blk)!important;}

.carousel-control-prev-icon,
.carousel-control-next-icon {
  background-color: var(--org) !important;
  border:solid 3px var(--wht);
  border-radius: 50%;
  box-shadow: 1px 3px 9px #666;
  padding: 20px;
}

.carousel-control-prev,
.carousel-control-next {
  width: 10%;
  top: 90%;
  transform: translateY(-50%);
  opacity: 0.75;
}

.custom-lightbox .carousel-control-prev {
  left: 25px; /* Move outside the image */
}

.custom-lightbox .carousel-control-next {
  right: 25px; /* Move outside the image */
}

/* Optional: hide on small screens */
@media (max-width: 768px) {
  .custom-lightbox .carousel-control-prev,
  .custom-lightbox .carousel-control-next {
    left: 10px !important;
    right: 10px !important;
  }
}
.carousel-indicators {
background-color: rgba(152,152,152, .4);
position: fixed; /* Fix to window */
bottom:5%;     /* Distance from bottom of window */
left: 25%;        /* Center horizontally */
transform: translateX(-25%);
z-index: 1055;    /* Ensure it's above the modal background */
display: flex;
justify-content: center;
gap: 12px;
}

.carousel-indicators button {
width: 30px;
height: 30px;
border-radius: 15px;
background-color: var(--slate);
opacity: 0.8;
border:solid 1px var(--coal);
}

.carousel-indicators .active {
opacity: 1;
background-color: var(--org);
}

@media (min-width: 1201px) {
.grid-container {
width: 90%;
margin: 0 1% 5% 1%;
display: grid;
grid-template-columns: repeat(4, 1fr);
column-gap: 1%; /* horizontal gap */
row-gap: 3%;     /* vertical gap (optional, can adjust as needed) */
}
}
@media (min-width: 481px) and (max-width:1200px) {
.grid-container {
  width:90%;
  margin:0 5% 0 5%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
}
@media (max-width: 480px) {
.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
}
.card {
  border:solid var(--coal) 1px;
  border-radius: 5px;
  text-align: center;
}

@media (min-width: 320px) and (max-width: 1200px) {
  .card {
  background-color: rgba(255,255,255,.4);
  border-radius: 5px;
  padding: 5px;
  text-align: center;
  }
}

.card .img-lnk {
  display: inline-block;
  border-radius: 5px;
  overflow: hidden;
}

.card .img-lnk img {
  filter: blur(1px);
  transition: transform 0.5s ease;
  display: block;
  width: 100%;
  height: auto;
  border-radius: 5px;
  transition: transform 0.3s ease-in-out, filter 0.3s ease-in-out; /* This creates a smooth transition for both effects */
}

.card .img-lnk:hover img {
  filter: blur(0); /* On hover, remove the blur */
  transform: scale(1.5); /* Grows 10% */
}

.card h3 {
  font-size: 38px;
  margin-top: 50px;
}

.card p {
  color: #666;
}
.card-content {
  position: absolute;
  bottom: 20;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 300;
  color: rgba(255,255,255,1);
  padding-top:5%;
  box-sizing: border-box;
  pointer-events: none; /* ensures hover still works on .card */
}
.card-content h3 {
  font-size: 36px;
  line-height: 1em !important;
  text-shadow:1px 1px #666;
    margin-top: 18px;

}
@media (min-width: 320px) and (max-width: 1200px) {
.card-content h3 {
  font-size: 22px;
}
}

.card-content p {
  color: #666;
}

@media (max-width: 768px) {
  .grid-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .grid-container {
    grid-template-columns: repeat(2, 1fr);
  }
}


/*======================================
                 ABOUT
======================================*/

/* sideshow */
#about {
  height:auto;
  min-height:450px;
  background-color: var(--slate);
  padding:50px 0 50px 0 !important;
border-bottom:solid 1px var(--slate);
}
    
#about #about_hype_container h2 {
font-family: "Barlow Semi Condensed";font-size: 48px !important;sans-serif;font-weight: 400!important;font-style: normal;line-height:1.2rem;letter-spacing: 1px;"
}

.resume-wrap {position:absolute;bottom:20%;left:30%;}


/***********************************
Testimonials
***********************************/
#testimonials {height:auto;min-height:650px !important;padding:100px 0 0 0;background-color: var(--wht);}
#testimonials .carousel-inner {height:auto; max-height:40vh !important;}
@media (max-width: 480px) {
#testimonials .carousel-inner {height:auto;max-height:50vh !important; background-color: pink;}
}
#testimonials .carousel-item {
  min-height: 35vh !important; /* optional minimum height */
  background-color: var(--wht);}
#testimonials .card {height:auto;min-height:380px;background:var(--wht); border: none;border-radius: 0;
  box-shadow: none;}
#testimonials .quote p {text-align: left;}
#testimonials .card p::first-letter {
  font-family:  font-family: "Barlow Semi Condensed", sans-serif;
  font-size: 200%;
  font-weight: 500;
  color: var(--org);
}
.cite {display:block;color:var(--teal);font-size:13px;line-height:1.3em;padding-left:10em;text-indent:-1.5em;"}
@media (max-width: 1200px) {
.cite {font-size:10px;line-height:1.3em;padding-left:.5em;text-indent:-.5em;"}
}
#testimonials .carousel-control-prev,
#testimonials .carousel-control-next {
  top: 120%;
  transform: translateY(-50%);
  width: auto;
  background: none;
  border: none;
}
#testimonials .carousel-control-prev { left: 30px; }
#testimonials .carousel-control-next { right: 30px; }

#testimonials .carousel-control-prev-icon,
#testimonials .carousel-control-next-icon {
  background-color: var(--org) !important;
  border:solid 3px var(--wht);
  border-radius: 50%;
  box-shadow: 1px 3px 9px #666;
  padding: 20px;

}