/*font/margin/padding for entire website */
* {
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
}
@import url("https://fonts.googleapis.com/css?family=DM+Sans:400,500|Jost:400,500,600&display=swap");
* {
  box-sizing: border-box;
}

@import url("https://fonts.googleapis.com/css?family=DM+Sans:400,500|Jost:400,500,600&display=swap");
* {
  box-sizing: border-box;
}

body{
    animation: transitionIn 0.5s;
    background: var(--primary-color);
}

/*For nav bar */
@keyframes transitionIn{
    from{
        opacity: 0;
        transform: translatey(100px);
    }
    to{
        opacity: 1;
        transform: translatey(0px);
    }
}

/*front page css */
.header {
    min-height: 100vh;
    width:100%;
    background-image: url(../img/AdobeStock_127854858.jpeg);
    background-position: center;
    background-size: cover;
    position: relative;
}

/*nav bar css*/
nav {
    display: flex;
    padding: 0% 5%;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    width: 100%;
    z-index: 9999;
    
}
nav img {
    width: 75px;
}

#logo-text{
    padding-top: 15px;
    width: 230px;
}
.nav-links {
    flex: 1;
    text-align:right;
    padding-right: 30px;
}
.nav-links ul li {
    list-style: none;
    display: inline-block;
    padding: 13px 2%;
    position: relative;
    
}
.nav-links ul li a, .nav-links ul li p {
    color: var(--tertiary-color);
    text-decoration: none;
    font-size: 13px;
    overflow: none;
}
#line::after {
    content:'';
    width: 0%;
    height:2px;
    background: var(--secondary-color);
    display:block;
    margin: auto;
    transition: 0.5s;
}
#line:hover::after {
    width: 100%;
}


/* Mars mode color change */
:root {
    --primary-color: rgb(10, 10, 10);
    --secondary-color: white;
    --tertiary-color: white;
    --quartery-color: #ff5500;
    --quintary-color:#ccc5b9;
}
.dark-theme{
    --primary-color: rgb(20, 19, 19);
    --secondary-color: darkorange;
    --tertiary-color: darkorange;
    --quartery-color: white;
    --quintary-color: black;
}

.scrolling-active2{
    visibility: hidden;
    transition: 1.5s;
}

/*Bobbing arrow animation */
.arrow{
    position: absolute;
    top: 93%;
    left: 50%;
    transform: translate(-50%,-50%);
}
.arrow span{
    display: block;
    width: 15px;
    height: 15px;
    border-bottom: 5px solid var(--tertiary-color);
    border-right: 5px solid var(--tertiary-color);
    transform: rotate(45deg);
    margin: -10px;
    animation: animate 4s infinite;
}
.arrow span:nth-child(2){
    animation-delay: -0.4s;
}
.arrow span:nth-child(3){
    animation-delay: -0.8s;
}
/*key frames for arrow animation */
@keyframes animate {
    0%{
        opacity: 0;
        transform: rotate(45deg) translate(-20px,-20px);
    }
    50%{
        opacity: 1;
    }
    100%{
        opacity: 0;
        transform: rotate(45deg) translate(20px,20px);
    }
} 
#banner {
    position: absolute;
    width: 100%;
    height: 100%;
    right: 0.05%;
    bottom: 92vh;
    z-index: 0;

}
  #canvas {
    position: absolute;
    top: 90%;
    left: 0;
    height: 100%;
    width: 100%;
    z-index: 0;
} 

/*Additional styling for the nav bar when scrolling*/
.scrolling-active{
    background-image: linear-gradient(to right, black , rgb(85, 85, 85));;
    box-shadow: 0 3px 1rem rgba(0,0,0,.1);
    z-index: 1;
    transition-property: background-color;
    transition-duration: .25s;
}
/*Additional styling for the nav bar text color when scrolling*/
.scrolling-active ul li a{
    color: var(--secondary-color); 
}

.scrolling-active ul li p{
    color: var(--secondary-color); 
}

.scrolling-active button{
    color: var(--secondary-color); 
}

.scrolling-active #logo-text{
  width: 150px; 
  transition: 0.5s;
}

/* Front Page Title */
.text-box {
    width: 90%;
    color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    text-align: center;
}
.text-box h1 {
    font-size: 69px;
    color: white;
}
.text-box p {
    margin: 10px 0 40px;
    font-size: 19px;
    color: white;
}
.hero-btn {
    display: inline-block;
    text-decoration: none;
    color: white;
    border: 1px solid white;
    padding: 12px 34px;
    font-size: 18px;
    background: transparent;
    position: relative;
    cursor: pointer;
}
.hero-btn:hover {
    border: 1px solid #f44336;
    background: #f44336;
    transition: 0.5s;
}

nav .fa {
    display: none;
}

/* course info */
.course {
    width: 80%;
    margin: auto;
    text-align: center;
    padding-top: 100px;
}
h1 {
    font-size: 36px;
    font-weight: 600;
}
p {
    color: var(--secondary-color);
    font-size: 14px;
    font-weight: 300;
    line-height: 22px;
    padding: 10px;
}

.row {
    margin-top: 5%;
    display: flex;
    justify-content: space-between;
    background: var(--primary-color);

}
.course-col {
    flex-basis: 31%;
    background: var(--primary-color);
    border-radius: 10px;
    margin-bottom: 5%;
    padding: 20px 12px;
    box-sizing: border-box;
    transition: 0.4s;
}
h3 {
    text-align: center;
    font-weight: 600;
    margin: 10px 0;
}
.course-col:hover {
    box-shadow: 0 0 20px 0px rgba(0,0,0,0.2);
}

.sched {
  text-align: center;
  padding-top: 5%;
}

/*Hot destination css */
.destination{
    width: 80%;
    margin: auto;
    text-align: center;
    padding-top: 65px;
    background: var(--primary-color)
}
.destination h1 {
    color: var(--secondary-color);
}
.destination-col{
    flex-basis: 32%;
    border-radius: 10px;
    margin-bottom: 30px;
    position: relative;
    overflow: hidden;
}
.destination-col img {
    width: 100%;
    display: block;
}
.layer{
    background: transparent;
    height:100%;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    transition: 0.5s;
}
.layer:hover {
    background:rgba(238, 89, 3, 0.7);
}
.layer h3 {
    width: 100%;
    font-weight: 500;
    color: var(--primary-color);
    font-size: 26px;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) translateY(43%);

    position: absolute;
    opacity: 0;
    transition: 0.5s;
    text-align: center;
}
.layer:hover h3 {
    bottom: 49%;
    opacity: 1;
}

