@charset "utf-8";
/*!
 * custom.css
 * Webkokteyli - 2024
 */

:root {

    --color-primary: #977c6c;
    --color-secondary: #836b5e;
}

/* @media (min-width: 1400px){
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {

        max-width: 1200px;
    }
} */

.container-wide {

    max-width: 1620px;
}

/* body */
body {
    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-style: normal;
}

/* h */
.h, h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
    font-family: "Bodoni Moda", serif;
    font-style: italic;
    font-weight: 500;
}
h1, .h1 {
    font-size: 3.125rem;
    font-weight: 600;
}
h2, .h2 {
    font-size: 2.5rem;
}
h3, .h3 {
    
}
h4, .h4 {
    
}
h5, .h5 {
    
}
h6, .h6 {
    
}
.headers {
    margin-bottom: 3rem;
}

/* button */
.btn-inline {
    padding: 0;
    font-size: inherit;
    color: inherit;
}
.button-inline {
    color: var(--color-primary);
}
.button, .btn.button,
.button:hover, .btn.button:hover,
.button:active, .btn.button:active
.button:focus, .btn.button:focus{
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
    font-size: 0.9375rem;
    font-family: "Bodoni Moda", serif;
    font-weight: 400;
    letter-spacing: -0px;
    padding: 0.6875rem 2rem;
    border-radius: 6px;
}
.button:hover, .btn.button:hover {
    background-color: var(--color-secondary);
    color: #fff;
}

/* cards */
.card.card-gray {
    background-color: #f7f7f7;
    border: 0;
}
.card.card-gray .card-body {
    padding: 2rem;
}

/* navbar */
header {
    position: fixed;
    z-index: 16;
    width: 100%;
    top: 0;
}
header > .navbar {
    padding: 20px 0;
    background-color: #977c6cff;
    transition: all .25s ease-in-out;
}
.anasayfa header > .navbar {
    padding: 35px 0;
    background-color: #977c6c00;
}
header.affix > .navbar {
    padding: 15px 0;
    background-color: #977c6ceb;
    backdrop-filter: blur(5px);
}
.navbar-brand {
    padding: 0;
    margin: 0;
}
.navbar-brand img {
    height: 58px;
    filter: brightness(999);
    opacity: 1;
    transition: all .25s ease-in-out;
}
.anasayfa .navbar-brand img {
    height: 70px;
    opacity: 0.9;
}
header.affix .navbar-brand img {
    height: 50px;
    opacity: 1;
}
.menu-area {
    display: flex;
    align-items: center;
    justify-content: center;
}
.navbar-nav li {
    margin-left: 1.5rem;
}
.nav-link {
    --bs-nav-link-font-size: 16px;
    --bs-nav-link-font-weight: 350;
    text-transform: uppercase;
    color: #fffe;
    letter-spacing: 0.4px;
    padding: 0;
}
.nav-link:focus, .nav-link:hover {
    color: #977c6c;
    color: #fff;
}
.navbar-tools {
    display: flex;
    align-items: center;
    margin-left: 3rem;
}
.navbar-tools ul {
    margin: 0;
}
header .social-list {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}
header .social-list a {
    color: #fff;
    font-size: 1.1rem;
}
header .social-list a[href*="instagram"]:hover {
    color: #e68599;
}
header .social-list a[href*="youtube"]:hover {
    color: #f26969;
}
header .social-list a[href*="wa"]:hover {
    color: #54e363;
}
header .language-changer-wrapper {
    position: relative;
    margin-left: 2.5rem;
    padding-left: 2.5rem;
    display: flex;
    align-items: center;
}
header .language-changer-wrapper:before {
    content: "";
    display: block;
    width: 1px;
    height: 16px;
    position: absolute;
    left: 0;
    /* top: 0; */
    border-left: 1px solid #ffffff73;
}
header .language-changer-wrapper select {
    border: 0;
    background-color: transparent;
    color: #fffe;
    padding: 0 8px 0 5px;
}

