@font-face {
    font-family: 'Rowdies';
    src: url('../../../assets/user/fonts/Rowdies-Regular.eot');
    src: url('../../../assets/user/fonts/Rowdies-Regular.eot?#iefix') format('embedded-opentype'),
    url('../../../assets/user/fonts/Rowdies-Regular.woff2') format('woff2'),
    url('../../../assets/user/fonts/Rowdies-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
.kiwinav{
    box-shadow: none !important;
}

.pt-sans-regular {
    font-family: 'PT Sans', sans-serif;
}

.rowdies {
    font-family: 'Rowdies' !important;
    font-weight: normal !important;
}

.home-nav-desktop .nav-link {
    font-size: 1.5rem !important;
    letter-spacing: 1px !important;
    font-weight: normal !important;
}

.kiwiko-green-text {
    color: #024E27 !important;
}

.footer-green {
    color: #A7BE39 !important;
}


/*
Tabs
 */
#container {
    width: 100%;
    margin: 0rem auto 0rem auto;
    padding: 0rem 2rem 2rem 3rem;
}

#container > h2 {
    display: block;
    font-family: sans-serif;
    font-weight: bold;
    margin: 1.5rem auto 0;
    text-align: center;
}

#container > p {
    font-size: 0.8rem;
    margin: 1rem 0 2.5rem 0;
    text-align: center;
}

/*style component*/
.nav-tab {
}

.nav-tab ul {
    list-style: none;
    font-size: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
    align-items: center;
    grid-gap: 0;
}

.nav-tab ul li {
    text-align: center;
}

.nav-tab ul li button {
    background-color: transparent;
    border-radius: 0;
    border: 0;
    border-bottom: 1px solid #ececec;
    color: #797979;
    height: 5rem;
    outline: 0;
    font-size: 0.9rem;
    font-weight: bold;
    cursor: pointer;
    transition: 0.12s;
    width: 100%;
}

.nav-tab ul li button.tab-current,
.nav-tab ul li button:hover {
    border-bottom: 1px solid #1976d2;
    color: #1976d2;
    padding-bottom: 1.5rem;
    position: relative;
}

.content-tab {
    display: none;
    padding: 1rem 0;
    animation: fadeIn 0.15s linear;
}

.current-content-tab {
    display: block;
}

/* optional */
.content-tab p,
.content-tab strong {
    display: block;
    margin: 2rem 0;
}

.content-tab ul li,
.content-tab ol li {
    list-style-position: inside;
    margin: 1rem 2rem;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

/*
second tabs
 */
#container-2 {
    width: 100%;
    margin: 5rem auto;
    padding: 2rem 3rem;
}

#container-2 > h2 {
    display: block;
    font-family: sans-serif;
    font-weight: bold;
    margin: 1.5rem auto 0;
    text-align: center;
}

#container-2 > p {
    font-size: 0.8rem;
    margin: 1rem 0 2.5rem 0;
    text-align: center;
}

/*style component*/
.nav-tab-second {
}

.nav-tab-second ul {
    list-style: none;
    font-size: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
    align-items: center;
    grid-gap: 0;
}

.nav-tab-second ul li {
    text-align: center;
}

.nav-tab-second ul li button {
    background-color: transparent;
    border-radius: 0;
    border: 0;
    border-bottom: 1px solid #ececec;
    color: #797979;
    height: 5rem;
    outline: 0;
    font-size: 0.9rem;
    font-weight: bold;
    cursor: pointer;
    transition: 0.12s;
    width: 100%;
}

.nav-tab-second ul li button.tab-current,
.nav-tab-second ul li button:hover {
    border-bottom: 1px solid #1976d2;
    color: #1976d2;
    padding-bottom: 1.5rem;
    position: relative;
}

.content-tab-second {
    display: none;
    padding: 3rem 0;
    animation: fadeIn 0.15s linear;
}

.current-content-tab {
    display: block;
}

