/* 
ASOS Communications - Professional Color Scheme
Color Palette:
- Turquoise/Teal Blue: #17a2b8, #20c997
- Light Blue: #6fc3df, #87ceeb  
- White: #ffffff
- Black/Dark Gray: #212529, #343a40
- Orange/Yellow Accent: #fd7e14, #ffc107
- Dark Blue: #0d47a1, #1565c0
- Royal/Medium Blue: #2196f3, #1976d2
- Light Gray/Silver: #f8f9fa, #e9ecef
*/

:root {
    /* Primary Colors */
    --primary-turquoise: #17a2b8;
    --primary-teal: #20c997;
    --light-blue: #6fc3df;
    --sky-blue: #87ceeb;
    
    /* Accent Colors */
    --accent-orange: #fd7e14;
    --accent-yellow: #ffc107;
    
    /* Blue Variations */
    --dark-blue: #0d47a1;
    --navy-blue: #1565c0;
    --royal-blue: #2196f3;
    --medium-blue: #1976d2;
    
    /* Neutral Colors */
    --pure-white: #ffffff;
    --dark-gray: #212529;
    --medium-gray: #343a40;
    --light-gray: #f8f9fa;
    --silver: #e9ecef;
    
    /* Gradients */
    --gradient-primary: linear-gradient(135deg, var(--primary-turquoise) 0%, var(--primary-teal) 100%);
    --gradient-blue: linear-gradient(135deg, var(--royal-blue) 0%, var(--medium-blue) 100%);
    --gradient-accent: linear-gradient(135deg, var(--accent-orange) 0%, var(--accent-yellow) 100%);
}

/* Header and Navigation */
.header-area {
    background: var(--pure-white);
    box-shadow: 0 2px 15px rgba(23, 162, 184, 0.1);
}

.header-area .main-nav .nav li a {
    color: var(--dark-gray);
    font-weight: 500;
    transition: all 0.3s ease;
}

.header-area .main-nav .nav li a:hover,
.header-area .main-nav .nav li a.active {
    color: var(--primary-turquoise);
}

.header-area .main-nav .nav li.has-sub ul.sub-menu {
    background: var(--pure-white);
    box-shadow: 0 8px 25px rgba(23, 162, 184, 0.15);
    border-top: 3px solid var(--primary-turquoise);
}

.header-area .main-nav .nav li.has-sub ul.sub-menu li a {
    color: var(--medium-gray);
    padding: 12px 20px;
}

.header-area .main-nav .nav li.has-sub ul.sub-menu li a:hover {
    color: var(--primary-turquoise);
    background: var(--light-gray);
}

/* Page Headings */
.page-heading {
    background: var(--gradient-primary);
    color: var(--pure-white);
}

.page-heading .header-text h2 {
    color: var(--pure-white);
    font-weight: 700;
}

.div-dec {
    background: var(--pure-white);
    opacity: 0.8;
}

/* Main Banner/Slider */
.swiper-slide {
    background: var(--gradient-blue);
}

.swiper-slide .slide-inner {
    background: linear-gradient(rgba(13, 71, 161, 0.7), rgba(21, 101, 192, 0.7));
}

.swiper-slide h6 {
    color: var(--accent-yellow);
    font-weight: 600;
}

.swiper-slide h2 {
    color: var(--pure-white);
}

.swiper-slide p {
    color: var(--light-gray);
}

/* Buttons */
.green-button a,
.main-button a {
    background: var(--gradient-primary);
    color: var(--pure-white);
    border-radius: 25px;
    font-weight: 600;
    padding: 12px 30px;
    transition: all 0.3s ease;
}

.green-button a:hover,
.main-button a:hover {
    background: var(--primary-teal);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(32, 201, 151, 0.3);
}

.orange-button a {
    background: var(--gradient-accent);
    color: var(--pure-white);
    border-radius: 25px;
    font-weight: 600;
    padding: 12px 30px;
    transition: all 0.3s ease;
}

.orange-button a:hover {
    background: var(--accent-orange);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(253, 126, 20, 0.3);
}

