/*-------------Fonts---------------------------------------*/
@import url('https://fonts.googleapis.com/css?family=Mukta:300,400,500,600,700,800|Teko:400,500,600,700&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');
        
        
        /* CSS variables based on the provided image design */
        :root {
            --primary-color: #363636; /* Deep Purple for headings */
            --accent-color: #ed2024;  /* Vibrant Magenta for quotes and highlights */
            --text-dark: #363636;
            --text-light-gray: #555;
            --bg-card: #ffffff;
            --font-serif: "Lato", sans-serif;
            --font-sans: "Lato", sans-serif;
        }

        /* body {
            font-family: var(--font-sans);
            line-height: 1.7;
            margin: 0;
            padding: 2em 1em;
            background: linear-gradient(135deg, #fdf6fa 0%, #f4f6fc 100%);
            color: var(--text-dark);
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            overflow-x: hidden;
        } */

        .profile-container {
            width: 100%;
            max-width: 1100px;
            margin: 0 auto;
        }

        .profile-main-title {
            font-family: var(--font-serif);
            font-size: 30px;
            color: var(--primary-color); 
            font-weight: 400;
            margin-bottom: 0.8em;
            padding-left: 0.5em;
            animation: fadeIn 1s ease-out 0.2s backwards;
        }


                .profile-card2 {
            /* background-color: var(--bg-card);
            border-radius: 20px;
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
            padding: 3em; */
            animation: floatUp 1.2s cubic-bezier(0.165, 0.84, 0.44, 1) 0.4s backwards;
        }


        .profile-card {
            /* background-color: var(--bg-card);
            border-radius: 20px;
            box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
            padding: 3em; */
            display: grid;
            /* grid-template-columns: 1fr 1.25fr;
            gap: 3em; */
             grid-template-columns: 0.3fr 1.25fr;
            gap: 0.5em;
            align-items: start;
            animation: floatUp 1.2s cubic-bezier(0.165, 0.84, 0.44, 1) 0.4s backwards;
        }

        /* --- Left Column --- */
        .profile-left-column {
            display: flex;
            flex-direction: column;
            align-items: center;
            animation: fadeIn 1s ease-out 0.8s backwards;
        }

        .profile-image-wrapper {
            position: relative;
            margin-bottom: 2em;
        }

        .profile-image {
            width: 180px;
            height: 180px;
            border-radius: 50%;
            object-fit: cover;
            border: 4px solid #fff;
            box-shadow: 0 0 25px 8px rgb(0, 0, 128, 0.15);
            display: block;
            transition: box-shadow 0.3s ease;
        }

        .profile-image:hover {
            box-shadow: 0 0 35px 12px rgba(0, 0, 128, 0.25);
        }
        
        .profile-story h3 {
            font-family: var(--font-serif);
            color: var(--primary-color);
            font-size: 1.5em; 
            font-weight: 500;
            margin-bottom: 10px; 
            text-align: left;
        }

        .profile-story p {
    color: #363636;
    font-size: 16px;
    text-align: justify;
    line-height: 24px;
    margin-bottom: 10px;
        padding-bottom: 0;
        }

        /* --- Right Column --- */
        .profile-right-column {
            display: flex;
            flex-direction: column;
        }

        .profile-name {
            font-family: var(--font-serif);
            font-size: 30px;
            color: var(--primary-color);
            margin: 0;
            line-height: 1.1;
                text-align: left;
            animation: fadeIn 1s ease-out 1s backwards;
        }

        .profile-subtitle {
            font-family: var(--font-sans);
            font-weight: 500;
            color: var(--accent-color);
            font-size: 1.1em;
            margin: 0.2em 0 0 0;
            animation: fadeIn 1s ease-out 1.2s backwards;
        }

        .separator {
            width: 80px;
            height: 2px!important;
            background: #ed2024;
            border: none;
            border-radius: 2px; 
            opacity: 1;
            margin-bottom: 10px;
            /* margin: 1.5em 0 2em 0; */
            animation: fadeIn 1s ease-out 1.4s backwards;
        }

        .profile-quote {
            border: 2px solid var(--accent-color);
            border-radius: 10px;
            padding: 1.5em 2em;
            margin: 0 0 1.5em 0;
            position: relative;
        }
        .profile-quote:nth-of-type(1) {
            animation: fadeIn 1s ease-out 1.6s backwards;
        }
        .profile-quote:nth-of-type(2) {
            animation: fadeIn 1s ease-out 1.8s backwards;
        }

        .profile-quote p {
            margin: 0;
            font-family: var(--font-sans);
            font-size: 1em;
            color: var(--text-light-gray);
            font-style: italic;
        }
        
        .profile-quote::before,
        .profile-quote::after {
            font-family: var(--font-serif);
            color: var(--accent-color);
            font-size: 6em;
            line-height: 1;
            position: absolute;
            opacity: 0.8;
        }

        .profile-quote::before { content: '“'; top: -0.2em; left: -0.05em; }
        .profile-quote::after { content: '”'; bottom: -0.5em; right: 0.05em; }
        

        /* --- Animation Keyframes --- */
        @keyframes floatUp {
            from { opacity: 0; transform: translateY(50px); }
            to { opacity: 1; transform: translateY(0); }
        }

        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }


        /* --- Responsive Design --- */
        @media (max-width: 992px) {
            .profile-card {
                grid-template-columns: 1fr;
                gap: 0.5em;
                padding: 0em;
            }

            .profile-left-column,
            .profile-right-column {
                align-items:start;
                text-align: left;
            }
            
            .profile-main-title {
                text-align: center;
                padding-left: 0;
                font-size: 2.5em;
            }

            .separator {
                /* margin-left: auto;
                margin-right: auto; */
            }

            .profile-story {
                text-align: center;
            }
            /* Align story text left even on small screens for better readability if desired */
            .profile-story p {
                text-align: left;
            }
        }
        
        @media (max-width: 576px) {
            body { padding: 1em; }
            .profile-card { padding: 0em; 
            gap: 0.5em;
         }
            .profile-main-title { font-size: 2em; }
            .profile-image { width: 150px; height: 150px; }
            .profile-name { 
                font-size: 26px;
        line-height: 35px; 
    }
            .profile-subtitle { font-size: 1em; }
            .profile-quote { padding: 1.2em 1.5em; }
            .profile-quote p { font-size: 0.9em; }
            .profile-quote::before,
            .profile-quote::after { font-size: 5em; }


.profile-image-wrapper {
    margin-bottom: 0.5em;
}

section {
    padding: 40px 0;
}

.profile-story h3 {
    margin-top: 15px;
}

        }