@import url('https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400..700&family=Imperial+Script&family=Tilt+Prism:XROT,YROT@19,22&display=swap');

:root {
    --mainColor: rgb(109, 109, 197, .7);
    --small: rgb(153, 153, 206);
    --mainTitle: rgb(85, 85, 197);
    --subTitle: #999;
    scroll-behavior: smooth;
    overflow-x: hidden;
}

.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding-top: 5px;
    z-index: 10;
}

.container {
    background: rgb(109, 109, 197, .4);
    border-radius: 6px;
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.2), 0 3px 12px 0 rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(6.5px);
    -webkit-backdrop-filter: blur(6.5px);
    
    width: 60%;
    height: 100%;
    display: flex;
    justify-content: space-between;

    padding: 10px;
    padding-top: 25px;
    border-bottom: 1px solid white;

    margin: auto;
    color: white;
    /* background-color: transparent; */
}

.icon {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 32 32'%3E%3Cg fill='none'%3E%3Cpath fill='url(%23f10id9)' d='M25.452 19.487a1.003 1.003 0 0 1 0-1.418l1.86-1.86a1.003 1.003 0 1 1 1.418 1.42l-1.86 1.858a1.003 1.003 0 0 1-1.418 0'/%3E%3Cpath fill='url(%23f10id0)' d='M25.452 19.487a1.003 1.003 0 0 1 0-1.418l1.86-1.86a1.003 1.003 0 1 1 1.418 1.42l-1.86 1.858a1.003 1.003 0 0 1-1.418 0'/%3E%3Cpath fill='url(%23f10id1)' d='M25.452 19.487a1.003 1.003 0 0 1 0-1.418l1.86-1.86a1.003 1.003 0 1 1 1.418 1.42l-1.86 1.858a1.003 1.003 0 0 1-1.418 0'/%3E%3Cpath fill='url(%23f10ida)' d='M12.46 6.5a1.003 1.003 0 0 1 0-1.419l1.859-1.859a1.003 1.003 0 0 1 1.418 1.419L13.88 6.499a1.003 1.003 0 0 1-1.419 0'/%3E%3Cpath fill='url(%23f10id2)' d='M12.46 6.5a1.003 1.003 0 0 1 0-1.419l1.859-1.859a1.003 1.003 0 0 1 1.418 1.419L13.88 6.499a1.003 1.003 0 0 1-1.419 0'/%3E%3Cpath fill='url(%23f10id3)' d='M12.46 6.5a1.003 1.003 0 0 1 0-1.419l1.859-1.859a1.003 1.003 0 0 1 1.418 1.419L13.88 6.499a1.003 1.003 0 0 1-1.419 0'/%3E%3Cg filter='url(%23f10idh)'%3E%3Cpath fill='%234282da' d='M17.267 12.58L6.964 6.93a1.924 1.924 0 0 1 1.348-3.563l13.002 2.93z'/%3E%3Cpath fill='url(%23f10id4)' d='M17.267 12.58L6.964 6.93a1.924 1.924 0 0 1 1.348-3.563l13.002 2.93z'/%3E%3C/g%3E%3Cg filter='url(%23f10idi)'%3E%3Cpath fill='%234282da' d='m19.376 14.69l5.648 10.301a1.924 1.924 0 0 0 3.564-1.347l-2.93-13.002z'/%3E%3Cpath fill='url(%23f10id5)' d='m19.376 14.69l5.648 10.301a1.924 1.924 0 0 0 3.564-1.347l-2.93-13.002z'/%3E%3C/g%3E%3Cg filter='url(%23f10idj)'%3E%3Cpath fill='url(%23f10id6)' d='M8.047 18.703a.8.8 0 0 0 .805-.23l13.87-15.116a4.19 4.19 0 1 1 5.912 5.93L13.4 23.18a.8.8 0 0 0-.229.817l1.305 4.451a1.067 1.067 0 0 1-1.778 1.055L2.405 19.224a1.17 1.17 0 0 1-.064-1.585a.877.877 0 0 1 .904-.277z'/%3E%3C/g%3E%3Cpath fill='url(%23f10id7)' d='M8.047 18.703a.8.8 0 0 0 .805-.23l13.87-15.116a4.19 4.19 0 1 1 5.912 5.93L13.4 23.18a.8.8 0 0 0-.229.817l1.305 4.451a1.067 1.067 0 0 1-1.778 1.055L2.405 19.224a1.17 1.17 0 0 1-.064-1.585a.877.877 0 0 1 .904-.277z'/%3E%3Cpath fill='url(%23f10idb)' d='M8.047 18.703a.8.8 0 0 0 .805-.23l13.87-15.116a4.19 4.19 0 1 1 5.912 5.93L13.4 23.18a.8.8 0 0 0-.229.817l1.305 4.451a1.067 1.067 0 0 1-1.778 1.055L2.405 19.224a1.17 1.17 0 0 1-.064-1.585a.877.877 0 0 1 .904-.277z'/%3E%3Cpath fill='url(%23f10idc)' d='M8.047 18.703a.8.8 0 0 0 .805-.23l13.87-15.116a4.19 4.19 0 1 1 5.912 5.93L13.4 23.18a.8.8 0 0 0-.229.817l1.305 4.451a1.067 1.067 0 0 1-1.778 1.055L2.405 19.224a1.17 1.17 0 0 1-.064-1.585a.877.877 0 0 1 .904-.277z'/%3E%3Cpath fill='url(%23f10idd)' d='M8.047 18.703a.8.8 0 0 0 .805-.23l13.87-15.116a4.19 4.19 0 1 1 5.912 5.93L13.4 23.18a.8.8 0 0 0-.229.817l1.305 4.451a1.067 1.067 0 0 1-1.778 1.055L2.405 19.224a1.17 1.17 0 0 1-.064-1.585a.877.877 0 0 1 .904-.277z'/%3E%3Cpath fill='url(%23f10ide)' d='M8.047 18.703a.8.8 0 0 0 .805-.23l13.87-15.116a4.19 4.19 0 1 1 5.912 5.93L13.4 23.18a.8.8 0 0 0-.229.817l1.305 4.451a1.067 1.067 0 0 1-1.778 1.055L2.405 19.224a1.17 1.17 0 0 1-.064-1.585a.877.877 0 0 1 .904-.277z'/%3E%3Cg filter='url(%23f10idk)'%3E%3Crect width='3.844' height='1.096' x='25.644' y='3.571' fill='%2348dbff' rx='.548' transform='rotate(45 25.644 3.57)'/%3E%3C/g%3E%3Crect width='7.51' height='2.344' x='4.612' y='25.639' fill='url(%23f10idf)' rx='1.172' transform='rotate(-45 4.612 25.64)'/%3E%3Crect width='7.51' height='2.344' x='4.612' y='25.639' fill='url(%23f10id8)' rx='1.172' transform='rotate(-45 4.612 25.64)'/%3E%3Crect width='7.51' height='2.344' x='4.612' y='25.639' fill='url(%23f10idg)' rx='1.172' transform='rotate(-45 4.612 25.64)'/%3E%3Cg filter='url(%23f10idl)'%3E%3Cpath stroke='%23b3adb8' stroke-linecap='round' stroke-width='0.5' d='m3.392 18.252l5.094 1.562'/%3E%3C/g%3E%3Cg filter='url(%23f10idm)'%3E%3Cpath stroke='%23d1c7db' stroke-linecap='round' stroke-width='0.5' d='m12.142 23.314l1.719 5.313'/%3E%3C/g%3E%3Cdefs%3E%3ClinearGradient id='f10id0' x1='28.493' x2='27.986' y1='17.997' y2='17.533' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%237c758f'/%3E%3Cstop offset='1' stop-color='%237c758f' stop-opacity='0'/%3E%3C/linearGradient%3E%3ClinearGradient id='f10id1' x1='29.023' x2='28.29' y1='16.114' y2='16.895' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.205' stop-color='%23b3b2b4'/%3E%3Cstop offset='1' stop-color='%23b3b2b4' stop-opacity='0'/%3E%3C/linearGradient%3E%3ClinearGradient id='f10id2' x1='15.501' x2='15.259' y1='5.01' y2='4.767' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%237c758f'/%3E%3Cstop offset='1' stop-color='%237c758f' stop-opacity='0'/%3E%3C/linearGradient%3E%3ClinearGradient id='f10id3' x1='16.031' x2='15.298' y1='3.127' y2='3.908' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.205' stop-color='%23b3b2b4'/%3E%3Cstop offset='1' stop-color='%23b3b2b4' stop-opacity='0'/%3E%3C/linearGradient%3E%3ClinearGradient id='f10id4' x1='18.017' x2='16.97' y1='9.752' y2='8.705' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.104' stop-color='%23256198'/%3E%3Cstop offset='1' stop-color='%23256198' stop-opacity='0'/%3E%3C/linearGradient%3E%3ClinearGradient id='f10id5' x1='22.673' x2='23.361' y1='13.908' y2='14.658' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23256198'/%3E%3Cstop offset='1' stop-color='%23256198' stop-opacity='0'/%3E%3C/linearGradient%3E%3ClinearGradient id='f10id6' x1='22.943' x2='5.184' y1='8.848' y2='25.886' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23cbbcd8'/%3E%3Cstop offset='1' stop-color='%23b1a1d1'/%3E%3C/linearGradient%3E%3ClinearGradient id='f10id7' x1='7.215' x2='8.296' y1='24.51' y2='23.428' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%239871c0'/%3E%3Cstop offset='1' stop-color='%239871c0' stop-opacity='0'/%3E%3C/linearGradient%3E%3ClinearGradient id='f10id8' x1='8.365' x2='8.432' y1='25.221' y2='26.061' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%233f618f'/%3E%3Cstop offset='1' stop-color='%233f618f' stop-opacity='0'/%3E%3C/linearGradient%3E%3CradialGradient id='f10id9' cx='0' cy='0' r='1' gradientTransform='rotate(135 11.074 14.31)scale(3.41304 1.29948)' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.233' stop-color='%2386848f'/%3E%3Cstop offset='1' stop-color='%235a5c5e'/%3E%3C/radialGradient%3E%3CradialGradient id='f10ida' cx='0' cy='0' r='1' gradientTransform='rotate(135 7.268 5.126)scale(3.41304 1.57899)' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.233' stop-color='%2386848f'/%3E%3Cstop offset='1' stop-color='%235a5c5e'/%3E%3C/radialGradient%3E%3CradialGradient id='f10idb' cx='0' cy='0' r='1' gradientTransform='matrix(.76672 .2137 -.50914 1.82667 2.062 17.902)' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%2376707b'/%3E%3Cstop offset='1' stop-color='%2376707b' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='f10idc' cx='0' cy='0' r='1' gradientTransform='rotate(153.435 1.04 12.404)scale(3.77336 1.66021)' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.129' stop-color='%235f677b'/%3E%3Cstop offset='1' stop-color='%235f677b' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='f10idd' cx='0' cy='0' r='1' gradientTransform='matrix(.125 -4.875 1.09383 .02805 8.986 21.096)' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%237d7d8a'/%3E%3Cstop offset='1' stop-color='%237d7d8a' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='f10ide' cx='0' cy='0' r='1' gradientTransform='rotate(143.13 14.591 6.827)scale(6.875 6.64399)' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.175' stop-color='%23edebee'/%3E%3Cstop offset='1' stop-color='%23edebee' stop-opacity='0'/%3E%3C/radialGradient%3E%3CradialGradient id='f10idf' cx='0' cy='0' r='1' gradientTransform='matrix(-5.54637 .02207 -.01614 -4.05524 11.028 26.779)' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%234dc0ff'/%3E%3Cstop offset='1' stop-color='%234763e6'/%3E%3C/radialGradient%3E%3CradialGradient id='f10idg' cx='0' cy='0' r='1' gradientTransform='matrix(.98605 -.9397 2.10297 2.20667 4.725 28.096)' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23847fff'/%3E%3Cstop offset='1' stop-color='%23847fff' stop-opacity='0'/%3E%3C/radialGradient%3E%3Cfilter id='f10idh' width='15.648' height='10.359' x='5.965' y='2.721' color-interpolation-filters='sRGB' filterUnits='userSpaceOnUse'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeColorMatrix in='SourceAlpha' result='hardAlpha' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'/%3E%3CfeOffset dy='.5'/%3E%3CfeGaussianBlur stdDeviation='.375'/%3E%3CfeComposite in2='hardAlpha' k2='-1' k3='1' operator='arithmetic'/%3E%3CfeColorMatrix values='0 0 0 0 0.258824 0 0 0 0 0.619608 0 0 0 0 0.901961 0 0 0 1 0'/%3E%3CfeBlend in2='shape' result='effect1_innerShadow_18_12514'/%3E%3CfeColorMatrix in='SourceAlpha' result='hardAlpha' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'/%3E%3CfeOffset dx='.3' dy='-.6'/%3E%3CfeGaussianBlur stdDeviation='.375'/%3E%3CfeComposite in2='hardAlpha' k2='-1' k3='1' operator='arithmetic'/%3E%3CfeColorMatrix values='0 0 0 0 0.270588 0 0 0 0 0.352941 0 0 0 0 0.752941 0 0 0 1 0'/%3E%3CfeBlend in2='effect1_innerShadow_18_12514' result='effect2_innerShadow_18_12514'/%3E%3C/filter%3E%3Cfilter id='f10idi' width='9.559' height='16.948' x='19.376' y='10.042' color-interpolation-filters='sRGB' filterUnits='userSpaceOnUse'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeColorMatrix in='SourceAlpha' result='hardAlpha' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'/%3E%3CfeOffset dy='1'/%3E%3CfeGaussianBlur stdDeviation='.625'/%3E%3CfeComposite in2='hardAlpha' k2='-1' k3='1' operator='arithmetic'/%3E%3CfeColorMatrix values='0 0 0 0 0.34902 0 0 0 0 0.784314 0 0 0 0 1 0 0 0 1 0'/%3E%3CfeBlend in2='shape' result='effect1_innerShadow_18_12514'/%3E%3CfeColorMatrix in='SourceAlpha' result='hardAlpha' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'/%3E%3CfeOffset dx='.3' dy='-.6'/%3E%3CfeGaussianBlur stdDeviation='.375'/%3E%3CfeComposite in2='hardAlpha' k2='-1' k3='1' operator='arithmetic'/%3E%3CfeColorMatrix values='0 0 0 0 0.270588 0 0 0 0 0.352941 0 0 0 0 0.752941 0 0 0 1 0'/%3E%3CfeBlend in2='effect1_innerShadow_18_12514' result='effect2_innerShadow_18_12514'/%3E%3C/filter%3E%3Cfilter id='f10idj' width='29.938' height='28.816' x='1.062' y='1.5' color-interpolation-filters='sRGB' filterUnits='userSpaceOnUse'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeColorMatrix in='SourceAlpha' result='hardAlpha' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'/%3E%3CfeOffset dx='1' dy='.5'/%3E%3CfeGaussianBlur stdDeviation='1'/%3E%3CfeComposite in2='hardAlpha' k2='-1' k3='1' operator='arithmetic'/%3E%3CfeColorMatrix values='0 0 0 0 0.486275 0 0 0 0 0.482353 0 0 0 0 0.490196 0 0 0 1 0'/%3E%3CfeBlend in2='shape' result='effect1_innerShadow_18_12514'/%3E%3CfeColorMatrix in='SourceAlpha' result='hardAlpha' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'/%3E%3CfeOffset dx='-1' dy='-.5'/%3E%3CfeGaussianBlur stdDeviation='1'/%3E%3CfeComposite in2='hardAlpha' k2='-1' k3='1' operator='arithmetic'/%3E%3CfeColorMatrix values='0 0 0 0 0.760784 0 0 0 0 0.639216 0 0 0 0 0.858824 0 0 0 1 0'/%3E%3CfeBlend in2='effect1_innerShadow_18_12514' result='effect2_innerShadow_18_12514'/%3E%3C/filter%3E%3Cfilter id='f10idk' width='3.439' height='3.439' x='24.696' y='3.798' color-interpolation-filters='sRGB' filterUnits='userSpaceOnUse'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeColorMatrix in='SourceAlpha' result='hardAlpha' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0'/%3E%3CfeOffset dx='-.4' dy='.4'/%3E%3CfeGaussianBlur stdDeviation='.2'/%3E%3CfeComposite in2='hardAlpha' k2='-1' k3='1' operator='arithmetic'/%3E%3CfeColorMatrix values='0 0 0 0 0.0823529 0 0 0 0 0.447059 0 0 0 0 0.792157 0 0 0 1 0'/%3E%3CfeBlend in2='shape' result='effect1_innerShadow_18_12514'/%3E%3C/filter%3E%3Cfilter id='f10idl' width='7.594' height='4.063' x='2.142' y='17.002' color-interpolation-filters='sRGB' filterUnits='userSpaceOnUse'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeGaussianBlur result='effect1_foregroundBlur_18_12514' stdDeviation='.5'/%3E%3C/filter%3E%3Cfilter id='f10idm' width='4.219' height='7.813' x='10.892' y='22.064' color-interpolation-filters='sRGB' filterUnits='userSpaceOnUse'%3E%3CfeFlood flood-opacity='0' result='BackgroundImageFix'/%3E%3CfeBlend in='SourceGraphic' in2='BackgroundImageFix' result='shape'/%3E%3CfeGaussianBlur result='effect1_foregroundBlur_18_12514' stdDeviation='.5'/%3E%3C/filter%3E%3C/defs%3E%3C/g%3E%3C/svg%3E");
    background-size: cover;

    width: 2.5rem;
    height: 2.5rem;
    
    position: relative;
    top: -10px;
    margin-right: 10px;
}

