body {
    font-family: "SF Pro Display",sans-serif;
    font-weight: 400;
    font-style: normal;
    background-color: #121212;
    }
    html{
    scroll-behavior: smooth;
    }
    .card-border{
        border:2px solid #292929;
    }
    .card-color{
        background-color: #171717 !important;
    }
    .bg-gray{
        color:rgb(97, 97, 97);
    }
    .color-3{
        color:#7A29A3;
    }
    .carousel-indicators .active {
      
        background-color:#FF0089!important;
    }
    .team-bg-col{
        background: #0f0514;
    }
    .w3-padding-10{
        padding:20px 10px 10px 10px;
    }
    .font-w-700{
        font-weight: 700;
    }
    .rating-stars ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
        overflow: hidden;
        }
        .rating-stars ul li  {
        display: inline-block;
        color: white;
        text-align: center;
        padding: 16px 1px 16px 1px;
        text-decoration: none;
        }
        .rating-stars ul li i{
        color:#ffcb45;
        font-size:18px;
        }
        .rating-stars ul li i:hover {
            color:rgb(90, 89, 89);
        }
    .margin-top-10{
    margin-top:10px;
    }
    .margin-top-200{
        margin-top:200px!important;
    }
    .margin-TB-10{
    margin:10px 0px 10px 0px;
    }
    .margin-top-100{
    margin-top:100px;
    }
    .margin-top-bot-100{
        padding:100px 0px 100px 0px;
        }
    .margin-top-150{
        margin-top:150px;
        }
    /*relative absoulute clases*/
    .testimonial-text{
        position: relative;
        line-height:25px;
        padding:20px 0px 20px 0px;
        font-size:18px;
    }

