/* ==========================================
        SKILLS PAGE — MOBILE VIEW
        0px - 767px
========================================== */

@media (max-width: 767px) {
           body {
        font-family: 'Poppins', sans-serif;
    }


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

    header{
        width:100%;
        position:fixed;
        top:0;
        left:0;
        z-index:1000;
    }


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

    .navbar{
        width:100%;
        height:70px;

        display:flex;
        justify-content:space-between;
        align-items:center;

        padding: 0 18px;

        background:#0d2448;
    }


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

    .logo h2{
        color:#fff;
        font-size:1.2rem;
        font-weight:700;
    }

    .logo span{
        color:#63b2ff;
    }


    /* ================= DESKTOP NAVIGATION ================= */

    .nav-links{
        display:none;
    }


    /* ================= HAMBURGER ================= */

    .hamburger{
        display:block;

        border:none;
        background:none;

        color:#fff;

        font-size:1.8rem;

        cursor:pointer;

         margin-right: 30px;
    }


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

    .mobile-menu{
        position:fixed;

        top:0;
        right:-100%;

        width:75%;
        height:100vh;

        background:#12386b;

        display:flex;
        flex-direction:column;

        padding:30px;

        transition:right .4s ease;

        z-index:1001;
    }


    /* ================= OPEN MENU ================= */

    .mobile-menu.active{
        right:0;
    }


    /* ================= CLOSE BUTTON ================= */

    .close-menu{
        align-self:flex-end;

        border:none;
        background:none;

        color:#fff;

        font-size:2rem;

        cursor:pointer;

        margin-bottom:40px;
    }


    /* ================= MENU LINKS ================= */

    .mobile-menu a{
        text-decoration:none;

        color:#fff;

        font-size:1.2rem;

        margin:15px 0;

        transition:.3s;
    }

    .mobile-menu a:hover{
        color:#63b2ff;
        padding-left:10px;
    }


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

.skills-section {

    width: 100%;

    min-height: 100vh;

    padding: 135px 5% 60px;

    box-sizing: border-box;

    background:
        linear-gradient(
            135deg,
            #063b83 0%,
            #052f70 45%,
            #001f4f 100%
        );

    color: #ffffff;

    position: relative;

    overflow: hidden;
}


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

.skills-section::before {

    content: "";

    position: absolute;

    width: 90px;

    height: 150px;

    top: 150px;

    left: 30px;

    background-image: radial-gradient(
        circle,
        #1684ff 3px,
        transparent 4px
    );

    background-size: 26px 26px;

    opacity: 0.8;
}


.skills-section::after {

    content: "";

    position: absolute;

    width: 90px;

    height: 150px;

    top: 200px;

    right: 25px;

    background-image: radial-gradient(
        circle,
        #1684ff 3px,
        transparent 4px
    );

    background-size: 26px 26px;

    opacity: 0.6;
}


/* ==========================================
        SKILLS INTRO
========================================== */

.skills-intro {

    width: 100%;

    max-width: 650px;

    margin: 0 auto 60px;

    text-align: center;

    position: relative;

    z-index: 2;
}


/* ==========================================
        SKILLS LABEL
========================================== */

.skills-label {

    display: inline-block;

    padding: 10px 22px;

    margin-bottom: 25px;

    background: #e9297b;

    border-radius: 30px;

    color: #ffffff;

    font-size: 1rem;

    font-weight: 600;

    letter-spacing: 1px;
}


/* ==========================================
        MAIN HEADING
========================================== */

.skills-intro h1 {

    margin: 0 0 22px;

    color: #ffffff;

    font-size: 3rem;

    font-weight: 700;

    line-height: 1.2;
}


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

.skills-intro p {

    width: 100%;

    max-width: 600px;

    margin: 0 auto;

    color: #ffffff;

    font-size: 1.05rem;

    line-height: 1.8;
}


/* ==========================================
        SKILLS CONTAINER
========================================== */

.skills-container {

    width: 100%;

    max-width: 740px;

    margin: 0 auto;

    display: flex;

    flex-direction: column;

    gap: 25px;

    position: relative;

    z-index: 2;
}


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

.skill-card {
    width: 100%;
    min-height: auto;
    padding: 25px 20px;
    box-sizing: border-box;

    display: flex;
    align-items: center;

    gap: 20px;

    background: rgba(28, 76, 140, 0.42);
    border: 1px solid rgba(98, 170, 255, 0.15);
    border-radius: 18px;

    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.12);
    backdrop-filter: blur(5px);

    overflow: hidden;
}


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

