.header{
    height: 1300px;
    width: 100%;
    background-image: url(coral-bleaching.webp);
    background-size: cover;
    background-attachment: fixed;
    background-position:top;
}

.bar{
    display:inline;
    padding-top: 1%;
    padding-right: 1%;
    right: 2%; 
}
.icon{
    height: 32px;
     width: 32px;
}
.menu{
    padding-left:0%;
    padding-top: 0%; 
}
nav a{
    font-size: 35px;
    font-weight: bolder;
    text-decoration: none;
    
}
.nav2{
    font-weight: bolder;
    text-decoration: none;
    animation-name: nav2;
    animation-duration:1s;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
    animation-direction:normal;
}

#myLinks {
display: block;
}
.fixed{
    position: fixed; 
}

.anav{
color: rgb(7, 7, 7);
margin-left: 25px; 
}
nav a:hover{
color: rgb(126, 190, 6);
}
.contactbtn{
border-radius: 15px;
border: 2px solid black;
background-color: rgba(126, 190, 6, 0.76);
padding: 1%;
padding-left: 2%;
padding-right: 2%;
text-decoration: none;
text-align: center;
font-weight: bold;
font-size: larger;
color: #080808;
}
.contactbtn:hover{
background-color: rgb(214, 213, 213);
color: rgb(88, 134, 3);
font-weight: bolder;
font-size: x-large;
}
.ar{
margin-left: 47%;
}
#media{
    float: right;
    display: inline;
    
}
#medialogo{
    display: none;
}
#newform{
    padding: 1%; 
    margin-left: 0%;
    display: inline-block;
}
.hr{
margin-left: 10%;
margin-right: 10%;
}
.hr2{
margin-left: 10%;
margin-right: 40%;
}
 h1{
    color: rgb(234, 235, 236);
    text-align: center;
    font-size: 60px;
    padding-top: 15%;
    transition: font-size 1s;
}
h2{
    text-align: center;
    font-size: 40px;
    padding: 2%;
  }
  h3{
    color: rgb(63, 97, 1);
    font-size:x-large;
    padding: auto;
  }
.newfont{
    font-size: 40px;

}

h4{
     
    transition: all 1s, transform 3s;
}
.newh4{
    font-size: xx-large;
    transform: scaleY(180deg);
}

.p{
    font-size: larger;
    font-weight: bold;
    display: inline;
}
.fontsize{
    text-align: center;
    font-size: medium;
    padding: 1%;
    transition: font-size 1s;
}
.newfontsize{
    font-size: large;
}
.display{
    display:flex;
    text-align:center;
    overflow:auto;
    max-width:100%;
}
.size{
    max-width: 270px;
    max-height: auto;
    transition: all 1s;
    
}
.newsize:hover{
    max-width: 300px;
    max-height: auto;
    
}
u{
    font-size: large;
}
.newsize1:hover{
    font-size: x-large;
    
}
.newsize2:hover{
    font-size: xx-large;
    
}
.margin{
    margin:0 auto;
    max-width: 100%;
}

.float{
    float: right;
    margin: auto;
}
.img-ar{
    float: left;
    width: 300px;
    height: auto;
    display:block;
}

.logosize{
    width: 90px;
    height: auto;
    
}
.logosize-2{
 height: auto;
 animation-name: logo;
 animation-duration:1s;
 animation-timing-function: ease;
 animation-fill-mode: forwards;
 animation-direction:normal;
}
@keyframes logo{
    from{width: 90px;}
    to{width: 75px;}
}


#floatleft1{
    float: left;
    margin-top: 6%;
    margin-left: 4%;
    border:1px solid #0e0d0d;
    padding: 1%;
}
.decoration{
    text-decoration: none;
}
.boxdiv{
    display: flex;
margin-top: 1%;
margin-bottom: 1%;
margin-left: 20%;
margin-right: 20%;
position: relative;

}

