/*
Theme Name: United Persons with Disabilities
Theme URI: https://www.upds-uganda.org
Author: Harunah Damba
Author URI: https://upds-uganda.org/
Description: Classy theme developed by members of UPDS.
Version: 1.0
License: License Name
License URI: https://upds-uganda.org/terms-of-use
Text Domain: 
*/


.quote-section{
    width: 100%;
    padding: 0 20px;
    overflow: hidden;
}

.quote-section::before{

    content:"";

    position:absolute;

    inset:0;

    }

.quote-content{

    position:relative;

    max-width:100%;

    margin:0;

    text-align:left;

    color:black;

    z-index:2;
}

/* ICON */

.quote-content i{

    font-size:50px;

    margin-bottom:8px;

    color:#061f4a;

    display:block;
}

/* TEXT */

.quote-content p{

    font-family:sans-serif;

    font-size:1.3rem;

    font-style: italic;

    font-weight:400;

    line-height:1.2;

    margin-bottom:0;

    color: #061f4a;
}

.comm-section{
    position: relative;
    background: url("img/comm-background.png") center/cover no-repeat;
    overflow: hidden;
}

/* soft washout overlay */
.comm-overlay{
    position: relative;
    background: rgba(255,255,255,0.88);
    padding: 40px 0;
}



.testimonial-section{
    width: 100%;
    background: #eaf6ea; 
    display: flex;
    align-items: center;
}
.testimon-section{
    width: 100%;
    background: #f0fbfb; 
    display: flex;
    align-items: center;
}
.testimonial-section .container-fluid{
    width: 100%;
    padding-left: 5%;
    padding-right: 5%;
}
@media(max-width:991px){
.container-fluid{
     padding-left:22px !important;
        padding-right:22px;
    }
}

.testimonial-item{
    background: transparent;
}

.testimonial-quote{
    border-left: 6px solid green;
    padding-left: 15px;
   color: black;
}

/* nav buttons */
.nav-circle{
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(0,0,0,0.12);
    color: white;
    font-size: 18px;
}

/* center nav vertically */
.owl-nav{
    position: absolute;
    top: 45%;
    width: 100%;
    display: flex;
    justify-content: space-between;
}



/* =========================
BUTTON + LINK SYSTEM
========================= */

.btn-custom,
a.footer-link,
.footer-link{
    background: none;
    border: none;
    padding: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;

    position: relative;
    display: inline-block;

    text-decoration: none;
    border-bottom: 1.5px dotted #198754;

    transition: 0.3s ease;
}

.btn-custom:hover,
a.footer-link:hover,
.footer-link:hover{
    border-bottom: none !important;
}

.footer-social a.btn-custom{
    border: none !important;
    text-decoration: none !important;
    background: none !important;
}
/* =========================
GREEN BUTTON
========================= */

.btn.btn-customw{
    background:#198754 !important;
    color:#fff !important;

    border:2px solid #198754 !important;

    padding:12px 28px;
    border-radius:5px;

    display:inline-block;
    text-decoration:none;

    box-shadow:none !important;
    outline:none !important;

    transition:0.3s ease;
}


/* =========================
HOVER
========================= */

.btn.btn-customw:hover{
    background:#fff !important;
    color:#198754 !important;

    border:2px solid #198754 !important;

    text-decoration:none;
}

.fallback-logo{
    filter:grayscale(100%);
    object-fit:contain;
    padding:30px;
    background:#f5f5f5;
}
/* =========================
FILTERS
========================= */

.team-filter{
    list-style:none;
    padding:0;
    margin:0 0 50px;
    display:flex;
    justify-content:center;
    flex-wrap:wrap;
    gap:12px;
}
.bio-btn .btn-text{
    font-size:16px;
}
.team-filter li{
    padding:10px 24px;
    background:#e9ecef;
    border-radius:30px;
    cursor:pointer;
    transition:.3s;
    font-weight:600;
}

.team-filter li.active,
.team-filter li:hover{
    background:#198754;
    color:#fff;
}

/* =========================
TEAM
========================= */

.team-item{
    margin-bottom:10px;
}
.team-info h4{
    color:#fff;
    font-size: 24px;
}
.team-info p{
  color: white;
  text-transform: uppercase;
  margin-bottom: 5px; 
  font-size: 12px; 
}
.team-card{
    position:relative;
    overflow:hidden;
    border-radius:12px;
}

.team-img{
    width:100%;
    height:330px;
    object-fit:cover;
    display:block;
}
.team-img.active-bio{
    border:4px solid #198754;
    box-shadow:0 0 0 3px rgba(25,135,84,.25);
}

.team-card.active-card{
    transform:scale(1.02);
    transition:.3s;
}  

.team-card:hover .team-overlay{
    opacity:1;
}

.team-card.active-card .team-overlay{
    opacity:1;
}
.team-overlay{
    position:absolute;
    inset:0;
    background: linear-gradient(to top, rgba(1, 43, 80, 0.88), rgba(1, 247, 161, 0.15));
    opacity:0;
    transition:.4s;
    display:flex;
    justify-content:center;
    align-items:flex-end;
    text-align:center;
    padding:20px;
}

/* =========================
BUTTON
========================= */

.bio-btn{
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    cursor: pointer;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0px;
    font-weight: 600;
     margin-bottom: 20px;
    padding: 8px 16px;
    border-radius: 30px;
    background: #048f10;
    color: #fff;
    text-decoration: none;
    font-size: 13px;
    transition: .3s;
}

.bio-btn:hover{
    background:#fff;
    color:#198754;
}

.bio-btn i{
    transition:.3s;
}

/* =========================
DYNAMIC BIO
========================= */

.dynamic-bio{
    width:100%;
    background: #effdf3;
    display:none;
    margin-bottom:50px;
    border-bottom:2px solid #198754;
}

.dynamic-bio.show{
    display:block;
}

.bio-wrapper{
    display:flex;
    min-height:300px;
}

.bio-content{
    width:70%;
    padding:10px;
    overflow-y:auto;
    height:300px;
}

.bio-close-side{
    width:30%;
    position:relative;
}

/* BIG X */

.close-bio{
    position:absolute;
    top:10px;
    right:20px;
    font-size:90px;
    font-weight: 100;
    line-height:1;
    cursor:pointer;
    color:#444;
    transition:.3s;
}

.close-bio:hover{
    color:#198754;
    transform:scale(1.1);
}

/* IMAGE WRAP */

.bio-photo{
    width:150px;
    height:160px;
    object-fit:cover;
    float:left;
    margin-right:20px;
    margin-bottom:10px;
    border-radius:12px;
    filter: grayscale(100%);
}

.bio-details h1{
    margin-bottom:5px;
    max-height: 300px;
    opacity: 1;
    }

.bio-position{
    color:#198754;
    font-size:24px;
    font-weight:600;
}

.bio-text{
    font-family: var(--p);
    padding: 10px;
    text-align: left;
    font-size: 17px;
}

.bio-text::after{
    content:"";
    display:block;
    clear:both;
}

/* SCROLLBAR */

.bio-content::-webkit-scrollbar{
    width:10px;
}

/* WASHY GREEN BACKGROUND */
.bio-content::-webkit-scrollbar-track{
    background:#d9f3e4;
    border-radius:10px;
}

/* ACTIVE GREEN SCROLL */
.bio-content::-webkit-scrollbar-thumb{
    background:#198754;
    border-radius:10px;
    border:2px solid #d9f3e4;
}

/* HOVER */
.bio-content::-webkit-scrollbar-thumb:hover{
    background:#146c43;
}

#portfolio-flters li{
    display: inline-block;
    cursor: pointer;
    padding: 10px 18px;
    border-radius: 30px;
    margin-bottom: 10px;
    transition: .3s;
    font-size: 16px;
    font-weight: 600;
}

/* TEAM CARD */
.team-card{
    position: relative;
    border-radius: 14px;
}

.team-card img{
    width: 100%;
    height: 340px;
    object-fit: cover;
    transition: .5s;
}

.team-card:hover .team-overlay{
    opacity: 1;
}

.team-card:hover img{
    transform: scale(1.05);
}

/* POSITION */
.team-position{
    display: inline-block;
    color: #fff;
    font-size: 11px;
    letter-spacing: 1px;
    font-weight: 700;
    margin-bottom: 8px;
}

/* NAME */
.team-name{
    color: #fff;
    font-size: 18px;
    font-weight: 600;
}

/* READ BIO BUTTON */
.read-bio-btn{
    display: flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    cursor: pointer;
    margin-left: auto;
    margin-right: auto;
    margin-top: 0px;
    font-weight: 600;
     margin-bottom: 20px;
    padding: 8px 16px;
    border-radius: 30px;
    background: #048f10;
    color: #fff;
    text-decoration: none;
    font-size: 13px;
    transition: .3s;
}

.read-bio-btn:hover{
    background: #fff;
    color: #048f10;
}


/* FULL WIDTH DROPDOWN */
.mega-dropdown{
    left:0;
    right:0;
    border:none;
    border-radius:0;
    background:#FAF8F2;
    box-shadow:0 10px 30px rgba(0,0,0,.10);
    transition:none !important;
    animation:none !important;
    border-top:3px solid #048f10;
    position:absolute;
    overflow:visible;
}

/* Pointer */
.mega-dropdown::before{
    content:"";
    position:absolute;
    top:-18px;

    /* Adjust this value until it points to the centre
       of the parent menu item */
    left:90px;

    width:0;
    height:0;

    border-left:18px solid transparent;
    border-right:18px solid transparent;
    border-bottom:18px solid #FAF8F2;

    z-index:20;
}


/* FORCE SINGLE ROW */
.mega-dropdown .row{
    flex-wrap: nowrap !important;
}

.mega-dropdown .col{
    flex: 1;
    min-width: 0;
}

/* ITEM WRAPPER */
.mega-item{
    text-decoration: none;
    display: block;
    color: #000;
    transition: 0.3s;
}

/* IMAGE TOUCHING EFFECT (pull title into image) */
.mega-item img{
    margin-bottom: -8px;
}

/* GREEN TITLE CONTAINER */
.mega-title{
    display: inline-block;
    background: #048f10;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 10px;
    border-radius: 20px;
    margin-top: -10px;
    position: relative;
    z-index: 2;
}

/* SUBTITLE */
.mega-subtitle{
    font-size: 13px;
    margin-top: 6px;
    color: #333;
    text-decoration: none;
    transition: 0.3s;
}

/* SUBTITLE HOVER */
.mega-item:hover .mega-subtitle{
    color: #0d6efd;
    text-decoration: underline;
}

/* TITLE HOVER (container fades slightly) */
.mega-item:hover .mega-title{
    opacity: 0.85;
}

/* WHOLE ITEM HOVER (soft fade, no shadow) */
.mega-item:hover{
    opacity: 0.95;
}


.page-header-harunah {background: url(../img/header/harunah-damba.png) center center no-repeat fixed; background-size: cover; height: 400px;align-items: flex-end;}
.page2-header {background: linear-gradient(rgba(53, 53, 53, .7), rgba(53, 53, 53, .7)), url(../img/header/page-header2.jpg) center center no-repeat;background-size: cover;}
.page4-header {background: url(../img/header/team.jpg) center center no-repeat; background-size: cover; height: 400px;}
.page5-header {background: url(../img/header/header-4.png) center center no-repeat; background-size: cover; height: 400px;}

.breadcrumb-item + .breadcrumb-item::before {
    content: "/";
    color: var(--dark);
    padding: 0 8px;
}
.breadcrumb-item {
    -webkit-text-stroke: 0.5px rgb(10, 10, 10);
}
.breadcrumb-item.active {
    color: rgb(61, 61, 61);
    pointer-events: none;
}

.about-title{
    margin-left: 70px;
}
.about-header{
    display: flex;
    width: 100%;
}

/* LEFT SIDE */
.about-header-left{
    width: 40%;
    background: #048f10;
    display: flex;
    align-items: center;
   }

/* RIGHT SIDE */
.about-header-right{
    width: 60%;
    background: url(../img/header/page-header.jpg) center center no-repeat;
    background-size: cover;
    height: 400px;
}
.about-page3header-right{
    width: 60%;
    background: url(../img/header/group-photo.jpg) center center no-repeat;
    background-size: cover;
    height: 400px;
   }
.about-header3-right{
    width: 60%;
    background: url(../img/header/team.jpg) center center no-repeat;
    background-size: cover;
    height: 400px;
   }
   .about-header-4-right{
    width: 60%;
    background: url(../img/about/adong-naume.jpg) center center no-repeat;
    background-size: cover;
    height: 400px;
   }
.header-content{
    padding-left: 0;
    padding-right: 0;
}

/* TITLE */
.header-content h1{
    color: #1b5e20;
    margin-bottom: 10px;
    font-weight: bolder;
}

/* SUBTITLE */
.subtitle{
    color: white;
    margin-top: 10px;
}

.author-name{
    text-align: center;
    margin-bottom: 5px;
}
.author-by-text{

    font-weight:200;

    font-size:.9em;

    color:#777;

    margin-right:6px;

   letter-spacing:.3px;
}
.author-bio{
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: all 0.5s ease;
}

.author-bio.show{
    max-height: 300px;
    opacity: 1;
    margin-top: 20px;  
    margin-bottom: 40px;
}

/* BIO TEXT STYLE */
.author-bio p{
    text-align: center;
    color: #1e4db7;              
    padding: 10px 25px;
    max-width: 600px;
    margin: auto;
    line-height: 1.6;
   }


.bio-arrow i{
    transition: transform 0.3s ease;
   }

.bio-arrow.rotate i{
    transform: rotate(180deg);
}
.author-image-wrapper{
    width: 150px;
    height: 150px;
    border-radius: 50%;
    overflow: hidden;
    margin: 10px auto;
    }

.author-image-wrapper img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.image-wrapper {
    position: relative;
    margin: 0 auto;
}

.image-wrapper::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        to bottom,
        #0029b0 70%,   /* green */
        #f6f8af 30%    
    );
    z-index: 0;
   }

/* Image sits above the background shape */
.image-container {
    position: relative;
    z-index: 1;
    padding-right: 50px; /* creates overlap feel */
}

.image-container img {
    width: 100%;
    display: block;
    border-radius: 3px;
}

/* Caption card */
.caption-card {
    position: relative;
    z-index: 1;
    background: #f6f8af; 
    margin: 0; 
    width: 100%;      
    padding: 10px 10px; 
    font-size: 14px;
    line-height: 1.4;
    border-radius: 0 0 6px 6px;
}

.fi-nav-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.fi-nav-link {
    display: flex;
    align-items: center;
    gap: 2px;              
    text-decoration: none;
    font-weight: 600;
}

/* remove any default spacing issues */
.fi-arrow {
    font-weight: 700;
    font-size: 18px;
    margin: 0;
    padding: 0;
    line-height: 1;
}

/* tighter look */
.fi-nav-link span {
    margin: 0;
    padding: 0;
}

/* optional hover */
.fi-nav-link:hover {
    text-decoration: underline;
}

.fi-next-row {
    display: flex;
    align-items: center;       
    justify-content: center;   
    gap: 10px;                 
    text-decoration: none;
    min-height: 80px;   
}

.fi-arrow-box {
    font-weight: 700;
    font-size: 18px;
    display: flex;
    align-items: center;
}

.fi-next-text {
    font-weight: 600;
    text-align: center;
}


.fi-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

/* DESKTOP layout */
.fi-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
/* arrow styling */
.fi-arrow {
    font-size: 1.6rem;
    color: #007bff;
    }

.hero-image{
    width: 100%;
    height: 500px;
    object-fit: cover;
}

.hero-overlay {
    position: absolute;
    bottom: 0;
    right: 0;

    width: 45%;
    height: auto; 
    max-height: none;   
    overflow: visible;          
    
    background: rgba(9, 247, 116, 0.55);
    backdrop-filter: blur(1px);

    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

/* content */
.hero-content {
    max-width: 800px;
}

/* button styling */
.hero-overlay .btn {
    border-radius: 0;
    border: 2px solid #fff;
    transition: 0.3s ease;
}

.hero-overlay .btn:hover {
    background: #fff;
    color: #048f10;
}

.btn-primary {
    background-color: #048f10 !important;
    border-color: #048f10 !important;
    color: #fff !important;
    box-shadow: none !important;
}
:root {
    --primary: #28a745;
    --light: #F5F5F5;
    --dark: #353535;
}

.fw-medium {
    font-weight: 500 !important;
}

.fw-bold {
    font-weight: 700 !important;
}

.fw-black {
    font-weight: 900 !important;
}

/* =========================
BACK TO TOP
========================= */

.back-to-top{
    position: fixed;
    right: 30px;
    bottom: 30px;

    width: 58px;
    height: 58px;

    background: rgba(25,135,84,0.92);
    color: #fff;

    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    font-size: 20px;

    text-decoration: none;

    opacity: 0;
    visibility: hidden;

    transform: translateY(20px);

    transition:
        opacity 0.35s ease,
        transform 0.35s ease,
        background 0.3s ease;

    z-index: 9999;

    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
}

/* SHOW BUTTON */

.back-to-top.show{
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* HOVER */

.back-to-top:hover{
    background: blue;
    color: #fff;
    transform: translateY(-4px);
}

/* ICON */

.back-to-top i{
    color: #fff;
    line-height: 1;
}
/*** Spinner ***/
#spinner {
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s ease-out, visibility 0s linear .5s;
    z-index: 99999;
}

#spinner.show {
    transition: opacity .5s ease-out, visibility 0s linear 0s;
    visibility: visible;
    opacity: 1;
}


