* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    text-decoration: none;
    list-style-type: none;

}

body {
    font-family: Roboto, sans-serif;
    ;
}

/* topnav */
.topnav {
    background: white;
    padding: 1vw 0;
    transition: all 0.4s ease;
}

.topnav.hide {
    margin-top: -5vw;
    /* adjust according to your topnav height */
    opacity: 0;
}

.topnav-wrapper {
    max-width: 100vw;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    padding: 0 2vw;
}

.topnav .left {
    display: flex;
    gap: 2vw;
}

.topnav .left a {
    color: #4A4A4A;
    font-size: 1vw;
    font-weight: 400;
}

.topnav .left a i {
    margin-right: 5px;
    color: rgb(220, 4, 4);
}

.topnav .right {
    display: flex;
    gap: 1vw;
}

.topnav .right a i {
    font-size: 1.3vw;
    color: #4A4A4A;
}

.topnav .right i {
    background-color: rgb(220, 4, 4);
    color: white !important;
    padding: 0.5vw;
    border-radius: 50%;

}

/* header */
.header {
    background: white;
    position: sticky;
    top: 0;
    z-index: 999;
    box-shadow: 0 0.5vw 0.6vw rgba(0, 0, 0, 0.05);
}

.header-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 2vw;
    max-width: 100%;
    margin: 0 auto;
    height: 7vw;
    position: relative;
}

.header-left {
    display: flex;
    align-items: center;
}

.header-left img {
    height: 6vw;
    width: auto;
    object-fit: contain;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 1vw;
}

/* ── Hamburger button (hidden on desktop) ── */
.hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 1100;
    padding: 4px;
    border-radius: 6px;
    transition: background 0.2s;
}

.hamburger:hover {
    background: rgba(220, 4, 4, 0.07);
}

.ham-line {
    display: block;
    width: 26px;
    height: 2.5px;
    background: #2b2b2b;
    border-radius: 4px;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.25s ease,
        width 0.25s ease;
    transform-origin: center;
}

/* Animated X when open */
.hamburger.open .ham-line:nth-child(1) {
    transform: translateY(7.5px) rotate(45deg);
}

.hamburger.open .ham-line:nth-child(2) {
    opacity: 0;
    width: 0;
}

.hamburger.open .ham-line:nth-child(3) {
    transform: translateY(-7.5px) rotate(-45deg);
}

/* ── Desktop nav menu ── */
.menu {
    display: flex;
    align-items: center;
    gap: 2vw;
}

.menu>li {
    position: relative;
    list-style: none;
}

.menu>li>a {
    color: #2b2b2b;
    font-size: 1.3vw;
    font-weight: 500;
    padding: 1vw 0;
    display: flex;
    align-items: center;
    gap: 1vw;
    transition: color 0.3s ease, border-color 0.3s ease;
    border-bottom: 0.2vw solid transparent;
}

.menu>li>a:hover {
    color: rgb(220, 4, 4);
    border-bottom-color: rgb(220, 4, 4);
}
.menu>li>a.active {
    color: rgb(220, 4, 4);
    border-bottom-color: rgb(220, 4, 4);
}

/* Dropdown Menu styling */
.menu .dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    background: #ffffff;
    border-radius: 3vw;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
    padding: 0.5vw 0;
    min-width: 20vw;
    border: 0.5vw solid rgba(0, 0, 0, 0.05);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    transition: opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
        visibility 0.3s;
}

/* Align rightmost dropdowns to prevent screen overflow */
.menu .dropdown-parent:nth-last-child(-n+3) .dropdown {
    left: auto;
    right: 0;
}

/* Show dropdown on hover, focus, or when active */
.menu .dropdown-parent:hover .dropdown,
.menu .dropdown-parent:focus-within .dropdown,
.menu .dropdown-parent.active .dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.menu .dropdown li {
    width: 100%;
    list-style: none;
}

.menu .dropdown li a {
    display: block;
    padding: 10px 20px;
    color: #4a4a4a;
    font-size: 1vw;
    font-weight: 400;
    transition: background-color 0.2s ease, color 0.2s ease;
    text-align: left;
    white-space: nowrap;
}

.menu .dropdown li a:hover {
    background-color: rgba(220, 4, 4, 0.05);
    color: rgb(220, 4, 4);
}

/* Get in Touch Button */
.btn-get-in-touch {
    background-color: rgb(220, 4, 4);
    color: white;
    font-size: 1.1vw;
    font-weight: 600;
    padding: 1vw 2vw;
    margin-left: 2vw;
    transition: all 0.3s ease;
    display: inline-block;
    white-space: nowrap;
    text-decoration: none;
    border-radius: 0.5vw;
}

.btn-get-in-touch:hover {
    background-color: rgb(180, 2, 2);
}

/* WhatsApp floating button */
.whatsapp-float {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    z-index: 1200;
    width: 4rem;
    height: 4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #25D366;
    color: white;
    border-radius: 50%;
    box-shadow: 0 18px 28px rgba(37, 211, 102, 0.25);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    text-decoration: none;
}

.whatsapp-float:hover,
.whatsapp-float:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 22px 38px rgba(37, 211, 102, 0.32);
}

.whatsapp-float i {
    font-size: 1.5rem;
}

@media (max-width: 768px) {
    .whatsapp-float {
        right: 1rem;
        bottom: 1rem;
        width: 3.7rem;
        height: 3.7rem;
        transform: translateY(-2px);
    }
}
   

.btn-get-in-touch:active {
    transform: translateY(0);
}

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

    .header-wrapper {
        padding: 0 4vw;
        height: 18vw;
    }

    .header-left img {
        height: 14vw;
    }

    /* Show hamburger */
    .hamburger {
        display: flex;
    }

    /* Mobile nav panel: slides in from top-right */
    .header-right {
        position: fixed;
        top: 18vw;
        /* just below the sticky header */
        right: 0;
        width: 75vw;
        max-width: 320px;
        height: calc(100vh - 18vw);
        background: #fff;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: 0;
        padding: 4vw 6vw;
        box-shadow: -6px 0 30px rgba(0, 0, 0, 0.12);
        border-radius: 0 0 0 20px;
        overflow-y: auto;
        z-index: 1050;

        /* Hidden by default — slides out to the right */
        transform: translateX(110%);
        opacity: 0;
        visibility: hidden;
        transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1),
            opacity 0.3s ease,
            visibility 0.38s;
    }

    /* Shown when .open is toggled */
    .header-right.open {
        transform: translateX(0);
        opacity: 1;
        visibility: visible;
    }

    /* Dim backdrop */
    .nav-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.35);
        z-index: 998;
        opacity: 0;
        transition: opacity 0.3s ease;
    }

    .nav-backdrop.show {
        display: block;
        opacity: 1;
    }

    /* Menu list in mobile */
    .menu {
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        width: 100%;
    }

    .menu>li {
        width: 100%;
        border-bottom: 1px solid #f0f0f0;
    }

    .menu>li>a {
        font-size: 4.5vw;
        padding: 3.5vw 0;
        border-bottom: none;
        width: 100%;
        justify-content: space-between;
    }

    /* Mobile dropdowns — expand inline */
    .menu .dropdown {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        border: none;
        box-shadow: none;
        border-radius: 0;
        padding: 0 0 0 4vw;
        min-width: 0;
        background: transparent;
        display: none;
        transition: none;
    }

    .menu .dropdown-parent.active .dropdown {
        display: block;
    }

    .menu .dropdown li {
        width: 100%;
    }

    .menu .dropdown li a {
        font-size: 4vw;
        padding: 2.5vw 0;
        color: #555;
    }

    /* Hide "Get in Touch" button on mobile or style it */
    .btn-get-in-touch {
        font-size: 4vw;
        padding: 3vw 5vw;
        margin-left: 0;
        margin-top: 4vw;
        border-radius: 2vw;
        width: 100%;
        text-align: center;
        display: block;
    }
}

@media (max-width: 480px) {

    .header-wrapper {
        height: 22vw;
    }

    .header-left img {
        height: 17vw;
    }

    .header-right {
        top: 22vw;
        height: calc(100vh - 22vw);
        width: 85vw;
        padding: 5vw 7vw;
    }

    .menu>li>a {
        font-size: 5.5vw;
        padding: 4vw 0;
    }

    .menu .dropdown li a {
        font-size: 4.5vw;
    }
}

