/*
Theme Name: Cyber Security Pro
Description: Cyber Security Pro WordPress Theme is the perfect choice for building Cyber Security website. This theme is packed with features designed to help you promote your business and attract new customers. With its clean and modern design, the Charitable Non Profit Pro WordPress Theme will make a lasting impression on your visitors. The WordPress Charitable Non Profit Pro theme can be used for any website. It’s a sleek, minimalist, contemporary theme that incorporates the latest technology. The industrial theme features an elegant and chic design that will help your site stand out among the rest of your competitors.
Author: wpelemento
Theme URI: https://www.wpelemento.com/products/cyber-security-wordpress-theme/
Author URI: https://www.wpelemento.com/
Version: 0.0.1
Requires PHP: 7.3
Tested up to: 6.0
Text Domain: cyber-security-pro
License: GNU General Public License v3 or later
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Tags: education, portfolio, blog, wide-blocks, one-column, two-columns, right-sidebar, left-sidebar, grid-layout, custom-background, custom-colors, custom-header, custom-logo, custom-menu, featured-images, footer-widgets, full-width-template, editor-style, theme-options, threaded-comments
Elementor Wptheme WordPress Theme has been created by wpelemento(https://www.wpelemento.com), 2023.
Elementor Wptheme WordPress Theme is released under the terms of GNU GPL
*/

@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100;200;300;400;500;600;700;800;900&display=swap');

html {
  scroll-behavior: smooth;
}
body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  overflow-x: hidden;
}
html {
    overflow-x: hidden;
}
h1,h2,h3,h4,h5,h6 {
	font-family: 'Outfit';
}
a {
  text-decoration: none;
}
ul, ol {
  list-style: none;
  margin: 0;
  padding: 0;
}
img {
  max-width: 100%;
}
/*------ loader ------*/
.spinner-loading-box {
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  cursor: pointer;
  z-index: 999999;
}
.spinner-loading-box img, .ets-theme-header-section :is(.ets-topabr-address, .ets-topabr-email) li {
  width: 100%;
}
.sticky {
    position: fixed;
    width: 100%;
    z-index: 999 !important;
    top: 0px;
    /* height: 95px; */
    left: 0;
    padding: 0px 10px ;
    background: #0B1021;
    box-shadow: 0px 1px 6px #CCBABAF2;
    animation: slideDown 0.75s ease-out;
}
@keyframes slideDown {
    from {
      transform: translateY(-100%);
    }
    to {
      transform: translateY(0);
    }
}

/*=============== Cyber Security Theme Code Start ==============*/

/*=========== Cyber Security Slider Section Start ============*/

.wpe-cyber-slider-section .slider-title {
    color: #2AA2FF;
}
.wpe-cyber-slider-video .video-content {
    position: relative;
}
.wpe-cyber-slider-video a span {
    position: absolute;
    left: 90px;
    width: 119px;
    letter-spacing: 0.44px;
    color: #FFFFFF;
    font-family: "Outfit";
    font-weight: 500;
    font-size: 20px;
}
.wpe-cyber-slider-section .elementskit-btn:hover {
    border: unset !important;
}
.wpe-cyber-slider-section .elementskit-btn:hover {
    border: 1px solid #2AA2FF !important;
}

/*=========== Cyber Security Slider Section End ============*/

/*=========== Cyber Security Brand Section Start ============*/

.wpe-cyber-company-logo-section .swiper-slide-active figure img {
    float: left;
}
.wpe-cyber-company-logo-section .swiper-slide-duplicate-prev figure img {
    float: right;
}

/*=========== Cyber Security Brand Section End ============*/

/*=========== Cyber Security About Section Start ============*/

.wpe-cyber-about-us-section  .elementor-counter .elementor-counter-number-prefix, 
.wpe-cyber-about-us-section  .elementor-counter .elementor-counter-number-suffix {
    flex-grow: 0 !important;
}
.wpe-cyber-about-us-section p {
    opacity: 0.7;
}

/*=========== Cyber Security About Section End ============*/

/*=========== Cyber Security Service Section Start ============*/

