/* ===========================
   BASE & BACKGROUND
=========================== */
body {
    font-family: 'Quicksand', sans-serif;
    color: #fff;
    margin: 0;
    padding: 0;
    position: relative;
}

body::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('background-image.jpg') no-repeat center center fixed;
    background-size: cover;
    filter: blur(4px);
    z-index: -2;
}

.overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    z-index: -1;
}

/* ===========================
   NAVIGATION
=========================== */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 40px;
    background-color: #fff;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.logo-container {
    display: flex;
    align-items: center;
}

.navbar .logo img {
            height: 50px;
            margin-left: -10px;
            border-radius: 8px;
}

       /* Wrapper for stacking Name and Tagline */
        .name-and-tagline {
            display: flex;
            flex-direction: column;
            margin-left: 5px; 
        }

.logo-tagline {
    font-size: 0.70em;
     color: #b8860b;
}
 /* --- Name and Tagline Typography --- */

.name {
    font-size: 1.2em;
    font-weight: 600;
    color: #312e2e;
    font-family: 'Cedarville Cursive', cursive;
    margin: 0; 
    line-height: 1.1; 
}


       /* Wrapper for stacking Name and Tagline */
        .name-and-tagline {
            display: flex;
            flex-direction: column;
            margin-left: 5px; 
        }

.navbar ul {
    list-style: none;
    display: flex;
    gap: 15px;
    margin: 0;
}

.navbar a {
    color: #312e2e;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    padding: 8px 15px;
    border-radius: 5px;
    transition: background-color 0.3s ease;
    position: relative; /* needed for active underline */
}

.navbar a:hover {
    background-color: gray;
}


/* Hamburger (mobile) */
.hamburger {
    display: none;
    cursor: pointer;
    font-size: 18px;
    color: #312e2e;
    border: 1.5px solid #ccc;
    border-radius: 6px;
    padding: 6px 8px;
    background-color: #fff;
}

/* ===========================
   HERO SECTION (Two Columns)
=========================== */
.hero {
    padding: 80px 40px;
}

.hero-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 60px;
    max-width: 1200px;
    margin: auto;
}

/* LEFT COLUMN — IMAGE */
.hero-left {
    flex: 1;
    display: flex;
    justify-content: center;
}

.hero-pic img {
    width: 230px;
    height: 230px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 10px 25px rgba(0,0,0,0.4);
    transition: transform .3s ease;
}

.hero-pic img:hover {
    transform: scale(1.05);
}


/* ====================================
             MOBILE BUTTON CENTERING FIX
         ==================================== */
        @media (max-width: 600px) {
            .hero-right {
                /* Ensure the text and content align in the middle on mobile */
                text-align: center;
                /* Add a little space below the content */
                padding-bottom: 20px;
            }

            .hero-buttons {
                /* The key fix: use flexbox to center the items horizontally */
                display: flex;
                flex-direction: column; /* Stack buttons vertically for better mobile tap targets */
                align-items: center; /* Center them horizontally */
                gap: 10px; /* Add space between the stacked buttons */
                width: 100%; /* Ensure container spans full width */
            }

            .hero-buttons .btn {
                /* Ensure buttons are wide enough to be easy to tap */
                width: 80%;
                max-width: 250px;
                /* Override any floating or margin from desktop styles */
                margin: 0; 
            }
        }


        /* ===========================
             BIO SNIPPET & TOGGLE FIX (UNCHANGED)
         =========================== */
        .bio-snippet {
            font-size: 1rem;
            line-height: 1.6;
            max-width: 500px;
            margin-bottom: 15px;
        }

        #bio.bio-extension {
            max-height: 0;
            overflow: hidden;
            transition: max-height .5s ease;
        }

        #bio.bio-extension.show {
            max-height: 500px;
        }

        .bio-extension .bio-right {
            font-size: 1rem;
            line-height: 1.6;
            max-width: 500px;
            margin-top: 0;
            margin-bottom: 20px;
        }

        /* ====================================
             VISION & MISSION STYLES (PROFESSIONAL MAGIC BOX)
         ==================================== */
        #vision-mission {
            padding: 40px 20px;
            text-align: center;
        }

        .vision-mission-container {
            display: flex;
            justify-content: center;
            gap: 35px;
            max-width: 1200px;
            margin: 0 auto;
        }

        .vm-card {
            flex: 1;
            max-width: 450px;
            padding: 25px; /* Slightly reduced padding */
            border-radius: 10px;
            /* Thin, subtle border */
            border: 1px solid rgba(100, 100, 100, 0.5); 
            /* Darker background for professional depth */
            background: rgba(10, 10, 10, 0.8); 
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.6);
            transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
        }

        /* Magic Card Hover Effect */
        .vm-card:hover {
            transform: perspective(1000px) rotateX(0deg) translateY(-5px); /* Less aggressive lift */
            /* Subtle blue/purple professional glow */
            box-shadow: 0 10px 30px rgba(100, 149, 237, 0.3); 
            background: rgba(20, 20, 20, 0.9);
        }

        .vm-card h3 {
            /* Using the aesthetic font for a 'magic' feel */
            font-family: 'Cedarville Cursive', cursive;
            font-size: 1.4em; /* Further reduced font size */
            margin-top: 0;
            margin-bottom: 15px;
            color: #f0f0f0; /* Set to a light white/grey for neutral professionalism */
            letter-spacing: 1px;
            font-weight: 400;
        }

        .vm-card p {
            font-size: 0.9em; /* Reduced font size for tighter, professional look */
            line-height: 1.6;
            margin-bottom: 0;
            color: #b0b0b0; /* Lighter text for readability on dark background */
        }

        /* Responsive stacking for small screens */
        @media (max-width: 768px) {
            .vision-mission-container {
                flex-direction: column;
                gap: 25px;
                padding: 0 10px;
            }
            .vm-card {
                max-width: 100%;
            }
        }
  .tagline {
    color: #b8860b; /* Dark goldenrod */
    font-size: 0.9rem; /* slightly smaller font */
    font-weight: 500; /* medium weight */
    font-style: italic; /* optional: adds style */
    text-align: center; /* centers the tagline */
    margin-top: 0.5rem; /* spacing from above element */
}


