.body-new {
  margin: 0;
  font-family: Arial, sans-serif;
  background: #f4f6f9;
  color: #333;
}

.container-new {
  /* width: 1200px; */
  margin: 0 auto;
}

/* HEADER */
.header-new {
  background: #fff;
  border-bottom: 1px solid #ddd;
}

.header-inner-new {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 0;
}

.logo-title-new {
  font-size: 22px;
  font-weight: bold;
  color: #1f3c88;
}

.logo-tagline-new {
  font-size: 12px;
  color: #666;
}

.nav-new a {
  margin-left: 20px;
  text-decoration: none;
  color: #1f3c88;
  font-weight: 600;
}

/* MAIN LAYOUT */
.main-layout-new {
  display: flex;
  gap: 20px;
  margin-top: 30px;
}

@media (max-width: 768px) {
.main-layout-new {
  margin-top: 10px!important;
} }



.sidebar-right-new {
  width: 250px;
}

.content-new {
  width: 640px;
}

.content-new-100 {
  width: 100%;
}

/* SIDEBAR BOX */
.sidebar-box-new {
  background: #fff;
  padding: 20px;
  margin-bottom: 20px;
  border-radius: 8px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.05);
}

.sidebar-box-new h3 {
  margin-top: 0;
  color: #1f3c88;
}

.sidebar-box-new ul {
  list-style: none;
  padding: 0;
}

.sidebar-box-new ul li {
  margin-bottom: 10px;
}

.sidebar-box-new ul li a {
  text-decoration: none;
  color: #333;
}

