@import url('https://fonts.googleapis.com/css2?family=Lato:wght@400;700&display=swap');

/* Title Styling */
#title-container {
    background: rgba(0, 0, 0, 0.6);
    text-align: center;
    padding: 1em 0;
    position: fixed;
    top: 0;
    backdrop-filter: blur(10px); /* Apply blur effect */
    left: 0;
    width: 100%;
    z-index: 10001;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Initial state */
.certification-gallery img {
    opacity: 0; /* Fully transparent */
    transform: scale(0.5) translateY(40px); /* Smaller and farther down */
    filter: blur(15px); /* Increased blur for a dramatic poof effect */
    transition: opacity 1.2s ease-out, transform 1.2s ease-out, filter 1.2s ease-out; /* Slower transition */
  }
  
  /* When in view */
  .certification-gallery img.animate {
    opacity: 1; /* Fully visible */
    transform: scale(1) translateY(0); /* Normal size and position */
    filter: blur(0); /* Clear and sharp */
  }
/* Hover effect for clickable images */
.certification-gallery img {
    cursor: pointer; /* Change cursor to a pointer when hovering */
  }
  
  /* Optional: Add a subtle hover effect for feedback */
  .certification-gallery img:hover {
    transform: scale(1.05); /* Slight zoom on hover */
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2); /* Add a subtle shadow for depth */
    transition: transform 0.2s ease, box-shadow 0.2s ease; /* Smooth transition for hover effect */
  }


.certifications {
    text-align: center;
    background-color: #f3f3f3;
    margin-top: 0px; /* Ensure there's no gap above */
}
/* Project Preview Section */
.project-preview {
    width: 100%; /* Full width */
    margin: 0 auto;
    margin: 2em auto; /* Center it vertically */
    text-align: center; /* Center heading text */
    padding: 0 10px; /* Add padding to prevent edges on mobile */
}

.project-preview h3 {
    font-size: 1.2rem;
    margin-bottom: 1em;
    color: rgb(0, 0, 0);
}
.carousel {
    display: flex;
    overflow: hidden;
    scroll-behavior: smooth;
}

.carousel-item {
    display: inline-block;
    margin-right: 20px; /* Adjust spacing between items */
    flex-shrink: 0; /* Prevent items from shrinking */
}
/* Carousel */
.carousel {
    display: flex;
    overflow-x: scroll; /* Enable horizontal scrolling */
    scroll-behavior: smooth; /* Smooth scrolling */
    gap: 1em; /* Spacing between items */
    position: relative;
    overflow-y: hidden;
    justify-content: flex-start; /* Align items to the left */
    text-align: center;
    padding-left: 10px; /* Ensure items are not flush to the edge */
    scrollbar-width: none; /* Hide scrollbar for Firefox */
    -ms-overflow-style: none; /* Hide scrollbar for IE and Edge */
}

/* Media Query for Desktop Center Alignment */
@media screen and (min-width: 769px) {
    .carousel {
        justify-content: center; /* Center align carousel on desktop */
    }
}
/* Hide scrollbar for Webkit browsers */
.carousel::-webkit-scrollbar {
    display: none;
}

/* Carousel Items */
.carousel-item {
    flex: 0 0 auto; /* Ensure items don't shrink or grow */
    background-color: rgba(249, 249, 249, 0.8); /* Light gray with 80% opacity */
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 1em;
    text-align: center;
    width: 220px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 
                0 0 10px rgba(255, 215, 0, 0.6); /* Reduce glow spread */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.carousel-item:hover {
    transform: scale(1.05); /* Slight zoom effect */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2), 
                0 0 15px rgba(255, 215, 0, 0.8), 
                0 0 25px rgba(255, 215, 0, 0.5); /* Enhanced individual glow */
}

.carousel-item img {
    border-radius: 4px;
    margin-bottom: 0.5em;
}

.carousel-item:hover {
    transform: scale(1.05); /* Slight zoom effect */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2), 
                0 0 15px rgba(255, 215, 0, 0.8), 
                0 0 25px rgba(255, 215, 0, 0.5); /* Enhanced individual glow */
}
.carousel-item img {
    border-radius: 4px;
    margin-bottom: 0.5em;
}

.carousel-item h4 {
    font-size: 1rem;
    margin-bottom: 0.5em;
}

.carousel-item p {
    font-size: 0.9rem;
    color: #555;
    margin-bottom: 0.5em;
}

.btn-view {
    display: inline-block;
    padding: 0.4em 0.8em;
    background-color: #4a90e2;
    color: white;
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: bold;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}

.btn-view:hover {
    background-color: #007BFF;
}

@media screen and (max-width: 768px) {
    .carousel-item {
        width: 180px; /* Smaller cards on mobile */
    }

    .project-preview {
        padding: 0 15px; /* Add more padding for mobile */
    }
}

.certifications h2 {
    font-size: 2em;
    font-family: 'Merriweather', serif;
    font-weight: 700;
    color: #333333;
    margin-bottom: 33px; /* Increase space below main section title */
    padding: 10px 0;
    border-top: 1px solid black;
    border-bottom: 1px solid black;
    text-align: center;
    background-image: url('cobblestone2.jpg');
    background-size: cover;
    background-position: center;
    margin-left: -20px;
    margin-right: -20px;
}

@media screen and (max-width: 768px) {
    .carousel-item {
        width: 150px; /* Compact width for a squarer appearance */
        height: auto; /* Adjust height dynamically */
        padding: 0.7em; /* Adjust padding for balance */
        font-size: 0.8rem; /* Slightly smaller font */
        display: flex;
        flex-direction: column;
        justify-content: flex-start; /* Align content at the top */
        align-items: center; /* Center items horizontally */
        text-align: center;
        gap: 0.5em; /* Add uniform spacing between elements */
    }

    .carousel-item img {
        width: 70%; /* Reduce image size proportionally */
        height: auto; /* Maintain aspect ratio */
        margin-bottom: 0.4em; /* Space below image */
        border-radius: 4px; /* Keep image style consistent */
    }

    .carousel-item h4 {
        font-size: 0.9rem; /* Slightly smaller heading font */
        margin: 0; /* Remove unnecessary margin */
    }

    .carousel-item p {
        font-size: 0.75rem; /* Smaller paragraph font size */
        margin: 0.3em 0; /* Adjust vertical margin */
        line-height: 1.2; /* Adjust line spacing for readability */
    }

    .btn-view {
        display: inline-block;
        padding: 0.3em 0.5em; /* Compact button size */
        font-size: 0.7rem; /* Smaller button text */
        margin-top: 0.4em; /* Add spacing above button */
        text-align: center;
    }

    .carousel-item {
        min-height: 190px; /* Ensure uniform card height for squareness */
    }
}


.certification-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 25px; /* Space between items */
    justify-content: center; /* Center items on both mobile and desktop */
    align-items: center;
    margin: 0 auto; /* Ensure the entire gallery is centered */
}

.certification-item {
   display: flex;
    flex-direction: column;
    align-items: center; /* Center-align the caption */
    width: 200px; /* Set a fixed width for uniform alignment */
    text-align: center; /* Ensure text is centered within the container */
}

.certification-gallery img {
    background: rgba(0, 0, 0, 0.8); /* Slightly transparent black background */
    padding: 10px; /* Spacing between the image and the background */
    border-radius: 16px; /* Rounds both the image and the background */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* Subtle shadow for depth */
    max-width: 150px; /* Keeps the image size intact */
    width: auto;
    height: auto;
    margin-bottom: 10px; /* Space between image and caption */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth hover effect */
}

.certification-gallery img:hover {
    transform: translateY(-6px); /* Slight lift on hover */
    box-shadow: 
        0 4px 8px rgba(0, 0, 0, 0.2), /* Enhanced shadow for depth on hover */
        0 10px 20px rgba(0, 0, 0, 0.15),
        0 6px 6px rgba(0, 0, 0, 0.05) inset; /* Inner shadow for a 3D effect */
}

@media (max-width: 768px) {

        .certifications {
        padding: 0 10px; /* Adds padding to the left and right on mobile only */
        margin-top: 0px;
    }

    .certifications h3 {
        padding-left: 5px; /* Adds extra space to the left of headings on mobile */
        text-align: left;
        margin-top: 20px;
        margin-bottom: 5px;
        text-decoration: underline;
    }



    .certification-gallery img {
        max-width: 200px; /* Increase image size for better legibility */
        margin-bottom: 10px; /* Space between image and caption */
        gap: 30px;
    }
    
    .certification-item {
        width: 45%; /* Allow two items per row on mobile */
    }
 .certification-gallery img {
        height: auto; /* Let height adjust based on image ratio */
        max-width: 150px; /* Set max width for smaller images on mobile */
    }
    .certifications h3 {
        margin-top: 20px;
        margin-bottom: 18px; /* Slightly less space on mobile */
        font-size: 1.2em;
    }


}
.cert-caption {
    font-size: 0.85em;
    font-style: italic;
    margin-top: 5px;
    color: #606060;
    text-align: center;
}


