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

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

}
html {
background-color: #F9F9F9;

}
.header-container {
position: sticky;
top: 0px;
z-index: 12;
}

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;
cursor: pointer;
user-select: none;
}

a 
 {
text-decoration:  none;
}


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

.demo-rooms-links {
position:absolute;
z-index: 2;
height: 0px;

width: 160px;
background-color: #0376FC;
border-radius: 5px;
margin-top: 10px;
transition: all 0.2s ease-in-out;
overflow: hidden;
font-size: 14px;
font-family: montserrat;
font-weight: 300;
}


.demo-rooms-links ul {
display: flex;
list-style-type: none;
padding: 0px;
gap: 10px;
padding: 10px;

}
li {
color: white;
}
.demo-rooms-links ul li:hover {
scale: 1.1;
user-select: none;
}

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







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

}


.first_section {


width: 97%;
margin: 0 auto;
}
.banner_inner_div {
display: flex;
position: relative;
justify-content: center;
align-items: center;
z-index: 2;
border-bottom-left-radius: 50px;
border-bottom-right-radius: 50px;
padding: 40px 20px 40px 20px;       
margin: 0 auto;
/* background: transparent linear-gradient(238deg, #0376FC 0%, #00FFB3 100%) 0% 0% no-repeat padding-box; */;
/* background-image: url("https://www.dspmdemos.com/images/baner_bg.png"); */
background-color: #0376FC;
background-position: center
}


.banner_footer { 
top: -40px;
position: relative;
z-index: 1;
height: 50px;
/* background: transparent linear-gradient(259deg, #0376FC 0%, #00FFB3 100%) 0% 0% ; */
background: transparent;

width: 97%;
margin: 0 auto;
border-bottom-left-radius: 530px;
border-bottom-right-radius: 530px;
}

.banner_content {
display: inherit;
justify-content: center;
align-items: center;
padding: 20px 20px 20px 20px;
width: 85%;
background-color: white;
border-radius: 42px;
}
.pic-container img { 
width: 100%;

}

.tittle_text {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
padding: 0px 20px 0px 50px;
}

.logos_container {

display: flex;
flex-wrap: wrap;
border-top: 2px gainsboro solid ;
margin-left: 50px;
justify-content: space-between;
}


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

}

.content_top_container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 10px 0px 0px 0px;
  border-left: 12px solid transparent;
  border-image-source: linear-gradient(180deg, #0376FC 0%, #00FFB3 100%);
  border-image-slice: 1;
  width: 90%;
  height: 90%;
  font-family: montserrat;
  font-size: 20px;
   
}

.right_text_element {
max-width: 400px;
text-align: right;
}

h1 {
   
  background:  #0376FC;
  -webkit-background-clip: text;
  color: transparent;
  font-family: montserrat;
  font-size: clamp(26px, 5vw, 44px);
  max-width: 600px;
  font-weight: 800;
  line-height: 50px;
   
}   

.h1_sub_title {

max-width: 450px;
padding: 20px 0px 30px 0px;
}

.middle_content_box {

display: flex;
flex-wrap: wrap;
justify-content: center;

}
.middle_container {
background-color: white;
width: 90%;
margin: 0 auto;
border-radius: 20px;
box-shadow: 0px 3px 6px #00000029;
padding: 50px 50px 50px 50px;
margin-bottom: 50px;
margin-top: 50px;
}

.header-middle {
margin: 0 auto;
width:600px;
text-align: center;
}
/* 
.header-text-container {
padding: 10px 10px 30px 10px;

} */



.middle_content_box {
width: 100%;
padding: 60px 10px 10px 10px;
justify-content: center ;
gap: 20px;
}


.cubes  {
display:flex;
justify-content: center;
align-items: center;
width: 100%;
max-width: 310px;
padding: 10px 20px 10px 10px;
border-left: 2px #0376FC solid;
font-family: montserrat;
font-size: 30px;
font-family: 700;
}
.cubes img {
padding-right: 30px;
width: 130px;
}


.cubes p:nth-of-type(1) {
font-weight: 700;
padding-bottom: 5px;
}

.cubes p:nth-of-type(2) {
font-size: 15px;
font-weight: 500;
}

.header_text {
text-align: center;
font-family: montserrat;
font-size: 19px;
max-width: 1100px;
margin: 0 auto;
font-weight: 500;
}

