* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; 
}
body{
    font-family: 'Questrial',sans-serif;
    background-color: #faf8f1;
    color: #1a1a1a;
}

html{
    scroll-behavior: smooth;
}
img,p,span,h1,h2,h3,h4,h5,h6,ul{
    margin: 0;
    padding: 0;
}
.main-div{
    padding: 4% 10%;
}
.wrapper{
    display: flex;
    align-items: center;
}
p{
    line-height: 1.7;
    font-size: 1.2rem;
}
h1{
    font-size: 2.5rem;
    font-weight: 500;
    margin-bottom: 2%;
}
h2{
    margin-bottom: 3%;
    font-size: 4rem;
    font-weight: 500;
}
h3{
    font-size: 3rem;
    margin-bottom: 3%;
}
h4{
    font-size: 1.2rem;
    margin-bottom: 2%;
}
nav{
    position: fixed;
    left: 50%;
    top: 4%;
    transform: translateX(-50%);
    background: #faf8f1;
    z-index: 200;
    padding: 10px 20px;
    border-radius: 10px;
}
nav ul {
    display: flex;
    align-items: center;
    gap: 15px;
    list-style: none;
}
nav ul a {
    display: inline-block;
    text-decoration: none;
    color:#000;
    transition:0.3s ease;
}
nav ul a:hover{
    transform: scale(1.1);

}
nav img{
    width: 50px;
}

.projectnav{
    padding: 0.5rem 2rem;
    top: 2%;
    background-color:#fff;
    z-index:2;
}

.hero {
    flex: 0 0 65%;   /* 70% width */
}

.main-div .img {
    flex: 0 0 35%;   /* 30% width */
    display: flex;
    justify-content: center;
}

.art {
    max-width: 100%;
    height:auto;
}

/***banner***/
.banner{
    min-height: 100vh;
    display: flex;
    align-items: center;
    padding: 4% 10%;
}
.banner .logos{
    display: flex;
}
.banner .logos img{
    width: 10%;
}

/***about***/
.about .wrapper{
    gap: 50px;
}

/***projects***/
.projects .wrapper{
    gap: 40px;
}
.projects .wrapper .project-card{
    flex: 0 0 30%;
    flex-wrap: wrap;
    position: relative;
    border: solid 1px rgb(195, 194, 194);
    border-radius: 5px;
    transition: 0.3s;
    cursor: pointer;
}
.projects .project-card:hover{
    opacity:0.7;
}
.projects .project-card .project-img{
    background-image: url('../images/project-img.jpg');
    height: 300px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 5px 5px 0 0;
}
.projects .project-card .project-img1{
    background-image: url('../images/project1/thumb.jpg');
    height: 300px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 5px 5px 0 0;
}
.projects .project-card .project-img2{
    background-image: url('../images/project2/thumb.jpg');
    height: 300px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 5px 5px 0 0;
}
.projects .project-card .project-img3{
    background-image: url('../images/project3/thumb.jpg');
    height: 300px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 5px 5px 0 0;
}

.projects .project-card .project-img4{
    background-image: url('../images/project4/thumb.jpg');
    height: 300px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 5px 5px 0 0;
}

.projects .project-card .project-img5{
    background-image: url('../images/project5/thumb.jpg');
    height: 300px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 5px 5px 0 0;
}

.projects .project-card .project-img6{
    background-image: url('../images/project6/thumb.jpg');
    height: 300px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 5px 5px 0 0;
}

.projects .project-card .project-img7{
    background-image: url('../images/project7/thumb.jpg');
    height: 300px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 5px 5px 0 0;
}

.projects .project-card .project-img8{
    background-image: url('../images/project8/thumb.jpg');
    height: 300px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 5px 5px 0 0;
}
.projects .project-content{
    padding: 3.5% 4%;
}

.name{
    letter-spacing: 14px;
    font-size: 1.5rem;
}

.name {
  overflow: hidden;
}

.name span {
  display: inline-block;
  opacity: 0;
  transform: translateY(100%);
}

/* ROLE MASK */
.role {
  overflow: hidden;
  position: relative;
}

.role-text {
  display: inline-block;
}

