
body {
  font-family: "Poppins", sans-serif;
  color: #ffffff;
  background-color: #02275e;
}
body, html {
  overflow-x: hidden;
}

@import url('https://fonts.googleapis.com/css?family=Roboto');
h1, h2, h3, h4, h5, h6 {
  font-weight: bold;
}
a.btn-1,
a.btn-2,
a,
button,
.carousel-control-prev,
.carousel-control-next {
  color: #66c1e4;
  background: none;
  border-radius: 0;
  transition: background-color 0.3s, box-shadow 0.3s, color 0.3s;
}
a.btn-1.white:hover,
a.btn-2.white:hover,
a.white:hover,
button.white:hover,
.carousel-control-prev:hover,
.carousel-control-next:hover
{
  color: #66c1e4!important;
  background-color: #66c1e4 !important;
  border-radius: 10px;
}

.layout_padding {
  padding: 75px 0;
}

.layout_padding2 {
  padding: 45px 0;
}

.layout_padding2-top {
  padding-top: 45px;
}

.layout_padding2-bottom {
  padding-bottom: 45px;
}

.layout_padding-top {
  padding-top: 75px;
}

.layout_padding-bottom {
  padding-bottom: 75px;
}

.heading_container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}

.heading_container h2 {
  position: relative;
  font-weight: bold;
}

/*header section*/
.hero_area {
  height: 98vh;
  position: relative;
  background-image: url(../images/hero-bg.png);
  background-size: cover;
  background-position: bottom;
  z-index: 1; /* Ensure it stays behind other elements with higher z-index */
}

.sub_page .hero_area {
  height: auto;
  background: none;
  background-color: #33a0d9;
}

.sub_page .footer_bg {
  background: none;
  background-color: #33a0d9;
  padding-top: 45px;
}

.header_section .container-fluid {
  padding-right: 25px;
  padding-left: 25px;
}

.header_section .nav_container {
  margin: 0 auto;
}

.custom_nav-container .navbar-brand {
  margin-right: 20px; /* Adjusted to keep a small space */
}

.custom_nav-container .navbar-nav {
  margin-right: auto; /* Ensures the nav items stay in place */
  margin-left: -40px; /* Shifted further to the left */
}

.custom_nav-container .navbar-nav .nav-item .nav-link {
  padding: 3px 30px; /* Adjusted padding to balance the layout */
  margin: 10px 15px; /* Adjusted margin to balance the layout */
  color: #181616;
  text-align: center;
  border-radius: 20px;
}



/* header hover efekt  */
.custom_nav-container .navbar-nav .nav-item.active .nav-link, .custom_nav-container .navbar-nav .nav-item:hover .nav-link {
  background-color: #66C1E4;
}

a,
a:hover,
a:focus {
  text-decoration: none;
}

a:hover,
a:focus {
  color: initial;
}

.btn,
.btn:focus {
  outline: none !important;
  -webkit-box-shadow: none;
          box-shadow: none;
}

.custom_nav-container .nav_search-btn {
  background-image: url(../images/search-icon.png);
  background-size: 22px;
  background-repeat: no-repeat;
  background-position-y: 7px;
  width: 35px;
  height: 35px;
  padding: 0;
  border: none;
}

.navbar-brand {
  margin-left: 25px;
}

.navbar-move-left {
  margin-right: 20px;
}

.navbar-brand span {
  font-size: 24px;
  font-weight: 700;
  color: #ffffff;
  text-transform: uppercase;
}

.custom_nav-container {
  z-index: 99999;
}

.navbar-expand-lg .navbar-collapse {
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: center;
}

.custom_nav-container .navbar-toggler {
  outline: none;
}

.custom_nav-container .navbar-toggler {
  padding: 0;
  width: 37px;
  height: 42px;
}
/* mobil sidebar */
.custom_nav-container .navbar-toggler span {
  display: block;
  width: 35px;
  height: 4px;
  background-color: #0047B3;
  margin: 7px 0;
  -webkit-transition: all .3s;
  transition: all .3s;
}

.custom_nav-container .navbar-toggler[aria-expanded="true"] .s-1 {
  -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
  margin: 0;
  margin-bottom: -4px;
}

.custom_nav-container .navbar-toggler[aria-expanded="true"] .s-2 {
  display: none;
}

.custom_nav-container .navbar-toggler[aria-expanded="true"] .s-3 {
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
  margin: 0;
  margin-top: -4px;
}

