/* Normalize CSS
--------------------------------------------------------------*/
body {
    padding: 0;
    margin: 0;
    font-family: 'Dosis', 'Anek Bangla', sans-serif;
}

h1, h2, h3, h4, h5, h6, ul, menu, button {
    margin: 0;
    padding: 0;
}

p {
    line-height: 22px;
}

* {
    box-sizing: border-box;
}

a {
    text-decoration: none;
    color: #0771DF;
    transition: .5s;
}

img {
    border: none;
}

.img {
    border: none;
    margin: 0 10px 10px 0;
    float: left;
}

.img2 {
    border: none;
    margin: 0 0 8px 10px;
    float: right;
}

/* ==========================================================================
   Skip Link (Accessibility)
   --------------------------------------------------------------------------
   Allows keyboard/screen-reader users to skip the header/menu and jump
   straight to the main content. Hidden by default, becomes visible
   only when focused (i.e. when a user Tabs to it).
   Target: <main id="main-content"> in header.php / page templates.
   ========================================================================== */

.skip-link.screen-reader-text {
    /* Push the link off-screen so it's invisible by default,
       but still present in the DOM for screen readers */
    position: absolute;
    left: -9999px;
    top: 0;

    /* Make sure it appears above everything else if it becomes visible */
    z-index: 999999;
}

.skip-link.screen-reader-text:focus {
    /* When focused (Tab key), bring it back into view */
    left: 0;
    top: 0;
    display: block;

    /* Basic visible styling so it's easy to see and read */
    padding: 15px 20px;
    background: #000;
    color: #fff;
    text-decoration: none;
    font-size: 14px;
}

/* General Code
----------------------------------------------------------------------------- */
.main {
    margin: 0 auto;
    max-width: 1200px;
}

strong {
    font-weight: 600;
}

/* Header
--------------------------------------------------------------*/
#header-top {
    background-color: #f7f7f7;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
}

.header_top {
    float: left;
    width: 100%;
}

.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.header a {
    color: #444;
    display: inline-block;
}

.logo img,
.custom-logo-link img {
    max-height: 52px;
    width: auto;
    display: block;
}

.logo {
    display: flex;
}

.logo a:focus {
    outline: none;
}

.top_mail a {
    float: right;
    margin: 20px 0 0 0;
    font-size: 17px;
    padding: 7px 15px;
    text-align: left;
    color: #fff;
    border-radius: 5px;
    background: #01A925;
    text-decoration: none;
}

.top_mail a:focus {
    outline: none;
}

.top_mail i {
    margin-right: 5px;
    font-weight: 600;
}

.menu {
    font-weight: 500;
    margin-top: 15px;
    float: left;
    width: 75%;
}

.nav,
.nav ul,
.nav li,
.nav a {
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
}

.nav {
    position: relative;
    z-index: 50;
    display: flex;
    align-items: center;
    float: left;
}

.nav li {
    position: relative;
    list-style: none;
}

.nav li a {
    position: relative;
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 30px 0 40px 25px;
    font-size: 18px;
    text-decoration: none;
    color: #444;
    font-weight: 500;
    text-transform: capitalize;
    -webkit-transition: .5s;
    transition: .5s;
}

.nav li a:focus {
    background: transparent;
    outline: none;
}

.fa-home {
    font-size: 19px;
}

.nav li:first-child a {
    border-left: none;
}

.nav li:last-child a {
    border-right: none;
}

.nav .menu-bg a {
    color: #333;
    float: right;
    font-size: 20px;
}

.nav .menu-bg a:hover {
    background: #073E8B;
    color: #ffffff;
}

.nav li:hover > a {
    color: #000;
    display: flex;
    background: none;
}

/* Dropdown arrow icon */
.nav li > a ion-icon {
    font-size: 14px;
    margin-left: auto;
    display: inline-flex;
    transition: transform 0.3s ease;
}

/* Rotate arrow on hover */
.nav li:hover > a ion-icon {
    transform: rotate(180deg);
}

.nav ul {
    position: absolute;
    z-index: 99;
    top: 95px;
    left: 0;
    margin-left: 10px;
    opacity: 1;
    background: #fff;
}

.nav li:hover ul {
    border: 1px solid #ddd;
    border-top: none;
    padding-bottom: 6px;
}

.nav ul li {
    height: 0;
    overflow: hidden;
    padding: 0;
    margin: 0 15px;
    border: none;
}

.nav li:hover > ul li {
    height: 40px;
    overflow: visible;
    padding: 0;
    margin-bottom: 8px;
}

.nav ul li a {
    width: 200px;
    padding: 12px 0 14px 0;
    font-weight: normal;
    border: none;
    border-bottom: 1px solid #e8e8e8;
    color: #333;
    text-transform: capitalize;
    font-size: 16px;
}

.nav ul li:last-child a {
    border-bottom: none;
}

.nav ul li a:after {
    content: "";
    display: block;
    width: 0;
    height: 1px;
    bottom: 0;
    left: 0;
    background: #3177D9;
    -webkit-transition: .5s;
    transition: .4s;
    position: absolute;
    opacity: 1;
}

.nav ul li a:hover:after {
    left: 0;
    color: #000;
    width: 100%;
}

/* RESPONSIVE NAVIGATION
----------------------------------------------------------------------------- */
.hamburger-btn {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    cursor: pointer;
    padding: 10px;
    background: none;
    border: none;
    margin-left: auto;
}

.hamburger-btn span {
    display: block;
    width: 24px;
    height: 2px;
    background-color: #444;
    border-radius: 2px;
    transition: transform 0.3s ease, opacity 0.3s ease;
    transform-origin: center;
}

.hamburger-btn.open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.hamburger-btn.open span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

.hamburger-btn.open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ---- Tablet (1024px) ---- */
@media screen and (max-width: 1024px) {
    .logo {
        flex: 0 0 auto;
    }

    .logo img {
        height: 45px;
        max-width: 280px;
    }

    .menu {
        flex: 1;
    }

    .nav > li > a {
        padding: 20px 10px;
        font-size: 14px;
    }

    .nav ul {
        top: 80px;
    }
}

