*{
  margin:0;
  padding:0;
  box-sizing:border-box;
  font-family:Arial, Helvetica, sans-serif;
}

html{
  scroll-behavior:smooth;
}

body{
  background:#ffffff;
  overflow:hidden;
  color:#222;
}

a{
  text-decoration:none;
  color:inherit;
}

/* =========================
   TOPBAR DESKTOP
========================= */

.topbar{
  height:60px;
  background:#004180;
  position:fixed;
  top:0;
  left:0;
  right:0;
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:#fff;
}

img{
  max-width:100%;
  height:auto;
}

/* =========================
   LEFT LOGO
========================= */
.language-dropdown{
  position:relative;
  margin-right:15px;
}

.lang-btn{
  background:none;
  border:none;
  color:#fff;
  cursor:pointer;
  display:flex;
  align-items:center;
  gap:8px;
  font-size:14px;
}

.lang-menu{
  position:absolute;
  top:100%;
  right:0;
  min-width:170px;
  background:#fff;
  display:none;
  box-shadow:0 5px 15px rgba(0,0,0,.15);
  z-index:999;
}

.lang-menu a{
  display:block;
  padding:12px 15px;
  font-size: 14px;
  color:#111;
}

.lang-menu a:hover{
  background:#f5f5f5;
}

.language-dropdown:hover .lang-menu{
  display:block;
}

/* MOBILE */

.mobile-language{
  position:relative;
}

.mobile-lang-btn{
  background:none;
  border:none;
  color:#fff;
  font-size:18px;
  cursor:pointer;
}

.mobile-lang-menu{
  position:absolute;
  right:0;
  top:40px;
  background:#fff;
  min-width:160px;
  display:none;
  box-shadow:0 5px 15px rgba(0,0,0,.15);
  z-index:999;
}

.mobile-lang-menu a{
  display:block;
  padding:12px;
  color:#111;
}

.mobile-language.active .mobile-lang-menu{
  display:block;
}

.topbar-left{
  width:300px;
  padding:0 18px;
}

.top-logo{
  display:flex;
  align-items:center;
  gap:10px;
}

/* TEXT */
.top-logo span{
  font-size:15px;
  line-height:1.2;
  font-weight:600;
}

/* LOGO */
.school-logo{
  width:45px;
  height:45px;
  object-fit:contain;
}

.school-logo-mobile{
  width:34px;
  height:34px;
  object-fit:contain;
}

/* =========================
   MENU
========================= */

.top-menu{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:flex-start;

  gap:22px;

  padding-left:40px;
}

.top-menu a{
  color:#fff;
  font-size:14px;
  font-weight:600;
  transition:0.3s;
}

.top-menu a:hover{
  opacity:0.7;
}

/* =========================
   SEARCH
========================= */

.top-search{
  width:65px;
  height:60px;
  background:#0f89ff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
  cursor:pointer;
  transition:0.3s;
}

.top-search:hover{
  background:#0f89ff;
}

/* =========================
   SEARCH OVERLAY
========================= */

.search-overlay{
  position:fixed;
  top:60px;
  left:0;
  right:0;
  bottom:0;
  background:#f3f3f3;
  z-index:99999;
  display:none;
  justify-content:center;
  align-items:flex-start;
  padding-top:70px;
}

/* SHOW */
.search-overlay.show{
  display:flex;
}

/* BOX */
.search-overlay-box{

  width:100%;
  max-width:700px;

  text-align:center;
}

/* TITLE */
.search-overlay-box p{
  font-size:18px;
  margin-bottom:24px;
  color:#222;
}

/* INPUT */
.overlay-search-input{
  background:#fff;
  border:2px solid #222;
  display:flex;
  align-items:center;
  padding:0 18px;
  height:60px;
}

/* ICON */
.overlay-search-input i{

  color:#0f89ff;

  font-size:28px;
}

/* INPUT */
.overlay-search-input input{

  flex:1;

  border:none;
  outline:none;

  background:none;

  padding:0 18px;

  font-size:20px;
}

