/*Importing Google fonts */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
  }

*{
    margin:0;
    padding:0;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;
}

:root {
  /* Colors */
  --white-color: #ff0000;
  --dark-color: #252525
  --primary-color: #252525
  --secondary-color: #000000;
  --red-color: ff0000
  --medium-red-color: #7d1211

  /* Font size */
  --font-size-s: 0.9rem;
  --font-size-n: 1rem;
  --font-size-m: 1.12rem;
  --font-size-1: 1.5rem;
  --font-size-xl: 2rem;
  --font-size-xxl: 2.3rem;

  /* Font weight */
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* Border radius */
  --border-radius-s: 8px;
  --border-radius-m: 30px;
  --border-radius-circle: 50%;

  /* Site max size */
  --size-max-width: 1300px;
}

/* Styling for whole site*/
ul {
  list-style: none;
}

a {
  text-decoration: none;
}



button{
  cursor: pointer;
  border: none;
  background: none;
}

img {
  width: 50%;
  height: 50%
}

.section-content{
  margin:0 auto;
  padding: 0 20px;
  max-width: var(--site-max-width);
}

/* Navbar styling */



section{
     padding:2rem 9%;
}

.heading{
    text-align: center;
    font-size: 6rem;
    color:#333
    padding:1rem;
    margin:2rem 0;
    background:rgba(255, 51, 153, .05);
}

.heading span{
     color:var(--pink);
}

.btn{
    display: inline-block;
    margin-top: 1rem;
    border-radius: 5rem;
    background:#333;
    color:#fff;
    padding:.9rem 3.5rem,
    cursor: pointer;
    font-size: 1.7rem;
}

.btn:hover{
    background:var(--pink);
}

header{
    position: fixed;
    top:0; left:0; right:0;
    background:#fff;
    padding:2rem 9%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 1000;
    box-shadow: 0  .5rem 1rem rgba(0,0,0,.1);
}

header  .logo{
     font-size: 3rem;
     color:#333;
     font-weight: bolder;
  }

header.logo span{
    color:var(--pink);
}

header .navbar a{
    font-size: 2rem;
    padding:0 1.5rem;
    color:#666;
}

header .navbar a:hover{
    color:var(--pink);
}

header .icons a{
    font-size: 2.5rem;
    color:#333;
    margin-left: 1.5rem;
}

header .icons a:hover{
    color:var(--pink);
}

header #toggler{
    display: none;
}

header .fa-bars{
    front-size: 3rem;
    color:#333;
    border-radius: .5rem,
    padding:.5rem 1.5rem;
    cursor: pointer;
    border:.1rem solid rgba(0,0,0,.3);
    display: none;

}

section{
    display: flex;
    align-items: center;
    min-height: 100vh;
    background-image: url("tc8.jpg");
    background-size: cover;
    background-position: center;
}

#menu{
    width: 100%;
    height: 40px;
    background-color: red;
    padding-top: 12px;
}

#menu a{
    color:#000000;
    font-family: Helvetica, sans-serif;
    font-size: 20px;
    text-decoration: none;
    font-weight: 800;

    padding-left: 10px;
    padding-right: 20px;

}

#menu a:hover{
    color: #ff0000;
}



/* Hero section styling */
.hero-section {
  min-height: 100vh;
  background: var(--primary-color);
}

.hero-section .section-content {
  display: flex;
  align-items:center;
  min-height: 100vh;
  color: var( --white-color);
  justify-content: space-between;
}

.hero-section .hero-details .title {
  font-size: var(--font-size-xxl);
  color: var(--dark-color);
}

.hero-section .hero-details .subtitles {
  margin-top: 8px;
  max-width: 70%;
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
}

.hero-section .hero-details .description {
  max-width: 70%;
  margin: 24px 0 40px;
  font-size: var(--font-size-m);
}

.hero-section .hero-details .button {
  display: flex;
  gap: 23px;
}

.hero-section .hero-details .button {
  padding: 10px 26px;
  border: 2px solid transparent;
  color: var(--dark-color);
  border-radius: var(--border-radius-m);
  background: var(--red-color);
  font-weight: var(--font-weight-medium);
  transition: 0.3s ease;
}

