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

html {
    font-size: 62.5%;
    overflow-x: hidden;
    scroll-behavior: smooth;
} 

body {
    /* font-family: 'PT Sans', sans-serif;     */
    font-family: 'GilroyRegular';
    overflow: hidden;
    /* font-weight: 100; */
    background-color: #fff;
}


.bold-font {
    font-weight: bold !important;
    color: #222 !important;
}
.spacer {
    height: 20rem;
}

.hidden {
    display: none;
}

.centre-text {
    text-align: center;
}

.white-text {
    color: #fff !important;
}

.grey-background {
    background-color: #fafafa !important;
}

.white-background {
    background-color: #fff !important;
}

.black-text {
    color:#333 !important;
}

.green-text {
    color: #dbffc7;
}

.green-background {
    background-color: #dbffc7;
}

.orange-background {
    background-color: #FF6833 !important;
}

.orange-text {
    color: #FF6833 !important;
}

#map {
    height: 40rem;
    width: 100%;
}

.peach-background {
    background-color: #F5F2ED !important;
}

.peach-text {
    color: #F5F2ED !important;
}

.blue-background {
    background-color: #098cd1 !important;
}

.blue-text {
    color: #098cd1 !important;
}

.lightblue-background {
    background-color: #E0F7FF !important;
}

.lightblue-text {
    color: #E0F7FF !important;
}

.orange-link {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #ff6833;
    color: #fff;
    text-decoration: none;
    font-size: 2.4rem;
    text-align: center;
    padding: 0.6rem 2.4rem;
    border-radius: 6px;
    transition: all 0.3s;
}

.orange-link:hover {
    background-color: #f5f2ed;
    color: #333;
}

.blue-link {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #098cd1;
    color: #fff;
    text-decoration: none;
    font-size: 2.4rem;
    text-align: center;
    padding: 0.6rem 2.4rem;
    border-radius: 6px;
    transition: all 0.3s;
}

.blue-link:hover {
    background-color: #e0f7ff;
    color: #098cd1;
}

.blue-link:hover > .white-arrow {
    filter: brightness(0%);
}

.orange-link:hover > .white-arrow {
    filter: brightness(0%);
}

.white-arrow {
    filter: brightness(100%);
    width: 2rem;
    margin-bottom: -0.2rem;
    margin-left: 1rem;
    transition: all 0.3s;
}

.main-background {
    background-color: #2E3C43 !important;
}

.main-text {
    color: #2E3C43 !important;
}

.sub-background {
    background-color: #A5E9DE !important;
}

.sub-text {
    color: #A5E9DE !important;
}

.main-link {
    background-color: #a5e9de;
    color: #2e3c43;
    text-decoration: none;
    font-size: 2.4rem;
    text-align: center;
    padding: 0.6rem 2.4rem;
    border-radius: 6px;
    transition: all 0.3s;
    margin-left: auto;
}

.main-link:hover {
    background-color: #fff;
}



.centre-text {
    text-align: center;
}

.right-text {
    margin-left: auto;
}

.grid-column-three {
    grid-column: 1/3;
}

.grid-column-four {
    grid-column: 1/4;
}

.font-size-small {
    font-size: 1.8rem;
}

.no-padding-top {
    padding-top: 0 !important;
}

.no-padding-bottom {
    padding-bottom: 0 !important;
}

.margin-top {
    margin-top: 4.8rem !important;
}

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

.eleven-rem {
    width: 11rem;
}

.blue-img-filter {
    position: relative;
}

.blue-img-filter::before {
    content:"";
    position: absolute;
    top:0;
    left:0;
    height:100%;
    width:100%;
    background: #2e3c4365;
    z-index:999;
    border-radius: 13px;
}

.white-img {
    filter: brightness(0) saturate(100%) invert(100%) !important;
}

/* //////////NAV//////////// */



.desktop-nav {
    position: fixed;
    padding: 0.6rem 2.4rem 0rem;
    width: 100%;
    background-color: #fafafa;
    z-index: 99999;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.194);
}

.desktop-nav-box {
    margin: 0 auto;
    position: relative;
    filter: none;
    display: grid;
}

.desktop-nav-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nav-logo {
    width: 28rem;
    justify-self: flex-start;
}


.desktop-nav-list {
    list-style-type: none;
    display: flex;
    gap: 3.6rem;
    cursor: pointer;
}

.desktop-nav-link {
    color: #fff;
    font-size: 2rem;
    text-decoration: none;
    transition: all 0.3s;
}


.desktop-a {
    text-decoration: none;
    color: #333;
    transition: all 0.3s;
}

.jobs-nav-link {
    color: #333;
    text-decoration: none;
    transition: all 0.3s;
}

.jobs-nav-link:hover,
.desktop-nav-link:hover,
.desktop-a:hover {
    transform: scale(1.05);
}

.desktop-language-link {
    justify-self: flex-end;
    color: #fff;
    font-size: 2rem;
    display: flex;
    gap: 1.2rem;
}

