body {
         font-family: 'inter', sans-serif;
         color: var(--text-main);
         background-color: #ffffff;
         line-height: 1.6;
     }


     .badge-tag {
         background-color: #f1f5f9;
         color: var(--primary_color);
         padding: 6px 14px;
         border-radius: 100px;
         font-size: 11px;
         font-weight: 700;
         letter-spacing: 0.5px;
         display: inline-block;
     }

     .hero-title {
         font-size: clamp(2.5rem, 5vw, 4rem);
         font-weight: 800;
         color: var(--primary_color);
         letter-spacing: -1.5px;
     }

     .hero-title span {
         color: var(--secondary_color);
     }

     .hero-img-container {
         width: 100%;
         height: 400px;
         background: linear-gradient(rgba(0, 31, 63, 0.05), rgba(0, 31, 63, 0.05)),
             url(../img/bg2.jpg);
         background-size: cover;
         background-position: center;
         border-radius: 24px;
         box-shadow: 0 20px 40px rgba(0, 0, 0, 0.05);
     }


     .contact-card {
         border: 1px solid #f1f5f9;
         border-radius: 20px;
         padding: 32px;
         transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
         background: #fff;
         height: 100%;
     }

     .contact-card:hover {
         border-color: var(--secondary_color);
         transform: translateY(-8px);
         box-shadow: 0 15px 30px rgba(217, 4, 41, 0.08);
     }

     .svg-icon-wrapper {
         width: 48px;
         height: 48px;
         background-color: #f8fafc;
         display: flex;
         align-items: center;
         justify-content: center;
         border-radius: 12px;
         margin-bottom: 24px;
         color: var(--primary_color);
     }

     .card-link {
         font-size: 14px;
         font-weight: 700;
         color: var(--secondary_color);
         text-decoration: none;
         display: inline-flex;
         align-items: center;
         gap: 8px;
     }


     .form-label {
         font-size: 13px;
         font-weight: 600;
         margin-bottom: 8px;
         color: var(--primary_color);
     }

     .form-control,
     .form-select {
         padding: 14px 18px;
         border-radius: 12px;
         border: 1px solid #e2e8f0;
         font-size: 15px;
         background-color: #fcfdfe;
     }

     .form-control:focus {
         border-color: var(--secondary_color);
         box-shadow: 0 0 0 4px rgba(217, 4, 41, 0.1);
     }

     .btn-send {
         background-color: var(--primary_color);
         color: #fff;
         padding: 16px;
         border-radius: 12px;
         font-weight: 700;
         border: none;
         transition: 0.3s;
     }

     .btn-send:hover {
         background-color: var(--secondary_color);
         transform: scale(1.02);
     }

     .info-panel {
         background-color: #f8fafd;
         border-radius: 24px;
         padding: 48px !important;
     }

     .info-row {
         display: flex;
         gap: 20px;
         margin-bottom: 32px;
     }

     .circle-svg {
         width: 44px;
         height: 44px;
         background: #eee;
         border-radius: 50%;
         display: flex;
         align-items: center;
         justify-content: center;
         flex-shrink: 0;
         box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
         color: var(--secondary_color);
     }

     .accordion-item {
         border: none;
         border-bottom: 1px solid #f1f5f9;
         padding: 10px 20px;
     }

     .accordion-button {
         font-weight: 600;
         padding: 20px 0;
         font-size: 15px;
         color: var(--primary_color);
     }

     .accordion-button:not(.collapsed) {
         background: none;
         color: var(--secondary_color);
         box-shadow: none;
     }








     .iconbox {
         background: #ffffff;
         padding: 40px;
         border-radius: 8px;
         transition: all 0.3s ease;
         height: 100%;
     }

     .icon-box-flex {
         display: flex;
         align-items: center;
         gap: 20px;
         margin-bottom: 25px;
         position: relative;
     }

     .icon-box-flex::after {
         content: "";
         position: absolute;
         bottom: -15px;
         left: 0;
         width: 100%;
         height: 2px;
         background: #ffffff;
     }

     .icon-box-flex::before {
         content: "";
         position: absolute;
         bottom: -15px;
         left: 0;
         width: 25%;
         height: 2px;
         background: var(--secondary_color);
         z-index: 1;
     }

     .iconbox .icon {
         width: 70px;
         height: 70px;
         display: flex;
         align-items: center;
         justify-content: center;
         border-radius: 8px;
         flex-shrink: 0;
     }


     .col-lg-4:nth-child(1) .icon {
         background-color: var(--primary_color);
     }


     .col-lg-4:nth-child(2) .icon {
         background-color: var(--secondary_color);
     }


     .col-lg-4:nth-child(3) .icon {
         background-color: var(--primary_color);
     }



     .icon img {
         width: 35px;
         height: auto;
         filter: brightness(0) invert(1);

     }


     .icon-content .para {
         font-size: 14px;
         color: #666;
         margin-bottom: 5px;
         text-transform: capitalize;
     }

     .icon-content .title {
         font-size: 22px;
         font-weight: 700;
         color: #1a1a1a;
         margin: 0;
     }


     .contact-number {
         margin-top: 35px;
     }

     .contact-number .para {
         display: inline-block;
         font-size: 16px;
         color: #555;
         text-decoration: none;
         line-height: 1.8;
         transition: color 0.3s;
     }

     .contact-number .para:hover {
         color: var(--secondary_color);
     }


     .mb-30 {
         margin-bottom: 30px;
     }



     .contact-section {
         min-height: 600px;
         display: flex;
         align-items: center;
     }

     .map-bg-container {
         position: absolute;
         top: 0;
         left: 0;
         width: 100%;
         height: 100%;
         z-index: 1;
     }

     .contact-section .container {
         z-index: 2;
     }

     .form-card {
         border-radius: 15px;
         border: 1px solid #eee;
     }


     .fw-800 {
         font-weight: 800;
     }

     .btn-primary {
         background-color: var(--primary_color);
         border: none;
         font-weight: 600;
     }


     @media (max-width: 991.98px) {
         .contact-section {
             display: block;
         }

         .map-bg-container {
             position: relative;
             height: 350px;
             margin-bottom: 30px;
         }

         .contact-section .container {
             padding-bottom: 50px;
         }
     }



     @media (max-width: 991px) {
         .hero-img-container {
             height: 250px;
             margin-top: 30px;
         }

         .info-panel {
             padding: 30px !important;
         }
     }