/*!
Theme Name: Ecoshift
Author: Christos Kolokythas
Author URI: https://aestetikdesign.com/
Version: 1.0.0
*/

body {
    font-family: "Montserrat", sans-serif;
}

/* Increase specificity to ensure override */
html body #fp-nav ul li a span, 
html body .fp-slidesNav ul li a span {
    background: white !important;
}

header {
    position: fixed;
    width: 100%;
    padding: 0;
    color: white;
    font-size: 1em;
    z-index: 1000;  /* Ensures the footer is above other content */
    transition: opacity 0.5s ease, visibility 0.5s ease;
    opacity: 1; /* Default state: fully visible */
    visibility: visible;
}

.hide-header {
    opacity: 0; /* Hide the header */
    visibility: hidden; /* Ensures the header is not interactable */
}

.fade-header {
    transition: opacity 1s ease, visibility 1s ease;
}

footer a {
    color: white;
}

.section {
    background-size:cover;
    background-position:center;
}

.slide-dark {
    width:100vw;
    height:100vh;
    background-color:rgba(0, 0, 0, 0.3);
    display:flex;
	flex-direction:column;
    justify-content: center;
    align-items: center;
}

.slide-none {
    width:100vw;
    height:100vh;
    background-color:rgba(0, 0, 0, 0);
    display:flex;
	flex-direction:column;
    justify-content: center;
    align-items: center;
}

.fp-watermark {
    display:none;
}

/* Customize the scrollbar */
.four-text::-webkit-scrollbar {
    width: 10px; /* Width of the scrollbar */
}

.four-text::-webkit-scrollbar-track {
    background: transparent;
    border-radius: 5px; /* Round the edges of the track */
}

.four-text::-webkit-scrollbar-thumb {
    background: #888; /* Color of the scrollbar thumb */
    border-radius: 5px; /* Round the edges of the thumb */
}

.four-text::-webkit-scrollbar-thumb:hover {
    background: #555; /* Color of the thumb on hover */
}

/* Firefox scrollbar styling */
.four-text {
    scrollbar-width: thin; /* Firefox only: Thin scrollbar */
    scrollbar-color: #888 transparent; /* Thumb and track colors for Firefox */
}

/* Optional: Add specific styles for the scrollbar buttons */
.four-text::-webkit-scrollbar-button {
    background: #555; /* Color of the up/down buttons */
    display: none; /* Hide the buttons if not needed */
}

/* Hide the default arrow */
.fp-controlArrow::after {
    display: none;
}

.fp-slidesNav.fp-bottom {
    bottom: 30px;
}

#section1 {
    overflow:hidden;
}

.background-video {
    position:absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 1; /* Send video behind other content */
}

.content-1 {
    display:flex;
    flex-direction:column;
    justify-content: center;
    align-items: center;
    position:absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9; /* Send video behind other content */
}

.content-1-image {
    width:100%;
    max-width:540px;
}

.content-1-image img {
    width:70%;
}

.content-1-text {
    font-weight:300;
    margin:20px 0 0 0;
    padding:0 40px 0 40px;
}

/* Default state */
/* Default state: start hidden */
body {
    opacity: 0; /* Start with the page hidden */
    transition: opacity 0.5s ease-in-out; /* Smooth transition for fade effects */
    background-image:url('images/slide-7-new.jpg');
    background-size: cover; /* Cover the entire screen */
    background-position: center; /* Center the background */
    background-repeat: no-repeat; /* No repeat */
    background-attachment: fixed; /* Fix the background during transitions */
}

/* Fade-in effect for the entire page */
body.fade-in {
    opacity: 1; /* Fade in to full opacity */
}

/* Fade-out effect for the entire page */
body.fade-out {
    opacity: 0; /* Fade out to zero opacity */
    pointer-events: none; /* Disable interactions during fade-out */
}

/* Fade-in effect for the entire page */
.fade-in {
    opacity: 1; /* Fade in to full opacity */
}

/* Fade-out effect for the entire page */
.fade-out {
    opacity: 0; /* Fade out to zero opacity */
    pointer-events: none; /* Disable interactions during fade-out */
}

/* Keyframes for further customization if needed */
@keyframes fadeOut {
    from { opacity: 1; }
    to { opacity: 0; }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}


