/* Mobile view CSS is default */

html {
    box-sizing: border-box;
    scroll-behavior: smooth;
}

body {
    padding: 0;
    margin: 0;
    overflow-x: hidden;
    background-color: #000;
}

/* Mobile Header */

.m-header {
    box-sizing: border-box;
    width: 100%;
    height: 3.5rem;
    background-color: #000;
    border-bottom: 1px solid #707070;
    position: sticky;
    top: 0px;
    z-index: 3;
    display: block;
}

.m-mid-container {
    box-sizing: border-box;
    width: 100%;
    padding: 0.8rem 1.8rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

.m-logo-holder {
    width: 14%;
    display: flex;
    justify-content: flex-start;
}

.m-logo {
    height: 24px;
    width: max-content;
}

.m-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.m-burger-holder {
    width: 20%;
    display: flex;
    justify-content: end;
}

#nav-icon1 {
    width: 30px;
    height: 30px;
    position: relative;
    margin: 5px 0 0; 
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .5s ease-in-out;
    -moz-transition: .5s ease-in-out;
    -o-transition: .5s ease-in-out;
    transition: .5s ease-in-out;
    cursor: pointer;
}

#nav-icon1 span {
    display: block;
    position: absolute;
    height: 4px;
    width: 100%;
    background: #ccc;
    border-radius: 9px;
    opacity: 1;
    left: 0;
    -webkit-transform: rotate(0deg);
    -moz-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transition: .25s ease-in-out;
    -moz-transition: .25s ease-in-out;
    -o-transition: .25s ease-in-out;
    transition: .25s ease-in-out;
}

#nav-icon1 span:nth-child(1) {
    top: 0px;
}
  
#nav-icon1 span:nth-child(2) {
    top: 10px;
}
  
#nav-icon1 span:nth-child(3) {
    top: 20px;
}

#nav-icon1.open span:nth-child(1) {
    /* top: 18px; */
    top: 12px;
    -webkit-transform: rotate(135deg);
    -moz-transform: rotate(135deg);
    -o-transform: rotate(135deg);
    transform: rotate(135deg);
}
  
#nav-icon1.open span:nth-child(2) {
    opacity: 0;
    /* left: -40px; */
}
  
#nav-icon1.open span:nth-child(3) {
    top: 12px;
    -webkit-transform: rotate(-135deg);
    -moz-transform: rotate(-135deg);
    -o-transform: rotate(-135deg);
    transform: rotate(-135deg);
}

.m-nav-holder {
    width: 100%;
    height: auto;
    background-color: #000;
    position: absolute;
    top: 3.5rem;
    z-index: 3;
    opacity: 0;
    transform: scaleY(0);
    transform-origin: top;
    transition: .25s ease-in-out;
}

.dropdown {
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.7);
    position: absolute;
    top: 3.5rem;
    z-index: 3;
    opacity: 1;
    transform: scaleY(1);
    transform-origin: top;
    transition: .25s ease-in-out;
}

.m-nav-main {
    display: flex;
    flex-direction: column;
}

.m-nav-main a:visited, .m-nav-main a:link {
    padding: 25px 13px 24px 13px;
    color: #707070;
    border-bottom: 1px solid #999;
    background-color: #000;
    text-decoration: none;
    font-size: 1.2rem;
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    text-transform: uppercase;
}

.m-nav-main a span {
    height: 100%;
    width: auto;
    transition: color .3s;
}


/* Header */

.header {
    box-sizing: border-box;
    width: 100%;
    height: 4.75rem;
    background-color: #000;
    padding: 23px 110px;
    border-bottom: 1px solid #707070;
    position: sticky;
    top: 0px;
    z-index: 3;
    display: none;
}

