/* Dropdown Menu Styles */
.nav-desktop .dropdown{
 position:relative;
}

.nav-desktop .dropdown > a{
 cursor:pointer;
}

.dropdown-menu{
 display:none;
 position:absolute;
 top:100%;
 left:0;
 background:white;
 min-width:200px;
 box-shadow:0 4px 12px rgba(0, 0, 0, 0.15);
 border-radius:8px;
 padding:0.5rem 0;
 z-index:1000;
 margin-top:0.5rem;
}

.dropdown-menu li{
 list-style:none;
}

.dropdown-menu a{
 display:block;
 padding:0.75rem 1.5rem;
 color:var(--primary-black);
 text-decoration:none;
 transition:background-color 0.3s ease;
}

.dropdown-menu a:hover{
 background-color:var(--light-grey);
 color:var(--primary-red);
}

.dropdown:hover .dropdown-menu{
 display:block;
}

/* Mobile - no dropdown needed, show all links */
@media (max-width:768px){
 .dropdown-menu{
 display:none !important;
 }
}


/* ===================================
  CSS RESET & BASE STYLES
  =================================== */
*{
 margin:0;
 padding:0;
 box-sizing:border-box;
}

:root{
 /* Color Palette - Phone Repair Shop Blue */
 --primary-red:#00A3E0;
 --primary-black:#1a1a1a;
 --secondary-grey:#333333;
 --light-grey:#f5f5f5;
 --border-grey:#e0e0e0;
 --white:#FFFFFF;
 --text-dark:#2c2c2c;
 --text-light:#666666;
 --hover-red:#0088c2;
 
 /* Typography */
 --font-heading:'Montserrat', sans-serif;
 --font-body:'Open Sans', sans-serif;
 
 /* Spacing */
 --spacing-xs:0.5rem;
 --spacing-sm:1rem;
 --spacing-md:2rem;
 --spacing-lg:3rem;
 --spacing-xl:4rem;
 
 /* Border Radius */
 --radius-sm:4px;
 --radius-md:8px;
 --radius-lg:12px;
 
 /* Shadows */
 --shadow-sm:0 2px 4px rgba(0, 0, 0, 0.1);
 --shadow-md:0 4px 12px rgba(0, 0, 0, 0.15);
 --shadow-lg:0 8px 24px rgba(0, 0, 0, 0.2);
}

body{
 font-family:var(--font-body);
 color:var(--text-dark);
 line-height:1.6;
 background-color:var(--white);
}

h1, h2, h3, h4, h5, h6{
 font-family:var(--font-heading);
 font-weight:700;
 line-height:1.2;
 color:var(--primary-black);
}

a{
 text-decoration:none;
 color:inherit;
 transition:all 0.3s ease;
}

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

.container{
 max-width:1200px;
 margin:0 auto;
 padding:0 var(--spacing-md);
}

/* ===================================
  HEADER & NAVIGATION
  =================================== */
.header{
 background-color:var(--white);
 box-shadow:var(--shadow-sm);
 position:sticky;
 top:0;
 z-index:1000;
 border-bottom:3px solid var(--primary-red);
}

.header-top{
 background-color:var(--primary-black);
 color:var(--white);
 padding:var(--spacing-xs) 0;
}

.header-top .container{
 display:flex;
 justify-content:space-between;
 align-items:center;
 font-size:0.9rem;
}

.header-top-left{
 display:flex;
 gap:var(--spacing-md);
}

.header-top-right{
 display:flex;
 gap:var(--spacing-sm);
}

.header-top a{
 color:var(--white);
}

.header-top a:hover{
 color:var(--primary-red);
}

.header-top i{
 margin-right:0.3rem;
}

.phone-link i{
 margin-right:0.3rem;
}

.header-content{
 display:flex;
 justify-content:space-between;
 align-items:center;
 padding:var(--spacing-sm) 0;
 gap:var(--spacing-md);
}

.logo h1{
 font-size:2rem;
 font-weight:800;
 color:var(--primary-black);
}

.logo span{
 color:var(--primary-red);
}

.nav-desktop ul{
 display:flex;
 list-style:none;
 gap:var(--spacing-md);
 align-items:center;
 margin:0;
 padding:0;
}

.nav-desktop li{
 display:flex;
 align-items:center;
}

.nav-desktop a{
 color:var(--text-dark);
 font-weight:600;
 font-size:0.95rem;
 padding:var(--spacing-xs) var(--spacing-sm);
 border-radius:var(--radius-sm);
 display:inline-block;
 line-height:1.5;
}

.nav-desktop a:hover{
 background-color:var(--light-grey);
 color:var(--primary-red);
}

/* Active state removed - no blue background on navigation */

.header-actions{
 display:flex;
 align-items:center;
 gap:var(--spacing-sm);
}

.phone-link{
 color:var(--primary-red);
 font-weight:700;
 font-size:1.2rem;
 display:flex;
 align-items:center;
 gap:0.3rem;
}

.mobile-menu-toggle{
 display:none;
 background:none;
 border:none;
 font-size:1.8rem;
 cursor:pointer;
 color:var(--primary-black);
}

/* ===================================
  BUTTONS
  =================================== */
.btn{
 display:inline-block;
 padding:0.75rem 1.5rem;
 border-radius:var(--radius-sm);
 font-weight:600;
 font-size:1rem;
 text-align:center;
 cursor:pointer;
 transition:all 0.3s ease;
 border:2px solid transparent;
}

.btn-primary{
 background-color:var(--primary-red);
 color:var(--white);
 border-color:var(--primary-red);
}

.btn-primary:hover{
 background-color:var(--hover-red);
 border-color:var(--hover-red);
 transform:translateY(-2px);
 box-shadow:var(--shadow-md);
}

.btn-secondary{
 background-color:transparent;
 color:var(--primary-black);
 border:2px solid var(--primary-black);
}

.btn-secondary:hover{
 background-color:var(--primary-black);
 color:var(--white);
}

.btn-large{
 padding:1rem 2rem;
 font-size:1.1rem;
}

/* ===================================
  SECTION HEADERS
  =================================== */
.section-header{
 text-align:center;
 margin-bottom:var(--spacing-lg);
}

.section-header h2{
 font-size:2.5rem;
 margin-bottom:var(--spacing-sm);
 color:var(--primary-black);
}

.section-header h2 .highlight{
 color:var(--primary-red);
}

.section-header p{
 font-size:1.1rem;
 color:var(--text-light);
 max-width:600px;
 margin:0 auto;
}

/* ===================================
  SERVICES SECTION
  =================================== */
.services{
 padding:var(--spacing-xl) 0;
 background-color:var(--white);
}

.services-grid{
 display:grid;
 grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
 gap:var(--spacing-md);
}

.service-card{
 background-color:var(--white);
 border:2px solid var(--border-grey);
 border-radius:var(--radius-md);
 padding:var(--spacing-md);
 transition:all 0.3s ease;
 text-align:center;
 position:relative;
 overflow:hidden;
}

.service-card::before{
 content:'';
 position:absolute;
 top:0;
 left:0;
 right:0;
 height:4px;
 background:var(--primary-red);
 transform:scaleX(0);
 transition:transform 0.3s ease;
}

.service-card:hover::before{
 transform:scaleX(1);
}

.service-card:hover{
 transform:translateY(-8px);
 box-shadow:var(--shadow-lg);
 border-color:var(--primary-red);
}

.service-card:hover .service-icon{
 transform:scale(1.1);
 color:var(--hover-red);
}

.service-icon{
 transition:all 0.3s ease;
}

.service-icon{
 font-size:4rem;
 margin-bottom:var(--spacing-sm);
 color:var(--primary-red);
}

.service-card h3{
 font-size:1.5rem;
 margin-bottom:var(--spacing-sm);
 color:var(--primary-black);
}

.service-card p{
 color:var(--text-light);
 margin-bottom:var(--spacing-sm);
 line-height:1.6;
}

.service-brands{
 list-style:none;
 display:flex;
 flex-wrap:wrap;
 gap:var(--spacing-xs);
 justify-content:center;
 margin-bottom:var(--spacing-sm);
}

.service-brands li{
 background-color:var(--light-grey);
 padding:0.3rem 0.8rem;
 border-radius:var(--radius-sm);
 font-size:0.85rem;
 color:var(--text-dark);
}

.service-link{
 color:var(--primary-red);
 font-weight:600;
 display:inline-block;
 margin-top:var(--spacing-sm);
}

.service-link:hover{
 color:var(--hover-red);
 text-decoration:underline;
}

/* ===================================
  PRICING SECTION
  =================================== */
.pricing{
 padding:var(--spacing-xl) 0;
 background-color:var(--light-grey);
}

.pricing-table{
 background-color:var(--white);
 border-radius:var(--radius-md);
 overflow:hidden;
 box-shadow:var(--shadow-md);
 border:2px solid var(--border-grey);
}

.pricing-header{
 background-color:var(--primary-black);
 color:var(--white);
 padding:var(--spacing-md);
 display:grid;
 grid-template-columns:2fr 1fr 1fr;
 gap:var(--spacing-sm);
 font-weight:700;
}

.pricing-row{
 display:grid;
 grid-template-columns:2fr 1fr 1fr;
 gap:var(--spacing-sm);
 padding:var(--spacing-md);
 border-bottom:1px solid var(--border-grey);
 align-items:center;
}

.pricing-row:hover{
 background-color:var(--light-grey);
 border-left:4px solid var(--primary-red);
 padding-left:calc(var(--spacing-md) - 4px);
}

.pricing-row:last-child{
 border-bottom:none;
}

.device-name{
 font-weight:600;
 color:var(--primary-black);
}

.device-name a{
 color:inherit;
 text-decoration:none;
 transition:color 0.3s ease;
}

.device-name a:hover{
 color:var(--primary-blue);
 text-decoration:underline;
}

.price{
 font-size:1.2rem;
 font-weight:700;
 color:var(--primary-red);
}

.price-note{
 font-size:0.85rem;
 color:var(--text-light);
 font-style:italic;
}

/* ===================================
  TRUST SIGNALS SECTION
  =================================== */
.trust-signals{
 padding:var(--spacing-xl) 0;
 background-color:var(--white);
}

.trust-grid{
 display:grid;
 grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
 gap:var(--spacing-md);
}

