/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */


/* This file is for your main application CSS */

::-webkit-scrollbar {
        display: none;
      }

        html, body {
                margin: 0;
                overflow-x: hidden!important;
              }

.overlay {
        position: fixed;
        width: 100vw;
        height: 100vh;
        z-index: 1000;
        display: flex;
        overflow-y: hidden;
        overscroll-behavior: contain;
}
.bar {
        width: 100vw;
        height: 105vh;
        background: #ffffff;
}
.counter {
        position: fixed;
        width: 100%;
        height: 100vh;
        display:flex;
        justify-content: flex-end;
        align-items: flex-end;
        z-index: 1001;
        padding: 0 2em 0 5em;
        font-size: 20vw;
        font-style: "Carpenter";
        color: rgb(0, 0, 0);
}
.section {
        height: 100vh;
        width: 300vh;
        padding: 3rem 15%;
        position: sticky;
        top: 0;
        opacity: 0;
 
}

.reveal {
        opacity: 0;
        transform: translateY(80px);
        visibility: hidden;
        transition: none;
      }
*:before,
*:after {
        padding:0;
        margin: 0;
        box-sizing: border-box;
}
.toggle-btn {
        position: fixed;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
        background-color: #333;
        color: white;
        border: none;
        border-radius: 6px 0 0 6px;
        padding: 10px 12px;
        cursor: pointer;
        z-index: 500;
        transition: background-color 0.3s ease;
      }
      
      .toggle-btn:hover {
        background-color: #555;
      }
.sidebar {
        position: fixed;
        top: 50%;
        right: 20px;
        transform: translateY(-50%);
        display: flex;
        flex-direction: column;
        gap: 20px;
        padding: 20px;
        background-color: #f9f9f9;
        border: 2px solid #ccc;
        border-radius: 12px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        z-index: 500;
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        cursor: none;
      }
      
      .sidebar:hover {
        transform: translateY(-50%) scale(1.1);
        box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
      }
      .logo::after {
        content: "";
        position: absolute;
        width: 0%;
        height: 2px;
        left: 0;
        bottom: -4px;
        background-color: #000;
        transition: width 0.3s ease;
      }
      
      .logo:hover {
        color: #f1c411; /* Or keep same color if preferred */
      }
      
      .logo:hover::after {
        width: 100%;
      }
      
      .sidebar i,a {
        font-size: 24px;
        color: #333;
        transition: color 0.3s, transform 0.3s;
        cursor: none;
      }
      
      .sidebar i:hover,a:hover {
        color: #dfce34;
        transform: scale(1.2);
      }
.primary-header {
        align-items: center;
        justify-content: space-between;
        position: fixed;
        width: 100%;
        padding: 0.5rem 2rem;
        z-index: 999;
        mix-blend-mode: difference;
        

        

}
nav {
        margin-left: auto;
}

@keyframes scroll-watcher {
        to { scale: 1 1;}
}

.flex {
        display: flex;
        gap: var(--gap, 10rem)
}

.primary-navigation {
        list-style: none;
        padding: 2em;
        margin: 0;
        right: 10%;
        background: transparent;
        align-items: center;
        

}

@media (max-width: 35em) {
        .primary-navigation {
                --gap: 2em;
                position: fixed;
                inset: 0 0 0 30%;
                flex-direction: column;
                padding: min(30vh, 10rem) 2em;
        }
}

.logo {
        color: white;
        mix-blend-mode: difference;
        font-size: 1.5rem;
        font-weight: bold;
        margin: 2rem;
        display: flex;
        position: relative;
        transition: color 0.3s ease;
        pointer-events: none;

}
.herobox {
        position:relative;
        
        align-items: center;
        justify-content: center;
        z-index: 20;
        top: 30%;
        display: flex;
        
}

.hero-text {
        color:white;
        text-align: center;
}

.hero-text h2{
        color:white;
        font-size: 50px;
        font-family: "Merriweather Sans", sans-serif;
}

.content {
        background-color: white;
        position: absolute;
        justify-content: left;
        align-items: center;
        z-index: 300;
        display: flex;
        padding-left: 10%;
        width: 100%;
        overflow-x: hidden;
        white-space: nowrap;
}

.typewriter {
        white-space: nowrap;
        display: inline-block;
    }