/* carousel */
.carousel-item:before {
    content: "";
    display: flex;
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1;
    background-color: #0007;
}
.carousel-item > img {
    max-height: 100vh;
    height: 100vh;
    width: 100%;
    object-fit: cover;
    object-position: 50% 25%;
}
.carousel-captions {
    position: absolute;
    z-index: 2;
    bottom: 12.5vh;
    color: #fff;
    width: 100%;
}
.carousel-captions .h {
    font-size: 4rem;
    margin-bottom: 2rem;
    letter-spacing: 0.5px;
}
.carousel-captions .text-content {
    font-size: 1.125rem;
    font-weight: 300;
    color: #fffb;
}
.carousel-captions .h,
.carousel-captions .text-content {
    max-width: 50%;
}
.carousel-control-next, .carousel-control-prev {
    height: auto;
    top: auto;
    width: auto;
    right: auto;
    left: calc(calc(100% - 1650px) / 2);
    bottom: 5vh;
    padding: 0 1vw;
}
.carousel-control-next {
    margin-left: 50px;
}

/* scroll down */
@keyframes marquee{
    0%{
        margin-left: -100%;
    }
    100%{
        margin-left: 100%;
    }
}
#picnicSlider .scroll-down {
    position: absolute;
    right: calc(calc(100% - 1650px) / 2);
    margin-right: 32px;
    bottom: 2vh;
    z-index: 4;
    transform: rotate(90deg);
    transform-origin: bottom right;
    overflow: hidden;
    opacity: 0.7;
}
#picnicSlider .scroll-down > a {
    display: block;
    color: rgba(255, 255, 255, 0.9);
    /* text-transform: uppercase; */
    font-size: 1.125rem;
    letter-spacing: 1px;
    font-weight: 300;
    width: 120px;
    overflow: hidden;
    font-family: "Bodoni Moda", serif;
    font-style: italic;
    /* font-weight: 500; */
}
[data-lang="en"] #picnicSlider .scroll-down > a,
[data-lang="ar"] #picnicSlider .scroll-down > a {
    width: 170px;
}
#picnicSlider .scroll-down > a:after {
    content: "";
    display: block;
    width: 100%;
    border-bottom: 1px solid;
    margin-top: 0.5rem;
    margin-left: 100%;
    animation: marquee 1s;
    animation-iteration-count: infinite;
}

/* separator */
.separator {
    margin-top: 98px;
    background-color: #f7f7f7;
}
.separator .breadcrumb {
    padding: 1.5rem 0;
}
.separator .breadcrumb a {
    font-size: 0.8125rem;
    color: #30303080;
}

/* content */
.section {
    margin: 14vh 0;
}
.section-bg {
    margin: 0;
    padding: 13.5vh 0;
    background-color: #f7f7f7;
}
.flex-align-center {
    display: flex;
    align-items: center;
}

/* */
.text-content {
    font-size: 1.0625rem;
    letter-spacing: 0.1px;
    font-weight: 300;
    color: #575757b0;
    text-align: justify;
}
.text-content b,
.text-content strong {
    font-weight: 500;
    color: #575757;
}
.text-content-img {
    float: right;
    margin: 0 0 3rem 3rem;
}
.side-ribbon {
    position: relative;
    /* background-color: #cb6565; */
    height: 100%;
    padding: 10px 0 0 0;
}
.side-ribbon > span {
    position: absolute;
    transform-origin: 0 50%;
    transform: rotate(90deg);
    white-space: pre;
    margin-left: 27px;
    display: inline-block;
    /* width: 100%; */
    /* height: 100%; */
    /* border-top: 1px solid #000; */
    color: #977c6c;
    top: 0;
    font-family: "Bodoni Moda", serif;
    font-style: italic;
    font-weight: 300;
    /* letter-spacing: 0.3px; */
    opacity: 0.4;
    font-size: 20px;
}
.side-ribbon > span:before {
    content: "";
    display: block;
    border-top: 1px solid #977c6c;
    width: 40vh;
    /* height: 100%; */
    position: absolute;
    top: -15px;
    opacity: 0.7;
}

/* content */
.therapy-preview {

}
.therapy-preview-img img {
    border-radius: 8px;
}
.therapy-preview-text {
    padding: 1rem 0;
}
.therapy-details img {
    border-radius: 10px;
}

/* media */
.media-videos {

}
.video-wrapper {
    display: flex;
    position: relative;
    overflow: hidden;
    margin-bottom: 1.5rem;
    border-radius: 6px;
}
.video-wrapper > a {
    display: flex;
    align-items: center;
    justify-content: center;
}
.video-wrapper > a > i {
    position: absolute;
    color: #fff;
    z-index: 1;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
    color: var(--color-primary);
    border-radius: 50%;
    padding-left: 3px;
    opacity: 0.5;
    transition: opacity .2s ease-in-out;
}
.video-wrapper > a > img {
    max-width: 100%;
    filter: brightness(0.9);
    position: relative;
    transition: filter .2s ease-in-out;
}
.video-wrapper > a:hover > img {
    filter: brightness(1);
}
.video-wrapper > a:hover > i {
    opacity: 1;
}