.trust-item{
 text-align:center;
 padding:var(--spacing-md);
 background-color:var(--light-grey);
 border-radius:var(--radius-md);
 transition:all 0.3s ease;
 border:2px solid transparent;
}

.trust-item:hover{
 transform:translateY(-5px);
 box-shadow:var(--shadow-md);
 border-color:var(--primary-red);
 background-color:var(--white);
}

.trust-item:hover .trust-icon{
 transform:scale(1.15);
 color:var(--hover-red);
}

.trust-icon{
 transition:all 0.3s ease;
}

.trust-icon{
 font-size:3rem;
 margin-bottom:var(--spacing-sm);
 color:var(--primary-red);
}

.trust-item h4{
 font-size:1.2rem;
 margin-bottom:var(--spacing-xs);
 color:var(--primary-black);
}

.trust-item p{
 color:var(--text-light);
 font-size:0.95rem;
}

/* ===================================
  HOW IT WORKS SECTION
  =================================== */
.how-it-works{
 padding:var(--spacing-xl) 0;
 background-color:var(--light-grey);
}

.steps-grid{
 display:grid;
 grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
 gap:var(--spacing-lg);
 margin-top:var(--spacing-lg);
}

.step{
 position:relative;
 text-align:center;
}

.step-number{
 width:80px;
 height:80px;
 background:linear-gradient(135deg, var(--primary-red) 0%, var(--hover-red) 100%);
 color:var(--white);
 border-radius:50%;
 display:flex;
 align-items:center;
 justify-content:center;
 font-size:2rem;
 font-weight:800;
 margin:0 auto var(--spacing-sm);
 box-shadow:var(--shadow-md);
 transition:all 0.3s ease;
}

.step:hover .step-number{
 transform:scale(1.1) rotate(5deg);
 box-shadow:var(--shadow-lg);
}

.step-content h3{
 font-size:1.3rem;
 margin-bottom:var(--spacing-xs);
 color:var(--primary-black);
}

.step-content p{
 color:var(--text-light);
 line-height:1.6;
}

/* ===================================
  TESTIMONIALS SECTION
  =================================== */
.testimonials{
 padding:var(--spacing-xl) 0;
 background-color:var(--white);
}

.testimonials-grid{
 display:grid;
 grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
 gap:var(--spacing-md);
 margin-bottom:var(--spacing-md);
}

.testimonial-card{
 background-color:var(--light-grey);
 padding:var(--spacing-md);
 border-radius:var(--radius-md);
 box-shadow:var(--shadow-sm);
 border-left:4px solid var(--primary-red);
}

.stars{
 color:var(--primary-red);
 font-size:1.2rem;
 margin-bottom:var(--spacing-sm);
 letter-spacing:0.2rem;
}

.testimonial-text{
 color:var(--text-dark);
 font-style:italic;
 margin-bottom:var(--spacing-sm);
 line-height:1.7;
}

.testimonial-author{
 display:flex;
 flex-direction:column;
 gap:0.2rem;
}

.testimonial-author strong{
 color:var(--primary-black);
}

.testimonial-author span{
 color:var(--text-light);
 font-size:0.9rem;
}

.trustpilot-badge{
 text-align:center;
 margin-top:var(--spacing-md);
 padding:var(--spacing-sm);
 background-color:var(--light-grey);
 border-radius:var(--radius-md);
}

.trustpilot-badge p{
 font-size:1.1rem;
 color:var(--text-dark);
}

.trustpilot-badge strong{
 color:var(--primary-red);
}

/* ===================================
  CTA SECTION
  =================================== */
.cta-section{
 padding:var(--spacing-xl) 0;
 background:linear-gradient(135deg, var(--primary-black) 0%, var(--secondary-grey) 100%);
 color:var(--white);
 text-align:center;
}

.cta-content h2{
 font-size:2.5rem;
 color:var(--white);
 margin-bottom:var(--spacing-sm);
}

.cta-content p{
 font-size:1.2rem;
 margin-bottom:var(--spacing-md);
 opacity:0.95;
}

.cta-buttons{
 display:flex;
 gap:var(--spacing-sm);
 justify-content:center;
 flex-wrap:wrap;
}

.cta-section .btn-secondary{
 background-color:var(--white);
 color:var(--primary-black);
 border-color:var(--white);
}

.cta-section .btn-secondary:hover{
 background-color:transparent;
 color:var(--white);
 border-color:var(--white);
}

/* ===================================
  FOOTER
  =================================== */
.footer{
 background-color:var(--primary-black);
 color:var(--white);
 padding:var(--spacing-xl) 0 var(--spacing-md);
}

.footer-grid{
 display:grid;
 grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
 gap:var(--spacing-lg);
 margin-bottom:var(--spacing-lg);
}

.footer-column h3{
 font-size:1.5rem;
 margin-bottom:var(--spacing-sm);
 color:var(--white);
}

.footer-column h3 span{
 color:var(--primary-red);
}

.footer-column h4{
 font-size:1.1rem;
 margin-bottom:var(--spacing-sm);
 color:var(--primary-red);
}

.footer-column p{
 color:#CCCCCC;
 line-height:1.6;
 margin-bottom:var(--spacing-sm);
}

.footer-column ul{
 list-style:none;
}

.footer-column ul li{
 margin-bottom:var(--spacing-xs);
}

.footer-column ul li a{
 color:#CCCCCC;
 transition:color 0.3s ease;
}

.footer-column ul li a:hover{
 color:var(--primary-red);
}

.contact-info li{
 color:#CCCCCC;
 margin-bottom:var(--spacing-xs);
 line-height:1.6;
}

.contact-info i{
 margin-right:0.5rem;
 color:var(--primary-red);
}

.social-links{
 display:flex;
 gap:var(--spacing-sm);
 margin-top:var(--spacing-sm);
}

.social-links a{
 width:40px;
 height:40px;
 background-color:var(--primary-red);
 color:var(--white);
 border-radius:50%;
 display:flex;
 align-items:center;
 justify-content:center;
 font-weight:bold;
 transition:all 0.3s ease;
}

.social-links a:hover{
 background-color:var(--white);
 color:var(--primary-red);
 transform:translateY(-3px);
}

.social-links i{
 font-size:1.2rem;
}

.footer-bottom{
 border-top:1px solid #555;
 padding-top:var(--spacing-md);
 text-align:center;
 color:#CCCCCC;
}

.footer-bottom a{
 color:var(--primary-red);
}

.footer-bottom a:hover{
 text-decoration:underline;
}

/* ===================================
  DEVICE SELECTION PAGE
  =================================== */
.device-selection-hero{
 background-color:var(--light-grey);
 padding:var(--spacing-lg) 0;
 text-align:center;
}

.device-selection-hero h1{
 font-size:2.5rem;
 color:var(--primary-black);
 margin-bottom:var(--spacing-xs);
}

.device-selection-hero p{
 font-size:1.1rem;
 color:var(--text-light);
}

.device-grid-section{
 padding:var(--spacing-xl) 0;
}

.device-grid{
 display:grid;
 grid-template-columns:repeat(auto-fill, minmax(250px, 1fr));
 gap:var(--spacing-md);
}

.device-card{
 background-color:var(--white);
 border:2px solid var(--border-grey);
 border-radius:var(--radius-md);
 padding:var(--spacing-md);
 text-align:center;
 transition:all 0.3s ease;
 display:flex;
 flex-direction:column;
 align-items:center;
}

.device-card:hover{
 transform:translateY(-8px);
 box-shadow:var(--shadow-lg);
 border-color:var(--primary-red);
}

.device-image{
 width:100%;
 height:200px;
 display:flex;
 align-items:center;
 justify-content:center;
 margin-bottom:var(--spacing-sm);
}

.device-image img{
 max-width:100%;
 max-height:100%;
 object-fit:contain;
}

.device-card h3{
 font-size:1.2rem;
 color:var(--primary-black);
 margin-bottom:var(--spacing-xs);
}

.device-price{
 color:var(--primary-red);
 font-weight:700;
 font-size:1.1rem;
 margin-bottom:var(--spacing-sm);
}

.view-repairs{
 color:var(--text-light);
 font-size:0.9rem;
 font-weight:600;
}

.device-card:hover .view-repairs{
 color:var(--primary-red);
}

/* ===================================
  INDIVIDUAL DEVICE REPAIR PAGE
  =================================== */
.breadcrumb{
 background-color:var(--light-grey);
 padding:var(--spacing-sm) 0;
 font-size:0.9rem;
}

.breadcrumb a{
 color:var(--text-light);
}

.breadcrumb a:hover{
 color:var(--primary-red);
}

.breadcrumb span{
 color:var(--text-dark);
 font-weight:600;
}

.device-repair-hero{
 background-color:var(--white);
 padding:var(--spacing-lg) 0;
 border-bottom:2px solid var(--border-grey);
}

.device-hero-content{
 display:grid;
 grid-template-columns:1fr 2fr;
 gap:var(--spacing-lg);
 align-items:center;
}

.device-hero-image{
 display:flex;
 justify-content:center;
 align-items:center;
}

.device-hero-image img{
 max-width:100%;
 max-height:300px;
 object-fit:contain;
}

.device-hero-text h1{
 font-size:2.5rem;
 color:var(--primary-black);
 margin-bottom:var(--spacing-sm);
}

.device-hero-text p{
 font-size:1.1rem;
 color:var(--text-light);
 margin-bottom:var(--spacing-md);
}

.device-hero-features{
 display:flex;
 gap:var(--spacing-md);
 flex-wrap:wrap;
}

.hero-feature{
 display:flex;
 align-items:center;
 gap:0.5rem;
 padding:0.5rem 1rem;
 background-color:var(--light-grey);
 border-radius:var(--radius-sm);
}

.hero-feature i{
 color:var(--primary-red);
 font-size:1.2rem;
}

.hero-feature span{
 font-weight:600;
 color:var(--text-dark);
}

.repairs-list{
 padding:var(--spacing-xl) 0;
}

.repairs-list h2{
 font-size:2rem;
 color:var(--primary-black);
 margin-bottom:var(--spacing-lg);
 text-align:center;
}

.repairs-grid{
 display:flex;
 flex-direction:column;
 gap:var(--spacing-md);
}

.repair-card{
 background-color:var(--white);
 border:2px solid var(--border-grey);
 border-radius:var(--radius-md);
 padding:var(--spacing-md);
 display:grid;
 grid-template-columns:auto 1fr auto;
 gap:var(--spacing-md);
 align-items:center;
 transition:all 0.3s ease;
}