/*** Button ***/
.btn {
    font-weight: 500;
    transition: .5s;
}

.btn.btn-primary,
.btn.btn-secondary {
    color: #FFFFFF;
}
.btn-primary:hover {
    background-color: #218838 !important;
    border-color: #1e7e34 !important;
}
.text-primary {
    color: #28a745 !important;
}
a {
    color: #28a745;
}

a:hover {
    color: #1e7e34;
}

.nav-pills .nav-link.active {
    background-color: #28a745 !important;
}
.bg-primary {
    background-color: #28a745 !important;
}
.btn-square {
    width: 38px;
    height: 38px;
}

.btn-sm-square {
    width: 32px;
    height: 32px;
}

.btn-lg-square {
    width: 48px;
    height: 48px;
}

.btn-square,
.btn-sm-square,
.btn-lg-square {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: normal;
}

/*** Navbar ***/
#mainNavbar{
    background: transparent;
    transition: 0.4s;
}

.navbar-light .navbar-nav .nav-link{
    color: #ffffff;
    font-weight: 700;
}

#mainNavbar.scrolled{
    background: #048f10;
}

#mainNavbar.scrolled .nav-link{
    color: #ffffff !important;
}

.navbar .dropdown-toggle::after {
    border: none;
    content: "\f107";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    vertical-align: middle;
    margin-left: 8px;
}

.navbar-light .navbar-nav .nav-link {
    margin-right: 30px;
    padding: 25px 0;
    color: #FFFFFF;
    font-size: 15px;
    font-weight: 500;
    text-transform: uppercase !important;
    outline: none;
}

.navbar-light .navbar-nav .nav-link:hover,
.navbar-light .navbar-nav .nav-link.active {
    color: var(--primary);
}

.navbar-light .navbar-brand,
.navbar-light a.btn {
    height: 75px;
}

.navbar-light .navbar-nav .nav-link {
    color: var(--dark);
    font-weight: 500;
}

.navbar-light.sticky-top {
    top: -100px;
    transition: .5s;
}
.dropdown-menu {
    background: #fff;
    border: none;
    border-radius: 0;             
    padding: 0;
    overflow: hidden;     
}

.dropdown-item {
    position: relative;
    padding: 12px 20px;
    color: #000;
    transition: all 0.3s ease;
}

.dropdown-item:hover {
    background: rgba(13, 110, 253, 0.08); /* soft blue shade */
    color: #0d6efd;
}
.owl-carousel-item{
    height: 500px;
    overflow: hidden;
}
.dropdown-item::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 2px;
    background: #0d6efd;
    }

.dropdown-item:hover::after {
    width: 100%;
}

.navbar-brand .logo {
    max-height: 70px; 
    width: auto;
}
 
.header-carousel .owl-carousel-item img {
        position: absolute;
        width: 100%;
    height: auto;
    max-height: 100%;
    object-fit: cover; 
    }

    
    .header-carousel .owl-carousel-item h1 {
        font-size: 30px;
        font-weight: 600;
    }

.header-carousel .owl-nav {
    position: absolute;
    width: 200px;
    height: 45px;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: space-between;
}

.header-carousel .owl-nav .owl-prev,
.header-carousel .owl-nav .owl-next {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    background: transparent;
    border: 1px solid #FFFFFF;
    font-size: 22px;
    transition: .5s;
}

.header-carousel .owl-nav .owl-prev:hover,
.header-carousel .owl-nav .owl-next:hover {
    background: var(--primary);
    border-color: var(--primary);
}

.header-carousel .owl-dots {
    position: absolute;
    height: 45px;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.header-carousel .owl-dot {
    position: relative;
    display: inline-block;
    margin: 0 5px;
    width: 15px;
    height: 15px;
    background: transparent;
    border: 1px solid #FFFFFF;
    transition: .5s;
}

.header-carousel .owl-dot::after {
    position: absolute;
    content: "";
    width: 5px;
    height: 5px;
    top: 4px;
    left: 4px;
    background: transparent;
    border: 1px solid #FFFFFF;
}

.header-carousel .owl-dot.active {
    background: var(--primary);
    border-color: var(--primary);
}
.page-header-wendy {background: url(../img/header/wendy-parent.png) center center no-repeat fixed; background-size: cover; height: 400px;align-items: flex-end;}
.page-header-brenda {background: url(../img/header/asasira-brenda.png) center center no-repeat fixed; background-size: cover; height: 400px;align-items: flex-end;}
.page-header-liz {background: url(../img/header/liz-rwabu.png) center center no-repeat fixed; background-size: cover; height: 400px;align-items: flex-end;}
.page-header-denis {background: url(../img/header/denis-ouma.png) center center no-repeat fixed; background-size: cover; height: 400px;display: flex;
    align-items: flex-end;} 

/*** Section Title ***/
.section-title h1 {
    position: relative;
    display: inline-block;
    padding: 0 60px;
}
.tight2-box {
    max-width: 1000px;
    margin: 2px auto; 
    padding-top: 10px; 
    padding-bottom: 5px;
    padding-left: 8px; 
    background-color: #c0deed; 
    border-radius: 5px;
}
.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
    border: none;
    outline: none;
  }
   
.section-title.text-start h1 {
    padding-left: 0;
}

.section-title h1::before,
.section-title h1::after {
    display: none;
}

.section-title h1::before {
    left: 0;
}

.section-title h1::after {
    right: 0;
}

.section-title.text-start h1::before {
    display: none;
}


/*** Service ***/
.service-item img {
    transition: .5s;
}

.service-item:hover img {
    transform: scale(1.1);
}
.last-price{
    text-decoration: line-through; 
    color: gray;
    margin-bottom: 2px;
}
.product-price{
    margin-bottom: 2px; 
}

.wordart1 {
    font-family:sans-serif;
     
    color: transparent; 
    margin: 8px; 
   -webkit-text-stroke-width: 1.5px; 
    -webkit-text-stroke-color: rgb(4, 147, 61); 
    background-color: transparent; 
    display: flex; 
    align-items: start; 
    font-size: 8rem; 
    text-align: center; 
    font-weight: normal;
    margin-bottom: 12px;
    margin-left: 0;
}
   .wordart {
    font-family:sans-serif;
     
    color: transparent; 
    margin: 10px; 
   -webkit-text-stroke-width: 1.5px; 
    -webkit-text-stroke-color: rgb(4, 147, 61); 
    background-color: transparent; 
    display: flex; 
    align-items: start; 
    font-size: 6rem; 
    text-align: center; 
    font-weight: normal;
    margin-bottom: 12px;
    margin-left: 0;
}

.containnneer {
    background-color: #e9f5e9; 
    padding: 20px;
    margin-top: 0;
    width: 100%;
}
.form-group {
    margin-bottom: 15px;
}

/*** Project Portfolio ***/
#portfolio-flters li {
    display: inline-block;
    font-weight: 500;
    color: var(--dark);
    cursor: pointer;
    transition: .5s;
    border-bottom: 2px solid transparent;
}

#portfolio-flters li:hover,
#portfolio-flters li.active {
    color: white;
    border-color: none;
}

.portfolio-item img {
    transition: .5s;
}

.portfolio-item:hover img {
    transform: scale(1.1);
}

.portfolio-item .portfolio-overlay {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 0;
    height: 0;
    bottom: 0;
    left: 50%;
    background: rgba(53, 53, 53, .7);
    transition: .5s;
}

.portfolio-item:hover .portfolio-overlay {
    width: 100%;
    height: 100%;
    left: 0;
}

.portfolio-item .portfolio-overlay .btn {
    opacity: 0;
}

.portfolio-item:hover .portfolio-overlay .btn {
    opacity: 1;
}


/*** Team ***/
.team-item img {
    transition: .5s;
}

.team-item:hover img {
    transform: scale(1.1);
}

.team-item .team-social {
    position: absolute;
    width: 38px;
    top: 50%;
    left: -38px;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    background: #FFFFFF;
    transition: .5s;
}

.team-item .team-social .btn {
    color: var(--primary);
    background: #FFFFFF;
}

.team-item .team-social .btn:hover {
    color: #FFFFFF;
    background: var(--primary);
}

.team-item:hover .team-social {
    left: 0;
}


/*** Testimonial ***/
.testimonial-carousel::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    height: 100%;
    width: 0;
    z-index: 1;
}

.testimonial-carousel::after {
    position: absolute;
    content: "";
    top: 0;
    right: 0;
    height: 100%;
    width: 0;
    z-index: 1
}


.testimonial-carousel .owl-item .testimonial-text {
    border: 5px solid var(--light);
    transform: scale(.8);
    transition: .5s;
}

.testimonial-carousel .owl-item.center .testimonial-text {
    transform: scale(1);
}

.testimonial-carousel .owl-nav {
    position: absolute;
    width: 350px;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: space-between;
    opacity: 0;
    transition: .5s;
    z-index: 1;
}

.testimonial-carousel:hover .owl-nav {
    width: 300px;
    opacity: 1;
}

.testimonial-carousel .owl-nav .owl-prev,
.testimonial-carousel .owl-nav .owl-next {
    position: relative;
    color: var(--primary);
    font-size: 45px;
    transition: .5s;
}

.testimonial-carousel .owl-nav .owl-prev:hover,
.testimonial-carousel .owl-nav .owl-next:hover {
    color: var(--dark);
}


/*** Footer ***/

.upds-main-footer{
    background: url('<?php echo BASE_URL; ?>img/footer.jpg') center center no-repeat;
    background-size:cover;
}

.footer .btn.btn-social {
    margin-right: 5px;
    width: 35px;
    height: 35px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--light);
    border: 1px solid #FFFFFF;
    transition: .3s;
}

.footer .btn.btn-social:hover {
    color: var(--primary);
}

.footer .btn.btn-link {
    display: block;
    margin-bottom: 5px;
    padding: 0;
    text-align: left;
    color: #FFFFFF;
    font-size: 15px;
    font-weight: normal;
    text-transform: capitalize;
    transition: .3s;
}

.footer .btn.btn-link::before {
    position: relative;
    content: "\f105";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    margin-right: 10px;
}

.footer .btn.btn-link:hover {
    color: var(--primary);
    letter-spacing: 1px;
    box-shadow: none;
}

.footer .copyright {
    padding: 20px 0;
    font-size: 15px;
    border-top: 1px solid rgba(256, 256, 256, .1);
}

.footer .copyright a {
    color: var(--light);
}

.footer .copyright a:hover {
    color: var(--primary);
}
.moderate-image{
    width:430px;
    height:430px;
    border-radius:50%;
    object-fit:cover;
    object-position:center;
    position:relative;
    top:-80px;
}

.smaller-image {
    max-width: 250px; 
    height: 250px; 
    display: flex;
}
.larger-image {
    max-width: 350px; 
    height: 350px; 
    display: flex;
}
.image-placeholder {
    width: 100%;
    max-height: 400px;
    overflow: hidden; 
}

.image-placeholder img {
    width: 100%;
    height: auto;
}
.red-image {
    width: 390px; 
    height: 390px; 
    overflow: hidden;
}

.blog-text {
    padding-bottom: 20px;
  }
  .profile-text {
    padding-top: 20px;
}
.blog .blog-text h4 {
    font-size: 22px;
    font-weight: 700;
}

.blog .blog-text h4 a {
    color: #4a4c70;
    padding-bottom: 6px;
}

.blog .blog-text p {margin: 0;}
.whates-img{
    position:relative !important;
    aspect-ratio:1/1;
    width:100%;
    overflow:hidden;
    border-radius:2px;
}
  

.tags {margin-bottom: 10px; font-size: 12px; text-transform: uppercase;}
.chris-boo{
    margin-bottom: 12px;
    padding-top: 12px;
    overflow: hidden;
    border-radius: 6px;
}

.tag-link {
    display: inline-block;
    background-color: #eaf0ff;
    padding: 3px 4px;
    margin-bottom: 5px;
    margin-right: 5px;
    font-weight: bold;
    text-decoration: none;
    color: #333; 
}

.tag-link:hover {
    background-color: #283593; 
    color: white;
}

.current-page {
    pointer-events: none; 
    color: rgba(149, 147, 147, 0.93)!important;
}

.single .single-content {
    position: relative;
    margin-bottom: 30px;
    overflow: hidden;
}

.single .single-content img {
    margin-bottom: 20px;
    width: 100%;
}
.single {
    position: relative;
    padding: 45px 0;
}
.whitebox {
    background-color: #ffffff;
    display: inline-block;
    padding: 20px;
    border-radius: 5px;
    }
    .breadcrumb-links {
      overflow-x: initial;
    }

    .related-post-box {
        background-color: #ffffff;
        padding: 10px;
        padding-left: 10px;
        border-radius: 5px;
        margin-bottom: 20px;
    }
.related-img{
    width: 100%;
    height: 240px;
    object-fit: cover;
}
.relatedpost {
    text-align: left; 
    padding-left: 40px; 
    
}

.partner-logo {
    transition: transform 0.3s ease-in-out;
}

.partner-logo:hover {
    transform: scale(1.1);
}


.flag{
    position: absolute;
    top: 12px;
    left: 12px;

    background: #FFEBCC;
    color: orange;

    padding: 6px 10px;
    border-radius: 4px;

    font-size: 14px;
    font-weight: 700;

    z-index: 20;

    line-height: 1;
}

.blue-box {
    background-color: #cce5ff; 
    padding: 15px; 
    margin-bottom: 20px; 
    border-radius: 10px;
    
}
.content {
    flex: 1;
    text-align: left;

}

.box-link {
    text-decoration: none;
   
}

.box-link:hover {
    color: rgb(3, 114, 251);
}

.box-link:hover .wordart1,
.box-link:hover h1 {
    color: rgb(3, 114, 251);
}

.box-link:hover p {
    color: rgb(3, 114, 251);
    }

.blank-circle {
    position: absolute;
    background-color: transparent;
    border: 1px dashed #0288d1;
    border-radius: 50%;
    width: 50%;
    height: 50%;
    max-width: 120px;
    max-height: 120px;
    transition: all 0.3s ease;
    pointer-events: none;
}

.black-box {
    background-color: rgba(5, 136, 166, 0.8);
    border-radius: 3px;
    display: inline-block;
    margin-left: 20px;
    margin-top: 150px;
    padding: 10px;
    padding-bottom: 20px;
}

.content-container {
    text-align: center;
    padding: 0;
    margin: 0;
}

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

h1.display-3 {
    margin: 0;
}

.animated {
    animation-duration: 1s;
    animation-fill-mode: both;
}

.slideInDown {
    animation-name: slideInDown;
}
/* =========================
SLIDE IN DOWN
========================= */

@keyframes slideInDown {

    from {
        transform: translate3d(0, -100%, 0);
        visibility: visible;
    }

    to {
        transform: translate3d(0, 0, 0);
    }

}

/* =========================
MOVE LEFT
========================= */

@keyframes moveLeft {

    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(-100%);
    }

}
.content-box {background-color:rgba(5, 136, 166, 0.8);padding: 20px;border-radius: 2px;max-width: 300px;margin: 0 auto;position: relative;text-align:left;color: white;}
.content1-box {
    background-color: rgba(5, 136, 166, 0.8);
    padding: 20px;
    border-radius: 5px;
    max-width: 300px;
    margin: 0 auto;
    position: relative;
    right: 0;
}

.content1{color: white;}
.content{color: white; text-align: left;}.content-wrapper {display: none;}.container2-fluid {padding: 0;}.content-wrapper.active {display: block;}.dot-container {text-align: left;margin-top: 10px;} .dot-container1 {text-align:right;margin-top: 10px;}
.dot {height: 10px;width: 10px;margin: 0 5px;background-color: white;border-radius: 50%;display: inline-block;cursor: pointer;transition: background-color 0.6s ease;}
.dot.active {background-color: #717171;}

  .do {
    font-size: 18px; 
    font-style: italic;
    text-align: right;
    color: white;
}

.content-container {
    width: 100%;
    max-width: 70%;
    box-sizing: border-box;
    overflow: hidden;
    max-height: 450px;
    text-align: left;
    margin: 0 auto; 
    padding-left: 0; 
}


.white-box {
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.5);
    overflow: hidden;
    display: flex;
   padding: 20px;
   }

.product-details {
    display: flex;
    align-items: center;
}

.product-image {
    width: 100%;
    max-width: 400px;
    padding: 0;
}

.product-image img {
    width: 100%;
    height: auto;
    }

.product-info {
    margin-left: 20px;
}

.big {
    font-size: 18px;
    font-weight: bold;
}

.sell-box {
    background-color: #3498db;
    color: #ffffff;
    padding: 10px 10px;
    border-radius: 5px;
    width: fit-content;
    margin-bottom: 20px;
}

.price-table {
    border-collapse: separate;
    border-spacing: 0;
    border-radius: 10px;
    overflow: hidden;
    width: 100%; 
    border: 2px solid red;
    }

