@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Quicksand';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/Quicksand/Quicksand-VariableFont_wght.ttf') format('truetype'), /* Safari, Android, iOS */
}
/* raleway-regular - latin */
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'Raleway';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/Raleway/Raleway-VariableFont_wght.ttf') format('truetype'), /* Safari, Android, iOS */
  }
@font-face {
    font-display: swap;
    font-family: 'GreatVibes';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/Great_Vibes/GreatVibes-Regular.ttf') format('truetype'), /* Safari, Android, iOS */
  }
@font-face {
    font-display: swap;
    font-family: 'Cinzel';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/Cinzel/Cinzel-VariableFont_wght.ttf') format('truetype'), /* Safari, Android, iOS */
  }
  @font-face {
    font-display: swap;
    font-family: 'PoiretOne';
    font-style: normal;
    font-weight: 400;
    src: url('../fonts/Poiret_One/PoiretOne-Regular.ttf') format('truetype'), /* Safari, Android, iOS */
  }

* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
/*
 * -- BASE STYLES --
 * Most of these are inherited from Base, but I want to change a few.
 */
:root {
    --color-light-gray: #f1f0ff;
    --color-light-beige: #ffeabd;
    --color-dark-lila: #58538bff;
    --color-light-lila: #ad9cecff;
    --color-bg-ultra-light-lila: #e9eaff;
    --color-bg-light-lila: #d1d1ff;
    --color-rose-lila: #cfb2e8ff;
    --color-text-brown: rgb(83, 53, 71);    ;
    --color-text-lila: #7e479dff;
    --color-brown: rgb(61, 48, 60);
    --color-black: #000000;
    --color-white: white;
    --font-family-heading2: Cinzel, sans-serif;
    --font-family-heading3:GreatVibes, sans-serif;
    --font-family-subheading2: PoiretOne, sans-serif;
    --font-family-pararagraph: Raleway, sans-serif;
    --font-family-pararagraph2: Quicksand, sans-serif;
    --body-font-size: 1rem;
    --body-font-weight: 500;
    --body-line-height: 1.5;
    --bs-border-width: 0;
}
/*
--color-red: #ea7186;
--color-yellow: #f2c76eff;
--color-rose: #e2d0eaff;
--color-nav-light-lila: #c3c2ff;
--color-nav-ultra-light-lila: #c9c6ff;
--color-mid-lila: #8078dfff;
*/
body {
    margin: 0;
    font-family: var(--font-family-heading);
    font-size: var(--body-font-size);
    font-weight: var(--body-font-weight);
    line-height: var(--body-line-height);
    color: var(--color-brown);
    text-align: var(--bs-body-text-align);
    background-color: var(--color-light-lila);
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    overflow-x: hidden;
    overflow-y: auto;
}

h1,
h2,
h3,
h4,
h5,
h6,
label {
    color: var(--color-dark-lila);
    font-family: var(--font-family-subheading2);
}

p, td, th, a, li {
    color: var(--color-black);
    font-family: var(--font-family-pararagraph2);
    font-size: 1.1rem;
}

@media (min-width: 768px) {
    p {
        font-size: 1.2rem;
    }
}

.btn-natte {
    --bs-btn-color: var(--color-text-lila);
    --bs-btn-bg: var(--color-light-gray);
    --bs-btn-border-color: var(--color-light-gray);
    --bs-btn-hover-color: var(--color-dark-lila);
    --bs-btn-hover-bg: var(--color-rose-lila);
    --bs-btn-hover-border-color:  var(--color-text-lila);
    --bs-btn-focus-shadow-rgb: 255, 208, 38;
    --bs-btn-active-color: var(--color-dark-lila);
    --bs-btn-active-bg: var(--color-rose-lila);
    --bs-btn-active-border-color: var(--color-text-lila);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    text-transform: uppercase;
    font-family: var(--font-family-subheading2);
    font-size: 1.1rem; 
    font-weight: 600;
    letter-spacing: 0.15em;
    display: inline-block;
    padding: 1rem 1rem;
    margin: 1rem 0rem 3rem;
    justify-content: center !important;
    border-radius: 0.2rem
}
@media (min-width: 768px) and (max-width: 1322px) {
    .btn-natte {
        font-size: 1.2rem; 
        margin: 3rem 0rem
    }
}
@media (min-width: 1322px) and (min-height: 500px){
    .btn-natte {
        margin: 3rem 2rem
    }
}

