/* Main Containers */


    /* Centers in Window */

    .about-main-wrapper {
        display: flex;
        justify-content: center;   /* Centers horizontally */
        align-items: center;       /* Centers vertically */
        min-height: 100vh;
        overflow-x: hidden;
    }


    /* Shows Content */
    .main-container {
        display: block;
    }




/* Main About Section */
    .about-main {
        display: grid;
        grid-template-columns: .75fr 1fr; /* Two columns*/
        grid-template-rows: 1fr;
        align-items: center; /* Align items vertically */
        justify-content: center; /* Center everything horizontally */
        gap: 40px; /* Space between columns */
        padding: 50px;
        width: min(100%, 1067.35px);        
        height: fit-content;
        margin: auto;
        position: relative;
        top: 0px;
    }

    .polaroid-side {
        grid-column: 1;
        grid-row: 1;
    }
    
    /*Floating animation for polaroid*/
    @keyframes float {
        0% { transform: translateY(0) rotate(0deg); }
        50% { transform: translateY(-30px) rotate(1deg); } /* Moves up */
        100% { transform: translateY(0) rotate(0deg); }
    }
      
    .polaroid {
        width: 500px;
        z-index: 3;
        animation: float 6s ease-in-out infinite;
        grid-row: 1;
    }

    /* Bouncing animation for shadow*/
    @keyframes shadowScale {
        0% { transform: scale(1); opacity: 0.5; }
        50% { transform: scale(0.85); opacity: 0.3; } /* Smaller shadow when floating up */
        100% { transform: scale(1); opacity: 0.5; }
    }

    .polaroid-side .gradient-shadow {
        top: 450px;
        position: absolute;
        width: 500px;
        height: 100px; /* Adjust as needed */
        
        background: radial-gradient(ellipse at center, 
            rgba(0, 0, 0, 0.742) 30%, /* Fully opaque in the center */
            rgba(28, 38, 48, 0) 50%  /* Gradually fades out towards edges */
        );
    
        pointer-events: none; /* Prevents interactions */
        z-index: 1; /* Ensures it's above the avatar */
        animation: shadowScale 6s ease-in-out infinite;
        animation-delay: -.2s; /* This delay ensures shadow is synced with float */
    }

    .text-side {
        grid-column: 2;
        grid-row: 1;
    }


    /* Text customization*/
    .text-side p {
        font-size: 21px;
        -webkit-font-smoothing: antialiased; /* Helps make text look thinner */
        -moz-osx-font-smoothing: grayscale; /* Optimizes for macOS */
        line-height: 1.2;
        grid-row: 1;
    }

    .about-main .arrow {
        grid-column: 2;
        grid-row: 1;
        top: 540px;
        position: absolute;
        cursor: pointer; /* Changes the cursor to a hand when hovering */
        grid-row: 1;
        justify-self: center !important;
        transform: translateX(-110px) scale(0.9);
    }

    .see-more {
        grid-column: 2;
        font-size: 40px;
        grid-row: 1;
        top: 520px;
        grid-row: 1;
        position: absolute;
        justify-self: center !important;
        transform: translateX(20px) rotate(12deg); /* Shift slightly left */
    }



/* Responsivity of Main */


    /* Reposition for tablet */

    @media (min-width: 750px) and (max-width: 1028px) {

        .polaroid-side {
            justify-content: center !important;
        }

        .polaroid {
            width: 350px;
        }

        .polaroid-side .gradient-shadow {
            width: 350px;
            top: 300px;
        }

        .text-side h1 {
            font-size: 28px;
        }

        .text-side p {
            font-size: 18px;
        }

        .see-more {
            top: 400px;
            font-size: 35px;
        }

        .about-main .arrow {
            top: 415px;
            transform: scale(0.7) translateX(-120px);
        }
    }


    /* Reposition for mobile */

      @media (max-width: 750px) {

        .polaroid-side {
            display: contents;
        }

        .polaroid {
            width: 250px;
            grid-row: 2 !important;
            justify-self: center !important;
            position: relative;
            top: -15px;
        }

        .polaroid-side .gradient-shadow {
            grid-row: 2 !important;
            top: 145px;
            width: 250px;
            justify-self: center !important;
        }

        .text-side {
            grid-column: 1;
            display: contents;
        }

        .about-main .text-side h1 {
            grid-row: 1;
            font-size: 26px !important; /* Minimum 25px, preferred dynamic size, max 35px */
            text-align: center !important;
        }

        .about-main .text-side p {
            grid-row: 3 !important;
            text-align: center !important;
            font-size: 14px !important; /* Minimum 18px, preferred dynamic size, max 28px */
            position: relative;
            top: -20px;
        }

        .about-main .arrow {
            grid-column: 1;
            grid-row: 4 !important;
            justify-self: center !important;
            left: auto;
            top: 5px;
            transform: translateX(-70px) scale(.6); /* Shift slightly left */
        }

        .see-more {
            grid-column: 1;
            grid-row: 4;
            justify-self: center !important;
            top: -5px;
            transform: translateX(20px) rotate(12deg); /* Shift slightly left */
            font-size: 30px;
        }

        .about-main {
            display: grid;
            grid-template-columns: 1fr;
            grid-template-rows: auto auto auto auto;
            gap: 0px;
        }

        @keyframes float {
            0% { transform: translateY(0) rotate(0deg); }
            50% { transform: translateY(-20px) rotate(1deg); } /* Moves up */
            100% { transform: translateY(0) rotate(0deg); }
        }


      }