/* Main page image links to other pages */
.linker {
    width:80%;
    margin: auto;
    text-align: center;
    padding-top: 100px;
    background: var(--primary-color);
}
.linker h1 {
    color: var(--secondary-color);
}
.linker h3 {
    color: var(--secondary-color);
}
.linker-col{
    flex-basis: 31%;
    border-radius: 10px;
    margin-bottom: 5%;
    text-align: left;
    cursor: pointer;
}
.linker-col img{
    width: 100%;
    border-radius: 10px;
}
.linker-col p {
    padding: 0;
}
.linker-col h3{
    margin-top: 16px;
    margin-bottom: 15px;
    text-align: left;
}
.linker-col img:hover {
    box-shadow: 0 0 20px 0px rgba(255,255,255,0.7);
}

/* Citizens' reviews of our planet and services.*/
.testimonials {
    width: 80%;
    margin: auto;
    padding-top: 100px;
    text-align: center;
    background: var(--primary-color);
    
    
}
.testimonials h1 {
    color: var(--secondary-color);
}
.testimonials h3 {
    color: var(--secondary-color);
}
.testimonial-col{
    flex-basis: 44%;
    border-radius: 30px;
    margin-bottom: 5%;
    text-align: left;
    background: rgba(255, 255, 255, 0.15);
    padding: 25px;
    cursor: pointer;
    display: flex;

}
.testimonial-col .pfp {
    height: 60px;
    margin-left: 5px;
    margin-right: 30px;
    border-radius: 50%;
    border: white;

}
.testimonial-col p {
    padding: 0;
}
.testimonial-col h3{
    margin-top: 15px;
    text-align: left;
}
.testimonials #stars {
    height: 25px;
}

.vl {
    border-left: 6px solid #ff5500;
    height: 205px;
  }

  /* Button link for travel packages */
.cta{
    margin: 100px auto;
    width: 80%;
    background-image: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)), url(../img/AdobeStock_463966002.jpeg);
    background-position: center;
    background-size: cover;
    border-radius: 10px;
    text-align: center;
    padding: 100px 0;
    background-color: var(--primary-color);
}
.cta h1{
    color: white;
    margin-bottom: 40px;
    padding: 0;
}

/*Contact us footer */
.footer {
    width: 100%;
    text-align: center;
    padding: 30px 0;
    background-color: transparent;
}
.footer h4 {
    margin-bottom: 15px;
    margin-top: 20px;
    font-weight: 600;
    color: var(--secondary-color);
}
.icons {
    display: flex;
    align-items: center;
    padding-top: 5px;
    padding-bottom: 5px;
    margin-left: 45%;
    margin-bottom: 10px;
}
.icons a {
    color: var(--secondary-color);
}
.gg-facebook:link, .gg-instagram:link, .gg-google:link, .gg-twitter:link {
    color:var(--secondary-color);
}
.gg-facebook:hover, .gg-instagram:hover, .gg-twitter:hover, .gg-google:hover {
    color:var(--quartery-color);
}

/* travel packages */
.source-header {
    background-image: linear-gradient(rgba(0,0,0,0.2),rgba(0,0,0,0)),url(../img/sourcesBG.jpg);
    height: 100vh;
    width:100%;
    background-position: center;
    background-size: cover;
    position: relative;
    background-repeat: no-repeat;
}
.sources{
  background-image: linear-gradient(rgba(0,0,0,0.85),rgba(0,0,0,0.6)),url("https://images2.alphacoders.com/841/841233.jpg");
  width:100%;
  background-position: center;
  background-size: cover;
  position: relative;
  background-repeat: no-repeat;
  height: 100%;
  color: var(--secondary-color);
}
.research_sources{
    width: 100%;
    padding-top: 7%;
    padding-left: 15%;
    padding-right: 15%;
    font-weight: 600;
    justify-content: center;
    color: var(--secondary-color);
}
.research_sources h2{
  text-align: left;
  padding-left: 1%;
  color: white;
  font-size: 30px;
  color: var(--secondary-color);
}

.research_sources p{
  padding-right: 2%;
  color: white;
  font-size: 15px;
  color: var(--secondary-color);
}
.media_sources{
  width: 100%;
  padding-top: 2%;
  padding-left: 15%;
  padding-right: 15%;
  font-weight: 600;
  justify-content: center;
  color: var(--secondary-color);
}
.media_sources h2{
text-align: left;
padding-left: 1%;
color: white;
font-size: 30px;
color: var(--secondary-color);
}

.media_sources p{
padding-right: 2%;
color: white;
font-size: 15 px;
color: var(--secondary-color);
}
.frameworks{
  width: 100%;
  padding-top: 2%;
  padding-left: 15%;
  padding-right: 15%;
  font-weight: 600;
  justify-content: center;
  color: white;
}
.frameworks h2{
text-align: left;
/* padding-left: 1%; */
color: white;
font-size: 30px;
color: var(--secondary-color); 
}
.frameworks p{
/* padding-right: 2%; */
color: white;
font-size: 15px;
color: var(--secondary-color);
}

/*Geography page */
.geo-header {
    background-image: linear-gradient(rgba(0,0,0,0.3),rgba(0,0,0,0.8)),url(../img/cc_mars-keyart-horizontal_16x9.jpg);
    height: 100vh;
    width:100%;
    background-position: center;
    background-size: cover;
    position: relative;
}

.event-header {
  background-image: linear-gradient(rgba(0,0,0,0.0),rgba(0,0,0,0.7)),url(../img/eventInfoBG.jpg);
  height: 100vh;
  width:100%;
  background-position: 0.25rem;
  background-size: cover;
  position: relative;
}