/* breadcrumb */
.breadcrumb {

    width: 100%;
    min-height: 15vw;
    background:
        linear-gradient(rgba(214, 3, 3, 0.62), rgba(214, 3, 3, 0.62)),
        url("../uploads/2023/05/Medical-Devices-Image.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 3vw 6vw;
}


.breadcrumb-image {
    color: white;
    text-align: center;
    padding: 2vw;

}

.breadcrumb-image h6 {
    font-size: 2vw;
    padding: 1vw;

}

.breadcrumb-image p {
    font-size: 1.5vw;
}

.breadcrumb-image a {
    text-decoration: none;
    color: white;

}

.breadcrumb-image p:hover {
    color: black;
}

/* get in touch */
.contact-section {
    width: 100%;
    padding: 6vw 8vw;
    background: #fff;
}

.contact-wrapper {
    display: flex;
    justify-content: space-between;
    gap: 4vw;
    align-items: flex-start;
}

.contact-left {
    width: 45%;
}

.contact-tag {
    color: #d71920;
    font-size: 1vw;
    font-weight: 600;
    letter-spacing: .1vw;
}

.contact-left h2 {
    font-size: 3vw;
    margin-top: .8vw;
    color: #222;
}

.contact-left p {
    font-size: 1vw;
    line-height: 1.8vw;
    color: #666;
    margin: 1.5vw 0 2vw;
}

.contact-info {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5vw;
}

.info-box {
    display: flex;
    align-items: flex-start;
    gap: 1vw;
}

.icon {
    width: 3vw;
    height: 3vw;
    /* background: #d71920; */
    color: #d71920;;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: .6vw;
    font-size: 1.5vw;
}

.info-box h4 {
    font-size: 1.1vw;
    color: #222;
    margin-bottom: .3vw;
}

.info-box span {
    font-size: .9vw;
    color: #666;
    line-height: 1.5vw;
}

.social-links {
    display: flex;
    gap: 1vw;
    margin-top: 2vw;
}

.social-links a {
    width: 3vw;
    height: 3vw;
    /* background: #d71920; */
    color: #d71920;;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: .3s;
    font-size: 1.5vw;
}

.social-links a:hover {
    background: #666;
    color: white;
}

.contact-form {
    width: 50%;
    background: #f7f9fb;
    padding: 2.5vw;
    border-radius: 1vw;
    box-shadow: 0 .5vw 2vw rgba(0, 0, 0, .08);
}

.row {
    display: flex;
    gap: 1vw;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 1vw;
    margin-bottom: 1.2vw;
    border: .08vw solid #ddd;
    border-radius: .4vw;
    font-size: .95vw;
    outline: none;
    font-family: inherit;
}

.contact-form textarea {
    height: 10vw;
    resize: none;
}

.contact-form input:focus,
.contact-form textarea:focus {
    border-color: #d71920;
}

.contact-form button {
    background: #d71920;
    color: #fff;
    border: none;
    padding: 1vw 2.5vw;
    border-radius: .4vw;
    font-size: 1vw;
    cursor: pointer;
    transition: .3s;
}

.contact-form button:hover {
    background: #b70f17;
}

iframe {
    width: 100%;
    border-radius: 3vw !important;
    padding: 2vw;
}
@media screen and (max-width:768px){

.contact-section{
    padding:8vw 6vw;
}

.contact-wrapper{
    flex-direction:column;
    gap:6vw;
}

.contact-left,
.contact-form{
    width:100%;
}

.contact-tag{
    font-size:2.5vw;
}

.contact-left h2{
    font-size:6vw;
    margin-top:2vw;
}

.contact-left p{
    font-size:2.5vw;
    line-height:4vw;
    margin:3vw 0 5vw;
}

.contact-info{
    grid-template-columns:repeat(2,1fr);
    gap:3vw;
}

.info-box{
    gap:2vw;
}

.icon{
    width:7vw;
    height:7vw;
    font-size:3.5vw;
}

.info-box h4{
    font-size:2.8vw;
    margin-bottom:.8vw;
}

.info-box span{
    font-size:2.2vw;
    line-height:3.5vw;
}

.social-links{
    gap:2vw;
    margin-top:4vw;
}

.social-links a{
    width:7vw;
    height:7vw;
    font-size:3.5vw;
}

.contact-form{
    padding:5vw;
    border-radius:2vw;
}

.row{
    gap:2vw;
}

.contact-form input,
.contact-form textarea{
    padding:2vw;
    margin-bottom:2vw;
    font-size:2.2vw;
    border-radius:1vw;
}

.contact-form textarea{
    height:24vw;
}

.contact-form button{
    padding:2vw 5vw;
    font-size:2.5vw;
    border-radius:1vw;
}

iframe{
    padding:3vw;
    border-radius:4vw !important;
}

}





@media screen and (max-width:465px){

.contact-section{
    padding:12vw 6vw;
}

.contact-wrapper{
    gap:8vw;
}

.contact-tag{
    font-size:4vw;
}

.contact-left h2{
    font-size:8vw;
}

.contact-left p{
    font-size:3.8vw;
    line-height:6vw;
    margin:4vw 0 6vw;
}

.contact-info{
    grid-template-columns:1fr;
    gap:5vw;
}

.info-box{
    gap:3vw;
}

.icon{
    width:12vw;
    height:12vw;
    font-size:6vw;
}

.info-box h4{
    font-size:4.5vw;
}

.info-box span{
    font-size:3.8vw;
    line-height:5.8vw;
}

.social-links{
    gap:3vw;
    margin-top:6vw;
}

.social-links a{
    width:11vw;
    height:11vw;
    font-size:5vw;
}

.contact-form{
    padding:6vw;
    border-radius:3vw;
}

.row{
    flex-direction:column;
    gap:0;
}

.contact-form input,
.contact-form textarea{
    padding:3.5vw;
    margin-bottom:3vw;
    font-size:3.8vw;
    border-radius:2vw;
}

.contact-form textarea{
    height:40vw;
}

.contact-form button{
    width:100%;
    padding:3.8vw;
    font-size:4vw;
    border-radius:2vw;
}

iframe{
    padding:4vw;
    border-radius:5vw !important;
}

}
/* footer */
.footer {
    width: 100%;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9) 0%, rgba(248, 249, 250, 0.9) 50%, rgba(238, 242, 247, 0.9) 100%),
        url("../uploads/2023/05/dr-team-img-1.jpg");
    background-size: cover;

    background-repeat: no-repeat;
    padding: 3vw 6vw 1vw;
    color: #fff;
}

.footer-wrapper {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 3vw;
    flex-wrap: wrap;
}

.footer-logo {
    width: 28%;
}

.footer-logo img {
    width: 12vw;
    height: auto;
}

.footer-logo p {
    margin-top: 1vw;
    font-size: 1vw;
    color: #666;
    line-height: 1.8vw;
    width: 20vw;


}

.navigation,
.quicklinks,
.reach-us {
    width: 20%;
}

.navigation p,
.quicklinks p,
.reach-us p {
    font-size: 1.4vw;
    font-weight: 600;
    color: #666;
    margin-bottom: 1.5vw;
}

.navigation ul,
.quicklinks ul {
    padding: 0;
}

.navigation li,
.quicklinks li {
    list-style: none;
    margin-bottom: 1vw;
    font-size: 1vw;
    color: #666;
    cursor: pointer;
    transition: .3s;
}

.navigation li a,
.quicklinks li a {
    color: inherit;
    transition: inherit;
    display: inline-block;
}

.navigation li:hover,
.quicklinks li:hover {
    color: #e63946;
    transform: translateX(.5vw);
}

.reach-us {
    display: flex;
    flex-direction: column;
}

.reach-us .reach-link {
    display: flex;
    align-items: flex-start;
    text-decoration: none;
    color: #666;
    font-size: 1vw;
    margin-bottom: 1.2vw;
    line-height: 1.7vw;
    transition: .3s;
}

.reach-us .reach-link:hover {
    color: #e63946;
}

.reach-us .reach-link i {
    width: 1.5vw;
    margin-right: .8vw;
    color: #e63946;
    margin-top: 0.2vw;
    flex-shrink: 0;

}

.reach-us .reach-emails {
    display: flex;
    align-items: flex-start;
    margin-bottom: 1.2vw;
}

.reach-us .reach-emails i {
    width: 1.5vw;
    margin-right: .8vw;
    color: #e63946;
    margin-top: 0.2vw;
    flex-shrink: 0;
}

.reach-us .emails-list {
    display: flex;
    flex-direction: column;
}

.reach-us .emails-list a {
    text-decoration: none;
    color: #666;
    font-size: 1vw;
    line-height: 1.7vw;
    transition: .3s;
}

.reach-us .emails-list a:hover {
    color: #e63946;
}

.reach-us .social-icons {
    margin-left: 0.5vw;
    padding: 0.5vw;
    display: flex;
    gap: 1vw;
}

.reach-us .social-icons a {
    color: #666;
    transition: color 0.3s;
    font-size: 2vw;
}

.reach-us .social-icons a:hover {
    color: #e63946;
}

.reach-us .social-icons i {
    font-size: 1.3vw;
    margin-top: 1vw;
}

.footer-bottom {
    width: 100%;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    margin-top: 1vw;
    padding-top: 1vw;
    text-align: center;
}

.footer-bottom p {
    font-size: 1vw;
    color: #666;
    font-weight: 500;
}

@media(max-width:480px) {

    .footer {
        padding: 10vw 7vw;
    }

    .footer-wrapper {
        flex-direction: column;
        gap: 8vw;
    }

    .footer-logo,
    .navigation,
    .quicklinks,
    .reach-us {
        width: 100%;
    }

    .footer-logo img {
        width: 38vw;
    }

    .footer-logo p {
        font-size: 4.8vw;
        line-height: 6vw;
        width: 70vw;
        margin-top: 2vw;
    }

    .navigation p,
    .quicklinks p,
    .reach-us p {
        font-size: 5vw;
        margin-bottom: 3vw;
    }

    .navigation li,
    .quicklinks li,
    .reach-us .reach-link,
    .reach-us .emails-list a {
        font-size: 3.8vw;
        line-height: 7vw;
    }

    .reach-us .reach-link i,
    .reach-us .reach-emails i {
        width: 5vw;
        margin-right: 2vw;
    }

    .reach-us .social-icons {
        gap: 4vw;
    }

    .reach-us .social-icons i {
        font-size: 5vw;
        margin-top: 2vw;
    }

    .footer-bottom {
        margin-top: 8vw;
        padding-top: 6vw;
    }

    .footer-bottom p {
        font-size: 3.8vw;
    }

}
/* about-us  */
.about-company{
    width:100%;
    padding:3vw 6vw;
    display:flex;
    justify-content:space-between;
    /* align-items:center; */
    gap:5vw;
}

.about-image{
    width:45%;
    position:relative;
    overflow:hidden;
    border-radius:1vw;
}

.about-image img{
    width:100%;
    height: 90%;
    display:block;
    border-radius:1vw;
    transition:.5s;
}

/* .about-image:hover img{
    transform:scale(1.08);
} */

.experience-box{
    position:absolute;
    bottom:2vw;
    left:2vw;
    background:#d71920;
    color:#fff;
    padding:1.5vw;
    border-radius:.8vw;
    text-align:center;
}

.experience-box h2{
    font-size:1vw;
    font-weight:400;
}

.experience-box span{
    font-size:2vw;
    font-weight:700;
}

.about-content{
    width:50%;
}

.about-content span{
    color:#d71920;
    font-size:1vw;
    font-weight:600;
    letter-spacing:.1vw;
}

.about-content h2{
    font-size:2.8vw;
    margin:1vw 0;
    color:#222;
    line-height:3.5vw;
}

.about-content p{
    font-size:1vw;
    line-height:1.8vw;
    color:#666;
    margin-bottom:1.5vw;
}

.about-feature{
    display:flex;
    gap:1.5vw;
    margin-top:2vw;
}

.feature-card{
    flex:1;
    background:#fff;
    padding:0.5vw;
    text-align:center;
    border-radius:1vw;
    box-shadow:0 .6vw 1.8vw rgba(0,0,0,.08);
    transition:.4s;
}

.feature-card:hover{
    background:#d71920;
    color:#fff;
    transform:translateY(-.6vw);
}

.feature-card h3{
    font-size:1.8vw;
    margin-bottom:.5vw;
}

.feature-card p{
    font-size:.9vw;
    margin:0;
}

.vision-section{

    width:100%;
    padding:3vw 6vw;
    background:#f8f9fb;

}

.vision-heading{

    text-align:center;
    margin-bottom:4vw;

}

.vision-heading span{

    color:#d71920;
    font-size:1vw;
    font-weight:600;
    letter-spacing:.1vw;

}

.vision-heading p{

    font-size:1vw;
    margin-top:1vw;

}

.vision-wrapper{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:2vw;
    align-items:stretch;
}

.large-card{
    width:auto;
}

.small-cards{
    display:contents;
}

.vision-card{
    background:#fff;
    padding:2vw;
    border-radius:1vw;
    position:relative;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    height:100%;
    transition:transform .4s ease, box-shadow .4s ease;
    box-shadow:0 .5vw 1.5vw rgba(0,0,0,.08);
    cursor:pointer;

}

.vision-card::before{

    content:"";
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:.35vw;
    /* background:#d71920; */

}