.price-table td {
    padding: 10px;
    text-align: left;
    font-family: sans-serif;
    font-size: 16px;
}
.shaded-row {
    background-color: red;
    color: white;
    height: 50px;
}
.transparent-bg {
    background-color: transparent;
}

.stock-info {
    font-weight: bold;
}

.seller {
    font-weight: bold;
    font-size: 18px;
    color: #333;
}

.social img {
    margin-right: 10px;
    width: 30px;
    height: auto;
}

.warning-message {
    margin-top: 20px;
    font-size: 16px;
}

.price-value {
    font-size: 24px;
    font-weight: bold;
    color: black;
}

.owl-prev {
    left: 10px;
}
.owl-next {
    right: 10px;
}
.orangered-square {
    border: 2px solid orangered;
    border-radius: 2px;
    padding: 0;
    margin-top: 0; 
}

.sidechat {
    padding: 10px;
}
.extended-container {
    margin-left: 20px;
}

.focus {
    width: 100%;
    height: auto;
    padding-top: 25px;
    padding-bottom: 50px;
}
.focuss {
   padding-top: 25px;
    
}
.bluish-boxes {
    background-color: red;
    padding: 20px;
    margin: 0 auto; 
    max-width: 800px;
    padding-left: 50px; 
}
.bluish-box {
    background-color: #F0E6F4;
    padding: 0; }
.blui-box {
    background-color: #FFE6E6;
    padding: 0; }
.bluis-box {
    background-color: #E6F0FF;
    padding: 0; }

    .member-card {
        text-align: center;
        margin-bottom: 20px;
    }

    .member-card img {
        max-width: 100%;
        height: auto;
        border-radius: 50%;
    }

    .member-card p {
        margin-bottom: 5px;
    }

.displa{
    font-size: 50px;
}
p {
    font-size: 18px;
  }
  .bullet-list{
    font-size: 18px;
  }
  .gradient-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0, 42, 76, 0.9) 0%, rgba(4, 67, 101, 0) 70%);
    pointer-events: none; 
}

.align-items-end {
    align-items: flex-end;
    padding-bottom: 90px; 
}
.puff {color: white; }

/* ======================================================
MEDIA QUERIES
====================================================== */

/* =========================
1400px
========================= */

@media (min-width: 1400px){

    .contact-text{
        padding-left: calc(((100% - 1320px) / 2) + .75rem);
    }

    .quote-text{
        padding-right: calc(((100% - 1320px) / 2) + .75rem);
    }

    .feature-text{
        padding-left: calc(((100% - 1320px) / 2) + .75rem);
    }

    .about-text{
        padding-right: calc(((100% - 1320px) / 2) + .75rem);
    }

}
/* =========================
1200px
========================= */

@media (max-width: 1200px){

    .content-container{
        max-width: 80%;
        margin-left: 0;
    }

}
/* =========================
1200px
========================= */

@media (min-width: 1200px){

    .contact-text{
        padding-left: calc(((100% - 1140px) / 2) + .75rem);
    }

    .quote-text{
        padding-right: calc(((100% - 1140px) / 2) + .75rem);
    }

    .feature-text{
        padding-left: calc(((100% - 1140px) / 2) + .75rem);
    }

    .about-text{
        padding-right: calc(((100% - 1140px) / 2) + .75rem);
    }

}

/* =========================
992px
========================= */

@media (max-width: 992px){

    .wordart1{
        text-align: center;
        margin-bottom: 0;
    }

    .mt-lg-3{
        margin-top: 3rem !important;
    }

    .white-box{
        padding: 15px;
    }

    .sell-box{
        font-size: 14px;
    }

    .price-value{
        font-size: 15px;
    }

    .price-table td{
        padding: 8px;
    }

    .seller{
        font-size: 16px;
    }

    .product-details{
        flex-direction: column;
        align-items: flex-start;
    }

    .product-info{
        margin-left: 0;
        margin-top: 10px;
    }

    .content-container{
        max-width: 90%;
        margin-left: 0;
    }
     .blank-circle{
        width: 30%;
        height: 30%;
        max-width: 60px;
        max-height: 60px;
    }

}

/* =========================
MIN 992px
========================= */

@media (min-width: 992px){

    .container-huss-xxl{
        width: 60%;
        margin-left: 40px;
    }

    .col-lg-8{
        width: 66.66%;
    }

    .col-lg-4{
        width: 33.33%;
        float: right;
        margin-top: 0;
    }
    .container.contact,
    .container.quote,
    .container.feature,
    .container.about{
        max-width: 100% !important;
    }

    .contact-text{
        padding-left: calc(((100% - 960px) / 2) + .75rem);
    }

    .quote-text{
        padding-right: calc(((100% - 960px) / 2) + .75rem);
    }

    .feature-text{
        padding-left: calc(((100% - 960px) / 2) + .75rem);
    }

    .about-text{
        padding-right: calc(((100% - 960px) / 2) + .75rem);
    }

    .testimonial-carousel::before,
    .testimonial-carousel::after{
        width: 300px;
    }

    .navbar .nav-item .dropdown-menu{
        display: block;
        border: none;
        margin-top: 0;
        top: 150%;
        opacity: 0;
        visibility: hidden;
        transition: .5s;
    }

    .navbar .nav-item:hover .dropdown-menu{
        top: 100%;
        visibility: visible;
        opacity: 1;
    }

}

/* =========================
991px
========================= */

@media (max-width: 991px){

    .col-lg-8{
        width: 100%;
    }

    .col-lg-4{
        width: 100%;
        margin-top: 30px;
    }
    .team-card img{
        height: 300px;
    }

    .bio-wrapper{
        flex-direction: column;
    }

    .bio-content{
        width: 100%;
        height: auto;
    }

    .bio-close-side{
        width: 100%;
        height: 100px;
    }

    .bio-photo{
        float: none;
        width: 100%;
        height: 350px;
        margin-right: 0;
    }

}
/* =========================
991.98px
========================= */

@media (max-width: 991.98px){

    .wordart,
    .wordart1{
        text-align: left;
        margin-left: 0;
    }
}

/* =========================
768px
========================= */

