@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
*,
*::after,
*::before {
  padding: 0;
  margin: 0;
  box-sizing: border-box; }

html {
  overflow-x: hidden;
  scroll-behavior: smooth; }

body {
  overflow-x: hidden;
  font-family: "Poppins", system-ui; }

.btn__transparent {
  border: none;
  padding: 1rem 2rem;
  background: transparent;
  border: 2px solid #fff;
  transition: all .3s; }
  .btn__transparent a {
    color: #fff;
    text-decoration: none; }
  .btn__transparent a, .btn__transparent a:visited, .btn__transparent a:active {
    color: #fff; }

.btn__transparent:hover {
  background-color: #fff; }
  .btn__transparent:hover a {
    color: #061B75; }

.header {
  grid-column: 3 / 9;
  background-color: #DAD8D8;
  z-index: 1000;
  box-shadow: 0 4px 1rem rgba(0, 0, 0, 0.5);
  /* Shadow below the element */
  position: fixed;
  width: 80%;
  transform: translateX(12%);
  /* Mobile Menu Styles (hidden by default) */ }
  .header .nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem .8rem; }
  .header .nav-logo {
    height: auto;
    width: auto;
    max-width: 170px; }
  .header .mobile-menu-icon {
    display: none;
    color: #000;
    font-size: 2rem;
    cursor: pointer; }
  .header .nav-menu {
    display: flex; }
    .header .nav-menu li {
      list-style: none; }
      .header .nav-menu li a {
        text-decoration: none;
        padding: 1rem; }
      .header .nav-menu li a, .header .nav-menu li a:active, .header .nav-menu li a:visited {
        color: #000; }
      .header .nav-menu li a:hover {
        color: #fff;
        background-color: #061B75; }
      .header .nav-menu li i {
        font-size: 1.1rem;
        color: #113cfb; }
      .header .nav-menu li i:hover {
        color: #fff; }

/* Responsive Styles for Mobile Devices */
@media (max-width: 768px) {
  .header ul.nav-menu {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    background-color: #DAD8D8;
    position: absolute;
    left: 0;
    top: 100%;
    padding: 1rem 0; }
  .header ul.nav-menu.active {
    display: flex; }
  .header ul.nav-menu li {
    margin: 0 auto;
    text-align: center;
    padding: .5rem 0;
    width: 100%; }
  .header .mobile-menu-icon {
    display: block; } }

.footer {
  grid-column: full-start / full-end;
  background-color: #061B75;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  padding: 2rem; }

.contact {
  /* Span the full width of the grid */
  grid-column: full-start / full-end;
  background-color: #DAD8D8;
  /* Background color using a variable */
  padding: 5rem;
  /* Add padding around the section */
  display: flex;
  column-gap: 10rem;
  /* Gap between columns */ }
  .contact__description {
    width: 40%;
    /* Set width of the description section */ }
    .contact__description h2 {
      padding: 1rem 0;
      /* Add padding around the heading */
      border-bottom: 2px solid #061B75;
      /* Bottom border with primary color */ }
    .contact__description p {
      padding: 1rem 0;
      /* Add padding around the paragraph */ }
  .contact__form {
    width: 80%; }
    .contact__form .wpforms-submit {
      width: 100%;
      border: none;
      background-color: #061B75 !important; }

/* Responsive Styles for Mobile Devices */
@media (max-width: 768px) {
  .contact {
    display: flex;
    flex-direction: column;
    align-items: center;
    column-gap: 10rem;
    /* Gap between columns */ } }

/* Responsive Styles for Mobile Devices */
@media (max-width: 480px) {
  .contact {
    padding: 5rem 1rem;
    /* Reduce horizontal padding on smaller screens */ } }

/* Container Grid Layout */
.container {
  display: grid;
  grid-template-columns: [full-start] 1fr [center-start] repeat(8, [col-start] minmax(min-content, 14rem) [col-end]) [center-start] 1fr [full-end]; }

.about__hero {
  /* Span the full width of the grid */
  grid-column: full-start / full-end;
  background-color: #061B75;
  /* Background color using a variable */
  min-height: 140vh;
  /* Minimum height of 140% of the viewport height */
  height: 100%;
  /* Full height of the container */
  position: relative;
  /* Relative positioning for child elements */
  display: flex;
  flex-direction: column;
  /* Stack content vertically */
  justify-content: center;
  /* Center content vertically */
  align-items: center;
  /* Center content horizontally */
  color: #fff;
  /* White text color */ }
  .about__hero p {
    color: #c3c3c3;
    /* Light gray text color for paragraphs */ }
  .about__hero-content {
    width: 60%;
    /* Set width of content area */
    text-align: center;
    /* Center-align text */
    padding: 10rem 0;
    /* Add padding top and bottom */ }
    .about__hero-content--title {
      padding: 2rem 0;
      /* Add padding around the title */ }
  .about__hero-card {
    /* Grid layout for card section */
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* Two equal columns */
    column-gap: 10rem;
    /* Gap between columns */
    padding: 2rem 5rem;
    /* Padding around the card section */ }
    .about__hero-card--1, .about__hero-card--2 {
      border-top: 2px solid #fff;
      /* Top border for each card */
      padding: 2rem 0;
      /* Add padding around each card */ }
      .about__hero-card--1 h2, .about__hero-card--2 h2 {
        padding: 0 0 1rem 0;
        /* Add padding below the heading */ }

/* Responsive Styles for Mobile Devices */
@media (max-width: 768px) {
  .about__hero-card {
    /* Switch to a single-column layout on smaller screens */
    display: grid;
    grid-template-columns: 1fr;
    /* Single column layout */ } }

.team__image {
  position: relative;
  /* Relative positioning for child elements */ }
  .team__image img {
    position: fixed;
    /* Fixed positioning for the image */
    top: 0;
    /* Stick to the top of the viewport */
    width: 0;
    /* Set width to 0 (potentially for visual effect) */
    height: 100vh;
    /* Full viewport height */
    z-index: -1;
    /* Place behind other content */
    object-fit: cover;
    /* Ensure the image covers the area */ }

.profil {
  /* Span the full width of the grid */
  grid-column: full-start / full-end;
  background-color: #fff;
  /* White background color */
  padding: 5rem 5rem;
  /* Padding around the section */
  display: flex;
  flex-direction: column;
  /* Stack content vertically */
  row-gap: 5rem;
  /* Gap between rows */ }
  .profil__description {
    display: flex;
    flex-direction: column;
    /* Stack content vertically */
    justify-content: center;
    /* Center content vertically */
    align-items: center;
    /* Center content horizontally */
    text-align: center;
    /* Center-align text */ }
    .profil__description-content {
      width: 60%;
      /* Set width of content area */ }
  .profil__content {
    display: flex;
    flex-wrap: wrap;
    /* Allow wrapping of content */
    box-shadow: 0 0 1rem #00000055;
    /* Add shadow around content */ }
    .profil__content-card--1 {
      display: grid;
      grid-template-columns: 1fr 1fr;
      /* Two equal columns */
      background-color: #061B75;
      /* Background color using a variable */
      color: #fff;
      /* White text color */ }
      .profil__content-card--1-content {
        display: flex;
        flex-direction: column;
        /* Stack content vertically */
        justify-content: center;
        /* Center content vertically */
        align-items: start;
        /* Align content to start */
        padding: 10rem 5rem;
        /* Padding around the content */ }
        .profil__content-card--1-content p {
          padding: 2rem 0;
          /* Add padding around paragraphs */
          color: #c3c3c3;
          /* Light gray text color */ }
        .profil__content-card--1-content--spans {
          padding: 1rem 0;
          /* Add padding around spans */
          border-top: 2px solid #fff;
          /* Top border for separation */ }
      .profil__content-card--1 img {
        height: 100%;
        /* Full height of the container */
        width: 100%;
        /* Full width of the container */
        object-fit: cover;
        /* Ensure the image covers the area */ }

/* Responsive Styles for Mobile Devices */
@media (max-width: 768px) {
  .profil__content {
    display: flex;
    flex-wrap: wrap;
    /* Allow wrapping of content */
    gap: .5rem;
    /* Small gap between items */
    background-color: #DAD8D8;
    /* Background color using a variable */ }
    .profil__content-card--1 {
      display: flex;
      flex-direction: column;
      /* Stack content vertically */ } }

/* Responsive Styles for Mobile Devices */
@media (max-width: 480px) {
  .profil {
    padding: 5rem 1rem;
    /* Reduce horizontal padding on smaller screens */ }
  .profil__content-card--1-content {
    padding: 10rem 2rem; } }

.hero {
  /* Make the hero section span the full width of the grid */
  grid-column: full-start / full-end;
  /* Set the background color and background image for the hero section */
  background-color: #000;
  background-image: url(/img/hero.jpg);
  background-size: cover;
  height: 100vh;
  /* Set the height of the hero section to fill the full viewport height */
  /* Flexbox properties to center content vertically and horizontally */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  /* Overlay a semi-transparent dark layer over the background image */ }
  .hero::before {
    content: "";
    /* Create an empty element before the hero section */
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    /* Cover the full width of the section */
    height: 100%;
    /* Cover the full height of the section */
    min-height: 100vh;
    background-color: #00000095;
    /* Semi-transparent black overlay */
    z-index: 1;
    /* Set the stacking order below the content */ }
  .hero__content {
    /* Ensure the text content appears above the overlay */
    color: #fff;
    z-index: 2;
    text-align: center;
    /* Center the text */
    /* Style for buttons within the hero content */
    /* Styling for the button inside the hero content */ }
    .hero__content-title {
      font-size: 1.5rem;
      /* Set the font size for the title */ }
    .hero__content-text {
      padding: 2rem;
      /* Add padding around the text content */ }
    .hero__content button {
      border: none;
      /* Remove default button border */
      background: none;
      /* Remove default button background */ }
    .hero__content-button {
      /* Preserve the white color for visited and active states */
      /* Hover effect for the anchor button */ }
      .hero__content-button a {
        /* Style the anchor tag inside the button */
        text-decoration: none;
        /* Remove underline */
        color: #fff;
        /* Set the text color to white */
        padding: 1rem 2rem;
        /* Add padding inside the button */
        border: 2px solid #061B75;
        /* Add a border with the primary color */
        /* Add transition for hover effects */
        transition: all .3s; }
      .hero__content-button a:active, .hero__content-button a:visited {
        color: #fff; }
      .hero__content-button a:hover {
        background-color: #061B75;
        /* Change background color on hover */
        transform: scale(1.2);
        /* Scale up the button slightly on hover */ }

.about {
  /* Make the section span the full width of the grid */
  grid-column: full-start / full-end;
  /* Set background color, remove padding, and ensure full width */
  background-color: #fff;
  padding: 0;
  width: 100%;
  /* Flexbox properties to center content vertically and horizontally */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center; }
  .about__content {
    /* Center the text and set padding around the content */
    text-align: center;
    padding: 5rem 0;
    width: 60%;
    /* Limit the width of the content */ }
    .about__content h2 {
      /* Add vertical padding to the heading */
      padding: 2rem 0; }
  .about__card {
    /* Use CSS Grid to layout the cards in a 5-column grid */
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    /* Create 5 equal columns */
    padding: 2rem 0 5rem 0;
    /* Add padding around the card container */
    width: 100%;
    /* Ensure full width of the container */
    /* Style for individual cards with a pointer cursor and transition effects */
    /* Define grid column positions for each card */
    /* Apply hover effects to scale up the card */
    /* Create an overlay effect on hover with a background color */
    /* Set specific background colors for each card's hover effect */ }
    .about__card-1, .about__card-2, .about__card-3, .about__card-4, .about__card-5 {
      cursor: pointer;
      /* Change cursor to pointer on hover */
      transition: all .3s;
      /* Smooth transition for hover effects */ }
      .about__card-1 img, .about__card-2 img, .about__card-3 img, .about__card-4 img, .about__card-5 img {
        /* Set the size and fit of images within the cards */
        height: 15rem;
        /* Fixed height for images */
        width: 100%;
        /* Full width of the card */
        object-fit: cover;
        /* Cover the area while preserving aspect ratio */ }
      .about__card-1 hr, .about__card-2 hr, .about__card-3 hr, .about__card-4 hr, .about__card-5 hr {
        /* Style horizontal rules inside cards */
        width: 60%;
        /* Set width to 60% of the card */
        color: #c3c3c3;
        /* Light gray color for the rule */
        margin: 1rem 0;
        /* Margin above and below the rule */ }
    .about__card-1 {
      grid-column: 1 / 2; }
    .about__card-2 {
      grid-column: 2 / 3; }
    .about__card-3 {
      grid-column: 3 / 4; }
    .about__card-4 {
      grid-column: 4 / 5; }
    .about__card-5 {
      grid-column: 5 / 6; }
    .about__card-1:hover, .about__card-2:hover, .about__card-3:hover, .about__card-4:hover, .about__card-5:hover {
      transform: scale(1.2);
      /* Scale up the card on hover */ }
    .about__card-1:hover::after, .about__card-2:hover::after, .about__card-3:hover::after, .about__card-4:hover::after, .about__card-5:hover::after {
      content: "";
      /* Create an empty pseudo-element */
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      /* Cover the full width of the card */
      height: 100%;
      /* Cover the full height of the card */
      transform: scale(1.1);
      /* Slightly scale the overlay */ }
    .about__card-1:hover::after {
      background-color: #061a7580; }
    .about__card-2:hover::after {
      background-color: #dad8d878; }
    .about__card-3:hover::after {
      background-color: #061a7580; }
    .about__card-4:hover::after {
      background-color: #dad8d878; }
    .about__card-5:hover::after {
      background-color: #061a7580; }

.home-services {
  /* Span the full width of the grid */
  grid-column: full-start / full-end;
  /* Set background color and text color */
  background-color: #061B75;
  color: #fff;
  /* Use CSS Grid to layout the section */
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  /* Create 5 equal columns */ }
  .home-services__items {
    /* Span the first 4 columns of the grid */
    grid-column: 1 / 5;
    padding: 5rem 4rem;
    /* Add padding around the items */
    display: grid;
    column-gap: 5rem;
    /* Gap between columns */
    grid-template-columns: repeat(3, 1fr);
    /* Create 3 equal columns */
    /* Hover effects for items */ }
    .home-services__items-title {
      /* Span all columns */
      grid-column: 1 / -1; }
      .home-services__items-title h2 {
        /* Font size for the title */
        font-size: 2.2rem; }
    .home-services__items-1, .home-services__items-2, .home-services__items-3 {
      /* Padding and transition effects for each item */
      padding: 5rem 0;
      cursor: pointer;
      transition: all .3s;
      /* Smooth transition for hover effects */ }
      .home-services__items-1 span i, .home-services__items-2 span i, .home-services__items-3 span i {
        /* Style the icon */
        font-size: 3rem;
        transition: all .3s;
        /* Smooth transition for hover effects */
        cursor: pointer; }
      .home-services__items-1 span i:hover, .home-services__items-2 span i:hover, .home-services__items-3 span i:hover {
        /* Style for icon on hover */
        font-size: 4rem;
        color: #061B75;
        background-color: #DAD8D8;
        padding: .5rem;
        border-radius: 25rem;
        /* Round the background */ }
      .home-services__items-1 h3, .home-services__items-2 h3, .home-services__items-3 h3 {
        /* Margin for the heading */
        margin: 0 0 1rem 0; }
      .home-services__items-1 p, .home-services__items-2 p, .home-services__items-3 p {
        /* Color for the paragraph text */
        color: #c0c0c0; }
      .home-services__items-1 hr, .home-services__items-2 hr, .home-services__items-3 hr {
        /* Margin and color for horizontal rule */
        margin: 2rem 0;
        color: #fff; }
    .home-services__items-1:hover, .home-services__items-2:hover, .home-services__items-3:hover {
      background-color: #DAD8D8;
      padding: 1rem;
      /* Add padding on hover */
      color: #000;
      /* Change text color on hover */ }
      .home-services__items-1:hover p, .home-services__items-2:hover p, .home-services__items-3:hover p {
        /* Change paragraph color on hover */
        color: #2e2e2e; }
  .home-services__image {
    /* Span the 5th column of the grid */
    grid-column: 5 / 6;
    overflow: hidden;
    /* Hide overflow content */ }
    .home-services__image img {
      /* Style the image */
      height: 100%;
      /* Full height of the container */
      width: 100%;
      /* Full width of the container */
      object-fit: cover;
      /* Cover the area while preserving aspect ratio */ }

/* Responsive Styles for Mobile Devices */
@media (max-width: 768px) {
  .home-services__items {
    /* Span all columns and switch to a column layout */
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    /* Stack items vertically */ }
  .home-services__image {
    /* Span all columns */
    grid-column: 1 / -1; } }

/* Responsive Styles for Smaller Mobile Devices */
@media (max-width: 480px) {
  .about__card-1 img, .about__card-2 img, .about__card-3 img, .about__card-4 img, .about__card-5 img {
    /* Adjust image size for smaller screens */
    height: 5rem;
    width: 100%;
    object-fit: cover; }
  .about__card-1--title {
    /* Remove left margin for the title on smaller screens */
    margin-left: 0rem; }
    .about__card-1--title h4 {
      /* Font size for the heading on smaller screens */
      font-size: .8rem; } }

.case {
  /* Span the full width of the grid */
  grid-column: full-start / full-end;
  background-color: #fff;
  /* Set background color to white */
  padding: 5rem;
  /* Add padding around the section */
  display: flex;
  flex-direction: column;
  /* Stack content vertically */ }
  .case__title {
    text-align: center;
    /* Center-align text */
    padding: 0rem 0 5rem 0;
    /* Add padding below the title */
    font-size: 1.5rem;
    /* Set font size */ }
  .case__card {
    /* Use CSS Grid for card layout */
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* Create 2 equal columns */
    column-gap: 7rem;
    /* Gap between columns */
    row-gap: 2rem;
    /* Gap between rows */ }
    .case__card-1, .case__card-2, .case__card-3, .case__card-4 {
      border-top: 2px solid #c3c3c3;
      /* Top border for each card */
      padding: 1rem 0;
      /* Add padding around the content */ }
      .case__card-1 h3, .case__card-2 h3, .case__card-3 h3, .case__card-4 h3 {
        padding: 1rem 0;
        /* Add padding around the heading */ }
      .case__card-1 p, .case__card-2 p, .case__card-3 p, .case__card-4 p {
        border: none;
        /* Remove any default borders */
        color: #777575;
        /* Set text color */ }

/* Responsive Styles for Mobile Devices */
@media (max-width: 768px) {
  .case__card {
    /* Switch to a single-column layout on smaller screens */
    display: grid;
    grid-template-columns: 1fr;
    /* One column layout */
    column-gap: 7rem;
    /* Gap between columns (adjust if needed) */
    row-gap: 2rem;
    /* Gap between rows */ }
    .case__card-1, .case__card-2, .case__card-3, .case__card-4 {
      border-top: 2px solid #c3c3c3;
      /* Top border remains */
      padding: 1rem 0;
      /* Padding remains */ }
      .case__card-1 h3, .case__card-2 h3, .case__card-3 h3, .case__card-4 h3 {
        padding: 1rem 0;
        /* Padding remains */ }
      .case__card-1 p, .case__card-2 p, .case__card-3 p, .case__card-4 p {
        border: none;
        /* No border */
        color: #777575;
        /* Text color remains */ } }

.plans {
  /* Span the full width of the grid */
  grid-column: full-start / full-end;
  background-color: #061B75;
  /* Background color using a variable */
  padding: 6.5rem;
  /* Add padding around the section */
  color: #fff;
  /* Set text color to white */
  display: flex;
  flex-direction: column;
  /* Stack content vertically */
  justify-content: center;
  /* Center content vertically */
  align-items: center;
  /* Center content horizontally */
  text-align: center;
  /* Center-align text */ }
  .plans h2 {
    font-size: 2.2rem;
    /* Font size for the heading */
    padding: 1rem;
    /* Add padding around the heading */ }
  .plans p {
    color: #c3c3c3;
    /* Text color for paragraphs */
    padding: 0 0 1rem 0;
    /* Padding below the paragraph */ }

.team {
  /* Span the full width of the grid */
  grid-column: full-start / full-end;
  height: 100vh;
  /* Full viewport height for the section */
  position: relative;
  /* Position relative to the containing block */
  width: 100%;
  /* Full width of the container */
  z-index: -1;
  /* Place behind other content */ }
  .team img {
    object-fit: cover;
    /* Ensure the image covers the area */
    height: 100vh;
    /* Full height of the viewport */
    width: 100%;
    /* Full width of the container */
    position: fixed;
    /* Fixed position for sticky effect */
    top: 0;
    /* Stick to the top of the viewport */
    z-index: -1;
    /* Place behind other content */ }

.team::after {
  content: "";
  /* Empty content for pseudo-element */
  top: 0;
  left: 0;
  height: 100%;
  /* Full height of the container */
  width: 100%;
  /* Full width of the container */
  background-color: #000000ad;
  /* Dark overlay color */
  position: absolute;
  /* Absolute positioning */
  z-index: 1;
  /* Place above the background image */ }

.portfolio__hero {
  /* Full-width grid for the hero section */
  grid-column: full-start / full-end;
  background-color: #061B75;
  /* Set the primary background color */
  height: 100vh;
  /* Full viewport height */
  position: relative;
  /* Relative positioning for internal elements */
  display: flex;
  flex-direction: column;
  /* Stack content vertically */
  justify-content: center;
  /* Center content vertically */
  align-items: center;
  /* Center content horizontally */
  color: #fff;
  /* White text color */ }
  .portfolio__hero p {
    color: #c3c3c3;
    /* Light gray color for paragraph text */ }
  .portfolio__hero-content {
    width: 60%;
    /* Content area width set to 60% */
    text-align: center;
    /* Center-align text */
    padding: 5rem 0;
    /* Vertical padding */ }
    .portfolio__hero-content--title {
      padding: 2rem 0;
      /* Padding for the title */ }

.portfolio {
  /* Full-width grid for the portfolio section */
  grid-column: full-start / full-end;
  background-color: #fff;
  /* White background color */
  min-height: 100vh;
  /* Minimum height to cover full viewport */
  display: flex;
  flex-direction: column;
  /* Stack content vertically */
  align-items: center;
  /* Center-align content */
  padding: 5rem 0 0 0;
  /* Padding for top, no padding for sides or bottom */ }
  .portfolio__items ul {
    display: flex;
    /* Flex layout for list items */
    list-style: none;
    /* Remove default list style */
    padding: 2rem 0;
    /* Vertical padding */
    border-bottom: 2px solid #061B75;
    /* Bottom border with primary color */ }
    .portfolio__items ul li {
      margin-right: 2rem;
      /* Spacing between list items */ }
    .portfolio__items ul li:hover {
      background-color: #061B75;
      /* Change background color on hover */ }
    .portfolio__items ul a {
      text-decoration: none;
      /* Remove underline from links */
      font-weight: bold;
      /* Bold font */
      color: #333;
      /* Dark text color */
      transition: color 0.3s ease;
      /* Smooth transition for hover effect */ }
      .portfolio__items ul a:hover {
        color: #fff;
        /* White color on hover */
        padding: 1rem;
        /* Increase padding on hover */ }
  .portfolio__content {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
    /* Space between grid items */
    width: 100%;
    /* Full width */
    padding: 5rem 10rem;
    /* Padding for content */ }
    .portfolio__content-card {
      background-color: #f5f5f5;
      /* Light gray background for cards */
      padding: 1rem;
      /* Padding inside the card */
      text-align: center;
      /* Center-align text */
      border-radius: 8px;
      /* Rounded corners */
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      /* Soft box shadow */
      cursor: pointer;
      /* Change cursor to pointer on hover */
      transition: all .3s;
      /* Smooth transition for hover effects */ }
      .portfolio__content-card img {
        width: 100%;
        /* Full-width images */
        height: auto;
        /* Maintain aspect ratio */
        border-radius: 8px;
        /* Rounded corners for images */
        margin-bottom: 1rem;
        /* Margin below the image */ }
      .portfolio__content-card h3 {
        font-size: 1.5rem;
        /* Set font size for card titles */
        color: #333;
        /* Dark text color for titles */ }
    .portfolio__content-card:hover {
      transform: scale(1.2);
      /* Scale up the card on hover */
      box-shadow: 0 0 0 #061B75;
      /* Remove box-shadow on hover */ }

/* Responsive Styles for Mobile Devices */
@media (max-width: 768px) {
  .portfolio__items {
    width: 100%;
    /* Full width on mobile */
    display: flex;
    flex-wrap: wrap;
    /* Wrap items to fit smaller screens */ }
    .portfolio__items ul {
      display: flex;
      flex-wrap: wrap;
      /* Allow items to wrap to new lines */
      row-gap: .5rem;
      /* Small gap between rows */
      justify-content: center;
      /* Center items horizontally */ }
  .portfolio__content {
    display: grid;
    grid-template-columns: 1fr;
    /* Single-column layout on mobile */
    padding: 3rem 5rem;
    /* Adjusted padding for mobile screens */ }
    .portfolio__content-card {
      background-color: #f5f5f5;
      /* Light gray background for cards */
      padding: 1rem;
      /* Padding inside the card */
      text-align: center;
      /* Center-align text */
      border-radius: 8px;
      /* Rounded corners */
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
      /* Soft box shadow */
      cursor: pointer;
      /* Change cursor to pointer on hover */
      transition: all .3s;
      /* Smooth transition for hover effects */ }
      .portfolio__content-card img {
        width: 100%;
        /* Full-width images */
        height: auto;
        /* Maintain aspect ratio */
        border-radius: 8px;
        /* Rounded corners for images */
        margin-bottom: 1rem;
        /* Margin below the image */ }
      .portfolio__content-card h3 {
        font-size: 1.5rem;
        /* Set font size for card titles */
        color: #333;
        /* Dark text color for titles */ }
    .portfolio__content-card:hover {
      transform: scale(1.2);
      /* Scale up the card on hover */
      box-shadow: 0 0 0 #061B75;
      /* Remove box-shadow on hover */ } }

.services__hero {
  /* Span the full width of the grid */
  grid-column: full-start / full-end;
  background-color: #061B75;
  /* Primary background color */
  height: 100vh;
  /* Full viewport height */
  position: relative;
  /* Relative positioning for child elements */
  display: flex;
  flex-direction: column;
  /* Stack content vertically */
  justify-content: center;
  /* Center content vertically */
  align-items: center;
  /* Center content horizontally */
  color: #fff;
  /* White text color */ }
  .services__hero p {
    color: #c3c3c3;
    /* Light gray text color for paragraphs */ }
  .services__hero-content {
    width: 60%;
    /* Set content area width */
    text-align: center;
    /* Center-align text */
    padding: 5rem 0;
    /* Padding top and bottom */ }
    .services__hero-content--title {
      padding: 2rem 0;
      /* Padding around the title */ }

/* Responsive Styles for Mobile Devices */
@media (max-width: 768px) {
  /* Currently empty but reserved for future mobile styles if needed */ }

.services {
  /* Span the full width of the grid */
  grid-column: full-start / full-end;
  background-color: #fff;
  /* White background color */
  padding: 5rem 5rem;
  /* Padding around the services section */
  display: flex;
  flex-direction: column;
  /* Stack content vertically */
  row-gap: 5rem;
  /* Gap between rows */ }
  .services__description {
    display: flex;
    flex-direction: column;
    /* Stack content vertically */
    justify-content: center;
    /* Center content vertically */
    align-items: center;
    /* Center content horizontally */
    text-align: center;
    /* Center-align text */ }
    .services__description-content {
      width: 60%;
      /* Set width of content area */ }
  .services__content {
    display: flex;
    flex-wrap: wrap;
    /* Allow wrapping of content */
    box-shadow: 0 0 1rem #00000055;
    /* Add shadow around content */ }
    .services__content-card--1 {
      display: grid;
      grid-template-columns: 1fr 1fr;
      /* Two equal columns layout */
      background-color: #061B75;
      /* Primary background color */
      color: #fff;
      /* White text color */ }
      .services__content-card--1 span i {
        font-size: 3rem;
        /* Increase icon font size */ }
      .services__content-card--1-content {
        display: flex;
        flex-direction: column;
        /* Stack content vertically */
        justify-content: center;
        /* Center content vertically */
        align-items: start;
        /* Align content to start */
        padding: 6rem 5rem;
        /* Padding around the content */ }
        .services__content-card--1-content h2 {
          padding: 1rem 0 0 0;
          /* Padding above the heading */
          border-top: 2px solid #fff;
          /* Top border for heading */ }
        .services__content-card--1-content p {
          padding: 2rem 0;
          /* Add padding around paragraphs */
          color: #c3c3c3;
          /* Light gray text color */ }
        .services__content-card--1-content--spans {
          padding: 1rem 0;
          /* Padding around spans */
          border-top: 2px solid #fff;
          /* Top border for spans */ }
      .services__content-card--1 img {
        height: 100%;
        /* Full height of the container */
        width: 100%;
        /* Full width of the container */
        object-fit: cover;
        /* Ensure the image covers the area */ }

/* Responsive Styles for Mobile Devices */
@media (max-width: 768px) {
  .services__content {
    display: grid;
    grid-template-columns: 1fr;
    /* Switch to single-column layout */
    gap: .5rem;
    /* Small gap between items */
    background-color: #DAD8D8;
    /* Secondary background color */
    box-shadow: 0 0 1rem #00000055;
    /* Box shadow for cards */ }
    .services__content-card--1 {
      display: grid;
      grid-template-columns: 1fr;
      /* Single-column layout for cards */ } }

/* Responsive Styles for Mobile Devices */
@media (max-width: 480px) {
  .services {
    padding: 5rem 1rem;
    /* Reduce horizontal padding on smaller screens */ }
  .services__content-card--1-content {
    padding: 10rem 2rem; } }

main {
  grid-column: full-start / full-end !important; }

.page__hero {
  /* Span the full width of the grid */
  grid-column: full-start / full-end;
  background-color: #061B75;
  /* Background color using a variable */
  min-height: 60vh;
  /* Minimum height of 140% of the viewport height */
  height: 100%;
  /* Full height of the container */
  width: 100%;
  position: relative;
  /* Relative positioning for child elements */
  display: flex;
  flex-direction: column;
  /* Stack content vertically */
  justify-content: center;
  /* Center content vertically */
  align-items: center;
  /* Center content horizontally */
  color: #fff;
  /* White text color */ }
  .page__hero p {
    color: #c3c3c3;
    /* Light gray text color for paragraphs */ }
  .page__hero-content {
    width: 60%;
    /* Set width of content area */
    text-align: center;
    /* Center-align text */
    padding: 10rem 0;
    /* Add padding top and bottom */ }
    .page__hero-content--title {
      padding: 2rem 0;
      /* Add padding around the title */ }

.feature__image {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  padding: 5rem 0 1rem 0; }
  .feature__image img {
    width: 60rem;
    height: 30rem;
    object-fit: cover;
    box-shadow: 0 0 2rem #00000089;
    cursor: pointer;
    transition: all .3s; }
  .feature__image img:hover {
    transform: scale(1.1); }

.entry-content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 0 0 5rem 0; }
  .entry-content__the_content {
    width: 75%; }
    .entry-content__the_content h1 {
      padding: 1rem 0; }
    .entry-content__the_content h2 {
      padding: 2rem 0;
      cursor: pointer;
      transition: all .3s; }
    .entry-content__the_content h2:hover {
      color: #061B75;
      transform: skew(15deg); }
    .entry-content__the_content h3, .entry-content__the_content h4, .entry-content__the_content h5 {
      padding: 1rem 0;
      cursor: pointer; }
    .entry-content__the_content p {
      padding: 1rem 0; }
    .entry-content__the_content img {
      height: 30rem;
      width: 100%;
      object-fit: cover;
      padding: 2rem 0; }
  .entry-content .single__nav-links .page-links {
    padding: 2rem 0 !important;
    display: flex; }

.comment {
  display: flex;
  justify-content: center; }

/* Responsive Styles for Mobile Devices */