/* =============================================== */
/* =================== GENERAL =================== */ 
/* =============================================== */
section {
    padding-top: 7rem;
    padding-bottom: 9rem;
}
.form-control:focus {
    border-width: 1px !important;
}
#template-customizer .template-customizer-open-btn {
    display: none !important;
}
.text-blue {
    color: #409af3;
}
.app-brand-text {
    color: #409af3;
}



/* ================HERO SLIDER=================== */ 
.landing-slider {
    padding: 0;
    .carousel {
        .carousel-inner {
            img {
                height: 100vh;
            }
        }
    }
    .card-action {
        height: 160px;
        max-width: 850px;
        margin: auto;
        margin-top: -55px;
        position: relative;
        z-index: 2;
        display: block;
        overflow: hidden;
        .card-body {
            .card-text {
                position: absolute;
                width: 70%;
                height: auto;
                left: 0;
                top: 57%;
                padding-left: 50px;
                transform: translateY(-50%);
                p.card-title {
                    font-weight: 800;
                }
                p.card-desc {
                    font-size: 1rem;
                }
            }
            .side-img-container {
                .side-img {
                    opacity: 1;
                    border-radius: 4px;
                    width: auto;
                    transform: translateY(-36%);
                    height: 140px;
                    float: right;
                    cursor: pointer;
                    transition: transform 0.3s ease;
                }
                .overlay-icon {
                    position: absolute;
                    top: 50%;
                    right: 11%;
                    transform: translate(25%, -50%);
                    opacity: 0;
                    transition: opacity 0.3s ease;
                    pointer-events: none;
                    color: #000000c3;
                    .mdi-eye {
                        &::before {
                            font-size: 2rem;
                        }
                    }
                }
            }
            .side-img-container:hover .side-img {
                opacity: 0.4;
            }
            .side-img-container:hover .overlay-icon {
                opacity: 1;
            }
        }
        .modal {
            display: none; 
            position: fixed; 
            z-index: 1000;
            left: 0;
            top: 35px;
            width: 100%;
            height: 100%;
            overflow: hidden;
            background-color: rgba(230, 230, 230, 0.817);
            justify-content: center;
            align-items: center;
            .close-btn {
                position: absolute;
                top: 60px;
                right: 50px;
                color: #474747bd;
                font-size: 35px;
                font-weight: bold;
                cursor: pointer;
            }
            .modal-content {
                width: 30%;
                max-height: 100%;
                animation: zoomIn 0.5s ease;
            }
            @keyframes zoomIn {
                from { transform: scale(0.5); opacity: 0; }
                to { transform: scale(1); opacity: 1; }
            }
        }
    }
}
  

/* ===============REGISTER SECTION================ */ 
.landing-register {
    .container {
        .card {
            .card-body {
                .wrapper {
                    width: 60%;
                    h4.card-title {
                        font-size: 2.5rem;
                        font-weight: 900;
                    }
                    p.card-desc {
                        font-size: 1.2rem;
                    }
                    .btn-register {
                        transition: 0.4s;
                        color: #ffff;
                        border-color: #4b93da;
                        background-color: #4b93da;
                        font-size: 1rem;
                        letter-spacing: .03rem;
                        line-height: 1;
                        font-weight: 700;
                        padding: 1rem 1.5rem;
                        .mdi-arrow-right-thin {
                            &::before {
                                font-size: 1rem;
                                letter-spacing: .03rem;
                                font-weight: 700;
                            }
                        }
                        &:hover {
                            border-color: #636ede;
                            background-color: #636ede;
                        }
                    }
                }
                img.side-img {
                    position: absolute;
                    top: 20px;
                    width: 400px;
                    right: 6%;
                    z-index: 1;
                }
                img.side-img, .perspective {
                    transform: perspective(600px) rotateX(20deg) translateY(-5px);
                }
                .blop {
                    background-size: cover;
                    background-repeat: no-repeat;
                    width: 1200px;
                    height: 1200px;
                    z-index: -1;
                    position: absolute;
                    top: -91%;
                    right: 38%;
                    opacity: 0.05;
                    transform: rotate(-300deg);
                }
            }
        }
    }
}


