*, *::before, *::after{
    box-sizing: border-box; 
}

*{
    margin: 0; 
    padding: 0; 
}

ul[role='list'], ol[role='list']{
    list-style: none; 
}

html:focus-within{
    scroll-behavior: smooth; 
}

.demo-presenter-title {
line-height: 18px;
}


a:not([class]){
    text-decoration-skip-ink: auto; 
}

img, picture, svg, video, canvas{
    max-width: 100%;
    height: auto; 
    vertical-align: middle; 
    font-style: italic; 
    background-repeat: no-repeat; 
    background-size: cover;
}

input, button, textarea, select{
    font: inherit; 
}

@media (prefers-reduced-motion: reduce){
    html:focus-within {
        scroll-behavior: auto;
    }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
        transition: none;
    }
}

body, html{
    height: 100%; 
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased; 
}

p {
margin: 0px;
padding: 0px;
}

.demoroom-title {
padding: 10px;
font-size: 40px;
}
/* a {
color: #545457 !important;
} */
.left-band {
position: absolute;
display: flex;
align-items: center;
font:
normal normal bold 30px/48px 'Montserrat';
width: 100%;
left: 0;
top: 85px
}
.main-section-container {
display: flex;
max-width: 100%;
justify-content: space-between;
padding-bottom: 0px;
}
.demo-frames {
display: flex;
flex-wrap: wrap;
width: 100%;
row-gap: 10px;
}
.logo-and-about-frame {
/* padding-top: 55px; */
max-width: 30%;
text-align: center;
border-left: 1px solid #b4b2b2;
}
.about-text-room {
border-top: 1px solid #b4b2b2;
border-bottom: 1px solid #b4b2b2;
padding: 20px;
text-align: left;
}


.vendor-logo {
margin: 0 auto;
width: 80%;
margin-bottom: 50px;
    }



.pavilion-speaker-text {
    font: normal normal 300 14px/18px Montserrat;
    color: #545457;
}

.content-container-room {
margin: 0 auto;
max-width: 1460px;

}
.demo-frame-audio {
display: flex;
max-width: 50%;
}

#audioPlayer1 {
max-width: 190px;
border-radius: 0px !important;
background-color:#F0F3F4;
}

.portair-frame {
width: 150px !important;
}

.portair-frame img{
border: solid 1px red;
width: 100%;
}



audio {
  width: 100%;
  height: 50px; /* Change the height */
  background-color: white; /* Background color of the audio control */
  border-radius: 0px; /* Rounded corners */
}

.room-speaker-right{
max-width:100%;
padding: 10px;
}
.pavilion-speaker-header {
font-weight: bold;

}
.big-thumb {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
max-width: 140px;
}
/* .band-container{
width: 600px;
position: relative;
} */
.band {
position: relative;
width:11%;
left: 0px;
height: 68px;
background-color: #FF4801;
}
.vendor-name {
    font: normal normal normal 19px/24px Montserrat;
    font-weight: 800;
    text-align: left;
    text-transform: uppercase;

}
.v-tags {
    background-color: #5A5A5A;
    font: normal normal bold 14px/18px Montserrat;
    color: #FFFFFF;
    text-align: center;
    border-radius: 10px; 
    text-align: left;
    padding: 1% 5px 5px 10px;
}
.segment-container {
display: flex;
flex-direction: column;
gap: 10px;
padding: 20px;
}
.carousel {
border: solid 1px red;
height: 200px;
}
.band-contanier {
width: 70%;
}
.resources-title {
    font: normal normal normal 18px/24px Montserrat;
    font-weight: 800;
    margin-top: 50px;
    margin-bottom: 15px;
    text-transform: uppercase;
    
}

.item {
width: 300px ;
height: 174px;
display: flex;
background-color: #F0F3F4;
border-radius: 5px;
padding-top: 5px;
    }

.item p {
font-family: montserrat;
font-size: 20px;
padding: 10px;
}

/* .item-image {
width: 150px !important;

} */


.item p {
color: black;
font-size: 14px;
line-height: 15px;
font-weight:  600;
}
.item p {
color: black;
font-size: 14px;
line-height: 15px;
font-weight:  600;
}