/* ---- Mobile (768px and below) ---- */
@media screen and (max-width: 768px) {

    /* Header layout */
    .header {
        position: relative;
        flex-wrap: wrap;
        padding: 15px 0;
        align-items: center;
    }

    .logo {
        flex: 1;
        margin: 0;
    }

    .logo img {
        height: 44px;
        max-width: 200px;
    }

    /* Show hamburger, hide desktop menu */
    .hamburger-btn {
        display: flex;
    }

    .menu {
        flex: 0 0 100%;
        margin-top: 0;
        overflow: hidden;
        max-height: 0;
        transition: max-height 0.4s ease;
    }

    .menu.mobile-open {
        max-height: 1000px; /* large enough to reveal full menu */
    }

    /* Stack nav vertically */
    .nav {
        float: none;
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        border-top: 1px solid #e8e8e8;
    }

    .nav > li {
        border-bottom: 1px solid #f0f0f0;
    }

    /* Top-level links */
    .nav > li > a {
        padding: 14px 16px;
        font-size: 15px;
        justify-content: space-between;
        width: 100%;
    }

    /* Rotate chevron when submenu is open */
    .nav > li.open > a ion-icon {
        transform: rotate(180deg);
    }

    /* Dropdowns — accordion style */
    .nav ul {
        position: static;
        opacity: 1;
        top: auto;
        left: auto;
        margin: 0;
        border: none;
        border-top: 1px solid #f0f0f0;
        background: #f9f9f9;
        display: none; /* hidden by default */
        padding-bottom: 0;
    }

    .nav > li.open > ul {
        display: block;
        border: none;
    }

    /* Override the hover-based expand from desktop */
    .nav li:hover > ul {
        display: none;
    }

    .nav > li.open > ul {
        display: block !important;
    }

    .nav ul li {
        height: auto !important;
        overflow: visible !important;
        margin: 0 !important;
    }

    .nav ul li a {
        width: 100%;
        padding: 12px 16px 12px 30px;
        font-size: 14px;
        color: #555;
        border-bottom: 1px solid #ececec;
    }

    .nav ul li:last-child a {
        border-bottom: none;
    }

    .nav ul li a:hover {
        background-color: #f0f5ff;
        color: #0771DF;
    }

    /* Hide underline animation on mobile */
    .nav ul li a:after {
        display: none;
    }
}

/* ---- Small phones (480px) ---- */
@media screen and (max-width: 480px) {
    .logo img {
        height: 45px;
        max-width: 160px;
    }

    .nav > li > a {
        font-size: 14px;
        padding: 13px 16px;
    }
}

/* Slider
--------------------------------------------------------------*/
.rslider {
    position: relative;
    width: 100%;
    height: 85vh;
    min-height: 560px;
    overflow: hidden;
    background: #14231D;
}

.rslider__track {
    position: absolute;
    inset: 0;
}

.rslider__bg {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    background-size: cover;
    background-position: center;
    transform: scale(1);
    transition: opacity 1.1s ease, transform 7s ease-out;
}

.rslider__bg.is-active {
    opacity: 1;
    visibility: visible;
    transform: scale(1.08);
    z-index: 1;
}

.rslider__scrim {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(90deg, rgba(20, 35, 29, .55) 0%, rgba(20, 35, 29, .32) 38%, rgba(20, 35, 29, .05) 70%);
}

/* Content layer — constrained + centered like .main, but layered above the full-bleed image */
.rslider__bounds {
    position: absolute;
    inset: 0;
    max-width: 1200px;
    margin: 0 auto;
    z-index: 3;
    pointer-events: none; /* let the box itself be transparent to clicks... */
}

.rslider__bounds > * {
    pointer-events: auto; /* ...but re-enable clicks on the actual controls inside it */
}

.rslider__copy {
    position: absolute;
    left: 0;
    bottom: 14%;
    max-width: 560px;
    color: #EFE7D3;
    opacity: 0;
    visibility: hidden;
    transform: translateY(24px);
    transition: opacity .8s ease .3s, transform .8s ease .3s;
}

.rslider__copy.is-active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.rslider__tag {
    font-family: 'Kalam', cursive;
    font-size: 16px;
    color: #D8CBA8;
    display: block;
    margin-bottom: 10px;
}

.rslider__heading {
    /*font-family: 'Play', sans-serif;*/
    font-weight: 700;
    text-transform: uppercase;
    font-size: 30px;
    line-height: 1.05;
    margin: 0 0 .75rem;
    color: #fff;
}

.rslider__text {
    font-size: 17px;
    line-height: 1.5;
    color: #f7f7f7;
    margin: 0;
}

.rslider__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: rgba(239, 231, 211, .12);
    border: 1px solid rgb(104 104 104 / 0.5);
    color: #EFE7D3;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .25s, border-color .25s;
}

.rslider__arrow:hover, .rslider__arrow:focus-visible {
    background: rgb(104 104 104 / 0.3);
    border: 1px solid rgba(239, 231, 211, .7);
}

.rslider__arrow--prev {
    left: 0;
}

.rslider__arrow--next {
    right: 0;
}

.rslider__trail {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 6.5%;
    height: 22px;
}

.rslider__trail-line {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    color: #D8CBA8;
    opacity: .5;
    pointer-events: none;
}

.rslider__waypoint {
    position: absolute;
    top: 50%;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: transparent;
    border: 1.5px solid #D8CBA8;
    transform: translate(-50%, -50%);
    cursor: pointer;
    padding: 0;
    transition: background .25s, transform .25s, border-color .25s;
}

.rslider__waypoint:hover {
    border-color: #A85C32;
}

.rslider__waypoint.is-active {
    background: #A85C32;
    border-color: #A85C32;
    transform: translate(-50%, -50%) scale(1.35);
}

.rslider__counter {
    position: absolute;
    right: 0;
    bottom: 10.5%;
    font-family: 'Exo', sans-serif;
    letter-spacing: .1em;
    color: #D8CBA8;
    font-size: 14px;
}

.rslider__counter-current {
    color: #EFE7D3;
    font-weight: 600;
}

@media (max-width: 1232px) {
    .rslider__bounds {
        max-width: none;
        padding: 0 24px;
    }
}

@media (max-width: 768px) {
    .rslider {
        height: 60vh;
        min-height: 460px;
    }

    .rslider__copy {
        bottom: 15%;
        max-width: none;
        padding: 0 20px;
    }

    .rslider__heading {
        font-size: 25px;
        line-height: 1.2;
    }

    .rslider__arrow {
        width: 38px;
        height: 38px;
    }

    .rslider__trail {
        display: none;
    }

    .rslider__counter {
        bottom: 6%;
        left: 5%;
        right: auto;
    }

    .rslider__arrow--prev {
        left: 3%;
    }

    .rslider__arrow--next {
        right: 3%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .rslider__bg {
        transition: none;
        transform: none !important;
    }

    .rslider__copy {
        transition: opacity .3s ease;
        transform: none !important;
    }
}

/* Section Call to Action
--------------------------------------------------------------*/
.section-call-to-action {
    padding: 40px 0;
    background-color: #fff;
}

/* Container Heading
--------------------------------------------------------------*/
#container-heading {
    width: 100%;
    background-image: url('../images/background-images/darjeeling-tour-package-from-bangladesh-2.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
}

.page-title {
    max-width: 1200px;
    padding: 100px 0;
    margin: 0 auto;
    font-size: 19px;
    color: #eee;
}

.page-title h1 {
    font-size: 35px;
    font-weight: 600;
    color: #fff;
    margin: 0 0 20px;
}

.page-title h1 span {
    font-size: 22px;
    color: #ddd;
}

#trust_box {
    float: left;
    width: 100%;
    padding: 20px 0;
    border-bottom: 1px solid #ccc;
    font-size: 18px;
    background: #fff;
}

#trust_box ul {
    list-style: none;
}

#trust_box ul li {
    list-style: none;
    float: left;
    padding: 0 30px 0 0;
    border-right: 1px solid #ccc;
}