.vision-card:hover{

    transform:translateY(-.7vw);
    box-shadow:0 1vw 2vw rgba(0,0,0,.12);
    z-index:2;

}

.vision-icon{

    width:4vw;
    height:4vw;
    background:#ffe7e7;
    border-radius:50%;
    display:flex;
    justify-content:center;
    align-items:center;
    color:#d71920;
    font-size:1.5vw;
    margin-bottom:1.5vw;
    transition:.4s;

}

.vision-card:hover .vision-icon{

    background:#d71920;
    color:#fff;
    transform:rotate(360deg);

}

.vision-card h3{

    font-size:1.6vw;
    margin-bottom:1vw;
    color:#222;

}

.vision-card p{

    font-size:1vw;
    color:#666;
    line-height:1.8vw;
    flex:1;

}

.large-card h3{

    font-size:2vw;

}

.large-card p{

    margin-top:1.5vw;

}

@media(max-width:1024px) {
.about-company{
    flex-direction: column;
}
.about-content span{
    font-size: 2vw;
}

    .vision-wrapper{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }
}

@media(max-width:768px) {
    .about-image{
        width: 100%;
    }
    .about-company{
        padding: 8vw 5vw;
        gap: 6vw;
    }
    .about-image img{
        height: auto;
    }
    .about-content {
        width: 100%;
    }
    .about-content span{
        font-size: 3vw;
    }
    .about-content h2{
        font-size: 7vw;
        line-height: 1.2;
        margin: 2vw 0 4vw;
    }
    .about-content p{
        font-size: 3.5vw;
        line-height: 1.8;
        margin-bottom: 4vw;
    }
    .about-feature{
        flex-direction: column;
        gap: 3vw;
        margin-top: 4vw;
    }
    .feature-card{
        padding: 4vw;
        border-radius: 4vw;
    }
    .feature-card h3{
        font-size: 7vw;
    }
    .feature-card p{
        font-size: 3.2vw;
    }
    .vision-section{
        padding: 10vw 5vw;
    }
    .vision-heading{
        margin-bottom: 6vw;
    }
    .vision-wrapper{
        grid-template-columns:1fr;
    }

    .vision-card{
        padding:5vw;
        border-radius:4vw;
        display:flex;
        flex-wrap:wrap;
        align-items:center;
        gap:3vw;
    }

    .vision-icon{
        width:14vw;
        height:14vw;
        font-size:5vw;
        margin-bottom:0;
        flex:0 0 14vw;
    }

    .vision-card h3,
    .large-card h3{
        font-size:6vw;
        margin-bottom:0;
        flex:1 1 calc(100% - 17vw);
    }

    .vision-card p{
        font-size:3.7vw;
        line-height:1.8;
        flex-basis:100%;
        margin-top:1vw;
    }

    .large-card p{
        margin-top:2vw;
    }
    .about-team{
        flex-direction: column-reverse;
        padding: 10vw 5vw;
        gap: 6vw;
    }
    .about-team .about-content,
    .abt-image{
        width: 100%;
    }
    .abt-image img{
        height: auto;
    }
    .department-section{
        padding: 10vw 5vw;
    }
    .department-heading{
        margin-bottom: 6vw;
    }
    .department-heading span{
        font-size: 3vw;
    }
    .department-heading p{
        font-size: 3vw!important;
        line-height: 1.4;
        padding: 0;
    }
    .department-wrapper{
        grid-template-columns: 1fr;
        gap: 4vw;
    }
    .department-card{
        padding: 7vw 5vw;
        border-radius: 4vw;
    }
    .department-card i{
        font-size: 11vw;
    }
    .department-card h3{
        font-size: 4.2vw;
        line-height: 1.5;
        margin-top: 4vw;
    }
    .counter-section{
        padding: 10vw 5vw;
    }
    .counter-heading{
        margin-bottom: 6vw;
    }
    .counter-heading span{
        font-size: 3vw;
    }
    .counter-heading h2{
        font-size: 7vw;
    }
    .counter-wrapper{
        flex-direction: column;
        gap: 4vw;
    }
    .counter-box{
        width: 100%;
        padding: 6vw;
        border-radius: 4vw;
    }
    .counter-box img{
        width: 12vw;
    }
    .counter-box h2{
        font-size: 7vw;
    }
    .counter-box p{
        font-size: 3.4vw;
    }
    .faqs{
        padding: 8vw 0;
    }
    .faqs-wrapper{
        padding: 0 5vw;
    }
    .faqs-cards{
        grid-template-columns: 1fr;
        gap: 3vw;
    }
    .question{
        font-size: 4vw;
        padding: 4vw 3vw;
    }
    .answer{
        font-size: 3.6vw;
    }
    .answer p{
        padding: 4vw 3vw;
        line-height: 1.8;
    }
    .brochure-section{
        flex-direction: column-reverse;
        gap: 6vw;
        padding: 10vw 5vw;
    }
    .brochure-content,
    .brochure-image{
        width: 100%;
        text-align: center;
    }
    .brochure-content span{
        font-size: 3vw;
    }
    .brochure-content h2{
        font-size: 7vw;
        line-height: 1.2;
    }
    .brochure-content p{
        font-size: 3.4vw;
        line-height: 1.8;
    }
    .brochure-btn{
        flex-direction: column;
        gap: 3vw;
    }
    .download-btn,
    .view-btn{
        justify-content:center;
        width:100%;
        font-size:3.6vw;
        padding:4vw 5vw;
        border-radius:3vw;
    }
    .brochure-image img{
        width: 100%;
    }
    .marquee-section{
        padding: 5vw 0;
    }
    .marquee-content{
        gap: 8vw;
    }
    .marquee-item{
        gap: 2vw;
    }
    .marquee-item img{
        width: 10vw;
        height: 10vw;
    }
    .marquee-item span{
        font-size: 3vw;
    }
}

@media(max-width:480px) {
    .about-company,
    .vision-section,
    .about-team,
    .department-section,
    .counter-section,
    .brochure-section{
        padding-left: 4vw;
        padding-right: 4vw;
    }

    .about-content h2{
        font-size: 8vw;
    }

    .about-content span{
        font-size: 3.2vw;
    }

    .about-content p,
    .vision-card p,
    .faqs-text p,
    .brochure-content p{
        font-size: 3.9vw;
    }

    .vision-heading p{
        font-size: 3.7vw;
        line-height: 1.8;
    }

    .faqs-text h2,
    .counter-heading h2,
    .brochure-content h2{
        font-size: 8vw;
        line-height: 1.2;
    }

    .department-heading p{
        font-size: 5.8vw;
    }

    .question{
        font-size: 4.3vw;
    }

    .download-btn,
    .view-btn{
        font-size: 4vw;
    }

    .marquee-item span{
        font-size: 3.4vw;
    }
}
.counter-section{

    width:100%;
    padding: 3vw 6vw;
    background:#f8f9fb;

}

.counter-heading{

    text-align:center;
    margin-bottom:4vw;

}

.counter-heading span{

    color:#d71920;
    font-size:1vw;
    font-weight:600;

}

.counter-heading h2{

    font-size:2.8vw;
    margin-top:1vw;

}

.counter-wrapper{

    display:flex;
    justify-content:space-evenly;
    gap:2vw;

}

.counter-box{

    width:20%;
    background:#fff;
    padding:0.5vw;
    text-align:center;
    border-radius:1vw;
    box-shadow:0 .5vw 1.5vw rgba(0,0,0,.08);
    transition:.4s;

}

.counter-box:hover{

    transform:translateY(-.7vw);

}

.counter-box img{

    width:4vw;

}

.counter-box h2{

    /* margin:1vw 0; */
    font-size:2vw;
    color:#d71920;

}

.counter-box p{

    font-size:1vw;
    color:#666;

}

/* ourteam */
.about-team{
    width:100%;
    padding:3vw 6vw;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:5vw;
}

.abt-image{
    width:45%;
    position:relative;
    overflow:hidden;
    border-radius:1vw;
}

.abt-image img{
    width:100%;
    display:block;
    border-radius:1vw;
    transition:.5s;
}

/* .abt-image:hover img{
    transform:scale(1.08);
} */
.about-content{
    width:50%;
}

.about-content span{
    color:#d71920;
    font-size:1vw;
    font-weight:600;
    letter-spacing:.1vw;
}

.about-content h2{
    font-size:1.8vw;
    margin:1vw 0;
    color:#222;
    line-height:3.5vw;
}

.about-content p{
    font-size:1vw;
    line-height:1.8vw;
    color:#666;
    margin-bottom:1.5vw;
}
/* our-department */
.department-section{

    width:100%;
    padding:3vw 6vw;
    background:#f8f8f8;

}

.department-heading{

    text-align:center;
    margin-bottom:4vw;

}

.department-heading span{

    color:#d71920;
    font-size:1vw;
    font-weight:600;
    letter-spacing:.1vw;

}

.department-heading p{

    font-size:2vw;
    margin-top:1vw;
    color:#222;
    padding: 1vw;

}

.department-wrapper{

    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:2vw;

}

.department-card{

    background:#fff;
    border:.08vw solid #d71920;
    padding:2vw 1vw;
    text-align:center;
    transition:.4s;
    overflow:hidden;
    position:relative;

}

.department-card::before{

    content:"";
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
    height:0%;
    background:#d71920;
    transition:.4s;
    z-index:0;

}

.department-card:hover::before{

    height:100%;

}

.department-card i{

    position:relative;
    z-index:1;
    font-size:2.5vw;
    color:#d71920;
    transition:.4s;

}

.department-card h3{

    position:relative;
    z-index:1;
    margin-top:2vw;
    font-size:1.2vw;
    line-height:1.8vw;
    color:#222;
    transition:.4s;

}

.department-card:hover i{

    color:#fff;
    transform:scale(1.1);

}

.department-card:hover h3{

    color:#fff;

}
@media(max-width:768px){

.department-wrapper{

    grid-template-columns:repeat(2,1fr);

}

.department-heading span{

    font-size:4vw;

}

.department-heading h2{

    font-size:6vw;

}

.department-card{

    padding:6vw 3vw;

}

.department-card i{

    font-size:9vw;

}

.department-card h3{

    font-size:2.7vw;
    line-height:4vw;

}

}

@media(max-width:480px){

.department-wrapper{

    grid-template-columns:repeat(2 , 1fr);

}

.department-card{

    padding:8vw 5vw;

}

.department-card i{

    font-size:12vw;

}

.department-card h3{

    font-size:4vw;
    line-height:5.5vw;

}

}

/* our-management team */
.faqs {
    width: 100%;
    height: 100%;
}

.faqs-wrapper {
    
    
    justify-content: space-between;

    padding: 3vw 6vw;
}

.faqs-text {

    width: 100%;
}

.faqs-text span {
    font-size: 1vw;
    color: #d71920;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .1vw;
}

