/*

Tooplate 2130 Waso Strategy

https://www.tooplate.com/view/2130-waso-strategy

Free Bootstrap 5 HTML Template

*/


/*---------------------------------------
  CUSTOM PROPERTIES ( VARIABLES )             
-----------------------------------------*/
:root {
    --white-color:                  #ffffff;
    --primary-color:                #2C6E91;
    --secondary-color:              #5C946E;
    --third-color:                  #A3B18A;
    --fourth-color:                 #A0522D;
    --fifth-color:                  #7F5539;
    --section-bg-color:             #f5f5f5;
    --dark-color:                   #2F4858;
    --sand-color:                   #F5F1E6;
    --p-color:                      #030303;
    --ink-color:                    #253237;
    /*--white-color:                #ffffff;
    --primary-color:                #F6AE2D;
    --secondary-color:              #F26419;
    --third-color:                  #33658A;
    --fourth-color:                 #2F4858;
    --fifth-color:                  #c1e9ff;
    --section-bg-color:             #f5f5f5;
    --dark-color:                   #000000;
    --p-color:                      #657b88;*/

  
    --body-font-family:             'DM Sans', sans-serif;
  
    --h1-font-size:                 80px;
    --h2-font-size:                 42px;
    --h3-font-size:                 36px;
    --h4-font-size:                 32px;
    --h5-font-size:                 24px;
    --h6-font-size:                 52px;
    --h7-font-size:                 24px;
    --p-font-size:                  18px;
    --menu-font-size:               18px;
    --copyright-text-font-size:     16px;
  
    --font-weight-normal:           400;
    --font-weight-medium:           500;
    --font-weight-bold:             700;
  }
  
  body {
      background: var(--white-color);
      font-family: var(--body-font-family); 
  }
  
  
  /*---------------------------------------
    TYPOGRAPHY               
  -----------------------------------------*/

  .main-title {
    font-size: 110px;
  }

  .p1 {
    color:#000000;
    font-size: 22px;
  }

  .p2 {
    font-size: 21px;
  }


  
  h2,
  h3,
  h4,
  h5 {
    color: var(--primary-color);
    padding-top: 10px;
  }
  
  h6 {
    color: var(--white-color);
  }
  
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    font-weight: var(--font-weight-bold);
    letter-spacing: -1px;
  }
  
  h1 {
    font-size: var(--h1-font-size);
    letter-spacing: -2px;
  }
  
  h2 {
    font-size: var(--h2-font-size);
    letter-spacing: -2px;
  }
  
  h3 {
    font-size: var(--h3-font-size);
    line-height: inherit;
  }
  
  h4 {
    font-size: var(--h4-font-size);
    line-height: inherit;
  }
  
  h5 {
    font-size: var(--h5-font-size);
    line-height: normal;
  }
  
  h6 {
    font-size: var(--h6-font-size);
  }
  
  p {
    color: var(--p-color);
    font-size: var(--p-font-size);
  }
  
  ul li {
    color: var(--p-color);
    font-size: 21px;
    font-weight: var(--font-weight-normal);
  }

  .download-txt{
    color: black;
    font-size: 17px;
    font-weight: var(--font-weight-normal);
    padding-top: 0px;
    padding-bottom: 7px;
  }
  
  a, 
  button {
    touch-action: manipulation;
    transition: all 0.3s;
  }
  
  a {
    color: var(--p-color);
    text-decoration: none;
  }
  
  a:hover {
    color: var(--primary-color);
  }
  
  ::selection {
    background: var(--primary-color);
    color: var(--white-color);
  }
  
  ::-moz-selection {
    background: var(--primary-color);
    color: var(--white-color);
  }
  
  .section-hero ::selection,
  .bg-warning ::selection {
    background: var(--secondary-color);
  }
  
  .section-padding {
    padding-top: 105px;
    padding-bottom: 120px;
  }

  .fluxes-section-padding {
    padding-top: 105px;
  }
  
  .custom-border-radius {
    border-radius: 20px;
  }
  
  b,
  strong {
    font-weight: var(--font-weight-bold);
  }
  
  .small-title {
    text-transform: uppercase;
    font-size: 18px;
  }

  .small-title-two {
    font-size: 21px;
    color: var(--p-color);
  }
  
  
  /*---------------------------------------
    CUSTOM ICON               
  -----------------------------------------*/
  .custom-icon {
    display: inline-block;
    height: 45px;
    width: 45px;
    line-height: 45px;
    border: 3px solid var(--white-color);
    text-align: center;
    border-radius: 50%;
    font-size: 20px;
    position: relative;
  }
  
  .pic-Size {
    width: 50%;
  }
  
  .custom-icon::before,
  .custom-icon::after {
    box-sizing: inherit;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    border-radius: 50%;
  }
  
  .custom-icon::before {
    border: 3px solid transparent;
  }
  
  .custom-icon::after {
    border: 0 solid transparent;
  }
  
  .custom-icon:hover {
    border-color: transparent;
  }
  
  .custom-icon:hover::before {
    border-top-color: var(--primary-color); 
    border-right-color: var(--primary-color);
    border-bottom-color: var(--primary-color);
    transition: border-top-color .15s linear,border-right-color .15s linear .1s,border-bottom-color .15s linear .2s;
  }
  
  .custom-icon:hover::after {
    border-top: 3px solid var(--primary-color);
    border-left-width: 3px;
    border-right-width: 3px;
    transform: rotate(270deg);
    transition: transform .4s linear 0s,border-left-width 0s linear .35s;
  }
  
  .play-icon::before {
    position: relative;
    left: 1px;
  }
  
  
  /*---------------------------------------
    CUSTOM BUTTON               
  -----------------------------------------*/

  .back-button {
    background: var(--fourth-color);
    border-radius: 100px;
    color: var(--white-color);
    font-size: var(--copyright-text-font-size);
    font-weight: var(--font-weight-bold);
    padding: 12px 24px;
  }

  .read-more-btn {
    padding-bottom: 100px;
  }

  .custom-btn {
    background: var(--fourth-color); /* makes it outlined instead of filled */
    border: 2px solid var(--fourth-color);
    border-radius: 100px;
    color: var(--white-color);
    font-size: var(--copyright-text-font-size);
    font-weight: var(--font-weight-bold);
    padding: 12px 24px 10px 24px;
    cursor: pointer;
  }

.custom-btn:hover {
  background: var(--sand-color);
  border-color: var(--fourth-color);
  color: var(--fourth-color);
}


 .custom-btn2 {
    background: var(--fourth-color); /* makes it outlined instead of filled */
    border: 2px solid var(--fourth-color);
    border-radius: 100px;
    color: var(--white-color);
    font-size: 20px;
    font-weight: var(--font-weight-bold);
    padding: 12px 31px 10px 31px;
    cursor: pointer;
  }

.custom-btn2:hover {
  background: var(--sand-color);
  border-color: var(--fourth-color);
  color: var(--fourth-color);
}



