Untitled
unknown
plain_text
22 days ago
50 kB
3
Indexable
/* ==========================================================================
RESPONSIVE DESIGN
========================================================================== */
@media screen and (max-width: 1280px) {
.landing-image {
position: absolute;
top: 24%;
left: 20%;
width: 100% !important; /* Added !important to override other styles */
max-width: none; /* Remove max-width restriction */
height: auto;
object-fit: contain;
transform: none; /* Remove any transform that might affect width */
}
}
@media screen and (max-width: 1559px) {
.landing-image {
position: absolute;
top: 40%;
left: 40%;
object-fit: contain;
transform: none; /* Remove any transform that might affect width */
}
}
/* Medium-Large Screens (1201px - 1440px) */
@media screen and (max-width: 1440px) {
/* Landing/Hero Section */
#landing {
min-height: 90vh;
position: relative;
overflow: hidden;
background: #FFFFFF;
}
.landing-content {
width: 100%;
max-width: 1440px;
margin: 0 auto;
padding: 120px 5% 0;
position: relative;
z-index: 2;
}
.landing-text {
max-width: 450px;
margin-top: -70px;
position: relative;
z-index: 2;
}
.landing-text h1 {
font-size: 33px;
line-height: 1.3;
color: #018E47;
margin-bottom: -10px;
margin-left: -40px;
max-width: 350px;
margin-top: -5px;
}
.landing-text p {
font-size: 23px;
line-height: 1.4;
color: #181818;
margin-bottom: 10px;
max-width: 350px;
margin-left: -40px;
}
.learn-more-btn {
scale: 0.7;
margin-left: -90px;
margin-top: -50px;
}
.landing-image {
position: absolute;
right: 2%;
top: 32%;
width: 52%;
height: 68%;
z-index: 1;
}
.map-section {
width: 140%;
max-width: 1720px;
height: 1030px;
scale: 0.7;
right: 17%;
top: -150px;
}
.partners-section {
scale: 0.7;
margin-top: -380px; /* Reduced margin-top to bring it closer to map section */
margin-left: 3%;
}
/* Stats Section */
.stat-box {
scale: 0.9;
margin-bottom: -30px;
margin-left: 250px;
}
.stats-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
max-width: 1200px;
margin: 0 auto;
}
.stats-section {
padding: 160px 0;
scale: 1.0;
}
/* Bento Box Section */
#bento-box {
width: 100%;
max-width: 1440px;
margin: 0 auto;
padding: 60px 0;
position: relative;
z-index: 2;
}
#bento-box h2 {
font-size: 42px;
margin-bottom: -30px;
text-align: center;
color: #018E47;
}
.product-flex {
scale: 0.8;
padding: 0px 0;
gap: 20px; /* Increased gap for better spacing */
max-width: 1200px;
margin: 0 auto;
margin-bottom: -150px;
}
.product-group {
flex: 2 1 40%;
min-height: fit-content;
}
.product-group p {
font-size: 25px;
}
.product-group h3 {
font-size: 34px;
}
.product-group a {
scale: 0.8;
}
/* About Us Section */
#about-us {
width: 100%;
max-width: 1440px;
margin: 80px auto;
padding: 0 5%;
padding-bottom: 15px;
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
}
.about-image img {
width: 100%;
border-radius: 20px;
position: relative;
left: -3%;
top: 10px;
}
.about-content {
width: 100%;
padding: 40px;
position: relative;
z-index: 2;
left: -2%;
top: 15px;
}
.about-content h2 {
font-size: 30px;
color: #018E47;
margin-bottom: -30px;
line-height: 1.2;
max-width: 900px;
}
.about-content p:first-of-type {
font-size: 20px;
line-height: 1.4;
color: #181818;
margin-bottom: -10px;
}
.about-content p:last-of-type {
font-size: 20px;
line-height: 1.5;
color: #181818;
margin-bottom: 20px;
margin-left: 0px;
}
.about-content .learn-more-btn {
width: 280px;
height: 70px;
font-size: 24px;
padding: 15px 30px;
border: 3px solid #018E47;
border-radius: 16px;
background: transparent;
color: #018E47;
display: inline-flex;
align-items: center;
justify-content: center;
margin-top: -50px;
margin-left: -50px;
}
.about-content .learn-more-btn:hover {
background: #018E47;
color: #FFFFFF;
transition: all 0.3s ease;
}
#testimonials {
width: 100%;
top: -80px;
margin-bottom: -120px;
}
.testimonials-header h2 {
font-size: 32px;
margin-bottom: 30px;
}
.testimonials-header p {
font-size: 17px;
max-width: 700px;
margin-bottom: 40px;
}
.testimonial-card {
width: 500px; /* Fixed width for all cards */
height: 220px; /* Fixed height for all cards */
padding: 40px 60px;
}
.testimonial-card p {
font-size: 18px;
line-height: 26px;
margin-bottom: 15px;
}
.testimonial-card cite {
font-size: 20px;
line-height: 26px;
}
.testimonial-card footer span {
font-size: 20px;
line-height: 26px;
}
.scroll-dot {
scale: 0.7;
}
.scroll-progress {
scale: 0.9;
}
#cta {
margin-top: 10px;
}
}
/* Tablet (iPad) and smaller screens */
@media screen and (max-width: 1024px) {
/* Global Adjustments */
h2 {
font-size: clamp(32px, 4vw, 48px);
line-height: 1.2;
margin-bottom: clamp(20px, 3vh, 40px);
}
/* Landing Section */
#landing {
min-height: 100vh;
display: grid;
grid-template-columns: 1fr;
align-items: center;
}
/* Atlas Layer Adjustments */
.atlas-layer {
display: block; /* Re-enable the display */
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 53%;
background: url(../images/home-page/landing.webp) no-repeat center;
background-size: cover;
opacity: 0.9; /* Adjust opacity if needed */
z-index: 1; /* Ensure proper layering */
/* Optional: Add specific positioning for landscape mode */
transform: scale(1.2); /* Adjust scale to fit better */
transform-origin: center center;
/* Add smooth transitions */
transition: all 0.3s ease-in-out;
}
/* Ensure proper container positioning */
.landing-background {
position: absolute;
top: 0;
left: 0; /* Fixed the left value from 1 to 0 */
width: 100%;
height: 100%;
overflow: hidden;
}
.landing-content {
display: grid;
grid-template-columns: 1fr 1fr; /* Create two equal columns */
gap: clamp(20px, 4vw, 40px);
padding: clamp(20px, 4vh, 40px);
align-items: center;
height: 100vh;
bottom: 8rem;
}
.landing-image {
width: 70% !important;
top: 19.5% !important;
left: 33% !important;
}
.landing-text {
position: relative;
grid-column: 1;
transform: none;
opacity: 1;
top: -2rem;
left: 1rem; /* Added negative left value to move text left */
padding: 0; /* Removed left padding to allow more leftward movement */
text-align: left;
max-width: 80%;
display: flex;
flex-direction: column;
gap: clamp(15px, 2vh, 25px);
}
.landing-text h1 {
font-size: clamp(15px, 3.5vw, 24px); /* Adjusted font size for equalization */
line-height: 1.4; /* Adjusted line height for equalization */
margin: 0;
text-align: left;
max-width: 105%; /* Keep max-width to control line breaks */
}
.landing-text p {
font-size: clamp(13px, 3.5vw, 18px); /* Equalized font size with h1 */
line-height: 1.4; /* Equalized line height with h1 */
margin: 0;
text-align: justify; /* Justify the text */
text-align-last: left;
max-width: 97%; /* Keep max-width for paragraph */
}
.learn-more-btn {
/* Core button styles */
width: 160px;
height: 50px;
padding: 8px 16px;
font-size: 18px;
/* Positioning */
position: relative;
left: 6rem;
margin-top: -20px;
align-self: flex-start;
/* Visual styles */
border: 2px solid #018E47;
border-radius: 15px;
scale: 0.5;
transform-origin: left;
/* Fixed colors - no hover needed */
/* Green background */
color: #ffffff; /* White text */
}
/* Remove hover state completely */
.learn-more-btn:hover,
.learn-more-btn:active,
.learn-more-btn:focus {
background-color: #018E47;
color: #ffffff;
transform: none;
}
/* Map Section */
.map-section {
height: auto;
min-height: 80vh; /* Reduced from 100vh */
padding: 20px 0; /* Reduced padding */
scale: 0.7; /* Reduced scale */
width: 140%; /* Increased width to compensate for scale */
max-width: 1720px;
overflow: hidden;
position: relative;
right: 50%; /* Center the scaled content */
top: -450px; /* Reduce gap from landing section */
margin-bottom: -200px; /* Reduce bottom space */
}
.map-content {
width: 90%;
margin: 0 auto; /* Center the content */
padding: 0;
text-align: center;
}
.map-title {
font-size: clamp(32px, 4vw, 48px);
margin-bottom: 20px; /* Reduced margin */
}
.map-description,
.map-description-2 {
font-size: clamp(20px, 2.5vw, 28px);
margin-bottom: 10px; /* Reduced margin */
width: 50%;
margin-left: auto;
margin-right: auto;
}
.map-container {
height: 400px;
margin-top: 10px; /* Reduced margin */
position: relative;
width: 100%;
max-width: 1371.77px;
margin: 20px auto 0;
}
/* Adjust marker positions for better visibility */
.country-marker {
transform: scale(0.6); /* Reduced scale */
}
/* Update marker positions if needed */
.usa-marker { left: 12%; }
.estonia-marker { left: 32%; }
.austria-marker { left: 30%; }
.israel-marker { left: 33%; }
.taiwan-marker { left: 65%; }
.philippines-marker { left: 65%; }
/* Partners Section */
.partners-section {
padding: 40px 20px;
scale: 0.7; /* Scale down the entire section */
margin-top: -650px; /* Reduced margin-top to bring it closer to map section */
margin-left: 1%; /* Slight adjustment for centering */
width: 100%;
}
.partners-content {
max-width: 1000px;
margin: 0 auto 30px; /* Reduced bottom margin */
}
.partners-section .section-title {
font-size: clamp(32px, 4vw, 48px);
margin-bottom: 20px; /* Reduced margin */
}
.partners-section .section-text {
font-size: clamp(20px, 2.5vw, 28px);
margin-bottom: 30px;
width: 90%;
margin-left: auto;
margin-right: auto;
}
/* Partners Grid */
.partners-grid {
display: flex; /* Changed to flex for better control */
justify-content: center;
align-items: center;
gap: 30px;
padding: 0;
width: 100%;
max-width: 1400px;
margin: 0 auto;
}
.partner-logo {
width: 130px; /* Slightly larger for better visibility */
height: 130px;
padding: 15px;
}
/* Shop Links */
.shop-links {
display: flex;
justify-content: center;
align-items: center;
gap: 30px;
margin-top: 30px;
padding: 0 20px;
width: 90%;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}
.shop-link {
height: 40px; /* Adjusted height */
transition: transform 0.3s ease;
}
/* Optional: Add hover effects */
.partner-logo:hover,
.shop-link:hover {
transform: scale(1.05);
}
/* Stats Section */
.stats-section {
padding: 3rem 0;
margin-top: 0px;
position: relative;
width: 100vw;
left: 381px;
transform: translateX(-50%);
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
.stats-container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
display: flex;
justify-content: center;
transform: scale(0.3); /* Reduced scale further */
transform-origin: center center;
}
.stats-boxes {
width: 450px; /* Reduced width */
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 12px; /* Reduced gap */
position: relative;
}
.stat-box {
width: 350px; /* Reduced width */
height: 130px; /* Reduced height */
background: #FFFFFF;
border-radius: 14px; /* Slightly reduced border radius */
padding: 25px 35px; /* Reduced padding */
display: flex;
align-items: center;
box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.15);
margin-bottom: 0;
}
/* Image size adjustments */
.bottle-image,
.leaf-image,
.droplet-image {
width: 200px;
height: 50px; /* Fixed height instead of percentage */
margin-left: 220px;
object-fit: contain; /* Ensure image maintains aspect ratio */
transform: scale(4); /* Additional scaling if needed */
}
/* Optional: Individual image adjustments if needed */
.bottle-image {
height: 75px;
left: 6rem; /* Slightly smaller for bottle */
}
.leaf-image {
height: 150px;
left: -5%;
top: 6rem; /* Even smaller for leaf */
}
.droplet-image {
height: 65px; /* Smallest for droplet */
}
/* Ensure proper alignment with text */
.stat-box {
display: flex;
align-items: center;
gap: 15px;
}
.stat-text {
font-size: 24px; /* Reduced font size */
color: #181818;
line-height: 1.3;
max-width: 280px; /* Reduced max-width */
padding-left: 6px;
}
/* Bento Box Section */
#bento-box {
width: 100%;
max-width: 1440px;
margin: 0 auto;
padding: 60px 0;
position: relative;
z-index: 2;
}
#bento-box h2 {
font-size: 30px;
margin-bottom: -30px;
text-align: center;
color: #018E47;
}
.product-flex {
scale: 0.8;
padding: 0px 0;
gap: 20px; /* Increased gap for better spacing */
max-width: 1200px;
margin: 0 auto;
margin-bottom: -150px;
}
.product-group {
flex: 2 1 40%;
min-height: fit-content;
position: relative; /* Ensure proper positioning */
}
/* Remove hover effect and show content by default */
.product-group figcaption {
opacity: 1.2; /* Always visible */
background: linear-gradient(
90deg,
rgba(1, 142, 71, 0.90) 0%,
rgba(141, 207, 79, 0.90) 100%
);
padding: 30px 20px;
gap: 1.5rem; /* Reduced gap */
}
.product-group p {
font-size: 17px;
line-height: 1.3;
max-width: 85%;
margin: 0 auto;
}
.product-group h3 {
font-size: 20px;
margin-bottom: 10px;
}
/* Adjust button styling */
.product-group a {
scale: 0.8;
padding: 20px 50px;
font-size: 30px;
border: 2px solid #fff;
border-radius: 15px;
background: transparent;
color: #fff;
margin-top: 10px;
}
/* Remove hover effects */
.product-group a:hover {
background: transparent;
color: #fff;
}
/* Ensure images fit properly */
.product-group img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* About Section */
#about-us {
padding: 1% 4%; /* Reduced padding for a more compact layout */
margin-top: 120px; /* Adjusted margin for better spacing */
width: 100%; /* Full width */
position: relative;
left: 0; /* Centering adjustments */
background-color: #E7F5D9; /* Ensure background color is set */
margin-bottom: -200px;
}
.about-content {
max-width: 90%; /* Limit max-width for better fit */
margin: 0 auto; /* Center the content */
}
.about-content h2 {
font-size: 24px; /* Adjusted font size for smaller screens */
margin: 0; /* Remove margin for compactness */
text-align: center; /* Center text */
margin-bottom: -50px;
}
.about-title {
font-size: 20px; /* Adjusted font size */
color: #018E47;
margin-bottom: 8px; /* Adjusted margin */
}
.about-content {
margin-bottom: 255px; /* Adjusted margin */
}
.about-image img {
width: 100%; /* Full width */
max-width: 100%; /* Allow full width on smaller screens */
height: auto; /* Maintain aspect ratio */
margin: 10px auto; /* Reduced margin for compactness */
margin-bottom: 350px;
}
/* Testimonials Section */
#testimonials {
width: 100%;
top: -80px;
margin-bottom: -620px;
}
.testimonials-header h2 {
font-size: 29px;
margin-bottom: 30px;
}
.testimonials-header p {
font-size: 15px;
max-width: 600px;
margin-bottom: 40px;
}
.testimonial-card {
width: 400px; /* Fixed width for all cards */
height: 220px; /* Fixed height for all cards */
padding: 40px 60px;
}
.testimonial-card p {
font-size: 13px;
line-height: 26px;
margin-bottom: 15px;
}
.testimonial-card cite {
font-size: 15px;
line-height: 20px;
}
.testimonial-card footer span {
font-size: 20px;
line-height: 26px;
}
.scroll-dot {
scale: 0.7;
}
.scroll-progress {
scale: 0.9;
}
}
@media screen and (max-width: 1024px) and (orientation: landscape) {
/* Global Adjustments */
h2 {
font-size: clamp(28px, 3.5vw, 40px); /* Adjusted for landscape */
line-height: 1.2;
margin-bottom: clamp(15px, 2vh, 30px); /* Adjusted for landscape */
}
/* Landing Section */
#landing {
min-height: 100vh;
display: grid;
grid-template-columns: 1fr;
align-items: center;
}
.landing-image {
width: 58%; /* Adjust image size for landscape */
top: 35.5% !important; /* Adjust vertical position */
left: 33% !important; /* Shift it to the right */
transform: translate(-50%, -50%); /* Keep it centered */
}
/* Atlas Layer Adjustments */
.atlas-layer {
display: block; /* Re-enable the display */
position: absolute;
top: 0;
left: -4%;
width: 100%;
height: 80%;
background: url(../images/home-page/landing.webp) no-repeat center;
background-size: cover;
opacity: 0.9; /* Adjust opacity if needed */
z-index: 1; /* Ensure proper layering */
transform: scale(1.1); /* Adjust scale to fit better */
transform-origin: center center;
transition: all 0.3s ease-in-out;
}
.landing-content {
display: grid;
grid-template-columns: 1fr 1fr; /* Create two equal columns */
gap: clamp(15px, 3vw, 30px); /* Adjusted gap for landscape */
padding: clamp(15px, 3vh, 30px); /* Adjusted padding for landscape */
align-items: center;
height: 100vh;
bottom: 8rem;
}
.landing-text {
position: relative;
grid-column: 1;
transform: none;
opacity: 1;
top: 7rem;
left: 3rem; /* Added negative left value to move text left */
padding: 0; /* Removed left padding to allow more leftward movement */
text-align: left;
max-width: 80%;
display: flex;
flex-direction: column;
gap: clamp(10px, 2vh, 20px); /* Adjusted gap for landscape */
}
.landing-text h1 {
font-size: clamp(24px, 3vw, 29px); /* Adjusted for landscape */
line-height: 1.3;
margin: 0;
text-align: left;
max-width: 90%; /* Adjusted max-width to control line breaks */
overflow: hidden; /* Hide overflow text */
text-overflow: ellipsis; /* Add ellipsis for overflow text */
display: -webkit-box; /* Use flexbox for multi-line truncation */
display: block; /* Fallback for non-webkit browsers */
-webkit-box-orient: vertical; /* Set box orientation */
}
.landing-text p {
font-size: clamp(16px, 2vw, 24px); /* Adjusted for landscape */
line-height: 1.4;
margin: 0;
text-align: justify; /* Justify the text */
text-align-last: left;
max-width: 81%;
}
.learn-more-btn {
width: 140px; /* Adjusted width for landscape */
height: 45px; /* Adjusted height for landscape */
padding: 8px 14px; /* Adjusted padding for landscape */
font-size: 16px; /* Adjusted font size for landscape */
position: relative;
left: 5.5rem; /* Adjusted left positioning for landscape */
margin-top: -15px; /* Adjusted margin for landscape */
align-self: flex-start;
border: 2px solid #018E47;
border-radius: 15px;
color: #ffffff; /* White text */
}
/* Remove hover state completely */
.learn-more-btn:hover,
.learn-more-btn:active,
.learn-more-btn:focus {
background-color: #018E47;
color: #ffffff;
transform: none;
}
/* Map Section */
.map-section {
height: auto;
min-height: 70vh;
width: 100%;
max-width: 100%;
overflow: hidden;
position: relative;
transform: translateX(-30%);
}
/* Targeting the SVG/Image */
.map-content {
position: relative;
width: 100%;
scale: 0.34;
margin-left: 0;
transform: translateX(0);
left: 27%;
}
/* Edit the h2 */
.map-section h2 {
font-size: 64px;
margin-bottom: 60px;
text-align: center;
line-height: 120%;
position: relative;
left: 0%;
width: 80%;
}
/* Edit the p */
.map-section p {
font-size: 45px;
max-width: 90%;
margin: 0 auto 20px;
position: relative;
left: 0%;
margin-bottom: 60px;
}
/* Partners Section */
.partners-section {
padding: 30px 15px; /* Adjusted padding for landscape */
scale: 0.8; /* Scale down the entire section */
margin-top: -600px; /* Adjusted margin-top to bring it closer to map section */
margin-left: 1%; /* Slight adjustment for centering */
width: 100%;
}
.partners-content {
max-width: 1000px;
margin: 0 auto 20px; /* Reduced bottom margin */
}
.partners-section .section-title {
font-size: clamp(28px, 3.5vw, 40px); /* Adjusted for landscape */
margin-bottom: 15px; /* Adjusted margin */
}
.partners-section .section-text {
font-size: clamp(18px, 2.5vw, 26px); /* Adjusted for landscape */
margin-bottom: 20px;
width: 90%;
margin-left: auto;
margin-right: auto;
}
/* Partners Grid */
.partners-grid {
display: flex; /* Changed to flex for better control */
justify-content: center;
align-items: center;
gap: 20px; /* Adjusted gap for landscape */
padding: 0;
width: 100%;
max-width: 1400px;
margin: 0 auto;
}
.partner-logo {
width: 120px; /* Adjusted for better visibility */
height: 120px; /* Adjusted for better visibility */
padding: 10px; /* Adjusted padding */
}
/* Shop Links */
.shop-links {
display: flex;
justify-content: center;
align-items: center;
gap: 20px; /* Adjusted gap for landscape */
margin-top: 20px; /* Adjusted margin */
padding: 0 10px; /* Adjusted padding */
width: 90%;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}
.shop-link {
height: 40px; /* Adjusted height */
transition: transform 0.3s ease;
}
/* Optional: Add hover effects */
.partner-logo:hover,
.shop-link:hover {
transform: scale(1.05);
}
/* Stats Section */
.stats-section {
padding: 2rem 0; /* Adjusted padding for landscape */
margin-top: 0px;
position: relative;
width: 100vw;
left: 0; /* Adjusted for landscape */
transform: translateX(0); /* Reset translation */
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
.stats-container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
display: flex;
justify-content: center;
transform: scale(0.3); /* Reduced scale further */
transform-origin: center center;
}
.stats-boxes {
width: 400px; /* Adjusted width for landscape */
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 10px; /* Adjusted gap */
position: relative;
}
.stat-box {
width: 400px; /* Adjusted width for landscape */
height: 120px; /* Adjusted height for landscape */
background: #FFFFFF;
border-radius: 14px; /* Slightly reduced border radius */
padding: 20px 30px; /* Adjusted padding for landscape */
display: flex;
align-items: center;
box-shadow: 0px 8px 24px rgba(0, 0, 0, 0.15);
margin-bottom: 0;
margin-left: 150px;
}
/* Image size adjustments */
.bottle-image,
.leaf-image,
.droplet-image {
width: 180px; /* Adjusted width for landscape */
height: 50px; /* Fixed height instead of percentage */
margin-left: 200px; /* Adjusted margin for landscape */
object-fit: contain; /* Ensure image maintains aspect ratio */
transform: scale(3); /* Adjusted scaling for landscape */
}
/* Optional: Individual image adjustments if needed */
.bottle-image {
height: 90px; /* Adjusted for landscape */
left: 5rem;
margin-left: 116px;
margin-top: -73px;
}
.leaf-image {
height: 140px; /* Adjusted for landscape */
left: -5%;
top: 5rem; /* Adjusted for landscape */
}
.droplet-image {
height: 60px; /* Adjusted for landscape */
}
/* Ensure proper alignment with text */
.stat-box {
display: flex;
align-items: center;
gap: 10px; /* Adjusted gap */
}
.stat-text {
font-size: 22px; /* Adjusted font size for landscape */
color: #181818;
line-height: 1.3;
max-width: 260px; /* Adjusted max-width for landscape */
padding-left: 6px;
}
/* Bento Box Section */
#bento-box {
width: 100%;
max-width: 1440px;
margin: 0 auto;
padding: 40px 0; /* Adjusted padding for landscape */
position: relative;
z-index: 2;
}
#bento-box h2 {
font-size: 28px; /* Adjusted font size for landscape */
margin-bottom: -20px; /* Adjusted margin */
text-align: center;
color: #018E47;
}
.product-flex {
scale: 0.8;
padding: 0px 0;
gap: 15px; /* Adjusted gap for landscape */
max-width: 1200px;
margin: 0 auto;
margin-bottom: -100px; /* Adjusted margin */
}
.product-group {
flex: 2 1 40%;
min-height: fit-content;
}
.product-group p {
font-size: 25px;
}
.product-group h3 {
font-size: 34px;
}
.product-group a {
scale: 0.8;
}
/* About Us Section */
#about-us {
width: 100%;
max-width: 1440px;
padding: 0 5%;
padding-bottom: 15px;
position: relative;
display: flex;
justify-content: space-between;
align-items: center;
}
.about-image img {
width: 100%;
border-radius: 20px;
position: relative;
left: -3%;
top: 10px;
}
.about-content {
width: 100%;
padding: 40px;
position: relative;
z-index: 2;
left: -2%;
top: 15px;
}
.about-content h2 {
font-size: 30px;
color: #018E47;
margin-bottom: -30px;
line-height: 1.2;
max-width: 900px;
}
.about-content p:first-of-type {
font-size: 20px;
line-height: 1.4;
color: #181818;
margin-bottom: -10px;
}
.about-content p:last-of-type {
font-size: 20px;
line-height: 1.5;
color: #181818;
margin-bottom: 20px;
margin-left: 0px;
}
.about-content .learn-more-btn {
width: 280px;
height: 70px;
font-size: 24px;
padding: 15px 30px;
border: 3px solid #018E47;
border-radius: 16px;
background: transparent;
color: #018E47;
display: inline-flex;
align-items: center;
justify-content: center;
margin-top: -50px;
margin-left: -50px;
}
.about-content .learn-more-btn:hover {
background: #018E47;
color: #FFFFFF;
transition: all 0.3s ease;
}
#cta {
margin-top: 0px;
}
}
@media only screen and (min-width: 320px) and (max-width: 600px) and (max-height: 1200px) {
/* Global Adjustments */
h2 {
font-size: clamp(24px, 5vw, 30px); /* Adjusted for mobile */
line-height: 1.2;
margin-bottom: clamp(15px, 2vh, 25px);
}
/* Landing Section */
#landing {
min-height: 100vh;
display: flex; /* Changed to flex for better stacking */
flex-direction: column; /* Stack items vertically */
align-items: center;
}
.landing-content {
display: grid;
grid-template-columns: 1fr 1fr; /* Create two equal columns */
gap: clamp(20px, 4vw, 40px);
padding: clamp(20px, 4vh, 40px);
align-items: center;
height: 100vh;
bottom: 8rem;
}
.landing-text {
position: relative;
grid-column: 1;
transform: none;
opacity: 1;
top: 4.0rem;
left: 5.1rem; /* Center the text horizontally */
padding: 0; /* Removed left padding to allow more leftward movement */
text-align: center; /* Center text alignment */
max-width: 205%;
display: flex;
flex-direction: column;
gap: clamp(15px, 2vh, 25px);
}
.landing-text h1 {
font-size: clamp(22px, 3.5vw, 24px); /* Adjusted font size for equalization */
line-height: 1.4; /* Adjusted line height for equalization */
margin: 0;
margin-left: -30px; /* Adjusted negative margin to move it left */
text-align: center; /* Center text alignment */
max-width: 100%; /* Adjusted max-width to control line breaks */
}
.landing-text p {
font-size: clamp(13px, 3.5vw, 18px); /* Equalized font size with h1 */
line-height: 1.4; /* Equalized line height with h1 */
margin: 0;
text-align: center; /* Justify text alignment */
max-width: 77%; /* Keep max-width for paragraph */
}
.landing-image {
width: 110% !important;
bottom: 33% !important;
top: 68% !important;
left: -5% !important;
}
.atlas-layer {
position: relative;
width: 180%;
max-width: 600px;
height: 100vh; /* Use viewport height */
margin: 0 auto;
transform: none;
overflow: hidden;
background-position: center;
background-size: cover;
}
/* Map Section */
.map-section {
height: auto;
min-height: 50vh; /* Adjusted for mobile */
padding: 10px 0; /* Reduced padding */
width: 100%; /* Full width */
max-width: 100%; /* Ensure it fits the screen */
overflow: hidden;
position: relative;
left: -149%;
top: 0; /* Reset top positioning */
margin-top: -170px;
margin-bottom: 10px; /* Adjusted bottom space */
scale: 0.4;
}
.map-title {
font-size: clamp(40px, 5vw, 30px); /* Adjusted for mobile */
max-width: 40%;
margin-bottom: 15px; /* Adjusted margin */
}
.map-description {
font-size: clamp(27px, 4vw, 20px); /* Adjusted for mobile */
margin-bottom: 10px; /* Adjusted margin */
max-width: 45%;
text-align: center; /* Center text */
}
.map-description-2 {
font-size: clamp(27px, 4vw, 20px); /* Adjusted for mobile */
margin-bottom: 10px; /* Adjusted margin */
max-width: 35%;
text-align: center; /* Center text */
}
/* Partners Section */
.partners-section {
padding: 40px 20px;
scale: 0.3; /* Scale down the entire section */
margin-top: -400px; /* Reduced margin-top to bring it closer to map section */
margin-left: 1%; /* Slight adjustment for centering */
width: 100%;
}
.partners-content {
max-width: 100%;
margin: 0 auto 30px; /* Reduced bottom margin */
}
.partners-section .section-title {
font-size: clamp(50px, 5vw, 30px);
margin-bottom: 20px; /* Reduced margin */
}
.partners-section .section-text {
font-size: clamp(35px, 2.5vw, 28px);
margin-bottom: 30px;
width: 300%;
margin-left: -100%;
margin-right: auto;
}
/* Partners Grid */
.partners-grid {
display: flex; /* Changed to flex for better control */
justify-content: center;
align-items: center;
gap: 30px;
padding: 0;
width: 50%;
max-width: 1400px;
margin: 0 auto;
}
.partner-logo {
width: 130px; /* Slightly larger for better visibility */
height: 130px;
padding: 15px;
}
/* Shop Links */
.shop-links {
display: flex;
justify-content: center;
align-items: center;
gap: 30px;
margin-top: 30px;
padding: 0 20px;
width: 90%;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}
.shop-link {
height: 40px; /* Adjusted height */
transition: transform 0.3s ease;
}
/* Optional: Add hover effects */
.partner-logo:hover,
.shop-link:hover {
transform: scale(1.05);
}
/* Stats Section */
.stats-section {
padding: 1rem 0; /* Reduced padding for a more compact layout */
margin-top: -100px;
position: relative;
width: 100vw;
left: 0; /* Reset left positioning */
transform: translateX(0); /* Reset translation */
display: flex;
justify-content: center;
align-items: center;
overflow: hidden;
}
.stats-container {
width: 90%; /* Increased width for better fit on mobile */
max-width: none; /* Remove max-width restriction */
margin: 0 auto;
display: flex;
justify-content: center;
transform: scale(1); /* Reset scale for mobile */
}
.stats-boxes {
width: 50%; /* Full width for mobile */
margin: 0 auto;
display: flex;
flex-direction: column;
gap: 2px; /* Reduced gap for mobile */
position: relative;
left: -42%;
}
.stat-box {
width: 100%; /* Full width for mobile */
height: 70px; /* Reduced height for mobile */
background: #FFFFFF;
border-radius: 14px; /* Slightly reduced border radius */
padding: 15px 3px; /* Reduced padding for mobile */
display: flex;
align-items: center;
box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1); /* Reduced shadow for mobile */
margin-bottom: 0;
}
/* Image size adjustments */
.bottle-image,
.leaf-image,
.droplet-image {
width: 100px;
height: 90px; /* Fixed height instead of percentage */
margin-left: 20px;
object-fit: contain; /* Ensure image maintains aspect ratio */
transform: scale(2.5); /* Additional scaling if needed */
}
/* Optional: Individual image adjustments if needed */
.bottle-image {
height: 480px;
left: 1.95rem; /* Slightly smaller for bottle */
}
.leaf-image {
height: 100px;
left: 15%;
top: 4rem; /* Even smaller for leaf */
}
.droplet-image {
height: 65px; /* Smallest for droplet */
}
/* Ensure proper alignment with text */
.stat-box {
display: flex;
align-items: center;
gap: 10px; /* Reduced gap for mobile */
}
.stat-text {
font-size: 12px; /* Reduced font size for mobile */
color: #181818;
line-height: 1.2; /* Adjusted line height for mobile */
max-width: 400px; /* Reduced max-width for mobile */
padding-left: 0px;
padding-right: 0px;
}
/* Green Circle */
.stat-icon-container {
scale: 0.5;
margin-left: -10px;
margin-right: -20px;
margin-top: 5px;
}
/* Bento Box Section */
#bento-box {
width: 100%;
max-width: 600px;
margin: 0 auto;
padding: 60px 0;
position: relative;
z-index: 2;
}
#bento-box h2 {
font-size: 15px;
margin-bottom: 10px;
line-height: 20px;
text-align: center;
color: #018E47;
margin-top: -20px;
}
.product-flex {
scale: 0.7;
padding: 0px 0;
gap: 10px; /* Increased gap for better spacing */
max-width: 600px;
margin: 0 auto;
margin-bottom: -190px;
margin-top: -140px;
}
.product-group {
flex: 1 1 49%;
min-height: fit-content;
position: relative; /* Ensure proper positioning */
}
/* Remove hover effect and show content by default */
.product-group figcaption {
opacity: 1.2; /* Always visible */
background: linear-gradient(
90deg,
rgba(1, 142, 71, 0.90) 0%,
rgba(141, 207, 79, 0.90) 100%
);
padding: 30px 20px;
gap: 1.5rem; /* Reduced gap */
}
.product-group p {
font-size: 15px;
line-height: 1.3;
max-width: 85%;
margin: 0 auto;
}
.product-group h3 {
font-size: 20px;
margin-bottom: 10px;
}
/* Adjust button styling */
.product-group a {
scale: 0.9;
padding: 20px 40px;
font-size: 17px;
border: 2px solid #fff;
border-radius: 15px;
background: transparent;
color: #fff;
margin-top: 10px;
}
/* Remove hover effects */
.product-group a:hover {
background: transparent;
color: #fff;
}
/* Ensure images fit properly */
.product-group img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* About Section */
#about-us {
padding: 1% -100px; /* Reduced padding for a more compact layout */
margin-top: 50px; /* Adjusted margin for better spacing */
width: 100%; /* Full width */
position: relative;
left: 0; /* Centering adjustments */
background-color: #E7F5D9; /* Ensure background color is set */
margin-bottom: -300px;
}
.about-content {
max-width: 100%; /* Limit max-width for better fit */
margin: 0 auto; /* Center the content */
margin-bottom: 105%; /* Adjusted margin */
margin-left: -80%;
margin-right: 20%;
}
.about-content .learn-more-btn { /* Corrected selector */
margin-top: -35%; /* Adjusted margin */
scale: 0.4;
}
.about-content h2 {
font-size: 18px; /* Adjusted font size for smaller screens */
margin: 0; /* Remove margin for compactness */
max-width: 80%;
text-align: center; /* Center text */
margin-bottom: -10px;
margin-left: 40px;
}
/* Adjusting the paragraph size */
.about-content p { /* Assuming you have a <p> element here */
margin-top: -60px;
line-height: 1.4; /* Adjust line height for readability */
scale: 0.7;
}
.about-image img {
margin-bottom: 420px;
margin-left: 85%;
scale: 0.8;
}
/* Testimonials Section */
#testimonials {
width: 100%;
top: -80px;
margin-bottom: 50px;
}
.testimonials-header h2 {
font-size: 19px;
margin-bottom: 30px;
}
.testimonials-header p {
font-size: 14px;
max-width: 300px;
margin-bottom: 40px;
line-height: normal;
}
.testimonial-card {
width: 350px; /* Fixed width for all cards */
height: 180px; /* Fixed height for all cards */
padding: 40px 60px;
}
.testimonial-card p {
font-size: 11px;
line-height: 16px;
margin-bottom: 15px;
}
.testimonial-card cite {
font-size: 11px;
line-height: 20px;
}
.testimonial-card footer span {
font-size: 20px;
line-height: 26px;
}
.testimonial-card img {
scale: 0.5;
margin-bottom: -15px;
}
.scroll-dot {
scale: 0.7;
}
.scroll-progress {
scale: 0.9;
}
}
/* iphone resolution ================================================== */
/* ✅ iPhone XR (828×1792 px, DPR 2) - CSS Width: 414px */
@media screen and (min-width: 390px) and (max-width: 414px) and (max-height: 896px) {
.landing-image {
width: 100%;
top: 65% !important;
left: 50%;
transform: translate(-50%, -50%);
}
.map-section {
width: 100%;
left: -140% !important;
}
.map-title {
font-size: 55px;
width: 60%;
max-width: 100%;
}
.map-description, .map-description-2 {
font-size: 45px;
width: 60%;
max-width: 100%;
left: -50% !important;
}
.partners-section .section-title {
font-size: 64px;
margin-bottom: 20px; /* Reduced margin */
width: 180%;
position: relative;
left: -40%; /* Move title to the left */
}
.partners-section .section-text {
font-size: 48px;
margin-bottom: 30px;
width: 350%;
position: relative;
left: -25%; /* Move text to the left */
}
#bento-box h2 {
font-size: 20px;
}
.about-image img {
position: relative;
left: -19%;
}
}
/* ✅ iPhone 12 Pro (1170×2532 px, DPR 3) - CSS Width: 390px */
@media screen and (max-width: 390px) and (max-height: 844px) {
.landing-image {
top: 65% !important;
}
.map-content {
margin-left: -1% !important;
}
}
/* ✅ iPhone 14 Pro Max (1290×2796 px, DPR 3) - CSS Width: 430px */
@media screen and (min-width: 415px) and (max-width: 430px) and (max-height: 932px) {
.landing-image {
top: 63% !important;
}
.map-content {
margin-left: 15%;
}
.map-title, .map-description, .map-description-2 {
font-size: 38px;
max-width: 60%;
width: 100%;
}
}
/* TABLET RESOLUTION =========================================================== */
/* ✅ iPad (9.7", 10.2") - 768×1024 px */
@media screen and (min-width: 768px) and (max-width: 1023px) and (max-height: 1024px) {
.landing-image {
width: 150px;
top: 50%;
left: 50%;
}
}
/* ✅ iPad Pro 12.9" - 1024×1366 px */
@media screen and (min-width: 1024px) and (max-width: 1366px) and (max-height: 1366px) {
.landing-image {
width: 180px;
top: 16.2% !important;
left: 50%;
}
}
/* LANDSCAPE RESOLUTION =========================================================== */
/* ✅ iPad Landscape (1024×768) */
@media screen and (min-width: 1024px) and (max-width: 1366px) and (max-height: 1024px) and (orientation: landscape) {
.landing-image {
width: 160px;
top: 35.5% !important;
left: 50%;
}
}
/* ✅ iPad Pro 12.9" Landscape (1366×1024) */
@media screen and (min-width: 1366px) and (max-width: 1366px) and (orientation: landscape) {
.landing-image {
width: 70%;
top: 37% !important;
left: 33%;
}
}
Editor is loading...
Leave a Comment