.language-arrow {
    width: 1rem;
    margin-bottom: 0.3rem;
}


  /* The container <div> - needed to position the dropdown content */
  .dropdown {
    position: relative;
    display: inline-block;
  }
  
  /* Dropdown Content (Hidden by Default) */
  .dropdown-content {
    display: none;
    position: absolute;
    background-color: #fff;
    min-width: 26rem;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    /* border: 3px solid #333; */
    border-top: 0px;
    border-radius: 6px;
  }
  
  /* Links inside the dropdown */
  .dropdown-content a {
    padding: 1.2rem 2.4rem;
    text-decoration: none;
    font-size: 2rem;
    color: #333;
    display: block;
    transition: all 0.3s;
  }
  
  /* Change color of dropdown links on hover */
  .dropdown-content a:hover {
    background-color: #eee;
    font-size: 2.2rem;
}
  
  /* Show the dropdown menu on hover */
  .dropdown:hover .dropdown-content {display: block;}
  
  /* Change the background color of the dropdown button when the dropdown content is shown */
  .dropdown:hover .nav-link {background-color: #555;}

  .nav-down-arrow {
    filter: brightness(0%);
    width: 1rem;
  }


  .desktop-nav-assessments {
    position: fixed;
    padding: 0.6rem 2.4rem 0;
    width: 100%;
    background-color: #F5F2ED;
    /* border-bottom: 3px solid #FF6833; */
    z-index: 99999;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.desktop-nav-pci {
    position: fixed;
    padding: 0.6rem 2.4rem 0;
    width: 100%;
    background-color: #dbffc7;
    /* border-bottom: 3px solid #2E3C43; */
    z-index: 99999;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.desktop-nav-managed {
    position: fixed;
    padding: 0.6rem 2.4rem 0;
    width: 100%;
    background-color: #E0F7FF;
    /* border-bottom: 3px solid #098cd1; */
    z-index: 99999;
        box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.nav-language {
    width: 3rem;
    /* margin-bottom: -2rem; */
}

/* //////////MOBILE-NAV//////////// */

.sidenav {
    height: 100%; /* 100% Full-height */
    width: 0; /* 0 width - change this with JavaScript */
    position: fixed; /* Stay in place */
    z-index: 999999; /* Stay on top */
    top: 0; /* Stay at the top */
    right: 0;
    background-color: #2E3C43; /* Black*/
    overflow-x: hidden; /* Disable horizontal scroll */
    padding-top: 4rem; /* Place content 60px from the top */
    transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
    border-left: 3px solid #A5E9DE;
    display: none;
  }
  
  /* The navigation menu links */
  .sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 2.4rem;
    color: #fff;
    display: block;
    transition: 0.3s;
  }
  
  /* When you mouse over the navigation links, change their color */
  .sidenav a:hover {
    color: #fff;
  }
  
  /* Position and style the close button (top right corner) */
  .sidenav .closebtn {
    position: absolute;
    top: 10px;
    right: 10px;

  }

  .closebtn {
    width: 3.6rem;

  }

.sub-link {
    margin-left: 2.4rem;
    font-size: 2.4rem !important;
  }

.sub-links {
    display: none; 
}

.toggle-link {
    cursor: pointer;
}

.toggle-link.active + .sub-links {
    display: block; 
}

  


.open-nav {
      z-index: 999;
      font-size: 5rem;
      color: #333;
      display: none;
      padding-right: 0.6;
  }

.mobile-img-links {
    display: none;
}

.mobile-nav-img-links {
    display: flex;
    align-items: flex-start;
}

.sidenav-dropdown {
    display: flex;
    flex-direction: column;
}

.sidenav-header-box {
    display: flex;
}

.sidenav-header-box img {
    align-self: center;
    max-width: 100%;
    height: auto !important;
}

/* //////////HERO//////////// */

.hero {
    background-image: url('/imgs/hero-banner.jpg');
    background-size: cover;
    background-position: center;
    height: 90vh;
    margin-top: 4rem;
}

.hero-box {
    margin: 0 auto;
    height: 100%;
    max-width: 120rem;
}

.hero-container {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3.6rem;
}

.hero-header {
    font-size: 7.2rem;
    color: #fff;
    line-height: 1;
    letter-spacing: 3px;
}

.hero-text {
    font-size: 2.4rem;
    color: #fff;
    font-weight: 100;
}

.hero-link {
    display: flex;
    background-color: #fff;
    color: #333;
    border-radius: 6px;
    text-align: center;
    text-decoration: none;
    padding: 0.6rem 2.4rem;
    font-size: 2.4rem;
    margin-right: auto;
    transition: all 0.3s;
    align-items: center;
    justify-content: center;
}

.hero-link:hover {
    background-color: #2e3c43;
    color: #fff;
}

.hero-link:hover > .hero-arrow {
    filter: brightness(100%);
}

.hero-arrow {
    filter: brightness(0%);
    width: 2rem;
    margin-left: 2rem;
    transition: all 0.3s;
}


/* //////////SERVICES//////////// */

.services {
    padding: 4.8rem 0.6rem;
}

.services-box {
    margin: 0 auto;
    max-width: 160rem;
}

.services-box-three {
    margin: 0 auto;
    max-width: 160rem;
}

.services-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-gap: 2.4rem;
}

.services-container-three {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 2.4rem;
    max-width: 120rem;
    margin: 0 auto;
}


.services-header {
    grid-column: 1/5;
    font-size: 6rem;
    color: #333;
    justify-self: flex-start;
}

.services-item-box-main {
    display: flex;
    flex-direction: column;
    grid-column: 1/3;
    border-radius: 13px;
    overflow: hidden;
    width: 100%;
    cursor: pointer;
    transition: all 0.6s;
}

.services-item-box-main-minor {
    display: flex;
    flex-direction: column;
    border-radius: 13px;
    overflow: hidden;
    width: 100%;
    transition: all 0.6s;
}

.services-item-two,
.services-item-three {
    display: flex;
    flex-direction: column;
    cursor: pointer;
    overflow: hidden;
    border-radius: 13px;
}

.services-item-img-hidden {
    display: none;
    width: 100%;
    overflow: hidden;
    margin-bottom: -1rem;
}


.services-item-img {
    width: 100%;
    margin-bottom: -1rem;
}

.services-item-text-box {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    padding: 2.4rem;
    border-radius: 13px;
    background-color: #dbffc7;
    align-content: space-around;
    justify-content: space-around;
    flex-grow: 1;

}

.services-item-header {
    display: flex;
    justify-content: space-between;
    font-size: 4.8rem;
    color: #1b3d42;
    margin-bottom: 4.8rem;
}

.services-item-icon {
    width: 4rem;
    margin-top: 1rem;
    align-self: flex-start;
    transition: all 0.6s;
}

.services-item-box-main:hover .services-item-icon,
.services-item-text-box:hover .services-item-icon-sub-one,
.services-item-text-box:hover .services-item-icon-sub-two,
.services-item-box-main-minor:hover .services-item-icon,
.services-item-two:hover .services-item-icon,
.services-item-three:hover .services-item-icon {
    transform: rotateY(360deg);
}


.services-item-text {
    font-size: 2rem;
    margin-bottom: auto;
    color: #1b3d42;
}

.services-item-link-box {
    display: flex;
    justify-content: space-between;
}

.services-learn-more {
    font-size: 2.4rem;
    color: #1b3d42;
    text-decoration: none;
    align-self: center;
    font-weight: bold;

}

.services-learn-more:hover > .services-arrow-one {
    margin-left: 4rem;
}

.services-arrow-one {
    width: 2rem;
    margin-bottom: -0.3rem;
    margin-left: 2rem;
    transition: all 0.3s;
}

.services-learn-more-payment-btns {
    display: flex;
    gap: 1.2rem;
    justify-self: center;
}

.services-learn-more-payment-btn {
    width: 10rem;
    height: 6rem;
    padding: 0.6rem;
    background-color: #fff;
    border-radius: 6px;
    justify-self: center;
    transition: all 0.3s;
}


.sitb-two {
    background-color: #e0f7ff;
}

.sih-header-two,
.sih-link-two {
    color: #098cd1;
}

.sitb-three {
    background-color: #f5f2ed;
}

.sih-header-three,
.sih-link-three {
    color: #ff6833;
}

.services-item-icon-sub-one {
    width: 5rem;
    height: 3.2rem;
    justify-self: flex-start;
    margin-top: 1.8rem;
    transition: all 0.6s;
}

.services-item-icon-sub-two {
    width: 3rem;
    height: 4rem;
    justify-self: flex-start;
    margin-top: 1.8rem;
    transition: all 0.6s;
}

.sitb-pci {
    background-color: #1b3d42;
}

/* .service-logo-link {

} */

.number-header {
    font-size: 4.8rem;
}

.services-tabs-vertical {
    display: flex;
    gap: 4rem;
    margin-top: 4rem;
    padding: 1.2rem 0.6rem 2.4rem;
    flex-wrap: wrap;
    margin: 0 auto;
    max-width: 120rem;
  }

  .services-tabs-header {
    font-size: 4.8rem;
    color: #333;
    padding: 3.6rem 0.6rem 0;
    margin: 0 auto;
    max-width: 120rem;
  }
  
  .services-tab-buttons-vertical {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    min-width: 30rem;

    justify-content: center;
  }
  
  .services-tab-vertical {
    padding: 1rem 2rem;
    font-size: 2rem;
    background-color: #fff;
    border: 2px solid #1b3d42;
    color: #1b3d42;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s;
    text-align: left;
  }
  
  .services-tab-vertical:hover,
  .services-tab-vertical.active {
    background-color: #FF6833;
    color: #fff;
    border-color: #FF6833;
  }
  
  .services-tab-content-vertical {
    flex: 1;
    max-width: 100rem;
  }
  
  .services-tab-panel-vertical {
    display: block;
    scroll-margin-top: 8rem; 
  }
  
  .services-tab-panel-vertical.hidden {
    display: none;
  }
  

/* //////////DUO//////////// */

.duo {
    padding: 4.8rem 0.6rem;
    background-color: #f4f4f4;
}

.duo-box {
    margin: 0 auto;
    max-width: 120rem;
}

.duo-container {
    display: grid;
    grid-template-columns: 1fr 1fr; 
    column-gap: 0.6rem;
    row-gap: 0.6rem;
}

.duo-header {
    font-size: 6rem;
    color: #333;
    align-self: center;
}

.duo-text {
    font-size: 2.4rem;
    color: #555;
}

.logos {
    padding: 0 0.6rem 9.6rem;
    background-color: #f4f4f4;
}

.logos-box {
    margin: 0 auto;
    max-width: 140rem;
}

.logos-container {
    display: flex;
    gap: 3.6rem;
    justify-content: center;
}

.logos-img {
    width: 100%;
}



/* //////////CASE//////////// */

.case {
    padding: 4.8rem 0.6rem;
}

.case-box {
    margin: 0 auto;
    max-width: 160rem;
}

.case-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 2.4rem;
}

.case-header {
    text-align: center;
    font-size: 6rem;
    color: #333;
    grid-column: 1/3;
}

.case-item-one {
    display: flex;
    flex-direction: column;
    gap: 7.2rem;
    align-items: center;
    background-color: #e0f7ff;
    border-radius: 13px;
    padding: 6rem 2.4rem 2.4rem;
}

.case-item-two {
    display: flex;
    flex-direction: column;
    gap: 7.2rem;
    align-items: center;
    background-color: #e0f7ff;
    border-radius: 13px;
    padding: 2.4rem 2.4rem 6rem;
}

.case-text-box {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    align-items: center;
    justify-content: center;
    max-width: 85%;
}

.case-item-header {
    font-size: 4.8rem;
    color: #6ba8bb;
}

.case-item-text {
    font-size: 2rem;
    color: #1b3d42;
    text-align: center;
}

.case-rating {
    color: #ffc633;
    font-size: 2.4rem;
    text-align: center;
}

.case-quote-box {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    align-items: center;
}

.case-quote-img {
    border-radius: 50%;
    width: 4rem;
    height: 4rem;
}

.case-quote-name {
    font-size: 2rem;
    color: #1b3d42;
    margin-right: auto;
    font-weight: bold;
}

.case-quote-text {
    font-style: italic;
    color: #1b3d42;
    text-align: center;
    font-size: 2rem;
}

.case-item-link {
    background-color: #6ba8bb;
    color: #fff;
    border-radius: 6px;
    text-decoration: none;
    text-align: center;
    padding: 1rem 4.8rem;
    font-size: 2rem;
    margin-top: 2rem;
    transition: all 0.3s;
}

.case-item-link:hover {
    background-color: #fff;
    color: #1b3d42;
    font-weight: bold;
}

.case-item-img-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.case-item-img {
    border-radius: 13px;
    width: 100%;
}

.case-item-img-logo {
    width: 9rem;
    border-radius: 6px;
    background-color: #fff;
    padding: 0.6rem 1.2rem;
    margin-top: -2.4rem;
}

.orange-text {
    color: #ff6833;
}

.orange-background {
    background-color: #ff6833;
}

.case-multi-row-box {
    display: flex;
    flex-direction: column;
    gap: 2.4rem;
}

.case-alt-box {
    background-color: #f5f5f5;
    text-decoration: none;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 25%;
    cursor: pointer;
    transition: all 0.6s;
}

.case-alt-box:hover {
    gap: 35%;
}

.case-alt-text {
    font-size: 4.8rem;
    color: #333;
    font-weight: bold;
}

.case-alt-arrow {
    width: 3.6rem;
}


/* //////////QUAD//////////// */

.quad {
    padding: 4.8rem 0.6rem;
    background-color: #098cd1;

}

.quad-box {
    margin: 0 auto;
    max-width: 140rem;
}

.quad-container {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    column-gap: 6rem;
}

.quad-container-single {
    display: grid;
    grid-template-columns: 1fr;
    column-gap: 6rem;
}

.quad-text-box {
    display: flex;
    flex-direction: column;
    gap: 4.8rem;
}

.quad-heading-box {
    display: flex;
    flex-direction: column;
    gap: 2.4rem;
    /* max-width: 80%; */
}

.quad-header {
    font-size: 6rem;
    color: #fff;
}

.quad-text {
    font-size: 2.4rem;
    color: #fff;
}

.quad-info-box {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 3.6rem;
}

.quad-info-accordion-box {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 3.6rem;
}

.quad-item {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.quad-item-accordion {
    display: flex;
    flex-direction: column;
}

.accordion-quad {
    display: flex;
    padding: 0.6rem;
    border-radius: 13px;
    cursor: pointer;
}

.quad-item-stretch {
    grid-column: 1/3;
    display: flex;
    flex-direction: column;
    gap: 2.4rem;
}

.circled-number {
    font-size: 2.4rem;
    border-radius: 50%;
    border: 1px solid #333;
    color: #333;
    padding: 1rem 1.2rem;
    font-weight: bold;
}

.quad-item-header-box {
    display: flex;
    gap: 3.6rem;
}

.quad-arrow {
    width: 3rem;
    height: 3rem;
    justify-self: center;
}

.quad-item-header {
    font-size: 3rem;
    color: #fff;
    line-height: 1;
    align-self: center;
}

.quad-img-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.quad-img {
    border-radius: 13px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.386);
    width: 100%;
}

/* //////////PCI-QUAD//////////// */

.pci-quad {
    padding: 4.8rem 0.6rem 4.8rem;
    background-color: #dbffc7;

}

.pci-quad-box {
    margin-top: 10rem;
}

.pci-font-colour {
    color: #1b3d42;
}

/* -------ABOUT------ */

.about {
    padding: 9.6rem 0.6rem 2.4rem;
}

.about-box {
    margin: 0 auto;
    max-width: 90rem;
}

.about-container {
    display: flex;
    flex-direction: column;
    gap: 2.4rem;
    align-items: center;
    justify-content: center;
}

.about-header {
    font-size: 6rem;
    color: #333;
    text-align: center;
}

.about-text {
    font-size: 2.2rem;
    color: #333;
    text-align: center;
}


/* -------TRI-CUBES------ */

.tri-cubes {
    padding: 4.8rem 1.2rem 4.8rem;
}

.tri-cubes-box {
    max-width: 140rem;
    margin: 0 auto;
}

.tri-cubes-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 2.4rem;
    justify-items: center;
}

