/*
Theme Name: Daniel Unidad 19 Child Auto EN
Theme URI: https://danielunidad19.com/en/
Description: English child theme for Divi – Daniel Unidad 19 offers private transfers and tours in Puerto Plata and across the Dominican Republic. This theme extends the Divi parent theme with custom layouts, a hero slider, route listings and cruise port pages optimized for SEO. When activated, it automatically creates all required pages (Home, About Us, Contact Us, excursions, transfers and policies) and sets the Home page as the front page.
Author: Daniel Unidad 19
Author URI: https://danielunidad19.com/
Template: Divi
Version: 1.0.0
*/

/*
 * Variables and base typography
 */
:root {
    --primary-color: #0B2948;
    --secondary-color: #F7C35E;
    --accent-color: #E58325;
    --light-bg: #F7F7F7;
    --dark-bg: #0B2948;
    --text-color: #1F2937;
    --white: #ffffff;
}

body {
    font-family: "Poppins", sans-serif;
    color: var(--text-color);
    line-height: 1.6;
    margin: 0;
    padding: 0;
}

/*
 * Hero slider styles
 */
.hero-slider {
    position: relative;
    height: 600px;
    overflow: hidden;
    background-color: var(--dark-bg);
}
.hero-slider .slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    animation: heroZoom 30s linear infinite;
}
.hero-slider .slide:first-child {
    opacity: 1;
}
@keyframes heroZoom {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}
.hero-slider .hero-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--white);
    text-align: center;
    max-width: 80%;
    z-index: 10;
}
.hero-slider .hero-content h1 {
    font-size: 3rem;
    margin-bottom: 1rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}
.hero-slider .hero-content p {
    font-size: 1.2rem;
    margin-bottom: 2rem;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}
.hero-slider .hero-content a.btn {
    display: inline-block;
    background-color: var(--accent-color);
    color: var(--white);
    padding: 0.8rem 1.5rem;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 600;
    transition: background 0.3s ease;
}
.hero-slider .hero-content a.btn:hover {
    background-color: var(--secondary-color);
}

/* Generic button styles reused outside of the hero section */
.btn {
    display: inline-block;
    padding: 0.8rem 1.5rem;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 600;
    transition: background 0.3s ease;
}
.btn-primary {
    background-color: var(--accent-color);
    color: var(--white);
}
.btn-primary:hover {
    background-color: var(--secondary-color);
    color: var(--white);
}
.btn-secondary {
    background-color: var(--secondary-color);
    color: var(--dark-bg);
}
.btn-secondary:hover {
    background-color: var(--accent-color);
    color: var(--white);
}

/* Button container in hero section */
.hero-buttons {
    display: flex;
    justify-content: center;
    gap: 1rem;
}

/* Services section */
.services .service-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}
.service-card {
    background-color: var(--light-bg);
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    text-align: center;
}
.service-card img {
    width: 100%;
    height: 180px;
    object-fit: cover;
}
.service-card h3 {
    margin: 1rem 0 0.5rem 0;
    font-size: 1.25rem;
    color: var(--primary-color);
}
.service-card p {
    margin: 0 1rem 1rem 1rem;
    font-size: 0.9rem;
    color: var(--text-color);
}
.service-card a.btn {
    margin-bottom: 1rem;
    background-color: var(--accent-color);
    color: var(--white);
}
.service-card a.btn:hover {
    background-color: var(--secondary-color);
    color: var(--dark-bg);
}

/*
 * Section and typography styling
 */
.du-section {
    padding: 4rem 2rem;
    background-color: var(--white);
}
.du-section:nth-of-type(even) {
    background-color: var(--light-bg);
}
.du-section h2 {
    text-align: center;
    font-size: 2.2rem;
    margin-bottom: 1rem;
    color: var(--primary-color);
}
.du-section h3 {
    font-size: 1.5rem;
    margin-top: 0;
    color: var(--primary-color);
}
.du-section p.lead {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 2rem auto;
    font-size: 1.1rem;
    color: var(--text-color);
}

/*
 * Features section
 */
.features {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 2rem;
    margin-top: 2rem;
}
.feature-item {
    flex: 1 1 220px;
    background-color: var(--light-bg);
    border-radius: 8px;
    padding: 2rem 1rem;
    text-align: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}
.feature-item i {
    font-size: 2.5rem;
    color: var(--accent-color);
    margin-bottom: 1rem;
}

/*
 * Transfer cards section
 */
.transfer-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-top: 2rem;
}
.transfer-card {
    background-color: var(--light-bg);
    padding: 1.5rem;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    text-align: center;
}
.transfer-card h3 {
    color: var(--primary-color);
    margin-bottom: 0.5rem;
    font-size: 1.25rem;
}
.transfer-card p {
    font-size: 0.9rem;
    margin: 0.5rem 0 1rem 0;
}
.booking-shortcode {
    margin-top: 0.5rem;
}

/*
 * Tours grid section
 */
.tours-grid {
    margin-top: 2rem;
}

/*
 * Destination list for route section
 */
.destination-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    list-style: none;
    padding: 0;
    margin: 2rem auto;
    max-width: 900px;
}
.destination-list li {
    background-color: var(--light-bg);
    padding: 0.8rem 1.2rem;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    font-size: 0.9rem;
    color: var(--primary-color);
}

/*
 * Contact section
 */
.contact-info {
    text-align: center;
    font-size: 1.1rem;
    color: var(--primary-color);
}
.contact-info a.phone {
    color: var(--accent-color);
    font-weight: 700;
    text-decoration: none;
}
.contact-info a.phone:hover {
    text-decoration: underline;
}

/*
 * Port sections in front page
 */
.port-section {
    background-color: var(--light-bg);
    border-radius: 8px;
    padding: 2rem;
    margin-top: 2rem;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}
.port-section img {
    width: 100%;
    height: auto;
    border-radius: 6px;
    margin-bottom: 1rem;
}
.port-section a.btn {
    display: inline-block;
    margin-top: 1rem;
    background-color: var(--accent-color);
    color: var(--white);
    padding: 0.6rem 1.2rem;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 600;
    transition: background 0.3s ease;
}
.port-section a.btn:hover {
    background-color: var(--secondary-color);
}

/*
 * Responsive adjustments
 */
@media (max-width: 768px) {
    .hero-slider {
        height: 400px;
    }
    .hero-slider .hero-content h1 {
        font-size: 2rem;
    }
    .features {
        flex-direction: column;
    }
    .feature-item {
        margin-bottom: 1rem;
    }
}

/*
 * Transfer page images
 * Ensure that images embedded at the top of transfer pages scale
 * gracefully and maintain aspect ratio. The margin provides spacing
 * between the image and the heading.
 */
.transfer-image {
    width: 100%;
    height: auto;
    border-radius: 8px;
    margin-bottom: 1.5rem;
}