:root {
    --special-blue:#444bf7;
    --authors: #4D576B;
    --text: #202938;
    --green: #38C983;
    }


  
    body {
        font-family: Inter;
    }

    /*button class*/
    .blue {
        background-color: var(--special-blue);
        border-radius: 20px;
        align-self: center;
        margin: 10px 0px;
        padding: 12px 16px;
        box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.04), 0px 2px 6px rgba(0, 0, 0, 0.04), 0px 0px 1px rgba(0, 0, 0, 0.04);

    }

    /*navigation*/
    .logo {
        width: 40px;
        height: 40px;
    }

    #TryFree {
        display: flex;
        font-size: 16px;
        line-height: 16px;
        width: 119px;
        height: 40px;
        justify-content: center;
    }
  
    .nav-item a {
        color:var(--text)!important;
        font-weight: 600;
        font-size: 16px;
        line-height: 22.4px;
        margin: 18px 30px 0px 0px;
    }

    .nav-link a:hover{
        color: white;
    }

    .nav-button {
        margin: 15px 30px 0px 20px; 
    }

    /*ebook section*/
    .hero {
        height: calc(90vh - 80px);
    }
    
    #ebook {
        max-width: 375px;
        max-height: 526px;
        margin-top: 4px;
    }

    .hero-title {
        font-style: normal;
        font-weight: 700;
        line-height: 110%; 
        color:var(--text);
        font-size: 52px;
        margin-bottom: 0.5em;
        -webkit-text-stroke: 1px black;
    }

    .authors-img {
        border-radius: 50%;
        width: 28px;
        height: 28px;  
    }

    .authors {
        color:var(--authors);
        font-size: 14px;
        font-weight: 400;
        line-height: 20px;
    }

    .authors p {
        margin-right: 5px;
    }

    .hero-content {
        font-size: 16px;
        line-height: 32px;
        font-weight: 400;
    }

    .hero-text {
        max-width: 520px;
    }

    .hero-button {
        display: flex;
        border-radius: 32px;
        padding: 8px 40px;
        font-size: 24px;
    }

    /*modal*/
  
     .custom-modal {
        width: 712px;
        height: 523px;
        max-width: 712px;
        border-radius: none;
        
    }
    .custom-content {
        padding: 1em;
        border: none;
        border-radius: 0;
        box-shadow: 0px 35px 50px -35px rgba(0, 0, 0, 0.25);
        max-width: 95vw;
    } 
    .modal-backdrop { 
        background-color: #EEEEEE; 
    }
    

    .form-intro h3  {
        font-weight: 600;
        line-height: 110%;
    }

    .form-intro p {
        font-size: 15px;
        line-height: 25.6px;
    }

    label {
        font-size: 14px;
    }

    .form-footer {
        margin-left: 5px;
    }

    /* validation*/
    .sent {
        background-color: #38C983;
        border-radius: 20px;
        align-self: center;
        margin: 10px 0px;
        padding: 12px 16px;
    }

    #output {
       
        color:var(--green);
        font-weight: 600;
        font-size: 16px;
        margin-top: 20px;
        margin-left: 22px;
    }

    .mobileEbook {
        display: none;
    }

    /* for mobile phones */
    @media screen and (max-width: 767px) {
        
        .hero-title {
            font-size: 36px;
            margin-bottom: 25px;
            margin-top: 25px;
        }
        .hero-content {
            font-size: 16px;
        }

        .hero-footer {
            display: flex;
            justify-content: center;
        }
        .hero-button {
            padding: 6px 40px;
            margin-bottom: 80px;
        }
        
        .nav-button {
            margin: 15px 30px 0px 0px; 
        }
        
        .authors {
            margin-bottom: 10px;
        }
        .ebook {
            display: none;
        }

        .mobileEbook {
            display: block;
            margin-top: 1em;
            margin-bottom: 1em;
        }
        .ebookSize {
            width: 340px;
            height: 459px;
        }
        .hero{
            margin-top: 0px;
        }

        /*output mobile */
        #output {
            margin-left: 0;
        }
     }

     @media (min-width: 768px) and (max-width: 1024px) {
       .hero-title {
           font-size: 39px;
       }
       .hero-content {
        font-size: 14px;
       }

       #ebook {
        width: 340px;
        height: 459px;
    }

      }