.logos {
  width: 280px;              /* 👈 controls how many logos visible */
  height: 50px;
  overflow: hidden;
  position: relative;
  margin-top: 30px;

  /* left fade */
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 18%,
    black 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 18%,
    black 100%
  );
}

.logos-track {
  display: flex;
  align-items: center;
  gap: 40px;
  width: max-content;
}

.logos img {
  height: 32px;
  opacity: 0.8;
}

.projects .owl-dots {
  margin-top: 30px;
  text-align: center;
}

.projects .owl-dot span {
  width: 8px;
  height: 8px;
  background: rgba(255,255,255,0.3);
  transition: all 0.3s ease;
}

.projects .owl-dot.active span {
  background: #fff;
  transform: scale(1.4);
}



/*project css*/

.project-link{
    text-decoration: none;
    color:#000;
}
.main-div {
     padding: 8% 10%;
}
.wrapper.block-layout {
    display: flex;
    padding: 0 8%;
    gap: 100px;
    height: 100vh;
    align-items: center;
}
.wrapper.block-layout div{
    flex:1
}
.wrapper.block-layout div img{
    max-width: 100%;
    height: auto;
}

.wrapper.block-layout div iframe{
    width: 100%;
    height: 21.6vw;
}
.s-label { 
    font-size: 0.8rem; 
    color: #999; 
    text-transform: uppercase; 
    letter-spacing: 3px; 
    display: block; 
    margin-bottom: 25px; 
}
.p-hero {
     background: #fff; 
}
.p-tag { 
    letter-spacing: 4px; 
    font-size:13px; 
    background: #000; 
    color: #fff; 
    padding: 6px 15px; 
    font-weight: bold;
}
.p-main-title { 
    font-size: 70px;
    line-height: 1;
    margin: 40px 0 0 0;
    font-weight: 500;
    letter-spacing: -2px;
}
.p-lead-text {
    font-size: 19px;
    margin:20px 0;
    color: #555;
    font-weight: 300;
}
.p-back { 
    height: 90vh; 
    overflow: hidden; 
    position: relative; 
    margin: 0 2%; 
    border-radius: 20px; 
}
.back-inner { 
    height: 130%; 
    background-size: cover; 
    background-position: center; 
    background-attachment: fixed; 
    background-color: #f0f0f0;
    display: flex; 
    align-items: center; 
    justify-content: center;
}
.overlay-text { 
    color: #000000; 
    font-size:25px; 
    letter-spacing: 10px; 
    text-transform: uppercase; 
    font-weight: 600;

}
.p-brief .wrapper { 
    display: flex; 
    gap: 80px; 
    align-items: center;
}
.brief-col { 
    flex: 1; 
}
.brief-col img{
    max-width: 100%;
    height: auto;
}
.brief-col h2 {
     font-size:47px; 
     line-height: 1.1; 
     margin-top: 10px; 
}
.impact-grid {
     display: flex; 
     gap: 50px; 
     margin-top: 60px; 
}
.impact-item span { 
    font-size: 3.5rem;
    display: block; 
    color: #000; 
    font-weight: 600; 
    margin-bottom: 5px; 
}
.impact-item p { 
    font-size: 0.9rem; 
    color: #888; 
}
.dark-bg {
    background: #0c0c0c;
    color: #fff; 
    border-radius: 40px; 
    margin: 0 2%; }
