h1,h3,ul {

margin: 0px;

padding: 0px;

}

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





html {

box-sizing: border-box;

padding: 0%;

margin: 0%;



}

body {

padding: 0%;

margin: 0%;

}



.a-object {

width: fit-content;



}



.menu-window {

position: fixed;

overflow: hidden;

height:100vh;

width:450px;

transform: translateX(-100%);

transition: all 0.3s ease-in-out;

border-right: 1px solid #bfbfbf;

background-color: white;

padding: 40px 0px 0px 50px ;

z-index: 11190;

}



#menu-window a {



text-decoration: none;



}

#menu-window ul {

list-style: none;
gap: 15px;


}





.menu-list-top{

display: flex;

flex-direction: column;

/* padding-top: 50px; */

padding-bottom: 30px;

gap: 5px;

}





.menu-list-top a {

color: black;

font-size: 30px;

font-family: Lato;

}





.menu-window .menu-list-bottom {

display: flex;

flex-direction: column;

justify-content: space-around;

font-family: monserrat;

gap: 5px;

}





.menu-list-bottom a {

font-family: montserrat;

font-weight: 600;

font-size: 22px;

color: #000000;

}



.menu-list-bottom .cat-colors-te {

border-left: 7px solid #4AA1AF;

padding-left: 8px;



}

.menu-list-bottom .cat-colors-cs {

border-left: 7px solid #1737B6 ;

padding-left: 8px;

}

.menu-list-bottom .cat-colors-zt {

border-left: 7px solid #3178F9;

padding-left: 8px;

}

.menu-list-bottom .cat-colors-id {

border-left: 7px solid  #933C30;

padding-left: 8px;

}

.menu-list-bottom .cat-colors-sec {

border-left: 7px solid #7B978B;

padding-left: 8px;

}

.menu-list-bottom .cat-colors-serv {

border-left: 7px solid #FF4800;

padding-left: 8px;

}





.menu-list-login-reg {



display: flex;

flex-direction: column;

font-family: monospace;

font-size: 20px;

margin-top:30px;

padding-top: 20px;

border-top: 1px #bfbfbf solid;

height: 250px;



}



.register-btn {

font-family: montserrat;

color: #FF4800;

font-size: 32px;

letter-spacing: 1;

}



.login-btn {

font-family: montserrat;

color: black;

font-size: 32px;

letter-spacing: 1;



}

.privacy-btn {

color: #bfbfbf;

font-size: 16px;

font-family: montserrat;

letter-spacing: 1;

margin-top: 40px;

}









/* 

.header-menu {

display: flex;

background-color: rgb(21, 20, 20);

list-style: none;

padding: 0%;

margin: 0px;

border-radius: 10px;

border: solid 1px red;

} */











.hidden-element

{

position: fixed;

width: 100%;

opacity:0;

transition: opacity 0.3s ease-in-out;

margin-top: -55px;

background-color: white;

height: 55px;

border-bottom: 1px #FF4800 solid;

padding-top: 5px;

padding-left: 100px;



}





.hide-menu {

display: flex;

justify-content: space-between;

align-content: center;

}



#menu-box {

display: flex;

align-items: center;

padding-right: 100px;

gap: 50px

}





#menu-box a {

text-decoration: none;

color: rgb(4, 4, 4);

text-decoration: none;

letter-spacing: 0;

color: black;

text-align: left;

font-weight: 800;

font-size: 21;

letter-spacing: 0px;

font-family: montserrat;



}

.hidden-element .cat-colors-te {

border-left: 7px solid #4AA1AF;

padding-left: 8px;

}

.hidden-element .cat-colors-cs {

border-left: 7px solid #1737B6 ;

padding-left: 8px;

}

.hidden-element .cat-colors-zt {

border-left: 7px solid #3178F9;

padding-left: 8px;

}

.hidden-element .cat-colors-id {

border-left: 7px solid  #933C30;

padding-left: 8px;

}

.hidden-element .cat-colors-sec {

border-left: 7px solid #7B978B;

padding-left: 8px;

}

.hidden-element .cat-colors-serv {

border-left: 7px solid #FF4800;

padding-left: 8px;

}



header .tdf-header-logo img {

width: 250px;

padding-top: 11px;

}



header {



display: flex;

flex-wrap: wrap;

padding: 0%;

background-color: white;

height: 55px;

border-bottom: 1px #FF4800 solid;

padding-left: 70px;

padding-top: 5px;



}