/* Territories section */
.settle {
    width: 80%;
    margin: auto;
    text-align: center;
    padding-top: 30px;
}
.settle h1 {
    padding-top: 50px;
    text-align: center;
    color: var(--secondary-color);
}
.settle p {
    font-size: 20px;
    color: var(--secondary-color);
}
.mapCaption {
    color: var(--secondary-color);
}
/*Map of mars */
.geomap {
    padding-top: 75px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 70%;
}
.settle-des {
    padding-top: 30px;
    padding-bottom: 30px;;
}
.settle-des h2 {
    text-decoration: underline;
}
.settle-des ul li {
    text-align: left;
    color: var(--secondary-color);
    list-style-type: none;
}
.watmap {
    padding-top: 50px;
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 70%;
}
/* history 1st half of the section */
.history-header {
    background-image: linear-gradient(rgba(0,0,0,0.2),rgba(0,0,0,0.8)),url(../img/ship.jpg);
    min-height: 100vh;
    width:100%;
    background-position: center;
    background-size: cover;
    position: relative;
}
/* visibility of stars on history/tourism page */
.history-header #banner, .tourism-header #banner, .form-header #banner{
    visibility: hidden;
}
/* history webpage viewport */
.history{
    height: 100vh;
    width: 100%;
}
/* description of how to use rows and circles */
.history-learn-more{
    position: absolute;
    display: flex;
    width: 80vh;
    height: 25vh;
    text-align: center;
    justify-content: center;
    align-items: center;
    color: var(--secondary-color);
}
  /* Adjusts whole table's position */
.history-inner-table{
    height: 100%;
    padding-top: 10%;
    padding-left: 10%;
    width: 60vh;
    height: 80vh;
}

  /* Adjusts the table's data's text, fill in color and opacity */
.history-inner-table td {
    background-color: darkorange;  
    opacity: 90%;
    text-align: center;
    font-family: 'Poppins', sans-serif;
    color:black;
    font-weight: 600;
    cursor: pointer;
    transition-property: background-color;
    transition-duration: 300ms;
    width: 70%;
    border-radius: 7px;
    box-shadow: 0 0 20px 0px rgba(0,0,0,0.4);
}
/* history table hover over rows */
.history-inner-table td:hover{
    font-weight: 600; 
    background-color: orange;
}
/* container for the circles */
.hidden{
    position: absolute;
    background-image: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)), url(../img/mars-cool-satellite.jpeg);
    background-size: cover;
    border-radius: 55px;
    background-repeat: no-repeat;
    box-shadow: 0 0 20px 0px rgba(0,0,0,0.4);
    height: 90vh;
    width: 105vh;
    left: 35%;
    top: 75%;
    transform: translateY(41%);
}
/*Make the cursor a pointer when hovering over the circles*/
.circles{
    cursor: pointer;
}
  /* position circle1a's main container */
#circle1a {
    position: absolute;
    height: 250px;
    width: 250px;
    left: 50%;
    top: 7%;
    perspective: 1000px; /* Remove this if you don't want the 3D effect */
}
/* Position the front and back side of circle1a */
.circle1a-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
}
/* Position the front and back side 1a */
.circle1a-front, .circle1a-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden; /* Safari */
    backface-visibility: hidden;
}
/* Do an horizontal flip when you move the mouse over the flip box container */
#circle1a:hover .circle1a-inner {
    transform: rotateY(180deg);
}
/* Style the front side 1a*/
.circle1a-front {
    border: 3px solid #780E0E;
    background-image: url(../img/mars-landscape.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    border-radius:50%;
    line-height: 230px;
    text-align: center;
    font-size: 35px;
    color: white;
    font-weight: bold; 
}
/* Style the back side of circle1a */
.circle1a-back {
    border: 3px solid #780E0E;
    background-image: url(../img/mars-landscape2.jpg);
    background-size: cover;
    color: white;
    transform: rotateY(180deg);
    border-radius:50%;
    text-align: center;
    line-height: 65px;
    font-size: 7px;
    color: white;
    font-weight: bold;
}
  /* position circle1b's main container */
#circle1b {
    position: absolute;
    height: 250px;
    width: 250px;
    left: 15%;
    top: 45%;
    perspective: 1000px; /* Remove this if you don't want the 3D effect */
}
/* Position the front and back side of circle1b */
.circle1b-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
}
/* Position the front and back side 1b */
.circle1b-front, .circle1b-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden; /* Safari */
    backface-visibility: hidden;
}
/* Do an horizontal flip when you move the mouse over the flip box container */
#circle1b:hover .circle1b-inner {
    transform: rotateY(180deg);
}
/* Style the front side for 1b*/
.circle1b-front {
    border: 3px solid #780E0E;
    background-image: url(../img/mars-circle.jpg);
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    border-radius:50%;

    line-height: 230px;
    text-align: center;
    font-size: 30px;
    color: white;
    font-weight: bold;
}
/* Style the back side of circle1b */
.circle1b-back {
    border: 3px solid #780E0E;
    background-image: url(../img/mars-mountains.jpg);
    background-size: cover;
    transform: rotateY(180deg);
    border-radius:50%;
    text-align: center;
    line-height: 60px;
    font-size: 12px;
    color: white;
    font-weight: bold;
}

#circle2a {
    position: absolute;
    border-radius:50%;
    height: 250px;
    width: 250px;
    left: 50%;
    top: 7%;
    perspective: 1000px; 
}
/* Position the front and back side of circle2a */
.circle2a-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
}
/* Position the front and back side 2a */
.circle2a-front, .circle2a-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden; /* Safari */
    backface-visibility: hidden;
}
/* Do an horizontal flip when you move the mouse over the flip box container */
#circle2a:hover .circle2a-inner {
    transform: rotateY(180deg);
}
/* Style the front side 2a*/
.circle2a-front {
    border: 3px solid #780E0E;
    background-image: url(../img/mars-circle2.jpg);
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    border-radius:50%;

    line-height: 230px;
    text-align: center;
    font-size: 30px;
    color: white;
    font-weight: bold;
}
/* Style the back side of circle2a */
.circle2a-back {
    border: 3px solid #780E0E;
    background-image: url(../img/mars-landscape3.jpg);
    background-size: cover;
    color: white;
    transform: rotateY(180deg);
    border-radius:50%;
    line-height: 65px;
    font-size: 12px;
    color: white;
    font-weight: bold;
}
  /* position circle1a's main container  2b*/
