@font-face {
    font-family: 'DIN NEXTTM ARABIC';
    src: url(../fonts/DINNextLTW23-Regular.ttf) format('TrueType'), url(../fonts/DINNextLTW23-Regular.eot) format('embedded-opentype'), url(../fonts/DINNextLTW23-Regular.woff) format('woff'), url(../fonts/DINNextLTW23-Regular.woff2) format('woff2');
}

@font-face {
    font-family: 'slick';
    src: url(../fonts/slick.ttf) format('TrueType'), url(../fonts/slick.eot) format('embedded-opentype'), url(../fonts/slick.woff) format('woff'), url(../fonts/slick.svg) format('svg');
}


@font-face {
    font-family: 'Font Awesome 5 Brands';
    src: url(../fonts/webfonts/fa-brands-400.ttf) format('TrueType'), url(../fonts/webfonts/fa-brands-400.eot) format('embedded-opentype'), url(../fonts/webfonts/fa-brands-400.woff) format('woff'), url(../fonts/webfonts/fa-brands-400.woff2) format('woff2');
}

@font-face {
    font-family: 'Font Awesome 5 Duotone';
    src: url(../fonts/webfonts/fa-duotone-900.ttf) format('TrueType'), url(../fonts/webfonts/fa-duotone-900.eot) format('embedded-opentype'), url(../fonts/webfonts/fa-duotone-900.woff) format('woff'), url(../fonts/webfonts/fa-duotone-900.woff2) format('woff2');
}

