.navbar-nav li {
    position: relative;
}

.hoverUnderline {
  position: relative;
  text-decoration: none;
  display: inline-block;
}
.hoverUnderline::after {
  content: "";
  position: absolute;
  left: 0;
  display: inline-block;
  height: 1em;
  width: 100%;
  border-bottom: 1px solid;
  margin-top: 10px;
  opacity: 0;
  -webkit-transition: opacity 0.35s, -webkit-transform 0.35s;
  transition: opacity 0.35s, transform 0.35s;
  -webkit-transform: scale(0, 1);
  transform: scaleX(0);
}
.hoverUnderline:hover {
  color: #fb0108;
}
.hoverUnderline:hover::after {
  opacity: 1;
  -webkit-transform: scale(1);
  transform: scale(1);
}

.searchBoxOuter {
    position: relative;
    width: 100%;
    display: flex;
    max-width: 300px;
    justify-content: flex-end;
}
.searchGroup {
    position: relative;
}
.suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #ddd;
    border-top: none;
    max-height: 250px;
    overflow-y: auto;
    z-index: 999;
}
.suggestions li {
    padding: 8px 12px;
    cursor: pointer;
    list-style: none;
}
.suggestions li:hover {
    background: #f5f5f5;
}

.desktopNav {
    display: block;
}
.navbar-nav .nav-link.active{
background-color: var(--clr2);
color:white;
border-radius:10px;
    padding-left: 10px;
}

.mobileNav {
    display: none;
}

.navbar-nav {
    gap: 20px;
}

.w50{width:50%;}

.navbar-nav li::before {
    content: '';
    position: absolute;
    width: 1.2px;
    background-color: gray;
    height: 55%;
    right: -9.5%;
    top: 50%;
    transform: translateY(-50%);
}

.navbar-nav li:last-child::before {
    display: none;
}

.searchGroup {
    display: flex;
    line-height: 28px;
    align-items: center;
    position: relative;
    max-width: 282px;
}

.searchGroup input {
    font-family: "Montserrat", sans-serif;
    width: 100%;
    height: 49px;
    padding-right: 2.5rem;
    padding-left: 1.5rem;
    /* box-shadow: 0 0 0 1.5px #2b2c37, 0 0 25px -17px #000; */
    border: 1px solid var(--clr9);

    border-radius: 30px;
    background-color: var(--clr8);
    outline: none;
    color: var(--clr9);
    transition: all 0.25s cubic-bezier(0.19, 1, 0.22, 1);
    cursor: text;
    z-index: 0;
}

.searchGroup input::placeholder {
    color: #bdbecb;
}

.searchGroup input:hover {
    box-shadow: 0 0 0 1.5px var(--clr9), 0px 0px 25px -15px var(--clr9);
}

.searchGroup input:active {
    transform: scale(0.95);
}

.searchGroup input:focus {
    box-shadow: 0 0 0 1.5px var(--clr9);
}

.search-icon {
    position: absolute;
    right: 1rem;
    fill: var(--clr9);
    width: 2rem;
    height: 1.3rem;
    pointer-events: none;
    z-index: 1;
}


.banner {
    padding: 262px 0;
    background-image: url('../images/banner/homeBanner.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
}

.banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
}

.bannerInner {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

.contentSectionImg {
    position: relative;
}
.contentSection{
width:100%;
border-top: 2px solid white;
}


.contentSecImg2 {
display:none;
    position: absolute;
    top: 50%;
    right: -10%;
    width: 50%;
    height: 50%;
    z-index: 1;
    transform: translateY(-50%);
    border: 2px solid var(--clr6);
}

.contentSecImg2 img {
    object-fit: cover;
    width: 100%;
    height: 100%;
}

.contentSectionImg img{
    width: 100%;
}

.contentSectionText {
    margin-left: 12%; 
    margin-right: 12%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}
.contentSectionReverse .contentSectionText {
     /* margin-left: 12%; */
    margin-right: 12%;
}

.sliderInner {
    display: flex;
    gap: 10px;
    overflow-x: auto;
}

.sliderSectionHeading {
    display: flex;
    align-items: center;

}

.sliderItem img {
    height: 410px;
    width: 100%;
    object-fit: cover;
    transition: transform 0.4s ease-in-out;
}

.sliderItemHead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 36px 20px;
    background-color: var(--clr7);
    height: 90px;
}

.sliderItemHead .arrowBtn {
    display: none;
    transition: opacity 0.3s ease-in-out;
}

.sliderItem {
    max-width: 370px;
    min-width: 370px;
    transition: all 0.4s ease-in-out;
}

.sliderItem:hover {
    max-width: 100%;
    flex: 1;
}

.sliderItem:hover .arrowBtn {
    display: flex;
    opacity: 1;

}



.parallexSlider {
    position: relative;
    height: 600px;
    
    /* NEECHAY WALI PROPERTIES HATA DEIN */
     /* background-image: url('https://corrubox.com.pk/images/others/Middle_banner_1.png');  */
     background-position: center; 
     background-repeat: no-repeat;
    background-size: cover; 
    background-attachment: fixed;
}

/* .parallexSlider .container {
    height: 100%;
} */

/* .parallexSlider::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
} */

/* .parallexSliderInner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: 100%;
    position: relative;
    z-index: 1;
} */

.parallexSliderInner p {
    width: 70%;
}


.statsRow {
    display: flex;
    justify-content: space-between;
}

.statsCard {
    display: flex;
    align-items: center;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
    padding: 32px 30px;
    min-width: 495px;
    margin: 20px 0;
    transform: scale(.9);
}

/* .statsCard i {
    font-size: 60px;
    border-radius: 50%;
    background-color: var(--clr2);
    color: var(--clr6);
} */
.statsIcon {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: var(--clr7);
    color: var(--clr3);
    font-size: 40px;
    margin-right: 40px;
}

.statsIcon svg {
    fill: var(--clr3);
}

.statsCard:hover .statsIcon {
    background-color: var(--clr2);
    color: var(--clr8);
    transition: all 0.4s ease-in-out;
}

.statsCard:hover .statsIcon svg {
    background-color: var(--clr2);
    fill: var(--clr8);
    transition: all 0.4s ease-in-out;
}

.parallexSwiper {
    /* position: relative; */
}
/* position: absolute; */
    /* bottom: -10px; */
/* .parallex-swiper-pagination {
    
    display: flex;
    justify-content: center;
    margin-top: 30px;
} */


.parallexSlider {
    position: relative;
    height: 600px;
}

.parallexSlider::before {
    display: none;
}

.parallexSlider .container {
    height: 100%;
}

.parallexSliderInner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: 100%;
    position: relative;
    z-index: 1;
}

.parallexSliderInner p {
    width: 70%;
}

.parallex-swiper-pagination {
    display: flex;
    justify-content: center;
    margin-top: 40px;
    margin-bottom: 20px;
}

/* Scoped pagination controls to avoid conflict between productSlider and parallexSwiper */
.productSlider .parallex-swiper-pagination,
.parallexSwiper .parallex-swiper-pagination {
    display: flex;
    justify-content: center;
}
.swiper-pagination-bullet {
    background-color: var(--clr6);
    opacity: .7;
}

.swiper-pagination-bullet-active.swiper-pagination-bullet {
    background-color: var(--clr2);
    opacity: 1;
}

.blogSection {
    background-color: var(--clr2);
}
.blogCard{
    height: 100%;
    text-decoration: none;
}
.blogCard:hover {
    background-color: var(--clr4);
    color: var(--clr6);
    cursor: pointer;
}





.gallery {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 356px 356px;
    gap: 10px;
    grid-auto-flow: row;
    grid-template-areas:
        "g-item1 g-item2 g-item4 g-item5"
        "g-item3 g-item3 g-item4 g-item6";
}

.g-item1 {
    grid-area: g-item1;
}

.g-item2 {
    grid-area: g-item2;
}

.g-item3 {
    grid-area: g-item3;
}

.g-item4 {
    grid-area: g-item4;
}

.g-item5 {
    grid-area: g-item5;
}

.g-item6 {
    grid-area: g-item6;
}