#circle2b {
    position: absolute;
    border-radius:50%;
    height: 250px;
    width: 250px;
    left: 15%;
    top: 45%;
    perspective: 1000px;
}
/* Position the front and back side of circle2b */
.circle2b-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
}
/* Position the front and back side 2b */
.circle2b-front, .circle2b-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden; /* Safari */
    backface-visibility: hidden;
}
/* Do an horizontal flip when you move the mouse over the flip box container */
#circle2b:hover .circle2b-inner {
    transform: rotateY(180deg);
}
/* Style the front side 2b */
.circle2b-front {
    border: 3px solid #780E0E;
    background-image: url(../img/mars-duststorm.jpg);
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    border-radius:50%;

    line-height: 235px;
    text-align: center;
    font-size: 40px;
    color: white;
    font-weight: bold;
}
/* Style the back side of circle2b */
.circle2b-back {
    border: 3px solid #780E0E;
    background-image: url(../img/mars-duststorm2.jpg);
    background-size: cover;
    color: white;
    transform: rotateY(180deg);
    border-radius:50%;
    line-height: 50px;
    font-size: 12px;
    color: white;
    font-weight: bold;
}
#circle3a {
    position: absolute;
    border-radius:50%;
    height: 250px;
    width: 250px;
    left: 50%;
    top: 7%;
    perspective: 1000px; 
}
/* Position the front and back side of circle3a */
.circle3a-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
}
/* Position the front and back side 3a */
.circle3a-front, .circle3a-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden; /* Safari */
    backface-visibility: hidden;
}
/* Do an horizontal flip when you move the mouse over the flip box container */
#circle3a:hover .circle3a-inner {
    transform: rotateY(180deg);
}
/* Style the front side 3a */
.circle3a-front {
    border: 3px solid #780E0E;
    background-image: url(../img/mars-atmosphere.jpg);
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    border-radius:50%;

    line-height: 230px;
    text-align: center;
    font-size: 30px;
    color: white;
    font-weight: bold;
}
/* Style the back side of circle3a */
.circle3a-back {
    border: 3px solid #780E0E;
    background-image: url(../img/gases.jpg);
    background-size: cover;
    color: white;
    transform: rotateY(180deg);
    border-radius:50%;

    line-height: 65px;
    font-size: 6px;
    color: white;
    font-weight: bold;
}
#circle3b {
    position: absolute;
    border-radius:50%;
    height: 250px;
    width: 250px;
    left: 15%;
    top: 45%;
    perspective: 1000px; 
}
/* Position the front and back side of circle3b */
.circle3b-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
}
/* Position the front and back side 3b */
.circle3b-front, .circle3b-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden; /* Safari */
    backface-visibility: hidden;
}
/* Do an horizontal flip when you move the mouse over the flip box container */
#circle3b:hover .circle3b-inner {
    transform: rotateY(180deg);
}
/* Style the front side 3b */
.circle3b-front {
    border: 3px solid #780E0E;
    background-image: url(../img/mars-funfacts.jpg);
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    border-radius:50%;

    line-height: 230px;
    text-align: center;
    font-size: 35px;
    color: white;
    font-weight: bold;  
}
/* Style the back side of circle3b */
.circle3b-back {
    border: 3px solid #780E0E;
    background-image: url(../img/mars-futurecolony.jpg);
    background-size: cover;
    background-position: 25% 25%;
    transform: rotateY(180deg);
    border-radius:50%;

    line-height: 55px;
    font-size: 12px;
    font-weight: bold;
    color: white;
}
#circle4a {
    position: absolute;
    border-radius:50%;
    height: 250px;
    width: 250px;
    left: 50%;
    top: 7%;
    perspective: 1000px; 
}
/* Position the front and back side of circle4a */
.circle4a-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
}
/* Position the front and back side 4a */
.circle4a-front, .circle4a-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden; /* Safari */
    backface-visibility: hidden;
}
/* Do an horizontal flip when you move the mouse over the flip box container */
#circle4a:hover .circle4a-inner {
    transform: rotateY(180deg);
}
/* Style the front side 4a*/
.circle4a-front {
    border: 3px solid #780E0E;
    background-image: url(../img/mars-distance.jpg);
    background-size: cover;
    background-position: 45% 10%;
    background-repeat: no-repeat;
    border-radius:50%;

    line-height: 230px;
    text-align: center;
    font-size: 35px;
    color: white;
    font-weight: bold; 
}
/* Style the back side of circle4a */
.circle4a-back {
    border: 3px solid #780E0E;
    background-image: url(../img/mars-rocket.png);
    background-size: cover;
    background-position: 25% 25%;
    transform: rotateY(180deg);
    border-radius:50%;

    line-height: 65px;
    font-size: 8px;
    color: white;
    font-weight: bold;
}
  /* position circle1a's main container 4b*/
