@font-face {
    font-family: "OskariRegular";
    src: url("./fonts/OskariG2Regular.42d829e0e129.otf");
    font-style: normal;
    font-weight: 1 1000;
}

body {
    font-family: "OskariRegular" !important;
}

.parentContainer {
    position: relative;
    width: 100%;
}


.parentContainer img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* Desktop */
@media (min-width: 768px) {  
    .desktop{
        display: block;
    }
    .mobile{
        display: none;
    }

    .about-btn{
        position: absolute;
        top: 46%;
        left: 43.8%;
        transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        background-color: #555;
        opacity: 0;
        color: white;
        border: none;
        cursor: pointer;
        width: 3.8%;
        height: 25%;
    }

    #about{
        position: absolute;
        top: 5%;
        left: 16.3%;
        transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        background-color: #555;
        opacity: 0;
        color: white;
        border: none;
        cursor: pointer;
        width: 23.8%;
        height: 3.9%;
    }

    .perks-btn{
        position: absolute;
        top: 46%;
        left: 50.3%;
        transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        background-color: #555;
        opacity: 0;
        color: white;
        border: none;
        cursor: pointer;
        width: 3.8%;
        height: 25%;
    }

    #perks{
        position: absolute;
        top: 5%;
        left: 16.3%;
        transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        background-color: #555;
        opacity: 0;
        color: white;
        border: none;
        cursor: pointer;
        width: 23.8%;
        height: 3.9%;
    }

    .faq-btn{
        position: absolute;
        top: 46%;
        left: 56.5%;
        transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        background-color: #555;
        opacity: 0;
        color: white;
        border: none;
        cursor: pointer;
        width: 3.8%;
        height: 25%;
    }

    #faq{
        position: absolute;
        top: 5%;
        left: 16.3%;
        transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        background-color: #555;
        opacity: 0;
        color: white;
        border: none;
        cursor: pointer;
        width: 23.8%;
        height: 3.9%;
    }

    .navbar .apply-btn{
        position: absolute;
        top: 51%;
        left: 93.5%;
        transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        background-color: #555;
        opacity: 0;
        color: white;
        border: none;
        cursor: pointer;
        width: 7.8%;
        height: 41%;
    }

    .u25-btn{
        position: absolute;
        top: 51%;
        right: 81.8%;
        transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        background-color: #555;
        opacity: 0;
        color: white;
        border: none;
        cursor: pointer;
        width: 10.5%;
        height: 41%;
    }

    .home .apply-btn{
        position: absolute;
        bottom: 12.8%;
        left: 14.1%;
        transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        background-color: #555;
        opacity: 0;
        color: white;
        border: none;
        cursor: pointer;
        width: 14%;
        height: 7.8%;
    }

    .campus-ceo .apply-btn{
        position: absolute;
        bottom: 15.8%;
        left: 11.3%;
        transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        background-color: red;
        opacity: 0;
        color: white;
        border: none;
        cursor: pointer;
        width: 11.8%;
        height: 10.8%;
    }

    .about .apply-btn{
        position: absolute;
        top: 28%;
        left: 50%;
        transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        background-color: red;
        opacity: 0;
        color: white;
        border: none;
        cursor: pointer;
        width: 11.8%;
        height: 4.8%;
    }

    .perks .apply-btn{
        position: absolute;
        top: 81.5%;
        left: 72.75%;
        transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        background-color: red;
        opacity: 0;
        color: white;
        border: none;
        cursor: pointer;
        width: 11.8%;
        height: 7.8%;
    }

    .footer .apply-btn{
        position: absolute;
        top: 81.5%;
        left: 72.75%;
        transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        background-color: red;
        opacity: 0;
        color: white;
        border: none;
        cursor: pointer;
        width: 11.8%;
        height: 7.8%;
    }

    .footer .ibdat-btn{
        position: absolute;
        top: 51.5%;
        left: 50%;
        transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        background-color: red;
        opacity: 0;
        color: white;
        border: none;
        cursor: pointer;
        width: 15.4%;
        height: 4.8%;
    }

    .footer .kk-btn{
        position: absolute;
        top: 56.9%;
        left: 50%;
        transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        background-color: red;
        opacity: 0;
        color: white;
        border: none;
        cursor: pointer;
        width: 14%;
        height: 4.8%;
    }

    .footer .insta-btn{
        position: absolute;
        top: 70.9%;
        left: 39.9%;
        transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        background-color: red;
        opacity: 0;
        color: white;
        border: none;
        cursor: pointer;
        width: 6.6%;
        height: 8.8%;
    }

    .footer .fb-btn{
        position: absolute;
        top: 70.9%;
        left: 47.3%;
        transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        background-color: red;
        opacity: 0;
        color: white;
        border: none;
        cursor: pointer;
        width: 6.6%;
        height: 8.8%;
    }

    .footer .tw-btn{
        position: absolute;
        top: 70.9%;
        left: 54.2%;
        transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        background-color: red;
        opacity: 0;
        color: white;
        border: none;
        cursor: pointer;
        width: 5.2%;
        height: 8.8%;
    }

    .footer .linkedin-btn{
        position: absolute;
        top: 70.9%;
        left: 60.5%;
        transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        background-color: red;
        opacity: 0;
        color: white;
        border: none;
        cursor: pointer;
        width: 6%;
        height: 8.8%;
    }
}