@media (max-width:768px){
    .professional-statement {
        font-size: 0.7rem;
        display: none;
    }
}
.professional-statement {
    font-family: 'Lato', sans-serif; /* Updated font to Lato */
    font-size: 1rem;
    text-indent: 20px;
    display: none;
    margin-top: -5px;
    font-weight: 400;
    line-height: 2; /* Double spacing */
    color: #2c2c2c;
}

.titles {
   font-size: 1.8rem;
   margin: 0;
   font-weight: 600;
   text-shadow: 0 0 8px rgba(0, 0, 0, 0.6);
}
.trademark {
    margin-left: -6px;


}
@media (max-width: 768px) {
    #title-container .titles {
        font-size: 1.5em !important; /* Force smaller font size */
    }

  
        /* Adjust Title Image and Trademark */
        #title-container .title-image {
            width: 28px !important; /* Slightly larger image */
            height: auto; /* Maintain aspect ratio */
            vertical-align: middle;
        }
    
        #title-container .trademark {
            font-size: 1em !important; /* Slightly larger trademark */
            margin-left: -6px; /* Adjust spacing for better alignment */
        }
}
.titles span {
    font-size: 1.2em;
    margin-top: 5px;
    
}

/* Style for Title Link */
.title-link {
    text-decoration: none; /* Remove underline */
    font-size: 1em;
    color: #fff; /* Inherit the color from the parent (h1) */
    transition: color 0.3s ease-in-out; /* Smooth color transition on hover */
}

.title-link:hover {
    color: #5699e1; /* Optional: Change color on hover */
}
/* Style for the Image */
.title-image {
    width: 25px; /* Set image width */
    height: auto; /* Maintain aspect ratio */
    margin-left: 0px;
    margin-top: -10px;
    filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.3)); /* Shadow only behind visible image */
    display: inline-block; /* Inline display */
    vertical-align: middle; /* Align with text */
}

/* General Reset */
body, ul, li {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    list-style: none;
    box-sizing: border-box;
}
html {
    overflow-x: hidden;
}



.titles {
    font-size: 1.8em;
    font-weight: bold;
    color: #282828;
}

/* Navbar Styling - Always Horizontal */
#nav {
    background-color: #282828;
    position: fixed;
    top: 4.43em; /* Place it below the title container */
    left: 0;
    
    width: 100%;
    z-index: 10000;
    text-align: center;
}

@media (max-width: 768px) {
   #nav {
    background-color: #282828;
    position: fixed;
    top: 4.46em; /* Place it below the title container */
    left: 0;
    width: 100%;
    z-index: 10000;
    text-align: center;
}
}
/* Responsive Styling for Navbar Links */
@media (max-width: 768px) {
    #nav a {
        font-size: 0.69rem; /* Reduce font size for smaller screens */
   
    }

    #nav ul {
        padding: 0; /* Ensure no extra padding around the nav list */
        margin: 0; /* Center alignment consistency */
        overflow-x: auto; /* Enable horizontal scrolling if needed */
        justify-content: flex-start; /* Left-align the nav items */
        white-space: nowrap; /* Prevent wrapping of nav items */
        
    }

    #nav li {
        margin: 0; /* Avoid excessive gaps between items */
    }
}
@media (min-width: 768px) {


}

/* Ensure proper alignment of nav items */
#nav ul {
    display: flex;
    justify-content: center; /* Center items horizontally */
    align-items: center; /* Center items vertically */
    padding: 0;
    margin: 0 auto; /* Center the ul within the nav */
    list-style: none; /* Remove default bullets */
}

#nav li {
    margin: 0; /* Remove unnecessary gaps */
}

/* Adjust nav links for consistency */
#nav a {
    display: block;
    padding: 10px 15px;
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    transition: background-color 0.3s ease;
}

footer a.email-link, footer a.phone-link {
    color: inherit; /* Inherit color from parent */
    text-decoration: none; /* Remove underline */
}

footer a.email-link:hover, footer a.phone-link:hover {
    text-decoration: underline; /* Optional: Add underline on hover */
    color: inherit; /* Keep same color on hover */
}
#nav a:hover {
    background-color: #383838;
    border-radius: 5px;
}
#skills {
    min-height: 100vh; /* Set section height to fill the viewport */
    border-bottom: 5px solid #ccc;
    background: linear-gradient(to bottom, #d3d3d3, #6d6d6d); /* Light gray to dark gray */
}
#projects {
    background:  url('images/brb.png') no-repeat center center;
    background-size: cover; 
    border-bottom: 5px solid #ffffff;
    min-height: 100vh; /* Set section height to fill the viewport */
}
/* Mac Window Styling */
.window {
    margin: 20px auto;
    position: relative;
    background: rgba(255, 255, 255);
    width: 90%;
    max-width: 720px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    border-radius: 10px;
    overflow: hidden;
    padding: 1em 0;
  }
  
  .top-bar {
    position: absolute;
    top: 0;
    width: 100%;
    height: 30px;
    background: linear-gradient(#dddddd, #a19c9c);
    display: flex;
    align-items: center;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
  }
  
  .window-action ul {
    margin: 0;
    padding: 0 1em;
    display: flex;
    list-style: none;
  }
  
  .window-action ul li {
    margin: 0 5px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
  }
  
  .window-action ul li:nth-of-type(1) {
    background: #e36e6b;
  }
  
  .window-action ul li:nth-of-type(2) {
    background: #debb43;
  }
  
  .window-action ul li:nth-of-type(3) {
    background: #36d489;
  }
  
  .screen {
    margin-top: 15px; /* Offset for the top-bar */
    text-align: center;
    padding-bottom: 10px;

  }

/* Background Section - Full View Height */
.background-section {
    position: relative; /* Allows for proper layering */
    background:  url('images/backings.jpg') no-repeat center center;
    background-size: cover;
    min-height: 100vh; /* Set section height to fill the viewport */
    display: flex;
    border-bottom: 5px solid #ffffff;
    flex-direction: column; /* Stack children vertically */
    justify-content: flex-start; /* Align items to the top */
    align-items: center; /* Center items horizontally */
    padding-bottom: 1em; /* Add spacing at the bottom */
    gap: 2em; /* Add spacing between elements */
    overflow-x: hidden;
   
}
/* Adjust spacing at the bottom of the contact section */
#contact {
    padding-bottom: 25px; /* Add a small amount of padding */
    
}

#contact footer {
   
   
}


/* Centered White Container */
.content-container {
    padding: 1.5em;
    padding: 15px;
    border-radius: 8px;
    display: flex;
    flex-direction: column; /* For better stacking of elements */
    align-items: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    max-width: 1200px;
    width: 85%;
    margin-top: 150px;
    text-align: center;
    margin: 0 auto;

    margin-bottom: -65px;
    margin-top: 150px;
}
/* Profile Image */
.profile-image {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    margin-top: 15px;
    margin-right: 1.5em;
    border: 3px solid black; /* Add a black border */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* Add a subtle shadow for effect */
}

@media (min-width:769px) {
.profile-image {
    border-radius: 50%;
    margin-right: 1.5em;
    border: 3px solid black; /* Slightly thicker border for larger image */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3); /* Adjust shadow for larger size */
}

.name {
    font-size: 1.8em;
    margin: 0;
    margin-top: 10px;
    color: #282828;
}
}
/* Default font size for larger screens */
.name {
    font-size: 1.8em;
    margin: 0;
    color: #282828;
}

/* Media Query for Mobile Screens */
@media screen and (max-width: 768px) {
    .name {
        font-size: 1.5em !important; /* Force smaller size for mobile */
    }
    .profile-image {
    width: 140px;
    height: 140px;
    }
}
/* Text Content */
.text-content {
    text-align: left;
    flex: 1;
    padding: 0 15px;
}



.job-title {
    font-size: 1em;
    color: #555;
    text-align: center;
    margin-top: 0.5em;
}
.badges {
    text-align: center;
    margin-top: -10px;
}
/* Badges */
.badges img {
    width: 75px;
    height: 75px;
    max-width: 16%;
    border-radius: 10px;
    object-fit: contain;
    transition: all 0.3s ease-in-out;
    cursor: pointer;
}

.badges img:hover {
    transform: scale(1.1);
    filter: brightness(1.2); /* Slight glow effect */
}
/* Modal Overlay */
.modal-overlay {
    display: none; /* Hidden by default */
    position: relative;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.0); /* Dark semi-transparent background */
    justify-content: center;
    align-items: center;
    z-index: 1000;
}

