:root {
      --black: #050505;
      --dark: #0b0b0b;
      --dark-soft: #141414;
      --red: #d40000;
      --red-dark: #7a0000;
      --scarlet: #ff1f1f;
      --silver: #d9d9d9;
      --white: #ffffff;
    }

  :root{
    --welcome-bg: 
        linear-gradient(
            135deg,
            #050505 0%,
            #080808 55%,
            #120000 100%
        );
}

    * {
      scroll-behavior: smooth;
    }

    body {
      margin: 0;
      background: var(--black);
      color: var(--white);
      font-family: 'Poppins', sans-serif;
      overflow-x: hidden;
    }

    h1, h2, h3, h4, h5, .nav-link, .btn-scanity {
      font-family: 'Oswald', sans-serif;
      letter-spacing: .5px;
    }

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

    .text-red {
      color: var(--scarlet);
    }

    .section-padding {
      padding: 80px 0;
    }

    .section-title {
      font-weight: 700;
      text-transform: uppercase;
      margin-bottom: 35px;
    }

    .section-title span {
      color: var(--scarlet);
    }

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

.navbar {
    background: rgba(0, 0, 0, .88);
    border-bottom: 1px solid rgba(255, 0, 0, .28);
    backdrop-filter: blur(12px);

    min-height: 82px;
    transition: .3s ease;

    box-shadow:
        0 10px 35px rgba(0,0,0,.45);
}

/* LOGO */

.navbar-brand {
    padding: 0;
}

.navbar-brand img {
    height: 94px;
    width: auto;
    object-fit: contain;

    filter:
        drop-shadow(0 0 8px rgba(255,0,0,.25));
}

/* MENU */

.navbar-dark .navbar-nav .nav-link {

    position: relative;

    color: #f2f2f2;

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

    text-transform: uppercase;

    letter-spacing: .7px;

    margin: 0 16px;

    padding: 30px 0;

    transition: .3s ease;
}

/* HOVER */

.navbar-dark .navbar-nav .nav-link:hover,
.navbar-dark .navbar-nav .active > .nav-link {

    color: var(--scarlet);
}

/* UNDERLINE */

.navbar-dark .navbar-nav .nav-link::after {

    content: '';

    position: absolute;

    left: 50%;
    bottom: 18px;

    width: 0;
    height: 3px;

    transform: translateX(-50%);

    background: linear-gradient(
        90deg,
        #700000,
        #ff1f1f
    );

    border-radius: 50px;

    transition: .3s ease;

    box-shadow:
        0 0 12px rgba(255,0,0,.45);
}

.navbar-dark .navbar-nav .nav-link:hover::after,
.navbar-dark .navbar-nav .active > .nav-link::after {

    width: 100%;
}

/* BUTTON */
/* =========================
   BUTTON SCANITY
========================= */

.btn-scanity{

    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    height: 46px;

    padding: 0 30px;

    color: #fff !important;

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

    text-transform: uppercase;

    letter-spacing: .5px;

    background:
        linear-gradient(
            180deg,
            #ff2a2a 0%,
            #c70000 48%,
            #740000 100%
        );

    border: 1px solid rgba(255,255,255,.12);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.14),
        inset 0 -10px 18px rgba(0,0,0,.25),
        0 0 18px rgba(255,0,0,.18);

    overflow: hidden;

    transition: .25s ease;

    /* BENTUK MIRING */
    clip-path: polygon(
        6% 0%,
        100% 0%,
        94% 100%,
        0% 100%
    );
}

/* LIGHT METALLIC */

.btn-scanity::before{

    content:'';

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:50%;

    background:
        linear-gradient(
            rgba(255,255,255,.18),
            rgba(255,255,255,0)
        );

    pointer-events:none;
}

/* GLOW BAWAH */

.btn-scanity::after{

    content:'';

    position:absolute;

    left:15px;
    right:15px;
    bottom:-6px;

    height:14px;

    background: rgba(255,0,0,.45);

    filter: blur(12px);

    z-index:-1;
}

/* HOVER */

.btn-scanity:hover{

    transform: translateY(-2px);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.18),
        inset 0 -10px 18px rgba(0,0,0,.28),
        0 0 28px rgba(255,0,0,.35);

}


/* HERO BANNER SLIDER */

