@import url('https://fonts.cdnfonts.com/css/gilroy-bold');
@font-face {font-family: 'OpenSans';src: url('/font/OpenSans-Regular.ttf') format('truetype');}
@font-face {font-family: 'OpenSans-SemiBold';src: url('/font/OpenSans-SemiBold.ttf') format('truetype');}
@font-face {font-family: 'OpenSans-Bold';src: url('/font/OpenSans-Bold.ttf') format('truetype');}
@font-face {font-family: 'OpenSans-ExtraBold';src: url('/font/OpenSans-ExtraBold.ttf') format('truetype');}
@font-face {font-family: 'Ubuntu';src: url('/font/Ubuntu-Regular.ttf') format('truetype');}
@font-face {font-family: 'Ubuntu-Bold';src: url('/font/Ubuntu-Bold.ttf') format('truetype');font-weight: bold;}
@font-face {font-family: 'Ubuntu-Light';src: url('/font/Ubuntu-Light.ttf') format('truetype');}
@font-face {font-family: 'Open Sans';src: url('/font/OpenSans.ttf') format('truetype');}


*{margin:0;padding:0;box-sizing: border-box;font-family: 'Epilogue', sans-serif;letter-spacing: 2.5px;}
.no-scroll {overflow: hidden;}
/* Color */
:root{
    --darkgreen:#334B35;
    --lightgreen:#6D8C54;
    --yellow:#F7C35F;
}

h1,h2,h3,h4,h5,h6{margin: 0;}

/* Scrollbar Css */
body::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);border-radius: 10px;background-color: #0E0D13;}
body::-webkit-scrollbar {width: 6px;background-color: #0E0D13;}
body::-webkit-scrollbar-thumb {border-radius: 10px;-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);background-color: var(--lightgreen);}

