html {
overflow-y:scroll;
scroll-behavior:smooth;
-moz-text-size-adjust:none;
-webkit-text-size-adjust:none;
text-size-adjust:none;
}
@font-face {
font-family:'Helvetica-Neue_bold';
src:url('../../fonts/HelveticaNeue-Bold.eot');
src:url('../../fonts/HelveticaNeue-Bold.eot?#iefix') format('embedded-opentype'),
url('../../fonts/HelveticaNeue-Bold.woff2') format('woff2'),
url('../../fonts/HelveticaNeue-Bold.woff') format('woff'),
url('../../fonts/HelveticaNeue-Bold.ttf') format('truetype'),
url('../../fonts/HelveticaNeue-Bold.svg#HelveticaNeue-Bold') format('svg');
font-weight:bold;
font-style:normal;
font-display:swap;
}
@font-face {
font-family:'Nunito-Sans_light';
src:url('../../fonts/NunitoSans-Light.eot');
src:url('../../fonts/NunitoSans-Light.eot?#iefix') format('embedded-opentype'),
url('../../fonts/NunitoSans-Light.woff2') format('woff2'),
url('../../fonts/NunitoSans-Light.woff') format('woff'),
url('../../fonts/NunitoSans-Light.ttf') format('truetype'),
url('../../fonts/NunitoSans-Light.svg#NunitoSans-Light') format('svg');
font-weight:300;
font-style:normal;
font-display:swap;
}
@font-face {
font-family:'Nunito-Sans_bold';
src:url('../../fonts/NunitoSans-Bold.eot');
src:url('../../fonts/NunitoSans-Bold.eot?#iefix') format('embedded-opentype'),
url('../../fonts/NunitoSans-Bold.woff2') format('woff2'),
url('../../fonts/NunitoSans-Bold.woff') format('woff'),
url('../../fonts/NunitoSans-Bold.ttf') format('truetype'),
url('../../fonts/NunitoSans-Bold.svg#NunitoSans-Bold') format('svg');
font-weight:bold;
font-style:normal;
font-display:swap;
}
body{
margin:0px;
padding:25px;
font-family:Nunito-Sans_light, Arial;
font-size:17px;
line-height:1.5;
text-align:left;
}
a {
outline:none;
}
.button:link {
background-color:#fab832;
color:black;
padding:8px;
text-align:center;
text-decoration:none;
border-radius:10px;
display:inline-block;
margin-right:10px;
margin-bottom:0px;
font-family:Nunito-Sans_bold, Arial;
font-size:15px;
text-transform:uppercase;
}
.button:hover {
background-color:#494949;
color:white!important;
text-decoration:none!important;
}
.button:hover {
background-color:#494949!important;
color:white!important;
text-decoration:none!important;
}
.button:visited {
background-color:#f8b742;
color:black;
text-decoration:none;
outline:none;
}
@media (max-width:768px) {
.button:link {
margin-right:0;
margin-bottom:10px;
width:100%;
box-sizing:border-box;
}
.button:last-child:link {
margin-bottom:0px;
}
}


.mockup-wrapper {
max-width:100%;
width:100%;
aspect-ratio:16 / 8;
border-radius:12px;
overflow:hidden;
position:relative;
text-align:center;
margin:auto;
}
.browser-bar {
height:40px;
display:flex;
align-items:center;
padding:0 16px;
position:relative;
}
.traffic-lights {
display:flex;
gap:8px;
}
.light {
width:12px;
height:12px;
border-radius:50%;
background-color:#ff5f56;
}
.light:nth-child(2) {
background-color:#ffbd2e;
}
.light:nth-child(3) {
background-color:#27c93f;
}
.scroll-pill {
position:absolute;
left:50%;
top:20px;
transform:translateX(-50%);
background:rgba(0, 0, 0, 0.8);
color:white;
padding:5px 14px;
border:1px solid white;
border-radius:999px;
font-size:14px;
display:flex;
align-items:center;
gap:8px;
}
.mouse-icon {
width:18px;
height:30px;
border:2px solid white;
border-radius:12px;
position:relative;
}
.mouse-icon .wheel {
width:4px;
height:6px;
background:white;
border-radius:2px;
position:absolute;
top:6px;
left:50%;
transform:translateX(-50%);
animation:scroll-wheel 1.2s infinite;
}
@keyframes scroll-wheel {
0% {
opacity:1;
top:6px;
}
50% {
opacity:0.4;
top:14px;
}
100% {
opacity:1;
top:6px;
}
}
.mockup-content {
height:calc(100% - 40px);
background:white;
overflow-y:auto;
}
.mockup-content img {
display:block;
width:100%;
height:auto;
border-radius:0;
}
@media (max-width:768px) {
.scroll-pill {
font-size:12px;
padding:4px 10px;
}
.mouse-icon {
width:14px;
height:24px;
}
}