.faqs-text h2 {
    font-size: 2vw;
    line-height: 3.5vw;
    color: #d71920;;
    margin-top: 1vw;
    margin-bottom: 1.5vw;
    font-weight: 500;
    text-align: center;
}

.faqs-text p {
    font-size: 1.2vw;
    line-height: 1.8vw;
    color: #666;
    margin-bottom: 2vw;
}

.faqs-cards {
   display: grid;
   grid-template-columns: repeat(2 , 1fr);
   gap:1vw;
}

.faq-items {

    /* padding:1vw; */

    margin-bottom: 1.5vw;
    cursor: pointer;
    overflow: hidden;
    transition: 0.4s;
}

.question {
    width: 100%;
    padding: 0.8vw;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.3vw;
    background: #f7f9fb;
    color: #666;
    border: none;
    outline: none;
    appearance: none;
    box-shadow: none;
    cursor: pointer;

}
.question:hover {
    background: #d71920;
    color: #fff;
}
.answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
    font-size: 1.3vw;
    background: #FFF6F8;
    /* max-height: 32px; */
}

.answer p {
    padding: 1vw 1vw;
    line-height: 2.8vw;
    color: #444444;
}

@media(max-width:768px) {

    .faqs-text {
    width: 100%;
}

.faqs-text span {
    font-size: 3.5vw;
}
.faqs-text h2 {
    font-size: 5vw;
    padding: 1vw;
}

.faqs-text p {
    font-size: 3.2vw;
    line-height: 3.8vw;
    padding: 1vw;
}

.faqs-cards{
width: 100%;
grid-template-columns: repeat(1, 1fr);
}
    .faq-title h3 {
        font-size: 2.5vw;
    }

    .question {
        font-size: 3.5vw;
        padding: 2vw;
    }

    .answer {
        font-size: 3.5vw;
    }

    .answer p {
        line-height: 4.8vw;
    }
    .faqs-wrapper{
       flex-direction: column;
    }
}

.brochure-section{

    width:100%;
    padding: 3vw 6vw;
    display:flex;
    justify-content:space-between;
    align-items:center;
    background:linear-gradient(135deg,#fff,#fff5f5);

}

.brochure-content{

    width:55%;

}

.brochure-content span{

    color:#d71920;
    font-size:1vw;
    font-weight:600;
    letter-spacing:.15vw;

}

.brochure-content h2{

    font-size:3vw;
    margin:1vw 0;
    color:#222;

}

.brochure-content p{

    font-size:1vw;
    color:#666;
    line-height:1.8vw;
    margin-bottom:2vw;

}

.brochure-btn{

    display:flex;
    gap:1.5vw;

}

.download-btn,
.view-btn{

    text-decoration:none;
    padding:1vw 2vw;
    border-radius:.5vw;
    font-size:1vw;
    font-weight:600;
    display:flex;
    align-items:center;
    gap:.8vw;
    transition:.4s;

}

.download-btn{

    background:#d71920;
    color:#fff;

}

.download-btn:hover{

    background:#b41419;
    transform:translateY(-.3vw);

}

.view-btn{

    border:.1vw solid #d71920;
    color:#d71920;

}

.view-btn:hover{

    background:#d71920;
    color:#fff;
    transform:translateY(-.3vw);

}

.brochure-image{

    width:35%;
    text-align:center;

}

.brochure-image img{

    width:100%;
    transition:.5s;

}

.brochure-image img:hover{

    transform:rotate(-3deg) scale(1.05);

}
@media(max-width:768px){

.brochure-section{

    flex-direction:column-reverse;
    gap:6vw;

}

.brochure-content,
.brochure-image{

    width:100%;
    text-align:center;

}

.brochure-content span{

    font-size:2.5vw;

}

.brochure-content h2{

    font-size:5vw;

}

.brochure-content p{

    font-size:2.4vw;
    line-height:4vw;

}

.brochure-btn{

    justify-content:center;
    flex-wrap:wrap;

}

.download-btn,
.view-btn{

    font-size:2.5vw;
    padding:2.5vw 5vw;
    gap:2vw;

}

}
.counter-box svg{
    width:4vw;
    height:4vw;
    transition:.4s;
}

.counter-box:hover svg{
    transform:scale(1.15);
}

.counter-box:hover svg path,
.counter-box:hover svg rect,
.counter-box:hover svg circle{
    stroke:#ffffff;
}

.counter-box:hover{
    background:#d71920;
}

.counter-box:hover h2,
.counter-box:hover p{
    color:#fff;
}

/* marquee */
.marquee-section{
    width:100%;
    padding:1.2vw 0;
    background:#d71920;
    overflow:hidden;
}

.marquee{
    width:100%;
    overflow:hidden;
}

.marquee-content{
    display:flex;
    align-items:center;
    gap:5vw;
    width:max-content;
    animation:marquee 50s linear infinite;
}

.marquee:hover .marquee-content{
    animation-play-state:paused;
}

.marquee-item{
    display:flex;
    align-items:center;
    gap:0vw;
    flex-shrink:0;
    flex-direction: column;
}

.marquee-item img{
    width:10.2vw;
    height:10.2vw;
    object-fit:contain;
}

.marquee-item span{
    color:#fff;
    font-size:1.5vw;
    font-weight:500;
    white-space:nowrap;
}

@keyframes marquee{

    0%{
        transform:translateX(0);
    }

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

}
@media(max-width:768px){

.marquee-section{
    padding:2.5vw 0;
}

.marquee-content{
    gap:8vw;
}

.marquee-item{
    gap:2vw;
}

.marquee-item img{
    width:5vw;
    height:5vw;
}

.marquee-item span{
    font-size:2.5vw;
}

}

@media(max-width:480px){

.marquee-section{
    padding:3vw 0;
}

.marquee-content{
    gap:10vw;
}

.marquee-item img{
    width:7vw;
    height:7vw;
}

.marquee-item span{
    font-size:3.5vw;
}

.breadcrumb-image h6 {
    font-size: 4vw;
}
.breadcrumb-image p {
    font-size: 2.5vw;
}
}
/* global-presence */
.global-presence{
    width: 100%;
    padding: 3vw 6vw;
}

.global-presence h6{
    font-size: 2vw;
    margin-bottom: 2vw;
    text-align: start;
    padding: 0 4vw;
}
.global-presence p{
    font-size: 1.2vw;
    line-height: 2vw;
    margin-bottom: 2vw;
    padding: 0 4vw;
    text-align: justify;
}

.global-presence img{
    padding: 2vw;
    width: 100%;
    border-radius: 3vw;
}

@media(max-width:768px){
    .global-presence h6 {
    font-size: 4vw;}

    .global-presence p {
    font-size: 3.5vw;
    line-height: 6vw;}
}
/* manufacturing */
.manufaturing-company{
    width:100%;
    padding: 3vw 6vw;
    display:flex;
    justify-content:space-between;
    /* align-items:center; */
    gap:5vw;
}

.manufacturing-image{
    width:45%;
    position:relative;
    overflow:hidden;
    border-radius:1vw;
}

.manufacturing-image img{
    width:100%;
    height: 90%;
    display:block;
    border-radius:1vw;
    transition:.5s;
}

.manufacturing-content{
    width:50%;
}



.manufacturing-content h2{
    font-size:2.8vw;
    margin:1vw 0;
    color:#222;
    line-height:3.5vw;
}

.manufacturing-content p{
    font-size:1.3vw;
    line-height:1.8vw;
    color:#666;
    margin-bottom:1.5vw;
}
.afri-strength-section{

    width:100%;
    padding:3vw;
    background:#f8f9fb;

}

.afri-strength-heading{

    text-align:center;
    margin-bottom:4vw;

}

.afri-strength-heading p{

    color:#d71920;
    font-size:2vw;
    font-weight:600;
    letter-spacing:.15vw;

}

.afri-strength-heading h2{

    font-size:3vw;
    margin-top:1vw;
    color:#222;

}

.afri-strength-wrapper{

    display:flex;
    justify-content:center;
    gap:2vw;
    flex-wrap:wrap;

}

.afri-strength-card{

    width:28%;
    height:34vw;
    position:relative;
    overflow:hidden;
    border-radius:1.8vw;
    cursor:pointer;
    box-shadow:0 1vw 2vw rgba(0,0,0,.12);
    transition:.5s;

}

.afri-strength-card img{

    width:100%;
    height:100%;
    object-fit:cover;
    transition:.8s;

}

.afri-strength-overlay{

    position:absolute;
    inset:0;

    background:linear-gradient(
    to top,
    rgba(0,0,0,.82),
    rgba(0,0,0,.18),
    rgba(0,0,0,.05)
    );

}

.afri-strength-content{

    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    padding:2vw;

    backdrop-filter:blur(.4vw);
    background:rgba(255,255,255,.08);

}

.afri-strength-content h3{

    color:#fff;
    font-size:1.8vw;
    margin-bottom:.8vw;

}

.afri-strength-content p{

    color:#fff;
    font-size:1vw;
    line-height:1.6vw;

}

.afri-strength-card:hover{

    transform:translateY(-.8vw);

}

.afri-strength-card:hover img{

    transform:scale(1.12);

}

.afri-strength-card:hover .afri-strength-content{

    background:rgba(197,0,0,.25);

}

@media(max-width:768px){

.afri-strength-wrapper{

    flex-direction:column;
    align-items:center;

}

.afri-strength-card{

    width:90%;
    height:70vw;

}

.afri-strength-heading span{

    font-size:2.5vw;

}

.afri-strength-heading h2{

    font-size:6vw;

}

.afri-strength-content{

    padding:5vw;

}

.afri-strength-content h3{

    font-size:4vw;

}

.afri-strength-content p{

    font-size:2.5vw;
    line-height:4vw;

}
.afri-strength-heading p {
    font-size: 3vw;
}



}

.manufacturing-team{
    width:100%;
    padding:3vw;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:5vw;
}

.manufacturing-image{
    width:45%;
    position:relative;
    overflow:hidden;
    border-radius:1vw;
}

.manufacturing-image img{
    width:100%;
    display:block;
    border-radius:1vw;
    transition:.5s;
}

/* .abt-image:hover img{
    transform:scale(1.08);
} */
.manufacturing-content{
    width:50%;
}

.manufacturing-content span{
    color:#d71920;
    font-size:1vw;
    font-weight:600;
    letter-spacing:.1vw;
}

.manufacturing-content h2{
    font-size:2.8vw;
    margin:1vw 0;
    color:#222;
    line-height:3.5vw;
}

.manufacturing-content p{
    font-size:1vw;
    line-height:1.8vw;
    color:#666;
    margin-bottom:1.5vw;
}
.quality-text{
    padding: 5vw;
    
    text-align: center;
    
    font-size: 1.6vw;
    line-height: 2.3vw;
    color: #666;
   
    background-color: #f8f9fb;
}
.quote-icon {
    position: absolute;
    top: 146vw;
    
    font-size: 2vw;
    color: #0d6efd; /* Change to your theme color */
    /*background: #fff;*/
    padding: 2vw;
    border-radius: 50%;
}
/* career-section */

.career-page{
    padding:3vw 0;
    background:#fff;
}

.career-grid{
    width:90%;
    max-width:100vw;
    margin:auto;
    display:grid;
    grid-template-columns:1fr 1fr;
}

.career-left{
    background:#333;
    color:#fff;
    padding:2vw 4vw;
}

.career-left h6{
    font-size:2vw;
    line-height:1.25;
    font-weight:700;
    margin-bottom:1.5vw;
}

.career-left p{
    font-size:1.5vw;
    line-height:1.9;
    color:#efefef;
    margin-bottom:1.5vw;
}

/* form */

.career-right{
    padding:2vw 4vw;
    background:#fff;
}

.career-right h2{
    font-size:2vw;
    font-weight:700;
    margin-bottom:1.5vw;
    color:#000;
}

.career-form{
    width:100%;
}

.career-row{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:1vw;
    margin-bottom:1.5vw;
}

.career-form input,
.career-form textarea{
    width:100%;
    border:none;
    background:#f5f5f5;
    padding:1vw 1vw;
    font-size:1vw;
    outline:none;
    transition:.3s;
}

.career-form input:focus,
.career-form textarea:focus{
    background:#fff;
    border:1px solid #d60000;
}

.career-form textarea{
    height:15vw;
    resize:vertical;
    margin-top:2vw;
}

.career-upload{
    display:flex;
    align-items:center;
    gap:1vw;
    margin:1vw 0;
    font-size:1.2vw;
}

.career-upload span{
    color:red;
}

.career-upload input[type=file]{
    background:none;
    padding:0;
}

.career-form button{
    margin-top:1.5vw;
    padding:1vw 2vw;
    background:#d61d1d;
    color:#fff;
    border:none;
    cursor:pointer;
    font-size:1vw;
    font-weight:600;
    transition:.3s;
}

.career-form button:hover{
    background:#000;
}

/* responsive */

@media(max-width:992px){

.career-grid{
    grid-template-columns:1fr;
}

.career-left,
.career-right{
    padding:6vw;
}

.career-left h6{
    font-size:4vw;
}

.career-right h2{
    font-size:4vw;
}
.career-left p {
    font-size: 4vw;}

    .career-form input, .career-form textarea {
            padding: 3vw 2vw;
    font-size: 3vw;
    }

.career-row{
    grid-template-columns:1fr;
    gap:2vw;
}

.career-upload{
    flex-direction:column;
    align-items:flex-start;
    font-size: 3vw;
}
.career-form button {
    padding: 2vw 2vw;
    font-size:3vw;
}
.quality-text{
    font-size: 3.6vw;
    line-height: 5.3vw;
}
}

/* gallery */


.afri-gallery{
    width:100%;
    padding:5vw 0;
    background:#ffffff;
}

.afri-gallery-container{
    width:90vw;
    margin:auto;
}



.afri-gallery-title{
    text-align:center;
    margin-bottom:3.5vw;
}

.afri-gallery-title span{
    display:inline-block;
    color:#d71920;
    font-size:0.9vw;
    font-weight:600;
    letter-spacing:.15vw;
    text-transform:uppercase;
    margin-bottom:.8vw;
}

.afri-gallery-title h2{
    font-size:2.8vw;
    color:#111;
    font-weight:700;
    margin-bottom:1vw;

}

.afri-gallery-title p{
    width:45vw;
    margin:auto;
    font-size:1vw;
    color:#666;
    line-height:1.8;
}



.afri-gallery-filter{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:1vw;
    margin-bottom:3vw;
    flex-wrap:wrap;
}

.afri-filter-btn{
    border:.08vw solid #d71920;
    background:#fff;
    color:#d71920;
    padding:.8vw 1.8vw;
    font-size:.95vw;
    font-weight:600;
    cursor:pointer;
    border-radius:3vw;
    transition:.35s;
    
}

.afri-filter-btn:hover,
.afri-filter-btn.active{
    background:#d71920;
    color:#fff;
}



.afri-gallery-grid{
    column-count:3;
    column-gap:1.5vw;
}



.afri-gallery-item{
    display:inline-block;
    width:100%;
    position:relative;
    overflow:hidden;
    border-radius:.8vw;
    cursor:pointer;
    background:#f3f3f3;
    transition:.4s;
    margin:0 0 1.5vw;
    break-inside:avoid;
    -webkit-column-break-inside:avoid;
}

.afri-gallery-item img{
    width:100%;
    height:auto;
    object-fit:contain;
    display:block;
    transition:.6s;
}



.afri-gallery-item::before{
    content:"";
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.45);
    opacity:0;
    transition:.4s;
    z-index:1;
}



