/*-----------------------------------*\ 
  #BLOG SECTION
\*-----------------------------------*/

.main {
  background: var(--background-secondary);
  padding: var(--py) 0;
}

.blog .h2 {
  line-height: 1.3;
  margin-bottom: 3rem;
  text-align: center;
}

.blog-card-group { margin-bottom: 3rem;
  box-shadow: 0 0 5px 2px rgba(40,90,230,.1);

}

.blog-card {
  background: white;;
  padding: 10px;
  margin-bottom: 1rem;
  border-radius: 10px;
  box-shadow: 0 10px 10px hsla(0, 0%, 0%, 0.05);
  transition: 0.25s ease;
}

.blog-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 10px hsla(0, 0%, 0%, 0.1);
}

.blog-card-banner { display: none; }

.blog-content-wrapper { padding: 0px 5px; }

.blog-topic {
  background: var(--action-secondary);
  color: var(--foreground-secondary);
  font-weight: 600;
  padding: 0.25rem 1rem;
  border-radius: 5px;
  margin-bottom: 1rem;
}

.blog-topic:hover {
  background: var(--foreground-secondary);
  color: var(--action-secondary);
}

.blog-card .h3 {
  line-height: 1.4;
  margin-bottom: 1rem;
}

.blog-card .h3:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
}

.blog-text,
.profile-wrapper { display: none; }

.blog .wrapper {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  flex-wrap:       wrap;
  gap: 15px;
}

.blog .h4 { color: var(--foreground-secondary); }

.blog .h4:hover { color: var(--accent); }

.blog .text-sm {
  display:     flex;
  align-items: center;
  gap: 5px;
  color: var(--foreground-tertiary);
}

.blog .separator {
  background: var(--foreground-tertiary);
  margin-inline: 3px;
  margin: 0 3px; /* fallback for margin-inline */
  width:  3px;
  height: 3px;
  border-radius: 3px;
}

.blog ion-icon { --ionicon-stroke-width: 50px; }

.load-more {
  margin-inline: auto;
  margin: auto; /* fallback for margin-inline */
  background: var(--foreground-secondary);
  color: var(--background-secondary);
  padding: 0.6875rem 1.1875rem;
}

.load-more:hover { background: var(--accent); }





/*-----------------------------------*\ 
  #ASIDE
\*-----------------------------------*/







/*-----------------------------------*\ 
  #FOOTER
\*-----------------------------------*/

footer { background: white;; }

footer .pg-container {
  padding: var(--py) 15px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 30px;
}

footer .wrapper { text-align: center; }

.footer-logo { margin-bottom: 10px; }

.footer-text {
  color: var(--foreground-secondary);
  max-width: 300px;
  margin-inline: auto;
  margin: auto; /* fallback for margin-inline */
}

.footer-title {
  color: var(--foreground-primary);
  font-weight: 700;
  margin-bottom: 0.4rem;
}

.footer-link { color: var(--foreground-secondary); }

.footer-link:hover { color: var(--accent); }

.copyright {
  color: var(--foreground-secondary);
  font-size: var(--fs-4);
  text-align: center;
  padding: 1rem;
  border-top: 1px solid var(--action-primary);
}

.copyright a {
  color: var(--accent);
  font-weight: 500;
}

.copyright a:hover { text-decoration: underline; }





/*-----------------------------------*\ 
  #MEDIA QUERIES
\*-----------------------------------*/

/**
 * responsive for larger than 550px screen
 */



  :root {

    /**
     * typography 
     */

    --fs-base: 0.90rem;

  }


  /**
   * BLOG 
   */

  

  .blog-card-banner {
    display: block;
    overflow: hidden;
    border-radius: 5px;
    
    
  }

  .blog-banner-img {
    width:  100%;
    height: 100%;
    object-fit: cover;
    
  }



@media (min-width: 550px) { .blog-card {
  display: flex;
  flex-direction: column;
  grid-template-columns: 3fr 4fr;
  gap: 20px;
}

}




/**
 * responsive for larger than 650px screen
 */

