@tailwind base;
@tailwind components;
@tailwind utilities;

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

:root {
--white-color:#ffffff;
--secondary-color:#c48506;
}

body {
font-family:Arial, Helvetica, sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
margin:0.5rem 0 !important;
font-weight:bold !important;
}

p {
margin-bottom:1rem !important;
}

img {
width:100%;
}

.container-md {
margin:0 auto;
max-width:1024px;
}

.container-lg {
margin:0 auto;
max-width:1440px;
}

.bg-primary {
background-color:#fca901;
}

.text-primary {
color:#fca901;
}

.bg-secondary {
background-color:#c48506;
}

.text-secondary {
color:#c48506;
}

/* starts navbar */
.logo {max-width:250px;margin-right:10px}
.navbar-item {
color:#fca901;
}

.navbar-item:hover {
color:#ffffff;
background-color:#fca901;
}

.navbar {
background-color:transparent;
}

.navbar-container {
display:flex;
align-items:center;
justify-content:space-between;
}

.navbar-items {
display:flex;
}

.right-items {display:flex;align-items:center;justify-content:center;top:15px;position:relative}
.text-2xl{top:12px;position:relative}

.right-items .menu {
padding:1rem;
font-size:1.2rem;
cursor:pointer;
}

li {position:relative}

.navbar-items li a {display:block;padding:10px;border-radius:5px;transition:200ms all ease-in-out}

.navbar-items li a:hover {
color:var(--white-color);
}

.navbar-items li > ul {
padding:1rem;
position:absolute;
top:100%;
left:0;
min-width:260px;
background-color:var(--white-color);
display:none;
box-shadow:0 0 20px #cccccc;
z-index:100;
}

.navbar-items li:hover > ul {
display:block;
}

.navbar-items li ul a {
padding:1rem;
border-radius:5px;
}

.navbar-items li > ul li ul {
left:100%;
top:0;
}

@media screen and (max-width:900px) {
.right-items {display:block;position:fixed;top:200px;right:0;width:100%;height:auto;background-color:var(--white-color);z-index:100;transform:translateX(100%);transition:all ease-in-out 200ms;padding:1rem;box-shadow:0 0 10px #ccc}
.right-items ul {
flex-direction:column;
}
.right-items ul li ul li ul {
left:0;
}
}

/* ends navbar */

.header-section {
margin-bottom:2rem;
}

.header-slogan {
padding:0.5rem 1rem;
font-style:italic;
letter-spacing:1px;
font-weight:bold;
color:var(--white-color);
}

/* starts slider */

.slider-container {
width:100%;
}

.slider {
display:flex;
transition:transform 0.5s ease-in-out;
}

.slide {
flex:0 0 100%;
min-width:100%;
height:100%;
display:flex;
justify-content:center;
align-items:center;
}

/* ends slider */

/* starts accordion */

.accordion {
display:flex;
flex-direction:column;
}

.section {
border:1px solid #ddd;
margin-bottom:5px;
}

.section-header {
cursor:pointer;
display:flex;
justify-content:space-between;
align-items:center;
background-color:#fca901;
padding:10px;
color:#ffffff;
}

.section-content {
display:none;
padding:0 10px;
}

.section.active .section-content {
display:block;
}

/* ends accordion */

/* stats footer */

.white-black {
-webkit-filter:grayscale(100%) !important;
filter:grayscale(100%) !important;
}

/* ends footer */