.modal-content img {
    max-width: 50%;
    max-height: 50%;
    border-radius: 20px; /* Optional: Rounded edges */
    animation: fadeIn 0.5s ease-in-out;
}

/* Animation for Modal Image */
@keyframes fadeIn {
    from {
        transform: scale(0.8);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

/* Responsive Design */
@media screen and (max-width: 768px) {

    .content-container {
        flex-direction: column;
        text-align: center;
        padding: 1em;
        margin: 0 15px;
        width: 85%;
      
        margin-top: 135px;
 
        margin-bottom: -65px;
        
    }
 
    .badges {
        text-align: center;
    }
    .badges img {
        width: 16%;
        height: auto;
    }

    #title-container {
        font-size: 1.2em;
    }
}

/* Resume Button Styling */
.resume-button {
    text-align: center; /* Center the button horizontally */
    margin-top: 1em; /* Add space above the button */
}

/* Initial state for badges */
.badges img {
    opacity: 0; /* Fully transparent */
    transform: scale(0.5) translateY(30px); /* Smaller and shifted downward */
    filter: blur(10px); /* Blurry for a dramatic poof effect */
}

/* Animation keyframes */
@keyframes poof {
    0% {
        opacity: 0; /* Fully transparent */
        transform: scale(0.5) translateY(30px); /* Smaller and shifted */
        filter: blur(10px); /* Blurry */
    }
    100% {
        opacity: 1; /* Fully visible */
        transform: scale(1) translateY(0); /* Normal size and position */
        filter: blur(0); /* Clear and sharp */
    }
}

.btn-download {
    display: inline-block;
    padding: 0.6em 1.8em; /* Adjust padding for a similar look */
    background: linear-gradient(to bottom, #4a90e2, #007BFF); /* Gradient blue background */
    color: #fff; /* White text */
    text-decoration: none;
    font-weight: bold;
    font-size: 1em;
    border: 1px solid #0056b3; /* Add border for definition */
    border-radius: 5px; /* Slightly rounded corners */
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.15); /* Softer shadow */
    transition: all 0.3s ease-in-out;
    text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2); /* Text shadow for depth */
    cursor: pointer;
}

.btn-download:hover {
    background: linear-gradient(to bottom, #0056b3, #004080); /* Darker gradient on hover */
    border-color: #004080;
    box-shadow: 0 5px 7px rgba(0, 0, 0, 0.2); /* Slightly deeper shadow */
    transform: translateY(-2px); /* Hover lift effect */
}


/* Achievements & Certifications Section */
#certifications {
    background: linear-gradient(to bottom, #f4f4f4, #f0f0f0); /* Subtle light gray gradient */
    background-repeat: repeat; /* Adds subtle grain effect */
    background-size: cover;
    display: flex;
    border-bottom: 4px solid #ffffff;
    justify-content: center;
    align-items: center;
    overflow-x: hidden;
    flex-direction: column;
    text-align: center;
    color: #333; /* Darker text color for readability */
}
@media (max-width:768px) {
    #certifications {
        background-repeat: no-repeat;
        background-size: cover; /* Makes the image cover the entire section */
        background-position: center; /* Ensures the image is centered */
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        text-align: center;
        color: #333; /* Darker text color for readability */
    }
}

/* Section Header - Closer to the Top */
.certifications-header {
    font-size: 2.2rem;
    font-weight: bold;
    color: #282828;
    padding-top: 2rem; /* Add slight padding at the top */
    text-transform: uppercase;
    letter-spacing: 1px;
    display: inline-block; /* Fit content width */
    line-height: 1.3;
}

/* Certifications Content */
.certifications-content {
    font-size: 1.1rem;
    color: #444;
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
    padding: 1.5em;
    margin-bottom: 0px;
    padding-bottom: 0px;
}

/* Smooth Scroll Behavior */
html {
    scroll-behavior: smooth; /* Smooth scrolling between sections */
}/* General Section Styling */
#projects, #skills {
    padding: 4rem 1.5rem; /* Add padding for spacing */
    text-align: center;
    color: #333;
}

.section-header {
    font-size: 2.2rem;
    font-weight: bold;
    color: #000000;
    padding: 1rem 0;
    margin: 0 auto 1.5rem auto;
    text-transform: uppercase;
    letter-spacing: 1px;
    display: flex; /* Use flex to span full width */
    align-items: center; /* Center the text vertically */
    justify-content: center; /* Center the text horizontally */
    line-height: 1.3;
    position: relative; /* Position relative for pseudo-elements */
    text-shadow: 0 0 8px rgba(0, 0, 0, 0.3);

    /* Remove existing inline borders */
    border: none;
}

.section-header::before,
.section-header::after {
    content: ""; /* Add empty pseudo-elements for borders */
    position: absolute;
    height: 4px; /* Thickness of the borders */
    background-color: #ccc; /* Border color */
    width: 100%; /* Full width */
}

.section-header::before {
    top: 0; /* Border at the top */
    left: 0;
}

.section-header::after {
    bottom: 0; /* Border at the bottom */
    left: 0;
}

/* Section Description */
.section-description {
    font-size: 1rem;
    color: #555;
    max-width: 700px;
    margin: 0 auto; /* Center the text */
    line-height: 1.6;
}











/* General Section Styling */
#skills77 {
    background: url('images/427.JPG') no-repeat center center/cover; /* Add background image */
    padding: 4rem 2rem;
    color: #333;
    text-align: center;
}

/* Section Header */
.section-header77 {
    font-size: 2.5rem;
    font-weight: bold;
    color: #282828;
    margin-bottom: 1rem;
}

/* Section Description */
.section-description77 {
    font-size: 1.2rem;
    line-height: 1.8;
    color: #555;
    margin: 0 auto 2rem auto;
    max-width: 700px;
}

/* Skills Grid with Offset Columns */
.skills-grid77 {
    display: grid;
    padding: 20px;
    grid-template-columns: 1fr 1.5fr 1fr; /* Two shorter columns, one longer column */
    gap: 1.5rem;
    justify-items: center; /* Center-align all items */
    align-items: start; /* Align items to the start */
    position: relative;
}
.skill-column77 {
    display: flex;
    flex-direction: column;
    gap: 1rem; /* Adds a 1rem space between each card */
}
.skill-column77:first-child {
    margin-top: 30px; /* Offset left column downward */
}

.skill-column77:last-child {
    margin-top: 30px; /* Offset right column downward */
}

.middle-column77 {
    margin-top: 0; /* Keep middle column higher */
}

/* Upgraded Skill Card with Cool Borders */
.skill-card77 {
    background: #1e1e1e; /* Darker background for contrast */
    color: #f0f0f0; /* White text */
    border: 4px solid transparent; /* Transparent base border */
    border-image-slice: 1; /* Linear gradient border */
    border-image-source: linear-gradient(135deg, #ff7e5f, #feb47b); /* Gradient from coral to peach */
    border-radius: 15px; /* Slightly more rounded corners */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2); /* Enhanced shadow */
    padding: 1.2rem 1.8rem;
    font-size: 1rem;
    font-weight: bold;
    text-align: center;
 transition: transform 0.6s ease, box-shadow 0.6s ease;
 opacity: 0;                /* Start hidden */
    transform: translateY(40px) scale(0.95); /* Slightly lower & smaller */
    filter: blur(8px);         /* Subtle blur */
}

/* The 'visible' animation state */
.skill-card77.animate-visible {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
    /* A bit slower, more noticeable fade-in */
    transition: opacity 0.5s ease-out, transform 0.5s ease-out, filter 0.5s ease-out;
}

/* Hover: strong black glow */
.skill-card77:hover {
    transform: scale(1.1);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.9), 0 0 30px rgba(0, 0, 0, 0.6); /* Black glow */
    background: linear-gradient(135deg, #ff7e5f, #feb47b); 
    color: #ffffff;
}

/* Mobile Fix: Proper Spacing and Alignment */
@media (max-width: 768px) {
    .skills-grid77 {
        grid-template-columns: 1fr 1fr 1fr; /* Keep the same three-column layout */
        gap: 0.5rem; /* Maintain gap for better spacing */
        padding: 0.5rem; /* Add padding to avoid edges */

        justify-items: center; /* Ensure all cards are centered */
    }

    .skill-column77 {
        display: flex;
        flex-direction: column;
        gap: 1rem; /* Maintain gap between skill cards */
    }

    .skill-card77 {
        font-size: 0.80rem; /* Slightly smaller text for better fit */
        padding: 0.8rem; /* Compact padding for smaller cards */
        max-width: 60%; /* Limit width of the cards to prevent overflow */
        margin: 0 auto; /* Center-align cards within their column */
    }
}
/* Mobile Fix: Proper Spacing and Alignment */
@media (max-width: 550px) {
    .skills-grid77 {
        grid-template-columns: 1fr 1fr 1fr; /* Keep the same three-column layout */
        gap: 0.5rem; /* Maintain gap for better spacing */
        padding: 0.5rem; /* Add padding to avoid edges */
       margin-right: 5px;

        justify-items: center; /* Ensure all cards are centered */
    }

    .skill-column77 {
        display: flex;
        flex-direction: column;
        gap: 1rem; /* Maintain gap between skill cards */
    }

    .skill-card77 {
        font-size: 0.63rem; /* Slightly smaller text for better fit */
        padding: 1rem; /* Compact padding for smaller cards */
        max-width: 60%; /* Limit width of the cards to prevent overflow */
        margin: 0 auto; /* Center-align cards within their column */
    }
}




