/*--------------------------- OVERALL --------------------------*/
/*test*/
.test1{
    background-color: var(--primary-accent);
}
.test2{
    background-color: var(--red-light);
}
.notes{
    display: none;
}
:root{
    --text-dark: #000;
    --text-white: #f8f4f4;
    --text-light: #e0dddd;
    --text-grey: #e0dddd;
    --text-dark-grey: #626262;
    --text-red1: #BA181B;
    --text-red-light: #f84f39;
    --main-font: "IBM Plex Sans", serif;
    --heading-font: "Recursive", serif;

    --h1-size: 45px;
    --h1-height: 75px;
    --h2-size: 40px;
    --h2-height: 65px;
    --h3-size: 32px;
    --h4-size: 28px;
    --h5-size: 22px;
    --h6-size: 20px;
    --subtitle-size: 17px;
    --subtitle-height: 20px;
    --p-size: 18px;
    --p-height: 26px;
    --secondary-text-size: 14px;
    --secondary-text-height: 18px;
    --btn-size: 16px;
    --btn-height: 22px;
    /* spacing */
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 32px;
    --spacing-xl: 64px;
    --spacing-xxl: 96px;
    --spacing-sides: 65px;

    /* --standard-width: 1144px; */
    --standard-width: 1200px;

    --red-1: #BA181B;
    --red-2: #A4161A;
    --red-3: #891216;
    --red-4: #660708;
    
    --red-light: #e72b2b;
    --red-light-2: #f84f39;
    
    --black-1: #161A1D;
    --black-dark: #0B090A;
    --black-light: #333;

    /* --primary-accent: #f84f39; */
    --primary-accent: #e72b2b;
    --primary-btn-hover: #;
    --bg-light: #333;
    --bg-reg: #161A1D;
    --bg-dark: #0e0e0e;

}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    /* font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif; */
    /* font-family: "EB Garamond", serif; */
    color:#e0dddd;
}

@font-face{
    font-family: rev-font;
    src: url(Rev.ttf);
}

body{
    font-family: var(--main-font);
    background-color: var(--bg-reg);
    color: var(--text-light);
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow-x: hidden;
    /* align-items: center; */
    /* padding: var(--spacing-sm) 0 0 0; */


}

H1{
    color: var(--text-white);
    font-family: var(--heading-font);
    font-weight: 600;
    font-size: var(--h1-size);
    margin: 0;
    width: 100%;
    letter-spacing: -1px;
    line-height: var(--h1-height);
}

h2{
    color: var(--text-white);
    font-family: var(--heading-font);
    font-size: var(--h2-size);
    font-weight: 500;
    margin: 0;
    width: 100%;
    letter-spacing: -0.25px;
    line-height: var(--h2-height);
}

h3{
    color: var(--text-white);
    font-family: var(--heading-font);
    font-size: var(--h3-size);
    font-weight: 500;
    margin: 0;
    width: 100%;
}

h4{
    color: var(--text-white);
    font-family: var(--heading-font);
    font-size: var(--h4-size);
    font-weight: 500;
    margin: 0;
    width: 100%;
    letter-spacing: 0.25px;
}

h5{
    color: var(--text-white);
    font-family: var(--heading-font);
    font-size: var(--h5-size);
    font-weight: 500;
    margin: 0;
    width: 100%;
}

h6{
    color: var(--text-white);
    font-family: var(--heading-font);
    font-size: var(--h6-size);
    font-weight: 500;
    margin: 0;
    width: 100%;
    letter-spacing: -0.25px;
}

a{
    text-decoration: none;
    color: var(--red-1);
    font-weight: 500;
    transition: color 0.25 ease;
}

a:hover{
    color: var(--red-light);
}

p{
    font-family: var(--main-font);
    font-size: var(--p-size);
    line-height: var(--p-height);
    font-weight: 400;
    margin: var(--spacing-md) 0;
}

.subtitle, .subtitle2, .subtitle3, .subtitle-spacing{
    color: var(--primary-accent);
    font-family: var(--heading-font);
    font-weight: 500;
    font-size: var(--subtitle-size);
    /* line-height: var(--subtitle-height); */
    margin: 0;
    text-transform: uppercase;
}

.subtitle2{
    color: var(--red-light-2)!important;
}

.subtitle3{
    color: var(--red-)!important;
}