.home{
        height:100vh;
        background-color: black ;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
}
.blog {
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: black;

}
.blog .home-content {
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        display: flex;
        padding: auto;
        flex-direction: column;
        top: 30vh;
        z-index: 500;
}
.blog h1 {
        margin-top: auto;
        color: white;
}
.back-to-top {
        position: relative;
        font-size: 40px;
        background-color: transparent;
        color: white;
        bottom: 5px;
        padding: 10px 30px;
        text-align: center;
        z-index: 1000;
        margin-top: 200px;
        text-decoration: none;
        box-shadow: 0 4px 8px rgba(0,0,0,0.2);
        animation: bounce 1.5s infinite;
        transition: background-color 0.3s ease, transform 0.3s ease;
      }
      
.back-to-top:hover {
        color: aqua;
        transform: scale(1.5);
        cursor: none;
      }
      
      @keyframes bounce {
        0%, 100% {
          transform: translateY(0);
        }
        50% {
          transform: translateY(-8px);
        }
      }

.block {

        background: None;
        max-width: 60vh;
        object-fit: cover;
        border-radius: 0;
  
        justify-content: center;
        align-items: center;
        position: absolute;
        
}
.thecard{
        width: 100%;
        height: 100%;
        border-radius: 0;
        transform-style: preserve-3d;   
      }

      
.about-img:hover {
        
        box-shadow: 0 15px 7px -2px #222;
        transform: translateY(-8px);
}
.theback{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 100px;
        backface-visibility: hidden;
        overflow: hidden;
        object-fit: cover;
        
        background: linear-gradient(
                270deg,
                #ddbb80 10%,
                rgb(131, 84, 4) 100%

        );
        color: #333;
        text-align: center;
        z-index: -1;
      }
.theback img {
        width: 100%;
        height: 100%;
        object-fit: cover;
}
.block p{
        font-family: "Dancing Script", cursive;
        padding: 30px;
        font-weight: normal;
        font-size: 20px;
        text-align: center;
        color: black;
}

.home-content {
        display: flex;
        justify-content: center; /* Center the entire block */
        text-align: center;
        width: 100%;
        padding: 0 2rem;
        z-index: 998;
        flex-direction: column;
    }
.about-content {
        display: grid;
        flex-direction: column;
        align-items: center;
        grid-template-columns: 1fr 1fr;
        width: 100%;
        z-index: 998;
        column-gap: 5px;

    }
.home-content h1{
        font-size: clamp(3rem, 8vw, 7.8rem);
        font-weight: 700;
        margin-top: 1.5rem;
        line-height: 1;
        color: white;


}
.about-content h2{
        font-size: clamp(2rem, 6vw, 4.2rem);
        font-weight: 700;
        margin-top: 1.5rem;
        line-height: 1;
        color: black;
        text-align: left;
   


}

.site-footer {
        background-color: #333;      
        color: #efefef;        
        justify-content: space-evenly;
        padding: 4rem 2rem;
        width: 100vw;
        font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;   
        margin-bottom: 5px;       
    }
    
    .site-footer div {
        text-align: center;
        gap: 1rem;
    }
    hr {
        width: 90%;
        border: 0;
        border-bottom: 1px solid #ccc;
        margin: 20px auto;


    }
    .copyright {
        text-align: center;

    }

    .col-2 {
        width: 100%;
        justify-content: center;
    }
    .col-2 a{

        color: #efefef;

    }
    

    

      .desktop-slider {
        width: 100%;
        flex-wrap: nowrap;
        display: flex;
        flex-direction: row;
        position: relative;
        margin-bottom: 0;
      }
      .slider-controls {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 1.5rem;
        bottom: 0;
        margin-bottom: 0;
        padding-bottom: 1rem;
        width: 100vw;
        padding-top: 10rem;
        position: absolute;
      }
      
      .slider-button {
        background-color: transparent;
        color: black;
        border: none;
        padding: 5px 10px;
        font-size: 1rem;
        border-radius: 8px;
        cursor: none;
        transition: background-color 0.3s ease, transform 0.3s ease;
      }
      
      .slider-button:hover {
        background-color: gold;
        transform: scale(1.05);
      }
      
      .slide {
        display: flex;
        flex-direction: column;
        flex: 0 0 100vw; 
        width: 100vw;
        padding: 2rem 2rem;
        box-sizing: border-box;
        margin-bottom: 0;
        gap: 2rem;
        justify-content: center;
        align-items: center;
      }
      
      .staff-bio {
        display: flex;
        align-items: center;
        gap: 2rem;
        z-index: 500;
        max-width: 90vw;
      }
      
      .staff-bio.reverse {
        flex-direction: row-reverse;
      }
      
      .staff-bio img {
        width: 250px;
        height: 250px;
        border-radius: 12px;
        object-fit: cover;
        flex-shrink: 0;


      }
      
      
      .bio {
        max-width: 80vw;
      }
      .position {
        font-weight: 600;
        font-size: 0.9rem;
        color: #777;
        margin-bottom: 1rem;
        letter-spacing: 0.5px;
        text-transform: uppercase;
      }
      
      .bio h3 {
        font-size: 1.75rem;
        font-weight: 700;
        color: #111;
        margin-bottom: 0.3rem;
        text-transform: none;
      }
      
      .bio p {
        line-height: 1.6;
        font-size: 13px;
        color: #444;
        z-index: 5000;
      }