.mockup-fullwidth {
width:100%;
border-radius:12px;
position:relative;
text-align:center;
overflow:visible;
}
.mockup-scroll-box {
width:100%;
height:600px;
overflow-y:auto;
border-radius:12px;
position:relative;
}
.mockup-image-container {
position:relative;
width:100%;
height:auto;
}
.mockup-image-container img {
display:block;
width:100%;
height:auto;
border-radius:0;
}
.img-label {
position:absolute;
bottom:10px;
left:10px;
font-size:14px;
text-align:left;
padding:5px 10px;
border-radius:10px;
z-index:999;
}
.mockup-scroll-pill {
position:absolute;
top:-20px;
left:50%;
transform:translateX(-50%);
background:rgba(0, 0, 0, 0.8);
color:white;
padding:5px 14px;
border:1px solid white;
border-radius:999px;
font-size:14px;
display:flex;
align-items:center;
gap:8px;
z-index:10;
}
.mouse-icon {
width:18px;
height:30px;
border:2px solid white;
border-radius:12px;
position:relative;
}
.mouse-icon .wheel {
width:4px;
height:6px;
background:white;
border-radius:2px;
position:absolute;
top:6px;
left:50%;
transform:translateX(-50%);
animation:scroll-wheel 1.2s infinite;
}
@keyframes scroll-wheel {
0% {
opacity:1;
top:6px;
}
50% {
opacity:0.4;
top:14px;
}
100% {
opacity:1;
top:6px;
}
}
@media (max-width:768px) {
.mockup-scroll-pill {
font-size:12px;
padding:4px 10px;
}
.mouse-icon {
width:14px;
height:24px;
}
/* Remove scroll when image is fully visible */
.mockup-scroll-box {
height:auto;
overflow-y:hidden;
}
.mockup-image-container img {
height:100%;
}
}


.desktop-container {
display:flex;
justify-content:space-between;
gap:30px;
}
.desktop-wrap {
word-wrap:break-word;
}
.desktop-text {
width:60%; /* Red box width */
}
.desktop-showcase {
width:40%;
margin-top:50px;
}
.desktop-showcase img {
max-width:100%;
height:auto;
}
@media (max-width:960px) {
.desktop-container {
flex-direction:column;
align-items:center;
gap:30px;
}
.desktop-wrap {
width:100%;
}
.desktop-showcase {
width:100%;
display:flex;
justify-content:center;
margin-top:0px;
}
.desktop-showcase img {
max-width:100%;
height:auto;
}
}


