/* Responsive CSS */
@media screen and (max-width: 820px) {

.awardsTitle {
    font-size: 10px;
    padding-left: 5px;
}

.awardsText {
    font-size: 8px;
    margin:5px;
}

.icbannercontentmaindiv {
    margin-top: 35px;
    height: 90px !important;
    margin-bottom: -35px;
}

.mobile-bannersquare {
    height:50px !important;
}

.bannerTextContent .number-background {
    font-size: 9.5rem;
    /* ~200px */
    color: rgba(0, 0, 0, 0.05);
    position: absolute;
    font-family: 'KodeMono';
    font-weight: bold;
    left: 20%;
    top:20%;
    transform: translateX(-50%);
    z-index: -1;
    line-height: 0px;
}

    .raceCardVideo {
        height: 100px !important;
        width:"100%";
        object-fit:"cover";
      }
    
      .raceCardImg {
        height: 100px !important;
        width:100%;
        object-fit:cover;
      }
    
      .raceCardText {
        height: 60px !important;
      }

    .mobil-padding-zero {
        padding: 15px !important;
    }

    .competition_padding_mobile {
        padding: 10px !important;
    }

    .mobile-hide {
        display: none !important;
    }
    .bannerTextDetail {
        margin-bottom: 20px !important;
    }
    .profileBreadcrumb .bannerTextDetail {
        padding-left: 13px !important;
    }
    .profileBreadcrumb .bannerTextDetail2 {
        padding-left: 13px !important;
    }

    .profileBreadcrumb {
        justify-items: start !important;
    }

    .buttonLine {
        font-size: var(--font-size-small);
        padding: 0px 10px;

    }

    .calendarPage .calendar-container {


        margin-left: 0px;
        margin-right: 0px;

        padding: 0px;
    }

    .sectionPaddingSecond {
        padding: 30px 0px;
    }

    .sectionPadding {
        padding: 50px 0px;
    }

    .calendar-container {
        width: 100%;
    }

    .react-calendar {
        width: 100%;
    }

    .bannerTextContent h1 {
        height: 100px;
    }

    .news-content {
        margin-top: 10px;
    }

    .topMenuTop {
        display: flex;
        padding: 5px;
        gap: 10px;
        flex-direction: column;
        zoom: 70%;
    }

    .aboutimg {
        width: 400px;
    }

    .titleCounter {
        gap: 5px;
    }

    .topFlex, .topFle {
        font-size: 10px;
    }

    .topFle span {
        line-height: 1rem;
    }

    .topBorder {
        padding-bottom: 10px;
        border-bottom: 1px solid #038d3a57;
    }

    .topMenu {
        position: relative !important;
        transform: none !important;
    }

    .header {
        position: relative;
    }

    .header.homepage {
        top: 0;
    }

    .bannerTextDetail h1 {
        line-height: 2rem;
        font-size: 22px !important;
    }

    .bannerTextDetail2 h1 {
        line-height: 2rem;
        font-size: 22px !important;
    }

    .bannerTextDetail .number-background {
        font-size: 8.5rem;
        left: 10% !important;
        top: 30% !important;

    }

    .bannerTextDetail2 .number-background {
        font-size: 8.5rem;

    }

    .textBanner {
        padding: 10px 20px 30px;
        align-items: flex-start;
    }

    .mobileJst {
        justify-content: space-between;
    }

    .textImg {
        max-width: 200px;
    }

    .bannerTextContent .apply-button {
        margin-top: 30px;
    }

    .bannerTextContent h1 {
        line-height: 2.3rem;
    }

    .bannerNews {
        margin-top: 10px;
    }

    .titleSection p {

        font-size: var(--font-size-medium);
    }

    .kubiks img {
        max-width: 200px;
    }

    .pdfBox img {
        width: 70px;
    }

    .applicationimg {
        height: 100% !important;
    }

    .darks {
        width: 15px !important;
    }

    .reverse {
        display: flex;
        flex-direction: column-reverse;
    }

    .actImg {
        height: 400px;
        object-fit: cover;
        width: 100%;
    }

    .kodeligBanner {
        position: relative;
        top: -50px;
    }

    .timeline {
        flex-direction: column;
        align-items: flex-start;
    }

    .bgButtonsGreenHeight {

        padding: 20px 20px !important;
    }

    .timeline-step {
        width: 100%;
        padding-bottom: 20px;
    }

    .breadcrumbs {
        margin: 20px 0px;
    }

    .titleSection {
        gap: 10px;
    }

    .iko {
        height: 15px;
    }

    .newsGrid {

        padding-top: 20px;

    }

    .newsImg {
        object-fit: cover;
        width: 100%;
        height: 200px;

    }

    .counterBig span {
        font-size: var(--font-size-xlarge);
    }

    .counterBigSecond h2 span {
        font-size: var(--font-size-xlarge);
    }

    .specificationTitle {
        font-size: 28px;


    }

    .archiveImg {
        height: 150px;
        object-fit: cover;
    }

    .prf {
        margin-left: 0px;
        padding-left: 20px;
    }

    .bannerTextDetail {
        margin-left: 0px;
        padding-left: 0px;
    }

    .bannerTextDetail2 {
        margin-left: 0px;
        padding-left: 20px;
    }

    .leftMenuLogo {
        position: absolute;
        right: 0px;
        bottom: 0px;
        opacity: 0.1;
        rotate: 182deg;
    }

    .racImg {
        height: 300px;
        object-fit: contain;
        width: 100%;
    }

    .timeline-date {

        z-index: 9;
        position: relative;
    }

    .timeline-label {
        position: relative;

        z-index: 9;
        max-width: 100%;
    }

    .timeline-step:nth-child(5)::after {
        width: 2px;
        height: 100%;
        left: 50%;
        transform: translateX(-50%);
        top: 0px;
        bottom: -15px;
        z-index: 1;
    }

    .timeline-step:not(:last-child)::after {
        width: 2px;
        height: 100%;
        left: 50%;
        transform: translateX(-50%);
        top: 0px;
        bottom: -15px;
        z-index: 1;
    }
}

@media (max-width: 768px) {
    :root {
        --font-size-small: 0.75rem;
        /* ~12px */
        --font-size-medium: 0.875rem;
        /* ~14px */
        --font-size-large: 1rem;
        /* ~16px */
        --font-size-xlarge: 2rem;
        /* ~32px */
    }

    .mblNew {
        width: 100px !important;
        height: 100px !important;
    }
}

@media (max-width: 480px) {
    :root {
        --font-size-small: 0.625rem;
        /* ~10px */
        --font-size-medium: 0.75rem;
        /* ~12px */
        --font-size-large: 0.875rem;
        /* ~14px */
        --font-size-xlarge: 1.5rem;
        /* ~24px */
    }
}