:root {
    --clr-white: #FFFFFF;
    --clr-yellow: #FFD034;
    --clr-green: #20905C;
    --clr-darkblue: #111165;
    --clr-lightblue: #2B70E4;
    --clr-grey: #EAEBF1;
    --clr-black: #000000;

    --hex-size: 175px;
    --hex-gap: 20px;
    --hex-offset: calc(var(--hex-size) + var(--hex-gap));
}

html, body {
    font-size: 16px;
    line-height: 1.3;
}

.anton-regular {
    font-family: "Anton", serif;
    font-weight: 400;
    font-style: normal;
}

.oswald-light {
    font-family: "Oswald", serif;
    font-optical-sizing: auto;
    font-weight: 300;
    font-style: normal;
}

.banner {
    height: 150px;
    background-color: var(--clr-darkblue);
    padding: 0 3rem;
}

.header-logo {
    max-height: 140px;
    margin-top: 5px;
}

.head-banner-section {
    height: 500px;
    width: 100%;
}

.head-banner {
    background-image: url(/__data/assets/image/0015/151800/hsa-banner2.png);
    background-size: cover;
    height: inherit;
    background-position: center;
}

.banner-overlay {
    /*width: 33%;*/
    padding: 5rem;
    /*margin-left: 12%;*/
    height: 100%;
    background-color: var(--clr-green);
    margin-left: 0;
    width: 50%;
}

h1 {
    font-size: 3.25rem;
    line-height: 1.3;
    font-family: "Anton", serif;
    color: var(--clr-white);
}

h2, h3 {
    font-family: "Oswald", serif;
    color: var(--clr-darkblue);
}

h4, h5, h6 {
    font-family: "Arial", serif;
    color: var(--clr-black);
}

h2 {
    font-size: 2.5rem;
    text-align: center;
    text-transform: uppercase;
    font-weight: bold;
}

p {
    font-family: "Arial", serif;
    font-size: 1.35rem;
}

p.lead {
    font-family: "Oswald", serif;
    color: var(--clr-darkblue);
    font-size: 2.25rem;
}

.main {
    padding: 2rem 0;
}

.main h2 {
    margin-top: 2rem;
    margin-bottom: 2rem;
}

.hexagon-wrapper {
    position: relative;
    width: 100%; /* Ensure it adapts to the container width */
    padding-top: 100%; /* Makes it a square container */
    overflow: hidden;
}

.hexagon-wrapper.left {
    clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
}

.hexagon-wrapper.right {
    clip-path: polygon(25% 0%, 100% 0%, 100% 100%, 25% 100%, 0% 50%);
}

.hexagon-wrapper::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    pointer-events: none; /* Ensures the gradient doesn't interfere with interactions */
}

/*.hexagon-wrapper.left::after {
    background: linear-gradient(to left, rgba(255, 255, 255, 0) 75%, rgba(234,235,241,1) 100%);
}

.hexagon-wrapper.right::after {
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 75%, rgba(234,235,241,1) 100%);
}*/

.hex-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Ensures the image scales properly */
}

.campaign {
    background: var(--clr-white);
    padding: 2rem 0;
}

.btn-primary {
    --bs-btn-bg: var(--clr-lightblue);
}

.testimonials {
    background-color: var(--clr-grey);
}

.testimonials .card {
    background-color: unset;
    border: none;
}

.testimonials .card .col-md-4 {
    display: flex;
    justify-content: center;
    align-items: center;
}

.testimonials .large {
    font-size: 5.5rem;
    display: inline;
    font-family: fantasy;
    position: absolute;
    color: var(--clr-lightblue);
}

.testimonials .large:first-of-type {
    top: 2.5rem;
}

.testimonials .large:last-of-type {
    right: 0;
    bottom: -2.5rem;
}

.testimonials .card-text p {
    padding-left: 3rem;
}

.testimonials .carousel-control-prev {
    left: -10rem;
}

.testimonials .carousel-control-next {
    right: -10rem;
}

