/*
Theme Name: Burak ARI custompage
Template: Borda
Theme URI: https://www.bordatech.com/
Author: M.Burak ARI
Description:Custom WordPress Theme Page with Block Builder
Version: 1.0
Tags: one-column, two-columns, three-columns, four-columns, hubspot, google maps, Borda global offices
*/

/*Action benefits sliding box*/
.sliding_box_child .sb_content_wrapper {
    padding: 25px !important;
    position: absolute;
    top: 0;
    left: 295px;
    width: 295px;
    height: 100%;
    max-width: 300px;
    background: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
/*Action benefits sliding box*/


/* Below you can write your style */
.hideit {display:none !important}
button#btnStartFreeTrail2402.send-btn.contact.ANbtn.ANbtn_Gradiant {
    width: 130px !important;
    max-width: 130px !important;
    min-width: 130px !important;
    border-radius: 30px !important;
    float: left;
  padding: 13px 35px !important;
}

  #map_canvas {
    width: 100%;
    /*height: calc(100vh / 2 - 253px);*/
    height:600px;
  }    
  @media (max-width: 1030px) {
    #map_canvas {
      height: 360px !important;
    }
  }

div#GetinTouchID {
    padding-top: 32px !important;
}
h1 {
      color: #e25525; /* orange */
      font-weight: 700;
      font-size: 2rem;
      margin-bottom: 2rem;
    }
    span.office-title {
    padding-top: 15px;
}
    /* Container grid for offices max-width: 480*/
    .offices-container {
      display: grid;
      grid-template-rows: repeat(auto-fit, minmax(200px, 1fr));        
      gap: 1rem 2rem;
      max-width: 250px;
      margin: 0 auto;
    }
    /* Each office card */
    .office-card {
      background: #f7f7f7;
      padding-top: 4rem; /* üst padding eklendi */
      /*padding-bottom: 2rem;*/
      box-sizing: border-box;
      border-radius: 4px;
      /* For vertical consistent alignment */
      display: flex;
      flex-direction: column;
      /*align-items: center;*/
      text-align: left;
      position: relative; /* resmi yukarı taşımak için gerekli */
      margin-bottom: 50px;
      margin-top: 70px;
      
    }
    /* Image container for circle effect */
    .office-image {
      width: 130px;
      height: 130px;
      border-radius: 50%;
      overflow: hidden;
      box-shadow: 0 0 8px rgba(0,0,0,0.1);
      position: absolute;
      top: -65px; /* kutunun yarısı dışarıda */
      transition: transform 0.3s ease; /* animasyon geçişi */
      align-self: center;
    }

    .office-card:hover .office-image {
      transform: translateY(-10px); /* yavaşça yukarı kaydır */
    }


    .office-image img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      align-self: center;
    }
    /* Office title */
    .office-title {
      font-weight: 700;
      font-size: 1.1rem;
      margin-bottom: 0.45rem;
      color: #002e5d;
          padding: 0 10px;
    }
    /* Office address */
    .office-address {
    font-weight: 400;
    font-size: 12px;
    line-height: 1.4;
    color: #002e5d;
    white-space: pre-line;
    padding: 0 10px;
    }
    /*p.office-address {
    padding: 0 5px;
    }*/

    @media (max-width: 480px) {
      h1 {
        font-size: 1.75rem;
      }
      .office-image {
        width: 110px;
        height: 110px;
        margin-bottom: 1rem;
      }
      .office-title {
        font-size: 1rem;
      }
      .office-address {
        font-size: 0.8rem;
      }
    }

div#primary {
    padding-bottom: 0px !important;
}
.HsPage{
    /*height: calc(100vh - 287px);*/
    margin: 0;
    /*background: linear-gradient(90deg, #3a5da6 0%, #00afb3 100%);*/*/
    display: flex;
    justify-content: center;
    align-items: center;
    display: flex;
    /*padding: 40px 20px;*/
    box-sizing: border-box;    
}
/*yeni eklendi*/
.form-wrapper {
  position: relative;
}
div#GetinTouchID {
    max-width: 960px;
    display: block;
    justify-self: center;
}

.form-title {
  font-weight: 700;
  font-size: 28px;
  color: white;
  margin-bottom: 30px;
  user-select: none;
}

@media (max-width: 767px) {
  .form-container {
    width: 100%;
    padding: 30px 20px;
  }

  .form-title {
    font-size: 22px;
    margin-bottom: 20px;
  }
}

/*yeni eklendi*/
.form-container {
    background: white;
    max-width: 640px;
    width:100%;
    padding: 10px;
    box-sizing: border-box;
    /*box-shadow: 0 0 15px rgba(0,0,0,0.1);*/
  }

  /* Heading style */
  h1 {
    font-weight: 700;
    font-size: 28px;
    color: white;
    text-align: center;
    user-select: none;
  }

  /* Grid for two inputs side by side */
  .input-row {
    display: flex;
    justify-content: space-between;
    gap: 20px;
  }

  /* Label wrapper */
  .input-field {
    flex: 1;
    margin-bottom: 28px;
  }

  /* Base input style */
input[type="text"],
input[type="email"], 
select#countries,
input[type="textarea"]{
    width: 100%;
    border: none;
    border-bottom: 1.5px solid #9ba0b3;
    padding: 8px 4px 5px 4px;
    font-size: 14px;
    color: #4a4a4a;
    outline: none;
    transition: border-color 0.3s ease;
    background: transparent;
  }

select#countries {
    width: 100%;
    border: none;
    border-bottom: 1.5px solid #9ba0b3;
    padding: 8px 4px 5px 4px;
    font-size: 14px;
    color: #4a4a4a;
    outline: none;
    transition: border-color 0.3s ease;
    background: transparent;
}
textarea#message {
    height: 75px;
    line-height: 15px;
    border: 1px solid #939598;
    padding: 10px;
    color: #4a4a4a !important;
    font-family: Helvetica, Arial !important;
    border-bottom-left-radius: 10px !important;
    border-bottom-right-radius: 10px !important;
    width: 100%;
    transition: border-color 0.2s ease-in-out;
    margin: 30px 0 30px;
    position: relative;
}

textarea#message:focus{
    border-color: #00afb3;
  }

  /* Placeholder text style */
  input::placeholder {
    color: #a3a8c8;
    font-weight: 400;
  }

  /* On focus show bottom line highlight */
input[type="text"]:focus,
input[type="email"]:focus, 
select#countries:focus,
input[type="textarea"]:focus{
    border-bottom-color: #00afb3;
  }

  /* Privacy text style */
  .privacy-text {
    font-size: 11px;
    color: #192844;
    margin-bottom: 32px;
    line-height: 1.3;
    user-select: none;
  }

  .privacy-text a {
    color: #00afb3;
    text-decoration: none;
    font-weight: 500;
  }

  .privacy-text a:hover,
  .privacy-text a:focus {
    text-decoration: underline;
  }

  /* Gradient button with shadow */
  button.send-btn {
    background: linear-gradient(90deg, #3a5da6 0%, #00afb3 100%);
    border: none;
    color: white;
    font-weight: 700;
    font-size: 16px;
    padding: 12px 30px;
    border-radius: 6px;
    box-shadow: 4px 5px 10px rgba(0, 175, 179, 0.4);
    cursor: pointer;
    outline-offset: 0;
    outline: none;
    user-select: none;
    transition: box-shadow 0.3s ease;
  }

  button.send-btn:hover,
  button.send-btn:focus {
    box-shadow: 4px 5px 15px rgba(0, 175, 179, 0.65);
  }