.hero {
    padding-top: 88px; 
    position:relative;  
    background:linear-gradient(135deg,#050505 0%,#080808 55%,#120000 100%);
    overflow:visible;
    z-index:2;
}

.hero-banner-img{
    width:100%;
    height:540px;
    object-fit:cover;
    object-position:center;
    display:block;
}

.hero .carousel,
.hero .carousel-inner,
.hero .carousel-item{
    width:100%;
}

.hero .carousel-control-prev,
.hero .carousel-control-next {
    width: 58px;
    opacity: 1;
}

.hero-arrow {
    width: 58px;
    height: 88px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #ff1f1f, #850000);
    color: #fff;
    font-size: 30px;
    box-shadow: 0 0 25px rgba(255,0,0,.35);
}

.carousel-control-prev .hero-arrow {
    border-radius: 0 8px 8px 0;
}

.carousel-control-next .hero-arrow {
    border-radius: 8px 0 0 8px;
}

.hero .carousel-indicators {
    bottom: 22px;
}

.hero .carousel-indicators li {
  width: 18px;
  height: 0px;
  border-radius: 50%;
  background: #675f5f;
  opacity: .85;
}

.hero .carousel-indicators .active {
    background: #ff1f1f;
    box-shadow: 0 0 12px rgba(255,0,0,.8);
}

/* MOBILE */
@media(max-width:991px){
    .hero{
        padding-top:70px;
    }

     .hero-banner-img{
        height:auto;
        aspect-ratio:4/5;
        object-fit:cover;
        object-position:center;
    }

    .hero .carousel-control-prev,
    .hero .carousel-control-next{
        width:34px;
    }

    .hero-arrow{
        width:34px;
        height:48px;
        font-size:18px;
    }

    .hero .carousel-indicators{
        bottom:4px;
    }

    .hero .carousel-indicators li{
        width:8px;
        height:8px;
    }
}

@media(max-width:575px){
    .hero-banner-img {
        height: 100%;
    }
}

/* ICON */


.btn-scanity i{
    margin-left: 9px;
    font-size: 15px;
}

/* OUTLINE BUTTON */

.btn-outline-scanity {

    border: 1px solid rgba(255,255,255,.35);

    color: white;

    background: rgba(255,255,255,.04);

    border-radius: 6px;

    padding: 13px 28px;

    text-transform: uppercase;

    font-weight: 700;

    transition: .25s ease;
}

.btn-outline-scanity:hover {

    background: rgba(255,255,255,.08);

    color: white;
}

/* MOBILE */

@media (min-width: 1400px){

  .container,
  .container-lg,
  .container-md,
  .container-sm,
  .container-xl{

      max-width:1400px;
  }

}

  @media(max-width:991px){

    .navbar{
        min-height:68px;
        padding:0;
        background: rgba(0,0,0,.95);
    }

    .navbar .container{

        height:68px;
        padding-left: 18px;
        padding-right: 18px;
        align-items:center;
    }


      .navbar-brand img{

        height:38px;
    }

      .navbar-collapse {

          background: #080808;

          padding: 20px;

          margin-top: 15px;

          border-radius: 12px;

          border: 1px solid rgba(255,0,0,.18);
      }

      .navbar-dark .navbar-nav .nav-link {

          padding: 14px 0;

          margin: 0;
      }

      .navbar-toggler{

        border:none !important;

        outline:none !important;

        box-shadow:none !important;

        padding:0;
 
        margin-right: 6px;
    } 

    .navbar-toggler-icon{

        width:30px;
        height:30px;

        filter: brightness(0) invert(1);
    }


    /* MOBILE MENU */

    .navbar-collapse{

        position:absolute;

        top:54px;

        left:0;
        right:0;

         padding: 10px 28px;

        background: #050505;

        backdrop-filter: blur(14px);
 

        border-top:
            1px solid rgba(255,0,0,.18);

        border-bottom:
            1px solid rgba(255,0,0,.18);

        border-radius:0;

    }

    /* MENU ITEM */

    .navbar-dark .navbar-nav .nav-link{

        padding:12px 0;

        margin:0;

        font-size:15px;

        border-bottom:
            1px solid rgba(255,255,255,.05);
    }

    /* UNDERLINE */

    .navbar-dark .navbar-nav .nav-link::after{

        display:none;
    }

    /* ACTIVE */

    .navbar-dark .navbar-nav .active .nav-link{

        color:#ff1f1f;

        padding-left:0px;
    }

    /* BUTTON HIDE */

    .nav-right{

        display:none !important;
    }


  }

  .hero::after{
    content:'';
    position:absolute;
    left:0;
    right:0;
    bottom:-25px;
    height:70px;
    z-index:5;

    background: var(--welcome-bg);

    clip-path:polygon(
        0 0,
        16% 0,
        20% 62%,
        80% 62%,
        84% 0,
        100% 0,
        100% 100%,
        0 100%
    );

    border-top:2px solid rgba(255,31,31,.9);
}

  .welcome{
      margin-top:0;
      padding-top:120px;
     background: var(--welcome-bg);
  }

.hero-glow{

    position:absolute;

    left:50%;
    bottom:0;

    transform:translateX(-50%);

    width:340px;
    height:80px;

    background:
        radial-gradient(
            rgba(255,0,0,.35),
            transparent 70%
        );

    filter:blur(22px);

    pointer-events:none;

    z-index:2;
}

/* .welcome::before{

    content:'';

    position:absolute;

    inset:0;

    background:
        repeating-linear-gradient(
            -45deg,
            rgba(255,255,255,.015),
            rgba(255,255,255,.015) 2px,
            transparent 2px,
            transparent 14px
        );

    opacity:.25;

    pointer-events:none;
} */
     
    .welcome {
     position: relative;
     
      overflow: hidden;
      border-top: 1px solid rgba(255,0,0,.35);  
       padding-top:90px;
    margin-top:-1px;
    }

     

    .welcome .container{
        position:relative;
        z-index:2;
    }

    .welcome-subtitle{

        font-family:'Teko', sans-serif; 
        color:#ff2b2b; 
        font-size:28px; 
        text-transform:uppercase; 

        font-style: italic;
    }

    .scanity-text{
      display: inline;
    }
    
    .welcome-title{
      font-family: 'Teko', sans-serif;
      font-size: 72px;
      line-height: .9;
      font-weight: 600;
      text-transform: uppercase;
      letter-spacing: 1px;
    }

    .welcome-title small{
        display:block;
        color:#ff1f1f;
        font-size:18px;
        letter-spacing:1.5px;
        margin-bottom:12px;
    }

    .welcome-title .white-text{
        color:#fff;
        font-size:54px;
        font-style:italic;
        text-shadow:0 0 12px rgba(255,255,255,.25);
    }

    .welcome-title .red-text{
        color: #ff1f1f;
        font-size: 54px;
        font-style: italic;
        margin-left: 10px;
        text-shadow: 0 0 15px rgba(0, 0, 0, 0.4);
    }

    .welcome-title span{
        color:#ff1f1f;

        text-shadow:
            0 0 18px rgba(255,0,0,.35);
    }

    .stat-card{

        transition:.3s ease;

        backdrop-filter: blur(8px);
    }

    

    .stat-card, .dark-card {
      background: rgba(255,255,255,.035);
      border: 1px solid rgba(255,255,255,.1);
      border-radius: 12px;
      padding: 28px;
      transition: .25s ease;
    }

    .welcome .text-muted{
        color:rgba(255,255,255,.55) !important;
    }

    .stat-card:hover, .dark-card:hover {
      transform:translateY(-6px);

        border-color:rgba(255,0,0,.4);

        box-shadow:
            0 0 30px rgba(255,0,0,.12);
    }

    .stat-card i {
      color: var(--scarlet);
      font-size: 32px;
      margin-bottom: 15px;
    }

    .stat-card h3 {
      font-size: 42px;
      font-weight: 700;
      margin-bottom: 5px;
    }

    .leader-img {
      min-height: 330px;
      border-radius: 14px;
      background:
        linear-gradient(rgba(0,0,0,.15), rgba(0,0,0,.75)),
        url('https://images.unsplash.com/photo-1560250097-0b93528c311a?auto=format&fit=crop&w=800&q=80');
      background-size: cover;
      background-position: center;
      border: 1px solid rgba(255,0,0,.45);
    }

    .quote-mark {
      color: var(--scarlet);
      font-size: 58px;
      line-height: 1;
    }
 
    .member-avatar {
      width: 100%;
      height: 210px;
      object-fit: cover;
      border-radius: 10px;
      margin-bottom: 15px;
      filter: grayscale(15%);
    }

    .testimonial-card {
      min-height: 190px;
    }

    .testimonial-card .member-avatar-small {
      width: 42px;
      height: 42px;
      border-radius: 50%;
      object-fit: cover;
      border: 2px solid var(--scarlet);
    }

    .event-card {
      overflow: hidden;
      padding: 0;
    }

    .event-img {
      height: 190px;
      background-size: cover;
      background-position: center;
      position: relative;
    }

    .event-tag {
      position: absolute;
      top: 14px;
      left: 14px;
      background: var(--red);
      color: #fff;
      padding: 5px 10px;
      font-size: 12px;
      font-weight: 700;
      text-transform: uppercase;
    }

    .event-body {
      padding: 22px;
    }

    .event-meta {
      color: #bbb;
      font-size: 13px;
    }

    .video-box {
      height: 260px;
      border-radius: 12px;
      background:
        linear-gradient(rgba(0,0,0,.2), rgba(0,0,0,.75)),
        url('https://images.unsplash.com/photo-1511919884226-fd3cad34687c?auto=format&fit=crop&w=1000&q=80');
      background-size: cover;
      background-position: center;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 1px solid rgba(255,0,0,.3);
    }

    .play-btn {
      width: 70px;
      height: 70px;
      border-radius: 50%;
      background: rgba(255,0,0,.85);
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-size: 26px;
      box-shadow: 0 0 35px rgba(255,0,0,.55);
    }

    .gallery-item {
      height: 190px;
      border-radius: 12px;
      background-size: cover;
      background-position: center;
      border: 1px solid rgba(255,255,255,.1);
      overflow: hidden;
      position: relative;
    }

    .gallery-item::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(transparent, rgba(0,0,0,.75));
    }

    .gallery-item span {
      position: absolute;
      bottom: 15px;
      left: 18px;
      z-index: 2;
      font-weight: 700;
      text-transform: uppercase;
    }

    .cta {
      position: relative;
      background:
        linear-gradient(rgba(0,0,0,.58), rgba(0,0,0,.9)),
        url('https://images.unsplash.com/photo-1517994112540-009c47ea476b?auto=format&fit=crop&w=1800&q=80');
      background-size: cover;
      background-position: center;
      border-top: 1px solid rgba(255,0,0,.35);
      border-bottom: 1px solid rgba(255,0,0,.35);
    }

    .cta h2 {
      font-size: 52px;
      text-transform: uppercase;
      font-weight: 700;
    }

    footer {
      background: #030303;
      padding: 55px 0 25px;
      color: #cfcfcf;
    }

    footer h5 {
      color: white;
      text-transform: uppercase;
      margin-bottom: 18px;
    }

    footer ul {
      list-style: none;
      padding: 0;
      margin: 0;
    }

    footer ul li {
      margin-bottom: 8px;
      font-size: 14px;
    }

    .social a {
      width: 38px;
      height: 38px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 50%;
      background: rgba(255,255,255,.06);
      margin-right: 8px;
      color: white;
    }

    .floating-wa {
      position: fixed;
      right: 20px;
      bottom: 20px;
      z-index: 99;
      width: 58px;
      height: 58px;
      border-radius: 50%;
      background: #25D366;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      font-size: 28px;
      box-shadow: 0 0 25px rgba(37, 211, 102, .45);
    }

    @media (max-width: 991px) {
      .hero h1 {
        font-size: 52px;
      }
      .hero-card {
        margin-top: 35px;
      }

      .welcome-title{

        font-size:42px;
      }

      .welcome-title small{

          font-size:14px;
      }

      .stat-card{

          padding:22px 14px;
      }

      .stat-card h3{

          font-size:36px;
      }
    }

    @media (max-width: 575px) {
      .section-padding {
        padding: 55px 0;
      }
      .hero h1 {
        font-size: 42px;
      }
      .hero p {
        font-size: 15px;
      }
      .cta h2 {
        font-size: 36px;
      }
      .navbar-brand img {
        height: 42px;
      }

      .welcome-title .white-text,
        .welcome-title .red-text{
            display:block;
            font-size:42px;
            margin-left:0;
        }

        .welcome-title small{
            font-size:15px;
        }
    }


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

