/*

TemplateMo 574 Mexant

https://templatemo.com/tm-574-mexant

*/

/* ---------------------------------------------
Table of contents
------------------------------------------------
01. font & reset css
02. reset
03. global styles
04. header
05. banner
06. features
07. testimonials
08. contact
09. footer
10. preloader
11. search
12. portfolio

--------------------------------------------- */
/* 
---------------------------------------------
font & reset css
--------------------------------------------- 
*/
@import url("https://fonts.googleapis.com/css?family=Open+Sans:100,200,300,400,500,600,700,800,900");

/* 
---------------------------------------------
reset
--------------------------------------------- 
*/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
div pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
figure,
header,
nav,
section,
article,
aside,
footer,
figcaption {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
}

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

.clearfix {
  display: inline-block;
}

html[xmlns] .clearfix {
  display: block;
}

* html .clearfix {
  height: 1%;
}

ul,
li {
  padding: 0;
  margin: 0;
  list-style: none;
}

header,
nav,
section,
article,
aside,
footer,
hgroup {
  display: block;
}

* {
  box-sizing: border-box;
}

html,
body {
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
  background-color: #fff;
  font-size: 16px;
  -ms-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  text-decoration: none !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0px;
  margin-bottom: 0px;
  color: #212741;
}

ul {
  margin-bottom: 0px;
}

p {
  font-size: 15px;
  line-height: 26px;
  color: #212741;
}

img {
  width: 100%;
  overflow: hidden;
}

/* 
---------------------------------------------
global styles
--------------------------------------------- 
*/
html,
body {
  background: #fff;
  font-family: 'Poppins', sans-serif;
}

::selection {
  background: #FFDD00;
  color: #fff;
}

::-moz-selection {
  background: #FFDD00;
  color: #fff;
}

@media (max-width: 991px) {

  html,
  body {
    overflow-x: hidden;
  }

  .mobile-top-fix {
    margin-top: 30px;
    margin-bottom: 0px;
  }

  .mobile-bottom-fix {
    margin-bottom: 30px;
  }

  .mobile-bottom-fix-big {
    margin-bottom: 60px;
  }
}

.green-button a {
  font-size: 14px;
  color: #000000;
  background-color: #fff;
  padding: 12px 30px;
  display: inline-block;
  border-radius: 5px;
  font-weight: 500;
  text-transform: capitalize;
  letter-spacing: 0.5px;
  transition: all .3s;
}

.green-button a:hover {
  opacity: 0.9;
}

.orange-button a {
  font-size: 14px;
  color: #000000;
  background-color: #FFDD00;
  padding: 12px 30px;
  display: inline-block;
  border-radius: 5px;
  font-weight: 500;
  text-transform: capitalize;
  letter-spacing: 0.5px;
  transition: all .3s;
}

.orange-button a:hover {
  opacity: 0.9;
}

section {
  margin-top: 120px;
}

.section-heading {
  position: relative;
  z-index: 2;
  margin-top: 0px;
  text-align: center;
  margin-bottom: 70px;
}

.section-heading h6 {
  font-size: 16px;
  text-transform: uppercase;
  color: #FFDD00;
  font-weight: 700;
}

.section-heading h4 {
  margin-top: 10px;
  line-height: 40px;
  font-size: 36px;
  font-weight: 700;
  text-transform: capitalize;
  color: #000000;
}

.section-heading p {
  margin-top: 30px;
}


/* 
---------------------------------------------
header
--------------------------------------------- 
*/
.background-header {
  background-color: #000000;
  height: 150px !important;
  position: fixed !important;
  top: 0 !important;
  left: 0;
  right: 0;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15) !important;
}

.header-area {
  background-image: url(../images/header-bg.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  position: absolute;
  height: 110px;
  top: 0;
  left: 0;
  right: 0;
  z-index: 95;
  -webkit-transition: all .5s ease 0s;
  -moz-transition: all .5s ease 0s;
  -o-transition: all .5s ease 0s;
  transition: all .5s ease 0s;
}

.header-area .main-nav {
  min-height: 80px;
  background: transparent;
}

.header-area .main-nav .logo {
  line-height: 120px;
  color: #fff;
  font-size: 28px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  float: left;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  width: 20%;
}

.background-header .main-nav .logo {
  line-height: 80px;
  width: 160px;
}

.background-header .nav {
  margin-top: 18px !important;
}

.header-area .main-nav .nav {
  float: right;
  margin-top: 40px;
  margin-right: 0px;
  background-color: transparent;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  position: relative;
  z-index: 999;
}

.header-area .main-nav .nav li {
  padding-left: 25px;
  padding-right: 25px;
}

.header-area .main-nav .nav li:last-child {
  padding-right: 0px;
}

.header-area .main-nav .nav li a {
  display: block;
  font-weight: 300;
  font-size: 14px;
  text-transform: capitalize;
  color: #fff;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  height: 40px;
  line-height: 40px;
  border: transparent;
  letter-spacing: 1px;
}

.header-area .main-nav .nav li:last-child a {
  font-size: 14px;
  color: #000000;
  background-color: #FFDD00;
  padding: 10px 20px !important;
  display: inline-block;
  border-radius: 5px;
  font-weight: 500;
  text-transform: capitalize;
  height: auto;
  line-height: 25px;
  letter-spacing: 0.5px;
  transition: all .3s;
}

.header-area .main-nav .nav li:last-child a:hover {
  color: #fff;
}

.header-area .main-nav .nav li.has-sub ul.sub-menu li:last-child a,
.background-header .main-nav .nav li.has-sub ul.sub-menu li:last-child a {
  margin-left: 0px;
  padding-left: 0px;
  padding-right: 0px;
  border-radius: 0px;
  padding-top: 0px !important;
  height: 40px;
}


.header-area .main-nav .nav li.has-sub ul.sub-menu li:last-child a:hover,
.background-header .main-nav .nav li.has-sub ul.sub-menu li:last-child a:hover {
  padding-left: 25px !important;
}

.header-area .main-nav .nav li:hover a,
.header-area .main-nav .nav li a.active {
  color: #FFDD00;
}

.background-header .main-nav .nav li:hover a,
.background-header .main-nav .nav li a.active {
  color: #FFDD00;
  opacity: 1;
}

.header-area .main-nav .nav li.has-sub {
  position: relative;
  padding-right: 15px;
}

.header-area .main-nav .nav li.has-sub:after {
  font-family: FontAwesome;
  content: "\f107";
  font-size: 12px;
  color: #fff;
  position: absolute;
  right: 2px;
  top: 12px;
}

.header-area .main-nav .nav li.has-sub ul.sub-menu {
  position: absolute;
  width: 170px;
  background-color: #fff;
  box-shadow: 0 2px 28px 0 rgba(0, 0, 0, 0.06);
  overflow: hidden;
  top: 40px;
  border-radius: 5px;
  opacity: 0;
  transition: all .3s;
  transform: translateY(+2em);
  visibility: hidden;
  z-index: -1;
}

.header-area .main-nav .nav li.has-sub ul.sub-menu li {
  margin-left: 0px;
  padding-left: 0px;
  padding-right: 0px;
}

.header-area .main-nav .nav li.has-sub ul.sub-menu li a {
  opacity: 1;
  display: block;
  background: #f7f7f7;
  color: #2a2a2a !important;
  padding-left: 20px;
  height: 40px;
  line-height: 40px;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  position: relative;
  font-size: 12px;
  font-weight: 400;
  border-bottom: 1px solid #eee;
}

.header-area .main-nav .nav li.has-sub ul li a:hover {
  background: #fff;
  color: #FFDD00 !important;
  padding-left: 25px;
}

.header-area .main-nav .nav li.has-sub ul li a:hover:before {
  width: 3px;
}

.header-area .main-nav .nav li.has-sub:hover ul.sub-menu {
  visibility: visible;
  opacity: 1;
  z-index: 1;
  transform: translateY(0%);
  transition-delay: 0s, 0s, 0.3s;
}

.header-area .main-nav .menu-trigger {
  cursor: pointer;
  display: block;
  position: absolute;
  top: 33px;
  width: 32px;
  height: 40px;
  text-indent: -9999em;
  z-index: 99;
  right: 40px;
  display: none;
}

.background-header .main-nav .menu-trigger {
  top: 23px;
}

.header-area .main-nav .menu-trigger span,
.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  background-color: #fff;
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  left: 0;
}