.afri-gallery-item::after{
    content: "\f065";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    position: absolute;
    inset: auto auto 1rem 1rem;
    width: 3rem;
    height: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .92);
    color: #d71920;
    font-size: 1.9rem;
    font-weight: 600;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .35s ease, transform .35s ease;
    z-index: 2;
    left: 50%;
    top: 50%;
}

.afri-zoom-btn{
    position:absolute;
    inset:0;
    border:0;
    background:transparent;
    cursor:pointer;
    z-index:3;
    color:transparent;
}

.afri-zoom-btn:focus-visible{
    outline:2px solid #d71920;
    outline-offset:-4px;
}

.afri-gallery-item:hover img{
    transform:scale(1.03);
}

.afri-gallery-item:hover::before{
    opacity:1;
}

.afri-gallery-item:hover::after{
    opacity:1;
    transform:translate(-50%,-50%) scale(1);
}

.afri-gallery-item:focus-within::before{
    opacity:1;
}

.afri-gallery-item:focus-within::after{
    opacity:1;
    transform:translate(-50%,-50%) scale(1);
}



.afri-gallery-item.hide{
    display:none;
}

.afri-gallery-item.show{
    animation:galleryFade .5s ease;
}

@keyframes galleryFade{

    from{
        opacity:0;
        transform:scale(.9);
    }

    to{
        opacity:1;
        transform:scale(1);
    }

}



.afri-lightbox{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.9);
    display:flex;
    justify-content:center;
    align-items:center;
    opacity:0;
    visibility:hidden;
    transition:.4s;
    z-index:9999;
}

.afri-lightbox.active{
    opacity:1;
    visibility:visible;
}

.afri-lightbox-img{
    width:75vw;
    max-height:90vh;
    object-fit:contain;
    border-radius:.5vw;
    animation:zoomIn .4s ease;
}

@keyframes zoomIn{

    from{
        transform:scale(.7);
        opacity:0;
    }

    to{
        transform:scale(1);
        opacity:1;
    }

}

.afri-lightbox-close{
    position:absolute;
    top:2vw;
    right:3vw;
    font-size:3vw;
    color:#fff;
    cursor:pointer;
    transition:.3s;
}

.afri-lightbox-close:hover{
    color:#d71920;
}
/*==========================
AFRINEXT LIGHTBOX BUTTONS
==========================*/

.afri-lightbox{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.9);
    display:none;
    justify-content:center;
    align-items:center;
    z-index:9999;
}

.afri-lightbox.active{
    display:flex;
}

.afri-lightbox-img{
    max-width:80vw;
    max-height:85vh;
    object-fit:contain;
}

.afri-lightbox-prev,
.afri-lightbox-next{

    position:absolute;
    top:50%;
    transform:translateY(-50%);

    width:3.8vw;
    height:3.8vw;

    border:none;
    border-radius:50%;

    background:rgba(255,255,255,.15);
    color:#fff;

    font-size:1.3vw;
    cursor:pointer;

    transition:.3s;
}

.afri-lightbox-prev:hover,
.afri-lightbox-next:hover{

    background:#d71920;
}

.afri-lightbox-prev{
    left:3vw;
}

.afri-lightbox-next{
    right:3vw;
}

.afri-lightbox-close{

    position:absolute;

    top:2vw;
    right:2vw;

    color:#fff;

    font-size:2.8vw;

    cursor:pointer;
}

/* Mobile */

@media(max-width:768px){

.afri-lightbox-prev,
.afri-lightbox-next{

    width:12vw;
    height:12vw;

    font-size:5vw;
}

.afri-lightbox-prev{
    left:4vw;
}

.afri-lightbox-next{
    right:4vw;
}

.afri-lightbox-close{

    top:5vw;
    right:5vw;

    font-size:9vw;
}

.afri-lightbox-img{

    max-width:90vw;
    max-height:75vh;
}

}


@media(max-width:991px){

.afri-gallery{
    padding:8vw 0;
}

.afri-gallery-title span{
    font-size:2vw;
}

.afri-gallery-title h2{
    font-size:5vw;
}

.afri-gallery-title p{
    width:90%;
    font-size:2vw;
}

.afri-filter-btn{
    padding:1.8vw 4vw;
    font-size:2vw;
}

.afri-gallery-grid{
    column-count:2;
    column-gap:2vw;
}

.afri-gallery-item::after{
    font-size:6vw;
}

.afri-lightbox-img{
    width:90vw;
}

.afri-lightbox-close{
    font-size:6vw;
}

}

@media(max-width:600px){

.afri-gallery{
    padding:12vw 0;
}

.afri-gallery-title span{
    font-size:3.2vw;
}

.afri-gallery-title h2{
    font-size:8vw;
}

.afri-gallery-title p{
    width:100%;
    font-size:3.8vw;
}

.afri-gallery-filter{
    gap:2vw;
    display: grid;
        grid-template-columns: repeat(2, 1fr);
    }


.afri-filter-btn{
    width:100%;
    padding:3vw;
    font-size:3.6vw;
}

.afri-gallery-grid{
    column-count:1;
    column-gap:0;
}

.afri-gallery-item::after{
    font-size:10vw;
}

.afri-lightbox-close{
    font-size:9vw;
    top:5vw;
    right:5vw;
}

}
/* our-certificates */
.our-certificates{
    width: 100%;
    text-align: center;
    padding: 4vw 3vw 2vw;
    background: linear-gradient(180deg, #f8f9fb 0%, #ffffff 100%);
}

.certificates-content span{
    color:#d71920;
    font-size:1vw;
    font-weight:600;
    letter-spacing:.1vw;
}

.certificates-content h6{
    font-size:2.8vw;
    margin:1vw 0;
    color:#222;
    line-height:3.5vw;
}

.certificates-content p{
    font-size:1vw;
    line-height:1.5vw;
    color:#666;
    margin-bottom:1vw;
}
.certificates-images{
    width:100%;
    max-width:1400px;
    margin:0 auto;
    column-count:3;
    column-gap:2vw;
    padding:2vw 4vw 5vw;
}

.certificates-image{
    display:inline-block;
    width: 100%;
    margin:0 0 2vw;
    break-inside:avoid;
    -webkit-column-break-inside:avoid;
    position:relative;
    overflow:hidden;
    border-radius:1vw;
    background:#fff;
    box-shadow:0 1vw 2.5vw rgba(0,0,0,.08);
    cursor:pointer;
    transition:transform .35s ease, box-shadow .35s ease;
}

.certificates-image img{
    width: 100%;
    height: auto;
    display:block;
    object-fit:contain;
    transition:transform .5s ease;
}

.certificates-image::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,.38) 100%);
    opacity:0;
    transition:opacity .35s ease;
    z-index:1;
}

