html* {
    font-family: "Monserrat", sans-serif;
}


body {
    font-family: "Monserrat", sans-serif;
    margin: 0;
    overflow-x: hidden;
    background: #ffffff;
    background: linear-gradient(185deg,rgba(255, 255, 255, 1) 0%, rgba(255, 252, 252, 1) 51%, rgba(236, 231, 228, 1) 100%);
  }

  h1 {
    margin: 0;
    padding: 0;
    font-size: 2em;
    font-weight: 400;
  }

  h2 {
    margin: 0;
    padding: 0;
    font-size: 1.5em;
    font-weight: 300;
  }

  h3 {
    margin: 0;
    padding: 0;
    font-size: 1.17em;
    font-weight: 300;
  }

  h4 {
    margin: 0;
    padding: 0;
    font-size: 1em;
    font-weight: 200;
  }

  h5 {
    margin: 0;
    padding: 0;
    font-size: 0.83em;
    font-weight: 200;
  }

  a {
    text-decoration: none;
    color:#FC8202;
  }

  p {
    line-height: 1.7;
    margin: 0;
    padding: 0;
    font-size: 16px;
  }

  span {
    color:#FC8202;
  }

  .strong {
    font-weight:bold;
  }


  .main-page {
    display: flex;
    flex-direction: column;
    margin-left: auto;
    margin-right: auto;
    max-width: 1400px;
    position: relative;
    box-sizing: border-box;
    align-items: center;
    min-height: 80vh;   
    }
    
    .main-front-page {
    display: flex;
    flex-direction: column;
    margin-left: auto;
    margin-right: auto;
    max-width: 1400px;
    height: 100vh;
    position: relative;
    box-sizing: border-box;
    align-items: center;
    background: #ffffff;
    background: linear-gradient(185deg,rgba(255, 255, 255, 1) 0%, rgba(255, 252, 252, 1) 51%, rgba(236, 231, 228, 1) 100%);
    }
  

.top-hero {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 70vh;
    background-repeat: repeat;
    background-size:auto;
    background-position: center;
    justify-content: center;
}

.top-hero-text {
    display: flex;
    flex-direction: column;
    margin-left: 2em;
}


.hero-h1-top {
    color: #434242;
    margin-bottom: 0.2em !important;
    font-size: 70px;
    letter-spacing: 0.15em ;
    margin-bottom: 20px;
}

.hero-h1-bottom {
    color: #FC8202;
    margin-bottom: 0.2em;
}

.text-separator {
    color: #F2F2F2;
    width: 50%;
    margin-left: 0;
}

.hero-subtext {
    margin-top: 1em;
}


.top-hero-text h3 {
    color: #434242;
    margin: 0.5em 0;
}

.top-hero-image img {
    flex: 1;
    width: 100%;
    max-width: 600px;
    height: auto;
}

.hero {
    display: flex;
    
}


.call-action-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 2em 0;
    width: 100%;
}

.action-message {
    color: #434242;
    text-align: center;
}

.action-separator {
    width: 60%;
    margin-bottom: 1em;
    color: #F2F2F2;
}

.main-btn {
    text-decoration: none;
    background-color: #FC8202;
    color: white;
    padding: 0.5em 2em;
    border-radius: 5px;
    max-width: fit-content;
    height: fit-content;
}


.whats-app {
    display: none;
}

.cky-notice-des, .cky-title {
    color:#434242 !important;
}


.cky-btn {
    color:#FC8202 !important;
    border-color:#FC8202 !important;
}

.cky-btn-accept {
    background-color: transparent !important;
}

.cky-btn-revisit-wrapper {
    background-color: #FC8202 !important;
    display: none !important;
}

.df-book-cover {
        border-radius: 5px;
    }


.df-popup-thumb span.df-book-title {
    opacity: 1 !important;
    visibility: visible !important;
    color: #FC8202 !important;
    position:  relative !important;
}

/* Force DearFlip book titles to stay permanently visible */
._df_thumb ._df_book-title, 
._df_thumb .df-book-title,
.df-popup-thumb span.df-book-title {
    opacity: 1 !important;
    visibility: visible !important;
    bottom: 0 !important;
}




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

    html {
        font-size: 95%;
    }

    .main-page {
        padding: 0 1em;
    }


    h1 {
    font-size: 2.4em;
    }

    h4 {
    font-size: 1.2em;
    }

  
    .top-hero {
        height: 50vh;
        padding-top: 2em;
    }

 

    .top-hero-text h1 {
        margin-bottom: 0;
    }

    .text-separator {
        margin-left: auto;
        width: 60%;
    }

    .hero-subtext {
        margin-top: 0;
    }

  
    .action-message {
        font-size: 1.4em;
    }

    


  
}

@media (max-width: 765px) {
    .df-sheet {
        height: 100vh !important; /* Increase or decrease based on your needs */
        width: 100vw !important; 
        
    }

    .action-message {
        padding: 0 0.4em;
    }
}