.logo {
    font-family: "Dancing Script", cursive;
    font-weight: 900;
    font-optical-sizing: auto;
    font-style: normal;
    position: relative;
    letter-spacing: 1px;
}

.logo::after {
    content: 'Blog';
    font-weight: 900;
    letter-spacing: 3px;

    position: absolute;
    top: -17px;
    right: 30px;
    transform: translateX(30px);
    color: white;

    font-size: 12px;
    padding: 2px;
    border-radius: 20px;
    font-weight: 900;
}

.links {
    display: flex;
    justify-content: flex-end;
}

.responsive {
    display: flex;
    margin-right: 10px;
}

.responsive a:hover {
    color: var(--small);
    position: relative;

}

.responsive a:hover::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 4px;
    z-index: 1;
    background-color: var(--small);
    transform: translateY(45px);
}

.links a,
.responsive a {
    margin-left: 10px;
    cursor: pointer;
    color: white;
    text-decoration: none;
}

.bars .fa-bars {
    display: none;
}


@media (max-width:950px) {

    .responsive {
        visibility: hidden;

        display: flex;
        flex-direction: column;
        position: absolute;
        top: 23px;
        opacity: 0;

        transition: transform .5s, opacity 1s;
        transform-origin: top left;
        transform: scaleY(0.5) translateX(-30px);
    }

    .responsive a:hover {
        color: white;
    }

    .responsive a:hover::before {
        display: none;
    }

    .bars .fa-bars {
        display: inline-block;
        cursor: pointer;
        margin-right: 10px;
    }

    .bars:hover .responsive {
        visibility: visible;
        padding-top: 53px;

        width: auto;
        height: auto;
        opacity: 1;

        transform: scaleY(1) translateX(-30px);
        cursor: pointer;

    }

    .responsive a {
        padding: 10px;
        text-align: center;
        border-bottom: 1px solid white;
        transition: background-color 1.2s;
        background-color: rgb(183, 183, 183);

    }

    .responsive a:hover {
        background-color: var(--small);
    }

}

