/* Variables */
:root {
    --primary-color: #0a2647;
    --secondary-color: #2196F3;
    --hover-color: #1565C0;
    --accent-color: #FF5722;
    --text-color: #333;
    --light-text: #6c757d;
    --background-color: #f8f9fa;
    --card-bg: #ffffff;
    --footer-bg: #0a2647;
    --border-color: #e9ecef;
    --title-color: #0a2647;
    --section-title-color: #0a2647;
    --section-title-underline: linear-gradient(90deg, #2196F3, #0a2647);
    --box-shadow: 0 5px 20px rgba(10, 38, 71, 0.08);
    --transition: all 0.3s ease;
    --gradient-bg: linear-gradient(135deg, #0a2647 0%, #2196F3 100%);
    --section-padding: 80px 0;
    --header-height: 70px;
    --border-radius: 10px;
    --btn-radius: 30px;
}

/* Global Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body, main, section, .container, .domain-marketplace {
    overflow-x: hidden !important;
    max-width: 100vw !important;
}

body {
    font-family: 'Poppins', 'Roboto', 'Segoe UI', Arial, sans-serif;
    line-height: 1.6;
    color: var(--text-color);
    overflow-x: hidden;
    width: 100%;
    position: relative;
    background-color: var(--background-color);
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 600;
    line-height: 1.3;
}

p {
    margin: 0 0 15px;
}

a {
    color: var(--secondary-color);
    transition: var(--transition);
    word-break: break-word;
    text-decoration: none;
}

a:hover {
    color: var(--hover-color);
}

ul, ol {
    list-style: none;
}

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

.container {
    max-width: 1200px;
    width: 100%;
    padding-left: 15px;
    padding-right: 15px;
    margin: 0 auto;
    overflow-x: hidden;
}

.section-title {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--section-title-color);
    text-align: center;
    margin-bottom: 50px;
    position: relative;
    padding-bottom: 15px;
}

.section-title::after {
    content: '';
    position: absolute;
    width: 80px;
    height: 4px;
    background: var(--section-title-underline);
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 2px;
}

/* Button Styles */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 30px;
    border-radius: var(--btn-radius);
    font-weight: 600;
    transition: var(--transition);
    text-align: center;
    border: none;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.1);
    z-index: -1;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}

.btn:hover::before {
    transform: scaleX(1);
    transform-origin: left;
}

.btn-primary {
    background: var(--gradient-bg);
    color: white;
    box-shadow: 0 5px 15px rgba(33, 150, 243, 0.3);
}

.btn-primary:hover {
    box-shadow: 0 8px 25px rgba(33, 150, 243, 0.4);
    transform: translateY(-3px);
}

.btn-secondary {
    background-color: transparent;
    color: var(--secondary-color);
    border: 2px solid var(--secondary-color);
}

.btn-secondary:hover {
    background-color: var(--secondary-color);
    color: white;
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(33, 150, 243, 0.2);
}

.btn-accent {
    background-color: var(--accent-color);
    color: white;
    box-shadow: 0 5px 15px rgba(255, 87, 34, 0.3);
}

.btn-accent:hover {
    box-shadow: 0 8px 25px rgba(255, 87, 34, 0.4);
    transform: translateY(-3px);
}

.btn-icon {
    margin-left: 8px;
    font-size: 1rem;
    transition: transform 0.3s ease;
}

.btn:hover .btn-icon {
    transform: translateX(3px);
}

/* Animation classes */
.fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in.active {
    opacity: 1;
    transform: translateY(0);
}

.slide-in-left {
    opacity: 0;
    transform: translateX(-30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.slide-in-left.active {
    opacity: 1;
    transform: translateX(0);
}

.slide-in-right {
    opacity: 0;
    transform: translateX(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.slide-in-right.active {
    opacity: 1;
    transform: translateX(0);
}

.scale-in {
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.scale-in.active {
    opacity: 1;
    transform: scale(1);
}

/* Header */
#header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.98);
    z-index: 1000;
    padding: 15px 0;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
    transition: all 0.4s ease;
}

#header.scrolled {
    background-color: rgba(10, 38, 71, 0.97);
    padding: 10px 0;
}

#header.scrolled #navbar a:not(.consult-btn):not([href="#domain-marketplace"]) {
    color: #40c4ff !important;
    font-weight: 500;
    text-shadow: 0 2px 8px rgba(0,0,0,0.18);
}

#navbar {
    width: 100%;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    padding: 0 0px;
    z-index: 2000;
}

#navbar ul {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    gap: 0;
}

#navbar li {
    margin: 0 0.1px;
    white-space: nowrap;
}

#navbar a {
    display: inline-flex;
    align-items: center;
    font-size: 1rem;
    font-weight: 500;
    padding: 5px 9px;   
    text-decoration: none;
    color: var(--text-color);
    background: none;
    border: none;
    border-radius: 6px;
    transition: background 0.2s, color 0.2s;
    white-space: nowrap;
}

#navbar a:hover {
    color: var(--secondary-color);
}

#navbar a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--secondary-color);
    transition: width 0.3s ease;
}

#navbar a:hover::after, #navbar a.active::after {
    width: 100%;
}

#navbar a.active {
    color: var(--secondary-color);
    font-weight: 600;
}

.consult-btn,
#navbar a[href="#domain-marketplace"] {
    background: linear-gradient(90deg, #0056b3 0%, #00b3a4 100%) !important;
    color: #fff !important;
    font-weight: 900;
    text-shadow: 0 2px 8px rgba(0,0,0,0.35), 0 1px 2px #000;
    letter-spacing: 0.5px;
    border-radius: 20px;
    padding: 8px 18px;
    margin-left: 8px;
    box-shadow: 0 2px 12px rgba(0,124,240,0.10);
    transition: background 0.2s, color 0.2s, box-shadow 0.2s;
    white-space: nowrap;
    display: inline-block;
    border: none;
    text-shadow: 0 1px 6px rgba(0,0,0,0.18), 0 0px 1px #000;
}

#navbar a[href="#domain-marketplace"] {
    background: linear-gradient(90deg, #c82333 0%, #ff7eb3 100%) !important;
    color: #fff !important;
    font-weight: 900;
    text-shadow: 0 2px 8px rgba(0,0,0,0.35), 0 1px 2px #000;
    letter-spacing: 0.5px;
    border-radius: 20px;
    padding: 8px 18px;
    margin-left: 8px;
    box-shadow: 0 2px 12px rgba(255,88,88,0.10);
    transition: background 0.2s, color 0.2s, box-shadow 0.2s;
    white-space: nowrap;
    display: inline-block;
    border: none;
    text-shadow: 0 1px 6px rgba(0,0,0,0.18), 0 0px 1px #000;
}

.consult-btn:hover,
#navbar a[href="#domain-marketplace"]:hover {
    background: linear-gradient(90deg, #005fa3 0%, #00b3a4 100%);
    color: #fff !important;
    box-shadow: 0 4px 16px rgba(0,124,240,0.18);
}

#navbar a .fab.fa-github {
    margin-right: 6px;
    font-size: 1.1em;
}

@media (max-width: 992px) {
    #navbar ul {
        flex-direction: column;
        align-items: flex-start;
    }
    #navbar li {
        margin: 8px 0;
    }
}

/* Mobile menu toggle button */
.mobile-toggle {
    display: none;
    position: fixed;
    top: 20px;
    right: 20px;
    width: 45px;
    height: 45px;
    background: rgba(255, 255, 255, 0.98);
    border-radius: 50%;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    z-index: 1001;
    cursor: pointer;
    transition: all 0.3s ease;
    border: none;
    outline: none;
}

.mobile-toggle i {
    font-size: 24px;
    color: var(--primary-color);
    transition: all 0.3s ease;
}

@media (max-width: 992px) {
    .mobile-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #header.scrolled .mobile-toggle {
        background: rgba(10, 38, 71, 0.98);
    }

    #header.scrolled .mobile-toggle i {
        color: #fff;
    }

    #navbar {
        position: fixed;
        top: 0;
        right: -100%;
        width: 80%;
        max-width: 400px;
        height: 100vh;
        background: rgba(255, 255, 255, 0.98);
        padding: 80px 20px 20px;
        transition: right 0.3s ease-in-out;
        box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
        z-index: 1000;
        overflow-y: auto;
    }

    #navbar.show {
        right: 0;
    }

    #navbar ul {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    #navbar li {
        width: 100%;
        margin: 0;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    }

    #navbar li:last-child {
        border-bottom: none;
    }

    #navbar a {
        display: block;
        padding: 12px 0;
        color: var(--text-color);
        font-size: 1.1rem;
        width: 100%;
    }

    #navbar a:hover {
        color: var(--secondary-color);
    }

    #navbar a::after {
        display: none;
    }

    .consult-btn {
        margin-top: 20px;
        width: 100%;
        text-align: center;
        background: var(--gradient-bg);
        color: white !important;
        padding: 12px 20px;
        border-radius: 8px;
        text-decoration: none;
    }

    /* Add overlay when menu is open */
    body.menu-open::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 999;
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
    }

    body.menu-open::before {
        opacity: 1;
        visibility: visible;
    }
}

@media (max-width: 576px) {
    #navbar {
        width: 100%;
        max-width: none;
    }

    .mobile-toggle {
        top: 15px;
        right: 15px;
        width: 40px;
        height: 40px;
    }

    .mobile-toggle i {
        font-size: 20px;
    }

    #navbar a {
        font-size: 1rem;
        padding: 10px 0;
    }
}

@media (max-width: 992px) {
    .mobile-toggle {
        display: block;
        cursor: pointer;
        z-index: 1001;
    }

    #navbar {
        position: fixed;
        top: 0;
        right: -100%;
        width: 80%;
        max-width: 400px;
        height: 100vh;
        background-color: rgba(255, 255, 255, 0.98);
        padding: 80px 20px 20px;
        transition: right 0.3s ease;
        box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
    }

    #navbar.show {
        right: 0;
    }

    #navbar ul {
        flex-direction: column;
        align-items: flex-start;
    }

    #navbar li {
        margin: 10px 0;
        width: 100%;
    }

    #navbar a {
        display: block;
        padding: 10px 0;
        color: var(--text-color);
        font-size: 1.1rem;
    }

    #navbar a:hover {
        color: var(--secondary-color);
    }

    #navbar a::after {
        display: none;
    }

    body.menu-open::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 999;
    }
}

@media (max-width: 576px) {
    #navbar {
        width: 100%;
        max-width: none;
    }

    .mobile-toggle {
        margin-right: 15px;
    }

    #navbar a {
        font-size: 1rem;
    }
}

/* Hero Section */
#home {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: var(--gradient-bg);
    animation: fadeIn 1s ease-out;
    padding: calc(var(--header-height) + 3rem) 0 3rem;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

#home, #home * {
    overflow-y: hidden !important;
}

#home::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="0 0 800 800"><g fill="none" stroke="rgba(255,255,255,0.05)" stroke-width="1"><path d="M769 229L1037 260.9M927 880L731 737 520 660 309 538 40 599 295 764 126.5 879.5 40 599-197 493 102 382-31 229 126.5 79.5-69-63"/><path d="M-31 229L237 261 390 382 603 493 308.5 537.5 101.5 381.5M370 905L295 764"/><path d="M520 660L578 842 731 737 840 599 603 493 520 660 295 764 309 538 390 382 539 269 769 229 577.5 41.5 370 105 295 -36 126.5 79.5 237 261 102 382 40 599 -69 737 127 880"/><path d="M520-140L578.5 42.5 731-63M603 493L539 269 237 261 370 105M902 382L539 269"/><path d="M-222 42L126.5 79.5 370 105 539 269 577.5 41.5 927 80 769 229 902 382 603 493 731 737M295-36L577.5 41.5M578 842L295 764M40-201L127 80M102 382L-31 229"/></g></svg>');
    background-position: 50%;
    opacity: 0.3;
    z-index: 0;
}

.header-content {
    position: relative;
    z-index: 2;
    text-align: center;
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
}

.header-text h1 {
    font-size: 3.5rem;
    font-weight: 800;
    margin-bottom: 1.5rem;
    color: #fff;
    text-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    animation: pulse 4s infinite;
    letter-spacing: 2px;
}