@font-face {
    font-family: "Font Awesome 5 Pro";
    font-style: normal;
    font-weight: 300;
    font-display: block;
    src: url(../fonts/webfonts/fa-light-300.eot);
    src: url(../fonts/webfonts/fa-light-300.eot?#iefix) format("embedded-opentype"), url(../fonts/webfonts/fa-light-300.woff2) format("woff2"), url(../fonts/webfonts/fa-light-300.woff) format("woff"), url(../fonts/webfonts/fa-light-300.ttf) format("truetype"), url(../fonts/webfonts/fa-light-300.svg#fontawesome) format("svg")
}

.fal {
    font-weight: 300
}

@font-face {
    font-family: "Font Awesome 5 Pro";
    font-style: normal;
    font-weight: 400;
    font-display: block;
    src: url(../fonts/webfonts/fa-regular-400.eot);
    src: url(../fonts/webfonts/fa-regular-400.eot?#iefix) format("embedded-opentype"), url(../fonts/webfonts/fa-regular-400.woff2) format("woff2"), url(../fonts/webfonts/fa-regular-400.woff) format("woff"), url(../fonts/webfonts/fa-regular-400.ttf) format("truetype"), url(../fonts/webfonts/fa-regular-400.svg#fontawesome) format("svg")
}

.fal,
.far {
    font-family: "Font Awesome 5 Pro"
}

.far {
    font-weight: 400
}

@font-face {
    font-family: "Font Awesome 5 Pro";
    font-style: normal;
    font-weight: 900;
    font-display: block;
    src: url(../fonts/webfonts/fa-solid-900.eot);
    src: url(../fonts/webfonts/fa-solid-900.eot?#iefix) format("embedded-opentype"), url(../fonts/webfonts/fa-solid-900.woff2) format("woff2"), url(../fonts/webfonts/fa-solid-900.woff) format("woff"), url(../fonts/webfonts/fa-solid-900.ttf) format("truetype"), url(../fonts/webfonts/fa-solid-900.svg#fontawesome) format("svg")
}

.fa,
.fas {
    font-family: "Font Awesome 5 Pro";
    font-weight: 900
}

@font-face {
    font-family: 'worksansregular';
    src: url(../fonts/WorkSans-Regular.ttf) format('TrueType');
}

/*General style*/
html {
    scroll-behavior: smooth;
}

html::-webkit-scrollbar {
    width: 6px;
    height: 10px;
}

html::-webkit-scrollbar-thumb {
    background: #f69f25;
    border-radius: 0px;
}

html::-webkit-scrollbar-thumb:hover {
    background: #fae333;
}

html::-webkit-scrollbar-track {
    background: #ffffff;
    border-radius: 0px;
    box-shadow: inset 7px 10px 12px #fff;
}

body {
    margin: 0;
    font-family: DIN NEXTTM ARABIC, sans-serif;
    color: #000816;
    overflow-x: hidden;
    background-color: #fff
}

.of-hidden {
    overflow: hidden !important;
}

.pesudo-hidden:before,
.pesudo-hidden:after {
    display: none;
}

ul {
    padding: 0;
}

a {
    text-decoration: none
}

input {
    font-family: DIN NEXTTM ARABIC, sans-serif;
    border: 1px solid #EEEEEE;
    border-radius: 4px;
    outline: none;
    box-shadow: none
}

input:focus {
    outline: none;
    box-shadow: none
}

input::placeholder {
    color: #BDBDBD
}

.text-center {
    text-align: center !important;
}

.text-left {
    text-align: left !important;
}

.text-right {
    text-align: right !important;
}

.padding-r-0 {
    padding-right: 0 !important;
}

.padding-l-0 {
    padding-left: 0 !important;
}

.flex-dis {
    display: flex
}

.br {
    display: block;
    margin: 10px auto;
}

.slick-list {
    width: 100%;
}

.slick-slide {
    float: right;
}

/* Boostrap 5 fix columns spaces to be 15px */
.row > * {
    padding-right: calc(var(--bs-gutter-x)/ 1.6);
    padding-left: calc(var(--bs-gutter-x)/ 1.6);
}

.form-check-input:checked {
    background-color: #f59926;
    border-color: #f59926;
}

.form-check-input:focus {
    box-shadow: none
}

.star-ratings-css {
    unicode-bidi: bidi-override;
    color: #c5c5c5;
    font-size: 17px;
    height: 20px;
    width: 85px;
    margin: 0 10px;
    position: relative;
    text-shadow: 0 1px 0 #a2a2a2;
    line-height: 20px;
    letter-spacing: 4px;
}

.star-ratings-css::before {
    content: '★★★★★';
    opacity: .3;
}

[title=".000"]::after {
    width: 0%;
}

[title=".125"]::after {
    width: 12.5%;
}

[title=".250"]::after {
    width: 25%;
}

[title=".375"]::after {
    width: 37.5%;
}

[title=".500"]::after {
    width: 64%;
}

[title=".625"]::after {
    width: 72.5%;
}

[title=".750"]::after {
    width: 85%;
}

[title=".875"]::after {
    width: 93.5%;
}

.star-ratings-css::after {
    color: #ffaa00;
    content: '★★★★★';
    text-shadow: 0 1px 0 #ffaa00;
    position: absolute;
    z-index: 1;
    display: block;
    left: 0;
    top: 0;
    overflow: hidden;
}

/*Animation*/
@keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Internet Explorer */
@-ms-keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

.dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0;
    animation: .2s fadein;
    left: 27px
}

.action-btn {
    background-color: #ffcd00 !important;
    color: #000d62 !important;
    transition: 0.1s ease-in-out;
    border-radius: 4px;
    outline: none;
    box-shadow: none;
    border: none;
}

.action-btn.selected {
    color: #ffcd00 !important;
    background-color: #ddd !important;
    font-weight: bold;
}

.action-btn:focus {
    outline: none;
    box-shadow: none;

}

.action-btn:hover {
    background-color: #ffcd0077 !important;
    color: #000d62 !important;
}

.action-btn.disabled {
    background-color: #f5f5f5;
    cursor: not-allowed;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
    color: #bbb;
}

.action-btn.disabled:hover {
    opacity: 1;
    background-color: #f5f5f5;
    color: #bbb;
}

.action-title {
    color: #000d62 !important;
    transition: 0.1s ease-in-out;
}

.action-title:hover {
    color: #ffcd00 !important;
}

.main-navbar {
    margin: 0
}

.main-navbar .logo {
    height: 70px;
    margin: 0 15px
}


.main-navbar .nav-item:hover > a {
    color: #ffcd00 !important;
}

.main-navbar .nav-item a.active {
    color: #ffcd00 !important;
    mix-blend-mode: difference;
}

.main-navbar .nav-item .dropdown-menu {
    overflow: hidden
}

.main-navbar .nav-item .dropdown-menu li a {
    font-size: 14px;
    padding: 7px 10px
}

.main-navbar .nav-item .dropdown-menu li a i {
    font-size: 10px;
    margin: 0 5px;
    vertical-align: middle
}

.main-navbar .nav-item .dropdown-menu li:hover > a {
    background-color: #ffcd00 !important;
    color: #000d62 !important;

}

.main-navbar .nav-item {
    margin: 0 7px
}

.main-navbar .nav-item .dropdown-menu li > a.active {
    background-color: #ffcd00 !important;
    color: #000d62 !important;
}

/*Header Section*/
img {
    user-drag: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-drag: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    -moz-user-select: -moz-none;
    -khtml-user-select: none;
    -webkit-user-select: none;
    -o-user-select: none;
    user-select: none;

}

.hdr-sec .swiper {
    width: 100%;
    overflow: hidden
}

.hdr-sec .swiper-slide {
    background-position: center;
    background-size: cover;

}

.hdr-sec .swiper-slide img {
    display: block;
    width: 100%;
    opacity: .7;
    height: 100%;
    object-fit: cover
}

.hdr-sec .swiper-slide .sldr-cont {
    position: absolute;
    left: 15%;
    top: 30%
}

.sldr-cont button.action-btn {
    position: relative;
    display: block
}

.swiper-slide-active {
    z-index: 999
}


.hdr-sec .swiper-slide .construction {
    left: 0;
    right: 0;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    top: 40%
}

.hdr-sec .swiper-slide .sldr-cont h4 {
    font-size: 60px;
    color: #000;
    font-weight: bold
}

.hdr-sec .swiper-slide .sldr-cont h6 {
    font-size: 32px;
    font-weight: bold;
    margin-top: 15px;
    color: #333
}

.hdr-sec .swiper-slide .sldr-cont button {
    border: none;
    background-color: #ffcd00;
    color: #000d62;
    border-radius: 4px;
    font-size: 24px;
    padding: 2px 30px;
    font-weight: bold;
    margin-top: 30px;
    transition: .1s ease-in-out
}

.hdr-sec .swiper-slide .sldr-cont button:hover {
    transform: scale(1.03)
}

.hdr-sec {
    max-height: 650px;
    overflow: hidden;
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
}

.hdr-sec .hdr-cont {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: #000;

    color: #fff;
    justify-content: center
}

.sec-title {
    font-size: 32px;
    font-weight: bold;
    padding-top: 45px;
    padding-bottom: 30px;
    display: inline-block;

    position: relative
}



.sec-title:before {
    content: '';
    width: 90px;
    right: -60%;
    top: 45%;
    position: absolute;
    height: 3px;
    background: linear-gradient(270deg, rgba(255, 255, 255, 0) 0%, #ffcd0077 100%);
}

.sec-title:after {
    content: '';
    width: 90px;
    left: -60%;
    top: 45%;
    position: absolute;
    height: 3px;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #ffcd0077 100%);
}

.sec-bg {
    background-color: #fff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='evenodd'%3E%3Cg id='hexagons' fill='%239C92AC' fill-opacity='0.08' fill-rule='nonzero'%3E%3Cpath d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6.35L0 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"), linear-gradient(to right top, #fff, #fff, #fff, #fff, #fff);
    background-attachment: fixed
}

.srvcs-sec .sec-title {
    border-bottom: 4px solid #ffcd00;
    display: inline-block;
    margin: auto;
    text-align: center;
    width: auto
}

.srvcs-sec .srvcs-cont {
    text-align: center;
    border: 1px solid #ddd;
    border-radius: 4px;
    padding: 20px;
    margin: 15px 0;
    background-color: #fff;
    transition: .1s ease-in-out
}

.srvcs-sec .srvcs-cont:hover {
    transform: scale(1.03)
}

.srvcs-sec .srvcs-cont i {
    background-color: #afcfff77;
    border-radius: 50%;
    width: 75px;
    height: 75px;
    color: #000d62;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    margin: 0 auto 15px;

}

.srvcs-sec .srvcs-cont h4 {
    font-size: 24px;
    font-weight: bold;
    color: #000d62
}

.srvcs-sec .srvcs-cont p {
    font-size: 16px;
    line-height: 23px
}

.srvcs-sec .srvcs-cont button {
    border: none;
    background-color: #ffcd00;
    color: #000d62;
    border-radius: 4px;
    font-size: 16px;
    padding: 5px 30px;
    font-weight: bold;
    margin-top: 7px;
    transition: .1s ease-in-out
}

.srvcs-sec .srvcs-cont button:hover {
    opacity: .8
}

.stndrd-sec {
    position: relative;
    box-shadow: 0 4px 5px #dddddd55;
    text-align: center;
    padding: 20px 0 60px;

    z-index: 1;
}

.stndrd-sec .sec-title {
    border-bottom: 3px solid #ffcd00;
    position: relative;
    width: auto;
    display: inline-block;
    padding: 30px 0 7px;
    margin-bottom: 30px
}

.stndrd-sec:before {
    background-image: url(../imgs/bg.png);
    z-index: 0;
    content: '';
    height: 100%;
    width: 100%;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    filter: hue-rotate(-40deg);
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0
}

.stndrd-sec h4 {
    font-weight: bold;
    font-size: 28px;
    margin: 0
}

.stndrd-sec p {
    width: 60%;
    margin: auto;
    font-size: 18px;
    line-height: 2rem
}

.stndrd-sec p strong {
    color: #ffcd00
}

.prod-swiper {
    text-align: center;
    color: #333
}

.prod-swiper .swiper-slide:hover {
    cursor: col-resize
}


.prod-swiper .swiper-slide img {
    width: 300px;
    height: 200px;
    object-fit: contain
}

.prod-swiper .swiper-slide h4 {
    font-size: 16px;
    font-weight: bold
}

.prod-sec .more-btn {
    border: none;
    background-color: #ffcd00;
    color: #000d62;
    border-radius: 4px;
    font-size: 24px;
    padding: 5px 30px;
    font-weight: bold;
    margin: 45px auto 30px;
    display: block;
    transition: .1s ease-in-out
}

.prod-sec .more-btn:hover {
    transform: scale(1.03)
}

.prod-swiper .swiper-slide.swiper-slide-next,
.prod-swiper .swiper-slide.swiper-slide-prev {
    opacity: .3
}


.footer-08 {
    padding: 0;
    background: #f1f6f5;
    position: relative;

}

.footer-08 .footer-loc {
    display: flex;
    flex-direction: column;
    font-size: 14px;
}


.footer-08 .footer-loc p:first-of-type {
    font-weight: bold;
    margin-bottom: 5px;
    color: orange;
}

.footer-08 .footer-loc p {
    color: #000d62;
}

.footer-08 .footer-heading {
    font-size: 18px;
    margin-bottom: 30px;
}

.footer-08 a {
    color: #000d62;
}

.footer-08 ul.list-unstyled li a {
    color: rgba(0, 0, 0, 0.5);
    transition: .1s ease-in-out
}

.footer-08 ul.list-unstyled li a:hover {
    color: rgba(0, 0, 0, 0.9);
}

.footer-08 p {
    color: rgba(0, 0, 0, 0.5);
}

.ftco-footer-social li {
    list-style: none;
    margin: 0 10px 0 0;
    display: inline-block;
}

.ftco-footer-social li a {
    height: 40px;
    width: 40px;
    display: block;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 50%;
    position: relative;
}

.ftco-footer-social li a span {
    position: absolute;
    font-size: 20px;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.aside-stretch-right {
    background: #000d62;
}

.footer-08 .aside-stretch-right {
    background: #000d62;
}

.footer-08 .footer-heading.footer-heading-white {
    color: #fff;
}

.footer-08 .contact-form .form-control {
    height: 50px;
    background: #fff;
    color: rgba(0, 0, 0, 0.3);
    font-size: 14px;
    border-radius: 5px;
    -webkit-box-shadow: none;
    box-shadow: none;
    border: none;
}

.footer-08 .contact-form textarea.form-control {
    height: inherit !important;
}

.footer-08 .contact-form .submit {
    background: #ffcd00 !important;
    color: #000d62;
}

.footer-08 .contact-form {
    width: 100%;
}

.form-group {
    margin-bottom: 1rem;
}

.footer-08 textarea,
.footer-08 input {
    background-color: #fff !important;
    border-radius: 4px !important;
    padding: 10px !important;
    margin: 7px 0 !important;
    font-size: 14px
}

.footer-08 .submit-btn {
    width: 100%;
    padding: 10px;
    line-height: 1.5;
    font-size: 18px
}

.footer-08 .md-form {
    margin: 15px 0 !important
}

.qlty-sec {
    position: relative;
    overflow: hidden;
    box-shadow: 0 0 5px #ddd;
    padding: 0 0 30px;
    background-color: #f1f1f1;
    /*    margin-top: 60px;
    */
    background: linear-gradient(90deg, #f1f1f1 21px, transparent 100%) center, linear-gradient(#f1f1f1 21px, transparent 100%) center, #000d6299;
    background-size: 23px 23px;
    background-attachment: fixed
}

.qlty-sec .qlty-cont {
    width: 60%;
    margin: auto
}

.qlty-sec .sec-title {
    color: #000d62;
}

.qlty-sec:before {
    content: '';
    position: absolute;
    left: -5%;
    top: -15%;

    background-image: url(../imgs/top-bg.png);
    height: 300px;
    width: 300px;
    background-size: contain;

}

.qlty-sec .qlty-cont .sec-title {
    margin-bottom: 0;
    padding-bottom: 15px
}

.qlty-sec .qlty-cont p {
    font-size: 16px;
    line-height: 1.6rem;
    margin-bottom: 30px
}

.qlty-sec .qlty-cont h5 {
    color: #000d62;
    font-size: 24px;
    font-weight: bold
}

.qlty-sec .qlty-cont i {
    background-color: #000d6222;
    width: 80px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 42px;
    color: #000d62;

    overflow: visible
}

.swiper-pagination-clickable .swiper-pagination-bullet {
    cursor: pointer;
    border: 1px solid #fff;
    opacity: 1;
    background: unset;
    width: 15px;
    height: 15px
}

.swiper-pagination-clickable .swiper-pagination-bullet-active {
    background: #fff
}

.who-sec {
    position: relative;

    color: #fff;
    border-bottom: 2px solid orange;
    box-shadow: 0 0px 10px orange
}

.who-sec:before {
    box-shadow: 0 1px 60px orange;
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: linear-gradient(144deg, rgba(0, 0, 0, 0.9054972330729166) 0%, rgba(0, 0, 0, 0.66) 42%, rgba(0, 0, 0, 0.9026961126247374) 100%);
}


.who-sec .bg-thumbs {
    position: absolute;
    width: auto;
    height: 90px;
    border: 4px solid #fff;
    z-index: 0
}

.who-sec .bg-thumbs:nth-of-type(1) {
    left: 10%;
    top: 10%;
    transform: rotate(-10deg)
}

.who-sec .bg-thumbs:nth-of-type(2) {
    right: 1%;
    top: 10%;
    transform: rotate(10deg);
    height: 120px;

}

.who-sec .bg-thumbs:nth-of-type(3) {
    right: 5%;
    bottom: 0;
    transform: rotate(-10deg);

}

.who-sec .bg-thumbs:nth-of-type(4) {
    left: 2%;
    bottom: -10%;
    transform: rotate(5deg);
    height: 120px;
}

.who-sec h4 {
    z-index: 1;
    position: relative;
    border-bottom: 4px solid #ffcd00;
    display: inline-block
}

.trade .who-sec .sec-title {
    border: none
}

.who-sec p {
    width: 88%;
    margin: auto;
    line-height: 2rem;
    font-size: 18px;
    z-index: 1;
    position: relative
}

.hard-sec .bg-cont {
    height: 400px;
    background-color: #fff;
    z-index: -1;
    padding: 30px;
    margin: 15px 0
}



.hard-sec .bg-cont img {
    object-fit: contain;
    width: 100%;
    height: 100%;
    filter: invert(1);
    z-index: -1
}

.hard-cont {
    display: flex;
    justify-content: center;
    height: 100%;
    flex-direction: column;
    align-content: flex-start;
}

.scroll-btn {
    background-color: darkblue;
    color: #fff;
    border-radius: 50%;
    font-size: 24px;
    width: 50px;
    height: 50px;
    position: fixed;
    top: auto;
    bottom: 10%;
    right: 5%;
    border: none;
    box-shadow: none;
    outline: none;
    line-height: 3.5rem;
    z-index: 5;
    box-shadow: 0 0 5px #33333333;
    display: none
}

.about-sec {
    position: relative
}

.about-sec img {
    width: 100%;
    height: auto;
    max-height: 400px;
    object-fit: cover;
    /*    border-radius: 35px*/
}


.about-sec p {
    font-size: 18px;
    position: relative;
    /*    background-color: #ddf3df;*/
    color: #000d62;
    padding: 30px;
    font-weight: bold;
    /*    border-radius: 35px;*/
    width: 100%;
    margin: auto;
    text-align: left;
}

/*
.about-sec p:first-of-type {
    width: 80%;
    text-align: left;
    margin-left: 0;
    border-radius: 35px 35px 0 0;
    margin: 5px 0;
    padding-bottom: 7px;
    padding-top: 7px;
    margin-left: auto;
}

.about-sec p:last-of-type {
    border-radius: 35px 0 35px 35px;
    padding-top: 7px;
    padding-bottom: 7px;
}
*/

/*
.about-sec p.brdr-rds {
    border-radius: 35px
}
*/

.about-sec .slick-prev,
.about-sec .slick-next {
    filter: invert(.5);
    transform: scale(1.2);
    transition: .1s ease-in-out;
}

.stndrd-sec.agri {
    width: 60%;
    margin: auto
}

.stndrd-sec.agri::before {
    display: none
}

.stndrd-sec.agri .sec-title {
    border: none;
    position: relative;
}

.stndrd-sec.agri .sec-title:after {
    height: 3px;
    width: 100%;
    background-color: #ffcd00;
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    top: auto
}

.maint .sec-title:before,
.maint .sec-title:after,
.stndrd-sec.agri .sec-title:before {
    display: none
}

/*
.stndrd-sec.agri::after {
    content: '';
    position: absolute;
    right: -90px;
    bottom: 0;
    background-image: url(../imgs/agriculture/down-bg.png);
    width: 200px;
    height: 275px;
    z-index: 11;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    z-index: -1
}
*/

.hdr-cont .swiper-wrapper {
    position: relative;
}

.hdr-cont .swiper-wrapper:after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 5;
}

.food-sec {
    width: 100%;
    text-align: center;
    background-color: #fff;
    display: block
}

.food-sec img {
    -moz-column-count: 5;
    -moz-column-gap: 20px;
    -webkit-column-count: 5;
    -webkit-column-gap: 20px;
    column-count: 5;
    column-gap: 20px;
    height: 200px;
    width: auto;
    background-color: #fff;
    padding: 30px;
    transition: .2s ease-in-out
}

.food-sec img:hover {
    transform: scale(1.2) !important;
    box-shadow: 0 0 0 3px #dddddd22;
    z-index: 5
}

.about-sec.agri:before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    background-image: url(../imgs/agriculture/down-bg-2.png);
    width: 200px;
    height: 100%;
    z-index: 11;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 0;
    transform: rotate(26deg);
}

.about-sec.agri.const:before {
    transform: none;
    height: 79%;
    width: 39%;
    background-size: contain;
    background-position: left;
    opacity: .3;
    background-image: url(../imgs/construction/crane.png);
}

.about-sec.agri.const p {
    /*    background-color: #ffcd0099;
    */
    color: #000
}

.sec-bg.agri {
    background: unset;
    position: relative
}

.sec-bg.agri:before {
    content: '';
    background-color: #fff;
    background-image: url(../imgs/agriculture/planting.png), linear-gradient(to right top, #fff, #fff, #fff, #fff, #fff);
    background-size: 60px 60px;
    background-attachment: fixed;
    z-index: -1;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    opacity: .04;
}

.modal .success {
    position: absolute;
    left: -15px;
    right: -15px;
    top: 1px;
    bottom: 1px;
    text-align: center;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    background-color: #379f37d6;
    color: #fff;
    z-index: 1;
}

.modal .success:before {
    content: '✓';
    font-size: 3rem;
}

.spinner {
    position: relative;
    margin: -3px 5px;
    width: 15px;
    height: 15px;
    display: inline-block;
    border-radius: 50%;
    border: 3px solid #8a8a8a;
    border-top-color: black;
    animation: loading 2s linear infinite;
}

@keyframes loading {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.bnfts-cont {
    padding: 30px 0 60px;
    background-color: #000d62;
}

.bnfts-cont i {
    font-size: 45px;
    text-align: center;
    margin: 0 auto 15px;
    display: block;
    color: #ffcd00
}

.bnfts-cont h2 {
    color: #ffcd00;
    font-size: 42px;
    font-weight: bold
}

.bnfts-cont h2 ~ p {
    color: #fff;
    font-size: 18px
}

.bnfts-cont p {
    font-size: 14px;
    line-height: 1.6rem
}

.bnfts-cont i ~ p {
    text-align: center;
    color: #000d62
}

.bnfts-cont .card {
    transition: .2s ease-in-out;
}

.bnfts-cont .card:hover {
    transform: scale(1.05)
}

.offer-sec .slick-arrow {
    z-index: 1;
}

.offer-sec .slick-arrow:before {
    font-size: 30px;
}

.offer-sec .next-btn {
    right: -15px;
}

.offer-sec .prev-btn {
    left: -15px;
}

.offer-sec .btn-wrap {
    text-align: center;
    width: 100%;
}

.offer-sec {
    position: relative
}

.offer-sec button i {
    filter: drop-shadow(2px 2px 4px #00000066);
}

.offer-sec button {
    border: none;
    border-radius: 5px;
    margin: 10px;
    font-size: 28px;
    font-weight: 600;
    transition: all 0.5s;
    position: absolute;
    top: 0;
    bottom: 0;
    display: block;
    margin: auto;
    color: #ffcd00;
    outline: none;
    background: transparent;
}

.offer-sec button.slick-disabled {
    opacity: 0.6;
}

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

    .offer-sec button {
        display: none !important
    }
}



/*USE CSS for Slider*/

.vehicle-detail-banner .car-slider-desc {
    max-width: 180px;
    margin: 0 auto;
}

/*
.banner-slider .slider.slider-for {
    max-width: 84%;
    padding-right: 35px;
}

.banner-slider .slider.slider-nav {
    max-width: 16%;
}
*/
.banner-section {
    margin-top: 150px
}

.banner-section h4 {
    font-weight: bold;

}

.banner-section .cont-txt {
    display: flex;
    justify-content: center;
    flex-direction: column;
    height: 100%;
}

.banner-section .cont-img {
    height: 100%
}

.banner-section .cont-img img {
    height: 100%;
    object-fit: cover
}

.banner-slider .slick-slide {
    float: left;
}

.banner-slider .slider.slider-for,
.banner-slider .slider.slider-nav {
    width: 100%;
    float: left;
}

.banner-slider .slider.slider-nav {
    overflow: hidden;

}

.slider-banner-image {
    height: 100%;
}

.banner-slider .slider.slider-nav {
    padding: 20px 0 0;
}

.slider-nav .slick-slide.thumbnail-image .thumbImg {
    max-width: 178px;
    height: 110px;
    margin: 0 auto;
    border: 1px solid #EBEBEB;
}

.slider-banner-image img,
.slider-nav .slick-slide.thumbnail-image .thumbImg img {
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.slick-vertical .slick-slide:active,
.slick-vertical .slick-slide:focus,
.slick-arrow:hover,
.slick-arrow:focus {
    border: 0;
    outline: 0;
}

.slider-nav .slick-slide.slick-current.thumbnail-image .thumbImg {
    border: 2px solid #196DB6;
}

.slider-nav .slick-slide.slick-current span {
    color: #196DB6;
}

.slider-nav .slick-slide {
    text-align: center;
}

.slider-nav .slick-slide span {
    font-size: 14px;
    display: block;
    padding: 5px 0 15px;
}

.slick-arrow {
    width: 100%;
    background-color: transparent;
    border: 0;
    background-position: center;
    background-repeat: no-repeat;
    font-size: 0;
    height: 18px;
    position: absolute;
    left: 0;
    right: 0;
    z-index: 99;
}

.slick-prev {
    top: 0;
}

.slick-next {
    bottom: 0;
    background-color: #fff;
}

.slick-prev.slick-arrow {
    background-image: url(../images/black-up-arrow.png);
}

.slick-next.slick-arrow {
    background-image: url(../images/black-down-arrow.png);
}

/*End USE CSS for Slider*/

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

    .banner-slider .slider.slider-for,
    .banner-slider .slider.slider-nav {
        max-width: 100%;
        float: none;
    }

    .banner-slider .slider.slider-for {
        padding-right: 0;
    }

    .banner-slider .slider.slider-nav {
        height: auto;
    }

    .slider-banner-image {
        height: 500px;
    }

    .slider.slider-nav.thumb-image {
        padding: 10px 30px 0;
    }

    .slider-nav .slick-slide span {
        padding: 5px 0;
    }

    .slick-arrow {
        padding: 0;
        width: 30px;
        height: 30px;
        top: 50%;
        bottom: 0;
        -webkit-transform: translateY(-50%) rotate(-90deg);
        -moz-transform: translateY(-50%) rotate(-90deg);
        -ms-transform: translateY(-50%) rotate(-90deg);
        transform: translateY(-50%) rotate(-90deg);
    }

    .slick-prev {
        left: 0;
        right: unset;
    }

    .slick-next {
        left: unset;
        right: 0;
        background-color: transparent;
    }

    .vehicle-detail-banner .car-slider-desc {
        max-width: 340px;
    }

    .bid-tag {
        padding: 10px 0 15px;
    }

    .slider.slider-nav.thumb-image {
        white-space: nowrap;
    }

    .thumbnail-image.slick-slide {
        padding: 0px 5px;
        min-width: 75px;
        display: inline-block;
        float: none;
    }
}

@media screen and (max-width : 767px) {
    .slider-banner-image {
        height: 400px;
    }

    .slider.slider-nav.thumb-image {
        padding: 0px 20px 0;
        margin: 10px 0px 0;
    }

    .slider-nav .slick-slide.thumbnail-image .thumbImg {
        max-width: 140px;
        height: 80px;
    }

    .slick-prev.slick-arrow {
        background-position: center 10px;
    }

    .slick-next.slick-arrow {
        background-position: center 10px, center;
    }

    .slider-nav .slick-slide span {
        font-size: 12px;
        white-space: normal;
    }
}

@media screen and (max-width: 580px) {
    .slider-banner-image {
        height: 340px;
    }
}

@media screen and (max-width : 480px) {
    .slider-banner-image {
        height: 280px;
    }
}

.loader-cont {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
    background: #000000;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url(../images/bg/pattern_bg.jpg);
    background-attachment: fixed;
    background-size: cover;
    opacity: 1
}

.loader {
    position: relative;
    width: 100%;
    height: 100%;
    border: 4px solid #000000;
    overflow: hidden;
}

.loader video {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.loader span {
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    z-index: -1;
    background: linear-gradient(#14ffe9, #ffeb3b, #ff00e0);
    filter: blur(20px);
    animation: animate 0.5s linear infinite;
}

@keyframes animate {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.cssload-wrap {
    display: flex;
    display: -o-flex;
    display: -ms-flex;
    display: -webkit-flex;
    display: -moz-flex;
    box-pack: center;
    -o-box-pack: center;
    -ms-box-pack: center;
    -webkit-box-pack: center;
    -moz-box-pack: center;
    justify-content: center;
    -o-justify-content: center;
    -ms-justify-content: center;
    -webkit-justify-content: center;
    -moz-justify-content: center;
    box-align: center;
    -o-box-align: center;
    -ms-box-align: center;
    -webkit-box-align: center;
    -moz-box-align: center;
    align-items: center;
    -o-align-items: center;
    -ms-align-items: center;
    -webkit-align-items: center;
    -moz-align-items: center;
    perspective: 390px;
    -o-perspective: 390px;
    -ms-perspective: 390px;
    -webkit-perspective: 390px;
    -moz-perspective: 390px;
    height: 100vh;
    overflow: hidden;
    z-index: 9999;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #fff;
    display: none
}

.cssload-cssload-spinner {
    position: relative;
    transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    animation: cssload-wobble 4.59s ease-in-out infinite;
    -o-animation: cssload-wobble 4.59s ease-in-out infinite;
    -ms-animation: cssload-wobble 4.59s ease-in-out infinite;
    -webkit-animation: cssload-wobble 4.59s ease-in-out infinite;
    -moz-animation: cssload-wobble 4.59s ease-in-out infinite;
}

.cssload-cssload-spinner:before,
.cssload-cssload-spinner:after {
    display: block;
    content: ' ';
    border-radius: 50%;
    width: 88px;
    height: 88px;
    -webkit-clip-path: polygon(50% 0, 7% 26%, 7% 74%, 50% 100%, 93% 74%, 93% 26%, 83% 32%, 83% 69%, 50% 89%, 17% 69%, 17% 32%, 50% 12%, 83% 32%, 93% 26%);
    clip-path: polygon(50% 0, 7% 26%, 7% 74%, 50% 100%, 93% 74%, 93% 26%, 83% 32%, 83% 69%, 50% 89%, 17% 69%, 17% 32%, 50% 12%, 83% 32%, 93% 26%);
    animation: cssload-spin 1.73s ease-in-out infinite both reverse;
    -o-animation: cssload-spin 1.73s ease-in-out infinite both reverse;
    -ms-animation: cssload-spin 1.73s ease-in-out infinite both reverse;
    -webkit-animation: cssload-spin 1.73s ease-in-out infinite both reverse;
    -moz-animation: cssload-spin 1.73s ease-in-out infinite both reverse;
}

.cssload-cssload-spinner:before {
    background-color: #02baff;
    background: linear-gradient(to right, #3271ff, #02baff);
    position: absolute;
}

.cssload-cssload-spinner:after {
    background-color: #4c4c4c;
    background: linear-gradient(to right, #768f9d, #4c4c4c);
    animation-delay: -0.86s;
    -o-animation-delay: -0.86s;
    -ms-animation-delay: -0.86s;
    -webkit-animation-delay: -0.86s;
    -moz-animation-delay: -0.86s;
}

@keyframes cssload-wobble {

    0%,
    100% {
        transform: rotateX(8.75deg) rotateY(35deg);
    }

    50% {
        transform: rotateX(35deg) rotateY(-35deg) rotate(180deg);
    }
}

@-o-keyframes cssload-wobble {

    0%,
    100% {
        -o-transform: rotateX(8.75deg) rotateY(35deg);
    }

    50% {
        -o-transform: rotateX(35deg) rotateY(-35deg) rotate(180deg);
    }
}

@-ms-keyframes cssload-wobble {

    0%,
    100% {
        -ms-transform: rotateX(8.75deg) rotateY(35deg);
    }

    50% {
        -ms-transform: rotateX(35deg) rotateY(-35deg) rotate(180deg);
    }
}

@-webkit-keyframes cssload-wobble {

    0%,
    100% {
        -webkit-transform: rotateX(8.75deg) rotateY(35deg);
    }

    50% {
        -webkit-transform: rotateX(35deg) rotateY(-35deg) rotate(180deg);
    }
}

@-moz-keyframes cssload-wobble {

    0%,
    100% {
        -moz-transform: rotateX(8.75deg) rotateY(35deg);
    }

    50% {
        -moz-transform: rotateX(35deg) rotateY(-35deg) rotate(180deg);
    }
}

@keyframes cssload-spin {

    0%,
    100% {
        transform: translateZ(49px) rotateX(14deg);
    }

    33% {
        transform: translateZ(-49px) scale(0.4);
    }

    66% {
        transform: translateZ(-49px);
    }
}

@-o-keyframes cssload-spin {

    0%,
    100% {
        -o-transform: translateZ(49px) rotateX(14deg);
    }

    33% {
        -o-transform: translateZ(-49px) scale(0.4);
    }

    66% {
        -o-transform: translateZ(-49px);
    }
}

@-ms-keyframes cssload-spin {

    0%,
    100% {
        -ms-transform: translateZ(49px) rotateX(14deg);
    }

    33% {
        -ms-transform: translateZ(-49px) scale(0.4);
    }

    66% {
        -ms-transform: translateZ(-49px);
    }
}

@-webkit-keyframes cssload-spin {

    0%,
    100% {
        -webkit-transform: translateZ(49px) rotateX(14deg);
    }

    33% {
        -webkit-transform: translateZ(-49px) scale(0.4);
    }

    66% {
        -webkit-transform: translateZ(-49px);
    }
}

@-moz-keyframes cssload-spin {

    0%,
    100% {
        -moz-transform: translateZ(49px) rotateX(14deg);
    }

    33% {
        -moz-transform: translateZ(-49px) scale(0.4);
    }

    66% {
        -moz-transform: translateZ(-49px);
    }
}

.store-btn {
    border: none;
    outline: none;
    background-color: #ffcd00;
    color: #000d62;
    border-radius: 4px;
    font-size: 24px;
    padding: 5px 60px;
    margin: 15px 0;
    font-weight: bold;
    display: block;
    transition: .1s ease-in-out;
    z-index: 1;
    width: 100%
}

.store-btn:hover {
    opacity: .8
}

/*Footer scroll image*/
.mobile-frame {
    width: 100%;
    height: 249px;
    overflow: hidden;
    position: relative;
    border: 15px solid #000;
    border-radius: 15px;
    margin-top: -30%;
}

.image-scroll img {
    animation: scroll 15s linear infinite;
    height: auto;
    overflow: hidden;
    position: relative;
    transform: translate3d(0, 0, 0);


}


.image-scroll .btn-cont {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    height: auto;
    width: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    visibility: hidden;
    transition: .1s ease-in-out
}

.image-scroll .btn-cont:before {
    content: '';
    background-color: #000d6299;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transition: .1s ease-in-out
}

.image-scroll .shop-btn {
    padding: 5px 40px;
    z-index: 1;
    font-size: 18px;
    font-weight: bold
}

.image-scroll:hover .btn-cont {
    visibility: visible;
    transition: .3s ease-in-out
}

.image-scroll img {
    width: 100%;
}

@keyframes scroll {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-100%);
    }
}

.agri-qlty {
    height: 100vh;
    background-image: url(../imgs/agriculture/orange-field.jpg);
    background-attachment: fixed;
    background-size: cover;
    background-repeat: no-repeat;
    color: #fff;
    text-align: center;
    position: relative;
}

.agri-qlty:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    z-index: 0;
    height: 100%;
    width: 100%;
    background-color: #000d6288
}

.agri-qlty .agri-cont {
    z-index: 1;
    position: relative
}

.agri-qlty .agri-cont.brdr-btm {
    border-bottom: 1px solid #fff;
}

.agri-qlty .agri-cont.brdr-rght {
    border-right: 1px solid #fff
}

.agri-qlty .agri-title {
    font-weight: bold;
    font-size: 35px
}

.agri-qlty .agri-txt {
    font-size: 18px
}


/*
Agri Slider */
.prods-sldr {
    background-color: #00041d
}

.scroll-slider {
    position: relative;
    overflow: hidden;
    display: block;
    margin: 0;
    padding: 0;
    height: 65vh;
}

.scroll-wrapper {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    height: 100%;
    box-sizing: border-box;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    -ms-touch-action: pan-y;
    touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
    padding: 90px 0 30px
}

.scroll-slide {
    flex: 1 0 60vw;
    max-width: 60vw;
    height: 100%;
}

.item {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    height: 100%;
    width: 30%
}

.item-container {
    position: relative;
    width: 50%
}

.item-container .item-image {
    width: 50%
}

.item-title {
    font-size: 2vw;
    font-weight: bold;
    line-height: 1;
    text-transform: uppercase
}

@media (min-width: 40em) {
    .item-body {
        position: absolute;
        right: -50%;
        top: 0;

        width: 75%;
        /*        transform: translate(-25%, -50%);*/
    }

    .item-body p {
        font-size: 18px;
        background-color: #00041d;
        padding: 10px
    }
}

.tag {
    margin-right: 0.5rem;
    visibility: hidden
}

.tag > a {
    display: block;
    padding: 0.25rem 0.5rem;
    font-size: 0.60rem;
    text-transform: uppercase;
    background: rgba(255, 255, 255, .25);
    color: #fff;
}

.agri .about-sec p {
    font-size: 20px;
    background-color: #ffffffcc
}

/*

.stndrd-sec.agri .gap-p {
    position: absolute;
    right: -90px;
    bottom: 0;
    width: 200px;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    background-color: #00041d0f;
    padding: 20px 15px 20px;
    border-radius: 25px 25px 0 0
}
*/
.stndrd-sec.agri .gap-p {
    position: absolute;
    right: -90px;
    bottom: 0;
    width: 200px;
    height: 100%;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    background-color: #00041d0f;
    padding: 20px 15px 20px;
}

.stndrd-sec.agri .gap-p img {
    width: 70%;
    display: block;
    margin: 0 auto 15px;
    height: auto;
}

/*
.stndrd-sec.agri .gap-p p {
    font-size: 12px;
    line-height: 1.1rem;
    width: 100%;
    text-align: center
}
*/
.stndrd-sec.agri .gap-p p {
    font-size: 16px;
    line-height: 1.5rem;
    width: 100%;
    text-align: center;
}

.stndrd-sec.agri .gap-p p b {
    color: #000d62
}

.stndrd-sec.agri .gap-p::before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    border-style: solid;
    border-width: 0 50px 50px 0;
    border-color: #67b03e44 #F8F8F8;
    transition: all ease 0.5s;
}

.stndrd-sec.agri .gap-p:hover::before {
    border-width: 0 60px 60px 0;
    border-color: #67b03e99 #F8F8F8;
}

.prods-sldr img {
    max-width: 320px;
}


/*Bussiness about*/
/*Business units section*/

.bu-sec {
    overflow: hidden
}

.bu-sec #home {
    color: #aaaaaf;
    width: 100%;
    height: 100%;
    position: relative;
    padding: 100px;
    display: block;
    transition: transform 0.5s ease-in-out;
}

.bu-sec #home > section {
    position: relative;
}

.bu-sec #home > .header > div {
    position: relative;
    display: inline-block;
    margin-right: 25px;
    vertical-align: middle;
    text-shadow: 0px 5px 10px rgba(0, 0, 0, 1);
}

.bu-sec #home > .pagetag {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 10px 15px;
    font-size: 0.8em;
    color: rgba(96, 78, 177, 1);
    background: rgba(0, 0, 0, 0.1);
}

/*Heading*/
.bu-sec #home .logo {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background-image: url("http://twths.org/wp/wp-content/uploads/2015/12/coldplay-a-head-full-of-dreams-album-art-560x560.jpg");
    background-size: 100%;
    background-position: 50% 50%;
    box-shadow: 0px 0px 20px -10px rgba(0, 0, 0, 0.5);
}

.bu-sec #home h2 {
    font-weight: 300;
    letter-spacing: 0.07em;
    margin-left: -20px;
}