.intro {
        margin-top: 50px;
}
.home-content p{
        font-size: 1rem;
        font-weight: 700;
        margin-top: 1.5rem;
        line-height: 1;
        color: white;

}
.about-content p{
        font-size: 0.99rem;
        font-weight: 700;
        font-family: "Merriweather Sans", sans-serif;
        margin-top: 1.5rem;
        line-height: 2;
        color: black;
        text-align: left;

}
.text {
        padding-left: 5vh;
        padding-top: 5vh;
        padding-right: 5vh;
        justify-content: center;
        text-align: center;
}

.home-content li{
        font-weight: 600;
        margin-top: 30px;
}

.about-content li{
        font-weight: 600;
        margin-top: 0;
}
.button-container {
        background: transparent;
        padding-left: 45%;
        padding-right: 45%;
        justify-content: center;
        align-items: center;
        display: inline-block;
        animation: 3s spin linear infinite;
}
.about-content .button-container {
        background: transparent;
        padding:0;
        padding-top: 5%;
        margin: 0;
        justify-content: center;
        align-items: center;
        display: inline-block;
        animation: 3s spin linear infinite;
}

.about-button-container {
        background: transparent;
        padding-left: 25%;
        justify-content: center;
        align-items: center;
        display: inline-block;
        animation: 3s spin linear infinite;
}

@property --angle {
        syntax: "<angle>";
        initial-value: 0deg;
        inherits: false;
        

}

@keyframes spin {
        from {
                --angle: 0deg;
        }
        to {
                --angle: 360deg;
        }
}
@property --myColor1 {
        syntax: '<color>';
        initial-value: rgb(221, 54, 54);
        inherits: false;
      }
      
@property --myColor2 {
        syntax: '<color>';
        initial-value:rgb(54, 48, 164) ;
        inherits: false;
      }
@property --myColor3 {
        syntax: '<color>';
        initial-value:rgb(228, 80, 102) ;
        inherits: false;
      }
.button {
        border: none;
        color: white;
        padding: 0.5em 2.5em;
        text-decoration: none;
        font-size: 16px;
        border-style: solid;
        border-width: thin;
        border-color: linear-gradient(aqua, rgb(132, 132, 232),rgb(80, 223, 228) );
        background: #1c1f2b;
        margin: 4px 4px;
        cursor: none;
        position: relative;
        border-radius: 1000px;
        display: flex;
        justify-content: center;
        align-items: center;
        box-shadow:0 1px 3px #222;
        transition: 
                box-shadow 0.3s ease,
                transform 0.3s ease;
      }

.button:hover{
        background-color: rgb(0, 0, 0);
        box-shadow: 0 15px 7px -2px #222;
        transform: translateY(-8px);
        z-index: 10;
        
}

.about-img {
        border-radius: 50%;
        border-color: rgba(240, 248, 255, 0.433);
        border-style: solid;
        object-fit:cover;
        width: 100%;
        height: 100%;
        overflow: hidden;
        padding: 0;
        box-shadow:0 1px 3px #222;
        transition: 
                box-shadow 0.3s ease,
                transform 0.3s ease; 
        transition: all 0.5s ease-out;
      
        z-index: 1;
}

.about-img img {
        width: 100%;
        height: 100%;
   
        border-radius: 100px;
    }
