* {
    box-sizing: border-box; /* Ensure padding and margin are included in width/height calculations */
}
html {
    scroll-behavior: smooth;
  }
body {
    margin: 0;
    font-family: Arial, sans-serif;
}
.header {
    display: flex;              /* Flexbox na usporiadanie */
    justify-content: space-between; /* Rovnomerné rozloženie */
    align-items: center;         /* Vertikálne zarovnanie */
    position: fixed;             /* Fixné umiestnenie pri scrollovaní */
    top: 0;
    left: 0;
    width: 100%;
    height: 100px;               /* Počiatočná výška */
    padding: 0 40px;             /* Odstup od okrajov */
    background-color: rgba(255, 255, 255, 0.8); /* Priesvitný pozadie */
    z-index: 1000;               /* Aby bol navrchu */
    box-sizing: border-box;      /* Zohľadní padding do celkovej veľkosti */
}



/* When you scroll, header should change to solid white */
.scroll-header {
    background-color: white !important;
}


/* Adjust the image within the logo */
.logo img {
    width: 150px;          /* Pevná šírka loga */
    height: auto;          /* Zachovanie proporcií */
    max-width: 100%;       /* Neprekročí kontajner */
    object-fit: contain;   /* Zabráni deformácii */
}


/* Slogan Image Styling */
.slogan {

    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 20px; /* Adds some spacing between the logo and nav */
}

.slogan img {
    width: 250px;          /* Nastavenie šírky pre slogan */
    height: auto;
}
.nav {
    display: flex;
    gap: 50px;
    font-family: 'Open Sans', sans-serif;
}
.nav a {
    color: rgb(104, 122, 127);
    text-decoration: none;
    font-size: 18px;
    font-weight: 100;
    position: relative;
    transition: color 0.3s ease-in-out;
}

.nav a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -5px;
    width: 100%;
    height: 2px;
    background-color: #87CEFA;
    transform: scaleX(0);
    transition: transform 0.3s ease-in-out;
}

.nav a:hover {
    color: #87CEFA;
}

.nav a:hover::after {
    transform: scaleX(1);
}

.menu-icon {
    display: none; /* Skryté na veľkých obrazovkách */
}

@media (max-width: 768px) {
    .header {
        padding: 10px 20px; /* Väčší padding pre lepší vzhľad */
        gap: 10px; /* Väčšia medzera medzi prvkami */
    
        align-items: center; /* Zarovnanie na stred */
    }

    .menu-icon {
        display: block;
        font-size: 35px; /* Väčšia veľkosť ikonky */
        cursor: pointer;
        margin: 0; /* Odstránenie nadbytočných medzier */
        align-self: center; /* Zarovnanie menu ikonky na stred */
        transition: transform 0.3s ease; /* Hladká animácia */
    }

    .menu-icon:hover {
        transform: scale(1.1); /* Jemné zväčšenie pri hoveri */
    }

    .nav {
        display: none;
        flex-direction: column;
        width: 100%; /* Užší navbar pre lepší vzhľad */
        text-align: center;
        background-color: rgba(255, 255, 255, 0.8); /* Priesvitný pozadie */
        position: absolute;
        top: 100%;
        left: 0;
       
      
        overflow: hidden; /* Skrytie obsahu mimo hraníc */
    }

    .nav.active {
        display: flex;
        animation: slideIn 0.5s ease forwards; /* Animácia zobrazenia */
    }
    .nav.inactive {
        display: flex; /* Zachová zobrazenie počas animácie */
        animation: slideOut 0.5s ease forwards; /* Použitie animácie zatvárania */
    }

    .nav a {
        display: block;
        padding: 15px 0; /* Väčšie medzery medzi odkazmi */
        font-size: 18px; /* Väčšie písmo */
        color: rgb(62, 75, 78);
        text-decoration: none;
        transition: color 0.3s ease;
    }

    .nav a:hover {
        color: #87CEFA; /* Svetlomodrá pri hoveri */
    }

    .logo, .slogan {
        margin: 0; /* Odstránenie nadbytočných medzier */
    }

    /* Úpravy pre GSAP animácie na malých obrazovkách */
    .logo img {
        max-width: 30vw; /* Menšie logá na malých obrazovkách */
    }
    .slogan img{
        max-width: 40vw; 
    }

    .header.shrink {
        height: auto !important; /* Zabezpečenie správnej výšky počas animácie */
        padding: 5px 10px !important; /* Udržiavanie paddingu počas animácie */
    }
    @keyframes slideIn {
        from {
            opacity: 0;
            transform: translateY(-20px); /* Začiatok nad hlavičkou */
        }
        to {
            opacity: 1;
            transform: translateY(0); /* Konečná pozícia */
        }
    }
    @keyframes slideOut {
        from {
            opacity: 1;
            transform: translateY(0); /* Konečná pozícia */
        }
        to {
            opacity: 0;
            transform: translateY(-20px); /* Skrytie nad hlavičku */
            visibility: hidden; /* Skrytie po animácii */
        }
    }
}