/* CLOSE BUTTON */
.close-search{

  width:34px;
  height:34px;

  border:none;

  border-radius:50%;

  background:#ddd;

  cursor:pointer;

  font-size:14px;
}

.search-submit{
    background:none;
    border:0;
    cursor:pointer;
    font-size:18px;
    color:#111;
    padding:0 8px;
}

/* =========================
   MOBILE SEARCH OVERLAY
========================= */

@media(max-width:768px){

  .mobile-lang-menu a{
    font-size: 14px;
  }

  .search-overlay{
    top:68px;
    left:0;
    right:0;
    bottom:0;
    padding:0;
    background:#f3f3f3;
    justify-content:flex-start;
    align-items:flex-start;
    overflow-y:auto;
  }

  .search-overlay-box{
    width:100%;
    max-width:100%;
    padding:18px;
  }

  /* TITLE */
  .search-overlay-box p{
    display:none;
  }

  /* SEARCH INPUT */
  .overlay-search-input{
    height:62px;
    border:1px solid #0f89ff;
    padding:0 14px;
    background:#fff;
  }

  .overlay-search-input i{

    font-size:22px;
  }

  .overlay-search-input input{
    font-size:15px;
  }

  /* CLOSE */
  .close-search{
    width:30px;
    height:30px;
    font-size:13px;
  }

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

.container{
  display:flex;
  margin-top:60px;
  height:calc(100vh - 60px);
}

/* =========================
   SIDEBAR
========================= */

.sidebar{
    width:340px;
    background:#fff;
    position:fixed;
    top:60px;
    left:0;
    bottom:0;

    display:flex;
    flex-direction:column;

    overflow-y:auto;
    overflow-x:hidden;

    scrollbar-width:none;      /* Firefox */
    -ms-overflow-style:none;   /* IE & Edge lama */

    padding:28px 24px;
}

.sidebar::-webkit-scrollbar{
    display:none;              /* Chrome, Edge, Safari */
}

/* =========================
   SIDEBAR TITLE
========================= */

.sidebar-title{
  font-size:18px;
  line-height:1.5;
  font-weight:700;
  margin-top: -5px;
  margin-bottom:20px;
}

/* =========================
   SEARCH BOX
========================= */

.search-box{
  background:#fff;

  display:flex;
  align-items:center;
  gap:12px;

  padding:16px 18px;

  margin-bottom:20px;

  border:1px solid #ddd;
}

.search-box i{
  color:#0f89ff;
  font-size:18px;
}

.search-box input{
  border:none;
  outline:none;
  background:none;

  width:100%;

  font-size:14px;
}

/* =========================
   MENU
========================= */

.menu h3{
  font-size:15px;
  margin-bottom:15px;
  font-weight:700;
}

.menu-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px 16px;
}

.menu-grid a{
  font-size:14px;
  line-height:1.3;
  transition:0.3s;
  color:#333;
}

.menu-grid a:hover{
  color:#004180;
}

/* =========================
   INFO BOX
========================= */

.info-box{
  margin-top:34px;
  background:#fff;
  border:1px solid #0f89ff;
  border-radius:8px;
  padding:18px;
}

.info-box h4{
  font-size:15px;
  margin-bottom:8px;
  color:#004180;
  line-height:1.5;
}

.info-box p{
  line-height:1.6;
  font-size:14px;
  color:#444;
}

/* =========================
   FOOTER
========================= */

.mobile-footer{
  display:none;
}

.footer{
    position:static;
    margin-top:auto;
    padding-top:24px;
    font-size:12px;
    color:#444;
    line-height:1.7;
}

.footer strong{
  font-size:13px;
  position:relative;
  top:12px;
}

.footer strong{
  display:block;
  margin-bottom:16px;
}

.footer-address{
  margin-top:14px;
  font-size: 13px;
  line-height:1.3;
}

.footer-links{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:10px;
}

.footer-links a{
  transition:0.3s;
}

.footer-links a:hover{
  color:#004180;
}

.footer-social{
  display:flex;
  align-items:center;
  gap:25px;
  margin-top:5px;
  margin-bottom:0px;
}

.footer-social a{
  font-size:18px;
  transition:0.3s;
}

