/*==================================================
Large Laptop
==================================================*/

@media (max-width:1400px){

.container{
    max-width:1140px;
}

.hero h1{
    font-size:58px;
}

.hero{
    padding-top:160px;
}

}

/*==================================================
Laptop
==================================================*/

@media (max-width:1200px){

.container{
    max-width:960px;
}

.hero h1{
    font-size:48px;
}

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

.counter-card h3{
    font-size:28px;
}

.book-btn{
    padding:12px 24px;
}

}

/*==================================================
Tablet
==================================================*/

@media (max-width:992px){

.main-header{
    position:relative;
    background:#fff;
    padding:15px 0;
    box-shadow:0 5px 20px rgba(0,0,0,.08);
}

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

.navbar-nav{
    gap:0;
}

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

.book-btn{
    margin-top:20px;
    display:flex;
    justify-content:center;
}

.hero{
    padding:80px 0;
    text-align:center;
}

.hero-content{
    margin-bottom:50px;
}

.hero p{
    margin:auto;
    margin-bottom:35px;
}

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

.hero-image{
    margin-top:20px;
}

.curve-shape{
    display:none;
}

.dots{
    display:none;
}

.counter-box{

    grid-template-columns:repeat(2,1fr);

    margin-top:60px;

}

.counter-card{

    border-right:none;

    border-bottom:1px solid #eee;

}

.counter-card:nth-child(2){

    border-bottom:1px solid #eee;

}

}

/*==================================================
Mobile
==================================================*/

@media (max-width:768px){

.logo img{
    width:45px;
}

.logo h5{
    font-size:18px;
}

.hero h1{
    font-size:40px;
    line-height:1.2;
}

.hero p{
    font-size:15px;
}

.primary-btn,
.outline-btn{

    width:100%;
    justify-content:center;

}

.counter-box{

    grid-template-columns:1fr;

}

.counter-card{

    border-bottom:1px solid #eee;

}

.hero-image img{

    border-radius:20px;

}

}

/*==================================================
Small Mobile
==================================================*/

@media (max-width:576px){

.hero{

    padding:70px 0;

}

.hero h1{

    font-size:32px;

}

.hero p{

    font-size:14px;

    line-height:1.8;

}

.hero-btn{

    flex-direction:column;

}

.primary-btn,
.outline-btn{

    width:100%;

    text-align:center;

}

.counter-card{

    padding:25px 15px;

}

.counter-card h3{

    font-size:24px;

}

.counter-card p{

    font-size:14px;

}

}

/*==================================================
Extra Small
==================================================*/

@media (max-width:400px){

.hero h1{

    font-size:28px;

}

.logo h5{

    font-size:16px;

}

.logo span{

    font-size:12px;

}

.book-btn{

    font-size:14px;

    padding:10px 18px;

}

}
/*=========================================
BOTTOM FEATURE STRIP
=========================================*/

.remedies-bottom{

    margin-top:60px;

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:20px;

}

.bottom-box{

    background:#fff;

    border:1px solid #f2e4d3;

    border-radius:18px;

    padding:25px;

    display:flex;

    align-items:center;

    gap:18px;

    transition:.4s;

    position:relative;

    overflow:hidden;

}

.bottom-box::before{

    content:"";

    position:absolute;

    top:0;

    left:-120%;

    width:120%;

    height:100%;

    background:linear-gradient(
        90deg,
        transparent,
        rgba(255,215,120,.35),
        transparent
    );

    transition:.8s;

}

.bottom-box:hover::before{

    left:120%;

}

.bottom-box:hover{

    transform:translateY(-8px);

    box-shadow:0 20px 40px rgba(0,0,0,.08);

}

.bottom-box .icon{

    width:65px;

    height:65px;

    border-radius:50%;

    background:#fff5e5;

    display:flex;

    align-items:center;

    justify-content:center;

    flex-shrink:0;

}

.bottom-box .icon img{

    width:34px;

}

.bottom-box h5{

    font-size:18px;

    color:#7a2208;

    margin-bottom:6px;

}

.bottom-box p{

    font-size:14px;

    color:#666;

    line-height:1.7;

}

/*=========================================
CARD SHINE
=========================================*/

.remedy-card::after{

    content:"";

    position:absolute;

    top:0;

    left:-150%;

    width:80%;

    height:100%;

    transform:skewX(-30deg);

    background:

    linear-gradient(

        rgba(255,255,255,.0),

        rgba(255,255,255,.45),

        rgba(255,255,255,.0)

    );

    transition:1s;

}

