/*
Theme Name: Hailey - Life Coach HTML Website Template
Theme URI: https://templatesjungle.com/
Author: Template Jungle
Author URI: https://templatejungle.com/
Description: Hailey is specially designed product packaged for Life Coach by Templates Jumgle.
Version: 1.1
*/

/*--------------------------------------------------------------
This is main CSS file that contains custom style rules used in this template
--------------------------------------------------------------*/
/*------------------------------------------------
CSS STRUCTURE:

1. VARIABLES
2. GENERAL TYPOGRAPHY
font-family: "Rochester", cursive;
font-family: "Poppins", sans-serif;

--------------------------------------------------------------*/
body {
    --heading-font: "Rochester", cursive;
    --heading-font-weight: 400;
    --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: "Rochester", cursive;

    /* bootstrap */
    --bs-body-font-family: "Poppins", sans-serif;
    --bs-body-font-size: 1.25rem;
    --bs-body-font-weight: 400;
    --bs-body-line-height: 1.7;
    --bs-body-color: #555555;
    --bs-body-color-rgb: 85, 85, 85;

    --bs-primary: #694E38;
    --bs-primary-dark: 155, 113, 80;
    --bs-secondary: #d6d6d2;
    --bs-black: #111;
    --bs-light: #F1F1F0;
    --bs-dark: #212529;
    --bs-gray: #9aa1a7;
    --bs-gray-dark: #51565b;

    --bs-primary-rgb: 105, 78, 56;
    --bs-secondary-rgb: 214, 214, 210;
    --bs-black-rgb: 17, 17, 17;
    --bs-light-rgb: 241, 241, 240;
    --bs-dark-rgb: 33, 37, 41;

    --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: #694E38;
    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: 7rem;
}

.padding-large {
    padding-top: 20rem;
}

.padding-medium {
    padding-top: 9rem;
    padding-bottom: 9rem;
}

.padding-medium-2 {
    padding-top: 14rem;
}

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

    .secondary-font {
        font-size: 5rem;
    }

    .padding-large {
        padding-top: 18rem;
    }

    .padding-medium {
        padding-top: 5rem;
        padding-bottom: 5rem;
    }

    .padding-medium-2 {
        padding-top: 12rem;
    }
}

/* 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: 0.625rem;
    text-transform: uppercase;
    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: #694E38;
    --bs-btn-hover-border-color: #694E38;
    --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: #fff;
    --bs-btn-disabled-bg: var(--bs-primary);
    --bs-btn-disabled-border-color: var(--bs-primary);
}

.btn-outline-primary {
    border-radius: 0.625rem;
    text-transform: uppercase;
    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);
}

/* dark theme */
[data-bs-theme=dark] {
    color-scheme: dark;

    --heading-color: #fff;
    --bs-link-color: #CCCCCC;
    --bs-link-hover-color: var(--bs-primary);
    --bs-link-color-rgb: 204, 204, 204;
    --bs-link-hover-color-rgb: 131, 169, 172;
    --bs-body-color: #d1d1d1;
    --bs-body-bg: #111;
    --bs-body-bg-rgb: 17, 17, 41;
}

[data-bs-theme=dark] .dropdown-item {
    --bs-dropdown-link-color: var(--bs-light);
    --bs-dropdown-link-hover-color: var(--bs-white);
}

[data-bs-theme=dark] .bg-white,
[data-bs-theme=dark] .bg-light {
    --bs-bg-opacity: 0.1;
}


/* - Billboard Section
--------------------------------------------------------------*/

#billboard .text-content {
    position: absolute;
    top: 30vh;
    z-index: 2;
}

.billbord-section {
    width: 50%;
}

/* button border */
a.border-animation {
    color: var(--bs-black);
    display: inline-table;
    font-style: normal;
    font-weight: 400;
    line-height: 2.7rem;
    letter-spacing: 0.03rem;
}

a.border-animation:after {
    content: "";
    display: block;
    border-bottom: 1px solid var(--bs-black);
    width: 100%;
    transition: width 0.2s ease-out;
}

a.border-animation:hover:after {
    width: 80%;
}

@media screen and (max-width:767px) {
    #billboard .text-content {
        position: relative;
        left: 0;
        top: 0;
        margin-top: 280px;
        margin-bottom: 40px;
    }

    .billbord-section {
        width: 100%;
    }
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
      #billboard .text-content {
		top: 16vh;

    }
}


/* - Testimonial Section
--------------------------------------------------------------*/

#testimonial .text-content {
    position: absolute;
    left: calc(-30vw / 2);
    top: 12vh;
    max-width: 70%;
    z-index: 2;
}

@media screen and (max-width:1000px) {
    #testimonial .text-content {
        left: calc(-30vw / 2);
        max-width: 100%;
    }
}

