@font-face {
    font-family: font1;
    src: url(./Fonts/NeutralSans-Regular.ttf);
}

@font-face {
    font-family: font2;
    src: url(./Fonts/BeautiqueDisplay-Light.otf);
}

@font-face {
    font-family: font3;
    src: url(./Fonts/BeautiqueDisplay-Medium.otf);
}

@font-face {
    font-family: font4;
    src: url(./Fonts/Cormorant-Regular.woff2);
}

@font-face {
    font-family: font5;
    src: url(./Fonts/Cormorant-Light.woff2);
}




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

html,
body {
    height: 100%;
    width: 100%;
    font-family: 'Poppins', sans-serif;
    scroll-behavior: smooth;
}


/* Offset anchor targets so fixed nav doesn't cover them */
#home, #about, #works, #contact {
    scroll-margin-top: 13vh;
}

/* Navbar */
nav {
    height: 13vh;
    width: 100%;
    display: flex;
    position: absolute;
    top: 0;
    z-index: 999;

}

.nav-left {
    height: 100%;
    width: calc(100%/3);
    display: flex;
    align-items: center;
    justify-content: start;
}

.nav-left a {
    margin-left: 10vh;
    font-size: 33px;
    text-decoration: none;
    font-family: font3;
    color: white;
}

.nav-center {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    height: 100%;
    width: calc(100%/3);
}

.main-links {
    display: flex;
    gap: 10px;
    border: 1px solid white;

    border-radius: 50px;
    border: 0.2px solid rgba(255, 255, 255, 0.353);
}

.nav-center a {
    font-size: 16px;
    text-decoration: none;
    color: white;
    padding: 15px 30px;
    border-radius: 50px;
}



.nav-center a:hover {
    background: #231E82;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow:
        0 0px 10px 10px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.5),
        inset 0 -1px 0 rgba(255, 255, 255, 0.1),
        inset 0 0 3px 3px rgba(255, 255, 255, 0.219);
    position: relative;
    overflow: hidden;
    border-radius: 50px;
}

.nav-right {
    height: 100%;
    width: calc(100%/3);
}

.section1 {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    background-color: #231E82;
    overflow: hidden;
}

.cir {
    height: 40vh;
    width: 40vh;
    background-color: white;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.249);
    backdrop-filter: blur(100px);
    -webkit-backdrop-filter: blur(30px);
    border: 0px solid rgba(255, 255, 255, 0.81);
    box-shadow:
        0 8px 40px 40px rgba(0, 0, 0, 0.133),
        inset 0 0px 0 rgba(255, 255, 255, 0),
        inset 0 0px 0 rgba(255, 255, 255, 0.1),
        inset 0 0 44px 40px rgba(255, 255, 255, 0.03);
    position: relative;
    overflow: hidden;
    filter: blur(150px);
}

.section1 img {
    position: absolute;
    top: 0%;
    height: 100vh;
    mix-blend-mode: luminosity;
    opacity: 1;
}

.content {
    color: white;
    display: flex;
    align-items: start;
    padding-top: 5%;
    justify-content: center;
    position: absolute;
    gap: 30px;
    top: 10%;
    height: 60vh;
    width: 80%;
}

.content h1 {
    margin-top: 9%;
    font-size: 12rem;
    font-family: font2;
    font-weight: 400;
    scale: 1;
    opacity: 1
}

.content h4 {
    font-size: 25px;
}

.content li {
    font-size: 18px;
}

.section1 p {
    position: absolute;
    top: 90%;
    color: white;
    margin-left: 0%;
    opacity: 0.5;
    scale: 0;
}

/* Section2 start*/

.section2 {
    display: flex;
    align-items: start;
    justify-content: center;
    height: 120vh;
    width: 100%;
    background-color: rgb(0, 0, 0);
}

.content1 {
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: start;
    gap: 100px;
    height: 120vh;
    width: 100%;
    background-color: rgb(255, 255, 255);
    padding: 10%;
    scale: 0.7;
}

.content1 h4 {
    font-size: 29px;
    font-family: font1;
    font-weight: 400;
}

.content1 h1 {
    font-size: 63px;
    font-family: font1;
}

.para {
    display: flex;
    gap: 25%;
}

.para p {
    font-size: 23px;
    width: 36%;
    filter: blur(50px);

}

