/*  phpBB3 Style Sheet
    --------------------------------------------------------------
	Style name:			IM Blue
	Based on style:		prosilver
	Original author:	Tom Beddard ( http://www.subblue.com/ )
	Modified by:		HelterSkelter ( https://integramod.com/ ) ( https://forumimages.net/ )
    --------------------------------------------------------------
*/

/* phpBB logo
---------------------------------------- */
@font-face {
  font-family: 'icomoon';
  src:  url('assets/fonts/icomoon.eot?qdjq7h');
  src:  url('assets/fonts/icomoon.eot?qdjq7h#iefix') format('embedded-opentype'),
    url('assets/fonts/icomoon.ttf?qdjq7h') format('truetype'),
    url('assets/fonts/icomoon.woff?qdjq7h') format('woff'),
    url('assets/fonts/icomoon.svg?qdjq7h#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
  font-display: block;
}

[class^="font-"], [class*=" font-"] {
  /* use !important to prevent issues with browser extensions that change fonts */
  font-family: 'icomoon' !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

  /* Better Font Rendering =========== */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.font-phpbb_logo:before {
  content: "\e900";
}

/* Undo Bootstrap list padding in forum list */
.forabg ul,
.forumbg ul,
.topiclist,
.topiclist ul {
	padding-left: 0;
	margin-left: 0;
	list-style: none;
}

/* Restore phpBB forum list spacing */
ul.topiclist li.header {
	padding: 4px 8px;
	min-height: 0;
	line-height: 1.2;
}

ul.topiclist li.row {
	padding: 0;
}

ul.topiclist dl {
	margin: 0;
	padding: 6px 0;
	line-height: 1.3;
}

/* General Markup Styles
---------------------------------------- */

* {
	/* Reset browsers default margin, padding and font sizes */
	margin: 0;
	padding: 0;
}

html {
	/*font-size: 0.813em;*/
	/* Always show a scrollbar for short pages - stops the jump when the scrollbar appears. non-IE browsers */
	height: 101%;
}

body {
	/* Text-Sizing with ems: http://www.clagnut.com/blog/348/ */
	font-family: 'Open Sans', sans-serif;
	font-size: 0.813em;
	margin: 0;
	padding: 12px 0;
}

h1 {
	/* Forum name */
	font-family: 'Open Sans', sans-serif;
	margin-right: 200px;
	margin-top: 15px;
	font-weight: bold;
	font-size: 2em;
	letter-spacing: -1px;
}

h1.site-name {
	font-size: 1.75em !important;

}

h2 {
	/* Forum header titles */
	font-family: 'Open Sans', sans-serif;
	font-weight: normal;
	font-size: 2em;
	margin: 0.8em 0 0.2em 0;
	letter-spacing: -1px;
}

h2.solo {
	margin-bottom: 1em;
}
#message h2, #confirm h2 {
	border-bottom: solid 1px;
}
h3 {
	/* Sub-headers (also used as post headers, but defined later) */
	font-family: 'Open Sans', sans-serif;
	font-size: 1.077em;
}

h4 {
	/* Forum and topic list titles */
	font-family: 'Open Sans', sans-serif;
	font-size: 1.3em;
}

p {
	line-height: 1.3em;
	margin-bottom: 1.5em;
}

img {
	border-width: 0;
    height: auto;
    max-width: 100%;
    vertical-align: middle;
}
hr {
	/* Also see tweaks.css */
	border: 0 none #FFFFFF;
	border-top: 1px solid #E4E4E4;
	height: 1px;
	margin: 6px 0 12px;
	display: block;
	clear: both;
}

hr.dashed {
	border-top: 1px solid #E4E4E4;
	margin: 10px 0;
}

hr.divider {
	display: none;
}

p.right {
	text-align: right;
}

/* Main blocks
---------------------------------------- */
#wrap {
	width: 98%;
	margin: 0 auto;
}

#simple-wrap {
	padding: 6px 12px;
	border: solid 1px;
	margin: 0 12px;
}

#simple-wrap h2 {
	border-bottom: solid 1px;
}

#page-body {
	clear: both;
	overflow: hidden;
}

#page-footer {
	clear: both;
}

#page-footer h3 {
	margin-top: 20px;
}


/* Search box
--------------------------------------------- */
.search-box {
	color: #43A6DF;
	float: left;
	white-space: nowrap; /* For Opera */
}
.search-box-inner {
	display: inline-block;
    height: 28px;
    width: 250px;
    background-color: #FFFFFF;
    border: 1px solid #E4E4E4;
    height: 26px;
	padding: 2px;	
}
.search-box #keywords {
    height: 20px;
    width: 200px;
	background-color: #FFF;
}

.search-box input {
	border: 1px solid #b0b0b0;
}
.search-box .inputbox {
	padding: 2px 0 2px 6px;
}
.topic-actions .search-box {
	margin: 0 0 12px;
}
/* .button1 style defined later, just a few tweaks for the search button version */
.search-box input.button1 {
	padding: 1px 5px;
}

.search-box li {
	text-align: right;
	margin-top: 4px;
}

.search-box img {
	vertical-align: middle;
	margin-right: 3px;
}
.search-adv-link {
	line-height: 31px;
	display: inline-block;

}
.search-form {
	overflow: hidden;
}
/* Site description and logo */
#site-description {
	float: left;
	width: 70%;
}

#site-description h1 {
	margin-right: 0;
}


/* Header and tabs
---------------------------------------- */

#above-headerbar {
	height: 36px;
	margin-bottom: 12px;
}

#header {
	height: 120px;
	background-color: #43A6DF;
	margin-bottom: 0px;
	position: relative;
}

#header #logo {
    display: flex;
    justify-content: left;
    margin-left: .1em;
    align-items: left;
    height: 120px;
	font-size: 8em;
}

#header a:hover {text-decoration:none;}

#subheader-menu {
	background-color: #2E3539;
	height: 34px;
	margin-bottom: 12px;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	padding: 7px 12px;
}
#subheader-menu .links.right {
	float: right;
}
#subheader-menu .links.right li {
	margin-right: 0;
}
#subheader-menu .links li {
	float: left;
	list-style: none;
	margin-right: 12px;
}
#subheader-menu .links li a {
	color: #ffffff;
}

#breadcrumbs {
	margin-bottom: 12px;
}
.navbit-arrow {
	margin: 0 6px;
	vertical-align: middle;
}
/* Round cornered boxes and backgrounds
---------------------------------------- */
.headerbar {
	background: #ebebeb none repeat-x 0 0;
	color: #FFFFFF;
	margin-bottom: 4px;
	padding: 0 5px;
}

.navbar {
	padding: 12px 0;
	border-top: solid 1px;
	border-bottom: solid 1px;
	margin-bottom: 12px;
}

.forabg {
	background: #b1b1b1 none repeat-x 0 0;
	margin-bottom: 12px;
	clear: both;
}

.forumbg {
	background: #b1b1b1 none repeat-x 0 0;
	margin-bottom: 12px;
	clear: both;
}
.forum-moderators,
.forum-subforums {
	margin-top: 6px;
	font-size: 0.846em;
}
.forum-moderators + .forum-subforums {
	margin-top: 0;
}
.forum-name {
	padding-left: 12px;
}
.panel {
	margin-bottom: 12px;
	padding: 0 10px;
}
.panel.no-topics {
	padding: 48px 0;
	text-align: center;
	font-size: 1.231em;
	background-color: #fff;
}

.panel.bg2 {
	border: 0;
	background-color: transparent;
	padding: 0;
}

.post {
	padding: 12px;
	margin-bottom: 12px;
	background-repeat: no-repeat;
	background-position: 100% 0;
	border: solid 1px #E4E4E4;
	position: relative;
}
 
#preview {
	overflow: hidden;
}
.post:target .content {
	color: #000000;
}

.post:target h3 a {
	color: #000000;
}

.rowbg {
	margin: 5px 5px 2px 5px;
}

.ucprowbg {
	background-color: #e2e2e2;
}

.fieldsbg {
	background-color: #eaeaea;
}



/* Horizontal lists
----------------------------------------*/
li.right{
	float: right;
	clear: right;
}

li.tend{
	position: absolute;
	text-align: right;
}

.user-links {
	float: right;
}
.user-links li {
	float: left;
	list-style-image: none;
	list-style-type: none;
	margin-right: 12px;
}
.user-links li:last-child {
	margin-right: 0px;
}

.user-links {
	/*font-size: 1.077em;*/
}
.user-links, .user-links a {
	line-height: 31px;
}


ul.linklist {
	display: block;
	margin: 0;
}

ul.linklist li {
	display: block;
	list-style-type: none;
	float: left;
	width: auto;
	margin-right: 5px;
	line-height: 2.2em;
}

ul.linklist li.rightside, p.rightside {
	float: right;
	margin-right: 0;
	margin-left: 5px;
	text-align: right;
}

ul.navlinks {
	padding-bottom: 1px;
	margin-bottom: 1px;
	border-bottom: 1px solid #FFFFFF;
	font-weight: bold;
}

ul.leftside {
	float: left;
	margin-left: 0;
	margin-right: 5px;
	text-align: left;
}

ul.rightside {
	float: right;
	margin-left: 5px;
	margin-right: -5px;
	text-align: right;
}
.thread-icons {
	margin: 0px;
	padding: 0px;
	list-style-type: none;
	float: right;
}
.thread-icons li {
	float: left;
}

/* Table styles
----------------------------------------*/
table.table1 {
	/* See tweaks.css */
}

#ucp-main table.table1 {
	padding: 2px;
}

table.table1 thead th {
	font-weight: normal;
	color: #FFFFFF;
	line-height: 1.3em;
}

table.table1 thead th span {
	padding-left: 7px;
}

table.table1 tbody tr {
	border: 1px solid #E4E4E4;
}

table.table1 tbody tr:hover, table.table1 tbody tr.hover {
	background-color: #f6f6f6;
	color: #000;
}

table.table1 td {
	color: #6a6a6a;
}

table.table1 tbody td {
	padding: 5px;
	border-top: 1px solid #E4E4E4;
}

table.table1 tbody th {
	padding: 5px;
	border-bottom: 1px solid #E4E4E4;
	text-align: left;
	color: #333333;
	background-color: #FFFFFF;
}

/* Specific column styles */
table.table1 .name		{ text-align: left; }
table.table1 .posts		{ text-align: center !important; width: 7%; }
table.table1 .joined	{ text-align: left; width: 15%; }
table.table1 .active	{ text-align: left; width: 15%; }
table.table1 .mark		{ text-align: center; width: 7%; }
table.table1 .info		{ text-align: left; width: 30%; }
table.table1 .info div	{ width: 100%; white-space: normal; overflow: hidden; }
table.table1 .autocol	{ line-height: 2em; white-space: nowrap; }
table.table1 thead .autocol { padding-left: 1em; }

table.table1 span.rank-img {
	float: right;
	width: auto;
}

table.info td {
	padding: 3px;
}

table.info tbody th {
	padding: 3px;
	text-align: right;
	vertical-align: top;
	color: #000000;
	font-weight: normal;
}

.forumbg table.table1 {
	margin: 0;
}

.forumbg-table > .inner {
	margin: 0 -1px;
}


/* Misc layout styles
---------------------------------------- */
/* column[1-2] styles are containers for two column layouts 
   Also see tweaks.css */
.column1 {
	float: left;
	clear: left;
	width: 49%;
}

.column2 {
	float: right;
	clear: right;
	width: 49%;
}

/* General classes for placing floating blocks */
.left-box {
	float: left;
	width: auto;
	text-align: left;
}

.right-box {
	float: right;
	width: auto;
	text-align: right;
}

dl.details {
	/*font-size: 1.1em;*/
}

dl.details dt {
	float: left;
	clear: left;
	width: 30%;
	text-align: right;
	color: #000000;
	display: block;
}

dl.details dd {
	margin-left: 0;
	padding-left: 5px;
	margin-bottom: 5px;
	float: left;
	width: 65%;
}

.dark-header {
	line-height: 48px;
	padding: 0 12px;
	font-weight: normal;
	clear: both;
}

.dark-header-content {
	padding: 12px;
	margin-bottom: 12px;
}
/* Pagination
---------------------------------------- */
.pagination {
	height: 1%; /* IE tweak (holly hack) */
	width: auto;
	text-align: right;
	margin-top: 5px;
	float: right;
}

.pagination span.page-sep {
	display: none;
}

li.pagination {
	margin-top: 0;
}

.pagination strong, .pagination b {
	font-weight: normal;
}

.pagination span strong {
	padding: 2px 6px;
	margin: 0 1px;
	font-weight: normal;
	color: #FFFFFF;
	background-color: #bfbfbf;
	border: 1px solid #bfbfbf;
	font-size: 0.9em;
}

.pagination span a, .pagination span a:link, .pagination span a:visited, .pagination span a:active {
	font-weight: normal;
	text-decoration: none;
	color: #747474;
	margin: 0 1px;
	padding: 2px 6px;
	background-color: #eeeeee;
	border: 1px solid #bababa;
	font-size: 0.9em;
	line-height: 1.5em;
}

.pagination span a:hover {
	border-color: #d2d2d2;
	background-color: #d2d2d2;
	color: #FFF;
	text-decoration: none;
}

.pagination img {
	vertical-align: middle;
}

/* Pagination in viewforum for multipage topics */
.row .pagination {
	display: block;
	float: right;
	width: auto;
	margin-top: 0;
	padding: 1px 0 1px 15px;
	font-size: 0.9em;
	background: none 0 50% no-repeat;
}

.row .pagination span a, li.pagination span a {
	background-color: #FFFFFF;
}

.row .pagination span a:hover, li.pagination span a:hover {
	background-color: #d2d2d2;
}

/* Miscellaneous styles
---------------------------------------- */
#forum-permissions {
	float: right;
	width: auto;
	padding-left: 5px;
	margin-left: 5px;
	margin-top: 10px;
	text-align: right;
}

.copyright {
	padding: 5px;
	text-align: center;
	color: #555555;
}

.small {
	font-size: 0.9em !important;
}

.titlespace {
	margin-bottom: 15px;
}

.headerspace {
	margin-top: 12px;
}

.error {
	color: #bcbcbc;
	font-weight: bold;
	font-size: 1em;
}

.reported {
	background-color: #f7f7f7;
}

li.reported:hover {
	background-color: #ececec;
}
.reported + .reported {
    border-top: none !important;
}
div.rules {
	padding: 12px;
	margin: 12px 0;
}

div.rules ul, div.rules ol {
	margin-left: 20px;
}

p.rules {
	background-color: #ececec;
	background-image: none;
	padding: 5px;
}

p.rules img {
	vertical-align: middle;
}

p.rules a {
	vertical-align: middle;
	clear: both;
}
.rules-header {
	font-size: 1.231em;
	display: block;
	font-weight: 600;
	margin-bottom: 6px;
}
.rules-header a {
	font-weight: 600;
	text-decoration: underline !important;
}
.rules-header a:hover {
	text-decoration: none !important;
}
#top {
	position: absolute;
	top: -20px;
}

.clear {
	display: block;
	clear: both;
	font-size: 1px;
	line-height: 1px;
	background: transparent;
}

/* Animation
---------------------------------------- */

#header .tabs li a,
.topiclist.forums .row, .topiclist.topics .row,
.button1, .button2,
.inputbox,
#tabs li span,
#cp-menu #navigation li a,
table.table1 tbody tr:hover, table.table1 tbody tr.hover {
	-webkit-transition: all 0.3s ease 0s;
	-moz-transition: all 0.3s ease 0s;
	-ms-transition: all 0.3s ease 0s;
	-o-transition: all 0.3s ease 0s;
	transition: all 0.3s ease 0s;
}
.search-box .button2 {
	transition: none;
	-webkit-transition: none;
	-moz-transition: none;
	-ms-transition: none;
	-o-transition: none;
}



/* Popup Login
---------------------------------------- */

#mask {
	display: none;
	background: #000; 
	position: fixed; left: 0; top: 0; 
	z-index: 10;
	width: 100%; height: 100%;
	opacity: 0.6;
	z-index: 999;
}

.login-popup {
	display:none;
	width: 364px;
	background: #fff;
	padding: 16px 0; 	
	float: left;
	font-size: 1.2em;
	position: fixed;
	top: 50%; left: 50%;
	z-index: 99999;
	box-shadow: 0px 0px 20px #434343; /* CSS3 */
	-moz-box-shadow: 0px 0px 20px #434343; /* Firefox */
	-webkit-box-shadow: 0px 0px 20px #434343; /* Safari, Chrome */
}
#navbar_username,
#navbar_password_hint,
#navbar_password {
	width: 254px;
	padding: 0 12px 0 32px;
	border: solid 1px #ebebeb;
	height: 40px;
	line-height: 40px;
	background-attachment: scroll;
	background-image: url("./styles/IM_blue/theme/images/login-icons.png") !important;
	background-repeat: no-repeat;
	background-color: #FFF;
	outline: none !important;
	font-size: 11px;
}
#navbar_username {
	background-position: 12px 0;
}

#navbar_password_hint,
#navbar_password {
	background-position: 12px -40px;
}
.navbar_username_outer,
.navbar_password_outer {
	padding: 12px 32px;
}
.navbar_username_outer label,
.navbar_password_outer label {
	font-size: 11px;
}
.navbar_username_outer.active,
.navbar_password_outer.active {
	padding: 12px 32px 12px 26px;
	background-color: #f2f2f2;
	border-left: solid 6px #43A6DF;
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
}
.quick-login {
	border-bottom: solid 1px #ebebeb;
	margin-bottom: 12px;
}
.login-buttons {
	padding: 12px 32px;
}
#autologin_label {
	font-size: 11px;
	cursor: pointer;
	float: right;
}
#login-box .register-link {
	padding: 12px 32px;	
}

img.close-button { 
	float: right; 
	margin: -10px 6px 0 0;
}
#login-text {
	font: 24px 'Open Sans',sans-serif;
	color: #43A6DF;
	text-transform: lowercase;
	padding: 0 32px;
	margin-bottom: 12px;
}
.login-popup fieldset { 
	border:none; 
}
.login-link {
	display: none;
}

/* Sidebar blocks
---------------------------------------- */

#sidebar {
	float: left;
	width: 252px;
	margin-bottom: 12px;
}

#page-body-inner {
	float: left;
	width: 916px;
	margin-right: 12px;
}
.no-sidebar#page-body-inner {
	width: 100%;
	margin-right: 0;
}

#sidebar + #page-body-inner .forabg,
#sidebar + #page-body-inner .dark-header {
	clear: none;
}
.sidebar-block {
	margin-bottom: 12px;
}

.sidebar-block:last-child {
	margin-bottom: 0;
}

.sidebar-block-header {
   font-size: 14px;
    font-weight: normal;
    padding: 14px 12px;
    letter-spacing: 0;
    margin: 0;
}

.sidebar-block-content {
   padding: 16px 12px;
}

#sidebar ul {
	list-style-position: inside;
	margin-bottom: 1.5em;
}




/* Prefooter blocks
---------------------------------------- */

.prefooter-blocks {
	margin-bottom: 12px;
	overflow: hidden;
	clear: both;
}
.prefooter-blocks h2 {
	color: #FFF;
    font-size: 32px;
    font-weight: 300;
    margin-bottom: 6px;
    margin-top: 0;
    text-transform: lowercase;
    line-height: 1.23;
}
.prefooter-blocks h2, .prefooter-blocks h3, .prefooter-blocks h4 {
	color: #FFF;
}
#container1 {
	width: 100%;
	float: left;
	background-color: #2E3539;
	position: relative;
	right: 12px;
}
#container2 {
	width: 100%;
	float: left;	
	background-color: #F6F6F6;
	position: relative;
	right: 252px;
}
#container3 {
	width: 100%;
	float: left;
	background-color: #43A6DF;
	overflow: hidden;
}
#col1 {
    float: left;
    left: 264px;
    margin-right: -264px;
    padding-right: 276px !important;
    position: relative;
    width: 100%;
}
#col2 {
	width: 252px;
	float: right;
	position: relative;
	left: 264px;
}
#col1, #col2 {
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
	        box-sizing: border-box;
	padding: 24px 12px;
	color: #FFF;
}

.prefooter-block-01 {
	float: left;
	width: 70%;
	padding-right: 12px;
}
.prefooter-block-01.single {
	width: auto;
	padding-right: 0;
}
.prefooter-block-01 p {
	margin-bottom: 1em;
	line-height: 1.3em;
}
.about-block p:last-child {
	margin-bottom: 0;
}
.prefooter-block-02 {
	float: left;
	width: 30%;
}
.prefooter-block-02 li {
	line-height: 1.3em;
	margin-bottom: 6px;
}
.prefooter-right {
	float: right;
	width: 244px;
}
.prefooter-block-03 {
	margin-bottom: 24px;
	overflow: hidden;
}
.social-icons ul li {
	float: left;
	margin-right: 6px;
	list-style-type: none;
}
.social-icons ul li a {
	display: block;
	width: 37px;
	height: 37px;
	background-image: url("./styles/IM_blue/theme/images/social-icons.png");
	background-attachment: scroll;
	background-repeat: no-repeat;

}
.social-icons ul li a.twitter {
	background-position: -76px top;
}
.social-icons ul li a.twitter:hover {
	background-position: -76px -37px;
}
.social-icons ul li a.facebook {
	background-position: -38px top;
}
.social-icons ul li a.facebook:hover {
	background-position: -38px -37px;
}
.social-icons ul li a.youtube {
	background-position: -152px top;
}
.social-icons ul li a.youtube:hover {
	background-position: -152px -37px;
}
.social-icons ul li a.gplus {
	background-position: 0 top;
}
.social-icons ul li a.gplus:hover {
	background-position: 0 -37px;
}
.social-icons ul li a.myspace {
	background-position: -114px top;
}
.social-icons ul li a.myspace:hover {
	background-position: -114px -37px;
}
.prefooter-block-04 a {
	color: #ffffff;
	text-decoration: underline;
}
.prefooter-block-04 a:hover {
	color: #ffffff;
	text-decoration: none;
}

#footer_divider {
	clear: both;
	padding-top: 48px;
}	

a.toggleMenuButton {
    background-image: url("./styles/IM_blue/theme/images/toggleMenubg.png");
    background-attachment: scroll;
    background-repeat: no-repeat;
    background-position: center center;
}
#subheader-menu li {
    background-image: url("./styles/IM_blue/theme/images/submenu-icons.png");
    background-attachment: scroll;
    background-repeat: no-repeat;
}

/* nav menu */
div.menu ul.menu li.menu-item.active > .submenu {
	display: block;
}

.menu {
	height: 45px;
	padding-left: 0px;
	border: solid 1px;	
	border-radius: 1px;
}

.menu ul, .menu li {
	margin: 0 auto;
	padding: 0;
	list-style: none
}
.menu ul {
	width: 100%;
	text-align: left;
}
.menu li {
	display: inline-block;
	position: relative;
}
.menu a {
	display: block;
	line-height: 45px;
	padding: 0 14px;
	text-decoration: none;
	font-size: 16px;
}
.menu a.dropdown-arrow:after {
	content: "\25BF";
	margin-left: 5px;
}

.menu input {
	display: none;
	margin: 0;
	padding: 0;
	height: 45px;
	width: 100%;
	opacity: 0;
	cursor: pointer
}
.menu label {
	display: none;
	line-height: 45px;
	text-align: center;
	position: absolute;
	left: 35px
}
.menu label:before {
	font-size: 1.6em;
	content: "\2261"; 
	margin-left: 20px;
}
.menu ul.sub-menus{
	height: auto;
	overflow: hidden;
	width: 230px;
	position: absolute;
	z-index: 99;
	display: none;
}
.menu ul.sub-menus li {
	display: block;
	text-align: left;
	width: 100%;
}
.menu ul.sub-menus a {
	font-size: 16px;
}
.menu li:hover ul.sub-menus {
	display: block
}

.right-arrow, .style {
	float: right;
}	



@media only screen and (max-width: 767px) {
	.sm-right-arrow, .sm-style {display: inline-block; position: relative; float: right !important;}
	li.arrows, .style {display: none !important;}
    .menu .responsive-menu {width:70%}
	.menu {position:relative}
	.menu ul {position:absolute;top:100%;right:0;left:0;z-index:3;height:auto;display:none;text-align:left;}
	.menu ul.sub-menus {width:100%;position:static;}
	.menu ul.sub-menus a {padding-left:30px;}
	.menu li {display:block;float:none;width:auto;}
	.menu input, .menu label {position:absolute;top:0;left:0;display:block}
	.menu input {z-index:4}
	.menu input:checked + label:before {content:"\00d7"}
	.menu input:checked ~ ul {display:block}
}
@media only screen and (min-width: 767px) {
    .sm-right-arrow, div.sm-style {display: none !important;}

}
.img-span {
    width: 100%;
    background-repeat: no-repeat;
    background-size: cover;
}

h6 {
	display : inline-block;
	font-size : 12px;
	font-family : helvetica, sans-serif;
	font-weight : 800;
}

h6, h6:hover {
	font-weight : 800;
}

.badge {
	border-radius: 10px;
	opacity: 0.8;
	text-align: center;
	white-space: nowrap;
	font-size: 10px;
	line-height: 1;
	display: inline-block;
	margin-left: 3px;
	vertical-align: 3px;
	position: relative;
	top: 3px;
	padding: 4px 6px;
}

.badge.hidden {
	display: none;
}

.rb { 
	font-size: 1.5em;
    border: 4px solid;
    border-radius: 8px;
	padding:1em;
}

/*logo */
/* Header container: logo left, branding right */
.im-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  box-sizing: border-box;
}

/* Ensure no legacy floats or absolute positioning interfere */
.im-header * {
  float: none !important;
  position: relative !important;
}

/* Logo block */
.im-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 300px;
  height: 100px;
  text-decoration: none;
  flex: 0 0 auto;
}

/* If you use an image logo, this will fit it */
.im-logo img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Branding block stacks title and description */
.im-branding {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  flex: 1 1 auto;
}