.header-text p {
    font-size: 1.2rem;
    color: rgba(255, 255, 255, 0.95);
    margin-bottom: 2rem;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.8;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.hero-content {
    text-align: center;
    margin-top: 2rem;
    position: relative;
    z-index: 2;
}

.hero-content h2 {
    color: #fff;
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.hero-content p {
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.1rem;
    max-width: 600px;
    margin: 0 auto;
}

/* About Section */
#about {
    min-height: 95vh;
    background: linear-gradient(120deg, #f5f7fa 0%, #c3cfe2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
#about .container {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 48px 16px 48px 16px;
}
#about .section-title {
    text-align: center;
    font-size: 2.2rem;
    font-weight: 700;
    color: #0a2647;
    margin-bottom: 32px;
    
    letter-spacing: 1px;
}
#about .about-content {
    display: flex;
    gap: 32px;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
}
#about .summary, #about .personal-info {
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 4px 24px rgba(33, 150, 243, 0.10);
    padding: 28px 24px 20px 24px;
    flex: 1 1 340px;
    min-width: 260px;
    max-width: 420px;
    font-size: 1rem;
    margin-bottom: 0;
    transition: box-shadow 0.2s;
}
#about .summary h3 {
    font-size: 1.15rem;
    font-weight: 600;
    color: #1976d2;
    margin-bottom: 10px;
    letter-spacing: 0.5px;
}
#about .summary p, #about .personal-info p {
    margin-bottom: 10px;
    font-size: 1rem;
    color: #333;
}
#about .info-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 10px;
    font-size: 0.98rem;
}
#about .info-item i {
    color: #2196f3;
    font-size: 1.1em;
    margin-top: 2px;
}
#about .contact-link {
    color: #1976d2;
    text-decoration: underline;
    word-break: break-all;
}
#about .contact-link:hover {
    color: #0a2647;
}
@media (max-width: 900px) {
    #about .about-content {
        flex-direction: column;
        align-items: stretch;
        gap: 20px;
    }
    #about .container {
        padding: 32px 8px 32px 8px;
    }
}

#about::before {
    content: '';
    position: absolute;
    top: -150px;
    right: -150px;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(33, 150, 243, 0.05) 0%, rgba(33, 150, 243, 0) 70%);
    border-radius: 50%;
    z-index: 0;
}

#about::after {
    content: '';
    position: absolute;
    bottom: -150px;
    left: -150px;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(33, 150, 243, 0.05) 0%, rgba(33, 150, 243, 0) 70%);
    border-radius: 50%;
    z-index: 0;
}

.about-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-top: 3rem;
    position: relative;
    z-index: 1;
}

.summary {
    padding: 40px;
    border-radius: var(--border-radius);
    background-color: var(--card-bg);
    box-shadow: var(--box-shadow);
    transition: all 0.4s ease;
    border: 1px solid rgba(33, 150, 243, 0.1);
    height: 100%;
    position: relative;
    overflow: hidden;
    opacity: 1;
    transform: translateX(0);
    animation: none;
}

.summary::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 5px;
    height: 0;
    background: var(--gradient-bg);
    transition: height 0.6s ease;
}

.summary:hover::before {
    height: 100%;
}

.summary:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(10, 38, 71, 0.15);
    border-color: rgba(33, 150, 243, 0.2);
}

.summary h3 {
    color: var(--secondary-color);
    margin-bottom: 20px;
    font-weight: 700;
    position: relative;
    padding-bottom: 12px;
    display: inline-block;
    font-size: 1.5rem;
    transition: all 0.3s ease;
}

.summary h3::after {
    content: '';
    position: absolute;
    width: 70%;
    height: 3px;
    background: var(--gradient-bg);
    bottom: 0;
    left: 0;
    border-radius: 2px;
    transition: width 0.4s ease;
}

.summary:hover h3::after {
    width: 100%;
}

.summary p {
    line-height: 1.8;
    color: var(--text-color);
    font-size: 1.05rem;
    text-align: justify;
    position: relative;
    z-index: 1;
}

.summary.visible p {
    position: relative;
    overflow: hidden;
    white-space: normal;
    animation: fade-in 1s ease-out forwards;
    animation-delay: 1s;
    opacity: 1;
}

.summary p::after {
    content: '|';
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    animation: typewriter-caret 0.8s infinite;
    opacity: 0;
}

.summary.visible p::after {
    opacity: 1;
}

@keyframes fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes typewriter-caret {
    from, to {
        opacity: 0;
    }
    50% {
        opacity: 1;
    }
}

.personal-info {
    padding: 40px;
    border-radius: var(--border-radius);
    background-color: var(--card-bg);
    box-shadow: var(--box-shadow);
    transition: all 0.4s ease;
    border: 1px solid rgba(33, 150, 243, 0.1);
    height: 100%;
    position: relative;
    overflow: hidden;
    opacity: 1;
    transform: translateX(0);
    animation: none;
}

.personal-info::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 5px;
    height: 0;
    background: var(--gradient-bg);
    transition: height 0.6s ease;
}

.personal-info:hover::before {
    height: 100%;
}

.personal-info:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(10, 38, 71, 0.15);
    border-color: rgba(33, 150, 243, 0.2);
}

.info-item {
    display: flex;
    margin-bottom: 25px;
    align-items: flex-start;
    transition: all 0.3s ease;
    position: relative;
    padding-left: 10px;
}

.info-item:last-child {
    margin-bottom: 0;
}

.info-item:hover {
    transform: translateX(5px);
}

.info-item i {
    color: var(--secondary-color);
    margin-right: 15px;
    font-size: 18px;
    background-color: rgba(33, 150, 243, 0.1);
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.3s ease;
    box-shadow: 0 5px 15px rgba(33, 150, 243, 0.15);
}

.info-item:hover i {
    background-color: var(--secondary-color);
    color: white;
    box-shadow: 0 5px 20px rgba(33, 150, 243, 0.3);
    transform: scale(1.1);
}

.info-item p {
    margin: 0;
    line-height: 1.6;
    position: relative;
    top: 2px;
}

.contact-link {
    color: var(--text-color);
    transition: all 0.3s ease;
    word-break: break-word;
    font-weight: 500;
    text-decoration: none;
    position: relative;
    display: inline-block;
    padding-bottom: 2px;
}

.contact-link:hover {
    color: var(--secondary-color);
}

.contact-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 1px;
    background-color: var(--secondary-color);
    transition: width 0.3s ease;
}

.contact-link:hover::after {
    width: 100%;
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@media (max-width: 991px) {
    .about-content {
        grid-template-columns: 1fr;
    }
    
    .summary, .personal-info {
        padding: 30px;
    }
}

@media (max-width: 767px) {
    .summary, .personal-info {
        padding: 25px;
    }
    
    .summary h3 {
        font-size: 1.3rem;
    }
    
    .summary p {
        font-size: 1rem;
    }
    
    .info-item i {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }
}

/* Education Section with Timeline */
#education {
    padding: 40px 0 80px 0;
    background-color: var(--background-color);
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.education-timeline {
    position: relative;
    margin-top: 20px;
    padding-left: 30px;
}

.education-timeline::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 4px;
    background: linear-gradient(to bottom, var(--primary-color), var(--secondary-color));
    border-radius: 4px;
}

.education-item {
    background-color: var(--card-bg);
    padding: 35px;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    margin-bottom: 30px;
    transition: all 0.4s ease;
    border-left: 5px solid var(--secondary-color);
    position: relative;
    z-index: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    opacity: 1;
    transform: translateY(0);
    animation: none;
}

.education-item.animate-education {
    animation-play-state: running;
}

.education-item:nth-child(1) {
    animation-delay: 0.2s;
}

.education-item:nth-child(2) {
    animation-delay: 0.4s;
}

.education-item:nth-child(3) {
    animation-delay: 0.6s;
}

.education-item::before {
    content: '';
    position: absolute;
    left: -43px;
    top: 35px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--gradient-bg);
    border: 4px solid var(--background-color);
    box-shadow: 0 0 0 4px rgba(33, 150, 243, 0.2);
    z-index: 2;
}

.education-item::after {
    content: '';
    position: absolute;
    left: -30px;
    top: 45px;
    width: 30px;
    height: 2px;
    background: var(--gradient-bg);
    z-index: 1;
}

.education-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(10, 38, 71, 0.15);
    border-left-width: 8px;
}

.ed-date {
    display: inline-block;
    background: var(--gradient-bg);
    color: white;
    padding: 8px 18px;
    border-radius: 30px;
    margin-bottom: 15px;
    font-weight: 500;
    letter-spacing: 1px;
    box-shadow: 0 5px 15px rgba(33, 150, 243, 0.2);
    align-self: flex-start;
    position: relative;
    overflow: hidden;
}

.ed-date::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 50%, rgba(255, 255, 255, 0) 100%);
    transform: skewX(-25deg) translateX(-100%);
    transition: all 0.7s ease;
}

.education-item:hover .ed-date::before {
    transform: skewX(-25deg) translateX(100%);
}

.ed-content {
    margin-top: 10px;
    position: relative;
}

.ed-content h3 {
    color: var(--primary-color);
    margin-bottom: 10px;
    font-weight: 700;
    font-size: 1.3rem;
    position: relative;
    display: inline-block;
}

.ed-content h3::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    background: var(--secondary-color);
    bottom: -5px;
    left: 0;
    border-radius: 2px;
    transition: width 0.4s ease;
}

.education-item:hover .ed-content h3::after {
    width: 100%;
}

.ed-content p {
    color: var(--light-text);
    margin-bottom: 8px;
    line-height: 1.6;
    position: relative;
    padding-left: 0;
    transition: all 0.3s ease;
}

.ed-content p:last-child {
    margin-bottom: 0;
    font-weight: 600;
    color: var(--secondary-color);
}

@media (min-width: 768px) {
    .education-item {
        flex-direction: row;
        align-items: flex-start;
    }
    
    .ed-date {
        margin-right: 20px;
        margin-bottom: 0;
        min-width: 120px;
        text-align: center;
    }
    
    .ed-content {
        margin-top: 0;
        flex: 1;
    }
}

@media (max-width: 767px) {
    .education-item {
        padding: 25px;
    }
    
    .ed-date {
        font-size: 0.9rem;
        padding: 6px 14px;
    }
    
    .ed-content h3 {
        font-size: 1.1rem;
    }
    
    .education-timeline {
        padding-left: 20px;
    }
    
    .education-item::before {
        left: -33px;
        width: 16px;
        height: 16px;
    }
    
    .education-item::after {
        left: -20px;
        width: 20px;
    }
}

/* Animation classes for education items */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.education-item h3,
.education-item .ed-date {
    transition: transform 0.3s ease;
}

/* More animations for education items */
.education-item:hover::after {
    width: 100%;
}

.education-item::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 3px;
    background: var(--gradient-bg);
    transition: width 0.4s ease;
}

/* Experience Section */
#experience {
    padding: 40px 0 80px 0;
    background-color: #fff;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

#experience::before {
    content: '';
    position: absolute;
    top: -100px;
    left: -100px;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(33, 150, 243, 0.05) 0%, rgba(33, 150, 243, 0) 70%);
    border-radius: 50%;
    z-index: 0;
}

#experience::after {
    content: '';
    position: absolute;
    bottom: -100px;
    right: -100px;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(33, 150, 243, 0.05) 0%, rgba(33, 150, 243, 0) 70%);
    border-radius: 50%;
    z-index: 0;
}

.experience-timeline {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    justify-content: center;
    align-items: stretch;
    margin-top: 20px;
}

.exp-item {
    flex: 0 1 45%;
    width: 45%;
    max-width: 600px;
    min-width: 320px;
    margin: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    padding: 40px;
    background-color: var(--card-bg);
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    border: 1px solid rgba(33, 150, 243, 0.1);
    overflow: hidden;
    transition: all 0.4s ease;
    transform: none;
    opacity: 1;
}

.exp-item.slide-in-left {
    animation: none;
}

.exp-item.slide-in-right {
    animation: none;
}

.exp-item.animate {
    animation-play-state: running;
}

.exp-item::before {
    content: '';
    position: absolute;
    top: 0;
    width: 5px;
    height: 0;
    background: var(--gradient-bg);
    transition: height 0.6s ease;
    z-index: 1;
}

.exp-item:nth-child(odd)::before {
    left: 0;
}

.exp-item:nth-child(even)::before {
    right: 0;
}

.exp-item:hover::before {
    height: 100%;
}

.exp-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(10, 38, 71, 0.15);
    border-color: rgba(33, 150, 243, 0.3);
}

.exp-item::after {
    content: '';
    position: absolute;
    width: 24px;
    height: 24px;
    background: var(--gradient-bg);
    border-radius: 50%;
    top: 35px;
    z-index: 10;
    box-shadow: 0 0 20px rgba(33, 150, 243, 0.6);
    border: 4px solid white;
    transform: scale(1);
}

/* Add connecting dots to timeline */
.experience-timeline::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 16px;
    height: 16px;
    background: var(--gradient-bg);
    border-radius: 50%;
    border: 3px solid white;
    box-shadow: 0 0 15px rgba(33, 150, 243, 0.4);
    z-index: 2;
}

.experience-timeline::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: calc(100% - 20px);
    background: var(--gradient-bg);
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(33, 150, 243, 0.3);
    z-index: 1;
}

/* Add indicator at the top of timeline */
.experience-timeline .timeline-start {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--gradient-bg);
    box-shadow: 0 0 15px rgba(33, 150, 243, 0.5);
    z-index: 2;
    border: 4px solid white;
    display: flex;
    align-items: center;
    justify-content: center;
}

.experience-timeline .timeline-start::before {
    content: '\f0b1'; /* Briefcase icon */
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    color: white;
    font-size: 0.8rem;
}

.exp-item:nth-child(odd) {
    margin-right: auto;
}

.exp-item:nth-child(odd)::after {
    right: -62px;
}

.exp-item:nth-child(even) {
    margin-left: auto;
}

.exp-item:nth-child(even)::after {
    left: -62px;
}

