/*
  * button
  * slidermain
  * slideranimation
  * slider navigation
  * custom button carousel
  * features custom carousel
  * ripple effect
  * request form wcu
  * progress bar
  * preload
  * map
  * side menu toggle
*/

/* button */
.button {
    font-size         : 14px;
    font-family: "Montserrat", sans-serif;
    color             : #fff;
    background-color  : var(--primary-color-gray);
    border-radius     : 29px;
    font-weight       : 500;
    line-height       : 29px;
    padding           : 14px 30px;
    -webkit-transition: all 0.3s ease;
    -moz-transition   : all 0.3s ease;
    -ms-transition    : all 0.3s ease;
    -o-transition     : all 0.3s ease;
    transition        : all 0.3s ease;
}

.button:hover {
    background-color: var(--primary-color2);
    color           : #fff;
}

.btn-style2 {
    background-color: unset;
    border          : 1px solid #707070;
    color           : var(--primary-color3);
}

.btn-style2:hover {
    background-color: var(--primary-color);
    border          : 1px solid var(--primary-color);
}

.btn-style3 {
    background-color: unset;
    border          : 1px solid var(--primary-color);
    color           : var(--primary-color);
}

.btn-style3:hover {
    background-color: var(--primary-color);
    border          : 1px solid var(--primary-color);
}

.btn-style4 {
    background-color: #fff;
    border          : 1px solid var(--primary-color);
    color           : var(--primary-color);
}

.btn-style4:hover {
    background-color: var(--primary-color6);
    border          : 1px solid var(--primary-color);
}

.readmore::after {
    content       : '\e904';
    font-family   : 'icomoon';
    font-size     : 18px;
    margin-left   : 7px;
    vertical-align: bottom;
}

.readmore-prev::before {
    content       : '\e912';
    font-family   : 'icomoon';
    font-size     : 18px;
    margin-right  : 7px;
    vertical-align: bottom;
}

.video::before {
    content      : '\e919';
    font-family  : 'icomoon';
    color        : var(--primary-color);
    padding-right: 12px;
}

.btn-slider {
    background-color: unset;
    color           : var(--primary-color2);
    border          : 1px solid #70707000;
}

.btn-slider:hover {
    background-color: unset;
    color           : var(--primary-color2);
    border          : 1px solid var(--primary-color5);
}

/* slider main */
.flat-slider {
}

.flat-slider .slider-item {

}

.flat-slider .slider-left {

}

.flat-slider .slider-right {
    position   : relative;
}

.flat-slider .slider-right .mark-slider-1 {
    position: absolute;
    bottom  : 0;
    left    : -224px;
}

.flat-slider .slider-right .mark-slider-2 {
    position: absolute;
    bottom  : 0;
    left    : -323px;
    opacity : 0;
}

.flat-slider .slider-right .mark-slider-3 {
    position: absolute;
    top     : -126px;
    right   : -110px;
    z-index : -1;
}

.flat-slider .slider-left-content h3,
.section-heading {
    font-size    : 28px;
    font-weight  : 700;
    font-family  : "Montserrat", sans-serif;
    padding-left : 10px;
    margin-bottom: 17px;
}

.section-heading {
    color: var(--primary-color);
}

.flat-slider .slider-left-content h2 {
    font-family  : "Montserrat", sans-serif;
    font-size    : 28px;
    font-weight  : 700;
    line-height  : 38px;
    margin-bottom: 25px;
}

.flat-slider .button-slider {
    margin-top: 3px;
}

.flat-slider .button-slider .button:first-child {
    padding      : 9px 12px;
    margin-bottom: 20px;
}

/* slider animation */
.slider-right .image-slider {
    opacity  : 1;
    object-fit: contain;
}

.slider-left,
.slider-right .mark-slider-1 {
    opacity  : 0;
    transform: translateY(400px);
}

.swiper-slide-active .slider-left,
.swiper-slide-active .slider-right .mark-slider-1 {
    opacity         : 1;
    transform       : translateY(0);
    transition      : all 700ms ease;
    transition-delay: 500ms;
    transition      : transform 1500ms ease, opacity 1500ms ease;
}

