@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 300;
    src: local("Open Sans Light"), local("OpenSans-Light"), url("./styles/fonts/OpenSans-Light.woff2") format("woff2"), url("./styles/fonts/OpenSans-Light.woff") format("woff")
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: local("Open Sans"), local("OpenSans2"), url("./styles/fonts/OpenSans-Regular.woff2") format("woff2"), url("./styles/fonts/OpenSans-Regular.woff") format("woff")
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 600;
    src: local("Open Sans Semibold"), local("OpenSans-Semibold"), url("./styles/fonts/OpenSans-Semibold.woff2") format("woff2"), url("./styles/fonts/OpenSans-Semibold.woff") format("woff")
}

@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 700;
    src: local("Open Sans Bold"), local("OpenSans-Bold"), url("./styles/fonts/OpenSans-Bold.woff2") format("woff2"), url("./styles/fonts/OpenSans-Bold.woff") format("woff")
}

.responsive-container,
.important-message,
.n-header {
    width: 100%;
}

@media (min-width: 320px) {

    .responsive-container,
    .important-message,
    .main-section,
    .cards,
    .n-header {
        max-width: 315px;
    }

    .n-header {
        margin: 0;
        width: 310px;
        border-bottom: 1px solid rgba(0 0 0 / 0.2);
        border-right: none;
        /* Remove right border if on small screens */
    }

    .cards {
        margin: 0 0.5rem;
    }

    /* Top-right inverted L shape */
    .cards::after {
        /* Top-right inverted L shape */
        content: "";
        position: absolute;
        right: 0.5rem;
        /* Position 5px from the right edge */
        top: 15px;
        /* 15px from the top */
        width: 80px;
        /* Width of the horizontal line */
        height: calc(100% - 30px);
        /* Total height to cover both horizontal and vertical lines */
        background-color: rgba(36, 103, 195, 0.5);
        /* Color for the inverted L shape */
        clip-path: polygon(100% 0,
                /* Point 2: Top-right corner */
                0 0,
                /* Point 1: Top-left corner */
                0 4px,
                /* Point 3: Start vertical line down */
                76px 4px,
                /* Point 4: Inner corner of the "L" */
                76px 100%,
                /* Point 5: Bottom of vertical line */
                100% 100%,
                /* Point 6: Bottom-right corner */
                100% 0
                /* Back to starting point to close the shape */
            );
    }

    .footerLeft {
        justify-content: center;
    }

    .footerRight {
        align-items: center;
        justify-content: center;
    }

    footer section {
        justify-content: center;
    }
}

@media (min-width: 510px) {

    .responsive-container,
    .important-message,
    .main-section,
    .cards,
    .n-header {
        max-width: 1400px
    }

    .n-header {
        border-right: 1px solid rgba(0 0 0 / 0.2);
        border-bottom: none;
        /* Remove bottom border if on larger screens */
    }

    .cards {
        margin: 0 1.5rem;
    }
/* 
    .cards::after {
        content: "";
        position: absolute;
        right: 0.5rem;
        top: 15px;
        width: 76px;
        height: calc(100% - 30px);
        background: url('../images/top-right-rounded.svg') no-repeat;
        background-size: cover;
        clip-path: none; 
    }
     */
    .footerLeft {
        justify-content: normal;
    }

    .footerRight {
        align-items: center;
        justify-content: center;
    }

    footer section {
        justify-content: space-between;
        /* Evenly space the items */
    }
}

@media (min-width: 1400px) {

    .responsive-container,
    .important-message,
    .main-section,
    .cards,
    .n-header {
        max-width: 1400px
    }

    .n-header {
        border-right: 1px solid rgba(0 0 0 / 0.2);
        border-bottom: none;
        /* Remove bottom border if on larger screens */
    }

    .cards {
        margin: 0 auto;
    }

    .footerLeft {
        justify-content: normal;
    }

    .footerRight {
        align-items: center;
        justify-content: flex-end;
    }

    footer section {
        justify-content: space-between;
        /* Evenly space the items */
    }
}

