/* General Styles */
body, html {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* Prevent horizontal scroll */
}

.container {
    width: 80%;
    margin: 0 auto;
}

/* Header */
header {
    background: url('different.jpg'); /* Semi-transparent background */
    padding: 1.875rem 0; /* 30px */
    position: relative;
    z-index: 1000; /* Ensure it stays above other content */
    transition: background 0.3s ease, box-shadow 0.3s ease; /* Smooth transition for background color and box-shadow */
}

header.sticky {
    position: fixed;
    top: 0;
    width: 100%;
    padding: 1.625rem 0; /* 26px */
    background: transparent; /* Darker background when sticky */
    box-shadow: 0 0.75rem 0.875rem rgba(0, 0, 0, 0.5), 0 0.25rem 0.75rem rgba(0, 0, 0, 0.5); /* 12px 14px, 4px 12px */
}

.scroll-down {
    border-bottom: none; /* Remove border when scrolling down */
}

.sticky {
    position: fixed;
    top: 0;
    width: 100%;
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.1); /* 2px 4px */
    animation: fadeInDown 0.4s;
}

/* Navigation */
nav {
    position: absolute;
    top: 50%;
    right: 10%;
    transform: translateY(-50%);
}

nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

nav ul li {
    display: inline;
    margin-left: 0.9375rem; /* 15px */
}

nav ul li a {
    text-decoration: none;
    color: white;
    font-size: 2.2rem; /* Increased font size */
    padding: 1.5rem 2.8rem; /* Increased padding for larger buttons */
    border-radius: 1.875rem; /* 30px */
    background: linear-gradient(135deg, #ff2d55, #343a40);
    transition: background-color 0.3s, color 0.3s;
    box-shadow: 0 0.25rem 0.375rem rgba(0, 0, 0, 0.1); /* 4px 6px */
    font-weight: bold;
    text-shadow: 0 0 0.3125rem rgba(52, 152, 219, 0.5); /* 5px */
}

nav ul li a:hover {
    background: linear-gradient(135deg, #ff4e50, #f9d423);
    color: white;
    transform: translateY(-0.1vw);
}

/* Sections */
section {
    display: none;
    padding: 3.125rem 0; /* 50px */
    background: url('nightforest.jpg') no-repeat center center/cover;
    color: #FFF9E3;
}

section .container {
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent black background */
    padding: 1.25rem; /* 20px */
    border-radius: 3.125rem; /* 50px */
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.2); /* 4px 8px */
    backdrop-filter: blur(2.5rem); /* 40px */
}

section h2 {
    text-align: center;
    margin-top: 0.0625rem; /* 1px */
    font-size: 1.25rem; /* 20px */
    margin-bottom: 1.25rem; /* 20px */
    padding-bottom: 0.625rem; /* 10px */
}

section h3 {
    text-align: center;
    margin-bottom: 1.25rem; /* 20px */
    font-size: 1.3125rem; /* 21px */
}

section h4 {
    margin-bottom: 1.25rem; /* 20px */
    font-size: 1.3125rem; /* 21px */
}

section p {
    text-align: centre;
    margin-bottom: 1.25rem; /* 20px */
    font-size: 1.0625rem; /* 17px */
    font-weight: bold;
}

/* Home Section */
#home {
    background: url('different.jpg') no-repeat center center/cover;
    color: white;
    text-align: center;
    padding: 6.25rem 0; /* 100px */
    position: relative;
}

.profile-pic1 {
    border-radius: 20%;
    padding: 0.0625rem 0; /* 1px 0px */
    display: block;
}

.profile-pic {
    border-radius: 0%;
    display: block;
}

