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

header {
    position: sticky;
    top: 0;
    z-index: 50;
    height: 70px;
    width: 100%;
    background-color: rgb(0, 0, 0);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0px 25px;
}

#icone-valorant-header {
    height: auto;
    width: auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

#icone-valorant-header img {
    height: 50px;
    width: auto;
    margin: 10px;
}

#icone-valorant-header #titulo-header {
    font-family: "valorant";
    font-style: normal;
    font-size: 30px;
    text-decoration: none;
    color: red;
}

.opcoes-navegacao ul {
    display: flex;
    list-style: none;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.opcoes-navegacao ul li a {
    font-style: normal;
    text-decoration: none;
    color: white;
    font-size: 25px;
    font-family: "Barlow Condensed", sans-serif;
    border: 3px;
    border-radius: 8px;
    overflow: hidden;
    padding: 6px 12px;
    transition: background 0.2s, color 0.2s;
}

.opcoes-navegacao ul li a:hover {
    color: red;
    text-decoration: underline;
    background: rgba(255, 70, 85, 0.15);
}

@font-face {
    font-family: "valorant";
    src: url("fontes/Valorant\ Font.ttf");
}

#section-fundo-inicial {
    position: relative;
    height: 100vh;
    width: 100%;
    background-image: url("images/valorant-background.jpg");
    background-position: top;
    background-size: cover;
}

.overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgb(0, 0, 0), rgba(0, 0, 0, 0));
}

.elementos-section-inicial {
    display: flex;
    position: absolute;
    inset: 0;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.elementos-section-inicial h1 {
    color: white;
    font-family: "Barlow Condensed", sans-serif;
}

.elementos-section-inicial .seta-animada img {
    margin-top: 50px;
    height: 50px;
    width: 50px;
    transform: translateY(0);
    transition: transform 0.5s linear;
    animation: flutuar 3.5s linear infinite;
}


@keyframes flutuar{
    0%{ transform: translateY(0px);}
    50%{transform: translateY(30px);}
    100%{transform: translateY(0px);}
}
.sessao {
    height: auto;
    width: 100%;
    padding: 5% 10%;
    background-color: black;
}

.titulo-section h1 {
    color: red;
    font-family: "valorant", sans-serif;
}

.container-section-sobre-jogo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5%;
    height: 100vh;
}

.container-texto-sobre-jogo p {
    color: white;
    font-family: "Inter", sans-serif;
    text-align: left;
    margin-bottom: 16px;
    line-height: 1.8;
}

.container-texto-sobre-jogo {
    height: auto;
    width: 40%;
}

.container-video-sobre-jogo { 
    position: relative;
    height: 50%;
    width: 45%;
    overflow: hidden;
    border: 2px solid red;
    border-radius: 8px 50px;
    box-shadow: 0 0 10px red,
        0 0 30px red,
        0 0 60px red;
}

.container-video-sobre-jogo video {
    position: absolute;
    height: 100%;
    width: 100%;
    inset: 0;
    object-fit: cover;
}

.container-section-agentes {
    padding: 5%;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    height: 100%;
    width: 100%;
    gap: 50px;

}

.card {
    display: flex;
    flex-direction: column;
    border-radius: 8px;
    overflow: hidden;
    aspect-ratio: 1 / 1.5;
}

.card .container-imagem-card {
    flex: 1;
    width: 100%;
    overflow: hidden;
    position: relative;
    background-size: cover;
    background-position: center;
    transition: background 0.6s ease;
}
 
.card .container-imagem-card::before{
    content: '';
    position:absolute;
    inset: 0;
    background-position: center;
    background-size: cover;
    filter: blur(0px);
    transform: scale(1.05);
    transition: filter 0.6s ease;
}
.card .container-imagem-card img {
    position:absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    display: block;
    opacity: 0;
    transform: scale(1);
    transform-origin: bottom center;
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.card:hover .container-imagem-card img {
    opacity: 1;
    transform: scale(1.1);
}

.card:hover .container-imagem-card::before{
    filter: blur(20px);
}

/*início cards*/

/*card-astra*/

#card-astra .container-imagem-card::before{
    background-image: url("images/astra.png");
}