.subtitle-spacing{
    margin-bottom: var(--spacing-lg);
}

.secondary-text{
    font-size: var(--secondary-text-size);
    line-height: var(--secondary-text-height);
    color: var(--text-grey);
    letter-spacing: 0.25px;
}

.primary-btn{
    font-family: var(--main-font);
    font-size: var(--btn-size);
    line-height: var(--btn-height);
    color: var(--text-white);
    letter-spacing: 1.25px;
    font-weight: bold;
    border-radius: 25px;
    border: none;
    background-color: var(--red-1);
    padding: 12px var(--spacing-md);
    transition: all .5s ease;
}

.primary-btn:hover{
    background-color: var(--red-3);
    cursor: pointer;
    /* transform: scale(1.01); */
}

/* .secondary-btn{
    font-family: var(--main-font);
    font-size: var(--btn-size);
} */

.with-icon{
    display: flex;
    justify-content: center;
    align-items: center;
}

.with-icon > img{
    transition: transform 0.25s ease;
}

.with-icon:hover > img{
    transform: translateX(4px);
}

/*----- Loyout Styles -----*/
.section-container{
    width: 100%;
    margin: auto;
    max-width: var(--standard-width);
    padding-left: var(--spacing-sides);
    padding-right: var(--spacing-sides);
}

.two-column{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    box-sizing: border-box;
}

.two-column > .col-left{
    width: 50%;
    box-sizing: border-box;
    padding: 0 var(--spacing-md) 0 0;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
}

.two-column >.col-right{
    width: 50%;
    box-sizing: border-box;
    padding: 0 0 0 var(--spacing-md);
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
}

.two-column-big, .two-column-big-right{
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    box-sizing: border-box;
}

.two-column-big > .col-left, .two-column-big-right > .col-right{
    width: 60%;
    box-sizing: border-box;
    padding: 0 var(--spacing-md) 0 0;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: center;
}

.two-column-big >.col-right, .two-column-big-right > .col-left{
    width: 40%;
    box-sizing: border-box;
    padding: 0 0 0 var(--spacing-md);
    display: flex;
    flex-direction: column;
    align-items: start;
    /* justify-content: center; */
}

.two-column-big-right > .col-right{
    padding: 0 0 0 var(--spacing-md);
    width: 55%;
}

.two-column-big-right > .col-left{
    padding: 0 var(--spacing-md) 0 0;
    width: 45%;
}

 /* body{
    min-height: 100vh;
    background: url('2024worlds.jpeg') no-repeat;
    background-size: cover;
    background-position: center;
    //
}  */

/*--------------------------- HEADER --------------------------*/

.header{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 1.3rem 10%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 100;
}

  .header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(3, 3, 3, .5);
    /* background: rgba(3, 3, 3, .5); rgba(0, 0, 0, .1); */
    -webkit-backdrop-filter: blur(50px);
    backdrop-filter: blur(50px);
    z-index: -1;
}   

.logo {
    font-family: var(--heading-font);
    font-size: 1.5rem;
    color:#fff;
    text-decoration: none;
    font-weight: 600;
    transition: color 0.25s ease;
    
} 

.navbar a {
    font-size: 1.15rem;
    color: #fff;
    text-decoration: none;
    font-weight: 200;
    margin-left: 2.5rem;
    cursor: pointer;
    position: relative;
}

#check {
    display: none;
}

.icons{
    position: absolute;
    right: 5%;
    font-size: 2.8rem;
    color: #fff;
    cursor: pointer;
    display: none;
}

.navbar a::after {
    position: absolute;
    left: 50%;
    bottom: 0;
    content: '';
    height: 2px;
    transition: all 0.3s linear;
    width: 0;
    background: #e0dddd;
    transform: translateX(-50%);
  }
  .navbar a:hover:after {
    width: 100%;
  }

  nav a.current::after{
    width: 100%;
    transition: none;
}

/*--------------------------- HOME PAGE --------------------------*/
/*----- HOME hero -----*/

.home-hero-container{
    background: url(images/2024worlds.jpeg) no-repeat center center;
    background-size: cover;
    height: 80vh; 
    color: var(--text-white); 
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    filter: brightness(95%);
}

.home-hero-container p {
    font-size: 1.5rem;
    max-width: 80%;
    margin: 0;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.5); 
    border-radius: 10px;
} 

/*----- HOME about -----*/

