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

.contact-hero{

    height:400px;

    background:
    linear-gradient(
        rgba(0,0,0,.70),
        rgba(0,0,0,.70)
    ),
    url("../HLAVNI/img/fortinet.png");

    background-size:cover;
    background-position:center;

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

    text-align:center;
}

.contact-hero-content{

    color:white;

    max-width:900px;
}

.contact-hero h1{

    font-size:72px;

    margin-bottom:20px;
}

.contact-hero p{

    font-size:24px;

    line-height:1.7;

    color:#dbe2ea;
}

/* ===========================
   FORMULÁŘ
=========================== */

.contact-section{

    padding:100px 60px;

    background:#f7f9fc;
}

.contact-container{

    max-width:1400px;

    margin:auto;

    display:grid;

    grid-template-columns:1fr 1.4fr;

    gap:60px;
}

/* LEVÁ ČÁST */

.contact-info{

    background:white;

    padding:50px;

    border:1px solid #cfd8e3;
}

.contact-info h2{

    font-size:40px;

    margin-bottom:40px;

    color:#1c2430;
}

.info-box{

    display:flex;

    align-items:center;

    gap:20px;

    margin-bottom:35px;
}

.info-box img{

    width:60px;
    height:60px;

    object-fit:contain;
}

.info-box h3{

    font-size:24px;

    margin-bottom:5px;

    color:#1c2430;
}

.info-box p{

    font-size:18px;

    color:#5c6675;
}

.contact-map{
    margin-top:40px;
}

.contact-map iframe{
    width:100%;
    height:250px;
    border:1px solid #cfd8e3;
}

/* PRAVÁ ČÁST */

.contact-form{

    background:white;

    border:1px solid #cfd8e3;

    padding:50px;

    display:flex;
    flex-direction:column;
}

.contact-form h2{

    font-size:40px;

    margin-bottom:35px;

    color:#1c2430;
}

.contact-form input,
.contact-form textarea{

    width:100%;

    padding:18px 20px;

    margin-bottom:20px;

    border:1px solid #cfd8e3;

    font-size:18px;

    outline:none;

    transition:.3s;
}

.contact-form textarea{

    resize:none;

    min-height:180px;
}

.contact-form input:focus,
.contact-form textarea:focus{

    border-color:#0066ff;
}

.contact-form button{

    height:65px;

    background:#0066ff;

    color:white;

    border:none;

    font-size:20px;

    font-weight:700;

    cursor:pointer;

    transition:.3s;
}

.contact-form button:hover{

    background:#0052cc;
}

.page-hero{

    height:500px;

    display:flex;
    
    align-items:center;

    text-align:center;

    background:
    linear-gradient(
        rgba(0,0,0,.70),
        rgba(0,0,0,.70)
    ),
    url("../HLAVNI/img/kontakt.jpg");

    background-size:cover;
    background-position:center center ;
    background-repeat:no-repeat;
;
}
.page-hero-content{

    max-width:1400px;

    margin:0 auto;

    width:100%;

    padding:0 120px;

    color:white;
}

.page-hero h1{

    font-size:72px;

    margin-bottom:25px;
}

.page-hero p{

    max-width:700px;

    font-size:24px;

    line-height:1.7;

    color:#dbe2ea;
}