html, body {
  scroll-behavior: smooth;
  margin: 0;
  padding: 0;
  /* height: 100%; */
}

main {
  scroll-snap-type: y mandatory;
  width: 100%;
}
#animated-text {
     fill: #ceffd6;
     font-weight: 100;
     font-size: clamp(1.5rem,3vw,3vw);
     height: 100px;
}
 #cursor {
     display: inline;
     fill: #14d734;
     font-size: 52px;
     font-weight: 100;
     animation: blink 0.5s step-end infinite;
}
 @keyframes blink {
     80% {
         opacity: 0;
    }
}
.fade-in, .fade-in-long {
  opacity: 0;
  transform: translateY(20px);
  will-change: opacity, transform;
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes floatUpDown {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px); 
  }
  100% {
    transform: translateY(0px);
  }
}
a{
    transition: all 0.3s ease!important;
}
.floating-icon {
  display: block;             
  width: 60px;                 
  height: 60px;                
  object-fit: contain;         
  animation-name: floatUpDown; 
  animation-iteration-count: infinite; 
  animation-timing-function: ease-in-out; 
  animation-fill-mode: both;   
}
.icon-1 {
  animation-duration: 3s;   
  animation-delay: 0s;      
}


.icon-2 {
  animation-duration: 4s;   
  animation-delay: 0.5s;    
}


.icon-3 {
  animation-duration: 5s;   
  animation-delay: 1s;      
}

.fade-in.in-view {
  animation: fadeInUp .7s ease-out forwards;
  

}