.about{
    width: 100%;
    margin: auto;
    text-align: center;
    background-color: var(--bg-reg);
    padding-bottom: 0px;
}

.about h1 {
    padding-top: var(--spacing-xl);
}

.about p{
    padding-right: 3rem;
    text-align: left;
}

.about-left{
    align-content: center;
    
}

.about-right{
    text-align: right;
    
}

.about img{
    border-radius: 10px; 
    width: 500px;   
}

/*----- HOME donations -----*/
.donations-container{
    background: var(--red-3);
    text-align: center;
    padding: var(--spacing-lg) 0;
    margin: var(--spacing-lg) 0;
}

.donations{
    max-width: var(--standard-width);
    display: flex;
    align-items: center;
    justify-content: center;
}

.donations > .col-left{
    align-items: center;
}

.donations > .col-right{
    align-items: center;
}

.donations-container p{
    color: var(--text-white);
}

.donations-container h2{
    color: var(--text-white);
}

.donations img{ 
    width: 40%;
}

.donate-container {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    /* padding: var(--spacing-sm) var(--spacing-xxl); */
}

.donate-container h1{
    padding-top: var(--spacing-lg);
}

.donate {
    display: flex;
}

.donate-action {
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-left: var(--spacing-xl);
    padding-right: var(--spacing-xl);
}

.donate-btn{
    padding: 10px 30px;
    margin-top: var(--spacing-sm);
}

.donate-action > div > .qr-code{
    width: 125px;
    margin: auto;
}

/*----- HYDRA -----*/
.home-title{
    text-align: center;
    margin-top: var(--spacing-xl);
}

.hydra{
    padding-block: var(--spacing-xl);
    max-width: var(--standard-width);
    margin: auto;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.side-title{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    padding-left: 7%;
    text-align: left;
}

.hydra h1 {
    text-align: left;
    align-items: center;
    text-decoration: underline;
    text-decoration-color: var(--red-1);
}

.hydra-left {
    width: 40%;
}

.hydra-info{
    padding-left: var(--spacing-xl);
    width: 60%;
}

.hydra-left h2{
    color: var(--red-light);
}

.hydra-image{
    width: 100%;
    border-radius: 10px;
}

.comps-section-container{
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

/*----- HOME robot -----*/
.row{
    display: flex;
    justify-content: space-between;
}

.robots-home h1{
    margin: var(--spacing-lg) 0;
}

.robots-home{
    width: 80%;
    margin: auto;
    text-align: center;
    background-color: var(--bg-reg);

}

.robots-home-col{
    flex-basis: 32%;
    border-radius: 10px;
    margin-bottom: 1.875rem;
    position: relative;
    overflow: hidden;
}

.robots-home-col img{
    width: 100%;
    height: 200px;
    border-radius: 10px;
    object-fit: cover;
    display: inline-block;
}

.layer{
    background: transparent;
    height: 200px;
    width: 100%;
    border-radius: 10px;
    position: absolute;
    top: 0;
    left: 0;
    transition: 0.5s;
}

.layer:hover{
    background: rgba(226,0,0,0.4);
}

.layer a{
    width: 100%;
    font-weight: 200;
    color: #fff;
    font-size: 1.5rem;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    position: absolute;
    opacity: 0;
    transition: 0.5s;
    text-decoration: none;
}
.layer:hover a{
    bottom: 49%;
    opacity: 1;
}

/* a:hover{
    scale: 1.1;
} */

.robot-title{
    color: red;
    text-align: center;
}

.btn-container{
    display: flex;
    align-items: center;
    justify-content: center; 
}


/* .robots-btn{
    display: inline-block;
    color: #e0dddd;
    text-decoration: none;
    padding: 12px 34px;
    margin-bottom: 2rem;
    background: transparent;
    position: relative;
    cursor: pointer;
    border-radius: 18px;
    background: var(--red-1);
    transition: .5s ease-in-out;
}

.robots-btn:hover{
    background: var(--red-3);
    color: #fff;

    transition: .5s;
} */

/*----- HOME outreach -----*/

/* .outreach-home{
    text-align: center;
} */

/* iframe{
    border: 1px solid;
    width: 40%;
    height: 600px;
    background-color: #525252;
} */

/*------ HOME quotes ------*/

.quotes .subtitle2{
    text-align: center;
    margin-bottom: var(--spacing-lg);
    color: var(--red-light);
    position: relative;
}

/* .quotes .subtitle::after{
    content: '';
    width: 100%;
    height: .2em;
    background: red;
    position: absolute;
    bottom: -2px;
    left: 0; 
} */

.quotes{
    background-color: var(--bg-light);
    margin-top: var(--spacing-xl);
    padding: var(--spacing-lg) var(--spacing-lg);
    display: flex;
    flex-direction: column;
    
}

.wrapper-scroll{
    display: flex;
    overflow-x: scroll;
    scroll-snap-type: x mandatory;
}

.wrapper-scroll::-webkit-scrollbar{
    width: 0;
}

.wrapper-scroll .item{
    min-width: 300px;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--bg-reg);
    margin-right: var(--spacing-md);
    scroll-snap-align: start;
}

/*--------------------------- SEASONS PAGE --------------------------*/
/*----- SEASONS hero -----*/

.seasons-hero-container{
    position: relative;
    width: 100%;
    height: 50vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    margin-top: 60px;
}

.seasons-hero-container::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: cover;
    background-image: url(images/fenrir-pit.png);
    
    /* filter: sepia(100%) hue-rotate(300deg) brightness(50%) saturate(250%); */
    filter: brightness(50%);
    background-attachment: fixed;
}

