@import url(https://fonts.googleapis.com/css?family=Varela+Round);
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/* reset css*/

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Opens Sans', sans-serif;
}

/* figcapition */

figcaption {
  font-family: 'poppins';
}

/* Scroll V*/

*::-webkit-scrollbar {
  height: 10px;
  width: 10px;
}

*::-webkit-scrollbar-thumb {
  border-radius: 5px;
  background-color: #2d81c7;
}

*::-webkit-scrollbar-thumb:hover {
  background-color: #2d81c7;
}

*::-webkit-scrollbar-thumb:active {
  background-color: #2d81c7;
}

/* geral*/

:root {
  --color1: #3f264d;
  --color2: #5d2747;
  --color3: #9f3647;
  --color4: #db4648;
  --color5: #fb9553;
  --menu: #5d2747;
}

html {
  scroll-behavior: smooth;
}

body {
  background: #ccccd8;
  overflow-x: hidden;
  height: 6000px;
}

section {
  scroll-margin-top: 60px;
}

a {
  color: #fff;
  cursor: pointer;
  text-decoration: none;
}

p {
  color: #000;
}

/* header */

.nav-bar {
	background: #3f3f3f;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  height: 60px;

  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 0;

  position: fixed;
  width: 100%;
  left: 0;
  top: 0;
  z-index: 1;
}

/* logo */

@font-face {
  font-family: menuFont;
  src: url('/assets/font/SUSE/static/SUSE-Regular.ttf');
}

@font-face {
  font-family: logoFont;
  src: url('/assets/font/SUSE/SUSE-VariableFont_wght.ttf');
}

.logo h1{
  letter-spacing: 2px;
  font-size: 17px;
  font-weight: 300;
  font-family: logoFont;
}

.logo span {
  font-size: 22px;
}

/* conteudo do menu */

.nav-list, .nav-item {
	padding: 0;
	list-style: none
}

.nav-list {
  height: 60px;
  font-size: 20px;

  display: flex;
  align-items: center;
  justify-content: space-around;
}

.nav-item {
	display: inline-block;
	position: relative;

  height: 100%;
  width: 100px;
  display: grid;
  place-items: center;
  transition: .2s linear;
}

.nav-item:hover {
  background: #525252;
}

.nav-link {
	display: block;
	line-height: 45px;
	padding: 0 14px;
	text-decoration: none;
	color: #FFFFFF;
	font-size: 20px;
}

.dropdown-arrow:after {
	content: "\25BE";
	margin-left: 5px;
}

.nav-bar input {
	display: none;
	margin: 0;
	padding: 0;
	height: 45px;
	width: 100%;
	opacity: 0;
	cursor: pointer
}

.nav-bar label {
	display: none;
	line-height: 57px;
	text-align: center;
	position: absolute;
	left: 35px
}

.nav-bar label:before {
	font-size: 30px;
	color: #FFFFFF;
	content: "\2261"; 
	margin-left: 20px;
}

.sub-menu {
	height: auto;
	overflow: hidden;
  border-top: none;
	width: 170px;
	background: #444444;
	position: absolute;
	z-index: 1;
	display: none;
  top: 60px;
  left: 0px;
  border-radius: 0 0 10px 10px;
  border-bottom: 1px solid #363333;
}

.nav-item-drop {
	display: block;
	text-align: left;
	width: 100%;
  padding: 10px 8px 15px 20px;
  cursor: pointer;
}

.nav-link-drop {
	color: #FFFFFF;
	font-size: 18px;
}

.nav-item:hover .sub-menu {
	display: block
}

.nav-link-drop:hover{
	color: #fff;
}

.nav-item-drop:hover {
  background: #525252;
}