@media (min-width: 650px) {

  :root {

    /**
     * typography 
     */

    --fs-1: 2.25rem;

  }



  /**
   * REUSED STYLE 
   */

  .pg-container { padding: 0 30px; }



  /**
   * HEADER 
   */

  .navbar { padding: 30px 0; }



  /**
   * BLOG 
   */

  .blog .h2 {
    position: relative;
    text-align: left;
    padding-left: 2rem;
  }

  .blog .h2::before {
    content: '';
    position: absolute;
    top:  0;
    left: 0;
    background: var(--action-primary);
    width:  5px;
    height: 100%;
    border-radius: 5px;
  }

  .blog-text,
  .profile-wrapper { display: block; }

  .blog-text {
    color: var(--foreground-secondary);
    font-size: var(--fs-4);
    display: -webkit-box;
    line-clamp: 3;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 1rem;
  }

  .blog .wrapper-flex {
    display:         flex;
    justify-content: start;
    align-items:     center;
    gap: 10px;
  }

  .profile-wrapper {
    width:  56px;
    height: 56px;
    background: var(--action-primary);
    padding: 3px;
    border-radius: 50%;
  }

  .profile-wrapper img { border-radius: 50%; }

  .blog .wrapper {
    flex-direction: column;
    align-items: start;
    gap: 0;
  }



  /**
   * FOOTER 
   */

  footer .pg-container {
    padding: var(--py) 30px;
  }

  footer .wrapper { text-align: left; }

  .footer-text { margin: 0; }

}





/**
 * responsive for larger than 768px screen
 */

@media (min-width: 768px) {

  /**
   * REUSED STYLE 
   */

  .pg-container { max-width: 800px; }

}





/**
 * responsive for larger than 1024px screen
 */

@media (min-width: 1024px) {

  :root {

    /**
     * typography 
     */

    --fs-base: 1rem;
    --fs-1: 3rem;

  }



  /**
   * REUSED STYLE 
   */

  .pg-container { max-width: 1150px; }



  /**
   * HEADER 
   */

  header .btn-group { display: none; }

  header .flex-wrapper {
    display: flex;
    gap: 30px;
  }

  .desktop-nav {
    display:     flex;
    align-items: center;
    gap: 30px;
  }

  .desktop-nav .nav-link {
    color: var(--foreground-secondary);
    font-weight: 700;
  }

  .desktop-nav .nav-link:hover { color: var(--accent); }

  .theme-btn-desktop {
    position: relative;
    background: var(--background-secondary);
    color: var(--white);
    width:  52px;
    height: 26px;
    display:         flex;
    justify-content: center;
    align-items:     center;
    gap: 10px;
    border-radius: 100px;
  }

  .theme-btn-desktop.light {
    background: linear-gradient(45deg, hsl(7, 100%, 71%), hsl(46, 100%, 65%));
  }

  .theme-btn-desktop.dark {
    background: linear-gradient(45deg, hsl(225, 100%, 60%), hsl(296, 80%, 40%));
  }

  .theme-btn-desktop::before {
    content: '';
    position: absolute;
    background: var(--white);
    width:  21px;
    height: 21px;
    border-radius: 30px;
    top: 50%;
    left: 3px;
    transform: translateY(-50%);
    box-shadow: 0 2px 10px -2px hsla(0, 0%, 0%, 0.05);
    z-index: 2;
  }

  .theme-btn-desktop.dark::before { left: calc(100% - 24px); }



  /**
   * HERO 
   */

  .hero { text-align: left; }

  .hero .pg-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 50px;
  }

  .hero .btn-group {
    justify-content: start;
    gap: 30px;
  }

  .hero .right {
    position: relative;
    display:         flex;
    justify-content: center;
    align-items:     center;
  }

  .hero .pattern-bg {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    height: 200px;
    background: url(../images/pattern.png);
    background-size: contain;
    opacity: 0.2;
  }

  .hero .img-box {
    position: relative;
    z-index: 2;
  }

  .hero-img {
    width:  100%;
    height: 100%;
    object-fit: contain;
    border-radius: 0 0 280px 230px;
    transform: translate(10px, -10px);
  }

  .hero .shape {
    position: absolute;
    top:  50%;
    left: 50%;
    border-radius: 50%;
    transform: translate(-50%, -42%) rotate(-20deg);
  }

  .hero .shape-1 {
    background: var(--accent);
    width:  90%;
    height: 90%;
    z-index: -1;
  }

  .hero .shape-2 {
    width:  92%;
    height: 92%;
    box-shadow: inset 0 -30px 0 var(--action-primary);
    z-index: 2;
  }



  /**
   * MAIN 
   */

  .main .pg-container {
    display: grid;
    grid-template-columns: 5fr 2fr;
    gap: 60px;
  }



  /**
   * ASIDE 
   */

  

  


  .tags { margin-bottom: 3rem; }

  .tags .wrapper {
    display:   flex;
    flex-wrap: wrap;
    gap: 0.2rem;
  }

  .tags .hashtag {
    background: var(--action-primary);
    color: var(--foreground-secondary);
    padding: 5px 10px;
    font-size: var(--fs-5);
    font-weight: 700;
    border-radius: 5px;
  }

  .tags .hashtag:hover {
    background: var(--foreground-secondary);
    color: var(--action-primary);
  }

  .contact { margin-bottom: 3rem; }

  .contact p {
    color: var(--foreground-secondary);
    margin-bottom: 1rem;
  }

  .social-link {
    display:         flex;
    justify-content: center;
    align-items:     center;
    gap: 10px;
  }

  .social-link .icon-box {
    width:  45px;
    height: 45px;
    background: var(--action-secondary);
    border-radius: 50%;
    display:         flex;
    justify-content: center;
    align-items:     center;
    font-size: 22px;
  }

  .social-link .discord { color: hsl(235, 86%, 65%); }

  .social-link .twitter { color: hsl(203, 89%, 53%); }

  .social-link .facebook { color: hsl(220, 46%, 48%); }
  
  .social-link .icon-box:hover {
    background: var(--accent);
    color: var(--white);
  }

  .newsletter {
    position: sticky;
    top: 7rem;
    margin-bottom: 98px;
  }

  .newsletter p {
    color: var(--foreground-secondary);
    margin-bottom: 1rem;
  }

  .newsletter input {
    border: none;
    background: var(--action-primary);
    display: block;
    width: 100%;
    padding: 0.5rem 1rem;
    font: inherit;
    color: var(--foreground-secondary);
    border-radius: 5px;
    margin-bottom: 1rem;
  }

  .newsletter input::placeholder { color: inherit; }

  .newsletter input:focus {
    outline: 2px solid;
    outline-offset: 0;
  }

  .newsletter .btn-primary {
    margin-inline: auto;
    margin: auto; /* fallback for margin-inline */
  }

  .main-navigation {
    position: relative;
    margin-right: -20px;
    padding: 0;
    float: right;
}