/* Content area within the section to make it scrollable */
.content-8 {
    max-height: 80vh; /* Restrict max height */
    overflow-y: auto; /* Enable vertical scrolling */
    padding: 20px; /* Padding for better readability */
    box-sizing: border-box; /* Include padding in the height calculation */
}

/* Customize the scrollbar (Optional) */
.content-8::-webkit-scrollbar {
    width: 8px; /* Width of the scrollbar */
}
.content-8::-webkit-scrollbar-track {
    background: #f1f1f1; /* Track color */
}
.content-8::-webkit-scrollbar-thumb {
    background: #888; /* Scrollbar thumb color */
}
.content-8::-webkit-scrollbar-thumb:hover {
    background: #555; /* Thumb color on hover */
}


/* Hide arrows by default */
.fp-controlArrow {
    opacity: 0; /* Hide arrows */
    transition: opacity 0.3s ease; /* Smooth transition */
    pointer-events: none; /* Prevent interaction when hidden */
}

/* Show arrows on hover or when the slide is active */
.section:hover .fp-controlArrow,
.fp-controlArrow:hover,
.fp-controlArrow:focus,
.fp-controlArrow:active {
    opacity: 1; /* Show arrows */
    pointer-events: all; /* Allow interaction */
}



/* Default state: no animation */
.product-animation {
    width: 400px; /* Set width according to your needs */
    height: 400px; /* Set height according to your needs */
    background-size: cover; /* Cover the whole container */
    background-position: center; /* Center the background image */
    background-image: url('images/animation/image1.png'); /* Fallback for initial load */
}

/* Animation starts when the class is added */
.product-animation.start-animation {
    animation: colorChange 1s steps(9) infinite; /* Steps equal to the number of images */
}

/* Keyframes to change the background image */
@keyframes colorChange {
    0% { background-image: url('images/animation/image1.png'); }
    11.11% { background-image: url('images/animation/image2.png'); }
    22.22% { background-image: url('images/animation/image3.png'); }
    33.33% { background-image: url('images/animation/image4.png'); }
    44.44% { background-image: url('images/animation/image5.png'); }
    55.55% { background-image: url('images/animation/image6.png'); }
    66.66% { background-image: url('images/animation/image7.png'); }
    77.77% { background-image: url('images/animation/image8.png'); }
    88.88% { background-image: url('images/animation/image9.png'); }
    100% { background-image: url('images/animation/image1.png'); } /* Loop back to the first image */
}