.bu-sec #home h5 {
    margin-top: -20px;
    font-weight: 400;
    letter-spacing: 1.9em;
}

.bu-sec #home h2 > span:first-child {
    font-size: 3em;
}

.bu-sec #home h2 > span:nth-child(2) {
    font-size: 2em;
    margin-left: -0.2em;
    font-weight: 400;
}

.bu-sec #grid_wrapper {
    width: 100%;
    display: inline-block;
    margin-top: 60px;
    box-sizing: border-box;
    padding: 0px 20px;
    position: relative;
}

.bu-sec #grid_wrapper.init > card {
    transform: scale(0);
}

.bu-sec #grid_wrapper > card {
    display: block;
    width: 25%;
    height: 200px;
    float: left;
    transition: transform 0.3s cubic-bezier(0, 0, 0, 1);
    padding: 20px;
    box-sizing: border-box;
}

.bu-sec #grid_wrapper > card > div,
.bu-sec #content_wrapper > .clone {
    color: #aaaaaf;
    cursor: pointer;
    width: 100%;
    height: 100%;
    position: relative;
    transition: box-shadow 0.3s;
    overflow: hidden;
    border: 1px solid rgba(66, 76, 119, 0.1);
    box-shadow: 0px 20px 50px 0px rgba(0, 0, 0, 0.2);
}