/*== margins ==*/
.dtr-m-auto { margin: 0 auto !important }
.dtr-m-0 { margin: 0 !important }
.dtr-mt-0, .dtr-my-0 { margin-top: 0 !important }
.dtr-mr-0, .dtr-mx-0 { margin-right: 0 !important }
.dtr-mb-0, .dtr-my-0 { margin-bottom: 0 !important }
.dtr-ml-0, .dtr-mx-0 { margin-left: 0 !important }
.dtr-m-5 { margin: 5px !important }
.dtr-mt-5, .dtr-my-5 { margin-top: 5px !important }
.dtr-mr-5, .dtr-mx-5 { margin-right: 5px !important }
.dtr-mb-5, .dtr-my-5 { margin-bottom: 5px !important }
.dtr-ml-5, .dtr-mx-5 { margin-left: 5px !important }
.dtr-m-10 { margin: 10px }
.dtr-mt-10, .dtr-my-10 { margin-top: 10px !important }
.dtr-mr-10, .dtr-mx-10 { margin-right: 10px !important }
.dtr-mb-10, .dtr-my-10 { margin-bottom: 10px !important }
.dtr-ml-10, .dtr-mx-10 { margin-left: 10px !important }
.dtr-m-15 { margin: 15px }
.dtr-mt-15, .dtr-my-15 { margin-top: 15px !important }
.dtr-mr-15, .dtr-mx-15 { margin-right: 15px !important }
.dtr-mb-15, .dtr-my-15 { margin-bottom: 15px !important }
.dtr-ml-15, .dtr-mx-15 { margin-left: 15px !important }
.dtr-m-20 { margin: 20px !important }
.dtr-mt-20, .dtr-my-20 { margin-top: 20px !important }
.dtr-mr-20, .dtr-mx-20 { margin-right: 20px !important }
.dtr-mb-20, .dtr-my-20 { margin-bottom: 20px !important }
.dtr-ml-20, .dtr-mx-20 { margin-left: 20px !important }
.dtr-m-30 { margin: 30px !important }
.dtr-mt-30, .dtr-my-30 { margin-top: 30px !important }
.dtr-mr-30, .dtr-mx-30 { margin-right: 30px !important }
.dtr-mb-30, .dtr-my-30 { margin-bottom: 30px !important }
.dtr-ml-30, .dtr-mx-30 { margin-left: 30px !important }
.dtr-m-35 { margin: 35px !important }
.dtr-mt-35, .dtr-my-35 { margin-top: 35px !important }
.dtr-mr-35, .dtr-mx-35 { margin-right: 35px !important }
.dtr-mb-35, .dtr-my-35 { margin-bottom: 35px !important }
.dtr-ml-35, .dtr-mx-35 { margin-left: 35px !important }
.dtr-m-40 { margin: 40px !important }
.dtr-mt-40, .dtr-my-40 { margin-top: 40px !important }
.dtr-mr-40, .dtr-mx-40 { margin-right: 40px !important }
.dtr-mb-40, .dtr-my-40 { margin-bottom: 40px !important }
.dtr-ml-40, .dtr-mx-40 { margin-left: 40px !important }
.dtr-m-50 { margin: 50px !important }
.dtr-mt-50, .dtr-my-50 { margin-top: 50px !important }
.dtr-mr-50, .dtr-mx-50 { margin-right: 50px !important }
.dtr-mb-50, .dtr-my-50 { margin-bottom: 50px !important }
.dtr-ml-50, .dtr-mx-50 { margin-left: 50px !important }
.dtr-m-60 { margin: 60px !important }
.dtr-mt-60, .dtr-my-60 { margin-top: 60px !important }
.dtr-mr-60, .dtr-mx-60 { margin-right: 60px !important }
.dtr-mb-60, .dtr-my-60 { margin-bottom: 60px !important }
.dtr-ml-60, .dtr-mx-60 { margin-left: 60px !important }
.dtr-m-70 { margin: 70px !important }
.dtr-mt-70, .dtr-my-70 { margin-top: 70px !important }
.dtr-mr-70, .dtr-mx-70 { margin-right: 70px !important }
.dtr-mb-70, .dtr-my-70 { margin-bottom: 70px !important }
.dtr-ml-70, .dtr-mx-70 { margin-left: 70px !important }
.dtr-m-80 { margin: 80px !important }
.dtr-mt-80, .dtr-my-80 { margin-top: 80px !important }
.dtr-mr-80, .dtr-mx-80 { margin-right: 80px !important }
.dtr-mb-80, .dtr-my-80 { margin-bottom: 80px !important }
.dtr-ml-80, .dtr-mx-80 { margin-left: 80px !important }
.dtr-m-90 { margin: 90px !important }
.dtr-mt-90, .dtr-my-90 { margin-top: 90px !important }
.dtr-mr-90, .dtr-mx-90 { margin-right: 90px !important }
.dtr-mb-90, .dtr-my-90 { margin-bottom: 90px !important }
.dtr-ml-90, .dtr-mx-90 { margin-left: 90px !important }
.dtr-m-100 { margin: 100px !important }
.dtr-mt-100, .dtr-my-100 { margin-top: 100px !important }
.dtr-mr-100, .dtr-mx-100 { margin-right: 100px !important }
.dtr-mb-100, .dtr-my-100 { margin-bottom: 100px !important }
.dtr-ml-100, .dtr-mx-100 { margin-left: 100px !important }
.dtr-m-150 { margin: 150px !important }
.dtr-mt-150, .dtr-my-150 { margin-top: 150px !important }
.dtr-mr-150, .dtr-mx-150 { margin-right: 150px !important }
.dtr-mb-150, .dtr-my-150 { margin-bottom: 150px !important }
.dtr-ml-150, .dtr-mx-150 { margin-left: 150px !important }
/* minus left margins */
.dtr-ml-minus10 { margin-left: -10px !important; }
.dtr-ml-minus15 { margin-left: -15px !important; }
.dtr-ml-minus20 { margin-left: -20px !important; }
.dtr-ml-minus30 { margin-left: -30px !important; }
.dtr-ml-minus40 { margin-left: -40px !important; }
.dtr-ml-minus50 { margin-left: -50px !important; }
/* minus top margins */
.dtr-mt-minus10 { margin-top: -10px !important; }
.dtr-mt-minus20 { margin-top: -20px !important; }
.dtr-mt-minus30 { margin-top: -30px !important; }
.dtr-mt-minus40 { margin-top: -40px !important; }
.dtr-mt-minus50 { margin-top: -50px !important; }
.dtr-mt-minus60 { margin-top: -60px !important; }
.dtr-mt-minus70 { margin-top: -70px !important; }
.dtr-mt-minus80 { margin-top: -80px !important; }
.dtr-mt-minus90 { margin-top: -90px !important; }
.dtr-mt-minus100 { margin-top: -100px !important; }
.dtr-mt-minus110 { margin-top: -110px !important; }
.dtr-mt-minus120 { margin-top: -120px !important; }
.dtr-mt-minus130 { margin-top: -130px !important; }
.dtr-mt-minus140 { margin-top: -140px !important; }
.dtr-mt-minus150 { margin-top: -150px !important; }
/* minus bottom margins */
.dtr-mb-minus10 { margin-bottom: -10px !important; }
.dtr-mb-minus20 { margin-bottom: -20px !important; }
.dtr-mb-minus30 { margin-bottom: -30px !important; }
.dtr-mb-minus40 { margin-bottom: -40px !important; }
.dtr-mb-minus50 { margin-bottom: -50px !important; }
.dtr-mb-minus60 { margin-bottom: -60px !important; }
.dtr-mb-minus70 { margin-bottom: -70px !important; }
.dtr-mb-minus80 { margin-bottom: -80px !important; }
.dtr-mb-minus90 { margin-bottom: -90px !important; }
.dtr-mb-minus100 { margin-bottom: -100px !important; }
.dtr-mb-minus110 { margin-bottom: -110px !important; }
.dtr-mb-minus120 { margin-bottom: -120px !important; }
.dtr-mb-minus130 { margin-bottom: -130px !important; }
.dtr-mb-minus140 { margin-bottom: -140px !important; }
.dtr-mb-minus150 { margin-bottom: -150px !important; }
/* minus side margins */
.dtr-mx-minus15 { margin-left: -15px !important; margin-right: -15px !important; }
/*== paddings ==*/
.dtr-p-0 { padding: 0 !important }
.dtr-pt-0, .dtr-py-0 { padding-top: 0 !important }
.dtr-pr-0, .dtr-px-0 { padding-right: 0 !important }
.dtr-pb-0, .dtr-py-0 { padding-bottom: 0 !important }
.dtr-pl-0, .dtr-px-0 { padding-left: 0 !important }
.dtr-p-5 { padding: 5px !important }
.dtr-pt-5, .dtr-py-5 { padding-top: 5px !important }
.dtr-pr-5, .dtr-px-5 { padding-right: 5px !important }
.dtr-pb-5, .dtr-py-5 { padding-bottom: 5px !important }
.dtr-pl-5, .dtr-px-5 { padding-left: 5px !important }
.dtr-p-10 { padding: 10px !important }
.dtr-pt-10, .dtr-py-10 { padding-top: 10px !important }
.dtr-pr-10, .dtr-px-10 { padding-right: 10px !important }
.dtr-pb-10, .dtr-py-10 { padding-bottom: 10px !important }
.dtr-pl-10, .dtr-px-10 { padding-left: 10px !important }
.dtr-p-15 { padding: 15px !important }
.dtr-pt-15, .dtr-py-15 { padding-top: 15px !important }
.dtr-pr-15, .dtr-px-15 { padding-right: 15px !important }
.dtr-pb-15, .dtr-py-15 { padding-bottom: 15px !important }
.dtr-pl-15, .dtr-px-15 { padding-left: 15px !important }
.dtr-p-20 { padding: 20px !important }
.dtr-pt-20, .dtr-py-20 { padding-top: 20px !important }
.dtr-pr-20, .dtr-px-20 { padding-right: 20px !important }
.dtr-pb-20, .dtr-py-20 { padding-bottom: 20px !important }
.dtr-pl-20, .dtr-px-20 { padding-left: 20px !important }
.dtr-p-30 { padding: 30px !important }
.dtr-pt-30, .dtr-py-30 { padding-top: 30px !important }
.dtr-pr-30, .dtr-px-30 { padding-right: 30px !important }
.dtr-pb-30, .dtr-py-30 { padding-bottom: 30px !important }
.dtr-pl-30, .dtr-px-30 { padding-left: 30px !important }
.dtr-p-40 { padding: 40px !important }
.dtr-pt-40, .dtr-py-40 { padding-top: 40px !important }
.dtr-pr-40, .dtr-px-40 { padding-right: 40px !important }
.dtr-pb-40, .dtr-py-40 { padding-bottom: 40px !important }
.dtr-pl-40, .dtr-px-40 { padding-left: 40px !important }
.dtr-p-50 { padding: 50px !important }
.dtr-pt-50, .dtr-py-50 { padding-top: 50px !important }
.dtr-pr-50, .dtr-px-50 { padding-right: 50px !important }
.dtr-pb-50, .dtr-py-50 { padding-bottom: 50px !important }
.dtr-pl-50, .dtr-px-50 { padding-left: 50px !important }
.dtr-p-60 { padding: 60px !important }
.dtr-pt-60, .dtr-py-60 { padding-top: 60px !important }
.dtr-pr-60, .dtr-px-60 { padding-right: 60px !important }
.dtr-pb-60, .dtr-py-60 { padding-bottom: 60px !important }
.dtr-pl-60, .dtr-px-60 { padding-left: 60px !important }
.dtr-p-70 { padding: 70px !important }
.dtr-pt-70, .dtr-py-70 { padding-top: 70px !important }
.dtr-pr-70, .dtr-px-70 { padding-right: 70px !important }
.dtr-pb-70, .dtr-py-70 { padding-bottom: 70px !important }
.dtr-pl-70, .dtr-px-70 { padding-left: 70px !important }
.dtr-p-80 { padding: 80px !important }
.dtr-pt-80, .dtr-py-80 { padding-top: 80px !important }
.dtr-pr-80, .dtr-px-80 { padding-right: 80px !important }
.dtr-pb-80, .dtr-py-80 { padding-bottom: 1px !important }
.dtr-pl-80, .dtr-px-80 { padding-left: 80px !important }
.dtr-p-100 { padding: 100px !important }
.dtr-p-90 { padding: 90px !important }
.dtr-pt-90, .dtr-py-90 { padding-top: 90px !important }
.dtr-pr-90, .dtr-px-90 { padding-right: 90px !important }
.dtr-pb-90, .dtr-py-90 { padding-bottom: 90px !important }
.dtr-pl-90, .dtr-px-90 { padding-left: 90px !important }
.dtr-p-100 { padding: 100px !important }
.dtr-pt-100, .dtr-py-100 { padding-top: 100px !important }
.dtr-pr-100, .dtr-px-100 { padding-right: 100px !important }
.dtr-pb-100, .dtr-py-100 { padding-bottom: 100px !important }
.dtr-pl-100, .dtr-px-100 { padding-left: 100px !important }
.dtr-p-130 { padding: 130px !important }
.dtr-pt-130, .dtr-py-130 { padding-top: 130px !important }
.dtr-pr-130, .dtr-px-130 { padding-right: 130px !important }
.dtr-pb-130, .dtr-py-130 { padding-bottom: 130px !important }
.dtr-pl-130, .dtr-px-130 { padding-left: 130px !important }
.dtr-p-150 { padding: 150px !important }
.dtr-pt-150, .dtr-py-150 { padding-top: 150px !important }
.dtr-pr-150, .dtr-px-150 { padding-right: 150px !important }
.dtr-pb-150, .dtr-py-150 { padding-bottom: 150px !important }
.dtr-pl-150, .dtr-px-150 { padding-left: 150px !important }
/*== images / shodow ==*/
.dtr-circle-img { border-radius: 50%; }
.dtr-rounded-img, .dtr-rounded-img img, .dtr-rounded { border-radius: 10px; }
.dtr-shadow { -webkit-box-shadow: 0px 10px 20px 0px rgba(5,24,43,0.10); -moz-box-shadow: 0px 10px 20px 0px rgba(5,24,43,0.10); box-shadow: 0px 10px 20px 0px rgb(111 111 111);}
/*== borders ==*/
.dtr-border-top { border-top: 1px solid rgba(23,50,164,0.05); }
.dtr-border-right { border-right: 1px solid rgba(23,50,164,0.05); }
.dtr-border-bottom { border-bottom: 1px solid rgba(23,50,164,0.05); }
.dtr-border-left { border-left: 1px solid rgba(23,50,164,0.05); }
.dtr-border-top-2px { border-left: 2px solid rgba(23,50,164,0.05); }
.dtr-border-right-2px { border-left: 2px solid rgba(23,50,164,0.05); }
.dtr-border-bottom-2px { border-left: 2px solid rgba(23,50,164,0.05); }
.dtr-border-left-2px { border-left: 2px solid rgba(23,50,164,0.05); }
.dtr-border-2px { border: 2px solid #ccc; }
.dtr-border-top-none { border-top-width: 0; }
.dtr-border-right-none { border-right-width: 0; }
.dtr-border-bottom-none { border-bottom-width: 0; }
.dtr-border-left-none { border-left-width: 0; }
.dtr-border-none { border-width: 0 !important; }

  /**
   * FOOTER 
   */

   #dtr-footer { background-color: #000; }
  #dtr-footer h1, #dtr-footer h2, #dtr-footer h3, #dtr-footer h4, #dtr-footer h5, #dtr-footer h6 { color: #fff; }
  #dtr-footer h6 {
    font-size: 1.000em;
    line-height: 1.2em;
  }
  #dtr-footer, #dtr-footer a { color: rgba(255,255,255,0.5); }
  #dtr-footer a:hover { color: #7a14ff; }
  .dtr-copyright { border-color: rgba(255,255,255,0.08); }
  #take-to-top { background-color: rgba(5,24,43,1); color: #fff; }
  #dtr-footer { padding: 0; }