.certificates-image::after{
    content:"\f065";
    font-family:"Font Awesome 6 Free";
    font-weight:900;
    position:absolute;
    inset:auto auto 1rem 1rem;
    width:3rem;
    height:3rem;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:rgba(255,255,255,.92);
    color:#d71920;
    font-size:1.9rem;
    font-weight:600;
    opacity:0;
    transform:translateY(8px);
    transition:opacity .35s ease, transform .35s ease;
    z-index:2;
}

.certificates-zoom-btn{
    position:absolute;
    inset:0;
    border:0;
    background:transparent;
    cursor:pointer;
    z-index:3;
    color:transparent;
}

.certificates-zoom-btn:focus-visible{
    outline:2px solid #d71920;
    outline-offset:-4px;
}

.certificates-image:hover{
    transform:translateY(-4px);
    box-shadow:0 1.25vw 3vw rgba(0,0,0,.14);
}

.certificates-image:hover img{
    transform:scale(1.02);
}

.certificates-image:hover::before,
.certificates-image:hover::after,
.certificates-image:focus-within::before,
.certificates-image:focus-within::after{
    opacity:1;
}

.certificates-image:hover::after,
.certificates-image:focus-within::after{
    transform:translateY(0);
}

.certificates-lightbox{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.9);
    display:flex;
    align-items:center;
    justify-content:center;
    opacity:0;
    visibility:hidden;
    transition:.35s ease;
    z-index:9999;
}

.certificates-lightbox.active{
    opacity:1;
    visibility:visible;
}

.certificates-lightbox-img{
    width:min(86vw, 1100px);
    max-height:90vh;
    object-fit:contain;
    border-radius:.6vw;
    box-shadow:0 1vw 3vw rgba(0,0,0,.35);
}

.certificates-lightbox-close{
    position:absolute;
    top:2vw;
    right:3vw;
    font-size:3vw;
    color:#fff;
    cursor:pointer;
    transition:.3s;
}

.certificates-lightbox-close:hover{
    color:#d71920;
}

@media(max-width:991px){
    .certificates-images{
        column-count:2;
        column-gap:2vw;
        padding:2vw 4vw 6vw;
    }

    .certificates-content span{
        font-size:2vw;
    }

    .certificates-content h6{
        font-size:5vw;
        line-height:1.2;
    }

    .certificates-content p{
        font-size:1.9vw;
        line-height:1.8;
    }

    .certificates-lightbox-img{
        width:90vw;
    }

    .certificates-lightbox-close{
        font-size:6vw;
    }
}

@media(max-width:600px){
    .our-certificates{
        padding:10vw 4vw 4vw;
    }

    .certificates-images{
        column-count:1;
        column-gap:0;
        padding:4vw 4vw 10vw;
    }

    .certificates-image{
        border-radius:4vw;
        margin-bottom:4vw;
    }

    .certificates-image::after{
        width:3.4rem;
        height:3.4rem;
        font-size:2rem;
        bottom:1rem;
        left:1rem;
    }

    .certificates-content span{
        font-size:3vw;
    }

    .certificates-content h6{
        font-size:7vw;
    }

    .certificates-content p{
        font-size:3.4vw;
        line-height:1.7;
    }

    .certificates-lightbox-close{
        font-size:9vw;
        top:5vw;
        right:5vw;
    }
}


@media screen and (max-width:960px){

/* ---------- Top Bar ---------- */

.topnav{
    padding:1.6vw 0;
}

.topnav-wrapper{
    padding:0 4vw;
}

.topnav .left{
    gap:3vw;
}

.topnav .left a{
    font-size:1.5vw;
}

.topnav .right{
    gap:2vw;
}

.topnav .right i{
    padding:.8vw;
    font-size:1.8vw;
}

/* ---------- Header ---------- */

.header-wrapper{
    height:9vw;
    padding:0 4vw;
}

.header-left img{
    height:7vw;
}

.menu{
    gap:2.5vw;
}

.menu>li>a{
    font-size:1.7vw;
    padding:2vw 0;
}

.menu .dropdown{
    min-width:26vw;
}

.menu .dropdown li a{
    font-size:1.4vw;
}
.menu>li>a.active {
    color: rgb(220, 4, 4);
    border-bottom-color: rgb(220, 4, 4);
}

.btn-get-in-touch{
    font-size:1.5vw;
    padding:1.3vw 2.5vw;
}

/* ---------- Breadcrumb ---------- */

.breadcrumb{
    min-height:22vw;
    padding:5vw;
}

.breadcrumb-image{
    padding:3vw;
}

.breadcrumb-image h6{
    font-size:3vw;
}

.breadcrumb-image p{
    font-size:1.8vw;
}

/* ---------- Footer ---------- */

.footer{
    padding:5vw;
}

.footer-logo{
    width:100%;
}

.footer-logo img{
    width:18vw;
}

.footer-logo p{
    width:60%;
    font-size:1.6vw;
    line-height:2.8vw;
}

.navigation,
.quicklinks,
.reach-us{
    width:30%;
}

.navigation p,
.quicklinks p,
.reach-us p{
    font-size:2vw;
}

.navigation li,
.quicklinks li{
    font-size:1.5vw;
    margin-bottom:1.5vw;
}

.reach-us .reach-link,
.reach-us .emails-list a{
    font-size:1.5vw;
    line-height:2.5vw;
}

.reach-us .reach-link i,
.reach-us .reach-emails i{
    width:2vw;
}

.reach-us .social-icons i{
    font-size:2vw;
}

}



/* ==========================================================
   798px
========================================================== */

@media screen and (max-width:798px){

/* Hide Top Bar */

.topnav{
    display:none;
}

/* ---------- Header ---------- */

.header-wrapper{
    height:14vw;
    padding:0 5vw;
}

.header-left img{
    height:11vw;
}

.hamburger{
    display:flex;
    width:8vw;
    height:8vw;
}

.ham-line{
    width:5vw;
    height:.45vw;
}

.header-right{

    top:14vw;

    width:78vw;

    height:calc(100vh - 14vw);

    padding:5vw;

}

.menu{
    width:100%;
    flex-direction:column;
    gap:0;
}

.menu>li{
    width:100%;
}

.menu>li>a{

    font-size:3vw;

    padding:3vw 0;

    justify-content:space-between;

}

.menu .dropdown{

    position:static;

    display:none;

    opacity:1;

    visibility:visible;

    transform:none;

    box-shadow:none;

    border:none;

    padding-left:3vw;

    background:transparent;

}

.menu .dropdown-parent.active .dropdown{
    display:block;
}

.menu .dropdown li a{

    font-size:4.5vw;

    padding:2vw 0;

}

.btn-get-in-touch{

    width:100%;

    margin:3vw 0 0;

    padding:2.5vw;

    font-size:2.5vw;

    text-align:center;

}

/* ---------- Breadcrumb ---------- */

.breadcrumb{

    min-height:30vw;

    padding:7vw 5vw;

}

.breadcrumb-image h6{

    font-size:4vw;

}

.breadcrumb-image p{

    font-size:2.6vw;

}

/* ---------- Footer ---------- */

.footer{

    padding:8vw 6vw;

}

.footer-wrapper{

    flex-wrap:wrap;

    gap:5vw;

}

.footer-logo{

    width:100%;

}

.footer-logo img{

    width:25vw;

}

.footer-logo p{

    width:100%;

    font-size:3.3vw;

    line-height:4.8vw;

}

.navigation,
.quicklinks,
.reach-us{

    width:47%;

}

.navigation p,
.quicklinks p,
.reach-us p{

    font-size:3vw;

}

.navigation li,
.quicklinks li{

    font-size:3.2vw;

}

.reach-us .reach-link,
.reach-us .emails-list a{

    font-size:2.2vw;

    line-height:3.5vw;

}

.reach-us .reach-link i,
.reach-us .reach-emails i{

    width:3vw;

}

.reach-us .social-icons{

    gap:2vw;

}

.reach-us .social-icons i{

    font-size:3vw;

}

}



/* ==========================================================
   450px
========================================================== */

