/* ==========================================================
   ICIS Web 1.0
   style.css
   ČÁST 1
========================================================== */

:root{

    --blue:#1d3f73;
    --green:#8CC63E;

    --text:#21416F;
    --light:#6d7f98;

    --background:#ffffff;

    --line:#dfe8f1;

    --button:#8CC63E;
    --buttonHover:#7ab530;

    --footer:#16365d;

}

*{

    margin:0;
    padding:0;

    box-sizing:border-box;

}

html{

    scroll-behavior:smooth;

}

body{

    font-family:'Inter',sans-serif;

    background:#fff;

    color:var(--text);

    overflow-x:hidden;

}

.container{

    width:100%;
    max-width:1180px;

    margin:0 auto;

    padding:0 40px;

    position:relative;

}


/* ==========================================================
   DEKORATIVNÍ KRUŽNICE
========================================================== */

.background-top,
.background-bottom{
    position:fixed;
    pointer-events:none;
    z-index:-5;
    opacity:.55;
}

.background-top{
    top:-320px;
    right:-260px;
    width:900px;
    height:900px;

    background:
        radial-gradient(circle at center,
            transparent 61%,
            rgba(35,93,165,.08) 61.4%,
            transparent 61.9%),

        radial-gradient(circle at center,
            transparent 70%,
            rgba(35,93,165,.06) 70.4%,
            transparent 70.8%),

        radial-gradient(circle at center,
            transparent 79%,
            rgba(140,198,62,.07) 79.4%,
            transparent 79.8%),

        radial-gradient(circle at center,
            transparent 88%,
            rgba(35,93,165,.05) 88.4%,
            transparent 88.8%);
}

.background-top::before{

    content:"";

    position:absolute;

    inset:40px;

    border-radius:50%;

    border:2px solid rgba(140,198,62,.08);

}

.background-bottom{

    bottom:-330px;
    left:-270px;

    width:900px;
    height:900px;

    background:
        radial-gradient(circle at center,
            transparent 60%,
            rgba(35,93,165,.08) 60.5%,
            transparent 61%),

        radial-gradient(circle at center,
            transparent 69%,
            rgba(140,198,62,.06) 69.4%,
            transparent 69.8%),

        radial-gradient(circle at center,
            transparent 78%,
            rgba(35,93,165,.06) 78.4%,
            transparent 78.8%),

        radial-gradient(circle at center,
            transparent 87%,
            rgba(35,93,165,.05) 87.4%,
            transparent 87.8%);
}

.background-bottom::before{

    content:"";

    position:absolute;

    inset:40px;

    border-radius:50%;

    border:2px solid rgba(140,198,62,.08);

}


/* ==========================================================
   HEADER
========================================================== */

header{

    padding-top:28px;

}

.languages{

    display:flex;

    justify-content:flex-end;

    align-items:center;

    gap:12px;

    font-size:15px;

    margin-bottom:40px;

}

.languages a{

    color:var(--blue);

    text-decoration:none;

    transition:.25s;

}

.languages a:hover{

    color:var(--green);

}

.languages .active{

    color:var(--green);

    font-weight:600;

}

.languages span{

    color:#b9c4d1;

}


/* ==========================================================
   LOGO
========================================================== */

.logo{

    text-align:center;

    margin-bottom:56px;

}

.logo img{

    width:205px;
    height:auto;

}



/* ==========================================================
   HERO
========================================================== */

.hero{

    text-align:center;
    padding-bottom:30px;

}

.hero h1{

    font-size:70px;

    line-height:1.08;

    font-weight:800;

    color:var(--blue);

    letter-spacing:-1.4px;

    margin-bottom:28px;

}

.title-line{

    width:110px;

    height:5px;

    margin:0 auto 52px;

    background:var(--green);

    border-radius:10px;

}

.slogan{

    margin-bottom:60px;

}

.slogan p{

    font-size:30px;

    font-weight:500;

    line-height:1.8;

    color:var(--blue);

}

.intro{

    max-width:760px;

    margin:0 auto 65px;

}

.intro h2{

    font-size:26px;

    line-height:1.45;

    color:var(--blue);

    margin-bottom:18px;

    font-weight:700;

}

.intro p{

    font-size:19px;

    line-height:1.8;

    color:var(--light);

    margin-bottom:10px;

}


/* ==========================================================
   CTA BUTTON
========================================================== */

.main-button{

    display:inline-flex;

    align-items:center;
    justify-content:space-between;

    min-width:540px;

    padding:20px 38px;

    border-radius:42px;
    
    letter-spacing:.2px;

	border:1px solid rgba(255,255,255,.12);

    background:linear-gradient(
        180deg,
        #98D84B 0%,
        #82C336 100%
    );

    color:#fff;

    text-decoration:none;

    font-size:20px;

    font-weight:600;

    box-shadow:
        0 10px 18px rgba(0,0,0,.08),
        0 18px 38px rgba(0,0,0,.10);

    transition:.25s;

}

.main-button:hover{

    transform:translateY(-3px);

    filter:brightness(1.03);

    box-shadow:
        0 18px 36px rgba(0,0,0,.14);

}

.button-icon{

    width:28px;

    height:28px;

    display:flex;

    align-items:center;

    justify-content:center;

}

.button-arrow{

    font-size:24px;

    font-weight:700;

}

.main-web{

    margin-top:26px;

    font-size:22px;

    font-weight:600;

    color:var(--blue);

}
/* ==========================================================
   SEKCE CIS FACILITY
========================================================== */

