/*==================================================
                GOOGLE FONT
==================================================*/

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

/*==================================================
                RESET
==================================================*/

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

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Poppins', sans-serif;
    color: #1b1b1b;
    background: #faf7f2;
    overflow-x: hidden;
    line-height: 1.7;
    position: relative;
}

/*==================================================
                PREMIUM BACKGROUND
==================================================*/

body::before {

    content: "";

    position: fixed;

    inset: 0;

    z-index: -2;

    background:

        radial-gradient(circle at 10% 10%, rgba(232, 176, 38, .18), transparent 28%),

        radial-gradient(circle at 90% 20%, rgba(255, 255, 255, .85), transparent 35%),

        radial-gradient(circle at 70% 80%, rgba(232, 176, 38, .12), transparent 30%),

        linear-gradient(135deg, #ffffff, #fdf8ee, #f8f4ec, #ffffff);

}

body::after {

    content: "";

    position: fixed;

    inset: 0;

    z-index: -1;

    backdrop-filter: blur(6px);

}

/*==================================================
                VARIABLES
==================================================*/

:root {

    --primary: #d89b13;

    --primary-dark: #bb8308;

    --secondary: #f5ede0;

    --white: #ffffff;

    --black: #1d1d1d;

    --text: #555;

    --border: #ebe4d7;

    --shadow:

        0 20px 50px rgba(0, 0, 0, .08);

    --glass:

        rgba(255, 255, 255, .55);

    --radius: 24px;

    --transition: .35s;

    --container: 1280px;

}

/*==================================================
                COMMON
==================================================*/

.container {

    width: min(92%, 1280px);

    margin: auto;

}

section {

    padding: 120px 0;

    position: relative;

}

img {

    display: block;

    width: 100%;

}

ul {

    list-style: none;

}

a {

    text-decoration: none;

    color: inherit;

}

button {

    font-family: inherit;

}

/*==================================================
                SCROLLBAR
==================================================*/

::-webkit-scrollbar {

    width: 10px;

}

::-webkit-scrollbar-track {

    background: #ece8df;

}

::-webkit-scrollbar-thumb {

    background: var(--primary);

    border-radius: 50px;

}

/*==================================================
                TYPOGRAPHY
==================================================*/

.section-subtitle {

    color: var(--primary);

    font-weight: 600;

    letter-spacing: 1px;

    text-transform: uppercase;

}

.section-heading {

    text-align: center;

    margin-bottom: 70px;

}

.section-heading h2 {

    font-size: 3rem;

    margin-top: 12px;

}

.section-heading p {

    max-width: 700px;

    margin: 20px auto 0;

    color: var(--text);

}

/*==================================================
                BUTTONS
==================================================*/

.primary-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 18px 42px;

    border-radius: 60px;

    background: linear-gradient(135deg,
            #efb82f,
            #d7960f);

    color: #fff;

    font-weight: 600;

    transition: .4s;

    box-shadow:

        0 20px 40px rgba(216, 155, 19, .30);

}

.primary-btn:hover {

    transform: translateY(-6px);

}

.secondary-btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 18px 42px;

    border-radius: 60px;

    border: 2px solid var(--primary);

    background: #fff;

    color: var(--black);

    font-weight: 600;

    transition: .4s;

}

.secondary-btn:hover {

    background: var(--primary);

    color: #fff;

}