.about-button {
        -webkit-transition: color 0.2s ease-out;
        -moz-transition: color 0.2s ease-out;
        -o-transition: color 0.2s ease-out;
        -ms-transition: color 0.2s ease-out;
        transition: color 0.2s ease-out;
        -webkit-transition: background-color 0.2s ease-out;
        -moz-transition: background-color 0.2s ease-out;
        -o-transition: background-color 0.2s ease-out;
        -ms-transition: background-color 0.2s ease-out;
        transition: background-color 0.2s ease-out;
      }


.about-button:hover{
        background-color: rgb(0, 0, 0);
        color: whitesmoke;
        transform:scale(1.2,1.2);
}
.image {
        justify-content: center;
        display: flex;
        padding-left: 10vh;
        padding-right: 5vh;
        align-items: center;
        position: relative;
}
.slider-img {
        border-radius: 100px;
        border-color: rgba(240, 248, 255, 0.433);
        border-style: solid;
        object-fit:cover;
        width: 100%;
        height: 100%;
        padding: 0;
        margin-bottom: 0;
        box-shadow:0 1px 3px #222;
        transition: 
                box-shadow 0.3s ease,
                transform 0.3s ease,
                all 0.5s ease-out;

      
        z-index: 1;
}

.slider .image {
        justify-content: center;
        display: flex;
        padding-left: 10vh;
        padding-right: 10vh;
}

.slider-img img {
        width: 100%;
        height: 100%;
   
        border-radius: 12px;
    }
.slider-img:hover {
        
        box-shadow: 0 15px 7px -2px #222;
        transform: translateY(-8px);
}


span {
        background: linear-gradient(
                270deg,
                #DF8908 10%,
                skyblue 100%

        );
        background-clip: text;
        color: transparent;
}
.hide {
        opacity: 0;
        transition: all 1s;
}
.show {
        opacity: 1;
}

.about{
        height:100vh;
        background: white;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
}

.noscroll {
        overflow-y: hidden;
}


.people {
        height: 100%;
        display: flex;
        flex-direction: column;
        gap: 4rem;
        justify-content: center;
        background-color: white;
      }

.slider-wrapper {
        position:relative;
        max-width: 10rem;
        margin: 0 0;
        margin-top: 0;
        background-color: white;
}
.slider {
        display: flex;
        aspect-ratio: 12/9;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scroll-behavior: smooth;
        box-shadow: 0 1.5rem 3rem -0.75rem hsla(0, 0%, 0%, 0.25);
}

.events{
        position: relative;
        display: block;
        float: left;
    
}
.wrapper {
        height:100vh;

}


#viewport {
        overflow: hidden;
        position: fixed;
        height: 100%;
        width: 100%;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
      }
      
.item {
        min-width: 100vw;
        height: 100%;
        display: flex;
        flex-shrink: 0;
        position: relative;
        box-shadow: rgb(149,157,165,0.2) 0px 8px 24px;
        overflow: hidden;
      }
      
      #events {
        position: fixed; /* ⬅️ Key */
        top: 0;
        display: none;
        left: 50vw;      /* ⬅️ Start off-screen to the right */
        width: 50vw;
        bottom: 20vh;
        height: 50vh;
        z-index: 10;
        background: white; 
        pointer-events: none; /* until it covers the screen */
      }
      .panel {
        height: 100vh;
        position: sticky;
      }

.home-img {
     
        position: absolute;
        width: 100%;
        height: 100vh;
        opacity: 1;
        z-index: 2;
        object-fit: fill;
        overflow: hidden;


}
nav li a{
        font-size: 15px;
        color: white;
        font-weight: 580;
}

nav li a:after {
        content: "";
        position:absolute;
        background-color:aqua;
        height: 3px;
        width: 0;
        left: 0;
        bottom: -10px;
        transition: 0.3s;
        z-index: 99999999;
}

.link:hover {
        cursor: none;


}

nav li a:hover:after {
        width: 100%;

}

nav a {
        position: relative;
        text-decoration: none; 
        padding: 0 10px;
    }

nav a::before {
        content: "";
        position: absolute;
        top: -20px;
        left: -10px;
        right: -10px;
        bottom: -20px;
        z-index: 99999;
    }
.circle {
        height: 10px;
        width: 10px;
        border-radius: 10px;
        background-color: aqua;
        position: fixed; 
        top: 0;
        left: 0;
        pointer-events: none;
        z-index: 99999999; /* so that it stays on top of all other elements */
        mix-blend-mode: difference;
      }
      
