/* Basic resets to avoid overflow caused by default box-model issues */
*,
*::before,
*::after {
  box-sizing: border-box;
}




/* MOBILE & TABLET FIX for topbar */
@media (max-width: 991px) {

    .topbar-bottom {
        flex-direction: column !important;
        align-items: center !important;
        gap: 1rem !important;
        padding: 1rem 0;
    }

    /* Tagline first - full width centered */
    .topbar-bottom .tagline {
        order: 1;
        font-size: 1rem;
        font-weight: 600;
        width: 100%;
        text-align: center;
    }

    /* Date second - full width centered */
    .topbar-bottom .date {
        order: 2;
        font-size: 0.9rem;
        width: 100%;
        justify-content: center !important;
    }

    /* Sign in & Subscribe third - full width centered */
    .topbar-bottom .d-flex:last-child {
        order: 3;
        width: 100%;
        justify-content: center !important;
        gap: 1rem !important;
    }

    .signin, .subscribe {
        font-size: 0.9rem;
    }

    .subscribe {
        padding: 8px 16px;
    }

    .globe-icon,
    .search-icon {
        width: 18px;
        height: 18px;
    }
}





/* Prevent any accidental horizontal overflow */
html, body {
  width: 100%;
  overflow-x: hidden; /* defensive: safe fallback */
  font-family: "Jost", sans-serif;
}

/* Tweak for the first section */
.first-section {
  align-items: start;
}

.logo{
    align-items: center;
}

/* center the logo inside .logo-title */
.logo-title {
  display: flex;
  justify-content: center; /* horizontal center */
  align-items: center;     /* vertical center */
  width: 100%;
}

/* optional: constrain logo size and ensure it doesn't overflow */
.logo {
  max-width: 220px;
  width: auto;
  height: auto;
  display: block;
}
.tagline{
    font-style: italic;
}

.signin{
    font-size: 1rem;
    font-weight: 500;
    color: #000;
    text-decoration: none;
}
.subscribe{
   font-size: 1rem;
    font-weight: 500;
    color: #fff;
    text-decoration: none; 
    background-color: #e24f00;
    border-radius: 30px;
    padding: 10px 20px;
}
/* Ensure images never exceed their container */
.first-section img,
.first-section .img-fluid {
  width: 100%;
  /* height: auto; */
  /* display: block; */
}
.headlines{
    font-family: "Jost", sans-serif;
    font-size: 1.75rem;
    font-weight: 600;
    font-style: italic;
    color: #292219;
}
.latest{
    font-size: 1rem;
        font-family: "Jost", sans-serif;
font-weight: 600;
color: #ff5c00;
}
/* Headline spacing */
.headline-title {
  font-size: 1.75rem;
   font-family: "Jost", sans-serif;
font-weight: 700;
}

.headline-paragraph{
    font-size: 1rem;
        font-family: "Poppins", sans-serif;
    color: #444;
}
.time{
           font-family: "Poppins", sans-serif;
    color: #888;
    font-size: 12px; 
}

/* Sidebar vertical divider (desktop only) */
@media (min-width: 992px) {
  .sidebar-right {
    border-left: 2px solid #e6e6e6;
  }
}

/* On smaller screens, move sidebar below and remove divider */
@media (max-width: 991.98px) {
  .sidebar-right {
    border-left: none;
    padding-left: 0;
    margin-top: 2rem;
  }
}

/* Fix for long words or inline elements causing overflow */
.first-section, .first-section * {
  word-wrap: break-word;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphens: auto;
}

/* laptop screens (1280px, 1366px) */
/* @media (min-width: 1200px) {
    .container {
        max-width: 1320px;
    }
} */

/* desktop screens (1440px, 1600px, 1920px) */
/* @media (min-width: 1400px) {
    .container {
        max-width: 1500px;
    }
} */

/* extra large desktops (4K, ultrawide) */
/* @media (min-width: 1600px) {
    .container {
        max-width: 1650px;
    }
} */

.horizontal-line {
    border: none;             /* remove default HR styling */
    border-top: 2px solid #000;   /* change 3px to any thickness you want */
    margin-top: -1.5%;
    opacity: 1 !important;

}
.lines{
    border: none;             /* remove default HR styling */
    border-top: 2px solid #000;   /* change 3px to any thickness you want */
    margin-top: -4.5%;
    opacity: 1 !important;
}
/* hr{
margin-top: 0 !important;
} */