/* Fancy Link */
.fancy-link {
    display: inline-block;
    padding: 0.6rem 1.5rem;
    background: linear-gradient(135deg, #ff2d55, #343a40);
    color: white;
    border-radius: 2rem;
    text-decoration: none;
    font-weight: 600;
    font-size: 1.1rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 0.5rem 1.2rem rgba(0, 0, 0, 0.2);
    max-width: 80vw;
    text-align: center;
    margin-top: 1vw;
}

.fancy-link:hover {
    background: linear-gradient(135deg, grey, #343a40);
    color: white;
    transform: translateY(-0.1vw);
}

/* Clock */
.clock-container {
    display: flex;
    flex-direction: column; /* stack vertically */
    align-items: center;     /* center horizontally */
    justify-content: center; /* center vertically if needed */
    padding: 0.1vw;
    margin-top: clamp(-5vw, 95%, -9.6vw); /* min, preferred, max */
    margin-bottom: clamp(1vw, 95%, 2vw); /* min, preferred, max */
    text-align: center;
}

.clock {
    font-size: 15vw;
    letter-spacing: 0.1em;
    background: rgba(28, 28, 28, 0.7);
    padding: 1rem 2rem;
    border-radius: 4rem;
    box-shadow: 0 0 1.25rem black; /* 20px */
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
    margin-top: 1.2vw;
    text-shadow: 0.125rem 0.125rem 0.3125rem rgba(0, 0, 0, 0.3); /* 2px 2px 5px */
    background-image: linear-gradient(to right, #f39c12, #e74c3c, #f1c40f); /* Sunset Colors */
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    backdrop-filter: blur(0.125rem); /* 2px */
    align-items: center;
}

.timezone {
    font-size: 5.2vw;
    font-family: 'Montserrat', sans-serif;
    font-weight: bold;
    margin-top: 1.2vw;
    letter-spacing: 0.1em;
    text-shadow: 0.125rem 0.125rem 0.3125rem rgba(0, 0, 0, 0.3); /* 2px 2px 5px */
    background-image: linear-gradient(to right, #f39c12, #e74c3c, #f1c40f); /* Sunset Colors */
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

/* Follow Me */
.follow-me {
    display: flex;
    align-items: center;
}

.follow-me p {
    margin-right: 0.625rem; /* 10px */
}

/* Home Buttons */
.home-buttons {
    position: absolute;
    top: 1vw; /* Approx 8% of typical height */
    right: 10vw;
    transform: translateX(-50vw); /* Adjust for center alignment */
    z-index: 999;
    display: flex;
    gap:4vw;
    justify-content: center;
    align-items: center;
}

.home-buttons button {
    margin: 0 1.5vw;
    padding: 0.7rem 1rem;
    font-size: 1.4rem;
    background: linear-gradient(135deg, #ff2d55, #343a40);
    color: #FBF6D9;
    border: none;
    gap:1vw;
    border-radius: 2rem;
    cursor: pointer;
    transition: background-color 0.3s ease;
    font-weight: bold;
    text-shadow: 0 0 0.3rem rgba(52, 152, 219, 0.5);
}

.home-buttons button:hover {
    background-color: transparent;
    color: white;
    box-shadow: 0 0.4rem 0.6rem rgba(0, 0, 0, 0.2);
    font-weight: bold;
    text-shadow: 0 0 1rem rgba(52, 152, 219, 0.8);
    transform: translateY(-0.1rem);
    transition: background-color 0.3s ease;
}

/* Flat Button */
.flat-button {
    padding: 1.2rem 2.4rem;
    margin: 1rem;
    border: none;
    border-radius: 1rem;
    background: linear-gradient(135deg, #ff2d55, #343a40);
    color: white;
    font-size: 1.4rem;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 0.4rem 1.5rem rgba(0, 0, 0, 0.2);
}

.flat-button:hover {
    background: linear-gradient(135deg, #ff4e50, #f9d423);
    transform: translateY(-0.2rem);
}

/* h1, h5 */
h1 {
    text-align: center;
    margin-top: 0.0625rem; /* 1px */
    font-size: 2.0625rem; /* 33px */
    margin-bottom: 1.25rem; /* 20px */
    padding-bottom: 0.625rem 0.625rem 0.625rem 1.875rem; /* 10px 10px 10px 30px */
}

h5 {
    text-align: center;
    margin-top: 0.0625rem; /* 1px */
    font-size: 1.8125rem; /* 29px */
    margin-bottom: 1.25rem; /* 20px */
    padding-bottom: 0.625rem 0.625rem 0.625rem 1.875rem; /* 10px 10px 10px 30px */
}

/* lists */
ul {
    list-style-type: disc; /* Change list style type to display bullet points */
    padding-left: 1.25rem; /* 20px */
}

li {
    font-size: 1.0625rem; /* 17px */
    font-weight: bold;
    margin-bottom: 0.625rem; /* 10px */
    line-height: 1.9; /* Adjust line height for better readability */
}

/* columns */
.left-column, .right-column {
    width: 48%;
    display: inline-block;
    vertical-align: top;
}

.left-column {
    margin-right: 2%;
}

.left-column ul, .right-column ul {
    list-style-type: disc; /* Change list style type to display bullet points */
    padding-left: 1.25rem; /* 20px */
}

.right-column ul li, .left-column ul li {
    padding-bottom: 0.3125rem; /* 5px */
}

/* footer */
footer {
    background-color: #f8f9fa;
    padding: 1.25rem 0; /* 20px */
    text-align: center;
    border-top: 0.0625rem solid #e9ecef; /* 1px */
}

/* animations */
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-1.25rem); /* -20px */
    }
    60% {
        transform: translateY(-0.9375rem); /* -15px */
    }
}

.bounce {
    animation: bounce 2s infinite;
}

.text-glow {
    color: #FBF6D9;
    font-weight: bold;
    text-shadow: 0 0 0rem rgba(0, 0, 0, 0.0); /* 0px */
    transition: text-shadow 0.1s;
}

.text-glow:hover {
    text-shadow: 0 0 0rem rgba(0, 0, 0, 0.0); /* 0px */
}

.hand-drawn-text {
    font-size: 1.1rem;
    font-weight: bold;
    position: relative;
    animation: jitter 1s ease-in-out infinite;
    padding: 0.625rem; /* 10px */
}

@keyframes jitter {
    0% {
        transform: translate(0, 0);
    }
    25% {
        transform: translate(-0.125rem, -0.125rem); /* -2px */
    }
    50% {
        transform: translate(0.125rem, 0.125rem); /* 2px */
    }
    75% {
        transform: translate(-0.125rem, 0.125rem); /* -2px */
    }
    100% {
        transform: translate(0, 0);
    }
}

.gradient-text {
    font-size: 1rem;
    font-weight: bold;
    background: linear-gradient(#FBF6D9, #FFE6E8, #B0CFDE);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: animate-gradient 5s linear infinite;
}

@keyframes animate-gradient {
    0% {
        background-position: 0%;
    }
    100% {
        background-position: 100%;
    }
}

.neon-text {
    font-size: 4rem;
    color: #fff;
    text-shadow: 0 0 0.625rem #00ff00, 0 0 1.25rem #00ff00, 0 0 1.875rem #00ff00, 0 0 2.5rem #00ff00, 0 0 3.125rem #00ff00, 0 0 3.75rem #00ff00, 0 0 4.375rem #00ff00; /* 10px, 20px, ... */
    animation: neon-glow 1s ease-in-out infinite alternate;
}

@keyframes neon-glow {
    from {
        text-shadow: 0 0 0.625rem #57FEFF, 0 0 1.25rem #57FEFF, 0 0 1.875rem #57FEFF, 0 0 2.5rem #57FEFF, 0 0 3.125rem #57FEFF, 0 0 3.75rem #57FEFF, 0 0 4.375rem #57FEFF;
    }
    to {
        text-shadow: 0 0 1.25rem #1B8A6B, 0 0 1.875rem #1B8A6B, 0 0 2.5rem #1B8A6B, 0 0 3.125rem #1B8A6B, 0 0 3.75rem #1B8A6B, 0 0 4.375rem #1B8A6B, 0 0 5rem #1B8A6B;
    }
}

.neon-text1 {
    font-size: 4rem;
    color: #fff;
    text-shadow: 0 0 0.625rem #00ff00, 0 0 1.25rem #00ff00, 0 0 1.875rem #00ff00, 0 0 2.5rem #00ff00, 0 0 3.125rem #00ff00, 0 0 3.75rem #00ff00, 0 0 4.375rem #00ff00;
    animation: neon-glow1 1s ease-in-out infinite alternate;
}

@keyframes neon-glow1 {
    from {
        text-shadow: 0 0 0.625rem #3EB489, 0 0 1.25rem #3EB489, 0 0 1.875rem #3EB489, 0 0 2.5rem #3EB489, 0 0 3.125rem #3EB489, 0 0 3.75rem #3EB489, 0 0 4.375rem #3EB489;
    }
    to {
        text-shadow: 0 0 1.25rem #22CE83, 0 0 1.875rem #22CE83, 0 0 2.5rem #22CE83, 0 0 3.125rem #22CE83, 0 0 3.75rem #22CE83, 0 0 4.375rem #22CE83, 0 0 5rem #22CE83;
    }
}

@keyframes float {
    0%, 100% {
        transform: translate(-50%, -50%) translateX(0);
    }
    50% {
        transform: translate(-50%, -50%) translateX(-1.25rem); /* -20px */
    }
}

.hover-effect {
    transition: transform 0.9s;
    margin-top: 0.5625rem; /* 9px */
}

.hover-effect:hover {
    transform: scaleX(1.1);
}

.hover-effect:hover1 {
    transform: scaleY(1.1);
}

.linkedin-icon {
    height: 2.5rem;
    width: 2.5rem;
}

/* Media Queries */
@media (max-width: 798px) {
    nav ul li a {
        font-size: 1.3rem;
        padding: 0.3125rem 0.4375rem; /* 5px 7px */
        border-radius: 1.625rem; /* 26px */
    }
}

@media (min-width: 769px) {
    nav ul li a {
        font-size: 1.3rem;
        padding: 0.3125rem 0.4375rem; /* 5px 7px */
        border-radius: 1.625rem; /* 26px */
    }
}

@media (max-width: 768px) {
    li {
        line-height: 2.0; /* Adjust line height for better readability */
    }

    .follow-me {
        flex-direction: column;
        align-items: center;
    }

    .follow-me p {
        margin-bottom: 0.625rem; /* 10px */
        margin-right: 0;
    }

    .profile-pic {
        display: none;
    }

    .menu li {
        margin-bottom: 0.9375rem; /* 15px */
    }

    header {
        font-size: 1.6rem; /* Reduce header font size on smaller screens */
        padding: 2.875rem 0; /* 46px */
    }

    header.sticky {
        padding: 2.875rem 0; /* 46px */
    }
}

@media (max-width:528px){
    .profile-pic1 {
        width: 12.8125rem; /* 205px */
        margin-left: 1.5625rem; /* 25px */
        height: 12.1875rem; /* 195px */
        left: 1%;
        padding: 0.0625rem 2.1875rem; /* 1px 35px */
        margin-top: -6.25rem; /* -100px */
    }
}

@media (max-width:728px){
    .profile-pic1 {
        width: 12.8125rem; /* 205px */
        margin-left: 1.25rem; /* 20px */
        height: 12.1875rem; /* 195px */
        left: 1%;
        padding: 0.0625rem 2.1875rem; /* 1px 35px */
        margin-top: -6.25rem; /* -100px */
    }

    .home-buttons {
        display:block;
        position: centre;
        font-size: 1.1875rem; /* 19px */
        padding: 0.5625rem 0.8125rem; /* 9px 13px */
        top: 88%; /* Adjust the distance from the top */
        left: 43%;
        transform: translateX(-50%);
        z-index: 999; /* Ensure the button is above other content */
    }
}

@media (min-width: 729px) and (max-width:1506px){
    .profile-pic1 {
        width: 7.8125rem; /* 125px */
        margin-left: 3.125rem; /* 50px */
        height: 7.1875rem; /* 115px */
        left: 1%;
        padding: 0.0625rem 2.1875rem; /* 1px 35px */
        margin-top: -5.625rem; /* -90px */
    }

    .profile-pic {
        margin-left: 12.5rem; /* 200px */
        padding: 0.0625rem 0.625rem; /* 1px 10px */
        margin-top: -5.625rem; /* -90px */
        width: 42.4375rem; /* 679px */
        height: 18.75rem; /* 300px */
    }

    .home-buttons {
        display:block;
        position: centre;
        font-size: 1.1875rem; /* 19px */
        padding: 0.5625rem 1.0625rem; /* 9px 17px */
        top: 88%; /* Adjust the distance from the top */
        left: 48%;
        transform: translateX(-50%);
        z-index: 999; /* Ensure the button is above other content */
    }
}

@media (min-width: 1506px) and (max-width:2154px){
    .profile-pic1 {
        width: 14.0625rem; /* 225px */
        margin-left: 3.4375rem; /* 55px */
        height: 12.1875rem; /* 195px */
        left: 1%;
        padding: 0.0625rem 0.9375rem; /* 1px 15px */
        margin-top: -5.625rem; /* -90px */
    }

    .profile-pic {
        margin-left: 21.875rem; /* 350px */
        padding: 0.0625rem 0.625rem; /* 1px 10px */
        margin-top: -5.625rem; /* -90px */
        width: 71.875rem; /* 1150px */
        height: 28.75rem; /* 460px */
    }

    .home-buttons {
        display:block;
        position: centre;
        font-size: 1.1875rem; /* 19px */
        padding: 0.5625rem 1.0625rem; /* 9px 17px */
        top: 90%; /* Adjust the distance from the top */
        left: 50%;
        transform: translateX(-50%);
        z-index: 999; /* Ensure the button is above other content */
    }
}