.repair-card:hover{
 box-shadow:var(--shadow-md);
 border-color:var(--primary-red);
}

.repair-icon{
 width:60px;
 height:60px;
 background-color:var(--light-grey);
 border-radius:var(--radius-md);
 display:flex;
 align-items:center;
 justify-content:center;
 font-size:1.8rem;
 color:var(--primary-red);
}

.repair-info h3{
 font-size:1.3rem;
 color:var(--primary-black);
 margin-bottom:var(--spacing-xs);
}

.repair-description{
 color:var(--text-light);
 font-size:0.95rem;
 line-height:1.6;
 margin-bottom:var(--spacing-sm);
}

.repair-details{
 display:flex;
 gap:var(--spacing-md);
 flex-wrap:wrap;
}

.repair-detail{
 display:flex;
 align-items:center;
 gap:0.3rem;
 font-size:0.9rem;
 color:var(--text-dark);
}

.repair-detail i{
 color:var(--primary-red);
}

.repair-price-section{
 text-align:center;
 display:flex;
 flex-direction:column;
 align-items:center;
 gap:var(--spacing-xs);
}

.repair-price{
 font-size:2rem;
 font-weight:800;
 color:var(--primary-red);
}

.price-note{
 font-size:0.85rem;
 color:var(--text-light);
}

/* ===================================
  RESPONSIVE DESIGN
  =================================== */

/* Tablet */
@media (max-width:768px){
 .nav-desktop{
 display:none;
 }
 
 .mobile-menu-toggle{
 display:block;
 }
 
 .header-top{
 display:none;
 }
 
 .header-actions .phone-link{
 font-size:1rem;
 }
 
 .slide-content{
 grid-template-columns:1fr;
 }
 
 .slide-text h2{
 font-size:2rem;
 }
 
 .carousel-btn{
 width:40px;
 height:40px;
 }
 
 .carousel-btn-prev{
 left:10px;
 }
 
 .carousel-btn-next{
 right:10px;
 }
 
 .section-header h2{
 font-size:2rem;
 }
 
 .services-grid{
 grid-template-columns:1fr;
 }
 
 .device-grid{
 grid-template-columns:repeat(2, 1fr);
 }
 
 .device-hero-content{
 grid-template-columns:1fr;
 }
 
 .repair-card{
 grid-template-columns:1fr;
 text-align:center;
 }
 
 .repair-icon{
 margin:0 auto;
 }
 
 .pricing-header,
 .pricing-row{
 grid-template-columns:1.5fr 1fr 1fr;
 font-size:0.9rem;
 }
 
 .trust-grid{
 grid-template-columns:repeat(2, 1fr);
 }
 
 .steps-grid{
 grid-template-columns:1fr;
 }
 
 .testimonials-grid{
 grid-template-columns:1fr;
 }
 
 .footer-grid{
 grid-template-columns:repeat(2, 1fr);
 }
}

/* Mobile */
@media (max-width:480px){
 :root{
 --spacing-md:1rem;
 --spacing-lg:2rem;
 --spacing-xl:2.5rem;
 }
 
 .container{
 padding:0 var(--spacing-sm);
 }
 
 .logo h1{
 font-size:1.4rem;
 }
 
 .slide-text h2{
 font-size:1.5rem;
 }
 
 .slide-subtitle{
 font-size:1rem;
 }
 
 .slide-features{
 flex-direction:column;
 gap:var(--spacing-xs);
 }
 
 .slide-pricing{
 flex-direction:column;
 }
 
 .carousel-btn{
 width:35px;
 height:35px;
 font-size:0.9rem;
 }
 
 .section-header h2{
 font-size:1.8rem;
 }
 
 .section-header p{
 font-size:1rem;
 }
 
 .device-grid{
 grid-template-columns:1fr;
 }
 
 .device-hero-text h1{
 font-size:1.8rem;
 }
 
 .repair-card{
 padding:var(--spacing-sm);
 }
 
 .repair-info h3{
 font-size:1.1rem;
 }
 
 .repair-description{
 font-size:0.9rem;
 }
 
 .pricing-header,
 .pricing-row{
 grid-template-columns:1fr;
 text-align:center;
 }
 
 .pricing-header > div:not(:first-child),
 .pricing-row > div:not(:first-child){
 border-top:1px solid var(--border-grey);
 padding-top:var(--spacing-xs);
 margin-top:var(--spacing-xs);
 }
 
 .trust-grid{
 grid-template-columns:1fr;
 }
 
 .cta-content h2{
 font-size:1.8rem;
 }
 
 .cta-content p{
 font-size:1rem;
 }
 
 .cta-buttons{
 flex-direction:column;
 }
 
 .cta-buttons .btn{
 width:100%;
 }
 
 .footer-grid{
 grid-template-columns:1fr;
 }
}

/* Mail-In Repair Page Styles */
.breadcrumb{
 background:var(--light-grey);
 padding:var(--spacing-sm) 0;
 font-size:0.9rem;
}

.breadcrumb a{
 color:var(--primary-red);
 text-decoration:none;
}

.breadcrumb a:hover{
 text-decoration:underline;
}