@media (max-width: 768px){

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

    .big{
        text-align: left !important;
    }

    .content-container{
        max-width: 100%;
        margin-left: 0;
    }

    /* HERO CAROUSEL */

    .owl-carousel-item{
        height: 100vh;
        overflow: hidden;
    }

    .owl-carousel-item img.img-fluid{
        width: 100%;
        height: 100vh;
        object-fit: cover;
    }

    .owl-carousel-item .content-container{
        max-height: 100%;
        overflow: hidden;
    }

    .owl-carousel-item .container,
    .owl-carousel-item .container .row{
        height: 100%;
    }
    .centered{
        text-align: center;
    }

    .do{
        display: inline-block;
        text-align: left;
    }

    .owl-carousel-item h2{
        font-size: 20px;
    }

    .owl-carousel-item p{
        font-size: 12px;
        margin-right: 10px;
    }

    .bullet-list{
        font-size: 1rem;
        padding-bottom: 10px;
    }

    .container{
        padding-left: 5px;
        padding-right: 10px;
    }

    .extend-left-on-small{
        left: -50px;
        margin-right: 80px;
    }

    .content-box{
        max-width: 80%;
        margin: 0 auto 0 0;
        text-align: left;
    }

    .blue-box{
        padding: 10px;
    }

    .wordart1{
        margin-right: 10px;
    }

    .content{
        text-align: center;
    }

    h1{
        font-size: 1.5rem;
    }

    p{
        font-size: 1rem;
    }

    .partner-item1{
        text-align: center;
        padding: 20px 0;
    }

    .partner-row{
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

     .partner-row .col-lg-2,
    .partner-row .col-md-2,
    .partner-row .col-3{
        flex: 0 0 25% !important;
        max-width: 25% !important;
        padding: 6px !important;
    }

    .partner-logo{
        max-width: 70px;
        height: auto;
    }

    .partner-item1{
        text-align: center;
        padding: 6px 0;
    }

    .breadcrumb-links{
        padding-left: 27px;
    }
 .container2-fluid{
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
    }

    .header-carousel .owl-carousel-item{
        position: relative;
        min-height: 200px;
    }

    .hero-overlay{
        width: 100%;
        left: 0;
        right: 0;
        bottom: 0;

        background: rgba(9, 247, 116, 0.55);

        padding: 0.5rem 0.8rem;

        height: auto;
        max-height: none;

        overflow: visible;

        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;

        text-align: center;
    }

    .hero-overlay h1{
        font-size: clamp(1.5rem, 5vw, 2.2rem);
    }

    .hero-overlay h4{
        font-size: clamp(1rem, 3vw, 1.3rem);
    }

    .hero-overlay p{
        font-size: clamp(0.85rem, 2.5vw, 1rem);
    }

    .fi-mobile-top{
        display: flex;
        justify-content: space-between;
        align-items: center;

        margin-bottom: 6px;
        padding-right: 12px;
    }

    .fi-header .fi-arrow{
        display: none;
    }

    .fi-header{
        display: block;
    }

    .fi-header h1{
        margin-top: 0;
        font-size: 1.4rem;
    }

    .wordart{
        font-size: 2rem;
    }
.fi-nav-row{
        flex-direction: column;
        gap: 10px;
    }

    .quote-section{
        padding: 60px 15px;
    }

    .quote-content p{
        font-size: 18px;
    }

    .quote-content i{
        font-size: 30px;
    }

    .about-header,
    .page3header,
    .about-header3{
        display: flex;
        flex-direction: column;
    }

    .about-header-left,
    .about-header-right,
    .page3header-left,
    .about-page3header-right,
    .about-header3-left,
    .about-header3-right{
        width: 100%;
    }

    .about-header-right,
    .about-page3header-right,
    .about-header3-right{
        min-height: 250px;

        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;

        order: 1;
    }

    .about-header-left,
    .page3header-left,
    .about-header3-left{
        order: 2;
        padding: 30px 20px;
    }

    .header-content{
        padding-left: 0;
        padding-right: 0;
        text-align: center;
    }
}
/* =========================
768px
========================= */

@media (max-width: 768px) {
    .header-carousel .owl-carousel-item {
        position: relative;
        min-height: 200px;
    }
    .row.g-5 > div{
        text-align: center;
    }

    .row.g-5 .d-flex.align-items-center.justify-content-between{
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center;
    }

    .row.g-5 .display-1{
        font-size: 2.5rem !important;
        margin-top: 10px;
        margin-bottom: 10px;
    }

    .row.g-5 h6{
        text-align: center !important;
        display: block;
        margin: 0 auto;
    }
    .testimonial-item .d-flex{
        flex-direction: column !important;
        align-items: center !important;
        text-align: center;
    }

    .testimonial-content{
        width: 100%;
    }
    .testimonial-quote{
        text-align: left;
    }
}

/* =========================
767px
========================= */

@media (max-width: 767px){

    .puff{
        font-size: small !important;
        line-height: 20px;
        text-align: center;
        padding-top: 90px;
    }

    .team-card img{
        height: 260px;
    }

    .team-overlay{
        opacity: 1;

        background: linear-gradient(
            to top,
            rgba(0,0,0,0.8),
            rgba(0,0,0,0.1)
        );
    }

}
/* =========================
576px
========================= */

@media (max-width: 576px){

    .extend-left-on-small{
        left: -30px;
        margin-right: 80px;
    }

}

/* =========================
GENERAL
========================= */


.message{
    font-size: 14px;
    color: #888;
}

/* =========================
   UPDS PRODUCT CARDS
========================= */

.upds-product-card{
    background: #fff;
    overflow: hidden;
    border-radius: 10px;
    height: 100%;
    position: relative;

    transition: box-shadow 0.2s ease,
                transform 0.2s ease;
}

/* SMALL JUMIA-LIKE HOVER */

.upds-product-card:hover{
    transform: translateY(-2px);

    box-shadow:
        0 2px 8px rgba(0,0,0,0.08),
        0 6px 18px rgba(0,0,0,0.10);

    z-index: 5;
}

/* IMAGE — NO TRANSITION */

.upds-product-card img{
    width: 100%;
    height: 320px;
    object-fit: cover;
    display: block;
    background: #fff;

    transition: none !important;
    transform: none !important;
}

.news-brand{
    transition:all 0.25s ease;
    display:inline-block;
}

.news-brand:hover{
    transform:scale(1.05);
}

/* CONTENT */

.upds-product-content{
    padding: 18px;
    background: #fff;
    padding:10px 8px;
}

.upds-product-content h4{
    color: green;
    font-weight: 600;
    font-size: 20px;
    margin-bottom: 10px;
}

.product-price{
    color: #000;
    font-weight: 700;
    font-size: 22px;
    margin-bottom: 4px;
}

.last-price{
    color: #888;
    text-decoration: line-through;
    margin-bottom: 8px;
}

.stock-status{
    color: #0d6efd;
    font-weight: 600;
}

.upds-product-media{
    position: relative;
    width: 100%;
    height: 320px;
    overflow: hidden;
    background: #fff;
    border-radius: 10px 10px 0 0;
}

.upds-product-media img{
    width:100%;
    height:350px;
    object-fit:cover;
    display: block;
    transform: none !important;
    transition: none !important;
}

.upds-product-card:hover .upds-product-media img{
    transform: none !important;
}
.related-products .upds-product-media{
    height:220px;
    overflow:hidden;
}

.related-products .upds-product-media img{
    width:100%;
    height:220px;
    object-fit:contain;
}
.upds-product-flag{
    position: absolute;
    top: 12px;
    left:auto;
    right: 12px;
    background: #FFEBCC;
    color: orange;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    z-index: 50;
}
/* =========================================
OPINION DISCLAIMER
========================================= */

.opinion-disclaimer-wrapper{
    position: relative;
    margin-top: 60px;
    padding-top: 30px;
    text-align: center;
}

.opinion-icon i{
    margin: 0;
    padding: 0;
    line-height: 1;
}

.opinion-disclaimer-text{
    max-width: 1000px;
    margin: auto;
}

.opinion-disclaimer-text p{
    color: #0d47a1;
    font-style: italic;
    line-height: 1.9;
    font-size: 15px;
    margin-bottom: 0;
    text-align: left;
}
.opinion-line{
    height: 1px;
    background-color: #cfcfcf;
    width: calc(100% - 24px);
    position: absolute;
    top: 51px;
    left: 12px;
    z-index: 1;
}

.opinion-icon{
    position: relative;
    z-index: 2;
    width: 42px;
    height: 42px;
    margin: 0 auto 20px;
    border-radius: 50%;
    background: #f5f5f5;
    border: 2px solid #0d5bd7;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0d5bd7;
    font-size: 22px;
    line-height: 1;
}
/* =========================================
RESOURCE BACK BUTTON
========================================= */

.resource-back-btn{
    background: green;
    border-radius: 6px;
    padding: 10px 18px;
    color: #fff !important;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    font-weight: 600;
    transition: 0.3s ease;
}

.resource-back-btn:hover{
    opacity: 0.92;
    color: #fff !important;
}

.resource-back-icon{
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 1.5px solid rgba(255,255,255,0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    flex-shrink: 0;
}

.resource-back-text{
    line-height: 1;
}

.active-resource-tag,
.active-news-tag{
    background-color: #283593 !important;
    color: #fff !important;
}

/* =========================================
MAIN NEWS CARDS
========================================= */
.news-date{
    margin-top:6px !important;
}
.whates-img{
    position:relative;
    height:260px;
    overflow:hidden;
    border-radius:0 !important;
    margin-bottom:6px;
}

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

.news-card-meta{
    position:absolute;
    top:18px;
    left:0;
    z-index:3;
    margin:0;
    display:flex;
    align-items:center;
    gap:10px;
    flex-wrap:wrap;
}

.post-label{
    display:inline-block;
    color:#fff;
    font-size:11px;
    font-weight:700;
    letter-spacing:1px;
    padding:8px 22px 8px 16px;
    text-transform:uppercase;
    clip-path:polygon(0 0, 92% 0, 100% 100%, 0% 100%);
}

.label-latest-news{ background:#198754; }
.label-blog-post{ background:#0d6efd; }
.label-opinion{ background:#dc3545; }
.label-event{ background:#ff8800; }

.news-date{
    display:block;

    font-size:15px;

    font-weight:600;

    color:#222;

    margin-bottom:5px;
}

.news-card-link .blog-text{
    padding:0 !important;
    margin-bottom:5px !important;
    min-height:auto !important;
}

.news-card-link .whates-caption h4{
   font-size:18px;
    font-weight:600;
    color:#222;
    margin:0 !important;
    transition:0.3s ease;
    font-family:'Space Grotesk', sans-serif;
}
.news-card-link .blog-text{
    padding:0 !important;
}

.news-card-link .whates-caption h4{
    margin-bottom:0 !important;

    padding-bottom:0 !important;

    line-height:1.2 !important;
}

.whates-caption{
    margin-bottom:0 !important;
    padding-bottom:0 !important;
}

.whats-news-single{
    padding-bottom:0 !important;
}
.news-card-link:hover .whates-caption h4{
    color:#198754 !important;
}

.read-more-link,
.whats-news-single .footer-link{
    display:none !important;
}
.blog-text p{
    margin-top:10px;
}
.blog-text{
    padding:0;
    margin:0;
}

/* =========================================
EVENT DETAIL PAGE
========================================= */

.event-page-bg{
    background:#f4f4f4;
    padding-bottom:30px;
}

.event-top-banner{
    position:relative;
    height:120px;
    background-image:url('../img/background.png');
    background-size:cover;
    background-position:center;
    overflow:hidden;
}

.event-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(
        to top,
        rgba(0,0,0,0.78),
        rgba(0,0,0,0.18),
        rgba(255,255,255,0.05)
    );
}

.event-banner-content{
    position:relative;
    z-index:2;
    height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
}

.event-banner-content h2{
    margin:0;
    font-size:38px;
}

.upds-green{
    color:#198754;
    font-weight:900;
    font-size: 300px !important;
    font-family:'PP Neue Montreal', 'Inter', sans-serif;
}

.upds-news{
    color:#09ecfd !important;
    font-weight:250 !important;
}

.event-main-card,
.event-sidebar-card{
    background:#fff;
    padding:25px;
}

.event-category-box{
    background:#198754;
    color:#fff;

    display:inline-block;

    padding:7px 20px;

    font-size:12px;
    font-weight:700;

    margin-bottom:18px;

    transform:skew(-18deg);
}

.event-category-box{
    border-radius:0 !important;
}

.event-main-title{
    font-weight:800;
    margin-bottom:12px;
}

.event-meta-top{
    border-bottom:1px solid #ddd;
    padding-bottom:12px;
    margin-bottom:20px;
    font-size:14px;
    color:#666;
}

.event-author{
    color:#198754;
    font-weight:600;
}

.event-meta-separator{
    display:inline-block;
    height:14px;
    width:1px;
    background:#ccc;
    margin:0 12px;
    vertical-align:middle;
}

.event-featured-image{
    width:100%;
    max-height:420px;
    object-fit:cover;
    display:block;
    border-radius:4px;
}

.event-socials{
    text-align:center;
    margin-top:15px;
}

.event-socials img{
    width:34px;
    margin:0 5px;
}

/* EVENT DATE • TIME • VENUE */

.event-inline-meta-row{
    display:flex;
    flex-wrap:wrap;
    gap:18px;
    justify-content:center;
    align-items:center;
    margin-top:22px;
    margin-bottom:24px;
}

.event-inline-meta-row span{

    display:inline-flex;
    align-items:center;
    gap:10px;

    background:#f4f4f4;

    padding:12px 18px;

    border-radius:50px;

    font-size:14px;
    font-weight:600;

    color:#222;

    line-height:1;
}

.event-inline-meta-row span i{

    color:#198754;

    font-size:15px;
}
.event-action-row{
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    margin-bottom:18px;
}

.event-action-row .btn{
    flex:1;
    min-width:160px;
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:48px;
}

.event-action-row .btn-outline-primary:hover{
    color:#fff !important;
}

/* =========================================
EVENT SIDEBAR
========================================= */

.sidebar-events-box{
    background:#fff;
    border:1px solid #e5e5e5;
    padding:18px;
    margin-bottom:25px;
}

.sidebar-line{
    height:2px;
    background:#d9d9d9;
    margin:15px 0 20px;
}

.sidebar-event-item{
    display:block;
    text-decoration:none;
    padding-bottom:22px;
    margin-bottom:22px;
    border-bottom:1px solid #e1e1e1;
    transition:0.3s;
}

.sidebar-events-box .sidebar-event-item:last-child{
    border-bottom:none !important;
    padding-bottom:0;
    margin-bottom:0;
}

.sidebar-event-image{
    width:100%;
    height:170px;
    overflow:hidden;
    border-radius:4px;
    margin-bottom:14px;
}

.sidebar-event-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:0.4s;
}

.sidebar-event-item:hover img{
    transform:scale(1.04);
}

.sidebar-event-content h6{
    color:#0d6efd !important;
    font-size:21px;
    line-height:1.5;
    margin-bottom:12px;
    transition:0.3s;
}

.sidebar-event-item:hover h6{
    color:#084298 !important;
}

.sidebar-event-date{
    color:#666;
    font-size:14px;
    line-height:1.7;
    text-align:left;
    font-weight:500;
}

.sidebar-event-date strong{
    color:#198754;
}

/* =========================================
FACEBOOK BOX
========================================= */

.facebook-follow-box{
    background:#fff;
    border:1px solid #e5e5e5;
    padding:18px;
}

.facebook-title-wrap{
    display:flex;
    align-items:center;
    gap:8px;
    width:100%;
    margin-bottom:12px;
    white-space:nowrap;
    color:#1877f2;
    font-size:16px;
    overflow:hidden;
    text-overflow:ellipsis;
}

.facebook-circle-icon{
    width:20px;
    height:20px;
    border-radius:50%;
    background:#1877f2;
    display:flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
}

.facebook-circle-icon i{
    color:#fff;
    font-size:18px;
}

.facebook-title-text{
    margin:0;
    white-space:nowrap;
    color:#1877f2;
}

.facebook-line{
    height:3px;
    background:#0d6efd;
    margin:15px 0 22px;
}


/* =========================================
EDITORIAL NEWS HEADER
========================================= */

.news-editorial-header{
    background:#f5f5f5;
    height:auto;
    overflow:hidden;
    border-bottom:1px solid gray;
}

.editorial-left-content{
    padding:45px 50px;
    height:100%;
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.editorial-date-wrap{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:22px;
}

.editorial-date-marker{
    width:16px;
    height:16px;
    background:#198754;
    display:block;
    transform:skew(-20deg);
    flex-shrink:0;
}

.editorial-date{
    font-size:15px;
    font-weight:100;
    text-transform:uppercase;
}

.editorial-title{
    font-size:40px;
    line-height:1;
    font-weight:700;
    margin-bottom:22px;
    font-family:'Space Grotesk', sans-serif;
}

.editorial-divider{
    width:100%;
    height:1px;
    background:#d9d9d9;
    margin-bottom:24px;
}

.editorial-author{
    display:none;
}

.editorial-image-wrap{
    position:relative;
    height:420px !important;
    min-height:unset !important;
    overflow:hidden;
}

.editorial-main-image{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.editorial-image-overlay{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:48%;
    background:linear-gradient(
        to top,
        rgba(0,0,0,0.82),
        rgba(0,0,0,0.20),
        rgba(255,255,255,0.05)
    );
}

.editorial-image-caption{
    position:absolute;
    left:30px;
    right:30px;
    bottom:24px;
    color:#fff;
    font-size:15px;
    line-height:1.6;
    z-index:2;
}

/* =========================================
NEWS TOP BAR
========================================= */

.news-top-bar{
    background:#f4f8fc;
    padding:22px 28px;
    position:relative;
    z-index:999;
    border-bottom:1px solid #ececec;
    box-shadow:
        0 10px 22px rgba(0,0,0,0.12),
        0 3px 6px rgba(0,0,0,0.06);
}

.news-top-inner{
    display:grid;
    grid-template-columns:220px 1fr 300px;
    align-items:center;
    gap:10px;
}

.news-brand{
    justify-self:center;
    display:flex;
    align-items:flex-end;
    justify-content:center;
    width:100%;
    line-height:1;
    white-space:nowrap;
    text-decoration:none;
}
.news-brand-upds{
    color:#198754;
    font-family:'Inter', sans-serif;
    font-size:50px;
    font-weight:600;
    letter-spacing:-4px;
}



.news-brand-news{
    color:#01869a;
    font-family:'Inter', sans-serif;
    font-size:50px;
    font-weight:200;
    letter-spacing:-2px;
    margin-left:2px;
}

.news-top-search{
    justify-self:end;
    position:relative;
    width:300px;
}

.news-top-search input{
    width:100%;
    height:58px;
    border:1px solid #d9d9d9;
    border-radius:60px;
    padding:0 58px 0 24px;
    font-size:17px;
    outline:none;
}

.news-top-search button{
    position:absolute;
    top:50%;
    right:10px;
    transform:translateY(-50%);
    width:45px;
    height:45px;
    border:none;
    border-radius:50%;
    background:transparent;
    color:#111;
    font-size:22px;
}

.news-top-search button:hover{
    color:#198754;
}

/* =========================================
HAMBURGER / SECTIONS MENU
========================================= */

.news-sections-btn{
    background:transparent;
    border:none;
    display:flex;
    align-items:center;
    gap:14px;
    font-size:18px;
    font-weight:700;
    letter-spacing:1px;
    color:#111;
}

.hamburger-lines{
    width:26px;
    display:flex;
    flex-direction:column;
    gap:5px;
}

.hamburger-lines span{
    width:100%;
    height:2px;
    background:#111;
    display:block;
}

.sections-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.55);
    z-index:99999;
    opacity:0;
    visibility:hidden;
    transition:0.3s;
}

.sections-overlay.active{
    opacity:1;
    visibility:visible;
}

.sections-panel{
    width:430px;
    max-width:92%;
    height:100%;
    background:#050505;
    padding:42px 36px;
    overflow-y:auto;
    transform:translateX(-100%);
    transition:0.4s ease;
}

.sections-overlay.active .sections-panel{
    transform:translateX(0);
}

.sections-close{
    position:absolute;
    top:20px;
    right:24px;
    background:transparent;
    border:none;
    color:#fff;
    font-size:30px;
}

.sections-label{
    color:#d6a300;
    font-size:14px;
    font-weight:700;
    letter-spacing:2px;
    margin-bottom:30px;
    margin-top:40px;
}

.section-link{
    display:flex;
    align-items:center;
    gap:0;
    text-decoration:none;
    margin-bottom:28px;
    transition:0.3s;
}

.section-line{
    width:0;
    height:70px;
    flex-shrink:0;
    opacity:0;
    transition:0.3s ease;
    margin-right:0;
}

.section-link:hover .section-line{
    width:10px;
    opacity:1;
    margin-right:18px;
}

.section-link span:last-child{
    color:#fff;
    font-size:30px;
    font-weight:600;
    line-height:1.2;
    transition:0.3s;
}

.section-link:hover span:last-child{
    transform:translateX(4px);
}

.section-green .section-line{ background:#198754; }
.section-orange .section-line{ background:#ff8800; }
.section-blue .section-line{ background:#0d6efd; }

/* =========================================
NEWS PAGE IMAGE HEADER
========================================= */

.news-page-header{
    position:relative;
    width:100%;
    height:360px;
    background-size:cover;
    background-position:center;
    overflow:hidden;
}

.news-page-header-overlay{
    position:absolute;
    inset:0;
    background:linear-gradient(
        to top,
        rgba(0,0,0,0.78),
        rgba(0,0,0,0.20),
        rgba(255,255,255,0.05)
    );
}

.news-page-header-caption{
    position:absolute;
    left:50%;
    bottom:28px;
    transform:translateX(-50%);
    z-index:2;
    width:90%;
    max-width:900px;
    color:#fff;
    font-size:20px;
    line-height:1.6;
    text-align:center;
    font-weight:500;
}
.footer-link i{
    font-size:8px;
    margin-left:4px;
    vertical-align:middle;
    color: gray;
}
/* =========================================
EDITORIAL RELATED POSTS
========================================= */

.editorial-related-section{
    background:#f4f4f4;
    padding-top:10px;
    padding-bottom:10px;
}

.editorial-related-title-wrap{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:10px;
}

.editorial-related-title-square{
    width:15px;
    height:15px;
    background:#198754;
    transform:skew(-18deg);
    flex-shrink:0;
}

.editorial-related-title-wrap h2{
    font-size:20px;
    font-weight:800;
    margin:0;
}

/* Card */
.editorial-related-card{
    position:relative;
    display:block;
    overflow:hidden;
    min-height:260px;
    background:#000;
    text-decoration:none;
}

/* Image */
.editorial-related-card img{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:50% 25%;
    transition:transform .7s ease;
}

/* Dark image overlay */
.editorial-related-overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.55);
    z-index:1;
    transition:background .55s ease;
}

/* Green border */
.editorial-related-card::after{
    content:"";
    position:absolute;
    inset:0;
    border:0 solid #198754;
    z-index:5;
    pointer-events:none;
    transition:border-width .35s ease;
}

.editorial-related-card:hover::after{
    border-width:7px;
}

/* Content */
.editorial-related-content{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%, -50%);
    width:84%;
    z-index:3;

    transition:
        top .7s cubic-bezier(.22,.61,.36,1),
        opacity .4s ease;
}

/* Green line */
.editorial-related-content::before{
    content:"";
    display:block;
    width:60px;
    height:3px;
    background:#198754;
    margin-bottom:14px;

    opacity:1;
    transition:opacity .35s ease;
}

/* Black panel behind title */
.editorial-related-content::after{
    content:"";
    position:absolute;

    top:-18px;
    bottom:-18px;
    left:-20px;
    right:-20px;

    background:rgba(0,0,0,0);
    z-index:-1;

    transition:background .55s ease;
}

/* Title */
.editorial-related-content h3{
    color:#fff;
    font-size:22px;
    line-height:1.35;
    font-weight:700;
    margin:0;
    text-align:left;
    z-index: 10 !important;
}

/* ======================
   HOVER EFFECTS
====================== */

/* Image zoom */
.editorial-related-card:hover img{
    transform:scale(1.04);
}

/* Reduce whole image darkness */
.editorial-related-card:hover .editorial-related-overlay{
    background:rgba(0,0,0,.15);
}

/* Smooth slide downward */
.editorial-related-card:hover .editorial-related-content{
    top:60%;
}

/* Black editorial panel appears */
.editorial-related-card:hover .editorial-related-content::after{
    background:rgba(0,0,0,.80);
}

/* Green line fades away */
.editorial-related-card:hover .editorial-related-content::before{
    opacity:0;
}

/* Mobile */
@media(max-width:768px){

    .editorial-related-card{
        min-height:220px;
    }

    .editorial-related-content{
        width:88%;
    }

    .editorial-related-content h3{
        font-size:19px;
    }

    .editorial-related-card:hover .editorial-related-content{
        top:70%;
    }
}
/* EVENT RELATED SECTION */

.event-related-section{
    background:transparent;
    padding:40px 0 30px;
    margin-top:35px;
}
/* HR UNDER RELATED EVENT */
.event-related-line{
    width:100%;
    height:0.5px;

    background:rgb(140, 140, 140);

    margin-top:0;
    margin-bottom:50px;
}


.event-related-title-wrap{
    display:flex;
    align-items:center;
    gap:10px;
    margin-bottom:10px;
}

.event-related-title-square{
    width:16px;
    height:16px;

    background:#198754;

    display:inline-block;
    flex-shrink:0;

    transform:skew(-20deg);
}
.event-related-title-wrap h2{
    font-size:20px;
    font-weight:800;
    margin:0;
}

.event-related-card{
    display:block;
    height:100%;
    background:#fff;
    color:#111;
    text-decoration:none;
    border-radius:0;
    overflow:hidden;
    border-top:0 solid #198754;
    box-shadow:0 1px 4px rgba(0,0,0,.05);
    transition:border-top .25s ease, box-shadow .25s ease, transform .25s ease;
}

.event-related-card:hover{
    border-top:6px solid #198754;
    box-shadow:0 12px 30px rgba(0,0,0,.14);
    transform:translateY(-2px);
}

/* RELATED EVENT DATE ON IMAGE */

.event-related-image{
    position:relative;
    height:240px;
    overflow:hidden;
}

.event-related-date{

    position:absolute;

    top:0;
    left:0;

    background:#ff8800;

    color:#fff;

    font-size:12px;
    font-weight:700;

    letter-spacing:.5px;

    padding:9px 22px 9px 16px;

    text-transform:uppercase;
    z-index:5;
}
.event-related-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.event-related-body{
    padding:16px 18px 20px;
}


/* UNDERLINE UNDER RELATED EVENT TITLE */

.event-related-body h4{

    font-family:'Space Grotesk', sans-serif;

    font-size:21px;

    line-height:1.35;

    font-weight:500;

    margin:0;

    color:#111;

    padding-bottom:18px;

    border-bottom:1px solid #ffffff;

    transition:.25s ease;
}

.event-related-card:hover h4{
    color:#198754;
}



/* EVENT 2-COLUMN LAYOUT */

.event-two-column-layout{
    display:grid;
    grid-template-columns:150px minmax(0, 1fr);
    gap:32px;
    align-items:start;
}

.event-social-col .editorial-share-sticky{
    position:sticky;
    top:120px;
    padding-top:130px;
}

.event-main-col{
    min-width:0;
}

@media(max-width:991px){

    .event-two-column-layout{
        grid-template-columns:1fr;
    }

    .event-social-col .editorial-share-sticky{
        position:relative;
        top:auto;
        padding-top:0;
        margin-bottom:20px;
    }
}
.event-social-col .editorial-share-icons{
    display:flex !important;
    align-items:center;
    gap:16px;
    flex-wrap:nowrap !important;
}

.event-social-col .editorial-share-icons a{
    display:flex;
    align-items:center;
    justify-content:center;
}








/* =========================================
EDITORIAL ARTICLE LAYOUT
========================================= */

.editorial-article-layout{
    display:grid;
    grid-template-columns:140px 1fr;
    gap:40px;
    align-items:start;
}

.editorial-share-column{
    position:relative;
}

.editorial-share-sticky{
    position:sticky;
    top:120px;
}

.editorial-share-label{
    font-size:14px;
    font-style:italic;
    letter-spacing:0.5px;
    margin-bottom:16px;
    color:#222;
}

.editorial-share-icons{
    display:flex;
    align-items:center;
    gap:18px;
    flex-wrap:wrap;
}

.editorial-share-icons a{
    color:#000;
    font-size:22px;
    transition:0.3s ease;
}

.editorial-share-icons a:hover{
    color:#198754;
}

.editorial-article-main{
    min-width:0;
}

/* =========================================
EDITORIAL FIGURES
========================================= */

.article-content .editorial-figure{
    margin:45px 0 !important;
    width:100% !important;
}

.article-content .editorial-figure img{
    width:100% !important;
    height:420px !important;
    object-fit:cover !important;
    display:block !important;
    border-radius:2px;
}

.editorial-figure figcaption{
    margin-top:12px;
    font-size:15px;
    line-height:1.6;
    color:#666;
    font-style:italic;
}

/* =========================================
RESPONSIVE
========================================= */

@media(max-width:991px){

    .editorial-left-content{
        padding:45px 28px;
    }

    .editorial-title{
        font-size:42px;
    }

    .editorial-summary{
        font-size:18px;
    }

    .editorial-image-wrap{
        height:340px !important;
    }

    .news-top-inner{
        grid-template-columns:1fr;
        gap:20px;
    }

    .news-brand{
        order:1;
    }

    .news-sections-btn{
        order:2;
        justify-self:start;
    }

    .news-top-search{
        order:3;
        width:100%;
        max-width:100%;
    }

    .news-brand-upds{
        font-size:52px;
    }

    .news-brand-news{
        font-size:38px;
    }

    .section-link span:last-child{
        font-size:22px;
    }

    .editorial-related-card{
        min-height:220px;
    }

    .editorial-related-content{
        width:82%;
    }

    .editorial-related-content h3{
        font-size:18px;
    }

    .editorial-article-layout{
        grid-template-columns:1fr;
        gap:25px;
    }

    .editorial-share-sticky{
        position:relative;
        top:auto;
    }
}

@media(max-width:768px){

    .news-page-header{
        height:260px;
    }

    .news-page-header-caption{
        font-size:16px;
        bottom:22px;
    }
}

/* EVENT IMAGE + LEFT SHARE */

.event-image-share-layout{
    display:grid;
    grid-template-columns:110px 1fr;
    gap:28px;
    align-items:start;
    margin-top:25px;
}

.event-share-side{
    position:sticky;
    top:120px;
}

.event-image-area{
    min-width:0;
}


@media(max-width:991px){

    .event-image-share-layout{
        grid-template-columns:1fr;
    }

    .event-share-side{
        position:relative;
        top:auto;
        margin-bottom:20px;
    }
}

/* =========================================
MANUAL DROP CAPS
========================================= */

.editorial-dropcap{

    float:left;

    font-size:4.8rem;

    line-height:.9;

    padding:14px 16px;

    margin:8px 14px 0 0;

    font-weight:700;

    color:#fff;

    border-radius:0;

    font-family:'Space Grotesk', sans-serif;
}

.editorial-dropcap-green{
    background:#198754;
}

.editorial-dropcap-blue{
    background:#0d6efd;
}

.editorial-dropcap-red{
    background:#dc3545;
}

/* =========================================
RESOURCE TOP BAR
========================================= */

.resource-top-bar{

    background:#fff3e0;

    padding:20px 28px;

    border-bottom:1px solid #f2d3a2;

    box-shadow:
        0 10px 22px rgba(0,0,0,.10),
        0 3px 6px rgba(0,0,0,.05);

    position:relative;

    z-index:999;
}

.resource-brand-word{
    color:#d98200 !important;
}

/* =========================================
PAGE WRAP
========================================= */

.resource-page-wrap{
    background:#fff;
    padding-bottom:0;
}

/* =========================================
HEADER
========================================= */

.resource-header-section{
    position:relative;
}

.resource-header-section::after{

    content:"";

    position:absolute;

    left:24px;
    right:24px;

    bottom:0;

    height:1px;

    background:#dcdcdc;

    z-index:20;
}

.resource-header-section .row{

    min-height:560px;

    align-items:stretch;
}

.resource-header-content{

    min-height:560px;

    display:flex;

    flex-direction:column;

    justify-content:center;

    padding:40px 8%;
}

/* TITLE */

.resource-main-title{

    font-family:'Space Grotesk', sans-serif;

    font-size:3.5rem;

    line-height:1.05;

    font-weight:700;

    letter-spacing:-2px;

    color:#111;

    margin-bottom:14px;
}

/* SUMMARY */

.resource-summary-text{

    font-size:1rem;

    line-height:1.85;

    color:#555;

    max-width:650px;

    margin:0;
}

/* =========================================
HEADER IMAGE
========================================= */

.resource-header-image-link{
    display:block;
    text-decoration:none;
}

.resource-header-image-wrap{

    position:relative;

    height:560px;

    overflow:hidden;
}

.resource-header-image{

    width:100%;
    height:100%;

    object-fit:cover;

    display:block;

    transition:transform .7s ease;
}

.resource-header-image-wrap:hover .resource-header-image{

    transform:scale(1.08);
}

/* DARK OVERLAY */

.resource-header-image-overlay{

    position:absolute;

    inset:0;

    background:linear-gradient(
        to top,
        rgba(0,0,0,.78) 0%,
        rgba(0,0,0,.42) 38%,
        rgba(0,0,0,.08) 72%,
        rgba(0,0,0,0) 100%
    );

    z-index:2;
}

/* CAPTION */

.resource-header-caption{

    position:absolute;

    left:28px;
    right:28px;

    bottom:24px;

    z-index:3;

    color:#fff;

    font-size:15px;

    line-height:1.6;

    font-weight:500;

    text-shadow:0 2px 10px rgba(0,0,0,.65);
}

/* =========================================
FILTER + CARDS SECTION
========================================= */

.resource-cards-section{

    background:#f3f3f3;

    padding:45px 0 70px;
}

/* FILTERS */

.resource-filter-section{

    background:transparent;

    padding:0 0 40px;

    margin:0;
}

.resource-tags-wrap .tag-link{

    background:#e5e5e5;

    color:#222;

    padding:3px 5px;

    border-radius:2px;

    text-decoration:none;

    font-size:14px;

    font-weight:500;

    transition:.25s ease;
}

.resource-tags-wrap .tag-link:hover{

    background:#dcdcdc;
}

.resource-tags-wrap .active-resource-tag{

    background:#198754;

    color:#fff;
}

/* =========================================
CARDS
========================================= */

.resource-cards-section .row{

     row-gap:5px;
    margin-top:0;
}

/* CARD */
.resource-card{

    background:transparent;

    padding:8px;

    transition:
        transform .18s ease,
        box-shadow .18s ease;
}

/* INNER */

.resource-card-inner{
    background:#f3f3f3;
    border-top:8px solid transparent;
    padding:10px;
    border: radius 2px;
    transition:
        background .18s ease,
        border-top-color .18s ease;
}

/* HOVER */

.resource-card-link:hover .resource-card{
    transform:translateY(-2px);
    box-shadow:0 8px 18px rgba(0,0,0,.08);
}

.resource-card-link:hover .resource-card-inner{
    background:#f3f3f3;
    border-top-color:#ffb000;
} 


/* OUTER */

.news-card-shell{
    background:white;
    border-top:8px solid transparent;
    padding:5px;
    border: radius 2px;
    transition:
        background .18s ease,
        border-top-color .18s ease;
}

/* INNER */

.news-card-inner{
    background:#fff;
    border-top:8px solid transparent;
    padding:5px;
    transition:
        border-top-color .18s ease,
        background .18s ease;
}

/* HOVER */

.news-card-link:hover .news-card-shell{
    transform:translateY(-2px);
    box-shadow:0 8px 18px rgba(0,0,0,.08);
}

.news-card-link:hover .news-card-inner{
    border-top-color:green;
}

/* SQUARE IMAGE */

.resource-card-image{

    position:relative !important;
    aspect-ratio:1/1;
    width:100%;
    overflow:hidden;
    border-radius:2px;
}

/* LABEL */

.resource-card-label{

    position:absolute;

    top:0;
    left:0;

    display:flex;

    align-items:center;

    justify-content:center;

    min-width:110px;

    height:36px;

    padding:0 18px;

    background:#d98200;

    color:#fff;

    font-size:11px;

    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;

    z-index:50;

    clip-path:polygon(
        0 0,
        88% 0,
        100% 100%,
        0% 100%
    );
}

.resource-card-label.publication{
    background:#198754;
}

.resource-card-label.video{
    background:#0d6efd;
}

/* BODY */

.resource-card-body{

    padding:18px 2px 8px;

    background:#f3f3f3;
}

.resource-card-link:hover .resource-card-body h4{

    color:#198754;
}

.resource-card-body p{

    font-size:15px;

    line-height:1.7;

    color:#555;

    margin:0;
       
    font-family:'Space Grotesk', sans-serif;
}
.resource-header-label{

    display:flex;
    align-items:center;
    gap:12px;

    color:black;

    font-size:15px;
    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;

    margin-bottom:28px;
}

.resource-label-rhombus{

    width:14px;
    height:14px;

    background:#ffb000;

   display:inline-block;
}
/* FILTER TITLE LIKE “MOST POPULAR” */

.resource-filter-title{
    display:flex;
    align-items:center;
    gap:14px;
    margin-bottom:38px;
}

.resource-card-body h4{
    font-size:18px;
    line-height:1.35;
    font-weight:600;
    margin:0;
    font-family:'Space Grotesk', sans-serif;
}
.resource-card-link{
    display:block;
    height:100%;
    text-decoration:none;
    color:#111;
    position:relative;
    z-index:1;
}

.resource-card{
    background:transparent;
    border-top:0 solid #ffb000;
    padding:0;
    }

.resource-card-link:hover{
    z-index:20;
}



.resource-card-link:hover .resource-card-body h4{
    color:#198754;
}

.resource-card-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;

    transition:none !important;
    transform:none !important;
}

.resource-card:hover .resource-card-image img,
.resource-card-link:hover .resource-card-image img{
    transition:none !important;
    transform:none !important;
}

.resource-filter-row{

    display:flex;

    align-items:center;

    flex-wrap:wrap;

    margin-bottom:10px;
}

.resource-filter-rhombus{

    width:28px;

    height:28px;

    background:#ffb000;

    transform:skew(-16deg);

    flex-shrink:0;

    margin-right:24px;
}

.resource-tags-wrap{

    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:10px;
}

.resource-tags-wrap{

    display:flex;

    align-items:center;

    flex-wrap:wrap;

    gap:10px;

    margin-bottom:0;

    padding-bottom:0;
}
.resource-filter-divider{

    width:100%;

    height:1px;

    background:#d8d8d8;

    margin-top:5px;
    margin-bottom:20px;
}
/* =========================================
NEWS DYNAMIC HEADER
========================================= */

.news-dynamic-header{
    background:#fff;
    position:relative;
    padding:0;
}

.news-dynamic-header::after{
    content:"";
    position:absolute;
    left:24px;
    right:24px;
    bottom:0;
    height:1px;
    background:#dcdcdc;
    z-index:20;
}

.news-dynamic-header .row{
    min-height:420px;
    align-items:stretch;
}

.news-dynamic-content{
    min-height:420px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:40px 8%;
    
}

/* TOP NEWS LABEL */

.news-dynamic-label{
    display:flex;
    align-items:center;
    gap:12px;
    margin-bottom:24px;

    font-size:14px;
    font-weight:700;
    letter-spacing:1px;
    text-transform:uppercase;
    color:#111;
}

.news-dynamic-label-square{
    width:15px;
    height:15px;
    background:#198754;
    transform:skew(-18deg);
    display:inline-block;
}

/* TITLE */

.news-dynamic-title{
    font-family:'Space Grotesk', sans-serif;
    font-size:3.5rem;
    line-height:1.05;
    font-weight:700;
    letter-spacing:-2px;
    color:#111;
    margin-bottom:14px;
}

/* SUMMARY */

.news-dynamic-summary{
    font-size:1rem;
    line-height:1.85;
    color:#555;
    max-width:650px;
    margin:0;
}

/* IMAGE */

.news-dynamic-image-link{
    display:block;
    height:100%;
    text-decoration:none;
}

.news-dynamic-image-wrap{
    position:relative;
    height:420px;
    overflow:hidden;
}

.news-dynamic-image{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
    transition:transform .7s ease;
}

.news-dynamic-image-wrap:hover .news-dynamic-image{
    transform:scale(1.08);
}

/* DARK GRADIENT */

.news-dynamic-overlay{
   position:absolute;

    inset:0;

    background:linear-gradient(
        to top,
        rgba(0,0,0,.92) 0%,
        rgba(0,0,0,.75) 32%,
        rgba(0,0,0,.38) 62%,
        rgba(0,0,0,.08) 100%
    );

    z-index:2;
}

/* CAPTION */

.news-dynamic-caption{
    position:absolute;
    left:28px;
    right:28px;
    bottom:24px;
    z-index:3;

    color:#fff;
    font-size:15px;
    line-height:1.6;
    font-weight:500;
    text-shadow:0 2px 10px rgba(0,0,0,.65);
}

/* RESPONSIVE */

@media(max-width:991px){

    .news-dynamic-content{
        min-height:auto;
        padding:50px 20px;
    }

    .news-dynamic-title{
        font-size:2.8rem;
    }

    .news-dynamic-image-wrap{
        height:380px;
    }
}

/* ORANGE COUNTDOWN LINE */

.hero-slide-countdown{
    position:absolute;
    left:0;
    bottom:0;
    height:5px;
    width:100%;
    background:#ffb000;
    z-index:50;
    animation:heroCountdown 5s linear forwards;
}

.related-products .upds-product-content h4{
    font-size:18px;
}
.related-products .upds-product-media img{
    height:220px;
    object-fit:contain;
}

/* LEFT VERTICAL HERO SLIDE COUNTER */
.hero-slide-counter{
    position:absolute;
    left:15px;
    top:50%;
    transform:translateY(-50%);

    z-index:20;

    width:80px;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    gap:14px;
}
.hero-current-slide,
.hero-total-slides{
    color:rgb(131, 228, 250);
    font-size:24px;
    font-weight:700;
    line-height:1;
    letter-spacing:2px;
}

.hero-counter-line{
    width:2px;
    height:150px;
    background:rgba(255, 255, 255, 0.45);
    position:relative;
    overflow:hidden;
    display:block;
}

.hero-counter-line::before{
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:0;
    background:#8ef870;
}

.hero-counter-line.is-running::before{
    animation:heroCounterVertical 14.5s linear forwards;
}

@keyframes heroCounterVertical{
    from{
        height:0;
    }
    to{
        height:100%;
    }
}

@media(max-width:768px){
    .hero-slide-counter{
        left:18px;
    }

    .hero-current-slide,
    .hero-total-slides{
        font-size:18px;
    }

    .hero-counter-line{
        height:95px;
    }
}

.resource-video-wrap{
    position:relative;
    width:100%;
    padding-bottom:56.25%;
    height:0;
    overflow:hidden;
    background:#000;
    border-radius:4px;
}

.resource-video-wrap iframe{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}

.upds-fallback-logo{
    filter:grayscale(100%);
    object-fit:contain !important;
    background:#f5f5f5;
    padding:20px;
}


/* FOOTER SOCIAL ICONS */
.footer-social{
    gap:10px;
}

.footer-social a{
    width:42px;
    height:42px;

    display:flex;
    align-items:center;
    justify-content:center;

    background:transparent;
    border:1.5px solid #ffffff;
    border-radius:50%;

    color:#000000 !important;
    text-decoration:none;
}

.footer-social a i{
    font-size:16px !important;
    color:white !important;
}

.footer-social a:hover{
    background:#198754;
    border-color:#198754;
    color:#ffffff !important;
}

.footer-social a:hover i{
    color:#ffffff !important;
}
.resource-video-play{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);

    width:64px;
    height:45px;

    background:#ff0000;
    border-radius:10px;

    display:flex;
    align-items:center;
    justify-content:center;

    color:#ffffff;
    font-size:28px;
    z-index:20;
}

.resource-video-play i{
    color:#ffffff;
}

/* =========================
UPDS MOBILE FULLSCREEN MENU
========================= */

.upds-mobile-menu-overlay{
    position:fixed;
    inset:0;
    background:#048f10;
    z-index:999999;
    display:none;
    overflow-y:auto;
}

.upds-mobile-menu-overlay.active{
    display:block;
}

.upds-mobile-menu-panel{
    min-height:100vh;
    padding:28px 26px 105px;
    color:#fff;
}

.upds-mobile-menu-top{
    border-bottom:1px solid rgba(255,255,255,.28);
    padding-bottom:18px;
    margin-bottom:12px;
}

.upds-mobile-menu-logo{
    width:165px;
    height:auto;
    margin-bottom:24px;
}

.upds-mobile-socials{
    display:flex;
    gap:18px;
    justify-content:flex-end;
    margin-bottom:18px;
}

.upds-mobile-socials a{
    color:#fff;
    font-size:18px;
    text-decoration:none;
}

.upds-mobile-search{
    position:relative;
    width:100%;
}

.upds-mobile-search input{
    width:100%;
    height:44px;
    border:1px solid rgba(255,255,255,.35);
    background:rgba(0,0,0,.18);
    color:#fff;
    padding:0 48px 0 14px;
    outline:none;
}

.upds-mobile-search input::placeholder{
    color:rgba(255,255,255,.8);
    font-style:italic;
}

.upds-mobile-search button{
    position:absolute;
    right:0;
    top:0;
    width:46px;
    height:44px;
    border:0;
    background:rgba(0,0,0,.25);
    color:#fff;
    font-size:18px;
}

.upds-mobile-links{
    margin-top:10px;
}

.upds-mobile-link{
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    color:#fff;
    text-decoration:none;
    text-transform:uppercase;
    font-size:15px;
    letter-spacing:.3px;
    padding:15px 0;
    border-bottom:1px solid rgba(255,255,255,.28);
    background:transparent;
    border-left:0;
    border-right:0;
    border-top:0;
    text-align:left;
}

.upds-mobile-link:hover,
.upds-mobile-link:focus,
.upds-mobile-link:active{
    color:#fff;
    background:transparent;
    outline:none;
    box-shadow:none;
}

.upds-mobile-accordion{
    cursor:pointer;
}

.upds-plus{
    width:27px;
    height:27px;
    border:1px solid rgba(255,255,255,.55);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:20px;
    line-height:1;
    flex-shrink:0;
}

.upds-mobile-submenu{
    display:none;
    padding:8px 0 6px 14px;
    border-bottom:1px solid rgba(255,255,255,.28);
}

.upds-mobile-submenu.active{
    display:block;
}

.upds-mobile-submenu a{
    display:block;
    color:#fff;
    text-decoration:none;
    font-size:14px;
    line-height:1.35;
    padding:12px 0 12px 18px;
    border-bottom:1px solid rgba(255,255,255,.22);
    position:relative;
}

.upds-mobile-submenu a::before{
    content:"└";
    position:absolute;
    left:0;
    top:12px;
    opacity:.65;
}

.upds-mobile-submenu a:last-child{
    border-bottom:0;
}

.upds-mobile-submenu a:hover,
.upds-mobile-submenu a:focus,
.upds-mobile-submenu a:active{
    color:#fff;
    background:transparent;
}

/* Mobile navbar search icon only */
.upds-mobile-search-icon{
    width:48px;
    height:48px;
    border:0;
    background:transparent;
    color:#048f10;
    font-size:22px;
    margin-right:18px;
    display:none;
}

/* Fixed bottom half-circle menu button */
.upds-mobile-floating-btn{
    position:fixed;
    left:50%;
    bottom:0;
    transform:translateX(-50%);

    width:64px;
    height:54px;

    border-radius:50% 50% 0 0;
    border:2px solid #ffffff;
    border-bottom:0;

    background:#048f10;
    color:#ffffff;

    z-index:1000000;

    display:none;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:3px;

    padding:0;
    margin:0;

    box-shadow:none;
    outline:none;
}

.upds-mobile-floating-btn i{
    font-size:17px;
    line-height:1;
    color:#ffffff;
}

.upds-mobile-floating-btn span{
    font-size:10px;
    font-weight:700;
    line-height:1;
    color:#ffffff;
}

.upds-mobile-floating-btn:hover,
.upds-mobile-floating-btn:focus,
.upds-mobile-floating-btn:active{
    width:64px;
    height:54px;
    border-radius:50% 50% 0 0;
    border:2px solid #ffffff;
    border-bottom:0;
    background:#048f10;
    color:#ffffff;
    transform:translateX(-50%);
    box-shadow:none;
    outline:none;
}

body.upds-mobile-menu-open{
    overflow:hidden;
}

/* =========================
MOBILE ONLY
========================= */

@media(max-width:991.98px){

    /* Hide Bootstrap mobile collapse menu */
    .navbar-toggler,
    .upds-mobile-menu-btn{
        display:none !important;
    }

    .navbar-collapse{
        display:none !important;
    }

    /* Show search icon in mobile navbar */
    .upds-mobile-search-icon{
        display:flex;
        align-items:center;
        justify-content:center;
    }

    /* Show fixed bottom menu button */
    .upds-mobile-floating-btn{
        display:flex;
    }

    /* Make mobile navbar normal, not sticky/fixed */
    #mainNavbar{
        position:relative !important;
        top:auto !important;
        background:#048f10 !important;
        box-shadow:none !important;
    }

    #mainNavbar.sticky-top{
        position:relative !important;
        top:auto !important;
    }

    #mainNavbar .navbar-brand{
        height:75px;
    }

    #mainNavbar .navbar-brand img{
        max-height:64px;
    }
}