.imac-wrapper {
width:100%;
max-width:760px;
}
.imac {
position:relative;
display:block;
width:100%;
}
.imac__screen {
position:relative;
display:block;
width:100%;
padding-bottom:65.7894736842%;
overflow:hidden;
border-radius:4.2105263158% / 6.4%;
}
.imac__screen:before,
.imac__screen:after {
position:absolute;
content:"";
width:100%;
}
.imac__screen:before {
top:0;
left:0;
padding-bottom:56.8421052632%;
border-top-left-radius:4.2105263158% 6.4%;
border-top-right-radius:4.2105263158% 6.4%;
background-color:#2c3134;
}
.imac__screen:after {
bottom:0;
left:0;
padding-bottom:8.9473684211%;
border-bottom-left-radius:4.2105263158% 47.0588235294%;
border-bottom-right-radius:4.2105263158% 47.0588235294%;
background-color:#d1d1d1;
}
.imac .camera {
position:absolute;
width:1.8421052632%;
height:2.8%;
top:1.8%;
left:50%;
overflow:hidden;
z-index:90;
border-radius:100%;
background-color:#000;
transform:translateX(-50%);
}
.imac .camera:before {
position:absolute;
content:"";
width:100%;
height:100%;
top:21.4285714286%;
left:0;
border-radius:100%;
background-color:#191d20;
}
.imac .shine {
position:absolute;
width:45.1315789474%;
height:100%;
top:0;
right:0;
z-index:100;
}
.imac .shine:before {
position:absolute;
content:"";
width:100%;
height:120%;
top:-21%;
right:-27.6967930029%;
background-color:rgba(255, 255, 255, 0.2);
transform-origin:center center;
transform:rotateZ(-25.5deg);
}
.imac .display {
position:absolute;
top:6.4%;
bottom:20.6%;
left:4.2105263158%;
right:4.2105263158%;
overflow:hidden;
}
.imac .display img {
width:100%;
height:100%;
object-fit:cover;
display:block;
object-position:top;
border-radius:0;
}
.imac .logo {
position:absolute;
width:4.7368421053%;
height:6.2%;
bottom:3%;
left:50%;
z-index:90;
border-radius:36% 36% 41% 41%/42% 42% 75% 75%;
-webkit-transform:translateX(-50%);
-moz-transform:translateX(-50%);
-ms-transform:translateX(-50%);
-o-transform:translateX(-50%);
transform:translateX(-50%);
}
.imac .logo,
.imac .logo .butt:before,
.imac .logo .top span:after,
.imac .logo .butt:after,
.imac .logo .top:before,
.imac .logo .top:after,
.imac .logo .butt:before,
.imac .logo .butt:after {
background-color:#828383;
}
.imac .logo .bite,
.imac .logo .butt span,
.imac .logo .butt,
.imac .logo .top,
.imac .logo .top span {
background:#d1d1d1;
}
.imac .logo .bite {
position:absolute;
width:60%;
height:62%;
top:8%;
right:-40%;
border-radius:60%;
}
.imac .logo .butt,
.imac .logo .butt span {
position:absolute;
}
.imac .logo .butt {
position:absolute;
width:100%;
height:4%;
bottom:-1%;
}
.imac .logo .butt span {
display:block;
width:24.5%;
height:400%;
bottom:-239%;
left:38%;
border-radius:100% 100% 0% 0%;
}
.imac .logo .butt:before {
position:absolute;
content:"";
width:24%;
height:400%;
bottom:38%;
left:21%;
border-radius:0% 0% 100% 100%;
}
.imac .logo .butt:after {
position:absolute;
content:"";
width:23.4%;
height:400%;
bottom:38%;
right:21%;
border-radius:0% 0% 100% 100%;
}
.imac .logo .top,
.imac .logo .top span {
position:absolute;
}
.imac .logo .top {
width:42%;
height:4%;
top:0;
left:29%;
}
.imac .logo .top span {
display:block;
width:63%;
height:259%;
top:-92%;
left:18.6%;
z-index:3;
border-radius:0 0 44% 44%/0 0 100% 100%;
}
.imac .logo .top span:after {
position:absolute;
content:"";
width:90%;
height:242%;
top:-193%;
left:41%;
border-radius:100% 0;
}
.imac .logo .top:before {
position:absolute;
content:"";
width:62%;
height:260%;
top:1%;
left:-27%;
border-radius:100% 100% 0% 0%/100% 200% 0% 0%;
}
.imac .logo .top:after {
position:absolute;
content:"";
width:62%;
height:260%;
top:1%;
right:-27%;
border-radius:100% 100% 0% 0%/200% 100% 0% 0%;
}
.imac__stand {
position:relative;
display:block;
width:40.5263157895%;
padding-bottom:13.1578947368%;
margin:0 auto;
}
.imac__stand:after {
position:absolute;
content:"";
width:111.6883116883%;
height:6%;
bottom:-4%;
left:50%;
z-index:1;
border-radius:100%;
background-color:rgba(0, 0, 0, 0.2);
transform:translateX(-50%);
}
.imac__stand .top {
position:absolute;
width:58.4415584416%;
height:74%;
top:0;
left:50%;
background-color:#bfbfc0;
transform:translateX(-50%);
}
.imac__stand .top:before {
position:absolute;
content:"";
width:100%;
height:25.6756756757%;
top:0;
left:0;
background-color:#939699;
}
.imac__stand .bottom {
position:absolute;
width:100%;
height:26%;
bottom:0;
left:0;
z-index:2;
background-color:#d1d1d1;
}


img {
width:100%;
height:auto;
border-radius:10px;
}
.img-container {
width:100%;
position:relative;
text-align:center;
margin:auto;
border-radius:10px;
}
.img-container-normal {
width:80%;
position:relative;
text-align:center;
margin:auto;
border-radius:10px;
}
.img-container-small {
width:60%;
position:relative;
text-align:center;
margin:auto;
border-radius:10px;
}


.img-flex-wrapper {
display:flex;
flex-wrap:wrap;
gap:20px;
justify-content:space-between;
width:100%;
margin:0 auto;
box-sizing:border-box;
}
.img-container-side {
flex:1 1 100%;
border-radius:10px;
overflow:hidden;
text-align:center;
position:relative;
}
.img-container-side img {
width:100%;
height:auto;
object-fit:contain;
object-position:top center;
display:block;
}
.tiles-2 .img-container-side {
flex:1 1 calc(50% - 10px);
}
.tiles-3 .img-container-side {
flex:1 1 calc(33.333% - 13.34px);
}
.tiles-4 .img-container-side {
flex:1 1 calc(25% - 15px);
}
@media screen and (max-width:800px) {
.img-flex-wrapper {
flex-direction:column;
}
.img-container-side {
flex:1 1 100%;
}
}


