*{margin:0;padding:0;}
html,body{height:100%}
.frame{margin:auto;max-width:1200px}
.embed{position:relative;padding-bottom:60%; /* padding-bottom = iframe width */
clear: both;height:0;overflow:hidden;max-width:100%;height:550px}
.embed iframe{position:absolute;top:0;left:0;width:100%;height:100%;z-index: 1;}

body {
  background-color: #fcf8fc;
  /* margin-left: 1%; */
}

.empty-block {
  position: relative; /* Set position to relative */
  height: 120px; /* Set the height of the empty block */
  background-color: #ffffffef; /* Optional background color */
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1); /* Add a shadow at the bottom */
}

.topnav {
  position: absolute; /* Set position to absolute */
  bottom: 0; /* Align the topnav to the bottom of the empty-block */
  padding: 10px 0; /* Adjust padding as needed */
  width: 100%; /* Set the width to fill the container */
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  color: #000000;
  text-align: center;
  padding: 18px 16px;
  text-decoration: none;
  font-size: 20px;
  position: relative; /* Add position relative to the links */
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  color: #000000;
  text-align: center;
  padding: 18px 16px;
  text-decoration: none;
  font-size: 20px;
  position: relative; /* Add position relative to the links */
}

.topnav a::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px; /* Set the height of the line */
  background-color: transparent; /* Initially hide the line */
  transition: background-color 0.3s; /* Add transition effect for smooth appearance */
}

/* Show the line when the link is hovered or active */
.topnav a:hover::after,
.topnav a.active::after {
  background-color: #9c2c9e; /* Set the color of the line when hovered or active */
}


h1, h2, h3 {
   font-family: 'Arial, Helvetica, sans-serif';
   /* Add other styles as needed */
   font-size: x-large;
}

 /* Main column */
 .main {
   background-color: #ffffffef; /* White background color */
   padding: 20px; /* Some padding */
   margin-top: 30px;
   max-width: 80%; /* Set the maximum width */
  margin-left: auto; /* Center the element horizontally */
  margin-right: auto; /* Center the element horizontally */
 }

 .row {
  display: flex;
  width: fit-content;
 }
 
 .text-container{
  padding: 7%;
  text-align: justify;
  width: 70%; /* Set width to take up 70% of the row */
 }

 .image-container{
  padding: 5%;
  padding-top: 10%;
  width: 40%; /* Set width to take up 30% of the row */
  text-align: center; /* Center the image horizontally */
 }

 .right-image {
  padding: 20px;
  max-width: 100%; /* Ensure the image does not exceed its container */
 }
 /* Clear floats */
.row:after {
  content: "";
  display: table;
  clear: both;
}

 .bottom-image {
  display: none;
}

.pdf{
    width: 1000px;
    height: 100%;
    background-color: #ffffffef;
    padding: 3%;
    padding-left: 10%;
    padding-right: 10%;
}


@media only screen and (max-width: 768px) {
  .empty-block {
    position: relative; /* Set position to relative */
    height: 200px; /* Set the height of the empty block */
    background-color: #ffffffef; /* Optional background color */
    box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1); /* Add a shadow at the bottom */
  }

  h1, h2, h3 {
    font-size: large; /* Decrease font size for smaller screens */
 }

 
  .topnav a {
    padding: 10px; /* Adjust padding for smaller screens */
    font-size: 16px; /* Decrease font size for smaller screens */
  }

  .text-container{
    padding: 7%;
    text-align:left;
    width: 70%; /* Set width to take up 70% of the row */
   }

   
  .bottom-image {
    display: block;
    max-width: 50%; /* Ensure the image does not exceed its container */
    padding: 5%;
  }

  .right-image {
    display: none;
  }

   .row p {
    font-size: smaller;
   }
   
   .pdf{
    width: 80%;
    height: 100%;
    background-color: #ffffffef;
    padding: 3%;
}
  /* Add any other necessary adjustments for smaller screens */
}