.page-breadcrumb,
.page-breadcrumb-list,
.page-breadcrumb-item,
.page-breadcrumb-item.is-current span,
.breadcrumbs,
.breadcrumb,
.breadcrumb-item {
    display: none !important;
}
/* ── Slider gradient overlay – text readability ─────────────── */
.xv_slide {
    position: relative;
    background-size: cover !important;
    background-position: center !important;
}
.xv_slide::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        135deg,
        rgba(5, 12, 35, 0.82) 0%,
        rgba(5, 12, 35, 0.60) 50%,
        rgba(5, 12, 35, 0.30) 100%
    );
    z-index: 1;
    pointer-events: none;
}
/* Slide content above the overlay */
.albumAction,
.flex-caption {
    position: relative;
    z-index: 2;
}
.custom-slider .btn,
.custom-slider .btn-dark {
    pointer-events: auto !important;
    opacity: 1 !important;
    cursor: pointer !important;
    position: relative;
    z-index: 3;
}
/* Slider heading / text colours */
.custom-slider h2,
.custom-slider h6 {
    color: #fff !important;
    text-shadow: 0 2px 12px rgba(0,0,0,0.5);
}
.custom-slider p {
    color: rgba(255,255,255,0.88) !important;
    text-shadow: 0 1px 6px rgba(0,0,0,0.4);
}
.custom-slider strong {
    color: #17e4c2 !important;
}
/* Slider-Bild vertikal mittig zum Text */
.custom-slider .row {
    display: flex;
    align-items: center;
    margin-top: 0 !important;
}
.custom-slider {
    top: 40px;
    margin-top: 0 !important;
    padding-top: 0 !important;
}
/*
Table OF Contents
==========================
1-Preloader
2-General Styles
3-Page head
4-Form Styling 
5-Spacing Helping Classes 
6-Social
7-Player  
8-Navigation 
9-Radio Player 
10-WaveSurfer Player 
11-custome-select 
12-Multi Search 
13-Search filters 
14-Albums 
15-Slider 
16-Section Head
17-Pricing 
18-Verticle Tabs 
19-parallax 
20-Song List
21-Article 
22-Tweet 
23-Navigators 
24-Events 
25-Events countdown 
26-events finder
27-event single 
28-Footer 
29-store product 
30-Comments 
31-Pagination 
32-Responsive 
33-Dark Skin

*/

.comfortaa {
  font-family: "Comfortaa", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}

body {
    font-family: 'Comfortaa', sans-serif;
    overflow: hidden;
    overflow-y: scroll;
    font-size: 14px;
    font-weight: 5500;
    color: #20222d;
    margin: 0;
    padding: 0;
    background-color: #0f1728;
    background-image: url('../img/basic/sea-template-bg.jpg');
    background-position: center center;
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
}
.majorWrap{
    overflow: hidden;
}
p {
    margin: 0 0 10px;
}
hr{
    margin: 10px auto;
}
.label {
    color: inherit;
}
.container{
    width: 100%;
    max-width: 1400px;
}
/*==================================
1-Preloader
===================================*/

.pageLoader{
    position: fixed;
    bottom: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: url(../img/basic/ajax-loader.gif) center center no-repeat #222222;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    -moz-opacity: 0;
    -khtml-opacity: 0;
    opacity: 0.5;
    z-index: 999;
    transition:All 0.3s ease;
    -webkit-transition:All 0.3s ease;
    -moz-transition:All 0.3s ease;
    -o-transition:All 0.3s ease;
}
.pageLoader.active{
    width: 100%;
    height: 100%;
    left: 0;
    bottom: 0;
    visibility: visible;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    filter: alpha(opacity=80);
    -moz-opacity: 0.8;
    -khtml-opacity: 0.8;
    opacity: 0.8;
}


/*=====================
2-General Styles
======================*/
html {
    scroll-behavior: smooth;
}

.lt-ie9 .animated {
    opacity: 1 !important;
    -webkit-animation: none !important;
    animation: none !important;
    transform: none !important;
}

blockquote {
    border: none;
    margin: 0;
    font-size: 15px;
    line-height: 28px;
    padding: 40px;
}

q {
    position: relative;
    margin-left: 30px;
    display: inline-block;
}

q:before {
    position: absolute;
    left: -25px;
    top: 0;
    font-size: 40px;
}

q:after {
    content: "";
}

img {
    max-width: 100%;
    height: auto;
}

ul {
    margin: 0;
}

a {
    outline: none !important;
    color: #17e4c2;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 10px 0;
    font-weight: bold;
}

h1 {
    font-size: 25px;
}

h2 {
    font-size: 22px;
}

h3 {
    font-size: 18px;
}

h4 {
    font-size: 16px;
}

h5 {
    font-size: 15px;
}

h6 {
    font-size: 14px;
}

header h2 {
    font-size: 25px;
}

.text-right {
    text-align: right;
}

.text-left {
    text-align: left;
}

.text-center {
    text-align: center;
}

.btn-default {
    background: #17e4c2;
    color: #fff;
}

.btn {
    padding: 5px 15px;
    border: none;
    border-radius: 0;
    font-weight: inherit;
    text-transform: inherit;
}
.btn-lg{
    padding: 10px 25px;
}

.btn-transparent{
    border: 1px solid #17e4c2;
    border-radius: 3px;
    text-decoration: none !important;
}
.btn-transparent-2{
    background: rgba(255,255,255,0.4);
    color: #fff;
    border-radius: 2px;
}
.btn.btn-transparent-2:hover{
    color: #fff;
    background: rgba(255,255,255,0.1);
}

.btn-grey {
    background: #e7eaeb;
    color: #a0a0a0;
    transition: background 0.25s, color 0.25s;
}
.btn-grey:hover,
.btn-grey:focus {
    background: #17e4c2;
    color: #0a0f1e;
}

.btn-dark {
    background: #2c2c2c;
    color: #a3a3a3;
}

.btn-dark:hover {
    color: #fff;
}

.btn-yellow {
    background: #ebc826;
    color: #675a1d;
}

.btn-wide {
    width: 100%;
    margin: 5px auto;
    padding: 15px;
}

.btn-md {
    min-width: 30%;
}

.btn:hover {
    text-shadow: 1px 1px rgba(0, 0, 0, 0.2);
    border-color: #000;
    border-color: rgba(0, 0, 0, 0.2);
}

.text-extralight {
    font-weight: 100 !important;
}

.text-light {
    font-weight: 300 !important;
}

.text-semibold {
    font-weight: 600 !important;
}

.text-bold {
    font-weight: 700 !important;
}

.text-extrabold {
    font-weight: 800 !important;
}

.text-uppercase {
    text-transform: uppercase !important;
}

.text-lowercase {
    text-transform: lowercase !important;
}

.link {
    text-decoration: underline;
    display: inline-block;
}

.link-grey {
    color: #c5c8c9;
}

.link:hover {
    color: #17e4c2;
}
/*===============================================
Form Styling
=================================================*/
.validationError{
    margin: 20px auto;
    color: #e83b3b;
    display: none;
}
.messageSentSuccess{
    font-size: 18px;
    line-height: 26px;
    text-align: center;
    margin: 30px auto;
    display: none;
}
form {
    margin-bottom: 30px;
}

form .btn {
    padding-top: 10px;
    padding-bottom: 10px;
}

input[type="text"],
input[type="tel"],
input[type="email"],
input[type="password"],
textarea {
    width: 100%;
    border: none;
    color: #9ea4a7;
    height: 38px;
    background: #e7eaeb;
    border-radius: 3px;
    height: 45px;
    padding: 10px 35px;
    text-transform: inherit;
}
.field-wrap{
    letter-spacing: 1px;
}

input[type="text"]:focus,
input[type="tel"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
textarea:focus {
    background: #fff;
    border: 1px solid #17e4c2;
    color: #222;
}

textarea {
    height: 180px;
    padding: 25px 35px;
}

label {
    color: #9ea4a7;
}

.field-wrap:hover label {
    color: #17e4c2;
}

.field-wrap {
    margin: 15px auto;
    position: relative;
}

.field-wrap label {
    position: absolute;
    left: 35px;
    top: 12px;
}

.field-wrap.textarea-wrap label {
    top: 25px;
}
/*==============================================
Spacing Helping Classes
===============================================*/

.mb-10 {
    margin-bottom: 10px !important;
}



.mb-15 {
    margin-bottom: 15px !important;
}

.mb-20 {
    margin-bottom: 20px;
}

.mb-25 {
    margin-bottom: 25px;
}

.mb-30 {
    margin-bottom: 30px;
}

.mb-35 {
    margin-bottom: 35px;
}

.mb-40 {
    margin-bottom: 40px;
}

.mb-45 {
    margin-bottom: 45px;
}

.mb-50 {
    margin-bottom: 50px;
}

.mb-100 {
    margin-bottom: 100px;
}

.mt-10 {
    margin-top: 10px;
}

.mt-15 {
    margin-top: 15px;
}

.mt-20 {
    margin-top: 20px;
}

.mt-25 {
    margin-top: 25px;
}

.mt-30 {
    margin-top: 30px;
}

.mt-35 {
    margin-top: 35px;
}

.mt-40 {
    margin-top: 40px;
}

.mt-45 {
    margin-top: 45px;
}

.mt-50 {
    margin-top: 50px;
}

.mt-100 {
    margin-top: 100px;
}
/* ============================
Social
=========================== */

.social-list {
    position: relative;
    padding: 0;
    text-align: center;
    margin: 10px auto;
}

.social-list li {
    display: inline-block;
    list-style: none;
}

.social-list li a {
    display: block;
    width: 35px;
    height: 35px;
    line-height: 35px;
    text-decoration: none;
    color: #fff !important;
    text-decoration: none !important;
    background: #72b316;
}

.social-list.style2 li {
    margin-left: 2px;
    margin-right: 2px;
}

.social-list.style2 li a {
    width: 40px;
    height: 40px;
    line-height: 40px;
    font-size: 150%;
    background: #2c2c2c;
    background: rgba(44, 44, 44, 0.3);
}

.social-list.style2 li a:hover {
    background: #2c2c2c;
    background: rgba(44, 44, 44, 1);
}

.circular.social-list li a {
    border-radius: 50%;
}

.social-list li a.fb-bg {
    background: #4d6dbc;
}

.social-list li a.tweet-bg {
    background: #8ae1db;
}

.social-list li a:hover {
    color: #fff;
}
/* ============================
5-Player
=========================== */

.the-xv-Jplayer {
    background: #232323;
    color: #717171;
    position: absolute;
    right: -255px;
    top: 0;
    width: 430px;
    height: 75px;
    z-index: 999999;
    transition:All 0.3s ease;
    -webkit-transition:All 0.3s ease;
    -moz-transition:All 0.3s ease;
    -o-transition:All 0.3s ease;
}
body.playerFullOn .the-xv-Jplayer{ 
    right: 0;
}

.playList-trigger {
    border: none;
    background: none;
    width: 30px;
    font-size: 22px;
    line-height: 30px;
    height: 30px;
    margin-left: 15px;
    margin-right: 10px;
    text-align: center;
}

.sound-trigger,.sound-control {
    border: none;
    background: none;
    width: 30px;
    height: 30px;
    margin-left: auto;
    margin-right: auto;
    font-size: 22px;
    line-height: 30px;
    display: block;
}

.jp-volume-controls {
    position: absolute;
    right: 20px;
    top: 50%;
    height: 30px;
    margin-top: -15px;
    width: 80px;
}
.jp-radioPlayer .jp-volume-controls{
    right: 0;
}

.open .jp-volume-bar {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    -moz-opacity: 1;
    -khtml-opacity: 1;
    opacity: 1;
}

.jp-volume-bar {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    -moz-opacity: 0;
    -khtml-opacity: 0;
    opacity: 0;
    position: absolute;
    left: 10px;
    top: 100%;
    background: #fff;
    border-radius: 10px;
    height: 10px;
    width: 100%;
    padding: 2px;
    cursor: pointer;
    display: none;
}

.jp-volume-bar-value {
    height: 6px;
    border-radius: 4px;
    background: #80c420;
}

.playList-trigger:hover,.playList-trigger:focus,.playerFullOn .playList-trigger{
    color: #fff;
}

.the-xv-Jplayer .controls {
    width: 170px;
    left: 0;
    top: 50%;
    position: absolute;
    margin-top: -15px;
}

.the-xv-Jplayer .controls > div {
    position: relative;
    display: inline-block;
    width: 26px;
    height: 26px;
    text-align: center;
    line-height: 26px;
    margin-left: 4px;
    margin-right: 4px;
    font-size: 22px;
    cursor: pointer;
    border-radius: 50%;
}
.the-xv-Jplayer.jp-state-playing .controls > div.play-pause{
    color: #fff;
}

.the-xv-Jplayer .controls > div:hover {
    color: #fff;
    border-color: #fff;
}

.the-xv-Jplayer .audio-title {
    color: #f4f4f4;
    font-size: 12px;
    position: absolute;
    left: 180px;
    top: 50%;
    margin: -15px 0 0 0;
}

.the-xv-Jplayer .audio-title > span {
    display: block;
    overflow: hidden;
    width: 145px;
    height: 15px;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.the-xv-Jplayer .audio-title .jp-artist {
    display: block;
    color: #969696;
    font-size: 10px;
}
.jp-playlist-item .jp-artist{
}
.jp-playlist-item .jp-artist:before{
    content: "-";
    padding: 0 10px;
    font-weight: bold;
}

.jp-playlist {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: #232323;
    color: #717171;
    font-size: 14px;
}

.jp-playlist ul {
    padding: 0;
}

.jp-playlist ul li {
    display: block;
    border-bottom: 1px solid #717171;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

.jp-playlist ul li.jp-playlist-current{
    background: #9ad940;
    border-bottom: none;
}

.jp-playlist ul li a:before{
    content: '\f04b';
    font-family:'FontAwesome';
    display: block;
    position: absolute;
    left: 0;
    top: 50%;
    margin-top: -8px;
    width: 40px;
    font-size: 14px;
    text-align: center;
}
.jp-playlist ul li.jp-playlist-current a:before{
   content: '\f0a4';
}

.jp-playlist ul li:last-child {
    border: none;
}

.jp-playlist ul li a.jp-playlist-item {
    color: #717171;
    padding: 8px 20px 8px 40px;
    display: block;
    position: relative;
    text-decoration: none;
}

.jp-playlist ul li.jp-playlist-current a {
    color: #fff;
}

.player-status {
    background: #585858;
    height: 4px;
    left: 0;
    bottom: 0;
    position: absolute;
    cursor: pointer;
}
.the-xv-Jplayer .player-status{
    width: 175px;
}
body.playerFullOn .the-xv-Jplayer .player-status{
    width: 100%;
}
.jp-seek-bar,
.jp-play-bar {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
}

.jp-play-bar {
    background: #9ad940;
}

.post-audio-player {
    background: #eff1f2;
    padding: 20px 50px 40px 55px;
    position: relative;
    border-radius: 3px;
}
.post-audio-player .jpcTimeWrap{
    position: absolute;
    right: -10px;
    top: -7px;
    height: 20px;
    width: 20px;
    background: #9ad940;
    border-radius: 1px;
}
.post-audio-player .jpcTimeWrap:hover .jp-current-time{ 
    visibility: visible;
}

.post-audio-player .jp-current-time{
    background: #2c2c2c;
    width: 50px;
    height: 20px;
    top: 100%;
    margin-top: 5px;
    border-radius: 2px;
    font-size: 10px;
    text-align: center;
    color: #fff;
    line-height: 21px;
    position: absolute;
    left: 50%;
    margin-left: -25px;
    border-radius: 2px;
    visibility: hidden;
    transition:All 0.3s ease;
    -webkit-transition:All 0.3s ease;
    -moz-transition:All 0.3s ease;
    -o-transition:All 0.3s ease;
}

.post-audio-player .player-status {
    position: relative;
    left: auto;
    bottom: auto;
    height: 6px;
    background: #b2b5b6;
}

.post-audio-player .jp-current-time:before{
    content: " ";
    top: -5px;
    left: 20px;
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 5px 8px 5px;
    border-color: transparent transparent #2c2c2c transparent;
}

.post-audio-player .jp-controls-holder {
    position: absolute;
    left: 15px;
    top: 55px;
}
.post-audio-player .jp-duration{
    position: absolute;
    right: 18px;
    top: 18px;
    font-weight: bold;
}
.post-audio-player .audio-title {
    margin-bottom: 25px;
}

.post-audio-player .play-pause {
    cursor: pointer;
    display: inline-block;
    color: #a9abac;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    line-height: 23px;
    text-align: center;
    font-size: 24px;
}

.post-audio-player .play-pause:hover {
    color: #2c2c2c;
    border-color: #2c2c2c;
}

.post-audio-player .jp-volume-controls {
    right: -10px;
    margin-top: 0;
    top: 50px;
    color: #a9abac;
    font-size: 22px;
}

.post-audio-player .jp-volume-controls:hover {
    color: #2c2c2c;
}

.post-audio-player .jp-volume-bar {
    left: auto;
    top: 38px;
    right: 10px;
    right: 30px;
    background: #b2b5b6;
    border-radius: 0;
}
/* ============================
5-Navigation
=========================== */
.doc-header{
    z-index: 9999;
    transition:All 0.3s ease;
    -webkit-transition:All 0.3s ease;
    -moz-transition:All 0.3s ease;
    -o-transition:All 0.3s ease;
}
body.playerFullOn .xv-menuwrapper{
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    -moz-opacity: 0;
    -khtml-opacity: 0;
    opacity: 0;
    visibility: hidden;
}
#sticktop {
    width: 100%;
    left: 0;
    top: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.77);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    min-height: 75px;
    position: fixed;
    z-index: 9999;
}

#ajaxArea {
    margin-top: 0 !important;
}

.page-breadcrumb {
    padding: 14px 0 0;
}

.page-breadcrumb .container {
    position: relative;
}

.page-breadcrumb-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.page-breadcrumb-item {
    display: inline-flex;
    align-items: center;
    color: rgba(255, 255, 255, 0.82);
    font-size: 13px;
    letter-spacing: 0.02em;
}

.page-breadcrumb-item::after {
    content: "/";
    margin-left: 8px;
    color: rgba(255, 255, 255, 0.45);
}

.page-breadcrumb-item:last-child::after {
    display: none;
}

.page-breadcrumb-item a {
    color: rgba(255, 255, 255, 0.82);
    text-decoration: none;
    transition: color 0.2s ease;
}

.page-breadcrumb-item a:hover,
.page-breadcrumb-item a:focus {
    color: #17e4c2;
}

.page-breadcrumb-item.is-current span {
    color: #ffffff;
    font-weight: 700;
}

.sticky-wrapper.is-sticky #sticktop {
    -moz-box-shadow: 0px 1px 2px rgba(0, 0, 0, .15);
    -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, .15);
    -o-box-shadow: 0px 1px 2px rgba(0, 0, 0, .15);
    box-shadow: 0px 1px 2px rgba(0, 0, 0, .15);
}

.menuTrigger {
    background: rgba(44, 44, 44, 0.48);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: #fff;
    font-size: 28px;
    position: absolute;
    right: 15px;
    top: 50%;
    margin-top: -20px;
    z-index: 9999;
    border: none;
    padding: 0px 10px;
    display: none;
}

.dl-trigger-wrapper {
    position: relative;
}

.dl-menuwrapper button {
    float: right;
}

ul.navbar-nav {
    float: right;
    min-height: 40px;
}

.navbar {
    margin-bottom: 0;
}

.navbar-default {
    border-radius: 0;
    position: relative;
    background: transparent;
    border-color: transparent;
}

.navbar-default > .container {
    padding-left: 15px;
    height: 75px;
    padding-right: 15px;
    position: relative;
}

.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
    background: none;
}

.dropdown i {
    padding-left: 2px;
    font-size: 12px;
}

a.navbar-brand img {
    padding-right: 15px;
}

.navbar-nav > li:hover ul.dropdown-menu {
    display: block;
}

.xv-menuwrapper {
    margin-right: 90px;
    float: right;
    transition:All 0.3s ease;
    -webkit-transition:All 0.3s ease;
    -moz-transition:All 0.3s ease;
    -o-transition:All 0.3s ease;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    -moz-opacity: 1;
    -khtml-opacity: 1;
    opacity: 1;
    visibility: visible;
}
.radio-style.xv-menuwrapper{
    margin-right: 0;
}

.navbar-header {
    float: none;
    position: absolute;
    top: 50%;
    left: 15px;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}

.navbar-header > a {
    color: #fff;
    font-size: 24px;
    line-height: 20px;
    text-decoration: none;
    display: block;
}

.navbar-header a span.slogan {
    display: block;
    font-size: 12px;
}

.xv-menuwrapper .dl-trigger {
    display: none;
}

.xv-menuwrapper .dl-menu {
    position: static;
    display: block;
    padding: 0;
    text-align: left;
    float: none;
    margin: 0;
}

.xv-menuwrapper .dl-menu > li {
    list-style: none;
    display: block;
    float: left;
    height: 100%;
    line-height: 100%;
    position: relative;
}

.xv-menuwrapper .dl-menu > li.hover > a {
    color: #17e4c2;
}

.xv-menuwrapper .dl-menu > li.active > a {
    color: #17e4c2;
}

.xv-menuwrapper .dl-menu > li > a {
    text-decoration: none;
    padding: 0 10px;
    display: block;
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 600;
    color: #fff;
    line-height: 75px;
    position: relative;
}

.xv-menuwrapper .dl-menu > li.megamenu.active > a:after {
    bottom: 42px;
}

.xv-menuwrapper .dl-menu > li.megamenu.active:after {
    display: none;
}

.xv-menuwrapper li.parent {
    position: relative;
}

.xv-menuwrapper li.parent.megamenu {
    position: static;
}

.xv-menuwrapper li.parent.megamenu > .lg-submenu {
    display: block;
    width: 80%;
    text-align: justify;
    left: auto;
    right: 0;
    padding: 15px 20px 0;
}

.xv-menuwrapper li.parent.megamenu.small > .lg-submenu {
    width: 60%;
}

.xv-menuwrapper li.parent.megamenu.medium > .lg-submenu img {
    border: 1px solid #f2f2f2;
    padding: 8px;
}

.xv-menuwrapper li.parent.megamenu.wide > .lg-submenu {
    width: 100%;
}

.xv-menuwrapper li.parent.megamenu > .lg-submenu::after {
    width: 100%;
    display: inline-block;
    content: ".";
    visibility: hidden
}

.xv-menuwrapper li.parent.megamenu > .lg-submenu > li {
    display: inline-block;
    text-align: left;
    vertical-align: top;
}

.xv-menuwrapper li.parent.megamenu > .lg-submenu > li > a {
    font-weight: 800;
    color: #13212d;
    margin-bottom: 15px;
    display: block;
}

.xv-menuwrapper li.parent.megamenu > .lg-submenu figure {
    overflow: hidden;
    width: 370px;
    height: 340px;
}

.xv-menuwrapper li.parent.megamenu > .lg-submenu figure img {
    width: 100%;
    height: auto;
}