/* BUTTONS */
.hero-buttons {
    margin-top: 20px;
    display: flex;
    gap: 15px;
}

.btn {
    padding: 10px 20px;
    border-radius: 25px;
    border: none;
    cursor: pointer;
    font-weight: 600;
    transition: 0.3s ease;
}

.btn-primary {
    background: #007bff;
    color: #fff;
}

.btn-secondary {
    background: #777;
    color: #fff;
}

.btn:hover {
    background-color: #ff4c39;
}

/* ===========================
   RESPONSIVE HERO
=========================== */
@media (max-width: 900px) {
    .hero-container {
        flex-direction: column;
        text-align: center;
        gap: 30px;
    }

    .bio-right {
        max-width: 100%;
    }
}

/* ===========================
   RESPONSIVE NAV
=========================== */
@media (max-width: 768px) {
    .navbar ul {
        display: none;
    }

    .hamburger {
        display: block;
    }

    .navbar .logo img {
        height: 40px;
        margin-left: -9px;
    }

    .name {
        font-size: 0.75em;
    }
    .logo-tagline {
        font-size: 0.45em;
    }
}

@media (max-width: 480px) {
    .navbar .logo img {
        height: 35px;
        margin-left: -15px;
    }
}


/* Social Links Styles */
.social-links {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 15px;
}