.pengurus-section{
    position:relative;
    overflow:hidden;
    background:
        repeating-linear-gradient(
            -45deg,
            rgba(255,255,255,.01),
            rgba(255,255,255,.01) 1px,
            transparent 1px,
            transparent 18px
        ),
        linear-gradient(135deg,#050505 0%,#080808 55%,#170000 100%);
    border-top:1px solid rgba(255,0,0,.18);
    border-bottom:1px solid rgba(255,0,0,.18);
}

.pengurus-section::before{
    content:'';
    position:absolute;
    top:0;
    left:-80px;
    width:380px;
    height:100%;
    background:
        linear-gradient(135deg, transparent 20%, rgba(255,0,0,.18) 21%, transparent 32%),
        linear-gradient(135deg, transparent 45%, rgba(255,0,0,.12) 46%, transparent 58%);
    opacity:.55;
    pointer-events:none;
}

.pengurus-section::after{
    content:'';
    position:absolute;
    right:-120px;
    bottom:0;
    width:420px;
    height:100%;
    background:
        linear-gradient(135deg, transparent 40%, rgba(255,0,0,.16) 41%, transparent 52%);
    opacity:.55;
    pointer-events:none;
}

.pengurus-section .container{
    position:relative;
    z-index:2;
}

.pengurus-title{
    font-family:'Teko', sans-serif;
    color:#fff;
    text-transform:uppercase;
    font-size:36px;
    font-weight:700;
    letter-spacing:1px;
    font-style:italic;
    margin-bottom:22px;
}

.pengurus-title span{
    color:#ff1f1f;
}

.leader-wrap{
    display:grid;
    grid-template-columns:170px 1fr;
    gap:24px;
    align-items:center;
}

.leader-photo{
    position:relative; 
    border-radius:10px;
    overflow:hidden;
    background:#111;
     box-shadow:
        0 0 22px rgba(255,0,0,.18);

    border:
        1px solid rgba(255,0,0,.45);
    transform:skewX(-6deg);
}

.leader-photo img{
    width:100%;
    height:260px;
    object-fit:cover;
    transform:skewX(6deg) scale(1.08);
}

.leader-quote{
    color:#fff;
}

.quote-mark{
    color:#ff1f1f;
    font-size:58px;
    line-height:.8;
    font-family:serif;
}

.leader-quote p{
    color:rgba(255,255,255,.82);
    font-style:italic;
    line-height:1.7;
    margin-bottom:18px;
}

.leader-quote h5{
    font-family:'Teko', sans-serif;
    text-transform:uppercase;
    font-size:26px;
    margin:0;
}

.leader-quote small{
    color:#ff1f1f;
}

.pengurus-list{
    display:flex;
    gap:18px;
    overflow-x:auto;
    padding:4px 4px 10px;
}

.pengurus-list::-webkit-scrollbar{
    height:4px;
}

.pengurus-list::-webkit-scrollbar-thumb{
    background:#b00000;
}

.pengurus-card{
    position:relative;
    min-width:155px;
    padding:12px 12px 18px;
    text-align:center;
    background:
        linear-gradient(
            180deg,
            rgba(15,15,15,.98),
            rgba(5,5,5,.98)
        );
    border:1px solid rgba(255,0,0,.45);
    overflow:hidden;
    clip-path:polygon(
        0 0,
        92% 0,
        100% 8%,
        100% 100%,
        8% 100%,
        0 92%
    );
    box-shadow:
        inset 0 0 20px rgba(255,0,0,.08),
        0 0 18px rgba(255,0,0,.12);
    transition:.3s ease;
}

.pengurus-card::before{

    content:'';

    position:absolute;

    inset:-1px;

    background:
        linear-gradient(
            180deg,
            rgba(255,0,0,.18),
            transparent 40%
        );

    z-index:-1;

    opacity:.8;
}

.pengurus-card::after{

    content:'';

    position:absolute;

    left:18px;
    right:18px;
    bottom:0;

    height:2px;

    background:#ff1f1f;

    box-shadow:
        0 0 12px rgba(255,0,0,.55);
}

.pengurus-card:hover{
    transform:
        translateY(-6px)
        scale(1.02);

    border-color:#ff2b2b;

    box-shadow:
        inset 0 0 25px rgba(255,0,0,.12),
        0 0 35px rgba(255,0,0,.22);
}



.pengurus-card img{
    width:100%;

    height:150px;

    object-fit:cover;

    margin-bottom:14px;

    border-radius:6px;

    background:#111;

    border:1px solid rgba(255,0,0,.18);

    filter:
        contrast(1.05)
        saturate(1.05);
}

.pengurus-card small{
    display:block;
    color:rgba(255,255,255,.75);
    text-transform:uppercase;
    font-size:11px;
    font-weight:700;
}

.pengurus-card h5{
    font-family:'Teko', sans-serif;
    font-size:25px;
    text-transform:uppercase;
    margin:2px 0 0;
    color:#fff;
}

.pengurus-nav button{
    width:36px;
    height:36px;
    background:rgba(255,0,0,.08);
    border:1px solid rgba(255,0,0,.5);
    color:#ff1f1f;
    border-radius:4px;
    margin-left:8px;
}

.pengurus-nav button:hover{

    background:#ff1f1f;

    color:#fff;

    box-shadow:
        0 0 18px rgba(255,0,0,.35);
}

@media(max-width:991px){
    .leader-wrap{
        grid-template-columns:1fr;
    }

    .leader-photo{
        max-width:260px;
    }

    .pengurus-title{
        font-size:32px;
        font-style:italic;
        letter-spacing:1px;
    }


    .pengurus-card{
        min-width:145px;
    }
}

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

.testimonial-section{
    position:relative;
    overflow:hidden;
    padding:40px 0;
    background:
    linear-gradient(rgba(0,0,0,0), rgba(0,0,0,.88)),
    url('/files/imgbank/bg-testimoni.png');
    background-size:cover;
    background-position:center;
    border-top:1px solid rgba(255,0,0,.25);
    border-bottom:1px solid rgba(255,0,0,.25);
} 

.testimonial-section::before{
    content:'';
    position:absolute;
    inset:0;
    background:
        linear-gradient(90deg,rgba(0,0,0,.95),transparent 45%,rgba(0,0,0,.95)),
        repeating-linear-gradient(
            -45deg,
            rgba(255,255,255,.012),
            rgba(255,255,255,.012) 1px,
            transparent 1px,
            transparent 18px
        );
    pointer-events:none;
}

.testimonial-section::after{
    content:'';
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:2px;
    background:linear-gradient(90deg,transparent,#ff1f1f,transparent);
    box-shadow:0 0 18px rgba(255,0,0,.45);
}

.testimonial-section .container{
    position:relative;
    z-index:2;
}

.testimonial-title{
    font-family:'Teko', sans-serif;
    font-style:italic;
    font-size:36px;
    margin-bottom:18px;
}

.testimonial-title span{
    color:#ff1f1f;
}

.testimonial-wrapper{
    position:relative;
    padding:0 58px;
}

.testimonial-card{
    position:relative;
    min-height:180px;
    padding:24px 28px;
    background:rgba(8,8,8,.38);
    border:1px solid rgba(255,255,255,.13);
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.04),
        0 0 24px rgba(0,0,0,.32);
    backdrop-filter:blur(4px);
    transition:.3s ease;
}

.testimonial-card .quote-mark{
    color:#ff1f1f;
    font-size:42px;
    line-height:.7;
    font-family:serif;
    font-weight:700;
}

.testimonial-card p{
    color:rgba(255,255,255,.85);
    font-size:15px;
    line-height:1.55;
    margin:8px 0 18px;
}

.testimonial-card:hover{
    border-color:rgba(255,0,0,.35);

    transform:translateY(-4px);

    box-shadow:
        0 0 25px rgba(255,0,0,.12);
}

.member-info{
    display:flex;
    align-items:center;
}

.member-info img{
    width:45px;
    height:45px;
    object-fit:cover;
    border-radius:50%;
    border:2px solid rgba(255,0,0,.5);
    margin-right:14px;
}

.member-info strong{
    display:block;
    color:#fff;
    font-size:15px;
}

.member-info small{
    display:block;
    color:#ff1f1f;
    font-size:12px;
    font-weight:700;
}

.testimonial-arrow{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    z-index:4;
    width:36px;
    height:36px;
    background:rgba(255,0,0,.08);
    border:1px solid rgba(255,0,0,.55);
    color:#ff1f1f;
    border-radius:5px;
    transition:.25s ease;
}

.testimonial-arrow:hover{
    background:#ff1f1f;
    color:#fff;
    box-shadow:0 0 18px rgba(255,0,0,.35);
}

.testimonial-arrow-left{
    left:0;
}

.testimonial-arrow-right{
    right:0;
}

@media(max-width:991px){
    .testimonial-wrapper{
        padding:0;
    }

    .testimonial-arrow{
        display:none;
    }

    .testimonial-card{
        min-height:auto;
    }
}

.testimonial-control-prev,
.testimonial-control-next{
    width:40px;
    opacity:1;
}

.testimonial-control-prev{
    left:-10px;
}

.testimonial-control-next{
    right:-10px;
}

.testimonial-arrow{
    width:36px;
    height:36px;
    background:rgba(255,0,0,.08);
    border:1px solid rgba(255,0,0,.55);
    color:#ff1f1f;
    border-radius:5px;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:.25s ease;
}

.testimonial-arrow:hover{
    background:#ff1f1f;
    color:#fff;
}

@media(max-width:991px){
    .testimonial-control-prev,
    .testimonial-control-next{
        display:none;
    }
}


.event-section{
    position:relative;
    overflow:hidden;
    padding:55px 0;
    background:
        linear-gradient(rgba(0,0,0,.88),rgba(0,0,0,.92)),
        url('/files/imgbank/bg-event.jpg');
    background-size:cover;
    background-position:center;
    border-top:1px solid rgba(255,0,0,.18);
    border-bottom:1px solid rgba(255,0,0,.18);
}

.event-title{
    font-family:'Teko', sans-serif;
    font-size:38px;
    font-style:italic;
    text-transform:uppercase;
    margin-bottom:24px;
    color:#fff;
}

.event-title span{
    color:#ff1f1f;
}
  

.event-img-new{
    position:relative;
    height:170px;
    background-size:cover;
    background-position:center;
}

.event-img-new::after{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(transparent,rgba(0,0,0,.82));
}

.event-tag-new{
    position:absolute;
    top:12px;
    left:12px;
    z-index:2;
    background:#d40000;
    color:#fff;
    padding:5px 12px;
    font-size:13px;
    font-weight:800;
    text-transform:uppercase;
}

.event-content-new{
    padding:18px 20px 20px;
}

.event-content-new h5{
    font-family:'Teko', sans-serif;
    font-size:24px;
    line-height:1;
    text-transform:uppercase;
    margin-bottom:14px;
    color:#fff;
}

.event-content-new p{
    margin-bottom:7px;
    color:rgba(255,255,255,.78);
    font-size:14px;
}

.event-content-new i{
    color:#ff1f1f;
    margin-right:6px;
}

.event-content-new span{
    color:rgba(255,255,255,.3);
    margin:0 8px;
}

.event-more-btn{
    width: 160px;
    height: 140px;
    border: 2px solid rgba(255,0,0,.6);
    background: rgba(206, 45, 45, 0.32);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #fff;
    text-decoration: none;
    transition: .3s;
    border-radius: 10px;
}

.event-more-btn i{
    font-size:46px;
    color:#ff1b1b;
    margin-bottom:18px;
}

.event-more-btn span{
    font-family:'Bebas Neue', sans-serif;
    font-size:34px;
    line-height:1.1;
    letter-spacing:1px;
    text-align:center;
}

.event-more-btn:hover{
    transform:translateY(-6px);
    border-color:#ff2a2a;
    box-shadow:0 0 20px rgba(255,0,0,.35);
}

.event-more-card{
    height:100%; 
 

    display:flex;
    align-items:center;
    justify-content:center;
}

.event-more-card i{
    font-size:42px;
    color:#ff1f1f;
    margin-bottom:18px;
}

.event-more-card span{
    font-family:'Teko', sans-serif;
    font-size:26px;
    line-height:1;
    text-transform:uppercase;
} 

@media(max-width:991px){
    .event-img-new{
        height:190px;
    }

    .event-more-card{
        min-height:180px;
    }
}

.event-card-new{
    position:relative;
    overflow:hidden; 
    border:1px solid rgba(255,0,0,.55);
    background:#000;
     display:block;
    text-decoration:none !important;
    color:#fff;
    border-radius: 5px;
}

.event-card-new:hover{

    transform:translateY(-6px);

    box-shadow:
        0 0 30px rgba(255,0,0,.22);
}

.event-card-new:hover .event-bg{

    transform:scale(1.03);
} 

.event-bg{
    position:relative;
    width:100%;
    height:270px; 
    background-size:cover;
    background-position:center;
    display:flex;
    align-items:flex-end;
    border-radius: 5px;
    transition:.4s ease;
}

.event-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(
        to top,
        rgba(0,0,0,.96) 0%,
        rgba(0,0,0,.88) 28%,
        rgba(0,0,0,.45) 58%,
        rgba(0,0,0,.12) 100%
    );
    z-index:1;
}