@media screen and (max-width:450px){

.header-wrapper{

    height:20vw;

}

.header-left img{

    height:16vw;

}

.hamburger{

    width:10vw;

    height:10vw;

}

.ham-line{

    width:6vw;

    height:.55vw;

}

.header-right{

    top:20vw;

    width:100%;

    height:calc(100vh - 20vw);

    padding:6vw;

    border-radius:0;

}

.menu>li>a{

    font-size:5vw;

    padding:4vw 0;

}

.menu .dropdown{

    padding-left:5vw;

}

/* ==========================================================
   RESPONSIVE PART 2
   About • Team • Manufacturing • Vision • Counter
==========================================================*/


/* ==========================================================
   960px
==========================================================*/

@media screen and (max-width:960px){

/* ---------------- About Company ---------------- */

.about-company,
.about-team,
.manufaturing-company,
.manufacturing-team{

    flex-direction:column;
    gap:5vw;
    padding:6vw 5vw;

}

.about-image,
.abt-image,
.manufacturing-image{

    width:100%;

}

.about-content,
.manufacturing-content{

    width:100%;

}

.about-content span,
.manufacturing-content span{

    font-size:1.8vw;

}

.about-content h2,
.manufacturing-content h2{

    font-size:4vw;
    line-height:5vw;

}

.about-content p,
.manufacturing-content p{

    font-size:1.7vw;
    line-height:3vw;

}

.experience-box{

    padding:2vw;

}

.experience-box h2{

    font-size:1.5vw;

}

.experience-box span{

    font-size:3vw;

}

/* ---------------- Features ---------------- */

.about-feature{

    gap:2vw;

}

.feature-card{

    padding:2vw;

}

.feature-card h3{

    font-size:3vw;

}

.feature-card p{

    font-size:1.6vw;

}

/* ---------------- Vision ---------------- */

.vision-section{

    padding:7vw 5vw;

}

.vision-heading span{

    font-size:1.8vw;

}

.vision-heading h2{

    font-size:4vw;

}

.vision-heading p{

    font-size:1.7vw;
    line-height:3vw;

}

.vision-wrapper{

    grid-template-columns:repeat(2,1fr);

}

.vision-card{

    padding:3vw;

}

.vision-icon{

    width:7vw;
    height:7vw;
    font-size:2.8vw;

}

.vision-card h3{

    font-size:2.5vw;

}

.vision-card p{

    font-size:1.6vw;
    line-height:2.8vw;

}

/* ---------------- Counter ---------------- */

.counter-section{

    padding:7vw 5vw;

}

.counter-heading span{

    font-size:1.8vw;

}

.counter-heading h2{

    font-size:4vw;

}

.counter-wrapper{

    flex-wrap:wrap;
    gap:3vw;

}

.counter-box{

    width:47%;
    padding:3vw;

}

.counter-box img,
.counter-box svg{

    width:6vw;
    height:6vw;

}

.counter-box h2{

    font-size:3vw;

}

.counter-box p{

    font-size:1.6vw;

}

}



/* ==========================================================
   798px
==========================================================*/

@media screen and (max-width:798px){

.about-company,
.about-team,
.manufaturing-company,
.manufacturing-team{

    padding:4vw 6vw;

}

.about-content span,
.manufacturing-content span{

    font-size:2.8vw;

}

.about-content h2,
.manufacturing-content h2{

    font-size:5.5vw;
    line-height:6.8vw;

}

.about-content p,
.manufacturing-content p{

    font-size:2.6vw;
    line-height:4.5vw;

}

.experience-box{

    padding:3vw;

}

.experience-box h2{

    font-size:2.4vw;

}

.experience-box span{

    font-size:5vw;

}

/* Feature */

.about-feature{

    flex-direction:column;

}

.feature-card{

    padding:4vw;

}

.feature-card h3{

    font-size:5vw;

}

.feature-card p{

    font-size:2.5vw;

}

/* Vision */

.vision-heading span{

    font-size:2.8vw;

}

.vision-heading h2{

    font-size:6vw;

}

.vision-heading p{

    font-size:2.5vw;
    line-height:4vw;

}

.vision-wrapper{

    grid-template-columns:1fr;

}

.vision-card{

    padding:5vw;
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:3vw;

}

.vision-icon{

    width:10vw;
    height:10vw;
    font-size:4vw;
    margin-bottom:0;
    flex:0 0 10vw;

}

.vision-card h3{

    font-size:4vw;
    margin-bottom:0;
    flex:1 1 calc(100% - 13vw);

}

.vision-card p{

    font-size:2.5vw;
    line-height:4vw;
    flex-basis:100%;
    margin-top:1vw;

}

/* Counter */

.counter-heading span{

    font-size:2.8vw;

}

.counter-heading h2{

    font-size:6vw;

}

.counter-wrapper{

    justify-content:center;

}

.counter-box{

    width:48%;

}

.counter-box img,
.counter-box svg{

    width:8vw;
    height:8vw;

}

.counter-box h2{

    font-size:4vw;

}

.counter-box p{

    font-size:2.5vw;

}

}



/* ==========================================================
   450px
==========================================================*/

@media screen and (max-width:450px){

.about-company,
.about-team,
.manufaturing-company,
.manufacturing-team{

    padding:4vw 6vw;

}

.about-content span,
.manufacturing-content span{

    font-size:4vw;

}

.about-content h2,
.manufacturing-content h2{

    font-size:4vw;
    line-height:10vw;

}

.about-content p,
.manufacturing-content p{

    font-size:3.8vw;
    line-height:6.5vw;

}

.experience-box{

    left:4vw;
    bottom:4vw;
    padding:4vw;

}

.experience-box h2{

    font-size:3.5vw;

}

.experience-box span{

    font-size:7vw;

}

/* Feature */

.feature-card{

    padding:6vw;

}

.feature-card h3{

    font-size:6vw;

}

.feature-card p{

    font-size:3.8vw;

}

/* Vision */

.vision-section{

    padding:12vw 6vw;

}

.vision-heading span{

    font-size:4vw;

}

.vision-heading h2{

    font-size:8vw;

}

.vision-heading p{

    font-size:3.8vw;
    line-height:6vw;

}

.vision-card{

    padding:7vw;
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:4vw;

}

.vision-icon{

    width:16vw;
    height:16vw;
    font-size:6vw;
    margin-bottom:0;
    flex:0 0 16vw;

}

.vision-card h3{

    font-size:6vw;
    margin-bottom:0;
    flex:1 1 calc(100% - 20vw);

}

.vision-card p{

    font-size:3.8vw;
    line-height:6vw;
    flex-basis:100%;
    margin-top:1.5vw;

}

/* Counter */

.counter-section{

    padding:12vw 6vw;

}

.counter-heading span{

    font-size:4vw;

}

.counter-heading h2{

    font-size:6vw;

}

.counter-wrapper{

    flex-direction:column;

}

.counter-box{

    width:100%;
    padding:6vw;

}

.counter-box img,
.counter-box svg{

    width:14vw;
    height:14vw;

}

.counter-box h2{

    font-size:7vw;

}

.counter-box p{

    font-size:3.8vw;

}

}
}


/* blogs */
.blogs{
    width: 100%;
    padding: 3vw;
    display: flex;
   background-color: whitesmoke;
  box-shadow: 0 0.5vw 0.6vw rgba(0, 0, 0, 0.05);
}

.blog-details{
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-left: 2vw;
    justify-content: space-between;

}
.blog-image{
    width: 25%;

}
.blog-image img{
    width: 15vw;
    height:15vw;
    border-radius: 2vw;

}

.blog-content{
    width: 70%;
    padding: 1vw 2vw;
    
    text-align: center;
}
.blog-content h6{
    font-size: 1.1vw;
    color: #b41419;
}

.blog-content p{
    font-size: 1vw;
    line-height: 2.2vw;
    color: #666;
}

/* product */
.product{
    width: 100%;
    padding: 4vw 3vw;
    background-color: whitesmoke;
}
.product-wrapper{
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2vw;
    width: 100%;
    height: 100%;
    margin: 0 auto;
    align-items: stretch;
}
.product-item{
    position: relative;
    width: 100%;
    min-height: 24vw;
    border-radius: 1.5vw;
    overflow: hidden;
    text-align: left;
    box-shadow: 0 0.8vw 1.8vw rgba(0, 0, 0, 0.08);
    background: #000;
}
.product-item img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.45s ease, opacity 0.45s ease;
}
.product-overlay{
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, .82), rgba(0, 0, 0, .18), rgba(0, 0, 0, .05));
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    gap: 1vw;
    padding: 2vw;
    opacity: 1;
    z-index: 1;
    transition: .4s;
}
.product-overlay h3{
    font-size: 1.5vw;
    line-height: 2vw;
    text-transform: capitalize;
    color: #fff;
    font-weight: 700;
}
.product-overlay p{
    font-size: 1vw;
    line-height: 1.6vw;
    color: rgba(255, 255, 255, .9);
}
.product-overlay a{
    display: inline-block;
    padding: .8vw 1.6vw;
    border-radius: .5vw;
    background: rgb(220, 4, 4);
    color: #fff;
    font-size: .95vw;
    font-weight: 600;
    transition: .3s ease;
}
.product-overlay a:hover{
    background: rgb(180, 2, 2);
}
.product-item:hover img{
    transform: scale(1.06);
    opacity: .32;
}

@media (max-width: 768px){
    .product{
        padding: 6vw 4vw;
    }

    .product-wrapper{
        grid-template-columns: 1fr;
        gap: 4vw;
    }

    .product-item{
        min-height: 72vw;
        border-radius: 4vw;
    }

    .product-overlay{
        padding: 5vw;
        gap: 2.5vw;
    }

    .product-overlay h3{
        font-size: 5vw;
        line-height: 6vw;
    }

    .product-overlay p{
        font-size: 3.5vw;
        line-height: 5vw;
    }

    .product-overlay a{
        padding: 2.5vw 4.5vw;
        font-size: 3.4vw;
        border-radius: 1.5vw;
    }
}
/* ===========================
   Vision Responsive
=========================== */
@media (max-width:768px){

    .vision-wrapper{
        grid-template-columns:1fr;
        gap:5vw;
    }

    .small-cards{
        display:flex;
        flex-direction:column;
        gap:5vw;
    }

    .vision-card{
        display:flex;
        flex-direction:column;
        padding:5vw;
        border-radius:4vw;
    }

    /* Icon + Heading in one row */
    .vision-card .vision-icon,
    .vision-card h3{
        display:inline-flex;
        vertical-align:middle;
    }

    .vision-card .vision-icon{
        width:12vw;
        height:12vw;
        min-width:12vw;
        font-size:5vw;
        margin:0;
    }

    .vision-card h3,
    .large-card h3{
        font-size:5.5vw;
        margin:0;
        color:#222;
    }

    /* Create first row */
    .vision-card{
        display:grid;
        grid-template-columns:12vw 1fr;
        grid-template-areas:
            "icon title"
            "text text";
        align-items:center;
        column-gap:4vw;
        row-gap:3vw;
    }

    .vision-card .vision-icon{
        grid-area:icon;
    }

    .vision-card h3{
        grid-area:title;
    }

    .vision-card p,
    .large-card p{
        grid-area:text;
        font-size:3.8vw;
        line-height:1.8;
        margin:0;
        color:#666;
    }
}

@media (max-width:480px){

    .vision-card{
        grid-template-columns:14vw 1fr;
        padding:6vw 5vw;
        border-radius:5vw;
        column-gap:4vw;
    }

    .vision-card .vision-icon{
        width:14vw;
        height:14vw;
        min-width:14vw;
        font-size:5.5vw;
    }

    .vision-card h3,
    .large-card h3{
        font-size:6vw;
    }

    .vision-card p,
    .large-card p{
        font-size:4vw;
        line-height:1.8;
    }
}
/* pharmaceuticals */
.afri-products{

width:100%;

background:#f8f9fb;

}

.afri-container{

width:100%;
padding:4vw 3vw;

}

.afri-heading{

text-align:center;
margin-bottom:4vw;

}

.afri-heading span{

color:#D71920;
font-size:.9vw;
font-weight:700;
letter-spacing:.15vw;
text-transform:uppercase;

}

.afri-heading h2{

font-size:2.6vw;
margin-top:.8vw;
color:#111;
font-weight:700;

}

.afri-heading p{

width:45%;
margin:1vw auto 0;
font-size:1vw;
line-height:1.8vw;
color:#666;

}



/* Search */

.afri-search{

display:flex;
gap:1vw;
margin-bottom:4vw;

}

.afri-search input,
.afri-search select{

width:40%;
height:3.3vw;
border:.08vw solid #ddd;
padding:0 1vw;
font-size:.9vw;
outline:none;
border-radius:.4vw;
background:#fff;

}

.afri-search button{

width:10%;
border:none;
background:#D71920;
color:#fff;
font-size:.9vw;
border-radius:.4vw;
cursor:pointer;
transition:.4s;

}