a .img-container,
a .img-container-normal,
a .img-container-small {
border:none;
}

.no-border {
border:0px!important;
}
.no-border_top {
border-top:0px!important;
}
.no-bg {
background:none!important;
}
.margin-top {
margin-top:30px!important;
}
.margin-top-small {
margin-top:10px!important;
}
.margin_top-bottom {
margin-top:30px!important;
margin-bottom:30px!important;
}
.margin_bottom {
margin-bottom:20px!important;
}
.no-top {
margin-top:0px!important;
padding-top:0px!important;
}
.no-bottom {
margin-bottom:0px!important;
}

.img-container-right {
width:35%;
float:right;
margin:5px 0px 20px 20px;
clear:both;
border-radius:10px;
}
.img-container-right-alt {
width:35%;
float:right;
margin:5px 0px 20px 20px;
clear:both;
}
@media (max-width:580px) {
.img-container-right,
.img-container-right-alt {
width:100%!important;
float:none!important;
margin:0 0 30px 0!important;
display:block;
}
}

.image-link {
display:inline-block;
padding:0;
margin:0;
border-radius:10px;
position:relative;
transition:transform 0.3s ease;
width:100%;
box-sizing:border-box;
outline:none;
text-decoration:none;
}
.image-link img {
display:block;
width:100%;
height:auto;
max-width:100%;
max-height:100%;
border:4px solid #f8b742;
border-radius:10px;
box-sizing:border-box;
transition:transform 0.3s ease, border-color 0.3s ease;
pointer-events:auto;
z-index:5;
outline:none;
box-shadow:none;
}
.image-link img:focus,
.image-link img:active {
outline:none;
box-shadow:none;
}
.image-link:hover img {
transform:scale(1.05); 
transform-origin:center center;
border-color:#494949;
z-index:15;
outline:none;
}
/* Disable hover behavior on the container */
.image-link {
pointer-events:none;
}
/* Enable pointer-events only on the image */
.image-link img {
pointer-events:auto;
}

.img-float-link {
float:right;
width:35%;
margin:5px 0 20px 20px;
display:inline-block;
position:relative;
}
.img-float-link img {
width:100%;
height:auto;
display:block;
border-radius:10px;
border:4px solid #f8b742;
transition:transform 0.3s ease, border-color 0.3s ease;
}
.img-float-link:hover img {
transform:scale(1.05);
transform-origin:center center;
border-color:#494949;
}
.img-float-link::after {
content:'';
display:block;
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
background:transparent;
z-index:1;
}

.sub-title.overview {
width:100%;
display:inline-block;
padding-top:20px;
padding-bottom:15px;
text-align:center;
text-transform:uppercase;
font-family:Nunito-Sans_bold, Arial;
font-size:20px;
}
.title {
font-family:Helvetica-Neue_bold, Arial;
font-size:30px;
color:#ffffff;
}

/* Styles for the contents page */
#anchor {
padding-top:20px;
}
.contents-box {
flex:0 1 30%;
padding:0px;
border-radius:10px;
margin-bottom:0px;
}
@media (max-width:680px) {
.contents-box {
flex:0 1 100%; /* Full width in mobile view */
margin:0; /* Remove margin between boxes */
}
.contents-box {
padding-bottom:0; /* Remove padding at the bottom */
border-bottom-left-radius:0; /* Round corners */
border-bottom-right-radius:0; /* Round corners */
}
.contents-box:nth-child(n+2) {
padding-top:0; /* Remove padding at the top of all but the first */
border-top-left-radius:0; /* Round corners */
border-top-right-radius:0; /* Round corners */
}
}
.para {
width:100%;
text-align:left;
margin:auto;
padding-left:10%;
padding-right:10%;
padding-top:40px;
padding-bottom:40px;
}