/* FACEBOOK */
.footer-social a:nth-child(1){
  color:#1877f2;
}

/* YOUTUBE */
.footer-social a:nth-child(2){
  color:#ff0000;
}

/* INSTAGRAM */
.footer-social a:nth-child(3){
  color:#e4405f;
}

/* TWITTER / X */
.footer-social a:nth-child(4){
  color:#000;
}

.footer-social a:hover{
  transform:translateY(-2px);
}

/* =========================
   MAIN CONTENT
========================= */

.main{
  margin-left:340px;
  width:calc(100% - 340px);
  height:calc(100vh - 60px);
  overflow-y:auto;
  overflow-x:hidden;
  background:#f5f5f5;
}

/* =========================
   HERO
========================= */

.hero{
  position:relative;
  overflow:hidden;
  padding:24px;
}

/* =========================
   HERO CONTENT
========================= */
.hero-content{
  position:relative;
  left:0;
  bottom:0;
  background:#f5f5f5;
  color:#000;
  padding:24px 0;
  max-width:100%;
}

.hero{
  padding:24px;
  background:#f5f5f5;
}

/* =========================
   PAGE LOAD ANIMATION
========================= */

.animate-load{
  opacity:0;
  transform:translateY(5px);
}

.animate-load.show{
  opacity:1;
  transform:translateY(0);
  transition:1s ease;
}

.hero img.animate-load{
  opacity:0;
  transform:translateY(20px);
}

.hero img.animate-load.show{
  opacity:1;
  transform:translateY(0);
  transition:
    opacity 1.4s ease,
    transform 1.4s ease;
}

.hero img{
  width:100%;
  height:600px;
  object-fit:cover;
  margin-top: 5px;
  display:block;
  border-radius:4px;
}

.hero-content p{
  font-size:16px;
  line-height:1.7;
}

.hero-meta{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:18px;
  margin-top:18px;
  font-size:14px;
}

.hero-meta a{
  color:#004180;
  font-weight:600;
}

.hero-meta a:hover{
  text-decoration:none;
}

.share-links{
  display:flex;
  align-items:center;
  gap:10px;
}

.share-links i{
  font-size:15px;
}

/* Hero normal jika promo banner tampil */
.hero-news-slider {
    margin-top: 0 !important;
}

/* Hero diturunkan sedikit jika promo banner tidak tampil */
.hero-news-slider.hero-no-banner {
    margin-top: 8px !important;
}

@media (max-width: 768px) {
    .hero-news-slider.hero-no-banner {
        margin-top: -30px !important;
    }

    .hero-news-slider .hero-content h1 {
        font-size: 20px !important;
        line-height: 1.1 !important;
    }
}
/* =========================
   SECTION
========================= */

.section{
  padding:25px;
}

.section-title{
  font-size:28px;
  margin-top: -20px;
  margin-bottom:30px;
  font-weight:700;
}

/* =========================
   GRID
========================= */

.grid{
  display:grid;
  grid-template-columns:
  repeat(auto-fit,minmax(320px,1fr));
  gap:34px;
}

.card{
  will-change:transform,opacity;
  opacity:0;
  transform:translateY(50px);
  transition:
    opacity .8s ease,
    transform .8s ease;
}

.card.show{
  opacity:1;
  transform:translateY(0);
}

.card{
  transition:0.3s;
}

.card:hover{
  transform:translateY(-5px);
}

.card img{
  width:100%;
  height:260px;

  object-fit:cover;
}

.card h3{
  font-size:20px;
  margin-top:16px;
  margin-bottom:12px;

  line-height:1.4;
}

.card p{
  font-size:16px;
  line-height:1.7;
  color:#555;
}


.news-meta{
    margin-top:10px;
    padding-top:5px;
    margin-bottom: 20px;
    border-top:1px solid #eee;
    display:flex;
    justify-content:space-between;
    align-items:center;
    font-size:14px;
    color:#777;
}

.news-meta span{
    display:flex;
    align-items:center;
    gap:6px;
}
/* =========================
   CTA
========================= */

