/*
Theme Name: Xolio Creative Agency
Theme URI: https://xolio.agency
Author: Xolio Team
Description: Professional Creative Agency WordPress theme with WooCommerce, Portfolio, Services, PDF Guides, and Payment integration.
Version: 3.0.0
Requires at least: 5.8
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
Text Domain: xolio
Tags: portfolio, agency, creative, woocommerce, one-page, custom-menu, featured-images
*/
:root{--primary:#F89E52;--secondary:#3482FF;--dark-bg:#292F3F;--dark-bg2:#1F1D28;--dark-bg3:#26242D;--menu-bg:#252541;--text-body:#666;--text-head:#0B0B0B;--white:#fff;--black:#292930;--gray:#F4F3F9;--gray6:#F7F7F7;--border:#F3F3F3;--font:'Poppins',sans-serif;}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{font-family:var(--font);font-size:16px;line-height:1.7;color:var(--text-body);background:var(--white);overflow-x:hidden;}
a{text-decoration:none;color:inherit;transition:all .3s;}
img{max-width:100%;display:block;height:auto;}
ul{list-style:none;}
h1,h2,h3,h4,h5,h6{font-family:var(--font);color:var(--text-head);font-weight:700;line-height:1.25;}
p{margin-bottom:1rem;}
.container{max-width:1200px;margin:0 auto;padding:0 20px;}
.text-center{text-align:center;}

/* Preloader */
#preloader{position:fixed;inset:0;background:var(--white);z-index:99999;display:flex;align-items:center;justify-content:center;transition:opacity .5s;}
#preloader.hide{opacity:0;pointer-events:none;}
.loader-ring{width:60px;height:60px;border:4px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:spin 1s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}

/* Cursor */
.cursor-outer{width:30px;height:30px;border:2px solid var(--primary);border-radius:50%;position:fixed;pointer-events:none;z-index:9999;transition:transform .1s;}
.cursor-inner{width:8px;height:8px;background:var(--primary);border-radius:50%;position:fixed;pointer-events:none;z-index:9999;transform:translate(-50%,-50%);}

/* Scroll Top */
.scroll-top{position:fixed;right:30px;bottom:80px;width:45px;height:45px;background:var(--primary);color:var(--white);border:none;border-radius:50%;cursor:pointer;font-size:18px;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:all .3s;z-index:999;}
.scroll-top.active{opacity:1;visibility:visible;}
.scroll-top:hover{background:var(--secondary);transform:translateY(-3px);}

/* WhatsApp Float */
.wa-float{position:fixed;right:30px;bottom:140px;width:50px;height:50px;background:#25d366;color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:24px;z-index:998;box-shadow:0 4px 20px rgba(37,211,102,.4);transition:transform .3s;}
.wa-float:hover{transform:scale(1.1);color:#fff;}

/* Buttons */
.btn,.wp-block-button__link{display:inline-flex;align-items:center;justify-content:center;position:relative;overflow:hidden;background:var(--secondary);color:var(--white);border:none;border-radius:20px;padding:16px 36px;font-size:16px;font-weight:500;cursor:pointer;transition:color .4s;z-index:1;font-family:var(--font);}
.btn::after,.wp-block-button__link::after{content:'';position:absolute;inset:0;background:var(--primary);border-radius:inherit;transform:scale(0);transition:transform .4s;z-index:-1;}
.btn:hover::after,.wp-block-button__link:hover::after{transform:scale(1);}
.btn:hover,.wp-block-button__link:hover{color:var(--white);}
.btn-primary{background:var(--primary);}
.btn-primary::after{background:var(--secondary);}
.btn-outline{background:transparent;border:2px solid var(--primary);color:var(--primary);border-radius:20px;padding:14px 34px;font-size:15px;font-weight:500;cursor:pointer;transition:all .3s;display:inline-flex;align-items:center;gap:8px;}
.btn-outline:hover{background:var(--primary);color:var(--white);}
.btn-sm{padding:10px 22px;font-size:14px;border-radius:14px;}

/* Section Title */
.section-title{margin-bottom:50px;}
.section-title .sub-title{display:inline-block;font-size:14px;font-weight:600;color:var(--primary);text-transform:uppercase;letter-spacing:3px;margin-bottom:14px;position:relative;padding-left:30px;}
.section-title .sub-title::before{content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);width:20px;height:2px;background:var(--primary);}
.section-title .title{font-size:42px;font-weight:700;color:var(--text-head);line-height:1.2;}
.section-title p{color:var(--text-body);max-width:560px;}
.white-title .title,.white-title .sub-title,.white-title p{color:var(--white);}
.white-title .sub-title::before{background:var(--white);}

/* Section Bottom Button */
.section-btn-wrap{text-align:center;margin-top:50px;}

/* Header */
header#masthead{position:fixed;top:0;left:0;right:0;z-index:9000;padding:20px 0;transition:all .4s;}
header#masthead.sticky{background:var(--menu-bg);padding:14px 0;box-shadow:0 4px 30px rgba(0,0,0,.25);}
.menu-wrap{display:flex;align-items:center;justify-content:space-between;}
.site-branding .logo-text{font-size:26px;font-weight:800;color:var(--white);letter-spacing:-1px;}
.site-branding .logo-text span{color:var(--primary);}
.site-branding img{max-height:50px;width:auto;}
nav#site-navigation .menu{display:flex;align-items:center;gap:36px;}
nav#site-navigation .menu a{color:rgba(255,255,255,.85);font-size:15px;font-weight:500;position:relative;}
nav#site-navigation .menu a::after{content:'';position:absolute;bottom:-4px;left:0;width:0;height:2px;background:var(--primary);transition:width .3s;}
nav#site-navigation .menu a:hover::after,nav#site-navigation .menu .current-menu-item>a::after{width:100%;}
nav#site-navigation .menu a:hover,nav#site-navigation .menu .current-menu-item>a{color:var(--primary);}
.header-btn .btn{padding:13px 28px;font-size:14px;border-radius:14px;}
.hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;background:none;border:none;}
.hamburger span{display:block;width:26px;height:2px;background:var(--white);transition:all .3s;}
.hamburger.open span:nth-child(1){transform:rotate(45deg) translate(5px,5px);}
.hamburger.open span:nth-child(2){opacity:0;}
.hamburger.open span:nth-child(3){transform:rotate(-45deg) translate(5px,-5px);}
.mobile-nav-wrap{display:none;position:absolute;top:100%;left:0;right:0;background:var(--menu-bg);padding:20px;}
.mobile-nav-wrap.show{display:block;}
.mobile-nav-wrap .menu{display:flex;flex-direction:column;gap:14px;}
.mobile-nav-wrap .menu a{color:var(--white);font-size:15px;display:block;padding:6px 0;border-bottom:1px solid rgba(255,255,255,.08);}

/* Hero */
.hero-section{min-height:100vh;display:flex;align-items:center;background:var(--dark-bg);position:relative;overflow:hidden;padding-top:120px;}
.hero-section::before{content:'';position:absolute;right:-100px;top:-100px;width:600px;height:600px;border-radius:50%;background:radial-gradient(circle,rgba(248,158,82,.15) 0%,transparent 70%);}
.hero-section::after{content:'';position:absolute;left:-50px;bottom:-50px;width:400px;height:400px;border-radius:50%;background:radial-gradient(circle,rgba(52,130,255,.12) 0%,transparent 70%);}
.hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;position:relative;z-index:2;padding:80px 0;}
.hero-content .sub-title{display:inline-flex;align-items:center;gap:10px;font-size:14px;font-weight:600;color:var(--primary);text-transform:uppercase;letter-spacing:3px;margin-bottom:20px;}
.hero-content .sub-title span.line{display:block;width:30px;height:2px;background:var(--primary);}
.hero-content h1{font-size:60px;font-weight:800;color:var(--white);line-height:1.1;margin-bottom:24px;}
.hero-content h1 em{color:var(--primary);font-style:normal;}
.hero-content p{color:rgba(255,255,255,.7);font-size:17px;max-width:480px;margin-bottom:40px;}
.hero-btns{display:flex;gap:16px;flex-wrap:wrap;}
.hero-image-wrap{position:relative;}
.hero-image-box{border-radius:30px;overflow:hidden;background:var(--dark-bg2);height:460px;display:flex;align-items:center;justify-content:center;}
.hero-image-box img{width:100%;height:100%;object-fit:cover;}
.hero-badge{position:absolute;background:var(--white);border-radius:16px;padding:14px 20px;box-shadow:0 20px 60px rgba(0,0,0,.2);display:flex;align-items:center;gap:12px;}
.hero-badge.b1{bottom:30px;left:-30px;}
.hero-badge.b2{top:30px;right:-20px;}
.hero-badge .icon{width:44px;height:44px;border-radius:12px;background:var(--primary);display:flex;align-items:center;justify-content:center;color:var(--white);font-size:20px;flex-shrink:0;}
.hero-badge .icon.blue{background:var(--secondary);}
.hero-badge .info h4{font-size:20px;font-weight:700;margin-bottom:2px;}
.hero-badge .info p{font-size:12px;color:var(--text-body);margin:0;}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.animate-float{animation:float 4s ease-in-out infinite;}