.remedy-card:hover::after{

    left:180%;

}

/*=========================================
IMAGE OVERLAY
=========================================*/

.card-image{

    position:relative;

}

.card-image::before{

    content:"";

    position:absolute;

    inset:0;

    background:

    linear-gradient(

        transparent,

        rgba(0,0,0,.15)

    );

    opacity:0;

    transition:.4s;

}

.remedy-card:hover .card-image::before{

    opacity:1;

}

/*=========================================
DECORATIVE DOTS
=========================================*/

.remedies-section .dots-left{

    position:absolute;

    top:120px;

    left:50px;

    width:120px;

    height:120px;

    background-image:

    radial-gradient(#efc56d 2px, transparent 2px);

    background-size:18px 18px;

    opacity:.45;

}

.remedies-section .dots-right{

    position:absolute;

    bottom:120px;

    right:60px;

    width:120px;

    height:120px;

    background-image:

    radial-gradient(#efc56d 2px, transparent 2px);

    background-size:18px 18px;

    opacity:.45;

}

/*=========================================
FLOATING GOLD CIRCLE
=========================================*/

.gold-circle{

    position:absolute;

    width:220px;

    height:220px;

    border:1px solid rgba(214,150,40,.18);

    border-radius:50%;

    right:-80px;

    top:100px;

    animation:rotateCircle 18s linear infinite;

}

.gold-circle::before{

    content:"";

    position:absolute;

    inset:15px;

    border:1px dashed rgba(214,150,40,.25);

    border-radius:50%;

}

@keyframes rotateCircle{

    from{

        transform:rotate(0deg);

    }

    to{

        transform:rotate(360deg);

    }

}

/*=========================================
FEATURE BOX HOVER
=========================================*/

.feature-box{

    position:relative;

    overflow:hidden;

}

.feature-box::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:4px;

    height:0;

    background:#d78d18;

    transition:.35s;

}

.feature-box:hover::before{

    height:100%;

}

/*=========================================
TITLE EFFECT
=========================================*/

.section-title h2{

    position:relative;

    display:inline-block;

}

.section-title h2::after{

    content:"";

    position:absolute;

    left:50%;

    transform:translateX(-50%);

    bottom:-14px;

    width:70px;

    height:4px;

    border-radius:20px;

    background:linear-gradient(

        90deg,

        #d78d18,

        #8d2507

    );

}

/*=========================================
SCROLL ANIMATION
=========================================*/

.reveal{

    opacity:0;

    transform:translateY(70px);

    transition:1s;

}

.reveal.active{

    opacity:1;

    transform:none;

}

/*=========================================
CARD HOVER GLOW
=========================================*/

.remedy-card:hover{

    border-color:#efc56d;

    box-shadow:

    0 25px 60px rgba(0,0,0,.08),

    0 0 0 1px rgba(239,197,109,.25);

}

/*=========================================
TRISHUL GLOW
=========================================*/

.trishul-card{

    position:relative;

}

.trishul-card::before{

    content:"";

    position:absolute;

    width:250px;

    height:250px;

    background:radial-gradient(

        rgba(255,180,70,.35),

        transparent 70%

    );

    border-radius:50%;

    animation:pulseGlow 3s infinite;

}

@keyframes pulseGlow{

    0%{

        transform:scale(.9);

        opacity:.4;

    }

    50%{

        transform:scale(1.1);

        opacity:.8;

    }

    100%{

        transform:scale(.9);

        opacity:.4;

    }

}

/*=========================================
FLOATING ICON
=========================================*/

.float-icon{

    animation:floatY 4s ease-in-out infinite;

}

@keyframes floatY{

    0%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-10px);

    }

    100%{

        transform:translateY(0);

    }

}

/*=========================================
Large Desktop (1400px)
=========================================*/

@media (max-width:1400px){

.about-content h2{

    font-size:46px;

}

.image-shape{

    max-width:650px;

}

.temple-bg{

    width:240px;

}

}

/*=========================================
Laptop (1200px)
=========================================*/

@media (max-width:1200px){

.about-pandit-section{

    padding:90px 0;

}

.about-content h2{

    font-size:42px;

}

.about-content p{

    font-size:15px;

}

.image-shape{

    max-width:600px;

}

.bells{

    left:20px;

}

.om-icon{

    right:30px;

}

}

