@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@100;300;400;500;600;700;800;900&display=swap");

* {
   font-family: "Poppins", sans-serif;
   margin: 0;
   padding: 0;
   box-sizing: border-box;
   outline: none;
   border: none;
   text-decoration: none;
}

html {
   font-size: 62.5%;
   overflow-x: hidden;
   scroll-behavior: smooth;
   scroll-padding-top: 8rem;
}

html::-webkit-scrollbar {
   width: 1.5rem;
}
html::-webkit-scrollbar-track {
   background: transparent;
}
html::-webkit-scrollbar-thumb {
   background-color: #eeeeee;
}

body {
   user-select: none;
}

.container {
   max-width: 1200px;
   margin: auto;
}

header {
   background-color: #E54A4E;
   text-align: center;
   padding: 2rem;
}

header h1 {
   color: #fff;
   font-size: 3rem;
}

header h1 #city {
   text-decoration: underline;
}

header h1 #date {
   color: #000000;
}

.logo {
   display: flex;
   align-items: center;
   justify-content: space-around;
   border-bottom: 3px solid #000000;
   padding: 2rem 0;
}

.logo img {
   width: 200px;
}

.logo .btn {
   background-color: #ff0000;
   box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
   color: #fff;
   font-size: 2.3rem;
   font-weight: 600;
   text-transform: uppercase;
   padding: 1rem 2rem;
   transition: 0.3s all ease-in-out;
}

.logo .btn:hover {
   background-color: red;
   transform: scale(1.1);
}

.flags-title {
   background-color: #f9f9f9;
}

.flags-title h2 {
   max-width: 1200px;
   text-align: end;
   color: #000000;
   font-size: 2.8rem;
   font-weight: 500;
   margin: auto;
   padding: 1rem;
}

.flags {
   background-color: #f9f9f9;
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 4rem;
   padding: 0 1rem;
}

.flags img {
   width: 470px;
   transition: 0.3s all ease-in-out;
}

.flags img:hover {
   transform: scale(1.05);
}

.flags .flags .container-flags {
   display: flex;
   flex-direction: column;
}

.flags .container-flags .flag-country {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
   gap: 3rem;
   text-align: center;
}

.flags .container-flags .flag-country .flag-image img {
   width: 200px;
   height: 120px;
   transition: 0.3s all ease-in-out;
}

.flags .container-flags .flag-country .flag-image img:hover {
   transform: scale(1.1);
}

.flags .container-flags .flag-country .flag-image legend {
   color: black;
   font-size: 1.6rem;
   font-weight: 600;
   margin-bottom: 1rem;
}

.benefits {
   display: flex;
   align-items: center;
   justify-content: space-around;
   max-width: 1200px;
   margin: auto;
   padding: 3rem 0;
}

.benefits img {
   width: auto;
}

.benefits h2 {
   color: #60365c;
   font-size: 3.8rem;
   font-weight: 600;
   text-align: center;
}

.footer {
   background-color: #f9f9f9;
   padding: 3rem 1rem;
}

.footer .footer-content {
   max-width: 1200px;
   margin: auto;
   text-align: center;
}

.footer .footer-content p {
   font-size: 1.8rem;
}

.footer .footer-content nav {
   margin: 3rem 0 2rem;
}

.footer .footer-content a {
   color: black;
   font-size: 1.8rem;
}