/* 4. Container
-------------------------------------------*/
#container {
    padding: 70px 0 120px 0;
    color: #333;
    overflow: hidden;
    float: left;
    width: 100%;
}

.container-service {
    width: 100%;
    padding: 30px 0 10px;
}

.last {
    margin: 10px 0 10px 0;
    float: right;
}

.container-promotion {
    width: 100%;
    padding: 40px 25px;
    display: inline-block;
    font-size: 14px;
    margin: 20px 0 30px;
}

.container-promotion h2 {
    font-size: 40px;
    padding: 3px 0 0;
    color: #333;
    font-weight: 500;
    float: left;
    text-shadow: 1px 1px 1px #fff;
}

.container-promotion-left {
    float: left;
}

.container-promotion-left i {
    float: left;
    font-size: 4.2em;
    height: 50px;
    text-align: left;
    margin-right: 20px;
    text-shadow: 1px 1px 1px #fff;
}

.container-promotion-left p {
    margin: 0;
    text-shadow: 1px 1px 1px #fff;
}

.container-promotion-right a {
    float: right;
    padding: 13px 30px;
    background: #3156a3;
    font-size: 18px;
    color: #eee;
    border-radius: 3px;
    text-decoration: none;
    -webkit-transition: .5s;
    transition: .5s;
    position: relative;
    z-index: 1;
}

.container-promotion-right a:hover {
    color: #eee;
    text-shadow: 1px 1px 1px #222;
}

.container-promotion-right a:after {
    content: "";
    display: block;
    width: 0;
    height: 100%;
    bottom: 0;
    right: 0;
    background: #42b3e5;
    -webkit-transition: .3s;
    transition: .3s;
    position: absolute;
    opacity: 0;
    color: #000;
    z-index: -1;
}

.container-promotion-right a:hover:after {
    right: 0;
    color: #eee;
    background: #42b3e5;
    text-shadow: 1px 1px 1px #222;
    opacity: 1;
    width: 50%;
    height: 100%;
}

.container-promotion-right a:before {
    content: "";
    display: block;
    width: 0;
    height: 100%;
    bottom: 0;
    left: 0;
    background: #42b3e5;
    -webkit-transition: .3s;
    transition: .3s;
    position: absolute;
    opacity: 0;
    color: #000;
    z-index: -1;
}

.container-promotion-right a:hover:before {
    left: 0;
    color: #eee;
    background: #42b3e5;
    text-shadow: 1px 1px 1px #222;
    opacity: 1;
    width: 50%;
    height: 100%;
}

.container-content {
    width: 100%;
    float: left;
    font-size: 18px;
    color: #343434;
    text-align: justify;
}

.container-content .container-content-image {
    margin-bottom: 10px;
    margin-right: 20px;
    float: left;
}

.container-content h1 {
    font-size: 19px;
    color: #222;
    font-weight: 600;
    text-shadow: 1px 1px 1px #fff;
    position: relative;
    padding-bottom: 10px;
    margin-bottom: 20px;
    text-align: left;
}

.container-content h1:after {
    content: "";
    display: block;
    width: 80px;
    height: 2px;
    bottom: 0;
    left: 0;
    background: #0771DF;
    margin-top: 30px;
    -webkit-transition: .5s;
    transition: .5s;
    position: absolute;
    opacity: 1;
}

.container-content h1 i {
    font-size: 1.3em;
    float: left;
    text-align: left;
    color: #555;
    margin-right: 10px;
}

.container-content h2 {
    font-size: 25px;
    color: #222;
    font-weight: 600;
    text-shadow: 1px 1px 1px #fff;
    position: relative;
    padding-bottom: 10px;
    margin-bottom: 20px;
    text-align: left;
}

.container-content h2:after {
    content: "";
    display: block;
    width: 80px;
    height: 2px;
    bottom: 0;
    left: 0;
    background: #0771DF;
    margin-top: 30px;
    -webkit-transition: .5s;
    transition: .5s;
    position: absolute;
    opacity: 1;
}

.container-content h2 i {
    font-size: 1.3em;
    float: left;
    text-align: left;
    color: #555;
    margin-right: 10px;
}

.container-content h3 {
    font-size: 25px;
    color: #222;
    font-weight: 600;
    padding-bottom: 15px;
    margin: 0;
}

.container-content h4 {
    font-size: 16px;
    color: #222;
    font-weight: 600;
    padding-bottom: 5px;
}

.process-list {
    margin: 0 0 30px 60px;
    padding: 0;
    color: #111;
    line-height: 24px;
}

.process-list li {
    margin: 8px 0;
    padding: 0;
    list-style: none;
    font-size: 14px;
}

.process-list i {
    text-align: left;
    margin-right: 8px;
}

.list {
    margin: 0 0 30px 0;
    padding: 0;
    color: #111;
    line-height: 24px;
}

.list li {
    margin: 8px 0;
    padding: 0;
    list-style: none;
}

.list i {
    text-align: left;
    margin-right: 8px;
}

.container-content .img {
    margin: 0 30px 10px 0;
    padding: 0;
    float: left;
}

.container-content .img2 {
    margin: 0 20px 10px 0;
    padding: 0;
    float: left;
}

.container-content .img3 {
    margin: 18px 0 11px 20px;
    padding: 0;
    float: right;
}

.container-content-about {
    float: left;
    max-width: 850px;
    text-align: justify;
    font-size: 14px;
    color: #343434;
}

.container-content-sidebar {
    float: right;
    width: 300px;
}

.container-content-sidebar ul {
    padding: 0;
    margin: 20px 0 20px 0;
    border-top: 1px solid #E0E0E0;
}

.container-content-sidebar ul li {
    padding: 10px 0;
    border-bottom: 1px solid #E0E0E0;
    line-height: 15px;
    display: inline-block;
    width: 100%;
}

.container-content-sidebar i {
    float: left;
    font-size: 1.2em;
    text-align: left;
    color: #555;
    margin-right: 10px;
}

.sidebar-icon li:hover i,
.sidebar-icon li:hover span,
.sidebar-icon li:hover a {
    color: #0771DF;
    -webkit-transition: .5s;
    transition: .5s;
}

.sidebar-icon span {
    float: left;
    font-size: 15px;
    color: #111;
    padding-top: 3px;
}

.sidebar-icon a {
    text-decoration: none;
    color: #343434;
}

.sidebar-software {
    width: 300px;
    height: 195px;
    border: 1px solid #E0E0E0;
}

.sidebar-software img {
    width: 100%;
    height: 195px;
}

.container-portfolio {
    float: left;
    width: 100%;
    margin: 15px 0 25px;
}

.container-portfolio h3 {
    font-size: 16px;
    color: #222;
    font-weight: 600;
    border-bottom: 1px solid #E0E0E0;
    padding: 8px 0;
    line-height: 23px;
    background: #f4f3f3;
}

.container-portfolio h3 i {
    font-size: 1.4em;
    float: left;
    text-align: left;
    color: #555;
    margin-left: 15px;
    margin-right: 7px;
}