.testimonials .carousel-control-prev-icon,
.testimonials .carousel-control-next-icon {
    background-color: var(--clr-green);
}

.supporters {
    padding: 2.5rem 2rem 4rem;
    background-color: var(--clr-grey);
}

.grid {
    display: inline-block;
}

.grid-row {
    display: flex;
    gap: 20px;
}

.grid-row:nth-child(even){
    margin-left: calc(var(--hex-offset) / 2);
}

.hexagon {
    position: relative;
    width: var(--hex-size);
    height: calc(var(--hex-size) * 0.866);
    overflow: hidden;
    /*clip-path: polygon(
        50% 0%,
        100% 25%,
        100% 75%,
        50% 100%,
        0% 75%,
        0% 25%
    );*/
    display: inline-block;
    margin: 10px;
}

.hexagon.hex-blue {background-color: var(--clr-darkblue);}
.hexagon.hex-yellow {background-color: var(--clr-yellow);}
.hexagon.hex-lightblue {background-color: var(--clr-lightblue);}
.hexagon.hex-green {background-color: var(--clr-green);}
.hexagon.hex-white {background-color: var(--clr-white);}

/*.hexagon::before,
.hexagon::after {
    content: '';
    position: absolute;
    width: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
}

.hexagon::before {
    top: calc(var(--hex-size) * -0.2887);
    border-bottom: calc(var(--hex-size) * 0.2887) solid #fff;
}

.hexagon::after {
    bottom: calc(var(--hex-size) * -0.2887);
    border-top: calc(var(--hex-size) * 0.2887) solid #fff;
}*/

.hexagon img {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 0.3s ease-in-out;
    /*padding: 1.5rem;*/
    background-color: var(--clr-white);
}

.heaxagon:hover {
    cursor: pointer;
}

.hexagon .hover {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 1rem;
    text-align: center;
    visibility: hidden;
    /*transition: opacity 0.3s ease-in-out, visibility 0s 0.3s;*/
    transition: opacity 0.1s ease-in-out, visibility 0s 0.3s;
}

.hexagon.hex-blue .hover, 
.hexagon.hex-green .hover {
    color: var(--clr-white);
}

.hexagon.hex-yellow .hover,
.hexagon.hex-lightblue .hover,
.hexagon.hex-white .hover  {
    color: var(--clr-black);
}

.hexagon:hover img {
    opacity: 0;
}

.hexagon:hover .hover {
    opacity: 1;
    visibility: visible;
    /*transition: opacity 0.3s ease-in-out, visibility 0s 0s;*/
    transition: opacity 0.1s ease-in-out, visibility 0s 0s;
}

.hex-placeholder {
    display: none;
}

footer {
    background-color: var(--clr-lightblue);
    color: var(--clr-white);
    padding: 1rem;
}

.footer-logo {
    max-width: 12rem;
}

.center {
    text-align: center;
}

.socials {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 200px;
}

.socials a i {
    color: var(--clr-white);
    font-size: xx-large;
}

.socials a:hover i,
.socials a:focus i {
    color: var(--clr-yellow);
    text-decoration: none;
}

button.center {
    display: block;
    margin: 0 auto;
}

.modal-dialog {
    max-width: 66%;
    width: 100%;
}

.modal-title {
    color: var(--clr-white);
}

.btn-close {
    background-color: var(--clr-white);
}

.modal-body p {
    font-size: 1.1rem;
}


    


@media only screen and (max-width: 1440px) {
    .head-banner-section {
        height: fit-content;
    }
}

@media only screen and (max-width: 1199px) {
    
}

@media only screen and (max-width: 991px) {
    
    
    .banner-overlay {
        width: 100%;
    }
}

@media only screen and (max-width: 767px) {
    .testimonials .large {
        position: relative;
    }

}

@media only screen and (max-width: 600px) {
    .hexagon.hex-blue,
    .hexagon.hex-yellow,
    .hexagon.hex-green,
    .hexagon.hex-lightblue {
        display: none;
    }
}