.page-content {
    padding-left: 4px;
}


/* ORANGE BLOCK */
.orange-block {
    /* background: #ffe4c4; */
    border-radius: 6px;
}

/* Section label */
.section-label {
    font-size: 1rem;
    color: #ff5c00;
    font-weight: 700;
    letter-spacing: 0.5px;
}

/* Impact heading */
.impact-title {
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.3;
}

/* Impact text */
.impact-text {
    font-size: 0.95rem;
    line-height: 1.45;
    color: #444;
}

/* Small article titles */
.small-article-title {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1.3;
    color: #292219;
}

/* Small article paragraph */
.small-article-text {
    font-size: 1rem;
    color: #000;
    font-weight: 400;
    font-family: "Poppins", sans-serif;
margin: 0;}
    
    .strong{
        font-weight: 700;
        color: #292219;
    }

/* Read more link */
.read-more {
    color: #e94420;
    font-weight: 500;
    font-size: 1rem;
    text-decoration: none;
    margin-top: 5px !important;
}
.read-more:hover {
    text-decoration: underline;
}

/* Sidebar */
.sidebar-title {
    color: #e94420;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 0.8rem;
}

.sidebar-sub {
    font-size: 0.8rem;
    color: #888;
    margin-top: -6px;
}



/* Vertical divider already exists in your previous CSS */





/* GENERAL CARD STYLING */
.news-card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    transition: transform 0.2s ease;
    position: relative;
}

.news-card:hover {
    transform: translateY(-4px);
}



/* CARD DATE */
.card-date {
    font-size: 0.85rem;
    color: #666;
}

/* CARD 2 (BLACK LOWER PART) */
.card-2 .black-part {
    background: #000;
    color: #fff;
}

/* BADGE ICON (you can replace with real icon) */
.badge-icon i{
    font-size: 0.8rem;
    background: #ff5c00;
    color: #000;
    padding: 2px 6px;
    border-radius: 4px;
}

/* SIDEBAR */
.sidebar-category {
    color: #e94420;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
}

.sidebar-heading {
    font-size: 1.5rem;
    font-weight: 700;
    /* line-height: 1.35; */
    
}

/* Remove sidebar divider on mobile */
@media (max-width: 991px) {
    .sidebar-right {
        border-left: none;
        padding-left: 0;
    }
}

/* TITLES */
.section-main-title {
    font-size: 1.75rem;
    font-weight: 700;
    font-style: italic;
    margin-top: 2rem;
}

.section-sub-title {
    text-transform: uppercase;
    color: #ff5c00;
    font-weight: 600;
    font-size: 1rem;
}



.guide-content {
    background: #D1F9B8;
    padding: 3% 18% 14% 5% !important;
}

.guide-card {
    position: relative;
}

/* SAME WIDTH + AUTO HEIGHT CARD IMAGE */
.img-fixed {
    height: 200px;     /* adjust depending on your design */
    width: 100%;
    object-fit: cover;
}

/* FEATURED BADGE HALF ON IMAGE, HALF ON CARD */
.featured-badge {
    position: absolute;
    left: 20px;             /* horizontal position */
    top: 53%;             /* adjust this depending on your image height */
    background: #C3FF75;
    color: #000;
    padding: 4px 10px;
    font-size: 1rem;
    font-weight: 500;
    z-index: 10;
}

/* Mobile devices - adjust featured badge position */
@media (max-width: 991px) {
    .featured-badge {
        top: 47%;
    }
}

.guide-title {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 29px;
}

.guide-meta span {
    font-size: 1rem;
    color: #555;
    margin-right: 8px;
    font-weight: 400;
}

/* SIDEBAR */
.sidebar-category {
    color: #e94420;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 1rem;
}

.most-read-title {
    font-size: 0.9rem;
    font-weight: 700;
    line-height: 1.35;
}

/* Remove sidebar divider on mobile */
@media (max-width: 991px) {
    .sidebar-right {
        border-left: none;
        padding-left: 0;
    }
}



/* CTA SECTION WRAPPER */
.cta-section {
    background: transparent;
}

/* CTA BOX */
.cta-box {
    background: url("/images/power-image.webp") center/cover no-repeat;
    padding: 6%;
    color: #fff;
}