#circle4b {
    position: absolute;
    border-radius:50%;
    height: 250px;
    width: 250px;
    left: 15%;
    top: 45%;
    perspective: 1000px; 
}
/* Position the front and back side of circle4b */
.circle4b-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
}
/* Position the front and back side 4b */
.circle4b-front, .circle4b-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden; /* Safari */
    backface-visibility: hidden;
}
/* Do an horizontal flip when you move the mouse over the flip box container */
#circle4b:hover .circle4b-inner {
    transform: rotateY(180deg);
}
/* Style the front side 4b */
.circle4b-front {
    border: 3px solid #780E0E;
    background-image: url(../img/mars-satellite.jpg);
    background-size: cover;
    background-position: 25% 25%;
    background-repeat: no-repeat;
    border-radius:50%;

    line-height: 230px;
    text-align: center;
    font-size: 35px;
    color: white;
    font-weight: bold;
}
/* Style the back side of circle4a */
.circle4b-back {
    border: 3px solid #780E0E;
    background-image: url(../img/mars-moon.jpg);
    background-size: cover;
    background-position: 20% 3%;
    color: white;
    transform: rotateY(180deg);
    border-radius:50%;

    line-height: 65px;
    font-size: 11px;
    font-weight: bold;
}
#circle5a {
    position: absolute;
    border-radius:50%;
    height: 250px;
    width: 250px;
    left: 50%;
    top: 7%;
    perspective: 1000px; 
    
}
/* Position the front and back side of circle5aa */
.circle5a-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
}
/* Position the front and back side 5a */
.circle5a-front, .circle5a-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden; /* Safari */
    backface-visibility: hidden;
}
/* Do an horizontal flip when you move the mouse over the flip box container */
#circle5a:hover .circle5a-inner {
    transform: rotateY(180deg);
}
/* Style the front side 5a */
.circle5a-front {
    border: 3px solid #780E0E;
    background-image: url(../img/terraforming.jpg);
    background-size: cover;
    background-position: 45% 10%;
    background-repeat: no-repeat;
    border-radius:50%;

    line-height: 230px;
    text-align: center;
    font-size: 35px;
    color: white;
    font-weight: bold;
}
/* Style the back side of circle5a */
.circle5a-back {
    border: 3px solid #780E0E;
    background-image: url(../img/mars-city.jpg);
    background-size: cover;
    color: white;
    transform: rotateY(180deg);
    border-radius:50%;

    line-height: 65px;
    font-size: 12px;
    color: white;
    font-weight: bold;
}
  /* position circle1a's main container 5b */
#circle5b {
    position: absolute;
    border-radius:50%;
    border-radius:50%;
    height: 250px;
    width: 250px;
    left: 15%;
    top: 45%;
    perspective: 1000px; 
}
/* Position the front and back side of circle5b */
.circle5b-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s;
    transform-style: preserve-3d;
}
/* Position the front and back side 5b */
.circle5b-front, .circle5b-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden; /* Safari */
    backface-visibility: hidden;
}
/* Do an horizontal flip when you move the mouse over the flip box container */
#circle5b:hover .circle5b-inner {
    transform: rotateY(180deg);
}
/* Style the front side 5b */
.circle5b-front {
    border: 3px solid #780E0E;
    background-image: url(../img/tech.jpg);
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    border-radius:50%;

    line-height: 230px;
    text-align: center;
    font-size: 35px;
    color: white;
    font-weight: bold; 
}
/* Style the back side of circle5b */
.circle5b-back {
    border: 3px solid #780E0E;
    background-image: url(../img/mars-comet.jpg);
    background-size: cover;
    background-position: 30% 90%;
    transform: rotateY(180deg);
    border-radius:50%;

    line-height: 48px;
    font-size: 12px;
    color: white;
    font-weight: bold;
}
/* The Modal (background) */
.history-modal-all{
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 2; /* Sit on top */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
}

/* Modal Content/Box */
.history-modalContent-all{
    background: #282828;
    margin-top: 24%;
    width: 50%;
    margin-left: auto;
    margin-right: auto;
    padding: 8px 24px;
    border-radius: 6px;
    z-index: 4;

}

/* The Close Button */
.history-close-all {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
    border-radius: 50%;
    padding: 5px 6px;
    transition-property: background-color;
    transition-duration: 350ms;
}
/* close hover for history modal */
.history-close-all:hover{
    background-color: #eb5e28;
    color: black;
    text-decoration: none;
    cursor: pointer;
    border-radius: 50%;
}
/*Added background image to the header and positioned it*/
.tourism-header {
    background-image: linear-gradient(rgba(0,0,0,0.4),rgba(0,0,0,0)),url(../img/AdobeStock_373707019.jpeg);
    min-height: 70vh;
    width:100%;
    background-position: center;
    background-size: cover;
    position: relative;
    z-index: 1;
}
/*Set height, width, and padding for the food chains section*/
.food-chains{
    width: 100%;
    height: 50vh;
    margin: auto;
    text-align: center;
    padding-top: 65px;
    padding-bottom: 65px;
}
.food-chains h1 {
    color: var(--secondary-color)
}

.attractions{
    width: 100%;
    height: 50vh;
    margin: auto;
    text-align: center;
    padding-top: 65px;
    padding-bottom: 150px;
}
.attractions h1 {
    color: var(--secondary-color);
}

input[type=radio] {
    display: none;
}
/*Added transition to the images in the carousel and positioned them*/

/*Set height, width, and flex properties for container*/
.container {
    width: 100%;
    height: 100%;
    transform-style: preserve-3d;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}