.mail-in-hero{
 background:linear-gradient(135deg, var(--primary-red) 0%, #c00510 100%);
 color:white;
 padding:var(--spacing-xxl) 0;
 text-align:center;
}

.mail-in-hero h1{
 font-size:2.5rem;
 margin-bottom:var(--spacing-md);
 font-weight:800;
}

.hero-subtitle{
 font-size:1.2rem;
 margin-bottom:var(--spacing-xl);
 opacity:0.95;
}

.hero-features{
 display:flex;
 justify-content:center;
 gap:var(--spacing-lg);
 flex-wrap:wrap;
}

.feature-badge{
 background:rgba(255, 255, 255, 0.15);
 padding:var(--spacing-sm) var(--spacing-md);
 border-radius:50px;
 display:flex;
 align-items:center;
 gap:var(--spacing-xs);
 backdrop-filter:blur(10px);
}

.feature-badge i{
 font-size:1.2rem;
}

.how-it-works-detailed{
 padding:var(--spacing-xxl) 0;
 background:white;
}

.how-it-works-detailed h2{
 text-align:center;
 font-size:2.2rem;
 margin-bottom:var(--spacing-sm);
 color:var(--text-dark);
}

.section-subtitle{
 text-align:center;
 color:var(--text-grey);
 margin-bottom:var(--spacing-xl);
 font-size:1.1rem;
}

.steps-grid{
 display:grid;
 grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
 gap:var(--spacing-lg);
 margin-top:var(--spacing-xl);
}

.step-card{
 background:white;
 padding:var(--spacing-lg);
 border-radius:12px;
 box-shadow:0 4px 20px rgba(0, 0, 0, 0.08);
 text-align:center;
 position:relative;
 transition:transform 0.3s ease, box-shadow 0.3s ease;
}

.step-card:hover{
 transform:translateY(-5px);
 box-shadow:0 8px 30px rgba(227, 6, 19, 0.15);
}

.step-number{
 position:absolute;
 top:-15px;
 left:50%;
 transform:translateX(-50%);
 width:40px;
 height:40px;
 background:var(--primary-red);
 color:white;
 border-radius:50%;
 display:flex;
 align-items:center;
 justify-content:center;
 font-weight:700;
 font-size:1.2rem;
}

.step-icon{
 font-size:3rem;
 color:var(--primary-red);
 margin:var(--spacing-md) 0;
}

.step-card h3{
 font-size:1.3rem;
 margin-bottom:var(--spacing-sm);
 color:var(--text-dark);
}

.step-card p{
 color:var(--text-grey);
 line-height:1.6;
}

.devices-section{
 padding:var(--spacing-xxl) 0;
 background:var(--light-grey);
}

.devices-section h2{
 text-align:center;
 font-size:2.2rem;
 margin-bottom:var(--spacing-xl);
 color:var(--text-dark);
}

.devices-grid{
 display:grid;
 grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
 gap:var(--spacing-lg);
}

.device-card{
 background:white;
 padding:var(--spacing-lg);
 border-radius:12px;
 text-align:center;
 transition:transform 0.3s ease, box-shadow 0.3s ease;
 box-shadow:0 2px 10px rgba(0, 0, 0, 0.05);
}

.device-card:hover{
 transform:translateY(-5px);
 box-shadow:0 8px 25px rgba(227, 6, 19, 0.12);
}

.device-card i{
 font-size:3rem;
 color:var(--primary-red);
 margin-bottom:var(--spacing-md);
}

.device-card h3{
 font-size:1.3rem;
 margin-bottom:var(--spacing-sm);
 color:var(--text-dark);
}

.device-card p{
 color:var(--text-grey);
 line-height:1.6;
}

.why-mail-in{
 padding:var(--spacing-xxl) 0;
 background:white;
}

.why-mail-in h2{
 text-align:center;
 font-size:2.2rem;
 margin-bottom:var(--spacing-xl);
 color:var(--text-dark);
}

.benefits-grid{
 display:grid;
 grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
 gap:var(--spacing-lg);
}

.benefit-card{
 background:var(--light-grey);
 padding:var(--spacing-lg);
 border-radius:12px;
 display:flex;
 flex-direction:column;
 align-items:center;
 text-align:center;
 transition:transform 0.3s ease;
}

.benefit-card:hover{
 transform:translateY(-5px);
}

.benefit-card i{
 font-size:2.5rem;
 color:var(--primary-red);
 margin-bottom:var(--spacing-md);
}

.benefit-card h3{
 font-size:1.2rem;
 margin-bottom:var(--spacing-sm);
 color:var(--text-dark);
}

.benefit-card p{
 color:var(--text-grey);
 line-height:1.6;
}

.faq-section{
 padding:var(--spacing-xxl) 0;
 background:var(--light-grey);
}

.faq-section h2{
 text-align:center;
 font-size:2.2rem;
 margin-bottom:var(--spacing-xl);
 color:var(--text-dark);
}

.faq-grid{
 display:grid;
 grid-template-columns:repeat(auto-fit, minmax(400px, 1fr));
 gap:var(--spacing-lg);
}

.faq-item{
 background:white;
 padding:var(--spacing-lg);
 border-radius:12px;
 box-shadow:0 2px 10px rgba(0, 0, 0, 0.05);
}

.faq-item h3{
 font-size:1.1rem;
 margin-bottom:var(--spacing-sm);
 color:var(--text-dark);
 display:flex;
 align-items:center;
 gap:var(--spacing-xs);
}

.faq-item h3 i{
 color:var(--primary-red);
}

.faq-item p{
 color:var(--text-grey);
 line-height:1.6;
}

.cta-section{
 padding:var(--spacing-xxl) 0;
 background:linear-gradient(135deg, var(--text-dark) 0%, #000 100%);
 color:white;
 text-align:center;
}

.cta-section h2{
 font-size:2.2rem;
 margin-bottom:var(--spacing-md);
}

.cta-section p{
 font-size:1.1rem;
 margin-bottom:var(--spacing-xl);
 opacity:0.9;
}

.cta-buttons{
 display:flex;
 justify-content:center;
 gap:var(--spacing-md);
 flex-wrap:wrap;
}

.cta-button-large{
 padding:var(--spacing-md) var(--spacing-xl);
 background:var(--primary-red);
 color:white;
 text-decoration:none;
 border-radius:8px;
 font-weight:600;
 font-size:1.1rem;
 transition:all 0.3s ease;
 display:inline-block;
}

.cta-button-large:hover{
 background:#c00510;
 transform:translateY(-2px);
 box-shadow:0 8px 20px rgba(227, 6, 19, 0.3);
}

.cta-button-large.secondary{
 background:transparent;
 border:2px solid white;
}

.cta-button-large.secondary:hover{
 background:white;
 color:var(--text-dark);
}

/* Responsive adjustments for mail-in page */
@media (max-width:768px){
 .mail-in-hero h1{
 font-size:1.8rem;
 }
 
 .hero-subtitle{
 font-size:1rem;
 }
 
 .hero-features{
 flex-direction:column;
 align-items:center;
 }
 
 .steps-grid{
 grid-template-columns:1fr;
 }
 
 .devices-grid{
 grid-template-columns:1fr;
 }
 
 .benefits-grid{
 grid-template-columns:1fr;
 }
 
 .faq-grid{
 grid-template-columns:1fr;
 }
 
 .cta-buttons{
 flex-direction:column;
 }
 
 .cta-button-large{
 width:100%;
 }
}

/* Location Pages Styles */
.location-hero{
 background:linear-gradient(135deg, var(--primary-red) 0%, #c00510 100%);
 color:white;
 padding:var(--spacing-xxl) 0;
 text-align:center;
}

.location-hero h1{
 font-size:2.5rem;
 margin-bottom:var(--spacing-md);
 font-weight:800;
}

.location-badges{
 display:flex;
 justify-content:center;
 gap:var(--spacing-lg);
 flex-wrap:wrap;
 margin-top:var(--spacing-xl);
}

.location-badges .badge{
 background:rgba(255, 255, 255, 0.15);
 padding:var(--spacing-sm) var(--spacing-md);
 border-radius:50px;
 display:flex;
 align-items:center;
 gap:var(--spacing-xs);
 backdrop-filter:blur(10px);
}

.services-overview{
 padding:var(--spacing-xxl) 0;
 background:white;
}

.services-overview h2{
 text-align:center;
 font-size:2.2rem;
 margin-bottom:var(--spacing-md);
 color:var(--text-dark);
}

.section-intro{
 text-align:center;
 max-width:800px;
 margin:0 auto var(--spacing-xl);
 color:var(--text-grey);
 line-height:1.8;
 font-size:1.1rem;
}

.services-grid{
 display:grid;
 grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
 gap:var(--spacing-lg);
}

.service-card{
 background:var(--light-grey);
 padding:var(--spacing-lg);
 border-radius:12px;
 text-align:center;
 transition:transform 0.3s ease, box-shadow 0.3s ease;
}

.service-card:hover{
 transform:translateY(-5px);
 box-shadow:0 8px 25px rgba(227, 6, 19, 0.12);
}

.service-card i{
 font-size:2.5rem;
 color:var(--primary-red);
 margin-bottom:var(--spacing-md);
}

.service-card h3{
 font-size:1.2rem;
 margin-bottom:var(--spacing-sm);
 color:var(--text-dark);
}

.service-card p{
 color:var(--text-grey);
 line-height:1.6;
}

.why-choose-local{
 padding:var(--spacing-xxl) 0;
 background:var(--light-grey);
}

.why-choose-local h2{
 text-align:center;
 font-size:2.2rem;
 margin-bottom:var(--spacing-xl);
 color:var(--text-dark);
}

.benefit-item{
 background:white;
 padding:var(--spacing-lg);
 border-radius:12px;
 text-align:center;
 transition:transform 0.3s ease;
}

.benefit-item:hover{
 transform:translateY(-5px);
}

.benefit-item i{
 font-size:2.5rem;
 color:var(--primary-red);
 margin-bottom:var(--spacing-md);
}

.benefit-item h3{
 font-size:1.2rem;
 margin-bottom:var(--spacing-sm);
 color:var(--text-dark);
}

.benefit-item p{
 color:var(--text-grey);
 line-height:1.6;
}

.popular-repairs{
 padding:var(--spacing-xxl) 0;
 background:white;
}

.popular-repairs h2{
 text-align:center;
 font-size:2.2rem;
 margin-bottom:var(--spacing-xl);
 color:var(--text-dark);
}

.repairs-list{
 display:grid;
 grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
 gap:var(--spacing-lg);
}

.repair-item{
 background:var(--light-grey);
 padding:var(--spacing-lg);
 border-radius:12px;
 border-left:4px solid var(--primary-red);
}

.repair-item h3{
 font-size:1.2rem;
 margin-bottom:var(--spacing-sm);
 color:var(--text-dark);
}

.repair-item p{
 color:var(--text-grey);
 line-height:1.6;
}

.service-areas{
 padding:var(--spacing-xxl) 0;
 background:var(--light-grey);
 text-align:center;
}

.service-areas h2{
 font-size:2.2rem;
 margin-bottom:var(--spacing-md);
 color:var(--text-dark);
}

.service-areas > .container > p{
 max-width:700px;
 margin:0 auto var(--spacing-xl);
 color:var(--text-grey);
 line-height:1.8;
}

.areas-grid{
 display:grid;
 grid-template-columns:repeat(auto-fit, minmax(150px, 1fr));
 gap:var(--spacing-sm);
 max-width:900px;
 margin:0 auto;
}

.areas-grid span{
 background:white;
 padding:var(--spacing-sm);
 border-radius:8px;
 color:var(--text-dark);
 font-weight:600;
 transition:all 0.3s ease;
}

.areas-grid span:hover{
 background:var(--primary-red);
 color:white;
 transform:scale(1.05);
}

/* Responsive adjustments for location pages */
@media (max-width:768px){
 .location-hero h1{
 font-size:1.8rem;
 }
 
 .location-badges{
 flex-direction:column;
 align-items:center;
 }
 
 .services-grid{
 grid-template-columns:1fr;
 }
 
 .repairs-list{
 grid-template-columns:1fr;
 }
 
 .areas-grid{
 grid-template-columns:repeat(2, 1fr);
 }
}

/* Blog Styles */
.blog-hero{
 background-color:var(--light-grey);
 padding:var(--spacing-lg) 0;
 text-align:center;
}

.blog-hero h1{
 font-size:2.5rem;
 color:var(--primary-black);
 margin-bottom:var(--spacing-xs);
}

.blog-hero p{
 font-size:1.1rem;
 color:var(--text-light);
 max-width:700px;
 margin:0 auto;
}

.blog-section{
 padding:var(--spacing-xxl) 0;
 background:var(--light-grey);
}

.blog-grid{
 display:grid;
 grid-template-columns:repeat(auto-fill, minmax(350px, 1fr));
 gap:var(--spacing-xl);
}

.blog-card{
 background:white;
 border-radius:12px;
 overflow:hidden;
 box-shadow:0 4px 20px rgba(0, 0, 0, 0.08);
 transition:transform 0.3s ease, box-shadow 0.3s ease;
}

.blog-card:hover{
 transform:translateY(-5px);
 box-shadow:0 8px 30px rgba(227, 6, 19, 0.15);
}

.blog-image{
 position:relative;
 height:220px;
 overflow:hidden;
}

.blog-image img{
 width:100%;
 height:100%;
 object-fit:cover;
 transition:transform 0.3s ease;
}

.blog-card:hover .blog-image img{
 transform:scale(1.05);
}

.blog-category{
 position:absolute;
 top:var(--spacing-sm);
 left:var(--spacing-sm);
 background:var(--primary-red);
 color:white;
 padding:var(--spacing-xs) var(--spacing-sm);
 border-radius:20px;
 font-size:0.85rem;
 font-weight:600;
}

.blog-content{
 padding:var(--spacing-lg);
}

.blog-meta{
 display:flex;
 gap:var(--spacing-md);
 margin-bottom:var(--spacing-sm);
 font-size:0.9rem;
 color:var(--text-grey);
}

.blog-meta span{
 display:flex;
 align-items:center;
 gap:var(--spacing-xs);
}

.blog-content h2{
 font-size:1.4rem;
 margin-bottom:var(--spacing-sm);
 line-height:1.4;
}

.blog-content h2 a{
 color:var(--text-dark);
 text-decoration:none;
 transition:color 0.3s ease;
}

.blog-content h2 a:hover{
 color:var(--primary-red);
}

.blog-content p{
 color:var(--text-grey);
 line-height:1.7;
 margin-bottom:var(--spacing-md);
}

.read-more{
 color:var(--primary-red);
 font-weight:600;
 text-decoration:none;
 display:inline-flex;
 align-items:center;
 gap:var(--spacing-xs);
 transition:gap 0.3s ease;
}

.read-more:hover{
 gap:var(--spacing-sm);
}

.blog-categories{
 padding:var(--spacing-xxl) 0;
 background:white;
}

.blog-categories h2{
 text-align:center;
 font-size:2.2rem;
 margin-bottom:var(--spacing-xl);
 color:var(--text-dark);
}

.categories-grid{
 display:grid;
 grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
 gap:var(--spacing-lg);
}

.category-card{
 background:var(--light-grey);
 padding:var(--spacing-lg);
 border-radius:12px;
 text-align:center;
 text-decoration:none;
 transition:all 0.3s ease;
}

.category-card:hover{
 background:var(--primary-red);
 color:white;
 transform:translateY(-5px);
}

.category-card i{
 font-size:2.5rem;
 color:var(--primary-red);
 margin-bottom:var(--spacing-md);
 transition:color 0.3s ease;
}

.category-card:hover i{
 color:white;
}

.category-card h3{
 font-size:1.2rem;
 margin-bottom:var(--spacing-xs);
 color:var(--text-dark);
 transition:color 0.3s ease;
}

.category-card:hover h3{
 color:white;
}

.category-card span{
 font-size:0.9rem;
 color:var(--text-grey);
 transition:color 0.3s ease;
}

.category-card:hover span{
 color:rgba(255, 255, 255, 0.9);
}

.newsletter-section{
 padding:var(--spacing-xxl) 0;
 background:linear-gradient(135deg, var(--text-dark) 0%, #000 100%);
 color:white;
}

.newsletter-content{
 max-width:600px;
 margin:0 auto;
 text-align:center;
}

.newsletter-content h2{
 font-size:2.2rem;
 margin-bottom:var(--spacing-md);
}

.newsletter-content p{
 font-size:1.1rem;
 margin-bottom:var(--spacing-xl);
 opacity:0.9;
}

.newsletter-form{
 display:flex;
 gap:var(--spacing-sm);
 max-width:500px;
 margin:0 auto;
}

.newsletter-form input{
 flex:1;
 padding:var(--spacing-md);
 border:none;
 border-radius:8px;
 font-size:1rem;
}

.newsletter-form button{
 padding:var(--spacing-md) var(--spacing-lg);
 white-space:nowrap;
}

/* Blog Post Styles */
.blog-post{
 padding:var(--spacing-xxl) 0;
 background:white;
}

.post-header{
 text-align:center;
 margin-bottom:var(--spacing-xl);
}

.post-category{
 display:inline-block;
 background:var(--primary-red);
 color:white;
 padding:var(--spacing-xs) var(--spacing-md);
 border-radius:20px;
 font-size:0.9rem;
 font-weight:600;
 margin-bottom:var(--spacing-md);
}

.post-header h1{
 font-size:2.5rem;
 margin-bottom:var(--spacing-md);
 color:var(--text-dark);
 line-height:1.3;
}

.post-meta{
 display:flex;
 justify-content:center;
 gap:var(--spacing-lg);
 font-size:0.95rem;
 color:var(--text-grey);
}

.post-meta span{
 display:flex;
 align-items:center;
 gap:var(--spacing-xs);
}

.post-featured-image{
 margin-bottom:var(--spacing-xl);
 border-radius:12px;
 overflow:hidden;
}

.post-featured-image img{
 width:100%;
 height:auto;
 display:block;
}

.post-content{
 max-width:800px;
 margin:0 auto;
}

.post-content .lead{
 font-size:1.2rem;
 line-height:1.8;
 color:var(--text-grey);
 margin-bottom:var(--spacing-xl);
}

.post-content h2{
 font-size:1.8rem;
 margin-top:var(--spacing-xl);
 margin-bottom:var(--spacing-md);
 color:var(--text-dark);
}

.post-content h3{
 font-size:1.4rem;
 margin-top:var(--spacing-lg);
 margin-bottom:var(--spacing-sm);
 color:var(--text-dark);
}

.post-content p{
 line-height:1.8;
 margin-bottom:var(--spacing-md);
 color:var(--text-grey);
}

.post-content ul,
.post-content ol{
 margin-bottom:var(--spacing-md);
 padding-left:var(--spacing-lg);
}

.post-content li{
 line-height:1.8;
 margin-bottom:var(--spacing-xs);
 color:var(--text-grey);
}

.info-box,
.warning-box,
.decision-box,
.example-box{
 padding:var(--spacing-lg);
 border-radius:8px;
 margin:var(--spacing-lg) 0;
}

.info-box{
 background:#e3f2fd;
 border-left:4px solid #2196f3;
}

.warning-box{
 background:#fff3e0;
 border-left:4px solid #ff9800;
}

.decision-box{
 background:var(--light-grey);
 border-left:4px solid var(--primary-red);
}

.example-box{
 background:#f1f8e9;
 border-left:4px solid #8bc34a;
}

.info-box i,
.warning-box i{
 font-size:1.5rem;
 margin-right:var(--spacing-sm);
}

.cta-box{
 background:var(--light-grey);
 padding:var(--spacing-xl);
 border-radius:12px;
 text-align:center;
 margin-top:var(--spacing-xxl);
}

.cta-box h3{
 font-size:1.8rem;
 margin-bottom:var(--spacing-sm);
 color:var(--text-dark);
}

.cta-box p{
 font-size:1.1rem;
 margin-bottom:var(--spacing-lg);
}

.cta-box .cta-buttons{
 display:flex;
 justify-content:center;
 gap:var(--spacing-md);
 flex-wrap:wrap;
}

.related-posts{
 margin-top:var(--spacing-xxl);
 padding-top:var(--spacing-xxl);
 border-top:2px solid var(--light-grey);
}

.related-posts h3{
 font-size:1.8rem;
 margin-bottom:var(--spacing-lg);
 color:var(--text-dark);
}

.related-grid{
 display:grid;
 grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
 gap:var(--spacing-lg);
}

.related-card{
 text-decoration:none;
 border-radius:8px;
 overflow:hidden;
 box-shadow:0 2px 10px rgba(0, 0, 0, 0.08);
 transition:transform 0.3s ease;
}

.related-card:hover{
 transform:translateY(-5px);
}

.related-card img{
 width:100%;
 height:150px;
 object-fit:cover;
}

.related-card h4{
 padding:var(--spacing-md);
 color:var(--text-dark);
 font-size:1.1rem;
}

/* Responsive Blog Styles */
@media (max-width:768px){
 .blog-hero h1{
 font-size:1.8rem;
 }
 
 .blog-grid{
 grid-template-columns:1fr;
 }
 
 .categories-grid{
 grid-template-columns:repeat(2, 1fr);
 }
 
 .newsletter-form{
 flex-direction:column;
 }
 
 .post-header h1{
 font-size:1.8rem;
 }
 
 .post-meta{
 flex-direction:column;
 gap:var(--spacing-xs);
 }
 
 .related-grid{
 grid-template-columns:1fr;
 }
 
 .cta-box .cta-buttons{
 flex-direction:column;
 }
}
/* Device Image Styling */
.device-image-container{
 margin:2rem auto;
 text-align:center;
 max-width:600px;
 padding:1rem;
 background:linear-gradient(135deg, #667eea 0%, #764ba2 100%);
 border-radius:20px;
 box-shadow:0 10px 30px rgba(0, 0, 0, 0.2);
}

.device-image{
 width:100%;
 max-width:500px;
 height:auto;
 border-radius:15px;
 box-shadow:0 8px 20px rgba(0, 0, 0, 0.3);
 transition:transform 0.3s ease, box-shadow 0.3s ease;
}

.device-image:hover{
 transform:scale(1.05);
 box-shadow:0 12px 30px rgba(0, 0, 0, 0.4);
}

@media (max-width:768px){
 .device-image-container{
 margin:1.5rem auto;
 padding:0.75rem;
 border-radius:15px;
 }
 
 .device-image{
 max-width:100%;
 border-radius:10px;
 }
}


/* How It Works Section - Fixed number positioning */
.step{
 position:relative;
 padding:2rem;
 background:white;
 border-radius:10px;
 box-shadow:0 2px 10px rgba(0,0,0,0.1);
 padding-top:4rem;
}

.step-number{
 position:absolute;
 top:-20px;
 left:50%;
 transform:translateX(-50%);
 width:60px;
 height:60px;
 background:linear-gradient(135deg, #667eea 0%, #764ba2 100%);
 color:white;
 border-radius:50%;
 display:flex;
 align-items:center;
 justify-content:center;
 font-size:1.5rem;
 font-weight:bold;
 box-shadow:0 4px 10px rgba(0,0,0,0.2);
 z-index:1;
}

.step h3{
 margin-top:1rem;
 margin-bottom:1rem;
 color:#333;
}

.step p{
 color:#666;
 line-height:1.6;
}





/* Hero Carousel - Clean White Background */
.hero-carousel{
 background:linear-gradient(to bottom, #f8f9fa 0%, #ffffff 100%);
 padding:0;
 position:relative;
 overflow:hidden;
}

.carousel-container{
 max-width:1400px;
 margin:0 auto;
 position:relative;
}

.carousel-track{
 display:flex;
 transition:transform 0.5s ease-in-out;
}

.carousel-slide{
 min-width:100%;
 display:none;
 opacity:0;
 transition:opacity 0.5s ease-in-out;
}

.carousel-slide.active{
 display:block;
 opacity:1;
}

.slide-content{
 display:grid;
 grid-template-columns:1fr 1fr;
 gap:4rem;
 align-items:center;
 padding:4rem 2rem;
 min-height:600px;
}

.slide-text{
 padding:2rem;
}

.slide-text h2{
 font-size:3.5rem;
 font-weight:800;
 color:#1a1a1a;
 margin-bottom:1.5rem;
 line-height:1.2;
}

.slide-subtitle{
 font-size:1.5rem;
 color:#4a4a4a;
 margin-bottom:2.5rem;
 font-weight:400;
}

.slide-features{
 display:flex;
 gap:2rem;
 margin-bottom:2.5rem;
 flex-wrap:wrap;
}

.feature-item{
 display:flex;
 align-items:center;
 gap:0.75rem;
 color:#2c3e50;
 font-size:1.1rem;
 background:white;
 padding:0.75rem 1.5rem;
 border-radius:25px;
 box-shadow:0 2px 8px rgba(0, 0, 0, 0.08);
}

.feature-item i{
 font-size:1.5rem;
 color:#667eea;
}

.slide-pricing{
 display:flex;
 gap:2rem;
 margin-bottom:2.5rem;
 flex-wrap:wrap;
}

.price-item{
 background:linear-gradient(135deg, #667eea 0%, #764ba2 100%);
 padding:1.25rem 2rem;
 border-radius:15px;
 box-shadow:0 4px 15px rgba(102, 126, 234, 0.3);
}

.price-label{
 display:block;
 font-size:0.95rem;
 color:rgba(255, 255, 255, 0.9);
 margin-bottom:0.5rem;
 font-weight:500;
}

.price-value{
 display:block;
 font-size:1.8rem;
 font-weight:700;
 color:white;
}

.slide-image{
 display:flex;
 align-items:center;
 justify-content:center;
 padding:2rem;
 position:relative;
}

.slide-image img{
 max-width:400px;
 max-height:500px;
 width:auto;
 height:auto;
 object-fit:contain;
 filter:drop-shadow(0 10px 30px rgba(0, 0, 0, 0.1));
 position:relative;
 z-index:2;
 animation:float 3s ease-in-out infinite;
}

@keyframes float{
 0%, 100%{
 transform:translateY(0px);
 }
 50%{
 transform:translateY(-20px);
 }
}

.slide-cta{
 display:inline-flex;
 align-items:center;
 gap:0.75rem;
 background:linear-gradient(135deg, #667eea 0%, #764ba2 100%);
 color:white;
 padding:1.25rem 2.5rem;
 border-radius:50px;
 font-size:1.2rem;
 font-weight:700;
 text-decoration:none;
 transition:all 0.3s ease;
 box-shadow:0 4px 15px rgba(102, 126, 234, 0.4);
}

.slide-cta:hover{
 transform:translateY(-3px);
 box-shadow:0 8px 25px rgba(102, 126, 234, 0.5);
}

.slide-cta i{
 font-size:1.3rem;
}

/* Carousel Navigation Dots */
.carousel-dots{
 position:absolute;
 bottom:2rem;
 left:50%;
 transform:translateX(-50%);
 display:flex;
 gap:1rem;
 z-index:10;
}

.carousel-dot{
 width:12px;
 height:12px;
 border-radius:50%;
 background:rgba(102, 126, 234, 0.3);
 cursor:pointer;
 transition:all 0.3s ease;
 border:2px solid transparent;
}

.carousel-dot.active{
 background:#667eea;
 width:40px;
 border-radius:6px;
}

.carousel-dot:hover{
 background:rgba(102, 126, 234, 0.6);
}

/* Responsive Design */
@media (max-width:968px){
 .slide-content{
 grid-template-columns:1fr;
 gap:2rem;
 padding:3rem 1.5rem;
 min-height:auto;
 }
 
 .slide-text h2{
 font-size:2.5rem;
 }
 
 .slide-subtitle{
 font-size:1.2rem;
 }
 
 .slide-image{
 order:-1;
 padding:1rem;
 }
 
 .slide-image img{
 max-width:280px;
 max-height:350px;
 }
 
 .slide-features{
 gap:1rem;
 }
 
 .feature-item{
 font-size:1rem;
 padding:0.6rem 1.2rem;
 }
 
 .price-item{
 padding:1rem 1.5rem;
 }
 
 .price-value{
 font-size:1.5rem;
 }
}

@media (max-width:480px){
 .slide-text h2{
 font-size:2rem;
 }
 
 .slide-subtitle{
 font-size:1rem;
 }
 
 .slide-image img{
 max-width:220px;
 max-height:280px;
 }
 
 .slide-cta{
 padding:1rem 2rem;
 font-size:1rem;
 }
}



/* White circular backdrop for images */
.slide-image::before{
 content:'';
 position:absolute;
 width:450px;
 height:450px;
 background:white;
 border-radius:50%;
 z-index:1;
 box-shadow:0 20px 60px rgba(0, 0, 0, 0.2);
}

/* Subtle glow effect around the white circle */
.slide-image::after{
 content:'';
 position:absolute;
 width:480px;
 height:480px;
 background:radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 70%);
 border-radius:50%;
 z-index:0;
}

.slide-image img{
 max-width:380px;
 max-height:480px;
 width:auto;
 height:auto;
 object-fit:contain;
 position:relative;
 z-index:2;
 animation:float 3s ease-in-out infinite;
}

@keyframes float{
 0%, 100%{
 transform:translateY(0px);
 }
 50%{
 transform:translateY(-20px);
 }
}

.slide-cta{
 display:inline-flex;
 align-items:center;
 gap:0.75rem;
 background:white;
 color:#667eea;
 padding:1.25rem 2.5rem;
 border-radius:50px;
 font-size:1.2rem;
 font-weight:700;
 text-decoration:none;
 transition:all 0.3s ease;
 box-shadow:0 10px 30px rgba(0, 0, 0, 0.2);
}

.slide-cta:hover{
 transform:translateY(-3px);
 box-shadow:0 15px 40px rgba(0, 0, 0, 0.3);
 background:#ffd700;
 color:#333;
}

.slide-cta i{
 font-size:1.3rem;
}

/* Carousel Navigation Dots */
.carousel-dots{
 position:absolute;
 bottom:2rem;
 left:50%;
 transform:translateX(-50%);
 display:flex;
 gap:1rem;
 z-index:10;
}

.carousel-dot{
 width:12px;
 height:12px;
 border-radius:50%;
 background:rgba(255, 255, 255, 0.4);
 cursor:pointer;
 transition:all 0.3s ease;
 border:2px solid transparent;
}

.carousel-dot.active{
 background:white;
 width:40px;
 border-radius:6px;
}

.carousel-dot:hover{
 background:rgba(255, 255, 255, 0.7);
}

/* Responsive Design */
@media (max-width:968px){
 .slide-content{
 grid-template-columns:1fr;
 gap:2rem;
 padding:3rem 1.5rem;
 min-height:auto;
 }
 
 .slide-text h2{
 font-size:2.5rem;
 }
 
 .slide-subtitle{
 font-size:1.2rem;
 }
 
 .slide-image{
 order:-1;
 padding:1rem;
 }
 
 .slide-image::before{
 width:320px;
 height:320px;
 }
 
 .slide-image::after{
 width:350px;
 height:350px;
 }
 
 .slide-image img{
 max-width:280px;
 max-height:350px;
 }
 
 .slide-features{
 gap:1rem;
 }
 
 .feature-item{
 font-size:1rem;
 }
 
 .price-item{
 padding:1rem 1.5rem;
 }
 
 .price-value{
 font-size:1.5rem;
 }
}

@media (max-width:480px){
 .slide-text h2{
 font-size:2rem;
 }
 
 .slide-subtitle{
 font-size:1rem;
 }
 
 .slide-image::before{
 width:260px;
 height:260px;
 }
 
 .slide-image::after{
 width:280px;
 height:280px;
 }
 
 .slide-image img{
 max-width:220px;
 max-height:280px;
 }
 
 .slide-cta{
 padding:1rem 2rem;
 font-size:1rem;
 }
}



/* Carousel Navigation Dots */
.carousel-dots{
 position:absolute;
 bottom:2rem;
 left:50%;
 transform:translateX(-50%);
 display:flex;
 gap:1rem;
 z-index:10;
}

.carousel-dot{
 width:12px;
 height:12px;
 border-radius:50%;
 background:rgba(255, 255, 255, 0.4);
 cursor:pointer;
 transition:all 0.3s ease;
 border:2px solid transparent;
}

.carousel-dot.active{
 background:white;
 width:40px;
 border-radius:6px;
}

.carousel-dot:hover{
 background:rgba(255, 255, 255, 0.7);
}

/* Responsive Design */
@media (max-width:968px){
 .slide-content{
 grid-template-columns:1fr;
 gap:2rem;
 padding:3rem 1.5rem;
 min-height:auto;
 }
 
 .slide-text h2{
 font-size:2.5rem;
 }
 
 .slide-subtitle{
 font-size:1.2rem;
 }
 
 .slide-image{
 order:-1;
 padding:1rem;
 }
 
 .slide-image::before{
 width:300px;
 height:300px;
 }
 
 .slide-image img{
 max-width:280px;
 max-height:350px;
 }
 
 .slide-features{
 gap:1rem;
 }
 
 .feature-item{
 font-size:1rem;
 }
 
 .price-item{
 padding:1rem 1.5rem;
 }
 
 .price-value{
 font-size:1.5rem;
 }
}

@media (max-width:480px){
 .slide-text h2{
 font-size:2rem;
 }
 
 .slide-subtitle{
 font-size:1rem;
 }
 
 .slide-image img{
 max-width:220px;
 max-height:280px;
 }
 
 .slide-cta{
 padding:1rem 2rem;
 font-size:1rem;
 }
}



/* Quality Options Pages */
.options-hero{
 background:linear-gradient(to bottom, #f8f9fa 0%, #ffffff 100%);
 padding:3rem 0 2rem;
 text-align:center;
}

.options-hero h1{
 font-size:2.5rem;
 color:#1a1a1a;
 margin-bottom:1rem;
}

.hero-subtitle{
 font-size:1.2rem;
 color:#4a4a4a;
 max-width:600px;
 margin:0 auto;
}

.quality-options{
 padding:4rem 0;
 background:white;
}

.options-grid{
 display:grid;
 grid-template-columns:repeat(auto-fit, minmax(320px, 1fr));
 gap:2rem;
 margin-bottom:3rem;
}

.quality-option{
 background:white;
 border:2px solid #e0e0e0;
 border-radius:15px;
 padding:2rem;
 transition:all 0.3s ease;
 position:relative;
}

.quality-option:hover{
 transform:translateY(-5px);
 box-shadow:0 10px 30px rgba(0, 0, 0, 0.1);
}

.quality-option.premium{
 border-color:#667eea;
 box-shadow:0 4px 20px rgba(102, 126, 234, 0.2);
}

.popular-badge{
 position:absolute;
 top:-12px;
 right:20px;
 background:linear-gradient(135deg, #667eea 0%, #764ba2 100%);
 color:white;
 padding:0.5rem 1.5rem;
 border-radius:20px;
 font-size:0.85rem;
 font-weight:700;
 text-transform:uppercase;
}

.option-header{
 text-align:center;
 margin-bottom:1.5rem;
 padding-bottom:1.5rem;
 border-bottom:2px solid #f0f0f0;
}

.option-header h2{
 font-size:1.8rem;
 color:#1a1a1a;
 margin-bottom:0.5rem;
}

.option-price{
 font-size:2.5rem;
 font-weight:800;
 color:#667eea;
 margin:0;
}

.option-description{
 font-size:1rem;
 color:#4a4a4a;
 margin-bottom:1.5rem;
 line-height:1.6;
}

.option-features{
 list-style:none;
 padding:0;
 margin:0 0 2rem 0;
}

.option-features li{
 padding:0.75rem 0;
 color:#2c3e50;
 display:flex;
 align-items:center;
 gap:0.75rem;
}

.option-features i{
 color:#667eea;
 font-size:1.2rem;
}

.option-button{
 display:block;
 width:100%;
 padding:1rem 2rem;
 background:linear-gradient(135deg, #667eea 0%, #764ba2 100%);
 color:white;
 text-align:center;
 text-decoration:none;
 border-radius:50px;
 font-weight:700;
 font-size:1.1rem;
 transition:all 0.3s ease;
}

.option-button:hover{
 transform:translateY(-2px);
 box-shadow:0 8px 20px rgba(102, 126, 234, 0.4);
}

.quality-option.budget .option-button{
 background:linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
}

.quality-option.genuine .option-button{
 background:linear-gradient(135deg, #fa709a 0%, #fee140 100%);
}

.comparison-info{
 text-align:center;
 padding:3rem 2rem;
 background:linear-gradient(to bottom, #f8f9fa 0%, #ffffff 100%);
 border-radius:15px;
 margin-top:3rem;
}

.comparison-info h3{
 font-size:1.8rem;
 color:#1a1a1a;
 margin-bottom:1rem;
}

.comparison-info p{
 font-size:1.1rem;
 color:#4a4a4a;
 margin-bottom:1.5rem;
}

/* Responsive */
@media (max-width:768px){
 .options-grid{
 grid-template-columns:1fr;
 }
 
 .options-hero h1{
 font-size:2rem;
 }
 
 .option-price{
 font-size:2rem;
 }
}

/* New Compact Hero Section - Inspired by MobileSentrix & iTechnician */
.device-repair-hero-new{
 background:linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
 padding:2rem 0;
 border-bottom:1px solid #dee2e6;
}

.hero-compact{
 text-align:center;
 max-width:900px;
 margin:0 auto;
}

.hero-compact h1{
 font-size:2rem;
 font-weight:700;
 color:#212529;
 margin-bottom:0.5rem;
}

.hero-subtitle{
 font-size:1rem;
 color:#6c757d;
 margin-bottom:2rem;
}

/* Quality Badges - Interactive */
.quality-badges{
 display:grid;
 grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
 gap:1rem;
 margin-bottom:2rem;
 max-width:700px;
 margin-left:auto;
 margin-right:auto;
}

.quality-badge{
 background:white;
 border:2px solid #e9ecef;
 border-radius:12px;
 padding:1.25rem;
 display:flex;
 align-items:center;
 gap:1rem;
 cursor:pointer;
 transition:all 0.3s ease;
}

.quality-badge:hover{
 border-color:#00A3E0;
 transform:translateY(-2px);
 box-shadow:0 4px 12px rgba(76, 175, 80, 0.15);
}

.quality-badge.active{
 border-color:#00A3E0;
 background:linear-gradient(135deg, #f1f8f4 0%, #ffffff 100%);
 box-shadow:0 4px 12px rgba(76, 175, 80, 0.2);
}

.badge-icon{
 font-size:2rem;
 min-width:50px;
 text-align:center;
}

.badge-content{
 text-align:left;
 flex:1;
}

.badge-content h3{
 font-size:1rem;
 font-weight:600;
 color:#212529;
 margin:0 0 0.25rem 0;
}

.badge-content p{
 font-size:0.875rem;
 color:#6c757d;
 margin:0;
}

/* Hero CTA Buttons */
.hero-cta{
 display:flex;
 gap:1rem;
 justify-content:center;
 flex-wrap:wrap;
}

.btn-large{
 padding:0.875rem 2rem;
 font-size:1rem;
 font-weight:600;
 border-radius:8px;
 text-decoration:none;
 display:inline-block;
 transition:all 0.3s ease;
}

.btn-primary{
 background:linear-gradient(135deg, #00A3E0 0%, #0088c2 100%);
 color:white;
 border:none;
}

.btn-primary:hover{
 background:linear-gradient(135deg, #0088c2 0%, #0077a8 100%);
 transform:translateY(-2px);
 box-shadow:0 4px 12px rgba(0, 163, 224, 0.3);
}

.btn-secondary{
 background:white;
 color:#212529;
 border:2px solid #dee2e6;
}

.btn-secondary:hover{
 border-color:#00A3E0;
 color:#00A3E0;
 transform:translateY(-2px);
 box-shadow:0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Mobile Responsive */
@media (max-width:768px){
 .device-repair-hero-new{
 padding:1.5rem 0;
 }
 
 .hero-compact h1{
 font-size:1.5rem;
 }
 
 .hero-subtitle{
 font-size:0.875rem;
 }
 
 .quality-badges{
 grid-template-columns:1fr;
 gap:0.75rem;
 }
 
 .quality-badge{
 padding:1rem;
 }
 
 .badge-icon{
 font-size:1.5rem;
 min-width:40px;
 }
 
 .hero-cta{
 flex-direction:column;
 }
 
 .btn-large{
 width:100%;
 text-align:center;
 }
}

/* Homepage Hero Section - MobileSentrix Inspired */

/* Trust Badges Section */
.trust-badges-home{
 background:#f8f9fa;
 padding:3rem 0;
 border-top:1px solid #e9ecef;
 border-bottom:1px solid #e9ecef;
}

.badges-grid{
 display:grid;
 grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
 gap:2rem;
}

.trust-badge{
 text-align:center;
 padding:1.5rem;
}

.badge-icon-large{
 font-size:3rem;
 margin-bottom:1rem;
}

.trust-badge h3{
 font-size:1.25rem;
 font-weight:600;
 color:#212529;
 margin-bottom:0.5rem;
}

.trust-badge p{
 font-size:1rem;
 color:#6c757d;
 margin:0;
}

/* Popular Repairs Section */
.popular-repairs-home{
 background:white;
 padding:4rem 0;
}

.section-header-home{
 text-align:center;
 margin-bottom:3rem;
}

.section-header-home h2{
 font-size:2.5rem;
 font-weight:700;
 color:#212529;
 margin-bottom:0.5rem;
}

.section-header-home p{
 font-size:1.125rem;
 color:#6c757d;
}

.popular-grid{
 display:grid;
 grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
 gap:1.5rem;
}

.popular-card{
 background:white;
 border:2px solid #e9ecef;
 border-radius:12px;
 padding:2rem;
 text-align:center;
 text-decoration:none;
 transition:all 0.3s ease;
 display:block;
}

.popular-card:hover{
 border-color:#00A3E0;
 transform:translateY(-4px);
 box-shadow:0 8px 24px rgba(76, 175, 80, 0.15);
}

.popular-icon{
 font-size:3rem;
 margin-bottom:1rem;
}

.popular-card h3{
 font-size:1.25rem;
 font-weight:600;
 color:#212529;
 margin-bottom:0.5rem;
}

.popular-price{
 font-size:1.5rem;
 font-weight:700;
 color:#00A3E0;
 margin:1rem 0;
}

.popular-link{
 color:#00A3E0;
 font-weight:600;
 font-size:1rem;
}

.popular-card:hover .popular-link{
 text-decoration:underline;
}

/* Mobile Responsive */
@media (max-width:768px){
 .hero-home{
 padding:2rem 0 1rem 0;
 }
 
 .hero-slider{
 min-height:auto;
 }
 
 .hero-content{
 grid-template-columns:1fr;
 gap:2rem;
 min-height:auto;
 }
 
 .hero-text h1{
 font-size:2rem;
 }
 
 .hero-lead{
 font-size:1rem;
 }
 
 .hero-buttons{
 flex-direction:column;
 }
 
 .btn-hero{
 width:100%;
 text-align:center;
 }
 
 .hero-image{
 order:-1;
 }
 
 .hero-image img{
 max-height:300px;
 }
 
 .badges-grid{
 grid-template-columns:1fr;
 gap:1.5rem;
 }
 
 .popular-grid{
 grid-template-columns:1fr;
 }
 
 .section-header-home h2{
 font-size:1.75rem;
 }
}
/* Hero Home Styles - Integrated Design with Real Photos */
.hero-home{
 position:relative;
 overflow:hidden;
}

.hero-slider{
 position:relative;
 width:100%;
}

.hero-slide{
 display:none;
 position:relative;
 padding:100px 0 80px;
 min-height:650px;
}

.hero-slide.active{
 display:block;
 animation:fadeIn 0.8s ease-in;
}

@keyframes fadeIn{
 from{ opacity:0}
 to{ opacity:1}
}

.hero-background{
 position:absolute;
 top:0;
 left:0;
 right:0;
 bottom:0;
 z-index:0;
}

.hero-slide .container{
 position:relative;
 z-index:2;
}

.hero-content{
 display:grid;
 grid-template-columns:1fr 1fr;
 gap:60px;
 align-items:center;
}

.hero-text h1{
 font-size:3.5rem;
 font-weight:700;
 margin-bottom:24px;
 color:#ffffff;
 line-height:1.1;
 text-shadow:0 4px 30px rgba(0,0,0,0.3);
}

.hero-lead{
 font-size:1.25rem;
 color:rgba(255,255,255,0.98);
 margin-bottom:35px;
 line-height:1.7;
 text-shadow:0 2px 15px rgba(0,0,0,0.3);
}

.hero-buttons{
 display:flex;
 gap:15px;
 flex-wrap:wrap;
}

.btn-hero{
 padding:18px 36px;
 font-size:1.1rem;
 font-weight:600;
 box-shadow:0 4px 20px rgba(0,0,0,0.3);
 transition:all 0.3s ease;
}

.btn-hero:hover{
 transform:translateY(-2px);
 box-shadow:0 6px 30px rgba(0,0,0,0.4);
}

.hero-device{
 position:relative;
 display:flex;
 justify-content:center;
 align-items:center;
}

.device-showcase{
 position:relative;
 border-radius:20px;
 overflow:hidden;
 box-shadow:0 20px 60px rgba(0,0,0,0.4);
 transition:all 0.5s ease;
 background:white;
 padding:10px;
}

.device-showcase:hover{
 transform:scale(1.03) translateY(-5px);
 box-shadow:0 30px 80px rgba(0,0,0,0.5);
}

.device-showcase::before{
 content:'';
 position:absolute;
 top:-50%;
 left:-50%;
 width:200%;
 height:200%;
 background:linear-gradient(45deg, transparent, rgba(255,255,255,0.1), transparent);
 transform:rotate(45deg);
 animation:shine 3s infinite;
}

@keyframes shine{
 0%{
 transform:translateX(-100%) translateY(-100%) rotate(45deg);
 }
 100%{
 transform:translateX(100%) translateY(100%) rotate(45deg);
 }
}

.device-showcase img{
 max-width:100%;
 height:auto;
 max-height:500px;
 object-fit:cover;
 display:block;
 border-radius:12px;
}

/* Hero Dots Navigation */
.hero-dots{
 text-align:center;
 padding:30px 0;
 background:transparent;
}

.dot{
 display:inline-block;
 height:12px;
 width:12px;
 margin:0 8px;
 background-color:rgba(255,255,255,0.5);
 border-radius:50%;
 cursor:pointer;
 transition:all 0.3s ease;
 border:2px solid rgba(255,255,255,0.8);
}

.dot:hover{
 background-color:rgba(255,255,255,0.8);
 transform:scale(1.2);
}

.dot.active{
 background-color:#ffffff;
 width:30px;
 border-radius:6px;
 border-color:#ffffff;
}

/* Responsive Design */
@media (max-width:768px){
 .hero-slide{
 padding:60px 0 40px;
 min-height:auto;
 }
 
 .hero-content{
 grid-template-columns:1fr;
 gap:40px;
 }
 
 .hero-text h1{
 font-size:2.5rem;
 }
 
 .hero-lead{
 font-size:1.1rem;
 }
 
 .device-showcase{
 max-width:100%;
 }
 
 .device-showcase img{
 max-height:350px;
 }
}
/* Dropdown Menu Styles */
.dropdown{
 position:relative;
}

.dropdown-toggle{
 cursor:pointer;
}

.dropdown-menu{
 display:none;
 position:absolute;
 top:100%;
 left:0;
 background:white;
 min-width:200px;
 box-shadow:0 4px 12px rgba(0,0,0,0.15);
 border-radius:8px;
 padding:10px 0;
 z-index:1000;
 margin-top:5px;
}

.dropdown:hover .dropdown-menu{
 display:block;
}

.dropdown-menu li{
 list-style:none;
 margin:0;
}

.dropdown-menu li a{
 display:block;
 padding:10px 20px;
 color:#333;
 text-decoration:none;
 transition:background 0.3s ease;
}

.dropdown-menu li a:hover{
 background:#f8f9fa;
 color:#00A3E0;
}

/* Mobile Navigation Styles */
.nav-mobile{
 display:none !important;
 position:fixed;
 top:140px;
 left:0;
 right:0;
 background:white;
 box-shadow:0 4px 12px rgba(0,0,0,0.15);
 z-index:999;
 max-height:0;
 overflow:hidden;
 transition:max-height 0.3s ease;
}

@media (max-width:768px){
 .nav-mobile{
 display:block !important;
 }
 
 .nav-mobile.active{
 max-height:500px;
 }
}

.nav-mobile ul{
 list-style:none;
 padding:0;
 margin:0;
 display:none;
}

.nav-mobile.active ul{
 display:block;
}

.nav-mobile ul li{
 border-bottom:1px solid #f0f0f0;
}

.nav-mobile ul li a{
 display:block;
 padding:15px 20px;
 color:#333;
 text-decoration:none;
 transition:background 0.3s ease;
}

.nav-mobile ul li a:hover{
 background:#f8f9fa;
 color:#00A3E0;
}

@media (max-width:768px){
 .nav-desktop{
 display:none;
 }
 
 .mobile-menu-toggle{
 display:block;
 }
}

@media (min-width:769px){
 .nav-mobile{
 display:none !important;
 }
 
 .mobile-menu-toggle{
 display:none;
 }
}

/* iPad Search Styles */
.device-search-container{
 max-width:700px;
 margin:2rem auto 0;
}

.search-box{
 position:relative;
 display:flex;
 align-items:center;
 background:white;
 border:2px solid #e0e0e0;
 border-radius:50px;
 padding:0.5rem 1.5rem;
 box-shadow:0 2px 10px rgba(0,0,0,0.1);
 transition:all 0.3s ease;
}

.search-box:focus-within{
 border-color:#00A3E0;
 box-shadow:0 4px 20px rgba(76, 175, 80, 0.2);
}

.search-box i.fa-search{
 color:#999;
 margin-right:1rem;
 font-size:1.2rem;
}

.search-box input{
 flex:1;
 border:none;
 outline:none;
 font-size:1rem;
 padding:0.75rem 0;
 background:transparent;
}

.search-box input::placeholder{
 color:#999;
}

.search-box button{
 background:none;
 border:none;
 color:#999;
 cursor:pointer;
 padding:0.5rem;
 margin-left:0.5rem;
 transition:color 0.3s ease;
}

.search-box button:hover{
 color:#333;
}

.search-hint{
 text-align:center;
 color:#666;
 font-size:0.9rem;
 margin-top:1rem;
}

.search-results-info{
 text-align:center;
 padding:1rem;
 margin-bottom:1rem;
 background:#f0f9ff;
 border-radius:8px;
 color:#0066cc;
 font-weight:500;
}

.device-card.hidden{
 display:none !important;
}

.device-card.highlight{
 animation:highlightPulse 0.5s ease;
 border:2px solid #00A3E0;
}

@keyframes highlightPulse{
 0%, 100%{
 transform:scale(1);
 }
 50%{
 transform:scale(1.02);
 }
}

.no-results-message{
 text-align:center;
 padding:3rem 1rem;
 color:#666;
}

.no-results-message i{
 font-size:3rem;
 color:#ddd;
 margin-bottom:1rem;
}

.no-results-message h3{
 margin-bottom:0.5rem;
 color:#333;
}

@media (max-width:768px){
 .search-box input{
 font-size:0.9rem;
 }
 
 .search-hint{
 font-size:0.8rem;
 }
}

/* ===================================
  FOOTER STYLES (Replacing Inline Styles)
  =================================== */

.site-footer{
 background:#1a1a1a;
 color:white;
 padding:2rem 0;
 margin-top:4rem;
}

.footer-container{
 max-width:1200px;
 margin:0 auto;
 padding:0 1rem;
}

.footer-grid{
 display:grid;
 grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
 gap:2rem;
}

.footer-heading{
 color:#00A3E0;
 margin-bottom:1rem;
}

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

.footer-list-item{
 margin-bottom:0.5rem;
}

.footer-link{
 color:white;
 text-decoration:none;
 transition:color 0.3s ease;
}

.footer-link:hover{
 color:#00A3E0;
}

.footer-text{
 margin-bottom:0.5rem;
}

.footer-hours{
 margin-bottom:0.3rem;
 font-size:0.9rem;
}

.footer-bottom{
 text-align:center;
 margin-top:2rem;
 padding-top:2rem;
 border-top:1px solid #333;
}


/* ===================================
  UTILITY CLASSES
  =================================== */

.white-link{
 color:white;
 text-decoration:none;
}

.white-link:hover{
 color:#00A3E0;
}

.white-text{
 color:white;
}

.mb-half{
 margin-bottom:0.5rem;
}

.mb-1{
 margin-bottom:1rem;
}

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

.hidden{
 display:none;
}

.bg-primary{
 background:#00A3E0;
}

.text-white{
 color:white;
}

.bg-danger{
 background:#e74c3c;
}


/* ==========================================================================
  Form Styling
  ========================================================================== */

.form-group{
 margin-bottom:var(--spacing-md);
}

.form-group label{
 display:block;
 font-weight:600;
 margin-bottom:var(--spacing-xs);
 color:var(--primary-black);
}

.form-control{
 width:100%;
 padding:var(--spacing-sm);
 border:2px solid var(--border-grey);
 border-radius:var(--radius-sm);
 font-size:1rem;
 font-family:"Open Sans", sans-serif;
 transition:border-color 0.3s ease, box-shadow 0.3s ease;
}

.form-control:focus{
 outline:none;
 border-color:var(--primary-blue);
 box-shadow:0 0 0 3px rgba(0, 163, 224, 0.1);
}

.form-control::placeholder{
 color:#999;
}

select.form-control{
 cursor:pointer;
 background-image:url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3e%3cpolyline points="6 9 12 15 18 9"%3e%3c/polyline%3e%3c/svg%3e");
 background-repeat:no-repeat;
 background-position:right var(--spacing-sm) center;
 background-size:20px;
 padding-right:40px;
 appearance:none;
}

.form-help-text{
 color:var(--text-light);
 font-size:0.85rem;
 display:block;
 margin-top:var(--spacing-xs);
}

.form-help-text i{
 margin-right:var(--spacing-xs);
}

.color-selection-group{
 display:none;
 margin-bottom:var(--spacing-md);
 padding:var(--spacing-md);
 background:#e3f2fd;
 border-radius:var(--radius-md);
 border:2px solid var(--primary-blue);
}

.color-selection-group.show{
 display:block;
}

.booking-form{
 background:white;
 padding:var(--spacing-lg);
 border-radius:var(--radius-md);
 box-shadow:var(--shadow-md);
}

.repair-summary{
 background:var(--light-grey);
 padding:var(--spacing-lg);
 border-radius:var(--radius-md);
 margin-bottom:var(--spacing-lg);
}

.repair-summary h3{
 text-align:center;
 margin-bottom:var(--spacing-md);
 color:var(--primary-black);
}

.repair-summary-grid{
 display:grid;
 grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
 gap:var(--spacing-md);
}

.repair-summary-item{
 text-align:center;
 padding:var(--spacing-sm);
 background:white;
 border-radius:var(--radius-sm);
}

.repair-summary-item strong{
 display:block;
 margin-bottom:var(--spacing-xs);
 color:var(--text-light);
}

.repair-summary-item span{
 color:var(--primary-black);
 font-weight:600;
}

.required-field{
 color:var(--primary-red);
}

.form-row{
 display:grid;
 grid-template-columns:1fr 1fr;
 gap:var(--spacing-md);
}

.form-row-single{
 display:block;
}

/* Payment Methods Styling */
.payment-methods {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 1rem;
    flex-wrap: wrap;
}

.payment-text {
    margin: 0 1rem 0 0;
    font-size: 0.9rem;
    color: #666;
}

.payment-logo {
    height: 24px;
    margin: 0 0.5rem;
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.payment-logo:hover {
    opacity: 1;
}

/* Mobile responsive for payment logos */
@media (max-width: 768px) {
    .payment-methods {
        margin-top: 0.5rem;
    }
    
    .payment-text {
        display: block;
        margin-bottom: 0.5rem;
        text-align: center;
    }
    
    .payment-logo {
        height: 20px;
        margin: 0 0.3rem;
    }
}