/* 
  Universal selector reset:
  - Sets border-box sizing model
  - Applies a default sans-serif font stack
*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: sans-serif;
}

/* 
  Base body styles:
  - Sets light blue background color
  - Dark gray text color
  - Small padding to prevent edge sticking
*/
body {
    background: #b8eef2;
    color: #0e0e0e;
    padding: 2px;
}

/* 
   HEADER STYLING
   */

/*
  Header container:
  - Full width with fixed height
  - Flex layout for horizontal alignment
  - High z-index ensures it stays above other content
  - Subtle shadow for depth
*/
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 70px;
    padding: 10px 20px;
    background: #aadccf;
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 9999;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* 
  Header link styles :
  - Blue-purple text color
  - No underline with medium font weight
  - Slide-in animation on page load
*/
.header a,
.headerName a {
    color: #1f1cacb2;
    text-decoration: none;
    font-size: 26px;
    font-weight: 600;
    margin: 0 15px;
    padding: 10px 15px;
    background: transparent;
    opacity: 1;
    animation: slideRight 1s ease forwards;
}

/* 
   name specific styles:
  - Slightly larger font size
  - Bold weight for emphasis
*/
.headerName a {
    font-size: 30px;
    font-weight: bold;
    margin-left: 20px;
    cursor: default;
    opacity: 0;
}

/* 
  Navigation link styles:
  - Blue text color
  - Staggered animations using CSS variables (--i)
  - Smooth color transitions on hover
*/

.nav a {
    display: inline-block;
    font-weight: 600;
    color: #0e77e0;
    text-decoration: none;
    font-size: 20px;
    margin: 0 15px;
    padding: 10px 15px;
    cursor: pointer;
    transition: color 0.3s ease, background-color 0.3s ease;
    opacity: 0;
    animation: slideTop 0.5s ease forwards;
    animation-delay: calc(var(--i) * 0.2s);
}

/* 
  Nav link hover states:
  - Darker text color
  - Custom styled underline effect
  - Slower transition for smooth effect
*/
.nav a:hover {
    color: #01080f;
    text-decoration: underline;
    text-underline-offset: 5px;
    text-decoration-color: rgb(2, 96, 27);
    text-decoration-thickness: 5px;
    transition: 1s ease;
}

/* 
   HOME SECTION STYLING
   section with personal introduction
    */

/*
  Home section container:
  - Uses viewport height for responsive sizing
  - Flex layout splits content and image
  - Padding creates breathing room
  - Margin-top accounts for fixed header
*/
.home {
    margin-top: 40px;
    position: relative;
    width: 100%;
    height: 80vh;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 70px 10% 0;
}

/* 
  Subheading styles:
  - Medium-large font size
  - Semi-transparent dark green color
  - Slide-up animation on load
*/
.home h3,
.home h3:nth-of-type(2) {
    font-size: 30px;
    font-weight: 700;
    color: #20331fb2;
    margin-bottom: 20px;
    opacity: 0;
    animation: slideBottom 1s ease forwards;
    animation-delay: 0.7s;
}

/* 
  Main heading styles:
  - Extra large font size for prominence
  - Bright blue color
  - Slide-in animation with delay
*/
.home h1 {
    font-size: 56px;
    font-weight: 700;
    color: #1231bb;
    margin: -3px 0;
    opacity: 0;
    animation: slideRight 1s ease forwards;
    animation-delay: 1s;
}

/* span within subheadings */
.home h3 span {
    color: #04534b;
    font-weight: 700;
}

/* 
  Introduction paragraph:
  - Light green background with padding
  - Blue text with shadow for contrast
  - rounded corners
  - Slide-in animation from left
*/
.home p {
    background: #99deb5;
    padding: 10px;
    border-radius: 10px;
    box-shadow: #003366 0px 0px 10px;
    font-size: 20px;
    font-weight: 500;
    color: #003366;
    opacity: 0;
    animation: slidLeft 1s ease forwards;
    animation-delay: 1s;
}