/*Set position for the cards (images in carousel)*/
.cards {
    position: relative;
    width: 100%;
    height: 100%;
    right: 15.5%;
    margin-top: 10px;
}
/*Set styling for images in carousels*/
.food-chains img, .attractions img{
    width: 100%;
    height: 100%;
    border-radius: 10px;
    object-fit: cover;
}
/*Styling for when images are pressed in carousel*/
#item-1:checked ~ .cards #food-3, #item-2:checked ~ .cards #food-1, #item-3:checked ~ .cards #food-2 {
    transform: translatex(-40%) scale(0.8);
    opacity: 0.4;
    z-index: 0;
}
/*Styling for when images are pressed in carousel*/
#item-1:checked ~ .cards #food-2, #item-2:checked ~ .cards #food-3, #item-3:checked ~ .cards #food-1 {
    transform: translatex(40%) scale(0.8);
    opacity: 0.4;
    z-index: 0;
}
/*Styling for when images are pressed in carousel*/
#item-1:checked ~ .cards #food-1, #item-2:checked ~ .cards #food-2, #item-3:checked ~ .cards #food-3 {
    transform: translatex(0) scale(1);
    opacity: 1;
    z-index: 1;
}
/*Box shadow for when images are pressed in carousel*/
#item-1:checked ~ .cards #food-1 img, #item-2:checked ~ .cards #food-2 img, #item-3:checked ~ .cards #food-3 img {
    box-shadow: 0px 0px 5px 0px rgba(81, 81, 81, 0.47);
}
/*Styling for when images are pressed in carousel*/
#item-4:checked ~ .cards #attractions-6, #item-5:checked ~ .cards #attractions-4, #item-6:checked ~ .cards #attractions-5 {
    transform: translatex(-40%) scale(0.8);
    opacity: 0.4;
    z-index: 0;
}
/*Styling for when images are pressed in carousel*/
#item-4:checked ~ .cards #attractions-5, #item-5:checked ~ .cards #attractions-6, #item-6:checked ~ .cards #attractions-4 {
    transform: translatex(40%) scale(0.8);
    opacity: 0.4;
    z-index: 0;
}
/*Styling for when images are pressed in carousel*/
#item-4:checked ~ .cards #attractions-4, #item-5:checked ~ .cards #attractions-5, #item-6:checked ~ .cards #attractions-6 {
    transform: translatex(0) scale(1);
    opacity: 1;
    z-index: 1;
}
/*Box Shadow for when images are pressed in carousel*/
#item-4:checked ~ .cards #attractions-4 img, #item-5:checked ~ .cards #attractions-5 img, #item-6:checked ~ .cards #attractions-6 img {
    box-shadow: 0px 0px 5px 0px rgba(81, 81, 81, 0.47);
}
/*Positioning and animation for modals*/
.modal{
    position: fixed;
    top: 50%;
    background: rbga(0,0,0,0.5);
    z-index: 2;
    display: none;
    animation: modal-open .5s;
  }
 /*Positioning and styling for the modal content*/ 
  .modal-content{
    background: var(--quintary-color);
    width: 50%;
    margin-left: auto;
    margin-right: auto;
    padding: 8px 24px;
    border-radius: 6px;
    z-index: 4;
  }
  /*Styling for modal header*/
  .modal-header{
    font-weight: 500;
    padding: 10px 0;
    font-size: 26px;
    color: var(--secondary-color);
  }
  /*Styling for modal body*/
  .modal-body{
    color: var(--secondary-color);
    padding: 15px 0;
  }
  /*Styling and animation for modal-close*/
  .modal-close{
    cursor: pointer;
    background-color: #FFFCF2;
    padding: 5px 6px;
    border-radius: 50%;
    transition-property: background-color;
    transition-duration: 350ms;
  }
  /*Color change when hover on modal close button*/
  .modal-close:hover{
    background-color: #eb5e28;
  }
#history-modal-3b {
    color: var(--secondary-color);
}
#history-modal-5b {
    color: var(--secondary-color);
}
/*Set size and position for form container*/
.form-container{
    width: 100%;
    margin: auto;
    background: var(--primary-color);
    position: relative;
    background-size: cover;
    background-position: center;
    box-shadow: 0 1px 2px rgba(0,0,0,0.8);
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
/*styling for form title*/
.form-container h3{
    text-align: center;
    margin-bottom: 40px;
    color: var(--secondary-color);
}

/*Positioning, and sizing for form input text*/
.form-container input{
    width: 50%;
    padding: 10px 5px;
    margin: 5px 0;
    border: 0;
    border-bottom: 1px solid var(--secondary-color);
    outline: none;
    background: transparent;
    color: var(--secondary-color);
}
.form-container #selectcon {
    margin-top: 0
}

/*Positioning, and sizing for form labels*/
label{
    color: var(--secondary-color);
    text-align: center;
}
/*color for placeholder*/
input::-webkit-input-placeholder {
    color: var(--secondary-color) !important;
    }

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: var(--primary-color);
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index:1;
}

.dropdown-content a {
    color:var(--secondary-color) !important;
    padding: 12px;
    text-align: center;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {background-color: #ddd;}

.dropdown:hover .dropdown-content { display: block;}

.form-header {
    background-image: linear-gradient(rgba(0,0,0,0.2),rgba(0,0,0,0.8)),url("https://i.pinimg.com/originals/ae/eb/86/aeeb86da703fb74346efe8ae6a6dc511.jpg");
    min-height: 100vh;
    width:100%;
    background-position: center;
    background-size: cover;
    position: relative;
}

/* Styling for submit buttons on book now forms */
.bouncy{
    animation:bouncy 3s infinite linear;
    position:relative;
    width: 90px;
    height: 40px;
    background-color: transparent;
    color: var(--secondary-color);
    border: 2px solid var(--secondary-color);
}

.bouncy:hover {
    background-color: darkorange;
    color: black;
    transition-duration: 0.4s;
    cursor: pointer;
}

@keyframes bouncy {
    0%{top:0em}
    40%{top:0em}
    43%{top:-0.9em}
    46%{top:0em}
    48%{top:-0.4em}
    50%{top:0em}
    100%{top:0em;}
}

/* Styling for table on select page */
#duration {
    width: 250px;
    text-align: center;
    height: 30px;
}

#package {
    width: 150px;
    text-align: CENTER;
    height: 30px;
}

#book-now {
    font-weight: 400;
}

.centered {
    color: var(--secondary-color);
    border: 1px solid var(--secondary-color);
    width: 70%;
    padding-top: 10px;
}
#memPhone, #memName, #memDuration, #memPackage {
    color: var(--secondary-color);
    text-align: center;
}

.centered th{
    text-decoration: underline;
}

.profile-box {
    display: flex;
}

@import url("https://fonts.googleapis.com/css?family=Hind:300,400&display=swap");
.faq {
  box-sizing: border-box;
}
.faq::before, .faq::after {
  box-sizing: border-box;
}

.faq {
  margin: 0;
  padding: 0;
  font-family: "Hind", sans-serif;
  background: var(--primary-color);
  color: var(--secondary-color);
  display: flex;
}

.container {
  margin: 0 auto;
  padding-bottom: 4rem;
  padding-left: 50px;
  padding-right: 50px;
  width: 48rem;
}

