* {
  box-sizing: border-box;
}

.header{
  height:20px;
  padding: 10px;
  background-color: transparent;
}

body{
  background-color: transparent;

}

.parallax-container {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  
  /*  this is where the magic happens:  */
  background-attachment: fixed;
  background-image: url("imgs/2.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
 
  row-gap: 4rem;

  text-align: center;
}

.buffer {
  width: 100%;
  height: 50px;
 
}


.buffer2 {
  width: 100%;
  height: 250px;
 
}





.parallax-container2 {
  flex-direction: row;
  flex-wrap: wrap;
  padding: 6rem 0;
  gap: 1.6em;
}



h1 {
  font-size: 70px;
  font-style:italic;
  color: black;
  font-family:"Avant Garde", cursive;
  
}

h2 {
  font-size: 50px;
  font-family:"Avant Garde", cursive;
  
}
p {
  color:black;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  font-size: 24px;
  font-weight: bolder;
  max-width: 52ch;
  padding: 1em;
  line-height: 1.5;
}

a {
  display: inline-block;
  padding: 1em 3.5em;
  border-radius: 0.3em;
  color: black;
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-decoration: none;
  text-transform: uppercase;
}

h3 {
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  margin-top: 1em;
  font-size: 30px;
  font-weight: 700;
}

h4 {
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  color:#7b8f8d; 
  margin-top: 1em;
  font-size: 20px;
  font-weight: 700;
}



/* All cards  */
.card {
  display: flex;
  max-width: 320px;
  flex-direction: column;
  align-items: center;
  padding-bottom: 1rem;
  background-color: white;
  box-shadow: 0 29px 38px -15px rgb(0 0 0 / 43%);
}


.card2 {
  display: flex;
  max-width: 320px;
  flex-direction: column;
  align-items: center;
  padding-bottom: 1rem;
  background-color: white;
  box-shadow: 0 29px 38px -15px rgb(0 0 0 / 43%);
}

.card3 {
  display: flex;
  max-width: 320px;
  flex-direction: column;
  align-items: center;
  padding-bottom: 1rem;
  background-color: white;
  box-shadow: 0 29px 38px -15px rgb(0 0 0 / 43%);
}


.card4 {
  display: flex;
  max-width: 320px;
  flex-direction: column;
  align-items: center;
  padding-bottom: 1rem;
  background-color: white;
  box-shadow: 0 29px 38px -15px rgb(0 0 0 / 43%);
}

.card5 {
  display: flex;
  max-width: 320px;
  flex-direction: column;
  align-items: center;
  padding-bottom: 1rem;
  background-color: white;
  box-shadow: 0 29px 38px -15px rgb(0 0 0 / 43%);
}



.card2 h4{
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  color:#747168; 
  margin-top: 1em;
  font-size: 20px;
  font-weight: 700;  
    
}



.card4 h4{
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  color:orange; 
  margin-top: 1em;
  font-size: 20px;
  font-weight: 700;
    
}

.card5 h4{
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
  color:#7b8f8d; 
  margin-top: 1em;
  font-size: 20px;
  font-weight: 700;
    
}

.card p{
    
  font-size:18px;
    }

.card2 p{
    
  font-size:18px;
    }

.card3 p{
    
  font-size:18px;
    }


.card4 p{
    
  font-size:18px;
    }

.card5 p{
    
  font-size:18px;
    }


.card a{
    color:#7b8f8d;
   }

.card2 a{
    color:#7b8f8d;
   }

.card3 a{
    color:#7b8f8d;
   }

.card4 a{
    color:#7b8f8d;
   }

.card5 a{
    color:#7b8f8d;
   }

/* card img */

.card-img   {
  width: 100%;
  height: 200px;
  background-position: center;
  background-size: cover;
}

.card:nth-of-type(1) .card-img {
  background-image: url(imgs/z.png);
}

.card:nth-of-type(2) .card-img {
  background-image: url(imgs/t.png);
}

.card:nth-of-type(3) .card-img {
  background-image: url(imgs/f.png);
}

.card:nth-of-type(4) .card-img {
  background-image: url(imgs/a.png);
}

.card:nth-of-type(5) .card-img {
  background-image: url(imgs/e.png);
}


/* card 2 img */

.card2:nth-of-type(1) .card-img {
  background-image: url(imgs/4.png);
}

.card2:nth-of-type(2) .card-img {
  background-image: url(imgs/14.png);
}

.card2:nth-of-type(3) .card-img {
  background-image: url(imgs/11.png);
}

.card2:nth-of-type(4) .card-img {
  background-image: url(imgs/13.png);
}

.card2:nth-of-type(5) .card-img {
  background-image: url(imgs/6.png);
}

/* card 3 img */

.card3:nth-of-type(1) .card-img {
  background-image: url(imgs/9.png);
}

.card3:nth-of-type(2) .card-img {
  background-image: url(imgs/7.png);
}

.card3:nth-of-type(3) .card-img {
  background-image: url(imgs/8.png);
}

.card3:nth-of-type(4) .card-img {
  background-image: url(imgs/dyn.png);
}

.card3:nth-of-type(5) .card-img {
  background-image: url(imgs/vr.png);
}

.card3:nth-of-type(6) .card-img {
  background-image: url(imgs/robot.jpg);
}

/* card 4 img */

.card4:nth-of-type(1) .card-img {
  background-image: url(imgs/10.png);
}

.card4:nth-of-type(2) .card-img {
  background-image: url(imgs/p.png);
}

.card4:nth-of-type(3) .card-img {
  background-image: url(imgs/14.jpg);
}

.card4:nth-of-type(4) .card-img {
  background-image: url(imgs/y.png);
}

.card4:nth-of-type(5) .card-img {
  background-image: url(imgs/tree.jpg);
}

.card4:nth-of-type(6) .card-img {
  background-image: url(imgs/top.jpg);
}

.card4:nth-of-type(7) .card-img {
  background-image: url(imgs/nat.png);
}

.card4:nth-of-type(8) .card-img {
  background-image: url(imgs/design.jpg);
}

/* card 5 img */

.card5:nth-of-type(1) .card-img {
  background-image: url(imgs/ewt.jpg);
}

.card5:nth-of-type(2) .card-img {
  background-image: url(imgs/rd.jpg);
}

.card5:nth-of-type(3) .card-img {
  background-image: url(imgs/dm.jpg);
}

.card5:nth-of-type(4) .card-img {
  background-image: url(imgs/pwa.jpg);
}

.card5:nth-of-type(5) .card-img {
  background-image: url(imgs/dlp.jpg);
}

.card5:nth-of-type(6) .card-img {
  background-image: url(imgs/af.jpg);
}

.card5:nth-of-type(7) .card-img {
  background-image: url(imgs/ai.jpg);
}


.card5:nth-of-type(8) .card-img {
  background-image: url(imgs/rt.jpg);
}

.card5:nth-of-type(9) .card-img {
  background-image: url(imgs/ewt.jpg);
}




/* stars */
.checked {
  color: orange;
  
}

/* Add a black background color to the top navigation */
ul.topnav {
  list-style-type: none;
  width:100%;
  margin: 0;
  padding: 5px;
  overflow:hidden;
  background-color:transparent;
  
    
}

/* Style the links inside the navigation bar */
ul.topnav li a {
 
  display: block;
  color: #747168;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 18px;
   
}

ul.topnav li {float: left;}

/* Change the color of links on hover */
ul.topnav li a:hover:not(.active) {

  color: #7b8f8d;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  
}

/* Add an active class to highlight the current page */
ul.topnav li a.active {
  
    color:#9f5f5f;
    
}

ul.topnav li .right{
  float: right;
}


.collapsible {
  background-color: white;
  color:#30261d;
  cursor: pointer;
  padding: 10px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 25px;
  font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
}

.collapsible:after {
  content: '\261F';
  font-size: 30px; 
  color: #9f5f5f;
  font-weight: bold;
  float: right;
  margin-left: 5px;
  
}


.collapsible .active:after {
  content: "\2212";
}


.active, .collapsible:hover {
  background-color:transparent;
}

.content {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-color: #f1f1f1;
}


.content a {
    color:#747168;
    
    
}
 
    

.responsive {
  padding: 0 6px;
  float: left;
  width: 24.99999%;
    
}



.clearfix p{
        padding:80px;
        position: relative;
        font-family: Geneva, sans-serif;
        font-size: 45px;
        text-transform: uppercase;
        margin-left: -10px;
        letter-spacing: 2px;
        background: linear-gradient(90deg,white,#747168,white);
        background-repeat: no-repeat;
        background-size: 90%;
        animation: animate 5s infinite;
        -webkit-background-clip: text;
        -webkit-text-fill-color: rgba(255, 255, 255, 0);
      }
      @keyframes animate {
        0% {
          background-position: -500%;
        }
        100% {
          background-position: 500%;
        }
      }

    
.footer{
    text-align: center;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: 20px;
    position: fixed;
    bottom: 0;
    height: 100px;
    width:100%;
    background-color:white;
    
}
  .footer p{
    
    text-align: center;
    font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    font-size: 20px;
    margin-top: 70px;

 }


@media only screen and (max-width: 800px) {
  .responsive {
    width: 100%;
  }
}



.clearfix:after {
  content: "";
  display: table;
  clear: both;
}