/* Section3 start*/


.section3 {
    height: 150vh;
    width: 100%;
    overflow: hidden;
    background-color: black;
}

.section3 .top {
    display: flex;
    align-items: start;
    justify-content: space-around;
    height: 40vh;
    width: 100%;
    padding-top: 10%;
    color: white;
}

.section3 .mid {
    display: flex;
    gap: 10px;
    height: 80vh;
    width: 100%;
}

.section3 .top h5 {
    font-size: 30px;
    font-family: font1;
    font-weight: 600;
    margin-left: -3%;

}

.section3 .top h1 {
    font-size: 60px;
    font-family: font1;
    font-weight: 600;
    letter-spacing: 2px;
    font-weight: 600;
}

.botom {
    padding: 10px 5%;
}

.paras {
    display: flex;
    justify-content: space-between;
    color: white;
}

.paras p {
    font-family: font5;
    font-size: 19px;
    font-weight: 300;
}

#paras1 {
    width: 85vh;
}

.mid-one {
    height: 100%;
    width: 60vw;
    transform: translateX(-670px);
    opacity: 0.5;
    background-image: url(./Assets/expertise-left.jpg);
    background-size: cover;
    background-position: center;
}

.mid-two {
    height: 100%;
    width: 60vw;
    transform: translateX(-610px);
    background-image: url(./Assets/expertise-right.jpg);
    background-size: cover;
    background-position: center;
}

/* heading animation start*/


#creativehead {
    display: flex;
    align-items: center;
    height: 40vh;
    font-size: 15rem;
    text-wrap: nowrap;
    font-family: font3;
    font-weight: 500;
}



/* Section4 start*/


.section4 {
    height: 150vh;
    width: 100%;
    overflow: hidden;
}

.section4-cont {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    height: 100vh;
    width: 100%;
    overflow: hidden;
}

.section4-cont h2 {
    font-size: 8rem;
    font-family: font3;
    font-weight: 500;
}

#Branding {
    transform: translateX(700px);
    opacity: 0.3;
}

#Design {
    transform: translateX(700px);
    opacity: 0.3;

}

#Marketing {
    transform: translateX(700px);
    opacity: 0.3;

}

.forheading {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50vh;
    width: 100%;
    overflow: hidden;
    background-color: white;
}



/* Section5 start*/

.section5 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    gap: 50px;
    height: 100vh;
    width: 100%;
    opacity: 1;
    background-color: rgb(255, 255, 255);
    scale: 1;
}

.card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 95vh;
    width: 70%;
    border-radius: 20px;
    overflow: hidden;
    background-color: orange;
}

.card h1 {
    opacity: 0.5;
    scale: 0.5;
}

.blank {
    height: 100vh;
    width: 100%;
    background-color: #231E82;
}

.main-blank {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    width: 100%;
    background-color: #ffffff;
    /* overflow: hidden; */
    perspective: 600px;
}

.card {
    position: absolute;
    top: 100%;
    height: 87vh;
    width: 80%;
    background-color: orange;
    padding-top: 15%;
    overflow: hidden;
}

.card {
    scale: 1;
}

.card h1 {
    font-size: 10rem;
    font-family: font2;
    color: white;
    opacity: 1;
}