.exp-date {
    position: static;
    display: inline-block;
    background: var(--gradient-bg);
    color: white;
    padding: 12px 24px;
    border-radius: 30px;
    font-weight: 600;
    letter-spacing: 1px;
    box-shadow: 0 5px 20px rgba(10, 38, 71, 0.25);
    font-size: 0.95rem;
    z-index: 5;
    white-space: nowrap;
    opacity: 1;
    animation: none;
    transform: none;
    margin-bottom: 18px;
    margin-left: auto;
    margin-right: auto;
}

.exp-item:nth-child(odd) .exp-date,
.exp-item:nth-child(even) .exp-date {
    right: auto;
    left: auto;
    top: auto;
}

.exp-content {
    position: relative;
    z-index: 2;
}

.exp-content h3 {
    margin-bottom: 18px;
    color: var(--primary-color);
    font-weight: 700;
    font-size: 1.5rem;
    position: relative;
    display: inline-block;
    transition: all 0.3s ease;
    transform: none;
    opacity: 1;
    animation: none;
}

.exp-content h3::after {
    content: '';
    position: absolute;
    width: 0;
    height: 3px;
    background: var(--gradient-bg);
    bottom: -8px;
    left: 0;
    border-radius: 2px;
    transition: width 0.4s ease;
}

.exp-item:hover .exp-content h3::after {
    width: 100%;
}

.exp-content p {
    color: var(--light-text);
    margin-bottom: 15px;
    font-size: 1.05rem;
    line-height: 1.7;
    opacity: 1;
    transform: none;
    animation: none;
}

.exp-content p:first-of-type {
    font-weight: 500;
    color: var(--secondary-color);
    margin-bottom: 18px;
}

.responsibilities {
    font-weight: 600;
    color: white;
    margin-top: 25px;
    margin-bottom: 15px;
    display: inline-block;
    background: var(--gradient-bg);
    padding: 8px 20px;
    border-radius: 20px;
    font-size: 1rem;
    box-shadow: 0 5px 15px rgba(33, 150, 243, 0.2);
    opacity: 1;
    transform: none;
    animation: none;
}

.exp-content ul {
    padding-left: 20px;
    margin-bottom: 0;
    list-style-position: outside;
}

.exp-content ul li {
    margin-bottom: 15px;
    position: relative;
    padding-left: 8px;
    list-style-type: disc;
    color: var(--text-color);
    line-height: 1.7;
    font-size: 1.05rem;
    opacity: 1;
    transform: none;
    animation: none;
}

.exp-content ul li:nth-child(1) {
    animation-delay: 0.6s;
}

.exp-content ul li:nth-child(2) {
    animation-delay: 0.7s;
}

.exp-content ul li:nth-child(3) {
    animation-delay: 0.8s;
}

.exp-content ul li:nth-child(4) {
    animation-delay: 0.9s;
}

.exp-content ul li::marker {
    color: var(--secondary-color);
}

.exp-content ul li:last-child {
    margin-bottom: 0;
}

@keyframes slideInLeft {
    from {
        transform: translateX(-50px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideInRight {
    from {
        transform: translateX(50px);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes popIn {
    from {
        transform: scale(0);
    }
    50% {
        transform: scale(1.2);
    }
    to {
        transform: scale(1);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (max-width: 1200px) {
    .exp-item:nth-child(odd) .exp-date {
        right: -25%;
    }
    
    .exp-item:nth-child(even) .exp-date {
        left: -25%;
    }
}

@media (max-width: 992px) {
    .experience-timeline::before {
        left: 20px;
    }
    
    .exp-item {
        width: 100%;
        flex-basis: 100%;
        max-width: 100%;
        min-width: 0;
    }
    
    .exp-item::after {
        left: -42px !important;
        right: auto !important;
    }
    
    .exp-item:nth-child(odd) .exp-date,
    .exp-item:nth-child(even) .exp-date {
        left: 20px;
        right: auto;
        top: -50px;
        width: fit-content;
    }
    
    .exp-item:nth-child(odd)::before,
    .exp-item:nth-child(even)::before {
        left: 0;
        right: auto;
    }
}

@media (max-width: 768px) {
    .exp-item {
        padding: 30px;
        margin-bottom: 60px;
    }
    
    .exp-content h3 {
        font-size: 1.3rem;
    }
    
    .exp-content p, 
    .exp-content ul li {
        font-size: 1rem;
    }
}

@media (max-width: 576px) {
    .exp-item {
        padding: 25px;
        margin-bottom: 60px;
    }
    
    .exp-date {
        font-size: 0.85rem;
        padding: 8px 16px;
    }
    
    .exp-content h3 {
        font-size: 1.2rem;
    }
    
    .responsibilities {
        font-size: 0.9rem;
        padding: 6px 15px;
    }
    
    .exp-content ul li {
        font-size: 0.95rem;
    }
}

/* Experience section responsiveness */
@media (max-width: 992px) {
    .exp-item {
        width: calc(100% - 30px);
        margin-left: auto;
        margin-right: auto;
    }
    
    .exp-item:nth-child(odd)::after,
    .exp-item:nth-child(even)::after {
        display: none;
    }
    
    .experience-timeline::before {
        left: 30px;
    }
}

/* Experience section enhanced mobile responsiveness */
@media (max-width: 768px) {
    .experience-timeline::before {
        left: 20px;
    }
    
    .experience-timeline .timeline-start {
        left: 20px;
    }
    
    .experience-timeline::after {
        left: 20px;
    }
    
    .exp-item {
        width: 85%;
        margin-left: auto;
        margin-right: 0;
        padding: 30px;
    }
    
    .exp-item:nth-child(odd) .exp-date,
    .exp-item:nth-child(even) .exp-date {
        right: auto;
        left: auto;
        top: auto;
        transform: translateY(-50%);
        padding: 8px 15px;
        font-size: 0.9rem;
    }
    
    .exp-content h3 {
        font-size: 1.3rem;
    }
}

@media (max-width: 576px) {
    .exp-item {
        width: 90%;
        padding: 25px;
    }
    
    .exp-item:nth-child(odd) .exp-date,
    .exp-item:nth-child(even) .exp-date {
        padding: 6px 12px;
        font-size: 0.8rem;
    }
    
    .exp-content h3 {
        font-size: 1.2rem;
    }
    
    .exp-content p {
        font-size: 0.9rem;
    }
    
    .responsibilities {
        padding: 5px 12px;
        font-size: 0.85rem;
    }
    
    .exp-content ul li {
        font-size: 0.9rem;
        margin-bottom: 10px;
    }
}

/* Skills Section */
#skills {
    padding: var(--section-padding);
    background-color: var(--background-color);
    position: relative;
    overflow: hidden;
    z-index: 1;
}

#skills::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(10, 38, 71, 0.03) 0%, rgba(33, 150, 243, 0.03) 100%);
    z-index: 0;
}

#skills::after {
    content: '';
    position: absolute;
    bottom: -150px;
    right: -150px;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(33, 150, 243, 0.05) 0%, rgba(33, 150, 243, 0) 70%);
    border-radius: 50%;
    z-index: 0;
}

.skills-content {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    margin-top: 50px;
    position: relative;
    z-index: 1;
}

/* Large screens - display as grid with 2 columns */
@media (min-width: 992px) {
    .skills-content {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Extra large screens - display as grid with 3 columns for even better use of space */
@media (min-width: 1400px) {
    .skills-content {
        grid-template-columns: repeat(3, 1fr);
        max-width: 1400px;
        margin-left: auto;
        margin-right: auto;
    }
}

#skills .skill-category {
    background-color: var(--card-bg);
    padding: 40px 32px 32px 32px;
    border-radius: 18px;
    box-shadow: 0 8px 32px rgba(33, 150, 243, 0.10), 0 1.5px 6px rgba(10, 38, 71, 0.08);
    border: 1.5px solid rgba(33, 150, 243, 0.13);
    margin-bottom: 32px;
    position: relative;
    transition: box-shadow 0.3s, transform 0.3s, border-color 0.3s;
    display: flex;
    flex-direction: column;
    min-height: 320px;
    z-index: 1;
}
#skills .skill-category:hover {
    box-shadow: 0 16px 40px rgba(33, 150, 243, 0.18), 0 4px 16px rgba(10, 38, 71, 0.12);
    transform: translateY(-8px) scale(1.02);
    border-color: rgba(33, 150, 243, 0.25);
}
#skills .skill-category h3 {
    color: var(--primary-color);
    margin-bottom: 28px;
    font-weight: 700;
    font-size: 1.5rem;
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
}
#skills .skill-category h3::before {
    content: '';
    display: inline-block;
    width: 7px;
    height: 32px;
    background: var(--gradient-bg);
    border-radius: 6px;
    margin-right: 14px;
}
#skills .skill-category h3 i {
    color: var(--secondary-color);
    font-size: 1.3em;
    margin-right: 6px;
}
#skills .skill-group {
    margin-bottom: 24px;
    padding-left: 18px;
    border-left: 2.5px dashed rgba(33, 150, 243, 0.18);
}
#skills .skill-group:last-child {
    margin-bottom: 0;
}
#skills .skill-items {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 10px;
}
#skills .skill-item {
    display: inline-flex;
    align-items: center;
    background-color: rgba(33, 150, 243, 0.10);
    color: var(--primary-color);
    padding: 7px 16px 7px 12px;
    border-radius: 22px;
    margin-bottom: 10px;
    transition: box-shadow 0.2s, background 0.2s, color 0.2s, transform 0.2s;
    border: 1.2px solid rgba(33, 150, 243, 0.13);
    font-weight: 500;
    font-size: 1rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    cursor: pointer;
    outline: none;
}
#skills .skill-item i {
    margin-right: 8px;
    font-size: 1.1em;
}
#skills .skill-item:focus {
    box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.18);
    background: rgba(33, 150, 243, 0.18);
    color: var(--secondary-color);
}
#skills .skill-item:hover {
    background-color: rgba(33, 150, 243, 0.18);
    border-color: rgba(33, 150, 243, 0.25);
    color: var(--secondary-color);
    transform: translateY(-3px) scale(1.04);
    box-shadow: 0 6px 18px rgba(33, 150, 243, 0.10);
}
@media (max-width: 992px) {
    #skills .skill-category {
        padding: 28px 16px 20px 16px;
        min-height: 220px;
    }
    #skills .skill-category h3 {
        font-size: 1.2rem;
    }
}
@media (max-width: 576px) {
    #skills .skill-category {
        padding: 16px 8px 12px 8px;
        min-height: 120px;
    }
    #skills .skill-category h3 {
        font-size: 1.05rem;
        margin-bottom: 16px;
    }
    #skills .skill-group {
        padding-left: 8px;
        margin-bottom: 10px;
    }
    #skills .skill-items {
        gap: 6px;
    }
    #skills .skill-item {
        font-size: 0.88rem;
        padding: 5px 10px 5px 8px;
        border-radius: 16px;
    }
}

.skill-category p {
    color: var(--light-text);
    line-height: 1.8;
}

.skill-category ul {
    padding-left: 20px;
    margin-bottom: 0;
}

.skill-category ul li {
    margin-bottom: 10px;
    position: relative;
    padding-left: 5px;
    color: var(--light-text);
    list-style-type: disc;
}

.skill-category ul li:last-child {
    margin-bottom: 0;
}

.skill-items {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 10px;
}

.skill-item {
    display: inline-block;
    background-color: rgba(33, 150, 243, 0.1);
    color: var(--primary-color);
    padding: 6px 14px;
    border-radius: 20px;
    margin-bottom: 10px;
    transition: var(--transition);
    border: 1px solid rgba(33, 150, 243, 0.1);
    font-weight: 500;
    font-size: 0.95rem;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    animation: fadeIn 0.5s ease-in-out;
    animation-fill-mode: both;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.skill-items .skill-item:nth-child(1) { animation-delay: 0.1s; }
.skill-items .skill-item:nth-child(2) { animation-delay: 0.15s; }
.skill-items .skill-item:nth-child(3) { animation-delay: 0.2s; }
.skill-items .skill-item:nth-child(4) { animation-delay: 0.25s; }
.skill-items .skill-item:nth-child(5) { animation-delay: 0.3s; }
.skill-items .skill-item:nth-child(6) { animation-delay: 0.35s; }
.skill-items .skill-item:nth-child(7) { animation-delay: 0.4s; }
.skill-items .skill-item:nth-child(8) { animation-delay: 0.45s; }
.skill-items .skill-item:nth-child(9) { animation-delay: 0.5s; }
.skill-items .skill-item:nth-child(10) { animation-delay: 0.55s; }
.skill-items .skill-item:nth-child(n+11) { animation-delay: 0.6s; }

.skill-item:hover {
    background-color: rgba(33, 150, 243, 0.2);
    border-color: rgba(33, 150, 243, 0.3);
    transform: translateY(-3px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .skills-content {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .skill-category {
        padding: 25px;
    }
    
    .skill-group {
        margin-bottom: 20px;
        padding-left: 12px;
    }
    
    .skill-group h4 {
        font-size: 1rem;
    }
    
    .skill-item {
        font-size: 0.9rem;
        padding: 5px 12px;
    }
}

/* Skills section enhanced responsiveness */
@media (max-width: 992px) {
    .skill-category {
        padding: 25px;
    }
    
    .skill-group {
        margin-bottom: 20px;
    }
    
    .skill-group h4 {
        font-size: 1.05rem;
    }
    
    .skill-items {
        gap: 8px;
    }
    
    .skill-item {
        padding: 6px 14px;
        font-size: 0.9rem;
    }
}

@media (max-width: 576px) {
    .skill-category {
        padding: 20px;
    }
    
    .skill-category h3 {
        font-size: 1.2rem;
        margin-bottom: 20px;
    }
    
    .skill-group {
        padding-left: 12px;
        margin-bottom: 18px;
    }
    
    .skill-group h4 {
        font-size: 1rem;
        margin-bottom: 10px;
    }
    
    .skill-group h4::before {
        width: 8px;
        height: 8px;
        margin-left: -16px;
    }
    
    .skill-items {
        gap: 6px;
    }
    
    .skill-item {
        padding: 5px 10px;
        font-size: 0.85rem;
        margin-bottom: 8px;
    }
}

/* Projects Section */
#projects {
    padding: var(--section-padding);
    background-color: #fff;
    position: relative;
    min-height: 80vh;
    z-index: 1;
}

#projects::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(10, 38, 71, 0.02) 0%, rgba(33, 150, 243, 0.04) 100%);
    z-index: 0;
}

.project-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 30px;
    margin-top: 50px;
}

