/*

Theme Name: SGD

Author: JE Consulting

Author URI: https://www.je-consulting.co.uk/

Version: 1.0.0

*/
.header-extra {
    display: flex;
    gap: 10px;
    align-items: center;
}
#searchform {
    margin-bottom: 0;
    display: flex;
    align-items: center;
}
.SeachIcon i {
    color: #fff;
    background-color: transparent;
    border: 2px solid #fff;
    border-radius: 50%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 43px;
    font-size: 20px;
    cursor: pointer;
    transition: all .5s ease-in-out;
    min-width: 43px;
    min-height: 43px;
}
.SeachIcon i:hover {
    background-color: #fff;
    color: var(--darkblue);
}
.Button.PortalIcon {
    padding-right: 45px;
}
header .Button.ButtonWhite.PortalIcon:hover, header .Button.ButtonWhite.ButtonAlt:hover {
    background-color: var(--green);
}
header .Button.ButtonWhite.PortalIcon:hover svg path {
    transition: all .5s ease-in-out;
}
header .Button.ButtonWhite.PortalIcon:hover svg path {
    fill: #fff;
    stroke: #fff;
}
header .Button.ButtonWhite.ButtonAlt:hover svg {
    background-color: var(--darkblue);
}
.Button.ButtonAlt svg {
    background-color: var(--green);
    border-radius: 50px;
    padding: 6px 12px;
    font-size: 24px;
    box-sizing: unset;
    -webkit-tap-highlight-color: unset;
    transition: all .5s ease-in-out;
}
.Button.ButtonAlt svg path {
    stroke: #fff;
}
.Button.ButtonAlt {
    padding-right: 60px;
}
footer {
    background-color: var(--darkblue);
    padding: 100px 0;
}
body footer .container p, body footer .container li {
    color: #FFF;
    leading-trim: both;
    text-edge: cap;
    font-family: Figtree;
    font-size: 20px;
    font-style: normal;
    font-weight: 400;
    line-height: 33px; /* 165% */
}
footer h6, body footer .container .FooterRow3 p.LinkedinText {
    color: var(--green);
    leading-trim: both;
    text-edge: cap;
    font-size: 1.625rem;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}
