body {
       background: #ffffff;
       color: #000;
       overflow-x: hidden;
   }

   /* Animated Background Pattern */
   body::before {
       content: '';
       position: fixed;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       /* background-image:
           radial-gradient(circle at 20% 50%, rgba(220, 40, 39, 0.03) 0%, transparent 50%),
           radial-gradient(circle at 80% 80%, rgba(0, 0, 0, 0.03) 0%, transparent 50%); */
       z-index: -1;
   }

   .contact-main-container {
    margin-top: 8%;
   }
   
   @media screen and (max-width: 991px) {
    
        .contact-main-container {
            margin-top: 16%;
        }
       
   }
   
   @media screen and (max-width: 500px) {
    
        .contact-main-container {
        margin-top: 85px;
        }
       
   }

   .contact-main-container h1 {
    font-size: 3.5rem;
    margin-bottom: 2%;
    color: #b91f1f;
    text-align: center;
   }

   .container {
       max-width: 85%;
       margin: 0 auto;
       padding: 30px 20px;
   }

   .header p {
       font-size: 1.1rem;
       color: #666;
       margin-top: 10px;
       font-weight: 300;
   }

   .header .underline {
       width: 100px;
       height: 5px;
       background: linear-gradient(90deg, transparent, #dc2827, transparent);
       margin: 15px auto;
       border-radius: 10px;
       position: relative;
   }

   .header .underline::before {
       content: '';
       position: absolute;
       left: 50%;
       top: 50%;
       transform: translate(-50%, -50%);
       width: 15px;
       height: 15px;
       background: #dc2827;
       border-radius: 50%;
       box-shadow: 0 0 20px rgba(220, 40, 39, 0.5);
   }

   /* Contact Wrapper */
   .contact-wrapper {
       display: flex;
       gap: 44px;
       flex-wrap: wrap;
       margin-bottom: 80px;
   }
   

   /* Left Side - Contact Information */
   .contact-info {
       flex: 1;
       min-width: 320px;
       background: #676767;
       color: #fff;
       padding: 35px;
       border-radius: 20px;
       box-shadow:
           0 20px 60px rgba(0, 0, 0, 0.3),
           inset 0 0 0 1px rgba(255, 255, 255, 0.1);
       position: relative;
       overflow: hidden;
   }

   @keyframes pulse {

       0%,
       100% {
           transform: translate(0, 0) scale(1);
       }

       50% {
           transform: translate(-10px, -10px) scale(1.1);
       }
   }

   .contact-info-content {
       position: relative;
       z-index: 1;
   }

   .contact-info h2 {
       
       color: #fff;
       font-size: 2.5rem;
       margin-bottom: 10px;
       text-transform: uppercase;
       letter-spacing: 2px;
   }

   .contact-info .tagline {
       color: #dc2827;
       font-size: 0.9rem;
       margin-bottom: 40px;
       font-weight: 300;
       letter-spacing: 3px;
       text-transform: uppercase;
   }

   .info-section {
       margin-bottom: 40px;
       padding-left: 0;
   }

   .info-section h3 {
       color: #ffffff;
       font-size: 0.85rem;
       margin-bottom: 20px;
       text-transform: uppercase;
       letter-spacing: 2px;
       font-weight: 600;
       display: flex;
       align-items: center;
       gap: 10px;
   }

   .info-section h3 i {
       font-size: 1.2rem;
   }

   .info-item {
       display: flex;
       align-items: center;
       gap: 15px;
       margin-bottom: 15px;
       padding: 12px;
       border-radius: 10px;
       transition: all 0.3s ease;
       border-left: 3px solid transparent;
   }

   .info-item:hover {
       transform: translateX(5px);
   }

   .info-item i {
       color: #eb5352;
       font-size: 1.1rem;
       width: 20px;
       text-align: center;
   }

   .info-item a {
       color: #f4f1ea;
       text-decoration: none;
       transition: color 0.3s;
       font-size: 0.95rem;
   }

   .info-item a:hover {
       color: #dc2827;
   }

   .info-item p {
       color: #f4f1ea;
       font-size: 0.95rem;
       margin: 0;
   }

   .address-block {
       background: rgba(255, 255, 255, 0.1);
       padding: 20px;
       border-radius: 10px;
       border-left: 4px solid #000000;
   }

   .address-block strong {
       color: #000000;
       display: block;
       margin-bottom: 10px;
       font-size: 1.1rem;
   }

   .address-block p {
       color: #f4f1ea;
       line-height: 1.8;
       font-size: 0.95rem;
   }

   /* Right Side - Contact Form */
   .contact-form {
       flex: 1;
       display: flex;
       flex-direction: column;
       min-width: 320px;
       background: #fff;
       padding: 50px 45px;
       border-radius: 20px;
       box-shadow:
           0 20px 60px rgba(0, 0, 0, 0.1),
           0 0 0 1px rgba(0, 0, 0, 0.05);
       position: relative;
   }

   .contact-form::before {
       content: '';
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       height: 5px;
       background: linear-gradient(90deg, #dc2827, #ff4544, #dc2827);
       border-radius: 20px 20px 0 0;
   }

   .contact-form h2 {
       
       color: #000;
       font-size: 2rem;
       margin-bottom: 15px;
       font-weight: 700;
   }

   .contact-form .subtitle {
       color: #666;
       margin-bottom: 35px;
       font-size: 0.95rem;
       font-weight: 300;
   }

   .contact-form form {
    display: flex;
    flex-direction: column;
    flex: 1;
   }

   .form-group {
       margin-bottom: 25px;
       position: relative;
   }

   .form-group label {
       display: block;
       margin-bottom: 10px;
       color: #000;
       font-weight: 500;
       font-size: 0.9rem;
       display: flex;
       align-items: center;
       gap: 8px;
   }

   .form-group label i {
       color: #dc2827;
       font-size: 0.9rem;
   }

   .form-group label span {
    color: #dc2827;
   }

   .form-group input,
   .form-group textarea {
       width: 100%;
       padding: 15px 20px;
       border: 2px solid #e8e3d6;
       border-radius: 10px;
       font-size: 1rem;
       font-family: inherit;
       transition: all 0.3s ease;
       background: #fafafa;
   }

   .form-group input:focus,
   .form-group textarea:focus {
       outline: none;
       border-color: #dc2827;
       background: #fff;
       box-shadow: 0 5px 20px rgba(220, 40, 39, 0.1);
       transform: translateY(-2px);
   }

   .contact-group {
    display: flex;
    flex-direction: column;
    flex: 1;
   }

   .form-group textarea {
        flex: 1;
       resize: vertical;
       min-height: 140px;
   }

   .form-row {
       display: grid;
       grid-template-columns: 1fr 1fr;
       gap: 20px;
   }

   .submit-btn {
       background: linear-gradient(135deg, #dc2827 0%, #b91f1f 100%);
       color: #fff;
       padding: 16px 50px;
       border: none;
       border-radius: 50px;
       font-size: 1rem;
       font-weight: 600;
       cursor: pointer;
       transition: all 0.4s ease;
       text-transform: uppercase;
       letter-spacing: 1.5px;
       box-shadow: 0 10px 30px rgba(220, 40, 39, 0.3);
       position: relative;
       overflow: hidden;
       display: flex;
       align-items: center;
       gap: 10px;
       margin-top: 10px;
       width: fit-content;
   }

   .submit-btn::before {
       content: '';
       position: absolute;
       top: 50%;
       left: 50%;
       width: 0;
       height: 0;
       border-radius: 50%;
       background: rgba(255, 255, 255, 0.2);
       transform: translate(-50%, -50%);
       transition: width 0.6s, height 0.6s;
   }

   .submit-btn:hover::before {
       width: 300px;
       height: 300px;
   }

   .submit-btn:hover {
       transform: translateY(-3px);
       box-shadow: 0 15px 40px rgba(220, 40, 39, 0.4);
   }

   .submit-btn:active {
       transform: translateY(-1px);
   }

   .submit-btn i {
       position: relative;
       z-index: 1;
   }

   .submit-btn span {
       position: relative;
       z-index: 1;
   }

   /* Map Section */
   .map-section {
       width: 100%;
       padding: 0 20px;
       max-width: 1400px;
       margin: 0 auto 80px;
   }

   .map-header {
       text-align: center;
       margin-bottom: 40px;
   }

   .map-header h2 {
       
       font-size: 2.5rem;
       margin-bottom: 15px;
       color: #b91f1f;
       font-weight: 700;
   }

   .map-header p {
       color: #000;
       font-size: 1rem;
       font-weight: 300;
   }

   .map-container {
       width: 100%;
       height: 500px;
       border-radius: 20px;
       overflow: hidden;
       box-shadow:
           0 20px 60px rgba(0, 0, 0, 0.2),
           0 0 0 1px rgba(0, 0, 0, 0.05);
       position: relative;
   }

   .map-container::before {
       content: '';
       position: absolute;
       top: 0;
       left: 0;
       right: 0;
       bottom: 0;
       border: 3px solid #dc2827;
       border-radius: 20px;
       opacity: 0;
       transition: opacity 0.3s;
       pointer-events: none;
       z-index: 1;
   }

   .map-container:hover::before {
       opacity: 0.3;
   }

   .map-container iframe {
       width: 100%;
       height: 100%;
       border: none;
       filter: grayscale(0);
       transition: filter 0.3s;
   }

   /* Info Cards at Bottom */
   .info-cards {
       display: grid;
       grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
       gap: 30px;
       margin-bottom: 80px;
   }

   .info-card {
       background: #fff;
       padding: 35px 30px;
       border-radius: 15px;
       box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
       text-align: center;
       transition: all 0.3s ease;
       border-top: 4px solid #dc2827;
   }

   .info-card:hover {
       transform: translateY(-10px);
       box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
   }

   .info-card-icon {
       width: 70px;
       height: 70px;
       background: linear-gradient(135deg, #dc2827, #ff4544);
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       margin: 0 auto 20px;
       box-shadow: 0 10px 25px rgba(220, 40, 39, 0.3);
   }

   .info-card-icon i {
       font-size: 1.8rem;
       color: #fff;
   }

   .info-card h3 {
       font-size: 1.3rem;
       margin-bottom: 10px;
       color: #000;
   }

   .info-card p {
       color: #666;
       line-height: 1.6;
       font-size: 0.95rem;
   }

   /* Responsive Design */
   @media (max-width: 991px) {
       .container {
           padding: 15px;
           max-width: 1400px;
       }

       .header h1 {
           font-size: 2.5rem;
       }

       .contact-wrapper {
           gap: 30px;
           flex-direction: column;
           margin-bottom: 40px;
       }

       .contact-info,
       .contact-form {
           padding: 35px 25px;
       }

       .contact-info h2 {
           font-size: 2rem;
       }

       .contact-form h2 {
           font-size: 1.7rem;
       }

       .form-row {
           grid-template-columns: 1fr;
           gap: 0;
       }

       .map-container {
           height: 400px;
       }

       .map-header h2 {
           font-size: 2rem;
       }

       .info-cards {
           grid-template-columns: 1fr;
       }
   }

   @media (max-width: 480px) {
       .header h1 {
           font-size: 2rem;
       }

       .contact-info,
       .contact-form {
           padding: 30px 20px;
       }

       .map-container {
           height: 350px;
       }

       .submit-btn {
           width: 100%;
           justify-content: center;
       }
   }

   /* Loading Animation */
   @keyframes fadeInUp {
       from {
           opacity: 0;
           transform: translateY(30px);
       }

       to {
           opacity: 1;
           transform: translateY(0);
       }
   }

   .contact-wrapper>* {
       animation: fadeInUp 0.6s ease-out forwards;
   }

   .contact-info {
       animation-delay: 0.2s;
   }

   .contact-form {
       animation-delay: 0.4s;
   }