* {
          margin: 0;
          padding: 0;
          box-sizing: border-box;
      }

      body {
          font-family: "Inter", sans-serif;
          color: #10233f;
          background: #ffffff;
      }

      img {
          max-width: 100%;
          display: block;
      }

      a {
          text-decoration: none;
      }

      /* COMMON */

      .container {
          max-width: 1100px;
      }

      .section-padding {
          padding: 80px 0;
      }

      .section-tag {
          display: inline-block;
          font-size: 11px;
          font-weight: 700;
          color: #1769e8;
          letter-spacing: .5px;
          margin-bottom: 12px;
      }

      .main-title {
          font-size: 38px;
          line-height: 1.2;
          font-weight: 800;
          color: #10233f;
      }

      .main-title span {
          color: #1769e8;
      }

      .description {
          color: #64748b;
          font-size: 14px;
          line-height: 1.8;
      }

      .primary-btn {
          display: inline-flex;
          align-items: center;
          gap: 10px;
          padding: 13px 22px;
          border-radius: 6px;
          background: #1769e8;
          color: #fff;
          font-size: 13px;
          font-weight: 600;
          transition: .3s;
      }

      .primary-btn:hover {
          background: #0e56c7;
          color: #fff;
          transform: translateY(-2px);
      }

      /* NAVBAR */

      .navbar {
          background: #fff;
          height: 78px;
          border-bottom: 1px solid #f0f2f5;
      }

      .navbar-brand {
          font-size: 20px;
          font-weight: 800;
          color: #10233f;
          display: flex;
          align-items: center;
          gap: 8px;
      }

      .logo-icon {
          width: 28px;
          height: 28px;
          background: #1769e8;
          border-radius: 6px;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #fff;
          font-size: 15px;
      }

      .navbar-nav {
          gap: 28px;
      }

      .navbar-nav .nav-link {
          color: #25364e;
          font-size: 12px;
          font-weight: 500;
          transition: .3s;
      }

      .navbar-nav .nav-link:hover {
          color: #1769e8;
      }

      .nav-btn {
          background: #1769e8;
          color: #fff !important;
          padding: 10px 18px !important;
          border-radius: 5px;
      }

      .nav-btn:hover {
          background: #0e56c7;
      }

      /* HERO */

      .hero {
          position: relative;
          overflow: hidden;
          background: #f7faff;
      }

      .hero-content {
          min-height: 470px;
          display: flex;
          align-items: center;
      }

      .hero-text {
          position: relative;
          z-index: 2;
          padding: 70px 0;
      }

      .hero-badge {
          display: inline-block;
          background: #edf5ff;
          color: #1769e8;
          padding: 5px 10px;
          border-radius: 20px;
          font-size: 9px;
          font-weight: 700;
          margin-bottom: 16px;
      }

      .hero-title {
          font-size: 46px;
          line-height: 1.12;
          font-weight: 800;
          color: #10233f;
          margin-bottom: 18px;
      }

      .hero-title span {
          color: #1769e8;
      }

      .hero-description {
          max-width: 390px;
          color: #52627a;
          font-size: 14px;
          line-height: 1.7;
          margin-bottom: 24px;
      }

      .hero-image-wrapper {
          height: 100%;
          min-height: 470px;
          position: relative;
      }

      .hero-image {
          width: 100%;
          height: 470px;
          object-fit: cover;
          object-position: center;
      }

      /* White curved shape */

      .hero-shape {
          position: absolute;
          left: -70px;
          top: -20px;
          width: 180px;
          height: 540px;
          background: #f7faff;
          transform: rotate(12deg);
          border-radius: 50%;
          z-index: 1;
      }

      /* FEATURES */

      .features {
          background: #071d35;
          padding: 24px 0;
      }

      .feature-item {
          display: flex;
          align-items: center;
          gap: 16px;
          padding: 8px 20px;
      }

      .feature-icon {
          width: 42px;
          height: 42px;
          min-width: 42px;
          border-radius: 9px;
          background: #1769e8;
          color: #fff;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 20px;
      }

      .feature-title {
          color: #fff;
          font-size: 13px;
          font-weight: 700;
          margin-bottom: 5px;
      }

      .feature-text {
          color: #b7c4d4;
          font-size: 11px;
          line-height: 1.5;
          margin: 0;
      }

      /* ABOUT */

      .about {
          background: #fff;
      }

      .about-content {
          padding-right: 30px;
      }

      .about-title {
          font-size: 32px;
          line-height: 1.25;
          font-weight: 800;
          margin-bottom: 18px;
      }

      .about-image {
          width: 100%;
          height: 320px;
          object-fit: cover;
          border-radius: 12px;
      }

      /* SERVICES */

      .services {
          background: #f7faff;
      }

      .section-heading {
          text-align: center;
          max-width: 600px;
          margin: 0 auto 45px;
      }

      .service-card {
          background: #fff;
          padding: 30px 25px;
          border-radius: 12px;
          height: 100%;
          border: 1px solid #edf1f6;
          transition: .3s;
      }

      .service-card:hover {
          transform: translateY(-7px);
          box-shadow: 0 15px 40px rgba(16, 35, 63, .08);
      }

      .service-icon {
          width: 50px;
          height: 50px;
          border-radius: 10px;
          background: #edf5ff;
          color: #1769e8;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 23px;
          margin-bottom: 20px;
      }

      .service-card h4 {
          font-size: 17px;
          font-weight: 700;
          margin-bottom: 10px;
      }

      .service-card p {
          font-size: 13px;
          color: #718096;
          line-height: 1.7;
          margin: 0;
      }

      /* PORTFOLIO */

      .portfolio-card {
          overflow: hidden;
          border-radius: 12px;
          position: relative;
      }

      .portfolio-card img {
          width: 100%;
          height: 260px;
          object-fit: cover;
          transition: .4s;
      }

      .portfolio-card:hover img {
          transform: scale(1.05);
      }

      .portfolio-overlay {
          position: absolute;
          bottom: 0;
          left: 0;
          right: 0;
          padding: 25px;
          background: linear-gradient(transparent,
                  rgba(7, 29, 53, .9));
          color: #fff;
      }

      .portfolio-overlay h4 {
          font-size: 17px;
          margin: 0 0 5px;
      }

      .portfolio-overlay p {
          font-size: 11px;
          margin: 0;
          color: #dbe4ef;
      }

      /* BLOG SECTION */

      .blog {
          background: #f7faff;
      }

      /* Section Heading */

      .blog .section-heading {
          text-align: center;
          max-width: 650px;
          margin: 0 auto 45px;
      }

      .blog .section-tag {
          display: inline-block;
          color: #1769e8;
          font-size: 11px;
          font-weight: 700;
          letter-spacing: .8px;
          margin-bottom: 10px;
      }

      .blog .main-title {
          font-size: 38px;
          line-height: 1.2;
          font-weight: 800;
          color: #10233f;
          margin-bottom: 15px;
      }

      .blog .main-title span {
          color: #1769e8;
      }

      .blog .description {
          color: #718096;
          font-size: 13px;
          line-height: 1.8;
          margin-bottom: 0;
      }

      /* BLOG CARD */

      .blog-card {
          height: 100%;
          background: #ffffff;
          border: 1px solid #e8edf4;
          border-radius: 14px;
          overflow: hidden;
          transition: all .35s ease;
      }

      .blog-card:hover {
          transform: translateY(-8px);
          box-shadow: 0 18px 45px rgba(16, 35, 63, .10);
      }

      /* BLOG IMAGE */

      .blog-image {
          position: relative;
          width: 100%;
          overflow: hidden;
      }

      .blog-image img {
          width: 100%;
          height: 220px;
          object-fit: cover;
          display: block;
          transition: transform .5s ease;
      }

      .blog-card:hover .blog-image img {
          transform: scale(1.07);
      }

      /* BLOG CATEGORY */

      .blog-category {
          position: absolute;
          top: 15px;
          left: 15px;

          background: #1769e8;
          color: #ffffff;

          padding: 6px 13px;

          border-radius: 5px;

          font-size: 10px;
          font-weight: 600;

          box-shadow: 0 5px 15px rgba(23, 105, 232, .25);
      }

      /* BLOG CONTENT */

      .blog-content {
          padding: 24px;
      }

      /* BLOG META */

      .blog-meta {
          display: flex;
          align-items: center;
          gap: 18px;

          margin-bottom: 13px;
      }

      .blog-meta span {
          display: flex;
          align-items: center;
          gap: 6px;

          color: #8a98aa;

          font-size: 10px;
          font-weight: 500;
      }

      .blog-meta i {
          color: #1769e8;
          font-size: 11px;
      }

      /* BLOG TITLE */

      .blog-content h3 {
          color: #10233f;

          font-size: 18px;
          line-height: 1.45;

          font-weight: 700;

          margin-bottom: 12px;

          transition: .3s;
      }

      .blog-card:hover .blog-content h3 {
          color: #1769e8;
      }

      /* BLOG DESCRIPTION */

      .blog-content p {
          color: #718096;

          font-size: 12px;
          line-height: 1.7;

          margin-bottom: 18px;
      }

      /* READ MORE BUTTON */

      .blog-btn {
          display: inline-flex;
          align-items: center;
          gap: 8px;

          color: #1769e8;

          font-size: 12px;
          font-weight: 700;

          transition: all .3s ease;
      }

      .blog-btn i {
          transition: transform .3s ease;
      }

      .blog-btn:hover {
          color: #0e56c7;
      }

      .blog-btn:hover i {
          transform: translateX(5px);
      }

      /* CONTACT SECTION */

      .contact {
          background: #f7faff;
      }

      /* CONTACT INFO */

      .contact-info {
          height: 100%;
          background: #071d35;
          padding: 40px;
          border-radius: 14px;
      }

      .contact-info h3 {
          color: #ffffff;
          font-size: 25px;
          font-weight: 700;
          margin-bottom: 15px;
      }

      .contact-info-text {
          color: #aebdce;
          font-size: 12px;
          line-height: 1.8;
          margin-bottom: 30px;
      }

      /* CONTACT ITEM */

      .contact-item {
          display: flex;
          align-items: center;
          gap: 15px;
          margin-bottom: 22px;
      }

      .contact-icon {
          width: 43px;
          height: 43px;
          min-width: 43px;

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

          background: #1769e8;
          color: #ffffff;

          border-radius: 8px;

          font-size: 18px;
      }

      .contact-item h5 {
          color: #ffffff;
          font-size: 13px;
          font-weight: 600;
          margin-bottom: 4px;
      }

      .contact-item p {
          color: #9eafc2;
          font-size: 11px;
          margin: 0;
      }

      /* SOCIAL ICONS */

      .contact-social {
          display: flex;
          gap: 10px;
          margin-top: 30px;
      }

      .contact-social a {
          width: 36px;
          height: 36px;

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

          border: 1px solid rgba(255, 255, 255, .12);
          border-radius: 6px;

          color: #ffffff;
          font-size: 14px;

          transition: all .3s ease;
      }

      .contact-social a:hover {
          background: #1769e8;
          border-color: #1769e8;
          transform: translateY(-3px);
      }

      /* CONTACT FORM */

      .contact-form {
          height: 100%;
          background: #ffffff;

          padding: 40px;

          border-radius: 14px;
          border: 1px solid #e8edf4;

          box-shadow: 0 10px 35px rgba(16, 35, 63, .05);
      }

      .contact-form h3 {
          color: #10233f;
          font-size: 25px;
          font-weight: 700;
          margin-bottom: 25px;
      }

      /* FORM LABEL */

      .contact-form label {
          display: block;

          color: #26384f;

          font-size: 11px;
          font-weight: 600;

          margin-bottom: 7px;
      }

      /* FORM INPUT */

      .contact-form .form-control {
          width: 100%;

          height: 46px;

          background: #f8faff;

          border: 1px solid #e5eaf1;
          border-radius: 6px;

          color: #10233f;

          font-size: 12px;

          padding: 12px 14px;

          box-shadow: none;

          transition: all .3s ease;
      }

      .contact-form textarea.form-control {
          height: auto;
          resize: none;
      }

      /* Input Focus */

      .contact-form .form-control:focus {
          border-color: #1769e8;
          background: #ffffff;

          box-shadow: 0 0 0 3px rgba(23, 105, 232, .08);
      }

      /* Placeholder */

      .contact-form .form-control::placeholder {
          color: #a3afbd;
          font-size: 11px;
      }

      /* SUBMIT BUTTON */

      .contact-submit {
          border: none;
          cursor: pointer;
      }

      .contact-submit i {
          transition: transform .3s ease;
      }

      .contact-submit:hover i {
          transform: translateX(4px);
      }

      /* CTA */

      .cta {
          padding: 70px 0;
          background: #071d35;
      }

      .cta-box {
          text-align: center;
      }

      .cta h2 {
          color: #fff;
          font-size: 35px;
          font-weight: 800;
          margin-bottom: 15px;
      }

      .cta p {
          color: #b8c6d7;
          font-size: 14px;
          margin-bottom: 25px;
      }

      /* FOOTER */

      footer {
          background: #041526;
          padding: 60px 0 20px;
          color: #fff;
      }

      .footer-logo {
          font-size: 20px;
          font-weight: 800;
          margin-bottom: 15px;
      }

      .footer-text {
          color: #9eacbd;
          font-size: 12px;
          line-height: 1.8;
          max-width: 300px;
      }

      .footer-title {
          font-size: 14px;
          font-weight: 700;
          margin-bottom: 18px;
      }

      .footer-links {
          list-style: none;
          padding: 0;
          margin: 0;
      }

      .footer-links li {
          margin-bottom: 10px;
      }

      .footer-links a {
          color: #9eacbd;
          font-size: 12px;
          transition: .3s;
      }

      .footer-links a:hover {
          color: #1769e8;
      }

      .copyright {
          border-top: 1px solid rgba(255, 255, 255, .08);
          margin-top: 45px;
          padding-top: 20px;
          color: #75869a;
          font-size: 11px;
          text-align: center;
      }

      /* RESPONSIVE */
      @media (max-width: 991px) {

          .navbar {
              height: auto;
              padding: 15px 0;
          }

          .navbar-nav {
              gap: 5px;
              padding-top: 15px;
          }

          .nav-btn {
              display: inline-block;
              margin-top: 5px;
          }

          .hero-content {
              min-height: auto;
          }

          .hero-text {
              padding: 70px 0 40px;
          }

          .hero-title {
              font-size: 40px;
          }

          .hero-image-wrapper {
              min-height: 350px;
          }

          .hero-image {
              height: 350px;
          }

          .hero-shape {
              display: none;
          }

          .feature-item {
              padding: 12px 5px;
          }

          .about-content {
              padding-right: 0;
              margin-bottom: 35px;
          }

      }

      @media (max-width: 767px) {

          .section-padding {
              padding: 60px 0;
          }

          .hero-title {
              font-size: 34px;
          }

          .hero-description {
              font-size: 13px;
          }

          .hero-image-wrapper {
              min-height: 300px;
          }

          .hero-image {
              height: 300px;
          }

          .features {
              padding: 25px 0;
          }

          .feature-item {
              margin-bottom: 15px;
          }

          .about-title {
              font-size: 28px;
          }

          .about-image {
              height: 280px;
          }

          .main-title {
              font-size: 30px;
          }

          .cta h2 {
              font-size: 28px;
          }

      }

      @media (max-width: 575px) {

          .hero-text {
              padding: 55px 20px 35px;
          }

          .hero-title {
              font-size: 31px;
          }

          .hero-image-wrapper {
              min-height: 250px;
          }

          .hero-image {
              height: 250px;
          }

          .feature-item {
              padding: 10px 15px;
          }

          .feature-icon {
              width: 40px;
              height: 40px;
              min-width: 40px;
          }

          .about-image {
              height: 230px;
          }

          .portfolio-card img {
              height: 220px;
          }

      }

      @media (max-width: 991px) {

          .blog .main-title {
              font-size: 34px;
          }

          .blog-image img {
              height: 210px;
          }

      }

      @media (max-width: 767px) {

          .blog .section-heading {
              margin-bottom: 35px;
          }

          .blog .main-title {
              font-size: 30px;
          }

          .blog .description {
              font-size: 12px;
          }

          .blog-image img {
              height: 230px;
          }

          .blog-content {
              padding: 22px;
          }

          .blog-content h3 {
              font-size: 17px;
          }

      }

      @media (max-width: 575px) {

          .blog .main-title {
              font-size: 27px;
          }

          .blog-image img {
              height: 220px;
          }

          .blog-content {
              padding: 20px;
          }

          .blog-meta {
              gap: 12px;
          }

      }

      @media (max-width: 991px) {

          .contact-info {
              padding: 35px;
          }

          .contact-form {
              padding: 35px;
          }

      }

      @media (max-width: 767px) {

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

          .contact-info h3,
          .contact-form h3 {
              font-size: 22px;
          }

      }

      @media (max-width: 575px) {

          .contact-info,
          .contact-form {
              padding: 22px;
              border-radius: 10px;
          }

          .contact-item {
              margin-bottom: 18px;
          }

          .contact-icon {
              width: 40px;
              height: 40px;
              min-width: 40px;
          }

          .contact-social {
              margin-top: 25px;
          }

      }