@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');


:root {
    --card3: #50b4cc;
    /* teal blue */
    --card3alt: ##1E6B9D;
    /* dark blue */
    --card2: #b3c385;
    /* sage green */
    --card1: #f5cf52;
    /* golden yellow */
    --dark: #0e1822;
    /* near-black navy */
    --light: #fcfcfe;
    /* off-white */
    --sky-blue: #16A1DA;

    --color-1: #e0413e;
    /* red */
    --color-2: #f16c27;
    /* orange */
    --color-3: #e2596b;
    /* pink/rose */
    --color-4: #be6f9f;
    /* mauve/purple */

    --cta-hero: #f16a27b9;
    /* orange */

  

    --text-h1: 3.5rem;
    /* 56px — hero headline */
    --text-h2: 2rem;
    /* 32px — section subheadline */
    --text-h3: 1.5rem;
    /* 24px — card headline */
    --text-h4: 1.125rem;
    /* 18px — card subheadline */
    --text-h5: 1rem;
    /* 16px — small heading / label */
    --text-h6: 0.875rem;
    /* 14px — eyebrow / overline text */

    --global-padding: 5%;
    --global-margin: 2rem;
    --global-small-border-radius: 4px;
    --global-small-styled-border-radius: 16px 4px 16px 4px;
    --global-big-styled-border-radius: 48px 4px 48px 4px;

    --team-boxshadow: 10px 8px 15px -19px #c8c8c8 ;
    --thin-border: 1px solid rgba(14, 24, 34, 0.1);

    /* social media icons */
     --social-icon-bg: #50b5cc;
    --social-icon-fg: #fff;
    --social-icon-size: 4rem;


}




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


p {
    font-size: 1rem;
    line-height: 1.6rem;
}

.smallText {
    font-size: .8rem;
    margin: 0;
    padding: 0;
}


a {
    text-decoration: none;
}

li {

    list-style: none;
}

h1 {
    font-size: var(--text-h1);
    line-height: 1.1;
    font-weight: 700;
}

h2 {
    font-size: var(--text-h2);
    line-height: 1.2;
    font-weight: 400;
}

h3 {
    font-size: var(--text-h3);
    line-height: 1.3;
    font-weight: 200;
}

h4 {
    font-size: var(--text-h4);
    line-height: 1.4;
    font-weight: 500;
}

h5 {
    font-size: var(--text-h5);
    line-height: 1.4;
    font-weight: 500;
}

h6 {
    font-size: var(--text-h6);
    line-height: 1.4;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* screen reader */

.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
    white-space: nowrap;
}


/* site readers css */
.skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: #000;
    color: #fff;
    padding: 8px 16px;
    z-index: 100;
}

.skip-link:focus {
    top: 0;
    /* also override the screen-reader-text clipping when focused */
    clip: auto;
    width: auto;
    height: auto;
    overflow: visible;
}

/* body */

body {

    font-family: "Poppins", sans-serif;
    font-weight: 400;
    font-style: normal;
    background-color: var(--light);
      background-image: url('assets/images/cloth_bg_small_tile.webp');
    background-blend-mode: overlay;
    background-repeat: repeat;
    background-size: 100px 100px;
    
}





/* ////////////Header////////////// */

/* padding for header if above 1920 alight with hero video */
header.site-header {

    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;

    max-width: 1920px;
    margin-left: auto;
    margin-right: auto;
    z-index: 100;
    height: 96px;
    border-bottom: var(--thin-border);



}

/* padding for header below 1920 */
@media (max-width: 1921px) {
    header.site-header {
        padding-left: var(--global-padding);
        padding-right: var(--global-padding);
    }
}

.site-header ul {
    display: flex;
    gap: 1rem;
}

.site-header ul li {
    list-style: none;
}


.site-header ul li a {

    display: inline-block;
    padding: 8px 20px;
    background-color: var(--card1);
    color: var(--light);
    border-radius: var(--global-small-styled-border-radius);
    /* matches your existing nav-link radius pattern */
    font-weight: 500;
    white-space: nowrap;
    /* prevents "Get Support" wrapping awkwardly on smaller widths */
}


