.btn,
.fixed-top,
.testimonial-carousel .owl-item .testimonial-item img,
.testimonial-carousel .owl-item .testimonial-text * {
    transition: .5s
}

.hex,
.text-hex p,
body {
    font-family: Arial, Helvetica, sans-serif
}

:root {
    --primary: #FF6F0F;
    --secondary: #FFF0E6;
    --light: #F8F8F9;
    --dark: #001D23
}

.back-to-top {
    position: fixed;
    display: none;
    right: 30px;
    bottom: 30px;
    z-index: 99
}

#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 linear;
    visibility: visible;
    opacity: 1
}

.btn {
    font-weight: 500
}

.btn.btn-outline-primary,
.btn.btn-primary {
    color: #fff
}

.btn.btn-primary:hover {
    color: var(--primary);
    background: 0 0
}

.btn-square {
    width: 38px;
    height: 38px
}

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

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

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

.top-bar {
    height: 45px;
    border-bottom: 1px solid rgba(255, 255, 255, .07)
}


.navbar .navbar-nav .nav-link {
    margin-right: 0px;
    padding: 15px 0;
    color: #fff;
    font-weight: 500;
    font-size: 13px;
    outline: 0
}

.navbar .navbar-nav .nav-link.active,
.navbar .navbar-nav .nav-link:hover {
    color: #115eb6
}

@media (max-width:991.98px) {
    .navbar .navbar-nav {
        margin-top: 10px;
        border-top: 1px solid rgba(0, 0, 0, .07);
        background: var(--dark)
    }

    .navbar .navbar-nav .nav-link {
        padding: 10px 0
    }
}

@media (min-width:992px) {
    .navbar .nav-item .dropdown-menu {
        display: block;
        visibility: hidden;
        top: 100%;
        transform: rotateX(-75deg);
        transform-origin: 0% 0%;
        transition: .5s;
        opacity: 0
    }

    .navbar .nav-item:hover .dropdown-menu {
        transform: rotateX(0);
        visibility: visible;
        transition: .5s;
        opacity: 1
    }
}

@media (min-width:375px) {
    .navbar .nav-item .dropdown-menu {
        display: block;
        visibility: hidden;
        top: 100%;
        transform: rotateX(-75deg);
        transform-origin: 0% 0%;
        transition: .5s;
        opacity: 0
    }

    .navbar .nav-item:hover .dropdown-menu {
        transform: rotateX(0);
        visibility: visible;
        transition: .5s;
        opacity: 1
    }
}

/* make each slide a positioning context */
.carousel-item {
    position: relative;
    /* important so overlays are relative to slide */
}




/* ensure carousel controls are on top and clickable */
.carousel-control-next,
.carousel-control-prev {
    z-index: 3;
}

/* if your control icons use background/borders override sizes safely */
.carousel-control-next-icon,
.carousel-control-prev-icon {
    width: 3rem;
    height: 3rem;
    background-color: var(--dark);
    border: 12px solid var(--dark);
    border-radius: 3rem;
}

.page-header {
    padding-top: 12rem;
    padding-bottom: 6rem;
    background: linear-gradient(rgba(0, 29, 35, .8), rgba(0, 29, 35, .8)) 0 0/cover, url(../img/carousel-1.jpg) center center/cover no-repeat
}

.page-header .breadcrumb-item+.breadcrumb-item::before {
    color: #999
}

.causes-item .progress {
    height: 5px;
    border-radius: 0;
    overflow: visible
}

.causes-item .progress .progress-bar {
    position: relative;
    overflow: visible;
    width: 0;
    border-radius: 0;
    transition: 5s
}

.causes-item .progress .progress-bar span {
    position: absolute;
    top: -7px;
    right: 0;
    width: 40px;
    height: 19px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    background: #111940;
    color: #fff
}

.causes-item .causes-overlay {
    position: absolute;
    width: 100%;
    height: 0;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, .5);
    overflow: hidden;
    opacity: 0;
    transition: .5s
}

.causes-item:hover .causes-overlay {
    height: 100%;
    opacity: 1
}

.service-item {
    box-shadow: 0 0 45px rgba(0, 0, 0, .06)
}

.donate {
    background: rgba(0, 29, 35, .8)
}

.btn-group .btn-light:hover,
.btn-group input[type=radio]:checked+label {
    color: var(--primary);
    border-color: var(--primary)
}