.gallery img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.footerSlider {
    background-image: url('https://corrubox.com.pk/images/slider/slider1.jpg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 164px 0;
    background-attachment: fixed;
}

.slideCol1 {
    border-right: 4px solid var(--clr6);
}

.footerSliderInner {
    display: flex;
    gap: 60px;

}

.footerSliderInner>div {
    width: 50%;
}

.swiperBtn {
    background-color: var(--clr6);
    border-radius: 50%;
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;

}

.swiperBtnOut {
    display: flex;
    gap: 15px;
}

.footerSliderOuter {
    width: 80%;
}

.swiper-button-disabled {
    color: rgb(179, 179, 179);
}

footer ul {
    list-style: none;

}

footer {
    background-color: var(--clr4);
    color: var(--clr6);
        border-top: 2px solid white;
}

footer ul li a {
    color: var(--clr6);
    text-decoration: none;
}

.socialIcons {
    display: flex;
    gap: 10px;
}

.socialIcons a {
    border: 1px solid var(--clr6);
    border-radius: 50%;
    color: white;
    text-decoration: none;
    padding: 10px 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
}

.dropNavigationInner {
    display: flex;
   
    gap: 100px;
}

.dropNavigationInner ul {
    list-style: none;
}

.headerImg img {
    max-width: 383px;
    width: 100%;
}

.dropNavigationInner .arrow {
    color: var(--clr2);
    transform: rotate(-35deg);
}

.headerHeading li a {
    text-decoration: none;
    color: black;
}

.headerHeadingMain {
    border-bottom: 2px solid var(--clr1);
    padding-bottom: 10px;
    margin-bottom: 15px;
}

.headerHeadingMain a {
    padding: 14px;

}

.navbar {
    position: relative;
}

.dropNavigation {
    display: none;
    position: absolute;
    z-index: 5;
    width: 100%;
    top: 74px;
    background-color: white;
}

.statsSection .swiperBtn {
    background-color: #D2D2D2;
}

.statsSection .swiper-button-disabled {
    color: rgb(179, 179, 179);
    background-color: rgb(177, 177, 177)2D2;
}

.productSlider {
    display: none;
}

.innerBanner {
    padding: 110px 0;
}

.contentSectionReverse .contentSecImg2 {
    position: absolute;
    top: 50%;
    right: auto;
    width: 50%;
    height: 50%;
    z-index: 1;
    transform: translateY(-50%);
    border: 2px solid var(--clr6);
    left: -10%;
}

.contentBg {
    background-color: var(--clr7);
}

.breadcrumb-item::before {
    display: none;
}

.breadcrumb-item a {
    text-decoration: none;
    color: var(--clr2);
}

.breadcrumb {
    margin: 15px 0;
}

.breadcrumb i {
    color: rgba(33, 37, 41, 0.75);
    margin-right: 8px;
}

.ceoSection {
    background-color: var(--clr1);
}

.ceoImg {
    width: 100%;
    height: 644px;
    object-fit: cover;
}

.ceoSectionContent .quote {
    opacity: .2;
    position: relative;
    z-index: 1;
}

.ceoCard {
    background-color: var(--clr6);
    padding: 51px;
    width: 100%;
    transform: translateY(-50%);

}

.ceoSectionContent {
    position: relative;
    height: 100%;
}

.ceoCard {
    position: absolute;
    left: 20%;
    top: 50%;
}

.sellerCard {
    width: 100%;
    height: 100%;
    padding: 24px;
    background-color: var(--clr8);
    display: flex;
    flex-direction: column;
    text-decoration: none;
}
.sellerCard a{
    text-decoration: none;
}

.sellerCard img {
    width: 100%;
    height: 354px;
    object-fit: cover;
    flex-shrink: 0;
}

.sellerCard p {
    padding-top: 24px;
    margin-bottom: 0;
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 80px; /* Fixed height for text area to ensure equal cards */
}

.newsLetter {
    background-color: var(--clr1);
    /* color: var(--clr6); */
}

.newsletterInner {
    display: flex;
    color: var(--clr6);
    justify-content: space-between;
    align-items: center;

}

.newsletter2 {
    background-color: var(--clr2);
}

.newsletter2 .newsletterInner {
    display: flex;
    padding: 126px 0;
    color: var(--clr6);
    justify-content: start;
    align-items: start;
    flex-direction: column;
    gap: 30px;
}

.didYouKnowCard {
    border: 1px solid var(--clr7);
    border-radius: 20px;
    padding: 90px;
}

.didYouKnowCard {
    position: relative;
    text-align: center;
}

.didUKnwImg {
    position: absolute;
    top: -90px;
    left: 50%;
    transform: translateX(-50%);
}

.didUKnwImg2 {
    position: absolute;
    bottom: -60px;
    right: 20%;
    transform: translateX(-50%);
}







.btn-player {
    width: 90%;
    height: 60px;
    -webkit-border-radius: 35px;
    -moz-border-radius: 35px;
    border-radius: 35px;
    font-size: 20px;
    color: #fff;
    background: -webkit-linear-gradient(left, #fe4344 40%, #f15737 70%, #f1743c 100%);
    /* Safari 5.1 - 6.0 */
    background: -o-linear-gradient(right, #fe4344 40%, #f15737 70%, #f1743c 100%);
    /* Opera 11.1 - 12.0 */
    background: -moz-linear-gradient(right, #fe4344 40%, #f15737 70%, #f1743c 100%);
    /* Firefox 3.6 - 15 */
    background: linear-gradient(to right, #fe4344 40%, #f15737 70%, #f1743c 100%);
    /* 标准的语法 */
    cursor: pointer;
}

.player-wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80px;
    height: 80px;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.player-wrapper:nth-child(2) {
    left: 50%;
}

.player-wrapper .player {
    width: 100%;
    height: 100%;
    position: relative;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    z-index: 100;
}

.player-wrapper .player .playImg {
    margin: 29px 0 0 31px;
}

.player-wrapper .player .pauseImg {
    margin: 29px 0 0 28px;
}

.player-wrapper .player-circles {
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
}

.player-circles .circle {
    background: rgba(242, 104, 58, 0.1);
    width: 80px;
    height: 80px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    position: absolute;
}

.player-circles .c-1 {
    -webkit-animation: 2000ms scaleToggleOne infinite;
    animation: 2000ms scaleToggleOne infinite;
}

.player-circles .c-2 {
    -webkit-animation: 2000ms scaleToggleOne infinite;
    -webkit-animation-delay: 300ms;
    animation: 2000ms scaleToggleOne infinite;
    animation-delay: 300ms;
}

.player-circles .c-3 {
    -webkit-animation: 2000ms scaleToggleOne infinite;
    -webkit-animation-delay: 600ms;
    animation: 2000ms scaleToggleOne infinite;
    animation-delay: 600ms;
}

@-webkit-keyframes scaleToggleOne {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    50% {
        -webkit-transform: scale(1.5);
        transform: scale(1.5);
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

@keyframes scaleToggleOne {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    50% {
        -webkit-transform: scale(1.5);
        transform: scale(1.5);
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
}

.player .controler {
    position: absolute;
}

.player .paused {
    width: 0;
    height: 0;
    top: 24px;
    left: 30px;
    border: 16px solid transparent;
    border-left: 26px solid #f9fbfb;
    border-right: 0;
}

.videoPlayer {
    position: relative;
    width: 100%;
    height: 100%;
}

.videoPlayer img {
    width: 100%;
    height: 741px;
    object-fit: cover;
}

.videoPlayer video {
    width: 100%;
    height: 741px;
    object-fit: cover;
}

.behindTheBoxCard {
    width: 100%;
    height: 335px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    position: relative;
}

.behindBoxSection {
    background-color: var(--clr1);
}

.careerTable table tr td {
    vertical-align: middle;
}

.careerApply {
    padding: 38px 64px;
    background-color: var(--clr8);
}

.careerApply input::placeholder {
    font-weight: 600;
    font-family: var(--verdanaRegular);
    color: black;
}

.file-upload-wrapper {
    display: flex;
    align-items: center;
    border: 1px solid #ccc;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
    /* width: 380px; */
    /* font-family: Arial, sans-serif; */
}

.resumeUploadLabel {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
}

.file-upload-input {
    flex: 1;
    padding: 18px 10px;
    border: none;
    outline: none;
    font-size: 14px;
    color: #000000;
}

.file-upload-button {
    background-color: #3949ab;
    /* Blue button */
    color: white;
    padding: 18px 20px;
    border: none;
    cursor: pointer;
    font-size: 14px;
    font-weight: bold;
}

.file-upload-button:hover {
    background-color: #303f9f;
}

/* Hide the actual file input */
#realFileInput {
    display: none;
}

.contactFormDetails {
    list-style: none;
}

.contactFormDetails li {
    display: flex;
    align-items: center;
    gap: 20px;
}

.contactFormDetails i {
    color: var(--clr2);
}

.timelineSection {
    /* display: flex; */
    display: grid;
    grid-template-columns: repeat(6, 1fr);
}

.timelineSection>div {
    /* flex: 1; */
    min-width: 200px;
}

.timeline {
    padding: 1.5rem clamp(1rem, 2vw, 2.5rem);
    background-position: center;
    background-size: cover;
    height: 100%;
}


@media (max-width: 1400px) {
    .mobileNav {
        display: block;
    }

    .desktopNav {
        display: none;
    }

    .productSlider {
        display: block !important;
    }

    .productSliderDesktop {
        display: none !important;
    }

    .sliderItem {
        max-width: 100%;
    }

    .sliderItemHead .arrowBtn {
        display: flex;
    }
}

@media (max-width: 1200px) {
    .ceoSectionContent .quote {
        width: 30%;
    }

    .ceoCard {
        position: static;
        transform: translate(0);
    }

    .ceoSectionContent .quote {
        position: absolute;
        left: -10%;
    }

    .timelineSection {
        overflow-x: scroll;
    }
}

@media (max-width: 991px) {
.didUKnwImg{width:100%;}

.newsletterInner {
    align-items: start;
    flex-direction: column;
    gap: 20px;
}

.contentSecImg2 {
        right: 0;
        transform: translate(-50%, -50%);
        top: 50%;
    }
    
.w50{width:100%;}
    .ceoSectionContent .quote {
        width: 20%;
        left: 0;
    }

    .ceoImg {
        margin-bottom: 30px;
    }

    .contentSectionReverse .contentSecImg2 {
        left: 0;
    }

    .productSlider {
        display: block;
    }

    .productSliderDesktop {
        display: none;
    }

    .contentSection .contentSecImg2 {
        right: 50%;
        transform: translateX(50%);
    }

    .contentSectionText {
        margin-top: 20px;
        text-align: center;
    }

    .sliderSectionHeading>div {
        margin-bottom: 20px;
    }

    .sliderSection {
        background-color: #eeeeee;
        margin-bottom: 0;
    }

    .sliderItemHead {
        background-color: white;
        height: auto;
        min-height: 90px;
        gap: 15px;
        padding: 20px;
    }

    .sliderItemHead .arrowBtn {
        flex-shrink: 0;
        display: flex;
    }

    .gallery {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: repeat(4, 356px);
        grid-template-areas:
            "g-item1 g-item2"
            "g-item3 g-item3"
            "g-item4 g-item5"
            "g-item6 g-item6";
    }

    .footerSliderInner {
        flex-direction: column;
    }

    .footerSliderInner .slideCol1 {
        border-right: none;
        width: 100%;
    }

    .footerSliderInner .slideCol1 br {
        display: none;
    }

    .footerSliderInner .slideCol2 {
        width: 100%;
    }

    .swiperBtnOut {
        margin-top: 20px;
    }

    footer .col-12 {
        text-align: center;
        align-items: center;
        display: flex;
        flex-direction: column;
    }

    .contentSectionReverse .row {
        flex-direction: column-reverse;
    }
}


/* Slider container setup */
.footerSliderSection {
    position: relative;
    width: 100%;
}

/* Background image par apply hogi */
.footerSliderSection .swiper-slide {
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    padding-top: 164px; 
    padding-bottom: 164px; 
}

/* Arrows ko background image ke oopar set karne ke liye */
.arrowContainer {
    position: absolute;
    bottom: 80px; /* Is value ko change kar ke aap arrows ko upar/neeche adjust kar sakte hain */
    left: 0;
    z-index: 10;
    pointer-events: none; /* Container click block na kare */
}

/* Sirf buttons ko clickable banane ke liye */
.arrowContainer .swiperBtnOut {
    pointer-events: auto; 
    display: flex;
    gap: 15px;
}

    .statsCard {
            min-width: auto !important;
            padding: 20px !important;
            width: 100%;
        }
        @media (max-width: 767px) {
            .statsCard {
                flex-direction: column;
                text-align: center;
            }
            .statsIcon {
                margin-right: 0 !important;
                margin-bottom: 15px;
            }
        }

/* Responsive optimizations for small screens (362px and below) */
@media (max-width: 991px) {
    .bannerInner h1, .bannerInner p {
        width: 100% !important;
        padding-left: 15px;
        padding-right: 15px;
    }
    
    .sliderItem {
        max-width: 100%;
        min-width: unset;
        width: 100%;
    }
}

@media (max-width: 480px) {
    .fs1 {
        font-size: 2rem !important;
    }
    .fs3 {
        font-size: 1.8rem !important;
    }
    .bannerInner h1 {
        font-size: 2.2rem !important;
    }
}

@media (max-width: 991px) {
    .banner {
        padding: 0 !important;
        height: 450px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .bannerInner {
        width: 100%;
        padding: 0 15px;
    }
    .bannerInner h1 {
        font-size: 1.8rem !important;
        line-height: 1.2;
    }
}

@media (max-width: 991px) {
    .didYouKnow {
        padding: 30px 0 !important;
    }
    .didYouKnow .container {
        padding-top: 0 !important;
        margin-top: 40px !important;
    }
    .didYouKnowCard {
        padding: 60px 20px 40px 20px !important;
    }
    .didUKnwImg {
        top: -50px !important;
        width: 250px !important;
    }
}

@media (max-width: 362px) {
    .container, .container-fluid {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }
    .btn1, .btn2 {
        padding: 12px 20px;
        font-size: 0.9rem;
    }
}

.swiper-slide {
    height: auto;
}

@media (max-width: 767px) {
    .careerTable table, 
    .careerTable tbody, 
    .careerTable tr, 
    .careerTable td {
        display: block !important;
        width: 100% !important;
    }
    .careerTable tr {
        border-bottom: 2px solid #eee;
        padding-bottom: 20px;
        margin-bottom: 20px;
    }
    .careerTable td {
        padding: 10px 0 !important;
        border: none !important;
    }
    .careerTable td:last-child {
        text-align: center;
        padding-top: 20px !important;
    }
    .careerTable .btn1 {
        width: 100%;
        display: block;
    }
}
<!DOCTYPE html>
<html lang="en">

<head>

    <script async src="https://www.googletagmanager.com/gtag/js?id=G-TQWZTYYWXL"></script>
    
  <script src="https://www.google.com/recaptcha/enterprise.js?render=6LejqjstAAAAAEFD8fWRTSvDSnw1so-9fdnE7FOG"></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());

      gtag('config', 'G-TQWZTYYWXL');
    </script>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
        integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.5/css/lightbox.min.css"
        integrity="sha512-xtV3HfYNbQXS/1R1jP53KbFcU9WXiSA1RFKzl5hRlJgdOJm4OxHCWYpskm6lN0xp0XtKGpAfVShpbvlFH3MDAA=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.0/css/all.min.css"
        integrity="sha512-DxV+EoADOkOygM4IR9yXP8Sb2qwgidEmeqAEmDKIOfPRQZOWbXCzLC6vjbZyy0vPisbH2SyW27+ddLVCN+OMzQ=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />

    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css"
        integrity="sha512-1cK78a1o+ht2JcaW6g8OXYwqpev9+6GqOkz9xmBN9iUUhIndKtxwILGWYOSibOKjLsEdjyjZvYDq/cZwNeak0w=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />

    <link rel="stylesheet" type="text/css" href="https://corrubox.com.pk/styles/style">
    <link rel="stylesheet" type="text/css" href="https://corrubox.com.pk/styles/utility">
    <link rel="icon" type="image/png" href="https://corrubox.com.pk/images/icons/Fav-icon.png">
    <title>CorruBox</title>
</head>

<body>

<style>
/* Loader background */
#loadingScreen {
  position: fixed;
  width: 100%;
  height: 100%;
  background: #fff; /* change background if needed */
  top: 0;
  left: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.5s ease, visibility 0.5s ease;
  will-change: opacity, visibility;
}

/* Hide when not active */
#loadingScreen.hidden {
  opacity: 0;
  visibility: hidden;
}

/* From Uiverse.io by Timeless-Eve */ 
.loader {
  --duration: 3s;
  --primary: #deb177; /* cardboard tan */
  --primary-light: #ae6f31; /* darker cardboard */
  --primary-rgba: rgba(166, 124, 82, 0); /* transparent brown */
  width: 200px;
  height: 320px;
  position: relative;
  transform-style: preserve-3d;
  will-change: transform;
}

@media (max-width: 480px) {
  .loader {
    transform: scale(0.44);
    transform-origin: center;
  }
}

.loader:before,
.loader:after {
  --r: 20.5deg;
  content: "";
  width: 320px;
  height: 140px;
  position: absolute;
  right: 32%;
  bottom: -11px;
  /* change the back groung color on switching from light to dark mood */
  background: #e8e8e8;
  transform: translateZ(200px) rotate(var(--r));
  -webkit-animation: mask var(--duration) linear forwards infinite;
  animation: mask var(--duration) linear forwards infinite;
}

.loader:after {
  --r: -20.5deg;
  right: auto;
  left: 32%;
}

.loader .ground {
  position: absolute;
  left: -50px;
  bottom: -120px;
  transform-style: preserve-3d;
  transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
}

.loader .ground div,
.loader .box div {
  background: linear-gradient(
    45deg,
    var(--primary) 0%,
    var(--primary) 50%,
    var(--primary-light) 80%,
    var(--primary-light) 100%
  );
  background-size: cover;
}
  transform-style: preserve-3d;
  -webkit-animation: ground var(--duration) linear forwards infinite;
  animation: ground var(--duration) linear forwards infinite;
}

.loader .ground div:before,
.loader .ground div:after {
  --rx: 90deg;
  --ry: 0deg;
  --x: 44px;
  --y: 162px;
  --z: -50px;
  content: "";
  width: 156px;
  height: 300px;
  opacity: 0;
  background: linear-gradient(var(--primary), var(--primary-rgba));
  position: absolute;
  transform: rotateX(var(--rx)) rotateY(var(--ry)) translate(var(--x), var(--y))
    translateZ(var(--z));
  -webkit-animation: ground-shine var(--duration) linear forwards infinite;
  animation: ground-shine var(--duration) linear forwards infinite;
}

.loader .ground div:after {
  --rx: 90deg;
  --ry: 90deg;
  --x: 0;
  --y: 177px;
  --z: 150px;
}

.loader .box {
  --x: 0;
  --y: 0;
  position: absolute;
  -webkit-animation: var(--duration) linear forwards infinite;
  animation: var(--duration) linear forwards infinite;
  transform: translate(var(--x), var(--y));
}

.loader .box div {
  background-color: var(--primary);
  width: 48px;
  height: 48px;
  position: relative;
  transform-style: preserve-3d;
  -webkit-animation: var(--duration) ease forwards infinite;
  animation: var(--duration) ease forwards infinite;
  transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
  will-change: transform;
}

.loader .box div:before,
.loader .box div:after {
  --rx: 90deg;
  --ry: 0deg;
  --z: 24px;
  --y: -24px;
  --x: 0;
  content: "";
  position: absolute;
  background-color: inherit;
  width: inherit;
  height: inherit;
  transform: rotateX(var(--rx)) rotateY(var(--ry)) translate(var(--x), var(--y))
    translateZ(var(--z));
  filter: brightness(var(--b, 1.2));
}

.loader .box div:after {
  --rx: 0deg;
  --ry: 90deg;
  --x: 24px;
  --y: 0;
  --b: 1.4;
}

.loader .box.box0 {
  --x: -220px;
  --y: -120px;
  left: 58px;
  top: 108px;
}

.loader .box.box1 {
  --x: -260px;
  --y: 120px;
  left: 25px;
  top: 120px;
}

.loader .box.box2 {
  --x: 120px;
  --y: -190px;
  left: 58px;
  top: 64px;
}

.loader .box.box3 {
  --x: 280px;
  --y: -40px;
  left: 91px;
  top: 120px;
}

.loader .box.box4 {
  --x: 60px;
  --y: 200px;
  left: 58px;
  top: 132px;
}

.loader .box.box5 {
  --x: -220px;
  --y: -120px;
  left: 25px;
  top: 76px;
}

.loader .box.box6 {
  --x: -260px;
  --y: 120px;
  left: 91px;
  top: 76px;
}

.loader .box.box7 {
  --x: -240px;
  --y: 200px;
  left: 58px;
  top: 87px;
}

.loader .box0 {
  -webkit-animation-name: box-move0;
  animation-name: box-move0;
}

.loader .box0 div {
  -webkit-animation-name: box-scale0;
  animation-name: box-scale0;
}

.loader .box1 {
  -webkit-animation-name: box-move1;
  animation-name: box-move1;
}

.loader .box1 div {
  -webkit-animation-name: box-scale1;
  animation-name: box-scale1;
}

.loader .box2 {
  -webkit-animation-name: box-move2;
  animation-name: box-move2;
}

.loader .box2 div {
  -webkit-animation-name: box-scale2;
  animation-name: box-scale2;
}

.loader .box3 {
  -webkit-animation-name: box-move3;
  animation-name: box-move3;
}

.loader .box3 div {
  -webkit-animation-name: box-scale3;
  animation-name: box-scale3;
}

.loader .box4 {
  -webkit-animation-name: box-move4;
  animation-name: box-move4;
}

.loader .box4 div {
  -webkit-animation-name: box-scale4;
  animation-name: box-scale4;
}

.loader .box5 {
  -webkit-animation-name: box-move5;
  animation-name: box-move5;
}

.loader .box5 div {
  -webkit-animation-name: box-scale5;
  animation-name: box-scale5;
}

.loader .box6 {
  -webkit-animation-name: box-move6;
  animation-name: box-move6;
}

.loader .box6 div {
  -webkit-animation-name: box-scale6;
  animation-name: box-scale6;
}

.loader .box7 {
  -webkit-animation-name: box-move7;
  animation-name: box-move7;
}

.loader .box7 div {
  -webkit-animation-name: box-scale7;
  animation-name: box-scale7;
}

@-webkit-keyframes box-move0 {
  12% {
    transform: translate(var(--x), var(--y));
  }

  25%,
  52% {
    transform: translate(0, 0);
  }

  80% {
    transform: translate(0, -32px);
  }

  90%,
  100% {
    transform: translate(0, 188px);
  }
}

@keyframes box-move0 {
  12% {
    transform: translate(var(--x), var(--y));
  }

  25%,
  52% {
    transform: translate(0, 0);
  }

  80% {
    transform: translate(0, -32px);
  }

  90%,
  100% {
    transform: translate(0, 188px);
  }
}

@-webkit-keyframes box-scale0 {
  6% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
  }

  14%,
  100% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
  }
}

@keyframes box-scale0 {
  6% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
  }

  14%,
  100% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
  }
}

