/* VARS */

:root {
  --silver: #cccccc;
  --white: #ffffff;
  --forrestgrey: #ACC3A6;
  --blackolive: #373733;   /*  --concrete: #798480; */
  --midnightgrape: #1B1A1F;

  --light-shades: var(--silver);
  --light-accent: var(--white);
  --brand-color:var(--forrestgrey);
  --dark-accent: var(--blackolive);
  --dark-shades: var(--midnightgrape);

}

/* FONTS */

.lato-regular {
  font-family: "Lato", sans-serif !important;
  font-weight: 400 !important;
  font-style: normal;
}

.lato-bold {
  font-family: "Lato", sans-serif !important;
  font-weight: 700 !important;
  font-style: normal;
}

.yanone-kaffeesatz-400 {
  font-family: "Yanone Kaffeesatz", sans-serif !important;
  font-optical-sizing: auto !important;
  font-weight: 400 !important;
  font-style: normal !important;
}

.meera-inimai-regular {
  font-family: "Meera Inimai", sans-serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
}



/* ELEMENTS */

body {
  background-color: var(--dark-shades)!important;
}

h1, h2 {
  font-family: "Lato", sans-serif !important;
  font-weight: 400 !important;
  font-style: normal !important;
  color: var(--light-accent);

}
h3, h4, h5, h6 {
  font-family: "Yanone Kaffeesatz", sans-serif !important;
  font-optical-sizing: auto !important;
  font-weight: 400 !important;
  font-style: normal !important;
  color: var(--light-accent);

}

p, a, li, a, small, label, input, textarea, select {
  font-family: "Yantramanav", sans-serif !important;
  font-weight: normal !important;
  font-style: normal;
  color: var(--light-accent) !important;
  transition: color .3s ease-in-out !important;
}

.joinus a:hover,
.joinus a:focus {
  color: var(--brand-color) !important;
  background-color: transparent !important;
}


/* CLASSES */

.bg-light-shades {
  background-color: var(--light-shades) !important;
}
.bg-light-accent {
  background-color: var(--light-accent) !important;
}
.bg-brand-color {
  background-color: var(--brand-color) !important;
}
.bg-dark-accent {
  background-color: var(--dark-accent) !important;
  color: var(--light-accent);
}
.bg-dark-shades {
  background-color: var(--dark-shades) !important;
}

.light-shades {
  color: var(--light-shades) !important;
}
.hover-light-shades {
  transition:color .3s ease-in-out;
}
.hover-light-shades:hover {
  color: var(--light-shades) !important;
}

.light-accent {
  color: var(--light-accent) !important;
}
.hover-light-accent {
  transition: color .3s ease-in-out !important;
}
.hover-light-accent:hover {
  color: #f44336 !important;
}

.brand-color {
  color: var(--brand-color) !important;
}
.hover-brand-color {
  transition: color .3s ease-in-out;
}
.hover-brand-color:hover {
  color: var(--brand-color) !important;
}

.dark-accent {
  color: var(--dark-accent) !important;
}
.hover-accent-color {
  transition: color .3s ease-in-out;
}
.hover-accent-color:hover {
  color: var(--dark-accent) !important;
}

.dark-shades {
  color: var(--dark-shades) !important;
}
.hover-dark-shades {
  transition: color .3s ease-in-out;
}
.hover-dark-shades:hover {
  color: var(--dark-shades) !important;
}


/* BUTTONS */

/* Primary - Stiletto */
.btn-primary {
  background-color: #9c2b2c !important;
  border-color: #9c2b2c !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: #821f20 !important;
  border-color: #821f20 !important;
}

/* Info - Ebony Clay */
.btn-info {
  background-color: #283345 !important;
  border-color: #283345 !important;
}
.btn-info:hover,
.btn-info:focus,
.btn-info:active {
  background-color: #1f2736 !important;
  border-color: #1f2736 !important;
}

/* Success - Dingley */
.btn-success {
  background-color: #648745 !important;
  border-color: #648745 !important;
}
.btn-success:hover,
.btn-success:focus,
.btn-success:active {
  background-color: #4d6d36 !important;
  border-color: #4d6d36 !important;
}

/* Warning - Christine */
.btn-warning {
  background-color: #e1770d !important;
  border-color: #e1770d !important;
}
.btn-warning:hover,
.btn-warning:focus,
.btn-warning:active {
  background-color: #bb610b !important;
  border-color: #bb610b !important;
}

/* Danger - Pomegranate */
.btn-danger {
  background-color: #f44336 !important;
  border-color: #f44336 !important;
}
.btn-danger:hover,
.btn-danger:focus,
.btn-danger:active {
  background-color: #d32f2f !important;
  border-color: #d32f2f !important;
}


/* ANIMATIONS */

.hover-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}

.hover-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

.hover-icon {
    transition: color 0.3s ease;
}

.hover-card:hover .hover-icon {
    color: #f0f0f0; /* or any highlight color */
}



.animate-title,
.animate-lead,
.animate-text {
  opacity: 0; /* Start hidden */
}

.animate-title {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  text-overflow: clip; 
  white-space: nowrap;
  text-align: right;

}

.animate-title.visible {
  animation: slideInFromLeft 3s ease forwards;
}

.animate-lead.visible {
  animation: fadeIn 2s ease 1.5s forwards; /* Starts slightly after title */
}

.animate-text.visible {
  animation: slideInFromRight 2s ease 3s forwards; /* Starts after lead */
}


.hover-zoom img {
  transition: transform 0.3s ease-in-out;
}

.hover-zoom:hover img {
  transform: scale(1.1);
}



@keyframes slideInFromLeft {
  from {
      opacity: 0;
      letter-spacing: 2.5rem;
  }
  to {
      opacity: 1;
      letter-spacing: .7rem;
  }
}

@keyframes fadeIn {
  from {
      opacity: 0;
  }
  to {
      opacity: 1;
  }
}

@keyframes slideInFromRight {
  from {
      opacity: 0;
      transform: translateX(50px);
  }
  to {
      opacity: 1;
      transform: translateX(0);
  }
}


/* GALLERY */

  .overlay-card-container {
    position: relative;
    overflow: hidden;

  }

  .overlay-card-img {
    transition: transform 0.4s ease;
    border-radius: 0.5rem;
  }

  .overlay-card-overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.2);
    z-index: 1;
    border-radius: 0.5rem;
    transition: opacity 0.4s ease;
  }

  .overlay-card-content {
    position: absolute;
    z-index: 2;
    transition: opacity 0.4s ease;
  }

  .overlay-card-container:hover .overlay-card-img {
    transform: scale(1.05);
  }

  .overlay-card-container:hover .overlay-card-overlay,
  .overlay-card-container:hover .overlay-card-content {
    opacity: 0;
  }

/*============ BOOTSTRAP BREAK POINTS:

Extra small (xs) devices (portrait phones, less than 576px)
No media query since this is the default in Bootstrap

Small (sm) devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

Medium (md) devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

Large (lg) devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

Extra (xl) large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

=============*/