.navbar {
    --bs-navbar-toggler-focus-width: 0.15rem;
    justify-content: center
}
#mainNav {
    background-color: var(--color-light-lila);
    z-index: 2;
    padding: 0.7rem
}   
/*navbar navigation*/
.nav-flipper{
    width: 100%;
    #mobile{display: block}
    #desktop{display: none}
}
#nav_icon{
    #mobile {display: block}
    #desktop {display: none}
}
.nav-space{
    width: 100%;
    #mobile{display: block}
    #desktop{display: none}
}
@media (min-width: 993px){
    .nav-flipper{
        #mobile{display: none}
        #desktop{display: block}
    }
    #nav_icon{
        #mobile {display: none}
        #desktop {display: block}
    }
    .nav-space{
        width: 100%;
        #mobile{display: none}
        #desktop{display: block}
    }
}

#mainNav.svg-inline--fa {
    height: 1.5em;
    vertical-align: middle
}
#mainNav .navbar-nav {
    align-items: center;
    margin: 1.2rem 0rem
  }
#mainNav .navbar-toggler {
    position: absolute;
    right: 1rem;
    font-size: 2.5rem;
    font-family: var(--font-family-pararagraph);
    color: var(--color-light-gray);
    font-weight: 700;
    padding: 0.3rem
}
#mainNav .navbar-contact {
    color: var(--color-black);
    font-weight: 600;
    font-size: 1rem;
    margin-top: 0;
    margin-bottom: 0rem;
    text-decoration: none
}
#mainNav .navbar-brand {
    padding-bottom: 1rem
}
#mainNav .navbar-nav .nav-item .nav-link {
    font-family: var(--font-family-subheading2);
    font-size: 0.95rem;
    color: var(--color-text-brown);
    font-weight: 600;
    font-size: 1.2rem;
    letter-spacing: 0.08em
}
#mainNav .navbar-nav .nav-item .nav-link.active {
    color: var(--color-text-brown);
}
#mainNav .navbar-nav .nav-item .nav-link:hover {
    color: var(--color-black);
    font-weight: 600
    
}
#mainNav.dropdown-menu{
    height: 100%;
    --bs-dropdown-link-color: var(--color-black);
    --bs-dropdown-link-hover-color: var(--color-black);
    --bs-dropdown-link-hover-bg: var(--color-bg-light-lila);
    --bs-dropdown-link-active-color: var(--color-black);
    --bs-dropdown-link-active-bg: var(--color-bg-light-lila);
    border-radius: 0.2rem
}
#mainNav .dropdown-item{
    font-family: var(--font-family-subheading2);
    font-size: 0.95rem;
    color: var(--color-text-brown);
    font-weight: 600;
    font-size: 1.2rem;
    letter-spacing: 0.08em
}
.btn-social{
    height: 1.5rem;
    padding: 0rem 1.5rem
}
.btn-social img{
    max-height: 2.7rem
}
@media (min-width: 768px) {
    /* since it's expanding at lg */
    /* in order to display in 2 rows */
    .navbar-expand-lg {
      flex-flow: column nowrap
    }
    /* same logic as the navbar-toggler above */
    #mainNav .navbar-nav.upper-controls {
      position: absolute;
      right: 1rem;
      top: .5rem
    }
    .btn-social{
        padding: 0rem 2rem
    }
    #mainNav {
        padding: 1rem;
        border: none;
        transition: padding-top 0.3s ease-in-out, padding-bottom 0.3s ease-in-out
    }
    #mainNav .navbar-contact {
        font-size: 1.3rem;
        margin-top: 0;
        margin-bottom: 0rem;
        transition: font-size 0.3s ease-in-out
    }
    #mainNav .navbar-shrink .navbar-contact {
        font-size: 1.2em
    }
    #mainNav .navbar-nav .nav-item .nav-link {
        font-size: 1.2em;
        margin-right: 1rem
    }
    #mainNav .navbar-nav .nav-item:last-child {
        margin-right: 0
    }
    #desktop .dropdown-menu{
        background-color: var(--color-light-lila);
        border-color: var(--color-light-lila)
    }
}   

@media (min-width: 1322px) and (min-height: 500px){
    .btn-social{
        padding: 0rem 3rem
    }
    #nav_icon{
        #mobile {display: none}
        #desktop {display: block}
    }
}