.custom_nav-container .navbar-toggler[aria-expanded="false"] .s-1,
.custom_nav-container .navbar-toggler[aria-expanded="false"] .s-2,
.custom_nav-container .navbar-toggler[aria-expanded="false"] .s-3 {
  -webkit-transform: none;
          transform: none;
}

.quote_btn-container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
/* sağ üstteki bilgi kısımı */
.quote_btn-container a {
  color: #E0E0E0;
  margin-right: 25px;
}

.quote_btn-container a img {
  width: 15px;
  margin: 0 25px;
}

/*end header section*/
/* slider section */
.slider_section {
  height: calc(100% - 80px);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
  z-index: 2;
  color: #3b3a3a;
}

.slider_section .row {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.slider_section div#carouselExampleIndicators {
  width: 100%;
  position: unset;
}
  /* başlık kısmıı */
.slider_section .detail_box {
  color: #ffffff;
}

.slider_section .detail_box h1 {
  font-size: 4rem;
  font-weight: bold;
  margin-bottom: 30px;
}

.slider_section .detail_box .btn-box {
  margin: 30px -5px 0 -5px;
}

.slider_section .detail_box .btn-box a {
  width: 145px;
  text-align: center;
  margin: 5px;
}
/* contact us buttonu özellikleri */
.slider_section .detail_box .btn-box a.btn-1 {
  display: inline-block;
  padding: 8px 0;
  background-color: #E0E0E0;
  color: #181616;
  border-radius: 30px;
}
.slider_section .detail_box .btn-box a.btn-1:hover {
  background-color: #66C1E4;
}

/* get quote butonu özellikleri */
.slider_section .detail_box .btn-box a.btn-2 {
  display: inline-block;
  padding: 8px 0;
  background-color: #E0E0E0;
  color: #181616;
  border-radius: 30px;
}

.slider_section .detail_box .btn-box a.btn-2:hover {
  background-color: #66C1E4;
}

.slider_section .img-box img {
  width: 100%;
}

