/*========================================================
ictVoIP Billing - Custom Theme Colors
Brand: ictTech Support / ictVoIP Canada
========================================================*/

/* Force all animated elements to be visible */
[data-animate],
[data-animate] * {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}

/* Ensure slide content is visible */
.slide-content,
.slide-content h1,
.slide-content h3,
.slide-content p,
.slide-content .btn,
.section-title,
.section-title h1,
.section-title p,
.section-title span,
.single-service,
.single-service h4,
.single-service p,
.connection-description,
.connection-description h1,
.connection-description p,
.footer-widget,
.footer-widget h4,
.footer-widget p,
.footer-widget ul,
.footer-widget a {
    opacity: 1 !important;
    visibility: visible !important;
}

/* ===== ictVoIP Brand Color Variables ===== */
:root {
  --ictvoip-primary: #0166DC;
  --ictvoip-secondary: #042964;
  --ictvoip-accent: #0818A8;
  --ictvoip-light: #ffffff;
  --ictvoip-dark: #000000;
  --ictvoip-gray: #f6f6f6;
  --ictvoip-gradient: linear-gradient(135deg, #0166DC 0%, #042964 100%);
  --ictvoip-gradient-radial: radial-gradient(94% 153%, #0166DC 0%, #042964 100%);
}

/* Main Color - Text elements */
.ColorSwitcher__control,
.single-service a,
h1 span,
.single-includes svg,
.theme-list-style li:before,
.single-counter h2 span,
.single-pricing-plan h4,
.connection-description p span,
.section-title > span,
.single-service svg + svg,
.footer-widget a:hover,
a:hover,
.copyright a,
.single-faq > .h5:before,
.single-faq > .h5:hover,
.affiliate-title blockquote p:before,
.affiliate-title > span,
.single-affiliate-program p span,
.single-affiliate-program a,
.affiliate-title blockquote p:after,
.table--inner-area tbody tr td .rating-star i, 
.table--inner-area tbody tr td .feature-list li span i,
.table--inner-area tbody tr td .rating-star i,
.table--inner-area tbody tr td .feature-list li span i,
.voip--table-wrapper .loadmore-btn a,
.header-menu ul ul li:hover > a,
.header-menu ul ul li > a:hover, 
.header-menu ul ul li.active > a,
.member-img ul li a:hover,
.single-reason i,
.single-server-feature i,
.page-title li a:hover, 
.page-title li:last-child a,
.header-menu > ul > li:hover > a,
.header-menu > ul > li.active > a,
.single-service svg:first-child,
.domain-table th,
.single-process span i,
.product-share ul li a:hover i,
.gallery--pagination-icon:hover i,
.post-navigation li a:hover .h6,
.single-faq-wrap > .h4 span,
.single-faq > .h5:hover,
.single-faq > .h5:before,
.accordion > a:not(.btn),
.widget_categories ul,
.widget_categories ul li a:hover,
.follow-icons li a:hover,
.tagcloud ul li a:hover,
.post-main-content blockquote h4,
.social-icons-light a:hover,
.post-author-info h5 a,
.social-icons-light a:hover,
.post-comment-content .btn-reply,
.product--item a .star-rating i,
.single-sidebar-widget .product-text p,
.shop--product-details ul li a:hover,
.star-rating .raiting-list i,
.header-top-settings .dropdown-menu a:hover,
.header-search button:hover,
.client-reating i,
.returning-show >span i,
.cupon-show h5 span:hover,
.returning-show h5 span:hover,
.cupon-show >span i,
.contact-info ul li a:hover,
.no-found h1,
.feature-list li span,
.rating-star i,
.review-icon .review-star i,
.gallery-icon a:hover i,
.review-slider .stars i,
.header-menu #menu-button,
.replaced-svg {
    color: #0166DC;
}

/* Main background color */
.partner--slider-inner:after,
.domain-table.table-striped tbody tr:first-child th,
.back-to-top a:hover,
.info-tabs .product--nav-item:hover,
.product--nav-item.active,
.single-sidebar-widget .filter-slider span.ui-slider-handle.ui-corner-all.ui-state-default:active,
div#slider-range:after,
.follow-icons li a:hover span,
.post-categories a:hover,
.post-main-content blockquote:before,
.theme-pagination li a:hover, 
.theme-pagination li.active a,
.gallery--hover-item,
.gallery_filter li:hover span,
.gallery_filter li.active span,
.single-process:hover span,
.affiliate-calculation ul li:first-child,
.carousel-control:hover,
.carousel-control:focus,
.configuration-table th,
.header-menu > ul > li > a:after,
.header-menu > ul > li.active > a:after,
.header-menu > ul > li:hover > a:after,
.slide-content h3:before,
.primary-bg,
.slide-content .btn:before,
.post-date li:last-child,
.single-includes:hover,
.header-cart span,
.btn.btn-icon,
.single-sidebar-widget .filter-slider span.ui-slider-handle.ui-corner-all.ui-state-default:active,
.single-faq-wrap .btn:before,
.country-list .btn:before,
.single-sidebar-widget .btn:before,
.post-content-block .btn:before,
.product-cupon-apply .btn:before,
.cart--shoping-button a + a.btn:before,
.project-link ul li:last-child .btn:before,
.cart--purchage-btn .btn:before,
.returning-singin .btn:before,
.primary-form .btn:before,
.cupon-inner .btn:before,
.shop-payment-method .btn:before,
.contact-page-form .btn:before,
.product--info-review .btn:before,
.no-found .btn:before,
.app-info .btn:before,
.bgc {
    background-color: #0166DC;
}

/* Border color */
.shop--product-slider .swiper-button-prev span:after,
.shop--product-slider .swiper-button-next span:after,
.product--nav-item.active,
.info-tabs .product--nav-item:hover,
.single-sidebar-widget .filter-slider span.ui-slider-handle.ui-corner-all.ui-state-default,
.theme-input-style:focus,
.post-categories a:hover,
.follow-icons li a:hover i,
.theme-pagination li a:hover, 
.theme-pagination li.active a,
.tagcloud ul li a:hover,
.single-process:hover span,
.carousel-control:hover,
.carousel-control:focus,
.configuration-table th,
.single-server-feature:hover,
.single-server-feature,
.btn,
.single-post:hover,
.single-pricing-plan:hover hr,
.includes-carousel-wrap,
.single-service,
.single-service:hover,
.theme-border {
    border-color: #0166DC;
}

/* Dark background sections - use lighter gradient for readability */
.dark-bg {
    background: linear-gradient(135deg, #0a4a8f 0%, #0166DC 100%);
}

/* Header top bar */
.header-top.dark-bg {
    background: #042964;
}

.header-top.dark-bg a,
.header-top.dark-bg li,
.header-top-info li a,
.header-top-settings li {
    color: rgba(255, 255, 255, 0.85) !important;
}

.header-top.dark-bg a:hover {
    color: #fff !important;
}

/* Slider overlay gradient - darker blue */
.slider .swiper-slide:before {
    background: linear-gradient(to left, rgba(2, 25, 60, 0.95), rgba(4, 41, 100, 0.85));
}

/* Button hover states */
.btn:hover {
    background-color: #042964;
    border-color: #042964;
}

.btn-transparent:hover {
    background-color: rgba(1, 102, 220, 0.1);
    border-color: #0166DC;
    color: #0166DC;
}

/* CTA section button overrides */
.ictvoip-cta .btn-transparent {
    background: transparent !important;
}

.ictvoip-cta .btn-transparent:before {
    background: transparent !important;
}

.ictvoip-cta .btn-transparent:hover {
    background-color: rgba(255, 255, 255, 0.15) !important;
    border-color: #fff;
    color: #fff;
}

/* Service cards hover */
.single-service:hover {
    border-color: #0166DC;
    box-shadow: 0 10px 30px rgba(1, 102, 220, 0.15);
}

/* Client Services card hover - blue background with white text */
.single-includes:hover {
    background-color: #0166DC !important;
}

.single-includes:hover h3,
.single-includes:hover .h5,
.single-includes:hover p,
.single-includes:hover i {
    color: #fff !important;
}

/* Pricing plan hover */
.single-pricing-plan:hover {
    border-color: #0166DC;
    box-shadow: 0 15px 40px rgba(1, 102, 220, 0.2);
}

/* Preloader spinner - blue color */
.preLoader:before {
    border-color: #0166DC !important;
    border-top-color: #fff !important;
    border-bottom-color: #fff !important;
}

/* Footer styling */
.footer {
    background: #042964;
}

.footer-widget h4:after {
    background-color: #0166DC;
}

/* Form focus states */
.theme-input-style:focus {
    border-color: #0166DC;
    box-shadow: 0 0 0 0.2rem rgba(1, 102, 220, 0.25);
}

/* Selection color */
::selection {
    background-color: #0166DC;
    color: #ffffff;
}

::-moz-selection {
    background-color: #0166DC;
    color: #ffffff;
}

/* Back to Top button styling */
.back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 999;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}

.back-to-top.show {
    opacity: 1;
    visibility: visible;
}

.back-to-top a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background: #0166DC;
    color: #fff;
    border-radius: 50%;
    font-size: 24px;
    box-shadow: 0 4px 15px rgba(1, 102, 220, 0.4);
    transition: all 0.3s ease;
}

.back-to-top a:hover {
    background: #042964;
    transform: translateY(-5px);
    box-shadow: 0 6px 20px rgba(4, 41, 100, 0.5);
}

/* Scrollbar styling */
::-webkit-scrollbar-thumb {
    background: #0166DC;
}

::-webkit-scrollbar-thumb:hover {
    background: #042964;
}

/* Others - hover states */
.next-service:hover .replaced-svg,
.prev-service:hover .replaced-svg,
.theme-pagination li a:hover .replaced-svg,
.carousel-control:focus .replaced-svg,
.next-inc-car:hover .replaced-svg,
.prev-inc-car:hover .replaced-svg,
.next-member:hover .replaced-svg,
.prev-member:hover .replaced-svg,
.next-review:hover .replaced-svg,
.prev-review:hover .replaced-svg, 
.back-to-top a:hover .replaced-svg {
    color: #fff;
}

/* Transparent button before */
.slide-content .btn-transparent:before {
    background-color: transparent;
}

/* ===== Custom ictVoIP Elements ===== */

/* Feature highlight boxes */
.ictvoip-feature-box {
    background: linear-gradient(135deg, rgba(1, 102, 220, 0.05) 0%, rgba(4, 41, 100, 0.05) 100%);
    border-left: 4px solid #0166DC;
    padding: 20px;
    border-radius: 0 8px 8px 0;
    margin-bottom: 20px;
}

/* Version badge */
.ictvoip-version-badge {
    display: inline-block;
    background: linear-gradient(135deg, #0166DC 0%, #042964 100%);
    color: #ffffff;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
}

/* Beta badge */
.ictvoip-beta-badge {
    display: inline-block;
    background: #ff9800;
    color: #ffffff;
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    margin-left: 10px;
}

/* Canadian flag accent */
.ictvoip-canadian {
    position: relative;
}

.ictvoip-canadian:after {
    content: "🍁";
    margin-left: 5px;
}

/* Compatibility badges */
.compat-badge {
    display: inline-flex;
    align-items: center;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    padding: 8px 16px;
    border-radius: 6px;
    margin: 5px;
    font-size: 14px;
}

.compat-badge i {
    margin-right: 8px;
    color: #0166DC;
}

/* Documentation link button */
.btn-docs {
    background: linear-gradient(135deg, #0166DC 0%, #042964 100%);
    border: none;
    color: #ffffff;
    padding: 12px 30px;
    border-radius: 6px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-docs:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(1, 102, 220, 0.35);
    color: #ffffff;
}

/* Hero section gradient overlay */
.hero-gradient-overlay {
    background: linear-gradient(135deg, rgba(4, 41, 100, 0.95) 0%, rgba(1, 102, 220, 0.85) 100%);
}

/* Card with gradient border */
.gradient-border-card {
    position: relative;
    background: #ffffff;
    border-radius: 10px;
    padding: 30px;
}

.gradient-border-card:before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(135deg, #0166DC 0%, #042964 100%);
    border-radius: 12px;
    z-index: -1;
}

/* Animated gradient text */
.gradient-text {
    background: linear-gradient(135deg, #0166DC 0%, #042964 50%, #0818A8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Stats counter with brand colors */
.ictvoip-stat {
    text-align: center;
    padding: 30px;
}

.ictvoip-stat h2 {
    font-size: 48px;
    font-weight: 700;
    color: #0166DC;
    margin-bottom: 10px;
}

.ictvoip-stat p {
    color: #042964;
    font-weight: 500;
}

/* Testimonial card */
.ictvoip-testimonial {
    background: #ffffff;
    border-radius: 10px;
    padding: 30px;
    box-shadow: 0 5px 20px rgba(4, 41, 100, 0.1);
    border-top: 4px solid #0166DC;
}

/* CTA Section */
.ictvoip-cta {
    background: linear-gradient(135deg, #042964 0%, #0166DC 100%);
    padding: 80px 0;
    text-align: center;
    color: #ffffff;
}

.ictvoip-cta h2 {
    color: #ffffff;
    margin-bottom: 20px;
}

.ictvoip-cta .btn {
    background: #ffffff;
    color: #0166DC;
    border-color: #ffffff;
}

.ictvoip-cta .btn:hover {
    background: transparent;
    color: #ffffff;
    border-color: #ffffff;
}

/* ===== Override Green Shapes to Blue ===== */

/* Change the green decorative shapes background to blue */
.default-bg {
    background-image: none !important;
    position: relative;
}

/* Add blue decorative shapes using CSS */
.default-bg::before,
.default-bg::after {
    content: '';
    position: absolute;
    width: 150px;
    height: 150px;
    border: 3px solid rgba(1, 102, 220, 0.3);
    pointer-events: none;
    z-index: 0;
}

.default-bg::before {
    top: 100px;
    left: 50px;
    transform: rotate(45deg);
    border-radius: 0;
}

.default-bg::after {
    bottom: 100px;
    right: 50px;
    transform: rotate(15deg);
    border-radius: 50%;
    border-width: 2px;
    width: 80px;
    height: 80px;
}

/* Additional decorative elements */
#features {
    position: relative;
    overflow: hidden;
}

#features .container {
    position: relative;
    z-index: 1;
}

/* Blue triangle decorations */
.slider + section::before {
    content: '';
    position: absolute;
    top: 80px;
    left: 30px;
    width: 0;
    height: 0;
    border-left: 40px solid transparent;
    border-right: 40px solid transparent;
    border-bottom: 70px solid rgba(1, 102, 220, 0.15);
    z-index: 0;
}

.slider + section::after {
    content: '';
    position: absolute;
    top: 60px;
    right: 40px;
    width: 0;
    height: 0;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    border-top: 50px solid rgba(1, 102, 220, 0.12);
    z-index: 0;
}

/* Ensure text is readable on hero background */
.slide-content h1,
.slide-content h3,
.slide-content p {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.slider .swiper-slide .container {
    position: relative;
    z-index: 1;
}