.dtr-main-footer { padding: 100px 0; }
.dtr-copyright { padding: 30px 0; border-width: 1px 0 0 0; border-style: solid; }
/* take-to-top */
#take-to-top { width: 40px; height: 40px; z-index: 999; text-align: center; text-decoration: none; border-radius: 50%; -webkit-transition: all .3s ease; transition: all .3s ease; display: block; }
#take-to-top::before { display: block; font-family: 'icomoon'; content: "\eac4"; font-size: 16px; line-height: 38px; color: inherit; }
#take-to-top.dtr-fade-scroll { position: fixed; right: 30px; bottom: 30px; display: none; }


}

.aside {
  display: flex;
  flex-direction: column;
  align-self: stretch;
}
.topics { margin-bottom: 3rem; }

  .topic-btn {
    display:     flex;
    align-items: stretch;
    background: white;;
    border-radius: 10px;
    box-shadow: 0 5px 5px hsla(0, 0%, 0%, 0.05);
    overflow: hidden;
  }

  .topic-btn:not(:last-child) { margin-bottom: 1rem; }

  .topic-btn .icon-box {
    font-size: 22px;
    width: 70px;
    display:         flex;
    justify-content: center;
    align-items:     center;
    background: var(--action-primary);
    color: var(--foreground-secondary);
  }

  .topic-btn:hover .icon-box {
    background: var(--accent);
    color: var(--white);
  }

  .topic-btn ion-icon { --ionicon-stroke-width: 40px; }

  .topic-btn p {
    padding: 15px;
    color: var(--foreground-secondary);
    font-weight: 700;
  }

  .aside .h2 {
    color: var(--foreground-secondary);
    margin-bottom: 3rem;
    text-align: center;
    line-height: 1.3;
  }

  .aside .wrapper {
    background: white;;
    border-radius: 10px;
    padding: 40px;
    box-shadow: 0 5px 5px hsla(0, 0%, 0%, 0.05);
  }