.hero-section .hero-details .button:hover,
.hero-section .hero-details .contact-us {
  color: var(--white-color);
  border-color: var(--red-color);
  background: transparent;
}

.hero-section .hero-details .contact-us:hover {
  color: var(--primary-color);
  border-color: var(--secondary-color);
  background: var(--secondary-color);
}

.hero-section .hero-image-wrapper {
  max-width: 500px;
  margin-right: 30px;
}



section{
    display: flex;
    align-items: center;
    min-height: 100vh;
    background-image: url("");
    background-size: cover;
    background-position: center;
}


.home .content{
    max-width: 50rem;
}

.home .content h1{
    font-size: 8.0rem;
    color:#ff0000;
}

.home .content h3{
     font-size: 6rem;
     color:#333;
}

.home .content span{
     font-size: 3.5rem;
     color:var(--red);
     padding:1rem 0;
     line-height: 1.5;
}

.home .content span{
     font-size: 6.0rem;
     color:#999;
     padding:1rem 0;
     line-height: 1.5;
   }



.about .row{
     display: flex;
     align-items: center;
     gap:2rem;
     flex-wrap: wrap;
     padding:2rem 0;
     padding-bottom: 3rem;
}

.about .row .video-container{
    flex:1 1 40rem;
    position: relative;
}

.about .row .video-container video{
    width:50%;
    border:1.5rem solid #fff;
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.1);
    height: 100%;
    object-fit: cover;
}

.about .row .video-container h3{
     position: relative;
     top:50%; transform: translateY(-50%);
     font-size: 2rem;
     background:#ff0000;
     width:100%;
     padding:1 rem 2rem;
     text-align: left;
}

.about .row .content{
    flex:1 1 40rem;
}


.about .row .content h3{
    font-size: 3rem;
    color:#000000;
}

.about .row .content p{
    font-size: 1.5rem;
    color:#000000;
    padding: .5rem 0;
    padding-top: 1rem;
    line-height: 1.5;
}

.icons-container{
    background:#eee;
    display: flex;
    flex-wrap:wrap;
    gap:1.5rem;
    padding-top: 5rem;
    padding-bottom: 5rem;
}

.icons-container .icons{
background:#ffff;
border:.1rem solid rgba(0,0,0,.1);
padding:2rem;
display:flex;
align-items: center;
flex:1 1 25rem;
}

.icons-container .icons img{
    height:5rem;
    margin-right: 2rem;
}

.icons-container .icons h3{
    color:#333;
    padding-bottom: .5rem;
    font-size: 1.5rem;
}

.icons-container .icons span{
    color:#555;
    font-size: 1.3 rem;
}

.services .box-container{
    display: flex;
    flex-wrap: wrap;
    gap:1.5rem
}

.services .box-container .box{
   flex:1 1 30rem;
   box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.1);
   border-radius: 10px;
   border:2px solid rgba(0,0,0,.1);
   position: relative;
}

.services .box-container .box .discount{
    position: absolute;
    top:1rem; left:1rem;
    padding:.7rem 1rem;
    font-size: 6rem;
    color;var(--red);
    background:rgba(255, 51, 153,.05);
    z-index: 1;
    border-radius: .5rem;
  }

  .services .box-container .box .image{
      position:relative;
      text-align: right;
      padding-top: 1rem;
      overflow:hidden;
  }

  .services .box-container .box .image img{
      height:25rem;
  }

  .products .box-container .box:hover .image img{
       transform: scale(1.1);
  }

  .services .box-container .box .image .icons{
      position: absolute;
      bottom:-7rem; left:0; right:0;
      display: flex;
  }

  .services .box-container .box .image .icons{
      bottom:0;
    }

  .services .box-container .box .image .icons a{
      height: 5rem;
      line-height: 6rem;
      font-size; 6rem;
      width:50%;
      background:var(--red);
      color:#fff;
  }

.services .box-container .box .image .icons .cart-btn{
    border-left: .1rem solid #fff7;
    border-right: .1rem solid #fff7;
    width:100%;
}

.services .box-container .box .image .icons a:hover{
    background:#333;
}

.services .box-container .box .content{
    padding:2rem;
    text-align: center;
  }

  .services .box-container .box .content h3{
       font-size: 6rem;
       color:#ffffff;
}

