*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}
body{
font-family:'Inter',sans-serif;
background:#0e0e0e;
color:#eee;
line-height:1.7;
}

/*--.navlogo img{
  border-radius: 15px 0px;
  
}

.navlogo{
    filter: drop-shadow(0 0 6px rgba(255,255,255,0.6));
}
--*/



nav{
padding:10px 8%;
display:flex;
justify-content:space-between;
align-items:center;
border-bottom:1px solid #1f1f1f;
background:linear-gradient(to bottom,#0e0e0e,#0b0b0b);
}

nav h2{
font-family:'Playfair Display',serif;
font-size:24px;
letter-spacing:0.5px;
white-space:nowrap;
}
nav ul{
list-style:none;
display:flex;
gap:32px;
align-items:center;
}

nav a{
color:#dcdcdc;
text-decoration:none;
font-size:14px;
position:relative;
padding-bottom:6px;
}

nav a::after{
content:'';
position:absolute;
left:0;
bottom:0;
width:0;
height:1px;
background:#fff;
transition:0.3s;
}
nav a:hover::after{
    width:100%;
}

header{
padding:80px 10%;
display:grid;
grid-template-columns:1.3fr 1fr;
gap:70px;
align-items:center;
}
h1{
font-family:'Playfair Display',serif;
font-size:56px;
line-height:1.1;
margin-bottom:22px;
}

.subtitle{
color:#b9b9b9;
max-width:520px;
margin-bottom:36px
}
.actions{
    display:flex;
    gap:20px;
}
.btn{
padding:14px 34px;
border:1px solid #fff;
text-decoration:none;
color:#fff;
font-size:13px;
letter-spacing:1px;
transition:.3s;
}

.btn.primary{
    background:#fff;
    color:#000;
}
.btn:hover{
    transform:translateY(-2px);
}

.hero-art{
height:450px;
background:#1c1c1c url('Color Drawing/ColorDrawing\ 24.jpg') center/cover no-repeat;
border-radius:16px;
box-shadow:0 30px 80px rgba(0,0,0,.6);
}

section{padding:60px 10%}
.title{
font-family:'Playfair Display',serif;
font-size:44px;
margin-bottom:18px;
}
.muted{
    color:#b5b5b5;
    max-width:700px;
}

.services{
margin-top:60px;
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:32px;
}

.card{
background:#161616;
padding:34px;
border-radius:18px;
border:1px solid #242424;
}
.card h3{
font-family:'Playfair Display',serif;
margin-bottom:10px;
}


/*-------------Start------ Team Page Design----------------------------------*/
.team{
padding:60px 8% 100px;
display:grid;
grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
gap:40px;
}

.member{
background:#161616;
border:1px solid #242424;
border-radius:18px;
padding:34px;
text-align:center;
transition:.3s;
}

.member:hover{transform:translateY(-6px)}

.avatar{
width:140px;
height:140px;
border-radius:50%;
margin:0 auto 20px;
background:#222 url('team.jpg') center/cover no-repeat;
}
.member h3{
font-family:'Playfair Display',serif;
margin-bottom:6px;
}

.role{
  color:#b9b9b9;
  font-size:14px;
  margin-bottom:12px;
}
.desc{
  color:#cfcfcf;
  font-size:14px;
}

/*-------------End------ Team Page Design----------------------------------*/

.cta{
background:#141414;
border-top:1px solid #222;
border-bottom:1px solid #222;
text-align:center;
}
.cta h2{
font-family:'Playfair Display',serif;
font-size:42px;
margin-bottom:22px;
}


footer{
padding:40px 10%;
text-align:center;
font-size:14px;
color:#888;
}

@media(max-width:900px){
header{grid-template-columns:1fr;
}
h1{font-size:44px;
}


nav ul{
position:absolute;
top:70px;
right:8%;
background:#111;
flex-direction:column;
width:220px;
padding:20px;
gap:18px;
border:1px solid #222;
border-radius:12px;
display:none;
}

nav ul.show{
    display:flex;
}

.menu-toggle{
display:flex;
flex-direction:column;
gap:5px;
cursor:pointer;
}
.menu-toggle span{
width:24px;
height:2px;
background:#fff;
}
}

/*---------Start------ArtWork Page Design----------------------*/
.filters{
  text-align:center;
  margin-bottom:30px;
}
.filters button{
  background:#111;
  color:#fff;
  border:1px solid #444;
  padding:10px 20px;
  margin:5px;
  cursor:pointer;
  transition:.3s;
}

.filters button.active,
.filters button:hover{
  background:#fff;
  color:#000;
}

.gallery{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr));
  gap:20px;
}
.art{
  height:400px;
  background-size:cover;
  background-position:center;
  border-radius:14px;
  cursor:pointer;
  transition:.4s;
}