.swiper-slide-active .slider-title {
    opacity         : 1;
    transform       : translateX(0);
    transition      : all 700ms ease;
    transition-delay: 500ms;
    transition      : transform 1500ms ease, opacity 1500ms ease;
}

.swiper-slide-active .slider-right .mark-slider-2 {
    opacity         : 1;
    transition      : all 1000ms ease;
    transition-delay: 500ms;
    transition      : transform 1500ms ease, opacity 1500ms ease;
}

/* slider navigation button */
.swiper-button-prev.btn-slide-prev,
.swiper-button-next.btn-slide-next,
.swiper-button-next.btn-custom-carousel-next,
.swiper-button-prev.btn-custom-carousel-prev {
    display           : inline-block;
    top: 50% !important;
    left              : auto;
    right             : 10px;
    width             : 45px;
    height            : 45px;
    border-radius     : 50%;
    text-align        : center;
    -webkit-transition: all 0.3s ease;
    -moz-transition   : all 0.3s ease;
    -ms-transition    : all 0.3s ease;
    -o-transition     : all 0.3s ease;
    transition        : all 0.3s ease;
}

.swiper-button-prev.btn-slide-prev {

}

.swiper-button-prev.btn-slide-prev, .swiper-button-next.btn-slide-next {
    display: none !important;
}
.mainslider:hover .swiper-button-prev.btn-slide-prev {
    display: block!important;
    top: 50% !important;
    left : 0;
}
.mainslider:hover .swiper-button-next.btn-slide-next {
    display: block!important;
    top: 50% !important;
    right : 0;
}

.swiper-button-next.btn-slide-next::after, .swiper-button-prev.btn-slide-prev::after {
    color      : #ce101270;
}

/* custom btn carousel */

.swiper-button-next.btn-custom-carousel-next,
.swiper-button-prev.btn-custom-carousel-prev {
    display           : inline-block;
    top               : -6% !important;
    left              : auto;
    right             : 15px;
    width             : 45px;
    height            : 45px;
    border-radius     : 50%;
    text-align        : center;
    -webkit-transition: all 0.3s ease;
    -moz-transition   : all 0.3s ease;
    -ms-transition    : all 0.3s ease;
    -o-transition     : all 0.3s ease;
    transition        : all 0.3s ease;
}

.swiper-button-next.btn-custom-carousel-next::after,
.swiper-button-prev.btn-custom-carousel-prev::after {
    content    : '\e904';
    font-family: 'icomoon';
    color      : #fff;
    font-size  : 17px;
    line-height: 45px;
}

.swiper-button-prev.btn-custom-carousel-prev {
    left     : auto;
    right    : 6.5%;
    transform: rotateY(190deg);
}

.swiper-button-next.btn-custom-carousel-next:hover {
    background-color: var(--primary-color5);
    border          : 1px solid var(--primary-color5);
}

.swiper-button-prev.btn-custom-carousel-prev {
    background-color: var(--primary-color7);
}

.swiper-button-prev.btn-custom-carousel-prev::after {
    color: var(--primary-color);
}

/* features custom carouel */
.flat-features .box-content .post-readmore .read-more,
.flat-latest .latest-content-bottom .post-readmore .read-more {
    position        : relative;
    border          : 1px solid var(--primary-color-gray);
    background-color: var(--primary-color-gray);
    color           : #fff;
    line-height     : 45px;
    width           : 45px;
    height          : 45px;
    border-radius   : 50px;
    overflow        : hidden;
}

.flat-features .post-readmore .read-more .text,
.flat-latest .post-readmore .read-more .text {
    position          : absolute;
    left              : 23px;
    font-size         : 16px;
    color             : #fff;
    text-align        : left;
    opacity           : 0;
    -webkit-transition: all 0.3s ease;
    -moz-transition   : all 0.3s ease;
    -ms-transition    : all 0.3s ease;
    -o-transition     : all 0.3s ease;
    transition        : all 0.3s ease;
}

.flat-features .post-readmore .read-more.read-more::before,
.flat-latest .post-readmore .read-more.read-more::before {
    content    : '\e909';
    font-family: 'icomoon';
    position   : absolute;
    right      : 13px;
    color      : #fff;
}

.flat-features .box-content:hover .post-readmore .read-more,
.flat-features .box-content.active .post-readmore .read-more {
    width: 144px;
}