.project-card {
    background-color: var(--card-bg);
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--box-shadow);
    transition: all 0.4s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
    border: 1px solid rgba(33, 150, 243, 0.1);
    position: relative;
}

.project-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(33, 150, 243, 0.05) 0%, rgba(10, 38, 71, 0.05) 100%);
    opacity: 0;
    transition: opacity 0.4s ease;
    z-index: 0;
}

.project-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(10, 38, 71, 0.15);
    border-color: rgba(33, 150, 243, 0.2);
}

.project-card:hover::before {
    opacity: 1;
}

.project-img {
    width: 100%;
    height: 200px;
    background: var(--gradient-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px;
    position: relative;
    overflow: hidden;
}

.project-img::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1) 0%, rgba(255, 255, 255, 0) 100%);
    z-index: 1;
}

.project-img i {
    font-size: 4rem;
    color: rgba(255, 255, 255, 0.9);
    transition: all 0.4s ease;
    position: relative;
    z-index: 2;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.project-card:hover .project-img i {
    transform: scale(1.1) rotate(5deg);
    color: #ffffff;
}

.project-content {
    padding: 25px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    z-index: 1;
}

.project-title {
    color: var(--primary-color);
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 15px;
    transition: all 0.3s ease;
    position: relative;
    padding-bottom: 12px;
}

.project-title::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50px;
    height: 3px;
    background: var(--gradient-bg);
    transition: width 0.3s ease;
}

.project-card:hover .project-title {
    color: var(--secondary-color);
}

.project-card:hover .project-title::after {
    width: 100px;
}

.project-content p {
    color: var(--light-text);
    line-height: 1.6;
    margin-bottom: 15px;
}

.project-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.project-links li {
    margin-bottom: 12px;
    position: relative;
    padding-left: 5px;
}

.project-links li:last-child {
    margin-bottom: 0;
}

.project-link {
    color: var(--secondary-color);
    font-weight: 500;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    transition: all 0.3s ease;
    position: relative;
    padding: 5px 0;
}

.project-link i {
    margin-left: 8px;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    opacity: 0.7;
}

.project-link:hover {
    color: var(--primary-color);
    transform: translateX(5px);
}

.project-link:hover i {
    transform: translateX(4px);
    opacity: 1;
}

.project-link::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--gradient-bg);
    transition: width 0.3s ease;
}

.project-link:hover::before {
    width: 100%;
}

@media (max-width: 768px) {
    .project-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .project-img {
        height: 180px;
    }
    
    .project-img i {
        font-size: 3rem;
    }
    
    .project-content {
        padding: 20px;
    }
    
    .project-title {
        font-size: 1.3rem;
    }
    
    .project-links li {
        margin-bottom: 10px;
    }
}

/* Project animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.project-card {
    animation: fadeInUp 0.6s ease-out forwards;
    opacity: 0;
}

.project-card:nth-child(1) { animation-delay: 0.1s; }
.project-card:nth-child(2) { animation-delay: 0.2s; }
.project-card:nth-child(3) { animation-delay: 0.3s; }
.project-card:nth-child(4) { animation-delay: 0.4s; }
.project-card:nth-child(5) { animation-delay: 0.5s; }
.project-card:nth-child(6) { animation-delay: 0.6s; }
.project-card:nth-child(7) { animation-delay: 0.7s; }
.project-card:nth-child(8) { animation-delay: 0.8s; }
.project-card:nth-child(9) { animation-delay: 0.9s; }
.project-card:nth-child(10) { animation-delay: 1s; }

/* Hobby animations */
.hobby-text.animate-hobby-text {
    animation: pulseGlow 2s ease-in-out infinite alternate;
}

@keyframes pulseGlow {
    0% {
        box-shadow: var(--box-shadow);
    }
    100% {
        box-shadow: 0 10px 30px rgba(33, 150, 243, 0.2);
    }
}

.hobby-item {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.hobby-item.animate-hobby-item {
    opacity: 1;
    transform: translateY(0);
}

.hobby-item:hover .hobby-icon {
    animation: bounce 0.5s ease infinite alternate;
}

@keyframes bounce {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(-8px);
    }
}

/* Fix specific icon for cricket */
.hobby-icon .fa-cricket-bat-ball {
    display: none;
}

.hobby-icon .fa-volleyball-ball,
.hobby-icon .fa-badminton {
    display: none;
}

/* Add icon animation for project items */
.project-item i {
    margin-right: 10px;
    color: var(--secondary-color);
    transition: all 0.3s ease;
}

.project-item:hover i {
    transform: scale(1.2);
    color: var(--primary-color);
}

/* Certifications Section */
#certifications {
    padding: var(--section-padding);
    background-color: var(--background-color);
    position: relative;
    z-index: 1;
}

#certifications::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(10, 38, 71, 0.03) 0%, rgba(33, 150, 243, 0.05) 100%);
    z-index: 0;
}

.certifications-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 30px;
    margin-top: 50px;
}

.certification-card {
    background-color: var(--card-bg);
    padding: 35px;
    border-radius: 10px;
    box-shadow: var(--box-shadow);
    transition: var(--transition);
    height: 100%;
    border: 1px solid rgba(33, 150, 243, 0.1);
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    z-index: 1;
    animation: fadeIn 0.5s ease-in-out;
    animation-fill-mode: both;
}

.certification-card:nth-child(1) { animation-delay: 0.1s; }
.certification-card:nth-child(2) { animation-delay: 0.2s; }
.certification-card:nth-child(3) { animation-delay: 0.3s; }
.certification-card:nth-child(4) { animation-delay: 0.4s; }
.certification-card:nth-child(5) { animation-delay: 0.5s; }
.certification-card:nth-child(6) { animation-delay: 0.6s; }
.certification-card:nth-child(7) { animation-delay: 0.7s; }
.certification-card:nth-child(8) { animation-delay: 0.8s; }
.certification-card:nth-child(n+9) { animation-delay: 0.9s; }

.certification-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 5px;
    height: 100%;
    background: var(--gradient-bg);
    opacity: 0.8;
    transition: var(--transition);
    z-index: -1;
}

.certification-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(10, 38, 71, 0.15);
    border-color: rgba(33, 150, 243, 0.3);
}

.certification-card:hover::before {
    width: 7px;
}

.cert-header {
    display: flex;
    align-items: flex-start;
    margin-bottom: 20px;
}

.cert-logo {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, rgba(33, 150, 243, 0.1) 0%, rgba(33, 150, 243, 0.2) 100%);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    flex-shrink: 0;
    transition: var(--transition);
    box-shadow: 0 4px 10px rgba(33, 150, 243, 0.1);
    border: 1px solid rgba(33, 150, 243, 0.15);
}

.certification-card:hover .cert-logo {
    transform: scale(1.05) rotate(5deg);
    box-shadow: 0 8px 20px rgba(33, 150, 243, 0.15);
}

.cert-logo i {
    font-size: 28px;
    color: var(--secondary-color);
    transition: var(--transition);
}

.certification-card:hover .cert-logo i {
    transform: scale(1.1);
    color: var(--primary-color);
}

.cert-title {
    flex-grow: 1;
}

.cert-title h3 {
    color: var(--primary-color);
    margin-bottom: 8px;
    font-weight: 700;
    font-size: 1.25rem;
    position: relative;
    display: inline-block;
}

.certification-card:hover .cert-title h3 {
    color: var(--secondary-color);
}

.cert-issuer {
    color: var(--secondary-color);
    font-weight: 500;
    font-size: 0.95rem;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
}

.cert-date {
    color: var(--light-text);
    font-size: 0.9rem;
    display: flex;
    align-items: center;
}

.cert-date::before {
    content: '\f073';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    margin-right: 8px;
    font-size: 0.85rem;
    color: var(--secondary-color);
    opacity: 0.7;
}

.cert-desc {
    color: var(--light-text);
    margin-bottom: 20px;
    line-height: 1.7;
    flex-grow: 1;
    font-size: 0.95rem;
}

/* Certification card visible state */
.certification-card.cert-visible .cert-logo {
    animation: pulse 1.5s ease-in-out infinite alternate;
}

@keyframes pulse {
    0% {
        box-shadow: 0 4px 10px rgba(33, 150, 243, 0.1);
    }
    100% {
        box-shadow: 0 4px 15px rgba(33, 150, 243, 0.25);
    }
}

.certification-card.cert-visible::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 3px;
    background: var(--gradient-bg);
    z-index: 1;
    animation: slideIn 0.8s ease-in-out forwards;
    transform-origin: right;
}

@keyframes slideIn {
    0% {
        transform: scaleX(0);
    }
    100% {
        transform: scaleX(1);
    }
}

.certification-card:hover .cert-desc {
    color: var(--text-color);
}

/* Add transition to all elements inside the certification card */
.certification-card * {
    transition: all 0.3s ease-in-out;
}

/* Responsive adjustments for certifications */
@media (max-width: 1200px) {
    .certifications-grid {
        grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    }
}

@media (max-width: 768px) {
    .certifications-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }
    
    .certification-card {
        padding: 25px;
    }
    
    .cert-logo {
        width: 50px;
        height: 50px;
    }
    
    .cert-logo i {
        font-size: 24px;
    }
    
    .cert-title h3 {
        font-size: 1.1rem;
    }
}

/* Hobbies Section */
#hobbies {
    padding: var(--section-padding);
    background-color: #fff;
    position: relative;
    text-align: center;
    height: 100vh;
    z-index: 1;
}

#hobbies::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(10, 38, 71, 0.02) 0%, rgba(33, 150, 243, 0.04) 100%);
    z-index: 0;
}

#hobbies .container {
    position: relative;
    z-index: 1;
}

.hobby-text {
    font-size: 1.3rem;
    color: var(--light-text);
    margin-top: 30px;
    padding: 25px;
    background-color: var(--card-bg);
    border-radius: 15px;
    box-shadow: var(--box-shadow);
    display: inline-block;
    transition: var(--transition);
    border: 1px solid rgba(33, 150, 243, 0.1);
    line-height: 1.6;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
    overflow: hidden;
}

.hobby-text::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--gradient-bg);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
}

.hobby-text:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(10, 38, 71, 0.1);
    border-color: rgba(33, 150, 243, 0.2);
    color: var(--text-color);
}

.hobby-text:hover::before {
    transform: scaleX(1);
}

/* Add animation for hobby emojis */
.hobby-text span {
    display: inline-block;
    transform: scale(1);
    transition: transform 0.3s ease;
}

.hobby-text:hover span {
    transform: scale(1.2);
}

/* Add hobby items with icons */
.hobbies-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-top: 40px;
}

.hobby-item {
    background-color: var(--card-bg);
    padding: 25px 20px;
    border-radius: 10px;
    box-shadow: var(--box-shadow);
    transition: var(--transition);
    text-align: center;
    border: 1px solid rgba(33, 150, 243, 0.1);
}

.hobby-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(10, 38, 71, 0.1);
    border-color: rgba(33, 150, 243, 0.2);
}

.hobby-icon {
    font-size: 2rem;
    margin-bottom: 15px;
    color: var(--secondary-color);
    display: inline-block;
    transition: var(--transition);
}

.hobby-item:hover .hobby-icon {
    transform: scale(1.2) rotate(10deg);
    color: var(--primary-color);
}

.hobby-name {
    font-weight: 600;
    color: var(--text-color);
    font-size: 1.1rem;
}

@media (max-width: 768px) {
    .hobby-text {
        font-size: 1.1rem;
        padding: 20px;
    }
    
    .hobbies-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .hobbies-grid {
        grid-template-columns: 1fr;
    }
}

/* Strengths & Languages Section */
#Strengths {
    padding: 40px 0 80px 0;
    background-color: var(--background-color);
    position: relative;
    height: 100vh;
    z-index: 1;
}