/* CTA TEXT */
.cta-heading {
    font-size: 2.5rem;
    font-weight: 700;
    font-family: "Jost", sans-serif;
}

.cta-subtext {
    font-size: 1rem;
    color: #e5e5e5;
    max-width: 70%;
    margin-top: 8px;
    font-family: "Poppins", sans-serif;
}

/* CTA BUTTON */
.cta-btn {
    background: #ff5c00;
    color: #fff;
    padding: 10px 22px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 400;
    font-size:1.169rem;
    white-space: nowrap;
    transition: 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.cta-btn:hover {
    background: #e24f00;
    color: #fff;
}

.cta-btn .cta-arrow {
    width: 40px;
    height: auto;
    display: inline-block;
}

/* if the button background is dark and you need a white icon, use an SVG with currentColor or: */
.cta-btn .cta-arrow {
    filter: brightness(0) invert(1);
}

/* Responsive tweaks */
@media (max-width: 576px) {
    .cta-heading {
        font-size: 1.4rem;
    }
    .cta-box {
        padding: 30px 20px;
    }
}



/* Default (mobile): full width */
.cta-container {
    max-width: 100%;
}

/* Tablet */
@media (min-width: 768px) {
    .cta-container {
        max-width: 720px;
    }
}

/* Laptop screens */
@media (min-width: 992px) {
    .cta-container {
        max-width: 800px;
    }
}

/* Desktop large screens (1200px+) */
@media (min-width: 1200px) {
    .cta-container {
        max-width: 1000px;
    }
}

/* Extra large screens (1400px+) — your case (1920px) */
@media (min-width: 1400px) {
    .cta-container {
        max-width: 1100px;
    }
}





/* FOOTER BASE */
.footer-section {
    background: #1d160f; 
    color: #fff;
    padding-top: 50px;
    padding-bottom: 40px;
}

/* LOGO */
.footer-logo {
    width: 120px;
}

.footer-tagline {
    font-size: 1.167rem;
    font-style: italic;
    font-family: "Jost", sans-serif;
    margin-top: -4px;
}

/* SOCIAL ICONS */
.footer-icon {
    width: 20px;
    opacity: 0.85;
    transition: 0.2s ease;
}
.footer-icon:hover {
    opacity: 1;
}

/* COPYRIGHT */
.footer-copy {
    font-size: 0.8rem;
    opacity: 0.6;
}

/* FOOTER LINKS LIST */
.footer-links {
    list-style: none;
    padding-left: 0;
}
.footer-links li {
    margin-bottom: 8px;
}
.footer-links a {
    text-decoration: none;
    color: #e6e6e6;
    font-size: 1.125rem;
    transition: 0.2s ease;
    font-family: "Jost", sans-serif;
    font-weight: 500;
}
.footer-links a:hover {
    color: #ff5c00;
}

/* NEWSLETTER */
.newsletter-heading {
    font-family: "Jost", sans-serif;
    font-weight: 600;
    margin-bottom: 10px;
    font-size: 1.813rem;
}
.newsletter-text {
    font-size: 1.125rem;
    font-family: "Poppins", sans-serif;
      font-weight: 200;

}

.newsletter-btn {
    display: inline-block;
    padding: 10px 20px;
    background: #ff5c00;
    color: #fff;
    border-radius: 30px;
    text-decoration: none;
    font-size: 1.125rem;
    font-weight: 500;
    transition: 0.2s ease;
}
.newsletter-btn:hover {
    background: #e24f00;
}

/* BACK TO TOP */
.back-to-top {
    font-size: 1rem;
    color: #FFFFFF;
    text-decoration: none;
    font-weight: 400;
    padding: 0px 5% 0 0;
}

.back-to-top i {
    height: 30px;
    width: 30px;
    background-color: #ff5c00;
    color: #fff;
    border-radius: 50%;
    display: inline-flex;      /* important */
    align-items: center;       /* important */
    justify-content: center;   /* important */
    font-size: 18px;
}

/* .back-to-top:hover {
    text-decoration: underline;
} */

/* RESPONSIVE FIXES */
@media (max-width: 991px) {
    .footer-section {
        text-align: left;
    }
}

@media (max-width: 767px) {
    .footer-logo {
        width: 110px;
    }
    .newsletter-heading {
        margin-top: 20px;
    }
}


/* Align bottom row items */
.footer-bottom {
    padding-top: 15px;
}

/* Back to Top icon circle */
.back-to-top i {
    height: 28px;
    width: 28px;
    background-color: #ff5c00;
    color: #fff;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
}

/* @media (min-width: 1400px) {
    .footer-container {
        max-width: 1500px; 
    }
} */
.footer-section .col-lg-3 {
    padding-right: 20px;
}
@media (max-width: 767px) {
    .footer-section {
        text-align: left;
    }
    .footer-bottom {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }
}

.navbar{
    padding: 0;
}


.navbar.border-bottom { border-bottom: none; }

/* attach the line to the centered .container so it starts/ends with col-lg-9/col-lg-3 layout */
.navbar > .container {
  position: relative;
}

.navbar > .container::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;              /* change to 1px if you want thinner */
  background-color: #000;
  border-radius: 2px;
}

