html{
    font-family: 'Roboto', sans-serif !important;
}

body{
    font-family: 'Roboto', sans-serif !important;
    background-color: #0E0F0F;
}

/* -------------------------STYLES----------------------------------------------- */

#landing_header{
    background-image: url(/assets/img/banner/banner-bg-gradient.png);
    background-repeat: no-repeat;
    background-size: cover;
    background-position-x: 700px;
    overflow-x: hidden;
    /* background-position-y: -300px; */
    overflow-y: hidden;
}

#white_background{
    background-color: #fff;
}

.problem_style{
    font-size: 4rem !important;
    -webkit-text-stroke: 1px #0E0F0F;
    ; /* width and color */
    color: rgba(255, 255, 255, 0);
}

.no-shadow{
    box-shadow: none;
    border-radius: 0;
}

.border-right{
    border-right: 1px solid;
}

.horizontal-line{
    width: 100%;
    height: 1px;
    background-color: black;
}

.custom-width{
    width: 100vw !important;
}

h1{
    font-size: 3rem !important;
    color: #FCFCFC;
    line-height: 1.1;
}

h2{
    font-size: 2rem;
}

h3{
    font-size: 1.5rem !important;
    line-height: 1.2;
}

h4{
    font-size: 1.125rem !important;
}

p{
    font-size: 1rem !important;
    color: #FCFCFC;
    /* line-height: 1.5 !important; */
}

li{
    font-size: 1rem !important;
    font-style: normal !important;
}

h3:hover{
    color: #FCFCFC !important;
}

.content h3:hover{
    color: #FCFCFC;
}


.black-text{
    color: #1b1c1e;
}

.white-text{
    color: #FCFCFC !important;
}

.sub-text{
    color: #3f3f3f;
}

.light-sub-text{
    color: #cfcfcf !important;
}

.darker-sub-text{
    color: #cccccc;
}

