/*--------------------------------------------------------------

This is main CSS file that contains custom style rules used in this template

--------------------------------------------------------------*/

/*------------------------------------------------

CSS STRUCTURE:



1. VARIABLES

2. GENERAL TYPOGRAPHY

font-family: 'Playfair Display', serif;

font-family: 'Roboto', sans-serif;



--------------------------------------------------------------*/

body {

    --heading-font: "Playfair Display", serif;

    --heading-font-weight: 500;

    --heading-color: var(--bs-dark);

    --heading-line-height: 1.24;



    --swiper-theme-color: var(--bs-primary);



    --custom-easing: cubic-bezier(.17, .67, .83, .67);



    --background-color: #F3EBEB;



    --secondary-font: "Times New Roman", sans-serif;



    /* bootstrap */

    --bs-body-font-family: "Figtree", sans-serif;

    --bs-body-font-size: 1.125rem;

    --bs-body-font-weight: 400;

    --bs-body-line-height: 1.7;

    --bs-body-color: #555555;

    --bs-body-color-rgb: 85, 85, 85;



    --bs-primary: #e5aabc;

    --bs-primary-dark: #e5aabccc;

    --bs-secondary: #6b7280;

    --bs-black: #111;

    --bs-light: #fbf8fa;

    --bs-pink: #f8eff3;

    

    --bs-dark: #304248;

    --bs-gray: #9aa1a7;

    --bs-gray-dark: #51565b;

    

    --bs-primary-rgb: 117, 149, 137;

    --bs-primary-dark-rgb: 74, 92, 85;

    --bs-secondary-rgb: 235, 244, 241;

    --bs-black-rgb: 17, 17, 17;

    --bs-light-rgb: 241, 241, 240;

    --bs-dark-rgb: 48, 66, 72;



    --bs-link-color: var(--bs-dark);

    --bs-link-color-rgb: 17, 17, 17;

    --bs-link-decoration: underline;

    --bs-link-hover-color: var(--bs-primary);

    --bs-link-hover-color-rgb: 17, 17, 17;

}



.display-1,

.display-2,

.display-3,

.display-4,

.display-5,

.display-6,

h1,

.h1,

h2,

.h2,

h3,

.h3,

h4,

.h4,

h5,

.h5,

h6,

.h6 {

    font-family: var(--heading-font);

    font-weight: var(--heading-font-weight);

    color: var(--heading-color);

    line-height: var(--heading-line-height);

    text-transform: capitalize;

}



a {

    text-decoration: none;

    transition: all 0.3s ease-out;

    color: inherit;

}



.secondary-heading {

    color: var(--bs-primary);

    font-family: 'Roboto', sans-serif;

    font-style: normal;

    font-weight: 400;

    line-height: 2rem;

    letter-spacing: 0.3rem;

    text-transform: uppercase;

}



.secondary-font {

    font-family: var(--secondary-font);

    font-size: 8rem;

}



.padding-small{

  padding-top: 3em;

  padding-bottom: 3em;

}











/* Dropdown */

.dropdown-menu {

    --bs-dropdown-border-radius: 0;

    --bs-dropdown-border-width: 0;

}



.dropdown-item {

    --bs-dropdown-item-padding-y: 0.25rem;

    --bs-dropdown-item-padding-x: 1rem;

    --bs-dropdown-link-color: var(--bs-black);

    --bs-dropdown-item-border-radius: 0;

}



.dropdown-item.active,

.dropdown-item:active {

    --bs-dropdown-link-active-color: var(--bs-light);

    --bs-dropdown-link-active-bg: var(--bs-black);

}



/* list group */

.list-group-item {

    --bs-list-group-item-padding-x: 0;

    --bs-list-group-border-width: 0;

}



/* btn */

.btn {

    --bs-btn-border-radius: 0;

}



.btn-primary {

    border-radius: 25px;

    transition: 0.3s ease-in;

    --bs-btn-color: #fff;

    --bs-btn-bg: var(--bs-primary);

    --bs-btn-border-color: var(--bs-primary);

    --bs-btn-hover-color: #fff;

    --bs-btn-hover-bg: var(--bs-primary-dark);

    --bs-btn-hover-border-color: var(--bs-primary-dark);

    --bs-btn-focus-shadow-rgb: 49, 132, 253;

    --bs-btn-active-color: #fff;

    --bs-btn-active-bg: var(--bs-secondary);

    --bs-btn-active-border-color: var(--bs-secondary);

    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);

    --bs-btn-disabled-color: #ddd;

    --bs-btn-disabled-bg: var(--bs-primary);

    --bs-btn-disabled-border-color: var(--bs-primary);

}



