/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: May 06 2026 | 09:14:06 */
/* =========================================
   INSPIRELIFE.IN - MOBILE RESPONSIVE CSS
========================================= */

/* RESET */
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html,
body{
    width:100%;
    overflow-x:hidden;
    font-family:Arial, sans-serif;
    scroll-behavior:smooth;
}

/* IMAGES */
img{
    max-width:100%;
    height:auto;
    display:block;
}

/* CONTAINER */
.container,
.wrapper,
.content,
.section{
    width:100%;
    max-width:1200px;
    margin:auto;
    padding-left:15px;
    padding-right:15px;
}

/* COMMON BUTTON */
button,
.btn,
.elementor-button{
    border:none;
    outline:none;
    cursor:pointer;
    transition:0.3s ease;
}

button:hover,
.btn:hover,
.elementor-button:hover{
    transform:translateY(-2px);
}

/* PREMIUM CARD DESIGN */
.card,
.feature-box,
.service-box,
.info-box,
.assessment-box,
.result-box{
    background:#ffffff;
    border-radius:18px;
    padding:25px;
    box-shadow:0 4px 20px rgba(0,0,0,0.08);
    transition:0.3s ease;
}

.card:hover,
.feature-box:hover,
.service-box:hover{
    transform:translateY(-5px);
}

/* SECTION SPACING */
section{
    padding:70px 0;
}

/* TYPOGRAPHY */
h1{
    font-size:48px;
    line-height:1.2;
    font-weight:700;
}

h2{
    font-size:38px;
    line-height:1.3;
    font-weight:700;
}

h3{
    font-size:28px;
    line-height:1.4;
}

p{
    font-size:17px;
    line-height:1.7;
    color:#555;
}

/* FLEX LAYOUT */
.row,
.flex,
.two-column,
.three-column,
.four-column,
.hero-section,
.features,
.cards{
    display:flex;
    gap:30px;
}

/* FORM STYLING */
input,
textarea,
select{
    width:100%;
    padding:14px;
    border:1px solid #ddd;
    border-radius:10px;
    font-size:16px;
    outline:none;
}

input:focus,
textarea:focus,
select:focus{
    border-color:#000;
}

/* TABLE RESPONSIVE */
table{
    width:100%;
    border-collapse:collapse;
}

/* NAVIGATION */
nav,
.navbar,
.menu{
    width:100%;
}

.menu ul{
    display:flex;
    gap:20px;
    list-style:none;
}

/* HERO SECTION */
.hero,
.banner{
    padding:100px 0;
}

.hero-title{
    font-weight:700;
    letter-spacing:-0.5px;
}

/* =========================================
   TABLET VIEW
========================================= */

@media screen and (max-width:992px){

    h1{
        font-size:40px;
    }

    h2{
        font-size:32px;
    }

    .row,
    .flex,
    .two-column,
    .three-column,
    .four-column,
    .hero-section,
    .features,
    .cards{
        flex-wrap:wrap;
    }

}

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

@media screen and (max-width:768px){

    body{
        font-size:15px;
    }

    h1{
        font-size:30px;
        text-align:center;
    }

    h2{
        font-size:25px;
        text-align:center;
    }

    h3{
        font-size:20px;
        text-align:center;
    }

    p{
        font-size:15px;
        text-align:center;
    }

    section{
        padding:45px 0;
    }

    /* COLUMN STACK */
    .row,
    .flex,
    .two-column,
    .three-column,
    .four-column,
    .hero-section,
    .features,
    .cards{
        flex-direction:column !important;
        gap:20px;
    }

    /* CARDS */
    .card,
    .feature-box,
    .service-box,
    .info-box,
    .assessment-box,
    .result-box{
        width:100%;
        padding:20px;
    }

    /* BUTTON */
    button,
    .btn,
    .elementor-button{
        width:100%;
        padding:14px 18px;
        font-size:16px;
        border-radius:10px;
    }

    /* MENU */
    .menu ul{
        flex-direction:column;
        align-items:center;
        gap:10px;
    }

    .menu li{
        width:100%;
        text-align:center;
        padding:8px 0;
    }

    /* HERO */
    .hero,
    .banner{
        padding:50px 0;
        text-align:center;
    }

    /* TABLE */
    table{
        display:block;
        overflow-x:auto;
    }

    /* FORM */
    input,
    textarea,
    select{
        font-size:16px;
        padding:12px;
    }

    /* FIX OVERFLOW */
    *{
        max-width:100%;
    }

}

/* =========================================
   SMALL MOBILE DEVICES
========================================= */

@media screen and (max-width:480px){

    h1{
        font-size:24px;
    }

    h2{
        font-size:20px;
    }

    h3{
        font-size:18px;
    }

    p{
        font-size:14px;
    }

    section{
        padding:35px 0;
    }

    .card,
    .feature-box,
    .service-box,
    .info-box,
    .assessment-box,
    .result-box{
        padding:16px;
        border-radius:14px;
    }

    button,
    .btn,
    .elementor-button{
        font-size:15px;
        padding:12px 14px;
    }

}

/* =========================================
   STICKY MOBILE BUTTON
========================================= */

.mobile-sticky-btn{
    position:fixed;
    bottom:15px;
    left:15px;
    right:15px;
    z-index:999;
}

/* =========================================
   REMOVE EXTRA GAPS
========================================= */

section,
div{
    max-width:100%;
}