/* Brands */
.brands-section{padding:60px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);}
.brands-title{text-align:center;margin-bottom:36px;font-size:13px;color:var(--text-body);letter-spacing:2px;text-transform:uppercase;}
.brands-grid{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:50px;}
.brand-item{font-size:18px;font-weight:700;color:#ccc;letter-spacing:-1px;transition:color .3s;}
.brand-item:hover{color:var(--primary);}

/* Services */
.services-section{padding:120px 0;background:var(--white);}
.services-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px;}
.service-card{padding:40px 32px;border:1px solid var(--border);border-radius:20px;transition:all .4s;position:relative;overflow:hidden;display:flex;flex-direction:column;}
.service-card::before{content:'';position:absolute;inset:0;background:var(--dark-bg);transform:translateY(100%);transition:transform .4s;border-radius:20px;z-index:0;}
.service-card:hover::before{transform:translateY(0);}
.service-card:hover{border-color:var(--dark-bg);box-shadow:0 20px 60px rgba(41,47,63,.3);}
.service-card>*{position:relative;z-index:1;}
.service-icon{width:64px;height:64px;border-radius:18px;background:var(--gray);display:flex;align-items:center;justify-content:center;margin-bottom:24px;font-size:26px;color:var(--primary);transition:all .4s;}
.service-card:hover .service-icon{background:rgba(248,158,82,.15);}
.service-card h3{font-size:20px;margin-bottom:14px;transition:color .4s;}
.service-card:hover h3{color:var(--white);}
.service-card p{font-size:14px;color:var(--text-body);transition:color .4s;margin:0;flex:1;}
.service-card:hover p{color:rgba(255,255,255,.7);}
.service-number{position:absolute;top:20px;right:24px;font-size:60px;font-weight:800;color:rgba(0,0,0,.04);line-height:1;z-index:0;transition:color .4s;}
.service-card:hover .service-number{color:rgba(255,255,255,.05);}
.service-card .read-more{margin-top:20px;display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--primary);transition:color .4s;}
.service-card:hover .read-more{color:var(--white);}
.service-price-tag{display:inline-block;background:rgba(248,158,82,.1);color:var(--primary);font-size:12px;font-weight:700;padding:4px 12px;border-radius:20px;margin-bottom:12px;transition:all .4s;}
.service-card:hover .service-price-tag{background:rgba(248,158,82,.2);}