.site-header ul li a:hover,
.site-header ul li a:focus {
    background-color: var(--card2);
    /* or whatever your hover state convention is elsewhere */
}


.site-header ul li a:active,
.site-header ul li a:active {
    background-color: var(--card3);
}




.site-branding {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}



.site-branding img {
    width: 120px;
    margin-top: .5rem;

}

@media (max-width: 1080px) {
    .site-branding {
        flex-direction: column;
        gap: 0rem;
        padding: 0;
    }

    .site-branding img {
        width: 100px;
        margin-top: 1rem;

    }

    .site-branding p {
        padding: 0;
        margin-top: -.8rem;

    }

}

/* //////////header end//////////// */


/* //navigation start//  */

/* menu toggle */
.menu-toggle {
    border: none;
    background-color: transparent;
    padding: 0;
    cursor: pointer;
}



.menu-toggle {
    display: none;
    /* hidden on desktop */
    border: none;
    background-color: transparent;
    padding: 0;
    cursor: pointer;
}

.menu-close {
    display: none;
    /* only shown inside the open mobile panel */
    border: none;
    background-color: transparent;
    padding: 0;
    cursor: pointer;
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
}

.menu-toggle:focus-visible,
.menu-close:focus-visible {
    outline: 2px solid var(--color-3);
    outline-offset: 2px;
}

@media (max-width: 1080px) {

    .menu-toggle {
        display: block;
    }

    .menu-panel {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: var(--light);
        transform: translateX(-100%);
        transition: transform 0.3s ease;
        z-index: 200;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .menu-panel.is-open {
        transform: translateX(0);
    }

    .menu-close {
        display: block;
    }

    .menu-panel .menu {
        list-style: none;
        text-align: center;
        display: flex;
        flex-direction: column;

    }

    .menu-panel .menu-item {
        margin-bottom: 1.5rem;

    }

    .menu-panel .menu-item a {
        color: var(--light);
        font-size: var(--text-h3);
    }

    body.menu-open {
        overflow: hidden;
        /* stops background scrolling while panel is open */
    }
}

#site-navigation {
    display: flex;


}

#site-navigation ul {
    border: var(--debug-green);
}


.main-navigation {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

.button--nav-cta {
    display: inline-block;
    padding: 8px 20px;
    background-color: var(--color-1);
    color: var(--light);
    border-radius: var(--global-small-styled-border-radius);
    /* matches your existing nav-link radius pattern */
    font-weight: 500;
    white-space: nowrap;
    /* prevents "Get Support" wrapping awkwardly on smaller widths */
}

.button--nav-cta:hover,
.button--nav-cta:focus {
    background-color: var(--sky-blue);
    /* or whatever your hover state convention is elsewhere */
}


.card-cta {
    display: inline-block;
    padding: 8px 20px;
    background-color: var(--card1);
    color: var(--light);
    border-radius: var(--global-small-styled-border-radius);
    /* matches your existing nav-link radius pattern */
    font-weight: 500;
    white-space: nowrap;
    /* prevents "Get Support" wrapping awkwardly on smaller widths */
}

/* main start */
main {
    border: var(--debug-green);
    position: relative;


}

/* section and footer globals width set here */

section,
footer {
    max-width: 1920px;
    margin-left: auto;
    margin-right: auto;
    background-color: var(--light);
    
}

/* ////////hero //////////*/

.hero-section {
    position: relative;
    overflow: hidden;
    height: 70vh;
    max-width: 1920px;
    margin-inline: auto;

    display: flex;
    align-items: center;
    /* vertically centers .hero-content */
    justify-content: flex-start;
    /* keeps it left on desktop */
    padding-left: 5%;
    /* breathing room from the edge */
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 600px;
    /* stops text lines getting too wide/hard to read */
    color: var(--light);
    /* likely needed since it sits over a dark video overlay */
}

.hero-content h3,
.hero-content h1,
.hero-content h2 {
    margin-bottom: 1rem;
}

.hero-cta {
    display: inline-block;
    margin-right: 1rem;
    margin-bottom: 0.5rem;
    /* so they wrap nicely if they stack */
}


.hero-cta {
    display: inline-block;
    padding: 8px 20px;
    background-color: var(--cta-hero);
    color: var(--light);
    border-radius: var(--global-small-styled-border-radius);
    /* matches your existing nav-link radius pattern */
    font-weight: 500;
    white-space: nowrap;
    /* prevents "Get Support" wrapping awkwardly on smaller widths */
}


.hero-cta:hover,
.hero-cta:focus {
    background-color: var(--color-2);
    /* or whatever your hover state convention is elsewhere */
}


.hero-video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translate(-50%, -50%);
    object-fit: cover;
    z-index: 0;
}


