* {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   font-family: 'Greycliff CF', sans-serif !important;
 }

 body {
   line-height: 1.6;
   color: #333 !important;
   background-color: #FAFAFA !important;
 }

 .main-container {
   position: relative;
   margin: 0 auto;

 }



 /* .main-container::before,
 .main-container::after {
   content: "";
   position: absolute;
   top: 0;
   bottom: 0;
   width: 1px;
   background-color: #00aaff;
 }

 .page-wrapper::before,
 .page-wrapper::after {
   content: "";
   position: absolute;
   top: 0;
   bottom: 0;
   width: 1px;
   background-color: #00aaff;
 }

 .page-wrapper::before {
   left: 5%;
 }








 .main-container::before {
   left: 2%;
 }

 .main-container::after {
   right: 2%;
 } */


 /* hero section */
 .hero-container {
   position: relative;
   max-width: 1300px;
   margin: 0 auto;
   padding: 40px 20px;
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
   flex-wrap: wrap;
 }



 .logo-bar {
   display: flex;
   justify-content: space-between;
   align-items: center;
   width: 100%;
   margin-bottom: 30px;
 }

 .logo {
   display: flex;
   align-items: center;
   gap: 10px;

 }

 .logo img {
   width: 250px;
 }

 .logo h1 {
   font-size: 1.8rem;
   letter-spacing: 2px;
   font-weight: 400;
   color: #000000;

 }



 .header-btn {
   background: #414C9A;
   color: white;
   padding: 10px 18px;
   border-radius: 6px;
   font-size: 14px;
   border: none;
   cursor: pointer;
 }

 .hero-left {
   flex: 1 1 500px;
   padding-right: 20px;
 }

 .hero-left h2 {
   font-size: 2rem;
   color: #414C9A;
   margin-bottom: 15px;
   font-weight: 400;
 }

 .hero-left p {
   font-size: 1rem;
   line-height: 1.6;
   margin-bottom: 20px;
 }

 .email-form {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
   flex-direction: row;
   align-items: flex-start;
 }

 .input-error-container {
   flex: 1;
   min-width: 200px;
   display: flex;
   flex-direction: column;
 }

 .email-form input {
   padding: 10px;
   flex: 1;
   min-width: 200px;
   border-radius: 6px;
   border: 1px solid #ccc;
   width: 100%;
   height: 38px;
   box-sizing: border-box;
 }

 .email-form button {
   height: 38px;
   box-sizing: border-box;
 }

 .email-form .err_hero_email {
   margin-top: 5px;
   font-size: 12px;
   margin-bottom: 10px;
 }

 .email-form button {
   background: #414C9A;
   color: white;
   padding: 10px 20px;
   border: none;
   border-radius: 6px;
   cursor: pointer;
 }

 .radial-icons-section {
   display: flex;
   justify-content: center;
   align-items: center;
   padding: 60px 20px;
 }

 .radial-container {
   position: relative;
   width: 100%;
   /* height: 320px; */
 }

 .center-icon {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   width: 80px;
   height: 80px;
   background: #fff;
   border-radius: 50%;
   box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
   display: flex;
   justify-content: center;
   align-items: center;
   z-index: 2;
 }

 .center-icon img {
   width: 40px;
   height: 40px;
 }

 .radial-icon {
   position: absolute;
   top: 50%;
   left: 50%;
   width: 60px;
   height: 60px;
   background: #fff;
   border-radius: 50%;
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
   transform: rotate(calc(45deg * var(--i))) translate(120px) rotate(calc(-45deg * var(--i)));
   display: flex;
   justify-content: center;
   align-items: center;
   z-index: 3;
 }

 .radial-icon img {
   width: 30px;
   height: 30px;
 }

 /* Connecting Lines */
 .line {
   position: absolute;
   top: 50%;
   left: 50%;
   width: 2px;
   height: 120px;
   background: #ccc;
   transform-origin: top;
   transform: rotate(calc(45deg * var(--i)));
   z-index: 1;
 }

 /* Responsive Tweaks */
 @media (max-width: 768px) {
   /* .radial-container {
    width: 240px;
    height: 240px;
  } */

   .feature-box {
     max-width: 100% !important;
   }

   .hero-left h2 {
     font-size: 20px;
   }

   .hero-right {
     flex: none !important;
   }

   .hero-left {
     flex: 1 1 400px
   }

   .radial-icons-section {

     padding: 0px;
   }

   .center-icon {
     width: 60px;
     height: 60px;
   }

   .center-icon img {
     width: 30px;
     height: 30px;
   }

   .radial-icon {
     width: 50px;
     height: 50px;
     transform: rotate(calc(45deg * var(--i))) translate(90px) rotate(calc(-45deg * var(--i)));
   }

   .radial-icon img {
     width: 24px;
     height: 24px;
   }

   .line {
     height: 90px;
   }
 }



 .hero-right {
   flex: 1 1 400px;
   text-align: center;
 }

 .hero-right img {
   max-width: 100%;
   height: auto;
 }

 @media (max-width: 768px) {
   .hero-container {
     flex-direction: column;
     padding-left: 40px;
   }

   .contact-left {
     padding: 20px 20px !important;
   }

   .hero-container::before,
   .hero-container::after {
     display: none;
   }

   .logo-bar {
     flex-direction: column;
     align-items: flex-start;
     gap: 10px;
   }

   .hero-left, .hero-right {
     padding: 0;
   }

   .email-form {
     flex-direction: column;
     align-items: stretch;
   }

   .email-form button {
     width: 100%;
   }
 }

 /* feture section */

 .tabs-section {
   margin: 0 auto;
   text-align: center;
   max-width: 1300px;
   padding: 40px 20px;
   min-height: 700px;
   display: flex;
   flex-direction: column;
 }

 .tabs-section h2 {
   font-size: 2rem;
   margin-bottom: 30px;
   color: #FFFFFF;
   font-weight: 400;
 }

 .tab-buttons {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 20px;
   margin-bottom: 30px;
 }

 .tab-buttons button {
   background: transparent;
   border: none;
   color: #fff;
   font-size: 1rem;
   padding: 10px 15px;
   border-bottom: 2px solid transparent;
   cursor: pointer;
   transition: 0.3s;
 }

 .tab-buttons button.active {
   border-bottom: 2px solid #fff;
   font-weight: bold;
 }

 .tab-content {
   display: none;
   position: relative;
   width: 100%;
   height: 600px;
   background: #fff;
   border-radius: 8px;
   overflow: hidden;
 }

 .tab-content.active {
   display: block;
 }

 .tab-content img {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: center;
   border-radius: 8px;
   /* Force all images to render at the same size */
   max-width: 1200px;
   max-height: 600px;
   min-width: 800px;
   min-height: 400px;
 }

 @media (max-width: 1024px) {
   .tab-content {
     height: 500px;
   }

   .tab-content img {
     max-width: 1000px;
     max-height: 500px;
     min-width: 600px;
     min-height: 300px;
   }
 }

 @media (max-width: 768px) {
   .tab-buttons {
     flex-direction: column;
     align-items: center;
   }

   .tab-content {
     height: 400px;
   }

   .tab-content img {
     max-width: 800px;
     max-height: 400px;
     min-width: 400px;
     min-height: 200px;
   }
 }

 @media (max-width: 480px) {
   .tab-content {
     height: 300px;
   }

   .tab-content img {
     max-width: 600px;
     max-height: 300px;
     min-width: 300px;
     min-height: 150px;
   }

   .tabs-section {
     padding: 20px 10px;
   }

   .tab-buttons {
     gap: 10px;
   }

   .tab-buttons button {
     font-size: 0.9rem;
     padding: 8px 12px;
   }
 }

 /*  */

 /* more fetures */
 .more-features {
   max-width: 1300px;
   margin: 30px auto;
   text-align: center;
 }

 .more-features h2 {
   font-size: 2rem;
   color: #4f46e5;
   margin-bottom: 40px;
 }

 .features-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
   gap: 30px;
   background: white;
   padding: 40px 20px;
   border-radius: 12px;
 }

 .feature-box {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 10px;
   padding: 10px;
   border-right: 1px solid #ddd;
 }

 .feature-box:last-child {
   border-right: none;
 }

 .feature-box img {
   width: 40px;
   height: 40px;
   margin-bottom: 10px;
 }

 .feature-box h3 {
   font-size: 1rem;
   line-height: 1.8rem;
   color: #000000;
   font-weight: 400;
   text-transform: uppercase;
 }

 .feature-box p {
   font-size: 0.9rem;
   color: #000000;
   font-weight: 300;
   padding-top: 10px;
 }

 @media (max-width: 768px) {
   .feature-box {
     border-right: none;
   }


 }

 /*  */

 /* testimonial section */



 .testimonials {
   /* max-width: 900px; */
   margin: 60px auto 60px;
   text-align: center;
 }

 .testimonials h2 {
   font-size: 2rem;
   color: #2F3BA1;
   margin-bottom: 40px;

   display: inline-block;
   padding: 10px 30px;
 }

 .testimonial-card {
   background: #fff;
   border-radius: 12px;
   padding: 30px;
   margin: 0 auto;
   max-width: 700px;
   position: relative;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
 }

 .testimonial-card::before,
 .testimonial-card::after {
   content: '“';
   font-size: 55px;
   position: absolute;
   color: #000;
 }

 .testimonial-card::before {
   top: 20px;
   left: 20px;
 }

 .testimonial-card::after {
   content: '”';
   top: 20px;
   right: 20px;
 }

 .testimonial-content p {
   font-size: 1rem;
   margin: 20px 0;
 }

 .testimonial-author {
   font-weight: bold;
   font-size: 1rem;
 }

 .testimonial-date {
   font-size: 0.85rem;
   color: #888;
 }

 .arrows {
   display: flex;
   justify-content: space-between;
   align-items: center;
   max-width: 700px;
   margin: 20px auto;
 }

 .arrow {
   font-size: 1.5rem;
   background: transparent;
   border: none;
   cursor: pointer;
   color: #444;
 }

 @media (max-width: 768px) {
   .testimonial-card {
     padding: 20px;
   }
 }

 /* ------------------- */

 /* contact part */
 .contact-section {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
   background: #2F3BA1;
   padding: 0;


 }

 .contact-left {
   background: #2F3BA1;
   color: white;
   padding: 60px 20px 0px 85px;
   flex: 1 1 300px;
   min-height: 400px;
   display: flex;
   flex-direction: column;
   justify-content: space-between;

 }

 .contact-left h2 {
   font-size: 2rem;
   margin-bottom: 20px;
 }

 .contact-left p {
   line-height: 1.6;
   margin-bottom: 20px;
 }

 .contact-left .footer-links {
   margin-top: 40px;
   font-size: 0.85rem;
   margin-bottom: 10px;
 }

 .contact-left .footer-links a {
   color: #ddd;
   text-decoration: underline;
   margin-right: 15px;

 }

 .contact-left .footer-links span {
   text-decoration: underline;
   color: #ddd !important;
 }



 .contact-right {
   flex: 1 1 400px;
   padding: 60px 85px 0px 65px;
   background: #f5f5fa;
   border-top-left-radius: 40px;
 }

 .contact-right h3 {
   margin-bottom: 30px;
   font-size: 25px;
   color: #000000;
   font-weight: 400;
   margin-left: 25px;
 }

 form {
   display: flex;
   flex-direction: column;
   gap: 20px;
 }

 .form-row {
   display: flex;
   flex-wrap: wrap;
   gap: 20px;
 }

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

 .form-group label {
   font-size: 0.85rem;
   margin-bottom: 6px;
   color: #333;
 }

 .form-group input {
   padding: 12px;
   border: none;
   border-radius: 10px;
   background: #fff;
   height: 65px;
 }

 .contact-right button {
   align-self: flex-end;
   background: #414C9A;
   color: #fff;
   padding: 10px 20px;
   border: none;
   border-radius: 6px;
   cursor: pointer;
   margin-top: 10px;
   margin-bottom: 15px;
 }

 @media (max-width: 768px) {
   .contact-section {
     flex-direction: column-reverse;
     display: flex;
   }

   .contact-right {
     border-radius: 0;
     padding: 20px 20px;
   }

   .contact-right h3 {
     margin: 0px;
   }

   .testimonials h2 {
     font-size: 1rem;
   }

   .form-row {
     flex-direction: column;
   }

   .contact-right button {
     width: 100%;
   }
 }

 /* ---------------- */

 /* modal */
 /* Modal Overlay */
 /* Base Styles */
 body.modal-open {
   overflow: hidden;
 }

 .custom-modal-overlay {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: rgba(0, 0, 0, 0.6);
   display: none;
   justify-content: center;
   align-items: center;
   z-index: 1000;
 }

 .custom-modal-overlay.active {
   display: flex;
 }

 .custom-modal {
   background: #fff;
   width: 90%;
   max-width: 750px;
   padding: 30px;
   position: relative;
   overflow-y: auto;
   max-height: 90vh;
 }

 .custom-close-modal {
   position: absolute;
   top: 15px;
   right: 20px;
   font-size: 1.5rem;
   border: none;
   background: none;
   cursor: pointer;
 }


 .modal-overlay {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background: rgba(0, 0, 0, 0.6);
   display: flex;
   justify-content: center;
   align-items: center;
   z-index: 1000;
 }

 /* Show when triggered */
 .modal-overlay.active {
   display: flex;
 }




 /* Modal */
 .modal {
   background: #fff;
   width: 90%;
   max-width: 650px;
   padding: 30px;

   position: relative;
   overflow-y: auto;
   max-height: 90vh;
 }

 /* Close Button */
 .close-modal {
   position: absolute;
   top: 15px;
   right: 20px;
   font-size: 1.5rem;
   border: none;
   background: none;
   cursor: pointer;
   font-family: 'Proxima Nova', sans-serif;
 }

 /* Headings */
 .freedemo-modal h2 {
   text-align: center;
   color: #2a2f96;
   margin-bottom: 10px;
   font-size: 1.25rem;
   text-transform: uppercase;
   font-weight: 200;
   font-family: 'Proxima Nova', sans-serif;
 }

 */ .freedemo-modal p {
   text-align: center;
   font-size: 10px !important;
   margin-bottom: 25px;
   font-family: 'Proxima Nova', sans-serif;

 }


 .modal-container {}

 .modal-container .modal-body {
   margin: 40px 60px;
 }

 .modal-header {
   display: flex;
   justify-content: center !important;
   align-items: center;

 }

 .modal-header img {
   width: 200px;

 }

 .modal-container form {
   background-color: #FAFAFA;
   max-width: 600px;
   width: 100%;
   padding: 30px;
   border-radius: 12px;
   box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
   gap: 0px;
 }

 .modal-container .form-group {
   margin-bottom: 16px;
   display: flex;
   flex-direction: column;
 }

 .modal-container .form-group input {
   height: auto;
 }

 .modal-container label {
   font-size: 12px;
   margin-bottom: 6px;
   color: #333;
 }

 .modal-container input[type="text"],
 .modal-container input[type="email"],
 .modal-container input[type="tel"],
 .modal-container textarea {
   padding: 10px 14px;
   font-size: 14px;
   border: 1px solid #ccc;
   border-radius: 8px;
   outline: none;
   transition: border-color 0.2s ease-in-out;
 }

 .modal-container input:focus,
 .modal-container textarea:focus {
   border-color: #003087;
 }

 .modal-container .form-row {
   display: flex;
   gap: 16px;
   flex-wrap: wrap;
 }

 .modal-container .form-row .form-group {
   flex: 1;
   min-width: 45%;
 }

 .modal-container textarea {
   resize: vertical;
 }

 .modal-container .submit-btn {
   background-color: #003087;
   color: white;
   font-size: 16px;
   padding: 10px 20px;
   border: none;
   border-radius: 8px;
   cursor: pointer;
   transition: background 0.3s ease;
   width: 150px;
 }

 .modal-container .submit-btn:hover {
   background-color: #001d59;
 }

 /* Checkbox style */
 .modal-container .form-group input[type="checkbox"] {
   margin-right: 8px;
   transform: scale(1.2);
 }

 @media (max-width: 500px) {
   .modal-container .form-row {
     flex-direction: column;
   }

   .modal-container .modal-body {
     margin: 0 !important;
   }

   .custom-modal {
     max-width: 650px !important;
   }
 }



 /* ----------------- */

 header {
   background: linear-gradient(to right, #e4e4ff, #f1f1ff);
   padding: 60px 20px;
   text-align: center;
 }

 header h1 {
   font-size: 2.5rem;
   margin-bottom: 10px;
 }

 header p {
   font-size: 1.1rem;
   margin-bottom: 20px;
 }

 .btn {
   padding: 10px 20px;
   background: #4f46e5;
   color: #fff;
   border: none;
   border-radius: 6px;
   cursor: pointer;
 }

 .features-section {
   background-image: url("../img/Icons/bg.png");
   background-position: center;
   background-repeat: no-repeat;

   padding: 50px 0px;
   text-align: center;
 }

 .features-section h2 {
   font-size: 2rem;
   margin-bottom: 20px;
   font-weight: 700;
 }

 .features-section img {
   width: 100%;
   /* max-width: 950px; */
   margin-top: 30px;
   display: block;
   border-radius: 12px;
 }


 .feature-box {
   background: #ffffff;
   box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
   padding: 25px;
   border-radius: 10px;
   flex: 1;
   min-width: 250px;
   max-width: 300px;
   text-align: center;
   transition: transform 0.3s;
 }

 .feature-box:hover {
   transform: translateY(-5px);
 }


 .testimonial-box {
   max-width: 700px;
   margin: 0 auto;
   font-style: italic;
 }

 .testimonial-box p:last-child {
   margin-top: 10px;
   font-weight: bold;
   font-style: normal;
 }

 .contact {
   background: #2c3e50;
   color: white;
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
   padding: 50px 20px;
 }

 .contact-info, .contact-form {
   flex: 1;
   min-width: 260px;
   margin: 10px;
 }

 .contact-info h2 {
   margin-bottom: 15px;
 }

 .contact-form input, .contact-form textarea {
   width: 100%;
   padding: 12px;
   margin: 10px 0;
   border: none;
   border-radius: 6px;
 }

 .contact-form button {
   background: #4f46e5;
   color: white;
   padding: 12px;
   border: none;
   border-radius: 6px;
   width: 100%;
 }



 @media (max-width: 768px) {
   .more-features, .contact {
     flex-direction: column;
     align-items: center;
   }

   .container::before, .container::after {
     display: none;
   }
 }