.custom-bg-grey2 {
    background: grey; /* makes it outlined instead of filled */
    border: 2px solid grey;
    border-radius: 100px;
    color: rgb(177, 177, 177);
    font-size: 20px;
    font-weight: var(--font-weight-bold);
    padding: 12px 31px 10px 31px;
    cursor: pointer;
  }
  
  .custom-bg-grey2:hover {
    background: grey;
    border-color: grey;
    color: rgb(177, 177, 177);
  }

  
  .custom-bg-primary {
    background: var(--secondary-color); /* makes it outlined instead of filled */
    border: 2px solid var(--secondary-color);
    border-radius: 100px;
    color: var(--white-color);
    font-size: var(--copyright-text-font-size);
    font-weight: var(--font-weight-bold);
    padding: 12px 24px 10px 24px;
    cursor: pointer;
  }

  .custom-bg-comp {
    border-radius: 70px;
    color: var(--white-color);
    font-size: var(--copyright-text-font-size);
    font-weight: var(--font-weight-bold);
    padding: 5px 14px 5px 14px;
    cursor: pointer;
  }
  
  .custom-bg-primary:hover {
    background: var(--white-color);
    border-color: var(--secondary-color);
    color: var(--secondary-color);
  }

  .custom-bg-primary2 {
    background: var(--white-color); /* makes it outlined instead of filled */
    border: 2px solid var(--secondary-color);
    border-radius: 100px;
    color: var(--secondary-color);
    font-size: var(--copyright-text-font-size);
    font-weight: var(--font-weight-bold);
    padding: 12px 24px 10px 24px;
    cursor: pointer;
  }

  .custom-bg-primary2:hover {
    background: var(--white-color); /* makes it outlined instead of filled */
    border: 2px solid var(--secondary-color);
    border-radius: 100px;
    color: var(--secondary-color);
  }

  .custom-bg-grey {
    background: grey; /* makes it outlined instead of filled */
    border: 2px solid grey;
    border-radius: 100px;
    color: rgb(177, 177, 177);
    font-size: var(--copyright-text-font-size);
    font-weight: var(--font-weight-bold);
    padding: 12px 24px 10px 24px;
    cursor: pointer;
  }
  
  .custom-bg-grey:hover {
    background: grey;
    border-color: grey;
    color: rgb(177, 177, 177);
  }


  .custom-bg-op {
    background: var(--sand-color); /* makes it outlined instead of filled */
    border: 2px solid var(--fourth-color);
    border-radius: 100px;
    color: var(--fourth-color);
    font-size: var(--copyright-text-font-size);
    font-weight: var(--font-weight-bold);
    padding: 12px 24px 10px 24px;
    cursor: pointer;
  }
  
  .custom-bg-op:hover {
    background: var(--fourth-color);
    border-color: var(--fourth-color);
    color: var(--white-color);
  }

  .custom-bg-green {
    background: var(--third-color);
  }
  
  .custom-bg-green:hover {
    background: var(--primary-color);
    color: var(--white-color);
  }

  .custom-bg-red {
    background: var(--secondary-color);
  }
  
  .custom-bg-red:hover {
    background: var(--primary-color);
    color: var(--white-color);
  }
  
  .custom-bg-secondary {
    background: var(--secondary-color);
  }
  
  .custom-bg-secondary:hover {
    background: var(--primary-color);
    color: var(--white-color);
  }
  
  .custom-bg-available {
    background: var(--secondary-color);
  }
  
  .custom-bg-available:hover {
    background: var(--third-color);
    color: var(--white-color);
  }

  .custom-bg-available-NEW {
    background: var(--third-color);
  }
  
  .custom-bg-available-NEW:hover {
    background: var(--primary-color);
    color: var(--white-color);
  }

  .custom-btn-available {
    background: var(--secondary-color);
    border-radius: 100px;
    color: var(--white-color);
    font-size: var(--copyright-text-font-size);
    font-weight: var(--font-weight-bold);
    padding: 12px 24px;
  }

  .button-space {
    padding: 12px;
  }

  .custom-btn-not-available {
    background: var(--third-color);
    border-radius: 100px;
    color: var(--white-color);
    font-size: var(--copyright-text-font-size);
    font-weight: var(--font-weight-bold);
    padding: 12px 24px;
  }

  .not-avail {
    background: var(--third-color);
    color: var(--white-color);
    font-size: var(--copyright-text-font-size);
    font-weight: var(--font-weight-bold);
  }


  .not-avail:hover {
    background: var(--third-color);
    border-radius: 100px;
    color: var(--white-color);
    font-size: var(--copyright-text-font-size);
    font-weight: var(--font-weight-bold);
  }


  .custom-btn-not-available:hover {
    background: var(--third-color);
    border-radius: 100px;
    color: var(--white-color);
    font-size: var(--copyright-text-font-size);
    font-weight: var(--font-weight-bold);
    padding: 12px 24px;
  }

  .custom-bg-available {
    background: var(--secondary-color);
  }

  
  .custom-bg-available:hover {
    background: var(--primary-color);
  }


  /*---------------------------------------
    NAVIGATION              
  -----------------------------------------*/
  .navbar {
    right: 0;
    left: 0;
  }
  
  .navbar-brand {
    font-size: 32px;
    font-weight: var(--font-weight-bold);
    color: var(--primary-color);
  }
  
  
  .navbar-brand2 {
    font-size: 22px;
    color: var(--white-color);
  }
  
  .navbar-expand-lg .navbar-nav .nav-link {
    padding-right: 25px;
    padding-left: 25px;
  }
  
  .navbar-nav .nav-link {
    color: #ffffff;
    font-size: var(--menu-font-size);
    font-weight: var(--font-weight-medium);
    text-transform: uppercase;
    padding-top: 15px;
    padding-bottom: 15px;
  }
  
  .navbar-nav .nav-link.active,
  .navbar-nav .nav-link:hover {
    text-decoration: underline;
    text-decoration-thickness: 2px; /* optional: makes it bolder */
    text-underline-offset: 4px;    /* optional: adds some spacing below text */
  }
  
  .navbar-toggler {
    border: 0;
    padding: 0;
    cursor: pointer;
    margin: 0;
    width: 30px;
    height: 35px;
    outline: none;
  }
  
  .navbar-toggler:focus {
    outline: none;
    box-shadow: none;
  }
  
  .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
    background: transparent;
  }
  
  .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:before,
  .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:after {
    transition: top 300ms 50ms ease, -webkit-transform 300ms 350ms ease;
    transition: top 300ms 50ms ease, transform 300ms 350ms ease;
    transition: top 300ms 50ms ease, transform 300ms 350ms ease, -webkit-transform 300ms 350ms ease;
    top: 0;
  }
  
  .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:before {
    transform: rotate(45deg);
  }
  
  .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon:after {
    transform: rotate(-45deg);
  }
  
  .navbar-toggler .navbar-toggler-icon {
    background: var(--white-color);
    transition: background 10ms 300ms ease;
    display: block;
    width: 30px;
    height: 2px;
    position: relative;
  }
  
  .navbar-toggler .navbar-toggler-icon:before,
  .navbar-toggler .navbar-toggler-icon:after {
    transition: top 300ms 350ms ease, -webkit-transform 300ms 50ms ease;
    transition: top 300ms 350ms ease, transform 300ms 50ms ease;
    transition: top 300ms 350ms ease, transform 300ms 50ms ease, -webkit-transform 300ms 50ms ease;
    position: absolute;
    right: 0;
    left: 0;
    background:  #ffffff;
    width: 30px;
    height: 2px;
    content: '';
  }
  
  .navbar-toggler .navbar-toggler-icon::before {
    top: -8px;
  }
  
  .navbar-toggler .navbar-toggler-icon::after {
    top: 8px;
    
  }
  
  .breadcrumb-item.active {
    color: var(--primary-color);
  }
  
  
  /*---------------------------------------
    SITE HEADER              
  -----------------------------------------*/
  .site-header {
    background: var(--primary-color);
    padding-top: 5px;
    padding-bottom: 5px;
  }
  
  .site-header-icon {
    color: var(--dark-color);
  }
  
  .site-header .social-icon {
    text-align: right;
  }

  .header-logo {
    width: 45px;
    height: 36px;
    padding-right: 8px;
  }

  .big-header-logo {
    width: 90px;
    height: 80px;
    padding-right: 3px;
  }
  
  
  /*---------------------------------------
    HERO              
  -----------------------------------------*/
  .hero {
    position: relative;
    height: calc(100vh - 133px);
  }
  
  .section-hero {
    background-image: url('../images/jason-goodman-MUZFKa_mttU-unsplash.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    position: relative;
    height: auto;
    padding-top: 180px;
    padding-bottom: 180px;
  }
  
  .section-hero::before {
    content: "";
    background: linear-gradient(to top, var(--fourth-color), transparent 90%);
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
  }
  
  .quote {
    position: absolute;
    top: 5%; /* Adjust as needed */
    right: 5%; /* Adjust as needed */
    font-size: 1.5rem;
    color: var(--white-color);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
}

  .blockquote-footer {
    color: var(--white-color);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
  }
  .carousel-item {
    position: relative;
  }
  
  .section-hero-text {
    position: relative;
  }
  
  .carousel {
    padding-right: 0;
    padding-left: 0;
  }
  
  .hero-carousel,
  .carousel-inner,
  .carousel-item {
    height: 100%;
  }
  
  .carousel-image-wrap::before {
    content: "";
    background: linear-gradient(to top, var(--p-color), transparent 90%);
    position: absolute;
    z-index: 2;
    top: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: 0.8;
  }

  .carousel-image-wrap {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden; /* Ensure the video doesn't overflow */
}

.carousel-image-wrap video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 100%;
    min-height: 100%;
}
  
  .carousel-caption {
    z-index: 9;
    top: 32%;
    bottom: 0;
    left: 0;
    text-align: left;
    width: 50%;
    margin-right: 12px;
    margin-left: 12px;
  }
  
  .quote-carousel-caption {
    z-index: 9;
    top: 32%;
    bottom: 0;
    left: 0;
    text-align: right;
    width: 50%;
    margin-right: 12px;
    margin-left: 12px;
  }
  
  .bg-blue {
    background: var(--primary-color);
  }
  
  .news-text-one {
    font-size: 18px;
    padding-bottom: 80px;
    padding-right: 15px;
    padding-left: 23px;
  }
  
  .news-text-two {
    font-size: 18px;
    padding-bottom: 80px;
    padding-right: 15px;
    padding-left: 23px;
  }
  
  .news-text {
    font-size: 18px;
    padding-bottom: 80px;
    padding-right: 15px;
    padding-left: 23px;
  }
  
  .data-text1 {
    font-size: 18px;
    font-weight: var(--font-weight-medium);
    color: var(--);
    letter-spacing: 1px;
    padding-bottom: 15px;
    padding-right: 15px;
    padding-left: 23px;
  }

  .data-button {
    margin-bottom: 80px;
    margin-left: 23px;
  }
  
  .data-text2 {
    font-size: 25px;
    font-weight: var(--font-weight-bold);
    color: var(--dark-color);
    letter-spacing: 1px;
    padding-bottom: 2px;
    padding-right: 15px;
    padding-left: 23px;
  }
  
  
  .carousel-image-wrap {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 91%;
    margin-left: auto;
  }
  
  .carousel-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  
  .carousel-control-next, 
  .carousel-control-prev {
    top: auto;
    bottom: 50px;
    opacity: 1;
  }
  
  .carousel-control-prev {
    left: auto;
    right: 70px;
  }
  
  .carousel-control-next-icon, 
  .carousel-control-prev-icon {
    width: 70px;
    height: 70px;
  }
  
  
  /*---------------------------------------
    ABOUT              
  -----------------------------------------*/
  .about-image-wrap {
    border-radius: 10px;
    height: 100%;
    position: relative;
    overflow: hidden;
  }
  
  .about-image-info {
    background: linear-gradient(to top, var(--fourth-color), transparent 90%);
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    padding: 40px;
  }
  
  .text-black {
    color: var(--fifth-color); /* Set text color to black */
  }
  
  .about-image {
    border-radius: 20px;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  /* Default desktop spacing stays the same */
.container-sides {
  padding-left: 12%;
  padding-right: 12%;
}

/* On smaller screens, reduce side padding */
@media (max-width: 768px) {
  .container-sides {
    padding-left: 7% !important;
    padding-right: 7% !important;
  }
}

/* On very small phones, make it even tighter */
@media (max-width: 480px) {
  .container-sides {
    padding-left: 5% !important;
    padding-right: 5% !important;
  }
}

  .small-container-sides {
    padding-left: 20%;   /* or use px, %, em, etc. */
    padding-right: 20%;
  }
  
  .about-thumb {
    border-radius: 30px;
    margin-bottom: 24px;
    padding: 40px;
    height: 100%;
  }

  .about-thumb-new {
    border-radius: 30px;
    margin-bottom: 2px;
    padding: 40px;
    padding-bottom: -10px;
  }

  .new-thumb {
    border-radius: 40px;
    margin-bottom: 44px;
    padding: 60px;
    height: 100%;
  }

  .trend-thumb {
    padding: 20px;
    padding-bottom:55px;
    border-radius: 20px;
    margin-bottom: 24px;
  }
  
  /*---------------------------------------
    SERVICES              
  -----------------------------------------*/
  .services {
    background: var(--section-bg-color);
  }
  
  .nav-tabs {
    border-bottom: 0;
  }
  
  .nav-tabs .nav-link,
  .nav-tabs .nav-link span {
    color: var(--p-color);
    display: block;
    text-align: left;
  }
  
  .nav-tabs .nav-link {
    border-radius: 0;
    border: 0;
    border-left: 7px solid var(--p-color);
    margin-right: 30px;
    margin-left: 30px;
    margin-bottom: 30px;
    padding: 30px;
    transition: all 0.3s ease-in-out;
  }
  
  .nav-tabs .nav-item.show .nav-link, 
  .nav-tabs .nav-link.active,
  .nav-tabs .nav-link:focus, 
  .nav-tabs .nav-link:hover {
    border-left-color: var(--secondary-color);
    background: var(--white-color);
    box-shadow: 0 1rem 3rem rgba(0,0,0,.175);
  }
  
  .nav-tabs .nav-link.active h3,
  .nav-tabs .nav-link:focus h3, 
  .nav-tabs .nav-link:hover h3 {
    color: var(--secondary-color);
  }
  
  
  /*---------------------------------------
    PROJECTS              
  -----------------------------------------*/

  .before-footer {
    padding-bottom: 200px;
  }

  .projects-thumb {
    border-radius: 20px;
    position: relative;
    overflow: hidden;
    margin-bottom: 24px;
    transition: all 0.3s;
    cursor: pointer;
  }
  
  .projects-thumb-large {
    min-height: 356px;
  }
  
  .projects-thumb:hover {
    background: rgba(255, 255, 255, 0);
    box-shadow: 0 1rem 3rem rgba(0,0,0,.175);
  }
  
  .projects-thumb:hover .projects-image {
    transform: scale(1.2);
  }
  
  .projects-thumb:hover .projects-title-wrap {
    padding-bottom: 30px;
  }
  
  .projects-thumb:hover .custom-btn,
  .projects-btn-wrap .custom-btn:hover {
    background: var(--primary-color);
  }
  
  .projects-title-wrap {
    background: linear-gradient(to top, var(--dark-color), transparent 90%);
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    padding: 25px 25px 10px 25px;
    transition: all 0.2s;
  }
  
  .projects-small-title {
    color: var(--secondary-color);
    text-transform: uppercase;
  }
  
  .projects-title {
    color: var(--white-color);
  }
  
  .projects-image {
    border-radius: 20px;
    width: 100%;
    transition: all 0.3s;
  }
  
  .projects-thumb-large .projects-image {
    object-fit: cover;
    height: 100%;
  }
  
  .projects-btn-wrap {
    position: absolute;
    bottom: 5px;
    right: 5px;
  }
  
  .projects-btn-wrap .custom-btn {
    font-size: 20px;
    padding: 7.5px 15px;
  }
  
  
  /*---------------------------------------
    CONTACT INFO               
  -----------------------------------------*/
  .contact-thumb {
    position: relative;
    bottom: 140px;
    margin-bottom: -140px;
  }
  
  .contact-info {
    border-radius: 20px;
    padding: 40px;
  }
  
  .google-map {
    border-radius: 20px;
  }
  
  .contact-icon {
    color: var(--secondary-color);
    font-size: 30px;
  }

  
  
  
  /*---------------------------------------
    CONTACT              
  -----------------------------------------*/
  .contact-container-wrap {
    padding-bottom: 120px;
    padding-top: 80px;
  }
  
  
  .contact-form {
    margin-top: 30px;
    margin-right: 30px;
  }
  
  
  /*---------------------------------------
    CUSTOM FORM               
  -----------------------------------------*/
  .custom-form .form-control {
    background: transparent;
    box-shadow: none;
    border-radius: 0;
    border: 0;
    border-bottom: 3px solid var(--section-bg-color);
    margin-bottom: 24px;
    padding-top: 13px;
    padding-bottom: 13px;
    transition: all 0.3s;
    outline: none;
  }
  
  .custom-form .form-control:hover,
  .custom-form .form-control:focus {
    background: var(--white-color);
  }
  
  .custom-form button[type="submit"] {
    background: var(--secondary-color);
    border-radius: 100px;
    border: 0;
    color: var(--white-color);
    font-weight: var(--font-weight-bold);
    transition: all 0.3s;
    margin-bottom: 0;
  }
  
  .custom-form button[type="submit"]:hover,
  .custom-form button[type="submit"]:focus {
    background: var(--white-color);
    background: var(--fourth-color);
  }
  
  /*---------------------------------------
    SITE FOOTER              
  -----------------------------------------*/
  
  .site-footer-wrap {
    text-align: center; /* Center the text horizontally */
    padding-top: 25px;
    padding-bottom: 20px;
  }
  
  .site-footer {
    background-color: var(--primary-color); 
    padding-bottom: 20px;
    font-size: var(--copyright-text-font-size);
  }

  
  
  /*---------------------------------------
    SOCIAL ICON               
  -----------------------------------------*/
  .social-icon {
    margin: 0;
    padding: 0;
  }
  
  .social-icon li {
    list-style: none;
    display: inline-block;
    vertical-align: top;
  }
  
  .social-icon-link {
    background: var(--white-color);
    border-radius: 20px;
    font-size: var(--copyright-text-font-size);
    color: var(--third-color);
    display: inline-block;
    vertical-align: top;
    margin: 2px;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
  }
  
  .about-social-icons:hover {
    color: var(--primary-color);
  }
  
  .about-social-icons:hover {
    color: var(--primary-color);
  }

  .about-social-icons {
    background: var(--white-color);
    border-radius: 20px;
    font-size: 30px;
    color: var(--third-color);
    display: inline-block;
    vertical-align: top;
    margin: 2px;
    padding-top: 100px;
    padding-bottom: 100px;
    width: 50px;
    height: 30px;
    line-height: 30px;
    text-align: center;
  }
 
  
  /*---------------------------------------
    RESPONSIVE STYLES               
  -----------------------------------------*/
  @media screen and (min-width: 1600px) {
    
    .projects-thumb-large {
      min-height: 416px;
    }
  }
  
  @media screen and (max-width: 1280px) {

    .about-social-icons {
      background: var(--white-color);
      border-radius: 20px;
      font-size: 30px;
      color: var(--third-color);
      display: inline-block;
      vertical-align: top;
      margin: 2px;
      padding-top: 100px;
      padding-bottom: 100px;
      width: 50px;
      height: 30px;
      line-height: 30px;
      text-align: center;
    }

    .pic-Size {
      width: 50% !important;
    }
  
    .contact svg {
      bottom: 0;
      margin-bottom: 0;
    }

  }
  
  @media screen and (max-width: 991px) {
    .first-img {
      margin-top: 30px;
    }

    .about-social-icons {
      background: var(--white-color);
      border-radius: 20px;
      font-size: 30px;
      color: var(--third-color);
      display: inline-block;
      vertical-align: top;
      margin: 2px;
      padding-top: 100px;
      padding-bottom: 100px;
      width: 50px;
      height: 30px;
      line-height: 30px;
      text-align: center;
    }

    .main-nav {
      color:var(--dark-color);
    }
  
    .pic-Size {
      width: 50% !important;
    }
    h1 {
      font-size: 65px;
    }
  
    h2 {
      font-size: 36px;
    }
  
    h3 {
      font-size: 32px;
    }
  
    h4 {
      font-size: 28px;
    }
  
    h5 {
      font-size: 20px;
    }
  
    h6 {
      font-size: 40px;
    }
  
    .section-padding {
      padding-top: 80px;
      padding-bottom: 80px;
    }
  
    .custom-btn {
      font-size: var(--copyright-text-font-size);
      padding: 8px 16px;
    }
  
    .navbar-expand-lg .navbar-nav .nav-link {
      padding-left: 0;
    }
  
    .navbar-nav .nav-link {
      padding-top: 10px;
      padding-bottom: 10px;
    }

    
  
    .site-header .social-icon {
      text-align: left;
      margin-top: 10px;
    }
  
    .carousel-caption {
      width: 100%;
    }
  
    .about-thumb {
      padding: 30px;
    }

    .nest-thumb {
      padding: 45px;
    }

    .trend-thumb {
      padding: 30px;
    }
  
    .about-image {
      height: auto;
      margin-bottom: 3px;
    }

    .about-info {
        padding: 3px;
      }

      .fluxes-info {
        padding: 0px;
      }
    
  
    .contact-container-wrap {
      padding-bottom: 50px;
    }
  
    .contact-form {
      margin-right: 0;
      margin-top: 80px;
      margin-bottom: 50px;
    }
  
    .contact-thumb {
      bottom: 0;
      margin-bottom: 0;
    }
  
    .site-footer {
      text-align: center;
    }

  
  }
  
  @media screen and (max-width: 900px) {
    .first-img {
      margin-top: 30px;
    }
    .pl-1 {
      padding-left: 15px;
    }

    .about-social-icons {
      background: var(--white-color);
      border-radius: 20px;
      font-size: 30px;
      color: var(--third-color);
      display: inline-block;
      vertical-align: top;
      margin: 2px;
      padding-top: 10px;
      padding-bottom: 100px;
      width: 50px;
      height: 30px;
      line-height: 30px;
      text-align: center;
    }
    
    .pic-Size {
      width: 99% !important;
    }

    .main-title {
      font-size: 85px;
    }
  }
  
  @media screen and (max-width: 480px) {
    
    .first-img {
      margin-top: 30px;
    }

    .about-social-icons {
      background: var(--white-color);
      border-radius: 20px;
      font-size: 30px;
      color: var(--third-color);
      display: inline-block;
      vertical-align: top;
      margin: 2px;
      padding-top: 10px;
      padding-bottom: 100px;
      width: 50px;
      height: 30px;
      line-height: 30px;
      text-align: center;
    }
    
    .pic-Size {
      width: 99% !important;
    }
  
    h1 {
      font-size: 48px;
    }
  
    h2 {
      font-size: 32px;
    }
  
    h3 {
      font-size: 28px;
    }
  
    h4 {
      font-size: 24px;
    }
  
    h5 {
      font-size: 20px;
    }
  
    h6 {
      font-size: 30px;
    }
  
    .contact-icon {
      font-size: 24px;
    }
  
    .site-header p {
      font-size: 14px;
    }
  
    .carousel-control-next, 
    .carousel-control-prev {
      bottom: 20px;
    }
  
    .nav-tabs .nav-link {
      margin-right: 0;
      margin-left: 0;
      padding: 15px;
    }
  
    .contact-info {
      padding: 30px 25px;
    }
  
    .site-footer-wrap {
      flex-direction: column;
    }
  
    .copyright-text {
      padding-bottom: 10px;
    }

    .main-title {
      font-size: 55px;
    }

  }
  
  .dataset-info {
    padding-left: 100px;
    padding-right: 100px;
  }

  .new-text-warning {
    color: var(--fourth-color);
    font-size: larger;
  }
  
  
  .small.text-warning {
    color: var(--secondary-color);
    font-size: larger;
  }
  
  .tm-footer {
    padding: 5px 15px;
    margin-top: 0px;
    padding-top: 100px;
    color: var(--primary-color) ;
    font-size: 0.95rem;
    background-color: var(--white-color);
  }
  
  .tm-footer a {
    color: var(--primary-color) /* var(--primary-color) */ /* #626364 */ ;
    text-decoration: none;
  }
  

    /*---------------------------------------
    MAP STUFF              
  -----------------------------------------*/

  .tm-map {
    width: calc(10vw - 40%); /* Set the width of the map to 100% of the viewport width minus 40px padding */
    height: calc(100vh - 300px); /* Set the height of the map to 100% of the viewport height minus 40px padding */
    margin: 0px; /* Add 20px margin on all sides to create padding */
    margin-bottom: 100px;
}

.custom-navbar {
  z-index: 2000000; /* Higher than the default to ensure it stays on top */
  padding-top: 0.20rem;   /* default is ~0.5–1rem */
  padding-bottom: 0.20rem;
}

/* Style for all modern browsers (Chrome, Edge, Firefox etc.) */
/*Style for the circular object to drag*/
.year-slider::-webkit-slider-thumb {
  -webkit-appearance: none; /* Remove default styling */
  appearance: none;
  width: 15px;          /* Adjust width */
  height: 15px;         /* Adjust height */
  background: var(--third-color);  /* Your desired color (e.g., red) */
  border-radius: 50%;   /* Make it circular */
  cursor: pointer;
}

/* Style for Firefox */
.year-slider::-moz-range-thumb {
  width: 20px;     
  -webkit-appearance: none;
  height: 20px; 
  background: var(--third-color); 
  border-radius: 50%;
  cursor: pointer;
}

/* Style for the actual rectangle that the circle moves in */
input[type='range'] {
  -webkit-appearance: none;
  background: #ffffffcc;
  margin-bottom: .3rem;
  margin: 10px;
  border-radius: 0%;
}

/*Dropdown menu specific (making sure they look the same in Safari and Chrome)*/
select{
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  border-image: initial;
  border-radius: 0px;
}

.mypopup-with-tip .leaflet-popup-content-wrapper {
width: 150px; /* Set your desired width here */
font-family:'DM Sans', sans-serif; /* GRAPH POPUP TEXT */
font-size: 13px;
}

/*Legend specific*/
.legend {
  padding: 4px 8px;
  font-size: 13px;
  background: var(--third-color); 
  /*box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);*/
  border-radius: 10px;
  color:  var(--ink-color); 
  /* height: 30px */
}

.legend span {
  color:  var(--sand-color);
  position: relative;
  bottom: 3px;
}
.legend i {
  width: 18px;
  height: 18px;
  float: left;
  margin-right: 8px;
  opacity: 0.7;
}
.legend .colorcircle {
  border-radius: 50%;
  width: 10px;
  height: 10px;
  margin-top: 0px;
}
.legend .circlepadding {
  border-radius: 50%;
  margin-top: 0px;
  background: rgba(255, 255, 255, 0.8);
}

/* am4 specific */
#chartdiv {
width: 100%;
height: 500px;
}