.seasons-hero-container h1{
    /* font-family: rev-font; */
    font-weight: 500;
    color: white;
    font-size: 6rem;
    text-align: center;
    z-index: 1;
}

/*----- SEASONS nav -----*/

.seasons-nav{
    /* position: absolute; */
    /* top: 0;
    left: 0;
    width: 100%; */

    /* padding: 10px 10px;
    margin: 40px auto;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50px;
    background: #333;
    border: .2px solid #525252;
    z-index: 1;
    max-width: 700px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.6), 0 6px 20px rgba(0, 0, 0, 0.6);
    overflow-y: hidden;
    overflow-x: auto; */

    padding: 10px;
    margin: 20px auto;
    display: flex;
    flex-wrap: wrap; /* Allows wrapping on smaller screens */
    justify-content: center;
    align-items: center;
    border-radius: 50px;
    background: #333;
    border: 0.2px solid #525252;
    z-index: 1;
    max-width: 90%; /* Make it more flexible */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.6), 0 6px 20px rgba(0, 0, 0, 0.6);
    overflow-x: auto; /* Allows scrolling if needed */
    white-space: nowrap; /* Prevents items from stacking */

}

.seasons-nav a{
    /* text-decoration: none;
    color: #fff;
    padding: 6px 20px;
    border-radius: 20px;
    margin: 0 5px;
    transition: .5s ease-in-out; */

    text-decoration: none;
    color: #fff;
    padding: 8px 16px;
    border-radius: 20px;
    margin: 5px;
    transition: 0.3s ease-in-out;
    font-size: 1rem;
}
.seasons-nav a:hover:not(.current-season){
    background: #292929;
    transition: .5s;
}

.current-season{
    /* background: #292929; */
    background: #db0609;
}

/*----- SEASONS split section -----*/

.seasons-robot {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding-block: var(--spacing-lg);
}

.seasons-robot h1{
    text-align: center;
}

.seasons-robot h4, h6{
    line-height: var(--h1-height);
    padding-left: var(--spacing-md);
}

.seasons-image{
    width: 90%;
    border-radius: 10px;
}
/* .seasons-robot >.col-right{
    
    justify-content: center;
    align-items: flex-start;
} */

.comps-section-container{
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.comp-title-show{
    display: hidden;
}

.edit{
    margin-top: 0;
}

/* .banner-image{
    margin: var(--spacing-sm);
    width: 50%;
} */

/* .seasons-awards{
    display: flex;
    justify-content: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
} */

 .seasons-awards > img{
    width: 100px;
    margin-left: var(--spacing-lg);
    margin-top: var(--spacing-lg);
}

/*----- BANNERS -----*/
 .first-logo {
    height: 100.2px;
    margin: 24px;
    width: 133.2px;
}

.title pre {
    background-color: unset;
    border: unset;
}

.banner-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
    padding: 20px;
}

.banner {
    background: #0f4bcb;
    color: #fff;
    display: inline-block;
    height: 170px;
    line-height: 1.2;
    margin: 0 0 40px;
    padding: 8px;
    position: relative;
    text-align: center;
    vertical-align: top;
    white-space: normal;
    width: 140px;
}