@media (max-width: 768px) { /* Adjust this value based on your design's breakpoint */
  .main {
    flex-direction: column;
  }

  .blog, .aside {
    /* On small screens, take full width */
    width: 100%;
  }
}




.pill {
  display: inline-block;
  position: relative;
  border-radius: 50px;
  padding: 8px 16px;
  line-height: 1;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 700;
  color: white;
  background-color: #8B8B8B;
}
.pill-light {
  color: #8B8B8B;
  background-color: #F3F3F3;
}
.pill-yellow {
  background-color: #7a14ff;
}
.pill-yellow.pill-light {
  color: #7a14ff;
  background-color: #fde5ff;
}

.newsletter-input {
  border-radius:15px;
  padding:15px;
}

.newsletter-button {
  width:100%;
  text-align:center;
  border-radius:5px;
  padding:10px;
  justify-content: center;
  background:white;
  border:none;
  color:black;
  display:inline-flex;
  align-items:center;
  font-weight:lighter;
}

.style-0j {
  margin: auto;
  max-width: 1440px;
  padding: 0px 106px;
  width: 100%;
  padding-left: 106px;
  box-sizing: border-box;
}

.style-1j {
  display: block;
  list-style: outside none none;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
  padding: 0px;
  position: relative;
  z-index: 1;
  box-sizing: border-box;
}