.background-header .main-nav .menu-trigger span,
.background-header .main-nav .menu-trigger span:before,
.background-header .main-nav .menu-trigger span:after {
  background-color: #fff;
}

.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  background-color: #fff;
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  left: 0;
  width: 75%;
}

.background-header .main-nav .menu-trigger span:before,
.background-header .main-nav .menu-trigger span:after {
  background-color: #fff;
}

.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  content: "";
}

.header-area .main-nav .menu-trigger span {
  top: 16px;
}

.header-area .main-nav .menu-trigger span:before {
  -moz-transform-origin: 33% 100%;
  -ms-transform-origin: 33% 100%;
  -webkit-transform-origin: 33% 100%;
  transform-origin: 33% 100%;
  top: -10px;
  z-index: 10;
}

.header-area .main-nav .menu-trigger span:after {
  -moz-transform-origin: 33% 0;
  -ms-transform-origin: 33% 0;
  -webkit-transform-origin: 33% 0;
  transform-origin: 33% 0;
  top: 10px;
}

.header-area .main-nav .menu-trigger.active span,
.header-area .main-nav .menu-trigger.active span:before,
.header-area .main-nav .menu-trigger.active span:after {
  background-color: transparent;
  width: 100%;
}

.header-area .main-nav .menu-trigger.active span:before {
  -moz-transform: translateY(6px) translateX(1px) rotate(45deg);
  -ms-transform: translateY(6px) translateX(1px) rotate(45deg);
  -webkit-transform: translateY(6px) translateX(1px) rotate(45deg);
  transform: translateY(6px) translateX(1px) rotate(45deg);
  background-color: #fff;
}

.background-header .main-nav .menu-trigger.active span:before {
  background-color: #fff;
}

.header-area .main-nav .menu-trigger.active span:after {
  -moz-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  -ms-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  -webkit-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  transform: translateY(-6px) translateX(1px) rotate(-45deg);
  background-color: #fff;
}

.background-header .main-nav .menu-trigger.active span:after {
  background-color: #fff;
}

.header-area.header-sticky {
  min-height: 80px;
}

.header-area .nav {
  margin-top: 30px;
}

.header-area.header-sticky .nav li a.active {
  color: #FFDD00;
}

@media (max-width: 1200px) {
  .header-area .main-nav .nav li {
    padding-left: 10px;
    padding-right: 10px;
  }

  .header-area .main-nav:before {
    display: none;
  }
}

@media (max-width: 767px) {
  .header-area .main-nav .logo {
    color: #1e1e1e;
  }

  .header-area.header-sticky .nav li a:hover,
  .header-area.header-sticky .nav li a.active {
    color: #FFDD00 !important;
    opacity: 1;
  }

  .header-area.header-sticky .nav li.search-icon a {
    width: 100%;
  }

  .header-area {
    background-color: #f7f7f7;
    padding: 0px 15px;
    height: 100px;
    box-shadow: none;
    text-align: center;
  }

  .header-area .container {
    padding: 0px;
  }

  .header-area .logo {
    margin-left: 0px;
    line-height: 80px;
  }

  .header-area .menu-trigger {
    display: block !important;
  }

  .header-area .main-nav {
    overflow: hidden;
  }

  .header-area .main-nav .nav {
    float: none;
    width: 100%;
    display: none;
    -webkit-transition: all 0s ease 0s;
    -moz-transition: all 0s ease 0s;
    -o-transition: all 0s ease 0s;
    transition: all 0s ease 0s;
    margin-left: 0px;
  }

  .header-area .main-nav .nav li:first-child {
    border-top: 1px solid #eee;
  }

  .header-area.header-sticky .nav {
    margin-top: 100px !important;
  }

  .background-header.header-sticky .nav {
    margin-top: 80px !important;
  }

  .header-area .main-nav .nav li {
    width: 100%;
    background: #fff;
    border-bottom: 1px solid #eee;
    padding-left: 0px !important;
    padding-right: 0px !important;
  }

  .header-area .main-nav .nav li a {
    height: 50px !important;
    line-height: 50px !important;
    padding: 0px !important;
    border: none !important;
    background: #f7f7f7 !important;
    color: #191a20 !important;
  }

  .header-area .main-nav .nav li a:hover {
    background: #eee !important;
    color: #FFDD00 !important;
  }

  .header-area .main-nav .nav li.has-sub ul.sub-menu {
    position: relative;
    visibility: inherit;
    opacity: 1;
    z-index: 1;
    transform: translateY(0%);
    top: 0px;
    width: 100%;
    box-shadow: none;
    height: 0px;
    transition: all 0s;
  }

  .header-area .main-nav .nav li.submenu ul li a {
    font-size: 12px;
    font-weight: 400;
  }

  .header-area .main-nav .nav li.submenu ul li a:hover:before {
    width: 0px;
  }

  .header-area .main-nav .nav li.has-sub ul.sub-menu {
    height: auto;
  }

  .header-area .main-nav .nav li.has-sub:after {
    color: #3B566E;
    right: 30px;
    font-size: 14px;
    top: 15px;
  }

  .header-area .main-nav .nav li.submenu:hover ul,
  .header-area .main-nav .nav li.submenu:focus ul {
    height: 0px;
  }
}