.dna-container {
    display: flex; 
    gap: 100px; 
    margin-top: 50px; 
}
.dna-box h1{
    color:#FFF;
    font-size:46px;
}
.dna-colors { 
    display: flex; 
    gap: 20px; 
    margin-top: 20px; 
}
.circle { 
    width: 60px; 
    height: 60px; 
    border-radius: 50%; 
    border: 1px solid rgba(255,255,255,0.1); 
}
.c1 { 
    background: rgb(233, 92, 92); 
} 
.c2 { 
    background: #fb9c65; 
} 
.c3 { 
    background: #f8df78; 
}
.c4 { 
    background: #9d3b0a; 
}
.p-problem .wrapper { 
    display: flex; 
    gap: 30px; 
}
.p-card { 
    flex: 1; 
    padding: 60px; 
    background: #f9f9f9; 
    border-radius: 30px; 
    transition: 0.4s ease;
}
.p-card.solution {
    background: #000; 
    color: #fff; 
    transform: translateY(-20px); 
}
.p-card .icon { 
    font-size: 2.5rem; 
    display: block; 
    margin-bottom: 25px; 
}
.p-card h3 { 
    font-size: 1.8rem; 
    margin-bottom: 15px; 
}
.wire-grid { 
    display: grid; 
    grid-template-columns: repeat(3, 1fr); 
    gap: 25px; 
    margin-top: 40px; 
}
.wire-box { 
    background: #f4f4f4; 
    height: 300px; 
    border-radius: 20px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    color: #aaa; 
    border: 1px dashed #ddd;
    text-transform: uppercase;
    font-size: 0.8rem;
}
.wire-box {
    position: relative;
    overflow: hidden;
}
.wire-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.wire-box.tall { 
    height: 500px; 
    grid-row: span 1; 
}
.m-item.wide { 
    grid-column: span 2; 
    height: 700px; 
}
.p-mobile .wrapper { 
    display: flex; 
    align-items: center; 
    gap: 100px; 
}
.mobile-text h2 { 
    font-size:50px; 
    margin-bottom: 20px; 
    line-height:59px;
}
.mobile-mockup {
    display: flex;
    justify-content: center;
    align-items: center;
}
.phone-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 28px;
    display: block;
}
.phone-frame { 
    width: 320px; 
    height: 539px; 
    border: 12px solid #111; 
    border-radius: 50px; 
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 50px 100px rgba(0,0,0,0.1);
}
.p-testimonial { 
    text-align: center; 
    padding: 150px 10% !important; 
    background: #fff; 
}
.quote-wrap p { 
    font-size: clamp(2rem, 5vw, 4rem); 
    font-weight: 500; 
    line-height: 1.1; 
    letter-spacing: -1px; 
}
.quote-wrap small { 
    display: block; 
    margin-top: 30px; 
    font-size: 1rem; 
    color: #888; 
    letter-spacing: 2px; 
}
.p-next-footer { 
    padding: 180px 0; 
    text-align: center; 
    background: #000; 
    position: relative;
    overflow: hidden;
}
.next-btn { 
    text-decoration: none; 
    color: #fff; 
}
.next-btn p { 
    font-size: 0.9rem; 
    opacity: 0.5; 
    letter-spacing: 5px; 
    text-transform: uppercase; 
}
.next-btn h2 { 
    font-size:110px; 
    margin-top: 20px; 
    transition: 0.7s cubic-bezier(0.19, 1, 0.22, 1); 
}
.next-btn:hover h2 { 
    transform: translateY(-10px); 
    color: #A3B18A; 
}
.p-footer { 
    padding: 60px; 
    text-align: center; 
    opacity: 0.3; 
    font-size:40px; 
    letter-spacing: 2px; 
}
@media (max-width: 1024px) {
.p-brief .wrapper, .p-problem .wrapper, .p-mobile .wrapper, .dna-container, .wrapper.block-layout { 
    flex-direction: column; 
    gap: 0px; 
    padding: 0 8% 15% 8%;
    height: 114vh;
}
.main-div { 
    padding: 12% 5%; 
}
.p-main-title { 
    font-size: 4.5rem; 
}
.impact-grid { 
    justify-content: space-between; 
    }
}
@media (max-width: 768px) {
.wire-grid, .masonry { 
    grid-template-columns: 1fr; 
}
.m-item.wide { 
    grid-column: span 1; 
    height: 400px; 
}
.p-main-title { 
    font-size: 3.5rem; 
}
.text-first {
    flex-direction: column-reverse !important;
}
.phone-frame { 
    width: 100%; 
    max-width: 280px; 
    height: 550px; }
}


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

.p-contact {
    padding: 120px 0;
}

.contact-inner {
    max-width: 700px;
    margin: auto;
    text-align: center;
}

.contact-text h2 {
    margin: 15px 0;
}

.contact-form {
    margin-top: 40px;
}

.form-row {
    margin-bottom: 20px;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 15px;
    border: 1px solid #ddd;
    font-family: 'Questrial', sans-serif;
    font-size: 14px;
    outline: none;
    transition: 0.3s ease;
}

