@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');


:root{
    --header-height: 3.5rem;

    /*========== Colors ==========*/
    /*Color mode HSL(hue, saturation, lightness)*/

    --primary: #FF0000;
    --primary-light:#FFE6E6;
    --orange-light:#ff9532;
    --secondary:#010E19;
    --btn-border: #687375;
    --btn-hover: #F5F7F7;


    --black-color: hsl(220, 24%, 12%);
    --black-color-light: hsl(220, 24%, 15%);
    --black-color-lighten: hsl(220, 20%, 18%);
    --white-color: #fff;
    --body-color: white;
    --light-gray:#fafafa;
    --light-blue-gray:#F8F9FD;
    --light-gray-2:#EFF1F6;

    /*========== Font and typography ==========*/
    /*.5rem = 8px | 1rem = 16px ...*/
    --body-font: "Inter", sans-serif;
    --normal-font-size: .925rem;
    --normal-font-size-lg:1rem;
    --normal-font-size-md:.8rem;
    --h1-font-size: 3.750rem;
    --h2-font-size: 2.5rem;
    --h3-font-size: 2rem;
    --h4-font-size: 1.5rem;
    --h5-font-size: 1.2rem;

    /*========== Font weight ==========*/
    --font-thin:300;
    --font-regular: 500;
    --font-semi-bold: 600;
    --font-bold:700;
    --font-black:800;

    /* =========Spacing============*/
    --spacing-y:5rem;
    --spacing-mobile-y: 5rem 1rem;
    --space-y:4rem;
    --spacing-x:4rem;

    /*========== z index ==========*/
    --z-tooltip: 10;
    --z-fixed: 100;
}