/* Subtle glow pulsing effect on hover */
.skill-card77.animate:hover {
    box-shadow: 0 0 15px 6px rgba(255, 127, 80, 0.4), 0 0 20px 10px rgba(255, 191, 120, 0.2); /* Softer, more subtle glow */
}

/* Staggered animation */
.skill-card77.animate {
    animation: glowPulse 1s ease-out; /* Softer pulse animation */
}


/* Known Languages Styles */
.languages-container89 {
    background-color: rgba(0, 0, 0, 0.5);
    border-radius: 12px;
    padding: 1rem;
    margin: 2rem auto;
    max-width: 800px;
}

.languages-title89 {
    color: #ffffff;
    font-size: 1.5rem;
    text-align: center;
    margin-bottom: 1.5rem;
    font-weight: 600;
}

.languages-row89 {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2.5rem;
    flex-wrap: wrap;
}

.language-item89 {
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.3s ease;
}

.language-img89 {
    width: 50px;
    height: 50px;
    object-fit: contain;
    margin-bottom: 0.5rem;
}

.language-caption89 {
    color: #ffffff;
    font-size: 0.9rem;
    font-weight: 500;
    text-align: center;
}

/* Responsive Design */
@media (max-width: 768px) {
    .languages-row89 {
        gap: 1.5rem;
        padding: 0 1rem;
    }
    
    .language-img89 {
        width: 40px;
        height: 40px;
    }
    
    .language-caption89 {
        font-size: 0.8rem;
    }
}

@media (max-width: 480px) {
    .languages-row89 {
        gap: 1rem;
    }
    
    .language-item89 {
        flex: 0 0 20%;
    }
}

/* Initial "hidden" state */
.language-item89 {
    transform: translateY(-120%) scale(1.2);
    opacity: 0;
  }
  
  /* The slam down animation */
  @keyframes slamDown {
    0% {
      transform: translateY(-120%) scale(1.2);
      opacity: 0;
    }
    50% {
      transform: translateY(0) scale(1.0);
      opacity: 1;
    }
    65% {
      transform: translateY(-10%) scale(1.05);
    }
    80% {
      transform: translateY(5%) scale(0.95);
    }
    100% {
      transform: translateY(0) scale(1);
      opacity: 1;
    }
  }
  
  /* Animate "slam down" on scroll */
  .language-item89.lang-animate {
    animation: slamDown 2s ease-out forwards;
  }



/* Projects Container */
.projects-container47 {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
    text-align: center;
}

/* Projects Grid */
.projects-grid47 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem; /* Space between project cards */
    overflow: visible; /* Ensure hover effects aren't clipped */
    margin-top: 2rem;
}

/* Project Card */
.project-card47 {
    background: rgba(0, 0, 0, 0.9); /* Black with 90% transparency */
    border: 1px solid #444; /* Optional: Dark grey border for subtle distinction */
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); /* Adjusted for better contrast */
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-align: center;
    color: #fff; /* White text */
}

.project-card47:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

/* Project Image */
.project-image47 {
    width: 100%;
    height: 200px; /* Fixed height for uniformity */
    object-fit: cover; /* Ensures images fit properly */
    border-bottom: 1px solid #ddd;
}

/* Project Title */
.project-title47 {
    font-size: 1.25rem;
    color: #fff; /* White text for title */
    margin: 1rem 0 0.5rem;
}


/* Project Description */
.project-description47 {
    font-size: 1rem;
    color: #ccc; /* Light grey for better readability */
    margin: 0 1rem 1rem;
}


/* View Details Button */
.btn-project-details47 {
    display: inline-block;
    padding: 0.5rem 1rem;
    background-color: #4a90e2;
    color: white;
    text-decoration: none;
    font-size: 0.9rem;
    border-radius: 4px;
    margin-bottom: 1rem;
    transition: background-color 0.3s ease;
}

.btn-project-details47:hover {
    background-color: #007BFF;
}

/* General Projects Grid */
.projects-grid47 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Dynamically adjust columns */
    gap: 1.5rem; /* Space between project cards */
    margin-top: 2rem;
}

/* Individual Project Card */
.project-card47 {
    background: rgba(0, 0, 0, 0.9);
    border: 1px solid #444;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-align: center;
    color: #fff;
    width: 100%; /* Ensure cards scale dynamically */
}

/* Project Image */
.project-image47 {
    width: 100%;
    height: auto; /* Maintain aspect ratio */
    max-height: 200px; /* Limit height for uniformity */
    object-fit: cover;
    border-bottom: 1px solid #ddd;
}


/* General Mobile Styling */
.projects-grid47 {
    padding: 0.5rem; /* Add padding to avoid elements being too close to the edges */
    justify-content: center; /* Center the grid within the container */
}

/* General Projects Grid */
.projects-grid47 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Dynamically adjust columns */
    gap: 1.5rem; /* Space between project cards */
    margin-top: 2rem;
}

/* Individual Project Card */
.project-card47 {
    background: rgba(0, 0, 0, 0.9);
    border: 1px solid #444;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-align: center;
    color: #fff;
    width: 100%; /* Ensure cards scale dynamically */
}

/* Project Image */
.project-image47 {
    width: 100%;
    height: auto; /* Maintain aspect ratio */
    max-height: 200px; /* Limit height for uniformity */
    object-fit: cover;
    border-bottom: 1px solid #ddd;
}
/* Updated Responsive Design for Project Grid */
@media (max-width: 768px) {
    .projects-grid47 {
        grid-template-columns: repeat(2, 1fr); /* Two columns for mobile */
        gap: 1rem; /* Slightly increased gap between projects */
        padding: 0.5rem; /* Add padding around the grid */
    }

    .project-card47 {
        margin: 0 auto 1rem auto; /* Add bottom margin for spacing between rows */
    }

    .project-image47 {
        width: 100%; /* Ensure full width */
        max-height: 150px; /* Maintain compact height */
        object-fit: cover; /* Fit the image within its container */
    }

    .project-title47 {
        font-size: 0.9rem; /* Adjust title size for mobile */
        margin: 0.3rem 0; /* Adjust spacing */
    }

    .project-description47 {
        font-size: 0.8rem; /* Slightly smaller description font size */
        margin: 0.3rem; /* Compact spacing */
    }

    .btn-project-details47 {
        font-size: 0.75rem; /* Adjust button text size */
        padding: 0.4rem 0.8rem; /* Adjust button padding */
    }
}



/* Keyframes for glowing pulse */
@keyframes glowPulse {
    0% {
        box-shadow: 0 0 10px 3px rgba(255, 127, 80, 0.5);
    }
    50% {
        box-shadow: 0 0 15px 6px rgba(255, 127, 80, 0.4);
    }
    100% {
        box-shadow: 0 0 10px 3px rgba(255, 127, 80, 0.5);
    }
}



/* Initial state for project cards */
.project-card47 {
    opacity: 0; /* Fully transparent */
    transform: scale(0.6) translateY(30px); /* Slightly smaller and less movement */
    filter: blur(10px); /* Reduced blur for quicker clarity */
    transition: opacity 0.8s ease-out, transform 0.8s ease-out, filter 0.8s ease-out; /* Faster transition */
}

/* When in view */
.project-card47.animate {
    opacity: 1; /* Fully visible */
    transform: scale(1) translateY(0); /* Normal size and position */
    filter: blur(0); /* Clear and sharp */
}
























/* Container */

.container {
    margin: 0 auto;
    max-width: calc(100% - 50px);
    width: 1200px;
}

    .container.medium {
        width: 900px;
        color: #fff;
        font-size: 1.2em;
    }

    @media screen and (max-width: 1680px) {

        .container {
            width: 1200px;
        }

            .container.medium {
                width: 900px;
            }

    }

    @media screen and (max-width: 1280px) {

        .container {
            width: 960px;
        }

            .container.medium {
                width: 720px;
            }

    }

    @media screen and (max-width: 980px) {

        .container {
            width: 100%;
        }

            .container.medium {
                width: 75%;
            }

    }

    @media screen and (max-width: 736px) {

        .container {
            width: 100%;
            max-width: calc(100% - 30px);
        }

            .container.medium {
                width: 100%;
            }

    }