.slider_section .slider_number-container {
  position: absolute;
  top: 8%;
  left: 10%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.slider_section .carousel_btn-container {
  width: 95px;
  position: absolute;
  bottom: 9%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  right: 50%;
  z-index: 999;
  -webkit-transform: translateX(50%);
          transform: translateX(50%);
}


/* Üst taraftakislider tuşlarının özellikleri */
.slider_section .carousel_btn-container .carousel-control-prev,
.slider_section .carousel_btn-container .carousel-control-next {
  position: relative;
  width: 45px;
  height: 45px;
  border: none;
  border-radius: 100%;
  opacity: 1;
  background-repeat: no-repeat;
  background-size: 8px;
  background-position: center;
  background-color: #ff9f21;
  
}

.slider_section .carousel_btn-container .carousel-control-prev {
  background-image: url(../images/left-angle.png);
  -webkit-transform: translateY(-10px); /* Add this line */
          transform: translateY(-10px); /* Add this line */}

.slider_section .carousel_btn-container .carousel-control-next {
  background-image: url(../images/right-angle.png);
  -webkit-transform: translateY(-10px);
          transform: translateY(-10px);
}

.about_section .row {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.about_section .img-box img {
  max-width: 100%;
}

.about_section .detail-box p {
  margin-top: 25px;
}

/* about us kısımı */
.about_section .detail-box a {
  display: inline-block;
  padding: 10px 35px;
  background-color: #ff9f21;
  color: #E0E0E0;
  border-radius: 30px;
  margin: 25px 0 45px 0;
}

.about_section .detail-box a:hover {
  background-color: #66C1E4; color: #181616;
}
/* services kısmı  */
.service_section {
  background-color: #33a0d9;
  color: #ffffff;
  text-align: center;
}
.service_section_page{
  background-color: #02275e;
}
.service_item {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 20px;
  background: #02275e;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);

}

.service_item img {
  width: 100%;
  border-radius: 10px;
}

.service_item .text-content {
  flex: 1;
  margin-right: 20px;
}
.service_item .image-content {
  flex-shrink: 0;
  width: 200px;
}
.service_section .heading_container {
  align-items: center;
}
.service_container {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
}
.service_section .service_container {
  display: flex;
  justify-content: center;
  padding: 35px 60px;
  flex-wrap: wrap;
  justify-content: center;
  padding: 35px 20px; /* Değiştirildi */
  max-width: 100%; /* Eklendi */
  overflow: hidden; /* Eklendi */
}


.service_section .service_container .card-container {
  margin: 25px 10px;
  min-width: 200px;
  width: 250px;
}
.card-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1 1 100px;
  margin: 10px;
}

.service_section .service_container .card-container .card {
  position: relative;
  width: 220px;
  height: 320px;
  background: #02275e;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px; /* Adjusted font size */
  font-weight: bold;
  border-radius: 15px;
  cursor: pointer;
  overflow: hidden; /* Hide overflowing content */
  box-sizing: border-box;
  line-height: 1.2; /* Adjusted line height */
  transition: all 0.5s;
  color: #ffffff; /* Ensure text color is white initially */
  box-shadow: 7px 7px 7px rgba(0, 0, 0, 0.3), /* right and bottom shadow */
              -7px 0 7px rgba(0, 0, 0, 0.3), /* left shadow */
              0 -7px 7px rgba(0, 0, 0, 0.3); /* top shadow */
}
.service_section .service_container .card-container .card .front-content,
.service_section .service_container .card-container .card .content {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 15px; /* Added padding */
  box-sizing: border-box;
  transition: all 0.5s;
}

.service_section .service_container .card-container .card .front-content {
  color: #ffffff; /* Ensure text color is white */
  z-index: 1;
}

.service_section .service_container .card-container .card .content {
  background: #33a0d9;
  color: #000000; /* Ensure text color is black */
  opacity: 0; /* Hide content initially */
  visibility: hidden; /* Hide content initially */
  text-align: center;
  font-size: 16px; /* Adjust font size for better fit */
}

.service_section .service_container .card-container .card:hover .content {
  opacity: 1; /* Show content on hover */
  visibility: visible; /* Show content on hover */
  z-index: 2;
}

.service_section .service_container .card-container .card:hover .front-content {
  opacity: 0; /* Hide front content on hover */
  visibility: hidden; /* Hide front content on hover */
}

.card::before,
.card::after {
  position: absolute;
  content: "";
  width: 20%;
  height: 20%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #33A0D9;
  transition: all 0.5s;
}

.card::before {
  top: 0;
  right: 0;
  border-radius: 0 15px 0 100%;
}

.card::after {
  bottom: 0;
  left: 0;
  border-radius: 0 100% 0 15px;
}

.card:hover::before,
.card:hover::after {
  width: 100%;
  height: 100%;
  border-radius: 15px;
  transition: all 0.5s;
}

.icon-box img {
  width: 100px; /* Yeni genişlik değeri */
  height: auto; /* Yükseklik otomatik olarak ayarlanır */
}

.icon-box i {
  font-size: 50px; /* İkonun boyutunu ayarlar */
}

.work_section .heading_container {
  margin-bottom: 45px;
}

.work_section .row {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.work_section .detail_container .box {
  margin-bottom: 20px;
  padding: 20px;
  border-radius: 15px;
  -webkit-box-shadow: 0 0 25px 0 #00000026;
          box-shadow: 0 0 25px 0 rgba(0, 0, 0, 0.15);
}

.work_section .detail_container .box .top-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.work_section .detail_container .box .top-box .icon-box {
  width: 50px;
  margin-right: 15px;
}

.work_section .detail_container .box .top-box .icon-box img {
  width: 100%;
}

.work_section .detail_container .box .top-box h5 {
  font-weight: 600;
  margin: 0;
}

.work_section .detail_container .box .bottom-box {
  margin-top: 10px;
}

.work_section .img-box img {
  max-width: 100%;
}

.work_section .btn-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;}
/* how we work kısmı  */
.work_section .btn-box a {
  display: inline-block;
  padding: 10px 25px;
  background-color: #ff9f21;
  color: #E0E0E0;
  border-radius: 30px;
}
.work_section .detail_container .box {
  padding: 10px;
}

.work_section .btn-box a:hover {
  background-color: #66C1E4;
  color: #181616
}

.mission_vision_goals .box img {
  width: 80%; /* Adjust as needed */
  max-width: 5000px; /* Adjust as needed */
  height: auto;
  display: block;
  margin: 0 auto;
}
.mission_vision_goals .container {
  max-width: 90%; /* Genişliği artırıldı */
  padding-left: 15px;
  padding-right: 15px;
}
.mission_vision_goals .heading_container {
  display: flex;
  justify-content: center;
  align-items: center;
}



.team_section {
  text-align: center;
}

.team_section .heading_container {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.team_section .team_container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding: 25px 65px;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.team_section .team_container .box {
  margin: 35px 45px;
  min-width: 200px;
  width: 250px;
}

.team_section .team_container .box .img-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  border-radius: 15px;
  position: relative;
}

.team_section .team_container .box .img-box img {
  width: 100%;
}

.team_section .team_container .box .img-box::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 50%;
  width: 120%;
  height: 75%;
  border-radius: 25px;
  -webkit-transform: translateX(-52.5%) rotate(-15deg);
          transform: translateX(-52.5%) rotate(-15deg);
  background-color: #33a0d9;
}