.quad-cubes-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    column-gap: 2.4rem;
}


.tri-cubes-item {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    gap: 1.2rem;
    padding: 3.6rem;
    border-radius: 13px;
    transition: all 0.3s;
    border-left: 0.001px solid #fff;
    height: 45rem;
}

.duo-cubes-item {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    gap: 1.2rem;
    padding: 3.6rem;
    border-radius: 13px;
    transition: all 0.3s;
    border-left: 0.001px solid #fff;
}

.quad-cubes-item {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    padding: 1.2rem;
    border-radius: 13px;
    transition: all 0.3s;
    border-left: 0.001px solid #fff;
    height: 35rem;
    width: 35rem;
}

.tri-cubes-item:hover,
.quad-cubes-item:hover {
    transform: scale(1.05);
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.386);
}

.quad-cubes-number {
    font-size: 2.4rem;
    border-radius: 50%;
    border: 1px solid #fff;
    color: #fff;
    margin-right: auto;
    padding: 1rem 1.2rem;
}

/* .tri-cubes-item:hover {
    border-left: 1.2rem solid #fff;
} */


.tri-cubes-icon {
    width: 4rem;
}

.tri-cubes-header {
    color: #fff;
    font-size: 3.6rem;
    font-weight: 100;
    padding: 0rem 0;
    line-height: 0.8;
}

