@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100..900&display=swap');

body{
      font-size: 16px;
      font-family: "Noto Sans TC";
      letter-spacing: 0.1em;
}
a{
      text-decoration: none;
      color: steelblue;
}
.topnav{
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-top: 20px;
      padding-bottom: 20px;
}
.logo{
      font-size: 24px;
      color: steelblue;
      display: flex;
      align-items: center;
      justify-content: flex-start;
}
.logo img{
      height: 50px;
      margin-right: 15px;
}
.menu{
      display: flex;
      align-items: center;
      justify-content: flex-end;
}
.menu-item{
      margin-left: 20px;
      color: steelblue;
      cursor: pointer;
      border-bottom: 2px solid transparent;
      padding: 15px 5px;
}
.menu-item:hover{
      border-bottom: 2px solid steelblue;
}
.menu-item.tt{
      transition: 0.5s;
}

.home-kv{
      background-size: cover;
      background-position: 50% 70%;
      background-repeat: no-repeat;
      background-image: url('images/flightbg_.jpg');
      padding-top: 35px;
      height: calc( 100vh - 112px );
      position: relative;
}
.cont{
      border: 3px solid white;
      border-width: 0 3px 3px 0;
      position: absolute;
      bottom: 80px;
      left: calc( 50% - 25px );
      width: 50px;
      height: 50px;
      z-index: 90;
      transform: rotate(45deg);
      animation: contani 2s infinite alternate;
}
@keyframes contani {
      0%{
            bottom: 80px;
      }
      100%{
            bottom: 100px;
      }
}

.home-kv .title{
      font-size: 45px;
      color: white;
}
.home-kv .button{
      font-size: 36px;
      margin-top: 30px;
}

.home-c{
      padding: 50px 0;
}
.home-c .row{
      padding: 50px 0 0;
}
.home-c-title{
      font-size: 36px;
      color: steelblue;
      margin-bottom: 30px;
}
.home-c img{
      width: 100%;
}
.footer{
      margin-top: 50px;
      border-top: 1px solid gray;
}
.footer-companies{
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding-bottom: 15px;
      border-bottom: 1px solid gray;
}
.footer-c-item{
      width: 100%;
      flex-shrink: 1;
      margin: 0 15px;
}
.footer-c-item img{
      width: 100%;
}
.footer-content{
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      padding: 50px 0;
}
.flink{
      margin-bottom: 15px;
}
.flink::before{
      content: '> '
}
.copyright{
      margin-top: 50px;
}
.footer-left{
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: flex-start;
}
.footer-right{
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      justify-content: flex-end;
}
.carbonluck img{
      width: 300px;
}
.offsetbytxt{
      margin-bottom: 20px;
}


.cal{
      background-size: cover;
      background-position: 50% 70%;
      background-repeat: no-repeat;
      background-image: url('images/flightbg_.jpg');
      padding-top: 35px;
      padding-bottom: 150px;
      position: relative;
}

.caltop{
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      width: 100%;
      color: white;
}
.caltop .title{
      font-size: 45px;
      
}
.caltop .cartlist{
      font-size: 30px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      cursor: pointer;
      position: relative;
      padding-right: 10px;
}
.caltop .cartlist i{
      margin-left: 10px;
}
.cartamount{

}
.cartamount span{
      font-size: 16px;
}

.calbox{
      background-color: rgba(255,255,255,0.9);
      width: 100%;
      padding: 50px;
      margin-top: 30px;
      font-size: 18px;
      border-radius: 10px;
      position: relative;
}

.step{
      margin-bottom: 30px;
}
.step .num{
      font-size: 24px;
      margin-bottom: 20px;
      font-weight: bold;
      display: flex;
      align-items: center;
      justify-content: space-between;
}
.step .num div{
      flex-shrink: 0;
}