/* 
  Home image styles:
  - Slightly larger than container for visual impact
  - Cover sizing maintains aspect ratio
  - Zoom-in animation on load
*/
.homeImage img {
    width: 120%;
    height: 120%;
    object-fit: cover;
    border-radius: 10px;
    margin-right: auto;
    opacity: 0;
    animation: zoomIn 1s ease forwards;
    animation-delay: 2s;
}

/* 
   DOWNLOAD BUTTON STYLING
   Call-to-action button for CV download
    */

/*
  Download button styles:
  - Bright green background
  - Pill-shaped with full rounding
  - Shadow for depth
  - Slide-down animation
*/
.downloadButton {
    display: inline-flex;
    height: 55px;
    width: 270px;
    padding: 8px 28px;
    box-shadow: 0 2px 2px rgba(101, 82, 101, 0.1);
    background: rgb(92, 220, 109);
    color: #0b039eb2;
    font-size: 20px;
    font-weight: 800;
    text-decoration: none;
    letter-spacing: 1px;
    border-radius: 90px;
    overflow-x: hidden;
    z-index: 1;
    white-space: pre-wrap;
    border: 1px solid #70b2e4;
    cursor: pointer;
    position: relative;
    transition: background-color 0.3s ease, color 0.3s ease;
    opacity: 0;
    animation: slideTop 1s ease forwards;
    animation-delay: 2.3s;
}

/* 
  Button hover state:
  - Color inversion effect
  - Blue background with bright green text
*/
.downloadButton:hover {
    background-color: #037edd;
    color: #07f164;
    border-color: #05631d;
}

/* 
   ICONS
   Linked social media profiles
  */

/*
  Social media link container:
  - size icons
  - Horizontal spacing
  - Staggered animations
*/
.social_media a {
    display: inline-flex;
    width: 50px;
    height: 50px;
    background: transparent;
    text-decoration: none;
    justify-content: center;
    margin: 30px 10px;
    cursor: pointer;
    transition: 0.5s ease;
    opacity: 0;
    animation: slidLeft 1s ease forwards;
    animation-delay: calc(0.2s * var(--i));
}

/* 
  Social media icons:
  - Rounded square shape
*/
.social_media a img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20%;
    transition: transform 0.3s ease;
}

/* 
   SKILLS SECTION STYLING
   Technical and professional skills display
    */

/* Skills section container */
.skills {
    display: flex;
    flex-wrap: wrap;
    padding: 40px;
    margin-top: 30px;
}

/* Skills containers - technical and professional */
.skills_continer,
.container1 {
    width: 100%;
    max-width: 600px;
    padding: 40px 20px;
    margin: 0 auto;
    height: auto;
    box-sizing: border-box;
}

/* Section heading with decorative underline */
.heading {
    text-align: left;
    color: #1231bb;
    text-decoration: underline;
    text-decoration-line: solid;
    text-decoration-color: #06f459;
    text-decoration-thickness: 5px;
    text-underline-offset: 10px;
    margin-bottom: 50px;
}

/* Individual skill bar container */
.bar {
    font-size: 23px;
}

/* Technical skill bars group */
.Technical-bars .bar {
    margin-bottom: 30px 0;
}

/* Remove extra margin from first/last items */
.Technical-bars .bar:first-child {
    margin-top: o;
    /* Typo: should be 0 */
}

.Technical-bars .bar:last-child {
    margin-bottom: 0;
}

/* Skill name/label styling */
.Technical-bars .bar .info {
    margin-bottom: 5px;
}

.Technical-bars .bar .info span {
    font-size: 20px;
    font-weight: 600;
    animation: showText 0.5s 1s linear forwards;
    opacity: 0;
}

/* Base progress bar track */
.Technical-bars .bar .line {
    position: relative;
    height: 5px;
    width: 100%;
    border-radius: 10px;
    background-color: #06120a;
    animation: animate 1s cubic-bezier(1, 0, 0.5, 1) forwards;
    transform: scaleX(0);
    transform-origin: left;
}

/* Progress bar fill */
.Technical-bars .bar .line span {
    height: 100%;
    background-color: #0774d9;
    position: absolute;
    border-radius: 10px;
    animation: animate 1s 1s cubic-bezier(1, 0, 0.5, 1) forwards;
    transform: scaleX(0);
    transform-origin: left;
}