.project-versions {
display:flex;
flex-direction:column;
gap:15px;
}
.project-version-info img {
float:right;
width:250px;
height:210px;
object-fit:cover;
object-position:top!important;
margin-left:20px;
}
.project-version-info img.custom-width {
width:100%;
height:auto;
max-width:320px;
float:right;
object-fit:cover;
object-position:top !important;
margin-left:20px;
}
.project-version-info img.left-align {
object-position:left!important;
}
.project-version-info .custom-height {
height:150px;
}
.project-version.full-width {
display:flex;
flex-direction:column;
justify-content:space-between;
position:relative;
}
.project-version.full-width img {
width:100%;
height:auto;
object-fit:cover;
object-position:top;
border-radius:10px;
margin-bottom:15px;
}
.project-version.full-width img:last-child {
margin-bottom:0;
}
.img-wrap {
position:relative;
display:inline-block;
float:right;
margin-left:20px;
width:250px;
height:210px;
}
.img-wrap.alt-style {
margin-left:15px!important;
}
.img-wrap img {
width:100%;
height:100%;
object-fit:cover;
object-position:top!important;
display:block;
}
.img-wrap img.alt-style {
object-position:right;
}
.project-img-label {
position:absolute;
bottom:0;
left:0;
font-size:12px;
padding:4px 8px;
margin:0 0 6px 6px;
border-radius:6px;
text-transform:uppercase;
pointer-events:none;
}

/* Responsive Styles */
@media (max-width:1100px) and (min-width:767px) {
.project-version-info {
display:block;
}
/* Make sure the images stack properly */
.img-wrap {
display:block;
clear:both; /* Forces stacking under previous image */
}
.img-wrap.alt-style {
margin-bottom:15px!important;
}
}

@media (max-width:768px) {
.project-container {
padding:15px;
}
.project-version {
flex-direction:column;
align-items:flex-start;
}
.project-version.standalone {
padding:15px;
}
.project-description {
margin-bottom:20px;
}
.project-version-info img {
width:100%;
height:200px;
margin-bottom:30px;
margin-left:0px;
}
.project-version-info .custom-height {
height:200px;
}
.project-version-info {
width:100%;
margin-right:0px;
}
.project-version-info a {
margin-top:0px;
}
.img-wrap {
width:100%;
height:200px;
margin-bottom:30px;
}
.img-wrap.alt-style {
margin-bottom:15px!important;
}
}


.center {
display:block;
margin-left:auto;
margin-right:auto;
}

#overview {
scroll-margin-top:50px;
}
.circle {
width:60px;
height:60px;
background-color:#fab832;
border-radius:50%;
position:absolute;
top:-30px; /* Increased to move the circle further down */
left:50%;
transform:translateX(-50%);
z-index:2;
display:flex;
align-items:center;
justify-content:center;
color:#222222;
}
.columns {
display:flex;
flex-flow:row wrap;
justify-content:center;
margin-top:50px;
margin-bottom:0px;
gap:0;
}
.column {
position:relative;
padding-top:70px;
flex:1;
padding:20px;
border-radius:10px;
background:#222;
box-shadow1:0 4px 12px rgba(0, 0, 0, 0.3);
margin:0;
}
.icon {
height:auto;
max-width:60%;
max-height:60%;
border-radius:0%;
}


.columns-new {
display:flex;
flex-flow:row wrap;
justify-content:center;
gap:0;
}
.column-new {
position:relative;
padding-top:70px;
flex:1;
padding:20px;
border-radius:10px;
background:#222;
display:flex;
flex-direction:column;
justify-content:flex-start;
}
.alt-height {
height:160px; /* Change this value to what you want */
object-fit:cover;
object-position:top!important;
}


.column-two {
display:grid;
grid-template-columns:repeat(2, 1fr);
gap:20px;
}
.column-two-box {
padding:20px;
border-radius:10px;
background:#222;
display:flex;
flex-direction:column;
}
.column-two-box ul {
margin-bottom:15px;
}
.info-box {
border-radius:10px;
padding:15px;
margin-top:auto;
}

.feature {
width:100%;
height:auto;
margin:0;
}
/* Desktop styling for columns */
@media screen and (min-width:981px) {
.column {
padding:20px;
}
.columns .column {
margin:0px;
}
.columns .column:nth-child(1) {
margin-right:20px;
}
.columns .column:nth-child(2) {
margin-right:20px; 
}

.column-new {
padding:20px;
}
.columns-new .column {
margin:0px;
}
.columns-new .column-new:nth-child(1) {
margin-right:20px;
}
.columns-new .column-new:nth-child(2) {
margin-right:20px; 
}
}
/* Tablet styling */
@media screen and (max-width:980px) {
.column {
padding:20px;
}
.columns .column {
flex-basis:40%;
margin:0px;
}
.columns .column:nth-child(1) {
margin-right:20px;
}
.columns .column:last-child {
flex-basis:100%;
margin-top:45px;
}
.column img {
height:210px;
object-fit:cover;
object-position:top;
}

.column-new {
padding:20px;
}
.columns-new .column-new {
flex-basis:40%;
margin:0px;
}
.columns-new .column-new:nth-child(1) {
margin-right:20px;
}
.columns-new .column-new:last-child {
flex-basis:100%;
margin-top:20px;
}

.column-two {
grid-template-columns:1fr;
}
}
/* Mobile styling */
@media screen and (max-width:680px) {
.column {
padding:15px;
}
.columns {
display:flex;
flex-wrap:wrap;
}
.columns .column {
flex-basis:100%;
margin-bottom:0px;
}
.columns .column:nth-child(1) {
margin-right:0px;
margin-bottom:45px;
}
.columns .column:last-child {
margin-bottom:0px;
}
.para {
width:100%;
padding-left:5%;
padding-right:5%;
}
.img-container,
.img-container-normal,
.img-container-small{
width:100%!important;
}

.column-new {
padding:15px;
}
.columns-new {
display:flex;
flex-wrap:wrap;
}
.columns-new .column-new {
flex-basis:100%;
margin-bottom:0px;
}
.columns-new .column-new:nth-child(1) {
margin-right:0px;
margin-bottom:20px;
}
.columns-new .column-new:last-child {
margin-bottom:0px;
}
}


