:root{
    /* ==== Colors ==== */
    --body-color: #E4e9f7;
    --sidebar-color: #fff;
    --primary-color: #1D97BC;
    --primary-color-light: #D6ECEC;
    --toggle-color: #ddd;
    --text-color: #0A066E;


    /* ==== Transition ==== */
    --tran-03: all 0.2s ease;
    --tran-03: all 0.3s ease;
    --tran-04: all 0.4s ease;
    --tran-05: all 0.5s ease;
}

body{
    height: 100vh;
    background: var(--body-color);
}


/* ===== Sidebar ===== */
.sidebar{
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 250px;
    padding: 10px 14px;
    background: var(--sidebar-color);
    transition: var(--tran-05);
    z-index: 100;
    font-family: "Oswald", sans-serif;
    font-style: normal;
    font-weight: 600;
    font-optical-sizing: auto;
}

.sidebar.close{
    width: 0px;
    visibility: hidden;
}
/* ===== Reusable CSS ===== */
.sidebar .text{
    font-size: 16px;
    font-weight: 500;
    color: var(--text-color);
    transition: var(--tran-04);
    white-space: nowrap;
    opacity: 1;
}

.sidebar.close .text{
    opacity: 0;
}

.sidebar .image{
    min-width: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sidebar li{
    height: 50px;
    margin-top: 10px;
    list-style: none;
    display: flex;
    align-items: center;
}

.sidebar li .icon{
    min-width: 50px;
    font-size: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--tran-02);
}

.sidebar li #icon{
    width: 1.875rem;
    font-size: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--tran-02);
    left: 10px;
}

.sidebar li #hicon{
    width: 2.1875rem;
    font-size: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--tran-02);
    left: 7px;
}

.sidebar li #dicon{
    width: 2.1875rem;
    font-size: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--tran-02);
    left: 7px;
}

.sidebar li #nicon{
    width: 2.8125rem;
    font-size: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--tran-02);
    left: 2px;
}

.sidebar li #micon{
    width: 1.875rem;
    font-size: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--tran-02);
    left: 10px;
}

.sidebar li #cicon{
    width: 1.875rem;
    font-size: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--tran-02);
    left: 8px;
}

.sidebar li .text{
    color: var(--text-color);
    font-size: 20px;
    transition: var(--tran-02);
    left: 30px;
}

.sidebar li .htext{
    color: var(--text-color);
    font-size: 20px;
    transition: var(--tran-02);
    left: 29px;
}

.sidebar header{
    position: relative;
}

.sidebar .image-text img{
    width: 40px;
    border-radius: 6px;
}

.sidebar header .image-text{
    display: flex;
    align-items: center;
}

header .image-text .header-text{
    display: flex;
    flex-direction: column;
}

.header-text .name{
    font-weight: 600;
    font-family: "Oswald", sans-serif;
    font-style: normal;
    font-optical-sizing: auto;
    text-decoration: none;
    color: black;
}

.header-text .profession{
    font-weight: 600;
    font-family: "Oswald", sans-serif;
    font-style: normal;
    font-optical-sizing: auto;
    text-decoration: none;
    color:black;
}

.sidebar header .toggle{
    position: absolute;
    top: 50%;
    width: 20px;
    right: -25px;
    transform: translateY(-50%) rotate(180deg);
    background-color: var(--primary-color);
    display: flex;
    align-items:center;
    justify-content: center;
    border-radius: 50%;
    color: var(--sidebar-color);
    font-size: 22px;
    transition: var(--tran-03);
}

.sidebar .menu{
    margin-top: 35px;
}
.sidebar.close header .toggle{
    transform: translateY(-50%);
}

.sidebar.close .toggle{
    visibility: visible;  
    transform: translateY(-50%);
}

.sidebar .search-box{ 
    background: var(--body-color);
    transition: var(--tran-05);
    border-radius: 6px;
    
}

.search-box input{
    height: 100%;
    width: 100%;
    font-size: 16px;
    font-weight: 500;
    background: var(--body-color);
    outline: none;
    border-radius: 6px;
    border: none;
}

.sidebar li a{
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    text-decoration: none;
    border-radius: 6px;
    transition: var(--tran-04)
}

.sidebar li a:hover{
    background: var(--primary-color);
}

.sidebar li a:hover .text{
    color: var(--sidebar-color);
}