.team-text {
    background-color: #111940 !important;
    color: #ffffff !important;
}

.team-text h5 {
    color: #ffffff !important;
}

.team-text a,
.team-text a i {
    color: #ffffff !important;
}


.team-item img {
    position: relative;
    top: 0;
    transition: .5s
}

.team-item:hover img {
    top: -30px
}

.team-item .team-text {
    position: relative;
    height: 100px;
    transition: .5s
}

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

.team-item:hover .team-text {
    margin-top: -60px;
    height: 160px
}

.team-item .team-text .team-social {
    opacity: 0;
    transition: .5s
}

.team-item:hover .team-text .team-social {
    opacity: 1
}

.team-item .team-social .btn {
    display: inline-flex;
    color: var(--primary);
    background: #fff;
    border-radius: 40px
}

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

.testimonial-carousel::before {
    left: 0;
    background: linear-gradient(to right, #fff 0, rgba(255, 255, 255, 0) 100%)
}

.testimonial-carousel::after {
    right: 0;
    background: linear-gradient(to left, #fff 0, rgba(255, 255, 255, 0) 100%)
}

@media (min-width:768px) {

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

@media (min-width:992px) {

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

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

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

.testimonial-carousel .owl-item.center .testimonial-text * {
    color: var(--light) !important
}

.testimonial-carousel .owl-item.center .testimonial-item img {
    background: var(--primary) !important
}

.testimonial-carousel .owl-nav {
    position: absolute;
    width: 350px;
    top: 15px;
    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-next,
.testimonial-carousel .owl-nav .owl-prev {
    position: relative;
    color: var(--primary);
    font-size: 45px;
    transition: .5s
}

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

.footer .btn.btn-link {
    display: block;
    margin-bottom: 5px;
    padding: 0;
    text-align: left;
    color: rgba(255, 255, 255, .5);
    font-weight: 400;
    text-transform: capitalize;
    transition: .3s
}

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

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

.footer .btn.btn-square {
    color: rgba(255, 255, 255, .5);
    border: 1px solid rgba(255, 255, 255, .5)
}

.footer .btn.btn-square:hover {
    color: var(--secondary);
    border-color: var(--light)
}

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


.image-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
}

.content-image {
    max-width: 100%;
    /* container-এর বাইরে যাবে না */
    height: auto;
    /* ratio বজায় রাখবে */
    border-radius: 8px;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
}


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

.footer .copyright a:hover {
    color: var(--primary)
}

/* ============================================================
   BASE STRUCTURE
============================================================ */
/* ---------------------------
   CLEAN, CONSISTENT OVERLAY CSS
   Keeps your HTML unchanged.
   --------------------------- */

/* ---------- BASE / COMMON ---------- */
.overlay-box {
    position: relative;
    overflow: hidden;
    width: 100%;
    /* border-radius: 8px; */
    box-sizing: border-box;
    background: transparent;
}

/* subtle universal backdrop so text is readable (below overlay-text) */
.overlay-box::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.06);
    /* very light to keep image visible */
    z-index: 1;
    pointer-events: none;
}

/* image */
.overlay-box img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: relative;
    z-index: 0;
    transition: transform .5s;
}

/* overlay text - default full-width bottom band */
.overlay-text {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 6;
    /* above the backdrop and image */
    margin: 0;
    padding: 12px 16px;
    font-weight: 700;
    font-size: 18px;
    line-height: 1.2;
    color: #fff;
    box-sizing: border-box;
    display: block;
    background: rgba(0, 0, 0, 0.28);
    /* fallback translucent background for contrast */
}

/* ---------- SIDE PANEL OVERLAYS (purple / yellow) ---------- */
/* These are intended to be full-height vertical panels sitting on left or right */
.purple-overlay,
.yellow-overlay {
    width: 30%;
    /* default desktop width */
    height: 100%;
    top: 0;
    z-index: 7;
    /* above backdrop, above image */
    display: flex;
    align-items: center;
    padding: 12px;
    box-sizing: border-box;
    font-size: 16px;
    color: #fff;
    font-weight: 700;
    background-clip: padding-box;
    text-align: left;
}

/* purple on the RIGHT */
.purple-overlay {
    right: 0;
    left: auto;
    background: rgba(136, 72, 52, 0.85);
}

/* yellow on the LEFT */
.yellow-overlay {
    left: 0;
    right: auto;
    background: rgba(255, 193, 7, 0.92);
    color: #111;
    /* dark text on yellow */
}

/* special variant: if you used yellow2-overlay as bottom band keep it as bottom */
.yellow2-overlay {
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(252, 203, 44, 0.9);
    color: #111;
    z-index: 6;
}

/* green and orange keep the default bottom band but with color */
.green-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    /* Full width */
    height: 60px;
    /* Fixed height overlay */
    background: rgba(90, 189, 90, 0.85);
    color: #fff;
    display: flex;
    align-items: center;
    /* Center text vertically */
    padding: 0 15px;
    /* Left-right space */
    font-size: 18px;
    font-weight: 700;
    z-index: 10;
}