/* hero mobile */
@media (max-width: 768px) {
    .hero-section {
        justify-content: center;
        padding-left: 0;
        padding: 0 1.5rem;
        /* even side padding instead */
    }

    .hero-content {
        text-align: center;
        max-width: 100%;
    }

    .hero-cta {
        display: block;
        /* stack buttons full-width on mobile */
        width: 100%;
        margin-right: 0;
        margin-bottom: 0.75rem;
    }
}


/* Optional: darken video so text stays readable */
.hero-section::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 1;
}

/* ////////hero end /////////*/






/* //////////single hero start/////// */

/* feature blog post */


section.single-hero-section {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 550px;
    width: 100%;
    background-image:url(assets/images/projects/junk-bin06.webp);
    background-size: cover;
    background-position: center;
}

/* Dark overlay covering the whole section */
section.single-hero-section::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(15, 15, 15, 0.4);
    z-index: 1;
}

/* Left image area */
.single-hero-section-right {
    background-image: url("your-image.jpg");
    background-size: cover;
    background-position: center;
      position: relative;
    z-index: 2;
}

/* Right dark content panel */
.single-hero-section-left {
   
    color: #fff;
    padding: 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
      position: relative;
    z-index: 2;
}

.single-hero-section-right h2 {
    font-size: 42px;
    line-height: 1.15;
    margin-bottom: 15px;
}

.single-hero-section-right h3 {
    font-size: 22px;
    font-weight: 400;
    margin-bottom: 20px;
    opacity: 0.85;
}

.single-hero-section-right p {

    margin-bottom: var(--global-margin)
}


.single-hero-section-cta {
    display: inline-block;
    padding: 8px 20px;
    background-color: var(--card1);
    color: var(--light);
    border-radius: var(--global-small-styled-border-radius);
    /* matches your existing nav-link radius pattern */
    font-weight: 500;
    white-space: nowrap;
    align-self: flex-end;

    /* prevents "Get Support" wrapping awkwardly on smaller widths */
}


/* Mobile layout feature blog post*/
@media (max-width: 768px) {
    section.single-hero-section {
        
        display: block;
        position: relative;
        min-height: 500px; /* total height of the section on mobile */
    }

    .single-hero-section-left {
        position: absolute;
        inset: 0;
        min-height: unset;
        z-index: 1;
    }

    .single-hero-section-right {
        position: absolute;
        inset: 0;
        z-index: 2;
        padding: 40px 25px;
    }

    .single-hero-section-right h2 {
        font-size: 32px;
    }
}

/* feature blog post end */


/* //////////////single hero end ///////// */








/* /////////////cards start//////////////// */

section#services-cards {
    background-color: #50b4cc;
    width: 100%;
    color: var(--light);
}

section#services-cards ul {
    list-style: none;
    display: grid;
    /* auto fit grid if fall below 280 make it 1fr*/
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    grid-auto-rows: 1fr;

}



/*  actuals cards */
.card:nth-child(1) .card-inner {
    background-color: var(--card1);
    background-image: url('assets/images/cloth_bg_small_tile.webp');
    background-blend-mode: overlay;
    background-repeat: repeat;
    background-size: 100px 100px;
}

.card:nth-child(2) .card-inner {
    background-color: var(--card2);
    background-image: url('assets/images/cloth_bg_small_tile.webp');
    background-blend-mode: overlay;
    background-repeat: repeat;
    background-size: 100px 100px;
}