/* Row */

.row {
    display: flex;
    flex-wrap: wrap;
    
    box-sizing: border-box;
    align-items: stretch;
}

    .row > * {
        box-sizing: border-box;
    }

    .row.gtr-uniform > * > :last-child {
        margin-bottom: 0;
    }

    .row.aln-left {
        justify-content: flex-start;
    }

    .row.aln-center {
        justify-content: center;
    }

    .row.aln-right {
        justify-content: flex-end;
    }

    .row.aln-top {
        align-items: flex-start;
    }

    .row.aln-middle {
        align-items: center;
    }

    .row.aln-bottom {
        align-items: flex-end;
    }

    .row > .imp {
        order: -1;
    }

    .row > .col-1 {
        width: 8.33333%;
    }

    .row > .off-1 {
        margin-left: 8.33333%;
    }

    .row > .col-2 {
        width: 16.66667%;
    }

    .row > .off-2 {
        margin-left: 16.66667%;
    }

    .row > .col-3 {
        width: 25%;
    }

    .row > .off-3 {
        margin-left: 25%;
    }

    .row > .col-4 {
        width: 33.33333%;
    }

    .row > .off-4 {
        margin-left: 33.33333%;
    }

    .row > .col-5 {
        width: 41.66667%;
    }

    .row > .off-5 {
        margin-left: 41.66667%;
    }

    .row > .col-6 {
        width: 50%;
    }

    .row > .off-6 {
        margin-left: 50%;
        
    }

    .row > .col-7 {
        width: 58.33333%;
    }

    .row > .off-7 {
        margin-left: 58.33333%;
    }

    .row > .col-8 {
        width: 66.66667%;
    }

    .row > .off-8 {
        margin-left: 66.66667%;
    }

    .row > .col-9 {
        width: 75%;
    }

    .row > .off-9 {
        margin-left: 75%;
    }

    .row > .col-10 {
        width: 83.33333%;
    }

    .row > .off-10 {
        margin-left: 83.33333%;
    }

    .row > .col-11 {
        width: 91.66667%;
    }

    .row > .off-11 {
        margin-left: 91.66667%;
    }

    .row > .col-12 {
        width: 100%;
    }

    .row > .off-12 {
        margin-left: 100%;
    }

    .row.gtr-0 {
        margin-top: 0px;
        margin-left: 0px;
    }

        .row.gtr-0 > * {
            padding: 0px 0 0 0px;
        }

        .row.gtr-0.gtr-uniform {
            margin-top: 0px;
        }

            .row.gtr-0.gtr-uniform > * {
                padding-top: 0px;
            }

    .row.gtr-25 {
        margin-top: -6.25px;
        margin-left: -6.25px;
    }

        .row.gtr-25 > * {
            padding: 6.25px 0 0 6.25px;
        }

        .row.gtr-25.gtr-uniform {
            margin-top: -6.25px;
        }

            .row.gtr-25.gtr-uniform > * {
                padding-top: 6.25px;
            }

    .row.gtr-50 {
        margin-top: -12.5px;
        margin-left: -12.5px;
    }

        .row.gtr-50 > * {
            padding: 12.5px 0 0 12.5px;
        }

        .row.gtr-50.gtr-uniform {
            margin-top: -12.5px;
        }

            .row.gtr-50.gtr-uniform > * {
                padding-top: 12.5px;
            }

    .row {
        margin-top: -25px;
        margin-left: -25px;
    }

        .row > * {
            padding: 25px 0 0 25px;
        }

        .row.gtr-uniform {
            margin-top: -25px;
        }

            .row.gtr-uniform > * {
                padding-top: 25px;
            }

    .row.gtr-150 {
        margin-top: -37.5px;
        margin-left: -37.5px;
    }

        .row.gtr-150 > * {
            padding: 37.5px 0 0 37.5px;
        }

        .row.gtr-150.gtr-uniform {
            margin-top: -37.5px;
        }

            .row.gtr-150.gtr-uniform > * {
                padding-top: 37.5px;
            }

    .row.gtr-200 {
        margin-top: -50px;
        margin-left: -50px;
    }

        .row.gtr-200 > * {
            padding: 50px 0 0 50px;
        }

        .row.gtr-200.gtr-uniform {
            margin-top: -50px;
        }

            .row.gtr-200.gtr-uniform > * {
                padding-top: 50px;
            }

    @media screen and (max-width: 1680px) {

        .row {
            display: flex;
            flex-wrap: wrap;
            box-sizing: border-box;
            align-items: stretch;
        }

            .row > * {
                box-sizing: border-box;
            }

            .row.gtr-uniform > * > :last-child {
                margin-bottom: 0;
            }

            .row.aln-left {
                justify-content: flex-start;
            }

            .row.aln-center {
                justify-content: center;
            }

            .row.aln-right {
                justify-content: flex-end;
            }

            .row.aln-top {
                align-items: flex-start;
            }

            .row.aln-middle {
                align-items: center;
            }

            .row.aln-bottom {
                align-items: flex-end;
            }

            .row > .imp-xlarge {
                order: -1;
            }

            .row > .col-1-xlarge {
                width: 8.33333%;
            }

            .row > .off-1-xlarge {
                margin-left: 8.33333%;
            }

            .row > .col-2-xlarge {
                width: 16.66667%;
            }

            .row > .off-2-xlarge {
                margin-left: 16.66667%;
            }

            .row > .col-3-xlarge {
                width: 25%;
            }

            .row > .off-3-xlarge {
                margin-left: 25%;
            }

            .row > .col-4-xlarge {
                width: 33.33333%;
            }

            .row > .off-4-xlarge {
                margin-left: 33.33333%;
            }

            .row > .col-5-xlarge {
                width: 41.66667%;
            }

            .row > .off-5-xlarge {
                margin-left: 41.66667%;
            }

            .row > .col-6-xlarge {
                width: 50%;
            }

            .row > .off-6-xlarge {
                margin-left: 50%;
            }

            .row > .col-7-xlarge {
                width: 58.33333%;
            }

            .row > .off-7-xlarge {
                margin-left: 58.33333%;
            }

            .row > .col-8-xlarge {
                width: 66.66667%;
            }

            .row > .off-8-xlarge {
                margin-left: 66.66667%;
            }

            .row > .col-9-xlarge {
                width: 75%;
            }

            .row > .off-9-xlarge {
                margin-left: 75%;
            }

            .row > .col-10-xlarge {
                width: 83.33333%;
            }

            .row > .off-10-xlarge {
                margin-left: 83.33333%;
            }

            .row > .col-11-xlarge {
                width: 91.66667%;
            }

            .row > .off-11-xlarge {
                margin-left: 91.66667%;
            }

            .row > .col-12-xlarge {
                width: 100%;
            }

            .row > .off-12-xlarge {
                margin-left: 100%;
            }

            .row.gtr-0 {
                margin-top: 0px;
                margin-left: 0px;
            }

                .row.gtr-0 > * {
                    padding: 0px 0 0 0px;
                }

                .row.gtr-0.gtr-uniform {
                    margin-top: 0px;
                }

                    .row.gtr-0.gtr-uniform > * {
                        padding-top: 0px;
                    }

            .row.gtr-25 {
                margin-top: -6.25px;
                margin-left: -6.25px;
            }

                .row.gtr-25 > * {
                    padding: 6.25px 0 0 6.25px;
                }

                .row.gtr-25.gtr-uniform {
                    margin-top: -6.25px;
                }

                    .row.gtr-25.gtr-uniform > * {
                        padding-top: 6.25px;
                    }

            .row.gtr-50 {
                margin-top: -12.5px;
                margin-left: -12.5px;
            }

                .row.gtr-50 > * {
                    padding: 12.5px 0 0 12.5px;
                }

                .row.gtr-50.gtr-uniform {
                    margin-top: -12.5px;
                }

                    .row.gtr-50.gtr-uniform > * {
                        padding-top: 12.5px;
                    }

            .row {
                margin-top: -25px;
                margin-left: -25px;
            }

                .row > * {
                    padding: 25px 0 0 25px;
                }

                .row.gtr-uniform {
                    margin-top: -25px;
                }

                    .row.gtr-uniform > * {
                        padding-top: 25px;
                    }

            .row.gtr-150 {
                margin-top: -37.5px;
                margin-left: -37.5px;
            }

                .row.gtr-150 > * {
                    padding: 37.5px 0 0 37.5px;
                }

                .row.gtr-150.gtr-uniform {
                    margin-top: -37.5px;
                }

                    .row.gtr-150.gtr-uniform > * {
                        padding-top: 37.5px;
                    }

            .row.gtr-200 {
                margin-top: -50px;
                margin-left: -50px;
            }

                .row.gtr-200 > * {
                    padding: 50px 0 0 50px;
                }

                .row.gtr-200.gtr-uniform {
                    margin-top: -50px;
                }

                    .row.gtr-200.gtr-uniform > * {
                        padding-top: 50px;
                    }

    }

    @media screen and (max-width: 1280px) {

        .row {
            display: flex;
            flex-wrap: wrap;
            box-sizing: border-box;
            align-items: stretch;
        }

            .row > * {
                box-sizing: border-box;
            }

            .row.gtr-uniform > * > :last-child {
                margin-bottom: 0;
            }

            .row.aln-left {
                justify-content: flex-start;
            }

            .row.aln-center {
                justify-content: center;
            }

            .row.aln-right {
                justify-content: flex-end;
            }

            .row.aln-top {
                align-items: flex-start;
            }

            .row.aln-middle {
                align-items: center;
            }

            .row.aln-bottom {
                align-items: flex-end;
            }

            .row > .imp-large {
                order: -1;
            }

            .row > .col-1-large {
                width: 8.33333%;
            }

            .row > .off-1-large {
                margin-left: 8.33333%;
            }

            .row > .col-2-large {
                width: 16.66667%;
            }

            .row > .off-2-large {
                margin-left: 16.66667%;
            }

            .row > .col-3-large {
                width: 25%;
            }

            .row > .off-3-large {
                margin-left: 25%;
            }

            .row > .col-4-large {
                width: 33.33333%;
            }

            .row > .off-4-large {
                margin-left: 33.33333%;
            }

            .row > .col-5-large {
                width: 41.66667%;
            }

            .row > .off-5-large {
                margin-left: 41.66667%;
            }

            .row > .col-6-large {
                width: 50%;
            }

            .row > .off-6-large {
                margin-left: 50%;
            }

            .row > .col-7-large {
                width: 58.33333%;
            }

            .row > .off-7-large {
                margin-left: 58.33333%;
            }

            .row > .col-8-large {
                width: 66.66667%;
            }

            .row > .off-8-large {
                margin-left: 66.66667%;
            }

            .row > .col-9-large {
                width: 75%;
            }

            .row > .off-9-large {
                margin-left: 75%;
            }

            .row > .col-10-large {
                width: 83.33333%;
            }

            .row > .off-10-large {
                margin-left: 83.33333%;
            }

            .row > .col-11-large {
                width: 91.66667%;
            }

            .row > .off-11-large {
                margin-left: 91.66667%;
            }

            .row > .col-12-large {
                width: 100%;
            }

            .row > .off-12-large {
                margin-left: 100%;
            }

            .row.gtr-0 {
                margin-top: 0px;
                margin-left: 0px;
            }

                .row.gtr-0 > * {
                    padding: 0px 0 0 0px;
                }

                .row.gtr-0.gtr-uniform {
                    margin-top: 0px;
                }

                    .row.gtr-0.gtr-uniform > * {
                        padding-top: 0px;
                    }

            .row.gtr-25 {
                margin-top: -6.25px;
                margin-left: -6.25px;
            }

                .row.gtr-25 > * {
                    padding: 6.25px 0 0 6.25px;
                }

                .row.gtr-25.gtr-uniform {
                    margin-top: -6.25px;
                }

                    .row.gtr-25.gtr-uniform > * {
                        padding-top: 6.25px;
                    }

            .row.gtr-50 {
                margin-top: -12.5px;
                margin-left: -12.5px;
            }

                .row.gtr-50 > * {
                    padding: 12.5px 0 0 12.5px;
                }

                .row.gtr-50.gtr-uniform {
                    margin-top: -12.5px;
                }

                    .row.gtr-50.gtr-uniform > * {
                        padding-top: 12.5px;
                    }

            .row {
                margin-top: -25px;
                margin-left: -25px;
            }

                .row > * {
                    padding: 25px 0 0 25px;
                }

                .row.gtr-uniform {
                    margin-top: -25px;
                }

                    .row.gtr-uniform > * {
                        padding-top: 25px;
                    }

            .row.gtr-150 {
                margin-top: -37.5px;
                margin-left: -37.5px;
            }

                .row.gtr-150 > * {
                    padding: 37.5px 0 0 37.5px;
                }

                .row.gtr-150.gtr-uniform {
                    margin-top: -37.5px;
                }

                    .row.gtr-150.gtr-uniform > * {
                        padding-top: 37.5px;
                    }

            .row.gtr-200 {
                margin-top: -50px;
                margin-left: -50px;
            }

                .row.gtr-200 > * {
                    padding: 50px 0 0 50px;
                }

                .row.gtr-200.gtr-uniform {
                    margin-top: -50px;
                }

                    .row.gtr-200.gtr-uniform > * {
                        padding-top: 50px;
                    }

    }

    @media screen and (max-width: 980px) {

        .row {
            display: flex;
            flex-wrap: wrap;
            box-sizing: border-box;
            align-items: stretch;
        }

            .row > * {
                box-sizing: border-box;
            }

            .row.gtr-uniform > * > :last-child {
                margin-bottom: 0;
            }

            .row.aln-left {
                justify-content: flex-start;
            }

            .row.aln-center {
                justify-content: center;
            }

            .row.aln-right {
                justify-content: flex-end;
            }

            .row.aln-top {
                align-items: flex-start;
            }

            .row.aln-middle {
                align-items: center;
            }

            .row.aln-bottom {
                align-items: flex-end;
            }

            .row > .imp-medium {
                order: -1;
            }

            .row > .col-1-medium {
                width: 8.33333%;
            }

            .row > .off-1-medium {
                margin-left: 8.33333%;
            }

            .row > .col-2-medium {
                width: 16.66667%;
            }

            .row > .off-2-medium {
                margin-left: 16.66667%;
            }

            .row > .col-3-medium {
                width: 25%;
            }

            .row > .off-3-medium {
                margin-left: 25%;
            }

            .row > .col-4-medium {
                width: 33.33333%;
            }

            .row > .off-4-medium {
                margin-left: 33.33333%;
            }

            .row > .col-5-medium {
                width: 41.66667%;
            }

            .row > .off-5-medium {
                margin-left: 41.66667%;
            }

            .row > .col-6-medium {
                width: 50%;
            }

            .row > .off-6-medium {
                margin-left: 50%;
            }

            .row > .col-7-medium {
                width: 58.33333%;
            }

            .row > .off-7-medium {
                margin-left: 58.33333%;
            }

            .row > .col-8-medium {
                width: 66.66667%;
            }

            .row > .off-8-medium {
                margin-left: 66.66667%;
            }

            .row > .col-9-medium {
                width: 75%;
            }

            .row > .off-9-medium {
                margin-left: 75%;
            }

            .row > .col-10-medium {
                width: 83.33333%;
            }

            .row > .off-10-medium {
                margin-left: 83.33333%;
            }

            .row > .col-11-medium {
                width: 91.66667%;
            }

            .row > .off-11-medium {
                margin-left: 91.66667%;
            }

            .row > .col-12-medium {
                width: 100%;
            }

            .row > .off-12-medium {
                margin-left: 100%;
            }

            .row.gtr-0 {
                margin-top: 0px;
                margin-left: 0px;
            }

                .row.gtr-0 > * {
                    padding: 0px 0 0 0px;
                }

                .row.gtr-0.gtr-uniform {
                    margin-top: 0px;
                }

                    .row.gtr-0.gtr-uniform > * {
                        padding-top: 0px;
                    }

            .row.gtr-25 {
                margin-top: -6.25px;
                margin-left: -6.25px;
            }

                .row.gtr-25 > * {
                    padding: 6.25px 0 0 6.25px;
                }

                .row.gtr-25.gtr-uniform {
                    margin-top: -6.25px;
                }

                    .row.gtr-25.gtr-uniform > * {
                        padding-top: 6.25px;
                    }

            .row.gtr-50 {
                margin-top: -12.5px;
                margin-left: -12.5px;
            }

                .row.gtr-50 > * {
                    padding: 12.5px 0 0 12.5px;
                }

                .row.gtr-50.gtr-uniform {
                    margin-top: -12.5px;
                }

                    .row.gtr-50.gtr-uniform > * {
                        padding-top: 12.5px;
                    }

            .row {
                margin-top: -25px;
                margin-left: -25px;
            }

                .row > * {
                    padding: 25px 0 0 25px;
                }

                .row.gtr-uniform {
                    margin-top: -25px;
                }

                    .row.gtr-uniform > * {
                        padding-top: 25px;
                    }

            .row.gtr-150 {
                margin-top: -37.5px;
                margin-left: -37.5px;
            }

                .row.gtr-150 > * {
                    padding: 37.5px 0 0 37.5px;
                }

                .row.gtr-150.gtr-uniform {
                    margin-top: -37.5px;
                }

                    .row.gtr-150.gtr-uniform > * {
                        padding-top: 37.5px;
                    }

            .row.gtr-200 {
                margin-top: -50px;
                margin-left: -50px;
            }

                .row.gtr-200 > * {
                    padding: 50px 0 0 50px;
                }

                .row.gtr-200.gtr-uniform {
                    margin-top: -50px;
                }

                    .row.gtr-200.gtr-uniform > * {
                        padding-top: 50px;
                    }

    }

    @media screen and (max-width: 736px) {

        .row {
            display: flex;
            flex-wrap: wrap;
            box-sizing: border-box;
            align-items: stretch;
        }

            .row > * {
                box-sizing: border-box;
            }

            .row.gtr-uniform > * > :last-child {
                margin-bottom: 0;
            }

            .row.aln-left {
                justify-content: flex-start;
            }

            .row.aln-center {
                justify-content: center;
            }

            .row.aln-right {
                justify-content: flex-end;
            }

            .row.aln-top {
                align-items: flex-start;
            }

            .row.aln-middle {
                align-items: center;
            }

            .row.aln-bottom {
                align-items: flex-end;
            }

            .row > .imp-small {
                order: -1;
            }

            .row > .col-1-small {
                width: 8.33333%;
            }

            .row > .off-1-small {
                margin-left: 8.33333%;
            }

            .row > .col-2-small {
                width: 16.66667%;
            }

            .row > .off-2-small {
                margin-left: 16.66667%;
            }

            .row > .col-3-small {
                width: 25%;
            }

            .row > .off-3-small {
                margin-left: 25%;
            }

            .row > .col-4-small {
                width: 33.33333%;
            }

            .row > .off-4-small {
                margin-left: 33.33333%;
            }

            .row > .col-5-small {
                width: 41.66667%;
            }

            .row > .off-5-small {
                margin-left: 41.66667%;
            }

            .row > .col-6-small {
                width: 50%;
            }

            .row > .off-6-small {
                margin-left: 50%;
            }

            .row > .col-7-small {
                width: 58.33333%;
            }

            .row > .off-7-small {
                margin-left: 58.33333%;
            }

            .row > .col-8-small {
                width: 66.66667%;
            }

            .row > .off-8-small {
                margin-left: 66.66667%;
            }

            .row > .col-9-small {
                width: 75%;
            }

            .row > .off-9-small {
                margin-left: 75%;
            }

            .row > .col-10-small {
                width: 83.33333%;
            }

            .row > .off-10-small {
                margin-left: 83.33333%;
            }

            .row > .col-11-small {
                width: 91.66667%;
            }

            .row > .off-11-small {
                margin-left: 91.66667%;
            }

            .row > .col-12-small {
                width: 100%;
            }

            .row > .off-12-small {
                margin-left: 100%;
            }

            .row.gtr-0 {
                margin-top: 0px;
                margin-left: 0px;
            }

                .row.gtr-0 > * {
                    padding: 0px 0 0 0px;
                }

                .row.gtr-0.gtr-uniform {
                    margin-top: 0px;
                }

                    .row.gtr-0.gtr-uniform > * {
                        padding-top: 0px;
                    }

            .row.gtr-25 {
                margin-top: -3.75px;
                margin-left: -3.75px;
            }

                .row.gtr-25 > * {
                    padding: 3.75px 0 0 3.75px;
                }

                .row.gtr-25.gtr-uniform {
                    margin-top: -3.75px;
                }

                    .row.gtr-25.gtr-uniform > * {
                        padding-top: 3.75px;
                    }

            .row.gtr-50 {
                margin-top: -7.5px;
                margin-left: -7.5px;
            }

                .row.gtr-50 > * {
                    padding: 7.5px 0 0 7.5px;
                }

                .row.gtr-50.gtr-uniform {
                    margin-top: -7.5px;
                }

                    .row.gtr-50.gtr-uniform > * {
                        padding-top: 7.5px;
                    }

            .row {
                margin-top: -15px;
                margin-left: -15px;
            }

                .row > * {
                    padding: 15px 0 0 15px;
                }

                .row.gtr-uniform {
                    margin-top: -15px;
                }

                    .row.gtr-uniform > * {
                        padding-top: 15px;
                    }

            .row.gtr-150 {
                margin-top: -22.5px;
                margin-left: -22.5px;
            }

                .row.gtr-150 > * {
                    padding: 22.5px 0 0 22.5px;
                }

                .row.gtr-150.gtr-uniform {
                    margin-top: -22.5px;
                }

                    .row.gtr-150.gtr-uniform > * {
                        padding-top: 22.5px;
                    }

            .row.gtr-200 {
                margin-top: -30px;
                margin-left: -30px;
            }

                .row.gtr-200 > * {
                    padding: 30px 0 0 30px;
                }

                .row.gtr-200.gtr-uniform {
                    margin-top: -30px;
                }

                    .row.gtr-200.gtr-uniform > * {
                        padding-top: 30px;
                    }

    }