.body {
    margin: 0;
    font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: .8125rem;
    font-weight: 400;
    line-height: 1.5385;
    color: #373532;
    text-align: left;
}

.app-container {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
    margin: 0;
    position: relative;
}

.responsive-container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    /* Horizontally center */
    align-items: center;
    /* Vertically center */
}

.dir-column {
    flex-direction: column;
}

.n-header {
    display: flex;
    width: 100%;
    /* align-items: stretch; */
    justify-content: space-between;
    /* Evenly space the items */
    flex-wrap: wrap;
    /* Allow items to wrap onto the next line */
    gap: 1rem;
    background-color: #f9f9f9;
    min-width: 310px;
    border: 0;
    padding: .5rem 1.5rem;
    margin: 0 auto;

    color: rgb(55, 53, 50);
    /* border-bottom: 2px solid rgb(36, 103, 195); */
}

.full-width-line {
    width: 100vw;
    height: 2px;
    background-color: rgb(36, 103, 195);
    margin-left: calc(-50vw + 50%);
    margin-top: 0.2rem;
    /* Center the line within the viewport */
}

.center {
    display: flex;
    justify-content: center;
    /* Horizontally center */
    align-items: center;
    /* Vertically center */
    height: 100vh;
    /* Ensure the div takes at least the full viewport height */
}

.n-header-product {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-right: 2.5rem;
    color: rgba(26 25 24 / .75);
}

.n-header-product__logo {
    width: 126px;
    height: 40px;
}

.n-header-product__info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    /* Allow items to wrap onto the next line */
    gap: 2rem;
    font-size: 1.3rem;
    font-weight: 700;
    color: rgba(26 25 24 / 1);
}

.important-message {
    display: flex;
    width: 100%;
    margin: .5rem auto .1rem auto;
    flex-direction: column;
    flex-wrap: wrap;
    row-gap: .3rem;
    /* background-color: #fffdfd; */
    border-bottom-color: rgb(36, 103, 195);
    border-bottom-width: 1.6px;
    border-bottom-style: solid;
    padding-bottom: .75rem;
}

.important-message p {
    font-size: 1.7rem;
    font-weight: 700;
    margin: 0.2rem 1rem;
    padding: 1rem;
    color: #972C11;
    background-color: rgba(238 247 255 / 1);
    border-radius: 0.5rem;
    /* cursor: crosshair;  Indicate a deleting action */
    cursor: url('../images/dismiss.svg') 16 16, crosshair;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-radius 0.3s ease;
}

.important-message p:last-child {
    margin-bottom: 2rem;
}

.important-message p:hover {
    transform: translateY(-2px);
    /* Slight upward movement */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    /* Soft shadow */
    border-radius: 8px;
}

/* Important message animation */
.light-swept {
    position: relative;
    overflow: hidden;
    /* Clipping the animated pseudo-element */
}

/* Pseudo-element for the light wave */
.light-swept::after {
    content: "";
    position: absolute;
    top: 0;
    left: -40%;
    /* Start off to the left */
    width: 40%;
    /* Adjust the width to control the size of the "wave" */
    height: 100%;
    background: linear-gradient(to right,
            rgba(255, 255, 255, 0) 0%,
            rgba(255, 255, 255, 0.6) 50%,
            rgba(255, 255, 255, 0) 100%);
    transform: skewX(-20deg);
    /* Adds a dynamic slant to the wave */
    animation: waveEffect 5s infinite;
}

/* Keyframes for the wave animation */
@keyframes waveEffect {
    0% {
        left: -40%;
    }

    33% {
        left: 100%;
        /* Move across the header in ~2 seconds (33% of 5s) */
    }

    100% {
        left: 100%;
        /* Stay off-screen until the next cycle */
    }
}

/* End of important message animation */


.main-section {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin: 0 auto;
    border-top: 1.5px solid rgba(26 25 24 / 0.1);
}