/* Style the tab */
.tab {
overflow: hidden;
background-color: var(--fourth-color);
width: 90%;
}

/* Style the buttons inside the tab */
.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 4px 6px;
transition: 0.3s;
color: white;
font-family:'DM Sans', sans-serif;
font-size: 12px;
}

/* Change background color of buttons on hover */
.tab button:hover {
background-color: var(--primary-color);
}

/* Create an active/current tablink class */
.tab button.active {
background-color: var(--secondary-color);
}

/* Style the tab content = description text below tabs */
.tabcontent {
display: none;
padding: 6px 12px;
border-top: none;
font-family:'DM Sans', sans-serif;
font-size: 15px;
width: 365px;
}

/* css to customize Leaflet default styles  */
.popupCustom .leaflet-popup-tip,
.popupCustom .leaflet-popup-content-wrapper {
  background: var(--white-color);
  color: var(--fourth-color);
  padding-right: 20px;
}

.new-read-more-btn {
  display: flex;
  flex-wrap: wrap;
  gap: 10px; /* Adjust spacing between buttons */
  margin-top: 20px; /* Add margin top for spacing above */
  justify-content: center; /* Center align items horizontally */
  align-items: flex-start; /* Align items to the start of the flex container */
}

.new-custom-btn {
  padding: 10px 20px; /* Adjust padding for button size */
  text-decoration: none;
  color: white;
  border: none;
  cursor: pointer;
  background-color: var(--secondary-color); /* Use your custom variable */
  border-radius: 5px;
  box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.2);
  transition: background-color 0.3s ease;
}

