@media (max-width: 740px) {
    .section-1 {
        height: 100vh;
        width: 100%;
        background-image: url(/static/assets/backgrounds/section-1.svg);
        background-repeat: no-repeat, no-repeat;
        background-size: cover, 130%;
        background-position: center, 26% -40%;
        background-blend-mode: screen;
        box-sizing: border-box;
        position: relative;
        scroll-snap-align: start;
    }

    .section-1 > div {
        gap: 50px;
    }

    .intro-part {
        padding-top: 150px;
    }
    .intro-part > div {
        display: flex;
        flex-direction: column;
        gap: 10rem;
        justify-content: center;
        align-items: center;
        padding: 0 20px;
    }
    .intro-head {
        font-size: 26px;
    }
    .intro-desc {
        font-size: 12px;
    }
    .nav-menu {
        display: none !important;
    }
    #navbar {
        background-color: rgba(0, 0, 0, 0.261);
    }

    .section-3 {
        height: 90vh;
        background-image: url(/static/assets/backgrounds/section-3.svg),
            url(/static/assets/backgrounds/group.png);
        background-repeat: no-repeat, no-repeat;
        background-size: cover, 54%;
        background-position: center, 100% 100%;
        background-blend-mode: screen;
        box-sizing: border-box;
        position: relative;
        color: var(--color-text);
        scroll-snap-align: start;
        overflow-wrap: break-word;
        word-wrap: break-word;
        width: 100%;
        font-size: 20%;
    }

    .exploreOption {
        padding-top: 45% !important;
    }

    .intro-head-s3 {
        font-size: 26px;
        margin-bottom: 1rem;
    }
    .intro-desc-s3 {
        font-size: 12px;
    }

    .btn {
        width: 180px !important;
        height: 50px !important;
        font-size: 18px !important;
    }

    .section-2 {
        box-sizing: border-box;
        background-color: blue;
        height: 200vh;
        background-image: url(/static/assets/backgrounds/section-2-new.png);
        background-repeat: no-repeat;
        background-size: cover;
        position: relative;
        color: var(--color-text);
        font-family: "railway-m";
        scroll-snap-align: start;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .intro-head-s {
        font-size: 26px;
        text-align: center;
    }

    .intro-desc-s {
        font-family: "railway-lite";
        font-size: 12px;
    }
    .intro-part-s {
        width: 100%;
        /* height: 100%; */
        padding-top: 12px;
        color: var(--color-text);
    }
    .left > div:first-child {
        font-size: 18px;
        border-bottom: 1px solid white;
        margin-bottom: 20px;
    }
    .right > div:first-child {
        font-size: 18px;
        border-bottom: 1px solid white;
        margin-bottom: 20px;
    }
    .content-section {
        align-items: center;
        padding-top: 20px;
        font-size: 18px;
        font-family: "railway-lite";
    }
    .content-section > div {
        padding: 0;
        text-align: justify;
        font-size: 12px;
    }
    .info-images {
        width: 100%;
        height: 100%;
        flex-direction: column;
        gap: 100px;
    }
    .image-section {
        width: 100%;
        height: 20%;
        display: inherit;
    }
    .phi-img {
        width: 100%;
    }
    footer {
        height: 30vh;
        box-sizing: border-box;
        font-family: "railway-m";
        margin-top: 20px;
    }

    .footer-container{
        /* flex-wrap: wrap; */
    }
    .footer-container > div:nth-child(1){
        align-items: center;
        padding-left: 0;
    }

    .footer-container > div:nth-child(2){
        width: 50%;
        padding-left: 0;
    }

    .logo-b {
        height: 60%;
    }
    .left-content {
        padding-left: 30px;
        padding-right: 30px;
        padding-top: 0px;
        /* max-width: 800px; */
        width: 100%;
        display: flex;
        flex-direction: column;
        flex-grow: 1;
        flex-shrink: 0;
    }
    .footer-container {
        display: flex;
        color: var(--color-text);
        justify-content: space-between;
        height: 100%;
        font-size: 12px;
        align-items: center;
    }
    .footer-container > div {
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: start;
    }
    .know-more-button:hover {
        background-color: #7b46d1; /* A slightly darker purple on hover */
        scale: 1.2;
    }
    .btn {
        width: 350px;
        height: 100px;
        font-size: 18px;
        font-family: "railway-lite";
        margin-top: 30px;
    }
    .phi-img {
        width: 60%;
        scale: 1;
        transition: scale 0.4s ease;
    }

    .phi-logo-f{
        height: 110px;
        width: 70px;
    }

    .modal-overlay {
        position: fixed;
        top: 50%;
        left: 50%;
        translate: -50% -50%;
        width: 90%;
        height: 90%;
        background: rgba(0, 0, 0, 0.5);
        display: none;
        justify-content: center;
        align-items: center;
        z-index: 1000;
        backdrop-filter: blur(5px);
        -webkit-backdrop-filter: blur(5px);
        border-radius: 4px;
        border: 1px solid rgba(255, 255, 255, 0.219);
        color: var(--color-text);
        box-sizing: border-box;
        padding: 10px;
        font-family: "railway-m";
    }

    .fancy-alert.fancy-alert__extended {
        width: 400px !important;
    }
    .fancy-alert .fancy-alert--words {
        font-size: 12px !important;
    }
}