/* Home page (index.php) styles — cloned from join-squad.css */

.contact-type-tabs {
  display: flex;
  gap: 16px;
  border: 1px solid rgba(0, 0, 0, .08);
  border-radius: 40px;
  padding: 6px;
}

.contact-type-tabs .tab-toggle {
  flex: 1;
  white-space: nowrap;
  border: 0;
  background: transparent;
  padding: 10px 18px;
  border-radius: 28px;
  cursor: pointer;
  font-weight: 600
}

.contact-type-tabs .tab-toggle.active {
  background: rgba(0, 0, 0, .06)
}

#brand-fields.form-group {
  margin: 0 !important;
  padding: 0 !important;
  height: 0 !important;
}

.contact-emails {
  font-size: 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  line-height: 1.6
}

.contact-email-line {
  display: flex;
  align-items: center;
  gap: 6px
}

.contact-email-line i {
  width: 18px;
  flex: 0 0 18px;
  text-align: center;
  color: var(--theme-color, #111)
}

.contact-email-line a {
  color: inherit;
  text-decoration: none
}

.contact-email-line a:hover {
  text-decoration: underline
}

/* keep right side placement, but left-align text for vertical straightness */
/* Contact page submit hover: red -> yellow, text -> black */
#contactForm .th-btn {
  transition: background-color .2s ease, color .2s ease, border-color .2s ease
}

#contactForm .th-btn:hover {
  background-color: #FFD400;
  border-color: #FFD400;
  color: #000 !important
}

/* Override theme hover overlays so the visible fill is yellow */
#contactForm .th-btn:hover:before,
#contactForm .th-btn:hover:after,
#contactForm .th-btn.active:before,
#contactForm .th-btn.active:after {
  background-color: #FFD400
}

@media (max-width: 480px) {
  .contact-type-tabs {
    gap: 8px;
    padding: 4px
  }

  .contact-type-tabs .tab-toggle {
    padding: 8px 12px
  }
}

/* Contact left text banner replacing contact_1.png */
.contact-text-banner{
  display:flex;
  margin-top: 120px;
  justify-content:flex-start; /* align content to the left */
  align-items:flex-start;
  min-height:100%;
  text-align:left; /* override any .text-center utility */
}

.contact-slogan{
  font-family: var(--title-font, 'Roboto Condensed', sans-serif);
  font-weight:800;
  text-transform:uppercase;
  line-height:1.15;
  margin:0;
  color:#fff;
  font-size:70px;
  text-align:left; /* ensure inner lines are left-aligned */
}

.contact-slogan .highlight{
  color:#E5331D; /* đỏ accent theo template */
}

/* Force each word block on its own line */
.contact-slogan .slogan-top,
.contact-slogan .slogan-create,
.contact-slogan .slogan-bottom{display:block}