.courses{
    background-color:rgba(243, 242, 242, 0.801);
    margin:auto;
    text-align: center;
    max-width: fit-content;

}
.section{
vertical-align: middle;
max-width: 100%;
height: auto;
margin-bottom: 5%;
}
.sectionmargin{
 margin-left: 0%;
 margin-right: 0%;
}
.astyle{
    text-decoration: none;
    color: rgb(0, 0, 0);
    right: 1%;
    bottom: 1%;
    border-radius: 20%;
    border:1px solid #1d1a1a;
    width: 30px;
    height: 20px;
    text-align: center;
    background-color:rgb(126, 190, 6) ;
    position: fixed;
    padding: 0.4%;
}
.back{
    z-index: 1;
}
.link{
    text-decoration: none;
    text-align: center;
    color:rgb(7, 7, 7);
    padding: 0.5%;
    width: 15%;
    height: auto;
    border-color: black;
    border-radius: 13px;
    border-style: groove;
    background-color:rgb(126, 190, 6);
    font-weight: bold;
    font-size: larger;
    display:block;
    margin: auto;
    position: relative;
    padding: 1%;
        
  }
a:hover{
    text-transform: none;
    
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position:absolute;
background-color: #f1f1f1;
min-width: 260px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;

}

/* Dropdown Button */
.dropbtn {
color: rgb(8, 8, 8);
border: none;
}
.pagecolor{
    color: rgb(63, 97, 1);
}
.pagecolor-child{
background-color: #bdbaba;
}

/* Links inside the dropdown */
.dropdown-content a {
color: black;
text-decoration: none;
display: block;
width: 94%;
font-size: xx-large;

}
.dropdown:hover .dropdown-content {
display:block;

}
.dropdownchild {
    position: relative;
    display: block;
    }
    .dropbtn-child {
        color: rgb(8, 8, 8);
        border: none;
        }
    /* Dropdown Content (Hidden by Default) */
    .dropdown-content-child {
    display: none;
    position:absolute;
    margin-left: 100%;
    margin-top: -20%;
    background-color: #f1f1f1;
    min-width: 320px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    
    }
    .dropdown-content-child a{
        color: black;
        text-decoration: none;
        display: block;
        width: 94%;
        font-size: xx-large;
        
        }
        .dropdownchild:hover .dropdown-content-child {
        display:block;
        
        }

.navbar {
background-color: #d8d6d6;
position: fixed;
top: 0;
width: 99.4%;
height: 110px;
transition: height 1s;
z-index: 1;

}
/* arrows down, up, left, and right*/
.arrow {
border: solid rgb(14, 13, 13);
border-width: 0 2px 2px 0;
display: inline-block;
padding: 2.5px;
margin: 1px;
margin-bottom: 3px;
}
.arrowtop {
border: solid rgb(10, 10, 10);
border-width: 0 2px 2px 0;
display: inline-block;
padding: 2.5px;
margin: 1px;
margin-bottom: 3px;
}
.right-arrow {
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    margin: 0px;
    margin-bottom: 0px;
  }
.down {
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
.up {
transform: rotate(-135deg);
-webkit-transform: rotate(-135deg);
padding: 3.5px;
margin-top: 6px;
border-width: 0 3px 3px 0;
}
.left {
transform: rotate(135deg);
-webkit-transform: rotate(135deg);
margin: 0px;
    margin-bottom: 0px;
}

.test{
height: 90px;
}

.navbar a{
display: inline-block;
padding: 7px 8px ;
}


/* Hide the links inside the navigation menu (except for logo/home) */

.color{
color: #f1f1f1;
}
.color:hover{
color: aqua;
position: relative;
}
.trip{
    display: inline-block;
    background-color: #ffffff;
    border: 1px black solid;
    padding: 1.5%;
    max-width: 150px;
    max-height: 65px;
    text-align: center;
    text-size-adjust:initial;
    position: relative;
    margin-left: 8%;
    
    }

.tripde{
margin-left: 45%;
display: inline-block;
background-color: #f1f1f1;
border: 1px black solid;
padding: 1.5%;
max-width: 120px;
max-height: 70px;
text-align: center;
text-size-adjust:initial;

}
.sara{
 margin-bottom: 0;
 text-align:center;
animation: saraani 7s infinite, transform 5s;
}
@keyframes nav2{
form{ font-size: 35px;}
to{ font-size: xx-large;}
}

.sara1{
text-align: center;
display: inline-block;
}
.padi{
max-width: 120px;
max-height: 95px;
text-align:center;
animation: saraani 6s infinite, transform 5s;
}

.right{
margin-left: 44%;
margin-top: -15%;
font-weight: bold;
font-size: large;
float: left;
}
.divtrip{
max-width: 250px;
position: relative;
margin-left: 45%;
}

#style{
font-size: large;
font-weight: bold;
}
.divmenu {
width: 25px;
height: 3px;
background-color: rgb(8, 8, 8);
margin: 4px;
}
.divmenu1 {
width: 19px;
height: 3px;
background-color: rgb(8, 8, 8);
margin: 4px;

}
.divmenu2 {
width: 22px;
height: 3px;
background-color: rgb(8, 8, 8);
margin: 4px;

}
.divmenudisply{
display: none;
}
span{
color: antiquewhite;
}
.img{
width: 300px;
height: auto;
display:block;
margin: 2%;
margin-top: 0;
float: right;
transition: all 1s, transform 1s;
}

