:root {
  /* Colors */
  --color-white: #f4f4f5;
  --color-black: #231f20;
  --color-gray: #c2c2bf;
  --color-dark: #2c3337;
  --color-blue: #249cd1;
  --color-yellow: #eec21b;
  --color-blue-light: #4dc3f7;
  --color-blue-dark: #1b7ca8;
  --color-yellow-light: #f7dc6f;
  --color-yellow-dark: #cba715;
  --color-border: rgba(0, 0, 0, 0.1);
  --color-shadow: rgba(0, 0, 0, 0.15);

  /* Font Sizes */
  --font-s-small: 0.7rem;
  --font-s-medium: 0.9rem;
  --font-s-normal: 1.1rem;
  --font-s-large: 1.4rem;
  --font-s-gigantte: 1.8rem;

  --fonts-nav: font-nav;
  --fonts-italic: font-italic;
  --fonts-text: font-text;
  --fonts-title: font-title;
  --fonts-subtitle: font-subtitle;
  --fonts-navigation: font-navigation;

  --mx-width: 1366px;



  /* Letter Spacing */
  --letter-spacing-shore: 0.73px;
  --letter-spacing-medium: 1.1px;
  --letter-spacing-large: 1.5px;

  
  /* Spacing */
  --space-s: 1rem;
  --space-m: 1.5rem;
  --space-l: 2rem;

  /* Border Radius */
  --radius-small: 5px;
  --radius-medium: 10px;
  --radius-large: 20px;

  /* Shadows */
  --shadow-light: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-medium: 0 4px 8px rgba(0, 0, 0, 0.15);
  --box-shadow: rgba(33, 35, 38, 0.1) 0px 10px 10px -10px;

  /* Transitions */
  --transition-normal: 0.3s ease-in-out;

  /* Line Height */
  --line-height-normal: 1.5;

  /* Z-index */
  --z-header: 1000;
  --z-modal: 2000;
}

@font-face {
  font-family: 'font-nav';
  src: url(../fonts/font-nav.ttf);
}

@font-face {
  font-family: 'font-navigation';
  src: url(../fonts/font-navigation.OTF);
}


@font-face {
  font-family: 'font-italic';
  src: url(../fonts/font-italic.OTF);
}

@font-face {
  font-family: 'font-text';
  src: url(../fonts/font-texts.OTF);
}

@font-face {
  font-family: 'font-title';
  src: url(../fonts/font-title.OTF);
}

.body_general {
    background-color: var(--color-white);
}

.sicgbor_online_body {
  width: 100%;
  background-color: var(--color-white);
}

.sicgbor_online_main  {
  background-color: var(--color-white);
  max-width: var(--mx-width);
  margin: auto;
}

/* Results box */
/* Container - horizontal layout */
.sicgbor_online_adverticing {
    display: flex;
    flex-direction: row; /* horizontal layout */
    justify-content: space-between; /* spread sections */
    align-items: center; /* vertical align */
    gap: var(--space-l);
    max-width: var(--mx-width);
    margin: var(--space-l) auto;
    gap: var(--space-m); /* smaller gap */
    border-radius: var(--radius-medium);
    font-family: var(--fonts-text);
    box-shadow: var(--box-shadow);
    padding: 0.5rem var(--space-l); /* 0.5rem top & bottom, var(--space-l) left & right */
}

/* Results section - aligned left */
.sicgbor_results {
    flex: 0 0 auto; /* shrink to fit content */
    display: flex;
    align-items: center; /* vertical center */
    justify-content: flex-start; /* align content to the left */
    gap: var(--space-s);
    height: 50px;
    padding: 0 var(--space-s);
    box-sizing: border-box;
      gap: 0.5 * var(--space-s); /* half of your normal spacing */
}

/* Search section - flexible, centered */
.sicgbor_search_again {
    flex: 1; /* takes remaining space */
    display: flex;
    align-items: center;
    justify-content: center; /* horizontal center */
    height: 50px;
    padding: 0 var(--space-s);
}

/* Advertising section - flexible, centered */
.sicgbor_results_adverticing {
    flex: 1; /* takes remaining space */
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    padding: 0 var(--space-s);
}
.sicgbor_results_icon {
    margin: 0;
    color: var(--color-yellow);
}
.sicgbor_result_text {
    margin: 0;
    letter-spacing: var(--letter-spacing-shore);
    color: var(--color-black);
}
.sicgbor_results {
    padding: 0; /* remove extra horizontal padding */
}
.sicgbor_online_adverticing {
    padding-left: var(--space-l); /* only left padding */
    padding-right: var(--space-l); /* right padding if needed */
}


/* Container for Search Again */
.sicgbor_search_again {
    flex: 1; /* takes remaining space */
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px; /* match other sections */
    padding: 0; /* remove extra padding */
    box-sizing: border-box;
}