.event-content-new{
    position:relative;
    z-index:2;
    padding:0 26px 28px;
}

.event-tag-new{
    position:absolute;
    top:18px;
    left:18px;
    z-index:3;
    background:#e00000;
    color:#fff;
    padding:7px 15px;
    font-weight:800;
    text-transform:uppercase;
}

.media-section{
    position:relative;
    overflow:hidden;
    padding:45px 0;
    background:
        linear-gradient(rgba(0,0,0,.88),rgba(0,0,0,.92)),
        url('/files/imgbank/bg-media.jpg');
    background-size:cover;
    background-position:center;
    border-top:1px solid rgba(255,0,0,.18);
    border-bottom:1px solid rgba(255,0,0,.18);
}

.media-title{
    font-family:'Teko', sans-serif;
    font-size:38px;
    font-style:italic;
    text-transform:uppercase;
    color:#fff;
    margin-bottom:14px;
}

.media-title span{
    color:#ff1f1f;
}

.main-video-card{
    position:relative;
    display:block;
    height:260px;
    background-size:cover;
    background-position:center;
    border:1px solid rgba(255,255,255,.22);
    overflow:hidden;
    color:#fff;
}

.media-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(90deg,rgba(0,0,0,.86),rgba(0,0,0,.35));
}

.main-video-content{
    position:absolute;
    left:24px;
    bottom:28px;
    z-index:2;
}

