/* ===================================
    Sferical Software - Music onepage
====================================== */
/* font */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');
@import url("https://use.typekit.net/clt8jxw.css");
/* variable */
:root {     
    --alt-font: 'Montserrat', sans-serif; 
    --primary-font: 'Montserrat', sans-serif;
    --base-color: #B7121A;
    --red: #B7121A;
    --yellow: #FBBC04;
    --dark-gray: #0A0C10;
    --medium-gray:#5d5d64;
} 
/* reset */
body {
    font-size: 16px;
    font-weight: 500;
    color: #C1BFBF;
    overflow-x: hidden !important;
}
body a{
    color: #C1BFBF;
}
body a:hover{
    color: #fffcfc;
}
/* primary font */
.primary-font {
    font-family: var(--primary-font) !important;
}
/* section */
section {
    padding-top: 130px;
    padding-bottom: 130px;
}
/* icon */
.icon-double-large {
    font-size: 70px;
}
/* header */
.left-modern-menu .left-modern-header .navbar-brand img {
    max-height: 40px;
}
.menu-item-list .nav-link {
    font-size: 40px;
    line-height: 48px;
    padding: 7px 20px 0 0;
}
.navbar .navbar-nav .nav-link{
    font-weight: 300;
}

.left-modern-menu .left-modern-header .modern-side-menu {
    padding: 75px 0;
    border-left: 1px solid #18181e;
}
.left-modern-menu .left-modern-header .modern-side-menu .mCustomScrollBox .mCSB_container {
    padding: 0;
}
.menu-item-list .menu-item {
    border-bottom: 1px solid #18181e;
    padding: 10px 60px;
}
.menu-item-list .menu-item:last-child {
    border-bottom: 0;
}
.menu-item-list .active .nav-link {
    opacity: 1; 
    color: var(--base-color);
}
.menu-item-list .nav-link:hover {
    opacity: 1;
    color: var(--base-color);
}
/* letter spacing */
.ls-15px {
    letter-spacing: 15px;
}
/* margin top bottom */
.mt-minus-30px {
    margin-top: -30px;
}
.mt-minus-50px {
    margin-top: -50px;
}
/* font size */
.fs-460 {
    font-size: 460px;
}
/* word break normal */
.word-break-normal {
    word-break: normal;
}
/* text color */
.text-black-russian-gray {
    color: #1d1d23;
}
.text-red{
    color: var(--red);
}
.text-yellow{
    color: var(--yellow);
}
.text-yellow-hover:hover{
    color: var(--yellow);
}
.text-link{
    color: #6D81F2;
}