/*=========================================
Tablet Landscape (992px)
=========================================*/

@media (max-width:992px){

.about-pandit-section{

    padding:80px 0;

}

.about-content{

    text-align:center;

    margin-bottom:50px;

}

.about-content p{

    max-width:100%;

}

.about-content h2::after{

    margin:18px auto 0;

}

.section-subtitle{

    justify-content:center;

}

.divider{

    display:flex;

    justify-content:center;

}

.pandit-btn{

    justify-content:center;

}

.image-shape{

    max-width:100%;

}

.temple-bg{

    opacity:.06;

    width:180px;

}

.om-icon{

    width:60px;

    height:60px;

    right:25px;

    top:25px;

}

.om-icon img{

    width:30px;

}

.bells{

    display:none;

}

}

/*=========================================
Tablet Portrait (768px)
=========================================*/

@media (max-width:768px){

.about-pandit-section{

    padding:70px 0;

}

.about-content h2{

    font-size:36px;

    line-height:1.2;

}

.about-content p{

    font-size:15px;

    line-height:1.8;

}

.pandit-btn{

    width:100%;

    justify-content:center;

}

.image-shape{

    border-radius:45px;

    border-width:4px;

}

.shape-circle{

    display:none;

}

.temple-bg{

    width:140px;

}

.section-subtitle{

    font-size:14px;

}

}

/*=========================================
Mobile (576px)
=========================================*/

@media (max-width:576px){

.about-pandit-section{

    padding:60px 0;

}

.about-content h2{

    font-size:30px;

}

.about-content p{

    font-size:14px;

}

.section-subtitle{

    font-size:13px;

}

.pandit-btn{

    padding:14px 22px;

    font-size:14px;

}

.image-shape{

    border-radius:30px;

}

.om-icon{

    width:50px;

    height:50px;

    right:15px;

    top:15px;

}

.om-icon img{

    width:24px;

}

.temple-bg{

    display:none;

}

}

/*=========================================
Small Mobile (420px)
=========================================*/

@media (max-width:420px){

.about-content h2{

    font-size:26px;

}

.about-content p{

    line-height:1.7;

}

.section-subtitle{

    font-size:12px;

}

.pandit-btn{

    font-size:13px;

    padding:12px 18px;

}

.image-shape{

    border-radius:22px;

}

.om-icon{

    width:42px;

    height:42px;

}

.om-icon img{

    width:20px;

}

}

/*=========================================
Animation Optimization
=========================================*/

@media (prefers-reduced-motion: reduce){

.about-content,
.pandit-image-wrapper,
.image-shape img,
.om-icon,
.shape-circle{

    animation:none !important;

    transition:none !important;

}

}

/*=========================================
Large Desktop (1400px)
=========================================*/

@media (max-width:1400px){

.kp-gallery-heading h2{
    font-size:42px;
}

.kp-gallery-grid{
    gap:16px;
}

.kp-gallery-item img{
    height:145px;
}

}

/*=========================================
Laptop (1200px)
=========================================*/

@media (max-width:1200px){

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

.kp-gallery-grid{
    grid-template-columns:repeat(4,1fr);
    gap:15px;
}

.kp-gallery-item img{
    height:135px;
}

.kp-gallery-left,
.kp-gallery-right{
    width:140px;
}

.kp-gallery-heading h2{
    font-size:38px;
}

}

/*=========================================
Tablet Landscape (992px)
=========================================*/

@media (max-width:992px){

.kp-gallery-section{
    padding:70px 0;
}

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

.kp-gallery-item img{
    height:180px;
}

.kp-gallery-heading h2{
    font-size:34px;
}

.kp-gallery-left,
.kp-gallery-right{
    width:110px;
    opacity:.10;
}

.kp-btn{
    padding:14px 34px;
}

}

/*=========================================
Tablet Portrait (768px)
=========================================*/

@media (max-width:768px){

.kp-gallery-heading{
    margin-bottom:35px;
}

.kp-gallery-heading h2{
    font-size:30px;
    line-height:1.3;
}

.kp-subtitle{
    font-size:14px;
}

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

.kp-gallery-item{
    border-radius:14px;
}

.kp-gallery-item img{
    height:150px;
}

.kp-btn{
    width:100%;
    justify-content:center;
}

.kp-gallery-left,
.kp-gallery-right{
    display:none;
}

}

/*=========================================
Mobile (576px)
=========================================*/

