/*------------------------------------------------------------------
Theme Name: UNISCO - Responsive Bootstrap Landing Page
Version: 1.0
Author:
-------------------------------------------------------------------*/
/*------------------------------------------------------------------
[TABLE OF CONTENTS]

    1. GLOBAL STYLES
    2. HEADER
    3. ABOUT
    4. OUR COURSES
    5. EVENTS
    6. DETAILED CHART
    7. OUR BLOG
    8. GALLERY
    9. FOOTER

    10. ABOUT HEADER
    11. ABOUT WELCOME
    12. ABOUT TESTIMONIAL
    13. ABOUT OUR TEACHERS

    14. ADMISSION COURCES
    15. ADMISSION DETAILS COURCES

    16. ADMISSION FORM RULES

    17. CAMPUS

    18. RESEARCH

    19. BLOG
    20. EVENTS
    21. SHORTCODES
    22. CONTACT US

    -------------------------------------------------------------------*/
/* ==========================================================================
   Font
   ========================================================================== */
/* ==========================================================================
   Color
   ========================================================================== */
/* ==============================================================
   NAV
   ============================================================== */
.nav-menu {
  position: absolute;
  z-index: 1;
  margin: 0 auto;
  left: 0;
  right: 0;
  top: 0; }

.nav-logo {
  margin: 0 !important; }

.responsive-logo {
  display: none; }