/* Title and description styling */
.im-site-title {
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.1;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.im-site-desc {
  margin: 4px 0 0;
  font-size: 0.9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Skip link */
.skiplink {
  margin-top: 6px;
}
.skiplink a {
  color: #0073aa;
  text-decoration: underline;
}

/* Responsive: allow wrapping on small screens */
@media (max-width: 640px) {
  /* Stack header items vertically and center them */
  .im-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 10px;
  }

  /* Logo becomes a fixed-size centered block */
  .im-logo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    flex: 0 0 auto;
  }

  /* Branding becomes a centered column and can take full width */
  .im-branding {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
    padding: 0 12px;
  }

  /* Allow title/description to wrap on small screens */
  .im-site-title,
  .im-site-desc {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
  }

  /* Keep skip link visible and spaced */
  .skiplink {
    margin-top: 6px;
  }
}

/* Accessibility focus */
.im-logo:focus,
.skiplink a:focus {
  outline: 3px solid Highlight;
  outline-offset: 2px;
}

/* Screen-reader only helper */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}    
/* Stack and center logo + title + description at 800px and below */
@media (max-width: 800px) {
  /* make header a centered column that fills the header background */
  .im-header {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px;
    padding: 16px;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
  }

  /* logo: centered square, keep image scaled */
  .im-logo {
    width: 96px !important;
    height: 96px !important;
    flex: 0 0 auto !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 auto !important;
  }
  .im-logo img {
    max-width: 100%;
    max-height: 100%;
    height: auto;
    width: auto;
    display: block;
  }

  /* branding: full width inside header, centered text */
  .im-branding {
    width: 100% !important;
    max-width: 720px;
    box-sizing: border-box;
    padding: 0 12px;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    flex: 0 0 auto !important;
  }

  /* allow wrapping for title/desc */
  .im-site-title,
  .im-site-desc {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    width: 100%;
    margin: 0;
  }

  .im-site-title { font-size: 1.125rem; line-height: 1.2; }
  .im-site-desc  { margin-top: 6px; font-size: 0.95rem; color: #666; }
.im-header { min-height: 180px;}
  /* keep skip link centered */
  .skiplink { width: 100%; text-align: center; margin-top: 8px; }
}
/* Link Styles
---------------------------------------- */

/* Links adjustment to correctly display an order of rtl/ltr mixed content */
a {
	direction: ltr;
	unicode-bidi: embed;
}

a:link	{ color: #898989; text-decoration: none; }
a:visited	{ color: #898989; text-decoration: none; }
a:hover	{ color: #d3d3d3; text-decoration: underline; }
a:active	{ color: #d2d2d2; text-decoration: none; }

/* Coloured usernames */
.username-coloured {
	font-weight: bold;
	display: inline !important;
	padding: 0 !important;
	word-wrap: break-word;
}
/* Links on gradient backgrounds */
#search-box a:link, .navbg a:link, .forumbg .header a:link, .forabg .header a:link, th a:link {
	color: #FFFFFF;
	text-decoration: none;
}

#search-box a:visited, .navbg a:visited, .forumbg .header a:visited, .forabg .header a:visited, th a:visited {
	color: #FFFFFF;
	text-decoration: none;
}

#search-box a:hover, .navbg a:hover, .forumbg .header a:hover, .forabg .header a:hover, th a:hover {
	color: #ffffff;
	text-decoration: underline;
}

#search-box a:active, .navbg a:active, .forumbg .header a:active, .forabg .header a:active, th a:active {
	color: #ffffff;
	text-decoration: none;
}

/* Links for forum/topic lists */
a.forumtitle {
	font-size: 1.077em;
	font-weight: bold;
	text-decoration: none;
}

/* a.forumtitle:visited { color: #898989; } */

a.forumtitle:hover {
	color: #bcbcbc;
	text-decoration: underline;
}

a.forumtitle:active {
	color: #898989;
}

a.topictitle {
    font-size: 1.077em;
	font-weight: bold;
	text-decoration: none;
}

/* a.topictitle:visited { color: #d2d2d2; } */

a.topictitle:hover {
	color: #bcbcbc;
	text-decoration: underline;
}

a.topictitle:active {
	color: #898989;
}

/* Post body links */
.postlink {
	text-decoration: none;
	color: #d2d2d2;
	border-bottom: 1px solid #d2d2d2;
	padding-bottom: 0;
}

/* .postlink:visited { color: #bdbdbd; } */

.postlink:active {
	color: #d2d2d2;
}

.postlink:hover {
	background-color: #f6f6f6;
	text-decoration: none;
	color: #404040;
}

.signature a, .signature a:visited, .signature a:hover, .signature a:active {
	border: none;
	text-decoration: underline;
	background-color: transparent;
}

/* Profile links */
.postprofile a:link, .postprofile a:visited, .postprofile dt.author a {
	font-weight: bold;
	color: #898989;
	text-decoration: none;
}

.postprofile a:hover, .postprofile dt.author a:hover {
	text-decoration: underline;
	color: #d3d3d3;
}

/* CSS spec requires a:link, a:visited, a:hover and a:active rules to be specified in this order. */
/* See http://www.phpbb.com/bugs/phpbb3/59685 */
.postprofile a:active {
	font-weight: bold;
	color: #898989;
	text-decoration: none;
}


/* Profile searchresults */	
.search .postprofile a {
	color: #898989;
	text-decoration: none; 
	font-weight: normal;
}

.search .postprofile a:hover {
	color: #d3d3d3;
	text-decoration: underline; 
}

/* Back to top of page */
.back2top {
	clear: both;
	height: 11px;
	text-align: right;
}

a.top {
	background: none no-repeat top left;
	text-decoration: none;
	width: 11px;
	height: 11px;
	display: block;
	float: right;
	overflow: hidden;
	letter-spacing: 1000px;
	text-indent: 11px;
}

a.top2 {
	background: none no-repeat 0 50%;
	text-decoration: none;
	padding-left: 15px;
}

/* Arrow links  */
a.up		{ background: none no-repeat left center; }
a.down		{ background: none no-repeat right center; }
a.left		{ background: none no-repeat 0px 50%; }
a.right		{ background: none no-repeat 100% 50%; }

a.block-link {
	display: block;
	margin: 12px 0;
}
a.up, a.up:link, a.up:active, a.up:visited {
	padding-left: 10px;
	text-decoration: none;
	border-bottom-width: 0;
}

a.up:hover {
	background-position: left center;
	background-color: transparent;
}

a.down, a.down:link, a.down:active, a.down:visited {
	padding-right: 10px;
}

a.down:hover {
	background-position: right bottom;
	text-decoration: none;
}

a.left, a.left:active, a.left:visited {
	padding-left: 12px;
}

a.left:hover {
	color: #d2d2d2;
	text-decoration: none;
	background-position: 0 50%;
}

a.right, a.right:active, a.right:visited {
	padding-right: 12px;
}

a.right:hover {
	color: #d2d2d2;
	text-decoration: none;
	background-position: 100% 50%;
}

/* invisible skip link, used for accessibility  */
.skiplink {
	position: absolute;
	left: -999px;
	width: 990px;
}

/* Feed icon in forumlist_body.html */
a.feed-icon-forum {
	float: right;
	margin: 3px;
}
/* Content Styles
---------------------------------------- */

ul.topiclist {
	display: block;
	list-style-type: none;
	margin: 0;
}

ul.forums {
	background: #ffffff none repeat-x 0 0;
}

ul.topiclist li {
	display: block;
	list-style-type: none;
	color: #777777;
	margin: 0;
}

ul.topiclist dl {
	position: relative;
}

ul.topiclist li.row dl {
	padding: 12px 0;
}

ul.topiclist dt {
	display: block;
	float: left;
	width: 50%;
	padding-left: 5px;
	padding-right: 5px;
}
ul.topiclist dt > span {
	padding-left: 12px;
}
ul.topiclist dd {
	display: block;
	float: left;
	padding: 4px 0;
}

ul.topiclist dfn {
	position: absolute;
	left: -999px;
	width: 990px;
}

ul.topiclist li.row dt a.subforum {
	background-image: none;
	background-position: 0 50%;
	background-repeat: no-repeat;
	position: relative;
	white-space: nowrap;
	padding: 0 0 0 16px;
}
.topiclist .header dt {
	font-size: 1.077em;
	padding-top: 14px;
}
.topiclist .header dt a {
	color: #ffffff !important;
	padding-left: 12px;
}
.topiclist .header dd {
	font-size: 0.923em;
	line-height: 48px;
}
.forum-image {
	float: left;
	padding-top: 5px;
	margin-right: 5px;
}

li.row {
    border-bottom: 1px solid #E4E4E4;
    border-left: 1px solid #E4E4E4;
    border-right: 1px solid #E4E4E4;
}

li.row strong {
	font-weight: normal;
	color: #000000;
}

li.row:hover {
	background-color: #F2F2F2;
}

li.row:hover dd {
	
}

li.header dt, li.header dd {
	border-left-width: 0;
	margin: 0;
	color: #FFFFFF;
	padding-top: 0;
	padding-bottom: 0;
}


li.header dd {
	margin-left: 1px;
}

li.header dl.icon {
	min-height: 0;
}

li.header dl.icon dt {
	/* Tweak for headers alignment when folder icon used */
	padding-left: 0;
	padding-right: 50px;
}

/* Forum list column styles */
dl.icon {
	min-height: 35px;
	background-position: 5px 12px;		/* Position of folder icon */
	background-repeat: no-repeat;
}

dl.icon dt {
	padding-left: 45px;					/* Space for folder icon */
	background-repeat: no-repeat;
	background-position: 5px 95%;		/* Position of topic icon */
}

dd.posts, dd.topics, dd.views {
	width: 8%;
	text-align: center;
	line-height: 2.2em;
	font-size: 0.846em;
}

/* List in forum description */
dl.icon dt ol,
dl.icon dt ul {
	list-style-position: inside;
	margin-left: 1em;
}

dl.icon dt li {
	display: list-item;
	list-style-type: inherit;
}

dd.lastpost {
	width: 25%;
	font-size: 0.846em;
}

dd.redirect {
	font-size: 1.1em;
	line-height: 2.5em;
}

dd.moderation {
	font-size: 1.1em;
}

dd.lastpost span, ul.topiclist dd.searchby span, ul.topiclist dd.info span, ul.topiclist dd.time span, dd.redirect span, dd.moderation span {
	display: block;
	padding-left: 5px;
}

dd.time {
	width: auto;
	line-height: 200%;
	font-size: 1.1em;
}

dd.extra {
	width: 12%;
	line-height: 200%;
	text-align: center;
	font-size: 1.1em;
}

dd.mark {
	float: right !important;
	width: 9%;
	text-align: center;
	line-height: 200%;
	font-size: 1.2em;
}

dd.info {
	width: 30%;
}

dd.option {
	width: 15%;
	line-height: 200%;
	text-align: center;
	font-size: 1.1em;
}

dd.searchby {
	width: 47%;
	font-size: 1.1em;
	line-height: 1em;
}

ul.topiclist dd.searchextra {
	margin-left: 5px;
	padding: 0.2em 0;
	font-size: 1.1em;
	color: #333333;
	border-left: none;
	clear: both;
	width: 98%;
	overflow: hidden;
}

/* Container for post/reply buttons and pagination */
.topic-actions {
	margin-bottom: 3px;
	height: 28px;
	min-height: 28px;
	overflow: hidden;
}
div[class].topic-actions {
	height: auto;
}

/* Post body styles
----------------------------------------*/
.postbody {
	padding: 0;
	line-height: 1.48em;
	color: #333333;
	width: 76%;
	float: left;
	clear: both;
}

.postbody .ignore {
	font-size: 1.1em;
}

.postbody h3.first {
	/* The first post on the page uses this */
	font-size: 1.077em;
}

.postbody h3 {
	/* Postbody requires a different h3 format - so change it here */
	font-size: 1.077em;
	font-weight: 300;
	padding: 2px 0 0 0;
	margin: 0 0 0.3em 0 !important;
	text-transform: none;
	border: none;
	font-family: "Trebuchet MS", Verdana, Helvetica, Arial, sans-serif;
	line-height: 125%;
}

.postbody h3 img {
	/* Also see tweaks.css */
	vertical-align: bottom;
}

.postbody .content {
	border-top: solid 1px #E4E4E4;
	padding-top: 12px;
	margin-top: 6px;
}

.search .postbody {
	width: 68%
}

/* Topic review panel
----------------------------------------*/
#review {
	margin-top: 2em;
}
h3#review {
	border-bottom: 0;
}
#topicreview {
	overflow: auto;
	height: 300px;
}

#topicreview .postbody {
	width: auto;
	float: none;
	margin: 0;
	height: auto;
}

#topicreview .post {
	height: auto;
}

#topicreview h2 {
	border-bottom-width: 0;
}
#topicreview h3 {
	border-bottom-width: 0;
}
.post-ignore .postbody {
	display: none;
}

/* MCP Post details
----------------------------------------*/
#post_details
{
	/* This will only work in IE7+, plus the others */
	overflow: auto;
	max-height: 300px;
}

#expand
{
	clear: both;
}

/* Content container styles
----------------------------------------*/
.content {
	min-height: 3em;
	overflow: hidden;
	line-height: 1.5em;
	font-size: 1em;
	color: #333333;
	padding-bottom: 1px;
}

.content h2, .panel h2 {
	font-weight: normal;
	color: #43A6DF;
	font-size: 1.6em;
	margin-top: 0.5em;
	margin-bottom: 0.5em;
	padding-bottom: 0.5em;
}

.panel h3 {
	margin: 0.5em 0;
	font-size: 1.231em;
	border-bottom: solid 1px #E4E4E4;
}
.pm .postbody h3 {
	border-bottom: none;
}
.panel p {
	margin-bottom: 1em;
	line-height: 1.4em;
}
#qr_editor_div {
	overflow: hidden;
}
#qr_editor_div h2 {
	margin: 0 0 12px;
	border-bottom: solid 1px #E4E4E4;
}
.content p {
	margin-bottom: 1em;
	line-height: 1.4em;
}
#faqlinks {
	overflow: hidden;
}
dl.faq {
	margin-top: 1em;
	margin-bottom: 2em;
	line-height: 1.4em;
}

dl.faq dt {
	font-weight: bold;
	color: #333333;
	margin-bottom: 12px;
}

.content dl.faq {
	margin-bottom: 0.5em;
}

.content li {
	list-style-type: inherit;
}

.content ul, .content ol {
	margin-bottom: 1em;
	margin-left: 3em;
}

.posthilit {
	background-color: #f3f3f3;
	color: #BCBCBC;
	padding: 0 2px 1px 2px;
}

.announce, .unreadpost {
	/* Highlight the announcements & unread posts box */
}

/* Post author */
p.author {
	margin: 0 15em 0.6em 0;
	padding: 0 0 5px 0;
	line-height: 1.2em;
	font-size: 0.846em;
}

/* Post signature */
.signature {
	margin-top: 24px;
	padding-top: 12px;
	border-top: 1px solid #E4E4E4;
	clear: left;
	line-height: 140%;
	overflow: hidden;
	width: 100%;
}

dd .signature {
	margin: 0;
	padding: 0;
	clear: none;
	border: none;
}

.signature li {
	list-style-type: inherit;
}

.signature ul, .signature ol {
	margin-bottom: 1em;
	margin-left: 3em;
}

/* Post noticies */
.notice {
	font-family: "Lucida Grande", Verdana, Helvetica, Arial, sans-serif;
	width: auto;
	margin-top: 1.5em;
	padding-top: 0.2em;
	font-size: 1em;
	border-top: 1px dashed #CCCCCC;
	clear: left;
	line-height: 130%;
}

/* Jump to post link for now */
ul.searchresults {
	list-style: none;
	text-align: right;
	clear: both;
}

/* BB Code styles
----------------------------------------*/
/* Quote block */
blockquote {
	background: #ebebeb none 6px 8px no-repeat;
	border: 1px solid #dbdbdb;
	font-size: 0.95em;
	margin: 0.5em 1px 0 25px;
	overflow: hidden;
	padding: 5px;
}

blockquote blockquote {
	/* Nested quotes */
	background-color: #bababa;
	font-size: 1em;
	margin: 0.5em 1px 0 15px;	
}

blockquote blockquote blockquote {
	/* Nested quotes */
	background-color: #e4e4e4;
}

blockquote cite {
	/* Username/source of quoter */
	font-style: normal;
	font-weight: bold;
	margin-left: 20px;
	display: block;
	font-size: 0.9em;
}

blockquote cite cite {
	font-size: 1em;
}

blockquote.uncited {
	padding-top: 25px;
}

/* Code block */
dl.codebox {
	padding: 3px;
	background-color: #FFFFFF;
	border: 1px solid #d8d8d8;
	font-size: 1em;
}

dl.codebox dt {
	text-transform: uppercase;
	border-bottom: 1px solid #CCCCCC;
	margin-bottom: 3px;
	font-size: 0.8em;
	font-weight: bold;
	display: block;
}

blockquote dl.codebox {
	margin-left: 0;
}

dl.codebox code {
	/* Also see tweaks.css */
	overflow: auto;
	display: block;
	height: auto;
	max-height: 200px;
	white-space: normal;
	padding-top: 5px;
	font: 0.9em Monaco, "Andale Mono","Courier New", Courier, mono;
	line-height: 1.3em;
	color: #8b8b8b;
	margin: 2px 0;
}

.syntaxbg		{ color: #FFFFFF; }
.syntaxcomment	{ color: #000000; }
.syntaxdefault	{ color: #bcbcbc; }
.syntaxhtml		{ color: #000000; }
.syntaxkeyword	{ color: #585858; }
.syntaxstring	{ color: #a7a7a7; }

/* Attachments
----------------------------------------*/
.attachbox {
	float: left;
	width: auto; 
	margin: 5px 5px 5px 0;
	padding: 6px;
	background-color: #FFFFFF;
	border: 1px dashed #d8d8d8;
	clear: left;
}

.pm-message .attachbox {
	background-color: #f3f3f3;
}

.attachbox dt {
	font-family: Arial, Helvetica, sans-serif;
	text-transform: uppercase;
}

.attachbox dd {
	margin-top: 4px;
	padding-top: 4px;
	clear: left;
	border-top: 1px solid #d8d8d8;
}

.attachbox dd dd {
	border: none;
}

.attachbox p {
	line-height: 110%;
	color: #666666;
	font-weight: normal;
	clear: left;
}

.attachbox p.stats
{
	line-height: 110%;
	color: #666666;
	font-weight: normal;
	clear: left;
}

.attach-image {
	margin: 3px 0;
	width: 100%;
	max-height: 350px;
	overflow: auto;
}

.attach-image img {
	border: 1px solid #999999;
/*	cursor: move; */
	cursor: default;
}

/* Inline image thumbnails */
div.inline-attachment dl.thumbnail, div.inline-attachment dl.file {
	display: block;
	margin-bottom: 4px;
}

div.inline-attachment p {
	font-size: 100%;
}

dl.file {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	display: block;
}

dl.file dt {
	text-transform: none;
	margin: 0;
	padding: 0;
	font-weight: bold;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}

dl.file dd {
	color: #666666;
	margin: 0;
	padding: 0;	
}

dl.thumbnail img {
	padding: 3px;
	border: 1px solid #666666;
	background-color: #FFF;
}

dl.thumbnail dd {
	color: #666666;
	font-style: italic;
	font-family: Verdana, Arial, Helvetica, sans-serif;
}

.attachbox dl.thumbnail dd {
	font-size: 100%;
}

dl.thumbnail dt a:hover {
	background-color: #EEEEEE;
}

dl.thumbnail dt a:hover img {
	border: 1px solid #d2d2d2;
}

/* Post poll styles
----------------------------------------*/
fieldset.polls {
	font-family: "Trebuchet MS", Verdana, Helvetica, Arial, sans-serif;
}

fieldset.polls dl {
	margin-top: 5px;
	border-top: 1px solid #e2e2e2;
	padding: 5px 0 0 0;
	line-height: 120%;
	color: #666666;
}

fieldset.polls dl.voted {
	font-weight: bold;
	color: #000000;
}

fieldset.polls dt {
	text-align: left;
	float: left;
	display: block;
	width: 30%;
	border-right: none;
	padding: 0;
	margin: 0;
	font-size: 1.1em;
}

fieldset.polls dd {
	float: left;
	width: 10%;
	border-left: none;
	padding: 0 5px;
	margin-left: 0;
	font-size: 1.1em;
}

fieldset.polls dd.resultbar {
	width: 50%;
}

fieldset.polls dd input {
	margin: 2px 0;
}

fieldset.polls dd div {
	text-align: right;
	font-family: Arial, Helvetica, sans-serif;
	color: #FFFFFF;
	font-weight: bold;
	padding: 0 2px;
	overflow: visible;
	min-width: 2%;
}

.pollbar1 {
	background-color: #aaaaaa;
	border-bottom: 1px solid #747474;
	border-right: 1px solid #747474;
}

.pollbar2 {
	background-color: #bebebe;
	border-bottom: 1px solid #8c8c8c;
	border-right: 1px solid #8c8c8c;
}

.pollbar3 {
	background-color: #D1D1D1;
	border-bottom: 1px solid #aaaaaa;
	border-right: 1px solid #aaaaaa;
}

.pollbar4 {
	background-color: #e4e4e4;
	border-bottom: 1px solid #bebebe;
	border-right: 1px solid #bebebe;
}

.pollbar5 {
	background-color: #f8f8f8;
	border-bottom: 1px solid #D1D1D1;
	border-right: 1px solid #D1D1D1;
}

/* Poster profile block
----------------------------------------*/
.postprofile {
	/* Also see tweaks.css */
	margin: 5px 0 10px 0;
	min-height: 80px;
	color: #666666;
	border-left: 1px solid #FFFFFF;
	width: 22%;
	float: right;
	display: inline;
}
.pm .postprofile {
	border-left: 1px solid #DDDDDD;
}

.postprofile dd, .postprofile dt {
	line-height: 1.2em;
	margin-left: 8px;
}

.postprofile strong {
	font-weight: normal;
	color: #000000;
}

.avatar {
	border: none;
	margin-bottom: 3px;
}

.online {
	background-image: none;
	background-position: 100% 0;
	background-repeat: no-repeat;
}
.section-viewtopic .post .online {
	position: absolute;
	top: 0;
	right: 0;
	width: 58px;
	height: 58px;
}
#viewprofile .panel {
	overflow: hidden;
}

/* Poster profile used by search*/
.search .postprofile {
	width: 30%;
}

/* pm list in compose message if mass pm is enabled */
dl.pmlist dt {
	width: 60% !important;
}

dl.pmlist dt textarea {
	width: 95%;
}

dl.pmlist dd {
	margin-left: 65% !important;
	margin-bottom: 2px;
}
/* Button Styles
---------------------------------------- */

/* Rollover buttons
   Based on: http://wellstyled.com/css-nopreload-rollovers.html
----------------------------------------*/
.buttons {
	float: left;
	width: auto;
	height: auto;
}

/* Rollover state */
.buttons div {
	float: left;
	margin: 0 5px 0 0;
	background-position: 0 100%;
}

/* Rolloff state */
.buttons div a {
	display: block;
	width: 100%;
	height: 100%;
	background-position: 0 0;
	position: relative;
	overflow: hidden;
}
/* Hide <a> text and hide off-state image when rolling over (prevents flicker in IE) */
/*.buttons div span		{ display: none; }*/
/*.buttons div a:hover	{ background-image: none; }*/
.buttons div span			{ position: absolute; width: 100%; height: 100%; cursor: pointer;}
.buttons div a:hover span	{ background-position: 0 100%; }

/* Big button images */
.reply-icon span	{ background: transparent none 0 0 no-repeat; }
.post-icon span		{ background: transparent none 0 0 no-repeat; }
.locked-icon span	{ background: transparent none 0 0 no-repeat; }
.pmreply-icon span	{ background: none 0 0 no-repeat; }
.newpm-icon span 	{ background: none 0 0 no-repeat; }
.forwardpm-icon span 	{ background: none 0 0 no-repeat; }

/* Set big button dimensions */
.buttons div.reply-icon		{ width: px; height: px; }
.buttons div.post-icon		{ width: px; height: px; }
.buttons div.locked-icon	{ width: px; height: px; }
.buttons div.pmreply-icon	{ width: px; height: px; }
.buttons div.newpm-icon		{ width: px; height: px; }
.buttons div.forwardpm-icon	{ width: px; height: px; }

/* Sub-header (navigation bar)
--------------------------------------------- */
a.print, a.sendemail, a.fontsize {
	display: block;
	overflow: hidden;
	height: 18px;
	text-indent: -5000px;
	text-align: left;
	background-repeat: no-repeat;
}

a.print {
	background-image: none;
	width: 22px;
}

a.sendemail {
	background-image: none;
	width: 22px;
}

a.fontsize {
	background-image: none;
	background-position: 0 -1px;
	width: 29px;
}

a.fontsize:hover {
	background-position: 0 -20px;
	text-decoration: none;
}

/* Icon images
---------------------------------------- */
.sitehome, .icon-faq, .icon-members, .icon-home, .icon-ucp, .icon-register, .icon-logout,
.icon-bookmark, .icon-bump, .icon-subscribe, .icon-unsubscribe, .icon-pages, .icon-search {
	background-position: 0 50%;
	background-repeat: no-repeat;
	background-image: none;
	padding: 1px 0 0 17px;
}

/* Poster profile icons
----------------------------------------*/
ul.profile-icons {
	padding-top: 10px;
	list-style: none;
}

/* Rollover state */
ul.profile-icons li {
	float: left;
	margin: 0 3px 3px 0;
	background: none;
}

/* Rolloff state */
ul.profile-icons li a {
	display: block;
	width: 100%;
	height: 100%;
	background-position: 0 0;
}

/* Hide <a> text and hide off-state image when rolling over (prevents flicker in IE) */
ul.profile-icons li span { display:none; }
ul.profile-icons li a:hover { background-position: 0 100%; }

/* Positioning of moderator icons */
.postbody ul.profile-icons {
	float: right;
	width: auto;
	padding: 0;
}

.postbody ul.profile-icons li {
	margin: 0 3px;
}

/* Profile & navigation icons */
.email-icon, .email-icon a		{ background: none top left no-repeat; }
.fb-icon, .fb-icon a			{ background: none top left no-repeat; }
.ig-icon, .ig-icon a			{ background: none top left no-repeat; }
.pt-icon, .pt-icon a			{ background: none top left no-repeat; }
.twr-icon, .twr-icon a			{ background: none top left no-repeat; }
.skp-icon, .skp-icon a			{ background: none top left no-repeat; }
.tg-icon, .tg-icon a			{ background: none top left no-repeat; }
.li-icon, .li-icon a			{ background: none top left no-repeat; }
.tt-icon, .tt-icon a			{ background: none top left no-repeat; }
.dc-icon, .dc-icon a			{ background: none top left no-repeat; }
.aim-icon, .aim-icon a			{ background: none top left no-repeat; }
.yahoo-icon, .yahoo-icon a		{ background: none top left no-repeat; }
.web-icon, .web-icon a			{ background: none top left no-repeat; }
.msnm-icon, .msnm-icon a			{ background: none top left no-repeat; }
.icq-icon, .icq-icon a			{ background: none top left no-repeat; }
.jabber-icon, .jabber-icon a		{ background: none top left no-repeat; }
.pm-icon, .pm-icon a				{ background: none top left no-repeat; }
.quote-icon, .quote-icon a		{ background: none top left no-repeat; }

/* Moderator icons */
.report-icon, .report-icon a		{ background: none top left no-repeat; }
.warn-icon, .warn-icon a			{ background: none top left no-repeat; }
.edit-icon, .edit-icon a			{ background: none top left no-repeat; }
.delete-icon, .delete-icon a		{ background: none top left no-repeat; }
.info-icon, .info-icon a			{ background: none top left no-repeat; }

/* Set profile icon dimensions */
ul.profile-icons li.email-icon		{ width: 20px; height: 20px; }
ul.profile-icons li.fb-icon		{ width: px; height: px; }
ul.profile-icons li.ig-icon		{ width: px; height: px; }
ul.profile-icons li.pt-icon		{ width: px; height: px; }
ul.profile-icons li.twr-icon	{ width: px; height: px; }
ul.profile-icons li.skp-icon	{ width: px; height: px; }
ul.profile-icons li.tg-icon		{ width: px; height: px; }
ul.profile-icons li.li-icon		{ width: px; height: px; }
ul.profile-icons li.tt-icon		{ width: px; height: px; }
ul.profile-icons li.dc-icon		{ width: px; height: px; }
ul.profile-icons li.aim-icon	{ width: 20px; height: 20px; }
ul.profile-icons li.yahoo-icon	{ width: 20px; height: 20px; }
ul.profile-icons li.web-icon	{ width: 20px; height: 20px; }
ul.profile-icons li.download-icon	{ width: px; height: px; }
ul.profile-icons li.msnm-icon	{ width: 20px; height: 20px; }
ul.profile-icons li.icq-icon	{ width: 20px; height: 20px; }
ul.profile-icons li.jabber-icon	{ width: 20px; height: 20px; }
/* ul.profile-icons li.pm-icon		{ width: px; height: px; }  	moved to im.css */
/* ul.profile-icons li.quote-icon	{ width: px; height: px; }  	moved to im.css */
ul.profile-icons li.report-icon	{ width: 20px; height: 20px; }
/* ul.profile-icons li.edit-icon	{ width: px; height: px; }  	moved to im.css */
ul.profile-icons li.delete-icon	{ width: 20px; height: 20px; }
ul.profile-icons li.info-icon	{ width: 20px; height: 20px; }
ul.profile-icons li.warn-icon	{ width: px; height: px; }

/* Fix profile icon default margins */
ul.profile-icons li.edit-icon	{ margin: 0 0 0 3px; }
ul.profile-icons li.quote-icon	{ margin: 0 0 0 10px; }
ul.profile-icons li.info-icon, ul.profile-icons li.report-icon	{ margin: 0 3px 0 0; }
/* Control Panel Styles
---------------------------------------- */


/* Main CP box
----------------------------------------*/
#cp-menu {
	float:left;
	width: 19%;
	margin-top: 1em;
	margin-bottom: 5px;
}

#cp-main {
	float: left;
	width: 81%;
}

#cp-main .content {
	padding: 0;
}

#cp-main h3, #cp-main hr, #cp-menu hr {
	border-color: #bfbfbf;
}

#cp-main .panel p {
}