@media (min-width: 767px) {
  .header-area .main-nav .nav {
    display: flex !important;
  }
}


/* 
---------------------------------------------
banner
--------------------------------------------- 
*/

.swiper-container {
  height: calc(100vh - 0px);
  margin: 0px;
  background-color: #212741;
}

.swiper-slide {
  overflow: hidden;
}

.slide-inner {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-size: cover;
  background-position: center;
}

.swiper-slide-active h2 {
  animation: fadeInLeft .8s;
  -webkit-animation-delay: 1s;
  animation-delay: .3s;
  opacity: 1;
}

.swiper-slide-active p {
  animation: fadeInRight .8s;
  -webkit-animation-delay: 1s;
  animation-delay: .3s;
  opacity: 1;
}

.swiper-slide-active .div-dec {
  animation: fadeIn .8s;
  -webkit-animation-delay: 1s;
  animation-delay: .3s;
  opacity: 1;
}

.swiper-slide-active .buttons .green-button,
.swiper-slide-active .buttons .orange-button {
  animation: fadeInUp .8s;
  -webkit-animation-delay: 1s;
  animation-delay: .3s;
  opacity: 1;
}

.slide-inner .header-text {
  position: absolute;
  width: 50%;
  top: 50%;
  transform: translateY(-50%);
}

.slide-inner .header-text h2 {
  position: relative;
  z-index: 2;
  font-size: 65px;
  color: #fff;
  font-weight: 700;
  opacity: 1;
  visibility: visible;
  line-height: 80px;
  margin-bottom: 40px;
}

@media screen and (max-width: 768px) {
  .slide-inner .header-text h2 {
    position: relative;
    z-index: 2;
    font-size: 2.4rem;
    color: #fff;
    font-weight: 700;
    opacity: 1;
    visibility: visible;
    line-height: 50px;
    margin-bottom: 40px;
  }
}

.slide-inner .header-text .div-dec {
  width: 80px;
  height: 6px;
  border-radius: 3px;
  background-color: #fff;
  margin-bottom: 40px;
  opacity: 1;
  visibility: visible;
}

.slide-inner .header-text p {
  color: #fff;
  margin-right: 60px;
  margin-bottom: 50px;
  opacity: 1;
  visibility: visible;
}

.slide-inner .header-text h2 em {
  font-style: normal;
  color: #FFDD00;
}

.slide-inner .header-text .buttons {
  display: inline;
  opacity: 1;
  visibility: visible;
}

.slide-inner .header-text .buttons .green-button {
  display: inline;
  float: left;
  margin-right: 20px;
}

.swiper-button-next,
.swiper-button-prev {
  color: #fff !important;
}

/*
---------------------------------------------
services
---------------------------------------------
*/

section.services {
  margin-top: 90px;
}

.services .service-item {
  border-radius: 5px;
  padding: 40px;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
  margin-top: 30px;
}

.services .service-item:hover i {
  margin-top: 15px;
}

.services .service-item:hover img {
  margin-top: 15px;
}

.services .service-item h4 {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 20px;
  text-align: center;
}

.services .service-item i {
  transition: all .5s;
  float: left;
  font-size: 64px;
  color: #FFDD00;
  margin-bottom: 30px;
}




/*
---------------------------------------------
cta
---------------------------------------------
*/

section.simple-cta {
  background-image: url(../images/block.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  width: 100%;
  padding: 80px 0px;
}

section.simple-cta .left-image {
  margin-right: 45px;
}

section.simple-cta h4 {
  font-size: 36px;
  font-weight: 700;
  color: #fff;
  line-height: 50px;
}

section.simple-cta h4 em {
  font-style: normal;
  color: #43ba7f;
}

section.simple-cta h4 strong {
  color: #FFDD00;
  font-weight: 700;
}

section.simple-cta p {
  color: #fff;
  margin-top: 30px;
  margin-bottom: 40px;
}

section.simple-cta .buttons {
  display: flex;
  justify-content: end;
}

section.simple-cta .buttons .orange-button {
  margin-left: 20px;
}

section.simple-cta .buttons .orange-button,
section.simple-cta .buttons .green-button {
  margin-top: 25px;
}



/*
---------------------------------------------
about us
---------------------------------------------
*/

section.about-us {
  margin-top: 90px;
}

section.about-us .section-heading {
  padding-top: 30px;
}

section.about-us .naccs {
  position: relative;
}

section.about-us .naccs .menu div {
  padding: 15px 30px;
  display: inline-block;
  text-align: center;
  border-radius: 5px !important;
  margin-right: 30px;
  font-size: 18px;
  color: #212741;
  background-color: #fff;
  cursor: pointer;
  vertical-align: middle;
  font-weight: 600;
  transition: 1s all cubic-bezier(0.075, 0.82, 0.165, 1);
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
}

section.about-us .naccs .menu div.active {
  color: #FFDD00;
}

section.about-us ul.nacc {
  margin-top: 50px !important;
  position: relative;
  min-height: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
}

section.about-us ul.nacc li {
  background-color: #fff;
  overflow: hidden;
  opacity: 0;
  transform: translateX(50px);
  position: absolute;
  list-style: none;
  transition: 1s all cubic-bezier(0.075, 0.82, 0.165, 1);
}

section.about-us ul.nacc li .main-list,
section.about-us ul.nacc li .list-item {
  border-bottom: 1px solid #eee;
  margin-bottom: 25px;
  padding-bottom: 25px;
}

section.about-us ul.nacc li .last-item {
  margin-bottom: 0px;
}

section.about-us ul.nacc li span.title {
  font-size: 15px;
  color: #212741;
  font-weight: 600;
  display: inline-block;
  width: 24%;
}

section.about-us ul.nacc li span.item-title {
  color: #43ba7f !important;
  font-weight: 600 !important;
}

section.about-us ul.nacc li span.item {
  font-size: 15px;
  color: #212741;
  font-weight: 400;
  display: inline-block;
  width: 24%;
}

section.about-us ul.nacc li.active {
  position: relative;
  transition-delay: 0.3s;
  z-index: 2;
  opacity: 1;
  transform: translateX(0px);
}

section.about-us .right-content {
  margin-left: 60px;
}

section.about-us .right-content h4 {
  font-size: 22px;
  font-weight: 700;
  line-height: 40px;
  margin-bottom: 40px;
}

section.about-us .right-content p {
  margin-bottom: 50px;
}


/*
---------------------------------------------
calculator
---------------------------------------------
*/

section.calculator {
  margin-top: 150px;
  background-image: url(../images/contact-bg.png);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  width: 100%;
  padding: 80px 0px;
}

section.calculator .left-image {
  margin: -110px 45px -80px 0px;
}

section.calculator .section-heading {
  text-align: left;
}

section.calculator .section-heading h4 {
  color: #fff;
}

#calculate label {
  color: #fff;
  font-size: 14px;
  margin-bottom: 5px;
}