.orange-overlay {
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(136, 72, 52, 0.85);
    color: #fff;
    z-index: 6;
}

/* ---------- SPECIAL IMAGE VARIANTS ---------- */
/* Ensure the named wrapper heights are consistent and predictable */
.image-overlay {
    height: 400px;
}

.image-overlayfour {
    height: 400px;
}

.image-overlaythree {
    height: 500px;
}

/* For the stacked two-images column (image-overlayone + image-overlaytwo)
   we set explicit heights so they align and don't cause mismatch. */
.image-overlayone,
.image-overlaytwo {
    height: 245px;
    /* desktop default - matches previous approach */
}

/* make sure these internal image rules override bootstrap defaults where needed */
.image-overlayone img,
.image-overlaytwo img,
.image-overlaythree img,
.image-overlayfour img,
.image-overlay img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

/* hover zoom */
.image-overlay:hover img,
.image-overlayfour:hover img,
.image-overlayone:hover img,
.image-overlaythree:hover img,
.image-overlaytwo:hover img {
    transform: scale(1.1);
}

/* ---------- RESPONSIVE ADJUSTMENTS ---------- */
/* Tablet */
@media (min-width: 769px) and (max-width: 1024px) {
    .image-overlaythree {
        height: 408px;
    }

    .image-overlayone,
    .image-overlaytwo {
        height: 200px;
    }

    /* side overlay narrower on tablet */
    .purple-overlay,
    .yellow-overlay {
        width: 40%;
        font-size: 13px;
        padding: 10px;
    }

    /* overlay text bottom band slightly smaller */
    .overlay-text {
        font-size: 16px;
        padding: 10px 12px;
    }

    .green-overlay {
        background: rgb(108, 190, 108);
        font-size: 13px !important;
        padding: 6px 10px !important;

        display: -webkit-box;
        -webkit-line-clamp: 2;
        /* max 2 lines */
        -webkit-box-orient: vertical;

        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: normal !important;
    }
}

/* Mobile (<=768px) - stacked full width */
@media (max-width: 768px) {

    /* Force column blocks to full width */
    .custom-container .col-md-5,
    .custom-container .col-md-4,
    .custom-container .col-md-3 {
        width: 100% !important;
        max-width: 100% !important;
        display: block;
    }

    /* smaller heights for mobile */
    .image-overlay,
    .image-overlayfour {
        height: 230px;
    }

    .image-overlaythree {
        height: 260px;
    }

    .image-overlayone,
    .image-overlaytwo {
        height: 150px !important;
    }

    .overlay-box {
        height: auto;
        position: relative;
    }

    /* allow per-component height on mobile */

    /* side overlays become narrower and use smaller text */
    .purple-overlay,
    .yellow-overlay {
        width: 40% !important;
        font-size: 12px !important;
        padding: 8px !important;
    }

    /* bottom band text smaller */
    .overlay-text {
        font-size: 14px;
        padding: 8px 10px;
    }

    .green-overlay {
        background: rgb(108, 190, 108);
        font-size: 13px !important;
        padding: 6px 10px !important;

        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: normal !important;

    }



}

/* ---------- UTILITY FIXES (avoid specificity clashes) ---------- */
/* ensure overlay text stays readable by making it above the backdrop */
.overlay-box .overlay-text,
.overlay-box .purple-overlay,
.overlay-box .yellow-overlay {
    position: absolute;
    box-sizing: border-box;
}

/* ensure side overlays don't cover center text when both present */
.overlay-box .purple-overlay,
.overlay-box .yellow-overlay {
    z-index: 9;
}

