/* General Reset */

.tittle-tips, .tittle-travel {
    font-size: 3rem;  
    font-weight: bold;
    text-align: center;
    color: #ff4646;
    text-shadow: 12px 12px 12px #2e0319;
    margin: 5%;
}

/* About Section - Acts like a header */
.section-about {
    margin-right: 0;
}

#about {
    position: relative;
    height: 60vh;
    width: 100%; /* Make it responsive to container width */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: white;
    font-size: 20px;
    overflow: hidden;
    margin: 0 auto;
}

/* Video Background - Covers the entire section */
.video-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: -1;
}

/* Background Video */
#background-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* About Content - Centered Text */
.about {
    position: relative;
    z-index: 2;
    background: rgba(0, 0, 0, 0.5);
    padding: 40px;
    border-radius: 10px;
    width: 100%;
    max-width: 800px;
    text-align: center;
}

/* Manual section */

.manual {
    max-width: 800px;
    background: #231E1E;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);

    margin: 5% auto; /* Centers horizontally while keeping spacing */
}

.title {
    color: #929292;
    text-align: center;
}
.section {
    background: #606060;
    padding: 15px;
    margin: 15px 0;
    border-radius: 8px;
}
.section-title {
    color: #929292;
}
.japanese {
    font-weight: bold;
    color: #231E1E;
}
.pic-step {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 10px auto;
    border-radius: 5px;
}

/* Responsive Adjustments */

/* Tablets and Larger Devices */
@media (min-width: 768px) and (max-width: 1024px) {
    #about {
        height: 70vh;
        font-size: 18px;
        margin-top: -2%; /* Better alignment */
    }

    .about {
        width: 90%;
        padding: 30px;
    }
}

/* iPad Pro and Large Tablets */
@media (min-width: 1025px) and (max-width: 1366px) {
    #about {
        height: 80vh;
        font-size: 20px;
        margin-top: -2%; 
    }

    .about {
        width: 80%;
        padding: 35px;
    }
}

/* Smartphones */
@media (max-width: 480px) {
    #about {
        height: 60vh;
        font-size: 14px;
        margin-top: -5%; 
    }

    .about {
        width: 90%;
        padding: 20px;
    }
}

/*----------------------------------------------------------------------------------*/

/* Tips section  */

.tip-container {
    gap: 30px;
}

.coach-tips {
    display: grid;
    grid-template-columns: repeat(6, 1fr); /* 6 columns */
    grid-template-rows: repeat(6, 1fr); /* 6 rows */
    gap: 32px;
}

.kanji-icon {
    font-size: 5rem;  /* Make Kanji larger */
    font-weight: bold;
    text-align: center;
    color: #231e1e;
    text-shadow: 1px 1px #ffffff;
    margin-bottom: -7%;
}

.text-tip {
    margin: 10%;
    font-size: 1.3em;
    font-weight: bold;
    max-width: 90%;
    text-align: justify;
    line-height: 1.5;
    color: #ff4646;
    text-shadow: 12px 12px 12px #2e0319;
}

/* Right column */
.right1, .right2 {
    margin: 3px;
    grid-column: span 3 / span 3;
    grid-row: span 3 / span 3;
    grid-column-start: 4;
}

/* Positioning adjustments */
.right1 { grid-row-start: 1; }
.right2 { grid-row-start: 4; }

/* Left column */
.left1, .left2 {
    margin: 3px;
    grid-column: span 3 / span 3;
    grid-row: span 3 / span 3;
    grid-column-start: 1;
} 


/* Positioning adjustments */
.left1 { grid-row-start: 1; }
.left2 { grid-row-start: 4; }


/* Animation scrolling tips*/

.tip-container {
    opacity: 0;
    transform: translateX(-300px); /* Back to fixed pixel value for consistency */
    transition: transform 0.7s ease-out 0.4s, opacity 0.7s ease-out 0.4s;
}

/* Show the container when scrolled */
.scroll-tip-container {
    opacity: 1;
    transform: translateX(0);
}

/* Flexbox for alignment */
.coach-tips {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center;
}

/* Desktop View */
@media (min-width: 1024px) {
    .coach-tips {
        justify-content: space-between;
    }

    .tip-container {
        flex: 0 0 45%; /* 2 items per row on desktop */
    }
}

/* iPad Air Size (between tablet and desktop) */
@media (max-width: 1024px) and (min-width: 810px) {
    .coach-tips {
        justify-content: space-evenly;
        gap: 30px; /* More breathing room */
        max-width: 90%;
        margin: 0 auto;
    }

    .tip-container {
        flex: 0 0 45%; /* Keep 2 items per row */
        transform: translateX(0px); 
        font-size: 1rem;
        text-align: center;
    }

    .kanji-icon {
        font-size: 4rem;
    }

    .text-tip {
        font-size: 1rem;
    }
}