@media (max-width:500px) {
    .container{
        width: 95%;
        margin-top: -5px;
        border-radius: 0;
    }
}

/*______________________________________________________________ M A I N_______________________________________________________ */

.main {
    background-image: url('./Images/Main.jpg');
    background-size: cover;
    position: relative;
    top: -8px;
    left: -8px;
    width: 100vw;
    height: 100vh;
    margin: 0;

    z-index: -1;
    overflow: hidden;
}

.main::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #00000091;
}

.box {
    position: absolute;
    top: 32%;
    width: 30%;
    color: white;
    z-index: 1;

    background-color: var(--mainColor);
    padding: 50px;
    padding-left: 20%;
}
.simpleTranslateX{
    transform-origin: left;
    transform: scaleX(0);
    animation: move 1s;
    animation-fill-mode: forwards;
}

.box p {
    position: relative;
}

.boxTitle {
    font-size: 1.8vw;
}

.subTitle {
    font-size: 1.3vw;
    color: rgb(202, 202, 202);
}

@keyframes move {
    100% {
        transform: scaleX(1);
    }
}



@media(max-width:800px) {
    .box {
        width: 60%;
        padding-left: 20%;
        padding-right: 20%;
    }
}

@media(max-width:600px) {
    .boxTitle {
        font-size: 3vw;
    }

    .subTitle {
        font-size: 2vw;
    }
}