.fade-in-long.in-view {
  animation: fadeInUp .7s ease-out 0.1s forwards; 
}

 .l-eonardo {
     background: #fff;
     display: flex;
     flex-direction: row;
     justify-content: center;
     width: 100%;
}
 .l-eonardo .div {
     background: #fff;
     overflow: hidden;
     width: 100%;
}
 .l-eonardo .text-wrapper {
     position: relative;
     align-self: stretch;
     font-weight: var(--text-regular-normal-font-weight);
     color: #fff;
     font-size: var(--text-regular-normal-font-size);
     letter-spacing: var(--text-regular-normal-letter-spacing);
     line-height: var(--text-regular-normal-line-height);
     font-style: var(--text-regular-normal-font-style);
}
 .l-eonardo .actions {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     gap: 12px;
     align-self: stretch;
     width: 100%;
     flex: 0 0 auto;
     position: relative;
}
 .l-eonardo .button {
     all: unset;
     box-sizing: border-box;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 8px;
     padding: 12px 24px;
     position: relative;
     flex: 0 0 auto;
     margin: -1px -1px -1px 0;
     border: 1px solid #fff;
}
 .l-eonardo .column {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     gap: 16px;
     position: relative;
     flex: 1 1 0%;
}
 .l-eonardo .overlap-4 {
     max-width: 100%;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     flex-wrap: nowrap;
}
 .l-eonardo .hero-section {
     width: 100%;
     padding: unset;
}
.navbar {
     display: flex;
     height: 8vh;
     padding: 0;
     background: rgb(255 255 255 / 56%);
     backdrop-filter: blur(15px);
     -webkit-backdrop-filter: blur(10px);
     border-bottom: 1px solid rgb(255 255 255);
     flex-direction: column;
     justify-content: center;
     align-items: center;
}
 .navbar .container-3 {
     display: flex;
     flex-direction: row;
     width: 96vw;
     position: relative;
     padding: 0 2vw 0 2vw;
     justify-content: center;
}
 .navbar .content-7 {
     display: flex;
     position: relative;
     align-items: center;
     max-width: 1440px;
     width: 100%;
     justify-content: space-evenly;
}
 .navbar .group-3 {
     position: relative;
     height: 3vh;
     width: 9vw;
}
 .navbar .overlap-group-5 {
     position: relative;
}
 .navbar .vector {
     top: 5px;
     left: 0;
     width: 100%;
}
 .navbar .column-3 {
     width: 36vw;
     display: flex;
     align-items: center;
     gap: 3vw;
     position: relative;
     padding-left: 2vw;
}
 .navbar .column-3 li{
     list-style-type:none;
     a{
         color:#000;
     }
 }
 .navbar .link-text-wrapper {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     position: relative;
     flex: 0 0 auto;
}
 .navbar .link-text {
     position: relative;
     width: fit-content;
     margin-top: -1px;
     font-weight: var(--text-regular-semi-bold-font-weight);
     cursor: pointer;
     color: var(--color-schemes-color-scheme-1-text);
     font-size: var(--text-regular-normal-font-size);
     letter-spacing: var(--text-regular-normal-letter-spacing);
     line-height: var(--text-regular-normal-line-height);
     white-space: nowrap;
     font-style: var(--text-regular-normal-font-style);
}
 .navbar .link-text:hover{
     color:#287363;
 }
 .navbar .link-3 {
     display: inline-flex;
     flex-direction: column;
     align-items: flex-start;
     position: relative;
     flex: 0 0 auto;
}
 .navbar .nav-link-dropdown {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 4px;
     position: relative;
     align-self: stretch;
     width: 100%;
     flex: 0 0 auto;
}
 .navbar .actions-2 {
     width: 28vw;
     justify-content: flex-end;
     gap: 1vw;
     display: flex;
     position: relative;
}
 .navbar .button-wrapper {
     all: unset;
     box-sizing: border-box;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 8px;
     padding: 0vh 2vw;
     position: relative;
     flex: 0 0 auto;
     background: #22423b;
     border-radius: 10px;
     color: #fff;
     cursor: pointer;
}
 .navbar .button-4 {
     all: unset;
     box-sizing: border-box;
     display: flex;
     width: 41px;
     height: 42px;
     align-items: center;
     justify-content: center;
     gap: 8px;
     font-size: 40px;
     letter-spacing: -2px;
     font-weight: 700;
     padding: 8px 18px;
     position: relative;
     border-radius: 7px;
     border: 4px solid #22423b;
     cursor: pointer;
}
 .hero-section {
     width: 1598px;
}
 .hero-section .overlap-group {
     position: relative;
     width: 100%;
     top: 0;
     background: #00191a;
     display: flex;
}
 .hero-section .rectangle {
     width: 100%;
     background-image: linear-gradient(90deg, #002425, rgba(0, 123, 128, 0)), url(/wp-content/themes/amhytech/img/imgimage-1.png);
     background-position: bottom;
     background-size: cover;
     background-repeat: no-repeat;
    filter: contrast(1.2) brightness(1.2);
}
 .hero-section .rectangle:after {
     content: '';
     position: absolute;
     left: 30%;
     top: -40px;
     opacity: 0.5;
     width: 49%;
     min-height: 72vh;
     z-index: 100;
     background-image: url(/wp-content/themes/amhytech/img/right.svg);
     background-size: 100%;
}
 .why-ammonia:after {
     content: '';
     position: absolute;
     left: 20%;
     transform: rotate(218deg);
     top: -51px;
     opacity: .6;
     width: 49%;
     min-height: 72vh;
     z-index: 100;
     background-image: url(/wp-content/themes/amhytech/img/right.svg);
     background-size: 100%;
     z-index: -1;
}
 .challenges-section:after {
     content: '';
     position: absolute;
     left: 30%;
     transform: rotate(110deg);
     bottom: 151px;
     opacity: 1;
     width: 49%;
     min-height: 72vh;
     z-index: 100;
     background-image: url(/wp-content/themes/amhytech/img/right.svg);
     background-size: 100%;
}
 .hero-section .column {
     display: flex;
     flex-direction: column;
     height: 319px;
     align-items: flex-start;
     gap: 32px;
     position: absolute;
     transform: translate(-23vh, 12vh);
     left: 21vw;
     width: 94%;
}
 .hero-section .content {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     gap: 1vh;
     position: relative;
     align-self: stretch;
     width: 100%;
     flex-wrap: wrap;
     align-content: flex-start;
}
 .hero-section .medium-length-hero {
     position: relative;
     font-weight: 600;
     color: var(--primitives-color-white);
}
 .hero-section h1.text-wrapper {
     color: #fff;
     letter-spacing: 0;
     font-weight: 600;
     text-align: left;
     font-size: clamp(3rem,4vw,4vw);
}
 .hero-section h1.text-wrapper span {
     font-size: clamp(3rem,4vw,4vw);
     color: #fff;
     font-weight: 600;
     display: block;
     letter-spacing: 0.35px;
}
 .hero-section .lorem-ipsum-dolor {
     position: relative;
     align-self: stretch;
     font-weight: var(--text-medium-normal-font-weight);
     color: var(--primitives-color-white);
     font-size: var(--text-medium-normal-font-size);
     letter-spacing: var(--text-medium-normal-letter-spacing);
     line-height: var(--text-medium-normal-line-height);
     font-style: var(--text-medium-normal-font-style);
     width: 70%;
     text-align: left;
}
 .hero-section .actions {
     display: inline-flex;
     align-items: flex-start;
     gap: 16px;
     position: relative;
     flex: 0 0 auto;
     margin-bottom: -52px;
     flex-direction: row;
}
 .hero-section .button {
     all: unset;
     box-sizing: border-box;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 8px;
     padding: 12px 24px;
     position: relative;
     flex: 0 0 auto;
     margin: -2px 0 -2px -2px;
     cursor: pointer;
     background: var(--primitives-color-white);
     border-radius: 10px;
     border: 1px solid var(--primitives-color-white);
}
 section .button-wrapper {
     all: unset;
     box-sizing: border-box;
     display: inline-flex;
     align-items: center;
     justify-content: center;
     gap: 8px;
     letter-spacing: 0.5px;
     padding: 12px 24px;
     position: relative;
     flex: 0 0 auto;
     margin: -1px -1px;
     border-radius: 10px;
     border: 1px solid #14d734;
     color: #fff;
     box-shadow: 0 2px 4px #14d73440;
     cursor:pointer;
     
}
section .button-wrapper:hover{
     transform:translateY(-3px);
     box-shadow: 0 6px 4px #14d73440;
     color: #00c228;
 }
.cta-section .button-wrapper{color: #000000;}
 section {
    height: 100vh;
    background: #f2f8f5;
    margin: 0px 0 0vh 0;
    text-align: center;
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    scroll-snap-align: start;
    transition: opacity 0.3s ease, transform 0.1s ease;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    opacity: 0.3;
    transform: translateY(10px);
}
section.visible {
  opacity: 1;
  transform: translateY(0);
}

section:nth-child(odd) {
}

section:nth-child(even) {
}
 section h2 {
     color: #4a5a5a;
     font-size: 1.4rem;
     font-weight: 700;
     margin-bottom: 1.2rem;
     opacity: 0.8;
}
 .maxsize{
     width: 1440px;
     max-width:1440px;
     padding: 0 4vw;
     display: flex;
     flex-direction: column;
     justify-content: center;
}
 .why-ammonia .why-title {
     font-size: clamp(1.8rem,2vw,2vw);
     font-weight: 700;
     margin: 0 auto 0.5rem auto;
     color: #1a2b2b;
}
 .why-ammonia .why-title .highlight {
     color: #547b75;
     font-weight: 800;
}
.why-ammonia .features .feature:hover{
    transform: translateY(-3px)!important;
    box-shadow:0 10px 10px #0000001f;
}
 .why-ammonia .why-subtitle {
     color: #6a7a7a;
     font-size: clamp(1rem,1.2vw,0.2vw);
     margin-bottom: 4vw;
     font-weight: 400;
}
 .why-ammonia .features {
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
     gap: 2.5rem;
     margin-bottom: 2.5rem;
}
 .why-ammonia .feature {
     background: #fff;
     border-radius: 16px;
     box-shadow: 0 2px 12px #0001;
     padding: 10px 10px 10px 20px;
     max-width: 33%;
     min-width: 30%;
     flex: 1 1 260px;
     gap: 5px 3%;
     display: flex;
     flex-direction: row;
     align-items: center;
     flex-wrap: wrap;
     align-content: flex-start;
     animation-duration: 3s;
}
 .why-ammonia .feature img {
     width: 13%;
}
 section h3{
     margin: 2vh 0;
     color:#999
}
 .why-ammonia .feature h3 {
     color: #1a2b2b;
     font-size: clamp(0.9rem,.9vw,.9vw);
     font-weight: 700;
     position: relative;
     width: 84%;
     line-height: 3vh;
     text-align: left;
}
 .why-ammonia .feature p {
     color: #444;
     font-size: clamp(0.8rem,0.8vw,0.8vw);
     margin: 0;
     text-align: left;
     line-height: 22px;
}
 .why-ammonia .demand {
     display: flex;
     align-items: center;
     justify-content: flex-end;
     gap: 1.2rem;
     min-height: 22vh;
     max-width: 100%;
     background: #ffffff;
     border-radius: 12px;
     margin: 2vh 0vw;
     box-shadow: 0 1px 6px #0001;
     flex-direction: row;
     flex-wrap: nowrap;
}
 .why-ammonia .demand img {
     margin-top: 0.2rem;
     width: 10vw;
     height: 7vh;
}
 .why-ammonia .demand h3 {
     color: #1a2b2b;
     font-size: 1.1rem;
     font-weight: 700;
     margin-bottom: 0.3rem;
     text-align: left;
}
 .why-ammonia .demand p {
     color: #444;
     font-size: 0.98rem;
     margin: 0;
     text-align: left;
}

 .fertilizer-to-fuel {
     background: #f2f8f5;
     padding: 0px 0 0 0;
     text-align: center;
     width: 100%;
}
 .ftf-container {
     max-width: 1440px;
     margin: 0 auto;
     padding: 0 4vw;
}
 .ftf-title {
     font-size: 2.2rem;
     font-weight: 800;
     color: #181f1f;
     margin-bottom: 0.5rem;
}
 .ftf-subtitle {
     color: #444;
     font-size: 1.1rem;
     margin-bottom: 2.5rem;
     font-weight: 400;
}
 .ftf-cards {
     display: flex;
     gap: 2vw;
     justify-content: center;
     flex-wrap: wrap;
}
 .ftf-card {
     background: #0000;
     box-shadow: none;
     overflow: hidden;
     position: relative;
     width: 31%;
     max-width: 100%;
     display: flex;
     flex-direction: column;
     transition: box-shadow 0.2s;
     box-shadow:0 10px 20px #00000038;
     align-items: center;
     justify-content: flex-end;
}
 .ftf-card:nth-of-type(1){
     .ftf-card-content{
         border-radius: 45px 8px 8px 45px ;
    }
     border-radius: 45px 8px 8px 45px ;
}
 .ftf-card:nth-of-type(2){
     .ftf-card-content{
         border-radius: 8px;
    }
     border-radius: 8px;
}
 .ftf-card:nth-of-type(3){
     .ftf-card-content{
         border-radius: 8px 45px 45px 8px ;
    }
     border-radius: 8px 45px 45px 8px;
}
 .ftf-card:hover {
     box-shadow: 0 8px 32px #0002;
}
 .ftf-img {
     width: 39vw;
     height: 71vh;
     object-fit: cover;
     display: block;
}
 .ftf-card-content {
     position: absolute;
     left: 0;
     bottom: 0;
     width: 100%;
     background: linear-gradient(0deg, rgb(19 45 40) 13%, rgb(0 0 0 / 0%) 100%, #22423b00 100%);
     color: #fff;
     padding: 2vw 1vw 2vh 1vw;
     text-align: left;
     gap: 7vh;
     height: 330px;
     padding-top: 90px;
     display: flex;
     align-items: center;
     flex-direction: column;
     justify-content: flex-start;
}
 .ftf-card-content h3,.tech-cards h3 {
     font-size: 1.25rem;
     font-weight: 600;
     margin: 0 0 0.5rem 0;
     color: #fff;
     padding: 0 3%;
     text-shadow: 0 1px 4px #000000;
}
 .ftf-card-content p,.tech-cards p {
     font-size: 0.98rem;
     margin: 0;
     color: #ffffff;
     padding: 0 5%;
     text-shadow: 0 1px 4px #000000;
}
 .challenges-section {
     padding: 0px 20px;
     background-color: #f8f6f2;
}

 .ch-container {
     max-width: 1200px;
     margin: 0 auto;
     position: relative;
}

 .ch-title {
     font-size: 32px;
     font-weight: 700;
     text-align: center;
     margin-bottom: 16px;
     color: #2a2a2a;
}

 .ch-heading {
     font-size: 28px;
     text-align: center;
     line-height: 1.3;
     margin-bottom: 8px;
     color: #2a2a2a;
}
 .ch-highlight {
     color: #547b75;

}

 .ch-subtitle {
     font-size: 18px;
     text-align: center;
     margin-bottom: 48px;
     color: #4f4f4f;
}

 .ch-content {
     display: flex;
     flex-wrap: nowrap;
     justify-content: space-between;
}

 .ch-text {
     flex: 1 1 45%;
     display: flex;
     gap: 5vh;
     flex-direction: column;
     align-items: flex-start;
     position: relative;
}

 .ch-item {

}

 .ch-item-title {
     font-size: clamp(1.3rem,1.4vw,1.4vw);
     font-weight: 600;
     margin-bottom: 8px;
     color: #2a2a2a;
     text-align: left;
}

 .ch-item-desc {
     font-size: 1vw;
     line-height: 1.5;
     color: #555555;
     text-align: left;
}

 .ch-visual {
     flex: 1 1 50%;
     position: relative;
     display: flex;
     justify-content: center;
     align-items: center;
     min-height: 56vh;
}

 .ch-main-img {
     width: auto;
     height: 75vh;
     position: relative;
     z-index: 1;
     margin-top: -70px;
}

 .ch-icon {
     position: absolute;
     width: 80px;
     height: 80px;
     background-color: #ffd60069;
     border: 1px solid #ffd600;
     border-radius: 50%;
     padding: 16px;
     z-index: 2;
     box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

 .ch-icon-bio {
     top: 20%;
     right: 26%;
}

 .ch-icon-cost {
     bottom: 38%;
     left: 25%;
     z-index: 0;
}

 .ch-icon-money {
     bottom: 10%;
     right: 30%;
}
 @media (max-width: 1100px) {
     .ftf-cards {
    }
     .ftf-card {
    }
}
 @media (max-width: 700px) {
     .fertilizer-to-fuel {
         padding: 32px 0 24px 0;
    }
     .ftf-title {
         font-size: 1.3rem;
    }
     .ftf-cards {
         flex-direction: column;
         align-items: center;
         text-align: center;
         gap: 1.5rem;
    }
}
 @media (max-width: 600px) {
     .why-ammonia {
         padding: 32px 0 16px 0;
    }
     .why-ammonia .why-title {
         font-size: 1.2rem;
    }
     .why-ammonia .feature {
         max-width: 100%;
         padding: 1.2rem 0.7rem 1rem 0.7rem;
    }
     .why-ammonia .demand {
         padding: 0.7rem 0.5rem;
    }
}
 .doing-section {
     background-color: #012d2f;
     padding: 0px 0px;
     height: 90vh;
}

 .doing-container {
     max-width: 100%;
     margin: 0 auto;
     display: flex;
     align-items: center;
     gap: 0px;
     flex-wrap: nowrap;
     flex-direction: row;
}

 .doing-left {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     gap: 26px;
     position: relative;
     z-index: 4;
     padding-left: 4%;
}

 .doing-icon-text {
     display: flex;
     align-items: center;
     gap: 8px;
     margin-bottom: 16px;
}

 .doing-icon {
     width: 24px;
     height: 24px;
}

 .doing-question {
     font-size: 18px;
     font-weight: 500;
     color: #6fb595;

     font-style: italic;
}

 .doing-title {
     font-size: clamp(0.5rem,2.6vw,2.6vw);
     font-weight: 700;
     line-height: 1.2;
     margin-bottom: 24px;
     color: #ffffff;
     text-align: left;
}

 .doing-paragraph {
     font-size: 1.3vw;
     line-height: 1.6;
     color: #d3e0dc;
     text-align: left;
}

 .doing-paragraph strong {
     color: #ffffff;
     font-weight: 600;
}

 .doing-right {
     display: flex;
     justify-content: center;
     align-items: center;
     position: relative;
}

 .doing-image {
     width: auto;
     position: relative;
     right: 0;
     height: 90vh;
}


 @media (max-width: 992px) {
     .doing-container {
         flex-direction: column;
         text-align: center;
    }
     .doing-left, .doing-right {
         flex: 1 1 100%;
    }
     .doing-left {
         margin-bottom: 40px;
    }
}
 @media (max-width: 576px) {
     .doing-title {
         font-size: 28px;
    }
     .doing-paragraph {
         font-size: 16px;
    }
     .doing-question {
         font-size: 16px;
    }
     .doing-image {
         border-radius: 4px;
    }
}
 .technology-section {
     padding: 40px 20px;
}

 .tech-container {
     max-width: 1440px;
     width: 1440px;
     margin: 0 auto;
     text-align: center;
}

 .tech-title {
     font-size: 36px;
     font-weight: 700;
     color: #000000;
     margin-bottom: 8px;
}

 .tech-subtitle {
     font-size: 18px;
     color: #333333;
     margin-bottom: 48px;
}

 .tech-cards {
     display: flex;
     flex-wrap: wrap;
     gap: 32px;
     justify-content: center;
     width: 100%;
     flex-direction: row;
}

 .tech-card {
     position: relative;
     width: 44%;
     height: 73VH;
     overflow: hidden;
     background-size: cover;
     background-position: center center;
     box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

 .tech-card-overlay {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;

     background: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0));
     z-index: 1;
}

 .tech-card-content {
     position: absolute;
     bottom: 0;
     z-index: 2;
     padding: 44px;
     gap: 28px;
     height: 36vh;
     color: #ffffff;
     display: flex;
     flex-direction: column;
     flex-wrap: wrap;
     align-items: center;
     background: linear-gradient(0deg, rgb(19 45 40) 13%, rgb(0 0 0 / 0%) 100%, #22423b00 100%);
     justify-content: space-around;
}
 .tech-card:nth-of-type(1){
     border-radius: 50px 5px 5px 50px;

}
 .tech-card:nth-of-type(2){
     border-radius: 4px 50px 50px 4px;

}

 .card-heading {
     font-size: 20px;
     font-weight: 600;
     margin-bottom: 12px;
     line-height: 1.3;
}

 .card-text {
     font-size: 16px;
     line-height: 1.5;
     margin-bottom: 20px;
     opacity: 0.9;

}

 .card-button {
     display: inline-block;
     padding: 10px 23px;
     font-size: 13px;
     font-weight: 100;
     color: #00ff00;
     background: #00000040;
     text-decoration: none;
     border: 1px solid #00ff00;
    animation-direction:3s;
     border-radius: 9999px;
     transition: background-color 0.3s ease, color 0.3s ease;
}

 .card-button:hover {
     color: #ffffff;
     transform: translateY(-3px)!important;
     box-shadow: 0 6px 4px #14d73440;
}

 @media (max-width: 992px) {
     .tech-cards {
         
         
    }
     .tech-card {
         flex: 1 1 100%;
         max-width: 600px;
    }
}
 @media (max-width: 576px) {
     .tech-title {
         font-size: 28px;
    }
     .tech-subtitle {
         font-size: 16px;
         margin-bottom: 32px;
    }
     .card-heading {
         font-size: 18px;
    }
     .card-text {
         font-size: 14px;
         margin-bottom: 16px;
    }
     .card-button {
         padding: 8px 20px;
         font-size: 13px;
    }
}
 .supported-section {
     background-color: #012d2f;
     padding: 16px 20px;
     height: 20vh;
     margin: unset!important;
}
 .supported-container {
     max-width: 1440px;
     margin: 0 auto;
     display: flex;
     align-items: center;
     justify-content: center;
     flex-wrap: wrap;
     gap: 14vw;
}
 .supported-text {
     font-size: 18px;
     font-weight: 600;
     color: #ffffff;
     white-space: nowrap;
}
 .supported-logos {
     display: flex;
     align-items: center;
     gap: 98px;
     flex-wrap: wrap;
}
 .logo-img {
     max-height: 40px;

     width: auto;
     object-fit: contain;
}

 @media (max-width: 576px) {
     .supported-container {
         flex-direction: column;
         gap: 16px;
    }
     .supported-logos {
         gap: 24px;
    }
}



 .cta-section {
     background-color: #eefdf9;
     padding: 12rem 20px;
}
 .cta-container {
     max-width: 1440px;
     margin: 0 auto;
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 40px;
     flex-wrap: wrap;
}

 .cta-left {
     flex: 1 1 45%;
}
 .cta-title {
     font-size: 2vw;
     font-weight: 700;
     color: #000000;
     line-height: 1.7;
}

 .cta-highlight {
     color: #6b6b6b;

     font-weight: 700;
}

 .cta-right {
     flex: 1 1 45%;
     min-width: 280px;
     display: flex;
     flex-direction: column;
     align-items: flex-start;
}
 .cta-text {
     font-size: 18px;
     color: #333333;
     margin-bottom: 24px;
     text-align: left;
}

 .cta-button {
     display: inline-block;
     padding: 12px 28px;
     font-size: 16px;
     font-weight: 600;
     color: #00c853;

     text-decoration: none;
     border: 2px solid #00c853;

     border-radius: 9999px;
     transition: background-color 0.3s ease, color 0.3s ease;
}

 .cta-button:hover {
     background-color: #00c853;

     color: #ffffff;

}

 @media (max-width: 992px) {
     .cta-container {
         flex-direction: column;
         text-align: center;
         align-items: center;
    }
     .cta-left, .cta-right {
         flex: 1 1 100%;
    }
     .cta-left {
         margin-bottom: 32px;
    }
     .cta-right {
         align-items: center;
    }
     .cta-text {
         margin-bottom: 16px;
    }
}
 @media (max-width: 576px) {
     .cta-title {
         font-size: 28px;
    }
     .cta-text {
         font-size: 16px;
    }
     .cta-button {
         padding: 10px 24px;
         font-size: 14px;
    }
}
 .footer {
     background-color: #012d2f;

     padding: 60px 20px 40px;
     color: #ffffff;
}

 .footer-top {
     max-width: 1200px;
     margin: 0 auto;
     display: flex;
     justify-content: space-between;
     gap: 40px;
     flex-wrap: wrap;
}

 .footer-left {
     flex: 1 1 300px;
     min-width: 280px;
     display: flex;
     flex-direction: column;
     gap: 20px;
}

 .footer-logo {
     font-size: 28px;
     font-weight: 700;
}
 .logo-green {
     color: #00ff00;

}
 .logo-white {
     color: #ffffff;
}

 .footer-newsletter-text {
     font-size: 16px;
     line-height: 1.5;
     color: #d3e0dc;

}

 .newsletter-form {
     display: flex;
     gap: 12px;
     flex-wrap: wrap;
}

 .newsletter-input {
     flex: 1 1 200px;
     padding: 12px 16px;
     font-size: 16px;
     color: #ffffff;
     background-color: transparent;
     border: 1px solid #ffffff;
     border-radius: 4px;
     outline: none;
}

 .newsletter-input::placeholder {
     color: #cccccc;
}

 .newsletter-button {
     padding: 12px 24px;
     font-size: 16px;
     font-weight: 600;
     color: #ffffff;
     background-color: transparent;
     border: 1px solid #ffffff;
     border-radius: 4px;
     cursor: pointer;
     transition: background-color 0.3s ease, color 0.3s ease;
}
 .newsletter-button:hover {
     background-color: #ffffff;
     color: #012d2f;
}

 .footer-agreement {
     font-size: 14px;
     color: #cccccc;
     line-height: 1.4;
}
 .footer-agreement .footer-link-inline {
     color: #ffffff;
     text-decoration: underline;
}

 .footer-links {
     display: flex;
     gap: 60px;
     flex: 2 1 500px;
     flex-wrap: wrap;
     justify-content: space-between;
}

 .footer-column {
     min-width: 140px;
     display: flex;
     flex-direction: column;
     gap: 12px;
}

 .column-title {
     font-size: 16px;
     font-weight: 600;
     color: #ffffff;
     margin-bottom: 8px;
}

 .column-list, .social-list {
     list-style: none;
     display: flex;
     flex-direction: column;
     gap: 8px;
}

 .column-link {
     font-size: 14px;
     color: #cccccc;
     text-decoration: none;
     transition: color 0.2s ease;
}
 .column-link:hover {
     color: #ffffff;
}

 .social-link {
     display: flex;
     align-items: center;
     gap: 8px;
     font-size: 14px;
     color: #cccccc;
     text-decoration: none;
     transition: color 0.2s ease;
}
 .social-link:hover {
     color: #ffffff;
}

 .social-icon {
     width: 20px;
     height: 20px;
     object-fit: contain;
}

 .footer-bottom {
     border-top: 1px solid #2a2a2a;
     margin-top: 60px;
     padding-top: 20px;
     max-width: 1200px;
     margin-left: auto;
     margin-right: auto;
     display: flex;
     justify-content: space-between;
     align-items: center;
     flex-wrap: wrap;
     gap: 20px;
}

 .bottom-left {
     font-size: 14px;
     color: #cccccc;
}

 .bottom-right {
     display: flex;
     gap: 24px;
     flex-wrap: wrap;
}
 .bottom-link {
     font-size: 14px;
     color: #cccccc;
     text-decoration: none;
     transition: color 0.2s ease;
}
 .bottom-link:hover {
     color: #ffffff;
}
#navbar {
  position: sticky;
  top: 0;
  width: 100%;
  transition: transform 0.3s ease;
  z-index: 999;
}


#navbar.hide {
  transform: translateY(-100%);
}
 @media (max-width: 992px) {
     .footer-top {
         flex-direction: column;
         align-items: flex-start;
    }
     .footer-links {
         justify-content: flex-start;
         gap: 40px;
         margin-top: 40px;
    }
     .footer-left {
         width: 100%;
    }
}
 @media (max-width: 576px) {
     .footer-left, .footer-links {
         flex: 1 1 100%;
    }
     .newsletter-form {
         flex-direction: column;
    }
     .newsletter-input {
         width: 100%;
    }
     .newsletter-button {
         width: 100%;
    }
     .footer-links {
         gap: 20px;
    }
     .footer-column {
         min-width: 120px;
    }
     .footer-bottom {
         flex-direction: column;
         text-align: center;
    }
     .bottom-right {
         justify-content: center;
    }
}
@media (max-width: 480px) {
}

@media (max-width: 768px) {
    @keyframes ship-move {
        from {
            background-position: left top;
        }
        to {
            background-position: center top;
        }
        }
        .hero-section .rectangle{
                animation: ship-move 5s ease-in-out forwards;
        }
    #navbar{
    background: #ffffffd1;
    height: 6.5vh;
    }
    section{
        height:100%;
    }
    .hero-section.visible{
        top:0;
        height: 65vh;
        margin: 0;
        .column{
            transform: translate(0vh, 12vh);
            left:2vh;
        }
        h1{
            font-size: 1.6rem;
            
            
            
            
            span{
             font-size:1.3rem;   
            }
        }
        p{
          font-size:13px;  
        }
    }
    .ftf-card{
        width:100%;
        border-radius:20px!important;
        .ftf-card-content{
          border-radius:20px!important;  
        }
        img{
            width:100%;
            height:50vh;
        }
    }
    .maxsize{
        justify-content:flex-start;
    }
    .ch-content{
        flex-direction: column-reverse;  
        .ch-main-img{
            height:50vh;
        }
        .ch-icon-cost{
            left:5%
        }
        .ch-icon-bio{
            top:0%;
            right:16%
        }
        .ch-icon{
            padding:13px;
            width:70px;
            height:70px;
        }
        .ch-text{
            gap:0px;
        }
    }
    .doing-section{
        height: 100%;
        .doing-container{
            display: flex;
            flex-direction: column-reverse;
            flex-wrap: nowrap;
            justify-content: flex-end;
            .doing-right{
                height:50vh;
                img{
                   height:50vh; 
                }
            }
        }
        .doing-right:before{
            content: '';
            width: 100%;
            height: 101%;
            position: absolute;
            z-index: 3;
            top: 0;
            background: linear-gradient(0deg, rgb(1 45 47) 3%, rgb(0 0 0 / 0%) 100%, #22423b00 100%);
        }
    }
    .tech-card {
         height: 50vh;
         border-radius: 16px!important;
    }
            .hamburger-button {
            width: 40px;
            height: 29px;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            background: transparent;
            border: none;
            cursor: pointer;
            padding: 0;
            z-index: 1001; 
        }

        .hamburger-button .line {
            width: 28px;
            height: 3px;
            background-color: #333;
            border-radius: 3px;
            transition: all 0.3s ease-in-out;
            transform-origin: center;
        }
        
        
        .hamburger-button.open .line-1 {
            transform: translateY(9.5px) rotate(45deg);
        }
        .hamburger-button.open .line-2 { opacity: 0; }
        .hamburger-button.open .line-3 {
            transform: translateY(-9.5px) rotate(-45deg);
        }

        
        #mobile-menu-panel {
            position: fixed;
            top: 0;
            right: 0; 
            height: 94vh;
            width: 85%;
            max-width: 320px;
            background-color: white;
            box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
            transform: translateX(100%); 
            transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            z-index: 1000;
            overflow-y: auto;
            display: flex;
            flex-direction: column;
            padding-left: 4%;
            padding-top:20px;
            li{
                list-style-type:none;        
            }
            .actions-2{
                width: 91%;
                display: flex;
                justify-content: space-around;
                position: absolute;
                bottom: 33px; 
                .button-wrapper{
                    width:60%
                }
            }
        }

        #mobile-menu-panel.open {
            transform: translateX(0); 
            .vector{
                width:50%;
                padding-left:8%;
            }
        }
        
        
        #mobile-menu-panel ul {
            list-style: none;
            padding: 0;
            margin: 0;
            flex-grow: 1; 
        }

        #mobile-menu-panel li a {
            display: block;
            font-size: 1.1rem;
            color: #374151; 
            padding: 1rem 1.5rem;
            border-bottom: 1px solid #f3f4f6; 
            transition: background-color 0.2s ease, color 0.2s ease;
        }
        
        #mobile-menu-panel li a:hover {
            background-color: #f9fafb; 
            color: #2563eb; 
            padding-right: 2rem; 
        }
        
        
        .actions-container {
            padding: 1rem 1.5rem 1.5rem;
            border-top: 1px solid #e5e7eb;
            background-color: #f9fafb;
            display: flex;
            gap: 0.75rem;
            align-items: center;
        }

        .actions-container .button-wrapper {
            flex-grow: 1; 
            display: block;
            text-align: center;
            padding: 0.75rem 1rem;
            background-color: #3b82f6; 
            color: white;
            border-radius: 8px;
            font-weight: 500;
            transition: background-color 0.2s ease;
            text-decoration: none;
        }
        .actions-container .button-wrapper:hover {
            background-color: #2563eb; 
        }
        
        .actions-container .button-4 {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 44px;
            height: 44px;
            background-color: #e5e7eb;
            color: #4b5563;
            font-weight: bold;
            border-radius: 8px;
            transition: background-color 0.2s ease, color 0.2s ease;
            text-decoration: none;
            font-size: 1.1rem;
        }
        .actions-container .button-4:hover {
            background-color: #0a66c2; 
            color: white;
        }

        
        #menu-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.4s ease, visibility 0s 0.4s;
            z-index: 999;
        }

        #menu-overlay.open {
            opacity: 1;
            visibility: visible;
            transition: opacity 0.4s ease;
        }
		header.bg-white.shadow-md.p-4.flex.items-center.justify-between.sticky.top-0.z-50 {
		display: flex;
		flex-direction: row;
		width: 100%;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: space-between;
		height: auto;
            a{
                display:block;
                height: 2.5vh;
            }
		}
		header.bg-white.shadow-md.p-4.flex.items-center.justify-between.sticky.top-0.z-50 img{
			width: 9rem;
		}
}

@media (min-width: 768px){
    .doing-right:before{
    content: '';
    width: 100%;
    height:100%;
    position: absolute;
    z-index: 3;
    top: 0;
    background: linear-gradient(91deg, rgb(1 45 47) 3%, rgb(0 0 0 / 0%) 100%, #22423b00 100%);
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    section{
    }
    .maxsize{
        padding:0 2vw;
    }
}

@media (min-width: 1200px) and (max-width: 1439px) {
}

@media (min-width: 1440px) {
    
}