@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.13.1/font/bootstrap-icons.min.css");
*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:'Poppins',sans-serif;
}

body{
background:#0B0F1A;
color:#fff;
overflow-x:hidden;
}

html{
scroll-behavior:smooth;
}

a{
text-decoration:none;
}

/* ================= NAVBAR ================= */

.navbar {
    padding: 20px 0;
    background:rgba(0,0,0,0.2);
    backdrop-filter: blur(10px);
}

.logo{
width: 15%;
}
.logo img{
width: 100%;
}
.footerlogo{
width: 40%;
}
.footerlogo img{
width: 100%;
}
.logo span{
color:#ff2b2b;
}

.navbar-nav .nav-link{
color:#fff;
margin-left:20px;
font-weight:500;
transition:0.3s;
}

.navbar-nav .nav-link:hover{
color:#ff0001;
}

/* ================= HERO ================= */

.hero{
padding:80px 0;
background: url('/WebAssets/images/heroimgback.png');
background-position: center;
    background-size: 100%;
}

.hero-title{
font-size:60px;
font-weight:800;
line-height:1.2;
margin-bottom:25px;
}

.hero-title span{
color:#ff0001;
}

.hero-text{
color:#c7c7c7;
line-height:2;
margin-bottom:35px;
}

.store-btn{
padding:14px 30px;
border:1px solid rgba(255,255,255,0.2);
border-radius:14px;
color:#fff;
display:inline-flex;
align-items:center;
gap:10px;
margin-right:15px;
transition:0.3s;
}

.store-btn:hover{
background:#ff0001;
border-color:#ff0001;
color:#fff;
}

.hero-img{
width:84%;

object-fit:cover;

}

/* ================= FEATURES ================= */
.featurs{
    padding:80px 0;
}
.feature-box{
padding:35px;
border-radius:24px;

 box-shadow: inset 0px 6px 57px 0px rgb(255 255 255 / 50%);
border:1px solid rgba(255,255,255,0.08);
height:100%;
transition:0.3s;
}

.feature-box:hover{
transform:translateY(-8px);
box-shadow:0 0 25px rgba(255,0,0,0.2);
}

.feature-icon{
width:65px;
height:65px;
border-radius:50%;
background:#160000;
border:2px solid #ff2b2b;
display:flex;
align-items:center;
justify-content:center;
font-size:24px;
margin-bottom:20px;
color:#ff2b2b;
}

.feature-box h4{
font-weight:700;
margin-bottom:15px;
}

.feature-box p{
color:#c7c7c7;
line-height:1.8;
margin-bottom:0;
}

/* ================= ABOUT ================= */

.about{
padding:120px 0;
}

.mobile-img{
max-width:244px;
width:100%;
}

.section-title{
font-size:36px;
font-weight:800;
margin-bottom:25px;
}

.section-text{
font-size:17px;
line-height:2;
color:#cfcfcf;
}

/* ================= SERVICES ================= */

.services{
padding-bottom:120px;
}

.service-card{
background: url(/WebAssets/images/Servicesicon/sercicesbg.png);
    border-radius: 30px;
    overflow: hidden;
    transition: 0.4s;
    background-size: contain;
    background-position: bottom;
    height: 71vh;
    background-repeat: no-repeat;
}

.service-card:hover{
transform:translateY(-10px);
/* box-shadow:0 0 40px rgba(255,0,0,0.3); */
}

.service-card img{
width:20%;

object-fit:cover;
}

.service-content{
padding:30px;
}
.serviceimg{
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 20px;
}
.service-content h3{
font-size:30px;
font-weight:700;
margin-bottom:15px;
}

.service-content p{
color:#d5d5d5;
line-height:1.8;
padding: 0 35px;
margin-top: 30px;
}

.arrow-btn{
display: flex;
justify-content: end;
padding: 0 20px;
}
.arrow-btn img{
    width: 40%;
}

/* ================= CONTACT SECTION ================= */

.contact-section{
  padding:20px 0;
}

/* ================= LEFT CARD ================= */

