/* =========================================================
   Base
   ========================================================= */

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family:
    "Inter",
    Arial,
    Helvetica,
    sans-serif;

  background: #ffffff;

  color: #082951;
}

.container-custom {
  width: calc(100% - 60px);

  max-width: 1500px;

  margin:
    0
    auto;
}


/* =========================================================
   Main Banner
   ========================================================= */

.drupal-solution-banner {
  position: relative;

  overflow: hidden;

  background:
    #06254e;
}


/* =========================================================
   White Hero Area
   ========================================================= */

.drupal-solution-hero {
  position: relative;

  z-index: 3;



  background:
    radial-gradient(
      circle at 70% 40%,
      rgba(40, 111, 232, 0.075),
      transparent 29%
    ),
    linear-gradient(
      180deg,
      #ffffff 0%,
      #fbfdff 100%
    );
}


/* subtle circular lines */

.drupal-solution-hero::before {
  content: "";

  position: absolute;

  top: -230px;
  left: 170px;

  width: 560px;
  height: 350px;

  opacity: 0.28;

  border-radius: 50%;

  background:
    repeating-radial-gradient(
      ellipse at center,
      transparent 0,
      transparent 15px,
      rgba(43, 101, 215, 0.16) 16px,
      transparent 17px
    );

  pointer-events: none;
}


/* curve overlapping bottom navy */

.drupal-solution-hero::after {
  content: "";

  position: absolute;

  z-index: -1;

  left: -10%;
  bottom: -89px;

  width: 114%;
  height: 175px;

  background: #ffffff;

  border-radius:
    0
    0
    50%
    50%
    /
    0
    0
    100%
    100%;

  transform:
    rotate(1deg);

  transform-origin:
    center;
}


/* =========================================================
   Top Bar
   ========================================================= */

.drupal-solution-topbar {
  position: relative;

  z-index: 10;

  min-height: 74px;

  margin-bottom: 47px;
}


/* =========================================================
   Logo
   ========================================================= */

.drupal-solution-brand {
  display: inline-flex;

  align-items: center;

  gap: 13px;
}


.drupal-solution-brand-mark {
  width: 62px;
  min-width: 62px;
  height: 62px;

  border:
    6px solid
    #1769e9;

  border-top-color:
    #ff5b00;

  border-radius: 50%;

  background:
    #ffffff;

  color:
    #082951;

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

  font-size: 34px;
  font-weight: 800;
}


.drupal-solution-brand-text strong {
  display: block;

  color:
    #082951;

  font-size: 31px;
  font-weight: 800;

  letter-spacing:
    0.025em;
}


.drupal-solution-brand-text span {
  display: block;

  margin-top: 8px;

  padding-left: 3px;

  color:
    #082951;

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

  letter-spacing:
    0.36em;
}


/* =========================================================
   Expert Button
   ========================================================= */

.drupal-solution-talk-btn {
  min-height: 60px;

  padding:
    14px
    29px;

  border-radius:
    13px;

  background:
    linear-gradient(
      135deg,
      #082554,
      #04163b
    );

  color:
    #ffffff;

  text-decoration:
    none;

  display:
    inline-flex;

  align-items:
    center;

  gap:
    13px;

  font-size:
    16px;



  font-weight:
    700;

  box-shadow:
    0 10px 24px
    rgba(8, 37, 84, 0.12);

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}


.drupal-solution-talk-btn:hover {
  color:
    #ffffff;

  transform:
    translateY(-2px);

  box-shadow:
    0 14px 30px
    rgba(8, 37, 84, 0.18);
}


.drupal-solution-talk-btn i {
  font-size:
    20px;
}


/* =========================================================
   Hero Row
   ========================================================= */

.drupal-solution-main-row {
  position: relative;

  z-index: 5;
}


/* =========================================================
   Left Content
   ========================================================= */

.drupal-solution-content {
  max-width:
    620px;

  padding-left:
    22px;
}


/* Eyebrow */

.drupal-solution-kicker {
  gap:
    18px;

  color:
    #ff5900;

  font-size:
    16px;


  font-weight:
    700;
}



/* =========================================================
   Heading
   ========================================================= */

.drupal-solution-content h1 {
  margin:
    35px
    0
    0;

  color:
    #082951;

  font-size:
    55px;

 

  font-weight:
    800;

  letter-spacing:
    -0.045em;
}


.drupal-solution-content h1 strong {
  color:
    #1769e9;

  font-weight:
    800;
}


/* =========================================================
   Description
   ========================================================= */

.drupal-solution-description {
  max-width:
    575px;

  margin:
    25px
    0
    0;

  color:
    #455473;

  font-size:
    18px;



  font-weight:
    400;
}


