/*====================================================
    VARIABLES
====================================================*/

:root{

    --primary: #BE1E2D;
    --secondary: #4c4c4b;
    --dark: #1f2937;
    --text: #555;
    --white: #ffffff;
	    --red: #BE1E2D;

    --cta-button: #BE1E2D;
    --cta-button-hover: #000000;

    --max-width:1200px;

}

/*====================================================
    RESET
====================================================*/

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

html{
    scroll-behavior:smooth;
}

body{

    font-family:Arial, Helvetica, sans-serif;
    color:var(--text);
    line-height:1.8;
    background:#fff;

}

img{

    display:block;
    max-width:100%;

}

a{

    text-decoration:none;

}

.container{

    width:90%;
    max-width:var(--max-width);
    margin:auto;

}

section{

    padding:50px 0;

}

/*====================================================
    HEADER
====================================================*/

header {
    position: absolute;
    width: 100%;
    z-index: 100;
    top: 0;
    left: 0;
	 background-color: black;
}

.header-inner{

    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:25px 0;

}

.logo img{

    height:50px;

}

nav ul{

    list-style:none;
    display:flex;
    gap:30px;

}

nav a {
    color: white;
	    font-size: 1rem;
	font-family: "Roboto", Arial, sans-serif; /* Typeface */
  font-weight: 300;                                /* Boldness */
  font-style: normal;                               /* Slant */
  line-height: 1.0;                                 /* Spacing between lines */
}

nav a:hover{

    opacity:.75;

}

/*====================================================
    HERO
====================================================*/

.hero{

    height:100vh;
    background:url("../images/hero.jpg") center center/cover no-repeat;
		 padding: 0px 0;

}

.sub-hero{

    height:45vh;
    background:url("../images/hero.jpg") center center/cover no-repeat;
		 padding: 0px 0;

}

.hero-overlay{

    height:100%;
    display:flex;
    justify-content:center;
    align-items:center;
    text-align:center;
    background:rgba(0,0,0,.45);

}

.hero-content{

    color:#fff;

}

.hero h1,
.sub-hero h1 {
    font-size: 5rem;
	font-family: "comfortaa", Arial, sans-serif; /* Typeface */
  font-weight: normal;                                /* Boldness */
  font-style: normal;                               /* Slant */
  line-height: 1.5;                                 /* Spacing between lines */
	 color:#fff;
	
}

.hero h2,
.sub-hero h2 {
    font-size: 3rem;
	font-family: "Roboto", Arial, sans-serif; /* Typeface */
  font-weight: 300;                                /* Boldness */
  font-style: normal;                               /* Slant */
  line-height: 1.0;                                 /* Spacing between lines */
	 color:#fff;
	
}

.hero p{

    font-size:1.3rem;

}

/*====================================================
    CONTENT
====================================================*/

.content-section h2 {
    margin-bottom: 30px;
    color: var(--dark);
	    font-size: 2rem;
	font-family: "comfortaa", Arial, sans-serif; /* Typeface */
  font-weight: normal;                                /* Boldness */
  font-style: normal;                               /* Slant */
  line-height: 1.5;                                 /* Spacing between lines */
}

.content-section h3 {
    color: var(--dark);
	    font-size: 1.5rem;
	font-family: "comfortaa", Arial, sans-serif; /* Typeface */
  font-weight: normal;                                /* Boldness */
  font-style: normal;                               /* Slant */
  line-height: 1.5;                                 /* Spacing between lines */
}

.content-section p{

    margin-bottom:20px;

}

.image-grid{

    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:30px;
    margin-top:50px;

}

.image-grid img{

    border-radius:12px;

}

/*====================================================
    SPLIT SECTION
====================================================*/

.split-section{

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

    gap:50px;

    margin:0 10px;

    background:var(--secondary);

    text-align:center;

}

.split-section h2 {
    margin-bottom: 30px;
    color: var(--red);
	    font-size: 3rem;
	font-family: "comfortaa", Arial, sans-serif; /* Typeface */
  font-weight: normal;                                /* Boldness */
  font-style: normal;                               /* Slant */
  line-height: 1.5;                                 /* Spacing between lines */
}

.split-section p {
    color: var(--white);
}

.split-text{

    flex:1;

    padding:10px 00px 10px 0;

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

}

.split-gallery{

    flex:1;

    padding:60px 0 60px 20px;

    display:flex;
    flex-direction:column;
    align-items:center;

}

.main-image img{

    border-radius:12px;

}

.thumbnails{

    display:grid;
    grid-template-columns:repeat(8,1fr);
    gap:10px;

    margin-top:20px;

    width:100%;

    justify-content:center;

}

.thumbnails img{

    width:100%;
    aspect-ratio:1/1;

    object-fit:cover;

    border-radius:6px;

    cursor:pointer;

    transition:.25s ease;

}

.thumbnails img:hover{

    transform:scale(1.05);

}

/*====================================================
    CTA
====================================================*/

.cta{

    text-align:center;

}

.cta h2 {
    margin-bottom: 30px;
    color: var(--dark);
	    font-size: 2rem;
	font-family: "comfortaa", Arial, sans-serif; /* Typeface */
  font-weight: normal;                                /* Boldness */
  font-style: normal;                               /* Slant */
  line-height: 1.5;                                 /* Spacing between lines */
	
}

.cta-button {
    background: var(--cta-button);
    color: white;
    padding: 15px 40px;
    border-radius: 50px;
    display: inline-block;
    transition: .3s;
}

.cta-button:hover{

    background:var(--cta-button-hover);

}

/*====================================================
    FOOTER
====================================================*/

footer{

    background:var(--dark);
    color:#fff;
    padding:50px 0;

}

.footer-inner{

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

}

.footer-logo{

    height:35px;

}

/*====================================================
    LARGE TABLETS
====================================================*/

@media (max-width:1200px){

    .split-section{

        margin:0 40px;

    }

    .thumbnails{

        grid-template-columns:repeat(6,1fr);

    }

}

/*====================================================
    TABLETS
====================================================*/

@media (max-width:992px){

    .hero h1,
    .sub-hero h1{

        font-size:3rem;

    }

    .split-section{

        margin:0 30px;
        gap:40px;

    }

    .thumbnails{

        grid-template-columns:repeat(4,1fr);

    }

}

/*====================================================
    MOBILE
====================================================*/

@media (max-width:768px){

    section{

        padding:70px 0;

    }

    .header-inner{

        flex-direction:column;
        gap:20px;

    }

    nav ul{

        flex-wrap:wrap;
        justify-content:center;

    }

    .hero h1,
    .sub-hero h1{

        font-size:2.4rem;

    }

    .image-grid{

        grid-template-columns:1fr;

    }

    /* Split section becomes vertical */

    .split-section{

        flex-direction:column;

        gap:30px;

        margin:0 20px;

    }

    .split-text,
    .split-gallery{

        width:100%;
        flex:none;

        padding:30px 0;

    }

    .thumbnails{

        grid-template-columns:repeat(4,1fr);

    }

    .footer-inner{

        flex-direction:column;
        text-align:center;
        gap:20px;

    }

}

/*====================================================
    SMALL PHONES
====================================================*/

@media (max-width:480px){

    .hero h1,
    .sub-hero h1{

        font-size:2rem;

    }

    .thumbnails{

        grid-template-columns:repeat(2,1fr);

    }

}