/*=============== CSS RESET ===============*/
*{
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

body {
    font-family: var(--body-font);
    font-size: var(--normal-font-size);
    background-color: var(--body-color);
}

ul {
    list-style: none;
    /* Color highlighting when pressed on mobile devices */
    /*-webkit-tap-highlight-color: transparent;*/
}

a {
    text-decoration: none;
}
ol,
ul{
    padding-left: 0;
}

/* Fonts =========================*/
/* 1REM === 16px */
p{
  font-size: var(--normal-font-size);  
}
h1{
    font-size: 3rem;
    font-weight: var(--font-bold);
    margin-bottom: 0 !important;
}
h2{
    font-size: 2.5rem;
    font-weight: var(--font-semi-bold);
    margin-bottom: 0 !important;
}
h3{
    font-size: 2rem;
    font-weight: var(--font-regular);
    margin-bottom: 0 !important;
}
h4{
    font-size: 1.5rem;
    font-weight: var(--font-semi-bold);
    margin-bottom: 0 !important;
}
h4{
    font-size: 1.2rem;
    font-weight: var(--font-semi-bold);
    margin-bottom: 0 !important;
}
h5{
    font-size: 1rem;
    font-weight: var(--font-semi-bold);
    margin-bottom: 0 !important;
}
.font-xs{font-size: .65rem;}
.font-sm{font-size: .7rem;}
.font-md{font-size: .8rem;}
.font-lg{font-size: .9rem;}
.font-xl{font-size: .95rem;}
.font-xxl{font-size: 1rem;}
.font-xxlg{font-size: 1.1rem;}
.font-xxxl{font-size: 1.7rem;}

.fw-300{font-weight: 300;}
.fw-400{font-weight: 400;}
.fw-500{font-weight: 500;}
.fw-600{font-weight: 600;}
.fw-700{font-weight: 700;}
.fw-800{font-weight: 800;}
.fw-900{font-weight: 900;}

.uppercase{
    text-transform: uppercase;
}
.lowercase{
    text-transform: lowercase;
}
.capitalize{
    text-transform: capitalize;
}

.ul{
    text-decoration: underline solid 1px rgb(0, 0, 0);
    text-underline-offset: 2px;
}
.rounded-md{
    border-radius: 1rem;
}
.rounded-sm{
    border-radius: .5rem;
}
.hr-light{
    color: #c9c9c9;
}

.alert__warning{
    background-color: #f3e5db;
    padding: 1.5rem;
    margin: .6rem 0;
    border-radius: .2rem;
    display: flex;
    align-items: center;
    gap: 2rem;
}
.alert__warning i{
    color: #FC7E1D;
}

.error {
    display: flex;
    align-items: center;
    flex-direction: row;
    background-color: rgba(255, 145, 60, 0.216);
    color: var(--primary);
    border: 1px solid var(--orange-light);
    padding: .8rem 2rem;
    font-size: .8rem;
    border-radius: .3rem;
    font-weight: 500;
}

.success {
    background-color: #bbffdb;
    color: rgb(0, 91, 2);
    border: 1px solid rgb(0, 208, 3);
    border-radius: .3rem;
    padding: .8rem 2rem;
    font-size: .8rem;
}

/* Fonts End=========================*/


/* Buttons =============================*/
.btn_default{
    font-size: var(--normal-font-size);
    font-weight: var(--font-semi-bold);
    border-radius: .3rem;
    padding: .5rem 1.5rem;
    border: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: fit-content;
}
.primary_main {
    background-color: var(--primary);
    color: white;
}
.secondary_main {
    background-color: white;
    color: var(--secondary);
    border: 2px solid white;
}
.header__btn{
    background-color: var(--primary-light);
    padding: .5rem 1rem;
    border-radius: .5rem;
    color: var(--primary);
    text-transform: capitalize;
    font-size: .85rem;
}
.dark__main{
    background-color: var(--secondary);
    color: white;
}

.line_button{
    background-color: rgb(255, 230, 230);
    color: var(--primary);
    border: none;
}
.border_line{
    background-color: #00000000;
    color: white;
    border: 1px solid white;
}


/* Toast Confirmation */
.toast{
    background: #FF0000;
    background: linear-gradient(113deg, rgba(255, 0, 0, 0.47) 0%, rgba(255, 30, 0, 0.67) 100%);
    border: 0 !important;
    color: white;
    opacity: 1;
    border-radius: .8rem !important;
}
.toast-body{
    font-size: .8rem;
    font-weight: 300;
    color: white;
    padding: 1rem;
    opacity: 1;
}
.toast-header{
    border: 0 !important;
    background: #FF0000;
    background: linear-gradient(113deg, rgba(255, 0, 0, 0.47) 0%, rgba(255, 30, 0, 0.67) 100%);
    opacity: 1;
    border-radius: .8rem !important;
    color: white;
    padding: 1rem;
    font-size: .8rem;
    font-weight: 500;
}
strong{
    font-weight: 500;
}
.cw{
    color: white !important;
}
/* Toast Confirmation End*/


/* Btn Slider Css */
/* From Uiverse.io by andrew-demchenk0 */
.btn__slide {
    position: relative;
    width: 200px;
    height: 38px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* border: 1px solid var(--primary); */
    border: none;
    background-color: var(--primary-light);
    overflow: hidden;
    border-radius: .4rem;
}

.btn__slide,
.button__icon,
.button__text {
    transition: all 0.3s;
}

.btn__slide .button__text {
    transform: translateX(22px);
    color: var(--primary);
    font-weight: 600;
}

.btn__slide .button__icon {
    position: absolute;
    transform: translateX(150px);
    height: 100%;
    width: 50px;
    background-color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn__slide .svg {
    width: 20px;
    fill: #fff;
}

.btn__slide:hover {
    background: var(--primary);
}

.btn__slide:hover .button__text {
    color: transparent;
}

.btn__slide:hover .button__icon {
    width: 198px;
    transform: translateX(0);
}

.btn__slide:active .button__icon {
    background-color: #146c54;
}

.btn__slide:active {
    border: 1px solid #146c54; }

/* Buttons End==========================*/

.bg-light{
    background-color: var(--light-gray-2);
}
.bg-light2{
    background-color: var(--light-gray);
}

.home-link{
    color: white;
    font-size: .9rem;
    letter-spacing: .01rem;
    font-weight: var(--font-semi-bold);
}
.remove_row_padding{
    padding-right: 0 !important;
    padding-left: 0 !important;
}


/* Navigation Menu Design ==============*/

/*=============== REUSABLE CSS CLASSES ===============*/
.nav__container {
    max-width: 1200px;
    margin-inline: 1.5rem;
}

/*=============== HEADER ===============*/
.header {
    top: 0;
    left: 0;
    width: 100%;
    background-color: white;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
    /* box-shadow: 0 2px 16px hsla(220, 32%, 8%, .3); */
    z-index: var(--z-fixed);
}
.header__top{
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
}
.top__nav{
    background-color: var(--secondary);
    padding: .5rem 0;
}
.header__top .email,
.header__top a,
.header__top .phone{
    color: white;
    font-size: .75rem;
    font-weight: var(--font-thin);
}
.right__nav{
    display: flex;
    flex-direction: row;
    gap: 1rem;
}
.right__nav .top__icon{
    background-color: #27283b;
    color: white;
    padding: .1rem .4rem;
    border-radius: .2rem;
}
.upper__icon{
    background-color: #27283b;
    color: white;
    padding: .3rem;
    border-radius: .2rem;
    font-size: .8rem;
}

/*=============== NAV ===============*/
.nav {
    height: var(--header-height);
}

.nav__burger,
.nav__close{
    font-size:1.6rem !important;
}
.nav__data {
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav__logo {
    display: inline-flex;
    align-items: center;
    column-gap: .25rem;
    font-weight: var(--font-semi-bold);
    /* Color highlighting when pressed on mobile devices */
    /*-webkit-tap-highlight-color: transparent;*/
}

.nav__logo i {
    font-weight: initial;
    font-size: 1.25rem;
}

.nav__toggle {
    position: relative;
    width: 32px;
    height: 32px;
    color: #010E19 !important;
}

.nav__burger,
.nav__close {
    position: absolute;
    width: max-content;
    height: max-content;
    inset: 0;
    margin: auto;
    font-size: 1.25rem;
    cursor: pointer;
    transition: opacity .1s, transform .4s;
}

.nav__close {
    opacity: 0;
}

/* Navigation for mobile devices */
@media screen and (max-width: 1118px) {
    .nav__menu {
        position: absolute;
        left: 0;
        top: 2.5rem;
        width: 100%;
        height: calc(100vh - 3.5rem);
        overflow: auto;
        pointer-events: none;
        opacity: 0;
        transition: top .4s, opacity .3s;
    }

    .nav__menu::-webkit-scrollbar {
        width: 0;
    }

    .nav__list {
        background-color: white;
        padding-top: 1rem;
    }
    .nav__data {
        width: 100%;
    }
}

.nav__link {
    color: var(--secondary);
    background-color: white;
    font-weight: var(--font-semi-bold);
    font-size: var(--normal-font-size);
    padding: 1.25rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color .3s;
}

.nav__link:hover {
    background-color: var(--black-color-light);
}

/* Show menu */
.show-menu {
    opacity: 1;
    top: 3.5rem;
    pointer-events: initial;
}

/* Show icon */
.show-icon .nav__burger {
    opacity: 0;
    transform: rotate(90deg);
}

.show-icon .nav__close {
    opacity: 1;
    transform: rotate(90deg);
}

/*=============== DROPDOWN ===============*/
.dropdown__item {
    cursor: pointer;
}

.dropdown__arrow {
    font-size: 1.25rem;
    font-weight: initial;
    transition: transform .4s;
}

.dropdown__link,
.dropdown__sublink {
    padding: 1rem 1.8rem;
    color: var(--white-color);
    border-bottom: 1px solid #24272F;
    background-color: var(--secondary);
    font-size: var(--normal-font-size-md);
    width: 100%;
    display: flex;
    align-items: center;
    column-gap: .5rem;
    font-weight: var(--font-regular);
    transition: background-color .3s;
}
.dropdown__link span{
    font-size: .75rem;
    transition: transform .2s ease-in-out;
}
.dropdown__link:hover span{
    transform: translateX(.5rem);
}

.dropdown__link i,
.dropdown__sublink i {
    font-size: 1.25rem;
    font-weight: initial;
}

.dropdown__link:hover,
.dropdown__sublink:hover {
    background-color: var(--black-color);
}

.dropdown__menu,
.dropdown__submenu {
    max-height: 0;
    overflow: hidden;
    transition: max-height .4s ease-out;
}

/* Show dropdown menu & submenu */
.dropdown__item:hover .dropdown__menu,
.dropdown__subitem:hover>.dropdown__submenu {
    max-height: 1000px;
    transition: max-height .4s ease-in;
}

/* Rotate dropdown icon */
.dropdown__item:hover .dropdown__arrow {
    transform: rotate(180deg);
}

/*=============== DROPDOWN SUBMENU ===============*/
.dropdown__add {
    margin-left: auto;
}

.dropdown__sublink {
    background-color: var(--black-color-lighten);
}

/*=============== BREAKPOINTS ===============*/
/* For small devices */
@media screen and (max-width: 340px) {
    .nav__container {
        margin-inline: 1rem;
    }

    .nav__link {
        padding-inline: 1rem;
    }
}

/* For large devices */
@media screen and (min-width: 1118px) {
    .nav__container {
        margin-inline: auto;
    }

    .nav {
        height: calc(var(--header-height) + 2rem);
        display: flex;
        justify-content: space-between;
    }

    .nav__toggle {
        display: none;
    }

    .nav__list {
        height: 100%;
        display: flex;
        column-gap: 3rem;
    }

    .nav__link {
        height: 100%;
        padding: 0;
        justify-content: initial;
        column-gap: .25rem;
    }

    .nav__link:hover {
        background-color: transparent;
    }

    .dropdown__item,
    .dropdown__subitem {
        position: relative;
    }

    .dropdown__menu,
    .dropdown__submenu {
        max-height: initial;
        width: 100%;
        overflow: initial;
        position: absolute;
        left: 0;
        top: 6rem;
        opacity: 0;
        pointer-events: none;
        transition: opacity .3s, top .3s;
    }

    .dropdown__link,
    .dropdown__sublink {
        padding-inline: 1rem 1rem;
        white-space: nowrap;
    }

    .dropdown__subitem .dropdown__link {
        padding-inline: 1rem;
    }

    .dropdown__submenu {
        position: absolute;
        left: 100%;
        top: .5rem;
    }

    /* Show dropdown menu */
    .dropdown__item:hover .dropdown__menu {
        opacity: 1;
        top: 5.5rem;
        pointer-events: initial;
        transition: top .3s;
    }

    /* Show dropdown submenu */
    .dropdown__subitem:hover>.dropdown__submenu {
        opacity: 1;
        top: 0;
        pointer-events: initial;
        transition: top .3s;
    } }
    
/* Navigation Menu Design End ==========*/


/* Hero Home Section */
#hero-home{
    height: 100vh;
    width: 100%;
    position: relative;
    overflow: hidden;
    /* -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;     */
    /* filter: grayscale(20%); */
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.763) 0%, rgba(0, 0, 0, 0.526) 50%, rgba(0, 0, 0, 0.283) 100%), url('../imgs/images/hero-images/hero-home-main-2.jpg');
    background-size: cover;
    background-attachment: fixed;
}

#header_caption_home{
    max-width: 1200px;
    width: 100%;
    display: flex;
    padding: 12rem 0;
    align-items: center;
    margin: 0 auto;
    color: white;
}