.container-portfolio-content {
    float: left;
    width: 100%;
    text-align: center;
}

.portfolio_box {
    float: left;
    width: 100%;
    background: #fff;
    margin: 5px 0;
    border: 1px solid #F4F3F3;
    -webkit-box-shadow: 0 2px 5px 1px rgba(0, 0, 0, 0.5);
    box-shadow: 0 1px 1px 1px rgba(63, 63, 63, 0.1);
}

.portfolio_box img {
    height: 110px;
}

.website-portfolio-content {
    margin-left: 15px;
}

.website-portfolio-content img {
    margin: 15px 10px 0 0;
    width: 160px;
    height: 90px;
    border: 1px solid #E0E0E0;
}

.sms-portfolio-content {
    margin-left: 30px;
}

.sms-portfolio-content img {
    margin: 15px 25px 0 0;
    width: 160px;
    border: 1px solid #E0E0E0;
}

.container-parners-content {
    margin: 25px 0 5px 15px;
    float: left;
}

.container-parners-content img {
    margin: 0 20px 0 30px;
    height: 35px;
    width: auto;
}

.container-course-banner {
    float: left;
    max-width: 850px;
    margin-top: 14px;
    margin-bottom: 30px;
}

.container-course-banner img {
    width: 100%;
    float: left;
    border: 1px #ddd solid;
    box-shadow: 2px 4px 9px 0 rgba(0, 0, 0, .12);
}

.container-facebook {
    float: right;
    width: 300px;
    margin-top: 15px;
}


/* Section About
--------------------------------------------------------------*/
.section-about {
    padding: 80px 0;
    background-color: #FFFFFF;
}

/* ABOUT TOP */
.about__top {
    display: flex;
    justify-content: space-between;
}

.about__text {
    flex: 0 0 65%;
}

.about__content h1 {
    font-size: 36px;
    font-weight: 300;
    color: #444;
    line-height: 1.3;
}

.about-btn {
    margin-top: 30px;
}

.about-btn a {
    text-decoration: none;
    padding: 8px 20px;
    text-align: center;
    font-size: 17px;
    border-radius: 3px;
    border: 1px solid #ddd;
    color: #000;
    transition: all 0.3s ease 0s;
    display: inline-flex;
    align-items: center;
}

.about-btn a:hover {
    background-color: #333;
    color: #fff;
}

.about-btn a [name="arrow-forward-outline"] {
    margin-left: 8px;
}

/* ABOUT SIDE */
.about__side {
    flex: 0 0 30%;
}

.exp-badge {
    text-align: center;
    font-size: 19px;
    color: #444;
}

.exp-badge img {
    display: block;
    width: 100%;
    height: 250px;
    object-fit: cover;
    margin-bottom: 10px;
    border-radius: 0 50px 0 50px;
}

/* =============================================================================
   Section Page CTA
   -----------------------------------------------------------------------------
   This section renders a full-width CTA (Call to Action) block with a light
   gray background. It contains a centered container with a heading, supporting
   text, and a row of action buttons (Secondary, Primary, and WhatsApp).

   Structure:
   .section-page-cta
   └── .page-cta__container
       ├── h2
       ├── p
       └── .page-cta__list
           ├── li:nth-child(1) → Secondary/Outline button
           ├── li:nth-child(2) → Primary/Brand button (blue)
           └── li:nth-child(3) → WhatsApp button (green)
============================================================================= */
.section-page-cta {
    padding: 80px 0 130px;
    background-image: linear-gradient(to right bottom, rgb(218 218 218 / 0.7), rgb(245 245 245 / 0.9)),
    url('../images/background-images/page-cta-background-img-1.webp');
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
}

.page-cta__container {
    text-align: center;
}

.page-cta__container h2 {
    font-size: 32px;
    font-weight: 600;
    color: #333;
    margin-bottom: 15px;
}

.page-cta__container p {
    margin: 0 auto;
    max-width: 80%;
    font-size: 18px;
    line-height: 1.6;
    color: #444;
}

.page-cta__list {
    list-style: none;
    margin: 30px 0 0;
    padding: 0;
    display: flex;
    justify-content: center;
    gap: 10px;
    font-size: 19px;
}

.page-cta__list a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 24px;
    border-radius: 3px;
    font-size: 16px;
    font-weight: 500;
    text-decoration: none;
    transition: opacity 0.15s, transform 0.1s;
}

.page-cta__list a:active {
    transform: scale(0.97);
}

.page-cta__list li:nth-child(1) a {
    background: #0d47a1;
    color: #ffffff;
    border: 1px solid transparent;
}

.page-cta__list li:nth-child(1) a:hover {
    opacity: 0.88;
}

.page-cta__list li:nth-child(2) a {
    background: #0097a7;
    color: #ffffff;
    border: 1px solid transparent;
}

.page-cta__list li:nth-child(2) a:hover {
    opacity: 0.88;
}

.page-cta__list li:nth-child(3) a {
    background: #25d366;
    color: #ffffff;
    border: 1px solid transparent;
}

.page-cta__list li:nth-child(3) a:hover {
    opacity: 0.88;
}

/* . Gallery
-------------------------------*/
.gallery {
    float: left;
    max-width: 270px;
    height: 180px;
    margin: 0 30px 30px 0;
    border: 1px #ccc solid;
}

.gallery-last {
    float: right;
    max-width: 270px;
    height: 180px;
    margin: 0 0 30px 0;
    border: 1px #ccc solid;
}

/* Video section: full-bleed image with centered play button */
.video-section {
    position: relative;
    overflow: hidden;
    height: 85vh; /* adjust to taste — 60vh–80vh is typical for this style */
    min-height: 400px; /* prevents it getting too short on small screens */
    max-height: 700px; /* prevents it getting too tall on large screens */
}

.video-section__trigger {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.video-section__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover; /* crops to fill the box instead of stretching height */
    object-position: center;
}

.video-section__play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 90px;
    height: 90px;
    border: 2px solid #fff;
    border-radius: 50%;
    color: #fff;
    transition: transform 0.25s ease, background-color 0.25s ease;
}

.video-section__trigger:hover .video-section__play-icon,
.video-section__trigger:focus-visible .video-section__play-icon {
    transform: translate(-50%, -50%) scale(1.1);
    background-color: rgba(255, 255, 255, 0.15);
}

/* Video modal */
.video-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.video-modal[hidden] {
    display: none;
}

.video-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
}

.video-modal__content {
    position: relative;
    width: min(90vw, 960px);
    z-index: 1;
}

.video-modal__iframe-wrap {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9 */
}

.video-modal__iframe-wrap iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.video-modal__close {
    position: absolute;
    top: -44px;
    right: 0;
    padding: 8px;
    border: 0;
    background: none;
    color: #fff;
    cursor: pointer;
}

/* Section Related Posts
----------------------------------------------------------------------------- */
.section-related-posts {
    padding: 60px 0;
    background-color: #f7f7f7;
}

.section-related-posts h2 {
    font-size: 26px;
    font-weight: 600;
    margin-bottom: 25px;
    text-transform: uppercase;
}

