/* font family Belleza */

@import url('https://fonts.googleapis.com/css2?family=Belleza&display=swap');

/* font family Karla */

@import url('https://fonts.googleapis.com/css2?family=Karla:wght@200;300;400;500;600;700;800&display=swap');

/* font-family: 'Kaushan Script', cursive; */

@import url('https://fonts.googleapis.com/css2?family=Kaushan+Script&display=swap');

/*
Theme Name:     Spa Blush
Theme URI:      
Author:         
Author URI:     
Description:    
Version:        1.0
License:        
License URI:    


	Navigation Files

	01. Reset
	02. Global Style
        [Table of Content]
	01. index Page Style
        section index Page
          1.1. Header Style
          1.2. hero section
          1.3. Beauty Spa & Relaxing Style
          1.4. Card Style
          1.5. Spa Treatment Style
          1.6. Features spa Style
          1.7. Saloon Services Style
          1.8. Testimonials Style
          1.9. How it Works Style
          1.10. Pricing plan Style
		  1.10. Pricing plan Style2
          1.11. Appointment Style
          1.12. Our Experts Style
          1.13. FAQS Style
          1.14. Video Presentation Style
          1.15. Blog & News Style
          1.16. Footer Style
  02. About Page Style
        section About Page
          2.1. hero Style
          2.2. Page About mission/vission Style
  03. Contact Page Style
        section Contact Page
          3.1. Contact Page address Style
          3.2. Contact Page Form Style
          3.3. Contact Page MAP Style
  04. Blog Page Style
  05. Testimonials Page Style
  06. Team Page Style
  07. 404/Comming Soon Page Style

*/


/* ===== 01. Reset Style ===== */

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    vertical-align: baseline;
}


/* HTML5 display-role reset for older browsers */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}

body {
    line-height: 1;
}

ol,
ul {
    list-style: none;
}

blockquote,
q {
    quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: "";
}

button:focus {
    outline: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

select::-ms-expand {
    display: none;
}

label {
    font-weight: normal;
}

iframe {
    width: 100%;
}


/* =====  End of 01. Reset  ====== */


/* ===== 02. Global Style ===== */

h1 {
    font-size: 50px;
    font-weight: 400;
    line-height: 56px;
    font-family: "Belleza", sans-serif;
}

h2 {
    font-size: 36px;
    font-weight: 400;
    line-height: 42px;
    font-family: "Belleza", sans-serif;
}

h3 {
    font-size: 26px;
    font-weight: 400;
    line-height: 32px;
    font-family: "Belleza", sans-serif;
}

h4 {
    font-size: 22px;
    font-weight: 400;
    line-height: 28px;
    font-family: "Belleza", sans-serif;
}

h5 {
    font-size: 18px;
    font-weight: 400;
    line-height: 24px;
    font-family: "Belleza", sans-serif;
}

h6 {
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    font-family: "Belleza", sans-serif;
}

p {
    font-size: 16px;
    font-weight: 400;
    line-height: 22px;
    font-family: "Karla", sans-serif;
}

button {
    font-size: 16px;
    font-weight: 400;
    line-height: 22px;
    padding: 16px 38px 16px 38px;
    font-family: "Karla", sans-serif;
}

a {
    font-size: 16px;
    font-weight: 400;
    line-height: 22px;
    padding: 16px 38px 16px 38px;
    display: block;
    transition: 0.2s linear;
    text-decoration: none;
    font-family: "Karla", sans-serif;
}

.tr-h1 {
    text-align: center;
    text-transform: capitalize;
    color: #efefef;
    z-index: 0;
    font-family: 'Kaushan Script', cursive;
    font-size: 90px;
    line-height: 85px;
    font-weight: 400;
}

@keyframes animation {
    0% {
        top: 0px;
    }
    50% {
        top: 10px;
    }
    100% {
        top: 0px;
    }
}


/* button hover with background */

.btn-hover1 {
    position: relative;
    border: 1px solid #ff6b74;
    color: #FFFFFF;
    z-index: 1;
    text-transform: uppercase;
    transition: all 0.4s ease;
}

.btn-hover1:hover {
    color: #ff6b74;
}

.btn-hover1::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    transition: all 0.4s ease;
    background-color: #ff6b74;
    z-index: -1;
    bottom: 0;
    left: 0;
}

.btn-hover1:hover::before {
    height: 0;
}


/* button hover without background */

.btn-hover2 {
    position: relative;
    text-transform: uppercase;
    color: #202c17;
    z-index: 1;
    transition: all 0.4s ease;
}

.btn-hover2:hover {
    color: #FFFFFF;
    border: 1px solid #ff6b74 !important;
}

.btn-hover2::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 0%;
    transition: all 0.4s ease;
    background-color: #ff6b74;
    z-index: -1;
    bottom: 0px;
    left: 0;
}

.btn-hover2:hover::before {
    height: 100%;
    /* background-color: #ff6b74; */
}

#backToTopBtn {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 30px;
    z-index: 10;
    padding: 17px 20px;
    border: 1px solid #ff6b74;
}


/* ===== End of 02. Global Style ===== */


/* ======== 1.1. Header Style ======== */

header {
    background-color: #DDCDBE;
    padding: 10px 0 10px 0 !important;
}

.navbar .nav-item .dropdown-menu {
    display: none;
    opacity: 0;
}