@-webkit-keyframes box-move1 {
  16% {
    transform: translate(var(--x), var(--y));
  }

  29%,
  52% {
    transform: translate(0, 0);
  }

  80% {
    transform: translate(0, -32px);
  }

  90%,
  100% {
    transform: translate(0, 188px);
  }
}

@keyframes box-move1 {
  16% {
    transform: translate(var(--x), var(--y));
  }

  29%,
  52% {
    transform: translate(0, 0);
  }

  80% {
    transform: translate(0, -32px);
  }

  90%,
  100% {
    transform: translate(0, 188px);
  }
}

@-webkit-keyframes box-scale1 {
  10% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
  }

  18%,
  100% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
  }
}

@keyframes box-scale1 {
  10% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
  }

  18%,
  100% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
  }
}

@-webkit-keyframes box-move2 {
  20% {
    transform: translate(var(--x), var(--y));
  }

  33%,
  52% {
    transform: translate(0, 0);
  }

  80% {
    transform: translate(0, -32px);
  }

  90%,
  100% {
    transform: translate(0, 188px);
  }
}

@keyframes box-move2 {
  20% {
    transform: translate(var(--x), var(--y));
  }

  33%,
  52% {
    transform: translate(0, 0);
  }

  80% {
    transform: translate(0, -32px);
  }

  90%,
  100% {
    transform: translate(0, 188px);
  }
}