/* Site Footer
--------------------------------------------------------------*/
.site-footer {
    background-color: #01081c;
    background-image: linear-gradient(
            to right bottom,
            rgba(1, 8, 28, 0.9),
            rgba(1, 8, 28, 0.9)
    ), url('../images/footer-bg-1.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 90px 0 30px;
    float: left;
    width: 100%;
}

.footer__wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
    grid-column-gap: 60px;
    font-size: 16px;
    color: #eee;
}

.footer__heading {
    font-size: 17px;
    font-weight: 700;
    text-transform: uppercase;
    color: #eee;
    margin-bottom: 16px;
}

.footer__list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer__list li {
    margin-bottom: 2px;
}

.footer__list li a {
    display: inline-flex;
    align-items: center;
    font-size: 15px;
    color: #ccc;
    text-decoration: none;
    padding: 4px 0;
    transition: color 0.2s ease;
}

.footer__list li a:hover {
    color: #fff;
}

.footer__list li a ion-icon[name="chevron-forward-outline"] {
    margin-right: 2px;
}

.footer__company-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px dashed #333;
    padding: 15px 0;
    margin-bottom: 15px;
}

.footer__company-info {
    display: flex;
    align-items: center;
}

.footer__company-info a {
    text-decoration: none;
    color: #ccc;
    display: inline-block;
}

.footer__company-info img {
    margin-right: 30px;
    display: block;
    height: 45px;
    opacity: 60%;
}

.footer__company-info ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #ddd;
}

.footer__company-info ul li:not(:last-child) {
    margin-right: 20px;
}

.footer__company-info ul li a:hover {
    color: #fff;
}

.footer__social-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    gap: 6px;
}

.footer__social-list li a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 3px;
    color: #fff;
    text-decoration: none;
    font-size: 24px;
    transition: background 0.2s, filter 0.2s;
}

/* 1st - Facebook */
.footer__social-list li:nth-child(1) a {
    background: #1877F2;
}

/* 2nd - LinkedIn */
.footer__social-list li:nth-child(2) a {
    background: #0A66C2;
}

/* 3rd - Tumblr */
.footer__social-list li:nth-child(3) a {
    background: #3C599B;
}

/* 4th - YouTube */
.footer__social-list li:nth-child(4) a {
    background: #FF0000;
}

.footer__social-list li a:hover {
    filter: brightness(0.8);
}

.brand {
    padding: 15px 0 20px;
    color: #ccc;
}

.brand img {
    height: 60px;
    margin: 0 0 30px;
}

.service_image {
    float: left;
    margin: 0 0 30px;
}

.service_image img {
    float: left;
    width: 25%;
    margin: 0;
    padding: 0;
}

/* Section Single Post
--------------------------------------------------------------*/
.section-single-post {
    padding: 70px 0;
}

.single-post__box {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.single-post__content {
    flex: 0 0 70%;
    line-height: 30px;
    color: #343a40;
    font-size: 17px;
}

.single-post__content {
    text-align: justify;
}

.single-post__content p {
    line-height: 1.4;
    font-size: 18px;
}

.has-text-align-center {
    text-align: center;
}

.post-slider__wrapper {
    overflow: hidden;
}

.post-slider-img {
    width: 100%;
    height: auto;
    display: block;
}

.post-title {
    color: #000;
    font-size: 26px;
    margin: 20px 0 12px;
    text-align: left;
}

.post-date-meta {
    display: flex;
    align-items: center;
    color: #495057;
    margin: 10px 0;
}

.post-content img {
    margin-bottom: 25px;
}

.single-post__img-silder {
    margin-bottom: 10px;
}

.post-date-meta img {
    height: 15px;
    display: inline-block;
    margin-right: 6px;
}

.post-date-meta p {
    margin: 0;
}

.other-post__content {
    border-top: 1px solid #ddd;
    margin: 30px 0;
    padding-top: 30px;
    display: flex;
    justify-content: space-between;
}

.other-post__previous {
    flex: 0 0 45%;
}

.other-post__next {
    flex: 0 0 45%;
}

.other-post__previous-meta img,
.other-post__next-meta img {
    height: 90px;
    display: inline-block;
    border-radius: 2px;
}

.other-post__previous-meta img {
    margin-right: 15px;
}

.other-post__next-meta img {
    margin-left: 15px;
}

.other-post-title {
    font-size: 16px;
    line-height: 28px;
}

.other-post__previous-meta .other-post-title {
    text-align: left;
}

.other-post__next-meta .other-post-title {
    text-align: right;
}

.other-post-title a {
    transition: all .4s;
    text-decoration: none;
    color: #333;
}

.other-post-title a:hover {
    color: #000;
}

.other-post-title a:focus {
    outline: none;
}

.other-post__previous,
.other-post__next {
    display: flex;
    flex-direction: column;
}

.other-post__next {
    align-items: flex-end;
}

.other-post__prev-button,
.other-post__next-button {
    margin-bottom: 10px;
    text-transform: uppercase;
}

.other-post__prev-button a,
.other-post__next-button a {
    display: block;
    text-decoration: none;
    color: #495057;
    font-size: 13px;
}

.other-post__previous-meta {
    display: flex;
    align-items: center;
}

.other-post__next-meta {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    text-align: right;
}

.single-post__sidebar {
    flex: 0 0 25%;
}

.recent-posts {
    margin-bottom: 30px;
}

.recent-posts-title {
    font-size: 22px;
    color: #000;
    margin-bottom: 20px;
    position: relative;
}

.recent-posts-title::after {
    height: 1px;
    width: 32%;
    background-color: #ddd;
    display: block;
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
}

.recent-posts {
    display: flex;
    flex-direction: column;
}

.recent-post {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
}

.recent-post__img-box {
    flex: 0 0 40%;
}

.recent-post__img-box a {
    display: block;
}

.recent-post__img-box img {
    width: 100%;
    height: 70px;
    border-radius: 3px;
}

.recent-post__img-box img:hover {
    opacity: .9;
}

.recent-post__title-box {
    flex: 0 0 57%;
}

.recent-post__title-box h3 {
    font-size: 14px;
    line-height: 19px;
}

.recent-post__title-box h3 a {
    transition: all .4s;
    text-decoration: none;
    color: #333;
}

.recent-post__title-box h3 a:focus {
    outline: none;
}

.recent-post__title-box h3 a:hover {
    color: #000;
}

/* TOUR ITINERARY
----------------------------------------------------------------------------- */
.tour-itinerary {
    margin: 30px 0;
}

.tour-itinerary__heading {
    font-size: 25px;
    margin-bottom: 15px;
    font-weight: 600;
}

.itinerary-day {
    background: #f1f3f5;
    border-radius: 3px;
    margin-bottom: 7px;
    overflow: hidden;
}

.itinerary-day__header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    background: none;
    border: none;
    font-size: 16px;
    text-align: left;
    cursor: pointer;
}

.itinerary-day__header span {
    font-weight: 600;
    font-size: 17px;
    color: #333;
}