.new-custom-btn:hover {
  background-color: var(--primary-color); /* Use your custom variable */
}

/* Container for the tooltips */
.new-custom-btn {
  position: relative;
  display: inline-block;
  margin: 10px; /* Adjust margin for spacing */
  width: 290px; /* Set a fixed width for buttons for consistency */
}

/* Tooltip text */
.new-custom-btn::after {
  content: attr(data-tooltip);
  position: absolute;
  background-color: var(--ink-color);
  color: var(--white-color);
  padding: 5px 10px;
  border-radius: 5px;
  width: 100%; /* Match the width of the button */
  white-space: normal; /* Allow text to wrap */
  bottom: 125%; /* Position above the button */
  left: 50%;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none; /* Prevent pointer events */
  text-align: center; /* Center align text */
}

/* Arrow of the tooltip */
.new-custom-btn::before {
  content: '';
  position: absolute;
  bottom: 115%; /* Position above the button */
  left: 50%;
  transform: translateX(-50%);
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent var(--ink-color) transparent;
  opacity: 0;
  transition: opacity 0.3s;
  pointer-events: none; /* Prevent pointer events */
}

/* Show the tooltip text */
.new-custom-btn:hover::after,
.new-custom-btn:hover::before {
  opacity: 1;
}

.fixed-buttons-container {
  position: fixed;
  top: 85px;
  right: 35px;
  display: flex; /* Use flexbox for layout */
  align-items: center; /* Center items vertically */
  z-index: 10000;
}