.social-link {
    display: flex;
    align-items: center;
    padding: 8px 15px;
    border-radius: 25px;
    color: #fff;
    text-decoration: none;
    font-weight: 500;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.social-link i {
    margin-right: 8px;
}

.social-link.twitter {
    background-color: #1DA1F2; /* Original Twitter Blue */
    color: #09090a; /* Black color for the X logo */
}

.social-link.github {
    background-color: #333;
}

.social-link.linkedin {
    background-color: #0077B5;
}

.social-link.email {
    background-color: #D44638;
}

.social-link.whatsapp {
    background-color: #25D366;
}

.social-link:hover {
    transform: translateY(-3px);
}

/* Custom Twitter (X) Icon */
.social-link.twitter i::before {
    display: inline-block;
    width: 1em;
    height: 1em;
    content: "";
    background-color: currentColor;
    -webkit-mask: url('data:image/svg+xml;utf8,<svg viewBox="0 -8 26 30" xmlns="http://www.w3.org/2000/svg"><g><path fill="white" d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"></path></g></svg>') no-repeat center;
    mask: url('data:image/svg+xml;utf8,<svg viewBox="0 -8 26 30" xmlns="http://www.w3.org/2000/svg"><g><path fill="white" d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.214-6.817L4.99 21.75H1.68l7.73-8.835L1.254 2.25H8.08l4.713 6.231zm-1.161 17.52h1.833L7.084 4.126H5.117z"></path></g></svg>') no-repeat center;
    background-position: center 3px;
}

/* Section Styles */
/* Reduce spacing within the section */
.section {
    padding-top: 20px; /* Adjust top padding */
    padding-bottom: 20px; /* Adjust bottom padding */
}

.section h2 {
    text-align: center;
    font-size: 1.2em;
    margin: 0 0 5px; /* Adjusted margin-bottom */ 
    font-weight: 700;
    line-height: 1.2; /* Adjusted line height for better readability */
    color: #007BFF; /* Adjusted color for better contrast */
    font-family: 'Quicksand', sans-serif; 
}

/* Services Section */


.section-description {
    text-align: center;
    /* Optional: Limit the width for better readability on large screens */
  
    margin: 0 auto 30px auto; /* Centers the block itself and adds bottom spacing */
}
.services-grid {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 20px;
    flex-wrap: wrap;
    overflow-x: auto; /* Allows horizontal scrolling on small screens */
    padding: 10px; /* Adds some padding for better spacing */
}
.service-item {
    background-color: rgba(77, 79, 80, 0.7);
    padding: 15px;
    border-radius: 10px;
    width: 45%;
    text-align: center;
    transition: transform 0.3s ease, background-color 0.3s ease;
    cursor: pointer;
    position: relative;
    max-height: 180px;
    overflow: hidden; /* Keeps structure tidy */
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
}

.service-item h3 {
    font-size: 1.1em;
    margin: 0 0 10px; /* Adjusted margin-bottom */
    color: blanchedalmond;
    font-family: 'Quicksand', sans-serif; /* Apply Quicksand font */
}

/* Enhanced scrollable paragraph on hover */
.service-item p {
  font-size: 0.9em;
  color: #f9f9f9;
  line-height: 1.5;
  margin: 0;
  padding-right: 8px; /* Better spacing for scrollbar */
  max-height: 0;
  opacity: 0;
  overflow-y: auto;
  transition: max-height 0.4s ease, opacity 0.3s ease;
  scrollbar-width: thin; /* Firefox */
  scrollbar-color: #aaa transparent;
}

/* Optional: Stylish WebKit scrollbars */
.service-item p::-webkit-scrollbar {
  width: 6px;
}
.service-item p::-webkit-scrollbar-thumb {
  background-color: #aaa;
  border-radius: 10px;
}
.service-item p::-webkit-scrollbar-track {
  background: transparent;
}


.service-item:hover,
.service-item.active {
    transform: translateY(-3px);
    background-color: rgba(166, 235, 252, 0.2);
}

.service-item:hover p,
.service-item.active p {
    max-height: 80px;
    opacity: 1;
}
/* Refined Section Divider */
.section-divider {
  margin: 50px auto;
  border: none;
  height: 2px;
  max-width: 450px;
  background: linear-gradient(to right, #d1d1d1 0%, #a0a0a0 50%, #d1d1d1 100%);
  opacity: 0.6;
  border-radius: 2px;
  transition: all 0.3s ease-in-out;
}
/* ===========================
   GLOBAL CONTAINER (Fixes Edge Stretching)
=========================== */
.container {
    max-width: 1200px; /* Use a consistent max width */
    margin: 0 auto; /* Center the container content */
    padding: 0 40px; /* **FIX**: Adds horizontal space/breathing room */
}

/* ===========================
   PORTFOLIO SECTION
=========================== */

#works .container p {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.portfolio-grid {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 20px;
    /* **FIX**: Allows items to wrap onto a new line on smaller screens */
    flex-wrap: wrap; 
}

.portfolio-item {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: rgba(77, 79, 80, 0.7);
    padding: 15px;
    border-radius: 10px;
    /* **IMPROVEMENT**: Use flex-basis for better responsiveness than fixed width */
    flex-basis: 270px; 
    text-align: center;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.4s ease;
    position: relative;
    opacity: 1;
}

/* Hover Effect */
.portfolio-item:hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

/* Aesthetic Font for h3 */
.portfolio-item h3 {
    font-size: 1.1em;
    margin-bottom: 10px;
    color: blanchedalmond;
    font-family: 'Quicksand', sans-serif;
    text-align: center; /* Ensure title is centered */
}

/* Description Styling */
.portfolio-item p {
    font-size: 0.9em;
    margin-bottom: 15px;
    color: #fff;
    flex-grow: 1;
    /* **FIX**: Centers the description text content */
    text-align: center; 
}

/* Button Styling */
.portfolio-item .btn {
    display: inline-block;
    background-color: rgba(119, 136, 153, 0.8);
    color: #fff;
    padding: 8px 15px;
    text-decoration: none;
    border-radius: 25px;
    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    align-self: center; /* Centers the button within the flex item column */
    margin-top: 15px;
}

/* Button Hover Effect */
.portfolio-item .btn:hover {
    background-color: #ff4c39;
    transform: scale(1.1);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* Add an overlay effect */
.portfolio-item::before {
    content: "";
    background-color: rgba(0, 0, 0, 0.5);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 10px;
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 1;
}

/* Hover Effect */
.portfolio-item:hover::before {
    opacity: 1;
}

.portfolio-item h3,
.portfolio-item p,
.portfolio-item .btn {
    position: relative;
    z-index: 2;
}

/* Entrance Animation */
.portfolio-item {
    animation: fadeIn 0.8s ease-in-out;
}

@keyframes fadeIn {
    0% { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* Button Click Feedback */
.portfolio-item .btn:active {
    transform: scale(0.95);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* ===========================
   HIRE ME SECTION (Included for reference/consistency)
=========================== */
.hire-me {
    padding: 40px 20px;
   
}    

.hire-me-container {
    max-width: 600px;
    margin: 0 auto;
    /* Note: Text alignment is handled by the hire-me-btn-container below */
}

.hire-me-text {
    margin-bottom: 20px;
     text-align: center; /* Center all content inside this section */
    
}


.hire-me-btn-container {
    /* **FIX**: Centers the button without affecting text above */
    text-align: center;
}

.hire-me-btn {
    background-color: #315C6B;
    color: white;
    padding: 15px 25px;
    font-size: 1em;
    font-weight: 600;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-bottom: 20px;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.hire-me-btn:hover {
    background-color: #e65b55;
    transform: scale(1.05);
}

.hire-icon {
    color: #C0C0C0 !important;
    margin-right: 8px;
}

/* Contact Section */
    #contact .container {
    text-align: center;
}


/* Certifications Section */
.certifications-list {
    list-style: none;
    padding: 0;
    text-align: center;
}

.certifications-list li {
    margin: 8px 0;
    transition: transform 0.25s ease, opacity 0.25s ease;
}

/* Slight lift on hover */
.certifications-list li:hover {
    transform: translateY(-2px);
    opacity: 0.95;
}

/* Link Styling */
.certifications-list a {
    color: #ea9d9f;
    text-decoration: none;
    font-weight: 300;
    transition: color 0.3s ease, transform 0.25s ease;
    display: inline-block;
    max-width: 100%;
    overflow-wrap: break-word;
    position: relative;
}

/* Underline reveal animation */
.certifications-list a::after {
    content: "";
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 0%;
    height: 2px;
    background-color: #ea9d9f;
    transition: width 0.35s ease;
}

/* Hover Effects */
.certifications-list a:hover {
    color: #ffb7b9; /* Slightly brighter pink */
    transform: translateX(4px);
}

.certifications-list a:hover::after {
    width: 100%;
}

/* Responsive Styles */
@media (max-width: 1200px) {
    .certifications-list a {
        font-size: 16px;
        font-weight: 300;
    }
}

@media (max-width: 768px) {
    .certifications-list a {
        font-size: 14px;
        white-space: normal;
        font-weight: 300;
    }
}

@media (max-width: 480px) {
    .certifications-list a {
        font-size: 14px;
        padding: 0 10px;
        font-weight: 300;
    }
}

/* Heading for Testimonials */
#testimonials h2 {
    font-family: 'Quicksand', serif;
    color: #007BFF;
    font-size: 1.2em; /* Increased size for emphasis */
    font-weight: 700; /* Bolder font weight for a strong impact */
    margin-bottom: 1.2rem; /* Added space below the heading */
    letter-spacing: 1.2; /* Slight letter spacing for elegance */
}

#testimonials .fa-comments {
    color: #C0C0C0; /* Classic silver hex */
}

#testimonials {
    background-color: #315C6B;
    color: #fff;
    text-align: center;
    padding: 50px 0;
}

/* Testimonial Wrapper */
.testimonial-wrapper {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap; /* Allows flexibility on smaller screens */
    max-width: 1200px;
    margin: 0 auto; /* Centers the content */
}

/* Individual Testimonial */
.testimonial {
    flex: 1; /* Ensures testimonials take equal space */
    max-width: 45%; /* Adjusts the maximum width */
    text-align: center; /* Centralized text for consistency */
    padding: 0.75rem; /* Reduced padding for internal spacing */
    background-color: rgba(255, 255, 255, 0.1); /* Subtle background color for depth */
    border-radius: 8px; /* Rounded corners for a modern look */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Soft shadow for emphasis */
    transition: transform 0.3s ease; /* Smooth transition effect */
    margin-bottom: 1rem; /* Adds space below each testimonial */
}

.testimonial:hover {
    transform: translateY(-10px); /* Hover effect for engagement */
}

.testimonial.left {
    text-align: left;
}

.testimonial.right {
    text-align: right;
}

/* Testimonial Image */
.testimonial img {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin-bottom: 20px;
    border: 2px solid #fff; /* White border for a clean finish */
}

/* Blockquote Style */
.testimonial blockquote {
    font-size: 12px;
    position: relative;
    padding: 0.5rem 1rem;
    color: #fff;
}

/* Adding quote marks before and after the blockquote */
.testimonial blockquote::before {
    content: '“'; /* Opening quote */
    font-size: 3em;
    position: absolute;
    left: -10px;
    top: -10px;
    color: #F3E9E0; /* Same color as cite */
}

.testimonial blockquote::after {
    content: '”'; /* Closing quote */
    font-size: 3em;
    position: absolute;
    right: -10px;
    bottom: -10px;
    color: #F3E9E0; /* Same color as cite */
}

.testimonial cite {
    font-style: italic;
    color: #F3E9E0;
    display: block;
    margin-top: 10px;
    font-size: 14px;
}


/* Resume Download Button Styling */
.download-btn-section {
    display: flex;
    justify-content: center;
    padding: 30px 0;
}

.download-btn {
    display: inline-block;
    padding: 15px 30px;
    font-size: 1.1rem;
    font-weight: 500;
    color: #fff;
    background-color: #007bff;
    border: none;
    border-radius: 50px;
    text-decoration: none;
    text-align: center;
    font-family: 'Quicksand', sans-serif;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}

.download-btn:hover {
    background-color: #0056b3;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
    transform: translateY(-2px);
}

.download-btn:active {
    background-color: #004494;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transform: translateY(0);
}

.download-btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(38, 143, 255, 0.5);
}
/* Style for fa-fa icon */
.section h2 i {
    margin-right: 10px; /* Space between icon and text */
    color: silver; /* Icon color */
    font-size: 1.1em; /* Icon size relative to the text */
}


/* Style for the modal (static dropdown) */
.btn {
    padding: 10px 20px;
    font-size: 14px;
    color: white;
    background-color: #007BFF;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-family: 'Quicksand', sans-serif; /* Apply Quicksand font */
    display: inline-block;
}

.btn:hover {
    background-color: #0056b3;
}

/* Style for the modal (static dropdown) */
.modal {
    display: none; /* Hidden by default */
    position: absolute; /* Positioning the modal directly under the button */
    z-index: 1; /* Sit on top */
    width: 190px; /* Set a fixed width for the modal */
    background-color: rgba(185, 178, 178, 0.85); /* Background color with transparency */
    border: 1px solid #888; /* Border for the modal */
    border-radius: 5px; /* Rounded corners */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Shadow for depth */
    padding: 10px; /* Padding inside the modal */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    top: 100%; /* Position below the button */
    left: 0; /* Align with the button's left edge */
    margin-top: 5px; /* Space between the button and the modal */
    font-size: 13px; /* Reduced font size for the modal content */
    
}


/* Modal Content */
.modal-content {
    padding: 0;
}

/* The Close Button */
.close {
    color: #1a0707;
    float: right;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer; /* Pointer cursor for the close button */
    position: relative; /* Relative positioning to adjust the button’s position */
    top: -15px; /* Adjust this value to move the button up or down */
}

.close:hover,
.close:focus {
    color: rgb(222, 23, 23);
    text-decoration: none;
    cursor: pointer;
}

/* Style for modal links */
.modal-links {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.modal-links li {
    margin: 10px 0;
}

.modal-links a {
    color: #007BFF;
    text-decoration: none;
    display: block; /* Block-level links for better click area */
    padding: 8px 12px; /* Add padding for a better click area and spacing */
    border-radius: 5px; /* Rounded corners for a more modern look */
    background-color: #83abce; /* Light background color for contrast */
    transition: background-color 0.3s, color 0.3s; /* Smooth transition for hover effects */
}

.modal-links a:hover {
    background-color: #e6f7ff; /* Slightly darker background on hover */
    color: #0056b3; /* Darker color on hover for better visibility */
}


.modal-links a:hover {
    text-decoration: underline;
}

.certifications-list .more-certifications {
    display: none;
}

.view-more-container {
    text-align: center;
    margin-top: 10px;
}

#viewMoreBtn {
    background-color: transparent;
    color: #007bff;
    border: none;
    font: inherit;
    font-size: 0.9em; /* Reduce the font size */
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
    padding: 0;
}

#viewMoreBtn:focus {
    outline: none;
}
/* Animated Gradient Border on Circle */
@keyframes gradient-border {
    0% {
        border-color: #ffffff;
    }
    25% {
        border-color: #ff6f61;
    }
    50% {
        border-color: #36d1dc;
    }
    75% {
        border-color: #da7c9b;
    }
    100% {
        border-color: #ffffff;
    }
}



