@font-face {
    font-family:'Gabarito';
    src:url(fonts/gabarito/Gabarito-Regular.ttf) format("truetype")
    }
    
    * {
    padding:0;
    margin:0;
    color:#000;
    box-sizing:border-box
    }
    
    body {
    font-family:'Gabarito',sans-serif;
    background-color:#3a4856;
    background-image:linear-gradient(135deg,#3a4856,#242e38);
    min-height:100vh
    }
    
    h1 {
    font-size:3.5em
    }
    
    h2 {
    font-size:2em
    }
    
    h3 {
    font-size:1.2em
    }
    
    .GiantText i {
    font-size:7rem;
    color:#eee;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
    text-shadow:#000 5px 5px 5px,#000 -2px -2px 5px
    }
    
    .SubGiantText {
    font-size:2.5rem;
    color:#eee;
    text-shadow:#000 5px 5px 5px,#000 -2px -2px 5px
    }
    
    .key-features-section {
        padding: 4rem 0;
        width: 50%;
        background-color: #139597;
    }

    .key-features-section2 {
        padding: 4rem 0;
        background-color: #324B4B;
        width: 50%;
    }


    .container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 20px;
    }

    .section-heading {
        text-align: center;
        font-size: 2.5rem;
        margin-bottom: 3rem;
        color: #eee;
    }

    .feature {
        display: flex;
        flex-direction: column;
        align-items: center;
        margin-bottom: 3rem;
    }

    .feature-icon img {
        max-width: 7.5%;
        margin-bottom: 1rem;
    }

    .feature-icon1 img {
        max-width: 15%;
        margin-bottom: 1rem;
    }

    .feature-heading {
        font-size: 1.5rem;
        margin-bottom: 0.5rem;
        color: #eee;
    }

    .feature-description {
        text-align: center;
        max-width: 400px;
        color: #eee;
    }

    .about-us-section {
        padding: 4rem 0;
        background-color: #95B0B0;
    }

    .container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 20px;
    }

    .about-content {
        text-align: justify;
    }

    .about-content p {
        margin-bottom: 1.5rem;
        color: #333;
        font-size: 1.25rem;
    }


    
    .checkbox {
        background-color: rgba(0, 0, 0, 0.8);
        border-radius: 5px;
        padding: 1rem;
        margin-bottom: 1rem;
    }
    
    .checkbox * {
        color: #eee /*#2A80BB;*/
    }
    
    .btn-dark {
        background-color: #FF8C61;
        color: #fff;
        padding: 1.25rem 2rem;
        border: none;
        border-radius: 5px;
        cursor: pointer;
        transition: background-color 0.3s ease;
    }
    
    .btn-dark:hover {
        background-color: #fe9975;
    }
    
    .message {
        color: #fff;
        margin-top: 1rem;
    }

    
    .emailClass {
    border-radius:5px;
    background-color:rgba(255,255,255,0.8);
    padding:2%;
    min-width:25vw;
    margin-bottom:2%;
    border:#eee 1px solid
    }
    
    .info {
    margin:1%;
    text-align:left;
    width:48%;
    background-color:rgba(255,255,255,0.2);
    padding:1em;
    border-radius:15px
    }
    
    .info ul li {
    margin-top:1.5%;
    font-size:1.1em
    }
    
    .firstPara,.interPara {
    width:100%;
    margin:0;
    text-align:left;
    padding:2% 10%;
    min-height:40vh
    }
    
    .firstPara {
    background-color:rgba(255,255,255,0.2)
    }
    
    .firstPara p,.interPara p {
    font-size:1.2em
    }
    
    .interPara h2 u,.interPara p {
    color:#ddd
    }
    
    .imageBox {
    margin:3% 1% 0;
    width:80%
    }
    
    .imageBoxTall {
    margin:3% 2%;
    width:45%
    }
    
    .imageBoxWide {
    max-height:40vh;
    width:80%
    }
    
    .imageBox img {
    padding:0;
    margin:0;
    min-width:100%;
    min-height:100%
    }
    
    .LandingPage {
    height:100vh;
    /*background-image:url(swimBack.jpg);*/
    background-image:url(newSwimBack2.jpg);
    background-repeat:no-repeat;
    background-position:center;
    background-size:cover
    }

    .header-inner-img {
        width:40%;
        transform: rotate(-5deg);
    }
    .header-inner {
        display:flex;
        align-items:left;
        width:60%; 
    }
    .header-inner * {
        text-align: left;
    }
    .header-outer {
        width:100%;
        height: 65%;
        display:flex;
        justify-content:right;
        align-items:end
    }
    .inner-img {
        width: 100%;
        max-width: none;
        min-width: none;
        min-height: none;
        max-height: none;
    }
    .register-button {
        background-color: #3495EB;
        padding: 1rem;
        border-radius: 20px;
        width: 20%;
        color: #ddd;
        font-size: 1.2rem;
        text-align: center;
    }

    .section {
        min-height: 60vh;
        background-color: #E6F4F1;
        display:flex;
        padding: 1rem;
    }


    

    .sect-img {
        width: 80%;
        min-width: none;
        max-width: none;
        max-height: none;
        min-height: none;
        height: auto;
    }

    .leftSection {
        
        min-height: 100%;
        width:50%;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 1rem;
    }
    .rightSection {
        
        min-height: 100%;
        width:50%;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 1rem;
    }

    .image-container, .image-container2 {
        position: relative;
        overflow: hidden;
      }
      
      .image-container img {
        position: absolute;
        left: -100%; /* Initially position off-screen to the left */
        transition: left 0.5s ease; /* Define transition for smooth animation */
      }

      .image-container2 img {
        position: absolute;
        right: -100%; /* Initially position off-screen to the left */
        transition: right 0.5s ease; /* Define transition for smooth animation */
      }

    
    table {
    border-collapse:collapse
    }

    .linkList {
    display: flex;
    width: 100%;
    justify-content: space-evenly;
    margin: none;
    padding: none;
  }

  .linkList h3 {
    padding: 1em 0;
    text-align: center;
    border: 1px solid black;
    background-color: #139597;
  }

  .linkList button {
    width: 33.333%;
  }
    
  nav {
    display: flex;
    background-color: #6B7987;
    border: 1px solid black;
    position: sticky;
    top: 0;
    z-index: 1;
    justify-content: space-between;
    align-items: center;
    height: 7vh; /* Set the height of the navbar */
    padding: 0 10px; /* Add padding to the navbar */
  }

    .expanded_nav {
    display: flex;
    background-color: rgba(0, 0, 0, 0.8);
    border: 1px solid black;
    flex-wrap: wrap;
    position: sticky;
    top: 6vh;
    z-index: 1;
    justify-content: space-evenly;
    align-items: center;
    height: 6vh; /* Set the height of the navbar */
    padding: 0 10px; /* Add padding to the navbar */
    display: none;
  }

  .expanded_nav * {
    color: #fff;
  }

  .searchbar {
    height: 60%;
    min-width: 20vw;
    background-color: #ddd;
    padding: 0 1%;
    border: none;
    border-radius: 15px;
  }
    
  .left {
    flex: 1;
    display: flex; /* Ensure proper flex display */
    align-items: center; /* Vertically center the image */
    font-size: 1.2rem;
  }
  
  /* Style for the right side of the navbar */
  .right {
    display: flex;
    gap: 10px;
  }
    
    .nav-item {
    margin-right:10px
    }

    .nav-expand-box {
    max-height: 6vh;
    border-radius: none;
  }

  .nav-expand-box img {
    max-height: 6vh;
    border-radius: none;
  }   

  .nav-expand-box2 {
    max-height: 15vh;
    border-radius: none;
    margin: 0;
  }

  .nav-expand-box2 img {
    max-height: 15vh;
    border-radius: none;
    margin: 0;
  }
 
    header {
    padding:10px;
    margin:5vh 0 10vh;
    text-align:center;
    color:#000
    }
    
    .Lunderline {
    border:#000 solid 2px;
    max-width:90%;
    width:90%;
    margin-left:5%;
    margin-right:5%
    }
    
    .Sunderline {
    border:#000 solid 1px
    }
    
    .spaceAbove {
    margin-top:5%
    }
    
    .spaceBelow {
    margin-bottom:5%
    }
    
    main {
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    text-align:center;
    margin:1%
    }
    
    .stat {
    background-color:#139597;
    padding:10px;
    margin:10px;
    border-radius:10px;
    min-width:150px;
    min-height:35vh;
    width:25%;
    border:#000 solid 1px;
    position:relative
    }
    
    .stat h3,.stat h2 {
    text-align:center
    }
    
    .lessMargin {
    margin:0
    }
    
    a {
    text-decoration:none;
    color:#000
    }
    
    button {
    all:unset;
    color:#000
    }
    
    .stat a::before {
    content:"";
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0
    }
    
    .img {
    max-width:50%;
    max-height:50%;
    display:block;
    margin:5% auto 0;
    background-color:none;
    border-radius:10px
    }
    
    .alert-green {
    background-color:#85D887;
    padding:10px;
    border-radius:10px;
    border:#000 solid 1px;
    max-width:80%
    }
    
    .centered {
    display:flex;
    align-items:center;
    justify-content:center;
    flex-wrap:wrap
    }
    
    .formClass {
    background-color:rgba(19, 149, 151, 0.8);
    padding:10px;
    margin:10px;
    border-radius:10px;
    width:25%;
    border:#888 solid 1px;
    }

    .formClass .form-control {
        background-color: rgba(19, 149, 151, 0.8);
        border: #aaa solid 1px;
        border-radius: 15px;
        margin: 1rem 0;
    }

    .formClass ::placeholder{
            color: #ddd; /* Change placeholder color to white */
    }

    .login-button {
        padding: 0.8rem;
        width: 60%;
        background-color: #54C393;
        border-radius: 20px;
    }
    
    .confirmBox {
    width:100%;
    height:7.5%;
    background-color:#000;
    position:fixed;
    bottom:0;
    right:0
    }
    
    .confirmBox * {
    color:#fff
    }
    
    fieldset {
    border-style:none;
    margin:5%
    }
    
    legend {
    font-size:1.5rem;
    text-align:center;
    margin-bottom:5%
    }
    
    footer {
    background-color:rgba(0,0,0,0.8);
    display:flex
    }
    
    .footerSect {
    margin:5%;
    padding:2%
    }
    
    .footerSect p {
    margin:0
    }
    
    footer * {
    color:#eee
    }
    
    .profilepic {
    max-width:20%
    }
    
    .normal table {
    border-collapse:collapse;
    color:#000;
    width:100%
    }
    
    th,td {
    padding:.25em;
    font-size:1.125em
    }
    
    .normal th {
    background-color:rgba(19,149,151,0.6)
    }
    
    .normal td {
    background-color:rgba(212,244,255,0.8)
    }
    
    .normal tr:nth-child(even) td {
    background-color:rgba(192,207,224,0.8)
    }
    
    .darkened>th {
    background-color:rgba(19,149,151,0.4)
    }
    
    .darkened td {
    background-color:rgba(212,244,255,0.5)
    }
    
    .darkened tr:nth-child(even) td {
    background-color:rgba(192,207,224,0.5)
    }
    
    .statChart {
    min-width:100%;
    min-height:100%;
    padding:1%;
    border-radius:15px;
    overflow:hidden;
    }
    
    .chartBack {
    padding:1%;
    border-radius:15px;
    height:40vh
    }
    
    .swimTimeChart {
    border-radius:15px;
    margin:.5%;
    width:45%;
    min-width:600px;
    max-height:40vh;
    }
    
    .swimTimeChartSmall {
    border-radius:15px;
    margin:.5%;
    width:23%;
    min-width:300px;
    min-height:100%
    }
    
    .swimTimeChartV {
    display:flex;
    flex-direction:column;
    border-radius:15px;
    margin:1%;
    max-width:300px;
    min-width:100px
    }
    
    .statBoxVT,.statBoxVB {
    padding:.6em;
    width:100%;
    flex:1;
    background-color:rgba(19,149,151,0.4);
    display:flex;
    flex-direction:column;
    justify-content:center
    }
    
    .statBoxVT {
    border-radius:15px 15px 0 0
    }
    
    .statBoxVB {
    border-radius:0 0 15px 15px
    }
    
    .statBox {
    border-radius:15px;
    padding:10px;
    margin:.5%;
    width:23%;
    min-width:300px;
    max-height:40vh;
    overflow-y:auto;
    overflow-x: hidden;
    scrollbar-width:none;
    }
    
    .statBox, .box, .chartBack, .statChart {
        background-color: #274a65;
        border: 1px solid rgba(0, 0, 0, 0.2);
    }

    .takeSpace {
        width: 100%;
        height: 100%;
    }

    .table-img {
        max-height: 1.2rem;
    }

    .SmallstatBox {
    width:30%;
    padding:0;
    margin:0
    }
    
    .SmallstatBox h2 {
    color:#fff;
    text-shadow:#000 5px 5px 6px,#000 -2px -2px 6px;
    font-size:2rem
    }
    
    .input-class {
    background-color:rgba(255,255,255,0.9)
    }
    
    .squeeze {
    display:flex;
    align-items:center;
    width:100%
    }
    
    .reduced {
    height:50%
    }
    
    .btn {
    padding:.1em;
    height:2em
    }
    
    .scrollable-table-wrapper > div {
    overflow-y:auto;
    overflow-x: hidden;
    max-height: 80vh;
    scrollbar-width:none;
    border-radius: 15px;
    }
    
    .scrollable-table-wrapper > div::-webkit-scrollbar {
    display:none
    }
    
    .pbDoughnutChart,.takeSpace {
    max-width:100%;
    max-height:100%
    }
    
    .doughnutBox {
    margin:0 .5%;
    padding:1%;
    min-height:50vh;
    width:25%;
    position:relative
    }
    
    .AddButton {
    background-color:rgba(19,149,151,0.4);
    padding:5px;
    border-radius:15px
    }
    
    .hidden {
    background-color:rgba(0,0,0,0);
    color:rgba(0,0,0,0)
    }
    
    .colored {
    background-color:#C0CFE0;
    border-radius:5px;
    border:.05em solid #000
    }
    
    .options {
    display:none
    }
    
    .show-options {
    display:block
    }
    
    
    .backgreen {
    background-color:rgba(133,216,135,0.8);
    padding:1px;
    border-radius:3px;
    margin:4%
    }
    
    .backblue {
    background-color:rgba(0,191,255,0.7);
    padding:.15em;
    border-radius:3px
    }
    
    .backred {
    background-color:rgba(255,69,0,0.7);
    padding:.15em;
    border-radius:3px
    }
    
    .tGreen {
    color:#007D57
    }
    
    .tRed {
    color:#A83900
    }
    
    .split-input {
    margin:1%
    }
    
    .form-group>label {
    font-size:1.5em
    }
    
    .floor {
    height:20vh
    }
    
    .spacedTop {
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    align-items:center
    }
    
    .ArrowBox {
    height:100%;
    background-color:rgba(19,149,151,0.4);
    margin:0 5%;
    padding:.2em;
    border-radius:15px
    }
    
    .hideBig {
    display:none
    }
    
    .hideSmall {
    display:inline
    }
    
    .hide-labels label {
    display:none
    }
    
    .editable-title input {
    font-size:2em;
    font-weight:700;
    color:#000;
    text-align:center;
    border:none;
    background-color:transparent;
    padding:0;
    margin:0;
    outline:none
    }

    .spacedFeatures {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    .spacedFeatures .feature {
        margin: 1%;
        padding: 1%;
        border: 1px solid black;
        min-width: 200px;
    }


    .layout {
        display: grid;
        grid-template-areas:
            "opts actual";
        grid-template-columns: 1fr 5fr;
        min-height: 100vh;
        max-width: 100%;
    }

    .heading {
        grid-area: heading;
    }
    .opts {
        grid-area: opts;
        background-color: #3B4856;
    }
    .stick-to {
        position:sticky;
        top:7vh;
        padding: 20% 0 0 3%; 
    }
    .actual {
        grid-area: actual;
        
    }

    .footer {
        display: none;
    }
    .ftItem {
        margin: 0;
        padding: 3.5%;
        flex: 1; 
        display: flex;
        justify-content: center;
        align-items: center; 
        border: 1px solid black;
        max-height: 100%;
    }
    
    .ftItem img {
        width: auto;
        height: 5vh;
        max-height: 5vh;
    }



    .eventButtonCont {
        width: 100%;
        display: flex;
        justify-content: center;
    }
    .eventButton {
        padding: 1rem;
        width:45%;
        text-align: center;
        background-color: #CE6A85;
        border: 1px solid black;
    }
    .swimVideo {
        max-height: 40vh;
        max-width: 45%;
    }
    .swimVideo video {
        border: 1px solid black;
        border-radius: 15px;
        background-color: rgba(0, 0, 0, 0.2);
    }


    
    @media only screen and (max-width: 650px) {
        .footer {
            display: flex;
            position: sticky;
            bottom: 0;
            height: 8vh;
            min-height: 8vh;
            max-height: 8vh;
            background-color: #9EADBD;
            justify-content: space-between; /* Ensure items are spaced evenly */
            align-items: center; /* Center items vertically */
        }

        .section {
            display: block;
        }
        .leftSection {
            width:100%;
            min-height: 40vh;
        }
        .rightSection {
            width:100%;
            min-height: 40vh;
        }

        .sect-img {
            width: 100%;
        }

        .register-button {
            width: 50%;
        }

        .header-inner {
            width: 100%;
        }

        .header-outer {
            padding-top: 3rem;
            display:block;
            
        }

        .key-features-section {
            width: 100%;
        }

        .key-features-section2 {
            width: 100%;
        }

        .feature-icon img {
            max-width: 15%;
            margin-bottom: 1rem;
        }
    .layout {
 
        grid-template-areas:
            "actual";
        grid-template-columns: 1fr;
    }
    .opts {
        display: none;
    }
    .actual {
        max-width: 100vw;
    }

    nav {
    height:6vh;
    position: static;
    }

    nav * {
    font-size:1.1em
    }
    
    p {
    font-size:1.3em
    }
    
    h1 {
    font-size:2.5em
    }
    
    h2 {
    font-size:2em
    }
    
    h3 {
    font-size:1.75em
    }
    
    .GiantText i {
    font-size:3rem
    }
    
    .SubGiantText {
    font-size:1.5rem
    }
    
    .firstPara h2,.interPara h2 {
    font-size:2em
    }
    
    .firstPara p,.interPara p {
    font-size:1.5em
    }
    
    .stat {
    width:75%
    }
    
    .additionalSpace {
    margin-top:30%
    }
    
    .set {
    width:80%
    }
    
    .info {
    width:98%
    }
    
    .imageBox {
    width:95%
    }
    
    .imageBox img {
    width:95%;
    border-radius:5px
    }
    
    .imageBoxTall {
    margin:0 2%;
    width:90%
    }
    
    header {
    margin:2vh
    }
    
    .profilepic {
    max-width:80%
    }
    
    canvas {
    margin:5% 0 10%;
    max-width:95%
    }
    
    .checkbox {
    width:100%
    }
    
    .waitingForm {
    width:90%
    }
    
    th,td {
    font-size:16px
    }
    
    .formClass {
    min-width:80%
    }
    
    fieldset {
    margin:2%
    }
    
    .doughnutBox {
    margin:1%;
    padding:1%;
    min-height:None;
    width:45%;
    position:relative
    }
    
    .swimTimeChart {
    height:None;
    min-height:30vh;
    min-width:90%;
    max-width:90%;
    margin:1%;
    width:90%;
    overflow:hidden
    }
    
    .swimTimeChartSmall {
    min-width:90%;
    max-width:90%;
    width:90%
    }
    
    .swimTimeChartV {
    width:90%;
    min-width:1%
    }
    
    .statChart {
    margin:0;
    min-width:100%;
    height:100%
    }
    
    .statBox {
    width:90%;
    margin-bottom:1%;
    min-width:90%;
    }
    
    .swimVideo {
        min-width: 90%;
        max-height: 40vh;
    } 

   .SmallstatBox {
    width:90%
    }
    
    .reduced {
    height:100%
    }
    
    .spacedTop {
    margin-bottom:2%;
    justify-content:center
    }
    
    .AddButton {
    flex-grow:100%;
    max-width:50%;
    padding:2px 4px
    }
    
    .hidden {
    display:none
    }
    
    .hideSmall {
    display:none
    }
    
    .hideBig {
    display:inline
    }
    }