.hero {
    width: 100%;
    height: 100vh;
    overflow: hidden;
    position: relative;
}

.hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}



/* Services Section Styles */
.services {
    padding: 60px 20px;

    text-align: center;
    position: relative;
    overflow: hidden;

    animation: fadeIn 1s ease-out forwards;
}

.detection-section {

    padding: 60px 20px;
    text-align: center;

}
.container {
    max-width: 700px;
    margin: auto;
}
h2 {
    font-size: 2em;
    font-weight: 600;
    color: #0277BD;
    margin-bottom: 20px;
}
.highlight {
    font-size: 1.5em;
    font-weight: 500;
    color: #01579B;
    margin-bottom: 15px;
}
.insurance-highlight {
    background: #87CEFA;
    color: white;
    font-size: 1.5em;
    font-weight: bold;
    padding: 15px;
    border-radius: 100px;
    display: inline-block;
    margin: 20px 0;
}
.insurance-highlight span {
    font-size: 1.8em;
}
p {
    font-size: 1.2em;
    line-height: 1.6;
    color: #333;
}







/* Pipe Detection Section Styles */
.pipe-detection-section {

    padding: 60px 20px;
    text-align: center;


    margin: 0 auto;
    width: 100%;
}

/* Container Styles for Pipe Detection Section */
.pipe-detection-container {
    max-width: 800px;
    margin: auto;
}

/* Section Title for Pipe Detection */
.pipe-detection-title {
    font-size: 2em;
    font-weight: 600;
    color: #0277BD;
    margin-bottom: 20px;
}

/* Highlight Section for Hydrogen Method */
.pipe-detection-highlight {
    font-size: 1.8em;
    font-weight: 500;
    color: #333;
    background: #87CEFA;
    padding: 15px;
    border-radius: 100px;
    display: inline-block;
    margin: 20px 0;
}

/* Paragraphs */
.pipe-detection-description,
.pipe-detection-method {
    font-size: 1.2em;
    line-height: 1.6;
    color: #333;
    margin-bottom: 20px;
}

/* Image Styling for Hydrogen Detection Method */
.pipe-detection-image img {
    max-width: 100%;
    height: 380px;
    border-radius: 20px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease-in-out;
}

/* Hover Effect on Image */
.pipe-detection-image img:hover {
    transform: scale(1.05); /* Hover effect to enlarge the image */
}

/* Remove FadeIn animation temporarily for testing */
@keyframes fadeIn {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}





.body1{
    background: linear-gradient(to bottom, #E3F2FD, #FFFFFF);
}




.footer {
    background: #111111;
    padding: 15px 0;
    font-family: 'Play', sans-serif;
    text-align: center;
    bottom: 0;
    width: 100%;
}

.footer .row {
    width: 100%;
    margin: 1% 0;
    padding: 0.6% 0;
    color: gray;
    font-size: 0.8em;
}

.footer .row a {
    text-decoration: none;
    color: gray;
    transition: 0.5s;
}

.footer .row a:hover {
    color: #fff;
}

.footer .row ul {
    width: 100%;
}

.footer .row ul li {
    display: inline-block;
    margin: 0 30px;
}

.footer .row a i {
    font-size: 2em;
    margin: 0 1%;
}


@media (max-width: 720px) {
    .footer {
        text-align: left;
        padding: 5%;
    }
    .footer .row ul li {
        display: block;
        margin: 10px 0;
        text-align: left;
    }
    .footer .row a i {
        margin: 0 3%;
    }
}