@-webkit-keyframes box-scale2 {
  14% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
  }

  22%,
  100% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
  }
}

@keyframes box-scale2 {
  14% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
  }

  22%,
  100% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
  }
}

@-webkit-keyframes box-move3 {
  24% {
    transform: translate(var(--x), var(--y));
  }

  37%,
  52% {
    transform: translate(0, 0);
  }

  80% {
    transform: translate(0, -32px);
  }

  90%,
  100% {
    transform: translate(0, 188px);
  }
}

@keyframes box-move3 {
  24% {
    transform: translate(var(--x), var(--y));
  }

  37%,
  52% {
    transform: translate(0, 0);
  }

  80% {
    transform: translate(0, -32px);
  }

  90%,
  100% {
    transform: translate(0, 188px);
  }
}

@-webkit-keyframes box-scale3 {
  18% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
  }

  26%,
  100% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
  }
}

@keyframes box-scale3 {
  18% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
  }

  26%,
  100% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
  }
}

@-webkit-keyframes box-move4 {
  28% {
    transform: translate(var(--x), var(--y));
  }

  41%,
  52% {
    transform: translate(0, 0);
  }

  80% {
    transform: translate(0, -32px);
  }

  90%,
  100% {
    transform: translate(0, 188px);
  }
}

@keyframes box-move4 {
  28% {
    transform: translate(var(--x), var(--y));
  }

  41%,
  52% {
    transform: translate(0, 0);
  }

  80% {
    transform: translate(0, -32px);
  }

  90%,
  100% {
    transform: translate(0, 188px);
  }
}

@-webkit-keyframes box-scale4 {
  22% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
  }

  30%,
  100% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
  }
}

@keyframes box-scale4 {
  22% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
  }

  30%,
  100% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
  }
}

@-webkit-keyframes box-move5 {
  32% {
    transform: translate(var(--x), var(--y));
  }

  45%,
  52% {
    transform: translate(0, 0);
  }

  80% {
    transform: translate(0, -32px);
  }

  90%,
  100% {
    transform: translate(0, 188px);
  }
}

@keyframes box-move5 {
  32% {
    transform: translate(var(--x), var(--y));
  }

  45%,
  52% {
    transform: translate(0, 0);
  }

  80% {
    transform: translate(0, -32px);
  }

  90%,
  100% {
    transform: translate(0, 188px);
  }
}

@-webkit-keyframes box-scale5 {
  26% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
  }

  34%,
  100% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
  }
}

@keyframes box-scale5 {
  26% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
  }

  34%,
  100% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
  }
}

@-webkit-keyframes box-move6 {
  36% {
    transform: translate(var(--x), var(--y));
  }

  49%,
  52% {
    transform: translate(0, 0);
  }

  80% {
    transform: translate(0, -32px);
  }

  90%,
  100% {
    transform: translate(0, 188px);
  }
}

@keyframes box-move6 {
  36% {
    transform: translate(var(--x), var(--y));
  }

  49%,
  52% {
    transform: translate(0, 0);
  }

  80% {
    transform: translate(0, -32px);
  }

  90%,
  100% {
    transform: translate(0, 188px);
  }
}

@-webkit-keyframes box-scale6 {
  30% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
  }

  38%,
  100% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
  }
}

@keyframes box-scale6 {
  30% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
  }

  38%,
  100% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
  }
}

@-webkit-keyframes box-move7 {
  40% {
    transform: translate(var(--x), var(--y));
  }

  53%,
  52% {
    transform: translate(0, 0);
  }

  80% {
    transform: translate(0, -32px);
  }

  90%,
  100% {
    transform: translate(0, 188px);
  }
}