.btn-outline-primary {

    border-radius: 25px;

    transition: 0.3s ease-in;

    --bs-btn-color: var(--bs-primary);

    --bs-btn-border-color: var(--bs-primary);

    --bs-btn-hover-color: #fff;

    --bs-btn-hover-bg: var(--bs-primary);

    --bs-btn-hover-border-color: var(--bs-primary);

    --bs-btn-focus-shadow-rgb: 13, 110, 253;

    --bs-btn-active-color: #fff;

    --bs-btn-active-bg: var(--bs-primary);

    --bs-btn-active-border-color: var(--bs-primary);

    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);

    --bs-btn-disabled-color: var(--bs-primary);

    --bs-btn-disabled-bg: transparent;

    --bs-btn-disabled-border-color: var(--bs-primary);

    --bs-gradient: none;

}



/* breadcrumb */

.breadcrumb {

    --bs-breadcrumb-item-padding-x: 1em;

}



/* text white */

.text-white {

    --heading-color: var(--bs-light);

    --bs-breadcrumb-item-active-color: var(--bs-light);

    --bs-breadcrumb-divider-color: var(--bs-light);

    --bs-link-color-rgb: var(--bs-light-rgb);

    --bs-link-hover-color-rgb: var(--bs-light-rgb);

}



.text-white .nav-link {

    --bs-nav-link-color: var(--bs-light);

    --bs-nav-link-hover-color: var(--bs-light);

    --bs-nav-link-active-color: var(--bs-light);

    --bs-navbar-active-color: var(--bs-light);

}



/* accordion */

.accordion {

    --bs-accordion-border-width: 0;

    --bs-accordion-border-radius: 0;

    --bs-accordion-inner-border-radius: 0;

    --bs-accordion-btn-padding-x: 0;

    --bs-accordion-btn-padding-y: 0.1rem;

    --bs-accordion-btn-color: var(--bs-dark);

    --bs-accordion-btn-bg: transparent;

    --bs-accordion-btn-focus-border-color: var(--bs-dark);

    --bs-accordion-btn-focus-box-shadow: none;

    --bs-accordion-body-padding-x: 0;

    --bs-accordion-body-padding-y: 0.1rem;

    --bs-accordion-active-color: transparent;

    --bs-accordion-active-bg: transparent;

}



/* form control */

.form-control:focus {

    border-color: #ccc;

    box-shadow: 0 0 0 0.25rem rgba(200, 200, 200, .25);

}



.bg-light{

  background-color: var(--bs-light);

}



.bg-pink{

  background-color: var(--bs-pink);

}



.pink{

  background-color: #f7e8ed;

}

  .green{

  background-color: #9ff297;

}



.blue{

  background-color: #eaf1f4;

}



.yellow{

  background-color: #f5edc7;

}



.red{

  background-color: #f4b4b4;

}







body{

  font-family: "Figtree", sans-serif;

  font-optical-sizing: auto;

  font-weight: 400;

  font-style: normal;

}





.btn{

  font-size: 18px;

  padding: 12px 32px;

  border-radius: 25px;

  box-shadow: 

    0 8px 20px -6px rgba(0, 0, 0, 0.12),

    0 4px 8px -4px rgba(0, 0, 0, 0.08);

}



