/*
Theme Name: DL Starter
Theme URI:
Author: Domenico Lupo
Author URI: https://www.domenicolupo.it
Description: Starter Theme with fontawesome and bootstrap4
Tags: blog, one-column, two-columns, right-sidebar,  custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, translation-ready
Version: 1.0
Requires at least: 5.0
Tested up to: 5.4
Requires PHP: 7.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: dl

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

  /* ROOT STYLES */
  body{overflow-x: hidden;}
  :root{
    --main: #FE5800;
    --light: #DE7036;
    --primary: #313131;
    --secondary: #929191;
  }
  .title{font-weight: 900; border-left: 3px solid var(--main); padding-left: 10px; text-transform: uppercase;}

  a{color: var(--light);}
  a:hover{color: var(--main);}
  .btn-one{background-color: var(--light); color: #fff; padding: 10px 15px; border-radius: 25px; text-decoration: none; font-weight: 700; text-transform: uppercase;}
  .btn-one:hover{background-color: var(--main); color: #fff; text-decoration: none; padding: 13px 20px; transition-duration: 0.4s; transition-timing-function: ease-in-out;}



  /* NAVBAR */
  .nav-container{top: 10px}
  .navbar{background-color: #fff; border-radius: 100px; box-shadow: 1px 1px 10px rgba(0,0,0, 0.1);}
  .navbar-brand{width: 120px}
  .navbar > :has(.show){border-radius: 0px}
  

  /* HERO */
  .top-blob{position: absolute; top: -300px; left: -400px;}
  .right-blob{position: absolute; top: -180px; right: -200px; transform: rotate(40deg); width: 60%;}

  .hero{margin-top: 150px;}
  .text-typing, .text-nowrap {
    white-space:nowrap;
    display: block;
  }
  .hero h1{
    color: var(--black);
    -webkit-transition: all .35s;
    -moz-transition: all .35s;
    transition: all .35s;
    background-image: linear-gradient(180deg,transparent 75%,#fcf113 0);
    background-size: 0 100%;
    background-repeat: no-repeat;
    -webkit-transition: background-size .4s ease;
    transition: background-size .4s ease;
    font-size: 58px;
    font-weight: 900;
  }
  .hero .inner,
  .hero h1{min-width: 400px !important;}
  .typing-words{margin-left: -20px;}
  .typing-words span {
    text-indent: 50px;
    position: absolute;
	  overflow: hidden;
	  white-space: nowrap;
    visibility: hidden;
    border-right: 4px solid transparent;
    max-width: 16rem; /* width of widest string */
    color: var(--main);
  }
  .typing-words span:nth-child(1) {
    animation: typing 0.7s steps(5), typingReverse 0.7s steps(5) 0.7s, blink-wait 1s step-end 1 1.4s, blink-caret 0.6s step-end infinite;
  }
  .typing-words span:nth-child(2) { 
    animation: typing 0.7s steps(5) 2.4s, typingReverse 0.7s steps(5) 3.1s, blink-wait 1s step-end 1 3.8s, blink-caret 0.6s step-end infinite;
  }
  .typing-words span:nth-child(3) { 
    animation: typing 0.7s steps(5) 4.8s, typingReverse 0.7s steps(5) 5.5s, blink-wait 1s step-end 1 6.2s, blink-caret 0.6s step-end infinite;
  }
  .typing-words span:nth-child(4) { 
    animation: typing 0.7s steps(5) 7.2s, typingReverse 0.7s steps(5) 7.9s, blink-wait 1s step-end 1 8.5s, blink-caret 0.6s step-end infinite;
  }
  .typing-words span:nth-child(5) {  
    animation: blink-caret 0.6s step-end 7 9.5s, typing 1s steps(7) 9.5s forwards;
  }
  @keyframes typing {
      from { width: 0; visibility: hidden; }
      to { width: 100%; visibility: visible; }
  }
  @keyframes typingReverse {
      from { width: 100%; visibility: visible; }
      to { width: 0; }
  }
  @keyframes blink-wait {
      from, to { width: 0; visibility: hidden; }
      30%, 60% { width: 45px; visibility: visible; }
  }
  @keyframes blink-caret {
      from, to { border-color: transparent; }
      50% { border-color: #999; }
  }

  .hero .content{margin-left: 18px; max-width: 500px;}
  .hero .description{color: var(--secondary); margin-top: 30px; margin-bottom: 30px;}


  /* CATEGORIES */
  .categories{margin-top: 70px;}
  .categories .card{text-align: center; border-radius: 20px; border: none; box-shadow: 2px 3px 10px rgba(0,0,0, 0.1); margin: 20px 10px}
  .categories .card-body{padding: 30px;}
  .categories .card h2{font-weight: 700; text-transform: uppercase; font-size: 26px;}
  .categories .card img{margin-bottom: 30px;}


  /* CATEGORIES */
  .proj-title{margin-top: 100px;}
  .projects{display: flex; justify-content: center; margin-top: 20px; flex-wrap: wrap;}
  .proj{display: flex; align-items: flex-end; justify-content: center; text-align: center; min-width: 300px; min-height: 300px;}
  .proj .content{color: #fff;}
  .proj .content h3{font-weight: 700; text-transform: uppercase;}
  .proj .content p{color: rgba(255, 255, 255, 0.8)}


  /* ADV-MAIN */
  .adv-main{margin-top: 100px;}
  .adv-main .content h2{font-size: 42px; margin-bottom: 20px;}
  .adv-main .content p{color: var(--secondary); margin-bottom: 30px;}


  /* NUMBERS */
  .numeri{text-align: center;}
  .numeri-fluid{background-color: #eee; padding: 30px 0; margin-top: 80px;}
  .numeri .intro{color: var(--secondary);}
  .numeri .number{font-size: 68px; font-weight: 900; color: var(--main); padding: 0; margin: -15px 0}
  .numeri .end{color: var(--secondary);}


  /* RICAMI */
  .ricami{position: relative; margin-top: 50px;}
  .ricami .container{padding: 130px 0;}
  .ricami-img{width: 600px; position: absolute; right: 0;}
  .ricami p{color: var(--secondary); margin-bottom: 30px;}
  

  /* ADVs */
  .adv{margin-top: 70px;}
  

  /* BEST SELLER */
  .best-seller{margin-top: 100px;}


  /* FOOTER */
  footer{margin-top: 140px;}




  /*------------------------------------
  | MEDIA QUERY
  --------------------------------------*/

  @media (max-width: 575.98px) {
    .hero .inner,
    .hero h1{min-width: 0px;}
    .hero h1{font-size: 40px !important;}

    .right-blob{display: none !important;}

    .proj{width: 100%;}
    
    .ricami-img{display: none !important;}

    .numeri .col-md-3{margin: 40px 0;}

    .ricami .container{padding: 30px 0;}

    .adv img{margin: 10px 0}

  }

  @media (min-width: 576px) and (max-width: 767.98px) {
    .right-blob{display: none !important;}

    .proj{width: 100%;}
    .ricami-img{display: none !important;}

    .numeri .col-md-3{margin: 50px 0;}

    .ricami .container{padding: 40px 0;}

    .adv img{margin: 20px 0}
  }

  @media (min-width: 768px) and (max-width: 991.98px) {
    .hero h1{font-size: 52px;}

    .adv-main .content h2{font-size: 38px;}

    .ricami-img{right: -250px !important;}

    .number{font-size: 48px !important;}

  }

  @media (min-width: 992px) and (max-width: 1199.98px) {
    .top-blob{position: absolute; top: -350px; left: -450px;}

    .ricami-img{right: -150px;}
  }