/*

1. Add your custom Css styles below
2. Place the this code in your template:

 <link href="css/custom.css" rel="stylesheet">

*/

#header,
#header.sticky-active,
#header.header-sticky {
   background: #252c32 !important;
   position: relative;
}

#header .header-inner,
#header.sticky-active .header-inner,
#header.header-sticky .header-inner {
   background: #252c32 !important;
}

#header #mainMenu nav > ul > li > a,
#header.sticky-active #mainMenu nav > ul > li > a,
#header.header-sticky #mainMenu nav > ul > li > a {
   color: #fff;
}

#header #mainMenu nav > ul > li.kurumsal-btn > a,
#header.sticky-active #mainMenu nav > ul > li.kurumsal-btn > a,
#header.header-sticky #mainMenu nav > ul > li.kurumsal-btn > a {
   color: #fff !important;
   background: #e03c39;
}

#header .header-extras > ul > li > div > a,
#header .header-extras > ul > li > a,
#header .header-extras > ul > li > div > a > i,
#header .header-extras > ul > li > a > i,
#header.sticky-active .header-extras > ul > li > div > a,
#header.sticky-active .header-extras > ul > li > a,
#header.sticky-active .header-extras > ul > li > div > a > i,
#header.sticky-active .header-extras > ul > li > a > i,
#header.header-sticky .header-extras > ul > li > div > a,
#header.header-sticky .header-extras > ul > li > a,
#header.header-sticky .header-extras > ul > li > div > a > i,
#header.header-sticky .header-extras > ul > li > a > i {
   color: #fff !important;
}

#header .header-extras .p-dropdown-content a,
#header.sticky-active .header-extras .p-dropdown-content a,
#header.header-sticky .header-extras .p-dropdown-content a {
   color: #222 !important;
}

#header .logo-dark {
   display: none !important;
}

#header .lines,
#header .lines:before,
#header .lines:after,
#header.sticky-active .lines,
#header.sticky-active .lines:before,
#header.sticky-active .lines:after,
#header.header-sticky .lines,
#header.header-sticky .lines:before,
#header.header-sticky .lines:after {
   background: #fff !important;
}

@media (max-width: 991px) {
   #header #mainMenu,
   #header.sticky-active #mainMenu,
   #header.header-sticky #mainMenu,
   #header #mainMenu > .container,
   #header.sticky-active #mainMenu > .container,
   #header.header-sticky #mainMenu > .container {
      background: #fff !important;
   }
   #header #mainMenu nav > ul > li > a,
   #header.sticky-active #mainMenu nav > ul > li > a,
   #header.header-sticky #mainMenu nav > ul > li > a {
      color: #222 !important;
   }
   #header #mainMenu nav > ul > li.kurumsal-btn > a,
   #header.sticky-active #mainMenu nav > ul > li.kurumsal-btn > a,
   #header.header-sticky #mainMenu nav > ul > li.kurumsal-btn > a {
      color: #fff !important;
   }
   #header #mainMenu nav > ul > li.nav-lang > a,
   #header #mainMenu nav > ul > li.nav-lang > a > i {
      color: #222 !important;
   }
   body.mainMenu-open {
      overflow: hidden;
   }
   .mainMenu-open #header #mainMenu {
      width: 100% !important;
      overflow-y: visible !important;
   }
   body.mainMenu-open #header,
   body.mainMenu-open #header.sticky-active,
   body.mainMenu-open #header.header-sticky,
   body.mainMenu-open #header .header-inner,
   body.mainMenu-open #header.sticky-active .header-inner,
   body.mainMenu-open #header.header-sticky .header-inner {
      background: #fff !important;
   }
   body.mainMenu-open #header .lines,
   body.mainMenu-open #header .lines:before,
   body.mainMenu-open #header .lines:after {
      background: #222 !important;
   }
}

#header #logo .logo-default {
   display: inline-block !important;
   max-height: 56px;
   height: auto;
   width: auto;
}

#header .header-inner #logo,
#header #header-wrap #logo {
   height: 100%;
   width: 80px;
}

#header .header-inner #logo > a,
#header #header-wrap #logo > a {
   display: flex !important;
   align-items: center;
   justify-content: flex-start;
   height: 100%;
}

@media (min-width: 992px){
   #header .header-inner > .container {
      display: flex !important;
      align-items: center;
      justify-content: space-between;
      gap: 24px;
      height: 100%;
      float: none !important;
   }
   #header #logo {
      display: flex !important;
      align-items: center;
      height: auto !important;
      position: static !important;
      float: none !important;
      left: auto !important;
      top: auto !important;
      margin: 0 !important;
      padding: 0 !important;
      flex: 0 0 auto;
   }
   #header #logo > a {
      display: flex;
      align-items: center;
   }
}