.sidebar .menu-bar{
    height: calc(100% - 50px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* ========== END OF SIDEBAR ========== */

/* ========== Contact Form ===========*/

form{ 
    
    padding: 1rem;
    font-family: "Oswald", sans-serif;
    font-style: normal;
    font-weight:   500;
    font-optical-sizing: auto;
    color: var(--text-color)

}

fieldset{
    border: 1px solid #444;
    padding: 1rem;
    margin: 0  0.5rem 2rem 0.5rem;
}

label,input{
    display: block;
    width: 75%;
}

input[type="text"],
input[type="tel"] {
    margin: 0.125rem 0 1rem 0;
}

textarea{
    width: 75%;
    margin: 0.125rem 0 1rem 0;
}

.button{
    width: 6rem;
    height: 2rem;
    border: none;
    border-radius: 20px;
}

.button:hover{
    filter: opacity(0.5);
}
.align-right{
    display: flex;
    justify-content: end;
}

input[type="submit"]{
    margin: 0 0.55rem;
    background-color: var(--primary-color);
    color:white;
}

input[type="reset"]{
   background-color: var(--body-color);
   color: var(--text-color);
}

.contact{
    top: 100px;
}

/* ============= END OF FORM ============== */

.page-name{
    height: 100vh;
    left: 250px;
    width: calc(100% - 88px);
    background: var(--body-color);
    transition: var(--tran-05);
    font-family: "Oswald", sans-serif;
    font-style: normal;
    font-weight: 600;
    font-optical-sizing: auto;
}

.page-namea{
    height: 8rem;
    left: 250px;
    width: calc(100% - 88px);
    background: var(--body-color);
    transition: var(--tran-05);
    font-family: "Oswald", sans-serif;
    font-style: normal;
    font-weight: 600;
    font-optical-sizing: auto;
}

.page-name .text{
    font-size: 30px;
    font-weight: 500;
    color: var(--text-color);
    padding: 8px 40px;
    left: -84px;
    top: 50px;
    font-family: "Oswald", sans-serif;
    font-style: normal;
    font-weight: 600;
    font-optical-sizing: auto;
}

.page-namea .text{
    font-size: 30px;
    font-weight: 500;
    color: var(--text-color);
    padding: 8px 40px;
    left: -205px;
    top: 50px;
    font-family: "Oswald", sans-serif;
    font-style: normal;
    font-weight: 600;
    font-optical-sizing: auto;
}

.page-name .cotext{
    font-size: 30px;
    font-weight: 500;
    color: var(--text-color);
    padding: 8px 40px;
    left: -85px;
    top: 50px;
}

.page-namea .cotext{
    font-size: 30px;
    font-weight: 500;
    color: var(--text-color);
    padding: 8px 40px;
    top: 50px;
}

.sidebar.close ~ .page-name{
    left: 88px;
    width: calc(100% - 88px);
}

.sidebar.close .icon{
    opacity: 0;
    visibility: hidden;
}
.sidebar.close .image-text img{
    opacity: 0;
    visibility: hidden;
}

.sidebar.close ~ .page-namea{
    left: 88px;
    width: calc(100% - 88px);
}

form{
    top: -750px;
    width: 100%;
    transition: var(--tran-05);
}

/* Carousel Container */
.carousel {
    position: relative;
    top:-600px;
    left: 40px;
    max-width: 100%;
    margin: 50px auto 0 20px; /* Move down (50px) and to the left (20px) */
    overflow: hidden;
    transform: translateX(-50px);
    border: 2px solid #ddd;
    border-radius: 8px;
    display:flex;
    font-family: "Oswald", sans-serif;
    font-style: normal;
    font-weight: 500;
    font-optical-sizing: auto;
    }
    /* Carousel Images */
    .carousel-images {
    display: flex;
    transition: transform 1s ease-in-out;
    }
    .carousel-images img {
    width: 100%;
    flex-shrink: 0;
    }


    .ctext{
        position:relative;
        top: -570px;
        font-size: 20px;
        left: 45px;
        display:flex;
        font-family: "Oswald", sans-serif;
        font-style: normal;
        font-optical-sizing: auto;
        color: var(--text-color);
        font-weight: bold;
    }
    /* END OF IMAGE CAROUSEL */
.weekly {
    position: relative;
    top: -656px;
    left: 110px;
    font-size: 20px;
    font-family: "Oswald", sans-serif;
    font-style: normal;
    font-weight: 500;
    font-optical-sizing: auto;
}

.hnews {
    position: relative;
    top: -500px;
    left: 200px;
    font-family: "Oswald", sans-serif;
    font-style: normal;
    font-weight: 500;
    font-optical-sizing: auto;
}

footer{
    position:relative;
    top: -200px;
    background-color: var(--primary-color);
    width: 100%;
    height: 120px;
    font-family: "Oswald", sans-serif;
    font-style: normal;
    font-weight: 500;
    font-optical-sizing: auto;
    font-size: 12px;
}

p{
    left: 120px;
    top: 40px;
    font-family: "Oswald", sans-serif;
    font-style: normal;
    font-weight: 500;
    font-optical-sizing: auto;
}

li.currentPage::before {
    position: absolute;
    content: "";
    top: 5px;
    left: -14px;
    display: block;
    z-index: -1;
    height: 2.5rem;
    width: 0.6rem;
    background-size: contain;
    background-image: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F><svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 146.61 540.48"><defs><style> .cls-1 { stroke-width: 3px; } .cls-1, .cls-2 { fill: %231c97bc; stroke: %231c97bc; stroke-miterlimit: 10; } .cls-2 { stroke-width: 5.26px; } </style></defs><!-- Generator: Adobe Illustrator 28.7.1, SVG Export Plug-In . SVG Version: 1.2.0 Build 142) --><g><g id="Layer_1"><path class="cls-1" d="M3.7,540.07"/><rect class="cls-2" x="3.7" y="2.96" width="60.85" height="535.01"/></g></g></svg>');
    background-repeat: none;
    }

h2 .captures{
     position:absolute;
     top: 300px;
     font-family: "Oswald", sans-serif;
     font-style: normal;
     font-weight: 500;
     font-optical-sizing: auto;
    }

    .hitext {
        margin-left: 1.5rem;
        margin-right: 1.5rem;
        top: -700px;
        font-size: 18px;
        color: var(--text-color);
        border: none;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        padding: 1rem 1rem 1rem 1rem;
        background-color: #EBEBEE;
        display:flex; 
        font-family: "Oswald", sans-serif;
        font-style: normal;
        font-weight: 500;
        font-optical-sizing: auto;
        border-radius: 10px;
    }

    .fly {
        left: 17px;
        top: -650px;
        width: 90%
    }

    .beginning-name{
        margin-left: 2.9rem;
        margin-right: 1rem;
        margin-top: 5rem;
        top: -720px;
        left: -4px;
        font-size: 22px;
        color: var(--text-color);
        font-family: "Oswald", sans-serif;
        font-style: normal;
        font-weight: 500;
        font-optical-sizing: auto;
    }

    .firstblock{
        border:1px solid black;
        font-family: "Oswald", sans-serif;
        font-style: normal;
        font-weight: 500;
        font-optical-sizing: auto;
    }

    .breaststroke{
        margin-left: 2.9rem;
        margin-right: 1rem;
        top: -620px;
        left: -4px;
        font-size: 22px;
        color: var(--text-color);
        font-family: "Oswald", sans-serif;
        font-style: normal;
        font-weight: 500;
        font-optical-sizing: auto;
    }

    .brtext{
        margin-left: 1.5rem;
        margin-right: 1.5rem;
        top: -600px;
        font-size: 18px;
        color: var(--text-color);
        border: none;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        padding: 1rem 1rem 1rem 1rem;
        background-color: #EBEBEE;
        display:flex;
        font-family: "Oswald", sans-serif;
        font-style: normal;
        font-weight: 500;
        font-optical-sizing: auto;
        border-radius: 10px;
    }

    .history-img{
        max-width:90%;
        max-height: 50%;
        left: 18px;
        top:-550px;
    }

    .training-title{
        margin-left: 2.7rem;
        margin-right: 3rem;
        margin-top: 5rem;
        top: -720px;
        font-size: 22px;
        color: var(--text-color);
        font-family: "Oswald", sans-serif;
        font-style: normal;
        font-weight: 500;
        font-optical-sizing: auto;
    }

    .traintext{
        margin-left: 1.8rem;
        margin-right: 1.8rem;
        top: -700px;
        font-size: 18px;
        color: var(--text-color);
        border: none;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        padding: 1rem 1rem 1rem 1rem;
        background-color: #EBEBEE;
        display:flex;
        font-family: "Oswald", sans-serif;
        font-style: normal;
        font-weight: 500;
        font-optical-sizing: auto;
        border-radius: 10px;
    }

    .equipment-title{
        margin-left: 2.7rem;
        margin-right: 3rem;
        top: -620px;
        font-size: 22px;
        color: var(--text-color);
        font-family: "Oswald", sans-serif;
        font-style: normal;
        font-weight: 500;
        font-optical-sizing: auto;
    }

    .equiptext{
        margin-left: 1.8rem;
        margin-right: 1.8rem;
        top: -600px;
        font-size: 18px;
        color: var(--text-color);
        border: none;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        padding: 1rem 1rem 1rem 1rem;
        background-color: #EBEBEE;
        display:flex;
        font-family: "Oswald", sans-serif;
        font-style: normal;
        font-weight: 500;
        font-optical-sizing: auto;
        border-radius: 10px;
    }

    .athletes{
        margin-left: 5.5rem;
        margin-right: -1.5rem;
        margin-top: 1.5rem;
        padding-bottom: 1rem;
        font-size: 22px;
        color: var(--text-color);
        font-family: "Oswald", sans-serif;
        font-style: normal;
        font-weight: 500;
        font-optical-sizing: auto;
    }

    .mark{
        margin-left: -1rem;
        border: none;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        padding: 1rem 1rem 1rem 1rem;
        background-color: #EBEBEE;
        display:flex;
        font-family: "Oswald", sans-serif;
        font-style: normal;
        font-weight: 500;
        font-optical-sizing: auto;
        border-radius: 10px;
    }

    .markspitz{
        padding-bottom: 4rem;
    }

    .marks{
        font-size: 25px;
        font-weight: 600;
        margin-bottom: 1rem;
        
        
    }
    .ma{
        margin-bottom: 1rem;
    }
    .mi{
        margin-bottom: 1rem;
    }

    .michaelp{
        font-size:25px;
        font-weight: 600;
        margin-bottom: 1rem;
    }

    .michael{
        margin-left: -1rem;
        border: none;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        padding: 1rem 1rem 1rem 1rem;
        background-color: #EBEBEE;
        display:flex;
        font-family: "Oswald", sans-serif;
        font-style: normal;
        font-weight: 500;
        font-optical-sizing: auto;
        border-radius: 10px;
    }

    .phelps{
        padding-bottom: 4rem;
    }

    .summerm{
        font-size:25px;
        font-weight: 600;
        margin-bottom: 1rem;
    }

    .summer{
        margin-left: -1rem;
        border: none;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        padding: 1rem 1rem 1rem 1rem;
        background-color: #EBEBEE;
        display:flex;
        font-family: "Oswald", sans-serif;
        font-style: normal;
        font-weight: 500;
        font-optical-sizing: auto;
        border-radius: 10px;
    }

    .su{
        margin-bottom: 1rem;
    }

    .footer-navigation{
      
       margin-top: 15rem; 
       background-color: var(--primary-color);
       padding: 1rem;
       left: 10px;
       width: 100%;
       height: 120px;
    }

    

    .mcred{
        left: 9.6rem;
        font-size: 6px;
        color: var(--sidebar-color);
        top: -680px;
        left: 2px;
    }

    .scred{
        left: 11rem;
        font-size: 6px;
        color: white;
        top: -780px;
        left: 10px;
    }

    .homtext{
        left: 2.3rem;
        top: -650px;
        font-size: 18px;
        font-weight: bold;
        font-family: "Oswald", sans-serif;
    font-style: normal;
    font-optical-sizing: auto;
    color: var(--text-color);
    
    }

    .welcome{
        display: flex;
        top: -620px;
        left: 2rem;
        width: 270px;
        margin-left: -0.5rem;
        border: none;
        box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
        padding: 1rem 1rem 1rem 1rem;
        background-color: #EBEBEE;
        display:flex;
        font-family: "Oswald", sans-serif;
        font-style: normal;
        font-weight: 500;
        font-optical-sizing: auto;
        border-radius: 10px;
        color: var(--text-color);
    }

    .sidebar .log{
        width: 40px;
        left: 75px;
        top: 10px;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease; 
    }

    .sidebar .logt{ 
        font-weight: 600;
        font-family: "Oswald",sans-serif;
        font-style: normal;
        font-optical-sizing: auto;
        text-decoration: none;
        color: black;
        left: 120px;
        top: -15px;
        opacity: 0;
        visibility: hidden; 
        transition: opacity 0.3s ease, visibility 0.3s ease;  
    }

    .closed .log,
    .closed .logt{
        opacity: 1;
        visibility: visible;
    }

    .athcontent{
        left: -50px;
    }

    .ipic{
        top: -550px;
    }
  

    @media screen and (min-width: 900px) {

        .sidebar.close{
            width: 78px;
            visibility: visible;
        }

        .carousel{
            max-width: 100%;
        }

        .sidebar.close .icon{
            opacity: 0;
            visibility: hidden;
        }
        .sidebar.close .image-text img{
            opacity: 1;
            visibility:visible;
        }

        .sidebar.close .icon{
            opacity: 1;
            visibility: visible;
        }

        .sidebar.close .toggle{
            position: absolute;
            top: 50%;
            right: -25px;
        }

        .carousel{
            width: 60%;
            left: 450px;
        }

        .footer-navigation{
            left: 80px;
            height: 120px;
            background-color: #1D97BC;
        }

        .footer{
            height: 120px;
            left:50px;
        }

        .athcontent{
            left: 50px;
        }

        .mcred{
            top: -85px;
            left: 300px;
            font-size: 8px;
            color: #fff;

        }

        .mich{
            width: 30%;
        }

        .scred{
            top: -80px;
            left: 300px;
            color: #444;
            font-size: 8px;
        }

        


    }

        /* Media Query: CSS for screens larger than 1024px wide ONLY goes here */