.step .num::after{
      content: '';
      width: 100%;
      height: 1px;
      background-color: gray;
      margin-left: 15px;
}
.step-flex{
      display: flex;
      align-items: center;
      justify-content: flex-start;
}
.step-flex div:last-child{
      flex-shrink: 0;
      margin-left: 10px;
}
.step-flex div:first-child{
      flex-shrink: 0;
      margin-right: 10px;
}
.step-content{
      padding-left: 15px;
}
.step-row{
      margin-bottom: 15px;
}
.step-txt{
      margin-bottom: 10px;
}

.flight-box{
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      margin-bottom: 25px;
}
.fb-item{
      width: 100%;
      flex-shrink: 1;
      margin-right: 15px;
}
.fb-item:last-child{
      margin-right: 0px;
}
.fb-label{
      margin-bottom: 10px;
      font-weight: bold;
}
.fb-label i{
      margin-right: 10px;
}
.flight-row{
      display: flex;
      align-items: center;
      justify-content: flex-start;
      margin-bottom: 25px;
}
.fr-label{
      margin-right: 20px;
      flex-shrink: 0;
      font-weight: bold;
}

.calt-block{
      padding-left: 50px;
}
.calt .num img{
      width: 50px;
}

.calt .num{
      font-size: 24px;
      margin-bottom: 20px;
      font-weight: bold;
      display: flex;
      align-items: center;
      justify-content: flex-start;
}

.tonnes{
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 25px;
      border: 1px solid gray;
      border-radius: 10px;
      background-color: white;
      position: relative;
      overflow: hidden;
}
.tonnes-num{
      font-size: 26px;
}
.tonnes-txt{
      /* margin-left: 10px; */
}
.tonnes-btn{
      margin-top: 25px;
}
.tloader{
      position: absolute;
      width: 100%;
      height: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      z-index: 99;
      top: 0;
      left: 0;
      background-color: white;
      opacity: 0;
      transition: 0.5s;
}
.tloader.show{
      opacity: 1;
      transition: 0s;
}

.airports{
      display: none;
      position: fixed;
      width: auto;
      max-height: 220px;
      overflow-x: hidden;
      overflow-y: auto;
      background-color: white;
      z-index: 999;
      border: 1px solid gray;
}
.airports-item{
      padding: 10px;
      cursor: pointer;
}
.airports-item:hover{
      background-color: steelblue;
      color: white;
}
.input-block{
      position: relative;
}
.showinput{
      z-index: 1
}
.searchinput{
      display: none;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 20;
}
.c-txt{
      padding: 10px;
      background-color: rgba(0,0,0,0.1);
}

#list{
      position: absolute;
      right: -20px;
      top: 50px;
      display: none;
      background-color: rgba(255,255,255,0.95);
      padding: 20px;
      border-radius: 10px;
      font-size: 16px;
      width: 400px;
      z-index: 999;
      box-shadow: 2px 2px 10px rgba(0,0,0,0.5);
}
.list-item{
      color: black;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
}
.li-content{
      
}
.li-tonnes{

}
.li-del{

}

.slidebox{
      position: relative;
}

.fn-box{
      display: flex;
      align-items: center;
      justify-content: flex-end;
      width: 100%;
      padding: 0px 0px 0;
      min-height: 40px;
}
.fn-box button{
      margin-left: 10px;
}
.project-list{
      display: flex;
      flex-direction: row;
      width: 100%;
      flex-wrap: wrap;
}
.project-item{
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      width: calc( ( 100% - 40px ) / 3 );
      padding: 20px;
      border-radius: 10px;
      transition: 0.5s;
      cursor: pointer;
      margin-right: 20px;
}
.project-item:nth-child(3n+3){
      margin-right: 0px;
}
.project-item .btn{
      margin-top: 10px;
}

.pi-photo{
      flex-shrink: 0;
      width: 150px;
      height: 150px;
      border-radius: 100%;
      overflow: hidden;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
}
.pi-info{
      width: 100%;
      flex-shrink: 1;
      margin-top: 10px;
}
.pi-name{
      font-size: 20px;
      color: steelblue;
      margin-bottom: 5px;
      font-weight: bold;
      text-align: center;
      width: 100%;
}
.pi-description{
      margin-bottom: 10px;
}
.pi-sdg{
      display: flex;
      align-items: center;
      justify-content: flex-start;
      margin-bottom: 10px;
}
.pi-sdg-p{
      margin: 0 5px 5px 0;
}
.pi-sdg-p img{
      width: 35px;
}
                                                                                                      