.accordion .accordion-item {
  border-bottom: 1px solid #ff5500;
}
.accordion .accordion-item button[aria-expanded=true] {
  border-bottom: 1px solid #ff5500;
}
.accordion button {
  position: relative;
  display: block;
  text-align: left;
  width: 100%;
  padding: 1em 0;
  color: var(--secondary-color);
  font-size: 1rem;
  font-weight: 400;
  border: none;
  background: none;
  outline: none;
}
.accordion button:hover, .accordion button:focus {
  cursor: pointer;
  color: white;
}
.accordion button:hover::after, .accordion button:focus::after {
  cursor: pointer;
  color: #fff;
  border: 1px solid #fff;
}
.accordion button .accordion-title {
  padding: 1em 1.5em 1em 0;
}
.accordion button .icon {
  display: inline-block;
  position: absolute;
  top: 18px;
  right: 0;
  width: 22px;
  height: 22px;
  border: 1px solid;
  border-radius: 22px;
}
.accordion button .icon::before {
  display: block;
  position: absolute;
  content: "";
  top: 9px;
  left: 5px;
  width: 10px;
  height: 2px;
  background: currentColor;
}
.accordion button .icon::after {
  display: block;
  position: absolute;
  content: "";
  top: 5px;
  left: 9px;
  width: 2px;
  height: 10px;
  background: currentColor;
}
.accordion button[aria-expanded=true] {
  color: #fff;
}
.accordion button[aria-expanded=true] .icon::after {
  width: 0;
}
.accordion button[aria-expanded=true] + .accordion-content {
  opacity: 1;
  max-height: 20em;
  transition: all 200ms linear;
  will-change: opacity, max-height;
}
.accordion .accordion-content {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 200ms linear, max-height 200ms linear;
  will-change: opacity, max-height;
}
.accordion .accordion-content p {
  font-size: 1rem;
  font-weight: 300;
  margin: 2em 0;
}

/*
    Auther: Abdelrhman Said
*/

@import url("https://fonts.googleapis.com/css2?family=Poppins&display=swap");

.wrapper {
  margin: 0;
  padding-bottom: 10px;
  box-sizing: border-box;
}

.wrapper:focus,
.wrapper:active {
  outline: none !important;
  -webkit-tap-highlight-color: transparent;
}

.wrapper {
  display: grid;
  height: 100%;
  width: 100%;
  font-family: "Poppins", sans-serif;
  place-items: center;
  justify-content: center;
}

.wrapper {
  display: inline-flex;
  list-style: none;
}

.wrapper .icon {
  position: relative;
  border-radius: 50%;
  padding: 15px;
  margin: 10px;
  width: 50px;
  height: 50px;
  font-size: 18px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.4);
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.wrapper .tooltip {
  position: absolute;
  top: 0;
  font-size: 14px;
  background: #ffffff;
  color: #ffffff;
  padding: 5px 8px;
  border-radius: 5px;
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.wrapper .tooltip::before {
  position: absolute;
  content: "";
  height: 8px;
  width: 8px;
  background: #ffffff;
  bottom: -3px;
  left: 50%;
  transform: translate(-50%) rotate(45deg);
  transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.wrapper .icon:hover .tooltip {
  top: -45px;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.footer .wrapper ul li a:hover{
  color: darkorange;
}

.wrapper .icon:hover span,
.wrapper .icon:hover .tooltip {
  text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.1);
}

.wrapper .facebook:hover,
.wrapper .facebook:hover .tooltip,
.wrapper .facebook:hover .tooltip::before {
  background: #1877F2;
  color: #ffffff;
}

.wrapper .twitter:hover,
.wrapper .twitter:hover .tooltip,
.wrapper .twitter:hover .tooltip::before {
  background: #1DA1F2;
  color: #ffffff;
}

.wrapper .instagram:hover,
.wrapper .instagram:hover .tooltip,
.wrapper .instagram:hover .tooltip::before {
  background: #E4405F;
  color: #ffffff;
}

.wrapper .github:hover,
.wrapper .github:hover .tooltip,
.wrapper .github:hover .tooltip::before {
  background: #333333;
  color: #ffffff;
}

.wrapper .youtube:hover,
.wrapper .youtube:hover .tooltip,
.wrapper .youtube:hover .tooltip::before {
  background: #CD201F;
  color: #ffffff;
}



.main {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 20px;
    font-family: Poppins;
    flex-direction: column;
  }
  .btn-wrapper {
    display: block;
  }
  .btn-wrapper .btn {
    margin: 10px;
  }
  .btn {
    padding-top: 10px;
    padding-bottom: 10px;
    border: 0;
    border-radius: 4px;
    font-size: 14px;
    text-align: center;
    text-decoration: none;
    font-weight: 600;
    min-width: 200px;
    transition-property: color;
    transition-duration: 0.2s;
    transition-timing-function: ease-in-out;
    position: relative;
    z-index: 2;
    box-sizing: border-box;
    display: inline-block;
    cursor: pointer;
  }
  .btn-3d {
    padding: 0;
    border: 0;
    background: transparent;
    perspective: 1000px;
  }
  .btn-3d .btn {
    background: #07b6e0;
    color: #fff;
  }
  .btn-3d .btn:before {
    content: attr(data-hover);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: rotateX(-90deg);
    transition-property: transform, opacity;
    transition-duration: 0.1s;
    transition-timing-function: linear;
    transform-style: preserve-3d;
    transform-origin: bottom;
    opacity: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--secondary-color);
    color: #c00;
    border-radius: 4px;
  }
  .btn-3d .btn.btn-border {
    border: 1px solid var(--secondary-color);
    background: transparent;
    color: var(--secondary-color)
  }
  .btn-3d .btn.btn-border:before {
    color: #222;
  }
  .btn-3d:hover .btn:before {
    transform: rotateX(0deg);
    -ms-transform: rotateX(0deg);
    transform-style: preserve-3d;
    transform-origin: bottom;
    bottom: 100%;
    opacity: 1;
  }
  .btn-3d-cube-2 {
    padding: 0;
    border: 0;
    background: transparent;
    perspective: 1000px;
  }
  .btn-3d-cube-2:hover .btn {
    transform: rotateX(90deg) translateY(-100%);
  }
  .btn-3d-cube-2:hover .btn:before {
    opacity: 1;
    transform: rotateX(-90deg) translateY(0);
  }
  .btn-3d-cube-2 .btn {
    transition: transform 0.5s ease-in-out;
    transform-style: preserve-3d;
    transform-origin: bottom;
    transform: rotateX(0) translateY(0);
    background: #07b6e0;
    color: #fff;
  }
  .btn-3d-cube-2 .btn:before {
    content: attr(data-hover);
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: rotateX(-90deg) translateY(100%);
    transform-origin: bottom;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--secondary-color);
    color: #c00;
    border-radius: 4px;
    opacity: 0;
    transition-property: opacity, transform;
    transition-duration: 0.15s;
    transition-timing-function: ease-in-out;
  }
  .btn-3d-cube-2 .btn.btn-border {
    background: transparent;
    color: var(--secondary-color);
    border: 1px solid var(--secondary-color);
  }
  .btn-3d-cube-2 .btn.btn-border:before {
    color: #222;
  }