.FlexText {
    display: flex;
    align-items: center;
    gap: 10px;
}
.FooterRow1 {
    margin-bottom: 50px;
}
footer .Flex {
    display: flex;
    gap: 35px;
}
.FooterRow2 {
    display: grid;
    grid-template-columns: 50% 24% 24%;
    gap: 2%;
}
.FooterRow2 > div {
    padding: 0 90px;
    border-right: 1px solid rgba(255, 255, 255, .3);
}
.FooterRow2 > div:first-child {
    padding-left: 0;
}
.FooterRow2 > div:last-child {
    padding-right: 0;
    border-right: 0;
}
.FooterRow2 p a {
    color: #fff;
}
footer .Button.ButtonWhite:hover {
    background-color: var(--teal);
}
body footer .container .FooterRow3 p {
    color: #FFF;
    leading-trim: both;
    text-edge: cap;
    font-family: Roboto;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: -0.12px;
}
.FooterRow3 {
    display: grid;
    grid-template-columns: 75% auto;
    gap: 90px;
    margin-top: 60px;
}
body footer .container .FooterRow3 p.LinkedinText {
    text-align: right;
}
.LegalFooter2 {
    text-align: right;
}
.LegalFooter2 i {
    font-size: 30px;
    color: #fff;
    transition: all .5s ease-in-out;
}
.LegalFooter2 a {
    display: block;
}
.LegalFooter2 a:hover i {
    color: var(--teal);
}
#menu-footer-legal-footer li:first-child a {
    padding-left: 0;
}
#menu-footer-legal-footer li:last-child a {
    border-right: 0;
    padding-right: 0;
}
#menu-footer-legal-footer li a {
    color: #FFF;
    leading-trim: both;
    text-edge: cap;
    font-family: Roboto;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: -0.12px;
    padding: 0 4px;
    border-right: 1px solid #fff;
}
#menu-footer-legal-footer li a:hover {
    color: var(--teal);
}
#menu-footer-legal-footer {
    display: flex;
    margin: 0;
    padding: 0;
    list-style-type: none;
}
.StarLi ul {
    list-style-type: none;
    padding-left: 30px;
}
.StarLi li {
    position: relative;
}
.StarLi li::before {
    content: "";
    background-image: url('img/LiStar.png');
    width: 18px;
    height: 18px;
    display: block;
    background-size: contain;
    position: absolute;
    left: -30px;
    top: 12px;
}
#WhiteCTAImg {
    position: relative;
}
#WhiteCTAImg::before {
    content: "";
    display: block;
    width: 178px;
    height: 208px;
    position: absolute;
    background-image: url('img/SGD-Symbol-White.png');
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
    right: 12%;
    bottom: -93px;
}
.WhatWeDoGrid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-template-rows: repeat(8, 1fr);
    gap: 12px;
    background-color: #fff;
}
.WhatWeDoGrid > * {
    width: 100%;
    /* Note: Remove aspect-ratio: 1 / 1 if a box spans multiple rows, 

     otherwise the ratio will force it square and ignore the row height! */
}
/* Individual Box Styling */
.WhatWeDoBox {
    border-radius: 15px;
    background: linear-gradient(108deg, #6AA338 0.82%, #C2D76B 99.34%);
    padding: 30px 25px;
    display: flex;
    align-items: end;
}
.WhatWeDoBox:nth-child(6n-5) {
    grid-column: 1 / span 4;
    grid-row: span 3;
}
.WhatWeDoBox:nth-child(6n-4) {
    grid-column: 5 / span 3;
    grid-row: span 4;
}
.WhatWeDoBox:nth-child(6n-3) {
    grid-column: 8 / span 5;
    grid-row: span 4;
}
.WhatWeDoBox:nth-child(6n-2) {
    grid-column: 1 / span 4;
    grid-row: span 5;
}
.WhatWeDoBox:nth-child(6n-1) {
    grid-column: 5 / span 4;
    grid-row: span 4;
}
.WhatWeDoBox:nth-child(6n) {
    grid-column: 9 / span 4;
    grid-row: span 4;
}
.WhatWeDoBox:nth-child(6n-3), .WhatWeDoBox:nth-child(6n-2) {
    background: linear-gradient(108deg, var(--Color-4, #001737) -0.03%, var(--Color-3, #118D85) 99.97%);
}
.WhatWeDoBox:nth-child(6n-4), .WhatWeDoBox:nth-child(6n) {
    background: var(--Linear, linear-gradient(126deg, var(--Color-4, #001737) 0%, rgba(4, 56, 80, 0.60) 100%));
}
.WhatWeDoNumber {
    color: #FFF;
    leading-trim: both;
    text-edge: cap;
    font-family: Figtree;
    font-size: 28px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
}
.WhatWeDoText {
    color: #FFF;
    leading-trim: both;
    text-edge: cap;
    font-family: Figtree;
    font-size: 24px;
    font-style: normal;
    font-weight: 300;
    line-height: normal;
}
.ButtonLi ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}
#WhoDoWeHelp {
    background-image: url('img/SGD-Symbol-Green-landscape.png');
    background-repeat: no-repeat;
    background-size: 300px;
    background-position: 85% 0%;
}
.ContactFromWrap .container {
    display: grid;
    grid-template-columns: 66% auto;
    gap: 30px;
}
.ContactFromImg {
    background-image: url('/wp-content/uploads/2026/10/SGD-Contact-Image.jpg');
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 15px;
    overflow: hidden;
}
.ContactFrom {
    display: grid;
    grid-template-columns: 33% auto;
    gap: 90px;
    border-radius: 15px;
    background: var(--Linear, linear-gradient(126deg, var(--Color-4, #001737) 0%, rgba(4, 56, 80, 0.60) 100%));
    padding: 60px;
    align-items: end;
}
.CFText p {
    color: #FFF;
    font-size: 28px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
}
.CFText p span {
    color: var(--green);
    font-size: 46px;
    font-style: normal;
    font-weight: 300;
    line-height: 50px;
    margin-top: 20px;
    display: block;
}
.gform_wrapper.gravity-theme .gfield input.large, .gform_wrapper.gravity-theme .gfield select.large, .gform_wrapper.gravity-theme .gfield textarea.large {
    border-radius: 6px;
    background: rgba(247, 247, 247, 0.25);
    border: 0;
    color: #fff;
    padding: 18px;
    font-family: 'Roboto';
}
body .gform_wrapper.gravity-theme .gfield textarea.large {
    min-height: 111px;
    height: 111px;
    min-width: 100%;
    max-width: 100%;
}
.gform_wrapper.gravity-theme .gfield_checkbox label, .gform_wrapper.gravity-theme .gfield_radio label {
    color: #FFF;
    font-family: Roboto;
    font-size: 15px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}
.ginput_container_checkbox .gchoice {
    margin-bottom: 20px;
}
.ginput_container_checkbox .gchoice:last-child {
    margin-bottom: 0;
}
.gform-footer .gform_button.button {
    background-color: #fff;
    border-radius: 50px;
    color: var(--textcolour);
    font-size: 16px;
    background-image: url(img/GFArrow.png);
    background-repeat: no-repeat;
    background-size: 16px;
    background-position: 84% 50%;
}
.gform-footer .gform_button.button:hover {
    background-color: var(--green);
    color: #fff;
}
body .gform_wrapper.gravity-theme .gform_footer, body .gform_wrapper.gravity-theme .gform_page_footer {
    padding-bottom: 0;
}
.header-extra-buttons {
    display: flex;
    align-items: center;
    gap: 10px;
}
.page-id-58 .ContactFromWrap {
    margin-top: 75px;
}
.ContactFromWrap {
    padding-bottom: 70px;
}
.HomeBanner {
    display: grid;
    grid-template-columns: auto 40%;
    gap: 100px;
}
.HomeBannerLeft {
    padding: 100px 0;
}
.HomeBannerLeft h1 {
    color: #fff;
    font-weight: 700;
}
/*
.HomeBannerLeft h1 span {
    background-color: var(--green);
    padding: 0px 7px;
    line-height: 65px;
    color: var(--darkblue);
    font-weight: 300;
}
*/
@keyframes highlightSlide {
    from {
        background-size: 0% 100%;
    }
    to {
        background-size: 100% 100%;
    }
}
.HomeBannerLeft h1 span {
    /* Create a solid color "gradient" so we can animate its size */
    background-image: linear-gradient(var(--green), var(--green));
    background-repeat: no-repeat;
    background-size: 0% 100%; /* Starts at 0 width */
    background-position: left center;
    /* Pro-tip: Ensures padding and background look correct if the text wraps onto two lines */
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    padding: 0px 7px;
    line-height: 65px;
    color: var(--darkblue);
    font-weight: 300;
    /* Trigger the animation on page load */
    animation: highlightSlide 2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: 0.5s; /* Optional: slight delay before it starts */
}
.HomeBannerButton {
    display: flex;
    gap: 20px;
}
.HomeBannerLeft hr {
    max-width: 200px;
    border-color: var(--green);
    margin: 50px 0;
}
.HomeBannerButton a.Button:hover {
    background-color: var(--green);
}
.HomeBannerLogo {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}
.HomeBannerLogo img {
    max-height: 57px;
}
.HomeBannerRight {
    position: relative;
}
/* Base Grid Setup */
.TeamGridBanner {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    position: absolute;
    width: 100%;
    top: var(--nav-height);
    border-radius: 0 0 10px 10px;
    overflow: hidden;
    mask-image: linear-gradient(to bottom, transparent 0%, var(--darkblue) 30%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, var(--darkblue) 30%);
}
.TeamGridItem {
    aspect-ratio: 1 / 1;
    background-color: var(--bg-color, #043850);
    position: relative;
}
.TeamGridItem img {
    display: block;
}
.TeamGridItem a {
    position: absolute;
    bottom: 0;
    left: 0;
}
.TeamGridItem {
    position: relative;
    overflow: hidden;
    aspect-ratio: 1 / 1;
}
.TeamGridBanner .team-member-card {
    position: absolute;
    inset: 0;
    display: block;
    transition: none !important; /* let jQuery handle the fading */
}
.TeamGridBanner .team-member-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: none !important;
}
/* Shared Pseudo-element for items with clip-paths */
.TeamGridBanner > :is( :nth-child(2), :nth-child(4), :nth-child(5), :nth-child(6), :nth-child(7), :nth-child(8), :nth-child(9), :nth-child(10), :nth-child(12), :nth-child(13), :nth-child(15), :nth-child(18), :nth-child(20), :nth-child(21), :nth-child(22), :nth-child(24), :nth-child(25), :nth-child(26), :nth-child(30), :nth-child(31), :nth-child(35), :nth-child(37), :nth-child(39), :nth-child(40))::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: var(--shape-color, var(--green));
    clip-path: var(--shape-clip);
}
/* Background Color Assignees */ :is(.TeamGridItem:nth-child(1), .TeamGridItem:nth-child(16), .TeamGridItem:nth-child(17), .TeamGridItem:nth-child(23), .TeamGridItem:nth-child(27), .TeamGridItem:nth-child(33), .TeamGridItem:nth-child(34), .TeamGridItem:nth-child(36)) {
    --bg-color: var(--green);
}
:is(.TeamGridItem:nth-child(14), .TeamGridItem:nth-child(28), .TeamGridItem:nth-child(32)) {
    --bg-color: var(--teal);
}
:is(.TeamGridItem:nth-child(24), .TeamGridItem:nth-child(26), .TeamGridItem:nth-child(30)) {
    --bg-color: #fff;
}
/* Clip Shapes */ :is(.TeamGridItem:nth-child(5), .TeamGridItem:nth-child(6), .TeamGridItem:nth-child(7), .TeamGridItem:nth-child(13), .TeamGridItem:nth-child(15), .TeamGridItem:nth-child(18), .TeamGridItem:nth-child(21), .TeamGridItem:nth-child(26), .TeamGridItem:nth-child(40))::before {
    --shape-clip: polygon(0 0, 100% 0, 100% 100%);
}
:is(.TeamGridItem:nth-child(10), .TeamGridItem:nth-child(31), .TeamGridItem:nth-child(35))::before {
    --shape-clip: polygon(0 0, 100% 0, 0 100%);
}
:is(.TeamGridItem:nth-child(2), .TeamGridItem:nth-child(4), .TeamGridItem:nth-child(8), .TeamGridItem:nth-child(12), .TeamGridItem:nth-child(20), .TeamGridItem:nth-child(22), .TeamGridItem:nth-child(24), .TeamGridItem:nth-child(25), .TeamGridItem:nth-child(37), .TeamGridItem:nth-child(39))::before {
    --shape-clip: polygon(0 0, 100% 100%, 0 100%);
}
:is(.TeamGridItem:nth-child(9), .TeamGridItem:nth-child(30))::before {
    --shape-clip: polygon(100% 0, 100% 100%, 0 100%);
}
/* Shape Color Overrides */ :is(.TeamGridItem:nth-child(4), .TeamGridItem:nth-child(5), .TeamGridItem:nth-child(13), .TeamGridItem:nth-child(18), .TeamGridItem:nth-child(21), .TeamGridItem:nth-child(22), .TeamGridItem:nth-child(25), .TeamGridItem:nth-child(31), .TeamGridItem:nth-child(39), .TeamGridItem:nth-child(40))::before {
    --shape-color: var(--teal);
}
:is(.TeamGridItem:nth-child(26), .TeamGridItem:nth-child(30))::before {
    --shape-color: #043850;
}
.PageHeading {
    background-color: var(--darkblue);
    padding: 75px 0;
}
.single-member .PageHeading {
    padding: 0;
}
.single-member .navBar {
    padding-bottom: 30px;
}
.PageHeading .container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 100px;
}
.container.NoFeaturedImage {
    display: ;
}
.PageHeading h1 {
    font-weight: 700;
}
.PageHeading h1, .PageHeading p {
    color: #fff;
}
/*
.PageHeading .SubTitle {
    color: var(--darkblue);
    font-size: 28px;
    display: inline;
    background-color: #68A33C;
    padding: 4px 12px;
    line-height: 1.8;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}
*/
.PageHeading .SubTitle {
    color: var(--darkblue);
    font-size: 28px;
    display: inline;
    /* Replace background-color with the gradient trick */
    background-image: linear-gradient(#68A33C, #68A33C);
    background-repeat: no-repeat;
    background-size: 0% 100%; /* Starts at 0 width */
    background-position: left center;
    padding: 4px 12px;
    line-height: 1.8;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    /* Trigger the animation on page load */
    animation: highlightSlide 2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: 0.5s; /* Optional: adjust delay if needed */
}
.PageHeadingText p:first-child {
    padding-top: 10px;
}
.PageHeadingText {
    margin-bottom: 20px;
}
.PageHeaderRight {
    background-position: center center;
    background-size: cover;
    border-radius: 15px;
    position: relative;
    overflow: hidden;
}
.PageHeaderRight:after {
    content: "";
    background-image: url(img/WhiteCornerIcon.png);
    width: 276px;
    height: 181px;
    position: absolute;
    bottom: 0;
    left: 0;
}
.PageHeaderRight:before {
    background: #6AA338;
    background: radial-gradient(circle at bottom left, rgba(106, 163, 56, 1) 0%, rgba(0, 0, 0, 0) 35%);
    content: "";
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
}
.BlueStar {
    position: relative;
    padding-left: 30px;
}
.BlueStar::before {
    content: "";
    background-image: url('img/BlueStar.svg');
    width: 20px;
    height: 21px;
    display: block;
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    top: 20px;
    left: 0;
}
.PageHeadingButton {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}
.PageHeadingButton .Button:hover {
    background-color: var(--green);
}
.values-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 50px 30px;
    margin: 40px auto;
    padding: 50px 0px;
    border: 3px solid #ffffff;
    border-radius: 20px;
    box-sizing: border-box;
}
.value-item {
    text-align: center;
}
.value-item h3 {
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 12px;
}
.value-item p {
    font-size: 18px;
    font-style: italic;
    line-height: 1.4;
    color: #e2e8f0;
    max-width: 280px;
    margin: 0 auto;
}
.underline {
    display: inline-block;
    padding-bottom: 4px;
    border-bottom: 5px solid transparent;
}
/* Individual colors for underlines */
.blue-line {
    border-bottom-color: #118d85; /* Blue underline */
}
.white-line {
    border-bottom-color: #ffffff; /* White underline */
}
.green-line {
    border-bottom-color: #6aa338; /* Green underline */
}
.team-list-container {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 60px;
}
/*
.team-member-card .member-photo img {
    width: 250px;
    height: 250px;
    border-radius: 50%;
    overflow: hidden;
    display: inline-block;
}
*/
.PageWrap.MainWrap.TeamListingWrap {
    padding: 100px 0;
}
.job-title {
    color: #68A33C;
    margin-top: 10px;
}
.member-info {
    text-align: center;
}
.TeamListingWrap .team-member-card {
    padding-bottom: 42px;
}
.team-member-card {
    position: relative;
/*    padding-bottom: 42px;*/
}
.team-member-card .Button {
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 0;
}
.member-info span {
    color: #001737;
    font-size: 32px;
    font-weight: 600;
}
.member-photo {
    text-align: center;
    background-color: #eee;
    width: 250px;
    height: 250px;
    border-radius: 20px;
    overflow: hidden;
    margin: 0 auto 30px;
}
.bio {
    margin-bottom: 20px;
}
.container.TeamContainer {
    display: block;
}
.TeamTitleWrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.TeamTitleRight img {
    text-align: center;
    background-color: #eee;
    width: 250px;
    height: 250px;
    border-radius: 20px;
    overflow: hidden;
    margin: 0 auto 30px;
}
.article-featured-image {
    display: block;
    width: 100%;
    height: 200px;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 20px;
    margin-bottom: 20px;
    position: relative;
}
.article-featured-image.article-no-featured-image {
    background-position: center center;
    background-size: 70%;
    background-color: var(--darkblue);
    background-image: url('/wp-content/themes/sgd/img/SGDLogoW.svg');
}
.ArticleDate {
    color: #999;
    border-radius: 50px;
}
.single .PageHeaderRight {
    min-height: 300px;
}
.single .PageHeading .container {
    align-items: center;
}
.SearchBox {
    display: none
}
.nav-pagination.custom-posts-nav {
    text-align: center;
    margin-top: 100px;
}
.TestimonialsWrap {
    padding: 70px 0;
    margin-bottom: 70px;
}
.testimonials-grid {
    background-color: #fff;
    border-radius: 25px;
    padding: 50px;
}
.testimonial-content p {
    color: var(--textcolour);
}
.testimonials-grid p.testimonial-author {
    color: var(--textcolour);
    margin-top: 30px;
}
.testimonials-grid .slick-dots {
    ;
    bottom: -40px;
}
.testimonials-grid .slick-dots li button::before {
    display: none;
}
.testimonials-grid .slick-dots li.slick-active button {
    opacity: 1;
}
.testimonials-grid .slick-dots li button {
    background-color: #fff;
    border-radius: 50%;
    opacity: .5;
    width: 10px;
    height: 10px;
    transition: all .5s ease-in-out;
}
.TeamTitleRight {
    position: relative;
}
.TeamTitleRight img {
    position: relative;
}
.TeamInnerWrap {
    display: grid;
    gap: 100px;
    grid-template-columns: clamp(0px, 100%, 250px) auto;
}
.TeamInnerDetails img {
    background-color: #eee;
    border-radius: 10px;
    overflow: hidden;
    margin-bottom: 20px;
    display: block;
}
.TeamInnerDetails h1 {
    margin-bottom: 0;
}
.TeamMeta {
    border-top: 1px solid var(--darkblue);
    padding-top: 20px;
}
.mosaic-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    grid-auto-rows: 200px;
    grid-auto-flow: dense;
    gap: 16px;
    margin: 0 auto;
}
.mosaic-item {
    position: relative;
    overflow: hidden;
    border-radius: 12px;
    background-color: #1a1d24;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.mosaic-item:hover {
    transform: translateY(-4px);
    z-index: 2;
}
.mosaic-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}
.mosaic-item:hover img {
    transform: scale(1.05);
}
/* Mosaic Tile Sizing Rules (Desktop) */
@media (min-width: 768px) {
    .mosaic-item.tall {
        grid-row: span 2;
    }
    .mosaic-item.wide {
        grid-column: span 2;
    }
    .mosaic-item.big {
        grid-row: span 2;
        grid-column: span 2;
    }
}
.ExpertsTitle {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
.ExpertsWrap {
    margin-bottom: 75px;
}
.ExpertsTitle h2 {
    margin-bottom: 0;
}
.ExpertArrows i {
    background-color: var(--green);
    border-radius: 5px;
    padding: 7px 10px;
    font-size: 22px;
    color: #fff;
    cursor: pointer;
    transition: all .5s ease-in-out;
}
.ExpertArrows i:hover {
    background-color: var(--darkblue);
}
.ExpertArrows {
    display: flex;
    align-items: center;
    gap: 10px;
}
/* Resonsive Code */
.MobileNav, .MobileMenu {
    display: none;
}
.MobileMenu i {
    color: #fff;
    font-size: 25px;
    background-color: var(--green);
    padding: 6px;
    border-radius: 3px;
    cursor: pointer;
}
.MobileNav {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 99999;
    background-color: rgba(0, 0, 0, .8);
    height: 100%;
    width: 100%;
    padding: 20px;
}
.MobileNav .sub-menu {
    display: none
}
.MobileNav ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
}
.MobileNav .menu li a {
    color: #fff;
    border-bottom: 1px solid;
    width: 100%;
    display: block;
    position: relative;
    padding: 5px 0;
}
.MobileNav .menu li a i {
    position: absolute;
    right: 0;
    background-color: var(--teal);
    width: 25px;
    height: 25px;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 6px;
}
.MobileNav .menu .sub-menu li a {
    padding-left: 10px;
}
.MobileNav .menu > li:last-child > a {
    border-bottom: 0;
}
.MobileNavExtra {
    margin-top: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 20px;
}
.MobileNav .Cross i {
    color: #fff;
    background-color: var(--green);
    font-size: 21px;
    text-align: center;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
}
.Cross {
    display: flex;
    justify-content: right;
    margin-bottom: 30px;
}
/* Extra small devices (phones up to 480px) */
@media screen and (max-width: 480px) {
    .TeamInnerWrap {
        gap: 30px;
        grid-template-columns: repeat(1, 1fr);
    }
    .team-list-container {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 60px;
    }
    .postContentWrap .h5 {
        font-size: 22px;
    }
    .PageHeading .container {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 50px;
    }
    .PageHeaderRight {
        min-height: 200px;
    }
    .CFText p span, .CFText p {
        font-size: 28px;
        display: unset;
    }
    .HomeBannerLeft {
        padding: 50px 0;
    }
    .CFText svg {
        width: 100px;
        height: 60px;
    }
    .MobileMenu {
        display: block;
    }
    .Logo {
        display: flex;
        align-items: center;
        gap: 20px;
    }
    .HomeBanner {
        display: block;
    }
    .HomeBannerRight {
        display: none;
    }
    .WhatWeDoGrid {
        display: flex;
        flex-wrap: wrap;
    }
    .ContactFromWrap .container {
        display: block;
    }
    .ContactFrom {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        padding: 30px;
        gap: 30px;
    }
    .FooterRow2 {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 30px;
    }
    .FooterRow2 > div {
        padding: 0;
        border-right: 0;
    }
    .FooterRow3 {
        grid-template-columns: repeat(1, 1fr);
        gap: 30px;
    }
    .LegalFooter2 {
        text-align: left;
    }
    body footer .container .FooterRow3 p.LinkedinText {
        text-align: left;
    }
    body footer .container .FooterRow3 p.LinkedinText + a {
        margin-bottom: 20px;
    }
    .navBar nav {
        display: none;
    }
    .header-extra {
        display: none;
    }
}
/* Standard mobile phones (up to 576px) */
@media screen and (max-width: 576px) {
    .TeamInnerWrap {
        gap: 30px;
        grid-template-columns: repeat(1, 1fr);
    }
    .team-list-container {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 60px;
    }
    .postContentWrap .h5 {
        font-size: 22px;
    }
    .PageHeading .container {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 50px;
    }
    .PageHeaderRight {
        min-height: 200px;
    }
    .CFText p span, .CFText p {
        font-size: 28px;
        display: unset;
    }
    .HomeBannerLeft {
        padding: 50px 0;
    }
    .CFText svg {
        width: 100px;
        height: 60px;
    }
    .MobileMenu {
        display: block;
    }
    .Logo {
        display: flex;
        align-items: center;
        gap: 20px;
    }
    .HomeBanner {
        display: block;
    }
    .HomeBannerRight {
        display: none;
    }
    .WhatWeDoGrid {
        display: flex;
        flex-wrap: wrap;
    }
    .ContactFromWrap .container {
        display: block;
    }
    .ContactFrom {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        padding: 30px;
        gap: 30px;
    }
    .FooterRow2 {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 30px;
    }
    .FooterRow2 > div {
        padding: 0;
        border-right: 0;
    }
    .FooterRow3 {
        grid-template-columns: repeat(1, 1fr);
        gap: 30px;
    }
    .LegalFooter2 {
        text-align: left;
    }
    body footer .container .FooterRow3 p.LinkedinText {
        text-align: left;
    }
    body footer .container .FooterRow3 p.LinkedinText + a {
        margin-bottom: 20px;
    }
    .navBar nav {
        display: none;
    }
    .header-extra {
        display: none;
    }
}
}
/* Tablets and large phones (up to 768px) */
@media screen and (max-width: 768px) {
    .TeamInnerWrap {
        gap: 30px;
        grid-template-columns: repeat(1, 1fr);
    }
    .team-list-container {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 60px;
    }
    .postContentWrap .h5 {
        font-size: 22px;
    }
    .PageHeading .container {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 50px;
    }
    .PageHeaderRight {
        min-height: 200px;
    }
    .CFText p span, .CFText p {
        font-size: 28px;
        display: unset;
    }
    .HomeBannerLeft {
        padding: 50px 0;
    }
    .CFText svg {
        width: 100px;
        height: 60px;
    }
    .MobileMenu {
        display: block;
    }
    .Logo {
        display: flex;
        align-items: center;
        gap: 20px;
    }
    .HomeBanner {
        display: block;
    }
    .HomeBannerRight {
        display: none;
    }
    .WhatWeDoGrid {
        display: flex;
        flex-wrap: wrap;
    }
    .ContactFromWrap .container {
        display: block;
    }
    .ContactFrom {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        padding: 30px;
        gap: 30px;
    }
    .FooterRow2 {
        display: grid;
        grid-template-columns: repeat(1, 1fr);
        gap: 30px;
    }
    .FooterRow2 > div {
        padding: 0;
        border-right: 0;
    }
    .FooterRow3 {
        grid-template-columns: repeat(1, 1fr);
        gap: 30px;
    }
    .LegalFooter2 {
        text-align: left;
    }
    body footer .container .FooterRow3 p.LinkedinText {
        text-align: left;
    }
    body footer .container .FooterRow3 p.LinkedinText + a {
        margin-bottom: 20px;
    }
    .navBar nav {
        display: none;
    }
    .header-extra {
        display: none;
    }
}
/* Laptops and small desktops (up to 992px) */
@media screen and (max-width: 992px) {
    .TeamInnerWrap {
	gap: 30px;
	grid-template-columns: repeat(1,1fr);
}
    .team-list-container {
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	gap: 60px;
}
    .postContentWrap .h5 {
	font-size: 22px;
}
    .PageHeading .container {
	display: grid;
	grid-template-columns: repeat(1, 1fr);
	gap: 50px;
}
    .PageHeaderRight {
	min-height: 200px;
}
 .CFText p span, .CFText p {
	font-size: 28px;
	display: unset;
}
    .HomeBannerLeft {
	padding: 50px 0;
}
    .CFText svg {
	width: 100px;
	height: 60px;
}
    .MobileMenu{
        display: block;
    }
    .Logo {
	display: flex;
	align-items: center;
	gap: 20px;
}
    .HomeBanner {
	display: block;
}
    .HomeBannerRight {
	display: none;
}
    .WhatWeDoGrid {
	display: flex;
	flex-wrap: wrap;
}
    .ContactFromWrap .container {
	display: block;
}
.ContactFrom {
	display: grid;
	grid-template-columns: repeat(1,1fr);
	padding: 30px;
	gap: 30px;
}
    .FooterRow2 {
	display: grid;
	grid-template-columns: repeat(1,1fr);
	gap: 30px;
}
    .FooterRow2 > div {
	padding: 0;
	border-right: 0;
}
    .FooterRow3 {
	grid-template-columns: repeat(1,1fr);
	gap: 30px;
}
    .LegalFooter2 {
	text-align: left;
}
    body footer .container .FooterRow3 p.LinkedinText {
	text-align: left;
}
    body footer .container .FooterRow3 p.LinkedinText + a {
	margin-bottom: 20px;
}
    .navBar nav {
	display: none;
}
    .header-extra{
        display: none;
    }
}
}
/* Device = Low Resolution Tablets, Mobiles (Landscape) */
@media (min-width: 481px) and (max-width: 767px) {
    .values-container {
        grid-template-columns: 1fr;
        gap: 35px;
        padding: 30px 15px;
        margin: 20px 10px;
    }
    .value-item h3 {
        font-size: 24px; /* Slightly smaller heading for mobile screens */
    }
    .value-item p {
        font-size: 16px; /* Slightly smaller text for better readability on small screens */
    }
}