.afri-search button:hover{

background:#111;

}



/* Grid */

.afri-grid{

display:grid;
grid-template-columns:repeat(4,1fr);
gap:2vw;

}



/* Card */

.afri-card{

background:#fff;
border-radius:.7vw;
overflow:hidden;
box-shadow:0 .8vw 2vw rgba(0,0,0,.08);
transition:.4s;

}

.afri-card:hover{

transform:translateY(-.5vw);

}



.afri-image{

height:15vw;
overflow:hidden;
background:#f3f3f3;

}

.afri-image img{

width:100%;
height:100%;
object-fit:cover;
transition:.6s;

}

.afri-card:hover img{

transform:scale(1.08);

}



.afri-content{

padding:1.6vw;

}

.afri-category{

font-size:.8vw;
color:#D71920;
font-weight:600;

}

.afri-content h3{

margin:1vw 0;
font-size:1.35vw;
line-height:1.8vw;
color:#222;

}

.afri-tag{
    display: inline-flex;
    align-items: center;
    gap: .45vw;
    flex-wrap: wrap;
    margin-bottom: 1vw;
}
.afri-tag span{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: .35vw .8vw;
    background: #D71920;
    color: #fff;
    border-radius: .3vw;
    font-size: .8vw;
    white-space: nowrap;
}

.afri-content ul{

list-style:none;
padding:0;
margin:0;

}

.afri-content ul li{

font-size:.95vw;
margin-bottom:.8vw;
color:#555;

}

.afri-content a{

display:inline-block;
margin-top:1vw;
padding:.8vw 1.6vw;
background:#111;
color:#fff;
text-decoration:none;
border-radius:.35vw;
font-size:.85vw;
transition:.4s;

}

.afri-content a:hover{

background:#D71920;

}



/* Tablet */

@media(max-width:991px){

.afri-products{

padding:8vw 5vw;

}

.afri-heading span{

font-size:2vw;

}

.afri-heading h2{

font-size:5vw;

}

.afri-heading p{

width:100%;
font-size:2vw;
line-height:3.5vw;

}

.afri-search{

flex-wrap:wrap;

}

.afri-search input,
.afri-search select,
.afri-search button{

width:100%;
height:7vw;
font-size:2vw;

}

.afri-grid{

grid-template-columns:repeat(2,1fr);
gap:4vw;

}

.afri-image{

height:30vw;

}

.afri-category{

font-size:1.7vw;

}

.afri-content h3{

font-size:2.8vw;
line-height:3.5vw;

}

.afri-tag{
    display: inline-flex;
    align-items: center;
    gap: .8vw;
}

.afri-content ul li{

font-size:2vw;

}

.afri-content a{

font-size:1.8vw;
padding:1.5vw 3vw;

}

}



/* Mobile */

@media(max-width:600px){

.afri-grid{

grid-template-columns:1fr;

}

.afri-heading span{

font-size:3.5vw;

}

.afri-heading h2{

font-size:7vw;

}

.afri-heading p{

font-size:3.6vw;
line-height:6vw;

}

.afri-search input,
.afri-search select,
.afri-search button{

height:12vw;
font-size:3.4vw;

}

.afri-image{

height:60vw;

}

.afri-category{

font-size:3vw;

}

.afri-content{

padding:5vw;

}

.afri-content h3{

font-size:5vw;
line-height:7vw;

}

.afri-tag{
    display: inline-flex;
    align-items: center;
    gap: .8vw;
}

.afri-content ul li{

font-size:3.5vw;

}

.afri-content a{

font-size:3.3vw;
padding:3vw 5vw;

}
.afri-tag span{
    padding: 1.35vw 2.8vw;
    border-radius: 1.3vw;
    font-size: 2.8vw;
}
.quote-icon{
    position: unset;
}
}

/*=============================
BLOG DETAIL
==============================*/

.afri-blog-detail-section{
    width:100%;
    padding:6vw 8vw;
    background:#f8f8f8;
}

.afri-blog-detail-wrapper{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:3vw;
}

.afri-blog-main{
    width:70%;
    background:#fff;
    border-radius:1vw;
    padding:2vw;
    box-shadow:0 .4vw 2vw rgba(0,0,0,.08);
}

.afri-blog-main-image{
    width:100%;
    height:auto;
    max-height:none;
    object-fit:contain;
    display:block;
    border-radius:1vw;
}

.afri-blog-date{
    display:inline-block;
    margin-top:2vw;
    color:#d8232a;
    font-size:.9vw;
    font-weight:600;
}

.afri-blog-main-title{
    font-size:2.1vw;
    margin:1vw 0 2vw;
    color:#1b1b1b;
    line-height:1.3;
}

.afri-blog-main p{
    font-size:1vw;
    line-height:2;
    color:#666;
    margin-bottom:1.5vw;
}

.afri-blog-sidebar{
    width:28%;
    background:#fff;
    border-radius:1vw;
    padding:2vw;
    position:sticky;
    top:2vw;
    box-shadow:0 .4vw 2vw rgba(0,0,0,.08);
}

.afri-blog-sidebar h3{
    font-size:1.5vw;
    margin-bottom:2vw;
    color:#d8232a;
}

.afri-blog-card{
    display:flex;
    gap:1vw;
    align-items:center;
    margin-bottom:1.5vw;
    padding:1vw;
    border-radius:.8vw;
    text-decoration:none;
    transition:.3s;
    border:.08vw solid #eee;
}

.afri-blog-card:hover{
    background:#d8232a;
}

.afri-blog-card.active{
    background:#d8232a;
}

.afri-blog-card img{
    width:5.5vw;
    height:5.5vw;
    border-radius:.5vw;
    object-fit:cover;
}

.afri-blog-card h4{
    font-size:.95vw;
    line-height:1.5;
    color:#222;
    transition:.3s;
}

.afri-blog-card span{
    font-size:.8vw;
    color:#888;
    transition:.3s;
}

.afri-blog-card:hover h4,
.afri-blog-card:hover span,
.afri-blog-card.active h4,
.afri-blog-card.active span{
    color:#fff;
}
@media(max-width:991px){

.afri-blog-detail-wrapper{
    flex-direction:column;
}

.afri-blog-main,
.afri-blog-sidebar{
    width:100%;
}

.afri-blog-main{
    padding:5vw;
}

.afri-blog-main-image{
    height:auto;
}

.afri-blog-date{
    font-size:2.5vw;
}

.afri-blog-main-title{
    font-size:5vw;
}

.afri-blog-main p{
    font-size:3vw;
}

.afri-blog-sidebar{
    position:relative;
    top:0;
    padding:5vw;
}

.afri-blog-sidebar h3{
    font-size:4vw;
}

.afri-blog-card{
    gap:3vw;
    padding:3vw;
}

.afri-blog-card img{
    width:18vw;
    height:18vw;
}

.afri-blog-card h4{
    font-size:3vw;
}

.afri-blog-card span{
    font-size:2.5vw;
}

}
@media(max-width:480px) {

    .footer {
        padding: 10vw 7vw;
    }

    .footer-wrapper {
        flex-direction: column;
        gap: 8vw;
    }

    .footer-logo,
    .navigation,
    .quicklinks,
    .reach-us {
        width: 100%;
    }

    .footer-logo img {
        width: 38vw;
    }

    .footer-logo p {
        font-size: 3.8vw;
        line-height: 6vw;
        width: 70vw;
        margin-top: 2vw;
    }

    .navigation p,
    .quicklinks p,
    .reach-us p {
        font-size: 5vw;
        margin-bottom: 3vw;
    }

    .navigation li,
    .quicklinks li,
    .reach-us .reach-link,
    .reach-us .emails-list a {
        font-size: 3.8vw;
        line-height: 7vw;
    }

    .reach-us .reach-link i,
    .reach-us .reach-emails i {
        width: 5vw;
        margin-right: 2vw;
    }

    .reach-us .social-icons {
        gap: 4vw;
    }

    .reach-us .social-icons i {
        font-size: 5vw;
        margin-top: 2vw;
    }

    .footer-bottom {
        margin-top: 8vw;
        padding-top: 6vw;
    }

    .footer-bottom p {
        font-size: 3.8vw;
    }

}


/*=================================
SURGICAL LICENSE
=================================*/

.afri-license{

    width:100%;
    padding:6vw 8vw;
    background:#f8f9fb;

}

.afri-license-wrapper{

    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:5vw;

}

.afri-license-left{

    width:52%;

}

.afri-license-right{

    width:42%;
    display:flex;
    justify-content:center;

}

.afri-license-right img{

    width:100%;
    border-radius:1vw;
    box-shadow:0 1vw 3vw rgba(0,0,0,.12);

}

.afri-license-tag{

    display:inline-block;
    color:#D71920;
    font-size:.9vw;
    font-weight:700;
    letter-spacing:.08vw;
    margin-bottom:1vw;

}

.afri-license h2{

    font-size:2.4vw;
    color:#1d1d1d;
    margin-bottom:1.3vw;
    font-weight:700;

}

.afri-license p{

    font-size:1vw;
    line-height:1.9;
    color:#555;
    margin-bottom:2vw;

}

.afri-license-list{

    list-style:none;
    padding:0;
    margin:0 0 2.5vw;

}

.afri-license-list li{

    display:flex;
    align-items:center;
    gap:.8vw;
    font-size:1vw;
    color:#333;
    margin-bottom:1vw;

}

.afri-license-list i{

    color:#D71920;
    font-size:1.1vw;

}

.afri-license-btn{

    display:inline-flex;
    align-items:center;
    gap:.8vw;
    padding:1vw 2vw;
    background:#D71920;
    color:#fff;
    text-decoration:none;
    border-radius:.4vw;
    font-size:1vw;
    font-weight:600;
    transition:.35s;

}

.afri-license-btn:hover{

    background:#111;

}

.afri-license-btn i{

    font-size:.9vw;

}

/*==========================
Responsive
==========================*/

@media(max-width:768px){

.afri-license{

    padding:12vw 6vw;

}

.afri-license-wrapper{

    flex-direction:column-reverse;
    gap:8vw;

}

.afri-license-left,
.afri-license-right{

    width:100%;

}

.afri-license-right img{

    border-radius:3vw;

}

.afri-license-tag{

    font-size:3vw;
    margin-bottom:3vw;

}

.afri-license h2{

    font-size:7vw;
    margin-bottom:4vw;

}

.afri-license p{

    font-size:3.8vw;
    line-height:1.9;
    margin-bottom:5vw;

}

.afri-license-list li{

    font-size:3.8vw;
    gap:2.5vw;
    margin-bottom:3vw;

}

.afri-license-list i{

    font-size:4vw;

}

.afri-license-btn{

    padding:3.8vw 7vw;
    font-size:3.8vw;
    border-radius:2vw;
    gap:2vw;

}

.afri-license-btn i{

    font-size:3.5vw;

}

}