/* bg color */
.bg-black-russian-gray {
    background-color: #1d1d23;
}
.bg-payne-gray {
    background-color: #45454a;
}
.bg-dark-green {
    background-color: #002a16;
}
.bg-light-red {
    background-color: #ffe4e5;
}
.bg-gradient-red{
    background-image:linear-gradient(to right top,#ac191f,#ac191f,#ac191f,#ac191f,#ac191f)
}
.bg-footer{
    background: rgba(122, 131, 148, 0.53);
}
.bg-waze{
    background-color: #32CCFE !important;
}
.bg-shopee{
    background-color: #f1592c !important;
}
a.bg-waze:hover,a.bg-white:hover,a.bg-shopee:hover{
    background-color: transparent !important;
}
.bg-gray{
    background-color: #20252C;
}
.border-color-white{
    border: 1px solid white;
}
/* portfolio creative */
.portfolio-creative .portfolio-box .portfolio-title::after {
    letter-spacing: 0;
    font-size: 145px;
    top: 0;
}
.portfolio-creative .portfolio-box .portfolio-title::before {
    top: 20px; 
}
.portfolio-creative .grid-item .popup-vimeo {
    display: block;
}
.portfolio-creative .portfolio-box i {
    margin-left: 3px;
}
/* tracklist style */
.tracklist-style:hover {
    background-color: #17171d;
}
/* countdown style 03 */
.countdown-style-03 .countdown-box {
    width: 90px;
    margin: 0 5px;
    text-align: left;
}
.countdown-style-03 .countdown-box .number {
    color: var(--white);
    font-size: 63px;
    line-height: 65px;
    font-weight: 400;
    letter-spacing: 1px;
}
.countdown-style-03 .countdown-box span {
    font-size: 14px;
    line-height: 16px;
    font-weight: 700;
    position: relative;
    top:-14px;
}
/* swiper number pagination progress */
.swiper-number-pagination-progress .swiper-pagination-wrapper .swiper-pagination-progress {
    background-color: #212128;
}
.swiper-number-pagination-progress .swiper-pagination-wrapper .number-prev, .swiper-number-pagination-progress .swiper-pagination-wrapper .number-next {
    color: var(--white); 
}
.services-box-style-01 .icon-box {
    margin-top: 0;
}
/* stack box */
.stack-box {
    height: 200vh;
}
/* footer */
.footer-navbar a {
    color: var(--white);
    text-transform: uppercase;
    font-size: 15px;
    padding: 0 30px;
}
footer {
    padding-top: 100px;
    padding-bottom: 100px;
}
/* media query responsive */
@media (max-width: 1600px){
    section {
        padding-top: 110px;
        padding-bottom: 110px;
    }
}
@media (max-width: 1399px) {
    .fs-460 {
        font-size: 370px;
    }
}
@media (max-width: 1199px) {
    .fs-460 {
        font-size: 270px;
    }
    section {
        padding-top: 95px;
        padding-bottom: 95px;
    }
}
@media (max-width: 991px) {
    .countdown-style-03 .countdown-box {
        width: 85px;
    }
    .countdown-style-03 .countdown-box .number {
        font-size: 60px;
        line-height: 62px;
    }
}
@media (max-width: 767px) {
    section {
        padding-top: 70px;
        padding-bottom: 70px;
    }
    .mt-minus-50px {
        margin-top: -10px;
    }
    .menu-item-list .menu-item {
        padding: 10px 35px;
    }
    .menu-item-list .nav-link {
        font-size: 30px;
        line-height: 34px;
    }
    .left-modern-menu .left-modern-header .modern-side-menu {
        padding: 40px 0;
    }
}
@media (max-width: 575px) {
    .countdown-style-03 .countdown-box {
        width: 45%;
    }
    .countdown-style-03 .countdown-box .number {
        text-align: center;
    }
    .countdown-style-03 .countdown-box span {
        text-align: center;
        width: 100%;
        display: block;
        margin-top: 5px;
    }
}

.object-fit-contain{
    object-fit: contain !important;
}

.footer-logo img{
    min-height: 100px;
    object-fit: contain;
}

.border-color-red{
    border-color: var(--red);
}

/* CUSTOM CSS */
.bg-custom-transparent{
    background-color: rgba(255, 255, 255, 0.03);
    width: 100%;
    display: flex;
    flex-wrap: inherit;
    align-items: center;
    justify-content: space-between;
    margin: 10px 0;
}

.bg-custom-dark-gray{
    background-color: var(--dark-gray);
    width: 100%;
    display: flex;
    flex-wrap: inherit;
    align-items: center;
    justify-content: space-between;
    margin: 10px 0;
}
header .navbar-brand{
    padding: 16px 0;
}
header .navbar-brand img {
    max-height: 50px;
}
header.sticky .navbar-brand {
    padding: 16px 0;
}
.navbar .navbar-nav .nav-link {
    color: #E8E8E8;
}
.navbar .navbar-nav .nav-item .nav-link.active, .navbar .navbar-nav .nav-item.active .nav-link, .navbar .navbar-nav .nav-item:hover .nav-link {
    font-weight: 600;
    color: white;
    opacity: 1;
}
.btn.btn-custom-transparent{
    box-shadow: 0px 2px 3px 0px rgba(255, 255, 255, 0.25);
    background-color: rgba(255, 255, 255, 0.13);
    color: white;
    font-weight: 600;
    letter-spacing: normal;
    text-transform: capitalize;
    border-radius: 16px;
    padding: 16px 24px;
}
.btn.btn-custom{
    padding: 10px 40px;
    border-radius: 14px;
    text-transform: capitalize;
}

.btn-custom-tag{
    font-size: 10px;
    color: #6D81F2 !important;
    text-transform: none;
    border: 1px solid #6D81F2;
    background-color: transparent;
    border-radius: 24px;
}

.hover-box.dark-hover .btn.btn-base-color:hover span,
.hover-box.dark-hover .btn.btn-base-color:hover i{
    background-color: transparent !important;
    color: var(--base-color) !important;
}
.white-linear-color{
    background: linear-gradient(to bottom, #ffffff 0%, #999999 100%);
  -webkit-background-clip: text;
}

/* Container and layout */
.header-content {
    position: relative;
    height: auto;             /* Allow height to grow based on content */
    display: block;           /* Remove flex behavior */
    overflow: hidden; 
}
  
.header-inner {
    padding-bottom: 180px; /* space above image */
}
  
  /* Image styling */
.header-bottom-img {
    /* width: 100%;
    height: auto;
    max-height: 200px;
    object-fit: contain;
    z-index: 1; */

    width: 100vw;        /* Full viewport width */
    max-width: 100%;     /* Prevent overflow in some cases */
    height: auto;
    object-fit: contain;
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1;
}

.m-bottom-custom{
    margin-bottom: 20px;
}

  /* Responsive image and padding */
@media (min-width: 450px) {
    .m-bottom-custom{
        margin-bottom: 90px;
    }
}
@media (min-width: 510px) {
    .m-bottom-custom{
        margin-bottom: 150px;
    }
}

@media (min-width: 768px) {
    .header-inner {
      padding-bottom: 250px;
    }
}

  
@media (min-width: 992px) {
    .header-inner {
      padding-bottom: 350px;
    }
  
    .header-bottom-img {
        width: 80vw;
    }

    .m-bottom-custom{
        margin-bottom: 150px;
    }
}

@media (min-width: 1050px) {
    .m-bottom-custom{
        margin-bottom: 150px;
    }
}

@media (min-width: 1200px) {
    .m-bottom-custom{
        margin-bottom: 150px;
    }
}
@media (min-width: 1250px) {
    .header-bottom-img {
        width: 68vw;
    }
}

@media (min-width: 1300px) {
    .m-bottom-custom{
        margin-bottom: 170px;
    }
}

@media (min-width: 1500px) {
    .m-bottom-custom{
        margin-bottom: 250px;
    }
}
  
  /* Typography */
.title-sm {
    font-size: 1rem;
}

.title {
    font-size: 2rem;
}

.title-description {
    font-size: 0.95rem;
    max-width: 700px;
    text-align: center;
}
  
@media (min-width: 768px) {
    .title-sm {
      font-size: 1.25rem;
    }
  
    .title {
      font-size: 2.5rem;
    }
  
    .title-description {
      font-size: 1.1rem;
    }
}
  
  /* Button styling */
.btn-custom {
    font-size: 0.95rem;
    padding: 0.5rem 1.2rem;
    margin-bottom: 0 !important;
}
  
@media (min-width: 768px) {
    .btn-custom {
      font-size: 1.05rem;
      padding: 0.75rem 1.5rem;
    }
}
  
  /* Optional: text colors if background is dark */
.white-linear-color {
    color: #fff;
}  

.h-90{
    height: 90% !important;
}
.custom-navbar-nav {
    background-color: var(--dark-gray);
}
@media (min-width: 992px) {
    .custom-navbar-nav {
        background-color: transparent;
    }
}
.border-color-transparent-white-light{
    border-color: rgba(255, 255, 255, 0.03);
}
.custom-dark-bg{
    background-color: rgba(255, 255, 255, 0.03);
}
.feature-box.link:hover{
    border-color: var(--base-color) !important;
    background-color: rgba(243, 25, 25, 0.2);
}
.gallery-image img {
    height: 150px; /* Set to desired uniform height */
    width: 100%;
    object-fit: cover;
    display: block;
}
@media (min-width: 768px) {
    .gallery-image img {
        height: 200px; /* for md screens (≥768px) */
    }
}
@media (min-width: 992px) {
    .gallery-image img {
        height: 230px; /* for lg screens (≥992px) */
    }
}
.title-md {
    font-size: 60px; 
    line-height: 63px;

    text-shadow:
        -1px -1px 0 rgba(10, 12, 16, 0.5),
        1px -1px 0 rgba(10, 12, 16, 0.5),
        -1px  1px 0 rgba(10, 12, 16, 0.5),
        1px  1px 0 rgba(10, 12, 16, 0.5); 
}

.title {
    font-size: 32px; 
    line-height: 35px;
}
.title-sm {
    font-size: 20px; 
    line-height: 23px;
}
.title-description{
    font-size: 14px;
    line-height: 18px;
}

.title.content {
    text-shadow: unset; 
}

@media (min-width: 576px) {
    .title {
      font-size: 36px;
      line-height: 39px;
    }
    .title-sm {
      font-size: 18px;
      line-height: 21px;
    }
    .title-description{
        font-size: 16px;
        line-height: 19px;
    }
    .title-md {
      font-size: 30px;
      line-height: 33px;
    }
}

@media (min-width: 768px) {
    .title {
        font-size: 52px;
        line-height: 56px;
    }
    .title-sm {
        font-size: 26px;
        line-height: 29px;
      }
    .title-md {
        font-size: 23px;
        line-height: 26px;
    }
}

@media (min-width: 992px) {
    .title {
        font-size: 80px;
        line-height: 83px;
    }
    .title-sm {
        font-size: 40px;
        line-height: 43px;
      }
    .title-md {
        font-size: 44px;
        line-height: 48px;
    }
}

.navbar-bg-transparent::after {
    background: transparent;
}

.navbar-bg-dark::after {
    background: var(--dark-gray); /* or use a hex: #0A0C10 */
}

.top-right-radius {
    border-radius: 0 12px 0 0; /* top-left, top-right, bottom-right, bottom-left */
}
.hover-red:hover{
    color: var(--base-color) !important;
}
.extra-very-small-screen{
    height: 160px !important;
}
.text-dark-gray{
    color: var(--dark-gray) !important;
}
.hover-box.dark-hover:hover a span{
    color: initial !important;
}
.hover-box.dark-hover:hover a span.hover-white{
    color: white !important;
}
.hover-box.dark-hover:hover a.btn-custom-tag span{
    color: #6D81F2 !important;
}
.hover-box.dark-hover:hover a.btn-custom-tag{
    border-color: #6D81F2 !important;
}
.rogshield {
    min-height: 355px;
    position: relative;
}
  
.rogshield-image {
    height: 70%;
    width: auto;
    max-width: 100%;
    max-height: 325px;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}
  
.rogshield-title {
    top: 7%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
    position: absolute;
    font-size: 37px;
}

@media (min-width: 576px) {
    .rogshield {
        min-height: 470px;
    }
    
    .rogshield-title {
        top: 10%; /* adjust text position */
        font-size: 55px;
    }
    
    .rogshield-image {
        max-height: 720px; /* limit large image */
    }
}

@media (min-width: 768px) {
    .rogshield {
        min-height: 590px;
    }
    
    .rogshield-title {
        top: 10%; /* adjust text position */
        font-size: 75px;
    }
    
    .rogshield-image {
        max-height: 720px; /* limit large image */
    }
}
  
@media (min-width: 992px) {
    .rogshield {
        min-height: 700px;
    }
    
    .rogshield-title {
        top: 13%; /* adjust text position */
        font-size: 93px;
    }
    
    .rogshield-image {
        max-height: 720px; /* limit large image */
    }
}
  

.services-box-style-03 > .bg-white,
.services-box-style-03 > .bg-dark-gray {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.strikethrough {
    text-decoration: line-through;
}

.margin-auto-130px{
    margin-top: 0;
}
@media (min-width: 992px) {
    .margin-auto-130px{
        margin-top: 130px;
    }
}
.btn-custom-tag:hover{
    font-size: 10px;
    color: var(--base-color) !important;
    text-transform: none;
    border: 1px solid var(--base-color) !important;
    background-color: transparent;
    border-radius: 24px;
}
#navbarNav.show {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
}