#calculate input,
#calculate select {
  background-color: rgba(121, 134, 151, 0.7);
  border: none;
  border-radius: 5px;
  width: 100%;
  height: 42px;
  color: #fff;
  font-size: 14px;
  margin-bottom: 30px;
  outline: none;
}

#calculate select {
  cursor: pointer;
}

#calculate button.orange-button {
  font-size: 14px;
  color: #000000;
  background-color: #FFDD00;
  padding: 12px 30px;
  display: inline-block;
  border-radius: 5px;
  font-weight: 500;
  text-transform: capitalize;
  letter-spacing: 0.5px;
  border: none;
  transition: all .3s;
}

#calculate button.orange-button:hover {
  opacity: 0.9;
}



/* 
---------------------------------------------
testimonials
--------------------------------------------- 
*/

section.testimonials {
  margin-top: 90px;
}

section.testimonials .section-heading {
  padding-top: 30px;
}

.testimonials .item {
  border-radius: 15px;
  padding: 50px 320px 50px 50px;
  background-color: #fff;
  position: relative;
  overflow: hidden;
  margin: 15px;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
  padding-top: 35px;
}

.testimonials .item i {
  width: 70px;
  height: 70px;
  background-color: #FFDD00;
  display: inline-block;
  text-align: center;
  line-height: 70px;
  color: #fff;
  font-size: 44px;
  border-radius: 5px;
  margin-bottom: 30px;
}

.testimonials .item p {
  font-size: 16px;
  font-style: italic;
}

.testimonials .item h4 {
  margin-top: 30px;
  font-size: 22px;
  font-weight: 600;
  position: relative;
}

.testimonials .item span {
  margin-top: 5px;
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: #43ba7f;
}

.testimonials .item img {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  max-width: 300px;
  border-radius: 5px;
}

.testimonials .owl-dots {
  text-align: center;
  margin-top: 30px;
}

.testimonials .owl-dots .owl-dot {
  width: 10px;
  height: 10px;
  background-color: #797979;
  border-radius: 50%;
  margin: 0px 4px;
}

.testimonials .owl-dots .active {
  background-color: #FFDD00;
}



/* 
---------------------------------------------
partners
--------------------------------------------- 
*/

section.partners {
  background-color: #212741;
  padding: 80px 0px;
}

section.partners .item {
  margin: 0px 15px;
  cursor: pointer;
  transition: all .3s;
}

section.partners .item:hover {
  opacity: 0.75;
}



/* 
---------------------------------------------
footer 
--------------------------------------------- 
*/

footer {
  background-color: #000000;
  text-align: center;
  padding: 25px 0px;
}

footer p {
  color: #fff;
  font-weight: 300;
}

footer p a {
  color: #FFDD00;
}



/* 
---------------------------------------------
page heading
--------------------------------------------- 
*/

