:root {
  --primary: #630094;
  --white: #ffffff;
}
.services_section {
  margin-top: 40px;
  margin-bottom: 40px;
}
.services_heading h1 {
  color: var(--primary);
}
.services_desc {
  color: rgb(190, 190, 190);
  margin-bottom: 40px;
}
.services_container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.service {
  width: 250px;
  margin: 20px;
}
.service:hover .service_icon {
  transform: scale(1.03) rotate(-10deg);
}
.service:hover .service_name a {
  text-decoration: underline;
}
.service_icon {
  width: 250px;
  aspect-ratio: 1 /1;

  margin-bottom: 10px;
  transition: 0.3s ease-in-out;
}
.service_icon img {
  width: 100%;
}
.service a {
  text-align: center;
  color: #fff;
  transition: 0.3s ease-in-out;
}

@media (max-width: 650px) {
  .service {
    width: 130px;
  }
  .service_icon {
    width: 130px;
  }
  .service a {
    font-size: 12px;
  }
  .services_desc p {
    font-size: 15px;
  }
}


/* ---------------------------trailer section---------------------------- */
#trailer_section{
  margin-top: 100px;
}
.trailer_heading{
  margin-bottom: 40px;
}
.trailer_heading h1{
  color: var(--primary);
}
.trailer{
  background-color: var(--primary);
  padding:1px;
  margin-bottom: 30px;
  border-radius: 10px;
  height: 500px;
  box-shadow: 1px 1px 50px var(--primary);
}
.trailer iframe{
  height: 100%;
  border-radius: 10px;
}

@media (max-width: 991px) {
  .trailer{
    height: 300px;
  }
  
}
@media(max-width:650px){
  #trailer_section{
    margin-top: 40px;
  }
  .trailer_heading{
    margin-bottom: 10px;
    padding-top: 20px;
  }
  .trailer{
    height: 180px;
  }
}
/* -------------------Animation Section------------------------ */

:root {
  --primary: #630094;
  --white: #ffffff;
}
#animation_container{
 
  padding-top: 200px;
}
#animation_section {
  width: 100%;
  height: max-content;
  padding: 30px;
  background: #0d0d0df5;
  padding-top: 100px;
  position: relative;
  backdrop-filter: blur(20px);
  border-radius: 10px;
  box-shadow: 0px 0px 100px var(--primary);
  margin-bottom: 40px;
}
#animation_section:hover .animation_image {
  transform: scale(1.05);
}
.animation_heading h1 {
  color: var(--primary);
  font-size: 80px !important;
  font-weight: 700 !important;
  font-family: 'Oxygen', sans-serif;
}
.animation_para p {
  color: #909090;
  font-size: 18px;
  width: 70%;
}
.animation_image {
  height: 600px;
  width: 30%;
  position: absolute;
  right: 30px;
  bottom: 0;
  transition: transform 1s ease-in-out;
}
.animation_image img {
  height: 100%;
}

@media (max-width: 991px) {
  #animation_container{
    padding-top: 20px;
  }
  
  .animation_para {
    display: flex;
    justify-content: center;
  }
  .animation_para p {
    width: 90%;
    text-align: justify;
  }

  .animation_image img {
    object-fit: contain;
  }
  #animation_section {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 20px;
  }
  .animation_heading h1 {
    font-size: 50px !important;
    text-align: center;
  }
  #animation_section {
    padding-top: 30px;
  }
  #animation_section iframe{
    width: 100%;
    height: 250px;
  }
  .animation_image {
    width: 100%;
    display: flex;
    justify-content: center;
    height: 300px;
    top: 0;
    right: 0;
    position: relative;
    margin-bottom: 20px;
  }
  #animation_section:hover .animation_image {
    transform: scale(1) rotate(0deg) translateY(0px);
  }
}
@media (max-width: 650px) {
  
  .animation_para p {
    font-size: 15px;
  }
  #animation_container{
    padding-top: 5px;
  }
}


/* ----------------------------WebDev Section-------------------------- */
#webdev_section{
margin-top: 100px;
}
.webdev_heading{
  margin-bottom: 40px;
}
.webdev_heading h1{
  color: var(--primary);
  text-align: right;
}
.laptop{
  width: 100%;
  position: relative;
}
.laptop img{
  width: 100%;
}
@media(max-width:650px){
  #webdev_section{
    margin-top: 60px;
  }
  .webdev_heading{
    margin-bottom: 10px;
    padding-top: 20px;
  }
  .trailer{
    height: 180px;
  }
}

.much_more{
  height: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.much_more h2{
  color: var(--primary);
  font-size: 50px !important;
  text-align: center;

}
.much_more p{
  color: #fff;
}
.much_more button{
  width: 250px;
  height: 80px;
  outline: 0;
  border: 0;
  background: #fff;
  border-radius: 10px;
  color: var(--primary) !important;
  font-size: 20px;
  box-shadow: 1px 1px 50px var(--primary);
  transition: .3s;
  font-weight: bold;
}
.much_more button:hover{
 background: var(--primary);
 color: #fff !important;
  
 
}
@media(max-width:650px){
  .much_more{
    height: 250px;
  }
  .much_more h2{
    font-size: 20px !important;
  }
  .much_more p{
    font-size: 12px;
  }.much_more button{
    width: 150px;
    height: 60px;
    font-size: 15px;
  }
}