.card1 {
    background: linear-gradient(145deg, #0f0c29, #302b63, #24243e);
    background-size: cover;
}

.card2 {
    background: linear-gradient(145deg, #000428, #004e92);
    background-size: cover;
}

.card3 {
    background: linear-gradient(145deg, #0d0d0d, #1a1a2e, #16213e);
    background-size: cover;
}

.card4 {
    background: linear-gradient(145deg, #0f2027, #203a43, #2c5364);
    background-size: cover;
}

.card5 {
    background: linear-gradient(145deg, #1a0533, #3A0CA3, #5A4BFF);
    background-size: cover;
}

.main-blank h6 {
    font-size: 1.7rem;
    font-weight: 400;
    position: absolute;
    top: 0%;
    left: 7%;
    margin-top: 1%;
}

.blank1 {
    height: 40vh;
    background-color: #fff;
}

.fordate {
    display: flex;
    align-items: end;
    justify-content: space-between;
    height: 30vh;
    width: 100%;
    /* background-color: #fff;  */
    padding: 0px 30px 10px 30px;
}

.fordate p {
    color: white;
    font-size: 22px;
}


/* Section6 */


/* <!-- Section6 --> */

.section6 {
    height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    width: 100%;
    /* background-color: darkmagenta; */
    padding-top: 5%;
}

.section6 h3 {
    font-size: 26px;
    font-weight: 400;
    align-self: start;
    margin-left: 5%;
}


.prof {
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: 80vh;
    width: 95%;
}

.cardsp {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    text-align: center;
    height: 50vh;
    padding: 40px 20px;
    width: 25vw;
    border-radius: 20px;
    color: white;
    background: linear-gradient(225deg, rgba(2, 0, 36, 1) 0%, rgba(9, 9, 121, 0.85) 100%, rgba(0, 212, 255, 1) 100%);

}

.img {
    height: 100px;
    width: 100px;
    background-color: #111;
    border-radius: 20px;
}

.cardsp p {
    font-family: font1;
}


.cardsp h3 {
    font-family: font2;
    word-spacing: 15px;
    text-align: center;
    margin-left: 40px;
}

.cardsp1 .img {
    background-image: url(./Assets/avatar1.jpg);
    background-size: cover;
    background-position: center;
}

.cardsp2 .img {
    background-image: url(./Assets/avatar2.jpg);
    background-size: cover;
    background-position: center;
}

.cardsp3 .img {
    background-image: url(./Assets/avatar3.jpg);
    background-size: cover;
    background-position: center;
}

/* Certification icon replacing profile image */
.cert-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80px;
    width: 80px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.cert-icon i {
    font-size: 36px;
    color: #fff;
}


/* <!-- Section7--> */

.section7 {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: start;
    gap: 50px;
    padding-top: 20vh;
    height: 140vh;
    width: 100%;
    background-color: #ffffff;
}

.section7 h3 {
    font-size: 26px;
    font-weight: 400;
}


.section7 p {
    font-size: 19px;

}

.pricecart {
    height: 100vh;
    width: 100%;
    background-color: rgb(255, 255, 255);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;

}

.pricecart .left {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 40px;
    height: 95%;
    width: 40%;
    border-radius: 5px;
    color: #fff;
    background-color: rgb(0, 0, 0);
    opacity: 0.3;
    filter: blur(10px);
    transform: translateY(300px);

}

.pricecart .right {
    display: flex;
    flex-direction: column;
    gap: 20px;
    color: #fff;
    padding: 40px;
    height: 95%;
    width: 40%;
    border-radius: 5px;
    opacity: 0.3;
    filter: blur(10px);
    transform: translateY(300px);
    background: linear-gradient(323deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 255, 0.68) 100%);
}

.left h4 {
    font-size: 18px;
    font-weight: 500
}

.left h1 {
    font-size: 50px;
}

.stack-label {
    font-size: 38px !important;
    letter-spacing: 2px;
    opacity: 0.7;
}

.left p {
    font-size: 17px;
}

.left h3 {
    font-size: 18px;
    letter-spacing: 2px;
}


.list {
    display: flex;
    flex-direction: column;
    justify-content: start;
    gap: 26px;
    height: 55vh;
    width: 100%;
    /* background-color: #b15e5e; */
    margin-top: 8px;
    margin-left: -7px;
}


.right h4 {
    font-size: 18px;
    font-weight: 500;
}

.right h1 {
    font-size: 50px;
}

.right p {
    font-size: 17px;
}

.right h3 {
    font-size: 18px;
    letter-spacing: 2px;
}

/* <!-- Section8--> */


.section8 {
    padding-top: 40vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 50px;
    height: 140vh;
    width: 100%;
    background-color: rgb(255, 255, 255)
}

.container {
    display: flex;
    gap: 50px;
    height: 90vh;
    width: 100%;
    /* background-color: cornflowerblue; */
    padding: 10vh 20vh;
}

.container .lft {
    display: flex;
    flex-direction: column;
    gap: 30px;
    height: 70vh;
    width: 70%;
    background: linear-gradient(125deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 255, 0.68) 100%);
    border-radius: 20px;
    padding: 20px;
    color: #fff;
    opacity: 0.4;
    transition: all 0.3s;
    scale: 1;
}

.container .lft:hover {
    scale: 1.05;
    opacity: 1;
}

.container .rht {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 3px;
    color: #fff;
    height: 70vh;
    width: 40%;
    padding: 30px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 1) 0%, rgba(0, 0, 255, 0.68) 100%);
    border-radius: 20px;
    opacity: 0.4;
    scale: 1;
    transition: all 0.3s;

}


.container .rht:hover {
    scale: 1.05;
    opacity: 1;
}

.container .lft h1 {
    font-size: 40px;
    font-weight: 500;
}

.container .lft p {
    width: 20vw;
}

.container .lft h2 {
    font-size: 36px;
    font-weight: 500;
}

.rht h1 {
    font-family: font1;
    font-weight: 500;
}

.rht .img {
    width: 27vw;
    border-radius: 1px;
    height: 50vh;
    background-image: url(./Assets/output-metrics.avif);
    background-size: cover;
    background-position: center top;
}

.imgbottom {
    display: flex;
    align-items: center;
    gap: 2px;
    height: 10vh;
    width: 100%;
    /* background-color: #fff; */
}

.peop {
    height: 40px;
    width: 40px;
    background-color: #111;
    border-radius: 50%;
}

.peop1 {
    background-image: url(./Assets/avatar1.jpg);
    background-size: cover;
    background-position: center;
}

.peop2 {
    background-image: url(./Assets/avatar2.jpg);
    background-size: cover;
    background-position: center;
}

.peop3 {
    background-image: url(./Assets/avatar3.jpg);
    background-size: cover;
    background-position: center;
}

.imgbottom p {
    margin-left: 20px;
    font-size: 20px;
}

.section8 h2 {
    font-size: 27px;
    font-weight: 500;
}


/* <!-- Section9--> */
.section9 {
    height: 100vh;
    width: 100%;
    position: relative;
}

.section9 .top {
    top: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    height: 100vh;
    width: 100%;
    position: relative;
    overflow: hidden;
}

/* Full-cover video background */
.section9-video {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    object-fit: cover;
    z-index: 0;
}

/* Dark gradient overlay so text stays readable */
.section9-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(360deg, rgba(0,0,0,0.75) 0%, rgba(0,0,80,0.45) 100%);
    z-index: 1;
}