/* =========================
DESKTOP ONLY
========================= */

@media(min-width:992px){

    .navbar-collapse{
        display:flex !important;
    }

    .upds-mobile-menu-overlay,
    .upds-mobile-floating-btn,
    .upds-mobile-search-icon{
        display:none !important;
    }
}
@media (max-width: 991.98px){

    #navbarLogo{
        content:url('../img/logos/logo-white.png');
    }

}
@media(max-width:576px){
    .partner-logo{
        max-width:70px;
        height:auto;
    }

    .partner-item1{
        padding:8px 0;
    }
}

/* =========================
FOCUS WORK SECTION
========================= */

.focus-work-section{
    background:url('../img/background.png') center center no-repeat;
    background-size:cover;
    padding:0;
    margin-top:0;
    overflow:hidden;
}

.focus-work-heading-box{
    max-width:760px;
    padding:35px 40px 28px;
    margin-bottom:35px;
    border-left:2px dotted #111;
    border-bottom:2px dotted #111;
}

.focus-work-heading-box h2{
    font-size:54px;
    font-weight:500;
    color:#111;
    margin-bottom:12px;
    line-height:1.1;
}

.focus-work-heading-box h2 span{
    color:#048f10;
    font-weight:900;
}

.focus-work-heading-box p{
    font-size:22px;
    color:#111;
    margin:0;
}