#Strengths::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(10, 38, 71, 0.03) 0%, rgba(33, 150, 243, 0.05) 100%);
    z-index: 0;
}

#Strengths .skills-content {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    margin-top: 20px;
}


#Strengths .skill-category {
    background-color: var(--card-bg);
    border-radius: 10px;
    padding: 30px;
    box-shadow: var(--box-shadow);
    margin-bottom: 30px;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(33, 150, 243, 0.1);
    border-radius: 10px;
    width: 100%;
    
}

#Strengths .skill-category::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--gradient-bg);
    opacity: 0.8;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
}

#Strengths .skill-category:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(10, 38, 71, 0.1);
    border-color: rgba(33, 150, 243, 0.2);
}

#Strengths .skill-category:hover::before {
    transform: scaleX(1);
}

#Strengths .skill-category h3 {
    color: var(--primary-color);
    margin-bottom: 20px;
    font-weight: 700;
    font-size: 1.4rem;
    display: inline-block;
    position: relative;
}

#Strengths .skill-category h3::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 40px;
    height: 3px;
    background: var(--gradient-bg);
}

#Strengths .skill-category ul {
    padding-left: 20px;
    margin-bottom: 0;
}

#Strengths .skill-category ul li {
    color: var(--light-text);
    margin-bottom: 12px;
    position: relative;
    padding-left: 10px;
    transition: var(--transition);
    font-size: 1rem;
    list-style-type: none;
}

#Strengths .skill-category ul li::before {
    content: '\f00c';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    margin-right: 10px;
    font-size: 0.9rem;
    color: var(--secondary-color);
    opacity: 0.8;
    transition: var(--transition);
}

#Strengths .skill-category ul li:hover {
    color: var(--text-color);
    transform: translateX(5px);
}

#Strengths .skill-category ul li:hover::before {
    opacity: 1;
    color: var(--primary-color);
}

#Strengths .skill-category p {
    color: var(--light-text);
    font-size: 1.1rem;
    line-height: 1.6;
    font-weight: 500;
}

/* Add animation for strengths section */
@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

#Strengths .skill-category {
    animation: fadeInUp 0.5s ease forwards;
    opacity: 1;
}

#Strengths .skill-category:nth-child(1) {
    animation-delay: 0.1s;
}

#Strengths .skill-category:nth-child(2) {
    animation-delay: 0.3s;
}

/* Responsive adjustments for Strengths */
@media (max-width: 768px) {
    #Strengths .skill-category {
        padding: 25px;
    }
    
    #Strengths .skill-category h3 {
        font-size: 1.2rem;
    }
    
    #Strengths .skill-category ul li,
    #Strengths .skill-category p {
        font-size: 0.95rem;
    }
}

/* Contact Section */
#contact {
    padding: var(--section-padding);
    background-color: #ffffff;
    position: relative;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow: visible;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.05);
    border-top: 3px solid var(--secondary-color);
    z-index: 1;
}

#contact::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(10, 38, 71, 0.05) 0%, rgba(33, 150, 243, 0.05) 100%);
    z-index: 0;
}

.contact .container {
    position: relative;
    z-index: 1;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    margin-top: -90px;
}

.contact-content {
    display: flex;
    flex-wrap: wrap;
    gap: 50px;
    margin-top: 30px;
    position: relative;
    z-index: 2;
}

.contact-info {
    display: flex;
    flex-direction: column;
    gap: 0px;
    width: 100%;
    max-width: 600px;
}

.contact-item {
    display: flex;
    margin-bottom: 30px;
    background-color: var(--card-bg);
    padding: 30px;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    transition: all 0.4s ease;
    border: 1px solid rgba(33, 150, 243, 0.1);
    position: relative;
    overflow: hidden;
    opacity: 1;
    transform: translateY(0);
}

.contact-item.animate-item {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.contact-info .contact-item:nth-child(1) {
    animation-delay: 0.2s;
}

.contact-info .contact-item:nth-child(2) {
    animation-delay: 0.4s;
}

.contact-info .contact-item:nth-child(3) {
    animation-delay: 0.6s;
}

.contact-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 4px;
    background: var(--gradient-bg);
    transform: scaleY(0);
    transition: transform 0.4s ease;
    transform-origin: bottom;
}

.contact-item:hover::before {
    transform: scaleY(1);
}

.contact-item:hover {
    transform: translateY(-5px) translateX(5px);
    box-shadow: 0 15px 30px rgba(10, 38, 71, 0.1);
    border-color: rgba(33, 150, 243, 0.3);
}

.contact-item i {
    font-size: 2.2rem;
    color: var(--secondary-color);
    margin-right: 25px;
    padding: 20px;
    background: rgba(33, 150, 243, 0.1);
    width: 80px;
    height: 80px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 80px;
    min-height: 80px;
    transition: all 0.5s ease;
    position: relative;
    z-index: 1;
}

.contact-item:hover i {
    background: var(--gradient-bg);
    color: white;
    transform: rotate(360deg);
}

.contact-item div {
    flex: 1;
}

.contact-item h3 {
    margin-bottom: 10px;
    color: var(--primary-color);
    font-weight: 600;
    position: relative;
    display: inline-block;
    padding-bottom: 5px;
}

.contact-item h3::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--secondary-color);
    transition: width 0.3s ease;
}

.contact-item:hover h3::after {
    width: 100%;
}

.contact-link {
    color: var(--secondary-color);
    transition: all 0.3s ease;
    display: inline-block;
    position: relative;
    padding-bottom: 2px;
    font-weight: 500;
}

.contact-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 1px;
    background-color: var(--hover-color);
    transition: all 0.3s ease;
}

.contact-link:hover {
    color: var(--hover-color);
    transform: translateX(3px);
}

.contact-link:hover::after {
    width: 100%;
}

.contact-item p {
    margin-bottom: 5px;
    color: var(--light-text);
    line-height: 1.6;
}

.map-container {
    margin-top: 15px;
    border-radius: var(--border-radius);
    overflow: hidden;
    box-shadow: var(--box-shadow);
    transition: all 0.3s ease;
    opacity: 0.9;
}

.map-container:hover {
    box-shadow: 0 15px 30px rgba(33, 150, 243, 0.2);
    opacity: 1;
}

.contact-form {
    flex: 1;
    min-width: 300px;
    background-color: var(--card-bg);
    padding: 40px;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    position: relative;
    border: 1px solid rgba(33, 150, 243, 0.1);
    overflow: hidden;
    transform: translateY(0);
    opacity: 1;
    transition: all 0.8s ease;
}

.contact-form.animate-form {
    transform: translateY(0);
    opacity: 1;
}

.contact-form::before {
    content: '';
    position: absolute;
    top: -50px;
    right: -50px;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(33, 150, 243, 0.2) 0%, rgba(33, 150, 243, 0) 70%);
    z-index: 0;
}

.contact-form::after {
    content: '';
    position: absolute;
    bottom: -10px;
    right: -10px;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(33, 150, 243, 0.2) 0%, rgba(33, 150, 243, 0) 70%);
    z-index: 0;
}

.contact-form h3 {
    margin-bottom: 30px;
    color: var(--primary-color);
    font-weight: 600;
    font-size: 1.5rem;
    text-align: center;
    position: relative;
    padding-bottom: 10px;
}

.contact-form h3::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 2px;
    background: var(--gradient-bg);
}

.form-group {
    margin-bottom: 25px;
    position: relative;
    padding: 0 20px;
    
    margin: 0 auto;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: var(--primary-color);
    transition: all 0.3s ease;
}

.form-group input,
.form-group textarea {
    width: 100%;
    padding: 12px 15px;
    border: 1px solid rgba(33, 150, 243, 0.2);
    border-radius: var(--border-radius);
    background-color: rgba(255, 255, 255, 0.8);
    transition: all 0.3s ease;
    font-family: inherit;
    color: var(--text-color);
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--secondary-color);
    box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);
    background-color: #fff;
}

.form-group input:focus + label,
.form-group textarea:focus + label {
    color: var(--secondary-color);
}

.submit-btn {
    display: inline-block;
    padding: 12px 30px;
    border: none;
    background: var(--gradient-bg);
    color: #fff;
    border-radius: 30px;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.submit-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, var(--secondary-color), var(--primary-color));
    z-index: -1;
    transition: opacity 0.3s ease;
    opacity: 0;
}

.submit-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 7px 15px rgba(33, 150, 243, 0.3);
}

.submit-btn:hover::before {
    opacity: 1;
}

.submit-btn:active {
    transform: translateY(0);
    box-shadow: 0 3px 10px rgba(33, 150, 243, 0.2);
}

#formStatus {
    margin-top: 20px;
    padding: 10px;
    border-radius: var(--border-radius);
    font-weight: 500;
    display: none;
}

#formStatus.success {
    display: block;
    background-color: rgba(39, 174, 96, 0.1);
    border: 1px solid rgba(39, 174, 96, 0.3);
    color: #27ae60;
}

#formStatus.error {
    display: block;
    background-color: rgba(231, 76, 60, 0.1);
    border: 1px solid rgba(231, 76, 60, 0.3);
    color: #e74c3c;
}

@media (max-width: 768px) {
    .contact-content {
        flex-direction: column;
        gap: 40px;
    }
    
    .contact-item {
        padding: 20px;
    }
    
    .contact-form {
        padding: 30px 20px;
    }
}

/* Footer */
footer {
    background-color: var(--primary-color);
    color: #fff;
    padding: 50px 0 20px;
    margin-top: 100px;
    position: relative;
    overflow: hidden;
}

footer::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="400" height="400" viewBox="0 0 800 800"><g fill="none" stroke="rgba(255,255,255,0.05)" stroke-width="1"><path d="M769 229L1037 260.9M927 880L731 737 520 660 309 538 40 599 295 764 126.5 879.5 40 599-197 493 102 382-31 229 126.5 79.5-69-63"/><path d="M-31 229L237 261 390 382 603 493 308.5 537.5 101.5 381.5M370 905L295 764"/><path d="M520 660L578 842 731 737 840 599 603 493 520 660 295 764 309 538 390 382 539 269 769 229 577.5 41.5 370 105 295 -36 126.5 79.5 237 261 102 382 40 599 -69 737 127 880"/><path d="M520-140L578.5 42.5 731-63M603 493L539 269 237 261 370 105M902 382L539 269"/><path d="M-222 42L126.5 79.5 370 105 539 269 577.5 41.5 927 80 769 229 902 382 603 493 731 737M295-36L577.5 41.5M578 842L295 764M40-201L127 80M102 382L-31 229"/></g></svg>');
    background-position: center;
    opacity: 0.05;
    z-index: 0;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 48px;
    flex-wrap: wrap;
}

.footer-section {
    min-width: 220px;
}

.footer-section.footer-links {
    min-width: 320px;
}

.footer-section:last-child {
    margin-left: auto;
}

@media (max-width: 1100px) {
    .footer-content {
        gap: 24px;
    }
    .footer-section {
        min-width: 180px;
    }
}

@media (max-width: 900px) {
    .footer-content {
        flex-direction: column;
        gap: 32px;
    }
    .footer-section, .footer-section.footer-links {
        min-width: 0;
        max-width: 100%;
    }
    .footer-section:last-child {
        margin-left: 0;
    }
}

.footer-section h3 {
    color: var(--secondary-color);
    margin-bottom: 20px;
    font-size: 1.4rem;
    position: relative;
    display: inline-block;
}

.footer-section h3::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 50px;
    height: 2px;
    background: var(--secondary-color);
}

.footer-section p {
    margin-bottom: 15px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.8);
}

.footer-links ul {
    padding: 0;
}

.footer-links ul li {
    margin-bottom: 12px;
}

.footer-links ul li a {
    color: rgba(255, 255, 255, 0.8);
    transition: var(--transition);
    display: inline-block;
    position: relative;
}

.footer-links ul li a::before {
    content: '→';
    margin-right: 8px;
    opacity: 0;
    transform: translateX(-10px);
    transition: all 0.3s ease;
    display: inline-block;
}

.footer-links ul li a:hover {
    color: var(--secondary-color);
    transform: translateX(5px);
}

.footer-links ul li a:hover::before {
    opacity: 1;
    transform: translateX(0);
}

.social-links {
    display: flex;
    gap: 15px;
    margin-top: 20px;
}

.social-links a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: 1.1rem;
    transition: var(--transition);
}

.social-links a:hover {
    background: var(--secondary-color);
    transform: translateY(-5px);
}

.contact-info-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 15px;
}

.contact-info-item i {
    margin-right: 15px;
    color: var(--secondary-color);
    font-size: 1.2rem;
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 20px;
    text-align: center;
    position: relative;
    z-index: 1;
}

.footer-bottom p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
}

@media (max-width: 768px) {
    .footer-content {
        flex-direction: column;
    }
    
    .footer-section {
        padding-right: 0;
    }
}

/* Footer contact links styling */
.footer-contact-link {
    color: rgba(255, 255, 255, 0.8);
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
    position: relative;
    padding-bottom: 2px;
}

.footer-contact-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 1px;
    background-color: var(--secondary-color);
    transition: width 0.3s ease;
}