/* Responsive Table Structure */
.responsive-table {
width:100%;
font-family:'Nunito-Sans_light', Arial;
padding-top:30px;
display:table;
}
.table-cell, .header-cell {
vertical-align:top;
}
/* Header Row */
.table-header {
display:table-row;
font-family:'Helvetica-Neue_bold', Arial;
font-size:16px;
text-align:left;
text-transform:uppercase;
padding:12px;
border-top-left-radius:8px;
border-top-right-radius:8px;
}
.table-row {
display:table-row;
border-radius:0;
}
/* Alternate Row Colors */
.table-row:nth-child(odd) {
}
.table-cell {
font-size:16px;
line-height:1.5;
padding:12px;
display:table-cell;
border:none;
white-space:normal;
}
.table-row .table-cell:last-child {
border-right:none!important;
}
/* Main Issue Styling with Padding and Yellow Box */
.main-issue {
font-family:'Nunito-Sans_bold', Arial;
font-size:16px;
color:#ffffff;
padding:12px 12px;
}
.header-cell {
padding:12px;
display:table-cell;
font-weight:bold;
border-right:1px solid #444;
border-bottom:1px solid #444;
}
/* Remove right border from the last header cell */
.table-header .header-cell:last-child {
border-right:none;
}
/* Mobile View - Horizontal Scrolling */
@media (max-width:679px) {
/* Add a wrapper for horizontal scrolling */
.table-wrapper {
width:100%;
overflow-x:auto; /* Enable horizontal scrolling */
-webkit-overflow-scrolling:touch;
}
.responsive-table {
width:100%;
min-width:1200px; /* Set a fixed minimum width for the table */
overflow-x:auto; /* Enable horizontal scrolling */
white-space:nowrap; /* Prevent text wrapping */
}
.table-row {
display:table-row; /* Keep rows intact */
}
.table-cell, .header-cell {
display:table-cell; /* Keep cells inline within rows */
padding:12px; /* Consistent, reduced padding */
white-space:normal; /* Allow content to wrap within cells */
}
.main-issue {
border-radius:0px; /* Keep square edges */
font-weight:bold;
}
}

.more-rows {
display:none;
}
.more-rows.show {
display:table-row;
}
#toggleButtonWrapper {
width:100%;
margin-top:0;
margin-bottom:30px;
padding:0;
}
.toggleButton {
display:inline-block;
padding:8px 15px;
background-color:#f8b742;
font-family:'Nunito-Sans_bold', Arial;
font-size:15px;
color:#000000;
font-size:15px;
text-align:center;
border:none;
border-radius:10px;
cursor:pointer;
box-sizing:border-box;
text-transform:uppercase;
}
.toggleButton:hover {
color:#ffffff;
background-color:#494949;
}

.improvement {
font-family:Nunito-Sans_bold, Arial;
font-size:16px;
color:#ffffff;
background-color:#222;
}
.description ul, .suggestions ul {
padding-left:20px;
padding-top:0px;
padding-bottom:0px;
}
.suggestions {
font-family:Nunito-Sans_light, Arial;
padding-top:0px;
padding-bottom:0px;
}

.image-box {
width:100px;
height:100px;
background-color:#fab832;
border-radius:50%;
border:4px solid #fab832;
position:absolute;
top:-50px; /* half out */
left:50%;
transform:translateX(-50%);
z-index:2;
display:flex;
align-items:center;
justify-content:center;
}
.profile-image {
width:100%;
height:100%;
object-fit:cover;
border-radius:50%;
}
.profile-content {
display:block;
margin-top:10px;
}
/* Profile Boxes */
.profile-boxes {
display:flex;
flex-wrap:wrap;
gap:10px;
justify-content:space-between;
}
.goal-list {
padding-left:15px;
padding-top:0px;
list-style-type:disc;
margin-bottom:0!important;
}
.goal-list ul {
margin-bottom:0!important;
padding-bottom:0!important;
}
.goal-list li:last-child {
margin-bottom:0!important;
padding-bottom:0!important;
}