@media (min-width: 992px){
   #header #mainMenu {
      display: flex !important;
      align-items: center;
      flex: 1 1 auto;
      justify-content: flex-end;
      position: static !important;
      float: none !important;
   }
   #header #mainMenu > .container {
      display: flex !important;
      align-items: center;
      justify-content: flex-end;
      width: 100%;
      padding: 0 !important;
      float: none !important;
   }
   #header #mainMenu nav {
      display: flex !important;
      align-items: center;
      float: none !important;
   }
   #header #mainMenu nav > ul {
      display: flex !important;
      align-items: center;
      gap: 4px;
      margin: 0;
      padding: 0;
      list-style: none;
      float: none !important;
   }
   #header #mainMenu nav > ul > li {
      float: none !important;
      display: flex;
      align-items: center;
   }
}

#header .header-inner,
#header .header-inner > .container,
#header #mainMenu,
#header #mainMenu > .container,
#header #mainMenu nav,
#header #mainMenu nav > ul,
#header #mainMenu nav > ul > li.has-mega {
   position: static;
}

#header .header-inner > .container {
   padding-left: 15px !important;
   padding-right: 15px !important;
   max-width: 1200px !important;
   margin-left: auto;
   margin-right: auto;
}

@media (max-width: 991px){
   #header .header-inner > .container {
      padding-left: 24px !important;
      padding-right: 24px !important;
   }
}

#mainMenu nav > ul > li.kurumsal-btn > a {
   background: #e03c39;
   color: #fff !important;
   padding: 10px 22px;
   border-radius: 4px;
}

#mainMenu nav > ul > li.nav-lang {
   position: relative;
}

#mainMenu nav > ul > li.nav-lang > a > i {
   margin-right: 4px;
}

#mainMenu nav > ul > li.nav-lang .lang-dropdown {
   position: absolute;
   top: 100%;
   left: 0;
   min-width: 110px;
   background: #fff;
   list-style: none;
   margin: 0;
   padding: 4px 0;
   box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
   border-radius: 4px;
   opacity: 0;
   visibility: hidden;
   transform: translateY(8px);
   transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
   z-index: 99;
}

#mainMenu nav > ul > li.nav-lang:hover .lang-dropdown {
   opacity: 1;
   visibility: visible;
   transform: translateY(0);
}

#mainMenu nav > ul > li.nav-lang .lang-dropdown li {
   list-style: none;
   line-height: 1;
   padding: 0;
   margin: 0;
   height: auto;
   display: block;
}

#mainMenu nav > ul > li.nav-lang .lang-dropdown li a {
   display: block;
   padding: 8px 16px !important;
   color: #222 !important;
   font-size: 15px !important;
   line-height: 1.4 !important;
   text-decoration: none;
   height: auto !important;
   background: transparent !important;
}

#mainMenu nav > ul > li.nav-lang .lang-dropdown li a:hover {
   background: #f5f5f5 !important;
   color: #e03c39 !important;
}

#mainMenu nav > ul > li.kurumsal-btn > a:hover {
   background: #c3322f;
}

.mega-dropdown {
   position: absolute;
   top: 100%;
   left: 50%;
   width: 100vw;
   background: #fff;
   box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
   padding: 32px 40px;
   opacity: 0;
   visibility: hidden;
   transform: translateX(-50%) translateY(8px);
   transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease;
   z-index: 99;
}

#mainMenu nav > ul > li.has-mega:hover .mega-dropdown {
   opacity: 1;
   visibility: visible;
   transform: translateX(-50%) translateY(0);
}

@media (min-width: 1200px) {
   .container {
      max-width: 1400px;
   }
}

#page-title,
#page-title.halfscreen,
#page-title.page-title-short {
   padding: 170px 0 100px;
   min-height: 0;
   height: auto;
}

@media (max-width: 767px) {
   #page-title,
   #page-title.halfscreen,
   #page-title.page-title-short {
      padding: 130px 0 70px;
   }
}

.mega-grid {
   display: grid;
   grid-template-columns: repeat(8, 1fr);
   gap: 8px;
   max-width: 1400px;
   margin: 0 auto;
   padding: 0 15px;
}