.flat-features .box-content:hover .post-readmore .text,
.flat-features .box-content.active .post-readmore .text {
    opacity: 1;
}

.flat-features .carousel {
    padding: 51px 0 120px 0;
}

.flat-features .swiper-pagination-bullet.swiper-pagination-bullet-active {
    position             : relative;
    width                : 8px;
    height               : 8px;
    display              : inline-block;
    border-radius        : 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius   : 50%;
    -ms-border-radius    : 50%;
    -o-border-radius     : 50%;
    background           : var(--primary-color);
}

.flat-features .swiper-pagination-bullet.swiper-pagination-bullet-active::after {
    position        : absolute;
    content         : '';
    top             : 50%;
    left            : 50%;
    right           : 0;
    bottom          : 0;
    transform       : translate(-50%, -50%);
    padding         : 7.8px;
    border-radius   : 50%;
    background-color: unset;
    border          : 1px solid var(--primary-color);
}

.flat-features .swiper-container-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 6px;
}

.flat-features .swiper-container-horizontal>.swiper-pagination-bullets,
.swiper-pagination-custom,
.swiper-pagination-fraction {
    bottom: 14px;
    left  : 0;
    width : 100%;
}

/* ripple effect */
.ripple::before,
.ripple::after {
    position             : absolute;
    top                  : 50%;
    left                 : 50%;
    width                : 60px;
    height               : 60px;
    border-radius        : 50%;
    -ms-border-radius    : 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius   : 50%;
    -ms-border-radius    : 50%;
    -o-border-radius     : 50%;
    transform            : translate(-50%, -50%);
    -ms-box-shadow       : 0 0 0 0 rgba(255, 255, 255, 0.849);
    -o-box-shadow        : 0 0 0 0 rgba(255, 255, 255, 0.883);
    box-shadow           : 0 0 0 0 rgb(255 255 255 / 60%);
    -webkit-animation    : ripple 3s infinite;
    animation            : ripple 3s infinite;
}

.ripple::before {
    content                : "";
    position               : absolute;
    -webkit-animation-delay: 0.6s;
    animation-delay        : 0.6s;
}

.ripple::after {
    content                : "";
    position               : absolute;
    -webkit-animation-delay: 0.3s;
    animation-delay        : 0.3s;
}

/* request form wcu */
.flat-wcu .contact-request .name-wrap,
.flat-wcu .contact-request .email-wrap {
    width  : 48%;
    display: inline-block;
}

.flat-wcu .contact-request .name-wrap {
    margin-right: 1.8%;
}

.flat-wcu .contact-request input,
.flat-wcu .contact-request select {
    border       : 1px solid var(--primary-color4);
    border-radius: 4px;
    padding      : 13px 19px;
    margin-bottom: 8px;
}

.flat-wcu .contact-request .button {
    margin-top: 30px;
    padding   : 9px 26px;
}

/* progress */
.donat-bg {
    position     : relative;
    display      : block;
    width        : 100%;
    height       : 12px;
    overflow     : hidden;
    border       : solid 1px var(--primary-color7);
    border-radius: 4px;
    margin-top   : 18px;
    margin-bottom: 13px;
}

.donat-bg .custom-donat {
    height       : 100%;
    width        : 0px;
    border-radius: 10px;
    background   : var(--primary-color);
}

/* preload */

.preloading {
    overflow: hidden;
}

.preload-container {
    position  : relative;
    width     : 100%;
    height    : 100%;
    background: #fff;
    position  : fixed;
    top       : 0;
    bottom    : 0;
    right     : 0;
    left      : 0;
    z-index   : 99999999999;
    display   : block;
    overflow-x: hidden;
    overflow-y: auto;
}

.preload-logo {
    position                         : absolute;
    top                              : 50%;
    left                             : 50%;
    width                            : 80px;
    height                           : 80px;
    z-index                          : 100;
    margin                           : -30px 0 0 -30px;
    background-image                 : url(../icon/Favicon.png);
    border-radius                    : 8px;
    background-repeat                : no-repeat;
    background-position              : center center;
    -webkit-box-sizing               : border-box;
    -moz-box-sizing                  : border-box;
    -ms-box-sizing                   : border-box;
    -o-box-sizing                    : border-box;
    box-sizing                       : border-box;
    -webkit-animation-fill-mode      : both;
    animation-fill-mode              : both;
    -webkit-animation-name           : flipInY;
    animation-name                   : flipInY;
    -webkit-animation-duration       : 1s;
    animation-duration               : 1s;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count        : infinite;
}