.skill-icon {
    width: 90px;
    height: 90px;
    min-width: 90px;
    flex-shrink: 0;

    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;
}


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

.skill-icon i {
    color: #ffffff;
    font-size: 2.3rem;
}


/* ==========================================
        WEB DEVELOPMENT ICON
========================================== */

.web-icon {

    background: #075fe0;
}


/* ==========================================
        GRAPHICS DESIGN ICON
========================================== */

.graphics-icon {

    background: #e9297b;
}


/* ==========================================
        RESPONSIVE DESIGN ICON
========================================== */

.responsive-icon {

    background: #55b82b;
}


/* ==========================================
        MOBILE APP ICON
========================================== */

.mobile-icon {

    background: #ff8c0a;
}


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

.skill-content {
    flex: 1;
    min-width: 0;
    text-align: left;
}


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

.skill-content h2 {
    margin: 0 0 10px;

    color: #ffffff;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.35;

    overflow-wrap: break-word;
}


/* ==========================================
        SKILL DESCRIPTION
========================================== */

.skill-content p {
    margin: 0;

    color: #ffffff;
    font-size: 0.85rem;
    line-height: 1.6;

    overflow-wrap: break-word;
}
}


/* ==========================================
   SMALL PHONES
   0px - 400px
========================================== */

@media (max-width: 400px) {

    .navbar {
        height: 80px;
    }

    .logo h2 {
        font-size: 1rem;
    }

    .hamburger {
        font-size: 1.7rem;
        
    }

    .skills-section {
        padding: 120px 5% 45px;
    }

    .skills-intro {
        margin-bottom: 45px;
    }

    .skills-label {
        font-size: 0.85rem;
        padding: 8px 18px;
    }

    .skills-intro h1 {
        font-size: 2.4rem;
    }

    .skills-intro p {
        font-size: 0.95rem;
        line-height: 1.7;
    }

    .skills-container {
        gap: 18px;
    }
}


/* ==========================================
        SKILLS PAGE — TABLET VIEW
        768px - 1024px
========================================== */

@media (min-width: 768px) and (max-width: 1024px) {
             body {
    font-family: 'Poppins', sans-serif;
    overflow-x: auto;
}


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

    header{
        width:100%;
        position:fixed;
        top:0;
        left:0;
        z-index:1000;
    }


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

    .navbar{
        width:100%;
        height:75px;

        display:flex;
        justify-content:space-between;
        align-items:center;

        padding:0 6%;

        background:#0d2448;
    }


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

    .logo h2{
        color:#fff;
        font-size:1.45rem;
        font-weight:700;
    }

    .logo span{
        color:#63b2ff;
    }


    /* ================= NAVIGATION ================= */

    .nav-links {

        display: flex;

        align-items: center;

        gap: 25px;

        list-style: none;
         overflow-x: auto;
         padding-right: 5rem;
    }


    .nav-links a {

        text-decoration: none;

        color: #ffffff;

        font-size: 0.95rem;

        font-weight: 500;

        transition: 0.3s;
    }


    .nav-links a:hover {

        color: #63b2ff;
    }


    .nav-links .active {

        color: #63b2ff;
    }


    /* NO UNDERLINE */

    .nav-links a.active::after {

        display: none;
    }


    /* ================= HAMBURGER ================= */

    .hamburger{
        display:none;
    }


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

    .mobile-menu{
        display:none;
    }


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

.skills-section {

    width: 110%;

    min-height: 100vh;

    padding: 125px 7% 70px;

    box-sizing: border-box;

    background:
        linear-gradient(
            135deg,
            #063b83 0%,
            #052f70 45%,
            #001f4f 100%
        );

    color: #ffffff;

    position: relative;

    overflow: hidden;
}


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

.skills-section::before {

    content: "";

    position: absolute;

    width: 120px;

    height: 180px;

    top: 150px;

    left: 35px;

    background-image: radial-gradient(
        circle,
        #1684ff 3px,
        transparent 4px
    );

    background-size: 28px 28px;

    opacity: 0.75;
}


.skills-section::after {

    content: "";

    position: absolute;

    width: 120px;

    height: 180px;

    top: 180px;

    right: 35px;

    background-image: radial-gradient(
        circle,
        #1684ff 3px,
        transparent 4px
    );

    background-size: 28px 28px;

    opacity: 0.6;
}


/* ==========================================
        SKILLS INTRO
========================================== */

.skills-intro {

    width: 100%;

    max-width: 750px;

    margin: 0 auto 65px;

    text-align: center;

    position: relative;

    z-index: 2;
}


/* ==========================================
        SKILLS LABEL
========================================== */

.skills-label {

    display: inline-block;

    padding: 10px 24px;

    margin-bottom: 25px;

    background: #e9297b;

    border-radius: 30px;

    color: #ffffff;

    font-size: 1rem;

    font-weight: 600;

    letter-spacing: 1px;
}


/* ==========================================
        MAIN HEADING
========================================== */

.skills-intro h1 {

    margin: 0 0 20px;

    color: #ffffff;

    font-size: 3.4rem;

    font-weight: 700;

    line-height: 1.2;
}


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

.skills-intro p {

    width: 100%;

    max-width: 680px;

    margin: 0 auto;

    color: #ffffff;

    font-size: 1.05rem;

    line-height: 1.8;
}


/* ==========================================
        SKILLS CONTAINER
========================================== */

.skills-container {

    width: 100%;

    max-width: 900px;

    margin: 0 auto;

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 25px;

    position: relative;

    z-index: 2;
}


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

.skill-card {

    width: 100%;

    min-height: 280px;

    padding: 30px 25px;

    box-sizing: border-box;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    gap: 22px;

    background: rgba(28, 76, 140, 0.42);

    border: 1px solid rgba(98, 170, 255, 0.15);

    border-radius: 22px;

    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.12);

    backdrop-filter: blur(5px);
}


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

