/* ===================================
    Crafto - Green energy 
====================================== */
/* font */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap');
/* variable */
:root {      
    --alt-font: "Inter", sans-serif;
    --primary-font: "Inter", sans-serif;
    --base-color: #00AEEF;
    --green: #195828;
    --dark-gray: #1f2220;
    --medium-gray: #828282;
    --very-light-gray: #f7f7f7;
}
body {
    font-size: 16px;
    line-height: 28px;
}
/* header */
.navbar .navbar-nav .dropdown.dropdown-with-icon-style02 .dropdown-menu {
    width: 300px;
}
.navbar .navbar-nav .dropdown.dropdown-with-icon-style02 .dropdown-menu li a {
    font-size: 16px;
    color: var(--dark-gray);
    font-weight: 600;
}
.navbar .navbar-nav .dropdown.dropdown-with-icon-style02 .dropdown-menu li a:hover,
.navbar .navbar-nav .dropdown.dropdown-with-icon-style02 .dropdown-menu li.active:hover > a {
    background-color: var(--base-color);
    color: var(--white);
}
.navbar .navbar-nav .dropdown .dropdown-menu a i,
.navbar .navbar-nav .dropdown.dropdown-with-icon-style02 .dropdown-menu li a i {
    font-size: 40px;
    margin-right: 10px;
    width: 40px;
}
.navbar .navbar-nav .dropdown.dropdown-with-icon-style02 .dropdown-menu li a:hover i {
    color: var(--white);
}
header .navbar-brand img {
    max-height: 36px;
}
.navbar .navbar-nav .nav-link {
    font-weight: 600;
    font-size: 18px;
}
/* button */
.btn {
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0px;
}
.btn.btn-switch-text.btn-extra-large > span {
    padding: 17px 38px;
    font-size: 17px; 
}
.btn.btn-switch-text.btn-large > span {
    padding: 13px 32px;
    font-size:15px;
}
.btn.btn-switch-text.btn-medium > span {
    padding: 12px 26px;
    font-size:14px;
}
/* heading */
.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
    margin-bottom: 25px;
}
/* Text gradient color */
.text-gradient-light-green-white {
    background: linear-gradient(to top, rgba(255, 255, 255, 0) 0%,  #ebf6ee 90%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
/* Background color */
.bg-light-green {
    background-color: #c4e7cc;
}
.bg-very-light-green {
    background-color: rgba(0, 174, 239, 0.12);
}
/* Transparent background color */
.bg-gradient-green-transparent {
    background-color: rgba(0, 174, 239, 0.12);
}

.right-210px {
  right: 210px;
}

/* page title */
.page-title-large h1 {
    font-size: 4.2rem;
    line-height: 4rem;
}
.page-title-large h2 {
    font-size: 18px;
}

/* Border color */
.border-color-dark-green {
    border-color: var(--green);
}
/* Subcribe style 02 */
.newsletter-style-02 .btn:hover {
    background-color: var(--green);
}
.newsletter-style-02 .btn {
    height: 85%;
    margin: 4px;
    padding: 5px 20px 5px;
}
.newsletter-style-02 input {
    padding-right: 75px !important;
}

/* Will change */
.animation-rotation {
    -webkit-animation: rotation 2.5s infinite linear;
}
/* footer */
footer .footer-logo img {
    max-height: 43px;
    width: auto;
}
footer a:hover {
    color: var(--white);
}
footer ul li {
    margin-bottom: 2px;
}
@media (min-width: 1400px) {
    .container-xxl, .container-xl, .container-lg, .container-md, .container-sm, .container {
        max-width: 1320px;
    }
}
@media (max-width: 1600px) {
    /* Font size */
    .fs-80 {
        font-size: 4rem;
        line-height: 4rem;
    }
}
@media (max-width: 1199px){
    .navbar .navbar-nav .nav-link {
        font-size: 16px;
        padding: 10px 10px;
    }
}
@media (max-width: 991px){
    /* Background image */
    .md-background-position-top-center {
        background-position: top center !important;
    } 
    .navbar .navbar-nav .dropdown.dropdown-with-icon-style02 .dropdown-menu {
        padding-bottom: 15px;
    }
}
@media (max-width: 767px){
    /* Background image */
    .sm-background-position-top-center {
        background-position: top center !important;
    }
}
/* ---- Gallery slider pagination dots: 16x16, non-active white 75%, active brand blue ----
   Scoped to the article/project image galleries ONLY. The home banner keeps the
   theme's number pagination (01 — 02 03 with the expanding connector line), so it
   must NOT be caught by these rules. */
.article-gallery-pagination .swiper-pagination-bullet,
.project-gallery-pagination .swiper-pagination-bullet {
    width: 16px !important;
    height: 16px !important;
    padding: 0 !important;
    margin: 0 6px !important;
    background: rgba(255, 255, 255, 0.75) !important;
    opacity: 1 !important;
    border-radius: 50% !important;
    line-height: 16px !important;
    font-size: 0 !important;      /* hide any leftover number glyph */
    color: transparent !important;
    box-shadow: none !important;
    transition: background .3s ease, transform .3s ease !important;
}
.article-gallery-pagination .swiper-pagination-bullet-active,
.project-gallery-pagination .swiper-pagination-bullet-active {
    background: var(--base-color, #00AEEF) !important;  /* active = brand light blue, 100% */
    opacity: 1 !important;
}

/* ---- News cards (home "Media" section + /media listing) --------------------
   A long title or summary used to push one card taller than the ones beside it.
   Clamp the title to 2 lines and the summary to 3, ending in an ellipsis, and
   reserve that space so short entries line up with long ones — every card in a
   row now has the same height and the date sits on the same baseline.
   line-height is pinned to the value these already inherit (28px), so the type
   itself is unchanged; it only makes the reserved height exact. */
.blog-grid .card-body .card-title {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;            /* 28px at fs-20 */
    min-height: 2.8em;           /* always reserve 2 lines */
}
.blog-grid .card-body > p {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.75;           /* 28px at 16px */
    min-height: 5.25em;          /* always reserve 3 lines */
}

/* ---- Home "Projects" cards -------------------------------------------------
   The card height used to follow whatever photo an admin uploaded, so a single
   differently-proportioned cover made one card taller than the rest and broke
   the row. Pin every card to one 3:2 frame and let object-fit do the cropping,
   so any upload — portrait, square or panoramic — yields the same card. The box
   keeps its shape even if the image fails to load, so a missing cover can no
   longer disturb the layout either. */
.interactive-banner-style-05 figure img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;
    display: block;
}
/* A long project name must not grow the card or spill over the photo. */
.interactive-banner-style-05 figcaption > span {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---- News card images (home "Media" section + /media listing) --------------
   Same defect as the project cards: the image had no height of its own, so each
   card was as tall as its cover's aspect ratio. A logo-shaped or portrait cover
   made one card taller than its neighbours and, in this masonry grid, knocked
   the whole column out of alignment. Covers are cropped to 400x286 on upload
   (lib/images.js THUMB) and this frame matches, so what the admin uploads is
   exactly what the card shows — combined with the clamped title/summary above,
   every card in the grid is the same height. */
.blog-grid .blog-image img {
    width: 100%;
    aspect-ratio: 400 / 286;
    object-fit: cover;
    display: block;
}

/* ---- Mobile header + banner ------------------------------------------------
   The search/language group was wrapped in `d-none d-sm-flex`, so on phones
   (<576px) the language switcher did not exist at all. It is visible at every
   width now; these rules keep it from crowding the logo and burger. */
@media (max-width: 575px) {
    /* At 320px the logo (150px) plus the icons left no room for the burger, so it
       wrapped onto a second row. Trim both so logo + burger + icons fit one line. */
    header .navbar-brand img {
        max-height: 28px;
    }
    header .header-icon .icon {
        margin-left: 8px;
    }
    /* the theme's 45px search circle is too wide next to the burger on a phone */
    header .header-search-icon .search-form-icon {
        height: 38px !important;
        width: 38px !important;
    }
    header .header-language-icon .header-language > a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        height: 38px;
        width: 30px;
    }
    /* keep the dropdown inside the viewport rather than off the right edge */
    header .header-language-icon .header-language .language-dropdown {
        min-width: 180px;
        padding: 15px;
    }
}
@media (max-width: 991px) {
    /* The pagination is anchored to the bottom of the banner while each slide's
       copy is anchored to the top, so a fixed offset alone cannot work: it was
       either cut against the white below a short slide, or sitting on top of the
       buttons of the tallest one. Reserve a strip at the foot of the copy panel
       that no content can enter, and put the numbers in it. */
    /* Stack the slide as a column and let the copy panel take the leftover
       height, so the blue always reaches the foot of the banner instead of
       stopping short on a slide with less text. */
    /* Swiper sizes the wrapper to the tallest slide but leaves the others at
       their own height, so a shorter slide's blue stopped 40-odd px above the
       foot of the banner. Stretch every slide to the wrapper first. */
    .swiper.full-screen .swiper-slide {
        height: auto !important;
        align-self: stretch;
    }
    /* min-height, not height: on a narrow phone the copy is taller than the
       slide and a hard height squeezed it into the reserved strip. */
    .swiper.full-screen .swiper-slide > .container-fluid,
    .swiper.full-screen .swiper-slide > .container-fluid > .row {
        min-height: 100%;
    }
    .swiper.full-screen .swiper-slide > .container-fluid > .row {
        flex-direction: column;
        flex-wrap: nowrap;
    }
    .swiper.full-screen .swiper-slide [class*="col-xxl-7"] { flex: 0 0 auto; }
    .swiper.full-screen .swiper-slide [class*="col-xxl-5"] {
        flex: 1 0 auto;         /* may grow to fill, must never be squeezed */
        /* !important because the theme's md-pb-15 / xs-pb-20 utilities are
           themselves !important and would otherwise shrink the strip. */
        padding-bottom: 90px !important;   /* strip the numbers live in */
    }
    .swiper-number-pagination-style-01 .swiper-number {
        bottom: 40px;
    }
}

/* The contact map is a fixed 650px-tall iframe, which swallows most of a phone
   screen before any content below it is reachable. Keep it full height on the
   desktop and scale it down on smaller viewports. */
.gke-map {
    display: block;
    width: 100%;
    border: 0;
}
@media (max-width: 991px) {
    .gke-map { height: 420px; }
}
@media (max-width: 575px) {
    .gke-map { height: 300px; }
}

/* ---- Footer partner logos --------------------------------------------------
   Two slots side by side beneath the address. Fixed 40px height so logos of
   different proportions line up; width follows each logo. Until one is uploaded
   the slot shows a neutral placeholder of the same height, so the layout — and
   the link — are already in place. */
.gke-partners {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
    padding-bottom: 30px;
}
.gke-partner {
    display: inline-flex;
    align-items: center;
    height: 40px;
    opacity: .85;
    transition: opacity .2s ease;
}
.gke-partner:hover { opacity: 1; }
.gke-partner img {
    height: 40px;
    width: auto;
    max-width: 180px;
    object-fit: contain;
    display: block;
}
.gke-partner-placeholder {
    display: block;
    height: 40px;
    width: 140px;
    border: 1px dashed rgba(255, 255, 255, .35);
    border-radius: 4px;
}