*{margin: 0; padding: 0; text-decoration: none; box-sizing: border-box; scroll-behavior: smooth;}

html{scroll-behavior: smooth;}

body{margin: 0; min-height: 100vh; background-blend-mode: screen; background: radial-gradient(circle at 30% 10%, rgba(255, 255, 255, 0.12), transparent 40%), 
radial-gradient(circle at 70% 30%, rgba(255, 255, 255, 0.05), transparent 50%), linear-gradient(160deg, #000, #0f0f0f, #000); overflow-anchor: none; overflow-x: hidden;}

html, body{width: 100%; max-width: 100%;} /*Safety Net for Responsive CSS*/

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

#about, #portfolio, #services, #reviews, #contact{scroll-margin-top: 8rem;}

.nav{position: sticky; top: 0; background: radial-gradient(circle at 30% 0%, rgba(255, 255, 255, 0.08), transparent 45%), radial-gradient(circle at 70% 20%, rgba(255, 255, 255, 0.04), transparent 55%),
linear-gradient(160deg, #050505, #0d0d0d, #000); border-bottom: 1px solid var(--stroke); height: auto; padding: 0.8rem 1.5rem; z-index: 100;}

.nav-inner{max-width: var(--maxw); margin: auto; display: flex; align-items: center; justify-content: space-between;}

.logo-img{height:115px;}

.menu {display: flex; align-items: center; gap: 50px; list-style: none; text-transform: capitalize;}

.menu a{font-family: 'Orbitron', sans-serif; color: #0d00ff; font-size: 1.1rem; padding: 0.5rem 0.75rem; font-size: clamp (0.9rem, 0.9vw, 1.05rem); font-weight: 500; transition: 0.2s; border-radius: 15px;}

.menu a:hover{cursor: pointer; color: #fff; background-color: #0d00ff; border-radius: 15px; transition: 0.3s ease;}

.menu-toggle{display: none;}

.hamburger{display: none; width: clamp(40px, 6vw, 45px); height: clamp(40px, 6vw, 45px); align-items: center; justify-content: center; border-radius: 12px; 
background: radial-gradient(circle at 30% 0%, rgba(255, 255, 255, 0.08), transparent 45%), radial-gradient(circle at 70% 20%, rgba(255, 255, 255, 0.04), transparent 55%),
linear-gradient(160deg, #050505, #0d0d0d, #000); cursor: pointer;}

.hamburger span,
.hamburger span::before,
.hamburger span::after{display: block; width: 18px; height: 2.5px; background: #fff; position: relative; content:""; transition: transform 0.25 ease, top 0.25 ease, 0.25s ease; transform-origin: center;}

.hamburger span::before{position: absolute; top: -6px;}

.hamburger span::after{position: absolute; top: 6px;}

/*REPONSIVE NAV BAR*/
@media(max-width:858px) {
    .menu{position: absolute;top: 100%; left: 0; right: 0; z-index: 9998; flex-direction: column; align-items: center; gap: 5rem; background: #fff; max-height: 0; padding: 0;
        pointer-events: none; overflow: hidden; transition: max-height 0.4s ease, opacity 0.4s ease, padding 0.4s ease;}
    
    .menu li{display: flex; align-items: center; justify-content: center; width: 100%;}
    
    .menu li a{padding: 10px 10px;}
    
    .menu-toggle:checked~.menu{max-height: 100vh; height: 100vh; padding: 1.5rem 0; opacity: 1; pointer-events: auto;}
    
    .hamburger{display: flex;}
    
    .menu-toggle:checked~.hamburger span{background: transparent;}
    
    .menu-toggle:checked~.hamburger span::before{top: 0; transform: rotate(45deg);}
    
    .menu-toggle:checked~.hamburger span::after{top: 0; transform: rotate(-45deg);}
}

@media (max-width: 760px){

    .logo-img{height: 90px;}

}

@media (max-width: 345px){
    html, body{overflow-x: hidden;}

    .nav{padding-left: 0.5rem; padding-right: 0.5rem;}

    .logo-img{height: 70px;}

}

/*BODY */

.hero{position: relative; width: 100%; min-height: calc(100vh - 120px); align-items: center; display: flex; justify-content: space-between; padding: 30px 8% 60px; gap: 60px; overflow: hidden;}

/*Left Image*/
.hero-image{flex: 1; z-index: 1; display: flex; justify-content: center; align-items: center;}

.hero-image img{width: 100%; max-width: 650px; height: auto; object-fit:cover; border-radius: 24px; box-shadow: 0 20px 60px rgba(0,0,0,.45); filter: brightness(0.9); -webkit-mask-image: linear-gradient(to right, black 70%, transparent 100%); mask-image: linear-gradient(to right, black 70%, transparent 100%);}

/*Right Side*/
.hero-content{flex: 1; z-index: 2; max-width: 600px;}

.tagline{ font-family: 'Orbitron', sans-serif; color:#0d00ff; font-weight: 700; margin-bottom: 20px; font-size: clamp(1.2rem, 2vw, 2.5rem); text-transform: uppercase; letter-spacing: 2px;}

.hero-content h1{font-family: 'Manrope', sans-serif; margin-top: 0; color: #FFF; font-size: clamp(1.2rem, 5vw, 1.7rem); line-height: 1.3; margin-bottom: 30px; font-weight: 800;}

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

.hero-btn{font-family: 'Orbitron', sans-serif; display: inline-flex; background: #0d00ff; color: #FFF; padding: 16px 34px; border-radius: 10px; text-decoration: none; font-weight: 700; 
transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease; align-items: center; justify-content: center; box-shadow: 0 10px 30px rgba(13, 0, 255, 0.35);}

.hero-btn:hover{background: #FFF; color: #0d00ff; transform: translateY(-3px); box-shadow: 0 14px 35px rgba(255, 255, 255, 0.15);}

/*RESPONSIVE*/
@media (max-width: 900px) {
    .hero{flex-direction: column; text-align: center; gap:30px; padding: 40px 6% 70px;}

    .hero-image img{max-width: 500px; -webkit-mask-image: none; mask-image: none;}

    .hero-content{display: flex; flex-direction: column; align-items: center;}
}

@media (max-width:600px){

    .nav{padding: 0.6rem 1rem;}

    .logo-img{height: 65px;}

    .hero{padding: 20px 24px 60px; gap: 30px;}

    .hero-content h1{line-height: 1.2;}

    .hero-buttons{flex-direction: column; align-items: center; gap: 14px; width: 100%;}

    .hero-btn{width: 100%; max-width: 260px; padding: 14px 20px; margin: 0;}

    .hero-image img{max-width: 100%; border-radius: 18px;}
}

@media (max-width: 420px){

    .nav{padding: 0.5rem 0.8rem;}

    .logo-img{height: 55px}

    .hero{padding: 10px 18px 50px;}

    .hero-content h1{font-size: 1rem;}

    .tagline{font-size: 1.2rem;}

    .hero-btn{max-width: 220px; font-size: 0.9rem; padding: 14px 20px; margin: 0;}

    .menu{gap: 3rem;}
}


/*ABOUT US*/
.about .text-box{flex: 1 1 320px; min-width: 250px; display: flex; flex-direction: column; gap: 0.75rem; text-align: center; align-items: center; margin-bottom: 4rem;}

.text-box h1{font-family: 'Orbitron', sans-serif; text-align: center; color: #0d00ff; margin: 0; font-size: clamp(1.5rem, 2.2vw, 2rem); line-height: 1.1;}

.text-box p{font-family: 'Manrope', sans-serif; font-size: clamp(1rem, 1.6vw, 1.2rem); color: #FFF; padding: 0 1rem; margin-top:20px; max-width: 850px; width: 100%; text-align: center; line-height: 1.5;}

/*RESPONSIVE ABOUT US*/
@media (max-width:768px){
   
    .about .text-box{align-items: center;}

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

}

/* Extra Small Screens: 460px and below */
@media (max-width: 460px) {

    .about .text-box {flex: 1 1 auto; min-width: 0; padding: 0 0.5rem; gap: 0.5rem;}

    .text-box h1 {font-size: clamp(1.3rem, 5vw, 1.8rem); line-height: 1.2;}

    .text-box p {font-size: clamp(0.9rem, 3.5vw, 1.1rem); line-height: 1.4; padding: 0 0.5rem;}
}

a:focus, button:focus, .text-box:focus{outline: 3px solid #005fcc; outline-offset: 3px;}

/*Services*/
.services {padding: 5rem 1.5rem; color: white; margin-top: 3rem; margin-bottom: 4rem;}

.services-title {font-family: 'Orbitron', sans-serif; text-align: center;  font-size: clamp(1.5rem, 2.2vw, 2rem); margin-bottom: 3rem; color: #0d00ff;}

.services-grid {display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 2rem; max-width: 100%; height: 100%; margin: 0 auto;}

.service-card {background: #1b1b1b; padding: 2rem; border-radius: 18px; display: flex; flex-direction: column; justify-content: space-between; transition: transform 0.3s ease;}

.service-card:hover {transform: translateY(-5px); outline-color: #0d00ff;}

.service-name {font-family: 'Orbitron', sans-serif; font-size: 2rem; margin-bottom: 1rem;}

.price {font-family: 'Orbitron', sans-serif; font-size: 2rem; font-weight: bold; color: #0d00ff; margin-bottom: 1.5rem;}

.services-list {font-family: 'Manrope', sans-serif; list-style: none; padding: 0; margin-bottom: 2rem;}

.services-list li {display: flex; align-items: center; gap: 10px; margin-bottom: 1rem;}

.services-list ion-icon {color: #0d00ff; font-size: 1.2rem;}

.service-btn {font-family: 'Orbitron', sans-serif; display: inline-block; text-align: center; background: #0d00ff; color: white; padding: 0.9rem 1.2rem; border-radius: 10px; text-decoration: none; font-weight: 600; transition: background 0.3s ease;}

.service-btn:hover {background: #fff; color: #0d00ff; transform: translateY(-3px); box-shadow: 0 14px 35px rgba(255, 255, 255, 0.15);}

@media (max-width: 480px) {

    .services {padding: 4rem 1rem;}

    .service-card {padding: 1.5rem;}

    .service-name, .price {font-size: 1.75rem;}

    .services-grid {grid-template-columns: 1fr;}

}

/*Portfolio Swiper*/
.portfolio-header{font-family: 'Orbitron', sans-serif; text-align: center;  font-size: clamp(1.5rem, 2.2vw, 2rem); margin-bottom: 3rem; color: #0d00ff;}


/* MAIN SLIDER */

.slider-container{position:relative; width:100%; max-width:1200px; overflow:hidden; border-radius:20px; box-shadow:0 15px 40px rgba(0,0,0,.45); margin: 0 auto;}

/* SLIDES WRAPPER */

.portfolio-slides{display:flex; transition:transform .5s ease;}

/* EACH SLIDE */

.slides2{min-width:100%; display:grid; grid-template-columns:1fr 1fr; gap:10px; background:#000; padding:10px;}

/* IMAGES */

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

/* NAVIGATION BUTTONS */

.nav-btn{position:absolute; top:50%; transform:translateY(-50%); width:60px; height:60px; border-radius:50%; background:rgba(255,255,255,.15);
backdrop-filter:blur(10px); display:flex; justify-content:center; align-items:center; cursor:pointer; z-index:10; transition:.3s;}

.nav-btn:hover{background:#0d00ff;}

.nav-btn:hover ion-icon{color:#fff;}

.nav-btn ion-icon{font-size:34px; color:#0d00ff; transition:.3s;}

.portfolio-prev{left:15px;}

.portfolio-next{right:15px;}

/* TABLET */

@media(max-width:900px){

    .slides2 img{height:350px;}
}

/* MOBILE */

@media(max-width:768px){

    .slides2{grid-template-columns:1fr;}

    .slides2 img{height:200px;}

    .nav-btn{width:48px; height:48px;}

    .nav-btn ion-icon{font-size:26px;}
}

/* SMALL MOBILE */

@media(max-width:480px){

    .slides2{padding:6px; gap:6px; }

    .slides2 img{height:180px; border-radius:8px;}

    .nav-btn{width:42px; height:42px;}

    .nav-btn ion-icon{font-size:22px;}
}

/* Swiper Review*/
.reviews-slider, h3, p{font-family: "Manrope", sans-serif;}

.reviews-container{ display: flex; align-items: center; margin-top: 3rem; margin-bottom: 4rem;}

.reviews-header{font-family: 'Orbitron', sans-serif; text-align: center;  font-size: clamp(1.5rem, 2.2vw, 2rem); margin-bottom: 3rem; color: #0d00ff;}

.reviews-container .reviews{max-width: 1200px; padding: 20px; overflow: hidden; margin: 0 auto;}

.reviews-slider{display: flex; align-items: center; gap: 20px; overflow-x: scroll; scroll-snap-type: x mandatory;}

.reviews-slider::-webkit-scrollbar{height: 0;}

.slide{scroll-snap-align: center; padding: 20px; background-color: #fff; border-radius: 5px;
box-shadow: var(--box-shadow); flex: 0 0 85%; max-width: 320px; user-select: none; height: 420px; display: flex; flex-direction: column;}

.stars{font-size: 16px; color:#0d00ff;}

.title{font-size: 20px; margin: 10px 0; color:#0d00ff; line-height: 1.6; text-decoration: lowercase;}

.user{margin-top: 20px; flex-shrink: 0; display:flex; align-items: center; gap: 15px;}

.user h3{font-size: clamp(13px, 3.5vw, 18px); margin-bottom: 5px; line-height: 1.2; overflow-wrap: anywhere; word-break: break-word;}

.slide p{flex: 1; overflow-y: auto; padding-right: 8px; margin-bottom: 0;}

.user img{width:80px; height: 80px; border-radius: 50%; object-fit: cover;}

.reviews-container h2{font-size: clamp(1.5rem, 5vw, 2rem); text-align: center; color: #0d00ff; margin-bottom: 4%;}

.reviews-container .reviews .controls{display: flex; justify-content: center; margin-top: 20px; gap: 20px; font-size: 30px; cursor: pointer; color:#0d00ff;}
/*Controls for Ion icons so that they can function for slider*/

.reviews-container .reviews .controls :hover{color:#fff;}

.google-reviews-link{text-align: center; margin-top: 1rem;}

.google-reviews-link a{display: inline-block; padding: 12px 25px; background-color: #0d00ff; color: #fff; text-decoration: none; border-radius: 6px; font-weight: 600; transition: 0.3s ease; font-family: 'Manrope', sans-serif;}

.google-reviews-link a:hover{background-color: #00bfff;}

@media (max-width:850px){
    .reviews-container .reviews{max-width: 800px; padding: 20px; overflow: hidden; margin: 0 auto;}
}

@media (max-width:450px){
    .reviews-container .reviews{max-width: 400px; padding: 20px; overflow: hidden; margin: 0 auto;}

    .user img{width:80px; height:80px; object-fit: cover; border-radius: 50%;}
    
    .title{font-size: 15px; margin: 10px 0;}

    .slide{flex: 0 0 85%; max-width: 85%; height: 450px;}

    .slide p{font-size: 15px;}
}

@media (max-width:310px){

    .reviews-slider {scrollbar-color: #00c8ff #eee; scrollbar-width: thin;}
}

@media (max-width: 260px){
  .user {flex-direction: column; align-items: flex-start; gap: 4px;}

  .slide{height: 490px;}
}