.pi-price{
      font-size: 20px;
      text-align: center;
      width: 100%;
}

.req.warning{
      border-color: crimson;
}
.labelreq.warning{
      color: crimson;
}

.ben-row{
      margin-bottom: 15px;
      display: flex;
      align-items: center;
      justify-content: flex-start;
}
.ben-txt{
      font-weight: bold;
      margin-right: 15px;
      width: 100px;
}
.step .num.thank{
      font-size: 36px;
      color:steelblue;
}


.overlay {
      position: fixed;
      top: 0; left: 0;
      width: 100vw; height: 100vh;
      background-color: rgba(0, 0, 0, 0.8);
      display: none;
      justify-content: center;
      align-items: center;
      z-index: 999;
}

.card {
      background: white;
      width: 300px;
      padding: 30px;
      border-radius: 20px;
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
      text-align: center;
      animation: popin 0.4s ease-out;
}

@keyframes popin {
      0% { transform: scale(0.6); opacity: 0; }
      100% { transform: scale(1); opacity: 1; }
}

.credit-card {
      width: 100%;
      height: 180px;
      background: linear-gradient(135deg, rgba(70, 130, 180, 1), rgba(70, 130, 180, 0.5));
      border-radius: 15px;
      margin-bottom: 20px;
      position: relative;
      overflow: hidden;
}

.credit-card::after {
      content: "";
      position: absolute;
      top: -20px; right: -20px;
      width: 100px; height: 100px;
      background: rgba(255, 255, 255, 0.2);
      transform: rotate(45deg);
}

.loading {
      font-size: 18px;
      margin-top: 10px;
      animation: pulse 1s infinite;
}

@keyframes pulse {
      0%, 100% { opacity: 0.4; }
      50% { opacity: 1; }
}

.success {
      display: none;
      font-size: 22px;
      color: #28a745;
      font-weight: bold;
      animation: fadein 0.6s ease;
}

@keyframes fadein {
      from { opacity: 0; transform: scale(0.9); }
      to { opacity: 1; transform: scale(1); }
}

#certpdf{
      position: relative;
      top: 0;
      left: 0VW;
      z-index: 9999;
      display: none;
      padding: 0px;
}
.certpdfp1{
      height: 1122px;
      width: 793px;
      position: absolute;
      background-color: white;
      position: relative;
      z-index: 999;
      display: block;
}