@media screen and (max-width: 480px) {
  .fixed-buttons-container {
    position: fixed;
    top: 70px;
    right: 35px;
    display: flex; /* Use flexbox for layout */
    align-items: center; /* Center items vertically */
  }
}

.fixed-button {
  transition: background-color 0.3s ease; /* Smooth transition */
  background-color: var(--primary-color); /* Darker color on hover */
  margin-left: 8px; /* Adjust margin between buttons */
  opacity: 92%;
}

.fixed-button:hover {
  background-color: var(--third-color); /* Darker color on hover */
  color: white;
}

.fixed-buttons-container-back {
  position: fixed;
  top: 90px;
  left: 35px;
  display: flex; /* Use flexbox for layout */
  align-items: center; /* Center items vertically */
}

    
.footer-link{
  color: var(--third-color);
  font-size: var(--h5-font-size);
  word-break: break-word;
}

.footer-link-1{
  color: var(--secondary-color);
  font-size: var(--p2-font-size);
}

.button-container1 {
  float: center;
}

.button-container2 {
  float: center;
}

.center-box {
  width: 80%;
}

@media screen and (max-width: 480px) {
  .button-container1 {
    float: none;
    text-align: center;
  }
  
  .button-container2 {
    float:none;
    text-align: center;
  }

  .center-box {
    width: 90%;
  }
}