.main-video-content h3{
    font-family:'Teko', sans-serif;
    font-size:34px;
    line-height:1;
    text-transform:uppercase;
}

.watch-btn{
    display:inline-flex;
    align-items:center;
    gap:10px;
    border:1px solid rgba(255,255,255,.35);
    padding:8px 16px;
    text-transform:uppercase;
    font-weight:700;
}

.watch-btn i{
    color:#ff1f1f;
}

.small-video-card{
    position:relative;
    height:78px;
    display:flex;
    align-items:center;
    justify-content:center;
    background-size:cover;
    background-position:center;
    border:1px solid rgba(255,255,255,.2);
    color:#fff;
}

.small-video-card::after{
    content:'';
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.45);
}

.small-video-card i{
    position:relative;
    z-index:2;
    width:42px;
    height:42px;
    border:2px solid rgba(255,255,255,.8);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
}

.gallery-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:6px;
}

.gallery-thumb{
    height:125px;
    background-size:cover;
    background-position:center;
    border:1px solid rgba(255,255,255,.16);
    display:block;
}

.gallery-more-card{
    height:100%;
    min-height:256px;
    border:1px solid rgba(255,0,0,.55);
    background:rgba(80,0,0,.35);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    color:#fff;
}

.gallery-more-card i{
    font-size:44px;
    color:#ff1f1f;
    margin-bottom:16px;
}