@media (max-width:600px){
    h1{
        font-size: 2.2rem;
        font-weight: 400;
    }
    .caption p{
        font-size: 1rem;
    }

    #contact__caption, #services__home, #transport, #quick__turn
     {
        padding: var(--spacing-mobile-y) !important;
        }
    #shipping__home, #cargo__solutions{
        padding: 0 1rem;
        }
    .footer__wrapper {
        padding: 4rem 1rem !important;       
    }
    .footer_social {
        align-items: center;
        justify-content: start !important;
    }
    .header__about{
        padding: var(--spacing-mobile-y) !important;
    }
    .statement {
        margin-top: 1rem !important;   
    }

    .customs__wrapper,
    .rock__wrapper,
    .tax__consultancy__wrapper,
    .freight__wrapper,
    .transport__wrapper {
        padding: 8rem 1rem !important;
    }
    .quote__cta {
        padding: 3rem !important;
    }
    #customs {
        padding: var(--spacing-mobile-y) !important;   
    }
    .sub__cust,
    .freight {
        padding: 5rem 1rem !important;   
    }
    #tax {
        padding: 5rem 1rem !important;
    }
    .quotation_banner {
        padding: .5rem !important;
        border-right:none !important;
    }

    .card_wrapper {
        margin: 0 5px 35px !important;
        padding: 20px 2px !important;
    }
    .swiper-slider-button{
        display: none !important;
    }
    .contact_side {
        top: 60% !important;
        right: -12% !important;
    }
    .nav__lg{
        max-width:120px;
        width: 100%;
    }


}