/* Tools Showcase Circle Styles */
.tool-node .circle {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: inherit; /* Inherit background from parent or site */
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    border: 4px solid #ccc;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    animation: borderFade 4s infinite alternate;
}

/* Subtle Border Animation Between Two Shades of Gray */
@keyframes borderFade {
    0% {
        border-color: #ccc;
    }
    100% {
        border-color: #999;
    }
}


/* Glow Effect on Hover */
.tool-node:hover .circle {
    transform: scale(1.2); /* Slightly larger scale */
    box-shadow: 0 20px 40px rgba(255, 255, 255, 0.8), 0 0 25px rgba(255, 255, 255, 1); /* Enhanced glow effect */
    transition: box-shadow 0.4s ease, transform 0.4s ease;
}

/* 3D Depth Effect */
.tool-node:hover {
    transform: translateY(-20px) rotateX(10deg) rotateY(10deg); /* Increased lift and rotation */
    perspective: 1000px; /* Create depth */
    transition: transform 0.6s ease-out;
}

/* Add a Responsive Hover State */
.tool-node:hover {
    cursor: pointer; /* Show pointer on hover */
}

/* Custom Hover Animation for Circles */
.tool-node:hover .circle {
    animation: spin 0.5s ease forwards; /* Add spin effect on hover */
}