#cp-main .panel ol {
	margin-left: 2em;
}

#cp-main .panel li.row {
	border-bottom: 1px solid #cbcbcb;
	border-top: 1px solid #F9F9F9;
}

ul.cplist {
	margin-bottom: 5px;
	border-top: 1px solid #cbcbcb;
}

#cp-main .panel li.header dd, #cp-main .panel li.header dt {
}

#cp-main table.table1 {
	margin-bottom: 1em;
}

#cp-main table.table1 thead th {
	color: #333333;
	font-weight: bold;
	border-bottom: 1px solid #333333;
	padding: 5px;
}

#cp-main table.table1 tbody th {
	font-style: italic;
	background-color: transparent !important;
	border-bottom: none;
}

#cp-main .pagination {
	float: right;
	width: auto;
	padding-top: 1px;
}

#cp-main .postbody p {
}

#cp-main .pm-message {
	border: 1px solid #e2e2e2;
	margin: 10px 0;
	background-color: #FFFFFF;
	width: auto;
	float: none;
}

.pm-message h2 {
	padding-bottom: 5px;
}

#cp-main .postbody h3, #cp-main .box2 h3 {
	margin-top: 0;
}

#cp-main .buttons {
	margin-left: 0;
	margin-bottom: 6px;
}

#cp-main ul.linklist {
	margin: 0;
}

/* MCP Specific tweaks */
.mcp-main .postbody {
	width: 100%;
}

.tabs-container h2 {
	float: left;
	margin-bottom: 0px;
}

.tabs-container #minitabs {
	float: right;
	margin-top: 19px;
}

.tabs-container:after {
	display: block;
	clear: both;
	content: '';
}

/* CP tabbed menu
----------------------------------------*/
#tabs {
	line-height: normal;
	margin: 20px 0 -1px;
	min-width: 570px;
}

#tabs ul {
	margin:0;
	padding: 0;
	list-style: none;
}

#tabs li {
	display: inline;
	margin: 0;
	padding: 0;
	font-size: 1em;
	font-weight: bold;
}
#tabs li.activetab a span {
	color: #ffffff;
	background-color: #2E3539 !important;
}
#tabs a {
	float: left;
	margin: 0 1px 0 0;
	padding: 0;
	text-decoration: none;
	position: relative;
	cursor: pointer;
}

#tabs a span {
	float: left;
	display: block;
	padding: 12px;
	white-space: nowrap;
	background-color: #43A6DF;
	color: #FFFFFF;
}


#tabs .activetab a {
	border-bottom: 1px solid #ebebeb;
}

#tabs .activetab a span {
}

#tabs a:hover {
}

#tabs a:hover span {
	background-color: #2E3539;
	color: #FFFFFF;
}

#tabs .activetab a:hover {
	background-position: 0 0;
}

#tabs .activetab a:hover span {
	color: #FFFFFF !important;
	background-position: 100% 0;
}

/* Mini tabbed menu used in MCP
----------------------------------------*/
#minitabs {
	line-height: normal;
	margin: -20px 7px 0 0;
}

#minitabs ul {
	margin:0;
	padding: 0;
	list-style: none;
}

#minitabs li {
	display: block;
	float: right;
	padding: 0 10px 4px 10px;
	font-size: 1em;
	font-weight: bold;
	background-color: #f2f2f2;
	margin-left: 2px;
}

#minitabs a {
}

#minitabs a:hover {
	text-decoration: none;
}

#minitabs li.activetab {
	background-color: #F9F9F9;
}

#minitabs li.activetab a, #minitabs li.activetab a:hover {
	color: #333333;
}

/* UCP navigation menu
----------------------------------------*/
/* Container for sub-navigation list */
#navigation {
	width: 100%;
	padding-top: 37px;
}

#navigation ul {
	list-style:none;
}

/* Default list state */
#navigation li {
	margin: 1px 0;
	padding: 0;
	font-weight: bold;
	display: inline;
}

/* Link styles for the sub-section links */
#navigation a {
	display: block;
	padding: 12px 6px;
	margin: 1px 0;
	text-decoration: none;
	font-weight: bold;
	color: #333;
	background: #cfcfcf none repeat-y 100% 0;
}

#navigation a:hover {
	text-decoration: none;
	background-color: #c6c6c6;
	color: #bcbcbc;
	background-image: none;
}

#navigation #active-subsection a {
	display: block;
	color: #d3d3d3;
	background-color: #F9F9F9;
	background-image: none;
}

#navigation #active-subsection a:hover {
	color: #d3d3d3;
}

/* Preferences pane layout
----------------------------------------*/
#cp-main h2 {
	border-bottom: none;
	padding: 0;
	margin-left: 10px;
	color: #333333;
}

#cp-main .panel {
	overflow: hidden;
}

#cp-main .pm {
	background-color: #FFFFFF;
}

#cp-main span.corners-top, #cp-menu span.corners-top {
	background-image: none;
}

#cp-main span.corners-top span, #cp-menu span.corners-top span {
	background-image: none;
}

#cp-main span.corners-bottom, #cp-menu span.corners-bottom {
	background-image: none;
}

#cp-main span.corners-bottom span, #cp-menu span.corners-bottom span {
	background-image: none;
}

/* Topicreview */
#cp-main .panel #topicreview span.corners-top, #cp-menu .panel #topicreview span.corners-top {
	background-image: none;
}

#cp-main .panel #topicreview span.corners-top span, #cp-menu .panel #topicreview span.corners-top span {
	background-image: none;
}

#cp-main .panel #topicreview span.corners-bottom, #cp-menu .panel #topicreview span.corners-bottom {
	background-image: none;
}

#cp-main .panel #topicreview span.corners-bottom span, #cp-menu .panel #topicreview span.corners-bottom span {
	background-image: none;
}

/* Friends list */
.cp-mini {
	background-color: #f9f9f9;
	padding: 0 5px;
	margin: 10px 15px 10px 5px;
}

.cp-mini span.corners-top, .cp-mini span.corners-bottom {
	margin: 0 -5px;
}

dl.mini dt {
	font-weight: bold;
	color: #676767;
}

dl.mini dd {
	padding-top: 4px;
}

.friend-online {
	font-weight: bold;
}

.friend-offline {
	font-style: italic;
}

/* PM Styles
----------------------------------------*/
#pm-menu {
	line-height: 2.5em;
}

/* PM panel adjustments */
.reply-all a.left {
	background-position: 3px 60%;
}

.reply-all a.left:hover {
	background-position: 0px 60%;
}

.reply-all {
	font-size: 11px;
	padding-top: 5px;
}

/* PM Message history */
.current {
	color: #999999;
}

/* Defined rules list for PM options */
ol.def-rules {
	padding-left: 0;
}

ol.def-rules li {
	line-height: 180%;
	padding: 1px;
}

/* PM marking colours */
.pmlist li.bg1 {
	padding: 0 3px;
}

.pmlist li.bg2 {
	padding: 0 3px;
}

.pmlist li.pm_message_reported_colour, .pm_message_reported_colour {
	border-left-color: #bcbcbc;
	border-right-color: #bcbcbc;
}

.pmlist li.pm_marked_colour, .pm_marked_colour {
	padding: 0;
	border: solid 3px #ffffff;
	border-width: 0 3px;
}

.pmlist li.pm_replied_colour, .pm_replied_colour {
	padding: 0;
	border: solid 3px #c2c2c2;
	border-width: 0 3px;
}

.pmlist li.pm_friend_colour, .pm_friend_colour {
	padding: 0;
	border: solid 3px #bdbdbd;
	border-width: 0 3px;
}

.pmlist li.pm_foe_colour, .pm_foe_colour {
	padding: 0;
	border: solid 3px #000000;
	border-width: 0 3px;
}

.pm-legend {
	border-left-width: 10px;
	border-left-style: solid;
	border-right-width: 0;
	margin-bottom: 3px;
	padding-left: 3px;
}

/* Avatar gallery */
#gallery label {
	position: relative;
	float: left;
	margin: 10px;
	padding: 5px;
	width: auto;
	background: #FFFFFF;
	border: 1px solid #CCC;
	text-align: center;
}

#gallery label:hover {
	background-color: #EEE;
}
/* Form Styles
---------------------------------------- */

/* General form styles
----------------------------------------*/
fieldset {
	border-width: 0;
	font-family: 'Open Sans', sans-serif;
}

input {
	font-weight: normal;
	cursor: pointer;
	vertical-align: middle;
	padding: 0 3px;
	font-family: 'Open Sans', sans-serif;
}

select {
	font-family: 'Open Sans', sans-serif;
	font-weight: normal;
	cursor: pointer;
	vertical-align: middle;
	border: 1px solid #DCDCDC;
	padding: 1px;
	background-color: #FAFAFA;
}

option {
	padding-right: 1em;
}

option.disabled-option {
	color: graytext;
}

textarea {
	font-family: 'Open Sans', sans-serif;
	width: 60%;
	padding: 2px;
	line-height: 1.4em;
	font-size: 1em;
}

label {
	cursor: default;
	padding-right: 5px;
	color: #676767;
}

label input {
	vertical-align: middle;
}

label img {
	vertical-align: middle;
}

/* Definition list layout for forms
---------------------------------------- */
fieldset dl {
	padding: 4px 0;
}

fieldset dt {
	float: left;	
	width: 40%;
	text-align: left;
	display: block;
}

fieldset dd {
	margin-left: 41%;
	vertical-align: top;
	margin-bottom: 3px;
}

/* Specific layout 1 */
fieldset.fields1 dt {
	width: 15em;
	border-right-width: 0;
}

fieldset.fields1 dd {
	margin-left: 15em;
	border-left-width: 0;
}

fieldset.fields1 {
	background-color: transparent;
}

fieldset.fields1 div {
	margin-bottom: 3px;
}

/* Set it back to 0px for the reCaptcha divs: PHPBB3-9587 */
fieldset.fields1 #recaptcha_widget_div div {
	margin-bottom: 0;
}

/* Specific layout 2 */
fieldset.fields2 dt {
	width: 15em;
	border-right-width: 0;
}

fieldset.fields2 dd {
	margin-left: 16em;
	border-left-width: 0;
}

/* Form elements */
dt label {
	font-weight: bold;
	text-align: left;
}

dd label {
	white-space: nowrap;
	color: #333;
}

dd input, dd textarea {
	margin-right: 3px;
}

dd select {
	width: auto;
}

dd textarea {
	width: 85%;
}

/* Hover effects */
fieldset dl:hover dt label {
	color: #000000;
}

fieldset.fields2 dl:hover dt label {
	color: inherit;
}

#timezone {
	width: 95%;
}

* html #timezone {
	width: 50%;
}

/* Quick-login on index page */
.homelogin {
	background-color: #fff;
	padding: 12px;
	border: solid 1px #e4e4e4;
	margin-bottom: 12px;
}
fieldset.quick-login {
	margin-top: 5px;
}

fieldset.quick-login input {
	width: auto;
}

fieldset.quick-login input.inputbox {
	width: 15%;
	vertical-align: middle;
	margin-right: 5px;
	background-color: #f3f3f3;
}

fieldset.quick-login label {
	white-space: nowrap;
	padding-right: 2px;
}

/* Display options on viewtopic/viewforum pages  */
fieldset.display-options {
	text-align: center;
	margin: 3px 0 12px 0;
}

fieldset.display-options label {
	white-space: nowrap;
	padding-right: 2px;
}

fieldset.display-options a {
	margin-top: 3px;
}

/* Display actions for ucp and mcp pages */
fieldset.display-actions {
	text-align: right;
	line-height: 2em;
	white-space: nowrap;
	padding-right: 1em;
}

fieldset.display-actions label {
	white-space: nowrap;
	padding-right: 2px;
}

fieldset.sort-options {
	line-height: 2em;
}

/* MCP forum selection*/
fieldset.forum-selection {
	margin: 5px 0 3px 0;
	float: right;
}

fieldset.forum-selection2 {
	margin: 13px 0 3px 0;
	float: right;
}

/* Jumpbox */
fieldset.jumpbox {
	text-align: right;
	margin-top: 12px;
	margin-bottom: 12px;
}

fieldset.quickmod {
	width: 50%;
	float: right;
	text-align: right;
	height: 2.5em;
}

/* Submit button fieldset */
fieldset.submit-buttons {
	text-align: center;
	vertical-align: middle;
	margin: 5px 0;
}

fieldset.submit-buttons input {
	vertical-align: middle;
	padding-top: 3px;
	padding-bottom: 3px;
}

/* Posting page styles
----------------------------------------*/

/* Buttons used in the editor */
#format-buttons {
	margin: 15px 0 2px 0;
}

#format-buttons input, #format-buttons select {
	vertical-align: middle;
}

/* Main message box */
#message-box {
	width: 80%;
}

#message-box textarea {
	width: 450px;
	height: 270px;
	min-width: 100%;
	max-width: 100%;
	color: #333333;
}

/* Emoticons panel */
#smiley-box {
	width: 17%;
	float: right;
}

#smiley-box img {
	margin: 3px;
}

/* Input field styles
---------------------------------------- */
.inputbox {
	background-color: #FFFFFF;
	border: 1px solid #c0c0c0;
	color: #333333;
	padding: 2px;
	cursor: text;
}

.inputbox:hover {
	border: 1px solid #eaeaea;
}

.inputbox:focus {
	border: 1px solid #eaeaea;
	color: #4b4b4b;
}

input.inputbox	{ width: 85%; }
input.medium	{ width: 50%; }
input.narrow	{ width: 25%; }
input.tiny		{ width: 125px; }

textarea.inputbox {
	width: 85%;
}

.autowidth {
	width: auto !important;
}

/* Form button styles
---------------------------------------- */
input.button1, input.button2 {
	font-size: 1em;
}

a.button1, input.button1, input.button3, a.button2, input.button2 {
	width: auto !important;
	padding: 3px 12px;
	font-family: 'Open Sans', sans-serif;
	color: #000;
	background: #FAFAFA none repeat-x top left;
	border: 0;
}

a.button1, input.button1 {
}

input.button3 {
	padding: 0;
	margin: 0;
	line-height: 5px;
	height: 12px;
	background-image: none;
	font-variant: small-caps;
}

/* Alternative button */
a.button2, input.button2, input.button3 {
	border: 0;
}

/* <a> button in the style of the form buttons */
a.button1, a.button1:link, a.button1:visited, a.button1:active, a.button2, a.button2:link, a.button2:visited, a.button2:active {
	text-decoration: none;
	color: #000000;
	padding: 6px 12px;
	line-height: 250%;
	vertical-align: text-bottom;
	background-position: 0 2px;
}

/* Hover states */
a.button1:hover, input.button1:hover, a.button2:hover, input.button2:hover, input.button3:hover {
	/*border: 1px solid #BCBCBC;*/
	background-color: #2E3539;
	color: #BCBCBC;
}

input.disabled {
	font-weight: normal;
	color: #666666;
}

/* Topic and forum Search */
.search-box {
	float: left;
}

.search-box .inputbox:hover,
.search-box .inputbox:focus {
	border: 0;
}

input.search {
	background-image: none;
	background-repeat: no-repeat;
	background-position: left 1px;
	padding-left: 6px;
}

.full { width: 95%; }
.medium { width: 50%;}
.narrow { width: 25%;}
.tiny { width: 10%;}
/* Style Sheet Tweaks

These style definitions are mainly IE specific 
tweaks required due to its poor CSS support.
-------------------------------------------------*/

* html table, * html select, * html input { font-size: 100%; }
* html hr { margin: 0; }
* html span.corners-top, * html span.corners-bottom { background-image: url("./styles/IM_blue/theme/images/corners_left.gif"); }
* html span.corners-top span, * html span.corners-bottom span { background-image: url("./styles/IM_blue/theme/images/corners_right.gif"); }

table.table1 {
	width: 99%;		/* IE < 6 browsers */
	/* Tantek hack */
	voice-family: "\"}\"";
	voice-family: inherit;
	width: 100%;
}
html>body table.table1 { width: 100%; }	/* Reset 100% for opera */

* html ul.topiclist li { position: relative; }
* html .postbody h3 img { vertical-align: middle; }

/* Form styles */
html>body dd label input { vertical-align: text-bottom; }	/* Align checkboxes/radio buttons nicely */

* html input.button1, * html input.button2 {
	padding-bottom: 0;
	margin-bottom: 1px;
}

/* Misc layout styles */
* html .column1, * html .column2 { width: 45%; }

/* Nice method for clearing floated blocks without having to insert any extra markup (like spacer above)
   From http://www.positioniseverything.net/easyclearing.html 
#tabs:after, #minitabs:after, .post:after, .navbar:after, fieldset dl:after, ul.topiclist dl:after, ul.linklist:after, dl.polls:after {
	content: "."; 
	display: block; 
	height: 0; 
	clear: both; 
	visibility: hidden;
}*/

.clearfix, #tabs, #minitabs, fieldset dl, ul.topiclist dl, dl.polls {
	height: 1%;
	overflow: hidden;
}

/* viewtopic fix */
* html .post {
	height: 25%;
	overflow: hidden;
}

/* navbar fix */
* html .clearfix, * html .navbar, ul.linklist {
	height: 4%;
	overflow: hidden;
}

/* Simple fix so forum and topic lists always have a min-height set, even in IE6
	From http://www.dustindiaz.com/min-height-fast-hack */
dl.icon {
	min-height: 35px;
	height: auto !important;
	height: 35px;
}

* html li.row dl.icon dt {
	height: 35px;
	overflow: visible;
}

* html #search-box {
	width: 25%;
}

/* Correctly clear floating for details on profile view */
*:first-child+html dl.details dd {
	margin-left: 30%;
	float: none;
}

* html dl.details dd {
	margin-left: 30%;
	float: none;
}

/* Headerbar height fix for IE7 and below */
* html #site-description p {
	margin-bottom: 1.0em;
}

*:first-child+html #site-description p {
	margin-bottom: 1.0em;
}

/* #minitabs fix for IE */
.tabs-container {
	zoom: 1;
}

#minitabs {
	white-space: nowrap;
	*min-width: 50%;
}
/*  	
--------------------------------------------------------------
Colours and backgrounds for common.css
-------------------------------------------------------------- */

html, body {
	color: #333333;
	background-color: #F6F6F6;
}

h1 {
	color: #FFFFFF;
}

h2 {
	color: #3E3E3E;
}

h3 {
	color: #3E3E3E;
}

hr {
	border-color: #E4E4E4;
}

hr.dashed {
	border-top-color: #E4E4E4;
}

#header #logo {
    color: #FFFFFF;
}

#simple-wrap {
	background-color: #fff;
	border-color: #E4E4E4;
}

#simple-wrap h2 {
	border-bottom-color: #E4E4E4;
}

/* Search box
--------------------------------------------- */

.search-box {
	color: #FFFFFF;
}

.search-box #keywords {
	background-color: #FFF;
}

.search-box input {
	border: 0;
}
.search-box .search-box-inner .button2 {
    border: 0;
    cursor: pointer;
    float: right;
    height: 26px;
    padding: 0;
    text-indent: -9999px;
    width: 26px !important;	
	
    background-attachment: scroll;
    background-image: url("./styles/IM_blue/theme/images/search-button-bg.png");
    background-position: left top;	
}
.search-box .search-box-inner .button2:hover {
    background-position: left bottom;	
}


/* Round cornered boxes and backgrounds
---------------------------------------- */
.headerbar {
	background-color: #12A3EB;
	color: #FFFFFF;
}

.navbar {
	border-top-color: #E4E4E4;
	border-bottom-color: #E4E4E4;
}

.forabg {
	background-color: #43A6DF;
}

.forumbg {
	background-color: #43A6DF;
}

.panel {
	background-color: #FFFFFF;
	border: solid 1px #E4E4E4;
	padding: 12px;
	color: #3f3f3f;

}

.post {
	border: solid 1px #E4E4E4;
}

.post:target .content {
	color: #000000;
}

.post:target h3 a {
	color: #000000;
}

.bg1	{ background-color: #f7f7f7; overflow: hidden; }
.bg2	{ background-color: #f2f2f2; overflow: hidden; }
.bg3	{ background-color: #ebebeb; overflow: hidden; }

.ucprowbg {
	background-color: #DCDEE2;
}

.fieldsbg {
	background-color: #E7E8EA;
}

span.corners-top {
	background-image: url("./styles/IM_blue/theme/images/corners_left.png");
}

span.corners-top span {
	background-image: url("./styles/IM_blue/theme/images/corners_right.png");
}

span.corners-bottom {
	background-image: url("./styles/IM_blue/theme/images/corners_left.png");
}

span.corners-bottom span {
	background-image: url("./styles/IM_blue/theme/images/corners_right.png");
}

/* Horizontal lists
----------------------------------------*/

ul.navlinks {
	border-bottom-color: #FFFFFF;
}

/* Table styles
----------------------------------------*/
table.table1 thead th {
	color: #FFFFFF;
}

table.table1 tbody tr {
	border-color: #E4E4E4;
}

table.table1 tbody tr:hover, table.table1 tbody tr.hover {
	background-color: #F2F2F2;
	color: #000;
}

table.table1 td {
	color: #43A6DF;
}

table.table1 tbody td {
	border-top-color: #E4E4E4;
}

table.table1 tbody th {
	border-bottom-color: #E4E4E4;
	color: #333333;
	background-color: #FFFFFF;
}

table.info tbody th {
	color: #000000;
}

#memberlist, .table-list {
	border-collapse: collapse;
}
#memberlist th, .table-list th {
	background-color: #2E3539;
	padding: 14px 0;
}
#memberlist th.name, .table-list th.name {
	padding-left: 6px;
}
/* Misc layout styles
---------------------------------------- */
dl.details dt {
	color: #000000;
	font-weight: bold;
}

dl.details dd {
}

.sep {
	color: #43A6DF;
}

.dark-header {
	background-color: #2E3539;
	color: #ffffff;
}

.dark-header a {
	color: #ffffff !important;
}

.dark-header-content {
	background-color: #ffffff;
    border-bottom: 1px solid #E4E4E4;
    border-left: 1px solid #E4E4E4;
    border-right: 1px solid #E4E4E4;
}

/* Sidebar blocks
---------------------------------------- */

.sidebar-block-header {
	background-color: #2E3539;
    color: #FFFFFF;
}

.sidebar-block-content {
    background: #FFFFFF;
    border: solid 1px #E4E4E4;
    color: #424242;
}

#footer_divider {
	border-bottom: 1px solid #E4E4E4;
}

/* Pagination
---------------------------------------- */

.pagination span strong {
	color: #FFFFFF;
	background-color: #2E3539;
	border-color: #2E3539;
}

.pagination span a, .pagination span a:link, .pagination span a:visited {
	background-color: #FFFFFF;
	border-color: #E4E4E4;
}

