.page-banner2 {
  position: relative;
  background: url("../images/contact/contact_banner.jpg") center center/cover no-repeat !important;
  min-height: 450px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.banner-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}

.banner-content {
  position: relative;
  z-index: 2;
  color: #fff;
}

.banner-content h1 {
  font-size: 30px;
  font-weight: 700;
  margin-bottom: 20px;
  color: #fff;
}

.breadcrumb {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.breadcrumb a,
.breadcrumb span {
  color: #fff;
  font-size: 18px;
  text-decoration: none;
}

.breadcrumb i {
  color: #fff;
}

/* Tablet */
@media (max-width: 991px) {
  .page-banner2 {
    min-height: 350px;
  }

  .banner-content h1 {
    font-size: 55px;
  }
}

/* Mobile */
@media (max-width: 767px) {
  .page-banner2 {
    min-height: 280px;
    padding: 0 15px;
  }

  .banner-content h1 {
    font-size: 30px;
    margin-bottom: 15px;
  }

  .breadcrumb a,
  .breadcrumb span {
    font-size: 15px;
  }
  
}

/* Small Mobile */
@media (max-width: 480px) {
  .banner-content h1 {
    font-size: 32px;
  }

  .breadcrumb {
    gap: 8px;
  }

  .breadcrumb a,
  .breadcrumb span {
    font-size: 14px;
  }
}



/*=========================
CONTACT SECTION
==========================*/
.contact-section{
    max-width:1400px;
    margin:45px 80px;
    padding:0 20px;
    display:flex;
    gap:100px;
    align-items:flex-start;
}

/*=========================
LEFT FORM
==========================*/
.contact-form-box{
  margin-left: 30px;
    width:480px;
    border:1px solid #000;
    border-radius:25px;
    padding:30px;
}

.contact-form-box h2{
    color:#d61f26;
    font-size:35px;
    font-weight:700;
    margin-bottom:25px;
}

.form-group{
    margin-bottom:20px;
}

.form-group label{
    display:block;
    margin-bottom:10px;
    font-size:20px;
}

.form-group input,
.form-group textarea{
    width:100%;
    border:1px solid #000;
    border-radius:8px;
    padding:15px;
    font-size:18px;
}

.form-group textarea{
    height:140px;
    resize:none;
}

.submit-btn{
    width:100%;
    background:#000;
    color:#fff;
    border:none;
    padding:15px;
    border-radius:8px;
    font-size:22px;
}

.form-group span {
    color: red;
}

/*=========================
RIGHT SIDE
==========================*/

.contact-details{
    flex:1;
}

.contact-title{
    font-size:40px;
    font-weight:700;
    margin-bottom:40px;
}

.contact-title span{
    font-weight:400;
}

.contact-item{
    display:flex;
    align-items:flex-start;
    gap:33px;
    margin-bottom:25px;
}
.contacts-icons{
    width: 40px;
    height: 40px;
    background: #d71920;
    border-radius: 50%;

    display: flex;
    justify-content: center;
    align-items: center;

    flex-shrink: 0;
}

.contacts-icons i{
    color: #ffe600;
    font-size: 18px;

    margin: 0 !important;
    padding: 0 !important;
    line-height: 1;
}

.contact-info h4{
    color:#d71920;
    font-size:25px;
    margin-bottom:8px;
}

.contact-info p{
    font-size:20px;
    line-height:1.5;
    color:#000;
}

.social-icons{
    display:flex;
    gap:20px;
    margin-top:20px;
    justify-content: center;
}

.social-icons a{
    width:45px;
    height:45px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:22px;
    color:#fff;
    text-decoration:none;
}

.social-icons a:nth-child(1){
    background:#3b5998;
}

.social-icons a:nth-child(2){
    background:#000;
    color: #fff;
}

.social-icons a:nth-child(3){
    background:linear-gradient(45deg,#f58529,#dd2a7b,#8134af,#515bd4);
}

.social-icons a:nth-child(4){
    background:#ff0000;
}

.social-icons a:nth-child(5){
    background:#0077b5;
}


/*=========================
TABLET
==========================*/
@media (max-width:992px){

.contact-section{
        flex-direction:column;
        gap:40px;
        margin:40px 20px;
        padding:0;
    }

    .contact-form-box{
        width:100%;
        max-width:100%;
        margin-left:0;
        box-sizing:border-box;
    }

    .contact-title{
        font-size:45px;
    }

    .contact-info h4{
        font-size:30px;
    }

    .contact-info p{
        font-size:18px;
    }

}


/*=========================
MOBILE
==========================*/
@media (max-width:768px){

    .contact-section{
        margin:30px 15px;
        padding:0;
        gap:35px;
    }

   .contact-form-box{
        width:100%;
        max-width:100%;
        margin-left:0;
        padding:20px;
        box-sizing:border-box;
    }

    .contact-form-box h2{
        font-size:32px;
    }

    .form-group label{
        font-size:18px;
    }

      .form-group input,
    .form-group textarea{
        width:100%;
        padding:12px;
        font-size:15px;
        box-sizing:border-box;
    }


   .submit-btn{
        font-size:18px;
        padding:14px;
    }

    .contact-title{
        font-size:38px;
        margin-bottom:30px;
    }

    .contact-item{
        gap:15px;
        margin-bottom:25px;
    }

      .contacts-icons{
        width: 40px;
        height: 40px;
    }

    .contacts-icons i{
        font-size:18px;
    }


    .contact-info h4{
        font-size:24px;
    }

    .contact-info p{
        font-size:16px;
        line-height:1.7;
    }

    .social-icons{
        gap:15px;
        flex-wrap:wrap;
    }

    .social-icons a{
        width:40px;
        height:40px;
        font-size:18px;
    }

}