@media (max-width:576px){

.kp-gallery-section{
    padding:60px 0;
}

.kp-gallery-grid{
    grid-template-columns:1fr;
    gap:16px;
}

.kp-gallery-item img{
    height:220px;
}

.kp-gallery-heading h2{
    font-size:26px;
}

.kp-subtitle{
    font-size:13px;
}

.kp-btn{
    width:100%;
    padding:14px 20px;
    font-size:15px;
}

}

/*=========================================
Extra Small Mobile (420px)
=========================================*/

@media (max-width:420px){

.kp-gallery-heading h2{
    font-size:22px;
}

.kp-gallery-item img{
    height:180px;
}

.kp-btn{
    font-size:14px;
    padding:12px 18px;
}

}

/*=========================================
Animation Optimization
=========================================*/

@media (prefers-reduced-motion:reduce){

.kp-gallery-item,
.kp-btn{
    animation:none !important;
    transition:none !important;
}

}


/*=========================================
  LARGE DESKTOP (1400px+)
=========================================*/

@media (max-width: 1400px) {

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

    .contact-form {
        padding: 40px;
    }

}

/*=========================================
  LAPTOP (1200px)
=========================================*/

@media (max-width: 1200px) {

    .contact-section {
        padding: 90px 0;
    }

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

    .contact-info {
        padding: 35px;
    }

    .info-box .icon {
        width: 55px;
        height: 55px;
        font-size: 20px;
    }

}

/*=========================================
  TABLET LANDSCAPE (992px)
=========================================*/

@media (max-width: 992px) {

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

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

    .section-title p {
        font-size: 15px;
    }

    .contact-info,
    .contact-form {
        padding: 30px;
    }

    .info-box {
        gap: 15px;
    }

}

/*=========================================
  TABLET PORTRAIT (768px)
=========================================*/

@media (max-width: 768px) {

    /* Stack Layout */

    .contact-info {
        margin-bottom: 30px;
    }

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

    .section-title p {
        font-size: 14px;
    }

    /* Form Stack Fix */

    .contact-form .row > div {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .contact-form {
        padding: 25px;
    }

    .info-box .icon {
        width: 50px;
        height: 50px;
        font-size: 18px;
    }

    .social-icons a {
        width: 42px;
        height: 42px;
    }

}

/*=========================================
  MOBILE LARGE (576px)
=========================================*/

@media (max-width: 576px) {

    .contact-section {
        padding: 60px 0;
    }

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

    .section-title p {
        font-size: 13px;
    }

    /* Full width form */

    .contact-form {
        padding: 20px;
        border-radius: 18px;
    }

    .contact-form .form-control {
        height: 52px;
        font-size: 14px;
    }

    textarea.form-control {
        height: 140px !important;
    }

    /* Button Full Width */

    .contact-btn {
        width: 100%;
        justify-content: center;
        padding: 14px;
        font-size: 15px;
    }

    /* Icons Resize */

    .info-box .icon {
        width: 45px;
        height: 45px;
        font-size: 16px;
    }

    .info-box h5 {
        font-size: 18px;
    }

}

/*=========================================
  SMALL MOBILE (420px)
=========================================*/

@media (max-width: 420px) {

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

    .info-box {
        flex-direction: column;
        align-items: flex-start;
    }

    .info-box .icon {
        margin-bottom: 10px;
    }

    .social-icons {
        justify-content: center;
    }

}

/*=========================================
  ULTRA SMALL DEVICES (360px)
=========================================*/

@media (max-width: 360px) {

    .contact-section {
        padding: 50px 0;
    }

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

    .contact-btn {
        font-size: 14px;
    }

}


/*=====================
Tablet
=====================*/

@media(max-width:991px){

.vm-footer-grid{

grid-template-columns:repeat(2,1fr);

gap:35px;

}

}

/*=====================
Mobile
=====================*/

@media(max-width:767px){

.vm-footer{
padding:70px 0 20px;
}
.remedies-grid{
display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 28px;
}
.remedies-wrapper{
    grid-template-columns: repeat(1, 1fr);
    gap: 28px;
}
.vm-footer-grid{

grid-template-columns:1fr;

text-align:center;

}

.vm-footer-box h3::after{

left:50%;

transform:translateX(-50%);

}

.vm-social{

justify-content:center;

}

.vm-footer-box form{

width:100%;

}

.vm-footer-box input,

.vm-footer-box button{

width:100%;

}

}