.navbar .dropdown:hover .dropdown-menu {
    display: block;
    width: 220px;
    padding: 15px 0px 15px 0;
    border: 1px solid #ebe8e8;
    border-radius: 10px;
    background-color: #f9f8f4;
    animation: opacity 0.4s ease-in-out 0.4s forwards;
}

@keyframes opacity {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.dropdown-menu li {
    display: block;
    position: relative;
    overflow: hidden;
    z-index: 1;
    padding: 10px 0;
}

.dropdown-menu li a:hover {
    color: #ffffff !important;
}

.dropdown-menu .dropdown-item::before {
    content: "";
    position: absolute;
    width: 100%;
    height: 0%;
    transition: all 0.3s ease-in;
    background: #ff6b74;
    z-index: -1;
    bottom: 0;
    left: 0;
}

.dropdown-menu .dropdown-item:hover::before {
    height: 100%;
    background: #ff6b74;
}

.navbar-collapse {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.navbar-collapse .gap-md-3 {
    height: 56px;
}

.navbar-nav a {
    font-size: 16px;
    font-weight: 400;
    line-height: 22px;
    color: #202c17;
}

.navbar-nav a.active {
    color: #ff6b74 !important;
    background-color: inherit;
}

.navbar-nav a:hover {
    color: #ff6b74;
    background: inherit;
}

header img {
    width: 100%;
}

.fa-headphones {
    font-size: 22px;
    color: #202c17;
}

.fa-headphones:hover {
    color: #ff6b74;
}

.navbar-collapse a {
    text-decoration: none;
}

.navbar-collapse h5 {
    color: #202c17;
}

.navbar-collapse h5:hover {
    color: #ff6b74;
}

.navbar-collapse .get {
    border: 1px solid #202c17;
}

.nav button {
    font-size: 22px;
    background-color: #ff6b74;
    color: white;
    border: none;
    padding: 10px 21px;
    border-radius: 10px;
    margin-bottom: 13px;
}

.nav button:hover {
    background-color: #ff8a91;
}

.nav {
    display: none !important;
    padding-left: 13px;
}
.nav a{
    padding: 14px 30px 14px 0;
}

/* sidebar */

.sidepanel::-webkit-scrollbar {
    width: 3px;
}

.sidepanel::-webkit-scrollbar-thumb {
    background: #3f582c;
    border-radius: 10px;
}

aside {
    background-color: white;
    z-index: 2;
}

aside a {
    padding: 0;
}

.sidebar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 20px;
}

.sidebar img {
    width: 100%;
}

.sidebar button {
    width: 44px;
    height: 35px;
    background-color: #ff6b74;
    border: none;
    border-radius: 5px;
    padding: 7px 12px 10px 12px;
    margin-bottom: 13px;
}

.sidebar button:hover {
    background-color: #ff8a91;
    color: white;
}

aside .nav-link {
    padding: 10px 0;
}

aside ul {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
}

aside li a {
    color: #202c17 !important;
    font-size: 16px;
    font-weight: 400;
    line-height: 22px;
}

aside li a.active {
    color: #ff6b74 !important;
}

aside li a:hover {
    color: #ff6b74 !important;
}

.dropdown-item:active {
    background-color: white;
}

.collapse_btn {
    display: flex;
    justify-content: space-between;
    flex-direction: row-reverse;
    margin-top: 12px;
}

.collapse_btn i {
    border: 1px solid #052a44;
    padding: 7px 8px;
    border-radius: 40px;
}

.collapse_btn i:hover {
    border: 1px solid #ff6b74;
}

.plus_collapse {
    margin: -47px 5px 0 0;
    height: 45px;
}

aside .pages {
    font-weight: 500;
    margin-top: 18px;
}

.sidepanel {
    width: 320px;
    position: fixed;
    height: 100vh;
    top: 0;
    left: -320px;
    ;
    overflow-x: hidden;
    transition: 0.5s;
    padding: 40px 20px 20px 20px;
}


/* ======== End of 1.1. Header Style ======== */


/* ======== 1.2. hero section ======== */

.hero {
    background-image: url("../Images/bg/web_title_bg.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding: 70px 0;
}

.hero img {
    width: 250px;
    height: auto;
    object-fit: cover;
    border-radius: 20px;
}

.hero img:hover {
    position: relative;
    animation-name: animation;
    animation-duration: 0.5s;
    animation-iteration-count: 2;
}

.hero .banner_img {
    display: flex;
    justify-content: end;
    gap: 44px;
}

.hero img[alt="web_title_1"] {
    margin-top: 120px;
}

.hero img[alt="web_title_2"] {
    margin-top: -26px;
}

.hero h1 {
    text-transform: capitalize;
    color: #202c17;
    width: 450px;
}

.hero p {
    color: #3f582c;
    width: 450px;
    margin: 20px 0;
}

.hero a {
    display: inline-block;
}


/* ======== End of 1.2. hero section ======== */


/* ======== 1.3. Beauty Spa & Relaxing Style ======== */

.beauty_spa {
    background-image: url("../Images/bg/buty_spa_bg.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding: 70px 0;
}

.beauty_spa .container div {
    display: flex;
    margin-top: 38px;
}

.beauty_spa span {
    margin-top: 60px;
    position: relative;
    z-index: 3;
    top: 20px;
}

.beauty_spa img {
    width: 77%;
    display: block;
    margin: auto;
    object-fit: cover;
}

.beauty_spa .d-flex figure:first-child {
    z-index: 1;
}

.beauty_spa img[alt="beauty_spa2"]:hover {
    position: relative;
    animation-name: animation;
    animation-duration: 0.5s;
    animation-iteration-count: 2;
}

.beauty_spa p {
    color: #737171;
    text-align: center;
    padding: 0 263px;
    margin-top: 3px;
}

.beauty_spa .container :nth-child(4) a:last-child {
    border: 1px solid transparent;
}


/* ======== End of 1.3. Beauty Spa & Relaxing Style ======== */


/* ======== 1.4. Card Style ======== */

.card3 {
    background-image: url("../Images/bg/card_bg.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding: 80px 0;
    display: flex;
    gap: 20px;
}

.card3 .card {
    padding: 60px 20px;
    border: 0px solid;
    filter: drop-shadow(0px 13px 50px rgba(0, 0, 0, 0.1));
    position: relative;
}

.card3 .card::before {
    content: '';
    position: absolute;
    background-color: #ff6b74;
    z-index: -1;
    top: 0;
    left: 0;
    width: 0%;
    height: 100%;
    transition: all 0.3s ease;
}

.card3 .card:hover::before {
    transition: all 0.3s ease;
    width: 100%;
}

.card3 div:nth-child(2)::before {
    width: 100%;
}

.card3 div:nth-child(2):hover:before {
    width: 0%;
}

.card3 div:nth-child(2):hover h3 {
    color: #202c17 !important;
}

.card3 div:nth-child(2):hover p {
    color: #737171 !important;
}

.card3 .card img {
    width: 40px;
    height: 50px;
}

.card3 .card h3 {
    color: #202c17;
    transition: all 0.3s ease;
}

.card3 .card p {
    color: #737171;
    word-break: break-all;
    transition: all 0.3s ease;
}

.card3 .card:hover h3 {
    color: white;
    transition: all 0.3s ease;
}

.card3 .card:hover p {
    color: white;
    transition: all 0.3s ease;
}

.card3 div:nth-child(2) h3 {
    color: white;
}

.card3 div:nth-child(2) p {
    color: white;
}

.card3 .card figure {
    margin: auto;
    background-color: white;
    width: 80px;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    border-radius: 50%;
}


/* ======== End of 1.4. Card Style ======== */


/* ======== 1.5. Spa Treatment Style ======== */

.spa_treatment {
    margin-top: 70px;
}

.treatment_para {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 40px;
}

.treatment h2 {
    color: #202c17;
    width: 400px;
    margin-top: -22px;
    z-index: 1;
    text-align: center;
}

.treatment p {
    color: #737171;
    text-align: center;
}

.treatment_img {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin: 3px 0 80px 0;
}

.treatment_img figure {
    margin-bottom: 1.5rem;
}

.treatment_img img:hover {
    position: relative;
    animation-name: animation;
    animation-duration: 0.5s;
    animation-iteration-count: 2;
}

img[alt="spa_treatment5"] {
    width: 100%;
    object-fit: cover;
}

img[alt="spa_rec"] {
    width: 100%;
    object-fit: cover;
}

img[alt="spa_leaf"] {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100px;
    object-fit: cover;
}

.treatment_img div:first-child {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.treatment_img div:nth-child(2) {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.treatment_img div:nth-child(3) {
    z-index: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.treatment_img div:nth-child(2) figure:last-child img {
    margin: -158px 0px 0 -172px;
    z-index: -1;
    position: relative;
}

.treatment_img div:last-child {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    z-index: 1;
}

.treatment_img div:last-child figure:first-child img {
    margin: -155px 0 0 -60px;
}

.treatment_img_card {
    background: #ffffff;
    box-shadow: 0px 13px 50px rgba(0, 0, 0, 0.1);
    position: relative;
    width: 90%;
    transition: background 0.3s, border 0.3s, box-shadow 0.3s;
    margin: -60px 0px 0px 0px;
    padding: 20px 0px 20px 15px;
}

.treatment_img_card:hover {
    background-color: #DDCDBE;
}

.treatment_img_card h3 {
    color: #202c17;
}

.treatment_img_card p {
    color: #737171;
    padding-right: 53px;
    text-align: left;
}


/* ======== End of 1.5. Spa Treatment Style ======== */


/* ======== 1.6. Features spa Style ======== */

.feature {
    background-image: url("../Images/bg/feature_bg.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.feature .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    padding: 80px 20px;
}

.feature h2 {
    color: #202c17;
    margin-top: -27px;
    z-index: 1;
}

.feature p {
    color: #737171;
}

.feature_card_main {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 40px;
}

.feature_card img {
    width: 70px;
    object-fit: cover;
}

.feature_card img:hover {
    position: relative;
    animation-name: animation;
    animation-duration: 0.5s;
    animation-iteration-count: 2;
}

.feature_card h3 {
    margin-bottom: 0;
}

.feature_card {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: white;
    width: 170px;
    min-height: 215px;
    padding: 0 20px;
}

.feature_btn {
    margin-top: 40px;
    display: flex;
}

.feature_btn a:last-child {
    border: 1px solid transparent;
}

.feature img[alt="feature5"] {
    width: 300px;
    border-radius: 20px;
    object-fit: cover;
}

.feature img[alt="feature5"]:hover {
    position: relative;
    animation-name: animation;
    animation-duration: 0.5s;
    animation-iteration-count: 2;
}


/* ======== End of 1.6. Features spa Style ======== */


/* ======== 1.7. Saloon Services Style ======== */

.saloon_para {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 70px;
}

.saloon_para h2 {
    color: #202c17;
    width: 470px;
    margin-top: -28px;
    text-align: center;
    z-index: 1;
}

.saloon_para p {
    padding: 0 10px;
    color: #737171;
    text-align: center;
}

.saloon_img {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin: 30px 0 40px 0;
}

.saloon_img figure {
    margin-bottom: 1.5rem;
}

.saloon_img img:hover {
    position: relative;
    animation-name: animation;
    animation-duration: 0.5s;
    animation-iteration-count: 2;
}

img[alt="saloon_treatment5"] {
    width: 100%;
    object-fit: cover;
}

img[alt="saloon_leaf"] {
    width: 100px;
    object-fit: cover;
}

img[alt="saloon_comb1"] {
    width: 100%;
    object-fit: cover;
    margin-top: 70px;
    position: relative;
    z-index: -1;
}

img[alt="saloon_comb2"] {
    width: 150px;
    object-fit: cover;
}

.saloon_img div:first-child {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
}

.saloon_img div:nth-child(2) {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.saloon_img div:nth-child(3) {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: -225px;
}

.saloon_img div:last-child {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.saloon_img_card {
    background: #ffffff;
    box-shadow: 0px 13px 50px rgba(0, 0, 0, 0.1);
    position: relative;
    width: 90%;
    transition: background 0.3s, border 0.3s, box-shadow 0.3s;
    margin: -60px 0px 0px 0px;
    padding: 20px 0px 20px 15px;
}

.saloon_img_card:hover {
    background-color: #DDCDBE;
}

.saloon_img_card h3 {
    color: #202c17;
}

.saloon_img_card p {
    color: #737171;
    padding-right: 53px;
    text-align: left;
}


/* ======== End of 1.7. Saloon Services Style ======== */


/* ======== 1.8. Testimonials Style ======== */

.team_testimonial {
    margin-top: -8px !important;
}

.testimonial {
    background-image: url("../Images//bg/testimonial_bg.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    margin-top: -217px;
    padding: 30px 0 80px 0;
}

.testimonial_para1 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 54px;
}

.testimonial_para1 h2 {
    color: #202c17;
    width: 470px;
    margin-top: -28px;
    text-align: center;
    z-index: 1;
}

.testimonial_para1 p {
    color: #737171;
    text-align: center;
}

.testimonial2 {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: -50px;
}

figure.snip1157 {
    position: relative;
    overflow: hidden;
    margin: 10px;
    padding: 0 10px;
    min-width: 220px;
    max-width: 400px;
    width: 100%;
    text-align: left;
    box-shadow: none !important;
}

figure.snip1157 img {
    max-width: 100%;
    border: 2px solid #ff6b74;
    vertical-align: middle;
    height: 90px;
    width: 90px;
    border-radius: 50%;
    margin: 82px 0 0 70px;
}

figure.snip1157 .testimonial_para {
    background-color: #edebeb;
    border: 1px solid #d9d9d9;
    display: block;
    box-shadow: 0px 13px 50px rgba(128, 123, 123, 0.1);
    border-radius: 20px;
    position: relative;
    padding: 37px 50px 30px 50px;
    min-height: 200px;
    margin-top: 54px;
    transition: 500ms;
}

figure.snip1157 .testimonial_para:hover {
    background: #ff6b74;
    color: white;
    transition: 500ms;
}

figure.snip1157 .testi_hov {
    background: #ff6b74;
    color: white;
}

figure.snip1157 .testi_hov:hover {
    background: inherit;
    color: #737171;
    transition: 500ms;
}

figure.snip1157 .arrow {
    top: 100%;
    width: 0;
    height: 0px;
    border-right: 0 solid transparent;
    border-left: 58px solid transparent;
    border-top: 75px solid #e6ecf1;
    margin: 0px;
    position: absolute;
    transition: 500ms;
}

.testimonial_para .arrow1 {
    border-top: 75px solid #ff6b74 !important;
}

.testimonial_para:hover .arrow1 {
    border-top: 75px solid #ffffff !important;
}

figure.snip1157 .testimonial_para:hover .arrow {
    border-top: 75px solid #ff6b74;
    transition: 500ms;
}

figure.snip1157 .author {
    position: absolute;
    bottom: 45px;
    padding: 0 10px 0 95px;
    margin: 0;
    -webkit-transform: translateY(50%);
    transform: translateY(50%);
}

figure.snip1157 .author h5 {
    margin: 0 0 0 88px;
    width: 100%;
    color: #202c17;
}

figure.snip1157 .author h6 {
    margin: 0 0 0 88px;
    color: #ff6b74;
}

.checked {
    color: orange;
}


/* ======== End of 1.8. Testimonials Style ======== */


/* ======== 1.9. How it Works Style ======== */

.works {
    position: relative;
    min-height: 100%;
}

.works .overly_para {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    min-height: 100%;
    background: #3f582c99;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 50px 10px;
}

.works img[alt="overly"] {
    width: 100%;
    height: 522px;
    object-fit: cover;
}

.overly_para h2 {
    width: 470px;
    color: #ffffff;
    margin-top: -25px;
    text-align: center;
    z-index: 1;
}

.overly_para p {
    color: #ffffff;
    padding: 0 30px;
    text-align: center;
}

.works .container div {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.works .container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    margin-top: 40px;
    padding: 0;
}

.works .container div img[alt="work_check"] {
    width: 80px;
}

.works .container div h3 {
    color: #ffffff;
    margin-top: -8px;
}

.slide {
    margin: -100px 10px 0 10px;
}

.slide_img img {
    width: 93% !important;
    height: 246px;
    object-fit: cover;
    margin: auto;
}

.fa-arrow-left,
.fa-arrow-right {
    background-color: rgb(126, 123, 123);
    padding: 10px 20px;
    font-size: 20px;
    border-radius: 10px;
}

.carousel-control-next,
.carousel-control-prev {
    z-index: 0;
}


/* ======== End of 1.9. How it Works Style ======== */


/* ======== 1.10. Pricing plan Style ======== */

.pricing_para {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 60px;
}

.pricing_para h2 {
    color: #202c17;
    margin-top: -23px;
    text-align: center;
    z-index: 1;
}

.pricing_para p {
    margin-bottom: 0;
    color: #737171;
    text-align: center;
}

.pricing_card {
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin: 40px 0;
}

.pricing1 {
    display: flex;
    justify-content: space-around;
    gap: 30px;
}

.pricing1 div {
    background: #ffffff;
    box-shadow: 0px 13px 50px rgba(0, 0, 0, 0.1);
    border-radius: 20px;
    width: 100%;
    padding: 30px;
    z-index: 1;
    position: relative;
}

.pricing1 div:hover h4 {
    color: #FFFFFF !important;
    transition: all 0.3s ease;
}

.pricing1 div:hover h6 {
    color: #FFFFFF !important;
    transition: all 0.3s ease;
}

.pricing1 div::before {
    content: '';
    border-radius: 20px;
    position: absolute;
    background-color: #FD01A1;
    z-index: -1;
    top: 0;
    left: 0;
    width: 0%;
    height: 100%;
    transition: all 0.3s ease;
}

.pricing1 div:hover::before {
    transition: all 0.3s ease;
    width: 100%;
}

.pricing1 div h4:first-child {
    color: #FD01A1;
    transition: all 0.3s ease;
}

.pricing1 div h6 {
    color: #737171;
    transition: all 0.3s ease;
}

.pricing1 div h4:last-child {
    color: #FD01A1;
    text-align: right;
    margin-top: -35px;
}

.pricing_card div:nth-child(3) {
    display: flex;
    justify-content: center;
}

.pricing_card div:last-child a:last-child {
    border: 1px solid transparent;
}


/* ======== End of 1.10. Pricing plan Style ======== */
/* ======== 1.10. Pricing plan Style2 ======== */

.pricing_para2 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 60px;
}

.pricing_para2 h2 {
    color: #202c17;
    margin-top: -23px;
    text-align: center;
    z-index: 1;
}

.pricing_para2 p {
    margin-bottom: 0;
    color: #737171;
    text-align: center;
}

.pricing_card2 {
    display: flex;
    flex-direction: column;
    gap: 30px;
    margin: 40px 0;
}

.pricing12 {
    display: flex;
    justify-content: space-around;
    gap: 30px;
}

.pricing12 div {
    background: #ffffff;
    box-shadow: 0px 13px 50px rgba(0, 0, 0, 0.1);
    border-radius: 20px;
    width: 100%;
    padding: 30px;
    z-index: 1;
    position: relative;
}

.pricing12 div:hover h4 {
    color: #FFFFFF !important;
    transition: all 0.3s ease;
}

.pricing12 div:hover h6 {
    color: #FFFFFF !important;
    transition: all 0.3s ease;
}

.pricing12 div::before {
    content: '';
    border-radius: 20px;
    position: absolute;
    background-color: #0099FF;
    z-index: -1;
    top: 0;
    left: 0;
    width: 0%;
    height: 100%;
    transition: all 0.3s ease;
}

.pricing12 div:hover::before {
    transition: all 0.3s ease;
    width: 100%;
}

.pricing12 div h4:first-child {
    color: #0099FF;
    transition: all 0.3s ease;
}

.pricing12 div h6 {
    color: #737171;
    transition: all 0.3s ease;
}

.pricing12 div h4:last-child {
    color: #FD01A1;
    text-align: right;
    margin-top: -35px;
}

.pricing_card div:nth-child(3) {
    display: flex;
    justify-content: center;
}

.pricing_card div:last-child a:last-child {
    border: 1px solid transparent;
}
/* ======== End of 1.10. Pricing plan Style2 ======== */



/* ======== 1.11. Appointment Style ======== */

.salon_serv {
    padding: 0 0 70px 0 !important;
    margin-top: -230px;
}

.appointment {
    background: linear-gradient( 0deg, #f9f8f4 27.69%, rgba(249, 248, 244, 0) 100%);
    padding: 70px 0;
}

.appointment img[alt="appointment_leaf"] {
    width: 100px;
    float: right;
    position: relative;
    right: 147px;
    margin-top: -97px;
    rotate: -93deg;
}

.appointment img[alt="appointment_leaf"]:hover {
    position: relative;
    animation-name: animation;
    animation-duration: 0.5s;
    animation-iteration-count: 2;
}

.appointment img[alt="appointment"] {
    width: 100%;
}

.appointment_img .tr-h2 {
    text-align: center;
    text-transform: capitalize;
    color: #efefef;
    z-index: 0;
    font-family: 'Kaushan Script', cursive;
    font-size: 50px;
    line-height: 44px;
    font-weight: 400;
    margin: auto;
    display: block;
}

.appointment_img {
    display: flex;
    justify-content: center;
    align-items: center;
}

.appointment_img h2 {
    color: #202c17;
    margin-top: -18px;
    text-align: center;
}

.appointment form {
    background: #ffffff;
    filter: drop-shadow(0px 13px 50px rgba(0, 0, 0, 0.1));
    padding: 37px 20px;
    min-height: 100px;
    margin-bottom: 16px;
    margin-left: -195px;
}

.user_name {
    background: #ffffff;
    border: 1px solid #d9d9d9;
    padding: 10px;
    margin: 18px 0;
    display: flex;
    align-items: start;
}

#success-message {
    position: fixed;
    display: none;
    background-color: #ffd66b;
    color: #202c17;
    text-align: center;
    width: 25%;
    padding: 103px 0;
    font-size: 46px;
    font-weight: 400;
    line-height: 40px;
    text-align: center;
    top: 29%;
    z-index: 1;
}

#footer-message {
    position: fixed;
    display: none;
    background-color: #ffd66b;
    color: #202c17;
    text-align: center;
    width: 60%;
    padding: 103px 0;
    font-size: 36px;
    font-weight: 400;
    line-height: 40px;
    text-align: center;
    top: 29%;
    z-index: 1;
}

.user_name input {
    border: none;
    outline: none;
    width: 100%;
}

.user_name i {
    color: #ff6b74;
    font-size: 18px;
    margin: 5px 10px;
}

.double_input {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin: -18px 0;
}

.appointment form button {
    background-color: #ffd66b;
    width: 100%;
    border: 1px solid transparent;
}


/* ======== End of 1.11. Appointment Style ======== */


/* ======== 1.12. Our Experts Style ======== */

.our_expert_para {
    margin-top: 60px;
}

.our_expert_para h2 {
    color: #202c17;
    width: 470px;
    margin-top: -25px;
    text-align: center;
    z-index: 1;
}

.our_expert_para p {
    color: #737171;
    text-align: center;
}

.our_expert_img {
    background-image: url("../Images/bg/pricing_plan_bg.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin: 20px 0 80px 0;
}

.expert {
    position: relative;
    width: 100%;
}

.expert img {
    width: 100%;
    height: 400px;
    object-fit: cover;
}

.overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #ff6b75d4;
    overflow: hidden;
    width: 100%;
    height: 0;
    transition: 0.5s ease;
}

.expert:hover .overlay {
    height: 100%;
}

.overlay_text {
    position: absolute;
    width: 100%;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    text-align: center;
}

.overlay_text h3 {
    color: #ffffff;
}

.overlay_text p {
    color: #ffffff;
    padding: 17px 16px;
}

.overlay_text a {
    padding: 0;
}

.overlay_text i {
    border: 2px solid #ffffff;
    color: white;
    padding: 9px 11px 9px 10px;
    font-size: 21px;
    border-radius: 50%;
    transition: 400ms;
    cursor: pointer;
}

.overlay_text a:first-child i {
    padding: 9px 13px 9px 13px;
}

.overlay_text a:nth-child(2) i {
    padding: 9px 10px 10px 11px;
}

.overlay_text i:hover {
    background: #ffffff;
    color: #ff6b75bb;
    transition: 400ms;
}


/* ======== End of 1.12. Our Experts Style ======== */


/* ======== 1.13. FAQS Style ======== */

.faq {
    background-image: url("../Images/bg/faq_bg.png");
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 88vh;
    margin: 110px 0 40px 0;
}

.faq_para {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.faq_para h2 {
    color: #202c17;
    margin-top: -25px;
    text-align: center;
    z-index: 1;
}

.frequently_accordion_main {
    background: #ffffff;
    box-shadow: 0px 13px 50px rgba(0, 0, 0, 0.1);
    padding: 30px;
    width: 42%;
    min-height: 330px;
    position: relative;
    top: -53px;
    left: -65px;
    margin: 24px 0;
}

.frequently_accordion {
    border: none;
    width: 100%;
}

.frequently_btn {
    color: #202c17;
    font-size: 18px;
    font-weight: 400;
    line-height: 24px;
}

.accordion-body {
    padding: 0rem 1.25rem;
}

.accordion-body p {
    margin-bottom: 0;
}

.frequently_btn:not(.collapsed) {
    color: #fb8e26 !important;
}

.frequently_accordion_para {
    color: #737171;
    width: 90%;
}

.frequently_btn:not(.collapsed) {
    background: white;
}

[type="button"]:not(:disabled),
[type="reset"]:not(:disabled),
[type="submit"]:not(:disabled),
button:not(:disabled) {
    box-shadow: inset 0 calc(-1 * var(--bs-accordion-border-width)) 0 var(--bs-accordion-border-color);
}

.accordion-button:not(.collapsed)::after {
    background-image: url("../Images/icon/manus.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 20px;
    height: 3px;
}

.accordion-button::after {
    background-image: url("../Images/icon/plus.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;
}


/* ======== End of 1.13. FAQS Style ======== */


/* ======== 1.14. Video Presentation Style ======== */

.video {
    background: linear-gradient( 0deg, #f9f8f4 27.69%, rgba(249, 248, 244, 0) 100%);
    padding: 5px 0 80px 0;
}

.video img[alt="video_leaf"] {
    width: 100px;
}

.video img[alt="video_leaf"]:hover {
    position: relative;
    animation-name: animation;
    animation-duration: 0.5s;
    animation-iteration-count: 2;
}

.video_para {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: -110px;
}

.video_para h2 {
    width: 405px;
    color: #202c17;
    margin-top: -25px;
    text-align: center;
    z-index: 1;
}

.video_para p {
    color: #737171;
    text-align: center;
}

.video_img {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    margin-top: 25px;
}

.video_img img {
    width: 100%;
    object-fit: cover;
}

.video_img img[alt="video_side_img"]:hover {
    position: relative;
    animation-name: animation;
    animation-duration: 0.5s;
    animation-iteration-count: 2;
}

.video_img img[alt="vadio_arrow"] {
    width: 100px;
}

.video_img figure:nth-child(2) {
    position: relative;
}

.video_img a {
    position: absolute;
    left: 42%;
    top: 35%;
    padding: 0;
}


/* ======== End of 1.14. Video Presentation Style ======== */


/* ======== 1.15. Blog & News Style ======== */

.blog_page_leag {
    margin-top: 0 !important;
}

img[alt="blog_leaf"] {
    width: 100px;
    float: right;
    margin-top: -96px;
    rotate: -112deg;
}

img[alt="blog_leaf"]:hover {
    position: relative;
    animation-name: animation;
    animation-duration: 0.5s;
    animation-iteration-count: 2;
}

.blog_para {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 60px;
    padding: 0 15px;
}

.blog_para h2 {
    width: 340px;
    color: #202c17;
    margin-top: -25px;
    text-align: center;
    z-index: 1;
}

.blog_para p {
    color: #737171;
    text-align: center;
}

.blog_img {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin: 30px 0 70px 0;
}

.blog_img .card {
    border: none;
    overflow: hidden;
    width: 30%;
}

.blog_img .card:hover img {
    transform: scale(1.05);
    opacity: .8;
    transition: all 0.4s ease;
}

.blog_img .card img {
    width: 100%;
    transition: all 0.4s ease;
}

.blog_img .card-body {
    padding: 1rem 0;
}

.blog_img .card-body h6 {
    color: #ff6b74;
}

.blog_img .card-body h3 {
    color: #292a29;
}

.blog_img .card-body h3:hover {
    color: #ff6b74;
}

.blog_img .card-body p {
    color: #8d8d8d;
}

.blog_img .card-body a {
    color: #3f582c;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    padding: 10px 0 0 0;
    transition: 400ms;
}

.blog_img .card-body a:hover {
    color: #ff6b74;
    transition: 400ms;
}


/* ======== End of 1.15. Blog & News Style ======== */


/* ======== 1.16. Footer Style ======== */

footer {
    background: #DDCDBE;
    padding: 40px 0;
}

footer img[alt="footer_logo"] {
    width: 100%;
}

footer .container ul:nth-child(2) {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
}

footer a {
    padding: 0;
}

footer ul li a {
    font-size: 16px;
    font-weight: 400;
    line-height: 22px;
    color: #202c17;
    text-decoration: none;
    transition: 300ms;
    padding: 0;
}

footer ul li a:hover {
    color: #ff6b74;
    transition: 300ms;
}

footer ul {
    margin-bottom: 0;
}

footer hr {
    width: 100%;
    color: #3f582c;
    height: 2px !important;
}

footer .gap-4 li {
    font-size: 16px;
    font-weight: 400;
    line-height: 22px;
    color: #202c17;
    display: flex;
    align-items: center;
    gap: 20px;
    transition: 300ms;
}

footer .gap-4 li i {
    font-size: 22px;
}

footer .gap-4 li:hover {
    color: #ff6b74;
    transition: 300ms;
}

footer h2 {
    color: #202c17;
    text-align: center;
}

footer p {
    color: #737171;
    text-align: center;
}

footer form {
    display: flex;
    width: 70%;
    gap: 20px;
}

footer form input {
    width: 100%;
    border: none;
    outline: none;
    padding: 0 0 0 20px;
}

footer form button {
    background: #3f582c;
    color: #FFFFFF !important;
    border: 1px solid transparent;
}

.copyright {
    background-color: white;
    padding: 15px 0 0 20px;
    color: #737171;
    text-transform: capitalize;
    text-align: center;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
}

.copyright h6 {
    font-family: "Karla", sans-serif;
}

.copyright a:hover {
    color: #ff6b74;
}

.copyright a {
    color: #737171;
    display: inline;
}


/* ======== End of 1.16. Footer Style ======== */


/* ======== 2.1. hero Style ======== */

.about {
    background-color: #DDCDBE;
    position: relative;
    height: 290px;
}

.about img {
    width: 330px;
    position: absolute;
}

.about #about {
    color: #202c17;
    margin-top: 77px;
}

.about a {
    color: #3f582c;
    padding: 0 20px;
}

.about a:hover {
    color: #ff6b74;
}

.about span {
    color: #ff6b74;
    font-size: 20px;
}


/* ======== End of 2.1. hero Style ======== */


/* ======== 2.2. Page About mission/vission Style ======== */

img[alt="about_mission_leaf"] {
    width: 100px;
    margin: 0px 0px -77px 160px;
    rotate: -76deg;
}

img[alt="about_mission_leaf"]:hover {
    position: relative;
    animation-name: animation;
    animation-duration: 0.5s;
    animation-iteration-count: 2;
}

.mission {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 95px;
}

.mission .mi {
    margin-top: 68px;
}

img[alt="about_mission"] {
    width: 100%;
}

.about_mission {
    position: relative;
}

.about_mission_data {
    position: absolute;
    top: 0;
}

.about_mission_data {
    padding: 0 42px;
    margin: 68px 0 0 0;
}

.about_mission_data h2 {
    color: #3f582c;
    text-align: center;
    margin-top: -28px;
}

.about_mission_data p {
    text-align: center;
    color: #737171;
}

.about_testimonial {
    background-image: url("../Images/bg/testimonial_bg.png");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    margin-top: -24px;
    padding: 30px 0 80px 0;
}


/* ======== End of 2.2. Page About mission/vission Style ======== */


/* ======== 3.1. Contact Page address Style ======== */

.contact_address ul {
    display: flex;
    justify-content: center;
    margin-top: 100px;
}

.contact_address ul li {
    color: #202c17;
    transition: 300ms;
    font-size: 16px;
    font-weight: 400;
    line-height: 22px;
}

.contact_address ul li:hover {
    color: #ff6b74;
    transition: 300ms;
}

.contact_address p {
    color: #737171;
    text-align: center;
    padding: 0 150px;
    margin-top: 40px;
}


/* ======== End of 3.1. Contact Page address Style ======== */


/* ======== 3.2. Contact Page Form Style ======== */

.form_h1 {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 60px 0 30px 0;
}

.form_h1 h2 {
    color: #202c17;
    margin-top: -28px;
    z-index: 1;
}

img[alt="contact_rectengal"] {
    position: absolute;
    bottom: 0;
    right: 0;
    margin: 0px 91px -56px 0;
}

img[alt="contect_leaf"] {
    width: 100px;
    position: absolute;
    right: 0;
    margin: 40px 46px 0 0;
    rotate: -93deg;
}

.contact_form {
    position: relative;
    display: flex;
    justify-content: center;
    margin-bottom: 150px;
}

.contact_form form {
    width: 70%;
    z-index: 1;
    background: #ffffff;
    box-shadow: 0px 13px 50px rgba(0, 0, 0, 0.1);
    padding: 50px 30px;
}

.contact_form div {
    display: flex;
}

.contact_form input {
    outline: none;
    width: 100%;
    margin: 20px;
    border-color: #737171;
    border-width: 0 0 1px 0 !important;
    padding: 8px 8px 8px 0;
    color: #737171;
}

.contact_form textarea {
    outline: none;
    width: 100%;
    margin: 20px;
    border-color: #737171;
    border-width: 0 0 1px 0;
    padding: 8px 8px 8px 0;
    color: #737171;
}

.contact_form form button {
    border: 1px solid #202c17;
    text-transform: uppercase;
    display: block;
    margin: 20px auto 0 auto;
}


/* ======== End of 3.2. Contact Page Form Style ======== */


/* ======== 3.3. Contact Page MAP Style ======== */

.mapouter {
    position: relative;
    text-align: right;
    width: 100%;
    height: 500px;
}

.gmap_canvas {
    overflow: hidden;
    background: none !important;
    width: 100%;
    height: 500px;
}

.gmap_iframe {
    width: 100%;
    height: 500px !important;
}


/* ======== End of 3.3. Contact Page MAP Style ======== */


/* ===== End of 03. Contact Page Style ===== */


/* ======== 04. Blog Page Style ======== */

.blog_page_img {
    margin-top: -62px;
}


/* ======== End 04. Blog Page Style ======== */


/* ======== 05. Testimonials Page Style ======== */

.testimonial_page {
    margin-top: -27px !important;
}


/* ======== End of 05. Testimonials Page Style ======== */


/* ======== 06. Team Page Style ======== */

.our_expert_img_team {
    margin-top: -40px;
}


/* ======== End of 06. Team Page Style ======== */


/* ======== 07. 404/Comming Soon Page Style ======== */

.page_404 {
    background: #DDCDBE;
}

.p404 {
    position: relative;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.p404 img[alt="404_1"] {
    position: absolute;
    top: 0%;
    left: -170px;
    width: 500px;
    rotate: 80deg;
}

.p404 img[alt="404_2"] {
    width: 105px;
    position: absolute;
    top: 20%;
    right: 10%;
}

.p404 div {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    z-index: 1;
}

.p404 h1 {
    color: #202c17;
}

.p404 h2 {
    text-transform: capitalize;
    color: #202c17;
}

.p404 p {
    color: #262626;
    padding: 0 250px;
    text-align: center;
}

.p404 a {
    border: 1px solid #202c17;
}


/* ======== End of 07. 404/Comming Soon Page Style ======== */