@keyframes box-move7 {
  40% {
    transform: translate(var(--x), var(--y));
  }

  53%,
  52% {
    transform: translate(0, 0);
  }

  80% {
    transform: translate(0, -32px);
  }

  90%,
  100% {
    transform: translate(0, 188px);
  }
}

@-webkit-keyframes box-scale7 {
  34% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
  }

  42%,
  100% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
  }
}

@keyframes box-scale7 {
  34% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(0);
  }

  42%,
  100% {
    transform: rotateY(-47deg) rotateX(-15deg) rotateZ(15deg) scale(1);
  }
}

@-webkit-keyframes ground {
  0%,
  65% {
    transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px)
      translateZ(100px) scale(0);
  }

  75%,
  90% {
    transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px)
      translateZ(100px) scale(1);
  }

  100% {
    transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px)
      translateZ(100px) scale(0);
  }
}

@keyframes ground {
  0%,
  65% {
    transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px)
      translateZ(100px) scale(0);
  }

  75%,
  90% {
    transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px)
      translateZ(100px) scale(1);
  }

  100% {
    transform: rotateX(90deg) rotateY(0deg) translate(-48px, -120px)
      translateZ(100px) scale(0);
  }
}

@-webkit-keyframes ground-shine {
  0%,
  70% {
    opacity: 0;
  }

  75%,
  87% {
    opacity: 0.2;
  }

  100% {
    opacity: 0;
  }
}

@keyframes ground-shine {
  0%,
  70% {
    opacity: 0;
  }

  75%,
  87% {
    opacity: 0.2;
  }

  100% {
    opacity: 0;
  }
}

@-webkit-keyframes mask {
  0%,
  65% {
    opacity: 0;
  }

  66%,
  100% {
    opacity: 1;
  }
}

@keyframes mask {
  0%,
  65% {
    opacity: 0;
  }

  66%,
  100% {
    opacity: 1;
  }
}


</style>

<!-- Loader -->
<div id="loadingScreen">
  <!-- From Uiverse.io by Timeless-Eve --> 
<div class="loader">
  <div class="box box0">
    <div></div>
  </div>
  <div class="box box1">
    <div></div>
  </div>
  <div class="box box2">
    <div></div>
  </div>
  <div class="box box3">
    <div></div>
  </div>
  <div class="box box4">
    <div></div>
  </div>
  <div class="box box5">
    <div></div>
  </div>
  <div class="box box6">
    <div></div>
  </div>
  <div class="box box7">
    <div></div>
  </div>
  <div class="ground">
    <div></div>
  </div>
</div>

</div>

<script>
  /**
   * Optimized Loader Logic
   * Hides the loader as soon as the page is interactive or after a safety timeout.
   */
  (function() {
    const loader = document.getElementById("loadingScreen");
    let isHidden = false;

    const hideLoader = () => {
      if (loader && !isHidden) {
        isHidden = true;
        loader.classList.add("hidden");
        // Remove from layout after fade out to improve page performance
        setTimeout(() => {
          loader.style.display = "none";
        }, 600);
      }
    };

    // 1. Hide when DOM is ready (faster than window.onload)
    document.addEventListener("DOMContentLoaded", () => {
      // Delay increased to 3100ms to allow the full 3s animation to finish once
      setTimeout(hideLoader, 3100);
    });

    // 2. Fallback: window.onload for reliability
    window.addEventListener("load", hideLoader);

    // 3. Absolute safety: Hide after 5 seconds regardless of load status
    // This prevents the user from being stuck on a slow network
    setTimeout(hideLoader, 5000);
  })();
</script>

<style>
    .desktopNav,
    .mobileNav {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 1050;
        /* stays above content */
        transition: transform 0.3s ease-in-out;
    }

    .nav-hidden {
        transform: translateY(-100%);
    }

    @media (max-width: 1400px) {
        .mobileNav .dropdown-menu {
            border: none !important;
            box-shadow: none !important;
            background: transparent !important;
            padding-left: 10px !important;
        }
        .mobileNav .dropdown-item {
            white-space: normal !important;
            word-wrap: break-word !important;
            font-size: 0.9rem !important;
            padding: 8px 15px !important;
            color: #333 !important;
        }
        .mobileNav .dropdown-item.fw-bold {
            font-size: 1rem !important;
            padding-left: 5px !important;
            margin-top: 10px;
        }
        .mobileNav .dropdown-divider {
            margin: 10px 0 !important;
        }
        .mobileNav .nav-link,
        .mobileNav .nav-item,
        .mobileNav .navbar-nav {
            border: none !important;
            box-shadow: none !important;
        }
        .mobileNav .nav-link::after,
        .mobileNav .nav-link::before,
        .mobileNav .nav-item::after,
        .mobileNav .nav-item::before {
            display: none !important;
        }
    }
</style>

<nav class="navbar navbar-expand-lg bg-body-tertiary desktopNav">
    <div class="container d-flex justify-content-between">
        <a class="navbar-brand" href="https://corrubox.com.pk/"><img src="https://corrubox.com.pk/images/logo/logo.png" alt=""></a>
        <ul class="navbar-nav mb-2 mb-lg-0">
            <li class="nav-item">
                <a class="nav-link hoverUnderline" aria-current="page" href="https://corrubox.com.pk/about-us">About Us</a>
            </li>
            <li class="nav-item navDropDown">
                <a class="nav-link" href="https://corrubox.com.pk/product">Products <i class="fa-solid fa-angle-down"></i></a>
            </li>
            <li class="nav-item">
                <a class="nav-link hoverUnderline" href="https://corrubox.com.pk/services">Services</a>
            </li>
            <li class="nav-item">
                <a class="nav-link hoverUnderline" href="https://corrubox.com.pk/media">Media</a>
            </li>
            <li class="nav-item">
                <a class="nav-link hoverUnderline" href="https://corrubox.com.pk/career">Careers</a>
            </li>
            <li class="nav-item">
                <a class="nav-link hoverUnderline" href="https://corrubox.com.pk/contact-us">Contact Us</a>
            </li>
        </ul>

        <div class="searchBoxOuter">
            <div class="searchGroup">
                <svg viewBox="0 0 24 24" aria-hidden="true" class="search-icon">
                    <g>
                        <path
                            d="M21.53 20.47l-3.66-3.66C19.195 15.24 20 13.214 20 11c0-4.97-4.03-9-9-9s-9 4.03-9 9 4.03 9 9 9c2.215 0 4.24-.804 5.808-2.13l3.66 3.66c.147.146.34.22.53.22s.385-.073.53-.22c.295-.293.295-.767.002-1.06zM3.5 11c0-4.135 3.365-7.5 7.5-7.5s7.5 3.365 7.5 7.5-3.365 7.5-7.5 7.5-7.5-3.365-7.5-7.5z">
                        </path>
                    </g>
                </svg>

                <input id="query" class="input" type="search" placeholder="Search..." autocomplete="off" />
                <ul id="suggestions" class="suggestions" style="display:none;"></ul>
            </div>
        </div>

    </div>
    <div class="dropNavigation">
        <div class="container">
            <div class="dropNavigationInner py-5">

                <ul class="headerHeading">
                    <li class="headerHeadingMain"><img src="assets/images/icons/icon1.png" alt=""><a
                            href="https://corrubox.com.pk/product/corrugated-boxes">
                            Corrugated Boxes</a> <i class="fa-solid fa-arrow-right-long arrow"></i></li>
                    <li><a href="https://corrubox.com.pk/product/corrugated-boxes#rsb">Regular Slotted Cartons</a> </li>
                    <!-- <li><a href="https://corrubox.com.pk/product/corrugated-boxes#lbb">Top and Bottom Corrugrated Cartons</a> </li> -->
                    <li><a href="https://corrubox.com.pk/product/corrugated-boxes#lbb">Cold Storage Fruit Die-Cut Cartons</a></li>
                    <li><a href="https://corrubox.com.pk/product/corrugated-boxes#cb">Corrugated Trays (Flat and Pre-glued)</a></li>
                    <li><a href="https://corrubox.com.pk/product/corrugated-boxes#ct">Interlayer Partition Sheets</a></li>
                </ul>
                <ul class="headerHeading">
                    <li class="headerHeadingMain"><img src="assets/images/icons/icon3.png" alt=""><a
                            href="https://corrubox.com.pk/product/fluting-paper">Fluting Paper</a>
                        <i class="fa-solid fa-arrow-right-long arrow"></i>
                    </li>
                    <!-- <li><a href="https://corrubox.com.pk/product/paper#cp">Folding Box Board</a> </li> -->
                    <!-- <li><a href="https://corrubox.com.pk/product/paper#dug">Liquid Packaging Board</a></li> -->
                    <!-- <li><a href="https://corrubox.com.pk/product/paper#mfg">White Line Chip Board</a></li> -->
                    <li><a href="https://corrubox.com.pk/product/fluting-paper#cp">Fluting</a></li>
                    <!-- <li><a href="https://corrubox.com.pk/product/paper#wl">White Test Liner</a></li> -->
                    <!-- <li><a href="https://corrubox.com.pk/product/paper#bl">Printing & Publishing Paper</a></li> -->
                </ul>
                <ul class="headerHeading">
                    <li class="headerHeadingMain"><img src="assets/images/icons/icon2.png" alt=""><a
                            href="https://corrubox.com.pk/product/flexographic">Flexographic Labels and Boxes
                        </a> <i class="fa-solid fa-arrow-right-long arrow"></i></li>
                    <li> <a href="https://corrubox.com.pk/product/flexographic#dp">Folded Boxes</a></li>
                    <li><a href="https://corrubox.com.pk/product/flexographic#op">Self-Adhesive Labels</a></li>
                    <!-- <li><a href="https://corrubox.com.pk/product/flexographic#cfb">Corrugated Flexo Boxes</a></li> -->
                </ul>

            </div>
        </div>
    </div>
