body {
                    background-image: url('./BG/Doodle_QP.jpg');
                    background-size: cover;
                    height: 100vh;
                }
                
                html {
                    scroll-padding-top: 120px; /* Adjust this value according to your navbar height */
                  }

                 :root {
                    --lighttext: #4b4b4b;
                    --buttonfont: #ffffff;
                    --medtext: #3f3f3f;
                    --darktext: #272727;
                    --lightband: #108997;
                    --brand: #dc3c10;
                    --dbrand: #a72d0b;
                }
                
                * {
                    margin: 0;
                    padding: 0;
                    box-sizing: border-box;
                    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
                }

                /*Link Hover (Orange)*/
                a.cust-hover {
                    position: relative;
                    cursor: pointer;
                    text-decoration: none;
                    justify-content: left;
                    width: 20%;
                    color: var(--brand);
                    transition: all 0.3s;
                }
                
                a.cust-hover:hover {
                    color: var(--dbrand);
                }
                
                a.cust-hover:after {
                    content: '';
                    position: absolute;
                    width: 100%;
                    transform: scaleX(0);
                    height: 1px;
                    bottom: 0;
                    left: 0;
                    background-color: var(--brand);
                    transform-origin: bottom right;
                    transition: transform 0.25s ease-out;
                }
                
                a.cust-hover:hover:after {
                    transform: scaleX(1);
                    transform-origin: bottom left;
                }
                /* Parameters Box
                
                .container {
                    position: relative;
                    width: 40%;
                    height: 80px;
                    border-radius: 40px;
                    overflow: hidden;
                    margin-top: 10px;
                    border: 3px solid #07737f;
                }
                
                .left-half,
                .right-half {
                    position: absolute;
                    top: 0;
                    height: 100%;
                    background-color: var(--lightband);
                    transition: width 1s;
                }
                
                .left-half {
                    left: 0;
                    width: 50%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    padding-left: 20px;
                }
                
                .right-half {
                    right: 0;
                    width: 50%;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    padding-right: 20px;
                }
                
                .text {
                    color: #fff;
                    font-weight: 400;
                    transition: all 0.7s;
                    cursor: pointer;
                    font-size: 27px;
                }
                
                .text:hover {
                    letter-spacing: 0.05rem;
                }
                
                .divider {
                    position: absolute;
                    width: 1px;
                    height: 60%;
                    background-color: rgba(255, 255, 255, 0.5);
                    /* faint white line
                    top: 50%;
                    left: 50%;
                    transform: translate(-50%, -50%);
                } */
                /*Smaller Icons*/
                
                img.smaller {
                    display: none;
                }
                
                div.brand {
                    display: block;
                    width: 26%;
                    top: 0;
                    left: 0;
                    justify-content: left;
                }
                /* Logo Name */
                
                div.brand h1 {
                    position: absolute;
                    display: inline-block;
                    color: #dc3c10;
                    font-family: "Book Antiqua", Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif;
                    font-size: 32px;
                    font-style: normal;
                    font-variant: normal;
                    font-weight: 600;
                    z-index: 7;
                    margin-bottom: 0rem;
                    margin-top: 8px;
                }
                /* Logo Sub-Name */
                
                div.brand h6 {
                    position: absolute;
                    display: inline-block;
                    color: var(--medtext);
                    font-family: "Book Antiqua", Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif;
                    font-size: 14px;
                    font-style: normal;
                    font-variant: normal;
                    z-index: 7;
                    margin-bottom: 0rem;
                    margin-top: 45px;
                    margin-left: 3px;
                    letter-spacing: 0.1em;
                }
                /* Logo */
                
                div.brand img {
                    padding: 0;
                    z-index: 7;
                    position: relative;
                    padding-top: 0;
                    width: 60px;
                    height: 70px;
                    padding-right: 10px;
                }
                /* Navigation Bar */
                
                div.nav {
                    top: 0;
                    left: 0;
                    background-color: white;
                    position: fixed;
                    padding: 0 7vh 0 7vh;
                    height: 100px;
                    display: flex;
                    margin: auto;
                    overflow: hidden;
                    align-items: center;
                    width: 100%;
                    -webkit-box-shadow: 0px 3px 18px -6px rgba(0, 0, 0, 0.75);
                    -moz-box-shadow: 0px 3px 18px -6px rgba(0, 0, 0, 0.75);
                    box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.15);
                    z-index: 18;
                }
                /* Links Block */
                
                .nav ul {
                    margin-left: 20%;
                }
                /* Link Styling */
                
                li.nav-item {
                    align-items: center;
                    justify-content: center;
                    margin-left: 1rem;
                    margin-right: 1rem;
                    letter-spacing: 0.1rem;
                    z-index: 7;
                }
                
                li.nav-item a {
                    position: relative;
                    color: var(--lighttext);
                    font-family: "Book Antiqua", Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif;
                    font-size: 17px;
                    font-variant: small-caps;
                    transition: 0.3s;
                    letter-spacing: 0.1em;
                }
                /* Link Animation */
                
                li.nav-item a:hover {
                    color: var(--darktext);
                    letter-spacing: 0.05em;
                }
                
                li.nav-item a::before {
                    content: "";
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 50%;
                    height: 100%;
                    opacity: 0;
                    border-left: solid 1px #272727;
                    border-radius: 20px 0px 0px 20px;
                    transition: all 0.7s;
                }
                
                li.nav-item a::after {
                    content: "";
                    position: absolute;
                    top: 0;
                    right: 0;
                    width: 50%;
                    overflow: hidden;
                    height: 100%;
                    opacity: 0;
                    border-right: solid 1px #272727;
                    border-radius: 0px 20px 20px 0px;
                    transition: all 0.7s;
                }
                
                li.nav-item a:hover:before {
                    content: "";
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 80%;
                    overflow: hidden;
                    height: 100%;
                    opacity: 100;
                    border-left: solid 1px #272727;
                    border-radius: 20px 0px 0px 20px;
                }
                
                li.nav-item a:hover:after {
                    content: "";
                    position: absolute;
                    top: 0;
                    right: 0;
                    width: 80%;
                    height: 100%;
                    opacity: 100;
                    border-right: solid 1px #272727;
                    border-radius: 0px 20px 20px 0px;
                }
                /* Carousel Styling */
                
                .carousel-container {
                    left: 50%;
                    transform: translate(-50%);
                    margin-top: 100px;
                    height: 500px;
                    position: relative;
                    width: 100%;
                    overflow: hidden;
                    background-color: #000000;
                }
                
                .carousel {
                    display: flex;
                    transition: transform 0.5s ease-in-out;
                }
                
                .slide {
                    min-width: 100%;
                    box-sizing: border-box;
                    position: relative;
                }
                
                .slide img {
                    position: relative;
                    left: 50%;
                    transform: translate(-50%);
                    width: 100%;
                    display: block;
                    object-fit: cover;
                }
                
                .caption {
                    z-index: 12;
                    position: absolute;
                    top: 47vh;
                    left: 5vw;
                    color: rgb(245, 245, 245);
                    font-size: 32px;
                    letter-spacing: 0.1rem;
                    font-weight: bold;
                    text-shadow: 2px 2px 10px rgba(31, 31, 31, 0.8);
                }
                
                button {
                    position: absolute;
                    top: 50%;
                    transform: translateY(-50%);
                    background-color: rgba(0, 0, 0, 0.5);
                    color: white;
                    border: none;
                    font-size: 24px;
                    padding: 10px;
                    cursor: pointer;
                    z-index: 10;
                }
                
                button.prev {
                    left: 10px;
                }
                
                button.next {
                    right: 10px;
                }
                /*Other Body Styling*/
                
                div.para {
                    position: relative;
                    margin-top: 1%;
                }
                
                div.para img.left {
                    position: absolute;
                    top: 50%;
                    -ms-transform: translateY(-50%);
                    transform: translateY(-50%);
                    height: 60px;
                    width: 105px;
                    right: 2%;
                }
                
                div.para img.right-cust1 {
                    position: absolute;
                    top: 58%;
                    -ms-transform: translateY(-50%);
                    transform: translateY(-50%);
                    height: 60px;
                    width: 105px;
                    left: 2%;
                }
                
                div.para img.right-cust2 {
                    position: absolute;
                    top: 50%;
                    -ms-transform: translateY(-50%);
                    transform: translateY(-50%);
                    height: 60px;
                    width: 105px;
                    left: 2%;
                }
                /* Card1 - About Us*/
                
                div.card.card1 {
                    position: relative;
                    padding: 24px 32px;
                    width: 70%;
                    border-radius: 0 100px 100px 0;
                    border: none;
                    box-shadow: 0px 0px 12px 7px rgba(0, 0, 0, 0.1);
                    transition: all 0.7s;
                    margin-top: 15px;
                }
                
                div.card.card1 h3 {
                    position: relative;
                    margin-left: 5%;
                    font-weight: 700;
                    margin-bottom: 1%;
                    color: #3b3b3b;
                }
                
                div.card.card1 p.about-content {
                    width: 80%;
                    font-size: 18px;
                    letter-spacing: 0.05rem;
                    margin-left: 5%;
                }
                
                div.card.card1 p.about-content-more {
                    width: 80%;
                    font-size: 18px;
                    letter-spacing: 0.05rem;
                    margin-left: 5%;
                    transition: all 0.4s;
                }
                
                a.about-button {
                    position: relative;
                    cursor: pointer;
                    text-decoration: none;
                    justify-content: left;
                    font-size: 20px;
                    margin-left: 5%;
                    width: 20%;
                    color: var(--brand);
                    transition: all 0.3s;
                }
                
                a.about-button:hover {
                    color: var(--dbrand);
                }
                
                a.about-button:after {
                    content: '';
                    position: absolute;
                    width: 100%;
                    transform: scaleX(0);
                    height: 1px;
                    bottom: 0;
                    left: 0;
                    background-color: var(--brand);
                    transform-origin: bottom right;
                    transition: transform 0.25s ease-out;
                }
                
                a.about-button:hover:after {
                    transform: scaleX(1);
                    transform-origin: bottom left;
                }
                
                .band11 {
                    position: absolute;
                    top: 0;
                    left: 0;
                    height: 100%;
                    width: 4%;
                    background-color: var(--brand);
                    border: none;
                }
                
                .band12 {
                    position: absolute;
                    top: 0;
                    left: 4%;
                    height: 100%;
                    width: 1.5%;
                    margin-left: 0;
                    background-color: var(--lightband);
                    border: none;
                    transition: all 0.3s;
                }
                /* Card2 - Products */
                
                div.card.card2 {
                    margin-left: auto;
                    margin-right: 0;
                    position: relative;
                    padding: 24px 32px;
                    width: 70%;
                    border-radius: 100px 0px 0px 100px;
                    margin-top: 50px;
                    border: none;
                    box-shadow: 0px 0px 12px 7px rgba(0, 0, 0, 0.1);
                    transition: all 0.7s;
                }
                
                div.card.card2 h2 {
                    position: absolute;
                    margin-left: 11%;
                    font-weight: 700;
                    color: #3b3b3b;
                }
                
                div.card.card2 p.product-content {
                    width: 80%;
                    font-size: 18px;
                    letter-spacing: 0.05rem;
                    margin-top: 50px;
                    margin-left: 12%;
                }
                
                span.semi-bold {
                    font-weight: 600;
                    color: #000000;
                }
                
                div.card.card2 ul {
                    transition: all 0.4s;
                    width: 80%;
                    font-size: 18px;
                    letter-spacing: 0.05rem;
                    margin-left: 12%;
                }
                
                .product-content-more {
                    transition: all 0.4s;
                    width: 80%;
                    font-size: 18px;
                    letter-spacing: 0.05rem;
                    margin-left: 12%;
                    margin-bottom: 0;
                }
                
                div.card.card2 a.product-button {
                    cursor: pointer;
                    text-decoration: none;
                    margin-bottom: 32px;
                    justify-content: left;
                    font-size: 20px;
                    margin-left: 12%;
                    width: 20%;
                    background-color: transparent;
                    border: none;
                    color: var(--brand);
                }
                
                a.product-button {
                    position: relative;
                    cursor: pointer;
                    text-decoration: none;
                    justify-content: left;
                    font-size: 20px;
                    margin-left: 5%;
                    width: 20%;
                    color: var(--brand);
                    transition: all 0.3s;
                }
                
                a.product-button:hover {
                    color: var(--dbrand);
                }
                
                a.product-button:after {
                    content: '';
                    position: absolute;
                    width: 100%;
                    transform: scaleX(0);
                    height: 1px;
                    bottom: 0;
                    left: 0;
                    background-color: var(--brand);
                    transform-origin: bottom right;
                    transition: transform 0.25s ease-out;
                }
                
                a.product-button:hover:after {
                    transform: scaleX(1);
                    transform-origin: bottom left;
                }
                
                .band21 {
                    position: absolute;
                    right: 0;
                    top: 0;
                    height: 100%;
                    width: 4%;
                    background-color: var(--brand);
                    border: none;
                }
                
                .band22 {
                    position: absolute;
                    right: 4%;
                    top: 0;
                    height: 100%;
                    width: 1.5%;
                    margin-left: 0;
                    background-color: var(--lightband);
                    border: none;
                    transition: all 0.3s;
                }
                /* Card3 - Delivery */
                
                div.card.card3 {
                    position: relative;
                    padding: 24px 32px;
                    width: 50%;
                    border-radius: 0 100px 100px 0;
                    margin-top: 50px;
                    border: none;
                    box-shadow: 0px 0px 12px 7px rgba(0, 0, 0, 0.1);
                    transition: all 0.7s;
                }
                
                div.card.card3 h2 {
                    position: absolute;
                    margin-left: 5%;
                    font-weight: 700;
                    color: #3b3b3b;
                }
                
                div.card.card3 p.delivery-content {
                    width: 80%;
                    font-size: 18px;
                    letter-spacing: 0.05rem;
                    margin-top: 50px;
                    margin-left: 5%;
                }
                
                div.card.card3 ul li {
                    font-size: 18px;
                    letter-spacing: 0.05rem;
                    margin-left: 5%;
                    width: 80%;
                }
                
                div.card.card3 p.delivery-content-more {
                    transition: all 0.4s;
                    width: 80%;
                    font-size: 18px;
                    letter-spacing: 0.05rem;
                    margin-left: 5%;
                }
                
                div.card.card3 a.delivery-button {
                    cursor: pointer;
                    text-decoration: none;
                    margin-bottom: 32px;
                    justify-content: left;
                    font-size: 20px;
                    margin-left: 5%;
                    width: 20%;
                    background-color: transparent;
                    border: none;
                    color: var(--brand);
                }
                
                .band31 {
                    position: absolute;
                    top: 0;
                    left: 0;
                    height: 100%;
                    width: 4%;
                    background-color: var(--brand);
                    border: none;
                }
                
                .band32 {
                    position: absolute;
                    top: 0;
                    left: 4%;
                    height: 100%;
                    width: 1.5%;
                    margin-left: 0;
                    background-color: var(--lightband);
                    border: none;
                    transition: all 0.3s;
                }
                /* Card4 - Contact */
                
                div.card.card4 {
                    margin-left: auto;
                    margin-right: 0;
                    margin-bottom: 10vh;
                    position: relative;
                    padding: 24px 32px;
                    width: 55%;
                    border-radius: 100px 0px 0px 100px;
                    margin-top: 50px;
                    border: none;
                    box-shadow: 0px 0px 7px 2px rgba(0, 0, 0, 0.1);
                    transition: all 0.7s;
                }
                
                div.card.card4 h2 {
                    position: absolute;
                    margin-left: 13%;
                    font-weight: 700;
                    color: #3b3b3b;
                }
                
                div.card.card4 p.enquiry-content {
                    width: 80%;
                    font-size: 18px;
                    letter-spacing: 0.05rem;
                    margin-top: 50px;
                    margin-left: 14%;
                    margin-bottom: 0;
                }
                
                div.card.card4 p.enquiry-content2 {
                    width: 80%;
                    font-size: 18px;
                    letter-spacing: 0.05rem;
                    margin-left: 14%;
                    line-height: 3rem;
                }
                
                div.card.card4 p.enquiry-content a {
                    position: relative;
                    cursor: pointer;
                    text-decoration: none;
                    justify-content: left;
                    font-size: 18px;
                    width: 20%;
                    color: var(--brand);
                    transition: all 0.3s;
                }
                
                div.card.card4 p.enquiry-content i {
                    color: var(--medtext)
                }
                
                div.card.card4 p.enquiry-content a:hover {
                    color: var(--dbrand);
                }
                
                div.card.card4 p.enquiry-content a:after {
                    margin: 0;
                    content: '';
                    position: absolute;
                    width: 100%;
                    transform: scaleX(0);
                    height: 1px;
                    bottom: 0;
                    left: 0;
                    background-color: var(--dbrand);
                    transform-origin: bottom right;
                    transition: transform 0.25s ease-out;
                }
                
                div.card.card4 p.enquiry-content a:hover:after {
                    transform: scaleX(1);
                    transform-origin: bottom left;
                }
                
                .band41 {
                    position: absolute;
                    right: 0;
                    top: 0;
                    height: 100%;
                    width: 4%;
                    background-color: var(--brand);
                    border: none;
                }
                
                .band42 {
                    position: absolute;
                    right: 4%;
                    top: 0;
                    height: 100%;
                    width: 1.5%;
                    margin-left: 0;
                    background-color: var(--lightband);
                    border: none;
                }
                
                a.submit-query {
                    border-radius: 20px;
                    padding: 7px 18px;
                    border: none;
                    width: 25%;
                    background-color: var(--brand);
                    color: var(--buttonfont);
                    transition: all 0.3s;
                    text-decoration: none;
                }
                
                a.submit-query:hover {
                    background-color: var(--dbrand);
                    color: var(--buttonfont);
                }
                
                .brand-text {
                    display: inline;
                }
                
                .nav-links {
                    list-style: none;
                    display: flex;
                    margin: 0;
                    padding: 0;
                    z-index: 24;
                }
                
                .nav-links li {
                    margin-left: 20px;
                }
                
                .nav-links a {
                    text-decoration: none;
                    color: #fff;
                }
                
                .popup-menu {
                    display: none;
                }
                
                .burger-menu {
                    display: none;
                    font-size: 2.5em;
                    background: none;
                    border: none;
                    color: #535353;
                    cursor: pointer;
                }
                /*Media Queries*/
                
                @media only screen and (max-width: 1920px) {
                    .carousel-container {
                        height: 650px;
                    }
                    .slide img {
                        object-fit: contain;
                    }
                    .caption {
                        top: 570px;
                        font-size: 40px;
                        text-shadow: 0px 0px 7px rgba(255, 255, 255, 0.3)
                    }
                    div.para img.left.cust-about {
                        right: 36px;
                    }
                    div.card.card1 {
                        width: 55%;
                    }
                    div.card.card2 {
                        width: 55%;
                    }
                    div.card.card3 {
                        width: 55%;
                    }
                    div.card.card4 {
                        width: 55%;
                    }
                }
                
                @media only screen and (max-width: 1730px) {
                    .carousel-container {
                        height: 600px;
                    }
                    .caption {
                        top: 520px;
                    }
                    div.card.card1 {
                        width: 65%;
                    }
                    div.card.card2 {
                        width: 65%;
                    }
                    div.card.card3 {
                        width: 55%;
                    }
                    div.card.card4 {
                        width: 55%;
                    }
                }
                
                @media only screen and (max-width: 1598px) {
                    .carousel-container {
                        height: 550px;
                    }
                    .caption {
                        top: 470px;
                    }
                }
                
                @media only screen and (max-width: 1467px) {
                    .nav ul {
                        margin-left: 14%;
                    }
                    .carousel-container {
                        height: 500px;
                    }
                    .caption {
                        top: 420px;
                    }
                    div.card.card1 {
                        width: 70%;
                    }
                    div.card.card2 {
                        width: 70%;
                    }
                    div.card.card3 {
                        width: 55%;
                    }
                    div.card.card4 {
                        width: 55%;
                    }
                    div.para img.left.cust-about {
                        right: 40px;
                    }
                }
                
                @media only screen and (max-width: 1400px) {
                    .nav ul {
                        margin-left: 12%;
                    }
                }
                
                @media only screen and (max-width: 1330px) {
                    .carousel-container {
                        height: 470px;
                    }
                    .caption {
                        top: 390px;
                    }
                    .nav ul {
                        position: relative;
                        right: -4%;
                    }
                }
                
                @media only screen and (max-width: 1255px) {
                    div.para img.left.cust-about {
                        right: 37px;
                    }
                    .carousel-container {
                        height: 440px;
                    }
                    .caption {
                        top: 380px;
                        font-size: 30px;
                    }
                    li.nav-item {
                        margin-left: 0;
                        margin-right: 0;
                    }
                    div.nav {
                        padding: 0vh 0vh 0vh 7vh;
                    }
                    div.card.card1 {
                        width: 75%;
                    }
                    div.card.card2 {
                        width: 75%;
                    }
                    div.card.card3 {
                        width: 55%;
                    }
                    div.card.card4 {
                        width: 55%;
                    }
                }
                
                @media only screen and (max-width: 1170px) {
                    .carousel-container {
                        height: 420px;
                    }
                    .caption {
                        top: 360px;
                    }
                }
                
                @media only screen and (max-width: 1150px) {
                    /*Disable the collapsible buttons and fill screen with larger width for cards*/
                    .about-button {
                        display: none;
                    }
                    .product-button {
                        display: none;
                    }
                    div.card.card1 {
                        width: 90%;
                    }
                    div.card.card2 {
                        width: 90%;
                    }
                    div.card.card3 {
                        width: 65%;
                    }
                    div.card.card4 {
                        width: 65%;
                    }
                    .collapse:not(.show) {
                        display: block;
                    }
                }
                
                @media only screen and (max-width: 1115px) {
                    .carousel-container {
                        height: 380px;
                    }
                    .caption {
                        top: 320px;
                    }
                }
                
                @media only screen and (max-width: 1080px) {
                    div.brand img {
                        padding-right: 0;
                    }
                    div.brand {
                        width: 70%;
                    }
                    div.brand-text h6 {
                        margin-top: 45px;
                    }
                    div.nav {
                        height: 100px;
                    }
                    .nav ul {
                        display: none;
                        width: 100%;
                        margin: 0;
                        margin-top: 50px;
                    }
                    .carousel-container {
                        margin-top: 100px;
                    }
                    li.nav-item a:hover:before {
                        display: none;
                    }
                    li.nav-item a:hover:after {
                        display: none;
                    }
                    .popup-menu {
                        display: block;
                        position: fixed;
                        top: 0;
                        right: -100%;
                        width: 300px;
                        height: 100%;
                        background-color: rgba(68, 68, 68, 0.92);
                        transition: right 0.7s ease;
                        z-index: 1000;
                    }
                    .popup-menu.show {
                        right: 0;
                    }
                    .popup-nav-links {
                        margin-top: 15%;
                        list-style: none;
                        padding: 20px;
                    }
                    .popup-nav-links li {
                        margin-bottom: 20px;
                    }
                    .popup-nav-links a {
                        text-decoration: none;
                        color: #fff;
                        font-size: 17px;
                        position: relative;
                        font-family: "Book Antiqua", Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif;
                        font-variant: small-caps;
                        transition: 0.3s;
                        letter-spacing: 0.1em;
                    }
                    .nav-links {
                        display: none;
                    }
                    .burger-menu {
                        display: block;
                        background-color: none;
                        right: 5%;
                    }
                    .close-btn {
                        align-self: flex-end;
                        font-size: 1.9em;
                        background: none;
                        border: none;
                        color: #fff;
                        cursor: pointer;
                        top: 55px;
                        right: 40px;
                        font-weight: 400;
                    }
                    .close-btn:hover {
                        color: #c2c2c2;
                    }
                    .popup-nav-links a:hover {
                        color: #c9c9c9;
                    }
                }
                
                @media only screen and (max-width: 1060px) {
                    .carousel-container {
                        height: 360px;
                    }
                    .caption {
                        top: 300px;
                    }
                }
                
                @media only screen and (max-width: 955px) {
                    .carousel-container {
                        height: 320px;
                    }
                    .caption {
                        top: 260px;
                    }
                    div.para img.left.cust-about {
                        right: 34px;
                    }
                }
                
                @media only screen and (max-width: 850px) {
                    .carousel-container {
                        height: 290px;
                    }
                    .caption {
                        top: 230px;
                    }
                    div.card.card1 {
                        width: 95%;
                        border-top-right-radius: 50px;
                        border-bottom-right-radius: 50px;
                    }
                    div.card.card2 {
                        width: 95%;
                        border-top-left-radius: 50px;
                        border-bottom-left-radius: 50px;
                    }
                    div.card.card3 {
                        width: 75%;
                        border-top-right-radius: 50px;
                        border-bottom-right-radius: 50px;
                    }
                    div.card.card4 {
                        width: 75%;
                        border-top-left-radius: 50px;
                        border-bottom-left-radius: 50px;
                    }
                }
                
                @media only screen and (max-width: 800px) {
                    div.card.card1 p.about-content {
                        width: 70%;
                    }
                    div.card.card1 p.about-content-more {
                        width: 70%;
                    }
                    div.card.card2 p.product-content {
                        width: 80%;
                        margin-left: 17%;
                    }
                    p.product-content-more {
                        width: 80%;
                        margin-left: 21%;
                    }
                    div.card.card3 {
                        width: 80%;
                        border-top-right-radius: 50px;
                        border-bottom-right-radius: 50px;
                    }
                    div.card.card4 {
                        width: 80%;
                        border-top-left-radius: 50px;
                        border-bottom-left-radius: 50px;
                    }
                    div.card.card2 h2 {
                        margin-left: 21%;
                    }
                    span.semi-bold {
                        margin-left: 23%;
                    }
                    div.card.card2 p.product-content {
                        width: 75%;
                        margin-left: 23%;
                    }
                    p.product-content-more {
                        width: 75%;
                        margin-left: 23%;
                    }
                    li.prods {
                        margin-left: 8%;
                    }
                    div.card.card3 {
                        width: 85%;
                        border-top-right-radius: 50px;
                        border-bottom-right-radius: 50px;
                    }
                }
                
                @media only screen and (max-width: 770px) {
                    .carousel-container {
                        height: 270px;
                    }
                    .caption {
                        top: 225px;
                        font-size: 24px;
                    }
                }
                
                @media only screen and (max-width: 720px) {
                    .carousel-container {
                        height: 245px;
                    }
                    .caption {
                        top: 200px;
                    }
                }
                
                @media only screen and (max-width: 640px) {
                    div.para img.left.cust-about {
                        right: 31px;
                    }
                    .carousel-container {
                        height: 220px;
                    }
                    .caption {
                        top: 180px;
                        font-size: 22px;
                        text-shadow: 0px 0px 20px rgba(36, 36, 36, 1)
                    }
                    div.card.card1 p.about-content {
                        width: 70%;
                    }
                    div.card.card1 p.about-content-more {
                        width: 70%;
                    }
                    div.card.card2 h2 {
                        margin-left: 21%;
                    }
                    span.semi-bold {
                        margin-left: 24%;
                    }
                    div.card.card2 p.product-content {
                        width: 70%;
                        margin-left: 24%;
                    }
                    p.product-content-more {
                        width: 70%;
                        margin-left: 23%;
                    }
                    li.prods {
                        margin-left: 8%;
                    }
                    div.card.card3 {
                        width: 95%;
                        border-top-right-radius: 50px;
                        border-bottom-right-radius: 50px;
                    }
                    div.card.card4 {
                        width: 95%;
                        border-top-left-radius: 50px;
                        border-bottom-left-radius: 50px;
                    }
                    div.card.card3 p.delivery-content {
                        width: 70%;
                    }
                    div.card.card4 p.enquiry-content {
                        width: 70%;
                        margin-left: 24%;
                        margin-top: 32px;
                    }
                    div.card.card4 p.enquiry-content2 {
                        width: 70%;
                        margin-left: 24%;
                    }
                    div.card.card4 h2 {
                        margin-left: 21%;
                    }
                    div.card.card3 p.delivery-content {
                        margin-top: 29px;
                        margin-left: 6%;
                        margin-bottom: 0.01em;
                    }
                }
                
                @media only screen and (max-width: 595px) {
                    div.brand h1 {
                        font-size: 24px;
                    }
                    div.brand-text h6 {
                        margin-top: 38px;
                    }
                    .carousel-container {
                        height: 200px;
                    }
                    .caption {
                        top: 160px;
                        font-size: 20px;
                    }
                    button {
                        font-size: 15px;
                    }
                }
                
                @media only screen and (max-width: 580px) {
                    div.brand h1 {
                        font-size: 20px;
                        margin-top: 11px;
                    }
                    div.brand-text h6 {
                        margin-top: 35px;
                        font-size: 12px;
                    }
                    .carousel-container {
                        height: 200px;
                    }
                    .caption {
                        top: 160px;
                        font-size: 20px;
                    }
                    div.brand img {
                        width: 50px;
                        height: 60px;
                    }
                    div.brand {
                        position: absolute;
                        left: 4%;
                        top: 50%;
                        transform: translateY(-50%);
                    }
                }
                
                @media only screen and (max-width: 564px) {
                    div.para img.left.cust-about {
                        right: 28px;
                    }
                    div.nav {
                        height: 80px;
                    }
                    div.brand h1 {
                        font-size: 18px;
                        margin-top: 11px;
                    }
                    div.brand-text h6 {
                        margin-top: 35px;
                        font-size: 12px;
                    }
                    .carousel-container {
                        margin-top: 80px;
                    }
                    div.brand img {
                        width: 50px;
                        height: 60px;
                    }
                    div.brand {
                        position: absolute;
                        left: 4%;
                        top: 50%;
                        transform: translateY(-50%);
                    }
                    div.card.card3 p.delivery-content {
                        width: 55%;
                    }
                    div.card.card3 ul li {
                        width: 50%
                    }
                }
                
                @media only screen and (max-width: 530px) {
                    .carousel-container {
                        height: 180px;
                    }
                    .caption {
                        top: 140px;
                        font-size: 18px;
                    }
                }
                
                @media only screen and (max-width: 500px) {
                    div.nav {
                        height: 80px;
                    }
                    div.brand h1 {
                        font-size: 18px;
                        margin-top: 11px;
                    }
                    div.brand-text h6 {
                        margin-top: 35px;
                        font-size: 12px;
                    }
                }
                
                @media only screen and (max-width: 476px) {
                    div.para img.left.cust-about {
                        right: 12px;
                    }
                    div.para img.left {
                        right: -2%;
                    }
                    .carousel-container {
                        height: 160px;
                    }
                    .caption {
                        top: 130px;
                        font-size: 16px;
                    }
                }
                
                @media only screen and (max-width: 430px) {
                    div.para img.left {
                        right: 0%;
                    }
                    img.large {
                        display: none;
                    }
                    img.smaller {
                        display: block;
                        width: 40px;
                    }
                    div.para img.left {
                        right: -8%;
                    }
                    div.card.card3 p.delivery-content {
                        width: 75%;
                        margin-top: 29px;
                        margin-left: 6%;
                        margin-bottom: 0.01em;
                    }
                    div.card.card4 p.enquiry-content {
                        width: 70%;
                        margin-left: 24%;
                        margin-top: 32px;
                    }
                    div.card.card4 p.enquiry-content2 {
                        width: 70%;
                        margin-left: 24%;
                    }
                    div.card.card4 h2 {
                        margin-left: 21%;
                    }
                    div.para img.right-cust1 {
                        left: 0%;
                    }
                }
                
                @media only screen and (max-width: 422px) {
                    .carousel-container {
                        height: 140px;
                    }
                    .caption {
                        top: 115px;
                        font-size: 13px;
                    }
                }
                
                @media only screen and (max-width: 380px) {
                    div.brand h1 {
                        font-size: 16px;
                        margin-top: 11px;
                    }
                    div.brand-text h6 {
                        margin-top: 35px;
                        font-size: 9px;
                    }
                }
                
                @media only screen and (max-width: 370px) {
                    .carousel-container {
                        height: 120px;
                    }
                    .caption {
                        top: 95px;
                        font-size: 12px;
                    }
                }
                
                @media only screen and (max-width: 340px) {
                    .carousel-container {
                        height: 120px;
                    }
                    .caption {
                        top: 95px;
                        font-size: 11px;
                    }
                }
                
                @media only screen and (max-width: 317px) {
                    .carousel-container {
                        height: 110px;
                    }
                    .caption {
                        top: 85px;
                        font-size: 10px;
                    }
                }
                
                .text-block {
                    font-size: 1.5rem;
                    text-align: center;
                    color: #fafafa;
                    font-weight: 500;
                }
                
                #companies,
                #year {
                    display: inline-block;
                    font-weight: 700;
                }
                /* Responsive block styling */
                
                .responsive-block {
                    background: rgb(195, 52, 12);
                    background: linear-gradient(53deg, rgba(220, 60, 16, 1) 0%, rgba(220, 60, 16, 1) 34%, rgba(217, 165, 152, 1) 48%, rgba(220, 60, 16, 1) 60%, rgba(220, 60, 16, 1) 100%);
                    /* Background color */
                    border: 4px solid #b32f0a;
                    /* Border color and width */
                    padding: 10px;
                    /* Padding inside the block */
                    margin: auto;
                    margin-top: 10px;
                    /* Margin outside the block */
                    max-width: 35%;
                    /* Ensure it doesn’t exceed the container width */
                    width: auto;
                    /* Make the width responsive */
                    border-radius: 80px;
                    /* Optional: Rounded corners */
                    text-align: center;
                    /* Center text alignment */
                    font-family: Arial, sans-serif;
                    /* Optional: Font family */
                }
                /* Responsive text */
                
                .text-block {
                    display: inline-block;
                    /* Makes the span behave like a block for padding */
                }
                
                @media only screen and (max-width: 1135px) {
                    .responsive-block {
                        max-width: 40%;
                    }
                }
                
                @media only screen and (max-width: 1005px) {
                    .responsive-block {
                        max-width: 45%;
                    }
                }
                
                @media only screen and (max-width: 900px) {
                    .responsive-block {
                        max-width: 50%;
                    }
                }
                
                @media only screen and (max-width: 810px) {
                    .responsive-block {
                        max-width: 55%;
                    }
                }
                
                @media only screen and (max-width: 730px) {
                    .responsive-block {
                        max-width: 60%;
                    }
                }
                
                @media only screen and (max-width: 650px) {
                    .responsive-block {
                        max-width: 70%;
                    }
                }
                
                @media only screen and (max-width: 550px) {
                    .responsive-block {
                        max-width: 70%;
                    }
                    .text-block {
                        font-size: 1.3rem;
                    }
                }
                
                @media only screen and (max-width: 480px) {
                    .responsive-block {
                        max-width: 80%;
                    }
                }
                
                @media only screen and (max-width: 420px) {
                    .responsive-block {
                        max-width: 90%;
                    }
                    .text-block {
                        font-size: 1.3rem;
                    }
                }
                
                @media only screen and (max-width: 370px) {
                    .responsive-block {
                        max-width: 90%;
                    }
                    .text-block {
                        font-size: 1.2rem;
                    }
                }
                
                @media only screen and (max-width: 370px) {
                    .responsive-block {
                        max-width: 90%;
                    }
                    .text-block {
                        font-size: 1.2rem;
                        padding: 5px;
                    }
                }

                footer {
                    background-color: #2b3537; /* Slightly darker shade of #146D77 */
                    color: #ecf0f1;
                    padding: 15px;
                    text-align: center;
                    font-size: 16px;
                    line-height: 1.5;
                }
        
                footer .footer-container {
                    max-width: 1000px;
                    margin: 0 auto;
                }
        
                footer .footer-container p {
                    margin: 5px 0;
                }
        
                /*Address Hover (White Link)*/
                a.cust-hover-2 {
                    position: relative;
                    cursor: pointer;
                    text-decoration: none;
                    justify-content: left;
                    width: 20%;
                    color: var(--brand);
                    transition: all 0.3s;
                    color: #fff;
                }
                
                a.cust-hover-2:hover {
                    color: #fff;
                }
                
                a.cust-hover-2:after {
                    content: '';
                    position: absolute;
                    width: 100%;
                    transform: scaleX(0);
                    height: 1px;
                    bottom: 0;
                    left: 0;
                    background-color: #fff;
                    transform-origin: bottom right;
                    transition: transform 0.25s ease-out;
                }
                
                a.cust-hover-2:hover:after {
                    transform: scaleX(1);
                    transform-origin: bottom left;
                }
        
                @media (max-width: 480px) {
                    footer {
                        font-size: 12px;
                        padding: 10px;
                    }
                }