@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,900;1,400&display=swap');

:root{
    --clr-pri: #ff0000;
    --clr-sec: #260D0D;
    --clr-logo: #bfd5fd;
    --clr-black: #101010;
    --clr-white: #f1f1f1;
}

*{
    font-family: 'Montserrat', sans-serif;
    font-size: 16px;
    padding: 0;
    margin: 0;
    border: 0;
    color: var(--clr-white);
    font-weight: 300;
    text-decoration: none;
    scroll-behavior: smooth;
}

html{background-color: var(--clr-black);}
img, video{width: 100%;}

/* Text */

p{margin: 1rem; line-height: 1.5rem;}
h1,h2,h3{font-weight: 900; text-transform: uppercase; text-align: center;}

h1{font-size: 4rem; margin-block: 2rem 1rem;}
h2{font-size: 3rem; margin: 1rem;}
h3{font-size: 2rem; margin-bottom: .5rem;}
.centertext{text-align: center; margin-inline: auto;}
.max-600{max-width: 600px;}

@media only screen and (max-width: 800px) {
    h1{font-size: 2rem; margin-block: 2rem 1rem;}
    h2{font-size: 1.5rem; margin: 1rem;}
    h3{font-size: 1rem; margin-bottom: .5rem;}
}

.button{
    padding: .5rem 1rem;
    margin: 1rem;
    border: var(--clr-pri) solid 2px;
    background-color: var(--clr-sec);
    border-radius: 1000px;
    text-transform: uppercase;
    font-weight: 900;
    transition: background-color 300ms;
}
.button:focus ,.button:hover{
    background-color: var(--clr-pri);
}

/* Sections */

section{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: min(1000px, calc(100% - 4rem));
    margin: 6rem auto;
}

/* Columns */

.columns{
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 2rem;
}
.columns-reversed{flex-direction: row-reverse;}
.column-text{width: 60%;}
.column-img{width:40%;}
.column-img img{border-radius: .5rem;}

@media only screen and (max-width: 800px) {
    .columns, .columns-reversed{
        flex-direction: column;
        gap: 1rem;
    }
    .column-text{width: 100%; text-align: center;}
    .column-img{width:40%;}

}

.grid-4col{
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    padding: 1rem;
}
.grid-3col{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    padding: 1rem;
}
.grid-2col{
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    padding: 1rem;
}
.grid-join2rows{grid-column: span 2;}

@media only screen and (max-width: 800px) {
    .gridsm-2col{grid-template-columns: 1fr 1fr;}
    .gridsm-1col{grid-template-columns: 1fr;}
    }

/* Elements */

.gal-elem{position: relative; display: flex; align-content: center;border-radius: .5rem; overflow: hidden;}
.gal-elem-link{border: var(--clr-pri) solid 2px;}
.gal-elem-link:focus,.gal-elem-link:hover{border: var(--clr-white) solid 2px;}

.gal-img{align-self: center; border-radius: .5rem;}
.gal-desc{position: absolute;
    top:75%;left:50%; 
    transform: translate(-50%,-50%);
    text-align: center;
    text-shadow: 2px 2px 5px var(--clr-black);
    font-weight: 900;
    width:80%;
    }

.iconbutton{
    width: min(575px,calc(100% - 25px));
    height: 100px;
    display: flex;
    border: var(--clr-pri) solid 2px;
    border-radius: 1000px;
    background-color: var(--clr-sec);
    transition: background-color 300ms;
    margin: .5rem;
    padding-right: 25px;
    align-items: center;
}
.iconbutton:focus ,.iconbutton:hover{
    background-color: var(--clr-pri);
}
.iconbutton img{width: 80px; height: 80px; margin: 10px;}
.iconbutton div {align-items: center; width: 100%;}
.iconbutton div h3{font-size: 1.5rem; margin: 0; text-align: center; margin-bottom: .5rem;}

@media only screen and (max-width: 600px) {
    .iconbutton {height: 80px;}
    .iconbutton div h3{font-size: 1rem;}
    .iconbutton img{width: 60px; height: 60px; margin: 10px;}
}
.iconbutton div p{font-size: .8rem; margin: 0; text-align: center; line-height: normal;}

.testimony{
    text-align: center;
    font-weight: 900;
    padding-block: 1rem 0.5rem;}
.testimony span{
    text-align: center; color: var(--clr-primary); font-size: .75rem;
}


/* Header */

.titlesection{
    margin: 0;
    padding-bottom: 2rem;
    width: 100%;
    display: flex;
    justify-content: center;
    background-image: url(imgs/bg/BackgroundHor.svg);
    background-size: cover;
    background-position: center;
    border-radius: 0 0 2rem 2rem;
}
.logo{
    height: 80px;
    margin: 2rem;
}

.subtitle{
    font-size: 1.25rem;
    font-weight: 700;
    text-align: center;
}
.navlink{
    padding: .5rem 1rem;
    margin: .25rem;
    border: var(--clr-white) solid 2px;
    background-color: var(--clr-sec);
    border-radius: 1000px;
    text-transform: uppercase;
    font-weight: 900;
    transition: background-color 300ms,
    color 300ms;
}

.navlinks{
    display: grid;
    grid-template-columns: repeat(4, auto);
    text-align: center;
}
@media only screen and (max-width: 600px) {
    .navlinks{
        grid-template-columns: repeat(2, auto);
    }
}

.navlink:hover, .navlink:focus ,.navused{
    border: var(--clr-white) solid 2px;
    background-color: var(--clr-white);
    color: var(--clr-pri);
}

/* Footer */


footer{
    background-image: url(imgs/bg/BackgroundHor.svg);
    background-size: cover;
    background-position: center;
    padding: 2rem;
    border-radius: 2rem 2rem 0 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.copyright{
    font-size: .8rem;
    margin: 0;
    padding-block:3rem 0;
}