</nav>
<nav class="navbar navbar-expand-xxl bg-body-tertiary fixed-top mobileNav">
    <div class="container-fluid">
        <a class="navbar-brand" href="https://corrubox.com.pk/"><img src="https://corrubox.com.pk/images/logo/logo.png" alt=""></a>
        <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar"
            aria-controls="offcanvasNavbar" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
            <div class="offcanvas-header">
                <h5 class="offcanvas-title" id="offcanvasNavbarLabel">
                    <a href="https://corrubox.com.pk/"><img src="https://corrubox.com.pk/images/logo/logo.png" alt=""></a>
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
            </div>
            <div class="offcanvas-body">
                <ul class="navbar-nav justify-content-end flex-grow-1 px-3">
                    <li class="nav-item">
                        <a class="nav-link" aria-current="page" href="https://corrubox.com.pk/">Home</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="https://corrubox.com.pk/about-us">About us</a>
                    </li>
                    <li class="nav-item dropdown position-relative">
                        <a class="nav-link" href="https://corrubox.com.pk/product">Products</a>
                        <a class="dropdown-toggle dropdown-toggle-split position-absolute top-0 end-0 h-100 d-flex align-items-center px-3"
                            href="#" data-bs-toggle="dropdown" aria-expanded="false" style="color: inherit; border: none;">
                            <span class="visually-hidden">Toggle Dropdown</span>
                        </a>
                        <ul class="dropdown-menu">
                            <li><a class="dropdown-item fw-bold" href="https://corrubox.com.pk/product/corrugated-boxes">Corrugated Boxes</a></li>
                            <li><a class="dropdown-item ps-4" href="https://corrubox.com.pk/product/corrugated-boxes#rsb">Regular Slotted Cartons</a></li>
                            <li><a class="dropdown-item ps-4" href="https://corrubox.com.pk/product/corrugated-boxes#lbb">Cold Storage Fruit Die-Cut Cartons</a></li>
                            <li><a class="dropdown-item ps-4" href="https://corrubox.com.pk/product/corrugated-boxes#cb">Corrugated Trays (Flat and Pre-glued)</a></li>
                            <li><a class="dropdown-item ps-4" href="https://corrubox.com.pk/product/corrugated-boxes#ct">Interlayer Partition Sheets</a></li>
                            <li><hr class="dropdown-divider"></li>
                            <li><a class="dropdown-item fw-bold" href="https://corrubox.com.pk/product/fluting-paper">Fluting Paper</a></li>
                            <li><a class="dropdown-item ps-4" href="https://corrubox.com.pk/product/fluting-paper#cp">Fluting</a></li>
                            <li><hr class="dropdown-divider"></li>
                            <li><a class="dropdown-item fw-bold" href="https://corrubox.com.pk/product/flexographic">Flexographic Labels and Boxes</a></li>
                            <li><a class="dropdown-item ps-4" href="https://corrubox.com.pk/product/flexographic#dp">Folded Boxes</a></li>
                            <li><a class="dropdown-item ps-4" href="https://corrubox.com.pk/product/flexographic#op">Self-Adhesive Labels</a></li>
                        </ul>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="https://corrubox.com.pk/services">Services</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="https://corrubox.com.pk/media">Media</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="https://corrubox.com.pk/career">Careers</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="https://corrubox.com.pk/contact-us">Contact Us</a>
                    </li>
                </ul>
                <div class="searchBoxOuter mt-3 w-100">
                    <div class="searchGroup" style="max-width: 100%;">
                        <svg viewBox="0 0 24 24" aria-hidden="true" class="search-icon">
                            <g>
                                <path
                                    d="M21.53 20.47l-3.66-3.66C19.195 15.24 20 13.214 20 11c0-4.97-4.03-9-9-9s-9 4.03-9 9 4.03 9 9 9c2.215 0 4.24-.804 5.808-2.13l3.66 3.66c.147.146.34.22.53.22s.385-.073.53-.22c.295-.293.295-.767.002-1.06zM3.5 11c0-4.135 3.365-7.5 7.5-7.5s7.5 3.365 7.5 7.5-3.365 7.5-7.5 7.5-7.5-3.365-7.5-7.5z">
                                </path>
                            </g>
                        </svg>
                        <input class="input" type="search" placeholder="Search..." autocomplete="off" style="width: 100%; border-radius: 30px;" />
                    </div>
                </div>
            </div>
        </div>
    </div>
</nav>

<script>
    const searchLinks = [
        { keyword: "Corrugated Boxes", url: "https://corrubox.com.pk/product/corrugated-boxes" },
        { keyword: "Regular Slated Containers", url: "https://corrubox.com.pk/product/corrugated-boxes#rsc" },
        { keyword: "Lock-Bottom Boxes", url: "https://corrubox.com.pk/product/corrugated-boxes#lbb" },
        { keyword: "Custom Boxes", url: "https://corrubox.com.pk/product/corrugated-boxes#cb" },

        { keyword: "Paper Products", url: "https://corrubox.com.pk/product/paper" },
        { keyword: "Coated Papers", url: "https://corrubox.com.pk/product/paper#cp" },
        { keyword: "Dual-use grades", url: "https://corrubox.com.pk/product/paper#dug" },
        { keyword: "Medium/Fluting grades", url: "https://corrubox.com.pk/product/paper#mfg" },
        { keyword: "Kraftliners", url: "https://corrubox.com.pk/product/paper#kl" },
        { keyword: "White Liners", url: "https://corrubox.com.pk/product/paper#wl" },
        { keyword: "Brown Liners", url: "https://corrubox.com.pk/product/paper#bl" },

        { keyword: "Flexographic", url: "https://corrubox.com.pk/product/flexographic" },
        { keyword: "Digital Printing", url: "https://corrubox.com.pk/product/flexographic#dp" },
        { keyword: "Offset Printing", url: "https://corrubox.com.pk/product/flexographic#op" },
    ];

    const input = document.getElementById("query");
    const suggestionsBox = document.getElementById("suggestions");

    input.addEventListener("input", function () {
        const searchTerm = this.value.toLowerCase().trim();
        suggestionsBox.innerHTML = "";

        if (searchTerm.length === 0) {
            suggestionsBox.style.display = "none";
            return;
        }

        const matches = searchLinks.filter(item =>
            item.keyword.toLowerCase().includes(searchTerm)
        );

        if (matches.length > 0) {
            matches.forEach(item => {
                const li = document.createElement("li");
                li.textContent = item.keyword;
                li.onclick = () => {
                    window.location.href = item.url;
                };
                suggestionsBox.appendChild(li);
            });
            suggestionsBox.style.display = "block";
        } else {
            suggestionsBox.style.display = "none";
        }
    });

    // Hide suggestions when clicking outside
    document.addEventListener("click", (e) => {
        if (!e.target.closest(".searchBoxOuter")) {
            suggestionsBox.style.display = "none";
        }
    });

    let lastScrollTop = 0;
    const headerDesktop = document.querySelector(".desktopNav");
    const headerMobile = document.querySelector(".mobileNav");

    window.addEventListener("scroll", function () {
        let scrollTop = window.scrollY || document.documentElement.scrollTop;

        if (scrollTop > lastScrollTop) {
            // scrolling down → hide
            headerDesktop.classList.add("nav-hidden");
            headerMobile.classList.add("nav-hidden");
        } else {
            // scrolling up → show
            headerDesktop.classList.remove("nav-hidden");
            headerMobile.classList.remove("nav-hidden");
        }

        lastScrollTop = scrollTop <= 0 ? 0 : scrollTop; // avoid negative values
    });

    // Add active class to current nav link (for both desktop and mobile)
    document.addEventListener('DOMContentLoaded', () => {
        const navLinks = document.querySelectorAll('.nav-link');
        const currentPath = window.location.pathname;
        const currentHash = window.location.hash;

        navLinks.forEach(link => {
            let linkHref = link.getAttribute('href');
            if (linkHref === '#') {
                // For mobile products dropdown-toggle, treat as '/product'
                linkHref = 'https://corrubox.com.pk/product';
            }
            let linkUrl;
            try {
                linkUrl = new URL(linkHref, window.location.origin);
            } catch (e) {
                return; // Skip invalid URLs
            }
            const linkPath = linkUrl.pathname;
            const linkHash = linkUrl.hash;

            // Exact match for home
            if (linkPath === '/' || linkPath === '') {
                if (currentPath === '/' || currentPath === '') {link.classList.add('active');}
                return;
            }

            // For other links: if current path starts with link path (handles subpages)
            if (currentPath.startsWith(linkPath)) {
                // If there's a hash, check if it matches
                if (linkHash) {
                    if (linkHash === currentHash) {link.classList.add('active');}
                } else {link.classList.add('active');}
            }
        });

        // Optionally handle sub-links in dropdowns (e.g., dropNavigation or mobile dropdown-menu)
        const subLinks = document.querySelectorAll('.headerHeading a, .dropdown-item');
        subLinks.forEach(link => {
            let linkUrl;
            try {
                linkUrl = new URL(link.getAttribute('href'), window.location.origin);
            } catch (e) {return;}
            const linkPath = linkUrl.pathname;
            const linkHash = linkUrl.hash;

            if (currentPath === linkPath && (!linkHash || linkHash === currentHash)) {link.classList.add('active');}
        });
    });