#home {
    background-image: url("../../assets/images/3.jpg");
    background-repeat: no-repeat;
    background-attachment: scroll;
    background-position: top;
    background-size: cover;
    background-color: var(--color-bg-ultra-light-lila);
    min-height: 100% !important;
    height: 100%;
    margin-top: 2rem;
    max-width: 100%;
    position: relative;
    overflow: hidden;
    vertical-align: middle
}
header.container{
    position: relative;
    width: 100%;
    margin-top: 5rem;
    margin-bottom: 2rem;
    text-align: center;
    z-index: 1;
    color: var(--color-white)
}
#home .content{
    margin: 5rem 1rem 3rem
}
header .home-heading {
    font-size: 17vw;
    line-height: 1.3;
    margin: 3rem 0rem 2rem;
    color: var(--color-text-lila);
    font-family: var(--font-family-heading3)
}
header .home-subheading {
    margin-bottom: 4rem;
    font-size: 8vw;
    line-height: 1.5;
    padding: 1rem 0.7rem;
    font-weight: 600;
    font-family: var(--font-family-subheading2);
    color: var(--color-text-lila)
}
#home .btn-natte {
    margin: 2rem 2rem 1rem;
    justify-content: center !important;
    display: inline-block
}
@media (min-width: 768px) and (max-width: 1322px) {
    #home .content{
        margin: 14rem 0 5rem
    }
    header .home-heading {
        font-size: 6rem;
        line-height: 2.5rem;
        margin-bottom: 3rem
    }
    header .home-subheading {
        font-size: 2.5rem;
        line-height: 1.8rem;
        margin-bottom: 3rem
    }
    #home .btn-natte {
        margin: 4rem 0rem 2rem
    }
}
@media (min-width: 1322px) and (min-height: 500px){
    #home .content{
        margin: 18rem 0 5rem
    }
    header .home-heading {
        font-size: 8rem;
        line-height: 6rem;
        margin-bottom: 5rem
    }
    header .home-subheading {
        font-size: 3rem;
        line-height: 2rem;
        margin-bottom: 4rem
    }
    #home .btn-natte {
        margin: 5rem 0rem 3rem
    }
}

.page-section {
    padding: 1rem 0.5rem 1rem
}
#price-section{
    background-color: var(--color-bg-ultra-light-lila);
    padding: 5rem 1rem 1rem
}
@media (min-width: 768px) {
    #price-section{
        padding: 8rem 1rem 2rem
    }
}

#container{
    width: 90%;
    background-color: var(--color-light-gray)
}
.title {
    font-family: var(--font-family-heading3);
    color: var(--color-text-lila);
    font-size: 2rem;
    padding-top: 1.5rem;
    text-align: center
}
.page-section h2.section-heading{
    font-family: var(--font-family-subheading2);
    padding: 3rem 0rem 2rem;
    font-size: 2.3rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: 0.08em
}
.section-subheading{
    font-size: 2rem;
    font-family: var(--font-family-subheading2);
    margin-bottom: 1rem;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    text-decoration: none
}
@media (min-width: 768px) and (max-width: 1322px){
        #content .section-heading {
        font-size: 3rem;
        padding: 3rem 0rem
    }
    #content .section-subheading {
        margin-bottom: 2rem
    }
    .title {
        padding-top: 0.5rem;
        font-size: 2rem;
        text-align: left
    }
}
@media (min-width: 1322px) and (min-height: 500px){
    #content .section-heading {
        font-size: 4em;
        font-weight: 400
    }
    .title {
        font-size: 2.5rem;
        text-align: left
    }
}

/* Services */

#services {
    background-color: var(--color-bg-ultra-light-lila) ;
    padding-top: 3rem
}
.service-item {
    padding: 2rem 1rem
}
#services .section-heading{
    font-size: 3rem;
}
#services .section-subheading{
    color: var(--color-dark-lila);
    font-size: 1.8rem;
    font-weight: 500
}
.img-fluid-services {
    max-width: 55%;
    height: auto;
    border-radius: 0.2rem
}
#services .btn-natte{
    --bs-btn-color: var(--color-light-beige);
    --bs-btn-bg: var(--color-light-lila)
}

@media (min-width: 922px) and (min-height: 500px){
    .img-fluid-services {
        max-width: 80%;
        height: auto;
        border-radius: 0.2rem
    }
}

#about {
    background-color: #d1d1ff;
}
#about .section-heading{
    font-size: 2rem
}
#about .section-heading .smaller{
    font-size: 1.8rem
}

.about-item {
    padding: 1rem ;
}
#about li{
    text-align: left;
}
.md-order-last {
    order: 1 !important;
}
.about-description {
    font-size: 1.3rem;
    padding-bottom: 1rem;
    font-family: var(--font-family-pararagraph2)
}
.about-subheading{
    font-size: 1.7rem
}
#about-img {
    max-width: 90%;
    height: auto;
    padding: 30px
}
@media (min-width: 768px) {
    #about .section-heading{
        font-size: 3rem;
    }
	#about .section-heading .smaller{
    	font-size: 3rem;
	}
    .about-description {
        font-size: 1.5rem;
        width: 70%;
        margin-left: 15%
    }
    .about-subheading{
        font-size: 2rem
    }
    #about-img {
        margin-top: 2rem
    }
}

