/* ===========================
    # Page Title Section
=========================== */

.page-title {
  position: relative;
  height: 320px;
  display: flex;
  align-items: center;
  background-image: url("../img//Projects/Project1.jpg"); /* change image path */
  background-size: cover;
  background-position: center;
  overflow: hidden;
}


/* Transparent Overlay */

.page-title .overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45); /* transparency */
}


/* Content */

.page-title .container {
  z-index: 2;
  text-align: center;
}


.page-title h1 {
  color: #ffffff;
  font-size: 48px;
  font-weight: 800;
  margin-bottom: 15px;
  letter-spacing: 1px;
}


/* Breadcrumb */

.breadcrumbs ol {
  display: flex;
  justify-content: center;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0;
}


.breadcrumbs li {
  color: #ffffff;
  font-size: 16px;
}


.breadcrumbs a {
  color: #F3920F;
  text-decoration: none;
  transition: 0.3s;
}


.breadcrumbs a:hover {
  color: #ffffff;
}


.breadcrumbs .current {
  color: #ffffff;
}


/* Responsive */

@media(max-width:768px){

  .page-title{
    height:250px;
  }

  .page-title h1{
    font-size:36px;
  }

}

/* ================================
  # GROWSUN CONTACT SECTION
==================================*/

.contact {
  padding: 100px 0;
  background: linear-gradient(135deg, #f8faf7, #ffffff);
}


/* Main Layout */

.contact .row {
  align-items: center;
}


/* ===============================
  # CONTACT INFO CARDS
=================================*/


.contact-box {
  display: flex;
  flex-direction: column;
  gap: 25px;
}


.info-card {

  background: rgba(255,255,255,0.9);
  padding:35px 30px;
  border-radius:25px;
  text-align:center;
  position:relative;
  overflow:hidden;

  box-shadow:
  0 15px 40px rgba(0,0,0,0.08);

  transition:0.5s ease;

}


/* Top Orange Line */

.info-card::before{

content:"";
position:absolute;
top:0;
left:0;
width:100%;
height:5px;
background:#F3920F;
transform:scaleX(0);
transition:.4s;

}


.info-card:hover::before{

transform:scaleX(1);

}



.info-card:hover{

transform:translateY(-12px);
box-shadow:
0 25px 60px rgba(0,0,0,0.15);

}



/* Icon */

.info-card i{

width:75px;
height:75px;
display:flex;
align-items:center;
justify-content:center;

margin:0 auto 20px;

border-radius:50%;

font-size:35px;

background:#fff4e5;

color:#F3920F;

transition:.4s;

}



.info-card:hover i{

background:#F3920F;
color:white;
transform:rotateY(360deg);

}




.info-card h3{

font-size:22px;
font-weight:800;
color:#12372A;
margin-bottom:12px;

}



.info-card p{

font-size:15px;
color:#666;
line-height:1.7;
margin:0;

}



.info-card span{

display:inline-block;
margin-top:15px;

font-size:14px;
font-weight:700;

color:#F3920F;

}



/* ==============================
   # CONTACT FORM
================================*/


.php-email-form,
.whatsapp-form{


background:white;

padding:45px;

border-radius:30px;

box-shadow:
0 20px 50px rgba(0,0,0,0.10);

}



.php-email-form input,
.php-email-form textarea,
.whatsapp-form input,
.whatsapp-form textarea{


width:100%;

padding:17px 20px;

border-radius:15px;

border:1px solid #e5e5e5;

background:#fafafa;

font-size:15px;

color:#333;

transition:.3s;

outline:none;

}




.php-email-form input:focus,
.php-email-form textarea:focus,
.whatsapp-form input:focus,
.whatsapp-form textarea:focus{


background:white;

border-color:#F3920F;

box-shadow:
0 0 15px rgba(243,146,15,.25);

}




textarea{

resize:none;

}



/* =========================
  #   BUTTON
=========================== */


.php-email-form button,
.whatsapp-form button{


position:relative;

overflow:hidden;

border:none;

padding:16px 45px;

border-radius:50px;

background:
linear-gradient(135deg,#F3920F,#ffb52e);


color:white;

font-size:17px;

font-weight:700;

letter-spacing:.5px;

cursor:pointer;

transition:.4s;

box-shadow:

0 12px 30px rgba(243,146,15,.4);


}



.php-email-form button::before,
.whatsapp-form button::before{


content:"";

position:absolute;

top:0;

left:-100%;

width:100%;

height:100%;


background:rgba(255,255,255,.25);


transition:.5s;


}



.php-email-form button:hover::before,
.whatsapp-form button:hover::before{

left:100%;

}



.php-email-form button:hover,
.whatsapp-form button:hover{


transform:translateY(-5px);

box-shadow:

0 18px 40px rgba(243,146,15,.55);


}




/* ===========================
   MAP DESIGN
============================== */


.mt-5 iframe{


width:100%;

height:420px;

border:0;

border-radius:30px;


box-shadow:

0 20px 50px rgba(0,0,0,.15);


filter:saturate(1.2);


}





/* ============================
   LINKS
============================== */


.contact a{

text-decoration:none;

color:inherit;

}



/* ===============
   MOBILE
================ */


@media(max-width:768px){


.contact{

padding:60px 15px;

}



.php-email-form,
.whatsapp-form{

padding:25px;

}



.info-card{

padding:25px 20px;

}



.mt-5 iframe{

height:300px;

}


}
/* Contact Form Height */

.whatsapp-form,
.php-email-form {

    min-height: 520px;
    display: flex;
    align-items: center;

}


.whatsapp-form .row,
.php-email-form .row {

    width:100%;

}


/* Increase input height */

.whatsapp-form input,
.php-email-form input {

    height:55px;

}


/* Increase message box height */

.whatsapp-form textarea,
.php-email-form textarea {

    min-height:160px;

}
/* Top Contact Cards */

.contact-top{

margin-bottom:40px;

}


.contact-top .info-card{

height:100%;

}


/* Form Center */

.whatsapp-form{

max-width:900px;

margin:auto;

}


/* Map */

.map-box{

margin-top:60px;

}