.cta{
  background:#004180;
  color:#fff;

  padding:22px 40px;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}

.cta-text h2{
  font-size:18px;
  margin-bottom:8px;
  line-height:1.4;
}

.cta-text p{
  font-size:16px;
  line-height:1.7;
  opacity:0.95;
}

.cta-btn{
  border:1px solid #fff;

  background:transparent;
  color:#fff;

  padding:12px 24px;

  font-size:14px;
  font-weight:700;

  cursor:pointer;

  transition:0.3s;

  flex:none;
}

.cta-btn:hover{
  background:#fff;
  color:#004180;
}
/* =========================
   MOBILE TOPBAR
========================= */

.mobile-topbar{
  display:none;
}

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

::-webkit-scrollbar{
  width:8px;
}

::-webkit-scrollbar-thumb{
  background:#bbb;
}

::-webkit-scrollbar-track{
  background:#f1f1f1;
}


/* =========================
   RESPONSIVE
========================= */
@media (prefers-reduced-motion: reduce){

  *{
    animation:none !important;
    transition:none !important;
  }

}

@media (max-width:1200px){

  .sidebar{
    width:300px;
  }

  .main{
    margin-left:300px;
    width:calc(100% - 300px);
  }

  .hero img{
    height:450px;
  }

}


@media(max-width:992px){

  .top-menu{
    gap:14px;
  }

  .top-menu a{
    font-size:13px;
  }

  .sidebar{
    width:300px;
  }

  .main{
    margin-left:300px;
    width:calc(100% - 300px);
  }

  .hero-content h1{ 
    font-size:25px;
  }

}


/* =========================
   MOBILE DROPDOWN MENU
========================= */

.mobile-dropdown{
  display:none;
  position:absolute;
  top:52px;
  left:0;
  right:0;
  background:#f7f7f7;
  z-index:9999;
  padding:18px 16px;
  border-top:1px solid rgba(255,255,255,0.08);
  box-shadow:0 6px 14px rgba(0,0,0,0.10);
}

/* SHOW */
.mobile-dropdown.show{
  display:grid;
}

/* GRID */
.mobile-dropdown{
  grid-template-columns:1fr 1fr;
  gap:12px 24px;
}

/* LINK */
.mobile-dropdown a{
  display:block;
  font-size:14px;
  font-weight:500;
  color:#111;
  line-height:1.5;
  padding-bottom:5px;
  border-bottom:1px solid #ddd;
  transition:0.25s;
}

/* HOVER */
.mobile-dropdown a:hover{
  color:#004180;
  border-color:#004180;
}

/* MENU ICON */
.mobile-menu i{
  transition:0.3s;
}

/* ACTIVE */
.mobile-menu.active i{
  transform:rotate(180deg);
}

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