/* Skill-specific progress widths */
.line.html span {
    width: 20%;
}

.line.css span {
    width: 30%;
}

.line.java span {
    width: 50%;
}

.line.python span {
    width: 35%;
}

.line.excel span {
    width: 76%;
}

/* Percentage tooltip styling */
.line span::after {
    position: absolute;
    padding: 1px 8px;
    background-color: #c0d8f0;
    color: rgb(0, 0, 0);
    font-size: 12px;
    border-radius: 3px;
    top: -20px;
    right: -20px;
    animation: showText 0.5s 1.5s linear forwards;
    opacity: 0;
}

/* Skill-specific percentage values */
.line.html span::after {
    content: "20%";
}

.line.css span::after {
    content: "30%";
}

.line.java span::after {
    content: "50%";
}

.line.python span::after {
    content: "35%";
}

.line.excel span::after {
    content: "76%";
}

/* Tooltip pointer */
.line span::before {
    content: "";
    position: absolute;
    width: 0;
    border: 7px solid transparent;
    border-bottom-width: 0px;
    border-right-width: 0px;
    border-top-color: #76b609;
    top: -10px;
    right: 0;
    animation: showText 0.5s 1.5s linear forwards;
    opacity: 0;
}

/* Professional skills container */
.container1 {
    width: 600px;
    height: 500px;
    padding: 75px 100px;
    margin-left: 120px;
}

/* Professional skills heading */
.heading1 {
    text-align: center;
    color: #1231bb;
    text-decoration: underline;
    text-decoration-line: solid;
    text-decoration-color: #06f459;
    text-decoration-thickness: 5px;
    text-underline-offset: 10px;
    margin-bottom: 50px;
}

/* Circular progress bars container */
.radius {
    width: 100%;
    justify-content: space-evenly;
    display: block;
    height: 170px;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: flex-start;
}

/* Individual circular progress bar */
.radius .radical-bars {
    width: 50;
    height: 170px;
    margin-bottom: 10px;
    position: relative;
}

/* SVG container for circular progress */
.radius .radical-bars svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)rotate(-90deg);
    width: 120px;
    height: 160px;
}

/* Circular progress track */
.radius .radical-bars .progress {
    stroke-width: 10;
    stroke: black;
    fill: transparent;
    stroke-dasharray: 502;
    stroke-dashoffset: 502;
    stroke-linecap: round;
    animation: animate-bar 1s linear forwards;
}

/* Circular progress fill */
.path {
    stroke-width: 10;
    stroke: rgb(19, 162, 194);
    fill: transparent;
    stroke-dasharray: 502;
    stroke-dashoffset: 502;
    stroke-linecap: round;
}

/* Skill-specific progress animations */
.path1 {
    animation: animation-path1 1s 1s linear forwards;
}

.path2 {
    animation: animation-path2 1s 1s linear forwards;
}

.path3 {
    animation: animation-path3 1s 1s linear forwards;
}

.path4 {
    animation: animation-path4 1s 1s linear forwards;
}

/* Percentage text display */
.radical-bars .percentage {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 17px;
    font-weight: 500;
    animation: showText 0.5s 1s linear forwards;
}

/* Skill name label */
.radical-bars .text {
    width: 100%;
    position: absolute;
    text-align: center;
    left: 50%;
    bottom: -5px;
    transform: translateX(-50px);
    font-size: 17px;
    font-weight: 500;
    animation: showText 0.5s 1s linear forwards;
}

/* Professional skills section - alternative layout */


.radius {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
}

.radical-bars {
    width: 150px;
    position: relative;
}

/* SVG styling for circular progress */
svg {
    width: 150px;
    height: 150px;
    transform: rotate(-90deg);
}

.progress,
.path {
    fill: none;
    stroke-width: 15;
    stroke-linecap: round;
}

.progress {
    stroke: #eee;
}

/* Skill-specific path colors and animations */
.path1 {
    stroke: #1e90ff;
    stroke-dasharray: 502;
    stroke-dashoffset: 75;
    animation: fill1 2s ease forwards;
}