body{min-height: 100vh;background: var(--darkgreen);}
.harvabl-joinUs { padding: 17px 50px ; border-radius: 12px; background: var(--yellow); border: 0; font-family: 'Ubuntu-Bold'; font-size: 0.9rem; font-weight: 800; line-height: 16px; letter-spacing: 0px; white-space: nowrap; display: inline-block; text-align: center;cursor: pointer;transition: 0.2s;color:rgb(16, 16, 16) }
.harvabl-joinUs:hover { background: #69966D; color: rgb(255, 255, 255);border: 0;}
.harvabl-joinUs:active { background: #264629;color: rgb(255, 255, 255);border: 0;}

.harvabl-knowMore { padding: 17px 50px ; border-radius: 12px; background: var(--yellow); border: 0; font-family: 'Ubuntu-Bold'; font-size: 0.9rem; font-weight: 800; line-height: 16px; letter-spacing: 0px; white-space: nowrap; display: inline-block; text-align: center;cursor: pointer;transition: 0.2s;color:rgb(16, 16, 16) }
.harvabl-knowMore:hover { background: #69966D; color: rgb(255, 255, 255);border: 0;}
.harvabl-knowMore:active { background: #264629;color: rgb(255, 255, 255);border: 0;}



a{text-decoration: none;}
a:hover{text-decoration: none;}
.content { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; min-height: 100vh; padding: 5%; box-sizing: border-box; }

.harvabl-section-1{background: url('/image/background/harvabl-bg1.png') no-repeat center center/cover;}
.harvabl-section-1 .title{color: rgb(16, 16, 16);font-family: 'Ubuntu-Bold';font-size: 3rem;font-weight: 700;line-height: 55px;letter-spacing: 0px;text-align: center;margin-bottom: 20px;}
.harvabl-section-1 .sub-title{color: rgb(16, 16, 16);font-family: 'Ubuntu-Bold';font-size: 1.75rem;font-weight: 700;line-height: 36px;letter-spacing: 0px;text-align: center;margin-bottom: 15px;}
.harvabl-section-1 .desp{color: rgb(16, 16, 16);font-family:'Open Sans';font-size: 1rem;font-weight: 500;line-height: 22px;letter-spacing: 0px;text-align: center;width: 100%;max-width: 750px; margin: 0 auto; }






.harvabl-section-2{background: var(--darkgreen) }
.harvabl-section-3 .content{min-height: unset;}
.harvabl-section-2 .content{padding: 5% 10%;}
.harvabl-section-2 .text-content{padding:0 10%;}
.harvabl-section-2 .title{color: rgb(255, 255, 255);font-family: 'Ubuntu-Bold';font-size: 2.5rem;font-weight: 700;line-height: 46px;letter-spacing: 0px;text-align: left;}
.harvabl-section-2 .sub-title{color: rgb(255, 255, 255); font-family: 'Open Sans'; font-size: 1.125rem; font-weight: 700; line-height: 1.6875rem; letter-spacing: 0px; text-align: left;}
.harvabl-section-2 .desp{color: rgb(255, 255, 255);font-family: 'Open Sans';font-size: 1rem;font-weight: 400;line-height: 27px;letter-spacing: 0px;text-align: left;}
.harvabl-section-2 .ion-checked{color: var(--yellow);font-size: 3.5rem;}
.harvabl-section-2 h2,.harvabl-section-2 h3{margin: 0;}
.harvabl-section-2 .part-2{margin-top: 5%;}


.harvabl-section-3{background: rgb(255, 255, 255);}
.harvabl-section-3 .title{color: rgb(16, 16, 16);font-family: 'Ubuntu-Bold';font-size: 2.5rem;font-weight: 700;line-height: 46px;letter-spacing: 0px;text-align: center;}
.harvabl-section-3 .sub-title{color: rgb(16, 16, 16); font-family: Ubuntu; font-size: 1rem; font-weight: 700; line-height: 36px; letter-spacing: 0px; text-align: center;}
.harvabl-section-3 .harvabl-card-container{padding: 3% 1%;}
.harvabl-section-3 .harvabl-card{width: 20%;padding: 1%;transition: 0.2s;cursor: pointer;}
.harvabl-section-3 .harvabl-card:hover{transform: translateY(-5px);scale: 1.05;}

.harvabl-section-4{background: url('/image/background/harvabl-bg2.png') no-repeat center center/cover;}
.harvabl-section-4 .content{padding: 5% 10%;}
.harvabl-section-4 .title{color: rgb(255, 255, 255);font-family: 'Ubuntu-Bold';font-size: 2.5rem;font-weight: 700;line-height: 2.875rem;letter-spacing: 0px;text-align: left;}
.harvabl-section-4 .sub-title{color: rgb(255, 255, 255);font-family: 'Open Sans';font-size: 1.125rem;font-weight: 700;line-height: 27px;letter-spacing: 0px;text-align: left;text-transform: capitalize;}
.harvabl-section-4 .desp{color: rgb(255, 255, 255);font-family: 'Open Sans';font-size: 1.125rem;font-weight: 400;line-height: 27px;letter-spacing: 0px;text-align: left;}
.harvabl-section-4 .restaurant-list { columns: 1; -webkit-columns: 1; -moz-columns: 1; list-style-type: none; padding-left: 1rem; }
.harvabl-section-4 .restaurant-list .sub-title { margin: 1.3rem 0; position: relative;padding-left: 1.5rem;}
.harvabl-section-4 .restaurant-list .sub-title::before { content: '•'; font-size: 2rem; color: rgb(255, 255, 255); position: absolute; left: 0; top: 5px; line-height: 1rem; }
.harvabl-section-4 .part-2 img{width: 50%;}

.harvabl-section-5{background: url('/image/background/harvabl-bg3.png') no-repeat center center/cover;}
.harvabl-section-5 .ion-checked{color: var(--yellow);font-size: 3.5rem;}
.harvabl-section-5 .title{color: rgb(255, 255, 255);font-family: 'Ubuntu-Bold';font-size:  2.5rem;font-weight: 700;line-height: 46px;letter-spacing: 0px;text-align: center;}
.harvabl-section-5 .sub-title{color: rgb(255, 255, 255);font-family: 'Ubuntu-Bold';font-size: 1.125rem;font-weight: 700;line-height: 27px;letter-spacing: 0px;text-align: center;}
.harvabl-section-5 .desp{color: rgb(255, 255, 255);font-family: 'Open Sans';font-size: 1rem;font-weight: 400;line-height: 21px;letter-spacing: 0px;text-align: left;}
.harvabl-section-5 .harvabl-card{border: 6px solid rgb(255, 255, 255);border-radius: 27px;background: rgb(51, 75, 53);opacity: 0.9;max-width: 550px;padding: 2.2%;}

.harvabl-section-6{background: var(--darkgreen) }
.harvabl-section-6 .title{color: rgb(255, 255, 255);font-family: 'Ubuntu-Bold';font-size:  2.5rem;font-weight: 700;line-height: 46px;letter-spacing: 0px;text-align: left;}
.harvabl-section-6 .desp{color: rgb(255, 255, 255);font-family:  'Open Sans';font-size: 1rem;font-weight: 400;line-height: 27px;letter-spacing: 0px;text-align: left;}
.harvabl-section-6 .text-content{padding:0 10%;}
.harvabl-section-6 .content{min-height: unset;}

.harvabl-section-7{background: rgb(255, 255, 255);}
.harvabl-section-7 .content{padding: 5% 10%;min-height: unset;}
.harvabl-section-7 .title{color: rgb(16, 16, 16);font-family: 'Ubuntu-Bold';font-size: 2.5rem;font-weight: 700;line-height: 46px;letter-spacing: 0px;text-align: left;}
.harvabl-section-7 .sub-title{color: rgb(16, 16, 16);font-family: 'Ubuntu-Bold';font-size: 1.125rem;font-weight: 700;line-height: 26px;letter-spacing: 0px;text-align: left;}
.harvabl-section-7 .desp{color: rgb(255, 255, 255);font-family: 'Open Sans';font-size: 1rem;font-weight: 400;line-height: 27px;letter-spacing: 0px;text-align: left;}
.harvabl-section-7 .harvabl-container{ background: var(--lightgreen); border-radius: 10px; width: 100%; padding: 2%; }
.harvabl-section-7 .microalgae-icon{ width: 70px; }


.harvabl-section-7-2{background: url('/image/background/harvabl-bg5.png') no-repeat center center/cover;}
.harvabl-section-7-2 .content{padding: 5% 10%;min-height: unset;}

.harvabl-section-7-2 .title{color: rgb(255, 255, 255);font-family: 'Ubuntu-Bold';font-size: 2.5rem;font-weight: 700;line-height: 46px;letter-spacing: 0%;text-align: center;}
.harvabl-section-7-2 .sub-title{color: rgb(255, 255, 255);font-family: 'Open Sans';font-size: 1.125rem;font-weight: 700;line-height: 27px;letter-spacing: 0px;text-align: left;}
.harvabl-section-7-2 .desp{color: rgb(255, 255, 255);font-family: 'Open Sans';font-size: 1rem;font-weight: 400;line-height: 21px;letter-spacing: 0px;text-align: left;}
.harvabl-section-7-2 .harvabl-container{padding: 2%;}
.harvabl-section-7-2 .bottom-line{border-bottom: 1px solid white;}


.harvabl-section-8{background:var(--darkgreen);}
.harvabl-section-8 .content{padding: 5% 10%;min-height: unset;}
.harvabl-section-8 .title{color: rgb(255, 255, 255);font-family: 'Ubuntu-Bold';font-size: 2.5rem;font-weight: 700;line-height: 46px;letter-spacing: 0px;text-align: left;}
.harvabl-section-8 .sub-title{color: rgb(255, 255, 255);font-family: 'Open Sans';font-size: 1.125rem;font-weight: 700;line-height: 27px;letter-spacing: 0px;text-align: left;}
.harvabl-section-8 .desp{color: rgb(255, 255, 255);font-family: 'Open Sans';font-size: 1rem;font-weight: 400;line-height: 21px;letter-spacing: 0px;text-align: left;}
.harvabl-section-8 .revolutionary-icon{ width: 70px; }
.harvabl-section-8  .white-line{background: rgb(255, 255, 255);height: 2px;width: 100%;margin: 2% 0;}
.earth-outline{font-size: 4.5rem;color: rgb(255, 255, 255);}


.harvabl-section-9{background:var(--lightgreen);}
.harvabl-section-9 .content{padding: 5% 10%;min-height: unset;}
.harvabl-section-9 .title{color: rgb(255, 255, 255);font-family: 'Ubuntu-Bold';font-size: 2.5rem;font-weight: 700;line-height: 46px;letter-spacing: 0px;text-align: center;}
.harvabl-section-9 .sub-title{color: rgb(255, 255, 255);font-family: 'Open Sans';font-size: 1.25rem;font-weight: 700;line-height: 27px;letter-spacing: 0px;text-align: left;}
.harvabl-section-9 .desp{color: rgb(255, 255, 255);font-family: 'Open Sans';font-size: 1rem;font-weight: 400;line-height: 21px;letter-spacing: 0px;text-align: center;}
.harvabl-section-9 .harvabl-container{max-width: 500px;width: 500px;}



.harvabl-section-10{background: url('/image/background/harvabl-bg4.png') no-repeat center center/cover;}
.harvabl-section-10 .content{padding: 5% 10%;min-height: unset;}
.harvabl-section-10 .title{color: rgb(0, 0, 0);font-family: 'Ubuntu-Bold';font-size: 2.5rem;font-weight: 700;line-height: 46px;letter-spacing: 0px;text-align: center;}
.harvabl-section-10 .sub-title{color: rgb(0, 0, 0);font-family: 'Open Sans';font-size: 1rem;font-weight: 400;line-height: 27px;letter-spacing: 0px;text-align: center;}
.harvabl-section-10 .circle{max-width: 50%;}
.harvabl-section-10-mobile{display: none;}

.harvabl-section-10-desktop .logo{width: 60%;margin-left: 20%;margin-right: 20%;padding-bottom: 3%;}

footer{background:var(--darkgreen);}
footer .content{min-height: unset;padding: 2% 2%;}
footer p{color: rgb(255, 255, 255);font-family: 'Open Sans';font-size: 12px;font-weight: 400;line-height: 19px;letter-spacing: 0px;text-align: center;}
footer .white-line{background: rgb(255, 255, 255,0.2);height: 1px;width: 100%;margin: 2% 0;}

.swal2-container .swal2-confirm{background-color: var(--yellow);}

@media (max-width: 768px) {
    .harvabl-section-1 .title {
        font-size: 2.5rem;
        line-height: 45px;
    }

    .harvabl-section-1 .sub-title {
        font-size: 1.5rem;
        line-height: 30px;
    }

    .harvabl-section-1 .desp {
        font-size: 0.875rem;
        line-height: 20px;
    }
}


/* Desktop / Tablet Landscape */
@media screen and (max-width: 1200px) {
    .harvabl-section-3 .content{min-height: unset;}
}


/* Mobile */
@media screen and (max-width: 850px) {
    .harvabl-section-1 img{width: 90%;}
    .harvabl-section-1 .title{font-size: 3rem;padding-top: 20px;line-height: 25px;}
    .harvabl-section-1 .sub-title{font-size: 0.875rem}
    .harvabl-section-1 .desp{font-size: 0.75rem;line-height: 25px;}

    .harvabl-section-2 .text-content{padding:5% 0 }
    .harvabl-section-2 .content{padding: 5% 5%;}
    .harvabl-section-2 .title{font-size: 1.5rem;padding-top: 20px;line-height: 25px;}
    .harvabl-section-2 .desp{font-size: 0.75rem;line-height: 20px;}
    .harvabl-section-2 .buttonDiv{justify-content: center !important;align-items: center !important;}


    .harvabl-section-3 .harvabl-card-container{padding: 3% 1%;overflow-x: scroll;white-space: nowrap;width:100% }
    .harvabl-section-3 .content{min-height: unset;}
    .harvabl-section-3 .harvabl-card{width: 200px;padding: 1%;transition: 0.2s;cursor: pointer;display: inline-block;margin-right: 10px;}
    .harvabl-section-3 .img-fluid{max-width: 200px;width: 200px;}
    .harvabl-section-3 .title{font-size: 1.5rem;padding-top: 20px;line-height: 25px;}
    .harvabl-section-3 .sub-title{font-size: 1rem;line-height: 25px;}

    .harvabl-section-4 .text-content{padding:5% 0 }
    .harvabl-section-4 .title{font-size: 1.5rem;padding-top: 20px;line-height: 25px;}
    .harvabl-section-4 .sub-title{font-size: 12px;font-weight: 700;line-height: 27px;text-align: left;}
    .harvabl-section-4 .desp{font-size: 0.75rem;line-height: 20px;padding-top: 10px;}
    .harvabl-section-4 .content{padding: 5% 5%;}
    .harvabl-section-4 .restaurantRow .col-6{padding: 0;}
    .harvabl-section-4 .restaurant-list .sub-title::before { font-size: 1rem; }
    .harvabl-section-4 .buttonDiv{justify-content: center !important;align-items: center !important;}
    .harvabl-section-4 .restaurant-list .sub-title{margin:0 0 0.5rem 0;}
    .harvabl-section-4 .restaurantRow{margin-top: -5% !important;}

    .harvabl-section-5{background: url('/image/background/harvabl-bg3-mobile.png') no-repeat center center/cover;}
    .harvabl-section-5 .content{padding: 5% 5%;}
    .harvabl-section-5 .title{font-size: 1.5rem;padding-top: 20px;line-height: 25px;}
    .harvabl-section-5 .sub-title{font-size: 1rem;line-height: 25px;}
    .harvabl-section-5 .desp{font-size: 0.75rem;line-height: 20px;}
    .harvabl-section-5 .ion-checked{font-size: 2.5rem;}

    .harvabl-section-6 .text-content{padding: 0;}
    .harvabl-section-6 .content{padding: 5% 5%;}
    .harvabl-section-6 .title{font-size: 1.5rem;padding-top: 20px;line-height: 25px;}
    .harvabl-section-6 .desp{font-size: 0.75rem;line-height: 20px;}

    .harvabl-section-7 .content{padding: 5% 5%;}
    .harvabl-section-7 .title{font-size: 1.5rem;padding-top: 20px;line-height: 25px;text-align: center;}
    .harvabl-section-7 .sub-title{font-size: 1rem;line-height: 25px;text-align: center;}
    .harvabl-section-7 .desp{font-size: 0.75rem;line-height: 20px;text-align: center;}
    .harvabl-section-7 .microalgae-img{width: 60%;margin: 0 20%;}
    .harvabl-section-7 .harvabl-container {flex-direction: column;align-items: center;text-align: center;padding: 5%; }
    .harvabl-section-7 .harvabl-container img{padding-bottom:20px}
    .harvabl-section-7 .buttonDiv{justify-content: center !important;align-items: center !important;}

    .harvabl-section-7-2 .title{font-size: 1.7rem;line-height: 28px;}
    .harvabl-section-7-2 .sub-title{font-size: 1rem;line-height: 25px;}
    .harvabl-section-7-2 .desp{font-size: 0.75rem;line-height: 20px;}
    .harvabl-section-7-2 .harvabl-container{padding:5% 2% ;}
    .harvabl-section-7-2 .bottom-line-mobile{border-bottom: 1px solid white;}
    .harvabl-section-7-2 img{width: 80px;}

    .harvabl-section-8 .content{padding: 5% 5%;}
    .harvabl-section-8 .title{font-size: 1.5rem;padding-top: 20px;line-height: 25px;}
    .harvabl-section-8 .sub-title{font-size: 1rem;line-height: 25px;}
    .harvabl-section-8 .desp{font-size: 0.75rem;line-height: 20px;}
    .harvabl-section-8 .revolutionary-icon{width: 50px;}

    .harvabl-section-9 .content{padding: 5% 5%;}
    .harvabl-section-9 .title{font-size: 1.5rem;padding-top: 20px;line-height: 25px;}
    .harvabl-section-9 .sub-title{font-size: 1rem;line-height: 25px;}
    .harvabl-section-9 .desp{font-size: 0.75rem;line-height: 20px;}
    .harvabl-section-9 .harvabl-container{max-width: 300px;width: 300px;padding-bottom: 30px;}

    .harvabl-section-10-mobile{display: block;}
    .harvabl-section-10-desktop{display: none;}
    .harvabl-section-10 .content{padding: 5% 5%;}
    .harvabl-section-10 .title{font-size: 1.5rem;padding-top: 20px;line-height: 25px;}
    .harvabl-section-10 .sub-title{font-size: 1rem;line-height: 20px;}
    .harvabl-section-10 .desp{font-size: 0.75rem;line-height: 20px;}

    footer .content{padding-top: 10%;padding-bottom: 10%;}
}