.tri-cubes-text {
    font-size: 2rem;
    color: #fafafa7c;
    position: relative;
    justify-self: flex-start;
    align-self: flex-start;
    font-weight: 0;
    margin-right: auto;
}

.tci-one {
    background-color: #A5E9DE;
}

.tci-two {
    background-color: #3a747e;
}

.tci-three {
    background-color: #098cd1;
}

.tri-cubes-icon-box {
    display: flex;
    width: 100%;
    justify-content: space-between;
    margin-bottom: 1.2rem;
    transition: all 0.3s;
}

.tri-cubes-icon-right {
    width: 4rem;
    transition: all 0.6s;
}

.tri-cubes-item:hover .tri-cubes-icon-right {
    transform: rotateY(360deg);
}


.dark-header {
    color: #333;
}

.dark-text {
    color: #3333337c;
}

/* -------PCI-TRI-CUBES------ */

.pci-cube {
    background-color: #dbffc7;
}

.pci-cube:hover {
    background-color: #1b3d42;
}

.pci-cube:hover > .pci-cubes-icon {
    filter: brightness(100%);
}

.pci-cube:hover > .pci-cubes-header {
    color: #dbffc7;
}

.pci-cube:hover > .pci-cubes-text {
    color: #dbffc78c;
}

.pci-cubes-icon {
    filter: brightness(0%);
    width: 4rem;

}

.pci-cubes-header {
    color: #1b3d42;
}


.pci-cubes-text {
    color: #1b3d4285;
}

.cube-logo {
    width: 10.5rem;
    height: 8rem;
}
.tri-cubes-header-box {
    display: flex;
    gap: 1.2rem;
    align-self: center;
    justify-self: center;
    align-items: center;
}

.tri-cubes-text-box {
    display: flex;
    align-items: flex-start;
    gap: 1.2rem;
    padding: 1.2rem 0;
}


/* -------FOOTER------ */

.footer {
    padding: 10rem 0.6rem 3.6rem;
    background-color: #098cd1;
    margin-top: 20rem;
}

.footer-img-box {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url("/imgs/footerBackground.jpg");
    background-size: cover;
    background-position: center;
    max-width: 140rem;
    height: 50rem;
    border-radius: 23px;
    margin: 0 auto;
    margin-top: -35rem;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.386);
}

.footer-img-network {
    background-image: url("/imgs/netwerk-footer.jpeg");
}

.footer-img-lighthouse {
    background-image: url("/imgs/pci-footer-one.jpg");
}

.footer-img-lighthouse-two {
    background-image: url("/imgs/assessments-banner-four.jpeg");
}

.footer-img-lighthouse-three {
    background-image: url("/imgs/assessments-banner-one.jpeg");
}

.footer-img-cloud {
    background-image: url("/imgs/cloud-footer-two.jpg");
    background-position-y: top;
}