/* =================ABOUT SECTION================= */
.landing-about {
    padding: 0;
    .container-fluid {
        .sklms-container {
            h4.sklms-text-title {
                font-size: 2.5rem;
                font-weight: 900;
            }
            p.sklms-desc {
                font-size: 1.3rem;
                text-align: justify;
            }
        }
        .mission-container {
            border-bottom: 15px solid #0039a7; 
            height: auto;
            .nyc-logo-wrapper {
                background-color: #4a93dc; 
                padding: 1.5rem; 
                text-align: center;
            }
            .navigation-bar {
                display: flex;
                justify-content: center;
                margin-top: 2.5rem;
                margin-left: 2rem;
                margin-right: 2rem;
                margin-bottom: 1rem;
            }
            .navigation-bar a {
                padding: 0 30px;
                font-size: 1.3rem;
                border-bottom: 2px solid #8c8c8c;
                color: black;
                font-weight: 800;
                cursor: pointer;
            }
            .navigation-bar a:hover {
                color: black;
            }
            .navigation-bar a.active {
                border-bottom: 2px solid #f91f02;
            }
            .desc-container {
                position: absolute;
                width: auto;
                height: auto;
                opacity: 0;
                transition: all 0.5s ease;
                z-index: 0;
                padding-left: 2rem;
                padding-right: 2rem;
                padding-top: 1rem;
                text-align: center;
                p.text-desc {
                    font-size: 1.3rem;
                }
            }
            .desc-container.active {
                left: auto;
                opacity: 1;
                z-index: 1;
                padding-top: 1rem;
            }
        }
    }
}


/* =================PYDP SECTION================== */ 
.pydp-ppa {
    .container {
        padding: 0;
        .row-one {
            margin-bottom: 2rem;
            .container-title {
                img.pydp-logo {
                    width: 40%; 
                }
                h3.pydp-title {
                    font-weight: 800; 
                    font-size: 2.5rem;
                }
                p.pydp-sub-title {
                    font-size: 1rem; 
                    font-weight: 600; 
                }
            }
        }
        .container-image {
            .hover-container {
                position: relative;
                img {
                    width: 100%;
                    display: block;
                    height: auto;
                }
                .text-overlay {
                    position: absolute;
                    top: 0;
                    left: 0;
                    height: 100%;
                    width: 100%;
                    opacity: 0;
                    transition: .5s ease-out;
                    margin-bottom: 0;
                    text-align: center;
                    font-size: 5.5rem;
                    font-weight: 800;
                }
            }
            .hover-container:hover .text-overlay {
                opacity: 1;
                cursor: pointer;
            }
            .hover-container:hover img {
                transition: .5s ease-out;
                filter: grayscale(0%) blur(3px);
            }
        }
    }
    .dotted {
        width: 100%;
        height: 40px;
        top: 85px;
        margin-bottom: -55px;    
    }
}
  