.facility-link{

    margin-top:120px;

    margin-bottom:90px;

}

.facility-divider{

    width:100%;
    height:1px;

     background:#E4EDF4;

}

.facility-row{

    display:grid;

    grid-template-columns:1fr auto 1fr;

    align-items:center;

    gap:65px;

    padding:28px 0;

}

.facility-item{

    font-size:20px;

    color:var(--blue);

    font-weight:500;

}

.facility-item.left{

    text-align:right;

    padding-right:25px;

}

.facility-item.right{

    text-align:left;

    padding-left:25px;

}

.facility-center{

    display:flex;

    justify-content:center;

    align-items:center;

}

.facility-center img{

    width:270px;

    height:auto;

    display:block;

    transition:.30s ease;

}

.facility-center img:hover{

    transform:scale(1.03);

}


/* ==========================================================
   KONTAKTY
========================================================== */

.contact-section{

    margin-top:80px;
    margin-bottom:70px;

}

.contact-grid{

    display:grid;

    grid-template-columns:
        1fr
        1px
        1fr
        1px
        1fr
        1px
        1fr;

    align-items:start;

}

.contact-separator{

    width:1px;
    height:135px;

    background:#d7e2eb;

    justify-self:center;

}

.contact-item{

    text-align:center;

    padding:0 22px;

}

.contact-icon{

    width:68px;
    height:68px;

    margin:0 auto 18px;

    display:flex;

    justify-content:center;
    align-items:center;

}

.contact-icon img{

    width:40px;
    height:40px;

}

.contact-title{

    color:var(--green);

    font-size:14px;

    letter-spacing:2.8px;

    font-weight:700;

    margin-bottom:14px;

    text-transform:uppercase;

}

.contact-text{

    color:var(--blue);

    font-size:18px;

    line-height:1.8;

}

.contact-text a{

    color:inherit;

    text-decoration:none;

}

.contact-text a:hover{

    color:var(--green);

}

/* ==========================================================
   FOOTER
========================================================== */

.footer{

    margin-top:80px;

}

.footer-line{

    width:100%;
    height:1px;

    background:var(--line);

    margin-bottom:35px;

}

.footer-content{

    text-align:center;

    color:var(--blue);

    padding-bottom:45px;
    
    line-height:1.9;

}

.footer-content p:first-child{

    font-size:17px;

    font-weight:600;

    margin-bottom:10px;

}

.footer-content p:nth-child(2){

    font-size:18px;

    font-weight:700;

    margin-bottom:10px;

}

.footer-content p:last-child{

    color:var(--light);

    font-size:15px;

}


/* ==========================================================
   ANIMACE
========================================================== */

.logo img{

    animation:fadeLogo .9s ease;

}

.hero{

    animation:fadeHero 1.1s ease;

}

.main-button{

    animation:fadeButton 1.4s ease;

}

@keyframes fadeLogo{

    from{

        opacity:0;
        transform:translateY(-25px);

    }

    to{

        opacity:1;
        transform:none;

    }

}

@keyframes fadeHero{

    from{

        opacity:0;
        transform:translateY(35px);

    }

    to{

        opacity:1;
        transform:none;

    }

}

@keyframes fadeButton{

    from{

        opacity:0;
        transform:translateY(20px);

    }

    to{

        opacity:1;
        transform:none;

    }

}


/* ==========================================================
   RESPONSIVE
========================================================== */

@media (max-width:1100px){

.hero h1{

    font-size:52px;

}

.intro{

    max-width:760px;
    color:#61758d;

}

.main-button{

    min-width:420px;

}

.facility-row{

    gap:20px;

}

.facility-center img{

    width:210px;

}

.contact-grid{

    grid-template-columns:1fr 1fr;

    gap:45px;

}

.contact-separator{

    display:none;

}

}


@media (max-width:768px){

.container{

    padding-left:25px;
    padding-right:25px;

}

.languages{

    justify-content:center;

}

.logo{

    margin-bottom:30px;

}

.logo img{

    width:120px;

}

.hero h1{

    font-size:38px;

}

.title-line{

    width:70px;

}

.slogan p{

    font-size:22px;

}

.intro h2{

    font-size:22px;

}

.intro p{

    font-size:18px;

}

.main-button{

    width:100%;
    min-width:0;

    padding:18px 25px;

}

.facility-row{

    grid-template-columns:1fr;

    text-align:center;

    gap:25px;

}

.facility-item.left,
.facility-item.right{

    text-align:center;

    padding:0;

}

.facility-center img{

    width:220px;
    filter:drop-shadow(0 5px 10px rgba(0,0,0,.05));

}

.contact-grid{

    grid-template-columns:1fr;

    gap:50px;

}

.footer{

    margin-top:95px;

    padding-bottom:20px;

}

}


@media (max-width:480px){

.hero h1{

    font-size:31px;

}

.slogan p{

    font-size:19px;

}

.intro h2{

    font-size:20px;

}

.intro p{

    font-size:17px;

}

.main-button{

    font-size:17px;

    gap:12px;

}

.main-web{

    font-size:18px;

}

.contact-title{

    font-size:14px;

}

.contact-text{

    font-size:17px;

}

}

body{min-height:100vh;}

.globe-svg{

    width:26px;
    height:26px;

    margin-right:6px;

}

.main-web{
display:inline-block;
text-decoration:none;
transition:.25s;
}

.main-web:hover{color:var(--green);}

.contact-item{

	min-height:170px;

	transition:.25s;
}

.contact-item:hover{

    transform:translateY(-4px);

}