/* Keyframes for Spin Effect */
@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Tooltip Styling */
.tool-node:hover .tool-name::after {
    content: "This tool helps with X"; /* Replace with dynamic tool descriptions */
    background-color: rgba(0, 0, 0, 0.8);
    color: #fff;
    padding: 5px 10px;
    border-radius: 5px;
    position: absolute;
    top: -40px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.8rem;
    white-space: nowrap;
    opacity: 1;
    z-index: 10;
    transition: opacity 0.3s ease;
}

/* Tool Showcase Section */
.tools-showcase {
    padding: 40px;
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
    position: relative;
}


#tools-showcase h2 {
    font-family: 'Quicksand', serif;
    color: #007BFF;
    font-size: 1.2em; 
    font-weight: 700; 
    margin-bottom: 1.2rem; 
    letter-spacing: 1.2; 
}
.tools-showcase h2 i {
    margin-right: 10px; 
    color: silver; 
    font-size: 1.1em; 
}

/* Tool Flow Container */
.tools-flow {
    display: flex; /* Horizontal alignment */
    overflow-x: auto;
    scroll-behavior: smooth;
    padding-bottom: 20px;
    margin: 0 auto;
    white-space: nowrap;
    gap: 20px;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling on mobile */
}

/* Tool Node Styling */
.tool-node {
    text-align: center;
    flex-shrink: 0;
    width: 120px; /* Adjust based on your design */
    position: relative;
}

