/* Expandable paragraph for solution descriptions */
.expandable-p {
  display: -webkit-box;
  -webkit-line-clamp:3;
  line-clamp: 5;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: max-height 0.3s ease;
  max-height: 7.5em;
}
.expandable-p.expanded {
  display: block;
  -webkit-line-clamp: unset;
  line-clamp: unset;
  max-height: none;
}
.read-more-btn {
  background: none;
  border: none;
  color: #FF4801;
  font-weight: bold;
  cursor: pointer;
  padding: 5px 0;
  font-size: 14px;
}
:root {
  --zerotrust: #4376F4;
  --sase: #9D2C2E;
  --TI: #4BA1AF;
}

h1,h3,h2,ul,p,h4,form {
  margin: 0px;
  padding: 0px;
}

a {
  text-decoration: none;
}

ul {
  list-style-type: none;
}

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

html {
  box-sizing: border-box;
  padding: 0%;
  margin: 0%;
}

#reginster-menu-1 {
    font-family: montserrat;
    color: #FF4800;
    font-size: 32px;
    letter-spacing: 1;
}


body {
  padding: 0%;
  margin: 0%;
}

.a-object {
  width: fit-content;
}



/* new code start here  */



.content-main-container {
display: flex;

width: 100%;
max-width: 1920px;
flex-wrap: wrap;
margin: 0 auto;
}


.media-container .media-content-container {
width: 200px;
height: 200px;
}

.media-container .media-container {
width: 85%;
}



.media-container .media-frame-container {
position: relative;
display: flex;
justify-content: right;
gap: 20px;

border-bottom: 1px solid #cccaca;
border-right: solid 1px #707070;
}

.header-grey-bg {
position: absolute;
top: 0;
width: 100%;
background-color: #F2F2F2;
height: 50px;
z-index: -1;
}

.media-box01 {
max-width: 600px;
}


.media-container .media-box01 {


background-color: #DDDDDD;
}

.media-container .media-box01 img {

border-radius: 10px;

}
.media-container .media-element-vertical {
display: flex;
}

.vertical-frame-conent {
max-width: 175px;
padding: 0px 0px 0px 10px;
}
.vertical-frame-conent h5 {
text-align: left;
font: normal normal bold 16px/19px Lato;
letter-spacing: 0px;
color: #545457;
opacity: 1;

}
.vertical-frame-conent p{
text-align: left;
font: normal normal 300 14px/17px Lato;
letter-spacing: 0px;
color: #545457;
opacity: 1;

}



.vertical-element-pic img  {
  width: 100%;
 
}
.vertical-element-pic {
  max-width: 150px;
  height: 215px;
  background-size: cover;
}


.media-container .media-box02 .media-element {
max-width: 324px;

}

.logo-company-container-vertical img {
width: 100%;
margin-top: 20px;
}


.logo-company-container-vertical {
width: 100px;

}

.media-container .image-container {
max-width: 324px !important;
}


.media-container .image-container-vetical {
max-width: 150px;
height: 215px;
background-size: cover;

}



.media-container .image-container {
position: relative;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
height: 165px;
width: 324px;
border-radius: 10px;
}
.media-container .image-container img {
width: 87px;
height: 27px;
aspect-ratio: 1/1;
object-fit: contain;
}



.media-container .logo-company-container {
border-radius: 10px;
overflow: hidden;
background-color: white;
width: fit-content;
position: absolute;
bottom: 10px;
right: 10px;
}


.media-container .logo-company-container2 {
overflow: hidden;
}


.media-container .logo-company-container2 img {
position: absolute;
bottom: -1;
left: 0;
width: 25px !important;
}
.media-container .media-box02 {

width: 100%;

flex: 1;
}



.media-container .media-box02 .media-element h5 {
text-align: left;
font: normal normal bold 16px/19px Lato;
letter-spacing: 0px;
color: #545457;
opacity: 1;
margin-top: 10px;
}
.media-container .media-box02 .media-element p {
text-align: left;
font: normal normal 300 12px/17px Lato;
letter-spacing: 0px;
color: #545457;
opacity: 1;

}



.media-container .media-elements-container {
display: flex;
flex-wrap: wrap;
max-width: 760px;
justify-content: center;
row-gap: 30px;
column-gap: 40px;
}


.media-container .media-box-header-box1 {
background-color: #FF4801;
text-align: left;
font: normal normal bold 18px/28px Roboto Mono;
letter-spacing: 0px;
color: #FFFFFF;
opacity: 1;
align-content: center;
padding: 10px 0px 10px 20px;
}


.media-container .media-box-header-box2 {
text-align: left;
font: normal normal bold 18px/28px Roboto Mono;
letter-spacing: 0px;
color: #000000;
opacity: 1;
padding: 10px 0px 10px 30px;
position: relative;
max-width: 760px;
margin: 0 auto;
}

.media-container .media-box-header-box2::before {
position: absolute;
content: "";
width:10px;
height: 30px;
background-color: #FF4801;
border-radius: 10px;
left: 10;
}


.box1-content-container {
background-color: #DDDDDD;
padding: 0px 20px 0px 25px;
}
.box1-content-container h5{
/* UI Properties */
text-align: left;
font: normal normal bold 20px/34px Roboto Mono;
letter-spacing: 0px;
color: #FF4801;
opacity: 1;
padding-top: 10px;
}
.box1-content-container p:nth-of-type(1) {
text-align: left;
font: normal normal bold 24px/29px Lato;
letter-spacing: 0px;
color: #545457;
opacity: 1;
padding-bottom: 10px;
}
.box1-content-container p:nth-of-type(2) {
text-align: left;
font: normal normal 300 16px/19px Lato;
letter-spacing: 0px;
color: #545457;
opacity: 1;

}
.title-container {
border-bottom: 1px solid #707070;
}

.site-title {
text-align: left;
font: normal normal bold 26px/21px Roboto Mono;
letter-spacing: 0px;
color: #545457;
opacity: 1;
padding: 20px 0px 20px 0px;
max-width: 1680px;
margin: 0 auto;
}


.box1-content-container , .media-elements-container {

margin-top: 30px;
}



.aside-content-container h3 {
position: relative;
text-align: left;
font: normal normal bold 18px/32px Roboto Mono;
letter-spacing: 0px;
color: #393939;
opacity: 1;
margin-bottom: 30px;
text-align: center;
max-width: fit-content;
margin: 0 auto;
padding-bottom: 20px;
}

.aside-content-container h3::before {
position: absolute;
content: "";
width:10px;
height: 30px;
background-color: #0089FF;
border-radius: 10px;
left: -20px;
}