/* =========================================================
   Mini Benefits
   ========================================================= */

.drupal-solution-mini-list {
  margin-top:
    34px;

  gap:
    21px;
}


.drupal-solution-mini-item {
  display:
    flex;

  align-items:
    center;

  gap:
    12px;
}


.drupal-solution-mini-icon {
  width:
    47px;

  min-width:
    47px;

  height:
    47px;

  border-radius:
    12px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  font-size:
    21px;
}


.mini-blue {
  color:
    #1769e9;

  background:
    #edf4ff;
}


.mini-green {
  color:
    #12a96c;

  background:
    #eaf8f2;
}


.mini-orange {
  color:
    #ff6500;

  background:
    #fff1e8;
}


.drupal-solution-mini-item strong {
  color:
    #082951;

  font-size:
    14px;

 

  font-weight:
    600;

  white-space:
    nowrap;
}


.drupal-solution-mini-divider {
  width:
    1px;

  height:
    25px;

  background:
    #b5becc;
}


/* =========================================================
   RIGHT IMAGE
   ========================================================= */

.drupal-solution-visual {
  position: relative;

  width:
    100%;

  max-width:
    760px;

  margin-left:
    auto;

  margin-right:
    -5px;
}


/* soft background glow */

.drupal-solution-visual::before {
  content: "";

  position: absolute;

  z-index: -1;

  top:
    9%;

  left:
    8%;

  width:
    84%;

  height:
    84%;

  border-radius:
    50%;

  background:
    radial-gradient(
      circle,
      rgba(36, 103, 221, 0.10),
      transparent 70%
    );

  filter:
    blur(5px);
}


.drupal-solution-visual img {
  display:
    block;

  width:
    100%;

  height:
    auto;

  object-fit:
    contain;
}


/* =========================================================
   Bottom Trust Section
   ========================================================= */

.drupal-solution-trust {
  position:
    relative;

  z-index:
    1;

  min-height:
    290px;

  margin-top:
    -2px;

  padding:
    128px
    0
    63px;

  background:
    radial-gradient(
      circle at 16% 45%,
      rgba(21, 100, 213, 0.22),
      transparent 23%
    ),
    linear-gradient(
      112deg,
      #052348 0%,
      #082e5e 52%,
      #031b3a 100%
    );
}


/* orange accent */



/* dots */

.drupal-solution-trust::after {
  content: "";

  position:
    absolute;

  left:
    -5px;

  top:
    52px;

  width:
    230px;

  height:
    92px;

  opacity:
    0.12;

  background-image:
    radial-gradient(
      #257fe8 2px,
      transparent 2px
    );

  background-size:
    19px
    19px;
}


/* =========================================================
   Trust Items
   ========================================================= */

.drupal-solution-trust-item {
  min-height:
    108px;

  padding:
    0
    30px;

  display:
    flex;

  align-items:
    center;

  gap:
    18px;

  border-right:
    1px solid
    rgba(255, 255, 255, 0.18);
}


.drupal-solution-trust-item-last {
  border-right:
    0;
}


.drupal-solution-trust-icon {
  width:
    78px;

  min-width:
    78px;

  height:
    78px;

  border-radius:
    50%;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  font-size:
    34px;
}


.trust-green {
  color:
    #18d98b;

  background:
    rgba(25, 205, 139, 0.13);
}


.trust-blue {
  color:
    #2686ff;

  background:
    rgba(38, 134, 255, 0.13);
}


.trust-orange {
  color:
    #ff8500;

  background:
    rgba(255, 133, 0, 0.13);
}


.trust-purple {
  color:
    #a058f1;

  background:
    rgba(160, 88, 241, 0.13);
}


.drupal-solution-trust-item h3 {
  margin:
    0;

  color:
    #ffffff;

  font-size:
    18px;

 

  font-weight:
    700;
}


.drupal-solution-trust-item p {
  margin:
    8px
    0
    0;

  color:
    rgba(255, 255, 255, 0.86);

  font-size:
    14px;

}


/* =========================================================
   1366px / Laptop
   ========================================================= */