.path2 {
    stroke: #28a745;
    stroke-dasharray: 502;
    stroke-dashoffset: 150;
    animation: fill2 2s ease forwards;
}

.path3 {
    stroke: #ffc107;
    stroke-dasharray: 502;
    stroke-dashoffset: 175;
    animation: fill3 2s ease forwards;
}

.path4 {
    stroke: #dc3545;
    stroke-dasharray: 502;
    stroke-dashoffset: 175;
    animation: fill4 2s ease forwards;
}

/* Projects section styling */
.projects {
    padding: 90px;
}


/*
 EDUCATION SECTION
  */


/* Education section styling */
.education_section {
    width: 100%;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    margin-top: 150px;
    align-items: center;
}

.education {
    width: 90%;
    display: inline;
    margin-bottom: 30px;
    animation: fadeIn 0.8s ease both;
}

.education_container {
    position: relative;
    width: 100%;
    max-width: 90%;
    margin-left: 40px;
    border-left: 5px solid #1e90ff;
    padding: 20px 25px;
    margin-bottom: 30px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    border-radius: 8px;
    animation: fadeIn 0.8s ease both;
}

.education h1 {
    font-size: 30px;
    font-weight: 600;
    color: #1231bb;
    margin-bottom: 6px;
    padding-left: 40px;
}

.school-list {
    list-style-type: none;
    padding: 0;
}

.school {
    width: 90%;
    background: #89e3a7;
    margin: 20px 0;
    padding: 20px 30px;
    width: 91%;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.8s ease forwards;
    position: relative;
}

.school-name {
    font-size: 1.2rem;
    font-weight: bold;
    color: #003366;
}

.school-year {
    font-size: 0.95rem;
    color: #555;
    margin-top: 5px;
}

.award {
    font-size: 0.9rem;
    color: #333;
    margin-top: 5px;
}

/* Animated underline effect for education items */
.school::after {
    content: '';
    position: absolute;
    left: 30px;
    bottom: 15px;
    height: 3px;
    width: 0;
    background: #1e90ff;
    animation: drawLine 1s ease forwards;
    animation-fill-mode: forwards;
}

/* Staggered animations for education items */
.school:nth-child(1) {
    animation-delay: 0.3s;
}

.school:nth-child(1)::after {
    animation-delay: 0.6s;
}

.school:nth-child(2) {
    animation-delay: 0.6s;
}

.school:nth-child(2)::after {
    animation-delay: 0.9s;
}

.school:nth-child(3) {
    animation-delay: 0.9s;
}

.school:nth-child(3)::after {
    animation-delay: 1.2s;
}

/* Experience section styling */
.experience {
    width: 100%;
    padding: 40px;
}

.experience-container {
    position: relative;
    width: 100%;
    max-width: 80%;
    margin-left: 40px;
    padding: 20px 25px;
    margin-bottom: 30px;
    border-radius: 8px;
    animation: fadeIn 0.8s ease both;
}

.experience-container h2 {
    font-size: 30px;
    font-weight: 600;
    color: #1231bb;
    margin-bottom: 6px;
}

/* Experience item stylig */
.experience-class {
    background-color: #89e3a7;
    border-left: 5px solid #1e90ff;
    padding: 20px 25px;
    margin-bottom: 30px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    border-radius: 8px;
    position: relative;
    animation: fadeIn 0.8s ease both;
}

.experience-class h3 {
    margin: 0;
    color: #003366;
    font-size: 1.3rem;
}

.experience-class .company {
    font-weight: bold;
    color: #1e90ff;
    margin-top: 5px;
}

.experience-class .duration {
    font-size: 0.95rem;
    color: #555;
    margin-top: 3px;
}

.experience-class .details {
    font-size: 0.95rem;
    color: #333;
    margin-top: 10px;
    line-height: 1.6;
}


/* Projects section specific styling */
.project-title {
    font-size: 1.3rem;
    color: #003366;
    position: relative;
    width: 100%;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    animation: fadeIn 0.8s ease both;
}

.project-desc {
    margin: 10px 0;
}

.projects h2 {
    color: #1231bb;
}

.project-link {
    text-decoration: none;
    font-weight: bold;
    color: #1e90ff;
    margin-right: 10px;
}