/* HERO */
.hero-new {
  background: linear-gradient(90deg,#1f3c88,#2c5db3);
  color: white;
  padding: 40px;
  border-radius: 10px;
  text-align: center;
  margin-bottom: 40px;
  position: relative;
}

.ranking-ribbon-new {
  position: absolute;
  top: -15px;
  left: 20px;
  background: gold;
  color: #333;
  padding: 8px 15px;
  font-weight: bold;
  border-radius: 20px;
}

/* CARDS */
.cards-new {
  display: flex;
  gap: 20px;
}

.card-new {
  background: #fff;
  border-radius: 10px;
  padding: 20px;
  width: 33%;
  box-shadow: 0 4px 15px rgba(0,0,0,0.08);
  text-align: center;
  position: relative;
}

.featured-new {
  border: 2px solid #e67e22;
}

.card-badge-new,
.card-badge-blue-new,
.card-badge-gold-new {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: bold;
  color: white;
}

.card-badge-new { background:#e67e22; }
.card-badge-blue-new { background:#2c5db3; }
.card-badge-gold-new { background:#d4af37; }

.rating-new {
  color: #f4b400;
  margin: 10px 0;
}

/* BUTTONS */
.btn-primary-new {
  display: block;
  background: #2c8c3c;
  color: white;
  padding: 10px;
  border-radius: 6px;
  text-decoration: none;
  margin-bottom: 10px;
}

.btn-secondary-new {
  display: block;
  background: #1f3c88;
  color: white;
  padding: 10px;
  border-radius: 6px;
  text-decoration: none;
}


/* SIDEBAR WRAPPER */
.sidebar-left-new {
  /* width: 250px; */
}

/* Hide left sidebar on mobile */
@media (max-width: 834px) {
    .sidebar-left-new {
        display: none !important;
    }
}

/* CARD CONTAINER */
.sidebar-card-new {
  background: #f0f5fa;
  border-radius: 6px;
  overflow: hidden;
 /* box-shadow: 0 6px 18px rgba(0,0,0,0.08); */
  margin-bottom: 25px;
  border: 1px solid #d6dce5;
}

/* HEADER (Soft Blue Gradient) */
.sidebar-header-new {
  background: linear-gradient(to bottom, #d7e1ec, #d2daea);
  padding: 10px 20px;
  /* text-shadow: 1px 1px 2px #7f96be; */
  font-size: 20px;
  font-weight: 500;
  color: #143271;
  border-bottom: 1px solid #d6dce5;
  font-family: Verdana, Arial,Helvetica, sans-serif;
}

/* LIST */
.sidebar-list-new {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar-list-new li {
  border-bottom: 1px solid #d6dce5;
}

.sidebar-list-new li:last-child {
  border-bottom: none;
}

.sidebar-list-new li a {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 10px 20px;
  text-decoration: none;
  color: #1f3c88;
  font-size: 16px;
  font-weight: 500;
  transition: background 0.2s ease;
  font-family: Verdana, Arial,Helvetica, sans-serif;
}

/* Hover Effect */
.sidebar-list-new li a:hover {
  background: #dde4ee;
}



/* LIST */
.sidebar-list2-new {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar-list2-new li {
  border-bottom: 1px solid #d6dce5;
}

.sidebar-list2-new li:last-child {
  border-bottom: none;
}

.sidebar-list2-new li a {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 10px 20px;
  text-decoration: none;
  color: #333333;
  font-size: 14px;
  font-weight: 400;
  transition: background 0.2s ease;
  font-family: Verdana, Arial,Helvetica, sans-serif;
}

/* Hover Effect */
.sidebar-list2-new li a:hover {
  background: #dde4ee;
}



/* ICON STYLES */
.icon-box-new {
  width: 34px;
  height: 28px;
  background: linear-gradient(to bottom, #3e7ec9, #3b7aca);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  font-weight: bold;
  font-size: 16px;
  box-shadow: inset 0 1px 2px rgba(255,255,255,0.4);
}

/* Circle icon for pheromones */
.icon-circle-new {
  width: 28px;
  height: 28px;
  background: linear-gradient(to bottom, #3e7ec9, #3b7aca);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-weight: bold;
  font-size: 16px;
}





 :root {
            --year-color-new: #c16314;
            --rankings-bg-new: #d26e11;
            --gold-top-new: #dfb856;
            --gold-bottom-new: #ecd5ab;
            --research-bg-new: #fff9f2;
            --research-border-new: #f2e1cc;
            --white-line-new: rgba(255, 255, 255, 0.9);
        }

        .content-card-new {
            position: relative;
            box-shadow: 0 6px 18px rgba(0,0,0,0.08);
            background: #fff;
            border-left: 1px solid #ddd;
            border-right: 1px solid #ddd;
            border-top: 1px solid #ddd;
            border-bottom: none;
            /* border-radius: 8px; */
            max-width: 900px;
            margin: 0px auto;
            font-family: 'Roboto', sans-serif;
        }

        /* --- THE LONG RESEARCH BAR --- */
        .research-bar-new {
            /* background-color: var(--research-bg-new); */
            background: linear-gradient(to right, #f6eddf, #fdf8f0);
            border-bottom: 1px solid var(--research-border-new);
            padding: 18px 20px 18px 160px; 
            font-size: 18px;
            color: #8a5926;
            font-weight: 400;
           /*  border-radius: 8px 8px 0 0; */
            position: relative;
            font-family: "Verdana", "Arial", sans-serif;
        }

        /* --- THE SHIELD --- */
        .shield-wrapper-new {
            position: absolute;
            top: -15px; 
            left: 35px;
            width: 100px;
            z-index: 20;
            text-align: center;
        }

        .gold-shield-new {
            background: linear-gradient(180deg, var(--gold-top-new) 0%, var(--gold-bottom-new) 100%);
            padding: 12px 0 35px 0; 
            border: 1px solid var(--white-line-new);
            border-radius: 4px 4px 0 0;
            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
        }

        .year-text-new {
            font-family: 'Montserrat', sans-serif;
            font-size: 26px;
            font-weight: 600;
            color: var(--year-color-new);
            position: relative;
            top: 5px; 
        }

        /* --- THE RANKINGS RIBBON --- */
        .rankings-ribbon-new {
            position: absolute;
            top: 45px; 
            width: 114%;
            left: -7%;
            background: var(--rankings-bg-new);
            color: #f7ebcd;
            font-family: Verdana,arial, sans-serif;
            font-size: 16px;
            font-weight: 500;
            /*text-transform: uppercase; */
            padding: 5px 0;
            box-shadow: 0 3px 5px rgba(0,0,0,0.2);
            z-index: 25;
        }

        .fold-new {
            position: absolute;
            top: 100%;
            width: 0;
            height: 0;
            border-style: solid;
        }
        .fold-left-new { left: 0; border-width: 0 8px 8px 0; border-color: transparent #8a4608 transparent transparent; }
        .fold-right-new { right: 0; border-width: 8px 8px 0 0; border-color: #8a4608 transparent transparent transparent; }

        /* --- THE TAIL WITH WING-EDGE OUTLINE --- */
        .shield-tail-new {
            position: relative;
            width: 100px;
            height: 20px;
            background: var(--gold-bottom-new);
            /* The requested sharp upward notch geometry */
            clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 20%, 0 100%);
            margin-top: -1px;
            overflow: hidden;
        }

        /* Outer white layer that sits behind the gold fill to create the border */
        .shield-tail-new::after {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: var(--white-line-new);
            /* Slightly offset to trace the edges */
            clip-path: polygon(1px 0, 99% 0, 99% 95%, 50% 25%, 1px 95%);
            z-index: 1;
        }
        
        /* Inner gold fill to mask the white and leave only a thin outline on wings */
        .shield-tail-new::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: var(--gold-bottom-new);
            /* Mask clip path */
            clip-path: polygon(2px 0, 98% 0, 98% 90%, 50% 30%, 2px 90%);
            z-index: 2;
        }

        .main-content-new { padding: 20px 40px 10px; }


        .h1-new { font-family: Montserrat, Verdana, Arial, sans-serif; color: #164188; font-size: 32px; margin: 0; text-align:center; }
        @media (max-width: 768px) { 
          .h1-new {
              font-size: 24px  } }            }

        .h3-new { font-family: Verdana, Arial, sans-serif; color: #164188; font-size: 24px; margin: 0; text-align:left; font-weight:500;}
        .subhead-new { 
          /*font-family: "Open Sans",sans-serif;  
            color: #555454
            font-weight:500;
            */
        
         /*VERSION 2 */
          /*
          font-family: Helvetica, Arial, sans-serif;
          color: #555; 
          font-size: 16px; 
          font-weight: 300;
          margin: 0; 
          text-align:left; 
          line-height: 1.5;
         -webkit-font-smoothing: subpixel-antialiased;
          */

 /*VERSION 3 */
          font-size: 16px !important; /* Slightly smaller than body text for hierarchy */
          font-family: 'Inter', sans-serif;
          line-height: 1.5; /* Tightened for card layouts */
          font-weight: 300 !important; /* Slightly heavier than article text for better legibility on cards */
          color: #636e72 !important; /* A slightly lighter grey than your deep slate for secondary info */
          margin: 0; 
          text-align:left;
          -webkit-font-smoothing: subpixel-antialiased;
    

  }
          @media (max-width: 768px) { 
          .subhead-new {
              font-size: 16px;
              line-height: 1.5;  } }     



.content-headline-above-cards-new {
            position: relative;
            /*background: #f5f5f9; */
            background: #f3f3f3;
            border-left: 1px solid #ddd;
            border-right: 1px solid #ddd;
            border-top: none;
            border-bottom: none;
            /* border: 1px solid #ddd; */
            /* border-radius: 8px; */
            max-width: 900px;
            margin: 0px auto;
            font-size: 24px;
            font-weight: 500;
            /* color: #124089; 
            font-weight: 500;
            font-family: "Verdana,arial", sans-serif; */

            color:#333333;
            font-family: 'Montserrat', sans-serif !important;
            padding-top:40px;
            padding-bottom:10px;
            padding-left: 30px;
            -webkit-font-smoothing: subpixel-antialiased; 
           /* box-shadow: 0 6px 18px rgba(0,0,0,0.08); */

           font-weight: 700 !important; /* Black weight */
           letter-spacing: -0.04em; /* Heavy fonts need tighter spacing */


        }
        @media (max-width: 768px) { 
          .content-headline-above-cards-new {
              font-size: 20px;
              line-height: 1.2;
                              } }  
        @media (min-width: 800px) { 
          .content-headline-above-cards-new {
              font-size: 22px; } }  

.container-new2 {
  display: flex;
  flex-direction: row; /* Force horizontal */
  flex-wrap: nowrap;   /* Prevent wrapping on desktop */
  gap: 15px;           /* Slightly smaller gap to save space */
  font-family: Arial, sans-serif;
  justify-content: center;
  padding: 20px;
  border-left: 1px solid #ddd;
  border-right: 1px solid #ddd;
  border-top: none;
  border-bottom: 1px solid #ddd;
  /* background-color: #f5f6fc; */
  background: linear-gradient(to bottom, #f3f3f3, #f3f4fb);
  width: 100%;
  max-width: 900px;   /* Limits the total width of the row */
  margin: 0 auto;      /* Centers the entire group on the page */
  box-sizing: border-box;
  box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}

.card-new2 {
  flex: 1;             /* Allows cards to grow/shrink equally */
  min-width: 250px;    /* Minimum width before it gets too squished */
  max-width: 320px;    /* Maximum width so they don't get too huge */
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  position: relative;
  border: 1px solid #ddd;
  display: flex;
  flex-direction: column;
}



.card-new-single-product {
  flex: 1;             /* Allows cards to grow/shrink equally */
  min-width: 250px;    /* Minimum width before it gets too squished */
  max-width: 600px;    /* Maximum width so they don't get too huge */
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
  position: relative;
  border: 1px solid #ddd;
  display: flex;
  flex-direction: column;
}




.badge-new2 {
  position: absolute;
  /* top: 10px; */
  left: 15px;
  padding: 8px 12px 4px 12px!important;
  border-radius: 4px;
  color: white;
  font-size: 16px!important;
  font-weight: bold;
  z-index: 2;
}

@media (max-width: 768px) {
.badge-new2 {
  padding: 8px 12px 4px 12px!important;
} }



.badge-choice-new2 { background-color: #ab5537; }
.badge-top-new2 { background-color: #2c3e50; }
.badge-top-gold-new2 { background-color: #d4a017; }

.badge-home-1-new2 {background: linear-gradient(to right, #aa5438, #ac5639); }
.badge-home-2-new2 {background: linear-gradient(to right, #2f436c, #374c73); }
.badge-home-3-new2 {background: linear-gradient(to right, #c79f6b, #cfa773); }

.header-new2 {
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
}


.header-home-1-new {background: linear-gradient(to right, #1d478b, #486c9c,#284f89); }
.header-home-2-new {background: linear-gradient(to right, #2f60a6, #4776ba,#214d91); }
.header-home-3-new {background: linear-gradient(to right, #28559b, #5b769c,#af8d59); }


.header-blue-new2 { background: linear-gradient(to bottom, #2980b9, #1a5276); }
.header-dark-new2 { background: linear-gradient(to bottom, #34495e, #2c3e50); }
.header-light-blue-new2 { background: linear-gradient(to bottom, #3498db, #2980b9); }

.title-new2 {
  font-size: 26px!important;
  margin: 0;
  margin-top: 25px;
}

/* This targets the link specifically */
.title-new2 a {
  color: #ffffff;          /* Makes the text white */
  text-decoration: none;   /* Removes the underline */
}

/* Optional: This keeps the color white even after the link is clicked */
.title-new2 a:visited {
  color: #ffffff;
}

.content-new2 {
  padding: 20px;
  text-align: center;
}

.product-img-new2 {
  max-width: 100%;
  height: auto;
  margin-bottom: 15px;
}

.rating-new2 {
  margin-bottom: 15px;
}

.stars-new2 {
  color: #f1c40f; /* Gold color */
  font-size: 20px;
  display: inline-block;
}

.half-star-new2 {
  position: relative;
  display: inline-block;
  color: #ccc; /* The empty part (gray) */
}

.half-star-new2::before {
  content: '★';
  position: absolute;
  left: 0;
  top: 0;
  width: 50%; /* Only fill half */
  overflow: hidden;
  color: #f1c40f; /* The filled part (gold) */
}

.score-new2 {
  font-weight: bold;
  color: #333;
}

.features-new2 {
  list-style: none;
  padding: 0;
  text-align: left;
  min-height: 120px;
}

.features-new2 li {
  /* font-size: 14px; */
  color: #555;
  margin-bottom: 10px;
  padding-left: 25px;
  position: relative;

   font-size: 14px!important;
   font-family: 'Inter', sans-serif!important ;
   font-weight:300!important;
    -webkit-font-smoothing: subpixel-antialiased;

}

@media (max-width: 768px) {
.features-new2 li {
  font-size: 17px!important ;
} }


.features-new2 li::before {
  /* content: '✔'; */
  content: "\2713"; /* This is the Unicode for a checkmark */
  position: absolute;
  left: 0;
  color: #28A745;
  font-weight: bold;
}




.features-new3 {
  list-style: none;
  padding: 0;
  text-align: left;
  min-height: 120px;
}

.features-new3 li {
  /* font-size: 14px; */
  color: #555;
  margin-bottom: 10px;
  padding-left: 25px;
  position: relative;

   font-size: 16px!important;
   font-family: 'Inter', sans-serif!important ;
   font-weight:300!important;
    -webkit-font-smoothing: subpixel-antialiased;

}

@media (max-width: 768px) {
.features-new3 li {
  font-size: 17px!important ;
} }


.features-new3 li::before {
  /* content: '✔'; */
  content: "\2713"; /* This is the Unicode for a checkmark */
  position: absolute;
  left: 0;
  color: #28A745;
  font-weight: bold;
}






.btn-new2 {
  display: block;
  text-decoration: none;
  padding: 12px;
  border-radius: 6px;
  margin-bottom: 10px;
  font-weight: bold;
  font-size: 16px;
}

.btn-green-new2 {
  background: linear-gradient(to bottom, #5ba46a, #458252);
  color: white;
}

.btn-blue-new2 {
  background: linear-gradient(to bottom, #4a90e2, #357abd);
  color: white;
}




/* --- Mobile Specific Styles --- */
@media (max-width: 768px) { /* Triggering mobile view earlier to prevent squishing */
  .container-new2 {
    flex-direction: column; /* Stack vertically */
    align-items: center;
    padding: 10px;
  }

 .card-new2 {
    width: 100%;
    max-width: 400px;
    min-width: unset; /* Remove min-width for mobile */
    margin-bottom:30px;
  }

   .card-new-single-product {
    width: 100%;
    max-width: 400px;
    min-width: unset; /* Remove min-width for mobile */
    margin-bottom:30px;
  }


  .title-new2 {
    font-size: 24px!important;; /* Slightly smaller text for mobile headers */
  }
  
  .btn-new2 {
    padding: 15px; /* Larger tap targets for fingers */
  }
}



/* Header with subtle blue tint */
.header-box1 {
  background-color: #d0deec;
  padding: 20px!important;
  text-align: center;
}

/*
.title-box1 {
  margin: 0;
  font-size: 20px;
  font-weight: 500;
  color: #143271;
  font-family: Verdana, Arial,Helvetica, sans-serif;

}

*/

.title-box1 {
  margin: 0;
  color: #143271;
  font-size: 20px!important;
  font-weight: 500;
  font-family: Verdana, Arial,Helvetica, sans-serif;
  display: flex;
  align-items: center;
  /* justify-content: left; */
  gap: 12px; /* Space between shield and text */
}


.shield-icon-box1 {
  color: #3b71ca; /* Matches your button blue */
  font-size: 24px; /* Adjust size to match text height */
}


/* Content area */
/*
.content-box1 {
  padding: 24px;
  border-left: 4px solid #d0deec;  
  border-right: 4px solid #d0deec;
  border-bottom: 4px solid #d0deec;
}


.card-box1 {
  width: 270px;
  background-color: #ffffff;
  border-radius: 6px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  font-family: 'Inter', sans-serif;
  overflow: hidden;
  border: 1px solid #eef2f6;
}
*/

/* Update this specific class in your CSS */
.content-box1 {
  padding: 22px 12px 22px 20px;
  background-color: #ffffff; /* Ensures the inside is white */
  /* The thin blue lining on left, right, and bottom */
  border-left: 2px solid #d0deec;   /* Adjust color to match button */
  border-right: 2px solid #d0deec;
  border-bottom: 2px solid #d0deec;
  /* Rounds the bottom corners to match the outer card */
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
}

/* Ensure the outer card doesn't have a conflicting border */
.card-box1 {
  width: 270px;
  background-color: transparent; /* Let the header and content provide color */
  border-radius: 6px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  font-family: 'Inter', sans-serif;
  overflow: hidden;
  border: none; /* Remove the old all-around border */
}



.list-box1 {
  list-style: none;
  padding: 0;
  margin: 0 0 24px 0;
}

/* List items with checkmark icon */
.item-box1 {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #333;
  margin-bottom: 18px;
  font-weight: 500;
  font-family: Verdana, Arial, Helvetica, sans-serif;
}

.icon-box1 {
  width: 20px;
  height: 20px;
  background-color: #6da06f; /* Muted green from image */
  border-radius: 50%;
  margin-right: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  flex-shrink: 0;
}

/* Pure CSS Checkmark */
.icon-box1::after {
  content: '';
  width: 5px;
  height: 9px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  margin-bottom: 2px;
}

/* The Blue Button */
.button-box1 {
  display: block;
  background-color: #3b71ca;
  color: #ffffff;
  text-align: center;
  text-decoration: none;
  padding: 14px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 18px;
  transition: background-color 0.2s ease;
}

.button-box1:hover {
  background-color: #2c5aa0;
}


    .blog-article-h1-headline {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 32px !important; 
    font-weight: 800 !important; 
    color: #1b3d6d !important; 
    line-height: 1.2!important; 
    margin-bottom: 20px!important; 
    letter-spacing: -0.01em!important; 
    }

.article-padding-cta-article {
  padding-top:20px;
}




.top-cta-hero-articles {
    background: #f4f6f9;
    border: 1px solid #e2e5ea;
    border-radius: 10px;
    margin: 25px 0 35px 0;
    padding: 25px 10px 25px 25px;
}

.cta-inner-articles {
    display: flex;
    align-items: center;
    gap: 30px;
}

.cta-image-articles {
    position: relative;
    flex: 0 0 400px;
    text-align: center;
}

.cta-image-articles img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}

.badge-articles {
    position: absolute;
    top: -10px;
    left: -10px;
    background: gold;
    color: #000;
    font-weight: bold;
    font-size: 13px;
    padding: 6px 10px;
    border-radius: 4px;
}

.cta-content-articles {
    flex: 1;
}

.cta-updated-articles {
    font-size: 13px;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.cta-title-articles {
    font-size: 24px!important;
    margin: 8px 0 10px 0;
    font-weight: 700;
}

.cta-sub-articles {
    font-size: 18px!important;
    margin-bottom: 15px;
    /* font-family: 'Inter', sans-serif!important; */
    font-family: Arial, sans-serif!important;
    color: #333333;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.cta-bullets-articles {
    list-style: none;
    padding: 0;
    /* font-family: 'Inter', sans-serif!important; */
    font-family: Arial, sans-serif!important;
    margin: 0 0 18px 0;
}

.cta-bullets-articles li {
    margin-bottom: 6px;
    font-size: 16px!important;
    color: #333333;
    /* font-family: 'Inter', sans-serif!important; */
    font-family:  Arial, sans-serif!important;
    padding-left: 18px;
    position: relative;
    font-weight: 500;
}

.cta-bullets-articles li:before {
    content: "\2713";
    position: absolute;
    left: 0;
    color: #1a7f37;
    font-weight: bold;
}


.cta-button-articles { 
  display: inline-block; 
  background: #dfb856!important;
  color: #1b3d6d!important;
  padding: 12px 22px; 
  border-radius: 6px; 
  text-decoration: none; 
  font-weight: 600; 
  transition: 0.2s ease; } 

.cta-button-articles:hover { 
  background: #c9a34a!important; }



/* MOBILE */
@media (max-width: 768px) {

    .top-cta-hero-articles {
        padding: 0;
        border-radius: 0;
        box-shadow: 0 8px 20px rgba(0,0,0,0.05);
    }

    .cta-inner-articles {
        flex-direction: column;
        gap: 0;
    }

    .cta-image-articles {
        flex: unset;
        width: 100%;
    }

    .cta-image-articles img {
        width: 100%;
        height: auto;
        display: block;
        border-radius: 0;
    }

    .badge-articles {
        top: 10px;
        left: 10px;
    }

    .cta-content-articles {
        padding: 20px;
        text-align: left;
    }

    .cta-button-articles {
        width: 100%;
        text-align: center;
    }
}