@import url('https://fonts.googleapis.com/css2?family=Bad+Script&family=Geologica&family=Inclusive+Sans&family=Josefin+Sans:wght@100&family=Nova+Script&family=Nunito+Sans:opsz,wght@6..12,200&family=Open+Sans:wght@300&family=Poppins&family=Prompt:wght@200&family=Roboto+Condensed:wght@300;400&family=Roboto:ital,wght@1,100&family=Sacramento&family=Tilt+Prism&family=Wix+Madefor+Display&family=Work+Sans:ital,wght@1,300;1,400&display=swap');

body {
    margin: 0;
    padding: 0;
    font-family: 'Inclusive Sans', sans-serif;
     background: linear-gradient(to left, #f0f0f0, #e4e3e3ad); 
    height: 100vh; /* Sayfanın tamamını kapla */
    overflow-x: hidden;
}

html {
  overflow-x: hidden;
}

.header-top {
    height: 30px;
    background-color:  #010f2b;
    display: flex;
}

.header-top-inner {
    
    display: flex;
    justify-content: space-between;
    color: white;
    flex-basis: 80%;
    align-items: center;
}

.header-left {
    margin-left: 94px; /* Başlangıçta 150px sola kaydır */
    transition: margin-left 0.5s; /* Geçiş efekti eklemek için kullanıyoruz */
}

@media (max-width: 768px) {
    .header-left {
        margin-left: 10px; /* Sayfa küçültüldüğünde sola kaydır */
    }
}

.call-us {
    display: flex;
    align-items: center;

    flex-basis: 20%;
    background-color: #F39A00;
    color: white;
    gap: 10px;
 
}

.call-us a{
    color: white;
    text-decoration: none;
    margin-left: 10px;
}

.social-media {
    display: flex;
    list-style-type: none;
    gap: 15px;
    margin-right: 10px;
   
}

.social-media li a {
    color: white;
    text-decoration: none;
    font-size: 14px;

}

.header-down {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
  
    

}

.header-down-inner {
    display: flex;
   width: 90%;
   gap: 60px;
   justify-content: space-between;
    
}

.he-logo {
  
    width: 350px;
}

.he-logo img{

  width: 100%;
height: 106px;
}

.contact {
    display: flex;
    list-style-type: none;
    gap: 30px;
}

.contact li {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
}

.contact li a {
    text-decoration: none;
    color:#d88c08;
    font-size: 24px;
    
    border: 1px solid;
    border-radius: 50%;
    padding: 15px;
}

.contact-i {
    display: flex;
    flex-direction: column;
    gap: 5px;
  
}

.header-d-list {
    display: flex;
   width: 90%;
   box-shadow: 10px 10px 20px rgba(107, 107, 107, 0.308); /* Box shadow */
   padding: 10px;
   margin-left: 30px;
   justify-content: space-between;
}

.header-list {
    display: flex;
    align-items: center;
    list-style-type: none;
    gap: 60px;
    margin: 0;
    padding: 0;
}


.search-container {
    display: flex;
    gap: 10px;
}


  .search-input {
    border: none;
    outline: none;
    flex-grow: 1;
    font-size: 16px;
    
  }
  
  .search-button {
    background-color: #010f2b;
    border: none;
    color: #fff;
    border-radius: 0 5px 5px 0;
    cursor: pointer;
    padding: 5px 10px;
    font-size: 16px;
  }
  
  .search-button i {
    font-size: 20px;
  }
  
  .d-contact {
    width: 150px;
    background-color: #F39A00;
     padding: 10px;
     color: #f0f0f0;
     border-radius: 10px;
  }

 
  
  .header-list li {

    position: relative;
    color:#04369b;
    transition: color 0.3s; 
  }
  
  .header-list li::before {
    content: "";
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -4px;
    left: 0;
    background-color: #05213f;
    transition: width 0.3s;
  }
  
  .header-list li:hover {
    color: #666; /* Grimsi renk */
  }
  
  .header-list li:hover::before {
    width: 100%;
  }

@media (max-width:1142px) {
    .contact-i {
        display: none;
    }

 .contact li {
    gap: 0px;
 }
}

@media (max-width:1290px) {
  .call-us span {
    display: none;
  }

  .call-us {
   justify-content: center;
  }
}

@media (max-width:860px) {
   .header-list {
    display: none;
   }

   .altnav-icon {
    visibility: visible !important;
   }
  }
  
  @media (max-width:1010px) {
   .he-logo img {
    width: 300px;
   }

   .contact li {
  justify-content: space-between;
   }
  }
  
  @media (max-width:680px) {
   .contact li a {
    font-size: 16px;
    padding: 10px;
    margin-left: -50px;
    display: flex;
   
   }

   .contact {
    gap: 40px;
   }

   }
   
   

   @media (max-width:550px) {
   .he-logo img {
    width: 250px;
   }

   .contact li a {
    font-size: 16px;
    padding: 10px;
    margin-left: -120px;
    display: flex;
 
   
   }

  ul.contact {
    margin-left:-40px;
    width: 0px;
  }

   .header-down-inner {
    gap: 70px;
    width: 100%;
   }


.d-contact {
  display: none;
}

.search-container {
  margin-left: -25px;
}


  
  
  
  

   .contact  {
    gap: 40px;
   }

   .altnav-icon {
    margin-right: -54px;
   }
  }
  
  
  
  
  
  @media (max-width:517px)
{
  .he-logo img {
    width: 220px;
    height:70px ;
  }
}  







.altnav-icon {
  position: relative;
  top: -45px;
 right: -340px;
visibility: hidden;

}

@media (max-width:760px) {
  .altnav-icon {
   right: -300px;
  }
}
@media (max-width:650px) {
  .altnav-icon {
   right: -250px;
  }
}

@media (max-width:553px) {
  .altnav-icon {
   right: -200px;
  }
}

@media (max-width:500px) {
  .altnav-icon {
   right: -180px;

  }
}

@media (max-width:400px) {
  .altnav-icon {
   right: -150px;

  }
}








@media (max-width: 410px) {
  .menu-page {
    width: 100% !important;
  }
}

.menu-page {
  position: fixed;
  top: 0;
  right: -400px; 
  width: 400px; 
  height: 100vh; 
  background-color:  #021230; 
  z-index: 9998;
  padding: 20px; 
  box-sizing: border-box;
  transition: right 0.3s ease;
  box-shadow: 0 -20px 70px rgba(0, 0, 0, 0.5);
}

.menu-page-menu {
  margin-left: 15px;
}

.menu-page-menu .info-btn {
  background-color: rgb(255, 255, 255);
  padding: 10px;
 border-radius: 8px;
 width: 200px;
}

.menu-page-menu .info-btn a {
  color:#010530;
  display: flex;
  justify-content: center;
}

.menu-page-menu ul  {
  margin-top: 100px;
  display: flex;
  flex-direction: column;
  gap: 30px;
  margin-left: 10px;

 
}

.menu-page-menu ul li {
   padding: 0px;
  
 }
 

.menu-page-menu ul li a {
 color: white;
 font-weight: 600;
 font-size: 18px;
 font-family: "Rubik",sans-serif;

 
}

.menu-page.show {
  right: 0;
}

.close-menu-icon span {
  margin-left: 9px;

}

.close-menu-icon {
  position: absolute;
  top: 55px;
  right: 20px;
  background-color:rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  font-size: 25px;
  width: 40px;
  height: 40px;
  cursor: pointer;
  color: #FFF; 
}

.menu-background {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%; 
  height: 100%;
  background-color:#74747471;
  z-index: 9997; 
  display: none;
}

.menu-background.show {
  display: block;
}

.noscroll {
  overflow: hidden;
}

.menu-page ul {
  list-style-type: none;
  color: #BC973C;
}

.menu-page ul li a {
 text-decoration: none;
  color: #f0f0f0;
}






  



.big-photo img {
  width: 100%;
 object-fit: cover;
  height: calc(100vh - 199.2px);
 

}

.big-photo::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: calc(100vh - 199.2px); 
  background-color: rgba(0, 0, 0, 0.432); 

}

