/* ==========================
   GLOBAL
==========================*/
 :root {
     --primary: #0e3a5d;
     --accent: #1a84ff;
     --dark: #0f3d5c;
     --text: #556070;
     --bigText: #d9ecfb;
     --light: #f7f9fc;
     --border: #e7ecf2;
     --bg: #d5deed;
     --wave: #d9ecfb
 }

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

 body {
     font-family: Inter, sans-serif;
     background: #fafbfd;
     color: #17222f;
     line-height: 1.75;
 }

 img {
     display: block;
     max-width: 100%;
     border-radius: 15px;
 }

 section {
     padding: 130px 8% 0 8%;
     position: relative;
     overflow: hidden;
 }

 section:last-of-type {
     padding: 80px 8%;
 }

 h1 {
     font-size: clamp(3rem, 6vw, 5.8rem);
     line-height: 1;
     font-weight: 800;
     letter-spacing: -3px;
     margin-bottom: 40px;
     color: var(--dark);
     z-index: 1;
 }

 h2 {
     font-size: clamp(2rem, 4vw, 3rem);
     font-weight: 800;
     margin-bottom: 25px;
     letter-spacing: -1px;
 }

 p {
     font-size: 1.05rem;
     color: #5a6470;
     margin-bottom: 18px;
 }

 .small-title {
     font-size: 0.82rem;
     font-weight: 700;
     letter-spacing: 4px;
     text-transform: uppercase;
     color: #008cff;
     margin-bottom: 18px;
 }

 .wrapper {
     max-width: 1400px;
     margin: auto;
 }

 /* HERO */
 .hero {
     display: grid;
     grid-template-columns: 1.2fr 0.9fr;
     align-items: center;
     gap: 80px;
 }

 .hero-image {
     position: relative;
 }

 .hero-image::before {
     content: "";
     position: absolute;
     width: 320px;
     height: 320px;
     background: #dff2ff;
     border-radius: 50%;
     top: -70px;
     right: -90px;
     z-index: -1;
 }

 .hero-image::after {
     content: "";
     position: absolute;
     width: 180px;
     height: 180px;
     background: #edf7ff;
     border-radius: 50%;
     bottom: -40px;
     left: -50px;
     z-index: -1;
 }

 .dbl-image-layout {
     position: relative;
     min-height: 650px;
 }

 .single-image-layout,
 .dbl-image-layout img {
     object-fit: cover;
     border-radius: 22px;
     box-shadow: 0 30px 70px rgba(20, 40, 70, 0.12);
 }

 .main-photo {
     width: 75%;
     height: 520px;
 }

 .second-photo {
     position: absolute;
     width: 48%;
     right: 0;
     bottom: 25px;
     height: 270px;
     border: 5px solid white;
 }

 /* ---------- IMAGE WITH RECTANGLE ---------- */

 .rec-image-container {
     display: grid;
     grid-template-columns: 1fr;
     gap: 0;
     align-items: center;
     padding-top: 50px;
 }

 .rec-image {
     position: relative;
     transform-style: preserve-3d;
     max-width: 450px;
 }

 .rec-image img {
     border-radius: 25px;
     height: 540px;
     object-fit: cover;
     box-shadow: 0 30px 60px rgba(0, 0, 0, 0.12);
 }

 .rec-image::after {
     content: "";
     position: absolute;
     width: 140px;
     height: 140px;
     border: 2px solid var(--accent);
     border-radius: 22px;
     top: -40px;
     right: -40px;
     transform: translateZ(-1px);
 }

 /* WAVE */
 .wave {
     height: 60px;
     background:
         linear-gradient(176deg,
             var(--light) 48%,
             rgba(255, 255, 255, .12) 49%,
             rgba(255, 255, 255, .12) 50%,
             var(--wave) 51%);
 }

 /* GRID */
 .grid {
     display: grid;
     grid-template-columns: 0.95fr 1.1fr;
     gap: 80px;
     align-items: center;
 }

 .steps {
     display: flex;
     flex-direction: column;
     gap: 35px;
     margin: 35px;
 }

 .step {
     display: flex;
     gap: 22px;
     align-items: flex-start;
 }

 .number {
     font-size: 3rem;
     font-weight: 800;
     color: #d9ecfb;
     line-height: 1;
     min-width: 60px;
 }

 .step h3 {
     font-size: 1.2rem;
     margin-bottom: 8px;
 }

 /* SERVICE */
 .service {
     display: grid;
     grid-template-columns: 1fr 1fr;
     align-items: center;
     gap: 70px;
 }

 .service-no-grid {
     align-items: center;
     line-height: 2.8;
 }

 .service-no-grid ul {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
     gap: .5rem 3rem;
     padding-left: 1.2rem;
 }

 .service-no-grid li {
     line-height: 1.8;
 }

 .big-text {
     position: absolute;
     font-size: 9vw;
     font-weight: 900;
     color: var(--bigText);
     top: 70px;
     left: 40px;
     letter-spacing: 8px;
     pointer-events: none;
     white-space: nowrap;
     z-index: -10;
 }

 .service ul {
     margin-top: 35px;
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 18px;
 }

 .service-no-grid li,
 .service li {
     list-style: none;
     padding-left: 28px;
     position: relative;
     font-weight: 500;
 }

 .service li::before,
 .service-no-grid li::before {
     content: "";
     width: 9px;
     height: 9px;
     background: #0098ff;
     border-radius: 50%;
     position: absolute;
     left: 0;
     top: 12px;
 }

 /* SITUATIONS */
 .situations {
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 50px;
     margin-top: 60px;
 }

 .situations div {
     padding-left: 40px;
     position: relative;
     font-size: 1.1rem;
     font-weight: 500;
 }

 .situations div::before {
     content: "";
     position: absolute;
     left: 0;
     top: 11px;
     width: 14px;
     height: 14px;
     border: 2px solid #0098ff;
     border-radius: 50%;
 }

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

 .main-types {
     margin-bottom: 140px;
 }

 .intro {
     max-width: 700px;
     margin-bottom: 60px;
 }

 .types {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 45px;
 }

 .types h3 {
     font-size: 1.4rem;
     margin-bottom: 12px;
 }

 .types p {
     line-height: 1.8;
     color: #666;
 }

 .types div {
     padding-bottom: 30px;
     border-bottom: 1px solid #ececec;
 }

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

 .list {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 90px;
     align-items: center;
     margin-bottom: 140px;
 }

 .list img {
     width: 100%;
     border-radius: 30px;
 }

 .list ul {
     list-style: none;
     padding: 0;
     margin-top: 40px;
 }

 .list li {
     padding: 18px 0;
     border-bottom: 1px solid #ececec;
     font-size: 1.05rem;
 }

 /* CTA */
 .cta {
     display: grid;
     grid-template-columns: 1fr 0.8fr;
     align-items: center;
     gap: 80px;
 }

 .cta img {
     border-radius: 30px;
     box-shadow: 0 35px 80px rgba(0, 0, 0, 0.08);
 }

 .button {
     display: inline-flex;
     align-items: center;
     padding: 18px 34px;
     background: #0098ff;
     color: white;
     text-decoration: none;
     font-weight: 700;
     margin-top: 25px;
     border-radius: 50px;
     transition: 0.3s;
 }

 .button:hover {
     transform: translateY(-4px);
 }

 /* RESPONSIVE */

 @media (max-width: 991px) {

     .wrapper h3 {
         margin-top: 30px;
     }

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

     .steps {
         box-sizing: border-box;
         display: flex;
         flex-direction: column;
         margin-top: 15px;
     }
 }

 @media (max-width: 980px) {

     .hero,
     .grid,
     .service,
     .list,
     .cta {
         grid-template-columns: 1fr;
         gap: 20px;
     }

     .hero {
         padding-top: 80px;
     }

     section:last-of-type,
     section {
         padding-top: 12%;
     }

     .service ul {
         margin-top: 15px;
         grid-template-columns: 1fr;
     }

     .situations {
         grid-template-columns: 1fr;
     }

     .big-text {
         display: none;
     }

     .main-types {
         margin-bottom: 40px;
     }

     .types {
         grid-template-columns: repeat(2, 1fr);
         gap: 10px;
     }

     .hero-image {
         order: -1;
     }

     .dbl-image-layout {
         min-height: auto;
     }

     .main-photo {
         width: 100%;
         height: 420px;
     }

     .second-photo {
         display: none;
     }

     .rec-image {
         max-width: 500px;
         margin: auto;
     }

     .rec-image img {
         height: 420px;
     }
 }

 @media (max-width: 650px) {
     .list {
         margin-bottom: 90px;
     }

     .list img {
         border-radius: 20px;
     }

     .main-photo {
         height: 320px;
     }

     .rec-image img {
         height: 340px;
     }
 }

 @media (max-width: 480px) {
     .main-photo {
         height: 260px;
     }

     .rec-image img {
         height: 280px;
     }
 }

 .types {
     grid-template-columns: repeat(1, 1fr);
 }