.xv-menuwrapper .dl-menu > li.parent > ul,
.xv-menuwrapper .dl-menu > li.parent > ul > li.parent > ul {
    padding: 0;
    position: absolute;
    left: 0;
    top: 100%;
    min-width: 215px;
    background: #222;
    visibility: hidden;
    opacity: 0;
    transform: translateY(10px);
    -webkit-transform: translateY(10px);
    -moz-transform: translateY(10px);
    -o-transform: translateY(10px);
    -ms-transform: translateY(10px);
    -moz-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.15);
    -webkit-box-shadow: 0 2px 2px rgba(0, 0, 0, 0.15);
    box-shadow: 0 2px 2px rgba(0, 0, 0, 0.15);
}

.xv-menuwrapper .dl-menu > li.parent > ul > li.parent > ul {
    margin-top: -1px;
}

.xv-menuwrapper .dl-menu > li.parent:last-child > ul {
    left: auto;
    right: 0;
}



.xv-menuwrapper .dl-menu > li.parent > ul > li,
.xv-menuwrapper .dl-menu > li.parent > ul > li.parent ul li {
    display: block;
    list-style: none;
    border-top: 1px solid #000;
    border-top: 1px solid rgba(0, 0, 0, 0.2);
    padding:8px 15px;
}

.xv-menuwrapper .dl-menu > li.parent.megamenu > ul > li,
.xv-menuwrapper .dl-menu > li.parent.megamenu > ul > li.parent ul li {
    border-top: none;
}

.xv-menuwrapper .dl-menu > li.parent.megamenu li {
    list-style: none;
}

.xv-menuwrapper .dl-menu > li.parent.megamenu li a {
    color: #13212d;
    line-height: 25px;
}

.xv-menuwrapper .dl-menu > li.parent > ul > li > a,
.xv-menuwrapper .dl-menu > li.parent > ul > li.parent ul li a {
    display: block;
    line-height: 30px;
    color: #a0a0a0;
    text-transform: capitalize;
    font-weight: 600;
    font-size: 13px;
    text-decoration:  none;
}

.xv-menuwrapper .dl-menu > li.parent > ul > li.parent:after {
    position: absolute;
    top: 0;
    right: 10px;
    line-height: 50px;
    font-family: 'FontAwesome';
    speak: none;
    -webkit-font-smoothing: antialiased;
    content: "\f0da";
    color: #13212d;
}

.xv-menuwrapper .dl-menu > li.parent > ul > li.parent ul {
    position: absolute;
    left: 100%;
    top: 0;
}

.xv-menuwrapper .dl-menu > li.parent:last-child > ul > li.parent > ul {
    left: auto;
    right: 100%;
}

.xv-menuwrapper button:after {
    display: none;
}

.xv-menuwrapper .dl-back {
    display: none !important;
}
/*===========================
Radio Player
===========================*/
.jp-radioPlayer{
    position: relative;
    background: #9ad940;
    padding: 10px 0; 
    color: #fff;
}
.jp-radioPlayer .container{
    position: relative;
}
.jp-radioPlayer .jp-controls-holder{
    font-size: 30px;
    float: left;
    position: relative;
    z-index: 20;
    padding-left: 0px;
}
.jp-radioPlayer .jp-controls-holder > div{
    float: left;
}
.play-pause{
    cursor: pointer;
}
.jp-radioPlayer .sound-trigger{
    margin-right: 0;
}
.jp-radioPlayer .jp-title{
    padding: 5px 100px 0;
    margin: 0;
    text-align: center;
}
.jp-radioPlayer .jp-volume-bar{
    left: auto;
    right: 60px;
    top: 50%;
    margin-top: -5px;
}

.jp-radioPlayer .jp-volume-bar {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    -moz-opacity: 1;
    -khtml-opacity: 1;
    opacity: 1;
}
/*====*/
.jp-state-playing .music_pseudo_bars{ 
    display: block;
}
.music_pseudo_bars {
    display: none;
    height: 30px;
    left: 80px;
    margin: -15px 0 0 0;
    position: absolute;
    top: 50%;
    width: 80px;
}

.music_pseudo_bar {
   background: #fff;
    bottom: 1px;
    height: 3px;
    position: absolute;
    width: 3px;      
    animation: sound 0ms -800ms linear infinite alternate;
}

@keyframes sound {
    0% {
       opacity: .35;
        height: 3px; 
    }
    100% {
        opacity: 1;       
        height: 28px;        
    }
}

.music_pseudo_bar:nth-child(1)  { left: 1px; animation-duration: 474ms; }
.music_pseudo_bar:nth-child(2)  { left: 5px; animation-duration: 433ms; }
.music_pseudo_bar:nth-child(3)  { left: 9px; animation-duration: 407ms; }
.music_pseudo_bar:nth-child(4)  { left: 13px; animation-duration: 458ms; }
.music_pseudo_bar:nth-child(5)  { left: 17px; animation-duration: 400ms; }
.music_pseudo_bar:nth-child(6)  { left: 21px; animation-duration: 427ms; }
.music_pseudo_bar:nth-child(7)  { left: 25px; animation-duration: 441ms; }
.music_pseudo_bar:nth-child(8)  { left: 29px; animation-duration: 419ms; }
.music_pseudo_bar:nth-child(9)  { left: 33px; animation-duration: 487ms; }
.music_pseudo_bar:nth-child(10) { left: 37px; animation-duration: 442ms; }

.music_pseudo_bar:nth-child(11)  { left: 41px; animation-duration: 474ms; }
.music_pseudo_bar:nth-child(12)  { left: 45px; animation-duration: 433ms; }
.music_pseudo_bar:nth-child(13)  { left: 49px; animation-duration: 407ms; }
.music_pseudo_bar:nth-child(14)  { left: 53px; animation-duration: 458ms; }
.music_pseudo_bar:nth-child(15)  { left: 57px; animation-duration: 400ms; }
.music_pseudo_bar:nth-child(16)  { left: 61px; animation-duration: 427ms; }
.music_pseudo_bar:nth-child(17)  { left: 65px; animation-duration: 441ms; }
.music_pseudo_bar:nth-child(18)  { left: 69px; animation-duration: 419ms; }
.music_pseudo_bar:nth-child(19)  { left: 73px; animation-duration: 487ms; }
.music_pseudo_bar:nth-child(21) { left: 77px; animation-duration: 442ms; }


/*================================
WaveSurfer Player
================================*/
.waveSurferPlayer{
    background: #9AD940;
    padding: 0px 0;
}
.WaveControlStuff{
    position: absolute;
    left: 0;
    top: 10px;
}
.WaveControlStuff > a{
    display: block;
    float: left;
    width: 28px;
    height: 28px;
    margin-right: 4px;
    color: #fff;
    line-height: 28px;
    font-size: 24px;
    text-align: center;
    text-decoration: none;
}
.waveSurferPlayer .waveTitle{
    font-size: 14px;
    color: #fff;
    margin: -10px 0 0;
    text-align: center;
    display: none;
}
.waveSurferInner{
    position: relative;
    padding-left: 200px;
}
/*=============================================
custome-select
=============================================*/

.custome-select {
    width: 100%;
    position: relative;
    height: 38px;
    line-height: 38px;
    text-align: left;
    display: inline-block;
    cursor: pointer;
}

.custome-select span {
    width: 100%;
    height: 30px;
    overflow: hidden;
    padding-left: 10px;
    font-size: 15px;
    margin-top: 1px;
    display: block;
    font-size: 12px;
    font-weight: bold;
    line-height: 34px;
}

.custome-select b {
    position: absolute;
    right: 10px;
    top: 10px;
    font-size: 20px;
}

.custome-select select {
    opacity: 0;
    position: absolute;
    width: 100%;
    left: 0;
    color: #000;
    font-size: 14px;
    top: 0;
    height: 38px;
}
/*=========================
Multi Search
============================*/

.multiSearchWrapper-inner {
    background: #f4f5f5;
    padding: 4px;
    position: relative;
}

.multiSearchWrapper {
    color: #a0a0a0;
    margin-top: 5px;
    max-width: 85%;
}

.multiSearchWrapper .custome-select {
    min-width: 120px;
    width: 28%;
    border-right: 1px solid #a0a0a0;
}

.multiSearchWrapper-inner input {
    width: 70%;
    position: absolute;
    right: 0;
    height: 100%;
    top: 0;
    background: #f4f5f5;
}
.multiSearchWrapper-inner input:focus{
    border: none;
}

.multiSearchWrapper input[type="submit"],
.multiSearchWrapper button {
    height: 46px;
    width: 12.5%;
    position: absolute;
    top: 4px;
    right: 10px;
    font-size: 18px;
}
/*===============================
Search filters
==============================*/

.search-filters {
    border-top: 1px solid #b2b2b2;
}

.search-filters a.link {
    margin-top: 15px;
    margin-bottom: 15px;
}

.searched-for:before {
    content: attr(data-before);
    color: #c5c8c9;
    margin-right: 10px;
}

.searched-for {
    padding: 15px 0;
}

.s-keyword {
    color: #17e4c2;
}

.s-keyword + .s-keyword {
    content: ", ";
}

.search-actions ul + ul {
    border-left: 1px solid #b2b2b2;
}

.search-actions > ul {
    padding: 15px;
    display: inline-block;
}

.search-actions ul li {
    display: inline-block;
    list-style: none;
    margin-left: 5px;
    margin-right: 5px;
}

.search-actions ul li a {
    color: #c5c8c9;
}

.search-actions ul li.active a,
.search-actions ul li a:focus,
.search-actions ul li a:hover {
    color: #17e4c2;
    text-decoration: underline;
}
/*===============================
Albums
===============================*/

.album-grid {
    margin-top: 30px;
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 12px;
}
.album-grid-wrap.loading .albumPopulate{
    min-height: 120px;
}
/*.album-grid-wrap.loading:after{
    content: " ";
    left: 0;
    top: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    background: #78e2dc;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
    filter: alpha(opacity=80);
    -moz-opacity: 0.8;
    -khtml-opacity: 0.8;
    opacity: 0.8;
}*/
.album-grid-wrap {
    position: relative;
}
.album-grid-wrap.loading .album-control{
    visibility: hidden;
}
.album-control {
    position: absolute;
    left: 0;
    top: 0;
    width: 48px;
    height: 100%;
    background: #2c2c2c;
    z-index: 40;
    text-align: center;
    font-size: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
}

.album-control.bottom-right {
    left: auto;
    right: 0;
    top: 0;
    bottom: auto;
}

.album-control:hover {
    background: #17e4c2;
}

.album-control i {
    color: #5c5c5c;
    top: 50%;
    left: 0;
    width: 100%;
    position: absolute;
    margin-top: -20px;
}

.album-control:hover i {
    color: #fff;
}

.album-unit {
    display: block;
    position: relative;
    width: 23.5%;
    padding: 2px;
    color: #fff;
    float: none !important;
    flex: 0 0 23.5%;
}
.album-unit:hover{
    color: #fff;
}
.album-unit:after{
    position: absolute;
}

.album-grid-wrap.style3 {
    margin-bottom: 30px;
}

.album-grid-wrap.style4 .album-unit {
    width: 11.1111%;
}
.album-grid-wrap.style2 .album-unit {
    padding: 5px;
    width: 20%;
}

.album-grid-wrap.style3 .album-unit {
    padding: 0px;
    width: 16.66%;
}

.album-grid-wrap.style2 .album-unit:first-child,
.album-grid-wrap.style2 .album-unit:last-child,
.album-grid-wrap.style3 .album-unit:first-child,
.album-grid-wrap.style3 .album-unit:last-child, 
.album-grid-wrap.style4 .album-unit:first-child,
.album-grid-wrap.style4 .album-unit:last-child {
    margin-left: 0;
}

.album-unit:first-child {
    margin-left: 6%;
}

.album-unit img {
    width: 100%;
    height: auto;
}

.album-unit figure {
    position: relative;
    overflow: hidden
}

.album-unit figure:after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #17e4c2;
    visibility: hidden;
    opacity: 0.93;
}

.album-unit figure:hover:after {
    visibility: visible;
}

.album-unit figure > figcaption {
    visibility: hidden;
    padding: 20px 35px 20px 20px;
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 20;
    width: 100%;
}
.album-unit figure > figcaption span{
    color: #000;
}
.album-grid-wrap.style4 .album-unit figure > figcaption{
    width: 100%;
    height: 100%;
    padding: 0;
}
.album-grid-wrap.style4 .album-unit figure > figcaption:after{
    right: auto;
    left: 50%;
    top: 50%;
    font-size: 34px;
    margin-left: -17px;
    margin-top: -17px;
}
.album-grid-wrap.style2 .album-unit figure > figcaption:after,
.album-grid-wrap.style3 .album-unit figure > figcaption:after{
    top: 100%;
    margin-top:20px;
    right: 0;
    font-size: 30px;
    width: 100%;
}
.album-grid-wrap.style2 .album-unit figure > figcaption,
.album-grid-wrap.style3 .album-unit figure > figcaption {
    bottom: auto;
    top: 20px;
    width: 100%;
    padding: 0;
    text-align: center;
}

.album-unit figure > figcaption h3 {
    margin: 0;
    color: #fff;
}

.album-unit figure:hover figcaption {
    visibility: visible;
}

.album-header{
    height: 320px;
    position: relative;
    padding-top: 50px;
}
.album-cover{
    width: 100%;
    height: auto;
    position: relative;
    
}
.noCover .album-cover{
    -webkit-filter: blur(10px);
    filter: blur(10px);
    filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='10');
}
.album-cover-wrap{
    overflow: hidden;
    height: 320px;
    position: absolute;
    top: -10px;
    width: 110%;
    left: -5%;
    z-index: 0;
}

.album-cover_overlay{
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.3);
    z-index: 20;
}
.cover-content{
    position: relative;
    z-index: 50;
}
.cover-content a.backStore{
    font-size: 13px;
    padding: 8px 49px;
}
.cover-content a.backStore i{
    margin-right: 10px;
    font-size: 16px;
}
.cover-content hr{
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
    filter: alpha(opacity=30);
    -moz-opacity: 0.3;
    -khtml-opacity: 0.3;
    opacity: 0.3;
}
.album-thumb{
    position: absolute;
    left: 0;
    top: 0px;
    width: 230px;
    height: auto;
    border: 2px solid rgba(255,255,255,0.3);
}
/*.itunesAlbumData .album-thumb{
    width: 100px;
}*/
.album-thumb img{
    width: 100%;
}
.album_overview{
    position: relative;
    padding-left: 260px;
}



/*.itunesAlbumData .album_overview{
    padding-left: 150px;
}*/
.album_overview h1{
    color: #fff;
    margin-top: -5px;
    margin-bottom: 0;
}
.album-author{
    display: block;
    font-style: normal;
    font-weight: 700;
    color: #646464;
}
.btn-tag{
    padding: 5px 20px;
    border-radius: 0;
}

.getitOnBadge{
    background: url(../img/basic/itunesBadge.svg) center center no-repeat;
    display: inline-block;
    width: 110px;
    height: 40px;
}
.creditsToitunes{
    padding: 20px 0;
    color: #fff;
    font-size: 10px;
    font-style: italic;
}
.creditsToitunes em{
    display: block;
}
/*===============================
7-Slider
=================================*/

.xv_slider {
    position: relative;
    width: 100%;
    background: #e7eaeb;
}

.xv_slider .flex-control-nav {
    position: relative;
    padding-top: 15px;
}

.xv_slider.flexslider .slides img {
    width: auto;
    max-width: 100%;
    display: inline-block;
}

.xv_slider .xv_slide {
    height: 400px;
    padding-top: 75px;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
    overflow: hidden;
}

.custom-slider {
    
    position: relative;
    font-size: 14px;
    color: #fff;
}

@media (max-width: 767px) {
    .custom-slider {
        top: 32px;
    }
}
.custom-slider strong {
    margin-bottom: 15px;
    display: inline-block;
    text-transform: uppercase;
}

.custom-slider h2,
.custom-slider h6 {
    color: #f7f7f7;
    color: rgba(247, 247, 247, 0.5);
}

.custom-slider .about-album {
    padding-top: 40px;
}

.custom-slider h2,
.custom-slider h1,
.custom-slider h3,
.custom-slider h4,
.custom-slider h5,
.custom-slider h6 {
    line-height: 1em;
    text-transform: uppercase;
}

.flex-caption a.btn {
    background: none;
    color: #fff;
    border: 1px solid #fff;
}

.flex-caption p {
    padding-bottom: 40px;
    margin-top: 25px;
}

.flex-caption {
    position: relative;
    bottom: 20px;
}

.flex-direction-nav a {
    background: none;
    border: 1px solid #fff;
    border-radius: 2px;
    color: #fff;
    display: block;
}

.flex-caption img {
    -moz-box-shadow: 3px 3px 4px rgba(0, 0, 0, 0.2);
    -webkit-box-shadow: 3px 3px 4px rgba(0, 0, 0, 0.2);
    box-shadow: 3px 3px 4px rgba(0, 0, 0, 0.2);
}

.flex-direction-nav .flex-next {
    background: url(../img/basic/right-arrow.png) no-repeat center center rgba(255, 255, 255, 0.2);
}

.flex-direction-nav .flex-prev {
    background: url(../img/basic/left-arrow.png) no-repeat center center rgba(255, 255, 255, 0.2);
}

.flex-control-nav {
    z-index: 99;
    bottom: 0;
    color: #fff;
}

.xv_slider .links {
    background: #000;
    background: rgba(0, 0, 0, 0.10);
    padding-top: 22px;
    padding-bottom: 22px;
}

.albumAction {
padding-top: 7px;
    text-align: right;
    width: 100%;
    height: 80px;
    position: absolute;
    left: 0;
    bottom: 20px;
    background: rgba(0, 0, 0, 0.1);
    z-index: 10;
}

.albumAction a.btn {
    margin-left: 10px;
    font-size: 14px;
    padding: 10px 20px;
}

.albumAction a.btn i {
    margin-right: 10px;
    display: inline-block;
}
/*=================================
Section Head
=================================*/

section header {
    padding-bottom: 25px;
    padding-top: 25px;
}

section header.style5 {
    border-top: 1px solid #b2b2b2;
    border-bottom: 1px solid #b2b2b2;
    padding: 0;
    margin-bottom: 30px;
}

section header.style2 {
    background: #2c2c2c;
    color: #fff;
}

section header.style4 {
    padding-bottom: 0px;
    margin-bottom: 20px;
}

section header.style4 .container {
    border-bottom: 1px solid #b2b2b2;
}

section header.style3 {
    background-color: #17e4c2;
    padding-top: 0;
    padding-bottom: 0;
    margin-bottom: -50px;
}

section header.parallax {
    color: inherit;
    height: auto;
}

section header.style3.parallax {
    height: 225px;
    min-height: 225px;
    max-height: 225px;
    overflow: hidden;
    display: flex;
    align-items: center;
}

section header.style3.parallax .container {
    width: 100%;
}

section header.style3 h2 {
    color: #fff;
    display: inline-block;
    position: relative;
    padding: 0 30px;
}

section header.style3 h2:before {
    content: "";
    width: 350px;
    right: 100%;
    position: absolute;
    top: 50%;
    margin-top: -2px;
    height: 5px;
    background: url(../img/basic/ele1.png) left center no-repeat;
}

section header.style3 h2:after {
    content: "";
    width: 350px;
    left: 100%;
    position: absolute;
    top: 50%;
    margin-top: -2px;
    height: 5px;
    background: url(../img/basic/ele2.png) right center no-repeat;
}

section header a {
    text-transform: none;
    text-decoration: underline;
}
/*======================
Pricing
=======================*/

.column-head {
    background: #fafafa;
    padding: 15px;
    border-bottom: 1px solid #ddd;
}

.pricing-column:hover .column-head,
.pricing-column.famous .column-head {
    background: #e83b3b;
}

.column-head h3 {
    text-transform: uppercase;
    line-height: 29px;
    margin-bottom: 5px;
}

.pricing-column:hover h3,
.pricing-column:hover .price-tag,
.pricing-column.famous h3,
.pricing-column.famous .price-tag {
    color: #fff;
}

.column-head .price-tag {
    font-size: 18px;
    line-height: 29px;
    color: #000;
}

.pricing-info {
    padding: 29px 16px;
}

.pricing-column {
    border: 1px solid #ddd;
    text-align: center;
    border-radius: 2px;
    overflow: hidden;
}

.pricing.style2 .pricing-column {
    background: #e1e9ef;
}

.pricing-column ul {
    padding: 0;
    margin: 0 0 20px;
}

.pricing-column li {
    font-size: 14px;
    line-height: 40px;
    color: #424242;
    border-bottom: 1px solid #eee;
    display: block;
}

.pricing-column li:last-child {
    border: none;
}

.pricing-info a:hover {
    background: #e83b3b;
    color: #fff;
    border-color: #e83b3b;
}

.pricing-info .btn {
    background: #fafafa;
    color: #222;
    border: 1px solid #ddd;
}

.pricing-column.famous {
    position: relative;
    overflow: hidden;
}

.pricing-column.famous:before {
    background: #fff;
    color: #222;
    content: attr(data-tag);
    font-size: 10px;
    left: 0;
    line-height: 20px;
    padding: 28px 0 5px;
    position: absolute;
    text-transform: uppercase;
    top: 0;
    width: 50%;
    -webkit-transform: rotate(-42deg) translate(-30px, -40px);
    -moz-transform: rotate(-42deg) translate(-30px, -40px);
    -o-transform: rotate(-42deg) translate(-30px, -40px);
    -ms-transform: rotate(-42deg) translate(-30px, -40px);
    -moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.5);
    box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.5);
}
/*========================
22-Verticle Tabs
==========================*/

.tabs-vertical .tab-content {
    border: none;
}

.tabs-vertical .nav-tabs > li {
    background: #ffffff;
    float: none;
    display: block;
    border: 1px solid #e9e9e9;
    border: 0;
    border-bottom: 1px solid #e9e9e9;
    border-right: 1px solid #e9e9e9;
}

.tabs-vertical .nav-tabs > li:last-child {
    border-bottom: none;
}

.tabs-vertical .nav-tabs > li:last-child a {
    border-right: none;
}

.tabs-vertical .nav-tabs > li.active:last-child a {
    border-right: 1px solid #2bb7ff;
}

.tabs-vertical .nav-tabs > li > a {
    padding: 20px;
    font-size: 12px;
    position: relative;
    padding-left: 50px;
    border-left: none;
    border-bottom: 1px solid #fdfdfd;
}

.tabs-vertical .nav-tabs > li.active > a:focus,
.tabs-vertical .nav-tabs > li.active > a:hover {
    background: none;
}

.tabs-vertical .nav-tabs > li.active > a,
.tabs-vertical .nav-tabs > li.active > a:hover,
.tabs-vertical .nav-tabs > li.active > a:focus {
    border-left: none;
    border-top: none;
}

.tabs-vertical .nav > li > a:hover,
.tabs-vertical .nav > li > a:focus {
    background: none;
    border-right-color: #2bb7ff;
}

.tabs-vertical .nav-tabs > li.active {
    border-right: none;
    margin-top: 1px;
}

.tabs-vertical .nav-tabs > li.active a {
    color: #2bb7ff;
    background: none;
}

.tabs-vertical .nav-tabs > li > a > span {
    color: #ababab;
    font-size: 30px;
    position: absolute;
    left: 0;
    top: 20px;
}