.accent-color{
    color: #ED3237 !important;
}
.custom-btn{
    background: linear-gradient(92.85deg, #FF4F4F -21.57%, rgba(223, 0, 0, 0.85) 108.75%);
}
.footer-color{
    background-color: #151515;
}

.c1-bo, .owl-carousel .owl-nav button:before, .pagination li a:hover, .pagination li a.active, .pagination li span:hover, .pagination li span.active, blockquote, .widget.widget_tag_cloud .tagcloud a:hover, .about-nav-tab .nav-tabs .nav-link.active {
    border-color: #ED3237 !important;
}



.card-gradient{
    background: linear-gradient(304.72deg, #151515 0%, #1D1D1D 53.12%, #1B1B1B 100%);
}

a:hover{
    color: #ED3237 !important;
}

/* Style the header: fixed position (always stay at the top) */
.header {
    position: fixed;
    top: 0;
    z-index: 1;
    width: 100%;
    background-color: #f1f1f1;
  }
  
  /* The progress container (grey background) */
  .progress-container {
    width: 100%;
    height: 8px;
    background: #cfcfcf;
  }
  
  /* The progress bar (scroll indicator) */
  .progress-bar {
    height: 8px;
    background: linear-gradient(92.85deg, #FF4F4F -21.57%, rgba(223, 0, 0, 0.85) 108.75%);
    width: 0%;
  }

  .arrow-svg{
    color: #fff !important;
  }

  .arrow-svg:hover{
    color: #ED3237 !important;
  }

  .c1-bg, ::selection, .bg-overlay:after, .btn-inline:hover:after, #menu-button.menu-opened span::before, #menu-button.menu-opened span::after, -thumb.offcanvas-wrapper::-webkit-scrollbar, .single-blog-item .blog-hover {
    background-color: #ED3237 !important;
}

.preloader .loader:before {
    content: "";
    display: block;
    position: absolute;
    left: -1px;
    top: -1px;
    height: 100%;
    width: 100%;
    -webkit-animation: rotation 1s linear infinite;
    animation: rotation 1s linear infinite;
    border: 1px solid #ED3237;
    border-top: 1px solid transparent;
    border-radius: 100%;
  }

  .preloader {
    z-index: 999999;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    background-color: #151515;
  }

.muli {
     display: none; 
  }





/* -------------------------STYLES----------------------------------------------- */


.no-background{
    background: none !important;
}
.noHover{
    pointer-events: none !important;
}

.single-feature{
    height: auto;
    width: 100%;
    padding-top: 0;
    padding-bottom: 0;
    margin-bottom: 48px;
    margin-top: 0;
}

.image-slider{
    margin: 0;
    padding: 0;
    width: 100%;
    height: auto;
}

.slider-img-style{
padding-top: 40px;
}

.owl-stage-outer{
    max-height: auto;
}


.owl-dots{
    margin-top: 0 !important;
    padding: 0;
    text-align: center;
}

.section-title p{
    width: 80%;
}

.section-title br{
    display: block;
}

.fa-plus{
    color: #ED3237 !important;
}

.list-check li:not(:last-child){
    margin-bottom: 12px;
}

.margin-center{
    margin: 0 auto;
}

.usecardlist{
    width: 80%;
    margin: 0 auto;
}

/* Theme Input Style */
.theme-input-style {
    border: 1px solid #FCFCFC;
    height: 50px;
    width: 100%;
    padding: 0 20px;
    background-color: #151515;   
    color: #fff !important;
  }
  
  .theme-input-style:focus {
    border-color: #ED3237;
    background-color: #151515 !important;
    color: #FCFCFC !important;
  }
  
  textarea.theme-input-style {
    height: 200px;
    padding: 20px 20px;
    color: #fcfcfc ;
    /* background-color: #FCFCFC; */
  }


input:-webkit-autofill {
    -webkit-box-shadow:0 0 0 50px #151515 inset; /* Change the color to your own background color */
    -webkit-text-fill-color: #fcfcfc;
}
input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 50px rgb(31, 31, 31) inset;
    -webkit-text-fill-color: #fcfcfc;
}

.contact-info .single-contact-info p a:not(:last-child):after {
    content: '';
}



.widget.widget_contact_info .single-info p a:not(:last-child):after {
    content: '';
}

.header{
    background-color: rgba(0, 0, 0, 0);
}

.header .header-main.sticky {
    background: rgba(224, 224, 224, 0.0);
    backdrop-filter: blur(4px);
    -webkit-box-shadow: none;
    box-shadow: none;
    display: none;
  }

  .c1, .list-check li i, .theme-input-group button, .btn.btn-white span, .vdo-btn, .section-title h3, .page-title li, .appointment-modal .modal-dialog .modal-content .form-title, .header .header-main.style--one .main-menu #menu-button, .header .header-main.style--one .main-menu .nav li.current-menu-item > a, .header .header-main.style--one .main-menu .nav li.current-menu-parent > a, .header .header-main.style--one .main-menu .nav li ul li:hover > a, .offcanvas-wrapper .offcanvas-content .widget.widget_contact_info .single-info span, .single-blog-style--two .blog-content .post-meta li a:hover, .blog-details .post-meta li a:hover, .blog-details .post-tags li a:hover, .not-found-content p a, .coming-soon-content h1, #countdown li .single-countdown h4, #countdown li.seperator, .single-feature:hover .content h3, .single-process:hover .content h3, .about-nav-tab .nav-tabs .nav-link.active, .single-service .icon, .single-service:hover h4, .service-details .title, .pricing-navtab .nav-tabs .nav-link h4, .project-nav li.active, .single-team-member .team-info h4 {
    color: #ED3237;
  }

  .enquire{
      color: #ED3237;
  }

  .enquire:hover{
    color: #fff !important;
}

a:hover{
    color: #ED3237;
}

.heading, blockquote, .btn-inline, .page-title li:not(:last-child):after, .widget.widget_contact_info .single-info p, .back-to-top .back-toop-tooltip span, .header .header-main.sticky .main-menu .nav > li > a, .single-blog-style--two .blog-content .post-meta li a, .single-blog-style--two .blog-content .post-meta li span, .blog-details .post-meta li, .blog-details .post-tags li:first-child, .blog-details .post-share li:first-child, .about-nav-tab .nav-tabs .nav-link, .single-process:hover .content h3, .single-project-item .project-body .project-meta span {
    color: #fff;
}