@media only screen and (min-width : 320px) {
    header {
        text-align:center;
        top:30px;
    }
    header img {
        max-width:170px;
        margin:0 0 0 0;
    }
    .eco-slide1 {
        width:90%;
        margin:0 auto 0 auto;
    }
    .eco-logo {
        max-width:450px;
        margin:0 auto 0 auto;
    }
    .one-text {
        margin:10px auto 0 auto;
        font-size:16px;
        line-height:24px;
        font-weight:300;
    }
    .one-button-frame {
        margin:30px auto 0 auto;
        display:flex;
        flex-direction:column;
        column-gap:20px;
    }
    .eco-button {
        border:1px solid #fff;
        border-radius:90px;
        padding:14px 100px 14px 100px;
        font-size:24px;
        font-weight:bold;
        color:#fff;
        text-decoration: none;
        margin:0 0 20px 0;
        transition:all 1s;
    }
    .eco-button:hover {
        border:1px solid rgba(0, 0, 0, 0.5);
        background-color:rgba(0, 0, 0, 0.5);
        color:#fff;
    }
    .small {
        font-size:16px;
        padding:14px 80px 14px 80px;
    }
    .two-button-frame {
        display:flex;
        flex-direction:column;
        column-gap:30px;
        margin:0 0 30px 0;
    }
    .two-image {
        display:block;
		max-width:500px;
        padding:0 20px 0 20px;
	}
    .two-image img {
        width:100%;
	}
    .three-image {
        max-width:100px;
    }
    .three-image img {
        width:100%;
	}
    .three-text {
        font-size:70px;
        font-weight:800;
    }
    .three-button-frame {
        margin:20px 0 0 0;
    }
    .four-title {
        font-size:40px;
        font-weight:400;
        margin:0 0 30px 0;
    }
    .four-text {
        max-width:760px;
        max-height: 395px; /* Set the maximum height */
        overflow-y: auto; /* Enable vertical scrolling */
        padding: 0 40px 0 40px; /* Optional: Add some padding for better readability */
        color: #fff; /* Optional: Set the text color */
        font-size: 16px; /* Adjust the font size as needed */
        line-height:28px;
        text-align: left; /* Align text to the left */
    }

    .four-text img {
        max-width:90%;
    }

    .fp-controlArrow.fp-prev {
        background: url('images/arrow-left.png') no-repeat center center;
        background-size: contain;
        width: 50px; /* Adjust the size as needed */
        height: 40px; /* Adjust the size as needed */
        border:0px;
        margin-left:30px;
    }
    
    .fp-controlArrow.fp-next {
        background: url('images/arrow-right.png') no-repeat center center;
        background-size: contain;
        width: 50px; /* Adjust the size as needed */
        height: 40px; /* Adjust the size as needed */
        border:0px;
        margin-right:30px;
    }
    .slide-title {
        position:absolute;
        width:100%;
        top:88px;
        right:0;
        font-size:34px;
        font-weight:800;
        border-top:2px solid #fff;
        border-left:0px solid #fff;
        padding:5px 0 0 0;
        display:flex;
        align-items: flex-end;
        text-align:center;
        z-index:10;
    }
    .slide-title-text {
        display:block;
        width:100%;
        text-align:center;
        height:60px;
    }
    .slide {
        width:100%;
        height:100%;
        background-size:cover;
        background-position:center;
    }
    .content-1-text {
        font-size:30px;
        line-height:38px;
    }
    .content-7 {
        display:flex;
        flex-direction:column;
        justify-content: center;
        align-items: center;
        width:100%;
        height:100%;
    }
    .content-7 video {
        width: 280px; /* Make video take up full width */
        height: auto; /* Maintain aspect ratio */
        max-height: 100%; /* Prevent video from overflowing */
        object-fit: cover; /* Ensure video covers the entire container */
        display: block; /* Remove any inline space */
        margin:40px 0 0 0;
    }
    .noos-interest-form { 
        max-width:640px;
        display:flex;
        flex-wrap:wrap;
        flex-direction:row;
        justify-content:center;
        align-items:center;
        column-gap:4%;
    }
    .noos-interest-field {
        width:46%;
        height:30px;
        margin:0 0 20px 0;
    }
    .noos-interest-field p {
        padding:0px;
        margin:0px;
    }
    .noos-interest-field input {
        font-family: "Montserrat", sans-serif;
        width:100%;
        height:30px;
        padding:0;
        border:0px;
        border-radius:20px;
        text-indent: 20px;
    }
    .noos-interest-text {
        width:100%;
        height:70px;
    }
    .noos-interest-text p {
        padding:0px;
        margin:0px;
    }
    .noos-interest-text textarea {
        font-family: "Montserrat", sans-serif;
        width:96%;
        height:70px;
        padding:0;
        border:0px;
        border-radius:20px;
        text-indent: 20px;
        padding:20px 0 0 0;
    }
    .noos-interest-button p {
        padding:0px;
        margin:0px;
    }
    .form-button {
        border:1px solid #fff;
        background-color:transparent;
        border-radius:90px;
        padding:12px 60px 12px 60px;
        font-size:14px;
        font-weight:bold;
        color:#fff;
        text-decoration: none;
        margin:0 0 0 0;
        transition:all 1s;
    }
    .form-button:hover {
        border:1px solid rgba(0, 0, 0, 0.5);
        background-color:rgba(0, 0, 0, 0.5);
        color:#fff;
    }
    .screen-reader-response {
        display:none;
    }
    .section {
        text-align: center;
        font-size: 16px!important;
        color: white;
    }
    .wpcf7-response-output {
        font-size:16px;
        line-height:24px;
        margin:20px 0 0 0;
    }
    .wpcf7-not-valid-tip {
        font-size:10px;
        line-height:16px;
    }
    .back-button {
        font-size:16px;
        line-height:24px;
        color:#fff;
        font-weight:300;
        text-decoration: none;
        margin:0 0 20px 0;
    }
    .content-8 {
        display:flex;
        flex-direction:column;
        justify-content: center;
        align-items: center;
        width:100%;
        height:100%;
        max-height: 100vh; /* Further adjust height for very small screens */
        padding: 60px 20px 0 20px; /* Further adjust padding */
    }
    footer {
        position: fixed;
        bottom: 0;
        left:5%;
        width: 90%;
        text-align: center;
        margin:0 -5% 15px auto;
        color: white;
        font-size: 10px;
        line-height:18px;
        z-index: 1000;  /* Ensures the footer is above other content */
    }
    .noos-interest-agree {
        width:100%;
        margin:40px 0 10px 0;
        font-size:14px;
        line-height:22px;
    }
    .noos-interest-agree p  {
        margin:0;
        padding:0;
    }
    .product-animation {
        width: 200px; /* Adjust size for mobile */
        height: 200px;
        margin:80px 0 30px 0;
    }
    .content-1-subtext {
        margin:10px 0 0 0;
    }
    .content-5-image {
        width:75%;
    }
    .bes-pack {
        max-width:100px;
        margin:50px 0 30px 0;
    }

}