.hr-style-1 {

  border: none;

  height: 2px;

  background: linear-gradient(to right, #fff, #00c6ff);

}



.hr-style-2 {

  border: none;

  height: 5px;

  width: 200px;

  margin: 20px auto;

  border-radius: 2px;



  background: linear-gradient(

    to right,

    rgba(229, 170, 188, 0.8) 0%,

    #e5aabc 25%,

    #65d6ff 60%,

    rgba(101, 214, 255, 0.6) 80%,

    transparent 100%

  );

}



.navbar{

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  z-index: 9999;

}



.navbar .nav-link{

  color: #fff;

  font-size: 17px;

}



.navbar-brand img{

  max-width: 150px;

  height: auto;

}

.contact-details{

  color: #fff;

}

.style1-gradient{

  background: linear-gradient(to bottom, #d6a1aa, #e0c2c7, #a9c3c8);

}

.pink-gradient {

  background-image: linear-gradient(

    to right,

    rgba(229, 170, 188, 1) 0%,

    rgba(229, 170, 188, 1) 20%,

    rgba(229, 170, 188, 0.6) 60%,

    rgba(229, 170, 188, 0.2) 85%,

    rgba(229, 170, 188, 0) 100%

  );

}

.home-hero{

  background-image: url(../img/hero-desktop.jpg);

  height: 100vh;

  background-size: cover;

  background-position: 350px center;

  position: relative;

}

.home-hero .pink-gradient{

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  z-index: 1;

}

.home-hero .hero-caption{

  color: #374151;

  margin-left: 30px;

  margin-top: 200px;

  max-width: 640px;

}

.home-hero .hero-caption h1{

  font-size: 48px;

  background-color: rgba(255, 255, 255, 0.6);

  padding: 10px;

  border-radius: 10px;

}

.home-hero .hero-caption h4{

  color: #fff;

  font-size: 30px;

}

h2, .h2{

  font-size: 48px;

}



.hero-inside{

  background-image: url(../img/gradient.png);

  height: 19vh;

}



.hero-gradient-bg{

  width: 100%;

  height: 170px;

}



.list-dics {

  list-style: none;

  padding-left: 1rem;

}



.list-dics li {

  position: relative;

}



.list-dics li::before {

  content: "";

  position: absolute;

  left: -1rem;

  top: 0.6em;

  width: 8px;

  height: 8px;

  background-color: #e5aabc;

  border-radius: 50%;

}



.list-dics-blue li::before{

  background-color: #9fd6dd !important;

}



.list-two-col {

  display: grid;

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

  gap: 8px 24px;

}


.list-three-col {

  display: grid;

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

  gap: 8px 24px;

}



.box-choose{

  background: #fff;

  border-color: rgba(243, 244, 246, 0.7);

  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);

  padding: 30px 20px;

  text-align: center;

  font-size: 16px;

  border-radius: 15px;

  height: 100%;

}



.box-choose h3{

  font-size: 20px;

}



.box-choose-icon{

  font-size: 32px;

}

.webform{

  background: #fff;

  padding: 30px;

  border-radius: 15px;

}



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



    .hamburger,

    .kebab-toggler,

    .navbar .submenu-button,

    .social-menu {

        display: none;

    }



    .for-mobile{

        display: none !important;

    }



    .navbar.active-scrolled{

        background: linear-gradient(to bottom, #d6a1aa, #e0c2c7, #a9c3c8);

        position: fixed;

        top: 0;

        left: 0;

        width: 100%;

    }



    .navbar.active-scrolled .navbar-brand img{

        max-width: 100px;

    }



}

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

    .navbar .nav-link{

        font-size: 14px;

        padding: 20px 6px;

    }

}

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

    .hamburger {

        padding: 10px 15px;

        display: inline-block;

        cursor: pointer;

        transition-property: opacity, filter;

        transition-duration: .15s;

        transition-timing-function: linear;

        font: inherit;

        color: inherit;

        text-transform: none;

        background-color: transparent;

        border: 0;

        margin: 0;

        overflow: visible;

        position: absolute;

        top: 48%;

        right: 30px;

        z-index: 999;

        transform: translateY(-50%);

        margin-top: 5px;

    }



    .hamburger-box {

        width: 32px;

        height: 21px;

        display: inline-block;

        position: relative;

    }



    .hamburger-inner {

        display: block;

        top: 50%;

        margin-top: -1.5px;

    }



    .hamburger-inner,

    .hamburger-inner::before,

    .hamburger-inner::after {

        width: 32px;

        height: 3px;

        background-color: #fff;

        border-radius: 4px;

        position: absolute;

        transition-property: transform;

        transition-duration: .15s;

        transition-timing-function: ease;

    }



    .hamburger-inner::before,

    .hamburger-inner::after {

        content: "";

        display: block;

    }



    .hamburger-inner::before {

        top: -9px;

    }



    .hamburger-inner::after {

        bottom: -9px;

    }



    .hamburger--collapse .hamburger-inner {

        top: auto;

        bottom: 0;

        transition-duration: .13s;

        transition-delay: .13s;

        transition-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);

    }



    .hamburger--collapse .hamburger-inner::after {

        top: -18px;

        transition: top .2s .2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), opacity .1s linear;

    }



    .hamburger--collapse .hamburger-inner::before {

        transition: top .12s .2s cubic-bezier(0.33333, 0.66667, 0.66667, 1), transform .13s cubic-bezier(0.55, 0.055, 0.675, 0.19);

    }



    .hamburger--collapse.is-active .hamburger-inner {

        transform: translate3d(0, -9px, 0) rotate(-45deg);

        transition-delay: .22s;

        transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);

    }



    .hamburger--collapse.is-active .hamburger-inner::after {

        top: 0;

        opacity: 0;

        transition: top .2s cubic-bezier(0.33333, 0, 0.66667, 0.33333), opacity .1s .22s linear;

    }



    .hamburger--collapse.is-active .hamburger-inner::before {

        top: 0;

        transform: rotate(-90deg);

        transition: top .1s .16s cubic-bezier(0.33333, 0, 0.66667, 0.33333), transform .13s .25s cubic-bezier(0.215, 0.61, 0.355, 1);

    }



    .slide-out-nav {

        position: fixed;

        right: 0;

        bottom: 0;

        width: 100%;

        height: 20px;

        padding-right: 0 !important;

        background-color: #e5aabc;

        z-index: 999;

        visibility: hidden;

        opacity: 0;

        border: 0;

        transform: translateY(100%) perspective(1px);

        transition: height .8s ease-in-out;

        overflow-y: scroll;

        border: 0;

        border-radius: 0;

        text-align: center;

    }



    .slide-out-nav.nav-open {

        height: calc(100% - 120px);

        opacity: 1;

        transform: translateY(0) perspective(1px);

        visibility: visible;

        opacity: 1;

        padding-top: 30px !important;

        display: block !important;

    }



    .slide-out-nav .navbar-nav {

        width: 100%;

        padding-top: 30px;

    }



    .slide-out-nav .navbar-nav li {

        display: block;

        text-align: center;

        margin: 0;

    }



    .nav-container{

        max-width: 98%;

    }



    .navbar .nav-link{

        font-size: 16px;

        padding: 10px 15px;

    }



    .navbar-nav .nav-item .nav-link:before {

        position: relative;

        height: 1px;

        background-color: #fff;

        width: 50%;

    }



    .navbar-nav .nav-link .fas{

        color: #fff;

    }



    .navbar-nav .nav-link:hover,

    .navbar-nav .nav-link:focus,

    .navbar-nav .nav-link:active {

        color: #fff;

    }



    .slide-out-nav.fadeInDown {

        -webkit-animation-name: unset;

        animation-name: unset;

    }



    .navbar-nav .dropdown-menu {

        position: relative !important;

        display: block;

        text-align: center;

        background-color: #759589;

        padding-top: 16px;

        padding-bottom: 16px;

    }



    .navbar-nav .dropdown-menu li a,

    .navbar-nav .dropdown-menu li a:hover,

    .navbar-nav .dropdown-menu li a:focus,

    .navbar-nav .dropdown-menu li a:active {

        color: #fff;

        text-transform: capitalize;

    }



    .social-menu-wrap {

        margin-bottom: 60px;

        background-color: transparent;

        box-shadow: unset;

    }



    .social-menu {

        color: #ffffff;

        background: transparent;

        display: none;

        text-align: center;

        z-index: 9;

        padding-top: 10px;

    }



    .social-menu.menu-on {

        display: block;

        position: fixed;

        width: 100%;

        left: 0;

        top: 105px;

    }



    .social-menu li {

        position: relative;

        padding: 10px 40px;

    }



    .social-menu .contact-info {

        margin-bottom: 0;

    }



    .social-menu .contact-info strong {

        display: block;

        font-size: 18px;

        font-weight: 700;

        color: #ffffff;

    }



    .social-menu .contact-info span {

        color: #759589;

        text-transform: lowercase;

    }



    .social-menu .icon {

        color: #759589;

    }



    .socmedia {

        margin-top: 15px;

        background-color: transparent;

    }



    .socmedia .social-info {

        padding: 8px 15px;

    }



    .socmedia .social-info a {

        color: #ffffff;

        border-radius: 50%;

        width: 38px;

        height: 38px;

        line-height: 14px;

        text-align: center;

        display: inline-block;

        background-color: #759589;

    }



    .socmedia .social-info a i {

        position: relative;

        top: 3px;

        left: -1px;

    }







    .navbar .submenu-button {

        color: #fff;

        display: inline-block;

        width: auto;

        height: 50px;

        line-height: 50px;

        text-align: center;

        z-index: 10000;

        position: absolute;

        top: 2px;

        right: 15px;

        background-color: var(--bs-nav-link-color);

        padding: 2px 12px;

    }



    .navbar .dropdown-toggle::after{

        display: none;

    }





    .for-desktop{

        display: none !important;

    }



    .navbar-brand img{

      max-width: 100px;

    }



    .hero-gradient-bg{

      height: 120px;

    }



    body.nav-open {

        overflow: hidden;

        margin: 0;

        touch-action: none;

        -ms-touch-action: none;

        height: 100vh;

    }



    .home-hero .hero-caption{

        max-width: 90%;

        margin: 170px auto 60px;

    }

}

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

    footer{

        font-size: 14px;

        text-align: center;

    }

    h2, .h2 {

        font-size: 36px;

    }

}