.itinerary-day__icon {
    font-size: 18px;
    transition: transform 0.25s ease;
    flex-shrink: 0;
    margin-left: 12px;
}

.itinerary-day.active .itinerary-day__icon {
    transform: rotate(180deg);
}

.itinerary-day__body {
    height: 0;
    overflow: hidden;
}

.itinerary-day__body-inner {
    padding: 0 20px 18px 20px;
    text-align: left;
    line-height: 1.5;
}

.itinerary-day__body-inner p {
    font-size: 16px;
    line-height: 1.8;
    color: #333;
    text-align: left;
}

/* PACKAGE DETAILS GROUP (multiple sections, one shared box)
----------------------------------------------------------------------------- */
.package-group {
    padding: 25px 30px;
    border-radius: 3px;
    margin: 30px 0;
    background-image: linear-gradient(to right, rgb(47 158 68 / 0.99), rgb(47 158 68 / 0.6)), url(../images/background-images/line-2.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: right;
    color: #f7f7f7;
}

.package-group__section {
    margin-bottom: 22px;
}

.package-group__section:last-child {
    margin-bottom: 0;
}

.package-group__title {
    color: #fff;
    font-size: 25px;
    margin-bottom: 12px;
    font-weight: 600;
}

.package-group__content p {
    margin: 0 0 6px 0;
    color: #fff;
    line-height: 1.4;
    font-size: 18px;
}

.package-group__content p:last-child {
    margin-bottom: 0;
}

.package-group__content ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.package-group__content ul li {
    color: #fff;
    padding: 4px 0 4px 22px;
    position: relative;
    line-height: 1.6;
}

.package-group--green {
    background-image: linear-gradient(to right, rgb(30 147 53 / 0.93), rgb(47 158 68 / 0.6)), url(../images/background-images/line-2.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: right;
}

.package-group--pricing {
    background-image: linear-gradient(to right, rgb(213 0 0 / 80%), rgb(224 49 49 / 0.7)), url(../images/background-images/line-2.png);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: right;
    color: #f7f7f7;
}

.package-group--pricing .package-group__content hr {
    margin-top: 12px;
    margin-bottom: 12px;
    border-top: 1px solid #e46363;
}

.package-group--custom {
    background-color: #f1f3f5;
    background-image: none;
    border: 1px solid #dee2e6;
    color: #212529;
}

.package-group--custom .package-group__title,
.package-group--custom .package-group__content p,
.package-group--custom .package-group__content ul li {
    color: #212529;
}

.package-group--custom .package-group__content ul li::before {
    color: #212529;
}

/* Section Page Header Banner
----------------------------------------------------------------------------- */
.section-page-content {
    padding: 45px 0;
}

.page-content__wrapper {
    font-size: 17px;
    color: #333;
}

.page-content__wrapper h2 {
    font-size: 22px;
    margin-bottom: 25px;
}

.page-content__wrapper h2,
.page-content__wrapper h3,
.page-content__wrapper h4,
.page-content__wrapper h5 {
    margin-bottom: 10px;
}

.page-content__wrapper ul {
    margin-bottom: 15px;
    list-style-position: inside;
}

.page-content__wrapper h2 {
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 15px;
}

/* Section Page Header Banner
--------------------------------------------------------------*/
.section-page-header-banner {
    height: 65vh;
    position: relative;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.page-header-banner__text-box {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 70%;
    color: #fff;
    font-size: 19px;
    line-height: 1.6;
}

.page-header-banner__text-box h1 {
    font-size: 50px;
    /*margin-bottom: 10px;*/
    font-weight: 500;
    text-transform: uppercase;
}

/* Home Bangladesh
----------------------------------------------------------------------------- */
#home_bangladesh {
    width: 100%;
    clear: both;
    display: inline-block;
}

#home_bangladesh img {
    width: 20%;
    float: left;
    height: 250px;
}

#tour_guide {
    width: 100%;
    padding: 60px 100px 150px;
    clear: both;
    display: inline-block;
    text-align: center;
    font-size: 18px;
}

#tour_guide h2 {
    margin: 0;
    padding: 0 0 10px;
    font-size: 45px;
    font-weight: 600;
}

#tour_guide h3 {
    margin: 0;
    padding: 0 0 30px;
    font-size: 25px;
}

#tour_guide .about-btn a:hover {
    color: #fff;
}

#tour_guide span {
    font-weight: 600;
}

#tour_guide a {
    padding: 8px 14px;
    border: 1px #ccc solid;
    border-radius: 5px;
    color: #333;
    margin: 15px 0 0;
    display: inline-block;
}


/* Packages
----------------------------------------------------------------------------- */
#packages {
    width: 100%;
    clear: both;
    display: inline-block;
    padding: 100px 0;
    text-align: center;
    font-size: 17px;
}

#packages h2 {
    margin: 0;
    padding: 0 0 30px;
    font-size: 40px;
    font-weight: 600;
}

#packages p {
    max-width: 700px;
    margin: 0 auto;
    color: #555;
}

.package_grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 30px;
    text-align: left;
}

.package_grid__item {
    display: flex;
    border-radius: 8px;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp .5s ease forwards;
}

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.package_box {
    position: relative;
    width: 100%;
    color: #222;
    font-weight: 400;
    box-shadow: 0 4px 14px rgba(0, 0, 0, .06);
    text-align: left;
    display: flex;
    flex-direction: column;
    border-radius: 3px;
    overflow: hidden;
    transition: transform .3s ease, box-shadow .3s ease;
}

.package_box:hover {
    transform: translateY(-8px);
    box-shadow: 0 18px 30px rgba(0, 0, 0, .14);
}

.package_img_link {
    display: block;
    overflow: hidden;
}

.package_box img {
    width: 100%;
    height: 220px;
    display: block;
    transition: transform .5s ease;
}

.package_box:hover img {
    transform: scale(1.02);
}

