AI_Video_LP/static/css/contact/styles-contact.scss

.navbar .navbar-collapse {
  flex-grow: 0;
}

.header {
  margin-top: 77px;
  padding-top: 6.5rem;
  height: 75vh;
  position: relative;
  padding-bottom: 3rem;

}


*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}



.Contact_Us{
  position: relative;


.banner{
  width:100%;
  height: 300px;
  position: relative;
  z-index: -1;
  margin-top: -19vw;
  h2{
    position: absolute;
    color:#fff;
    top:7vw;
    left: 50%;
    transform:translate(-50%,-50%);
    text-transform: uppercase;
    letter-spacing: 2px;
    text-shadow: 0px 1px 2px rgba(black,0.1);
    font-size: 3vw;
  }

}

  
  .slick-next::before{
      content: "";
  }
  .slick-prev::before{
      content: "";
  }
 
  
  .slick-dots li{
      border-radius: 50%;
     
  }
  .slick-dots li button::before{
  font-size: 10px;
  
  }
  .slick-dots li.slick-active button:before{
      color:#EA5413;
      opacity: 1;
      border-radius: 50%;
  
      border:1px solid #EA5413
  }
  .text-title{
      margin-top: -90px;
      @media screen and(max-width:576px) {
        margin-top: -45px;
      }
      
  }
  h1{
      font-weight: 600;
      font-size: 32px;
      text-align: center;
  }

  hr{
      width: 5vw;
      margin: 0 auto;
      height: 6px;
      opacity: 1 !important;
      background: #000;
      @media screen and(max-width:576px) {
        width: 15vw;
      }
  }
  p{
      margin-top: 15px;
      text-align: center;
      color:#888888;
  }
  .contact_us_title{
     width: 80vw;
     margin: 0 auto; 
     text-align: center;
 
    @media screen and(max-width:576px) {
      width: 100vw;
    }
  }
  .service_info{
      // height: 100vh;
      // background: #FFEBE2;
      padding-top: 100px;
      background-color: #FFEBE2;
      // padding-bottom: 130px;
      position: relative;
      .circle-orange{
        bottom: 10px;
        right:80px;
        width: 180px;
      }
      .content-service{
        margin-top: 50px;
        h2{
            font-weight: 600;
            color:#EA5413;
            font-size: 28px;
        }

        ul{
            margin-top: 15px;
            color:#888888;
           padding-left: 1rem;
        }
    } 
      .LearnMore{
          margin-top: 50px;
          padding: 5px 15px;
          border:1px solid #EA5413;
          border-radius: 30px;
          background: #EA5413;
          color: #fff;
          transition: 0.3s;
          &:hover{
              color:#EA5413;
              background: #fff;
          }
          @media screen and(max-width:576px) {
            margin-top: 15px;
          }
      }
      .service_slider_Box-m{
        width: 80vw;
        margin: 0 auto;
        .slick-dots{
          bottom:270px;
          left:50px;
        
        }
        .slick-prev{
          position: absolute;
          left:-20px;
          z-index: 100;
         top:130px;
        }
        .slick-next{
          position: absolute;
          right:-10px;
          z-index: 100;
          top:130px;
        }
      }
      .service_slider_Box{
          width: 85vw;
          margin: 0 auto;
          height: 400px;
        //  padding-bottom:150px;
        .slick-dots{
          bottom:40px;
          width: 20%;
          left:90px !important;
        }
          .service_slider{
              height: 450px;
              position: relative;
             
          }
         
          .slick-prev{
          position: absolute;
          left: 5px;
          top:350px;
          z-index: 100;
          width: 60px;
          height: 60px;
          }
        .slick-next{
          position: absolute;
          left: 350px;
          top:350px;
          z-index: 100;
          width: 60px;
          height: 60px;
        }
          .service_Img_Box{
              position: relative;
              margin-top: 50px;
            .service_Img_seo{
              width: 280px;
              position: absolute;
              left:-180px;
              bottom:180px;
              object-fit: cover;   

            }
            .service_Img_video{
              position: absolute;
              width: 360px;
              left:-250px;
              bottom:50px;
              object-fit: cover;   
            }
            .service_Img_developmentimg{
              position: absolute;
              bottom:100px;
              left:-180px;
              width: 280px;
              object-fit: cover;
            }
            .service_Img_spiderimg{
              position: absolute;
              bottom:80px;
              left:-180px;
              width: 280px;
              object-fit: cover;
            }

            .service_Img_bigdataimg{
              position: absolute;
              bottom:-10px;
              width: 400px;
              left:-200px;
              object-fit: cover;
            }
            .service_Img_googleads{
              position: absolute;
              bottom:10px;
              left:-150px;
              width: 280px;
              object-fit: cover;

            }
            .service_Img6{
              position: relative;
              bottom:50px;
            }
            .service_Img1 {
              position: relative;
              left:15px;
              bottom:120px;
              object-fit: cover;   
            }
          

            .service_Img2 {
              position: relative;
              
              bottom:50px;
              object-fit: cover;   
            }
            .service_Img3 {
              position: relative;
              left:15px;
              bottom:100px;
              object-fit: cover;   
            }
            .service_Img4 {
              position: relative;
              bottom:80px;
              object-fit: cover;   
            }
           
          }
          
      }
  }
  #contact_box{
      overflow: hidden; 
      background: #fff; 
      // margin-top: -10vw;
  }
  .Contact_Information{
      width: 90vw;
      margin: 0 auto;
      position: relative;
      padding-bottom: 130px;
      @media screen and(max-width:576px) {
        width: 100vw;
      }
      .Contact_Information_title{
          text-align: center;
          .choozmo{
             width: 640px;
             @media screen and(max-width:576px) {
              width: 90vw;
            }
          }
          .text-title{
              margin-top: -100px;
              @media screen and(max-width:576px) {
                margin-top: -60px;
              }
          }
          .qrcode{
              width: 350px;
          }
      }
      .contact-text{
          margin-top: -50px;
      }
      
  }
  
  .circle{
    position: absolute;
    bottom: -300px;
    left: -350px;
}
  @keyframes drift {
      0%{
        transform: rotate(0deg);
      }
      100% {
        transform: rotate(360deg);
      }
    }
  

}