/* optional: on very small screens make it slightly shorter */
@media (max-width: 575.98px) {
    .navbar > .container::after {
        width: 88%;
        left: 5%;
        right: 11%;
    }
}

.img-fit {
    height: 377px;
    width: 100%;
    object-fit: cover;  /* fills the height + crops slightly if needed */
 
}
.img-fits {
    height: 322px;
    width: 100%;
    object-fit: cover;  /* fills the height + crops slightly if needed */
 
}
.nav-link{
    font-size: 1rem;
    font-weight: 600;
    color: #000;
}
.img-block-fit {
    width: 100%;
    height: 100%;
    object-fit: cover;    /* crops image to fill exact height */
    border-radius: 6px;
}

/* overlay placed at top of image */
.news-card .card-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  padding: 12px;
  z-index: 2;
  color: #fff;
}

/* tweak text sizes to fit */
.news-card .card-title {
  margin: 6px 0 4px;
  font-size: 1.5rem;
  line-height: 1.2;
  font-weight: 400;
}
.news-card .card-date {
  font-size: 0.75rem;
  opacity: 0.9;
}

.img-fixed {
    height: 200px;           /* you can adjust this */
    width: 100%;
    object-fit: cover;       /* keeps image nice & cropped */
}
.news-card {
    height: 100%;
    display: flex;
    flex-direction: column;
}




  



.sidebar-items {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

/* text wrapper: stacks heading and time vertically */
.sidebar-texts {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0; /* allow text truncation if needed */
}

/* heading and time sizing adjustments */
.sidebar-items .sidebar-headings {
  margin: 0;
 font-size: 1.5rem;
    font-weight: 700;
  line-height: 1.1;
}

.sidebar-items .times {
  margin: 0;
font-family: "Poppins", sans-serif;
    color: #888;
    font-size: 12px; 
}

/* thumbnail placed to the right, small and circular */
.sidebar-thumb {
  width: 50px;
  height: 50px;
  object-fit: cover;
  border-radius: 50%;
  flex: 0 0 50px;
  display: block;
}


/* Remove padding and top border from Bootstrap dropdowns so you can add your own */
.dropdown-menu {
  padding: 0 !important;
  border-top: none !important;
  box-shadow: none !important; /* optional: remove drop shadow if you don't want it */
  background-clip: padding-box;
  border-radius: 0;
}

/* Remove default padding on items too so they start from zero */
.dropdown-menu .dropdown-item {
  padding:  2px 35px 5px 10px !important;
      font-size: 15px;
    font-weight: 600;
    color: black;
}

/* If you use custom submenu containers, ensure they inherit the same reset */
.dropdown-menu .dropdown-header,
.dropdown-menu .dropdown-divider {
  margin: 0;
  padding: 0;
  border-top: none;
}

@media (max-width: 576px) {
    .extra-mobile-padding {
        padding-left: 2rem; /* px-3 */
        padding-right: 2rem;
    }
}

/* Mobile navigation spacing */
@media (max-width: 991px) {
    /* Move toggle button to left */
    .navbar-toggler {
        margin-bottom: 1rem;
        
        margin-right: 0;
        margin-left: auto;
    }
    
    /* Add vertical spacing between nav items */
    .navbar-nav .nav-item {
        margin-bottom: 0.75rem;
    }
    
    /* Add spacing for dropdown items */
    .navbar-nav .dropdown-menu {
        margin-top: 0.5rem;
        margin-bottom: 0.5rem;
    }
    
    /* Add padding to the collapsed navbar content */
    .navbar-collapse {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }
}