/* >>> HEADER <<< */header { background-image: url("../public/background.jpg"); height: 70vh; background-size: cover; background-position: center; position: relative;}.buttons { display: flex; justify-content: space-around; text-align: center; padding-top: 7rem; gap: 15rem;}.buttons a { color: white; text-decoration: none; font-size: 25px; padding-left: 10px; padding-right: 10px; position: relative;}.buttons a:before { content: ""; position: absolute; width: 0; height: 3px; bottom: 0; left: 0; background-color: #FF4200; -webkit-transition: all 0.1s ease-in-out 0s; transition: all 0.1s ease-in-out 0s;}.buttons a:hover:before { width: 100%;}nav { position: absolute; bottom: -2.5rem; width: 100%; display: flex; justify-content: center;}nav > ul { display: flex; gap: 7rem; background-color: #FF4200; list-style: none; padding: 0.7rem 3rem;}nav > ul li a { color: white; text-decoration: none; font-size: 20px;}nav > ul li a:hover { color: #cecece;}/* > MOBILE-NAV < */.mobile { display: none;}.hamburger { position: relative; display: block; width: 35px; cursor: pointer;}.hamburger.isActive:before { transform: rotate(-45deg) translate(-8px, 6px);}.hamburger.isActive:after { transform: rotate(45deg) translate(-9px, -8px);}.hamburger.isActive .bar { opacity: 0;}.hamburger .bar, .hamburger:after, .hamburger:before { content: ""; display: block; width: 100%; height: 5px; background-color: #fff; margin: 6px 0px; transition: 0.4s;}@media screen and (max-width: 768px) { .buttons { text-align: center; padding-top: 6rem; gap: 10vw; } nav > ul { display: none; } .mobile { display: block; width: 60%; background-color: #FF4200; margin-bottom: 1.3rem; z-index: 10; } .mobile .hamburger { margin-left: auto; margin-right: auto; } .mobile ul { height: 0; display: block; overflow: hidden; position: absolute; list-style: none; padding-left: 0; margin-top: 0; text-align: center; width: 60%; transition: 0.4s all; } .mobile ul li { padding: 0.5rem 0; background-color: #FF4200; } .mobile ul li a { color: white; text-decoration: none; } .mobile ul li a:hover { color: #cecece; } ul.isActive { transition: 0.4s all; height: 15rem; }}/* >>> CONTENT <<< */section { margin-top: 5rem; max-width: 1100px; margin-left: auto; margin-right: auto;}section .heading { display: flex; align-items: center; width: 90%; margin-left: auto; margin-right: auto;}section h1 { width: 100%; text-align: center; font-size: 2rem; flex: 7;}section .line { flex: 1; height: 4px; width: auto; border-radius: 1rem; background-color: #FF4200;}.cards { display: flex; justify-content: space-between; margin-top: 2rem;}.card { background-color: transparent; border-radius: 5px; width: 300px; height: 300px;}.card .inner { position: relative; width: 100%; height: 100%; text-align: center; transition: transform 0.5s; transform-style: preserve-3d;}.card:hover .inner { transform: rotateY(180deg);}.card img { margin-left: 1rem; margin-right: 1rem; margin-top: 1rem; width: 80%;}.card .front h2 { margin: 0; font-size: 30px;}.front, .back { position: absolute; width: 100%; height: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; border: 2px solid #FF4200;}.front { background-color: #fff;}.back { background-color: #fff; transform: rotateY(180deg); display: flex; flex-direction: column; justify-content: center;}.back p { padding-left: 1rem; padding-right: 1rem;}.content { margin-top: 8rem;}.content h2 { color: #FF4200; font-size: 30px;}.content { color: #4f4f4f;}.is-layout-flex { gap: 5rem}@media screen and (max-width: 768px) { section { padding-left: 1rem; padding-right: 1rem; } section .heading { display: flex; align-items: center; width: 90%; margin-left: auto; margin-right: auto; } section h1 { width: 100%; text-align: center; font-size: 4vw; flex: 7; } .cards { flex-direction: column; margin-left: auto; margin-right: auto; width: 70vw; gap: 2rem } .card { width: 100%; height: 100%; aspect-ratio: 1/1; } .card .inner h2 { margin-top: -1.2rem; } .card .back p { font-size: 3.5vw; }}