.bu-sec #grid_wrapper > card > div.active {
    opacity: 0;
}

.bu-sec #grid_wrapper > card > div:hover {
    box-shadow: 0px 30px 60px 0px rgba(0, 0, 0, 0.25);
}

.bu-sec #grid_wrapper > card > div:before,
.bu-sec #content_wrapper > .clone:before {
    width: 100%;
    height: 100%;
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    background-size: 100%;
    background-position: 50% 50%;
    background-blend-mode: overlay;
    /*    background-image: url("https://emersonkeeling.files.wordpress.com/2015/12/ahfod.gif");
    */
    background-color: #00000011;
    transition: all 0.2s;
    -webkit-filter: blur(3px);
    -moz-filter: blur(3px);
    filter: blur(3px);
    -ms-filter: blur(3px);
}

.bu-sec #grid_wrapper > card:nth-of-type(1) > div:before {
    background-image: url(../imgs/trading.jpg)
}

.bu-sec #grid_wrapper > card:nth-of-type(2) > div:before {
    background-image: url(../imgs/engineering.png)
}

.bu-sec #grid_wrapper > card:nth-of-type(3) > div:before {
    background-image: url(../imgs/construction.jpg)
}

.bu-sec #grid_wrapper > card:nth-of-type(4) > div:before {
    background-image: url(../imgs/agriculture.jpg)
}