/* image */
.media-images {

}
.image-wrapper {
    display: flex;
    margin-bottom: 1.5rem;
    /* overflow: hidden; */
    /* border-radius: 6px; */
}
.image-wrapper > a {
    display: flex;
    width: 100%;
    position: relative;
    align-items: center;
    justify-content: center;
    height: 220px;
}
.image-wrapper > a > img {
    /* max-height: 160px; */
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50%;
    border-radius: 6px;
    transition: all .2s ease-in-out;
    position: absolute;
}
/* .image-wrapper > a:hover > img {
    width: 120%;
    height: 130%;
    position: absolute;
    z-index: 1;
    box-shadow: 0 0 34px 15px #0003;
} */

/* contact */
.contact-info {
    height: 100%;
}
.contact-info .contact-list-single {
    font-size: 1.0625rem;
    letter-spacing: 0.1px;
    font-weight: 300;
}
.contact-info .contact-list-single > p {
    font-family: "Bodoni Moda", serif;
    font-style: italic;
    font-size: 1.5rem;
    margin-bottom: 2rem;
}
.contact-info .contact-list-single > p strong {
    font-weight: 500;
}
.contact-info .contact-list-single ul {
    margin: 0;
}
.contact-info .contact-list-single ul li p {
    position: relative;
    padding-left: 30px;
}
.contact-info .contact-list-single ul li p i {
    position: absolute;
    left: 0;
    top: 6px;
    font-size: 0.875rem;
}
.contact-info > .card {
    height: 100%;
}
.contact-info > .card .card-body {
    display: flex;
    align-items: center;
}
.contact-maps {
    overflow: hidden;
    border-radius: 6px;
}
.contact-maps iframe {
    height: 280px;
    float: left;
    filter: grayscale(0.9);
    transition: filter .25s ease-in-out;
}
.contact-maps iframe:hover {
    filter: grayscale(0);
}

/* form area */
.section.section-contact-form {
    background-color: #f7f7f7;
    margin: 0;
    padding: 10vh;
}

/* form */
.form-group {
    margin-bottom: 1rem;
}
.form-control {
    border-color: #00000005;
    min-height: 56px;
    border-radius: 6px;
    font-size: 0.875rem;
    font-weight: 350;
    padding: 1rem;
}
textarea.form-control {
    height: 100px;
}
label:not(.form-check-label) {
    font-family: "Bodoni Moda", serif;
    /* font-style: italic; */
    font-size: 0.9375rem;
    margin-bottom: 4px;
}
label.form-check-label {
    font-size: 0.75rem;
    line-height: 2;
}

/* */
.grecaptcha-badge {
    display: none;
}

/* footer */
footer {
    background-color: #977c6c;
    color: #fff9;
    font-size: 1rem;
    font-weight: 300;
    font-size: 0.875rem;
}
.footer-content {
    padding: 6vh 0 5vh;
}
.footer-content-info img {
    filter: brightness(999);
}
.footer-content-info p {
    line-height: 1.8;
    /* font-size: 0.875rem; */
    font-style: italic;
}
.footer-content .row > div h3 {
    font-size: 1.125rem;
    color: #fff;
    font-style: normal;
}
.footer-content .contact-list-single i {
    display: none;
}
.footer-copyright {
    background-color: #0002;
    font-size: 0.8125rem;
}
.footer-copyright .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.5rem 0;
}
.footer-copyright a {
    font-size: 0.75rem;
    /* opacity: 0.6; */
    color: #fff4;
}
.footer-copyright a i {
    color: #735645;
    margin: 0 2px;
}


/* language */
[data-lang="en"] .navbar-nav li:last-child,
[data-lang="ar"] .navbar-nav li:last-child {
    display: none;
}

