.zaglavlje{
      padding-top: 10px;
        font-size: 13px;
        color: rgba(61, 25, 139, 0.842);
        text-shadow: 2px 2px 2px white;
        background: linear-gradient(white, rgb(207, 203, 241), white)   
    }
    .zaglavlje >h1{
        text-align: center; 
     }
    #header{
        text-align: center;
        display: flex;
        justify-content: space-between;
    }
    #header img{
        width: 70px;
        height: 70px;
    }
    /* Add a black background color to the top navigation */
.topnav {
  background-color: #463096 ;
  overflow: hidden; 
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  
}

/* Add an active class to highlight the current page */
.active {
  background-color: #9380d4;
  color: white;
}

/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
  display: none;
}
/* Dropdown container - needed to position the dropdown content */
.dropdown {
  float: left;
  overflow: hidden;
  
}

/* Style the dropdown button to fit inside the topnav */
.dropdown .dropbtn {
  font-size: 17px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
 
}

/* Style the dropdown content (hidden by default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color:  #4c34a5;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

/* Style the links inside the dropdown */
.dropdown-content a {
  float: none;
  color: rgb(255, 252, 252);
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

/* Add a dark background on topnav links and the dropdown button on hover */
.topnav a:hover, .dropdown:hover .dropbtn {
  background-color:#9380d4 ;
  color: white;
  transition: 200ms;
}

/* Add a grey background to dropdown links on hover */
.dropdown-content a:hover {
  background-color: #9380d4;
  color: rgb(249, 248, 248);
  transition: 200ms;
}

/* Show the dropdown menu when the user moves the mouse over the dropdown button */
.dropdown:hover .dropdown-content {
  display: block;
}
.info{
  color: rgb(69, 69, 69);
  background: rgb(255,255,255);
  background: linear-gradient(0deg, rgba(255,255,255,1) 58%, rgba(226,226,226,1) 100%);
  text-align: center;
  padding-top: 3rem;
}
.info h1{
  padding-right: 150px;
}
.column{
  display: flex;
  flex-direction: column;
  margin-bottom: 5rem;
  margin-top: 3rem;
  
}
.column1{
  display: flex;
  flex-direction: column;
  margin-bottom: 5rem;
  margin-top: 3rem;
  
}
.column2{
  display: flex;
  flex-direction: column;
  margin-bottom: 5rem;
  margin-top: 3rem;
  
}
.column3{
  display: flex;
  flex-direction: column;
  margin-bottom: 5rem;
  margin-top: 3rem;
  
}
.photo{
  margin-top: 2rem;
  margin-left: 43rem !important;
  position: absolute;
  width: 600px;
  height: 250px;
}
.photo1{
  margin-top: 1rem;
  width: 550px;
  height: 250px;
  position: absolute;
  margin-left: 3rem;
 
  
}
.photo2{
  margin-top: 2rem;
  margin-left: 43rem !important;
  position: absolute;
  width: 600px;
  height: 250px;
}
.photo3{
  margin-top: 2rem;
  margin-left: 3rem;
  position: absolute;
  width: 550px;
  height: 250px;
}
.about{
  width: 40rem;
  margin-left: 15rem;
  text-align: left;
  margin-left: 3rem;
  margin-top: 3rem;
  font-size: 17px;
}
.about1{
  width: 40rem;
  margin-left: 42rem;
  margin-top: 3rem;
  font-size: 17px;
}
.about2{
  width: 40rem;
  margin-left: 15rem;
  text-align: left;
  margin-left: 3rem;
  margin-top: 3rem;
  font-size: 17px;
}
.about3{
  width: 40rem;
  margin-left: 43rem;
  text-align: left;
  margin-top: 3rem;
  font-size: 17px;
}
.column:nth-child(odd){
  display: flex;
  margin-left: 40rem;
}

    #myBtn {
 
      position: fixed; /* Fixed/sticky position */
      bottom: 10px; /* Place the button at the bottom of the page */
      right: 30px; /* Place the button 30px from the right */
      z-index: 99; /* Make sure it does not overlap */
      border: none; /* Remove borders */
      outline: none; /* Remove outline */
      background-color: rgb(54, 42, 113); /* Set a background color */
      color: white; /* Text color */
      cursor: pointer; /* Add a mouse pointer on hover */
      padding: 15px; /* Some padding */
      border-radius: 10px; /* Rounded corners */
      font-size: 18px; /* Increase font size */
    }
    
    #myBtn:hover {
      background-color: #9f8dee; /* Add a dark-grey background on hover */
    }
    #footer{
      font-size: 15px;
      display: flex;
      flex-direction: row;
      background-color: rgb(189, 188, 188);
      color: rgb(70, 69, 69);
      padding-left: 20px;
      padding-top: 10px;
    } 
    #footer img{
       padding: 0px 5px 0px 10px;
       width: 20px;
       height: 20px;
    }
   
    
     
    @media only screen and (min-width: 300px) and (max-width: 374px){
      .topnav a:not(:first-child), .dropdown .dropbtn {
        display: none;

      }
      .topnav a.icon {
        float: right;
        display: block;
        padding: 10px;
      }
      .topnav.responsive {position: relative;}
      .topnav.responsive a.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;
      }
    #header{
        padding-top: 10px;
        font-size: 6px;
    }
    #header img{
      border-radius: 50%;
        width: 40px;
        height: 40px;
        padding-bottom: 3px;
    }
    .info h1{
      padding-left: 20px;
      font-size: 15px;
    }
    .column{
      display: flex;
      flex-direction: row-reverse;
      
    }
    .column1{
      display: flex;
      flex-direction: row-reverse; 
     }
    .column2{
      display: flex;
      flex-direction: row-reverse;
     }
    .column3{
      display: flex;
      flex-direction: row-reverse; 
     }  

    .photo{
      margin-top: 2rem;
      width: 290px;
      height: 100px;
      padding-right: 5px;
      padding-left: 5px;
    }
    .photo1{
      margin-top: 1rem;
      width: 290px;
      height: 150px;
      padding-right: 5px;
      padding-left: 5px;
    }
    .photo2{
      margin-top: 1rem;
      width: 290px;
      height: 150px;
      padding-right: 5px;
      padding-left: 5px;
    }
    .photo3{
      margin-top: 1rem;
      width: 290px;
      height: 100px;
      padding-right: 5px;
      padding-left: 5px;
    }
    .about{
      margin-left: 5px;
      text-align: left;
      margin-top: 10rem;
      font-size: 17px;
    }
    .about1{
      width: 40rem;
      margin-left: 0px;
      text-align: left;
      margin-top: 12rem;
      font-size: 17px;
    }
    .about2{
      width: 40rem;
      margin-left: 0px;
      text-align: left;
      margin-top: 10rem;
      font-size: 17px;
    }
    .about3{
      width: 40rem;
      margin-left: 0px;
      text-align: left;
      margin-top: 10rem;
      font-size: 17px;
    }
    #footer{
      font-size: 15px;
      display: flex;
      flex-direction: row;
      background-color: rgb(189, 188, 188);
      color: rgb(70, 69, 69);
      padding-left: 3px;
      padding-top: 5px;
    } 
    #footer img{
       padding: 5px;
       width: 20px;
       height: 20px;
    }
   }
   @media only screen and (min-width: 375px) and (max-width: 410px){
    .topnav a:not(:first-child), .dropdown .dropbtn {
      display: none;

    }
    .topnav a.icon {
      float: right;
      display: block;
      padding: 10px;
    }
    .topnav.responsive {position: relative;}
    .topnav.responsive a.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;
    }
  #header{
      padding-top: 10px;
      font-size: 6px;
  }
  #header img{
    border-radius: 50%;
      width: 40px;
      height: 40px;
      padding-bottom: 3px;
  }
  .info h1{
    padding-left: 20px;
    font-size: 15px;
  }
  .column{
    display: flex;
    flex-direction: row-reverse;
    
  }
  .column1{
    display: flex;
    flex-direction: row-reverse; 
   }
  .column2{
    display: flex;
    flex-direction: row-reverse;
   }
  .column3{
    display: flex;
    flex-direction: row-reverse; 
   }  

  .photo{
    margin-top: 2rem;
    width: 350px;
    height: 150px;
    margin-right: 5px;
  }
  .photo1{
    width: 350px;
    height: 150px;
    margin-right: 5px;
  }
  .photo2{
    width: 350px;
    height: 150px;
    margin-right: 5px;
  }
  .photo3{
   
    width: 350px;
    height: 100px;
    margin-right: 5px;
  }
  .about{
    margin-left: 20px;
    margin-right: 20px;
    text-align: left;
    margin-top: 13rem;
    font-size: 17px;
  }
  .about1{
    margin-left: 20px;
    margin-right: 20px;
    width: 40rem;
    text-align: left;
    margin-top: 12rem;
    font-size: 17px;
  }
  .about2{
    margin-left: 20px;
    margin-right: 20px;
    width: 40rem;
    text-align: left;
    margin-top: 10rem;
    font-size: 17px;
  }
  .about3{
    width: 40rem;
    margin-left: 20px;
    margin-right: 20px;
    text-align: left;
    margin-top: 10rem;
    font-size: 17px;
  }
  #footer{
    font-size: 13px;
    display: flex;
    flex-direction: row;
    background-color: rgb(189, 188, 188);
    color: rgb(70, 69, 69);
    padding-top: 10px;
  } 
  #footer img{
     width: 20px;
     height: 20px;
     padding-left: 5px;
    
     
  }
   }
   @media only screen and (min-width: 411px) and (max-width: 480px){
    .topnav a:not(:first-child), .dropdown .dropbtn {
      display: none;

    }
    .topnav a.icon {
      float: right;
      display: block;
      padding: 10px;
    }
    .topnav.responsive {position: relative;}
    .topnav.responsive a.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;
    }
  #header{
      padding-top: 10px;
      font-size: 6px;
  }
  #header img{
    border-radius: 50%;
      width: 40px;
      height: 40px;
      padding-bottom: 3px;
  }
  .info h1{
    padding-left: 20px;
    font-size: 15px;
  }
  .column{
    display: flex;
    flex-direction: row-reverse;
    
  }
  .column1{
    display: flex;
    flex-direction: row-reverse; 
   }
  .column2{
    display: flex;
    flex-direction: row-reverse;
   }
  .column3{
    display: flex;
    flex-direction: row-reverse; 
   }  

  .photo{
    margin-top: 2rem;
    width: 350px;
    height: 150px;
    margin-right: 25px;
  }
  .photo1{
    width: 350px;
    height: 150px;
    margin-right: 25px;
  }
  .photo2{
    width: 350px;
    height: 150px;
    margin-right: 25px;
  }
  .photo3{
   
    width: 350px;
    height: 100px;
    margin-right: 25px;
  }
  .about{
    margin-left: 20px;
    margin-right: 20px;
    text-align: left;
    margin-top: 13rem;
    font-size: 17px;
  }
  .about1{
    margin-left: 20px;
    margin-right: 20px;
    width: 40rem;
    text-align: left;
    margin-top: 12rem;
    font-size: 17px;
  }
  .about2{
    margin-left: 20px;
    margin-right: 20px;
    width: 40rem;
    text-align: left;
    margin-top: 10rem;
    font-size: 17px;
  }
  .about3{
    width: 40rem;
    margin-left: 20px;
    margin-right: 20px;
    text-align: left;
    margin-top: 10rem;
    font-size: 17px;
  }
  #footer{
    font-size: 15px;
    display: flex;
    flex-direction: row;
    background-color: rgb(189, 188, 188);
    color: rgb(70, 69, 69);
    padding-left: 3px;
    padding-top: 5px;
  } 
  #footer img{
     padding: 5px;
     width: 20px;
     height: 20px;
  }
   }
   @media only screen and (min-width: 481px) and (max-width: 600px){
    .topnav a:not(:first-child), .dropdown .dropbtn {
      display: none;

    }
    .topnav a.icon {
      float: right;
      display: block;
      padding: 10px;
    }
    .topnav.responsive {position: relative;}
    .topnav.responsive a.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;
    }
  #header{
      padding-top: 10px;
      font-size: 6px;
  }
  #header img{
    border-radius: 50%;
      width: 40px;
      height: 40px;
      padding-bottom: 3px;
  }
  .info h1{
    padding-left: 20px;
    font-size: 15px;
  }
  .column{
    display: flex;
    flex-direction: row-reverse;
    
  }
  .column1{
    display: flex;
    flex-direction: row-reverse; 
   }
  .column2{
    display: flex;
    flex-direction: row-reverse;
   }
  .column3{
    display: flex;
    flex-direction: row-reverse; 
   }  

  .photo{
    margin-top: 2rem;
    width: 420px;
    height: 150px;
    margin-right: 25px;
  }
  .photo1{
    width: 420px;
    height: 150px;
    margin-right: 25px;
  }
  .photo2{
    width: 420px;
    height: 150px;
    margin-right: 25px;
  }
  .photo3{
    width: 420px;
    height: 100px;
    margin-right: 25px;
  }
  .about{
    margin-left: 20px;
    margin-right: 20px;
    text-align: left;
    margin-top: 13rem;
    font-size: 17px;
  }
  .about1{
    margin-left: 20px;
    margin-right: 20px;
    width: 40rem;
    text-align: left;
    margin-top: 12rem;
    font-size: 17px;
  }
  .about2{
    margin-left: 20px;
    margin-right: 20px;
    width: 40rem;
    text-align: left;
    margin-top: 10rem;
    font-size: 17px;
  }
  .about3{
    width: 40rem;
    margin-left: 20px;
    margin-right: 20px;
    text-align: left;
    margin-top: 10rem;
    font-size: 17px;
  }
  #footer{
    font-size: 15px;
    display: flex;
    flex-direction: row;
    background-color: rgb(189, 188, 188);
    color: rgb(70, 69, 69);
    padding-left: 3px;
    padding-top: 5px;
  } 
  #footer img{
     padding: 5px;
     width: 20px;
     height: 20px;
  }
   }
   @media only screen and (min-width: 601px) and (max-width: 757px){
    
  .info h1{
    padding-left: 20px;
    font-size: 15px;
  }
  .column{
    display: flex;
    flex-direction: row-reverse;
    
  }
  .column1{
    display: flex;
    flex-direction: row-reverse; 
   }
  .column2{
    display: flex;
    flex-direction: row-reverse;
   }
  .column3{
    display: flex;
    flex-direction: row-reverse; 
   }  

  .photo{
    margin-top: 2rem;
    width: 550px;
    height: 200px;
    margin-right: 15px;
  }
  .photo1{
    width: 550px;
    height: 200px;
    margin-right: 15px;
  }
  .photo2{
    width: 550px;
    height: 200px;
    margin-right: 15px;
  }
  .photo3{
   
    width: 550px;
    height: 200px;
    margin-right: 15px;
  }
  .about{
    margin-left: 20px;
    margin-right: 20px;
    text-align: left;
    margin-top: 16rem;
    font-size: 17px;
  }
  .about1{
    margin-left: 20px;
    margin-right: 20px;
    width: 40rem;
    text-align: left;
    margin-top: 15rem;
    font-size: 17px;
  }
  .about2{
    margin-left: 20px;
    margin-right: 20px;
    width: 40rem;
    text-align: left;
    margin-top: 13rem;
    font-size: 17px;
  }
  .about3{
    width: 40rem;
    margin-left: 20px;
    margin-right: 20px;
    text-align: left;
    margin-top: 16rem;
    font-size: 17px;
  }
  #footer{
    font-size: 15px;
    display: flex;
    flex-direction: row;
    background-color: rgb(189, 188, 188);
    color: rgb(70, 69, 69);
    padding-left: 3px;
    padding-top: 5px;
  } 
  #footer img{
     padding: 5px;
     width: 20px;
     height: 20px;
  }
   }
   @media only screen and (min-width: 756px) and (max-width: 992px){
    
    .info h1{
      padding-left: 20px;
      font-size: 25px;
    }
    .column{
      display: flex;
      flex-direction: row-reverse;
      
    }
    .column1{
      display: flex;
      flex-direction: row-reverse; 
     }
    .column2{
      display: flex;
      flex-direction: row-reverse;
     }
    .column3{
      display: flex;
      flex-direction: row-reverse; 
     }  
  
    .photo{
      margin-top: 2rem;
      width: 650px;
      height: 250px;
      margin-right: 40px;
    }
    .photo1{
      width: 650px;
      height: 250px;
      margin-right: 35px;
    }
    .photo2{
      width: 650px;
      height: 250px;
      margin-right: 35px;
    }
    .photo3{
      width: 650px;
      height: 250px;
      margin-right: 35px;
    }
    .about{
      margin-right: 50px;
      text-align: left;
      margin-top: 19rem;
      font-size: 20px;
    }
    .about1{
      margin-left: 20px;
      margin-right: 50px;
      width: 40rem;
      text-align: left;
      margin-top: 19rem;
      font-size: 20px;
    }
    .about2{
      margin-right: 50px;
      width: 40rem;
      text-align: left;
      margin-top: 19rem;
      font-size: 20px;
    }
    .about3{
      width: 40rem;
      margin-left: 20px;
      margin-right: 50px;
      text-align: left;
      margin-top: 19rem;
      font-size: 20px;
    }
    #footer{
      font-size: 15px;
      display: flex;
      flex-direction: row;
      background-color: rgb(189, 188, 188);
      color: rgb(70, 69, 69);
      padding-left: 3px;
      padding-top: 5px;
    } 
    #footer img{
       padding: 5px;
       width: 20px;
       height: 20px;
    }
     }
     @media only screen and (min-width: 993px) and (max-width: 1300px){
    
      .info h1{
        padding-left: 25px;
        font-size: 25px;
      }
      .column{
        display: flex;
        flex-direction: row-reverse;
        
      }
      .column1{
        display: flex;
        flex-direction: row-reverse; 
       }
      .column2{
        display: flex;
        flex-direction: row-reverse;
       }
      .column3{
        display: flex;
        flex-direction: row-reverse; 
       }  
    
      .photo{
        margin-top: 2rem;
        width: 850px;
        height: 300px;
        margin-right: 40px;
      }
      .photo1{
        width: 850px;
        height: 350px;
        margin-right: 35px;
      }
      .photo2{
        width: 850px;
        height: 350px;
        margin-right: 35px;
      }
      .photo3{
        width: 850px;
        height: 300px;
        margin-right: 35px;
      }
      .about{
        margin-right: 150px;
        text-align: left;
        margin-top: 22rem;
        font-size: 23px;
      }
      .about1{
        margin-left: 20px;
        margin-right: 150px;
        width: 40rem;
        text-align: left;
        margin-top: 24rem;
        font-size: 23px;
      }
      .about2{
        margin-right: 150px;
        width: 40rem;
        text-align: left;
        margin-top: 23rem;
        font-size: 23px;
      }
      .about3{
        width: 40rem;
        margin-left: 20px;
        margin-right: 150px;
        text-align: left;
        margin-top: 23rem;
        font-size: 23px;
      }
      #footer{
        font-size: 15px;
        display: flex;
        flex-direction: row;
        background-color: rgb(189, 188, 188);
        color: rgb(70, 69, 69);
        padding-left: 3px;
        padding-top: 5px;
      } 
      #footer img{
         padding: 5px;
         width: 20px;
         height: 20px;
      }
       }