:root{
  --black:#121212;
  --green:#00B073;
  --primary:#6EC1E4;
  --secondary:#54595F;
  --text:#545A62;
  --accent:#61CE70;
  --wa:#075E54;
  --border:#D0D2DC;
  --container: 1140px;
  --pad: 20px;
}
@font-face {
  font-family: 'Graphik';
  src: url('../fonts/Graphik-Regular-Web.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Graphik';
  src: url('../fonts/Graphik-Regular-Web.woff') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
*{box-sizing:border-box}
body{margin:0;
  font-family: "Graphik", sans-serif;
  color:var(--black);background:#fff}
a{color:inherit}
.container{max-width:var(--container);margin:0 auto;padding:0 2%;display: flex;flex-direction: column;gap: 20px;}
#whats-header{
  border:1px solid var(--wa);
  color: var(--wa);
}
.btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    border-radius: 999px;
    padding: 14px 32px;
    font-weight: 500;
    font-size: 18px;
    line-height: 24px;
    border: 1px solid transparent;
    width: fit-content;
}
.btn img{width:24px;height:24px;display:block}
.btn--wa-outline{background:#fff;color:var(--green)}
.btn--wa-solid{background:var(--wa);color:#fff;width: fit-content;}
.btn--pill{padding:18px 25px}

.hero{background:url("../img/hero-bg.png") bottom center/cover no-repeat;padding:2% 0% 20% 0%;}
.hero__top{display:flex;justify-content:space-between;align-items:center;padding-bottom:8%;}
.hero__logo img{width:110px;height:auto}
.hero__content{
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.hero__content h1{margin:0;font-size:48px;line-height:60px;font-weight:500}
.hero__content p {
    margin: 0;
    font-size: 18px;
    line-height: 26px;
    max-width: 55%;
}

.section{padding:8% 2%;}
.section--tight{padding:0 2%;}
.split{display:flex;gap:5%;align-items:center}
.split > *{flex:1}
.smallcaps{font-size:18px;font-weight:600;text-transform:uppercase;color:var(--green);margin:0 0 10px}
.h2{font-size:40px;line-height:52px;font-weight:400;margin:0 0 12px;color:var(--black)}
.p{font-size:18px;line-height:26px;color:var(--text);margin:0;max-width: 85%;}
img.rounded{max-width:100%;height:auto;width:100%}

.stats{padding:0 5%}
.stats__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:32px}
.statmain{
  padding: 48px 0;
}
.statpad{
  border-bottom: 1.25px solid var(--border);
}
.stat,.statborder{text-align:center;}
.stat:nth-child(1),.stat:nth-child(2){border-right:1.25px solid var(--border)}
.stat:nth-child(3){border-right:none}
.stat:nth-child(4),.stat:nth-child(5){border-right:1.25px solid var(--border);border-bottom:none;padding-top:48px}
.stat:nth-child(6){border-bottom:none;padding-top:48px}
.stat__num{display:flex;justify-content:center;gap:4px;font-size:24px;line-height:48px}
.stat__num strong{font-size: 80px;line-height: 80px;font-weight:400}
.stat__num span{color:var(--green);font-size:35px;line-height:35px}
.stat__label{font-size:24px;line-height:30px;margin-top:6px}
.section--tight h2{text-align: center;}
.section--tight p{text-align: center;max-width: 70%;margin: 0 auto;}

.partner{padding:0;}
.partner__center{text-align:center}
.partner__cards{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin-top:28px}
.card{display:flex;flex-direction:column;gap:16px;align-items:center}
.card img{max-width:85%;height:auto;width: 100%;margin-bottom: 25px;}
.card h3{margin:0;font-size:28px;line-height:36px;font-weight:600;text-align:center}
.card p{margin:0;font-size:18px;line-height:30px;color:var(--text);text-align:center;max-width:85%}

.toppicks{
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.toppicks h2{
  margin: 0;
}

.contact-wrap{padding:0 2%;}
.contact{
    background: var(--wa) url(../img/contact.svg) top right / contain no-repeat;
    border-radius: 32px;
    padding: 10% 5%;
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.contact h2{margin:0 0 12px;font-size:40px;line-height:40px;font-weight:400;color:#fff}
.contact p{margin:0 0 10px;font-size:18px;line-height:26px;color:#fff;max-width:45%}

.news {
  padding: 8% 10%;
}

.news h2 {
  text-align: center;
  margin: 0 0 24px;
  font-size: 32px;
  font-weight: 500;
}

.carousel {
  position: relative;
  overflow: hidden;
  touch-action: pan-y;
}
.carousel,
.carousel * {
  -webkit-user-select: none;
  user-select: none;
}

.carousel__track {
  display: flex;
  gap: 30px;
  padding-bottom: 10px;
  will-change: transform;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}

.carousel.is-dragging .carousel__track {
  cursor: grabbing;
}

.carousel__slide {
  flex: 0 0 calc((100% - 60px) / 3);
  background: #fff;
  border-radius: 12px;
  text-decoration: none;
  display: block;
	-webkit-user-drag: none;
}
.carousel__slide img {
  -webkit-user-drag: none;
  user-drag: none;
  draggable: false;
}
.carousel.is-dragging,
.carousel.is-dragging * {
  cursor: grabbing !important;
}
.carousel__slide img,
.carousel__slide h3,
.carousel__slide p {
  pointer-events: none;
}

.carousel__slide img {
  -webkit-user-drag: none;
  user-drag: none;
}

.news-card img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 10px;
}

.news-card h3 {
  font-size: 1em;
  font-weight: 600;
  margin: 10px;
  line-height: 1.5;
}

.news-card p {
  font-size: 16px;
  line-height: 24px;
  color: var(--text);
  margin: 10px;
}

.dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
}

.dots button {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: none;
  background: #d9d9d9;
  cursor: pointer;
}

.dots button.active {
  background: #000;
}
.location{background:url("https://namou.ae/wp-content/uploads/2025/10/map-background.svg") center/cover no-repeat;padding:5% 10%}
.location__box{display:flex;gap:48px;align-items:center}
.location__text h2{margin:0 0 10px;font-size:40px;font-weight:500;color:#fff}
.location__text p{margin:0;font-size:18px;line-height:32px;color:#fff}
.location__text .btn{
    margin-top: 20px;
    padding: 18px 25px;
    color: #000;
    gap: 70px;
    line-height: 20px;
}
.location iframe{width:100%;height:300px;border:0;border-radius:5px}
.location__text{
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.sellsection{
  flex-direction:row-reverse
}
.partnettext{
  max-width:70%;margin:0 auto
}
.footer{padding:56px 0 42px;text-align:center}
.footer img{width:130px;height:auto;align-self: center;}
.footer p{margin:16px 0 0;font-size:16px;line-height:24px;color:var(--text)}


@media (max-width: 400px){
  .hero{background:url("https://namou.ae/wp-content/uploads/2025/11/Background-Image.jpg") bottom center/auto no-repeat;}
}

@media (max-width: 700px){
  .container {padding:0;}
  .hero__top{padding-bottom:3%;}
  .hero{padding:20px 16px 330px 16px;}
  .hero__logo img{width:88px}
  .btn{font-size:14px;padding:10px 12px;line-height: 14px;}
  .hero__content h1{font-size:31px;line-height:44px;letter-spacing: -0.72px;margin: 0;}
  .hero__content p{max-width:100%;font-size:16px;line-height:24px;margin-top:10px;margin-bottom:.9rem;}
  .section{padding:60px 16px 72px}
  .section--tight{padding:0 16px;}
  .split{flex-direction:column;gap: 40px;}
  .h2{font-size:28px;line-height:34px}
  .stats{padding:0 16px}
  .stats__grid{grid-template-columns:repeat(2,1fr)}
  .stat{padding-bottom:2px}
  .stat:nth-child(2){border-right:none}
  .stat:nth-child(3){border-right:1px solid var(--border)}
  .stat:nth-child(4){border-right:none}
  .stat:nth-child(5){border-right:1px solid var(--border)}
  .partner{padding:0 20px 60px}
  .partner__cards{grid-template-columns:1fr}
  .contact-wrap{padding:0 16px 60px}
  .contact{padding:56px 20px 160px;background:var(--wa) url("https://namou.ae/wp-content/uploads/2025/10/image.svg") bottom center/auto no-repeat}
  .contact p{max-width:100%;font-size: 16px;line-height: 26px;}
  .news {
    padding: 0 16px 32px;
  }
  .carousel__track {
    gap: 16px;
  }
  .carousel__slide {
    flex: 0 0 100%;
  }
  .location{padding:56px 16px 24px}
  .location__box{flex-direction:column;align-items: flex-start;}
  .stat__num strong{font-size: 48px;line-height: 48px;font-weight:400}
  .btn img {width: 22px;height: 22px;}
  .hero__content {padding-top: 7%;}
  .hero__content {gap: 0px;}
  #whats-hero{padding: 14px 32px;font-size: 16px;}
  .smallcaps{font-size: 16px;}
  .p {font-size: 16px;max-width: 100%;}
  .section--tight h2{text-align: left;}
  .section--tight p{text-align: left;max-width: 100%;}
  .statmain {padding: 20px 0;}
  .stat__label {font-size: 18px;line-height: 18px;margin-top: 25px;}
  .statpad2{border: none !important;}
  .statright{border-right: 1.25px solid var(--border);padding-bottom: 2px;}
  .statbot{border-bottom: 1.25px solid var(--border);}
  .card h3 {font-size: 22px;}
  .card {gap: 8px;}
  .card p {font-size: 16px;line-height: 25px;max-width: 100%;}
  .card img {margin-bottom: 10px;}
  .card img {max-width: 75%;}
  .toppicks .btn, .contact .btn{padding: 14px 32px !important;font-size: 16px;}
  .location__text h2 {font-size: 32px;}
  .location__text p {font-size: 16px;}
  .location__text .btn {margin-top: 5px;width: 100%;justify-content: space-between;font-size: 18px;}
  .location__text{width: 100%;}
  .location__map{width: 100%;}
  .footer p {font-size: 14px;}
  .footer img {width: 110px;align-self: center;}
}