@charset "utf-8";

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

@font-face {
    font-family: 'audiowideregular';
    src: url('audiowide-regular-webfont.woff2') format('woff2'),
         url('audiowide-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

/* ============ Main Styles ============ */

html, body { height: 100%; margin: 0; font-family:audiowideregular,Arial; color:#fff;}

body { min-height: 100vh;}

p{ font-family:Arial !important; }

details{border:none;}
details > summary {background-color: #000; color:#fff; border: none;  cursor: pointer;  border-bottom:2px solid #00ab45; padding:10px; transition: 0.2s background linear; font-size:0.9rem; font-family:Arial; font-weight:bold;}
details > p { color:#000; padding: 1rem 1.25rem; margin: 0;  background-color: #fff;}
details > summary:hover {background: #02dd5b; color:#000; }
summary::marker { color: #ddff35;}
summary::-webkit-details-marker {color:#ddff35;}

details > summary:hover::marker{color: #000;}


.shadow{ transition: 0.2s box-shadow linear; }
.shadow:hover{ box-shadow: 0 .5rem 1rem rgba(0,0,0,0)!important }

.page-content h1{font-size:1.8rem; color:#ddff35;}
.page-content h2{font-size:1.3rem; color:#ddff35;}
.page-content h3{font-size:1.3rem; color:#ddff35;}
.page-content h4{font-size:1.3rem; color:#ddff35;}
.page-content h5{font-size:1.3rem; color:#ddff35;}


.page-content p{font-size:0.9rem; font-family:Arial;}
.page-content ul{font-size:0.9rem; font-family:Arial;}

.page-content a{color:#ddff35;}
.page-content a:active{color:#ddff35;}
.page-content a:visited{color:#ddff35;}
.page-content a:hover{color:#ddff35;}


.page-content .service-block{background:#02dd5b; padding:15px; border-radius: 10px; color:#000; border:2px solid #fff; }

.page-content .service-block h2{color:#000;}



.blog-card{ position:relative;}
.blog-card { border: solid 1px #02dd5b; border-radius: 10px; padding: 18px 20px 30px 20px;}
.blog-card img{ border-radius: 10px; margin-top:20px; margin-bottom:20px; width:100%; display:block; height:auto;}
.blog-card .label{color:#adadad; font-size:0.8rem; font-weight:bold;}
.blog-card h4{color:#000; font-size:1.2rem;}
.blog-card p{color:#000; font-size:0.9rem;}
.blog-card a.link{color:#000; font-size:0.8rem;   text-decoration: underline;}
.blog-card a.link:visited{color:#000; font-size:0.8rem;}
.blog-card a.link:hover{color:#000; font-size:0.8rem;}
.blog-card hr{ height:2px; background:#adadad;}
.blog-card .badge{ position: relative; top: 0em; background:#02dd5b; }

.blog-post{margin-top:60px; margin-bottom:40px; text-align:center; color:#000;}
.blog-post h1{font-size:2rem;}
.blog-post .hero{width:100%; display:block; height:auto; border-radius: 10px; max-width:60%; margin-left:auto; margin-right:auto; margin-top:20px; margin-bottom:20px;}
.blog-post .label{color:#adadad; font-size:0.8rem; font-weight:bold; font-family:Arial;}

.blog-post a{color:#02dd5b;}
.blog-post a:active{color:#02dd5b;}
.blog-post a:visited{color:#02dd5b;}
.blog-post a:hover{color:#02dd5b;}


@media (max-width: 700px) {
.blog-post .hero{max-width:100%;}
}

/* ============ card margin fix on small screen ============ */

@media (max-width: 700px) {
.column:has(.card) {
margin-bottom:60px;
}
}

.card-body{ border-bottom: 6px solid #9ddc6a; } 

.custom-card { background-color: rgba(17, 17, 17, 0.85); border: 2px solid #ddff35; border-radius: 1rem; padding: 2rem; color: white; position: relative; max-width: 400px; overflow: hidden;}
.custom-card .label { color: #02dd5b; font-size: 1rem; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 1rem;}
.custom-card .title {font-size: 1.5rem; line-height: 1.4; font-weight: 600;}
.custom-card .gradient-shape {position: absolute; bottom: 0; right: 0; width: 140px; height: 140px; background: linear-gradient(135deg, #00f6ff, #6a52ff); opacity: 0.3; border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%; transform: rotate(45deg);}
.custom-card .btn-outline-light:hover {color:#000;}

.box { position: relative; z-index: 0; background: repeating-conic-gradient(from var(--a), #0f0,#ff0); animation: rotating 4s linear infinite; padding:5px;  border-radius: 16px;}

@media (max-width: 700px) {
.column:has(.box) {
margin-bottom:30px;
margin-top:30px;
}
.row{margin-top:40px;}
}

.box .label { color: #02dd5b; font-size: 1rem; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 1rem;}

.box .label a { color: #02dd5b; }
.box .label a:active { color: #02dd5b; }
.box .label a:visited { color: #02dd5b; }
.box .label a:hover { color: #02dd5b; }


/* Styling for the text inside the nested box */
.box .boxinner {
    color: white;
    background: #222;
    z-index: 1;
    border-radius: 16px;
    padding:20px;
}


/* Custom property for the rotation angle */
@property --a {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}

/* Keyframes for the rotating animation */
@keyframes rotating {
    0% {
        --a: 0deg;
    }

    100% {
        --a: 360deg;
    }
}


/* ============ Main Styles ============ */

#banner { background: url("") right bottom no-repeat, linear-gradient(198deg, rgb(25, 25, 25), rgb(25, 25, 25),  rgb(64, 220, 57), rgb(25, 25, 25)); background-size: 400% 400%; animation: gradient 15s ease infinite;
}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

#banner  h1 { text-shadow: 1px 1px 2px #7c7c7c;}
@media screen and (max-width: 567px) {
#banner {
text-align: center;
}
}

#banner img { animation: float-badge 3s ease-in-out infinite; }

@keyframes float-badge {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }

  100% {
    transform: translateY(0);
  }
}

/*--------------------------------------------------------------
# Global Header
--------------------------------------------------------------*/
.header {  padding: 20px 0; transition: all 0.5s; z-index: 997;  position: relative; margin-top:40px;}
.header .header-container {background: none; border-radius: 50px; padding: 0px 25px; box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1); border:3px solid #c5e830; transition: 0.3s;}
.header .header-container:hover {background: #ddff35;}
.scrolled .header .header-container {background: color-mix(in srgb, var(--surface-color), transparent 5%);}
.header .logo {line-height: 1; padding-left: 5px; position: absolute; left: 45%; margin-left: -50px !important;}
.header .logo img {max-height: 150px; margin-right: 8px;}
.header .logo h1 {font-size: 24px; margin: 0; font-weight: 500; color: var(--heading-color);}



@media (max-width: 1200px) {
.header {padding-top: 10px;}
.header .header-container {margin-left: 10px; margin-right: 10px; padding: 10px 5px 10px 15px;}
.header .logo {order: 1; left: 43%;}
.header .navmenu {order: 2;}
}

/*--------------------------------------------------------------
# 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:#fff; padding: 18px 15px; font-size: 16px; font-family: audiowideregular; 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;}

.header .header-container:hover > .navmenu a, .navmenu a:focus  {color:#000;}


.navmenu li:hover>a, .navmenu .active, .navmenu .active:focus { color: #000; }
.navmenu .dropdown ul { margin: 0; padding: 10px 0; background: #ddff35; display: block; position: absolute; visibility: hidden; left: 14px; top: 110%; 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: #000;}
.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: #000;}
.navmenu .dropdown:hover>ul { opacity: 1; top: 110%; 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: #f7f5f0; font-size: 30px !important; line-height: 0; margin-right: 20px; 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: 30px;
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;}
}

@media (min-width: 900px) {
.navmenu .dropdown ul:after { position: absolute; top: -6px; left: 10%; display: inline-block; border-right: 6px solid transparent; border-bottom: 6px solid #ddff35; border-left: 6px solid transparent; content: '';}
}