* {
    margin: 0;
    padding: 0;
    font-family: Arial, Helvetica, sans-serif;
    /* outline: 1px solid #ff0000; */
    scroll-behavior: smooth;
}

body {
    background-color: #000000;
}

#nav {
    width: 100%;
    height: 5rem;
    border: none;
}

.nav-logo {
    height: 5rem;
    margin-right: auto;
}

.nav-menu {
    background-color: #ffffff;
    display: flex;
    align-items: center;
}

.nav-item {
    color: #272727;
    margin: 1rem;
    font-size: 1rem;
    font-weight: bold;
    text-decoration: none;
}








.grid-box1 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background-color: #ffffff00;
}

.grid-child1 {
    display: grid;
}






.grid-box2 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    background-color: #ffffff00;
}

.grid-child2 {
    display: grid;
}










.grid-parent {
    display: grid;
    gap: 2rem;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    padding-top: 100px !important;
    background-color: #ffffff;
    padding: 2rem;
}

.grid-child {
    border-style: solid;
    border-width: 2px;
    border-color: #6d6d6d;
    border-radius: 0px;
    transition: transform 0.3s ease;
    background-color: #ffffff;
}

.grid-child img {
    border-bottom-style: solid;
    border-width: 2px;
    border-color: #6d6d6d;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
}

.grid-child:hover {
    transform: scale(1.01);
    box-shadow: 0 0px 3rem #0000003d;
    opacity: 80%;
}










.swiper {
    width: 100%;
    height: fit-content;
}

.swiper-slide img {
    width: 100%;
}

.swiper .swiper-button-prev {
    color: #ffffff;
    background-color: #000000a3;
    padding: 2%;
}

.swiper .swiper-button-next {
    color: #ffffff;
    background-color: #000000a3;
    padding: 2%;
}

.swiper .swiper-pagination-bullet-active {
    background-color: #000000;
    border-width: 2px;
    border-style: solid;
    border-color: #000000;
}

.swiper .swiper-pagination-bullet {
    background-color: #000000a3;
    border-width: 2px;
    border-style: solid;
    border-color: #ffffff;
}

.grid-parent3 {
    display: grid;
    gap: 2rem;
    grid-template-columns: 1fr 1fr 1fr;
    margin: 1rem;
    background-color: #ffffff;
}

.grid-child3 {
    border-style: solid;
    border-width: 2px;
    border-color: #6d6d6d;
    border-radius: 0px;
    /* transition: transform 0.3s ease; */
}

.grid-child3 img {
    border-bottom-style: solid;
    border-width: 2px;
    border-color: #6d6d6d;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
}

/* .grid-child3:hover {
    transform: scale(1.01);
    box-shadow: 0 0px 3rem #0000003d;
    opacity: 80%;
} */

@media(max-width: 1340px) {
    .grid-parent3 {
        gap: 1rem;
        grid-template-columns: 1fr 1fr 1fr;
    }
}

@media(max-width: 1000px) {
    .grid-parent3 {
        gap: 1rem;
        grid-template-columns: 1fr 1fr;
    }
}

@media(max-width: 500px) {
    .grid-parent3 {
        gap: 1rem;
        grid-template-columns: 1fr;
    }
}







.card1-parent {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
}

.card1 {
    transition: transform 0.3s ease;
}

.card1:hover {
    transform: scale(1.01);
    box-shadow: 0 0px 3rem #0000003d;
    opacity: 80%;
}





.text1 {
    font-size: 4rem;
}

.text2 {
    font-size: 2rem;
}


