html {
  scroll-behavior: smooth; 
}


/* Opt in to cross-document View Transitions (manual method) */
@view-transition {
  navigation: auto;
}

/* Optional: keep the root crossfade quick */
@keyframes vt-fade-out { from {opacity:1} to {opacity:0} }
@keyframes vt-fade-in  { from {opacity:0} to {opacity:1} }

::view-transition-old(root) { animation: vt-fade-out .25s ease }
::view-transition-new(root) { animation: vt-fade-in  .25s ease }



[data-bs-theme="light"] .d-tl-none,
[data-bs-theme="dark"]  .d-td-none {
  display: none;
}

[data-bs-theme="light"] .d-td-none,
[data-bs-theme="dark"]  .d-tl-none {
  display: inline;
}



 .fa-solid.fa-bars { 
color: #ff9264!important; 
} 




/* Offset anchor scrolling by 30px */
[id] {
  scroll-margin-top: 30px;
}

/* interactive */

.interactive {
  transition: transform 0.3s ease, opacity 0.8s ease;
  will-change: transform, opacity;
  opacity: 1;
}

.interactive.fade-out {
  opacity: 0;
  pointer-events: none;
}

/* isotope */

.isotope-toolbar button {
  margin: 5px;
}

.isotope-item {
  margin-bottom: 60px;
}

.isotope-item img {
  border-radius: 5px;
}

/* lightbox */

.lightbox .lb-image{
  border: none;
}

.lb-image{
  border-radius: 16px!important;
}

.lb-data{
  border-radius: 16px!important;
}

.lb-outerContainer{
  border-radius: 17px;
}

/* Accent buttons */
.btn-primary,
.btn-outline-light:hover {
  background-color: #FF956B !important;
  border-color:     #FF956B !important;
  color:            #2d2d2d !important;
}

/* Navbar */
.navbar-brand {
  width:       40px;
  margin-left: 15px;
}

.nav-link:hover {
  color: #FF956B !important;
}


/* Typography */
h1 {
  font-family:    "nicholas", sans-serif;
  font-size:      clamp(24px, 5vw, 64px) !important;
  font-weight:    800;
  letter-spacing: 0 !important;
  color:          #fff;
}

h2, h3, h4, h5, h6 {
  font-family:    "nicholas", sans-serif;
  font-weight:    800;
  letter-spacing: 0 !important;
  color:          #fff;
}

p {
  font-family: "source-sans-3", sans-serif!important;
  font-weight: 400;
  font-size:   18px;
  color:       #fff;
}

/* Don't force button links to coral — they manage their own colour */
.bi,
a:not(.btn) {
  color: #FF956B;
  &:hover {
    color:#d66c42;
  }
}

/* Navbar links: default white; coral on hover + active */
.navbar .nav-link,
.offcanvas .nav-link {
  color: #fff !important;
}

