@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;600&display=swap');


* {
  box-sizing: border-box;
}


html {
  scroll-behavior: smooth;
}



body {

  margin:0;

  direction:rtl;

  background:
    radial-gradient(circle at top, rgba(255,255,255,.75), rgba(245,241,232,.95)),
    #f3efe6;

  color:#162033;

  font-family:"Vazirmatn", Tahoma, Arial, sans-serif;

}



/* =================================
   HEADER
================================= */


.site-header {

  width:100%;

  padding:28px 55px 24px;

  display:flex;

  align-items:center;

  justify-content:space-between;

}



.brand {

  font-family:Georgia,"Times New Roman",serif;

  font-size:18px;

  letter-spacing:2.5px;

  color:#162033;

  direction:ltr;

}



.main-nav {

  display:flex;

  align-items:center;

  gap:30px;

}



.main-nav a {

  text-decoration:none;

  color:#162033;

  font-family:"Vazirmatn",Tahoma,Arial,sans-serif;

  font-size:14px;

  letter-spacing:0;

}



.main-nav a:hover {

  color:#b08a45;

}



.nav-divider {

  width:1px;

  height:18px;

  background:rgba(176,138,69,.65);

}



/* =================================
   GOLD DIVIDER
================================= */


.gold-divider {

  width:100%;

  height:1px;

  background:#b08a45;

  opacity:.65;

}



/* =================================
   ABOUT PAGE
================================= */


.about-page {

  width:1050px;

  max-width:88%;

  margin:0 auto;

  padding:90px 0 110px;

}



/* =================================
   INTRO
================================= */


.about-intro {

 text-align:center;

}



.about-intro h1 {

  margin:0;

  font-family:Georgia,"Times New Roman",serif;

  font-size:31px;

  font-weight:400;

  letter-spacing:0;

}



.subtitle {

  margin:18px 0 0;

  font-family:"Vazirmatn",Tahoma,Arial,sans-serif;

  font-size:18px;

  color:#555;

}



/* =================================
   ORNAMENT
================================= */


.ornament {

  width:180px;

  margin:28px auto 55px;

  display:flex;

  align-items:center;

  justify-content:center;

  gap:12px;

}



.ornament span {

  width:65px;

  height:1px;

  background:#b08a45;

}



.ornament i {

  font-size:9px;

  font-style:normal;

  color:#b08a45;

}



/* =================================
   TEXT
================================= */


.about-text {

  max-width:820px;

  margin:0 auto;

  text-align:center;

}



.about-text p {

  margin:0 0 25px;

  font-family:"Vazirmatn",Tahoma,Arial,sans-serif;

  font-size:17px;

  line-height:2.1;

  color:#343434;

}



/* =================================
   THREE PILLARS
================================= */


.about-pillars {

  margin-top:75px;

  display:grid;

  grid-template-columns:repeat(3,1fr);

  gap:55px;

}



.pillar {

  text-align:center;

  padding:10px 20px;

}



.pillar h2 {

  margin:0;

  font-family:Georgia,"Times New Roman",serif;

  font-size:20px;

  font-weight:400;

}



.pillar-line {

  width:35px;

  height:1px;

  margin:14px auto 16px;

  background:#b08a45;

}



.pillar p {

  margin:0;

  font-family:"Vazirmatn",Tahoma,Arial,sans-serif;

  font-size:14px;

  line-height:2;

  color:#555;

}



/* =================================
   CLOSING
================================= */


.about-closing {

  margin-top:90px;

  text-align:center;

}



.closing-line {

  width:70px;

  height:1px;

  margin:0 auto 28px;

  background:#b08a45;

}



.about-closing p {

  margin:0;

  font-family:"Vazirmatn",Tahoma,Arial,sans-serif;

  font-size:18px;

  line-height:2;

  color:#343434;

}



/* =================================
   MOBILE
================================= */


@media(max-width:800px){


.site-header{

 padding:22px 25px;

 flex-direction:column;

 gap:18px;

}


.main-nav{

 gap:18px;

 flex-wrap:wrap;

 justify-content:center;

}


.main-nav a{

 font-size:13px;

}


.about-page{

 max-width:88%;

 padding-top:65px;

}


.about-intro h1{

 font-size:28px;

}


.subtitle{

 font-size:15px;

}


.about-text p{

 font-size:15px;

}


.about-pillars{

 grid-template-columns:1fr;

 gap:35px;

}


.about-closing{

 margin-top:65px;

}


}