.card:nth-child(3) .card-inner {
    background-color: var(--card3);
    background-image: url('assets/images/cloth_bg_small_tile.webp');
    background-blend-mode: overlay;
    background-repeat: repeat;
    background-size: 100px 100px;
}


.card-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* centers title, icon, and CTA */
    text-align: center;
    height: 100%;
    padding: 2rem;
}

.card-title {
    margin-bottom: 1.5rem;
    font-size: var(--text-h2);
    font-weight: 400;
}

.card-icon {
    width: 100%;
    height: 100%;
    margin-bottom: 3rem;
}

.card-icon svg {
    width: 50%;
    height: auto;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
}

.card-text {
    text-align: left;
    /* body copy reads better left-aligned even in a centered card */
    margin-bottom: 2rem;
}

.card-cta {
    margin-top: auto;
    /* pushes button to bottom regardless of text length above */
}


/* /////////////cards END//////////////// */


/* //////////content sections start /////////*/

/* -------------------------
   Layout containers
-------------------------- */

.media-text,
.media-text-page {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 0;
}

.media-text-blog {
    display: grid;
    grid-template-columns: 1fr;
    width: 70%;
    max-width: 1180px;
    margin-inline: auto;
}

.media-text-page {
    padding-inline: var(--global-padding);
}

/* -------------------------
   Content
-------------------------- */

.media-text__content,
.media-text-page__content,
.media-text-blog__content {
    padding: var(--global-padding);
}

.media-text__content h2 {
    margin-bottom: 1rem;
}

.media-text__subheading {
    margin-bottom: 1rem;
    font-weight: 500;
}

/* -------------------------
   Media
-------------------------- */

.media-text__media {
    height: 100%;
}

.media-text__media img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* -------------------------
   Reverse Layout (Desktop)
-------------------------- */

.media-text--reverse .media-text__media {
    order: 2;
}

.media-text--reverse .media-text__content {
    order: 1;
}

/* -------------------------
   Desktop Padding
-------------------------- */

@media (min-width: 1080px) {

    /* default layout */
    .media-text-page:not(.media-text--reverse) .media-text-page__content,
    .media-text-blog:not(.media-text--reverse) .media-text-blog__content {
        padding-left: var(--global-padding);
        padding-right: 0;
    }

    /* reversed layout */
    .media-text-page.media-text--reverse .media-text-page__content,
    .media-text-blog.media-text--reverse .media-text-blog__content {
        padding-left: 0;
        padding-right: var(--global-padding);
    }
}

/* -------------------------
   Mobile
-------------------------- */

@media (max-width: 1080px) {

    .media-text,
    .media-text-page,
    .media-text-blog {
        grid-template-columns: 1fr;
        width: 100%;
    }

    /* reset ordering */
    .media-text--reverse .media-text__media,
    .media-text--reverse .media-text__content {
        order: 0;
    }

    /* remove content padding */
    .media-text-page__content,
    .media-text-blog__content {
        padding-top: var(--global-padding);
    }

    /* remove page side padding */
    .media-text-page {
        padding-inline: 0;
    }
}

/* //////////content sections end ///////////*/






/* feature blog post on home page exceprt with picture */


section.featuredBlogPost {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 550px;
    width: 100%;
      background-image: url("assets/images/banner-centre-of-change-3.jpg");
    background-size: cover;
    background-position: center;
}

/* Left image area */
.featuredBlogleft {
    background-image: url("your-image.jpg");
    background-size: cover;
    background-position: center;
}