/* Services Section */
.services {
    background: var(--light-gray);
}

.services .service-item {
    background: var(--pure-white);
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(23, 162, 184, 0.1);
    transition: all 0.3s ease;
}

.services .service-item:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 35px rgba(23, 162, 184, 0.2);
}

.services .service-item i {
    color: var(--primary-turquoise);
    font-size: 3rem;
    margin-bottom: 20px;
}

.services .service-item h4 {
    color: var(--dark-gray);
    font-weight: 600;
}

.services .service-item p {
    color: var(--medium-gray);
}

/* CTA Sections */
.simple-cta {
    background: var(--gradient-blue);
    color: var(--pure-white);
}

.simple-cta h4 {
    color: var(--pure-white);
}

.simple-cta em {
    color: var(--accent-yellow);
}

.simple-cta strong {
    color: var(--light-blue);
}

/* About Section */
.about-us {
    background: var(--pure-white);
}

.about-us .left-text-content h6 {
    color: var(--primary-turquoise);
    font-weight: 600;
}

.about-us .left-text-content h4 {
    color: var(--dark-gray);
}

.about-us .left-text-content p {
    color: var(--medium-gray);
}

/* Calculator Section */
.calculator {
    background: var(--light-gray);
}

.calculator .section-heading h6 {
    color: var(--primary-turquoise);
}

.calculator .section-heading h4 {
    color: var(--dark-gray);
}

.calculator input,
.calculator select {
    border: 2px solid var(--silver);
    border-radius: 10px;
    transition: all 0.3s ease;
}

.calculator input:focus,
.calculator select:focus {
    border-color: var(--primary-turquoise);
    box-shadow: 0 0 0 0.2rem rgba(23, 162, 184, 0.25);
}

/* Testimonials */
.testimonials {
    background: var(--gradient-primary);
    color: var(--pure-white);
}

.testimonials .section-heading h6 {
    color: var(--accent-yellow);
}

.testimonials .section-heading h4 {
    color: var(--pure-white);
}

.testimonials .item p {
    color: var(--light-gray);
}

.testimonials .item h4 {
    color: var(--pure-white);
}

.testimonials .item span {
    color: var(--light-blue);
}

/* Product Cards */
.product-item {
    background: var(--pure-white);
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(23, 162, 184, 0.1);
    transition: all 0.3s ease;
}

.product-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(23, 162, 184, 0.2);
}

.product-item .price span {
    color: var(--primary-turquoise);
    font-weight: 700;
    font-size: 1.3rem;
}

/* Shop Highlights */
.shop-highlights {
    background: var(--pure-white);
}

.shop-highlights .section-heading h6 {
    color: var(--primary-turquoise);
}

.shop-highlights .section-heading h4 {
    color: var(--dark-gray);
}

/* Service Details Tabs */
.service-details {
    background: var(--light-gray);
}

.service-details .section-heading h6 {
    color: var(--primary-turquoise);
}

.service-details .section-heading h4 {
    color: var(--dark-gray);
}

.naccs .menu div {
    background: var(--pure-white);
    color: var(--medium-gray);
    border: 2px solid var(--silver);
}

.naccs .menu div.active {
    background: var(--gradient-primary);
    color: var(--pure-white);
    border-color: var(--primary-turquoise);
}

.naccs .menu div:hover {
    background: var(--light-gray);
    border-color: var(--primary-turquoise);
}

/* Partners Section */
.partners {
    background: var(--pure-white);
}

.partners .item {
    background: var(--light-gray);
    border-radius: 10px;
    transition: all 0.3s ease;
}

.partners .item:hover {
    background: var(--silver);
    transform: scale(1.05);
}

/* Footer */
footer {
    background: var(--dark-gray);
    color: var(--light-gray);
}

footer p {
    color: var(--silver);
}

/* Featured Services */
.featured-services {
    background: var(--pure-white);
}

.featured-services .section-heading h6 {
    color: var(--primary-turquoise);
}

.featured-services .section-heading h4 {
    color: var(--dark-gray);
}