/* if you have both a side overlay and a bottom overlay text,
   nudge bottom overlay in so it doesn't sit under the side panel */
.overlay-box .overlay-text {
    padding-left: calc(16px + 0.32 * 100% * 0);
    /* no change, placeholder to show safe calc approach */
}

/* If you prefer the bottom overlay not to stretch under side overlays,
   uncomment the following to inset the bottom band when side overlay exists:
   .overlay-box .overlay-text { left: 30%; right: 30%; } */

/* ---------- END ---------- */



.announcement-section {
    background-color: #f8f9fa;
    padding: 25px 0
}

.announcement-title {
    font-size: 18px;
    color: #000;
    font-family: "Saira", sans-serif;
    text-decoration: none;
    padding-left: 0;
    letter-spacing: .5px
}

.announcement-item {
    display: block;
    padding: 8px 12px;
    border-radius: 4px;
    background-color: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .08);
    transition: .3s
}

.hex,
.hex-grid,
.hex-row,
.text-hex {
    display: flex
}


.hex,
.project-card,
.service-item {
    transition: transform .3s, box-shadow .3s
}

.announcement-item span {
    color: #222;
    font-size: 14px;
    line-height: 1.5
}

.announcement-item:hover {
    background-color: #f1f1f1;
    transform: translateY(-2px)
}

.announcement-section .row.g-3 {
    margin-top: 5px
}

.hex-grid {
    flex-direction: column;
    align-items: center;
    gap: 0
}

.hex-row {
    justify-content: center;
    margin-bottom: -30px
}

.offset-row {
    margin-left: -5px
}

.hex {
    position: relative;
    width: 200px;
    height: 173px;
    background: #eee;
    clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
    align-items: center;
    justify-content: center;
    background: linear-gradient(65deg, #9bb1d6, #1a52bb)
}

.hex::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    clip-path: inherit;
    background: 0 0;
    pointer-events: none
}

.hex:hover {
    transform: translateY(-6px)
}

.image-hex {
    background-size: cover;
    background-position: center
}

.text-hex {
    background: linear-gradient(65deg, #08327a, #79a4f3);
    text-align: center;
    font-weight: 700;
    font-size: 10px;
    align-items: center;
    justify-content: center
}

#research,
.projects-section {
    background-color: #fef9e6
}

.text-hex p {
    margin: 0;
    padding: 22px;
    line-height: 1.3em;
    color: #fff;
    font-size: 15px
}


/* -----------our services----------- */

.service-item {
    background: linear-gradient(135deg, #5e8ce2, #08327a);
    height: 260px;
    width: 100%;
    margin: auto;
    border-radius: 6px;
    transition: transform .3s ease, box-shadow .3s ease;
}

/* Hover animation */
.service-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}


/* -----------Theme----------- */
.theme-item {
    background: linear-gradient(135deg, #7dc5f5, #0e8ed8);
    height: 260px;
    width: 100%;
    margin: auto;
    border-radius: 6px;
    transition: transform .3s ease, box-shadow .3s ease;
}

/* Hover animation */
.theme-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
}

/* White "Learn More" button */
.learn-more-btn {
    background-color: #ffffff;
    color: #08327a;
    font-weight: 600;
    text-decoration: none;
    border-radius: 25px;
    padding: 6px 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

/* Icon inside button */
.learn-more-btn i {
    color: #08327a;
    font-size: 14px;
}

/* Hover effect for white button */
.learn-more-btn:hover {
    background-color: #f1f1f1;
    transform: translateY(-2px);
}

/* Responsive layout adjustments */
@media (max-width: 992px) {
    .col-md-4 {
        width: 33.3333%;
        /* 3 per row */
    }
}

@media (max-width: 768px) {
    .col-sm-6 {
        width: 50%;
        /* 2 per row */
    }
}

@media (max-width: 576px) {
    .col-sm-6 {
        width: 100%;
        /* 1 per row */
    }
}

/* -----------our services-end---------- */

.card:hover {
    transform: translateY(-5px);
    transition: .3s;
    box-shadow: 0 8px 20px rgba(0, 0, 0, .1)
}

#contact:hover,
#research:hover,
#themes:hover,
.gradient-border-card,
.project-card,
.text-primary {
    background: linear-gradient(135deg, #5e8ce2, #08327a)
}

.project-card {
    color: #fff
}

.project-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, .2)
}

.project-card h3 {
    font-weight: 700
}

.project-card p {
    font-size: 15px
}

.project-card .btn {
    font-weight: 500;
    border-radius: 20px
}

.gradient-border-card {
    position: relative;
    border-radius: 15px;
    padding: 2px
}

.gradient-border-card .card-body {
    background: #fff;
    border-radius: 13px;
    padding: 2rem;
    height: 100%
}

.custom-dark-card {
    background-color: #111940 !important;
    color: #ffffff !important;
}

.custom-dark-card h5,
.custom-dark-card p,
.custom-dark-card a {
    color: #ffffff !important;
}

.custom-dark-card p span {
    color: #ffffff !important;
}


#contact,
#research {
    border: 1px solid #17446e
}