/* Form layout */
.sicgbor_search_form {
    display: flex;
    width: 100%;
    max-width: 400px; /* adjust width */
    gap: 0.5rem; /* space between input and button */
}

/* Input field */
.sicgbor_search_input {
    flex: 1;
    height: 40px; /* smaller than 50px container */
    padding: 0 0.8rem;
    font-size: var(--font-s-normal);
    font-family: var(--fonts-text);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-medium);
    outline: none;
    transition: var(--transition-normal);
}

.sicgbor_search_input:focus {
    border-color: var(--color-blue);
    box-shadow: 0 0 5px rgba(36,156,209,0.3);
}

/* Submit button */
.sicgbor_search_btn {
    height: 40px;
    padding: 0 1rem;
    background-color: var(--color-blue);
    color: var(--color-white);
    border: none;
    border-radius: var(--radius-medium);
    font-size: var(--font-s-normal);
    font-family: var(--fonts-text);
    letter-spacing: var(--letter-spacing-shore);
    cursor: pointer;
    transition: var(--transition-normal);
}

.sicgbor_search_btn:hover {
    background-color: var(--color-blue-dark);
}


.sicgbor_results_adverticing {
    flex: 1; /* take remaining horizontal space */
    display: flex;
    align-items: center;
    height: 50px;
    padding: 0 1rem;
    border-radius: var(--radius-medium);
}

/* Link with icon */
.sicgbor_results_a {
    display: flex;
    align-items: center; /* vertically center icon & text */
    gap: 0.4rem; /* space between icon and text */
    color: var(--color-gray);
    transition: 0.3s ease;
    text-decoration: none;
    letter-spacing: var(--letter-spacing-shore);
    font-family: var(--fonts-text);
    font-size: var(--font-s-medium);
    white-space: nowrap; /* prevent breaking */
    transition: var(--transition-normal);
}

.sicgbor_results_a i {
  transition: 0.3s ease;

    font-size: 1.4rem;
    color: var(--color-gray);
}

.sicgbor_results_a:hover {
  transition: 0.3s ease;
    color: var(--color-yellow-light);
}

/* Responsive: stack link if needed */
@media (max-width: 900px) {
    .sicgbor_results_adverticing {
        height: auto;
        padding: 0.5rem 1rem;
        justify-content: flex-start;
    }
}

/*Design for each post */


/* Grid container */
.sicgbor_online_grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
    max-width: var(--mx-width);
    margin: var(--space-l) auto;
    padding: 0 var(--space-l);
}

/* Each post card */
.sicgbor_online_products {
    background-color: var(--color-white);
    border-radius: var(--radius-medium);
    overflow: hidden;
    box-shadow: var(--shadow-medium);
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    width: 305px;
    height: 700px; /* taller card */
}

.sicgbor_online_products:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}

/* Image section */
.sicgbor_online_products figure {
    margin: 0;
    overflow: hidden;
    height: 450px; /* taller image */
}

.sicgbor_online_products img.sicgbor_online_imgs_up {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.sicgbor_online_products:hover img.sicgbor_online_imgs_up {
    transform: scale(1.05);
}

/* Card body (text area) */
.card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-s);
    padding: 1rem; /* less padding for smaller text area */
}

/* Post title */
.sicgbor_online_title {
  padding: 6px;
    font-family: var(--fonts-text);
    letter-spacing: var(--letter-spacing-shore);
    font-size: var(--font-s-medium);
    margin: 0;
    color: var(--color-dark);
    padding-bottom: 0.5rem;
    box-shadow: var(--box-shadow);
}

/* Info section */
.sicgbor_online_info {
    font-size: var(--font-s-medium);
    font-family: var(--fonts-text);
    padding: 10px;
    color: var(--color-gray);
    letter-spacing: var(--letter-spacing-shore);
    display: flex;
    flex-wrap: wrap;
    line-height: .9; /* 1.5 times the font size */
    gap: 0.3rem;
    align-items: center;
}


.sicgbor_online_description_div {
  padding-left: 10px;
  padding-right: 10px;
}

.sicgbor_online_info_links {
    color: var(--color-blue);
    text-decoration: none;
    transition: color 0.3s ease;
}

.sicgbor_online_info_links:hover {
    color: var(--color-blue-dark);
}

.sicgbor_online_info_posted {
    color: var(--color-dark);
}

/* Description */
.sicgbor_online_description {
    margin: 0;
    font-size: var(--font-s-medium);
    color: var(--color-dark);
    font-family: var(--fonts-text);
    letter-spacing: var(--letter-spacing-shore);
    margin: 0.1px 0; /* smaller space above & below each paragraph */
    line-height: 1.1;  /* optional: reduce line spacing slightly */
    overflow: hidden;
}

/* Button */
.sicgbor_online_bts {
    margin-top: auto;
    display: flex; /* use flex */
    justify-content: center; /* center horizontally */
}