.register-box {

display: flex;

margin-left: auto;

margin-right: 5%;

gap: 15px;

font-family: montserrat;

margin-top: 3px;

}



.register-box a {

text-decoration: none;

text-align: center;

}



.register-header-btn {

width: 234px;

height: 34px;

color: black;

background-image: linear-gradient(90deg, #FF4800 0%, #FFB300 100%);

background-size: 0 100%;

background-repeat: no-repeat;

transition: .4s;

font-family: montserrat;

font-weight: 600;

border-radius: 10px;

line-height: 34px;

border: solid 1px transparent;

font-size: 14px;

border: solid 1px rgb(166, 163, 163);

}



.register-header-btn:hover {

background-size: 100% 100%;

  color: white;

}





.login-header-btn {

width: 234px;

height: 34px;

font-family: montserrat;

font-weight: 600;

border-radius: 10px;

border: solid 1px rgb(166, 163, 163);

background-image: linear-gradient(90deg, #FF4800 0%, #FF4800 100%);

background-size: 0 100%;

background-repeat: no-repeat;

transition: .4s;

line-height: 34px;

color: #000000;

font-size: 14px;

}



.login-header-btn:hover {

background-size: 100% 100%;

  color: white;

}



.open-close{

display: flex;

width: 40px;

height: 30px;

justify-content: center;

border-radius: 5px;

margin-top: 4px;

margin-right: 10px;

}



.open-close2 {

margin-left: -30px;

margin-top: 6px;

}



#menu-tab:hover {

opacity:  0.7;

}

#menu-tab {

margin-right: 40px;

cursor: pointer;

margin-top: 6px;

}

.hamburger-icon {

  width: 30px;

  height: 10px;

  position: relative;

  pointer-events: none;

}





.hamburger-icon span {

  display: block;

  background-color: black;

  position: absolute;

  height: 4px;

  width: 100%;

  border-radius: 9px;

  opacity: 1;

  left: 0;

  transform: rotate(0deg);

  transition: all 0.2s ease-out;

  

}



.hamburger-icon span:nth-child(1) {

  top: 2px;

}



.hamburger-icon span:nth-child(2), 

.hamburger-icon span:nth-child(3) {

  top: 9px;

}



.hamburger-icon span:nth-child(3) {

  top: 16px;

}



.hamburger-icon.active span:nth-child(1) {

  top: 9px;

  transform: rotate(45deg);

}



.hamburger-icon.active span:nth-child(2) {

  opacity: 0;

}



.hamburger-icon.active span:nth-child(3) {

  top: 9px;

  transform: rotate(-45deg);

}













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

/* main banner css */



