.inter {
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  font-style: normal;
}

.btn-outline-secondary {
    --bs-btn-color: #f5f5f5;
    --bs-btn-border-color: #f5f5f5;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #f5f5f5;
    --bs-btn-hover-border-color: #f5f5f5;
    --bs-btn-focus-shadow-rgb: 108, 117, 125;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #f5f5f5;
    --bs-btn-active-border-color: #f5f5f5;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #f5f5f5;
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: #f5f5f5;
    --bs-gradient: none;
}

/* color */
.text-muted{color: #737373 !important;}
.text-black{color: #141414 !important;}
.bg-white{background-color: #f5f5f5;}

/* font-size */
.f-12{font-size: 12px;}
.f-60{font-size: 60px;}
.f-18{font-size: 18px;}
.f-24{font-size: 24px;}
.f-30{font-size: 30px;}

/* font-weight */
.f-600{font-weight: 600;}
.f-800{font-weight: 800;}
.f-700{font-weight: 700;}
.f-500{font-weight: 500;}

/* line height */
.l1{line-height: 1;}

.tracking-tight {letter-spacing: -0.025em;}
.homepad {padding-top: 5.5rem; padding-bottom: 5.5rem;}

/* navbar */
.store-btn {background: #000; color: #fff; border-radius: 6px; text-decoration: none; display: inline-flex; gap: 6px;}
.store-btn:hover { background: #333;color: #fff;}

/* hero-section */
.hero-section{height: 100vh;}
.store-wrapper { display: flex; justify-content: center; align-items: center; gap: 18px; flex-wrap: wrap;}
.store-badge { display: inline-block;}
.store-badge img { height: 55px;  width: auto; display: block; border-radius: 12px; transition: all 0.25s ease;}
.scroll-arrow {cursor: pointer;display: inline-block; animation: bounce 1.5s infinite;}
@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(12px);
    }
}
/* section-2 */
.icon-box { width: 50px; height: 50px; background-color: #fdeaea; border-radius: 12px; display: flex; align-items: center;  justify-content: center;}
.icon-box i { color: #dc3545; font-size: 20px;}
.card:hover {box-shadow:  0 2px 8px rgba(0, 0, 0, 0.1), 0 8px 24px rgba(0, 0, 0, 0.06) !important;}

/* section-3 */
.video-wrapper {position: relative; cursor: pointer; border-radius: 12px; overflow: hidden; width: 100%; aspect-ratio: 16/9;}
.video-wrapper iframe { width: 100%; height: 100%; border: none; display: block; pointer-events: none;}
.iframe-overlay { position: absolute; inset: 0; background: transparent; cursor: pointer; z-index: 10;}