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

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

html {
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    background-color: #324d3c;
    color: #cdf8ae;
    font-family: "Oxygen", sans-serif;
}

img {
    display: block;
    max-width: 100%;
}

a {
    color: inherit;
    text-decoration: none;
}

ul {
    list-style: none;
}


/* =========================================
   Page accents
========================================= */

.page-accent {
    width: 100%;
    height: 18px;
    background-color: #f4e75c;
}


/* =========================================
   Main centered desktop area
========================================= */

.site-wrapper {
    width: min(1240px, 92%);
    margin: 0 auto;
    padding: 0 0 70px;
}


/* =========================================
   Banner
========================================= */
/* The banner is a hero image with a heading over it. The heading is centered both vertically and horizontally. The image is set to cover the entire width of the banner and is positioned in the center. The heading has a text shadow to make it stand out against the background image. */
.hero {
    position: relative;

    width: 102%;
    height: 210px;

    background-image:
        
        url("../Images/tran2.png");

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

    overflow: hidden;
}

.hero h1 {
    position: absolute;
    inset: 0;

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

    padding: 20px;

    color: #d0ffaf;
    font-family: cursive;
    font-size: clamp(4rem, 7vw, 7rem);
    font-style: italic;
    font-weight: 400;
    letter-spacing: 8px;
    line-height: 1;
    text-align: center;
    text-transform: uppercase;

    text-shadow:
        0 3px 6px rgba(0, 0, 0, 0.28);
}


/* =========================================
   Mobile navigation
========================================= */

.mobile-nav {
    display: none;
}


/* =========================================
   Top photo gallery
========================================= */

.top-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 42px;

    width: 88%;
    margin: 58px auto 48px;
}

.top-gallery img {
    width: 100%;
    height: 190px;

    border-radius: 8px;
    object-fit: cover;

    box-shadow:
        0 10px 18px rgba(0, 0, 0, 0.24);
}


/* =========================================
   Sidebar and main content
========================================= */

.content-layout {
    display: grid;
    grid-template-columns: 185px minmax(0, 1fr);
    align-items: start;
    gap: 58px;
/*   The content layout is a grid with two columns. The first column is the sidebar and the second column is the main content. The sidebar has a fixed width of 185px and the main content takes up the remaining space. The gap between the two columns is 58px. */
    width: 88%;
    margin: 0 auto;
}


/* =========================================
   Sidebar
========================================= */

.sidebar {
    align-self: start;
}

.sidebar-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    min-height: 155px;
    padding: 20px 12px;

    background-color: #356d7c;
    color: #d1ffb4;

    font-family: "Montserrat", sans-serif;
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
    text-transform: uppercase;

    box-shadow:
        0 8px 16px rgba(0, 0, 0, 0.18);
}

.sidebar-logo small {
    margin: 6px 0;
    font-size: 0.65rem;
    font-weight: 400;
}

.sidebar li {
    border-bottom: 1px solid rgba(204, 248, 174, 0.28);
}

.sidebar a {
    display: flex;
    align-items: center;
    justify-content: space-between;

    min-height: 43px;
    padding: 8px 8px 8px 12px;

    color: #cff9b0;

    font-family: "Montserrat", sans-serif;
    font-size: 0.76rem;
    font-weight: 600;
    text-transform: uppercase;

    transition:
        background-color 0.2s ease,
        padding-left 0.2s ease;
}

.sidebar a:hover,
.sidebar a:focus-visible {
    padding-left: 17px;
    background-color: rgba(90, 143, 111, 0.35);
}

.sidebar a span {
    font-size: 1.35rem;
}


/* =========================================
   Main content typography
========================================= */

main {
    min-width: 0;
}

main section {
    width: 100%;
}

main h2 {
    position: relative;

    margin-bottom: 18px;
    padding-bottom: 8px;

    color: #d0ffaf;

    font-family: "Montserrat", sans-serif;
    font-size: 2rem;
    font-weight: 700;
}

main h2::after {
    content: "";

    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;

    height: 5px;

    background-color: #f4e75c;
}

main p {
    color: #c9eead;
    font-size: 1rem;
    line-height: 1.45;
}


/* =========================================
   Rome section images
========================================= */

.rome-images {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 38px;

    margin: 70px 0 78px;
}

.rome-images img {
    width: 100%;
    height: 210px;

    object-fit: cover;

    box-shadow:
        0 12px 22px rgba(0, 0, 0, 0.28);
}


/* =========================================
   Attractions section
========================================= */