/* About */
.about-section{padding:120px 0;background:var(--gray6);}
.about-grid{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center;}
.about-img-wrap{position:relative;}
.about-img-main{border-radius:24px;overflow:hidden;height:480px;}
.about-img-main img{width:100%;height:100%;object-fit:cover;}
.about-exp-badge{position:absolute;bottom:-20px;right:-20px;background:var(--primary);color:var(--white);border-radius:20px;padding:24px 28px;text-align:center;box-shadow:0 20px 50px rgba(248,158,82,.4);}
.about-exp-badge h3{font-size:48px;font-weight:800;color:var(--white);line-height:1;margin:0;}
.about-exp-badge p{font-size:13px;color:rgba(255,255,255,.85);margin:0;}
.about-content{padding-left:20px;}
.about-list{margin:24px 0 36px;display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.about-list li{display:flex;align-items:center;gap:10px;font-size:15px;color:var(--text-head);font-weight:500;}
.about-list li i{color:var(--primary);font-size:13px;}
.skill-bars{display:flex;flex-direction:column;gap:18px;}
.skill-item label{display:flex;justify-content:space-between;font-size:14px;font-weight:600;color:var(--text-head);margin-bottom:8px;}
.skill-bar{height:6px;background:var(--border);border-radius:3px;overflow:hidden;}
.skill-fill{height:100%;background:linear-gradient(90deg,var(--primary),var(--secondary));border-radius:3px;width:0;transition:width 1.5s ease;}

/* Counter */
.counter-section{padding:80px 0;background:var(--dark-bg);}
.counter-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:30px;}
.counter-item{text-align:center;padding:30px 20px;}
.counter-item h3{font-size:52px;font-weight:800;color:var(--primary);line-height:1;margin-bottom:10px;}
.counter-item p{color:rgba(255,255,255,.7);font-size:15px;margin:0;}