.contact-form-card{
  background:
  linear-gradient(180deg,#0a0000,#000);
  border:1px solid rgba(255,0,0,0.45);
  border-radius:35px;
  padding:45px;
  position:relative;
  overflow:hidden;

  box-shadow:
  0 0 25px rgba(255,0,0,0.35),
  inset 0 0 35px rgba(255,0,0,0.08);
}

.contact-form-card::before{
  content:'';
  position:absolute;
  top:-100px;
  left:-100px;
  width:300px;
  height:300px;
  background:radial-gradient(circle,rgba(255,0,0,0.2),transparent);
}

.form-title{
  font-size:30px;
  font-weight:600;
  color:#fff;
  margin-bottom:15px;
}

.form-subtitle{
  color:#d0d0d0;
  font-size:15px;
  margin-bottom:45px;
}

/* ================= LABEL ================= */

.form-label{
  color:#fff;
      font-size: 16px;
    margin-bottom: 9px;
}

/* ================= INPUT ================= */

.custom-input{
  position:relative;
}

.custom-input i{
  position:absolute;
  left:24px;
  top:50%;
  transform:translateY(-50%);
  color:#ff0000;
  font-size:24px;
  z-index:2;
}

.textarea-box i{
  top:18px;
  transform:none;
}

.form-control{
  background:rgba(0,0,0,0.85);
 border: 1px solid rgba(255, 0, 0, 0.75);
    border-radius: 18px;
    height: 55px;
    color: #fff;
    font-size: 15px;
    padding-left: 69px;
}

textarea.form-control{
  height: 100px;
    padding-top: 14px;
  resize:none;
}

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

.form-control:focus{
  background:#000;
  color:#fff;
  border-color:#ff1b1b;
  box-shadow:
  0 0 18px rgba(255,0,0,0.35);
}

/* ================= BUTTON ================= */

.send-btn{
  width:100%;
  height:45px;
  border:none;
  border-radius:18px;

  background:
  linear-gradient(180deg,#340000,#a40000);

  color:#fff;
  font-size:22px;
  font-weight:500;

  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;

  margin-top:10px;

  box-shadow:
  0 0 25px rgba(255,0,0,0.45),
  inset 0 0 15px rgba(255,0,0,0.15);

  transition:0.4s;
}

.send-btn:hover{
  transform:translateY(-2px);
}

/* ================= RIGHT CARD ================= */

.help-card{
  position:relative;
  overflow:hidden;

  background:
  url('/WebAssets/images/Contactbg.png');

 

  border-radius:35px;

  padding:85px;


  background-position: top;
    background-size: contain;
    background-repeat: no-repeat;
}

/* .help-card::before{
  content:'';
  position:absolute;
  top:-120px;
  right:-120px;
  width:320px;
  height:320px;
  background:radial-gradient(circle,rgba(255,0,0,0.2),transparent);
} */

/* ================= TEXT ================= */

.help-content{
  position:relative;
  z-index:3;
  max-width:430px;
}

.help-title{
  color:#fff;
  font-size:36px;
  font-weight:700;
  line-height:1.05;
  margin-bottom:30px;
}

.help-title span{
  display:block;
  color:#ff1b1b;
  margin-top:10px;
}

.help-text{
  color:#d0d0d0;
  font-size:15px;
  line-height:1.8;
}

/* ================= IMAGE ================= */

.headphone-image{
  position:absolute;
  right:-20px;
  bottom:-10px;
  height:100%;
  max-height:560px;
  z-index:1;

  filter:
  drop-shadow(0 0 30px rgba(255,0,0,0.45));
}

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

@media(max-width:1400px){

  .form-title{
    font-size:48px;
  }

  .help-title{
    font-size:58px;
  }

}

@media(max-width:991px){

  .help-card{
    min-height:650px;
    margin-top:20px;
  }

  .headphone-image{
    right:50%;
    transform:translateX(50%);
    bottom:0;
    max-height:320px;
  }

}

@media(max-width:767px){

  .contact-form-card,
  .help-card{
    padding:28px 22px;
    border-radius:22px;
  }

  .form-title{
    font-size:32px;
  }

  .form-subtitle{
    font-size:15px;
    margin-bottom:25px;
  }

  .form-label{
    font-size:17px;
  }

  .form-control{
    height:60px;
    font-size:16px;
    padding-left:58px;
    border-radius:14px;
  }

  textarea.form-control{
    height:120px;
  }

  .custom-input i{
    font-size:18px;
    left:18px;
  }

  .send-btn{
    height:62px;
    font-size:20px;
    border-radius:14px;
  }

  .help-title{
    font-size:23px;
    margin-bottom: 0px;
  }

  .help-text{
    font-size:14px;
  }

  .help-card{
    min-height:auto;
  }

  .headphone-image{
    max-height:230px;
  }

}

/* ================= FOOTER ================= */

footer{
padding:80px 0 20px;
border-top:1px solid rgba(255,255,255,0.08);
    background: #0F172A;
}

.footer-title{
font-size:22px;
font-weight:700;
margin-bottom:20px;
}

.footer-links a{
display:block;
color:#d0d0d0;
margin-bottom:12px;
transition:0.3s;
}

.footer-links a:hover{
color:#ff0001;
}

.copyright{
border-top:1px solid rgba(255,255,255,0.08);
margin-top:40px;
padding-top:20px;
text-align:center;
color:#bdbdbd;
}

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

@media(max-width:991px){

.hero{
text-align:center;
padding-top:40px;
}

.hero-title{
font-size:42px;
}

.hero-img{
margin-top:50px;
height:400px;
}

.about{
text-align:center;
}

.mobile-img{
margin-bottom:40px;
}

.section-title{
font-size:38px;
}

}

@media(max-width:767px){

.hero-title{
font-size:34px;
}

.section-title{
font-size:30px;
}

.hero-img{
height:300px;
}

.service-content h3{
font-size:24px;
}

.store-btn{
margin-bottom:15px;
}

}
.contactinfo{
    background-image: url('/WebAssets/images/contactinfobg.png');
    background-position: center;
    height: 243px;
    background-size: cover;
    padding: 20px;
    border-radius: 10px;
}
.contactinfo-icon{
    text-align: center;
}
.contct-icon{
    width: 40%;

}
.contact-content p{
    font-size: 14px;
    text-align: center;
}
.contactinfomain{
    padding: 22px;
}
.footer-links .bi{
    font-size: 25px;
}
/* ================= DROPDOWN ================= */
.dropdown a{
    color: #fff;
    margin-left: 20px;
    font-weight: 500;
    transition: 0.3s;
}
.dropdown-menu-custom{
  position:absolute;
  top:180%;
  left:0;

  width:290px;

  background:
  linear-gradient(180deg,#0f0000,#000);

  border:1px solid rgba(255,0,0,0.35);

  border-radius:20px;

  padding:18px 0;

  list-style:none;

  opacity:0;
  visibility:hidden;

  transform:translateY(15px);

  transition:0.4s;

  box-shadow:
  0 0 30px rgba(255,0,0,0.25);

  z-index:100;
}

/* SHOW DROPDOWN ON HOVER */

.dropdown:hover .dropdown-menu-custom{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}

/* ================= DROPDOWN ITEMS ================= */

.dropdown-menu-custom li{
  width:100%;
}

.dropdown-menu-custom li a{
  padding:16px 24px;

  color:#fff;
  font-size:17px;

  display:flex;
  align-items:center;
  gap:14px;

  transition:0.3s;
}

.dropdown-menu-custom li a i{
  color:#ff1b1b;
  width:20px;
}

.dropdown-menu-custom li a:hover{
  background:rgba(255,0,0,0.12);
  padding-left:32px;
  color:#ff1b1b;
}

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

@media(max-width:768px){

  .container{
    /* flex-direction:column; */
    gap:20px;
  }

  .nav-links{
    gap:22px;
    flex-wrap:wrap;
    justify-content:center;
  }

  .dropdown-menu-custom{
    left:50%;
    transform:translateX(-50%) translateY(15px);
    width:260px;
  }

  .dropdown:hover .dropdown-menu-custom{
    transform:translateX(-50%) translateY(0);
  }

}

    .navbar-expand-lg .navbar-nav {
        flex-direction: row;
        align-items: center;
    }
@media(max-width:900px){
    .navbar-expand-lg .navbar-nav {
   
    flex-direction: column;
}
    .logo {
        width: 28%;
    }
.hero-img

 {
    width: 100%;
    object-fit: cover;
}
}
/* ================= NESTED DROPDOWN ================= */

.nested-dropdown{
  position:relative;
}

/* ================= NESTED MENU ================= */

.nested-menu{
  position:absolute;

  top:0;
  left:46%;

  width:240px;

  background:
  linear-gradient(180deg,#0f0000,#000);

  border:1px solid rgba(255,0,0,0.35);

  border-radius:18px;

  padding:14px 0;

  list-style:none;

  opacity:0;
  visibility:hidden;

  transform:translateX(15px);

  transition:0.35s;

  box-shadow:
  0 0 30px rgba(255,0,0,0.25);
}

/* SHOW NESTED MENU */

.nested-dropdown:hover .nested-menu{
  opacity:1;
  visibility:visible;
  transform:translateX(0);
}

/* NESTED LINKS */

.nested-menu li a{
  padding:16px 24px;

  color:#fff !important;

  font-size:16px;

  transition:0.3s;
}

.nested-menu li a:hover{
  background:rgba(255,0,0,0.12);
  padding-left:32px;
  color:#ff1b1b !important;
}

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

@media(max-width:768px){

  .nested-menu{
    position:static;

    width:100%;

    margin-top:10px;

    opacity:1;
    visibility:visible;

    transform:none;

    display:none;
  }

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

}
.eleimg {
    width: 91%;
}
.neologo{
        width: 7%;
    margin-left: 8px;
}
.serviceimg1 {
    width: 42%;
}
.serviceimg2 {
    width: 57%;
}
.servicemainimg1{
    text-align: center;
}

.add-to-cart {
    margin-top: 10px;
    background: none;
    border: 1px solid #ff0001
}

    .add-to-cart:hover {
        margin-top: 10px;
        background: #ff0001;
        border: 1px solid #ff0001;
        color: #fff;
    }

.bi-cart-check {
    color: #fff;
}
.ferrylink{
    display:none !important;
}
.footer-title{
    color:#fff!important
}
#timerLabel{
    color:#ff0001;
}