.wpe-cyber-service-section .ea-amox-grid .ea-img-wrap .ea-img {
    width: 15%;
}
.wpe-cyber-service-section .ea-amox-grid .ea-item:hover .ea-img-wrap .ea-img {
    transform: unset;
}
.wpe-cyber-service-section .ea-title {
    padding-top: 20px;
    opacity: 0.75;
}
.wpe-cyber-service-section .ea-button-wrap a {
    text-transform: capitalize;
    font: 300 18px/27px "Outfit";
    letter-spacing: 0.36px;
    color: #FFFFFF;
    opacity: 0.7;
}
.wpe-cyber-service-section .ea-amox-grid .ea-text p {
    opacity: 0.7;
}
.wpe-cyber-service-section .ea-button-wrap a svg {
    padding-left: 6px;
}
.wpe-cyber-service-section-para .elementor-widget-container {
    opacity: 0.7;
}
.wpe-cyber-service-section .ea-item:hover {
    background: transparent linear-gradient(130deg, #2AA2FF 0%, #2AA2FF00 42%) 0% 0% no-repeat padding-box;
    border-bottom: 5px solid #2AA2FF;
    border-radius: 15px 15px 6px 6px !important;
}
.wpe-cyber-service-section .ea-amox-grid .ea-img-wrap .ea-img {
    background-color: #0E142A;
    width: 80px;
    height: 80px;
    padding: 15px;
    border-radius: 10px;
}
.ea-item .ea-img-wrap img {
    transition: transform 1s, filter 2s ease-in-out;
  transform: scale(1.2);
}
.ea-item .ea-img-wrap img:hover img {
    transform: scale(1.5);
}
.wpe-cyber-service-section .ea-button-wrap a:hover {
    color: #2AA2FF;
}

/*=========== Cyber Security Service Section End ============*/


/*=========== Cyber Security Choose Section Start ============*/

.wpe-cyber-choose-section-para p {
    opacity: 0.7;
}
.wpe-cyber-choose-section-para .elementor-image-box-title {
    opacity: 0.7;
}

/*=========== Cyber Security Choose Section End ============*/


/*=========== Cyber Security counter Section Start ============*/

.wpe-cyber-counter-box1 .elementor-counter, .wpe-cyber-counter-box2 .elementor-counter, .wpe-cyber-counter-box3 .elementor-counter {
    border-right: 2px solid #3C4152 !important;
}
.wpe-cyber-counter-box1 .elementor-counter-title, .wpe-cyber-counter-box2 .elementor-counter-title,
.wpe-cyber-counter-box3 .elementor-counter-title, .wpe-cyber-counter-box4 .elementor-counter-title {
    margin-top: 30px;
}
.wpe-cyber-counter-box1 .elementor-counter-number-prefix {
    display: none;
}
.wpe-cyber-counter-box1 .elementor-counter-title {
    text-align: left !important;
}
.wpe-cyber-counter-box4 .elementor-counter {
    text-align: right !important;
}
.wpe-cyber-counter-box4 .elementor-counter-number-wrapper {
    display: block !important;
}
.wpe-cyber-counter-box4 .elementor-counter-title {
    text-align: right !important;
}

/*=========== Cyber Security counter Section End ============*/

/*=========== Cyber Security FAQ Section Start ============*/

.wpe-cyber-faq-title .elementskit-card-header a {
    opacity: 0.8;
}
.wpe-cyber-faq-title .elementskit-card .elementskit-card-body {
    opacity: 0.7;
}
.wpe-cyber-faq-title .elementskit-card.active .elementskit-card-header {
    border-bottom: 1px solid #626671;
}
.wpe-cyber-faq-section .elementskit-btn:hover {
    border: 1px solid #2AA2FF !important;
}

/*=========== Cyber Security FAQ Section End ============*/

/*=========== Cyber Security Pricing Plan Section Start ============*/

.wpe-cyber-plan-section .ekit-wid-con .elementskit-single-pricing .elementskit-pricing-header {
    display: inline-flex;
    gap: 25px;
    padding-top: 40px;
    margin-bottom: 0;
}
.wpe-cyber-plan-main-box figure.elementor-pricing-img {
    background-color: #0B1021;
    width: 75px;
    height: 70px;
    border-radius: 6px;
}
.wpe-cyber-plan-main-box .elementskit-single-pricing .elementor-pricing-img img {
    padding: 15px;
}
.wpe-cyber-plan-main-box .elementskit-single-pricing {
    position: relative;
}
.wpe-cyber-plan-main-box span.elementskit-pricing-price {
    position: absolute;
    bottom: 58px;
    left: 94px;
}
.wpe-cyber-plan-main-box .elementskit-single-pricing {
    background-color: #0E142A;
    text-align: center;
    padding: 0px 40px 40px 45px;
}
.wpe-cyber-plan-main-box .elementskit-pricing-price sub.period {
    margin-left: -10px;
    color: #8D909A;
}
.wpe-cyber-plan-main-box a.elementskit-pricing-btn.ekit-pricing-btn-icon-pos-left:hover {
    border-color: #2AA2FF !important;
}
.wpe-cyber-plan-main-box .elementskit-single-pricing:hover {
    background: transparent linear-gradient(130deg, #2AA2FF 0%, #2AA2FF00 42%);
    border-bottom: 5px solid #2AA2FF;
    border-radius: 0px 0px 7px 7px !important;
}
.wpe-cyber-plan-main-box .elementskit-single-pricing a.elementskit-pricing-btn:hover {
    border: 1px solid #2AA2FF !important;
}
.wpe-cyber-price-para {
    opacity: 0.7 !important;
}
.wpe-cyber-plan-main-box>div.e-con-inner button {
    display: block;
    width: 14px;
    height: 14px;
    padding: 0;
    border: none;
    border-radius: 100%;
    background-color: #FFF;
    text-indent: -9999px;
}
.wpe-cyber-plan-main-box>div.e-con-inner li.slick-active button {
    background-color: #2AA2FF;
}
.wpe-cyber-plan-main-box>div.e-con-inner {
    width: auto;
}
.wpe-cyber-plan-main-box>div.e-con-inner .slick-track {
    display: inline-flex;
    gap: 10px;
}

/*=========== Cyber Security Pricing Plan Section End ============*/

/*=========== Cyber Security Testimonial Section Start ============*/

.wpe-cyber-testimonial-box .ea-testimonials-wrap .ea-arrow-prev:after {
    content: '\f062'!important;
    position: absolute;
    font-family: 'FontAwesome';
    color: #FFF;
    visibility: visible;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 400;
    width: 38px;
    height: 38px;
    line-height: 35px;
    text-align: center;
    border: 1px solid #FFF;
}
.wpe-cyber-testimonial-box .ea-testimonials-wrap .ea-arrow-next:after {
    content: '\f063'!important;
    position: absolute;
    font-family: 'FontAwesome';
    color: #FFF;
    visibility: visible;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 400;
    width: 38px !important;
    height: 38px !important;
    line-height: 35px;
    text-align: center;
    border: 1px solid #FFF;
}
.wpe-cyber-testimonial-box .elementor-widget-container svg {
    font-size: 0px !important;
    display: none;
}
.wpe-cyber-testimonial-box .ea-testimonial-text {
    overflow: hidden!important;
    display: -webkit-box!important;
    -webkit-box-orient: vertical!important;
    -webkit-line-clamp: 2!important;
    opacity: 0.7;
}
.wpe-cyber-testimonial-box .ea-testimonials-wrap .ea-testimonials-carousel {
    position: relative;
}
.wpe-cyber-testimonial-box .ea-slider-arrow.ea-arrow.ea-arrow-prev {
    top: 44%;
    position: absolute;
}
.wpe-cyber-testimonial-box .ea-slider-arrow.ea-arrow.ea-arrow-next {
    position: absolute;
    left: 20px;
    top: 56%;
}
.wpe-cyber-testimonial-box .ea-slider-arrow.ea-arrow.ea-arrow-prev:hover:after {
    background-color: #2AA2FF;
    border: 1px solid #2AA2FF !important;
}
.wpe-cyber-testimonial-box .ea-slider-arrow.ea-arrow.ea-arrow-next:hover:after {
    background-color: #2AA2FF;
    border: 1px solid #2AA2FF;
}
.wpe-cyber-testimonial-box .ea-arrow-prev.slick-arrow {
    font-size: 0px !important;
}
.wpe-cyber-testimonial-box .slick-current .ea-testimonial  {
    background-color: #0B1021;
    border: 1px solid #FFFFFF !important;
    opacity: 1 !important;
}
.wpe-cyber-testimonial-box .ea-testimonials-wrap .ea-testimonials .slick-list {
    height: 420px !important;
}
.wpe-cyber-testimonial-box .ea-testimonial-position {
    opacity: 0.6;
}   
.ea-testimonial-slide:not(.slick-current) .ea-testimonial {
    background: transparent linear-gradient(0deg, #0E142A00 0%, #0E142A 100%) 0% 0% no-repeat padding-box;
    opacity: 0.4;
}
.wpe-cyber-testimonial-box .ea-testimonials .ea-arrow-next {
    font-size: 0;
}

/*=========== Cyber Security Testimonial Section End ============*/

/*=========== Cyber Security Team Section Start ============*/

.wpe-cyber-team-section .ea-tm {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
}
.wpe-cyber-team-section .ea-tm-content {
    width: 50%;
}
.wpe-cyber-team-section .ea-tm-image {
    width: 50%;
}
.wpe-cyber-team-section .ea-tm-social-links li a svg {
    font-size: 16px;
    height: 16px;
}
.wpe-cyber-team-section .ea-tm-social-links li a svg path {
    fill: #FFF;
}
.wpe-cyber-team-section .ea-tm-description {
    padding-right: 30px;
}
.wpe-cyber-team-section .ea-tm-social-icon {
    font-size: 0 !important;
    display: none !important;
}
.wpe-cyber-team-section .ea-tm-social-links .ea-tm-social-icon-wrap {
    width: 32px;
    height: 32px;
    justify-content: center;
}
.wpe-cyber-team-section .ea-tm-social-links-wrap {
    padding-top: 10px;
}
.wpe-cyber-team-section .ea-tm:hover {
    background: transparent linear-gradient(135deg, #2AA2FF 0%, #2AA2FF00 46%);
}
.wpe-cyber-team-section .ea-team-member-carousel-wrap {
    overflow-x: clip;
    margin: 0 7px;
}
.wpe-cyber-team-section .ea-tm-social-links li:nth-child(1) a i::before {
    font-size: 0px !important;  
}
.wpe-cyber-team-section .ea-tm-social-links li:nth-child(1) .e-fab-facebook {
    font-size: 0px !important;  
    width: 0px !important;
}
.wpe-cyber-team-section .ea-tm-social-links li:nth-child(2) a i {
    display: flex !important;
}
.wpe-cyber-team-section .ea-tm-social-links li:nth-child(2) a i::before {
    font-size: 0px !important;  
}
.wpe-cyber-team-section .ea-tm-social-links li:nth-child(2) .e-fab-twitter {
    font-size: 0px !important;  
    width: 0px !important;
}
.wpe-cyber-team-section .ea-team-member-carousel-wrap .ea-tm-wrapper {
    padding: 0 3px !important;
}

/*=========== Cyber Security Team Section End ============*/

/*=========== Cyber Security Blog Section Start ============*/

.wpe-cyber-blog-section .ea-post-wrapper .ea-img-wrap img {
    height: 270px;
    border-radius: 10px;
}
.wpe-cyber-blog-section .ea-amox-carousel .ea-item:hover .ea-img-wrap .ea-img {
    transform: unset;
}
.wpe-cyber-blog-content-section {
    overflow-x: clip;
}
.wpe-cyber-blog-content-section .ea-text p {
    font: 300 17px/26px 'Outfit';
    color: #FFFFFF;
    letter-spacing: 0.36px;
    opacity: 0.7;
}   
.wpe-cyber-blog-content-section .ea-item {
    position: relative;
}
.wpe-cyber-blog-content-section .ea-date {
    position: absolute;
    top: 15px;
    width: 102px;
    background-color: #0E142A;
    padding: 10px;
    border-radius: 8px;
    font: 500 20px/30px 'Outfit';
    text-align: center;
    left: 5px;
}
.wpe-cyber-blog-content-section .ea-item:hover .ea-date {
    background-color: #2AA2FF;
}
.wpe-cyber-blog-content-section .ea-title a {
    opacity: 0.9;
}

/*=========== Cyber Security Blog Section End ============*/

/*=========== Cyber Security Newsletter Section Start ============*/

.wpe-cyber-newsletter-section .e-con-inner {
    max-width: 1000px;
}
.wpe-cyber-newsletter-container {
    position: relative;
}
.wpe-cyber-newsletter-container form p {
    text-align: center;
}
.wpe-cyber-newsletter-container form {
    text-align: center;
}
.wpe-cyber-newsletter-container .wpcf7-form-control-wrap {
    position: relative;
    width: 50%;
    display: inline-grid;
}
.wpe-cyber-newsletter-container form .wpcf7-submit {
    position: inherit;
    right: 20%;
    background-color: #2AA2FF !important;
    padding: 12px 40px !important;
    border: unset;
    border-radius: 0 6px 6px 0 !important;
    color: #FFFFFF;
    font: 400 18px/23px "Outfit";
    letter-spacing: 0.36px;
    width: fit-content;
}
.wpe-cyber-newsletter-container input[type="text"] {
    background: #0E142A;
}
.wpe-cyber-newsletter-container input[type="email"] {
    border-radius: 6px 0px 0px 6px !important;
    padding: 12px 20px !important;
    border: unset;
    background: #0E142A !important;
}
.wpe-cyber-newsletter-container form .wpcf7-spinner {
    display: none;
}
.wpe-cyber-newsletter-bg-section {
    border-radius: 20px !important;
}
.wpe-cyber-newsletter-container .wpcf7 form .wpcf7-response-output {
    padding: 4px 50px;
    border: 1px solid #FFF;
    width: max-content;
    color: #FFF;
    margin: 0 auto;
    opacity: 0.8;
    margin-top: 12px;
}
.wpe-cyber-newsletter-container .wpcf7-not-valid-tip {
   display: none;
}
.wpe-cyber-newsletter-bg-section {
    height: 330px !important;
}
.wpe-cyber-newsletter-para {
    opacity: 0.8 !important;
}

/*=========== Cyber Security Newsletter Section End ============*/

/*=============== Cyber Security Theme Code End ==============*/

.owl-carousel .owl-item img {
    display: block;
    width: 100% !important;
}
.owl-carousel .owl-nav .owl-prev, .owl-carousel .owl-nav .owl-next, .owl-carousel .owl-dot {
    width: 45px;
    height: 45px;
    border-radius: 10px;
    border: none;
    color: #fff;
    background-color: #000; 
}
.owl-carousel .owl-nav .owl-prev:hover {
    background-color: #D7282F;
    color: #fff;
}
.owl-carousel .owl-nav .owl-next:hover {
    background-color: #D7282F;
    color: #fff;
}
.owl-nav {
    text-align: center;
    margin-top: 35px;
    gap: 20px;
    display: flex !important;
    justify-content: center;
}

/*=========== Cyber Return to top CSS Start ============*/

#return-to-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background-color: #2AA2FF;
    width: 50px;
    height: 50px;
    display: block;
    text-decoration: none;
    -webkit-border-radius: 35px;
    -moz-border-radius: 35px;
    border-radius: 50%;
    display: none;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    z-index: 999;
    cursor: pointer;   
    padding: 10px; 
}
#return-to-top i {
    color: #fff;
    font-weight: 800px;
    position: relative;
    top: 13px;
    font-size: 19px;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -ms-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
    padding: 3px 18px;
    cursor: pointer;
}
#return-to-top:hover {
    background-color: #FFF;
}
#return-to-top:hover svg path {
    fill: #0E142A;
}
#return-to-top:hover i {
    color: #000;
    top: 5px;
}
#return-to-top .elementor-icon i:before, .elementor-icon svg:before{
    position: absolute;
    left: 71%;
    font-weight: 900;
}
/*============= Cyber Return to top CSS End ==============*/