.pagination span a:hover {
	border-color: #43A6DF;
	background-color: #43A6DF;
	color: #FFF;
}

.pagination span a:active {
	color: #5C758C;
	background-color: #ECEDEE;
	border-color: #B4BAC0;
}

/* Pagination in viewforum for multipage topics */
.row .pagination {
	background-image: url("./styles/IM_blue/theme/images/icon_pages.png");
}

.row .pagination span a, li.pagination span a {
	background-color: #FFFFFF;
}

.row .pagination span a:hover, li.pagination span a:hover {
	background-color: #368AD2;
}

/* Miscellaneous styles
---------------------------------------- */

.copyright {
	color: #555555;
}

.error {
	color: #BC2A4D;
}

.reported {
	
}
.post.reported, .row.reported {
	border: solid 3px #FF5500;
}

li.reported:hover {
	
}
.sticky, .announce {
	/* you can add a background for stickies and announcements*/
}

div.rules {
	background-color: #2E3539;
	color: #FFFFFF;
	background-attachment: scroll;
	background-image: url("./styles/IM_blue/theme/images/notice-exclamation.png");
	background-repeat: no-repeat;
	background-position: 12px 12px;
	padding-left: 60px;
}
div.rules a {
	color: #43A6DF;
	font-weight: bold;
	text-decoration: underline;
}
div.rules a:hover {
	text-decoration: none;
}

p.rules {
	background-image: none;
}

/*  	
--------------------------------------------------------------
Colours and backgrounds for links.css
-------------------------------------------------------------- */

a:link	{ color: #43A6DF; }
a:visited	{ color: #43A6DF; }
a:hover	{ color: #43A6DF; }
a:active	{ color: #43A6DF; }

#navmenu a.active, .breadcrumbs li.active {
    color: #E96308;
}

/* Links on gradient backgrounds */
.search-box a:link, .navbg a:link, .forumbg .header a:link, .forabg .header a:link, th a:link {
	color: #43A6DF;
}

.search-box a:visited, .navbg a:visited, .forumbg .header a:visited, .forabg .header a:visited, th a:visited {
	color: #43A6DF;
}

.search-box a:hover, .navbg a:hover, .forumbg .header a:hover, .forabg .header a:hover, th a:hover {
	color: #43A6DF;
}

.search-box a:active, .navbg a:active, .forumbg .header a:active, .forabg .header a:active, th a:active {
	color: #43A6DF;
}

/* Links for forum/topic lists */
a.forumtitle {
	color: #2E3539;
}

/* a.forumtitle:visited { color: #105289; } */

a.forumtitle:hover {
	color: #2E3539;
}

a.forumtitle:active {
	color: #2E3539;
}

a.topictitle {
	color: #43A6DF;
}

/* a.topictitle:visited { color: #368AD2; } */

a.topictitle:hover {
	color: #43A6DF;
}

a.topictitle:active {
	color: #43A6DF;
}

/* Post body links */
.postlink {
	color: #43A6DF;
	border-bottom-color: #43A6DF;
}

.postlink:visited {
	color: #43A6DF;
	border-bottom-color: #43A6DF;
}

.postlink:active {
	color: #43A6DF;
}

.postlink:hover {
	background-color: transparent;
	color: #43A6DF;
}

.signature a, .signature a:visited, .signature a:hover, .signature a:active {
	background-color: transparent;
}

/* Profile links */
.postprofile a:link, .postprofile a:visited, .postprofile dt.author a {
	color: #43A6DF;
}

.postprofile a:hover, .postprofile dt.author a:hover {
	color: #43A6DF;
}

.postprofile a:active {
	color: #43A6DF;
}

/* Profile searchresults */	
.search .postprofile a {
	color: #43A6DF;
}

.search .postprofile a:hover {
	color: #43A6DF;
}

/* Back to top of page */
a.top {
	background-image: url("./styles/IM_blue/imageset/icon_back_top.gif");
}

a.top2 {
	background-image: url("./styles/IM_blue/imageset/icon_back_top.gif");
}

/* Arrow links  */
a.up		{ background-image: url("./styles/IM_blue/theme/images/arrow_up.png") }
a.down		{ background-image: url("./styles/IM_blue/theme/images/arrow_down.png") }
a.left		{ background-image: url("./styles/IM_blue/theme/images/arrow_left.png") }
a.right		{ background-image: url("./styles/IM_blue/theme/images/arrow_right.png") }

a.up:hover {
	background-color: transparent;
	color: #43A6DF;
}

a.left:hover {
	text-decoration: underline;
	color: #43A6DF;
}

a.right:hover {
	text-decoration: underline;
	color: #43A6DF;
}


/*  	
--------------------------------------------------------------
Colours and backgrounds for content.css
-------------------------------------------------------------- */

ul.forums {
	background-color: #ffffff;
}
.ucp-main ul.topiclist {
	background-color: #2E3539;
	color: #fff;
	clear: both;
}
ul.topiclist li {
	
}

ul.topiclist dd {
	border-left-color: #FFFFFF;
}

.rtl ul.topiclist dd {
	border-right-color: #fff;
	border-left-color: transparent;
}

ul.topiclist li.row dt a.subforum.read {
	background-image: url("./styles/IM_blue/imageset/subforum_read.gif");
}

ul.topiclist li.row dt a.subforum.unread {
	background-image: url("./styles/IM_blue/imageset/subforum_unread.gif");
}

li.row {
	
}

li.row strong {
	color: #000000;
}

li.row:hover {
	background-color: #F2F2F2;
}

li.row:hover dd {
	
}

.rtl li.row:hover dd {
	
}

li.header dt, li.header dd {
	color: #FFFFFF;
}

/* Forum list column styles */
ul.topiclist dd.searchextra {
	color: #333333;
}
.mcp-main .header {
	background-color: #2E3539;
    color: #FFFFFF;
}
/* Post body styles
----------------------------------------*/
.postbody {
	color: #333333;
}

/* Content container styles
----------------------------------------*/
.content {
	color: #333333;
}

.content h2, .panel h2 {
	border-bottom-color:  #E4E4E4;
}

dl.faq dt {
	color: #333333;
}

.posthilit {
	background-color: #F3BFCC;
	color: #BC2A4D;
}

/* Post signature */
.signature {
	border-top-color: #E4E4E4;
}

/* Post noticies */
.notice {
	border-top-color:  #E4E4E4;
}

/* BB Code styles
----------------------------------------*/
/* Quote block */
blockquote {
	background-color: #F7F7F7;
	background-image: url("./styles/IM_blue/theme/images/quote.gif");
	border-color:#E4E4E4;
}

.rtl blockquote {
	background-image: url("./styles/IM_blue/theme/images/quote_rtl.gif");
}

blockquote blockquote {
	/* Nested quotes */
	background-color:#EFEED9;
}

blockquote blockquote blockquote {
	/* Nested quotes */
	background-color: #EBEADD;
}

/* Code block */
dl.codebox {
	background-color: #FFFFFF;
	border-color: #C9D2D8;
}

dl.codebox dt {
	border-bottom-color:  #CCCCCC;
}

dl.codebox code {
	color: #2E8B57;
}

.syntaxbg		{ color: #FFFFFF; }
.syntaxcomment	{ color: #FF8000; }
.syntaxdefault	{ color: #0000BB; }
.syntaxhtml		{ color: #000000; }
.syntaxkeyword	{ color: #007700; }
.syntaxstring	{ color: #DD0000; }

/* Attachments
----------------------------------------*/
.attachbox {
	background-color: #FFFFFF;
	border-color:  #C9D2D8;
}

.pm-message .attachbox {
	background-color: #F2F3F3;
}

.attachbox dd {
	border-top-color: #E4E4E4;
}

.attachbox p {
	color: #666666;
}

.attachbox p.stats {
	color: #666666;
}

.attach-image img {
	border-color: #999999;
}

/* Inline image thumbnails */

dl.file dd {
	color: #666666;
}

dl.thumbnail img {
	border-color: #666666;
	background-color: #FFFFFF;
}

dl.thumbnail dd {
	color: #666666;
}

dl.thumbnail dt a:hover {
	background-color: #EEEEEE;
}

dl.thumbnail dt a:hover img {
	border-color: #368AD2;
}

/* Post poll styles
----------------------------------------*/

fieldset.polls dl {
	border-top-color: #DCDEE2;
	color: #666666;
}

fieldset.polls dl.voted {
	color: #000000;
}

fieldset.polls dd div {
	color: #FFFFFF;
}

.rtl .pollbar1, .rtl .pollbar2, .rtl .pollbar3, .rtl .pollbar4, .rtl .pollbar5 {
	border-right-color: transparent;
}

.pollbar1 {
	background-color: #AA2346;
	border-bottom-color: #74162C;
	border-right-color: #74162C;
}

.rtl .pollbar1 {
	border-left-color: #74162C;
}

.pollbar2 {
	background-color: #BE1E4A;
	border-bottom-color: #8C1C38;
	border-right-color: #8C1C38;
}

.rtl .pollbar2 {
	border-left-color: #8C1C38;
}

.pollbar3 {
	background-color: #D11A4E;
	border-bottom-color: #AA2346;
	border-right-color: #AA2346;
}

.rtl .pollbar3 {
	border-left-color: #AA2346;
}

.pollbar4 {
	background-color: #E41653;
	border-bottom-color: #BE1E4A;
	border-right-color: #BE1E4A;
}

.rtl .pollbar4 {
	border-left-color: #BE1E4A;
}

.pollbar5 {
	background-color: #F81157;
	border-bottom-color: #D11A4E;
	border-right-color: #D11A4E;
}

.rtl .pollbar5 {
	border-left-color: #D11A4E;
}

/* Poster profile block
----------------------------------------*/
.postprofile {
	color: #666666;
	border-left-color: #FFFFFF;
}

.rtl .postprofile {
	border-right-color: #FFFFFF;
	border-left-color: transparent;
}

.pm .postprofile {
	border-left-color: #DDDDDD;
}

.rtl .pm .postprofile {
	border-right-color: #DDDDDD;
	border-left-color: transparent;
}

.postprofile strong {
	color: #000000;
}

.online {
	background-image: url("./styles/IM_blue/imageset/en/icon_user_online.gif");
}

/*  	
--------------------------------------------------------------
Colours and backgrounds for buttons.css
-------------------------------------------------------------- */

/* Big button images */
.reply-icon span	{ background-image: url(""); }
.post-icon span		{ background-image: url(""); }
.locked-icon span	{ background-image: url(""); }
.pmreply-icon span	{ background-image: url("") ;}
.newpm-icon span 	{ background-image: url("") ;}
.forwardpm-icon span	{ background-image: url("") ;}

a.print {
	background-image: url("./styles/IM_blue/theme/images/icon_print.png");
}

a.sendemail {
	background-image: url("./styles/IM_blue/theme/images/icon_sendemail.png");
}

a.fontsize {
	background-image: url("./styles/IM_blue/theme/images/icon_fontsize.gif");
}

/* Icon images
---------------------------------------- */
.sitehome						{ background-image: url("./styles/IM_blue/theme/images/icon_home.png"); }
/*.icon-faq						{ background-image: url("./styles/IM_blue/theme/images/icon_faq.gif"); } */
/*.icon-members					{ background-image: url("./styles/IM_blue/theme/images/icon_members.gif"); } */
.icon-home						{ background-image: url("./styles/IM_blue/theme/images/icon_home.png"); }
/*.icon-ucp						{ background-image: url("./styles/IM_blue/theme/images/icon_ucp.gif"); } */
/*.icon-register				{ background-image: url("./styles/IM_blue/theme/images/icon_register.gif"); } */
/*.icon-logout					{ background-image: url("./styles/IM_blue/theme/images/icon_logout.gif"); } */
.icon-bookmark					{ background-image: url("./styles/IM_blue/theme/images/icon_bookmark.png"); }
.icon-bump						{ background-image: url("./styles/IM_blue/theme/images/icon_bump.gif"); }
.icon-subscribe					{ background-image: url("./styles/IM_blue/theme/images/icon_subscribe.png"); }
.icon-unsubscribe				{ background-image: url("./styles/IM_blue/theme/images/icon_unsubscribe.png"); }
/*.icon-pages					{ background-image: url("./styles/IM_blue/theme/images/icon_pages.gif"); } */
/*.icon-search					{ background-image: url("./styles/IM_blue/theme/images/icon_search.gif"); } */

/* Profile & navigation icons */
.email-icon, .email-icon a		 { background-image: url("./styles/IM_blue/imageset/icon_contact_email.gif"); }
.fb-icon, .fb-icon a			{ background-image: url(""); }
.ig-icon, .ig-icon a			{ background-image: url(""); }
.pt-icon, .pt-icon a			{ background-image: url(""); }
.twr-icon, .twr-icon a			{ background-image: url(""); }
.skp-icon, .skp-icon a			{ background-image: url(""); }
.tg-icon, .tg-icon a			{ background-image: url(""); }
.li-icon, .li-icon a			{ background-image: url(""); }
.tt-icon, .tt-icon a			{ background-image: url(""); }
.dc-icon, .dc-icon a			{ background-image: url(""); }
.aim-icon, .aim-icon a			 { background-image: url("./styles/IM_blue/imageset/icon_contact_aim.gif"); }
.yahoo-icon, .yahoo-icon a		 { background-image: url("./styles/IM_blue/imageset/icon_contact_yahoo.gif"); }
.web-icon, .web-icon a			 { background-image: url("./styles/IM_blue/imageset/icon_contact_www.gif"); }
.msnm-icon, .msnm-icon a			 { background-image: url("./styles/IM_blue/imageset/icon_contact_msnm.gif"); }
.icq-icon, .icq-icon a			 { background-image: url("./styles/IM_blue/imageset/icon_contact_icq.gif"); }
.jabber-icon, .jabber-icon a		 { background-image: url("./styles/IM_blue/imageset/icon_contact_jabber.gif"); }
.pm-icon, .pm-icon a				 { background-image: url(""); }
.quote-icon, .quote-icon a		 { background-image: url(""); }


/* Moderator icons */
.report-icon, .report-icon a		{ background-image: url("./styles/IM_blue/imageset/icon_post_report.gif"); }
.edit-icon, .edit-icon a			{ background-image: url(""); }
.delete-icon, .delete-icon a		{ background-image: url("./styles/IM_blue/imageset/icon_post_delete.gif"); }
.info-icon, .info-icon a			{ background-image: url("./styles/IM_blue/imageset/icon_post_info.gif"); }
.warn-icon, .warn-icon a			{ background-image: url(""); } /* Need updated warn icon */

/*  	
--------------------------------------------------------------
Colours and backgrounds for cp.css
-------------------------------------------------------------- */

/* Main CP box
----------------------------------------*/

#cp-main h3, #cp-main hr, #cp-menu hr {
	border-color: #E4E4E4;
}

#cp-main .panel li.row {
	border-bottom-color: #E4E4E4;
}

ul.cplist {
	border-top-color: #E4E4E4;
}

#cp-main .panel li.header dd, #cp-main .panel li.header dt {
	
}

#cp-main table.table1 thead th {
	border-bottom-color: #E4E4E4;
}

#cp-main .pm-message {
	border-color: #E4E4E4;
	background-color: #FFFFFF;
}

/* CP tabbed menu
----------------------------------------*/
#tabs a {
	
}

#tabs a span {
	
}

#tabs a:hover span {
	
}

#tabs .activetab a {
	
}

#tabs .activetab a span {
	color: #333333;
}

#tabs .activetab a:hover span {
	color: #000000;
}

/* Mini tabbed menu used in MCP
----------------------------------------*/
#minitabs li {
	background-color: #E1EBF2;
}

#minitabs li.activetab {
	background-color: #F9F9F9;
}

#minitabs li.activetab a, #minitabs li.activetab a:hover {
	color: #333333;
}

/* UCP navigation menu
----------------------------------------*/

/* Link styles for the sub-section links */
#navigation a {
	color: #fff;
	background-color: #43A6DF;
}

.rtl #navigation a {
}

#navigation a:hover {
	background-image: none;
	background-color: #2E3539;
	color: #fff;
}

#navigation #active-subsection a {
	color: #fff;
	background-color: #2E3539;
	background-image: none;
}

#navigation #active-subsection a:hover {
	color: #fff;
}

/* Preferences pane layout
----------------------------------------*/
#cp-main h2 {
	
}

#cp-main .panel {
	
}

#cp-main .pm {
	background-color: #FFFFFF;
}

#cp-main span.corners-top, #cp-menu span.corners-top {
	background-image: url("./styles/IM_blue/theme/images/corners_left2.gif");
}

#cp-main span.corners-top span, #cp-menu span.corners-top span {
	background-image: url("./styles/IM_blue/theme/images/corners_right2.gif");
}

#cp-main span.corners-bottom, #cp-menu span.corners-bottom {
	background-image: url("./styles/IM_blue/theme/images/corners_left2.gif");
}

#cp-main span.corners-bottom span, #cp-menu span.corners-bottom span {
	background-image: url("./styles/IM_blue/theme/images/corners_right2.gif");
}

/* Topicreview */
#cp-main .panel #topicreview span.corners-top, #cp-menu .panel #topicreview span.corners-top {
	background-image: url("./styles/IM_blue/theme/images/corners_left.gif");
}

#cp-main .panel #topicreview span.corners-top span, #cp-menu .panel #topicreview span.corners-top span {
	background-image: url("./styles/IM_blue/theme/images/corners_right.gif");
}

#cp-main .panel #topicreview span.corners-bottom, #cp-menu .panel #topicreview span.corners-bottom {
	background-image: url("./styles/IM_blue/theme/images/corners_left.gif");
}

#cp-main .panel #topicreview span.corners-bottom span, #cp-menu .panel #topicreview span.corners-bottom span {
	background-image: url("./styles/IM_blue/theme/images/corners_right.gif");
}

/* Friends list */
.cp-mini {
	background-color: #eef5f9;
}

dl.mini dt {
	color: #425067;
}

/* PM Styles
----------------------------------------*/
/* PM Message history */
.current {
	color: #000000 !important;
}

/* PM marking colours */
.pmlist li.pm_message_reported_colour, .pm_message_reported_colour {
	border-left-color: #BC2A4D;
	border-right-color: #BC2A4D;
}

.pmlist li.pm_marked_colour, .pm_marked_colour {
	border-color: #FF6600;
}

.pmlist li.pm_replied_colour, .pm_replied_colour {
	border-color: #A9B8C2;
}

.pmlist li.pm_friend_colour, .pm_friend_colour {
	border-color: #5D8FBD;
}

.pmlist li.pm_foe_colour, .pm_foe_colour {
	border-color: #000000;
}

/* Avatar gallery */
#gallery label {
	background-color: #FFFFFF;
	border-color: #CCC;
}

#gallery label:hover {
	background-color: #EEE;
}

/*  	
--------------------------------------------------------------
Colours and backgrounds for forms.css
-------------------------------------------------------------- */

/* General form styles
----------------------------------------*/
select {
	border-color: #DCDCDC;
	background-color: #FFFFFF;
	color: #000;
}

label {
	
}

option.disabled-option {
	color: graytext;
}

/* Definition list layout for forms
---------------------------------------- */
dd label {
	color: #333;
}

/* Hover effects */
fieldset dl:hover dt label {
	color: #000000;
}

fieldset.fields2 dl:hover dt label {
	color: inherit;
}

/* Quick-login on index page */
fieldset.quick-login input.inputbox {
	background-color: #F2F3F3;
}

/* Posting page styles
----------------------------------------*/

#message-box textarea {
	color: #333333;
}

#message h2, #confirm h2 {
	border-bottom-color: #E4E4E4;
}

/* Input field styles
---------------------------------------- */
.inputbox {
	background-color: #F7F7F7; 
	border-color: #E4E4E4;
	color: #333333;
	padding: 6px;
}

.inputbox:hover {
	border-color: #43A6DF;
}

.inputbox:focus {
	border-color: #43A6DF;
	background-color: #F7F7F7;
}

/* Form button styles
---------------------------------------- */

a.button1, input.button1, input.button3, a.button2, input.button2 {
	color: #FFFFFF;
	background-color: #43A6DF;
}

a.button1, input.button1 {
	border-color: #666666;
}

input.button3 {
	background-image: none;
}

/* Alternative button */
a.button2, input.button2, input.button3 {
	
}

/* <a> button in the style of the form buttons */
a.button1, a.button1:link, a.button1:visited, a.button1:active, a.button2, a.button2:link, a.button2:visited, a.button2:active {
	color: #FFFFFF;
}

/* Hover states */
a.button1:hover, input.button1:hover, a.button2:hover, input.button2:hover, input.button3:hover {
	
	color: #FFFFFF;
}

input.search {
	
}

input.disabled {
	color: #666666;
}

.lightstyle { display:none !important; }
.darkstyle { display:block; }

/* nav menu */
.menu {
	background: #2E3539;
}

.menu a {
	color: #FFFFFF;
}

.menu li a:hover {
	color: #43A6DF;
	background: #494C4D;
}

.menu label:before {
	color: #FFFFFF;
}

.menu ul.sub-menus{
	background: #6EB9F7;
}

.menu ul.sub-menus a {
	color: #444444;
}

.menu ul.sub-menus a:hover{
	background: #5A5A5A;
	color: #FFFFFF;
}
@media screen and (max-width: 800px){
	.menu ul {background:#7B7B7B;}
	.menu input:checked + label {color:#FFFFFF}
}

.activetab a {
	color: #2598DA !important;
	background: #494C4D;	
}

.uname {
	color: #DA2E2B !important;
}
	
.badge {
	background-color: #06B0F3;
	color: #ffffff;	
}

.rb { 
    border-color:#DCE0D8;
    background:#F5F1EE;
}


/* nav menu */
.menu  {
	background: #2E3539;
}


.menu a  {
	color: #FFFFFF;
}


.menu a.dropdown-arrow:after  {
	content: "\25BF";
}


.menu li a:hover  {
	color: #43A6DF;
	background: #494C4D;
}


.menu label:before  {
	color: #FFFFFF;
	content: "\2261"; 
}


.menu ul.sub-menus {
	background: #E9E9EF;
}


.menu ul.sub-menus a  {
	color: #444444;
}


.menu ul.sub-menus a:hover {
	background: #5A5A5A;
	color: #FFFFFF;
}

@media screen and (max-width: 800px) {
	.menu ul  {background:#E9E9EF;}
	.menu a, .menu input:checked + label  {color:#444444}
	.menu input:checked + label:before  {content:"\00d7"}
}
.lightstyle { display:none; }
.darkstyle { display:block !important; }

/* nav menu */
.menue {
	background: #2E3539;
	height: 45px;
	padding-left: 18px;
	border-radius: 1px;
}
.menue ul, .menue li {
	margin: 0 auto;
	padding: 0;
	list-style: none
}
.menue ul {
	width: 100%;
	text-align: left;
}
.menue li {
	display: inline-block;
	position: relative;
}
.menue a {
	display: block;
	line-height: 45px;
	padding: 0 14px;
	text-decoration: none;
	color: #FFFFFF;
	font-size: 16px;
}
.menue a.dropdown-arrow:after {
	content: "\25BF";
	margin-left: 5px;
}
.menue li a:hover {
	color: #43A6DF;
	background: #494C4D;
}
.menue input {
	display: none;
	margin: 0;
	padding: 0;
	height: 45px;
	width: 100%;
	opacity: 0;
	cursor: pointer
}
.menue label {
	display: none;
	line-height: 45px;
	text-align: center;
	position: absolute;
	left: 35px
}
.menue label:before {
	font-size: 1.6em;
	color: #FFFFFF;
	content: "\2261"; 
	margin-left: 20px;
}
.menue ul.sub-menus{
	height: auto;
	overflow: hidden;
	width: 200px;
	background: #E9E9EF;
	position: absolute;
	z-index: 99;
	display: none;
}
.menue ul.sub-menus li {
	display: block;
	text-align: left;
	width: 100%;
}
.menue ul.sub-menus a {
	color: #444444;
	font-size: 16px;
}
.menue li:hover ul.sub-menus {
	display: block
}
.menue ul.sub-menus a:hover{
	background: #5A5A5A;
	color: #FFFFFF;
}
div.buttons, div.buttons div.locked-icon, div.buttons div.post-icon, div.buttons div.reply-icon, div.buttons div.upload-icon, div.buttons div.qreply-icon, .postbody ul.profile-icons li.edit-icon, .postbody ul.profile-icons li.quote-icon, ul.profile-icons li.pm-icon {
	background : none 0 0 no-repeat transparent;
	padding : 0;
	margin : 0;
	height : 0;
}

.reply-icon span, .upload-icon, .post-icon span, .locked-icon span, .pmreply-icon span, .newpm-icon span, .forwardpm-icon span, .qreply-icon .edit-icon, .quote-icon, .pm-icon {
	background : none 0 0 no-repeat transparent;
}

div.buttons {
	float : left;
	width : auto;
	height : auto;
}

div.buttons div.locked-icon a, div.buttons div.post-icon a, div.buttons div.reply-icon a, div.buttons div.upload-icon a, div.buttons div.qreply-icon a, .postbody ul.profile-icons li.edit-icon a, .postbody ul.profile-icons li.quote-icon a, div.buttons div.pmreply-icon a, div.buttons div.newpm-icon a, div.buttons div.forwardpm-icon a {
	color : #BC2A4D;
	text-decoration : none;
	display : inline-block;
}

div.buttons div.locked-icon, div.buttons div.post-icon, div.buttons div.reply-icon, div.buttons div.upload-icon, div.buttons div.qreply-icon, div.buttons div.pmreply-icon, div.buttons div.newpm-icon, div.buttons div.forwardpm-icon {
	border : #C4C1BD solid 1px;
	border-radius : 4px;
	font-size : 12px;
	font-family : helvetica, sans-serif;
	margin : 0 4px;
	padding : 0 8px 0 8px;
	text-transform : uppercase;
	text-decoration : none;
	display : inline-block;
	font-weight : 600;
	line-height : 2.2em;
	width : auto;
	height : 25px;
	white-space : nowrap;
	background-color : #FBFBFB;
	background-image : linear-gradient(to bottom, #FBFBFB, #E6E6E6);
}

div.buttons div.locked-icon:hover, div.buttons div.post-icon:hover, div.buttons div.reply-icon:hover, div.buttons div.upload-icon:hover, div.buttons div.qreply-icon:hover, div.buttons div.pmreply-icon:hover, div.buttons div.newpm-icon:hover, div.buttons div.forwardpm-icon:hover {
	border : #4386CC solid 1px;
	background-color : #E6E6E6;
	text-decoration : none;
	background-image : linear-gradient(to bottom, #E6E6E6, #FBFBFB);
}
@media screen and (max-width: 800px){
	.menue {position:relative}
	.menue ul {background:#E9E9EF;position:absolute;top:100%;right:0;left:0;z-index:3;height:auto;display:none;text-align:left;}
	.menue ul.sub-menus {width:100%;position:static;}
	.menue ul.sub-menus a {padding-left:30px;}
	.menue li {display:block;float:none;width:auto;}
	.menue input, .menue label {position:absolute;top:0;left:0;display:block}
	.menue input {z-index:4}
	.menue input:checked + label {color:#FFFFFF}
	.menue input:checked + label:before {content:"\00d7"}
	.menue input:checked ~ ul {display:block}
}

.activetab a {
	color: #2598DA !important;
	background: #494C4D;	
}

.uname {
	color: #DA2E2B !important;
}
	
.img-span {
    width: 100%;
    background-repeat: no-repeat;
    background-size: cover;
}

h6 {
	display : inline-block;
	font-size : 12px;
	font-family : helvetica, sans-serif;
	font-weight : 800;
}

h6, h6:hover {
	font-weight : 800;
}

.badge {
	background-color: #06B0F3;
	color: #ffffff;	
	border-radius: 10px;
	opacity: 0.8;
	text-align: center;
	white-space: nowrap;
	font-size: 10px;
	line-height: 1;
	display: inline-block;
	margin-left: 3px;
	vertical-align: 3px;
	position: relative;
	top: 3px;
	padding: 4px 6px;
}

.badge.hidden {
	display: none;
}





.rb { 
	font-size: 1.5em;
    border: 4px solid #DCE0D8;
    border-radius: 8px;
    background:#F5F1EE;
	padding:1em;
}

.column_resp p, .column_rev p, .column_home p {
	margin: 6px;
}

 /* For mobile phones: */

.row_resp, .row_rev, .row_home {
	display:flex;
	flex-wrap: wrap;
}

 [class*="column_"] {
    width: 100%;
 }


@media only screen and (min-width: 768px) {
	.column_resp, .column_home {
		width: 47%;
		margin: 2px;
	}

	.column_chat {
		width: 67%;
		margin: 2px;
	}

	.column_cal {
		width: 32%;
		margin: 2px;
	}	
	.column_rev {
		width: 23%;
		margin: .5em;
	}
}
/*  phpBB 3.0.11 Style Sheet
    --------------------------------------------------------------
	Style name: Metro Blue
	Copyright (C) 2013 PixelGoose Studio
    --------------------------------------------------------------
*/
@media only screen and (min-width: 1199px) {
    #subheader-menu li {
        background-image: none !important;
    }

}

@media only screen and (min-width: 960px) and (max-width: 1199px) {
    #wrap {
    	width: 940px;
    }
    #page-body-inner {
        width: 676px;
    }
    #subheader-menu li {
        background-image: none !important;
    }

}

@media only screen and (min-width: 768px) and (max-width: 959px) {
    #wrap {
    	width: 750px;
    }
    #page-body-inner {
        width: 486px;
    }
    .forabg ul.topiclist dd.topics,
    .forabg ul.topiclist dd.posts,
    .forumbg ul.topiclist dd.views {
        display: none;
    }
	.search-box-inner {
	    width: 200px;
	}
	.search-box #keywords {
	    width: 150px;
	}
    .search-adv-link {
    	display: none;
    }
	ul.topiclist dt {               
	    width: 60%;
	}
    .tabs li a {
        background-size: 100%;
    }
    #subheader-menu li {
        background-image: none !important;
    }
    .drafts dd.mark {
        display: none;
    }
    dd.mark {
        width: 5%;
    }
    ul.topiclist dt {
        overflow: hidden;
    }

}