.bu-sec #grid_wrapper > card > div > span,
.bu-sec #content_wrapper > .clone > span {
    width: 100%;
    height: 50px;
    margin-top: -25px;
    top: 50%;
    position: absolute;
    line-height: 50px;
    display: block;
    text-align: center;
    font-size: 1.5em;
    opacity: 1;
    font-size: 26px;
    color: #fff;
    font-weight: bold;
}

/*End of Section*/

/*NavBar Style*/
/*Comes up only when you're open in a section*/
.bu-sec nav.main {
    overflow-X: auto;
    overflow-Y: visible;
    z-index: 25;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 55px;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    display: table
}

.bu-sec body:after,
.bu-sec #footer:after,
.bu-sec #footer:before {
    /* background: linear-gradient(90deg, rgba(190,78,114,1) 0%, rgba(254,117,98,1) 33.33%, rgba(86,72,105,1) 66.66%,  rgba(126,70,99,1) 100%) */
    ;
    background-image: linear-gradient(90deg, rgba(107, 208, 228, 1) 0%, rgba(96, 78, 177, 1) 33%, rgba(200, 142, 102, 1) 66%, rgba(201, 85, 169, 1) 100%);
    /* w3c */
    content: "";
    position: fixed;
    width: 100%;
    top: 0px;
    left: 0px;
    height: 5px;
    z-index: +30;
}