@media (max-width:600px){
    #header_caption_home{
        padding: 7rem 1rem;
    }
}

#header_caption_home .caption{
    max-width: 700px;
    width: 100%;
}
#header_caption_home .caption__links{
    display: flex;
    align-items: center;
}

/* Hero Home Section */
#contact__caption{
    padding: var(--space-y);
    background-color: #F7F7F7;
}
#contact__caption .caption{
    max-width: 1200px;
    width: 100%;
    margin: auto;
}
#contact__caption .contact__card{
    padding: 1.5rem;
    background-color: white;
    color: var(--secondary);
    border-radius: 1rem;
    height: 100%;
    box-shadow: 0px 3px 6px 0px rgba(140, 149, 159, 0.067);
}
#contact__caption .card-header i{
    font-size: 1.5rem;
    padding: .5rem;
    background-color: var(--light-gray-2);
    border-radius: 1rem;
}


/* Service Home Page ===============================*/
#services__home{
    padding: var(--spacing-y);
}
#services__home .services__wrapper{
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
}

.card__serve img{
    border-radius: 1rem;
}
.card__serve .arrow{
    width: 15px;
    height: 15px;
    rotate: -45deg;
    transition: rotate .3s ease-in-out;
}
.card__serve{
    cursor: pointer;
}
.card__serve a:hover  .arrow,
.card__serve a:focus .arrow{
    rotate: 0deg;
}
.card__serve a span{
    transition: padding-left .3s ease-in-out;
}
.card__serve a:hover span{
    padding-left: .5rem;
}

