@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@200..1000&display=swap');
li{list-style: none;}
 a{text-decoration: none;
color: white;
font-size: 1rem;
} 
a:hover{ color: #F4C542;}  
header{position: relative;
padding: 0 2rem;
}
.navbar{width: 100%;
height: 60px;
max-width: 1200px;
margin: 0 auto;
display: flex;
align-items: center;
justify-content: space-between;
background: rgba(0, 0, 0, 0.8);border-radius: 10px; }
.navbar .logo a{font-size: 4rem;
}
.navbar .links{display: flex;
 gap:2rem;}
 .navbar .toggle-btn{color: white;
font-size: 3rem;
cursor: pointer;
display: none;
}
.navbar .links a{margin: 0 30px;}
.start{background-color:#F4C542 ;
color: white;
border: none;
outline: none;
border-radius: 20px;
cursor: pointer;
font-weight: bold;
padding: 3px 5px;}
.start:hover{scale: 1.05;
color: white;}
.start:active{scale: .95;}
/*dropdown menu*/
.drop-menu{
   display: none;
   position: absolute;
   right: 2rem;
   top: 60px;
   height: 0;
   width: 300px;
   background: rgba(255, 255, 255, 0.1);
   backdrop-filter:blur(15px);
   border-radius: 10px;
   overflow:hidden ;
   transition: height .2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.drop-menu li {
   padding: 0.7rem;
   display: flex;
   align-items: center;
   justify-content: center;
}
.drop-menu.open{
   height: 240px;
}
.drop-menu .start{
   width: 100%;
display: flex;
justify-content: center;
}


:root{
  --bg:              #0d1224;   
  --bg-nav:          #0a0a0d;   
  --card-bg:         #141a30; 
  --border-subtle:   #2b3050;   
  --text-main:       #f4f4f6;  
  --text-muted:      #b7bcd0;   
  --accent:          #f2c14e;
  --accent-text:     #1a1406;
  --font-main:'Cairo', 'Tajawal', sans-serif;

  --radius-btn:10px;
  --radius-pill:999px;
  --container-w:1180px;
  --reading-w:640px;
}

*{ box-sizing: border-box; }

html,body{
  margin:0;
  padding:0;
  background: var(--bg);
  color: var(--text-main);
  font-family: var(--font-main);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* ============ محتوى الصفحة ============ */
main{
  max-width: var(--container-w);
  margin: 0 auto;
  padding: clamp(60px, 10vw, 120px) clamp(20px, 6vw, 60px) 40px;
}

.about-header{
  max-width: var(--reading-w);
  margin-bottom: 56px;
}

.about-header h1{
  font-size: clamp(30px, 4vw, 42px);
  font-weight: 800;
  margin: 0 0 6px;
  line-height: 1.3;
}

.about-header .underline-word{
  position: relative;
  color: var(--accent);
  display: inline-block;
}
.about-header .underline-word::after{
  content:"";
  position:absolute;
  right:2%;
  bottom:-6px;
  width:96%;
  height:6px;
  background: var(--accent);
  opacity:0.35;
  border-radius: 4px;
  transform: rotate(-1deg);
}

.about-body{
  max-width: var(--reading-w);
}

.about-body p{
  font-size: 17px;
  line-height: 2;
  color: var(--text-muted);
  margin: 0 0 22px;
}

.about-body p strong{
  color: var(--text-main);
  font-weight: 700;
}

.about-body p.tight{
  margin-bottom: 14px;
}

.closing-line{
  margin-top: 40px;
  font-size: 18px;
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.9;
  max-width: var(--reading-w);
}

.signoff{
  margin-top: 34px;
  color: var(--text-muted);
  font-size: 15px;
}
.tiny-mark{
  width: 46px;
  height: 3px;
  background: var(--accent);
  border-radius: 3px;
  margin: 8px 0 28px;
  transform: rotate(-2deg);
}
/* ============ Mobile ============ */
@media (max-width: 600px){
  main{
    padding-top: 48px;
  }
  .about-header{
    margin-bottom: 36px;
  }
  .about-header h1{
    font-size: 26px;
  }
  .about-body p{
    font-size: 15.5px;
    line-height: 1.9;
  }
  .closing-line{
    font-size: 16px;
  }
  .footer-inner{
    flex-direction: column;
    align-items: flex-start;
  }
}
@media (max-width: 992px) {
    .navbar .links,
    .navbar .start{
        display: none;
    }
    .navbar .toggle-btn{
        display: block;
    }
    .drop-menu{display: block;}
}
@media (max-width: 576px){
   .drop-menu{
      left: 2rem;
      width: unset;
   }
}