.styled-quote-box p {
margin:0;
font-style:italic;
z-index:1;
position:relative;
}
.quote-icon {
font-size:60px!important;
color:#f8b742;
position:absolute;
font-family:Helvetica-Neue_bold, Arial;
opacity:0.8;
z-index:0;
width:40px;
max-width:40px;
letter-spacing:0px;
}
.quote-icon.top-left {
top:-10px;
left:0px;
}
.quote-icon.bottom-right {
bottom:-40px;
right:18px;
}

.quote-icon {
font-family:Helvetica-Neue_bold, Arial, sans-serif;
font-size:3.5rem;
color:#fab832;
position:absolute;
z-index:1;
opacity:0.8;
}
.quote-icon.top-left {
top:-8px;
left:-5px;
}
.quote-icon.bottom-right {
bottom:-40px;
right:10px;
transform:rotate(0deg); /* Rotates the closing quote */
}
@media (max-width:768px) {
.quote-text {
padding:30px;
}
}


@media (max-width:768px) {
.profile-container {
padding:15px;
flex-direction:column;
align-items:center;
}
.image-box {
width:100px;
height:100px;
margin-bottom:10px;
}
.image-caption {
width:100%;
margin-left:0;
margin-right:0;
}
.profile-content {
width:100%;
margin-top:10px;
text-align:center;
}
.profile-boxes {
display:block;
width:100%;
}
.profile-box {
width:100%;
margin-bottom:10px;
}
.profile-box:last-child {
margin-bottom:0!important;
}
.quote-text::before,
.quote-text::after {
font-size:3rem;
}
}


.competitor-content {
overflow:hidden;
position:relative;
}
.competitor-image {
float:right;
width:49%;
height:100%;
object-fit:cover;
object-position:top;
border-radius:10px;
margin-left:20px;
margin-bottom:0px;
}
.competitor-pro-con {
display:flex;
justify-content:space-between;
gap:20px;
margin-top:20px;
}
.pro-con-list {
padding-left:15px;
list-style-type:disc;
margin-bottom:0!important;
}
.pro-con-list ul {
margin-bottom:0!important;
padding-bottom:0!important;
}
.pro-con-list li:last-child {
margin-bottom:0!important;
padding-bottom:0!important;
}
/* Mobile Styles */
@media (max-width:580px) {
.competitor-container {
padding:15px;
}
.competitor-title {
font-size:20px;
}
.competitor-content {
flex-direction:column;
align-items:center;
}
.competitor-image {
width:100%;
height:100%;
object-fit:cover;
object-position:top;
margin-left:0px;
margin-bottom:20px;
}
.competitor-pro-con {
flex-direction:column;
width:100%;
gap:10px;
}
.pro-box,
.con-box {
width:100%;
margin-bottom:0px;
}
}

.prototype-content {
overflow:hidden;
position:relative;
}
.prototype-image {
float:right;
width:50%;
height:300px;
object-fit:cover;
object-position:top;
border-radius:10px;
margin-left:20px;
margin-bottom:20px;
border-radius:10px!important;
}
.prototype-buttons {
display:flex;
flex-wrap:wrap; /* Allow buttons to wrap */
justify-content:flex-start; /* Align buttons to the left */
gap:10px;
width:100%;
margin-top:20px;
box-sizing:border-box;
}
.prototype-button:link {
background-color:#f8b742;
color:black;
text-align:center;
text-decoration:none;
border-radius:10px;
font-family:'Nunito-Sans_bold', Arial;
font-size:15px;
text-transform:uppercase;
line-height:1.2;
width:calc(20% - 10px); /* 5 buttons per row on desktop */
box-sizing:border-box; /* Ensure no overflow caused by padding/margin */
margin-right:0; /* No margin to avoid overflow */
margin-bottom:5px; /* Consistent bottom margin */
display:flex;
justify-content:center; /* Centers text horizontally */
align-items:center; /* Centers text vertically */
padding:8px 15px; /* Padding to reflect the text size */
}
.prototype-button:hover {
background-color:#494949!important;
color:white!important;
text-decoration:none!important;
}
.prototype-button:visited {
background-color:#f8b742;
color:black;
text-decoration:none;
outline:none;
}
@media (max-width:1024px) {
.prototype-buttons .prototype-button {
width:calc(33.33% - 10px); /* 3 buttons per row on tablet screens */
}
}
@media (max-width:768px) {
.prototype-container {
padding:15px;
}
.prototype-content {
flex-direction:column;
align-items:center;
}
.prototype-image {
width:100%;
height:300px;
margin-bottom:20px;
object-fit:cover;
object-position:top;
border-radius:10px!important;
}
.prototype-buttons {
width:100%;
margin-top:20px;
}
.prototype-button:link {
width:100%;
font-size:14px;
padding:8px 15px;
margin-bottom:5px;
}
}
@media (max-width:480px) {
.prototype-buttons .prototype-button {
width:100%; /* 1 button per row on very small screens */
}
}