.bu-sec nav.main.inactive > .tab {
    transform: rotateX(90deg) translateY(-25px);
}

.bu-sec nav.main > .tab {
    transform-origin: 50% 0% 0px;
    background: #fff;
    box-sizing: border-box;
    /* border-top:5px solid; */
    font-weight: 600;
    font-size: 0.9em;
    color: #161725;
    display: inline-block;
    width: 15%;
    text-align: center;
    line-height: 45px;
    height: 100%;
    border-top: rgba(0, 0, 0, 0.5) 5px solid;
    position: relative;
    cursor: pointer;
    overflow: hidden;
    transition: transform 0.5s cubic-bezier(0, 0, 0, 1);
    display: table-cell;

}

.bu-sec nav.main > .tab.active {
    z-index: +5000;
}

.bu-sec nav.main > .tab.active > span {
    background: #d5d5d5;
}

.bu-sec nav.main > .tab > span {
    width: 100%;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    height: 100%;
    display: block;
    transform: line-height 0.2s;
}

.bu-sec nav.main > .tab:not(.active) > span:hover {
    background: #dadada;
}

.bu-sec nav.main > .tab:after {
    content: "";
    top: 0;
    right: 0;
    position: absolute;
    border-top: 0px solid transparent;
    border-bottom: 50px solid transparent;
    border-right: 0px solid rgba(0, 0, 0, 0.05);
    transition: all 0.2s;
}