/* AR */
[dir="rtl"] .navbar-tools {
    margin-left: 0;
    margin-right: 3rem;
}
[dir="rtl"] header .language-changer-wrapper {
    margin-left: 0;
    padding-left: 0;
    margin-right: 2.5rem;
    padding-right: 2.5rem;
}
[dir="rtl"] header .language-changer-wrapper:before {
    left: auto;
    right: 0;
}
[dir="rtl"] #picnicSlider .scroll-down {
    right: auto;
    left: 0;
    margin-right: 0;
    margin-left: -32px;
}
[dir="rtl"] #picnicSlider .scroll-down > a {
    direction: ltr;
    padding-top: 6px;
}
[dir="rtl"] .carousel-control-next,
[dir="rtl"] .carousel-control-prev {
    left: auto;
    right: calc(calc(100% - 1650px) / 2);
}
[dir="rtl"] .carousel-control-prev {
    margin-left: auto;
    margin-right: 50px;
}
[dir="rtl"] .side-ribbon {
    direction: ltr;
}
[dir="rtl"] .side-ribbon > span {
    margin-left: 50px;
}
[dir="rtl"] .side-ribbon > span:before {
    top: auto;
    bottom: -15px;
}
[dir="rtl"] .text-content-img {
    float: left;
    margin: 0 3rem 3rem 0;
}
[dir="rtl"] .breadcrumb-item+.breadcrumb-item {
    display: inline-flex;
    padding-left: 0;
    padding-right: var(--bs-breadcrumb-item-padding-x);
}
[dir="rtl"] .breadcrumb-item+.breadcrumb-item::before {
    transform: rotate(-135deg);
    margin: 0.5rem 0 0 1rem;
}
[dir="rtl"] #picnicSlider .scroll-down > a:after {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
}

@media (max-width: 1680px){
    .anasayfa header > .navbar {
        padding: 30px 0;
    }
    .container-wide {
        max-width: 1320px;
    }
    .anasayfa .navbar-brand img {
        height: 60px;
    }
    header.affix > .navbar {
        padding: 15px 0;
    }
    .carousel-captions .h {
        font-size: 3.25rem;
    }
    .carousel-control-next,
    .carousel-control-prev {
        left: calc(calc(100% - 1320px) / 2);
    }
    #picnicSlider .scroll-down {
        right: calc(calc(100% - 1320px) / 2);
    }
    h1, .h1 {
        font-size: 2.75rem;
        font-weight: 600;
    }
    h2, .h2 {
        font-size: 2.125rem;
    }
    [dir="rtl"] .carousel-control-next,
    [dir="rtl"] .carousel-control-prev {
        left: auto;
        right: calc(calc(100% - 1320px) / 2);
    }
    [dir="rtl"] #picnicSlider .scroll-down {
        right: auto;
        left: 0;
    }
}

@media (max-width: 1366px){
    .anasayfa header > .navbar {
        padding: 30px 0;
    }
    .container-wide {
        max-width: 1200px;
    }
    .anasayfa .navbar-brand img {
        height: 60px;
    }
    header.affix > .navbar {
        padding: 15px 0;
    }
    .nav-link {
        --bs-nav-link-font-size: 15px;
    }
    .navbar-nav li {
        margin-left: 1rem;
    }
    .carousel-captions .h {
        font-size: 3rem;
    }
    .carousel-control-next, .carousel-control-prev {
        left: calc(calc(100% - 1200px) / 2);
    }
    #picnicSlider .scroll-down {
        right: calc(calc(100% - 1200px) / 2);
    }
    h1, .h1 {
        font-size: 2.5rem;
        font-weight: 600;
    }
    h2, .h2 {
        font-size: 2rem;
    }
    .text-content {
        font-size: 1rem;
    }
    [dir="rtl"] .carousel-control-next,
    [dir="rtl"] .carousel-control-prev {
        left: auto;
        right: calc(calc(100% - 1200px) / 2);
    }
    [dir="rtl"] #picnicSlider .scroll-down {
        right: auto;
        left: 0;
    }
}

@media (max-width: 1024px){
    .container-wide {
        max-width: 860px;
    }
    .carousel-control-next, .carousel-control-prev {
        left: calc(calc(100% - 860px) / 2);
    }
    #picnicSlider .scroll-down {
        right: calc(calc(100% - 860px) / 2);
    }
    [dir="rtl"] .carousel-control-next,
    [dir="rtl"] .carousel-control-prev {
        left: auto;
        right: calc(calc(100% - 860px) / 2);
    }
    [dir="rtl"] #picnicSlider .scroll-down {
        right: auto;
        left: 0;
    }
}