.focus-work-main-image-wrap{
    position:relative;
    width:100%;
    height:640px;
    overflow:hidden;
    border:4px solid #048f10;
    background:#111;
}

.focus-work-main-image{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

.focus-work-image-overlay{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:55%;
    background:linear-gradient(
        to top,
        rgba(0,0,0,.88),
        rgba(0,0,0,.55),
        rgba(0,0,0,0)
    );
    z-index:2;
}

.focus-work-caption{
    position:absolute;
    left:45px;
    right:45px;
    bottom:38px;
    z-index:3;
    color:#fff;
    max-width:850px;
}

.focus-work-caption h3{
    color:#fff;
    font-size:30px;
    font-weight:800;
    margin-bottom:12px;
    text-shadow:0 2px 6px rgba(0,0,0,.7);
}

.focus-work-caption p{
    color:#fff;
    font-size:18px;
    line-height:1.5;
    margin-bottom:22px;
    text-shadow:0 2px 6px rgba(0,0,0,.7);
}

.focus-work-btn{
    display:inline-flex;
    align-items:center;
    background:#048f10;
    color:#fff !important;
    padding:12px 24px;
    border-radius:50px;
    text-decoration:none;
    font-weight:800;
}

.focus-work-btn:hover{
    background:#fff;
    color:#198754 !important;
    text-decoration:none;
}

.focus-work-btn:hover i{
    background:#fff;
    color:#198754;
    transform:translateX(3px);
}

.focus-work-thumbs{
    display:flex;
    flex-direction:column;
    gap:8px;
    height:640px;
}

.focus-work-thumb{
    width:100%;
    height:98px;
    border:3px solid transparent;
    padding:0;
    background:#fff;
    overflow:hidden;
    cursor:pointer;
    opacity:.75;
}

.focus-work-thumb.active,
.focus-work-thumb:hover{
    opacity:1;
    border-color:#048f10;
}

.focus-work-thumb img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

/* Mobile */
@media(max-width:991px){

    .focus-work-section{
        padding:0;
    }

    .focus-work-heading-box{
        padding:25px 20px 22px;
        margin-bottom:25px;
    }

    .focus-work-heading-box h2{
        font-size:38px;
    }

    .focus-work-heading-box p{
        font-size:16px;
    }

    .focus-work-main-image-wrap{
        height:430px;
    }

    .focus-work-caption{
        left:22px;
        right:22px;
        bottom:25px;
    }

    .focus-work-caption h3{
        font-size:24px;
    }

    .focus-work-caption p{
        font-size:15px;
    }

    .focus-work-thumbs{
        flex-direction:row;
        height:auto;
        overflow-x:auto;
        padding-top:10px;
    }

    .focus-work-thumb{
        min-width:85px;
        height:85px;
    }
}

@media(max-width:576px){

    .focus-work-container{
        max-width:100%;
        padding-left:14px;
        padding-right:14px;
    }

    .focus-work-main-image-wrap{
        height:360px;
    }

    .focus-work-heading-box h2{
        font-size:32px;
    }
}
.upds-top-search{
    width:220px;
    height:38px;
    background:#f5f5f5;
    border:1px solid #d9d9d9;
    border-radius:30px;
    padding:0 15px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    text-decoration:none;
    color:#666;
    font-size:14px;
    transition:all .3s ease;
}

.upds-top-search:hover{
    background:#ffffff;
    color:#009a17;
}

.upds-top-search i{
    font-size:18px;
    color:#000;
}

.upds-top-search span{
    white-space:nowrap;
}
.upds-signin-link{
    color:#000
}
.upds-signin-link:hover{
    text-decoration: underline;
    color: #009a17;
}

.our-work-section{
    background:
              url('../img/footer.jpg') center center no-repeat;

    background-size:cover;
    padding-bottom:40px;
}
.our-work-section,
.our-work-section p,
.our-work-section h1,
.our-work-section h2,
.our-work-section h3,
.our-work-section h4,
.our-work-section h5,
.our-work-section h6,
.our-work-section a,
.our-work-section strong{
    color:#fff !important;
}
.our-work-number{
    min-width:70px;
    line-height:1;
    transition:all .35s ease;
}
.our-work-card-link:hover .our-work-number{
    transform:translateX(4px);
}
.our-work-inner{
    display:flex;
    align-items:center;
    gap:12px;
}
.our-work-box{
    overflow:hidden;
}




.our-work-list{
    display:flex;
    flex-direction:column;
    gap:22px;
    margin-top:25px;
}

.our-work-card-link{
    text-decoration:none;
    display:block;
}

.our-work-box{
    border:2px solid #048f10;
    border-radius:14px;
    padding:22px 30px;
    box-shadow:0 8px 22px rgba(0,0,0,.08);
    transition:all .35s ease;
}

.our-work-inner{
    display:flex;
    align-items:center;
    gap:20px;
}

.our-work-number{
    font-size:58px !important;
    line-height:1;
    color:green;
    min-width:60px;
    transition:all .35s ease;
    font-family:sans-serif;

    color: transparent;
    margin: 8px;

    -webkit-text-stroke-width: 1.5px;
    -webkit-text-stroke-color: rgb(4, 147, 61);

    background-color: transparent;
    font-size:8rem;
    font-weight:500px;

    margin-bottom:12px;
    margin-left:0;
}


/* Hover */

.our-work-section .our-work-card-link:hover .our-work-box{
    background:#fff !important;
    border-color:#048f10 !important;
}

.our-work-section .our-work-card-link:hover .our-work-box h2,
.our-work-section .our-work-card-link:hover .our-work-box h2 strong{
    color:#048f10 !important;
}
.our-work-card-link:hover .our-work-box h2{ color:#048f10 !important; } .our-work-card-link:hover .our-work-number{ color:#048f10; }

@media(max-width:768px){

    .our-work-box{
        padding:18px 20px;
    }

    .our-work-inner{
        gap:15px;
    }

    .our-work-number{
        font-size:42px !important;
        min-width:45px;
    }

    .our-work-box h2{
        font-size:22px;
    }

}

img{
    object-position: 50% 35%;
}
.about-dynamic-header{
    position:relative;
    height:550px;
    overflow:hidden;
}

.about-dynamic-header-image{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center center;
}

.about-dynamic-header-overlay{
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.20);
}

.about-dynamic-header-box{
    position:absolute;

    left:10%;
    bottom:60px;

    width:70%;
    max-width:900px;

    background:rgba(4,143,16,.72);

    backdrop-filter:blur(6px);

    padding:55px 60px;

    color:#fff;

    z-index:2;
}

.about-dynamic-header-box h1{
    margin-bottom:25px;
}

.about-dynamic-header-box p{
    font-size:1.9rem;
    line-height:1.55;
    margin:0;
    color:#fff;
}
.news-bran{
    color: white;
    font-family:'Space Grotesk', sans-serif;
    font-size:60px;
    font-weight:700;
}

/* FIX DYNAMIC MEGA MENU SIZE */
#mainNavbar .mega-dropdown{
    width:100vw !important;
    left:0 !important;
    right:0 !important;
    border:0 !important;
    border-radius:0 !important;
    padding:14px 0 18px !important;
}

#mainNavbar .mega-dropdown .row{
    display:flex !important;
    flex-wrap:nowrap !important;
    gap:10px !important;
}

#mainNavbar .mega-dropdown .col{
    flex:0 0 20% !important;
    max-width:20% !important;
}

#mainNavbar .mega-item{
    display:block !important;
    text-decoration:none !important;
}

#mainNavbar .mega-media{
    position:relative !important;
    height:125px !important;
    overflow:hidden !important;
}

#mainNavbar .mega-media img{
    width:100% !important;
    height:125px !important;
    object-fit:cover !important;
    display:block !important;
}

#mainNavbar .mega-title{
    position:absolute !important;
    left:0 !important;
    bottom:0 !important;
    background:#009b20 !important;
    color:#fff !important;
    font-size:13px !important;
    font-weight:700 !important;
    padding:6px 12px !important;
    border-radius:0 14px 14px 0 !important;
}

#mainNavbar .mega-content{
    padding-top:8px !important;
}

#mainNavbar .mega-subtitle{
    font-size:13px !important;
    line-height:1.4 !important;
    margin:0 !important;
    color:#444;
}
/* ==========================================
   UPDS GLOBAL BUTTON STYLE
========================================== */

.btn-primary,
.btn-success,
.btn-upds,
button.btn-primary,
button.btn-success{
    background:#22a852 !important;
    border:2px solid #22a852 !important;
    color:#fff !important;

    transition:all .25s ease;
}

.btn-primary:hover,
.btn-success:hover,
.btn-upds:hover,
button.btn-primary:hover,
button.btn-success:hover{
    background:#fff !important;
    border:2px solid #22a852 !important;
    color:#22a852 !important;
}

.btn-primary:focus,
.btn-success:focus,
.btn-upds:focus{
    background:#fff !important;
    border:2px solid #22a852 !important;
    color:#22a852 !important;
    box-shadow:none !important;
}

.btn-primary i,
.btn-success i,
.btn-upds i{
    color:inherit !important;
}

.btn-primary:hover i,
.btn-success:hover i,
.btn-upds:hover i{
    color:#22a852 !important;
}

html,
body{
   overflow-x:hidden !important;
}
@media(max-width:991px){

    body{
        font-size:15px;
    }

    h1,
    .display-1,
    .display-2,
    .display-3,
    .display-4,
    .display-5{
        font-size:36px !important;
        line-height:1.15 !important;
    }

    h2{
        font-size:28px !important;
        line-height:1.2 !important;
    }

    h3{
        font-size:23px !important;
        line-height:1.25 !important;
    }

    p{
        font-size:15px;
        line-height:1.65;
    }

    .container,
    .container-fluid{
        padding-left:22px !important;
        padding-right:22px !important;
    }

    .row{
        margin-left:0 !important;
        margin-right:0 !important;
    }

    [class*="col-"]{
        padding-left:10px;
        padding-right:10px;
    }

    .btn,
    button,
    input,
    select,
    textarea{
        max-width:100%;
    }

    input,
    select,
    textarea{
        font-size:16px !important;
    }

    .card,
    .service-item,
    .project-card,
    .resource-card,
    .news-card,
    .course-card,
    .product-card,
    .team-card{
        width:100% !important;
        max-width:100% !important;
    }
}

@media(max-width:768px){

    body{
        font-size:14.5px;
    }

    section{
        padding-top:45px !important;
        padding-bottom:45px !important;
    }

    h1,
    .display-5{
        font-size:31px !important;
    }

    h2{
        font-size:25px !important;
    }

    h3{
        font-size:21px !important;
    }

    .container,
    .container-fluid{
        padding-left:18px !important;
        padding-right:18px !important;
    }

    .py-5{
        padding-top:3rem !important;
        padding-bottom:3rem !important;
    }

    .px-5{
        padding-left:1.2rem !important;
        padding-right:1.2rem !important;
    }

    .p-5{
        padding:1.3rem !important;
    }

    .mb-5{
        margin-bottom:2rem !important;
    }

    .gap-5{
        gap:1.5rem !important;
    }

    .footer-bottom-links,
    .footer-social-row,
    .footer-social{
        justify-content:center;
        text-align:center;
    }

    .upds-footer-link{
        width:100%;
    }
}