.sticky-container {
display:flex;
flex-wrap:wrap;
justify-content:flex-start;
gap:20px; /* NEW:controls space between boxes */
margin:20px 0;
}

.sticky-box {
padding:15px;
border-radius:10px;
flex:1 1 calc(33.333% - 20px); /* NEW:3 per row, minus gap */
text-align:center;
font-family:Nunito-Sans_light, Arial;
font-size:16px;
line-height:1.5;
box-sizing:border-box; /* Make sure padding fits inside width */
}

.sticky-box ul {
text-align:left;
padding-left:20px; /* optional */
}

.sticky-box.purple { background-color:#c7a6d3; color:black; }
.sticky-box.green { background-color:#b7e6b6; color:black; }
.sticky-box.blue { background-color:#a5cbf0; color:black; }
.sticky-box.yellow { background-color:#fef7b5; color:black; }
.sticky-box.orange { background-color:#fda155; color:black; }
.sticky-box.pink { background-color:#ef959f; color:black; }

.sticky-box .title {
font-family:Nunito-Sans_bold, Arial;
font-size:16px;
margin-bottom:4px;
text-transform:uppercase;
}

.sticky-box.white-title .title,
.sticky-box.black-title .title {
color:black;
}

@media (max-width:768px) {
.sticky-box {
flex:1 1 100%;
padding:10px;
}
}


.sticky-container-4 {
display:flex;
flex-wrap:wrap;
gap:20px; /* 20px gap between boxes */
margin:20px 0;
}
.sticky-box-4 {
padding:15px;
border-radius:10px;
flex:1 1 calc(25% - 20px); /* 4 boxes per row */
box-sizing:border-box;
text-align:center;
font-family:Nunito-Sans_light, Arial;
font-size:16px;
line-height:1.5;
}
.sticky-box-4 ul {
text-align:left;
}
.sticky-box-4.purple { background-color:#c7a6d3; color:black; }
.sticky-box-4.green { background-color:#6bc6bf; color:black; }
.sticky-box-4.blue { background-color:#a5cbf0; color:black; }
.sticky-box-4.yellow { background-color:#fef7b5; color:black; }
.sticky-box-4.orange { background-color:#fda155; color:black; }
.sticky-box-4.pink { background-color:#ef959f; color:black; }
.sticky-box-4 .sticky-title {
font-family:Nunito-Sans_bold, Arial;
font-size:16px;
margin-bottom:4px;
text-transform:uppercase;
}
.sticky-box-4.white-title .sticky-title { color:black; }
.sticky-box-4.black-title .sticky-title { color:black; }
@media (min-width:768px) and (max-width:1199px) {
.sticky-box-4 {
flex:1 1 calc(50% - 10px); /* 2 boxes per row */
max-width:calc(50% - 10px);
}
}
@media (max-width:768px) {
.sticky-box-4 {
flex:1 1 100%;
max-width:100%; /* 1 box per row */
padding:10px;
}
}


#myBtn {
display:none;
position:fixed;
bottom:20px;
right:20px;
z-index:99;
border:0px solid #000000;
background-color:#fab832;
color:#000000;
cursor:pointer;
padding:25px 25px;
border-radius:25px;
font-size:30px;
background-image:url('../../img/up.svg');
background-repeat:no-repeat;
background-position:center left 12px;
background-size:25px 25px;
}
#myBtn:hover {
background-color:#494949;
color:#ffffff;
border:0px solid #ffffff;
background-image:url('../../img/up-white.svg');
}

* {
box-sizing:border-box;
}
/* Create two equal columns that floats next to each other */
.content-title {
float:left;
width:100%;
padding:10px;
padding-bottom:0px;
font-family:Arial;
font-size:26px;
background-color:#f3f2f2;
}
/* Clear floats after the columns */
.content-row:after {
content:"";
display:table;
clear:both;
}
.content-row {
background-color:#f3f2f2;
}
/* Create two equal columns that floats next to each other */
.content-column {
float:left;
width:50%;
padding:10px;
}
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width:600px) {


.content-column {
width:100%;
}
}