/*******

Groen voor background: #CBFF8F
GLOBAL -> COLORS -> Links:  #A8D36F groen
BAES -> Link -> Color:      #A8D36F groen

TEXT - > BG: linear-gradient(40deg, #46d4aa 0%, #56dd9a 40%, #72e475 100%)

Donker groen: #57BA78

linear-gradient(40deg, #E6FFFF 0%, #FFB0F4 40%, #CBFF8F 100%)

-----
BLAUW
Donker blauw zoals hotelschool gent site: #022064
Midden blauw: #004b8f



************/


/*    ====== */

.uk-section-primary{
    background: #cbff8f !important;
    background-image: linear-gradient(40deg, #46d4aa 0, #56dd9a 40%, #72e475 100%) !important;
}

.image_decoration{
    z-index: -1;
}

/* HOME GREEN TOP SECTION*/
.main_headline {
    font-weight: 900;
    text-shadow: 1px 1px rgba(50, 50, 50, .5);
    z-index: -1;
}
.speakers-section .main_headline_green {
    color:#52B94B !important;
    text-shadow: 1px 1px rgba(150, 150, 150, .3);
}
.speakers-section .main_headline_green2 {
    color:#2F9029 !important;
    text-shadow: 1px 1px rgba(100, 100, 100, .8);
}


.sub_headline{
    font-weight: 900;
    text-shadow: 1px 1px rgba(50, 50, 50, .5);
}

/* Countdown styling */
.green_hero_banner .countdown_white{
    text-shadow: 1px 1px rgba(50, 50, 50, .5);
    z-index: -1;
}
.green_hero_banner .countdown_white .uk-countdown-label{
    font-weight: 900;
    color:#fff;
}

/************************ BUTTONS *************************/
.euhofa_organisers_btn a{
    font-size: 1.3rem;
    padding-left: 20px !important;
    padding-right: 20px !important;
}
.euhofa_overlay_hotelschool_spermalie_ghent .el-content a, .euhofa_overlay_bruges_ghent .el-content a, .bruges_ghent_cta_banner .uk-inline-clip  .uk-button-primary, .euhofa_organisers_btn a{
    background-color: #2ffa73;
    color: #fff;
    border: 1px solid #ffffff3b;
    background-image: linear-gradient(51deg, #46d4aa 50%, #56dd9a 65%, #72e475 100%) !important;
    
    box-shadow: 0 5px 15px rgba(0, 0, 0, .15) !important;
    text-shadow: 1px 1px #3333334a !important;
    font-weight: 900;
    border-radius: 10px;

    padding-left: 15px;
    padding-right: 15px;
}
/*
        margin-top: 50px;
*/
.location_button .uk-button {
    background-color: #2ffa73;
    color: #fff;
    border: 1px solid #ffffff3b;
    background-image: linear-gradient(51deg, #46d4aa 50%, #56dd9a 65%, #72e475 100%) !important;

    box-shadow: 0 5px 15px rgba(0, 0, 0, .15) !important;
    text-shadow: 1px 1px #3333334a !important;
    font-weight: 900;
    border-radius: 10px;

}
/* box-shadow: -5px -5px 15px rgba(95, 95, 95, 0.236), 5px 5px 15px rgba(156, 255, 41, .3); */
.euhofa_overlay_hotelschool_spermalie_ghent .el-content a:hover, .euhofa_overlay_bruges_ghent .el-content a:hover, .bruges_ghent_cta_banner .uk-inline-clip  .uk-button-primary:hover, .location_button .uk-button:hover{
    box-shadow: -5px -5px 15px rgba(95, 95, 95, 0.236), 5px 5px 15px rgba(156, 255, 41, .3) !important;
    background-color: #ffffff47;
    color: #ffffff;
    border-color: #ffffff3b;
    font-weight: 900;  
}

.bruges_ghent_cta_banner .uk-inline-clip .uk-button {
    
    font-size: 1.6rem;
}

.uk-section-primary .speakers-grid .el-link{
    color:#52B94B;
    font-weight: 900;
}
.uk-section-primary .speakers-grid .el-link:hover{
    color:#fff;
    background-image: linear-gradient(51deg, #46d4aa 50%, #56dd9a 65%, #72e475 100%);
    font-weight: 900;
    border: 1px solid rgba(255, 255, 255, .5);
}

/************************ END BUTTONS *************************/




.bruges_ghent_cta_banner .uk-inline-clip{
    border-radius: 12px;
    -webkit-box-shadow: 6px 6px 16px 4px rgba(117, 117, 117, 0.71);
    -moz-box-shadow: 6px 6px 16px 4px rgba(117, 117, 117, 0.71);
    box-shadow: 6px 6px 16px 4px rgba(117, 117, 117, 0.71);
}



.CTA-organisers-2{
    color:#333;
}

.CTA-organisers-1 .uk-overlay-default{
    background-color: rgba(90, 90, 90, 0.18);
    backdrop-filter: blur(7px);
    color: #fff;
    
}
.CTA-organisers-1 .el-content{
    font-weight: 600;
}
.banner_title{
    text-shadow: 1px 1px #333;
    color: #fff;
    text-transform:capitalize;
}

.hotels .uk-card-body {
    padding:20px
}
.hotels .uk-card-body .el-content p{
    margin-bottom: 10px;
}

.hotels .uk-card-body > div:last-of-type {
    /* Your styles here */

}

/* ============================================================ */
/* LOCATION                                                     */
.euhofa_location_city_overlay .el-title{
    text-shadow: 1px 1px #333;
}

/*
.euhofa_overlay_ghent1 img.el-image {
    transform: translateY(50px);
}

.euhofa_bruges_section_banner .uk-section{
    background-position: center calc(50% - 140px) !important;
}*/
/* For Bruges Section that acts as hero banner without overlay but with headline*/
.euhofa_bruges_section_banner h1{
    color:#FFF;
    text-shadow: 1px 1px #333;
}

.euhofa_overlay_bruges_ghent .el-content{
    width: 670px;
    background-color: rgba(90, 90, 90, 0.3);
    backdrop-filter: blur(7px);
    color: #fff;
    padding: 25px;
    
    border-left:1px solid rgba(255,255,255,0.2);
    border-top:1px solid rgba(255,255,255,0.2);
    border-radius:2px;
    box-shadow:2px 2px rgba(68,68,68,0.3);
    text-shadow: 1px 1px #333;
}


.euhofa_overlay_bruges .el-content{
    text-align: left;
    margin-left: 30px;
    top: 25px;
}

.euhofa_overlay_hotelschool_spermalie_ghent .el-content{
    width: 696px;
    background-color: rgba(90, 90, 90, 0.3);
    backdrop-filter: blur(7px);
    color: #fff;
    padding: 25px;
    
    border-left:1px solid rgba(255,255,255,0.2);
    border-top:1px solid rgba(255,255,255,0.2);
    border-radius:2px;
    box-shadow:2px 2px rgba(68,68,68,0.3);
    text-shadow: 1px 1px #333;
}
.euhofa_overlay_hotelschoolspermalie .el-content{
    text-align: left;
    top: 20px;
    margin-left: 20px;
    padding-right: 18px;
    padding-left: 20px;
    text-shadow: 1px 1px #3333334a;
    font-weight: 600;
}



/* GHENT & HOTELSCHOOL GENT */
.euhofa_overlay_ghent .el-content, .euhofa_overlay_hotelschoolghent .el-content{
    position: absolute;
    text-align: left;
    margin-left: 100px;
    top: 25px;
    right:50px;
}
.euhofa_overlay_ghent .el-content p, .euhofa_overlay_hotelschoolghent .el-content p{
    margin-top: 10px;
}
.euhofa_overlay_ghent .el-content h1, .euhofa_overlay_hotelschoolghent .el-content h1{
    margin-bottom: 10px;
}


/* HOTELSCHOOL GHENT */
.euhofa_overlay_hotelschoolghent .el-content{
    /*text-shadow: 1px 1px #333333a1;*/
    font-weight: 600;
    text-shadow: none;
}

/*--------------*/


/* ============================================================ */

.uk-card.card_test{
    background-color: red !important;
}
.uk-card-secondary.card_test::before {
    background-image: conic-gradient(from 60deg, #9ddafe, #dcbdf7, #fea2cb, #fbabda, #9ddafe);
    filter: blur(12px);
    transition: filter .1sease-in-out;
}

.uk-card-secondary.card_test::after, .uk-card-secondary.card_test::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    will-change: filter;
}

.uk-card-secondary.card_test:not(.uk-hack) {
    z-index: 0;
    background: 0 0 !important;
    box-shadow: none !important;
    border: none !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}


/* PROGRAM  */

.schedule_section{

    background: linear-gradient(135deg,#d8ffe26b 0%, #edd6ea 100%);
}


.schedule_grid .el-item {
    color:#022064;
    padding-bottom:20px;
}
.schedule_grid .el-content {
    padding-left:20px;
    padding-right:20px;
    margin-top:0px !important;
    font-size:14px;
    font-weight: 300;
}
/* Apply styles from .today-box to .el-title */
.schedule_grid .el-title {
    /*background: linear-gradient(to left, #485fed, rgba(255, 44, 118, 0.25)), #485fed;*/
    /*background: linear-gradient(135deg,#E6FFFF 0%,#CBFF8F 50%, #FFB0F4 100%);*/
    /*background: linear-gradient(135deg, rgb(242, 116, 162) 0%, rgb(242, 116, 179) 50%, #FFB0F4 100%);*/
    /* background: linear-gradient(135deg, rgba(203, 255, 143,.4) 0%, rgba(203, 255, 143,0.9) 100%);*/
    
    background: #cbff8f;
    background-image: linear-gradient(135deg, #46d4aa 0, #56dd9a 40%, #72e475 100%);

    position: relative;

    color: #FFF;
    
    padding: 10px 20px;
    margin-bottom: 50px;
    
    font-size: 2rem;
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
    text-shadow: 1px 1px rgba(50, 50, 50, .5);

    /*box-shadow: 0px 0px 40px -9px #FFB0F4;*/
    
    
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
}

/* Pseudo-element equivalent of &::before */
.schedule_grid .el-title::before {
    content: "";
    /*background: linear-gradient(to left, #485fed, rgba(255, 44, 118, 0.25)), #485fed;*/
    background: linear-gradient(135deg, #FFB0F4 0%, #CBFF8F 100%);
    opacity: 0.4;
    z-index: -1;
    display: block;
    width: 100%;
    height: 20px;
    margin: auto;
    position: absolute;
    bottom: -13px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 50%;
    box-shadow: 0px 0px 40px 0 #FFB0F4;
    /*box-shadow: 0px 0px 40px 0 #485fed;*/
}

/* #CBFF8F */

.schedule_grid .subtitle + p{
    margin-top:10px;
    margin-bottom:10px;
}
.schedule_grid .subtitle + ul{
    margin-top:5px;
    margin-bottom:0px;
}
.schedule_grid .subtitle{
    /*background: #ff2d55;
    background: #52B94B;
    background: #CBFF8F;#
    border-bottom: 1px solid #e5e9ed; */
    color: #022064;
    /*font-size: 1.2rem;*/
    font-weight: bold;
    text-align: center;
    padding: 0px;
    padding-top: 10px;
    
    margin-top:0px;
    margin-bottom:0px;
    display: inline-block;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 1px;
    line-height: 1.3;
    /*box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);*/
}

/* Remove default bullets */
.schedule_grid ul {
    list-style: none;
    padding: 0; /* Remove any default padding */
    margin: 0; /* Remove default margin */
}

/* Style the <li> element */
.schedule_grid li {
    position: relative;
    padding-left: 25px;
    /*font-size: 16px; 
    line-height: 1.6;*/
}



/* Create the green "radio button" using ::before */
/* Default bullet styling (green circle) */
.schedule_grid li::before, 
.schedule_grid li li::before { 
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    width: 16px;
    height: 16px;
    background: #49c676; /* Green color */
    border-radius: 50%; /* Makes it circular */
    box-shadow: inset 0 0 0 3px white, 0 0 10px rgba(73, 198, 118, 0.5);
}


/* Remove the default bullet when using the plus */
.schedule_grid li.plus::before {
    content: "\f067"; /* Unicode for FontAwesome plus */
    font-family: "Font Awesome 6 Free"; /* Ensure correct FontAwesome version */
    font-weight: 400;
    position: absolute;
    left: 0;
    top: 0px;
    width: auto;
    height: auto;
    font-size: 16px;
    color: #52B94B;
    margin-right: 8px;
}

/* Remove the default bullet when using the clock */
.schedule_grid li.clock::before{
    content: "\f017"; /* Unicode for FontAwesome clock */
    font-family: "Font Awesome 6 Free"; /* Ensure correct FontAwesome version */
    font-weight: 400;
    position: absolute;
    left: 0;
    top: 0px;
    width: auto;
    height: auto;
    font-size: 16px;
    color: #52B94B;
    margin-right: 8px;
}

/* Prevent the green circle from appearing on .clock items */
.schedule_grid li.clock, .schedule_grid li.plus {
    position: relative; /* Ensure positioning remains */
}

.schedule_grid li.clock::before, .schedule_grid li.plus::before {
    background: none !important;
    box-shadow: none !important;
}
.schedule_grid li.clock li--::before, .schedule_grid li.plus li--::before {
    background: none !important;
    box-shadow: none !important;
}

.schedule_grid .resto {
    vertical-align: middle;
    position: relative;
    top: -3px;
}

/* Add an inner "dot" for active effect */
.schedule_grid li.active::before {
    background: radial-gradient(circle, white 30%, #49c676 40%);
}

.schedule_grid .el-titleNOTGOOD {
    background: #ff2d55; /* Change to match your theme */
    color: #fff; /* White text */
    font-size: 1.2rem;
    font-weight: bold;
    text-align: center;
    padding: 10px 15px;
    display: inline-block;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}





/* SPEAKERS */

[id] {
    scroll-margin-top: 86px;
    /* Adjust to match your sticky header height */
}


#circuit-animation {
    bottom: 0px;
    left: 0px;
    position: absolute;
    transform: translateY(-32%) translateX(8%);
    pointer-events: none; /* Prevent interaction */
    z-index: 10; /* Keep above content */
}


.circuit-animation-container {
    position: absolute;
    bottom: -500px;
    left: 50%;
    transform: translateX(-60%);
    width: 200px; /* Adjust as needed */
    height: auto;
    pointer-events: none; /* Prevent interaction */
    z-index: 10; /* Keep above content */
}


/* Attach to the first el-item */
.speakers-grid > .uk-grid > div:nth-child(1) .el-item {
    position: relative; /* Ensure positioning works */
}

.speakers-grid > .uk-grid > div:nth-child(1) .el-item .circuit-animation-container {
    position: absolute;
    bottom: -10px; /* Adjust based on layout */
    left: 50%;
    transform: translateX(-50%);
}

.speakers-grid .el-link.uk-button{
    box-shadow: 5px 5px 15px rgba(57, 65, 124, .2);
}

.gradient03 {
    /*background: linear-gradient(135deg, #CBFF8F 0%, #FFB0F4 100%);*/
    background: linear-gradient(135deg, rgba(203, 255, 143, 0.3) 0%, rgba(255, 176, 244, 0.3) 100%);
}

.gradient04 {
    /*background: linear-gradient(135deg, #CBFF8F 0%, #FFB0F4 100%);*/
    background: linear-gradient(135deg,  rgba(255, 176, 244, 0.3) 0%,rgba(203, 255, 143, 0.3) 100%);
}
.gradient05 {
    /*background: linear-gradient(135deg, #CBFF8F 0%, #FFB0F4 100%);*/
    background: linear-gradient(135deg, rgba(203, 255, 143, 0.3) 0%, rgba(255, 176, 244, 0.3) 100%);
}


/* Speaker Section Styling */
.speakers-section {
    padding-top: 40px;
    background: linear-gradient(135deg, #E6FFFF 0%, #CBFF8F 100%);
    /*padding: 80px 0;*/
    text-align: center;
}

.gradient01{
    background: linear-gradient(135deg,#E6FFFF 0%,#CBFF8F 50%, #FFB0F4 100%);
}
.gradient01.speaker02 {
    background: linear-gradient(135deg, #E6FFFF 0%, #cbff8f7b 50%, #FFB0F4 100%);
}
.gradient02{
    background: linear-gradient(135deg,#E6FFFF 0%,#FFB0F4 50%, #CBFF8F 100%);
}

/*
.gradient01 .speakers-grid .el-item{
    background-image: url(/mysites/euhofa/images/Circuit-b200wns.png);
    background-repeat: no-repeat;
    background-position: bottom;
}*/

.speakers-headline{
    color:#fff;
    font-weight: bold;
    text-shadow: 1px 1px rgba(0, 0, 0, .3);
}

/*
Donkerblauw 
color: #022064;
*/

.gradient01 .speakers-headline{
    color: #fff;
    font-weight: bold;
}
.gradient02 .speakers-headline{
    color: #52B94B;
    font-weight: bold;
}


/* Speaker Grid */
.speakers-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
}

/* Speaker Panel Styling */
.speakers-grid .el-item {
    background: #FFFFFF;
    border-radius: 8px;
    padding: 20px;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

.speakers-grid .el-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

/* Speaker Image */
.speakers-grid .el-item img {
    width: 150px;
    height: 150px;
    object-fit: cover;  /* Ensures the image fills the frame */
    object-position: top; /* Moves the image position towards the top */
    border-radius: 50%;
    margin-bottom: 15px;
    border: 3px solid #52B94B;
}
.speakers-grid-home .el-item img {
    width: 150px;
    height: 150px;
    object-fit: cover;
    object-position: top;
    margin-bottom: 15px;

    /* Remove standard border */
    border: none;
    padding: 5px; /* acts like border thickness */

    /* Apply gradient background */
    background: linear-gradient(51deg, #cbff8f 0%, #52B94B 100%);
    border-radius: 50%; /* ensure circular border stays round */

    /* Mask inner image background */
    box-sizing: border-box;
    background-origin: border-box;
    background-clip: border-box;
}


/* 🔹 First Speaker (Shift image focus slightly down) */
/*
.speakers-grid > .uk-grid > div:nth-child(1) .el-item img {
    object-position: 40% 0%;
}
.speakers-grid > .uk-grid > div:nth-child(2) .el-item img {
    object-position: 50% 0%;
}
.speakers-grid > .uk-grid > div:nth-child(3) .el-item img {
    object-position: 60% 10%; 
}
*/

/* Speaker Name */
.el-item h3 {
    font-size: 20px;
    font-weight: bold;
    color: #2f9029;
}

/* Keywords (Meta Info) */
.speakers-grid .el-meta {
    font-size: 14px;
    color: #52B94B;
    font-weight: 600;
    margin-bottom: 10px;
}

/* Short Bio */
.speakers-grid .el-content {
    font-size: 14px;
    color: #333;
    line-height: 1.5;
    margin-bottom: 15px;
}

/* More Info Button */
.speakers-grid .el-item .more-info {
    display: inline-block;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: bold;
    color: white;
    background-color: #FFB0F4;
    border-radius: 20px;
    text-decoration: none;
    transition: background 0.3s;
}

.speakers-grid .el-item .more-info:hover {
    background-color: #CBFF8F;
    color: #022064;
}


/* SPEAKERS HOMEPAGE*/

.uk-section-primary .speakers-grid .el-item {
    min-width: 250px;
}
.uk-section-primary .speakers-grid .el-title {
    font-size:22px;
    color:#52B94B;
}
.uk-section-primary .speakers-grid .el-meta{
    color: #369a2f;
    font-weight: 600;
    padding-top:10px;
}



/* ==================================================== */

.section_bm01{

    background-image: linear-gradient(rgb(105, 35, 135), rgb(75, 35, 95), rgb(35, 48, 135));

}

.yt-panel-glass0 .el-item {
    box-shadow: inset 0 0 15px rgba(135, 135, 135, .1), 0 0 18px 3px rgba(0, 0, 0, .3);
  }
  
 .yt-panel-glass1 .el-item, .yt-panel-glass2 .el-item {
    box-shadow: 0 0 18px 3px rgba(0, 0, 0, .3);
  }
  
  .yt-panel-glass1 .el-item::after {
    background-color: rgba(195, 195, 195, .1);
    bottom: 10px;
    content: '';
    filter: blur(32px);
    left: 10px;
    opacity: .5;
    position: absolute;
    right: 10px;
    top: 10px;
    z-index: -1;
  }
  
  .yt-panel-glass2 .el-item::after {
    background-color: rgba(255, 255, 255, .6);
    bottom: 49.65%;
    content: '';
    filter: blur(8px);
    left: .865%;
    position: absolute;
    right: .865%;
    top: 49.65%;
    transform: rotate(-45deg) skewX(20deg);
    z-index: -1;
  }
  
/***/

.yt-panel-glass .el-item{
    background-color: rgba(15,255,195,0.219);
    backdrop-filter: blur(8px);
    border-top: 1px solid rgba(255,255,255,0.4);
    border-left: 1px solid rgba(255,255,255,0.3);
    box-shadow: 3px 3px 3px rgba(0,0,0,0.089);

}

/* ==================================================== */
/*  PANEL: ANIMATED BORDER */

.yt-panel-animated-border .el-item .el-content{
    background-color: rgba(37, 243, 243,.5);
    border-radius: 15px;
}
.yt-panel-animated-border .el-item .el-meta{
    background-color: rgba(254, 142, 222,.5);
    border-radius: 15px;
}
/*
.yt-panel-animated-border .el-item .el-title{
    background-color: rgba(229, 250, 250,.5);
}*/

.yt-panel-animated-border .el-item .el-content, .yt-panel-animated-border .el-item .el-meta{
    border-radius: 5px;
    display: inline-block;
    padding-left:7px;
    padding-right:7px;
    padding-bottom: 2px;
    padding-top: 2px;
    margin-bottom: 5px;
}

.yt-panel-animated-border .el-item.uk-panel {
    position: relative;
    border-radius: 13px;
    
    margin: 0 auto;
    
    background: #ffffff;
    /*
    
    
    padding: 2em;
    width: 300px;
    background: #1c1f2b;
    text-align: center;
    */
    
}
  
@property --angle{
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}
  

.yt-panel-animated-border .el-item.uk-panel::after, .yt-panel-animated-border .el-item.uk-panel::before{
    content: '';
    position: absolute;
    height: 100%;
    width: 100%;
    /*  background-image: conic-gradient(from var(--angle), #ff4545, #00ff99, #006aff, #ff0095, #ff4545);*/ 
    background-image: conic-gradient(from var(--angle), transparent 70%, #f68fdd);
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    z-index: -1;
    padding: 1px;
    border-radius: 13px;
    animation: 3s spin linear infinite;
}
.yt-panel-animated-border .el-item.uk-panel::before{
    filter: blur(1.5rem);
    opacity: 0.5;
}
@keyframes spin{
    from{
      --angle: 0deg;
    }
    to{
      --angle: 360deg;
    }
}


.yt-panel-animated-border .el-title, .yt-panel-animated-border .el-meta, .yt-panel-animated-border .el-content{
    padding-left:5px;
}

#hud-video-2 {
    width: 100%;
    transform: perspective(800px) rotateY(40deg);
    transform-origin: center;
    animation: floatUpDown 4s ease-in-out infinite; /* Smooth continuous floating */

}

#hud-video-2:hover {
    transform: perspective(800px) rotateY(0deg); /* Resets rotation on hover */
}

@keyframes floatUpDown {
    0%, 100% {
        transform: perspective(800px) rotateY(0deg) translateY(0);
    }
    50% {
        transform: perspective(800px) rotateY(30deg) translateY(-10px); /* Moves up */
    }
}


#hud-image-2 {
    width: 100%;
    transform: perspective(800px) rotateY(40deg);
    transform-origin: center;
    animation: floatUpDown 4s ease-in-out infinite; /* Smooth continuous floating */

}

#hud-image-2:hover {
    transform: perspective(800px) rotateY(0deg); /* Resets rotation on hover */
}

@keyframes floatUpDown {
    0%, 100% {
        transform: perspective(800px) rotateY(0deg) translateY(0);
    }
    50% {
        transform: perspective(800px) rotateY(30deg) translateY(-10px); /* Moves up */
    }
}