.big-photo {
  position: relative;
}

.photo-caption {
  position: absolute;
  bottom: 0;
  right: 180px;
  top: 80px;
  color: white;
  overflow: hidden; /* Metinlerin gizli olmasını sağlar */
}

@media (max-width:1024px) {
  .photo-caption {
    right: 100px;
  }
}

@media (max-width:700px) {
  .photo-caption {
    right: 200px;
  }
}
@media (max-width:600px) {
  .photo-caption {
    right: 100px;
  }
}

@media (max-width:470px) {
  .photo-caption {
    right: 20px;
  }
}

.photo-caption h1, .photo-caption h2, .photo-caption h5, .photo-caption p, .overlay-btn {
  transform: translateX(100%); /* Başlangıçta tüm metinleri sağa taşıyın */
  transition: transform 0.5s ease; /* Geçiş efekti ekleyin */
}





.photo-caption h5 {
  animation: slideIn 0.5s ease 0.5s forwards; 
}

.photo-caption h1 {
  animation: slideIn 0.5s ease 1s forwards; 
}

.photo-caption h2 {
  animation: slideIn 0.5s ease 1.5s forwards; 
}

.photo-caption p {
  animation: slideIn 0.5s ease 2s forwards; 
}

.overlay-btn {
  animation: slideIn 0.5s ease 2.5s forwards; /
}