.mid-container {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

/* Logo */

.logo-holder {
    width: 20%;
}

.logo-holder .logo {
    height: 30px;
    width: max-content;
}

.logo-holder .logo img {
    width: 100%;
    height: 100%;
}

/* Main Navigation */

.nav-main-holder {
    width: 60%;
}

.nav-main {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.nav-main a:visited, .nav-main a:link {
    color: #707070;
    text-decoration: none;
    font-size: 1.31rem;
    font-family: "Montserrat", sans-serif;
    font-weight: 600;
    text-transform: uppercase;
}

.nav-main a span {
    height: 100%;
    width: auto;
    padding: 25px 13px 24px 13px;
    margin: 0 13px 0 13px;
    transition: color .3s;
}

.nav-main a span:hover {
    color: #fff;
}

a .active {
    color: #fff;
    border-bottom: 1px solid #fff;
}


/* Squad 51 and Logout */

.nav-end-holder {
    width: 20%;
}

.nav-end {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: end;
}

.nav-end .squad51 {
    height: 20px;
    width: max-content;
}

.squad51 img {
    width: 100%;
    height: 100%;
}

.nav-end .logout {
    height: 29px;
    width: max-content;
    margin-left: 40px;
}

.logout img {
    width: 100%;
    height: 100%;
}

/* Main Section */

.main-container {
    width: 100%;
    height: auto;
    font-family: "Montserrat", sans-serif;
    font-size: 16px;
    font-weight: 300;
    color: #fff;
}

.map-img {
    display: none;
}

.m-map-img {
    width: 100%;
    height: auto;
}

.m-map-img a img {
    width: 100%;
    height: auto;
    object-fit: contain;
}

/* Title Contact Section  */

.title-container {
    width: 100%;
    height: auto;
    background-color: #222;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.title-container-content {
    width: 80%;
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 16px auto;
}

.title-holder {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.title-holder .title {
    font-size: 36px;
    font-weight: 750;
}

.description {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 8px auto 0;
}

/* Images Section */

.images-container {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 40px auto;
}

.images-holder {
    width: 90%;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
}

.images-holder div {
    margin: 0 0 16px 0;
}

.images-holder div img {
    width: 100%;
    height: max-content;
}

.images-holder .image-left, .image-mid, .image-right {
    width: 90%;
    height: auto;
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
}

.images-holder .image-left img {
    width: 100%;
    height: auto;
    object-fit: contain;
    vertical-align: middle;
}

.images-holder .image-mid img {
    width: 100%;
    height: auto;
    object-fit: contain;
    vertical-align: middle;num
}

.images-holder .image-right img {
    width: 100%;
    height: auto;
    object-fit: contain;
    vertical-align: middle;
}

/* Content Section */

.content {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.contact-info-holder {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #222;
    padding: 20px 0;
}

.contact-box-holder {
    width: 90%;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
}

.contact-box-holder .contact-address, .contact-number, .contact-email {
    width: 90%;
    height: auto;
    margin: 0 0 20px 0;
}

.contact-address .address-title {
    font-size: 24px;
    font-weight: 600;
}

.contact-address .line {
    width: 100%;
    height: 3px;
    background-color: #fff;
    margin: 8px 0 16px;
    border-radius: 2px;
}

.contact-address .address-info {
    font-family: "Hind", sans-serif;
    line-height: 120%;
    font-weight: 400;
}

.contact-address .address-info .gold {
    color: #ffcc00;
}

.contact-number .number-title {
    font-size: 24px;
    font-weight: 600;
}

.contact-number .line {
    width: 100%;
    height: 3px;
    background-color: #fff;
    margin: 8px 0 16px;
    border-radius: 2px;
}

.contact-number .number-info {
    font-family: "Hind", sans-serif;
    line-height: 120%;
    font-weight: 400;
}

.contact-number .number-info div {
    text-decoration: none;
    color: #eee;
}

.contact-email .email-title {
    font-size: 24px;
    font-weight: 600;
}

.contact-email .line {
    width: 100%;
    height: 3px;
    background-color: #fff;
    margin: 8px 0 16px;
    border-radius: 2px;
}

.contact-email .email-info {
    font-family: "Hind", sans-serif;
    line-height: 120%;
    font-weight: 400;
}

.visit-container {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 36px auto 50px;
}

.visit-title {
    font-size: 32px;
    font-weight: 600;
    margin-bottom: 20px;
}

.visit-box-holder {
    width: 90%;
    height: auto;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
}

.visit-box-holder .visit-desc, .visit-map {
    width: 48%;
    height: 140px;
    border-radius: 16px;
    box-sizing: border-box;
    padding: 0 10px;
}

.visit-desc :nth-child(1) {
    font-weight: 600;
    margin-bottom: 12px;
}

.visit-desc :nth-child(2) {
    font-family: "Hind", sans-serif;
    line-height: 120%;
}

.visit-desc :nth-child(3) {
    font-weight: 600;
    margin-top: 16px;
    margin-bottom: 12px;
}

.visit-desc :nth-child(4) {
    font-family: "Hind", sans-serif;
    line-height: 120%;
}

.visit-map .map-desc {
    font-weight: 600;
    margin-bottom: 12px;
}

.visit-map .map-button {
    width: max-content;
    color: #222;
    font-size: 16px;
    font-weight: 600;
    background-color: #ffcc00;
    padding: 12px;
    border-radius: 35px;
    transition: box-shadow .4s;
}

.visit-map .map-button:hover {
    box-shadow: 0px 0px 32px 8px rgba(255, 204, 0, 0.3);
}

.visit-map a {
    text-decoration: none;
}

.visit-map a:visited {
    text-decoration: none;
}

.cs-container {
    width: 100%;
    height: auto;
    /* background-color: #999; */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 80px auto;
}

.cs-title {
    font-size: 30px;
    font-weight: 600;
    margin-bottom: 20px;
}

.cs-box-holder {
    width: 90%;
    height: auto;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
}

.cs-box-holder .cs-desc, .cs-ticket {
    width: 48%;
    height: 84px;
    /* background-color: #444; */
    border-radius: 16px;
    box-sizing: border-box;
    padding: 0 16px;
}

.cs-desc :nth-child(1) {
    font-weight: 600;
    margin-bottom: 12px;
}

.cs-desc :nth-child(2) {
    font-family: "Hind", sans-serif;
    line-height: 120%;
}

.cs-ticket .ticket-desc {
    font-weight: 600;
    margin-bottom: 12px;
}

.cs-ticket .ticket-button {
    width: max-content;
    color: #222;
    font-size: 16px;
    font-weight: 600;
    background-color: #ffcc00;
    padding: 12px;
    border-radius: 35px;
    transition: box-shadow .4s;
}

.cs-ticket .ticket-button:hover {
    box-shadow: 0px 0px 32px 8px rgba(255, 204, 0, 0.3);
}

.cs-ticket a {
    text-decoration: none;
}

.cs-ticket a:visited {
    text-decoration: none;
}

.touch-container {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin: 80px auto;
}

.touch-title {
    font-size: 26px;
    font-weight: 600;
    margin-bottom: 20px;
}

.touch-box-holder {
    width: 90%;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
}

.touch-box-holder .touch-form {
    width: 100%;
    height: 84px;
    background-color: #444;
    border-radius: 16px;
    box-sizing: border-box;
    padding: 0 16px;
}

.touch-box-holder .touch-submit {
    width: 100%;
    height: 84px;
    border-radius: 16px;
    box-sizing: border-box;
    padding: 0 16px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.touch-submit .touch-desc {
    font-weight: 600;
}

.touch-submit .submit-button {
    width: max-content;
    color: #222;
    font-size: 16px;
    font-weight: 600;
    background-color: #ffcc00;
    padding: 12px;
    border-radius: 35px;
    transition: box-shadow .4s;
}

.touch-submit .submit-button:hover {
    box-shadow: 0px 0px 32px 8px rgba(255, 204, 0, 0.3);
}

.touch-submit a {
    text-decoration: none;
}

.touch-submit a:visited {
    text-decoration: none;
}

.sm-container {
    width: 100%;
    height: auto;
    background-color: #222;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.sm-box-holder {
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #222;
    padding: 20px 0;
}

.sm-title {
    font-size: 26px;
    font-weight: 600;
    margin-bottom: 20px;
}

.icons-holder {
    width: 90%;
    height: auto;
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
    align-items: center;
}

.icons-holder div {
    width: 12%;
    height: auto;
    overflow: hidden;
    /* filter: grayscale(80%); */
    transition: transform .3s, filter .3s;
}

.icons-holder div:hover {
    transform: scale(1.1);
    filter: grayscale(0%);
}

.icons-holder .fb img {
    width: 100%;
    height: auto;
    object-fit: contain;
    vertical-align: middle;
}

.icons-holder .ig img {
    width: 100%;
    height: auto;
    object-fit: contain;
    vertical-align: middle;
}

.icons-holder .tt img {
    width: 100%;
    height: auto;
    object-fit: contain;
    vertical-align: middle;
}

.icons-holder .yt img {
    width: 100%;
    height: auto;
    object-fit: contain;
    vertical-align: middle;
}

.icons-holder .dc img {
    width: 100%;
    height: auto;
    object-fit: contain;
    vertical-align: middle;
}



/* Footer Section */

.back-to-top {
    font-size: 17px;
    font-weight: 400;
    font-family: "Montserrat", sans-serif;
    text-align: center;
    padding: 0 0 40px 0;
    margin-top: 36px;
}

.back-to-top a:link,
.back-to-top a:visited {
text-decoration: none;
color: #999999;
transition: color .3s;
}

.back-to-top a:hover {
    color: #fff;
}

.semi-footer {
    box-sizing: border-box;
    width: 90%;
    height: auto;
    margin: 30px auto 0;
    border-top: 1px solid #222222 ;
    font-family: "Montserrat", sans-serif;
}

.semi-footer .info-section {
    width: 100%;
    height: auto;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    background-color: #000;
}

.info-section .info {
    width: 50%;
    height: 238px;
    display: flex;
    flex-direction: column;
    font-size: 14px;
    font-family: "Montserrat", sans-serif;
    text-align: center;
}

.info-section .info .title {
    color: #fff;
    font-weight: 600;
    margin-bottom: 20px;
    text-transform: uppercase;
}

.info-section .info .list {
    color: #999;
    font-weight: 300;
    margin-bottom: 10px;
}

.info-section .info .list:hover { 
    color: #eeeeee;
}

.info-section .info .list a {
    color: #999;
    text-decoration: none;
}

.info-section .info .list a:hover {
    color: #eeeeee;
}

.info-section .info .address {
    width: 100%;
    line-height: 27px;
}

.footer {
    box-sizing: border-box;
    width: 100%;
    height: 55px;
    background-color: #222222;
    border-top: 1px solid #707070;
    font-size: 14px;
    font-weight: 400;
    font-family: "Montserrat", sans-serif;
    color: #fff;
    display: flex;
    flex-direction: row;
    align-items: center;
    text-align: center;
    margin-top: 30px;
}

.footer .footer-none {
    width: 0%;
}

.footer .footer-mid {
    width: 75%;
}

.footer .footer-mid span {
    color: #ffcc00;
}

.footer .footer-country {
    width: 25%;
}


@media only screen and (min-width: 700px) {
    .m-header {
        display: none;
    }

    .header {
        box-sizing: border-box;
        width: 100%;
        height: 4rem;
        background-color: #000;
        padding: 23px 110px;
        border-bottom: 1px solid #707070;
        position: sticky;
        top: 0px;
        z-index: 3;
        display: block;
    }

    .mid-container {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    /* Logo */

    .logo-holder {
        width: 20%;
    }

    .logo-holder .logo {
        height: 21px;
        width: max-content;
    }

    .nav-main a:link {
        font-size: 1rem;
    }

    .nav-main a span {
        box-sizing: border-box;
        height: 100%;
        width: auto;
        padding: 25px 13px 20px 13px;
        margin: 0 13px 0 13px;
        transition: color .3s;
    }

    .nav-end .squad51 {
        height: 14px;
    }

    /* body section */
    
    .main-container {
        width: 100%;
        height: auto;
        font-family: "Montserrat", sans-serif;
        font-size: 16px;
        font-weight: 300;
        color: #fff;
    }

    .map-holder {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: row;
        justify-content: center;
    }

    .map-img {
        width: max-content;
        height: auto;
        overflow: hidden;
        display: block;
    }

    .map-img img {
        width: 100%;
        height: max-content;
        object-fit: contain;
        transition: transform .8s;
    }

    .map-img img:hover {
        transform: scale(1.07);
    }

    .m-map-img {
        display: none;
    }

    .title-container {
        width: 100%;
        height: auto;
        background-color: #222;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .title-container-content {
        width: 40%;
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 16px auto;
    }

    .title-holder {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: row;
        justify-content: center;
    }

    .title-holder .title {
        font-size: 56px;
        font-weight: 750;
    }

    .description {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin: 8px auto 0;
    }

    .images-container {
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin: 40px auto;
    }

    .images-holder {
        width: 72%;
        height: auto;
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        align-items: center;
    }

    .images-holder .image-left, .image-mid, .image-right {
        width: 30%;
        height: max-content;
        background-color: #fff;
        border-radius: 8px;
        overflow: hidden;
    }

    .images-holder .image-left img {
        width: 100%;
        height: max-content;
        object-fit: cover;
        vertical-align: middle;
    }

    .images-holder .image-mid img {
        width: 100%;
        height: auto;
        object-fit: contain;
        vertical-align: middle;
    }

    .images-holder .image-right img {
        width: 100%;
        height: auto;
        object-fit: cover;
        vertical-align: middle;
    }

    .description span {
        font-family: "Hind", sans-serif;
        line-height: 120%;
        text-align: center;
    }

    .content {
        width: 100%;
        height: auto;
        /* background-color: #222; */
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .contact-info-holder {
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-color: #222;
        padding: 20px 0;
    }

    /* .contact-info {
        font-size: 40px;
        font-weight: 600;
        margin-bottom: 20px;
    } */

    .contact-box-holder {
        width: 72%;
        height: auto;
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        align-items: center;
    }

    .contact-box-holder .contact-address, .contact-number, .contact-email {
        width: 30%;
        height: auto;
        /* background-color: #444; */
        /* border-radius: 16px; */
        /* box-sizing: border-box;
        padding: 28px; */
    }

    .contact-address .address-title {
        font-size: 24px;
        font-weight: 600;
    }

    .contact-address .line {
        width: 100%;
        height: 3px;
        background-color: #fff;
        margin: 8px 0 16px;
        border-radius: 2px;
    }

    .contact-address .address-info {
        font-family: "Hind", sans-serif;
        line-height: 120%;
        font-weight: 400;
    }

    .contact-address .address-info .gold {
        color: #ffcc00;
    }

    .contact-number .number-title {
        font-size: 24px;
        font-weight: 600;
    }

    .contact-number .line {
        width: 100%;
        height: 3px;
        background-color: #fff;
        margin: 8px 0 16px;
        border-radius: 2px;
    }

    .contact-number .number-info {
        font-family: "Hind", sans-serif;
        line-height: 120%;
        font-weight: 400;
    }

    .contact-email .email-title {
        font-size: 24px;
        font-weight: 600;
    }

    .contact-email .line {
        width: 100%;
        height: 3px;
        background-color: #fff;
        margin: 8px 0 16px;
        border-radius: 2px;
    }

    .contact-email .email-info {
        font-family: "Hind", sans-serif;
        line-height: 120%;
        font-weight: 400;
    }

    .visit-container {
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin: 80px auto;
    }

    .visit-title {
        font-size: 36px;
        font-weight: 600;
        margin-bottom: 20px;
    }

    .visit-box-holder {
        width: 72%;
        height: auto;
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        align-items: center;
    }

    .visit-box-holder .visit-desc, .visit-map {
        width: 48%;
        height: 140px;
        border-radius: 16px;
        box-sizing: border-box;
        padding: 0 16px;
    }

    .visit-desc :nth-child(1) {
        font-weight: 600;
        margin-bottom: 12px;
    }

    .visit-desc :nth-child(2) {
        font-family: "Hind", sans-serif;
        line-height: 120%;
    }

    .visit-desc :nth-child(3) {
        font-weight: 600;
        margin-top: 16px;
        margin-bottom: 12px;
    }

    .visit-desc :nth-child(4) {
        font-family: "Hind", sans-serif;
        line-height: 120%;
    }

    .visit-map .map-desc {
        font-weight: 600;
        margin-bottom: 12px;
    }

    .visit-map .map-button {
        width: max-content;
        color: #222;
        font-size: 16px;
        font-weight: 600;
        background-color: #ffcc00;
        padding: 12px;
        border-radius: 35px;
        transition: box-shadow .4s;
    }

    .visit-map .map-button:hover {
        box-shadow: 0px 0px 32px 8px rgba(255, 204, 0, 0.3);
    }

    .visit-map a {
        text-decoration: none;
    }

    .visit-map a:visited {
        text-decoration: none;
    }

    .cs-container {
        width: 100%;
        height: auto;
        /* background-color: #999; */
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin: 80px auto;
    }

    .cs-title {
        font-size: 36px;
        font-weight: 600;
        margin-bottom: 20px;
    }

    .cs-box-holder {
        width: 72%;
        height: auto;
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        align-items: center;
    }

    .cs-box-holder .cs-desc, .cs-ticket {
        width: 48%;
        height: 84px;
        /* background-color: #444; */
        border-radius: 16px;
        box-sizing: border-box;
        padding: 0 16px;
    }

    .cs-desc :nth-child(1) {
        font-weight: 600;
        margin-bottom: 12px;
    }

    .cs-desc :nth-child(2) {
        font-family: "Hind", sans-serif;
        line-height: 120%;
    }

    /* .cs-box-holder .mid-line {
        width: 3px;
        height: 100px;
        background-color: #fff;
        border-radius: 2px;
    } */

    .cs-ticket .ticket-desc {
        font-weight: 600;
        margin-bottom: 12px;
    }

    .cs-ticket .ticket-button {
        width: max-content;
        color: #222;
        font-size: 16px;
        font-weight: 600;
        background-color: #ffcc00;
        padding: 12px;
        border-radius: 35px;
        transition: box-shadow .4s;
    }

    .cs-ticket .ticket-button:hover {
        box-shadow: 0px 0px 32px 8px rgba(255, 204, 0, 0.3);
    }

    .cs-ticket a {
        text-decoration: none;
    }

    .cs-ticket a:visited {
        text-decoration: none;
    }

    .touch-container {
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin: 80px auto;
    }

    .touch-title {
        font-size: 36px;
        font-weight: 600;
        margin-bottom: 20px;
    }

    .touch-box-holder {
        width: 72%;
        height: auto;
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        align-items: center;
    }

    .touch-box-holder .touch-form {
        width: 48%;
        height: 84px;
        background-color: #444;
        border-radius: 16px;
        box-sizing: border-box;
        padding: 0 16px;
    }
    
    .touch-box-holder .touch-submit {
        width: 48%;
        height: 84px;
        border-radius: 16px;
        box-sizing: border-box;
        padding: 0 16px;
    }

    .touch-submit .touch-desc {
        font-weight: 600;
        margin-bottom: 12px;
    }

    .touch-submit .submit-button {
        width: max-content;
        color: #222;
        font-size: 16px;
        font-weight: 600;
        background-color: #ffcc00;
        padding: 12px;
        border-radius: 35px;
        transition: box-shadow .4s;
    }

    .touch-submit .submit-button:hover {
        box-shadow: 0px 0px 32px 8px rgba(255, 204, 0, 0.3);
    }

    .touch-submit a {
        text-decoration: none;
    }

    .touch-submit a:visited {
        text-decoration: none;
    }

    .sm-container {
        width: 100%;
        height: auto;
        background-color: #222;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .sm-box-holder {
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-color: #222;
        padding: 20px 0;
    }

    .sm-title {
        font-size: 36px;
        font-weight: 600;
        margin-bottom: 20px;
    }

    .icons-holder {
        width: 28%;
        height: auto;
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        align-items: center;
        /* background-color: #999; */
    }

    .icons-holder div {
        width: 12%;
        height: max-content;
        /* background-color: #ffcc00; */
        overflow: hidden;
        filter: grayscale(80%);
        transition: transform .3s, filter .3s;
        /* transition: ; */
    }

    .icons-holder div:hover {
        transform: scale(1.1);
        filter: grayscale(0%);
    }

    .icons-holder .fb img {
        width: 100%;
        height: max-content;
        object-fit: cover;
        vertical-align: middle;
    }

    .icons-holder .ig img {
        width: 100%;
        height: max-content;
        object-fit: cover;
        vertical-align: middle;
    }

    .icons-holder .tt img {
        width: 100%;
        height: max-content;
        object-fit: cover;
        vertical-align: middle;
    }

    .icons-holder .yt img {
        width: 100%;
        height: max-content;
        object-fit: cover;
        vertical-align: middle;
    }

    .icons-holder .dc img {
        width: 100%;
        height: max-content;
        object-fit: cover;
        vertical-align: middle;
    }

    /* Footer Section */

    .back-to-top {
        font-size: 14px;
    }

    .semi-footer {
        width: 1120px;
        height: 265px;
    }

    .semi-footer .info-section {
        width: 1040px;
        height: 100%;
    }

    .info-section .info {
        width: 20%;
        height: 238px;
        display: flex;
        flex-direction: column;
        font-size: 16px;
        font-family: "Montserrat", sans-serif;
        text-align: unset;
    }

    .info-section .info .list a {
        color: #999;
        text-decoration: none;
    }

    .info-section .info .list a:hover {
        color: #eeeeee;
    }

    .info-section .info .address {
        width: 180%;
        line-height: 27px;
    }

    .footer {
        height: 45px;
        font-size: 14px;
    }

    .footer .footer-none {
        width: 10%;
    }

    .footer .footer-mid {
        width: 80%;
    }

    .footer .footer-country {
        width: 10%;
    }
}


@media only screen and (min-width: 1920px) {
    /* Header */
    .m-header {
        display: none;
    }

    .header {
        box-sizing: border-box;
        width: 100%;
        height: 4.75rem;
        background-color: #000;
        padding: 23px 110px;
        border-bottom: 1px solid #707070;
        position: sticky;
        top: 0px;
        z-index: 3;
    }

    .mid-container {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }

    /* Logo */

    .logo-holder {
        width: 20%;
    }

    .logo-holder .logo {
        height: 30px;
        width: max-content;
    }

    .logo-holder .logo img {
        width: 100%;
        height: 100%;
    }

    /* Main Navigation */

    .nav-main-holder {
        width: 60%;
    }

    .nav-main {
        display: flex;
        flex-direction: row;
        justify-content: center;
    }

    .nav-main a:visited, .nav-main a:link {
        color: #707070;
        text-decoration: none;
        font-size: 1.31rem;
        font-family: "Montserrat", sans-serif;
        font-weight: 600;
        text-transform: uppercase;
    }

    .nav-main a span {
        height: 100%;
        width: auto;
        padding: 25px 13px 24px 13px;
        margin: 0 13px 0 13px;
        transition: color .3s;
    }

    .nav-main a span:hover {
        color: #fff;
    }

    a .active {
        color: #fff;
        border-bottom: 1px solid #fff;
    }


    /* Squad 51 and Logout */

    .nav-end-holder {
        width: 20%;
    }

    .nav-end {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: end;
    }

    .nav-end .squad51 {
        height: 20px;
        width: max-content;
    }

    .squad51 img {
        width: 100%;
        height: 100%;
    }

    .nav-end .logout {
        height: 29px;
        width: max-content;
        margin-left: 40px;
    }

    .logout img {
        width: 100%;
        height: 100%;
    }

    /* body section */

    .main-container {
        width: 100%;
        height: auto;
        font-family: "Montserrat", sans-serif;
        font-size: 20px;
        font-weight: 300;
        color: #fff;
    }

    .map-holder {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: row;
        justify-content: center;
    }

    .map-img {
        width: max-content;
        height: auto;
        overflow: hidden;
        display: block;
    }

    .map-img img {
        width: 100%;
        height: max-content;
        object-fit: contain;
        transition: transform .8s;
    }

    .map-img img:hover {
        transform: scale(1.07);
    }

    .m-map-img {
        display: none;
    }

    .title-container {
        width: 100%;
        height: auto;
        background-color: #222;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .title-container-content {
        width: 40%;
        height: auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 16px auto;
    }

    .title-holder {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: row;
        justify-content: center;
    }

    .title-holder .title {
        font-size: 70px;
        font-weight: 750;
    }

    .description {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin: 8px auto 0;
    }

    .images-container {
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin: 40px auto;
    }

    .images-holder {
        width: 72%;
        height: auto;
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        align-items: center;
    }

    .images-holder .image-left, .image-mid, .image-right {
        width: 30%;
        height: max-content;
        background-color: #fff;
        border-radius: 8px;
        overflow: hidden;
    }

    .images-holder .image-left img {
        width: 100%;
        height: max-content;
        object-fit: cover;
        vertical-align: middle;
    }

    .images-holder .image-mid img {
        width: 100%;
        height: auto;
        object-fit: contain;
        vertical-align: middle;
    }

    .images-holder .image-right img {
        width: 100%;
        height: auto;
        object-fit: cover;
        vertical-align: middle;
    }

    .description span {
        font-family: "Hind", sans-serif;
        line-height: 120%;
        text-align: center;
    }

    .content {
        width: 100%;
        height: auto;
        /* background-color: #222; */
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .contact-info-holder {
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-color: #222;
        padding: 20px 0;
    }

    /* .contact-info {
        font-size: 40px;
        font-weight: 600;
        margin-bottom: 20px;
    } */

    .contact-box-holder {
        width: 72%;
        height: auto;
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        align-items: center;
    }

    .contact-box-holder .contact-address, .contact-number, .contact-email {
        width: 30%;
        height: auto;
        /* background-color: #444; */
        /* border-radius: 16px; */
        /* box-sizing: border-box;
        padding: 28px; */
    }

    .contact-address .address-title {
        font-size: 24px;
        font-weight: 600;
    }

    .contact-address .line {
        width: 100%;
        height: 3px;
        background-color: #fff;
        margin: 8px 0 16px;
        border-radius: 2px;
    }

    .contact-address .address-info {
        font-family: "Hind", sans-serif;
        line-height: 120%;
        font-weight: 400;
    }

    .contact-address .address-info .gold {
        color: #ffcc00;
    }

    .contact-number .number-title {
        font-size: 24px;
        font-weight: 600;
    }

    .contact-number .line {
        width: 100%;
        height: 3px;
        background-color: #fff;
        margin: 8px 0 16px;
        border-radius: 2px;
    }

    .contact-number .number-info {
        font-family: "Hind", sans-serif;
        line-height: 120%;
        font-weight: 400;
    }

    .contact-email .email-title {
        font-size: 24px;
        font-weight: 600;
    }

    .contact-email .line {
        width: 100%;
        height: 3px;
        background-color: #fff;
        margin: 8px 0 16px;
        border-radius: 2px;
    }

    .contact-email .email-info {
        font-family: "Hind", sans-serif;
        line-height: 120%;
        font-weight: 400;
    }

    .visit-container {
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin: 80px auto;
    }

    .visit-title {
        font-size: 36px;
        font-weight: 600;
        margin-bottom: 20px;
    }

    .visit-box-holder {
        width: 72%;
        height: auto;
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        align-items: center;
    }

    .visit-box-holder .visit-desc, .visit-map {
        width: 48%;
        height: 140px;
        border-radius: 16px;
        box-sizing: border-box;
        padding: 0 16px;
    }

    .visit-desc :nth-child(1) {
        font-weight: 600;
        margin-bottom: 12px;
    }

    .visit-desc :nth-child(2) {
        font-family: "Hind", sans-serif;
        line-height: 120%;
    }

    .visit-desc :nth-child(3) {
        font-weight: 600;
        margin-top: 16px;
        margin-bottom: 12px;
    }

    .visit-desc :nth-child(4) {
        font-family: "Hind", sans-serif;
        line-height: 120%;
    }

    .visit-map .map-desc {
        font-weight: 600;
        margin-bottom: 12px;
    }

    .visit-map .map-button {
        width: max-content;
        color: #222;
        font-size: 16px;
        font-weight: 600;
        background-color: #ffcc00;
        padding: 12px;
        border-radius: 35px;
        transition: box-shadow .4s;
    }

    .visit-map .map-button:hover {
        box-shadow: 0px 0px 32px 8px rgba(255, 204, 0, 0.3);
    }

    .visit-map a {
        text-decoration: none;
    }

    .visit-map a:visited {
        text-decoration: none;
    }

    .cs-container {
        width: 100%;
        height: auto;
        /* background-color: #999; */
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin: 80px auto;
    }

    .cs-title {
        font-size: 36px;
        font-weight: 600;
        margin-bottom: 20px;
    }

    .cs-box-holder {
        width: 72%;
        height: auto;
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        align-items: center;
    }

    .cs-box-holder .cs-desc, .cs-ticket {
        width: 48%;
        height: 84px;
        /* background-color: #444; */
        border-radius: 16px;
        box-sizing: border-box;
        padding: 0 16px;
    }

    .cs-desc :nth-child(1) {
        font-weight: 600;
        margin-bottom: 12px;
    }

    .cs-desc :nth-child(2) {
        font-family: "Hind", sans-serif;
        line-height: 120%;
    }

    /* .cs-box-holder .mid-line {
        width: 3px;
        height: 100px;
        background-color: #fff;
        border-radius: 2px;
    } */

    .cs-ticket .ticket-desc {
        font-weight: 600;
        margin-bottom: 12px;
    }

    .cs-ticket .ticket-button {
        width: max-content;
        color: #222;
        font-size: 16px;
        font-weight: 600;
        background-color: #ffcc00;
        padding: 12px;
        border-radius: 35px;
        transition: box-shadow .4s;
    }

    .cs-ticket .ticket-button:hover {
        box-shadow: 0px 0px 32px 8px rgba(255, 204, 0, 0.3);
    }

    .cs-ticket a {
        text-decoration: none;
    }

    .cs-ticket a:visited {
        text-decoration: none;
    }

    .touch-container {
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin: 80px auto;
    }

    .touch-title {
        font-size: 36px;
        font-weight: 600;
        margin-bottom: 20px;
    }

    .touch-box-holder {
        width: 72%;
        height: auto;
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        align-items: center;
    }

    .touch-box-holder .touch-form {
        width: 48%;
        height: 84px;
        background-color: #444;
        border-radius: 16px;
        box-sizing: border-box;
        padding: 0 16px;
    }
    
    .touch-box-holder .touch-submit {
        width: 48%;
        height: 84px;
        border-radius: 16px;
        box-sizing: border-box;
        padding: 0 16px;
    }

    .touch-submit .touch-desc {
        font-weight: 600;
        margin-bottom: 12px;
    }

    .touch-submit .submit-button {
        width: max-content;
        color: #222;
        font-size: 16px;
        font-weight: 600;
        background-color: #ffcc00;
        padding: 12px;
        border-radius: 35px;
        transition: box-shadow .4s;
    }

    .touch-submit .submit-button:hover {
        box-shadow: 0px 0px 32px 8px rgba(255, 204, 0, 0.3);
    }

    .touch-submit a {
        text-decoration: none;
    }

    .touch-submit a:visited {
        text-decoration: none;
    }

    .sm-container {
        width: 100%;
        height: auto;
        background-color: #222;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .sm-box-holder {
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background-color: #222;
        padding: 20px 0;
    }

    .sm-title {
        font-size: 36px;
        font-weight: 600;
        margin-bottom: 20px;
    }

    .icons-holder {
        width: 28%;
        height: auto;
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
        align-items: center;
        /* background-color: #999; */
    }

    .icons-holder div {
        width: 12%;
        height: max-content;
        /* background-color: #ffcc00; */
        overflow: hidden;
        filter: grayscale(80%);
        transition: transform .3s, filter .3s;
        /* transition: ; */
    }

    .icons-holder div:hover {
        transform: scale(1.1);
        filter: grayscale(0%);
    }

    .icons-holder .fb img {
        width: 100%;
        height: max-content;
        object-fit: cover;
        vertical-align: middle;
    }

    .icons-holder .ig img {
        width: 100%;
        height: max-content;
        object-fit: cover;
        vertical-align: middle;
    }

    .icons-holder .tt img {
        width: 100%;
        height: max-content;
        object-fit: cover;
        vertical-align: middle;
    }

    .icons-holder .yt img {
        width: 100%;
        height: max-content;
        object-fit: cover;
        vertical-align: middle;
    }

    .icons-holder .dc img {
        width: 100%;
        height: max-content;
        object-fit: cover;
        vertical-align: middle;
    }

    /* Footer Section */

    .back-to-top {
        font-size: 17px;
        font-weight: 400;
        font-family: "Montserrat", sans-serif;
        text-align: center;
        padding: 0 0 40px 0;
        margin-top: 40px;
    }

    .back-to-top a:link,
    .back-to-top a:visited {
    text-decoration: none;
    color: #999999;
    transition: color .3s;
    }

    .back-to-top a:hover {
        color: #fff;
    }

    .semi-footer {
        box-sizing: border-box;
        width: 1400px;
        height: 265px;
        margin: 0 auto;
        border-top: 1px solid #222222 ;
        font-family: "Montserrat", sans-serif;
        background-position-y: 20%;
    }

    .semi-footer .info-section {
        width: 1300px;
        height: 100%;
        margin: 0 auto;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        background-color: #000;
    }

    .info-section .info {
        width: 20%;
        height: 238px;
        display: flex;
        flex-direction: column;
        font-size: 20px;
        font-family: "Montserrat", sans-serif;
        text-align: unset;
    }

    .info-section .info .title {
        color: #fff;
        font-weight: 600;
        margin-bottom: 20px;
        text-transform: uppercase;
    }

    .info-section .info .list {
        color: #999;
        font-weight: 300;
        margin-bottom: 10px;
    }

    .info-section .info .list:hover { 
        color: #eeeeee;
    }

    .info-section .info .list a {
        color: #999;
        text-decoration: none;
    }

    .info-section .info .list a:hover {
        color: #eeeeee;
    }

    .info-section .info .address {
        width: 180%;
        line-height: 27px;
    }

    .footer {
        box-sizing: border-box;
        width: 100%;
        height: 55px;
        background-color: #222222;
        border-top: 1px solid #707070;
        font-size: 18px;
        font-weight: 400;
        font-family: "Montserrat", sans-serif;
        color: #fff;
        display: flex;
        flex-direction: row;
        align-items: center;
        text-align: center;
    }

    .footer .footer-none {
        width: 10%;
    }

    .footer .footer-mid {
        width: 80%;
    }

    .footer .footer-mid span {
        color: #ffcc00;
    }

    .footer .footer-country {
        width: 10%;
    }
}