@media (max-width: 1399px) {

  .container-custom {
    width:
      calc(100% - 48px);
  }



  .drupal-solution-topbar {
    margin-bottom:
      35px;
  }


  .drupal-solution-brand-mark {
    width:
      52px;

    min-width:
      52px;

    height:
      52px;

    border-width:
      5px;

    font-size:
      29px;
  }


  .drupal-solution-brand-text strong {
    font-size:
      26px;
  }


  .drupal-solution-brand-text span {
    font-size:
      12px;
  }


  .drupal-solution-talk-btn {
    min-height:
      51px;

    padding:
      12px
      22px;

    font-size:
      14px;
  }


  .drupal-solution-kicker {
    font-size:
      14px;
  }


  .drupal-solution-content h1 {
    font-size:
      40px;
  }


  .drupal-solution-description {
    max-width:
      500px;

    font-size:
      15px;
  }


  .drupal-solution-mini-list {
    gap:
      15px;
  }


  .drupal-solution-mini-icon {
    width:
      42px;

    min-width:
      42px;

    height:
      42px;

    font-size:
      18px;
  }


  .drupal-solution-mini-item strong {
    font-size:
      12px;
  }


  .drupal-solution-visual {
    max-width:
      650px;
  }


  .drupal-solution-trust {
    min-height:
      250px;

    padding:
      108px
      0
      48px;
  }


  .drupal-solution-trust-item {
    padding:
      0
      21px;
  }


  .drupal-solution-trust-icon {
    width:
      65px;

    min-width:
      65px;

    height:
      65px;

    font-size:
      28px;
  }


  .drupal-solution-trust-item h3 {
    font-size:
      15px;
  }


  .drupal-solution-trust-item p {
    font-size:
      13px;
  }

}


/* =========================================================
   1199px
   ========================================================= */

@media (max-width: 1199px) {

  .drupal-solution-content {
    padding-left:
      0;
  }


  .drupal-solution-mini-divider {
    display:
      none;
  }


  .drupal-solution-mini-list {
    gap:
      18px;
  }


  .drupal-solution-visual {
    max-width:
      590px;
  }

}


/* =========================================================
   Tablet
   ========================================================= */

@media (max-width: 991px) {

  .drupal-solution-hero {
    min-height:
      auto;

    padding-bottom:
      110px;
  }


  .drupal-solution-content {
    max-width:
      720px;

    margin:
      0
      auto;

    text-align:
      center;
  }


  .drupal-solution-kicker {
    justify-content:
      center;
  }


  .drupal-solution-description {
    margin-left:
      auto;

    margin-right:
      auto;
  }


  .drupal-solution-mini-list {
    justify-content:
      center;
  }


  .drupal-solution-visual {
    max-width:
      700px;

    margin:
      35px
      auto
      0;
  }


  .drupal-solution-hero::after {
    height:
      140px;

    bottom:
      -70px;
  }


  .drupal-solution-trust {
    padding:
      100px
      0
      35px;
  }


  .drupal-solution-trust-item {
    margin-bottom:
      30px;

    border-right:
      0;
  }

}


/* =========================================================
   Mobile
   ========================================================= */

@media (max-width: 767px) {

  .container-custom {
    width:
      calc(100% - 28px);
  }


  .drupal-solution-hero {
    padding:
      18px
      0
      90px;
  }


  .drupal-solution-topbar {
    margin-bottom:
      32px;
  }


  .drupal-solution-brand-mark {
    width:
      46px;

    min-width:
      46px;

    height:
      46px;

    font-size:
      25px;
  }


  .drupal-solution-brand-text strong {
    font-size:
      21px;
  }


  .drupal-solution-brand-text span {
    font-size:
      9px;

    letter-spacing:
      0.28em;
  }


  .drupal-solution-talk-btn {
    min-height:
      44px;

    padding:
      10px
      14px;

    font-size:
      12px;
  }


  .drupal-solution-content h1 {
    margin-top:
      25px;

    font-size:
      32px;

   
  }


  .drupal-solution-description {
    font-size:
      14px;

  
  }


  .drupal-solution-visual {
    max-width:
      560px;

    margin-top:
      25px;
  }


  .drupal-solution-trust {
    padding-top:
      90px;
  }

}


/* =========================================================
   Small Mobile
   ========================================================= */

@media (max-width: 575.98px) {

  .drupal-solution-topbar {
    gap:
      15px;
  }


  .drupal-solution-talk-btn {
    width:
      44px;

    padding:
      0;

    justify-content:
      center;
  }


  .drupal-solution-talk-btn span {
    display:
      none;
  }


  .drupal-solution-content h1 {
    font-size:
      28px;
  }


  .drupal-solution-content h1 .d-block {
    display:
      inline !important;
  }


  .drupal-solution-mini-list {
    width:
      fit-content;

    margin:
      28px
      auto
      0;

    flex-direction:
      column;

    align-items:
      flex-start !important;
  }


  .drupal-solution-visual {
    width:
      100%;
  }


  .drupal-solution-trust-item {
    padding:
      0
      8px;

    align-items:
      flex-start;
  }


  .drupal-solution-trust-icon {
    width:
      58px;

    min-width:
      58px;

    height:
      58px;

    font-size:
      25px;
  }

}