.certpdfp2{
      height: 1122px;
      width: 793px;
      position: absolute;
      background-color: white;
      position: relative;
      z-index: 999;
      display: block;
}
.svg-bg {
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.cert-date{
      font-size: 26px;
      position: absolute;
      top: 75px;
      left: 80px;
}

.cert-offset{
      position: absolute;
      top: 228px;
      left: 0px;
      padding: 0 80px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      height: 280px;
      width: 100%;
      color: white;
}
.cert-offset-name{
      font-size: 45px;
      font-weight: bold;
}
.cert-offset-amount{
      display: flex;
      align-items: flex-start;
      justify-content: flex-start;
      margin-top: 53px;
}
.coa-item{
      font-size: 30px;
      line-height: 1em;
      white-space: nowrap;
}
.coa-item span{
      font-size: 24px;
}
.coa-item:nth-child(2){
      font-size: 80px;
      line-height: 1em;
      margin-top: -46px;
      margin-left: -45px;
      margin-right: 10px;
}
.coa-item:nth-child(4){
      font-size: 80px;
      line-height: 1em;
      margin-top: -46px;
      margin-left: -75px;
}

.cert-project{
      position: absolute;
      top: 540px;
      left: 0px;
      padding: 0 100px;
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      width: 100%;
}
.cp-photo{
      border-radius: 100%;
      width: 100px;
      height: 100px;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      margin-right: 25px;
      flex-shrink: 0;
}
.cp-info{
      margin-right: 25px;
      width: 100%;
      flex-shrink: 1;
}
.qrcode{
      flex-shrink: 0;
}
.cp-info-name{
      color: steelblue;
      mask-border: 15px;
      font-size: 27px;
      font-weight: bold;
}
.cp-info-description{
      margin-bottom: 10px;
      font-size: 14px;
}
.cp-sdgs{
      display: flex;
      align-items: center;
      justify-content: flex-start;
      flex-wrap: wrap;
}
.cp-sdgs-item{

}
.cp-sdgs-item img{
      width: 34px;
      margin-right: 4px;
      margin-bottom: 4px;
}
.pc-right .cp-sdgs-item img{
      width: 50px;
      margin-right: 8px;
      margin-bottom: 8px;
}
.cert2-box{
      position: absolute;
      width: 100%;
      top: 257px;
      left: 0;
      padding: 0 80px;
}
.cert2-to{
      font-size: 18px;
      margin-bottom: 30px;
}


#cert2-table{
      background-color: transparent;
}
#cert2-table tr,#cert2-table td{
      background-color: transparent;
}
#cert2-table tr:first-child{
      border-bottom: 1px solid black;
      font-weight: bold;
}
#cert2-table tr td{
      text-align: right;
}
#cert2-table tr td:first-child{
      text-align: left;
}
/* .cr-col:nth-child(1){
      width: 100%;
      flex-shrink: 1;
}
.cr-col:nth-child(2){
      width: 150px;
}
.cr-col:nth-child(3){
      width: 150px;
}
.cr-col:nth-child(4){
      width: 150px;
} */
.listrow td{
      border: 0px;
}
.totalrow td{
      border-top: 1px solid black;
      border-bottom: 2px solid black;
      font-weight: bold;
      font-size: 20px;
}
.blankrow td{
      padding: 30px 0;
      border: 0px;
}

#previewImageWrapper{
      width: 250px;
}
.comment{
      padding-top: 120px;
      color: white;
      line-height: 1.8em;
}
#lang{
      position: relative;
}
.lang-menu{
      display: none;
      flex-direction: column;
      align-items: flex-end;
      justify-content: flex-start;
      position: absolute;
      top: 54px;
      right: 0;
      z-index: 99999;
      background-color: white;
      box-shadow: 2px 2px 10px rgba(0,0,0,0.5);
}
.lang-item{
      width: 100%;
      padding: 10px 20px;
      transition: 0.5s;
      white-space: nowrap;
}
.lang-item:hover{
      background-color: steelblue;
      color: white;
}
#lang:hover .lang-menu{
      display: flex;
}

.projectinfo{
      position: fixed;
      background-color: rgba(0,0,0,0.8);
      width: 100%;
      height: 100vh;
      overflow: hidden;
      z-index: 999;
      align-items: center;
      justify-content: center;
      display: none;
      top: 0;
      left: 0;
}
.projectinfo-card{
      width: 90%;
      height: 65vh;
      overflow: hidden;
      background-color: white;
      position: relative;
}
.pc-left{
      background-size: cover;
      background-repeat: no-repeat;
      background-position: center;
      position: absolute;
      top: 0;
      left: 0;
      width: 30%;
      height: 100%;
      z-index: 99999;
}
.pc-right{
      position: absolute;
      top: 0;
      right: 0;
      width: 70%;
      height: 100%;
      z-index: 99900;
      padding: 30px;
      overflow-y: auto;
}

.pc-name{
      font-size: 36px;
      font-weight: bold;
      color: steelblue;
      margin-bottom: 15px;
}
.pc-description{
      margin-bottom: 30px;
}

.pc-close{
      position: absolute;
      top: 30px;
      right: 30px;
      font-size: 50px;
      color: white;
      cursor: pointer;
}

#pc-map{
      height: 400px;
      border-radius: 5px;
      margin-top: 30px;
}