/* map */
.tf-map .inner .map-contact,
.tf-map .inner {
    width : 100%;
    height: 718px;
}

/* side-menu__block
--------------------------------------------------------------*/
.side-menu__block {
    position          : fixed;
    top               : 0;
    right             : 0;
    width             : 100%;
    height            : 100%;
    z-index           : 99999;
    -webkit-transform : translateX(100%);
    -ms-transform     : translateX(100%);
    transform         : translateX(100%);
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition   : all 0.3s ease-in-out;
    -ms-transition    : all 0.3s ease-in-out;
    -o-transition     : all 0.3s ease-in-out;
    transition        : all 0.3s ease-in-out;
}

.side-menu__block.active {
    -webkit-transform: translateX(0);
    -ms-transform    : translateX(0);
    transform        : translateX(0);
}

.side-menu__block.active .side-menu__block-overlay {
    -webkit-opacity   : 1;
    -khtml-opacity    : 1;
    -moz-opacity      : 1;
    opacity           : 1;
    -ms-filter        : progid:DXImageTransform.Microsoft.Alpha(opacity=100);
    filter            : alpha(opacity=100);
    display           : block\9;
    visibility        : visible;
    -webkit-transform : translateX(-270px);
    -ms-transform     : translateX(-270px);
    transform         : translateX(-250px);
    cursor            : url(../icon/close-1-1.png), auto;
    -webkit-transition: all 0.2s ease-in-out 0s;
    -moz-transition   : all 0.2s ease-in-out 0s;
    -ms-transition    : all 0.2s ease-in-out 0s;
    -o-transition     : all 0.2s ease-in-out 0s;
    transition        : all 0.2s ease-in-out 0s;
}

.side-menu__block-overlay {
    position         : fixed;
    right            : 0;
    top              : 0;
    bottom           : 0;
    left             : 0;
    -webkit-opacity  : 0;
    -khtml-opacity   : 0;
    -moz-opacity     : 0;
    opacity          : 0;
    -ms-filter       : progid:DXImageTransform.Microsoft.Alpha(opacity=0);
    filter           : alpha(opacity=0);
    display          : none\9;
    visibility       : hidden;
    cursor           : pointer;
    background       : rgba(0, 0, 0, 0.8);
    z-index          : 99999;
    -webkit-transform: translateX(0);
    -ms-transform    : translateX(0);
    transform        : translateX(0);
}

.side-menu__block-inner {
    position        : absolute;
    right           : 0;
    top             : 0;
    padding         : 0 20px;
    width           : 100%;
    max-width       : 300px;
    height          : 100%;
    overflow-y      : auto;
    background-color: #eceeef;
    z-index         : 999999;
}

.side-menu__block-inner .main-nav li {
    float: inherit !important;
}

.side-menu__block-inner .main-nav li a {
    display: inline !important;
}

a.side-menu__toggler.side-menu__close-btn {
    padding         : 10px;
    background-color: #000;
}

.cursor {
    position        : absolute;
    background-color: #fff;
    width           : 6px;
    height          : 6px;
    border-radius   : 100%;
    z-index         : 1;
    transition      : 0.3s cubic-bezier(0.75, -1.27, 0.3, 2.33) transform,
    0.2s cubic-bezier(0.75, -0.27, 0.3, 1.33) opacity;
    -webkit-user-select: none;
    -moz-user-select   : none;
    -ms-user-select    : none;
    user-select        : none;
    pointer-events     : none;
    z-index            : 999999;
    transform          : scale(1);
    visibility         : hidden;
}

.cursor {
    visibility: visible;
}

.cursor.active {
    opacity  : 0.5;
    transform: scale(0);
}

.cursor.hovered {
    opacity: 0.08;
}