.team_section .team_container .box .detail-box {
  margin-top: 15px;
}

.team_section .team_container .box .detail-box h5 {
  font-weight: bold;
  position: relative;
}

.team_section .team_container .box.b-2 {
  margin-top: 130px;
}

.team_section .team_container .box.b-3 {
  margin-top: 230px;
}

.team_section .btn-box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.team_section .btn-box a {
  display: inline-block;
  padding: 10px 35px;
  background-color: #E0E0E0;
  color: #E0E0E0;
  border-radius: 30px;
}

.team_section .btn-box a:hover {
  background-color: #33a0d9;
}
.team_section .social_box a svg {
  width: 24px;
  height: 24px;
  fill: #181616; /* Varsayılan renk */
  transition: transform 0.3s ease, fill 0.3s ease; /* Animasyon için */
}

.team_section .social_box a:hover svg {
  transform: scale(1.2); /* %20 büyütme için */
}

.team_section .social_box a:hover #twitter-icon {
  fill: #1da1f2; /* Twitter rengi */
}

.team_section .social_box a:hover #instagram-icon {
  fill: #E1306C; /* Instagram rengi */
}

.team_section .social_box a:hover #linkedin-icon {
  fill: #0077b5; /* LinkedIn rengi */
}


.client_section .box {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  margin-top: 45px;
}

.client_section .box .img-box img {
  max-width: 100%;
}

.client_section .box .detail-box {
  margin-top: 20px;
}

.client_section .box .detail-box h6 {
  font-size: 18px;
  font-weight: bold;
}

.client_section .carousel_btn-container {
  width: 100px;
  position: absolute;
  bottom: -50px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  right: 15%;
  z-index: 999;
}


/* referans kısımı */
.client_section .carousel_btn-container .carousel-control-prev,
.client_section .carousel_btn-container .carousel-control-next {
  position: relative;
  width: 45px;
  height: 45px;
  border: none;
  border-radius: 100%;
  opacity: 1;
  background-repeat: no-repeat;
  background-size: 20px;
  background-position: center;
  background-color: #ff9f21;
}

.client_section .carousel_btn-container .carousel-control-prev:hover,
.client_section .carousel_btn-container .carousel-control-next:hover {
  background-color: #ff9f21;
}

.client_section .carousel_btn-container .carousel-control-prev {
  background-image: url(../images/prev-white.png);
}

.client_section .carousel_btn-container .carousel-control-next {
  background-image: url(../images/next-white.png);
}

.footer_bg {
  background-image: url(../images/footer-bg.png);
  background-size: cover;
  background-position: right top;
  padding-top: 250px;
}

/* contact us kısmı /footer üstü */
.contact_section {
  color: #f5f5f5;
}

.contact_section .heading_container {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin-bottom: 45px;
}

.contact_section form .form-control {
  border: none;
  background-color: #02275e;
  outline: none;
  -webkit-box-shadow: none;
          box-shadow: none;
  border-radius: 30px;
  padding-left: 20px;
  height: 45px;
  margin: 5px 0;
}


/* contact us buton özellikleri */
.contact_section button {
  display: inline-block;
  padding: 8px 35px;
  background-color: #ff9f21;
  color: #181616;
  border-radius: 30px;
  text-transform: uppercase;
  border: none;
  -webkit-box-shadow: none;
          box-shadow: none;
  outline: none;
  margin-top: 15px;
  font-size: 15px;
}
.contact_section input,
.contact_section textarea {
    color: #ffffff;
}

.contact_section input:focus,
.contact_section textarea:focus {
    color: #ffffff;
}

.contact_section button:hover {
  background-color: #66c1e4;
}
/* Placeholder renkleri */
.contact_section .form-control::placeholder {
  color: #ffffff; /* Placeholder rengi beyaz */
  opacity: 1; /* Firefox için */
}

.contact_section .form-control:-ms-input-placeholder { /* Internet Explorer 10-11 için */
  color: #ffffff;
}

.contact_section .form-control::-ms-input-placeholder { /* Microsoft Edge için */
  color: #ffffff;
}