.caption__links a .arrow {
    rotate: -45deg !important;
    transition: rotate .3s ease-in-out;
}
.caption__links a:hover .arrow,
.caption__links a:focus .arrow {
    rotate: 0deg !important;
}
.caption__links a span {
    transition: padding-left .3s ease-in-out;
}

.caption__links a:hover span {
    padding-left: .5rem;
}

/* Service Home Page End ===========================*/


/* Transport Home ==================================*/
#transport{
    padding: var(--spacing-y);
    background-color: #f7f7f7;
}
#transport .transport__wrapper__main .header_transport{
    max-width: 1200px;
    width: 100%;
    margin: auto;
}
.transport__wrapper__main{
    max-width: 1200px;
    width: 100%;
    margin: auto;
}
.transport__card{
    height: 100%;
}
.transport_section img{
    border-top-right-radius: 1rem;
    border-top-left-radius: 1rem;
}

 .card_wrapper{
    max-width: 1200px;
    margin: 0 60px 35px;
    padding: 20px 10px;
    overflow: hidden;
 }
.card_list .card_item .card_link{
    user-select: none;
    display: block;
    height: 100%;
    background-color: white;
    border-radius: 1rem;
    text-decoration: none;
    color: black;
}
.card_item .card_link .body_item{
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
    gap: 1rem;
}
.card_list .card_link .card_image{
    width: 100%;
    aspect-ratio: 16/9;
    object-fit: cover;
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
}
.card_list .card_link .badge {
    color: var(--primary);
    font-size: .8rem;
    background-color: var(--primary-light);
    padding: .6rem 1rem;
    font-weight: var(--font-semi-bold);
    width: fit-content;
}
.card_wrapper .swiper-pagination-bullet{
    height: 13px;
    width: 13px;
    opacity: .2;
    background-color: var(--secondary);
}
.card_wrapper .swiper-pagination-bullet-active{
    opacity: 1;
}
.card_wrapper .swiper-slider-button{
    color: var(--secondary);
    opacity: .2;
    margin-top: -35px;
}
/* Transport Home End ==============================*/

/* Quick Turn Around Home Page =====================*/
#quick__turn{
    padding: var(--spacing-y);
}
#quick__turn .quick__wrapper{
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
}
.quick__wrapper img{
    border-radius: 1rem;
}

/* Shipping  Home Page End =================*/

/* Quick Turn Around Home Page =====================*/
#shipping__home{
    padding-bottom: 6rem;
}
#shipping__home .shipping__home__wrapper{
    max-width: 1200px;
    width: 100%;
    margin: auto;
}
.shipping__home__wrapper img{
    border-radius: 1rem;
}

/* Quick Turn Around Home Page End =================*/