/* Right dark content panel */
.featuredBlogRight {
    background: rgba(15, 15, 15, 0.4);
    color: #fff;
    padding: 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.featuredBlogContent h2 {
    font-size: 42px;
    line-height: 1.15;
    margin-bottom: 15px;
}

.featuredBlogContent h3 {
    font-size: 22px;
    font-weight: 400;
    margin-bottom: 20px;
    opacity: 0.85;
}

.featuredBlogContent p {

    margin-bottom: var(--global-margin)
}


.featuredBlog-cta {
    display: inline-block;
    padding: 8px 20px;
    background-color: var(--card1);
    color: var(--light);
    border-radius: var(--global-small-styled-border-radius);
    /* matches your existing nav-link radius pattern */
    font-weight: 500;
    white-space: nowrap;
    align-self: flex-end;

    /* prevents "Get Support" wrapping awkwardly on smaller widths */
}


/* Mobile layout feature blog post*/
@media (max-width: 768px) {
    section.featuredBlogPost{
        grid-template-columns: 1fr;
    }

    .featuredBlogLeft {
        min-height: 300px;
    }

    .featuredBlogRight{
        padding: 40px 25px;
    }

    .featuredBlogContent h2 {
        font-size: 32px;
    }
}


/* feature blog post end */








/* testimonials swiper start */

section.testimonials-section {

    color: var(--dark);
    border: var(--debug-red);
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--global-margin);
    margin-top: var(--global-margin);
       background-image: url('assets/images/cloth_bg_small_tile.webp');
    background-blend-mode: overlay;
    background-repeat: repeat;
    background-size: 100px 100px;



}

#testimonials-heading {
    padding: var(--global-margin);
}


.testimonial-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background-color: white;
    border-radius: var(--global-small-border-radius);
    padding: 2rem;
    height: 100%;
    min-width:100%;
   
       -webkit-box-shadow: var(--team-boxshadow);
    box-shadow: var(--team-boxshadow);
    border: var(var(--thin-border))
    
  

}

.testimonial-card__avatar {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    object-fit: cover;
    margin-bottom: 1rem;
    border: var(--debug-green);
     mask-image: url(assets/images/mask.svg);
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;

    -webkit-mask-image:url(assets/images/mask.svg) ;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
}

.testimonial-card__name {
    margin-bottom: 0.25rem;
}

.testimonial-card__title {
    color: #666;
    margin-bottom: 1rem;
}

.testimonial-card__quote {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.testimonial-card__quote i {
    font-size: 1.5rem;
    color: var(--card2);
    /* or whatever accent fits */
    line-height: 1;
}

.testimonial-card__quote .ri-double-quotes-l {
    margin-bottom: 0.5rem;
}

.testimonial-card__quote .ri-double-quotes-r {
    margin-top: 0.5rem;

}

.testimonial-card__quote p {
    margin: 0;
}

/* swiper styles */
.swiper {
    width: 100%;
    height: 100%;
    border: var(--debug-blue);
    margin: 0;
      padding-bottom: var(--global-padding);

}

.swiper-wrapper {
    align-items: center;
    width: 100%;
}

.swiper-slide {
    width: 50vw;
   
}


/* width of the testimonial slide gets bigger on small device */
@media (max-width: 768px) {
   .swiper-slide {
    width: 70vw;
}
}








/* page hero */
.page-hero-section{
    
 
     position: relative;
     margin-top: var(--global-margin) ;
   
     background-color: var(--light);
       background-image: url('assets/images/cloth_bg_small_tile.webp');
    background-blend-mode: overlay;
    background-repeat: repeat;
    background-size: 100px 100px;
}


/* hero content top 50% acrros */
.page-hero-content{

        padding-left: var(--global-padding);
     padding-right: var(--global-padding);
 margin-bottom: var(--global-margin) ;
 width: 50%;
 

}

/* hero content top 100% acrros mobiles */
@media (max-width: 768px) {
   .page-hero-content{
 width: 100%;

}
}

.page-banner img {
    display: block;
    width: 100%;
    height: clamp(260px, 40vw, 400px);
    object-fit: cover;
       display: block; /* removes inline-image bottom gap */

    

}
/* page hero end */





/* team hero  start*/
.team-hero-section{
    
 
     position: relative;
     margin-top: var(--global-margin) ;
     margin-bottom: var(--global-margin) ;
     background-color: var(--light);
       background-image: url('assets/images/cloth_bg_small_tile.webp');
    background-blend-mode: overlay;
    background-repeat: repeat;
    background-size: 100px 100px;
}


/* hero content top 50% acrros */
.team-hero-content{

        padding-left: var(--global-padding);
     padding-right: var(--global-padding);
 margin-bottom: var(--global-margin) ;
 width: 50%;
 

}

/* hero content top 100% acrros mobiles */
@media (max-width: 768px) {
   .team-hero-content{
 width: 100%;

}
}

.team-banner img {
    display: block;
    width: 100%;
    height: clamp(260px, 40vw, 400px);
    object-fit: cover;
      display: block; /* removes inline-image bottom gap */

    

}




/* team hero end */

/* team members start */
/* //////////team grid start////////// */



.team-grid {
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--global-margin);
     padding-left: var(--global-padding);
     padding-right: var(--global-padding);
     background-color: var(--light);
       background-image: url('assets/images/cloth_bg_small_tile.webp');
    background-blend-mode: overlay;
    background-repeat: repeat;
    background-size: 100px 100px;
}