@media(max-width:768px){

  body{
    overflow:auto;
  }

  /* =========================
     HIDE DESKTOP
  ========================= */

  .topbar{
    display:none;
  }


  /* HIDE SIDEBAR FOOTER */
.footer{
  display:none;
}

.mobile-footer{
  display:block;

  background:#f5f5f5;

  padding:28px 18px 20px;

  font-size:13px;
  line-height:1.8;
}

.mobile-footer-menu{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px 24px;
  margin-bottom:24px;
}

.mobile-footer-menu a{
    color:#000;
    font-size:15px;
    line-height:1.50;
    text-decoration:none;
}

.mobile-footer strong{
  display:block;
  font-size:16px;
  margin-bottom:10px;
}

.footer-address{
  margin-bottom:18px;
  line-height: 1.8;
  font-size: 15px;
}

.mobile-footer-links{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-bottom:10px;
}

.mobile-footer-links a{
  color:#000;
  text-decoration:none;
}

.mobile-social{
  display:flex;
  gap:25px;
}

.mobile-social a{
  font-size:20px;
}

/* FACEBOOK */
.mobile-social a:nth-child(1){
  color:#1877f2;
}

/* YOUTUBE */
.mobile-social a:nth-child(2){
  color:#ff0000;
}

/* INSTAGRAM */
.mobile-social a:nth-child(3){
  color:#e4405f;
}

/* TWITTER / X */
.mobile-social a:nth-child(4){
  color:#000000;
}
  /* =========================
   MOBILE TOPBAR
========================= */

.mobile-topbar{

  display:flex;
  align-items:center;

  background:#004180;

  color:#fff;

  position:relative;

  height:52px;
}

.mobile-logo{

  display:flex;
  align-items:center;

  gap:8px;

  padding:0 14px;

  height:52px;

  color:#fff;

  text-decoration:none;
}

/* LOGO */
.school-logo-mobile{

  width:38px;
  height:38px;

  object-fit:contain;
}

/* TEXT */
.mobile-logo span{

  font-size:14px;

  line-height:1.2;

  font-weight:700;

  max-width:145px;
}

/* MENU */
.mobile-menu{

  margin-left:auto;

  padding-right:14px;

  font-size:13px;
  font-weight:600;

  display:flex;
  align-items:center;

  gap:6px;

  cursor:pointer;
}

/* ICON */
.mobile-menu i{

  font-size:12px;

  transition:0.3s;
}

/* SEARCH */
.mobile-search{
  width:52px;
  height:52px;
  background:#0f89ff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:15px;
  margin-left: 10px;
  flex:none;
}
  /* =========================
     CONTAINER
  ========================= */

  .container{
    display:block;

    margin-top:0;
    height:auto;
  }

  /* =========================
     SIDEBAR
  ========================= */

  .sidebar{
    position:relative;

    width:100%;
    height:auto;

    top:0;

    overflow:visible;

    padding:0;

    border:none;

    background:#fff;
  }

  /* =========================
     HIDE ELEMENT
  ========================= */

  .menu,
  .footer,
  .sidebar-title,
  .search-box{
    display:none;
  }

  /* =========================
     INFO BOX
  ========================= */

  .info-box{
    margin:30px 16px;
  }

  /* =========================
     MAIN
  ========================= */

  .main{
    margin-left:0;

    width:100%;
    height:auto;

    overflow:visible;
  }

  /* =========================
     HERO
  ========================= */

  .hero{
    position:relative;

    overflow:hidden;

    padding:16px;

    background:#fff;
  }

  .hero img{
    width:100%;
    height:230px;

    object-fit:cover;

    display:block;

    border-radius:4px;
  }

  .hero-content{
    position:relative;

    left:0;
    bottom:0;

    max-width:100%;

    background:#fff;
    color:#000;

    border-radius:0;

    padding:18px 0 0 0;
  }

  .hero-content h1{
    font-size:22px;
    line-height:1.3;
    margin-bottom:14px;
  }

  .hero-content p{
    font-size:16px;
    line-height:1.7;
  }

  .hero-meta{
    margin-top:18px;

    gap:14px;
  }

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

  .section{
    padding:22px;
  }

  .section-title{
    margin-top: 20px;
    font-size:24px;
    margin-bottom:24px;
  }

  /* =========================
     GRID
  ========================= */

  .grid{
    grid-template-columns:1fr;
    gap:28px;
  }

  .card img{
    width:100%;
    height:220px;

    object-fit:cover;
  }

  .card h3{
    font-size:18px;
  }

  .card p{
    font-size:15px;
    line-height:1.7;
  }

  /* =========================
     CTA
  ========================= */

  .cta{
    flex-direction:column;
    align-items:flex-start;
  }

  .cta-btn{
    width:100%;
  }

  .cta h2{
    font-size:18px;
    line-height:1.2;
  }

  .cta p{
    font-size:14px;
    line-height:1.5;
  }

  .cta button{
    width:100%;
  }

}

 @media (max-width: 1366px) {
    .hero-content h1 {
        font-size: 1.5rem;
        line-height: 1.2;
    }
}


.promo-banner{
    display:grid;
    grid-template-columns:1.2fr 1fr;
    gap:32px;
    align-items:center;
    overflow:hidden;
    margin:5px 0 0px;
}

.promo-left{
    height:100%;      /* batas tinggi */
    overflow:hidden;
}

.promo-left img{
    width:100%;
    height:100%;
    object-fit:contain;
    display:block;
}