.services .box-container .box .content .price{
     font-size: 6rem;
     color:var(--red);
     font-weight: bolder;
     padding-top: 1rem;
   }

   .services .box-container .box .content .price span{
        font-size: 1.5rem;
        color:#ffffff;
        font-weight: lighter;
        padding-top: line-through;
      }

.review .box-container{
    display: flex;
    flex-wrap: wrap;
    gap:1.5rem;
}

.review .box-container .box{
    flex:1 1 30rem;
    box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.1);
    border-radius: .5rem;
    padding:3rem 2rem;
    position: relative;
    border: .1rem solid; rgba(0,0,0,.1);
}

.review .box-container .box .fa-quote-right{
    position: absolute;
    bottom:3rem; right:3rem;
    font-size: 6rem;
    color:#eee;
}

.review .box-container .box .stars i{
    color:var(--red);
    font-size: 2rem;
}

.review .box-container .box p{
    color:#333;
    font-size: 1.5rem;
    line-height: 1.5;
    padding-top: 2rem;
}

.review .box-container .box .user{
    display: flex;
    align-items: center;
    padding-top: 2rem;
}

.review .box-container .box .user .img{
    height:6rem;
    width:6rem;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 1rem;
}

.review .box-container .box .user h3{
    font-size: 2rem;
    color:#333
}

.review .box-container .box .user span{
    font-size: 1.5rem;
    color:#999;
}


.quoation .row{
    display: flex;
    flex-wrap: wrap-reverse;
    gap:1.5rem;
    align-items: center;
}

.quoation .row form{
    flex:1 1 40rem;
    padding:2rem 2.5rem;
    box-shadow: 0 .5rem 1.5rem rgba(0,0,0,.1);
    border:.1rem solid rgba(0,0,0,.1);
    background: #fff;
    border-radius: .5rem;
   }

.quotation .row .image{
    flex:1 1 40rem;
}

.quotation .row .image img{
    width: 100%;
}

.quotation .row .form .box{
    padding:1rem;
    font-size: 1.7rem;
    color:#000000;
    text-transform: none;
    border:.1rem solid rgba(0,0,0,.1);
    border-radius: .5rem;
    margin:.7rem 0;
    width: 100%;
}

.quotation .row form .box:focus{
    border-color:var(--black);
}

.quotation .row form textarea{
    height: 15rem;
    resize: none;
}



.footer .box-container{
     display: flex;
     flex-wrap: wrap;
     gap:1.5rem;
}

.footer .box-container .box{
    flex:1 1 25rem;
}


.footer .box-container .box h3{
    color:#ffc0cb;
    font-size: 2.5rem;
    padding:1rem 0;
}

.footer .box-container .box a{
    display: block;
    color:#ffffff;
    font-size: 1.5rem;
    padding:1rem 0;
}

.footer .box-container .box a:hover{
     color:var(--red);
     text-decoration: underline;
}

.footer .box-container .box img{
    margin-top: 1rem;
}

.footer .credit{
     text-align: center;
     padding:1.5rem;
     margin-top: 1.5rem;
     padding-top: 2.5rem;
     font-size: 2rem;
     color:#333;
     border-top: .1rem solid rgba(0,0,0,.1);
}




/* media queries */
@media (max-width:991px){

  html{
      font-size: 55%;
    }

  header{
        padding:2rem;
  }

  section{
        padding:2rem;
  }
@media (max-width:768px){

   header .fa-bars{
        display: block;
}


   header. navbar{
       position: absolute;
       top:100%; left:0; right:0;
       background:#eee;
       border-top: .1rem solid rgba(0,0,0,.1);
       clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
 }

 header #toggler:checked~ .navbar{
     clip-path:polygon(0 0, 100% 0, 100% 100%, 0% 100%);
   }

  header .navbar a{
      margin:1.5rem;
      padding:1.5rem;
      background:#fff
      border:.1rem solid rgba(0,0,0,.1);
      display: block;
}



.home .content h3{
    font-size: 5rem;
}

.home .content span{
    font-size: 2.5rem;
}

.icons-container .icons h3{
    font-size: 2rem;
}

.icons-container .icons  span{
    font-size: 1.7rem;
}


@media (max-width:450px){

    html{
      font-size: 50%;
    }

    .heading{
      font-size: 3rem;
      }

  }