@media screen and (max-width: 900px) {
  .center-box {
    width: 90%;
  }
}



/* Lake Erie New CSS */

html { scroll-behavior: smooth; }

ul {
    padding: 15px;
    margin: 0px;
}

nav > ul > li { list-style: none; }

.tm-page-link:hover,
.tm-page-link.active {
    background-color: var(--primary-color);
    color: white;
}

.tm-black-bg {
    background-color: var(--ink-color);
    color: white;
    border-radius: 15px;
}

.tm-drinks-nav { 
  display:inline-block; 
  padding-left: 25px;
  padding-right: 25px;
  font-size: smaller;
}

.tm-drinks-nav > ul > li > a {
    color: white;
    font-size: 1.2rem;
    padding-top: 15px;
    border-bottom: 3px solid transparent;
}

.tm-drinks-nav { height: 80px; }
.tm-main { max-width: 660px; }

.tm-drinks-nav > ul {
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: 100%;
}

.tm-drinks-nav > ul > li a.active,
.tm-drinks-nav > ul > li a:hover {
    color: var(--primary-color);
}

.tm-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20px;
}

.tm-list-item-2 { align-items: flex-start; }

.tm-list-item-img {
    margin-right: 20px;
    width: 160px;
    height: 160px;
    border-radius: 15px;
}

.tm-list-item-img-big {
    margin-right: 25px;
    width: 200px;
    height: 200px;
}

.tm-list-item-text {
    padding-top: 20px;
    padding-left: 20px;
    padding-right: 15px;
    flex: 1;
}

.tm-list-item-text-2 { flex: 1; }

.tm-list-item-name {
    display: flex;
    justify-content: space-between;
    margin-top: 0;
    color: white;
    font-size: 28px;
}

.tm-list-item-price { 
    color: var(--primary-color); 
}
.tm-site-footer { margin-top: 15px; }

.tm-footer-text {
    padding: 10px 65px 10px 20px;
    display: inline-block;
}

.tm-footer-link { color: white; }
.tm-tab-content { animation: fadeEffect 1s; }
.tm-page-content { animation: fadeEffect 1s; }

.tm-text-primary { color: var(--primary-color); }
.tm-mb-20 { margin-bottom: 20px; }
.tm-mb-30 { margin-bottom: 30px; }
.tm-img-right { 
    margin-left: 30px; 
    margin-right: 0;
}

/* Go from zero to full opacity */
@keyframes fadeEffect {
    from { opacity: 0.3; }
    to { opacity: 1; }
}

/* About */
.tm-about-box-1 { padding: 40px 30px 50px 0; }
.tm-about-box-2 { padding: 50px 40px 30px; }
.tm-about-header { margin-left: 220px; }

/* Special */
.tm-special-items {
    display: flex;
    flex-wrap: wrap;
    margin: -30px -10px 0;
}

.tm-special-item {
    max-width: 320px;
    margin: 30px 10px;
}

.tm-special-item-title { font-size: 1.4rem; }
.tm-special-item-description { padding: 25px 30px; }

/* Contact */
.tm-contact-text-container {
    padding: 45px 50px;
    margin-bottom: 20px;    
}

.tm-contact-form-container {
    max-width: 460px;
    padding: 40px 50px;
    box-sizing: border-box;
}

.tm-form-group { margin-bottom: 25px; }

.tm-form-control {
    display: block;
    box-sizing: border-box;
    width: 100%;
    padding: 15px;
    line-height: 1.5;
    color: var(--white-color);
    background-clip: padding-box;
    border: 0;
    border-bottom: 1px solid white;
}

.tm-form-control::-webkit-input-placeholder { color: white; } /* Edge */  
.tm-form-control:-ms-input-placeholder { color: white; } /* Internet Explorer 10-11 */  
.tm-form-control::placeholder { color: white; }

.tm-btn-primary:hover {
    color: white;
    background-color: var(--primary-color);
}

.tm-align-right {
    display: block;
    margin-left: auto;
    margin-right: 0;
}

.tm-mb-30 { margin-bottom: 30px; }

@media (max-width: 1130px) and (min-width: 992px) {
    .tm-left-inner { max-width: 380px; }
    .tm-site-name { font-size: 2.6rem; }
    .tm-site-logo { margin-right: 20px; }
    .tm-page-link { width: 100%; }
    .tm-page-link-icon { margin-right: 15px; }
    .tm-left { width: 45%; }
    .tm-right { width: 55%; }


    .container-1 {
      padding: 50px;
    }
}

@media (max-width: 991px) {
    .tm-left-inner { position: static; }
    .tm-left, .tm-right { width: 100%; }
    .tm-left { margin-bottom: 50px; }
    .tm-row { display: block; }


    .container-1 {
      padding: 50px;
    }
}