.footer-img-container {
    display: flex;
    flex-direction: column;
    gap: 4.8rem;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.footer-img-header {
    font-size: 6rem;
    color: #fff;
    letter-spacing: 0.3rem;
    text-align: center;
}

.footer-img-text {
    font-size: 2.4rem;
    text-align: center;
    color: #fff;
    max-width: 80rem;
}

.footer-img-link {
    background-color: #2e3c43;
    color: #a5e9de;
    text-decoration: none;
    font-size: 2.4rem;
    text-align: center;
    padding: 0.6rem 2.4rem;
    border-radius: 6px;
    transition: all 0.3s;
}

.footer-img-link:hover {
    background-color: #a5e9de;
    color: #2e3c43;
}

.footer-img-link:hover > .footer-img-arrow {
    filter: brightness(0%);
}

.footer-img-arrow {
    width: 2rem;
    margin-bottom: -0.3rem;
    margin-left: 1rem;
}

.footer-box {
    margin: 0 auto;
    max-width: 140rem;
}

.footer-container {
    display: flex;
    gap: 9.6rem;
    padding: 9.6rem 0.6rem;
}

.footer-item-box {
    display: grid;
    grid-template-columns: 1fr 1fr;
    row-gap: 4.8rem;
    column-gap: 30rem;
}

.footer-item {
    display: flex;
    flex-direction: column;
    gap: 2.4rem;
}

.footer-logo-box {

    grid-column: 1/3;
    margin-left: -0.6rem;
    transition: all 0.3s;
}

.footer-logo {
    width: 23rem;
    transition: all 0.3s;
}

.footer-logo:hover {
    transform: scale(1.05);
}

.footer-text {
    font-size: 1.8rem;
    text-decoration: none;
    color: #fff;
}

.footer-link {
    text-decoration: none;
    color: #fff;
    font-size: 1.8rem;
    transition: all 0.3s;
}

.footer-link:hover {
    transform: scale(1.05);
}

.footer-social-box {
    margin-left: auto;
    margin-top: auto;
    display: flex;
    gap: 2.4rem;
}

.footer-social-logo {
    width: 3rem;
    transition: all 0.3s;
}
.footer-social-logo:hover {
    transform: scale(1.1);
}


.pci-background-colour {
    background-color: #1b3d42 !important;
}





/* -------JOBS-HERO------ */

.jobs-hero {
    padding: 14.6rem 0.6rem 4.8rem;
    margin-top: 9.6rem;

}

.jobs-hero-box {
    margin: 0 auto;
    max-width: 120rem;
}

.jobs-hero-container {
    display: flex;
    flex-direction: column;
    gap: 3.6rem;
    align-items: center;
    justify-content: center;
}

.jobs-hero-header {
    font-size: 9.6rem;
    color: #1b3d42;
    text-align: center;
    line-height: 0.9;
}

.jobs-hero-text {
    text-align: center;
    font-size: 2.4rem;
    color: #1b3d42;
    max-width: 80rem;
}

.jobs-hero-link {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #2e3c43;
    color: #a5e9de;
    text-decoration: none;
    font-size: 2.4rem;
    text-align: center;
    padding: 0.6rem 2.4rem;
    border-radius: 6px;
    transition: all 0.3s;
}

.jobs-hero-link:hover {
    background-color: #a5e9de;
    color: #2e3c43;
}

.jobs-hero-link:hover > .cloud-hero-arrow {
    filter: brightness(0%);
}

.cloud-hero-arrow {
    filter: brightness(100%);
    width: 2rem;
    margin-bottom: -0.2rem;
    margin-left: 1rem;
    transition: all 0.3s;
}

/* -------PCI-HERO------ */


.pci-hero-link {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #dbffc7;
    color: #2e3c43;
    text-decoration: none;
    font-size: 2.4rem;
    text-align: center;
    padding: 0.6rem 2.4rem;
    border-radius: 6px;
    transition: all 0.3s;
}

.pci-hero-link:hover {
    background-color: #1b3d42;
    color: #dbffc7;
}

.pci-hero-link:hover > .pci-hero-arrow {
    filter: brightness(100%);
}

.pci-hero-arrow {
    filter: brightness(0%);
    width: 2rem;
    margin-bottom: -0.2rem;
    margin-left: 1rem;
    transition: all 0.3s;
}

.pci-hero-logos {
    display: flex;
    gap: 4.8rem;
    margin-bottom: 4.8rem;
}

.landscape-logo {
    height: 7rem;
    align-self: center;
}

.assessments-logo {
    width: 28.6rem;
    height: 100%;
    align-self: flex-end;
}

.pci-hero-logo {
    width: 11rem;
}

.pci-hero-logo-landscape {
    width: 13rem;
}

/* //////////JOBS-DUO//////////// */

.jobs-duo {
    padding: 4.8rem 0.6rem;
    background-color: #fafafa;
}

.jobs-duo-box {
    margin: 0 auto;
    max-width: 140rem;
}

.jobs-duo-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 4.8rem;
    row-gap: 4.8rem;
    justify-items: center;
    align-items: center;
}

.jobs-duo-text-box {
    display: flex;
    flex-direction: column;
    gap: 3.6rem;
}

.jobs-duo-header {
    font-size: 6rem;
    color: #333;
}

.jobs-duo-text {
    font-size: 2.2rem;
    color: #555;
}

.jobs-duo-img {
    margin-left: auto;
    width: 50rem;
    border-radius: 13px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.386);
}

#rowing-img {
    margin-right: auto;
    margin-left: 0;
    align-self: center;
}

.jobs-ul {
    list-style-type: none;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.duo-list-arrow {
    width: 2.4rem;
    height: 2.4rem;
    margin-right: 2rem;
    margin-top: 0.5rem;
}

.jobs-duo-list-text {
    font-size: 2.6rem;
    color: #333;
    display: flex;
    line-height: 1.2;
}

.white-background {
    background-color: #fff;
}

/* //////////SEXTUPLE//////////// */

.services-sextuple {
    padding: 30rem 0.6rem 4.8rem;
    background-color: #2e3c43;

}

.sextuple {
    padding: 9.6rem 0.6rem;
    background-color: #2e3c43;
}

.sextuple-box {
    margin: 0 auto;
    max-width: 140rem;
}

.sextuple-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 9.6rem;
    align-content: center;
    justify-items: center;
}

.sextuple-header {
    font-size: 6rem;
    color: #a5e9de;
    text-align: center;
    grid-column: 1/4;
}

.sextuple-caption {
    grid-column: 1/4;
    font-size: 2.4rem;
    margin-top: -4.8rem;
}

.sextuple-item {
    display: flex;
    flex-direction: column;
    gap: 2.4rem;
    /* justify-content: flex-end; */
}

.sextuple-item-header-box {
    display: flex;
    gap: 2.4rem;
    align-items: center;
}

.sextuple-arrow {
    width: 2.4rem;
    height: 2.4rem;
}

.sextuple-item-header {
    font-size: 3rem;
    color: #a5e9de;
}

.sextuple-text {
    font-size: 2rem;
    color: #fff;
}

/* //////////SEXTUPLE//////////// */

.pci-sextuple {
    padding: 4.8rem 0.6rem 4.8rem;
    background-color: #1b3d42;

}

.green-text {
    color: #dbffc7;
}

.pci-header {
    font-size: 6rem;
    color: #fff;
    text-align: center;
    grid-column: 1/4;
    line-height: 1.1;
}

.pci-item-header {
    font-size: 2.4rem;
    color: #dbffc7;
    font-weight: bold;
}


/* //////////TEAM-PHOTO//////////// */