.testimonial-text:after
{
content: '\201D';
font-size:60px;
position: absolute;
bottom:-25px;
}
.testimonial-text:before
{
content: '\201C';
font-size:60px;
}
.icon-bar-2 {
    margin-left: auto;
    margin-right: auto;
  }
  
  .icon-bar-2 a {
    display: inline-block;
    text-align: center;
    padding:5px 0px 0px 0px;
    width:40px;
    height:40px;
    border-radius:50%;
    transition: all 0.3s ease;
    color: white;
    font-size: 20px;
    margin:-13px 2px 0px 2px!important;

  }
  .icon-bar-2 a:hover {
    background-color: #FF0089!important;
  }
  #team .icon-bar-2 a:hover {
    background-color: #FF0089!important;
  }
    .testimonial-bg-img{
        background-image: url('../images/testimonial-bg.png'); min-height:1050px; background-repeat: no-repeat;background-position: center left;
    }
    .display-container{
    position: relative;
    }
    .topleft {
    position: absolute;
    top: 0;
    left: 16px;
    }
    .bottomleft {
    position: absolute;
    bottom: 0;
    left: 16px;
    }
    
    .top-middle-logo-bg {
    position: absolute;
    top: 10%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    }
    .top-middle-logo {
    position: absolute;
    top: 10%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    margin-left:2px;
    }
    .middle-bottom-text {
    position: absolute;
    top: 75%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width:55%;
    }
    h2{
        line-height: 28px!important;
    }
    .font-25{
    font-size: 25px;
    line-height: 32px;
    }
    .res-image{ 
    width: 100%;
    height: auto;
    }
    .contact-btn {
        border-radius: 2px;
        font-family: 'Avenir Next';
        font-size: 1.3rem;
        padding:6px 35px;
        color: #FF0089;
        box-shadow: 0 0 6px 0 rgba(157, 96, 212, 0.5);
        border: solid 3px transparent;
        background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)), linear-gradient(101deg, #FF5F00, #FF0089, #7A29A3);
        background-origin: border-box;
        background-clip: content-box, border-box;
        box-shadow: 2px 1000px 1px rgb(0, 0, 0) inset;
        
      }
      
      .contact-btn:hover {
        box-shadow: none;
        color: white;
      }
    .btn-grad {
        background-image: linear-gradient(to right, #FF5F00, #FF0089, #7A29A3);
    }
    .btn-grad {
     
        border:none;display:
        inline-block;
        padding:6px 35px;
        vertical-align:middle;
        overflow:hidden;text-decoration:none;
        color:inherit;background-color:inherit;
        text-align:center;cursor:pointer;
        white-space:nowrap;
        font-size:17px;
        color:white;
        font-weight: 500;
        
        border-radius:2px;
    }
     .color-4{
         background-color:#ffff!important;
         color: black !important;
     }
     .btn-grad:hover {
        background-image: linear-gradient(to right, #7A29A3, #FF0089, #FF5F00);
     }
     .w3-center{margin-left:auto;margin-right:auto;max-width: 600px;}
     .middle-bottom-btn {
        position: absolute;
        top: 100%!important;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        } 
        #team .icon-bar-2{
            margin-top:40px!important;
        }
        /*flex for footer*/
                 
 /*Card secton*/
 .w3-padding-60{
    padding:60px 0px 0px 0px!important;
}
.font-20{
    font-size:20px;
}
.font-48{
    font-size:48px!important;
}
.font-70{
    font-size:70px;
}
.w3-padding-80-tb{
    padding:80px 0;
}
.w3-card {
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
    transition: 0.3s;
    border-radius: 5px!important;
  }
  
  .w3-card:hover {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
  }
  
  img {
    border-radius: 5px 5px 0 0;
  }
  
  .w3-container {
    padding: 26px 26px;
  }
  .w3-margin-bottom-20{
      margin-bottom:20px;
  }
  .w3-margin-top{
      margin:65px 0px 0px 0px!important;
  }
  .w3-margin-top{
    margin:65px 0px 0px 0px!important;
}
/*media Queries*/
@media only screen and (max-width: 380px) {
    .form-padding{
        padding:20px 10px 20px 10px!important;
    }
    .testimonial-text:after
    {
    content: '\201D';
    font-size:60px;
    position: absolute;
    bottom:-25px!important;
    right:10px!important;
    }
    .middle-bottom-text {
        position: absolute!important;
        top: 100%!important;
        left: 50%!important;
        transform: translate(-50%, -50%)!important;
        text-align: center!important;
        width:65%!important;
        }
        .font-25{
        font-size: 8px!important;
        line-height: 12px!important;
        }
.res-image{ 
width: 40%;
height: auto;
}
.middle-bottom-btn{
    top:160%;
}
.w3-margin-top{
    margin:20px 10px 0px 10px!important;
}
.btn-grad {
    border:none;display:
    inline-block;
    padding:3px 15px;
    vertical-align:middle;
    overflow:hidden;text-decoration:none;
    color:inherit;background-color:inherit;
    text-align:center;cursor:pointer;
    white-space:nowrap;
    font-size:10px;
    color:white;
    font-weight: 500;
    letter-spacing: 2px;
    border-radius:2px;
}     

}

   
        .flex-container {
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            margin-top: 80px;
            }
            .flex-container>div {
            color: #fff
            } 
        
  
  /* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {
   
    .font-48{
        font-size:30px!important;
    }
    .font-70{
        font-size:40px;
    }
   
    .testimonial-bg-img{
        background-image: url('../images/testimonial-bg.png'); 
        min-height:900px!important;
         background-repeat: no-repeat;
         background-position: center left;
    }
    .contact-btn {
        border-radius: 2px;
        font-family: 'Avenir Next';
        font-size: 1.2rem;
        padding:6px 30px;
        color: #FF0089;
        box-shadow: 0 0 6px 0 rgba(157, 96, 212, 0.5);
        border: solid 3px transparent;
        background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 0)), linear-gradient(101deg, #FF5F00, #FF0089, #7A29A3);
        background-origin: border-box;
        background-clip: content-box, border-box;
        box-shadow: 2px 1000px 1px rgb(0, 0, 0) inset;
        
      }
   
    #work h1,#team h1,#inspirational h1,#clients h1{
        font-size:20px!important;
    }
    .w3-center{margin-left:auto;margin-right:auto;width:80%;}
    .flex-container {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        margin-top: 80px;
        flex-direction:column-reverse;
        }
        .flex-container>div {
        color: #fff;
        text-align: center;
        margin-top:20px;
        }
        
    .middle-bottom-text {
        position: absolute!important;
        top: 90%!important;
        left: 50%!important;
        transform: translate(-50%, -50%)!important;
        text-align: center!important;
        width:65%!important;
        margin-top:55px!important;
        }
        .font-25{
        font-size: 14px!important;
        line-height: 19px!important;
        }
.res-image{ 
width: 55%;
height: auto;
}
.w3-margin-top{
    margin:25px 10px 0px 10px!important;
}
.btn-grad {
    padding:7px 25px;
    white-space:nowrap;
    font-size:14px;
    color:white;
    font-weight: 500;
    letter-spacing: 1.5px;
    border-radius:2px;
} 
.middle-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width:80%;
    margin-top:14px;
    }
    .font-size-head{
        font-size:23px!important;
        font-weight: 600;
    }
    #contact .w3-padding-60{
        padding-top:40px!important;
    }
    .form-margin-b{
        margin-top: 30px!important;
    }
    #contact{
        padding:15px!important;
    }
    .form-padding{
        padding:20px 20px 20px 20px!important;
    }
}
/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {
    .font-48{
        font-size:30px!important;
    }
    .font-70{
        font-size:40px;
    }
    #contact .w3-padding-60{
        padding-top:40px!important;
    }
    .middle-bottom-text {
        position: absolute!important;
        top: 90%!important;
        left: 50%!important;
        transform: translate(-50%, -50%)!important;
        text-align: center!important;
        width:65%!important;
        margin-top:20px!important;
        }
        .font-25{
        font-size: 16px!important;
        line-height: 21px!important;
        }
.res-image{ 
width: 60%;
height: auto;
}
.w3-margin-top{
    margin:30px 10px 0px 10px!important;
}
.btn-grad {
    padding:6px 35px;
    white-space:nowrap;
    font-size:16px;
    color:white;
    font-weight: 500;
    letter-spacing: 1.5px;
    border-radius:2px;
} 
.middle-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width:70%;
    margin-top:18px;
    }
    .font-size-head{
        font-size:35px!important;
        font-weight: 600;
    }
}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
    .font-48{
        font-size:30px!important;
    }
    .font-70{
        font-size:40px;
    }
    #contact .w3-padding-60{
        padding-top:50px!important;
    }
    .middle-bottom-text {
        position: absolute!important;
        top: 80%!important;
        left: 50%!important;
        transform: translate(-50%, -50%)!important;
        text-align: center!important;
        width:65%!important;
       
        }
        .font-25{
        font-size: 18px!important;
        line-height: 23px!important;
        }
.res-image{ 
width: 70%;
height: auto;
}
.w3-margin-top{
    margin:35px 10px 0px 10px!important;
}
.btn-grad {
    padding:6px 35px;
    white-space:nowrap;
    font-size:18px;
    color:white;
    font-weight: 500;
    letter-spacing: 1.5px;
    border-radius:2px;
}
.middle-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width:70%;
    margin-top:22px;
    }
    .font-size-head{
        font-size:45px!important;
        font-weight: 600;
    }
}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {
    .font-48{
        font-size:48px!important;
    }
    .font-70{
        font-size:70px;
    }
    #contact .w3-padding-60{
        padding-top:60px!important;
    }
    .middle-bottom-text {
        position: absolute!important;
        top: 78%!important;
        left: 50%!important;
        transform: translate(-50%, -50%)!important;
        text-align: center!important;
        width:65%!important;
        }
        .font-25{
        font-size: 20px!important;
        line-height: 27px!important;
        }
.res-image{ 
width: 80%;
height: auto;
}
.w3-margin-top{
    margin:25px 10px 0px 10px!important;
}
.btn-grad {
    padding:6px 35px;
    white-space:nowrap;
    font-size:20px;
    color:white;
    font-weight: 500;
    letter-spacing: 1.5px;
    border-radius:2px;
}
.middle-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width:75%;
    margin-top:31px;
    }
    .font-size-head{
        font-size:60px!important;
        font-weight: 600;
    }
}
@media (min-width:520px) and (max-width:599px) {
    .middle-text {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        width:80%;
        margin-top:16px!important;
        }
        .font-size-head{
            font-size:25px!important;
            font-weight: 600;
            
        }
    }
/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {
    .middle-bottom-text {
        position: absolute!important;
        top: 79%!important;
        left: 50%!important;
        transform: translate(-50%, -50%)!important;
        text-align: center!important;
        width:65%!important;
        }
        .font-25{
        font-size: 25px!important;
        line-height: 33px!important;
        }
.res-image{ 
width: 100%;
height: auto;
}
.w3-margin-top{
    margin:75px 10px 0px 10px!important;
}
.btn-grad {
    padding:6px 35px;
    white-space:nowrap;
    font-size:25px;
    color:white;
    font-weight: 500;
    letter-spacing: 1.5px;
    border-radius:2px;
}
.middle-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width:80%;
    margin-top:39px;
    }
    .font-size-head{
        font-size:90px!important;
        font-weight: 600;
        
    }
   
}
    /*spinner animation*/
    .loader {
    -webkit-animation: spin 10s linear infinite; /* Safari */
    animation: spin 10s linear infinite;
    }
    /* Safari */
    @-webkit-keyframes spin {
    0% { -webkit-transform: rotate(0deg); }
    100% { -webkit-transform: rotate(360deg); }
    }
    @keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
    }
    /* crops animations that exceeds one line area */
    /* flipping class and key frames*/
    .flipX {
    animation: 2s anim-flipX ease-out ;
    }
    @keyframes anim-flipX {
    0% {
    opacity: 0;
    transform: rotateX(90def);
    }
    50% {
    opacity: 1;
    transform: rotateX(720deg);
    }
    100% {
    /* animate nothing to pause animation at the end */
    opacity: 1;
    transform: rotateX(720deg);
    }
    }
    /* lineup class and keyframes */
    .lineUp {
    animation: 4s anim-lineUp ease-out ;
    }
    @keyframes anim-lineUp {
    0% {
    opacity: 0;
    transform: translateY(80%);
    }
    20% {
    opacity: 0;
    }
    50% {
    opacity: 1;
    transform: translateY(0%);
    }
    100% {
    opacity: 1;
    transform: translateY(0%);
    }
    }
    .lineUpTwo {
        animation: 8s anim-lineUp ease-out ;
        }
        @keyframes anim-lineUp {
        0% {
        opacity: 0;
        transform: translateY(80%);
        }
        20% {
        opacity: 0;
        }
        50% {
        opacity: 1;
        transform: translateY(0%);
        }
        100% {
        opacity: 1;
        transform: translateY(0%);
        }
        }
    /* subtle zoom to attention and then back */
    .pop-outin {
    animation: 2s anim-popoutin ease infinite;
    }
    @keyframes anim-popoutin {
    0% {
    color: white;
    transform: scale(0);
    opacity: 0;
    text-shadow: 0 0 0 rgba(0, 0, 0, 0);
    }
    25% {
    color: #FF5F00;
    transform: scale(2);
    opacity: 1;
    text-shadow: 3px 10px 5px rgba(0, 0, 0, 0.5);
    }
    50% {
    color: #FF0089;
    transform: scale(1);
    opacity: 1;
    text-shadow: 1px 0 0 rgba(0, 0, 0, 0);
    }
    100% {
    /* animate nothing to add pause at the end of animation */
    transform: scale(1);
    opacity: 1;
    text-shadow: 1px 0 0 rgba(0, 0, 0, 0);
    }
    }
    .fromtop {
    animation: 2s anim-fromtop linear infinite;
    }
    @keyframes anim-fromtop {
    0% { opacity: 0; transform: translateY(-100%);}
    25% { opacity: 1; transform: translateY(0%);}
    50% {
    }
    100% {
    }
    }
    .typed-out{
        overflow: hidden;
       
        white-space: nowrap;
        font-size: 1.6rem;
        width: 0;
        animation: 
          typing 4s steps(20, end) forwards;
      }
      @keyframes typing {
        from { width: 0 }
        to { width: 100% }
      }
     .contact-text-grad {
        font-size: 72px;
        background: -webkit-linear-gradient(#FF5F00, #FF0089, #7A29A3);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
      }
      .contact-bg {
        background-image: url('../images/contact-bg.png');
        height: 100vh;
        background-size: cover;
        color: white;
        background-repeat: no-repeat;

      }
      .border-rad-20{
          border-radius: 20px!important;
      }
      input[type=text], input[type=email], #comments ,#sal, #password{
        background:#212121!important;
        border:none;
        color:#ffffff!important;
        height:50px;
        }
        #comment{
            background:#212121!important;
            border:none;
            color:#ffffff!important;
            }
        .form-padding{
            padding:20px 30px 20px 30px;
        }
      .rev-img{
        width:100px;
      }
      .team-img{
        width:200px;
      }
      #work img:hover{opacity:0.3;cursor:pointer}
      #work .w3-container{
        min-height:25vh;
      }