.newdiv{
display: flex;
margin-left: 3%;
}  
.width{
width: 100%;
max-width: 100%;
}
.textaligen{
text-align: center;
padding: 2%;
}
#padip{
text-transform: none;
color: #080808;
font-family:'Times New Roman', Times, serif ;
}
.texth6{
    text-align: center;
    padding: 0%;   
}
    
    .floatbutton{
        float: right;
        width: fit-content;
        height:fit-content;
        padding: 3%;
        margin-right: 19%;
        margin-top: 10%;
        display: inline;
        background-color: rgb(126, 190, 6);
        
    }
    .floatbutton-de{
        width: fit-content;
        height:fit-content;
        padding: 3%;
        margin-top: 7%;
        margin-left:19%;
        display: inline;
        background-color: rgb(126, 190, 6);
        
    }
    .h3normal{
        font-size: larger;
    }
      article{
        margin-left: 25%;
        margin-right: 25%;
        margin-top: 5%;
        margin-bottom: 5%;
      }
      .divhead{
        text-align: center;
        padding-top: 15%;
        
    }
    .backh1{
        background-color: #17161665;
        padding: 1%;
        max-width: 50%;
        margin-left: 23%;
       }
       body{
        font-family: Arial, Helvetica, sans-serif;
       }
       body p{
        font-size: x-large;
       }
       body li{
        font-size: x-large;
       }
       #p-normal{
        font-size: unset;
       }