/* Portfolio */
.portfolio-section{padding:120px 0;}
.portfolio-header{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:20px;margin-bottom:40px;}
.portfolio-header .section-title{margin-bottom:0;}
.portfolio-filter{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:40px;}
.filter-btn{padding:10px 24px;border:1px solid var(--border);border-radius:30px;font-size:14px;font-weight:500;cursor:pointer;transition:all .3s;background:none;color:var(--text-body);font-family:var(--font);}
.filter-btn.active,.filter-btn:hover{background:var(--primary);color:var(--white);border-color:var(--primary);}
.portfolio-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:25px;}
.portfolio-card{border-radius:20px;overflow:hidden;position:relative;background:var(--gray);}
.portfolio-img{overflow:hidden;aspect-ratio:4/3;}
.portfolio-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s;}
.portfolio-card:hover .portfolio-img img{transform:scale(1.08);}
.portfolio-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(41,47,63,.95),rgba(41,47,63,.1));opacity:0;transition:opacity .4s;display:flex;align-items:flex-end;padding:30px;}
.portfolio-card:hover .portfolio-overlay{opacity:1;}
.portfolio-info h4{color:var(--white);font-size:18px;margin-bottom:6px;}
.portfolio-info span{color:var(--primary);font-size:13px;font-weight:500;}
.portfolio-link{position:absolute;top:20px;right:20px;width:42px;height:42px;background:var(--primary);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--white);transform:scale(0);transition:transform .3s;}
.portfolio-card:hover .portfolio-link{transform:scale(1);}

/* Pricing */
.pricing-section{padding:120px 0;}
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;align-items:start;}
.pricing-card{border:1px solid var(--border);border-radius:24px;padding:44px 36px;transition:all .4s;}
.pricing-card.popular{background:var(--dark-bg);border-color:var(--dark-bg);transform:scale(1.04);}
.pricing-card:not(.popular):hover{border-color:var(--primary);box-shadow:0 20px 60px rgba(248,158,82,.1);}
.pricing-badge{display:inline-block;background:var(--primary);color:var(--white);font-size:11px;font-weight:700;padding:4px 14px;border-radius:20px;margin-bottom:16px;text-transform:uppercase;letter-spacing:1px;}
.pricing-card h4{font-size:22px;margin-bottom:10px;}
.pricing-card.popular h4{color:var(--white);}
.pricing-price{font-size:52px;font-weight:800;color:var(--primary);line-height:1;margin:20px 0;}
.pricing-price span{font-size:16px;font-weight:400;color:var(--text-body);}
.pricing-card.popular .pricing-price span{color:rgba(255,255,255,.6);}
.pricing-features{margin:28px 0;display:flex;flex-direction:column;gap:12px;}
.pricing-features li{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--text-body);}
.pricing-card.popular .pricing-features li{color:rgba(255,255,255,.75);}
.pricing-features li i{color:var(--primary);font-size:12px;}
.pricing-features li.disabled{opacity:.4;}