.tabs-vertical .nav-tabs > li.active > a > span {
    color: #2bb7ff;
}
/*==========================
parallax
==========================*/

.parallax {
    overflow: hidden;
    clear: both;
    position: relative;
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-position: 50% 0;
    height: 100%;
    width: 100%;
    color: #fff;
    padding: 0;
    background: #78e2dc;
}

.parallax_inner {
    position: relative;
    padding-top: 50px;
    padding-bottom: 50px;
    min-height: 250px;
}


.parallax_overlay .parallax_inner {
    background: rgba(0, 0, 0, 0.4);
}

.parallax_one {
    background-image: url(../demo-data/parallax.jpg);
}

.parallax_two {
    background-image: url(../img/basic/header.png);
}

.parallax_three {
    background-image: url(../img/BG/parallax3.jpg);
}

.parallax_four {
    background-image: url(../img/BG/parallax4.jpg);
}
.parallax_five {
    background-image: url(../demo-data/p1.jpg);   
}


.parallax_pullUp {
    margin-bottom: -65px;
}


/*=================================
Song List
=================================*/

.song-list {
    padding-left: 0px;
}

.song-list li:before {
    color: #414141;
    content: attr(data-before)".";
    position: absolute;
    top: 50%;
    left: 0;
    width: 4%;
    text-align: center;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}

.song-list li {
    display: block;
    height: 90px;
    padding: 7px;
    position: relative;
    overflow: hidden;
}

.song-list li:hover {
    background: #eff1f2;
}

.song-list li > span {
    line-height: normal;
    position: absolute;
    top: 50%;
    text-align: center;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}

.song-list li > span:before {
    content: attr(data-before);
    color: #a0a0a0;
    padding-right: 20px;
}

.song-list li > span.playit:before {
    padding-right: 0;
}

.song-list li > span.playit {
    left: 11%;
    font-size: 30px;
    color: #2c2c2c;
    width: 6%;
    opacity: 0.6;
    cursor: pointer;
}

.song-list li > span.song-title {
    left: 17%;
    text-align: left;
    width: 40%;
}

.song-list li > span.song-author {
    left: 57%;
    text-align: left;
    width: 23%;
}

.song-list li > span.song-time {
    left: 80%;
    text-align: left;
    width: 10%;
}

.song-list li > .song-btn {
    left: 90%;
    width: 9%;
    text-align: center;
    position: absolute;
    top: 50%;
    background: #2c2c2c;
    padding: 10px 0;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    text-decoration: none;
}

.song-list.itunesSongList li > .song-btn,.song-list.itunesFeaturedAlbum li > .song-btn{
   background: none !important;
}
.song-list.itunesSongList li > .song-btn:hover,.song-list.itunesFeaturedAlbum li > .song-btn:hover{
    color: #9ad940;
}
.song-list.itunesSongList li > .song-btn svg,.song-list.itunesFeaturedAlbum li > .song-btn svg{
    width: 100%;
    height: auto;
}

.song-list.itunesSongList li > .song-btn span,.song-list.itunesFeaturedAlbum li > .song-btn span{
    display: block;
}

.song-list li > span.song-vote {
    left: 90%;
    text-align: left;
    width: 10%;
    height: 30px;
}

a.vote-down,
a.vote-down:hover,
a.vote-down:focus {
    color: #d03737;
}

a.vote-up,
a.vote-up:hover,
a.vote-up:focus {
    color: #17e4c2;
}

.song-list li > span.song-vote a {
    text-decoration: none;
    width: 45%;
    height: 30px;
    font-size: 25px;
    text-align: center;
    position: absolute;
    left: 5%;
    top: 0;
    display: inline-block;
}

.song-list li > span.song-vote a + a {
    right: 5%;
    left: auto;
}

.song-list li > .song-btn:hover,
.song-list li> .song-btn:focus {
    background: #d03737;
    color: #fff;
}

.song-list li > span.playit:hover,
.song-list li.active > span.playit {
    opacity: 1;
}

.song-list li > figure {
    background: #000;
    width: 6.5%;
    height: 75px;
    display: block;
    overflow: hidden;
    position: absolute;
    top: 50%;
    left: 4.5%;
    text-align: center;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}


.singleSongPlayer .audio-progress{
    position: absolute;
    width: 100%;
    height: 5px;
    left: 0;
    bottom: 0;
}
.singleSongPlayer .audio-progress .jp-seek-bar,.singleSongPlayer .jp-seek-bar .jp-play-bar{
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    cursor: pointer;
}

.singleSongPlayer .jp-seek-bar .jp-play-bar{
    background: #9ad940;
}
/* ============================
Article
=========================== */
a.postNavigator{
    background: #dfdfdf;
    color: #464646;
    padding: 10px 15px;
    margin-right: 2px;
}
.search-widget{
    width: 100%;
    max-width: 450px;
    float: right;
    position: relative;
    padding-right: 80px;
}
.search-widget input[type="text"]{
    background: #f4f5f5;
    border-radius: 0;
}
.search-widget button,.search-widget inputinput[type="submit"]{
    width: 75px;
    background: #17e4c2;
    color: #fff;
    border: none;
    height: 100%;
    position: absolute;
    right: 0;
    top: 0;
    color: #fff;
    font-size: 18px;
}
.blogNavigator,.search-widget{
    margin-top: 20px;
}
.blogNavigator a.btnBackto{
    padding: 10px 20px;
    margin-right: 5px;
}
.blogNavigator a.btnBackto .fa{
    margin-right: 10px;
}
.blogNavigator a{
    text-transform: uppercase;
    display: block;
    float: left;
}

a.postNavigator:hover{
    background: #464646;
    color: #dfdfdf;
}
.ele-masonry {
    max-width: 535px;
    width: 50%;
}

article {
    border: 1px solid #e7eaeb;
    border-radius: 0px;
    padding: 16px;
    margin-top: 35px;
    margin-bottom: 35px;
    letter-spacing: 1px;
}
article.articleSingle{
    border: none;
    margin-top: 0;
    padding: 0;
}

.single article {
    border: none;
}

article .about-article {
    position: relative;
    padding: 20px 70px;
}

article.articleSingle .about-article .timeStamp{
    position: absolute;
    top: 100%;
    width: 100%;
    left: 0;
    text-align: center;
    margin-top: 10px;
    text-transform: uppercase;
    font-weight: bold;
}
article.articleSingle .about-article{
    border-bottom: 1px solid #b2b2b2;
    margin-bottom: 50px;
    padding-bottom: 10px;
    color: #222;
}

article .about-article .social-list {
    position: absolute;
    right: 0;
    top: 12px;
    margin: 0;
}

article a {
    text-decoration: underline;
}

article.articleSingle a{
    color: #70b312;
    text-decoration: underline;
}

article a.btn {
    margin-top: 20px;
}

article figure {
    text-align: center;
    max-height: 255px;
    overflow: hidden;
}
article.articleSingle{
    color: #5f5f5f;
    font-size: 14px;
    line-height: 28px;
}
article.articleSingle blockquote{
    background: none;
    color: inherit;
    border-left: 2px solid #70b312;
    border-radius: 0;
    padding: 20px;
    margin: 20px;
}
article.articleSingle figure{
    max-height: none;
    margin-bottom: 40px;
}
.single figure,
.single article {
    border-radius: 0;
}

.tagcloud {
    margin-top: 30px;
    margin-bottom: 30px;
}

article.articleSingle .tagcloud a {
    text-decoration: none;
    font-size: 12px;
    font-weight: bold;
    color: #a0a0a0;
    background: #f4f5f5;
    padding: 10px 25px;
    text-decoration: none;
    text-transform: uppercase;
    display: inline-block;
}

.tagcloud a:hover {
    background: #80c420;
    color: #fff;
}

article h1,
article h2,
article h3,
article h4,
article h5,
article h6 {
    margin: 0 auto;
}

article.articleSingle h1,
article.articleSingle h2,
article.articleSingle h3,
article.articleSingle h4,
article.articleSingle h5,
article.articleSingle h6,.post-audio-player h6,.post-audio-player h5,.post-audio-player h4,.post-audio-player h3,.post-audio-player h2,.post-audio-player h1 {
    margin: 15px auto;
    color: #222;
}

article h1 a,
article h2 a,
article h3 a,
article h4 a,
article h5 a,
article h6 a{
    color: #222;
    text-decoration: none;
}
article h1 a:hover,
article h2 a:hover,
article h3 a:hover,
article h4 a:hover,
article h5 a:hover,
article h6 a:hover{
    color: #9ad940;
    text-decoration: none;
}
article h1,.post-audio-player h1 {
    font-size: 18px;
}

article h2,.post-audio-player h2 {
    font-size: 17px;
}

article h3,.post-audio-player h3 {
    font-size: 16px;
}

article h4,.post-audio-player h4 {
    font-size: 15px;
}

article h5,.post-audio-player h5 {
    font-size: 13px;
}

article h6,.post-audio-player h6 {
    font-size: 12px;
}

.single article h1 {
    font-size: 25px;
}

.single article h2 {
    font-size: 22px;
}

.single article h3 {
    font-size: 18px;
}

.single article h4 {
    font-size: 16px;
}

.single article h5 {
    font-size: 15px;
}

.single article h6 {
    font-size: 14px;
}

article .about-article > span {
    color: #ababab;
}

article blockquote {
    background: #2c2c2c;
    border-radius: 5px;
    color: #fff;
    font-style: italic;
}

.article-slider {
    position: relative;
}

.article-slider .owl-nav > div {
    border: 1px solid #2c2c2c;
    color: #2c2c2c;
    height: 32px;
    width: 32px;
    line-height: 29px;
    display: block;
    position: absolute;
    top: 25px;
    z-index: 50;
    text-align: center;
    border-radius: 2px;
    overflow: hidden;
    font-size: 24px;
}

.article-slider .owl-nav > div:hover {
    background: #17e4c2;
    color: #fff;
    border-color: #17e4c2;
}

.article-slider div.owl-prev {
    left: 20px;
}

.article-slider div.owl-next {
    left: 60px;
}

.blog-wrapper article {
    max-width: 530px;
    margin-left: auto;
    margin-right: auto;
    position: relative;
}

.article-meta {
    position: absolute;
    padding: 0;
    margin: 0;
    top: 30px;
    left: -80px;
}

.article-meta li {
    display: block;
    margin-bottom: 18px;
}

.article-meta li a {
    height: 50px;
    width: 50px;
    border-radius: 50%;
    line-height: 50px;
    background: #17e4c2;
    color: #fff;
    display: block;
    text-align: center;
    font-size: 140%;
    position: relative;
}

.article-meta li.no-comments a {
    background: #dfdfdf;
}

.comments-count {
    position: absolute;
    font-size: 80%;
    width: 26px;
    height: 26px;
    right: -8px;
    top: -8px;
    border-radius: 50%;
    line-height: 26px;
    background: #2c2c2c;
}

.article-url {
    background: #2c2c2c;
    border-radius: 3px;
    font-size: 120%;
    padding: 30px 0;
    text-align: center;
    color: #fff;
}

.article-url a {
    color: #fff;
    text-decoration: none;
}

.article-url i {
    background: #464646;
    height: 58px;
    width: 58px;
    font-size: 140%;
    margin-right: 10px;
    display: inline-block;
    border-radius: 50%;
    line-height: 58px;
}

.single article .about-article {
    padding: 0;
}

.single article .about-article h1 {
    border-bottom: 1px solid #b2b2b2;
    padding-bottom: 10px;
    padding: 0 70px 10px 70px;
    margin-bottom: 15px;
}

.single article .about-article .social-list {
    top: 0;
}

.single article .about-article > span {
    font-size: 130%;
}

.single figure {
    margin-top: 20px;
    margin-bottom: 40px;
}
/* ============================
Tweet
=========================== */

.tweet li {
    font-size: 25px;
    display: block;
    padding: 20px;
    position: relative;
}

.tweet li:before {
    font-family:'FontAwesome';
    content: '\f079';
    position: absolute;
    left: 0;
    top: 0;
}

