@import url(http://fonts.googleapis.com/css?family=Open+Sans);
body {
	margin: 0;
	padding: 0;
	border: 0;
	overflow: hidden;
	height: 100%;
	max-height: 100%;
}
#framecontent {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 110px; /*Height of frame div*/
	overflow: hidden; /*Disable scrollbars. Set to "scroll" to enable*/
	background-color: fff;
	font-family: 'Open Sans', sans-serif;
	z-index: 10000;
	box-shadow: 0 0 5px #bbb;
}
#framecontent .ad {
	position: absolute;
	left: 47%;
	top: 10px;
	width: 728px;
	z-index: 10001;
	margin-left: -364px;
	overflow: hidden;
	height: 90px;
}
#framecontent .actions {
	float: right;
	margin-top: 36px;
	margin-right: 10px;
}
#framecontent .left-actions {
	float: left;
	margin-top: 42px;
	margin-left: 20px;
}
#framecontent .btn {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	background-color: #999;
	border: none;
	border-radius: 4px;
	color: #fff;
	cursor: pointer;
	display: inline-block;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 14px;
	margin: 0;
	padding: 10px 14px;
	text-align: center;
	text-decoration: none
}
#framecontent .btn:hover, #framecontent .btn:focus {
	background-color: #de4a4a;
	text-decoration: none;
	outline: none
}
#framecontent .action-download, #framecontent .action-close {
	display: inline-block;
	padding: 0 10px
}
#framecontent .action-close a {
	color: #999;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 14px;
	text-decoration: none;
	border: 1px solid #eee;
	border-radius: 4px;
	padding: 10px 14px;
}
#framecontent .action-close a:hover {
	color: #de4a4a;
}
#framecontent .action-view a i, #framecontent .action-download a i, #framecontent .action-close a i {
	margin-right: 6px
}
#framecontent .action-view a {
	color: #777;
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 14px;
	text-decoration: none;
	border: 1px solid #eee;
	border-radius: 4px;
	padding: 10px 12px;
}
#framecontent .action-view a:hover {
	color: #de4a4a;
}
#maincontent {
	position: fixed;
	top: 110px; /*Set top value to HeightOfFrameDiv*/
	left: 0;
	right: 0;
	bottom: 0;
	overflow: hidden;
	background: #fff;
}
.innertube {
	margin: 0; /*Margins for inner DIV inside each DIV (to provide padding)*/
}
* html body { /*IE6 hack*/
	padding: 130px 0 0 0; /*Set value to (HeightOfFrameDiv 0 0 0)*/
}
* html #maincontent { /*IE6 hack*/
	height: 100%;
	width: 100%;
}
.full-screen-preview {
	height: 100%;
	padding: 0px;
	margin: 0px;
	overflow: hidden
}
.full-screen-preview__frame {
	width: 100%;
	background-color: #fff
}


/* .img-demo {
    width: 200px;
    height: 140px;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: transform 0.2s ease;
} */

.img-demo:hover {
    transform: scale(1.05);
}



/* Individual demo box */
.demo-box {
    text-align: center;
    width: 320px; /* Set a fixed width for each box */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); /* Adds a subtle shadow */
    border-radius: 10px;
    background-color: #fff;
    padding: 1px; /* Adds space inside the box */
}

/* Styles the image inside its container */
.demo-image img {
    width: 100%; /* Image fills the entire width of its container */
    height: auto; /* Maintains the aspect ratio */
    display: block; /* Removes any extra space below the image */
}

/* Container for all demo boxes */
.demo-container {
    display: flex; /* Use flexbox for horizontal layout */
    justify-content: center; /* Center items horizontally */
    gap: 80px; /* Adjusts the space between the demo boxes */
    flex-wrap: wrap; /* Allows wrapping on smaller screens */
    padding: 10px 0; /* Adds vertical space around the whole section */
}
/* Container for the heading */
.demo-text {
    margin-bottom: 15px; /* Adds space between the text and the image */
}

/* Styles the heading itself */
.demo-text h4 {
    margin: 0; /* Remove default margin from h4 tags */
    font-size: 1.1em;
    color: #333;
}

/* Container for the image */
.demo-image {
    width: 100%; /* The image container fills the width of its parent */
    height: auto;
    overflow: hidden; /* Ensures image corners don't stick out */
    border-radius: 8px;
}

/* Styles the image inside its container */
.demo-image img {
    width: 100%; /* Image fills the entire width of its container */
    height: auto; /* Maintains the aspect ratio */
    display: block; /* Removes any extra space below the image */
}

.img-demo {
    width: 200px;
    height: 140px;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: transform 0.2s ease;
}

.button-wrapper {
    display: flex;
    justify-content: center;
}

.lang-toggle button {
    color: #fff; /* white like other nav items */
    background: none;
    border: none;
    font-size: 16px;
    padding: 10px 15px;
}
.lang-toggle button:hover {
    text-decoration: underline;
}



/* Remove bottom gap after each demo box */
.demo-box {
    margin-bottom: 10px;  /* or 0px if you want no gap */
}

/* Remove top margin of contact message */
.contact-message {
    margin-top: 0px !important;   /* was 1px */
}