@media only screen and (min-width: 480px) and (max-width: 767px) {
    html { 
        -webkit-text-size-adjust: 100%;
    }
    #wrap {
    	width: 95%;
    }
    #page-body-inner {
        width: 100% !important;
        float: none;
        margin-right: 0;
    }
    #sidebar {
        float: none;
        width: 100%;
        margin-bottom: 12px;
    }
    dd.topics, dd.posts,
    .forumbg ul.topiclist li.header dd.views,
    .forumbg ul.topiclist li.row dd.views {
    	display: none !important;
    }
    ul.topiclist dt {               
        width: 60%;
    }
    #above-headerbar {
        height: auto;
        overflow: hidden;
    }
    .user-links {
        float: none;
        overflow: hidden;
        margin-bottom: 12px;
        border-bottom: solid 1px #E4E4E4;
        text-align: center;
    }
    .user-links li {
        display: inline;
        vertical-align: top;
        zoom: 1; /* Fix for IE7 */
        *display: inline; /* Fix for IE7 */
        float: none;
    }
    .search-box {
        width: 100%;
    }
	.search-box-inner {
	    width: 100%;
        -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
                box-sizing: border-box;
        height: 32px;
	}
	.search-box #keywords {
	    width: 90%;
	}
    .search-adv-link {
    	display: none;
    }
    #page-body-inner {
    	width: 480px;
    }

    #header {
        height: 120px;
    }

    /* Subheader menu links */

    #subheader-menu li#submenu-mark-read {
        background-position: right center;
    }
    #subheader-menu li#submenu-unanswered {
        background-position: 0 center;
    }
    #subheader-menu li#submenu-unread {
        background-position: -28px center;
    }
    #subheader-menu li#submenu-search-new {
        background-position: -56px center;
    }
    #subheader-menu li#submenu-active-topics {
        background-position: -84px center;
    }
    #subheader-menu li a {
        display: block;
        width: 28px;
        height: 28px;
        text-indent: -9999px;
    }

    /* Tab menu */
    .tabs-outer {
        overflow: hidden;
    }
    .toggleMenuButton {
        display: block;
        width: 36px;
        height: 36px;

        position: absolute;
        right: 12px;
        bottom: 12px;
        border-radius: 2px;
        border: solid 1px #FFF;
    }
    .toggleMenuButton.active {
        background-color: #2E3539;
    }

    #subheader-menu {
        height: auto;
        overflow: hidden;
    }
    #container1, #container2, #container3,
    #col1, #col2 {
        float: none;
        position: inherit;
        margin: 0;
    }
    #col1, #col2 {
        padding: 24px 12px !important;
        overflow: hidden;
    }
    #col1 {
        border-bottom: solid 12px #F6F6F6;
    }
    #col2 {
        background-color: #43A6DF;
        width: auto;
    }
    .linklist {
        float: none;
        text-align: center;
    }
    ul.linklist li {
        float: none !important;
        display: inline;
    }
    #faqlinks .column1, #faqlinks .column2 {
        float: none;
        width: 100%;
    }
    #memberlist .posts, #memberlist .info {
        display: none;
    }
    #memberlist.table1 thead tr th.name,
    #memberlist th.name, .table-list th.name {
        padding: 14px 6px 14px 3px !important;
    }
    fieldset.jumpbox {
        text-align: right;
    }
    fieldset.quickmod {
        height: auto;
        margin-bottom: 12px;
        width: auto;
    }
    fieldset dt {
        width: auto;
    }
    fieldset dd {
        margin-left: 0;
    }
    dd label {
        white-space: normal;
    }
    .topic-actions .pagination {
        margin-bottom: 12px;
    }
    .postbody ul.profile-icons {
        overflow: hidden;
        float: none;
    }
    .postbody h3 {
        margin: 12px 0 !important;
    }
    .panel fieldset dt {
        float: none;
    }
    .panel fieldset.fields1 dd {
        margin-left: 0;
    }
    #message-box {
        width: 94%;
    }
    #message-box textarea {
        width: 94%;
    }
    .column1, .column2 {
        clear: none;
        float: none;
        width: 100%;
    }
    #smiley-box {
        float: none;
        width: 100%;
    }
    .editor-status {
        display: none;
    }
    a.button1, input.button1, input.button3, a.button2, input.button2 {
        margin-bottom: 6px;
    }
    #tabs {
        margin: 20px 0 -1px;
        min-width: inherit;
    }
    #tabs ul {
        margin: 0;
        padding: 0;
        text-align: center;
    }
    #tabs li {
        display: inline-block;
    }
    #tabs a span {
        padding: 6px 8px;
    }
    #cp-menu, #cp-main {
        float: none;
        width: 100%;
    }
    th.ip, td.ip, th.date, td.date {
        display: none;
    }
    td.username {
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }
    .panel .panel {
        padding: 0;
        border: none;
    }
    #minitabs li {
        display: inline-block;
        float: none;
        padding: 0 2px 4px;
    }
    #ucp .topiclist .header dd.mark {
        display: none;
    }
    dd.mark {
        width: 5%;
    }
    .drafts dd.mark {
        display: none;
    }
    ul.topiclist dt {
        overflow: hidden;
    }
    fieldset.fields2 dd {
        margin-left: 0 !important;
    }
    #cp-main h2 {
        margin-left: 0 !important;
    }
    dt.leader {
        padding: 14px 6px !important;
    }
    .info.leader {
        display: none;
    }
    .login-window {
        display: none;
    }
    .login-link {
        display: inline;
    }
}


@media only screen and (max-width: 479px) {
    html { 
        -webkit-text-size-adjust: 100%;
    }
    #wrap {
        width: 95%;
    }
    #page-body-inner {
        width: 100% !important;
        float: none;
        margin-right: 0;
    }
    h2 {
        font-size: 1.538em;
    }
    #sidebar {
        float: none;
        width: 100%;
        margin-bottom: 12px;
    }
    .topiclist .header dt {
        padding: 14px 6px !important;
        width: 100%;
        -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
                box-sizing: border-box;
    }
    .topiclist .header dt a {
        padding-left: 0;
    }
    li.header dd.topics,
    li.header dd.posts,
    li.header dd.lastpost,
    li.header dd.views,
    li.row dd.posts,
    li.row dd.lastpost,
    li.row dd.views {
        display: none;
    }
    ul.topiclist dt {               
        width: 65%;
    }
    .forumbg ul.topiclist li.row dt {
        width: 80%;
    }
    li.header dl.icon {
        min-height: 48px;
    }
    .row .pagination {
        float: none;
        width: auto;
        text-align: left;
        margin: 6px 0px;
    }
    dl.icon dt {
        background-position: 5px 20px;
    }
    #above-headerbar {
        height: auto;
        overflow: hidden;
    }
    .user-links {
        float: none;
        overflow: hidden;
        margin-bottom: 12px;
        border-bottom: solid 1px #E4E4E4;
        text-align: center;
    }
    .user-links li {
        display: inline;
        vertical-align: top;
        zoom: 1; /* Fix for IE7 */
        *display: inline; /* Fix for IE7 */
        float: none;
        white-space: nowrap;
    }
    .search-box {
        width: 100%;
    }
    .search-box-inner {
        width: 100%;
        -webkit-box-sizing: border-box;
           -moz-box-sizing: border-box;
                box-sizing: border-box;
        height: 32px;
    }
    .search-box #keywords {
        width: 85%;
    }
    .search-adv-link {
        display: none;
    }
    #page-body-inner {
        width: 480px;
    }

    #header {
        height: 120px;
    }


    /* Subheader menu links */

    #subheader-menu li#submenu-mark-read {
        background-position: right center;
    }
    #subheader-menu li#submenu-unanswered {
        background-position: 0 center;
    }
    #subheader-menu li#submenu-unread {
        background-position: -28px center;
    }
    #subheader-menu li#submenu-search-new {
        background-position: -56px center;
    }
    #subheader-menu li#submenu-active-topics {
        background-position: -84px center;
    }
    #subheader-menu li a {
        display: block;
        width: 28px;
        height: 28px;
        text-indent: -9999px;
    }


    /* Tab menu */
    .tabs-outer {
        overflow: hidden;
    }
    .toggleMenuButton {
        display: block;
        width: 36px;
        height: 36px;

        position: absolute;
        right: 12px;
        bottom: 12px;
        border-radius: 2px;
        border: solid 1px #FFF;
    }
    .toggleMenuButton.active {
        background-color: #2E3539;
    }

    #subheader-menu {
        height: auto;
        overflow: hidden;
    }
    #container1, #container2, #container3,
    #col1, #col2 {
        float: none;
        position: inherit;
        margin: 0;
    }
    #col1, #col2 {
        padding: 24px 12px !important;
        overflow: hidden;
    }
    #col1 {
        border-bottom: solid 12px #F6F6F6;
    }
    #col2 {
        background-color: #43A6DF;
        width: auto;
    }
    .linklist {
        float: none;
        text-align: center;
    }
    .linklist a {
        white-space: nowrap;
    }
    ul.linklist li {
        float: none !important;
        display: inline;
    }
    #faqlinks .column1, #faqlinks .column2 {
        float: none;
        width: 100%;
    }
    #memberlist .posts, #memberlist .info {
        display: none;
    }
    #memberlist.table1 thead tr th.name,
    #memberlist th.name, .table-list th.name {
        padding: 14px 6px 14px 3px !important;
    }
    fieldset.jumpbox {
        text-align: left;
    }
    .jumpbox label, .quickmod label {
        display: block;
    }
    fieldset.quickmod {
        height: auto;
        width: 100%;
        text-align: left;
        margin-bottom: 12px;
    }
    fieldset dt {
        width: auto;
    }
    fieldset dd {
        margin-left: 0;
    }
    dd label {
        white-space: normal;
    }
    .rules {
        background-image: none !important;
        padding: 12px !important;
    }
    .display-options label {
        margin-bottom: 12px;
        display: block;
    }
    #jumpbox {
        clear: both;
        width: 100%;
        margin: 6px 0;
    }
    .topic-actions .buttons {
        margin-bottom: 12px;
    }
    .topic-actions .pagination {
        margin-bottom: 12px;
    }
    .postbody ul.profile-icons {
        overflow: hidden;
        float: none;
    }
    .postbody h3 {
        margin: 12px 0 !important;
    }
    p.author {
        margin: 0 0 0.6em;
    }
    .postprofile dd {
        display: none;
    }
    .section-viewtopic form#viewtopic {
        display: none;
    }
    fieldset dt {
        display: block;
        float: none;
        width: auto !important;
    }
    fieldset.fields2 dd {
        margin-left: 0;
    }
    .autowidth {
        width: 94% !important;
    }
    textarea#message {
        height: 150px;
    }
    fieldset.polls dt {
        width: 30% !important;
    }
    .panel fieldset dt {
        float: none;
    }
    .panel fieldset.fields1 dd {
        margin-left: 0;
    }
    #message-box {
        width: 94%;
    }
    #message-box textarea {
        width: 94%;
    }
    dl.details dt {
        clear: left;
        float: none;
        text-align: left;
        width: auto;
    }
    dl.details dd {
        float: left;
        margin-bottom: 12px;
        margin-left: 0;
        padding-left: 0;
        width: 100%;
    }

    .column1, .column2 {
        clear: none;
        float: none;
        width: 100%;
    }

    #smiley-box {
        float: none;
        width: 100%;
    }
    .editor-status {
        display: none;
    }
    a.button1, input.button1, input.button3, a.button2, input.button2 {
        margin-bottom: 6px;
    }
    #tabs {
        margin: 20px 0 -1px;
        min-width: inherit;
    }
    #tabs ul {
        margin: 0;
        padding: 0;
        text-align: center;
    }
    #tabs li {
        display: inline-block;
    }
    #tabs a span {
        padding: 6px 8px;
    }
    #cp-menu, #cp-main {
        float: none;
        width: 100%;
    }
    th.ip, td.ip, th.date, td.date {
        display: none;
    }
    td.username {
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
    }
    .panel .panel {
        padding: 0;
        border: none;
    }
    #minitabs li {
        display: inline-block;
        float: none;
        padding: 0 2px 4px;
    }
    #ucp .topiclist .header dd.mark,
    #cp-main .topiclist .header dd.mark {
        display: none;
    }
    .drafts dd.mark {
        display: none;
    }
    .drafts dd.info,
    .drafts + .cplist > li > dl > dd.info,
    .pmlist dd.info {
        display: none;
    }
    ul.topiclist dt {
        overflow: hidden;
    }
    .attachments .time, .attachments + .cplist .time,
    .attachments .extra, .attachments + .cplist .extra {
        display: none;
    }
    .topiclist.attachments-list li.row dl dt {
        width: 85% !important;
    }
    #dateoptions {
        width: 100%;
    }
    dl.pmlist dt {
        width: 100% !important;
    }
    dl.pmlist dt textarea {
        width: 94%;
    }
    dl.pmlist dd {
        margin-left: 0 !important;
    }
    #search_memberlist .panel {
        padding: 0 !important;
        border: none;
    }
    .ucp-main dd select {
        width: 100%;
    }
    #cp-main h2 {
        margin-left: 0 !important;
    }
    dt.leader {
        padding: 14px 6px !important;
    }
    .info.leader {
        display: none;
    }
    .topiclist.leader li dl dt {
        width: 100%;
    }
    .topiclist.leader li dl dd.option {
        font-size: 1em;
        margin-right: 6px;
        padding: 4px 5px !important;
        text-align: left;
        width: auto;
    }
    .cp-mini.friends {
        margin: 0;
        padding: 12px 6px;
    }
    .display-actions {
        white-space: normal !important;
        text-align: center;
    }
    .display-actions select {
        width: 100% !important;
        margin-bottom: 6px;
    }
    .mcp-main .header dd.moderation {
        display: none;
    }
    .captcha {
        width: 100%;
    }
    .login-window {
        display: none;
    }
    .login-link {
        display: inline;
    }
}
/* ===== Base Overlay Styles ===== */
.cookie-consent-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; /* Full-screen background */
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 10000;
  text-align: center;
  animation: fadeIn 0.3s ease-in-out;
}

/* ===== Modal Content Box ===== */
.cookie-consent-content {
  display: inline-block;
  background-color: #ffffff;
  padding: 20px;
  margin: 0 auto;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  max-width: 600px;
  width: 90%;
  text-align: left;
}

/* ===== Positioning Variants ===== */

/* Top */
.cookie-consent-modal.cookie-consent-top .cookie-consent-content {
  margin-top: 30px;
}

/* Center */
.cookie-consent-modal.cookie-consent-center .cookie-consent-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Bottom */
.cookie-consent-modal.cookie-consent-bottom .cookie-consent-content {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
}

/* ===== Modal Section Styling ===== */

.cookie-consent-header {
  margin-bottom: 15px;
}

.cookie-consent-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: bold;
  color: #333333;
}

.cookie-consent-body {
  margin-bottom: 20px;
}

.cookie-consent-body p {
  margin: 0;
  font-size: 14px;
  line-height: 1.4;
  color: #666666;
}

.cookie-consent-footer {
  text-align: right;
}

.cookie-consent-footer button {
  padding: 8px 16px;
  margin-left: 10px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  font-weight: bold;
  text-transform: uppercase;
  transition: background-color 0.3s ease;
}

.cookie-accept-btn {
  background-color: #4CAF50;
  color: white;
}

.cookie-accept-btn:hover {
  background-color: #45a049;
}

.cookie-decline-btn {
  background-color: #f44336;
  color: white;
}

.cookie-decline-btn:hover {
  background-color: #da190b;
}

/* ===== Responsive Adjustments ===== */

@media (max-width: 768px) {
  .cookie-consent-content {
    margin: 10px;
    padding: 15px;
  }

  .cookie-consent-header h3 {
    font-size: 16px;
  }

  .cookie-consent-body p {
    font-size: 13px;
  }

  .cookie-consent-footer {
    text-align: center;
  }

  .cookie-consent-footer button {
    display: block;
    width: 100%;
    margin: 5px 0;
    padding: 10px;
  }
}

/* ===== Fade-In Animation ===== */

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@charset "UTF-8";

/*--------------------------------------------------------------
# Font & Color Variables
# Help: https://bootstrapmade.com/color-system/
--------------------------------------------------------------*/
/* Fonts */
:root {
  --default-font: "Roboto",  system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --heading-font: "Raleway",  sans-serif;
  --nav-font: "Poppins",  sans-serif;
}

/* Global Colors - The following color variables are used throughout the website. Updating them here will change the color scheme of the entire website */
:root { 
  --background-color: #ffffff; /* Background color for the entire website, including individual sections */
  --default-color: #342c26; /* Default color used for the majority of the text content across the entire website */
  --heading-color: #2c1607; /* Color for headings, subheadings and title throughout the website */
  --accent-color: #e96308; /* Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */
  --surface-color: #ffffff; /* The surface color is used as a background of boxed elements within sections, such as cards, icon boxes, or other elements that require a visual separation from the global background. */
  --contrast-color: #ffffff; /* Contrast color for text, ensuring readability against backgrounds of accent, heading, or default colors. */
}

/* Nav Menu Colors - The following color variables are used specifically for the navigation menu. They are separate from the global colors to allow for more customization options */
:root {
  --nav-color: #ffffff;  /* The default color of the main navmenu links */
  --nav-hover-color: #e96308; /* Applied to main navmenu links when they are hovered over or active */
  --nav-mobile-background-color: #ffffff; /* Used as the background color for mobile navigation menu */
  --nav-dropdown-background-color: #ffffff; /* Used as the background color for dropdown items that appear when hovering over primary navigation items */
  --nav-dropdown-color: #342c26; /* Used for navigation links of the dropdown items in the navigation menu. */
  --nav-dropdown-hover-color: #e96308; /* Similar to --nav-hover-color, this color is applied to dropdown navigation links when they are hovered over. */
}

/* Color Presets - These classes override global colors when applied to any section or element, providing reuse of the sam color scheme. */

.light-background {
  --background-color: #f9f7f6;
  --surface-color: #ffffff;
}

.dark-background {
  --background-color: #060606;
  --default-color: #ffffff;
  --heading-color: #ffffff;
  --surface-color: #252525;
  --contrast-color: #ffffff;
}

/* Smooth scroll */
:root {
  scroll-behavior: smooth;
}

/*--------------------------------------------------------------
# General Styling & Shared Classes
--------------------------------------------------------------*/
body {
  color: var(--default-color);
  background-color: var(--background-color);
  font-family: var(--default-font);
}

a {
  color: var(--accent-color);
  text-decoration: none;
  transition: 0.3s;
}

a:hover {
  color: color-mix(in srgb, var(--accent-color), transparent 25%);
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--heading-color);
  font-family: var(--heading-font);
}

/* PHP Email Form Messages
------------------------------*/
.php-email-form .error-message {
  display: none;
  background: #df1529;
  color: #ffffff;
  text-align: left;
  padding: 15px;
  margin-bottom: 24px;
  font-weight: 600;
}

.php-email-form .sent-message {
  display: none;
  color: #ffffff;
  background: #059652;
  text-align: center;
  padding: 15px;
  margin-bottom: 24px;
  font-weight: 600;
}

.php-email-form .loading {
  display: none;
  background: var(--surface-color);
  text-align: center;
  padding: 15px;
  margin-bottom: 24px;
}

.php-email-form .loading:before {
  content: "";
  display: inline-block;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  margin: 0 10px -6px 0;
  border: 3px solid var(--accent-color);
  border-top-color: var(--surface-color);
  animation: php-email-form-loading 1s linear infinite;
}