/* Colors: READY TO / BY PASSION in yellow; CREATE in theme red */
.contact-slogan .slogan-top,
.contact-slogan .slogan-bottom{color:#FFEB3E}
.contact-slogan .slogan-create{color:var(--theme-color, #E5331D)}

@media (max-width:1199px){ .contact-slogan{font-size:48px} }
@media (max-width: 991px){ .contact-slogan{font-size:40px} }
@media (max-width: 575px){ .contact-slogan{font-size:32px} }

/* === Contact section theme — match index dark style (background & colors) === */
#contact-sec{ background-color: #0F0F0F; }

/* Inputs/select/textarea on dark bg */
#contact-sec .form-control,
#contact-sec .form-select,
#contact-sec textarea{
  background-color:#2C3240;  /* same tone used in footer/newsletter style2 */
  border:1px solid #2C3240;
  color: var(--white-color);
  border-radius:10px;
  transition: border-color .2s ease, background-color .2s ease, color .2s ease;
}
#contact-sec .form-control:focus,
#contact-sec .form-select:focus,
#contact-sec textarea:focus{ border-color: var(--theme-color); background-color:#2C3240; color:var(--white-color); }
#contact-sec .form-control::placeholder,
#contact-sec textarea::placeholder{ color: rgba(255,255,255,.70); }

/* Field icons contrast on dark */
#contact-sec .form-group>i{ color: var(--white-color); }

/* Tabs contrast on dark */
#contact-sec .contact-type-tabs{ border-color: rgba(255,255,255,.15); }
#contact-sec .contact-type-tabs .tab-toggle{ color: var(--white-color); }
#contact-sec .contact-type-tabs .tab-toggle.active{ background: rgba(255,255,255,.08); }

/* Right-side email list color */
#contact-sec .contact-emails{ color: var(--white-color); }
#contact-sec .contact-email-line i{ color: var(--white-color); }
#contact-sec .contact-email-line a{ color: var(--white-color); }

/* Keep existing button hover (yellow) but ensure base text is readable on dark */
#contact-sec #contactForm .th-btn{ color:#fff; }

.unlock-sec{
  padding: 100px 0;
  background-color: #0F0F0F; /* keep in sync with contact-sec bg */
}
.unlock-copy .unlock-line{
  margin: 0;
  font-weight: 800;
  text-transform: uppercase;
  line-height: 1.05;
  font-family: var(--title-font, 'Poppins', sans-serif);
}
.unlock-copy .line-1,
.unlock-copy .line-2,
.unlock-copy .line-3,
.unlock-copy .line-4{
  color: #FFEB3E;
}
.unlock-copy .unlock-line{ font-size: 70px; }
@media (max-width:1199px){ .unlock-copy .unlock-line{ font-size: 48px; } }
@media (max-width: 991px){ .unlock-sec{ padding: 60px 0; } .unlock-copy .unlock-line{ font-size: 40px; } }
@media (max-width: 575px){ .unlock-copy .unlock-line{ font-size: 32px; } }

.unlock-visual{
  display: flex;
  justify-content: center;
  align-items: center;
}
.unlock-visual img{
  width: 100%;
  height: auto;
  max-width: 520px;
  filter: drop-shadow(0 10px 30px rgba(0,0,0,.35));
}

/* reduce top spacing if it directly follows contact-sec */

/* Visual separator under the READY TO... block */
#contact-sec{ border-bottom: 1px solid rgba(255,255,255,.18); }

/* === Homepage contact-info cards — dark card, white text, yellow icons === */
/* Scope to this page (home.css only loaded on index.php) and the section using .space */
.space .contact-info{
  background: #2C3240;
  color: var(--white-color);
  box-shadow: none; /* keep consistent with other dark components */
}

.space .contact-info_title{ color: var(--white-color); }
.space .contact-info_text{ color: var(--white-color); }
.space .contact-info_text a{ color: var(--white-color); }
.space .contact-info_text a:hover{ color: #FFEB3E; }

/* Icon circle: yellow icon on dark circle with yellow outline */
.space .contact-info_icon{
  background-color: var(--title-color);
  color: #FFEB3E; /* icon color */
}
.space .contact-info_icon:before{ border-color: rgba(255,255,255,.18); }

/* Separator between consecutive dark sections on homepage */
.bg-dark + .bg-dark{ border-top: 1px solid rgba(255,255,255,.12); }

/* Equalize card sizes (width via columns, height via min-height) */
#info-sec .row > [class*="col-"] { display: flex; }
#info-sec .contact-info { width: 100%; min-height: 290px; }
@media (max-width: 575.98px){
  #info-sec .contact-info { min-height: 215px; }
  .th-hero-wrapper.hero-3 {
    min-height: 0vh;
}
.hero-style3{
  margin-top:50px;
}
.btn-group{
  margin-bottom:30px;
}
    .header-layout3 .header-logo {
        width: 40%;
    }
}
@media (max-width: 991px) {
    .space, .space-bottom {
        padding-bottom: 50 !important;
    }
}
@media (max-width: 991px) {
    .space, .space-top {
        padding-top: 50px !important;
    }
    .contact-text-banner{
      margin-top: 0px;
    }
}