.footer-contact-link:hover {
    color: var(--secondary-color);
    transform: translateX(5px);
}

.footer-contact-link:hover::after {
    width: 100%;
}

/* Back to top button */
.back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background: var(--gradient-bg);
    color: white;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 20px;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease;
    z-index: 999;
    box-shadow: 0 5px 15px rgba(10, 38, 71, 0.2);
}

.back-to-top.active {
    opacity: 1;
    visibility: visible;
}

.back-to-top:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(10, 38, 71, 0.4);
}




/* GATE Qualifications Section */
#gate-qualifications {
    padding: var(--section-padding);
    background-color: #fff;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

#gate-qualifications::before {
    content: '';
    position: absolute;
    top: -100px;
    left: -100px;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(33, 150, 243, 0.05) 0%, rgba(33, 150, 243, 0) 70%);
    border-radius: 50%;
    z-index: 0;
}

#gate-qualifications::after {
    content: '';
    position: absolute;
    bottom: -100px;
    right: -100px;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(33, 150, 243, 0.05) 0%, rgba(33, 150, 243, 0) 70%);
    border-radius: 50%;
    z-index: 0;
}

.gate-content {
    position: relative;
    z-index: 1;
    margin-top: 30px;
}

.gate-header {
    text-align: center;
    margin-bottom: 40px;
    padding-bottom: 20px;
    position: relative;
}

.gate-header h3 {
    color: var(--primary-color);
    font-size: 1.8rem;
    font-weight: 700;
    position: relative;
    display: inline-block;
    padding-bottom: 15px;
    transition: var(--transition);
}

.gate-header h3::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80px;
    height: 3px;
    background: var(--gradient-bg);
    border-radius: 3px;
    transition: width 0.4s ease;
}

.gate-header:hover h3::after {
    width: 120px;
}

.gate-specializations {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    margin-top: 20px;
}

.gate-item {
    background-color: var(--card-bg);
    padding: 35px 30px;
    border-radius: var(--border-radius);
    box-shadow: var(--box-shadow);
    transition: var(--transition);
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(33, 150, 243, 0.1);
    display: flex;
    align-items: center;
    animation: fadeIn 0.5s ease-in-out;
    animation-fill-mode: both;
}

.gate-item:nth-child(1) { animation-delay: 0.1s; }
.gate-item:nth-child(2) { animation-delay: 0.2s; }
.gate-item:nth-child(3) { animation-delay: 0.3s; }

.gate-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 5px;
    height: 0;
    background: var(--gradient-bg);
    transition: height 0.6s ease;
}

.gate-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(10, 38, 71, 0.15);
    border-color: rgba(33, 150, 243, 0.3);
}

.gate-item:hover::before {
    height: 100%;
}

.gate-icon {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, rgba(33, 150, 243, 0.1) 0%, rgba(33, 150, 243, 0.2) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 20px;
    flex-shrink: 0;
    transition: var(--transition);
    box-shadow: 0 5px 15px rgba(33, 150, 243, 0.15);
    position: relative;
    z-index: 1;
}

.gate-item:hover .gate-icon {
    transform: scale(1.1) rotate(10deg);
    background: var(--gradient-bg);
}

.gate-icon i {
    font-size: 28px;
    color: var(--secondary-color);
    transition: var(--transition);
}

.gate-item:hover .gate-icon i {
    color: #fff;
    transform: scale(1.2);
}

.gate-details {
    flex-grow: 1;
}

.gate-details h4 {
    color: var(--primary-color);
    font-weight: 600;
    font-size: 1.25rem;
    margin-bottom: 5px;
    transition: var(--transition);
    position: relative;
    padding-bottom: 8px;
    display: inline-block;
}

.gate-details h4::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    background: var(--secondary-color);
    bottom: 0;
    left: 0;
    transition: width 0.4s ease;
}

.gate-item:hover .gate-details h4 {
    color: var(--secondary-color);
}

.gate-item:hover .gate-details h4::after {
    width: 100%;
}

/* Add responsive adjustments */
@media (max-width: 992px) {
    .gate-specializations {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
        gap: 25px;
    }
    
    .gate-item {
        padding: 25px 20px;
    }
    
    .gate-icon {
        width: 60px;
        height: 60px;
    }
    
    .gate-icon i {
        font-size: 24px;
    }
    
    .gate-details h4 {
        font-size: 1.15rem;
    }
}

@media (max-width: 768px) {
    .gate-header h3 {
        font-size: 1.5rem;
    }
    
    .gate-specializations {
        grid-template-columns: 1fr;
    }
    
    .gate-item {
        padding: 20px;
    }
    
    .gate-icon {
        width: 50px;
        height: 50px;
        margin-right: 15px;
    }
    
    .gate-icon i {
        font-size: 20px;
    }
    
    .gate-details h4 {
        font-size: 1.1rem;
    }
}

@media (max-width: 576px) {
    .gate-header h3 {
        font-size: 1.3rem;
    }
    
    .gate-item {
        padding: 15px;
    }
    
    .gate-icon {
        width: 45px;
        height: 45px;
        margin-right: 12px;
    }
    
    .gate-icon i {
        font-size: 18px;
    }
    
    .gate-details h4 {
        font-size: 1rem;
        padding-bottom: 5px;
    }
}







/* Resume Download Button Styles */
.hero-actions {
    margin-top: 25px;
    display: flex;
    justify-content: center;
}

.resume-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 30px;
    border-radius: var(--btn-radius);
    font-weight: 600;
    background: var(--gradient-bg);
    color: white;
    box-shadow: 0 5px 15px rgba(33, 150, 243, 0.3);
    transition: var(--transition);
    text-decoration: none;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.resume-btn i {
    margin-right: 10px;
    font-size: 1.1rem;
    transition: all 0.3s ease;
}

.resume-btn:hover {
    box-shadow: 0 8px 25px rgba(33, 150, 243, 0.4);
    transform: translateY(-3px);
}

.resume-btn:hover i {
    transform: translateY(-2px);
}

.resume-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.1);
    z-index: -1;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}

.resume-btn:hover::before {
    transform: scaleX(1);
    transform-origin: left;
}

/* Responsive adjustments */
@media (max-width: 576px) {
    .resume-btn {
        padding: 10px 20px;
        font-size: 0.9rem;
    }
    
    .resume-btn i {
        font-size: 1rem;
    }
}







/* Animation for gate items on scroll */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}








/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    0% {
        text-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    }
    50% {
        text-shadow: 0 5px 15px rgba(33, 150, 243, 0.5);
    }
    100% {
        text-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    }
}

/* Mobile Styles */
@media (max-width: 992px) {
    /* Show mobile toggle button */
    .mobile-toggle {
        display: flex;
    }
    
    #navbar {
        position: fixed;
        top: 0;
        right: -100%;
        width: 280px;
        height: 100vh;
        background-color: white;
        flex-direction: column;
        align-items: flex-start;
        padding: 70px 20px 20px;
        transition: all 0.4s ease;
        z-index: 1000;
        box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
        overflow-y: auto;
    }
    
    #navbar.show {
        right: 0;
    }
    
    #header.scrolled #navbar {
        background-color: white;
    }
    
    #navbar ul {
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
    }
    
    #navbar li {
        margin: 0;
        width: 100%;
        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    }
    
    #navbar li:last-child {
        border-bottom: none;
    }
    
    #navbar a {
        display: block;
        padding: 15px 0;
        font-size: 1.1rem;
        color: var(--primary-color);
        width: 100%;
    }
    
    #navbar a::after {
        bottom: 12px;
    }
}

@media (max-width: 768px) {
    :root {
        --section-padding: 60px 0;
    }
    
    h1 {
        font-size: 2.8rem;
    }
    
    h2 {
        font-size: 2.2rem;
    }
    
    h3 {
        font-size: 1.8rem;
    }
    
    .section-title {
        font-size: 2rem;
        margin-bottom: 40px;
    }
    
    /* Adjust section padding */
    :root {
        --section-padding: 70px 0;
    }
}

@media (max-width: 1200px) {
    .container {
        max-width: 960px;
    }
    
    h1 {
        font-size: 2.5rem;
    }
    
    h2 {
        font-size: 2rem;
    }
    
    .section-title {
        font-size: 1.8rem;
        margin-bottom: 35px;
    }
    
    /* Adjust section padding */
    :root {
        --section-padding: 60px 0;
    }
}

@media (max-width: 992px) {
    .container {
        max-width: 720px;
    }
    
    h1 {
        font-size: 2.2rem;
    }
    
    h2 {
        font-size: 1.8rem;
    }
    
    h3 {
        font-size: 1.5rem;
    }
    
    .section-title {
        font-size: 1.6rem;
        margin-bottom: 30px;
    }
    
    /* Adjust section padding */
    :root {
        --section-padding: 50px 0;
    }
}

@media (max-width: 768px) {
    .container {
        max-width: 540px;
    }
    
    h1 {
        font-size: 2rem;
    }
    
    h2 {
        font-size: 1.6rem;
    }
    
    h3 {
        font-size: 1.4rem;
    }
    
    .section-title {
        font-size: 1.4rem;
        margin-bottom: 25px;
    }
    
    /* Adjust section padding */
    :root {
        --section-padding: 40px 0;
    }
}

@media (max-width: 576px) {
    .container {
        width: 100%;
        padding-left: 20px;
        padding-right: 20px;
    }
    
    h1 {
        font-size: 1.8rem;
    }
    
    h2 {
        font-size: 1.5rem;
    }
    
    h3 {
        font-size: 1.3rem;
    }
    
    p {
        font-size: 0.95rem;
    }
    
    .section-title {
        font-size: 1.3rem;
        margin-bottom: 20px;
    }
    
    /* Adjust section padding */
    :root {
        --section-padding: 30px 0;
    }
}

/* Global Responsive Styles */
@media (max-width: 1400px) {
    .container {
        max-width: 1140px;
    }
    
    h1 {
        font-size: 2.5rem;
    }
    
    h2 {
        font-size: 2rem;
    }
    
    h3 {
        font-size: 1.6rem;
    }
}

@media (max-width: 1200px) {
    .container {
        max-width: 960px;
    }
    
    h1 {
        font-size: 2.2rem;
    }
    
    h2 {
        font-size: 1.8rem;
    }
    
    .section-title {
        font-size: 1.8rem;
        margin-bottom: 30px;
    }
    
    /* Adjust section padding */
    :root {
        --section-padding: 50px 0;
    }
}

@media (max-width: 992px) {
    .container {
        max-width: 720px;
    }
    
    h1 {
        font-size: 2rem;
    }
    
    h2 {
        font-size: 1.6rem;
    }
    
    h3 {
        font-size: 1.4rem;
    }
    
    .section-title {
        font-size: 1.6rem;
        margin-bottom: 25px;
    }
    
    /* Adjust section padding */
    :root {
        --section-padding: 40px 0;
    }
}

@media (max-width: 768px) {
    .container {
        max-width: 540px;
    }
    
    h1 {
        font-size: 1.8rem;
    }
    
    h2 {
        font-size: 1.5rem;
    }
    
    h3 {
        font-size: 1.3rem;
    }
    
    .section-title {
        font-size: 1.4rem;
        margin-bottom: 20px;
    }
    
    /* Adjust section padding */
    :root {
        --section-padding: 30px 0;
    }
}

@media (max-width: 576px) {
    .container {
        width: 100%;
        padding-left: 20px;
        padding-right: 20px;
    }
    
    h1 {
        font-size: 1.6rem;
    }
    
    h2 {
        font-size: 1.4rem;
    }
    
    h3 {
        font-size: 1.2rem;
    }
    
    p {
        font-size: 0.9rem;
    }
    
    .section-title {
        font-size: 1.2rem;
        margin-bottom: 15px;
    }
    
    /* Adjust section padding */
    :root {
        --section-padding: 20px 0;
    }
}

#contact .section-title {
    position: relative;
    margin-bottom: 50px;
}

#contact .section-title::after {
    content: '';
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 3px;
    background: var(--gradient-bg);
}

.contact-content {
    display: flex;
    flex-wrap: wrap;
    gap: 50px;
    margin-top: 30px;
    position: relative;
    z-index: 2;
}

.floating-element {
    position: absolute;
    border-radius: 50%;
    z-index: 0;
    animation-name: float;
    animation-duration: 20s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    pointer-events: none;
}

@keyframes float {
    0%, 100% {
        transform: translate(0, 0) rotate(0deg);
    }
    25% {
        transform: translate(15px, -15px) rotate(5deg);
    }
    50% {
        transform: translate(0, 15px) rotate(10deg);
    }
    75% {
        transform: translate(-15px, -5px) rotate(5deg);
    }
}

/* Consultancy Section Styles */
.consultancy {
    padding: 40px 0 80px 0;
    background-color: #f9f9f9;
}

.consultancy-content {
    max-width: 800px;
    margin: 0 auto;
    padding: 18px 30px 30px 30px;
    background-color: white;
    border-radius: 10px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
}

.consultancy-info {
    margin-top: 0;
}

.consultancy-info h3 {
    color: #333;
    margin-bottom: 0px;
    font-size: 24px;
}