.page-heading {
  background-image: url(../images/heading-bg.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 270px 0px 120px 0px;
  text-align: center;
}

.page-heading h2 {
  font-size: 56px;
  color: #fff;
  font-weight: 700;
}

.page-heading .div-dec {
  width: 80px;
  height: 6px;
  border-radius: 3px;
  background-color: #fff;
  margin: 20px auto 0 auto;
}



/* 
---------------------------------------------
about us page
--------------------------------------------- 
*/

section.top-section .left-image img {
  border-radius: 10px;
}

section.top-section .accordions {
  border-radius: 5px;
  padding: 50px 40px;
  background-color: #fff;
  margin-left: 30px;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
}

.accordions .accordion {
  border-bottom: 1px solid #eee;
}

.accordions .last-accordion {
  border-bottom: none;
}

.accordion-head {
  padding: 35px 0px !important;
  font-size: 22px;
  font-weight: 600;
  color: #212741;
  cursor: pointer;
  transition: color 200ms ease-in-out;

}

@media screen and (min-width: 768px) {
  .accordion-head {
    padding: 1rem;
    font-size: 1.2rem;
  }
}

.accordion-head .icon {
  float: right;
  transition: transform 200ms ease-in-out;
}

.accordion-head.is-open {
  color: #43ba7f;
  border-bottom: none;
}

.accordion-head.is-open .icon {
  transform: rotate(45deg);
}

.accordion-body {
  padding: 0px;
  overflow: hidden;
  height: 0;
  transition: height 300ms ease-in-out;
  border-bottom: 1px solid #fff;
}

.accordion-body>.content p {
  padding: 0px 0px 30px 0px;
  padding-top: 0;
}

section.what-we-do {
  margin-bottom: -30px;
}

.what-we-do .left-content {
  margin-right: 60px;
}

.what-we-do .left-content h4 {
  font-size: 22px;
  font-weight: 700;
  line-height: 40px;
  margin-bottom: 40px;
}

.what-we-do .left-content p {
  margin-bottom: 40px;
}

.what-we-do .right-items .item {
  border-radius: 5px;
  padding: 40px 30px;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
  margin-bottom: 30px;
  position: relative;
}

.what-we-do .right-items .item em {
  position: absolute;
  font-style: normal;
  font-size: 32px;
  color: #000000;
  font-weight: 600;
  right: 15px;
  top: 5px;
  transition: all .3s;
}

.what-we-do .right-items .item h4 {
  font-size: 22px;
  font-weight: 600;
  margin-bottom: 22px;
}

.what-we-do .right-items .item:hover em {
  top: 10px;
}



/* 
---------------------------------------------
services page
--------------------------------------------- 
*/

.main-services .service-item {
  margin-bottom: 60px;
  padding-bottom: 60px;
  border-bottom: 1px solid #ecf8f2;
}

.main-services .last-service {
  border-bottom: none;
  margin-bottom: 0px;
  padding-bottom: 0px;
}

.main-services .left-image {
  margin-right: 15px;
}

.main-services .left-image img {
  border-radius: 5px;
}

.main-services .right-image {
  margin-left: 15px;
}

.main-services .right-image img {
  border-radius: 5px;
}

.main-services .right-text-content {
  margin-left: 15px;
}

.main-services .left-text-content {
  margin-right: 15px;
}

.main-services .right-text-content i,
.main-services .left-text-content i {
  font-size: 64px;
  color: #FFDD00;
  background-color: #f8f7ec;
  width: 120px;
  height: 120px;
  text-align: center;
  display: inline-block;
  line-height: 120px;
  border-radius: 5px;
}

.main-services .right-text-content h4,
.main-services .left-text-content h4 {
  font-size: 36px;
  font-weight: 700;
  color: #212741;
  margin-top: 40px;
  margin-bottom: 30px;
}

section.service-details .naccs {
  position: relative;
}

section.service-details .naccs .menu {
  text-align: center;
}

section.service-details .naccs .menu div {
  padding: 15px 30px;
  display: inline-block;
  text-align: center;
  border-radius: 5px !important;
  margin-right: 30px;
  font-size: 18px;
  color: #212741;
  background-color: #fff;
  cursor: pointer;
  vertical-align: middle;
  font-weight: 600;
  transition: 1s all cubic-bezier(0.075, 0.82, 0.165, 1);
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
}

section.service-details .naccs .menu div.active {
  color: #FFDD00;
}

section.service-details ul.nacc {
  margin-top: 50px !important;
  position: relative;
  min-height: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
}

section.service-details ul.nacc li {
  background-color: #fff;
  overflow: hidden;
  opacity: 0;
  transform: translateX(50px);
  position: absolute;
  list-style: none;
  border-radius: 10px;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
  transition: 1s all cubic-bezier(0.075, 0.82, 0.165, 1);
}

section.service-details ul.nacc li .left-image {
  position: absolute;
  margin-left: 30px;
  top: 50%;
  transform: translateY(-50%);
}

section.service-details ul.nacc li .left-image img {
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
}

section.service-details ul.nacc li .right-content {
  padding: 50px 50px 50px 0px;
  margin-left: 470px;
}

section.service-details ul.nacc li .right-content h4 {
  font-size: 24px;
  color: #212741;
  margin-bottom: 25px;
  font-weight: 700;
  line-height: 40px;
  margin-right: 120px;
}

section.service-details ul.nacc li .right-content ul {
  margin-top: 20px;
  margin-bottom: 20px;
}

section.service-details ul.nacc li .right-content span {
  display: block;
  font-size: 15px;
  font-weight: 500;
  color: #212741;
  font-style: italic;
  margin-bottom: 12px;
}

section.service-details ul.nacc li .right-content .last-span {
  margin-bottom: 0px;
}

section.service-details ul.nacc li .right-content p {
  margin-bottom: 30px;
}

section.service-details ul.nacc li.active {
  position: relative;
  transition-delay: 0.3s;
  z-index: 2;
  opacity: 1;
  transform: translateX(0px);
}



/* 
---------------------------------------------
contact us page
--------------------------------------------- 
*/

section.map .info-item {
  text-align: center;
  padding: 40px 30px;
  border-radius: 5px;
  background-color: #fff;
  box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
  margin-top: -60px;
  margin-left: 15px;
  margin-right: 15px;
  position: relative;
  z-index: 2;
  transition: all .5s;
}

section.map .info-item:hover {
  margin-top: -70px;
}

section.map .info-item i {
  font-size: 36px;
  color: #FFDD00;
  margin-bottom: 25px;
}

section.map .info-item h4 {
  font-size: 18px;
  color: #212741;
  font-weight: 600;
  margin-bottom: 12px;
}

section.map .info-item a {
  font-size: 15px;
  font-weight: 600;
  color: #c5ab00;
  transition: all 0.3s;
}

section.map .info-item a:hover {
  color: #FFDD00;
}

#contact input {
  width: 100%;
  height: 50px;
  background-color: #f7f7f7;
  color: #212741;
  border-radius: 5px;
  border: none;
  padding: 0px 15px;
  font-size: 14px;
  outline: none;
  margin-bottom: 30px;
}

#contact textarea {
  width: 100%;
  height: 180px;
  max-height: 24px;
  min-height: 150px;
  background-color: #f7f7f7;
  color: #212741;
  border-radius: 5px;
  border: none;
  padding: 15px 15px;
  font-size: 14px;
  outline: none;
  margin-bottom: 30px;
}

#contact input::placeholder,
#contact textarea::placeholder {
  color: #212741;
}

#contact button.orange-button {
  font-size: 14px;
  color: #fff;
  background-color: #FFDD00;
  padding: 12px 30px;
  display: inline-block;
  border-radius: 5px;
  font-weight: 500;
  text-transform: capitalize;
  letter-spacing: 0.5px;
  border: none;
  transition: all .3s;
}

#contact button.orange-button:hover {
  background-color: #43ba7f;
}

/*it's me*/
.whatsapp_ico {
  position: fixed;
  width: 3rem;
  bottom: 3vh;
  right: 2vw;
  z-index: 2;
}

@media (max-width: 992px) {}

.fixed-box {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 105;
}

.fade-up {
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.6s ease;
}

.fade-up.show {
  opacity: 1;
  transform: translateY(0);
}

/*HEADER UP*/
.header-up {
  width: 100%;
  background-color: #000000;
  z-index: 99;
  overflow: hidden;
}