@media (max-width: 574px) {
    .tm-site-nav-ul { display: block; }

    .container-1 {
      padding: 50px;
    }
}

@media (max-width: 550px) and (min-width: 501px) {
    .tm-list-item-img-big {
        width: 160px;
        height: 160px;
    }

    .container-1 {
      padding: 0px;
    }

    .tm-about-header { margin-left: 180px; }
}

@media (max-width: 500px) {
    .tm-about-header { margin-left: 0; }
    .tm-list-item-2 { flex-direction: column; }
    .tm-about-box-1 { padding-left: 30px; }

    .tm-list-item-img-big {
        margin-right: 0;
        margin-bottom: 25px;
    }

    .tm-img-right { margin-left: 0; }

    .container-1 {
      padding: 0px;
    }
}

@media (max-width: 479px) {
    .tm-site-name { font-size: 2.6rem; }
    .tm-site-logo { margin-right: 20px; }

    .tm-list-item {
        flex-direction: column;
        margin-top: 40px;     
    }

    .tm-list-item-img {
        margin-right: 0;
        margin-bottom: 15px;        
    }

    .tm-drinks-nav { height: auto; }

    .tm-drinks-nav > ul {
        flex-direction: column;
        padding: 15px;
    }

    .tm-drinks-nav > ul > li { margin-bottom: 10px; }
    .tm-drinks-nav > ul > li > a { display: block; }

    .container-1 {
      padding: 0px;
    }
}



.tm-list-item-description {
  color: white;
}

.tm-drinks-nav ul {
  display: flex;
  justify-content: space-around; /* Evenly distribute space between items */
  padding: 0; /* Remove default padding */
  margin: 0; /* Remove default margin */
  list-style: none; /* Remove default list styling */
}

.tm-drinks-nav li {
  flex: 1; /* Make each `li` take equal space */
  text-align: center; /* Center the text in each `li` */
}

.tm-drinks-nav a {
  display: block; /* Make the link a block element */
  padding: 10px; /* Add some padding for better spacing */
  text-decoration: none; /* Remove default link underline */
  color: inherit; /* Inherit text color */
}

.tm-list-item {
  display: flex;
  align-items: flex-start; /* Align children (image and text) to the top */
}

.tm-list-item-img {
  margin-right: 10px; /* Add some space between the image and the text */
}

.tm-black-bg.tm-list-item-text {
  flex: 1; /* Allow the text container to take the remaining space */
}

/* Base styles for larger screens */
.tm-page-content {
  max-width: 800px; /* Adjust this value to match the desired width */
  margin: 0 auto; /* Center align the content */
}

.tm-drinks-nav {
  max-width: 800px; /* Same width as .tm-page-content */
  margin: 0 auto; /* Center align the nav */
  padding: 10px; /* Optional: Add padding for better appearance */
  box-sizing: border-box; /* Ensure padding and border are included in the width */
}

.tm-list-item {
  display: flex;
  align-items: flex-start;
}

.tm-list-item-img {
  margin-right: 10px;
}

.tm-black-bg.tm-list-item-text {
  flex: 1;
}

.tm-drinks-nav ul {
  display: flex;
  justify-content: space-around;
  padding: 0;
  margin: 0;
  list-style: none;
}

.tm-drinks-nav li {
  flex: 1;
  text-align: center;
}

.tm-drinks-nav a {
  display: block;
  padding: 10px;
  text-decoration: none;
  color: inherit;
}

.tm-tab-link {
  text-decoration: none;
  color: inherit;
}

.tm-tab-link.active {
  text-decoration: none;
}

.tm-list-item-name {
  padding-bottom: 20px;
}

/* Styles for smaller screens */
@media (max-width: 470px) {
  .tm-page-content {
    width: 100%;
    padding: 0 10px; /* Optional: Add padding for better appearance */
  }

  .tm-drinks-nav {
    width: 100%;
    margin: 0 auto; /* Center align the nav */
    padding: 10px; /* Optional: Add padding for better appearance */
    box-sizing: border-box; /* Ensure padding and border are included in the width */
  }

  .tm-drinks-nav ul {
    flex-direction: column;
  }

  .container-1 {
    padding: 0px;
  }
}



/* Style the buttons that are used to open and close the accordion panel */
.accordion {
  background-color: var(--white-color);
  color: var(--p-color);
  cursor: pointer;
  padding: 18px;
  width: 100%;
  text-align: left;
  border: none;
  outline: none;
  transition: 0.4s;
}

/* Style the accordion panel. Note: hidden by default */
.panel {
  padding: 0 18px;
  background-color: white;
  display: none;
  overflow: hidden;
}


.info-box {
  padding: 10px;
  border: 1px solid var(--sand-color);
  z-index: 1000;
  display: block;
  max-width: 400px; /* Adjust the maximum width as per your design */
  overflow-wrap: break-word; /* Ensure words break onto a new line when needed */
  word-wrap: break-word; /* Fallback for older browsers */
  line-height: 1.5; /* Set line height for readability */
  text-align: left; /* Align text to the left */
  color: var(--p-color); /* Set text color */
}

.tab-btn {
  background: var(--secondary-color);
  border-radius: 100px;
  color: var(--white-color);
  font-size: var(--copyright-text-font-size);
  font-weight: var(--font-weight-bold);
  padding: 12px 24px;
  margin-top: 8px;
}



.tab-btn:hover {
  background: var(--primary-color);
  color: var(--white-color);
}




.tab-btn1 {
  background: var(--secondary-color);
  border-radius: 100px;
  color: var(--white-color);
  font-size: var(--copyright-text-font-size);
  font-weight: var(--font-weight-bold);
  padding: 12px 24px;
  margin-top: 8px;
}

.tab-btn1:hover {
  background: var(--primary-color);
  color: var(--white-color);
}



.default-tab-btn {
  background: var(--primary-color);
  color: var(--white-color);
}

.custom-btn-new {
  background: var(--third-color);
  border-radius: 100px;
  color: var(--white-color);
  font-size: var(--copyright-text-font-size);
  font-weight: var(--font-weight-bold);
  padding: 12px 24px;
  margin-top: 8px;
}

.custom-btn-new:hover {
  background: var(--primary-color);
  color: var(--white-color);
}


.btn-new {
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}

.custom-bg-primary-new {
  background-color: var(--secondary-color); /* Default green background */
}

.custom-bg-primary-new.active {
  background-color: var(--third-color); /* light green for active button */
}

#pop-up-info .tab-buttons {
    display: none;
}

.noSpace {
  margin: 0px;
  margin-top: 30px;
}

.spaceBottom {
  margin-bottom: 30px;
}







/* Container for the tab content and graph */
#scroll-container {
  overflow-y: auto; /* Enable vertical scrollbar */
  max-height: 600px; /* Adjust based on your needs */
  padding: 15px;
  border: 1px solid var(--white-color);
  background: var(--white-color);
}

/* General styling for tab buttons */
.tab-btn {
  margin: 5px;
}

/* Hide tab contents initially */
.tabcontent {
  display: none;
}

/* Show the active tab content */
.tabcontent.active {
  display: block;
}

.half-screen-image {
  width: 100%;
  height: 50vh; /* 50% of the viewport height */
  overflow: hidden; /* Hide anything that overflows */
  position: fixed;
}