.consultancy-info ul {
    list-style-type: none;
    padding: 0;
    margin: 20px 0;
}

.consultancy-info ul li {
    padding: 10px 0;
    border-bottom: 1px solid #eee;
    color: #555;
}

.consultancy-info ul li:last-child {
    border-bottom: none;
}

.consultancy-pricing {
    margin-top: 30px;
    text-align: center;
    padding: 20px;
    background-color: #f8f9fa;
    border-radius: 8px;
}

.consultancy-pricing h4 {
    color: #2c3e50;
    margin-bottom: 20px;
    font-size: 20px;
}

#bookConsultation {
    padding: 12px 30px;
    font-size: 16px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

#bookConsultation:hover {
    background-color: #0056b3;
}

/* Consult with Us Button Styles */
.consult-btn {
    background-color: #007bff;
    color: white !important;
    padding: 8px 20px !important;
    border-radius: 25px;
    transition: all 0.3s ease !important;
    margin: 0 10px;
}

.consult-btn:hover {
    background-color: #0056b3;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.consult-btn::after {
    display: none !important;
}

@media (max-width: 992px) {
    .consult-btn {
        margin: 10px auto;
        display: inline-block;
        width: auto;
        text-align: center;
    }
}

@media (max-width: 576px) {
    .consult-btn {
        padding: 6px 16px !important;
        font-size: 14px;
    }
}

/* Mobile Navigation Styles */
.mobile-toggle {
    display: none;
    cursor: pointer;
    padding: 10px;
    z-index: 1000;
    transition: var(--transition);
    background: rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    width: 45px;
    height: 45px;
    position: fixed;
    top: 20px;
    right: 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.mobile-toggle i {
    font-size: 24px;
    color: var(--primary-color);
    transition: var(--transition);
}

@media (max-width: 992px) {
    .mobile-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #navbar {
        position: fixed;
        top: 0;
        right: -100%;
        width: 80%;
        max-width: 400px;
        height: 100vh;
        background: var(--card-bg);
        padding: 80px 20px 20px;
        transition: right 0.3s ease-in-out;
        box-shadow: -5px 0 15px rgba(0, 0, 0, 0.1);
        z-index: 1050; /* Ensure it's on top of other content */
        overflow-y: auto;
    }

    #navbar.show {
        right: 0;
    }

    #navbar ul {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
        width: 100%;
        padding: 0;
    }

    #navbar li {
        width: 100%;
        margin: 0;
        border-bottom: 1px solid #eee;
        padding: 12px 0;
    }

    #navbar li:last-child {
        border-bottom: none;
    }

    #navbar a {
        display: block;
        padding: 0;
        font-size: 16px;
        border-radius: 0;
        transition: color 0.3s ease;
        color: var(--primary-color); /* Ensure link color is visible */
        text-decoration: none;
    }

    #navbar a:hover {
        background: none;
        color: var(--secondary-color);
    }

    #navbar a::after {
        display: none;
    }

    .consult-btn {
        margin-top: 20px;
        width: 100%;
        text-align: center;
        background: var(--gradient-bg);
        color: white !important;
        padding: 12px 20px;
        border-radius: 8px;
        text-decoration: none;
    }

    /* Add overlay when menu is open */
    body.menu-open::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1040; /* Lower than navbar, higher than content */
        opacity: 0;
        animation: fadeIn 0.3s ease forwards;
    }
}

@media (max-width: 576px) {
    #navbar {
        width: 100%;
        max-width: none;
    }

    .mobile-toggle {
        top: 15px;
        right: 15px;
        width: 40px;
        height: 40px;
    }

    .mobile-toggle i {
        font-size: 20px;
    }

    #navbar a {
        font-size: 15px;
        padding: 10px 15px;
    }

    /* Adjust header content for mobile */
    .header-content {
        padding: 20px;
    }

    .header-text h1 {
        font-size: 24px;
    }

    .header-text p {
        font-size: 14px;
    }

    /* Adjust hero content for mobile */
    .hero-content {
        padding: 20px;
    }

    .hero-content h2 {
        font-size: 20px;
    }

    .hero-content p {
        font-size: 14px;
    }

    /* Adjust hero actions for mobile */
    .hero-actions {
        flex-direction: column;
        gap: 10px;
    }

    .resume-btn {
        width: 100%;
        text-align: center;
    }
}

/* Animation for menu overlay */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Domain Marketplace Section */
.domain-marketplace {
    padding: 60px 20px;
    background-color: #f9f9f9;
    text-align: center;
    overflow-x: hidden;
}

.domain-marketplace .section-title {
    color: #0a1128;
    margin-bottom: 10px;
}

.domain-marketplace .section-subtitle {
    color: #555;
    margin-bottom: 40px;
    font-size: 1.1em;
}

.domain-categories {
    margin-bottom: 30px;
}

.category-tabs {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
}

.tab-btn {
    padding: 10px 20px;
    border: 1px solid #0a1128;
    background-color: transparent;
    color: #0a1128;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.3s ease, color 0.3s ease;
    font-size: 1em;
}

.tab-btn:hover,
.tab-btn.active {
    background-color: #0a1128;
    color: #fff;
}

.domain-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
    overflow-x: hidden;
}

.domain-card {
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 25px;
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.domain-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.domain-header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 15px;
    gap: 0;
}

.domain-header h3 {
    margin: 0;
    color: #0a1128;
    font-size: 1.4em;
    word-break: break-all;
    white-space: normal;
    min-width: 0;
}

.domain-card .price {
    font-size: 1.2em;
    font-weight: bold;
    color: #0077b6;
    margin: 2px 0 0 0;
    white-space: nowrap;
}

.domain-info {
    margin-bottom: 15px;
    flex-grow: 1;
}

.domain-description {
    color: #555;
    font-size: 1em;
    line-height: 1.5;
    margin-bottom: 10px;
}

.domain-features {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.feature {
    background-color: #e0e0e0;
    color: #333;
    padding: 5px 10px;
    border-radius: 3px;
    font-size: 0.9em;
}

.domain-link {
    display: inline-block;
    margin-top: 15px;
    color: #0077b6; /* Match price color */
    text-decoration: none;
    font-weight: bold;
    transition: color 0.3s ease;
}

.domain-link:hover {
    color: #023e8a; /* Darker blue on hover */
    text-decoration: underline;
}

.buy-btn {
    display: inline-block;
    width: 100%;
    padding: 12px;
    background-color: #0a1128; /* Dark blue */
    color: #fff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1.1em;
    font-weight: bold;
    text-align: center;
    transition: background-color 0.3s ease, opacity 0.3s ease;
    margin-top: 15px;
}

.buy-btn:hover {
    background-color: #023e8a; /* Darker blue on hover */
    opacity: 0.9;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .domain-grid {
        grid-template-columns: 1fr;
    }

    .domain-marketplace {
        padding: 40px 15px;
    }

    .tab-btn {
        width: auto;
    }
}

@media (max-width: 480px) {
    .domain-marketplace .section-subtitle {
        font-size: 1em;
    }
}

/* Add styles for the search bar */
.domain-search {
    margin-bottom: 30px;
    text-align: center;
}

.domain-search input[type="text"] {
    padding: 12px 20px;
    width: 100%;
    max-width: 400px;
    border: 1px solid #ccc;
    border-radius: 25px;
    font-size: 1em;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    outline: none;
}

.domain-search input[type="text"]:focus {
    border-color: #0077b6;
    box-shadow: 0 0 8px rgba(0, 119, 182, 0.2);
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

/* Responsive adjustments for search bar */
@media (max-width: 480px) {
    .domain-search input[type="text"] {
        max-width: 100%;
    }
}

/* Buy Website or Domain Nav Link Animation */
#navMenu li a[href="#domain-marketplace"] {
    position: relative;
    color: #ff6b6b;
    font-weight: 600;
    padding: 4px 5px;
    border-radius: 20px;
    background: rgba(255, 107, 107, 0.1);
    transition: all 0.3s ease;
}

#navMenu li a[href="#domain-marketplace"]:hover {
    background: rgba(255, 107, 107, 0.2);
    transform: translateY(-2px);
}

#navMenu li a[href="#domain-marketplace"]::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    border-radius: 22px;
    background: linear-gradient(45deg, #ff6b6b, #ff8e8e, #ff6b6b);
    z-index: -1;
    animation: glowing 2s ease-in-out infinite;
    opacity: 0;
    transition: opacity 0.3s ease;
}

#navMenu li a[href="#domain-marketplace"]:hover::before {
    opacity: 1;
}

@keyframes glowing {
    0% {
        opacity: 0.5;
        box-shadow: 0 0 5px rgba(255, 107, 107, 0.5);
    }
    50% {
        opacity: 0.8;
        box-shadow: 0 0 20px rgba(255, 107, 107, 0.8);
    }
    100% {
        opacity: 0.5;
        box-shadow: 0 0 5px rgba(255, 107, 107, 0.5);
    }
}

/* Responsive adjustments for the animation */
@media (max-width: 768px) {
    #navMenu li a[href="#domain-marketplace"] {
        padding: 6px 12px;
        font-size: 0.9em;
    }
    
    #navMenu li a[href="#domain-marketplace"]::before {
        top: -1px;
        left: -1px;
        right: -1px;
        bottom: -1px;
    }
}

.domain-marketplace, .domain-marketplace * {
    max-width: 100vw !important;
    overflow-x: hidden !important;
}

.domain-marketplace, .domain-grid {
    overflow: hidden !important;
}

/* Hero section buttons modern style */
.hero-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  margin: 8px 8px 0 0;
  font-size: 1.08rem;
  font-weight: 600;
  border-radius: 30px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.07);
  transition: background 0.2s, color 0.2s, box-shadow 0.2s, transform 0.15s;
  border: none;
  outline: none;
  text-decoration: none;
}
.hero-btn i {
  font-size: 1.2em;
}
.hero-btn.btn-primary {
  background: linear-gradient(90deg, #0072b1 0%, #005983 100%);
  color: #fff;
}
.hero-btn.btn-primary:hover {
  background: linear-gradient(90deg, #005983 0%, #0072b1 100%);
  color: #fff;
  box-shadow: 0 4px 16px rgba(0,114,177,0.15);
  transform: translateY(-2px) scale(1.04);
}
.hero-btn.btn-secondary {
  background: #fff;
  color: #0072b1;
  border: 2px solid #0072b1;
}
.hero-btn.btn-secondary:hover {
  background: #0072b1;
  color: #fff;
  box-shadow: 0 4px 16px rgba(0,114,177,0.12);
  transform: translateY(-2px) scale(1.04);
}
@media (max-width: 600px) {
  .hero-btn {
    width: 100%;
    justify-content: center;
    font-size: 1rem;
    padding: 12px 0;
    margin: 8px 0 0 0;
  }
}

/* Fade and slide-in animation for hero section */
.fade-slide-in {
  opacity: 0;
  transform: translateY(40px);
  animation: fadeSlideIn 1s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}
.header-text.fade-slide-in {
  animation-delay: 0.1s;
}
.hero-content.fade-slide-in {
  animation-delay: 0.4s;
}
.hero-actions.fade-slide-in {
  animation-delay: 0.7s;
}
@keyframes fadeSlideIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Animated gradient background for hero section */
.hero {
  position: relative;
  background: linear-gradient(120deg, #e0eafc 0%, #cfdef3 100%);
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  top: -20%;
  left: -20%;
  width: 140%;
  height: 140%;
  background: linear-gradient(120deg, #0072b1 0%, #00c6fb 100%);
  opacity: 0.12;
  z-index: 0;
  animation: gradientMove 8s ease-in-out infinite alternate;
}
@keyframes gradientMove {
  0% {
    transform: scale(1) rotate(0deg) translateY(0);
  }
  100% {
    transform: scale(1.1) rotate(8deg) translateY(20px);
  }
}
.hero > * {
  position: relative;
  z-index: 1;
}

/* Shake animation for hero buttons on hover */
.hero-btn:hover {
  animation: shake 0.4s cubic-bezier(.36,.07,.19,.97) both;
}
@keyframes shake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-8px); }
  40%, 60% { transform: translateX(8px); }
}

/* Floating animation for hero heading and subtitle */
.header-text.fade-slide-in h1, .header-text.fade-slide-in p {
  animation: fadeSlideIn 1s cubic-bezier(0.23, 1, 0.32, 1) forwards, floatY 3.5s ease-in-out infinite;
}
.hero-content.fade-slide-in h2, .hero-content.fade-slide-in p {
  animation: fadeSlideIn 1s cubic-bezier(0.23, 1, 0.32, 1) forwards, floatY 4s 0.5s ease-in-out infinite;
}
@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}

/* Engineer animated gears for hero section */
.engineer-gears {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}
.engineer-gear {
  position: absolute;
  color: #0072b1;
  opacity: 0.13;
  filter: blur(0.5px);
}
.gear1 {
  font-size: 80px;
  top: 10%;
  left: 8%;
  animation: gear-rotate 8s linear infinite;
}
.gear2 {
  font-size: 60px;
  top: 60%;
  left: 85%;
  animation: gear-rotate-rev 12s linear infinite;
}
.gear3 {
  font-size: 100px;
  top: 75%;
  left: 18%;
  animation: gear-rotate 16s linear infinite;
}
@keyframes gear-rotate {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes gear-rotate-rev {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(-360deg); }
}
.hero {
  position: relative;
}