.package_name {
    background: #FAFAFA;
    width: 100%;
    padding: 15px 18px 16px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.package_star {
    font-size: 13px;
    color: #777;
    display: flex;
    align-items: center;
    gap: 4px;
}

.package_star_num {
    font-weight: 700;
    color: #222;
}

.package_star_icons i {
    font-size: 12px;
    color: #11C822;
    opacity: 0;
    animation: popIn .3s ease forwards;
    animation-delay: calc(var(--d) * .06s);
}

@keyframes popIn {
    from {
        opacity: 0;
        transform: scale(0);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.package_name h3 {
    padding: 0;
    margin: 8px 0 4px;
    text-align: left;
    min-height: 48px;
}

.package_name h3 a {
    color: #222;
    font-weight: 600;
    font-size: 20px;
    line-height: 1.3;
    text-decoration: none;
    background-image: linear-gradient(#222, #222);
    background-size: 0% 1px;
    background-repeat: no-repeat;
    background-position: left bottom;
    transition: background-size .3s ease, color .3s ease;
}

.package_name h3 a:hover {
    background-size: 100% 1px;
}

.package_meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 10px 0 4px;
    flex-wrap: wrap;
    gap: 6px;
}

.package_name_left {
    color: #555;
    font-size: 14px;
    font-weight: 500;
}

.package_name_left span {
    font-size: 22px;
    font-weight: 700;
    color: #e6432f;
    margin: 0 2px;
}

.package_name_right {
    color: #555;
    font-size: 16px;
    font-weight: 500;
}

.package_name_right i {
    margin-right: 4px;
}

.package_details {
    margin-top: auto;
}

.package_details a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 20px;
    margin: 10px 0 0;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    background: #222;
    border-radius: 30px;
    text-decoration: none;
    transition: background .25s ease, gap .25s ease;
}

.package_details a .arrow {
    transition: transform .25s ease;
}

.package_details a:hover {
    background: #e6432f;
    gap: 10px;
}

.package_details a:hover .arrow {
    transform: translateX(2px);
}

@media (max-width: 600px) {
    .package_grid {
        grid-template-columns: 1fr;
    }
}

/* Header row: title left, arrows right */
.package_carousel_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0 30px;
}

.package_carousel_header h2 {
    margin: 0;
    padding: 0;
}

.package_carousel__arrows {
    display: flex;
    gap: 10px;
    flex: 0 0 auto;
}

/* Carousel wrapper — no side arrows, plain track */
.package_carousel {
    width: 100%;
}

.package_carousel__track {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: calc((100% - 60px) / 3);
    gap: 30px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    text-align: left;
    padding-bottom: 4px;

    scrollbar-width: none;
    -ms-overflow-style: none;
}

.package_carousel__track::-webkit-scrollbar {
    display: none;
}

.package_carousel__slide {
    scroll-snap-align: start;
    display: flex;
}

@media (max-width: 991px) {
    .package_carousel__track {
        grid-auto-columns: calc((100% - 30px) / 2);
    }
}

@media (max-width: 600px) {
    .package_carousel_header {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }

    .package_carousel__track {
        grid-auto-columns: 85%;
    }

    .package_carousel__arrows {
        display: none; /* rely on swipe on mobile */
    }
}

/* Arrows */
.package_carousel__arrow {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background: #fff;
    color: #222;
    box-shadow: 2px 4px 9px 0 rgba(0, 0, 0, .12);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    transition: .2s;
}

.package_carousel__arrow:hover {
    background: #2F4F3F;
    border-color: #2F4F3F;
    color: #fff;
}

.package_carousel__arrow:disabled {
    opacity: .35;
    cursor: default;
}

.package_carousel__arrow:disabled:hover {
    background: #fff;
    color: #222;
}

/* Section Blog
--------------------------------------------------------------*/
.section-blog {
    padding: 70px 0 90px;
    background-color: #F5F0E6;
    /*width: 100%;
    float: left;*/
}

.section-blog .package_carousel_header {
    display: flex;
    /*align-items: flex-end;*/
    justify-content: space-between;
    margin-bottom: 34px;
}

.blog__eyebrow {
    display: inline-block;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: #01a925;
    margin-bottom: 10px;
}

.section-blog .section-header-textbox h2 {
    font-weight: 600;
    font-size: 34px;
    line-height: 1.15;
    color: #1d3226;
    margin: 0;
}

.section-blog .package_carousel__arrows {
    display: flex;
    gap: 10px;
    flex-shrink: 0;
    padding-bottom: 4px;
}

.section-blog .package_carousel__arrow {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid rgba(47, 79, 63, 0.25);
    background: transparent;
    color: #1d3226;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.section-blog .package_carousel__arrow:hover:not(:disabled) {
    background: #2F4F3F;
    border-color: #2F4F3F;
    color: #fff;
}

.section-blog .package_carousel__arrow:disabled {
    opacity: 0.35;
    cursor: default;
}

/* Track / carousel
--------------------------------------------------------------*/
.blog__container {
    margin-top: 0;
}

.blog__box.package_carousel__track {
    display: flex;
    gap: 28px;
}

.blog__article.package_carousel__slide {
    flex: 0 0 calc(25% - 21px);
    min-width: 260px;
}

@media (max-width: 1200px) {
    .blog__article.package_carousel__slide {
        flex: 0 0 calc(33.333% - 19px);
    }
}

@media (max-width: 991px) {
    .blog__article.package_carousel__slide {
        flex: 0 0 calc(50% - 14px);
    }
}

@media (max-width: 599px) {
    .blog__article.package_carousel__slide {
        flex: 0 0 85%;
    }
}

/* Card
--------------------------------------------------------------*/
.blog__article {
    background-color: #FFFFFF;
    border-radius: 5px;
    border: 1px solid rgba(47, 79, 63, 0.08);
    box-shadow: 0 2px 10px rgba(36, 38, 31, 0.06);
    display: flex;
    flex-direction: column;
    /*height: 100%;*/
    overflow: hidden;
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.blog__article:hover {
    transform: translateY(-6px);
    box-shadow: 0 18px 34px rgba(36, 38, 31, 0.14);
}

/* Image + postmark stamp
--------------------------------------------------------------*/
.blog__img-box {
    position: relative;
    overflow: hidden;
}

.blog__img-box a {
    display: block;
    text-decoration: none;
}

.blog__img-box img {
    width: 100%;
    height: 220px;
    display: block;
    transition: transform 0.5s ease;
}

.blog__article:hover .blog__img-box img {
    transform: scale(1.07);
}

.blog__stamp {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.94);
    border: 1px dashed #b08430;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transform: rotate(-9deg);
    transition: transform 0.35s ease;
    pointer-events: none;
}

/* Text content
--------------------------------------------------------------*/
/*.blog__text-box {
    padding: 20px 22px 22px;
    display: flex;
    flex-direction: column;
    flex: 1;
}*/

.blog__text-box {
    padding: 20px 22px 22px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.blog__body {
    display: flex;
    flex-direction: column;
    flex: 1;
}

.blog__text-box a:focus {
    outline: none;
}

.blog__meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.blog__meta-category {
    color: #2F4F3F;
    font-weight: 600;
}

.blog__meta-dot {
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #7FA592;
    flex-shrink: 0;
}

.blog__meta-date {
    color: #7FA592;
}

/*.blog__title {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.35;
    margin: 0 0 10px;
}*/

/*.blog__title {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.35;
    margin: 0 0 10px;
    min-height: 54px; !* reserves space for 2 lines: 20px * 1.35 * 2 ≈ 54px *!
}*/

.blog__title {
    font-size: 20px;
    font-weight: 600;
    line-height: 1.35;
    margin: 0 0 10px;
}

/*.blog__title a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-decoration: none;
    color: #24261F;
    transition: color 0.25s ease;
}*/

.blog__title a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-decoration: none;
    color: #24261F;
    transition: color 0.25s ease;
}

.blog__article:hover .blog__title a {
    color: #2F4F3F;
}

/*.blog__excerpt {
    font-size: 14px;
    line-height: 1.6;
    color: #5b5d52;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 46px;
    margin: 0 0 18px;
}*/

.blog__excerpt {
    font-size: 14px;
    line-height: 1.6;
    color: #5b5d52;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin: 0;
    flex: 1; /* fills remaining space so footer always lands at the same spot */
}

.blog__footer {
    margin-top: 18px;
}

.blog__btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.01em;
    text-decoration: none;
    color: #1d3226;
    margin-top: auto;
    align-self: flex-start;
    padding-bottom: 2px;
    border-bottom: 1px solid transparent;
    transition: border-color 0.25s ease, color 0.25s ease;
}