#maincontent {
    padding-top: 3em;
}
ul.sub-menu {
    position: absolute;
    background: #fff !important;
    padding: 0px;
    top: 100%;
    left: 0;
    margin-top: 0;
    margin-bottom: 0;
    min-width: 180px;
    z-index: 99;
    visibility: hidden;
    opacity: 0;
    -webkit-box-shadow: 0 18px 43px rgb(90 90 90 / 14%);
    -khtml-box-shadow: 0 18px 43px rgba(90,90,90,.14);
    -moz-box-shadow: 0 18px 43px rgba(90,90,90,.14);
    -ms-box-shadow: 0 18px 43px rgba(90,90,90,.14);
    -o-box-shadow: 0 18px 43px rgba(90,90,90,.14);
    box-shadow: 0 18px 43px rgb(90 90 90 / 14%);
    -webkit-transition: all 220ms linear 0ms;
    -khtml-transition: all 220ms linear 0ms;
    -moz-transition: all 220ms linear 0ms;
    -ms-transition: all 220ms linear 0ms;
    -o-transition: all 220ms linear 0ms;
    transition: all 220ms linear 0ms;
    -webkit-border-radius: 2px;
    -khtml-border-radius: 2px;
    -moz-border-radius: 2px;
    -ms-border-radius: 2px;
    -o-border-radius: 2px;
    border-radius: 2px;
    clip: unset !important;
    -webkit-transform: scaleY(0);
    -khtml-transform: scaleY(0);
    -moz-transform: scaleY(0);
    -ms-transform: scaleY(0);
    -o-transform: scaleY(0);
    transform: scaleY(0);
    transform-origin: 0 0 0;
    -webkit-transform-origin: 0 0 0;
    -ms-transform-origin: 0 0 0;
    -o-transform-origin: 0 0 0;
    text-align: left;
}
.elemento-farm-navigation-box nav.hfe-nav-menu__layout-horizontal li:hover .sub-menu{
    visibility: visible;
    opacity: 1;
    clip: inherit;
    -webkit-transform: scaleY(1);
    -khtml-transform: scaleY(1);
    -moz-transform: scaleY(1);
    -ms-transform: scaleY(1);
    -o-transform: scaleY(1);
    transform: scaleY(1);
}
.elemento-farm-navigation-box .sub-menu li a:before {
    content: '';
    width: 100%;
    height: 1px;
    position: absolute;
    bottom: 0px;
    background-color: #fff;
    left: 0;
    transform-origin: right center;
    -webkit-transform-origin: right center;
    -webkit-transform: scale(0,1);
    -khtml-transform: scale(0,1);
    -moz-transform: scale(0,1);
    -ms-transform: scale(0,1);
    -o-transform: scale(0,1);
    transform: scale(0,1);
    -webkit-transition: transform .3s cubic-bezier(.37,.31,.2,.85);
    -khtml-transition: transform .3s cubic-bezier(.37,.31,.2,.85);
    -moz-transition: transform .3s cubic-bezier(.37,.31,.2,.85);
    -ms-transition: transform .3s cubic-bezier(.37,.31,.2,.85);
    -o-transition: transform .3s cubic-bezier(.37,.31,.2,.85);
    transition: transform .3s cubic-bezier(.37,.31,.2,.85);
}
.sub-menu li {
    border-bottom: unset !important;
}
.elemento-farm-navigation-box .sub-menu li:hover>a:before {
    transform-origin: left center;
    -webkit-transform-origin: left center;
    -webkit-transform: scale(1,1);
    -khtml-transform: scale(1,1);
    -moz-transform: scale(1,1);
    -ms-transform: scale(1,1);
    -o-transform: scale(1,1);
    transform: scale(1,1);
}