@media screen and (max-width: 800px){
	.nav-bar {
    position:fixed;
  }
	.nav-list {
    background:#444444;
    position:absolute;
    top:100%;
    right:0;
    left:0;
    z-index:1;
    height:auto;
    display:none;
    text-align:left;
  }
	.sub-menu {
    width:100%;
    position:static;
  }
  #nav-link-drop {
    padding: 0 14px;
  }
	.nav-link-drop {
    padding-left:30px;
  }
	.nav-item {
    display:block;
    float:none;
    width:auto;
  }
	.nav-bar input, .nav-bar label {
    position:absolute;
    top:0;
    left:0;
    display:block
  }
	.nav-bar input {
    z-index:4
  }
	.nav-bar input:checked + label {
    color:#FFFFFF
  }
	.nav-bar input:checked + label:before {
    content:"\00d7"
  }
	.nav-bar input:checked ~ ul {
    display:block
  }
}

.contacts {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;

  position: fixed;
  z-index: 1;
  left: 0;
  top: 25%;
}

.social-link {
  height: 50px;
  width: 50px;
  border-radius: 0px 10px 10px 0;
  padding: 8px;
  color: #fff;

  display: grid;
  place-items: center;
  transition: .2s linear;
}

.social-link:hover {
  width: 80px;
}

#facebook {
  background: #4267b3;
  font-size: 22px;
}

#instagram {
  background: linear-gradient(to left top, #7f37c9, #ff2992, #ff9807);
  font-size: 22px;
}

#whatsapp {
  background: #78cf46;
  font-size: 22px;
}

#linkedin {
  background: #0e76a8;
  font-size: 22px;
}

/* hero */

.hero {
  width: 100%;
  height: 90vh;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;

  background: url('https://a.storyblok.com/f/178900/1920x1023/2435d44804/demon-slayer_-kimetsu-no-yaiba-to-the-hashira-training.png') center no-repeat;
  background-attachment: fixed;
  background-size: cover;
}

.hero::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: #3d3d3d70;
}
   
/* about */
#about {
  background: #ececec;
  padding: 60px;
  width: 100%;
  height: 700px;

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

.container-about {
  display: grid;
  place-items: center;

  padding: 20px;
}

.topo-about {
  display: flex;
  align-items: center;
  gap: 90px;
}

.img-about {
  width: 700px;
  border-radius: 5px;
}

.tittle-about {
  font-size: 32px;
  margin: 8px;
}

.text-about {
  text-align: left;
  font-size: 18px;
  height: 100;

  color: #000;
}

/* onis */

#onis {
  width: 100%;
}

.container-onis {
  background: #e6e6e6;
  width: 100%;
  height: 950px;
  padding: 20px;
}

.arg-onis {
  background: #e6e6e6;
}

.arg-onis .tittle-section {
  font-size: 32px;
  text-align: center;
  margin: 20px;
}

.arg-onis .text-section {
  text-align: justify;
  text-align: center;
  text-indent: 20px;
  font-size: 22px;
  margin: 20px;
  color: #000000;
}

.grid {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;

  gap: 120px;
}

.card {
  width: 491px;
  height: 310px;
}

.oni-img {
  width: 100%;
  height: 100%;
  margin: 0;
  border-radius: 35px;
  border: 1px solid #000;
  box-shadow: 0 24px 32px #0000003d;
  transition: transform 0.5s ease;
}

.oni-img:hover {
  transform: scale(1.03);
}

figcaption {
  text-align: center;
  margin-top: 8px;
}

.card div {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  height: 50%;
}

.card h1 {
  padding: 32px 32px 0 32px;
  font-size: 20px;
  font-family: 'Nunito';
  font-weight: 700;
  text-align: left;
}

.card p {
  display: block;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  unicode-bidi: isolate;
  margin: 16px;
  color: #7f7f7f;
  text-align: left;
  font-size: 16px;
}

.card button {
  background-color: #2192FF;
  height: 30px;
  border: none;
  padding: 4px;
  width: 100px;
  color: #fff;
  font-size: 1rem;
  font-family: 'Nunito';
  font-weight: bold;
  border-radius: 4px;
}

.more {
  color: #fff;
  font-family: 'Nunito';
}

.card button:hover {
  background-color: #137de8;
  cursor: pointer;
}

/* Parallax */

#parallax {
  width: 100%;
  height: 800px;

  background: url('') center no-repeat;
  background-attachment: fixed;
}