*, *::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;

}


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

}

.block-header {
background-color: rgb(255, 72, 1);
padding: 20px;
font-size: 20px;
}



.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: 80%;
}



.right-block-room { 

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


.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 14px/17px 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-left: 20PX;

}





/* content End here  */




.sub-titles-desing {
padding: 30px 20px 30px 0px;
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: rgb(255, 72, 1)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: rgb(255, 72, 1);
color: white;

i {

 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 {

.bi {
color: white !important;
font-size: 20px;

}
}



.bi {
color: rgb(255, 72, 1);
font-size: 20px;

}

.logos_container  {
display: flex;
flex-wrap: wrap;
max-width: 200px;
margin: 0 auto;

}
.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;
}
}