@media (max-width: 768px){
    .container-wide {
        max-width: 720px;
    }
    .carousel-control-next, .carousel-control-prev {
        left: calc(calc(100% - 720px) / 2);
    }
    #picnicSlider .scroll-down {
        right: calc(calc(100% - 720px) / 2);
    }
    .menu-area {
        display: none;
    }
    .anasayfa header > .navbar {
        padding: 20px 0;
    }
    .anasayfa .navbar-brand img {
        height: 54px;
        margin-top: -6px;
    }
    .burger-menu-toggler-icon, .burger-menu-toggler:before, .burger-menu-toggler:after {
        border-color: #fff;
        border-bottom: 2px solid #ffffffc2;
        margin-bottom: 4px;
        width: 20px;
    }
    .headers {
        margin-bottom: 2rem;
    }
    h1, .h1 {
        font-size: 2rem;
        font-weight: 600;
    }
    h2, .h2 {
        font-size: 1.5rem;
    }
    .side-ribbon {
        margin-bottom: 2rem;
    }
    .side-ribbon > span {
        transform: unset;
        position: relative;
        margin: 0;
    }
    .side-ribbon > span:before {
        display: none;
    }
    .side-ribbon > span:after {
        content: "";
        display: block;
        border-top: 1px solid #977c6c;
        width: 40vh;
        /* height: 100%; */
        position: absolute;
        opacity: 0.7;
    }
    .carousel-item > img {
        height: 60vh;
    }
    .carousel-captions {
        bottom: 7.5vh;
    }
    .carousel-captions .h,
    .carousel-captions .text-content {
        max-width: 80%;
    }
    .carousel-captions .h {
        font-size: 1.375rem;
        margin-bottom: 0.8rem;
    }
    .carousel-captions .text-content {
        font-size: 0.75rem;
        text-align: left;
    }
    .container,
    .container-wide {
        --bs-gutter-x: 3rem;
    }
    .carousel-control-next,
    .carousel-control-prev {
        left: calc(calc(100% - 340px) / 2);
    }
    .carousel-control-next,
    .carousel-control-prev {
        bottom: 2vh;
    }
    .carousel-control-next-icon,
    .carousel-control-prev-icon {
        height: 1.5rem;
    }
    #picnicSlider .scroll-down {
        right: calc(calc(100% - 340px) / 2);
    }
    #picnicSlider .scroll-down > a {
        font-size: 0.75rem;
        width: 80px;
    }
    .section {
        margin: 6vh 0;
    }
    .section-bg {
        margin: 0;
        padding: 6vh 0;
    }
    .text-content {
        font-size: 0.9375rem;
        text-align: left;
    }
    .footer-content-menus {
        margin-bottom: 3rem;
    }
    .footer-content {
        font-size: 0.75rem;
    }
    .footer-content .row > div h3 {
        margin-bottom: 0.5rem;
    }
    .footer-copyright .container {
        flex-direction: column;
    }
    .burger-logo {
        background-color: var(--color-primary);
        padding: 1rem 1.5rem;
    }
    .burger-logo .navbar-brand img {
        margin: 0;
        width: 210px;
        height: auto;
        max-width: unset;
        max-height: unset;
    }
    .burger-logo .navbar-brand {
        padding: 0;
    }
    .burger-menu-collapser {
        margin: 0;
    }
    .burger-menu-collapser:before,
    .burger-menu-collapser:after {
        color: #fff;
    }
    .burger-menu-nav .navbar-nav li {
        margin: 0;
    }
    .burger-menu-nav {
        margin: 20px 0;
    }
    .section.section-contact-form {
        padding: 5vh 0;
    }
    [dir="rtl"] .carousel-control-next,
    [dir="rtl"] .carousel-control-prev {
        left: auto;
        right: calc(calc(100% - 720px) / 2);
    }
    [dir="rtl"] #picnicSlider .scroll-down {
        right: auto;
        left: -30vw;
    }
    [dir="rtl"] .burger-menu-toggler {
        right: auto;
        left: 0.875rem;
    }
    [dir="rtl"] > footer > div.footer-content > div > div > div.col-sm-8.col-12 > div > div:nth-child(1),
    [dir="rtl"] > footer > div.footer-content > div > div > div.col-sm-8.col-12 > div > div:nth-child(2) {
        width: 50%;
    }
    [dir="rtl"] .footer-content-contact .contact-list ul {
        padding: 0;
    }
}