/*=========== Quotation Request ====================*/
.quote__wrapper{
    max-width: 1200px;
    width: 100%;
    margin: auto;
    padding: 5rem;
    backface-visibility: hidden;
    /* filter: grayscale(20%); */
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.27) 0%, rgba(0, 0, 0, 0.227) 50%, rgba(0, 0, 0, 0) 100%), url('../imgs/images/quote-bg.jpg');
    background-size: cover;
    background-attachment: fixed;
    border-radius: 1rem;
}
.quote__card{
    background-color: white;
    padding: 3rem;
    border-radius: 1rem;
}
.form__control,
input
{
    padding: .7rem .5rem;
    font-size: .8rem;
    font-weight: var(--font-regular);
    border: 1px solid #e8e8e8 !important;
    width: 100%;
    border-radius: .2rem;
}
.form__control:focus,
.quote__wrapper input:focus,
.form-select:focus{
    border: 1px solid var(--orange-light) !important;
    box-shadow: 0 1px 3px 0 rgba(27, 24, 79, 0.126), 0 1px 2px -1px rgba(1, 0, 56, 0.048);
}
.form-select{
    padding: .7rem .5rem;
    font-size: .8rem;
    font-weight: var(--font-regular);
    border: 1px solid #e8e8e8 !important;
    width: 100%;
    border-radius: .2rem;
}

.radio-group {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-flow: row wrap;
    gap: 30px;
    padding: 10px 30px 0px 0px;
}

/* Quote Radio Button Design */
input[type="radio"] {
    display: none;
}

label {
    display: block;
    cursor: pointer;
}

label span {
    display: inline-flex;
    align-items: center;
    font-size: .8rem;
    border-radius: 31px;
    transition: .25s ease;
}

label span:hover,
input[type="radio"]:checked+span {
    background-color: var(--gray-light);
}

label span:before {
    content: "";
    background-color: #fff;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    margin-right: 10px;
    transition: .25s ease;
    box-shadow: inset 0 0 0 1px rgb(222, 222, 222);
}

input[type="radio"]:checked+span:before {
    box-shadow: inset 0 0 0 6px var(--primary);
}
/* Quote Radio Button Design */

/*=========== Quotation Request ====================*/


/* Global footer design ======================================*/
#footer{
    margin-top: 3rem;
}
.footer__wrapper{
    /* border-top: 1px solid var(--light-gray-2); */
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 3rem 0;    
}
.reserved{
    font-size: .7rem;
}
.footer_social{
    display: flex;
    align-items: center;
    justify-content: end;
    gap: 1rem;
}
.footer_social i{
    background-color: var(--light-gray-2);
    padding: .1rem .8rem;
    font-size: 1.3rem;
    border-radius: .8rem;
}
.subscribe__btn{
    padding: .7rem 1rem;
    border: 1px solid var(--primary);
    background-color: var(--primary);
    color: white;
    border-radius: .5rem;
    text-transform: uppercase;
}
.footer__wrapper .form__control{
    border: 1px solid var(--primary) !important;
    border-radius: .5rem;
    padding: .7rem 1rem;
}
.footer-list ul{
    display: flex;
    flex-direction: column;
    gap: .5rem;
    font-size: .85rem;
    color: var(--secondary);
}
.footer-list li:hover{
    text-decoration: underline 1px #24272F;
    text-underline-offset: 3px;
}
.footer-list li a{
    color: var(--secondary);
}

/* Lower footer */
.lower__footer{
    background-color: var(--secondary);
    padding: 1rem .5rem;
    display: flex;
    justify-content: center;
}
.lower__footer .lower__text{
    color: white;
    font-size: .8rem;
}
.lower__footer .lower__text a{
    color: var(--primary);
}
/* Global footer design End===================================*/



/* Contact Page ===============================================*/
#contact__hero {
    width: 100%;
    /* overflow: hidden; */
}

#contact__header {
    max-width: 1200px;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    margin: 0 auto;
    color: var(--secondary);
    margin-top: 4rem;
}

.contact__wrapper{
    padding: .5rem 1.5rem;
    box-shadow: 0 7px 15px 0 rgba(0, 0, 0, 0.054), 0 1px 4px 0 rgba(0, 0, 0, 0.06);
    border-radius: 2rem;
}

.contact_banner {
    background: #273666;
    background: linear-gradient(90deg, rgb(37, 49, 87) 0%, rgb(27, 31, 71) 100%);
    border-radius: 1.9rem;
    padding: 2rem;
    color: white;
}

.contact__details {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1rem;
}
.contact__footer{
    display: flex;
    align-items: center;
    gap: 2rem;
}

/* Contact Page End============================================*/



