:root {
    --color-primary-shiva-purple: #2C0C55;
    --color-primary-narayana: #613681;
    --color-primary-ganesha-purple: #793279;
    --color-primary-rama-green: #0F3F46;
    --color-primary-laxman: #AB966F;
    --color-primary-sita-gold: #DFC99D;
    --color-secondary-purple-01: #76469C;
    --color-secondary-purple-02: #8467A2;
    --color-secondary-purple-03: #C3A1C3;
    --color-secondary-purple-04: #CEBED1;
    --color-secondary-purple-05: #DBCBE0;
    --color-secondary-santol-nude: #E1B8A8;
    --color-secondary-tumeric-yellow: #C5A164;
    --color-success-laxman-dark: #7B6845;
    --color-shades-black: #000000;
    --color-shades-white: #FFFFFF;
    --color-background-purple: #F1EAF3;

    --vh: 100dvh;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.unavailable-url {
    pointer-events: none;
}
html {
    font-size: 16px;
    scroll-behavior: smooth;

    /* height: calc(var(--vh, 1vh) * 100); */
    height: calc(var(--vh, 1vh) * 100);
    height: fill-available;
    height: -webkit-fill-available;
    height: 100dvh;

    overflow-x: hidden;
    /* overflow-y: hidden; */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    overscroll-behavior: contain;
    scrollbar-width: thin;

    margin: 0;
    padding: 0;
}

body {
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
    /* font-family: "Lato", sans-serif; */
    font-weight: 400;
    width: 100%;
    color: var(--color-primary-shiva-purple);
    /* padding-bottom: env(safe-area-inset-bottom); */
    padding-top: env(safe-area-inset-top);
    background-color: var(--color-shades-white);

    /* height: calc(var(--vh, 1vh) * 100); */
    min-height: -webkit-fill-available;

}
.post, .page {
    margin: 0;
}
a {
    text-decoration: none;
    list-style: none;
}

a:focus {
    outline: none;
}
ul {
    list-style: none;
}
.container {
    margin: 0 auto;
    max-width: calc(100vw - 224px);
}
.extra-light {
    font-weight: 275;
    font-style: normal;
}
.light {
    font-weight: 300;
    font-style: normal;
}
.reg {
    font-weight: 400;
    font-style: normal;
}
.bold {
    font-weight: 700;
    font-style: normal;
}
.italic {
    font-weight: 300;
    font-style: italic;
}
.d1{
    font-family: "ivypresto-display", serif;
    font-size: 6.25rem;
    font-weight: 300;
    line-height: 6.25rem;
}
h1, .h1{
    font-family: "ivypresto-display", serif;
    font-size: 4rem;
    line-height: 4rem;
} 
h2, .h2{
    font-family: "ivypresto-display", serif;
    font-size: 2.25rem;
    line-height: 2.75rem;
}
h3, .h3{
    font-family: "ivypresto-display", serif;
    font-size: 1.75rem;
    line-height: 2.5rem;
}
h4, .h4{
    font-family: "ivypresto-display", serif;
    font-size: 1.625rem;
    line-height: 2.25rem;
}
h5, .h5{
    font-family: "ivypresto-display", serif;
    font-size: 1.5rem;
    line-height: 2rem;
}
h6, .h6{
    font-family: "ivypresto-display", serif;
    font-size: 1.25rem;
    line-height: 1.75rem;
}
p {
    font-family: "collier", sans-serif;
}
.p1,
.home-testimonials-swiper-slide__text-content blockquote p,
.txt-p1 p {
    font-family: "collier", sans-serif;
    font-size: 1.125rem;
    line-height: 1.25rem;
}
.txt-p1 p {
    font-weight: 275;
    font-style: normal;
}
.p2 {
    font-family: "collier", sans-serif;
    font-size: 1rem;
    line-height: 1.25rem;
}
.p3 {
    font-family: "collier", sans-serif;
    font-size: 0.875rem;
    line-height: 1rem;
}
.p4 {
    font-family: "collier", sans-serif;
    font-size: 0.75rem;
    line-height: 0.875rem;
}
b, strong, .purple-font {
    color: var(--color-primary-shiva-purple);
}
blockquote {
    margin: 0;
}
.white-font,
a.white-font,
a.white-font:visited {
    color: var(--color-shades-white);
}
.dark-gold-font,
a.dark-gold-font-btn,
a.dark-gold-font-btn:visited {
    color: var(--color-success-laxman-dark) !important;
}
.naraya-font,
a.naraya-font,
a.naraya-font:visited {
    color: var(--color-primary-narayana);
}
.sita-gold-font {
    color: var(--color-primary-sita-gold);
}
.text-center {
    text-align: center;
}
.btn {
    text-align: center;
    font-family: "collier", sans-serif;
    font-size: 1.125rem;
    font-weight: 275;
    line-height: 1.25rem;
    letter-spacing: 0.5px;

    cursor: pointer;

    display: inline-flex;
    flex-direction: row-reverse;
    justify-content: center;
    align-items: center;
    gap: 8px;
}
.btn:visited {
    font-family: "collier", sans-serif;
    font-size: 1.125rem;
    text-align: center;
}
.both-btn-elem {
    display: inline-flex;
    gap: 32px; 
}
.btn-filled-purple,
.btn-filled-purple:active,
.btn-filled-purple:visited,
.btn-filled-purple:focus {
    text-decoration: none;
    border: 1px solid var(--color-primary-narayana);
    border-radius: 100px;
    padding: 10px 24px;
    background: var(--color-primary-narayana);
    color: var(--color-shades-white);
    transition: background 0.3s, border 0.3s, color 0.3s;
}

.btn-filled-purple:hover {
    background: var(--color-shades-white);
    border: 1px solid var(--color-primary-narayana);
    color: var(--color-primary-narayana);
}
.btn-filled-gold,
.btn-filled-gold:active,
.btn-filled-gold:visited,
.btn-filled-gold:focus {
    text-decoration: none;
    border: 1px solid var(--color-primary-laxman);
    border-radius: 100px;
    padding: 10px 24px;
    background: var(--color-primary-laxman);
    color: var(--color-shades-white);
    transition: background 0.3s, border 0.3s, color 0.3s;
}

.btn-filled-gold:hover {
    background: var(--color-shades-white);
    border: 1px solid var(--color-primary-laxman);
    color: var(--color-primary-laxman);
}
.btn-filled-gold-icon,
.btn-filled-gold-icon:active,
.btn-filled-gold-icon:visited,
.btn-filled-gold-icon:focus {
    text-decoration: none;
    border: 1px solid var(--color-primary-laxman);
    border-radius: 100px;
    padding: 10px 24px;
    background: var(--color-primary-laxman);
    color: var(--color-shades-white);
    transition: background 0.3s, border 0.3s, color 0.3s;
}

.btn-filled-gold-icon:hover {
    background: var(--color-shades-white);
    border: 1px solid var(--color-primary-laxman);
    color: var(--color-primary-laxman);
}
.btn-filled-gold-icon::after {
    content: "";
    width: 18px;
    height: 18px;
    display: block;
    background-image: url(../img/nara-add-icon-white.svg);
    transition: all .3s ease-out;
}
.btn-filled-gold-icon:hover::after {
    content: "";
    width: 18px;
    height: 18px;
    display: block;
    background-image: url(../img/nara-add-icon-gold.svg);
    transition: all .3s ease-out;
}
.btn-filter {
    text-decoration: none;
    border: 1px solid var(--color-primary-narayana);
    border-radius: 100px;
    padding: 10px 24px;
    background: var(--color-primary-narayana);
    color: var(--color-shades-white);
    transition: background 0.3s, border 0.3s, color 0.3s;
}
.btn-filter::after {
    content: "";
    width: 18px;
    height: 18px;
    display: block;
    background-image: url(../img/nara-icon-filter-01.svg);
    transition: all .3s ease-out;
}
.btn-filter::before {
    content: "";
    width: 18px;
    height: 18px;
    display: block;
    background-image: url(../img/nara-icon-filter-02.svg);
    transition: all .3s ease-out;
}
.btn-outlined-gold,
.btn-outlined-gold:active,
.btn-outlined-gold:visited,
.btn-outlined-gold:focus {
    text-decoration: none;
    border-radius: 100px;
    padding: 10px 24px;
    background: var(--color-shades-white);
    border: 1px solid var(--color-primary-laxman);
    color: var(--color-primary-laxman);
    transition: background 0.3s, border 0.3s, color 0.3s;
    background: transparent;

}
.btn-outlined-gold:hover {
    border: 1px solid var(--color-primary-laxman);
    background: var(--color-primary-laxman);
    color: var(--color-shades-white);
}

.btn-outlined-gold-icon,
.btn-outlined-gold-icon:active,
.btn-outlined-gold-icon:visited,
.btn-outlined-gold-icon:focus {
    text-decoration: none;
    border-radius: 100px;
    padding: 10px 24px;
    background: var(--color-shades-white);
    border: 1px solid var(--color-primary-laxman);
    color: var(--color-primary-laxman);
    transition: background 0.3s, border 0.3s, color 0.3s;
}

.btn-outlined-gold-icon:hover {
    border: 1px solid var(--color-primary-laxman);
    background: var(--color-primary-laxman);
    color: var(--color-shades-white);
}
.btn-outlined-gold-icon::after {
    content: "";
    width: 18px;
    height: 18px;
    display: block;
    background-image: url(../img/nara-add-icon-gold.svg);
    transition: all .3s ease-out;
}
.btn-outlined-gold-icon:hover::after {
    content: "";
    width: 18px;
    height: 18px;
    display: block;
    background-image: url(../img/nara-add-icon-white.svg);
    transition: all .3s ease-out;
}
.btn-text-gold,
.btn-text-gold:active,
.btn-text-gold:visited,
.btn-text-gold:focus {
    font-family: "Collier";
    font-size: 1.125rem;
    font-style: normal;
    font-weight: 275;
    line-height: 1.25rem;
    color: var(--color-primary-laxman);
}
.btn-text-gold:hover {
    color: var(--color-primary-narayana);
}
.btn-text-gold-icon,
.btn-text-gold-icon:active,
.btn-text-gold-icon:visited,
.btn-text-gold-icon:focus,
.btn-text-gold-back-icon,
.btn-text-gold-back-icon:active,
.btn-text-gold-back-icon:visited,
.btn-text-gold-back-icon:focus {
    font-family: "Collier";
    color: var(--color-primary-laxman);
}
.btn-text-gold-icon:hover,
.btn-text-gold-back-icon:hover {
    color: var(--color-primary-narayana);
}
.btn-text-gold-icon::after {
    content: "";
    width: 18px;
    height: 18px;
    display: block;
    background-image: url(../img/nara-add-icon-gold.svg);
    transition: all .3s ease-out;
}
.btn-text-gold-icon:hover::after {
    content: "";
    width: 18px;
    height: 18px;
    display: block;
    background-image: url(../img/nara-add-icon-purple.svg);
    transition: all .3s ease-out;
}
.btn-text-gold-back-icon::after {
    content: "";
    width: 18px;
    height: 18px;
    display: block;
    background-image: url(../img/nara-back-icon-gold.svg);
    transition: all .3s ease-out;
}
.btn-text-gold-back-icon:hover::after {
    content: "";
    width: 18px;
    height: 18px;
    display: block;
    background-image: url(../img/nara-back-icon-purple.svg);
    transition: all .3s ease-out;
}
.navigation-header-menu > .menu-item {
    padding: 9px 17px;
}
.navigation-header-menu-hamburger > .menu-item {
    padding: 10px 12px;
}
.navigation-header-menu > .menu-item > a,
.navigation-header-menu-hamburger > .menu-item > a {
    color: var(--color-primary-shiva-purple);
    text-align: center;
    font-family: "collier", sans-serif;
    font-size: 1.125rem;
    font-weight: 275;
    line-height: 1.25rem;
    cursor: pointer;
    position: relative;
    text-decoration: none;
}

.navigation-header-menu > .menu-item > a::after,
.navigation-header-menu-hamburger > .menu-item > a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0%;
    height: 1px;
    background-color: var(--color-primary-laxman);
    transition: width 0.3s ease-in-out;
}