/* Form */

form label {
    color: #3e3e3e;
    font-weight: 700;
    display: block;
    margin: 0 0 0.5em 0;
}

form input[type=text],
form input[type=email],
form input[type=password],
form select,
form textarea {
    -moz-transition: background .2s ease-in-out, box-shadow .2s ease-in-out;
    -webkit-transition: background .2s ease-in-out, box-shadow .2s ease-in-out;
    -ms-transition: background .2s ease-in-out, box-shadow .2s ease-in-out;
    transition: background .2s ease-in-out, box-shadow .2s ease-in-out;
    -webkit-appearance: none;
    display: block;
    border: 0;
    padding: 0.75em;
    font-size: 1em;
    border-radius: 8px;
    border: solid 1px #ddd;
    background: #fff;
    color: #bbb;
    box-shadow: inset 0px 2px 3px 1px rgba(0, 0, 0, 0.05), 0px 1px 0px 0px rgba(255, 255, 255, 0.025);
    width: 100%;
}

    form input[type=text]:focus,
    form input[type=email]:focus,
    form input[type=password]:focus,
    form select:focus,
    form textarea:focus {
        background: #fafafa;
        box-shadow: inset 0px 2px 5px 0px rgba(0, 0, 0, 0.05), 0px 1px 0px 0px rgba(255, 255, 255, 0.025), inset 0px 0px 2px 1px #43bff0;
    }