.project-link:hover {
    text-decoration: underline;
}

.section-title {
    margin-left: 10px
}

.project {
    width: 90%;
    background-color: #89e3a7;
    border-left: 5px solid #1e90ff;
    padding: 20px 25px;
    margin-bottom: 30px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    border-radius: 8px;
    position: relative;
    animation: fadeIn 0.8s ease both;
    position: relative;
}

/*

/* CONTACT */

/* Contact form container */
.contact1 {
    width: 90%;
    max-width: 600px;
    margin: 50px auto;
    font-size: 20px;
    line-height: 1;
    text-align: center;
    padding: 20px;
    background-color: #94ebb7;
    border-radius: 10px;
    box-shadow: 0 5px 10px grey;
}

.contact1 h1 {
    text-align: center;
    margin-bottom: 20px;
}


/* FORM STYLE  */



/* Form input styling */
form input,
form textarea {
    display: block;
    width: 100%;
    margin-bottom: 10px;
    padding: 10px;
    border: none;
    border-radius: 5px;
    background-color: #e6e8ea;
    color: #01080f;
}

/* Form button styling */
form button {
    display: block;
    width: 100%;
    height: 20px;
    border: none;
    border-radius: 5px;
    color: #0b0c0b;
    background-color: rgb(60, 211, 211);
    cursor: pointer;
    transition: 0.3s ease;
}

form button:hover {
    background-color: rgb(36, 135, 135);
    color: rgb(244, 238, 238);
}

/* Contact section accent styles */
.contact_subtitle span {
    color: chocolate;
}

.contact_work {
    color: orangered;
    font-size: 20px;
    line-height: 30px;
    margin-bottom: 2rem;
}


/* Footer styling */
footer {
    padding: 5px;
    background: #87e8cf;
    text-align: left;
}

/*
   ANIMATION KEYFRAMES
   Reusable animations throughout the site
    */

@keyframes slideRight {
    from {
        transform: translateX(-100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideTop {
    from {
        transform: translateY(100%);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slideBottom {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes slidLeft {
    from {
        transform: translateX(100%);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes zoomIn {
    from {
        transform: scale(0.8);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}

@keyframes showText {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes animate {
    100% {
        transform: scaleX(1);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Animation that draws a line IN EDUCATION */
@keyframes drawLine {
    from {
        width: 0;
    }

    to {
        width: 80%;
    }
}







/* 
   RESPONSIVE DESIGN BREAKPOINTS
   Mobile-first responsive adjustments
    */

@media (max-width: 768px) {

    /* Stack header elements vertically on small screens */
    .header {
        flex-direction: column;
        height: auto;
        padding: 10px;
    }

    .headerName a {
        font-size: 22px;
    }

    .nav a {
        font-size: 16px;
        padding: 5px;
    }

    .education_section {
        width: 100%;
    }

    /* Adjust body padding to account for smaller header */
    body {
        padding-top: 50%;
    }

    .education_section {
        padding-top: 20%;
    }

    /* Stack skills sections vertically */
    .skills {
        flex-direction: column;
        align-items: center;
        margin-top: 0;
        padding: 0 15px;
    }

    .skills_continer,
    .container1 {
        width: 100%;
        max-width: 90%;
        padding: 60px 60px;
        margin: 0 auto;
    }

    .heading,
    .heading1 {
        font-size: 1.5rem;
        text-align: center;
    }

    /* Adjust circular progress bars for mobile */
    .radius {
        justify-content: center;
        gap: 20px;
        margin-top: 30px;
    }

    .radical-bars {
        width: 130px;
    }

    /* Adjust technical skill bars for mobile */
    .Technical-bars .bar {
        margin-bottom: 25px;
    }

    .Technical-bars .bar .info span {
        font-size: 16px;
    }

    .Technical-bars .bar .line span::after {
        font-size: 10px;
    }

    .Technical-bars .bar .line span::before {
        top: -8px;
        right: -8px;
    }

    .experience-item {
        padding: 15px 20px;
    }

    .experience-item h3 {
        font-size: 1.1rem;
    }
}