.skill-icon {

    width: 110px;

    height: 110px;

    min-width: 110px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;
}


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

.skill-icon i {

    color: #ffffff;

    font-size: 2.8rem;
}


/* ==========================================
        WEB DEVELOPMENT
========================================== */

.web-icon {

    background: #075fe0;
}


/* ==========================================
        GRAPHICS DESIGN
========================================== */

.graphics-icon {

    background: #e9297b;
}


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

.responsive-icon {

    background: #55b82b;
}


/* ==========================================
        MOBILE APP DEVELOPMENT
========================================== */

.mobile-icon {

    background: #ff8c0a;
}


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

.skill-content {

    width: 100%;

    text-align: center;
}


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

.skill-content h2 {

    margin: 0 0 12px;

    color: #ffffff;

    font-size: 1.3rem;

    font-weight: 700;

    line-height: 1.35;
}


/* ==========================================
        SKILL DESCRIPTION
========================================== */

.skill-content p {

    margin: 0 auto;

    max-width: 330px;

    color: #ffffff;

    font-size: 0.95rem;

    line-height: 1.7;
}

}

/* ==========================================
        SKILLS PAGE — DESKTOP VIEW
        1025px AND ABOVE
========================================== */

@media (min-width: 1025px) {
           body {
        font-family: 'Poppins', sans-serif;
    }


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

    header{
        width:100%;
        position:fixed;
        top:0;
        left:0;
        z-index:1000;
    }


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

    .navbar{
        width:100%;
        height:80px;

        display:flex;
        justify-content:space-between;
        align-items:center;

        padding:0 10%;

        background:#0d2448;
    }


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

    .logo h2{
        color:#fff;
        font-size:1.7rem;
        font-weight:700;
    }

    .logo span{
        color:#63b2ff;
    }


    /* ================= NAVIGATION ================= */

    .nav-links{
        display:flex;

        align-items:center;

        gap:45px;

        list-style:none;

        padding-right:19.6rem;
    }

    .nav-links a{
        text-decoration:none;

        color:#fff;

        font-size:1.05rem;

        font-weight:500;

        transition:.3s;
    }

    .nav-links a:hover,
    .nav-links .active{
        color:#63b2ff;
    }


    /* ================= HAMBURGER ================= */

    .hamburger{
        display:none;
    }


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

    .mobile-menu{
        display:none;
    }


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

.skills-section {

    width: 100%;

    min-height: 100vh;

    padding: 120px 8% 80px;

    box-sizing: border-box;

    background:
        linear-gradient(
            135deg,
            #06469a 0%,
            #063b83 50%,
            #001f4f 100%
        );

    color: #ffffff;

    position: relative;

    overflow: hidden;
}


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

.skills-section::before {

    content: "";

    position: absolute;

    width: 150px;

    height: 220px;

    top: 150px;

    left: 45px;

    background-image: radial-gradient(
        circle,
        #1684ff 3px,
        transparent 4px
    );

    background-size: 30px 30px;

    opacity: 0.7;
}


.skills-section::after {

    content: "";

    position: absolute;

    width: 150px;

    height: 220px;

    top: 180px;

    right: 45px;

    background-image: radial-gradient(
        circle,
        #1684ff 3px,
        transparent 4px
    );

    background-size: 30px 30px;

    opacity: 0.55;
}


/* ==========================================
        SKILLS INTRO
========================================== */

.skills-intro {

    width: 100%;

    max-width: 850px;

    margin: 0 auto 65px;

    text-align: center;

    position: relative;

    z-index: 2;
}


/* ==========================================
        SKILLS LABEL
========================================== */

.skills-label {

    display: inline-block;

    padding: 10px 25px;

    margin-bottom: 25px;

    background: #e9297b;

    border-radius: 30px;

    color: #ffffff;

    font-size: 1rem;

    font-weight: 600;

    letter-spacing: 1px;
}


/* ==========================================
        MAIN HEADING
========================================== */

.skills-intro h1 {

    margin: 0 0 20px;

    color: #ffffff;

    font-size: 3.8rem;

    font-weight: 700;

    line-height: 1.2;
}


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

.skills-intro p {

    width: 100%;

    max-width: 700px;

    margin: 0 auto;

    color: #ffffff;

    font-size: 1.1rem;

    line-height: 1.8;
}


/* ==========================================
        SKILLS CONTAINER
========================================== */

.skills-container {

    width: 100%;

    max-width: 1150px;

    margin: 0 auto;

    display: grid;

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

    gap: 25px;

    position: relative;

    z-index: 2;
}


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

.skill-card {

    width: 100%;

    min-height: 370px;

    padding: 40px 25px;

    box-sizing: border-box;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    gap: 25px;

    background: rgba(28, 76, 140, 0.42);

    border: 1px solid rgba(98, 170, 255, 0.15);

    border-radius: 22px;

    box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.12);

    backdrop-filter: blur(5px);

    transition: 0.3s ease;
}


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