form textarea {
    height: 15em;
}
/* Form - Responsive Updates */
form input[type=text],
form input[type=email],
form input[type=password],
form select,
form textarea {
    max-width: 100%; /* Prevent inputs from exceeding the container width */
    width: calc(100% - 2em); /* Add slight inner padding */
    box-sizing: border-box; /* Include padding and border in the total width */
    margin: 0; /* Remove unintended margins */
    padding: 0.75em; /* Maintain consistent padding */
}
/* Modal Container */
.modal {
    display: none; /* Hidden by default */
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.4); /* Black background with opacity */
    align-items: center;
    justify-content: center;
}

/* Modal Content */
.modal-content {
    background-color: #fff;
    margin: auto;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
    width: 300px;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    position: relative; /* Position relative for the close button */
}



/* Close Button */
.close-button {
    position: absolute;
    top: 10px;
    right: 15px;
    color: #aaa;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
}

@media only screen and (max-width: 768) {
    .actions li {
        margin-bottom: 15px; /* Adds spacing between buttons */
    }

    .actions input {
        width: 100%; /* Makes both buttons the same width */
        box-sizing: border-box; /* Ensures padding is included in the width */
    }
}

.close-button:hover {
    color: #333;
}

form .actions:last-child {
    margin-bottom: 0;
}

form ::-webkit-input-placeholder {
    color: #555 !important;
}

form :-moz-placeholder {
    color: #555 !important;
}

form ::-moz-placeholder {
    color: #555 !important;
}

form :-ms-input-placeholder {
    color: #555 !important;
}

form ::-moz-focus-inner {
    border: 0;
}

/* Tables */

table {
    width: 100%;
}

    table.default {
        width: 100%;
    }

        table.default tr {
            border-top: solid 1px #eee;
        }

            table.default tr:first-child {
                border-top: 0;
            }

        table.default td {
            padding: 0.5em 1em 0.5em 1em;
        }

        table.default th {
            text-align: left;
            padding: 0.5em 1em 0.5em 1em;
            font-weight: 600;
            margin: 0 0 1em 0;
        }

        table.default thead {
            background: #4f4f4f;
            color: #fff;
        }



/* Button */