/* Tablet View */
@media (max-width: 810px) and (min-width: 768px) {
    .coach-tips {
        justify-content: center;
        gap: 15px;
    }

    .tip-container {
        flex: 0 0 100%; /* Full width on smaller tablets */
        transform: translateX(-50px); /* Soft slide effect */
        font-size: 1rem;
    }

    .kanji-icon {
        font-size: 2.5rem;
    }

    .text-tip {
        font-size: 1rem;
    }
}

/* Mobile View */
@media (max-width: 768px) {
    .coach-tips {
        display: block; /* Stack vertically on mobile */
        grid-template-columns: repeat(2, 1fr); /* 2 columns */
        grid-template-rows: auto;
        gap: 20px;
    }

    .tip-container {
        width: 100%; /* Full width for mobile */
        transform: translateX(0); /* No slide effect to prevent overflow */
        font-size: 0.9rem;
    }

    .kanji-icon {
        font-size: 3.2rem;
    }

    .text-tip {
        font-size: 0.9rem;
    }

    .right1, .right2, .left1, .left2 {
        grid-column: span 1 / span 1; /* Each div takes 1 column */
        grid-row: auto;
    }
}

/* Responsive layout for screens smaller than 480px (mobile phones) */
@media (max-width: 480px) {
    .coach-tips {
        grid-template-columns: 1fr; /* 1 column */
        gap: 15px;
    }

    .right1, .right2, .left1, .left2 {
        grid-column: span 1 / span 1; /* Full width */
        text-align: center; /* Center content */
    }

    .kanji-icon {
        font-size: 3rem; /* Reduce Kanji size for small screens */
    }

    .text-tip {
        font-size: 1.1em; /* Slightly smaller text */
        max-width: 100%;
    }
}

/* Travel Section */
#travel {
    text-align: center;
    margin: 0 auto;
}


.text-city {
    text-shadow: 12px 12px 12px black;
}

.text-travel {
    background: rgba(0, 0, 0, 0.6); /* Dark overlay for readability */
    border: 1px solid black;
    padding: 10px;
    width: 250px;
    height: 200px;
    text-align: justify;
}

/* General styles for travel boxes */
.kyoto, .osaka, .hiroshima, .tokyo {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    gap: 8px;
    margin: 20px 0;
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 50px;
    color: white;
    height: 400px; /* Set height for uniformity */
    border-radius: 10px;
    box-shadow:  30px 30px 30px black;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out; /* Smooth transition */
}

/* Tokyo Section */
.tokyo {
    background-image: url(/static/images/tokio2.jpg);
    text-align: left;
}

/* Kyoto Section */
.kyoto {
    background-image: url(/static/images/kyoto.jpg);
}

/* Osaka Section */
.osaka {
    background-image: url(/static/images/Osaka2.jpg);
}

/* Hiroshima Section */
.hiroshima {
    background-image: url(/static/images/hiroshima.jpg);
}

/* Hover effect */
.tokyo:hover, .kyoto:hover, .osaka:hover, .hiroshima:hover {
    transform: scale(1.2); /* Zooms in by 20% */
    box-shadow:  0px 0px 50px rgba(0, 0, 0, 0.6); /* Add shadow on hover */
    opacity: 0.9; /* Slightly reduce opacity for hover effect */
}


/* Travel box content */
.travel-box1 {
    grid-column: 1;
    grid-row: 1;
    font-size: 2rem;
    font-weight: bold;
    text-align: right;
}

.travel-box2 {
    grid-column: 1;
    grid-row: 2;
    text-align: center;
    font-size: 1.2rem;
    text-align: left;
}

/* Responsive design */
@media (max-width: 768px) {
    .kyoto, .osaka, .hiroshima, .tokyo {
        height: 300px; /* Adjust height on smaller screens */
        padding: 20px;
    }

    .travel-box1 {
        font-size: 1.5rem;
    }

    .travel-box2 {
        font-size: 1rem;
    }
}

/* Responsive design */
@media (max-width: 412px) {
    .kyoto, .osaka, .hiroshima, .tokyo {
        height: 300px; /* Adjust height on smaller screens */
        padding: 20px;
    }

    .kyoto:hover, .osaka:hover, .hiroshima:hover, .tokyo:hover {
        transform: scale(1.0);
    }

    .travel-box1 {
        font-size: 1.5rem;
    }

    .travel-box2 {
        font-size: 1rem;
    }
}