/* =====================================================
   GENERAL
===================================================== */

body {

    margin: 0;

    font-family: "Source Sans Pro", sans-serif;

    background: #ffffff;

    color: #555;

}

.page-content {

    width: min(1300px, 92%);

    margin: 0 auto;

}

.section-divider {

    width: 75%;

    max-width: 1100px;

    height: 1px;

    margin: 60px auto;

    background: linear-gradient(
        to right,
        transparent,
        #dcdcdc 15%,
        #dcdcdc 85%,
        transparent
    );

}


/* =====================================================
   TOP & BOTTOM BANNER
===================================================== */

.page-banner {

    width: 100%;

    height: 120px;

    background-image: url("../../images/field.png");

    background-size: cover;

    background-repeat: no-repeat;

    background-position: center 72%;

}


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

.page-header-content {

    text-align: center;

    padding: 60px 0 30px;

}

.page-header-content h1 {

    margin: 0 0 .35em;

    font-size: 3rem;

    font-weight: 700;

    letter-spacing: .18em;

    text-transform: uppercase;

    color: #333;

}

.page-header-content p {

    max-width: 900px;

    margin: 0 auto;

    font-size: 1.25rem;

    line-height: 1.7;

    letter-spacing: .08em;

    color: #777;

}


/* =====================================================
   GENERIC SECTIONS
===================================================== */

.page-section {

    max-width: 950px;

    margin: 70px auto;

    display: flex;

    align-items: center;

    gap: 50px;

}

.page-text {

    flex: 0 0 52%;

}

.page-text h2 {

    margin: 0 0 25px;

    font-size: 2rem;

    letter-spacing: .12em;

    text-transform: uppercase;

    color: #444;

}

.page-text p {

    margin: 0;

    font-size: 1.15rem;

    line-height: 1.8;

}

.page-image {

    flex: 0 0 48%;

}

.page-image img {

    display: block;

    width: 100%;

    border-radius: 8px;

}


/* =====================================================
   FINAL SECTION
===================================================== */

.page-end {

    max-width: 900px;

    margin: 120px auto;

    text-align: center;

}

.page-end h2 {

    margin-bottom: 25px;

    font-size: 2.2rem;

    letter-spacing: .12em;

    text-transform: uppercase;

    color: #333;

}

.page-end p {

    margin-bottom: 40px;

    font-size: 1.15rem;

    line-height: 1.8;

}


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

.page-button {

    display: inline-block;

    padding: 18px 42px;

    background: #55505a;

    color: #fff;

    text-decoration: none;

    text-transform: uppercase;

    letter-spacing: .12em;

    border-radius: 6px;

    transition: background .25s ease;

}

.page-button:hover {

    background: #4eb980;

}

/* =====================================================
   UAV DATA ACQUISITION
===================================================== */

.summary-section {

    max-width: 950px;

    margin: 70px auto;

}

.summary-section .page-text {

    max-width: 950px;

    margin-bottom: 40px;

}

.uav-acquisition {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 35px;

    align-items: start;

}

.uav-card {

    text-align: center;

}

.uav-card img{

    width:100%;

    display:block;

    border-radius:8px;

    margin-bottom:18px;

    aspect-ratio:4/3;

    object-fit:cover;

}

.uav-card h3{

    margin:0 0 18px;

    font-size:1.15rem;

    letter-spacing:.08em;

    text-transform:uppercase;

    color:#333;

}

.uav-card p{

    margin:0;

    font-size:1rem;

    line-height:1.6;

    color:#666;

}


/* =====================================================
   DATABASE GENERATION
===================================================== */

.database-layout {

    display: flex;

    align-items: center;

    gap: 50px;

}

.database-image {

    flex: 0 0 48%;

}

.database-image img {

    width: 100%;

    display: block;

    border-radius: 8px;

}

.database-text {

    flex: 0 0 52%;

}

.database-text p {

    margin: 0 0 22px;

    font-size: 1.1rem;

    line-height: 1.8;

}

.database-text p:last-child {

    margin-bottom: 0;

}

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

@media (max-width: 900px) {

    .page-section {

        flex-direction: column;

        gap: 40px;

    }

    .database-layout {

        flex-direction: column;

        gap: 40px;

    }

    .uav-acquisition {

        grid-template-columns: 1fr;

        gap: 45px;

    }

    .page-text,
    .database-text,
    .page-image,
    .database-image {

        flex: 1;

        text-align: center;

    }

    .page-header-content h1 {

        font-size: 2.3rem;

    }

}