#checkcontainer {
  width: 50%;
}

#checkcontainer input {
  left: 10px;
}

.eventDes {
  padding-top: 4%;
  padding-left: 7%;
  padding-right: 7%;
  color: var(--secondary-color);
}

.eventDes h1 {
  padding-bottom: 2%;
  text-align: center;
}

.eventDes ul {
  list-style-type: circle;
}

.eventDes ul li {
  font-size: 16px;
  text-align: left;
  padding-left: 2%;
  padding-bottom: 2%;
}



@media (max-width: 900px) {

  .row {
    margin-top: 5%;
    display: block;
    justify-content: space-between;
}

  .vl{
    display: none;
  }

  .text-box h1{
    font-size: 55px;
  }

  .history { 
      justify-content: center;
      text-align: center;
  }

  .history-table {
    transform: translateY(20%) translateX(7%);
  }

  .history-learn-more {
    transform: translateX(-5%);
  }

  .history-header {
    width: 156%;
  }

  .hidden{
    position: absolute;
    background-image: linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.5)), url(../img/mars-cool-satellite.jpeg);
    background-size: cover;
    border-radius: 55px;
    background-repeat: no-repeat;
    box-shadow: 0 0 20px 0px rgba(0,0,0,0.4);
    transform: translateY(145%) translateX(-17%);
    height: 90vh;
    width: 58vh;
    left: 35%;
    top: 75%;
    padding-bottom: 300px;
}

.hisfooter {
    transform: translateY(100vh) translateX(26%);
}

#circle1a, #circle2a, #circle3a, #circle4a, #circle5a{
    left: 24%;
    top: 7%;
}

#circle1b, #circle2b, #circle3b, #circle4b, #circle5b {
    left: 24%;
    top: 56%;
}

.history-modal-all {
    left: -6%;
    top: 10%;
}


}

@media(max-width: 900px){
    .nav-links{
        display: none;
    }
    .container {
        max-width: 1050px;
        width: 90%;
        margin: auto;
      }
    
      .navbar {
        width: 100%;
        box-shadow: 0 1px 4px rgb(146 161 176 / 15%);
      }
    
      .nav-container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 62px;
      }
    
      .navbar .menu-items {
        display: flex;
      }
    
      .navbar .nav-container li {
        list-style: none;
      }
    
      .navbar .nav-container a {
        text-decoration: none;
        color: #0e2431;
        font-weight: 500;
        font-size: 1.2rem;
        padding: 0.7rem;
      }
    
      .navbar .nav-container a:hover{
          font-weight: bolder;
      }
    
      .nav-container {
        display: block;
        position: relative;
        height: 60px;
      }
    
      .nav-container .checkbox {
        position: absolute;
        display: block;
        height: 32px;
        width: 32px;
        top: 20px;
        right: 20px;
        z-index: 9999;
        opacity: 0;
        cursor: pointer;
      }
    
      .nav-container .hamburger-lines {
        display: block;
        height: 26px;
        width: 32px;
        position: absolute;
        top: 17px;
        right: 20px;
        z-index: 9999;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
      }
    
      .nav-container .hamburger-lines .line {
        display: block;
        height: 4px;
        width: 100%;
        border-radius: 10px;
        background: #0e2431;
      }

      .line {
          stroke: white !important;
      }

      
    
}


.fa-bars {
    color:white;
}

.ham {
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform 400ms;
    user-select: none;
  }
  .hamRotate.active {
    transform: rotate(45deg);
  }
  .hamRotate180.active {
    transform: rotate(180deg);
  }
  .line {
    fill:none;
    transition: stroke-dasharray 400ms, stroke-dashoffset 400ms;
    stroke:transparent;
    stroke-width:5.5;
    stroke-linecap:round;
  }
  .ham1 .top {
    stroke-dasharray: 40 139;
  }
  .ham1 .bottom {
    stroke-dasharray: 40 180;
  }
  .ham1.active .top {
    stroke-dashoffset: -98px;
  }
  .ham1.active .bottom {
    stroke-dashoffset: -138px;
  }

  /* The Overlay (background) */
.overlay {
    /* Height & width depends on how you want to reveal the overlay (see JS below) */   
    height: 100%;
    width: 0;
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    left: 0;
    top: 0;
    background-color: rgb(0,0,0); /* Black fallback color */
    background-color: rgba(0,0,0, 0.9); /* Black w/opacity */
    overflow-x: hidden; /* Disable horizontal scroll */
    transition: 0.5s; /* 0.5 second transition effect to slide in or slide down the overlay (height or width, depending on reveal) */
  }
  
  /* Position the content inside the overlay */
  .overlay-content {
    position: relative;
    top: 25%; /* 25% from the top */
    width: 100%; /* 100% width */
    text-align: center; /* Centered text/links */
    margin-top: 30px; /* 30px top margin to avoid conflict with the close button on smaller screens */
  }
  
  /* The navigation links inside the overlay */
  .overlay a {
    padding: 8px;
    text-decoration: none;
    font-size: 36px;
    color: white;
    display: block; /* Display block instead of inline */
    transition: 0.3s; /* Transition effects on hover (color) */
  }
  
  /* When you mouse over the navigation links, change their color */
  .overlay a:hover, .overlay a:focus {
    color: #f1f1f1;
  }
  
  /* Position the close button (top right corner) */
  .overlay .closebtn {
    position: absolute;
    top: 20px;
    right: 45px;
    font-size: 60px;
  }