.resume-btn {

    padding: 18px 38px;

    border-radius: 60px;

    background: linear-gradient(135deg,
            #efb82f,
            #d7960f);

    color: #fff;

    font-weight: 600;

    transition: .4s;

}

.resume-btn:hover {

    transform: translateY(-4px);

}

/*==================================================
                GLASS CARD
==================================================*/

.glass {

    background: rgba(255, 255, 255, .62);

    backdrop-filter: blur(24px);

    border: 1px solid rgba(255, 255, 255, .7);

    box-shadow: var(--shadow);

    border-radius: 28px;

}

/*==================================================
                HEADER
==================================================*/

.header {

    position: fixed;

    top: 20px;

    left: 0;

    width: 100%;

    z-index: 9999;

    transition: .4s;

}

.header .container {

    display: flex;

    align-items: center;

    justify-content: space-between;

    height: 90px;

    padding: 0 35px;

    background: rgba(255, 255, 255, .70);

    backdrop-filter: blur(25px);

    border: 1px solid rgba(255, 255, 255, .8);

    border-radius: 80px;

    box-shadow:
        0 15px 40px rgba(0, 0, 0, .08);

}

/*==================================================
            HEADER SCROLL
==================================================*/

.header.active .container {

    height: 78px;

    box-shadow:
        0 18px 45px rgba(0, 0, 0, .12);

}

/*==================================================
                LOGO
==================================================*/

.logo {

    display: flex;

    align-items: center;

    gap: 18px;

}

.logo span {

    width: 58px;

    height: 58px;

    border-radius: 50%;

    display: flex;

    justify-content: center;

    align-items: center;

    font-size: 22px;

    font-weight: 700;

    color: #fff;

    background: linear-gradient(135deg,
            #efb82f,
            #cb8b08);

    box-shadow:
        0 15px 35px rgba(216, 155, 19, .35);

}

.logo h2 {

    font-size: 31px;

    font-weight: 700;

    color: #1b1b1b;

}

/*==================================================
                NAVBAR
==================================================*/

.navbar {

    display: flex;

    align-items: center;

}

.nav-list {

    display: flex;

    align-items: center;

    gap: 42px;

}

.nav-list li {

    position: relative;

}

.nav-list a {

    font-size: 17px;

    font-weight: 600;

    color: #222;

    transition: .35s;

    position: relative;

}

.nav-list a::before {

    content: "";

    position: absolute;

    left: 50%;

    bottom: -14px;

    width: 0;

    height: 3px;

    background: linear-gradient(90deg,
            #efb82f,
            #cb8b08);

    border-radius: 20px;

    transition: .35s;

    transform: translateX(-50%);

}

.nav-list a:hover {

    color: var(--primary);

}

.nav-list a:hover::before {

    width: 100%;

}

/*==================================================
            ACTIVE MENU
==================================================*/

.nav-list a.active {

    color: var(--primary);

}

.nav-list a.active::before {

    width: 100%;

}

/*==================================================
            DOWNLOAD BUTTON
==================================================*/

.resume-btn {

    display: flex;

    align-items: center;

    gap: 12px;

    min-width: 190px;

    justify-content: center;

    height: 58px;

    font-size: 16px;

    font-weight: 600;

    color: #fff;

    border-radius: 60px;

    background: linear-gradient(135deg,
            #efb82f,
            #cb8b08);

    box-shadow:
        0 15px 35px rgba(216, 155, 19, .30);

}

.resume-btn:hover {

    transform: translateY(-5px);

    box-shadow:
        0 20px 40px rgba(216, 155, 19, .40);

}

/*==================================================
            MOBILE MENU BUTTON
==================================================*/

.menu-btn {

    display: none;

    width: 52px;

    height: 52px;

    border-radius: 50%;

    background: #fff;

    justify-content: center;

    align-items: center;

    cursor: pointer;

    box-shadow:
        0 15px 35px rgba(0, 0, 0, .08);

}

.menu-btn i {

    font-size: 22px;

    color: #222;

}

/*==================================================
            NAV HOVER EFFECT
==================================================*/

.nav-list li::after {

    content: "";

    position: absolute;

    left: 50%;

    top: 50%;

    width: 8px;

    height: 8px;

    border-radius: 50%;

    background: var(--primary);

    opacity: 0;

    transform: translate(-50%, -50%);

    transition: .35s;

}

.nav-list li:hover::after {

    opacity: 1;

    top: -10px;

}

/*==================================================
            RESPONSIVE
==================================================*/

@media(max-width:1100px) {

    .nav-list {

        gap: 28px;

    }

}

@media(max-width:992px) {

    .menu-btn {

        display: flex;

    }

    .navbar {

        position: fixed;

        top: 95px;

        right: -100%;

        width: 280px;

        background: #fff;

        border-radius: 20px;

        padding: 30px;

        box-shadow: 0 20px 40px rgba(0, 0, 0, .10);

        transition: .4s;

    }

    .navbar.active {

        right: 20px;

    }

    .navbar .nav-list {

        flex-direction: column;

        gap: 20px;

    }

    .resume-btn {

        display: none;

    }

    .header .container {

        height: 80px;

        padding: 0 25px;

    }

}


@media(max-width:576px) {

    .logo h2 {

        font-size: 22px;

    }

    .logo span {

        width: 50px;

        height: 50px;

        font-size: 20px;

    }

}

/*==================================================
                HERO SECTION
==================================================*/

.hero {

    min-height: 100vh;

    display: flex;

    align-items: center;

    position: relative;

    overflow: hidden;

    padding-top: 180px;

    padding-bottom: 120px;

}

/*==================================================
            HERO CONTAINER
==================================================*/

.hero-container {

    display: grid;

    grid-template-columns: 1.1fr .9fr;

    align-items: center;

    gap: 70px;

    position: relative;

    z-index: 5;

}

/*==================================================
            DECORATION LAYERS
==================================================*/

.hero-blob {

    position: absolute;

    width: 700px;

    height: 700px;

    background: radial-gradient(circle,
            rgba(232, 155, 19, .18),
            transparent 70%);

    top: -220px;

    right: -150px;

    border-radius: 50%;

    filter: blur(30px);

    z-index: 1;

}

.hero-glow {

    position: absolute;

    width: 450px;

    height: 450px;

    left: -180px;

    bottom: -150px;

    background: rgba(255, 210, 120, .25);

    border-radius: 50%;

    filter: blur(90px);

    z-index: 1;

}

.hero-light {

    position: absolute;

    width: 300px;

    height: 300px;

    top: 120px;

    left: 40%;

    border-radius: 50%;

    background: rgba(255, 255, 255, .75);

    filter: blur(80px);

    z-index: 1;

}

/*==================================================
                RING
==================================================*/

.hero-ring {

    position: absolute;

    width: 620px;

    height: 620px;

    border: 2px solid rgba(216, 155, 19, .18);

    border-radius: 50%;

    top: 80px;

    right: -120px;

    z-index: 1;

}

.hero-ring::before {

    content: "";

    position: absolute;

    inset: 35px;

    border-radius: 50%;

    border: 1px dashed rgba(216, 155, 19, .20);

}

.hero-ring::after {

    content: "";

    position: absolute;

    inset: 80px;

    border-radius: 50%;

    border: 1px solid rgba(216, 155, 19, .15);

}

/*==================================================
                GRID
==================================================*/

.hero-grid {

    position: absolute;

    right: 100px;

    top: 140px;

    width: 240px;

    height: 240px;

    opacity: .18;

    background-image:

        radial-gradient(circle, #d89b13 1.2px, transparent 1.2px);

    background-size: 22px 22px;

    z-index: 1;

}

/*==================================================
            OLD BACKGROUND CIRCLES
==================================================*/

.hero-bg-circle {

    position: absolute;

    border-radius: 50%;

    z-index: 0;

}

.hero-bg-circle.one {

    width: 120px;

    height: 120px;

    top: 140px;

    left: 90px;

    background: rgba(216, 155, 19, .15);

}

.hero-bg-circle.two {

    width: 80px;

    height: 80px;

    bottom: 120px;

    right: 180px;

    background: rgba(216, 155, 19, .20);

}

.hero-bg-circle.three {

    width: 45px;

    height: 45px;

    top: 320px;

    right: 420px;

    background: #d89b13;

    opacity: .30;

}

/*==================================================
            HERO CONTENT
==================================================*/

.hero-content {

    position: relative;

    z-index: 10;

}

/*==================================================
        HERO STATUS BADGE
==================================================*/

.hero-status {

    display: inline-flex;

    align-items: center;

    gap: 12px;

    padding: 12px 22px;

    border-radius: 50px;

    background: rgba(255, 255, 255, .75);

    backdrop-filter: blur(18px);

    border: 1px solid rgba(255, 255, 255, .90);

    box-shadow:
        0 15px 35px rgba(0, 0, 0, .08);

    color: #333;

    font-size: 15px;

    font-weight: 600;

    margin-bottom: 35px;

}

.hero-status i {

    color: #2ecc71;

    font-size: 11px;

    animation: pulse 1.6s infinite;

}

/*==================================================
            HERO HEADING
==================================================*/

.hero-content h1 {

    font-size: 72px;

    line-height: 1.08;

    font-weight: 800;

    color: #111;

    margin-bottom: 18px;

}

.hero-content h1 span {

    display: block;

    margin-top: 8px;

    color: #cb8b08;
    /* Fallback */

    background: linear-gradient(135deg,
            #efb82f,
            #cb8b08);

    background-clip: text;
    -webkit-background-clip: text;

    color: transparent;
    -webkit-text-fill-color: transparent;

}

/*==================================================
            HERO SUBTITLE
==================================================*/

.hero-content h3 {

    font-size: 30px;

    font-weight: 600;

    color: #444;

    margin-bottom: 28px;

}

/*==================================================
            HERO PARAGRAPH
==================================================*/

.hero-content p {

    max-width: 620px;

    font-size: 18px;

    color: #666;

    line-height: 1.9;

    margin-bottom: 45px;

}

/*==================================================
            HERO BUTTONS
==================================================*/

.hero-buttons {

    display: flex;

    align-items: center;

    gap: 22px;

    margin-bottom: 55px;

}

.hero-buttons .primary-btn {

    min-width: 190px;

    height: 62px;

    font-size: 17px;

    border-radius: 60px;

}

.hero-buttons .secondary-btn {

    min-width: 190px;

    height: 62px;

    font-size: 17px;

    border-radius: 60px;

}

/*==================================================
        BUTTON HOVER
==================================================*/

.hero-buttons .primary-btn:hover {

    transform: translateY(-6px) scale(1.03);

}

.hero-buttons .secondary-btn:hover {

    transform: translateY(-6px);

}

/*==================================================
            HERO BADGE EFFECT
==================================================*/

.hero-status::before {

    content: "";

    width: 8px;

    height: 8px;

    border-radius: 50%;

    background: #2ecc71;

    box-shadow:
        0 0 15px #2ecc71;

}

/*==================================================
            PULSE ANIMATION
==================================================*/

@keyframes pulse {

    0% {

        transform: scale(1);

    }

    50% {

        transform: scale(1.4);

    }

    100% {

        transform: scale(1);

    }

}

/*==================================================
        RESPONSIVE
==================================================*/

@media(max-width:992px) {

    .hero-content {

        text-align: center;

    }

    .hero-content h1 {

        font-size: 52px;

    }

    .hero-content h3 {

        font-size: 24px;

    }

    .hero-content p {

        margin: auto;

        margin-bottom: 40px;

    }

    .hero-buttons {

        justify-content: center;

        flex-wrap: wrap;

    }

}

@media(max-width:576px) {

    .hero-content h1 {

        font-size: 40px;

    }

    .hero-content h3 {

        font-size: 20px;

    }

    .hero-content p {

        font-size: 16px;

    }

    .hero-buttons {

        flex-direction: column;

    }

    .hero-buttons .primary-btn,

    .hero-buttons .secondary-btn {

        width: 100%;

    }

}

/*==================================================
            HERO IMAGE WRAPPER
==================================================*/

.hero-image {

    position: relative;

    display: flex;

    justify-content: center;

    align-items: center;

    z-index: 10;

}

.image-wrapper {

    position: relative;

    width: 520px;

    height: 520px;

    display: flex;

    justify-content: center;

    align-items: center;

}

/*==================================================
            GOLDEN GLOW
==================================================*/

.image-glow {

    position: absolute;

    width: 560px;

    height: 560px;

    border-radius: 50%;

    background: radial-gradient(circle,
            rgba(216, 155, 19, .30),
            rgba(216, 155, 19, .12),
            transparent 72%);

    filter: blur(35px);

    animation: glowRotate 12s linear infinite;

    z-index: 0;

}

/*==================================================
            OUTER RING
==================================================*/

.image-ring {

    position: absolute;

    width: 500px;

    height: 500px;

    border-radius: 50%;

    border: 2px solid rgba(216, 155, 19, .28);

    animation: rotateRing 20s linear infinite;

}

.image-ring::before {

    content: "";

    position: absolute;

    inset: 18px;

    border-radius: 50%;

    border: 2px dashed rgba(216, 155, 19, .35);

}

.image-ring::after {

    content: "";

    position: absolute;

    inset: 55px;

    border-radius: 50%;

    border: 1px solid rgba(216, 155, 19, .18);

}

/*==================================================
            IMAGE BOX
==================================================*/

.image-box {

    position: relative;

    width: 400px;

    height: 400px;

    border-radius: 50%;

    overflow: hidden;

    background: #fff;

    border: 10px solid #fff;

    box-shadow:
        0 25px 60px rgba(0, 0, 0, .12),
        0 10px 30px rgba(216, 155, 19, .20);

    animation: floatImage 6s ease-in-out infinite;

    z-index: 5;

}

.image-box img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: .5s;

}

.image-box:hover img {

    transform: scale(1.06);

}

/*==================================================
        DECORATIVE DOTS
==================================================*/

.image-wrapper::before {

    content: "";

    position: absolute;

    top: -25px;

    left: -35px;

    width: 110px;

    height: 110px;

    background-image:
        radial-gradient(#d89b13 2px, transparent 2px);

    background-size: 16px 16px;

    opacity: .35;

}

.image-wrapper::after {

    content: "";

    position: absolute;

    right: -40px;

    bottom: -40px;

    width: 140px;

    height: 140px;

    border-radius: 50%;

    background: rgba(216, 155, 19, .12);

    filter: blur(10px);

}

/*==================================================
        FLOAT ANIMATION
==================================================*/

@keyframes floatImage {

    0% {

        transform: translateY(0px);

    }

    50% {

        transform: translateY(-18px);

    }

    100% {

        transform: translateY(0px);

    }

}

/*==================================================
        RING ROTATION
==================================================*/

@keyframes rotateRing {

    from {

        transform: rotate(0deg);

    }

    to {

        transform: rotate(360deg);

    }

}

/*==================================================
        GLOW ROTATION
==================================================*/

@keyframes glowRotate {

    from {

        transform: rotate(0deg) scale(1);

    }

    50% {

        transform: rotate(180deg) scale(1.05);

    }

    to {

        transform: rotate(360deg) scale(1);

    }

}

/*==================================================
            RESPONSIVE
==================================================*/

@media(max-width:992px) {

    .hero-image {

        margin-top: 60px;

    }

    .image-wrapper {

        width: 420px;

        height: 420px;

    }

    .image-ring {

        width: 400px;

        height: 400px;

    }

    .image-glow {

        width: 450px;

        height: 450px;

    }

    .image-box {

        width: 320px;

        height: 320px;

    }

}

@media(max-width:576px) {

    .image-wrapper {

        width: 320px;

        height: 320px;

    }

    .image-ring {

        width: 300px;

        height: 300px;

    }

    .image-glow {

        width: 340px;

        height: 340px;

    }

    .image-box {

        width: 250px;

        height: 250px;

    }

}

/*==================================================
            HERO STATS
==================================================*/

.hero-stats {

    display: flex;

    gap: 22px;

    flex-wrap: wrap;

    margin-top: 20px;

    margin-bottom: 45px;

}

.stat-box {

    flex: 1;

    min-width: 160px;

    background: rgba(255, 255, 255, .75);

    backdrop-filter: blur(20px);

    border: 1px solid rgba(255, 255, 255, .8);

    border-radius: 24px;

    padding: 28px 22px;

    text-align: center;

    box-shadow:
        0 20px 45px rgba(0, 0, 0, .08);

    transition: .35s;

}

.stat-box:hover {

    transform: translateY(-10px);

    box-shadow:
        0 28px 60px rgba(216, 155, 19, .18);

}

.stat-box h2 {

    font-size: 42px;

    color: var(--primary);

    font-weight: 700;

    margin-bottom: 8px;

}

.stat-box span {

    font-size: 15px;

    color: #666;

    line-height: 1.6;

}

/*==================================================
            SOCIAL ICONS
==================================================*/

.social-icons {

    display: flex;

    gap: 18px;

    margin-top: 15px;

}

.social-icons a {

    width: 58px;

    height: 58px;

    display: flex;

    align-items: center;

    justify-content: center;

    border-radius: 50%;

    background: #fff;

    color: #333;

    font-size: 22px;

    box-shadow:
        0 15px 35px rgba(0, 0, 0, .08);

    transition: .35s;

}

.social-icons a:hover {

    transform: translateY(-8px) rotate(8deg);

    color: #fff;

    background: linear-gradient(135deg,
            #efb82f,
            #cb8b08);

    box-shadow:
        0 20px 45px rgba(216, 155, 19, .35);

}

/*==================================================
            FLOATING CARDS
==================================================*/

.floating-card {

    position: absolute;

    background: rgba(255, 255, 255, .82);

    backdrop-filter: blur(20px);

    border: 1px solid rgba(255, 255, 255, .8);

    border-radius: 20px;

    padding: 18px 22px;

    display: flex;

    align-items: center;

    gap: 14px;

    box-shadow:
        0 18px 40px rgba(0, 0, 0, .08);

    animation: floatingCard 5s ease-in-out infinite;

    z-index: 20;

}

.floating-card i {

    width: 48px;

    height: 48px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #fff;

    font-size: 20px;

    background: linear-gradient(135deg,
            #efb82f,
            #cb8b08);

}

.floating-card h4 {

    font-size: 16px;

    color: #222;

    font-weight: 600;

}

/*==================================================
            CARD POSITIONS
==================================================*/

.card-one {

    top: 40px;

    left: -70px;

}

.card-two {

    right: -80px;

    top: 180px;

    animation-delay: 1s;

}

.card-three {

    bottom: 40px;

    left: -40px;

    animation-delay: 2s;

}

/*==================================================
            CARD ANIMATION
==================================================*/

@keyframes floatingCard {

    0% {

        transform: translateY(0);

    }

    50% {

        transform: translateY(-12px);

    }

    100% {

        transform: translateY(0);

    }

}

/*==================================================
            HERO FADE IN
==================================================*/

.hero-content {

    animation: heroFadeLeft 1s ease;

}

.hero-image {

    animation: heroFadeRight 1.2s ease;

}

@keyframes heroFadeLeft {

    from {

        opacity: 0;

        transform: translateX(-70px);

    }

    to {

        opacity: 1;

        transform: translateX(0);

    }

}

@keyframes heroFadeRight {

    from {

        opacity: 0;

        transform: translateX(70px);

    }

    to {

        opacity: 1;

        transform: translateX(0);

    }

}

/*==================================================
            RESPONSIVE
==================================================*/

@media(max-width:992px) {

    .hero-stats {

        justify-content: center;

    }

    .social-icons {

        justify-content: center;

    }

    .floating-card {

        display: none;

    }

}

@media(max-width:576px) {

    .stat-box {

        min-width: 100%;

    }

    .social-icons a {

        width: 52px;

        height: 52px;

        font-size: 20px;

    }

}

/*==================================================
                ABOUT SECTION
==================================================*/

.about {

    position: relative;

    padding: 140px 0;

    overflow: hidden;

}

/*==================================================
            BACKGROUND EFFECTS
==================================================*/

.about::before {

    content: "";

    position: absolute;

    width: 550px;

    height: 550px;

    left: -180px;

    top: -120px;

    border-radius: 50%;

    background: radial-gradient(circle,
            rgba(216, 155, 19, .12),
            transparent 70%);

    filter: blur(40px);

    z-index: 0;

}

.about::after {

    content: "";

    position: absolute;

    width: 420px;

    height: 420px;

    right: -120px;

    bottom: -120px;

    border-radius: 50%;

    background: rgba(216, 155, 19, .08);

    filter: blur(60px);

    z-index: 0;

}

/*==================================================
            ABOUT CONTAINER
==================================================*/

.about .container {

    display: grid;

    grid-template-columns: .9fr 1.1fr;

    align-items: center;

    gap: 90px;

    position: relative;

    z-index: 5;

}

/*==================================================
            ABOUT IMAGE
==================================================*/

.about-image {

    position: relative;

    display: flex;

    justify-content: center;

    align-items: center;

}

/*==================================================
            IMAGE FRAME
==================================================*/

.about-image::before {

    content: "";

    position: absolute;

    width: 430px;

    height: 430px;

    border-radius: 40px;

    background: linear-gradient(135deg,
            rgba(239, 184, 47, .18),
            rgba(255, 255, 255, .8));

    transform: rotate(-8deg);

    z-index: 0;

}

.about-image::after {

    content: "";

    position: absolute;

    width: 470px;

    height: 470px;

    border: 2px dashed rgba(216, 155, 19, .22);

    border-radius: 40px;

    transform: rotate(6deg);

    z-index: 0;

}

/*==================================================
            IMAGE CARD
==================================================*/

.about-image img {

    position: relative;

    width: 380px;

    height: 470px;

    object-fit: cover;

    border-radius: 30px;

    border: 8px solid #fff;

    background: #fff;

    box-shadow:

        0 30px 70px rgba(0, 0, 0, .10),

        0 15px 35px rgba(216, 155, 19, .15);

    transition: .45s;

    z-index: 2;

}

.about-image:hover img {

    transform: translateY(-12px) scale(1.02);

}

/*==================================================
            FLOATING SHAPE
==================================================*/

.about-image .shape {

    position: absolute;

    width: 120px;

    height: 120px;

    border-radius: 24px;

    background: linear-gradient(135deg,
            #efb82f,
            #d7960f);

    opacity: .15;

    right: -20px;

    bottom: 40px;

    transform: rotate(25deg);

}

/*==================================================
            DOT PATTERN
==================================================*/

.about-image .dots {

    position: absolute;

    left: -40px;

    top: 30px;

    width: 120px;

    height: 120px;

    background-image:

        radial-gradient(#d89b13 2px, transparent 2px);

    background-size: 16px 16px;

    opacity: .30;

}

/*==================================================
            RESPONSIVE
==================================================*/

@media(max-width:992px) {

    .about .container {

        grid-template-columns: 1fr;

        gap: 70px;

    }

    .about-image {

        order: -1;

    }

}

@media(max-width:576px) {

    .about-image img {

        width: 290px;

        height: 360px;

    }

    .about-image::before {

        width: 330px;

        height: 330px;

    }

    .about-image::after {

        width: 360px;

        height: 360px;

    }

}

/*==================================================
            ABOUT CONTENT
==================================================*/

.about-content {

    position: relative;

    z-index: 5;

}

.about-content .section-subtitle {

    display: inline-flex;

    align-items: center;

    gap: 10px;

    padding: 10px 22px;

    background: rgba(255, 255, 255, .75);

    border: 1px solid rgba(216, 155, 19, .15);

    border-radius: 50px;

    color: var(--primary);

    font-size: 15px;

    font-weight: 600;

    letter-spacing: 1px;

    margin-bottom: 24px;

    box-shadow: 0 15px 35px rgba(0, 0, 0, .06);

}

.about-content h2 {

    font-size: 52px;

    font-weight: 800;

    color: #1a1a1a;

    line-height: 1.2;

    margin-bottom: 25px;

}

.about-content h2 span {

    color: var(--primary);

}

.about-content p {

    font-size: 17px;

    color: #666;

    line-height: 1.9;

    margin-bottom: 22px;

}

/*==================================================
            ABOUT INFO GRID
==================================================*/

.about-info {

    display: grid;

    grid-template-columns: repeat(2, 1fr);

    gap: 22px;

    margin: 45px 0;

}

.info-card {

    display: flex;

    align-items: flex-start;

    gap: 18px;

    padding: 22px;

    border-radius: 22px;

    background: rgba(255, 255, 255, .75);

    backdrop-filter: blur(18px);

    border: 1px solid rgba(255, 255, 255, .9);

    box-shadow: 0 18px 40px rgba(0, 0, 0, .08);

    transition: .35s;

}

.info-card:hover {

    transform: translateY(-8px);

    box-shadow: 0 25px 55px rgba(216, 155, 19, .18);

}

.info-card i {

    width: 58px;

    height: 58px;

    border-radius: 18px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #fff;

    font-size: 22px;

    background: linear-gradient(135deg,
            #efb82f,
            #cb8b08);

    flex-shrink: 0;

}

.info-card h4 {

    font-size: 18px;

    color: #222;

    margin-bottom: 6px;

}

.info-card span {

    display: block;

    font-size: 15px;

    color: #666;

    line-height: 1.7;

}

/*==================================================
            ABOUT BUTTONS
==================================================*/

.about-buttons {

    display: flex;

    gap: 20px;

    margin-top: 20px;

}

.about-buttons .primary-btn,

.about-buttons .secondary-btn {

    min-width: 180px;

    height: 60px;

}

/*==================================================
            RESPONSIVE
==================================================*/

@media(max-width:992px) {

    .about-content {

        text-align: center;

    }

    .about-content h2 {

        font-size: 40px;

    }

    .about-info {

        grid-template-columns: 1fr;

    }

    .about-buttons {

        justify-content: center;

        flex-wrap: wrap;

    }

}

@media(max-width:576px) {

    .about-content h2 {

        font-size: 32px;

    }

    .about-content p {

        font-size: 16px;

    }

    .about-buttons {

        flex-direction: column;

    }

    .about-buttons .primary-btn,

    .about-buttons .secondary-btn {

        width: 100%;

    }

}


/*==================================================
        EXPERIENCE BADGE
==================================================*/

.about-image .exp-badge {

    position: absolute;

    right: -40px;

    top: 50%;

    transform: translateY(-50%);

    width: 170px;

    height: 170px;

    border-radius: 50%;

    background: linear-gradient(135deg,
            #efb82f,
            #cb8b08);

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    color: #fff;

    box-shadow:
        0 30px 60px rgba(216, 155, 19, .35);

    z-index: 5;

    animation: badgeFloat 5s ease-in-out infinite;

}

.about-image .exp-badge h2 {

    font-size: 48px;

    line-height: 1;

    font-weight: 800;

}

.about-image .exp-badge span {

    font-size: 15px;

    font-weight: 500;

    text-align: center;

    margin-top: 8px;

}

/*==================================================
            GLOW EFFECT
==================================================*/

.about-image .exp-badge::before {

    content: "";

    position: absolute;

    inset: -12px;

    border-radius: 50%;

    border: 2px solid rgba(216, 155, 19, .25);

}

.about-image .exp-badge::after {

    content: "";

    position: absolute;

    inset: -28px;

    border-radius: 50%;

    border: 1px dashed rgba(216, 155, 19, .20);

    animation: rotateBadge 20s linear infinite;

}

/*==================================================
            CONTENT ANIMATION
==================================================*/

.about-content {

    animation: aboutFadeLeft .9s ease;

}

.about-image {

    animation: aboutFadeRight 1s ease;

}

@keyframes aboutFadeLeft {

    from {

        opacity: 0;

        transform: translateX(-70px);

    }

    to {

        opacity: 1;

        transform: translateX(0);

    }

}

@keyframes aboutFadeRight {

    from {

        opacity: 0;

        transform: translateX(70px);

    }

    to {

        opacity: 1;

        transform: translateX(0);

    }

}

/*==================================================
            BADGE FLOAT
==================================================*/

@keyframes badgeFloat {

    0% {

        transform: translateY(-50%);

    }

    50% {

        transform: translateY(calc(-50% - 12px));

    }

    100% {

        transform: translateY(-50%);

    }

}

/*==================================================
            BADGE ROTATE
==================================================*/

@keyframes rotateBadge {

    from {

        transform: rotate(0deg);

    }

    to {

        transform: rotate(360deg);

    }

}

/*==================================================
            IMAGE HOVER
==================================================*/

.about-image:hover img {

    transform: translateY(-12px) scale(1.03);

    box-shadow:
        0 35px 80px rgba(0, 0, 0, .14),
        0 20px 50px rgba(216, 155, 19, .25);

}

.about-image:hover::before {

    transform: rotate(-12deg);

}

.about-image:hover::after {

    transform: rotate(10deg);

}

/*==================================================
            INFO CARD HOVER
==================================================*/

.info-card {

    position: relative;

    overflow: hidden;

}

.info-card::before {

    content: "";

    position: absolute;

    left: -100%;

    top: 0;

    width: 100%;

    height: 100%;

    background: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, .45),
            transparent);

    transition: .6s;

}

.info-card:hover::before {

    left: 100%;

}

/*==================================================
            RESPONSIVE
==================================================*/

@media(max-width:992px) {

    .about-image .exp-badge {

        right: 10px;

        bottom: -30px;

        top: auto;

        transform: none;

        width: 140px;

        height: 140px;

    }

}

@media(max-width:576px) {

    .about-image .exp-badge {

        width: 120px;

        height: 120px;

    }

    .about-image .exp-badge h2 {

        font-size: 34px;

    }

    .about-image .exp-badge span {

        font-size: 13px;

    }

}

/*==================================================
                EDUCATION SECTION
==================================================*/

.education {

    position: relative;

    padding: 140px 0;

    overflow: hidden;

}

/*==================================================
            BACKGROUND
==================================================*/

.education::before {

    content: "";

    position: absolute;

    width: 650px;

    height: 650px;

    right: -220px;

    top: -180px;

    border-radius: 50%;

    background: radial-gradient(circle,
            rgba(216, 155, 19, .12),
            transparent 70%);

    filter: blur(50px);

}

.education::after {

    content: "";

    position: absolute;

    width: 450px;

    height: 450px;

    left: -180px;

    bottom: -180px;

    border-radius: 50%;

    background: rgba(216, 155, 19, .08);

    filter: blur(60px);

}

/*==================================================
            SECTION TITLE
==================================================*/

.education .section-heading {

    position: relative;

    z-index: 5;

}

/*==================================================
            GRID
==================================================*/

.education-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 35px;

    position: relative;

    z-index: 5;

}

/*==================================================
            CARD
==================================================*/

.education-card {

    position: relative;

    background: rgba(255, 255, 255, .72);

    backdrop-filter: blur(20px);

    border: 1px solid rgba(255, 255, 255, .8);

    border-radius: 30px;

    padding: 45px 35px;

    overflow: hidden;

    transition: .45s;

    box-shadow:

        0 20px 50px rgba(0, 0, 0, .08);

}

/*==================================================
            TOP LINE
==================================================*/

.education-card::before {

    content: "";

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 6px;

    background: linear-gradient(90deg,
            #efb82f,
            #cb8b08);

}

/*==================================================
            SHINE EFFECT
==================================================*/

.education-card::after {

    content: "";

    position: absolute;

    left: -120%;

    top: 0;

    width: 100%;

    height: 100%;

    background: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, .45),
            transparent);

    transition: .7s;

}

.education-card:hover::after {

    left: 120%;

}

/*==================================================
            ICON
==================================================*/

.education-card i {

    width: 80px;

    height: 80px;

    border-radius: 24px;

    display: flex;

    justify-content: center;

    align-items: center;

    font-size: 34px;

    color: #fff;

    margin-bottom: 28px;

    background: linear-gradient(135deg,
            #efb82f,
            #cb8b08);

    box-shadow:

        0 18px 40px rgba(216, 155, 19, .30);

}

/*==================================================
            TEXT
==================================================*/

.education-card h3 {

    font-size: 28px;

    color: #222;

    margin-bottom: 15px;

}

.education-card p {

    color: #666;

    line-height: 1.8;

    font-size: 16px;

}

/*==================================================
            HOVER
==================================================*/

.education-card:hover {

    transform: translateY(-14px);

    box-shadow:

        0 35px 70px rgba(216, 155, 19, .18);

}

.education-card:hover i {

    transform: rotate(-8deg) scale(1.08);

    transition: .4s;

}

/*==================================================
            DECORATIVE CIRCLE
==================================================*/

.education-card span {

    position: absolute;

    right: -35px;

    bottom: -35px;

    width: 130px;

    height: 130px;

    border-radius: 50%;

    background: rgba(216, 155, 19, .07);

}

/*==================================================
            RESPONSIVE
==================================================*/

@media(max-width:1100px) {

    .education-grid {

        grid-template-columns: repeat(2, 1fr);

    }

}

@media(max-width:768px) {

    .education-grid {

        grid-template-columns: 1fr;

    }

    .education-card {

        padding: 35px 28px;

    }

}

@media(max-width:576px) {

    .education-card h3 {

        font-size: 22px;

    }

    .education-card i {

        width: 65px;

        height: 65px;

        font-size: 28px;

    }

}

/*==================================================
            EXPERIENCE SECTION
==================================================*/

.experience {

    position: relative;

    padding: 140px 0;

    overflow: hidden;

}

/*==================================================
            BACKGROUND EFFECTS
==================================================*/

.experience::before {

    content: "";

    position: absolute;

    width: 600px;

    height: 600px;

    left: -220px;

    top: -180px;

    border-radius: 50%;

    background: radial-gradient(circle,
            rgba(216, 155, 19, .10),
            transparent 70%);

    filter: blur(60px);

}

.experience::after {

    content: "";

    position: absolute;

    width: 450px;

    height: 450px;

    right: -180px;

    bottom: -150px;

    border-radius: 50%;

    background: rgba(216, 155, 19, .08);

    filter: blur(55px);

}

/*==================================================
            GRID
==================================================*/

.experience-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 35px;

    position: relative;

    z-index: 5;

}

/*==================================================
            EXPERIENCE CARD
==================================================*/

.experience-card {

    position: relative;

    padding: 45px 35px;

    border-radius: 30px;

    overflow: hidden;

    background: rgba(255, 255, 255, .72);

    backdrop-filter: blur(20px);

    border: 1px solid rgba(255, 255, 255, .8);

    box-shadow:

        0 20px 50px rgba(0, 0, 0, .08);

    transition: .45s;

}

/*==================================================
            GOLD BORDER
==================================================*/

.experience-card::before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 6px;

    background: linear-gradient(90deg,
            #efb82f,
            #cb8b08);

}

/*==================================================
            SHINE EFFECT
==================================================*/

.experience-card::after {

    content: "";

    position: absolute;

    left: -120%;

    top: 0;

    width: 100%;

    height: 100%;

    background: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, .45),
            transparent);

    transition: .8s;

}

.experience-card:hover::after {

    left: 120%;

}

/*==================================================
            ICON
==================================================*/

.experience-card i {

    width: 82px;

    height: 82px;

    display: flex;

    justify-content: center;

    align-items: center;

    border-radius: 24px;

    font-size: 34px;

    color: #fff;

    margin-bottom: 28px;

    background: linear-gradient(135deg,
            #efb82f,
            #cb8b08);

    box-shadow:

        0 18px 40px rgba(216, 155, 19, .30);

}

/*==================================================
            TITLE
==================================================*/

.experience-card h3 {

    font-size: 28px;

    color: #222;

    margin-bottom: 12px;

}

/*==================================================
            BADGE
==================================================*/

.experience-card span {

    display: inline-block;

    padding: 8px 18px;

    border-radius: 30px;

    margin-bottom: 20px;

    font-size: 14px;

    font-weight: 600;

    color: var(--primary);

    background: rgba(216, 155, 19, .10);

}

/*==================================================
            PARAGRAPH
==================================================*/

.experience-card p {

    color: #666;

    font-size: 16px;

    line-height: 1.9;

}

/*==================================================
            HOVER
==================================================*/

.experience-card:hover {

    transform: translateY(-14px);

    box-shadow:

        0 35px 70px rgba(216, 155, 19, .18);

}

.experience-card:hover i {

    transform: rotate(-10deg) scale(1.08);

    transition: .4s;

}

/*==================================================
            DECORATIVE CIRCLE
==================================================*/

.experience-card .circle {

    position: absolute;

    width: 140px;

    height: 140px;

    right: -40px;

    bottom: -40px;

    border-radius: 50%;

    background: rgba(216, 155, 19, .06);

}

/*==================================================
            FADE ANIMATION
==================================================*/

.experience-card {

    animation: experienceUp .8s ease;

}

@keyframes experienceUp {

    from {

        opacity: 0;

        transform: translateY(60px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}

/*==================================================
            RESPONSIVE
==================================================*/

@media(max-width:1100px) {

    .experience-grid {

        grid-template-columns: repeat(2, 1fr);

    }

}

@media(max-width:768px) {

    .experience-grid {

        grid-template-columns: 1fr;

    }

}

@media(max-width:576px) {

    .experience-card {

        padding: 35px 28px;

    }

    .experience-card h3 {

        font-size: 22px;

    }

    .experience-card i {

        width: 65px;

        height: 65px;

        font-size: 28px;

    }

}


/*==================================================
                SKILLS SECTION
==================================================*/

.skills {

    position: relative;

    padding: 140px 0;

    overflow: hidden;

}

/*==================================================
            BACKGROUND EFFECT
==================================================*/

.skills::before {

    content: "";

    position: absolute;

    width: 650px;

    height: 650px;

    left: -220px;

    top: -180px;

    border-radius: 50%;

    background: radial-gradient(circle,
            rgba(216, 155, 19, .10),
            transparent 72%);

    filter: blur(70px);

}

.skills::after {

    content: "";

    position: absolute;

    width: 450px;

    height: 450px;

    right: -170px;

    bottom: -150px;

    border-radius: 50%;

    background: rgba(216, 155, 19, .08);

    filter: blur(60px);

}

/*==================================================
            GRID
==================================================*/

.skills-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 35px;

    position: relative;

    z-index: 5;

}

/*==================================================
            SKILL CARD
==================================================*/

.skill-card {

    position: relative;

    padding: 45px 35px;

    overflow: hidden;

    text-align: center;

    border-radius: 30px;

    background: rgba(255, 255, 255, .72);

    backdrop-filter: blur(20px);

    border: 1px solid rgba(255, 255, 255, .85);

    box-shadow:

        0 20px 50px rgba(0, 0, 0, .08);

    transition: .45s;

}

/*==================================================
            TOP BORDER
==================================================*/

.skill-card::before {

    content: "";

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 6px;

    background: linear-gradient(90deg,
            #efb82f,
            #cb8b08);

}

/*==================================================
            SHINE EFFECT
==================================================*/

.skill-card::after {

    content: "";

    position: absolute;

    left: -120%;

    top: 0;

    width: 100%;

    height: 100%;

    background: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, .45),
            transparent);

    transition: .7s;

}

.skill-card:hover::after {

    left: 120%;

}

/*==================================================
            ICON
==================================================*/

.skill-card i {

    width: 90px;

    height: 90px;

    margin: auto;

    display: flex;

    justify-content: center;

    align-items: center;

    border-radius: 24px;

    font-size: 42px;

    color: #fff;

    background: linear-gradient(135deg,
            #efb82f,
            #cb8b08);

    box-shadow:

        0 20px 45px rgba(216, 155, 19, .30);

    margin-bottom: 28px;

    transition: .45s;

}

/*==================================================
            TITLE
==================================================*/

.skill-card h3 {

    font-size: 28px;

    color: #222;

    margin-bottom: 15px;

}

/*==================================================
            SUBTITLE
==================================================*/

.skill-card span {

    display: block;

    font-size: 16px;

    color: #666;

    line-height: 1.8;

}

/*==================================================
            HOVER
==================================================*/

.skill-card:hover {

    transform: translateY(-15px);

    box-shadow:

        0 35px 70px rgba(216, 155, 19, .18);

}

.skill-card:hover i {

    transform: rotate(-8deg) scale(1.12);

}

/*==================================================
        DECORATIVE CIRCLE
==================================================*/

.skill-card .circle {

    position: absolute;

    width: 140px;

    height: 140px;

    right: -40px;

    bottom: -40px;

    border-radius: 50%;

    background: rgba(216, 155, 19, .07);

}

/*==================================================
            ANIMATION
==================================================*/

.skill-card {

    animation: skillUp .8s ease;

}

@keyframes skillUp {

    from {

        opacity: 0;

        transform: translateY(60px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}

/*==================================================
            RESPONSIVE
==================================================*/

@media(max-width:1100px) {

    .skills-grid {

        grid-template-columns: repeat(2, 1fr);

    }

}

@media(max-width:768px) {

    .skills-grid {

        grid-template-columns: 1fr;

    }

}

@media(max-width:576px) {

    .skill-card {

        padding: 35px 28px;

    }

    .skill-card h3 {

        font-size: 22px;

    }

    .skill-card i {

        width: 70px;

        height: 70px;

        font-size: 34px;

    }

}

/*==================================================
                TOOLS SECTION
==================================================*/

.tools {

    position: relative;

    padding: 140px 0;

    overflow: hidden;

}

/*==================================================
            BACKGROUND EFFECT
==================================================*/

.tools::before {

    content: "";

    position: absolute;

    width: 620px;

    height: 620px;

    right: -200px;

    top: -150px;

    border-radius: 50%;

    background: radial-gradient(circle,
            rgba(216, 155, 19, .10),
            transparent 72%);

    filter: blur(70px);

}

.tools::after {

    content: "";

    position: absolute;

    width: 420px;

    height: 420px;

    left: -150px;

    bottom: -140px;

    border-radius: 50%;

    background: rgba(216, 155, 19, .08);

    filter: blur(60px);

}

/*==================================================
            TOOLS GRID
==================================================*/

.tools-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 35px;

    position: relative;

    z-index: 5;

}

/*==================================================
            TOOL CARD
==================================================*/

.tool-card {

    position: relative;

    text-align: center;

    overflow: hidden;

    padding: 45px 30px;

    border-radius: 30px;

    background: rgba(255, 255, 255, .72);

    backdrop-filter: blur(20px);

    border: 1px solid rgba(255, 255, 255, .85);

    box-shadow:

        0 20px 50px rgba(0, 0, 0, .08);

    transition: .45s;

}

/*==================================================
            TOP LINE
==================================================*/

.tool-card::before {

    content: "";

    position: absolute;

    left: 0;

    top: 0;

    width: 100%;

    height: 6px;

    background: linear-gradient(90deg,
            #efb82f,
            #cb8b08);

}

/*==================================================
            SHINE EFFECT
==================================================*/

.tool-card::after {

    content: "";

    position: absolute;

    left: -120%;

    top: 0;

    width: 100%;

    height: 100%;

    background: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, .45),
            transparent);

    transition: .8s;

}

.tool-card:hover::after {

    left: 120%;

}

/*==================================================
            ICON
==================================================*/

.tool-card i {

    width: 90px;

    height: 90px;

    margin: auto;

    display: flex;

    justify-content: center;

    align-items: center;

    border-radius: 22px;

    font-size: 40px;

    color: #fff;

    background: linear-gradient(135deg,
            #efb82f,
            #cb8b08);

    box-shadow:

        0 18px 45px rgba(216, 155, 19, .28);

    margin-bottom: 28px;

    transition: .4s;

}

/*==================================================
            TITLE
==================================================*/

.tool-card h3 {

    font-size: 26px;

    color: #222;

    font-weight: 700;

}

/*==================================================
            HOVER
==================================================*/

.tool-card:hover {

    transform: translateY(-15px);

    box-shadow:

        0 35px 70px rgba(216, 155, 19, .18);

}

.tool-card:hover i {

    transform: scale(1.12) rotate(-10deg);

}

/*==================================================
            DECORATIVE CIRCLE
==================================================*/

.tool-card .circle {

    position: absolute;

    width: 130px;

    height: 130px;

    right: -35px;

    bottom: -35px;

    border-radius: 50%;

    background: rgba(216, 155, 19, .07);

}

/*==================================================
            FADE ANIMATION
==================================================*/

.tool-card {

    animation: toolFade .8s ease;

}

@keyframes toolFade {

    from {

        opacity: 0;

        transform: translateY(50px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}

/*==================================================
            RESPONSIVE
==================================================*/

@media(max-width:1100px) {

    .tools-grid {

        grid-template-columns: repeat(2, 1fr);

    }

}

@media(max-width:768px) {

    .tools-grid {

        grid-template-columns: 1fr;

    }

}

@media(max-width:576px) {

    .tool-card {

        padding: 35px 25px;

    }

    .tool-card i {

        width: 72px;

        height: 72px;

        font-size: 32px;

    }

    .tool-card h3 {

        font-size: 22px;

    }

}


/*==================================================
        SKILLS & TOOLS FINAL POLISH
==================================================*/

/* Smooth Transition */

.skill-card,
.tool-card,
.skill-card i,
.tool-card i,
.skill-card .circle,
.tool-card .circle {

    transition: all .45s ease;

}

/*==================================================
        GLASS BORDER GLOW
==================================================*/

.skill-card:hover,
.tool-card:hover {

    border-color: rgba(216, 155, 19, .35);

    background: rgba(255, 255, 255, .82);

}

/*==================================================
        ICON SHADOW
==================================================*/

.skill-card:hover i,
.tool-card:hover i {

    box-shadow:

        0 25px 55px rgba(216, 155, 19, .45);

}

/*==================================================
        CIRCLE ANIMATION
==================================================*/

.skill-card:hover .circle,
.tool-card:hover .circle {

    transform: scale(1.35);

    opacity: .15;

}

/*==================================================
        TITLE ANIMATION
==================================================*/

.skill-card h3,
.tool-card h3 {

    transition: .35s;

}

.skill-card:hover h3,
.tool-card:hover h3 {

    color: var(--primary);

}

/*==================================================
        TEXT COLOR
==================================================*/

.skill-card span {

    transition: .35s;

}

.skill-card:hover span {

    color: #444;

}

/*==================================================
        FLOATING EFFECT
==================================================*/

.skill-card:nth-child(2),
.skill-card:nth-child(5) {

    margin-top: 25px;

}

.tool-card:nth-child(2),
.tool-card:nth-child(5) {

    margin-top: 25px;

}

/*==================================================
        CARD ENTRY ANIMATION
==================================================*/

.skill-card:nth-child(1),
.tool-card:nth-child(1) {

    animation-delay: .1s;

}

.skill-card:nth-child(2),
.tool-card:nth-child(2) {

    animation-delay: .2s;

}

.skill-card:nth-child(3),
.tool-card:nth-child(3) {

    animation-delay: .3s;

}

.skill-card:nth-child(4),
.tool-card:nth-child(4) {

    animation-delay: .4s;

}

.skill-card:nth-child(5),
.tool-card:nth-child(5) {

    animation-delay: .5s;

}

.skill-card:nth-child(6),
.tool-card:nth-child(6) {

    animation-delay: .6s;

}

/*==================================================
        SECTION DIVIDER
==================================================*/

.skills::after,
.tools::after {

    pointer-events: none;

}

/*==================================================
        RESPONSIVE
==================================================*/

@media(max-width:992px) {

    .skill-card:nth-child(2),
    .skill-card:nth-child(5),

    .tool-card:nth-child(2),
    .tool-card:nth-child(5) {

        margin-top: 0;

    }

}

@media(max-width:576px) {

    .skill-card,
    .tool-card {

        border-radius: 22px;

    }

    .skill-card i,
    .tool-card i {

        border-radius: 18px;

    }

}

/*==================================================
                PROJECTS SECTION
==================================================*/

.projects {

    position: relative;

    padding: 140px 0;

    overflow: hidden;

}

/*==================================================
            BACKGROUND EFFECT
==================================================*/

.projects::before {

    content: "";

    position: absolute;

    width: 650px;

    height: 650px;

    left: -220px;

    top: -180px;

    border-radius: 50%;

    background: radial-gradient(circle,
            rgba(216, 155, 19, .10),
            transparent 72%);

    filter: blur(70px);

}

.projects::after {

    content: "";

    position: absolute;

    width: 420px;

    height: 420px;

    right: -150px;

    bottom: -150px;

    border-radius: 50%;

    background: rgba(216, 155, 19, .08);

    filter: blur(60px);

}

/*==================================================
                PROJECT GRID
==================================================*/

.projects-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 35px;

    position: relative;

    z-index: 5;

}

/*==================================================
                PROJECT CARD
==================================================*/

.project-card {

    position: relative;

    overflow: hidden;

    border-radius: 30px;

    background: rgba(255, 255, 255, .75);

    backdrop-filter: blur(20px);

    border: 1px solid rgba(255, 255, 255, .85);

    box-shadow:

        0 20px 55px rgba(0, 0, 0, .08);

    transition: .45s;

}

/*==================================================
                TOP BORDER
==================================================*/

.project-card::before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 6px;

    background: linear-gradient(90deg,
            #efb82f,
            #cb8b08);

    z-index: 10;

}

/*==================================================
                IMAGE
==================================================*/

.project-image {

    height: 240px;

    overflow: hidden;

    position: relative;

}

.project-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transition: .6s;

}

.project-card:hover .project-image img {

    transform: scale(1.12);

}

/*==================================================
                IMAGE OVERLAY
==================================================*/

.project-image::after {

    content: "";

    position: absolute;

    inset: 0;

    background: linear-gradient(to top,
            rgba(0, 0, 0, .45),
            transparent);

}

/*==================================================
                CONTENT
==================================================*/

.project-content {

    padding: 30px;

}

.project-content h3 {

    font-size: 26px;

    color: #222;

    margin-bottom: 14px;

}

.project-content p {

    color: #666;

    line-height: 1.9;

    margin-bottom: 24px;

}

/*==================================================
                TAGS
==================================================*/

.project-tags {

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

    margin-bottom: 25px;

}

.project-tags span {

    padding: 8px 18px;

    border-radius: 30px;

    background: rgba(216, 155, 19, .10);

    color: var(--primary);

    font-size: 14px;

    font-weight: 600;

}

/*==================================================
                BUTTONS
==================================================*/

.project-buttons {

    display: flex;

    gap: 15px;

}

.project-buttons a {

    flex: 1;

    text-align: center;

    padding: 13px;

    border-radius: 12px;

    text-decoration: none;

    font-weight: 600;

    transition: .35s;

}

.project-buttons .demo {

    background: linear-gradient(135deg,
            #efb82f,
            #cb8b08);

    color: #fff;

}

.project-buttons .code {

    border: 2px solid #efb82f;

    color: #cb8b08;

}

.project-buttons a:hover {

    transform: translateY(-4px);

}

/*==================================================
                CARD HOVER
==================================================*/

.project-card:hover {

    transform: translateY(-15px);

    box-shadow:

        0 35px 75px rgba(216, 155, 19, .18);

}

/*==================================================
                DECORATIVE CIRCLE
==================================================*/

.project-card .circle {

    position: absolute;

    width: 150px;

    height: 150px;

    right: -45px;

    bottom: -45px;

    border-radius: 50%;

    background: rgba(216, 155, 19, .06);

}

/*==================================================
                RESPONSIVE
==================================================*/

@media(max-width:1100px) {

    .projects-grid {

        grid-template-columns: repeat(2, 1fr);

    }

}

@media(max-width:768px) {

    .projects-grid {

        grid-template-columns: 1fr;

    }

}

@media(max-width:576px) {

    .project-content {

        padding: 24px;

    }

    .project-content h3 {

        font-size: 22px;

    }

    .project-buttons {

        flex-direction: column;

    }

}


/*==================================================
                SERVICES SECTION
==================================================*/

.services {

    position: relative;

    padding: 140px 0;

    overflow: hidden;

}

/*==================================================
            BACKGROUND EFFECT
==================================================*/

.services::before {

    content: "";

    position: absolute;

    width: 620px;

    height: 620px;

    left: -180px;

    top: -180px;

    border-radius: 50%;

    background: radial-gradient(circle,
            rgba(216, 155, 19, .10),
            transparent 72%);

    filter: blur(70px);

}

.services::after {

    content: "";

    position: absolute;

    width: 420px;

    height: 420px;

    right: -150px;

    bottom: -120px;

    border-radius: 50%;

    background: rgba(216, 155, 19, .08);

    filter: blur(60px);

}

/*==================================================
                GRID
==================================================*/

.services-grid {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 35px;

    position: relative;

    z-index: 5;

}

/*==================================================
                CARD
==================================================*/

.service-card {

    position: relative;

    padding: 45px 35px;

    border-radius: 30px;

    overflow: hidden;

    text-align: center;

    background: rgba(255, 255, 255, .75);

    backdrop-filter: blur(20px);

    border: 1px solid rgba(255, 255, 255, .8);

    box-shadow:

        0 20px 55px rgba(0, 0, 0, .08);

    transition: .45s;

}

/*==================================================
                TOP BORDER
==================================================*/

.service-card::before {

    content: "";

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 6px;

    background: linear-gradient(90deg,
            #efb82f,
            #cb8b08);

}

/*==================================================
                SHINE EFFECT
==================================================*/

.service-card::after {

    content: "";

    position: absolute;

    top: 0;

    left: -120%;

    width: 100%;

    height: 100%;

    background: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, .45),
            transparent);

    transition: .8s;

}

.service-card:hover::after {

    left: 120%;

}

/*==================================================
                ICON
==================================================*/

.service-card i {

    width: 90px;

    height: 90px;

    display: flex;

    justify-content: center;

    align-items: center;

    margin: auto;

    margin-bottom: 28px;

    border-radius: 24px;

    font-size: 38px;

    color: #fff;

    background: linear-gradient(135deg,
            #efb82f,
            #cb8b08);

    box-shadow:

        0 20px 45px rgba(216, 155, 19, .30);

    transition: .4s;

}

/*==================================================
                TEXT
==================================================*/

.service-card h3 {

    font-size: 26px;

    color: #222;

    margin-bottom: 16px;

}

.service-card p {

    color: #666;

    line-height: 1.9;

}

/*==================================================
                HOVER
==================================================*/

.service-card:hover {

    transform: translateY(-15px);

    box-shadow:

        0 35px 75px rgba(216, 155, 19, .18);

}

.service-card:hover i {

    transform: rotate(-8deg) scale(1.12);

}

/*==================================================
            DECORATIVE CIRCLE
==================================================*/

.service-card .circle {

    position: absolute;

    width: 140px;

    height: 140px;

    right: -40px;

    bottom: -40px;

    border-radius: 50%;

    background: rgba(216, 155, 19, .06);

}

/*==================================================
                ANIMATION
==================================================*/

.service-card {

    animation: serviceFade .8s ease;

}

@keyframes serviceFade {

    from {

        opacity: 0;

        transform: translateY(60px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}

/*==================================================
                RESPONSIVE
==================================================*/

@media(max-width:1100px) {

    .services-grid {

        grid-template-columns: repeat(2, 1fr);

    }

}

@media(max-width:768px) {

    .services-grid {

        grid-template-columns: 1fr;

    }

}

@media(max-width:576px) {

    .service-card {

        padding: 35px 25px;

    }

    .service-card h3 {

        font-size: 22px;

    }

    .service-card i {

        width: 72px;

        height: 72px;

        font-size: 30px;

    }

}


/*==================================================
                JOURNEY SECTION
==================================================*/

.journey {

    position: relative;

    padding: 140px 0;

    overflow: hidden;

}

/*==================================================
            BACKGROUND EFFECT
==================================================*/

.journey::before {

    content: "";

    position: absolute;

    width: 600px;

    height: 600px;

    left: -200px;

    top: -180px;

    border-radius: 50%;

    background: radial-gradient(circle,
            rgba(216, 155, 19, .10),
            transparent 72%);

    filter: blur(70px);

}

.journey::after {

    content: "";

    position: absolute;

    width: 420px;

    height: 420px;

    right: -180px;

    bottom: -150px;

    border-radius: 50%;

    background: rgba(216, 155, 19, .08);

    filter: blur(60px);

}

/*==================================================
            TIMELINE
==================================================*/

.timeline {

    position: relative;

    max-width: 1100px;

    margin: auto;

}

.timeline::before {

    content: "";

    position: absolute;

    left: 50%;

    top: 0;

    transform: translateX(-50%);

    width: 4px;

    height: 100%;

    border-radius: 50px;

    background: linear-gradient(#efb82f,
            #cb8b08);

}

/*==================================================
            TIMELINE ITEM
==================================================*/

.timeline-item {

    position: relative;

    width: 50%;

    padding: 20px 50px;

}

.timeline-item:nth-child(odd) {

    left: 0;

}

.timeline-item:nth-child(even) {

    left: 50%;

}

/*==================================================
            CARD
==================================================*/

.timeline-content {

    position: relative;

    padding: 35px;

    border-radius: 28px;

    background: rgba(255, 255, 255, .75);

    backdrop-filter: blur(20px);

    border: 1px solid rgba(255, 255, 255, .85);

    box-shadow:

        0 20px 55px rgba(0, 0, 0, .08);

    transition: .45s;

}

.timeline-content:hover {

    transform: translateY(-10px);

    box-shadow:

        0 35px 75px rgba(216, 155, 19, .18);

}

/*==================================================
            DOT
==================================================*/

.timeline-dot {

    position: absolute;

    top: 45px;

    width: 24px;

    height: 24px;

    border-radius: 50%;

    background: #efb82f;

    border: 5px solid #fff;

    box-shadow:

        0 0 0 8px rgba(216, 155, 19, .15);

    z-index: 10;

}

.timeline-item:nth-child(odd) .timeline-dot {

    right: -13px;

}

.timeline-item:nth-child(even) .timeline-dot {

    left: -13px;

}

/*==================================================
            YEAR
==================================================*/

.timeline-year {

    display: inline-block;

    padding: 8px 18px;

    margin-bottom: 18px;

    border-radius: 30px;

    font-size: 14px;

    font-weight: 600;

    color: var(--primary);

    background: rgba(216, 155, 19, .10);

}

/*==================================================
            TITLE
==================================================*/

.timeline-content h3 {

    font-size: 24px;

    color: #222;

    margin-bottom: 12px;

}

/*==================================================
            TEXT
==================================================*/

.timeline-content p {

    color: #666;

    line-height: 1.9;

}

/*==================================================
            SHINE EFFECT
==================================================*/

.timeline-content::after {

    content: "";

    position: absolute;

    left: -120%;

    top: 0;

    width: 100%;

    height: 100%;

    background: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, .45),
            transparent);

    transition: .8s;

}

.timeline-content:hover::after {

    left: 120%;

}

/*==================================================
            DECORATIVE CIRCLE
==================================================*/

.timeline-content .circle {

    position: absolute;

    width: 120px;

    height: 120px;

    right: -35px;

    bottom: -35px;

    border-radius: 50%;

    background: rgba(216, 155, 19, .06);

}

/*==================================================
            ANIMATION
==================================================*/

.timeline-item {

    animation: timelineFade .8s ease;

}

@keyframes timelineFade {

    from {

        opacity: 0;

        transform: translateY(60px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}

/*==================================================
            RESPONSIVE
==================================================*/

@media(max-width:900px) {

    .timeline::before {

        left: 25px;

    }

    .timeline-item {

        width: 100%;

        left: 0 !important;

        padding-left: 70px;

        padding-right: 10px;

    }

    .timeline-dot {

        left: 13px !important;

    }

}

@media(max-width:576px) {

    .timeline-content {

        padding: 28px;

    }

    .timeline-content h3 {

        font-size: 21px;

    }

}


/*==================================================
                CONTACT SECTION
==================================================*/

.contact {

    position: relative;

    padding: 140px 0;

    overflow: hidden;

}

.contact::before {

    content: "";

    position: absolute;

    width: 600px;

    height: 600px;

    left: -220px;

    top: -180px;

    border-radius: 50%;

    background: radial-gradient(circle,
            rgba(216, 155, 19, .10),
            transparent 72%);

    filter: blur(70px);

}

.contact::after {

    content: "";

    position: absolute;

    width: 420px;

    height: 420px;

    right: -180px;

    bottom: -150px;

    border-radius: 50%;

    background: rgba(216, 155, 19, .08);

    filter: blur(60px);

}

/*================ GRID ================*/

.contact-wrapper {

    display: grid;

    grid-template-columns: 1fr 1.3fr;

    gap: 50px;

    position: relative;

    z-index: 5;

}

/*================ INFO ================*/

.contact-info {

    display: flex;

    flex-direction: column;

    gap: 25px;

}

.contact-card {

    display: flex;

    align-items: center;

    gap: 20px;

    padding: 28px;

    border-radius: 25px;

    background: rgba(255, 255, 255, .75);

    backdrop-filter: blur(20px);

    border: 1px solid rgba(255, 255, 255, .85);

    box-shadow: 0 20px 50px rgba(0, 0, 0, .08);

    transition: .4s;

}

.contact-card:hover {

    transform: translateY(-8px);

    box-shadow: 0 30px 70px rgba(216, 155, 19, .18);

}

.contact-card i {

    width: 70px;

    height: 70px;

    display: flex;

    justify-content: center;

    align-items: center;

    border-radius: 20px;

    font-size: 28px;

    color: #fff;

    background: linear-gradient(135deg, #efb82f, #cb8b08);

}

.contact-card h3 {

    font-size: 22px;

    margin-bottom: 8px;

}

.contact-card p {

    color: #666;

}

/*================ FORM ================*/

.contact-form {

    padding: 40px;

    border-radius: 30px;

    background: rgba(255, 255, 255, .75);

    backdrop-filter: blur(20px);

    border: 1px solid rgba(255, 255, 255, .85);

    box-shadow: 0 20px 55px rgba(0, 0, 0, .08);

}

.contact-form form {

    display: flex;

    flex-direction: column;

    gap: 20px;

}

.contact-form input,

.contact-form textarea {

    width: 100%;

    padding: 18px 20px;

    border: none;

    outline: none;

    border-radius: 15px;

    background: #f7f7f7;

    font-size: 16px;

}

.contact-form textarea {

    min-height: 180px;

    resize: none;

}

.contact-form button {

    padding: 18px;

    border: none;

    border-radius: 15px;

    cursor: pointer;

    font-size: 17px;

    font-weight: 600;

    color: #fff;

    background: linear-gradient(135deg, #efb82f, #cb8b08);

    transition: .35s;

}

.contact-form button:hover {

    transform: translateY(-4px);

}

@media(max-width:900px) {

    .contact-wrapper {

        grid-template-columns: 1fr;

    }

}


/*==================================================
                FOOTER
==================================================*/

.footer {

    position: relative;

    padding: 80px 0 30px;

    background: linear-gradient(135deg,
            #ffffff,
            #faf7ef);

    overflow: hidden;

}

.footer::before {

    content: "";

    position: absolute;

    width: 420px;

    height: 420px;

    left: -150px;

    top: -150px;

    border-radius: 50%;

    background: rgba(216, 155, 19, .08);

    filter: blur(70px);

}

.footer::after {

    content: "";

    position: absolute;

    width: 350px;

    height: 350px;

    right: -120px;

    bottom: -120px;

    border-radius: 50%;

    background: rgba(216, 155, 19, .07);

    filter: blur(60px);

}

/*====================*/

.footer-container {

    position: relative;

    z-index: 5;

    display: grid;

    grid-template-columns: 2fr 1fr 1fr;

    gap: 50px;

}

/*====================*/

.footer-logo h2 {

    font-size: 34px;

    margin-bottom: 15px;

    color: #222;

}

.footer-logo span {

    color: #cb8b08;

}

.footer-logo p {

    color: #666;

    line-height: 1.9;

}

/*====================*/

.footer-links h3,

.footer-social h3 {

    font-size: 24px;

    margin-bottom: 20px;

}

.footer-links ul {

    list-style: none;

}

.footer-links ul li {

    margin-bottom: 15px;

}

.footer-links ul li a {

    text-decoration: none;

    color: #666;

    transition: .3s;

}

.footer-links ul li a:hover {

    color: #cb8b08;

    padding-left: 8px;

}

/*====================*/

.social-icons {

    display: flex;

    gap: 15px;

    flex-wrap: wrap;

}

.social-icons a {

    width: 52px;

    height: 52px;

    display: flex;

    justify-content: center;

    align-items: center;

    border-radius: 15px;

    text-decoration: none;

    color: #fff;

    font-size: 20px;

    background: linear-gradient(135deg,
            #efb82f,
            #cb8b08);

    transition: .35s;

    box-shadow:
        0 12px 25px rgba(216, 155, 19, .28);

}

.social-icons a:hover {

    transform: translateY(-8px) rotate(-8deg);

}

/*====================*/

.footer-bottom {

    margin-top: 60px;

    padding-top: 25px;

    border-top: 1px solid rgba(0, 0, 0, .08);

    text-align: center;

    color: #666;

}

/*======================
        TOP BUTTON
=======================*/

.top-btn {

    position: fixed;

    right: 30px;

    bottom: 30px;

    width: 55px;

    height: 55px;

    display: flex;

    justify-content: center;

    align-items: center;

    border-radius: 18px;

    text-decoration: none;

    color: #fff;

    font-size: 22px;

    background: linear-gradient(135deg,
            #efb82f,
            #cb8b08);

    box-shadow:
        0 15px 35px rgba(216, 155, 19, .30);

    transition: .35s;

    z-index: 999;

    opacity: 0;

    visibility: hidden;

    transform: translateY(30px);

    transition: .35s;


}

.top-btn:hover {

    transform: translateY(-8px);

}

/*======================
      RESPONSIVE
=======================*/

@media(max-width:900px) {

    .footer-container {

        grid-template-columns: 1fr;

        text-align: center;

    }

    .social-icons {

        justify-content: center;

    }

}


/*=========================================
      PART 5 : SCROLL REVEAL
=========================================*/

.hero-content,
.hero-image,
.section-heading,
.about-image,
.about-content,
.education-card,
.experience-card,
.skill-card,
.tool-card,
.why-card,
.achievement-card,
.project-card,
.service-card,
.timeline-item,
.contact-info,
.contact-form{

    opacity:0;

    transform:translateY(70px);

    transition:all .8s ease;

}

.show{

    opacity:1;

    transform:translateY(0);

}

/*=========================================
      PART 7 : TYPING TEXT
=========================================*/

.typing{

    color: var(--primary);

    font-weight: 700;

    position: relative;

}

.typing::after{

    content: "|";

    animation: blink .7s infinite;

    margin-left: 3px;

}

@keyframes blink{

    50%{

        opacity: 0;

    }

}


/*=========================================
      PART 8 : THEME TOGGLE
=========================================*/

.theme-btn{

    width:50px;

    height:50px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#f3f3f3;

    cursor:pointer;

    font-size:20px;

    transition:.3s;

}

.theme-btn:hover{

    transform:rotate(180deg);

    background:var(--primary);

    color:#fff;

}

/* Dark Theme */

body.dark{

    background:#0f172a;

    color:#ffffff;

}

body.dark .header{

    background:#111827;

}

body.dark .navbar{

    background:#111827;

}

body.dark .card,

body.dark .education-card,

body.dark .experience-card,

body.dark .project-card,

body.dark .service-card,

body.dark .achievement-card,

body.dark .skill-card,

body.dark .tool-card{

    background:#1e293b;

    color:#fff;

}


/* Dark Theme Text */

body.dark h1,
body.dark h2,
body.dark h3,
body.dark h4,
body.dark h5,
body.dark h6{

    color:#ffffff;

}

body.dark p{

    color:#cbd5e1;

}

body.dark span{

    color:inherit;

}

body.dark .nav-list a{

    color:#ffffff;

}

body.dark .service-card p,
body.dark .experience-card p,
body.dark .education-card p,
body.dark .project-card p,
body.dark .achievement-card p,
body.dark .skill-card p,
body.dark .tool-card p{

    color:#cbd5e1;

}

body.dark .hero-status{

    color:#ffffff;

}


/*==================================================
                PREMIUM DARK MODE
==================================================*/

body.dark{

    background:#0f172a;
    color:#e5e7eb;

}

body.dark::before{

    background:
        radial-gradient(circle at 10% 10%, rgba(216,155,19,.12), transparent 30%),
        radial-gradient(circle at 90% 20%, rgba(255,255,255,.03), transparent 30%),
        linear-gradient(135deg,#0f172a,#111827,#0b1220);

}

body.dark .header .container,
body.dark .glass,
body.dark .navbar,
body.dark .hero-status,
body.dark .stat-box,
body.dark .info-card,
body.dark .education-card,
body.dark .experience-card,
body.dark .skill-card,
body.dark .tool-card,
body.dark .service-card,
body.dark .project-card,
body.dark .achievement-card,
body.dark .contact-card,
body.dark .contact-form,
body.dark .footer{

    background:#1e293b;
    border-color:#334155;

}

body.dark h1,
body.dark h2,
body.dark h3,
body.dark h4,
body.dark h5,
body.dark h6{

    color:#ffffff;

}

body.dark p,
body.dark li,
body.dark span,
body.dark label{

    color:#cbd5e1;

}

body.dark .hero-content h1,
body.dark .hero-content h3,
body.dark .about-content h2,
body.dark .education-card h3,
body.dark .experience-card h3,
body.dark .service-card h3,
body.dark .project-card h3,
body.dark .skill-card h3,
body.dark .tool-card h3{

    color:#ffffff;

}

body.dark .hero-content p,
body.dark .about-content p,
body.dark .education-card p,
body.dark .experience-card p,
body.dark .service-card p,
body.dark .project-card p,
body.dark .skill-card p,
body.dark .tool-card p{

    color:#cbd5e1;

}

body.dark .nav-list a{

    color:#ffffff;

}

body.dark .nav-list a:hover,
body.dark .nav-list a.active{

    color:var(--primary);

}

body.dark .logo h2{

    color:#ffffff;

}

body.dark .secondary-btn{

    background:#1e293b;
    color:#ffffff;
    border-color:var(--primary);

}

body.dark .social-icons a{

    background:#1e293b;
    color:#ffffff;

}

body.dark input,
body.dark textarea,
body.dark select{

    background:#1e293b;
    color:#ffffff;
    border:1px solid #334155;

}

body.dark input::placeholder,
body.dark textarea::placeholder{

    color:#94a3b8;

}

body.dark .theme-btn{

    background:#334155;
    color:#ffffff;

}