.page-header {
	margin-top: 0px;
}

.panel-body {
	padding-top: 0px;
}


.featureImg{
	margin-bottom: 15px;
}


body {
 /*background: #FBFAE6 !important; */
 /*background: #F5EFE6 !important;*/


 margin: 0;
 background: url('../images/bg.jpg');
 /* background: url('../img/bg1.jpg'); */
 /*background: #f4f4f4 !important;*/
 background-repeat:repeat;
 display: compact;
 }



 h1, h2, h3, h4, h5, h6 {
    font-family:  Tahoma, Arial;
/*	font-size: 16px;*/
	color: #666666;
}
p, div {
    font-family: Tahoma, Arial;
	font-size: 10px;
	color: #666666;
}


.margin5 {
	margin:5px;
}

.margintop5 {
	margin-top:5px;
}

.fontsize70percent{
/*	font-size: 70%;*/
}


.box-shadow{ -moz-box-shadow: 0px 0px 0px 2px #e8e6e6; /* Firefox */
-webkit-box-shadow: 0px 0px 0px 2px #e8e6e6; /* Safari, Chrome */
box-shadow: 0px 0px 0px 2px #e8e6e6; /* CSS3 */ }


/*/////////////////////////////////////////*/




.navbar-custom {
	  background-color:#444444;
    color:#ffffff;
  	border-radius:0;
}


.navbar-custom .navbar-nav > li > a {
  	color:#fff;
  	padding-left:20px;
  	padding-right:20px;
	font-size: 14px;
}
.navbar-custom .navbar-nav > .active > a, .navbar-nav > .active > a:hover, .navbar-nav > .active > a:focus {
    color: #000000;
	background-color:transparent;
}

.navbar-custom .navbar-nav > li > a:hover, .nav > li > a:focus {
    text-decoration: none;
    background-color: #33aaaa;
}

.navbar-custom .navbar-brand {
  	color:#eeeeee;
}
.navbar-custom .navbar-toggle {
  	background-color:#eeeeee;
}
.navbar-custom .icon-bar {
  	background-color:#33aa33;
}


/*//////////////////////////////////////*/
label{display:block;}
/*label {clear:both;float:left;width:300px;}*/


.nav-pills  .nav-stacked .nav {
    background-color:#444444;
    color:#ffffff;
    border-radius:0;
}

.navbar-pills  > li > a {
    color:#fff;
    padding-left:20px;
    padding-right:20px;
    font-size: 14px;
}
.navbar-pills  > .active > a, .navbar-nav > .active > a:hover, .navbar-nav > .active > a:focus {
    color: #000000;
    /* background-color:transparent; */
}

.navbar-pills > li > a:hover, .nav > li > a:focus {
    text-decoration: none;
    background-color: #33aaaa;
}
.navbar-pills .navbar-brand {
    color:#eeeeee;
}
.navbar-pills .navbar-toggle {
    background-color:#eeeeee;
}
.navbar-pills .icon-bar {
    background-color:#33aa33;
}




/* Add these new styles */

.side-nav-panel {
    background: rgba(68, 68, 68, 0.9); /* Darker, semi-transparent background */
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    padding: 15px 0;
    margin-bottom: 30px;
    backdrop-filter: blur(5px);
}

.main-nav {
    margin: 0;
}

.main-nav .nav-item {
    margin: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.main-nav .nav-item:last-child {
    border-bottom: none;
}

.main-nav .nav-link {
    color: #ffffff;
    padding: 12px 20px 12px 35px; /* Increased left padding to make room for arrow */
    transition: all 0.3s ease;
    font-size: 14px;
    position: relative;
    background: transparent;
}

/* Add arrow using pseudo-element */
.main-nav .nav-link:before {
    content: '';
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 5px 0 5px 8px;
    border-color: transparent transparent transparent rgba(255, 255, 255, 0.5);
    transition: all 0.3s ease;
}

/* Style arrow on hover */
.main-nav .nav-link:hover:before {
    border-color: transparent transparent transparent rgba(255, 255, 255, 0.9);
    left: 18px; /* Move arrow slightly right on hover */
}

/* Style arrow for active link */
.main-nav .nav-link.active:before {
    border-color: transparent transparent transparent #ffffff;
}

.main-nav .nav-link i {
    margin-right: 8px;
    margin-left: 5px;
    width: 16px;
    text-align: center;
    opacity: 0.7;
}

.nav-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.15);
    margin: 8px 0;
}

/* Override Bootstrap nav-pills styles */
.nav-pills > li > a:hover,
.nav-pills > li > a:focus {
    background-color: rgba(255, 255, 255, 0.1);
    color: #fff;
}

