/* =========================
   GLOBAL
========================= */

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html{
  scroll-behavior: smooth;
}

body{

  font-family: 'Open Sans', sans-serif;

  background: #f5f5f5;

  color: #222;

  line-height: 1.8;

  overflow-x: hidden;
}


/* =========================
   CONTAINER
========================= */

.container{

  width: 100%;

  max-width: 950px;

  margin: 40px auto;

  background: #fff;

  border-radius: 20px;

  padding: 40px;

  box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}


/* =========================
   BACK BUTTON
========================= */

.back-btn{

  margin-bottom: 25px;
}

.back-btn a{

  display: inline-block;

  text-decoration: none;

  color: #fff;

  background: #e38b4f;

  padding: 12px 22px;

  border-radius: 10px;

  font-size: 15px;

  font-weight: 600;

  transition: 0.3s ease;
}

.back-btn a:hover{

  background: #cc7337;

  transform: translateY(-2px);
}


/* =========================
   LOGO
========================= */

.logo{

  text-align: center;

  margin-bottom: 20px;
}

.logo img{

  width: 160px;

  max-width: 100%;

  object-fit: contain;
}


/* =========================
   HEADING
========================= */

h1{

  text-align: center;

  font-size: 42px;

  font-weight: 700;

  margin-bottom: 10px;

  color: #111;
}

.date{

  text-align: center;

  color: #777;

  font-size: 15px;

  margin-bottom: 35px;
}


/* =========================
   SECTION HEADING
========================= */

h2{

  font-size: 26px;

  margin-top: 35px;

  margin-bottom: 15px;

  color: #e38b4f;

  font-weight: 700;
}


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

p{

  font-size: 17px;

  color: #444;

  margin-bottom: 18px;
}


/* =========================
   LIST
========================= */

ul{

  padding-left: 25px;

  margin-bottom: 20px;
}

ul li{

  margin-bottom: 12px;

  font-size: 17px;

  color: #444;
}


/* =========================
   LINKS
========================= */

a{

  color: #e38b4f;

  text-decoration: none;
}

a:hover{

  text-decoration: underline;
}


/* =========================
   TABLET RESPONSIVE
========================= */

@media(max-width: 992px){

  .container{

    margin: 25px;

    padding: 30px;
  }

  h1{

    font-size: 36px;
  }

  h2{

    font-size: 24px;
  }

  p,
  ul li{

    font-size: 16px;
  }

}


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

@media(max-width: 768px){

  .container{

    margin: 15px;

    padding: 22px;

    border-radius: 15px;
  }

  h1{

    font-size: 30px;

    line-height: 1.3;
  }

  h2{

    font-size: 22px;

    line-height: 1.4;
  }

  p,
  ul li{

    font-size: 15px;

    line-height: 1.7;
  }

  .logo img{

    width: 130px;
  }

  .back-btn a{

    width: 100%;

    text-align: center;

    padding: 12px;
  }

}


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

@media(max-width: 480px){

  .container{

    padding: 18px;
  }

  h1{

    font-size: 26px;
  }

  h2{

    font-size: 20px;
  }

  p,
  ul li{

    font-size: 14px;
  }

  .date{

    font-size: 13px;
  }

}


/* =========================
   SCROLLBAR
========================= */

::-webkit-scrollbar{

  width: 8px;
}

::-webkit-scrollbar-thumb{

  background: #e38b4f;

  border-radius: 20px;
}

::-webkit-scrollbar-track{

  background: #f1f1f1;
}