/* =========================================
   CONTACT PAGE  —  contact.css
   Matches screenshot exactly
   ========================================= */

:root {
    --ct-cyan:    #29C3D4;
    --ct-yellow:  #F0A500;
    --ct-yellow-d:#D08C00;
    --ct-dark:    #1a1a1a;
    --ct-text:    #555;
    --ct-border:  #d8dde6;
    --ct-bg:      #f7f7f7;
    --ct-white:   #ffffff;
    --ct-shadow:  0 2px 12px rgba(0,0,0,.06);
}

/* =========================================
   CONTACT PAGE – SITE #52
========================================= */

/* ---- Hero banner (simple, corner to corner) ---- */
.ct-hero{
  width: 100%;
  height: 400px;
  background-size: cover;
  background-position: left center;
}

/* ---- Info card + Form layout ---- */
.ct-section{
  max-width: 1200px;
  margin: 0 auto;
  padding: 60px 20px;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 60px;
  align-items: start;
}

/* ---- Left: Info card ---- */
.ct-section > div:first-child{
  background: #F0F6FA;                 /* halka blue card, image jaisa */
  border: 1px solid #E4EBF2;
}
.ct-section > div:first-child > div{
  position: relative;
  padding: 24px 25px;
  border-bottom: 1px solid #E4EBF2;
}
.ct-section > div:first-child > div:last-child{ border-bottom: 0; }

.ct-section > div:first-child h3{
  margin: 0 0 12px;
  color: #111;
  font-size: 18px;
  font-weight: 600;
}
.ct-section > div:first-child a{
  color: var(--primary);               /* phone number blue */
  font-size: 15px;
  text-decoration: none;
}
.ct-section > div:first-child p{
  margin: 0;
  color: #333;
  font-size: 15px;
}
h2.headings{
    margin: 0 0 12px;
  color: #111;
  font-size: 18px;
  font-weight: 600;
}
h1.heading{
  font-size: 4px;
  color: var(--secondary);

  letter-spacing: 15px;
  text-align: center;
}
/* Phone & Address icons (right side, ::before se – koi extra tag nahi) */
.ct-section > div:first-child > div:nth-child(1)::after{
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  content: "\f095";                    /* fa-phone */
  position: absolute;
  right: 25px; top: 26px;
  color: #000;
  font-size: 16px;
}
.ct-section > div:first-child > div:nth-child(2)::after{
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  content: "\f3c5";                    /* fa-location-dot */
  position: absolute;
  right: 25px; top: 26px;
  color: #000;
  font-size: 16px;
}

/* Social icons: primary, hover secondary */
.ct-section > div:first-child > div:last-child > div{
  display: flex;
  gap: 20px;
}
.ct-section > div:first-child > div:last-child a{
  color: var(--primary);
  font-size: 16px;
  transition: .3s;
}
.ct-section > div:first-child > div:last-child a:hover{ color: var(--secondary); }
.ct-section > div:first-child > div:last-child a:nth-child(1)::before{
  font-family: "Font Awesome 6 Brands"; font-weight: 400; content: "\f39e";   /* facebook-f */
}
.ct-section > div:first-child > div:last-child a:nth-child(2)::before{
  font-family: "Font Awesome 6 Brands"; font-weight: 400; content: "\f16d";   /* instagram */
}
.ct-section > div:first-child > div:last-child a:nth-child(3)::before{
  font-family: "Font Awesome 6 Free"; font-weight: 900; content: "\f0b1";     /* briefcase */
}

/* ---- Right: Form ---- */
.ct-section > div:last-child h2{
  margin: 0 0 8px;
  color: #000;
  font-size: 28px;
  font-weight: 700;
  text-align: center;
}
.ct-section > div:last-child > p{
  margin: 0 0 30px;
  color: #5A6472;
  font-size: 14px;
  text-align: center;
}

.ct-section form > div:first-child{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}
.ct-section form > div:nth-child(2),
.ct-section form > div:nth-child(3){ margin-bottom: 20px; }

.ct-section input,
.ct-section textarea{
  width: 100%;
  box-sizing: border-box;
  border: 1px solid #E2E5EA;
  background: #fff;
  padding: 12px 15px;
  font-size: 15px;
  font-family: inherit;
  color: #333;
  border-radius: 2px;
  outline: none;
  transition: .3s;
  resize: vertical;
}
.ct-section input:focus,
.ct-section textarea:focus{ border-color: var(--primary); }

/* SEND button – main site jaisa primary, hover secondary */
.ct-section button{
  display: block;
  margin: 25px auto 0;
  background: var(--secondary);
  border: 2px solid var(--secondary);
  color: #fff;
  
  padding: 14px 45px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  transition: .3s;
}
.ct-section button:hover{ background: white;
color: #000;
border: 2px solid var(--primary);

}

.cq-error{
  display: block;
  color: #E53935;
  font-size: 13px;
  margin-top: 6px;
}

/* ---- Full-width map ---- */
.ct-map iframe{
  display: block;
  width: 100%;
  height: 450px;
  border: 0;
}

/* =========================================
   RESPONSIVENESS
========================================= */
@media (max-width: 1024px){
  .ct-section{ grid-template-columns: 320px 1fr; gap: 40px; }
  
}
@media (max-width: 900px){
  .ct-section{ grid-template-columns: 1fr; }
  .ct-section > div:first-child{ max-width: 480px; }
}
@media (max-width: 768px){
  .ct-section{ padding: 45px 15px; }
  .ct-section h2{ font-size: 24px; }
  .ct-section form > div:first-child{ grid-template-columns: 1fr; }
  
  .ct-map iframe{ height: 350px; }
  .ct-section button{
  display: block;
  margin: 25px auto 0;
  background: var(--secondary);
  color: #fff;
  
  padding: 15px 59px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  transition: .3s;
}
}



/* =========================================
   ALL PAGE BANNERS — BASE + RESPONSIVE (EK JAGAH)
========================================= */
/* Desktop base — sab banners same */



@media (max-width: 1440px){
    .ct-hero{
        height: 300px;
        min-height: 0;
    }
}
@media (max-width: 1024px){
    .ct-hero{
        height: 221px;
        min-height: 0;
    }
}
@media (max-width: 820px){
    .ct-hero{
        height: 280px;
        min-height: 0;
    }
}
@media (max-width: 786px){
    .ct-hero{
        height: 168px;
        min-height: 0;
    }
}
@media (max-width: 500px){
    .ct-hero{
        height: 120px;
        min-height: 0;
    }
}