.navigation-header-menu > .menu-item > a:hover::after,
.navigation-header-menu > .menu-item > a:focus::after,
.navigation-header-menu-hamburger > .menu-item > a:hover::after,
.navigation-header-menu-hamburger > .menu-item > a:focus::after {
    width: 100%;
}

.btn-link-underline,
.btn-link-underline:focus,
.btn-link-underline:visited  {
    color: var(--color-primary-narayana);
}
.btn-link-underline:hover{
    color: var(--color-primary-shiva-purple);
    border-bottom: 1px solid var(--color-primary-laxman);
    transition: color 0.3s;
}
.btn-link-underline:active{
    color: var(--color-primary-laxman);
    border-bottom: 1px solid var(--color-primary-laxman);
}
.btn-shiva-underline,
.btn-shiva-underline:hover,
.btn-shiva-underline:focus,
.btn-shiva-underline:visited,
.btn-shiva-underline:active {
    color: var(--color-primary-shiva-purple);
    transition: color 0.3s;
}
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul {
    margin: 0;
    text-wrap: pretty;
}
.h1 > span {
    white-space: nowrap
}
@media only screen and (max-width: 375px) {
    h1, .h1{
        font-family: "ivypresto-display", serif;
        font-size: 2.25rem;
        line-height: 2.75rem;
    } 
    h2, .h2{
        font-family: "ivypresto-display", serif;
        font-size: 2rem;
        line-height: 2.5rem;
    }
    h3, .h3{
        font-family: "ivypresto-display", serif;
        font-size: 1.5rem;
        line-height: 2rem;
    }
    h4, .h4{
        font-family: "ivypresto-display", serif;
        font-size: 1.5rem;
        line-height: 2rem;
    }
    h5, .h5{
        font-family: "ivypresto-display", serif;
        font-size: 1.25rem;
        line-height: 1.75rem;
    }
    h6, .h6,
    .mobile-16{
        font-family: "ivypresto-display", serif;
        font-size: 1rem;
        line-height: 1.5rem;
    }
    .p2 {
        font-family: "collier", sans-serif;
        font-size: 0.875rem;
        line-height: 1rem;
    }
    .home-testimonials-swiper-slide__text-content blockquote {
        font-family: "collier", sans-serif;
        font-size: 1rem;
        line-height: 1.25rem;
    }
    .both-btn-elem {
        display: inline-flex;
        gap: 16px; 
    }
    .btn, .btn:visited  {
        font-size: 1rem;
        line-height: 1.25rem;
    }
    .btn-filled-purple,
    .btn-filled-purple:active,
    .btn-filled-purple:focus,
    .btn-filled-gold,
    .btn-filled-gold:active,
    .btn-filled-gold:focus,
    .btn-filled-gold-icon,
    .btn-filled-gold-icon:active,
    .btn-filled-gold-icon:focus,
    .btn-outlined-gold,
    .btn-outlined-gold:active,
    .btn-outlined-gold:focus,
    .btn-outlined-gold-icon,
    .btn-outlined-gold-icon:active,
    .btn-outlined-gold-icon:focus {
        padding: 10px 20px;
    }

    .container {
        max-width: calc(100vw - 32px);
    }
}
@media only screen and (min-width: 375px) {
    h1, .h1{
        font-family: "ivypresto-display", serif;
        font-size: 2.25rem;
        line-height: 2.75rem;
    } 
    h2, .h2{
        font-family: "ivypresto-display", serif;
        font-size: 2rem;
        line-height: 2.5rem;
    }
    h3, .h3{
        font-family: "ivypresto-display", serif;
        font-size: 1.5rem;
        line-height: 2rem;
    }
    h4, .h4{
        font-family: "ivypresto-display", serif;
        font-size: 1.5rem;
        line-height: 2rem;
    }
    h5, .h5{
        font-family: "ivypresto-display", serif;
        font-size: 1.25rem;
        line-height: 1.75rem;
    }
    h6, .h6,
    .mobile-16{
        font-family: "ivypresto-display", serif;
        font-size: 1rem;
        line-height: 1.5rem;
    }
    .p2 {
        font-family: "collier", sans-serif;
        font-size: 0.875rem;
        line-height: 1rem;
    }
    .home-testimonials-swiper-slide__text-content blockquote {
        font-family: "collier", sans-serif;
        font-size: 1rem;
        line-height: 1.25rem;
    }
    .both-btn-elem {
        display: inline-flex;
        gap: 16px; 
    }
    .btn, .btn:visited  {
        font-size: 1rem;
        line-height: 1.25rem;
    }
    .btn-filled-purple,
    .btn-filled-purple:active,
    .btn-filled-purple:focus,
    .btn-filled-gold,
    .btn-filled-gold:active,
    .btn-filled-gold:focus,
    .btn-filled-gold-icon,
    .btn-filled-gold-icon:active,
    .btn-filled-gold-icon:focus,
    .btn-outlined-gold,
    .btn-outlined-gold:active,
    .btn-outlined-gold:focus,
    .btn-outlined-gold-icon,
    .btn-outlined-gold-icon:active,
    .btn-outlined-gold-icon:focus {
        padding: 10px 20px;
    }

    .container {
        max-width: calc(100vw - 32px);
    }
}

