/*
Theme Name: Experon Dark
Template: experon
*/

/* UPDATED VERSION */

/* Fixes by Calum 04-03-26 */

#main {
    padding: 0 !important;
}

.btn-navbar .icon-bar {
    background-color: white !important;
}

@media only screen and (max-width: 768px) {
    #header-core {
        display: table !important;
    }

    #logo img {
        max-height: 45px !important;
    }

    #header-responsive {
        display: block !important;
    }
}

@media only screen and (max-width: 685px) {
    #main {
        width: auto !important;
    }
}

/* My Global Styles */
html {
    font-size: 16px !important;
}

body {
    font-size: 1rem !important;
}

.entry-content p,
.entry-content ul,
.entry-content ol,
.entry-content li {
    font-size: 1em;
}

#sub-footer-core .copyright {
    display: none !important;
}

/* h1 { 
	font-weight:700 !important;
	font-size: 1.4em !important;
	font-style: italic;
	margin: 0.2em 0 0 0 !important;
	line-height:1.25;
	color:#2c2c2c !important;
}*/

@media (max-width: 460px) {
    h1,
    h1 span {
        /* make h1 size smaller in mobile viewport  */
        font-size: 1.4rem !important;
        font-weight: bold !important;
        line-height: 1.15 !important;
    }

    h2,
    h2 span {
        /* make h2 size smaller in mobile viewport  */
        font-size: 1.2rem !important;
        font-weight: bold !important;
        line-height: 1.15 !important;
    }

    h3,
    h3 span {
        /* make h3 size smaller in mobile viewport  */
        font-size: 0.9rem !important;
        font-weight: bold !important;
        line-height: 1.15 !important;
    }
}

/* MAIN MENU */
/* ===== Main Dropdown Styling ===== */

/* Make parent the positioning reference */
#header #header-links-inner ul.menu > li {
    position: relative;
	}
#header #header-links-inner ul.menu > li > a {
    color: #DF861D !important;
}


/* Dropdown panel */
#header #header-links-inner ul.menu > li > ul.sub-menu {
    top: 100%;
    right: 0;
    left: auto;
    transform: none;
    background: #df871d;
    border: 1px solid #c67616;
    border-top: none;
}

/* Dropdown links */
#header #header-links-inner ul.menu > li > ul.sub-menu > li > a {
    background: transparent;
	text-align:right;
    color: #ffffff !important;
    transition:
        background 0.2s ease,
        color 0.2s ease;
}

/* Hover state */
#header #header-links-inner ul.menu > li > ul.sub-menu > li > a:hover {
    _background: #DF1DD7;
    color: #000 !important;
}
#header .sub-menu li {
    padding: 0 5px !important;
}
/* Hamburger Menu Styling 
@media only screen and (max-width: 768px) {
    #header #header-links-inner ul.menu > li > a {
    color: #DF861D !important;
}
}*/
@media only screen and (max-width: 768px) {

    #header #header-links-inner ul.menu > li > a {
        color: #DF861D !important;
    }

    #header #header-links-inner ul.menu > li > ul.sub-menu > li > a,
    #header #header-links-inner ul.menu > li > ul.sub-menu > li > a:visited {
        color: #ffffff !important;
    }

}  /* END MAIN MENU */

#intro {
    background: #fefefe !important;
}

#section-home {
    padding: 5px 0 !important;
}

#content {    /* light dotted top area background  */
    margin-bottom: 32px;
    padding: 0 16px;
    background:
        linear-gradient(rgba(255, 255, 255, 0), #fff 300px),
        radial-gradient(#ccc 1px, transparent 0) 0 0/10px 10px fixed,
        radial-gradient(#ccc 1px, transparent 0) 5px 5px/10px 10px fixed;
}

#content-core {
    max-width: 900px !important;
}

#articles-template {
	max-width: 700px;
	margin: 0 auto 0 auto;
	_border:1px solid #df1dd7;
	}
#narrow-template {
	max-width: 600px;
	margin: 0 auto 0 auto;
	_border:1px solid #df1dd7;
	}