@media(max-width:480px){

    h1,
    .display-5{
        font-size:27px !important;
    }

    h2{
        font-size:23px !important;
    }

    h3{
        font-size:20px !important;
    }

    .container,
    .container-fluid{
        padding-left:15px !important;
        padding-right:15px !important;
    }

    .btn{
        width:100%;
        justify-content:center;
        text-align:center;
    }

    .footer-upds-logo{
        width:120px;
    }
}


.news-top-search{
    position:relative;
}

.news-top-search button.news-search-clear{
    left:auto !important;
    right:55px !important;
    top:50% !important;
    transform:translateY(-50%) !important;

    position:absolute !important;
    width:auto !important;
    height:auto !important;

    opacity:0;
    visibility:hidden;

    background:transparent !important;
    border:0 !important;
    color:#666 !important;
    padding:0 !important;
    z-index:999 !important;
    font-size:16px;
}

.news-top-search.has-text:hover button.news-search-clear{
    opacity:1 !important;
    visibility:visible !important;
}

.news-top-search button.news-search-clear:hover{
    color:#198754 !important;
}

.news-search-clear:hover{
    color:#198754;
}

@media(max-width:768px){

    #bioImage{
        display:none !important;
    }

}

/* Browser compatibility fixes */

*{
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
}

img{
    max-width:100%;
    height:auto;
}

button,
input,
textarea,
select{
    font-family:inherit;
}

/* Safari backdrop blur support */
.glass,
.login-wrapper,
.admin-helper-column{
    -webkit-backdrop-filter:blur(10px);
    backdrop-filter:blur(10px);
}

/* Safari sticky support */
.sticky,
.sidebar,
.editorial-share-sticky{
    position:-webkit-sticky;
    position:sticky;
}

/* Old browser grid fallback */
@supports not (display:grid){
    .row,
    .dashboard-grid,
    .upds-full-menu-grid,
    .upds-full-menu-columns{
        display:flex;
        flex-wrap:wrap;
    }
}

/* Prevent horizontal overflow */
html,
body{
    max-width:100%;
    overflow-x:hidden;
}

/* Better mobile tap */
a,
button{
    -webkit-tap-highlight-color:transparent;
}

/* =====================================
   MOBILE BROWSER COMPATIBILITY
===================================== */


/* Better iPhone height handling */
@supports (-webkit-touch-callout:none){

    .upds-mobile-menu-overlay,
    .upds-full-menu-overlay{
        min-height:-webkit-fill-available;
    }

}


/* Prevent iPhone input zoom */
@media(max-width:768px){

    input,
    textarea,
    select{
        font-size:16px !important;
    }

}


/* Smooth scrolling support */
html{
    scroll-behavior:smooth;
}


/* Better touch response */
button,
a{
    touch-action:manipulation;
}


/* Prevent image dragging weirdness */
img{
    -webkit-user-drag:none;
}


/* Fix iOS rounded input styling */
input,
textarea,
button{
    -webkit-appearance:none;
    appearance:none;
}


/* Prevent text resize changes on rotation */
html{
    -webkit-text-size-adjust:100%;
}

@media (max-width:768px){

    .moderate-image{
        width:100px;
        height:100px;
        top:-35px;
    }

}

/* =========================================================
   UPDS GLOBAL ALIGNMENT, BRAND AND IMAGE LOADING
   ========================================================= */
:root{
    --upds-brand-green:#048f10;
    --upds-brand-green-dark:#064e3b;
    --upds-brand-green-soft:#eaf6ed;
    --upds-page-gutter:clamp(16px,4vw,64px);
    --upds-content-width:1320px;
}

/* Keep public page bands within the UPDS colour family. */
.focus-area-resource-bar,
.resources-title-bar,
.news-resource-bar,
.opportunities-resource-bar,
[class*="resource-bar"],
[class*="title-bar"]{
    background:var(--upds-brand-green-dark) !important;
}

.news-brand-upds,
.news-brand-news,
.focus-brand-wrap,
.focus-brand-wrap:hover{
    color:#fff !important;
}

/* Intelligent image placeholder. The actual image fades in only after load. */
.upds-smart-image-frame{
    position:relative;
    overflow:hidden;
    background-color:#eef1ef;
    background-image:url('../img/logos/logo.png');
    background-repeat:no-repeat;
    background-position:center;
    background-size:min(42%,150px) auto;
}

.upds-smart-image-frame::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:1;
    pointer-events:none;
    background:rgba(238,241,239,.72);
    transition:opacity .25s ease, visibility .25s ease;
}

.upds-smart-image-frame:not(.upds-image-ready)::before{
    content:"";
    position:absolute;
    inset:0;
    z-index:2;
    pointer-events:none;
    backdrop-filter:grayscale(1);
    -webkit-backdrop-filter:grayscale(1);
}

.upds-smart-image-frame.upds-image-ready::after,
.upds-smart-image-frame.upds-image-ready::before{
    opacity:0;
    visibility:hidden;
}

.upds-smart-image{
    opacity:0;
    transition:opacity .25s ease;
}

.upds-smart-image.upds-image-loaded{
    opacity:1;
}

.upds-smart-image.upds-image-fallback{
    opacity:.42;
    filter:grayscale(1);
    object-fit:contain !important;
    padding:clamp(18px,5vw,46px);
    background:#eef1ef;
}

/* Related content: desktop remains untouched; mobile becomes one card per auto slide. */
@media (max-width:767.98px){
    html,
    body{
        max-width:100%;
        overflow-x:hidden;
    }

    body > .container-fluid,
    main > .container-fluid,
    section > .container-fluid,
    .focus-area-resource-bar > .container-fluid,
    .resources-hero + .container-fluid{
        padding-left:16px !important;
        padding-right:16px !important;
    }

    .container,
    .container-sm,
    .container-md,
    .container-lg,
    .container-xl,
    .container-xxl{
        width:100%;
        max-width:100%;
        padding-left:16px !important;
        padding-right:16px !important;
    }

    .focus-area-resource-bar .container-fluid,
    .focus-title-row{
        padding-left:0 !important;
        padding-right:0 !important;
    }

    .news-bran,
    .focus-brand-wrap .news-bran{
        max-width:100%;
        font-size:clamp(24px,8vw,38px) !important;
        line-height:1.1 !important;
        overflow-wrap:anywhere;
    }

    .upds-related-mobile-track{
        display:flex !important;
        flex-wrap:nowrap !important;
        gap:14px !important;
        overflow-x:auto !important;
        scroll-snap-type:x mandatory;
        scroll-behavior:smooth;
        scrollbar-width:none;
        margin-left:0 !important;
        margin-right:0 !important;
        padding:2px 0 8px !important;
    }

    .upds-related-mobile-track::-webkit-scrollbar{
        display:none;
    }

    .upds-related-mobile-track > *{
        flex:0 0 100% !important;
        width:100% !important;
        max-width:100% !important;
        scroll-snap-align:start;
        padding-left:0 !important;
        padding-right:0 !important;
    }

    /* Opportunities/contact supporting content should follow main content naturally. */
    .opportunity-sidebar,
    .opportunities-sidebar,
    .contact-info,
    .contact-details,
    [class*="opportunity"][class*="side"],
    [class*="contact"][class*="side"]{
        margin-top:24px !important;
        position:static !important;
        inset:auto !important;
    }

    .contact .row,
    .opportunity-detail-row,
    .opportunities-layout{
        row-gap:24px !important;
    }
}


/* ===== UPDS CONSOLIDATED RESPONSIVE REFINEMENT 2026 ===== */
:root{
    --upds-green:#048f10;
    --upds-green-dark:#064e3b;
    --upds-green-deep:#032f24;
    --upds-mobile-gutter:16px;
    --upds-global-max:1320px;
}

/* News and resources keep their established composition, with UPDS green fades. */
.news-dynamic-overlay,
.resource-header-image-overlay{
    background:linear-gradient(
        to top,
        rgba(3,47,36,.98) 0%,
        rgba(6,78,59,.86) 34%,
        rgba(4,143,16,.38) 68%,
        rgba(4,143,16,.04) 100%
    ) !important;
}

/* Desktop filter bar begins on the same global line as the hero content. */
.news-theme-container,
.resource-filter-section > .container,
.resource-filter-section .container{
    width:100% !important;
    max-width:var(--upds-global-max) !important;
    margin-left:auto !important;
    margin-right:auto !important;
    padding-left:clamp(16px,4vw,64px) !important;
    padding-right:clamp(16px,4vw,64px) !important;
}

/* Footer logo must never expand or overlap its text. */
.footer-upds-logo{
    display:block !important;
    width:auto !important;
    height:auto !important;
    max-width:190px !important;
    max-height:82px !important;
    object-fit:contain !important;
    object-position:left center !important;
    padding:0 !important;
    margin:0 0 26px !important;
}

/* Team mobile category control. Hidden on desktop. */
.team-filter-mobile-toggle{
    display:none;
}

/* Related-content carousel shared by News, Resources, Courses, Opportunities and Projects. */
.upds-related-carousel-shell{
    position:relative;
    width:100%;
}

.upds-related-carousel-track{
    display:flex !important;
    flex-wrap:nowrap !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    gap:16px !important;
    scroll-snap-type:x mandatory;
    scroll-behavior:smooth;
    scrollbar-width:none;
    overscroll-behavior-inline:contain;
    -webkit-overflow-scrolling:touch;
    margin-left:0 !important;
    margin-right:0 !important;
    padding:4px 1px 12px !important;
}
.upds-related-carousel-track::-webkit-scrollbar{display:none;}
.upds-related-carousel-track > *{
    flex:0 0 calc((100% - 32px)/3) !important;
    width:calc((100% - 32px)/3) !important;
    max-width:calc((100% - 32px)/3) !important;
    min-width:0 !important;
    padding-left:0 !important;
    padding-right:0 !important;
    scroll-snap-align:start;
}

.upds-related-arrow{
    position:absolute;
    top:50%;
    z-index:15;
    width:44px;
    height:44px;
    border:1px solid rgba(255,255,255,.68);
    border-radius:50%;
    background:rgba(238,244,240,.78);
    color:#fff;
    display:grid;
    place-items:center;
    transform:translateY(-50%);
    box-shadow:0 7px 20px rgba(0,0,0,.16);
    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);
    cursor:pointer;
    transition:opacity .2s ease, transform .2s ease, background .2s ease;
}
.upds-related-arrow::before{
    content:"";
    width:10px;
    height:10px;
    border-top:3px solid currentColor;
    border-right:3px solid currentColor;
}
.upds-related-arrow-prev{left:10px;}
.upds-related-arrow-prev::before{transform:rotate(-135deg);margin-left:4px;}
.upds-related-arrow-next{right:10px;}
.upds-related-arrow-next::before{transform:rotate(45deg);margin-right:4px;}
.upds-related-arrow:hover,
.upds-related-arrow:focus-visible{
    background:rgba(4,143,16,.90);
    transform:translateY(-50%) scale(1.05);
}
.upds-related-arrow[hidden]{display:none !important;}

/* Share controls use the same content line instead of a detached outer margin. */
.event-two-column-layout{
    width:100%;
}

/* Scroll-progress button uses the UPDS colour family. */
.upds-scroll-progress{
    background:conic-gradient(
        var(--upds-green) var(--scroll-progress-angle,0deg),
        #d7dadd 0deg
    ) !important;
}

@media (max-width:991.98px){
    /* At tablet/mobile widths, the page-level News Themes/Events bar belongs in the hamburger menu. */
    .news-theme-filter-wrap,
    .desktop-resource-filter,
    .resource-filter-divider{
        display:none !important;
    }
    .mobile-news-filter,
    .mobile-resource-filter{
        display:block !important;
        width:100% !important;
        margin:0 0 24px !important;
    }
    .news-filter-btn,
    .resource-filter-btn{
        width:100% !important;
        min-height:52px;
        border:0 !important;
        border-radius:2px !important;
        background:var(--upds-green-dark) !important;
        color:#fff !important;
        padding:13px 16px !important;
    }

    /* Seamless image-to-content contact in the UPDS green family. */
    .news-dynamic-header,
    .news-header-slider,
    .news-dynamic-image-wrap,
    .news-dynamic-content,
    .resource-header-section,
    .resource-header-slider,
    .resource-header-image-wrap,
    .resource-header-content{
        background:var(--upds-green-dark) !important;
    }
    .news-dynamic-overlay,
    .resource-header-image-overlay{
        background:linear-gradient(
            to bottom,
            rgba(6,78,59,0) 0%,
            rgba(6,78,59,.42) 36%,
            rgba(6,78,59,.88) 72%,
            var(--upds-green-dark) 100%
        ) !important;
    }
    .news-dynamic-content,
    .resource-header-content{
        color:#fff !important;
        margin-top:-1px !important;
        padding-left:var(--upds-mobile-gutter) !important;
        padding-right:var(--upds-mobile-gutter) !important;
    }
    .news-dynamic-title,
    .news-dynamic-summary,
    .news-dynamic-label,
    .resource-main-title,
    .resource-summary-text,
    .resource-header-label{
        color:#fff !important;
    }

    /* Full, predictable mobile/tablet page alignment. */
    .container,
    .container-sm,
    .container-md,
    .container-lg,
    .container-xl,
    .container-xxl,
    .container-fluid,
    .event-page-bg .container,
    .event-page-bg .container-xxl,
    .editorial-related-section .container,
    .editorial-related-section .container-fluid,
    .ef-related-wrap,
    .ef-related-wrap > .row,
    .ef-related-heading{
        width:100% !important;
        max-width:100% !important;
        padding-left:var(--upds-mobile-gutter) !important;
        padding-right:var(--upds-mobile-gutter) !important;
        margin-left:auto !important;
        margin-right:auto !important;
    }

    /* Detail share controls align with the article body. */
    .event-two-column-layout{
        display:block !important;
    }
    .event-social-col,
    .event-main-col,
    .editorial-share-column{
        width:100% !important;
        max-width:100% !important;
        padding-left:0 !important;
        padding-right:0 !important;
        margin-left:0 !important;
        margin-right:0 !important;
    }
    .event-social-col .editorial-share-sticky,
    .editorial-share-sticky{
        position:static !important;
        width:100% !important;
        max-width:100% !important;
        margin:0 0 24px !important;
        padding:0 !important;
        text-align:left !important;
    }
    .editorial-share-icons{
        justify-content:flex-start !important;
    }

    /* Related content: one card per view on mobile/tablet. */
    .upds-related-carousel-track > *{
        flex:0 0 100% !important;
        width:100% !important;
        max-width:100% !important;
    }

    /* Footer navigation groups are removed entirely at mobile/small-screen sizes. */
    .footer-explore-col,
    .footer-projects-col,
    .footer-otherprojects-col{
        display:none !important;
    }
    .footer-mobile-row{
        display:block !important;
        margin-left:0 !important;
        margin-right:0 !important;
    }
    .footer-col-one{
        width:100% !important;
        max-width:100% !important;
        border-right:0 !important;
        padding:0 !important;
        margin:0 auto 22px !important;
        text-align:center !important;
    }
    .footer-col-one > a{
        display:flex !important;
        justify-content:center !important;
    }
    .footer-upds-logo{
        max-width:170px !important;
        max-height:74px !important;
        object-position:center !important;
        margin:0 auto 22px !important;
    }
    .footer-contact-line,
    .footer-social-row,
    .footer-social,
    .footer-message,
    .footer-bottom-links{
        justify-content:center !important;
        text-align:center !important;
        margin-left:auto !important;
        margin-right:auto !important;
    }
    .footer-contact-line{
        display:flex !important;
        align-items:flex-start !important;
        width:max-content;
        max-width:100%;
    }

    /* Course pages receive the same mobile edge distance as all public pages. */
    .ef-course-page,
    .ef-course-page section,
    .ef-course-content,
    .ef-main-content,
    [class*="course"] .container,
    [class*="course"] .container-fluid{
        padding-left:var(--upds-mobile-gutter) !important;
        padding-right:var(--upds-mobile-gutter) !important;
    }
}

@media (max-width:767.98px){
    /* Team filters become one compact hamburger menu. */
    .team-filter-mobile-toggle{
        width:100%;
        min-height:52px;
        display:flex;
        align-items:center;
        gap:14px;
        padding:12px 16px;
        margin:0 0 14px;
        border:0;
        border-radius:2px;
        background:var(--upds-green-dark);
        color:#fff;
        font:700 16px/1.2 'Space Grotesk',sans-serif;
        text-align:left;
    }
    .team-filter-mobile-toggle > i{
        margin-left:auto;
        transition:transform .2s ease;
    }
    .team-filter-mobile-toggle[aria-expanded="true"] > i{
        transform:rotate(180deg);
    }
    .team-filter-mobile-icon{
        width:28px;
        display:flex;
        flex-direction:column;
        gap:5px;
    }
    .team-filter-mobile-icon span{
        width:100%;
        height:3px;
        border-radius:9px;
        background:#fff;
    }
    .team-filter-list{
        display:none !important;
        width:100%;
        margin:0 0 24px !important;
        padding:7px !important;
        border:1px solid #dfe6e2;
        background:#fff;
        box-shadow:0 8px 22px rgba(15,23,42,.08);
    }
    .team-filter-list.is-open{
        display:block !important;
    }
    .team-filter-list li{
        display:block !important;
        width:100% !important;
        margin:0 !important;
        padding:12px 14px !important;
        border-radius:1px !important;
        text-align:left !important;
    }
}