.bu-sec nav.main > .tab:hover:after {
    content: "";
    right: 0;
    position: absolute;
    border-top: 0px solid transparent;
    border-bottom: 55px solid transparent;
    border-right: 10px solid rgba(0, 0, 0, 0.1);
}

/*End of Section*/

/*Ripple Styling*/
.bu-sec .ripple {
    position: fixed;
    animation: ripple 1s 1 ease-out;
    background: rgba(0, 0, 0, 0.5);
    margin: -250px;
    width: 500px;
    height: 500px;
    transform: scale(10);
    position: absolute;
    border-radius: 50%;
    opacity: 0;
}

/*One for the BIIIIG ONE!*/

.bu-sec .mega.ripple {
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    opacity: 1;
}

@keyframes ripple {
    0% {
        opacity: 1;
        transform: scale(0);
    }
}

/*End of Section*/

/*This one Wraps content of the tabs*/
.bu-sec #content_wrapper.inactive {
    pointer-events: none;
}

.bu-sec #content_wrapper {
    position: fixed;
    z-index: +20;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    display: block;
    perspective: 1000px;
}

.bu-sec #content_wrapper > div.content {
    z-index: +50;
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    left: 0;
    display: block;
    box-sizing: border-box;
    padding: 0;
    padding-top: 0;

}



.bu-sec #content_wrapper > div.clone.deactivate {
    background: linear-gradient(#14151a, #161725);
}

.bu-sec #content_wrapper > div.clone.deactivate > span {
    font-size: 50em;
    opacity: 0;
    animate: blow 0.5s 0s cubic-bezier(0, 0, 0, 1);
}

@keyframes blow {
    to {
        font-size: 50em;
        opacity: 0;
    }
}

.bu-sec #content_wrapper > div.clone.deactivate:before {
    animation: fadeOut 0.25s 0s 1 cubic-bezier;
    opacity: 0;
}

@keyframes fadeOut {
    from {
        opacity: 1;
    }
}

.bu-sec #content_wrapper > div.clone {
    width: 100%;
    height: 100%;
    transform-origin: 50% 50%;
    position: absolute;
    transform-origin: 50% 50%;
    transform: translate(-50%, -50%) rotateY(180deg);
    animation: flipOpen 0.5s 0s 1 cubic-bezier(0, 0, 0, 1);
}

.bu-sec #content_wrapper.inactive > div.clone {
    animation: flipClose 0.7s 0s 1 cubic-bezier(0, 0, 0, 1);
    transform: translate(-50%, -50%);
    position: absolute;
}

@keyframes flipOpen {
    from {
        transform: translate(-50%, -50%);
    }
}

@keyframes flipClose {
    from {
        transform: translate(-50%, -50%) rotateY(180deg);
    }
}

.bu-sec #content_wrapper > div.content > section.active {
    opacity: 1;
    transform: none;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 50px;
    position: relative
}

.bu-sec #content_wrapper > div.content > section.active > div {
    z-index: 5;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.bu-sec #content_wrapper > div.content > section.active:before {
    content: '';
    position: absolute;
    background-color: #000;
    opacity: .6;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%
}

.bu-sec #content_wrapper > div.content > section {
    color: #fff;
    position: absolute;
    top: 55px;
    left: 0;
    opacity: 0;
    transition: all 0.5s;
    transform: translateY(-100px);
    font-size: 24px;
    text-align: center
}

.bu-sec #content_wrapper > div.content > section h1 {
    font-size: 4.3rem;
}

.bu-sec #content_wrapper.inactive > button {
    opacity: 0;
}

.bu-sec #content_wrapper > button {
    z-index: +100;
    transition: opacity 0.2s 1s;
    padding: 20px;
    font-family: "FontAwesome";
    color: white;
    font-size: 1.2em;
    background: none;
    outline: none;
    border: none;
    position: fixed;
    top: 60px;
    right: 0;
    cursor: pointer;
}

/*End of Section*/

/*Footer Design*/
.bu-sec #footer {
    font-size: 0.9em;
    position: relative;
    margin-top: 200px;
    width: 100%;
    height: 70px;
    text-align: center;
    color: rgba(255, 255, 255, 0.3);
    z-index: +15;
}

.bu-sec #footer:before {
    position: absolute;
    top: 0;
    height: 3px;
}

.bu-sec #footer:after {
    position: absolute;
    bottom: 1px;
    top: unset;
    height: 3px;
}


/* Add background images for each section */
.bu-sec #content_wrapper > div.content > section.trading-bg {
    background-image: url('../imgs/trading.jpg');
    background-size: cover;
    background-position: center;
}

.bu-sec #content_wrapper > div.content > section.engineering-bg {
    background-image: url('../imgs/engineering.png');
    background-size: cover;
    background-position: center;
}

.bu-sec #content_wrapper > div.content > section.construction-bg {
    background-image: url('../imgs/construction.jpg');
    background-size: cover;
    background-position: center;
}

.bu-sec #content_wrapper > div.content > section.agriculture-bg {
    background-image: url('../imgs/agriculture.jpg');
    background-size: cover;
    background-position: center;
}

/*End of Section*/







/* start of our services section */

#our-services {
    min-height: 100vh;
    padding-top: 91px;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* OUR SEERVICES LEFT SIDE */

#our-services .desc {
    width: 33%;
    float: left;
}

#our-services .desc .heading h1 {
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 1.4px;
    margin-bottom: 30px;
    color: #fff;
    top: 0
}

#our-services .desc .text {
    color: #fff;
}

#our-services .desc .text p {
    margin-bottom: 20px;
    font-size: 14px;
    line-height: 1.5;
}

/* OUR SERVICES RIGHT SIDE */

#our-services .services {
    width: 67%;
    float: left;
    top: 7px;
    position: relative;
}

#our-services .services .serviceinfo {
    height: 400px;
}


#our-services .services .row {
    float: left;
    transition: transform 0.3s 0.3s ease, top 0.4s ease;
}

#our-services .services .row1 {
    position: relative;
    top: 0px;
    transition: transform 0.3s ease, left 0.3s 0.4s, top 0.4s 0.7s ease;
    left: 0px;
}

#our-services .services .row2 {
    position: relative;
    top: 0px;
    transition: transform 0.3s ease, left 0.3s 0.4s, top 0.4s 0.7s ease;
    margin-left: 105px;
    left: 0px;
}

#column-1 {
    position: relative;
    top: 11px;
    left: 0px;
}

#column-2 {
    position: relative;
    top: 10px;
    left: -5px;
}

#our-services .services .row1expand {
    margin-right: 0px;
    transform: rotate(0deg);
    position: relative;
    top: -93px;
    transition: transform 0.3s ease, left 0.3s 0.4s, top 0.4s 0.7s ease;
    left: 300px;
    z-index: 2;
}

#our-services .services .row2expand {
    float: left;
    margin-right: 0px;
    transform: rotate(0deg);
    position: relative;
    top: 110px;
    transition: transform 0.3s ease, left 0.3s 0.4s, top 0.4s 0.7s ease;
    left: 195px;
    z-index: 2;
}


#our-services .services .row .service {
    display: flex;
    justify-content: center;
    align-items: center;
    float: left;
    width: 120px;
    height: 120px;
    background: #ffcd00;
    transition: all 0.3s ease;
    margin-bottom: 7px;
    margin-left: 85px;
    transform: rotate(45deg);
    transition: margin-left 0.3s 0.4s;
    cursor: pointer
}

#our-services .services .row .serviceexpand {
    display: flex;
    justify-content: center;
    align-items: center;
    float: left;
    width: 120px;
    height: 120px;
    background: #FFFFFF;
    transition: all 0.3s ease;
    margin-bottom: 7px;
    margin-left: 0px;
    transform: rotate(0deg);
    transition: margin-left 0.3s 0.4s;
}