.cursor-follower {
    position        : absolute;
    background-color: RGBA(255, 255, 255, 0.3);
    width           : 50px;
    height          : 50px;
    border-radius   : 100%;
    z-index         : 1;
    transition      : 0.6s cubic-bezier(0.75, -1.27, 0.3, 2.33) transform,
    0.2s cubic-bezier(0.75, -0.27, 0.3, 1.33) opacity;
    -webkit-user-select: none;
    -moz-user-select   : none;
    -ms-user-select    : none;
    user-select        : none;
    pointer-events     : none;
    z-index            : 999999;
    visibility         : hidden;
}

.cursor-follower {
    visibility: visible;
}

.cursor-follower.active {
    opacity  : 0.7;
    transform: scale(1);
}

.cursor-follower.hovered {
    opacity: 0.08;
}

.cursor-follower.close-cursor:before {
    position  : absolute;
    content   : "";
    height    : 25px;
    width     : 2px;
    background: #fff;
    left      : 48%;
    top       : 12px;
    transform : rotate(-45deg);
    display   : inline-block;
}

.cursor-follower.close-cursor:after {
    position  : absolute;
    content   : "";
    height    : 25px;
    width     : 2px;
    background: #fff;
    right     : 48%;
    top       : 12px;
    transform : rotate(45deg);
}

.side-menu__top {
    display: flex;
}

.side-menu__top-introduce p {
    margin: 20px 0;
}

.side-menu__top-search {
    margin: 20px 0;
}


.features-area p {
    line-height: 15px !important;
}

.scroll-500 {
    height:300px;
    overflow-y: scroll;
}

.img-kardes {
    width: 100%;
    object-fit: contain;
    max-height: 50px;
}

.scroll {
    position: relative;
    bottom: -48px;
    left: 50%;
    z-index: 9;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}


.after_white {
    display: block;
}
.after_white:after {
    content: "" url(../../assets/images/after_white.png);
    display: inline-block;
    -webkit-transition: 500ms;
    transition: 500ms;
    position: absolute;
    bottom: 30px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    height: 47px;
}

.scroll_before {
    position: relative;
    bottom: 0;
    left: 50%;
    z-index: 9;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
}

.before_white {
    display: block;
}
.before_white:after {
    content: "" url(../../assets/images/before_white.png);
    display: inline-block;
    -webkit-transition: 500ms;
    transition: 500ms;
    position: absolute;
    bottom: 30px;
    left: 50%;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    height: 47px;
}

.activity-pagination {
    position: relative !important;
    margin-bottom: 10px;
}

.activity-pagination .swiper-pagination-bullet {
    background: white !important;
    margin-right: 5px;
}

.features-bullet {
    position: relative !important;
    margin-top: 10px;
}

.tab-wrap .title {
    font-size: 18px;
    cursor: pointer;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 50px;
}
.tab-wrap .tab-item-wrap i {
    font-size: 18px;
}
.tab-wrap .tab-item-wrap.active i {
    color: #8b6c5a;
}

.tab-wrap .tab-item-wrap.active {
    border: solid 1px #8b6c5a;
}

.tab-wrap .tab-item-wrap {
    margin: 25px 0 15px;
    background-color: transparent;
    -webkit-box-shadow: 2px 2px 15px 0 rgb(0 0 0 / 6%),
    0 1.2px 3.6px rgb(0 0 0 / 10%);
    box-shadow: 2px 2px 15px 0 rgb(0 0 0 / 6%), 0 1.2px 3.6px rgb(0 0 0 / 10%);
    padding: 5px 15px;
    border-radius: 8px;
}

.tab-wrap .content {
    display: none;
}

.tab-wrap .tab-item-wrap.active .content {
    display: block;
}

.post-gallery {
    padding: 10px;
    border-radius: 8px;
    box-shadow: 1px 1px 3px 1px;
}

.img-units {
    margin: 0 auto;
    object-fit: contain;
}

.unit-shadow{
    margin:3px;
    border: 1px solid #f1f1f1;
    border-radius: 20px;
    box-shadow: 1px 1px 5px -1px;
    padding:10px;
}

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

.slider-title {
    left: 0;
    right: 0;
    font-size: 22px;
    line-height: 28px;
    background: var(--primary-color-gray);
    padding: 15px 20px;
    font-weight: bold;
    text-transform: uppercase;
}

.slider-title a {
    color: #fff;
}

.mainslider {

}

.on-mobile {
    display: none;
}