.text-primary {
    -webkit-background-clip: text;
    /* -webkit-text-fill-color: transparent; */
    background-clip: text;
    color: transparent;
    display: inline-block
}

.text-primary sup {
    color: #2c51b8 !important;
    /* or #000 if background is light */
    font-size: 0.7em;
    top: -0.4em;
    position: relative;
}

#mbt i {
    color: #f8f9fa
}

#mbt:hover {
    color: #f0f8ff
}

#mbth:hover {
    color: #08327a
}

#contact {
    color: #1e4ac2
}

#contact:hover,
#research:hover {
    border: 1px solid #17446e;
    color: #fff
}

#about-font {
    color: #000;
    line-height: 1.8;
    text-align: justify;
    text-justify: inter-word;
    word-spacing: 0.8px
}

#abo {
    line-height: 1.5;
    color: #000
}

#see-more:hover {
    background: linear-gradient(135deg, #d4dceb, #859cc5);
    color: #f0f8ff
}

.reveal {
    opacity: 0;
    transform: translateY(50px);
    transition: .6s
}

.reveal.active {
    opacity: 1;
    transform: translateY(0)
}

.client-box {
    border: 1px solid #eee;
    transition: .3s ease-in-out;
    width: 100%;
    height: 120px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff
}

.client-box img {
    max-height: 70px;
    object-fit: contain;
    filter: grayscale(100%);
    transition: .3s
}

.client-box:hover img {
    filter: grayscale(0%);
    transform: scale(1.05)
}

.see-all-link {
    text-decoration: none;
    font-size: 1rem;
    transition: .3s
}

.see-all-link:hover {
    color: #063b8e;
    text-decoration: underline
}

@media (max-width:768px) {
    .client-box {
        height: 90px
    }

    .client-box img {
        max-height: 50px
    }
}

/* =========================================
   Auto Superscript for ® and ™ symbols
   ========================================= */

sup {
    font-size: 0.8em;
    /* vertical-align: super; */
}

/* Make all ® and ™ characters smaller and lifted visually */
body :not(sup):not(script):not(style):not(title):not(svg):not(path) {
    font-family: inherit;
}

body * {
    position: relative;
}

/* Automatically style "®" and "™" to look like superscripts */
body *:not(sup):not(script):not(style):not(title):not(svg):not(path) {
    font-variant-position: normal;
}


.carousel-caption {
    position: absolute;
    bottom: 40px;
    /* how low you want */
    left: 160px;
    /* how left you want */
    text-align: left !important;
}

.slider-area {
    margin-top: 105px;
}

@media (max-width: 768px) {

    .carousel-caption {
        bottom: -15px !important;
        /* 60px niche anar jonno */
        left: 35px !important;
        right: 0 !important;
        text-align: left !important;
    }

    .slider-area {
        margin-top: 65px;
    }

    .carousel-caption .btn {
        padding: 2px 2px !important;
        font-size: 10px !important;
        border-radius: 4px !important;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {

    .carousel-caption {
        bottom: -10px !important;
        /* tab view e aro niche */
        left: 80px !important;
        /* tab e left position adjust */
        right: 0 !important;
        text-align: left !important;
    }

    .slider-area {
        margin-top: 70px !important;
        /* tab e aro space dibe */
    }

    .carousel-caption .btn {
        padding: 6px 14px !important;
        font-size: 14px !important;
        border-radius: 6px !important;
    }
}

@media (max-width: 768px) {
    .projects-section .col-md-4 {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }

    .project-card {
        margin-bottom: 15px;
        /* spacing */
    }
}