.mega-card {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: flex-start;
   text-align: center;
   padding: 14px 8px;
   border: 1px solid #ececec;
   border-radius: 6px;
   text-decoration: none;
   color: #222 !important;
   background: #fff;
   transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.mega-card:hover {
   border-color: #e03c39;
   transform: translateY(-3px);
   box-shadow: 0 6px 18px rgba(238, 91, 58, 0.15);
}

.mega-card i {
   font-size: 30px;
   color: #e03c39;
   margin-bottom: 12px;
   line-height: 1;
}

.mega-card .mc-title {
   font-weight: 700;
   font-size: 14px;
   letter-spacing: 0.4px;
   line-height: 1.3;
   margin-bottom: 8px;
   color: #222;
}

.mega-card .mc-desc {
   font-size: 13px;
   color: #777;
   line-height: 1.5;
   margin: 0;
}

@media (max-width: 991px) {
   #mainMenu nav > ul {
      display: flex;
      flex-direction: column;
   }
   #mainMenu nav > ul > li {
      display: none !important;
   }
   #mainMenu nav > ul > li.has-mega,
   #mainMenu nav > ul > li.nav-lang {
      display: block !important;
   }
   #mainMenu nav > ul > li.has-mega {
      order: 1;
   }
   #mainMenu nav > ul > li.nav-lang {
      order: 2;
      margin-top: 12px;
      padding-top: 12px;
   }
   #mainMenu nav > ul > li.nav-lang > a::after {
      content: "\e92e";
      font-family: "inspiro-icons";
      margin-left: 8px;
      font-size: 14px;
      display: inline-block;
      transition: transform 0.2s ease;
   }
   #mainMenu nav > ul > li.nav-lang.lang-open > a::after {
      transform: rotate(180deg);
   }
   #mainMenu nav > ul > li.nav-lang .lang-dropdown {
      position: static;
      opacity: 0;
      visibility: hidden;
      transform: none;
      box-shadow: none;
      background: transparent;
      padding: 0;
      margin-top: 0;
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.25s ease, opacity 0.2s ease, margin-top 0.2s ease;
   }
   #mainMenu nav > ul > li.nav-lang.lang-open .lang-dropdown {
      opacity: 1;
      visibility: visible;
      max-height: 200px;
      margin-top: 4px;
   }
   #mainMenu nav > ul > li.has-mega.kurumsal-btn > a {
      background: transparent !important;
      color: #e03c39 !important;
      padding: 0 0 8px !important;
      border-radius: 0 !important;
      pointer-events: none;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 1.5px;
   }
   .mega-dropdown {
      position: static;
      width: 100%;
      opacity: 1 !important;
      visibility: visible !important;
      transform: none !important;
      box-shadow: none;
      background: transparent;
      padding: 0;
   }
   .mega-grid {
      display: flex;
      flex-direction: column;
      gap: 0;
      padding: 0;
      max-width: 100%;
   }
   .mega-card {
      flex-direction: row;
      align-items: center;
      justify-content: flex-start;
      text-align: left;
      gap: 14px;
      padding: 14px 4px;
      border: none;
      border-bottom: 1px solid #ececec;
      border-radius: 0;
      background: transparent;
   }
   .mega-card:hover {
      border-color: transparent;
      border-bottom-color: #ececec;
      transform: none;
      box-shadow: none;
   }
   .mega-card i {
      margin-bottom: 0;
      font-size: 22px;
      width: 28px;
      text-align: center;
      flex-shrink: 0;
   }
   .mega-card .mc-title {
      margin-bottom: 2px;
      font-size: 14px;
   }
   .mega-card .mc-desc {
      display: none;
   }
}

.solutions-grid {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 28px;
   max-width: 980px;
   margin: 0 auto;
}

.solution-card {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   text-align: center;
   padding: 38px 20px;
   border: 1px solid #ececec;
   border-radius: 8px;
   background: #fcfcfc;
   cursor: pointer;
   transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.solution-card:hover {
   border-color: #e03c39;
   transform: translateY(-3px);
   box-shadow: 0 8px 24px rgba(224, 60, 57, 0.12);
}

.solution-card .sc-icon {
   width: 72px;
   height: 72px;
   border-radius: 50%;
   border: 1px solid #e6e6e6;
   display: flex;
   align-items: center;
   justify-content: center;
   margin-bottom: 18px;
}

.solution-card .sc-icon i {
   font-size: 30px;
   color: #444;
   line-height: 1;
}

.solution-card .sc-title {
   font-size: 15px;
   font-weight: 600;
   color: #222;
   letter-spacing: 0.3px;
}

.solutions-list {
   display: grid;
   grid-template-columns: max-content max-content;
   justify-content: space-evenly;
   gap: 10px 0;
   max-width: 980px;
   margin: 50px auto 0 auto;
   padding: 32px 0;
   border: 1px solid #e6e6e6;
   border-radius: 8px;
   background: #fcfcfc;
}

.solutions-list ul {
   list-style: none;
   padding: 0;
   margin: 0;
   display: flex;
   flex-direction: column;
   align-items: flex-start;
   gap: 6px;
}

.solutions-list li {
   position: relative;
   padding: 8px 0 8px 22px;
   font-size: 18px;
   color: #333;
}

.solutions-list li::before {
   content: "";
   position: absolute;
   left: 0;
   top: 18px;
   width: 7px;
   height: 7px;
   border-radius: 50%;
   background: #a5a5a5;
}

#about .row .content:before {
   display: none !important;
   content: none !important;
   border: none !important;
}