/* Price list */
#price-section .section-subheading {
    padding-top: 3.5rem;
    font-size: 3rem;
    line-height: 4rem
}
.price-subheading {
    font-family: var(--font-family-subheading2);
    font-size: 1.7rem;
    font-weight: 600;
    letter-spacing: 0.1rem;
    color: #212529;
    padding: 1.5rem 0rem
}
.service-description {
    font-family: var(--font-family-pararagraph2);
    font-size: 1.2rem;
    padding-bottom: 1rem
}
#price-table{
    font-family: var(--font-family-pararagraph2);
    font-weight: 500;
    color: var(--color-black)
}
#price-table .row{
    padding-bottom: 0.3rem;
}
#price-table .service-element {
    padding-top: 1rem;
    font-size: 1.4rem
}
#price-table .service-price {
    padding: 1rem 0rem 0rem 1rem;
    font-size: 1.2rem
}
#price-table .service-description {
    font-style: italic;
    font-size: 1.1rem;
    padding-bottom: 1rem
}
#price-section .btn-natte{
    --bs-btn-border-color: var(--color-dark-lila);
    margin-top: 3rem;
    margin-bottom: 4rem
}
.price-button{
    text-align: center !important;
}
@media (min-width: 768px) {
    #price-section .section-subheading {
        padding-top: 3rem
    }    
    #price-section .btn-natte{
        margin-left: 0rem
    }
    .price-button{
        text-align: left !important
    }
}

#campaign {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    padding-top: 2rem !important;
    padding-bottom: 1rem !important;
    padding-left: 2rem;
    padding-right: 2rem;
    text-align: center !important;
    background-color: var(--color-black);
    font-weight: bold;
    border-radius: 15px
}
#campaign .section-subheading {
    font-weight: bold;
    font-size: 1.5rem
}


#footer {
    background-color: var(--color-bg-ultra-light-lila);
    font-size: 1.5rem;
    font-family: var(--font-family-pararagraph);
    line-height: 1.6rem;
    font-weight: 600;
    overflow-x: hidden
}
#footer .title{
    font-size: 3rem;
    font-weight: 400;
    padding: 1.3rem 0 0;
	text-align: center
}
#footer .section-heading {
    color: var(--color-dark-lila);
    font-family: var(--font-family-subheading2);
    color: var(--color-dark-lila);
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 1.4rem;
    line-height: 1.8;
    padding: 0rem 0rem 1rem
}
.social-heading {
    font-size: 1.7rem; 
    padding: 0.5rem
}
.business-info-flipper {
    #mobile{display: block}
    #desktop{display: none}
}
#footer .small-heading {
    font-size: 1.1rem;
    padding-top: 1rem
}
.social{
    padding: 1rem 0
}
.social img{
    max-height: 2.5rem;
    margin: 0.2rem 1rem 1rem
}
.site-info {
    padding-top: 0.5rem;
    font-weight: 400;
    font-size: 0.80rem;
    color: var(--color-dark-lila);
    line-height: normal
}
.footer-contact{
    padding: 0.5rem
}
.footer-contact a{
    font-family: var(--font-family-subheading2);
    color: var(--color-dark-lila);
    text-decoration: none;
    font-weight: 600;
    font-size: 1.3rem;
    line-height: 1.8;
    text-transform: lowercase
}
/*
.map-div {
    height:100%;
    width:100%;
    max-width:100%;
    padding-top: 1.5rem;
    padding-bottom: 1rem;
}
#g-mapdisplay img {
    max-height:none;
    max-width:none!important;
    background:none!important
}
*/
@media (min-width: 768px) {
    #footer .section-heading {
        padding: 0.4rem
    }
    .business-info-flipper {
        #mobile{display: none}
        #desktop{display: block}
    }
    #footer .small-heading {
        font-family: var(--font-family-subheading2);
        font-size: 1.4rem;
        padding: 0
    }
	.social{
        padding: 1rem 0 0
    }
    .social-row{
        padding-top: 1rem;
    }
    .social img{
        max-height: 3rem;
        margin: 0.2rem 1rem 1rem
    }
    .site-info {
        font-weight: 500;
        font-size: 0.8rem;
        color: var(--color-dark-lila);
        line-height: 1.3rem
    }
	.footer-contact{
        line-height: 1.2;
    	padding: 1rem
	}
	.footer-contact a{
		font-size: 1.5rem
	}
    /*
    .map-div {
       padding-top: 0.5rem
    }*/
}
@media (min-width: 1000px) {
    .md-order-last {
    order: -1 !important}
}