.gradient-bg, .owl-carousel button.owl-dot.active, .bg-overlay:after, .bg-hover-gradient:after, .pagination li a:after,
.pagination li span:after, .widget.widget_tag_cloud .tagcloud a:after, .single-service.style--two:after, .pricing-navtab .nav-tabs .nav-link:after, .theme-input-group input, .btn:before, .btn:after,
.btn span:before,
.btn span:after, .back-to-top, -thumb.offcanvas-wrapper::-webkit-scrollbar, .coming-soon-content h1 {
  background: -webkit-gradient(linear, left bottom, right top, color-stop(0%, #fb4275), color-stop(100%, #f35d46));
  background: -webkit-linear-gradient(linear-gradient(92.85deg, #FF4F4F -21.57%, rgba(223, 0, 0, 0.85) 108.75%));
  background: -o-linear-gradient(92.85deg, #FF4F4F -21.57%, rgba(223, 0, 0, 0.85) 108.75%);
  background: linear-gradient(92.85deg, #FF4F4F -21.57%, rgba(223, 0, 0, 0.85) 108.75%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fb4275', endColorstr='#f35d46',GradientType=1);
}

.btn:before, .btn:after,
.btn span:before,
.btn span:after{
    background: white;
    -webkit-transition-duration: 0.2s;
    -o-transition-duration: 0.2s;
    transition-duration: 0.2s;
}

::-moz-selection { /* Code for Firefox */
    color: #fff;
    background: #ED3237;
  }
  
  ::selection {
    color: #fff;
    background: #ED3237;
  }

/* ************************
   02.4: Buttons
   ********************* */
   .btn {
    border: none;
    border-radius: 10px;
    padding: 0;
    font-size: 16px;
    font-weight: 500;
    line-height: 52px;
    position: relative;
    text-transform: uppercase;
    -webkit-transition: 0.1s ease-in-out 0.1s;
    -o-transition: 0.1s ease-in-out 0.1s;
    transition: 0.1s ease-in-out 0.1s;
    z-index: 9;
    color: #fff!important;
    background: linear-gradient(92.85deg, #FF4F4F -21.57%, rgba(223, 0, 0, 0.85) 108.75%);
    border-radius: 10px;
  }

  .btn:hover{
      border-radius: 0px;
  }
  

  .btn:hover:before, .btn:hover:after {
    width: 100%;
    left: 0;
    border-radius: 0px;
}
  
  .btn:hover span:before,
  .btn:hover span:after {
    height: 100%;
    top: 0;
    border-radius: 0px;
  }

  
  
  

  .responsive-br{
      display: none;
  }

  .white-hover{
      color: #fff;
  }

  .white-hover:hover{
    color: #fff;
}

.rubik{
    display: none;
}

.mobile-center{
    display: block;
    text-align: left;
}

  

@media only screen and (max-width: 768px){
    #landing_header{
        background-image: url(/assets/img/banner/mobile_header_background.png);
        background-repeat: no-repeat;
        background-size: cover;
        background-position-x: 0px;
        overflow-x: hidden;
    /* background-position-y: -300px; */
    overflow-y: hidden;
    }
    .hide-mobile{
        display: none;
    }

    .mobile-center{
        text-align: center;
    }

}



@media only screen and (max-width: 425px){

    html{
        font-family: 'Roboto', sans-serif !important;
    }
    
    body{
        font-family: 'Roboto', sans-serif !important;
        background-color: #0E0F0F;
    }

    .mobile-center{
        text-align: left !important;
    }

    

    .responsive.br{
        display: inline;
    }
    .sm-text-center{
        text-align: center;
    }

    #landing_header{
        background-image: url(/assets/img/banner/mobile_header_background.png);
        background-repeat: no-repeat;
        background-size: cover;
        background-position-x: -60px;
        overflow-x: hidden;
    /* background-position-y: -300px; */
    overflow-y: hidden;
    }
    
    .hide-mobile{
        display: none;
    }

    h1{
        font-size: 2.25rem !important;

    }

    .single-feature{
        margin-bottom: 60px;
        margin-top: 0;
    }

    .slider-img-style{
        padding-top: 20px;
        }

        .owl-stage-outer{
            max-height: 200px;
        }

    .section-title p{
    width: 90%;
}

.section-title br{
    display: block;
}

.usecardlist{
    width: 60%;
    margin: 0 auto;
}

td{
    text-align: center;
}
}




.test{
    background-color: blue;
}

.test2{
    background-color: red;
}

.test3{
    background-color: green;
}

.custom-center{
    margin: 0 auto;
    justify-content: center;
    align-items: center;
}

.relative{
    position: relative !important;
}

/* —- start text background —- */
.underline-text{
    padding:0 .2em;
    box-shadow: inset 0 -.4em #ED3237;
    }
    /* —- end start text background —- */

.customicon{
  margin: 40px 20px;
}

.cardgradient{
  background: linear-gradient(304.72deg, #151515 0%, #1D1D1D 53.12%, #1B1B1B 100%);
  border-radius: 8px;
}