#about .row .content {
   padding-left: 0 !important;
}

#about > .container > .row img {
   max-height: 360px;
   width: 100%;
   height: auto;
}

#about > .container > .heading-text,
#about > .container > .row,
#about > .container > .solutions-list {
   max-width: 1200px;
   margin-left: auto;
   margin-right: auto;
}

.sectors-grid {
   display: grid;
   grid-template-columns: repeat(6, 1fr);
   gap: 18px;
   max-width: 980px;
   margin: 0 auto;
}

.sector-card {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   text-align: center;
   padding: 28px 12px;
   border: 1px solid #ececec;
   border-radius: 8px;
   background: #fcfcfc;
   cursor: pointer;
   transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.sector-card:hover {
   border-color: #e03c39;
   transform: translateY(-3px);
   box-shadow: 0 8px 24px rgba(224, 60, 57, 0.12);
}

.sector-card i {
   font-size: 32px;
   color: #444;
   line-height: 1;
   margin-bottom: 14px;
}

.sector-card .sc-title {
   font-size: 14px;
   font-weight: 600;
   color: #222;
   letter-spacing: 0.3px;
}

.solutions-list.solutions-list-single {
   grid-template-columns: max-content;
   justify-content: start;
   padding-left: 48px;
   padding-right: 48px;
}

@media (max-width: 767px) {
   .solutions-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 16px;
   }
   .sectors-grid {
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
   }
   .solutions-list {
      grid-template-columns: max-content;
      justify-content: center;
      gap: 4px;
   }
}

#about #companies{
   max-width: 1200px;
   padding-bottom: 0;
   padding-left: 0;
   padding-right: 0;
   margin-bottom: 0;
   width: 100%;
}
#about #companies + .solutions-list.mt-5{
   margin-top: 24px !important;
}
#about #companies .companies{
   display: grid;
   grid-template-columns: repeat(6, 1fr);
   gap: 20px;
   list-style: none;
   padding: 0;
   margin: 0;
}
#about #companies .companies li{
   grid-column: span 2;
   display: flex;
   align-items: center;
   justify-content: center;
   min-height: 140px;
   margin: 0;
   background: #fcfcfc;
   border: 1px solid #eee;
   border-radius: 8px;
   padding: 16px;
}
#about #companies .companies li{
   cursor: pointer;
   transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
#about #companies .companies li:hover{
   border-color: #e03c39 !important;
   transform: translateY(-3px);
   box-shadow: 0 8px 24px rgba(224, 60, 57, 0.12);
   background-color: #fcfcfc !important;
}
#about #companies .companies li a{
   display: flex;
   align-items: center;
   justify-content: center;
   width: 100%;
   height: 100%;
   border: none !important;
   min-height: auto !important;
   padding: 0 !important;
   box-shadow: none !important;
}
#about #companies .companies li a:hover{
   box-shadow: none !important;
}
#about #companies .companies li a img{
   max-height: 60px;
   width: auto;
   object-fit: contain;
}
#about #companies .companies.tech-grid li a span{
   font-size: 18px;
   font-weight: 600;
   color: #333;
   letter-spacing: 0.5px;
}

#about #companies .companies.cert-grid{
   grid-template-columns: repeat(4, 1fr);
}
#about #companies .companies.cert-grid li,
#about #companies .companies.cert-grid li:last-child:nth-child(3n+1),
#about #companies .companies.cert-grid li:nth-last-child(2):nth-child(3n+1),
#about #companies .companies.cert-grid li:nth-last-child(2):nth-child(3n+1) ~ li{
   grid-column: span 1;
   padding: 24px 16px;
}
#about #companies .companies.cert-grid li a{
   flex-direction: column;
   gap: 14px;
}
#about #companies .companies.cert-grid li a img{
   max-height: 90px;
}
#about #companies .companies.cert-grid li .cert-title{
   font-size: 14px;
   font-weight: 600;
   color: #333;
   text-align: center;
   line-height: 1.4;
}
#about #companies .companies.cert-grid li .cert-title small{
   font-size: 12px;
   font-weight: 400;
   color: #777;
}