/*______________________________________________________________SOUVENIRS_______________________________________________________ */
.souvenir {
    text-align: center;
    padding-top: 60px;
}

.title {
    text-align: center;
    font-size: 30px;
    padding: 20px;
    position: relative;
    display: inline-block;
    z-index: -1;
}

.title::before {
    content: '';
    position: absolute;
    border: 1px solid black;
    width: 85%;
    transform: translateY(40px);
}

.title::after {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    background-color: white;
    width: 10px;
    height: 10px;
    border: 2px solid black;
    border-radius: 50%;
    transform:translateY(55px);
}
.simpleTranslateXTitle{
    transform: translateX(-100px);
    opacity: 0;

    animation: title 1s;
    animation-fill-mode: forwards;
}
@keyframes title{
    100%{
        transform: translateX(0);
        opacity: 1;
    }
}

.title + p {
    color: var(--subTitle);
    margin: auto;
    width: 30%;
    padding: 25px;
    line-height: 1.5;
}

.simpleTranslateXTitle2{
    transform: translateX(100px);
    opacity: 0;

    animation: title 1s;
    animation-delay: .5s;
    animation-fill-mode: forwards;
}
@keyframes title2{
    100%{
        transform: translateX(0);
        opacity: 1;
    }
}

.grid {
    width: 60%;
    margin: auto;
    display: grid;
    grid-template-columns: auto 1fr auto 1fr;
    text-align: left;
    column-gap: 20px;

    
    position: relative;
    z-index: -1;
}
.simpleTranslateY{
    transform: translateY(100px);
    opacity: 0;
    animation: grid 1s;
    animation-delay: 1.5s;
    animation-fill-mode: forwards;
}
@keyframes grid {
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}


