.header{
                background-image: url(blue-hole.webp);
                height: 700px;
                width: 100%;
                background-size: cover;
                background-position: center;
            }
            #nosection{
                padding: 2%;
                margin-left: 0%;
                margin-right: 0%;
                background-color: #ffffff;
            }
            .divhole{
                display: inline-block;
                max-width: 45%;
                height: auto;
                margin-left: 1%;
                margin-bottom: 2%;
            }
            .pic{
                width: 200px;
                height: auto;
                cursor:zoom-in;
                
            }
            @keyframes animatezoom{from{transform:scale(0)} to{transform:scale(1)}}
            .w3-modal-content{
                margin:auto;
                background-color:#fff;
                position:relative;
                padding:0;
                outline:0;
                width:600px;
            }
            .w3-animate-zoom {
                animation:animatezoom 0.6s;
            }
            .w3-modal{
                z-index:3;
                display:none;
                padding-top:40px;
                position:fixed;left:0;
                top:0;width:100%;
                height:100%;
                overflow:auto;
                background-color:rgb(0,0,0);
                background-color:rgba(0,0,0,0.4);
                
            }
            .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;
            }
            .float-ar{
                float: left;
                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: 2%;
                    margin-right: 2%;
                    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: 100%;
                height: auto;
              }
              th{
                padding: 1%;
                color: #0319e0;
               }
              td{
                padding: 1%;
              }
              .bigth{
                font-size: large;
                color: #0a0a0a;
              }
                   
            @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){
                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){
                .w3-modal-content{
                    width:900px;
                }
                article{
                    margin: 5%;
                  }
                .header{
                    background-image: url(blue-hole-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) {
                .w3-modal-content{
                    margin:auto;
                    max-width:400px!important;
                    max-height: auto!important;
                    
                }
                .divhole{
                    display: inline-block;
                    max-width: 45%;
                    height: auto;
                    margin: auto;
                    
                }
                .pic{
                    max-width: 175px;
                    height: auto;
                    cursor:zoom-in;
                }
                .w3-modal{
                    padding-top:30px;
                }
                body p{
                    font-size: large;
                   }
                th{
                    padding: 0%;
                    font-size: x-small;
                    
                   }
                  td{
                    padding: 0%;
                    font-size: x-small;
                  }
                  .bigth{
                    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%;
            }
            
            
            }