@media (max-width: 991px){
   #about #companies .companies.cert-grid{ grid-template-columns: repeat(2, 1fr); }
   #about #companies .companies.cert-grid li{ grid-column: span 1; }
}
@media (max-width: 479px){
   #about #companies .companies.cert-grid{ grid-template-columns: 1fr; }
}

#about #companies .companies.ref-grid{
   grid-template-columns: repeat(5, 1fr);
   grid-auto-rows: 180px;
}
#about #companies .companies.ref-grid li,
#about #companies .companies.ref-grid li:last-child:nth-child(3n+1),
#about #companies .companies.ref-grid li:nth-last-child(2):nth-child(3n+1),
#about #companies .companies.ref-grid li:nth-last-child(2):nth-child(3n+1) ~ li{
   grid-column: span 1;
   min-height: 0;
   height: 100%;
}
#about #companies .companies.ref-grid li a img{
   max-height: 50px;
   max-width: 100%;
   width: auto;
   height: auto;
   object-fit: contain;
}
#about #companies .companies.ref-grid li a img[src*="toyota"]{
   max-height: 78px;
}
#about #companies .companies.ref-grid li a img[src*="arcelik"],
#about #companies .companies.ref-grid li a img[src*="turkcell"]{
   max-height: 156px;
}
#about #companies .companies.ref-grid li a img[src*="mercedes"]{
   max-height: 68px;
}
#about #companies .companies.ref-grid li a img[src*="vestel"],
#about #companies .companies.ref-grid li a img[src*="bsh"]{
   max-height: 38px;
}

@media (max-width: 991px){
   #about #companies .companies.ref-grid{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767px){
   #about #companies .companies.ref-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 479px){
   #about #companies .companies.ref-grid{ grid-template-columns: 1fr; }
}

.news-grid{
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 20px;
   max-width: 1200px;
   margin: 0 auto;
}
.news-card{
   background: #fcfcfc;
   border: 1px solid #ececec;
   border-radius: 8px;
   overflow: hidden;
   display: flex;
   flex-direction: column;
   cursor: pointer;
   transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.news-card:hover{
   border-color: #e03c39;
   transform: translateY(-3px);
   box-shadow: 0 8px 24px rgba(224, 60, 57, 0.12);
}
.news-thumb{
   width: 100%;
   aspect-ratio: 16 / 10;
   background-size: cover;
   background-position: center;
   background-color: #eee;
}
.news-body{
   padding: 18px 20px 22px;
}
.news-date{
   font-size: 12px;
   color: #888;
   margin-bottom: 8px;
   letter-spacing: 0.5px;
}
.news-title{
   font-size: 15px;
   font-weight: 600;
   color: #222;
   line-height: 1.5;
}
@media (max-width: 991px){
   .news-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575px){
   .news-grid{ grid-template-columns: 1fr; }
}

.career-hero{
   max-width: 1200px;
   margin: 0 auto 40px;
   border-radius: 8px;
   overflow: hidden;
}
.career-hero img{
   width: 100%;
   height: auto;
   max-height: 380px;
   object-fit: cover;
   display: block;
}
.solutions-grid.career-grid{
   grid-template-columns: repeat(4, 1fr);
   max-width: 1200px;
}
@media (max-width: 991px){
   .solutions-grid.career-grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 479px){
   .solutions-grid.career-grid{ grid-template-columns: 1fr; }
}
#about #companies .companies li:last-child:nth-child(3n+1){ grid-column: span 6; }
#about #companies .companies li:nth-last-child(2):nth-child(3n+1),
#about #companies .companies li:nth-last-child(2):nth-child(3n+1) ~ li{ grid-column: span 3; }

@media (max-width: 991px){
   #about #companies .companies{
      grid-template-columns: repeat(2, 1fr);
      gap: 14px;
   }
   #about #companies .companies li,
   #about #companies .companies li:last-child:nth-child(3n+1),
   #about #companies .companies li:nth-last-child(2):nth-child(3n+1),
   #about #companies .companies li:nth-last-child(2):nth-child(3n+1) ~ li{
      grid-column: span 1;
      min-height: 110px;
   }
   #about #companies .companies li:last-child:nth-child(2n+1){
      grid-column: span 2;
   }
}

@media (max-width: 767px){
   #about #companies .companies{
      grid-template-columns: 1fr;
   }
   #about #companies .companies li,
   #about #companies .companies li:last-child:nth-child(2n+1){
      grid-column: span 1;
      min-height: 100px;
   }
   #about #companies .companies li a img{
      max-height: 50px;
   }
}