/* Image Styling */
.tool-node .circle img {
    max-width: 70px; /* Adjust to fit within the circle */
    max-height: 70px; /* Adjust to fit within the circle */
    object-fit: contain;
}

/* Tool Name Styling */
.tool-name {
    margin-top: 10px;
    font-size: 1rem;
    font-weight: bold;
    color: #555;
    opacity: 0; /* Hidden by default */
    transition: opacity 0.3s ease;
}

/* Show tool name on hover */
.tool-node:hover .tool-name {
    opacity: 1;
}

/* Sleek Scrollbar Styling */
.tools-flow::-webkit-scrollbar {
    height: 4px; /* Reduced height for a sleeker look */
}

.tools-flow::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2); /* Semi-transparent color for a sleeker look */
    border-radius: 10px; /* Rounded corners for a sleek look */
}

.tools-flow::-webkit-scrollbar-track {
    background-color: transparent; /* Invisible track background */
}

.tools-flow::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, 0.4); /* Slightly darker color on hover */
}

/* For Firefox */
.tools-flow {
    scrollbar-width: thin; /* Thin scrollbar for Firefox */
    scrollbar-color: rgba(0, 0, 0, 0.2) transparent; /* Custom colors for Firefox */
}


/* Hire me section */
.hire-me-section {
    padding: 40px 20px;
}

.hire-me-container {
    max-width: 600px; /* Reduced container width */
    margin: 0 auto;
    text-align: center;
}