.team-members-section{
    margin-bottom: var(--global-margin);
}
.team-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    height: 100%;
    padding: 2rem;
    background-color: white;

    border-radius: var(--global-small-border-radius);
    -webkit-box-shadow: var(--team-boxshadow);
    box-shadow: var(--team-boxshadow)
  
}

.team-card__photo {
    width: 140px;
    height: 140px;
    object-fit: cover;
 
    margin-bottom: 1.5rem;

        width: 140px;
    aspect-ratio: 1;

    mask-image: url(assets/images/mask.svg);
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;

    -webkit-mask-image:url(assets/images/mask.svg) ;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;

    overflow: hidden;
}

.team-card__name {
    font-size: var(--text-h3);
    font-weight: 500;
    margin-bottom: 0.25rem;
}

.team-card__title {
    font-size: var(--text-h5);
    font-weight: 400;
    color: var(--dark);
    margin-bottom: 1.5rem;
}

.team-card__details {
    width: 100%;
    margin-bottom: 1.5rem;
}

.team-card__details dt {
    font-size: var(--text-h4);
    font-weight: 400;
    margin-top: 1.25rem;
}

.team-card__details dt:first-child {
    margin-top: 0;
}

.team-card__details dd {
    margin: 0.25rem 0 0;
    font-size: var(--text-h6);
    line-height: 1.5;
}

.team-card__badges {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-top: auto;
    /* pushes badges to the bottom regardless of content length above,
       matching your .card-cta pattern */
}

.team-card__badges li {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background-color: var(--card3);
    border-radius: 50%;
    padding: 0;
}


.team-card__badges img {
    width: 80%;
    height: 80%;
      display: block; /* removes inline-image bottom gap */

}

/* //////////team grid end////////// */



/* /////pre footer start with logos and big green Icon*/
.pre-footer {
    background-image: url(assets/images/rainbow_banner2.webp);
    background-position: bottom;
    background-size: cover;
    background-repeat: no-repeat;

    min-height: 500px;
    position: relative;
    text-align: center;
    color: var(--light);
   

}

/*  pre footer height smaller below 1080 */
@media (max-width: 1080px) {
    .pre-footer {


        min-height: 248px;

    }

}


/*  pre footer height smaller below 1080 */
@media (max-width: 768px) {
    .pre-footer {


        min-height: 168px;

    }

}

/* teal overlay on pre footer*/
.pre-footer::after {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--card3);
    mix-blend-mode: overlay;
    z-index: -1;
}

#our-partners-heading {

    padding: var(--global-margin);
}


.pre-footer-icon {

    width: 30%;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: -7px;

    
    

    img {
        width: 100%;
        
  display: block; /* removes inline-image bottom gap */

    }
}

/* /////pre footer end \\\\\\\\\\\\*/



/* gallery css start */
/* new FSGallery START */
section.imageGallery{

        padding-left: var(--global-padding);
       padding-right: var(--global-padding);
       margin-top: var(--global-margin);
       margin-bottom: var(--global-margin) ;
       text-align: center;
}
.fsGalleryContainer{

    display: grid;
      gap: 1rem;
      width: 100%;
      grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
      position: relative;
       margin-top: var(--global-margin);
       margin-bottom: var(--global-margin) ;
    
      


}


