/* ======================================================
   Agency Service System
   Version: 1.0
   Phase 1 - Part 1
====================================================== */

:root{

    --primary:#2563eb;
    --primary-hover:#1d4ed8;

    --secondary:#111827;

    --text:#374151;

    --light:#f8fafc;

    --border:#e5e7eb;

    --radius:14px;

    --shadow:0 10px 30px rgba(0,0,0,.08);

    --transition:.3s ease;

    --container:1280px;

}

/* =======================
Reset
======================= */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{

    scroll-behavior:smooth;

}

body{

    color:var(--text);

    font-family:Arial,Helvetica,sans-serif;

    background:#fff;

    line-height:1.7;

}

img{

    max-width:100%;

    display:block;

}

a{

    text-decoration:none;

}

ul{

    list-style:none;

}

/* =======================
Container
======================= */

.agency-container{

    width:92%;

    max-width:var(--container);

    margin:auto;

}

/* =======================
Spacing
======================= */

.agency-service{

    padding:60px 0;

}

.agency-service section{

    margin-top:70px;

}

/* =======================
Hero
======================= */

.agency-hero{

    display:grid;

    grid-template-columns:55% 45%;

    gap:60px;

    align-items:start;

}

/* =======================
Gallery
======================= */

.agency-gallery{

    position:sticky;

    top:40px;

}

.agency-main-image{

    background:#fff;

    border:1px solid var(--border);

    border-radius:var(--radius);

    overflow:hidden;

    box-shadow:var(--shadow);

}

.agency-main-image img{

    width:100%;

    aspect-ratio:1/1;

    object-fit:cover;

    cursor:pointer;

    transition:var(--transition);

}

.agency-main-image img:hover{

    transform:scale(1.02);

}

.agency-main-image{

    overflow:hidden;

}

.agency-main-image img{

    transition:.4s;

}

.agency-main-image:hover img{

    transform:scale(1.08);

}

.agency-thumb{

    opacity:.7;

}

.agency-thumb.active{

    opacity:1;

}

.agency-thumb:hover{

    opacity:1;

}

.agency-main-image{

    position:relative;

}

.agency-main-image::after{

    content:"🔍";

    position:absolute;

    right:15px;

    bottom:15px;

    width:42px;

    height:42px;

    background:#fff;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    box-shadow:0 5px 20px rgba(0,0,0,.15);

    opacity:.9;

    pointer-events:none;

}


/* =======================
Thumbnails
======================= */

.agency-thumbnails{

    display:flex;

    gap:12px;

    flex-wrap:wrap;

    margin-top:20px;

}

.agency-thumb{

    width:80px;

    height:80px;

    overflow:hidden;

    border-radius:10px;

    border:2px solid transparent;

    cursor:pointer;

    transition:var(--transition);

}

.agency-thumb.active{

    border-color:var(--primary);

}

.agency-thumb:hover{

    border-color:var(--primary);

}

.agency-thumb img{

    width:100%;

    height:100%;

    object-fit:cover;

}

/* =======================
Summary
======================= */

.agency-summary{

    display:flex;

    flex-direction:column;

    gap:25px;

}

.agency-title{

    font-size:42px;

    line-height:1.2;

    color:var(--secondary);

}

.agency-excerpt{

    font-size:18px;

    color:#6b7280;

}

/* =======================
Buttons
======================= */

.agency-btn{

    display:inline-flex;

    justify-content:center;

    align-items:center;

    min-height:48px;

    padding:14px 26px;

    border-radius:10px;

    background:#fff;

    border:1px solid var(--border);

    color:var(--secondary);

    font-weight:600;

    transition:var(--transition);

}

.agency-btn:hover{

    transform:translateY(-2px);

    box-shadow:var(--shadow);

}

.agency-btn-primary{

    background:var(--primary);

    color:#fff;

    border:none;

}

.agency-btn-primary:hover{

    background:var(--primary-hover);

}

.agency-buttons{

    display:flex;

    gap:12px;

    flex-wrap:wrap;

}

/* =======================
Section Titles
======================= */

.agency-service h2{

    font-size:32px;

    margin-bottom:25px;

    color:var(--secondary);

}

/* =======================
Content
======================= */

.agency-content{

    font-size:17px;

}

.agency-content p{

    margin-bottom:18px;

}

.agency-content img{

    border-radius:12px;

    margin:30px 0;

}

/* =======================
Cards
======================= */

.agency-video-card,
.agency-pdf-card{

    background:#fff;

    border:1px solid var(--border);

    border-radius:var(--radius);

    padding:20px;

    transition:var(--transition);

    box-shadow:0 5px 15px rgba(0,0,0,.04);

}

.agency-video-card:hover,
.agency-pdf-card:hover{

    transform:translateY(-5px);

    box-shadow:var(--shadow);

}

/* ======================================================
   Agency Service System
   Version: 1.0
   Phase 1 - Part 2
======================================================*/


/*====================================
Description
====================================*/

.agency-description{

    background:#fff;

}

.agency-description .agency-content{

    max-width:900px;

}