.gallery-more-card span{
    font-family:'Teko', sans-serif;
    font-size:26px;
    line-height:1;
    text-transform:uppercase;
}

@media(max-width:991px){
    .main-video-card{
        height:240px;
    }

    .small-video-card{
        height:95px;
    }

    .gallery-grid{
        grid-template-columns:repeat(2,1fr);
    }

    .gallery-more-card{
        min-height:150px;
    }
}

.media-section{
    background:
        linear-gradient(rgba(0,0,0,.88),rgba(0,0,0,.92)),
        url('https://images.unsplash.com/photo-1492144534655-ae79c964c9d7?auto=format&fit=crop&w=1800&q=80');
    background-size:cover;
    background-position:center;
}

/* CTA FULL WIDTH */
.cta-section{
    background:#050505;
    padding:0;
    overflow:hidden;
}

.cta-section .container{
    max-width:100%;
    padding:0;
}

/* banner */
.cta-banner{
    position:relative;
    width:100%;
    min-height:330px;

    background:
        url('/files/imgbank/cta-background.png')
        center center / cover no-repeat;

    display:flex;
    align-items:center;
    justify-content:center;

    overflow:hidden;
    border-top:1px solid rgba(255,0,0,.25);
    border-bottom:1px solid rgba(255,0,0,.25);
}