.style-2j {
  padding-left: 0px;
  padding-right: 0px;
  justify-content: space-between;
  margin-right: 0px;
  margin-left: 0px;
  align-items: stretch;
  flex-wrap: nowrap;
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  display: flex;
  margin-top: 0px;
  transform: matrix(1, 0, 0, 1, 0, 0);
  box-sizing: content-box;
  height: 505.5px;
  position: relative;
  transition-property: transform;
  transition-timing-function: ease;
  width: 100%;
  z-index: 1;
}

.style-3j {
  padding-left: 0px;
  padding-right: 12px;
  padding-bottom: 12px;
  padding-top: 12px;
  flex: 0 0 auto;
  width: 50%;
  box-sizing: border-box;
  flex-shrink: 0;
  margin-top: 0px;
  max-width: 100%;
  height: 505.5px;
  display: block;
  position: relative;
  transition-property: transform;
}

.style-4j {
  height: 481.5px;
  width: 100%;
  border: 1px solid rgb(206, 211, 218);
  border-radius: 12px;
  box-sizing: border-box;
  display: block;
}

.style-5j {
  background-color: rgb(255, 255, 255);
  border-radius: 12px;
  color: rgb(51, 58, 62);
  display: flex;
  flex-direction: column;
  height: 479.5px;
  overflow: hidden;
  position: relative;
  transition: all 0.25s ease-in-out 0s;
  width: 100%;
  text-decoration: none solid rgb(51, 58, 62);
  cursor: pointer;
  box-sizing: border-box;
}