/* Robotics hero visuals */
.robotics-hero-visuals {
  position: absolute;
  right: 5%;
  top: 12%;
  z-index: 3;
  pointer-events: none;
  width: 120px;
  height: 120px;
}

.robot-arm {
  width: 120px;
  height: 120px;
}

.robot-forearm {
  transform-origin: 60px 70px;
  animation: robot-wave 2.5s ease-in-out infinite alternate;
}
@keyframes robot-wave {
  0% { transform: rotate(0deg); }
  50% { transform: rotate(-25deg); }
  100% { transform: rotate(0deg); }
}

.robot-joint-glow {
  filter: drop-shadow(0 0 8px #00c6fb88);
}

.robot-sensor {
  position: absolute;
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle, #00c6fb 60%, #0072b1 100%);
  opacity: 0.22;
  animation: sensor-pulse 1.6s infinite;
  box-shadow: 0 0 12px 2px #00c6fb55;
}
.sensor1 { top: 10px; left: 120px; animation-delay: 0s; }
.sensor2 { top: 80px; left: 60px; animation-delay: 0.5s; }
.sensor3 { top: 40px; left: 160px; animation-delay: 1s; }
@keyframes sensor-pulse {
  0%, 100% { opacity: 0.22; box-shadow: 0 0 0 0 #00c6fb44; }
  50% { opacity: 0.5; box-shadow: 0 0 16px 8px #00c6fb88; }
}
@media (max-width: 700px) {
  .robotics-hero-visuals { display: none; }
}

/* Animated cloud effect for hero section */
.clouds-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}
.cloud {
  position: absolute;
  background: #fff;
  background: radial-gradient(circle at 60% 40%, #fff 60%, #e0eafc 100%);
  opacity: 0.38;
  border-radius: 50%;
  filter: blur(1.5px);
  box-shadow: 30px 10px 60px 0 #e0eafc, 0 0 40px 0 #fff;
}
.cloud1 {
  width: 120px; height: 60px;
  top: 12%; left: -140px;
  animation: cloud-move1 38s linear infinite;
}
.cloud2 {
  width: 90px; height: 44px;
  top: 38%; left: -100px;
  opacity: 0.28;
  animation: cloud-move2 52s linear infinite;
}
.cloud3 {
  width: 160px; height: 70px;
  top: 60%; left: -180px;
  opacity: 0.22;
  animation: cloud-move3 60s linear infinite;
}
.cloud4 {
  width: 70px; height: 32px;
  top: 25%; left: -80px;
  opacity: 0.19;
  animation: cloud-move4 44s linear infinite;
}
@keyframes cloud-move1 {
  0% { left: -140px; }
  100% { left: 110vw; }
}
@keyframes cloud-move2 {
  0% { left: -100px; }
  100% { left: 105vw; }
}
@keyframes cloud-move3 {
  0% { left: -180px; }
  100% { left: 120vw; }
}
@keyframes cloud-move4 {
  0% { left: -80px; }
  100% { left: 100vw; }
}
@media (max-width: 700px) { .clouds-bg { display: none; } }

/* Contain robotics visuals and prevent horizontal overflow */
.hero, .robotics-hero-visuals {
  overflow-x: hidden !important;
  max-width: 100vw !important;
}
.robotics-hero-visuals {
  right: 0;
  left: auto;
  max-width: 120px;
  width: 120px;
  min-width: 0;
  box-sizing: border-box;
}
.robot-arm {
  max-width: 100%;
  width: 100px;
  height: auto;
}
.robot-sensor {
  left: auto !important;
  right: 0 !important;
  max-width: 18px;
}

.hero-btn:hover {
  box-shadow: 0 0 0 0 #2196F3, 0 0 16px 4px #00c6fb88, 0 0 32px 8px #2196F344;
  animation: hero-btn-pulse 0.7s cubic-bezier(.36,.07,.19,.97) both;
}
@keyframes hero-btn-pulse {
  0% { box-shadow: 0 0 0 0 #2196F3, 0 0 0 0 #00c6fb88; }
  70% { box-shadow: 0 0 16px 4px #00c6fb88, 0 0 32px 8px #2196F344; }
  100% { box-shadow: 0 0 0 0 #2196F3, 0 0 0 0 #00c6fb88; }
}

/* Floating/moving icons for hero section */
.floating-icons {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  pointer-events: none;
  z-index: 3;
}

.floating-icon {
  position: absolute;
  font-size: 2.8rem; /* Increased size */
  opacity: 0.22;     /* Slightly more visible */
  color: #0072b1;
  filter: drop-shadow(0 2px 12px #00c6fb22);
  user-select: none;
  transition: font-size 0.3s;
}

.icon1 { left: 8%;  top: 18%; animation: icon-float1 8s ease-in-out infinite alternate; }
.icon2 { left: 78%; top: 14%; animation: icon-float2 10s ease-in-out infinite alternate; }
.icon3 { left: 15%; top: 68%; animation: icon-float3 9s ease-in-out infinite alternate; }
.icon4 { left: 72%; top: 62%; animation: icon-float4 11s ease-in-out infinite alternate; }
.icon5 { left: 48%; top: 36%; animation: icon-float5 7.5s ease-in-out infinite alternate; }

@keyframes icon-float1 { 0% { transform: translateY(0) scale(1); } 100% { transform: translateY(-22px) scale(1.12); } }
@keyframes icon-float2 { 0% { transform: translateY(0) scale(1); } 100% { transform: translateY(18px) scale(1.08); } }
@keyframes icon-float3 { 0% { transform: translateY(0) scale(1); } 100% { transform: translateY(-18px) scale(1.10); } }
@keyframes icon-float4 { 0% { transform: translateY(0) scale(1); } 100% { transform: translateY(14px) scale(1.06); } }
@keyframes icon-float5 { 0% { transform: translateY(0) scale(1); } 100% { transform: translateY(-16px) scale(1.09); } }

.floating-icon i {
  animation: icon-pulse 2.5s ease-in-out infinite;
}
@keyframes icon-pulse {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.3); }
}

@media (max-width: 900px) {
  .floating-icon { font-size: 2rem; }
  .icon1 { left: 5%;  top: 12%; }
  .icon2 { left: 80%; top: 10%; }
  .icon3 { left: 10%; top: 75%; }
  .icon4 { left: 75%; top: 70%; }
  .icon5 { left: 45%; top: 30%; }
}
@media (max-width: 700px) {
  .floating-icons { display: none; }
}

.svg-robot-illustration {
  position: absolute;
  right: 5%;
  bottom: 10%;
  z-index: 2;
  pointer-events: none;
}
.svg-robot-illustration svg {
  width: 120px;
  height: 120px;
}
.svg-robot-illustration .robot-elbow {
  transform-origin: 60px 70px;
  animation: robot-wave 2.5s ease-in-out infinite alternate;
}
@keyframes robot-wave {
  0% { transform: rotate(0deg); }
  50% { transform: rotate(-25deg); }
  100% { transform: rotate(0deg); }
}
@media (max-width: 700px) {
  .svg-robot-illustration { display: none; }
}

/* Navbar social icon animation */
.navbar-social {
  transition: color 0.3s, box-shadow 0.3s, transform 0.2s;
  position: relative;
  z-index: 1;
}
.github-link:hover, .github-link:focus {
  color: #181717 !important;
  text-shadow: 0 0 8px #18171755;
  transform: scale(1.12);
  animation: navbar-pulse 0.7s;
}
.linkedin-link:hover, .linkedin-link:focus {
  color: #0072b1 !important;
  text-shadow: 0 0 8px #0072b155;
  transform: scale(1.12);
  animation: navbar-pulse 0.7s;
}
@keyframes navbar-pulse {
  0% { box-shadow: 0 0 0 0 #0072b1; }
  70% { box-shadow: 0 0 12px 6px #0072b144; }
  100% { box-shadow: 0 0 0 0 #0072b1; }
}

.project-features, .project-tech {
  margin-top: 15px;
}
.project-features h4, .project-tech h4 {
  color: #0072b1;
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 8px;
}
.project-features ul {
  list-style: none;
  padding-left: 0;
}
.project-features li {
  color: #555;
  font-size: 0.9rem;
  margin-bottom: 4px;
  padding-left: 15px;
  position: relative;
}
.project-features li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: #0072b1;
  font-weight: bold;
}
.tech-tag {
  display: inline-block;
  background: linear-gradient(135deg, #0072b1, #00c6fb);
  color: white;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 500;
  margin: 2px 4px 2px 0;
  box-shadow: 0 2px 4px rgba(0, 114, 177, 0.2);
  transition: all 0.3s ease;
}
.tech-tag:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 8px rgba(0, 114, 177, 0.3);
}

.quick-links-columns {
  display: flex;
  gap: 56px; /* More space between columns */
  align-items: flex-start;
}
.quick-links-columns ul {
  list-style: none;
  padding: 0;
  margin: 0;
  min-width: 180px;
}
.quick-links-columns li {
  margin-bottom: 10px;
  text-align: left;
}
.quick-links-columns a {
  color: #0072b1;
  text-decoration: none;
  transition: color 0.2s;
  font-size: 1.05em;
}
.quick-links-columns a:hover {
  color: #2196F3;
  text-decoration: underline;
}
@media (max-width: 900px) {
  .quick-links-columns {
    gap: 24px;
  }
  .quick-links-columns ul {
    min-width: 140px;
  }
}
@media (max-width: 700px) {
  .quick-links-columns {
    flex-direction: column;
    gap: 0;
  }
  .quick-links-columns ul {
    min-width: 0;
    margin-bottom: 12px;
  }
}

.quick-links-columns ul {
  min-width: 220px; /* Increase as needed */
}

.quick-links-columns li {
  margin-bottom: 10px;
  text-align: left;
  /* Optional: add left padding for wrapped lines */
  padding-left: 0;
  text-indent: 0;
}

.quick-links-columns a {
  color: #0072b1;
  text-decoration: none;
  transition: color 0.2s;
  font-size: 1.05em;
  word-break: keep-all;
  white-space: normal; /* or 'nowrap' if you want to force one line */
  line-height: 1.5;
  display: inline-block;
  /* Optional: add max-width if you want to limit the width */
  /* max-width: 220px; */
}

/* iPad Portrait (768px) and below */
@media (max-width: 1024px) {
  .container {
    max-width: 90vw;
    padding-left: 12px;
    padding-right: 12px;
  }
  .footer-content {
    gap: 24px;
  }
  .footer-section {
    min-width: 160px;
  }
  .project-grid {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
  .domain-grid {
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
  .skills-content {
    grid-template-columns: 1fr;
  }
}

/* iPad Portrait (768px) and below */
@media (max-width: 900px) {
  .footer-content {
    flex-direction: column;
    gap: 32px;
  }
  .footer-section, .footer-section.footer-links {
    min-width: 0;
    max-width: 100%;
  }
  .footer-section:last-child {
    margin-left: 0;
  }
  .project-grid, .domain-grid {
    grid-template-columns: 1fr;
  }
  .quick-links-columns {
    flex-direction: column;
    gap: 0;
  }
  .quick-links-columns ul {
    min-width: 0;
    margin-bottom: 12px;
  }
}

/* iPad Landscape (1024px) and below */
@media (max-width: 1200px) {
  .container {
    max-width: 960px;
  }
  .project-grid, .domain-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Make buttons and links easier to tap */
.btn, .hero-btn, .footer-section a {
  min-height: 44px;
  min-width: 44px;
  font-size: 1.1em;
}

/* Responsive nav menu for iPad */
@media (max-width: 992px) {
  #navbar ul {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }
  #navbar li {
    width: 100%;
    margin: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  }
  #navbar a {
    display: block;
    padding: 12px 0;
    color: var(--text-color);
    font-size: 1.1rem;
    width: 100%;
  }
}

@media (max-width: 1300px) {
  .container {
    max-width: 98vw;
    padding-left: 8px;
    padding-right: 8px;
  }
  .project-grid, .domain-grid {
    grid-template-columns: 1fr 1fr;
    gap: 18px;
  }
  #navbar ul {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 8px;
  }
  #navbar li {
    margin: 0 2px;
  }
}

.consultancy-info input[type='checkbox'] {
    width: 24px;
    height: 24px;
    accent-color: var(--secondary-color);
    border-radius: 6px;
    margin-right: 14px;
    vertical-align: middle;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(33, 150, 243, 0.08);
    transition: box-shadow 0.2s, border-color 0.2s;
}
.consultancy-info input[type='checkbox']:focus {
    outline: 2px solid var(--secondary-color);
    box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.18);
}
.consultancy-info label {
    font-size: 1.08rem;
    font-weight: 500;
    color: #222;
    cursor: pointer;
    vertical-align: middle;
    margin-left: 2px;
}
@media (max-width: 576px) {
    .consultancy-info input[type='checkbox'] {
        width: 20px;
        height: 20px;
        margin-right: 10px;
    }
    .consultancy-info label {
        font-size: 1rem;
    }
}