.tweet li .date {
    display: block;
    font-size: 15px;
    color: #000;
    color: rgba(0, 0, 0, 0.2);
    width: 40%;
    text-transform: uppercase;
    margin: 30px auto 0;
    padding-top: 15px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.parallax-icon {
    font-size: 50px;
    display: block;
}

.tweet li a {
    text-decoration: underline;
    color: #fff;
}
/*==============================
Navigators
================================*/

.navigators {
    margin: 15px auto;
}

.navigators a,.navigators button {
    display: block;
    width: 100%;
    color: #a0a0a0;
    padding: 10px;
    font-size: 12px;
    text-decoration: none;
    background: #e7eaeb;
    border: none;
    text-transform: inherit;
}
.navigators a.disabled,.navigators button.disabled{
    display: none;
}
.navigators a i,.navigators button i {
    margin-left: 10px;
    margin-right: 10px;
}

.navigators a:hover,.navigators button:hover {
    background: #17e4c2;
    color: #fff;
}
/* ============================
27-Events
=========================== */

.event-unit a.eventTitle{
    color: #fff;
}
.event-unit-slide{
    padding: 1px 0;
}
.event-unit-slide .event-unit{
    margin: 0 !important
}
.event-unit {
    position: relative;
    background: #2c2c2c;
    height: 96px;
    overflow: hidden;
    margin-bottom: 13px;
}

.event-unit > div {
    position: absolute;
    height: 100%;
    top: 0;
}

.event-unit > div > div,
.event-unit > div > span,
.event-unit > .btn,
.event-unit > div > figure,
.event-unit > div > i {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}

.event-unit > .btn {
    width: auto;
    left: 88%;
    min-width: 100px;
    padding: 10px 30px;
}

.event-unit > div:before {
    content: "";
    height: 4px;
    left: 0;
    bottom: 0;
    position: absolute;
    background: #17e4c2;
    width: 100%;
}

.event-unit > div:after {
    content: "";
    position: absolute;
    width: 1px;
    background: #575757;
    height: 60px;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}

.event-unit .time-date {
    width: 16%;
    max-width: 135px;
    left: 0;
    text-align: center;
    color: #fff;
}

.event-unit .event-info {
    left: 16%;
    width: 48%;
    max-width: 510px;
    color: #fff;
}

.event-unit .event-venue:after {
    display: none;
}

.event-unit .event-venue {
    left: 64%;
    width: 22%;
    max-width: 245px;
    color: #fff;
}

.event-unit > div > i {
    color: #17e4c2;
    font-size: 22px;
}

.event-unit > div > div {
    left: 38px;
    color: #fff;
}

.event-unit small {
    display: block;
    color: #979797;
}

.event-unit .event-info figure {
    width: 42px;
    overflow: hidden;
    left: 0;
}

.event-unit .event-info span {
    left: 65px;
}


/*=================================
Events countdown
==================================*/

.events-countdown .event{
    color: #fff;
}

.events-countdown .event h2, .events-countdown .event h6{
    text-transform: uppercase;
}

.countdown{
    padding: 0;
}

.countdown > li{
    display: block;
    float: left;
    height: 60px;
    width: 60px;
    position: relative;
    top: 50%;
    font-size: 11px;
    text-transform: lowercase;
    background: rgba(0, 0, 0, 0.5);
    text-align: center;
    border-radius: 50%;
    margin: 0 10px;
}

.countdown > li:first-child{
    margin-left: 0;
}

.countdown > li:last-child{
    margin-right: 0;
}

.countdown > li .text{
    position: absolute;
    top: 50%;
    transform: translate(0px, -50%);
    -webkit-transform: translate(0px, -50%);
    -moz-transform: translate(0px, -50%);
    -o-transform: translate(0px, -50%);
    -ms-transform: translate(0px, -50%);
    left: 0;
    width: 100%;
    text-align: center;
    color: #fff;
}


.countdown > li span{
    font-size: 15px;
}

.countdown > li p{
    margin: 0;
    padding: 0;
}

/*=================================
events finder
==================================*/

.events-finder header{
    border-bottom: 1px solid #b2b2b2;
}

.event-title{
    float: left;
    margin-right: 30px;
}

.event-title h3{
    margin-bottom: 0;
}

.event-title h2{
    margin-top: 0;
    text-transform: uppercase;
}

.event-form form{
    margin-bottom: 0;
    margin-top: 9px;
}

.event-form .form-input{
    position: relative;
    float: left;
    margin-right: 30px;
}

.event-form .form-input input{
    background: #f4f5f5;
    height: 40px;
    width: 240px;
    border-radius: 0;
}

.event-form .form-input .icon{
    border: none;
    color: #c3c8cd;
    cursor: pointer;
    font-size: 16px;
    height: 100%;
    width: 40px;
    line-height: 40px;
    position: absolute;
    right: 0;
    top: 0;
    text-align: center;
}

.form-input.select-date input{
    display: block !important;
} 


.form-input.select-location .custome-select{
    height: 40px;
    width: 180px;
    position: relative;
}

.form-input.select-location .custome-select b.fa{
    border: none;
    color: #c3c8cd;
    cursor: pointer;
    font-size: 16px;
    height: 100%;
    width: 40px;
    line-height: 40px;
    position: absolute;
    right: 0;
    top: 1px;
    text-align: center;
}

.form-input.select-location .custome-select > span{
    display: block;
    height: 100%;
    width: 100%;
    padding: 0 40px 0 35px;
    line-height: 40px;
    color: #9ea4a7;
    background: #f4f5f5;
}

.event-form button{
    height: 40px;
    border: none;
    padding: 0 20px;
    text-transform: uppercase;
}

.event-form button:hover{
    color: #20222d;
}


.featured-events{
    margin: 20px 0;
}

.featured-events .featured-event{
    margin: 18px 0;
    position: relative;
}

.featured-event figure{
    position: relative;
}

.featured-event figure figcaption{
    position: absolute;
    left: 6px;
    bottom: 0;
    padding: 7px;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
}

.featured-event .store-product .product-info{
    text-align: left;
}


.photography .xvPackeryItem.w2 {
    width: 50%;
}
.photography .xvPackeryItem.featured {
    height: 400px;
}
.photography .xvPackeryItem  {
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 200px;
    position: relative;
    width: 25%;
}


.photography .xvPackeryItem:hover a{
    display: block;
}


.photography .xvPackeryItem a {
    transition: ease-in-out .7s;

    background: rgba(23, 228, 194, 0) linear-gradient(
  to bottom,
  rgba(28, 214, 184, 0.93) 0%,
  rgba(19, 190, 163, 0.93) 65%,
  rgba(23, 228, 194, 0.93) 100%
) repeat scroll 0 0;
    color: #fff;
    display: none;
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
    z-index: 99;
}
.photography .xvPackeryItem  a .eventInfo{
    position: absolute;
    left: 0;
    top: 50%;
    transform: translate(0px, -50%);
    -webkit-transform: translate(0px, -50%);
    -moz-transform: translate(0px, -50%);
    -o-transform: translate(0px, -50%);
    -ms-transform: translate(0px, -50%);
    text-align: center;
    color: #fff;
    width: 100%;
    transition: ease-in-out .7s;
}
.photography .xvPackeryItem  a .eventInfo h3{
    position: relative;
}
.photography .xvPackeryItem  a .eventInfo h3:after{
    position: absolute;
    top: 100%;transition: ease-in-out .7s;
    background: #fff;
    height: 2px;
    width: 20px;
    left: 50%;
    margin-left: -10px;
    margin-top: 4px;
    content: "";
}

/*=================================
event single
==================================*/

.singleEventDetails {
    background: #eaeef2;
    border-radius: 4px;
    padding: 20px;
}

.singleEventDetails h3 {
    color: #414952;
    margin-bottom: 20px;
    padding-left: 10px;
}

.singleEventDetails h3 span {
    margin-right: 18px;
}

.singleEventDetails table {
    color: #9199a2;
    display: block;
    margin-bottom: 20px;
}

.singleEventDetails .style {
    color: #414952;
}

.singleEventDetails .table > thead > tr > th,.singleEventDetails .table > tbody > tr > th, .singleEventDetails .table > tfoot > tr > th, .singleEventDetails .table > thead > tr > td, .singleEventDetails .table > tbody > tr > td, .singleEventDetails .table > tfoot > tr > td{
    border: none;
}


.event-map.maplarge {
    height: 350px;
    margin-top: 0;
}
.event-map {
    height: 240px;
    margin-top: 20px;
    width: 100%;
}






/*=================================
Footer
==================================*/

footer.doc-footer {
    margin-top: 40px;
    color: #90989c;
    font-size: 11px;
    padding-bottom: 50px;
    letter-spacing: 1px;
}

footer .social-list {
    margin-bottom: 30px;
}

footer strong {
    font-size: 150%;
    font-weight: 600;
    display: block;
    margin-bottom: 10px;
}
/*==============================
store product
==============================*/

.store-grid {
    margin-bottom: 15px;
    margin-top: 20px;
}

.store-product {
    position: relative;
    width: 20%;
    padding: 6px;
    float: left;
    margin-bottom: 5px;
}
.store-grid-slider .store-product{
    width: 100%;
    float: none;
}
.store-product h3 {
    font-size: 100%;
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 20px;
}

.store-product figure {
    position: relative;
    text-align: center;
    margin-bottom: 10px;
    max-height: 220px;
    overflow: hidden;
}

.store-product figure > figcaption > .btn {
    padding: 10px 25px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}

.store-product figure > figcaption > .btn i {
    margin-right: 5px;
    position: relative;
    top: -2px;
}

.store-product figure > figcaption {
    position: absolute;
    left: 0;
    top: 0;
    background: #17e4c2;
    background: rgba(124, 191, 29, 0.93);
    width: 100%;
    height: 100%;
    visibility: hidden;
    opacity: 0;
}

.store-product figure:hover > figcaption {
    visibility: visible;
    opacity: 1;
}

.store-product h6 {
    font-size: 80%;
    color: #a0a0a0;
    margin: 0;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    height: 16px;
}

.store-product h6 .fa{
    padding-right: 5px;
}

.store-product .product-info {
    padding-right: 55px;
    position: relative;
}

.product-info .price-tag {
    position: absolute;
    right: 0;
    top: 0px;
    color: #a0a0a0;
}
/*=============================
Comments
=============================*/

.comment-list {
    padding: 0;
    color: #8a8a8a;
}

.comment-list ol,.comment-list > .comment-list {
    padding: 0;
    padding-left: 60px
}

.comment-list li.comment {
    margin-top: 65px;
    position: relative;
    display: block;
}

.comment a.author_avatar {
    position: absolute;
    left: 10px;
    top: 0;
    display: block;
    width: 75px;
    height: 75px;
    text-align: center;
    padding: 10px;
    border: 1px solid #dfdfdf;
    z-index: 10;
    border-radius: 10px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
}

.comment a.author_avatar img {
    border-radius: 10px;
    display: block;
}

.comment .media-heading {
    color: #80c420;
    margin-top: 0;
}

.comment .comment-inner {
    position: relative;
    padding: 15px;
    border: 1px solid #dfdfdf;
    border-radius: 10px;
    margin-left: 120px;
}

.commentTimeStamp {
    position: absolute;
    top: -30px;
    right: 90px;
    text-align: right;
}

.commentTimeStamp a,
.media-body .reply a {
    color: #cacbcb;
    text-decoration: none;
    font-weight: bold;
    text-transform: uppercase;
}

.comment .media-body .reply {
    position: absolute;
    top: -30px;
    right: 20px;
    text-align: right;
}


/*===================
Pagination
===================*/
ul.pagination:before{
    position: absolute;
    left: 0;
    top: 12px;
    content:attr(data-before);
    color: #c5c8c9;
    font-size: 18px;
}

ul.pagination{
    display: block;
    padding: 0;
    margin: 20px auto;
    border-top: 1px solid #b2b2b2;
    text-align: right;
    position: relative;
}
.pagination li{
    display: inline-block;
}
.pagination li a,.pagination li > span{
    display: block;
    padding: 10px;
    font-weight: bold;
    font-size: 20px;
    text-decoration: none;
    color: #2c2c2c;
}
.pagination li.active a,.pagination li.active > span,.pagination li a:hover{
    color: #9ad940;
}
.pagination li.active a,.pagination li.active > span{
     pointer-events: none;
}
/* ============================
27-Responsive
=========================== */
/* Large desktop */

@media (max-width: 1300px) {
    .xv-menuwrapper{
        margin-right: 180px;
    }
}

@media (max-width: 1199px) {
    .album-cover{
        
    }
    
    .album-cover{
        top: 0 !important;
        max-width: none;
        width: auto;
        height: 100%;
    }
    .album-cover-wrap{
        height: 310px;
    }
    .album-grid-wrap.style3 .album-unit {
        width: 20%;
    }
    .ele-masonry {
        max-width: 470px;
    }
    article .about-article {
        text-align: left !important;
        padding-left: 0px;
        padding-right: 80px;
        padding-top: 10px;
    }
    .single article .about-article h1{
        padding-left: 0;
    }
    .event-unit .event-info {
        width: 40%;
    }
    .event-unit .event-venue {
        left: 58%;
    }
    .event-unit > .btn {
        left: 85%;
    }
}

@media (min-width: 993px) {
    .xv-menuwrapper .dl-menu > li.parent:hover > ul,
    .xv-menuwrapper .dl-menu > li.parent > ul > li.parent:hover > ul {
        visibility: visible;
        opacity: 1;
        transform: translateY(0);
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -o-transform: translateY(0);
        -ms-transform: translateY(0);
    }
    .gobackLvl{
        display: none !important;
    }
}
@media (max-width: 992px) {
    .menuTrigger{
        display: block;
    }
    .doc-header .sound-trigger{
        float: right;
    }
    .store-product{
        width: 25%;
    }
    .doc-header .container{
        position: relative;
    }
    .xv-menuwrapper .dl-menu > li.parent{
        position: static;
    }
    .xv-menuwrapper .dl-menu > li.parent > ul,.xv-menuwrapper .dl-menu > li.parent:last-child > ul{
        transition:All 0.3s ease;
        -webkit-transition:All 0.3s ease;
        -moz-transition:All 0.3s ease;
        -o-transition:All 0.3s ease;
        overflow: hidden;
        position: absolute;
        top: 0;
        left: auto;
        right: -300px;
        width: 300px;
        min-width: 0;
        height: 100%;
        visibility: hidden;
        opacity: 1;
        transform: translateY(0);
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -o-transform: translateY(0);
        -ms-transform: translateY(0);
        background: #222;
        z-index: 20;
        padding-top: 75px;
    }
    a.backLvl{
        position: relative;
    }
    a.backLvl .fa{
        position: absolute;
        right: 20px;
        line-height: 0;
        top: 50%;
    }
    .xv-menuwrapper .dl-menu > li.parent > ul.expand{
        visibility: visible;
        right: 0;
    }
    
    
    .xv-menuwrapper .dl-menu > li.parent > a{
        position: relative;
    }
    .xv-menuwrapper .dl-menu > li.parent > a:after{
        font-family:'FontAwesome';
        content:"\f0da";
        position: absolute;
        right: 10px;
        top: 50%;
        color: #a0a0a0;
        line-height: 0;
        font-size: 20px;
    }
    
    .xv-menuwrapper .dl-trigger{
        display: block;
    }
    .radio-style.xv-menuwrapper .dl-menu{
        padding-top: 0;
    }
    .xv-menuwrapper .dl-menu{
        margin-right: 0px;
        position: fixed;
        top: 0;
        left: -400px;
        z-index: 999;
        width: 300px;
        height: 100%;
        visibility: hidden;
        background: #222;
        padding-top: 75px;
        overflow: hidden;
        transition:All 0.3s ease;
        -webkit-transition:All 0.3s ease;
        -moz-transition:All 0.3s ease;
        -o-transition:All 0.3s ease;
    }
    .xv-menuwrapper .dl-menu.xvMenuShow{
        left: 0;
        visibility: visible;
    }
    .xv-menuwrapper .dl-menu.backed{
        left: -300px;
        width: 600px;
    }
    .xv-menuwrapper .dl-menu > li{
        float: none;
        width: 100%;
        height: auto;
        border-bottom: 1px solid #000;
        border-bottom: 1px solid rgba(0,0,0,0.3);
    }
    .xv-menuwrapper .dl-menu > li.parent > ul > li, .xv-menuwrapper .dl-menu > li.parent > ul > li.parent ul li{
        padding: 0;
    }
    
    .xv-menuwrapper .dl-menu > li.parent > ul > li > a,.xv-menuwrapper .dl-menu > li > a{
        line-height: normal;
        padding: 15px;
        text-transform: uppercase;
    }
    .xv-menuwrapper .dl-menu > li > a:hover,
    .xv-menuwrapper .dl-menu > li a:hover{
        background: rgba(0,0,0,0.3);
    }
    .the-xv-Jplayer{
        right: 0;
        position: relative;
        width: 100%;
    }
    .the-xv-Jplayer .player-status{
        width: 100%;
    }
    .album-grid-wrap.style4 .album-unit {
        width: 16.666%;
    }
    
    .xv_slider .xv_slide {
        padding-top: 0;
    }
    .ele-masonry {
        max-width: 48%;
    }
    .event-unit .event-info {
        width: 40%;
    }
    .event-unit > .btn {
        left: 82%;
    }
    .event-unit .event-venue {
        left: 56%;
    }
    article {
        margin-top: 15px;
        margin-bottom: 15px;
    }
    .masonry-container {
        margin-top: 30px;
        padding-bottom: 30px;
    }
    .album-grid-wrap.style2 .album-unit,.album-grid-wrap.style3 .album-unit {
        width: 25%;
    }
    .album-grid-wrap.style3 .album-unit {
        width: 25%;
    }
    .song-list li > span:before {
        display: none;
    }
    .song-list li > figure {
        width: 10%;
    }
    .song-list li > figure img {
        opacity: 0.65;
    }
    .song-list li > span.playit {
        left: 7%;
        width: 5%;
        color: #fff;
        opacity: 1;
    }
    .song-list li > span.song-title {
        left: 20%;
        width: 30%;
    }
}

@media (max-width:860px){
    .album-grid-wrap.style2 .album-unit,.album-grid-wrap.style3 .album-unit{
        width: 33.33334%;
    }
}

@media (min-width: 600px) {
    
    .project .hover {
        transition: All 0.4s ease-in-out;
        -webkit-transition: All 0.4s ease-in-out;
        -moz-transition: All 0.4s ease-in-out;
        -o-transition: All 0.4s ease-in-out;
    }
    .pricing-column h3,
    .price-tag,
    .column-head,
    .member figcaption {
        transition: All 0.3s ease-in-out;
        -webkit-transition: All 0.3s ease-in-out;
        -moz-transition: All 0.3s ease-in-out;
        -o-transition: All 0.3s ease-in-out;
    }
    .flex-control-paging li a {
        transition: All 0.25s ease-in-out;
        -webkit-transition: All 0.25s ease-in-out;
        -moz-transition: All 0.25s ease-in-out;
        -o-transition: All 0.25s ease-in-out;
    }
}

@media (max-width: 767px) {
    .store-product{
        width: 33.333333334%;
    }
    .search-widget{
        float: none;
        max-width: none;
    }
    article.articleSingle{
        font-size: 18px;
    }
    .blogNavigator{
        display: none;
    }
    
    .navbar-default > .container{
        height: 55px;
    }
    .album_overview{
        padding-left: 0;
    }
    .album-header{
        height: auto;
        padding-bottom: 20px;
    }
    .album_overview h1{
        margin-top: 15px;
    }
    .album-header .price-tag{
        display: block;
        float: none !important;
    }
    .album-cover-wrap{
        height: 100%;
        top: 0;
        left: 0;
    }
    .album-thumb{
        position: relative;
        left: auto;
        top: auto;
    }
    .singleSongPlayer .audio-progress{
        bottom: auto;
        top: 0;
    }
    .multiSearchWrapper{
        display: none;
    }
    .album-grid{
        margin-top: 0;
    }
    body {
        font-size: 13px;
    }
    .xv_slider .xv_slide{
        height: 340px;
    }
    .custom-slider .about-album,.albumAction{
        text-align: center;
    }
    .slide-visual,ul.pagination:before,.event-unit > div:before,
    .event-unit > div:after {
        display: none;
    }
    .search-actions ul + ul {
        border: none;
    }
    .event-unit > div,
    .event-unit > div > div,
    .event-unit > div > span,
    .event-unit > .btn,
    .event-unit > div > figure,
    .event-unit > div > i {
        position: static;
        top: auto;
        height: auto;
        transform: translateY(0);
        -webkit-transform: translateY(0);
        -moz-transform: translateY(0);
        -o-transform: translateY(0);
        -ms-transform: translateY(0);
    }
     
    .event-unit {
        position: relative;
        padding: 10px;
        padding-left: 150px;
        height: auto;
        max-width: 400px;
        margin: 5px auto;
    }
    .event-unit .event-info,
    .event-unit .event-info span,
    .event-unit .event-venue,
    .event-unit > div > div,
    .event-unit > .btn {
        width: auto;
    }
    .event-unit .event-info > figure {
        width: 120px;
        height: 110px;
        position: absolute;
        left: -140px;
        top: 0px;
    }
    .event-unit .time-date {
        position: absolute;
        left: -130px;
    }
    .event-unit .event-venue {
        left: 0;
        margin: 10px 0;
        padding-left: 30px;
        position: relative;
    }
    .event-unit .event-venue i {
        position: absolute;
        left: 0;
    }
    .navigators a i {
        margin-left: 0;
        margin-right: 0;
    }
    .navigators a {
        padding: 10px 0;
    }
    .article-meta {
        position: relative;
        left: auto;
        top: auto;
        margin: 20px 0 0;
    }
    .article-meta li {
        display: inline-block;
        margin-bottom: 18px;
    }
    .article-meta li a {
        border-radius: 3px;
    }
    .singleSongPlayer .audio-progress{
        height: 10px;
    }
    .song-list{
        margin: 0 -10px;
    }
    .song-list li {
        float: left;
        width: 20%;
        height: auto;
        padding: 0;
    }
    .song-list li .song-title,.song-list li .song-author{
        display: none
    }
    .song-list li > .song-btn{
        max-width: none;
        width: 100%;
        display: block;
    }
    .song-list li > figure {
        height: auto;
    }
    .song-list li > figure img {
        width: 100%;
    }
    .song-list li::before {
        display: none;
    }
    .song-list li > span.song-time {
        display: none;
    }
    .song-list li > figure,
    .song-list li > span.song-title,
    .song-list li > span.song-author,
    .song-list li > .song-btn {
        width: 100%;
        position: relative;
        left: auto;
        top: auto;
        transform: translateY(0%);
        -webkit-transform: translateY(0%);
        -moz-transform: translateY(0%);
        -o-transform: translateY(0%);
        -ms-transform: translateY(0%);
    }
    
    .song-list.itunesFeaturedAlbum li > .song-btn,.song-list.itunesSongList li > .song-btn{
        text-align: left;
    }
    .song-list li > span {
        display: block;
    }
    .song-list li > span.song-title {
        font-size: 16px;
        margin-top: 10px;
    }
    .song-list li > span.playit {
        font-size: 40px;
        padding: 40px;
        width: 100%;
        left: 0;
        top: 40%;
        text-align: center;
    }
    .comment .comment-inner{
        border-width: 0;
        border-top-width: 1px;
        border-radius: 0;
        margin: 0;
        padding: 0;
    }
    .comment a.author_avatar img{
        border-radius: 0;
    }
    .comment a.author_avatar{
        height: auto;
        width: auto;
        border: none;
        position: relative;
        left: auto;
        top: auto;
        padding: 0 0 10px;
        border-radius: 0;
        -webkit-transform: rotate(0);
        -moz-transform: rotate(0);
        -o-transform: rotate(0);
        -ms-transform: rotate(0);
    }
    .comment-list ol, .comment-list > .comment-list{
        padding: 0;
    }
    .comment-list .comment{
        padding: 20px;
    }
    .commentTimeStamp{
        position: relative;
        left: auto;
        top: auto;
        right: auto;
        margin-bottom: 10px;
        display: block;
        text-align: left;
    }
    .comment-list ol .comment, .comment-list > .comment-list .comment{
        padding-left: 0;
    }
    .comment-list li.comment{
        margin-top: 15px;
    }
    .ele-masonry{
        width: 96%;
        margin-left: 2%;
        max-width: none;
    }
    .album-unit{
        width: 50%;
    }
    .album-unit:first-child{
        margin-left: 0;
    }
    .album-grid-wrap{
        padding-top: 60px;
    }
    .album-control,.album-control.bottom-right{
        width: 50%;
        height: 50px;
        top: 0px;
        bottom: auto;
    }
    .search-filters{
        display: none;
    }
}

@media (max-width: 580px) {
    .store-product{
        width: 50%;
    }
    .song-list li {
        width: 33.33334%;
    }
    .album-grid-wrap.style4 .album-unit {
        width: 33.333%;
    }
    
    .album-grid-wrap.style2 .album-unit,.album-grid-wrap.style3 .album-unit{
        width: 50%;
    }
    .ele-masonry {
        width: 98%;
        max-width: 400px;
        margin-left: auto;
        margin-right: auto;
        position: relative !important;
        left: auto !important;
        top: auto !important;
    }
}

@media (max-width: 490px) {
    .song-list li {
        width: 50%;
    }
    
    .jp-playlist{
        font-size: 12px;
    }
    .the-xv-Jplayer .audio-title .jp-artist{
        display: none;
    }
    .the-xv-Jplayer .audio-title{
        top: 100%;
        margin-top: -30px;
        left: 15px;
    }
    .jp-volume-controls{
        margin-top: -30px;
    }
    .the-xv-Jplayer .controls{
        margin-top: -30px;
    }
    
}

@media (max-width:360px){
    .store-product{
        width: 100%;
    }
    .song-list li {
        width: 50%;
    }
    .album-grid-wrap.style2 .album-unit,.album-grid-wrap.style3 .album-unit{
        width: 100%;
    }
    .album-grid-wrap.style4 .album-unit {
        width: 49.999%;
    }

    .portfolio-home-wrap {
        padding: 0 28px;
    }

    .portfolio-home-wrap .album-control,
    .portfolio-home-wrap .album-control.bottom-right {
        width: 28px;
        height: 28px;
        margin-top: -14px;
    }

    .portfolio-home-card img {
        height: 190px;
    }

    .portfolio-home-card figcaption {
        padding: 14px 12px 12px;
    }

    .portfolio-home-card figcaption h3 {
        font-size: 16px;
    }
}


/*=======================================
Dark Skin
========================================*/
.theDarkSkin{
    color: #acacac;
    background: #2c2c2c;
}
.theDarkSkin .articleSingle{
    color: #acacac;
}
.theDarkSkin section header.style3{
    color: #222;
}

.theDarkSkin header h2,.theDarkSkin header h1,.theDarkSkin header h3,.theDarkSkin  .song-list li > span,.song-list li:before,.theDarkSkin .song-list li span.jp-controls-holder,.theDarkSkin article h1 a,.theDarkSkin article h2 a,.theDarkSkin article h3 a,.theDarkSkin article h4 a,.theDarkSkin article h5 a,.theDarkSkin article h6 a,.theDarkSkin .sound-trigger,.theDarkSkin .sound-control,.theDarkSkin .btn:hover, .theDarkSkin .btn:focus,.theDarkSkin  .btn.focus,.theDarkSkin article.articleSingle h1,.theDarkSkin article.articleSingle h2,.theDarkSkin  article.articleSingle h3,.theDarkSkin article.articleSingle h4,.theDarkSkin article.articleSingle h5,.theDarkSkin article.articleSingle h6{
    color: #fff;
}
.song-list li > span.playit{
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    -moz-opacity: 1;
    -khtml-opacity: 1;
    opacity: 1;
}
.theDarkSkin article,.theDarkSkin section header.style5,.theDarkSkin .comment .comment-inner,.theDarkSkin article.articleSingle .about-article,.theDarkSkin .search-filters,.theDarkSkin .search-actions ul + ul,.theDarkSkin ul.pagination{
    border-color: #464646;
}
.theDarkSkin .btn-grey,.theDarkSkin .song-list li > span:before,.theDarkSkin a.postNavigator,.theDarkSkin .pagination li a,.theDarkSkin .pagination li > span,.theDarkSkin ul.pagination:before,.theDarkSkin .searched-for:before,.theDarkSkin .multiSearchWrapper{
    color: #828282
}
.theDarkSkin a.postNavigator:hover,.theDarkSkin .comments-count{
    background: #fff;
    color: #2c2c2c;
}
.theDarkSkin .xv_slider,.theDarkSkin .multiSearchWrapper-inner input,.theDarkSkin .multiSearchWrapper-inner,.album-control,.theDarkSkin .btn-grey,.theDarkSkin  .song-list li:hover,.theDarkSkin .event-unit,.theDarkSkin input[type="text"], .theDarkSkin input[type="tel"],.theDarkSkin input[type="email"], .theDarkSkin  input[type="password"],.theDarkSkin textarea,.theDarkSkin .circular.social-list li a,.theDarkSkin article.articleSingle .tagcloud a,.theDarkSkin a.postNavigator{
    background: #464646;
}
.theDarkSkin .post-audio-player,.theDarkSkin .singleEventDetails{
    background: #373737;
}
.theDarkSkin .singleEventDetails .style{
    color: #fff;
}
.theDarkSkin .flex-control-paging li a{
    background: #636363;
    background: rgba(255,255,255,0.1);
}
.theDarkSkin .flex-control-paging li a.flex-active,.theDarkSkin input[type="text"]:focus, .theDarkSkin input[type="tel"]:focus,.theDarkSkin input[type="email"]:focus, .theDarkSkin  input[type="password"]:focus,.theDarkSkin textarea:focus,.theDarkSkin .circular.social-list li a:hover{
    background: #fff;
}
.theDarkSkin .event-unit > div:before{
    background: #6f6f6f !important;
}
.theDarkSkin .article-meta li.no-comments a{
    background: #828282;
}
.theDarkSkin .circular.social-list li a:hover{
    color: #2c2c2c !important;
}

.theDarkSkin .s-keyword,.theDarkSkin .search-actions ul li.active a,.theDarkSkin  .search-actions ul li a:focus,.theDarkSkin  .search-actions ul li a:hover,.theDarkSkin .btn-transparent{
    color: #fff !important;
}
.theDarkSkin .btn-transparent{
    border-color: #fff !important;
}







/* FIX: Album Karussell Bilder quadratisch machen */
.album-grid.owl-carousel .album-unit figure {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 100%; /* Dies erzeugt ein 1:1 Seitenverh�ltnis */
    overflow: hidden;
}

.album-grid.owl-carousel .album-unit img {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   object-fit: cover; /* Stellt sicher, dass das Bild den Bereich ausf�llt, ohne sich zu verzerren */
}



/* FIX: Album Karussell Bilder quadratisch machen */
.album-grid.owl-carousel .album-unit figure {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 100%; /* Dies erzeugt ein 1:1 Seitenverh�ltnis */
    overflow: hidden;
}

.album-grid.owl-carousel .album-unit img {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   object-fit: cover; /* Stellt sicher, dass das Bild den Bereich ausf�llt, ohne sich zu verzerren */
}


/* ==========================================================================
   PAGE-SPECIFIC STYLES – merged into main.css
   Sources: webdesign-parent-page.css, sem-theme-page.css, seo-theme-page.css,
            local-seo-theme-page.css, sea-theme-page.css, related-links.css,
            webdesign-service-links.css, portfolio-page.css, contact-page.css,
            services-overview-page.css, webdesign-service-shell.css,
            webdesign-tab-pills.css
   ========================================================================== */

/* ==========================================================================
   Webdesign Subpage Styles (webdesign-parent-page.css)
   ========================================================================== */

/* ---- Subpage Hero ---- */
.webdesign-subpage-hero {
    padding: 120px 0 70px;
    text-align: center;
    position: relative;
    background: #ffffff;
}
.webdesign-subpage-hero::after {
    content: '';
    display: block;
    width: 66px;
    height: 3px;
    background: linear-gradient(90deg, #17e4c2, #1fecb9);
    margin: 24px auto 0;
    border-radius: 2px;
}
.webdesign-subpage-kicker {
    display: inline-block;
    font-size: 13px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #17e4c2;
    font-weight: 600;
    margin-bottom: 18px;
}
.webdesign-subpage-hero h1 {
    font-size: 38px;
    font-weight: 700;
    color: #0e1528;
    line-height: 1.2;
    margin: 0 0 18px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}
.webdesign-subpage-hero p {
    font-size: 17px;
    color: #3f4b5e;
    line-height: 1.8;
    max-width: 680px;
    margin: 0 auto;
}

/* ---- Animated Sections (fade-in on scroll) ---- */
.wd-animate-section {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}
.wd-animate-section.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ---- Content Section (light) ---- */
.wd-section {
    padding: 80px 0;
    background: linear-gradient(35deg, #28418777, #0b1835e6);
}

/* ---- Alt section (light gray) ---- */
.wd-section-alt {
    background: #f7f8fa;
}

/* ---- Dark section with blur/transparency ---- */
.wd-section-dark {
    background: rgba(14, 21, 40, 0.92);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
}
.wd-section-dark h2,
.wd-section-dark h3,
.wd-section-dark strong {
    color: #ffffff;
}
.wd-section-dark p,
.wd-section-dark li {
    color: rgba(255, 255, 255, 0.82);
}
.wd-section-dark li::before {
    background: #1fecb9;
}
.wd-section-dark .wd-accent {
    color: #1fecb9;
}

/* ---- Light section text ---- */
.wd-section h2 {
    font-size: 28px;
    font-weight: 700;
    color: #0e1528;
    margin: 0 0 18px;
    line-height: 1.3;
}
.wd-section h2 .wd-accent {
    color: #17e4c2;
}
.wd-section p {
    font-size: 16px;
    color: #fff;
    line-height: 1.85;
    margin-bottom: 16px;
}
.wd-section ul {
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
}
.wd-section ul li {
    position: relative;
    padding-left: 26px;
    margin-bottom: 14px;
    color: #3f4b5e;
    font-size: 15px;
    line-height: 1.7;
}
.wd-section ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 9px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #17e4c2;
}
.wd-section ul li strong {
    color: #0e1528;
}

.wd-feature-carousel {
    display: flex;
    gap: 18px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 8px 4px 28px;
    scrollbar-width: none;
}
.wd-feature-carousel::-webkit-scrollbar { display: none; }
.wd-feature-carousel::after { content: ''; flex: 0 0 1px; }

.wd-feature-card {
    flex: 0 0 280px;
    scroll-snap-align: start;
    border-radius: 10px;
    padding: 28px 22px;
    color: #fff;
    box-shadow: 0 16px 36px rgba(6, 10, 24, 0.2);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    position: relative;
    overflow: hidden;
}
.wd-feature-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 44px rgba(6, 10, 24, 0.28);
}
.wd-feature-card:nth-child(6n+1) { background: linear-gradient(135deg, #41b2e0, #08eaee); }
.wd-feature-card:nth-child(6n+2) { background: linear-gradient(135deg, #2eac60, #2af088); }
.wd-feature-card:nth-child(6n+3) { background: linear-gradient(135deg, #7e5ecd, #b67dee); }
.wd-feature-card:nth-child(6n+4) { background: linear-gradient(135deg, #e87a30, #f8b361); }
.wd-feature-card:nth-child(6n+5) { background: linear-gradient(135deg, #3078c6, #4ec3f0); }
.wd-feature-card:nth-child(6n+6) { background: linear-gradient(135deg, #e05a5a, #f09a7d); }

.wd-feature-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    font-size: 24px;
    color: #fff;
    margin-bottom: 16px;
}
.wd-feature-card h5 {
    font-size: 17px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 8px;
}
.wd-feature-card p {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.65;
    margin: 0;
}

.wd-process-timeline-horizontal {
    display: flex;
    gap: 18px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 8px 4px 28px;
    scrollbar-width: none;
    list-style: none;
    margin: 0;
}
.wd-process-timeline-horizontal::-webkit-scrollbar { display: none; }
.wd-process-timeline-horizontal::after { content: ''; flex: 0 0 1px; }

.wd-process-timeline-horizontal li {
    flex: 0 0 300px;
    scroll-snap-align: start;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    background: #fff;
    border-radius: 10px;
    padding: 28px 22px;
    box-shadow: 0 6px 24px rgba(6, 10, 24, 0.07);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    border-left: 4px solid #1fecb9;
}
.wd-process-timeline-horizontal li:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 36px rgba(6, 10, 24, 0.12);
}
.wd-section-dark .wd-process-timeline-horizontal li {
    background: rgba(255, 255, 255, 0.08);
    border-left-color: #1fecb9;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}
.wd-section-dark .wd-process-timeline-horizontal li:hover {
    background: rgba(255, 255, 255, 0.12);
    box-shadow: 0 14px 36px rgba(0, 0, 0, 0.3);
}
.wd-process-step {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, #17e4c2, #1fecb9);
    color: #0e1528;
    font-size: 20px;
}
.wd-process-timeline-horizontal li div {
    color: #3f4b5e;
    font-size: 14px;
    line-height: 1.7;
}
.wd-process-timeline-horizontal li div strong {
    color: #0e1528;
    font-size: 15px;
    display: block;
    margin-bottom: 4px;
}
.wd-section-dark .wd-process-timeline-horizontal li div { color: rgba(255, 255, 255, 0.8); }
.wd-section-dark .wd-process-timeline-horizontal li div strong { color: #ffffff; }

.wd-cta-section {
    text-align: center;
    padding: 50px 20px;
    max-width: 700px;
    margin: 0 auto;
}
.wd-cta-section h2 {
    font-size: 28px;
    color: #0e1528;
    margin-bottom: 8px;
}
.wd-cta-border {
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, #17e4c2, #1fecb9);
    margin: 0 auto 18px;
    border-radius: 2px;
}
.wd-cta-section p {
    font-size: 17px;
    color: #ffffff;
    margin-bottom: 28px;
}
.wd-cta-button {
    display: inline-block;
    background: linear-gradient(135deg, #17e4c2, #1fecb9);
    color: #0e1528;
    font-weight: 700;
    font-size: 15px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 14px 40px;
    border-radius: 6px;
    text-decoration: none;
    box-shadow: 0 6px 24px rgba(23, 228, 194, 0.3);
    transition: all 0.25s;
}
.wd-cta-button:hover {
    color: #0e1528;
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 10px 32px rgba(23, 228, 194, 0.4);
}

.wd-highlight-box {
    background: linear-gradient(135deg, #0e1528, #1a2640);
    color: #fff;
    border-radius: 12px;
    padding: 36px 30px;
    box-shadow: 0 16px 40px rgba(6, 10, 24, 0.25);
    margin: 30px 0;
}
.wd-highlight-box h3 {
    font-size: 20px;
    font-weight: 700;
    color: #1fecb9;
    margin: 0 0 16px;
}
.wd-highlight-box ul { list-style: none; padding: 0; }
.wd-highlight-box li {
    color: rgba(255, 255, 255, 0.85) !important;
    line-height: 1.7;
    margin-bottom: 10px;
    padding-left: 26px;
    position: relative;
}
.wd-highlight-box li::before { background: #1fecb9 !important; }
.wd-highlight-box li strong { color: #fff !important; }

.wd-feature-grid { margin: 0 -8px; }
.wd-feature-grid [class*="col-"] { padding: 8px; }
.wd-feature-box {
    background: #fff;
    border-radius: 10px;
    padding: 28px 22px;
    height: 100%;
    box-shadow: 0 6px 24px rgba(6, 10, 24, 0.07);
    transition: transform 0.25s, box-shadow 0.25s;
}
.wd-feature-box:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 36px rgba(6, 10, 24, 0.12);
}
.wd-feature-icon-circle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(135deg, #17e4c2, #1fecb9);
    font-size: 24px;
    color: #0e1528;
    margin-bottom: 16px;
}
.wd-feature-title { font-size: 16px; font-weight: 700; color: #0e1528; margin: 0 0 8px; }
.wd-feature-copy { font-size: 14px; color: #3f4b5e; line-height: 1.65; margin: 0; }

.webdesign-parent-page-header {
    background: transparent;
    padding: 120px 0 50px;
    text-align: center;
    border-bottom: none;
}
.webdesign-parent-page-header h1 { color: #0e1528; font-size: 36px; font-weight: 700; }
.webdesign-parent-page-header p { color: #3f4b5e; max-width: 700px; margin: 0 auto; font-size: 17px; }
.webdesign-parent-page-content { padding: 60px 0; background: #ffffff; }
.webdesign-parent-page-text-block { max-width: 800px; margin: 0 auto 36px; }
.webdesign-parent-page-text-block h2 {
    color: #17e4c2;
    margin-bottom: 14px;
    border-left: 4px solid #17e4c2;
    padding-left: 14px;
    font-size: 22px;
}
.webdesign-parent-page-text-block p { color: #3f4b5e; line-height: 1.85; font-size: 15px; }
.webdesign-parent-page-text-block ul { padding-left: 0; }
.webdesign-parent-page-text-block li {
    color: #3f4b5e;
    line-height: 1.7;
    margin-bottom: 10px;
    position: relative;
    padding-left: 22px;
    list-style: none;
}
.webdesign-parent-page-text-block li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 9px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #17e4c2;
}
.webdesign-parent-page-text-block li strong { color: #0e1528; }
.webdesign-parent-page-highlight-box {
    background: linear-gradient(135deg, #0e1528, #1a2640);
    border-radius: 12px;
    padding: 32px 28px;
    max-width: 800px;
    margin: 30px auto;
}
.webdesign-parent-page-highlight-box h3 { color: #1fecb9; font-size: 20px; margin: 0 0 16px; }
.webdesign-parent-page-highlight-box ul { padding: 0; }
.webdesign-parent-page-highlight-box li { color: rgba(255, 255, 255, 0.85); }
.webdesign-parent-page-highlight-box li::before { background: #1fecb9; }
.webdesign-parent-page-highlight-box li strong { color: #ffffff; }
.webdesign-parent-page-cta { text-align: center; padding: 40px 0; max-width: 700px; margin: 20px auto; }
.webdesign-parent-page-cta p { font-weight: 500; color: #3f4b5e; margin-bottom: 24px; font-size: 17px; }
.webdesign-parent-page-cta .btn { padding: 12px 32px; text-transform: uppercase; font-weight: 700; }
.webdesign-parent-page-links { padding: 40px 0 60px; background: #ffffff; }

@media (max-width: 991px) {
    .webdesign-subpage-hero { padding: 100px 0 50px; }
    .webdesign-subpage-hero h1 { font-size: 30px; }
    .wd-section { padding: 60px 0; }
    .wd-section h2 { font-size: 24px; }
    .wd-feature-card { flex: 0 0 250px; }
    .wd-process-timeline-horizontal li { flex: 0 0 270px; }
    .webdesign-parent-page-header { padding: 100px 0 40px; }
    .webdesign-parent-page-header h1 { font-size: 30px; }
}
@media (max-width: 767px) {
    .webdesign-subpage-hero { padding: 80px 0 40px; }
    .webdesign-subpage-hero h1 { font-size: 24px; }
    .webdesign-subpage-hero p { font-size: 15px; }
    .wd-section { padding: 50px 0; }
    .wd-section h2 { font-size: 22px; }
    .wd-feature-card { flex: 0 0 230px; padding: 24px 18px; }
    .wd-process-timeline-horizontal li { flex: 0 0 250px; padding: 22px 18px; }
    .wd-cta-section h2 { font-size: 22px; }
    .wd-cta-button { width: 100%; text-align: center; }
    .webdesign-parent-page-header { padding: 80px 0 30px; }
    .webdesign-parent-page-header h1 { font-size: 24px; }
}

/* ==========================================================================
   SEM Theme Page (sem-theme-page.css)
   ========================================================================== */

.sem-services-4 {
    --sem-text-main: #13283c;
    --sem-text-sub: #31485f;
    --sem-text-strong: #0e1f31;
    --sem-border: rgba(19, 40, 60, 0.28);
    background: transparent;
    position: relative;
    padding: 140px 0 90px;
}
.sem-services-4 .sem-services-intro { max-width: 920px; margin: 0 auto 42px; text-align: center; }
.sem-services-4 .sem-services-intro h1 { margin: 0 0 18px; color: var(--sem-text-main); font-size: 36px; line-height: 1.2; font-weight: 500; }
.sem-services-4 .sem-services-intro p { margin: 0; color: var(--sem-text-sub); font-size: 16px; line-height: 1.75; }
.sem-services-4 .sem-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: 0; gap: 0; }
.sem-services-4 .sem-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin: 0;
    border: 0;
    padding: 2rem;
    transition: background 0.25s ease, -webkit-backdrop-filter 0.25s ease, backdrop-filter 0.25s ease;
}
.sem-services-4 .sem-box:hover,
.sem-services-4 .sem-box:focus-within {
    background: rgba(0, 0, 0, 0.07);
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
}
.sem-services-4 .sem-box:nth-child(1),
.sem-services-4 .sem-box:nth-child(3) { border-right: 0.5px solid var(--sem-border); }
.sem-services-4 .sem-box:nth-child(2),
.sem-services-4 .sem-box:nth-child(4) { border-left: 0.5px solid var(--sem-border); }
.sem-services-4 .sem-box:nth-child(3),
.sem-services-4 .sem-box:nth-child(4) { border-top: 0.5px solid var(--sem-border); }
.sem-services-4 .sem-eyebrow { margin: 0 0 1rem; font-size: 14px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; }
.sem-services-4 .sem-eyebrow-pink { background: linear-gradient(to bottom, #fe5580, #fbada3); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.sem-services-4 .sem-eyebrow-blue { background: linear-gradient(to bottom, #808df5, #06adf1); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.sem-services-4 h2 { margin: 0 0 1rem; color: var(--sem-text-main); font-size: 24px; line-height: 1.35; font-weight: 500; }
.sem-services-4 .sem-copy { margin: 0 0 1rem; color: var(--sem-text-sub); font-size: 15px; line-height: 1.7; }
.sem-services-4 .sem-points { margin: 0; padding: 0; list-style: none; }
.sem-services-4 .sem-points li { position: relative; padding-left: 0; margin-bottom: 10px; color: var(--sem-text-sub); font-size: 15px; line-height: 1.7; }
.sem-services-4 .sem-points li::before { content: none; display: none; }
.sem-services-4 .sem-points strong { color: var(--sem-text-strong); font-weight: 700; display: block; margin-bottom: 2px; }
.sem-services-4 .sem-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 8px; }
.sem-services-4 .sem-links a { border: 1px solid rgba(23,228,194,0.5); background: rgba(23,228,194,0.16); padding: 8px 14px; color: var(--sem-text-main); font-size: 13px; text-decoration: none; transition: all 0.25s ease; }
.sem-services-4 .sem-links a:hover,
.sem-services-4 .sem-links a:focus { background: rgba(14,31,49,0.24); border-color: rgba(23,228,194,0.62); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: #ffffff; }
.sem-services-4 .sem-image-wrap { margin-top: auto; padding-top: 18px; }
.sem-services-4 .sem-image-wrap img { width: 120px; max-width: 100%; height: auto; }
.sem-services-4 .sem-next-cta { margin-top: 44px; padding-top: 30px; border-top: 0.5px solid var(--sem-border); text-align: center; }
.sem-services-4 .sem-next-label { margin: 0 0 8px; color: var(--sem-text-sub); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }
.sem-services-4 .sem-next-title { margin: 0 0 16px; color: var(--sem-text-main); font-size: 22px; line-height: 1.3; font-weight: 500; }
.sem-services-4 .sem-next-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.sem-services-4 .sem-next-item {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-height: 124px; padding: 14px 10px;
    border: 0.5px solid rgba(255,255,255,0.26); color: #ffffff; text-decoration: none;
    background: rgba(44,44,44,0.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    transition: all 0.25s ease;
}
.sem-services-4 .sem-next-item i { margin-bottom: 8px; font-size: 40px !important; color: #ffffff; }
.sem-services-4 .sem-next-item strong { font-size: 15px; font-weight: 600; line-height: 1.2; }
.sem-services-4 .sem-next-item span { margin-top: 4px; color: rgba(255,255,255,0.88); font-size: 14px; line-height: 1.3; }
.sem-services-4 .sem-next-item:hover,
.sem-services-4 .sem-next-item:focus {
    background: #17e4c2 !important; color: #fff !important;
    border-color: rgba(23,228,194,0.62); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.sem-services-4 .sem-next-item:hover strong,
.sem-services-4 .sem-next-item:focus strong,
.sem-services-4 .sem-next-item:hover span,
.sem-services-4 .sem-next-item:focus span,
.sem-services-4 .sem-next-item:hover i,
.sem-services-4 .sem-next-item:focus i { color: #fff !important; text-decoration: none !important; }
.sem-services-4 .sem-next-item a,
.sem-services-4 .sem-next-item a:hover,
.sem-services-4 .sem-next-item a:focus { text-decoration: none !important; }

@media (max-width: 1199px) {
    .sem-services-4 .sem-services-intro h1 { font-size: 33px; }
    .sem-services-4 h2 { font-size: 22px; }
}
@media (max-width: 991px) {
    .sem-services-4 { padding: 110px 0 70px; }
    .sem-services-4 .sem-services-intro h1 { font-size: 30px; }
    .sem-services-4 h2 { font-size: 20px; }
    .sem-services-4 .sem-services-intro p, .sem-services-4 .sem-copy, .sem-services-4 .sem-points li { font-size: 14px; line-height: 1.65; }
    .sem-services-4 .sem-box { padding: 1.4rem; }
    .sem-services-4 .sem-image-wrap img { width: 106px; }
    .sem-services-4 .sem-next-title { font-size: 20px; }
    .sem-services-4 .sem-next-item { min-height: 108px; padding: 12px 8px; }
    .sem-services-4 .sem-next-item strong { font-size: 14px; }
    .sem-services-4 .sem-next-item span { font-size: 11px; }
}
@media (max-width: 767px) {
    .sem-services-4 { padding: 100px 0 60px; }
    .sem-services-4 .sem-grid { grid-template-columns: 1fr; border: 0; gap: 14px; }
    .sem-services-4 .sem-box { padding: 1.25rem; border: 0; }
    .sem-services-4 .sem-box:nth-child(1), .sem-services-4 .sem-box:nth-child(2),
    .sem-services-4 .sem-box:nth-child(3), .sem-services-4 .sem-box:nth-child(4) { border-left: 0; border-right: 0; border-top: 0; }
    .sem-services-4 .sem-services-intro h1 { font-size: 24px; }
    .sem-services-4 h2 { font-size: 18px; }
    .sem-services-4 .sem-services-intro p, .sem-services-4 .sem-copy, .sem-services-4 .sem-points li { font-size: 13px; line-height: 1.55; }
    .sem-services-4 .sem-next-title { font-size: 18px; }
    .sem-services-4 .sem-next-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
    .sem-services-4 .sem-next-item { min-height: 94px; padding: 8px 6px; }
    .sem-services-4 .sem-next-item i { margin-bottom: 6px; font-size: 16px; }
    .sem-services-4 .sem-next-item strong { font-size: 12px; }
    .sem-services-4 .sem-next-item span { font-size: 10px; line-height: 1.25; }
}

/* ==========================================================================
   SEO Theme Page (seo-theme-page.css)
   ========================================================================== */

.seo-hero {
    display: flex; align-items: center; min-height: 100vh;
    position: relative; padding: 120px 0 80px;
}
.seo-hero .seo-layout-row { align-items: flex-start; }
.seo-hero .seo-layout-row > [class*="col-"] { position: relative; }
.seo-hero .seo-feature-title { position: relative; margin: 0; line-height: 1.2; color: #0e1528; }
.seo-hero .seo-feature-title::before {
    content: ""; background-color: #1fecb9; position: absolute;
    width: 66px; height: 3px; top: -28px; left: 0;
}
.seo-hero .seo-text-muted { color: #3f4b5e; line-height: 1.85; }
.seo-hero .seo-text-white { color: #ffffff !important; }
.seo-hero .seo-mb-lg-0 { margin-bottom: 0; }
.seo-hero .seo-mb-4 { margin-bottom: 1.5rem; }
.seo-hero .seo-my-4 { margin-top: 1.5rem; margin-bottom: 1.5rem; }
.seo-hero .seo-py-lg-3 { padding-top: 1rem; padding-bottom: 1rem; }
.seo-hero .seo-mb-0 { margin-bottom: 0; }
.seo-hero .seo-mt-3 { margin-top: 1rem; }
.seo-hero .seo-card {
    position: relative; display: block; width: 100%; max-width: 225px;
    aspect-ratio: 1 / 1; border-radius: 0.375rem; border: 0;
    box-shadow: 0 18px 38px rgba(6, 10, 24, 0.25);
}
.seo-hero .seo-card-body { height: 100%; display: flex; flex-direction: column; justify-content: center; padding: 1.25rem; }
.seo-hero .seo-bs-icon { font-size: 46px; line-height: 1; display: inline-block; }
.seo-hero .seo-card h5 { margin: 0; color: #ffffff; }
.seo-hero .seo-card p { margin: 0; line-height: 1.65; }
.seo-hero .seo-bg-gradient-search { background-image: linear-gradient(45deg, #0ea5a0, #17e4c2); }
.seo-hero .seo-bg-gradient-ranking { background-image: linear-gradient(45deg, #2a74d8, #41b2e0); }
.seo-hero .seo-bg-gradient-tech { background-image: linear-gradient(45deg, #7e5ecd, #b67dee); }
.seo-hero .seo-bg-gradient-content { background-image: linear-gradient(45deg, #2eac60, #2af088); }
.seo-hero .seo-bg-gradient-links { background-image: linear-gradient(45deg, #d4610c, #f0af17); }
.seo-hero .seo-bg-gradient-speed { background-image: linear-gradient(45deg, #c1347a, #e868a8); }
.seo-hero .seo-cards-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.seo-hero .seo-cards-col { display: flex; flex-direction: column; align-items: flex-start; gap: 1.5rem; }

.seo-section { padding: 80px 0; }
.seo-section-dark { background: linear-gradient(268deg, #28418777, #0b1835e6); color: #ffffff; }
.seo-section-light { background-color: #f8f9fa; color: #0e1528; }
.seo-section-white { background-color: #ffffff; color: #0e1528; }
.seo-section .seo-section-label { display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #17e4c2; margin-bottom: 0.75rem; }
.seo-section .seo-section-title { font-size: 26px; font-weight: 700; line-height: 1.25; margin-bottom: 1.25rem; }
.seo-section-dark .seo-section-title { color: #ffffff; }
.seo-section-light .seo-section-title, .seo-section-white .seo-section-title { color: #0e1528; }
.seo-section .seo-section-text { line-height: 1.85; margin-bottom: 1.25rem; }
.seo-section-dark .seo-section-text { color: #b0b8c8; }
.seo-section-light .seo-section-text, .seo-section-white .seo-section-text { color: #3f4b5e; }

.seo-icon-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin-top: 2.5rem; }
.seo-icon-card { background: #161d3077; border-radius: 0.5rem; padding: 2rem 1.5rem; transition: transform 0.25s ease, box-shadow 0.25s ease; }
.seo-icon-card:hover { transform: translateY(-4px); box-shadow: 0 14px 32px rgba(0,0,0,0.35); }
.seo-icon-card .seo-icon-card-icon { font-size: 2.5rem; color: #17e4c2; margin-bottom: 1rem; display: block; line-height: 1; }
.seo-icon-card h3 { font-size: 17px; font-weight: 600; color: #ffffff; margin-bottom: 0.75rem; }
.seo-icon-card p { color: #b0b8c8; line-height: 1.7; margin: 0; font-size: 14px; }

.seo-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; }
.seo-two-col h3 { font-size: 17px; font-weight: 600; margin-bottom: 0.75rem; }
.seo-section-light .seo-two-col h3, .seo-section-white .seo-two-col h3 { color: #0e1528; }
.seo-section-dark .seo-two-col h3 { color: #ffffff; }
.seo-two-col ul { list-style: none; padding: 0; margin: 0; }
.seo-two-col ul li { position: relative; padding-left: 1.5rem; margin-bottom: 0.6rem; line-height: 1.7; }
.seo-two-col ul li::before { content: ""; position: absolute; left: 0; top: 0.55em; width: 8px; height: 8px; border-radius: 50%; background-color: #17e4c2; }

.seo-process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; margin-top: 2.5rem; }
.seo-process-step { text-align: center; }
.seo-process-number { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, #17e4c2, #0ea5a0); color: #0e1528; font-size: 1.3rem; font-weight: 700; margin-bottom: 1.25rem; }
.seo-process-step h3 { font-size: 17px; font-weight: 600; margin-bottom: 0.6rem; }
.seo-section-dark .seo-process-step h3 { color: #ffffff; }
.seo-process-step p { font-size: 14px; line-height: 1.65; margin: 0; }
.seo-section-dark .seo-process-step p { color: #b0b8c8; }

.seo-benefits-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; margin-top: 2rem; }
.seo-benefit-item { display: flex; gap: 1rem; align-items: flex-start; }
.seo-benefit-icon { flex-shrink: 0; width: 44px; height: 44px; border-radius: 0.375rem; background: linear-gradient(135deg, #17e4c2, #0ea5a0); display: flex; align-items: center; justify-content: center; font-size: 1.25rem; color: #0e1528; }
.seo-benefit-item h3 { font-size: 18px; font-weight: 600; margin-bottom: 0.3rem; }
.seo-section-light .seo-benefit-item h3 { color: #0e1528; }
.seo-benefit-item p { margin: 0; font-size: 14px; line-height: 1.65; }
.seo-section-light .seo-benefit-item p { color: #3f4b5e; }

.seo-cta-section { padding: 80px 0; background: linear-gradient(135deg, #0e1528 0%, #162040 100%); text-align: center; }
.seo-cta-section .seo-section-title { color: #ffffff; }
.seo-cta-section p { color: #b0b8c8; max-width: 640px; margin: 0 auto 2rem; line-height: 1.8; }
.seo-cta-btn { display: inline-block; padding: 14px 38px; background: linear-gradient(135deg, #17e4c2, #0ea5a0); color: #0e1528; font-weight: 700; font-size: 15px; border-radius: 0.375rem; text-decoration: none; transition: opacity 0.2s ease, transform 0.2s ease; }
.seo-cta-btn:hover, .seo-cta-btn:focus { opacity: 0.9; transform: translateY(-2px); text-decoration: none; color: #0e1528; }
.seo-service-links { padding: 0 0 84px; }

@media (min-width: 992px) { .seo-hero .seo-mb-lg-0 { margin-bottom: 0 !important; } }
@media (max-width: 991px) {
    .seo-hero { min-height: auto; padding: 90px 0; }
    .seo-hero .seo-feature-title { font-size: 36px; }
    .seo-section { padding: 60px 0; }
    .seo-icon-grid { grid-template-columns: repeat(2, 1fr); }
    .seo-process-grid { grid-template-columns: repeat(2, 1fr); }
    .seo-service-links { padding-bottom: 74px; }
}
@media (max-width: 767px) {
    .seo-hero .seo-cards-grid { grid-template-columns: 1fr; }
    .seo-hero .seo-card { max-width: none; }
    .seo-hero .seo-cards-col-left, .seo-hero .seo-cards-col-right { transform: none; }
    .seo-hero .seo-feature-title { font-size: 30px; }
    .seo-section .seo-section-title { font-size: 1.6rem; }
    .seo-icon-grid { grid-template-columns: 1fr; }
    .seo-two-col { grid-template-columns: 1fr; gap: 2rem; }
    .seo-process-grid { grid-template-columns: 1fr; }
    .seo-benefits-grid { grid-template-columns: 1fr; }
    .seo-cta-section { padding: 60px 0; }
    .seo-service-links { padding-bottom: 62px; }
}

/* SEO hero: override lseo scroll -> static 2-col grid */
.seo-hero .lseo-hero-cards { overflow: visible !important; cursor: default !important; -webkit-overflow-scrolling: auto !important; }
.seo-hero .lseo-cards-grid { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; flex-wrap: unset !important; gap: 14px !important; scroll-snap-type: unset !important; }
.seo-hero .lseo-card { flex: unset !important; aspect-ratio: unset !important; scroll-snap-align: unset !important; min-height: 160px; }
@media (max-width: 991px) { .seo-hero .lseo-cards-grid { margin-top: 40px; } }

/* ==========================================================================
   Local SEO Theme Page (local-seo-theme-page.css)
   ========================================================================== */

.lseo-hero { display: flex; align-items: center; min-height: 100vh; position: relative; padding: 120px 0 80px; }
.lseo-hero-row { align-items: center; }
.lseo-label { display: inline-block; font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; color: #17e4c2; margin-bottom: 18px; }
.lseo-hero-title { position: relative; margin: 0 0 28px; line-height: 1.18; color: #0e1528; font-family: 'Poppins', sans-serif; font-weight: 600; }
.lseo-hero-title::before { content: ""; background-color: #1fecb9; position: absolute; width: 66px; height: 3px; top: -24px; left: 0; }
.lseo-hero-desc { color: #3f4b5e; line-height: 1.85; margin-bottom: 18px; }

.lseo-btn-primary { display: inline-block; padding: 14px 36px; border-radius: 6px; background: linear-gradient(135deg, #17e4c2, #1fecb9); color: #0e1528; font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 15px; text-decoration: none; transition: box-shadow .25s ease, transform .2s ease; border: none; cursor: pointer; margin-top: 10px; }
.lseo-btn-primary:hover, .lseo-btn-primary:focus { box-shadow: 0 8px 28px rgba(23,228,194,.35); transform: translateY(-2px); color: #0e1528; text-decoration: none; }
.lseo-btn-lg { padding: 18px 48px; font-size: 16px; }

.lseo-hero-cards { overflow: visible; padding-bottom: 0; }
.lseo-cards-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.lseo-card { position: relative; border-radius: 10px; border: 0; overflow: hidden; box-shadow: 0 16px 36px rgba(6,10,24,.2); color: #fff; transition: transform .25s ease, box-shadow .25s ease; aspect-ratio: 1 / 1; }
.lseo-card:hover { transform: translateY(-4px); box-shadow: 0 22px 44px rgba(6,10,24,.28); }
.lseo-card-body { padding: 24px 20px; display: flex; flex-direction: column; }
.lseo-icon { font-size: 38px; line-height: 1; margin-bottom: 12px; display: inline-block; }
.lseo-card h5 { margin: 0 0 8px; font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 16px; color: #fff; }
.lseo-card p { margin: 0; font-size: 16px; line-height: 1.6; opacity: .92; }
.lseo-grad-green  { background: linear-gradient(135deg, #2eac60, #2af088); }
.lseo-grad-orange { background: linear-gradient(135deg, #e87a30, #f8b361); }
.lseo-grad-blue   { background: linear-gradient(135deg, #3078c6, #4ec3f0); }
.lseo-grad-teal   { background: linear-gradient(135deg, #17b8a2, #1fecb9); }
.lseo-grad-purple { background: linear-gradient(135deg, #7e5ecd, #b67dee); }
.lseo-grad-coral  { background: linear-gradient(135deg, #e05a5a, #f09a7d); }

.lseo-section { padding: 90px 0; }
.lseo-section-alt { background-color: #43444508; backdrop-filter: blur(4px); }
.lseo-section h2 { font-family: 'Poppins', sans-serif; font-weight: 600; color: #0e1528; margin-bottom: 20px; line-height: 1.25; }
.lseo-section h3 { font-family: 'Poppins', sans-serif; font-weight: 600; color: #0e1528; margin-bottom: 14px; font-size: 20px; }
.lseo-section p { color: #3f4b5e; line-height: 1.85; }
.lseo-section-header { max-width: 780px; margin: 0 auto 50px; text-align: center; }

.lseo-benefits-row { margin-top: 20px; }
.lseo-benefit-card { padding: 34px 28px; background: #fff; border-radius: 10px; box-shadow: 0 6px 24px rgba(6,10,24,.07); height: 100%; transition: transform .25s ease, box-shadow .25s ease; }
.lseo-benefit-card:hover { transform: translateY(-4px); box-shadow: 0 14px 36px rgba(6,10,24,.12); }
.lseo-benefit-number { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 42px; line-height: 1; color: #1fecb9; margin-bottom: 16px; }
.lseo-benefit-card h3 { font-size: 18px; }
.lseo-benefit-card p { margin-bottom: 0; font-size: 14.5px; }

.lseo-check-list { list-style: none; padding: 0; margin: 24px 0 0; }
.lseo-check-list li { position: relative; padding-left: 30px; margin-bottom: 14px; color: #3f4b5e; line-height: 1.65; }
.lseo-check-list li::before { content: "\f26a"; font-family: 'bootstrap-icons'; position: absolute; left: 0; top: 1px; color: #17e4c2; font-size: 17px; }

.lseo-highlight-box { background: linear-gradient(135deg, #0e1528, #1a2640); color: #fff; border-radius: 12px; padding: 40px 36px; box-shadow: 0 16px 40px rgba(6,10,24,.25); }
.lseo-highlight-box h3 { color: #1fecb9; margin-bottom: 18px; }
.lseo-highlight-box p { color: rgba(255,255,255,.85); line-height: 1.85; margin-bottom: 14px; }
.lseo-highlight-box p:last-child { margin-bottom: 0; }
.lseo-highlight-box strong { color: #1fecb9; }

.lseo-nap-visual { display: flex; flex-direction: column; gap: 20px; }
.lseo-nap-item { display: flex; align-items: center; gap: 20px; background: #fff; border-radius: 10px; padding: 28px 24px; box-shadow: 0 6px 24px rgba(6,10,24,.07); transition: transform .25s ease; }
.lseo-nap-item:hover { transform: translateX(6px); }
.lseo-nap-icon { flex-shrink: 0; width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, #17e4c2, #1fecb9); display: flex; align-items: center; justify-content: center; color: #0e1528; font-size: 24px; }
.lseo-nap-item strong { display: block; font-family: 'Poppins', sans-serif; font-weight: 600; color: #0e1528; font-size: 17px; margin-bottom: 2px; }
.lseo-nap-item span { color: #3f4b5e; font-size: 14px; }

.lseo-content-list { list-style: none; padding: 0; margin: 0; }
.lseo-content-list li { padding: 22px 24px; background: #fff; border-radius: 10px; margin-bottom: 14px; box-shadow: 0 4px 18px rgba(6,10,24,.06); border-left: 4px solid #1fecb9; transition: transform .2s ease; }
.lseo-content-list li:hover { transform: translateX(4px); }
.lseo-content-list li:last-child { margin-bottom: 0; }
.lseo-content-list li strong { display: block; font-family: 'Poppins', sans-serif; font-weight: 600; color: #0e1528; font-size: 16px; margin-bottom: 4px; }
.lseo-content-list li span { color: #3f4b5e; font-size: 14px; line-height: 1.6; }

.lseo-tech-card { padding: 36px 28px; background: #fff; border-radius: 10px; box-shadow: 0 6px 24px rgba(6,10,24,.07); text-align: center; height: 100%; transition: transform .25s ease, box-shadow .25s ease; }
.lseo-tech-card:hover { transform: translateY(-4px); box-shadow: 0 14px 36px rgba(6,10,24,.12); }
.lseo-tech-card i { font-size: 40px; color: #17e4c2; margin-bottom: 18px; display: block; }
.lseo-tech-card h3 { font-size: 18px; text-align: center; }
.lseo-tech-card p { margin-bottom: 0; font-size: 14.5px; }

.lseo-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; margin-top: 20px; }
.lseo-step { position: relative; padding: 34px 26px; background: #fff; border-radius: 10px; box-shadow: 0 6px 24px rgba(6,10,24,.07); transition: transform .25s ease, box-shadow .25s ease; }
.lseo-step:hover { transform: translateY(-4px); box-shadow: 0 14px 36px rgba(6,10,24,.12); }
.lseo-step-number { font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 48px; line-height: 1; color: #1fecb9; margin-bottom: 14px; }
.lseo-step h3 { font-size: 17px; }
.lseo-step p { margin-bottom: 0; font-size: 14px; }

.lseo-cta { padding: 100px 0; background: linear-gradient(35deg, #28418777, #0b1835e6); }
.lseo-cta-inner { max-width: 1080px; margin: 0 auto; text-align: center; }
.lseo-cta h2 { font-family: 'Poppins', sans-serif; font-weight: 600; color: #fff; margin-bottom: 20px; line-height: 1.25; }
.lseo-cta p { color: rgba(255,255,255,.8); line-height: 1.85; margin-bottom: 32px; font-size: 20px; }
.lseo-cta .lseo-btn-primary { box-shadow: 0 6px 24px rgba(23,228,194,.3); }

.local-seo-service-links { padding: 60px 0 84px; background: rgba(0, 0, 0, 0.15); backdrop-filter: blur(4px); }

@media (max-width: 1199px) { .lseo-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 991px) {
    .lseo-hero { min-height: auto; padding: 100px 0 60px; }
    .lseo-hero-title { font-size: 34px; }
    .lseo-hero-cards { margin-top: 50px; }
    .lseo-section { padding: 70px 0; }
    .lseo-cta { padding: 70px 0; }
    .local-seo-service-links { padding-bottom: 74px; }
}
@media (max-width: 767px) {
    .lseo-hero-title { font-size: 28px; }
    .lseo-hero-cards { overflow-x: auto; overflow-y: visible; -webkit-overflow-scrolling: touch; scrollbar-width: none; cursor: grab; }
    .lseo-hero-cards:active { cursor: grabbing; }
    .lseo-hero-cards::-webkit-scrollbar { display: none; }
    .lseo-cards-grid { display: flex !important; flex-wrap: nowrap !important; scroll-snap-type: x mandatory; }
    .lseo-card { flex: 0 0 200px !important; scroll-snap-align: start; }
    .lseo-benefits-row .col-md-4 { margin-bottom: 18px; }
    .lseo-steps { grid-template-columns: 1fr; }
    .lseo-section { padding: 50px 0; }
    .lseo-section-header { margin-bottom: 30px; }
    .lseo-cta { padding: 50px 0; }
    .lseo-highlight-box { margin-top: 30px; padding: 28px 22px; }
    .lseo-nap-visual { margin-bottom: 40px; }
    .local-seo-service-links { padding-bottom: 62px; }
    .lseo-btn-lg { padding: 14px 32px; font-size: 15px; }
    .lseo-tech-card { margin-bottom: 18px; }
}

/* ==========================================================================
   SEA Theme Page (sea-theme-page.css)
   ========================================================================== */

.sea-service-1 { display: flex; align-items: center; min-height: 100vh; position: relative; padding: 120px 0 80px; }
.sea-service-1 .sea-layout-row > [class*="col-"] { position: relative; }
.sea-service-1 .sea-layout-row { align-items: flex-start; }
.sea-service-1 .sea-feature-title { position: relative; margin: 0; line-height: 1.2; color: #0e1528; }
.sea-service-1 .sea-feature-title::before { content: ""; background-color: #1fecb9; position: absolute; width: 66px; height: 3px; top: -28px; left: 0; }
.sea-service-1 .sea-text-muted { color: #3f4b5e; line-height: 1.85; }
.sea-service-1 .sea-text-white { color: #ffffff !important; }
.sea-service-1 .sea-mb-lg-0 { margin-bottom: 0; }
.sea-service-1 .sea-mb-4 { margin-bottom: 1.5rem; }
.sea-service-1 .sea-my-4 { margin-top: 1.5rem; margin-bottom: 1.5rem; }
.sea-service-1 .sea-py-lg-3 { padding-top: 1rem; padding-bottom: 1rem; }
.sea-service-1 .sea-mb-0 { margin-bottom: 0; }
.sea-service-1 .sea-mt-4 { margin-top: 1.5rem; }
.sea-service-1 .sea-mt-3 { margin-top: 1rem; }
.sea-service-1 .sea-card { position: relative; display: block; width: 100%; max-width: 225px; aspect-ratio: 1 / 1; border-radius: 0.375rem; border: 0; box-shadow: 0 18px 38px rgba(6,10,24,0.25); }
.sea-service-1 .sea-card-body { height: 100%; display: flex; flex-direction: column; justify-content: center; padding: 1.25rem; }
.sea-service-1 .sea-logo { width: 46px; height: 46px; display: inline-block; }
.sea-service-1 .sea-bs-icon { font-size: 46px; line-height: 1; display: inline-block; }
.sea-service-1 .sea-card h5 { margin: 0; color: #ffffff; }
.sea-service-1 .sea-card p { margin: 0; line-height: 1.65; }
.sea-service-1 .sea-bg-gradient-info { background-image: linear-gradient(45deg, #41b2e0, #08eaee); }
.sea-service-1 .sea-bg-gradient-purple { background-image: linear-gradient(45deg, #7e5ecd, #b67dee); }
.sea-service-1 .sea-bg-gradient-warning { background-image: linear-gradient(45deg, #f0af17, #f8d361); }
.sea-service-1 .sea-bg-gradient-green { background-image: linear-gradient(45deg, #2eac60, #2af088); }
.sea-service-1 .sea-cards-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.sea-service-1 .sea-cards-col { display: flex; flex-direction: column; align-items: flex-start; gap: 1.5rem; }
.sea-service-links { padding: 0 0 84px; }

@media (min-width: 992px) { .sea-service-1 .sea-mb-lg-0 { margin-bottom: 0 !important; } }
@media (max-width: 991px) { .sea-service-1 { min-height: auto; padding: 90px 0; } .sea-service-1 .sea-feature-title { font-size: 36px; } }
@media (max-width: 767px) { .sea-service-1 .sea-feature-title { font-size: 30px; } }

/* ==========================================================================
   Related Links (related-links.css)
   ========================================================================== */

.related-links-template { padding: 78px 0 0; position: relative; }
.related-links-template .related-links-intro { max-width: 680px; margin: 0 auto 34px; text-align: center; }
.related-links-template .related-links-label { margin: 0 0 10px; color: #44586b; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }
.related-links-template .related-links-title { margin: 0; color: #13283c; font-size: 34px; line-height: 1.2; font-weight: 600; }
.related-links-template .related-links-copy { margin: 16px 0 0; color: #5a6d7d; font-size: 16px; line-height: 1.75; }
.related-links-template .related-links-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.related-links-template .related-links-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 760px; margin-left: auto; margin-right: auto; }
.related-links-template .related-links-grid-1 { grid-template-columns: minmax(0, 1fr); max-width: 280px; margin-left: auto; margin-right: auto; }
.related-links-template .related-link-card { display: block; color: inherit; text-decoration: none; }
.related-links-template .related-link-body { height: 100%; padding: 18px 12px; text-align: center; transition: all 0.5s ease; }
.related-links-template .related-link-card:hover .related-link-body,
.related-links-template .related-link-card:focus .related-link-body { transform: scale(1.08); }
.related-links-template .related-link-body img { width: 100%; max-width: 77px; height: auto; display: block; margin: 0 auto; }
.related-links-template .related-link-body h6 { margin: 28px 0 0; color: #13283c; font-size: 15px; line-height: 1.35; font-weight: 600; }

@media (max-width: 991px) {
    .related-links-template { padding-top: 64px; }
    .related-links-template .related-links-title { font-size: 28px; }
    .related-links-template .related-link-body img { max-width: 108px; }
    .related-links-template .related-link-body h6 { margin-top: 22px; font-size: 13px; }
}
@media (max-width: 767px) {
    .related-links-template { padding-top: 48px; }
    .related-links-template .related-links-title { font-size: 23px; }
    .related-links-template .related-links-copy { font-size: 14px; }
    .related-links-template .related-links-grid { gap: 2px; }
    .related-links-template .related-link-body { padding: 10px 4px; }
    .related-links-template .related-link-body img { max-width: 74px; }
    .related-links-template .related-link-body h6 { margin-top: 14px; font-size: 10px; }
}

/* ==========================================================================
   Webdesign Service Links (webdesign-service-links.css)
   ========================================================================== */

.webdesign-service-links-panel {
    margin-top: 44px;
    padding: 50px 0 20px;
    border-top: 1px solid rgba(19,40,60,0.12);
    text-align: center;
}
.webdesign-service-links-label { margin: 0 0 8px; color: #31485f; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; }
.webdesign-service-links-title { margin: 0 0 32px; color: #13283c; font-size: 22px; line-height: 1.3; font-weight: 600; }
.webdesign-service-links-copy { margin: 0 0 24px; color: #31485f; font-size: 15px; line-height: 1.65; }

.webdesign-service-links-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.webdesign-service-links-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.webdesign-service-links-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.webdesign-service-links-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 600px; margin-left: auto; margin-right: auto; }
.webdesign-service-links-grid-1 { grid-template-columns: minmax(0, 1fr); max-width: 280px; margin-left: auto; margin-right: auto; }

.webdesign-service-link { display: block; text-decoration: none; color: inherit; }
.webdesign-service-link:hover, .webdesign-service-link:focus { text-decoration: none; }

.webdesign-service-link-body {
    padding: 20px 16px 24px;
    text-align: center;
    transition: all 0.5s ease;
}
.webdesign-service-link:hover .webdesign-service-link-body,
.webdesign-service-link:focus .webdesign-service-link-body { transform: scale(1.1); }

.webdesign-service-link img {
    width: 80px;
    height: 80px;
    object-fit: contain;
    display: block;
    margin: 0 auto;
}
.webdesign-service-link h6 {
    margin: 20px 0 0;
    color: #111257;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
}
.webdesign-service-link span {
    display: block;
    margin-top: 6px;
    color: #666;
    font-size: 13px;
    line-height: 1.4;
}

@media (max-width: 991px) {
    .webdesign-service-links-title { font-size: 20px; }
    .webdesign-service-link img { width: 64px; height: 64px; }
    .webdesign-service-link h6 { font-size: 14px; }
    .webdesign-service-link span { font-size: 12px; }
}
@media (max-width: 767px) {
    .webdesign-service-links-title { font-size: 18px; }
    .webdesign-service-links-grid { gap: 8px; }
    .webdesign-service-link-body { padding: 12px 8px 16px; }
    .webdesign-service-link img { width: 52px; height: 52px; }
    .webdesign-service-link h6 { margin-top: 12px; font-size: 12px; }
    .webdesign-service-link span { font-size: 11px; }
}

/* ==========================================================================
   Portfolio Page (portfolio-page.css)
   ========================================================================== */

.portfolio-hero { padding: 100px 0 80px; position: relative; }
.portfolio-hero-row { align-items: center; }
.portfolio-hero-label { display: block; font-size: 13px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; color: #17e4c2; margin-bottom: 16px; }
.portfolio-hero-heading { font-size: 38px; font-weight: 700; color: #0e1528; line-height: 1.25; margin: 0 0 22px; position: relative; padding-top: 32px; }
.portfolio-hero-heading::before { content: ""; background-color: #1fecb9; position: absolute; width: 66px; height: 3px; top: 0; left: 0; }
.portfolio-hero-text { color: #3f4b5e; font-size: 17px; line-height: 1.8; margin-bottom: 32px; }
.portfolio-btn-primary { display: inline-block; padding: 14px 36px; background: linear-gradient(135deg, #17e4c2, #1fecb9); color: #0e1528; font-weight: 700; font-size: 14px; letter-spacing: 0.05em; text-transform: uppercase; border-radius: 6px; text-decoration: none; transition: box-shadow 0.25s ease, transform 0.2s ease; }
.portfolio-btn-primary:hover, .portfolio-btn-primary:focus { box-shadow: 0 8px 28px rgba(23,228,194,0.38); transform: translateY(-2px); color: #0e1528; text-decoration: none; }

.portfolio-process-box { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07); border-radius: 10px; padding: 26px 22px; display: flex; align-items: flex-start; margin-top: 26px; transition: background 0.25s, border-color 0.25s, transform 0.25s; }
.portfolio-process-box:hover { background: rgba(23,228,194,0.07); border-color: rgba(23,228,194,0.22); transform: translateY(-3px); }
.portfolio-process-icon { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, #17e4c2, #0ea5a0); color: #0e1528; font-size: 20px; margin-right: 18px; transition: border-radius 0.35s, transform 0.5s; }
.portfolio-process-box:hover .portfolio-process-icon { border-radius: 8px; transform: rotate(360deg); }
.portfolio-process-box h5 { font-size: 16px; font-weight: 700; color: #0e1528; margin: 0 0 6px; }
.portfolio-process-box p { font-size: 14px; color: #3f4b5e; line-height: 1.65; margin: 0; }

.portfolio-projects { padding: 80px 0; background: rgba(255,255,255,0.02); border-top: 1px solid rgba(255,255,255,0.06); }
.portfolio-section-label { display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #17e4c2; margin-bottom: 12px; }
.portfolio-section-title { font-size: 32px; font-weight: 700; color: #0e1528; line-height: 1.25; margin-bottom: 16px; }
.portfolio-section-text { color: #3f4b5e; font-size: 16px; line-height: 1.8; max-width: 640px; margin: 0 auto 48px; text-align: center; }

@media (max-width: 991px) { .portfolio-hero { padding: 80px 0 60px; } .portfolio-hero-heading { font-size: 30px; } .portfolio-hero-text { font-size: 15px; } }
@media (max-width: 767px) {
    .portfolio-hero { padding: 60px 0 40px; }
    .portfolio-hero-heading { font-size: 25px; }
    .portfolio-process-box { margin-top: 16px; }
    .portfolio-projects { padding: 60px 0; }
    .portfolio-section-title { font-size: 24px; }
}

/* ==========================================================================
   Contact Page (contact-page.css)
   ========================================================================== */

.contact-page { padding: 0 0 80px 0; }
.contact-page-map { margin: 0 0 50px 0 !important; padding: 0 !important; border: none !important; }
.contact-page-map iframe { display: block; width: 100%; height: 340px; border: 0; }

.contact-page-hero { margin: 28px auto 40px; display: flex; flex-direction: column; align-items: center; text-align: center; }
.contact-page-kicker { margin: 0 0 10px; color: #2b2b27 !important; background: #17e4c277 !important; border-radius: 2rem; border: solid 1px #17e4c2; box-shadow: none; padding: 4px 21px 2px 21px; font-size: 12px; letter-spacing: 0.16em; }
.contact-page-hero h1 { color: #1a2a3a; }
.contact-page-hero p { font-size: 17px; color: #555; }

.contact-page-panel { margin-bottom: 24px; padding: 28px; color: #1a2a3a; }
.contact-page-panel-dark { background: #f4f8fb !important; }
.contact-page-panel h2, .contact-page-panel h3 { margin-top: 0; color: #1a2a3a !important; }
.contact-page-panel p, .contact-page-panel-copy { color: #555 !important; line-height: 1.75; }

.contact-page-facts { margin: 24px 0 0; padding: 0; list-style: none; }
.contact-page-facts li { margin-bottom: 18px; }
.contact-page-facts span { display: block; margin-bottom: 0; color: #17b89a !important; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; }
.contact-page-facts strong { color: #1a2a3a !important; font-size: 16px; line-height: 1.4; }
.contact-page-facts strong a { color: #1a2a3a !important; text-decoration: none; }

.contact-page-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 26px; }

.contact-page-feedback { margin: 24px 0 30px; padding: 18px 20px; border-left: 3px solid #17e4c2; background: rgba(0,0,0,0.03); color: #1a2a3a; }
.contact-page-feedback ul { margin: 12px 0 0; padding-left: 20px; }
.contact-page-feedback-success { border-left-color: #17e4c2; }
.contact-page-feedback-error { border-left-color: #f46c6c; }
.contact-page-honeypot { display: none; }

.contact-detailed-form .field-wrap { margin: 0 0 18px; }
.contact-detailed-form input, .contact-detailed-form textarea,
.contact-detailed-form .field-wrap input, .contact-detailed-form .field-wrap textarea {
    width: 100%; border: none; color: #9ea4a7; height: 45px;
    background: #e7eaeb; border-radius: 3px; padding: 10px 35px;
    font-size: 16px; margin-bottom: 0; text-transform: inherit; font-weight: 400;
    font-family: 'Comfortaa', sans-serif; transition: background 0.2s, color 0.2s, border 0.2s; outline: none;
}
.contact-detailed-form textarea, .contact-detailed-form .field-wrap textarea { min-height: 180px; padding-top: 20px; resize: vertical; }
.contact-detailed-form input::placeholder, .contact-detailed-form textarea::placeholder { color: #9ea4a7; opacity: 1; font-size: 16px; font-weight: 400; }
.contact-detailed-form input:focus, .contact-detailed-form textarea:focus,
.contact-detailed-form .field-wrap input:focus, .contact-detailed-form .field-wrap textarea:focus { background: #fff !important; border: 1px solid #17e4c2 !important; color: #222 !important; font-weight: 400; }
.contact-detailed-form input:focus::placeholder, .contact-detailed-form textarea:focus::placeholder { color: #aaa; opacity: 1; font-size: 16px; font-weight: 400; }

.contact-select-wrap { margin-bottom: 18px; }
.contact-select-wrap label { display: none; }
.contact-select-wrap .custome-select { position: relative; margin: 0; height: auto; line-height: normal; display: block; }
.contact-select-wrap .custome-select select { opacity: 1 !important; position: relative !important; width: 100%; background: #e7eaeb !important; border: none; color: #9ea4a7 !important; border-radius: 3px; padding: 10px 35px; font-size: 16px; height: 45px; font-family: 'Comfortaa', sans-serif; cursor: pointer; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239ea4a7' fill='none' stroke-width='1.5'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 16px center !important; transition: background 0.2s, color 0.2s, border 0.2s; }
.contact-select-wrap .custome-select select option { color: #333; background: #fff; }
.contact-select-wrap .custome-select select:focus { background-color: #fff !important; border: 1px solid #17e4c2 !important; color: #222 !important; outline: none; }

.contact-choice-row { margin: 4px 0 22px; }
.contact-choice-check { position: relative; display: inline-flex; align-items: center; }
.contact-choice-check input { position: absolute; opacity: 0; pointer-events: none; }
.contact-choice-check label { position: relative; padding-left: 34px; margin: 0; cursor: pointer; line-height: 24px; color: #444 !important; font-size: 14px; }
.contact-choice-check label::before { content: ""; position: absolute; left: 0; top: 1px; width: 20px; height: 20px; border: 1px solid rgba(0,0,0,0.25); background: #f6f8fa; border-radius: 4px; transition: border-color 0.2s, background 0.2s; }
.contact-choice-check input:checked + label::after { content: ""; position: absolute; left: 7px; top: 4px; width: 6px; height: 11px; border: solid #17e4c2; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.contact-choice-check input:checked + label::before { border-color: #17e4c2; background: rgba(23,228,194,0.1); }

.contact-page-privacy { margin: 0 0 24px; color: #666 !important; line-height: 1.7; font-size: 13px; }
.contact-page-privacy a { color: #17b89a !important; }
.contact-detailed-form .is-error input, .contact-detailed-form .is-error textarea,
.contact-select-wrap.is-error .custome-select select { border: 1px solid rgba(244,108,108,0.85) !important; box-shadow: inset 0 0 0 1px rgba(244,108,108,0.45); }
.contact-detailed-form .btn.btn-default { min-width: 220px; padding: 12px 36px; font-size: 14px; border-radius: 6px; background: #17e4c2; color: #0a0f1e; font-weight: 700; letter-spacing: 0.04em; transition: background 0.25s, transform 0.15s, box-shadow 0.25s; box-shadow: 0 2px 12px rgba(23,228,194,0.25); }
.contact-detailed-form .btn.btn-default:hover { background: #14d4b4; transform: translateY(-1px); box-shadow: 0 4px 20px rgba(23,228,194,0.4); }

@media (max-width: 991px) { .contact-page-hero { margin-top: 20px; } .contact-page-hero h1 { font-size: 30px; } .contact-page-panel { padding: 24px; } }
@media (max-width: 767px) {
    .contact-page-map iframe { height: 270px; }
    .contact-page-hero { padding: 28px 20px; margin: 16px auto 28px; }
    .contact-page-hero h1 { font-size: 22px; }
    .contact-page-hero p, .contact-page-panel p, .contact-page-panel-copy { font-size: 14px; }
    .contact-detailed-form .row > [class*="col-"] { padding-left: 15px; padding-right: 15px; }
    .contact-detailed-form .field-wrap { margin-bottom: 12px; }
    .contact-detailed-form .btn.btn-default, .contact-page-actions .btn { width: 100%; }
}

/* ==========================================================================
   Services Overview Page (services-overview-page.css)
   ========================================================================== */

.services-overview-page {
    --services-text-main: #13283c; --services-text-sub: #31485f;
    --services-border: rgba(19,40,60,0.16); --services-panel: rgba(255,255,255,0.56);
    --services-panel-strong: rgba(255,255,255,0.72); --services-accent: #17e4c2;
    padding: 118px 0 84px; color: var(--services-text-main);
}
.services-overview-page img { max-width: 100%; height: auto; display: block; }
.services-overview-page .services-overview-subnav { margin-bottom: 46px; padding: 14px 18px; background: rgba(255,255,255,0.42); border: 1px solid rgba(255,255,255,0.26); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.services-overview-page .services-overview-subnav ul { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 0; padding: 0; }
.services-overview-page .services-overview-subnav a { display: inline-block; padding: 8px 14px; color: var(--services-text-main); text-decoration: none; border: 1px solid var(--services-border); background: rgba(255,255,255,0.34); transition: all 0.25s ease; }
.services-overview-page .services-overview-subnav a:hover, .services-overview-page .services-overview-subnav a:focus { background: rgba(23,228,194,0.18); border-color: rgba(23,228,194,0.45); }
.services-overview-page .services-overview-hero { margin-bottom: 28px; }
.services-overview-page .services-overview-hero .row, .services-overview-page .services-overview-band .row, .services-overview-page .services-overview-detail .row { align-items: center; }
.services-overview-page .services-overview-hero-image img, .services-overview-page .services-overview-media img, .services-overview-page .services-overview-detail-image img { background: rgba(255,255,255,0.48); border: 1px solid rgba(255,255,255,0.24); padding: 10px; }
.services-overview-page .services-overview-hero-copy h1 { margin: 0 0 18px; font-size: 42px; line-height: 1.15; font-weight: 600; color: var(--services-text-main); }
.services-overview-page .services-overview-hero-copy p, .services-overview-page .services-overview-header p, .services-overview-page .services-overview-copy p, .services-overview-page .services-overview-highlight p, .services-overview-page .services-overview-detail p { margin: 0; font-size: 18px; line-height: 1.8; color: var(--services-text-sub); }
.services-overview-page .services-overview-header { text-align: center; margin-bottom: 12px; }
.services-overview-page .services-overview-header h2 { margin: 0 0 10px; font-size: 38px; line-height: 1.2; font-weight: 600; color: var(--services-text-main); }
.services-overview-page .services-overview-band { margin-top: 30px; padding: 42px 28px; background: transparent; }
.services-overview-page .services-overview-band-alt { background: var(--services-panel); border: 1px solid rgba(255,255,255,0.2); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.services-overview-page .services-overview-copy h2, .services-overview-page .services-overview-detail h2, .services-overview-page .services-overview-detail h3 { margin: 0 0 14px; font-size: 30px; line-height: 1.2; font-weight: 600; color: var(--services-text-main); }
.services-overview-page .services-overview-copy .services-overview-buttons, .services-overview-page .services-overview-detail .services-overview-buttons { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.services-overview-page .services-overview-button { display: inline-block; padding: 7px 18px; color: var(--services-text-main); text-decoration: none; border: 1px solid rgba(23,228,194,0.5); background: rgba(23,228,194,0.14); backdrop-filter: blur(7px); transition: all 0.25s ease; }
.services-overview-page .services-overview-button:hover, .services-overview-page .services-overview-button:focus { color: #ffffff; background: rgba(14,31,49,0.24); border-color: rgba(23,228,194,0.62); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.services-overview-page .services-overview-highlight { margin-top: 36px; padding: 28px 26px; background: var(--services-panel-strong); border: 1px solid rgba(255,255,255,0.22); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.services-overview-page .services-overview-highlight p + p { margin-top: 14px; }
.services-overview-page .services-overview-detail { margin-top: 34px; }
.services-overview-page .services-overview-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.services-overview-page .services-overview-list li { padding: 16px 18px; background: var(--services-panel); border-left: 3px solid var(--services-accent); font-size: 17px; line-height: 1.7; color: var(--services-text-sub); }
.services-overview-page .services-overview-list strong { display: block; margin-bottom: 4px; color: var(--services-text-main); font-weight: 700; }

@media (max-width: 991px) {
    .services-overview-page { padding-top: 108px; }
    .services-overview-page .services-overview-hero-copy h1 { font-size: 34px; }
    .services-overview-page .services-overview-header h2, .services-overview-page .services-overview-copy h2, .services-overview-page .services-overview-detail h2, .services-overview-page .services-overview-detail h3 { font-size: 26px; }
    .services-overview-page .services-overview-band { padding: 32px 22px; }
}
@media (max-width: 767px) {
    .services-overview-page { padding: 98px 0 64px; }
    .services-overview-page .services-overview-hero-copy h1 { font-size: 28px; }
    .services-overview-page .services-overview-hero-copy p, .services-overview-page .services-overview-header p, .services-overview-page .services-overview-copy p, .services-overview-page .services-overview-highlight p, .services-overview-page .services-overview-detail p, .services-overview-page .services-overview-list li { font-size: 15px; }
    .services-overview-page .services-overview-header h2, .services-overview-page .services-overview-copy h2, .services-overview-page .services-overview-detail h2, .services-overview-page .services-overview-detail h3 { font-size: 22px; }
    .services-overview-page .services-overview-subnav { padding: 12px 10px; }
    .services-overview-page .services-overview-subnav ul { gap: 8px; }
    .services-overview-page .services-overview-subnav a { padding: 7px 10px; font-size: 12px; }
    .services-overview-page .services-overview-band { padding: 24px 18px; }
}

/* ==========================================================================
   Webdesign Service Shell (webdesign-service-shell.css)
   ========================================================================== */

.webdesign-service-page { padding: 80px 0 0; }
.webdesign-service-intro { text-align: center; max-width: 880px; margin: 0 auto 60px; }
.webdesign-service-kicker { display: inline-block; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: #2b2b27; font-weight: 600; margin-bottom: 18px; padding: 6px 16px; border: 1px solid rgba(23,228,194,0.3); border-radius: 20px; background: rgba(23,228,194,0.06); }
.webdesign-service-intro h1 { font-size: 36px; font-weight: 700; color: #0e1528; line-height: 1.3; margin: 0 0 20px; }
.webdesign-service-border { width: 60px; height: 3px; background: linear-gradient(90deg, #17e4c2, #1fecb9); margin: 0 auto 20px; border-radius: 2px; }
.webdesign-service-copy { font-size: 17px; color: #3f4b5e; line-height: 1.8; max-width: 760px; margin: 0 auto; }
.webdesign-service-shell { position: relative; margin-top: 40px; }
.webdesign-service-input { display: none; }

.webdesign-service-nav { display: flex; gap: 12px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding: 8px 4px 20px; margin-bottom: 40px; scrollbar-width: none; position: static; width: 100%; flex-direction: row; }
.webdesign-service-nav::-webkit-scrollbar { display: none; }
.webdesign-service-nav::after { content: ''; flex: 0 0 1px; }

.webdesign-service-card { flex: 0 0 220px; scroll-snap-align: start; padding: 20px 18px; border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; cursor: pointer; transition: all 0.3s ease; background: rgba(255,255,255,0.04); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); text-align: center; user-select: none; }
.webdesign-service-card:hover { background: rgba(23,228,194,0.08); border-color: rgba(23,228,194,0.3); transform: translateY(-2px); }
.webdesign-service-card-icon { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; margin: 0 auto 12px; border-radius: 12px; background: linear-gradient(135deg, rgba(23,228,194,0.15), rgba(31,236,185,0.08)); font-size: 22px; color: #17e4c2; }
.webdesign-service-card-title { display: block; font-weight: 700; font-size: 14px; color: #ffffff; margin-bottom: 6px; }
.webdesign-service-card-title-full { display: none; }
.webdesign-service-card-title-short { display: block; }
.webdesign-service-card-copy { display: none; font-size: 13px; color: rgba(255,255,255,0.55); margin-top: 4px; line-height: 1.5; }

.webdesign-service-panels { margin-left: 0; }
.webdesign-service-panel { display: none; animation: wdPanelIn 0.5s ease; }
@keyframes wdPanelIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
.webdesign-service-panel .row { display: flex; align-items: center; flex-wrap: wrap; }
.webdesign-service-image { border-radius: 12px; overflow: hidden; box-shadow: 0 12px 40px rgba(0,0,0,0.25); }
.webdesign-service-image img { width: 100%; height: auto; display: block; }
.webdesign-service-image-label { text-align: center; margin-top: 12px; }
.webdesign-service-image-label p { display: inline-block; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: #17e4c2; font-weight: 600; background: rgba(23,228,194,0.08); padding: 5px 14px; border-radius: 16px; border: 1px solid rgba(23,228,194,0.2); margin: 0; }
.webdesign-service-content h2 { font-size: 26px; font-weight: 700; color: #ffffff; margin: 0 0 16px; line-height: 1.35; }
.webdesign-service-lead { font-size: 16px; color: rgba(255,255,255,0.78); font-weight: 500; line-height: 1.7; margin-bottom: 14px; }
.webdesign-service-body { font-size: 15px; color: rgba(255,255,255,0.65); line-height: 1.75; margin-bottom: 16px; }
.webdesign-service-points { list-style: none; padding: 0; margin: 0 0 20px; }
.webdesign-service-points li { position: relative; padding-left: 24px; margin-bottom: 10px; color: rgba(255,255,255,0.72); font-size: 14px; line-height: 1.65; }
.webdesign-service-points li::before { content: ""; position: absolute; left: 0; top: 8px; width: 8px; height: 8px; border-radius: 50%; background: #17e4c2; }
.webdesign-service-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 24px; }
.webdesign-service-tags span { font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,0.6); padding: 4px 12px; border: 1px solid rgba(255,255,255,0.12); border-radius: 16px; background: rgba(255,255,255,0.04); }
.webdesign-service-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.webdesign-service-button { display: inline-block; padding: 12px 28px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; border-radius: 8px; text-decoration: none; transition: all 0.25s ease; }
.webdesign-service-button-primary { background: #17e4c2; color: #0a0f1e; box-shadow: 0 2px 12px rgba(23,228,194,0.25); }
.webdesign-service-button-primary:hover { background: #14d4b4; color: #0a0f1e; text-decoration: none; transform: translateY(-1px); box-shadow: 0 4px 20px rgba(23,228,194,0.4); }
.webdesign-service-button-secondary { background: rgba(255,255,255,0.06); color: rgba(255,255,255,0.8); border: 1px solid rgba(255,255,255,0.15); }
.webdesign-service-button-secondary:hover { background: rgba(255,255,255,0.12); color: #fff; text-decoration: none; }

/* CSS Tab Interactivity (expanded from PHP loop) */
#webdesign-service-tab-1:checked ~ .webdesign-service-nav label[for="webdesign-service-tab-1"],
#webdesign-service-tab-2:checked ~ .webdesign-service-nav label[for="webdesign-service-tab-2"],
#webdesign-service-tab-3:checked ~ .webdesign-service-nav label[for="webdesign-service-tab-3"],
#webdesign-service-tab-4:checked ~ .webdesign-service-nav label[for="webdesign-service-tab-4"],
#webdesign-service-tab-5:checked ~ .webdesign-service-nav label[for="webdesign-service-tab-5"],
#webdesign-service-tab-6:checked ~ .webdesign-service-nav label[for="webdesign-service-tab-6"],
.webdesign-service-input:checked + label {
    background: rgba(23,228,194,0.12);
    border-color: #17e4c2;
    box-shadow: 0 4px 16px rgba(23,228,194,0.15);
}
#webdesign-service-tab-1:checked ~ .webdesign-service-panels .webdesign-service-panel-1 { display: block; }
#webdesign-service-tab-2:checked ~ .webdesign-service-panels .webdesign-service-panel-2 { display: block; }
#webdesign-service-tab-3:checked ~ .webdesign-service-panels .webdesign-service-panel-3 { display: block; }
#webdesign-service-tab-4:checked ~ .webdesign-service-panels .webdesign-service-panel-4 { display: block; }
#webdesign-service-tab-5:checked ~ .webdesign-service-panels .webdesign-service-panel-5 { display: block; }
#webdesign-service-tab-6:checked ~ .webdesign-service-panels .webdesign-service-panel-6 { display: block; }

@media (min-width: 992px) {
    .webdesign-service-card { flex: 0 0 260px; text-align: left; padding: 22px 20px; }
    .webdesign-service-card-icon { margin: 0 0 12px; }
    .webdesign-service-card-title-full { display: block; }
    .webdesign-service-card-title-short { display: none; }
    .webdesign-service-card-copy { display: block; }
    .webdesign-service-intro h1 { font-size: 42px; }
}
@media (max-width: 991px) {
    .webdesign-service-page { padding: 60px 0 0; }
    .webdesign-service-intro h1 { font-size: 28px; }
    .webdesign-service-copy { font-size: 15px; }
    .webdesign-service-card { flex: 0 0 160px; padding: 16px 14px; }
    .webdesign-service-card-icon { width: 40px; height: 40px; font-size: 18px; margin-bottom: 8px; }
    .webdesign-service-content h2 { font-size: 22px; }
    .webdesign-service-panel .col-lg-6 { margin-bottom: 24px; }
}
@media (max-width: 767px) {
    .webdesign-service-page { padding: 40px 0 0; }
    .webdesign-service-intro { margin-bottom: 36px; }
    .webdesign-service-intro h1 { font-size: 24px; }
    .webdesign-service-nav { gap: 8px; padding-bottom: 16px; margin-bottom: 24px; }
    .webdesign-service-card { flex: 0 0 130px; padding: 14px 10px; border-radius: 10px; }
    .webdesign-service-card-icon { width: 36px; height: 36px; font-size: 16px; border-radius: 8px; }
    .webdesign-service-card-title { font-size: 12px; }
    .webdesign-service-image { border-radius: 8px; }
    .webdesign-service-content h2 { font-size: 20px; margin-top: 12px; }
    .webdesign-service-actions { flex-direction: column; }
    .webdesign-service-button { text-align: center; width: 100%; }
}

/* ==========================================================================
   Webdesign Tab Pills (webdesign-tab-pills.css)
   ========================================================================== */

.wd5-shell { margin-top: 40px; }
.wd5-nav { list-style: none; padding: 0; margin: 54px 0 48px; display: flex; align-items: flex-end; }
.wd5-item { flex: 1; }
.wd5-link { display: block; padding: 10px 8px 16px; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.03); text-align: center; color: rgba(255,255,255,0.65); text-decoration: none; border-radius: 0; transition: border-color 0.2s, background 0.2s, color 0.2s; }
.wd5-link:hover, .wd5-link:focus { background: rgba(23,228,194,0.07); border-color: rgba(23,228,194,0.35); color: rgba(255,255,255,0.95); text-decoration: none; outline: none; }
.wd5-link.wd5-active { background: rgba(23,228,194,0.09); border: 1px solid #17e4c2; color: #ffffff; }
.wd5-service-icon { display: inline-flex; align-items: center; justify-content: center; width: 58px; height: 58px; font-size: 22px; border-radius: 50%; background: rgba(255,255,255,0.07); color: #17e4c2; border: 4px solid #0f1728; position: relative; top: -20px;  margin-top: -42px; transition: background 0.2s, color 0.2s; }
.wd5-link.wd5-active .wd5-service-icon, .wd5-link:hover .wd5-service-icon { background: #17e4c2; color: #0e1528; }
.wd5-service-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; margin: 10px 0 0; line-height: 1.3; }
.wd5-content { margin-top: 16px; }
.wd5-pane { display: none; }
.wd5-pane.wd5-active { display: block; animation: wd5FadeIn 0.38s ease; }
@keyframes wd5FadeIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
.wd5-img-wrap { position: relative; margin-top: 20px; }
.wd5-img-wrap::before { content: ''; position: absolute; border: 8px solid rgba(90,110,140,0.3); width: 100%; height: 80%; top: 50%; transform: translateY(-50%); pointer-events: none; }
.wd5-img-wrap img { display: block; width: 100%; height: auto; padding: 0 24px; position: relative; }
.wd5-badge-wrap { position: relative; }
.wd5-badge { background: #17e4c2; color: #0e1528; padding: 6px 22px; font-size: 10px; font-weight: 700 !important; letter-spacing: 0.12em; text-transform: uppercase; display: inline-block; position: absolute; right: 0; margin-top: -33.33337%; }
.wd5-text-box { margin-top: 20px; }
.wd5-title { font-size: 24px; font-weight: 700; color: #0e1528; position: relative; padding-bottom: 18px; margin: 0; line-height: 1.3; }
.wd5-title::before { content: ''; position: absolute; bottom: 0; left: 0; width: 60px; border-bottom: 2px solid #17e4c2; }
.wd5-lead { font-size: 15px; font-weight: 600; text-transform: uppercase; color: #3f4b5e; line-height: 1.6; margin: 22px 0 0; }
.wd5-body { color: #3f4b5e; line-height: 1.75; font-size: 15px; margin: 14px 0 0; }
.wd5-points { list-style: none; padding: 0; margin: 14px 0 0; }
.wd5-points li { position: relative; padding-left: 20px; margin-bottom: 8px; color: #3f4b5e; font-size: 16px; line-height: 1.65; }
.wd5-points li::before { content: ''; position: absolute; left: 0; top: 8px; width: 7px; height: 7px; background: #17e4c2; }
.wd5-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 16px; }
.wd5-tags span { font-size: 12px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: #2b2b27; padding: 4px 10px; border: 1px solid rgba(0,0,0,0.1); border-radius: 14px; background: #17e4c277; }
.wd5-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 22px; }
.wd5-btn-primary { display: inline-block; padding: 11px 28px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; border-radius: 4px; text-decoration: none; background: #17e4c2; color: #0a0f1e; box-shadow: 0 2px 12px rgba(23,228,194,0.25); transition: background 0.2s, transform 0.15s, box-shadow 0.2s; }
.wd5-btn-primary:hover, .wd5-btn-primary:focus { background: #14d4b4; color: #0a0f1e; text-decoration: none; transform: translateY(-1px); box-shadow: 0 4px 20px rgba(23,228,194,0.4); }
.wd5-btn-secondary { 
display: inline-block;
    padding: 11px 28px 7px 28px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-radius: 4px;
    text-decoration: none;
    background: rgb(0 0 0 / 77%);
    color: rgb(255 255 255);
    border: 1px solid rgba(255, 255, 255, 0.14);
    transition: background 0.2s, color 0.2s;
        }

.wd5-btn-secondary:hover, .wd5-btn-secondary:focus { background: rgba(0,0,0,0.087); color: #000; text-decoration: none; transition: ease-in .7s;}

@media (min-width: 992px) { .wd5-service-label { display: block; } .wd5-text-box { padding-left: 30px; margin-top: 20px; } .wd5-title { font-size: 26px; } }
@media (max-width: 991px) {
    .wd5-nav { margin-top: 48px; margin-bottom: 36px; }
    .wd5-service-icon { width: 46px; height: 46px; font-size: 17px; margin-top: -34px; }
    .wd5-link { padding: 8px 4px 12px; }
    .wd5-title { font-size: 21px; margin-top: 16px; }
    .wd5-pane .col-lg-6:first-child { margin-bottom: 20px; }
}
@media (max-width: 767px) {
    .wd5-nav { margin-top: 40px; margin-bottom: 28px; }
    .wd5-service-icon { width: 38px; height: 38px; font-size: 14px; margin-top: -28px; border-width: 3px; }
    .wd5-link { padding: 6px 2px 10px; }
    .wd5-badge { position: static; margin-top: 12px; display: inline-block; }
    .wd5-badge-wrap { text-align: right; }
    .wd5-title { font-size: 19px; }
    .wd5-lead { font-size: 13px; }
    .wd5-actions { flex-direction: column; }
    .wd5-btn-primary, .wd5-btn-secondary { text-align: center; width: 100%; }
}

/* =====================================================
   Referenzen Carousel – full viewport width
   ===================================================== */
.ref-section {
    margin-bottom: 50px;
}
.ref-section-lead {
    margin-top: 10px;
    font-size: 1.25em;
    color: #31485f;
}
.ref-carousel-outer {
    width: 100%;
    margin-bottom: 24px;
}
.ref-carousel-wrap {
    display: flex;
    align-items: stretch;
    width: 100%;
}
.ref-arrow {
    flex-shrink: 0;
    width: 60px;
    background: #2c2c2c82;
    border: none;
    cursor: pointer;
    font-size: 40px;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    min-height: 120px;
    transition: background 0.2s, color 0.2s;
    backdrop-filter: blur(4px);
}
.ref-arrow:hover {
    background: #17e4c2;
    color: #fff;
}
.ref-carousel-track {
    flex: 1;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 12px;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.ref-carousel-track::-webkit-scrollbar {
    display: none;
}
/* Brand Button */
.btn-brand {
    background: linear-gradient(90deg, #17e4c2 0%, #00bfae 100%);
    color: #13283c;
    border: none;
    border-radius: 32px;
    padding: 16px 38px;
    font-size: 1.7rem;
    font-weight: 700;
    box-shadow: 0 2px 16px -4px #17e4c2;
    letter-spacing: 0.04em;
    transition: background 0.18s, color 0.18s, box-shadow 0.18s;
    outline: none;
    margin: 18px 0 0 0;
    display: inline-block;
}
.btn-brand:hover,
.btn-brand:focus {
    background: linear-gradient(90deg, #00bfae 0%, #17e4c2 100%);
    color: #fff;
    box-shadow: 0 4px 32px -2px #17e4c2;
    text-decoration: none;
}

/* =====================================================
   Text + Image layout (neue-firmenwebsite sections)
   ===================================================== */
.wd-text-image-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-left: -15px;
    margin-right: -15px;
}
.wd-text-image-col {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 16px 15px;
}
.wd-section-image {
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.12);
    display: block;
}
@media (max-width: 767px) {
    .wd-text-image-col {
        margin-top: 24px;
    }
}

/* =====================================================
   Staggered card grid – SEA & Local SEO hero
   Layout: 2 rows × N columns, fills column-by-column,
   horizontally scrollable. Stagger: odd columns offset down.
   Reference: "dieses design" – mt-md-5 on first card
   ===================================================== */

/* 2 rows, auto columns, fill by column */
.lseo-cards-grid {
    display: grid !important;
    grid-template-rows: repeat(2, auto) !important;
    grid-template-columns: unset !important;
    grid-auto-flow: column !important;
    grid-auto-columns: minmax(170px, 210px) !important;
    align-items: start !important;
    gap: 18px !important;
    flex-wrap: unset !important;
    scroll-snap-type: unset !important;
    /* Don't restrict width – parent scrolls */
    width: max-content;
    min-width: 100%;
}

/* Reset all card margins first */
.lseo-cards-grid .lseo-card {
    margin-top: 0 !important;
    flex: unset !important;
    aspect-ratio: unset !important;
    min-height: 160px;
    scroll-snap-align: unset !important;
}

/* Stagger: first card of odd-numbered columns pushed down.
   With 2-row column flow: col1=children1&2, col2=children3&4, col3=children5&6…
   Odd cols (1,3,5…) = nth-child(4n+1) for their row-1 card */
.lseo-cards-grid .lseo-card:nth-child(4n+1) {
    margin-top: 40px !important;
}

/* Hero cards container: always scroll horizontally, no scrollbar */
.lseo-hero-cards {
    overflow-x: auto !important;
    overflow-y: visible !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    cursor: default !important;
    padding-bottom: 8px !important;
}
.lseo-hero-cards::-webkit-scrollbar { display: none !important; }

/* Cancel stagger + restore static grid for SEO page hero */
.seo-hero .lseo-cards-grid {
    grid-template-rows: unset !important;
    grid-template-columns: repeat(2, 1fr) !important;
    grid-auto-flow: row !important;
    grid-auto-columns: unset !important;
    width: auto !important;
    min-width: unset !important;
}
.seo-hero .lseo-cards-grid .lseo-card {
    margin-top: 0 !important;
    aspect-ratio: unset !important;
}

/* On mobile: keep column-flow, slightly smaller cards */
@media (max-width: 991px) {
    .lseo-cards-grid {
        display: grid !important;
        grid-auto-columns: minmax(145px, 180px) !important;
        flex-wrap: unset !important;
        scroll-snap-type: unset !important;
        margin-top: 32px;
    }
    .lseo-cards-grid .lseo-card {
        flex: unset !important;
        scroll-snap-align: unset !important;
    }
}

/* =====================================================
   Local SEO benefit cards (01/02/03) – horizontal scroll
   ===================================================== */
.lseo-benefits-row {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    gap: 20px !important;
    margin: 20px 0 0 0 !important;
    padding-bottom: 8px !important;
}
.lseo-benefits-row::-webkit-scrollbar { display: none !important; }
.lseo-benefits-row > [class*="col-"] {
    flex: 0 0 300px !important;
    width: 300px !important;
    max-width: 300px !important;
    padding: 0 !important;
    margin-bottom: 0 !important;
}

/* =====================================================
   Local SEO process steps – horizontal scroll
   ===================================================== */
.lseo-steps {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    gap: 24px !important;
    margin-top: 20px !important;
    padding-bottom: 8px !important;
    grid-template-columns: unset !important;
}
.lseo-steps::-webkit-scrollbar { display: none !important; }
.lseo-step {
    flex: 0 0 280px !important;
    width: 280px !important;
}
@media (max-width: 1199px) {
    .lseo-steps { grid-template-columns: unset !important; }
}
@media (max-width: 991px) {
    .lseo-steps { grid-template-columns: unset !important; }
    .lseo-benefits-row > [class*="col-"] {
        flex: 0 0 260px !important;
        width: 260px !important;
        max-width: 260px !important;
    }
    .lseo-step { flex: 0 0 240px !important; width: 240px !important; }
}

/* =====================================================
   Brand success / info popup overlay
   ===================================================== */
.xid-popup-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(0,0,0,0.65);
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    transition: opacity 0.3s;
}
.xid-popup-overlay.is-open {
    display: flex;
    opacity: 1;
}
.xid-popup-box {
    background: #0d1a2b;
    border: 1px solid rgba(23,228,194,0.25);
    border-radius: 16px;
    padding: 48px 40px 40px;
    max-width: 700px;
    width: 100%;
    text-align: center;
    box-shadow: 0 24px 80px rgba(0,0,0,0.5), 0 0 0 1px rgba(23,228,194,0.12);
    animation: xidPopupIn 0.35s cubic-bezier(0.4,0,0.2,1) forwards;
}
.xid-popup-box--success {
    background-image: url('/assets/img/Handshake.webp');
    background-size: cover;
    background-position: center;
    position: relative;
    overflow: hidden;
    border-color: rgba(23,228,194,0.4);
}
.xid-popup-box--success::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(10, 18, 30, 0.82);
    border-radius: inherit;
}
.xid-popup-box--success > * {
    position: relative;
    z-index: 1;
}
@keyframes xidPopupIn {
    from { transform: translateY(24px) scale(0.97); opacity: 0; }
    to   { transform: translateY(0) scale(1);       opacity: 1; }
}
.xid-popup-icon {
    font-size: 52px;
    color: #17e4c2;
    margin-bottom: 16px;
    line-height: 1;
}
.xid-popup-box h3 {
    color: #fff;
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 0 12px;
}
.xid-popup-box p {
    color: rgba(255,255,255,0.78);
    font-size: 1rem;
    line-height: 1.6;
    margin: 0 0 28px;
}
.xid-popup-close {
    background: linear-gradient(90deg, #17e4c2 0%, #00bfae 100%);
    color: #0a0f1e;
    border: none;
    border-radius: 32px;
    padding: 13px 36px;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    letter-spacing: 0.04em;
    transition: background 0.2s, box-shadow 0.2s;
    
}
.xid-popup-close:hover {
    background: linear-gradient(90deg, #00bfae 0%, #17e4c2 100%);
    opacity: 0.7;
}
@media (max-width: 480px) {
    .xid-popup-box { padding: 36px 24px 28px; }
    .xid-popup-icon { font-size: 42px; }
    .xid-popup-box h3 { font-size: 1.25rem; }
}

/* =====================================================
   Portfolio / Homepage carousel: fixed 265×265 px images
   ===================================================== */
.ref-carousel-track .album-unit {
    flex: 0 0 265px;
    width: 265px;
}
.ref-carousel-track .album-unit figure {
    width: 265px;
    height: 265px;
    overflow: hidden;
    margin: 0;
}
.ref-carousel-track .album-unit figure img {
    width: 265px;
    height: 265px;
    object-fit: cover;
    display: block;
    position: static;
}

/* ==========================================================================
   Blog Preview (Homepage Aktuelles section)
   ========================================================================== */
.blog-preview-section { padding-bottom: 10px; }
.blog-preview-grid { margin-top: 30px; }
.blog-preview-col { margin-bottom: 30px; }
.blog-preview-card { background: #fff; border: 1px solid rgba(0,0,0,0.08); border-radius: 8px; overflow: hidden; height: 100%; display: flex; flex-direction: column; transition: transform 0.25s ease, box-shadow 0.25s ease; }
.blog-preview-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,0.12); }
.blog-preview-img-wrap { display: block; overflow: hidden; aspect-ratio: 16/9; }
.blog-preview-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; display: block; }
.blog-preview-card:hover .blog-preview-img-wrap img { transform: scale(1.05); }
.blog-preview-body { padding: 18px 20px 20px; flex: 1; display: flex; flex-direction: column; }
.blog-preview-date { font-size: 11px; color: #17b89a; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 8px; display: block; }
.blog-preview-title { font-size: 15px; font-weight: 600; line-height: 1.4; margin: 0 0 10px; }
.blog-preview-title a { color: #1a2a3a; text-decoration: none; }
.blog-preview-title a:hover { color: #17b89a; }
.blog-preview-excerpt { font-size: 13px; color: #555; line-height: 1.65; margin: 0 0 14px; flex: 1; }
.blog-preview-more { font-size: 12px; font-weight: 600; color: #17b89a; text-decoration: none; text-transform: uppercase; letter-spacing: 0.06em; }
.blog-preview-more:hover { color: #0ea578; text-decoration: none; }

/* ==========================================================================
   Blog Index Page
   ========================================================================== */
.blog-index-section { padding: 50px 0 60px; }
.blog-index-page-header { margin-bottom: 40px; padding-bottom: 24px; border-bottom: 1px solid rgba(0,0,0,0.08); }
.blog-index-page-header h1 { font-size: 28px; font-weight: 700; color: #1a2a3a; margin: 0 0 8px; }
.blog-index-page-header p { font-size: 15px; color: #666; margin: 0; }
.blog-index-container { display: flex; flex-direction: column; gap: 0; }
.blog-index-readmore { font-size: 13px; font-weight: 600; color: #17b89a; text-decoration: none; text-transform: uppercase; letter-spacing: 0.05em; }
.blog-index-readmore:hover { color: #0ea578; text-decoration: none; }
.blog-index-card {    background-color: rgba(0, 0, 0, .07);
    display: flex;
    gap: 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    padding: 0;
margin-top: 0;}
.blog-index-card:hover { transition: ease-in .7s; background-color: #17e4c244;
    }
.blog-index-card:first-child { padding-top: 0; }
.blog-index-img-wrap { flex-shrink: 0; width: 280px; height: 180px; overflow: hidden; border-radius: 0; display: block; }
.blog-index-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; display: block; }
.blog-index-card:hover .blog-index-img-wrap img { transform: scale(1.04); }
.blog-index-body { padding: 0 0 0 28px; flex: 1; display: flex; flex-direction: column; justify-content: center; }
.blog-index-date { font-size: 11px; color: #17b89a; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 8px; display: block; }
.blog-index-title { font-size: 20px; font-weight: 600; line-height: 1.35; margin: 0 0 12px; }
.blog-index-title a { color: #1a2a3a; text-decoration: none; }
.blog-index-title a:hover { color: #17b89a; }
.blog-index-excerpt { font-size: 14px; color: #555; line-height: 1.7; margin: 0 0 16px; }
@media (max-width: 767px) {
    .blog-index-card { flex-direction: column; gap: 0; }
    .blog-index-img-wrap { width: 100%; height: 200px; margin-bottom: 16px; }
    .blog-index-body { padding: 20px; }
    .blog-index-title { font-size: 17px; }
}

/* ==========================================================================
   Blog Single Article Page
   ========================================================================== */
.blog-single-wrap { padding: 50px 0 80px; background: #fff; }
.blog-single-nav { margin-bottom: 30px; }
.blog-single-footer { display: flex; justify-content: space-between; gap: 12px; margin-top: 40px; padding-top: 30px; border-top: 1px solid rgba(0,0,0,0.1); flex-wrap: wrap; }
.blog-single-article { margin: 0 auto; }
.blog-single-header { margin-bottom: 20px; }
.blog-single-title { font-size: 28px; font-weight: 700; line-height: 1.3; margin: 0 0 12px; color: #1a2a3a; }
.blog-single-date { font-size: 12px; color: #17b89a; text-transform: uppercase; letter-spacing: 0.08em; }
.blog-single-figure { margin: 0 0 24px; }
.blog-single-figure img { width: 100%; height: auto; display: block; }
.blog-single-content { color: #333; font-size: 15px; line-height: 1.8; }
.blog-single-content::after { content: ''; display: table; clear: both; }
.blog-single-content h2 { font-size: 20px; font-weight: 600; color: #1a2a3a; margin: 32px 0 12px; }
.blog-single-content p { margin-bottom: 18px; }
.blog-single-content blockquote { border-left: 3px solid #17b89a; padding: 14px 20px; margin: 28px 0; background: rgba(23,184,154,0.06); color: #444; font-style: italic; border-radius: 0 6px 6px 0; }
.blog-single-tags { margin-top: 32px; display: flex; flex-wrap: wrap; gap: 8px; }
.blog-single-tags a { display: inline-block; padding: 4px 12px; border: 1px solid rgba(23,184,154,0.5); color: #17b89a; border-radius: 4px; font-size: 12px; text-decoration: none; transition: background 0.2s; }
.blog-single-tags a:hover { background: rgba(23,184,154,0.1); }
@media (min-width: 768px) {
    .blog-single-figure {
        float: left;
        width: 42%;
        margin: 0 36px 24px 0;
    }
    .blog-single-header { text-align: left !important; }
}
@media (max-width: 767px) {
    .blog-single-title { font-size: 22px; }
    .blog-single-content h2 { font-size: 17px; }
    .blog-single-footer { flex-direction: column; }
    .blog-single-footer .btn { width: 100%; text-align: center; }
}

.roundig {
        border: solid 1px #17e4c288;
    background: rgba(0, 0, 0, .07);
    border-radius: 50%;
    margin: auto;
    box-shadow: 1px 2px 3px rgba(0, 0, 0, .07);
    backdrop-filter: blur(7px);
}
/* ==========================================================================
   Legal Pages (Impressum / Datenschutz)
   ========================================================================== */
.legal-page-section { padding: 60px 0 80px; background: #fff; }
.legal-page-header { margin-bottom: 40px; border-bottom: 1px solid rgba(0,0,0,0.08); padding-bottom: 24px; }
.legal-page-header h1 { font-size: 32px; font-weight: 700; color: #1a2a3a; margin: 0; }
.legal-page-content { max-width: 820px; }
.legal-page-content h2 { font-size: 20px; font-weight: 600; color: #1a2a3a; margin: 36px 0 12px; }
.legal-page-content h3 { font-size: 16px; font-weight: 600; color: #1a2a3a; margin: 24px 0 8px; }
.legal-page-content p { color: #444; font-size: 15px; line-height: 1.8; margin-bottom: 16px; }
.legal-page-content a { color: #17b89a; }
.footer-legal-links { margin-top: 10px; }
.footer-legal-links a { color: rgba(0,0,0,0.77); font-size: 12px; text-decoration: none; transition: color 0.2s; }
.footer-legal-links a:hover { color: #17e4c2; }

/* =====================================================
   Mobile Fixes
   ===================================================== */

/* Navbar – correct min-height on mobile so it matches the 55px container */
@media (max-width: 767px) {
    #sticktop { min-height: 55px; }
}

/* Slider – layout fixes for all mobile (≤767px):
   compensate for fixed 55px navbar; prevent albumAction overlapping text */
@media (max-width: 767px) {
    .xv_slider .xv_slide {
        height: 420px;
        padding-top: 55px;
    }
    .flex-caption p   { padding-bottom: 18px; margin-top: 8px; }
    .custom-slider .about-album { padding-top: 10px; }
}

/* Slider – tablet-mobile (576px–767px):
   force columns to full width; medium font sizes */
@media (min-width: 576px) and (max-width: 767px) {
    .custom-slider .flex-caption .col-sm-6,
    .custom-slider .flex-caption .col-sm-3,
    .custom-slider .flex-caption .col-md-3,
    .custom-slider .flex-caption .col-md-6 {
        flex: 0 0 100%;
        max-width: 100%;
        width: 100%;
    }
    .custom-slider h2 { font-size: 22px !important; line-height: 1.2; }
    .custom-slider h6 { font-size: 15px !important; line-height: 1.3; }
    .custom-slider p  { font-size: 14px !important; margin-top: 12px; line-height: 1.5; }
}

/* Slider – small mobile (≤575px): not too small */
@media (max-width: 575px) {
    .custom-slider h2 { font-size: 24px !important; line-height: 1.2; }
    .custom-slider h6 { font-size: 16px !important; line-height: 1.3; }
    .custom-slider p  { font-size: 14px !important; margin-top: 50px; line-height: 1.5; }
}

/* Angebote / Partner – remove max-width so cards fill the container on mobile */
@media (max-width: 767px) {
    .event-unit { max-width: 100% !important; }
}

/* Homepage contact form – placeholder style matching the Kontakt page */
#contactForm input::placeholder,
#contactForm textarea::placeholder {
    color: #9ea4a7; opacity: 1; font-size: 16px; font-weight: 400;
}
#contactForm input:focus::placeholder,
#contactForm textarea:focus::placeholder {
    color: #bbb; opacity: 1;
}

/* Portfolio / Homepage carousel arrows – half width on mobile */
@media (max-width: 767px) {
    .ref-arrow { width: 30px; font-size: 22px; }
}