/* overlay */
.cta-overlay{
    position:absolute;
    inset:0;

    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.55) 0%,
            rgba(0,0,0,.15) 35%,
            rgba(0,0,0,.15) 65%,
            rgba(0,0,0,.55) 100%
        );
}

/* content */
.cta-content{
    position:relative;
    z-index:2;

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

    text-align:center;
    padding:40px 20px;
}

.cta-content small{
    display:block;

    color:#fff;
    font-size:26px;
    font-family:'Oswald',sans-serif;
    font-weight:700;
    letter-spacing:2px;

    margin-bottom:12px;
    text-transform:uppercase;

    text-shadow:
        0 2px 12px rgba(0,0,0,.6);
}

.cta-content h2{
    margin:0;

    font-size:50px;
    line-height:.92;

    font-family:'Oswald',sans-serif;
    font-style:italic;
    font-weight:900;

    text-transform:uppercase;

    color:#fff;

    text-shadow:
        0 4px 20px rgba(0,0,0,.65);
}

.cta-content h2 span{
    color:#ff1e1e;

    text-shadow:
        0 0 25px rgba(255,0,0,.55);
}

.cta-content p{
    margin-top:18px;

    color:#f2f2f2;
    font-size:18px;
    font-weight:500;

    text-shadow:
        0 2px 10px rgba(0,0,0,.55);
}

