:root {
    --gold: #FFD700;
    --dark: #232323;
    --light: #f1f1f1;
}

::selection{
  background-color: var(--gold);
  color: var(--dark);
}

@font-face {
  font-family: 'Marina';
  src: url('../fonts/Marina-Script-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

html { font-size: 18px; }

body {
	background-image: linear-gradient(120deg, #ebedee 0%, #fdfbfb 100%);		
	margin: 0;
	font-family: "Montserrat", sans-serif;
	line-height: 1.65;
}

.wrapper {
	max-width: 1400px;
	margin: 0 auto;
	padding: 0px 20px; 
}

.top .wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.mono {
    font-family: "SUSE Mono", monospace;
    font-weight: 500;
    font-size: 0.8em;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

p, li {
    font-family: "Montserrat", sans-serif;
    font-weight: 400;
    font-size: 1em;
}

h1, h2, h3, h4, h5 {
    font-family: "Bricolage Grotesque", sans-serif;
    font-weight: 500;
    line-height: 1.15;
	margin: 0px;
}

h1{
    font-weight: 700;
    margin-top: 0;
    font-size: 4.21em;
}

h1.header-title { line-height: 0.92!important; }
h2{ font-size: 3.16em; }
h3{ font-size: 2.37em; }
h4{ font-size: 1.78em; }
h5{ font-size: 1.33em; }
.text-caption { font-size: 0.75em; }
small, .text-small { font-size: 0.56em; }




/* HEADER */

@media (max-width: 1210px) {
  header .grid {
    display: flex !important;     
    flex-direction: column-reverse; 
    align-items: center;          
    justify-content: center;
    text-align: center;
    gap: 20px;
    margin: 0 auto;
  }

  header .col {
    width: 100%;
    margin-top: 20px;
  }

  header .col:nth-child(1) p {
    width: 100%;
    margin: 0 auto;
  }
}


header * .grid {
  display: grid;
  grid-template-columns: auto auto;
  grid-gap: 20px;
  grid-template-columns: 4fr 3fr;
  min-height: 600px;
  margin: auto 0px;
}

header * .col {
    display: flex;
    flex-direction: column; 
    justify-content: center; 
    height: 100%;
}

header * .col:nth-child(1) p{
	width: 80%;
}

header * .col:nth-child(2) {
    position: relative;       
    height: 100%;    
    display: flex;            
    justify-content: center; 
    align-items: center;  
}

header * .card{
	background-image: linear-gradient(120deg, #fdfbfb 0%, #f2f2f2 100%);
	border-radius: 20px;
	padding: 10px;
	width: 350px;
	box-shadow: rgba(0, 0, 0, 0.08) 0px 4px 12px;		
	position: relative;
	border: 1px solid #f1f1f1;
}

header * .card p{
	text-align: center;
}

header * .card div{
	aspect-ratio: 4 / 3;
	background: var(--light);
	border-radius: 10px;
}

header * .card:not(:nth-child(1)) {
	margin-top: -335px;
}

header * .card:nth-child(1) {
	z-index: 30;
	transform: rotate(2deg);		
}

header * .card:nth-child(2) {
	z-index: 20;
	transform: rotate(-5deg);
	left: -50px;
}

header * .card:nth-child(3) {
	z-index: 10;
	transform: rotate(9deg);	
	right: -50px;	
}

header .content { margin: 100px 0; }

header .logo, footer .logo { 
	font-size: 24px; 
	font-weight: bold; 
}

header .logo-badge {
    width: 70px;
    height: 60px;
    background-color: var(--dark);
    margin-top: -00px;
    padding-top: 10px;
    text-align: center;
	border-bottom-left-radius: 5px;
	border-bottom-right-radius: 5px;	
}

header .logo-badge img { 
	filter: invert(1); 
}

nav ul {
    list-style: none;
    display: flex;
    gap: 5px;
    margin: 0;
    padding: 0;
}

nav ul li a {
    text-decoration: none;
    color: #333;
    font-weight: 500;
	font-size: 0.9em;
	padding: 10px 20px;
	border-radius: 10px;
    transition: 0.3s;
}

nav ul li a:hover { 
	background-color: ffffff;
	color: #007BFF;
 }
 
 
 
/* FOOTER */
footer{
	background-color: var(--dark);
	min-height: 400px;
	color: var(--light);
}

footer .logo-badge {
    width: 70px;
    height: 60px;
    background-color: var(--gold);
    padding-top: 0px;
	margin-top: -10px;
}

footer .logo-badge img { 
	filter: invert(1); 
}

hr{
	border: 1px solid white;
	opacity: 0.1;
}

footer .grid {
  margin-top: 50px;
  display: grid;
  grid-template-columns: auto auto auto auto;
  grid-gap: 10px;
}

footer p:last-child{
	font-size: 0.8em;
}