.first-section {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-top: 100px;
    padding: 20px;

    .square {
        min-width: 500px;
        height: 670px;
        border: 1px solid #fff;
        backdrop-filter: blur(56px);
        box-shadow: 0px 0px 75px 0px #FFFFFF80;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        padding: 30px;
        transition: 0.3s;

        .heading {
            font-size: 40px;
            font-weight: 500;
            text-align: center;
            width: 600px;
            height: 120px;
        }

        .text {
            font-size: 24px;
            font-weight: 500;
            text-align: center;
            display: flex;
            flex-direction: column;
            gap: 30px;
            width: 600px;
            line-height: 40px;
            height: 260px;
            font-weight: 400;
        }

        .square-button {
            width: 330px;
            height: 75px;
            background: #9ACBC9;
            border-radius: 40px;
            backdrop-filter: blur(56px);        
            box-shadow: 0px 5.33px 16px 0px #0000001A;
            box-shadow: 4px 4px 4px 0px #FFFFFF40 inset;
            font-size: 24px;
            font-weight: 600;
            border: 0px;
            text-decoration: none;
            display: flex;
            justify-content: center;
            align-items: center;
            transition: 0.2s;

            @media(hover:hover) {
                &:hover {
                    scale: 1.02;
                }
            }
        }

        &.left-square {
            background-color: #FFFFFF;
            border-radius: 45px 0px 0px 45px;

            .heading, .text {
                text-shadow: 0px 5.33px 5.33px #00000040;
                color: #313131;
            }
        }

        &.right-square {
            backdrop-filter: blur(56px);
            border-radius: 0px 45px 45px 0px;
            box-shadow: 0px 0px 73.33px 0px #FFFFFF80;
            background: linear-gradient(144.53deg, rgba(255, 255, 255, 0) 7.25%, rgba(255, 255, 255, 0.56) 95.62%);

            .heading, .text {
                text-shadow: 2.67px 2.67px 5.33px #00000040;
                color: #fff;
            }
        }
    }
}

@media (max-width: 1366px) {
    .first-section {
        .square {
            min-width: unset;
            max-width: 600px;
            width: 100%;
            height: 500px;

            img {
                width: 120px;
                height: 120px;
            }

            .heading {
                font-size: 30px;
                width: 100%;
                max-width: 450px;
                height: 80px;
            }

            .text {
                font-size: 18px;
                width: 100%;
                max-width: 500px;
                gap: 10px;
                height: 175px;
            }

            .square-button {
                font-size: 18px;
                width: 250px;
                height: 55px;
            }
        }
    }
}

@media (max-width: 1024px) {
    .first-section {
        flex-direction: column;

        .square {
            &.left-square {
                border-radius: 45px 45px 0px 0px;
            }
            &.right-square {
                border-radius: 0px 0px 45px 45px;
            }
        }
    }
}

@media (max-width: 768px) {
    .first-section {
        margin-top: 40px;
        
        .square {
            max-width: 350px;
            height: 300px;
            padding: 15px 10px;

            img {
                height: 65px;
                width: 65px;
            }

            .heading {
                font-size: 18px;
                height: auto;
                line-height: 21px;
            }
            .text {
                font-size: 13px;
                height: auto;
                line-height: 21px;
                gap: 0px;
            }
        }
        .square-button {
            width: 225px;
            font-size: 16px;
            height: 50px;
        }
    }
}