/* buttons */
.cta-buttons{
    margin-top:34px;

    display:flex;
    justify-content:center;
    align-items:center;
    gap:18px;

    flex-wrap:wrap;
}

.cta-btn-main,
.cta-btn-wa{
    height: 50px;
    min-width: 310px;
    padding: 0 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    text-decoration: none;
    font-family: 'Oswald',sans-serif;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 1px;
    transition: .3s;
}

/* merah */
.cta-btn-main{
    background:
        linear-gradient(
            180deg,
            #ff2b2b,
            #a90000
        );

    color:#fff;

    clip-path:polygon(
        6% 0,
        100% 0,
        94% 100%,
        0 100%
    );

    box-shadow:
        0 0 30px rgba(255,0,0,.35);
}

.cta-btn-main:hover{
    transform:translateY(-3px);
    color:#fff;
}

/* hitam */
.cta-btn-wa{
    background:
        rgba(0,0,0,.78);

    border:2px solid rgba(255,255,255,.16);

    color:#fff;

    backdrop-filter:blur(4px);
}

.cta-btn-wa:hover{
    border-color:#ff1e1e;
    color:#fff;
}

.cta-btn-main i,
.cta-btn-wa i{
    font-size:30px;
}

/* responsive */
@media(max-width:992px){

    .cta-banner{
        min-height:auto;
        padding:70px 0;
    }

    .cta-content h2{
        font-size:68px;
    }

    .cta-content small{
        font-size:20px;
    }
}

@media(max-width:768px){

    .cta-content h2{
        font-size:44px;
    }

    .cta-content small{
        font-size:16px;
    }

    .cta-content p{
        font-size:15px;
    }

    .cta-btn-main,
    .cta-btn-wa{
        min-width:100%;
        height:64px;
        font-size:22px;
    }

    .cta-buttons{
        gap:14px;
    }
}