/* =============ANNOUNCEMENT SECTION============== */ 
.landing-announcement {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    .container-fluid {
        .card {
            .card-body {
                h4.card-title {
                    font-size: 2.5rem;
                    font-weight: 900;
                }
                p.card-sub-title {
                    font-size: 1.2rem;
                }
                h3.announcement-title {
                    font-size: 1.4rem;
                    font-weight: 800;
                }
                p.announcement-desc {
                    font-size: 1rem;
                }
                p.mobile-announcement-desc {
                    display: none;
                }
                .mdi-message-alert-outline::before {
                    font-size: 5rem;
                }
                .mdi-arrow-right-thin {
                    line-height: 0.1 !important;
                    &::before {
                        font-size: 20px;
                    }
                }
                .card-hover {
                    display: block;
                    top: 0px;
                    position: relative;
                    padding: 32px 24px;
                    overflow: hidden;
                    .go-corner {
                        height: 100%;
                        width: 33px;
                        padding-right: 9px;
                        border-radius: 0;
                        transform: skew(6deg);
                        margin-right: -49px;
                        align-items: start;
                        background-image: linear-gradient(-45deg, #409af3 1%, #868bfc 100%);
                        display: flex;
                        justify-content: center;
                        position: absolute;
                        overflow: hidden;
                        top: 0;
                        right: 0;
                    }
                    .go-arrow {
                        transform: skew(-6deg);
                        margin-left: 1px;
                        margin-top: 12px;
                        opacity: 0;
                        color: white;
                        font-family: courier, sans;
                        font-size: 20px;
                        font-weight: 500;
                    }
                }
                .card-hover:hover {
                    transition: all .5s;
                    h3.announcement-title {
                        -ms-transform: scale(1.1); /* IE 9 */
                        -webkit-transform: scale(1.1); /* Safari 3-8 */
                        transform: scale(1.100); 
                        transition: 0.3s;
                        margin-left: 0.8rem;
                        margin-right: 0.8rem;
                    }
                    .go-corner {
                        margin-right: -19px;
                        transition: 0.4s ease-in-out;
                    }
                    .go-arrow {
                        opacity: 1;
                    }
                }
            }
        }
        .mdi-arrow-right-thin-circle-outline {
            &::before {
                font-size: 135px;
            }
        }
    }
 
}


/* =============TECH ASSIST SECTION=============== */
.technical-assistance {
    background-color: #30334e;
    padding: 0;
    .container-fluid {
        .title-container {
            border-bottom: 1px solid #787878;
            padding-top: 8.5rem;
            padding-bottom: 8.5rem;
            .header-text {
                font-weight: 800;
                .mdi-flag {
                    &::before {
                        font-size: 55px;
                    }
                }
            }
        }
        .counter-container {
            .hover-container {
                height: 90vh;
                transition: transform 0.3s ease;
                h1.text-title {
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    opacity: 1;
                    font-weight: 800;
                    text-shadow: 4px 4px #006a7a;
                    transition: 0.3s ease-in-out;
                    background-size: cover;
                    background-repeat: no-repeat; 
                    background-position: center;
                }
                p.text-overlay {
                    text-shadow: 4px 4px #006a7a;
                    font-weight: 800;
                    font-size: 5.5rem;
                    color: #fcd216;
                    opacity: 0;
                }
                .bg-img {
                    top: 0;
                    left: 0;
                    filter: blur(2px);
                    width: 100%;
                    height: 100%;
                    background-size: cover;
                    background-repeat: no-repeat; 
                    background-position: center;
                }
            }
            .hover-container:hover .text-title {
                opacity: 0;
            }
            .hover-container:hover .text-overlay {
                opacity: 1;
            }
        }
    }
}

/* ==============CONTACT SECTION================== */ 
.landing-contact {
    .container {
        padding: 0;
        h4.text-greetings {
            font-size: 2.5rem;
            font-weight: 900;
        }
        p.text-message {
            font-size: 1.2rem;
        }
        .bg-side {
            background-image: url('../img/front-pages/landing-page/sitting-girl-with-laptop.png');
            background-repeat: no-repeat;
            background-size: contain;
            background-position: center;
        }
        .form-container {
            .card {
                .card-body {
                    h3.card-title {
                        font-size: 1.3rem;
                        font-weight: 800;
                        .mdi-list-box-outline {
                            line-height: 0 !important;
                            &::before {
                                font-size: 1.9rem !important;
                            }
                        }
                    }
                    form {
                        span.required {
                            color: #ff1b1b;
                            font-size: 1rem;
                        }
                        button.btn-submit {
                            background-color: #4b93da;
                            color: #ffff;
                            transition: 0.3s;
                            &:hover {
                                background-color: #636ede;
                                color: #ffff;
                            }
                        }
                        textarea {
                            resize: none;
                        }
                    }
                }
            }
        }
    }
}


/* ==================================================================== */
/* ===============================LIGHT THEME========================== */ 
/* ===============================LIGHT THEME========================== */ 
/* ==================================================================== */

.light-style {
    h6, h5, h4, h3, h2, h1 {
        color: #393939;
    }
    p {
        color: #484554;
    }
    .landing-slider {
        background: #fff;
    }
    .landing-register {
        background-color: #fff;
        .container {
            .card {
                .card-body {           
                    .blop {
                        background-image: url("data:image/svg+xml;utf8,%3Csvg viewBox=%220 0 1000 1000%22 xmlns=%22http:%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cdefs%3E%3CclipPath id=%22b%22%3E%3Cpath fill=%22currentColor%22 d=%22M759.5 685.5Q714 871 515.5 844t-332-185.5Q50 500 188 349t308.5-145Q667 210 736 355t23.5 330.5Z%22%2F%3E%3C%2FclipPath%3E%3Cpattern id=%22a%22 patternUnits=%22userSpaceOnUse%22 width=%2225%22 height=%2225%22 viewBox=%220 0 100 100%22 fill=%22%23212121%22%3E%3Ccircle cx=%2250%22 cy=%2250%22 r=%2212.5%22%2F%3E%3C%2Fpattern%3E%3C%2Fdefs%3E%3Cpath fill=%22url(%23a)%22 d=%22M759.5 685.5Q714 871 515.5 844t-332-185.5Q50 500 188 349t308.5-145Q667 210 736 355t23.5 330.5Z%22 transform=%22translate(-60 -60)%22%2F%3E%3Cg clip-path=%22url(%23b)%22%3E%3Cpath fill=%22%23212121%22 d=%22M759.5 685.5Q714 871 515.5 844t-332-185.5Q50 500 188 349t308.5-145Q667 210 736 355t23.5 330.5Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
                    }
                }
            }
        }
    }
    .landing-about {
        .container-fluid {
            .sklms-container {
                background-color: #f7f7f7;
                p.sklms-desc {
                    color: #000000;
                }
            }
            .mission-container {
                background-color: #fff;
                .nyc-logo-wrapper {
                    background-color: #4a93dc; padding: 1.5rem; 
                    text-align: center;
                }
                /* .img-container {
                    background-color: #f2f2f2; 
                } */
            }
        }
    }
    .pydp-ppa {
        background-color: #fff;
        .container {
            .container-title {
                p.pydp-sub-title {
                    color: #7e7e7e;
                }
            }
            .container-image {
                .hover-container {
                    .text-overlay {
                        color: #30334e;
                        text-shadow: 2px 4px #edeeff;
                    }
                }
            }
        }
    }
    .landing-announcement {
        background-image: url('../img/front-pages/landing-page/light-sk-banner-0.jpg');
        .container-fluid {
            .card {
                .card-body {
                    h3.announcement-title {
                        color: #4b93da;
                    }
                    .mdi-message-alert-outline::before {
                        color: #4b93da;
                    }
                }
            }
        }
    }
    .landing-contact {
        .container {
            .form-container {
                .card {
                    .card-body {
                        h3.card-title {
                            color: #4b93da; 
                        }
                        form {
                            label {
                                color: #484554;
                            }
                        }
                    }
                }
            }
        }
    }
    .landing-footer {
        .footer-top {
            background-color: #e7e7e7;
            color: #484554;
            .container {
                .footer-title {
                    font-weight: 700;
                }
                .footer-text {
                    font-size: 13px;
                }
                .mdi-chevron-right {
                    color: #666cff;
                }
                a.footer-link {
                    color: #484554;
                    transition: 0.3s;
                    position: relative;
                    z-index: 2;
                    font-size: 13px;
        
                    &:hover {
                        color: #666cff;
                    }
                }
            }
            .footer-bg {
                position: absolute;
                top: 70px;
                z-index: 1;
                right: 25px;
                opacity: 0.05;
                width: 45%;
            }
        }
        .footer-bottom {
            .footer-text,
            i {
                color: #ffff;
            }
    
            i:hover {
                transition: 0.3s;
                color: #666cff;
            }
        }
    }
}

/* ===================================================================== */
/*===============================END OF LIGHT PAGE====================== */ 
/* ==============================END OF LIGHT PAGE====================== */ 
/* ===================================================================== */




/* ===================================================================== */
/* =================================DARK THEME========================== */ 
/* =================================DARK THEME========================== */ 
/* ===================================================================== */

.dark-style {
    h6, h5, h4, h3, h2, h1 {
        color: #f3ecff;
    }
    p {
        color: #d2d2e8;
    }
    .landing-slider {
        .card-action {
            .modal {
                background-color: rgba(53, 57, 96, 0.694);
                .close-btn {
                    color: #ffffffbd;
                }
            }
        }
    }
    .landing-register {
        .container {
            .card {
                background-color: rgb(53 57 96);
                .card-body {                
                    .blop {
                        background-image: url("data:image/svg+xml;utf8,%3Csvg viewBox=%220 0 1000 1000%22 xmlns=%22http:%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cdefs%3E%3CclipPath id=%22b%22%3E%3Cpath fill=%22currentColor%22 d=%22M759.5 685.5Q714 871 515.5 844t-332-185.5Q50 500 188 349t308.5-145Q667 210 736 355t23.5 330.5Z%22%2F%3E%3C%2FclipPath%3E%3Cpattern id=%22a%22 patternUnits=%22userSpaceOnUse%22 width=%2225%22 height=%2225%22 viewBox=%220 0 100 100%22 fill=%22%23fff%22%3E%3Ccircle cx=%2250%22 cy=%2250%22 r=%2212.5%22%2F%3E%3C%2Fpattern%3E%3C%2Fdefs%3E%3Cpath fill=%22url(%23a)%22 d=%22M759.5 685.5Q714 871 515.5 844t-332-185.5Q50 500 188 349t308.5-145Q667 210 736 355t23.5 330.5Z%22 transform=%22translate(-60 -60)%22%2F%3E%3Cg clip-path=%22url(%23b)%22%3E%3Cpath fill=%22%23fff%22 d=%22M759.5 685.5Q714 871 515.5 844t-332-185.5Q50 500 188 349t308.5-145Q667 210 736 355t23.5 330.5Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
                    }
                }
            }
        }
    }
    .landing-about {
        /* &:before {
            background-image: url('../img/front-pages/landing-page/dark-about-bg.png');
        } */
        background-color: #30334e;
        .container-fluid {
            .mission-container {
                background-color: #edeeff;
                .desc-container {
                    p.text-desc {
                        color: #4e4f69;
                    }
                }
            }
        }
    }
    .pydp-ppa {
        background-color: #282a42;
        .container {
            .container-title {
                p.pydp-sub-title {
                    color:#b6b6b6
                }
            }
            .text-overlay {
                color: #f2f2f2;
                text-shadow: 2px 4px #2f2f3a;
            }
        }
    }
    .landing-announcement {
        background-image: url('../img/front-pages/landing-page/dark-sk-banner-0.jpg');
        .container-fluid {
            .card {
                .card-body {
                    h3.announcement-title {
                        color: #409af3;
                    }
                    .mdi-message-alert-outline::before {
                        color: #409af3;
                    }
                }
            }
        }
    }    
    .landing-contact {
        .container {
            .form-container {
                .card {
                    .card-body {
                        h3.card-title {
                            color: #ececee;
                        }
                        form {
                            label {
                                color: #d2d2e8;
                            }
                        }
                    }
                }
            }
        }
    }
    .landing-footer {
        .footer-top {
            background-color: #33354e;
            .container {
                .footer-title {
                    font-weight: 700;
                }
                .footer-text {
                    font-size: 13px;
                }
                .mdi-chevron-right {
                    color: #666cff;
                }
                a.footer-link {
                    color: #f7f6ff;
                    transition: 0.3s;
                    position: relative;
                    z-index: 2;
                    font-size: 13px;
                    &:hover {
                        color: #8685ef;
                    }
                }
            }
            .footer-bg {
                position: absolute;
                top: 70px;
                z-index: 1;
                right: 25px;
                opacity: 0.05;
                width: 45%;
            }
        }
        .footer-bottom {
            .footer-text,
            i {
                color: #ffff;
            }
            i:hover {
                transition: 0.3s;
                color: #666cff;
            }
        }
    }
}

/* ===================================================================== */
/*================================END OF DARK PAGE====================== */ 
/* ===============================END OF DARK PAGE====================== */ 
/* ===================================================================== */





/* ===================================================================== */
/* ==================================FOR MOBILE========================= */ 
/* ==================================FOR MOBILE========================= */ 
/* ===================================================================== */

@media screen and (max-width: 1440px) {
    section {
        padding-top: 5.5rem;
        padding-bottom: 6.5rem;
    }
    .landing-slider {
        .card-action {
            .card-body {
                .side-img-container {
                    .side-img {
                        transform: translateY(-35%);
                    }
                }
            }
        }
    }
    .landing-about {
        .container-fluid {
            .sklms-container {
                .wrapper {
                    margin-left: 0 !important;
                }
            }
        }
    }
    .pydp-ppa {
        .container {
            padding-right: 1rem;
            padding-left: 1rem;
            .row-one {
                .container-title {
                    img.pydp-logo {
                        width:45%;
                    }
                    h3.pydp-title {
                        font-size: 2rem;
                    }
                }
            }
        }
        .dotted {
            top: 45px;
        }
    }
    .landing-announcement {
        .container-fluid {
            margin: auto;
        }
    }
    .technical-assistance {
        .container-fluid {
            .counter-container {
                .hover-container {
                    height: 80vh;
                }
            }
        }
    }
    .landing-contact {
        .container {
            .row {
                margin-left: 0;
                margin-right: 0;
            }
        }
    }
}

@media screen and (max-width: 1024px){
    section {
        padding-top: 5rem;
        padding-bottom: 5.5rem;
    }
    nav {
        .navbar-brand {
            .app-brand-text {
                font-size: 22px;
            }
        }
    }
    .landing-slider {
        .card-action {
            .modal {
                .modal-content {
                    width: 39%;
                }
            }
        }
    }
    .landing-register {
        margin-bottom: 0 !important;
        .container {
            .card {
                .card-body {
                    padding: 0;
                    .wrapper {
                        width: 100%;
                        .btn-register {
                            padding: 15px 3%;
                        }
                    }
                    img.side-img {
                        display: none;
                    }
                    .blop {
                        top: -60%;
                        right: 7%;
                    }
                }
            }
        }
    }
    .landing-about {
        .container-fluid {
            .sklms-container {
                .wrapper {
                    padding: 0 !important;
                }
            }
        }
    }
    .pydp-ppa {
        padding-top: 7rem;
        padding-bottom: 7.5rem;
        .container {
            .row-one {
                .container-title {
                    img.pydp-logo {
                        width: 19%;
                        position: absolute;
                        opacity: 0.2;
                        margin: 0;
                    }
                    h3.pydp-title {
                        font-size: 2rem;
                    }
                }
            }
            .container-image {
                .hover-container {
                    .col-sm-12 {
                        padding: 0;
                    }
                    img {
                        width: 115%;
                    }
                    .text-overlay {
                        left: 10px;
                        font-size: 4.9rem;
                    }
                }
            }
        }
        .dotted {
            top: 60px;
        }
    }
    .landing-announcement {
        .container-fluid {
            .card {
                .card-body {
                    .card-hover {
                        padding: 24px;
                        p.announcement-desc {
                            display: none !important;
                        }
                        p.mobile-announcement-desc {
                            display: flex;
                        }
                        .go-corner {
                            padding-right: 8px;
                            transform: skew(9deg);
                        }
                        .go-arrow {
                            font-size: 23px;
                            font-weight: 600;
                            margin-left: 3px;
                        }
                    }
                    .card-hover:hover {
                        .go-corner {
                            margin-right: -14px;
                        }
                    }
                }
            }
        }
    }
    .technical-assistance {
        .container-fluid {
            .counter-container {
                margin-right: 0px;
                margin-left: 0px;
                .hover-container {
                    height: 85vh;
                    h1.text-title {
                        font-size: 3rem;
                    }
                }
            }
        }
    }
    .landing-contact {
        .container {
            .form-container {
                .card {
                    .card-body {
                        .row {
                            padding-left: 0 !important;
                            padding-right: 0 !important;
                        }
                        h3.card-title {
                            padding: 0 !important;
                            padding-bottom: 1rem !important;
                        }
                    }
                }
            }
        }
    }
    .landing-footer {
        .footer-top {
            padding-bottom: 3.2rem;
            h6 {
                font-size: 18px !important;
            }
            .footer-text {
                font-size: 13px !important;
                margin-bottom: 0 !important;
            }
            a.footer-link, h6.footer-title {
                font-size: 13px !important;
            }   
            .footer-bg {
                top: 60px !important;
                right: -70px !important;
                width: 55% !important;
            } 
        }
        .footer-bottom {
            img {
                width: 75px;
            }
            .footer-text {
                font-size: 15px !important;
            }
        }
    }
}

@media screen and (max-width: 768px){
    section {
        padding-top: 6rem;
        padding-bottom: 7rem;
    }
    nav {
        .navbar-brand {
            padding: 0;
            .tf-icons {
                &::before {
                    font-size: 2.5rem;
                }
            }
            .app-brand-text {
                font-size: 1.7rem;
            }
        }
    }
    .landing-slider {
        .card-action {
            height: auto;
            max-width: 700px;
            .card-body {
                .side-img-container {
                    .side-img {
                        transform: translateY(-22%);
                        height: 140px;
                        margin-right: 1.4rem;
                    }
                    .overlay-icon {
                        right: 13%;
                        transform: translate(-50%, -50%);
                    }
                }
            }
            .modal {
                .close-btn {
                    font-size: 3rem;
                    top: 45px;
                }
                .modal-content {
                    width: 55%;
                }
            }
        }
    }
    .landing-register {
        margin-bottom: 0 !important;
        .container {
            .card {
                .card-body {
                    padding: 0;
                    .wrapper {
                        padding: 2.2rem !important;
                        .btn-register {
                            padding: 15px 5%;
                        }
                    }
                    .blop {
                        top: -59%;
                        right: -20%;
                    }
                }
            }
        }
    }
    .landing-about {
        .container-fluid {
            .mission-container {
                height: 620PX;
            }
        }
    }
    .pydp-ppa {
        padding-top: 5rem;
        padding-bottom: 8rem;
        .container {
            .row-one {
                margin-bottom: 0;
                .container-title {
                    margin-bottom: 1.2rem;
                    img.pydp-logo {
                        width: 23%;
                        position: relative;
                        opacity: 1;
                    }
                    .text-overlay {
                        margin-bottom: 1.5rem;
                    }
                }
            }
        }
        .dotted {
            top: 70px;
        }
    }
    .technical-assistance {
        .container-fluid {
            .title-container {
                padding-top: 5.5rem;
                padding-bottom: 5.5rem;
                .header-text {
                    font-size: 3.2rem;
                }
            }
            .counter-container {
                .hover-container {
                    height: 45vh;
                    h1.text-title {
                        font-size: 2.7rem;
                    }
                    p.text-overlay {
                        background-position: center;
                    }
                }
            }
        }
    }
    .landing-footer {
        .footer-top {
            padding-bottom: 0;
            .app-brand-link {
                justify-content:center;
            }
            .footer-logo-description {
                text-align: center;
            }
            .app-brand-logo{
                img {
                    margin-left: 0 !important;
                }
            }
            .footer-text {
                font-size: 16px !important;
                margin-bottom: 0 !important;
            }
            a.footer-link, h6.footer-title {
                font-size: 14px !important;
            }
            .footer-bg {
                top: 550px !important;
                right: -70px !important;
                width: 60% !important;
            }
        }
        .footer-bottom {
            img {
                width: 65px;
            }
            .footer-text {
                font-size: 15px !important;
            }
        }
    }
}

@media screen and (max-width: 426px) {
    section {
        padding-top: 6rem;
        padding-bottom: 6.5rem;
    }
    nav {
        .navbar-brand {
            padding: 0px 5%;
            .tf-icons {
                &::before {
                    font-size: 2.2rem;
                }
            }
            .app-brand-logo {
                width: 8%;
                img {
                    width: 100%;
                }
            }
            .app-brand-text {
                font-size: 1.4rem;
            }
        }
    }
    .landing-slider {
        .carousel {
            .carousel-inner {
                .carousel-item {
                    img {
                        height: 40vh;
                    }
                }
            }
        }
        .card-action {
            .card-body {
                padding: 1.5rem;
                .card-text {
                    position: relative;
                    width: 100%;
                    height: auto;
                    transform: none;
                    padding: 0 !important;
                    top: auto;
                    left: auto;
                    right: auto;
                    bottom: auto;
                    margin: 0px auto;
                    p.head {
                        font-size: 1.5rem;
                    }
                }
                .side-img-container {
                    .side-img {
                        position: relative;
                        width: 100%;
                        height: auto;
                        transform: none;
                        padding: 0 !important;
                        top: auto;
                        left: auto;
                        right: auto;
                        bottom: auto;
                        margin: 15px 0px 25px 0px;
                        padding-left: 1.5rem;
                        padding-right: 1.5rem;
                    }
                    .overlay {
                        top: 65%;
                        right: 39%;
                        .mdi-eye {
                            &::before {
                                font-size: 2.9rem;
                            }
                        }
                    }
                }
            }
            .modal {
                .close-btn {
                    right: 35px;
                    top: 45px;
                }
                .modal-content {
                    width: 85%;
                    top: 0px;
                }
            }
        }
    }
    .landing-register {
        .container {
            .card {
                .card-body {
                    .wrapper {
                        padding: 1.5rem !important;
                        h4.card-title {
                            line-height: 3rem !important;
                        }
                        .btn-register {
                            width: 100%;
                            font-size: 1.1rem;
                            margin-top: 20px;
                            margin-bottom: 20px;
                            .mdi-arrow-right-thin {
                                &::before {
                                    font-size: 1.45rem !important;
                                }
                            }
                        }
                    }
                    .blop {
                        top: -37%;
                        right: -95%;
                    }
                }
            }
        }
    }
    .landing-about {
        .container-fluid {
            .sklms-container {
                padding: 1.5rem !important;
                h4.sklms-text-title {
                    line-height: 3rem !important;
                    margin: 30px 0;
                }
            }
            .mission-container {
                height: 670px;
                .navigation-bar {
                    display: flex;
                    justify-content: center;
                    margin-left: 1.5rem;
                    margin-right: 1.5rem;
                }
                .navigation-bar a {
                    width: 100%;
                }
                .desc-container {
                    padding-left: 1.5rem;
                    padding-right: 1.5rem;
                }
            }
        }
    }
    .pydp-ppa {
        padding-top: 5rem;
        padding-bottom: 8rem;
        .container {
            padding-left: 1.5rem;
            padding-right: 1.5rem;
            .row-one {
                .container-title {
                    padding-left: 1.5rem !important;
                    padding-right: 1.5rem !important;
                    margin-bottom: 25px;
                    img.pydp-logo {
                        width: 45%;
                    }
                    h3.pydp-title {
                        font-size: 1.5rem;
                    }
                }
            }
            .container-image {
                .hover-container {
                    img {
                        width: 100%;
                    }
                    .text-overlay {
                        left: 0;
                    }
                }
            }
        }
        .dotted {
            top: 70px;
        }
    }
    .landing-announcement {
        .container-fluid {
            .card {
                .card-body {
                    h4.card-title { 
                        line-height: 3rem !important;
                    }
                    .mdi-message-alert-outline::before {
                        font-size: 3.60rem;
                    }
                    .card-hover {
                        p.mobile-announcement-desc {
                            font-size: 1rem;
                        }
                    }
                }
            }
        }
    }
    .technical-assistance {
        .container-fluid {
            .title-container {
                .header-text { 
                    font-size: 2.5rem;
                    line-height: 3rem;
                }
            }
            .counter-container {
                .hover-container {
                    height: 50vh;
                    h1.text-title {
                        font-size: 2.3rem;
                    }
                }
            }
        }
    }
    .landing-contact {
        .container {
            h4.text-greetings {
                line-height: 3rem !important;
            }
            .row {
                margin-left: 0;
                margin-right: 0;
                padding-left: 0 !important;
                padding-right: 0 !important;
                .form-container {
                    .card {
                        .card-body {
                            form {
                                label {
                                    font-size: 1rem !important;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
    .landing-footer {
        .footer-top {
            .container {
                padding-left: 1.5rem;
                padding-right: 1.5rem;
            }
            .app-brand-link {
                align-items: center;
                flex-direction: row;
                flex-wrap: wrap;
                justify-content: center;
            }
            .footer-logo-description {
                text-align: left;
            }
            .app-brand-logo {
                margin-bottom: 1rem;
                img {
                    width: 135px;
                }
            }
            .footer-text {
                font-size: 14px !important;
            }
            a.footer-link, h6.footer-title {
                font-size: 14px !important;
            }
            .footer-bg {
                top: 1036px !important;
                width: 100% !important;
            }
        }
    }
}

@media screen and (max-width: 376px) {
    section {
        padding-top: 4.5rem;
        padding-bottom: 5rem;
    }
    nav {
        .navbar-brand {
            .tf-icons {
                &::before {
                    font-size: 25px;
                }
            }
            .app-brand-logo {
                img {
                    width: 100%;
                }
            }
            .app-brand-text {
                font-size: 1.2rem;
            }
        }
    }
    .landing-slider {
        .carousel {
            .carousel-inner {
                .carousel-item {
                    img {
                        height: 40vh;
                    }
                }
            }
        }
        .card-action {
            .card-body {
                padding-top: 1rem;
                padding-bottom: 1rem;
                .card-text {
                    p.head {
                        font-size: 1.5rem;
                    }
                }
                .side-img-container {
                    .overlay {
                        top: 67%;
                        right: 38%;
                    }
                    .overlay-icon {
                        top: 67%;
                        right: 41%;
                    }
                }
            }
            .modal {
                .close-btn {
                    top: 75px;
                    font-size: 2.5rem;
                }
            }
        }
    }
    .landing-register {
        .container {
            padding: 0 !important;
            .card {
                .card-body {
                    .wrapper {
                        h4.card-title {
                            font-size: 2.1rem;
                        }
                    }
                    .blop {
                        top: -38%;
                        right: -115%;
                    }
                }
            }
        }
    }
    .landing-about {
        .container-fluid {
            .sklms-container { 
                h4.sklms-text-title { 
                    font-size: 2rem;
                }
            }
            .mission-container {
                .navigation-bar {
                    margin-top: 1.7rem;
                }
            }
        }
    }
    .pydp-ppa {
        .container {
        .row-one {
                .container-title {
                    img.pydp-logo {
                        width: 55%;
                        position: absolute;
                        opacity: 0.2;
                    }
                    h3.pydp-title {
                        font-size: 2rem;
                    }
                }
            }
            .container-image {
                .hover-container {
                    img {
                        margin-bottom: 10px;
                    }
                    .text-overlay {
                        font-size: 4rem;
                        top: -5px;
                        left: -5px;
                        transform: translate(1px, -1px);
                    }
                }
            }
        }
    }
    .landing-announcement {
        .container-fluid {
            padding: 0 !important;
            .card {
                .card-body {
                    h4.card-title {
                        font-size: 2rem;
                        line-height: 2.5rem !important;
                    }
                }
            }
        }
    }
    .technical-assistance {
        .container-fluid {
            .title-container { 
                .header-text {
                    font-size: 2.2rem;
                    line-height: 2.5rem;
                    .mdi-flag::before {
                        font-size: 3rem !important;
                    }
                }
            }
            .counter-container {
                .hover-container {
                    height: 40vh;
                    h1.text-title {
                        font-size: 2rem;
                    }
                }
            }
        }
    }
    .landing-contact{
        .container {
            h4.text-greetings {
                padding-left: 1.5rem;
                padding-right: 1.5rem;
                font-size: 2rem;
                line-height: 2.5rem !important;
            }
            p.text-message {
                margin-left: 1rem !important;
                margin-right: 1rem !important;
            }
            .form-container {
                padding-left: 0 !important;
                padding-right: 0 !important;
            }
            .card {
                .card-body {
                    h3.card-title {
                        font-size: 1.5rem;
                    }
                    form {
                        .row {
                            padding-left: 0 !important;
                            padding-right: 0 !important;
                            .col-sm-12,
                            .col-md-12 {
                                padding: 0 !important;
                            }
                        }
                    }
                }
            }
        }
    }
    .landing-footer {
        .footer-top {
            .footer-bg {
                top: 1086px !important;
            }
        }
        .footer-bottom {
            .footer-text {
                font-size: 14px !important;
            }
        }
    }
}

@media screen and (max-width: 320px) {
    section {
        padding-top: 4rem;
        padding-bottom: 4.5rem;
    }
    nav {
        .navbar-brand {
            .app-brand-logo {
                width: 7%;
            }
            .app-brand-text {
                font-size: 1rem !important;
                padding-left: 0 !important;
            }
        }
    }
    .landing-slider {
        .card-action {
            .card-body {
                .side-img-container {
                    .side-img {
                        width: 90%;
                        display: block;
                        left: -12px;
                    }
                    .overlay-icon {
                        top: 75%;
                        right: 39%;
                    }
                }
            }
            .modal {
                .close-btn {
                    top: 70px;
                    right: 20px;
                }
                .modal-content {
                    top: -25px;
                    width: 90%;
                }
            }
        }
    }
    .landing-register {
        .container {
            padding: 0;
        }
    }
    .landing-about {
        .container-fluid {
            .mission-container {
                .nyc-logo-wrapper {
                    img {
                        width: 100%;
                    }
                }
            }
            
        }
    }
    .pydp-ppa {
        .container {
            .row-one {
                .container-title {
                    img.pydp-logo {
                        width: 65%;
                    }
                    h3.pydp-title {
                        font-size: 2rem;
                    }
                }
            }
        }
    }
    .landing-announcement {
        .container-fluid {
            .card {
                .card-body {
                    .mdi-message-alert-outline::before {
                        font-size: 3.5rem;
                    }
                    h4.card-title {
                        font-size: 1.7rem;
                    }
                    p.card-sub-title {
                        font-size: 1rem;
                    }
                }
            }
        }
    }
    .technical-assistance {
        .container-fluid {
            .counter-container {
                .hover-container {
                    height: 35vh;
                    p.text-overlay {
                        font-size: 4.5rem;
                    }
                }
            }
        }
    }
}