.style-6j {
  position: relative;
  aspect-ratio: 16 / 9;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  line-height: 0px;
  margin: 0px;
  overflow: hidden;
  padding: 0px;
  pointer-events: none;
  box-sizing: border-box;
}

.style-7j {
  color: rgb(51, 58, 62);
  flex: 3 1 0%;
  height: 337.5px;
  object-fit: cover;
  transition: transform 0.25s ease-in-out 0s;
  width: 100%;
  pointer-events: none;
  display: inline-block;
  max-width: 100%;
  box-sizing: border-box;
  border-style: none;
}

.style-8j {
  flex: 1 1 auto;
  padding: 24px;
  pointer-events: none;
  justify-content: space-between;
  flex-direction: column;
  display: flex;
  box-sizing: border-box;
}

.style-9j {
  pointer-events: none;
  box-sizing: border-box;
  display: block;
}

.style-10j {
  font-weight: 600;
  color: rgb(94, 116, 132);
  font-size: 16px;
  line-height: 20px;
  pointer-events: none;
  box-sizing: border-box;
}

.style-11j {
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  overflow: hidden;
  padding-bottom: 0px;
  margin-block: 0px;
  margin-bottom: 0px;
  margin-inline: 0px;
  color: rgb(0, 35, 60);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.5px;
  line-height: 34px;
  pointer-events: none;
  box-sizing: border-box;
}