/* Projects Page ===============================================*/
#projects__hero {
    height: 50vh;
    width: 100%;
    /* aspect-ratio: 16/9; */
    position: relative;
    overflow: hidden;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
    filter: grayscale(20%);
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.707) 0%, rgba(0, 0, 0, 0.556) 50%, rgba(0, 0, 0, 0) 100%), url('../imgs/images/hero-images/half-hero-1.jpg');
    background-size: cover;
    background-attachment: fixed;
}

#projects__header {
    max-width: 1200px;
    width: 100%;
    height: 100%;
    padding-top: 6rem;
    display: flex;
    align-items: center;
    margin: 0 auto;
    color: white;
}
/* Projects Page End============================================*/


/* Quoation Page ===============================================*/
#quotation__hero {
    width: 100%;
}

#quotation__header {
    max-width: 1200px;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    margin: 0 auto;
    color: var(--secondary);
    margin-top: 5rem;
}

.quotation__wrapper {
    padding: .5rem 1.5rem;
    box-shadow: 0 7px 15px 0 rgba(0, 0, 0, 0.054), 0 1px 4px 0 rgba(0, 0, 0, 0.06);
    border-radius: 2rem;
    border-left: solid 5px #ff00001f;
    border-top: solid 5px #ff00001f;
}

.quotation_banner {
    padding: 2rem;
    color: var(--secondary);
    border-right: 1px solid #e7e7e7;
}

.quotation__details {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1rem;
}

.quotation__footer {
    display: flex;
    align-items: center;
    gap: 2rem;
}
.nav-pills{
    width: fit-content;
    gap: 1rem;
    margin-bottom: 0 !important;
}

.nav-pills .nav-link{
    background-color: white;
    color: var(--secondary);
    border-radius: .5rem;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.075);
    border: 1px solid white;
}
.nav-pills .nav-link:hover{
    border: 1px solid var(--orange-light);
}
.nav-pills .active{
    background-color: white !important;
    color: var(--secondary) !important;
    border: 1px solid var(--secondary);
}
.nav-pills .active:hover{
    border: 1px solid var(--secondary);
}

.quotation__wrapper ul{
    padding-bottom: 0rem !important;
}


/* Quoation Page End============================================*/



/* About Page ===============================================*/
#rockheralds__hero {
    width: 100%;
}

#rockheralds__header {
    padding: 0;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.707) 0%, rgba(0, 0, 0, 0.556) 50%, rgba(0, 0, 0, 0) 100%), url('../imgs/images/hero-images/half-hero-1.jpg');
}
.rock__wrapper{
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    color: rgb(255, 255, 255);
    padding: 8rem 0;
}
.bread__crumb__section{
    background-color: #ffffff;
    padding: .7rem 0;
    border-bottom: 1px solid #efefef;
}
.crumb{
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
}
.crumb .breadcrumb{
    margin-bottom: 0px !important;
}
.header__about{
    padding: var(--space-y);
}
.breadcrumb-item {
    color: var(--primary);
    font-weight: 500;
    font-size: .85rem;
}
.breadcrumb-item a{
    color: var(--primary);
}
.about__wrapper{
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
}

.card__mission{
    padding: 1.5rem;
    background-color: var(--light-blue-gray);
    color: var(--secondary);
    border-radius: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    height: 100%;
}
.cards__mission{
    padding: 0;
    margin: 0 auto;
    padding-top: 2rem;
}
.card__mission i{
    color: var(--secondary);
    font-size: 1.2rem;
    background-color: rgb(220, 221, 234);
    border-radius: .5rem;
    color: var(--secondary);
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.card__mission__header{
    display: flex;
    align-items: center;
    gap: 1rem;
}
.statement{
    margin-top: 5rem;
}
/* About Page End============================================*/


/* Cargo Shipping Page ===============================================*/
#customs__hero {
    width: 100%;
}

#customs__header {
    padding: 0;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.707) 0%, rgba(0, 0, 0, 0.556) 50%, rgba(0, 0, 0, 0) 100%), url('../imgs/images/customs-clearing/cargo__hero.jpg');
    background-position: center;
    background-size: cover;
}