/* New footer style*/
.foot{
display:inline;   
}
.footer{
  margin-left: 20%;
  display: inline-block;
  
}
.font{
  font-weight: bold;
  font-size: large;
}
.marginbtn{
  margin: 5px;
}
.hr3{
  margin-left: 20%;
  margin-right: 20%;
}
.text1{
  text-align: left;
  margin-left: 20%;
  padding-bottom: 2%;
}
.textfoot{
display: inline;
padding-left: 1%;
padding-top: 0;
margin-left: 12%; 
}
footer{
background-color: rgba(126, 190, 6, 0.76);
margin-top: 1%;
}
footer a{
color: black;
text-decoration: none;
}
footer a:hover{
color: rgb(235, 231, 231);
}
.gridfoot{
display: inline;
float: right;
padding-top: 2%;
text-align: start;
margin-right: 20%;
font-size: medium;
font-weight: bold;
}
.grid1{
display: grid;   
}
#topbtn{
display: none;
}
.marginf{
    font-size: large;
}
.about{
    margin-right: 10%;
    margin-left: 10%;
  }
  .fontsize-about{
    text-align: center;
    font-size: xx-large;
    padding: 1%;
  
  }
  .fit{
    display:contents;
  }
  .pcolor{
    color: rgb(133, 111, 111);
  }
  .section-advanced{
    padding: 4%;
  }
  .img-basic{
    width: auto;
    height: 400px;
    margin: auto; 
    display:block 
  }
  .tablestyle{
    text-align: center;
    margin: auto;
    width: 80%
  }
  th{
    padding: 1%;
    color: #0319e0;
   }
  td{
    padding: 1%;
  }
  .bigth{
    font-size: x-large;
    color: #0a0a0a;
  }
  .larger{
    font-size: larger;
    font-weight: bold;
    color: rgb(210, 66, 30);
  }
  .difference{
    color: rgb(10, 10, 10);
  }
  #color4{
    color: rgb(46, 3, 240);
    text-decoration: none;
   }  
   #media-2{
    float: right;
    display: inline;
    padding: 2%;
    width: 500px;
    height:auto;
    
}#media-2-ar{
    float: left;
    display: inline;
    padding: 2%;
    width: 500px;
    height:auto;
}
@media screen and (max-width: 1920px){
    
.header{
    height: 950px;        
}
.textfoot{
    margin-left: 5%; 
    font-size: larger;
  }
#FAQ{
    font-size: xx-large;
    padding-left: 5%;
    max-width: 40%;
}
        nav a{
            font-size: 27px;
        }
        .dropdown-content a {
            font-size: x-large;
            }
        @keyframes nav2{
            form{ font-size: 27px;}
            to{ font-size: x-large;}
          }
        .navbar{
            width: 99.2%;
            }
            .right{
                padding-right: 25%;
                padding-left: 25%;
                font-weight: bold;
                font-size: large;
                
            }
            .right{
                margin-left: 18%;
                margin-top: -20%;
                font-weight: bold;
                font-size: large;
                float: left;
            }
            .boxdiv{
                margin-left: 16%;
                margin-right: 16%;
            }
            
    }
@media screen and (max-width: 1366px){
    #media-2{
        width: 350px;
    }
    #media-2-ar{
        width: 350px;
    }
    body p{
        font-size: larger;
       }
       body li{
        font-size: larger;
       }
    .backh1{
        max-width: 80%;
        margin-left: 10%;
        margin-top: 15%;
        }
    .link{
        width: 20%;
        font-size: larger;
        padding: 2%;
       
      }
.header{
    height: 650px;   
    background-attachment: unset;     
}
.floatbutton-de{ 
    margin-top: 4%;
    margin-left: 25%;  
}

/* New footer style*/

  .text1{
    text-align: center;
    margin: auto;
    padding-bottom: 10%;
}
.textfoot{
    margin-left: 1%; 
  }
#FAQ{
    font-size: xx-large;
    padding-left: 5%;
    max-width: 60%;
}

.right{
    margin-left: 18%;
    margin-top: -25%;
    font-weight: bold;
    font-size: large;
    float: left;
}

nav a{
    font-size: larger;
}
.dropdown-content a {
    font-size: larger;
    }
@keyframes nav2{
    form{ font-size: larger;}
    to{ font-size: large;}
  }
.anav{
    margin-left: 15px; 
}
        .boxdiv{
            margin-left: 5%;
            margin-right: 5%;
        }
        .floatbutton{
            float: right;
            width: fit-content;
            height:fit-content;
            padding: 3%;
            margin-right: 25%;
            margin-top: 4%;
        }
        .navbar{
            width: 99%;
            }
        }
@media screen and (max-width: 900px){
    #media-2{
        width: 250px;
    }
    #media-2-ar{
        width: 250px;
    }
    article{
        margin: 5%;
      }
    .header{
        background-image: url(coral-bleaching-small.webp);
        background-size: cover;
    }
    .backh1{
        max-width: 80%;
        margin-left: 10%;
        margin-top: 15%;
        }
    .link{
        width: 25%;
        font-size: larger;
       
      }
.divtrip{
    margin-left: 40%;
}

.textfoot{
    margin: auto;
     display: block;
  }

#FAQ{
    font-size: xx-large;
    padding-left: 5%;
    max-width: 60%;
}
.right{
    margin-left: 15%;
}