@media (min-width:992px){
    /* Desktop footer is deliberately untouched. */
    .footer-explore-col,
    .footer-projects-col,
    .footer-otherprojects-col{
        display:block !important;
    }
}


/* =========================================================
   UPDS CONTROLLED VISUAL CORRECTIONS — 2026-08-07
   Scope: branding, image safety, mobile footer, page bars.
========================================================= */
.news-top-bar,
.resource-top-bar,
.focus-area-resource-bar{
    background:#064e3b !important;
    border-color:#064e3b !important;
}

.news-top-bar .news-brand-upds,
.news-top-bar .news-brand-news,
.resource-top-bar .news-brand-upds,
.resource-top-bar .news-brand-news,
.focus-area-resource-bar .news-brand-upds,
.focus-area-resource-bar .news-brand-news{
    color:#ffffff !important;
}

/* Keep the green fade only behind captions at the bottom of images. */
.news-dynamic-overlay,
.resource-header-image-overlay{
    background:linear-gradient(
        to top,
        rgba(3,47,36,.94) 0%,
        rgba(6,78,59,.72) 16%,
        rgba(6,78,59,.28) 32%,
        rgba(6,78,59,0) 52%
    ) !important;
}

/* Global image loader must never turn an image parent/card into a placeholder. */
.upds-smart-image-frame{
    background:none !important;
    overflow:visible;
}
.upds-smart-image-frame::before,
.upds-smart-image-frame::after{
    display:none !important;
}
.upds-smart-image{
    opacity:1 !important;
    background-color:#eef1ef;
    background-image:url('../img/logos/logo.png');
    background-repeat:no-repeat;
    background-position:center;
    background-size:min(28%,110px) auto;
}
.upds-smart-image.upds-image-loaded:not(.upds-image-fallback){
    background-image:none;
    background-color:transparent;
}
.upds-smart-image.upds-image-fallback{
    opacity:.45 !important;
    object-fit:contain !important;
    background:#eef1ef !important;
    padding:12px !important;
}

/* Footer nav remains desktop-only and is completely absent on reduced screens. */
@media(max-width:767.98px){
    .footer-explore-col,
    .footer-projects-col,
    .footer-otherprojects-col{
        display:none !important;
    }
}

/* Scroll progress button wins over older back-to-top display rules. */
.back-to-top.upds-scroll-progress{
    display:grid;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    background:conic-gradient(
        #048f10 var(--scroll-progress-angle,0deg),
        #d7dadd 0deg
    ) !important;
}
.back-to-top.upds-scroll-progress.is-visible{
    display:grid !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
}


/* =========================================================
   UPDS MOBILE FOOTER LEFT ALIGNMENT — 2026-08-07
   Mobile only. Desktop footer remains unchanged.
========================================================= */
@media (max-width:767.98px){
    .upds-main-footer .focus-work-container{
        width:100% !important;
        max-width:100% !important;
        padding-left:16px !important;
        padding-right:16px !important;
        margin-left:auto !important;
        margin-right:auto !important;
    }

    .upds-main-footer .footer-explore-col,
    .upds-main-footer .footer-projects-col,
    .upds-main-footer .footer-otherprojects-col{
        display:none !important;
    }

    .upds-main-footer .footer-top-statement,
    .upds-main-footer .footer-top-action,
    .upds-main-footer .footer-mobile-row,
    .upds-main-footer .footer-col-one,
    .upds-main-footer .footer-org-name,
    .upds-main-footer .footer-contact-line,
    .upds-main-footer .footer-social-row,
    .upds-main-footer .footer-social,
    .upds-main-footer .footer-message,
    .upds-main-footer .footer-bottom-links{
        text-align:left !important;
        margin-left:0 !important;
        margin-right:0 !important;
    }

    .upds-main-footer .footer-top-action{
        display:flex !important;
        justify-content:flex-start !important;
    }

    .upds-main-footer .footer-mobile-row{
        display:block !important;
    }

    .upds-main-footer .footer-col-one{
        width:100% !important;
        max-width:100% !important;
        padding:0 !important;
        margin:0 0 22px !important;
        border-right:0 !important;
    }

    .upds-main-footer .footer-col-one > a{
        display:block !important;
        width:max-content !important;
        max-width:100% !important;
        margin:0 !important;
    }

    .upds-main-footer .footer-upds-logo{
        display:block !important;
        width:auto !important;
        max-width:170px !important;
        max-height:74px !important;
        height:auto !important;
        margin:0 0 20px !important;
        object-position:left center !important;
    }

    .upds-main-footer .footer-org-name{
        margin:0 0 12px !important;
    }

    .upds-main-footer .footer-contact-line{
        display:flex !important;
        width:100% !important;
        max-width:100% !important;
        justify-content:flex-start !important;
        align-items:flex-start !important;
        margin-bottom:7px !important;
    }

    .upds-main-footer .footer-contact-line i{
        flex:0 0 20px;
        margin-top:3px;
    }

    .upds-main-footer .footer-social-row,
    .upds-main-footer .footer-social{
        display:flex !important;
        justify-content:flex-start !important;
    }

    .upds-main-footer .footer-message{
        max-width:none !important;
        margin-top:34px !important;
    }

    .upds-main-footer .footer-bottom-links{
        justify-content:flex-start !important;
        align-items:flex-start !important;
        gap:8px !important;
    }
}

/* =========================================================
   UPDS MOBILE FOOTER CTA-TO-LOGO SPACING — 2026-08-07
   Mobile only. Creates clear separation between the Focus
   Areas action and the UPDS brand/logo block.
========================================================= */
@media (max-width:767.98px){
    .upds-main-footer .footer-top-action{
        margin-top:24px !important;
        margin-bottom:28px !important;
    }

    .upds-main-footer .footer-top-action .btn,
    .upds-main-footer .footer-top-action .btn-customw{
        margin-bottom:0 !important;
    }

    .upds-main-footer .footer-mobile-row{
        margin-top:0 !important;
    }

    .upds-main-footer .footer-col-one > a:first-child{
        margin-top:0 !important;
    }
}


/* Detail pages own their related-content controls. The global carousel
   system must not contribute arrows, horizontal scrolling or hover motion. */
@media(max-width:767.98px){
    [data-related-carousel] .editorial-related-content{
        min-width:0 !important;
        overflow-wrap:anywhere !important;
    }
    [data-related-carousel] .editorial-related-content h3,
    [data-related-carousel] .event-related-body h4{
        max-width:100% !important;
        white-space:normal !important;
        overflow-wrap:anywhere !important;
    }
}


/* Related cards must use content titles only.
   Never surface image/gallery/header captions inside related content. */
.editorial-related-card .resource-image-caption,
.editorial-related-card .editorial-image-caption,
.editorial-related-card figcaption,
.event-related-card .resource-image-caption,
.event-related-card .editorial-image-caption,
.event-related-card figcaption{
    display:none !important;
}

.detail-related-card-title{
    white-space:normal !important;
    overflow-wrap:anywhere !important;
    word-break:normal !important;
}


/* =========================================================
   UPDS DETAIL RELATED CAROUSEL (UPDS-DRC)
   Fully isolated from legacy related-card / caption / arrow CSS.
========================================================= */
.upds-drc-section{
    width:100%;
    padding:30px 0 34px;
    background:#f4f4f4;
    overflow:hidden;
}

.upds-drc-inner{
    width:100%;
    max-width:1320px;
    margin:0 auto;
    padding:0 24px;
    box-sizing:border-box;
}

.upds-drc-heading{
    display:flex;
    align-items:center;
    gap:11px;
    min-width:0;
    margin:0 0 10px;
}

.upds-drc-marker{
    width:15px;
    height:15px;
    flex:0 0 15px;
    background:#198754;
    transform:skew(-18deg);
}

.upds-drc-heading h2{
    margin:0;
    color:#171717;
    font-family:'Space Grotesk',sans-serif;
    font-size:20px;
    font-weight:800;
    line-height:1.2;
    letter-spacing:.01em;
}

.upds-drc-rule{
    width:100%;
    height:1px;
    margin:0 0 22px;
    background:#c8c8c8;
}

.upds-drc-viewport{
    position:relative;
    width:100%;
    min-width:0;
}

.upds-drc-track{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:16px;
    width:100%;
    min-width:0;
    margin:0;
    padding:0;
}

.upds-drc-slide{
    min-width:0;
    margin:0;
    padding:0;
}

.upds-drc-card{
    position:relative;
    display:block;
    width:100%;
    min-width:0;
    min-height:280px;
    overflow:hidden;
    background:#0b2f25;
    color:#fff;
    text-decoration:none;
    box-shadow:0 5px 16px rgba(15,23,42,.08);
}

.upds-drc-media{
    position:absolute;
    inset:0;
    overflow:hidden;
    background:#dfe6e2;
}

.upds-drc-media img{
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    transition:transform .55s ease;
}

.upds-drc-shade{
    position:absolute;
    inset:0;
    background:linear-gradient(
        to top,
        rgba(3,35,27,.92) 0%,
        rgba(5,57,43,.72) 28%,
        rgba(6,78,59,.20) 62%,
        rgba(6,78,59,0) 100%
    );
    pointer-events:none;
}

.upds-drc-copy{
    position:absolute;
    left:8%;
    right:8%;
    top:50%;
    bottom:auto;
    z-index:4;
    min-width:0;

    transform:translateY(-50%);

    transition:
        top .70s cubic-bezier(.22,.61,.36,1),
        left .70s cubic-bezier(.22,.61,.36,1),
        right .70s cubic-bezier(.22,.61,.36,1),
        transform .70s cubic-bezier(.22,.61,.36,1);
}

/* Short green editorial line above the title. */
.upds-drc-copy::before{
    content:"";
    display:block;
    width:84px;
    height:4px;
    margin:0 0 22px;

    background:#198754;

    opacity:1;
    transform:scaleX(1);
    transform-origin:left center;

    transition:
        opacity .42s ease,
        transform .55s cubic-bezier(.22,.61,.36,1),
        margin .55s cubic-bezier(.22,.61,.36,1);
}

/*
| Dark title panel.
| Invisible in the resting state and smoothly fades/grows in on hover.
*/
.upds-drc-copy::after{
    content:"";
    position:absolute;
    top:-20px;
    bottom:-20px;
    left:-30px;
    right:-30px;
    z-index:-1;

    background:rgba(0,0,0,0);

    opacity:0;
    transform:scaleY(.90);

    transition:
        background .62s ease,
        opacity .55s ease,
        transform .68s cubic-bezier(.22,.61,.36,1);
}

.upds-drc-meta{
    display:inline-block;
    max-width:100%;
    margin:0 0 9px;
    padding:5px 8px;
    background:rgba(255,255,255,.92);
    color:#064e3b;
    font-size:11px;
    font-weight:800;
    line-height:1.2;
    text-transform:uppercase;
    overflow-wrap:anywhere;
}

.upds-drc-title{
    position:relative;
    z-index:2;

    display:block;
    width:100%;
    max-width:100%;
    min-width:0;

    margin:0;

    color:#fff;

    font-family:'Space Grotesk',sans-serif;
    font-size:21px;
    font-weight:750;
    line-height:1.32;

    text-align:left;

    white-space:normal;
    overflow-wrap:anywhere;
    word-break:normal;

    transition:
        color .45s ease,
        transform .65s cubic-bezier(.22,.61,.36,1);
}

/*
| Green card frame.
| Starts at zero width and grows smoothly on hover.
*/
.upds-drc-card::after{
    content:"";
    position:absolute;
    inset:0;
    z-index:7;

    border:0 solid #198754;

    pointer-events:none;

    transition:
        border-width .62s cubic-bezier(.22,.61,.36,1);
}

.upds-drc-card:hover,
.upds-drc-card:focus-visible{
    color:#fff;
}

.upds-drc-card:hover .upds-drc-media img,
.upds-drc-card:focus-visible .upds-drc-media img{
    transform:scale(1.035);
}

/* Smoothly lower the copy very slightly as the panel appears. */
.upds-drc-card:hover .upds-drc-copy,
.upds-drc-card:focus-visible .upds-drc-copy{
    top:56%;
    left:8%;
    right:8%;
}

/* Fade the short green line away into the hover panel. */
.upds-drc-card:hover .upds-drc-copy::before,
.upds-drc-card:focus-visible .upds-drc-copy::before{
    opacity:0;
    transform:scaleX(.35);
    margin-bottom:10px;
}

/* Reveal the black translucent title panel. */
.upds-drc-card:hover .upds-drc-copy::after,
.upds-drc-card:focus-visible .upds-drc-copy::after{
    background:rgba(0,0,0,.78);
    opacity:1;
    transform:scaleY(1);
}

/* Grow the green frame around the whole card. */
.upds-drc-card:hover::after,
.upds-drc-card:focus-visible::after{
    border-width:8px;
}

.upds-drc-arrow{
    display:none;
}

@media(max-width:991.98px){
    .upds-drc-inner{
        padding-left:18px;
        padding-right:18px;
    }

    .upds-drc-track{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media(max-width:767.98px){
    .upds-drc-section{
        padding:24px 0 28px;
    }

    .upds-drc-inner{
        padding-left:16px;
        padding-right:16px;
    }

    .upds-drc-rule{
        margin-bottom:16px;
    }

    .upds-drc-viewport{
        overflow:hidden;
    }

    .upds-drc-track{
        display:flex;
        flex-wrap:nowrap;
        align-items:stretch;
        gap:0;
        width:auto;
        transform:translate3d(0,0,0);
        transition:transform .68s cubic-bezier(.22,.61,.36,1);
        will-change:transform;
    }

    .upds-drc-slide,
    .upds-drc-clone{
        flex:0 0 100%;
        width:100%;
        min-width:100%;
        max-width:100%;
        box-sizing:border-box;
    }

    .upds-drc-card{
        min-height:320px;
        box-shadow:0 6px 18px rgba(15,23,42,.10);
    }

    .upds-drc-copy{
        left:8%;
        right:8%;
        top:50%;
        bottom:auto;

        max-width:none;

        transform:translateY(-50%);
        box-sizing:border-box;
    }

    .upds-drc-copy::before{
        width:72px;
        height:3px;
        margin-bottom:18px;
    }

    .upds-drc-copy::after{
        left:-18px;
        right:-18px;
        top:-16px;
        bottom:-16px;
    }

    .upds-drc-title{
        font-size:19px;
        line-height:1.34;
        overflow-wrap:anywhere;
    }

    /*
    | Touch devices retain the clean centred resting presentation.
    | Hover-capable devices receive the animated second state.
    */
    @media(hover:hover) and (pointer:fine){
        .upds-drc-card:hover .upds-drc-copy,
        .upds-drc-card:focus-visible .upds-drc-copy{
            top:56%;
            left:8%;
            right:8%;
        }
    }

    .upds-drc-arrow,
    .upds-drc-arrow:hover,
    .upds-drc-arrow:focus,
    .upds-drc-arrow:focus-visible,
    .upds-drc-arrow:active{
        position:absolute;
        top:50%;
        z-index:20;
        width:46px;
        height:46px;
        margin:0;
        padding:0;
        display:flex;
        align-items:center;
        justify-content:center;
        border:0;
        outline:0;
        border-radius:50%;
        background:rgba(178,184,178,.50);
        color:rgba(255,255,255,.96);
        font-size:17px;
        line-height:1;
        box-shadow:none;
        opacity:1;
        transform:translateY(-50%);
        transition:none;
        animation:none;
        filter:none;
        cursor:pointer;
        -webkit-appearance:none;
        appearance:none;
    }

    .upds-drc-arrow-prev{ left:10px; }
    .upds-drc-arrow-next{ right:10px; }
}

@media(max-width:420px){
    .upds-drc-card{
        min-height:300px;
    }

    .upds-drc-title{
        font-size:18px;
    }

    .upds-drc-arrow,
    .upds-drc-arrow:hover,
    .upds-drc-arrow:focus,
    .upds-drc-arrow:focus-visible,
    .upds-drc-arrow:active{
        width:42px;
        height:42px;
        font-size:15px;
    }
}


@media(max-width:767.98px) and (hover:none){
    .upds-drc-card:hover::after{
        border-width:0;
    }

    .upds-drc-card:hover .upds-drc-media img{
        transform:none;
    }

    .upds-drc-card:hover .upds-drc-copy{
        top:50%;
    }

    .upds-drc-card:hover .upds-drc-copy::before{
        opacity:1;
        transform:scaleX(1);
        margin-bottom:18px;
    }

    .upds-drc-card:hover .upds-drc-copy::after{
        background:rgba(0,0,0,0);
        opacity:0;
        transform:scaleY(.90);
    }
}