/* Mobile */
@media (max-width: 768px) { 
    .mobile{
        display: block;
    }
    .desktop{
        display: none;
    }

    .nav-bar .u25-btn{
        position: absolute;
        top: 48.5%;
        left: 49.8%;
        transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        background-color: red;
        opacity: 0;
        color: white;
        border: none;
        cursor: pointer;
        width: 35.8%;
        height: 59%;
    }

    .ham-btn{
        position: absolute;
        top: 51.9%;
        left: 7%;
        transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        background-color: red;
        opacity: 0;
        color: white;
        border: none;
        cursor: pointer;
        width: 6%;
        height: 30.8%;
    }

    .home-mob{
        margin-top: 73px;
    }

    .navbar {
        padding-top: 0rem !important;
    }

    .navbar .ham-btn {
        position: absolute;
        transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        background-color: #555;
        opacity: 0;
        color: white;
        border: none;
        cursor: pointer;
        width: 6%;
        height: 19.2%;
        top: 50.2%;
        left: 7%;
    }

    .navbar .logo-btn {
        position: absolute;
        transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        background-color: #555;
        opacity: 0;
        color: white;
        border: none;
        cursor: pointer;
        width: 36%;
        height: 41.2%;
        top: 45%;
        left: 50%;
    }

    .offcanvas-start {
        top: 0;
        left: 0;
        width: 350px;
        border-right: 1px solid rgba(0, 0, 0, .2);
        transform: translateX(-100%);
    }

    .navbar .offcanvas-header {
        display: flex;
        padding-bottom: 24px;
        justify-content: space-between;
        align-items: center;
        align-self: stretch;

        border-bottom: 1px solid #F2F2F2;
    }

    .offcanvas-header {
        display: flex;
        align-items: center;
        justify-content: space-between;

        padding: 0px !important;

        padding-bottom: 24px !important;

        padding-bottom: 24px;
        margin-top: 20px;
        margin-inline: 16px;

        border-bottom: 1px solid #F2F2F2;
    }

    .navbar .offcanvas-header .logo {
        display: flex;
        width: 40px;
        height: 40px;
        justify-content: center;
        align-items: center;
    }

    .navbar .offcanvas-header .logo {
        width: 24px;
        height: 24px;
    }

    .ham-img {
        width: 24px;
        height: 24px;
    }

    .slider-link {
        border-bottom: 1px solid #F2F2F2;

        display: flex;
        padding: 16px 12px 14px 12px;
        align-items: flex-start;
        gap: 8px;
        align-self: stretch;

        color: #1F1F1F;
        font-family: "OskariRegular";
        font-size: 20px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;

        text-decoration: none;

        color: black !important;
    }

    .off-can {
        display: flex;
        padding: 20px 16px;
        flex-direction: column;
        justify-content: space-between;
        flex: 1 0 0;
    }

    .off-can .links {
        padding-inline: 16px;
    }


    .off-can .foot-div {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 12px;
        align-self: stretch;

        margin-top: auto;
    }

    .off-can .apply-btn {
        color: #FFF;
        font-family: "OskariRegular";
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;

        display: flex;
        padding: 14px 20px 12px 20px;
        justify-content: center;
        align-items: center;
        gap: 8px;
        align-self: stretch;

        border-radius: 8px;
        background: #1F1F1F;
        box-shadow: 0px 3px 0px 0px #A4A4A4;

        text-decoration: none;

        height: 40px;
    }

    .off-can .app-btn {
        color: #1F1F1F;
        font-family: "OskariRegular";
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;

        border-radius: 8px;
        border: 1px solid #E2E2E2;
        background: #FFF;
        box-shadow: 0px 3px 0px 0px #D2D2D2;

        display: flex;
        padding: 14px 20px 12px 20px;
        justify-content: center;
        align-items: center;
        gap: 8px;
        align-self: stretch;

        text-decoration: none;

        height: 40px;
    }

    .apply-float {
        /* box-shadow: 0px -8px 32px 0px rgba(0, 0, 0, 0.12);
        backdrop-filter: blur(16px); */

        display: flex;
        padding: 12px;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .apply-float .apply-btn {
        border-radius: 8px;
        background: var(--Light-Mode-Accent-Orange-orange-500, #FC741E);

        display: flex;
        padding: 16px 32px;
        justify-content: center;
        align-items: center;
        gap: 8px;
        align-self: stretch;

        color: var(---Buttons-On-button-On-Primary, #FFF);
        font-family: "OskariRegular";
        font-size: 24px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        text-transform: capitalize;

        text-decoration: none;
        box-shadow: 0px 3px 0px 0px #b35216;
    }

    .footer-mob .ibdat-btn{
        position: absolute;
        top: 43.5%;
        left: 50%;
        transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        background-color: red;
        opacity: 0;
        color: white;
        border: none;
        cursor: pointer;
        width: 50.4%;
        height: 4.8%;
    }

    .footer-mob .kk-btn{
        position: absolute;
        top: 48.5%;
        left: 50%;
        transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        background-color: red;
        opacity: 0;
        color: white;
        border: none;
        cursor: pointer;
        width: 45.4%;
        height: 4.8%;
    }

    .footer-mob .insta-btn{
        position: absolute;
        top: 60.9%;
        left: 36%;
        transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        background-color: red;
        opacity: 0;
        color: white;
        border: none;
        cursor: pointer;
        width: 23.6%;
        height: 8.2%;
    }

    .footer-mob .fb-btn{
        position: absolute;
        top: 60.9%;
        left: 63.8%;
        transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        background-color: red;
        opacity: 0;
        color: white;
        border: none;
        cursor: pointer;
        width: 23.6%;
        height: 8.2%;
    }

    .footer-mob .tw-btn{
        position: absolute;
        top: 71.9%;
        left: 37.5%;
        transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        background-color: red;
        opacity: 0;
        color: white;
        border: none;
        cursor: pointer;
        width: 19.6%;
        height: 8.2%;
    }

    .footer-mob .linkedin-btn{
        position: absolute;
        top: 71.9%;
        left: 61.2%;
        transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        background-color: red;
        opacity: 0;
        color: white;
        border: none;
        cursor: pointer;
        width: 20.8%;
        height: 8.2%;
    }

    #perks-mob{
        position: absolute;
        top: -3%;
        left: 16.3%;
        transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        background-color: #555;
        opacity: 0;
        color: white;
        border: none;
        cursor: pointer;
        width: 23.8%;
        height: 3.9%;
    }

    #faq-mob{
        position: absolute;
        top: 0%;
        left: 16.3%;
        transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
        background-color: #555;
        opacity: 0;
        color: white;
        border: none;
        cursor: pointer;
        width: 23.8%;
        height: 3.9%;
    }
}