.site-banner {





background-image: url("https://thedemoforum.com/page/about2/images/banner.png");

background-size: cover;

background-repeat: no-repeat;

padding: 30px;

border-bottom: 10px solid;

border-image-source: linear-gradient(270deg, #FF4800 0%, #FFB300 100%);

border-image-slice: 1;

margin-bottom: -70px;

}



.site-banner h1{



text-align: left;

font: normal normal bold 60px/73px Montserrat;

letter-spacing: 0px;

color: #FFFFFF;

opacity: 1;



}



.site-banner p {



text-align: left;

font: normal normal medium 29px/35px Montserrat;

letter-spacing: 0px;

color: #FFFFFF;

opacity: 1;



}

.site-title {

max-width: 1300px;

margin: 0 auto;



}



/* main banner css */







/* site content start here  */





.buyers-question-box {



background: #FFFFFF 0% 0% no-repeat padding-box;

box-shadow: 0px 3px 6px #00000029;

border-radius: 5px;

opacity: 0.93;

margin-bottom: 10px;

cursor: pointer;

user-select: none;

text-align: left;

font: normal normal bold 18px/27px Montserrat;

letter-spacing: 0.66px;

color: #545457;



opacity: 1;

padding: 10px;



}



i {

float: right;

font-size: 20px;

pointer-events: none;

transition: transform 0.05s ease-in-out;

}



.color1 {

color: #FF4800;

}

.color2 {

color: #7B978B;

}

.color3 {

color: #4376F4;

}

.color4 {

color: #1737B6;

}



.question-response-box .question-p:hover {

color: rgb(168, 166, 166);



}



.rotate {



transform: rotate(-90deg);

transition: transform 0.1s ease-in-out;

}





.display-off{

height: 0%;

opacity: 0; 

transition: all ease-in-out 0.3s;

overflow: hidden;

padding: 0px 90px 0px 20px;

}



.display-on {

opacity: 1;

transition:  0.3s ease;

height: 130px;

padding-top: 10px;

overflow: hidden;

}



br {

line-height: 8px;

}



a {

color: #EF631A;



}







.response-elm {

text-align: left;

letter-spacing: 0px;

font-family: 'Open Sans', sans-serif;

font-weight: 400;

line-height: 20px;

letter-spacing: 0.5px;

font-size: 15px;

}



.buyers-section-container {

max-width: 1000px;

margin: 0 auto;

margin-bottom: -70px;

}



.room-ul {

list-style-type: disc;

line-height: 20px;

margin-left: 20px;



}





.vendors-section-container {



max-width: 1000px;

margin: 0 auto  ;



}









.buyers-title {

display: flex;

gap: 10px;

justify-content: right;

margin: 20px 0px 20px 0px;

padding-top: 60px;

}



.butons {

padding: 5px 20px 5px 20px  ;

background: transparent linear-gradient(90deg, #C13600 0%, #C88C00 100%) 0% 0% no-repeat padding-box;

border-radius: 6px;

opacity: 1;

text-align: center;

font: normal normal bold 12px/19px Montserrat;

letter-spacing: 0px;

color: #FFFFFF;

opacity: 1;

margin-top: 20px;

}





.buyers-header {

display: flex;

background: transparent linear-gradient(171deg, #7B978B 0%, #1737B6 100%) 0% 0% no-repeat padding-box;

opacity: 1;

height: 100px;

text-align: left;

font: normal normal bold 60px/44px Montserrat;

letter-spacing: 0px;

color: #FFFFFF;

opacity: 1;

margin-bottom: 30px;

}





.vendors-header {

display: flex;

background: transparent linear-gradient(171deg, #CE9309 0%, #4376F4 100%) 0% 0% no-repeat padding-box;

opacity: 1;

height: 100px;

text-align: left;

font: normal normal bold 60px/44px Montserrat;

letter-spacing: 0px;

color: #FFFFFF;

opacity: 1;

margin-bottom: 30px;

}

.title-text  {

padding: 30px 0px 0px 10px;

}

a {

text-decoration: none;



}





.left-border-cat {

border-right: 10px solid ;

border-image-slice: 1;

border-image-source:linear-gradient(10deg, #FF4800 0%, #FFB300 100%);

width: 80px;

background: transparent linear-gradient(261deg, #1737B6 0%, #4AA1AF 100%) 0% 0% no-repeat padding-box;

opacity: 1;

}



.midle-title {

text-align: center;

font: normal normal bold 20px/22px Montserrat;

letter-spacing: 0px;

color: #000000;

opacity: 1;

margin: 0 auto;

max-width: 800px;

padding-top: 30px;

}



.midle-title-box {



margin: 40px 0px 80px 0px



}

















/* site content end here  */









/* footer CSS */





footer {

border-radius: 5px;

padding-top: 30px;



background-color: #ECECEC;

}





footer h2 {

text-align: left;

font: normal normal bold 16px/26px Montserrat;

letter-spacing: 0px;

color: black;

padding-bottom:20px;

}





footer ul{

list-style-type:  none;

padding-top:  0px;

}



.footer-inner-content-box {

margin: 0 auto  ;

border-bottom: 1px solid grey;

}



.footer-tdf-logo {

width: clamp(210px, 30%, 250px);



}







.logos-footer  {

display: flex;

gap: 10px;

padding-top: 25px;

padding-bottom: 25px;

font-size: 20px;



}



.logos-footer a i {

font-size: 25px;

color: #000000;

}







.footer-main-container a{

text-align: left;

font: normal normal normal 14px/26px Montserrat;

letter-spacing: 0px;

color: #000000;

text-decoration: none;



}







.links-list {

display: flex;

padding: 0px;

flex-wrap: wrap;

margin-bottom: 10px;

gap: 170px;

}







.links-list li {

margin-bottom: 15px;

line-height: 25px;

padding: 0px;

}



.tdf-2023 {

text-align: left;

font: normal normal 300 16px/36px Montserrat;

letter-spacing: 0px;

color: #000000;

opacity: 1;

padding-top: 10px;



}

.tdf-2023 span {

font-weight: 700;



}



.main-footer-container {

display: flex;

flex-direction: column;

margin: 0 auto;

justify-content: center;

max-width: 1340px;

margin-top: 30px;

}



/* footer CSS */