/* Testimonials */
.testimonials-section{padding:120px 0;background:var(--dark-bg2);}
.testimonials-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.testimonial-card{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.08);border-radius:20px;padding:36px 30px;transition:all .3s;}
.testimonial-card:hover{background:rgba(248,158,82,.08);border-color:rgba(248,158,82,.3);}
.testimonial-card .stars{color:var(--primary);margin-bottom:18px;font-size:14px;}
.testimonial-card p{color:rgba(255,255,255,.75);font-size:15px;line-height:1.8;margin-bottom:24px;}
.testimonial-author{display:flex;align-items:center;gap:14px;}
.author-avatar{width:48px;height:48px;border-radius:50%;overflow:hidden;background:rgba(255,255,255,.1);flex-shrink:0;}
.author-avatar img{width:100%;height:100%;object-fit:cover;}
.author-info h5{color:var(--white);font-size:15px;margin-bottom:2px;}
.author-info span{color:var(--primary);font-size:12px;}

/* CTA */
.cta-section{padding:100px 0;background:var(--dark-bg3);position:relative;overflow:hidden;}
.cta-section::before{content:'';position:absolute;right:0;top:0;width:50%;height:100%;background:radial-gradient(ellipse at right center,rgba(52,130,255,.12),transparent 70%);}
.cta-inner{display:flex;align-items:center;justify-content:space-between;gap:40px;position:relative;z-index:1;flex-wrap:wrap;}
.cta-content h2{font-size:44px;font-weight:800;color:var(--white);margin-bottom:14px;}
.cta-content p{color:rgba(255,255,255,.7);max-width:480px;margin:0;}

/* Blog */
.blog-section{padding:120px 0;background:var(--gray6);}
.blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;}
.blog-card{background:var(--white);border-radius:20px;overflow:hidden;transition:transform .3s,box-shadow .3s;}
.blog-card:hover{transform:translateY(-8px);box-shadow:0 20px 50px rgba(0,0,0,.08);}
.blog-thumb{overflow:hidden;aspect-ratio:16/9;background:var(--gray);}
.blog-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .4s;}
.blog-card:hover .blog-thumb img{transform:scale(1.05);}
.blog-meta{padding:22px 26px 0;display:flex;gap:16px;flex-wrap:wrap;}
.blog-meta span{font-size:12px;color:var(--text-body);display:flex;align-items:center;gap:6px;}
.blog-meta span i{color:var(--primary);}
.blog-body{padding:14px 26px 26px;}
.blog-cat{display:inline-block;font-size:11px;font-weight:700;color:var(--primary);text-transform:uppercase;letter-spacing:2px;margin-bottom:10px;}
.blog-body h4{font-size:18px;line-height:1.4;margin-bottom:16px;}
.blog-body h4 a{color:var(--text-head);transition:color .3s;}
.blog-card:hover .blog-body h4 a{color:var(--primary);}
.read-more{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--primary);}
.read-more i{transition:transform .3s;}
.read-more:hover i{transform:translateX(4px);}