@keyframes slideIn {
  to {
      transform: translateX(0);
  }
}

.photo-caption h1,h2 {
  font-family:d;
}

.photo-caption h1 {
  font-size: 78px;
}

.photo-caption h2 {
  font-size: 54px;
  color: #04369b;
}
  
.photo-caption h5,
.photo-caption h1,
.photo-caption h2,
.photo-caption p {
    margin: 15px; 
    padding-left: 22px;
  
}

.photo-caption h5 {
  font-size: 12px;
  color: #7575759d;
}



.overlay-btn {
  height: 20px;
  background-color: #F39A00;
  padding: 20px;
  text-align: center;
  border-radius: 10px;
 

}
 



.main-container{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.page{
  position: relative;
  display: flex;
  flex-direction: column;
  align-self: center;
  flex-wrap: wrap;
  flex: 1;
  width: 85%;
  max-width: 1170px;
  margin-top: 50px;
}

.areas-of-work {
  display: flex;
}

.areas-of-work-inner {
  display: flex;
  gap: 70px;
  justify-content: space-between;
}

.areas {
  flex: 2;
}

.areas-pic {
  flex:1;
  z-index: 10;
}

.img-e {
  position: absolute;
  z-index: 500;
}

.img-e img {
  width: 100%;
  height: 325px;
  z-index: 10;
}

.photo-cerceve {
  height: 200px;
  border: 4px solid rgb(243, 154, 0);
  position: absolute;
  top: 50px;
  height: 400px;
  z-index: 5;
  width: 325px;
  right: 40px;
}

.two {
  right: 800px;
}

.cerceve-w {
  margin-top: 280px;
  margin-left: 30px;
}

.areas-header h5{
  margin: 0;
}

.grid-areas {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin-top: 35px;
}

.projects {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 20px;
}

.proje-item img {
width: 100%;
}
.counter {
  margin-top: 50px;
  
  width: 100%;
  background: linear-gradient(to bottom, #010f2b, rgb(24, 24, 24)); 
  display: flex;
  justify-content: center;
  align-items: center;

}

.counter-inner  {
  width: 90%;
 display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;

}


.item {
  color: white;
  border: 1px solid rgba(112, 112, 112, 0.336);
padding: 45px;
 text-align: center;
}

.item span {
  font-size: 40px;
}



@media (max-width:832px) {
  .counter-inner  {
    width: 90%;
   display: grid;
  grid-template-columns:1fr 1fr;
  
  }
  
}
@media (max-width:470px) {
  .item span {
    font-size: 20px;
  }
  
  
}


@media (max-width:924px) {
  .areas-pic {
   
    display: flex;
    flex-basis: 100%;
    justify-content: center;
    flex-wrap: wrap;

  }


  .areas-of-work {
    flex-wrap: wrap;
  }

  .areas-of-work-inner {
    flex-wrap: wrap;
  }
}

@media (max-width:475px) {
  .cerceve img {
   
    left: 30px !important;
   
  }
}



.cerceve {
  position: relative;
  width: 300px; /* Çerçevenin genişliği */
  height: 470px; /* Çerçevenin yüksekliği */
  border: 5px solid #F39A00 ; /* Çerçeve stilini ayarlayabilirsiniz */

  z-index: 1; /* Çerçevenin fotoğrafın üzerinde görünmesini sağlar */

}

.cerceve img {
  position: absolute;
  top: -25px;
  left: 40px;
  width: 100%;
  height: 250px;
  object-fit: cover; /* Fotoğrafın çerçeve boyutlarına sığacak şekilde ayarlanmasını sağlar */
  z-index: -1; /* Fotoğrafın çerçevenin altında kalmasını sağlar */
}

.cerceve-yazi {
  margin-top: 260px;
margin-left: 10px;
}

@media (max-width:720px) {
.projects {
  display: grid;
  grid-template-columns: 1fr ;
  gap: 20px;
}
}






.button {
  display: inline-flex;
  height: 30px;
 width: 90%;
  border: 2px solid #f39a0048;
  margin: 0px 0px 0px 0px;
  color: #F39A00 ;
  text-transform: uppercase;
  text-decoration: none;
  font-size: .8em;
  letter-spacing: 1.5px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

a {
  color: #0edbdb;
  text-decoration: none;
  letter-spacing: 1px;
}



#arrow-hover {
  width: 15px;
  height: 10px;
  position: absolute;
  transform: translateX(60px);
  opacity: 0;
  -webkit-transition: all .25s cubic-bezier(.14, .59, 1, 1.01);
  transition: all .15s cubic-bezier(.14, .59, 1, 1.01);
  margin: 0;
  padding: 0 5px;
}

a#button-1:hover img {
  width: 15px;
  opacity: 1;
  transform: translateX(50px);
}

#slider-container {
  width: 100%;
  overflow: hidden;
  position: relative;
}