#our-services .services .row .selectedservice {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 120px;
    height: 120px;
    background: #ffcd00;
    transition: all 0.3s ease;
    margin-bottom: 7px;
    position: relative;
    cursor: pointer;
    transition: .1s ease-in-out
}


#our-services .services .row .service:hover {
    background: #292929;
    color: #ffcd00;
    transition: .1s ease-in-out
}

#our-services .services .row .service:hover .service-icon {
    color: #fff;
}

#servicechoicetext {
    position: relative;
    width: 200px;
    height: 30px;
    left: 390px;
    opacity: .4;
    font-weight: bold;
    color: #fff;
    left: 0;
    right: 0;
    margin: auto;
}


#our-services .services .row .service .service-desc {
    transform: rotate(-45deg);
    text-align: center;
    text-transform: uppercase;
    font-size: 10px;
    font-weight: bold;
    transition: transform 0.3s ease;
    margin: auto;
    cursor: pointer;
    color: #fff
}

.bg-skyblue {
    background-color: #19335F
}

#our-services .services .row .service .service-desc p {
    font-size: 10px;
    color: #2b2b2b;
    transition: .1s ease-in-out
}

#our-services .services .row .service:hover .service-desc p {

    color: #ffcd00
}

#our-services .services .row .service .service-desc .service-icon {
    font-size: 20px;
    margin-bottom: 5px;
    color: #292929;
    transition: .1s ease-in-out
}

#our-services .services .row .service:hover .service-desc .service-icon {
    color: #ffcd00
}

/* end of our services section */

/* media query */

@media all and (max-width: 600px) {
    #our-services {
        padding-top: 60px;
    }

    #our-services .desc {
        width: 100%;
        float: none;
        margin-bottom: 30px;
    }

    #our-services .services {
        width: 100%;
    }

    #our-services .services .row {
        transform: rotate(0deg);
        margin-right: 10px;
    }

    #our-services .services .row .service .service-desc {
        transform: rotate(0deg);
    }
}

#servicesdetails {
    position: relative;
    font-size: 14px;
    line-height: 1.5;
    width: 100%;
    margin: auto;
    margin-left: auto;
    text-align: left;
    padding: 0 90px
}

#servicesdetails .invisible {
    position: relative;
    top: 70px;
    left: 70px;
    opacity: .0;
    transition: all 0.5s ease;
    visibility: hidden !important;
    text-align: left
}

#servicesdetails .visible {
    opacity: .9;
    position: relative;
    top: 120px;
    transition: all 0.5s ease;
    visibility: visible !important;
    color: #fff
}

#microassessment {
    display: none;
    height: 0px;
    overflow: visible;
}

#documentreview {
    display: none;
    height: 0px;
    overflow: visible;
    text-align: left
}

#macroassessment {
    display: none;
    height: 0px;
    overflow: visible;
}

#deliverableservices {
    display: none;
    height: 0px;
    overflow: visible;
}

#projectexecution {
    display: none;
    height: 0px;
    overflow: visible;
}

#dpooutsourcing {
    display: none;
    height: 0px;
    overflow: visible;
}

#water {
    display: none;
    height: 0px;
    overflow: visible;
    text-align: left
}

/*Float menu*/
.f-menu {
    position: fixed;
    left: 16px;
    bottom: 96px;
    /* Further adjusted position */
    z-index: 9999;
}

#toggle {
    position: absolute;
    opacity: 0;
    visibility: hidden;
}

#toggle:checked + .menu__toggle > .menu__button .menu__bar:nth-child(1) {
    transform: rotate(45deg) translate3d(2px, -2px, 0);
}

#toggle:checked + .menu__toggle > .menu__button .menu__bar:nth-child(2) {
    transform: translate3d(-10px, 0, 0);
    opacity: 0;
}

#toggle:checked + .menu__toggle > .menu__button .menu__bar:nth-child(3) {
    transform: rotate(-45deg) translate3d(1px, 4px, 0)
}

/* Positioning the menu items for five items */
#toggle:checked ~ .menu .menu__item:nth-child(1) {
    transition: all 250ms cubic-bezier(0.04, 0.76, 0.67, 1.2);
    transform: translate3d(0, -6em, 0);
    /* Adjusted translation */
}

#toggle:checked ~ .menu .menu__item:nth-child(2) {
    transition: all 250ms 50ms cubic-bezier(0.04, 0.76, 0.67, 1.2);
    transform: translate3d(4.2em, -4.2em, 0);
    /* Adjusted translation */
}

#toggle:checked ~ .menu .menu__item:nth-child(3) {
    transition: all 250ms 100ms cubic-bezier(0.04, 0.76, 0.67, 1.2);
    transform: translate3d(6em, 0, 0);
    /* Adjusted translation */
}

#toggle:checked ~ .menu .menu__item:nth-child(4) {
    transition: all 250ms 150ms cubic-bezier(0.04, 0.76, 0.67, 1.2);
    transform: translate3d(4.2em, 4.2em, 0);
    /* Adjusted translation */
}

#toggle:checked ~ .menu .menu__item:nth-child(5) {
    transition: all 250ms 200ms cubic-bezier(0.04, 0.76, 0.67, 1.2);
    transform: translate3d(0, 6em, 0);
    /* Adjusted translation */
}

.menu__toggle {
    position: relative;
}

.menu__button {
    width: 50px;
    height: 50px;
    background-color: #ffcd00;
    border-radius: 50%;
    position: absolute;
    bottom: calc(10px / 2);
    left: calc(10px / 2);
    padding: 1em;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    cursor: pointer;
    transition: all 100ms ease;
    z-index: 99999;
    box-shadow: 2px 2px 10px #000000;
}

.menu__button:hover {
    width: 50px;
    height: 50px;
    bottom: calc((10px / 2) - 2.5px);
    left: calc((10px / 2) - 2.5px);
}

.menu__button .menu__bar {
    height: 3px;
    width: 100%;
    background: #000d62;
    border-radius: 5px;
    transition: all 200ms ease;
    transform-origin: left center;
}

.menu {
    width: 50px;
    height: 50px;
    position: absolute;
    bottom: calc(35px / 2);
    left: calc(35px / 2);
    z-index: 1;
}

.menu__item {
    color: white;
    padding: 1em;
    width: auto;
    white-space: nowrap;
    /* Adjusted for better visibility */
    height: 40px;
    /* Adjusted for better visibility */
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: absolute;
    transition: all 250ms;
    background: none;
    /* Remove background */
}

.menu__item a {
    text-decoration: none;
    color: #fff;
    line-height: 0;
    font-size: 0
}

.menu__item a:hover {
    color: #ffff01
}

#toggle:checked ~ .menu .menu__item a {
    line-height: 1rem;
    font-size: 16px
}



.floating-btn-container {
    position: fixed;
    bottom: 40px;
    left: 16px;
    z-index: 1000;
}

.floating-btn-container button {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: #ffcd00;
    color: #000d62;
    border: none;
    outline: none;
    color: white;
    font-size: 36px;
    cursor: pointer;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23);
    transition: background-color .3s, color .3s;
}

.floating-btn-container button:hover {
    background-color: #007599;
}

.slide-out-bar {
    position: fixed;
    bottom: 40px;
    left: 45px;
    /* 60px (button width) + 16px (margin) */
    height: 60px;
    background: #ffffff1c;
    display: flex;
    align-items: center;
    padding-left: 10px;
    transition: width 0.3s ease;
    overflow: hidden;
    white-space: nowrap;
    z-index: 999;
    width: 0;
}

.slide-out-bar.open {
    width: calc(100% - 92px);
    /* Full width minus button width (60px) and margins (16px on each side) */
}

.menu-items {
    display: flex;
    align-items: center;
    height: 100%;
    width: 100%;
    justify-content: space-evenly;
}

.menu-link {
    color: white;
    margin-right: 20px;
    white-space: nowrap;
}

.menu-link a {
    color: white;
    text-decoration: none;
    font-size: 18px;
}

.menu-link a:hover {
    text-decoration: unset;
    color: #ffcd00;
    transition: .2s ease-in-out;
}