@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@300..700&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');
@keyframes myAnimation {
  0%   {background-color:#2A7B9B; left:0px; top:0px;}
  25%  {background-color:rgba(87, 199, 133, 1); left:200px; top:0px;}
  50%  {background-color:#333333; left:200px; top:200px;}
  75%  {background-color:rgba(87, 199, 133, 1); left:0px; top:200px;}
  100% {background-color:rgba(237, 221, 83, 1); left:0px; top:0px;}
}

* {
    margin: 0;
    padding: 0;
}

html{
    background: #2A7B9B;
    background: linear-gradient(263deg,rgba(42, 123, 155, 1) 0%, rgba(87, 199, 133, 1) 50%, rgba(237, 221, 83, 1) 100%);
    margin: 0;
    
}
body{
    margin: 0;
}
#masterHeader{
    font-family: "Lato";
    margin: 0;
    display: flex;
    position: relative;
}
#headerLeft{
    flex: 1;
    background-color: #333333;
    
    
}
#headerLeft img{
    width: 60px;
    margin: 0;
    
    
    
}
#topHeader{
    font-family: "Lato";
    text-align: center;
    margin: 0;
    flex: 1;
    border-style: solid;
    

}
#topHeader:hover{
    background-color: #1111115e;
    cursor: pointer;
}
#topHeader a:visited, #header a:active{
    color: #333333;
}
.hamburger {
    display: none;
    cursor: pointer;
    padding: 14px 16px;
    float: right;
}
.hamburger div {
    width: 25px;
    height: 3px;
    background-color: white;
    margin: 5px 0;
    transition: 0.3s;
}
.nav-container{
    overflow: hidden;
    background-color: #333333;
    flex: 1;
    justify-content: flex-end;
}
#navBar{
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    
    
}
#navBar li {
    float: right;
}

#navBar a{
      display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

#navBar li a:hover {
    background-color: #111111;
}
#slogan{
    text-align: center;
    margin-top: 3%;
    position: relative;
    animation-name: myAnimation;
    animation-duration: 4s;
    border-style: solid;
    border-width: 10px 50px;
    border-color: #333333;
}
#bodyLogo{
    width: 20vi;
    margin-top: 3%;
     display: block;
  margin-left: auto;
  margin-right: auto;
  
    
}
#form{
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    margin-top: 3%;
    width: 100%;
   
}
#form h1 {
    border-style: solid;
    border-width: 10px 0; /* 10px top/bottom, 0px left/right */
    border-color: #333333;
    width: 100%;
    text-align: center;
    margin: 0;
    padding: 0;
}
#form h2{
    margin-bottom: -5%;
}
#services{
    margin-top: 3%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}
#services ul li{
    font-size: 30px;
}
#services h1{
    border-style: solid;
    border-width: 10px 0; /* 10px top/bottom, 0px left/right */
    border-color: #333333;
    width: 100%;
    text-align: center;
    margin: 0;
    padding: 0;
}
#contact{
        margin-top: 3%;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}
#contact h1{
    border-style: solid;
    border-width: 10px 0; /* 10px top/bottom, 0px left/right */
    border-color: #333333;
    width: 100%;
    text-align: center;
    margin: 0;
    padding: 0;
}

@media (max-width:1025px){
.hamburger {
        display: block;
    }

    /* Hide the navbar menu links by default on mobile */
    #navBar {
display: none;       /* Hide links by default */
        position: absolute;   /* TRICK 2: Pulls it out of the header's height calculation */
        top: 100%;            /* Places it perfectly flush with the bottom of #masterHeader */
        right: 0;
        width: 25%;
        background-color: #333333;
        z-index: 999;         /* Makes it float safely above your page content */
        box-shadow: 0px 4px 10px rgba(0,0,0,0.3); /* Optional: gives it a nice clean dropdown shadow */
    }

    /* Stop links from floating sideways; make them stack vertically */
    #navBar li {
        float: none;
    }

    #navBar a {
        text-align: left;
        padding: 15px 20px;
        border-top: 1px solid #444444; /* Optional: adds subtle lines between mobile links */
    }

    /* This class will be added via JavaScript when the hamburger is clicked */
    #navBar.active {
        display: block;
    }
}