input[type="button"],
input[type="submit"],
input[type="reset"],
button,
.button {
    background-image: url("images/bg.png"), -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
    background-image: url("images/bg.png"), -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
    background-image: url("images/bg.png"), -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
    background-image: url("images/bg.png"), linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
    -moz-transition: background-color .2s ease-in-out;
    -webkit-transition: background-color .2s ease-in-out;
    -ms-transition: background-color .2s ease-in-out;
    transition: background-color .2s ease-in-out;
    -webkit-appearance: none;
    position: relative;
    display: inline-block;
    color: #fff !important;
    text-decoration: none;
    font-weight: 700;
    border: 0;
    outline: 0;
    cursor: pointer;
    border-radius: 8px;
    text-shadow: -1px -1px 0.5px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    box-shadow: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.5), inset 0px 2px 1px 0px rgba(255, 255, 255, 0.75);
    background-color: #43B3E0;
    padding: 1em 2.35em 1em 2.35em;
    font-size: 1.1em;
    max-width: 24em;
}

    input[type="button"]:hover,
    input[type="submit"]:hover,
    input[type="reset"]:hover,
    button:hover,
    .button:hover {
        background-color: #43bff0;
        color: #fff !important;
    }

    input[type="button"]:active,
    input[type="submit"]:active,
    input[type="reset"]:active,
    button:active,
    .button:active {
        background-color: #3BA8D3;
        top: 1px;
    }

    input[type="button"].large,
    input[type="submit"].large,
    input[type="reset"].large,
    button.large,
    .button.large {
        font-size: 1.5em;
        letter-spacing: -0.025em;
    }

    input[type="button"].alt,
    input[type="submit"].alt,
    input[type="reset"].alt,
    button.alt,
    .button.alt {
        background-color: #444;
        box-shadow: inset 0px 0px 0px 1px #242424, inset 0px 2px 1px 0px rgba(255, 255, 255, 0.2);
    }

        input[type="button"].alt:hover,
        input[type="submit"].alt:hover,
        input[type="reset"].alt:hover,
        button.alt:hover,
        .button.alt:hover {
            background-color: #4f4f4f;
            color: #fff !important;
        }

        input[type="button"].alt:active,
        input[type="submit"].alt:active,
        input[type="reset"].alt:active,
        button.alt:active,
        .button.alt:active {
            background-color: #3f3f3f;
        }

/* List */

ul {
    list-style: disc;
    padding-left: 1em;
}

    ul li {
        padding-left: 0.5em;
    }

ol {
    list-style: decimal;
    padding-left: 1.25em;
}

    ol li {
        padding-left: 0.25em;
    }

/* Social */

ul.social {
    cursor: default;
    margin: 0;
    list-style: none;
    padding-left: 0;
}

    ul.social li {
        position: relative;
        display: inline-block;
        margin: 0.25em;
        top: 0;
        padding-left: 0;
    }

        ul.social li a {
            -moz-transition: top .2s ease-in-out;
            -webkit-transition: top .2s ease-in-out;
            -ms-transition: top .2s ease-in-out;
            transition: top .2s ease-in-out;
            display: block;
            width: 48px;
            height: 48px;
            border-radius: 6px;
            top: 0;
            position: relative;
        }

            ul.social li a:before {
                background-image: url("images/bg.png"), -moz-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
                background-image: url("images/bg.png"), -webkit-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
                background-image: url("images/bg.png"), -ms-linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
                background-image: url("images/bg.png"), linear-gradient(top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2));
                -moz-transition: background-color .2s ease-in-out;
                -webkit-transition: background-color .2s ease-in-out;
                -ms-transition: background-color .2s ease-in-out;
                transition: background-color .2s ease-in-out;
                background-color: #ffffff;
                border-radius: 6px;
                box-shadow: inset 0px 0px 0px 1px #282828, inset 0px 2px 1px 0px rgba(255, 255, 255, 0.1);
                color: #2E2E2E !important;
                display: block;
                font-size: 26px;
                height: 48px;
                line-height: 48px;
                text-align: center;
                outline: 0;
                overflow: hidden;
                text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.1);
                width: 48px;
            }

            ul.social li a.fa-twitter {
                background-color: #2DAAE4;
            }

            ul.social li a.fa-facebook-f {
                background-color: #3C5A98;
            }

            ul.social li a.fa-dribbble {
                background-color: #C4376B;
            }

            ul.social li a.fa-linkedin-in {
                background-color: #006599;
            }

            ul.social li a.fa-tumblr {
                background-color: #51718A;
            }

            ul.social li a.fa-google-plus {
                background-color: #DA2713;
            }

            ul.social li a.fa-github {
                background-color: #FAFAFA;
            }

            ul.social li a.fa-rss {
                background-color: #F2600B;
            }

            ul.social li a.fa-instagram {
                background-color: #E0D7C8;
            }

            ul.social li a.fa-foursquare {
                background-color: #39A3D4;
            }

            ul.social li a.fa-skype {
                background-color: #10BEF1;
            }

            ul.social li a.fa-soundcloud {
                background-color: #FE5419;
            }

            ul.social li a.fa-youtube {
                background-color: #BF2E25;
            }

            ul.social li a.fa-blogger {
                background-color: #FF6501;
            }

            ul.social li a.fa-flickr {
                background-color: #0062DB;
            }

            ul.social li a.fa-vimeo {
                background-color: #4C8AB0;
            }

            ul.social li a:hover {
                top: -5px;
            }

                ul.social li a:hover:before {
                    background-color: transparent;
                }

/* Actions */

ul.actions {
    list-style: none;
    padding-left: 0;
}

    ul.actions li {
        display: inline-block;
        margin: 0 0 0 1em;
        padding-left: 0;
    }

        ul.actions li:first-child {
            margin-left: 0;
        }

/* Box */

.box {
    background: #fff;
    box-shadow: inset 0px 0px 0px 1px rgba(0, 0, 0, 0.15), 0px 2px 3px 0px rgba(0, 0, 0, 0.1);
    text-align: center;
    padding: 2em;
}

    .box.style1 {
        padding: 3em 2em 3.5em 2em;
    }

        .box.style1 h3 {
            margin-bottom: 0.5em;
        }

    .box.style2 h3 {
        margin-bottom: 0.25em;
    }

    .box.style2 .image {
        position: relative;
        left: 2em;
        top: 2em;
        margin: -4em 0 4em -4em;
        width: auto;
    }

/* Icons */

.icon {
    text-decoration: none;
    text-decoration: none;
}

    .icon:before {
        -moz-osx-font-smoothing: grayscale;
        -webkit-font-smoothing: antialiased;
        display: inline-block;
        font-style: normal;
        font-variant: normal;
        text-rendering: auto;
        line-height: 1;
        text-transform: none !important;
        font-family: 'Font Awesome 5 Free';
        font-weight: 400;
    }

    .icon:before {
        font-size: 1.25em;
    }

    .icon > .label {
        display: none;
    }

    .icon.solid:before {
        font-weight: 900;
    }

    .icon.brands:before {
        font-family: 'Font Awesome 5 Brands';
    }

    .icon.featured {
        color: #EA8A95;
        display: block;
        margin: 0 0 1.5em 0;
        cursor: default;
    }

        .icon.featured:before {
            font-size: 6em;
        }

/* Wrappers */

.wrapper {
    background-image: url("images/3d-rendering-abstract-black-white-background.jpg");
    box-shadow: inset 0px 1px 0px 0px rgba(0, 0, 0, 0.05), inset 0px 2px 3px 0px rgba(0, 0, 0, 0.1);
    padding: 8em 0 8em 0;
    text-align: center;
}

    .wrapper.style1 {
        background-image: none;
        background-color: #fff;
    }

    .wrapper.style2 {
        background-color: #fafafa;
        text-shadow: 1px 1px 0px #fff;
    }

    .wrapper.style3 {
        background-color: #f4f4f4;
        text-shadow: 1px 1px 0px #fff;
    }

    .wrapper.style4 {
        background-color: #303030;
        color: #999;
        text-shadow: -1px -1px 0px #181818;
    }

        .wrapper.style4 h1, .wrapper.style4 h2, .wrapper.style4 h3, .wrapper.style4 h4, .wrapper.style4 h5, .wrapper.style4 h6 {
            color: #fff;
        }

        .wrapper.style4 h2 {
            margin-top: -90px;
        }


        .wrapper.style4 form input[type=text],
        .wrapper.style4 form input[type=password],
        .wrapper.style4 form select,
        .wrapper.style4 form textarea {
            border: none;
            background: #282828;
        }

            .wrapper.style4 form input[type=text]:focus,
            .wrapper.style4 form input[type=password]:focus,
            .wrapper.style4 form select:focus,
            .wrapper.style4 form textarea:focus {
                background: #252525;
            }
/* Center input fields on mobile */
@media screen and (max-width: 768px) {
    .row {
      justify-content: center;
    }
  
    .col-6, .col-12 {
      max-width: 100%;
      text-align: center;
    }
  
    form input[type="text"],
    form textarea {
      margin: 0 auto;
      display: block;
      width: 90%; /* Adjust the width for better responsiveness */
    }
  
    form .actions {
      justify-content: center;
    }
  
    form ul.actions li {
      text-align: center;
    }
  }