/* ===========================
    # 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-top {
    row-gap: 20px !important;
}


.contact-top .col-lg-4,
.contact-top .col-md-6 {

    display: flex;

    padding-left: 10px;
    padding-right: 10px;

}


.contact-top a {

    display: flex;

    width: 100%;

    text-decoration: none;

}



/* Card */

.info-card {

    background: rgba(255,255,255,0.9);

    padding: 30px 25px;

    border-radius: 25px;

    text-align: center;

    position: relative;

    overflow: hidden;

    width: 100%;

    height: 290px; /* SAME HEIGHT ALL BOX */

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;


    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);

}



/* Hover Effect */

.info-card:hover {

    transform:translateY(-10px);

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

}



/* Icon */

.info-card i {

    width:70px;

    height:70px;

    display:flex;

    align-items:center;

    justify-content:center;


    margin-bottom:15px;


    border-radius:50%;


    font-size:32px;


    background:#fff4e5;


    color:#F3920F;


    transition:.4s;

}



.info-card:hover i {

    background:#F3920F;

    color:#ffffff;

    transform:rotateY(360deg);

}



/* Title */

.info-card h3 {

    font-size:22px;

    font-weight:800;

    color:#0e4e5b;

    margin-bottom:10px;

}



/* Description */

.info-card p {

    font-size:15px;

    color:#666;

    line-height:1.6;

    margin:0;

}



/* Link Text */

.info-card span {

    display:inline-block;

    margin-top:12px;

    font-size:14px;

    font-weight:700;

    color:#F3920F;

}



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


@media(max-width:768px){


    .contact-top {

        row-gap:15px !important;

    }


    .contact-top .col-lg-4,
    .contact-top .col-md-6 {

        padding-left:5px;

        padding-right:5px;

    }


    .info-card {

        height:auto;

        min-height:260px;

        padding:25px 20px;

    }


    .info-card h3 {

        font-size:20px;

    }


    .info-card p {

        font-size:14px;

    }


}

/* ==============================
   # 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;

}