/* ----------------------------- */
   /* ------- CONTACT PAGE CSS ----- */
   /* ----------------------------- */

   .contact-section-bg {
       background: url("../images/mdox-contact-bg.png") no-repeat center center/cover;
       padding: 20px 0;
       width: 100%;
   }

   .contact-maintitle {
       font-size: 45px;
       font-weight: 700;
       color: #ffffff;
   }

   .contact-title-1 {
       font-size: 35px;
       font-weight: 600;
       margin-bottom: 2rem;
       position: relative;
   }

   .contact-title-1 {
       background: linear-gradient(90deg, #f1842d 0%, #ff3838 50%, #a53330 100%);
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       background-clip: text;
   }


   .contact-subtitle {
       font-size: 20px;
       color: #666666;
       max-width: 600px;
       margin: 0 auto 0;
       line-height: 1.7;
   }


   .contact-info-item-text {
       margin-bottom: 35px;
       padding-left: 1.5rem;
       border-left: 3px solid #977c77;
       transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
       position: relative;
   }

   .contact-info-item-text:hover {
       border-left-color: #f47430;
   }

   .info-label-text {
       font-size: 22px;
       font-weight: 600;
       margin-bottom: 0.5rem;
       display: flex;
       align-items: center;
       gap: 10px;

       /* Gradient text */
       background: linear-gradient(90deg, #f1842d 0%, #ff3838 50%, #a53330 100%);
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       background-clip: text;

       /* fallback */
       color: #ffffff;
   }

   .info-label-text i {
       font-size: 1.1rem;
       width: 24px;
       height: 16px;
       color: #FF6B35;
   }

   .contact-info-content-text {
       font-size: 1.125rem;
       font-weight: 500;
       color: #ffffff;
       line-height: 1.7;
       background: transparent;
       border: none;
       cursor: pointer;
       display: block;
       width: 100%;
       text-align: left;
       padding: 0;
       margin: 0;
       transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
       text-decoration: none;
   }

   .contact-form-card {
       background-color: #ffffff;
       border-radius: 14px;
       padding: 3rem;
       box-shadow: 0 8px 24px rgba(255, 107, 53, 0.15);
       height: 100%;
       border: 1px solid #FFD7C2;
       transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
       position: relative;
       overflow: hidden;
   }

   .contact-form-card::before {
       content: '';
       position: absolute;
       top: 0;
       left: 0;
       width: 100%;
       height: 5px;
       background: linear-gradient(135deg, #FF6B35 0%, #FF8C42 50%, #FFB347 100%);
   }

   .contact-form-card:hover {
       box-shadow: 0 8px 24px rgba(255, 107, 53, 0.15), 0 10px 30px rgba(255, 107, 53, 0.1);
   }

   .heading-bottom {
       margin-bottom: 6rem;
   }

   /* Mobile: Align left */
   @media (max-width: 1400px) {
       .heading-bottom {
           margin-bottom: 3rem;
       }

   }

   .contact-maintitle+p {
       color: #ffffff;
       font-size: 18px;
   }

   .contact-form-box {
       background: rgba(255, 255, 255, 0.03);
       border: 1px solid rgba(255, 255, 255, 0.12);
       border-radius: 14px;
       backdrop-filter: blur(14px);
       padding: 45px 32px 55px 32px;
   }

   .form-control {
       background: rgba(255, 255, 255, 0.05);
       border: 1px solid rgba(255, 255, 255, 0.15);
       color: #fff;
   }

   .form-control:focus {
       background: rgba(255, 255, 255, 0.1);
       border-color: #33e6c2;
       color: #fff;
   }

   .info-label {
       font-size: 23px;
       font-weight: 600;
       margin-bottom: 1px;
       background: linear-gradient(90deg, #3DAAFF -1.26%, #70EA83 17.89%);
       -webkit-background-clip: text;
       -webkit-text-fill-color: transparent;
       background-clip: text;
       /* added for better browser support */
       color: #ffffff;
       display: flex;
       align-items: center;
       gap: 10px;
   }

   /* 
   .info-label::before {
       content: '';
       display: inline-block;
       width: 6px;
       height: 6px;
       background: linear-gradient(90deg, #3DAAFF -1.26%, #70EA83 17.89%);
       border-radius: 50%;
   } */

   .contact-sub-title {
       font-size: 18px;
       margin-bottom: 20px;
       line-height: 1.7;
       transition: all 0.3s ease;
       border-left: 2px solid transparent;
       padding-left: 14px;
   }

   .contact-sub-title:hover {
       border-left: 2px solid #57CFA1;
       padding-left: 20px;
       color: #ffffff;
   }

   .submit-btn {
       background: rgba(255, 255, 255, 0.08);
       border: 1px solid rgba(255, 255, 255, 0.15);
       color: #fff;
       width: 100%;
       padding: 12px;
       border-radius: 8px;
       transition: 0.3s ease;
   }

   .submit-btn:hover {
       border-color: #3dabff;
       box-shadow: 0 0 15px rgba(60, 224, 168, 0.4);
       color: #3dabff;
   }

   /* Back Button */
   .back-btn {
       color: #ffffff;
       font-weight: 600;
       font-size: 16px;
       display: inline-flex;
       align-items: center;
       gap: 8px;
       padding: 10px 16px;
       background: rgba(255, 255, 255, 0.12);
       border-radius: 8px;
       backdrop-filter: blur(6px);
       text-decoration: none !important;
       transition: all 0.25s ease;
   }

   .back-btn i {
       font-size: 18px;
   }

   .back-btn:hover {
       background: rgba(255, 255, 255, 0.22);
       text-decoration: none !important;
   }

   .margin-align {
       margin-bottom: 5rem;
   }

   /* White placeholder text for all inputs & textareas */
   .form-control::placeholder {
       color: rgba(255, 255, 255, 0.7);
       /* soft white */
   }

   .form-control:-ms-input-placeholder {
       color: rgba(255, 255, 255, 0.7);
   }

   .form-control::-ms-input-placeholder {
       color: rgba(255, 255, 255, 0.7);
   }

   .form-control {

       padding: 9px 0.75rem !important;
   }

   /* Extra small devices (phones, 600px and down) */
   @media only screen and (max-width: 600px) {
       .contact-form-box {
           padding: 45px 12px 55px 12px !important;
       }
   }