.banner img {
    margin-bottom: 10px;
    margin-top: 10px;
    max-height: 45px;
    width: 75px;
}

.banner:after {
    border-bottom: 70px solid #0f4bcb;
     border-color: #0f4bcb #0f4bcb transparent;
    border-style: solid;
    border-width: 5px 70px 20px;
    content: "";
    display: block;
    left: 0;
    position: absolute;
    top: 100%;
}

.banner .award-name,.banner .award-name-long,.banner .award-name-longer {
    display: table;
    font-weight: bolder;
    height: 35px;
    margin: 3px 0;
    width: 100%;
}

.banner .award-name span,.banner .award-name-long span,.banner .award-name-longer span {
    display: table-cell;
    font-style: italic;
    text-transform: uppercase;
    vertical-align: middle;
}

.banner .award-name-long span {
    font-size: 85%;
}

.banner .award-name-longer span {
    font-size: 80%;
}

.banner .award-event,.banner .award-event-long {
    display: table;
    height: 50px;
    text-transform: uppercase;
    width: 100%;
}

.banner .award-event span,.banner .award-event-long span {
    display: table-cell;
    max-width: 124px;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}

.banner .award-event {
    font-size: 85%;
    line-height: 130%;
}

.banner .award-event-long {
    font-size: 75%;
    line-height: 110%;
}

.banner,.banner:after {
    -webkit-filter: drop-shadow(0 5px 5px rgba(0,0,0,.1));
    filter: drop-shadow(0 5px 5px rgba(0,0,0,.1));
}

.banner.black {
    background: #000;
}

.banner.black:after {
    border-bottom: 2 solid #000;
    border-color: #000 #000 transparent;
    border-style: solid;
    border-width: 5px 2 20px;
} 

/*----- SEASONS team section -----*/

.seasons-team{
    background-color: var(--black-light);
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    background: #333;
    padding: var(--spacing-lg) 0 var(--spacing-xl) 0;
}

.wrapper{
    display: flex;
    overflow-x: auto;
}

.wrapper::-webkit-scrollbar{
    width: 0;
}

.wrapper .item{
    width: 100px;
    text-align: center;
    margin-right: 2px;
}

/*--------------------------- RESOURCES PAGE --------------------------*/
/*----- RESOURCES hero -----*/
.resources-hero-container{
    position: relative;
    width: 100%;
    height: 65vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    margin-top: -20px;
}

.resources-hero-container::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: cover;
    background-image: url(images/6911jackets.jpg);
    /* filter: sepia(100%) hue-rotate(300deg) brightness(50%) saturate(250%); */
    filter: brightness(50%);
    background-attachment: fixed;
}

.resources-hero-container h1{
    /* font-family: rev-font; */
    font-weight: 500;
    color: white;
    font-size: 6rem;
    text-align: center;
    z-index: 1;
}

/*----- RESOURCES software -----*/
.resources-software{
    display: flex;
    justify-content: center;
    /* padding: calc(var(--spacing-xl) * 1.5); */
    padding: var(--spacing-xl) 0;
}

.software-image-container{
    width: 100%;
    position: relative;
    height: 500px;
    align-items: right;
    display: flex;
    justify-content: center;
    align-items: center;
}

.software-image-container > img{
    position: relative;
    width: 100%;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.6), 0 6px 20px rgba(0, 0, 0, 0.6);
}

.divider{
    border-top: 3px solid var(--bg-dark);
    width: 100%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.6), 0 6px 20px rgba(0, 0, 0, 0.6);
}
/*----- RESOURCES slideshow -----*/
.slider{
    width: 800px;
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}
 
.slides{
    width: 500%;
    display: flex;
    border-radius: 10px;
}
 
.slides input{
    display: none;
}

.slide{
    width: 20%;
    transition: 1s;
}

.slide img{
    width: 800px;
    border-radius: 10px;
    display: flex;
}

.navigation-manual{
    position: absolute;
    width: 800px;
    margin-top: -40px;
    display: flex;
    justify-content: center;
}

.manual-btn{
    border: 2px solid red;/* border: 2px solid var(--red-1); */
    padding: 5px;
    border-radius: 10px;
    cursor: pointer;
    transition: 1s;
}

.manual-btn:not(:last-child){
    margin-right: 20px;
}