.promo-right{
    padding:40px;
}

.promo-right h2{
    font-size:1.5rem;
    line-height:1.2;
    margin-bottom:15px;
    color:#222;
}

.promo-right p{
    line-height:1.6;
    font-size: 1rem;
  }

/* ===========================
   Laptop Besar (1366px)
=========================== */

@media (max-width:1366px){

    .promo-banner{
        grid-template-columns:1.15fr 1fr;
        gap:26px;
    }

    .promo-right{
        padding:30px;
    }

    .promo-right h2{
        font-size:1.2rem;
    }

    .promo-right p{
        line-height:1.3;
        font-size: 0.9rem;
    }

}

/* ===========================
   Laptop Kecil (1024px)
=========================== */

@media (max-width:1024px){

    .promo-banner{
        grid-template-columns:1fr 1fr;
        gap:20px;
    }

    .promo-right{
        padding:22px;
    }

    .promo-right h2{
        font-size:1.2rem;
        margin-bottom:12px;
    }

    .promo-right p{
        line-height:1.3;
        font-size: 0.9rem;
    }

}


@media (max-width:480px){

    .promo-banner{
        grid-template-columns:1fr;
        gap:12px;
        border-radius:5px;
        margin-top: -40px;
    }

    .promo-left{
        height:auto;
    }

    .promo-right{
        padding:10px 0 0;
    }

     .promo-right h2{
        margin:0;
        padding:0;
        font-size: 1rem;
        text-align:left;
        margin-bottom: 10px;
    }

    .promo-right p{
        font-size:13px;
        line-height:1.6;
    }

}

.promo-left img{
    animation: zoomImage 15s ease-in-out infinite;
    transform-origin:center center;
}

@keyframes zoomImage{
    0%,100%{
        transform:scale(1);
    }
    50%{
        transform:scale(1.02);
    }
}

.newsletter-modal{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.55);
    display:none;
    justify-content:center;
    align-items:center;
    z-index:9999;
}

.newsletter-modal.show{
    display:flex;
}

.newsletter-box{
    width:min(480px,92%);
    background:#fff;
    border-radius:16px;
    padding:40px;
    position:relative;
    text-align:center;
}

.newsletter-icon{
    font-size:42px;
    color:#0056A6;
    margin-bottom:18px;
}

.newsletter-box h2{
    font-size:30px;
    margin-bottom:10px;
}

.newsletter-box p{
    color:#666;
    line-height:1.7;
    margin-bottom:25px;
}

.newsletter-box input[type=email]{
    width:100%;
    padding:14px 16px;
    border:1px solid #ddd;
    border-radius:8px;
    font-size:15px;
    margin-bottom:20px;
}

.newsletter-check{
    text-align:left;
    display:grid;
    gap:12px;
    margin-bottom:25px;
}

.newsletter-submit{
    width:100%;
    padding:14px;
    background:#0056A6;
    color:#fff;
    border:none;
    border-radius:8px;
    cursor:pointer;
    font-size:15px;
}

.newsletter-submit:hover{
    background:#003f7d;
}

.newsletter-close{
    position:absolute;
    top:15px;
    right:15px;
    border:none;
    background:none;
    cursor:pointer;
    font-size:22px;
}

.current-flag {
    width: 24px;
    height: 16px;
    object-fit: cover;
    border-radius: 2px;
}

.flag-icon {
    width: 22px;
    height: 15px;
    object-fit: cover;
    border-radius: 2px;
    margin-right: 8px;
    vertical-align: middle;
}

.mobile-current-flag {
    width: 25px;
    height: 17px;
    object-fit: cover;
    border-radius: 2px;
    display: block;
}

.mobile-lang-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
}

.flag-icon {
    width: 22px;
    height: 15px;
    object-fit: cover;
    border-radius: 2px;
    margin-right: 8px;
    vertical-align: middle;
}

.mobile-lang-menu a {
    display: flex;
    align-items: center;
    gap: 8px;
}

.mobile-lang-menu .flag-icon {
    width: 22px;
    height: 15px;
    object-fit: cover;
    border-radius: 2px;
    flex-shrink: 0;
    margin: 0;
}