</script>




<section class="banner innerBanner" style="background-image: url(https://corrubox.com.pk/images/banner/Products_-_Hero.png);">
    <div class="bannerInner">

        <h1 class="fs1" data-aos="zoom-in">Products
        </h1>
        <p class="fs2 w-50" data-aos="zoom-in">Explore a diverse range of packaging products designed for strength, sustainability, and customization.</p>
    </div>
</section>


<div class="container">
    <nav aria-label="breadcrumb">
        <ol class="breadcrumb">
            
            <li class="breadcrumb-item ">

                

                
                <a href="{base_url}">Home</a>
                

            </li>
            
            <li class="breadcrumb-item ">

                
                <i class="fa-solid fa-arrow-right"></i>
                

                
                <a href="{base_url}products">Products</a>
                

            </li>
            
        </ol>
    </nav>
</div>


<section class="sliderSection mt-5 mb-md-5 mb-0 pt-5 pb-0 py-md-5">
    <div class="container">
        
        <div class="row sliderSectionHeading mb-4">
            <div class="col-12 col-md-8">

                <h3 class="fs3" data-aos="fade-right">
                    Our Offering
                </h3>

                <p class="fs4" data-aos="fade-right" data-aos-delay="200">
                    
                </p>
            </div>

        </div>
        

        <div class="row  productSliderDesktop">

            <div class="sliderInner">
                
                <div class="sliderItem">
                    <div>
                        <img src="https://corrubox.com.pk/images/others/Our_Products_-_Home_1.png" class="img-fluid" alt="">
                        <div class="sliderItemHead">
                            <p class="fs5">
                                Corrugated Boxes
                            </p>
                            <a class="arrowBtn" href="https://corrubox.com.pk/product/corrugated-boxes">
                                <svg viewBox="0 0 384 512" class="svgIcon">
                                    <path
                                        d="M214.6 41.4c-12.5-12.5-32.8-12.5-45.3 0l-160 160c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 141.2V448c0 17.7 14.3 32 32 32s32-14.3 32-32V141.2L329.4 246.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-160-160z">
                                    </path>
                                </svg>
                            </a>

                        </div>
                    </div>
                </div>
                
                <div class="sliderItem">
                    <div>
                        <img src="https://corrubox.com.pk/images/gallery/fluting.png" class="img-fluid" alt="">
                        <div class="sliderItemHead">
                            <p class="fs5">
                                Fluting Paper 
                            </p>
                            <a class="arrowBtn" href="https://corrubox.com.pk/product/fluting-paper">
                                <svg viewBox="0 0 384 512" class="svgIcon">
                                    <path
                                        d="M214.6 41.4c-12.5-12.5-32.8-12.5-45.3 0l-160 160c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 141.2V448c0 17.7 14.3 32 32 32s32-14.3 32-32V141.2L329.4 246.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-160-160z">
                                    </path>
                                </svg>
                            </a>

                        </div>
                    </div>
                </div>
                
                <div class="sliderItem">
                    <div>
                        <img src="https://corrubox.com.pk/images/gallery/Flexo.png" class="img-fluid" alt="">
                        <div class="sliderItemHead">
                            <p class="fs5">
                                Flexographic Labels and Boxes
                            </p>
                            <a class="arrowBtn" href="https://corrubox.com.pk/product/flexographic">
                                <svg viewBox="0 0 384 512" class="svgIcon">
                                    <path
                                        d="M214.6 41.4c-12.5-12.5-32.8-12.5-45.3 0l-160 160c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 141.2V448c0 17.7 14.3 32 32 32s32-14.3 32-32V141.2L329.4 246.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-160-160z">
                                    </path>
                                </svg>
                            </a>

                        </div>
                    </div>
                </div>
                

            </div>
        </div>

        <div class="swiper productSlider">
            <div class="swiper-wrapper">
                
                <div class="swiper-slide">
                    <div class="sliderItem">
                        <div>
                            <img src="https://corrubox.com.pk/images/others/Our_Products_-_Home_1.png" class="img-fluid" alt="">
                            <div class="sliderItemHead">
                                <p class="fs5">
                                    Corrugated Boxes
                                </p>
                                <a class="arrowBtn" href="https://corrubox.com.pk/product/corrugated-boxes">
                                    <svg viewBox="0 0 384 512" class="svgIcon">
                                        <path
                                            d="M214.6 41.4c-12.5-12.5-32.8-12.5-45.3 0l-160 160c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 141.2V448c0 17.7 14.3 32 32 32s32-14.3 32-32V141.2L329.4 246.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-160-160z">
                                        </path>
                                    </svg>
                                </a>

                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="swiper-slide">
                    <div class="sliderItem">
                        <div>
                            <img src="https://corrubox.com.pk/images/gallery/fluting.png" class="img-fluid" alt="">
                            <div class="sliderItemHead">
                                <p class="fs5">
                                    Fluting Paper 
                                </p>
                                <a class="arrowBtn" href="https://corrubox.com.pk/product/fluting-paper">
                                    <svg viewBox="0 0 384 512" class="svgIcon">
                                        <path
                                            d="M214.6 41.4c-12.5-12.5-32.8-12.5-45.3 0l-160 160c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 141.2V448c0 17.7 14.3 32 32 32s32-14.3 32-32V141.2L329.4 246.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-160-160z">
                                        </path>
                                    </svg>
                                </a>

                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="swiper-slide">
                    <div class="sliderItem">
                        <div>
                            <img src="https://corrubox.com.pk/images/gallery/Flexo.png" class="img-fluid" alt="">
                            <div class="sliderItemHead">
                                <p class="fs5">
                                    Flexographic Labels and Boxes
                                </p>
                                <a class="arrowBtn" href="https://corrubox.com.pk/product/flexographic">
                                    <svg viewBox="0 0 384 512" class="svgIcon">
                                        <path
                                            d="M214.6 41.4c-12.5-12.5-32.8-12.5-45.3 0l-160 160c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L160 141.2V448c0 17.7 14.3 32 32 32s32-14.3 32-32V141.2L329.4 246.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3l-160-160z">
                                        </path>
                                    </svg>
                                </a>

                            </div>
                        </div>
                    </div>
                </div>
                
            </div>
            <div class="parallex-swiper-pagination"></div>
        </div>
    </div>
</section>


<section class="parallexSlider" style="padding: 0;">
    <div class="swiper parallexSwiper" style="width: 100%; height: 100%;">
        <div class="swiper-wrapper">

            
            <div class="swiper-slide"
                style="background-image: url('https://corrubox.com.pk/images/slider/Strong___Reliable.png'); background-size: cover; background-position: center; background-repeat: no-repeat; background-attachment: fixed; width: 100%; height: 100%;">

                <div
                    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 1;">
                </div>

                <div class="container h-100" style="position: relative; z-index: 2;">
                    <div
                        class="parallexSliderInner h-100 d-flex flex-column justify-content-center align-items-center text-center">
                        <h3 class="fs3 text-white mb-4" data-aos="fade-up">
                            Strong & Reliable
                        </h3>
                        <p class="fs2 text-white" data-aos="fade-up" data-aos-delay="200">
                            Strength and reliability define CorruBox (Pvt) Ltd. packaging. Engineered to withstand storage, transport, and handling challenges, our solutions deliver consistent protection at every stage of the supply chain, ensuring your products always arrive in perfect condition.
                        </p>
                    </div>
                </div>
            </div>
            
            <div class="swiper-slide"
                style="background-image: url('https://corrubox.com.pk/images/gallery/Tailored_for_you_-_Resized.png'); background-size: cover; background-position: center; background-repeat: no-repeat; background-attachment: fixed; width: 100%; height: 100%;">

                <div
                    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 1;">
                </div>

                <div class="container h-100" style="position: relative; z-index: 2;">
                    <div
                        class="parallexSliderInner h-100 d-flex flex-column justify-content-center align-items-center text-center">
                        <h3 class="fs3 text-white mb-4" data-aos="fade-up">
                            Tailored for You
                        </h3>
                        <p class="fs2 text-white" data-aos="fade-up" data-aos-delay="200">
                            No two businesses are the same, and neither are their packaging needs. That’s why we design custom solutions to meet the unique demands of every client, from shape and size to branding and sustainability preferences.
                        </p>
                    </div>
                </div>
            </div>
            
            <div class="swiper-slide"
                style="background-image: url('https://corrubox.com.pk/images/slider/Our_Green_Promise.png'); background-size: cover; background-position: center; background-repeat: no-repeat; background-attachment: fixed; width: 100%; height: 100%;">

                <div
                    style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); z-index: 1;">
                </div>

                <div class="container h-100" style="position: relative; z-index: 2;">
                    <div
                        class="parallexSliderInner h-100 d-flex flex-column justify-content-center align-items-center text-center">
                        <h3 class="fs3 text-white mb-4" data-aos="fade-up">
                            Our Green Promise
                        </h3>
                        <p class="fs2 text-white" data-aos="fade-up" data-aos-delay="200">
                            Our commitment to protecting products and the planet drives our use of 100% recycled paper, ensuring zero trees are cut. By reducing carbon emissions and reusing 70% of water, we create greener, sustainable packaging that safeguards both your goods and the environment.
                        </p>
                    </div>
                </div>
            </div>
            

        </div>

        <div class="parallex-swiper-pagination"
            style="position: absolute; bottom: 30px; left: 0; width: 100%; z-index: 10;"></div>
    </div>
