/* Main Containers */


    /* Centers in Window */

    .experience-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 */
    .experience-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;
    }

    .card-side {
        grid-column: 1;
        grid-row: 1;
    }
    
    @keyframes float {
        0% { transform: translateY(0) rotateY(25deg); }
        50% { transform: translateY(-30px) rotateY(25deg); } /* Adjust rotation slightly */
        100% { transform: translateY(0) rotateY(25deg); }
    }
    
      
    .floating-card {
        width: 400px;
        height: 215px;
        perspective: 1200px;
        animation: float 6s infinite ease-in-out;
        cursor: pointer;
    }
    
    .card-inner {
        width: 100%;
        height: 100%;
        position: relative;
        transform-style: preserve-3d;
        transition: transform 0.6s;
        transform: skew(5deg);
    }

    .card-front, .card-back {
        width: 100%;
        height: 100%;
        position: absolute;
        backface-visibility: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        background: #EBEFF3;
        border-radius: 30px;
        font-family: Arial, sans-serif;
        z-index: 5;
    }

    .card-front::before,
    .card-back::before {
        content: "";
        position: absolute;
        inset: 0; /* Covers the whole card */
        border-radius: 22px;
        box-shadow: inset -100px 0 100px rgba(0, 0, 0, 0.3); /* Shadow on the right side */
        pointer-events: none;
        z-index: 2;
    }
    
    .card-front img {
        width: 100%;
        z-index: 1;
    }

    .card-back img {
        width: 60%;
        z-index: 1;
    }
    
    .card-back {
        transform: rotateY(180deg);
        flex-direction: column;
        text-align: center;
        font-size: 14px;
    }

    /* 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; }
    }

    .card-side .gradient-shadow {
        top: 300px;
        position: absolute;
        width: 600px;
        height: 100px;
        left: -40px;
        
        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;
    }

    .experience-main .text-side h2 {
        font-weight: 400;
    }

    .text-side a {
        text-decoration: underline;
        color: white;
    }
    
    .text-side a:visited {
        color: white; /* Keeps it white even after clicking */
    }
    
    .text-side a:hover {
        color: white; /* Ensures no color change on hover */
    }
    
    .text-side a:active {
        color: white; /* Ensures no color change when clicked */
    }

    .text-side h1, .text-side h2 {
        display: inline;
        margin: 0; /* Removes extra spacing */
    }

    .experience-main .arrow {
        grid-column: 2;
        grid-row: 1;
        top: 320px;
        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);
        left: calc(50% + 20px);
    }

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



/* Responsivity of Main */


    /* Reposition for tablet */

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

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

        .floating-card {
            scale: 80% !important;
            position: relative;
            z-index: 15;
        }

        .card-side .gradient-shadow {
            scale: 80%;
            top: 300px;
        }
        
        .text-side {
            max-width: 250px;
        }

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

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

        .see-more {
            top: 350px;
            font-size: 33px;
        }

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


    /* Reposition for mobile */

      @media (max-width: 750px) {

        .card-side {
            display: contents;
        }

        .floating-card {
            height: 129px;
            width: 240px;
            grid-row: 3 !important;
            justify-self: center !important;
            position: relative;
            top: -15px;
            padding-top: 50px;
            padding-bottom: 20px;
            grid-column: 1;
            z-index: 15;
        }

        .card-front, .card-back, .card-inner {
            border-radius: 11px !important;
        }
        .card-front::before,
        .card-back::before {
            border-radius: 11px;
        }

        .card-side .gradient-shadow {
            grid-row: 3 !important;
            grid-column: 1;
            top: auto;
            align-self: end; /* aligns to bottom of the grid row */
            width: 340px;
            height: 60px;
            justify-self: center !important;
            bottom: auto;
            left: auto;
            position: relative;
            z-index: 5;
        }

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

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

        .experience-main .text-side h2 {
            grid-row: 2;
            grid-column: 1 !important;
            text-align: center !important;
        }

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

        .experience-main .text-side p:nth-of-type(2) {
            top: auto;
            position: relative;
            align-self: end; /* aligns to bottom of the grid row */
        }

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

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

        .experience-main {
            display: grid;
            grid-template-columns: 1fr;
            grid-template-rows: auto 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); }
        }


      }