.grid .iconSouvenir {
    background-size: cover;
    
    width: 75px;
    height: 75px;
    margin-top: 20px;
}
.grid .iconSouvenir:nth-child(1) {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 16 16'%3E%3Cg fill='black'%3E%3Cpath d='M8 4.5a.5.5 0 0 0-1 0v7a.5.5 0 0 0 1 0zm3.5.878c1.482-1.42 4.795 1.392 0 4.622c-4.795-3.23-1.482-6.043 0-4.622M2.5 5a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1zm0 2a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1zm0 2a.5.5 0 0 0 0 1h3a.5.5 0 0 0 0-1z'/%3E%3Cpath fill-rule='evenodd' d='M0 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2zm2-1a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1z'/%3E%3C/g%3E%3C/svg%3E");
}
.grid .iconSouvenir:nth-child(3) {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 16 16'%3E%3Cpath fill='black' d='M1.338 1.961C1.495 1.362 2.041 1 2.615 1c.354 0 .676.133.921.35a1.5 1.5 0 0 1 1.928 0A1.38 1.38 0 0 1 6.385 1c.574 0 1.12.362 1.277.961C7.812 2.533 8 3.455 8 4.5a3.5 3.5 0 0 1-1.595 2.936c-.271.177-.405.405-.405.6v.396q0 .034.004.066c.034.248.157 1.169.272 2.124c.113.937.224 1.959.224 2.378a2 2 0 1 1-4 0c0-.42.111-1.44.224-2.378c.115-.955.238-1.876.272-2.124L3 8.432v-.396c0-.195-.134-.423-.405-.6A3.5 3.5 0 0 1 1 4.5c0-1.045.188-1.967.338-2.539M6 5a.5.5 0 0 1-1 0V2.5a.5.5 0 0 0-1 0V5a.5.5 0 0 1-1 0V2.385A.385.385 0 0 0 2.615 2c-.166 0-.28.099-.31.215A9.2 9.2 0 0 0 2 4.5a2.5 2.5 0 0 0 1.14 2.098c.439.285.86.786.86 1.438v.396q0 .1-.013.2c-.034.246-.156 1.161-.27 2.11c-.116.965-.217 1.914-.217 2.258a1 1 0 1 0 2 0c0-.344-.1-1.293-.217-2.259c-.114-.948-.236-1.863-.27-2.11A2 2 0 0 1 5 8.433v-.396c0-.652.421-1.153.86-1.438A2.5 2.5 0 0 0 7 4.5c0-.932-.168-1.764-.305-2.285C6.665 2.1 6.55 2 6.385 2A.385.385 0 0 0 6 2.385zm3 .5A4.5 4.5 0 0 1 13.5 1a.5.5 0 0 1 .5.5v5.973l.019.177a261 261 0 0 1 .229 2.24c.123 1.256.252 2.664.252 3.11a2 2 0 1 1-4 0c0-.446.129-1.854.252-3.11c.063-.637.126-1.247.173-1.699l.02-.191H10a1 1 0 0 1-1-1zm2.997 2.053l-.021.202a386 386 0 0 0-.228 2.233c-.127 1.287-.248 2.63-.248 3.012a1 1 0 1 0 2 0c0-.383-.121-1.725-.248-3.012a315 315 0 0 0-.228-2.233l-.021-.201L13 7.5V2.035A3.5 3.5 0 0 0 10 5.5V7h1.5a.5.5 0 0 1 .497.553'/%3E%3C/svg%3E");
}
.grid .iconSouvenir:nth-child(5) {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 36 36'%3E%3Cpath fill='black' d='M32 8h-7.3l-1.06-2.72A2 2 0 0 0 21.78 4h-7.56a2 2 0 0 0-1.87 1.28L11.3 8H4a2 2 0 0 0-2 2v20a2 2 0 0 0 2 2h28a2 2 0 0 0 2-2V10a2 2 0 0 0-2-2m0 22H4V10h8.67l1.55-4h7.56l1.55 4H32Z' class='clr-i-outline clr-i-outline-path-1'/%3E%3Cpath fill='black' d='M9 19a9 9 0 1 0 9-9a9 9 0 0 0-9 9m16.4 0a7.4 7.4 0 1 1-7.4-7.4a7.41 7.41 0 0 1 7.4 7.4' class='clr-i-outline clr-i-outline-path-2'/%3E%3Cpath fill='black' d='M9.37 12.83a.8.8 0 0 0-.8-.8h-2.4a.8.8 0 0 0 0 1.6h2.4a.8.8 0 0 0 .8-.8' class='clr-i-outline clr-i-outline-path-3'/%3E%3Cpath fill='black' d='M12.34 19a5.57 5.57 0 0 0 3.24 5l.85-1.37a4 4 0 1 1 4.11-6.61l.86-1.38A5.56 5.56 0 0 0 12.34 19' class='clr-i-outline clr-i-outline-path-4'/%3E%3Cpath fill='none' d='M0 0h36v36H0z'/%3E%3C/svg%3E");
}
.grid .iconSouvenir:nth-child(7) {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 2048 2048'%3E%3Cpath fill='black' d='M1536 1536h-13q-23-112-81-206t-141-162t-187-106t-218-38q-88 0-170 23t-153 64t-129 100t-100 130t-65 153t-23 170H128q0-120 35-231t101-205t156-167t204-115q-113-74-176-186t-64-248q0-106 40-199t109-163T696 40T896 0t199 40t163 109t110 163t40 200q0 66-16 129t-48 119t-75 103t-101 83q112 43 206 118t162 176zM512 512q0 80 30 149t82 122t122 83t150 30q79 0 149-30t122-82t83-122t30-150q0-79-30-149t-82-122t-123-83t-149-30q-80 0-149 30t-122 82t-83 123t-30 149m1280 1152h256v128h-256v256h-128v-256h-256v-128h256v-256h128z'/%3E%3C/svg%3E");
}