/* =========================================================
   Project Details Section
   ========================================================= */

.project-details-section {
  position: relative;
  overflow: hidden;

  background:
    radial-gradient(
      circle at 72% 45%,
      rgba(28, 103, 224, 0.045),
      transparent 28%
    ),
    linear-gradient(
      180deg,
      #ffffff 0%,
      #fbfdff 100%
    );
}


/* Decorative dots */

.project-details-section::before {
  content: "";

  position: absolute;

  left: -15px;
  bottom: -5px;

  width: 180px;
  height: 150px;

  opacity: 0.16;

  background-image:
    radial-gradient(
      #1769e9 2px,
      transparent 2px
    );

  background-size:
    15px
    15px;

  pointer-events: none;
}


/* =========================================================
   Left Content
   ========================================================= */

.project-details-content {
  max-width: 520px;

  margin-left: auto;
  margin-right: auto;
}


/* Kicker */

.project-details-kicker {
  gap: 18px;

  color: #ff5a00;

  font-size: 16px;
  
  font-weight: 700;
}


.project-details-kicker-line {
  width: 38px;
  height: 2px;

  background: #ff5a00;
}


/* Heading */

.project-details-content h2 {
  margin:
    31px
    0
    0;

  color: #082951;

  font-size: 44px !important;
  font-weight: 800;

}


.project-details-content h2 strong {
  color: #ff5a00;

  font-weight: 800;
}


/* Description */

.project-details-description {
  max-width: 500px;

  margin:
    25px
    0
    0;

  color: #475572;

  font-size: 16px;
}


/* =========================================================
   Benefits
   ========================================================= */

.project-details-benefits {
  margin-top: 42px;
}


.project-details-benefit {
  position: relative;

  display: flex;
  align-items: flex-start;

  gap: 25px;

  margin-bottom: 28px;
}


.project-details-benefit:last-child {
  margin-bottom: 0;
}


/* Icon box */

.project-details-benefit-icon {
  width: 68px;
  min-width: 68px;
  height: 68px;

  border:
    1px solid
    #edf0f5;

  border-radius: 13px;

  background: #ffffff;

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

  font-size: 28px;

  box-shadow:
    0 7px 18px
    rgba(17, 40, 80, 0.08);
}


.project-benefit-blue {
  color: #1769e9;
}


.project-benefit-orange {
  color: #ff5a00;
}


/* Benefit Text */

.project-details-benefit h3 {
  margin:
    2px
    0
    6px;

  color: #082951;

  font-size: 17px;

  font-weight: 700;
}


.project-details-benefit p {
  max-width: 310px;

  margin: 0;

  color: #51607d;

  font-size: 14px;
}


/* =========================================================
   Form Card
   ========================================================= */

.project-details-form-card {
  width: 100%;
  max-width: 700px;

  margin-left: auto;

  padding:
    38px
    38px
    31px;

  border:
    1px solid
    #e3e8ef;

  border-radius: 27px;

  background:
    rgba(255, 255, 255, 0.97);

  box-shadow:
    0 18px 48px
    rgba(17, 40, 80, 0.09);
}


/* =========================================================
   Form Header
   ========================================================= */

.project-details-form-head {
  gap: 22px;

  margin-bottom: 30px;
}


.project-details-form-icon {
  width: 79px;
  min-width: 79px;
  height: 79px;

  border-radius: 50%;

  background:
    #eff5ff;

  color: #1769e9;

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

  font-size: 33px;
}


.project-details-form-head h3 {
  margin: 0;

  color: #082951;

  font-size: 23px;
  font-weight: 800;
}


.project-details-form-head p {
  margin:
    7px
    0
    0;

  color: #63708b;

  font-size: 15px;
  
}


/* =========================================================
   Form Fields
   ========================================================= */

.project-form-field label {
  display: block;

  margin-bottom: 9px;

  color: #082951;

  font-size: 14px;

  font-weight: 700;
}


.project-form-field label span {
  color: #ff3e00;
}


.project-form-input {
  position: relative;
}


.project-form-input > i {
  position: absolute;

  z-index: 2;

  top: 50%;
  left: 18px;

  color: #7684a0;

  font-size: 18px;

  transform:
    translateY(-50%);

  pointer-events: none;
}


.project-form-field .form-control {
  min-height: 59px;

  padding:
    13px
    17px;

  border:
    1px solid
    #d9e0eb;

  border-radius: 9px;

  background: #ffffff;

  color: #082951;

  font-size: 14px;

  box-shadow: none;
}