/* Push text above video and overlay */
.section9 .top h1,
.section9 .top button {
    position: relative;
    z-index: 2;
}


.section9 .top h1 {
    font-size: 100px;
    font-family: font2;
    color: white;
}

.section9 .top button {
    padding: 20px 50px;
    border-radius: 50px;
    border: none;
    font-size: 20px;
    font-weight: 600;
    transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
}

.section9 .top button:hover {
    scale: 1.1;
}

.section9 .bottom {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: end;
    height: 70vh;
    width: 100%;
    /* background-color: #c54545; */
}

.section9 .bottom h1 {
    font-size: 180px;
    font-family: font2;
    font-weight: 500;
    background: linear-gradient(90deg, #5a4bff, #1a1a1a);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.footercontent {
    display: flex;
    height: 10vh;
    width: 100%;
    /* background-color: #a19494; */
}

.footercontent .left {
    display: flex;
    align-items: center;
    justify-content: start;
    gap: 50px;
    height: 100%;
    width: 50%;
    /* background-color: aquamarine; */
    padding-left: 8%;
}

.footercontent .rht {
    display: flex;
    align-items: center;
    justify-content: end;
    gap: 5px;
    height: 100%;
    width: 50%;
    /* background-color: rgb(24, 28, 27); */
    padding-right: 3%;

}

.footercontent .left a {
    font-size: 21px;
    text-decoration: none;
    color: #111;
    font-weight: 300;
}

.rht .point {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    width: 50px;
    background-color: #000000;
    border-radius: 50%;
    text-decoration: none;
    transition: background 0.2s ease;
}

.rht .point:hover {
    background-color: #3A0CA3;
}

.rht .point i {
    color: #fff;
    font-size: 27px;
}


/* ============================================================
   HAMBURGER BUTTON  (hidden on desktop)
   ============================================================ */
.nav-hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    z-index: 1001;
    margin-right: 20px;
}
.nav-hamburger span {
    display: block;
    width: 26px;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    transition: all 0.3s ease;
}

/* ============================================================
   MOBILE FULL-SCREEN MENU OVERLAY
   ============================================================ */
