#landing-section {
  background-image: url('comet-banner-final.png'); /*change this to my BH design on canva*/
  background-size: cover;
  background-position: center;
  height: 60vh;
  color: white;
  font-family: 'Domine', serif;
  font-family: 'Poppins', sans-serif;
  margin-bottom:50px;
}
#landing-section-quiz {
  background-image: url('dream-img.jpg'); /*change this to my BH design on canva*/
  background-size: cover;
  background-position: center;
  height: 60vh;
  font-family: 'Domine', serif;
  font-family: 'Poppins', sans-serif;
  margin-bottom:50px;
}

#landing-column {
  padding: 0;
}
/* styles.css */
footer {
  margin-top:30px;
  background-color: #333;
  color: white;
}

/* HOMEPAGE*/
body{
  margin-right:25px;
  margin-left:25px;
}

#home-intro {
  margin-top:15px;
  margin-bottom:50px;
  margin-left:50px;
  margin-right:50px;
  text-align: center;
}
/* MARKETING CONTENT from bootstrap sight
-------------------------------------------------- */

/* Center align the text within the three columns below the carousel */

.marketing .col-lg-4 {
  margin-bottom: 1.5rem;
  text-align: center;
}
.marketing .col-lg-4 p {
  margin-right: .75rem;
  margin-left: .75rem;
}


/* Featurettes
------------------------- */

.featurette-divider {
  margin: 5rem 0; /* Space out the Bootstrap <hr> more */
}

/* Thin out the marketing headings */

/* RESPONSIVE CSS
-------------------------------------------------- */

@media (min-width: 40em) {
  /* Bump up size of carousel content */
  .carousel-caption p {
    margin-bottom: 1.25rem;
    font-size: 1.25rem;
    line-height: 1.4;
  }

  .featurette-heading {
    font-size: 50px;
  }
}

@media (min-width: 62em) {
  .featurette-heading {
    margin-top: 7rem;
  }
}
/*END HOMEPAGE*/



/* QUIZ PAGE*/

.bordered-container {
  margin-top: 40px;
  background-color: whitesmoke ;
  border: 2px solid  rgb(223, 223, 223); /* Set the border color and thickness */
  border-radius: 20px; /* Set the border radius for rounded edges */
  padding: 20px; /* Add some padding inside the container */
  padding-bottom: 50px;
  margin-right:40px;
  margin-left:40px;
}
#quiz-intro-text{
  margin-bottom:50px;
}
#form-radio{
  margin-top:70px;
  margin-bottom:20px;
}

#radio-intro{
  margin-top:40px;
  margin-bottom:50px;
}
#q1{
  margin-top:10px;
  margin-bottom:40px;
}
#q1 label {
  display: block;
  margin-bottom: 10px; /* Adjust the margin as needed for spacing between options */
}
#q2{
  margin-top:10px;
  margin-bottom:40px;
}
#q2 label {
  display: block;
  margin-bottom: 10px; /* Adjust the margin as needed for spacing between options */
}
#q3{
  margin-top:10px;
  margin-bottom:40px;
}
#q3 label {
  display: block;
  margin-bottom: 10px; /* Adjust the margin as needed for spacing between options */
}

#q4{
  margin-top:10px;
  margin-bottom:40px;
}
#q4 label {
  display: block;
  margin-bottom: 10px; /* Adjust the margin as needed for spacing between options */
}
#q5{
  margin-top:10px;
  margin-bottom:40px;
}
#q5 label {
  display: block;
  margin-bottom: 10px; /* Adjust the margin as needed for spacing between options */
}
#salary-intro{
  margin-top:100px;
  margin-bottom:15px;
}
.form-salary-range{
  margin-top:30px;
  margin-bottom:40px;

}

.result{
  margin-top:30px;
  margin-bottom:15px;
}
/*END QUIZ PAGE*/


/* APP
#app-intro-text{
   
}
*/
#app-intro-text{
  margin-top:70px;
  margin-bottom:80px;
}
#calc-output{
  margin-bottom:50px;
}
label {
    display: inline-block;
    width: 223px;
} 
    
.calc input  {
    width: 40px; 
    text-align: right;
    margin-left:30px;
}
/* Add custom styles for spacing between labels and input boxes */
.form label {
    margin-bottom: 5px; /* Adjust the margin as needed for your design */
  }
  
.form input {
    margin-bottom: 10px; /* Adjust the margin as needed for your design */
  }
  
  /* Additional styling for better visibility (optional) */
.form {
    max-width: 700px; /* Adjust the maximum width of the form */
    margin: auto; /* Center the form on the page */
  }
  
  /* Optional: Add some padding to the form for better visual appeal */
.form {
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    margin-bottom:40px;
}
  
  /* Optional: Style the submit button */
.form button {
    margin-top: 15px; /* Adjust the margin as needed for your design */
  }

#calc-output{
    margin-top:40px;
    margin-bottom:40px;
    text-align: left;
}

.form-2 label {
  margin-bottom: 5px; /* Adjust the margin as needed for your design */
}

.form-2 input {
  margin-bottom: 10px; /* Adjust the margin as needed for your design */
}

/* Additional styling for better visibility (optional) */
.form-2 {
  max-width: 700px; /* Adjust the maximum width of the form */
  margin: auto; /* Center the form on the page */
  margin-bottom:40px;
}

/* Optional: Add some padding to the form for better visual appeal */
.form-2 {
  padding: 20px;
  border: 1px solid #ccc;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

/* Optional: Style the submit button */
.form-2 button {
  margin-top: 30px; /* Adjust the margin as needed for your design */
}
#income-answer{
  margin-top:10px;
  margin-bottom:20px;
}
#total-calc{
  margin-top:10px;
  margin-bottom:20px;
}
#month{
  margin-top:10px;
  margin-bottom:20px;
}
#semester{
  margin-top:10px;
  margin-bottom:20px;
}
#yearly{
  margin-top:10px;
  margin-bottom:20px;
}
/* END APP*/

/* DATA PAGE*/
#data-intro-text{
  margin-top:70px;
  margin-bottom:80px;
}
/*theres an image of students studying*/
#dropdown{
  margin-top:10px;
  margin-bottom:30px;
}
#study-img img{
  width:500px;
  height:300px;
  margin-top:30px;
  margin-bottom:50px;
}
.center{
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}


#data-intro-2{
margin-bottom:80px;
}
.data-geo-text-1{
  margin-top:30px;
  margin-bottom:30px;
}

#div_chart{
  margin-top:30px;
  margin-bottom:30px;
}

#major-resources{
  margin-bottom:30px;
}
#data-geo-text-1{
  margin-top:80px;
  margin-bottom:30px;
}
#thedropdown{
  margin-top:50px;
  margin-bottom:50px;
}


#geochart{
  margin-top:50px;
  margin-bottom:50px;
}
#data-geo-text-2{
  margin-top:30px;
  margin-bottom:30px;
}


/* END DATA PAGE*/