.contact-form input:focus,
.contact-form textarea:focus {
    border-color: #000;
}

.contact-btn {
    padding: 14px 35px;
    border: none;
    background: #000;
    color: #fff;
    font-family: 'Questrial', sans-serif;
    cursor: pointer;
    transition: 0.3s ease;
}

.contact-btn:hover {
    background: #6d6d6d;
}

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

.p-footer {
    padding: 30px 0;
    background:#000;
    color: #fff;
    font-size: 14px;
}

.footer-inner {
    max-width: 1200px;
    margin: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-links a {
    color: #aaa;
    margin-left: 20px;
    text-decoration: none;
    transition: 0.3s ease;
}

.footer-links a:hover {
    color: #fff;
}

.owl-nav button span{
    font-size:3rem;
    margin-right:2rem;
}

/* Responsive */
@media (max-width: 768px) {
    .footer-inner {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }
    .wrapper.block-layout div{
        flex:unset;
    }
    .wrapper.block-layout div iframe {
    width: 100%;
    height: 55.6vw;
    margin-bottom: 20px;
    margin-top:50px;
}
}

@media (min-width: 1920px) {
    nav {
        left: -3rem;
    }
    h2 {
        margin-bottom: 3%;
        font-size: 7rem;
    }
    .name {
        font-size: 2.5rem;
    }
    .logos {
        height: 90px;
    }
    .logos img {
        height: 60px;
    }
    .banner .logos img {
        width: 40%;
    }
}


.btn {
    padding: 14px 35px;
    border: none;
    background: #000;
    color: #fff;
    font-family: 'Questrial', sans-serif;
    cursor: pointer;
    display: inline-block;
    transition: 0.3s ease;
    margin-top:2%;
    text-decoration: none;
}

.btn:hover {
    background: #6d6d6d;
}

.tools{
    display: flex;
    gap:20px;
}
.tools div img{
    width: 50px;
    margin-top:10px;
}

/* ============================= */
/* 🔥 RESPONSIVE FIXES (ADDED)  */
/* ============================= */

/* GLOBAL FIX */


/* FIX WRAPPER ON SMALL SCREENS */
@media (max-width: 1024px) {
    .wrapper {
        flex-direction: column;
        text-align: center;
    }

    .main-div {
        padding: 10% 5%;
    }

    h2 {
        font-size: 2.5rem;
    }

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

/* HERO SECTION FIX */
@media (max-width: 768px) {

    .banner {
        flex-direction: column;
        text-align: center;
        padding-top: 120px;
    }

    .hero {
        flex: unset;
        width: 100%;
        order: 1;
    }

    .main-div .img {
        flex: unset;
        width: 100%;
        order: 2;
        margin-top: 30px;
    }

    .name {
        letter-spacing: 5px;
        font-size: 1.2rem;
    }

    h2 {
        font-size: 2rem;
    }

    .logos {
        margin: 20px auto;
    }
}

/* NAVBAR FIX */
@media (max-width: 768px) {
    nav {
        width: 95%;
        top: 10px;
        padding: 10px;
    }

    nav ul {
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px;
    }

    nav img {
        width: 40px;
    }
}

/* PROJECTS FIX */
@media (max-width: 768px) {

    .projects .wrapper {
        flex-direction: column;
    }

    .projects .project-card {
        flex: unset;
        width: 100%;
    }

    .projects .project-card .project-img {
        height: 220px;
    }
}

/* ABOUT FIX */
@media (max-width: 768px) {
    .about .wrapper {
        flex-direction: column;
        text-align: center;
    }

    .profile-pic {
        margin-bottom: 20px;
    }
}

/* CONTACT FIX */
@media (max-width: 768px) {
    .contact-inner {
        padding: 0 10px;
    }
}

/* FOOTER FIX */
@media (max-width: 768px) {
    .footer-inner {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }
}

/* SMALL MOBILE */
@media (max-width: 480px) {

    h1 {
        font-size: 1.3rem;
    }

    h2 {
        font-size: 1.6rem;
    }

    h3 {
        font-size: 1.4rem;
    }

    .name {
        letter-spacing: 3px;
    }
}