/* Contact */
.contact-section{padding:120px 0;}
.contact-grid{display:grid;grid-template-columns:1fr 1.2fr;gap:80px;align-items:start;}
.contact-info-items{display:flex;flex-direction:column;gap:28px;margin-top:40px;}
.contact-info-item{display:flex;gap:18px;align-items:flex-start;}
.contact-icon{width:52px;height:52px;border-radius:16px;background:var(--gray);flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:20px;color:var(--primary);}
.contact-detail h5{font-size:16px;margin-bottom:4px;}
.contact-detail p{font-size:14px;margin:0;}
.contact-form{display:flex;flex-direction:column;gap:18px;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.form-group{display:flex;flex-direction:column;gap:8px;}
.form-group label{font-size:14px;font-weight:600;color:var(--text-head);}
.form-group input,.form-group textarea,.form-group select{padding:14px 18px;border:1px solid var(--border);border-radius:12px;font-size:14px;font-family:var(--font);outline:none;transition:border-color .3s;color:var(--text-head);background:var(--white);}
.form-group input:focus,.form-group textarea:focus{border-color:var(--primary);}
.form-group textarea{resize:vertical;min-height:130px;}

/* Footer */
footer#colophon{background:var(--dark-bg2);padding:80px 0 0;}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1.5fr;gap:40px;margin-bottom:60px;}
.footer-logo-text{font-size:28px;font-weight:800;color:var(--white);letter-spacing:-1px;margin-bottom:18px;display:block;}
.footer-logo-text span{color:var(--primary);}
.footer-about p{color:rgba(255,255,255,.55);font-size:14px;line-height:1.8;margin-bottom:24px;}
.footer-social{display:flex;gap:10px;}
.footer-social a{width:38px;height:38px;border-radius:50%;border:1px solid rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.6);font-size:14px;transition:all .3s;}
.footer-social a:hover{background:var(--primary);border-color:var(--primary);color:var(--white);}
.footer-col h5{color:var(--white);font-size:16px;margin-bottom:22px;padding-bottom:12px;border-bottom:1px solid rgba(255,255,255,.08);}
.footer-col ul{display:flex;flex-direction:column;gap:10px;}
.footer-col ul li a{color:rgba(255,255,255,.55);font-size:14px;transition:color .3s;display:flex;align-items:center;gap:8px;}
.footer-col ul li a::before{content:'›';color:var(--primary);font-size:16px;}
.footer-col ul li a:hover{color:var(--primary);}
.footer-nl-form{display:flex;gap:8px;margin-top:16px;}
.footer-nl-form input{flex:1;padding:13px 16px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);border-radius:12px;color:var(--white);font-size:14px;outline:none;font-family:var(--font);}
.footer-nl-form input::placeholder{color:rgba(255,255,255,.35);}
.footer-nl-form button{padding:13px 20px;background:var(--primary);border:none;border-radius:12px;color:var(--white);cursor:pointer;font-size:15px;transition:background .3s;}
.footer-nl-form button:hover{background:var(--secondary);}
.footer-bottom{border-top:1px solid rgba(255,255,255,.06);padding:24px 0;}
.footer-bottom-inner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;}
.footer-bottom-inner p{color:rgba(255,255,255,.4);font-size:13px;margin:0;}
.footer-bottom-inner a{color:var(--primary);}