.contact_section .form-control::-webkit-input-placeholder { /* Chrome, Safari, Opera için */
  color: #ffffff;
}




  .contact_section form .form-control {
    height: auto;
    margin: 10px 0;
  }

  .contact_section button {
    width: 100%;
    padding: 10px 0;
  }

  .footer_section {
    padding: 20px;
  }

  #btn-back-to-top {
    bottom: 10px;
    right: 10px;
  }


/* Küçük Mobil Cihazlar için (480px ve daha küçük) */
@media only screen and (max-width: 480px) {
  .header_section .container-fluid {
    padding-right: 10px;
    padding-left: 10px;
    padding-right: 5px; /* Değiştirildi */
    padding-left: 5px; /* Değiştirildi */
  }

  .custom_nav-container .navbar-nav .nav-item .nav-link {
    padding: 8px 15px;
    padding: 8px 5px; /* Değiştirildi */
    font-size: 14px; /* Değiştirildi */
  }

  .slider_section .detail_box h1 {
    font-size: 2rem;
    font-size: 1.5rem; /* Değiştirildi */
  }

  .about_section .detail-box p {
    font-size: 0.9rem;
    font-size: 0.8rem; /* Değiştirildi */
  }

  .service_section .service_container .box .img-box {
    height: 150px;
  }
  
  .contact_section form .form-control {
    padding-left: 5px; /* Değiştirildi */
    margin: 3px 0; /* Değiştirildi */
  }



  .team_section .team_container .box {
    width: 100%;
    margin: 10px 0;
  }

  .contact_section form .form-control {
    padding-left: 10px;
    margin: 5px 0;
  }
}



/* footer section*/
.footer_section {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: relative;
}

.footer_section p {
  color: #181616;
  margin: 0 auto;
  text-align: center;
  padding: 20px;
}

.footer_section a {
  color: #181616;
}
#btn-back-to-top {
  background-color: #ff9f21;
  position: fixed;
  bottom: 20px;
  right: 20px;
  opacity: 0; /* Başlangıçta görünmez */
  border-radius: 25px;
  transition: opacity 0.5s ease-in-out; /* Geçiş efekti */
}
/* Mobil sürüm CSS kodları */
@media (max-width: 1120px) {
  .team_section .team_container .box.b-3 {
    margin-top: 100px;
  }
}

@media (max-width: 992px) {
  .service_section .service_container .service_item {
    width: calc(50% - 30px); /* İki sütun düzeni için */
  }
  .hero_area {
    height: auto;
  }

  .navbar-brand {
    margin-left: 0;
  }

  .slider_section {
    padding: 45px 0 175px 0;
  }

  .footer_bg {
    padding-top: 125px;
  }

  .quote_btn-container {
    flex-direction: column;
    align-items: center;
  }

  .quote_btn-container a {
    display: none;
  }

  .custom_nav-container .nav_search-btn {
    background-position: center;
  }
}

@media (max-width: 768px) {

  .slider_section .detail_box {
    text-align: center;
  }

  .slider_section {
    padding: 45px 0 200px 0;
  }

  .slider_section .img-box {
    margin-top: 45px;
  }

  .slider_section .carousel_btn-container {
    bottom: 11%;
  }

  .about_section .row {
    flex-direction: column-reverse;
  }

  .about_section .detail-box {
    margin-top: 0;
    margin-bottom: 45px;
  }

  .about_section .img-box {
    margin-top: 0;
  }

  .work_section .img-box {
    margin-top: 25px;
  }

  .work_section .btn-box {
    justify-content: center;
    margin-top: 35px;
  }

  .team_section .team_container .box.b-2 {
    margin-top: 100px;
  }

  .client_section {
    text-align: center;
    margin-bottom: 45px;
  }

  .client_section .heading_container {
    align-items: center;
  }

  .client_section .box {
    align-items: center;
  }

  .client_section .carousel_btn-container {
    bottom: -100px;
    right: 50%;
    transform: translateX(50%);
  }

  .footer_bg {
    padding-top: 75px;
  }

  /* Başlık yanındaki beyaz noktayı yaklaştırma */
  .heading_container h2 {
    max-width: 80%; /* Genişlik sınırlandırması eklendi */
  }

  .heading_container h2::before {
    right: -15px; /* Beyaz noktayı başlığa yaklaştırma */
    width: 15px; /* Noktanın boyutunu küçültme */
    height: 15px;
  }

  /* Hizmet kartları ortalama */
  .service_container .row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Kartları ortalar */
  }
  
  .card-container {
    width: 100%;
    margin-bottom: 20px;
  }

  .card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
  }

  .card .front-content, .card .content {
    width: 100%;
    text-align: center;
  }
}

