/*======================== FONT ========================*/
@font-face {
    font-family: 'CustomFont';
    src: url('fonts/MainFont.ttf');
}
@font-face {
    font-family: 'CustomFont2';
    src: url('fonts/FontTitle.otf');
}

/*======================== BODY ========================*/
html.ltie9 body, body{ min-width: 1250px; } 
body{ color: #353535; }

/*======================== CONTAINER ========================*/
.container{ max-width: 1250px; } 

/*======================== NAVIGATION ========================*/
.droidtale-caption-wrapper .droidtale-caption-inner{ max-width: 1250px; }

.droidtale-logo-inner{ max-width: 190px; }

.droidtale-logo{ margin-top: -4px; }

.droidtale-logo{ margin-bottom: 20px; }

.droidtale-navigation-wrapper, .droidtale-logo-right-text{ margin-top: 35px; }
.droidtale-navigation-wrapper .droidtale-main-menu > li > a{ padding-bottom: 34px; }

.top-social-wrapper .social-icon a{ color: #fcfcfc; }

.droidtale-navigation, .sf-with-ul-pre-btn, .droidtale-responsive-navigation{ font-family: "CustomFont"; }

.droidtale-header-inner, .droidtale-header-wrapper.header-style-5-wrapper .droidtale-header-inner{ background-color: rgb(36, 36, 36); position: fixed; z-index: 999;width: 100%;}

@media only screen and (max-width: 767px) { .droidtale-header-wrapper.header-style-5-wrapper .droidtale-header-inner{ background-color: rgb(36, 36, 36); z-index: 999; } }

.droidtale-main-menu > li > a, .droidtale-main-menu > li > a i{ color: #ffffff; } 
@media only screen and (max-width: 1100px) { body .droidtale-donate-button, body .droidtale-donate-button:hover, body .droidtale-top-woocommerce-button{ color: #ffffff; }} 

.droidtale-main-menu > li:hover > a, .droidtale-main-menu > li.current-menu-item > a, .droidtale-main-menu > li.current-menu-ancestor > a{ color: #fff; opacity: 1; filter: alpha(opacity=100); }
.droidtale-navigation-gimmick{ background-color: #fff; }

.droidtale-main-menu > li:hover > a.light{ transition:color 1s; }
#droidtale-responsive-navigation.dl-menuwrapper button { background-color: #0c0c0c; }

.sf-with-ul-pre-btn{width: 130px;height: 50px;background: transparent;border: 2px solid white;outline: none;border-radius: 6px;font-size: 16px;margin-top: -32px;cursor: pointer;color: #ffffff;transition: 0.5s;letter-spacing: 0.1rem;}

.sf-with-ul-pre-btn img {display:none;margin-left: -20px;margin-top: 0px;position: absolute;}
.sf-with-ul-pre-btn:hover img {display:unset;}

.sf-with-ul-pre-btn:hover {background: white;color: #162938;}

.droidtale-navigation a::after  {content: '';position: absolute;left: 0;top: 20px;width: 100%;height: 3px;background: white;border-radius: 5px;transform-origin: right;transform: scaleX(0);transition: transform 0.5s;}

.droidtale-navigation a:hover::after {transform-origin: left;transform: scaleX(1);}

.droidtale-navigation a.light::after  {background: black;}

.droidtale-header-inner.light, .droidtale-header-wrapper.header-style-5-wrapper .droidtale-header-inner.light {background-color: rgb(150, 150, 150);}

.droidtale-header-inner, .droidtale-header-wrapper.header-style-5-wrapper .droidtale-header-inne {transition: background-color 1s;}

/*======================== HEADING,SPAN ========================*/
.heading, .services_heading, .tutoriels_heading {font-family:'CustomFont';font-size: 2.25rem;text-align: center;}
.heading, .services_heading, .tutoriels_heading {color: #fff;}

/*======================== HOME ========================*/
.home-content {display: flex; justify-content: center;text-align: center;}
#text {font-family: 'CustomFont2', sans-serif;position: fixed;top: 50%;font-size: 3em;color: #0c0c0c;}
#text_2 {font-family: 'CustomFont2', sans-serif;position: fixed;top: 50%;font-size: 3em;color: #fff;}
span {color: #fbff00;}

/*======================== ABOUT ========================*/
.about{background: #0c0c0c;z-index: 9;position: relative;display: flex;align-items: center;transition:background 1s;}
.about.light {background: #fff; }
.about-img img {width: 40vw;height: auto;}
.gifs img {width: 9.75%;height: auto;}
.gif {position: absolute; top: 31%;left: 30.5%;height: auto;}
.gif_2 {position: absolute; top: 31.5%;left: 5.5%;width: 25.75% !important;height: auto;}
.gif_32 {width: 9.75% !important;height: auto;}
.about-content {margin-left: 5%;z-index:999;}
.about-content h2 {font-family:'CustomFont';text-align: left;line-height: 1.2;}
.about-content h3 {font-family:'CustomFont';color: #fff;font-size: 1.5rem;}
.about-content p {font-family:'CustomFont';color: #fff;font-size: 1rem;margin: 5% 0 7%;}
.btn {font-family:'CustomFont';display: inline-block;padding: 1.2rem 2.8rem;background: transparent;border-radius: 0.5rem;box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.1);border: 2px solid #fff;font-size: 1rem;letter-spacing: 0.1rem;font-weight: 600;color: #fff;text-decoration: none;transition: 0.5s ease;}
.btn:hover {background: #fff;color: #162938;}
.about-section .btn img {opacity:0;
position: absolute !important;
margin-left: -20px !important;
margin-top: 54px !important;width:unset !important;height:unset !important;}
.about-section .btn:hover img{opacity:1!important;}

/*======================== TUTORIALS ========================*/
.button {display:flex;justify-content: center;align-items:center;}
.tutoriels {z-index: 9;position: relative;background: #0c0c0c;display: flex;align-items: center;transition:background 1s;padding: 5rem 5% 0rem;justify-content:center;flex-wrap:wrap;}
.tutoriels.light {background: #fff;}
.tutoriels-img img{width: 45vw;height: auto;right: 0;position: absolute;top: 0;}
.light {color:#000 !important;}
.btn.light {border: 2px solid #000;}
.btn.light:hover {background: #000;color: #fff !important;}

/*======================== TESTIMONIAL ========================*/
.testimonial {background:#0c0c0c;z-index:99;position:relative;}
.testimonial-container {display:flex;align-items:center;flex-direction:column;width:100%;padding:5rem 1rem;}
.testimonial-container .testimonial-wrapper {position:relative; width:50%;padding:5rem;}
.testimonial-slide {display:flex;align-items:center;flex-direction:column;background:#0c0c0c;border-radius:2rem;box-shadow:0 0.1rem 0.5rem rgba(0, 0, 0, 0.2);padding:3rem 0rem;border-top:0.8rem solid white;border-bottom:0.8rem solid white;}
.testimonial-slide img {width:8rem;height:8rem;object-fit:cover;border-radius:50%;border:0.5rem solid #0c0c0c;}
.testimonial-slide h3 {font-size:1.6rem;margin:2rem 0;color:#fbff00;}
.testimonial-slide p {font-size:0.8rem;text-align:center;color:#fff;}
.testimonial-box {padding:1rem;overflow:hidden;}
.swiper-slide {text-align: center;font-size: 18px;display: flex;justify-content: center;align-items: center;}

/*======================== NEWSLETTER ========================*/
.newsletter {background:#0c0c0c;position:relative;z-index:99;}
.newsletter-img img {width: 40vw;height: auto;position:absolute;right:0%;}
.newsletter_container {display: flex;flex-direction: column;justify-content: center;align-items: center;margin-top:5%;margin-right:45%;}
.newsletter_container p {color: #fff;font-size: 1.1rem;width: 80%;text-align: center;margin-top:5%;}
.newsletter_container .btn {margin-top:3%;}
.btn img {display:none;position: absolute !important;margin-left: -20px;margin-top: 4px!important;}
.btn:hover img {display:unset;}
.gifs_2 img {width:5.75%;height:auto;}
.gif_3 {margin-top:17%;right:8.5% !important;}
.img_2 {width:12.5% !important;margin-top:10%;right:5% !important;z-index:9;}

/*======================== FOOTER ========================*/
.footer-wrapper{ background-color: #272726; }
.footer-wrapper .droidtale-widget-title, .footer-wrapper .droidtale-widget-title a{ color: #fbff00; }
.footer-wrapper{ color: #bfbfbf; }
.footer-wrapper a{ color: #7f7f7f; }
.footer-wrapper a:hover{ color: #cecece; }
.footer-wrapper *{ border-color: #1b1b1b; }
.footer-wrapper .tagcloud a, .footer-wrapper .tagcloud a:hover{ color: #ffffff; }
.copyright-wrapper{ background-color: #1b1b1b; }
.copyright-wrapper{ color: #b3b3b3; }
.footer-wrapper .copyright-wrapper{ border-color: #1b1b1b; }