@keyframes php-email-form-loading {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/*--------------------------------------------------------------
# Global Header
--------------------------------------------------------------*/
.header {
  --background-color: rgba(255, 255, 255, 0);
  --default-color: #ffffff;
  --heading-color: #ffffff;
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 15px 0;
  transition: all 0.5s;
  z-index: 997;
}

.header .logo {
  line-height: 1;
}

.header .logo img {
  max-height: 36px;
  margin-right: 8px;
}

.header .logo h1 {
  font-size: 30px;
  margin: 0;
  font-weight: 700;
  color: var(--heading-color);
}

.header .btn-getstarted,
.header .btn-getstarted:focus {
  color: var(--contrast-color);
  background: var(--accent-color);
  font-size: 14px;
  padding: 8px 25px;
  margin: 0 0 0 30px;
  border-radius: 4px;
  transition: 0.3s;
}

.header .btn-getstarted:hover,
.header .btn-getstarted:focus:hover {
  color: var(--contrast-color);
  background: color-mix(in srgb, var(--accent-color), transparent 15%);
}

@media (max-width: 1200px) {
  .header .logo {
    order: 1;
  }

  .header .btn-getstarted {
    order: 2;
    margin: 0 15px 0 0;
    padding: 6px 15px;
  }

  .header .navmenu {
    order: 3;
  }
}

.scrolled .header {
  box-shadow: 0px 0 18px rgba(0, 0, 0, 0.1);
}

/* Global Header on Scroll
------------------------------*/
.scrolled .header {
  --background-color: rgba(22, 15, 9, 0.915);
}

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/* Navmenu - Desktop */
@media (min-width: 1200px) {
  .navmenu {
    padding: 0;
  }

  .navmenu ul {
    margin: 0;
    padding: 0;
    display: flex;
    list-style: none;
    align-items: center;
  }

  .navmenu li {
    position: relative;
  }

  .navmenu a,
  .navmenu a:focus {
    color: var(--nav-color);
    padding: 18px 15px;
    font-size: 16px;
    font-family: var(--nav-font);
    font-weight: 400;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    transition: 0.3s;
  }

  .navmenu a i,
  .navmenu a:focus i {
    font-size: 12px;
    line-height: 0;
    margin-left: 5px;
    transition: 0.3s;
  }

  .navmenu li:last-child a {
    padding-right: 0;
  }

  .navmenu li:hover>a,
  .navmenu .active,
  .navmenu .active:focus {
    color: var(--nav-hover-color);
  }

  .navmenu .dropdown ul {
    margin: 0;
    padding: 10px 0;
    background: var(--nav-dropdown-background-color);
    display: block;
    position: absolute;
    visibility: hidden;
    left: 14px;
    top: 130%;
    opacity: 0;
    transition: 0.3s;
    border-radius: 4px;
    z-index: 99;
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
  }

  .navmenu .dropdown ul li {
    min-width: 200px;
  }

  .navmenu .dropdown ul a {
    padding: 10px 20px;
    font-size: 15px;
    text-transform: none;
    color: var(--nav-dropdown-color);
  }

  .navmenu .dropdown ul a i {
    font-size: 12px;
  }

  .navmenu .dropdown ul a:hover,
  .navmenu .dropdown ul .active:hover,
  .navmenu .dropdown ul li:hover>a {
    color: var(--nav-dropdown-hover-color);
  }

  .navmenu .dropdown:hover>ul {
    opacity: 1;
    top: 100%;
    visibility: visible;
  }

  .navmenu .dropdown .dropdown ul {
    top: 0;
    left: -90%;
    visibility: hidden;
  }

  .navmenu .dropdown .dropdown:hover>ul {
    opacity: 1;
    top: 0;
    left: -100%;
    visibility: visible;
  }
}

/* Navmenu - Mobile */
@media (max-width: 1199px) {
  .mobile-nav-toggle {
    color: var(--nav-color);
    font-size: 28px;
    line-height: 0;
    margin-right: 10px;
    cursor: pointer;
    transition: color 0.3s;
  }

  .navmenu {
    padding: 0;
    z-index: 9997;
  }

  .navmenu ul {
    display: none;
    list-style: none;
    position: absolute;
    inset: 60px 20px 20px 20px;
    padding: 10px 0;
    margin: 0;
    border-radius: 6px;
    background-color: var(--nav-mobile-background-color);
    overflow-y: auto;
    transition: 0.3s;
    z-index: 9998;
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
  }

  .navmenu a,
  .navmenu a:focus {
    color: var(--nav-dropdown-color);
    padding: 10px 20px;
    font-family: var(--nav-font);
    font-size: 17px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    transition: 0.3s;
  }

  .navmenu a i,
  .navmenu a:focus i {
    font-size: 12px;
    line-height: 0;
    margin-left: 5px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: 0.3s;
    background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
  }

  .navmenu a i:hover,
  .navmenu a:focus i:hover {
    background-color: var(--accent-color);
    color: var(--contrast-color);
  }

  .navmenu a:hover,
  .navmenu .active,
  .navmenu .active:focus {
    color: var(--nav-dropdown-hover-color);
  }

  .navmenu .active i,
  .navmenu .active:focus i {
    background-color: var(--accent-color);
    color: var(--contrast-color);
    transform: rotate(180deg);
  }

  .navmenu .dropdown ul {
    position: static;
    display: none;
    z-index: 99;
    padding: 10px 0;
    margin: 10px 20px;
    background-color: var(--nav-dropdown-background-color);
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
    box-shadow: none;
    transition: all 0.5s ease-in-out;
  }

  .navmenu .dropdown ul ul {
    background-color: rgba(33, 37, 41, 0.1);
  }

  .navmenu .dropdown>.dropdown-active {
    display: block;
    background-color: rgba(33, 37, 41, 0.03);
  }

  .mobile-nav-active {
    overflow: hidden;
  }

  .mobile-nav-active .mobile-nav-toggle {
    color: #fff;
    position: absolute;
    font-size: 32px;
    top: 15px;
    right: 15px;
    margin-right: 0;
    z-index: 9999;
  }

  .mobile-nav-active .navmenu {
    position: fixed;
    overflow: hidden;
    inset: 0;
    background: rgba(33, 37, 41, 0.8);
    transition: 0.3s;
  }

  .mobile-nav-active .navmenu>ul {
    display: block;
  }
}

/*--------------------------------------------------------------
# Global Footer
--------------------------------------------------------------*/
.footer {
  color: var(--default-color);
  background: var(--background-color);
  font-size: 15px;
  padding: 80px 0 0;
  position: relative;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.footer .footer-brand h1,
.footer .footer-brand .logo {
  margin: 0;
  line-height: 1;
  font-weight: 300;
}

.footer .footer-brand h1 .sitename,
.footer .footer-brand .logo .sitename {
  font-family: var(--heading-font);
  font-size: 26px;
  letter-spacing: 0.8px;
  color: var(--heading-color);
}

.footer .footer-brand .tagline {
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  font-size: 16px;
  line-height: 1.7;
  font-weight: 300;
  margin: 12px 0 0;
}

.footer .social-links {
  display: flex;
  gap: 15px;
  margin-top: 20px;
}

.footer .social-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background-color: transparent;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  transition: all 0.3s ease;
  text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 80%);
}

.footer .social-links a:hover {
  background-color: var(--accent-color);
  color: var(--contrast-color);
  transform: translateY(-3px);
  border-color: var(--accent-color);
}

.footer .social-links a i {
  font-size: 16px;
}

.footer .footer-links-grid h5 {
  color: var(--heading-color);
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 20px;
  font-family: var(--heading-font);
  letter-spacing: 0.5px;
}

.footer .footer-links-grid ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer .footer-links-grid ul li {
  margin-bottom: 12px;
}

.footer .footer-links-grid ul li a {
  color: color-mix(in srgb, var(--default-color), transparent 25%);
  text-decoration: none;
  font-size: 15px;
  font-weight: 300;
  transition: all 0.3s ease;
  position: relative;
  padding-left: 10px;
}

.footer .footer-links-grid ul li a::before {
  content: "→";
  position: absolute;
  left: 0;
  opacity: 0;
  transition: all 0.3s ease;
  color: var(--accent-color);
}

.footer .footer-links-grid ul li a:hover {
  color: var(--accent-color);
  padding-left: 16px;
}

.footer .footer-links-grid ul li a:hover::before {
  opacity: 1;
}

.footer .footer-cta h5 {
  color: var(--heading-color);
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 18px;
  font-family: var(--heading-font);
}

.footer .footer-cta .btn-outline {
  background: transparent;
  color: var(--heading-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 70%);
  padding: 10px 24px;
  font-size: 14px;
  font-weight: 500;
  border-radius: 4px;
  transition: all 0.3s ease;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.footer .footer-cta .btn-outline:hover {
  background: var(--accent-color);
  color: var(--contrast-color);
  border-color: var(--accent-color);
  transform: translateY(-2px);
}

.footer .footer-bottom {
  margin-top: 60px;
  padding: 25px 0;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.footer .footer-bottom .footer-bottom-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

@media (max-width: 768px) {
  .footer .footer-bottom .footer-bottom-content {
    flex-direction: column;
    gap: 15px;
    text-align: center;
  }
}

.footer .footer-bottom .footer-bottom-content p {
  margin: 0;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  font-size: 14px;
  font-weight: 300;
}

.footer .footer-bottom .footer-bottom-content p .sitename {
  color: var(--heading-color);
  font-weight: 500;
}

.footer .footer-bottom .footer-bottom-content .credits {
  font-size: 13px;
  color: color-mix(in srgb, var(--default-color), transparent 50%);
}

.footer .footer-bottom .footer-bottom-content .credits a {
  color: var(--accent-color);
  text-decoration: none;
  font-weight: 400;
}

.footer .footer-bottom .footer-bottom-content .credits a:hover {
  text-decoration: underline;
}

@media (max-width: 991px) {
  .footer .footer-links-grid {
    margin-bottom: 30px;
  }

  .footer .footer-cta {
    text-align: center;
  }
}

@media (max-width: 768px) {
  .footer {
    padding: 60px 0 0;
  }

  .footer .row {
    text-align: center;
  }

  .footer .footer-brand,
  .footer .footer-links-grid,
  .footer .footer-cta {
    margin-bottom: 40px;
  }

  .footer .footer-links-grid .col-6 {
    margin-bottom: 30px;
  }

  .footer .footer-links-grid h5 {
    text-align: left;
  }

  .footer .footer-links-grid ul {
    text-align: left;
    display: inline-block;
  }
}

/*--------------------------------------------------------------
# Preloader
--------------------------------------------------------------*/
#preloader {
  position: fixed;
  inset: 0;
  z-index: 999999;
  overflow: hidden;
  background: var(--background-color);
  transition: all 0.6s ease-out;
}

#preloader:before {
  content: "";
  position: fixed;
  top: calc(50% - 30px);
  left: calc(50% - 30px);
  border: 6px solid #ffffff;
  border-color: var(--accent-color) transparent var(--accent-color) transparent;
  border-radius: 50%;
  width: 60px;
  height: 60px;
  animation: animate-preloader 1.5s linear infinite;
}

@keyframes animate-preloader {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/*--------------------------------------------------------------
# Scroll Top Button
--------------------------------------------------------------*/
.scroll-top {
  position: fixed;
  visibility: hidden;
  opacity: 0;
  right: 15px;
  bottom: 15px;
  z-index: 99999;
  background-color: var(--accent-color);
  width: 40px;
  height: 40px;
  border-radius: 4px;
  transition: all 0.4s;
}

.scroll-top i {
  font-size: 24px;
  color: var(--contrast-color);
  line-height: 0;
}

.scroll-top:hover {
  background-color: color-mix(in srgb, var(--accent-color), transparent 20%);
  color: var(--contrast-color);
}

.scroll-top.active {
  visibility: visible;
  opacity: 1;
}

/*--------------------------------------------------------------
# Disable aos animation delay on mobile devices
--------------------------------------------------------------*/
@media screen and (max-width: 768px) {
  [data-aos-delay] {
    transition-delay: 0 !important;
  }
}

/*--------------------------------------------------------------
# Global Page Titles & Breadcrumbs
--------------------------------------------------------------*/
.page-title {
  color: var(--default-color);
  background-color: var(--background-color);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: 160px 0 80px 0;
  text-align: center;
  position: relative;
}

.page-title:before {
  content: "";
  background-color: color-mix(in srgb, var(--background-color), transparent 30%);
  position: absolute;
  inset: 0;
}

.page-title h1 {
  font-size: 42px;
  font-weight: 700;
  margin-bottom: 10px;
}

.page-title .breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  justify-content: center;
  padding: 0;
  margin: 0;
  font-size: 16px;
  font-weight: 400;
}

.page-title .breadcrumbs ol li+li {
  padding-left: 10px;
}

.page-title .breadcrumbs ol li+li::before {
  content: "/";
  display: inline-block;
  padding-right: 10px;
  color: color-mix(in srgb, var(--default-color), transparent 50%);
}

/*--------------------------------------------------------------
# Global Sections
--------------------------------------------------------------*/
section,
.section {
  color: var(--default-color);
  background-color: var(--background-color);
  padding: 60px 0;
  scroll-margin-top: 90px;
  overflow: clip;
}

@media (max-width: 1199px) {

  section,
  .section {
    scroll-margin-top: 66px;
  }
}

/*--------------------------------------------------------------
# Global Section Titles
--------------------------------------------------------------*/
.section-title {
  text-align: center;
  padding-bottom: 60px;
  position: relative;
}

.section-title h2 {
  font-size: 32px;
  font-weight: 400;
  margin-bottom: 20px;
  padding-bottom: 20px;
  position: relative;
}

.section-title h2:before {
  content: "";
  position: absolute;
  display: block;
  width: 160px;
  height: 1px;
  background: color-mix(in srgb, var(--default-color), transparent 60%);
  left: 0;
  right: 0;
  bottom: 1px;
  margin: auto;
}

.section-title h2::after {
  content: "";
  position: absolute;
  display: block;
  width: 60px;
  height: 3px;
  background: var(--accent-color);
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

.section-title p {
  margin-bottom: 0;
}

/*--------------------------------------------------------------
# Hero Section
--------------------------------------------------------------*/
.hero {
  padding-top: 120px;
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-bottom: 80px;
}

.hero .hero-video-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.hero .hero-video-container video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero .hero-image-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.hero .hero-image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
} 

.hero .hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: color-mix(in srgb, var(--background-color), transparent 20%);
  z-index: 2;
}

.hero .container {
  position: relative;
  z-index: 1;
}

.hero .hero-content h1 {
  font-size: 3.5rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
  line-height: 1.2;
}

@media (max-width: 768px) {
  .hero .hero-content h1 {
    font-size: 2.5rem;
  }
}

@media (max-width: 576px) {
  .hero .hero-content h1 {
    font-size: 2rem;
  }
}

.hero .hero-content p {
  font-size: 1.2rem;
  margin-bottom: 2.5rem;
  line-height: 1.6;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 768px) {
  .hero .hero-content p {
    font-size: 1.1rem;
  }
}

.hero .hero-content .hero-actions {
  margin-bottom: 4rem;
}

.hero .hero-content .hero-actions .btn {
  padding: 15px 30px;
  font-size: 1rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-radius: 6px;
  margin: 0 10px;
  transition: all 0.3s ease;
}

@media (max-width: 576px) {
  .hero .hero-content .hero-actions .btn {
    display: block;
    margin: 10px auto;
    width: fit-content;
  }
}

.hero .hero-content .hero-actions .btn-primary {
  background-color: var(--accent-color);
  border-color: var(--accent-color);
  color: var(--contrast-color);
}

.hero .hero-content .hero-actions .btn-primary:hover {
  background-color: color-mix(in srgb, var(--accent-color), black 15%);
  border-color: color-mix(in srgb, var(--accent-color), black 15%);
  transform: translateY(-2px);
}

.hero .hero-content .hero-actions .btn-secondary {
  background-color: transparent;
  border: 2px solid color-mix(in srgb, var(--default-color), transparent 50%);
  color: var(--default-color);
}

.hero .hero-content .hero-actions .btn-secondary:hover {
  color: var(--accent-color);
  border-color: var(--accent-color);
  transform: translateY(-2px);
}

.hero .hero-content .hero-stats {
  background-color: color-mix(in srgb, var(--background-color), transparent 90%);
  backdrop-filter: blur(5px);
  border-radius: 15px;
  padding: 2rem;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.hero .hero-content .hero-stats .stat-item {
  text-align: center;
  padding: 1rem;
}

.hero .hero-content .hero-stats .stat-item .stat-number {
  display: block;
  font-size: 2.5rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.hero .hero-content .hero-stats .stat-item .stat-label {
  font-size: 0.9rem;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  text-transform: uppercase;
  letter-spacing: 1px;
  font-weight: 500;
}

@media (max-width: 768px) {
  .hero .hero-content .hero-stats .stat-item {
    margin-bottom: 1.5rem;
  }

  .hero .hero-content .hero-stats .stat-item:last-child {
    margin-bottom: 0;
  }
}

/*--------------------------------------------------------------
# About Section
--------------------------------------------------------------*/
.about {
  background-color: color-mix(in srgb, var(--background-color), var(--surface-color) 40%);
}

.about .content .section-heading {
  font-size: 2.5rem;
  font-weight: 300;
  line-height: 1.2;
  color: var(--heading-color);
  letter-spacing: -0.02em;
}

@media (max-width: 768px) {
  .about .content .section-heading {
    font-size: 2rem;
  }
}

.about .content .lead-text {
  font-size: 1.25rem;
  font-weight: 300;
  line-height: 1.7;
  color: var(--default-color);
}

.about .content .description-text {
  font-size: 1rem;
  line-height: 1.8;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.about .stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  margin-bottom: 3rem;
}

@media (max-width: 576px) {
  .about .stats-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    text-align: center;
  }
}

.about .stats-grid .stat-item .stat-number {
  font-size: 2.5rem;
  font-weight: 200;
  color: var(--accent-color);
  line-height: 1;
  margin-bottom: 0.5rem;
}

.about .stats-grid .stat-item .stat-label {
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--heading-color);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.about .cta-section .cta-link {
  display: inline-flex;
  align-items: center;
  color: var(--accent-color);
  font-weight: 400;
  font-size: 1.1rem;
  text-decoration: none;
  transition: all 0.3s ease;
}

.about .cta-section .cta-link:hover {
  color: var(--heading-color);
  transform: translateX(5px);
}

.about .cta-section .cta-link i {
  transition: transform 0.3s ease;
}

.about .cta-section .cta-link:hover i {
  transform: translateX(5px);
}

.about .image-section {
  position: relative;
}

.about .image-section .main-image {
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 20px 60px color-mix(in srgb, var(--default-color), transparent 85%);
}

.about .image-section .main-image img {
  width: 100%;
  height: auto;
  transition: transform 0.3s ease;
}

.about .image-section .main-image:hover img {
  transform: scale(1.02);
}

.about .image-section .floating-badge {
  position: absolute;
  bottom: -20px;
  right: -20px;
  background-color: var(--surface-color);
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 15px 40px color-mix(in srgb, var(--default-color), transparent 80%);
}

@media (max-width: 768px) {
  .about .image-section .floating-badge {
    bottom: -15px;
    right: -15px;
    padding: 1rem;
  }
}

.about .image-section .floating-badge .badge-content {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.about .image-section .floating-badge .badge-content i {
  font-size: 2rem;
  color: var(--accent-color);
}

.about .image-section .floating-badge .badge-content .badge-text .badge-title {
  display: block;
  font-weight: 500;
  color: var(--heading-color);
  font-size: 1rem;
  line-height: 1.2;
}

.about .image-section .floating-badge .badge-content .badge-text .badge-subtitle {
  display: block;
  font-size: 0.85rem;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  font-weight: 300;
}

@media (max-width: 992px) {
  .about .content {
    margin-bottom: 3rem;
  }

  .about .image-section .floating-badge {
    position: relative;
    bottom: auto;
    right: auto;
    margin-top: 2rem;
    display: inline-block;
  }
}

/*--------------------------------------------------------------
# Services Section
--------------------------------------------------------------*/
.services {
  padding-top: 60px;
  padding-bottom: 2px;
}

.services .services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 40px;
  margin-bottom: 80px;
}

@media (min-width: 992px) {
  .services .services-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 50px;
  }
}

.services .service-item {
  background: var(--surface-color);
  padding: 40px 30px;
  border-radius: 8px;
  position: relative;
  overflow: hidden;
  transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 92%);
}

.services .service-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--accent-color), transparent 60%), var(--accent-color));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.4s ease;
}

.services .service-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 60px color-mix(in srgb, var(--default-color), transparent 88%);
  border-color: color-mix(in srgb, var(--accent-color), transparent 80%);
}

.services .service-item:hover::before {
  transform: scaleX(1);
}

.services .service-item:hover .service-number {
  color: var(--accent-color);
  transform: scale(1.1);
}

.services .service-item:hover .service-icon {
  transform: scale(1.05);
  background: var(--accent-color);
}

.services .service-item:hover .service-icon i {
  color: var(--contrast-color);
}

.services .service-item:hover .service-cta {
  transform: translateX(8px);
  color: var(--accent-color);
}

.services .service-item.featured {
  background: linear-gradient(135deg, var(--surface-color), color-mix(in srgb, var(--surface-color), var(--accent-color) 3%));
  border-color: var(--accent-color);
  transform: scale(1.02);
}

.services .service-item.featured .featured-badge {
  position: absolute;
  top: 20px;
  right: 20px;
  background: var(--accent-color);
  color: var(--contrast-color);
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.services .service-item.featured::before {
  transform: scaleX(1);
}

.services .service-item.featured .service-number {
  color: var(--accent-color);
}

.services .service-item .service-number {
  font-size: 14px;
  font-weight: 300;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  margin-bottom: 20px;
  transition: all 0.3s ease;
  letter-spacing: 2px;
}

.services .service-item .service-icon {
  width: 60px;
  height: 60px;
  background: color-mix(in srgb, var(--accent-color), transparent 90%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 25px;
  transition: all 0.3s ease;
}

.services .service-item .service-icon i {
  font-size: 24px;
  color: var(--accent-color);
  transition: color 0.3s ease;
}

.services .service-item h3 {
  font-size: 24px;
  font-weight: 300;
  color: var(--heading-color);
  margin-bottom: 15px;
  line-height: 1.3;
}

.services .service-item p {
  color: color-mix(in srgb, var(--default-color), transparent 25%);
  line-height: 1.7;
  margin-bottom: 25px;
  font-size: 15px;
}

.services .service-item .service-cta {
  display: inline-flex;
  align-items: center;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  text-decoration: none;
  font-weight: 500;
  font-size: 14px;
  transition: all 0.3s ease;
  letter-spacing: 0.5px;
}

.services .service-item .service-cta span {
  margin-right: 8px;
}

.services .service-item .service-cta i {
  font-size: 12px;
  transition: transform 0.3s ease;
}

.services .service-item .service-cta:hover i {
  transform: translateX(3px);
}

.services .services-footer {
  background: var(--surface-color);
  padding: 50px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 92%);
}

@media (max-width: 768px) {
  .services .services-footer {
    flex-direction: column;
    text-align: center;
    gap: 30px;
    padding: 40px 30px;
  }
}

.services .services-footer .footer-content {
  flex: 1;
}

.services .services-footer .footer-content h4 {
  font-size: 28px;
  font-weight: 300;
  color: var(--heading-color);
  margin-bottom: 8px;
}

.services .services-footer .footer-content p {
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  margin: 0;
  font-size: 16px;
  line-height: 1.6;
}

.services .services-footer .primary-cta {
  background: linear-gradient(135deg, var(--accent-color), color-mix(in srgb, var(--accent-color), var(--heading-color) 10%));
  color: var(--contrast-color);
  padding: 18px 35px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  transition: all 0.3s ease;
  box-shadow: 0 8px 25px color-mix(in srgb, var(--accent-color), transparent 70%);
}

.services .services-footer .primary-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 15px 40px color-mix(in srgb, var(--accent-color), transparent 60%);
  color: var(--contrast-color);
}

.services .services-footer .primary-cta i {
  margin-left: 10px;
  font-size: 14px;
  transition: transform 0.3s ease;
}

.services .services-footer .primary-cta:hover i {
  transform: translateX(3px);
}

@media (max-width: 768px) {
  .services .services-grid {
    grid-template-columns: 1fr;
    gap: 30px;
    margin-bottom: 60px;
  }

  .services .service-item {
    padding: 30px 25px;
  }

  .services .service-item h3 {
    font-size: 22px;
  }

  .services .service-item p {
    font-size: 14px;
  }

  .services .services-footer .footer-content h4 {
    font-size: 24px;
  }
}

@media (max-width: 576px) {
  .services .services-grid {
    gap: 25px;
  }

  .services .service-item {
    padding: 25px 20px;
  }

  .services .service-item .service-icon {
    width: 50px;
    height: 50px;
  }

  .services .service-item .service-icon i {
    font-size: 20px;
  }

  .services .services-footer {
    padding: 30px 20px;
  }

  .services .services-footer .primary-cta {
    padding: 15px 25px;
    font-size: 14px;
  }
}

/*--------------------------------------------------------------
# Services Alt Section
--------------------------------------------------------------*/
.services-alt {
  overflow: hidden;
}

.services-alt .section-subtitle {
  font-size: 18px;
  line-height: 1.7;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  font-weight: 300;
  margin: 0;
}

.services-alt .service-item {
  height: 100%;
  transition: all 0.4s ease;
}

.services-alt .service-item .service-visual {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  margin-bottom: 32px;
}

.services-alt .service-item .service-visual img {
  width: 100%;
  height: 280px;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.services-alt .service-item .service-content h3 {
  font-size: 24px;
  font-weight: 300;
  margin-bottom: 16px;
  line-height: 1.4;
}

.services-alt .service-item .service-content p {
  font-size: 16px;
  line-height: 1.7;
  margin-bottom: 24px;
  color: color-mix(in srgb, var(--default-color), transparent 25%);
}

.services-alt .service-item .service-content .service-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--heading-color);
  text-decoration: none;
  font-weight: 400;
  font-size: 15px;
  transition: all 0.3s ease;
}

.services-alt .service-item .service-content .service-link span {
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s ease;
}

.services-alt .service-item .service-content .service-link i {
  font-size: 14px;
  transition: transform 0.3s ease;
}

.services-alt .service-item .service-content .service-link:hover {
  color: var(--accent-color);
}

.services-alt .service-item .service-content .service-link:hover span {
  border-bottom-color: var(--accent-color);
}

.services-alt .service-item .service-content .service-link:hover i {
  transform: translateX(4px);
}

.services-alt .service-item:hover .service-visual img {
  transform: scale(1.05);
}

.services-alt .cta-section {
  background: linear-gradient(135deg, var(--surface-color) 0%, color-mix(in srgb, var(--surface-color), var(--accent-color) 5%) 100%);
  padding: 64px 48px;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.services-alt .cta-section h4 {
  font-size: 32px;
  font-weight: 300;
  margin-bottom: 16px;
  line-height: 1.3;
}

.services-alt .cta-section p {
  font-size: 18px;
  line-height: 1.7;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  margin-bottom: 32px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.services-alt .cta-section .btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background-color: var(--accent-color);
  color: var(--contrast-color);
  padding: 16px 32px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: 400;
  font-size: 16px;
  transition: all 0.3s ease;
  border: none;
}

.services-alt .cta-section .btn-primary i {
  font-size: 16px;
  transition: transform 0.3s ease;
}

.services-alt .cta-section .btn-primary:hover {
  background-color: color-mix(in srgb, var(--accent-color), black 10%);
  transform: translateY(-2px);
  color: var(--contrast-color);
}

.services-alt .cta-section .btn-primary:hover i {
  transform: translateX(4px);
}

@media (max-width: 768px) {
  .services-alt .cta-section {
    padding: 48px 32px;
  }

  .services-alt .cta-section h4 {
    font-size: 28px;
  }

  .services-alt .cta-section p {
    font-size: 16px;
  }
}

@media (max-width: 768px) {
  .services-alt .service-item .service-visual {
    margin-bottom: 24px;
  }

  .services-alt .service-item .service-visual img {
    height: 240px;
  }

  .services-alt .service-item .service-content h3 {
    font-size: 22px;
  }

  .services-alt .service-item .service-content p {
    font-size: 15px;
    margin-bottom: 20px;
  }
}

/*--------------------------------------------------------------
# Projects Section
--------------------------------------------------------------*/
.projects .project-card {
  background: var(--surface-color);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 5px 20px color-mix(in srgb, var(--default-color), transparent 90%);
  transition: all 0.3s ease;
  height: 100%;
}

.projects .project-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 40px color-mix(in srgb, var(--default-color), transparent 85%);
}

.projects .project-card:hover .project-overlay {
  opacity: 1;
}

.projects .project-image {
  position: relative;
  overflow: hidden;
  height: 250px;
}

.projects .project-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.projects .project-image:hover img {
  transform: scale(1.05);
}

.projects .project-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, transparent 0%, color-mix(in srgb, var(--default-color), transparent 10%) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 20px;
}