.blog__btn:hover {
    color: #333;
}

.blog__btn-arrow {
    transition: transform 0.25s ease;
}

.blog__btn:hover .blog__btn-arrow {
    transform: translateX(4px);
}

/* Accessibility
--------------------------------------------------------------*/
.blog__title a:focus-visible,
.blog__btn:focus-visible,
.section-blog .package_carousel__arrow:focus-visible {
    outline: 2px solid #2F4F3F;
    outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
    .blog__article,
    .blog__img-box img,
    .blog__stamp,
    .blog__btn-arrow {
        transition: none !important;
    }
}

/* Blog Page Grid
----------------------------------------------------------------------------- */
/* Blog page — same cards as homepage, grid layout instead of carousel
--------------------------------------------------------------*/
.blog__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
}

@media (max-width: 1200px) {
    .blog__grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 991px) {
    .blog__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
    }
}

@media (max-width: 599px) {
    .blog__grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

/* Section Contact
--------------------------------------------------------------*/
.section-contact {
    padding: 80px 0 40px;
}

.contact__wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.contact__text-box {
    flex: 0 0 45%;
    margin-top: 20px;
}

.contact__text-box h2 {
    line-height: 1.2;
    font-size: 30px;
    font-weight: 600;
    color: #0d2e0d;
    margin-bottom: 20px;
}

.contact__item-wrapper {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.contact__item {
    padding-bottom: 20px;
    border-bottom: 1px solid #e5e7eb;
}

.contact__item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.contact__item h3 {
    font-size: 15px;
    font-weight: 600;
    text-transform: uppercase;
    color: #404651;
    margin: 0 0 8px;
}

.contact__item p {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 17px;
    line-height: 1.6;
    color: #1f2937;
    margin: 0;
}

.contact__item p span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    background: #ecfdf5;
    border-radius: 50%;
    margin-top: 1px;
}

.contact__item p span ion-icon {
    font-size: 21px;
    color: #10b981;
}

/* ── Card ── */
.sb-form-card {
    background: #fff;
    border-radius: 16px;
    padding: 40px 36px;
    border: 1px solid #e0e8e0;
    flex: 0 0 45%;
    box-shadow: 0 2px 16px rgba(0, 0, 0, .05);
}

/* ── Header ── */
.sb-form-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #e6f0e6;
    color: #2d7a2d;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: 5px 13px;
    border-radius: 20px;
    margin-bottom: 22px;
}

.sb-form-eyebrow svg {
    width: 12px;
    height: 12px;
    stroke: #2d7a2d;
    fill: none;
    stroke-width: 2;
}

.sb-form-title {
    font-size: 30px;
    font-weight: 600;
    color: #0d2e0d;
    margin-bottom: 20px;
}

.sb-form-subtitle {
    font-size: 15px;
    color: #7a9a7a;
    margin-bottom: 28px;
    line-height: 1.65;
}

/* ── Field rows ── */
.sb-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 14px;
}

.sb-field {
    margin-bottom: 14px;
}

.sb-field.no-mb {
    margin-bottom: 0;
}

.sb-field label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    color: #4a6a4a;
    text-transform: uppercase;
    letter-spacing: .07em;
    margin-bottom: 7px;
}

.sb-field label ion-icon {
    font-size: 18px;
    color: #7aaa7a;
    flex-shrink: 0;
}

.sb-req {
    color: #e24b4a;
    margin-left: 1px;
}

.sb-field input,
.sb-field textarea {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #dde8dd;
    border-radius: 8px;
    font-size: 15px;
    font-family: "Anek Bangla", sans-serif;
    background: #fbfcfb;
    color: #1a1a1a;
    outline: none;
    transition: border-color .18s, box-shadow .18s, background .18s;
}

.sb-field input::placeholder,
.sb-field textarea::placeholder {
    color: #b0c8b0;
    font-family: "Anek Bangla", sans-serif;
}

.sb-field input:focus,
.sb-field textarea:focus {
    border-color: #2d7a2d;
    background: #fff;
    box-shadow: 0 0 0 3px rgba(45, 122, 45, .08);
}

.sb-field input.error,
.sb-field textarea.error {
    border-color: #e24b4a;
    box-shadow: 0 0 0 3px rgba(226, 75, 74, .08);
}

.sb-field textarea {
    resize: vertical;
    min-height: 130px;
    line-height: 1.65;
}

.sb-field .sb-char {
    text-align: right;
    font-size: 11px;
    color: #b0c8b0;
    margin-top: 4px;
}

/* ── Privacy ── */
.sb-privacy {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 15px;
    color: #7a9a7a;
    line-height: 1.55;
    margin-bottom: 20px;
    padding: 11px 13px;
    background: #f7fbf7;
    border-radius: 8px;
    border: 1px solid #e0eee0;
}

.sb-privacy ion-icon {
    font-size: 15px;
    color: #2d7a2d;
    flex-shrink: 0;
    margin-top: 1px;
}

/* ── Submit ── */
.sb-btn {
    width: 100%;
    padding: 13px 20px;
    background: #1a5c1a;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    transition: background .18s, transform .1s;
    letter-spacing: .01em;
}

.sb-btn svg {
    width: 17px;
    height: 17px;
    stroke: #fff;
    fill: none;
    stroke-width: 2;
}

.sb-btn:hover {
    background: #236e23;
}

.sb-btn:active {
    transform: scale(.98);
}

.sb-success {
    display: none;
    align-items: center;
    gap: 10px;
    background: #eaf3de;
    border: 1px solid #97c459;
    border-radius: 8px;
    padding: 13px 16px;
    font-size: 17px;
    color: #27500a;
    margin-top: 14px;
    line-height: 1.5;
}

.sb-success svg {
    width: 20px;
    height: 20px;
    stroke: #3b6d11;
    fill: none;
    stroke-width: 2;
    flex-shrink: 0;
}

.sb-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 28px 0;
    color: #c0d4c0;
    font-size: 12px;
}

.sb-divider::before,
.sb-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #e8f0e8;
}

.sb-btn:disabled {
    opacity: .7;
    cursor: not-allowed;
}

.sb-error-msg {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fdf0f0;
    border: 1px solid #e24b4a;
    border-radius: 8px;
    padding: 13px 16px;
    font-size: 15px;
    color: #c0392b;
    margin-top: 14px;
    line-height: 1.5;
}

/* Section Map
----------------------------------------------------------------------------- */
.section-map {
    padding: 0 0 80px 0;
}

.section-map__wrapper h2 {
    font-size: 30px;
    font-weight: 600;
    color: #0d2e0d;
    margin-bottom: 20px;
}