.style-12j {
  padding-left: 12px;
  padding-right: 0px;
  padding-bottom: 12px;
  padding-top: 12px;
  flex: 0 0 auto;
  width: 50%;
  box-sizing: border-box;
  flex-shrink: 0;
  margin-top: 0px;
  max-width: 100%;
  height: 505.5px;
  display: block;
  position: relative;
  transition-property: transform;
}

.style-13j {
  height: 481.5px;
  width: 100%;
  border: 1px solid rgb(206, 211, 218);
  border-radius: 12px;
  box-sizing: border-box;
  display: block;
}

.style-14j {
  background-color: rgb(255, 255, 255);
  border-radius: 12px;
  color: rgb(51, 58, 62);
  display: flex;
  flex-direction: column;
  height: 479.5px;
  overflow: hidden;
  position: relative;
  transition: all 0.25s ease-in-out 0s;
  width: 100%;
  text-decoration: none solid rgb(51, 58, 62);
  cursor: pointer;
  box-sizing: border-box;
}

.style-15j {
  position: relative;
  aspect-ratio: 16 / 9;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  line-height: 0px;
  margin: 0px;
  overflow: hidden;
  padding: 0px;
  pointer-events: none;
  box-sizing: border-box;
}

.style-16j {
  color: rgb(51, 58, 62);
  flex: 3 1 0%;
  height: 337.5px;
  object-fit: cover;
  transition: transform 0.25s ease-in-out 0s;
  width: 100%;
  pointer-events: none;
  display: inline-block;
  max-width: 100%;
  box-sizing: border-box;
  border-style: none;
}

.style-17j {
  flex: 1 1 auto;
  padding: 24px;
  pointer-events: none;
  justify-content: space-between;
  flex-direction: column;
  display: flex;
  box-sizing: border-box;
}

.style-18j {
  pointer-events: none;
  box-sizing: border-box;
  display: block;
}

.style-19j {
  font-weight: 600;
  color: rgb(94, 116, 132);
  font-size: 16px;
  line-height: 20px;
  pointer-events: none;
  box-sizing: border-box;
}

.style-20j {
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  display: -webkit-box;
  overflow: hidden;
  padding-bottom: 0px;
  margin-block: 0px;
  margin-bottom: 0px;
  margin-inline: 0px;
  color: rgb(0, 35, 60);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.5px;
  line-height: 34px;
  pointer-events: none;
  box-sizing: border-box;
}
/* Base styles - already provided */
/* Add your existing CSS here */