.agency-content h2,
.agency-content h3,
.agency-content h4{

    margin:40px 0 15px;

    color:var(--secondary);

    line-height:1.3;

}

.agency-content ul,
.agency-content ol{

    margin:20px 0 20px 25px;

}

.agency-content li{

    margin-bottom:10px;

}

.agency-content table{

    width:100%;

    border-collapse:collapse;

    margin:30px 0;

}

.agency-content table th{

    background:var(--light);

    padding:15px;

    text-align:left;

    border:1px solid var(--border);

}

.agency-content table td{

    padding:15px;

    border:1px solid var(--border);

}

.agency-content blockquote{

    border-left:5px solid var(--primary);

    padding:20px;

    margin:30px 0;

    background:var(--light);

    border-radius:8px;

}


/*====================================
Video Section
====================================*/

.agency-videos{

    margin-top:80px;

}

.agency-video-grid{

    display:grid;

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

    gap:25px;

}

.agency-video-card{

    overflow:hidden;

}

.agency-video-card img{

    width:100%;

    aspect-ratio:16/9;

    object-fit:cover;

    border-radius:10px;

    margin-bottom:15px;

}

.agency-video-card h3{

    font-size:20px;

    margin-bottom:15px;

    color:var(--secondary);

}

.agency-video-card .agency-btn{

    width:100%;

}


/*====================================
PDF Section
====================================*/

.agency-pdfs{

    margin-top:80px;

}

.agency-pdf-grid{

    display:grid;

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

    gap:20px;

}

.agency-pdf-card{

    display:flex;

    flex-direction:column;

    justify-content:space-between;

    gap:20px;

}

.agency-pdf-name{

    font-size:18px;

    font-weight:600;

    color:var(--secondary);

    display:flex;

    align-items:center;

    gap:10px;

    line-height:1.5;

}

.agency-pdf-card .agency-btn{

    width:100%;

}


/*====================================
Inquiry Section
====================================*/

.agency-inquiry{

    margin-top:90px;

    padding:50px;

    background:var(--light);

    border-radius:var(--radius);

    border:1px solid var(--border);

}

.agency-inquiry h2{

    margin-bottom:20px;

}

.agency-inquiry p{

    margin-bottom:30px;

}


/*====================================
Contact Form 7
====================================*/

.agency-inquiry .wpcf7{

    max-width:900px;

}

.agency-inquiry input,

.agency-inquiry textarea,

.agency-inquiry select{

    width:100%;

    padding:14px 18px;

    border:1px solid var(--border);

    border-radius:10px;

    margin-bottom:18px;

    font-size:15px;

}

.agency-inquiry textarea{

    min-height:180px;

    resize:vertical;

}

.agency-inquiry input:focus,

.agency-inquiry textarea:focus,

.agency-inquiry select:focus{

    outline:none;

    border-color:var(--primary);

}

.agency-inquiry input[type="submit"]{

    width:auto;

    background:var(--primary);

    color:#fff;

    border:none;

    padding:14px 35px;

    cursor:pointer;

    font-weight:600;

    transition:var(--transition);

}

.agency-inquiry input[type="submit"]:hover{

    background:var(--primary-hover);

}


/*====================================
Hover Effects
====================================*/

.agency-video-card img{

    transition:var(--transition);

}

.agency-video-card:hover img{

    transform:scale(1.05);

}

.agency-main-image{

    transition:var(--transition);

}

.agency-main-image:hover{

    box-shadow:0 20px 40px rgba(0,0,0,.12);

}


/*====================================
Simple Fade Animation
====================================*/

.agency-video-card,

.agency-pdf-card,

.agency-main-image{

    animation:agencyFade .5s ease;

}

@keyframes agencyFade{

    from{

        opacity:0;

        transform:translateY(20px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}


/*====================================
Responsive
====================================*/

@media(max-width:1200px){

    .agency-hero{

        gap:40px;

    }

    .agency-title{

        font-size:36px;

    }

}


@media(max-width:992px){

    .agency-hero{

        grid-template-columns:1fr;

    }

    .agency-gallery{

        position:relative;

        top:0;

    }

    .agency-video-grid{

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

    }

    .agency-pdf-grid{

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

    }

}


@media(max-width:768px){

    .agency-service{

        padding:40px 0;

    }

    .agency-title{

        font-size:30px;

    }

    .agency-service h2{

        font-size:26px;

    }

    .agency-thumbnails{

        justify-content:center;

    }

    .agency-thumb{

        width:65px;

        height:65px;

    }

    .agency-video-grid{

        grid-template-columns:1fr;

    }

    .agency-pdf-grid{

        grid-template-columns:1fr;

    }

    .agency-buttons{

        flex-direction:column;

    }

    .agency-btn{

        width:100%;

    }

    .agency-inquiry{

        padding:30px 20px;

    }

}


@media(max-width:480px){

    .agency-container{

        width:94%;

    }

    .agency-title{

        font-size:26px;

    }

    .agency-excerpt{

        font-size:16px;

    }

    .agency-thumb{

        width:55px;

        height:55px;

    }

}