.project-form-input .form-control {
  padding-left: 53px;
}


.project-form-field .form-control::placeholder {
  color: #75829c;

  opacity: 1;
}


.project-form-field .form-control:focus {
  border-color: #1769e9;

  box-shadow:
    0 0 0 3px
    rgba(23, 105, 233, 0.09);
}


/* Textarea */

.project-form-field textarea.form-control {
  min-height: 105px;

  padding:
    17px
    18px;

  resize: vertical;
}


/* =========================================================
   Submit Button
   ========================================================= */

.project-details-submit-btn {
  width: 100%;

  min-height: 59px;

  padding:
    14px
    25px;

  border: 0;

  border-radius: 6px;

  background:
    linear-gradient(
      90deg,
      #ff5a00 0%,
      #ff3e00 100%
    );

  color: #ffffff;

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

  gap: 13px;

  font-size: 17px;

  font-weight: 700;

  box-shadow:
    0 10px 24px
    rgba(255, 75, 0, 0.17);

  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}


.project-details-submit-btn:hover {
  transform:
    translateY(-1px);

  box-shadow:
    0 14px 28px
    rgba(255, 75, 0, 0.25);
}


/* =========================================================
   Privacy
   ========================================================= */

.project-details-privacy {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 10px;

  color: #75819a;

  font-size: 13px;
}


.project-details-privacy i {
  color: #71809b;
}


/* =========================================================
   Responsive - 1399px
   ========================================================= */

@media (max-width: 1399px) {

  .project-details-kicker {
    font-size: 14px;
  }


  .project-details-content h2 {
    font-size: 36px !important;
  }


  .project-details-description {
    font-size: 15px;
  }


  .project-details-benefit {
    gap: 20px;

    margin-bottom: 24px;
  }


  .project-details-benefit-icon {
    width: 60px;
    min-width: 60px;
    height: 60px;

    font-size: 24px;
  }


  .project-details-benefit h3 {
    font-size: 16px;
  }


  .project-details-benefit p {
    font-size: 13px;
  }


  .project-details-form-card {
    max-width: 650px;

    padding:
      32px
      32px
      27px;
  }


  .project-details-form-icon {
    width: 68px;
    min-width: 68px;
    height: 68px;

    font-size: 28px;
  }


  .project-details-form-head h3 {
    font-size: 21px;
  }

}


/* =========================================================
   Responsive - Tablet
   ========================================================= */

@media (max-width: 991px) {

  .project-details-content {
    max-width: 700px;

    text-align: center;
  }


  .project-details-kicker {
    justify-content: center;
  }


  .project-details-description {
    margin-left: auto;
    margin-right: auto;
  }


  .project-details-benefits {
    max-width: 520px;

    margin:
      40px
      auto
      0;

    text-align: left;
  }


  .project-details-form-card {
    max-width: 720px;

    margin:
      20px
      auto
      0;
  }

}


/* =========================================================
   Responsive - Mobile
   ========================================================= */

@media (max-width: 767px) {

  .project-details-section {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }


  .project-details-content h2 {
    margin-top: 25px;

    font-size: 30px !important;
  }


  .project-details-description {
    font-size: 14px;
  }


  .project-details-form-card {
    padding:
      25px
      20px;

    border-radius: 20px;
  }


  .project-details-form-head {
    gap: 16px;

    margin-bottom: 25px;
  }


  .project-details-form-icon {
    width: 58px;
    min-width: 58px;
    height: 58px;

    font-size: 24px;
  }


  .project-details-form-head h3 {
    font-size: 18px;
  }


  .project-details-form-head p {
    font-size: 13px;
  }


  .project-form-field .form-control {
    min-height: 54px;
  }


  .project-details-submit-btn {
    min-height: 54px;

    font-size: 15px;
  }

}


/* =========================================================
   Responsive - Small Mobile
   ========================================================= */

@media (max-width: 575.98px) {

  .project-details-kicker {
    gap: 10px;

    font-size: 12px;
  }


  .project-details-kicker-line {
    width: 26px;
  }


  .project-details-content h2 {
    font-size: 26px !important;
  }


  .project-details-content h2 .d-block {
    display: inline !important;
  }


  .project-details-benefit {
    gap: 14px;
  }


  .project-details-benefit-icon {
    width: 53px;
    min-width: 53px;
    height: 53px;

    font-size: 21px;
  }


  .project-details-benefit h3 {
    font-size: 15px;
  }


  .project-details-benefit p {
    font-size: 13px;
  }


  .project-details-form-head {
    align-items: flex-start !important;
  }


  .project-details-privacy {
    align-items: flex-start;

    text-align: left;
  }

}