*, *::before, *.row:after {
    margin: 0;
    box-sizing: border-box;
    box-sizing: inherit;
}
  
body {
  margin:0;
  font-family: Arial, Helvetica, sans-serif;
}

  /* Note: Try to remove the following lines to see the effect of CSS positioning */
  .affix {
    top: 0;
    width: 100%;
    z-index: 9999 !important;
  }

  .affix + .container-fluid {
    padding-top: 70px;
  }

/* Responsive layout - makes the two columns stack on top of each other 
instead of next to each other */
@media screen and (max-width: 600px) {
  .topnav a:not(:first-child), .dropdown .dropbtn {
    display: none;
  }
  .topnav a.icon {
    float: right;
    display: block;
  }
   a.icon1 {
    float: left;
    display: block;
  } 
  /*
  .col-33 {
    width: 100%;
    background-color: blanchedalmond;
    display: block;
  }*/
  /*.col-50 {
    width: 5%;
    background-color: blanchedalmond;
  }   
  .col-100 {
    width: 100%;
    background-color: blanchedalmond;
  
  ul.topnav li.right, 
  ul.topnav li {float: none;} */

}

@media only screen and (max-width: 600px) {
  .item1 {grid-area: 1 / span 6;}
  .item2 {grid-area: 2 / span 6;}
  .item3 {grid-area: 3 / span 6;}
  .item4 {grid-area: 4 / span 6;}
  .item5 {grid-area: 5 / span 6;}
}

@media screen and (max-width: 600px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .topnav.responsive .dropdown {float: none;}
  .topnav.responsive .dropdown-content {position: relative;}
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }    
}
.mySlides {
    display:block;
    margin:auto;
    border: 2px solid rgb(173, 173, 3);
    width:100%;
    height:auto;
}

.header {
    background-color: #fab906; 
    padding: 15px;
    margin: 0px;
    text-align: center;
    font-family: 'Courier New', Courier, monospace;
    text-align: left;
    width: 100%;
}
/* footer class style code */
.footer {
    /*background-color:#fab906;*/
    background-color:gainsboro;
    padding: 15px;
    color: grey;
    text-align: center;
    font-size:small;
}            
/* create columns that floats next each other */
.col-33 {
    float: left;
    width: 33.33%;
    padding: 15px;
}
.col-33c {
    float: left;
    width: 20%;
    margin-bottom: 16px;
    padding: 0 8px;
}
.col-50 {
    float: left;
    width: 50%;
    padding: 15px;
}         
.col-100 {
    float: left;
    width: 100%;
    padding: 15px;
}                          

/* clear floats after the columns */
.row:after{
    content: "";
    display: table;
    clear: both;
}

.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}    
  
.div-center{
    display:fle;
    justify-content: center;
    align-items: center;
    height:400px;
    border: 1px solid black;
}

/*  Google map */
iframe{
    width:100%;
    height:400px;
    /* filter:invert(100%); */ /* convert the background color from white to black */
}
.grid-container {
  display: grid;
  grid-template-areas:
    'header header header header header header'
    'menu main main main main right'
    'footer footer footer footer footer footer';
  gap: 10px;
  background-color: white;
  padding: 10px;
}

.grid-container > div {
  padding: 10px;
  font-size: 16px;
}

.item1 {
  grid-area: header;
  background-color: purple;
  text-align: center;
  color: #ffffff;
}

.item1 > h1 {
  font-size: 40px;
}

.item2 {
  grid-area: menu;
  }
  
.item2 ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.item2 li {
  padding: 8px;
  margin-bottom: 7px;
  background-color: #33b5e5;
  color: #ffffff;
}

.item2 li:hover {
  background-color: #0099cc;
}
  
.item3 {
  grid-area: main;
}

.item3 > h1 {
  font-size: 30px;
  margin-bottom: 7px;
}

.item3 > p {
  margin-bottom: 7px;
}

.item4 {
  grid-area: right;
  /* border: 2px solid #0099cc; */
  border: 1px transparent #f1f1f1;
  background-color: white;
  padding: 15px;
  color: rgb(96, 96, 3);
}

.item4 > h2 {
  font-size: 20px;
  padding-bottom: 10px;
}

.item4 li {
  padding: 5px;
  margin-bottom: 5px;
}

.item5 {
  grid-area: footer;
  background-color: purple;
  color: #ffffff;
  text-align: center;
}


@media only screen and (max-width: 600px) {
  .item1 {grid-area: 1 / span 6;}
  .item2 {grid-area: 2 / span 6;}
  .item3 {grid-area: 3 / span 6;}
  .item4 {grid-area: 4 / span 6;}
  .item5 {grid-area: 5 / span 6;}

  .col-50 {
      width: 100%;
      background-color: blanchedalmond;
  }   
  .col-33c {
      width: 50%;
      text-align: center;
      background-color: white;
      display: block;
  }   
  .col-33 {
    width: 100%;
    background-color: blanchedalmond;
    display: block;
  }
}

/* meet the team */
.card {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
}
.container-profile {
  padding: 0 16px;
}
.container-profile::after {
  content: "";
  clear: both;
  display: table;
}
.title {
  color: grey;
}
.button-profile {
  border: none;
  outline: 0;
  display: inline-block;
  padding: 8px;
  color: white;
  background-color: #000;
  text-align: center;
  cursor: pointer;
  width: 100%;
}
.button-profile:hover {
  background-color: #555;
}

.image-container {
  width: 200px;
  height: 300px;
  border: 1px solid black;
  margin-bottom: 25px;
}

.image-container img{
  width: 100%;
  height: 100%;
  object-fit: scale-down;
}

  .fakeimg {
    height: 600px;
    background: #aaa;
  }

.iframe-container {
  position: relative;
  width: 100%;
  height: 0; /* Important: set height to 0 for padding-top to define height */
  overflow: hidden; /* Hides content that might overflow the calculated height */
  padding-top: 56.25%; /* For a 16:9 aspect ratio (9/16 * 100) */
  /* For 4:3, use padding-top: 75%; (3/4 * 100) */
}

.iframe-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}