@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700;800;900&display=swap');
*
{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: 'Poppins', sans-serif;
        scroll-behavior: smooth;
}

@font-face {
        font-family: Baha;
        src: url(Bahamas.ttf);
}

/* width */
::-webkit-scrollbar {
        width: 10px;
      }
      
      /* Track */
      ::-webkit-scrollbar-track {
        border-radius: 1.5px;
      }
       
      /* Handle */
      ::-webkit-scrollbar-thumb {
        background: #ff9100; 
        border-radius: 1.5px;
      }
      
      /* Handle on hover */
      ::-webkit-scrollbar-thumb:hover {
        background: #e78403; 
      }

body{
        background: #111;
}
.galeria{
        width: 80%;
        margin: auto;
        list-style: none;
        box-sizing: border-box;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
    }

    .galeria li{
        margin: auto;
        margin-top: 7%;
        padding: 1px;
    }

    .galeria img{
        width: 150px;
        height: 170px;
    }
    
    .vid2{
        border: solid white 3px;
        border-radius: 10px;
    }

    #RG{
        color: #ff9100;
        text-decoration: none;
        font-family: 'Poppins';
    }

    #RG2{
        color: #ff9100;
        text-decoration: none;
        font-family: 'Poppins';
    }

    .Blogo{
        color: #ff9100;
        font-size: 4em;
        font-family: Baha;
        display: inline-block;
        margin-top: 50px;
}

.aaa{
        display: inline-block;
        color: #a8a7a7;
        font-size: 4em;
        font-family: Baha;
}



/*Menú*/

.navigation{
        position: fixed;
        top: 0px;
        left: 0;
        width: 60px;
        height: 100%;
        transition: 0.5s;
        overflow: hidden;
        background: rgb(20 20 20 / 0.2);
        z-index: 1;
}

.navigation:hover,.navigation.active{
        width: 300px;
        background: rgb(20 20 20 / 1);
}

.navigation ul{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        color: #fff;
}

.navigation ul li{
        position: relative;
        width: 100%;
        list-style: none;
}

.navigation ul li:hover{
        background: rgb(0 0 0 / 0.7);
}

.navigation ul li a{
        position: relative;
        display: none;
        width: 100%;
        display: flex;
        text-decoration: none;
        color: #fff;
}

.navigation ul li a:hover .icon{
        color: #a8a7a7;
}

.navigation ul li a .icon{
        position: relative;
        display: block;
        min-width: 60px;
        height: 60px;
        line-height: 60px;
        text-align: center;
        color: #ff9100;
}

.navigation ul li a .icon .fa{
        font-size: 24px;
}

.navigation ul li a .icon .title{
        position: relative;
        display: block;
        padding: 0 10px;
        height: 60px;
        line-height: 60px;
        text-align: start;
        white-space: nowrap;
}

.toggle{
        position: absolute;
        top: 60px;
        right: 5px;
        width: 60px;
        height: 60px;
        cursor: pointer;
        background: rgb(20 20 20 / 0.2);
}

.toggle:before{
        content: '\f0c9';
        font-family: fontAwesome;
        position: absolute;
        width: 100%;
        height: 100%;
        line-height: 60px;
        text-align: center;
        font-size: 24px;
        color: #fff;
        color: #ff9100;
}

.toggle.active:before{
        content: '\f00d';
}

@media (max-width: 767px){
        .navigation{
                left: -60px;
        }
        .navigation.active{
                left: 0px;
                width: 82.5%;
        }
}

@media (max-width: 767px){

        .Blogo{
                color: #ff9100;
                font-size: 3em;
                font-family: Baha;
                display: inline-block;
                margin-top: 50px;
        }
        
        .aaa{
                display: inline-block;
                color: #a8a7a7;
                font-size: 3em;
                font-family: Baha;
        }
        
        .galeria{
                width: 80%;
                margin: auto;
                list-style: none;
                box-sizing: border-box;
                display: flex;
                flex-wrap: wrap;
                justify-content: space-around;
            }
        
            .galeria li{
                margin: auto;
                margin-top: 7%;
            }
        
            .galeria img{
                width: 150px;
                height: 170px;
            }
            
            .vid2{
                border: solid white 3px;
                border-radius: 10px;
            }

            section{
                padding: 40px;
        }
        .banner .content h2{
                font-size: 2.5em;
        }

        .banner .content .Blogo{
                display: inline-block;
        }

        .banner .content .aa{
                display: block;
        }

        .banner .content p{
                font-size: 1em;
        }
        .about{
                flex-direction: column;
        }
        .about .content, .about .imgBx{
                min-width: 100%;
                width: 100%;
                text-align: center;
                padding-right: 0px;
        }
        .about .imgBx{
                min-height: 250px;
        }
        .btn{
                margin-bottom: 30px;
        }
        .destination .destinationList .box{
                position: relative;
                max-width: 350px;
                min-width: initial;
                width: 350px;
                height: 400px;
        }
        .destination .destinationList .box .imgBx{
                height: 320px;
        }
        .footer .sci li a img{
                max-width: 30px;
        }
        .about .contentBx {
                min-width: 75%;
                width: 50%;
                text-align: center;
                padding-right: 0px;
        }
        
}