*{
    padding:0;
    margin:0;
    box-sizing:border-box;
    font-family: "Poppins", serif;
}
body {
    background-color:#000;
    color:white;
}

header {
    width:100%;
    height:100vh;
    color:white;
    background-image:linear-gradient(rgba(0,0,0,0.7), rgba(0,0,0,0.7)), url("images/header-image.png");
    background-size:cover;
    background-repeat:no-repeat;
    background-position:center;
    position: relative;
}
.nav-container {
    opacity:1;
    max-width:1300px;
    margin:0 auto;
    padding:1.5rem;
    display:flex;
    justify-content: space-between;
    align-items: center;
}
.logo img {
    height:2.5rem;
}
.nav-item {
    display:flex;
    gap:0.5rem;
}
.nav-item button {
    background-color:rgba(255,0,0,1);
    color:white;
    padding:0.4rem 1rem;
    font-weight:600;
    border:transparent;
    border-radius:5px;
    transition:all 0.2s ease-in-out 0.1s;
}
.nav-item select {
    background:transparent;
    color:white;
    border-radius:5px;
    padding:0.3rem 1rem;
    font-weight:600;

}
.nav-item select option {
    color:#000;
}
.nav-item button:hover {
    background-color:rgba(255,0,0,0.7);
}

.header-content {
    width:100%;
    display:flex;
    flex-direction: column;
    align-items:center;
    margin:10rem auto;
    text-align: center;
    gap:1rem;
}
.header-content h1 {
    font-size:3.5rem;
}
.header-content p {
    font-weight:bold;
    font-size:1rem;
}
.header-content h3 {
    font-weight:normal;
    font-size:0.95rem;
    margin-top:0.8rem;
} 
.input-container input {
    background-color:rgba(0,0,0,0.6);
    padding:1rem;
    border-radius:5px;
    width:350px;
    font-weight:bold;
    border:1px solid grey;
    color:#fff;
}
.input-container input:focus {
    outline:2px solid white;
}
.input-container input::placeholder {
    color: grey;
}
.input-container form {
    display:flex;
    align-items:center;
}
.input-container form button {
    margin-left:10px;
    padding:0.7rem 1.2rem;
    background-color:red;
    color:#fff;
    border:none;
    font-weight:600;
    font-size:1.3rem;
    border-radius:5px;
    cursor: pointer;
    transition:all 0.2s ease-in;
    
}
.input-container form button:hover {
    background-color:rgba(255, 0, 0,0.7);
}
.input-container form button i {
    margin-left:10px;
}

.divider {
    height:130px;
    transform:translateY(-95px);
    /* border-bottom:1px solid red; */
    background-image:url("images/divider-ai.png");
    background-position:center top;
}
.trending {
    transform:translateY(-80px);
    /* border:2px solid yellow; */
}
.trending h1{
    margin-left:7rem;
    margin-bottom:2rem;
    font-size:1.5rem;
}
.trend-img {
    max-width:1300px;
    margin:0 auto;
    display:flex;
    flex-wrap:wrap;
    /* justify-content:space-between; */
    gap:30px;
    align-items: center;
}
.trend-img span {
    border-color:gray;
    background-color:#ffffff1a;
    height:95px;
    border-radius:5px;
    padding:0 6px;
    color:white;
    padding-top:35px;
    transition:all 0.1s ease-in-out;
}
.trend-img span:hover {
    background-color:#ffffff39;
}

.trend-img img {
    transition:all 0.2s ease-in-out;
}
.trend-img img:hover {
    transform:scale(1.1);
}

/* .cards {
    max-width:1300px;
    margin:0 auto;
}
.cards h2 {
    margin-bottom:1rem;
}
.card-items {
    display:flex;
    justify-content:space-between;
    
}
.card {
    border:1px solid red;
    height:290px;
    width:300px;
    padding:1rem;
} */


.questions {
    max-width:1300px;
    margin:0 auto;
    background-color:black;
    margin-bottom:5rem;
}
.questions >h2 {
    color:white;
    margin-bottom:1rem;
    font-size:1.5rem;
}

.accordion-item {
    background-color: #343434;
    border: none;/* Remove border if needed */
    margin-bottom: 0.5rem;
}

.accordion-header {
    background-color:#343434;
}

.accordion-button {
    background-color: 	#343434;
    color: white; /* Change text color to white for better contrast */
    border: none; /* Remove border if needed */
    transition:all 0.1s ease-in-out ;
    font-size:1.5rem;
    padding-top:30px;
    padding-bottom:30px;
}
.accordion-button:hover {
    background-color:#ffffff4a;
}

.accordion-button:not(.collapsed) {
    background-color: #343434;
    color: white; /* Change text color to white for better contrast */
}

.accordion-button::after {
    filter: invert(1); /* This will change the arrow color to white */
}

.accordion-button:not(.collapsed)::after {
    filter: invert(1); /* Ensure the arrow remains white when expanded */
}

.accordion-body {
    background-color: #343434;
    color: white; /* Change text color to white for better contrast */
}
.accordion-button:focus {
    box-shadow: none; /* Remove the blue outline */
    outline: none; /* Remove the outline */
}


footer {
    max-width:1300px;
    margin:0 auto;
    text-align:center;
}
.foot-content {
    margin-bottom:4rem;
}
.foot-content form {
    display:flex;
    justify-content: center;
}
.foot-content form input {
    width:600px;
}


.foot-info {
    text-align: start;
    color:grey;
    font-weight:600;
    margin-bottom:4rem;
}
.foot-info p {
    margin-bottom:3rem;
}
.info {
    display:flex;
    flex-direction: column;
}
.info a {
    color:grey;
    line-height:2rem;
    font-weight:500;
}
.info-content {
    display:flex;
    justify-content: start;
    gap:10rem;
    flex-wrap:wrap;
}
#country {
    text-align: start;
    color:grey;
    font-weight:500;
    margin-top:3rem;
    margin-bottom:4rem;
}

@media (max-width:820px) {
    .foot-content form input {
        width:300px;
    }
    .input-container form button i {
        display:none;
    }
}

@media (max-width:560px){
    .input-container form {
        flex-direction: column;
        gap:1.5rem;
        align-items: center;
        
    }
}