.projects .project-status {
  align-self: flex-start;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.projects .project-status.completed {
  background: color-mix(in srgb, #28a745, transparent 20%);
  color: #ffffff;
}

.projects .project-status.in-progress {
  background: color-mix(in srgb, var(--accent-color), transparent 20%);
  color: #ffffff;
}

.projects .project-status.planning {
  background: color-mix(in srgb, #ffc107, transparent 20%);
  color: #ffffff;
}

.projects .project-actions {
  align-self: center;
}

.projects .btn-project {
  background: var(--accent-color);
  color: var(--contrast-color);
  padding: 10px 24px;
  border-radius: 25px;
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  transition: all 0.3s ease;
  display: inline-block;
}

.projects .btn-project:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 20%);
  color: var(--contrast-color);
  transform: translateY(-2px);
}

.projects .project-info {
  padding: 25px;
}

.projects .project-category {
  color: var(--accent-color);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 8px;
}

.projects .project-title {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 12px;
  color: var(--heading-color);
  line-height: 1.3;
}

.projects .project-description {
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 20px;
}

.projects .project-meta {
  display: flex;
  gap: 20px;
}

.projects .project-meta span {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
}

.projects .project-meta span i {
  font-size: 14px;
  color: var(--accent-color);
}

@media (max-width: 768px) {
  .projects .project-meta {
    flex-direction: column;
    gap: 8px;
  }

  .projects .project-title {
    font-size: 18px;
  }

  .projects .project-image {
    height: 200px;
  }
}

/*--------------------------------------------------------------
# Testimonials Section
--------------------------------------------------------------*/
.testimonials .testimonial-masonry {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
  position: relative;
}

.testimonials .testimonial-masonry::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at center, color-mix(in srgb, var(--accent-color), transparent 95%), transparent);
  opacity: 0.5;
  z-index: -1;
}

.testimonials .testimonial-item:nth-child(3n-1) {
  margin-top: 3rem;
}

.testimonials .testimonial-item:nth-child(3n) {
  margin-top: 1.5rem;
}

.testimonials .testimonial-item.highlight .testimonial-content {
  background-color: color-mix(in srgb, var(--accent-color), transparent 92%);
  border: 1px solid color-mix(in srgb, var(--accent-color), transparent 70%);
}

.testimonials .testimonial-item.highlight .testimonial-content .quote-pattern {
  background-color: color-mix(in srgb, var(--accent-color), transparent 85%);
}

.testimonials .testimonial-item.highlight .testimonial-content .quote-pattern i {
  color: var(--accent-color);
}

.testimonials .testimonial-content {
  background-color: var(--surface-color);
  border-radius: 20px;
  padding: 2rem;
  position: relative;
  transition: all 0.3s ease;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 92%);
}

.testimonials .testimonial-content:hover {
  transform: translateY(-5px);
}

.testimonials .testimonial-content p {
  font-size: 1rem;
  line-height: 1.7;
  margin: 1.5rem 0;
  position: relative;
}

.testimonials .quote-pattern {
  position: absolute;
  top: -1.25rem;
  left: 2rem;
  width: 2.5rem;
  height: 2.5rem;
  background-color: var(--surface-color);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 92%);
}

.testimonials .quote-pattern i {
  font-size: 1.25rem;
  color: var(--accent-color);
}

.testimonials .client-info {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 92%);
}

.testimonials .client-image {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

.testimonials .client-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.testimonials .client-details h3 {
  font-size: 1.125rem;
  margin-bottom: 0.25rem;
}

.testimonials .client-details .position {
  font-size: 0.875rem;
  color: color-mix(in srgb, var(--heading-color), transparent 40%);
}

@media (max-width: 1199.98px) {
  .testimonials .testimonial-masonry {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }

  .testimonials .testimonial-item:nth-child(3n-1),
  .testimonials .testimonial-item:nth-child(3n) {
    margin-top: 0;
  }

  .testimonials .testimonial-item:nth-child(even) {
    margin-top: 2rem;
  }
}

@media (max-width: 767.98px) {
  .testimonials .testimonial-masonry {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .testimonials .testimonial-item:nth-child(even) {
    margin-top: 0;
  }

  .testimonials .testimonial-content {
    padding: 1.5rem;
  }

  .testimonials .testimonial-content p {
    font-size: 0.9375rem;
    margin: 1.25rem 0;
  }

  .testimonials .quote-pattern {
    width: 2.25rem;
    height: 2.25rem;
    top: -1.125rem;
  }

  .testimonials .quote-pattern i {
    font-size: 1.125rem;
  }

  .testimonials .client-info {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
  }

  .testimonials .client-image {
    width: 45px;
    height: 45px;
  }

  .testimonials .client-details h3 {
    font-size: 1rem;
  }

  .testimonials .client-details .position {
    font-size: 0.8125rem;
  }
}

/*--------------------------------------------------------------
# Certifications Section
--------------------------------------------------------------*/
.certifications .content h2 {
  font-size: 2.5rem;
  font-weight: 300;
  margin-bottom: 1.5rem;
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.certifications .content p {
  font-size: 1.125rem;
  line-height: 1.7;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  margin-bottom: 0;
}

.certifications .certification-item {
  text-align: center;
  padding: 2.5rem 1.5rem;
  height: 100%;
  transition: all 0.4s ease-in-out;
  position: relative;
}

.certifications .certification-item:hover {
  transform: translateY(-5px);
}

.certifications .certification-item:hover .certification-badge img {
  transform: scale(1.05);
}

.certifications .certification-item .certification-badge {
  margin-bottom: 2rem;
  width: 120px;
  height: 120px;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-color);
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
  padding: 1rem;
}

.certifications .certification-item .certification-badge img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transition: transform 0.4s ease-in-out;
}

.certifications .certification-item h4 {
  font-size: 1.25rem;
  font-weight: 400;
  margin-bottom: 1rem;
  color: var(--heading-color);
  line-height: 1.3;
}

.certifications .certification-item p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  margin-bottom: 0;
}

.certifications .certification-stats {
  margin-top: 2rem;
  padding: 3rem 2rem;
  background: var(--surface-color);
  border-radius: 8px;
  box-shadow: 0 6px 30px rgba(0, 0, 0, 0.03);
}

.certifications .certification-stats .stat-item h3 {
  font-size: 2.5rem;
  font-weight: 300;
  color: var(--accent-color);
  margin-bottom: 0.5rem;
  line-height: 1;
}

.certifications .certification-stats .stat-item p {
  font-size: 0.9rem;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  margin-bottom: 0;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 500;
}

@media (max-width: 768px) {
  .certifications {
    padding: 80px 0;
  }

  .certifications .content h2 {
    font-size: 2rem;
  }

  .certifications .content p {
    font-size: 1rem;
  }

  .certifications .certification-item {
    padding: 2rem 1rem;
  }

  .certifications .certification-item .certification-badge {
    width: 100px;
    height: 100px;
    margin-bottom: 1.5rem;
  }

  .certifications .certification-item h4 {
    font-size: 1.125rem;
  }

  .certifications .certification-stats {
    padding: 2rem 1rem;
  }

  .certifications .certification-stats .stat-item h3 {
    font-size: 2rem;
  }
}

/*--------------------------------------------------------------
# Team Section
--------------------------------------------------------------*/
.team .team-member {
  background-color: var(--surface-color);
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.3s ease-in-out;
}

.team .team-member:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 35px color-mix(in srgb, var(--default-color), transparent 85%);
}

.team .team-member .member-img {
  position: relative;
  overflow: hidden;
}

.team .team-member .member-img img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  transition: transform 0.3s ease-in-out;
}

.team .team-member .member-img::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--heading-color), transparent 20%) 100%);
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

.team .team-member .member-info {
  padding: 32px 28px;
  text-align: center;
}

.team .team-member .member-info h4 {
  font-size: 22px;
  font-weight: 300;
  margin: 0 0 8px 0;
  color: var(--heading-color);
  line-height: 1.3;
}

.team .team-member .member-info span {
  display: block;
  font-size: 14px;
  color: var(--accent-color);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 20px;
}

.team .team-member .member-info p {
  font-size: 14px;
  line-height: 1.7;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  margin-bottom: 24px;
}

.team .team-member .member-info .social {
  display: flex;
  justify-content: center;
  gap: 12px;
}

.team .team-member .member-info .social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background-color: color-mix(in srgb, var(--default-color), transparent 95%);
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  border-radius: 50%;
  font-size: 16px;
  transition: all 0.3s ease-in-out;
}

.team .team-member .member-info .social a:hover {
  background-color: var(--accent-color);
  color: var(--contrast-color);
  transform: translateY(-3px);
}

.team .team-member:hover .member-img img {
  transform: scale(1.08);
}

.team .team-member:hover .member-img::after {
  opacity: 1;
}

@media (max-width: 768px) {
  .team .team-member .member-info {
    padding: 24px 20px;
  }

  .team .team-member .member-info h4 {
    font-size: 20px;
  }

  .team .team-member .member-img img {
    height: 250px;
  }
}

/*--------------------------------------------------------------
# Call To Action Section
--------------------------------------------------------------*/
.call-to-action {
  padding-top: 60px;
  padding-bottom: 60px;
}

.call-to-action .container {
  position: relative;
  z-index: 2;
}

.call-to-action .cta-header {
  margin-bottom: 80px;
}

.call-to-action .cta-header h2 {
  font-size: 3.2rem;
  font-weight: 300;
  color: var(--heading-color);
  margin-bottom: 2rem;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

@media (max-width: 768px) {
  .call-to-action .cta-header h2 {
    font-size: 2.4rem;
    margin-bottom: 1.5rem;
  }
}

.call-to-action .cta-header p {
  font-size: 1.2rem;
  line-height: 1.8;
  color: color-mix(in srgb, var(--default-color), transparent 25%);
  max-width: 800px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .call-to-action .cta-header p {
    font-size: 1.1rem;
  }
}

@media (max-width: 992px) {
  .call-to-action .cta-header {
    margin-bottom: 60px;
  }
}

.call-to-action .achievements-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 30px;
}

@media (max-width: 576px) {
  .call-to-action .achievements-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

.call-to-action .achievements-grid .achievement-item {
  background: var(--surface-color);
  padding: 40px 30px;
  border-radius: 12px;
  text-align: center;
  transition: all 0.4s ease;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 92%);
}

.call-to-action .achievements-grid .achievement-item:hover {
  transform: translateY(-8px);
  box-shadow: 0 25px 50px color-mix(in srgb, var(--default-color), transparent 88%);
}

.call-to-action .achievements-grid .achievement-item .achievement-icon {
  margin-bottom: 20px;
}

.call-to-action .achievements-grid .achievement-item .achievement-icon i {
  font-size: 2.5rem;
  color: var(--accent-color);
}

.call-to-action .achievements-grid .achievement-item .achievement-info h3 {
  font-size: 2.8rem;
  font-weight: 300;
  color: var(--heading-color);
  margin-bottom: 8px;
  line-height: 1;
}

.call-to-action .achievements-grid .achievement-item .achievement-info span {
  font-size: 0.95rem;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 500;
}

@media (max-width: 768px) {
  .call-to-action .achievements-grid .achievement-item {
    padding: 30px 20px;
  }
}

.call-to-action .action-panel {
  background: var(--surface-color);
  border-radius: 20px;
  padding: 50px;
  box-shadow: 0 30px 80px color-mix(in srgb, var(--default-color), transparent 90%);
  border: 1px solid color-mix(in srgb, var(--accent-color), transparent 90%);
}

@media (max-width: 768px) {
  .call-to-action .action-panel {
    padding: 40px 30px;
    margin-top: 40px;
  }
}

.call-to-action .action-panel .panel-content {
  margin-bottom: 40px;
}

.call-to-action .action-panel .panel-content h3 {
  font-size: 2.2rem;
  font-weight: 400;
  color: var(--heading-color);
  margin-bottom: 1.5rem;
  line-height: 1.3;
}

@media (max-width: 768px) {
  .call-to-action .action-panel .panel-content h3 {
    font-size: 1.8rem;
  }
}

.call-to-action .action-panel .panel-content p {
  font-size: 1.1rem;
  line-height: 1.7;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  margin-bottom: 2.5rem;
}

.call-to-action .action-panel .panel-content .action-buttons {
  display: flex;
  gap: 15px;
  flex-direction: column;
}

.call-to-action .action-panel .panel-content .action-buttons .btn-primary,
.call-to-action .action-panel .panel-content .action-buttons .btn-secondary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 25px;
  border-radius: 10px;
  text-decoration: none;
  font-weight: 500;
  font-size: 1.05rem;
  transition: all 0.3s ease;
}

.call-to-action .action-panel .panel-content .action-buttons .btn-primary i,
.call-to-action .action-panel .panel-content .action-buttons .btn-secondary i {
  font-size: 1.1rem;
}

.call-to-action .action-panel .panel-content .action-buttons .btn-primary {
  background: var(--accent-color);
  color: var(--contrast-color);
  border: none;
}

.call-to-action .action-panel .panel-content .action-buttons .btn-primary:hover {
  background: color-mix(in srgb, var(--accent-color), black 10%);
  transform: translateY(-2px);
}

.call-to-action .action-panel .panel-content .action-buttons .btn-secondary {
  background: transparent;
  color: var(--heading-color);
  border: 2px solid color-mix(in srgb, var(--default-color), transparent 85%);
}

.call-to-action .action-panel .panel-content .action-buttons .btn-secondary:hover {
  border-color: var(--accent-color);
  color: var(--accent-color);
  transform: translateY(-2px);
}

.call-to-action .action-panel .contact-quick {
  padding-top: 30px;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.call-to-action .action-panel .contact-quick .contact-row {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 20px;
}

.call-to-action .action-panel .contact-quick .contact-row:last-child {
  margin-bottom: 0;
}

.call-to-action .action-panel .contact-quick .contact-row i {
  font-size: 1.5rem;
  color: var(--accent-color);
  flex-shrink: 0;
}

.call-to-action .action-panel .contact-quick .contact-row .contact-details {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.call-to-action .action-panel .contact-quick .contact-row .contact-details .contact-label {
  font-size: 0.9rem;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  font-weight: 500;
}

.call-to-action .action-panel .contact-quick .contact-row .contact-details .contact-value {
  font-size: 1rem;
  color: var(--heading-color);
  font-weight: 600;
}

@media (max-width: 992px) {
  .call-to-action {
    padding: 40px 0;
  }
}

/*--------------------------------------------------------------
# Service Details Section
--------------------------------------------------------------*/
.service-details .service-header .service-title {
  font-size: 3rem;
  font-weight: 300;
  color: var(--heading-color);
  line-height: 1.2;
  margin-bottom: 1.5rem;
}

.service-details .service-header .service-subtitle {
  font-size: 1.1rem;
  color: var(--default-color);
  line-height: 1.7;
  margin: 0;
}

.service-details .service-header .service-stats {
  display: flex;
  gap: 2rem;
  justify-content: flex-end;
}

.service-details .service-header .service-stats .stat-item {
  text-align: center;
}

.service-details .service-header .service-stats .stat-item .stat-number {
  font-size: 2.5rem;
  font-weight: 300;
  color: var(--accent-color);
  line-height: 1;
  margin-bottom: 0.5rem;
}

.service-details .service-header .service-stats .stat-item .stat-label {
  font-size: 0.9rem;
  color: var(--default-color);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.service-details .service-overview {
  margin-bottom: 4rem;
}

.service-details .service-overview .service-image {
  width: 100%;
  height: 350px;
  object-fit: cover;
  border-radius: 12px;
  margin-bottom: 3rem;
}

.service-details .service-overview .overview-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
}

.service-details .service-overview .overview-grid .overview-item i {
  font-size: 2.5rem;
  color: var(--accent-color);
  margin-bottom: 1.5rem;
  display: block;
}

.service-details .service-overview .overview-grid .overview-item h3 {
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--heading-color);
  margin-bottom: 1rem;
}

.service-details .service-overview .overview-grid .overview-item p {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--default-color);
  margin: 0;
}

.service-details .capabilities-section {
  margin-bottom: 4rem;
}

.service-details .capabilities-section h2 {
  font-size: 2.2rem;
  font-weight: 300;
  color: var(--heading-color);
  margin-bottom: 3rem;
}

.service-details .capabilities-section .custom-tabs {
  border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
  margin-bottom: 3rem;
  padding-left: 0;
}

.service-details .capabilities-section .custom-tabs .nav-item .nav-link {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 1rem 2rem;
  font-size: 1rem;
  color: var(--default-color);
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 0;
}

.service-details .capabilities-section .custom-tabs .nav-item .nav-link.active {
  color: var(--accent-color);
  border-bottom-color: var(--accent-color);
  background: none;
}

.service-details .capabilities-section .custom-tabs .nav-item .nav-link:hover:not(.active) {
  color: var(--heading-color);
  border-bottom-color: transparent;
  background: none;
}

.service-details .capabilities-section .custom-tabs .nav-item .nav-link:focus {
  box-shadow: none;
}

.service-details .capabilities-section .tab-content .tab-pane {
  padding: 2rem 0;
}

.service-details .capabilities-section .tab-content .tab-pane h4 {
  font-size: 1.5rem;
  font-weight: 400;
  color: var(--heading-color);
  margin-bottom: 1rem;
}

.service-details .capabilities-section .tab-content .tab-pane p {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--default-color);
  margin-bottom: 2rem;
}

.service-details .capabilities-section .tab-content .tab-pane .capability-features {
  list-style: none;
  padding: 0;
}

.service-details .capabilities-section .tab-content .tab-pane .capability-features li {
  padding: 0.5rem 0;
  color: var(--default-color);
  position: relative;
  padding-left: 1.5rem;
}

.service-details .capabilities-section .tab-content .tab-pane .capability-features li:before {
  content: "→";
  color: var(--accent-color);
  position: absolute;
  left: 0;
  top: 0.5rem;
}

.service-details .service-sidebar .quick-info-card,
.service-details .service-sidebar .contact-form-card,
.service-details .service-sidebar .expertise-highlights {
  background-color: var(--surface-color);
  padding: 2.5rem;
  border-radius: 16px;
  margin-bottom: 2.5rem;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.service-details .service-sidebar .quick-info-card .info-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
}

.service-details .service-sidebar .quick-info-card .info-header h3 {
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--heading-color);
  margin: 0;
}

.service-details .service-sidebar .quick-info-card .info-header .info-badge {
  background-color: color-mix(in srgb, var(--accent-color), transparent 85%);
  color: var(--accent-color);
  padding: 0.3rem 0.8rem;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.service-details .service-sidebar .quick-info-card .info-content .info-row {
  display: flex;
  justify-content: space-between;
  padding: 1rem 0;
  border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.service-details .service-sidebar .quick-info-card .info-content .info-row:last-child {
  border-bottom: none;
}

.service-details .service-sidebar .quick-info-card .info-content .info-row .label {
  color: var(--default-color);
  font-weight: 400;
}

.service-details .service-sidebar .quick-info-card .info-content .info-row .value {
  color: var(--heading-color);
  font-weight: 500;
}

.service-details .service-sidebar .contact-form-card h3 {
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--heading-color);
  margin-bottom: 0.5rem;
}

.service-details .service-sidebar .contact-form-card p {
  color: var(--default-color);
  margin-bottom: 2rem;
  font-size: 0.95rem;
}

.service-details .service-sidebar .contact-form-card .consultation-form .form-group {
  margin-bottom: 1.5rem;
}

.service-details .service-sidebar .contact-form-card .consultation-form .form-group input,
.service-details .service-sidebar .contact-form-card .consultation-form .form-group select,
.service-details .service-sidebar .contact-form-card .consultation-form .form-group textarea {
  width: 100%;
  padding: 1rem;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 80%);
  border-radius: 8px;
  background-color: var(--surface-color);
  color: var(--default-color);
  font-size: 0.95rem;
  transition: border-color 0.3s ease;
}

.service-details .service-sidebar .contact-form-card .consultation-form .form-group input:focus,
.service-details .service-sidebar .contact-form-card .consultation-form .form-group select:focus,
.service-details .service-sidebar .contact-form-card .consultation-form .form-group textarea:focus {
  outline: none;
  border-color: var(--accent-color);
}

.service-details .service-sidebar .contact-form-card .consultation-form .form-group input::placeholder,
.service-details .service-sidebar .contact-form-card .consultation-form .form-group select::placeholder,
.service-details .service-sidebar .contact-form-card .consultation-form .form-group textarea::placeholder {
  color: color-mix(in srgb, var(--default-color), transparent 70%);
}

.service-details .service-sidebar .contact-form-card .consultation-form .form-group select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1rem;
}

.service-details .service-sidebar .contact-form-card .consultation-form .btn-submit {
  width: 100%;
  background-color: var(--accent-color);
  color: var(--contrast-color);
  border: none;
  padding: 1rem;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.service-details .service-sidebar .contact-form-card .consultation-form .btn-submit:hover {
  background-color: color-mix(in srgb, var(--accent-color), black 10%);
  transform: translateY(-1px);
}

.service-details .service-sidebar .expertise-highlights h4 {
  font-size: 1.2rem;
  font-weight: 400;
  color: var(--heading-color);
  margin-bottom: 2rem;
}

.service-details .service-sidebar .expertise-highlights .expertise-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.service-details .service-sidebar .expertise-highlights .expertise-grid .expertise-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  border-radius: 8px;
  transition: background-color 0.3s ease;
}

.service-details .service-sidebar .expertise-highlights .expertise-grid .expertise-item:hover {
  background-color: color-mix(in srgb, var(--accent-color), transparent 95%);
}

.service-details .service-sidebar .expertise-highlights .expertise-grid .expertise-item i {
  color: var(--accent-color);
  font-size: 1.1rem;
}

.service-details .service-sidebar .expertise-highlights .expertise-grid .expertise-item span {
  font-size: 0.9rem;
  color: var(--default-color);
  font-weight: 500;
}

.service-details .project-showcase {
  margin-top: 5rem;
}

.service-details .project-showcase h2 {
  font-size: 2.2rem;
  font-weight: 300;
  color: var(--heading-color);
  text-align: center;
  margin-bottom: 3rem;
}

.service-details .project-showcase .showcase-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 300px 300px;
  gap: 1.5rem;
}

.service-details .project-showcase .showcase-grid .showcase-item {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  cursor: pointer;
}

.service-details .project-showcase .showcase-grid .showcase-item.large {
  grid-row: span 2;
  grid-column: span 1;
}

.service-details .project-showcase .showcase-grid .showcase-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.service-details .project-showcase .showcase-grid .showcase-item .showcase-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.7));
  display: flex;
  align-items: flex-end;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.service-details .project-showcase .showcase-grid .showcase-item .showcase-overlay .showcase-content {
  padding: 2rem;
  color: white;
  width: 100%;
}

.service-details .project-showcase .showcase-grid .showcase-item .showcase-overlay .showcase-content h4 {
  font-size: 1.2rem;
  font-weight: 400;
  margin-bottom: 0.5rem;
}

.service-details .project-showcase .showcase-grid .showcase-item .showcase-overlay .showcase-content .project-type {
  font-size: 0.9rem;
  opacity: 0.8;
  display: block;
  margin-bottom: 1rem;
}

.service-details .project-showcase .showcase-grid .showcase-item .showcase-overlay .showcase-content .view-project {
  color: white;
  font-size: 1.5rem;
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  transition: transform 0.3s ease;
}

.service-details .project-showcase .showcase-grid .showcase-item .showcase-overlay .showcase-content .view-project:hover {
  transform: scale(1.2);
}

.service-details .project-showcase .showcase-grid .showcase-item:hover h4 {
  color: var(--contrast-color);
}

.service-details .project-showcase .showcase-grid .showcase-item:hover img {
  transform: scale(1.05);
}

.service-details .project-showcase .showcase-grid .showcase-item:hover .showcase-overlay {
  opacity: 1;
}