.manual-btn:hover{
    background: red;
}

#radio1:checked ~ .first{
    margin-left: 0;
}

#radio2:checked ~ .first{
    margin-left: -20%;
}

#radio3:checked ~ .first{
    margin-left: -40%;
}

#radio4:checked ~ .first{
    margin-left: -60%;
}

#radio5:checked ~ .first{
    margin-left: -80%;
}

#radio6:checked ~ .first{
    margin-left: -100%;
}

#radio7:checked ~ .first{
    margin-left: -120%;
}

#radio8:checked ~ .first{
    margin-left: -140%;
}

#radio9:checked ~ .first{
    margin-left: -160%;
}
/*--------------------------- OUTREACH PAGE --------------------------*/
/*----- OUTREACH hero -----*/
.outreach-body{
    /* height: 300vh; */
    background-color: var(--bg-reg); 
}

html{
    scroll-behavior: smooth;
    scroll-padding: 5rem;
}

.outreach-hero{
    min-height: 70vh;
    display: grid;
    grid-template-columns: repeat(3,1fr);
}

.outreach-hero > div{
    min-height: 35em;
    overflow: hidden;
    position: relative;
    text-align: center;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-direction: column;
    padding: 2em;
    padding-bottom: 15vh;
    transition: 0.3s ease-in-out;
}

.outreach-hero > div > img{
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    height: 100%;
    z-index: -1;
    /* filter: grayscale(100%); */
    transition: 0.3s ease-in-out;
}

/* .outreach-hero > div:hover > img{
    filter: grayscale(100%);
} */

.outreach-hero > div::before{
    content: '';
    background: linear-gradient(0deg,rgba(0,0,0,.8),rgba(0,0,0,0));
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.outreach-hero h2{
    color: var(--red-1);
    font-weight: 600;
}

.highlight{
    color: var(--text-light);
    font-family: var(--heading-font);
    font-size: var(--h2-size);
    font-weight: 500;
    letter-spacing: -0.25px;
    line-height: var(--h2-height);
}

.outreach-hero .text{
    position: relative;
}

.sub-heading b{
    color: var(--text-light);
    margin-right: 0.5em;
}

.title{
    margin: 0.2em 0 0.7em 0;
}

.sub-heading{
    position: relative;
}

.sub-heading::before{
    content:'';
    background: var(--red-1);
    position: absolute;
    top: -2em;
    left: 50%;
    transform: translateX(-50%);
    width: 3em;
    height: 4px;
}

.section-link > img{
    transition: transform 0.25s ease;
}

.section-link:hover > img{
    transform: translateX(4px);
}

.section-link{
    text-decoration: none;
    font-family: var(--heading-font);
    color: var(--text-light);
    display: inline-block;
    /* margin: 5em 0 1em 0; */
    margin: 1em 0 1em 0;
    font-weight: bold;
    /* font-size: var(--btn-size); */
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: 0.3s;
}
.section-link{
    display: flex;
    justify-content: center;
    align-items: center;
}
/* .section-link::before{
    content: '';
    background: var(--text-light);
    position: absolute;
    top: -4em;
    left: 50%;
    transform: translateX(-50%);
    width: 1px;
    height: 3em;
} */

.section-link:hover{
    color: #ccc;
}

.outreach-hero > div:hover{
    /* padding-bottom: 10em; */
    padding-bottom: 8em;
}

.outreach-hero > div:hover .section-link{
    opacity: 1;
}

/*----- OUTREACH overview -----*/

/* .outreach-section p{
    color: var(--text-dark);
} */

.approach{
    text-align: center;
}

.outreach-section{
    /* max-width: var(--standard-width); */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: auto;
    padding-block: var(--spacing-lg);
}

.outreach-section h2{
    color: var(--red-light);
}

/*--------------------------- SPONSORS PAGE --------------------------*/

.sponsors-container{
    padding-block: var(--spacing-lg)
}

.sponsors-container h1{
    margin: 5rem 0rem 1rem 0rem;
    text-align: center;
    text-decoration: underline;
    text-decoration-color: var(--red-1);
}

/* .sponsors-container h2{
    margin: var(--spacing-xl) 0 var(--spacing-md);
    color: var(--red-light);
}

.tiers-container{
    text-align: center;
}

.tiers-container div{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--spacing-md);
    width: 100%;
    align-items: center;
    text-align: center;
}

.sponsors-container img{
    width: 30%;
    max-width: 200px;
    min-width: 80px;
    height: auto;
    margin: var(--spacing-sm);
} */

.sponsors-container{
    background-color: var(--bg-reg);
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-lg);
    max-width: var(--standard-width);
    margin: 0 auto;
}