.galleryThumb {
  width: 100%;
  aspect-ratio: 1/1;
  overflow: hidden; /* needed so the img's border-radius/cover doesn't leak out */
  border: 2px solid var(--highlight);
}

.galleryThumb img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* this is what stops the squashing */
  display: block; /* removes inline-image bottom gap */
  border-radius: var(--global-small-border-radius);
}

/* gallery css end */



/* ////////partner logos////////// */
.partner-logos {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 1.5rem 2rem;

    border: var(--debug-green);
    padding-bottom: 30%;

}

.partner-logos__item {
    width: 140px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.partner-logos__item img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
       border-radius: var(--global-small-border-radius);
         display: block; /* removes inline-image bottom gap */

       
}

/* ////////partner logos end ////////// */



/* \\\\\\\\\\\\\\footer start \\\\\\\\\\*/

footer {
    background-color: var(--card2);
      background-image: url('assets/images/cloth_bg_small_tile.webp');
    background-blend-mode: overlay;
    background-repeat: repeat;
    background-size: 100px 100px;
 

}

.footer-columns {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 2rem;

    padding: var(--global-padding)
}

.footer-col--brand {
    text-align: center;
    padding-right: auto;
    padding-right: auto;
    border: var(--debug-blue);
}

.footer-col--brand #bacpFooterLogo{

   width:60px;
   border-radius: var(--global-small-border-radius);
   margin-top: .5rem;
   margin-bottom: -.5rem;

}

/* padding on the secondond menu colume */
.footer-col:nth-child(2) {
    margin-left: 2rem;
}


/* social media icons colume displayed flex */
.footer-col:nth-child(5) ul {
   display: flex;
   gap:1rem;
   justify-content: start;
}


/* social media icons style */
.social-icon {
    width: var(--social-icon-size);
    height: var(--social-icon-size);
    display: block;
}

.social-icon .icon-bg {
    fill: var(--social-icon-bg);
}

.social-icon .icon-fg {
    fill: var(--social-icon-fg);
    fill-rule: evenodd;
}

/* social below 1080 */
@media (max-width: 1080px) {
.footer-col:nth-child(5) ul {
   display: flex;
   gap:1rem;
   justify-content: center;
}


}
/* social media icons style end */



.footer-col ul {
    list-style: none;
}

.footer-col a {
    color: inherit;
}

.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.5rem 5%;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    text-align: center;
}


.footer-bottom nav {
border: var(--debug-blue);

}


.footer-bottom ul {
    display: flex;
    gap: 1.5rem;
    list-style: none;
    justify-content: center;
   
}







/* Footer Mobile */
@media (max-width: 1080px) {
    .footer-columns {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .footer-bottom {
        flex-direction: column;

    }

    .footer-col:nth-child(2) {
        margin-left: 0rem;
    }

}

/* \\\\\\\\\\\\\\footer END \\\\\\\\\\*/



/* \\\\\\\ Contact form /////////////// */
.contact-section {

    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--global-padding);
    background-color: var(--sky-blue);
      
 
}


.innterContactform {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    overflow: hidden;
    /* clips the image to the rounded corner */
    background-color: var(--light);
     border-radius: var(--global-big-styled-border-radius)
}


.contact-section__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.contact-section__form {
    padding: 3rem;
}

.form-field {
    margin-bottom: 1.5rem;
}

.form-field label {
    display: block;
    margin-bottom: 0.5rem;
}

.form-field input,
.form-field textarea {
    width: 100%;
    border: none;
    border-bottom: 1px solid var(--dark);
    padding: 0.5rem 0;
    font-family: inherit;
    font-size: 1rem;
    background: transparent;
}

.form-field textarea {
    border: 1px solid var(--dark);
    padding: 0.75rem;
    resize: vertical;
    /* let user resize height, not width */
}

.form-field input:focus,
.form-field textarea:focus {
    outline: 2px solid var(--color-3);
    outline-offset: 2px;
}

@media (max-width: 768px) {
    .innterContactform {
        grid-template-columns: 1fr;
    }
}

/* //////////contact form //////////// */