@media (max-width: 992px) {
  .service-details .service-header .service-title {
    font-size: 2.2rem;
  }

  .service-details .service-header .service-stats {
    justify-content: center;
    margin-top: 2rem;
    gap: 1.5rem;
  }

  .service-details .service-overview .overview-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .service-details .capabilities-section .custom-tabs {
    flex-direction: column;
  }

  .service-details .capabilities-section .custom-tabs .nav-item .nav-link {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
    border-right: none;
  }

  .service-details .capabilities-section .custom-tabs .nav-item .nav-link.active {
    background-color: color-mix(in srgb, var(--accent-color), transparent 95%);
    border-bottom-color: var(--accent-color);
  }

  .service-details .project-showcase .showcase-grid {
    grid-template-columns: 1fr 1fr;
  }

  .service-details .project-showcase .showcase-grid .showcase-item.large {
    grid-column: span 2;
    grid-row: span 1;
  }

  .service-details .service-sidebar {
    margin-top: 3rem;
  }

  .service-details .service-sidebar .expertise-highlights .expertise-grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

@media (max-width: 768px) {
  .service-details .service-header .service-title {
    font-size: 1.8rem;
  }

  .service-details .service-header .service-stats {
    flex-direction: column;
    gap: 1rem;
  }

  .service-details .capabilities-section .custom-tabs .nav-item .nav-link {
    font-size: 0.9rem;
    padding: 0.6rem 1rem;
  }

  .service-details .project-showcase .showcase-grid {
    grid-template-columns: 1fr;
  }

  .service-details .project-showcase .showcase-grid .showcase-item.large {
    grid-column: span 1;
  }

  .service-details .service-sidebar .expertise-highlights .expertise-grid {
    grid-template-columns: 1fr;
  }
}

/*--------------------------------------------------------------
# Project Details Section
--------------------------------------------------------------*/
.project-details .project-hero {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 40px;
}

.project-details .project-hero img {
  width: 100%;
  height: 500px;
  object-fit: cover;
  transition: all 0.4s ease;
}

.project-details .project-hero .project-hero-overlay {
  position: absolute;
  top: 30px;
  right: 30px;
}

.project-details .project-hero .project-hero-overlay .project-status {
  background: var(--accent-color);
  color: var(--contrast-color);
  padding: 8px 20px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

@media (max-width: 768px) {
  .project-details .project-hero {
    margin-bottom: 30px;
  }

  .project-details .project-hero img {
    height: 300px;
  }

  .project-details .project-hero .project-hero-overlay {
    top: 20px;
    right: 20px;
  }
}

.project-details .project-info {
  padding-left: 40px;
}

.project-details .project-info .project-meta {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
}

.project-details .project-info .project-meta span {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  font-size: 14px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.project-details .project-info .project-title {
  font-size: 2.5rem;
  font-weight: 300;
  line-height: 1.3;
  margin-bottom: 24px;
  color: var(--heading-color);
}

.project-details .project-info .project-description {
  font-size: 16px;
  line-height: 1.7;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  margin-bottom: 40px;
}

.project-details .project-info .project-details .detail-item {
  display: flex;
  justify-content: space-between;
  padding: 16px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.project-details .project-info .project-details .detail-item:last-child {
  border-bottom: none;
}

.project-details .project-info .project-details .detail-item .label {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  font-weight: 500;
}

.project-details .project-info .project-details .detail-item .value {
  color: var(--heading-color);
  font-weight: 600;
}

@media (max-width: 992px) {
  .project-details .project-info {
    padding-left: 0;
    margin-top: 40px;
  }
}

@media (max-width: 768px) {
  .project-details .project-info .project-title {
    font-size: 2rem;
  }
}

.project-details .project-gallery {
  margin: 80px 0;
}

.project-details .project-gallery .gallery-item {
  border-radius: 8px;
  overflow: hidden;
  height: 100%;
  transition: all 0.4s ease;
}

.project-details .project-gallery .gallery-item:hover {
  transform: translateY(-5px);
}

.project-details .project-gallery .gallery-item img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  transition: all 0.4s ease;
}

@media (max-width: 768px) {
  .project-details .project-gallery .gallery-item {
    margin-bottom: 20px;
  }

  .project-details .project-gallery .gallery-item img {
    height: 250px;
  }
}

.project-details .project-content {
  margin: 80px 0;
}

.project-details .project-content .content-section {
  margin-bottom: 60px;
}

.project-details .project-content .content-section:last-child {
  margin-bottom: 0;
}

.project-details .project-content .content-section h3 {
  font-size: 1.8rem;
  font-weight: 300;
  margin-bottom: 24px;
  color: var(--heading-color);
}

.project-details .project-content .content-section p {
  font-size: 16px;
  line-height: 1.8;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  margin-bottom: 20px;
}

.project-details .project-content .solution-points {
  margin-top: 40px;
}

.project-details .project-content .solution-points .point-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 30px;
}

.project-details .project-content .solution-points .point-item:last-child {
  margin-bottom: 0;
}

.project-details .project-content .solution-points .point-item .point-icon {
  margin-right: 20px;
  margin-top: 5px;
}

.project-details .project-content .solution-points .point-item .point-icon i {
  color: var(--accent-color);
  font-size: 20px;
}

.project-details .project-content .solution-points .point-item .point-content h5 {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--heading-color);
}

.project-details .project-content .solution-points .point-item .point-content p {
  margin-bottom: 0;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
}

@media (max-width: 768px) {
  .project-details .project-content {
    margin: 60px 0;
  }
}

.project-details .project-specs {
  background-color: var(--surface-color);
  padding: 60px 40px;
  border-radius: 12px;
  margin-top: 80px;
}

.project-details .project-specs .specs-content h3 {
  font-size: 1.8rem;
  font-weight: 300;
  margin-bottom: 40px;
  color: var(--heading-color);
}

.project-details .project-specs .specs-content .specs-grid .spec-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 0;
  border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.project-details .project-specs .specs-content .specs-grid .spec-item:last-child {
  border-bottom: none;
}

.project-details .project-specs .specs-content .specs-grid .spec-item .spec-label {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  font-weight: 500;
}

.project-details .project-specs .specs-content .specs-grid .spec-item .spec-value {
  color: var(--heading-color);
  font-weight: 600;
}

.project-details .project-specs .specs-visual {
  padding-left: 40px;
}

.project-details .project-specs .specs-visual img {
  width: 100%;
  border-radius: 8px;
}

@media (max-width: 992px) {
  .project-details .project-specs .specs-visual {
    padding-left: 0;
    margin-top: 40px;
  }
}

@media (max-width: 768px) {
  .project-details .project-specs {
    padding: 40px 20px;
    margin-top: 60px;
  }
}

/*--------------------------------------------------------------
# Quote Section
--------------------------------------------------------------*/
.quote .quote-container {
  max-width: 1200px;
  margin: 0 auto;
}

.quote .quote-content {
  padding: 60px 0;
}

@media (max-width: 992px) {
  .quote .quote-content {
    padding: 40px 20px 60px;
    text-align: center;
  }
}

.quote .quote-content h2 {
  font-size: 42px;
  font-weight: 300;
  line-height: 1.2;
  margin-bottom: 24px;
  color: var(--heading-color);
}

@media (max-width: 768px) {
  .quote .quote-content h2 {
    font-size: 32px;
  }
}

.quote .quote-content>p {
  font-size: 18px;
  line-height: 1.7;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  margin-bottom: 50px;
}

.quote .quote-benefits {
  margin-bottom: 50px;
}

.quote .benefit-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 32px;
}

.quote .benefit-item:last-child {
  margin-bottom: 0;
}

@media (max-width: 992px) {
  .quote .benefit-item {
    justify-content: center;
    text-align: left;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
  }
}

.quote .benefit-item .benefit-icon {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20px;
  flex-shrink: 0;
  margin-top: 4px;
}

.quote .benefit-item .benefit-icon i {
  font-size: 24px;
  color: var(--accent-color);
}

.quote .benefit-item .benefit-content h4 {
  font-size: 18px;
  font-weight: 400;
  margin-bottom: 8px;
  color: var(--heading-color);
}

.quote .benefit-item .benefit-content p {
  font-size: 15px;
  line-height: 1.6;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  margin: 0;
}

.quote .contact-info {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

@media (max-width: 992px) {
  .quote .contact-info {
    align-items: center;
  }
}

.quote .contact-info .contact-detail {
  display: flex;
  align-items: center;
  font-size: 15px;
  color: color-mix(in srgb, var(--default-color), transparent 15%);
}

.quote .contact-info .contact-detail i {
  font-size: 16px;
  color: var(--accent-color);
  margin-right: 12px;
}

.quote .quote-form {
  background: var(--surface-color);
  padding: 60px 50px;
  margin-left: 40px;
  border-radius: 4px;
  box-shadow: 0 20px 60px color-mix(in srgb, var(--default-color), transparent 94%);
}

@media (max-width: 992px) {
  .quote .quote-form {
    margin-left: 0;
    margin-top: 40px;
    padding: 40px 30px;
  }
}

@media (max-width: 576px) {
  .quote .quote-form {
    padding: 30px 20px;
  }
}

.quote .quote-form .form-intro {
  margin-bottom: 40px;
}

.quote .quote-form .form-intro h3 {
  font-size: 28px;
  font-weight: 300;
  margin-bottom: 12px;
  color: var(--heading-color);
}

.quote .quote-form .form-intro p {
  font-size: 15px;
  line-height: 1.6;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  margin: 0;
}

.quote .php-email-form .form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 24px;
}

@media (max-width: 768px) {
  .quote .php-email-form .form-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

.quote .php-email-form .form-field.full-width {
  grid-column: 1/-1;
}

.quote .php-email-form .form-field label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--heading-color);
  margin-bottom: 8px;
}

.quote .php-email-form input[type=text],
.quote .php-email-form input[type=email],
.quote .php-email-form input[type=tel],
.quote .php-email-form select,
.quote .php-email-form textarea {
  width: 100%;
  padding: 16px 20px;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 85%);
  border-radius: 4px;
  font-size: 15px;
  line-height: 1.5;
  transition: all 0.3s ease;
  color: var(--default-color);
  background-color: var(--surface-color);
}

.quote .php-email-form input[type=text]:focus,
.quote .php-email-form input[type=email]:focus,
.quote .php-email-form input[type=tel]:focus,
.quote .php-email-form select:focus,
.quote .php-email-form textarea:focus {
  outline: none;
  border-color: var(--accent-color);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color), transparent 88%);
}

.quote .php-email-form input[type=text]::placeholder,
.quote .php-email-form input[type=email]::placeholder,
.quote .php-email-form input[type=tel]::placeholder,
.quote .php-email-form select::placeholder,
.quote .php-email-form textarea::placeholder {
  color: color-mix(in srgb, var(--default-color), transparent 55%);
}

.quote .php-email-form select {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 20px center;
  background-size: 16px;
  padding-right: 50px;
  appearance: none;
}

.quote .php-email-form textarea {
  resize: vertical;
  min-height: 120px;
  font-family: var(--default-font);
}

.quote .php-email-form .submit-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: var(--accent-color);
  color: var(--contrast-color);
  padding: 18px 32px;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: 20px;
}

.quote .php-email-form .submit-btn:hover {
  background: color-mix(in srgb, var(--accent-color), #000 8%);
  transform: translateY(-1px);
}

.quote .php-email-form .submit-btn:hover i {
  transform: translateX(4px);
}

.quote .php-email-form .submit-btn i {
  font-size: 16px;
  transition: transform 0.3s ease;
}

/*--------------------------------------------------------------
# Contact Section
--------------------------------------------------------------*/
.contact .contact-main-wrapper {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
}

@media (min-width: 992px) {
  .contact .contact-main-wrapper {
    grid-template-columns: 45% 55%;
    min-height: 600px;
  }
}

.contact .map-wrapper {
  height: 300px;
  width: 100%;
  border-radius: 16px;
  overflow: hidden;
}

@media (min-width: 992px) {
  .contact .map-wrapper {
    height: 100%;
    position: sticky;
    top: 100px;
  }
}

.contact .contact-content {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.contact .contact-cards-container {
  display: grid;
  grid-template-columns: 1fr;
  gap: 15px;
}

@media (min-width: 576px) {
  .contact .contact-cards-container {
    grid-template-columns: repeat(2, 1fr);
  }
}

.contact .contact-card {
  background-color: var(--surface-color);
  padding: 20px;
  border-radius: 12px;
  display: flex;
  align-items: flex-start;
  gap: 15px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.04);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.contact .contact-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.contact .contact-card .icon-box {
  width: 50px;
  height: 50px;
  flex-shrink: 0;
  background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.contact .contact-card .icon-box i {
  font-size: 22px;
  color: var(--accent-color);
}

.contact .contact-card .contact-text h4 {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 8px;
  color: var(--heading-color);
}

.contact .contact-card .contact-text p {
  font-size: 14px;
  line-height: 1.5;
  color: var(--default-color);
  margin-bottom: 0;
}

.contact .contact-form-container {
  background-color: var(--surface-color);
  padding: 30px;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.contact .contact-form-container h3 {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 15px;
  color: var(--heading-color);
  position: relative;
  padding-left: 15px;
}

.contact .contact-form-container h3:before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 4px;
  background-color: var(--accent-color);
  border-radius: 2px;
}

.contact .contact-form-container>p {
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 25px;
  color: var(--default-color);
}

.contact .contact-form-container .php-email-form .form-control {
  height: auto;
  padding: 14px 20px;
  border-radius: 10px;
  background-color: color-mix(in srgb, var(--background-color), #f5f8fd 30%);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  color: var(--default-color);
  transition: all 0.3s ease;
}

.contact .contact-form-container .php-email-form .form-control:focus {
  background-color: var(--surface-color);
  border-color: var(--accent-color);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent-color), transparent 85%);
}

.contact .contact-form-container .php-email-form .form-control::placeholder {
  color: color-mix(in srgb, var(--default-color), transparent 60%);
}

.contact .contact-form-container .php-email-form textarea.form-control {
  min-height: 140px;
}

.contact .contact-form-container .php-email-form .form-submit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 10px;
}

@media (max-width: 576px) {
  .contact .contact-form-container .php-email-form .form-submit {
    flex-direction: column;
    align-items: flex-start;
  }
}

.contact .contact-form-container .php-email-form button {
  background-color: var(--accent-color);
  color: var(--contrast-color);
  border: none;
  padding: 12px 28px;
  border-radius: 50px;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.5px;
  transition: all 0.3s ease;
}

.contact .contact-form-container .php-email-form button:hover {
  background-color: color-mix(in srgb, var(--accent-color), #000 15%);
  transform: translateY(-2px);
  box-shadow: 0 6px 15px color-mix(in srgb, var(--accent-color), transparent 75%);
}

.contact .contact-form-container .php-email-form .social-links {
  display: flex;
  gap: 12px;
}

.contact .contact-form-container .php-email-form .social-links a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background-color: color-mix(in srgb, var(--background-color), #f5f8fd 20%);
  color: var(--heading-color);
  font-size: 16px;
  transition: all 0.3s ease;
}

.contact .contact-form-container .php-email-form .social-links a:hover {
  background-color: var(--accent-color);
  color: var(--contrast-color);
  transform: translateY(-3px);
}

@media (max-width: 768px) {
  .contact .contact-form-container {
    padding: 25px 20px;
  }

  .contact .contact-form-container h3 {
    font-size: 22px;
  }
}

/*--------------------------------------------------------------
# Terms Of Service Section
--------------------------------------------------------------*/
.terms-of-service .tos-header {
  margin-bottom: 60px;
}

.terms-of-service .tos-header .last-updated {
  display: inline-block;
  padding: 8px 20px;
  background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
  border-radius: 30px;
  color: var(--accent-color);
  font-size: 0.95rem;
  margin-bottom: 20px;
}

.terms-of-service .tos-header h2 {
  font-size: 2.5rem;
  margin-bottom: 15px;
}

.terms-of-service .tos-header p {
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  font-size: 1.1rem;
  max-width: 700px;
  margin: 0 auto;
}

.terms-of-service .tos-content .content-section {
  margin-bottom: 50px;
  scroll-margin-top: 100px;
}

.terms-of-service .tos-content .content-section:last-child {
  margin-bottom: 0;
}

.terms-of-service .tos-content .content-section h3 {
  font-size: 1.8rem;
  margin-bottom: 20px;
  color: var(--heading-color);
}

.terms-of-service .tos-content .content-section p {
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  line-height: 1.7;
  margin-bottom: 20px;
}

.terms-of-service .tos-content .content-section p:last-child {
  margin-bottom: 0;
}

.terms-of-service .tos-content .content-section .info-box {
  display: flex;
  align-items: flex-start;
  gap: 15px;
  padding: 20px;
  background-color: color-mix(in srgb, var(--accent-color), transparent 95%);
  border-radius: 15px;
  margin-top: 20px;
}

.terms-of-service .tos-content .content-section .info-box i {
  font-size: 1.5rem;
  color: var(--accent-color);
  flex-shrink: 0;
}

.terms-of-service .tos-content .content-section .info-box p {
  margin: 0;
  font-size: 0.95rem;
}

.terms-of-service .tos-content .content-section .list-items {
  list-style: none;
  padding: 0;
  margin: 20px 0;
}

.terms-of-service .tos-content .content-section .list-items li {
  position: relative;
  padding-left: 25px;
  margin-bottom: 12px;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.terms-of-service .tos-content .content-section .list-items li:last-child {
  margin-bottom: 0;
}

.terms-of-service .tos-content .content-section .list-items li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--accent-color);
}

.terms-of-service .tos-content .content-section .alert-box {
  display: flex;
  gap: 20px;
  padding: 25px;
  background-color: var(--surface-color);
  border-radius: 15px;
  border-left: 4px solid var(--accent-color);
  margin-top: 20px;
}

.terms-of-service .tos-content .content-section .alert-box i {
  font-size: 2rem;
  color: var(--accent-color);
  flex-shrink: 0;
}

.terms-of-service .tos-content .content-section .alert-box .alert-content h5 {
  font-size: 1.1rem;
  margin-bottom: 8px;
}

.terms-of-service .tos-content .content-section .alert-box .alert-content p {
  margin: 0;
  font-size: 0.95rem;
}

.terms-of-service .tos-content .content-section .prohibited-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 20px;
}

@media (max-width: 576px) {
  .terms-of-service .tos-content .content-section .prohibited-list {
    grid-template-columns: 1fr;
  }
}

.terms-of-service .tos-content .content-section .prohibited-list .prohibited-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px;
  background-color: var(--surface-color);
  border-radius: 12px;
}

.terms-of-service .tos-content .content-section .prohibited-list .prohibited-item i {
  color: #dc3545;
  font-size: 1.2rem;
}

.terms-of-service .tos-content .content-section .prohibited-list .prohibited-item span {
  font-size: 0.95rem;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.terms-of-service .tos-content .content-section .disclaimer-box {
  background-color: var(--surface-color);
  padding: 25px;
  border-radius: 15px;
  margin-top: 20px;
}

.terms-of-service .tos-content .content-section .disclaimer-box p {
  margin-bottom: 15px;
  font-weight: 500;
}

.terms-of-service .tos-content .content-section .disclaimer-box ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.terms-of-service .tos-content .content-section .disclaimer-box ul li {
  position: relative;
  padding-left: 25px;
  margin-bottom: 12px;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  font-size: 0.95rem;
}

.terms-of-service .tos-content .content-section .disclaimer-box ul li:last-child {
  margin-bottom: 0;
}

.terms-of-service .tos-content .content-section .disclaimer-box ul li::before {
  content: "•";
  position: absolute;
  left: 8px;
  color: var(--accent-color);
}

.terms-of-service .tos-content .content-section .notice-box {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 20px;
  background-color: color-mix(in srgb, var(--accent-color), transparent 95%);
  border-radius: 15px;
  margin-top: 20px;
}

.terms-of-service .tos-content .content-section .notice-box i {
  font-size: 1.5rem;
  color: var(--accent-color);
  flex-shrink: 0;
}

.terms-of-service .tos-content .content-section .notice-box p {
  margin: 0;
  font-size: 0.95rem;
}

.terms-of-service .tos-contact {
  margin-top: 60px;
}

.terms-of-service .tos-contact .contact-box {
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent-color), transparent 95%) 0%, color-mix(in srgb, var(--accent-color), transparent 98%) 100%);
  border-radius: 20px;
  padding: 40px;
  display: flex;
  align-items: center;
  gap: 30px;
}

@media (max-width: 576px) {
  .terms-of-service .tos-contact .contact-box {
    flex-direction: column;
    text-align: center;
  }
}

.terms-of-service .tos-contact .contact-box .contact-icon {
  width: 60px;
  height: 60px;
  background-color: var(--accent-color);
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.terms-of-service .tos-contact .contact-box .contact-icon i {
  font-size: 1.8rem;
  color: var(--contrast-color);
}

.terms-of-service .tos-contact .contact-box .contact-content {
  flex: 1;
}

.terms-of-service .tos-contact .contact-box .contact-content h4 {
  font-size: 1.4rem;
  margin-bottom: 8px;
}

.terms-of-service .tos-contact .contact-box .contact-content p {
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  margin-bottom: 15px;
}

.terms-of-service .tos-contact .contact-box .contact-content .contact-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 25px;
  background-color: var(--accent-color);
  color: var(--contrast-color);
  border-radius: 30px;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s;
}

.terms-of-service .tos-contact .contact-box .contact-content .contact-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

@media print {
  .terms-of-service .tos-contact {
    display: none;
  }

  .terms-of-service .content-section {
    page-break-inside: avoid;
  }
}

/*--------------------------------------------------------------
# Privacy Section
--------------------------------------------------------------*/
.privacy {
  font-size: 1rem;
  line-height: 1.7;
}

.privacy .privacy-header {
  margin-bottom: 60px;
  text-align: center;
  border-bottom: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
  padding-bottom: 40px;
}

.privacy .privacy-header .header-content {
  max-width: 800px;
  margin: 0 auto;
}

.privacy .privacy-header .header-content .last-updated {
  font-size: 0.95rem;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  margin-bottom: 20px;
}

.privacy .privacy-header .header-content h1 {
  font-size: 2.8rem;
  color: var(--heading-color);
  margin-bottom: 20px;
  font-weight: 600;
}

.privacy .privacy-header .header-content .intro-text {
  font-size: 1.2rem;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  line-height: 1.6;
}

.privacy .privacy-content {
  margin: 0 auto 60px;
}

.privacy .privacy-content .content-section {
  margin-bottom: 50px;
}

.privacy .privacy-content .content-section:last-child {
  margin-bottom: 0;
}

.privacy .privacy-content .content-section h2 {
  font-size: 1.8rem;
  color: var(--heading-color);
  margin-bottom: 25px;
  font-weight: 600;
}

.privacy .privacy-content .content-section h3 {
  font-size: 1.4rem;
  color: var(--heading-color);
  margin: 30px 0 20px;
  font-weight: 500;
}

.privacy .privacy-content .content-section p {
  margin-bottom: 20px;
}

.privacy .privacy-content .content-section p:last-child {
  margin-bottom: 0;
}

.privacy .privacy-content .content-section ul {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
}

.privacy .privacy-content .content-section ul li {
  position: relative;
  padding-left: 25px;
  margin-bottom: 12px;
}

.privacy .privacy-content .content-section ul li:last-child {
  margin-bottom: 0;
}

.privacy .privacy-content .content-section ul li::before {
  content: "•";
  position: absolute;
  left: 8px;
  color: var(--accent-color);
}

.privacy .privacy-contact {
  max-width: 800px;
  margin: 0 auto;
  padding-top: 40px;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.privacy .privacy-contact h2 {
  font-size: 1.8rem;
  color: var(--heading-color);
  margin-bottom: 20px;
  font-weight: 600;
}

.privacy .privacy-contact p {
  margin-bottom: 20px;
}

.privacy .privacy-contact .contact-details {
  background-color: var(--surface-color);
  padding: 25px;
  border-radius: 10px;
}

.privacy .privacy-contact .contact-details p {
  margin-bottom: 10px;
}

.privacy .privacy-contact .contact-details p:last-child {
  margin-bottom: 0;
}

.privacy .privacy-contact .contact-details p strong {
  color: var(--heading-color);
  font-weight: 600;
}

@media print {
  .privacy {
    font-size: 12pt;
    line-height: 1.5;
  }

  .privacy .privacy-header {
    text-align: left;
    border-bottom: 1pt solid #000;
    padding-bottom: 20pt;
    margin-bottom: 30pt;
  }

  .privacy h1 {
    font-size: 24pt;
  }

  .privacy h2 {
    font-size: 18pt;
    page-break-after: avoid;
  }

  .privacy h3 {
    font-size: 14pt;
    page-break-after: avoid;
  }

  .privacy p,
  .privacy ul {
    page-break-inside: avoid;
  }

  .privacy .contact-details {
    border: 1pt solid #000;
    padding: 15pt;
  }
}

@media (max-width: 767px) {
  .privacy .privacy-header {
    margin-bottom: 40px;
    padding-bottom: 30px;
  }

  .privacy .privacy-header .header-content h1 {
    font-size: 2.2rem;
  }

  .privacy .privacy-header .header-content .intro-text {
    font-size: 1.1rem;
  }

  .privacy .privacy-content .content-section {
    margin-bottom: 40px;
  }

  .privacy .privacy-content .content-section h2 {
    font-size: 1.6rem;
  }

  .privacy .privacy-content .content-section h3 {
    font-size: 1.3rem;
  }
}

/*--------------------------------------------------------------
# Error 404 Section
--------------------------------------------------------------*/
.error-404 {
  padding: 120px 0;
  min-height: 100vh;
  display: flex;
  align-items: center;
  background: linear-gradient(135deg, var(--surface-color) 0%, color-mix(in srgb, var(--accent-color), transparent 97%) 100%);
}

.error-404 .error-number {
  font-size: clamp(120px, 20vw, 280px);
  font-weight: 300;
  color: color-mix(in srgb, var(--heading-color), transparent 15%);
  line-height: 0.8;
  margin-bottom: 40px;
  font-family: var(--heading-font);
  letter-spacing: -0.02em;
}

.error-404 .error-title {
  font-size: clamp(32px, 5vw, 48px);
  font-weight: 300;
  color: var(--heading-color);
  margin-bottom: 32px;
  letter-spacing: -0.01em;
}

.error-404 .error-description {
  font-size: 18px;
  line-height: 1.7;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  margin-bottom: 48px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.error-404 .error-actions {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  margin-bottom: 80px;
}

@media (min-width: 576px) {
  .error-404 .error-actions {
    flex-direction: row;
    justify-content: center;
    gap: 24px;
  }
}

.error-404 .error-actions .btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 32px;
  background-color: var(--accent-color);
  color: var(--contrast-color);
  border-radius: 8px;
  text-decoration: none;
  font-weight: 400;
  font-size: 16px;
  transition: all 0.3s ease;
  border: 2px solid var(--accent-color);
}

.error-404 .error-actions .btn-primary:hover {
  background-color: transparent;
  color: var(--accent-color);
  transform: translateY(-2px);
}

.error-404 .error-actions .btn-primary i {
  font-size: 18px;
}

.error-404 .error-actions .btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 16px 32px;
  background-color: transparent;
  color: var(--heading-color);
  border-radius: 8px;
  text-decoration: none;
  font-weight: 400;
  font-size: 16px;
  transition: all 0.3s ease;
  border: 2px solid color-mix(in srgb, var(--default-color), transparent 80%);
}

.error-404 .error-actions .btn-secondary:hover {
  border-color: var(--accent-color);
  color: var(--accent-color);
  transform: translateY(-2px);
}

.error-404 .error-actions .btn-secondary i {
  font-size: 18px;
}

.error-404 .helpful-links {
  text-align: center;
}

.error-404 .helpful-links h3 {
  font-size: 24px;
  font-weight: 300;
  color: var(--heading-color);
  margin-bottom: 40px;
}

.error-404 .helpful-links .links-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  max-width: 800px;
  margin: 0 auto;
}

@media (min-width: 768px) {
  .error-404 .helpful-links .links-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.error-404 .helpful-links .link-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 32px 20px;
  background-color: var(--surface-color);
  border-radius: 8px;
  text-decoration: none;
  color: var(--default-color);
  transition: all 0.3s ease;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.error-404 .helpful-links .link-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 30px color-mix(in srgb, var(--default-color), transparent 90%);
  color: var(--accent-color);
  border-color: color-mix(in srgb, var(--accent-color), transparent 70%);
}

.error-404 .helpful-links .link-item i {
  font-size: 24px;
  color: var(--accent-color);
  transition: all 0.3s ease;
}

.error-404 .helpful-links .link-item span {
  font-size: 16px;
  font-weight: 400;
}

.error-404 .helpful-links .link-item:hover i {
  transform: scale(1.1);
}

@media (max-width: 768px) {
  .error-404 {
    padding: 80px 0;
  }

  .error-404 .error-actions {
    margin-bottom: 60px;
  }

  .error-404 .helpful-links .links-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 576px) {
  .error-404 .helpful-links .links-grid {
    grid-template-columns: 1fr;
  }
}

/*--------------------------------------------------------------
# Starter Section Section
--------------------------------------------------------------*/
.starter-section {
  /* Add your styles here */
}