.sponsors-container img{
    width: 20%;

}

.sponsors-container .sponsor-row{
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: var(--spacing-lg);
}

.sponsors-container img:not(.sponsor-row img){
    width: 25%;
}

/*--------------------------- FOOTER --------------------------*/
/*----- Sponsors -----*/
.footer-sponsors {
    background-color: var(--bg-reg);
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-lg);
    max-width: var(--standard-width);
    margin: 0 auto;
}

.footer-sponsors img{
    width: 10%;
}

.footer-sponsors .footer-row{
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: var(--spacing-lg);
}

.footer-sponsors img:not(.footer-row img){
    width: 25%;
}

#footer-big{
    width: 40%;
}

/*----- Footer -----*/
.footer-container{
    background-color: var(--bg-dark);
    padding-top: var(--spacing-lg);
}

.footer {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
    padding-inline: calc(var(--spacing-xxl)* 1.5);
    padding-top: var(--spacing-md);
}

.in-touch > .subtitle{
    text-decoration: underline;
}

.social-links {
    padding: var(--spacing-md) var(--spacing-md);
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 2.5vw;
}

.in-touch {
    width: 50%;
}

.find-us {
    

}

#footer-logo{
    width: 100px;
}

svg{
    fill: var(--red-1);
    transform: scale(1.5);
    /* margin: var(--spacing-md) var(--spacing-xl); */
    margin: var(--spacing-md) 0;
}

svg:hover{
    fill: var(--red-light-2);
    transition: fill .25s ease;
}

/* .topBtn{
    position: fixed;
    bottom: 20px;
    right: 20px;
    color: var(--text-dark-grey);
    border: none;
    padding: 10px 15px;
    border-radius: 5px;
    cursor: pointer;
    transition: opacity 0.3s;
}

.topBtn:hover, .footer p:hover{
    color: #636262;
}

.topBtn{
    text-align: center;
} */

.copywrite{
    bottom: 20px;
    right: 20px;
    color: var(--text-dark-grey);
    padding: 10px 15px;
    text-align: center;
}

.footer img {
    width: 20%;
}

.footer p, .footer > .subtitle {
    color: var(--text-dark-grey);
}

.find-us > .subtitle {
    text-decoration: underline;
    text-decoration-color: var(--text-dark-grey);
}

.find-svg {
    display: flex;
    justify-content: left;
    align-items: center;
    gap: var(--spacing-md);
}
/*--------------------------- BREAKPOINTS --------------------------*/
/*----- TABLET size -----*/
@media only screen and (max-width: 768px){
    :root{
        --h1-size: 40px;
        --h1-height: 65px;
        --h2-size: 35px;
        --h2-height: 60px;
        --h3-size: 28px;
        --h4-size: 24px;
        --h5-size: 20px;
        --h6-size: 18px;

        --spacing-sm: 8px;
        --spacing-md: 16px;
        --spacing-lg: 32px;
        --spacing-xl: 48px;
    }

    .two-column, .two-column-big, .two-column-big-right{
        flex-direction: column;
    }

    .two-column .col-left, .two-column-big .col-left, .two-column-big-right .col-left{
        width: 100%;
        padding: 0;
    }

    .two-column .col-right, .two-column-big .col-right, .two-column-big-right .col-right{
        width: 100%;
        padding: 0;
    }

    .comp-title h4 {
        display: none;
    }

    .comp-title-show {
        display: inline;
    }
            
}

/*----- MOBILE size -----*/
@media only screen and (max-width: 550px){
    :root{
        /* --spacing-xxl: 64px; */
    }
    
}

/*--------------------- HOME --------------------------*/
@media only screen and (max-width: 700px){
    .row{
        flex-direction: column;
    }
    .home-hero-container{
        height: 50vh;
    }

    /* donate */
    .donate-container .side-title {
        padding-left: 0;
    }
}