/* Adres yazısı */
.header-up p {
  margin: 0;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* İkonlar */
.header-up i {
  color: white;
  font-size: 18px;
  margin: 10px;
  padding-block: 10px;
}

@media (max-width: 992px) {

  /* İkonların olduğu kolon gizlenir */
  .header-up .col-lg-2 {
    display: none !important;
  }

  /* Adres tam genişlik */
  .header-up .col-lg-10 {
    width: 100%;
    text-align: center;
  }

  .header-up p {
    font-size: 14px;
    white-space: normal;
    /* Mobilde satır kırılabilir */
    line-height: 1.4;
  }

  .header-area {
    height: 170px;
  }

  .header-area.header-sticky {
    min-height: 145px;
  }
}

@media (max-width: 768px) {
  .header-up p {
    font-size: 12px;
    white-space: normal;
    /* Mobilde satır kırılabilir */
    line-height: 1.4;
  }

  .header-area.header-sticky {
    min-height: 180px !important;
  }

  .header-area .main-nav .menu-trigger {
    top: 120px !important;
  }
}

/*HEADER UP FINISH*/
/* 
---------------------------------------------
responsive
--------------------------------------------- 
*/


body {
  overflow-x: hidden;
}

@media (max-width: 992px) {
  .header-area .main-nav .nav li:last-child {
    display: none;
  }

  .header-area .main-nav .nav li ul li:last-child {
    display: inline-block;
  }

  .header-area {
    background-color: #000000;
  }

  .slide-inner .header-text {
    width: 80%;
  }

  .simple-cta {
    text-align: center;
  }

  section.simple-cta .buttons {
    justify-content: center;
  }

  section.about-us .naccs .menu div,
  section.service-details .naccs .menu div {
    margin-right: 15px;
    font-size: 15px;
    padding: 15px 20px;
  }

  section.about-us .right-content {
    margin-left: 0px;
    margin-top: 60px;
  }

  section.calculator .left-image {
    display: none;
  }

  .testimonials .item img {
    max-width: 200px;
    right: 50px;
  }

  section.partners .item {
    margin: 15px;
  }

  section.top-section .accordions {
    margin-left: 0px;
    margin-top: 45px;
  }

  .what-we-do .left-content {
    margin-right: 0px;
    margin-bottom: 45px;
  }

  .main-services .left-image {
    margin-right: 0px;
    margin-bottom: 30px;
  }

  .main-services .right-text-content {
    margin-left: 0px;
  }

  .main-services .right-image {
    margin-left: 0px;
    margin-top: 30px;
  }

  section.service-details ul.nacc li .left-image {
    position: relative;
    margin-right: 0px;
    transform: translateY(0px);
  }

  section.service-details ul.nacc li .left-image img {
    border-radius: 15px;
  }

  section.service-details ul.nacc li .right-content {
    padding: 50px;
    margin-left: 0px;
  }

  section.service-details ul.nacc li .right-content h4 {
    margin-right: 0px;
  }

  section.service-details ul.nacc li.active {
    display: inline-block;
  }

  section.service-details ul.nacc li {
    display: none;
  }

  section.map .info-item {
    margin-top: 30px;
  }

  .background-header {
    height: 80px !important;
  }

}

@media (max-width: 767px) {
  .header-area .main-nav .logo {
    line-height: 100px;
  }

  .background-header .main-nav .logo {
    line-height: 80px;
  }

  .header-area .main-nav .nav li.has-sub ul.sub-menu {
    display: none;
  }

  .slide-inner .header-text p {
    display: none;
  }

  .slide-inner .header-text {
    text-align: center;
    width: 80%;
    margin-left: 8%;
    margin-right: 10%;
  }

  .slide-inner .header-text .div-dec {
    margin-left: auto;
    margin-right: auto;
  }

  .slide-inner .header-text .buttons {
    display: inline-flex;
  }

  .slide-inner .header-text .buttons .green-button {
    float: none;
  }

  .services .service-item i {
    margin-bottom: 35px;
  }

  section.about-us ul.nacc li span.item-title {
    font-size: 14px !important;
  }

  section.about-us ul.nacc li span.item {
    font-size: 13px;
  }

  .testimonials .item i {
    margin-bottom: 60px;
  }

  .testimonials .item img {
    max-width: 100px;
    right: 50px;
    top: 35px;
    transform: translateY(0);
  }

  .testimonials .item {
    padding: 50px;
  }

  .header-area .main-nav .logo {
    width: 45%;
  }

  .header-up {
    display: block;
  }

}

.footer-main {
  height: 300px;
}

.footer-item {
  width: 100%;
  height: 100%;
}

.footer-main img {
  width: 70%;
}

.footer-main p {
  text-align: justify;
  padding-top: 15px;
  padding-inline: 15px;
}

.footer-icon i {
  color: white;
  padding-top: 20px;
  font-size: 18px;
  padding-inline: 10px;
}

/* FOOTER ANA YAPI */
.footer-main {
  display: flex;
  gap: 40px;
}

/* FOOTER KOLON */
.footer-item {
  flex: 1;
}

/* BAŞLIK */
.footer-item h5 {
  color: #FFDD00;
  margin-bottom: 15px;
}

/* LİSTE */
.footer-page {
  list-style: none;
  padding-left: 36%;
  margin: 0;
}

/* LİSTE SATIRI */
.footer-page li {
  margin-bottom: 10px;
}

/* LİNK + İKON HİZASI */
.footer-page li a {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: white;
  text-decoration: none;
  position: relative;
}

/* FONT AWESOME DAİRE */
.footer-page li a i {
  font-size: 8px;
  color: #ffffff;
  flex-shrink: 0;
}

/* HOVER ALT ÇİZGİ */
.footer-page li a::after {
  content: "";
  position: absolute;
  left: 18px;
  /* ikon sonrası başlasın */
  bottom: -3px;
  width: 0;
  height: 1px;
  background-color: white;
  transition: width 0.3s ease;
}

.footer-page li a:hover::after {
  width: calc(100% - 18px);
}

/*3*/
.footer-adres {
  display: flex;
  flex-direction: row;
  align-items: center;
  border-bottom: 1px solid white;
  margin-block: 15px;
}

.footer-adres p {
  color: white;
  text-align: center;
  margin: 0px !important;
  padding-block: 5px !important;
  width: 25rem;
}

.footer-adres i {
  color: white;
}

/* =========================
   MOBİL FOOTER FIX
   ========================= */
@media (max-width: 768px) {

  /* ana kapsayıcı */
  .footer-main {
    display: block !important;
    /* flex'i tamamen kapat */
    height: auto !important;
    /* 300px'i iptal */
  }

  /* kolonlar */
  .footer-item {
    width: 100%;
    height: auto !important;
    /* 100% zincirini kır */
    margin-bottom: 30px;
    text-align: center;
  }

  /* logo */
  .footer-main img {
    width: 50% !important;
    display: block;
    margin: 0 auto;
  }

  /* metin */
  .footer-main p {
    text-align: center !important;
  }

  /* ikonlar */
  .footer-icon {
    justify-content: center !important;
  }

  /* sayfa listesi */
  .footer-page {
    padding-left: 0 !important;
  }

  .footer-page li a {
    justify-content: center;
  }

  /* adres */
  .footer-adres {
    flex-direction: column !important;
    align-items: center !important;
    text-align: center;
  }

  .footer-adres p {
    width: 100% !important;
  }
}

/* =========================
   TABLET FIX (768px - 991px)
   ========================= */
@media (max-width: 991px) and (min-width: 769px) {

  .footer-main {
    gap: 20px;
    height: auto;
  }

  .footer-item {
    height: auto;
  }

  /* sayfa listesi ortalama */
  .footer-page {
    padding-left: 0;
  }

  .footer-page li a {
    justify-content: flex-start;
  }

  /* adres metni daralt */
  .footer-adres p {
    width: 100%;
    font-size: 14px;
  }

  /* yazı taşmasını önle */
  .footer-main p {
    font-size: 14px;
  }
}

.yellow-button a {
  color: #000000 !important;
}

.yellow-button a:hover {
  color: #FFDD00 !important;
}

.section-close {
  margin-top: 0px !important;
}

#calculate input::placeholder,
#calculate textarea::placeholder {
  color: #ffffff;
  /* Sartek yeşili gibi bir renk yapabilirsin */
  font-style: italic;
  /* İstersen italik yaparak daha şık gösterebilirsin */
  opacity: .75;
}