.grid div p:first-child {
    color: var(--mainTitle);
    font-weight: 900;
    font-size: 25px;
    width: 80%;
}

.grid div p:last-child {
    width: 95%;
    color: var(--subTitle);
    line-height: 2.1;
}

@media(max-width:1304px) {
    .grid {
        grid-template-columns: auto 1fr;
    }
}

@media(max-width:700px) {
    .grid {
        width: 90%;
    }

    .souvenir p, .title + p {
        width: 80%;
    }
}




/*______________________________________________________________Gallery_______________________________________________________ */


.gallery {
    text-align: center;
    padding-top: 60px;

}


.album {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

.simpleAnimationOpacity{
    opacity: 0;
    animation: opa 1s;
    animation-delay: 1.5s;
    animation-fill-mode: forwards;
}
@keyframes opa{
    100%{
        opacity: 1;
    }
}

.album .card {
    width: 380px;
    height: 260px;
    cursor: pointer;
    overflow: hidden;
    position: relative;
}

.img {
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 100%;
    position: relative;
    transform: rotate(0deg) scale(1.1);
    transition: transform .5s;
    object-fit: cover;
}

.album div:hover .img {
    transform: rotate(10deg) scale(1.4);

}

.caption {
    position: absolute;
    bottom: -20px;
    width: 100%;
    height: 40%;
    background-color: rgb(255, 255, 255, 0.7);

    display: flex;
    align-items: center;
    justify-content: center;

    transform: translateY(100px);
    transition: .5s;

}

.album .card:hover .caption {
    transform: translateY(0);

}

/*______________________________________________________________ABOUT_______________________________________________________ */



.about {
    margin-top: 20px;
    position: relative;
    left: -8px;
    width: 100vw;
    z-index: -1;
    /* height: 100vh; */
}

video {
    width: 100%;
    position: relative;
}

.about::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #00000091;
}