.sicgbor_online_bn_details {
    display: inline-block;
    padding: 0.5rem 1rem;
    color: var(--color-white);
    width: 90%;
    text-align: center;
    margin-bottom: 15px;
    border: 0.1px solid var(--color-blue);
    border-radius: var(--radius-medium);
    text-decoration: none;
    font-family: var(--fonts-text);
    color: var(--color-blue);
    font-size: var(--font-s-medium);
    letter-spacing: var(--letter-spacing-shore);
    transition: background-color 0.3s ease;
}

.sicgbor_online_bn_details:hover {
    background-color: var(--color-blue-dark);
    color: var(--color-white);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .sicgbor_online_products {
        height: auto;
    }

    .sicgbor_online_products figure {
      height: 300px; /* responsive image height */        
      height: 450px; /* taller image */
    }

    .card-body {
        padding: 0.8rem;
    }

    .sicgbor_online_title {
        font-size: var(--font-s-normal);
    }

    .sicgbor_online_description p {
        font-size: var(--font-s-small);
        max-height: 3.5rem;
    }
}


.sicgbor_online_grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    justify-content: center; /* centers single or few items */
    gap: 1.5rem;
    max-width: var(--mx-width);
    margin: var(--space-l) auto;
    padding: 0 var(--space-l);
}


.pagination {
    display: flex;
    justify-content: center; /* center pagination */
    gap: 0.5rem;
    margin: 2rem 0;
    list-style: none;
    padding: 0;
    flex-wrap: wrap;
}

.pagination a,
.pagination span {
    display: inline-block;
    padding: 0.5rem 0.8rem;
    border-radius: var(--radius-small);
    border: 1px solid var(--color-border);
    text-decoration: none;
    color: var(--color-blue);
    font-size: var(--font-s-normal);
    transition: 0.3s ease;
}

.pagination a:hover {
    background-color: var(--color-blue);
    color: var(--color-white);
}

.pagination .active {
    background-color: var(--color-yellow);
    color: var(--color-white);
    border-color: var(--color-blue-dark);
}


@media (max-width: 768px) {
    .sicgbor_online_grid {
        padding: 0 1rem;
    }
}


/* Desktop layout (already mostly fine) */
.sicgbor_online_adverticing {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap; /* allow items to wrap if needed */
    gap: var(--space-m);
    max-width: var(--mx-width);
    margin: var(--space-l) auto;
    padding: 0.5rem var(--space-l);
    border-radius: var(--radius-medium);
    box-shadow: var(--box-shadow);
}

/* Individual sections inside */
.sicgbor_results,
.sicgbor_search_again,
.sicgbor_results_adverticing {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.5rem; /* spacing when stacked */
}

/* Responsive: stack vertically on small screens */
@media (max-width: 768px) {
    .sicgbor_online_adverticing {
        flex-direction: column; /* stack items */
        align-items: stretch;   /* full width */
        text-align: center;
    }

    .sicgbor_results,
    .sicgbor_search_again,
    .sicgbor_results_adverticing {
        justify-content: center; /* center each block */
        width: 100%; /* full width */
        margin-bottom: 1rem;
    }

    .sicgbor_search_form {
        justify-content: center;
        gap: 0.5rem;
    }

    .sicgbor_results_text, .sicgbor_results_icon {
        justify-content: center;
    }
}

/* Grid container */
.sicgbor_online_grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 305px)); /* fix post width */
    justify-content: center; /* center the posts */
    gap: 1.5rem;
    max-width: var(--mx-width);
    margin: var(--space-l) auto;
    padding: 0 var(--space-l);
}

/* Container adjustments */
.sicgbor_online_adverticing {
    display: flex;
    flex-wrap: wrap; /* allow wrapping on small screens */
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem; /* reduce space between items */
    max-width: var(--mx-width);
    margin: 1rem auto; /* smaller top/bottom margin */
    padding: 0.5rem 1rem; /* reduce padding */
    font-family: var(--fonts-text);
}

/* Results section */
.sicgbor_results {
    display: flex;
    align-items: center;
    gap: 0.3rem; /* smaller gap between icon and text */
    height: auto; /* auto height instead of fixed */
    padding: 0;
}

/* Search section */
.sicgbor_search_again {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.3rem;
    padding: 0;
}

/* Advertising section */
.sicgbor_results_adverticing {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    padding: 0;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .sicgbor_online_adverticing {
        flex-direction: column; /* stack vertically */
        gap: 0.5rem; /* reduce vertical spacing */
        padding: 0.3rem 0.5rem; /* smaller padding on mobile */
        text-align: center;
    }

    .sicgbor_results,
    .sicgbor_search_again,
    .sicgbor_results_adverticing {
        justify-content: center; /* center content on mobile */
    }
}