/* Page Banner */
.page-banner{background:var(--dark-bg);padding:160px 0 80px;position:relative;overflow:hidden;}
.page-banner-inner{position:relative;z-index:2;text-align:center;}
.page-banner h1{font-size:52px;font-weight:800;color:#fff;line-height:1.15;margin-bottom:20px;}
.page-banner p{color:rgba(255,255,255,.7);font-size:17px;max-width:600px;margin:0 auto;}

/* Single Service/Portfolio */
.site-main{padding-top:80px;}
.single-content{padding:80px 0 100px;}
.entry-header{margin-bottom:40px;}
.entry-title{font-size:42px;margin-bottom:16px;}
.entry-thumbnail{margin-bottom:40px;border-radius:20px;overflow:hidden;}
.entry-content h2{font-size:30px;margin:40px 0 16px;}
.entry-content h3{font-size:24px;margin:32px 0 14px;}
.entry-content p{margin-bottom:20px;font-size:16px;line-height:1.8;}
.entry-content ul,.entry-content ol{padding-left:24px;margin-bottom:20px;}
.entry-content li{margin-bottom:8px;}
.entry-content blockquote{border-left:4px solid var(--primary);padding:20px 30px;background:var(--gray6);border-radius:0 12px 12px 0;margin:30px 0;font-style:italic;}

/* Order Modal */
.order-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:99998;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:all .3s;}
.order-modal-overlay.open{opacity:1;visibility:visible;}
.order-modal-box{background:#fff;border-radius:24px;padding:44px;max-width:520px;width:92%;position:relative;transform:scale(.9);transition:transform .3s;max-height:90vh;overflow-y:auto;}
.order-modal-overlay.open .order-modal-box{transform:scale(1);}
.order-modal-close{position:absolute;top:16px;right:16px;border:none;background:var(--gray);border-radius:50%;width:36px;height:36px;cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center;}

/* WooCommerce basics */
.woocommerce-page .site-main{background:var(--white);}
.woocommerce .button,.woocommerce-cart .button,.woocommerce-checkout .button{background:var(--primary)!important;color:#fff!important;border-radius:14px!important;font-family:var(--font)!important;font-weight:500!important;padding:12px 28px!important;}
.woocommerce .button:hover{background:var(--secondary)!important;}
.woocommerce form .form-row input.input-text,.woocommerce form .form-row textarea{border-radius:12px!important;border-color:var(--border)!important;font-family:var(--font)!important;padding:14px 18px!important;}
.woocommerce-account .woocommerce-MyAccount-navigation-link--orders a,.woocommerce-account .woocommerce-MyAccount-navigation-link--downloads a{color:var(--primary)!important;}
.woocommerce ul.products li.product .price{color:var(--primary)!important;font-weight:700!important;}
.woocommerce ul.products li.product .button{background:var(--primary)!important;}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active a{color:var(--primary)!important;border-bottom-color:var(--primary)!important;}

/* Responsive */
@media(max-width:1024px){
    .section-title .title{font-size:34px;}
    .hero-content h1{font-size:46px;}
    .services-grid{grid-template-columns:repeat(2,1fr);}
    .portfolio-grid{grid-template-columns:repeat(2,1fr);}
    .counter-grid{grid-template-columns:repeat(2,1fr);}
    .testimonials-grid{grid-template-columns:1fr 1fr;}
    .footer-grid{grid-template-columns:1fr 1fr;gap:36px;}
    .pricing-grid{grid-template-columns:1fr;max-width:480px;margin:0 auto;}
    .pricing-card.popular{transform:none;}
}
@media(max-width:768px){
    nav#site-navigation,.header-btn{display:none;}
    .hamburger{display:flex;}
    .hero-grid,.about-grid,.contact-grid{grid-template-columns:1fr;}
    .cta-inner{flex-direction:column;}
    .hero-content h1{font-size:36px;}
    .hero-section{padding:140px 0 80px;min-height:auto;}
    .services-grid,.portfolio-grid,.testimonials-grid,.blog-grid{grid-template-columns:1fr;}
    .footer-grid{grid-template-columns:1fr;}
    .form-row{grid-template-columns:1fr;}
    .footer-bottom-inner{flex-direction:column;text-align:center;}
    .about-exp-badge{right:0;}
    .hero-badge{display:none;}
    .section-title .title{font-size:28px;}
    .cta-content h2{font-size:30px;}
    .hero-image-box{height:300px;}
    .page-banner h1{font-size:36px;}
}
@media(max-width:480px){
    .counter-grid{grid-template-columns:1fr 1fr;}
    .brands-grid{gap:30px;}
}

/* Fade up animation */
.fade-up{opacity:0;transform:translateY(40px);transition:opacity .7s ease,transform .7s ease;}
.fade-up.visible{opacity:1;transform:none;}

/* Pagination */
.pagination,.nav-links{display:flex;gap:8px;justify-content:center;padding:40px 0;flex-wrap:wrap;}
.page-numbers,.nav-links a,.nav-links span{display:inline-flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50%;border:1px solid var(--border);font-size:14px;font-weight:600;color:var(--text-body);transition:all .3s;}
.page-numbers.current,.page-numbers:hover,.nav-links a:hover{background:var(--primary);color:var(--white);border-color:var(--primary);}

/* Alignments */
.alignleft{float:left;margin-right:20px;}
.alignright{float:right;margin-left:20px;}
.aligncenter{display:block;margin:0 auto 20px;}
.screen-reader-text{clip:rect(1px,1px,1px,1px);position:absolute;overflow:hidden;height:1px;width:1px;}

/* ===========================
   Order Modal v4
=========================== */
.order-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:99998;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:all .3s;padding:20px;}
.order-modal-overlay.open{opacity:1;visibility:visible;}
.order-modal-box{background:#fff;border-radius:24px;padding:40px;max-width:560px;width:100%;position:relative;transform:scale(.92);transition:transform .3s;max-height:90vh;overflow-y:auto;}
.order-modal-overlay.open .order-modal-box{transform:scale(1);}
.order-modal-close{position:absolute;top:16px;right:16px;border:none;background:var(--gray);border-radius:50%;width:36px;height:36px;cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center;}

/* ===========================
   XF Form Overrides
=========================== */
.contact-section .xf-wrap .xf-submit{background:var(--primary);}
.contact-section .xf-wrap .xf-submit::after{background:var(--secondary);}
.contact-section .xf-input{border-color:var(--border);}

/* ===========================
   Leads Dashboard Widget
=========================== */
#toplevel_page_xolio-leads .wp-menu-name{font-weight:700;}