.navbar .nav-link:hover,
.navbar .nav-link:focus,
.offcanvas .nav-link:hover,
.offcanvas .nav-link:focus {
  color: var(--bs-coral, #FF956B) !important;
}

/* Mark current page as coral too */
.navbar .nav-link.active,
.navbar .nav-link[aria-current="page"],
.navbar .current-menu-item > .nav-link,
.navbar .current-menu-ancestor > .nav-link,
.offcanvas .nav-link.active,
.offcanvas .nav-link[aria-current="page"],
.offcanvas .current-menu-item > .nav-link,
.offcanvas .current-menu-ancestor > .nav-link {
  color: var(--bs-coral, #FF956B) !important;
}


/* Share buttons — default = white icon & outline; hover/active/focus = coral icon & outline, NO fill */
.share-block .btn-outline-primary,
.share-block .btn-outline-coral {
  color: #fff !important;            /* icon inherits this */
  border-color: #fff !important;
  background-color: transparent !important;
}

/* On hover/focus/active: coral text (icon), coral outline, transparent bg */
.share-block .btn-outline-primary:hover,
.share-block .btn-outline-primary:focus,
.share-block .btn-outline-primary:active,
.share-block .btn-outline-primary:focus-visible,
.share-block .btn-outline-coral:hover,
.share-block .btn-outline-coral:focus,
.share-block .btn-outline-coral:active,
.share-block .btn-outline-coral:focus-visible {
  color: #FF956B !important;
  border-color: #FF956B !important;
  background-color: transparent !important;
  box-shadow: 0 0 0 .15rem rgba(255,149,107,.25); /* optional focus ring */
}

/* Make sure icons follow the button text color */
.share-block .bi { color: inherit !important; }

.badge-coral {
  background-color: #FF956B;
  color: #000!important;
}


/* Blog archive cards: title white; coral on hover */
.archive .card .card-title a,
.blog .card .card-title a {
  color: #fff !important;
  text-decoration: none;
}
.archive .card .card-title a:hover,
.archive .card .card-title a:focus,
.blog .card .card-title a:hover,
.blog .card .card-title a:focus {
  color: var(--bs-coral, #FF956B) !important; /* fallback if primary isn't coral */
  text-decoration: none;
}


.btn-dark {
  background-color: #FF956B;
  border:           none;
  color:            #2d2d2d;
}

/* Links */
a {
  position:        relative;
  text-decoration: none;
  border-bottom:   none;
}

/* Decorative borders */
.border-bottom { border-bottom-color: #FF956B !important; }
.border-top    { border-top-color:    #FF956B !important; }


/* Homepage header overlay */
#homepage-header .overlay {
  background-color: rgba(0, 0, 0, 0.2);
  position:        absolute;
  top:             0;
  left:            0;
  width:           100%;
  height:          100%;
  z-index:         1;
  pointer-events:  none;
}


/* Gradient background container */
.gradient-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: linear-gradient(40deg, var(--color-bg1), var(--color-bg2));
  z-index: 0;
}

.gradient-bg .g1,
.gradient-bg .g2,
.gradient-bg .g3,
.gradient-bg .g4,
.gradient-bg .g5 {
  opacity: 1;
  animation-timing-function: linear;
}

/* Interactive blobs behind content */
.gradient-bg .interactive {
  z-index: -1;
}

/* Header content layering */
#homepage-header .container {
  z-index: 2;
}


/* svg feature icon size */

/* Icon shake effect */
.shake-icon {
  transition: transform 0.2s ease;
  max-width: 35px;  
}

.hover-card:hover .shake-icon {
  animation: shake 1s ease;
}

.svg-icon {
  width: 100%; /* Ensures it fills the container */
  height: auto; /* Maintains aspect ratio */
  max-width: 35px; /* Set a max-width to control the icon size */
  display: block; /* Ensures it's treated as a block element */
  margin-top: 8px;
  margin-bottom: 8px;
 
}

.feature-icon {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  max-width: 35px;
  height: 60px;
  border-radius: 50%;
}




@keyframes shake {
  0% { transform: translateX(0); }
  25% { transform: translateX(-3px); }
  50% { transform: translateX(3px); }
  75% { transform: translateX(-3px); }
  100% { transform: translateX(0); }
}

/* Gallery hover: disable transitions */
#gallery img {
  transition: none;
  will-change: auto;
}


@media (max-width: 768px) {
  .ratio iframe {
      width: 100%;
      height: 100%;
  }
}

/* Modal animations */
.modal.fade .modal-dialog {
  display:          flex;
  align-items:      flex-start;
  justify-content:  center;
  min-height:       100vh;
  margin-top:       20px;
  transform:        scale(0.5);
  opacity:          0;
  transition:       transform 0.3s ease, opacity 0.3s ease;
}

.modal.show .modal-dialog {
  transform: scale(1);
  opacity:   1;
}

.modal .modal-content {
  animation: fadeInScale 0.4s ease forwards;
}

@keyframes fadeInScale {
  0%   {
    opacity: 0;
    transform: scale(0.5);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Gradient background container */
.gradient-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: linear-gradient(40deg, var(--color-bg1), var(--color-bg2));
  z-index: 0;
}

.gradient-bg .g1,
.gradient-bg .g2,
.gradient-bg .g3,
.gradient-bg .g4,
.gradient-bg .g5 {
  opacity: 1;
  animation-timing-function: linear;
}

/* Interactive blobs behind content */
.gradient-bg .interactive {
  z-index: -1;
}

/* Header content layering */
#homepage-header .container {
  z-index: 2;
}

/* Gradient background styles */
html, body {
  min-height: 100%;
}

:root {
  /* Background Colors */
  --color-bg1: #37515F;        /* Dark Blue-Grey for background */
  --color-bg2: #1F0812;        /* Deep Dark Red for background */

  /* Blob Colors */
  --color1: 255, 105, 98;      /* Vibrant Coral-Pink for blobs */
  --color2: 68, 255, 209;      /* Bright Aqua for blobs */
  --color3: 240, 235, 216;     /* Light Cream for blobs */
  --color4: 210, 85, 82;       /* Slightly darker coral for blend */
  --color5: 115, 133, 120;     /* Muted Grey-Green for blend */
  --color-interactive: 255, 105, 98; /* Interactive coral blob */

  /* Miscellaneous */
  --circle-size: 80%;
  --blending: soft-light;
}

@keyframes moveInCircle {
  0% { transform: rotate(0deg); }
  50% { transform: rotate(180deg); }
  100% { transform: rotate(360deg); }
}

@keyframes moveVertical {
  0% { transform: translateY(-55%); }
  50% { transform: translateY(55%); }
  100% { transform: translateY(-55%); }
}

@keyframes moveHorizontal {
  0% { transform: translateX(-55%) translateY(-15%); }
  50% { transform: translateX(55%) translateY(15%); }
  100% { transform: translateX(-55%) translateY(-15%); }
}

.interactive.pulse {
  animation: pulseBlob 0.3s ease-out;
}

@keyframes pulseBlob {
  0%   { transform: translate(-50%, -50%) scale(1); }
  50%  { transform: translate(-50%, -50%) scale(1.08); }
  100% { transform: translate(-50%, -50%) scale(1); }
}


.gradient-bg {
  width: 100%;
  height: 100vh;
  position: absolute;
  overflow: hidden;
  background: linear-gradient(40deg, var(--color-bg1), var(--color-bg2));
  top: 0;
  left: 0;
  z-index: -9999;
}

.gradient-bg {
  width: 100%;
}

.gradient-bg .gradients-container {
  filter: url(#goo) blur(10px);
  width: 100%;
  height: 100%;
}


.gradient-bg .svgBlur {
  display: none;
}

.gradient-bg .noiseBg {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 1;
  mix-blend-mode: soft-light;
  opacity: 0.2;
}


.gradient-bg .g1 {
  position: absolute;
  background: radial-gradient(circle at center, rgba(var(--color1), 0.9) 0, rgba(var(--color1), 0) 50%) no-repeat;
  mix-blend-mode: var(--blending);
  width: var(--circle-size);
  height: var(--circle-size);
  top: calc(50% - var(--circle-size) / 2);
  left: calc(50% - var(--circle-size) / 2);
  transform-origin: center center;
  animation: moveVertical 30s ease infinite; /* Slower movement */
  opacity: 1;
}

.gradient-bg .g2 {
  position: absolute;
  background: radial-gradient(circle at center, rgba(var(--color2), 0.9) 0, rgba(var(--color2), 0) 50%) no-repeat;
  mix-blend-mode: var(--blending);
  width: var(--circle-size);
  height: var(--circle-size);
  top: calc(50% - var(--circle-size) / 2);
  left: calc(50% - var(--circle-size) / 2);
  transform-origin: calc(50% - 400px);
  animation: moveInCircle 20s reverse infinite; /* Slower movement */
  opacity: 0.9;
}

.gradient-bg .g3 {
  position: absolute;
  background: radial-gradient(circle at center, rgba(var(--color3), 0.9) 0, rgba(var(--color3), 0) 50%) no-repeat;
  mix-blend-mode: var(--blending);
  width: var(--circle-size);
  height: var(--circle-size);
  top: calc(50% - var(--circle-size) / 2 + 200px);
  left: calc(50% - var(--circle-size) / 2 - 500px);
  transform-origin: calc(50% + 400px);
  animation: moveInCircle 35s linear infinite; /* Slower movement */
  opacity: 0.8;
}

.gradient-bg .g4 {
  position: absolute;
  background: radial-gradient(circle at center, rgba(var(--color4), 0.9) 0, rgba(var(--color4), 0) 50%) no-repeat;
  mix-blend-mode: var(--blending);
  width: var(--circle-size);
  height: var(--circle-size);
  top: calc(50% - var(--circle-size) / 2);
  left: calc(50% - var(--circle-size) / 2);
  transform-origin: calc(50% - 200px);
  animation: moveHorizontal 32s ease infinite; /* Slower movement */
  opacity: 0.8;
}

.gradient-bg .g5 {
  position: absolute;
  background: radial-gradient(circle at center, rgba(var(--color5), 0.9) 0, rgba(var(--color5), 0) 50%) no-repeat;
  mix-blend-mode: var(--blending);
  width: calc(var(--circle-size) * 2);
  height: calc(50% - var(--circle-size));
  top: calc(50% - var(--circle-size));
  left: calc(50% - var(--circle-size));
  transform-origin: calc(50% - 800px) calc(50% + 200px);
  animation: moveInCircle 28s ease infinite; /* Slower movement */
  opacity: 0.85;
}

.gradient-bg .interactive {
  position: absolute;
  background: radial-gradient(
    circle at center,
    rgba(var(--color-interactive), 0.9) 0,
    rgba(var(--color-interactive), 0) 50%
  ) no-repeat;
  mix-blend-mode: var(--blending);
  width: 100%;
  height: 100%;
  top: -50%;
  left: -50%;
  opacity: 0.7;

  /* glow-bug colour cycle: 3s linear infinite */
  animation: glowBugColors 3s linear infinite;
}


.overlay {
  background-color: rgba(0, 0, 0, 0.2);
  top: 0;
  left: 0;
  z-index: -1;
}

/* animations */

/* Fade In Forward */
.fade-in-fwd {
  opacity: 0;
  transform: translateZ(-50px);
  transition: opacity 1s ease, transform 1s ease;
}

.fade-in-fwd.active {
  opacity: 1;
  transform: translateZ(0);
}

/* Fade In Down */
.fade-in-down {
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 1.5s ease, transform 1.5s ease;
}

.fade-in-down.active {
  opacity: 1;
  transform: translateY(0);
}

/* Fade In Up */
.fade-in-up {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 1s ease, transform 1s ease;
}

.fade-in-up.active {
  opacity: 1;
  transform: translateY(0);
}

/* Fade In Left */
.fade-in-left {
  opacity: 0;
  transform: translateX(-50px);
  transition: opacity 1s ease, transform 1s ease;
}

.fade-in-left.active {
  opacity: 1;
  transform: translateX(0);
}

/* Fade In Right */
.fade-in-right {
  opacity: 0;
  transform: translateX(50px);
  transition: opacity 1s ease, transform 1s ease;
}

.fade-in-right.active {
  opacity: 1;
  transform: translateX(0);
}

/* PULSE ON HOVER */

/* Pulse Animation */
.pulse {
  display: inline-block;
  transition: transform 0.3s ease; /* Smooth transition for hover effect */
}

.pulse:hover {
  animation: pulseEffect 0.7s 1;
}

/* Keyframes for the Pulse Effect */
@keyframes pulseEffect {
  0% {
      transform: scale(1);
  }
  50% {
      transform: scale(1.02); /* Slightly larger at the midpoint */
  }
  100% {
      transform: scale(1); /* Back to original size */
  }
}

.coral-shadow-hover {
  transition: box-shadow 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.coral-shadow-hover:hover {
  box-shadow: 0px 0px 6px 6px rgba(253, 149, 112, 0.2)
  
}

.coral-shadow-hover iframe {
  transition: box-shadow 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.coral-shadow-hover:hover iframe {
  box-shadow: 0px 0px 6px 6px rgba(253, 149, 112, 0.2)
  
}


/* Brand coral (fallback if --bs-primary not set) */
:root { --bs-coral: var(--bs-coral, #FF956B); }

/* Text inputs, textareas, selects */
.gform_wrapper .form-control,
.gform_wrapper .form-select {
  border-color: var(--bs-coral) !important;
  background-clip: padding-box; /* avoid weird outlines with colored borders */
}

.gform_wrapper .form-control:focus,
.gform_wrapper .form-select:focus,
.gform_wrapper .coral-shadow-hover:focus,
.gform_wrapper .coral-shadow-hover:hover {
  border-color: var(--bs-coral) !important;
  box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--brand-coral) 40%, transparent) !important;
  outline: 0;
}

/* Checkboxes & radios */
.gform_wrapper .form-check-input {
  border-color: var(--bs-coral) !important;
  accent-color: var(--bs-coral); /* modern browsers */
}


.about-you{
  margin-top:30px;
}

.gform_wrapper.gravity-theme .gsection

 {
    border-bottom: 1px solid coral;
    padding: 0 4px 0px 0;
}





/* Single-post pager: white outline, white text/icon, NO fill */
.post-pager .btn.btn-outline-light {
  color: #fff !important;                 /* text + icon color */
  border-color: #fff !important;
  background-color: transparent !important;
}

.post-pager .btn.btn-outline-light:hover,
.post-pager .btn.btn-outline-light:focus,
.post-pager .btn.btn-outline-light:active,
.post-pager .btn.btn-outline-light:focus-visible {
  color: coral !important;
  border-color: coral !important;
  background-color: transparent !important; /* kill Bootstrap's default fill */
   box-shadow: 0 0 0 .15rem rgba(var(--bs-coral, 255,149,107), .4) !important;
}

/* Make the BI glyph follow the button color */
.post-pager .btn.btn-outline-light .bi { color: inherit !important; }

/* Ensure no auto-injected chevrons from theme utilities */
.post-pager a.btn[rel="prev"]::before,
.post-pager a.btn[rel="prev"]::after,
.post-pager a.btn[rel="next"]::before,
.post-pager a.btn[rel="next"]::after {
  content: none !important;
}



/* General modal styles */
.modal.show {
  pointer-events: auto; /* Enable interactions within the modal */
}

/* Disable pointer events for image modals */
.modal.show img {
  pointer-events: none; /* Prevent hover and click effects on images */
}

/* Ensure video iframe is interactive */
.modal.show iframe {
  pointer-events: auto; /* Allow interaction with video controls */
}


/* Pagination Buttons */
.pagination {
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.pagination .page-link {
  color: #FF956B;
  background-color: #21252b; /* Dark background */
  border: 1px solid #FF956B;
  transition: all 0.3s ease;
  border-radius: 0.25rem;
  margin-right: 0.5rem;
}

.pagination .page-item:last-child .page-link {
  margin-right: 0;
}

.pagination .page-link:hover {
  color: #21252b;
  background-color: #FF956B;
  border-color: #FF956B;
}

.pagination .active .page-link {
  color: #21252b;
  background-color: #FF956B;
  border-color: #FF956B;
  
}

.pagination .disabled .page-link {
  color: #ccc;
  background-color: #21252b;
  border-color: #ddd;
  pointer-events: none;
}

@media (max-width: 768px) {
  .pagination .page-link {
      margin-right: 0.25rem;
  }
}




/* Filter Buttons */
#portfolio-filters .btn {
  margin: 0.25rem;
  transition: background-color 0.3s ease, color 0.3s ease;
  background-color: transparent;
  border-color: #FFF!important;
  border: solid 1px;
  color: #fff!important;
}

#portfolio-filters .btn:hover {
  background-color: #FF956B;
  color: #21252b!important;
  border-color: #FF956B!important;
}

#portfolio-filters .btn.active {
  background-color: #FF956B;
  color: #21252b!important;
  border-color: #FF956B!important;
}

/* visible by default */
.portfolio-item { opacity: 1; visibility: visible; transform: none; transition: none; }

/* only filtered-out items get hidden */
.portfolio-item.isotope-hidden { visibility: hidden; pointer-events: none; }




/* Glow-bug colour cycle */
@keyframes glowBugColors {
  0%   { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(360deg); }
}

/* Add this to the bottom of your child styles (e.g. assets/css/styles.css) */
.gradient-bg .interactive {
  /* keep all your existing rules… */
  position: absolute;
  background: radial-gradient(
    circle at center,
    rgba(var(--color-interactive), 0.9) 0,
    rgba(var(--color-interactive), 0) 50%
  ) no-repeat;
  mix-blend-mode: var(--blending);
  width: 100%;
  height: 100%;
  top: -50%;
  left: -50%;
  opacity: 0.7;
  transition: opacity 1s ease;/* <-- add this */
  /* your glow+pulse animations… */
}

#homepage-header .interactive {
  pointer-events: none;
}