/* Tablet */
@media(max-width:991px) {

    
    .section-title h2 {
        font-size: 28px !important;
    }
    .first-section{
        background:none !important;
    }
    /* ==========================
   HEADER
   ========================== */
    .top-header .container {
        flex-direction: column;
        gap: 8px;
        padding: 8px 0;
    }

    .links-left ul {
        flex-wrap: wrap;
        justify-content: center;
    }

    .links-left ul li {
        margin: 3px 10px;
    }

    .main-header {
        padding: 0;
    }

    .navbar-collapse {
        background: #7b0000;
        margin-top: 15px;
        border-radius: 10px;
        padding: 20px;
    }

    .navbar-nav {
        align-items: flex-start;
    }

    .navbar-nav .nav-item {
        width: 100%;
        margin: 0;
    }

    .navbar-nav .nav-link {
        padding: 12px 0;
    }

    .header-buttons {
        width: 100%;
        margin-left: 0;
        margin-top: 15px;
        flex-direction: column;
    }

    .btn-login,
    .btn-register {
        width: 100%;
        text-align: center;
    }

    .logo img {
        height: 60px;
    }

    .navbar-toggler {
        border: none;
        box-shadow: none;
    }

    .navbar-toggler i {
        color: #fff;
        font-size: 24px;
    }

    /* ==========================
    HERO SECTION
    ========================== */
    .hero-content {
        text-align: center;
        margin: auto;
    }

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

    .hero-content p {
        font-size: 18px;
    }

    .hero-buttons {
        justify-content: center;
    }

    .hero-overlay {
        background:
            linear-gradient(180deg,
                rgba(123, 0, 0, .85),
                rgba(123, 0, 0, .55));
    }

    .hero-bg img {
        object-position: 86%;
    }

    .heroSwiper,
    .heroSwiper .swiper-slide {
        min-height: calc(100dvh - 120px);

    }

    .list-inline {
        margin: 10px;
    }
     .hero-features{
        gap:15px;
    }

    .feature-item{
        width:calc(50% - 8px);
    }

    /* ==========================
     MEMBERSHIP
    ========================== */
    .plan-btn {
        width: 100%;
    }

    .membership-section .section-title h2 {
        font-size: 28px;
    }

    .royal-banner {
        flex-direction: column;
        text-align: center;
        padding: 25px;
        gap: 25px;
    }
    .royal-logo {
        flex: 0 0 0 !important;
    }

    /* ==========================
     STORY
    ========================== */
    .story-features {
        flex-wrap: wrap;
        gap: 20px;
    }

    .feature-item {
        width: calc(50% - 10px);
    }

    .feature-logo {
        width: 100%;
    }

    .faq {
        padding: 50px 0;
    }

    /* ===================================
    FAQ
    =================================== */
    .faq-item {
        padding: 16px 15px 16px 65px;
    }

    .faq-item .question {
        font-size: 16px;
    }

    /* ===================================
    FOOTER
    =================================== */
    .footer-top {
        flex-wrap: wrap;
        gap: 25px;
    }

    .footer-logo {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, .15);
        padding-bottom: 20px;
    }

    .footer-bottom-inner {
        flex-direction: column;
        gap: 8px;
        text-align: center;
    }

    /* ==========================
     ABOUT US
    ========================== */
    .banner-content h1 {
        font-size: 28px;
    }

    .about-content {
        padding-left: 0;
        margin-top: 40px;
    }

    .about-content h2 {
        font-size: 28px;
    }

    .about-highlight {
        flex-direction: column;
        gap: 15px;
    }

    .mvp-card,
    .why-card {
        margin-bottom: 20px;
    }

    .cta-section h2 {
        font-size: 34px;
    }

    .mvp-section .section-title h2 {
        font-size: 28px;
    }

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

    .stat-box {
        padding: 20px 20px;
    }

    .stat-box h3 {
        font-size: 24px;
    }

    /* ==========================
    CONTACT
    ========================== */
    .contact-info-grid,
    .contact-wrapper,
    .feature-grid {
        grid-template-columns: 1fr;
    }

    .contact-hero h1 {
        font-size: 36px;
    }

    .contact-cta h2 {
        font-size: 30px;
    }

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

    /* =====================
   TERMS AND CONDITIONS
===================== */
    .legal-wrapper {
        grid-template-columns: 1fr;
    }

    .legal-sidebar {
        position: relative;
        top: auto;
    }

    .legal-card {
        padding: 30px;
    }

    .legal-hero h1 {
        font-size: 36px;
    }
    .swiper-content-bottom li span {
        padding: 0 5px;
    }
      .feature-item{
        width:50%;
    }
}

/*****Mobile****/
@media(max-width:767px) {

    .section-title h2 {
        font-size: 28px !important;
    }

    /* ==========================
    HERO SECTION
    ========================== */
    .hero-content h1 {
        font-size: 34px;
    }

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

    .btn-register,
    .btn-match {
        width: 100%;
    }
     .hero-features{
        /* flex-direction:column;
        gap:15px; */
    }

  



    /* ==========================
     ABOUT US
    ========================== */
    .inner-banner {
        padding: 20px 0;
    }

    .stat-box {
        margin-bottom: 30px;
    }

    .founder-box p {
        font-size: 20px;
    }

    .cta-section h2 {
        font-size: 28px;
    }

    .stats-section {
        padding: 60px 0;
        background-position: center;
    }

    .stat-icon {
        width: 50px;
        height: 50px;
    }

    .stat-icon i {
        font-size: 28px;
    }

    .stat-box p {
        font-size: 15px;
        margin-bottom: 30px;
    }

    .banner-content h1 {
        font-size: 32px;
    }

    .about-content h2 {
        font-size: 28px;
    }
    .royal-premium-strip {
        flex-direction: column;
        text-align: center;
        padding: 30px;
    }
    .premium-left {
        max-width: 100% !important;
    }
    .profile-main-image{
        max-width:200px !important;
    }
    .profile-main-image img{
        max-width:200px !important;
    }
    .second-top-header{
        position: fixed;
        width: 100%;
        background: var(--white);
    }
    main{
        margin-top:20px !important;
    }
    #frontend_first_section{
        padding:0;
    }
    .desktop-only{
        display:none !important;
    }
}