.attractions-intro {
    max-width: 780px;
    margin-bottom: 86px;
}

.attractions-list {
    display: flex;
    flex-direction: column;
    gap: 50px;
}

.attraction {
    display: grid;
    align-items: start;
    gap: 44px;
}

.attraction-left {
    grid-template-columns: 1.15fr 1fr;
}

.attraction-right {
    grid-template-columns: 1fr 1.15fr;
}

.attraction img {
    width: 100%;
    height: 185px;

    object-fit: cover;

    box-shadow:
        0 10px 18px rgba(0, 0, 0, 0.24);
}

.attraction p {
    color: #e0da59;
    font-size: 0.82rem;
    font-style: italic;
    line-height: 1.4;
}


/* =========================================
   Footer
========================================= */

.site-footer {
    width: 88%;
    margin: 95px auto 0;
    padding: 25px 10px;

    border-top: 4px solid #f4e75c;

    text-align: center;
}

.site-footer p {
    color: #cef4b1;
    font-size: 0.9rem;
}


/* =========================================
   Tablet
========================================= */

@media screen and (max-width: 900px) {

    .site-wrapper {
        width: 95%;
    }

    .hero {
        height: 170px;
    }

    .hero h1 {
        font-size: clamp(3rem, 8vw, 5rem);
        letter-spacing: 5px;
    }

    .mobile-nav {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 15px 25px;

        width: 92%;
        margin: 28px auto 0;
    }

    .mobile-nav a {
        font-family: "Montserrat", sans-serif;
        font-size: 0.75rem;
        font-weight: 700;
        text-transform: uppercase;
    }

    .top-gallery {
        width: 92%;
        gap: 20px;
    }

    .top-gallery img {
        height: 150px;
    }

    .content-layout {
        display: block;
        width: 90%;
    }

    .sidebar {
        display: none;
    }

    .rome-images img {
        height: 180px;
    }
}


/* =========================================
   Mobile
========================================= */

@media screen and (max-width: 600px) {

    .page-accent {
        height: 14px;
    }

    .site-wrapper {
        width: 100%;
        padding-bottom: 40px;
    }

    .hero {
        width: calc(100% - 36px);
        height: 110px;
        margin: 18px auto 0;
    }

    .hero h1 {
        font-size: clamp(2rem, 10vw, 3rem);
        letter-spacing: 2px;
    }

    .mobile-nav {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 7px;

        width: calc(100% - 36px);
        margin: 22px auto 25px;
    }

    .mobile-nav a {
        display: flex;
        align-items: center;
        justify-content: center;

        min-height: 32px;

        font-size: 0.54rem;
        line-height: 1.15;
        text-align: center;
    }

    .top-gallery {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;

        width: calc(100% - 52px);
        margin: 0 auto 38px;
    }

    .top-gallery img {
        height: 78px;
        border-radius: 8px;

        box-shadow:
            0 7px 12px rgba(0, 0, 0, 0.22);
    }

    .content-layout {
        width: calc(100% - 54px);
    }

    main h2 {
        margin-bottom: 10px;
        padding-bottom: 0;

        font-size: 1rem;
        text-align: center;
    }

    main h2::after {
        display: none;
    }

    main p {
        font-size: 0.82rem;
        font-weight: 600;
        line-height: 1.35;
    }

    /* Hidden because your mobile mockup does not show them */
    .rome-images {
        display: none;
    }

    .attractions-section {
        margin-top: 36px;
    }

    .attractions-intro {
        margin-bottom: 27px;
    }

    .attractions-list {
        gap: 32px;
    }

    .attraction-left,
    .attraction-right {
        display: flex;
        flex-direction: column;
        gap: 13px;
    }

    .attraction img {
        width: 150px;
        height: 98px;
        margin: 0 auto;
    }

    .attraction p {
        font-size: 0.73rem;
        font-weight: 400;
    }

    .attraction-left img {
        order: 1;
    }

    .attraction-left p {
        order: 2;
    }

    .attraction-right p {
        order: 1;
    }

    .attraction-right img {
        order: 2;
    }

    .site-footer {
        width: calc(100% - 54px);
        margin-top: 55px;
        padding: 18px 5px;
    }

    .site-footer p {
        font-size: 0.7rem;

    }
}
    @media (max-width: 768px) {
  nav ul {
    flex-direction: column;
    align-items: center;
    gap: 10px;
  }

  .hero-title {
    font-size: 2rem;
    text-align: center;
  }

  .content {
    padding: 20px;
  }
    }