.team-photo {
    margin: 0 0 0rem;
    background: linear-gradient(0deg, #97c1d7a5, #5e7a877b), url('/imgs/collage-two.jpg');
    background-size: cover;
    background-position: center;
    height: 80rem;
}

/* //////////JOBS-CAROUSEL//////////// */

.jobs-carousel {
    padding: 4.8rem 3.6rem 20rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.jobs-carousel-box {
    margin: 0 auto;
    max-width: 140rem;
    display: flex;
    flex-direction: column;
    gap: 4.8rem;
    justify-content: center;
}

.jobs-carousel-header {
    color: #2e3c43;
    font-size: 7.2rem;
    text-align: center;
}

.jobs-carousel-container {
    display: flex;
    overflow: hidden;
    max-width: 100%;
    position: relative;
}

.jobs-carousel-left-arrow-box, .jobs-carousel-right-arrow-box {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.jobs-carousel-item {
    display: flex;
    flex-direction: column;
    flex: 0 0 100%;
    max-width: 100%;
    transition: transform 0.6s ease-in-out;
}

                
.clients-carousel {
    padding: 4.8rem 0.6rem;
    display: none;
}





.jobs-carousel-text {
    font-size: 3.6rem;
    color: #2e3c43;
    font-weight: 100;
    text-align: center;
}

.jobs-carousel-name {
    font-size: 3.6rem;
    color: #2e3c43;
    text-align: center;
    font-weight: bold;
    margin-top: 1.2rem;
}

.jobs-carousel-right-arrow-box,
.jobs-carousel-left-arrow-box {
    margin-top: auto;
    margin-bottom: auto;
}

.jobs-carousel-arrow:hover {
    transform: scale(1.1);
    cursor: pointer;
}

.jobs-carousel-right-arrow {
    width: 4rem;
    transition: all 0.3s;
}

.jobs-carousel-left-arrow {
    width: 4rem;
    transition: all 0.3s;
}


/* -------SERVICES-CAROUSEL------ */

.services-carousel-container {
    display: flex;
    justify-content: center;
    gap: 4.8rem;
}

.services-carousel-item {
    display: grid;
    grid-template-columns: 1.5fr 3fr;
    box-shadow: 1rem 1rem 1rem 1rem #33333362;
    max-width: 110rem;
    margin-bottom: -40rem;
    border-radius: 23px;
}

.services-carousel-sub {
    display: flex;
    flex-direction: column;
    gap: 3.6rem;
    background-color: #dbffc7;
    padding: 2.4rem;
    border-radius: 13px;
    border-bottom-right-radius: 0;
}

.carousel-sub-img {
    width: 4rem;
}

.carousel-sub-header {
    font-size: 3.6rem;
    color: #1b3d42;
}

.carousel-sub-text {
    font-size: 2rem;
    color: #1b3d42;
}

.services-carousel-main {
    font-size: 3.6rem;
    color: #1b3d42;
    padding:  7.2rem 4.8rem;
    display: flex;
    flex-direction: column;
    gap: 3.6rem;
    background-color: #fff;
    border-radius: 13px;
    border-bottom-left-radius: 0;

}

.carousel-main-header {
    font-size: 4.8rem;
    color: #1b3d42;
    line-height: 1.1;
}

.carousel-main-text {
    font-size: 2rem;
    color: #1b3d42;
}

.carousel-main-link {
    margin-left: auto;
    align-self: flex-end;
    justify-self: flex-end;
    background-color: #dbffc7;
    color: #2e3c43;
    text-decoration: none;
    font-size: 2.4rem;
    padding: 0.6rem 2.4rem;
    border-radius: 6px;
    margin-top: 4.8rem;
    transition: all 0.3s;
}

.carousel-main-link:hover {
    background-color: #2e3c43;
    color: #dbffc7;
}

.carousel-main-link:hover > .carousel-main-link-arrow {
    filter: brightness(100%);
}

.carousel-main-link-arrow {
    filter: brightness(0%);
    width: 2rem;
    margin-bottom: -0.2rem;
    margin-left: 1rem;
    transition: all 0.3s;
}

.services-carousel-arrow {
    margin-top: -9.6rem;
}

#services-right-arrow {
    margin-left: auto;
}

#services-left-arrow {
    margin-right: auto;
}

/* -------FAQ------ */

.faq {
    background-color: #fafafa;
    padding: 9.6rem 0.6rem;
}

.faq-box {
    margin: 0 auto;
    max-width: 140rem;
}

.faq-container {
    display: flex;
    flex-direction: column;
    gap: 2.4rem;
}

.faq-text-box {
    display: flex;
    flex-direction: column;
    gap: 3.6rem;
    align-items: center;
    justify-content: center;
    max-width: 60rem;
    margin: auto;
    padding-bottom: 4.8rem;
}

.faq-header {
    color: #1b3d42;
    font-size: 4.8rem;
}

.faq-text {
    font-size: 2.4rem;
    color: #1b3d42;
    text-align: center;
}

.faq-link {
    background-color: #1b3d42;
    color: #dbffc7;
    text-decoration: none;
    font-size: 2.4rem;
    text-align: center;
    padding: 0.6rem 2.4rem;
    border-radius: 6px;
    transition: all 0.3s;
}

.faq-link:hover {
    background-color: #dbffc7;
    color: #1b3d42;
}

.faq-link:hover > .faq-arrow {
    filter: brightness(0%);
}

.faq-arrow {
    width: 2rem;
    margin-bottom: -0.3rem;
    margin-left: 1rem;
}

.faq-item {
    display: flex;
    flex-direction: column;
}

.hidden-faq {
    display: none;
}
  
.hidden-faq-btn {
    cursor: pointer;
    align-self: center;
    font-size: 3.6rem;
    font-weight: bold;
}
  
.faq-item-hidden {
    opacity: 0;
    padding: 1.2rem 0;
    transition: opacity 1s ease-in-out;
}
  
.faq-item.visible {
    opacity: 1;
}

.accordion-arrow {
    margin-left: auto;
    width: 4.2rem;
    padding-left: 1.2rem;
}

.accordion {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    color: #1b3d42;
    cursor: pointer;
    padding: 2.4rem 2.4rem;    
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 3.6rem;
    border-radius: 13px;
    transition: 0.4s;
  }


  

  .accordion:hover {
    background-color: #dbffc7; 
  }

  .accordion-style-two:hover {
    background-color: #f5f2ed;
  }

  .accordion-style-three:hover {
    background-color: #e0f7ff;
  }

  .active {
    background-color: #fff;
  }
  
  .panel {
    padding: 2.4rem 2.4rem 4.8rem;
    display: none;
    background-color: #fff;
    overflow: hidden;
    font-size: 2.4rem;
    color: #1b3d42;
    border-radius: 13px;
  }


/* -------TESTIMONIALS------ */

.testimonials {
    padding: 9.6rem 0.6rem 19.2rem;
}

.testimonials-box {
    margin: 0 auto;
    max-width: 160rem;
}

  .testimonials-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 4.8rem;
}

  .testimonials-item {
    padding: 2.4rem;
    display: flex;
    flex-direction: column;
    gap: 2.4rem;
    border-radius: 13px;
    border: 3px solid #fafafa;
}