.nav-pills > .active > a,
.nav-pills > .active > a:hover,
.nav-pills > .active > a:focus {
    background-color: rgba(51, 170, 170, 0.9);
    color: white;
}

/* Marketing Banner Styles */
.marketing-banner {
    background: linear-gradient(135deg, rgba(51, 170, 170, 0.95) 0%, rgba(41, 128, 185, 0.95) 100%);
    border-radius: 8px;
    padding: 25px;
    margin: 20px 0 30px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.marketing-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* background: url('../images/pattern.png') repeat; */
    opacity: 0.1;
    z-index: 1;
}

.banner-content {
    position: relative;
    z-index: 2;
}

.banner-title {
    color: #ffffff;
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 10px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Add these new styles */
@keyframes gradientText {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.banner-subtitle {
    color: #ffffff;
    font-size: 16px;
    margin-bottom: 15px;
    background: linear-gradient(
        270deg,
        #ff6b6b,
        #4ecdc4,
        #45b7d1,
        #96c93d,
        #e056fd,
        #20bf6b,
        #eb4d4b,
        #f0932b
    );
    background-size: 400% 400%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradientText 10s ease infinite;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    text-shadow: none;
}

/* Add a glow effect */
.banner-subtitle::after {
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    filter: blur(8px);
    opacity: 0.7;
}

.banner-text {
    color: #ffffff;
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 20px;
    opacity: 0.85;
}

.banner-cta {
    display: inline-block;
    background: rgba(255, 255, 255, 0.15);
    color: #ffffff;
    padding: 10px 25px;
    border-radius: 25px;
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
    border: 2px solid rgba(255, 255, 255, 0.3);
}

.banner-cta:hover {
    background: rgba(255, 255, 255, 0.25);
    color: #ffffff;
    text-decoration: none;
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.5);
}

/* Add hover effect to the entire banner */
.marketing-banner:hover {
    transform: translateY(-2px);
    transition: transform 0.3s ease;
}

/* Elegant Since 2003 styles */
.since-2003 {
    text-align: center;
    margin-bottom: 25px;
    padding: 15px 0;
    position: relative;
}

.since-2003::before,
.since-2003::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    height: 1px;
    width: 60%;
    background: linear-gradient(to right, transparent, rgba(51, 170, 170, 0.5), transparent);
}

.since-2003::before {
    top: 0;
}

.since-2003::after {
    bottom: 0;
}

.since-text {
    display: block;
    font-size: 16px;
    color: #666;
    font-style: italic;
    margin-bottom: 5px;
    font-family: "Georgia", serif;
}

.year-text {
    display: block;
    font-size: 28px;
    font-weight: bold;
    color: #33aaaa;
    letter-spacing: 2px;
    font-family: "Georgia", serif;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
}

/* Purchase Page Styles */
.purchase-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 30px;
}

/* Trust Indicators */
.trust-indicators {
    display: flex;
    justify-content: space-around;
    margin-bottom: 40px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 10px;
    box-shadow: 0 2px 15px rgba(0,0,0,0.1);
}

.trust-item {
    text-align: center;
    padding: 15px;
}

.trust-item i {
    font-size: 24px;
    color: #33aaaa;
    margin-bottom: 10px;
    display: block;
}

.trust-item span {
    font-size: 14px;
    color: #666;
    font-weight: 500;
}

/* Video Section */
.video-showcase {
    text-align: center;
    margin: 40px 0;
    padding: 20px;
    background: rgba(0,0,0,0.03);
    border-radius: 10px;
}