.hero-news-slider{
    position:relative !important;
    overflow:hidden !important;
}

.hero-news-slider .hero-slider-media{
    position:relative !important;
    width:100% !important;
    height:100% !important;
    min-height:80vh !important;
    align-self:stretch !important;
    overflow:hidden !important;
    isolation:isolate;
}

.hero-news-slider .hero-slide{
    position:absolute !important;
    inset:0 !important;
    display:block !important;
    width:100% !important;
    height:100% !important;
    min-height:100% !important;
    max-height:none !important;
    margin:0 !important;

    opacity:0 !important;
    visibility:hidden !important;

    transform:scale(1.035) !important;

    transition:
        opacity .9s cubic-bezier(.4,0,.2,1),
        transform 1.25s cubic-bezier(.2,.7,.2,1),
        visibility .9s linear !important;

    will-change:opacity, transform;
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;

    z-index:1;
}

.hero-news-slider .hero-slide.active{
    opacity:1 !important;
    visibility:visible !important;
    transform:scale(1) !important;
    z-index:2;
}

.hero-news-slider .hero-slide img{
    display:block !important;
    width:100% !important;
    height:100% !important;
    min-height:100% !important;
    object-fit:cover !important;
    object-position:center !important;
    margin:0 !important;
}

.hero-news-slider .hero-slider-btn{
    position:absolute !important;
    top:auto !important;
    bottom:14px !important;
    width:32px !important;
    height:32px !important;
    min-width:32px !important;
    min-height:32px !important;
    padding:0 !important;
    margin:0 !important;
    border:0 !important;
    border-radius:50% !important;
    background:rgba(0,0,0,.55) !important;
    color:#fff !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    cursor:pointer !important;
    z-index:20 !important;
    box-shadow:0 2px 8px rgba(0,0,0,.25) !important;
    transition:background .25s ease, transform .25s ease !important;
}

.hero-news-slider .hero-slider-btn:hover{
    background:rgba(0,0,0,.78) !important;
    transform:translateY(-1px);
}

.hero-news-slider .hero-slider-prev{
    right:52px !important;
    left:auto !important;
}

.hero-news-slider .hero-slider-next{
    right:12px !important;
    left:auto !important;
}

.hero-news-slider .hero-slider-dots{
    position:absolute !important;
    top:auto !important;
    left:auto !important;
    right:94px !important;
    bottom:25px !important;
    transform:none !important;
    display:flex !important;
    align-items:center !important;
    gap:6px !important;
    z-index:20 !important;
}

.hero-news-slider .hero-slider-dot{
    width:7px !important;
    height:7px !important;
    padding:0 !important;
    margin:0 !important;
    border:0 !important;
    border-radius:50% !important;
    background:rgba(255,255,255,.65) !important;
    cursor:pointer !important;
    transition:width .35s ease, background .35s ease !important;
}

.hero-news-slider .hero-slider-dot.active{
    width:20px !important;
    border-radius:6px !important;
    background:#fff !important;
}

@media (max-width:768px){
    .hero-news-slider .hero-slider-media{
        height:100% !important;
        min-height:33vh !important;
    }

    .hero-news-slider .hero-slide{
        transform:scale(1.02) !important;
        transition:
            opacity .7s cubic-bezier(.4,0,.2,1),
            transform .95s cubic-bezier(.2,.7,.2,1),
            visibility .7s linear !important;
    }

    .hero-news-slider .hero-slide.active{
        transform:scale(1) !important;
    }

    .hero-news-slider .hero-slide img{
        object-fit:contain !important;
        background:#000 !important;
    }

    .hero-news-slider .hero-slider-btn{
        width:30px !important;
        height:30px !important;
        min-width:30px !important;
        min-height:30px !important;
        bottom:10px !important;
    }

    .hero-news-slider .hero-slider-prev{right:48px !important;}
    .hero-news-slider .hero-slider-next{right:10px !important;}

    .hero-news-slider .hero-slider-dots{
        right:86px !important;
        bottom:20px !important;
    }
}