.mobile-menu {
    display: none;
    position: fixed;
    inset: 0;
    background: #0d0b3e;
    z-index: 2000;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 40px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.mobile-menu.open {
    display: flex;
    opacity: 1;
    pointer-events: all;
}
.mobile-menu-close {
    position: absolute;
    top: 24px;
    right: 24px;
    background: none;
    border: none;
    color: #fff;
    font-size: 32px;
    cursor: pointer;
    line-height: 1;
}
.mobile-link {
    font-size: 2.4rem;
    font-family: font3;
    color: #fff;
    text-decoration: none;
    letter-spacing: 2px;
    transition: color 0.2s;
}
.mobile-link:hover { color: #5a4bff; }

/* ============================================================
   TABLET  (≤ 1024px)
   ============================================================ */
@media (max-width: 1024px) {
    .content h1          { font-size: 8rem; }
    .content1 h1         { font-size: 46px; }
    #creativehead        { font-size: 10rem; }
    .section4-cont h2    { font-size: 5.5rem; }
    .card h1             { font-size: 7rem; }
    .section9 .bottom h1 { font-size: 120px; }

    .pricecart { flex-direction: column; height: auto; padding: 40px 20px; gap: 20px; }
    .pricecart .left,
    .pricecart .right    { width: 90%; height: auto; transform: none; opacity: 1; filter: none; }

    .container           { flex-direction: column; height: auto; padding: 40px 40px; }
    .container .lft,
    .container .rht      { width: 100%; height: auto; opacity: 1; }
    .container .lft p    { width: 100%; }
    .rht .img            { width: 100%; height: 40vh; }

    .prof                { flex-direction: column; height: auto; gap: 24px; align-items: center; }
    .cardsp              { width: 80%; height: auto; }
}

/* ============================================================
   MOBILE  (≤ 768px)
   ============================================================ */
@media (max-width: 768px) {

    /* ── Nav ── */
    nav {
        position: fixed;
        background: rgba(15, 12, 41, 0.85);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        justify-content: space-between;
        height: 64px;
    }
    .nav-left  { width: auto; }
    .nav-left a { margin-left: 20px; font-size: 22px; }
    .nav-center,
    .nav-right  { display: none; }
    .nav-hamburger { display: flex; }

    /* ── Section 1 – Hero ── */
    .section1 { height: 100svh; }
    .content {
        flex-direction: column;
        align-items: center;
        text-align: center;
        top: 15%;
        width: 90%;
        gap: 10px;
        height: auto;
        padding-top: 0;
    }
    .content h1  { font-size: 5.5rem; margin-top: 0; }
    .content h4  { font-size: 16px; }
    .content li  { font-size: 14px; }
    .section1 p  {
        font-size: 13px;
        text-align: center;
        padding: 0 20px;
        top: 85%;
        opacity: 1;
        scale: 1;
    }

    /* ── Section 2 – Profile ── */
    .section2 { height: auto; padding-bottom: 40px; }
    .content1 {
        scale: 1;
        height: auto;
        gap: 40px;
        padding: 80px 24px 40px;
    }
    .content1 h4 { font-size: 20px; }
    .content1 h1 { font-size: 28px; line-height: 1.3; }
    .para        { flex-direction: column; gap: 24px; }
    .para p      { width: 100%; font-size: 16px; filter: none; transform: none !important; }

    /* ── Section 3 – Expertise ── */
    .section3 { height: auto; padding-bottom: 40px; }
    .section3 .top {
        flex-direction: column;
        align-items: flex-start;
        height: auto;
        padding: 80px 24px 20px;
        gap: 10px;
    }
    .section3 .top h5 { font-size: 18px; margin-left: 0; }
    .section3 .top h1 { font-size: 32px; }
    .section3 .mid    { height: 40vh; }
    .mid-one { transform: none; opacity: 1; width: 50vw; }
    .mid-two { transform: none; width: 50vw; }
    .paras   { flex-direction: column; gap: 20px; color: black; }
    .paras p { font-size: 15px; }
    #paras1  { width: 100%; }
    .botom   { padding: 20px 24px; }

    /* ── Marquee heading ── */
    .forheading { height: 20vh; }
    #creativehead { font-size: 5rem; }

    /* ── Section 4 – Core Strengths ── */
    .section4      { height: auto; }
    .section4-cont {
        height: auto;
        padding: 60px 24px;
        gap: 20px;
        justify-content: center;
    }
    .section4-cont h2 { font-size: 3.5rem; }
    #Branding, #Design, #Marketing {
        transform: none;
        opacity: 1;
    }

    /* ── Section 5 – Featured Works ── */
    .blank1 { height: 20vh; }
    .main-blank {
        height: auto;
        min-height: 100svh;
        flex-direction: column;
        align-items: center;
        justify-content: flex-start;
        padding: 60px 20px 40px;
        gap: 20px;
    }
    .main-blank h6 {
        position: static;
        margin-bottom: 10px;
        font-size: 1.2rem;
    }
    /* Reset all GSAP-positioned cards to static stacked layout */
    .card {
        position: static !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        width: 92%;
        height: auto;
        min-height: 220px;
        padding: 30px 24px 20px;
        border-radius: 16px;
        opacity: 1 !important;
        scale: 1 !important;
    }
    .card h1     { font-size: 3.5rem; }
    .fordate     { height: auto; padding: 16px 0 0 0; flex-direction: column; gap: 4px; }
    .fordate p   { font-size: 15px; }

    /* ── Section 6 – Certifications ── */
    .section6 { height: auto; padding: 60px 20px 40px; }
    .section6 h3 { font-size: 20px; margin-left: 0; align-self: flex-start; }
    .prof {
        flex-direction: column;
        height: auto;
        gap: 20px;
        width: 100%;
    }
    .cardsp { width: 100%; height: auto; padding: 30px 20px; }
    .cardsp p  { font-size: 14px; }
    .cardsp h3 { font-size: 16px; margin-left: 0; word-spacing: normal; }

    /* ── Section 7 – Tech Stack ── */
    .section7 {
        height: auto;
        padding: 60px 20px 40px;
        gap: 30px;
    }
    .section7 h3 { font-size: 20px; }
    .section7 > p { font-size: 15px; text-align: center; }
    .pricecart {
        flex-direction: column;
        height: auto;
        gap: 20px;
        padding: 0;
    }
    .pricecart .left,
    .pricecart .right {
        width: 100%;
        height: auto;
        transform: none;
        opacity: 1;
        filter: none;
        border-radius: 12px;
    }
    .left h1, .right h1 { font-size: 36px; }
    .stack-label         { font-size: 28px !important; }
    .left h3, .right h3  { font-size: 15px; }
    .left p,  .right p   { font-size: 14px; }
    .list { height: auto; gap: 16px; }
    .list p { font-size: 14px; }

    /* ── Section 8 – Why Work With Me ── */
    .section8 {
        height: auto;
        padding: 60px 20px 40px;
        gap: 30px;
    }
    .section8 h2 { font-size: 20px; }
    .container {
        flex-direction: column;
        height: auto;
        padding: 0;
        gap: 20px;
    }
    .container .lft,
    .container .rht {
        width: 100%;
        height: auto;
        opacity: 1;
    }
    .container .lft h1 { font-size: 28px; }
    .container .lft p  { width: 100%; font-size: 14px; }
    .container .lft h2 { font-size: 22px; }
    .rht .img          { width: 100%; height: 30vh; }
    .imgbottom p       { font-size: 15px; }

    /* ── Section 9 – Contact / Footer ── */
    .section9 .top h1    { font-size: 56px; }
    .section9 .top button { padding: 14px 36px; font-size: 16px; }
    .section9 .bottom h1 { font-size: 56px; text-align: center; }
    .footercontent       { flex-direction: column; height: auto; padding: 16px 20px; gap: 16px; }
    .footercontent .left,
    .footercontent .rht  { width: 100%; justify-content: center; padding: 0; }
    .footercontent .left { gap: 24px; }
    .footercontent .left a { font-size: 16px; }
}

/* ============================================================
   SMALL MOBILE  (≤ 400px)
   ============================================================ */
@media (max-width: 400px) {
    .content h1       { font-size: 4rem; }
    .content1 h1      { font-size: 24px; }
    .section4-cont h2 { font-size: 2.8rem; }
    .card h1          { font-size: 2.8rem; }
    .section9 .top h1 { font-size: 44px; }
    .section9 .bottom h1 { font-size: 44px; }
    #creativehead     { font-size: 3.5rem; }
}