.main-section h2 {
    font-size: 2rem;
    margin: 1rem 1.5rem;
    font-weight: 500;
}

.cards {
    position: relative;
    /* Needed for positioning the pseudo-element */
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    gap: 1rem;
    padding-top: 0.5rem;
    margin: 2.5rem 0;

    transition: background-color 0.3s ease;
    /* Smooth transition for background color */
}

.cards:hover {
    background: linear-gradient(to bottom, rgba(238, 247, 255, 0.2), rgba(255, 255, 255, 0.9));
}

/* Bottom-left "L" shape */
.cards::before {
    content: "";
    position: absolute;
    left: 0.5rem;
    /* Position 5px from the left edge */
    top: 2.75rem;
    /* Start 90% of the container's height */
    height: calc(100% - 30px);
    /* Height for the combined L shape */
    width: 80px;
    /* Total width, including both vertical and horizontal sections */
    background-color: rgba(36, 103, 195, 0.5);
    /* Color for the L shape */
    clip-path: polygon(0 0,
            /* Top-left corner of vertical line */
            4px 0,
            /* Top-right corner of vertical line */
            4px calc(100% - 4px),
            /* Bottom-right corner of vertical line */
            80px calc(100% - 4px),
            /* Right edge of horizontal line */
            80px 100%,
            /* Bottom-right corner of horizontal line */
            0 100%
            /* Bottom-left corner */
        );
}

.cards>h2 {
    width: 100%;
    padding-left: 0;
    margin-left: 2rem;
    font-weight: 700;
}

.card {
    display: flex;
    width: 30rem;
    flex-direction: column;
    background-color: #fcfcfc;
    padding: 2rem;
    gap: 1rem;
    cursor: pointer;
    /* Changes cursor to pointer on hover */
    margin-bottom: 3rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-radius 0.3s ease;
    /* Smooth transition for movement and shadow */
}

.card:hover {
    transform: translateY(-4px);
    /* Slight upward movement */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    /* Soft shadow */
    border-radius: 10px;
}

.card-header {
    display: flex;
    align-items: center;
    gap: 2rem;
    border-bottom: 1px solid rgba(216 215 214 / 0.8);
}

.card-header-title p {
    font-size: 1rem;
    font-style: italic;
}

.card-header-title>p:first-child {
    font-size: 1.5rem;
    font-weight: 700;
    font-style: normal;
}

.card-header figure img {
    width: 5rem;
    height: 5rem;
    border-radius: 5rem;
}

.card-info {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.footerBird {
    background: url(https://www.nesdnow.navy.mil/images/footer-logo.png);
    height: 68px;
    width: 69px;
    margin-left: calc(50% - 35px);
    margin-top: -39px;

}

footer {
    margin-top: 10rem;
}

footer ul {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

footer a {
    color: #333;
    /* Link color */
    text-decoration: none;
    /* Remove underline */
    padding: 8px 16px;
    /* Optional, for better spacing */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    /* transition: transform 0.3s ease, box-shadow 0.3s ease, font-weight 0.3s ease; Smooth transition including font-weight */
}

footer a:hover {
    transform: translateY(-3px);
    /* Slight upward movement */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    /* Soft shadow */
    color: #0056b3;
    /* Optional, change color on hover */
    /* font-weight: bold; Make text bold on hover */
}

footer section {
    display: flex;
    flex-wrap: wrap;
    margin: 0 auto;
}

footer img {
    width: 60px;
    height: 60px;
}

.footerLeft {
    display: flex;
    align-items: center;
    width: 400px;
    font-size: 1.5rem;
    font-weight: 700;
    gap: 1rem;
}

.footerMiddle {
    display: flex;
    align-items: center;
    text-align: center;
    font-weight: 700;
}

.footerRight {
    display: flex;
    gap: 2rem;
    align-items: center;
    /* justify-content: flex-end; */
    width: 400px;
    text-align: right;
}

.footerRight a {
    padding: 0;
}