.icon-menu {
  color: #15803d; }

.btn-default {
  text-transform: uppercase;
  color: #15803d;
  background: none;
  border: 3px solid #15803d;
  font-size: 18px;
  padding: 16px 36px;
  border-radius: 0; }

@media (min-width: 767px) {
  .btn + .btn {
    margin-left: 22px; } }

.btn-default:hover {
  color: #fff;
  background: #15803d;
  border: 3px solid #15803d; }

.btn:focus {
  outline: none;
  -webkit-box-shadow: none;
  box-shadow: none;
  color: #fff;
  background: #15803d; }

.dropdown-menu {
  min-width: 14rem;
  border-radius: 0;
  border: none; }

.dropdown-item {
  color: #2d2d2d;
  padding: 5px 1.5rem; }

.dropdown-item.active,
.dropdown-item:active {
  background-color: #15803d; }

.dropdown-menu1 {
  left: -225px;
  top: -6px !important; }

.dropdown-item:hover {
  color: #15803d;
  -webkit-transition: 0.2s;
  -o-transition: 0.2s;
  transition: 0.2s; }

.dropdown-item.active:hover,
.dropdown-item.active:focus,
.dropdown-item.active:active,
.dropdown-item:active {
  color: #FFF; }

.nav-toggle_icon {
  color: #15803d; }

.navbar2 {
  padding-left: 0;
  padding-right: 0; }

.navbar-brand {
  margin: 0; }

.nav-brand2 h2 {
  margin: 0; }

.navbar-nav > li {
  margin: 85px 10px;
  text-align: center; }

.navbar-default .navbar-nav > li > a {
  font-size: 19px;
  color: #fff; }

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:focus,
.navbar-default .navbar-nav > .active > a:hover {
  background: none;
  color: #15803d; }

.navbar-default .navbar-nav > li > a:focus,
.navbar-default .navbar-nav > li > a:hover {
  color: #15803d; }

.nav .open > a,
.nav .open > a:focus,
.nav .open > a:hover {
  background: none; }

.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:focus,
.navbar-default .navbar-nav > .open > a:hover {
  background: none;
  color: #15803d; }

.bg-faded {
  background: none; }

.navbar-light .navbar-nav .nav-link:focus,
.navbar-light .navbar-nav .nav-link:hover {
  color: #15803d;          /* hijau nuansa NU */
  box-shadow: none;
}


.navbar-light .navbar-nav .active > .nav-link,
.navbar-light .navbar-nav .nav-link.active,
.navbar-light .navbar-nav .nav-link.open,
.navbar-light .navbar-nav .open > .nav-link {
  color: #15803d;
}


.navbar-light .navbar-nav .nav-link {
  color: #0f172a;          /* teks gelap, kelihatan di bg putih */
  font-size: 14px;
  font-weight: 500;
}


.navbar-light .navbar-toggler {
  border: 1px solid #15803d;
  z-index: 999;
  cursor: pointer;
  outline: none;
  padding: 7px 14px; }

  .navbar-light2 .navbar-nav .nav-link:focus,
  .navbar-light2 .navbar-nav .nav-link:hover {
    color: #15803d;
    -webkit-transition: 0.2s;
    -o-transition: 0.2s;
    transition: 0.2s; }

  .navbar-light2 .navbar-nav .active > .nav-link,
  .navbar-light2 .navbar-nav .nav-link.active,
  .navbar-light2 .navbar-nav .nav-link.open,
  .navbar-light2 .navbar-nav .open > .nav-link {
    color: #15803d; }

  .navbar-light2 .navbar-nav .nav-link {
    color: #fff;
    font-size: 19px; }

  .navbar-light2 .navbar-toggler {
    border: 1px solid #15803d;
    z-index: 999;
    cursor: pointer;
    outline: none;
    padding: 7px 14px; }

.fa-common {
  font-weight: 700; }

@media (max-width: 1200px) {
  .navbar-nav > li {
    margin: 74px 10px 74px 10px; } }

@media (max-width: 991px) {
  .navbar-nav > li {
    margin: 0px 10px 0px 10px; }
  .responsive-logo {
    display: block; }
  .navbar-brand {
    display: none; }
  .nav-brand2 {
    display: block; }
  .navbar2 {
    margin: 12px 0 !important; }
  .bg-faded {
    background-color: #fafafa; }
  .navbar {
    padding: 0;
    margin: -113px 0 0 0; }
  .navbar-nav {
    padding: 10px 10px 10px 10px; }
  .navbar-light .navbar-toggler {
    margin: 28px 6px; }
  .navbar-light .navbar-toggler2 {
    margin: 0 !important; }
  .navbar-light .navbar-nav .nav-link {
  color: #0f172a;          /* teks gelap, kelihatan di bg putih */
  font-size: 14px;
  font-weight: 500;
}

  .dropdown .dropdown-menu {
    background-color: #fff;
    border: 1px solid #15803d; }
  .navbar-toggleable-md .navbar-nav .dropdown-menu {
    text-align: center; } }

@media (min-width: 991px) {
  .dropdown .dropdown-menu {
    display: block;
    visibility: hidden;
    opacity: 0;
    transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -webkit-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    -ms-transition: all 0.2s ease; }
  .dropdown:hover > .dropdown-menu {
    visibility: visible;
    opacity: 1;
    border: 1px solid #ccc;
    top: 45px; }
  .dropdown-submenu:hover .dropdown-menu1 {
    visibility: visible;
    opacity: 1; }
  .navbar-toggleable-md .navbar-collapse {
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center; }
  .navbar-toggleable-md .navbar-nav {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center; } }

/* ==============================================================
   GLOBAL STYLES
   ============================================================== */
html {
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased; }

body {
  font-family: "Lora", serif; }

h1 {
  font-size: 54px; }

h2 {
  font-size: 35px; }

h3 {
  font-size: 24px; }

h4 {
  font-size: 20px; }

p {
  font-size: 17px; }

a {
  color: #15803d;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease; }
  a:hover {
    text-decoration: none;
    color: #2d2d2d; }

.btn {
  font-family: "Lora", serif;
  cursor: pointer; }

/* ==============================================================
   HEADER
   ============================================================== */
.slider_img {
  width: 100%;
  background: #000; }
  .slider_img img {
    min-width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -o-object-position: 50% 50%;
    object-position: 50% 50%; }
    @media (max-width: 500px) {
      .slider_img img {
        max-height: 730px; } }

.carousel-caption {
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  top: 50%; }
  @media (min-width: 992px) {
    .carousel-caption {
      -webkit-transform: translateY(-57%);
      -ms-transform: translateY(-57%);
      transform: translateY(-57%);
      top: 57%; }
      .layout_two .carousel-caption {
        -webkit-transform: translateY(-50%);
        -ms-transform: translateY(-50%);
        transform: translateY(-50%);
        top: 50%; } }
  @media (max-width: 500px) {
    .carousel-caption {
      top: 45%; } }

.slider_title h1 {
  text-align: center;
  color: #fff;
  margin-bottom: 40px;
  font-weight: 700; }
  @media (max-width: 576px) {
    .slider_title h1 {
      margin-bottom: 18px; } }

.slider_title h4 {
  color: #fff;
  text-align: center;
  line-height: 1.8; }

.slider-btn {
  text-align: center;
  margin: 42px 0 0; }

.carousel-indicators .active {
  background: #15803d; }

.fa-slider {
  padding: 14px 14px;
  border: 2px solid #fff;
  font-size: 29px;
  border-radius: 2px; }

@media (max-width: 768px) {
  .slider_title h1 {
    font-size: 42px; }
  .slider_title h4 {
    font-size: 19px;
    line-height: 1.5; }
  .btn-default {
    width: 50%;
    margin-bottom: 10px;
    font-size: 13px; } }

@media (max-width: 480px) {
  .slider_title {
    margin: 0 0 80px; }
    .slider_title h1 {
      font-size: 32px; }
    .slider_title h4 {
      font-size: 18px;
      line-height: 1.5; }
  .btn-default {
    width: 100%;
    margin-bottom: 10px;
    font-size: 18px; }
  .fa-slider {
    border: none;
    padding: 0; } }

/* ==============================================================
   ABOUT
   ============================================================== */
.about {
  padding: 97px 0 56px;
  background: #fff; }
  .about h2 {
    text-align: center;
    color: #2d2d2d;
    font-weight: 700; }
  .about p {
    text-align: center;
    color: #2d2d2d;
    line-height: 1.8;
    margin: 20px 0; }
  .about img {
    margin: 0 auto;
    display: block; }

/* ==============================================================
   OUR COURSES
   ============================================================== */
.our_courses {
  background: #f2f2f2;
  padding: 97px 0; }
  .our_courses h2 {
    font-weight: 700;
    margin: 0 0 28px; }
  .our_courses .courses_box a {
    text-decoration: none;
    color: #2d2d2d; }
  .our_courses .courses_box {
    position: relative;
    background: #fff;
    -webkit-box-shadow: 0px 10px 90px -6px #c7c5c7;
    -moz-box-shadow: 0px 10px 90px -6px #c7c5c7;
    box-shadow: 0px 10px 90px -6px #c7c5c7;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    min-height: 340px; }
    .our_courses .courses_box img {
      margin: 0;
      width: 100%; }
    .our_courses .courses_box p {
      margin: 0; }
    .our_courses .courses_box h3 {
      font-weight: 600; }
    .our_courses .courses_box:hover {
      -webkit-box-shadow: 0px 40px 90px -6px #c7c5c7;
      box-shadow: 0px 40px 90px -6px #c7c5c7;
      margin-top: -5px; }

@-webkit-keyframes SlideIn {
  100% {
    -webkit-transform: translateX(0px);
    transform: translateX(0px);
    opacity: 1; } }

@keyframes SlideIn {
  100% {
    -webkit-transform: translateX(0px);
    transform: translateX(0px);
    opacity: 1; } }

@-webkit-keyframes SlideWidth {
  100% {
    width: 550px; } }

@keyframes SlideWidth {
  100% {
    width: 550px; } }

.courses_box:hover .courses_box-img {
  opacity: 1; }

.courses_box:hover .courses_icon {
  -webkit-transform: rotate(44deg);
  -ms-transform: rotate(44deg);
  transform: rotate(44deg); }

.courses_box:hover .course-link:first-child {
  -webkit-animation: SlideIn 0.5s;
  animation: SlideIn 0.5s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s; }
  .courses_box:hover .course-link:first-child span:after {
    -webkit-animation: SlideWidth 0.8s;
    animation: SlideWidth 0.8s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-delay: 0.6s;
    animation-delay: 0.6s; }

.courses_box:hover .course-link:nth-child(2) {
  -webkit-animation: SlideIn 0.5s;
  animation: SlideIn 0.5s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
  -webkit-animation-delay: 0.6s;
  animation-delay: 0.6s; }
  .courses_box:hover .course-link:nth-child(2) span:after {
    -webkit-animation: SlideWidth 0.8s;
    animation: SlideWidth 0.8s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-delay: 0.9s;
    animation-delay: 0.9s; }

.course-img-wrap {
  position: relative; }

.course-box-content {
  display: block;
  padding: 30px 20px; }

.courses_icon {
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
  position: relative;
  height: 43px;
  right: 0;
  width: 43px;
  background: #665c7c;
  border-radius: 50%;
  padding: 8px 11px 8px 13px;
  margin: -23px 10px 0 0;
  float: right;
  z-index: 3; }
  .courses_icon a {
    color: #fff; }

.course-link {
  display: block;
  padding-bottom: 6px;
  -webkit-transform: translateX(-50px);
  -ms-transform: translateX(-50px);
  transform: translateX(-50px);
  opacity: 0;
  margin-left: 30px; }
  .course-link span {
    position: relative;
    display: inline-block; }

.course-link span:after {
  content: "";
  position: absolute;
  left: 50%;
  top: 10px;
  width: 0;
  right: 0;
  height: 1px;
  background: #FFF;
  left: 100%;
  margin-left: 0; }

.courses-link-wrap {
  overflow: hidden;
  position: absolute;
  top: 50%;
  width: 100%;
  right: 15px;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%); }

.courses_box-img {
  -webkit-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
  opacity: 0;
  background: rgba(203, 181, 139, 0.82);
  width: 100%;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  padding-right: 30px;
  z-index: 2; }
  .courses_box-img a :hover {
    opacity: 0.8; }
  .courses_box-img a span {
    color: #fff;
    font-size: 15px;
    text-transform: uppercase;
    font-weight: 500;
    padding-right: 10px; }

.btn-courses {
  font-size: 15px;
  font-weight: 700; }

.rotate {
  -moz-transform: rotate(43deg);
  -ms-transform: rotate(43deg);
  -webkit-transform: rotate(43deg);
  transform: rotate(43deg); }

.icon-rotate {
  -moz-transition-duration: 0.4s;
  -o-transition-duration: 0.4s;
  -webkit-transition-duration: 0.4s;
  transition-duration: 0.4s;
  display: inline-block; }

/* ==============================================================
   EVENTS
   ============================================================== */
.event {
  padding: 97px 0;
  background: #fff; }
  .event h2 {
    font-weight: 600;
    margin: 0 0 28px; }

.event-img {
  position: relative;
  -webkit-box-shadow: 0px 25px 90px 3px #c7c5c7;
  -moz-box-shadow: 0px 25px 90px 3px #c7c5c7;
  box-shadow: 0px 25px 90px 3px #c7c5c7;
  border-radius: 5px; }
  @media (max-width: 991px) {
    .event-img {
      margin-bottom: 50px; } }
  .event-img img {
    width: 100%;
    border-radius: 5px; }

.event-img_date {
  position: absolute;
  top: 28px;
  left: 48px;
  background: #15803d;
  border-radius: 2px;
  padding: 8px 12px;
  color: #fff;
  font-size: 13px; }
  @media (max-width: 575px) {
    .event-img_date {
      display: none; } }

.event-img_title {
  position: absolute;
  bottom: 0;
  background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, black 100%);
  background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, black 100%);
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), to(black));
  background: -o-linear-gradient(top, rgba(255, 255, 255, 0) 0%, black 100%);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, black 100%);
  padding: 85px 0 20px 0;
  border-radius: 5px; }
  .event-img_title h3 {
    color: #fff;
    padding-left: 48px;
    position: relative; }
    @media (max-width: 575px) {
      .event-img_title h3 {
        padding-left: 20px; } }
  .event-img_title p {
    color: #e3e3e3;
    font-size: 17px;
    padding: 16px 48px 0 48px; }
    @media (max-width: 575px) {
      .event-img_title p {
        padding: 15px 20px; } }
  @media (max-width: 575px) {
    .event-img_title {
      padding: 0; } }

.event-img_title h3:after {
  height: 2px;
  width: 21px;
  background: #fff;
  content: "";
  position: absolute;
  left: 48px;
  top: 115%; }
  @media (max-width: 575px) {
    .event-img_title h3:after {
      left: 20px; } }

.event_date {
  width: 82px;
  background: #665c7c;
  float: left;
  text-align: center;
  border-radius: 2px; }
  .event_date img {
    float: left; }

.event-date-wrap {
  border: 1px dashed #8d84a0;
  margin: 8px 8px;
  padding: 4px 0; }
  .event-date-wrap p {
    font-size: 23px;
    font-weight: 700;
    color: #fff;
    margin: 0; }
  .event-date-wrap span {
    color: #fff;
    font-weight: 700;
    font-size: 14px; }

.date-description {
  margin-left: 115px; }
  .date-description h3 {
    margin-top: 0;
    font-weight: 600;
    margin-bottom: 25px;
    position: relative; }
    .date-description h3:after {
      height: 2px;
      width: 21px;
      background: #15803d;
      content: "";
      position: absolute;
      left: 0;
      top: 115%; }

.btn-read {
  padding: 10px 20px !important;
  font-size: 14px; }

.event_line {
  margin: 40px 0; }

/* ==============================================================
   DETAILED CHART
   ============================================================== */
.detailed_chart {
  background: url(../images/chart_bg.png) no-repeat;
  -webkit-background-size: cover;
  background-size: cover;
  padding: 97px 0; }

.chart-img img {
  margin: 21px 0 0;
  padding-right: 16px;
  float: left; }

.chart-img p {
  display: inline-block;
  color: #fff;
  font-size: 46px;
  font-weight: 700; }
  .chart-img p span {
    font-size: 24px;
    display: block;
    font-weight: 100; }

.chart-text {
  margin: 11px 0 0;
  display: inline-block; }
  .chart-text p {
    color: #fff;
    font-size: 23px; }
    .chart-text p span {
      font-size: 40px;
      display: block;
      line-height: 1.3; }

@media (max-width: 1200px) {
  .chart-img img {
    margin: 10px 0 0; }
  .chart-img p {
    font-size: 36px; }
    .chart-img p span {
      font-size: 17px; }
  .chart-text {
    margin: 0; }
    .chart-text p {
      font-size: 17px; }
      .chart-text p span {
        font-size: 36px; } }

@media (max-width: 992px) {
  .chart-img {
    display: block; }
    .chart-img img {
      float: none;
      margin: 0 auto 15px;
      padding: 0;
      display: block; }
  .chart-text {
    text-align: center;
    display: block;
    margin: 0px 0 0; } }

@media (max-width: 768px) {
  .chart_bottom {
    margin: 0 0 26px; }
  .chart_top {
    margin: 0 0 26px 0; } }

/* ==============================================================
   OUR BLOG
   ============================================================== */
.blog {
  background: #f2f2f2;
  padding: 97px 0; }
  .blog h2 {
    text-align: center;
    font-weight: 700;
    margin: 0 0 28px; }

.blog-img_box {
  background: #fff;
  -webkit-box-shadow: 0px 9px 20px -2px rgba(214, 214, 214, 0.3);
  box-shadow: 0px 9px 20px -2px rgba(214, 214, 214, 0.3);
  position: relative;
  margin-bottom: 24px;
  -webkit-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  transition: all 0.3s ease; }
  .blog-img_box:hover {
    -webkit-box-shadow: 0px 15px 30px -2px rgba(214, 214, 214, 0.8);
    box-shadow: 0px 15px 30px -2px rgba(214, 214, 214, 0.8); }

.blog_display {
  width: 100%; }

.home_blog_link {
  display: block;
  color: #292b2c; }

.blogtitle {
  padding: 24px 30px 10px 30px; }
  .blogtitle h3 {
    font-weight: 700; }
  .blogtitle p {
    color: #15803d;
    display: inline-block;
    padding: 0 6px 0 6px; }

.blogtitle-rtl {
  padding: 12px 12px; }
  .blogtitle-rtl p {
    font-size: 15px; }
    @media (max-width: 1200px) {
      .blogtitle-rtl p {
        margin: 0; } }

.blog_hide {
  background: #665c7c;
  color: #d5d0df;
  padding: 55px 45px 26px;
  -webkit-box-shadow: 0px 9px 16px -2px #d9d9d9;
  -moz-box-shadow: 0px 9px 16px -2px #d9d9d9;
  box-shadow: 0px 9px 16px -2px #d9d9d9; }

.icon-link {
  color: #fff;
  font-size: 34px;
  display: block;
  padding: 0 0 22px; }

.blogtitle-link {
  padding: 65px 0 0; }
  .blogtitle-link p {
    display: inline-block;
    padding: 0 6px 0 6px;
    color: #c5bfd0;
    margin: 0; }
  .blogtitle-link .icon-user,
  .blogtitle-link .icon-speedometer {
    color: #fff; }

.blog-video {
  position: relative; }

.blog-play_btn {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translateY(-50%) translateX(-50%);
  -ms-transform: translateY(-50%) translateX(-50%);
  transform: translateY(-50%) translateX(-50%); }

@media (max-width: 1200px) {
  .blogtitle {
    padding: 16px 0 0 18px; }
    .blogtitle h3 {
      font-size: 20px; }
  .blog_hide {
    padding: 28px 20px 27px; }
  .blogtitle-link {
    padding: 37px 0 0; }
  .blogtitle-rtl {
    padding: 8px; } }

@media (max-width: 992px) {
  .blogtitle {
    padding: 13px 0 0 8px; }
    .blogtitle h3 {
      font-size: 16px; }
    .blogtitle p {
      font-size: 14px;
      padding: 0; }
  .blog_hide {
    padding: 15px 7px 12px; }
    .blog_hide a {
      font-size: 13px; }
  .blogtitle-link {
    padding: 18px 0 0; }
    .blogtitle-link p {
      font-size: 14px;
      padding: 0; }
    .blogtitle-link span {
      font-size: 14px; }
  .icon-link {
    padding: 0 0 17px;
    font-size: 27px; } }

@media (max-width: 768px) {
  .blog-box_block {
    margin-bottom: 0; }
  .blog-img_box {
    margin: 0 0 20px; }
  .blogtitle {
    padding: 16px 0 0 16px; }
    .blogtitle h3 {
      font-size: 20px; }
    .blogtitle p {
      font-size: 14px;
      padding: 0 6px 0 6px; }
  .blog_hide {
    padding: 16px 16px;
    margin: 0 0 20px; }
    .blog_hide a {
      font-size: 18px; }
  .blogtitle-link p {
    font-size: 14px;
    padding: 0 6px 0 6px; }
  .blogtitle-link span {
    font-size: 14px;
    padding: 0 6px 0 6px; } }

@media (max-width: 480px) {
  .blogtitle h3 {
    font-size: 17px; } }

/* ==============================================================
   GALLERY
   ============================================================== */
.gallery-wrap {
  padding: 98px 0; }
  .gallery-wrap img {
    margin: 0;
    width: 100%; }

.gallery-wrap {
  margin: 0; }

.instafeed_img {
  overflow: hidden;
  position: relative; }
  .instafeed_img a {
    display: block;
    cursor: move;
    cursor: grab;
    cursor: -moz-grab;
    cursor: -webkit-grab; }
    .instafeed_img a:active {
      cursor: grabbing;
      cursor: -moz-grabbing;
      cursor: -webkit-grabbing; }
    .instafeed_img a .instagram_img_holder {
      width: 100%;
      height: 265px;
      -webkit-background-size: cover;
      background-size: cover; }
  .instafeed_img .instafeed_img_overlay {
    position: absolute;
    overflow: hidden;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(203, 181, 139, 0.85);
    opacity: 0;
    -webkit-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    -webkit-transition: all 0.4s ease-in-out;
    -o-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out;
    text-align: center; }
    .instafeed_img .instafeed_img_overlay:after {
      content: "";
      position: absolute;
      border: 1px solid #FFF;
      left: 20px;
      right: 20px;
      top: 20px;
      bottom: 20px; }

.instafeed_img:hover .instafeed_img_overlay {
  opacity: 1;
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1); }

.instafeed_img .instafeed_img_overlay span {
  display: block;
  text-align: center;
  text-transform: uppercase;
  color: #fff;
  position: absolute;
  width: 100%;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  font-size: 16px; }
  @media (max-width: 767px) {
    .instafeed_img .instafeed_img_overlay span {
      font-size: 12px; } }

/* ==============================================================
   FOOTER
   ============================================================== */
footer {
  background: #2d2d2d;
  padding: 60px 0 100px; }

.subscribe {
  border-bottom: 1px solid #3f3f3f; }
  .subscribe h3 {
    text-align: center;
    color: #fff;
    padding: 0; }
  .subscribe form {
    text-align: center;
    margin: 20px auto 60px; }
  .subscribe .form-group {
    position: relative; }
  .subscribe .help-block {
    position: absolute;
    text-align: center;
    display: block;
    width: 100%;
    margin: 10px 0; }
  @media (max-width: 767px) {
    .subscribe .btn-warning {
      margin: 0 auto; }
    .subscribe .help-block {
      position: static;
      margin: 0 0 15px; }
    .subscribe #js-subscribe-result .help-block {
      margin: 10px 0 15px; } }

.signup_form {
  font-family: "Lora", serif;
  background: #3f3f3f;
  font-size: 17px;
  border: none;
  padding: 15px 60px 15px 60px;
  border-radius: 3px;
  color: #fff;
  outline: none;
  background-image: url(data:image/svg+xml;utf8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTkuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDMxLjAxMiAzMS4wMTIiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDMxLjAxMiAzMS4wMTI7IiB4bWw6c3BhY2U9InByZXNlcnZlIiB3aWR0aD0iMTZweCIgaGVpZ2h0PSIxNnB4Ij4KPGc+Cgk8cGF0aCBkPSJNMjguNTEyLDI2LjUyOUgyLjVjLTEuMzc4LDAtMi41LTEuMTIxLTIuNS0yLjVWNi45ODJjMC0xLjM3OSwxLjEyMi0yLjUsMi41LTIuNWgyNi4wMTJjMS4zNzgsMCwyLjUsMS4xMjEsMi41LDIuNXYxNy4wNDcgICBDMzEuMDEyLDI1LjQwOCwyOS44OSwyNi41MjksMjguNTEyLDI2LjUyOXogTTIuNSw1LjQ4MmMtMC44MjcsMC0xLjUsMC42NzMtMS41LDEuNXYxNy4wNDdjMCwwLjgyNywwLjY3MywxLjUsMS41LDEuNWgyNi4wMTIgICBjMC44MjcsMCwxLjUtMC42NzMsMS41LTEuNVY2Ljk4MmMwLTAuODI3LTAuNjczLTEuNS0xLjUtMS41SDIuNXoiIGZpbGw9IiNGRkZGRkYiLz4KCTxwYXRoIGQ9Ik0xNS41MDYsMTguMDE4Yy0wLjY2NSwwLTEuMzMtMC4yMjEtMS44MzYtMC42NjJMMC44OTEsNi4yMTljLTAuMjA4LTAuMTgyLTAuMjMtMC40OTctMC4wNDgtMC43MDUgICBjMC4xODItMC4yMSwwLjQ5OC0wLjIzLDAuNzA2LTAuMDQ5bDEyLjc3OCwxMS4xMzdjMC42NCwwLjU1NywxLjcyLDAuNTU2LDIuMzU4LDBMMjkuNDYsNS40NjZjMC4yMDctMC4xODMsMC41MjItMC4xNjIsMC43MDYsMC4wNDkgICBjMC4xODIsMC4yMDgsMC4xNiwwLjUyMy0wLjA0OCwwLjcwNUwxNy4zNDIsMTcuMzU1QzE2LjgzNiwxNy43OTcsMTYuMTcxLDE4LjAxOCwxNS41MDYsMTguMDE4eiIgZmlsbD0iI0ZGRkZGRiIvPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+CjxnPgo8L2c+Cjwvc3ZnPgo=);
  background-repeat: no-repeat;
  background-position: 22px 19px;
  width: 460px;
  margin-right: 15px; }
  @media (max-width: 767px) {
    .signup_form {
      width: 100%;
      margin-right: 0;
      margin-bottom: 15px; } }

.signup_form::-webkit-input-placeholder {
  color: #969696; }

.signup_form::-moz-placeholder {
  color: #969696; }

.signup_form:-ms-input-placeholder {
  color: #969696; }

.signup_form::placeholder {
  color: #969696; }

.btn-warning {
  background: #15803d;
  border: none;
  border-radius: 3px;
  padding: 17px 34px;
  font-size: 15px;
  outline: none;
  cursor: pointer;
  font-weight: bold; }

.btn-black.active,
.btn-black:active,
.show > .btn-warning.dropdown-toggle {
  color: #fff;
  background: #15803d; }

.btn-warning:hover {
  border: none;
  background: #bfa97f; }

.foot-logo {
  padding: 60px 0 34px; }
  .foot-logo p {
    color: #c4c4c4;
    font-weight: 100;
    padding: 24px 0 0;
    font-size: 17px; }

.tweet {
  color: #c4c4c4; }
  .tweet ul {
    padding-left: 0; }
  .tweet li {
    list-style: none;
    margin-left: 0;
    margin-top: 30px; }
  .tweet a:hover {
    color: #15803d;
    text-decoration: underline; }
  .tweet i {
    font-size: 28px;
    color: #15803d;
    float: left; }
  .tweet div {
    margin-left: 50px; }

.sitemap ul {
  margin: 0;
  padding: 16px 0 0; }
  .sitemap ul li {
    list-style: none; }
    .sitemap ul li a {
      color: #c4c4c4;
      font-size: 17px;
      line-height: 2; }
    .sitemap ul li :hover {
      color: #15803d;
      text-decoration: none;
      -webkit-transition: 0.2s;
      -o-transition: 0.2s;
      transition: 0.2s; }

footer h3 {
  color: #fff;
  padding: 60px 0 0; }

.address p {
  color: #c4c4c4;
  padding: 16px 0 0; }
  .address p span {
    color: #fff; }

.address ul {
  margin: 0;
  padding: 0; }
  .address ul li {
    list-style: none;
    float: left; }
    .address ul li a {
      color: #fff;
      margin-right: 5px; }

.footer-social-icons li {
  margin-right: 5px; }

.fa-fb {
  background: #4b6eb9;
  padding: 14px 18px;
  border-radius: 50%;
  width: 44px;
  height: 44px; }

.fa-fb:hover {
  opacity: 0.8;
  -webkit-transition: 0.2;
  -o-transition: 0.2;
  transition: 0.2; }

.fa-in {
  background: #188bc3;
  padding: 13px 16px;
  border-radius: 50%;
  width: 44px;
  height: 44px; }

.fa-in:hover {
  opacity: 0.8;
  -webkit-transition: 0.2;
  -o-transition: 0.2;
  transition: 0.2; }

.fa-tw {
  background: #55acee;
  padding: 14px 16px;
  border-radius: 50%;
  width: 44px;
  height: 44px; }

.fa-tw:hover {
  opacity: 0.8;
  -webkit-transition: 0.2;
  -o-transition: 0.2;
  transition: 0.2; }

@media (max-width: 992px) {
  footer h3 {
    font-size: 18px; }
  .fa-fb {
    width: 44px;
    height: 44px;
    padding: 15px 17px; }
  .fa-in {
    width: 44px;
    height: 44px;
    padding: 14px 16px; }
  .fa-tw {
    width: 44px;
    height: 44px;
    padding: 14px 16px; } }

@media (max-width: 767px) {
  .subscribe form {
    margin: 20px 0 38px; }
  .foot-logo {
    padding: 32px 0 34px; }
    .foot-logo p {
      padding: 11px 0 0; } }

@media (max-width: 480px) {
  .btn-warning {
    width: 100%; }
  .foot-logo {
    padding: 28px 0 0; }
  footer h3 {
    padding: 42px 0 0; } }

/*
 * ABOUT PAGE
 ********************************/
/* ==============================================================
   ABOUT HEADER
   ============================================================== */
.about-nav {
  position: relative;
  background: #ccc; }

.about_bg {
  background: url(../images/about-bg.jpg) no-repeat;
  -webkit-background-size: cover;
  background-size: cover; }
  .about_bg h1 {
    text-align: center;
    color: #fff;
    margin: 0;
    padding: 37px 0 90px;
    font-weight: 700; }

@media (max-width: 992px) {
  .about_bg h1 {
    font-size: 42px; } }

/* ==============================================================
   ABOUT WELCOME
   ============================================================== */
.welcome_about {
  padding: 98px 0; }
  .welcome_about h2 {
    font-weight: 600;
    color: #2d2d2d;
    margin: 0 0 28px; }
  .welcome_about p {
    color: #2d2d2d;
    line-height: 1.8; }
  .welcome_about img {
    width: 100%; }

.btn-about {
  background: none;
  border: 3px solid #15803d;
  border-radius: 2px;
  padding: 14px 20px;
  color: #15803d;
  font-size: 15px;
  margin: 16px 0 0; }

@media (max-width: 992px) {
  .welcome_about {
    padding: 58px 0; }
  .btn-about {
    margin: 0px 0 32px; } }

/* ==============================================================
   ABOUT TESTIMONIAL
   ============================================================== */
.testimonial {
  background: #f2f2f2;
  padding: 98px 0; }
  .testimonial h2 {
    text-align: center;
    font-weight: 600;
    color: #2d2d2d;
    margin: 0 0 28px; }

.quote {
  text-align: center;
  font-size: 24px;
  outline: none;
  cursor: -webkit-grab;
  cursor: grab; }
    .quote i {
    border: 2px solid #15803d;
    padding: 20px;
    border-radius: 50%;
    color: #15803d;
  }

  .quote .quote_text {
    text-align: center;
    margin: 31px auto;
    line-height: 2;
    position: relative;
    max-width: 710px; }
    @media (min-width: 992px) {
      .quote .quote_text:before, .quote .quote_text:after {
        position: absolute;
        display: inline-block;
        font: normal normal normal 14px/1 FontAwesome;
        font-size: inherit;
        text-rendering: auto;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        color: #15803d; }
      .quote .quote_text:before {
        content: "\f10d";
        top: 0;
        left: -40px; }
      .quote .quote_text:after {
        content: "\f10e";
        top: 0;
        right: -40px; } }

.testi-img_block {
  max-width: 500px;
  margin: 0 auto 30px; }
  .testi-img_block img {
    margin: 0;
    display: inline-block;
    border-radius: 50%;
    max-width: 60px;
    margin-top: -18px; }
  .testi-img_block p {
    display: inline-block;
    font-size: 15px;
    margin-bottom: 0;
    padding-left: 10px; }
    .testi-img_block p span {
      color: #15803d;
      font-size: 16px;
      display: block; }

@media (max-width: 768px) {
  .testi-img_block p {
    display: block;
    position: inherit;
    padding: 8px 0px;
    margin: 0; } }

/* ==============================================================
   ABOUT OUR TEACHERS
   ============================================================== */
.our-teachers {
  padding: 98px 0; }
  .our-teachers h2 {
    text-align: center;
    font-weight: 600;
    margin: 0 0 28px; }

.our-teachers-block {
  background: #fff;
  border: 1px solid #ececec;
  -webkit-box-shadow: 0px 5px 34px 8px #ececec;
  -moz-box-shadow: 0px 5px 34px 8px #ececec;
  box-shadow: 0px 5px 34px 8px #ececec;
  position: relative;
  min-height: 205px;
  margin-bottom: 30px; }
  .our-teachers-block .teachers-img {
    width: 45%;
    position: absolute;
    bottom: 0;
    top: 0;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover; }
    @media (max-width: 1200px) {
      .our-teachers-block .teachers-img {
        width: 35%; } }
  .our-teachers-block .teachers-description {
    margin-left: 45%;
    padding: 20px 85px 15px 20px; }
    @media (max-width: 1200px) {
      .our-teachers-block .teachers-description {
        margin-left: 35%; } }
    .our-teachers-block .teachers-description p {
      margin: 0; }
      .our-teachers-block .teachers-description p span {
        color: #15803d;
        font-weight: 100;
        font-size: 18px; }

.social-icons {
  position: absolute;
  right: 0;
  top: 0;
  background: #FFF;
  bottom: 0;
  width: 50px;
  border-left: 1px solid #ececec; }
  .social-icons ul {
    padding: 0;
    margin: 0;
    list-style: none;
    display: table;
    height: 100%; }
    .social-icons ul li {
      list-style: none;
      margin: 0 0 10px;
      display: table-row;
      min-height: 1px;
      text-align: center; }
      .social-icons ul li a {
        color: #787878;
        font-size: 20px;
        padding: 5px 15px;
        border-bottom: 1px solid #ececec;
        display: table-cell;
        vertical-align: middle;
        width: 1%; }
        .social-icons ul li a i {
          -webkit-transition: all 0.3s ease;
          -o-transition: all 0.3s ease;
          transition: all 0.3s ease; }
        .social-icons ul li a:hover i {
          color: #15803d; }
      .social-icons ul li:last-child a {
        border-bottom: 0; }

@media (max-width: 992px) {
  .our-teachers-block .teachers-img {
    display: block;
    float: none;
    width: 100%;
    position: static; }
  .our-teachers-block .teachers-description {
    margin-left: 0;
    padding: 20px 20px 70px; }
  .our-teachers-block .social-icons {
    top: inherit;
    left: 0;
    width: 100%;
    border-top: 1px solid #ececec;
    border-left: 0;
    height: 50px; }
    .our-teachers-block .social-icons ul {
      width: 100%; }
    .our-teachers-block .social-icons li {
      display: table-cell;
      margin: 0; }
      .our-teachers-block .social-icons li a {
        display: inherit;
        border-bottom: 0;
        border-right: 1px solid #ececec;
        height: 50px; } }

/*
 * ADMISSION PAGE
 ********************************/
/* ==============================================================
   ADMISSION COURCES
   ============================================================== */
.admission_cources {
  padding: 70px 0; }
  .admission_cources h2 {
    font-weight: 700; }
  .admission_cources p {
    line-height: 1.8;
    padding: 0; }

.course_filter {
  padding: 33px 30px;
  background: #15803d;
  border-radius: 2px; }
  .course_filter .form-control {
    border: 0; }

select.form-control.custom-select {
  height: 3rem !important;
  margin-right: 13px; }

.btn-admission {
  padding: 13px 54px;
  text-transform: uppercase;
  border: none;
  color: #fff;
  background: #d8c299;
  -webkit-box-shadow: 0px 1px 1px 0px rgba(3, 3, 3, 0.35);
  -moz-box-shadow: 0px 1px 1px 0px rgba(3, 3, 3, 0.35);
  box-shadow: 0px 1px 1px 0px rgba(3, 3, 3, 0.35); }

.btn-admission:hover {
  background: #e0c795;
  color: #fff; }

.course_box {
  border: 1px solid #ececec;
  display: block;
  color: #2d2d2d;
  position: relative;
  min-height: 260px;
  margin-bottom: 30px; }
  .course_box img {
    width: 45%;
    position: absolute;
    bottom: 0;
    top: 0;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover; }
  .course_box h4 {
    font-weight: 600; }
  .course_box p {
    font-size: 15px;
    padding-top: 15px;
    margin-bottom: 0; }

.course_box:hover,
.course_box:focus,
.course_box:active {
  color: #2d2d2d;
  text-decoration: none;
  opacity: 0.8;
  -webkit-transition: 0.2s;
  -o-transition: 0.2s;
  transition: 0.2s; }

.couse-desc-wrap {
  margin-left: 45%;
  padding: 20px 25px; }

.course_duration {
  margin-left: 45%; }

.star-rating .fa-star {
  color: #ffb914; }

.course_duration {
  border-top: 1px solid #eaeaea;
  background: #f6f6f6; }
  .course_duration ul {
    padding: 0;
    margin: 0; }
    .course_duration ul li {
      list-style: none;
      display: inline-block;
      margin-left: 20px;
      padding: 9px 0 9px; }
      .course_duration ul li p {
        padding: 0;
        margin: 0;
        color: #15803d; }
      .course_duration ul li span {
        font-weight: 700;
        font-size: 15px; }

@media (max-width: 1200px) {
  .course_box p {
    font-size: 14px; }
  .course_duration ul li p {
    font-size: 13px; }
  .course_duration ul li span {
    font-size: 12px; } }

@media (max-width: 992px) {
  .course_box img {
    position: static;
    width: 100%; }
  .couse-desc-wrap {
    margin-left: 0; }
  .course_duration {
    margin-left: 0; } }

/* ==============================================================
   ADMISSION DETAILS COURSES
   ============================================================== */
.admission_discription {
  padding: 50px 0; }
  .admission_discription h4 {
    font-weight: 700; }
  .admission_discription p {
    text-align: left;
    margin-top: 12px; }
  .admission_discription ul {
    padding: 0;
    margin: 0; }
  .admission_discription li {
    background: url(../images/discription-icon.png) no-repeat 5px 3px;
    list-style: none;
    padding: 0 0 12px 36px;
    font-size: 16px; }

.admission-pdf {
  background: #f6f6f6;
  border: 1px solid #ebebeb;
  padding: 18px 22px 18px 22px;
  position: relative;
  width: 86%; }
  .admission-pdf p {
    display: inline-block;
    text-align: left;
    text-transform: uppercase;
    margin: 0;
    padding: 0 15px 0 15px;
    font-weight: 700;
    font-size: 14px; }
    .admission-pdf p span {
      text-decoration: underline; }
      .admission-pdf p span a {
        color: #15803d; }

.pdf_btn {
  position: relative; }

.btn-pdf_join {
  position: absolute;
  right: -60px;
  top: 15px;
  text-transform: uppercase;
  -webkit-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.75);
  -moz-box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.75);
  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.75); }

.admission_testimonial {
  padding-top: 70px; }
  .admission_testimonial h4 {
    font-weight: 700;
    margin: 0 0 28px; }
  .admission_testimonial .admissiontesti-img_block {
    display: inline-block; }
    .admission_testimonial .admissiontesti-img_block img {
      border-radius: 50%; }
  .admission_testimonial .admissiontesti-text_block {
    float: right;
    width: 84%; }
    .admission_testimonial .admissiontesti-text_block p {
      line-height: 1.8;
      text-align: left; }
    .admission_testimonial .admissiontesti-text_block h6 {
      line-height: 1.5; }
      .admission_testimonial .admissiontesti-text_block h6 span {
        color: #15803d; }

.admission_rating {
  padding: 6px 16px;
  margin: 70px 0 0;
  background: #15803d;
  display: inline-block; }
  .admission_rating li {
    float: left;
    font-size: 15px;
    width: 50%;
    list-style: none;
    padding: 10px 0;
    color: #fff;
    border-bottom: 1px solid #d1c3a7; }
    .admission_rating li span {
      float: right; }
  .admission_rating li:nth-child(11) {
    border: none; }
  .admission_rating li:last-child {
    border: none; }
  .admission_rating .admission_star {
    padding-left: 22px;
    font-size: 15px;
    color: #fff8ea;
    font-weight: 100; }

.admission_insruction {
  padding: 50px 0 0; }
  .admission_insruction h4 {
    font-weight: 700;
    margin: 0 0 14px; }
  .admission_insruction p {
    font-weight: 700;
    font-size: 15px; }
    .admission_insruction p span {
      color: #15803d; }

.admission_share-icon {
  margin: 50px 0 0; }
  .admission_share-icon h4 {
    font-weight: 700; }
  .admission_share-icon a {
    display: inline-block;
    list-style: none;
    background: #e8e8e8;
    width: 52px;
    height: 52px;
    margin-right: 6px;
    border-radius: 50%;
    padding: 16px 20px;
    color: #2d2d2d; }

.admission_share-icon a:hover {
  opacity: 0.6;
  -webkit-transition: 0.2s;
  -o-transition: 0.2s;
  transition: 0.2s; }

@media (max-width: 1200px) {
  .admission-pdf p {
    padding: 0 0 0 12px;
    font-size: 13px; } }

@media (max-width: 992px) {
  .btn-pdf_join {
    right: 20px; }
  .admission_rating {
    padding: 6px 8px; }
    .admission_rating ul li {
      font-size: 13px; }
  .admission_testimonial,
  .admission_insruction,
  .admission_share-icon,
  .admission_testimonial .admissiontesti-text_block p {
    text-align: center; }
  .admission_rating {
    font-size: 13px; }
  .admission-pdf {
    width: 100%; }
  .admission_share-icon ul li {
    width: 44px;
    height: 44px;
    padding: 11px 15px; }
  .admissiontesti-text_block {
    width: 100% !important; } }

@media (max-width: 767px) {
  .admission-pdf {
    padding: 20px; }
    .admission-pdf i {
      font-size: 2em; } }

@media (max-width: 575px) {
  .btn-pdf_join {
    position: static;
    margin-top: 20px;
    width: 100%; } }

/*
 * ADMISSION FORM
 ********************************/
/* ==============================================================
   ADMISSION FORM RULES
   ============================================================== */
.admission-form_rules {
  padding: 60px 0; }
  .admission-form_rules h2 {
    font-weight: 700;
    margin: 0 0 28px; }
  .admission-form_rules p {
    line-height: 1.8; }

.admission-form_listed {
  padding: 66px 0 0;
  margin: 0; }
  .admission-form_listed li {
    list-style: none;
    background: url(../images/right-icon.png) no-repeat;
    font-size: 17px;
    color: #15803d;
    padding-left: 30px;
    line-height: 2; }

@media (max-width: 768px) {
  .admission-form_listed {
    padding: 12px 0 0; } }

.form-control::-webkit-input-placeholder {
  color: #d0d0d0;
  opacity: 1; }

.form-control::-moz-placeholder {
  color: #d0d0d0;
  opacity: 1; }

.form-control:-ms-input-placeholder {
  color: #d0d0d0;
  opacity: 1; }

.form-control::placeholder {
  color: #d0d0d0;
  opacity: 1; }

.has-danger .custom-select {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3E%3Cpath fill='%23333' d='M2 0L0 2h4zm0 5L0 3h4z'/%3E%3C/svg%3E"); }

.has-danger .custom-select:focus {
  border-color: #d9534f; }

.admission_form {
  padding: 0 0 98px; }
  .admission_form img {
    margin: 0 auto;
    display: block; }
  .admission_form h2 {
    text-align: center;
    font-weight: 700;
    margin: 0 0 28px; }
  .admission_form label {
    width: 100%;
    margin: 13px 0; }

.form-control {
  border: 2px solid #ccc; }
  .form-control:not(textarea) {
    height: 50px; }

.admission-form_dropdown {
  width: 100%;
  border: 2px solid #ccc;
  border-radius: 3px;
  padding: 14px 12px;
  outline: none; }

.admission-form_date {
  width: 32.4%;
  border: 2px solid #ccc;
  border-radius: 3px;
  padding: 14px 12px;
  outline: none; }

.admission-form_text {
  width: 100%;
  border: 2px solid #ccc;
  border-radius: 3px;
  padding: 12px 12px;
  outline: none; }

.admission-form_address {
  margin: 18px 0 0; }

.admission-form_message {
  width: 100%;
  border: 2px solid #ccc;
  border-radius: 3px;
  padding: 12px 12px;
  height: 262px;
  outline: none; }

@media (max-width: 1200px) {
  .admission-form_date {
    width: 100%;
    margin: 18px 0 0; }
  .admission-form_respons {
    margin: 0; } }

/*
 * CAMPUS LIFE
 ********************************/
/* ==============================================================
   CAMPUS
   ============================================================== */
.campus {
  padding: 98px 0; }
  .campus h2 {
    font-weight: 700;
    margin: 0 0 28px; }
  .campus p {
    line-height: 1.8;
    margin: 21px 0 58px; }

.campus-img_block {
  position: relative; }
  .campus-img_block .campus-title-block {
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), to(black));
    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, black 100%);
    background: -o-linear-gradient(top, rgba(255, 255, 255, 0) 0%, black 100%);
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, black 100%); }
    .campus-img_block .campus-title-block h4 {
      color: #fff;
      padding: 60px 30px 17px 30px;
      margin: 0; }

.campus-img_text {
  padding: 6px 0; }
  .campus-img_text p {
    font-size: 15px;
    color: #686868; }

@media (max-width: 992px) {
  .campus-img_block h4 {
    top: -36px;
    left: 15px;
    font-size: 18px; }
  .campus-img_text {
    padding: 0px 8px; } }

@media (max-width: 768px) {
  .campus-img_block img {
    width: 100%; } }

/*
 * RESEARCH
 ********************************/
/* ==============================================================
   RESEARCH
   ============================================================== */
.research {
  padding: 98px 0; }
  .research h2 {
    font-weight: 700;
    margin: 0 0 28px; }
  .research h3 {
    font-weight: 700;
    margin: 6px 0 28px; }

.research-current_block {
  margin-bottom: 60px; }
  .research-current_block img {
    float: left;
    max-width: 160px; }
  .research-current_block h4 {
    font-weight: 700;
    margin-bottom: 16px;
    margin-left: 190px; }
  .research-current_block p {
    line-height: 1.8;
    color: #2d2d2d;
    margin-left: 190px; }
  .research-current_block ul {
    margin-left: 190px; }

.research-list li {
  font-weight: 700;
  line-height: 1.8; }

.research-current_last {
  margin-bottom: 0; }

.research-posts .research-news_block {
  border-bottom: 1px solid #efefef;
  padding-bottom: 7px;
  padding-top: 20px; }
  .research-posts .research-news_block:first-child {
    padding-top: 0; }
  .research-posts .research-news_block:last-child {
    border-bottom: 0;
    padding-bottom: 30px; }
  .research-posts .research-news_block span {
    color: #15803d;
    font-size: 13px;
    font-weight: 700;
    margin-top: 30px; }
  .research-posts .research-news_block p {
    font-weight: 700;
    font-size: 16px; }

@media (max-width: 767px) {
  .research-current_block img {
    min-width: 100%;
    margin-bottom: 12px; }
  .research-current_block h4,
  .research-current_block p,
  .research-current_block ul {
    margin-left: 0; }
  .research h3 {
    margin-top: 40px; } }

.research-features img {
  width: 100%; }

.research-featurestext_block {
  background: #15803d;
  max-width: 850px;
  margin: -180px auto 0 auto;
  padding: 50px 77px;
  position: relative; }
  .research-featurestext_block h3 {
    text-align: center;
    color: #fff;
    font-weight: 700;
    margin: 0 0 28px; }
  .research-featurestext_block p {
    line-height: 1.8;
    text-align: center;
    color: #eee5d4; }

.resources {
  padding: 98px 0; }

.resources-title {
  text-align: center;
  font-weight: 700;
  margin: 0 0 28px; }

.resources-slider_wrap {
  width: 100%; }

.research-testi_block img {
  margin: 0 auto;
  border-radius: 50%;
  display: block; }

.research-testi_block h4 {
  font-weight: 700;
  text-align: center;
  margin: 36px 0;
  margin: 30px 0 16px 0; }

.research-testi_block p {
  text-align: center;
  line-height: 1.8;
  padding: 0 26px; }

@media (max-width: 992px) {
  .research-featurestext_block {
    max-width: 700px;
    margin: -125px auto 0 auto;
    padding: 25px 66px; } }

@media (max-width: 768px) {
  .research-featurestext_block {
    max-width: 100%;
    margin: 0px auto 0 auto;
    padding: 24px 48px; }
    .research-featurestext_block h3 {
      margin: 0 0 13px; } }

/*
 * BLOG
 ********************************/
/* ==============================================================
   BLOG
   ============================================================== */
.blog-wrap {
  padding: 98px 0; }

.blog-img_block {
  position: relative; }
  .blog-img_block img {
    padding-left: 40px; }

.blog-date {
  background: #2d2d2d;
  padding: 12px 16px;
  border-radius: 2px;
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 0;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%); }
  .blog-date span {
    color: #fff;
    font-size: 18px;
    font-weight: 700; }

.blog-tiltle_block {
  padding: 30px 0 0 100px; }
  .blog-tiltle_block h4 {
    font-weight: 700; }
    .blog-tiltle_block h4 a {
      font-size: 20px;
      text-decoration: none; }
  .blog-tiltle_block h6 a {
    padding-right: 15px;
    padding-left: 15px;
    font-weight: 300;
    font-size: 14px;
    text-decoration: none; }
    .blog-tiltle_block h6 a span {
      padding-left: 5px; }
    .blog-tiltle_block h6 a:first-child {
      padding-left: 0; }
  .blog-tiltle_block p {
    line-height: 1.8;
    padding: 22px 16px 0 0; }
  .blog-tiltle_block a {
    color: #2d2d2d;
    font-size: 13px;
    text-decoration: underline;
    font-weight: 700; }

.blog-icons {
  border-top: 1px solid #e3eaef;
  border-bottom: 1px solid #e3eaef;
  margin: 36px 0;
  padding: 8px 0; }
  .blog-icons .blog-share_block {
    text-align: right;
    line-height: 1.3; }
    .blog-icons .blog-share_block ul {
      display: inline-block;
      padding: 3px 0 0;
      margin: 0; }
      .blog-icons .blog-share_block ul li {
        list-style: none;
        float: right; }
        .blog-icons .blog-share_block ul li a {
          margin: 0 0 0 25px;
          color: #ccc; }

.quote-right {
  float: right; }

.blog-search {
  border: 1px solid #ccc;
  padding: 8px 16px;
  border-radius: 2px;
  font-size: 15px; }

.btn-blogsearch {
  padding: 11px 16px;
  border-radius: 2px;
  font-size: 15px;
  outline: none; }

.blog-category_block {
  padding: 50px 0; }
  .blog-category_block h3 {
    font-weight: 700;
    margin: 0 0 24px; }
  .blog-category_block ul {
    margin: 0;
    padding: 0; }
    .blog-category_block ul li {
      list-style: none;
      margin: 10px 0;
      border-bottom: 1px solid rgba(0, 0, 0, 0.1); }
      .blog-category_block ul li a {
        color: #2d2d2d;
        text-decoration: none;
        padding-bottom: 10px;
        display: block; }
        .blog-category_block ul li a i {
          float: right; }
        .blog-category_block ul li a:hover {
          opacity: 0.8; }
    .blog-category_block ul hr {
      margin: 0; }
    .blog-category_block ul ul {
      background: #f7f7f7;
      padding: 20px; }
      .blog-category_block ul ul li {
        border-bottom-color: #FFF; }

.blog-featured_post h3 {
  font-weight: 700;
  margin: 0 0 24px; }

.blog-featured_post hr {
  margin: 24px 0; }

.blog-featured-img_block img {
  float: left;
  margin: 0 28px 0 0; }

.blog-featured-img_block h5 {
  font-weight: 700;
  font-size: 17px;
  margin-left: 150px; }

.blog-featured-img_block p {
  font-size: 15px;
  margin-left: 150px; }

.blog-featured-img_block a {
  color: #292b2c; }

.blog-tags_wrap {
  margin: 50px 0 0; }
  .blog-tags_wrap h3 {
    font-weight: 700;
    margin: 0 0 24px; }

.blog-tags {
  border: 1px solid #ccc;
  text-align: center;
  padding: 5px 29px;
  margin: 0 0 18px 18px;
  color: #313131;
  font-size: 14px; }

.page-item {
  margin: 0 8px 0 0; }

.page-link {
  line-height: 1;
  color: #2d2d2d;
  font-size: 14px;
  border-color: #e3eaef; }

.page-next {
  background: #15803d;
  color: #fff;
  border-color: transparent; }

.page-link:focus,
.page-link:hover {
  background-color: #f4e9d4;
  color: #2d2d2d; }

@media (max-width: 1200px) {
  .blog-search {
    width: 100%; }
  .btn-blogsearch {
    width: 100%;
    margin-top: 10px; }
  .blog-featured-img_block img {
    margin: 0 12px 0 0; }
  .blog-tags {
    padding: 5px 20px; } }

@media (max-width: 992px) {
  .blog-date span {
    font-size: 15px; }
  .pagination {
    margin: 0; }
  .blog-tiltle_block,
  .blog-img_block img {
    padding-left: 0; }
  .blog-icons {
    margin-top: 12px; }
  .blog-featured-img_block img {
    width: 100%;
    margin: 0 0 10px 0; }
  .blog-featured-img_block p,
  .blog-featured-img_block h5 {
    margin-left: 0; } }

@media (max-width: 768px) {
  .blog-search {
    margin: 30px 0 0; } }

@media (max-width: 480px) {
  .pagination li {
    display: none; }
    .pagination li:first-child, .pagination li:last-child {
      display: block; } }

/*
 * BLOG POST
 ********************************/
/* ==============================================================
   BLOG POST
   ============================================================== */
.blogpost-quotes {
  background: #f4eee3;
  display: inline-block;
  padding: 4px 36px;
  margin: 12px 0 0 0; }
  .blogpost-quotes span {
    font-size: 32px; }
  .blogpost-quotes p {
    font-weight: 700;
    font-style: italic;
    padding: 0px 65px; }

.blogpost_list {
  font-weight: 700;
  border-bottom: 2px solid #15803d;
  padding: 0 0 3px;
  line-height: 2.3; }

.blogpost-tabs {
  margin: 50px 0 0; }

.blogpost-tab-wrap {
  float: left !important;
  width: 100%; }

.blogpost-nav-tab {
  border: none !important;
  margin: 0 35px 0 0; }
  .blogpost-nav-tab a {
    text-decoration: none;
    font-size: 20px;
    padding: 10px 0; }

.blodpost-tab-img img {
  padding: 0;
  border-radius: 50%; }

.blogpost-tab-description h6 {
  font-size: 17px;
  color: #15803d;
  margin-bottom: 0;
  margin-top: 10px; }

.blogpost-tab-description p {
  padding: 10px 0 8px;
  font-size: 16px;
  margin: 0; }

.blodpost-tab-img {
  margin-top: 10px; }

p.blogpost-rply {
  color: #6e6e6e;
  padding-top: 0; }
  p.blogpost-rply span {
    margin: 0 10px;
    color: #a9a9a9;
    font-size: 12px; }
  p.blogpost-rply a {
    font-size: 14px; }

.blogpost-rply-style {
  text-decoration: line-through; }

@media (max-width: 992px) {
  .blogpost-quotes {
    padding: 4px 6px; } }

@media (max-width: 768px) {
  .blogpost-quotes p {
    padding: 0px 58px; }
  .quote-right {
    float: right !important; }
  .blogpost-nav-tab {
    margin: 0 25px 0 0; }
  .blogpost-nav-tab a {
    font-size: 15px;
    padding: 6px 0; }
  .blodpost-tab-img img {
    width: 16% !important; } }

/*
 * EVENTS
 ********************************/
/* ==============================================================
   EVENTS
   ============================================================== */
.events {
  padding: 98px 0; }

.event-title {
  font-weight: 700;
  margin: 0 0 24px; }

.event-date {
  background: #15803d;
  padding: 20px 5px; }
  .event-date h4 {
    font-size: 76px;
    font-weight: 700;
    text-align: center;
    color: #fff;
    margin: 0; }
  .event-date span {
    font-weight: 700;
    font-size: 20px;
    text-align: center;
    color: #fff;
    display: block; }

.event-time {
  background: #15803d;
  padding: 8px 0;
  display: block;
  color: #ffffff;
  text-align: center; }

.event-heading {
  margin: 0 0 20px; }
  .event-heading h3 {
    font-weight: 700;
    margin: 0 0 24px; }
  .event-heading p {
    line-height: 1.8; }

.event-hilights h5 {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 24px; }

.event-highlight-discription {
  margin: 50px 0 0px; }
  .event-highlight-discription p {
    line-height: 1.8;
    margin: 0 0 50px; }

.event-toggle {
  text-transform: uppercase;
  font-size: 15px;
  text-decoration: underline;
  color: #15803d;
  font-weight: 700; }

.event-toggle:focus {
  color: #15803d; }

.event-toggle:hover {
  color: #15803d;
  -webkit-transition: 0.2s;
  -o-transition: 0.2s;
  transition: 0.2s; }

.tab-list {
  color: #2d2d2d;
  font-weight: 700; }

.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
  border-bottom: 2px solid #15803d;
  border-right: 1px solid #fff;
  border-left: 1px solid #fff;
  border-top: 1px solid #fff;
  color: #15803d; }

.nav-tabs {
  border: none;
  float: right; }
  .nav-tabs .nav-link {
    border-bottom: 1px solid #eee; }

.nav-special-br {
  border-left: 1px solid #eee;
  border-right: 1px solid #eee; }

.nav-tabs .nav-link:focus,
.nav-tabs .nav-link:hover {
  border-color: #fff #fff #fff;
  color: #15803d;
  border-bottom: 2px solid #15803d;
  -webkit-transition: 0.2s;
  -o-transition: 0.2s;
  transition: 0.2s; }

.event-underline {
  margin: 68px 0 68px 0; }

@media (max-width: 1200px) {
  .nav-link {
    padding: 8px 12px;
    font-size: 15px; } }

@media (max-width: 992px) {
  .event-date {
    padding: 12px 5px; }
    .event-date h4 {
      font-size: 36px; }
    .event-date span {
      font-size: 15px; }
  .event-time {
    font-size: 14px; } }

@media (max-width: 768px) {
  .nav-tabs {
    float: left; }
  .event-time {
    font-size: 17px; }
  .event-heading {
    margin: 0 0 30px; }
    .event-heading h3 {
      margin: 12px 0;
      font-size: 21px; }
    .event-heading p {
      font-size: 15px; }
  .tab-content img {
    width: 100%;
    margin: 0 0 12px; }
  .event-underline {
    margin: 20px 0 30px 0; }
  .event-highlight-discription {
    margin: 12px 0 0px; }
    .event-highlight-discription p {
      margin: 0 0 8px; } }

@media (max-width: 320px) {
  .nav-link {
    padding: 4px 7px;
    font-size: 13px; } }

/*
 * CALENDAR
 ********************************/
.fc-view {
  margin-top: 30px; }

.fc-toolbar {
  margin-bottom: 5px;
  margin-top: 15px; }

.fc-toolbar h2 {
  font-size: 18px;
  line-height: 30px;
  font-weight: 600;
  text-transform: uppercase; }

.fc-toolbar .fc-state-active,
.fc-toolbar .ui-state-active,
.fc-toolbar button:focus,
.fc-toolbar button:hover {
  z-index: 0; }

.fc-widget-content,
.fc-widget-header {
  border: 1px solid #d7ecfb; }

.fc th.fc-widget-header {
  background: #f5f5f5;
  font-size: 14px;
  line-height: 20px;
  padding: 10px 0px 10px 0px;
  text-transform: uppercase; }

.fc th.fc-widget-header a {
  color: #505458; }

.fc .fc-event .fc-bg {
  display: none; }

.fc .fc-list-item[class*=" bg-"] {
  color: #ffffff; }

.fc .fc-list-item[class*=" bg-"]:hover td {
  background: rgba(255, 255, 255, 0.2); }

.fc-button {
  background: #ffffff;
  color: #555;
  text-transform: capitalize; }

.fc-content {
  color: #FFF; }

.fc-text-arrow {
  font-size: 16px; }

.fc-state-hover {
  background: #f3f3f3; }

.fc-cell-overlay,
.fc-state-highlight {
  background: #f0f0f0; }

.fc-unthemed .fc-today {
  background: #ffffff; }

.fc-state-active,
.fc-state-down {
  -webkit-box-shadow: none;
  box-shadow: none; }

#external-events .fc-event,
.fc .fc-event {
  -webkit-border-radius: 2px;
  -moz-border-radius: 2px;
  border-radius: 2px;
  border: none;
  cursor: move;
  font-size: 12px;
  margin: 5px 7px 5px 7px;
  padding: 5px;
  text-align: center; }

.external-event {
  color: #ffffff;
  cursor: move;
  margin: 10px 0px 10px 0px;
  padding: 6px 10px 6px 10px; }

.fc-basic-view td.fc-day-number,
.fc-basic-view td.fc-week-number span {
  padding-right: 5px; }

.fc-toolbar .fc-button-group .fc-button {
  background: #ffffff; }

.fc-toolbar .fc-button-group .fc-button:hover {
  background: #F5F5F5; }

.fc .fc-event,
.fc .fc-event-dot {
  background: #304ffe;
  -o-transition: none;
  transition: none;
  -moz-transition: none;
  -webkit-transition: none; }

.fc .fc-event-dot {
  background: #ffffff; }

.fc-ltr .fc-basic-view .fc-day-top .fc-day-number {
  color: #434343; }

.fc.fc-ltr .fc-h-event.fc-not-start,
.fc.fc-rtl .fc-h-event.fc-not-end {
  margin-left: 7px; }

@media (max-width: 479px) {
  .fc .fc-toolbar .fc-right {
    width: 100%;
    text-align: left;
    margin-top: 15px; }
  .fc .fc-view-container {
    overflow: auto; } }

/*
 * SHORTCODES
 ********************************/
/* ==============================================================
   SHORTCODES
   ============================================================== */
.tabs {
  padding: 98px 0 0; }
  .tabs h3 {
    margin: 0 0 24px;
    font-weight: 700; }

.shortcode-tab-content {
  border: 1px solid #ccc;
  padding: 24px;
  min-height: 292px;
  line-height: 1.8;
  border-radius: 2px; }

/* Style the tab content */
.tabcontent {
  display: none;
  padding: 6px 12px;
  border: 1px solid #ccc;
  margin: -8px 0 0;
  min-height: 255px; }
  .tabcontent p {
    font-size: 15px;
    padding: 24px 24px;
    line-height: 1.8;
    color: #2d2d2d;
    margin: 0; }

button.accordion {
  background: #fff;
  color: #444;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: 1px solid #eee;
  border-bottom: none;
  text-align: left;
  outline: none;
  font-size: 16px;
  font-weight: 700;
  padding: 17px 30px;
  -webkit-transition: 0.4s;
  -o-transition: 0.4s;
  transition: 0.4s; }

button.accordion.active,
button.accordion:hover {
  border-left: 2px solid #15803d; }

button.accordion:after {
  content: '\002B';
  color: #777;
  font-weight: bold;
  float: right;
  margin-left: 5px; }

button.accordion.active:after {
  content: "\2212"; }

.panel h5 {
  padding: 24px 0 0 30px;
  font-weight: 700;
  font-size: 16px; }

.panel-last {
  border-bottom: 1px solid #eee; }

div.panel {
  background-color: white;
  max-height: 0;
  overflow: hidden;
  -webkit-transition: max-height 0.2s ease-out;
  -o-transition: max-height 0.2s ease-out;
  transition: max-height 0.2s ease-out;
  border-right: 1px solid #eee;
  border-left: 2px solid #15803d; }
  div.panel p {
    font-size: 15px;
    color: #2d2d2d;
    padding: 0px 30px 30px 30px;
    margin: 0;
    line-height: 1.8; }

.accordian-link {
  color: #2d2d2d;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none; }

.accordian-link:hover,
.accordian-link:focus {
  color: #15803d;
  -webkit-transition: 0.2s;
  -o-transition: 0.2s;
  transition: 0.2s;
  text-decoration: none; }

.accordian-link:active {
  color: #15803d; }

.card-header {
  background: none; }

.card-block {
  color: #2d2d2d;
  padding: 20px;
  line-height: 1.8; }

.alert-box {
  padding: 98px 0; }

.alert-title h3 {
  font-weight: 700;
  margin: 0 0 24px; }

.alert {
  border: none;
  border-radius: none;
  margin-bottom: 24px; }
  .alert p {
    margin: 0; }

.alert-success {
  padding: 22px 30px;
  border-radius: 0;
  background: #87b08d;
  color: #fff; }
  .alert-success i {
    margin-right: 24px;
    font-size: 24px;
    color: #fff; }

.alert-info {
  padding: 22px 30px;
  border-radius: 0;
  background: #82abc6;
  color: #fff; }
  .alert-info i {
    margin-right: 24px;
    font-size: 24px;
    color: #fff; }

.alert-danger {
  padding: 22px 30px;
  border-radius: 0;
  background: #f3897e;
  color: #fff; }
  .alert-danger i {
    margin-right: 24px;
    font-size: 24px;
    color: #fff; }

.alert-warning {
  padding: 22px 30px;
  border-radius: 0;
  background: #15803d;
  color: #fff; }
  .alert-warning i {
    margin-right: 24px;
    font-size: 24px;
    color: #fff; }

.typography {
  padding: 0 0 98px; }

.typography-title {
  font-weight: 700;
  margin: 0 0 24px; }

.shortcode-list h3 {
  font-weight: 700;
  margin: 0 0 24px; }

.shortcode-list ul {
  margin: 0;
  padding: 0; }
  .shortcode-list ul li {
    background: url(../images/shortcode-list.png) no-repeat;
    list-style: none;
    color: #686868;
    margin: 0 0 14px;
    padding: 0 0 0 38px; }

.list-general ul {
  margin: 50px 0 0;
  padding: 0; }
  .list-general ul li {
    color: #686868;
    list-style: none;
    margin: 0 0 14px; }
    .list-general ul li span {
      padding: 0 24px 0 0; }

.shortcode-columns {
  padding: 0 0 98px; }
  .shortcode-columns h3 {
    font-weight: 700;
    margin: 0 0 24px; }
  .shortcode-columns h5 {
    font-weight: 700;
    margin: 0 0 12px; }
  .shortcode-columns p {
    color: #686868;
    font-size: 15px;
    line-height: 1.8; }

.button-toggle {
  padding: 0 0 98px; }
  .button-toggle h3 {
    font-weight: 700;
    margin: 0 0 24px; }

.btn-1 {
  width: 100%;
  border-radius: 0; }

.btn-2 {
  width: 100%;
  border-radius: 0;
  background: #15803d; }

.btn-2:hover {
  background: #15803d; }

.btn-3 {
  width: 100%;
  border-radius: 0;
  background: #87b08d; }

.btn-3:hover {
  background: #7daa83; }

.btn-warning.active,
.btn-warning:active,
.show > .btn-warning.dropdown-toggle {
  border: none;
  background: #15803d; }

.bnt-border_1 {
  border-bottom: 4px solid #9e8452; }

.bnt-border_1:hover {
  border-bottom: 4px solid #9e8452; }

.bnt-border_2 {
  border-bottom: 4px solid #ae7056; }

.bnt-border_2:hover {
  border-bottom: 4px solid #ae7056; }

.bnt-border_3 {
  border-bottom: 4px solid #53815a; }

.bnt-border_3:hover {
  border-bottom: 4px solid #53815a; }

.btn-simple {
  text-transform: uppercase;
  color: #2d2d2d;
  background: none;
  border: 1px solid #15803d;
  font-size: 15px;
  padding: 16px 36px;
  border-radius: 0;
  font-weight: 700; }

.btn-default-clr1 {
  border: 1px solid #d19c85; }

.btn-default-clr2 {
  border: 1px solid #87b08d; }

@media (max-width: 992px) {
  .btn-1,
  .btn-2,
  .btn-3 {
    padding: 17px 6px; } }

@media (max-width: 768px) {
  .btn-1,
  .btn-2,
  .btn-3 {
    margin: 0 0 10px; }
  .button-toggle h3 {
    margin: 30px 0 24px; }
  .tabs h3 {
    margin: 30px 0 24px; }
  .shortcode-list {
    margin: 30px 0 0px; }
  .alert-box {
    padding: 34px 0; }
  .alert {
    padding: 22px 18px; } }

/*
 * CONTACT US
 ********************************/
/* ==============================================================
   CONTACT US
   ============================================================== */
.contact {
  padding: 98px 0 0; }

.contact-title h2 {
  font-weight: 700;
  text-align: center;
  margin: 0 0 24px; }

.contact-form {
  background: #15803d;
  position: relative;
  z-index: 2; }
  .contact-form h3 {
    font-weight: 700;
    color: #fff;
    margin: 0 0 24px; }

.btn-submit {
  border: 3px solid #fff;
  color: #fff;
  padding: 13px 44px;
  font-size: 15px;
  margin: 8px 0 0; }

.btn-submit:hover {
  border: 3px solid #fff;
  background: #fff;
  color: #15803d;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s; }

.contact-option {
  border-right: 1px solid #ffffff;
  padding: 45px 64px; }
  .contact-option .form-control {
    border-color: transparent; }

.contact-address {
  padding: 45px 50px; }
  .contact-address h3 {
    font-weight: 700;
    margin: 0 0 24px; }

.contact-details i {
  color: #fff;
  float: left; }

.contact-details h6 {
  font-size: 19px;
  color: #fff;
  padding: 0 30px 0 30px; }

.contact-details p {
  color: #fff4e0;
  padding: 0 30px 0 30px; }

.contact-center {
  background: #15803d;
  border-radius: 50%;
  text-align: center;
  width: 44px;
  height: 44px;
  padding: 10px 0;
  color: #fff;
  margin: 0 auto;
  top: -17em;
  position: relative;
  z-index: 10; }

#map {
  height: 620px;
  width: 100%;
  margin: -250px 0 0; }

@media (max-width: 767px) {
  .contact-option {
    border: 0;
    padding: 20px 15px; }
  .contact-option_rsp {
    border-bottom: 1px solid #ffffff;
    padding: 5px 25px 30px; }
  .contact-center {
    display: none; } }

/* ==============================================================
   Home 2
   ============================================================== */
.nav-menu2 .navbar-light .navbar-nav .nav-link {
  color: #2d2d2d;
  font-size: 16px;
  line-height: 2; }
  .nav-menu2 .navbar-light .navbar-nav .nav-link:hover {
    color: #15803d; }

.nav-menu2 .navbar-nav > li {
  margin: 0 4px; }

.about-style2 h2 {
  text-align: left; }

.about-style2 p {
  text-align: left; }

.about-style2 img {
  margin: 0;
  border-radius: 50%; }

.about-style2 .about-img {
  width: 200px;
  height: 200px;
  margin: 0 auto; }

.event-img2 h3 {
  font-weight: 600;
  padding: 0;
  line-height: 1.5;
  margin-top: -8px; }

.event-img2 span {
  color: #15803d; }

.event-img2 p {
  padding: 10px 0 0; }

.detailed_chart2 {
  padding: 97px 0;
  background: #15803d; }

.faq {
  padding: 97px 0; }

.login {
  padding: 97px 0; }
  .login .btn {
    width: 100%; }
  .login .modal-content {
    border: 1px solid #ccc;
    padding: 20px; }

.sign-up {
  padding: 97px 0; }
  .sign-up .form-control {
    margin-bottom: 10px; }
  .sign-up .btn {
    width: 100%; }

.radio-inline {
  margin-right: 10px; }

.sign-up-form {
  border: 1px solid #ccc;
  padding: 20px;
  border-radius: 3px; }

.gallery {
  padding: 97px 0; }

.gallery-title {
  font-size: 36px;
  color: #42B32F;
  text-align: center;
  font-weight: 500;
  margin-bottom: 70px; }

.gallery-title:after {
  content: "";
  position: absolute;
  width: 7.5%;
  left: 46.5%;
  height: 45px;
  border-bottom: 1px solid #5e5e5e; }

.filter-button {
  font-size: 18px;
  border: 0;
  border-radius: 5px;
  text-align: center;
  color: #2d2d2d;
  margin-bottom: 30px; }

.filter-button:hover,
.filter-button:active {
  font-size: 18px;
  border-radius: 5px;
  text-align: center;
  color: #15803d;
  background: none !important;
  border: 0 !important; }

.btn-default:active .filter-button:active {
  color: #15803d;
  background: none !important;
  border: 0 !important; }

.port-image {
  width: 100%; }

.gallery_product {
  margin-bottom: 30px; }

.gallery-style {
  font-weight: 600;
  position: relative;
  padding-bottom: 10px;
  margin-bottom: 20px;
  text-align: center; }

.notice {
  padding: 97px 0; }

.notice-wrap {
  border-bottom: 1px solid #eaeaea;
  padding: 0 0 20px;
  margin: 20px 0; }
  .notice-wrap img {
    margin: 0 0 10px; }
  .notice-wrap h4 {
    font-weight: 600; }
  .notice-wrap span {
    color: #15803d; }
  .notice-wrap p {
    margin: 12px 0 0;
    line-height: 1.8; }

.speech {
  padding: 97px 0; }
  .speech h2 {
    font-weight: 600;
    line-height: 1.3;
    position: relative;
    padding: 0 0 30px; }
    .speech h2:after {
      content: "";
      position: absolute;
      height: 5px;
      width: 52px;
      background: #15803d;
      left: 0;
      bottom: 0;
      margin: 7px 0 0; }
  .speech p {
    line-height: 1.8;
    margin: 30px 0 30px; }

/* ====================================================
 * COMING SOON
 * ==================================================== */
.coming-soon {
  background: url(../images/coming-soon-img.jpg) no-repeat center center;
  -webkit-background-size: cover;
  background-size: cover;
  display: table;
  position: fixed;
  height: 100%;
  width: 100%;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0; }

.coming-soon-block {
  position: relative;
  top: 50%;
  -webkit-transform: trannslateY(-50%);
  -ms-transform: trannslateY(-50%);
  transform: trannslateY(-50%);
  text-align: center; }
  .coming-soon-block img {
    margin: 0 auto;
    display: block; }
  .coming-soon-block h1 {
    color: #fff;
    padding: 40px 0 10px;
    font-weight: 700; }
  .coming-soon-block p {
    color: #fff;
    font-size: 21px; }
  .coming-soon-block a {
    margin: 20px 0 0; }

@media (max-width: 380px) {
  .coming-soon-block {
    top: 58%; } }

.video-section .pattern-overlay {
  background-color: rgba(0, 0, 0, 0.5);
  padding: 110px 0 32px;
  min-height: 800px;
  /* Incase of overlay problems just increase the min-height*/ }

.video-section h1,
.video-section h3 {
  text-align: center;
  color: #fff; }

.video-section .buttonBar {
  display: none; }

.player {
  font-size: 1px; }

.video-title-block {
  position: absolute;
  top: 58%;
  left: 50%;
  -webkit-transform: translate(-50%, -42%);
  -ms-transform: translate(-50%, -42%);
  transform: translate(-50%, -42%); }
  @media (max-width: 576px) {
    .video-title-block {
      top: 55%;
      left: 25%;
      -webkit-transform: translate(-17%, -43%);
      -ms-transform: translate(-17%, -43%);
      transform: translate(-17%, -43%); } }

.landing-header {
  padding: 20px 0 98px; }

.landing-logo {
  margin: 0 auto;
  display: block; }

.landing-title h2 {
  color: #fff;
  font-weight: 600;
  position: relative;
  padding: 0 0 15px; }
  .landing-title h2:after {
    content: "";
    position: absolute;
    height: 3px;
    width: 50px;
    background: #15803d;
    left: 0;
    bottom: 0; }

.landing-title p {
  color: #d2d1d0;
  line-height: 1.8;
  padding: 15px 0;
  font-weight: 100; }

.landing-title h4 {
  font-weight: 600;
  margin: 0 0 20px;
  color: #fff; }

.landing-title ul {
  margin: 0;
  padding: 0; }
  .landing-title ul li {
    list-style: none; }
    .landing-title ul li a {
      line-height: 1.8; }
      .landing-title ul li a:hover {
        color: #e6cfa2; }

.landing-highlight {
  background: #15803d;
  padding: 20px;
  color: #fff;
  text-align: center; }
  .landing-highlight p {
    font-size: 20px; }

.landing-form-wrap {
  background: #fff;
  padding: 25px;
  border-radius: 3px;
  border: 1px solid #15803d; }
  .landing-form-wrap .btn {
    width: 100%; }

.landing-form {
  padding: 65px 0 0; }

.landing-testimonial_block {
  position: relative;
  background: #f1f1f1;
  padding: 30px 40px;
  z-index: 1; }
  .landing-testimonial_block i {
    font-size: 70px;
    color: #fff;
    position: absolute;
    z-index: -1; }
  .landing-testimonial_block p {
    font-size: 20px;
    z-index: 2;
    padding: 30px 0px 0 8px; }
  .landing-testimonial_block h6 {
    padding: 0 0 0 8px;
    line-height: 1.5; }

.teachers-single {
  padding: 98px 0; }

.teachers-img_block {
  width: 80%;
  -webkit-box-shadow: 0px 14px 28px -9px #cccccc;
  box-shadow: 0px 14px 28px -9px #cccccc; }
  .teachers-img_block img {
    width: 100%; }

.teachers-title_block {
  text-align: center;
  display: block; }
  .teachers-title_block h4 {
    margin: 10px 0 6px; }
  .teachers-title_block h6 {
    margin: 0 0 5px; }
  .teachers-title_block ul {
    margin: 0 auto;
    display: inline-block;
    padding: 0; }
    .teachers-title_block ul li {
      list-style: none;
      float: left;
      margin: 0 6px 0 0; }

.teacher-profile_block h4 {
  font-weight: 600;
  position: relative;
  padding: 0 0 12px;
  margin: 0 0 20px; }
  .teacher-profile_block h4:after {
    content: "";
    position: absolute;
    height: 3px;
    background: #15803d;
    width: 30px;
    bottom: 0;
    left: 0; }

.teacher-profile_block h3 {
  font-weight: 600; }

.teacher-profile_block span {
  font-weight: 600; }

.teacher-profile_block p {
  padding: 12px 0 12px;
  line-height: 1.8;
  margin: 0; }

.teacher-profile_block .time {
  font-weight: 600;
  margin: 0;
  padding: 0; }

.teacher-profile_block ul {
  padding: 0;
  margin: 10px 0 0; }
  .teacher-profile_block ul li {
    line-height: 2;
    list-style: none; }
    .teacher-profile_block ul li span {
      padding: 0 8px 0 0; }
    .teacher-profile_block ul li a {
      float: left;
      padding: 10px 0;
      margin: 0 8px 0 0; }
      .teacher-profile_block ul li a i {
        color: #fff; }

.qualification_detaile {
  margin: 0; }

.experiance {
  text-align: right; }
  @media (max-width: 768px) {
    .experiance {
      text-align: left; } }

.pricing {
  padding: 98px 0;
  background: #f3f3f3; }

.price {
  list-style-type: none;
  border: 1px solid #eee;
  background: #fff;
  margin: 0;
  padding: 0;
  -webkit-transition: 0.3s;
  -o-transition: 0.3s;
  transition: 0.3s; }
  .price:hover {
    -webkit-box-shadow: 0 8px 20px 0 rgba(0, 0, 0, 0.03);
    box-shadow: 0 8px 20px 0 rgba(0, 0, 0, 0.03); }

.price .header {
  background-color: #111;
  color: white;
  font-size: 25px; }

.bg-gold {
  background-color: #15803d !important; }

.price li {
  border-bottom: 1px solid #eee;
  padding: 20px;
  text-align: center; }

.price .grey {
  background-color: #eee;
  font-size: 20px; }

.price .button {
  background-color: #15803d;
  border: none;
  color: #fff;
  padding: 10px 25px;
  text-align: center;
  text-decoration: none;
  font-size: 18px; }

.call-to_action {
  padding: 30px 0; }

.mega-dropdown {
  position: static !important;
  width: 100%;
  top: 0; }

.mega-dropdown-menu {
  padding: 20px 0px;
  margin: 0;
  width: 100%;
  box-shadow: none;
  -webkit-box-shadow: none;
  border: none !important; }

.mega-dropdown-menu > li > ul {
  padding: 0;
  margin: 0; }

.mega-dropdown-menu > li {
  margin: 0;
  display: inline-block;
  width: 24%; }
  @media (max-width: 1200px) {
    .mega-dropdown-menu > li {
      vertical-align: top; } }
  @media (max-width: 992px) {
    .mega-dropdown-menu > li {
      text-align: left;
      width: 100%;
      margin: 0 0 8px; } }
  @media (max-width: 768px) {
    .mega-dropdown-menu > li {
      width: 100%; } }

.mega-dropdown-menu > li > ul > li {
  list-style: none; }

.mega-dropdown-menu > li > ul > li > a {
  display: block;
  padding: 0;
  clear: both;
  font-weight: normal;
  line-height: 1.8;
  color: #999;
  white-space: normal; }

.mega-dropdown-menu > li ul > li > a:hover,
.mega-dropdown-menu > li ul > li > a:focus {
  text-decoration: none;
  color: #444; }

.mega-dropdown-menu .dropdown-header {
  color: #15803d;
  font-size: 18px;
  font-weight: bold;
  margin: 0 0 10px; }

.mega-dropdown-menu form {
  margin: 3px 20px; }

.mega-dropdown-menu .form-group {
  margin-bottom: 3px; }

.dropdown-header {
  padding: 0; }

.dropdown-item.dropdown-toggle::after {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 0.6em;
  vertical-align: middle;
  content: "";
  border-left: .3em solid;
  border-top: .3em solid transparent;
  border-bottom: .3em solid transparent; }

.header-topbar {
  padding: 10px;
  background: #2d2d2d; }

.header-top_address {
  color: #d8d8d8;
  font-size: 15px; }
  .header-top_address .header-top_list {
    display: inline-block;
    margin-right: 22px; }
    @media (max-width: 768px) {
      .header-top_address .header-top_list:last-child {
        display: none; } }
    @media (max-width: 480px) {
      .header-top_address .header-top_list:nth-child(2) {
        display: none; } }
    .header-top_address .header-top_list span {
      color: #15803d;
      margin-right: 10px;
      font-size: 14px; }
  @media (max-width: 768px) {
    .header-top_address {
      display: inline-block; } }

.header-top_login,
.header-top_login2 {
  float: right;
  color: #fff;
  -webkit-transition: 0.2s;
  -o-transition: 0.2s;
  transition: 0.2s;
  font-size: 15px; }
  .header-top_login a,
  .header-top_login2 a {
    color: #fff; }
    .header-top_login a:hover, .header-top_login a:focus,
    .header-top_login2 a:hover,
    .header-top_login2 a:focus {
      color: #15803d; }

@media (max-width: 574px) {
  .header-top_login {
    display: none; } }

@media (min-width: 574px) {
  .header-top_login2 {
    display: none; } }

/* NAVBAR STYLE TWO */
.navbar2 {
  border-radius: 0;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
  background: #fff; }

.affix {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1030; }

/* fixed to top styles */
.affix {
  background-color: #fff;
  border-bottom: 1px solid #e6e6e6;
  -webkit-box-shadow: 0px 3px 12px -5px rgba(0, 0, 0, 0.2);
  box-shadow: 0px 3px 12px -5px rgba(0, 0, 0, 0.2); }

.dropdown-submenu {
  position: relative; }

.dropdown-submenu > .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -6px;
  margin-left: 1px; }

.dropdown-submenu > a:after {
  display: block;
  content: "";
  float: right;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
  border-width: 5px 0 5px 5px;
  border-left-color: #ccc;
  margin-top: 5px;
  margin-right: -10px; }

.dropdown-submenu:hover > a:after {
  border-left-color: #fff; }

.dropdown-submenu.pull-left {
  float: none; }

.dropdown-submenu.pull-left > .dropdown-menu {
  left: -100%;
  margin-left: 10px;
  -webkit-border-radius: 6px 0 6px 6px;
  -moz-border-radius: 6px 0 6px 6px;
  border-radius: 6px 0 6px 6px; }

@media (min-width: 991px) {
  .dropdown-submenu:hover > .dropdown-menu {
    display: block;
    -webkit-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease; } }

/*# sourceMappingURL=style.css.map */
/* ================== SMADU – CUSTOM HOMEPAGE ================== */

/* ---------- 1. HEADER & NAVBAR ---------- */

/* header putih (desktop) */
.navbar.navbar2 {
  padding: 8px 0;
  min-height: auto;
  background: #fff;
}

/* logo */
.navbar-brand img {
  max-height: 40px;
  height: auto;
  width: auto;
}

/* topbar & navbar di HP / tablet */
@media (max-width: 768px) {
  .header-topbar {
    padding: 6px 8px;
    font-size: 11px;
  }

  /* sembunyikan sebagian teks supaya tidak penuh */
  .header-top_address .header-top_list:nth-child(2),
  .header-top_address .header-top_list:nth-child(3) {
    display: none;
  }

  /* navbar putih lebih tipis */
  .navbar.navbar2 {
    padding: 2px 8px !important;
    min-height: 44px !important;
  }

  /* brand (logo + teks) dirapikan */
  .navbar.navbar2 .navbar-brand {
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
    align-items: center;
    gap: 6px;
    max-width: calc(100% - 60px); /* sisakan ruang buat tombol menu */
  }

  /* logo diperkecil di HP */
  .navbar.navbar2 .navbar-brand img {
    max-height: 30px !important;
  }

  /* teks nama sekolah diperkecil */
  .navbar.navbar2 .navbar-brand strong,
  .navbar.navbar2 .navbar-brand span {
    font-size: 11px;
    line-height: 1.2;
    white-space: normal;
  }

  /* tombol hamburger di ujung kanan & kecil */
  .navbar.navbar2 .navbar-toggler,
  .navbar-light .navbar-toggler {
    margin-left: auto;
    padding: 2px 6px !important;
    font-size: 18px !important;
  }
}

/* MENU MOBILE – jadi kotak lebar rapi */
@media (max-width: 991px) {

  .navbar-collapse {
    background: #ffffff;
    padding: 10px 0 16px;
    margin: 0;
  }

  .navbar-nav {
    width: 100%;
    padding: 0 10px;
    margin: 0;
  }

  .navbar-nav > li {
    width: 100%;
    margin: 6px 0;
    list-style: none;
  }

  .navbar-nav .nav-link {
    display: block;
    width: 100%;
    padding: 10px 16px !important;
    font-size: 15px;
    font-weight: 500;
    text-align: center;

    background: #ffffff;
    color: #333 !important;
    border-radius: 12px;
    border: 1px solid #e5e5e5;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);

    transition: background 0.2s ease,
                box-shadow 0.2s ease,
                transform 0.15s ease;
  }

  .navbar-nav .nav-link:hover,
  .navbar-nav .nav-link:focus {
    background: #f7f7f7;
    color: #000 !important;
    box-shadow: 0 3px 8px rgba(0,0,0,0.1);
    transform: translateY(-1px);
  }

  .navbar-nav .nav-link.active {
    background: #f8f8f8;
    font-weight: 600;
  }
}

/* ---------- 2. SPASI SECTION DI HP ---------- */
@media (max-width: 576px) {
  .about,
  .our_courses,
  .event,
  .detailed_chart,
  footer {
    padding-top: 32px;
    padding-bottom: 32px;
  }

  .about h2,
  .our_courses h2 {
    font-size: 24px;
    margin-bottom: 14px;
  }

  .about p {
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 10px;
  }
}

/* ---------- 3. ARTIKEL TERBARU (OUR COURSES) ---------- */

/* buang tinggi paksa bawaan (min-height: 340px) */
.our_courses .courses_box {
  min-height: auto;
}

/* GRID & KARTU DI HP */
@media (max-width: 576px) {

  /* paksa 2 kolom di HP */
  .our_courses .col-xs-12.col-sm-6.col-md-6.col-lg-3 {
    flex: 0 0 50%;
    max-width: 50%;
    padding-left: 8px;
    padding-right: 8px;
  }

  .our_courses .courses_box {
    padding: 8px;
    margin-bottom: 14px;
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  }

  .our_courses .course-img-wrap img {
    width: 100%;
    max-height: 150px;
    object-fit: cover;
    border-radius: 8px;
  }

  .our_courses .course-box-content {
    padding: 4px 4px 8px;
  }

  .our_courses .course-box-content h3 {
    font-size: 13px;
    line-height: 1.3;
    margin: 4px 2px 4px;
  }

  .btn-courses {
    padding: 7px 20px;
    font-size: 13px;
    border-radius: 6px;
  }
}

/* ---------- 4. EVENT & CHART DI HP ---------- */
@media (max-width: 576px) {
  .event h3 {
    font-size: 16px;
  }

  .event p,
  .event span {
    font-size: 13px;
  }

  .chart-text p {
    font-size: 14px;
  }
}

/* ---------- 5. FOOTER DI HP ---------- */
@media (max-width: 576px) {
  footer .col-md-3 {
    text-align: center;
    margin-bottom: 18px;
  }

  footer p,
  footer li,
  footer a {
    font-size: 12px;
  }

  .foot-logo img {
    max-width: 120px;
  }
}

/* ---------- 6. CHART RESPONSIVE DI HP ---------- */
@media (max-width: 576px) {
  .chart_bottom {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 10px 0;
  }

  /* Jadikan 3 kolom sejajar */
  .detailed_chart .row > div {
    flex: 0 0 33.33%;
    max-width: 33.33%;
    padding: 5px;
  }

  .chart-img img {
    max-width: 48px;   /* kecilkan ikon */
    margin-bottom: 6px;
  }

  .chart-text p {
    font-size: 13px;
    margin: 0;
  }

  .chart-text .counter {
    font-size: 16px;
    font-weight: bold;
  }
}

/* ---------- 7. PENGUMUMAN HOMEPAGE (GRID KECIL) ---------- */

.home-notice-grid {
  margin-top: 10px;
}

.home-notice-card {
  background: #ffffff;
  border-radius: 10px;
  padding: 8px 6px 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.06);
  height: 100%;
  display: flex;
  flex-direction: column;
}

.home-notice-img img {
  max-width: 60px;
  max-height: 60px;
  margin: 0 auto 6px;
  display: block;
  object-fit: contain;
}

.home-notice-date {
  font-size: 11px;
  color: #15803d;
}

.home-notice-title {
  font-size: 13px;
  margin: 2px 4px;
  line-height: 1.3;
}

.home-notice-title a {
  color: #2d2d2d;
  text-decoration: none;
}

.home-notice-title a:hover {
  color: #15803d;
}

.home-notice-text {
  font-size: 11.5px;
  margin: 0 4px 2px;
}

/* Grid spacing on mobile */
@media (max-width: 576px) {
  .home-notice-grid .col-6 {
    padding: 5px;
  }
}

/* ---------- 8. AGENDA – LIST RAPI DI HP ---------- */

/* jarak antar item, berlaku semua ukuran */
.agenda-item {
  margin-bottom: 20px;
}

/* layout khusus HP */
@media (max-width: 576px) {

  .agenda-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid #eeeeee;
  }

  .agenda-item:last-child {
    border-bottom: none;
  }

  /* kotak tanggal kecil di kiri */
  .agenda-item .event_date {
    float: none;
    margin: 0;
    width: auto;
  }

  .agenda-item .event-date-wrap {
    width: 64px;
    height: 64px;
    padding: 8px 0;
    margin: 0;
  }

  /* teks di kanan, rata kiri */
  .agenda-item .date-description {
    margin-left: 0;
    text-align: left;
  }

  .agenda-item .date-description h3 {
    font-size: 14px;
    line-height: 1.35;
    margin: 0 0 4px;
    display: block;
    position: static;
  }

  /* garis kecil di bawah judul disembunyikan */
  .agenda-item .date-description h3:after {
    display: none !important;
  }

  .agenda-item .date-description p {
    font-size: 12px;
    line-height: 1.4;
    margin: 0;
  }

  /* garis pemisah bawaan tak dipakai di HP */
  .agenda-item .event_line {
    display: none;
  }
}
/* ===== HEADER SUPER TIPIS DI HP ===== */
@media (max-width: 768px) {

  /* Hilangkan ruang kosong atas/bawah keseluruhan header */
  .header-topbar,
  .nav-menu,
  .nav-menu2,
  .navbar,
  .navbar.navbar2 {
    margin: 0 !important;
    padding: 0 !important;
    min-height: 40px !important;
  }

  /* Logo dan teks sejajar, kecil, tidak ada padding */
  .navbar-brand {
    display: flex !important;
    align-items: center !important;
    gap: 5px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .navbar-brand img {
    max-height: 28px !important;
    width: auto !important;
  }

  .navbar-brand span,
  .navbar-brand strong {
    font-size: 10px !important;
    line-height: 1.1 !important;
  }

  /* Tombol hamburger kecil & rapat */
  .navbar-toggler {
    padding: 2px 6px !important;
    margin-right: 6px !important;
    font-size: 18px !important;
  }

  /* Hilangkan jarak antar elemen navbar */
  .navbar-nav,
  .navbar-collapse {
    margin: 0 !important;
    padding: 0 !important;
  }
}
/* ===== RAPIKAN ISI HEADER DI HP ===== */
@media (max-width: 768px) {

  /* bar putih: isi rata kiri-kanan, sejajar tengah */
  .nav-menu .navbar.navbar2,
  .nav-menu2 .navbar.navbar2 {
    display: flex;
    align-items: center;
  }

  /* container di dalam navbar dibikin flex juga */
  .nav-menu .navbar.navbar2 > .container,
  .nav-menu2 .navbar.navbar2 > .container {
    display: flex;
    align-items: center;
    justify-content: space-between;   /* logo di kiri, menu di kanan */
    padding: 0 8px !important;
  }

  /* logo + teks nama sekolah */
  .nav-menu .navbar-brand,
  .nav-menu2 .navbar-brand {
    display: flex !important;
    align-items: center !important;
    gap: 6px;
    margin: 0 !important;
    padding: 0 !important;
  }

  .nav-menu .navbar-brand img,
  .nav-menu2 .navbar-brand img {
    max-height: 26px !important;
    width: auto;
  }

  .nav-menu .navbar-brand span,
  .nav-menu .navbar-brand strong,
  .nav-menu2 .navbar-brand span,
  .nav-menu2 .navbar-brand strong {
    font-size: 10px !important;
    line-height: 1.2 !important;
    white-space: normal;
  }

  /* tombol hamburger di ujung kanan, kecil & rapi */
  .nav-menu .navbar-toggler,
  .nav-menu2 .navbar-toggler,
  .nav-menu .navbar-toggle,
  .nav-menu2 .navbar-toggle {
    margin: 0 0 0 auto !important;
    padding: 2px 6px !important;
    font-size: 18px !important;
    border-radius: 4px;
  }
}
/* ===== PERBAIKI POSISI TEKS BRAND SUPAYA TIDAK NEMPEL ATAS ===== */
@media (max-width: 768px) {

  .nav-menu .navbar-brand,
  .nav-menu2 .navbar-brand {
    padding-top: 4px !important;   /* tambahkan sedikit ruang atas */
    padding-bottom: 2px !important;
  }

  .nav-menu .navbar-brand img,
  .nav-menu2 .navbar-brand img {
    margin-right: 4px; /* spasi kecil antara logo & teks */
    margin-top: 2px;   /* sedikit turun agar sejajar */
  }

  .nav-menu .navbar-brand span,
  .nav-menu2 .navbar-brand span,
  .nav-menu .navbar-brand strong,
  .nav-menu2 .navbar-brand strong {
    display: inline-block;
    margin-top: 2px;   /* turunkan teks sedikit */
  }
}
/* ===== PERBAIKI POSISI TOPBAR & NAVBAR (AGAR TIDAK NEMPEL ATAS) ===== */
@media (max-width: 768px) {

  /* Topbar (ikon telp, nomor, Hubungi Kami) */
  .header-topbar {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
    line-height: 1.4 !important;
  }

  .header-topbar .header-top_list {
    display: flex;
    align-items: center; /* sejajarkan icon dan teks */
    gap: 4px;
  }

  /* Navbar putih (Logo sekolah + icon menu) */
  .navbar.navbar2 {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
  }

  /* Sejajarkan logo dan teks sekolah */
  .navbar-brand {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .navbar-brand img {
    max-height: 32px !important;
  }

  /* Tombol menu (hamburger) turun sedikit */
  .navbar-light .navbar-toggler {
    margin-top: 2px;
    margin-bottom: 2px;
    padding: 4px 6px !important;
    font-size: 20px !important;
  }

}
/* ===== FOOTER MOBILE RAPI (≤576px) ===== */
@media (max-width: 576px) {

  footer {
    padding: 22px 14px 26px;
  }

  /* grid footer */
  footer .container > .row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }

  /* setiap col-md-3 duluannya full width */
  footer .container > .row > .col-md-3 {
    flex: 0 0 100%;
    max-width: 100%;
    text-align: center;
    margin-bottom: 18px;
  }

  /* kolom 2 & 3 (Menu Utama & Akademik) jadi 2 kolom */
  footer .container > .row > .col-md-3:nth-child(2),
  footer .container > .row > .col-md-3:nth-child(3) {
    flex: 0 0 50%;
    max-width: 50%;
    margin-bottom: 14px;
  }

  /* ===== LOGO SEKOLAH (kolom 1) ===== */
  .foot-logo img {
    max-width: 120px;
    display: block;
    margin: 0 auto 6px;
  }
  .foot-logo img {
    max-width: 90px !important;   /* dari 120px jadi 90px */
    margin-bottom: 4px;
  }

  .foot-logo p {
    font-size: 12px;   /* font nama sekolah ikut menyesuaikan */
  }
  .foot-logo p {
    font-size: 13px;
    font-weight: 600;
    margin: 0;
  }

  /* ===== JUDUL KOLOM ===== */
  footer h3 {
    font-size: 14px;
    margin-bottom: 6px;
    font-weight: 600;
  }

  /* list menu lebih rapat & rapi */
  footer ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }

  footer ul li {
    margin: 2px 0;
  }

  footer ul li a {
    font-size: 13px;
    line-height: 1.3;
    text-decoration: none;
  }

  /* supaya list di kolom 2 & 3 tidak terlalu mepet kiri/kanan */
  footer .container > .row > .col-md-3:nth-child(2) ul,
  footer .container > .row > .col-md-3:nth-child(3) ul {
    display: inline-block;
    text-align: left;
  }

  /* ===== HUBUNGI KAMI (kolom 4) ===== */
  .address {
    text-align: center;
  }

  .address p {
    font-size: 13px;
    margin-bottom: 4px;
  }

  .address p span {
    font-weight: 600;
  }

  .footer-social-icons {
    display: flex;
    justify-content: center;
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 8px 0 0;
  }
}
/* ===== PERBAIKI SLIDER DI HP (TEKS + TOMBOL) ===== */
@media (max-width: 576px) {

  /* Posisi blok teks di tengah agak ke atas */
  .carousel-caption,
  .home-slider .carousel-caption,
  .slider-content {
    top: 45% !important;              /* naik turun pakai angka ini */
    transform: translateY(-50%);
    padding: 0 18px;
  }

  /* Judul besar (baris paling atas) */
  .carousel-caption h2,
  .home-slider .carousel-caption h2,
  .slider-content h2 {
    font-size: 24px;                  /* boleh turunkan ke 22 kalau masih kebesaran */
    line-height: 1.25;
    font-weight: 700;
    margin-bottom: 8px;
  }

  /* Tulisan penjelasan di bawah judul */
  .carousel-caption p,
  .home-slider .carousel-caption p,
  .slider-content p {
    font-size: 13px;
    line-height: 1.35;
    margin-bottom: 4px;
  }

  /* Tombol LEARN MORE supaya MUNCUL di HP */
  .carousel-caption .btn,
  .home-slider .carousel-caption .btn,
  .slider-content .btn {
    display: inline-block !important; /* override kalau ada yg di-hide di mobile */
    font-size: 13px;
    padding: 6px 18px;
    margin-top: 6px;
  }
}
/* ============================================================
   HERO SMA MA'ARIF (MODERN PROFESIONAL)
============================================================ */

/* background di belakang card hero */
.hero-smanu {
  background: linear-gradient(135deg, #ecfdf5 0%, #ffffff 45%, #eff6ff 100%);
  padding: 2.8rem 0 3.5rem;
}

/* card hero di tengah */
.hero-smanu-inner {
  max-width: 1120px;
  margin: 0 auto;
  background: #ffffff;
  border-radius: 24px;
  box-shadow: 0 22px 45px rgba(15, 23, 42, 0.12);
  padding: 2.4rem 3rem;
}

/* hilangkan padding container di dalam hero card */
.hero-smanu-inner .container {
  padding-left: 0;
  padding-right: 0;
}

/* TEKS */
.hero-smanu-text {
  max-width: 560px;
}

.hero-smanu-tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 999px;
  border: 1px solid rgba(22, 163, 74, 0.25);
  background: #ecfdf5;
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #15803d;
  margin-bottom: 14px;
}

.hero-smanu-title {
  font-size: 36px;
  line-height: 1.25;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 16px;
}

.hero-smanu-desc {
  font-size: 15px;
  color: #4b5563;
  margin-bottom: 22px;
}

/* tombol */
.hero-smanu-actions .btn-lg {
  font-size: 14px;
  padding: 0.65rem 1.7rem;
  border-radius: 999px;
}

.hero-smanu-btn-main {
  background: #15803d;
  border-color: #15803d;
}

.hero-smanu-btn-main:hover {
  background: #166534;
  border-color: #166534;
}

.hero-smanu-btn-ghost {
  border-color: #9ca3af;
  color: #374151;
  background: #ffffff;
}

.hero-smanu-btn-ghost:hover {
  background: #f3f4f6;
}

/* HIGHLIGHT DALAM 1 BARIS */
.hero-smanu-stats {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: stretch;
  gap: 10px;
  margin-top: 20px;
}

.hero-smanu-stats .stat-box {
  position: relative;
  flex: 1;
  min-width: 0;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 10px 14px 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

/* garis aksen di atas box */
.hero-smanu-stats .stat-box::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #22c55e, #0ea5e9);
}

/* efek hover */
.hero-smanu-stats .stat-box:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.10);
  border-color: #c7d2fe;
}

/* teks dalam highlight */
.stat-label {
  font-size: 10px;
  letter-spacing: .12em;
  margin-bottom: 2px;
  color: #9ca3af;
  text-transform: uppercase;
}

.stat-value {
  font-size: 14px;
  font-weight: 600;
  color: #111827;
}

/* FOTO / SLIDER */
.hero-smanu-photo-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.hero-smanu-photo-card {
  position: relative;
  max-width: 380px;
  width: 100%;
  border-radius: 20px;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 20px 40px rgba(0,0,0,0.12);
}

.hero-smanu-photo-card .carousel-inner {
  border-radius: 20px;
  overflow: hidden;
}

.hero-smanu-photo-img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  display: block;
}

/* hilangkan border/outline aneh dari carousel */
.hero-smanu-photo-card,
.hero-smanu-photo-card .carousel-inner,
.hero-smanu-photo-card img,
#heroCarousel {
  border: none !important;
  outline: none !important;
}

/* badge caption di atas foto */
.hero-smanu-caption-badge {
  position: absolute;
  left: 14px;
  bottom: 14px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.78);
  color: #e5e7eb;
  font-size: 10px;
  white-space: nowrap;
}
/* CAPTION DI BAWAH FOTO – VERSI LEBIH HIDUP */
.hero-smanu-caption {
  margin-top: 16px;
  text-align: right; /* sejajar dengan foto */
}

.hero-smanu-caption-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  background: linear-gradient(90deg, #ecfdf5, #dbeafe);
  border: 1px solid #bbf7d0;
  box-shadow: 0 8px 18px rgba(22, 163, 74, 0.18);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #065f46;
}

/* titik hijau kecil di dalam chip */
.hero-smanu-caption-chip::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.25);
}



/* kontrol slider kecil */
.hero-smanu-control {
  width: 14%;
}

.hero-smanu-photo-card .carousel-control-prev-icon,
.hero-smanu-photo-card .carousel-control-next-icon {
  filter: invert(1);
}

/* RESPONSIVE */
@media (max-width: 991.98px) {
  .hero-smanu-inner {
    padding: 2rem 1.6rem;
  }
  .hero-smanu-title {
    font-size: 28px;
  }
  .hero-smanu-photo-wrap {
    align-items: flex-start;
    margin-top: 1.5rem;
  }
}

@media (max-width: 576px) {
  .hero-smanu-inner {
    padding: 1.6rem 1.2rem;
  }

  .hero-smanu-title {
    font-size: 24px;
  }

  .hero-smanu-desc {
    font-size: 13px;
  }

  .hero-smanu-stats .stat-box {
    padding: 8px 10px;
  }

  .hero-smanu-photo-img {
    height: 200px;
  }
}
/* RESPONSIVE: caption foto kecil & rapi di HP */
@media (max-width: 576px) {
  .hero-smanu-caption {
    margin-top: 10px;
    text-align: center; /* lebih natural di HP */
  }

  .hero-smanu-caption-chip {
    font-size: 8px;
    padding: 3px 10px;
    letter-spacing: .10em;
    border-radius: 999px;
    box-shadow: 0 4px 12px rgba(22, 163, 74, 0.1);
  }

  .hero-smanu-caption-chip::before {
    width: 5px;
    height: 5px;
    box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.25);
  }
}
/* ===== CAPTION FOTO ULTRA COMPACT DI HP ===== */
@media (max-width: 576px) {

  .hero-smanu-caption {
    margin-top: 6px;
    text-align: center;
  }

  .hero-smanu-caption-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;      /* lebih kecil */
    font-size: 7.5px;      /* super kecil tapi tetap terbaca */
    letter-spacing: .08em;
    background: #f3f4f6;   /* abu lembut */
    border: 1px solid #d1d5db;
    border-radius: 999px;
    box-shadow: none !important;  /* hilangkan glow */
    color: #4b5563;
  }

  /* titik hijau lebih kecil lagi */
  .hero-smanu-caption-chip::before {
    width: 4px;
    height: 4px;
    box-shadow: none;
    background: #22c55e;
  }
}
/* ============================================================
   ABOUT / WELCOME SECTION
============================================================ */

.about-smanu {
  padding: 3rem 0 3.5rem;
  background: #f9fafb;
}

.about-smanu-text {
  max-width: 620px;
}

.about-smanu-tag {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.5);
  background: #e5e7eb;
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #374151;
  margin-bottom: 10px;
}

.about-smanu-title {
  font-size: 26px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 12px;
}

.about-smanu-desc {
  font-size: 14px;
  line-height: 1.7;
  color: #4b5563;
  margin-bottom: 16px;
}

/* chip poin singkat */
.about-smanu-points {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.about-smanu-chip {
  padding: 3px 10px;
  border-radius: 999px;
  background: #ecfdf5;
  color: #166534;
  font-size: 11px;
  border: 1px solid #bbf7d0;
}

/* kartu kepala sekolah */
.about-smanu-principal-card {
  background: #ffffff;
  border-radius: 20px;
  padding: 18px 18px 16px;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.12);
  display: flex;
  flex-direction: column;
  align-items: center;
}

.about-smanu-photo-wrap {
  width: 140px;
  height: 140px;
  border-radius: 999px;
  padding: 4px;
  background: linear-gradient(135deg, #22c55e, #0ea5e9);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}

.about-smanu-photo {
  width: 100%;
  height: 100%;
  border-radius: 999px;
  object-fit: cover;
  border: 4px solid #ffffff;
}

.about-smanu-principal-info {
  text-align: center;
}

.about-smanu-principal-name {
  font-size: 13px;
  font-weight: 600;
  color: #0f172a;
  margin-bottom: 4px;
}

.about-smanu-principal-role {
  font-size: 11px;
  color: #6b7280;
}

/* RESPONSIVE */
@media (max-width: 991.98px) {
  .about-smanu {
    padding: 2.5rem 0 3rem;
  }
  .about-smanu-title {
    font-size: 22px;
  }
}

@media (max-width: 576px) {
  .about-smanu-text {
    text-align: left;
  }
  .about-smanu-principal-card {
    margin-top: 1rem;
  }
}

/* ============================================================
   WELCOME SECTION - VERSI BESAR & NUANSA HIJAU
============================================================ */

.about-smanu {
  padding: 4.5rem 0 4rem;
  background: #f3faf7; /* hijau sangat muda */
}

.about-smanu-title {
  font-size: 34px;       /* lebih besar */
  line-height: 1.25;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 16px;
}

.about-smanu-desc {
  font-size: 16px;       /* lebih besar */
  line-height: 1.8;
  color: #475569;
  max-width: 620px;
  margin-bottom: 20px;
}

/* Chip poin: hijau */
.about-smanu-chip {
  padding: 6px 14px;
  border-radius: 999px;
  background: #ecfdf5;
  color: #15803d;
  font-size: 13px;
  border: 1px solid #bbf7d0;
}

/* Tag "Welcome" hijau */
.about-smanu-tag {
  background: #dcfce7;
  border: 1px solid #86efac;
  color: #166534;
}

/* Kartu kepala sekolah */
.about-smanu-principal-card {
  background: #ffffff;
  border-radius: 24px;
  padding: 28px 26px 24px;
  box-shadow: 0 25px 45px rgba(15, 23, 42, 0.15);
  text-align: center;
  border: 1px solid #e2e8f0;
}

/* Foto kepala sekolah — lingkaran hijau */
.about-smanu-photo-wrap {
  width: 170px;
  height: 170px;
  border-radius: 999px;
  padding: 5px;
  background: linear-gradient(135deg, #16a34a, #22c55e);
  margin: 0 auto 16px auto;
}

.about-smanu-photo {
  width: 100%;
  height: 100%;
  border-radius: 999px;
  object-fit: cover;
  border: 4px solid #ffffff;
}

.about-smanu-principal-name {
  font-size: 15px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 4px;
}

.about-smanu-principal-role {
  font-size: 13px;
  color: #64748b;
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .about-smanu-title { font-size: 28px; }
  .about-smanu-desc { font-size: 14px; }
  .about-smanu-chip { font-size: 11px; padding: 5px 12px; }
}
/* ============================================================
   ARTIKEL TERBARU
============================================================ */

.artikel-section {
  padding: 4rem 0 4.5rem;
  background: radial-gradient(circle at top left, #ecfdf5 0, #f9fafb 40%, #f3f4f6 100%);
}

.artikel-heading {
  max-width: 520px;
}

.artikel-tag {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  background: #dcfce7;
  border: 1px solid #86efac;
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #166534;
  margin-bottom: 8px;
}

.artikel-title {
  font-size: 28px;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 6px;
}

.artikel-subtitle {
  font-size: 13px;
  color: #6b7280;
  margin-bottom: 0;
}

/* kartu artikel */
.artikel-card-link {
  text-decoration: none;
  color: inherit;
}

.artikel-card {
  background: #ffffff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 18px 38px rgba(15, 23, 42, 0.15);
  display: flex;
  flex-direction: column;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  border: 1px solid transparent;
}

.artikel-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 48px rgba(15, 23, 42, 0.22);
  border-color: #bbf7d0;
}

/* gambar: ratio rapi 4:3 */
.artikel-card-img-wrap {
  width: 100%;
  padding-top: 75%; /* 4:3 */
  position: relative;
  overflow: hidden;
}

.artikel-card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.artikel-card:hover .artikel-card-img {
  transform: scale(1.05);
}

/* body card */
.artikel-card-body {
  padding: 12px 14px 14px;
}

.artikel-judul {
  font-size: 14px;
  font-weight: 600;
  color: #111827;
  line-height: 1.5;
  margin: 0;
}

/* tombol "lihat semua" */
.btn-artikel-more {
  display: inline-block;
  margin-top: 8px;
  padding: 8px 26px;
  border-radius: 999px;
  border: 1px solid #15803d;
  background: transparent;
  font-size: 13px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #15803d;
  text-decoration: none;
  transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}

.btn-artikel-more:hover {
  background: #15803d;
  color: #ffffff;
  box-shadow: 0 14px 30px rgba(22, 163, 74, 0.35);
}

/* RESPONSIVE */
@media (max-width: 768px) {
  .artikel-title {
    font-size: 22px;
  }
  .artikel-subtitle {
    font-size: 12px;
  }
  .artikel-card-body {
    padding: 10px 10px 12px;
  }
  .artikel-judul {
    font-size: 13px;
  }
}
/* ============================================================
   EVENT & AGENDA
============================================================ */

.event-smanu {
  padding: 4rem 0 4.5rem;
  background: #ffffff;
}

/* judul kolom */
.event-column-head {
  margin-bottom: 1.4rem;
}

.event-tag {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  background: #dcfce7;
  border: 1px solid #86efac;
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #166534;
  margin-bottom: 6px;
}

.event-tag-agenda {
  background: #e0f2fe;
  border-color: #7dd3fc;
  color: #0e7490;
}

.event-title {
  font-size: 22px;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
}

/* ====== PENGUMUMAN CARD ====== */

.home-notice-link {
  text-decoration: none;
  color: inherit;
}

.home-notice-card {
  background: #ffffff;
  border-radius: 18px;
  padding: 16px 12px 14px;
  box-shadow: 0 16px 32px rgba(15, 23, 42, 0.10);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  border: 1px solid transparent;
  height: 100%;
}

.home-notice-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 40px rgba(15, 23, 42, 0.18);
  border-color: #bbf7d0;
}

.home-notice-img img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  margin-bottom: 6px;
}

.home-notice-date {
  display: block;
  font-size: 10px;
  color: #9ca3af;
  margin-bottom: 4px;
}

.home-notice-title {
  font-size: 13px;
  font-weight: 600;
  color: #111827;
  margin-bottom: 4px;
}

.home-notice-text {
  font-size: 11px;
  color: #6b7280;
  margin-bottom: 0;
}

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

.event-agenda-list {
  margin-top: 0.4rem;
}

.agenda-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 1.6rem;
}

.event-date {
  margin-right: 1rem;
}

.event-date-wrap {
  width: 64px;
  text-align: center;
  border-radius: 10px;
  background: #4b5563;
  color: #f9fafb;
  padding: 6px 4px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.35);
}

.event-date-wrap p {
  font-size: 18px;
  font-weight: 700;
  margin: 0;
}

.event-date-wrap span {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.event-description {
  flex: 1;
}

.event-agenda-title {
  font-size: 15px;
  font-weight: 600;
  margin: 0 0 4px 0;
}

.event-agenda-title a {
  color: #0f172a;
  text-decoration: none;
}

.event-agenda-title a:hover {
  color: #15803d;
}

.event-agenda-text {
  font-size: 12px;
  color: #6b7280;
  margin-bottom: 6px;
}

.event_line {
  border: 0;
  border-bottom: 1px solid #e5e7eb;
  margin: 0;
}

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

@media (max-width: 768px) {
  .event-smanu {
    padding: 3rem 0 3.5rem;
  }
  .event-title {
    font-size: 20px;
  }
  .event-date-wrap {
    width: 58px;
  }
}
/* ===== PERBAIKI WARNA TANGGAL AGENDA ===== */

/* matikan kotak coklat bawaan tema lama */
.event_date,
.event-date {
  background: transparent !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* kotak tanggal baru: hijau, bersih */
.event-date-wrap {
  width: 68px;
  text-align: center;
  border-radius: 14px;
  background: linear-gradient(135deg, #16a34a, #22c55e);
  color: #f9fafb;
  padding: 8px 4px;
  box-shadow: 0 12px 26px rgba(22, 163, 74, 0.35);
  border: 1px solid #bbf7d0;
}

.event-date-wrap p {
  font-size: 20px;
  font-weight: 800;
  margin: 0;
}

.event-date-wrap span {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .12em;
  opacity: 0.95;
}
/* ============================================================
   STATISTIK (GURU, SISWA, DLL) – V2 LEBIH HIDUP
============================================================ */

.stats-smanu {
  padding: 3.2rem 0 3.8rem;
  background: radial-gradient(circle at top, #bbf7d0 0%, #ecfdf5 25%, #f1f5f9 60%, #e5e7eb 100%);
}

.stats-smanu .row {
  row-gap: 1.4rem;
}

.stats-card {
  position: relative;
  background: #ffffff;
  border-radius: 22px;
  padding: 18px 14px 16px;
  text-align: center;
  box-shadow: 0 22px 45px rgba(15, 23, 42, 0.18);
  border: 1px solid rgba(148, 163, 184, 0.25);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  overflow: hidden;
}

/* strip kecil di atas card */
.stats-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 16px;
  right: 16px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, #22c55e, #22c55e, #4ade80);
}

/* glow halus di bawah card */
.stats-card::after {
  content: "";
  position: absolute;
  inset: auto 20px -18px 20px;
  height: 28px;
  background: radial-gradient(circle, rgba(22, 163, 74, 0.35), transparent 65%);
  opacity: 0.35;
  z-index: -1;
}

.stats-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 30px 60px rgba(15, 23, 42, 0.28);
  border-color: #22c55e;
}

/* icon dalam lingkaran */
.stats-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  margin-bottom: 6px;
  background: radial-gradient(circle at top left, #bbf7d0, #22c55e);
  box-shadow: 0 10px 22px rgba(22, 163, 74, 0.4);
}

.stats-icon img {
  width: 22px;
  height: 22px;
  object-fit: contain;
  filter: brightness(0) invert(1); /* icon putih */
}

.stats-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .2em;
  color: #6b7280;
  margin-bottom: 2px;
}

.stats-value {
  font-size: 24px;
  font-weight: 800;
  color: #0f172a;
}

/* responsive */
@media (max-width: 768px) {
  .stats-smanu {
    padding: 2.5rem 0 3rem;
  }
  .stats-card {
    border-radius: 18px;
    padding: 16px 10px 14px;
  }
  .stats-value {
    font-size: 20px;
  }
}
/* ============================================================
   FOOTER – V2 DENGAN AKSEN
============================================================ */

.footer-smanu {
  position: relative;
  background: radial-gradient(circle at top left, #0f172a 0%, #020617 55%, #000000 100%);
  color: #e5e7eb;
  padding: 3.3rem 0 2.6rem;
}

/* garis gradient di atas footer */
.footer-smanu::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #22c55e, #38bdf8, #22c55e);
  opacity: 0.9;
}

.footer-smanu h3 {
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 12px;
  color: #f9fafb;
}

.foot-logo img {
  max-width: 130px;
  margin-bottom: 10px;
}

.foot-school-name {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #e5e7eb;
}

/* garis tipis pemisah antar kolom di desktop */
@media (min-width: 992px) {
  .footer-smanu .sitemap,
  .footer-smanu .address {
    border-left: 1px solid rgba(148, 163, 184, 0.35);
    padding-left: 18px;
  }
}

/* list menu */
.sitemap ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.sitemap ul li {
  margin-bottom: 4px;
}

.sitemap ul li a {
  font-size: 13px;
  color: #9ca3af;
  text-decoration: none;
  position: relative;
  padding-bottom: 2px;
}

.sitemap ul li a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 1px;
  background: #22c55e;
  transition: width 0.18s ease;
}

.sitemap ul li a:hover {
  color: #bbf7d0;
}

.sitemap ul li a:hover::after {
  width: 100%;
}

/* teks kontak */
.foot-address,
.foot-contact {
  font-size: 13px;
  color: #9ca3af;
}

.foot-address span {
  font-weight: 600;
  color: #e5e7eb;
}

/* ikon sosmed */
.footer-social-icons {
  list-style: none;
  padding-left: 0;
  margin: 12px 0 0;
  display: flex;
  gap: 10px;
}

.footer-social-icons li a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid #1f2937;
  color: #e5e7eb;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.footer-social-icons li a:hover {
  background: #22c55e;
  border-color: #22c55e;
  color: #020617;
  transform: translateY(-2px);
}

.footer-copy {
  font-size: 12px;
  color: #6b7280;
  margin-top: 14px;
  border-top: 1px solid rgba(30, 64, 175, 0.6);
  padding-top: 10px;
}

/* responsive footer */
@media (max-width: 768px) {
  .footer-smanu {
    padding: 2.6rem 0 2.2rem;
  }

  .footer-smanu .sitemap,
  .footer-smanu .address {
    border-left: none;
    margin-top: 1rem;
    padding-left: 0;
  }
}
/* ============================================================
   TOP BAR HEADER
============================================================ */

.header-topbar {
  background: #020617;
  color: #e5e7eb;
  font-size: 12px;
  padding: 4px 0;
  border-bottom: 1px solid #111827;
}

.header-topbar .header-top_address {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}

.header-topbar .header-top_list {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #9ca3af;
}

.header-topbar .header-top_list span {
  font-size: 13px;
  color: #22c55e;        /* ikon hijau */
}

/* tombol "Hubungi Kami" di kanan */
.header-top_login a,
.header-top_login2 a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 14px;
  border-radius: 999px;
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: #f9fafb;
  font-size: 12px;
  text-decoration: none;
  box-shadow: 0 8px 18px rgba(34, 197, 94, 0.45);
  transition: background 0.15s ease, transform 0.15s ease,
              box-shadow 0.15s ease;
}

/* hover */
.header-top_login a:hover,
.header-top_login2 a:hover {
  background: #16a34a;
  transform: translateY(-1px);
  box-shadow: 0 10px 22px rgba(34, 197, 94, 0.65);
}

/* supaya tidak dobel, yang kiri disembunyikan di layar besar */
@media (min-width: 768px) {
  .header-top_login2 {
    display: none;
  }
}

/* di HP: alamat agak diringkas, tombol ditaruh bawah */
@media (max-width: 767.98px) {
  .header-topbar {
    font-size: 11px;
    text-align: center;
    padding: 6px 0 8px;
  }

  .header-topbar .header-top_address {
    justify-content: center;
    gap: 8px;
  }

  .header-topbar .header-top_list:nth-child(3) {
    display: none;  /* alamat panjang disembunyikan di HP */
  }

  .header-top_login {
    margin-top: 4px;
    text-align: center;
  }
}
/* ============================================================
   MAIN NAVBAR / MENU UTAMA
============================================================ */

/* background putih full, dikasih garis tipis bawah */
[data-toggle="affix"] {
  background: #ffffff;
  box-shadow: 0 1px 0 rgba(148, 163, 184, 0.35);
}

/* hilangkan padding container ekstra */
.nav-menu2 {
  padding-top: 0;
  padding-bottom: 0;
}

/* row untuk logo + menu sejajar vertikal */
.nav-menu2 .row {
  align-items: center; /* penting: logo & menu rata tengah */
}

/* wrapper navbar */
.navbar2 {
  padding-top: 0.45rem;
  padding-bottom: 0.45rem;
  background: transparent;
}

/* LOGO */
.navbar2 .nav-brand2 {
  display: flex;
  align-items: center;
  padding: 0;
  margin-right: 2.25rem; /* jarak logo ke menu */
}

.navbar2 .nav-brand2 img {
  height: 46px;
  width: auto;
}

/* LIST MENU */
.navbar2 .navbar-nav {
  display: flex;
  align-items: center;
}

/* jarak antar item */
.navbar2 .nav-item {
  margin: 0 0.2rem;
}

/* tampilan link */
.navbar2 .nav-link {
  font-size: 14px;
  font-weight: 500;
  color: #0f172a;
  padding: 0.35rem 0.8rem;
  position: relative;
  line-height: 1;
}

/* warna saat hover / active */
.navbar2 .nav-link:hover,
.navbar2 .nav-item.active .nav-link {
  color: #15803d;
}

/* garis kecil di bawah link saat hover/aktif */
.navbar2 .nav-link::after {
  content: "";
  position: absolute;
  left: 0.8rem;
  right: 0.8rem;
  bottom: -0.2rem;
  height: 2px;
  border-radius: 999px;
  background: #22c55e;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.18s ease;
}

.navbar2 .nav-link:hover::after,
.navbar2 .nav-item.active .nav-link::after {
  transform: scaleX(1);
}

/* toggle (hamburger) di HP */
.navbar2 .navbar-toggler {
  border: none;
  padding: 0.25rem 0.4rem;
  outline: none;
}

.navbar2 .navbar-toggler .icon-menu {
  font-size: 22px;
  color: #0f172a;
}

/* ================== RESPONSIVE ================== */
@media (max-width: 991.98px) {
  .navbar2 {
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
  }

  .nav-menu2 {
    padding-left: 0;
    padding-right: 0;
  }

  .navbar2 .navbar-collapse {
    background: #ffffff;
    margin-top: 0.4rem;
    border-radius: 0 0 16px 16px;
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.16);
  }

  .navbar2 .nav-item {
    margin: 0;
  }

  .navbar2 .nav-link {
    padding: 0.55rem 1.3rem;
  }

  .navbar2 .nav-link::after {
    left: 1.3rem;
    right: 1.3rem;
    bottom: 0;
  }
}

/* --- TOPBAR FIX --- */
.header-topbar {
  background: #020617;
  color: #e5e7eb;
  font-size: 13px;
  padding: 6px 0;
}

/* Baris utama */
.header-top_address {
  display: flex;
  flex-wrap: wrap;           /* SANGAT PENTING: biar tidak bertumpuk */
  align-items: center;
  gap: 20px;                 /* Jarak antar item */
}

/* Masing-masing item */
.header-top_list {
  display: flex;
  align-items: center;
  gap: 6px;                  /* jarak ikon & teks */
  white-space: nowrap;       /* biar teks tidak terputus terpaksa */
  font-size: 13px;
}

/* Ikon */
.header-top_list span {
  font-size: 14px;
  color: #34d399; /* hijau neon sedikit */
}

/* Fix posisi tombol “Hubungi Kami” */
.header-top_login2 a,
.header-top_login a {
  padding: 6px 14px;
  background: #22c55e;
  color: #fff;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 0 14px rgba(34, 197, 94, 0.45);
}

/* Responsif di layar kecil */
@media (max-width: 768px) {
  .header-top_address {
    gap: 10px;
    flex-direction: column;  /* item disusun vertikal tapi rapi */
    align-items: flex-start;
  }
}
/* ============================================================
   TOP BAR HEADER (TELP, EMAIL, ALAMAT, HUBUNGI KAMI)
============================================================ */

.header-topbar {
  background: #020617;
  color: #e5e7eb;
  font-size: 13px;
  padding: 6px 0;
  border-bottom: 1px solid #111827;
}

/* susunan grid bootstrap */
.header-topbar .row {
  align-items: center;
}

/* kumpulan telp + email + alamat di kiri */
.header-topbar .header-top_address {
  display: flex;
  flex-wrap: wrap;        /* kalau kepanjangan boleh turun baris, tapi rapi */
  align-items: center;
  gap: 18px;              /* jarak antar item */
}

/* item tiap info */
.header-topbar .header-top_list {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #9ca3af;
  white-space: nowrap;    /* teks nggak kepotong di tengah */
  font-size: 13px;
}

.header-topbar .header-top_list span {
  font-size: 14px;
  color: #22c55e;         /* warna ikon hijau */
}

/* tombol Hubungi Kami */
.header-top_login a,
.header-top_login2 a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 16px;
  border-radius: 999px;
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color: #f9fafb;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  box-shadow: 0 8px 18px rgba(34, 197, 94, 0.55);
  transition: background 0.15s ease, transform 0.15s ease,
              box-shadow 0.15s ease;
}

.header-top_login a:hover,
.header-top_login2 a:hover {
  background: #16a34a;
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(34, 197, 94, 0.7);
}

/* di layar lebar: pakai yang kanan saja */
@media (min-width: 768px) {
  .header-top_login2 { display: none; }
}

/* di HP: alamat disederhanakan sedikit biar nggak numpuk */
@media (max-width: 767.98px) {
  .header-topbar {
    font-size: 12px;
    text-align: center;
    padding: 6px 0 8px;
  }

  .header-topbar .header-top_address {
    justify-content: center;
    gap: 10px;
  }

  /* kalau alamat terlalu panjang, boleh disembunyikan */
  .header-topbar .header-top_list:nth-child(3) {
    display: none;
  }

  .header-top_login {
    margin-top: 4px;
    text-align: center;
  }
}

/* ============================================================
   MAIN NAVBAR / MENU UTAMA
============================================================ */

/* background putih + garis tipis */
[data-toggle="affix"] {
  background: #ffffff;
  box-shadow: 0 1px 0 rgba(148, 163, 184, 0.35);
}

/* rapikan container navbar */
.nav-menu2 {
  padding-top: 0;
  padding-bottom: 0;
}

.nav-menu2 .row {
  align-items: center;       /* logo & menu rata tengah vertikal */
}

/* wrapper navbar bootstrp */
.navbar2 {
  padding-top: 0.45rem;
  padding-bottom: 0.45rem;
  background: transparent;
}

/* LOGO */
.navbar2 .nav-brand2 {
  display: flex;
  align-items: center;
  padding: 0;
  margin-right: 2.25rem;     /* jarak logo ke menu */
}

.navbar2 .nav-brand2 img {
  height: 46px;
  width: auto;
}

/* LIST MENU */
.navbar2 .navbar-nav {
  display: flex;
  align-items: center;
}

/* jarak antar item */
.navbar2 .nav-item {
  margin: 0 0.2rem;
}

/* style link */
.navbar2 .nav-link {
  font-size: 14px;
  font-weight: 500;
  color: #0f172a;
  padding: 0.35rem 0.8rem;
  position: relative;
  line-height: 1;
  transition: color 0.15s ease;
}

/* warna hover / aktif */
.navbar2 .nav-link:hover,
.navbar2 .nav-item.active .nav-link {
  color: #15803d;
}

/* garis kecil bawah saat hover/aktif */
.navbar2 .nav-link::after {
  content: "";
  position: absolute;
  left: 0.8rem;
  right: 0.8rem;
  bottom: -0.2rem;
  height: 2px;
  border-radius: 999px;
  background: #22c55e;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.18s ease;
}

.navbar2 .nav-link:hover::after,
.navbar2 .nav-item.active .nav-link::after {
  transform: scaleX(1);
}

/* tombol hamburger */
.navbar2 .navbar-toggler {
  border: none;
  padding: 0.25rem 0.4rem;
  outline: none;
}

.navbar2 .navbar-toggler .icon-menu {
  font-size: 22px;
  color: #0f172a;
}

/* ================== RESPONSIVE MENU ================== */
@media (max-width: 991.98px) {
  .navbar2 {
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
  }

  .nav-menu2 {
    padding-left: 0;
    padding-right: 0;
  }

  .navbar2 .navbar-collapse {
    background: #ffffff;
    margin-top: 0.4rem;
    border-radius: 0 0 16px 16px;
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.16);
  }

  .navbar2 .nav-item {
    margin: 0;
  }

  .navbar2 .nav-link {
    padding: 0.55rem 1.3rem;
  }

  .navbar2 .nav-link::after {
    left: 1.3rem;
    right: 1.3rem;
    bottom: 0;
  }
}
/* ============================================================
   MAIN NAVBAR / MENU UTAMA – RESET & GAYA BARU
============================================================ */

/* Wrapper strip putih + garis tipis bawah */
[data-toggle="affix"] {
  background: #ffffff !important;
  box-shadow: 0 1px 0 rgba(148, 163, 184, 0.35) !important;
}

/* Container nav – sejajarkan logo & menu secara vertikal */
.nav-menu2 {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.nav-menu2 .row {
  display: flex;
  align-items: center;          /* logo & menu sama tinggi */
}

/* NAVBAR inti */
.navbar2 {
  width: 100%;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* LOGO */
.navbar2 .nav-brand2 {
  display: flex !important;
  align-items: center !important;
  padding: 0 !important;
  margin-right: 32px !important;   /* jarak logo ke menu */
}

.navbar2 .nav-brand2 img {
  height: 46px !important;
  width: auto !important;
}

/* LIST MENU */
.navbar2 .navbar-nav {
  display: flex !important;
  align-items: center !important;
  margin-left: auto !important;    /* dorong menu ke kanan */
}

/* tiap item tidak perlu margin besar */
.navbar2 .nav-item {
  margin: 0 2px !important;
}

/* LINK MENU */
.navbar2 .nav-link {
  position: relative;
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #0f172a !important;
  padding: 4px 12px !important;    /* ini yg bikin tinggi menu pas */
  line-height: 1 !important;
  text-decoration: none !important;
  transition: color 0.15s ease;
}

/* hover & aktif */
.navbar2 .nav-link:hover,
.navbar2 .nav-item.active .nav-link {
  color: #15803d !important;
}

/* garis kecil di bawah link saat hover/aktif */
.navbar2 .nav-link::after {
  content: "";
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: -4px;
  height: 2px;
  border-radius: 999px;
  background: #22c55e;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform 0.18s ease;
}

.navbar2 .nav-link:hover::after,
.navbar2 .nav-item.active .nav-link::after {
  transform: scaleX(1);
}

/* TOGGLER (HAMBURGER) UNTUK HP */
.navbar2 .navbar-toggler {
  border: none !important;
  padding: 4px 6px !important;
  outline: none !important;
}

.navbar2 .navbar-toggler .icon-menu {
  font-size: 22px;
  color: #0f172a;
}

/* ============================================================
   RESPONSIVE NAVBAR
============================================================ */

@media (max-width: 991.98px) {
  .navbar2 {
    padding-top: 6px !important;
    padding-bottom: 6px !important;
  }

  .nav-menu2 {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .navbar2 .navbar-collapse {
    background: #ffffff !important;
    margin-top: 6px !important;
    border-radius: 0 0 16px 16px;
    box-shadow: 0 12px 24px rgba(15, 23, 42, 0.16);
  }

  .navbar2 .nav-item {
    margin: 0 !important;
  }

  .navbar2 .nav-link {
    padding: 9px 20px !important;
  }

  .navbar2 .nav-link::after {
    left: 20px;
    right: 20px;
    bottom: 0;
  }
}
/* ==== FIX: menu agar rapi & Contact tidak melebar ==== */

/* jangan sampai item menu pindah ke baris baru */
.navbar2 .navbar-nav {
  flex-wrap: nowrap !important;
}

/* sedikit kecilkan padding supaya muat semua */
.navbar2 .nav-link {
  font-size: 13px !important;
  padding: 4px 10px !important;   /* sebelumnya 12px */
}

/* khusus item terakhir (Contact) kurangi padding kanan */
.navbar2 .nav-item:last-child .nav-link {
  padding-right: 4px !important;
}
/* ================== PERAPIHAN TOPBAR DI HP ================== */
@media (max-width: 575.98px) {

  /* kolom topbar jadi 1 baris fleksibel */
  .header-topbar .row {
    align-items: center;
  }

  .header-topbar .col-xs-6,
  .header-topbar .col-sm-8,
  .header-topbar .col-md-9,
  .header-topbar .col-sm-4,
  .header-topbar .col-md-3 {
    width: 100%;
  }

  /* baris utama: telp di kiri, tombol di kanan */
  .header-topbar .header-top_address {
    width: 100%;
    justify-content: flex-start;
    gap: 10px;
  }

  /* sembunyikan email & alamat di HP (biar tidak padat) */
  .header-topbar .header-top_list:nth-child(2),
  .header-topbar .header-top_list:nth-child(3) {
    display: none;
  }

  /* tombol yang kanan (col-md-3) tetap dipakai */
  .header-top_login {
    text-align: right;
    margin-top: -24px;   /* naikkan sedikit agar sejajar dengan nomor telp */
  }

  /* tombol kiri (header-top_login2) tidak dipakai di HP */
  .header-top_login2 {
    display: none;
  }

  /* kecilkan sedikit font & padding topbar */
  .header-topbar {
    font-size: 11px;
    padding: 4px 10px;
  }

  .header-topbar .header-top_list {
    font-size: 11px;
  }
}
/* ================== SEMBUNYIKAN TOP BAR DI HP ================== */
@media (max-width: 575.98px) {
  .header-topbar {
    display: none !important;
  }
}
@media (max-width: 767.98px) {

  /* Hilangkan margin/padding yang menyebabkan space hijau */
  [data-toggle="affix"] {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  .nav-menu2 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  .navbar2 {
    padding-top: 4px !important;
    padding-bottom: 4px !important;
  }

  /* Jika container memberi jarak, rapatkan */
  .navbar2 .container,
  .nav-menu2 .container {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

}
/* Rapikan jarak hero di HP */
@media (max-width: 767.98px) {
  .hero-smanu {
    padding-top: 0.6rem !important;  /* tadinya 2.8rem */
    margin-top: 0 !important;
  }

  .hero-smanu-inner {
    margin-top: 0 !important;
  }
}

/* ===============================================
   MOBILE NAV — VERSI LEBIH MODERN & RAPI
   (Override tampilan tombol oval lama)
================================================ */
@media (max-width: 768px) {

  /* Panel dropdown */
  .navbar2 .navbar-collapse {
    background: #eef2f7;
    padding: 12px 10px;
    border-radius: 0 0 18px 18px;
    box-shadow: 0 18px 35px rgba(15, 23, 42, 0.22);
  }

  /* Susunan menu jadi kolom penuh */
  .navbar2 .navbar-nav {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }

  .navbar2 .navbar-nav > li {
    margin: 4px 0;
  }

  /* ITEM MENU */
  .navbar2 .navbar-nav > li > a {
    /* hapus tampilan tombol oval lama */
    width: 100% !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 12px !important;

    /* tampilan baru */
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 11px 14px !important;
    background: #ffffff !important;
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
    font-size: 14px !important;
    font-weight: 500;
    color: #0f172a !important;
    text-align: left !important;
    position: relative;
  }

  /* Titik hijau kecil di kiri tiap menu (aksen NU) */
  .navbar2 .navbar-nav > li > a::before {
    content: "";
    width: 8px;
    height: 8px;
    border-radius: 999px;
    background: #22c55e;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.25);
    flex-shrink: 0;
  }

  /* hover / focus */
  .navbar2 .navbar-nav > li > a:hover,
  .navbar2 .navbar-nav > li > a:focus {
    background: #ecfdf5 !important;
    color: #166534 !important;
    box-shadow: 0 10px 22px rgba(22, 163, 74, 0.25);
  }

  /* garis bawah hijau versi desktop dimatikan di HP */
  .navbar2 .nav-link::after {
    display: none !important;
  }
}
/* =========================
   ABOUT – KATA SAMBUTAN
========================= */
.welcome_about {
  padding: 4rem 0 3.5rem;
}

.welcome_about .about-tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 14px;
  border-radius: 999px;
  border: 1px solid rgba(22, 163, 74, 0.25);
  background: #ecfdf5;
  font-size: 10px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #15803d;
  margin-bottom: 14px;
}

.welcome_about .about-title {
  font-size: 32px;
  font-weight: 800;
  color: #0f172a;
  margin-bottom: 18px;
}

.welcome_about p {
  font-size: 15px;
  line-height: 1.7;
  color: #4b5563;
  margin-bottom: 12px;
}

.about-sign {
  margin-top: 22px;
}

.about-sign-name {
  font-weight: 700;
  color: #111827;
}

.about-sign-role {
  font-size: 13px;
  color: #6b7280;
}

/* kartu kepala sekolah */
.principal-card {
  max-width: 360px;
  margin: 0 auto;
  background: #ffffff;
  border-radius: 24px;
  padding: 16px 16px 18px;
  box-shadow: 0 22px 40px rgba(15, 23, 42, 0.18);
  text-align: center;
}

.principal-photo-wrap {
  border-radius: 18px;
  overflow: hidden;
  margin-bottom: 14px;
}

.principal-photo-wrap img {
  width: 100%;
  display: block;
}

.principal-meta {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .16em;
  color: #6b7280;
}

.principal-name {
  font-weight: 700;
  color: #111827;
  margin-bottom: 4px;
}

.principal-role {
  font-size: 11px;
  letter-spacing: .14em;
}

/* RESPONSIVE ABOUT */
@media (max-width: 991.98px) {
  .welcome_about {
    padding-top: 2.8rem;
  }

  .welcome_about .about-title {
    font-size: 26px;
  }

  .welcome_about .row.align-items-center {
    flex-direction: column-reverse;
  }

  .welcome_about .col-md-5 {
    margin-bottom: 1.75rem;
  }
}



/* ================= Responsif HP ================= */
@media (max-width: 767.98px) {
  .visi-misi-section {
    padding: 40px 0 60px;
  }

  .visi-misi-card {
    padding: 26px 18px 24px;
    border-radius: 18px;
    box-shadow: 0 18px 40px rgba(15, 23, 42, 0.15);
  }

  .visi-misi-card .quote_text {
    font-size: 14px;
    line-height: 1.7;
  }

  .quote-icon-wrap {
    width: 54px;
    height: 54px;
    margin-bottom: 14px;
  }
}
/* ==== GANTI WARNA COKLAT VISI–MISI JADI HIJAU TANPA UBAH LAYOUT ==== */

/* Ikon kutip besar di tengah + border lingkarannya */
.testimonial .quote i.fa-quote-left,
.testimonial .quote i.fa-quote-right {
  color: #15803d !important;        /* hijau tua */
  border-color: #15803d !important; /* kalau ada border lingkaran */
}

/* Ikon kutip kiri & kanan di samping teks */
.testimonial i.fa-quote-left,
.testimonial i.fa-quote-right {
  color: #15803d !important;
}

/* Nama kepala sekolah (sebelumnya coklat) */
.testimonial .testi-img_block p span {
  color: #15803d !important;
}

/* Titik slider di bawah (paging dots) */
.slick-dots li button:before {
  font-size: 10px;
  color: #15803d !important; /* hijau */
  opacity: 1;
}

.slick-dots li.slick-active button:before {
  color: #15803d !important; /* hijau */
  opacity: 1;
}

/* Background halus untuk section Visi Misi */
.visi-misi-section {
    background: linear-gradient(
        to bottom,
        #ffffff 0%,
        #f6fcf7 40%,
        #e8f5e9 70%,
        #f4faf7 100%
    );
}
/* ============================
   PERBAIKAN VISI MISI DI HP
   ============================ */
@media (max-width: 576px) {

  /* Kecilkan lingkaran & ikon kutip */
  .testimonial .quote i.fa-quote-left,
  .testimonial .quote i.fa-quote-right {
    width: 42px;
    height: 42px;
    line-height: 42px;     /* supaya ikon pas di tengah lingkaran */
    font-size: 18px;        /* ikon lebih kecil di HP */
  }

  /* Sedikit longgarkan ruang di sekitar teks */
  .testimonial .quote {
    padding-left: 18px;
    padding-right: 18px;
  }

  .testimonial .quote_text {
    font-size: 14px;
    line-height: 1.6;
  }
}
/* ================= Responsif Sambutan Kepala Sekolah (HP) ================= */
@media (max-width: 575.98px) {
  /* Section sambutan */
  .welcome_about {
    padding: 40px 0 60px;
  }

  .welcome_about .container {
    padding-left: 18px;
    padding-right: 18px;
  }

  .welcome_about .about-tag {
    font-size: 11px;
  }

  .welcome_about .about-title {
    font-size: 22px;
    line-height: 1.3;
    margin-bottom: 12px;
  }

  .welcome_about p {
    font-size: 13px;
    line-height: 1.7;
  }

  /* Kartu foto kepala sekolah */
  .principal-card {
    margin-top: 18px;
    padding: 14px 14px 12px;
    border-radius: 18px;
    box-shadow: 0 14px 30px rgba(15, 23, 42, 0.12);
  }

  .principal-photo-wrap {
    max-width: 220px;
    margin: 0 auto 12px;  /* tengah */
  }

  .principal-photo-wrap img {
    width: 100%;
    height: auto;
    display: block;
  }

  .principal-meta {
    font-size: 11px;
    letter-spacing: .12em;
    text-align: center;
  }
}
/* Section guru / siswa */
.our-teachers {
  background: linear-gradient(to bottom, #ffffff 0%, #f3f4f6 100%);
}

/* Judul */
.teacher-title {
  font-weight: 700;
  position: relative;
  display: inline-block;
}

.teacher-title::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -10px;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  border-radius: 999px;
  background: #15803d; /* hijau */
}

/* Card guru/siswa */
.teacher-card {
  background: #ffffff;
  border-radius: 18px;
  padding: 18px 16px 22px;
  margin-bottom: 30px;
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.teacher-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.14);
}

/* Foto seragam dan rapi */
.teacher-photo {
  width: 100%;
  height: 260px;      /* tinggi default di desktop */
  object-fit: cover;
  border-radius: 14px;
}

/* Teks nama & mapel/kelas */
.teacher-text {
  font-size: 0.9rem;
}

.teacher-name {
  display: block;
  font-weight: 700;
  font-size: 0.95rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #166534;
}

.teacher-mapel {
  display: block;
  margin-top: 3px;
  font-size: 0.85rem;
  color: #4b5563;
}

/* Pagination di tengah */
.our-teachers nav {
  display: inline-block;
}

/* RESPONSIVE: HP (2 kolom) */
@media (max-width: 576px) {
  .teacher-card {
    padding: 12px 8px 16px;
    margin-bottom: 14px;
    border-radius: 14px;
  }

  .teacher-photo {
    height: 190px;   /* lebih kecil di HP */
    border-radius: 12px;
  }

  .teacher-title {
    font-size: 1.3rem;
  }

  .teacher-name {
    font-size: 0.9rem;
  }

  .teacher-mapel {
    font-size: 0.8rem;
  }
}
/* =========================
   PENGUMUMAN / EVENTS BARU
   ========================= */

.events {
  padding: 60px 0;
}

/* Card tiap pengumuman */
.event-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 20px 24px;
  margin-bottom: 24px;
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.06);
}

/* Hilangkan garis lama */
.event-underline {
  display: none;
}

/* Kotak tanggal (atas jam) */
.event-date {
  background: transparent;
  border: none;
  box-shadow: none;
  width: auto;
  height: auto;
  padding: 0;
  margin-bottom: 6px;
  text-align: center;
}

.event-date h4 {
  font-size: 26px;
  line-height: 1;
  font-weight: 700;
  margin: 0;
  color: #15803d; /* hijau */
}

.event-date span {
  display: block;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-top: 2px;
  color: #6b7280;
}

/* Jam (badge hijau) */
.event-time {
  display: inline-block;
  margin-top: 4px;
  padding: 6px 18px;
  font-size: 13px;
  font-weight: 600;
  background: #15803d;
  color: #ffffff;
  border-radius: 4px;
}

/* Judul & isi pengumuman */
.event-heading h3 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 6px;
  color: #111827;
}

.event-heading p {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: #4b5563;
}

/* Responsif */
@media (max-width: 576px) {
  .event-card {
    padding: 16px 14px;
  }

  .event-heading h3 {
    font-size: 18px;
  }
}
/* =========================
   PENGUMUMAN – RESPONSIVE HP
   ========================= */
@media (max-width: 576px) {
  .event-card {
    padding: 14px 14px 16px;
    margin-bottom: 16px;
    border-radius: 14px;
  }

  /* Biar dua kolom tadi jadi full width semua */
  .event-card .col-md-2,
  .event-card .col-md-10 {
    flex: 0 0 100%;
    max-width: 100%;
  }

  /* Tanggal & jam sejajar, rata kiri */
  .event-date {
    display: inline-block;
    text-align: left;
    margin-right: 10px;
  }

  .event-date h4 {
    font-size: 20px;
  }

  .event-date span {
    font-size: 11px;
  }

  .event-time {
    display: inline-block;
    margin-top: 0;        /* tadinya agak turun */
    padding: 4px 12px;
    font-size: 11px;
  }

  /* Judul & isi sedikit diperkecil */
  .event-heading h3 {
    font-size: 16px;
    line-height: 1.4;
    margin-top: 8px;
  }

  .event-heading p {
    font-size: 13px;
  }
}
/* Kurangi jarak atas di bawah header untuk halaman daftar */
.events,
.blog-wrap,
.our-teachers {
  padding-top: 24px;      /* dari 60px jadi 24px */
}
@media (max-width: 576px) {
  .events,
  .blog-wrap,
  .our-teachers {
    padding-top: 12px;    /* di HP jarak atas dibuat lebih kecil */
  }
}
/* Kurangi jarak atas semua halaman konten */
.events,
.blog-wrap,
.our-teachers,
.about-us,
.about,
.contact,
.gallery,
.download,
.agenda,
.pengumuman,
.guru,
.siswa {
  padding-top: 24px !important;
}

/* Di HP lebih dirapatkan lagi */
@media (max-width: 576px) {
  .events,
  .blog-wrap,
  .our-teachers,
  .about-us,
  .about,
  .contact,
  .gallery,
  .download,
  .agenda,
  .pengumuman,
  .guru,
  .siswa {
    padding-top: 12px !important;
  }
}
/* ==== RAPIKAN SEARCH DI DESKTOP ==== */
#display_wrapper .dataTables_filter {
  font-size: 0.85rem;
}

#display_wrapper .dataTables_filter label {
  font-weight: 500;
}

#display_wrapper .dataTables_filter input {
  display: inline-block;
  width: 220px;         /* kotak search tidak terlalu gede */
  max-width: 100%;
  height: 32px;
  padding: 4px 10px;
  font-size: 0.85rem;
}

/* ==== RESPONSIVE HP ==== */
@media (max-width: 576px) {

  /* "Show entries" & Search ditumpuk rapi */
  #display_wrapper .dataTables_length,
  #display_wrapper .dataTables_filter {
    float: none !important;
    text-align: left;
    width: 100%;
    margin-bottom: 6px;
  }

  #display_wrapper .dataTables_length label,
  #display_wrapper .dataTables_filter label {
    display: block;
    width: 100%;
  }

  /* Search full width tapi ramping */
  #display_wrapper .dataTables_filter input {
    width: 100%;
    height: 30px;
    font-size: 0.8rem;
    padding: 3px 8px;
  }

  /* Biar tabel nggak diperkecil paksa → bisa scroll samping */
  .download-table-card .table {
    min-width: 600px;          /* paksa tabel sedikit lebih lebar dari layar */
    font-size: 0.8rem;
  }

  .download-table-card {
    overflow-x: auto;          /* munculin scroll horizontal */
    padding: 10px 8px;
  }

  #display thead th,
  #display tbody td {
    white-space: nowrap;
    padding: 6px 8px;
  }

  /* Kolom Files boleh melipat biar judul tetap kebaca */
  #display tbody td:nth-child(2) {
    white-space: normal;
  }

  /* Tombol download sedikit dikecilkan */
  .btn-download {
    padding: 3px 10px;
    font-size: 0.75rem;
  }
}
.hero-smanu-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* Di layar kecil, tombol jadi full width biar tidak mepet */
@media (max-width: 575.98px) {
  .hero-smanu-actions a {
    width: 100%;
    text-align: center;
  }
}
/* Baris tombol di hero */
.hero-smanu-actions-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 0.5rem;
}

/* Baris PPDB: bisa di-start atau center */
.hero-smanu-actions-ppdb {
  justify-content: flex-start;   /* ganti 'center' kalau mau di tengah */
}

/* Responsif: di HP tombol ditumpuk */
@media (max-width: 575.98px) {
  .hero-smanu-actions-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .hero-smanu-actions-row .btn {
    width: 100%;
    max-width: 260px;
    text-align: center;
  }
}
/* Atur tombol hero agar sejajar 1 baris */
.hero-actions-row {
  display: flex;
  flex-wrap: nowrap;        /* TIDAK turun ke bawah */
  gap: 12px;                /* jarak antar tombol */
  margin-top: 15px;
  align-items: center;
}

/* Biar tombol tidak melebar sendiri */
.hero-actions-row .btn {
  white-space: nowrap;      /* teks tidak pecah */
}

/* Responsif HP */
@media (max-width: 768px) {
  .hero-actions-row {
    flex-wrap: wrap;        /* di HP boleh turun */
  }

  .hero-actions-row .btn {
    width: 100%;
    max-width: 260px;
  }
}
/* ======== HERO BUTTON GROUP (3 tombol sejajar & rapi) ======== */
.hero-actions-row {
    display: flex;
    align-items: center;
    gap: 10px;              /* JARAK DIPERKECIL */
    margin-top: 10px;
}

/* Semua tombol diberi gaya lebih premium */
.hero-actions-row .btn {
    padding: 10px 22px;
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
    transition: 0.25s ease;
}

/* Tombol utama (Profil Sekolah) */
.hero-smanu-btn-main {
    background-color: #15803d !important;
    border: 2px solid #15803d !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(21,128,61,0.25);
}

.hero-smanu-btn-main:hover {
    background-color: #0f5f2d !important;
    border-color: #0f5f2d !important;
}

/* Tombol ghost (Galeri) */
.hero-smanu-btn-ghost {
    background: #ffffff !important;
    border: 2px solid #d1d5db !important;
    color: #374151 !important;
}

.hero-smanu-btn-ghost:hover {
    background: #e5e7eb !important;
    border-color: #9ca3af !important;
}

/* Tombol PPDB */
.hero-smanu-btn-ppdb {
    background: #fff !important;
    border: 2px solid #16a34a !important;
    color: #15803d !important;
}

.hero-smanu-btn-ppdb:hover {
    background: #16a34a !important;
    color: #fff !important;
}

/* HP responsif */
@media (max-width: 768px) {
    .hero-actions-row {
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 8px;
    }

    .hero-actions-row .btn {
        width: 100%;
        max-width: 260px;
    }
}
/* ====== HERO BUTTON GROUP – versi kecil & rapat ====== */
.hero-actions-row {
    display: flex;
    align-items: center;
    gap: 6px;                   /* jarak antar tombol lebih rapat */
    margin-top: 8px;
}

/* ukuran tombol lebih kecil */
.hero-actions-row .btn {
    padding: 8px 18px;          /* lebih kecil */
    font-size: 14px;            /* kecil tapi tetap jelas */
    font-weight: 600;
    border-radius: 30px;
    white-space: nowrap;
    transition: 0.25s ease;
}

/* tombol utama */
.hero-smanu-btn-main {
    background-color: #15803d !important;
    border: 2px solid #15803d !important;
    color: #fff !important;
}

.hero-smanu-btn-main:hover {
    background-color: #0f5f2d !important;
}

/* tombol ghost */
.hero-smanu-btn-ghost {
    background: #ffffff !important;
    border: 2px solid #d1d5db !important;
    color: #374151 !important;
}

.hero-smanu-btn-ghost:hover {
    background: #e5e7eb !important;
}

/* tombol PPDB */
.hero-smanu-btn-ppdb {
    background: #ffffff !important;
    border: 2px solid #16a34a !important;
    color: #15803d !important;
}

.hero-smanu-btn-ppdb:hover {
    background: #16a34a !important;
    color: #ffffff !important;
}

/* versi HP biar tetap rapi */
@media (max-width: 768px) {
    .hero-actions-row {
        flex-wrap: wrap;
        gap: 6px;
    }

    .hero-actions-row .btn {
        width: auto;
        max-width: 100%;
    }
}
/* ====== PADATKAN JARAK TOMBOL HERO ====== */
.hero-actions-row {
    display: flex;
    align-items: center;
    gap: 4px !important;        /* jarak tombol super rapat */
    margin-top: 6px !important;
}

/* Ukuran tombol dipadatkan */
.hero-actions-row .btn {
    padding: 6px 16px !important;   /* lebih kecil & padat */
    font-size: 13px !important;
    font-weight: 600;
    border-radius: 24px;
    white-space: nowrap;
}

/* Variasi warna tetap sama */
.hero-smanu-btn-main {
    background-color: #15803d !important;
    border: 2px solid #15803d !important;
    color: #fff !important;
}

.hero-smanu-btn-ghost {
    background: #ffffff !important;
    border: 2px solid #d1d5db !important;
    color: #374151 !important;
}

.hero-smanu-btn-ppdb {
    background: #ffffff !important;
    border: 2px solid #16a34a !important;
    color: #15803d !important;
}

/* Hover */
.hero-smanu-btn-main:hover {
    background-color: #0f5f2d !important;
}

.hero-smanu-btn-ghost:hover {
    background-color: #e5e7eb !important;
}

.hero-smanu-btn-ppdb:hover {
    background-color: #16a34a !important;
    color: #ffffff !important;
}

/* Mobile tetap rapi */
@media (max-width: 768px) {
    .hero-actions-row {
        flex-wrap: wrap;
        gap: 6px !important;
    }
}
/* ====== TOMBOL HERO – VERSION PREMIUM ====== */

.hero-actions-row {
    display: flex;
    gap: 8px;
    margin-top: 6px;
}

/* Tombol Utama – Hijau Gradasi */
.hero-smanu-btn-main {
    background: linear-gradient(135deg, #16a34a, #059669) !important;
    border: none !important;
    padding: 8px 22px !important;
    color: #fff !important;
    font-weight: 600;
    border-radius: 30px;
    box-shadow: 0 4px 12px rgba(22, 163, 74, 0.35);
    transition: 0.25s ease;
}

.hero-smanu-btn-main:hover {
    background: linear-gradient(135deg, #0f8a3a, #047857) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(22, 163, 74, 0.45);
}


/* Tombol Ghost – Galeri */
.hero-smanu-btn-ghost {
    background: white !important;
    border: 2px solid #d1d5db !important;
    color: #374151 !important;
    padding: 8px 20px !important;
    border-radius: 30px;
    font-weight: 600;
    transition: 0.25s ease;
}

.hero-smanu-btn-ghost:hover {
    border-color: #15803d !important;
    color: #15803d !important;
    background: #f0fdf4 !important;
}


/* Tombol PPDB – Warna Paling Menarik */
.hero-smanu-btn-ppdb {
    background: linear-gradient(135deg, #22c55e, #16a34a) !important;
    border: none !important;
    padding: 8px 20px !important;
    font-weight: 600;
    color: white !important;
    border-radius: 30px;
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.35);
    transition: 0.25s ease;
}

.hero-smanu-btn-ppdb:hover {
    background: linear-gradient(135deg, #16a34a, #15803d) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(34, 197, 94, 0.45);
}


/* Mobile tetap rapi */
@media (max-width: 768px) {
    .hero-actions-row {
        flex-wrap: wrap;
        gap: 6px;
    }
}
/* ======================================
   FIX SPACING & SIZE TOMBOL HERO (MOBILE)
======================================= */
@media (max-width: 576px) {

  /* Batasi area tombol */
  .hero-smanu-actions {
      display: flex !important;
      flex-wrap: wrap !important;
      gap: 6px !important;
      margin-top: 10px !important;
      margin-bottom: 0 !important;
  }

  /* Override semua tombol dalam hero */
  .hero-smanu-actions .btn {
      padding: 6px 12px !important;
      font-size: 13px !important;
      border-radius: 22px !important;
      white-space: nowrap !important;
  }

  /* Tombol PPDB dibuat lebih menonjol */
  .hero-smanu-btn-ppdb {
      background: #15803d !important;
      color: #fff !important;
      border: none !important;
      box-shadow: 0 4px 10px rgba(21,128,61,0.35) !important;
  }

}
/* ===========================
   SENTUHAN WARNA PADA CARD HERO (TANPA UBAH LAYOUT)
=========================== */

/* Card utama (yang putih memanjang) */
.hero-smanu-inner {
  background: linear-gradient(
    145deg,
    #ffffff 0%,
    #f3fef7 40%,
    #e8f5ff 100%
  );
  border-radius: 32px;
  padding: 50px 40px;
  box-shadow: 0 20px 55px rgba(0, 0, 0, 0.08);
}

/* Glow lembut di sisi bawah card */
.hero-smanu-inner::after {
  content: "";
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 70%;
  height: 40px;
  background: radial-gradient(
    ellipse,
    rgba(0, 150, 100, 0.18),
    transparent 70%
  );
  filter: blur(20px);
  z-index: 0;
}

/* Pastikan isi tetap di atas background */
.hero-smanu-inner > * {
  position: relative;
  z-index: 2;
}

/* Tambahan sentuhan soft border */
.hero-smanu-inner {
  border: 1px solid rgba(200, 230, 220, 0.6);
}

/* ===========================
   OPTIONAL (bisa dihapus kalau tidak suka)
   Gradasi halus dari kiri ke kanan
=========================== */

.hero-smanu {
  background: linear-gradient(
    90deg,
    rgba(234, 252, 252, 1) 0%,
    rgba(255, 255, 255, 1) 45%,
    rgba(243, 255, 250, 1) 100%
  );
}
/* =========================
   ABOUT / WELCOME SECTION
   ========================= */

.about-smanu {
  position: relative;
  padding: 80px 0 90px;
  background: radial-gradient(circle at top left, #dcfce7 0, transparent 45%),
              radial-gradient(circle at bottom right, #e0f2fe 0, transparent 45%),
              #f8fafc;
  overflow: hidden;
}

/* dekorasi blur lembut di belakang */
.about-smanu::before,
.about-smanu::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  filter: blur(40px);
  opacity: 0.6;
  pointer-events: none;
}
.about-smanu::before {
  width: 280px;
  height: 280px;
  background: #bbf7d0;
  top: -80px;
  right: -60px;
}
.about-smanu::after {
  width: 260px;
  height: 260px;
  background: #bfdbfe;
  bottom: -90px;
  left: -80px;
}

.about-smanu-text {
  position: relative;
  z-index: 1;
}

/* Tag "WELCOME" */
.about-smanu-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 14px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  border-radius: 999px;
  background: linear-gradient(to right, #dcfce7, #bbf7d0);
  color: #047857;
  box-shadow: 0 8px 20px rgba(16, 185, 129, 0.15);
}
.about-smanu-tag .dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #22c55e;
  box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.35);
}

.about-smanu-title {
  margin-top: 16px;
  font-size: 30px;
  line-height: 1.4;
  font-weight: 800;
  color: #0f172a;
}

@media (min-width: 992px) {
  .about-smanu-title {
    font-size: 34px;
  }
}

.about-smanu-desc {
  margin-top: 16px;
  font-size: 15px;
  line-height: 1.8;
  color: #4b5563;
  max-width: 600px;
}

/* chip nilai sekolah */
.about-smanu-points {
  margin-top: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.about-smanu-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(240, 253, 250, 0.9);
  border: 1px solid rgba(16, 185, 129, 0.3);
  font-size: 13px;
  font-weight: 600;
  color: #047857;
  box-shadow: 0 4px 10px rgba(15, 118, 110, 0.08);
}

.about-smanu-chip .chip-icon {
  display: inline-flex;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  background: linear-gradient(135deg, #22c55e, #0f766e);
  color: #ecfdf5;
}

/* highlight kalimat visi singkat */
.about-smanu-highlight {
  margin-top: 18px;
  padding: 10px 14px;
  border-radius: 14px;
  background: rgba(15, 118, 110, 0.07);
  border-left: 3px solid #10b981;
  font-size: 13px;
  color: #0f172a;
}

/* =========================
   KARTU KEPALA SEKOLAH
   ========================= */

.about-smanu-principal-card {
  position: relative;
  z-index: 1;
  border-radius: 24px;
  background: radial-gradient(circle at top left, rgba(59, 130, 246, 0.08), transparent 55%),
              #ffffff;
  box-shadow: 0 20px 45px rgba(15, 23, 42, 0.15);
  padding: 20px 22px 18px;
}

/* header kecil di atas kartu */
.about-smanu-principal-header {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 6px;
}
.badge-sambutan {
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(59, 130, 246, 0.08);
  color: #1d4ed8;
}

/* isi kartu */
.about-smanu-principal-body {
  display: flex;
  align-items: center;
  gap: 18px;
}

.about-smanu-photo-wrap {
  position: relative;
  width: 140px;
  height: 140px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.about-smanu-photo-ring {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  border: 5px solid #22c55e;
  box-shadow:
    0 0 0 6px rgba(187, 247, 208, 0.8),
    0 18px 35px rgba(22, 163, 74, 0.35);
}

.about-smanu-photo {
  position: relative;
  width: 112px;
  height: 112px;
  border-radius: 999px;
  object-fit: cover;
  border: 4px solid #ecfdf5;
}

.about-smanu-principal-info {
  flex: 1;
}

.about-smanu-principal-name {
  font-size: 15px;
  font-weight: 700;
  color: #022c22;
}

.about-smanu-principal-role {
  margin-top: 6px;
  font-size: 13px;
  color: #4b5563;
  line-height: 1.7;
}

/* footer kartu */
.about-smanu-principal-footer {
  margin-top: 12px;
  text-align: right;
}

.about-smanu-link {
  font-size: 12px;
  font-weight: 600;
  color: #047857;
  text-decoration: none;
}
.about-smanu-link i {
  font-size: 11px;
  margin-left: 4px;
}
.about-smanu-link:hover {
  color: #16a34a;
}

/* RESPONSIVE */
@media (max-width: 991.98px) {
  .about-smanu {
    padding: 60px 0 70px;
  }

  .about-smanu-principal-card {
    margin-top: 20px;
  }

  .about-smanu-principal-body {
    flex-direction: column;
    text-align: center;
  }

  .about-smanu-principal-footer {
    text-align: center;
  }
}
/* =========================
   KARTU KEPALA SEKOLAH (BARU)
   ========================= */

.headmaster-card {
  position: relative;
  padding: 20px 22px 22px;
  border-radius: 22px;
  background: radial-gradient(circle at top left,
              rgba(191, 219, 254, 0.18), transparent 55%),
              #ffffff;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.18);
}

/* badge "Sambutan Kepala Sekolah" */
.headmaster-badge {
  display: inline-block;
  margin-bottom: 10px;
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 999px;
  background: rgba(219, 234, 254, 0.9);
  color: #1d4ed8;
}

/* isi utama kartu: foto + teks */
.headmaster-body {
  display: flex;
  align-items: center;
  gap: 18px;
}

/* foto kepala sekolah */
.headmaster-photo-wrap {
  flex-shrink: 0;
  width: 120px;
  height: 120px;
  border-radius: 999px;
  padding: 4px; /* border tipis */
  background: linear-gradient(135deg, #22c55e, #16a34a);
  box-shadow:
    0 10px 24px rgba(22, 163, 74, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
}

.headmaster-photo {
  width: 100%;
  height: 100%;
  border-radius: 999px;
  object-fit: cover;
  border: 3px solid #ecfdf5;
}

/* teks di samping foto */
.headmaster-text {
  flex: 1;
}

.headmaster-title {
  font-size: 16px;
  font-weight: 700;
  color: #022c22;
  margin: 0 0 6px;
}

.headmaster-quote {
  font-size: 13px;
  line-height: 1.7;
  color: #4b5563;
  margin: 0 0 10px;
}

/* link "Baca Profil Sekolah lengkap" */
.headmaster-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: #047857;
  text-decoration: none;
}

.headmaster-link i {
  font-size: 11px;
}

.headmaster-link:hover {
  color: #16a34a;
}

/* RESPONSIVE: hp / tablet */
@media (max-width: 991.98px) {
  .headmaster-card {
    margin-top: 16px;
  }

  .headmaster-body {
    flex-direction: column;
    text-align: center;
  }

  .headmaster-text {
    text-align: center;
  }
}
/* =========================================
   1. GLOBAL & BODY
   ========================================= */

body {
  background: radial-gradient(circle at top left, #ecfdf5 0, #f7faff 40%, #ffffff 80%);
}

/* kasih bayangan tipis di nav biar ngambang dikit */
.nav-menu2 {
  box-shadow: 0 8px 25px rgba(15, 23, 42, 0.10);
  border-radius: 0 0 18px 18px;
  background: #ffffff;
}

/* top bar lebih lembut */
.header-topbar {
  background: linear-gradient(90deg, #064e3b, #047857);
  color: #e5fff4;
}

.header-topbar a {
  color: #bbf7d0;
}

/* =========================================
   2. HERO SECTION
   ========================================= */

.hero-smanu {
  padding: 80px 0 70px;
  background: radial-gradient(circle at top left, #dcfce7 0, #f5f5ff 40%, #ffffff 80%);
}

.hero-smanu-inner {
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.16);
}

/* tombol utama & ghost biar senada */
.hero-smanu-btn-main {
  background: linear-gradient(135deg, #16a34a, #15803d);
  border: none;
  box-shadow: 0 12px 25px rgba(21, 128, 61, 0.35);
}

.hero-smanu-btn-main:hover {
  background: linear-gradient(135deg, #15803d, #166534);
}

.hero-smanu-btn-ghost {
  border-color: #a7f3d0;
  color: #047857;
  background: rgba(236, 253, 245, 0.7);
}

.hero-smanu-btn-ghost:hover {
  background: #a7f3d0;
}

.hero-smanu-btn-ppdb {
  border-color: #2563eb;
  color: #1d4ed8;
  background: rgba(219, 234, 254, 0.7);
}

.hero-smanu-btn-ppdb:hover {
  background: #bfdbfe;
}

/* card foto */
.hero-smanu-photo-card {
  border-radius: 26px;
  overflow: hidden;
  box-shadow: 0 20px 45px rgba(15, 23, 42, 0.35);
}

.hero-smanu-caption-chip {
  background: rgba(22, 163, 74, 0.12);
  color: #047857;
  border-radius: 999px;
  padding: 6px 16px;
}

/* =========================================
   3. ABOUT / WELCOME + KEPALA SEKOLAH
   ========================================= */

.about-smanu {
  padding: 80px 0 70px;
  background: linear-gradient(
    135deg,
    #ecfdf5 0%,
    #eff6ff 45%,
    #ffffff 100%
  );
}

.about-smanu-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 14px;
  border-radius: 999px;
  background: rgba(22, 163, 74, 0.08);
  color: #047857;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.about-smanu-tag .dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #22c55e;
  box-shadow: 0 0 0 6px rgba(187, 247, 208, 0.7);
}

.about-smanu-title {
  font-size: 28px;
  margin-top: 14px;
  margin-bottom: 16px;
  color: #0f172a;
}

.about-smanu-desc {
  color: #475569;
  line-height: 1.7;
}

/* chips */
.about-smanu-points {
  margin-top: 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.about-smanu-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 16px;
  border-radius: 999px;
  background: rgba(22, 163, 74, 0.06);
  border: 1px solid rgba(16, 185, 129, 0.35);
  color: #065f46;
  font-size: 13px;
  font-weight: 500;
}

.about-smanu-chip .chip-icon {
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: #22c55e;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #ecfdf5;
  font-size: 11px;
}

/* highlight paragraf di bawah chips */
.about-smanu-highlight {
  margin-top: 18px;
  padding: 12px 16px;
  border-radius: 14px;
  background: linear-gradient(90deg, rgba(16, 185, 129, 0.08), rgba(59, 130, 246, 0.06));
  color: #064e3b;
  font-size: 13px;
}

/* Kartu kepala sekolah yang lebih clean */

.headmaster-card {
  background: #ffffff;
  border-radius: 22px;
  padding: 22px 24px 18px;
  box-shadow: 0 20px 50px rgba(15, 23, 42, 0.18);
}

.headmaster-badge {
  display: inline-block;
  padding: 4px 12px;
  margin-bottom: 8px;
  border-radius: 999px;
  background: rgba(219, 234, 254, 0.95);
  color: #1d4ed8;
  font-size: 11px;
  font-weight: 600;
}

.headmaster-body {
  display: flex;
  align-items: center;
  gap: 16px;
}

.headmaster-photo-wrap {
  width: 110px;
  height: 110px;
  border-radius: 999px;
  padding: 4px;
  background: linear-gradient(135deg, #22c55e, #16a34a);
  box-shadow: 0 12px 28px rgba(22, 163, 74, 0.35);
}

.headmaster-photo {
  width: 100%;
  height: 100%;
  border-radius: 999px;
  object-fit: cover;
  border: 3px solid #ecfdf5;
}

.headmaster-title {
  font-size: 18px;
  margin-bottom: 6px;
  color: #0f172a;
}

.headmaster-quote {
  font-size: 13px;
  line-height: 1.7;
  color: #475569;
  margin-bottom: 8px;
}

.headmaster-link {
  font-size: 13px;
  font-weight: 600;
  color: #15803d;
  text-decoration: none;
}

.headmaster-link:hover {
  text-decoration: underline;
}

/* =========================================
   4. ARTIKEL TERBARU
   ========================================= */

.artikel-section {
  padding: 70px 0 60px;
  background: radial-gradient(circle at top right, #e0f2fe 0, #ffffff 55%);
}

.artikel-tag {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.08);
  color: #1d4ed8;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.artikel-title {
  margin-top: 8px;
  font-size: 24px;
  color: #0f172a;
}

.artikel-subtitle {
  font-size: 14px;
  color: #64748b;
}

/* kartu artikel */
.artikel-card {
  border-radius: 18px;
  overflow: hidden;
  background: #ffffff;
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.12);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.artikel-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.18);
}

.artikel-card-img-wrap {
  height: 150px;
  overflow: hidden;
}

.artikel-card-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.artikel-card-body {
  padding: 10px 14px 12px;
}

.artikel-judul {
  font-size: 13px;
  color: #0f172a;
}

.btn-artikel-more {
  display: inline-block;
  padding: 8px 18px;
  border-radius: 999px;
  border: 1px solid #22c55e;
  color: #047857;
  background: rgba(220, 252, 231, 0.5);
  font-size: 13px;
  font-weight: 600;
}

.btn-artikel-more:hover {
  background: #22c55e;
  color: #ecfdf5;
}

/* =========================================
   5. EVENT / PENGUMUMAN & AGENDA
   ========================================= */

.event-smanu {
  padding: 70px 0 70px;
  background: linear-gradient(120deg, #ecfdf5 0%, #fefce8 50%, #eff6ff 100%);
}

/* kartu pengumuman */
.home-notice-card {
  background: #ffffff;
  border-radius: 18px;
  padding: 16px 12px;
  box-shadow: 0 10px 25px rgba(15, 23, 42, 0.12);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.home-notice-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.18);
}

/* agenda list */
.event-agenda-list {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 18px;
  padding: 16px 18px 4px;
  box-shadow: 0 14px 32px rgba(15, 23, 42, 0.16);
}

.agenda-item {
  display: flex;
  gap: 12px;
}

/* =========================================
   6. STATISTIK
   ========================================= */

.stats-smanu {
  padding: 60px 0;
  background: radial-gradient(circle at bottom, #e0f2fe 0, #ffffff 60%);
}

.stats-card {
  background: linear-gradient(145deg, #ffffff, #ecfdf5);
  border-radius: 18px;
  padding: 16px 10px;
  text-align: center;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.14);
}

/* =========================================
   7. FOOTER
   ========================================= */

.footer-smanu {
  padding: 40px 0 25px;
  background: radial-gradient(circle at top, #052e16 0, #020617 60%);
  color: #e5e7eb;
}

.footer-smanu a {
  color: #bbf7d0;
}

.footer-smanu a:hover {
  color: #86efac;
}

.footer-copy {
  margin-top: 8px;
  font-size: 12px;
  color: #9ca3af;
}
/* =========================================================
   Sentuhan warna di dalam kartu HERO
   ========================================================= */
.hero-smanu-inner {
  position: relative;
  border-radius: 28px;
  /* ganti background putih polos jadi kombinasi hijau-biru lembut */
  background:
    radial-gradient(circle at top left, #ecfdf5 0%, #ffffff 45%),
    radial-gradient(circle at bottom right, #e0f2fe 0%, #ffffff 50%);
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.16);
  border: 1px solid rgba(148, 163, 184, 0.18); /* garis tipis biar lebih tegas */
}

/* tambahan overlay warna sangat lembut supaya tidak flat */
.hero-smanu-inner::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(
    120deg,
    rgba(34, 197, 94, 0.08) 0%,
    rgba(255, 255, 255, 0.0) 35%,
    rgba(255, 255, 255, 0.0) 65%,
    rgba(59, 130, 246, 0.07) 100%
  );
}

/* supaya isi hero tidak mepet ke tepi setelah kita ubah inner-nya */
.hero-smanu .container {
  padding-top: 28px;
  padding-bottom: 28px;
}
/* Link kecil Portal Admin di hero */
.hero-smanu-admin-link {
  margin-top: 10px;
  text-align: right;              /* kanan, jadi berasa link internal */
}

.hero-smanu-admin-anchor {
  font-size: 12px;
  color: #6b7280;                 /* abu-abu lembut */
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.08);
  transition: all 0.2s ease;
}

.hero-smanu-admin-anchor i {
  font-size: 11px;
}

.hero-smanu-admin-anchor:hover {
  background: rgba(22, 163, 74, 0.08);
  color: #15803d;
}
.hero-smanu-admin-link {
  margin-top: 10px;
  text-align: right;
}

.hero-smanu-admin-anchor {
  font-size: 12px;
  color: #6b7280;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.08);
  transition: all 0.2s ease;
}

.hero-smanu-admin-anchor i {
  font-size: 11px;
}

.hero-smanu-admin-anchor:hover {
  background: rgba(22, 163, 74, 0.08);
  color: #15803d;
}
.hero-admin-badge {
  position: absolute;
  top: -12px;
  left: 10px;
  z-index: 20;
}

.hero-admin-badge a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: #d1fae5; /* hijau muda */
  color: #065f46; /* hijau tua */
  font-size: 13px;
  font-weight: 600;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.09);
  transition: 0.2s ease-in-out;
}

.hero-admin-badge a:hover {
  background: #10b981;
  color: white;
}

.hero-admin-badge i {
  font-size: 12px;
}
/* PORTAL ADMIN BADGE (ATAS TEKS) */
.hero-admin-top {
  margin-bottom: 10px;
}

.hero-admin-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  background: #d1fae5; /* hijau muda */
  color: #065f46 !important;
  font-size: 14px;
  font-weight: 600;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
  transition: 0.2s ease-in-out;
}

.hero-admin-btn:hover {
  background: #10b981;
  color: #fff !important;
}

.hero-admin-btn i {
  font-size: 13px;
}
/* Background luar hero (halaman) */
.hero-smanu {
  position: relative;
  background:
    radial-gradient(800px 300px at 15% 10%, rgba(34,197,94,.18), transparent 60%),
    radial-gradient(700px 260px at 85% 30%, rgba(16,185,129,.16), transparent 60%),
    linear-gradient(180deg, #ecfdf5 0%, #f8fafc 60%, #ffffff 100%);
}
/* Kartu hero utama */
.hero-smanu-inner {
  position: relative;
  background:
    radial-gradient(600px 220px at 20% 20%, rgba(16,185,129,.08), transparent 60%),
    radial-gradient(520px 200px at 80% 30%, rgba(34,197,94,.06), transparent 60%),
    #ffffff;
  border-radius: 28px;
  box-shadow:
    0 40px 90px rgba(2,6,23,.08),
    0 10px 30px rgba(2,6,23,.05);
}
.hero-smanu-inner::after {
  content:"";
  position:absolute;
  inset:0;
  border-radius:28px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.6), rgba(255,255,255,0));
  pointer-events:none;
}
/* ===== FORCE BACKGROUND HERO (luar kartu) ===== */
section.hero-smanu{
  position: relative;
  overflow: hidden;
  background: linear-gradient(180deg,#e7fff5 0%, #f6fbff 55%, #ffffff 100%) !important;
}

section.hero-smanu::before{
  content:"";
  position:absolute;
  inset:-120px;
  background:
    radial-gradient(900px 380px at 12% 18%, rgba(16,185,129,.26), transparent 60%),
    radial-gradient(820px 340px at 88% 30%, rgba(34,197,94,.20), transparent 60%),
    radial-gradient(760px 300px at 60% 85%, rgba(56,189,248,.14), transparent 62%);
  pointer-events:none;
  z-index:0;
}

/* ===== FORCE KARTU UTAMA (kotak putih besar) =====
   Ini kena ke .hero-smanu-inner yang ada di kode kamu */
.hero-smanu .hero-smanu-inner{
  position: relative;
  z-index:1;
  border-radius: 28px !important;
  background:
    radial-gradient(560px 220px at 18% 22%, rgba(16,185,129,.12), transparent 62%),
    radial-gradient(520px 200px at 80% 30%, rgba(34,197,94,.09), transparent 62%),
    radial-gradient(520px 220px at 55% 90%, rgba(56,189,248,.07), transparent 60%),
    #ffffff !important;
  box-shadow:
    0 40px 90px rgba(2,6,23,.10),
    0 14px 30px rgba(2,6,23,.06) !important;
}

/* efek “glass” tipis biar premium */
.hero-smanu .hero-smanu-inner::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius: 28px;
  background: linear-gradient(135deg, rgba(255,255,255,.65), rgba(255,255,255,0));
  pointer-events:none;
}
/* ===== KARTU HERO BESAR: bikin tidak polos ===== */
.hero-smanu .hero-smanu-inner{
  position: relative;
  border-radius: 30px !important;
  overflow: hidden; /* penting biar pattern rapi */
  background: #ffffff !important;
}

/* Layer gradient + vignette (ini yang bikin 'hidup') */
.hero-smanu .hero-smanu-inner::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    radial-gradient(700px 260px at 18% 22%, rgba(16,185,129,.14), transparent 60%),
    radial-gradient(680px 260px at 85% 35%, rgba(34,197,94,.11), transparent 62%),
    radial-gradient(700px 320px at 60% 95%, rgba(56,189,248,.08), transparent 60%),
    radial-gradient(1200px 520px at 50% 50%, transparent 55%, rgba(2,6,23,.06) 100%);
  pointer-events:none;
  z-index:0;
}

/* Pattern titik halus (super subtle tapi bikin premium) */
.hero-smanu .hero-smanu-inner::after{
  content:"";
  position:absolute;
  inset:0;
  background-image: radial-gradient(rgba(2,6,23,.07) 1px, transparent 1px);
  background-size: 18px 18px;
  opacity: .08;
  pointer-events:none;
  z-index:0;
}

/* Pastikan isi hero ada di atas background layer */
.hero-smanu .hero-smanu-inner > *{
  position: relative;
  z-index: 1;
}

/* Bonus: kasih shadow sedikit lebih elegan */
.hero-smanu .hero-smanu-inner{
  box-shadow:
    0 44px 100px rgba(2,6,23,.10),
    0 14px 34px rgba(2,6,23,.06) !important;
}
/* ===== HERO CARD (AREA GARIS BIRU) - Profesional tapi tidak polos ===== */
.hero-smanu .hero-smanu-inner{
  position: relative;
  border-radius: 26px !important;
  overflow: hidden;
  background: #fff !important;
  border: 1px solid rgba(2,6,23,.07) !important;
  box-shadow:
    0 20px 55px rgba(2,6,23,.10),
    0 6px 18px rgba(2,6,23,.06) !important;
}

/* Layer warna halus (bikin hidup) */
.hero-smanu .hero-smanu-inner::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    /* aksen kiri atas (hijau NU halus) */
    radial-gradient(520px 260px at 18% 22%, rgba(16,185,129,.18), transparent 62%),
    /* aksen kanan atas (biru soft biar tidak monoton hijau) */
    radial-gradient(520px 260px at 86% 26%, rgba(59,130,246,.12), transparent 62%),
    /* aksen bawah (teal tipis) */
    radial-gradient(650px 320px at 55% 95%, rgba(20,184,166,.10), transparent 60%),
    /* vignette sangat tipis biar depth */
    radial-gradient(1200px 600px at 50% 50%, transparent 58%, rgba(2,6,23,.05) 100%);
  pointer-events:none;
  z-index:0;
}

/* Texture halus: garis tipis horizontal (lebih “institusional” daripada dots) */
.hero-smanu .hero-smanu-inner::after{
  content:"";
  position:absolute;
  inset:0;
  background-image: linear-gradient(0deg, rgba(2,6,23,.018) 1px, transparent 1px);
  background-size: 100% 26px;
  opacity: .55;
  pointer-events:none;
  z-index:0;
}

/* Pastikan konten di atas layer */
.hero-smanu .hero-smanu-inner > *{
  position: relative;
  z-index: 1;
}
/* ===== IDENTITAS SEKOLAH (GANTI BADGE LAMA) ===== */
.hero-smanu-identity{
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 8px 0 18px;
  color: #0f766e;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: 12px;
  opacity: .9;
}

/* garis aksen halus */
.hero-smanu-identity .identity-line{
  width: 42px;
  height: 2px;
  background: linear-gradient(
    90deg,
    #16a34a,
    rgba(22,163,74,.25)
  );
  border-radius: 2px;
}

/* teks identitas */
.hero-smanu-identity .identity-text{
  position: relative;
  padding-left: 2px;
}
/* ===== HERO IDENTITY BADGE (rapi, tidak melebar, tidak rusak) ===== */
.hero-smanu-identity{
  margin: 10px 0 14px;
}

/* chip utama */
.hero-smanu-identity .identity-pill{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(16,185,129,.10);
  border: 1px solid rgba(16,185,129,.25);
  color: #0f3d2e;
  max-width: 100%;
  white-space: normal;      /* biar bisa turun baris kalau layar kecil */
  line-height: 1.2;
}

.hero-smanu-identity .identity-pill i{
  opacity: .9;
}

.hero-smanu-identity .identity-dot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #10b981;
  box-shadow: 0 0 0 4px rgba(16,185,129,.15);
  flex: 0 0 auto;
}

.hero-smanu-identity .identity-text{
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* tagline kecil bawahnya */
.hero-smanu-identity .identity-sub{
  margin-top: 8px;
  font-size: 12px;
  color: rgba(2,6,23,.62);
  letter-spacing: .02em;
}

/* responsive: biar nggak “kepanjangan” */
@media (max-width: 576px){
  .hero-smanu-identity .identity-pill{
    padding: 9px 12px;
  }
  .hero-smanu-identity .identity-text{
    font-size: 11px;
  }
}
/* ===== BADGE IDENTITAS (rapi, modern, tidak merusak layout) ===== */
.hero-smanu-identity{
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 10px 0 14px;
}

/* pill utama */
.hero-smanu-identity .identity-pill{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(16,185,129,.10);
  border: 1px solid rgba(16,185,129,.22);
  max-width: 520px;           /* penting: biar tidak melebar sampai kanan */
  width: fit-content;
  box-shadow: 0 10px 22px rgba(2,6,23,.06);
}

/* titik aksen */
.hero-smanu-identity .identity-dot{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #16a34a;
  box-shadow: 0 0 0 4px rgba(22,163,74,.18);
  flex: 0 0 auto;
}

.hero-smanu-identity .identity-pill i{
  color: #0f766e;
  font-size: 14px;
  opacity: .9;
  flex: 0 0 auto;
}

/* teks utama */
.hero-smanu-identity .identity-text{
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 12px;
  color: #0f172a;
  line-height: 1.25;
  white-space: normal;        /* boleh wrap */
}

/* sub motto */
.hero-smanu-identity .identity-sub{
  font-size: 12px;
  color: rgba(15,23,42,.72);
  letter-spacing: .06em;
  text-transform: uppercase;
  max-width: 520px;
}
/* Paksa badge identity rata kiri */
.hero-smanu-text .hero-smanu-identity{
  display: inline-flex !important;   /* biar ukuran pas konten */
  justify-content: flex-start !important;
  align-items: center;
  margin-left: 0 !important;
  margin-right: auto !important;     /* dorong ke kiri */
  text-align: left !important;
}

/* kalau ada parent yg center-in child, paksa juga */
.hero-smanu-text{
  text-align: left !important;
}
/* Perbesar kartu foto */
.hero-smanu-photo-card {
  max-width: 520px;          /* sebelumnya biasanya 420–460 */
  margin-left: auto;         /* tetap ke kanan */
  border-radius: 24px;
  overflow: hidden;
}

/* Pastikan gambar mengisi penuh */
.hero-smanu-photo-img {
  width: 100%;
  height: 340px;             /* NAIK dari ±280 */
  object-fit: cover;
}
/* === CAPTION DI BAWAH FOTO === */
.hero-smanu-caption {
  margin-top: 14px;
  text-align: center;
}

.hero-smanu-caption-chip {
  display: inline-block;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.5px;
  color: #2f6f55;
  background: rgba(46, 160, 110, 0.12);
  border-radius: 999px;
  box-shadow: none;
}
.hero-smanu-caption-chip {
  background: transparent;
  padding: 0;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  color: #5f7f6f;
}
/* ===== CAPTION BAWAH FOTO (RAPIH + SELARAS) ===== */
.hero-smanu-caption{
  margin-top: 14px;
  text-align: center; /* center biar rapi di bawah foto */
}

.hero-smanu-caption-chip{
  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 10px 14px;
  border-radius: 999px;

  background: linear-gradient(180deg, rgba(220,252,231,.92), rgba(240,253,244,.92));
  border: 1px solid rgba(16,185,129,.22);

  box-shadow: 0 10px 22px rgba(15,118,110,.12);
  backdrop-filter: blur(6px);

  font-weight: 700;
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;

  color: #0f766e;
  max-width: 92%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.hero-smanu-caption-chip .dot{
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: #22c55e;
  box-shadow: 0 0 0 4px rgba(34,197,94,.18);
  flex: 0 0 auto;
}

.hero-smanu-caption-chip .text{
  display: inline-block;
  line-height: 1;
}
/* === SAMAKAN LEBAR CAPTION DENGAN FOTO === */
.hero-smanu-photo-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* container caption */
.hero-smanu-caption {
  width: 100%;
  max-width: 520px; /* SESUAIKAN dengan lebar foto */
  margin-top: 14px;
  text-align: center;
}

/* chip caption */
.hero-smanu-caption-chip {
  display: block;
  width: 100%;
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: #1f7a4a;

  background: linear-gradient(
    135deg,
    rgba(46, 204, 113, 0.15),
    rgba(39, 174, 96, 0.25)
  );

  border-radius: 999px;
  box-shadow: 0 8px 22px rgba(46, 204, 113, 0.25);

  white-space: normal;     /* PENTING: biar gak kepotong */
  overflow: visible;       /* PENTING */
}
/* ===== HERO IDENTITY (Sekolah Berbasis...) ===== */
.hero-smanu-identity{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:10px 14px;
  background: rgba(22,163,74,.10);
  border: 1px solid rgba(22,163,74,.22);
  border-radius:999px;
  box-shadow: 0 10px 24px rgba(16,185,129,.12);
  margin: 8px 0 18px;
}
.hero-smanu-identity .identity-icon{
  width:28px;
  height:28px;
  border-radius:999px;
  background: rgba(22,163,74,.18);
  display:flex;
  align-items:center;
  justify-content:center;
  color:#0f766e;
  font-size:14px;
  flex: 0 0 28px;
}
.hero-smanu-identity .identity-text{
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#0f3d2e;
  font-weight:800;
  line-height:1.2;
}

/* ===== PHOTO + CAPTION (Chip bawah foto) ===== */
.hero-smanu-photo-wrap{
  max-width: 620px;      /* biar foto bisa agak gede */
  margin-left: auto;
}
.hero-smanu-photo-card{
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 18px 40px rgba(2,6,23,.18);
}
.hero-smanu-caption{
  margin-top: 14px;
  width: 100%;           /* WAJIB: ikut lebar foto */
}
.hero-smanu-caption-chip{
  width: 100%;           /* WAJIB: ikut lebar foto */
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(16,185,129,.14);
  border: 1px solid rgba(16,185,129,.24);
  box-shadow: 0 10px 24px rgba(16,185,129,.14);
  color:#0f3d2e;
  font-weight:800;
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
  text-align:center;
  line-height:1.2;
  flex-wrap: wrap;       /* biar ga kepotong */
  white-space: normal;   /* biar bisa turun baris */
}
.hero-smanu-caption-chip:before{
  content:"";
  width:9px;
  height:9px;
  border-radius:999px;
  background:#22c55e;
  box-shadow: 0 0 0 4px rgba(34,197,94,.18);
}
/* ===== HERO FIX: BADGE & CAPTION CHIP ===== */
.hero-smanu-text { position: relative; }

/* Badge identitas (rata kiri, ukuran pas, tidak melebar aneh) */
.hero-smanu-identity{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(22,163,74,.10);
  border: 1px solid rgba(22,163,74,.18);
  color: #0f5132;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-size: 11px;
  line-height: 1;
  margin: 10px 0 14px 0;  /* rata kiri */
}

/* dot kecil di kiri (kalau mau) */
.hero-smanu-identity .id-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #22c55e;
  box-shadow: 0 0 0 4px rgba(34,197,94,.15);
  flex: 0 0 10px;
}

/* icon daun */
.hero-smanu-identity .id-icon{
  font-size: 13px;
  opacity: .9;
}

/* Wrapper foto: biar caption bisa ngikut lebar foto */
.hero-smanu-photo-wrap{ max-width: 560px; margin-left: auto; }

/* Card carousel */
.hero-smanu-photo-card{
  border-radius: 26px;
  overflow: hidden;
}

/* Caption chip: LEBAR 100% ngikut foto, ga kepotong */
.hero-smanu-caption{
  width: 100%;
  max-width: 100%;
  margin-top: 12px;
}

.hero-smanu-caption-chip{
  width: 100%;
  display: block;
  padding: 12px 14px;
  border-radius: 999px;
  background: rgba(22,163,74,.10);
  border: 1px solid rgba(22,163,74,.18);
  color: #0f5132;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  font-size: 11px;
  text-align: center;
  white-space: normal;     /* biar ga kepotong */
  line-height: 1.2;
}

/* Responsive biar tetap rapi */
@media (max-width: 991px){
  .hero-smanu-photo-wrap{ max-width: 100%; margin-left: 0; }
}

  /* ===== HERO WRAPPER ===== */
  .hero-smanu{
    position: relative;
    padding: 44px 0 60px;
  }
  .hero-smanu-inner{
    position: relative;
  }

  /* Card besar putih (yang kamu kasih garis biru itu) */
  .hero-smanu-inner .container{
    position: relative;
  }

  /* ===== KIRI: TEXT AREA ===== */
  .hero-smanu-text{
    padding-right: 10px;
  }

  .hero-admin-top{ margin-bottom: 12px; }
  .hero-admin-btn{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 999px;
    background: rgba(34,197,94,.14);
    color: #0f5132;
    border: 1px solid rgba(34,197,94,.25);
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 10px 25px rgba(16, 185, 129, .12);
  }
  .hero-admin-btn:hover{ text-decoration:none; filter: brightness(.98); }

  /* ===== BADGE SEKOLAH (RATA KIRI, PAS) ===== */
  .hero-smanu-identity{
    display: inline-flex;           /* penting: biar lebarnya ngikut konten */
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-radius: 999px;
    background: rgba(16,185,129,.10);
    border: 1px solid rgba(16,185,129,.22);
    color: #0f5132;
    font-weight: 800;
    letter-spacing: .10em;
    text-transform: uppercase;
    font-size: 11px;
    line-height: 1;
    margin: 6px 0 14px;
  }

  /* Dot kecil rapi (ini yang kamu maksud “bulat”) */
  .hero-smanu-identity .identity-dot{
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 4px rgba(34,197,94,.18);
    flex: 0 0 auto;
  }

  .hero-smanu-identity .identity-text{
    white-space: nowrap;            /* default: 1 baris */
  }

  /* kalau layar kecil, biar boleh turun baris (supaya tidak maksa panjang) */
  @media (max-width: 576px){
    .hero-smanu-identity .identity-text{ white-space: normal; }
  }

  /* ===== TITLE & DESC ===== */
  .hero-smanu-title{
    font-weight: 900;
    letter-spacing: -0.02em;
    color: #0b1b2b;
    margin: 0 0 12px;
    line-height: 1.08;
  }
  .hero-smanu-desc{
    color: #4b5563;
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 18px;
    max-width: 520px;
  }

  /* ===== BUTTONS ===== */
  .hero-actions-row{
    display: flex;
    flex-wrap: wrap;
    gap: 10px 12px;
    align-items: center;
    margin-bottom: 16px;
  }
  .hero-smanu-btn-main{
    box-shadow: 0 14px 26px rgba(34,197,94,.22);
    font-weight: 800;
  }
  .hero-smanu-btn-ghost{
    border-width: 2px;
    font-weight: 800;
  }
  .hero-smanu-btn-ppdb{
    border-width: 2px;
    font-weight: 800;
  }

  /* ===== STATS ===== */
  .hero-smanu-stats{
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 10px;
  }
  .stat-box{
    background: #fff;
    border: 1px solid rgba(15, 23, 42, .08);
    border-radius: 12px;
    padding: 12px 14px;
    box-shadow: 0 14px 30px rgba(15, 23, 42, .06);
  }
  .stat-label{
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #94a3b8;
    margin-bottom: 6px;
    font-weight: 800;
  }
  .stat-value{
    font-weight: 900;
    color: #0b1b2b;
    font-size: 14px;
    line-height: 1.25;
  }
  @media (max-width: 992px){
    .hero-smanu-stats{ grid-template-columns: 1fr; }
  }

  /* ===== KANAN: FOTO ===== */
  .hero-smanu-photo-wrap{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding-left: 10px;
  }

  /* Card foto dibuat lebih besar */
  .hero-smanu-photo-card{
    width: 100%;
    max-width: 560px;              /* ✅ membesarkan */
    border-radius: 22px;
    overflow: hidden;
    box-shadow: 0 30px 70px rgba(2, 44, 34, .18);
    border: 1px solid rgba(15, 23, 42, .08);
    background: #fff;
  }

  .hero-smanu-photo-img{
    width: 100%;
    height: 360px;                 /* ✅ tinggi lebih “berisi” */
    object-fit: cover;
    display: block;
  }
  @media (max-width: 992px){
    .hero-smanu-photo-img{ height: 300px; }
  }

  /* tombol slider biar lebih soft */
  .hero-smanu-control{
    width: 44px;
    opacity: .85;
  }

  /* ===== CAPTION (LEBAR NGIKUT FOTO + TIDAK KEPOTONG) ===== */
  .hero-smanu-caption{
    width: 100%;
    max-width: 560px;              /* ✅ sama dengan foto */
    display: flex;
    justify-content: center;
  }
  .hero-smanu-caption-chip{
    width: 100%;                   /* ✅ ngikut lebar foto */
    display: block;
    text-align: center;
    padding: 12px 16px;
    border-radius: 999px;
    background: rgba(16,185,129,.10);
    border: 1px solid rgba(16,185,129,.22);
    color: #0f5132;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
    font-size: 11px;
    line-height: 1.2;
    white-space: normal;           /* ✅ boleh turun baris */
    overflow: visible;             /* ✅ tidak kepotong */
  }




  
/* ===== Portal Admin (biar konsisten) ===== */
.hero-admin-top{margin-bottom:12px;}
.hero-admin-btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:10px 16px;
  border-radius:999px;
  background:rgba(34,197,94,.12);
  border:1px solid rgba(34,197,94,.22);
  color:#0b3d2b;
  font-weight:700;
  text-decoration:none;
  box-shadow:0 10px 22px rgba(16,185,129,.10);
}

/* ===== BADGE "Sekolah Berbasis ..." (ikon di samping teks, bukan di atas) ===== */
.hero-smanu-identity{
  display:inline-flex;
  align-items:center;
  justify-content:flex-start;
  gap:10px;

  padding:10px 14px;
  margin: 2px 0 16px 0;

  /* bukan pill bulat total: */
  border-radius:12px;

  background: rgba(209,250,229,.55);
  border:1px solid rgba(16,185,129,.22);
  box-shadow:0 10px 22px rgba(16,185,129,.08);

  max-width:100%;
}

.hero-smanu-identity .identity-icon{
  width:28px; height:28px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 28px;

  border-radius:10px;
  background: rgba(16,185,129,.16);
  border:1px solid rgba(16,185,129,.18);
}

.hero-smanu-identity .identity-icon i{
  font-size:14px;
  color:#0f7a43;
  line-height:1;
}

.hero-smanu-identity .identity-text{
  font-size:12px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#0b3d2b;
  line-height:1.2;

  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* ===== FOTO & CAPTION: lebar caption ngikut foto ===== */
.hero-smanu-photo-wrap{ position:relative; }

/* set ukuran maksimal kartu foto (samakan caption) */
.hero-smanu-photo-card{
  width:100%;
  max-width: 560px;     /* kamu bisa naikkan 600 kalau mau */
  margin-left:auto;     /* rapat kanan kolom */
  border-radius: 22px;
  overflow:hidden;
}

.hero-smanu-photo-img{
  width:100%;
  height: 360px;        /* adjust: 380 kalau mau lebih tinggi */
  object-fit: cover;
  border-radius: 22px;
}

/* caption mengikuti max-width foto */
.hero-smanu-caption{
  max-width: 560px;     /* harus sama dengan .hero-smanu-photo-card */
  margin: 12px 0 0 auto;
}

.hero-smanu-caption-chip{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;

  padding:12px 14px;

  /* bukan bulat total */
  border-radius: 14px;

  background: rgba(209,250,229,.55);
  border:1px solid rgba(16,185,129,.22);
  box-shadow:0 10px 22px rgba(16,185,129,.08);

  color:#0b3d2b;
  font-weight:800;
  letter-spacing:.10em;
  text-transform:uppercase;
  font-size:12px;

  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Responsive */
@media (max-width: 991.98px){
  .hero-smanu-photo-card,
  .hero-smanu-caption{
    max-width: 100%;
    margin-left: 0;
  }
  .hero-smanu-photo-img{ height: 300px; }
}

@media (max-width: 575.98px){
  .hero-smanu-identity{ border-radius: 12px; }
  .hero-smanu-identity .identity-text{
    white-space:normal; /* HP boleh turun baris */
    letter-spacing:.08em;
    font-size:11px;
  }
  .hero-smanu-caption-chip{
    white-space:normal;
    letter-spacing:.06em;
    font-size:11px;
  }
}

/* ===== BADGE IDENTITAS (RAPI, IKON DI SAMPING TEKS) ===== */
.hero-smanu-identity{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  flex-direction:row !important;
  gap:10px;

  padding:10px 14px;
  margin: 6px 0 16px;

  background: rgba(34,197,94,.10);
  border: 1px solid rgba(34,197,94,.22);
  border-left: 4px solid #22c55e;
  border-radius: 10px;            /* bukan bulat pill */
  box-shadow: 0 10px 22px rgba(16,185,129,.10);

  max-width:100%;
}

.hero-smanu-identity .identity-icon{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;

  width:28px;
  height:28px;
  border-radius:8px;              /* kotak halus */
  background: rgba(34,197,94,.16);
  border: 1px solid rgba(34,197,94,.22);

  flex:0 0 28px;
  margin:0 !important;
}

.hero-smanu-identity .identity-icon i{
  font-size:14px;
  color:#15803d;
  line-height:1;
}

.hero-smanu-identity .identity-text{
  font-size:12px;
  font-weight:800;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#0b3d2b;
  line-height:1.2;

  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* HP: boleh turun baris biar nggak kepotong */
@media (max-width:576px){
  .hero-smanu-identity .identity-text{ white-space:normal; }
}
/* ===== FIX BADGE SEKOLAH: pendek + rapi + ikon samping ===== */
.hero-smanu-identity{
  display:inline-flex !important;
  align-items:center !important;
  gap:10px !important;

  padding:8px 12px !important;        /* bikin tidak tinggi */
  margin:6px 0 14px !important;       /* jarak ke judul */
  max-width:100% !important;

  background:rgba(34,197,94,.10) !important;
  border:1px solid rgba(34,197,94,.22) !important;  /* tipis */
  border-radius:10px !important;      /* bukan pill/bulat banget */
  box-shadow:0 10px 20px rgba(16,185,129,.08) !important;
}

.hero-smanu-identity .identity-icon{
  width:22px !important;
  height:22px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;

  background:rgba(34,197,94,.18) !important;
  border:1px solid rgba(34,197,94,.22) !important;
  border-radius:7px !important;       /* kotak rounded kecil */
  flex:0 0 22px !important;
}

.hero-smanu-identity .identity-icon i{
  font-size:12px !important;
  color:#15803d !important;
  line-height:1 !important;
}

.hero-smanu-identity .identity-text{
  font-size:12px !important;
  font-weight:800 !important;
  letter-spacing:.12em !important;
  text-transform:uppercase !important;
  color:#0b3d2b !important;

  line-height:1.1 !important;         /* biar tidak “tinggi” */
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

/* HP: boleh turun baris biar gak kepotong */
@media (max-width: 576px){
  .hero-smanu-identity .identity-text{
    white-space:normal !important;
  }
}
/* ===============================
   HERO TANPA CARD (MINIMALIS)
   =============================== */

/* INI INTI MASALAHNYA */
.hero-smanu .hero-smanu-inner{
  background: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

/* Kadang padding card datang dari container */
.hero-smanu .hero-smanu-inner > .container{
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Section hero yang pegang background */
.hero-smanu{
  background: linear-gradient(135deg, #e6fbf2, #ffffff);
  padding: 100px 0;
}
/* Paksa level tertinggi: inner benar2 kosong */
section.hero-smanu > .hero-smanu-inner{
  background: rgba(0,0,0,0) !important;
  background-image: none !important;
  box-shadow: none !important;
  border: 0 !important;
  outline: 0 !important;
  border-radius: 0 !important;

  filter: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

section.hero-smanu > .hero-smanu-inner::before,
section.hero-smanu > .hero-smanu-inner::after{
  content: none !important;
  display: none !important;
}
/* Bikin .hero-smanu-inner hilang box-nya (transparan total) */
.hero-smanu-inner{
  display: contents !important;
}

/* Pastikan padding hero pindah ke section-nya */
.hero-smanu{
  padding: 90px 0 !important;
  background: linear-gradient(135deg,#e6fbf2,#ffffff) !important;
}
/* ==================================================
   HERO SMADU – RESPONSIVE FIX (KHUSUS STRUKTUR INI)
   ================================================== */

/* Hilangkan efek kotak tak diinginkan */
.hero-smanu-inner{
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  outline: none !important;
}

/* =====================
   TABLET & MOBILE
   ===================== */
@media (max-width: 991px){

  .hero-smanu{
    padding: 20px 0 !important;
  }

  /* Paksa jadi 1 kolom */
  .hero-smanu .row.align-items-center{
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .hero-smanu .row.align-items-center > .col-lg-6{
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
  }

  /* =====================
     TEKS & IDENTITAS
     ===================== */
  .hero-smanu-text{
    text-align: left !important;
  }

  .hero-smanu-identity{
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    max-width: 100% !important;
    white-space: normal !important;
    padding: 6px 12px !important;
  }

  .hero-smanu-title{
    font-size: 32px !important;
    line-height: 1.15 !important;
    margin: 12px 0 !important;
  }

  .hero-smanu-desc{
    font-size: 14px !important;
    line-height: 1.7 !important;
    margin-bottom: 16px !important;
  }

  /* =====================
     TOMBOL
     ===================== */
  .hero-smanu-actions{
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin-bottom: 16px !important;
  }

  .hero-smanu-actions a{
    font-size: 14px !important;
    padding: 10px 16px !important;
  }

  /* =====================
     STAT BOX
     ===================== */
  .hero-smanu-stats{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    margin-top: 10px !important;
  }

  .hero-smanu-stats .stat-box{
    padding: 14px !important;
    border-radius: 14px !important;
  }

  /* =====================
     SLIDER FOTO
     ===================== */
  .hero-smanu-photo-wrap{
    width: 100% !important;
    margin-top: 20px !important;
  }

  .hero-smanu-photo-card{
    border-radius: 18px !important;
    overflow: hidden !important;
  }

  .hero-smanu-photo-img{
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
  }

  /* Kontrol slider jangan nutup konten */
  .hero-smanu-control{
    width: 36px !important;
  }

  /* =====================
     CAPTION FOTO
     ===================== */
  .hero-smanu-caption{
    width: 100% !important;
    margin-top: 10px !important;
    text-align: center !important;
  }

  .hero-smanu-caption-chip{
    display: inline-block !important;
    padding: 8px 14px !important;
    font-size: 13px !important;
    border-radius: 999px !important;
  }

  /* =====================
     PORTAL ADMIN
     ===================== */
  .hero-admin-btn{
    padding: 8px 14px !important;
    font-size: 13px !important;
    border-radius: 12px !important;
  }
}
/* ===== MOBILE SPACING FIX (anti nempel kiri-kanan) ===== */
@media (max-width: 991px){

  /* paksa padding kiri-kanan untuk hero saja */
  .hero-smanu .container{
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* kalau masih nempel (kadang container bootstrap ketimpa), kunci inner juga */
  .hero-smanu-inner{
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  /* rapihin area teks biar tidak mepet */
  .hero-smanu-text{
    padding: 0 !important;
  }

  /* tombol: biar rapi, jangan terlalu panjang */
  .hero-smanu-actions{
    gap: 10px !important;
  }
  .hero-smanu-actions a{
    width: auto !important;
    max-width: 100% !important;
  }

  /* stat box: beri ruang */
  .hero-smanu-stats .stat-box{
    margin: 0 !important;
  }

  /* pastikan tidak ada elemen yang bikin overflow ke samping */
  .hero-smanu,
  .hero-smanu *{
    box-sizing: border-box !important;
  }
  body{
    overflow-x: hidden !important;
  }
}
/* =========================
   FOOTER MOBILE: BIAR RINGKAS
   ========================= */
@media (max-width: 576px){

  /* blok footer utama */
  footer,
  .footer,
  #footer,
  .site-footer,
  .footer-area{
    padding-top: 28px !important;
    padding-bottom: 18px !important;
  }

  /* kalau ada wrapper dalam footer */
  footer .container,
  .footer .container,
  #footer .container,
  .site-footer .container{
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* logo di footer */
  footer img,
  .site-footer img,
  #footer img{
    max-width: 110px !important;
    height: auto !important;
    margin-bottom: 10px !important;
  }

  /* judul kolom */
  footer h3, footer h4,
  .site-footer h3, .site-footer h4{
    margin: 14px 0 8px !important;
    font-size: 16px !important;
  }

  /* list menu biar rapat */
  footer ul, .site-footer ul, #footer ul{
    margin: 0 !important;
    padding: 0 !important;
  }
  footer ul li, .site-footer ul li, #footer ul li{
    margin: 6px 0 !important;
    line-height: 1.3 !important;
  }

  /* tombol "Hubungi Kami" biar gak makan tempat */
  footer .btn, #footer .btn, .site-footer .btn{
    padding: 10px 14px !important;
    border-radius: 12px !important;
    font-size: 14px !important;
  }
}


/* ============================================================
   SMADU MOBILE NAV FINAL FIX — 2026-08-02
============================================================ */
@media (max-width: 991.98px) {
  [data-toggle="affix"],
  .nav-menu2,
  .navbar.navbar2 {
    position: relative !important;
    overflow: visible !important;
  }

  [data-toggle="affix"] {
    z-index: 1040 !important;
  }

  .nav-menu2,
  .navbar.navbar2 {
    z-index: 1041 !important;
  }

  .navbar.navbar2 {
    display: flex !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    min-height: 42px !important;
    padding-right: 56px !important;
  }

  .navbar2 .nav-brand2 {
    position: relative !important;
    z-index: 1 !important;
    max-width: calc(100% - 8px) !important;
    overflow: hidden !important;
  }

  .navbar2 .navbar-toggler {
    position: absolute !important;
    top: 50% !important;
    right: 8px !important;
    width: 44px !important;
    height: 40px !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: translateY(-50%) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 1055 !important;
    pointer-events: auto !important;
    touch-action: manipulation !important;
    cursor: pointer !important;
  }

  .navbar2 .navbar-toggler .icon-menu {
    pointer-events: none !important;
  }

  .navbar2 .navbar-collapse {
    position: relative !important;
    z-index: 1050 !important;
    flex-basis: calc(100% + 56px) !important;
    width: calc(100% + 56px) !important;
    margin-right: -56px !important;
  }

  .navbar2 .navbar-collapse.show {
    display: block !important;
  }
}


/* ======================================================================
   SMADU SUBMENU MOBILE HEADER GAP FIX v22
   Menonaktifkan spacer hasil script affix pada layar mobile.
   Desktop tetap menggunakan navbar affix seperti sebelumnya.
   ====================================================================== */
@media (max-width: 767.98px) {
  .smadu-affix-spacer {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    overflow: hidden !important;
  }

  [data-toggle="affix"],
  [data-toggle="affix"].affix {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    margin-top: 0 !important;
    transform: none !important;
  }

  html,
  body {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}