@media screen and (max-width:766px) {
    #testimonial .text-content {
        position: static;
        left: calc(0vw / 2);
    }
}


/* - price Section
--------------------------------------------------------------*/
@media screen and (max-width:999px) {
    /* .price-padding {
        padding-top: 20rem;
    } */
}


/* - Insta Section
--------------------------------------------------------------*/
.padding-insta {
    padding-top: 30rem;
}

.instagram-item:hover:before,
.instagram-item:hover .icon-overlay {
    opacity: 1;
    cursor: pointer;
}

.icon-overlay {
    z-index: 1;
    cursor: pointer;
    opacity: 0;
    -moz-transition: 0.9s ease;
    -webkit-transition: 0.9s ease;
    transition: 0.7s ease;
}

@media screen and (max-width:400px) {
    .padding-insta {
        padding-top: 32rem;
    }
}


/* - Footer Section
--------------------------------------------------------------*/
svg.color {
    color: #111111;
    transition: 0.3s ease;

}

svg.color:hover {
    color: var(--bs-primary);
}

a.nav-link:hover {
    color: var(--bs-primary);

}


/*--------------------------------------------------------------
Course page style start
--------------------------------------------------------------*/
/* ------ Pagination ------*/


.pagination {
    --bs-pagination-padding-x: 0.75rem;
    --bs-pagination-padding-y: 0.375rem;
    --bs-pagination-font-size: 1rem;
    --bs-pagination-color: var(--bs-link-color);
    --bs-pagination-bg: var(--bs-body-bg);
    --bs-pagination-border-width: 0;
    --bs-pagination-border-color: var(--bs-border-color);
    --bs-pagination-border-radius: 0;
    --bs-pagination-hover-color: var(--bs-link-color);
    --bs-pagination-hover-bg: var(--bs-secondary);
    --bs-pagination-hover-border-color: var(--bs-border-color);
    --bs-pagination-focus-color: var(--bs-link-color);
    --bs-pagination-focus-bg: var(--bs-secondary);
    --bs-pagination-focus-box-shadow: none;
    --bs-pagination-active-color: var(--bs-link-color);
    --bs-pagination-active-bg: var(--bs-secondary);
    --bs-pagination-active-border-color: var(--bs-secondary);
    --bs-pagination-disabled-color: var(--bs-secondary-color);
    --bs-pagination-disabled-bg: var(--bs-secondary-bg);
    --bs-pagination-disabled-border-color: var(--bs-border-color);
    display: flex;
    padding-left: 0;
    list-style: none;
}




/*--------------------------------------------------------------
coming-soon page style start
--------------------------------------------------------------*/
/* ------ clock ------*/
#countdown-clock {
    font-size: 3rem;
    color: var(--bs-light);
    display: flex;
    justify-content: center;
}

#countdown-clock>.time {
    border-radius: 10px;
    padding: 20px;
    margin-right: 10px;
}

#countdown-clock .time>span {
    font-weight: 400;
}

#countdown-clock .time small {
    font-size: 1.1875rem;
    text-transform: uppercase;
    display: block;
}

@media screen and (max-width:465px) {
    #countdown-clock {
        font-size: 2rem;
    }

    #countdown-clock>.time {
        padding: 10px;
        margin-right: 2px;
    }

    #countdown-clock .time small {
        font-size: 0.8rem;
    }
}

/*--------------------------------------------------------------
Course-Details page style start
--------------------------------------------------------------*/
.nav-tabs .nav-item {
    transition: all 0.1s ease-in;
    border-radius: 0px;
}

.nav-tabs .nav-item.show .nav-link,
.nav-tabs .nav-link.active {
    color: var(--bs-primary);
    background-color: transparent;
    border-color: transparent;
    border-bottom: 4px solid var(--bs-primary);
    transition: all 0.1s ease-in;
}

.nav-tabs .nav-link:focus,
.nav-tabs .nav-link:hover {
    color: var(--bs-primary);
    isolation: isolate;
    border-color: transparent;
    border-bottom: 4px solid var(--bs-primary);
    transition: all 0.1s ease-in;
}

.table {
    --bs-table-bg: var(--bs-secondary);
    border-color: var(--bs-gray);
}

/*---- video section style start ----*/

/* color box style */
div#cboxOverlay {
    opacity: 0.8 !important;
}

.video .video-player {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

iconify-icon.video-icon {
    font-size: 35px;
    color: var(--bs-light);
    border-radius: 6.25rem;
    background: rgba(255, 255, 255, 0.35);
    transition: all 0.4s ease-in-out;
}

iconify-icon.video-icon:hover {
    font-size: 45px;
}