.hire-me-header h2 {
    margin-bottom: 20px;
}

/* Use this to center the button specifically */
.hire-me-btn-container {
    text-align: center;
}

.hire-me-btn {
    background-color: #315C6B;
    color: white;
    padding: 15px 25px;
    font-size: 1em;
    font-weight: 600;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin-bottom: 20px;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.hire-me-btn:hover {
    background-color: #e65b55;
    transform: scale(1.05);
}

.hire-icon {
    color: #C0C0C0 !important; /* Classic silver hex */
    margin-right: 8px;
}

.form {
    margin-top: 20px;
    background-color: rgba(255, 255, 255, 0.05);
    padding: 30px;
    border: 1px solid rgba(204, 204, 204, 0.3);
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    max-width: 500px; /* Reduced form width */
    margin: 20px auto; /* Center the form */
}

label {
    font-family: 'Poppins', sans-serif;
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    color: #fff;
    text-align: left;
}

label, select, input, textarea {
    font-family: 'Poppins', sans-serif;
    width: 100%;
    margin: 8px 0;
}

select, input, textarea {
    padding: 12px;
    border-radius: 6px;
    border: 1px solid rgba(204, 204, 204, 0.5);
    font-size: 14px;
    background-color: rgba(255, 255, 255, 0.1);
    color: #333;
}

select:focus, input:focus, textarea:focus {
    outline: none;
    border-color: rgba(119, 136, 153, 0.8);
    box-shadow: 0 0 5px rgba(117, 136, 156, 0.5);
}

button[type="button"], button[type="submit"] {
    background-color: rgba(119, 136, 153, 0.8);
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    margin-top: 20px;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

button[type="button"]:hover, button[type="submit"]:hover {
    background-color: rgba(119, 136, 153, 0.8);
    transform: scale(1.05);
}

.fa {
    color: #007BFF;
}

.hidden {
    display: none;
}

/* Responsive styles for smaller devices */
@media (max-width: 600px) {
    .form {
        padding: 20px;
        border: none;
        max-width: 100%; /* Full width on small screens */
    }

    .hire-me-btn {
        width: 60%;
    }

    label, select, input, textarea {
        font-size: 14px;
    }

    button[type="button"], button[type="submit"] {
        width: 100%;
        font-size: 14px;
    }
}
/* Responsive Styles */
@media (max-width: 768px) {
    .tools-showcase {
        margin: 30px 0;
    }

    h2 {
        font-size: 1.5em;
    }

    .tools-flow {
        display: flex;
        gap: 10px;
        justify-content: space-between;
        overflow-x: auto;
        scrollbar-width: thin;
        scrollbar-color: gray transparent; /* Gray scrollbar for Firefox */
    }

    .tool-node {
        width: calc(100% / 3 - 15px); /* Ensure 3 items fit at a glance */
        flex-shrink: 0;
        text-align: center;
    }

    .tool-node .circle {
        width: 60px;
        height: 60px;
        /* Remove the transition and transform properties for smaller screens */
        transition: none; /* Disable transition */
        transform: none; /* Ensure no transformation */
        box-shadow: none; /* Remove shadow effect */
    }

    .tool-node .circle img {
        max-width: 50px;
        max-height: 50px;
    }

    .tool-name {
        font-size: 0.875rem;
        display: none; /* Keep names hidden if needed */
    }
}

/* Gray Scrollbar Styling */
.tools-flow::-webkit-scrollbar {
    height: 4px; /* Small height for a sleeker look */
}

.tools-flow::-webkit-scrollbar-thumb {
    background-color: gray; /* Light gray scrollbar thumb */
    border-radius: 10px; /* Rounded scrollbar */
}

.tools-flow::-webkit-scrollbar-track {
    background-color: transparent; /* Transparent track */
}



/* Footer Styles */
footer {
    background-color: #333;
    color: #fff;
    padding: 20px 0;
}

footer .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}


footer .footer-info {
    font-size: 14px;
    text-align: center;
}

/* =======================
   Responsive Styles
   ======================= */

/* For devices with a max width of 768px */
@media (max-width: 768px) {
    @media screen and (max-width: 768px) {
        .navbar ul {
            display: none; /* Hide menu on mobile */
            flex-direction: column;
            position: absolute;
            top: 80px;
            left: 0;
            width: 100%;
            background-color: transparent;

            text-align: center;
            padding: 12px 0;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        }
    
        .navbar ul.active {
            display: flex; /* Show menu when active */
        }
    
        .navbar .hamburger {
            display: block; /* Show on mobile */
        }
    }
    
    /* Link Styles */
    .navbar a {
        display: block;
        padding: 6px 12px; /* Adjust padding for a tighter layout */
        text-align: center;
        text-decoration: none;
        color: #fff;
    }
    
    /* Active and focus styles */
    .navbar a:active, .navbar a:focus {
        background: none;
        color: #ff6f61;
    }
    
    /* Responsive Styles for Smaller Screens */
    @media (max-width: 768px) {
        .navbar {
            position: relative;
        }
    
        /* Show the hamburger menu button */
        .navbar .hamburger {
            display: block; /* Show on small screens */
        }
    
        /* Hide the navigation items by default */
        .navbar ul {
            display: none; /* Hide the menu initially */
            flex-direction: column; /* Stack items vertically */
            align-items: center;
            gap: 4px; /* Reduced space between menu items */
            width: 50%; /* Full width */
        }
    
        /* Show the menu when the navbar has the 'active' class */
        .navbar.active ul {
            display: flex; /* Show the menu */
        }
    
        .navbar li {
            width: 50%; /* Full width for each item */
            margin-bottom: 4px;
        }
    }
    /* Header Content */
    .header-content h1 {
        font-size: 1em;
        margin-bottom: 10px;
    }

    .header-content p {
        font-size: 0.9em;
    }

   
    /* Services and Portfolio Grids */
    .services-grid,
    .portfolio-grid {
        flex-direction: column;
        align-items: center;
    }

    .service-item,
    .portfolio-item {
        width: 90%;
        max-width: 400px;
        margin: 10px 0;
        overflow-y: auto; /* Enable vertical scrolling */
    }

    .service-item p {
        overflow-y: auto; /* Enable scrolling if content overflows */
    }

    /* Section Styling */
    .section {
        padding: 20px 0;
    }

    .section h2 {
        font-size: 1.2em;
    }
    h2 {
        font-size: 1.2em;
    }
    
   /* Social Links */
    .social-links {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
        margin: 0 auto;
        max-width: 280px; /* Slightly wider */
      }
    
      .social-link {
        padding: 10px;
        font-size: 14px; /* Slightly smaller font */
        width: 100%;
        text-align: center;
        box-sizing: border-box;
      }
      
    /* Connect with Me */


    .connect-with-me {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 10px;
    }

    .connect-with-me a {
        display: inline-block;
        padding: 10px;
        font-size: 0.9em;
    }

    /* CV/Resume Section */
    .cv-resume-section {
        padding: 20px 0;
    }

    .cv-resume-section h2 {
        font-size: 1.5rem;
    }

    .cv-resume-section p {
        font-size: 1rem;
    }

    .cv-button {
        padding: 10px 20px;
        font-size: 1rem;
    }

    /* Modal Styling */
    .modal {
        position: fixed;
        z-index: 10; /* Sit above other content */
        width: 90%; /* Take most of the screen width */
        top: 20%; /* Vertically center */
        left: 50%; /* Horizontally center */
        transform: translateX(-50%); /* Center horizontally */
        margin-top: 0; /* Remove top margin */
        padding: 15px; /* Add more padding */
    }

    .modal-content {
        width: 100%; /* Full width content */
    }
 
/* Mobile Responsive Styles for Testimonials */
@media (max-width: 768px) {
    #testimonials {
        text-align: center;
        padding: 1rem 0; /* Reduced top/bottom padding */
    }

    #testimonials .testimonial-wrapper {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        width: 100%;
        padding-bottom: 10px; /* Slightly reduced */
        margin: 0 auto;
        gap: 0;
    }

    #testimonials .testimonial {
        flex: 0 0 100%;
        max-width: 100%;
        scroll-snap-align: center;
        padding: 0.5rem; /* Reduced padding */
        margin-right: 0;
        margin-bottom: 0;
        overflow: visible;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    #testimonials .testimonial blockquote {
        font-size: 0.95em; /* Slightly smaller */
        line-height: 1.4;
        margin-bottom: 8px;
    }

    #testimonials .testimonial cite {
        font-size: 0.85em;
        line-height: 1.3;
    }

    #testimonials .testimonial.left,
    #testimonials .testimonial.right {
        text-align: center;
    }

    #testimonials .testimonial-wrapper::-webkit-scrollbar {
        height: 6px;
        background-color: #f1f1f1;
    }

    #testimonials .testimonial-wrapper::-webkit-scrollbar-thumb {
        background-color: #888;
        border-radius: 4px;
    }

    #testimonials .testimonial-wrapper::-webkit-scrollbar-thumb:hover {
        background-color: #555;
    }
}