.video-container {
    width: 50%;
    margin: 0 auto;
    position: relative;
    padding-bottom: 28.125%; /* Maintains 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

/* Info Card */
.info-card {
    background: white;
    border-radius: 10px;
    padding: 25px;
    margin: 30px 0;
    box-shadow: 0 2px 15px rgba(0,0,0,0.1);
}

.info-card h3 {
    color: #333;
    margin-bottom: 20px;
    font-size: 20px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.feature-list {
    list-style: none;
    padding: 0;
}

.feature-list li {
    margin-bottom: 20px;
    padding-left: 25px;
    position: relative;
    line-height: 1.6;
    color: #555;
}

.feature-list li:before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #33aaaa;
}

/* Purchase Options */
.purchase-options {
    text-align: center;
    margin: 40px 0;
}

.price-tag {
    display: inline-block;
    margin-bottom: 30px;
    padding: 15px 40px;
    background: linear-gradient(135deg, #33aaaa 0%, #2980b9 100%);
    border-radius: 50px;
    color: white;
}

.price-amount {
    font-size: 36px;
    font-weight: bold;
    color: #dddddd;
}

.price-period {
    font-size: 14px;
    opacity: 0.9;
    color: #cccccc;
}

.payment-box {
    background: white;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 15px rgba(0,0,0,0.1);
    margin: 20px 0;
}

.payment-header {
    background: #33aaaa;
    color: white;
    padding: 15px;
    font-size: 18px;
}

.payment-content {
    padding: 25px;
}

.accepted-methods {
    margin: 20px 0;
}

.accepted-methods i {
    font-size: 30px;
    margin: 0 10px;
    color: #666;
}

.purchase-button {
    display: inline-block;
    background: #33aaaa;
    color: white;
    padding: 15px 40px;
    border-radius: 25px;
    text-decoration: none;
    font-weight: 500;
    margin-top: 20px;
    transition: all 0.3s ease;
    font-size: 14px;
}

.purchase-button:hover {
    background: #2980b9;
    transform: translateY(-2px);
    color: white;
    text-decoration: none;
}

/* Contact Support */
.contact-support {
    text-align: center;
    margin-top: 40px;
    padding: 20px;
    background: rgba(255,255,255,0.9);
    border-radius: 10px;
}

.wire-transfer-note {
    color: #666;
    font-size: 14px;
    margin-top: 10px;
}

/* Add styles for the ad banner container */
.ad-banner-container2 {
    background: rgba(255, 255, 255, 0.95);
    padding: 10px;
    border-radius: 6px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.ad-banner-container2 img {
    opacity: 0.75;
    filter: brightness(1.1) contrast(0.9) sepia(0.1);
    /* mix-blend-mode: luminosity; */
    transition: all 0.3s ease;
}

.ad-banner-container2:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.ad-banner-container2:hover img {
    opacity: 1;
    filter: brightness(1) contrast(1) sepia(0);
    mix-blend-mode: normal;
}

/* Recommendations box styles */
.recommendations {
    background: linear-gradient(135deg, rgba(51, 170, 170, 0.05) 0%, rgba(41, 128, 185, 0.05) 100%);
    border-left: 3px solid #33aaaa;
    padding: 15px;
    margin: 20px 0;
    border-radius: 0 8px 8px 0;
    font-size: 12px;
    line-height: 1.5;
}

.recommendations-title {
    color: #33aaaa;
    font-weight: bold;
    margin-bottom: 8px;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.recommendations-links {
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.rec-link {
    flex: 1;
    min-width: 150px;
    padding: 8px;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 4px;
    text-align: center;
    transition: all 0.3s ease;
    text-decoration: none;
    color: #666;
}

.rec-link:hover {
    background: rgba(51, 170, 170, 0.1);
    transform: translateY(-2px);
    text-decoration: none;
    color: #33aaaa;
}

.rec-link i {
    margin-right: 5px;
    color: #33aaaa;
}

/* Updated Purchase Options Styles */
.pricing-box {
    background: white;
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0,0,0,0.12);
    padding: 40px;
    margin: 40px auto;
    max-width: 600px;
}

.pricing-header {
    margin-bottom: 30px;
    text-align: center;
}

.pricing-title {
    font-size: 32px;
    color: #333;
    margin-bottom: 15px;
    font-weight: 600;
}

.pricing-subtitle {
    color: #666;
    font-size: 18px;
    margin-bottom: 25px;
}

.price-display {
    background: linear-gradient(135deg, #33aaaa 0%, #2980b9 100%);
    padding: 35px;
    border-radius: 12px;
    color: white;
    margin-bottom: 35px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(51, 170, 170, 0.2);
}

.original-price {
    font-size: 22px;
    text-decoration: line-through;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 8px;
}

.current-price {
    font-size: 56px;
    font-weight: bold;
    margin: 15px 0;
    text-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.price-period {
    font-size: 20px;
    opacity: 0.9;
}

.monthly-price {
    background: rgba(255, 255, 255, 0.15);
    padding: 10px 20px;
    border-radius: 25px;
    font-size: 16px;
    display: inline-block;
    margin-top: 15px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.pricing-features {
    margin: 35px 0;
    padding-left: 20px;
}

.pricing-features li {
    margin: 20px 0;
    padding-left: 35px;
    position: relative;
    color: #444;
    font-size: 16px;
    line-height: 1.6;
}

.pricing-features li:before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #33aaaa;
    font-weight: bold;
    font-size: 18px;
}

.payment-methods-grid {
    display: flex;
    justify-content: center;
    gap: 25px;
    margin: 30px 0;
    align-items: center;
    flex-wrap: wrap;
}

.payment-methods-grid i {
    font-size: 42px;
    color: #555;
    transition: all 0.3s ease;
    opacity: 0.8;
}

.payment-methods-grid i:hover {
    color: #33aaaa;
    transform: translateY(-2px);
    opacity: 1;
}

.secure-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: #666;
    font-size: 15px;
    margin-top: 25px;
    padding: 12px;
    background: rgba(51, 170, 170, 0.05);
    border-radius: 8px;
}

.secure-badge i {
    color: #33aaaa;
    font-size: 18px;
}

/* Update purchase button styles */
.purchase-button {
    background: #33aaaa;
    color: white;
    padding: 18px 45px;
    border-radius: 30px;
    font-size: 18px;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease;
    border: none;
    margin-top: 25px;
    box-shadow: 0 4px 15px rgba(51, 170, 170, 0.2);
}

.purchase-button:hover {
    background: #2980b9;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(41, 128, 185, 0.25);
    color: white;
    text-decoration: none;
}

.purchase-button i {
    margin-left: 8px;
}

/* Support Contact Section Styles */
.support-contact {
    text-align: center;
    background: white;
    border-radius: 12px;
    padding: 30px;
    margin: 40px auto;
    max-width: 600px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}

.support-icon {
    margin-bottom: 15px;
}

.support-icon i {
    font-size: 32px;
    color: #33aaaa;
}

.support-contact h4 {
    color: #333;
    font-size: 20px;
    margin-bottom: 15px;
}

.support-contact p {
    color: #666;
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 15px;
}

.support-email {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #33aaaa;
    font-size: 18px;
    font-weight: 500;
    text-decoration: none;
    padding: 10px 20px;
    background: rgba(51, 170, 170, 0.1);
    border-radius: 25px;
    transition: all 0.3s ease;
}

.support-email:hover {
    background: rgba(51, 170, 170, 0.15);
    transform: translateY(-2px);
    color: #2980b9;
    text-decoration: none;
}

.support-note {
    color: #888;
    font-size: 14px;
    margin-top: 15px;
    font-style: italic;
}

.side-nav-panel .nav-item {
    margin: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Add this new rule to remove bottom border from last nav-item in side-nav-panel */
.side-nav-panel .nav-item:last-child {
    border-bottom: none;
}


.promo-banner {
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    border: 1px solid rgba(51, 170, 170, 0.2);
    border-radius: 12px;
    padding: 1.5rem;
    margin: 1.5rem 0;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
}

.promo-banner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #33aaaa, #2980b9);
}

.promo-banner:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(51, 170, 170, 0.1);
}

.promo-message {
    color: #4a5568;
    font-size: 1rem;
    line-height: 1.5;
    font-weight: 400;
    text-align: center;
}

.promo-message-highlight {
    font-size: 1rem;
    font-weight: 500;
    display: block;
    background-image: linear-gradient(
        90deg,
        #33aaaa 0%,
        #2980b9 25%,
        #3498db 50%,
        #33aaaa 75%
    );
    background-size: 200% auto;
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shine 4s linear infinite;
    text-align: center;
    margin: 0.5rem 0;
}

@keyframes shine {
    to {
        background-position: 200% center;
    }
}

.promo-link {
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease;
    margin-top: 0.5rem;
}

.promo-brand {
    display: inline-block;
    background: linear-gradient(135deg, #33aaaa 0%, #2980b9 100%);
    color: #ffffff;
    padding: 0.6rem 1.2rem;
    border-radius: 25px;
    font-weight: 500;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 2px 8px rgba(51, 170, 170, 0.2);
    position: relative;
    overflow: hidden;
}

.promo-brand::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.2),
        transparent
    );
    transition: 0.5s;
}

.promo-link:hover .promo-brand::before {
    left: 100%;
}

.promo-link:hover .promo-brand {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(51, 170, 170, 0.3);
    background: linear-gradient(135deg, #2980b9 0%, #33aaaa 100%);
}

@media (max-width: 768px) {
    .promo-banner {
        padding: 1.2rem;
    }

    .promo-message,
    .promo-message-highlight {
        font-size: 0.85rem;
    }
}

.promo-message-animated {
    background-image: linear-gradient(
        90deg,
        #33aaaa 0%,
        #2980b9 25%,
        #3498db 50%,
        #33aaaa 75%
    );
    background-size: 200% auto;
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: shine 4s linear infinite;
    text-align: center;
    margin: 0.5rem 0;
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.5;
    padding: 0.5rem;
}

@keyframes shine {
    to {
        background-position: 200% center;
    }
}

/* Keep other promo-banner styles the same */
.promo-banner {
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    border: 1px solid rgba(51, 170, 170, 0.2);
    border-radius: 12px;
    padding: 1.5rem;
    margin: 1.5rem 0;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.8rem;
}

/* Rest of the existing styles remain the same */