/* Define root colors */
:root {
    --seashell: #FFF5EE; 
    --brownsugar: #C26539; 
    --jetblack: #000; 
    --rebecca: #603A89;

  }

  /* BACKGROUNDS */
  .bg-seashell {
    background-color: var(--seashell) !important;
  }
  .bg-brownsugar {
    background-color: var(--brownsugar);
  }
  .bg-jetblack {
    background-color: var(--jetblack);
  }
  .bg-rebecca {
    background-color: var(--rebecca);
  }

  /* FONTS */
  @font-face {
    font-family: 'Shrikhand';
    src: url('fonts/Shrikhand-Regular.ttf') format('truetype');
    /* You can also provide additional font formats for better browser compatibility */
  }
  
  h1, h2, h3, h4 {
    font-family: 'Shrikhand', sans-serif; /* Fallback to sans-serif if Shrikhand is not available */
    /* Additional styles for your headers */
  }

  /* Example usage */
  body {
    background-color: var(--seashell);
    overflow-x: hidden;

  }
  
  .custom-rounded-top {
    border-radius: 2.5rem 2.5rem 0 0;
  }

  .hovergreen {
    transition: color 0.3s;
  }

  .hovergreen:hover {
    color: green !important;
  }
 
  .card-button:hover {
background-color:var(--brownsugar) !important;
  }

/* WAVE CONTAINERS */

@media only screen and (max-width: 600px) {
  .wave-container {
    height: 11vh; /* Adjusted height for phones */
  }
}

.wave-container {  
  height: 20vh;
  background-color: #c26539;
  position: relative;
}

.wave-container::before {   
  content: "";
  width: 100%;
  height: 130px;
  position: absolute;
  bottom: -0.3%;
  left: 0;
  background-size: auto;
  background-repeat: repeat no-repeat;
  background-position: 41vw bottom;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 1200  134' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M0 98L50 92C100 86 200 74 300 50C400 26 500 -10 600 2C700 14 800 74 900 98C1000 122 1100 110 1150 104L1200 98V134H1150C1100 134 1000 134 900 134C800 134 700 134 600 134C500 134 400 134 300 134C200 134 100 134 50 134H0V98Z' fill='%23FFF5EE'/></svg>");
}

@media(max-width:850px) {
  .wave-container::before {    
    height: 65px
  }  
}


/* DOWN */
.wave-footer {  
  height: 20vh;
  background-color: #fff5ee;
  position: relative;
}

.wave-footer::before {   
  content: "";
  width: 100%;
  height: 130px;
  position: absolute;
  bottom: -0.3%;
  left: 0;
  background-size: auto;
  background-repeat: repeat no-repeat;
  background-position: 20vw bottom;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 1200  134' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M0 98L50 92C100 86 200 74 300 50C400 26 500 -10 600 2C700 14 800 74 900 98C1000 122 1100 110 1150 104L1200 98V134H1150C1100 134 1000 134 900 134C800 134 700 134 600 134C500 134 400 134 300 134C200 134 100 134 50 134H0V98Z' fill='%23c26539'/></svg>");
}




/* ANIMATIONS  */


.scale-up-center{
  animation:scale-up-center .5s; 
} 

@keyframes scale-up-center{
   0%{transform:scale(.5)} 
   100%{transform:scale(1)} 
  }

/*============ 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) { ... }

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