.about .box {
    text-align: center;
    width: 100%;
    padding-left: 0;
    padding-right: 0;
}

@media (max-width:1100px){
    .aboutContainer{
        padding-top: 65px;
    }
}

@media (max-width:600px){
    .about .box{
        top: 35%;
        padding: 0;
    }
}


/*______________________________________________________________REVIEW_______________________________________________________ */

.review{
    padding-top: 60px;
    text-align: center;
    
}
.reviewContainer{
    display: flex;
    justify-content: center;
}
.reviewBox {
    position: relative;
    display: flex;
    justify-content: space-between;
    width: 60%;
    z-index: -1;
}

.reviewBox > div{
    width: 45%;
    margin: 10px;
}



.profiles {
    display: flex;
    flex-direction: column;
}

.profiles .pro {
    display: flex;
    text-align: left;
    color: black;
    margin: 0;
}

.pro div:first-child {
    background-size: 100% 100%;
    position: relative;
    top: -40px;
    width: 150px;
    height: 118px;
}
.pro div:last-child {
    width: 100%;
    height: 110px;
}
.profiles > div:nth-child(even) {
    text-align: right;
    color: var(--subTitle);
    position: relative;
    top: -50px;
    padding: 10px;
    margin-bottom: 50px;

}
.profiles > div:nth-child(even)::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    border: 1px solid var(--subTitle);
    /* margin-bottom: 50px; */
}



.statistics{
    text-align: left;
    position: relative;
    top: -20px;
}

.simpleTranslateY2{
    transform: translateY(-100px);
    opacity: 0;
    animation: grid 1s;
    animation-delay: 2s;
    animation-fill-mode: forwards;
}
@keyframes grid {
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

.statistics p:first-child{
    text-align: center;
}
.statistics p{
    margin-top: 30px;
}

.progressBar {
    width: 100%;
    height: 20px;
    background-color: var(--subTitle);
    position: relative;
    padding: 0;
}

.progress {
    display: inline-block;
    background-color: var(--mainTitle);
    height: 100%;
    position: relative;
}

.progress::before{
    content: attr(data-progress);
    position: absolute;
    top: -35px;
    right: -20px;
    background-color: rgb(0, 0, 0, .5);
    color: white;
    padding: 4px;
    border-radius: 5px;
}

.progress::after{
    content: '';
    position: absolute;
    top: -9px;
    right: -7px;

    border-width: 7px;
    border-style: solid;
    border-color: rgb(0, 0, 0, .5) transparent transparent transparent;
}

@media (max-width:1200px){
    .reviewBox{
        flex-direction: column;
        justify-content: center;
    }
    .reviewBox > div{
        width: 100%;
    }
}

@media (max-width:525px){
    .profiles > div:nth-child(even) {
        top: 40px;
        margin-bottom: 100px;
    }
}





/*______________________________________________________________CONTACT_______________________________________________________ */

.contact{
    padding-top: 58px;
    text-align: center;
    height: 100vh;
}
.contactContainer{
    display: flex;
    justify-content: center;
}
.contactBox{
    width: 60%;
    display: flex;
    justify-content: space-between;

}

.left{
    background-image: url('./Images/Contact.gif');
    background-size: 150% 100%;
    background-repeat: no-repeat;
    background-position: 50% ;
    width: 26vw;
    height: 26vw;

    align-self: center;
    border-radius: 50%;
}

.mid{
    height: 100%;
    border: 1px solid var(--subTitle);
}

.right{
    width: 42%;
}

.right form input , .right form textarea{
    display: inline-block;
    width: 80%;
    padding: 20px;
    margin: 20px;
    resize: none;
}

.right form button{
    cursor: pointer;
    width: 92%;
    padding: 20px;
    margin: 20px;
    color: white;
    background-color: var(--mainColor);
    position: relative;
    overflow: hidden;

}

.right form button::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 101%;
    height: 100%;
    background-color: var(--mainTitle);
    transform: rotate(7deg) translateY(100px);
    transition: transform .2s;
    z-index: -1;
}
.right form button:hover::before{
    transform: rotate(7deg) translateY(27px) translateX(-2px);
}

.right form button::after{
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 101%;
    height: 100%;
    background-color: var(--mainTitle);
    transform: rotate(7deg) translateY(-100px);
    transition: transform .2s;
    z-index: -1;
}
.right form button:hover::after{
    transform: rotate(7deg) translateY(-27px) translateX(2px);
}

@media (max-width:800px){
    .left{
        display: none;
    }
    .mid{
        display: none;
    }
    .right{
        width: 100%;
    }
}

/*_______________________________________________________________FOOTER_______________________________________________________ */

.footerContainer{
    position: relative;
    margin-left: -8px;
    margin-bottom: -8px;
    width: 100vw;
}

.footer{
    padding-top: 50px;
    text-align: center;
    background-color: var(--mainColor);
    color: white;
    font-size: 20px;
    position: absolute;
    
    width: 100%;
    
}
.footer .icon{
    width: 3em;
    height: 3em;
    display: inline-block;
}

