body{
background-size: cover;
    background-position: 50%;
    height: 100vh;
    width: 100%;
}

/* navbar */
  
nav img{
    width: 13%;
}

body{
    font-family: 'Bebas Neue', sans-serif;
}

header{
    background-image: linear-gradient(rgba(0,0,0,.7),rgba(0,0,0,.6)), url(./images/header-image.png);
}
.red-btn{
    background: rgb(229, 9, 20);
    color: #fff;
    border: 0;
    border-radius: 0.25rem;
    padding: 5px 17px;
}

.red-btn:hover{
    background: rgb(193, 17, 25);
}

.hero {
    padding-top: 200px; 
   
  }
  

.hero-title{
    
    font-size: 50px;
    line-height: 70px;
    font-weight: 700;
    max-width: 650px;
}

.hero-first-p{
    font-size: 1.5rem;
    font-weight: 400;
    
}

.hero-second-p{
    
    font-weight: 500;
    margin-bottom: 0px;
}

form{
    width: 50%;
    padding: 100;
}

form #floatingInput{
    color: #fff;
}

form .form-control:focus{
    border-color: #fff;
    box-shadow: none;
    border-width: medium;
}

form .form-floating>.form-control:focus~label{
    color: rgba(255, 255, 255, 0.7);
}

form .form-floating>.form-control:focus~label::after{
    background-color: transparent;

}

form .form-floating{
    width: 40%;
}

form #floatingInput{
    background: transparent;
}

form label{
    color: rgba(255, 255, 255, 0.7);
    margin-left: 10px;
}

form .form-floating > label {
    color: #fff; 
    margin-left: 0; 
}

.get-started-btn{
    height: 50px; 
    font-size: 1.25rem;
    padding-right: 25px;
    padding-left: 25px;
}

/* features */
.features{
    color: white;
    padding: 50px 12%;
    font-size: 22px;
    background: radial-gradient(51.39% 511.66% at 47.68% -217.91%, #ff9900 0%, #e50914 17.27%, #0e1b4f 79.44%, #000413 100%);
    box-shadow: 0px -8px 25px rgba(0,0,0,0.5);
    
}

.row{
    display: flex;
    width: 100%;
    align-items: center;
    flex-wrap: wrap;
    padding: 50px 0;

}
.text-col{
    flex-basis: 50%;
    margin-bottom: 20px;
}
.img-col{
    flex-basis: 50%;
    margin-bottom: 20px;
    
}
.img-col img{
    display: block;
    width: 70%;
    margin: auto;
}
.features h2{
    font-size: 40px;
    font-weight: 600;
    margin-bottom: 20px;
}

.features h2, .features p {
    color: white;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
  }
  
  .img-col img {
    width: 90%;
    max-width: 500px;
}


  /*--------------FAQ SECTION-----------------*/

.faq-section h3{
    font-size: 1.1rem;
    font-weight: 400;
    line-height: 1.875rem;
}

.faq-section button{
        color: #fff;
        font-size: 24px;
        font-weight: 400;
}

.faq-section .accordion{
 --bs-accordion-color: rgb(255, 255, 255);
 --bs-accordion-bg: rgb(45, 45, 45);
 --bs-accordion-border-color: transparent;
 --bs-accordion-border-radius: 0;
}
  

.faq-section .accordion-item:first-of-type .accordion-button{
 border-top-left-radius: 0;
 border-top-right-radius: 0;
}

.faq-section .accordion-button:focus{
 border: none;
 box-shadow: none;
}

.faq-section .accordion-button:hover{
 background-color: rgb(65, 65, 65);
}

.faq-section .accordion-button:not(.collapsed) {
 background-color: rgb(65, 65, 65);
 color: rgb(255, 255, 255,);
}

.faq-section .accordion-button:after{
 content: "+";
 background-image: none;
 position: absolute;
 height: 30px;
 font-size: 50px;
 top: 5px;
 right: 45px;
}

.faq-section .accordion-button:not(.collapsed)::after {
 background-image: none;
 transform: none;
 content: "\00d7";
}


/* FOOTER */

footer{
    border-top: 5px solid #232323;
}
footer p,
footer a{
    color: rgb(255, 255, 255, 0.7);
    font-size: 0.875rem;
    font-weight: 400;
}

footer ul{
    padding-left: 0%;
}

footer li{
    list-style-type: none;
}
footer select{
    background: transparent;
    color: #fff;
    padding-left: 40px;
    padding-right: 40px;
    appearance: none;
    border-radius: 5px;
}

footer img{
    filter: invert();
    top: 8px;
    left: 12px;
}

footer .arrow-down{
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #fff;
    top: 15px;
    right: -115px;
}