.half-screen-image img {
  width: 100%;
  height: auto; /* Maintain aspect ratio */
}

.fixed-top-image {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 50vh; /* 50% of the viewport height */
  overflow: hidden; /* Hide anything that overflows */
  z-index: 1000; /* Ensure the image is on top of other content */
}


.no-pad {
  padding-top: 5px;
}

.navbar .dropdown-item {
        font-family: inherit;
        font-size: 1rem;
        font-weight: 500;
        color: white;
        text-transform: uppercase;
        padding: 10px 20px;
    }

    .navbar .dropdown-item:hover {
        color: var(--third-color);
        background-color: var(--secondary-color);
    }

    .navbar-nav .nav-item {
        margin-left: 1.2rem;  /* or adjust to your desired spacing */
    }


      .split-section {
    display: flex;
    align-items: stretch;                 /* equal heights */
    gap: clamp(20px, 4vw, 36px);
    margin: 40px 0;
  }

  /* Half & half */
  .split-section .media,
  .split-section .content {
    flex: 0 0 50%;
  }

  /* Image fills its column height */
  .split-section .media {
    min-height: 320px;                    /* adjust overall section height */
    border-radius: 12px;
    overflow: hidden;
  }
  .split-section .media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;                    /* fills & crops gracefully */
  }

  /* Center text vertically with some padding */
  .split-section .content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 24px 28px;
    border-radius: 12px;                  /* optional if you add a bg */
  }

  /* Stack on small screens */
  @media (max-width: 768px) {
    .split-section { flex-direction: column; }
    .split-section .media,
    .split-section .content { flex: 1 1 auto; }
    .split-section .media { min-height: 40vh; } /* nice presence when stacked */
  }

  /* Style disabled dropdown option */
  select option:disabled {
    background-color: #939393; 
    color: var(--ink-color);            
  }



  /* NAV BAR */

  .dark-overlay {
        display: none;
        position: fixed;
        bottom: 0;
        right: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.3);
        z-index: 9999;
        justify-content: center;
        align-items: flex-end;
        padding-bottom: 10px;
        pointer-events: none;
    }

    .dark-overlay.enabled {
        display: flex;
        pointer-events: auto;
    }

    .dark-overlay .center-box {
        background: white;
        padding: 20px 50px;
        border-radius: 8px;
        text-align: center;
    }

    .center-box button {
        margin: 10px;
    }

    .no-scroll {
        overflow: hidden;
    }

    /* Highlighted element style */
    .highlighted {
        border: 10px solid #A3B18A;
        padding: 10px;
        position: relative;
        z-index: 10000;
    }

    /* Dropdown styling */
    .navbar .dropdown-menu {
        background-color: #2C6E91;
        border: none;
    }

    .navbar .dropdown-item {
        font-family: inherit;
        font-size: 1rem;
        font-weight: 500;
        color: white;
        text-transform: uppercase;
        padding: 10px 20px;
    }

    .navbar .dropdown-item:hover {
        color: white;
        background-color: #5C946E;
    }

    .navbar-nav .nav-item {
        margin-left: 1.2rem;  /* or adjust to your desired spacing */
    }





    /* ===========================
       Pop-up dropdowns wqpredict
       =========================== */

    
    /* Accordion look (used inside the floating panel) */
    .accordion .accordion-button.orange {
      background-color: var(--third-color) !important; color: var(--ink-color) !important; border: 0 !important; box-shadow: none !important;
      padding: .65rem .9rem; border-radius: 8px; margin: .25rem 0;
    }
    .accordion .accordion-button.orange:not(.collapsed) { background-color:var(--third-color) !important; color:var(--ink-color) !important; }
    .accordion .accordion-button.orange::after {
      --bs-accordion-btn-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23ffffff' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E") !important;
      background-image: var(--bs-accordion-btn-icon) !important; background-color: transparent !important;
    }

    #nutrient-panel {
      position: fixed;
      top: 96px;                 /* below fixed navbar */
      right: 16px;
      width: min(50vw, 720px);   /* ~half screen */
      min-width: 360px;
      max-width: 90vw;

      height: 60vh;
      min-height: 240px;
      max-height: calc(100vh - 140px);

      background: var(--white-color);
      border: 1px solid rgba(0,0,0,.12);
      box-shadow: 0 12px 28px rgba(0,0,0,.2);
      border-radius: 12px;
      z-index: 1100;
      display: none;             /* hidden until needed */
      overflow: hidden;          /* header/tabs fixed; body scrolls */

      resize: both;              /* allow user to resize from bottom-right */
    }
    #nutrient-panel.show { display: block; }

    #nutrient-panel .panel-header {
      background: var(--dark-color);
      color: var(--white-color);
      padding: 10px 3px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      cursor: move;              /* drag handle */
      user-select: none;
    }
    #nutrient-panel .panel-close {
      background: transparent; border: 0; color: #fff;
      font-size: 1.8rem; line-height: 1; padding: 0 4px; cursor: pointer;
    }
    #nutrient-panel .panel-close:hover { opacity: .85; }

    /* Special style just for the last dropdown (Soluble P) */
    #headSP .accordion-button {
      background-color: var(--dark-color) !important; /* Bootstrap blue */
      color: var(--white-color) !important;
      border-radius: 12px !important; /* same radius as your panel */
      margin-bottom: .25rem;          /* optional: spacing under it */
    }

    #headSP .accordion-button:not(.collapsed) {
      background-color: var(--dark-color) !important; /* darker blue when open */
      color: var(--white-color) !important;
    }

    /* Tabs just under the header */
    #nutrient-panel .nutrient-tabs {
      display: flex;
      gap: 8px;
      padding: 8px 12px;
      background: var(--dark-color);      /* match header */
      border-bottom: 1px solid rgba(255,255,255,.15);
    }
    #nutrient-panel .nutrient-tab {
      appearance: none;
      border: 2px solid rgba(255, 255, 255, 0.25);
      background: transparent;
      color: var(--white-color);
      padding: 6px 12px;
      border-radius: 9999px;
      font-weight: 600;
      cursor: pointer;
      transition: background .15s ease, color .15s ease, border-color .15s ease;
    }
    #nutrient-panel .nutrient-tab:hover {
      color: var(--white-color);
      border-color: rgba(255,255,255,.65);
    }
    #nutrient-panel .nutrient-tab[aria-selected="true"] {
      background: var(--fourth-color);
      color: #fff;
      border-color: var(--fourth-color);
    }

    #nutrient-panel .panel-body {
      height: calc(100% - 46px - 44px); /* header (~46px) + tabs (~44px) */
      overflow: auto;
      padding: 14px;
    }

    #static-pane {
      margin-right: 2.2rem;   
      margin-left: 2.2rem;   
      margin-top: 1.1rem;   
      margin-bottom: 3.1rem;  
      line-height: 1.5;
    }
    
    @media (max-width: 768px) {   /* target tablets + phones */
      #mobile-spacing {
        padding-bottom: 2%;
      }
    }

    .responsive-text {
      font-size: 6vw; /* 4% of viewport width */
    }

    .responsive-text {
      font-size: clamp(18px, 2vw, 28px);
    }

    .very-bottom-padding {
      margin-bottom: 15%;
    }