.crousel-content {
display: flex;

}
/* img {
width: 100% !important;
} */
.crousel-content .carousel-image {

height: 155px !important;
width: 120px;
}

.carousel-image {
width: 15%;
aspect-ratio: 3/2;
object-fit: contain;
}


/* new frames code */


/* EO FRAME CODE  */
.eo-frame {
display: flex;
flex-wrap: wrap;
padding-top:50px;
}

.frame-pic {
max-width:450px;
}
.frame-pic img {
width: 50% !;
border-radius: 10px;
}
.content-frame {
width: 50%;
}

.frame-content-names {
display: flex;
gap: 10px;
}

.btn {
    height: 30px;
    display: flex;
    align-items: center;
    padding: 0px;
    font-family: montserrat;
    font-size: 14px;
    font-weight: 800;
    width: fit-content;
    padding: 5px 20px 5px 0px ;
    margin-left: -5px;
}
.btn i {
font-size: 20px;
color: #FF4800;
}

.presenters-content {
display: flex;
flex-direction: column;
gap: 10px;}


.content-frame {

padding: 0px 20px 0px 20px;
}

.eo-title {
text-align: left;
font: normal normal bold 20px/23px Montserrat;
letter-spacing: 0px;
color: #FD500C;
opacity: 1;

}

.frame-description-eo {
text-align: left;
font: normal normal 300 14px/18px Montserrat;
letter-spacing: 0px;
color: #545457;
opacity: 1;
}

.host-name-1 , .host-name-2 {
font-family: montserrat;
font-weight: bold;
font-size: 14px;
color: #545457;
line-height: 18px;
}

.host-name-1 {
padding-right: 20px;
}

.host-name-2 {
padding-left: 10px;
}
/* EO FRAME CODE  */


/* DEMOS FRAME CODE  */
.demo-frame {
display: flex;
width: 50%;
}
.image-playbtn-container {
width: 155px;
}
.demo-frame-content {
display: flex;
flex-direction: column;
gap: 10px;
flex: 1;
padding: 20px;
}

.demo-frame-title {
text-align: left;
font: normal normal bold 18px/23px Montserrat;
letter-spacing: 0px;
color: #545457;
opacity: 1;
border-bottom: 1.2px solid #E9E9E9;
padding-bottom: 10px;
}
.demo-frame-description {
text-align: left;
font: normal normal 300 14px/18px Montserrat;
letter-spacing: 0px;
color: #545457;
opacity: 1;
}

.btn-demo {
    height: 30px;
    display: flex;
    align-items: center;
    padding: 0px;
    font-family: montserrat;
    font-size: 14px;
    font-weight: 800;
    width: fit-content;
    padding: 5px 20px 5px 0px ;
    margin-left: -5px;
border: 1px solid #E9E9E9;
width: 100%;
margin-left: 0px;
border-radius: none !important;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
justify-content: center;
}
.btn-demo i {
font-size: 20px;
color: #FF4800;
}

.btn-demo:hover {
background-color: #FF4800;
color: white;
i {
color: white;
}
}

.demo-frame-image img {
border-top-left-radius: 10px;
border-top-right-radius: 10px;
border: solid 1px #E9E9E9;
}
.demos-section-title {
text-align: left;
font: normal normal bold 20px/23px Montserrat;
letter-spacing: 0px;
color: #545457;
opacity: 1;
padding: 50px 0px 10px 0px;
}
a {
text-decoration: none;
color: #545457;
}
.video-header {
height: 120px;
opacity: 1;
align-content: center;
}

.video-header h1 {
text-align: left;
font: normal normal bold 44px/53px Proxima Nova;
letter-spacing: 0px;
color: #FFFFFF;
opacity: 1;
max-width: fit-content;
margin: 0 auto;
}

.separators {
text-align: left;
font: normal normal 600 12px/15px Montserrat;
letter-spacing: 1.2px;
opacity: 1;

}

/* DEMOS FRAME CODE  */




/* labrador footer  */

footer {
margin-top: 30px;
}

.section-banner {
    text-align: center;
    background: #00376d;
    color: white;
    position: relative;
    z-index: 99;
}
.section-banner {
    height: 300px;
    position: relative;
}