.testimonials-heading-box {
    display: flex;
    gap: 0.6rem;
    align-items: center;
}

.testimonial-img {
    border-radius: 50%;
    width: 5rem;
    height: 5rem;
}

.testimonials-heading-text {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.testimonials-name {
    font-size: 2.4rem;
    line-height: 0.6;
    color: #333;
}

.testimonials-source {
    font-size: 1.8rem;
    line-height: 1.1;
    color: #777;
}

.testimonials-text {
    font-size: 1.8rem;
    color: #333;
}


/* //////////BOXLET//////////// */

.boxlet {
    padding: 2.4rem 0.6rem;
    display: flex;
    flex-direction: column;
    background-color: #2e3c43;
}

.boxlet-upper {
    display: flex;
    flex-direction: column;
    gap: 2.4rem;
    padding: 0rem 0.6rem 2.4rem;
    align-items: center;
    justify-content: center;
    max-width: 100rem;
    margin: 0 auto;
}

.boxlet-title {
    font-size: 6rem;
    color: #333;
    text-align: center;
}

.boxlet-upper-text {
    font-size: 2.2rem;
    color: #333;
    text-align: center;
}

.boxlet-box {
    margin: 0 auto;
    max-width: 106rem;
}

.boxlet-container {
    display: grid;
    grid-template-columns: 2.3fr 1fr ;
    align-items: center;
    justify-content: center;
    column-gap: 2.4rem;
}

.boxlet-container-two {
    display: grid;
    grid-template-columns: 1fr 2.2fr ;
    align-items: center;
    justify-content: center;
    column-gap: 2.4rem;
}

.boxlet-img {
    width: 30rem;
    border-radius: 6px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.386);
}

.boxlet-text-box {
    display: flex;
    flex-direction: column;
    gap: 2.4rem;
    padding: 3.6rem;

    /* width: 50rem; */
}

.boxlet-header {
    font-size: 3.6rem;
    color: #a5e9de;
    text-align: center;
}

.boxlet-text {
    font-size: 2rem;
    color: #fff;
    text-align: center;
}

.boxlet-social-link {
    margin-left: auto;
}

.boxlet-icon {
    width: 3rem;
    transition: all 0.3s;
}

.boxlet-icon:hover {
    transform: scale(1.1);
}


/* -------CTA SECTION------ */

.cta {
    padding: 9.6rem 0.6rem 9.6rem;
    display: grid;
    background-color: #dfd5a5;
}



.cta-box {
    margin: 0 auto;
    max-width: 120rem;
}

.cta-container {
    display: grid;
    grid-template-columns: 1fr 2fr;
    column-gap: 3rem;
    align-items: center;
    justify-content: center;
}

.cta-form-page {
    justify-self: center;
    width: 70rem;
}

.cta-text {
    align-self: center;
    display: flex;
    flex-direction: column;
    line-height: 3.2rem;
    color: #fff;
    align-self: center;
    justify-self: center;
}

.email {
    text-decoration: none;
    color: #fff;
}

.cta-heading {
    font-size: 4.8rem;
    color: #fff;
    text-align: center;
    margin-bottom: 2.4rem;
    margin-top: -2.4rem;
}

.cta-title {
    font-size: 4.8rem;
    color: #fff;
    text-align: center;
    font-weight: 100;
    margin-bottom: 1.2rem;
}

.cta-text-box {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    font-size: 2.4rem;
    text-align: center;
    padding: 1.2rem;
}

.cta-socials {
    align-self: center;
    justify-self: center;
    display: flex;
    gap: 6.2rem;
    padding: 3rem;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.input-box {
    border: none;
    border-bottom: 3px solid #a5e9de;
    resize: none;
    padding: 1.2rem;
}

.cta-form.input-box::placeholder {
    /* font-family: 'Quicksand', sans-serif; */
    color: #3a747e !important;
    opacity: 1;
    font-weight: 500;
}



.message-input {
    height: 12rem;
}

.cta-form.message-input::placeholder {
    /* font-family: 'Quicksand', sans-serif; */
    color: #3a747e;
    font-weight: bold;
}

.submit-btn {
    width: 25%;
    align-self: flex-end;
    padding: 0.8rem;
    border-radius: 13px;
    border: none;
    background-color: #dfd5a5;
    border: 2px solid #fff;
    color: #fff;
    font-weight: bold;
    font-size: 2.4rem;
    font-family: 'Quicksand', sans-serif;
    cursor: pointer;
}


/* -------BLOG-BLOCK------ */

.blog-block-one {
    padding: 2.4rem 0.6rem;
}

.blog-block-one-box {
    margin: 0 auto;
    max-width: 120rem;
}

.blog-block-one-container {
    display: grid;
    grid-template-columns: 2fr 1fr;
    column-gap: 4.8rem;
}

.blog-block-item-minor-container {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    gap: 4.8rem;
}

.blog-block-item-main {
    display: flex;
    flex-direction: column;
    gap: 2.4rem;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.187);
    border-radius: 13px;
    overflow: hidden;
    transition: all 0.3s;
    text-decoration: none;
}

.blog-block-item-minor {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.183);
    border-radius: 13px;
    overflow: hidden;
    transition: all 0.3s;
    text-decoration: none;
}

.blog-block-item-main:hover,
.blog-block-item-minor:hover {
    transform: scale(1.05);
    background-color: #a5e9de11;
    cursor: pointer;
}

.blog-item-img {
    width: 100%;
    transition: all 0.3s;
}

.blog-item-img:hover {
    transform: scale(1.05);
}

.blog-type {
    font-size: 2.4rem;
    color: #777;
    padding: 0.6rem 2.4rem 0;
}

.blog-type-minor {
    font-size: 2rem;
    color: #777;
    padding: 0.6rem 1.2rem;
}

.blog-block-header {
    font-size: 3.6rem;
    color:#1b3d42;
    padding: 0.6rem 2.4rem;
}

.blog-block-header-minor {
    font-size: 2.4rem;
    color:#1b3d42;
    padding: 0.6rem 1.2rem 1.2rem;
}

.blog-arrow-minor {
    width: 2.2rem;
    align-self: flex-end;
    margin-top: -3rem;
    margin-right: 2.4rem;
    padding-bottom: 1.2rem;
}

.blog-arrow {
    width: 2.6rem;
    align-self: flex-end;
    margin-right: 4.8rem;
    transition: all 0.3s;
    margin-top: auto;
    padding-bottom: 1.2rem;
}

.blog-block-item-main:hover .blog-arrow {
    margin-right: 1.2rem;
}

.blog-topics {
    padding: 1.2rem;
}