/* optional */
.content-tab-second p,
.content-tab-second strong {
    display: block;
    margin: 2rem 0;
}

.content-tab-second ul li,
.content-tab-second ol li {
    list-style-position: inside;
    margin: 1rem 2rem;
}

@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

.nav-tab button {
    padding-bottom: 15px;
}

.nav-tab button[data-tab="tab-1"].tab-current {
    border-bottom: 7px solid #648F3D !important;
    left: 15px; /* Adjust the left positioning to shorten the border on the left */
    right: 15px;

}

.nav-tab button[data-tab="tab-2"].tab-current {
    border-bottom: 7px solid #A7BE39 !important;
    left: 15px; /* Adjust the left positioning to shorten the border on the left */
    right: 15px;

}

.nav-tab button[data-tab="tab-3"].tab-current {
    border-bottom: 7px solid #FFC727 !important;
    left: 15px; /* Adjust the left positioning to shorten the border on the left */
    right: 15px;

}

.nav-tab button[data-tab="tab-4"].tab-current {
    border-bottom: 7px solid #F05428 !important;
    left: 15px; /* Adjust the left positioning to shorten the border on the left */
    right: 15px;

}

.nav-tab button[data-tab="tab-5"].tab-current {
    border-bottom: 7px solid #C08B40 !important;
    left: 15px; /* Adjust the left positioning to shorten the border on the left */
    right: 15px;

}
.btn{
    text-transform: none !important;
    font-size: 1.2rem !important;
}
.buttons .btn img {
    width: 100%;
    max-width: 25px;
}

#myTabs .nav-item .nav-link, #myTabsGreen .nav-item .nav-link,
#myTabsGold .nav-item .nav-link, #myTabsRed .nav-item .nav-link
{
    padding-left: 0px !important;
    padding-right: 0px !important;
    font-size: 1rem !important;
}

#myTabs .nav-item, #myTabsGreen .nav-item,
#myTabsGold .nav-item, #myTabsRed .nav-item{
    padding-left: 0px !important;
    padding-right: 0px !important;
    margin-left: 0px !important;
    margin-right: 0px !important;
}

.variety .nav-link.active {
    border: none !important;
    color: #024E27 !important;
    font-weight: 600 !important;
}

.variety .nav-link{
    color: #024E27 !important;
    letter-spacing: 1px !important;
}
.variety .nav-item:last-child .nav-link::after {
    content: "" !important;
}
.variety .nav-link::after {
    color: #024E27 !important;
    content: "∣";
    font-size: 1.6rem !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
}
.variety.nav-tabs {
    border-bottom: none !important;
}
.variety .nav-link:hover, .variety .nav-link:focus{
    border: none !important;
    font-weight: 600 !important;
}
.variety .nav-link{
    transition: none !important;
}

.navbar-toggler .navbar-toggler-icon .navbar-toggler-bar{
    background: #ffffff !important;
}

element.style {
    background: rgb(100, 143, 61);
    z-index: 1;
}
.carousel-control-prev-icon, .carousel-control-next-icon {
    color: #000000;
    fill: #000000;
}

/*
FORM
 */