.anav{
    margin-left: 0px; 
}
            .boxdiv{
                display: block;
            }
            .floatbutton{
            float: right;
            width: fit-content;
            height:fit-content;
            padding: 3%;
            margin-right: 18%;
            margin-top: 8%;
        }
        .floatbutton-de{ 
            margin-top: 4%;
            margin-left: 18%;  
        }
        .space{
            margin: 2%;
        }
        .navbar{
            width: 98%;
            }
            nav a{
                font-size: medium;
            }
            .dropdown-content a {
                font-size: medium;
                }
            @keyframes nav2{
                form{ font-size: medium;}
                to{ font-size: medium;}
              }
        }
@media screen and (max-width: 600px) {
    body p{
        font-size: large;
       }
    th{
    padding: 0%;
    font-size: x-small;
    
   }
  td{
    padding: 0%;
    font-size: x-small;
  }
  .bigth{
    font-size: x-small;
  }
  .larger{
    font-size: x-small;
    
  }
    .link{
        width: 35%;
        font-size: large;
      }
/* New footer style*/
.divtrip{
    margin-left: 32%;
    display: block;
}
.text1{
    text-align: center;
    margin: auto;
    padding-bottom: 10%;
}
.gridfoot{
    text-align: center;
    float: none;
    margin: auto;  
  }
  .footer{
    text-align: center;
    margin-left: 26%;
}

h1{
    font-size: xx-large; 
}
.contactbtn{
    border-radius: 0px;
    padding: 3%;
   
    
}
nav a{
    font-size: large;
}
@keyframes nav2{
    form{ font-size: large;}
    to{ font-size: large;}
  }
.logosize{
    width: 60px;
    height: auto;
}
@keyframes logo{
    from{width: 60px;}
    to{width: 60px;}
}
    #media{
        display: none;

    }
    #myLinks{
       display: none;   
    }
    
    .menu{
        background-color: #d8d6d6;
        border: 1px solid rgb(10, 10, 10);
        display: inline-block;
        width: 92%;
        height: 350px;
        margin-top: 16%;
        padding-bottom: 6%;
        padding-left: 4%;
      
    }
    form{
        width: auto; height: auto;
        display: inline-block;
    }
    #formnav{
        margin-right: 9%;
        padding-top: 3%;
        
    }
  
#floatleft{
display: none;
}
#medialogo{
display: block;
float: right;
}
.navbar a{

display: block;
padding: 12px 4px ;

}
.navbar-ar a{
    padding: 8px 4px ;
    
    }
.navbar{
width: 97%;
height: 85px;
}
.test{
height: 85px;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);

}

/* Links inside the dropdown */
.dropdown-content a {
color: black;
text-decoration: none;
display: inline-block;
font-size: large;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display: block;
}
.dropdown-content-child {
    display: none;
    position:absolute;
    margin-left: 100%;
    margin-top: -20%;
    background-color: #f1f1f1;
    min-width: 200px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    z-index: 1;
    
    }
.floatbutton{
width: fit-content;
height:fit-content;
padding: 3%;
margin-right: 12%;
margin-top: 4%;

}


.tripde{
margin-left: 30%;
max-width: 125px;
max-height: 75px;

}
.right{
display: none;

}
#newform{
display: none;
}
.sara1{
margin-top: 1%;
}

.fixed1{
position: fixed;
z-index: 1;
}

.boxdiv{
display: block;
margin-top: 1%;
margin-bottom: 1%;
margin-left: auto;
margin-right: auto;
position: relative;
}


.divmenudisply{
display: block;
margin-top: 3px;
}
.courses{
margin-top: 1%;
}
.newdiv{
display:flex;
margin: 0;
}
.img{
width: 60%;
height: auto;
margin-left:20% ;
float: left;
}
.img-ar{
    width: 60%;
    height: auto;
    margin-left:1% ;
    float: left;
    }    
 
.fontsize{
font-size: large;
}


.marginf{
padding: 3%;
}
.hr2{
margin-left: 10%;
margin-right: 10%;
}
.backh1{
    max-width: 80%;
    margin-left: 10%;
    margin-top: 45%;
    }

}

/* On smaller screens, decrease text size */
@media screen and (max-width: 470px) {
.navbar{
    width: 96%;
    }
.divtrip{
    margin-left: 25%;
    display: block;
}
  .footer{
    text-align: center;
    margin-left: 20%;
}

}