</section>


<section>
    <div class="container py-5">
        
        <h3 class="fs3 text-center" data-aos="fade-right">
            Our Best Sellers
        </h3>
        <p class="w-50 mx-auto text-center mb-5" data-aos="fade-up" data-aos-delay="200">
            Our best-selling products are trusted across industries for their durability, eco-friendliness, and quality finish.
        </p>
        
        <div class="swiper bestSellerSlider">
            <div class="swiper-wrapper">
                
                <div class="swiper-slide">

                    <a class="sellerCard" href="https://corrubox.com.pk/product/corrugated-boxes#rsc">
                        <img src=" https://corrubox.com.pk/images/gallery/Regular_Slotted_-_Our_Best_Sellers.png" alt="">
                        <p class="fs5 d-flex justify-content-between align-items-center">
                            <span>
                                Regular Slotted Cartons
                            </span>
                            <i class="fa-solid fa-angle-right"></i>
                        </p>
                    </a>
                </div>
                
                <div class="swiper-slide">

                    <a class="sellerCard" href="https://corrubox.com.pk/product/paper#cp">
                        <img src=" https://corrubox.com.pk/images/banner/Fluting.png" alt="">
                        <p class="fs5 d-flex justify-content-between align-items-center">
                            <span>
                                Fluting Paper
                            </span>
                            <i class="fa-solid fa-angle-right"></i>
                        </p>
                    </a>
                </div>
                
                <div class="swiper-slide">

                    <a class="sellerCard" href="https://corrubox.com.pk/product/flexographic#dp">
                        <img src=" https://corrubox.com.pk/images/gallery/Final_Folded_Box_1.png" alt="">
                        <p class="fs5 d-flex justify-content-between align-items-center">
                            <span>
                                Folded Boxes
                            </span>
                            <i class="fa-solid fa-angle-right"></i>
                        </p>
                    </a>
                </div>
                

            </div>

        </div>
    </div>
</section>


    <footer>
        <div class="container ">

            <div class="row justify-content-between py-5">
                <div class="col-12 col-md-4">
                    <img src="https://corrubox.com.pk/images/logo/logo-white.png" class="mb-4" alt="">
                    <p class="fs10 mb-4">CorruBox (Pvt) Ltd. is Pakistan’s trusted name in sustainable packaging solutions, delivering high-quality corrugated boxes, paper products, and printing services with complete in-house capabilities.</p>
                    <div class="socialIcons">
                        <a href="">
                            <i class="fa-brands fa-facebook-f"></i>
                        </a>
                        <a href="">
                            <i class="fa-brands fa-linkedin-in"></i>
                        </a>
                        <a href="">
                            <i class="fa-brands fa-instagram"></i>
                        </a>
                    </div>
                </div>
                <div class="col-12 col-md-2">
                    <ul>
                        <li class="fs11 mb-4">Our Products</li>
                        <li class="fs10 mb-2"><a href="https://corrubox.com.pk/product/corrugated-boxes"> Corrugated Boxes</a></li>
                        <li class="fs10 mb-2"> <a href="https://corrubox.com.pk/product/fluting-paper">Fluting Paper</a> </li>
                        <li class="fs10 mb-2"> <a href="https://corrubox.com.pk/product/flexographic">Flexographic Labels and Boxes</a></li>
                    </ul>
                </div>
                <div class="col-12 col-md-2">
                    <ul>
                        <li class="fs11 mb-4">What we do</li>
                        <li class="fs10 mb-2"><a href="https://corrubox.com.pk/about-us">About Us</a></li>
                        <li class="fs10 mb-2"><a href="https://corrubox.com.pk/services">Services</a></li>
                        <li class="fs10 mb-2"><a href="https://corrubox.com.pk/career">Careers</a></li>
                        <li class="fs10 mb-2"><a href="https://corrubox.com.pk/contact-us">Contact Us</a></li>
                    </ul>
                </div>
                <div class="col-12 col-md-3">
                    <ul>
                        <li class="fs11 mb-4">Connect With Us</li>
                        <li class="fs10 mb-2"><i class="fa-solid fa-location-dot text-white"></i> Plot F 8, Eastern Zone
                            Bin
                            Qasim Town, Karachi</li>
                        <li class="fs10 mb-4"><i class="fa-solid fa-envelope"></i> <a
                                href="mailto:administration@corrubox.com.pk">administration@corrubox.com.pk</a> </li>
                        <li><a href="https://corrubox.com.pk/contact-us" class="btn1">021 34740376-80</a></li>
                    </ul>
                </div>
            </div>
            <hr>
            <div class="d-flex flex-column flex-md-row justify-content-between align-items-center py-4 gap-3">
    <p class="fs10 mb-0">© 2026 Corrubox.com All rights reserved.</p>
    
    <div class="fs10">
        <a href="https://corrubox.com.pk/privacy-policy/index.php" class="text-white text-decoration-none">Privacy Policy</a> 
        <span class="mx-2 text-secondary">|</span> 
        <a href="https://corrubox.com.pk/terms-and-condition/index.php" class="text-white text-decoration-none">Terms & Conditions</a>
    </div>
    
    <p class="fs10 mb-0">Designed & Developed by <a class="link1" href="https://www.sidat.net/" target="_blank">Sidat</a></p>
    </div>
    </div>

    </footer>
    <style>
.form-floating>label {
    top: 11px;
    left: 10px;
     height: 20px;
}
.form-floating>.form-control {
padding-top: 18px!important;
    padding-left: 12px!important;
   
height: calc(2.5rem + calc(var(--bs-border-width) * 2))
!important;
    line-height: 1.25;
        min-height: calc(2.5rem + calc(var(--bs-border-width) * 2));
}
#floatingTextarea2{
height: 200px!important;
}
</style>
     <script src="https://code.jquery.com/jquery-3.7.1.min.js"
        integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.9.2/umd/popper.min.js"
        integrity="sha512-2rNj2KJ+D8s1ceNasTIex6z4HWyOnEYLVC3FigGOmyQCZc2eBXKgOxQmo3oKLHyfcj53uz4QMsRCWNbLd32Q1g=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
        crossorigin="anonymous"></script>

    <script src="https://corrubox.com.pk/scripts/counter.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.5/js/lightbox.min.js"
        integrity="sha512-KbRFbjA5bwNan6DvPl1ODUolvTTZ/vckssnFhka5cG80JVa5zSlRPCr055xSgU/q6oMIGhZWLhcbgIC0fyw3RQ=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js"
        integrity="sha512-A7AYk1fGKX6S2SsHywmPkrnzTZHrgiVT7GcQkLGDe2ev0aWb8zejytzS8wjo7PGEXKqJOrjQ4oORtnimIRZBtw=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
        <script>
          AOS.init({
            duration: 1000,
        });
        $(document).ready(function () {
            let dropdownTimeout;

            $(".navDropDown, .dropNavigation").mouseenter(function () {
                clearTimeout(dropdownTimeout);
                $(".dropNavigation").stop(true, true).slideDown(200);
            });

            $(".navDropDown, .dropNavigation").mouseleave(function () {
                dropdownTimeout = setTimeout(function () {
                    $(".dropNavigation").stop(true, true).slideUp(200);
                }, 200); // small delay (200ms) prevents flicker
            });
        });
        </script>
        
        <script>

  function onClick(e) {

    e.preventDefault();

    grecaptcha.enterprise.ready(async () => {

      const token = await grecaptcha.enterprise.execute('6LejqjstAAAAAEFD8fWRTSvDSnw1so-9fdnE7FOG', {action: 'LOGIN'});

    });

  }

</script>



<script>
    var swiper = new Swiper(".bestSellerSlider", {
        slidesPerView: 3,
        spaceBetween: 20,
        breakpoints: {
            320: {
                slidesPerView: 1,
            },
            1200: {
                slidesPerView: 2,
            },
            1400: {
                slidesPerView: 3,
            },
        },
        navigation: {
            nextEl: ".footerSwiper-button-next",
            prevEl: ".footerSwiper-button-prev",
        },
    });
</script>

</body>
</html>

<script>
    var swiper = new Swiper(".parallexSwiper", {
        autoplay: {
            delay: 5000,
        },
        pagination: {
            el: ".parallex-swiper-pagination",
        },
    });
</script>