/* Select etiketinin genel rengini belirle (Placeholder rengi gibi) */
#calculate select {
  color: #ffffff;
  font-style: italic;
  /* İstersen italik yaparak daha şık gösterebilirsin */
  /* Buraya placeholder için istediğin rengi yaz */
}

/* Seçeneklerin içindeki metinleri normal renge (siyah) döndür */
#calculate select option {
  color: #ffffff;
  font-style: italic;
  /* İstersen italik yaparak daha şık gösterebilirsin */
}

/*bayiliklerimiz*/

/* Logo Kartı Tasarımı */
.logo-card {
  background-color: #ffdd0000;
  /* İstediğin gri arka plan */
  border: 1px solid #000000;
  /* İnce kırmızı çerçeve */
  border-radius: 4px;
  /* Köşeleri hafif yuvarlat */
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 150px;
  /* Kart yüksekliği sabitleme */
  transition: all 0.3s ease;
  /* Efekt geçiş hızı */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

/* Üzerine gelince (Hover) efekti */
.logo-card:hover {
  background-color: #FFDD00;
  /* Hover yapınca gri tonu biraz daha koyulaşır */
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
  transform: translateY(-5px);
  /* Hafif yukarı kalkma */
}

/* Logoların kart dışına taşmasını engeller ve ortalar */
.logo-card img {
  max-height: 80%;
  max-width: 90%;
  object-fit: contain;
  filter: grayscale(10%);
  /* Hafif gri ton */
  transition: filter 0.3s ease;
}

.logo-card:hover img {
  filter: grayscale(0%);
  /* Üzerine gelince tam renkli olur */
}

/*CARD DESİGN*/

.sartek-card {
  background: #ffffff;
  border-radius: 20px;
  /* Dikey boşluğu doldurmak için padding artırıldı */
  padding: 80px 50px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  border-left: 6px solid #000000;
  /* Kurumsal mavi */
  position: relative;
  overflow: hidden;

  /* --- İSTEDİĞİN O ANİMASYON GEÇİŞİ --- */
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* Kartın Üzerine Gelince (Hover) */
.sartek-card:hover {
  transform: translateY(-10px);
  /* Havalı yukarı kalkma efekti */
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
  /* Derinleşen gölge */
  border-left-color: #ffdd00;
  /* Hoverda çizgi rengi değişebilir (isteğe bağlı) */
}

/* Başlık ve Metin Animasyonu */
.sartek-card-header h3,
.sartek-card-body p {
  transition: transform 0.4s ease;
}

.sartek-card:hover .sartek-card-header h3 {
  transform: translateY(-3px);
  color: #d6ba00;
}

/* Kartın içine şık bir yansıma efekti (İsteğe bağlı) */
.sartek-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
  transition: 0.5s;
}

.sartek-card:hover::before {
  left: 100%;
  /* Üzerine gelince bir ışık huzmesi geçer */
}

/* Metin Stilleri */
.sartek-card-header h3 {
  font-size: 30px;
  font-weight: 800;
  margin-bottom: 25px;
  color: #222;
}

.sartek-card-body p {
  font-size: 18px;
  line-height: 1.9;
  color: #555;
  margin: 0;
}

/*logos*/

.partners-section {
  padding: 60px 0;
  background-color: #f8f9fa;
  /* Hafif gri arka plan logoları ön plana çıkarır */
}

.partners-section {
  padding: 80px 0;
  /* Üstten ve alttan daha fazla boşluk */
  background-color: #f8f9fa;
  /* Hafif gri arka plan */
}

.section-title {
  font-size: 38px;
  font-weight: 700;
  color: #333;
  margin-bottom: 15px;
}

.section-description {
  font-size: 18px;
  color: #666;
  margin-bottom: 50px;
}

.partner-card {
  background: #ffffff;
  height: 160px;
  /* Kart yüksekliği artırıldı */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  /* Hafif belirgin border */
  box-shadow: 0 5px 18px rgba(0, 0, 0, 0.03);
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  cursor: pointer;
  overflow: hidden;
  /* Taşmayı engellemek için */
}

.partner-card img {
  max-width: 90%;
  /* Logoların genişliği artırıldı */
  max-height: 80%;
  /* Logoların yüksekliği artırıldı */
  object-fit: contain;
}

/* --- Hover Efektleri --- */
.partner-card:hover {
  transform: translateY(-10px);
  /* Yukarı kalkma efekti daha belirgin */
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
  /* Gölgelendirme daha belirgin */
  border-color: #FFDD00;
  /* Firma renginiz (sarı) border */
  background: #fff;
}

.partner-card:hover img {
  filter: grayscale(0%);
  /* Renklenir */
  opacity: 1;
  /* Tamamen belirginleşir */
  transform: scale(1.08);
  /* Hafif büyüme efekti daha belirgin */
}

/* Mobilde ve tabletlerde daha iyi görünüm için */
@media (max-width: 768px) {
  .partner-card {
    height: 140px;
    /* Tablet ve mobil için kart yüksekliği */
    padding: 15px;
  }

  .section-title {
    font-size: 32px;
  }
}

@media (max-width: 576px) {
  .partner-card {
    height: 120px;
    /* Daha küçük ekranlar için kart yüksekliği */
    padding: 10px;
  }

  .section-title {
    font-size: 28px;
  }
}

/*BAYİLİK LOGO*/

/* Section Genel */
.bayilikler-section {
  background-color: #ffffff;
  padding: 100px 0;
}

.bayilik-title {
  font-size: 36px;
  font-weight: 800;
  color: #222;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.title-line {
  width: 80px;
  height: 4px;
  background-color: #ffdd00;
  /* Firma Rengi */
  margin: 0 auto 40px;
  border-radius: 2px;
}

/* 5'li Sıralama İçin Yardımcı Sınıf (Büyük ekranlarda şık durur) */
@media (min-width: 1200px) {
  .col-xl-2-4 {
    flex: 0 0 auto;
    width: 20%;
  }
}

/* Kart Tasarımı */
.bayilik-card {
  height: 150px;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 12px;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.02);
}