.art:hover{
  transform:scale(1.05);
}
/* Lightbox */
.lightbox{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.95);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:10000;
}
.lightbox img{
  max-width:90%;
  max-height:90%;
  transition:.3s;
}
.close,.prev,.next{
  position:absolute;
  color:#fff;
  font-size:30px;
  cursor:pointer;
  user-select:none;
}
.close{top:20px;right:30px;}
.prev{left:30px;}
.next{right:30px;}



.art{
  opacity:0;
  transform:translateY(30px);
  animation:fadeUp .6s ease forwards;
}


@keyframes fadeUp{
  to{opacity:1;transform:none;}
}


.lightbox img{
  pointer-events:none;
}

.lightbox::after{
  content:"© Skeches Gallery";
  position:absolute;
  top:15%;
  right: 50%;
  color:rgba(193, 41, 41, 0.847);
  font-size:14px;
}

@media(max-width:900px){
  .art{
    height: 450px;
  }
}

/*---------End------ArtWork Page Design------

----------------*/

/*---------Start ------Chatbox page Design----------------------------------------------------*/

.wa-chat{
    position:fixed;
    right:20px;
    bottom:20px;
    z-index:9999;
    font-family:Inter,Arial;
}

.wa-icon{
  width:58px;
  height:58px;
  background:#25D366;
  color:#fff;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:26px;
  cursor:pointer;
  box-shadow:0 8px 25px rgba(0,0,0,.35);
}

.wa-popup{
  width:280px;
  background:#fff;
  border-radius:14px;
  box-shadow:0 12px 35px rgba(0,0,0,.4);
  position:absolute;
  bottom:70px;
  right:0;
  display:none;
  overflow:hidden;
}

.wa-header{
  background:#25D366;
  color:#fff;
  padding:14px;
}

.wa-header span{
    display:block;
    font-size:12px;
    opacity:.9;
}
.wa-body{
    padding:14px;
    color:#333;
    font-size:14px;
}
.wa-btn{
  display:block;
  margin:0 14px 14px;
  background:#25D366;
  color:#fff;
  text-align:center;
  padding:12px;
  border-radius:8px;
  text-decoration:none;
  font-size:14px;
}
/*---------End ------Chatbox page Design----------------------------------------------------*/

/*---------Start ------Order page Design----------------------------------------------------*/
    .header1{
      padding:70px 8% 0px;
      text-align:center;
    }
    .header1 h1{
      font-family:'Playfair Display',serif;
      font-size:46px;
      margin-bottom:30px;
    }
    .sub1{color:#b5b5b5;
      max-width:620px;
      margin:auto;
    }

.order-wrap{
      padding:70px 8% 100px;
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:60px;
    }

    .info{
      background:#161616;
      border:1px solid #242424;
      border-radius:18px;
      padding:36px;
    }

    .info h3{
      font-family:'Playfair Display',serif;
      margin-bottom:16px;
    }
        .info p{
          color:#cfcfcf;
          font-size:15px;
          margin-bottom:10px;
        }
        .form{
      background:#161616;
      border:1px solid #242424;
      border-radius:18px;
      padding:36px;
    }
.form h3{
      font-family:'Playfair Display',serif;
      margin-bottom:20px;
    }
.field{margin-bottom:18px}
    .field label{display:block;font-size:13px;color:#bdbdbd;margin-bottom:6px}
    .field input,.field select,.field textarea{
      width:100%;
      padding:12px;
      background:#0e0e0e;
      border:1px solid #2a2a2a;
      color:#fff;
      border-radius:8px;
      font-size:14px
    }

    
        textarea{
          resize:none;
          height:120px;
        }

        @media(max-width:900px){
      .order-wrap{
        grid-template-columns:1fr;
      }
      h1{font-size:36px;
      }
    }
/*---------End ------Order page Design----------------------------------------------------*/
/*---------



    footer{
      border-top:1px solid #222;
      padding:30px 8%;
      text-align:center;
      color:#777;
      font-size:14px
    }

    
  </style>

.

--------------*/