.blog-topics-box {
    max-width: 160rem;
    margin: 0 auto;
}

.blog-topics-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.2rem;
}

.blog-topics-item {
    padding: 0.6rem 1.2rem;
    background-color: #1b3d42;
    color: #fff;
    font-size: 2.4rem;
    cursor: pointer;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
    box-shadow: 0 4px 8px rgba(255, 255, 255, 0.2);
    user-select: none;
}

.blog-topics-item.active {
    background-color: #fff;
    border: 2px solid #1b3d42;
    color: #1b3d42;
}

.blog-topics-item:hover {
    box-shadow: inset 0 4px 8px rgba(255, 255, 255, 0.3);
    transform: translateY(2px);
}

.active-filter {
    background-color: #fff;
    border: 2px solid #1b3d42;
    color: #1b3d42;
}

.filtered-blog {
    padding: 2.4rem;
}

.filtered-blog-box {
    margin: 0 auto;
    max-width: 160rem;
}

.filtered-blog-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 2.4rem;
    justify-content: center;
}

.filtered-item {
    display: none;
}

.filtered-item .blog-arrow-minor {
    display: none;
}


/* -------BLOG-PAGE------ */

.blog {
    padding: 4.8rem 0.6rem;
}

.blog-box {
    margin: 0 auto;
    max-width: 80rem;
}

.blog-container {
    display: flex;
    flex-direction: column;
    gap: 2.4rem;
}

.blog-title {
    font-size: 3.6rem;
    color: #1b3d42;
}

.blog-caption {
    font-size: 1.8rem;
    color: #777;
}

.blog-text-box {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.blog-header {
    font-size: 2.4rem;
    color: #333;
}

.blog-text {
    font-size: 1.8rem;
    color: #555;
}

.blog-return-box {
    display: flex;
    text-decoration: none;
    color: #1b3d42;
    font-size: 3rem;
    align-self: flex-end;
    margin-right: 4.8rem;
}

.blog-return-box:hover .services-arrow-one {
    margin-right: -4rem;
    margin-left: 6rem;
}

.blog-img {
    max-width: 80rem;
}

.blog-link {
    color: #333;
    font-weight: bold;
}

.blog-list {
    margin-left: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}


.spanish-services-header {
    font-size: 3.6rem !important;
}

.align-left {
    margin-right: auto;
}

/* pent cubes */

.pent-cubes {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 50px 20px;
    background-color: #f7f9fc; 
}

.pent-cubes-box {
    max-width: 1200px;
    width: 100%;
}

.pent-cubes-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    gap: 20px;
}

.pent-cubes-item {
    background-color: #ff6f61; 
    color: white;
    border-radius: 10px;
    padding: 20px;
    flex: 1 1 calc(33.333% - 40px); 
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.pent-cubes-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.15);
}

.pent-cubes-number {
    font-size: 36px;
    font-weight: bold;
    margin-bottom: 10px;
    text-align: center;
}

.pent-cubes-header {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 10px;
    text-align: center;
}

.pent-cubes-text {
    font-size: 16px;
    line-height: 1.6;
    text-align: center;
}

@media (max-width: 768px) {
    .pent-cubes-item {
        flex: 1 1 100%; 
    }

    .pent-cubes {
        padding: 30px 10px;
    }
}

.sixService {
    padding: 3.6rem 0.6rem;
}

.sixService-box {
    max-width: 160rem;
    margin: 0 auto;
}

.sixService-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    row-gap: 2.4rem;
    column-gap: 2.4rem;
}

@media (max-width: 800px) {
    .sixService-container {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 500px) {
    .sixService-container {
        grid-template-columns: 1fr;
    }
}

.sixService-item {
    overflow: hidden;
    border-radius: 13px;
}

.sixService-item-textbox {
    display: flex;
    flex-direction: column;
    padding: 1.2rem;
    gap: 1.2rem;
}

.sixService-item-textbox h3,
.sixService-item-textbox p {
    margin: 0;
}

.sixService-item-textbox h3 {
    font-size: 3.6rem;
}

.sixService-item > a > img:first-of-type {
    height: 12rem;
}

.sixServiceImgBox {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    height: 12rem;
    width: auto;
    display: block;
}

.assessmentOne {
    background-image: url('/imgs/assessments-one.jpg');
}

.assessmentTwo {
    background-image: url('/imgs/vulnerability-scan.jpg');
    background-position: top !important;
}

.assessmentThree {
    background-image: url('/imgs/security-scan.jpg');
}

.assessmentFour {
    background-image: url('/imgs/red-teaming.jpg');
}

.assessmentFive {
    background-image: url('/imgs/assessments-one.jpg');
}

.assessmentSix {
    background-image: url('/imgs/payment-security.jpg');
}

.cloudBlog-section {
  padding: 80px 20px;
  background-color: #f8f9fc;
}

.cloudBlog-container {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

.cloudBlog-title {
  font-size: 2.5rem;
  color: #142c53;
  margin-bottom: 10px;
}

.cloudBlog-subtitle {
  font-size: 1.1rem;
  color: #5a5a5a;
  margin-bottom: 40px;
}

.cloudBlog-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
}

.cloudBlog-card {
  background-color: #ffffff;
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
}

.cloudBlog-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.1);
}

.cloudBlog-image-box {
  width: 100%;
  height: 180px;
  overflow: hidden;
}

.cloudBlog-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cloudBlog-content {
  padding: 20px;
  text-align: left;
}

.cloudBlog-post-title {
  font-size: 1.8rem;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 10px;
}

.cloudBlog-description {
  font-size: 1.6rem;
  color: #4a4a4a;
}

.blogCluster-section {
  padding: 80px 20px;
  background-color: #ffffff;
}

.blogCluster-container {
  max-width: 1100px;
  margin: 0 auto;
}

.blogCluster-header {
  font-size: 2.4rem;
  font-weight: 700;
  color: #142c53;
  margin-bottom: 20px;
  text-align: center;
}

.blogCluster-intro {
  font-size: 1.1rem;
  color: #555;
  text-align: center;
  margin-bottom: 40px;
  max-width: 750px;
  margin-left: auto;
  margin-right: auto;
}

.blogCluster-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
}

.blogCluster-item {
  padding: 20px;
  border: 1px solid #e2e6ee;
  border-radius: 8px;
  background-color: #f8f9fc;
  transition: box-shadow 0.3s ease;
}

.blogCluster-item:hover {
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

.blogCluster-link {
  font-size: 1.1rem;
  font-weight: 600;
  color: #1a3e74;
  text-decoration: none;
  display: block;
  margin-bottom: 10px;
}

.blogCluster-link:hover {
  text-decoration: underline;
}

.blogCluster-description {
  font-size: 0.95rem;
  color: #444;
  line-height: 1.5;
}