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

html,body,h1,p, h1 ,h2, h3, h6,a {
box-sizing: border-box;
padding: 0%;
margin: 0%;

}
html {
background-color: #F9F9F9;

}

.right-block-room .block-header {
background-image: url("../images/leftheader.svg");
padding: 30px 30px 30px 30px;

}


.sticky-wrap {
position:sticky;
top: 0px;

}

header {
background-color: white;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
padding: 0px 0px 0px 80px;
box-shadow: 0px 11px 15px #00000066;
opacity: 1;



    border-bottom: 10px solid transparent;
    border-image: linear-gradient(259deg, #0376FC 0%, #00FFB3 100%);
    border-image-slice: 1;
}

header ul {
display: inherit;
gap: 30px;
list-style: none;
flex-wrap: wrap;
}

.menu_buttons{
font-family: montserrat;
font-weight: 600;
font-size: 20px;
color: #000000;
}
a  {
text-decoration:  none;
}



.tdf_logo {
 padding-bottom: 3px;
 padding-left: 20px;

}


/* contene start here  */

.site-container {
max-width: 1920px;
display: flex;
flex-wrap: wrap;
justify-content: center;
width: 100%;
margin: 0 auto;
}

#content-room-container {
max-width: 1100px;
margin: 0 auto;
}


.left-block-room {

width: 100%;
max-width: 70%;
}



.right-block-room { 

width: 100%;
max-width: 30%;
/* border: solid 1px rgb(85, 81, 81); */
background-color: white;
color: white;
font-family: montserrat;
text-align: center;
font-size: 30px;
font-weight: 600;
}


.demo-piece-container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
/* max-width: 90%; */
row-gap: 50px;
margin: 0 auto;

}

.demo_piece {
display: flex;
width: 500px;
padding: 10px 20px 10px 0px;


}

.pic-and-btn-frame img {
width: 150px;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}




.demo-title-and-text h4 {
text-align: left;
font: normal normal bold 18px/23px Montserrat;
letter-spacing: 0px;
color: #545457;
opacity: 1;
padding: 10px 20px 10px 20px;
margin: 0px;
}


.demo_piece .demo-title-and-text p {

text-align: left;
font: normal normal 300 14px/18px Montserrat;
letter-spacing: 0px;
color: #545457;
opacity: 1;
padding: 10px 20px 10px 20px;
border-top: 1px solid #dad4d4;
}





/* content End here  */




.sub-titles-desing {
padding: 30px 20px 30px 20px;
display: flex;
justify-content: left;
align-items: center;
gap: 10px;
text-align: left;
font: normal normal bold 20px/23px Montserrat;
letter-spacing: 0px;
color: #545457;
opacity: 1;
}



.dot {
width: 50px;
height: 20px;
background: transparent linear-gradient(238deg, #0376FC 0%, #00FFB3 100%) 0% 0% no-repeat padding-box;
opacity: 1;
}

.exec-dot {
display: flex;
align-items: center;
gap: 10px;
padding: 20px;
}



.play-button {
display: flex;
align-items: center;
justify-content: center;
background: #FFFFFF 0% 0% no-repeat padding-box;
border: 1px solid #E9E9E9;
border-radius: 0px 0px 7px 7px;
opacity: 1;
text-align: center;
font: normal normal 600 16px/15px Montserrat;
letter-spacing: 0.5px;
color: #010101;
opacity: 1;
margin-top: -5px;
padding: 10px 10px 10px 10px;
}




.play-button:hover{

background: transparent linear-gradient(238deg, #0376FC 0%, #00FFB3 100%) 0% 0% no-repeat padding-box;
color: white;


.bi {
color: white;
}

}

.play-now-btn {
text-align: left;
font: normal normal 600 16px/15px Montserrat;
color: #111111;
opacity: 1;
padding: 0px 20px 20px 20px ;
display: flex;
align-items: center;
width: fit-content;
letter-spacing: 0.5px;
}


.play-now-btn:hover {
color: #0376FC;

}



.bi {
color: #0376FC;
font-size: 20px;

}

.logos_container  {

padding: 30px;


}
.logos_container img {
aspect-ratio: 3/2;
object-fit: contain;
width: 180px;

}

.demo-piece-logo {
width: 120px;
margin-left: 20px;
}



@media (max-width: 1440px) {
 
.site-container {
flex-direction: column;
}
.left-block-room {
max-width: 100%;
}
.right-block-room {
max-width: 100% !important;
}
header {
padding-top: 20px;

}
}
@media (max-width: 1024px) { 
header ul {
gap: 20px;
}
header {
padding: 20px 0px 10px 0px ;

}
.demo-piece-container {
padding: 10px;
}
.demo_piece {
width: 480px;

}
}


@media (max-width: 500px) { 
.right-block-room {
padding-left: 30px;
}
header {
padding: 0px 0px 0px 0px;
}
.header_logo_container {
padding: 10px 10px 5px 30px;
box-shadow: 0px 11px 15px #00000066;
}
.menu_buttons {
font-size: 15px;
}
header ul {
text-align: center;
justify-content: center;
gap: 15px;
padding: 5px;
}
.banner_inner_div {
padding: 10px 5px 10px 5px;
}
.banner_content {
width: 95%;
}
 h1 {
padding: 0%;
line-height: 30px;
text-align: center;
}
.h1_sub_title {
text-align: center;
}
.tittle_text {
padding: 5px;

}
.dspm_logo {
width: 40%;
}
.lower_title {
flex-direction: column;

}
.vendor_title {
padding: 0px;
}
.right-block-room {
padding: 0px;

}
.demo_piece {
padding: 10px;
}
}



footer {
background-image: url("https://www.dspmdemos.com/images/baner_bg.png");
height: 110px;
border-top-left-radius: 50px;
border-top-right-radius: 50px;
color: white;
text-align: center;
font-family: montserrat;
font-size: 30px;
line-height: 100px;
font-weight: 700;
}