@media (max-width: 576px) {
  .slider_section .detail_box h1 {
    font-size: 3.5rem;
    
  }
  
}
/* Küçük Mobil Cihazlar için (480px ve daha küçük) */
@media only screen and (max-width: 480px) {
  .header_section .container-fluid {
    padding-right: 10px;
    padding-left: 10px;
  }

  .custom_nav-container .navbar-nav .nav-item .nav-link {
    padding: 8px 15px;
  }

  .slider_section .detail_box h1 {
    font-size: 2rem;
  }

  .about_section .detail-box p {
    font-size: 0.9rem;
  }

  .service_section .service_container .box .img-box {
    height: 150px;
  }

  .work_section .detail_container .box {
    padding: 10px;
  }

  .team_section .team_container .box {
    width: 100%;
    margin: 10px 0;
  }

  .contact_section form .form-control {
    padding-left: 10px;
    margin: 5px 0;
  }
}


@media (max-width: 420px) {
  .slider_section .detail_box h1 {
    font-size: 3rem;
  }
}

@media (max-width: 360px) {}

@media (min-width: 1200px) {
  .container {
    max-width: 1170px;
  }
}

.about_section .row {
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.about_section .img-box img {
  max-width: 100%;
}

.about_section .detail-box p {
  margin-top: 25px;
}

/* about us kısımı */
.about_section .detail-box a {
  display: inline-block;
  padding: 10px 35px;
  background-color: #ff9f21;
  color: #E0E0E0;
  border-radius: 30px;
  margin: 25px 0 45px 0;
}

/* Mobile styles */
@media (max-width: 768px) {
  .service_item {
    flex-direction: column;
  }

  .service_item .text-content {
    margin-right: 0;
    margin-bottom: 20px;
  }

  .service_item .image-content {
    width: 100%;
  }
}
.info_section {
  background-color: #33a0d9;
  padding: 40px 0;
}

.info_section .container {
  max-width: 1800px;
  margin: 0 auto;
}

.info_section .row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* İçeriği ortala */
}

.info_section .col-md-3 {
  margin-bottom: 20px;
  padding: 0 5px; /* Sütunlar arasına yatay boşluk ekler */
  flex: 1; /* Sütunların eşit genişlikte olmasını sağlar */
  min-width: 300px; /* Sütunların minimum genişliğini belirler */
  text-align: center; /* Sütun içeriklerini ortala */
}

/* Animasyon ve Hover Efektleri */
.info_section .info_logo,
.info_section .info_links,
.info_section .info_contact,
.info_section .info_form {
  text-align: center; /* İçerikleri ortala */
  transition: background-color 0.3s ease;
}

.info_section .info_logo p {
  color: #000; /* Yazıyı siyah yapar */
}

.info_section .info_links ul {
  padding: 0;
}

.info_section .info_links ul li {
  list-style: none;
  margin-bottom: 10px;
}

.info_section .info_links ul li a {
  text-decoration: none;
  color: #000;
  transition: color 0.3s ease;
}

.info_section .info_links ul li a:hover {
  color: #ffffff;
}

.info_section .info_contact {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.info_section .info_contact a {
  display: inline-block; /* Tıklanabilir alanı metin kadar sınırlandırır */
  color: #000;
  margin-bottom: 10px;
  transition: color 0.3s ease;
}

.info_section .info_contact a:hover {
  color: #ffffff;
}

.info_section .info_form input,
.info_section .info_form button {
  display: block;
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  border: none;
  border-radius: 5px; /* Köşeleri yuvarlat */
  transition: background-color 0.3s ease;
}

.info_section .info_form p {
  color: #000; /* Aramıza Katılın altındaki metni siyah yapar */
}

.info_section .info_form button:hover {
  background-color: #66c1e4;
  color: #181616;
}

.info_form .btn {
  background-color: #ff9f21;
  border-color: #ff9f21;
  color: #181616;
}

/* Footer Section */
.footer_section {
  background-color: #33a0d9;
  color: #fff;
  padding: 20px 0;
  text-align: center; /* Footer yazılarını ortala */
}

.footer_section p {
  margin: 0;
}

.footer_section a {
  color: #007bff;
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer_section a:hover {
  color: #ffffff;
  text-decoration: underline;
}