.skill-card:hover {

    transform: translateY(-8px);

    background: rgba(35, 91, 165, 0.5);

    box-shadow:
        0 18px 35px rgba(0, 0, 0, 0.2);
}


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

.skill-icon {

    width: 125px;

    height: 125px;

    min-width: 125px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;
}


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

.skill-icon i {

    color: #ffffff;

    font-size: 3.2rem;
}


/* ==========================================
        WEB DEVELOPMENT
========================================== */

.web-icon {

    background: #075fe0;
}


/* ==========================================
        GRAPHICS DESIGN
========================================== */

.graphics-icon {

    background: #e9297b;
}


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

.responsive-icon {

    background: #55b82b;
}


/* ==========================================
        MOBILE APP DEVELOPMENT
========================================== */

.mobile-icon {

    background: #ff8c0a;
}


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

.skill-content {

    width: 100%;

    text-align: center;
}


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

.skill-content h2 {

    margin: 0 0 15px;

    color: #ffffff;

    font-size: 1.35rem;

    font-weight: 700;

    line-height: 1.35;
}


/* ==========================================
        SKILL DESCRIPTION
========================================== */

.skill-content p {

    max-width: 250px;

    margin: 0 auto;

    color: #ffffff;

    font-size: 0.95rem;

    line-height: 1.75;
}

}

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

.image-loader {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 45px;
    height: 45px;
    border: 4px solid rgba(255, 255, 255, 0.25);
    border-top: 4px solid #63b2ff;
    border-radius: 50%;
    animation: imageSpin 0.8s linear infinite;
    transform: translate(-50%, -50%);
    z-index: 1;
}

/* Hide image until it loads */
.hero-image img {
    opacity: 0;
}

/* Show image after successful load */
.hero-image img.loaded {
    opacity: 1;
}

@keyframes imageSpin {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}