.text-gradient1 {
    /* 1. Apply the linear gradient as a background image */
    background-image: linear-gradient(to right, #ff6c6c, #8255ff);
    /* Example: Orange to Peach */

    /* 2. Clip the background to the text area */
    -webkit-background-clip: text;
    /* For WebKit browsers (Chrome, Safari, Edge) */
    background-clip: text;

    /* 3. Make the text color transparent so the background image shows through */
    -webkit-text-fill-color: transparent;
    /* For WebKit browsers */
    color: transparent;
    /* Standard property */

    /* Optional: Add a subtle text shadow for depth */
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
}




.button1 {
    border-style: solid;
    border-width: 2px;
    border-radius: 4px;
    border-color: #ffffff;
    background-color: #00000000;
    text-decoration: none;
    color: #ffffff;
    font-size: 1rem;
    padding: 1rem;
    width: fit-content;
    margin-top: 2rem;
}

.button2 {
    border-style: solid;
    border-width: 2px;
    border-color: #272727;
    background-color: #00000000;
    text-decoration: none;
    color: #272727;
    font-size: 1rem;
    padding: 1rem;
    width: fit-content;
    margin-top: 2rem;
}

.button3 {
    height: min-content;
    border-style: solid;
    border-width: 0px;
    border-radius: 4px;
    background-color: #8255ff;
    text-decoration: none;
    color: #ffffff;
    font-size: 1rem;
    font-weight: bold;
    padding: 1rem;
    width: fit-content;
    margin-top: 2rem;
    transition: background-color 0.3s ease;
    transition: box-shadow 0.3s ease;
}

.button3:hover {
    /* background-color: #8f67ff; */
    background: linear-gradient(to bottom, #a96cff, #8255ff);
    box-shadow: 0 0px 20px #00000066;
}

.button4 {
    height: min-content;
    border-style: solid;
    border-width: 0px;
    border-radius: 4px;
    background-color: #ffffff;
    text-decoration: none;
    color: #000000;
    font-size: 1rem;
    font-weight: bold;
    padding: 1rem;
    width: fit-content;
    margin-top: 2rem;
    transition: background-color 0.3s ease;
    transition: box-shadow 0.3s ease;
}

.button4:hover {
    /* background-color: #8f67ff; */
    background-color: #d5d5d5;
    box-shadow: 0 0px 20px #00000066;
}

.button5 {
    height: min-content;
    border-style: solid;
    border-width: 0px;
    border-radius: 4px;
    background-color: #000000;
    text-decoration: none;
    color: #ffffff;
    font-size: 1rem;
    font-weight: bold;
    padding: 1rem;
    width: fit-content;
    margin-top: 2rem;
    transition: background-color 0.3s ease;
    transition: box-shadow 0.3s ease;
}

.button5:hover {
    /* background-color: #8f67ff; */
    background-color: #272727;
    box-shadow: 0 0px 40px #00000066;
}

.button6 {
    height: min-content;
    border-style: solid;
    border-width: 0px;
    border-radius: 4px;
    background-color: #128251;
    text-decoration: none;
    color: #ffffff;
    font-size: 1rem;
    font-weight: bold;
    padding: 1rem;
    width: fit-content;
    margin-top: 2rem;
    margin-bottom: 2rem;
    transition: background-color 0.3s ease;
    transition: box-shadow 0.3s ease;
}

.button6:hover {
    background-color: #1ca268;
    box-shadow: 0 0px 40px #00000066;
    -webkit-animation: shake-horizontal 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
    animation: shake-horizontal 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
}















.fab-container {
    display: flex;
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 100;
    /* WITHOUT THIS PROPERTY, THE ANIMATIONS WILL PREVENT YOU FROM CLICKING THIS FA BUTTON */
}

.fab {
    width: 5em;
    height: 5em;
    background-image: url('../images/arrow.svg');
    background-size: cover;
    background-position: center;
    border: none;
    border-radius: 4px;
    /* color: white; */
    cursor: pointer;
    box-shadow: 0 0px 30px #0000007a;
}

.fab:hover {
    background-image: url('../images/arrow-hover.svg');
}





/* ID'S START */

#mugshot {
    width: 20rem;
    max-width: 100%;
}

/* ID'S END */


/* MEDIA QUERIES START */

@media(max-width: 1320px) {
    .card1-parent {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
}

@media(max-width: 1000px) {
    #hero {
        height: 50rem !important;
        /* "!important" overrides any inline styling on the HTML script */
    }

    .card1-parent {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }
}

@media(max-width: 900px) {
    .text1 {
        font-size: 2rem !important;
    }

    .text2 {
        font-size: 1rem !important;
    }

    .grid-parent {
        gap: 1rem;
        grid-template-columns: 1fr 1fr 1fr;
    }
    .video1 {
        align-self: center;
        width: 100vw !important;
    }
}

@media(max-width: 767px) {
    #nav {
        /* This set the nav iframe to a custom height when switched to mobile mode */
        height: 20.5rem;
    }

    .nav-logo {
        margin-right: 0;
    }

    .nav-menu {
        flex-direction: column;
    }

    #mugshot {
        width: 20rem;
    }

    .grid-box1 {
        grid-template-columns: 1fr;
    }

    .grid-box2 {
        grid-template-columns: 1fr 1fr 1fr;
    }

    #hero {
        height: 25rem !important;
    }

    .image1 {
        width: 20rem !important;
    }

    .image2 {
        display: none;
    }

    .blog-image {
        width: 20rem !important;
    }

    .card1-parent {
        display: grid;
        grid-template-columns: 1fr;
    }
}

@media(max-width: 500px) {
    .text1 {
        font-size: 2rem !important;
    }

    .grid-box2 {
        grid-template-columns: 1fr 1fr;
    }

    .grid-parent {
        gap: 1rem;
        grid-template-columns: 1fr 1fr;
    }

    .image1 {
        width: 15rem !important;
    }
}

@media(max-width: 412px) {
    .grid-box2 {
        grid-template-columns: 1fr;
    }
}

/* MEDIA QUERIES END */