* {
        margin: 0%;
        padding: 0%;
        box-sizing: border-box;
    }

    body {
        font-family: Street2, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
        min-height: 800px;
        overflow-x: hidden;
        /* background-color: rgb(76, 183, 255); */
    }

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

    .nav-container{
        display: flex;
        align-items: center;
        /* gap: 25px; */
    }
    .hn {
        display: flex;
        height: 58px;
        background-color: #ffffff;
        width: 100vw;
        z-index: 1000;
        position: fixed;
        align-items: center;
        justify-content: center;
    }

    header {}

    .navbar {
        position: fixed;
        position: relative;
        height: 58px;
        width: 90%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: auto;
        padding: 15px 10px;
        font-weight: 200;
        font-style: normal;
    }

    nav img {
        width: 63px;
        display: flex;
        /* margin-left: 10px; */

    }

    .nav-links {
        display: flex;

    }

    .nav-links ul {
        display: flex;
        list-style: none;
        padding: 10px;
        position: relative;
        align-items: center;
        padding-left: 45px;
    }

    .nav-links ul li a {
        text-decoration: none;
        color: #404040;
        font-size: 14px;
        font-weight: 200;
        padding: 0px 10px;

    }

    .reg {
        display: flex;
        justify-content: flex-end;
        flex-wrap: nowrap;
        padding-right: 25px;
    }

    .reg a {
        text-decoration: none;
        font-weight: 500;
    }

    .sgi a {
        color: #404040;
        padding: 10px;
        font-size: 0.850rem;

    }

    .sgi a:hover {
        background-color: rgba(0, 0, 0, 0.1);
    }


    .sgu a {
        background-color: black;
        background-image: url('/img/logo2.jpg');
        background-repeat: no-repeat;
        background-position: right 6px center;
        background-size: 48px 14px;
        color: white;
        padding: 10px 60px 10px 8px;
        position: relative;
        font-size: 0.850rem;
        border-radius: 2px;
    }

    .sgu a:hover {
        background-color: #333;
    }


    /* ........................................Nav End.......................................................... */
    .hero-section {
        position: relative;
        display: flex;
        max-width: 100vw;
        z-index: 20;
        justify-content: center;
        align-items: center;
        height: 435px;
    }

    .hero {

        display: flex;
        flex-direction: column;
        justify-content: flex-end;
        margin: auto;
        width: 90%;
        color: white;
        padding-top: 145px;
    }

    .hero p {
        font-family: "Poppins", sans-serif;
        font-weight: 200;
        font-style: normal;
        font-size: .8rem;
    }

    .heading {
        font-size: 26px;
        font-style: normal;
        font-variant-caps: normal;
        font-variant-east-asian: normal;
        font-variant-ligatures: normal;
        font-variant-numeric: normal;
        /* font-weight: 400; */

        font-size: 1.5rem;
        font-weight: 800;
        /* line-height: 4rem; */
    }

    .hero button {
        margin-top: 15px;
    }

    #btn-1 {
        background: #2bb0d8;
        border: 1px solid #2bb0d8;
        color: white;
        padding: 10px;
        position: relative;
        font-size: 0.75rem;
        border-radius: 2px;
        font-weight: 550;
        margin-right: 10px;

        
    }
    #btn-1:hover{
        background: #398197;

    }
    #btn-2:hover{
        background: #398197;
    }
    button img {
        width: 10px;
    }

    #btn-2 {
        background: #2bb0d8;
        border: 1px solid #2bb0d8;
        color: white;
        padding: 10px;
        position: relative;
        font-size: 0.75rem;
        border-radius: 2px;
        font-weight: 550;
    }

    .bg {
        /* display: flex; */
        padding-top: 58px;
        max-width: 100vw;
    }

    .bg img {
        z-index: -10;
        position: absolute;
        overflow:hidden;
        max-width: 100vw;
        width:100% !important;
        height: auto;
        object-fit: cover;

    }

    .stream {
        position: relative;
        background-color: #ffffff;
        display: flex;
        z-index: -1;
        height: 100px;
        width: 100%;
        justify-content: center;
        align-items: center;

    }

    .stream h2 {
        color: #404040;
        font-size: 2rem;
        font-weight: 600;
    }

    .cards {
            max-width: 100vw;
        height: auto;
        margin-bottom: 100px;
         background: white;
        }
        .card-containers{
            flex-wrap: nowrap;
            flex-direction: row;
            display: flex;
            justify-content: space-evenly;
            align-items: flex-start;
            margin: auto;
            width: 80%;
            overflow-x: auto;
            /* overflow-y: hidden; */
            
        }
        .card-containers::-webkit-scrollbar{
            width:0px;
        }
        .card-container{
            width: 258px;
            padding: 10px;
            flex-shrink: 0;
    
        }

    .cards img {
        width: 100%;

    }

    .title {
        font-weight: 700;
        font-style: normal;
        color: #404040;
    }

    .des {
        font-weight: 200;
        font-style: normal;
        color: #404040;
    }

    .avail {
        display: flex;
        font-weight: 200;
        font-style: normal;
        font-size: small;
        color: #404040;
        padding: 10px 0px 10px 0px;
        align-items: center;
        justify-content: flex-start;

    }


    .show-time-container {
        height: 25vh;
        background-color: #f1f1f1;
        align-items: center;
        margin-top: 20vh;
        max-width: 100%;
        margin: auto;
        justify-content: center;
        display: flex;
        flex-direction: column;
        padding: 40px;

    }

    .header {
        padding: 0px 0px;
        display: flex;
        height: 10vh;
        justify-content: space-between;
        align-items: center;
        width: 90%;
        border-bottom: .8px solid #adb5bd;
        
    }

    .line {

        height: 10vh;
        width: .8px;
        background-color: #adb5bd;
    }

    .time {
        padding: 20px 0px;
        display: flex;

    }

    .content {
        padding-left: 10px;
    }

    .time-container {
        display: flex;
        justify-content: space-between;
        width: 90%;

    }
    .header-content h3{
        font-size: small;
        font-weight: 650;
        padding: 10px 0px;
    }
    .header-content1 h3{
            font-weight: 650;
            font-size: medium;
        }
    .content h2 {
        font-weight: 620;
        font-size: 14px;
        font-style: normal;
        color: #404040;
    }
    
    .content p {
        font-size: 14px;
        font-weight: 200;
        font-style: normal;
        color: #404040;
    }

    .header-content1 {
        align-items: center;
        justify-self: center;
        font-weight: 620;
        font-size: large;
        font-style: normal;
        color: #404040;

    }

    .header-content a {
        text-decoration: none;
        color: #2bb0d8;
    }
    .header-content3 a{
        display: none;
    text-decoration: none;
        color: #2bb0d8;
            font-size: small;

    }

    .greybox {
        /* background: linear-gradient(
  135deg, 
  #000000 10%, 
  #474953 25%, 
  #474953 75%, 
  #000000 100%
); */
background: linear-gradient(
  135deg, 
  #000000 0%, 
  #2a2d35 15%, 
  #474953 35%, 
  #474953 65%, 
  #2a2d35 85%, 
  #000000 100%
);  
max-width: 100vw;
        height: 400px;
        display: flex;
        align-items: center;
        margin-top: 50px;
    }

    .greycontainer {
        display: flex;
        justify-content: center;
        width: 100%;
        margin: auto;
        /* flex-direction: column-reverse; */
    }

    .greyimg {
        display: flex;
        flex-wrap: wrap;
    }

    .imgbox {
        padding: 10px;
    }

    .imgbox img {
        border: 1px solid #404040;
        border-radius: 5px;
        width: 225px;
        /* box-shadow: 
          0 0 15px rgba(255, 255, 255, 0.7),
          inset 0 0 15px rgba(255, 255, 255, 0.3); */
    }

    .max-content {
        display: flex;
        height: auto;
        width: 300px;
    }

    .maxbox {
        display: flex;
        color: white;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 500px;

    }

    .maxbox div img {
        width: 275px;
        margin: auto;
    }

    .mg2 p {

        font-size: 2rem;
        font-weight: 50;
        padding: 20px 40px;
    }

    .btn-sg a {
        text-decoration: none;
        font-weight: 700;
        color: #000000;
    }

    .btn-sg button {
        background-color: white;
        padding: 15px 35px;
        border-radius: 2px;
    }

    .end-card {
        width: 100vw;
        margin-bottom: 75px;
    }

    .cardend {
        margin: auto;
        display: flex;
        width: 90%;
        justify-content: center;
        align-items: center;
    }

    .ec1 {
        width: 600px;
        padding: 10px;

    }

    .ec2 {
        width: 600px;
        padding: 10px;
    }

    .cardend img {
        width: 100%;
        height: 300px;
    }

    .footerimg {
        width: 100vw;
        height: 300px;
        justify-content: center;
        align-items: center;
        background-image: url("/img/quilt-march2025-darker.avif");
        display: flex;
    }

    .footmax {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        margin: auto;
        width: 20%;
        color: white;
    }

    .footmax img {
        width: 100%;
        padding: 10px;
    }

    .plan {
        padding: 10px 0px;
        font-weight: 200;
        font-size: larger;
        font-style: normal;
        color: #ffffff;
    }

    .foot-btn a {
        text-decoration: none;
        font-weight: 700;
        color: #000000;
    }
    .foot-btn a:hover{
        color: #ffffff;
        background-color: #404040;
    }

    .foot-btn button {
        background-color: white;
        padding: 10px 20px;
        border-radius: 2px;
    }

    .foot-btn button:hover {
        background-color: #404040;
        color: #ffffff;
    }
    .footer {
        font-weight: 200;
        font-size: medium;
        font-style: normal;
        color: #ffffff;
        width: 100vw;
        height: 300px;
        background-color: #404040;

    }

    .footer a {
        text-decoration: none;
        color: white;
        padding: 10px;
    }
    .footer a:hover{
        text-decoration: underline;
    }

    .rights {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 10px;

    }

    .rights p {
        padding-bottom: 10px;
    }

    .footer ul {
        list-style: none;
        display: flex;
        flex-direction: row;
        padding: 10px;
        flex-wrap: wrap;
        justify-content: center;
    }

    .footer-content {
        margin: auto;
        width: 60%;
        height: 300px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

    }

    a,img,
    button:hover {
        cursor: pointer;
    }
    label img{
        width:40px;
        display:none;
    }  
    .title:hover{
        text-decoration: underline;
    }
    .btn-sg button a:hover{
        color: #ffffff;
        }
        .btn-sg button:hover{
        background-color: #404040;

    }
    button a{
        font-weight: 500;
    }