.bayilik-card img {
  max-height: 85%;
  max-width: 85%;
  object-fit: contain;
  transition: all 0.4s ease;
}

/* Hover Efektleri */
.bayilik-card:hover {
  transform: translateY(-8px);
  border-color: #ffdd00;
  box-shadow: 0 15px 30px rgba(255, 221, 0, 0.15);
  /* Sarımsı hafif gölge */
}

/* Kartın altındaki sarı çizgi efekti */
.bayilik-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 4px;
  background-color: #ffdd00;
  transition: width 0.4s ease;
}

.bayilik-card:hover::after {
  width: 100%;
}

.bayilik-card:hover img {
  transform: scale(1.1);
  /* Logo büyütme */
}

/* Mobil Düzenlemeler */
@media (max-width: 768px) {
  .bayilik-card {
    height: 120px;
    padding: 15px;
  }

  .bayilik-title {
    font-size: 28px;
  }
}

/*resim adam*/

/* Varsayılan: Masaüstü (1400px ve üzeri) */
.responsive-calc-img {
  width: 82% !important;
  display: block;
  margin: 0 auto;
  /* Resmi ortalamak istersen */
  height: auto;
  /* Oranların bozulmaması için */
}

/* 1400px'den küçük olduğunda */
@media (max-width: 1400px) {
  .responsive-calc-img {
    width: 82% !important;
  }
}

/* 1200px'den küçük olduğunda */
@media (max-width: 1200px) {
  .responsive-calc-img {
    width: 100% !important;
  }
}

/*800 px den küçük*/

@media screen and (max-height: 800px) {
  .header-text h2 {
    font-size: 50px !important;
    line-height: 50px !important;
  }
}

/*HAKKIMIZDA*/
:root {
  --sartek-yellow: #ffdd00;
  --sartek-black: #111111;
}

.sartek-animated-about {
  background: #ffffff;
  padding: 120px 0;
  font-family: 'Poppins', sans-serif;
  overflow: hidden;
}

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Başlık Stili */
.main-title {
  font-size: clamp(32px, 5vw, 60px);
  font-weight: 900;
  line-height: 1.1;
  color: var(--sartek-black);
  margin-bottom: 60px;
  text-transform: uppercase;
}

.highlight-line {
  background: linear-gradient(180deg, transparent 60%, var(--sartek-yellow) 60%);
  display: inline-block;
}

.text-stroke {
  -webkit-text-stroke: 1px var(--sartek-black);
  color: transparent;
}

/* Grid Yapısı */
.description-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 50px;
  align-items: center;
}

.p-large {
  font-size: 22px;
  font-weight: 600;
  color: var(--sartek-black);
  margin-bottom: 20px;
}

.brand-name {
  border-bottom: 4px solid var(--sartek-yellow);
}

.p-sub {
  font-size: 18px;
  color: #555;
  line-height: 1.7;
}

/* Sarı Kart Tasarımı */
.yellow-card {
  background-color: var(--sartek-yellow);
  padding: 40px;
  border-radius: 0;
  position: relative;
  box-shadow: 20px 20px 0px var(--sartek-black);
}

.yellow-card p {
  font-size: 20px;
  font-weight: 800;
  color: var(--sartek-black);
  position: relative;
  z-index: 2;
}

/* ANIMASYONLAR */
.reveal {
  animation: fadeInUp 1s ease forwards;
}

.reveal-left {
  animation: fadeInLeft 1.2s ease forwards;
}

.reveal-right {
  animation: fadeInRight 1.4s ease forwards;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(50px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Mobil Uyumluluk */
@media (max-width: 768px) {
  .description-grid {
    grid-template-columns: 1fr;
  }

  .yellow-card {
    box-shadow: 10px 10px 0px var(--sartek-black);
  }
}

/*bayilik fix*/

/* --- PARTNER SLIDER & POP-UP GÜNCEL CSS --- */

/* Kartların Ana Görünümü */
.partner-card {
  background: #fff;
  padding: 20px;
  margin: 10px;
  height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #f0f0f0;
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
  position: relative;
  overflow: hidden;
}

.partner-card:hover {
  border-color: var(--sartek-yellow);
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
}

.partner-card img {
  max-width: 85%;
  max-height: 85%;
}

.partner-card:hover img {
  filter: grayscale(0%);
  /* Üstüne gelince renkli olsun */
  opacity: 1;
}

/* Modern Modal (Pop-up) Tasarımı */
.custom-sartek-modal {
  border: none;
  border-radius: 0;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);
}

/* Sol Sarı Panel */
.brand-side {
  background-color: var(--sartek-yellow);
  min-height: 250px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.modal-brand-logo {
  max-height: 140px;
  width: auto;
  filter: drop-shadow(0 10px 15px rgba(0, 0, 0, 0.1));
}

/* Sağ İçerik Paneli */
.content-side {
  background: #fff;
  position: relative;
}

.modal-brand-title {
  font-weight: 900;
  font-size: 24px;
  color: var(--sartek-black);
  text-transform: uppercase;
  border-left: 6px solid var(--sartek-yellow);
  padding-left: 15px;
  line-height: 1;
}

.brand-description p {
  font-size: 16px;
  line-height: 1.8;
  color: #444;
  text-align: justify;
  margin-top: 20px;
}

/* Kapatma Butonu Düzenleme */
.btn-close:focus {
  box-shadow: none;
}

/* Mobilde Görünüm */
@media (max-width: 768px) {
  .brand-side {
    min-height: 180px;
  }

  .content-side {
    padding: 30px 20px !important;
  }

  .modal-brand-title {
    font-size: 20px;
  }
}

/* Satırdaki sütunları aynı yüksekliğe zorlar ABOUT US */
.right-items .row {
  display: flex;
  flex-wrap: wrap;
}

/* Sütun içindeki 'item' class'ının tüm yüksekliği kaplamasını sağlar */
.right-items .col-lg-6 {
  display: flex;
  flex-direction: column;
}

.right-items .item {
  flex: 1;
  /* Mevcut boşluğu doldurur */
  display: flex;
  flex-direction: column;
  margin-bottom: 30px;
  /* Kutular arası alt boşluk (isteğe bağlı) */
}