.featured-services .service-item {
    background: var(--light-gray);
    border-radius: 15px;
    border-left: 5px solid var(--primary-turquoise);
    transition: all 0.3s ease;
}

.featured-services .service-item:hover {
    background: var(--pure-white);
    box-shadow: 0 10px 30px rgba(23, 162, 184, 0.15);
    border-left-color: var(--accent-orange);
}

.featured-services .service-item i {
    color: var(--primary-turquoise);
}

.featured-services .service-item h4 {
    color: var(--dark-gray);
}

.featured-services .service-item p {
    color: var(--medium-gray);
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .header-area .main-nav .nav {
        background: var(--pure-white);
    }
    
    .swiper-slide h2 {
        font-size: 2rem;
    }
    
    .services .service-item {
        margin-bottom: 30px;
    }
}

/* Custom Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-up {
    animation: fadeInUp 0.6s ease-out;
}

/* Hover Effects */
.service-item,
.product-item,
.testimonial-item {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.service-item:hover,
.product-item:hover {
    transform: translateY(-10px) scale(1.02);
}

/* Focus States for Accessibility */
.green-button a:focus,
.orange-button a:focus,
.main-button a:focus {
    outline: 2px solid var(--accent-yellow);
    outline-offset: 2px;
}

/* Loading States */
.loading {
    background: linear-gradient(90deg, var(--light-gray) 25%, var(--silver) 50%, var(--light-gray) 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
}

@keyframes loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Enhanced Service Cards */
.main-services .service-item .right-text-content i,
.main-services .service-item .left-text-content i {
    background: var(--gradient-primary);
    color: var(--pure-white);
    width: 80px;
    height: 80px;
    line-height: 80px;
    text-align: center;
    border-radius: 50%;
    font-size: 2rem;
    box-shadow: 0 8px 25px rgba(23, 162, 184, 0.3);
}

.main-services .service-item:nth-child(even) .right-text-content i,
.main-services .service-item:nth-child(even) .left-text-content i {
    background: var(--gradient-blue);
    box-shadow: 0 8px 25px rgba(33, 150, 243, 0.3);
}

.main-services .service-item:nth-child(3n) .right-text-content i,
.main-services .service-item:nth-child(3n) .left-text-content i {
    background: var(--gradient-accent);
    box-shadow: 0 8px 25px rgba(253, 126, 20, 0.3);
}

/* Enhanced Product Cards in Featured Section */
.shop-highlights .product-item,
.featured-services .service-item {
    border: 1px solid var(--silver);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.shop-highlights .product-item:hover,
.featured-services .service-item:hover {
    border-color: var(--primary-turquoise);
    box-shadow: 0 15px 40px rgba(23, 162, 184, 0.2);
}

/* Enhanced Testimonials */
.testimonials .item {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 15px;
}

/* Enhanced Calculator Section */
.calculator {
    background: var(--gradient-blue);
    color: var(--pure-white);
}

.calculator .section-heading h6 {
    color: var(--accent-yellow);
}

.calculator .section-heading h4 {
    color: var(--pure-white);
}

.calculator input,
.calculator select {
    background: rgba(255, 255, 255, 0.9);
    border: 2px solid transparent;
}

.calculator input:focus,
.calculator select:focus {
    background: var(--pure-white);
    border-color: var(--accent-orange);
}

/* Enhanced About Section with Gradient Cards */
.about-us .info-item {
    background: var(--pure-white);
    border-radius: 15px;
    border-left: 5px solid var(--primary-turquoise);
    box-shadow: 0 5px 20px rgba(23, 162, 184, 0.1);
    transition: all 0.3s ease;
}

.about-us .info-item:hover {
    transform: translateX(10px);
    border-left-color: var(--accent-orange);
    box-shadow: 0 10px 30px rgba(23, 162, 184, 0.2);
}

/* Progress Bars with New Colors */
.progress-bar {
    background: var(--gradient-primary);
}

.progress-bar:nth-child(2n) {
    background: var(--gradient-blue);
}

.progress-bar:nth-child(3n) {
    background: var(--gradient-accent);
}