.pavillion-btn {
text-align: center;
background: transparent linear-gradient(259deg, #0376FC 0%, #00FFB3 100%) 0% 0% no-repeat padding-box;
max-width: 350px;
padding: 15px;
border-radius: 15px;
margin: 20px auto;
font-family: montserrat;
font-weight: 700;
font-size: 18px;
}

.next_section_banner {
border-top: 10px solid transparent;
border-image: linear-gradient(259deg, #0376FC 0%, #00FFB3 100%);
border-image-slice: 1;
flex-wrap: wrap;
display: flex;
justify-content: center;
align-items: center;
background-image: url("https://www.dspmdemos.com/images/midlebanner.png");
box-shadow: 0px -4px 6px #00000052;
padding: 80px 30px 80px 30px ;
color: white;
gap: 20px;
font-family: montserrat;
font-weight: 100;
margin-bottom: 30px;
}
.next_section_banner_content {
display: inherit;
max-width: 1680px;
gap: 20px;
}


.next_section_banner h2 {
font-size: 38px;
font-weight: 100;
}

.view-demo-btn {
background: transparent linear-gradient(252deg, #0376FC 0%, #00FFB3 100%) 0% 0% no-repeat padding-box;
font-family: montserrat;
padding: 15px 35px 15px 35px;
border-radius: 15px;
color: #000000;
font-weight: 800;
}


.next_section_banner  p {
max-width: 950px;
font-weight: 100;
}

.demos_container {

background-color: white;


}

.demos_frame {
display: flex;
flex-wrap: wrap;
background-color: white;
max-width: 1330px;
margin: 0 auto;
gap: 40px;
padding: 30px 0px 30px 0px;
}



.demos_frame h3 {
color: black;
font-family: lato;
font-size: 16px;
padding: 10px 0px 10px 0px;

}

.demos_frame p {
font-size: 15px;
font-family: lato;
color: #545457;
}

.demo img {
max-width: 100%;
border-radius: 10px;

}

.demo { 
display:flex;
flex-direction: column;
width: 413px;
height: 480px;
border: solid 2px  #EFEFEF;
border-radius: 15px;
padding: 10px;
}

.demo-logo {
width: 100px;

}

.demo-footer {
display: flex;
margin-top: auto;
justify-content: space-between;
align-items: center;
padding: 5px 0px 5px 0px;
}

.demo-btn {
background: transparent linear-gradient(255deg, #0376FC 0%, #00FFB3 100%) 0% 0% no-repeat padding-box;
font-family: montserrat;
padding: 5px 10px 5px 10px;
border-radius: 10px;
font-size: 12px;
font-weight: 700;
}

.intro {
margin: 0px;
max-width: 1630px;
margin: 45px auto 0px auto;
background-color: white;
border-radius: 30px;

}
.dspm-titles {
display: flex;
flex-wrap: wrap;
font-family: montserrat;
font-size: 30px;
justify-content: space-between;
width: 90%;
}



.demo-intro {
max-width: 700px;
font-family: montserrat;
padding-left: 30px;
}

/* .intro h6 {
text-align: left;
margin: 20px 10px 10px 10px;
text-decoration:dotted;
width: fit-content;


} */

a {
color: #000000;
}


.demo-intro h3 {
color: #000000;
padding: 20px 10px 10px 10px;
font-size: 24px;
}

.demo-intro p {
color: #000000;
padding: 10px 10px 10px 10px;
font-weight: 500;
}

.demo-intro h6 {
color: #000000;
padding: 10px 10px 10px 10px;
}

.demo-intro img {
max-width: 100%;

}

#img-box {
max-width: 100%;
border-radius: 10px;

}
#img-box1 {
max-width: 100%;

}


.intro-div {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
border-bottom: solid 1px grey;
padding: 40px 0px 20px 0px;
}


.intro-div h6 {
  font-size: clamp(26px, 5vw, 24px);


}

.dot {
display: flex;
width: 50px;
height: 20px;


}

.titles-dots-container {
display: flex;
align-items: center;
gap: 20px;
padding: 0px 0px 20px 0px;
}

.fill-green {

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

.fill-orange {

background: transparent linear-gradient(90deg, #FF4800 0%, #FFB300 100%) 0% 0% no-repeat padding-box;
opacity: 1;

}




.demo {
max-width: 443px;



}

.dspm-panels {
display: flex;
flex-wrap: wrap;
gap: 50px;
padding: 0px 0px 20px 0px;
border-bottom: 1px solid grey;
}


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

.logos-sub-container {
display: flex;
flex-wrap: wrap;
gap: 20px;
}

.logos-sub-container a img{
width: 150px;

}

.tab {
display: inherit;
padding-left: 50px;
margin-top: 30px;
background-color: #000349;
padding-top: 20px;
border-top-left-radius: 30px;
border-bottom-left-radius: 30px;
color: white;
}
#tab-title {
padding-bottom: 30px;
font-weight: 400;
letter-spacing: 0px;
font-size:30px;

}



.tab p:nth-of-type(2) {
padding-top: 30px;

}

.fix-one {
font-family: montserrat;
padding: 20px 30px 20px 30px;

}


.vendors-div {

max-width:800px;
font-family: montserrat;
font-weight: 500;
}

.titles-dots-container h6 {

font-size: clamp(16px, 5vw, 24px);
padding: 10px 10px 10px 10px ;
}
.vendors-div p:nth-of-type(1) {

max-width: 550px;

}

.vendors-div p:nth-of-type(2) {

padding-bottom: 30px;

}





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;

}


.text-container-doble p:nth-of-type(1) {
max-width: 1000px;

}



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


@media (max-width: 1440px) { 
header {
padding: 20px 0px 10px 80px ;

}

.tittle_text {

text-align: center;
justify-content: center;

}
.h1_sub_title {
max-width: 600px;
justify-content: center;
padding: 10px;
}
.right_text_element {
max-width: 600px;
text-align: center;
padding-bottom: 10px;
}
}


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

}
.tittle_text {

text-align: center;
justify-content: center;

}
.h1_sub_title {
max-width: 600px;
justify-content: center;
padding: 10px;
}
.right_text_element {
max-width: 600px;
text-align: center;
padding-bottom: 10px;
}
}




@media (max-width: 500px) { 
header {
padding: 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;

}
.right_text_element {
text-align: center;
border-bottom: transparent;
}
.content_top_container { 
border: transparent;
}
.logos_container {
border: transparent;
margin: 0px;
justify-content: center;
gap: 10px;
}

.demo-intro {
padding: 15px;
}
.dspm_logo {
width: 40%;

}
.middle_content_box img {
padding: 5px;

}
.tab {
max-width: 95%;
border-radius: 30px;
margin: 0 auto;
padding: 15px;
text-align: center;
}
.logos-sub-container {
padding: 15px;
justify-content: center;
}
.text-container-doble {
text-align: center;
}
.titles-dots-container-fix {
padding-left: 0px;

} 
.first_section {
width: 100%;

}

}











.menu_buttons:hover {
color: #0376FC;
}


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

}



/* contene start here  */


/* contene End here  */

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;

}