@keyframes aaa {
  0%{
    left: -110%;
    top: 90%;
  }50%{
    left: 10%;
    top: -30%;
  }100%{
    top: -10%;
    left: -10%;
  }
}
/*-------Preloader------------*/
.demo{ 
    background: linear-gradient(263deg, #0E142A 0%, #0E142A 100%);
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
}
.loader img {
    object-fit: fill;
    width: 100%;
    height: 100%;
    margin: 0 auto;
}
.loader{
    width: 300px;
    height: 300px;
    margin: 0 auto;
    position: relative;
    top: 30%;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}
.loader .loader-inner-1{
    width: 270px;
    height: 270px;
    border-radius: 50%;
    border-bottom: 10px dashed #A06F48;
    position: absolute;
    animation: loading-1 5s infinite linear;
}
.loader .loader-inner-2{
    width: 170px;
    height: 170px;
    border-radius: 50%;
    border-bottom: 10px dotted #ffb67a;
    position: absolute;
    top: 50px;
    left: 45px;
    animation: loading-1 1s infinite linear;
}
.loader .loader-inner-3{
    width: 70px;
    height: 70px;
    border-radius: 50%;
    border-bottom: 5px solid #805810;
    position: absolute;
    top: 100px;
    left: 90px;
    animation: loading-1 2s infinite linear;
}
@keyframes loading-1{
    from{ -webkit-transform: rotate(0deg); }
    to{ -webkit-transform: rotate(360deg); }
}