/*----- donate -----*/
@media only screen and (max-width: 1000px){
    .donate-action {
        padding-right: 0;
        padding-left: var(--spacing-md);
    }
}
@media only screen and (max-width: 650px){
    .donate {
        flex-direction: column;
    }
    .donate-action{
        text-align: center;
    }
    .donate-action > div > .qr-code{
        width: 100%;
        padding-top: var(--spacing-lg);
    }
    .donate-btn {
        width: 80%;
        margin: auto;
        margin-top: var(--spacing-sm);
    }

}

/*----- about-----*/
@media only screen and (max-width: 650px){
    .about .side-title {
        padding-left: 0;
    }

    .about p {
        padding-right: 0;
        text-align: center;
    }

    .about h1 {
        text-align: center;
    }
}

/*----- hydra-----*/
@media only screen and (max-width: 650px){
    .hydra{
        flex-direction: column-reverse;
    }
    .hydra-info{
        padding-left: 0;
        width: 100%;
    }
    .hydra-left{
        width: 100%;
    }
}

/*----- SEASONS -----*/
@media (max-width: 600px) {
    .seasons-nav {
        flex-wrap: nowrap; /* Prevents wrapping */
        justify-content: flex-start; /* Aligns left for better UX */
        overflow-x: auto; /* Scrolls when needed */
        padding: 10px;
    }

    .seasons-nav a {
        font-size: 0.9rem;
        padding: 6px 12px;
    }
}

/*----- OUTREACH hero -----*/
@media only screen and (max-width: 900px){
    /* html{
        font-size: 14px;
    } */
    .outreach-hero h2{
        font-size: 35px;
    }

    
} 
@media only screen and (max-width: 750px){
    .outreach-hero{
        grid-template-columns: 1fr;
    }

    .break{
        display: none;
    }
}

/*----- SPONSORS -----*/

@media (max-width: 768px) {
    .tiers-container div {
        /* flex-direction: column; */
        gap: 1rem;
    }

    .sponsors-container img {
        width: 50%; 
        max-width: 120px;
    }
}

/*----- FOOTER -----*/
@media (max-width: 820px) {
    .footer {
        flex-direction: column;
        align-items: center;
    }

    .footer img {
        width: 50%;
    }

    .find-us {
        margin-top: 1rem;
    }

    .find-svg {
        justify-content: center;
    }

    .footer p, .footer > .subtitle {
        font-size: 0.8rem;
    }

    .footer img {
        width: 50%;
    }

    .footer-sponsors img {
        width: 50%;
    }

    .footer-sponsors .footer-row {
        flex-direction: column;
    }

    .footer-sponsors img:not(.footer-row img) {
        width: 50%;
    }
}

/*----- NAVBAR main -----*/
@media (max-width: 992px){
    .header{
        padding: 1.3rem 5%;
    }

    .about-right{
        margin: 0px;
    }
}

@media (max-width: 1200px){
    .about img{
        display: none;
    }
    .about-right{
        display: none;
    }

    .about-left p{
        text-align: center !important;
    }
}

@media (max-width: 850px){
    .icons{
        display: inline-flex;
    }

    #check:checked~.icons #menu-icon{
        display: none; 
    }

    .icons #close-icon{
        display: none;
    }

    #check:checked~.icons #close-icon{
        display: block; 
    } 

    .navbar{
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        height: 0;
        /* background: rgba(107, 19, 19); */
        background: rgba(0, 0, 0, .1);
        -webkit-backdrop-filter: blur(50px);
        backdrop-filter: blur(50px);
        box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .1);
        overflow: hidden;
        transition: .3s ease;
    }

    #check:checked~.navbar{
        height: 17.7rem;
    } 

    .navbar a{
        display: block; 
        font-size: 1.1rem;
        margin: 1.5rem 0;
        text-align: center;
        transform: translateY(-50px);
        opacity: 0;
        transition: .3s ease;
        transition: color .3s ease 0s;
    }

    .navbar a::after{
        transition: none;
    }
    .navbar a.current::after{
        width: 0;
        transition: none;
    }
    .navbar a:hover::after{
        width: 0;
    }
    /* .navbar a{
        transition: color 0.1s ease;
    } */
    
    .navbar a:hover{
        color: #bebbbb;
    }

    .navbar a.current{
        color: #bebbbb;
        font-weight: 600;
    }

    #check:checked~.navbar a{   
        transform: translateY(0);
        opacity: 1;
        transition-delay: calc(.15s * var(--i));
        transition-property: transform, opacity;
    }
}