.customs__wrapper,
.rock__wrapper,
.tax__consultancy__wrapper,
.transport__wrapper
 {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    color: white;
    padding: 8rem 0;
}
#customs{
    padding: var(--space-y);
}
.customs__main{
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 0;
}
.customs_thread{
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.tarrifs_thread{
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.sub__cust{
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 5rem 0;
}
.duty-list{
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.duty-list i{
    font-size: .7rem;
}
.duty-list .duty-li{
    display: flex;
    flex-direction: row;
    align-items: center;
}
/* Cargo Shipping Page End============================================*/



/* Tac Consultancy Page ===============================================*/
#tax__consultancy__hero {
    width: 100%;
}

#tax__consultancy__header {
    padding: 0;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.707) 0%, rgba(0, 0, 0, 0.556) 50%, rgba(0, 0, 0, 0) 100%), url('../imgs/images/consultancy/consultancy__hero.jpg');
    background-position: center;
}

#tax {
    padding: var(--space-y);
}

.tax__main {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 0;
}
.tax_thread {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.list{
    display: flex;
    flex-direction: row;
    align-items: start;
    gap: .5rem;
}
.tax-list i{
    padding-top: .25rem;
    font-size: .6rem;
}
.ul-list{
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding-top: .5rem;
}
/* Tac Consultancy Page End============================================*/


/* Transport Solutions Page ===============================================*/
#transport__solutions__hero {
    width: 100%;
}

#transport__solutions__header {
    padding: 0;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.707) 0%, rgba(0, 0, 0, 0.556) 50%, rgba(0, 0, 0, 0) 100%), url('../imgs/images/transport/hero__transport.jpg');
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.transport__wrapper {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
}


.statement {
    margin-top: 5rem;
}
.transport{
 padding-right: 0;
 padding-left: 0;
}

figure{
    margin: 0;
    position: relative;
    height: 100%;
    width: 100%;
    border-radius: 1rem;
}
figure figcaption{
    position: absolute;
    inset: 0;
    display: flex;
    padding: 1rem;
    align-items: end;
    width: 100%;
}
figure footer{
    padding: 2rem;
    background-color: white;
    width: 100%;
    border-radius: 1rem;
}
/* Transport Solutions Page End============================================*/


/* Global Call to action Quote Request */
.quote__cta{
    background: #FF0000;
    background: linear-gradient(113deg, rgba(255, 0, 0, 0.61) 0%, rgba(255, 0, 0, 0.14) 100%);    margin-top: 5rem;
    padding: 4rem 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    border-radius: 2rem;
}
/* Global Call to action Quote Request End*/


/* Sticky Button */
.sticky_contact_btn {
    font-size: .75rem;
    text-transform: capitalize;
    font-weight: 400;
    background-color: var(--primary);
    border: none;
    padding: .5rem 1.1rem;
    border-radius: .3rem;
    color: white;
    cursor: pointer;
    transition: background-color .1s ease-in;
}

.sticky_contact_btn:hover {
    background-color: #ff3b3b;
}

.contact_side {
    position: fixed;
    top: 60%;
    right: -3%;
    z-index: 2;
    transform: rotate(90deg);
}

.contact_close {
    font-size: .75rem;
    text-transform: capitalize;
    font-weight: 400;
    background-color: white;
    border: 1px solid #ff3636;
    padding: .5rem 1.1rem;
    border-radius: .3rem;
    color: #ff3636;
    cursor: pointer;
    transition: background-color .1s ease-in;
}

/* Sticky Button */


/* Cargo Solutions Home Page =====================*/
#cargo__wrapper{
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
}
.cargo_body{
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: .5rem 1.2rem;
}
.cargo__card{
    border: 1px solid rgb(228, 228, 228);
    border-radius: .8rem;
    height: 100%;
}
.cargo__card img{
    border-top-right-radius: .8rem !important;
    border-top-left-radius: .8rem !important;
}
.cargo_body a{
    text-decoration: none;
    color: var(--secondary);
}
.cargo_body:hover a{
    text-decoration: underline .08rem gray;
    text-underline-offset: 3px;
}
/* Cargo Solutions Home Page =====================*/



#freight__hero {
    width: 100%;
}

#freight__header {
    padding: 0;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0.707) 0%, rgba(0, 0, 0, 0.556) 50%, rgba(0, 0, 0, 0) 100%), url('../imgs/images/services/cargo-shipping.jpg');
    background-position: center;
    background-size: cover;
}
.freight{
    padding: var(--spacing-y);
}
.freight__wrapper {
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    color: rgb(255, 255, 255);
    padding: 8rem 0;
}
.freight__wrapper__section{
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
}


.nomorehoney{
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    height: 0;
    width: 0;
    opacity: 0;
}