#slider {
  display: flex;
  animation: scroll 16s linear infinite; /* linear geçiş sağlar */
 align-items: center;
 
 
}

.slide {
  min-width: 17.5%;
  box-sizing: border-box;
  text-align: center;
  padding: 10px; 
}

img {
  max-width: 100%;
  
  
}

@media (max-width:830px ){
  .slide {
    min-width: 30.5%;
    
  }
}

@keyframes scroll {
  0% {
      transform: translateX(0%);
  }
  100% {
      transform: translateX(-100%);
  }
}



.map-container {
  width: 100%;
  position: relative;
  display: flex;

}

.map-container iframe {
  width: 100%;
}

.contact-form {
  width: 40%;
  background-color: #010f2b;

  position: absolute;
  top: 10px;
  height: 90%;
  border-radius: 5px;
  left: 10px;

}

.co-container {
  max-width: 400px;
  padding: 20px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  
}
h2 {
  text-align: center;
  color: #007BFF;
}
label {
  display: block;
  margin-bottom: 5px;
  color: #c2c2c28e;
}
input[type="text"],
input[type="email"],
input[type="tel"],
textarea {
  width: 95%;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 3px;
}
button {
  background-color: #F39A00;
  color: #fff;
  padding: 10px 20px;
  border: none;
  border-radius: 3px;
  cursor: pointer;

}
button:hover {
  background-color: #e4980aea;
}

.contact-co {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
 
  width: 100%;
  
}

.contact-co .item {
  display: flex;
  flex-direction: column;
  
  gap: 20px;
  color: #010530;
  border: none;

}

.contact-co .item  i {
  color: #010530;
  font-size: 75px;
}

.contact-co .item  span {
  font-size: 14px;
}

@media (max-width:630px) {
  .contact-co {
    display: grid;
    grid-template-columns: 1fr ;
  }
}

.c-container {
  display: flex;
  flex-direction: column;
 align-items: center;
}





.form-container {
  width:70%;
  padding: 20px;
  border-radius: 8px;
  transition: border-color 0.3s; 

  
 
}

.form-container input,
.form-container textarea {
  width: calc(100% - 16px);
  padding: 16px 8px;
  margin-bottom: 16px;
  box-sizing: border-box;
  border: 1px solid #ccc; 
  transition: border-color 0.3s; 
}

.form-container input:focus,
.form-container textarea:focus {
  border-color: #010530; 
  outline: none; 
}

.form-container button {
  background-color: #010530;
  color: #fff;
  padding: 10px 15px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.form-container button:hover {
  background-color: #010530d7;
}

iframe {
  width: 100%;
}

.footer {
  
  background-color: #010530;
  width: 100%;
  display: flex;
  flex-direction: column;
  margin-top: 50px;
  padding-bottom:50px;

}

.footer-inner {
  width: 100%;
 display: flex;
 justify-content: center;
 margin-top: 50px;
}

.footer-item {
  width: 80%;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 100px;
  
}

.footer-about h4 {
  color:white;
}

.footer-about p {
  color: #666666b7;
}

.footer-link {
  list-style-type: none;
  margin: 0;
  padding: 0;
  
  display: flex;
  flex-direction: column;
  gap: 15px;
  color: white;
  
}

.footer-link li a{
 text-decoration: none;
 color: #F39A00;
}

.footer-link {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.footer-link li {
  display: inline-block;
  margin-right: 20px; /* Linkler arasında boşluk bırakmak için */
}

.footer-link a {
  text-decoration: none;
  position: relative;
}

.footer-link a::before {
  content: "";
  position: absolute;
  width: 0;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: #F39A00; /* Çizgi rengini istediğiniz renge ayarlayabilirsiniz */
  transition: width 0.3s ease; /* Geçiş efekti süresini ayarlayabilirsiniz */
}

.footer-link a:hover::before {
  width: 100%;
}

.footer-link a:hover {
  color: #9e9e9ee1;
}

.footer-about span {
  color: #666666b7;
  font-size: 16px;
  padding: 5px;
}

@media (max-width:820px) {
  .footer-item {
    
    grid-template-columns: 1fr;
    gap: 30px;
    
    
  }
}

.footer-alt p {
  color: #666;
}