@media only screen and (min-width: 720px) {
    
    .btn, .btn:visited {
        font-size: 1rem;
    }

    .container {
        margin: 0 auto;
        max-width: calc(100vw - 64px);
    }
    .p2 {
        font-family: "collier", sans-serif;
        font-size: 1rem;
        line-height: 1.25rem;
    }
    .home-testimonials-swiper-slide__text-content blockquote p {
        font-size: 1.125rem;
        line-height: 1.25rem;
    }
    .both-btn-elem {
        flex-wrap: wrap;
    }
}

@media only screen and (min-width: 1024px) {
    .both-btn-elem {
        display: inline-flex;
        gap: 32px; 
    }


}

@media only screen and (min-width: 1440px) {
    .d1{
        font-family: "ivypresto-display", serif;
        font-size: 6.25rem;
        font-weight: 300;
        line-height: 6.25rem;
    }
    h1, .h1{
        font-family: "ivypresto-display", serif;
        font-size: 4rem;
        line-height: 4rem;
    } 
    h2, .h2{
        font-family: "ivypresto-display", serif;
        font-size: 2.25rem;
        line-height: 2.75rem;
    }
    h3, .h3{
        font-family: "ivypresto-display", serif;
        font-size: 1.75rem;
        line-height: 2.5rem;
    }
    h4, .h4{
        font-family: "ivypresto-display", serif;
        font-size: 1.625rem;
        line-height: 2.25rem;
    }
    h5, .h5{
        font-family: "ivypresto-display", serif;
        font-size: 1.5rem;
        line-height: 2rem;
    }
    h6, .h6{
        font-family: "ivypresto-display", serif;
        font-size: 1.25rem;
        line-height: 1.75rem;
    }
    .both-btn-elem {
        display: inline-flex;
        gap: 32px; 
    }
    .btn, .btn:visited {
        font-size: 1.125rem;
        font-weight: 275;
        line-height: 1.25rem;
    }
    .btn-filled-purple,
    .btn-filled-purple:active,
    .btn-filled-purple:focus,
    .btn-filled-gold,
    .btn-filled-gold:active,
    .btn-filled-gold:focus,
    .btn-filled-gold-icon,
    .btn-filled-gold-icon:active,
    .btn-filled-gold-icon:focus,
    .btn-outlined-gold,
    .btn-outlined-gold:active,
    .btn-outlined-gold:focus,
    .btn-outlined-gold-icon,
    .btn-outlined-gold-icon:active,
    .btn-outlined-gold-icon:focus {
        padding: 10px 24px;
    }
    .container {
        margin: 0 auto;
        max-width: calc(100vw - 224px);

    }
}

@media only screen and (min-width: 1600px) {}

@media screen and (min-width: 1920px) {
    html {
        font-size: 16px;
    }
    .container {
        margin: 0 auto;
        max-width: calc(100vw - 224px);

    }
}