.service-feature {
    width: 100%;
    padding: 15px;
    border: 2px solid #000;
    border-radius: 8px;
    box-sizing: border-box;
}
.sfa {
    width: 100%;
	background-color: #c2dbf7;
    padding: 15px;
    border: 1px solid #000;
    border-radius: 8px;
    box-sizing: border-box;
	cursor: pointer; /* Makes it feel more like a button */
	
}
.sfa:hover {
   background-color: #a9ccf4; /* coloured background on hover */
  _transform: translateY(-2px); /* Small lift effect on hover */
}
.sfa h2 {margin:0;}
.sfa p {margin:0;}




/* HOMEPAGE FANCY SERVICE BOXES */
/* Note - code to activate awesome fons added to functions.php*/
#offered-services {margin-bottom:15px;}

.service-item,
.service-item:link,
.service-item:visited {
    text-decoration: none !important;
}

.services-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
   gap: 10px;
   _text-align: center;
   padding: 10px 0;
}

.service-line {
   padding: 20px;
   border-radius: 5px;
   background-color: #f9f9f9;
   transition: background-color 0.3s ease, transform 0.3s ease;
   cursor: pointer; /* Makes it feel more like a button */
}

.service-item {
   font-size:0.9rem;
   padding: 15px;
   border-radius: 5px;
   background-color: #1e1e1e; /* #d9d9d9;*/
   _border: 1px solid #df861d;
   transition: background-color 0.3s ease, transform 0.3s ease;
   cursor: pointer; /* Makes it feel more like a button */
   box-shadow: 0 3px 5px rgba(0, 0, 0, 0.5);
}

.service-item:hover {
   background-color: #3d3d3d; /* #c2dbf7 coloured background on hover */
   _border: 2px solid #fff;
   transform: translateY(-2px); /* Small lift effect on hover */
}

.service-item i {
   font-size: 2em; /* Icon size */
   color: #1ddf25; /*  #df861d Icon color */
   margin: 0 15px 50px 0;
   float:left; _border:1px solid red;
}
.item-title {
	color: #1ddf25 !important; font-weight:bold; margin:0;
} 
.text-item {
	color:#df861d; /* #1c75df; */
	margin-bottom:0 !important;
}
/* --END-- HOMEPAGE FANCY SERVICE BOXES */

/* -- FANCY BUTTONS to replace boring text links*/
.btn-a {/* contact */
	width:50%; margin: 15px auto 15px auto; padding: 3px 0 3px 0;
	_border: 1px solid #000;
	border-radius: 5px;
	background: linear-gradient(to top, #343434, #909090);
	transition: background-color 0.3s ease, transform 0.3s ease;
    cursor: pointer; 
	text-align: center;
	color: #fff; /* text color */
	
}
.btn-a:hover {
	background: linear-gradient(to top, #1ddf25, #b6b6b6);
}

	
@media (max-width: 767px) {
    /* this removes the header gap in mobile view */
    body {
        padding-left: 0px !important;
        padding-right: 0px !important;
    }
}

.error-page {
    max-width: 450px;
    margin: 0 auto;
    _border: 1px solid red;
    display: flex;
    gap: 20px;
    _align-items: flex-start;
	display: flex;
    flex-direction: column;
}

.error-page img {
    width: 300px;
    height: 389px;
	margin:0 auto 0 auto;
    flex-shrink: 0;
}
.searchform {
	margin: 0 auto 0 auto;
}


/* */

/* Footer menu hang to left*/
#footer-menu ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    text-align: left !important;
}
#footer-menu ul li {
    display: block !important;
    margin-bottom: 5px !important;
}

/* WP FORMS */
.wpforms-container {
    max-width: 600px;
    margin: 0 auto !important; /* centralize the table*/
}
.wpforms-field-container {
    margin: 0 auto !important; /* centralize the form */
    background-color: #e1e1e1 !important;
    padding: 30px !important;
    border-radius: 8px !important;
    border: 3px solid #df861c !important;
}
.wpforms-field-medium {
    max-width: 100% !important;
    background-color: #fff !important;
    color: #000 !important;
}
.wpforms-field-label {
    color: #000 !important;
}
.rc-anchor-container {
    margin: 20px !important;
}
.-wpforms-container-full textarea {
    width: 70% !important;
}

#section-home-inner {
    display: none !important;
}
#section-home {
    padding-top: 0px !important;
    margin-bottom: 0px !important;
}