@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

html,body{
    width:100%;
    height:100%;
}
body{
    font-size:14px;
    font-family: "Poppins", sans-serif;
    font-size:14px;
    color:var(--primary-text-color);
}
a{
    color:var(--secondary-text-color);
    text-decoration: none;
    transition:all .2s ease-in-out;
    -o-transition:all .2s ease-in-out;
    -moz-transition:all .2s ease-in-out;
    -webkit-transition:all .2s ease-in-out;
}
a:hover{
    color:var(--primary-color);
}

p{margin-bottom:10px;}
header{position:relative;padding:20px 0 0 0;}
header .top-head{width:100%;display:flex;justify-content:space-around;align-items:center;padding:10px 0px;}
header .top-head .top-tel a{    color: var(--primary-color);;  font-size: 16px;   font-weight: 600;  border: 1px solid var(--border-color);; padding: 10px;  border-radius: 10px;}
header .top-head .top-list{    border: 1px solid var(--border-color);;  padding: 10px;border-radius: 10px;}
header .top-head .top-list ul{    list-style: none;  display: flex;  flex-direction: row;   justify-content: center;   align-items: center;    padding-left: 0; margin-bottom: 0;}
header .top-head .top-list ul li{    padding: 0px 10px;}
header .top-head .top-list ul li a i{      color: var(--primary-color);; font-size: 20px;}
header .mid-head{text-align: center;position: relative;}
header .mid-head:before{transition: 1s ease;content: ''; border: 1px solid var(--border-color);;  position: absolute;   bottom: 50%;  left: 0;  height: 1px;   width: 100%;  right: 0;    z-index: -1;}
header .mid-head .sw-logo{padding:0 30px;width:fit-content;display:inline-block;background: #fff;}
header .mid-head .sw-logo img{max-width: 100%;height: auto;object-fit: cover;}
header .sw-menu .menu-bar{display: none;}
header .sw-menu{   width: 100%;align-items: center;display: flex;justify-content: center; padding: 10px 0px;z-index: 99;}
header .sw-menu>ul{list-style:none;margin:0;padding:0;display:flex;justify-content: center;align-items:center;}
header .sw-menu > ul > li > a { display: block;padding: 10px 35px; color: black; font-size: 18px; position: relative; overflow: hidden; /* Metni etkileyen yayılmayı gizler */ z-index: 2;}
header .sw-menu > ul > li > a::after {content: ''; position: absolute; left: 0; right: 0;bottom: 0;width: 100%;height: 0; background-color: var(--primary-color);;transition: height 0.3s ease, width 0.3s ease;z-index: -1;clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);}
header .sw-menu > ul > li > a:hover::after { height: 100%;}
header .sw-menu > ul > li > a:hover{color:white;}
header .sw-menu>ul>li>button{    background: transparent; color: var(--secondary-color); border: 1px solid var(--border-color);; padding: 5px 10px;border-radius: 10px;}
header .sw-menu>ul>li>.head-flags{padding: 10px 3px;}
header .sw-menu>ul .flags{display: flex;flex-direction: row;justify-content: space-between;}
header .sw-menu > ul > li > ul {list-style: none;padding-left: 0;margin: 0;    background-color: #6f6565b8;  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); border-radius: 0px 0px 2px 2px;padding: 20px;transition: all 0.5s ease-in-out;-webkit-transition: all 0.5s ease-in-out;-moz-transition: all 0.5s ease-in-out;-o-transition: all 0.5s ease-in-out;position: absolute;z-index: 9999;opacity: 0;visibility: hidden;}
header .sw-menu > ul > li:hover > ul {opacity: 1;visibility: visible;}
header .sw-menu > ul > li > ul > li > a {position:relative;display: block;transition: all 0.2s ease-in-out;-webkit-transition: all 0.2s ease-in-out;-moz-transition: all 0.2s ease-in-out;-o-transition: all 0.2s ease-in-out;color: black;padding: 0px 5px;}
header .sw-menu > ul > li > ul > li > a:hover {color: #1D1D1D;}
header .sw-menu > ul > li > ul > li > a:hover::after{width: 100%;}
header .sw-menu > ul > li > ul > li > a::after{    content: '';position: absolute;left: 0;bottom: 0;width: 0;height: 2px;background-color: #1D1D1D;transition: width 0.3s ease;}
header .sw-menu > ul > li:hover .menu-arrow {transform: translateY(-50%) rotate(180deg);transition: all 0.5s ease-in-out;-webkit-transition: all 0.5s ease-in-out;-moz-transition: all 0.5s ease-in-out;-o-transition: all 0.5s ease-in-out;}
header .sw-menu > ul > li > ul > li > ul {position: absolute;left: 100%;top: 0;visibility: hidden;opacity: 0;transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out;}
header .sw-menu > ul > li > ul > li:hover > ul {visibility: visible;opacity: 1;}
header .dropdown-content { display: none; position: absolute;     background-color: #e5e5e5ed;border-radius: 10px;  min-width: 100px;  z-index: 1;}
header .dropdown-content a { color: black; padding: 12px 16px; text-decoration: none;  display: block;}
header .dropdown-content a:hover { background-color: #f1f1f1;color:#1D1D1D;}
header .show {display: block;}
@media only screen and (max-width:991px){
    header{padding:15px;overflow: visible;}
    header .container-fluid{padding: 0px;}
    header .col-lg-11{    margin-bottom: 12px;width: 100%;text-align: center;}
    header .h-top .topl-link {font-size: 10px;}
    header .sw-logo{margin-bottom:10px;}
    header .sw-logo img{margin:0 auto;}
    header .sw-menu .menu-bar{width: 100%;display:block;padding:10px;color:#fff;font-weight:700;background: #3F3F3FC2;}
    header .sw-menu>ul{position:absolute;left:0;width:100%;z-index:99;flex-direction:column;background:#333333f2;align-items:flex-start;padding:10px;display:none;top:90%;}
    header .sw-menu>ul>li{width:100%;border-bottom:1px dashed #bbb;}
    header .sw-menu > ul > li > ul {background:#494949;}
    header .sw-menu>ul>li:last-child{border:0;padding-top:10px;}
    header .sw-menu>ul>li>a{color:#fff;padding:10px;}
    header .sw-menu>ul .flags{justify-content: center;}
    header .sw-menu > ul > li > a:hover::after {clip-path: none;}
    header .sw-menu>ul>li>button {color: white;}
}
@media only screen and (min-width:992px) and (max-width:1199px){
    header{padding:20px 15px;}
    header .sw-menu>ul>li>a{padding:10px;font-size:13px;}
}
@media only screen and (min-width:1200px) and (max-width:1440px){
    header{padding: 30px 0px;}
    header .sw-menu>ul>li>a{padding:10px 17px;font-size:12px;}
}
/*--- slide ----------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.slide{overflow: hidden; background:url('../images/oto-servis/slide-bg.jpg') no-repeat center center;background-size:cover;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover; position: relative;}
.slide .slide-r .slide-img{width: 100%;height: 560px;object-fit: cover;overflow: hidden;clip-path: polygon(20% 0%, 100% 0%, 100% 100%, 0% 100%);}
.slide .container-fluid{padding: 0;}
.slide .slide-l .swiper .swiper-slide{display: flex;flex-direction: column;justify-content: center;padding-left: 15%;position: relative;}
.slide .slide-l .swiper .swiper-slide .title{color: var(--primary-color);;font-size: 24px;font-weight: bold;}
.slide .slide-l .swiper .swiper-slide .content{color:white;font-size: 36px;font-weight: bold;}
.slide .slide-l {   position: relative; height: 100%;}
.slide .slide-l .swiper {   position: relative;height: 100%;}
.slide .slide-l .swiper .swiper-slide .buttons {  margin-top:3%;display: flex;   align-items: center;   justify-content: space-between;   position: relative;}
.slide .slide-l .swiper .swiper-slide .btn1 {  position: relative;}
.slide .slide-l .swiper .swiper-slide .btn2 {  display: flex;   align-items: center;  gap: 10px;   position: relative;   flex-direction: row-reverse;   height: 100%;}
.slide .slide-l .swiper-button-prev,.slide .slide-l  .swiper-button-next {   width: 30px;    height: 30px;    position: relative;}
.slide .slide-l .btn2 .swiper-button-prev {  order: 2;    padding: 20px;  background: #adadad33;}
.slide .slide-l .btn2 .swiper-button-next {   order: 1;background: #adadad33;  padding: 20px;  margin-left: 20px;}
.slide .slide-l .swiper-button-next:after,.slide .slide-l  .swiper-rtl .swiper-button-prev:after {font-size: 24px;    color: white;}
.slide .slide-l .swiper-button-prev:after,.slide .slide-l  .swiper-rtl .swiper-button-next:after {font-size: 24px;    color: white;}
.slide .slide-l .btn1 a { position: relative;  padding: 10px 20px;  border-bottom: 3px solid var(--primary-color);  color: white;   background: var(--secondary-color);   overflow: hidden;   z-index: 1;    display: inline-block; }
.slide .slide-l .btn1 a::after {  content: ''; position: absolute;  top: 0;   left: 0; right: 0;  bottom: 0; background-color: var(--primary-color);  transform: scaleY(0);  transform-origin: bottom;   transition: transform 0.3s ease;    z-index: -1;}
.slide .slide-l .btn1 a:hover::after {   transform: scaleY(1);}
@media only screen and (max-width:991px){
    .slide .slide-r .slide-img{height: auto;}
    .slide .slide-l{height: 35vh;}
    .slide .slide-l .swiper .swiper-slide .title{font-size: 21px;}
    .slide .slide-l .swiper .swiper-slide{align-items: center;padding: 30px;}
    .slide .slide-l .swiper .swiper-slide .content {font-size: 18px;}
    .slide .slide-r .slide-img{clip-path: none;}
    .slide .slide-l .btn2 .swiper-button-prev {top:0;margin-top:0;}
    .slide .slide-l .btn2 .swiper-button-next {top:0;margin-top:0; }
}
/*--- aboutus ----------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.aboutus{position: relative;padding: 75px 0px;overflow: hidden;}
.aboutus .about-l .about-img{width: 100%;height: auto;object-fit: cover;}
.aboutus .about-r{height: 100%;display: flex;flex-direction: column;justify-content: center;}
.aboutus .about-r .about-r-body{background: white; left: -15%;  position: relative; padding: 50px; box-shadow: 1px 1px 10px lightgray;}
.aboutus .about-r .title{font-size: 24px;color: var(--primary-text-color);margin-bottom: 1%;font-weight: 500;}
.aboutus .about-r .slogan{font-size: 32px;color: var(--secondary-text-color);margin-bottom: 2%;}
.aboutus .about-r .content{font-size: 16px;color: var(--secondary-text-color);display: -webkit-box;-webkit-line-clamp: 7;-webkit-box-orient: vertical;overflow: hidden;}
.aboutus .about-r .button a {position:relative;padding:10px 20px;border-bottom:3px solid var(--primary-color);  color: white;   background: var(--secondary-color);   overflow: hidden;   z-index: 1;    display: inline-block; }
.aboutus .about-r .button a::after {content:'';position: absolute;top:0;left:0;right:0;  bottom: 0; background-color: var(--primary-color);  transform: scaleY(0);  transform-origin: bottom;   transition: transform 0.3s ease;    z-index: -1;}
.aboutus .about-r .button a:hover::after {   transform: scaleY(1);}
.aboutus .about-r .button{margin-top: 10%;}
@media only screen and (max-width:991px){
    .aboutus .about-r .about-r-body{left: 0;padding: 20px;}
    .aboutus .about-r .title{font-size: 21px;}
    .aboutus .about-r .slogan{font-size: 24px;}
}
/*--- Service ----------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.service { padding: 40px 0; overflow: hidden; position: relative;}
.service .sub-title{text-align: center;margin-bottom: 1%;}
.service .sub-title a{    font-size: 28px;  color: var(--primary-color);font-weight: 500;}
.service .service-slogan{    text-align: center; font-size: 16px;  margin-bottom: 3%;color: var(--secondary-color);}
.service .gorsel{position: relative;}
.service .gorsel .title{ transition: all 0.5s ease;   position: absolute;  bottom: 0;  width: 300px;   background: var(--primary-color);   padding: 10px 40px 10px 25px;   color: white;  clip-path: polygon(0 0%, 80% 0, 100% 100%, 0 100%);font-weight: 500;   font-size: 16px;}
.service .content{    background: linear-gradient(0deg, rgba(17, 17, 17, 1) 0%, rgba(60, 60, 60, 1) 100%);  padding: 25px;  color: white;font-size: 16px;}
.service .content .text{ display: -webkit-box;  -webkit-line-clamp: 3; -webkit-box-orient: vertical;   overflow: hidden;   text-overflow: ellipsis;}

.service .content .button {margin-top: 5%; position: relative;  padding: 10px 20px;  border-bottom: 3px solid var(--primary-color);  color: var(--primary-color);   background: white;   overflow: hidden;   z-index: 1;    display: inline-block; }
.service .content .button::after {  content: ''; position: absolute;  top: 0;   left: 0; right: 0;  bottom: 0;color: white; background-color: var(--primary-color);  transform: scaleY(0);  transform-origin: bottom;   transition: transform 0.3s ease;    z-index: -1;}
.service .content .button:hover::after {   transform: scaleY(1);}
.service .content .button:hover{color: white;}
.service .gorsel .service-img{width: 100%;  height: 238px;  object-fit: cover; overflow: hidden;}
.service .swiper-slide:hover .title{width: 400px;}
.service .swiper-slide{overflow: hidden;}
@media only screen and (max-width:991px){
    .service .sub-title a{ font-size: 21px;}
    .service .service-slogan{margin-bottom: 5%;}
}
/*--- packages ----------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.packages{padding: 50px 0px; background:url('../images/packages-bg.jpg') no-repeat center center;background-size:cover;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover; position: relative}
.packages .sub-title{text-align: center;  font-size: 28px;  font-weight: 600; color: var(--primary-color);}
.packages .service-slogan{    font-size: 16px; text-align: center;  color: var(--secondary-color);  margin-bottom: 3%; margin-top: 1%;}
.packages .swiper-slide .title{    color: white;  background: var(--primary-color);  padding: 20px; font-weight: 600;}
.packages .swiper-slide .content{    padding: 30px;   background: #ffffff69;    color: var(--secondary-color);    line-height: 2;height: 420px;}
.packages .swiper {  position: relative; /* Swiper container'ı için relative konumlandırma */}
.packages .swp-next,.packages .swp-prev { color: #fff; width: 40px;  height: 40px;   background-color: rgba(0, 0, 0, 0.3);  border-radius: 50%;    display: flex;  align-items: center;  justify-content: center;   font-size: 20px;    position: absolute;   top: 50%;   transform: translateY(-50%);  z-index: 10; }
.packages .swp-next {right: 0px;}
.packages .swp-prev { left: 0px;}
.packages .swp-next:after,.packages .swiper-rtl .swp-prev:after {font-size: 24px;    color: white;}
.packages .swp-prev:after,.packages .swiper-rtl .swp-next:after {font-size: 24px;    color: white;}
/*--- references ----------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.references{padding: 30px 0px;background:linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(223,223,223,1) 100%);overflow: hidden;}
.references .item img{width: 100%;height: 130px;overflow: hidden;object-fit: cover;padding: 7%;}
.references .item{background:linear-gradient(0deg, rgba(240,240,240,1) 0%, rgba(255,255,255,1) 100%);    border-radius: 20px 20px 5px 5px;  border-bottom: 5px solid #d3d3d3bf;}
.references .title{    text-align: center; margin-bottom: 1%;}
.references .title a{font-size: 28px;   color: var(--primary-color);   font-weight: 500;}
.references .slogan{font-size: 16px;color: var(--secondary-color);margin-bottom: 3%;text-align: center;}
@media only screen and (min-width:1201px) and (max-width:1440px){
    .references .item img {width: 100%;height: 90px;}
}
@media only screen and (max-width:991px){
    .references .item img {height: 90px;}
    .references .title a{font-size: 21px;}
}
/*--- expert ----------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.expert{position: relative;overflow: hidden;background: linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(223,223,223,1) 100%);}
.expert .expert-body{padding: 75px 0px;}
.expert .title{text-align: center;  font-size: 28px;  font-weight: 500; color: var(--primary-color);}
.expert .slogan{    font-size: 16px; text-align: center;  color: var(--secondary-color);  margin-bottom: 3%; margin-top: 1%;}
.expert .box{padding: 30px; display: flex;  flex-direction: column;  justify-content: center; align-items: center; text-align: center;background:linear-gradient(0deg, rgba(240,240,240,1) 0%, rgba(255,255,255,1) 100%);border: 1px solid #ECECEC;    border-radius: 20px 20px 5px 5px;  border-bottom: 5px solid #d3d3d3bf;height: 300px;}
.expert .box h3{font-size: 20px;  font-weight: 600; color: var(--primary-color);  margin-top: 5%;}
.expert .box p{font-size: 16px;color: var(--secondary-color);display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;overflow: hidden;}
@media only screen and (max-width:991px){
.expert .title{font-size: 21px;}
.expert .box{padding: 10px;height: 250px;}
.expert .box h3{font-size: 16px;}
.expert .box p{font-size: 14px;}
.expert .expert-body{padding: 35px 0px;}
}
.gallery{position: relative;overflow: hidden;}
.gallery .gal-img{width: 100%;height: 430px;object-fit: cover;overflow: hidden;filter: blur(.4px) brightness(0.4);transition: 1s ease;}
.gallery .gal-img:hover{transform: scale(1.05);filter: none;z-index: 99999;position: relative;}
/*--- FOOTER ----------------------------------------------------------------------------------------------------------------------------------------------------------------*/
footer{padding:200px 0 0 0;background:url('../images/oto-servis/footer-bg.png') no-repeat center center;background-size:cover;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;}
footer h3{font-size:20px;font-weight:600;margin-bottom:20px;color:var(--primary-text-color);}
footer .workhour{margin-bottom:50px;    line-height: 35px; color:var(--secondary-text-color);font-size: 16px;}
footer .logo img{    width: 90%;height: auto;overflow: hidden;object-fit: cover;}
footer .tel-loc{padding: 25px 0px;}
footer .tl{ display: flex; flex-direction: row; align-items: center; margin-bottom: 3%;}
footer .tl>img{ margin-right: 15px; width: 15px; height: 21px; filter: brightness(0) saturate(100%) invert(50%) sepia(4%) saturate(8%) hue-rotate(314deg) brightness(95%) contrast(92%);}
footer .tl .content{ color:var(--secondary-text-color); font-size: 14px;} 
footer .follow-foot{    color: #1D1D1D;font-size: 25px; font-weight: bold;margin-bottom: 2%;}
footer .socialfoot{list-style: none;display: flex;flex-direction: row;    padding-left: 0px;}
footer .socialfoot>li{padding: 0px 10px;}
footer .socialfoot>li>a>i{color: var(--primary-color);    font-size: 21px;  background: white;  padding: 10px;  border-radius: 10px;}
footer .list{margin-bottom:50px;}
footer .list>ul{list-style:none;margin:0;padding:0;}
footer .list>ul>li{display:flex;align-items:center;}
footer .list>ul>li>i{margin-right:10px;}
footer .list>ul>li>span,footer .list>ul>li>a{display:inline-block;    color:var(--secondary-text-color);font-size: 16px;line-height:2em;transition:all .2s ease-in-out;-webkit-transition:all .2s ease-in-out;-moz-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;}
footer .list>ul>li>span:hover,footer .list>ul>li>a:hover{padding-left:5px;color:var(--primary-color);}
footer .map{width: 100%;max-width: 100%;overflow: hidden;margin-bottom:40px;}
footer .map iframe{width: 100%;height: 300px;border: 0;}
footer .copyright{margin-bottom:5px;font-size:11px;border-top:1px solid #eee;text-align:center;padding-top:25px;color:var(--secondary-text-color);}
footer .swa{margin-bottom:20px;text-align:center;}
footer .swa>a>img{display:block;width:50px;height:50px;margin:0 auto;opacity:.95;}
footer .contracts{margin-bottom:50px;display:flex;flex-wrap:wrap;justify-content:center;height: 100%;align-items: center;}
footer .contracts a{display:inline-block;padding:0 10px;font-size:.8em;margin:0 0 5px 0;}
.foot-top{margin-bottom: -125px;position: relative;overflow: hidden;z-index: 9;padding: 50px 0px 0px 0px;}
.foot-top .f-top-body{background: var(--primary-color);margin: 0 auto;}
.foot-top .f-top-body .f-left{display: flex;  flex-direction: row; justify-content: space-around; align-items: center; background: var(--border-color); padding: 30px;clip-path: polygon(0 0%, 93% 0, 100% 100%, 0 100%);}
.foot-top .f-top-body .f-left img{width:100px;height:100px;}
.foot-top .f-top-body .f-left .foot-slogan{    font-size: 24px;font-weight: 500;}
.foot-top .f-top-body .col-lg-7{padding: 0;--bs-gutter-x: 0rem;}
.foot-top .f-top-body .col-lg-5{padding: 0;--bs-gutter-x: 0rem;}
.foot-top .f-top-body .f-right{padding-right: 5px;    display: flex;  flex-direction: row;  justify-content: center;   align-items: center;   height: 100%;}
.foot-top .f-top-body .f-right .form a{    padding: 10px 20px; background: white; border-radius: 15px; color: var(--primary-color);  font-size: 13px;}
.foot-top .f-top-body .f-right .foot-tel{color: var(--primary-text-color);    padding: 0px 15px;  background: white; border-radius: 15px; font-size: 13px; margin-left: 1%; margin-right: 1%;  display: flex;  flex-direction: row;  align-items: center;  justify-content: space-around;min-height:39px;}
.foot-top .f-top-body .f-right .foot-tel img{    width: 10%;filter: brightness(0) saturate(100%) invert(48%) sepia(37%) saturate(1608%) hue-rotate(343deg) brightness(92%) contrast(90%);}
.foot-top .f-top-body .f-right .foot-wp a{    padding: 10px 20px;  background: black;  border-radius: 15px;  font-size: 13px;  color: white;border: 1px solid white;}
@media only screen and (min-width:992px) and (max-width:1200px){
.foot-top .f-top-body .f-right .form a{    padding: 10px 10px;font-size: 12px;}
.foot-top .f-top-body .f-right .foot-tel{    padding: 0px 10px; font-size: 12px;}
.foot-top .f-top-body .f-right .foot-wp a{    padding: 10px 10px;font-size: 12px;}
.foot-top .f-top-body .f-left .foot-slogan{  font-size: 21px;}
}
@media only screen and (max-width:991px){
    .foot-top .f-top-body .f-left {clip-path: none;}
    .foot-top .f-top-body .f-left .foot-slogan {text-align: center;font-size: 16px;margin-left: 5%;}
    .foot-top .f-top-body .f-right .form a{    padding: 10px 10px;font-size: 12px;}
    .foot-top .f-top-body .f-right .foot-tel{    padding: 0px 10px; font-size: 12px;}
    .foot-top .f-top-body .f-right .foot-wp a{    padding: 10px 10px;font-size: 12px;}
        .foot-top .f-top-body .f-right{padding: 40px 0px;}
    .foot-top .container{padding: 0;}
}
/*--- PAGE ------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.page .page-head{padding:250px 0 0px 0;}
.page .page-head .container-fluid{padding: 0;}
.page .page-head .head-l{    text-align: right;  background: var(--bg-color);  width: 100%; height: 100%;    border-right: 3px solid var(--secondary-color);}
.page .page-head .head-l h1{font-size: 28px;  font-weight: 600;  padding: 10px 20px;  color: var(--primary-color);}
.page .page-head .head-r{height: 100%;display: flex;align-items: flex-end;}
.page .page-head .head-r .r-side{background: #262626ba; width: 100%;  display: flex;  flex-direction: column; align-items: end; padding: 5px 0px;padding-right: 15%;justify-content: center;}
.page .page-head .col-lg-4, .page .page-head .col-lg-8{padding: 0;}
.page .page-head .title nav ol {    justify-content: left;  margin-bottom: 0px;}
.page .page-head .title nav ol li a{color: white;}
.page .page-head .title nav ol li{color: white;}
.page .page-head .title .breadcrumb-item+.breadcrumb-item::before {color: var(--primary-color);content: var(--bs-breadcrumb-divider, ">");font-size: 16px;}
.page .page-body{background:url('../images/oto-servis/page-body-bg.png') no-repeat center center;background-size:cover;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;}
.page .page-body{padding:50px 0 50px 0;}
.page .page-foot{padding:50px 0 20px 0;background:var(--bg-color);margin-bottom:50px;}
.page .page-form{margin-bottom:50px;}
@media only screen and (max-width:991px){
    .page .page-head .head-r .r-side{padding-right: 0;padding: 5px;}
    .page .page-head .container-fluid{    padding-right: calc(var(--bs-gutter-x)* .5);padding-left: calc(var(--bs-gutter-x)* .5);;}
    .page .page-head .head-l h1 {padding:5px;margin-bottom:0px; }
    .page .page-head .head-l{border-right: 0px;}
}
/*--- FORM --------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.form-group{margin-bottom:20px;}
.form-group label{display:block;font-size:1em;font-weight:700;margin-bottom:5px;}
.form-group .form-control{min-height:45px;border:0;border:1px solid #eee;font-size:1em;}
.form-group .form-control::placeholder{font-size:1em;}
.form-group input[type="checkbox"]{width:25px;height:25px;}
.form-checkbox-group{display:flex;line-height: 25px;}
.form-checkbox-group>input{accent-color:var(--primary-color);}
.form-checkbox-group a{padding-left:15px;}
.form-group button{background-color:var(--primary-color);color:#fff;font-size:1em;}
.form-group button:hover{background-color:var(--secondary-color);color:#fff;}
/*rating*/
.stars {width:100%;text-align: center;border:1px solid var(--border-color);border-radius:5px;overflow: hidden;display: flex;justify-content: center;flex-direction: row-reverse;margin-bottom:20px;}
.stars-focus{box-shadow: 0 0 0 .25rem rgba(13,110,253,.25);}
input.star {display: none;}
label.star {margin:0;padding: 0 5px;font-size: 30px;color: #ddd;transition: all .2s;}
input.star:checked ~ label.star:before {content: '\f005';color: #FD4;transition: all .25s;font-weight: 900;}
input.star-5:checked ~ label.star:before {color: #FE7;}
input.star-1:checked ~ label.star:before {color: #F62;}
input.star-2:hover ~ label.star-1 {color: #F62;}
input.star-3:hover ~ label.star-1, input.star-3:hover ~ label.star-2 { color: #F62; }
input.star-4:hover ~ label.star-1, input.star-4:hover ~ label.star-2, input.star-4:hover ~ label.star-3 { color: #F62; }
input.star-5:hover ~ label.star-1, input.star-5:hover ~ label.star-2, input.star-5:hover ~ label.star-3, input.star-5:hover ~ label.star-4 {color: #F62;}
label.star:hover {color: #ffa300;}
label.star:before {content: '\f005';font-family: 'Font Awesome 5 Free';font-weight: 400;}
/*security-input*/
.security-group{margin-bottom:20px;position:relative;}
.security-group label{display: block;font-size:14px;font-weight:700;margin-bottom:5px;}
.security-group .img{position:absolute;top:25px;left:0;}
.security-group .img img{min-height:45px;}
.security-group .img button{border:0;min-height:45px;min-width:45px;margin:0;background:transparent;}
.security-group input{text-indent:175px;min-height:45px;min-height:45px;border:1px solid #eee;font-size:1em;}
/*--- LOADING ---------------------------------------------------------------------------------------------------------------------------------------------------------------*/
#loading{width:100%;height:100vh;position:fixed;top:0;left:0;background:rgba(0,0,0,.7);z-index:9999999;display:flex;flex-direction:column;justify-content:center;align-items:center;}
@keyframes spin{to{transform: rotate(360deg);}from{transform: rotate(0);}}
#loading:before{content:'\f110';color:#fff;font-family: 'Font Awesome 6 Free';font-weight:900;animation: spin infinite 1s linear;}
/*--- WHATSAPP --------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.whatsAppBg{background-color: #068404 !important;background-image: linear-gradient(90deg, #068404, #0ba909);}
.intro-banner-vdo-play-btn {height:40px;width:40px;bottom:50px;left:30px;text-align: center;border-radius:80px;z-index: 999;position: fixed;color: white;display:none;}
.intro-banner-vdo-play-btn i {line-height:40px;font-size:25px;}
.intro-banner-vdo-play-btn .ripple {position: absolute;width:120px;height:120px;z-index: -1;left: 50%;top: 50%;opacity: 0;margin: -60px 0 0 -60px;border-radius:80px;-webkit-animation: ripple 1.8s infinite;animation: ripple 1.8s infinite;}
@-webkit-keyframes ripple {0% {opacity: 1;-webkit-transform: scale(0);transform: scale(0);}100% {opacity: 0;-webkit-transform: scale(1);transform: scale(1);}}
@keyframes ripple {0% {opacity: 1;-webkit-transform: scale(0);transform: scale(0);}100% {opacity: 0;-webkit-transform: scale(1);transform: scale(1);}}
.intro-banner-vdo-play-btn .ripple:nth-child(2) {animation-delay: .3s;-webkit-animation-delay: .3s;}
.intro-banner-vdo-play-btn .ripple:nth-child(3) {animation-delay: .6s;-webkit-animation-delay: .6s;}
/*--- NO-CONTENT --------------------------------------------------------------------------------------------------------------------------------------------------------------*/
.no-content{padding:40px 20px;border:1px dashed #eee;border-radius:10px;text-align:center;margin-bottom:30px;}
.no-content>i{font-size:30px;margin-bottom:15px;color:#aaa;}
.no-content>p{font-size:18px;padding:0;margin:0;font-weight:200;}