/*card-breach*/

#card-breach .container-imagem-card::before{
    background-image: url("images/breach.png");
}

/*card-brimstone*/

#card-brimstone .container-imagem-card::before{
    background-image: url("images/brimstone.png");
}

/*card-chamber*/

#card-chamber .container-imagem-card::before{
    background-image: url("images/chamber.png");
}

/*card-clove*/

#card-clove .container-imagem-card::before{
    background-image: url("images/clove.png");
    /*mexer na imagem sem fundo da clove*/
}

/*card-cypher*/

#card-cypher .container-imagem-card::before{
    background-image: url("images/cypher.png");
}

/*card-deadlock*/

#card-deadlock .container-imagem-card::before{
    background-image: url("images/deadlock.png");
}

/*card-fade*/

#card-fade .container-imagem-card::before{
    background-image: url("images/fade.png");
}

/*card-gekko*/

#card-gekko .container-imagem-card::before{
    background-image: url("images/gekko.png");
}

/*card-harbor*/

#card-harbor .container-imagem-card::before{
    background-image: url("images/harbor.png");
}

/*card-iso*/

#card-iso .container-imagem-card::before{
    background-image: url("images/iso.png");
}

/*card-jett*/

#card-jett .container-imagem-card::before{
    background-image: url("images/jett.png");
}

/*card-kayo*/

#card-kayo .container-imagem-card::before{
    background-image: url("images/kayo.png");
}

/*card-killjoy*/

#card-killjoy .container-imagem-card::before{
    background-image: url("images/killjoy.png");
}

/*card-neon*/

#card-neon .container-imagem-card::before{
    background-image: url("images/neon.png");
}

/*card-omen*/

#card-omen .container-imagem-card::before{
    background-image: url("images/omen.png");
}

/*card-phoenix*/

#card-phoenix .container-imagem-card::before{
    background-image: url("images/phoenix.png");
}

/*card-raze*/

#card-raze .container-imagem-card::before{
    background-image: url("images/raze.png");
}

/*card-reyna*/

#card-reyna .container-imagem-card::before{
    background-image: url("images/reyna.png");
}

/*card-sage*/

#card-sage .container-imagem-card::before{
    background-image: url("images/sage.png");
}

/*card-skye*/

#card-skye .container-imagem-card::before{
    background-image: url("images/skye.png");
}

/*card-sova*/

#card-sova .container-imagem-card::before{
    background-image: url("images/sova.png");
}

/*card-tejo*/

#card-tejo .container-imagem-card::before{
    background-image: url("images/tejo.png");
}

#card-tejo .container-imagem-card:hover img {
    opacity: 1;
    transform: scale(1.15);
}
/*card-veto*/

#card-veto .container-imagem-card::before{
    background-image: url("images/veto.png");
}

#card-veto .container-imagem-card:hover img {
    opacity: 1;
    transform: scale(1.07);
}
/*card-viper*/

#card-viper .container-imagem-card::before{
    background-image: url("images/viper.png");
}

/*card-vyse*/

#card-vyse .container-imagem-card::before{
    background-image: url("images/vyse.png");
}


/*card-waylay*/

#card-waylay .container-imagem-card::before{
    background-image: url("images/waylay.png");
}

#card-waylay .container-imagem-card:hover img {
    opacity: 1;
    transform: scale(1.2);
}
/*card-yoru*/

#card-yoru .container-imagem-card::before{
    background-image: url("images/yoru.png");
}

/*fim cards*/

.card .container-texto-card {
    display: flex;
    padding: 4px;
    height: auto;
    justify-content: center;
    align-items: center;
    font-family: "Barlow Condensed", sans-serif;
    color: red;
    background-color: #1a1a1a;
}