.input-group.input-group-dynamic .form-control{
    background-image: linear-gradient(0deg, #024E27 2px, rgba(156, 39, 176, 0) 0), linear-gradient(0deg, #024E27 2px, hsla(0, 0%, 82%, 0) 0);
    font-size: 1rem !important;
}

.input-group.input-group-dynamic .form-control:focus{
    background-image: linear-gradient(0deg, #648F3D 2px, rgba(156, 39, 176, 0) 0), linear-gradient(0deg, #648F3D 2px, hsla(0, 0%, 82%, 0) 0);
    font-size: 1rem !important;
}
.contact-form .form-control::-moz-placeholder{
    color: #A7BE39 !important;
    font-size: 1.2rem !important;
    font-family: "PT Sans";
}
.contact-form .form-control::placeholder{
    color: #A7BE39 !important;
    font-size: 1.2rem !important;
    font-family: "PT Sans";
}
.submit-form-kiwi .g-recaptcha {
    padding-left: 0 !important;
}
.contact-form .form-control{
    color: #A7BE39 !important;
}


.carousel-indicators.kiwi .active{
    opacity: 1 !important;
}
.variety-content, .variety-content p{
    color: #024E27;
}

.table-variety td{
    color: #024E27 !important;
    font-family: "PT Sans";
    padding-right: 10px;
}
.traditional-green .nav-link {
    color: #648F3D !important;
}
.traditional-green .nav-link.active {
    border: none !important;
    color: #648F3D !important;
    font-weight: 600 !important;
}
.traditional-green .nav-link::after {
    color: #648F3D !important;
    content: "∣";
    font-size: 1.6rem !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
}
.sweet-green .nav-link {
    color: #A7BE39 !important;
}
.sweet-green .nav-link.active {
    border: none !important;
    color: #A7BE39 !important;
    font-weight: 600 !important;
}
.sweet-green .nav-link::after {
    color: #A7BE39 !important;
    content: "∣";
    font-size: 1.6rem !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
}
.gold .nav-link {
    color: #FFC727 !important;
}
.gold .nav-link.active {
    border: none !important;
    color: #FFC727 !important;
    font-weight: 600 !important;
}
.gold .nav-link::after {
    color: #FFC727 !important;
    content: "∣";
    font-size: 1.6rem !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
}
.red .nav-link {
    color: #F05428  !important;
}
.red .nav-link.active {
    border: none !important;
    color: #F05428  !important;
    font-weight: 600 !important;
}
.red .nav-link::after {
    color: #F05428  !important;
    content: "∣";
    font-size: 1.6rem !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
}
.root .nav-link {
    color: #C08B40  !important;
}
.root .nav-link.active {
    border: none !important;
    color: #C08B40  !important;
    font-weight: 600 !important;
}
.root .nav-link::after {
    color: #C08B40  !important;
    content: "∣";
    font-size: 1.6rem !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
}
.sweetg{
    color: #A7BE39 !important;
}
.tgreen{
    color: #648F3D !important;
}
.goldg{
    color: #FFC727 !important;
}
.redT{
    color: #F05428 !important;
}
.rootIcon{
    color: #C08B40 !important;
}
.variety-content p{
    font-family: 'PT Sans' !important;
}

/*
Lightbox
 */
.lg-backdrop, .lg-outer .lg-thumb-outer  {
    background-color: #EEF2DF !important;
}

.lg-next, .lg-prev {
    background-color: transparent !important;
}

.lg-outer .lg-thumb-item.active, .lg-outer .lg-thumb-item:hover {
    border-color: #024E27 !important;
    background: #ffffff !important;
}
.lg-thumb-item {
    background-color: #ffffff !important;
}

.lg-counter{
    color: #024E27 !important;
}

.lg-toolbar .lg-close:after{
    font-family: "Material Icons Round";
    font-weight: normal;
    font-style: normal;
    font-size: 20px;
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "liga";
    color: #024E27;
    content: "\e5cd" !important;
}
.lg-next:before{
    font-family: "Material Icons Round";
    font-weight: normal;
    font-style: normal;
    font-size: 20px;
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "liga";
    color: #024E27;
    content: "\e5e1" !important;
}
.lg-prev:after{
    font-family: "Material Icons Round";
    font-weight: normal;
    font-style: normal;
    font-size: 20px;
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "liga";
    color: #024E27;
    content: "\e5e0" !important;
}
.home-intro{
    font-size: 1.7rem !important;
}
.home-content-descriptions{
    font-size: 1.4rem !important;
}
.services-wrap .home-intro{
    font-size: 1.6rem !important;
}
.business-focus h3{
    font-size: 2rem;
}
.business-focus p{
    font-size: 1.4rem !important;
}
.story-intro-content p{
    max-width: 835px;
    font-size: 1.2rem !important;
    color: #024E27 !important;
    font-family: 'PT Sans', sans-serif;
    font-weight: 400;
    line-height: 1.625;
    padding-bottom: 1.5rem !important;
}

.lg-icon.lg-zoom-in:after {
    font-family: "Material Icons Round" !important;
    content: "\e8ff" !important;
    color: #024E27 !important;
}
.lg-toolbar .lg-download:after{
    font-family: "Material Icons Round" !important;
    content: "\f090" !important;
    color: #024E27 !important;
}
.lg-icon.lg-zoom-out:after{
    font-family: "Material Icons Round" !important;
    content: "\e900" !important;
    color: #024E27 !important;
}
/*
MEDIA QUERIES
 */
@media screen and (min-width: 2500px) and (max-width: 3000px) {
    .leaves-float-kiwiko{
        top: 8% !important;
    }
    .story-intro-content, .services-wrap{
        padding-top: 12rem !important;
    }
    .story-story{
        padding-top: 1rem !important;
    }

}
@media screen and (min-width: 2180px) and (max-width: 2499px){
    .leaves-float-kiwiko{
        top: 6.5% !important;
    }
    .story-intro-content, .services-wrap{
        padding-top: 12rem !important;
    }
    .story-story{
        padding-top: 1rem !important;
    }
    .contact-contact{
        padding-top: 3rem !important;
    }

}
@media screen and (min-width: 1800px) and (max-width: 2000px){
    .leaves-float-kiwiko{
        top: 2% !important;
        right: -15% !important;
    }
}
@media screen and (min-width: 1561px) and (max-width: 1600px) {
    .float-image-business{
        position: absolute !important;
        top: -23.5% !important;
    }
}
@media screen and (min-width: 1590px) and (max-width:1700px){
    .bg-menu-kiwiko {
        top: -10px !important;
    }
    .future .future-content{
        padding-bottom: 7rem !important;
    }
}
@media screen and (min-width: 1828px) and (max-width: 1893px) {
    .float-image-business{
        position: absolute !important;
        top: -27.5% !important;
    }
    .storyDynamic{
        max-width: 600px !important;
    }
}
@media screen and (min-width: 1601px) and (max-width: 1828px) {
    .float-image-business{
        position: absolute !important;
        top: -26.5% !important;
    }
    .storyDynamic{
        max-width: 600px !important;
    }
}
@media screen and (min-width: 1601px) and (max-width: 1755px) {
    .float-image-business{
        position: absolute !important;
        top: -25.5% !important;
    }
    .bg-menu-kiwiko {
        top: -3px !important;
    }
    .storyDynamic{
        max-width: 600px !important;
    }
}

@media screen and (min-width: 1561px) and (max-width: 1600px) {
    .bg-menu-kiwiko {
        top: -10px !important;
    }
    .float-image-business{
        position: absolute !important;
        top: -23.5% !important;
    }
    .kiwiko-story-float-1{
        top: -8% !important;
    }
    .storyDynamic{
        max-width: 600px !important;
    }
}


@media screen and (min-width: 1201px) and (max-width: 1560px) {
    .bg-menu-kiwiko {
        top: 0px !important;
    }
    .leaves-float-kiwiko{
        top: 8px !important;
        right: -8% !important;
    }
    .home-nav-desktop .nav-link {
        font-size: 1.5rem !important;
        letter-spacing: 1px !important;
        font-weight: normal !important;
    }
    .home-nav-desktop {
        margin-top: 1.5rem !important;
    }
    .kiwiko-story-banner{
        padding-bottom: 0 !important;
    }
    .kiwiko-business-float{
        padding-top: 7rem !important;
    }
    .storyDynamic{
        max-width: 500px !important;
    }
}
@media screen and (min-width: 1401px) and (max-width: 1460px){
    .kiwiko-sm-d-set{
        width: 35% !important;
    }
}

@media screen and (min-width: 1201px) and (max-width: 1400px) {
    .bg-menu-kiwiko {
        top: 0px !important;
    }
    .leaves-float-kiwiko {
        top: 8px !important;
        right: -8% !important;
    }
    .kiwiko-main-nav .nav-link{
        font-size: 1.4rem !important;
    }
    .kiwiko-story-float-1{
        top:-8% !important;
    }
    .story-banner-content{
        padding-bottom: 1.2rem !important;
    }
    .story-banner-content .home-heading{
        margin-top: 0px !important;
    }
    .kiwiko-story-float-1 img{
        max-width: 700px;
    }
    .kiwiko-business-float{
        padding-top: 9rem !important;
    }
}

@media screen and (min-width: 1201px) and (max-width: 1366px) {
    .leaves-float-kiwiko {
        top: 8px !important;
        right: -10% !important;
    }
    .kiwiko-banner-content{
        padding-top: 3% !important;
    }
    .kiwiko-sm-d-set{
        width: 40% !important;
    }
    .kiwiko-story-banner{
        padding-top: 2% !important;
    }
    .kiwiko-business-float{
        padding-top: 11rem !important;
    }
    .footer-menu-kiwiko{
        width: 20% !important;
    }
}
@media screen and (min-width: 1287px) and (max-width: 1369px) {
    .float-image-business{
        position: absolute !important;
        top: -29.3% !important;
    }
}
@media screen and (min-width:1024px) and (max-width:1200px){
    .footer-menu-kiwiko{
        width: 25% !important;
    }
    .bg-menu-kiwiko {
        top: 0px !important;
    }
    .navbar-brand img{
        max-width: 250px !important;;
    }
    .navbar {
        padding-bottom: 0 !important;
    }
    .kiwiko-main-nav .nav-item{
        padding-left: 0 !important; padding-right: 0 !important; padding-top: 0 !important;
    }
    .kiwiko-main-nav .nav-item .nav-link{
        font-size: 1.4rem !important;
    }
    .buttons .btn {
        width: 100%;
        max-width: 200px !important;
    }
    .float-image-business{
        position: absolute !important;
        top: -15.5% !important;
    }
}
@media screen and (min-width:1140px) and (max-width:1250px){
    .reach-image img{
        display: none;
    }
    .reach-image{
        background-image: url('../../../assets/user/img/reach.png');
        background-position: center center;
        background-size: cover;
    }
    .buttons .btn {
        width: 100%;
        max-width: 200px !important;
    }
}

@media screen and (min-width:1024px) and (max-width:1140px){
    .kiwiko-main-nav {
        padding-top: 3rem !important;
    }
    .kiwiko-banner-content{
        margin-top: -1.3% !important;
    }
    .reach-image img{
        display: none;
    }
    .reach-image{
        background-image: url('../../../assets/user/img/reach.png');
        background-position: center center;
        background-size: cover;
    }
}

@media screen and (min-width: 770px) and (max-width: 1024px) {
    .home-nav-desktop .nav-link {
        font-size: 1rem !important;
        letter-spacing: 1px !important;
        font-weight: normal !important;
    }
    .home-nav-desktop {
        margin-top: 1rem !important;
        margin-left: 3rem !important;
    }
}

@media screen and  (max-width: 769px) {
    #container{
        padding: 0 0 2rem 0 !important;
    }
    .variety .nav-link::after{
        padding-left: 5px !important;
        padding-right: 5px !important;
    }
    .variety .nav-item, .variety .nav-link{
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
    .variety .nav-item:nth-child(3n) .nav-link::after {
        content: ""; /* Empty content for even nav-links, effectively removing the dividers */
        padding-left: 5px !important;
        padding-right: 5px !important;
    }
    .navbar-collapse {
        height: 90vh !important;
    }
    .kiwinav-hide.hidden {
        display: none !important; ;
    }
    .navbarimage.hidden{
        display: none !important;
    }
    .future-content-wrap{
        padding-bottom: 3rem !important;
    }

}