@media only screen and (min-width : 480px) {
    
}

@media only screen and (min-width : 768px) {
    header {
        text-align:center;
    }
    header img {
        max-width:240px;
        margin:0 0 0 0;
    }
    .eco-slide1 {
        width:600px;
    }
    .one-button-frame {
        margin:30px auto 0 auto;
        display:flex;
        flex-direction:row;
    }
    .three-image {
        max-width:170px;
    }
    .three-text {
        font-size:100px;
    }
    .two-button-frame {
        flex-direction:row;
        column-gap:30px;
        margin:0 0 0 0;
    }
    .three-button-frame {
        margin:30px 0 0 0;
    }
    .fp-controlArrow.fp-prev {
        height: 70px; /* Adjust the size as needed */
    }
    .fp-controlArrow.fp-next {
        height: 70px; /* Adjust the size as needed */
    }
    .slide-title {
        position:absolute;
        width:auto;
        top:0;
        right:60px;
        font-size:70px;
        line-height:77px;
        font-weight:800;
        border-top:0px solid #fff;
        border-left:2px solid #fff;
        padding:40px 0 0 30px;
        display:flex;
        align-items: flex-end;
        justify-content: flex-end;
    }
    .slide-title-text {
        display:block;
        height:63px;
    }
    .content-1-text {
        font-size:40px;
        line-height:48px;
    }
    .content-7 video {
        width: 500px; /* Make video take up full width */
        height: auto; /* Maintain aspect ratio */
        max-height: 100%; /* Prevent video from overflowing */
        object-fit: cover; /* Ensure video covers the entire container */
        display: block; /* Remove any inline space */
    }
    .content-1-image img {
        width:80%;
    }
    .content-8 {
        display:flex;
        flex-direction:column;
        justify-content: center;
        align-items: center;
        width:100%;
        height:100%;
        max-height: 100vh; /* Adjust height for smaller screens */
        padding: 40px 0 0 0; /* Adjust padding */
    }
    .noos-interest-text {
        width:100%;
        height:150px;
    }
    .noos-interest-text textarea {
        height:150px;
    }
    .noos-interest-field {
        height:40px;
    }
    .noos-interest-field input {
        height:40px;
    }
    .back-button {
        margin:0 0 30px 0;
    }
    footer {
        font-size: 10px;
        line-height:18px;
    }
    .wpcf7-response-output {
        font-size:16px;
        line-height:24px;
        margin:20px 0 0 0;
        text-align:center;
    }
    .noos-interest-agree {
        width:100%;
        margin:30px 0 30px 0;
    }
    .wpcf7-not-valid-tip {
        font-size:12px;
        line-height:20px;
    }
    .form-button {
        border:1px solid #fff;
        background-color:transparent;
        border-radius:90px;
        padding:14px 80px 14px 80px;
        font-size:16px;
        font-weight:bold;
        color:#fff;
        text-decoration: none;
        margin:0 0 0 0;
        transition:all 1s;
    }
    .product-animation {
        width: 430px; /* Adjust size for tablets */
        height: 430px;
        margin:0 0 30px 0;
    }
    .content-5-image {
        max-width:768px;
        width:100%;
    }
    .four-text img {
        max-width:60%;
    }
    .bes-pack {
        max-width:200px;
        margin:50px 0 30px 0;
    }
}

@media only screen and (min-width : 1024px) {
    
}

@media only screen and (min-width : 1280px) {

    .product-animation {
        width: 550px; /* Adjust size for tablets */
        height: 550px;
    }
    
}