/* Global Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    overflow-x: initial;
}
/* General Body Styling */
body {
    font-family: Arial, sans-serif;
    background: #111;
    color: #fff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding-bottom: 200px;
}
p {
    font-size: 20px;
}
iframe{
    width:100%;
    height:600px;
}
/* Header Section */
header {
    width: 100%;
    padding: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}

/* Navigation Styling */
nav ul {
    display: flex;
    justify-content: center;
    align-items: center;
    list-style: none;
    gap: 7rem;
    width: 100%;
    flex-wrap: nowrap;
    overflow: visible;
}

/* Dropdown Menu Styles */
nav ul li.dropdown {
    position: relative;
}

/* Dropdown Link Styles */
nav ul li.dropdown > a {
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.2rem;
    position: relative;
    display: inline-block;
    transition: color 0.3s ease;
}


/* Dropdown Content Visibility */
nav ul li.dropdown .dropdown-content {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: 100%;
    left: -20%;
    background-color: rgba(17, 17, 17, 0.97);
    border-left: 1px solid #fff;
    border-right: 1px solid #fff;
    border-bottom: 1px solid #fff;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    min-width: 180px;
    padding: 0;
    margin: 0;
    transform: translateY(-10px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0.3s;
    overflow: hidden;
    display: block;
    z-index: 999;
    width: auto;
}

/* Show Dropdown on Hover */
nav ul li.dropdown:hover .dropdown-content {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s linear 0s;
}

/* When hovering over the parent, fade the parent */
nav ul li.dropdown:hover > a {
    opacity: 50%; 
}

/* Remove Underline from Dropdown Links */
nav ul li.dropdown a::after {
    display: none;
}

/* Dropdown Item Styles */
nav ul li.dropdown .dropdown-content li {
    display: block;
    width: 100%;
}

/* Dropdown Link Styling */
nav ul li.dropdown .dropdown-content li a {
    color: #fff;
    font-weight: lighter;
    font-size: 1.2rem;
    display: block;
    padding: 10px 10px;
    transition: 0.3s ease;
}

/* Hover Effect for Dropdown Links */
nav ul li.dropdown .dropdown-content li a:hover {
    background-color: #333;
}

/* Logo Styling */
nav ul li img.logo {
    width: 90px;
    opacity:100%;
    margin-right: 20px;
}

/* remove underline from logo*/
nav ul li a.logo-link:hover::after {
    display: none; 
}

/* Make logo opacity 170% on hover */
nav ul li a.logo-link:hover img.logo {
    opacity: 60%; 
}
/* General Navigation Link Styling */
nav ul li a {
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    font-size: 1.2rem;
    position: relative;
    transition: color 0.3s ease;
    min-width: 150px;
    white-space: nowrap;
    display: inline-block;
}

/* Underline Effect for Navigation Links */
nav ul li a::after {
    content: "";
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background-color: #fff;
    transition: width 0.3s ease;
}

/* Hover Effect on Navigation Links */
nav ul li a:hover::after {
    width: 100%;
}

/* Main Header Styling */
h1 {
    margin: 7rem 0;
    font-size: 2rem;
    color: #fff;
}

h2{
    margin-bottom: 20px;
}

/* Main Content Section */
main {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    margin-top: 80px;
    width: 100%;
    position: relative;
}

/* Intro Section Styling */
.intro-container {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    width: 100%;
    max-width: 1100px;
    min-width: 500px;
    padding: 0 60px;
}

/* Intro Text Styling */
.intro {
    max-width: 500px;
    min-width: 200px;
    width: 100%;
    padding: 10px;
    margin: -120px 70px 0 0;
    border-bottom: 1px solid #fff;
    border-bottom-right-radius: 5%;
    font-size: 1rem;
    text-align: left;
    overflow: hidden;
    box-sizing: border-box;
}

/* Intro Heading Styling */
.intro h2 {
    font-size: 1.8rem;
    font-weight: bold;
    color: #fff;
    margin-bottom: 15px;
}

/* Intro Paragraph Styling */
.intro p {
    line-height: 1.6;
    margin-bottom: 20px;
}

/* Button Styling */
.button {
    display: inline-flex;
    padding: 12px 25px;
    font-size: larger;
    font-weight: bold;
    color: #fff;
    text-decoration: none;
    background: transparent;
    position: relative;
    transition: color 0.3s ease;
    margin-top: 75px;
    margin-bottom: 50px;

}
.button-container{
    text-align: right;
}
/* Button Underline Effect */
.button::after {
    content: "";
    position: absolute;
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background-color: #fff;
    transition: width 0.3s ease;
}

/* Hover Effect for Button */
.button:hover::after {
    width: 100%;
}

/* Button Hover State */
.button:hover {
    color: #fff;
}

/* Image Styling */
.fotoface {
    width: 275px;
    border-radius: 10%;
    margin: -120px 0 -10px 250px;
    display: block;
    overflow: hidden;
}

/* ABOUT ME */
/* ABOUT ME */
/* ABOUT ME */
.page-title {
    text-align: center;
    margin-top: 150px;
    margin-bottom:100px;
}

/* Text Container */
.text-container {
    display: flex;
    flex-direction: column;
}

/* Text Left */
.text-left {
    display: flex;
    padding: 20px;
    gap: 250px;
    margin: 40px;
    align-items: center;
    border-bottom :1px solid #fff;
    border-bottom-left-radius: 10px;
}

.text-left h2 {
    font-size: 24px; 
    margin-bottom: 70px; 
}

.text-left p {
    font-size: 20px;
    line-height: 1.6;
    margin-top: 0;
    max-width: 400px;
    text-align: left;
}


.about-image, .cat-image {
    transition: transform 0.3s ease, opacity 0.3s ease;
    width: 300px;
    height: auto;
    border-radius: 20px;
    overflow: hidden;
}

.about-image:hover, .cat-image:hover {
    transform: scale(1.2) translateY(-30px);
    border-radius: 30px; /* Adjust border-radius on hover */
    border: 2px solid #111; /* Optional border on hover */
}

.text-right {
    display: flex;
    flex-direction: row-reverse;
    gap: 250px;
    padding: 20px;
    margin: 40px;
    align-items: center; 
    border-bottom :1px solid #fff;
    border-bottom-right-radius: 10px;
}

.hobbies-text {
    width: 60%;
    text-align: left;
    max-width: 400px;
}

.hobbies-text h2 {
    font-size: 24px;
    margin-bottom: 70px; 
    text-align: center;
}

.hobbies-text p {
    font-size: 20px;
    line-height: 1.6;
    margin-top: 0;
    max-width: 400px;
}


/* LEARNING OUTCOMES STYLING */
/* LEARNING OUTCOMES STYLING */
/* LEARNING OUTCOMES STYLING */
.skills {
    display: flex;
    justify-content: center;
    width: 80%;
    padding: 20px;
    padding-left: px;
    gap: 40px;
    flex-wrap: wrap;
}
.description-reversed{
    display: flex;
    width: 80%;
    min-width: 50%;
    padding: 20px;
    gap: 40px;
    align-items: center;
}
.description-section{
    min-width: 250px;
}
@media (max-width: 768px) {
    .description-reversed {
        flex-direction: column; /* Stack image and text on smaller screens */
        align-items: center;
    }
}
/* Layout and styling for the skills-section container */
.skills-section {
    flex-direction: column;
    align-items: flex start;
    width: 100%;
    max-width: 600px;
    margin: 0;
}

.skills-section > section {
    width: 100%;
    max-width: 500px;
    padding: 15px;
    margin: 20px 0;
    color: #ccc;
    text-align: left;
    overflow: visible;
    box-sizing: border-box;
    border-bottom: 1px solid #fff;
    border-bottom-right-radius: 10px;
}

/* Layout and styling for the proofs section */
.proofs {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 30px;
    width: 100%;
    max-width: 500px;
    min-width: 325px;
    position: relative;

}

/* Styling for images within the proofs section */
.proofs img {
    max-width: 100%;
    width: 100%;
    height: auto;
}

.proofs img.image1, .proofs img.image2, .proofs img.image3 {
    transition: transform 0.3s ease, border-radius 0.3s ease, border 0.1s ease; 
}

/* Hover effect for each image */
.proofs img.image1:hover, .proofs img.image2:hover, .proofs img.image3:hover {
    transform: scale(1.2); 
    border-radius: 30px; 
    border: 2px solid #111; 
}
/*Responsive Adjustments */

@media (max-width: 768px) {
 
    aside {
        flex-direction: column; 
        gap: 20px; 
        
    }

    .skills-section {
        width: 100%; 
        max-width: none; 
    }

    .proofs {
        width: 90%; 
        max-width: none; 
    }

    .text-left{
        gap: 20px;
    }
    .text-right{
        gap: 20px;
    }
}

@media (max-width: 768px) {
    /* Adjust Layout for Smaller Screens */
    .description {
        flex-direction: column;
        align-items: center;
    }

    /* Adjust layout for both sections (description and reversed) */
    .description-reversed {
        flex-direction: column;
        align-items: center;
    }

    .description-section, .works {
        flex: 1 1 100%;
        margin-bottom: 20px;
    }

    /* Additional adjustments for other sections like skills and proofs */
    .skills-section, .proofs {
        width: 100%;
    }

    .text-left, .text-right {
        gap: 20px;
    }
}
/* RECENT WORKS STYLING */
/* RECENT WORKS STYLING */
/* RECENT WORKS STYLING */
/* Layout and styling for the skills-section container */
.description-section {
    flex-direction: column;
    align-items: flex start;
    width: 100%;
    max-width: 600px;
    margin: 0;
}

.description-section > section {
    width: 100%;
    max-width: 500px;
    padding: 15px;
    margin: 20px 0;
    color: #ccc;
    text-align: left;
    overflow: visible;
    box-sizing: border-box;
    border-bottom: 1px solid #fff;
    border-bottom-right-radius: 10px;
}

/* Layout and styling for the proofs section */
.works {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: -10px;
    width: 100%;
    max-width: 500px;
    min-width: 325px;

}

/* Styling for images within the proofs section */
.works img {
    max-width: 100%;
    width: 100%;
    height: auto;
}

/* Additional styling for sketch images */
.image1 {
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    overflow: hidden;
    border-top: 2px solid #111;
    border-left: 2px solid #111;
    border-right: 2px solid #111;
}
.image2{
    border-left: 1px solid #111;
    border-right: 1px solid #111;
    overflow: hidden;
}
.image3 {
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
    overflow: hidden;
    border-bottom: 2px solid #111;
    border-left: 2px solid #111;
    border-right: 2px solid #111;
}
.image4 {
    border-radius: 30px;
    overflow: hidden;
    border-bottom: 2px solid #111;
    border-left: 2px solid #111;
    border-right: 2px solid #111;
}

.proofs-2 {
    display: flex;
    flex-direction: column;
    margin-top: 30px;
    width: 100%;
    gap: 50px;
    max-width: 800px;
    min-width: 325px;
    position: relative;

}

/* Styling for images within the proofs section */
.proofs-2 img {
    max-width: 100%;
    width: 100%;
    height: auto;
}

.proofs-2 img.image1, .proofs-2 img.image3 {
    transition: transform 0.3s ease, border-radius 0.3s ease, border 0.1s ease; 
}

/* Hover effect for each image */
.proofs-2 img.image1:hover, .proofs-2 img.image3:hover {
    transform: scale(1.2); 
    border-radius: 30px; 
    border: 2px solid #111; 
}
.works img.image1, .works img.image2, .works img.image3 {
    transition: transform 0.3s ease, border-radius 0.3s ease, border 0.1s ease; 
}
.proofs-3 {
    display: flex;
    flex-direction: column;
    margin-top: 30px;
    width: 100%;
    gap: 30px;
    max-width: 800px;
    min-width: 325px;
    position: relative;

}
.proofs-3 img {
    max-width: 100%;
    width: 100%;
    height: auto;
}

.proofs-3 img.image1, .proofs-3 img.image3 {
    transition: transform 0.3s ease, border-radius 0.3s ease, border 0.1s ease; 
}

/* Hover effect for each image */
.proofs-3 img.image1:hover, .proofs-3 img.image3:hover {
    transform: scale(1.2); 
    border-radius: 30px; 
    border: 2px solid #111; 
}
.works-1 {
    display: flex;
    flex-direction: column;
    margin-top: 30px;
    width: 100%;
    gap: 30px;
    max-width: 700px;
    min-width: 325px;
    position: relative;

}
.works-1 img{
    max-width: 100%;
    height: auto;
    border-radius: 30px;
}

.works-1 img.image4 {
    border-radius: 30px;
    transition: transform 0.3s ease, border-radius 0.3s ease, border 0.1s ease; 
}

/* Hover effect for each image */
.works-1 img.image4:hover {
    transform: scale(1.2) translateX(-40px);; 
    border-radius: 30px; 
    border: 2px solid #111; 
}
.works img.image1, .works img.image2, .works img.image3 {
    transition: transform 0.3s ease, border-radius 0.3s ease, border 0.1s ease; 
}

/* Hover effect for each image */
.works img.image1:hover, .works img.image2:hover, .works img.image3:hover {
    transform: scale(1.2); 
    border-radius: 30px; 
    border: 2px solid #111; 
}
#most-recent-work {
    
    border-radius: 30px;
    border: 1px solid #111; 
    margin-top: 100px;
    max-width: 975px;
    width: 100%;
    height: auto;
    overflow: hidden;

    
}
.recentwork{
margin-top: 50px;
margin-left: 10px;
margin-bottom: -50px;
text-align: left;
display: block; /* Ensure it respects block-level alignment */
}
.recentwork-link img {
    max-width: 800px; /* Initial size */
    opacity: 70%; /* Initial opacity */
    transition: transform 0.3s ease-out, opacity 0.3s ease-out; /* Set transition for both scaling and opacity */
}
a.recentwork-link:hover img.image2 {
    opacity: 100%;
    transform: scale(1.1); 
    transition: transform 0.3s ease, opacity 0.3s ease;
}

/*FOOTER STYLING*/
.footer {
    background-color:  rgba(230, 230, 230, 0); 
    filter: invert(100%);
    text-align: center;
    border: 1px solid rgb(0, 0, 0); 
    border-bottom: none;
    padding: 20px 0;
    border-radius: 20px 20px 0 0; 
    position: fixed;
    left: 0;
    bottom: 0px;
    width: 60%;
    left: 20%;
    right: 20%;

}
  
  .footer-icons {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 10px;
  }
  
  .footer-icons img.icon1, .footer-icons img.icon2, .footer-icons img.icon3 {
    width: 24px;
    height: 24px;
    transition: transform 0.3s ease; /* Smooth transition for scaling and color changes */
  }
  
  .footer-icons img.icon1:hover, .footer-icons img.icon2:hover, .footer-icons img.icon3:hover {
    transform: scale(1.3); /* Enlarge icon on hover */

  }
  
  .footer-text {
    color: #000;
    font-size: 14px;
  }