/* Base Styling */
* {
    margin: 0;
    padding: 0;
    font-family: Afacad Flux, serif;
}

html {
    scroll-behavior: smooth;
}

body {
    overflow-x: hidden; /* Prevent horizontal scrolling */
}

header {
    background-image: linear-gradient(#968f8f96, rgba(0, 0, 0, 0)), url(download.jpg);
    height: 100vh;
    background-size: cover;
    background-position: center;
}

/* Navbar */
.main {
    position: sticky;
    top: 0;
    z-index: 1000;
    background-color: rgba(141, 108, 116, 0.6); /* Semi-transparent */
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    height: 80px;
}

ul {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
}

ul li {
    margin: 0 10px;
}

ul li a {
    text-decoration: none;
    color: #fff;
    font-size: 18px;
    padding: 5px 10px;
    transition: color 0.5s ease, background-color 0.3s ease;
}

ul li a.active {
    color: #000;
    background-color: #fff;
    border-radius: 5px;
}

ul li a:hover {
    color: #000;
}
/* Section Title Styling */
.title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.title h1 {
    text-align: center;
}

.typewrite {
    font-size: 70px; /* Adjust size for visibility */
    color: #fff;
    white-space: nowrap; /* Prevent line breaks */
    overflow: hidden; /* Hide overflowing text */
    border-right: 2px solid #fff; /* Add a cursor effect */
    display: inline-block;
    animation: typing 2s steps(20, end), blink-caret 0.6s step-end 2s forwards;
}

@keyframes typing {
    from { width: 0; } /* Start with no text */
    to { width: 70%; } /* Expand to full text width */
}

@keyframes blink-caret {
    from, to { border-color: transparent; }
    50% { border-color: white; }
}

.title h2 {
    color: #fff;
    font-size: 40px;
    text-align: center;
}

/* Sections */
section {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
    text-align: center;
    box-sizing: border-box;
    scroll-margin-top: 0px;
}

.section-title {
    font-size: 3rem;
    font-weight: bold;
    margin-bottom: 20px;
    color: inherit;
}

.section-content {
    font-size: 1.2rem;
    line-height: 1.6;
    max-width: 600px;
}

/* About Section Content */
.about-content {
    display: flex; /* Use flexbox for image and text layout */
    flex-direction: column; /* Default to column layout */
    align-items: center; /* Center content horizontally */
    gap: 20px; /* Space between image and text */
    text-align: center; /* Center text content */
}

.about-image {
    width: 350px; /* Adjust image size */
    height: 350px; /* Maintain aspect ratio */
    /* border-radius: 100%; Circular image */
    object-fit: cover; /* Ensure the image scales properly */
    border: 3px solid #000000; /* Optional: Add a border around the image */
}

/* Section Background Colors */
#about {
    background-color: #e7d3d8;
    color: #000000;
}

#projects {
    background-color: #e7d3d8;
    color: #000000;
}

#contact {
    background-color: #e7d3d8;
    color: #000000;
}

/* Buttons */
.button {
    position: absolute;
    top: 70%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.btn {
    padding: 10px 30px;
    color: #fff;
    text-decoration: none;
    transition: 0.8s ease;
}

.btn:hover {
    color: #000;
}

/* General Mobile Adjustments for Smaller Screens */
@media only screen and (max-width: 768px) {
    body {
        font-size: 14px; /* Adjust the base font size */
    }
    
    section {
        scroll-margin-top: 0px; /* Matches the smaller navbar height */
    }

    .section-title {
        font-size: 2rem; /* Reduce title size */
        margin-bottom: 15px;
    }

    .section-content {
        font-size: 1rem; /* Adjust text size for readability */
        line-height: 1.4;
        max-width: 90%; /* Ensure content spans available width */
    }

    header {
        height: 95vh; /* Reduce landing page height */
        background-size: cover;
    }

    .typewrite {
        font-size: 50px;
      }
      
    .title h2 {
        font-size: 25px; /* Adjust landing page title size */
    }

    .button {
        top: 70%; /* Adjust button position */
    }

    .btn {
        padding: 8px 10px; /* Adjust button padding */
        font-size: 0.9rem; /* Adjust button text size */
    }

	.about-content {
        flex-direction: column; /* Stack image and text vertically */
        gap: 15px; /* Reduce spacing between elements */
    }

    .about-image {
        width: 120px; /* Smaller image for smaller screens */
        height: 120px;
    }
}

/* Specific Adjustments for Very Small Screens (e.g., iPhone SE) */
@media only screen and (max-width: 413px) {
    .main {
        height: 50px; /* Adjust navbar height */
    }

    ul li a {
        font-size: 15px; /* Adjust navbar link size */
        padding: 5px 8px; /* Adjust link padding */
    }

    .section-title {
        font-size: 3rem; /* Further reduce title size */
    }

    .section-content {
        font-size: 1.2rem; /* Adjust content text size */
    }

    .button {
        top: 70%; /* Further adjust button position */
    }
}