.mobile-slider {
        display: none;

}
@keyframes header-image-animation {
        25% {opacity: 1;}
        85% {opacity: 0; scale: 3;}
}
@media (max-width: 850px) {
        nav li a {
                font-size: 10px;
        }


}
@media (max-width: 760px) {

        html, body {
          overflow-x: hidden!important;
          font-size: 80%;
        }
        .site-footer {
                visibility: hidden;
            }
        .desktop-slider {
                display: none;
        }
        .list {
                height: 100%;
                width: 100%;
                display: flex;

        }
        .mobile-slider {
                overflow-y: hidden;
                -webkit-overflow-scrolling: touch; /* Smooth iOS scroll */
                height: 85vh;
                perspective-origin: center 50%;
                gap: 0;
                max-height: 80vh;
                display: flex;
                transform-style: preserve-3d;
                align-items: center;
              }
        .mobile-slider .list .slide {
                height: 100%;
                max-width: 100%;
                position: absolute;
                border-radius: 20px;
                overflow: hidden;
                filter: drop-shadow(2px 2px 20px rgba(0,0,0,0,5));
                display: flex;
                flex: 1;
                gap: 0;
                margin: 0 auto;
                margin-bottom: 0;
                flex-direction: column;
                background-color: black;
                padding: 1em 1em;
                box-shadow: 0 4px 12px rgba(0,0,0,0.1);
                border-width: thin;
                border-color: plum;
              }
            
              .staff-bio {
                align-items: center;
                height: 30%;
                width: 100%;
                position: relative;
                border-radius: 0;
              }
            
              .slider-controls {
                display: none; /* Optional: hide prev/next buttons on mobile */
              }
            
      
        .primary-header {
          flex-direction: column;
          padding: 1rem;
        }
        
      
        .logo {
          margin: 1rem auto;
          font-size: 1.5rem;
          visibility: visible;
          mix-blend-mode: difference;
        }
        #celia p {
                font-size: 16px;
        }
        #lottie p {
                font-size: 18px;
        }

      
        .primary-navigation {
          flex-direction: column;
          align-items: center;
          gap: 1.5rem;
          padding: 1rem;
        }
      
        .home-content h1 {
          font-size: 2rem;
        }
      
        .home-content p {
          font-size: 0.9rem;
        }
      
        .button-container {
          padding-left: 0;
          padding-right: 0;
          margin-top: 1rem;
        }
      
        .about-content {
          display: flex;
          flex-direction: column;
          padding: 1rem;
          gap: 2rem;
        }
      
        .image {
          padding: 0;
          margin-top: 1rem;
        }
        .bio {
                display: flex;
                flex-direction: column;
                background-color: black ;
                text-align: center;
                width: 100%;
                height: 70%;
                gap:0.1rem;
                border-radius: 0;
                max-width: 100%;
                padding: 2%;
                
        }
      
        .staff-bio img {
          width: 100%;
          height: 100%;
          backface-visibility: hidden;
          border-radius: 0;
        }
      
        .bio h3 {
          font-size: 1.4rem;
          color: white;
        }
      
        .bio p {
          line-height: 1.2;
          font-size: 20px;
          color: white;
          z-index: 0;
        }
      
      
        .slider-controls {
          flex-direction: row;
          position: static;
          padding: 1rem 0;
        }
      
        .panel {
                
          height: auto;
          min-height: 100vh;
          padding: 2rem 1rem;
        }
      
        .back-to-top {
          margin-top: 4rem;
          font-size: 1.5rem;
        }
      
        .circle {
          display: none; /* optional to hide cursor animation for mobile */
        }
      
        .toggle-btn {
          top: 1rem;
          right: 1rem;
          transform: none;
          padding: 8px;
          display: none;
        }
      
        .sidebar {
          position: fixed;
          right: 0;
          top: auto;
          bottom: 0;
          transform: translateY(0%);
          flex-direction: row;
          justify-content: space-around;
          width: 100%;
          padding: 10px;
          border-radius: 0;
        }
        .primary-header {
                visibility: hidden;
        }
      
        .about-img {
          border-radius: 20px;
        }
      
        .about-img img {
          border-radius: 20px;
        }
      
        .theback {
          border-radius: 20px;
        }
      
        .button {
          padding: 0.5em 1.5em;
          font-size: 14px;
        }
      
      }