.social::before{
    content: '';
    position: absolute;
    width: 100px;
    height: 2px;
    background-color: white;
    transform: translateY(-6px);
}

.iconSocial{
    width: 20px;
    height:20px;

    display: inline-block;
}
.iconSocial:nth-child(1){
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cpath d='M24 0v24H0V0zM12.593 23.258l-.011.002l-.071.035l-.02.004l-.014-.004l-.071-.035c-.01-.004-.019-.001-.024.005l-.004.01l-.017.428l.005.02l.01.013l.104.074l.015.004l.012-.004l.104-.074l.012-.016l.004-.017l-.017-.427c-.002-.01-.009-.017-.017-.018m.265-.113l-.013.002l-.185.093l-.01.01l-.003.011l.018.43l.005.012l.008.007l.201.093c.012.004.023 0 .029-.008l.004-.014l-.034-.614c-.003-.012-.01-.02-.02-.022m-.715.002a.023.023 0 0 0-.027.006l-.006.014l-.034.614c0 .012.007.02.017.024l.015-.002l.201-.093l.01-.008l.004-.011l.017-.43l-.003-.012l-.01-.01z'/%3E%3Cpath fill='%23ffffff' d='M4 12a8 8 0 1 1 9 7.938V14h2a1 1 0 1 0 0-2h-2v-2a1 1 0 0 1 1-1h.5a1 1 0 1 0 0-2H14a3 3 0 0 0-3 3v2H9a1 1 0 1 0 0 2h2v5.938A8.001 8.001 0 0 1 4 12m8 10c5.523 0 10-4.477 10-10S17.523 2 12 2S2 6.477 2 12s4.477 10 10 10'/%3E%3C/g%3E%3C/svg%3E");
    background-size: cover;
    background-repeat:no-repeat;
}
.iconSocial:nth-child(2){
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3Cg fill='none'%3E%3Cpath stroke='%23ffffff' stroke-width='2' d='M3 11c0-3.771 0-5.657 1.172-6.828C5.343 3 7.229 3 11 3h2c3.771 0 5.657 0 6.828 1.172C21 5.343 21 7.229 21 11v2c0 3.771 0 5.657-1.172 6.828C18.657 21 16.771 21 13 21h-2c-3.771 0-5.657 0-6.828-1.172C3 18.657 3 16.771 3 13z'/%3E%3Ccircle cx='16.5' cy='7.5' r='1.5' fill='%23ffffff'/%3E%3Ccircle cx='12' cy='12' r='3' stroke='%23ffffff' stroke-width='2'/%3E%3C/g%3E%3C/svg%3E");
    background-size: cover;
    background-repeat:no-repeat;
}
.iconSocial:nth-child(3){
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3Cpath fill='%23ffffff' d='M19.05 4.91A9.816 9.816 0 0 0 12.04 2c-5.46 0-9.91 4.45-9.91 9.91c0 1.75.46 3.45 1.32 4.95L2.05 22l5.25-1.38c1.45.79 3.08 1.21 4.74 1.21c5.46 0 9.91-4.45 9.91-9.91c0-2.65-1.03-5.14-2.9-7.01m-7.01 15.24c-1.48 0-2.93-.4-4.2-1.15l-.3-.18l-3.12.82l.83-3.04l-.2-.31a8.264 8.264 0 0 1-1.26-4.38c0-4.54 3.7-8.24 8.24-8.24c2.2 0 4.27.86 5.82 2.42a8.183 8.183 0 0 1 2.41 5.83c.02 4.54-3.68 8.23-8.22 8.23m4.52-6.16c-.25-.12-1.47-.72-1.69-.81c-.23-.08-.39-.12-.56.12c-.17.25-.64.81-.78.97c-.14.17-.29.19-.54.06c-.25-.12-1.05-.39-1.99-1.23c-.74-.66-1.23-1.47-1.38-1.72c-.14-.25-.02-.38.11-.51c.11-.11.25-.29.37-.43s.17-.25.25-.41c.08-.17.04-.31-.02-.43s-.56-1.34-.76-1.84c-.2-.48-.41-.42-.56-.43h-.48c-.17 0-.43.06-.66.31c-.22.25-.86.85-.86 2.07c0 1.22.89 2.4 1.01 2.56c.12.17 1.75 2.67 4.23 3.74c.59.26 1.05.41 1.41.52c.59.19 1.13.16 1.56.1c.48-.07 1.47-.6 1.67-1.18c.21-.58.21-1.07.14-1.18s-.22-.16-.47-.28'/%3E%3C/svg%3E");
    background-size: cover;
    background-repeat:no-repeat;
}
.iconSocial:nth-child(4){
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M2 18.5C3.765 19.521 5.814 20 8 20c6.48 0 11.762-5.137 11.992-11.562L22 4.5l-3.354.5A4 4 0 0 0 16 4c-2.572 0-4.5 2.517-3.88 4.98c-3.552.23-6.771-1.959-8.633-4.875c-1.236 4.197-.09 9.251 3.013 12.366c0 1.176-3 1.878-4.5 2.029' color='%23ffffff'/%3E%3C/svg%3E");
    background-size: cover;
    background-repeat:no-repeat;
}