* {
  font-family: 'Nunito', sans-serif;
}
body {
  padding-top: 130px; /* adjust based on header total height */
}
.header-bg {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  background: #fff;  /* white background */
  z-index: 1050;     /* always above content */
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}
.flex-between{
    display: flex;
    justify-content : center;
    align-items: center;
}
.flex-block-between{
    display: flex;
    justify-content : center;
    align-items: center;
}
    .flex-30{
        flex:1 1 30%;
    }
    .flex-50{
        flex:1 1 50%;
    }

.image-container {
    height: auto;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.image-container-ismall {
    width: 5.3%;
}
.image-container-xsmall {
    width: 15%;
}

/* .image-container-25 {
    width: 23%;
} */
.image-container-small {
    width: 30%;
}
.custom-form-control{
    background-color:#203555 !important;
    padding: 6px;
    border: 1px solid rgba(36, 39, 44, .5);
    width: 93% !important;
}
.custom-button-control{
    background-color: #203555 !important;
    width: 50px !important;         /* Make width and height equal */
    height: 50px !important;
    padding: 0;                     /* Remove internal spacing */
    border-radius: 50%;            /* Makes it circular */
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;                  /* Optional: Remove border */
    cursor: pointer;              /* Optional: Pointer on hover */
}

.custom-signin{
    padding: 10px !important;
}

.custom-placeholder::placeholder{
    color: white !important;
}

.custom-innersearch{
    color: white !important;
}

/* .custom-category option{
    background-color: #203555;
    color:  white;
} */

.category-select{
    max-width: 80px !important;
    background-color: #203555 !important;
    color:  white !important;
}

.category-select option {
    background-color: #203555 !important;
    color: white !important;
}

.navbar {
  /* height: 70px; */
  padding: 0 !important;
  display: flex;
  align-items: center;
   position: relative;
  z-index: 1000;
}

.navbar-brand img {
  max-height: 85px;
  height: 100%;
  width: auto;
  object-fit: contain;
}

/* .navbar-brand img {
  max-height: 70px;
  height: 100%;
  width: auto;
  object-fit: contain;
} */

/* .navbar-brand img {
    max-height: 100px;
    height: auto;
    width: auto;
    object-fit: contain;
} */

.custom-hr {
  margin: 0%;
}


.navbar-collapse {
  background-color: white;
  z-index: 999;
  width: 100%;
}

/* When menu is visible (collapsed shown) */
/* .navbar-collapse.collapse.show {
  position: absolute;
  top: 100%; Just below navbar
  left: 0;
  background: white;
  z-index: 9999;
} */

.navbar-collapse.collapse.show {
  /* position: absolute;
  top: 100%; Just below navbar
  left: 0; */
  background: white;
  z-index: 9999;
}

.bg-darkblue {
    background-color: #1A2B3C !important; /* Adjust to match your theme */
}

.btn-circle {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    border: none !important;
}

.btn-circle:hover,
.bg-darkblue:hover {
    background-color: #2a3d56;/* Slightly lighter on hover */
}

a.btn:hover {
    text-decoration: none !important;
}

select:focus {
  outline: none;
  box-shadow: none;
  border-color: transparent; /* optional: if any border shows */
}

/* Submenu position (side) */
/* .dropdown-submenu {
  position: relative;
}
.dropdown-submenu .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: 0;
  display: none;
}
.dropdown-submenu.show .dropdown-menu {
  display: block;
} */

/* Arrow default and rotated */
/* Arrow styling */
.submenu-arrow {
    display: inline-block;
    transition: transform 0.2s ease;
}
/* Rotate the arrow when the dropdown is open */
.nav-link.show .submenu-arrow {
    transform: rotate(90deg);
}

/* Rotate arrow when dropdown is open */
/* .nav-link.dropdown-toggle.show .submenu-arrow,
.submenu-toggle.show .submenu-arrow {
    transform: rotate(90deg);
} */

/* Sub-menu default is hidden */
/* .sub-menu {
    display: none;
} */

/* Show submenu when 'show' class is added */
/* .submenu-toggle.show + .sub-menu {
    display: block;
} */

/* .dropdown-menu > .dropdown-submenu:last-child {
  border-bottom: none;
} */

/*Line between submenu items */
/* .sub-menu > li > a {
  border-bottom: 1px solid #eee;   lighter line inside submenu
  padding: 6px 12px;              spacing neat ah irukanum
  display: block;                 full row clickable
} */

/* Remove last line in submenu */
/* .sub-menu > li:last-child > a {
  border-bottom: none;
} */

/* .owl-carousel .owl-item img {
    width: unset !important;
}

#testimonial-slider img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 50%;
} */

/* @media (max-width: 988px) {
    .custom-nav.navbar-nav{
        justify-content: flex-start !important;
        align-items: flex-start !important;
        flex-direction: column;
    }
    .search-form {
        max-width: 70% !important;
        justify-content: center;
        align-items: center;
        margin: 0 auto;
    }
    .header-btn-group {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin: 0 auto;
        width: 100%;
    }
    .header-login-button {
        padding: 6px 12px !important;
        font-size: 14px !important;
        white-space: nowrap;
        max-width: 180px;
        flex-shrink: 1;
    }
} */
 .btn-menu {
    padding: 8px 15px;
    background-color: #203455;
    color: white;
    border: none;
    border-radius: 20px;
    cursor: pointer;
}

.btn-menu:hover {
    background-color: white;
    color: #203455;
}

.navbar-toggler .fa-bars {
  font-size: 24px;   /* bigger size */
  color: #000;       /* black */
}

/* For dark backgrounds */
.navbar-dark .fa-bars {
  color: #fff;
}
/* Main dropdown on hover */
/* .navbar-nav .dropdown:hover > .dropdown-menu {
  display: block;
  margin: 0; 5% gap remove panna better
  border-radius: unset;
} */

/* Submenu show on hover */
.dropdown-submenu {
  position: relative;
}
.dropdown-submenu:hover > .sub-menu {
  display: block;
  top: 0;
  left: 100%;
  margin-top: 0;
  position: absolute;
}

/* Ensure submenu stays visible */
/* .dropdown-menu,
.sub-menu {
  display: none;
} */
/* .dropdown:hover > .dropdown-menu,
.dropdown-submenu:hover > .sub-menu {
  display: block;
} */
/* Submenu position for desktop */
.dropdown-submenu {
    position: relative;
}

.dropdown-submenu > .dropdown-menu {
    top: 0;
    left: 100%;
    /* margin-top: -1px; Align with parent menu item */
}
/* .dropdown-menu {
      display: none;
    } */
    /* .dropdown-menu.show {
      display: block;
    } */


/* .navbar-toggler-icon {
  color:black;
} */


/* old web header */
/* @media (max-width: 988px) {
    .custom-nav.navbar-nav {
        justify-content: flex-start !important;
        align-items: center !important;
        flex-direction: column;
    }

    Optional: full screen nav
    .navbar-collapse.collapse.show {
        position: absolute;
        top: 100%; below navbar
        left: 0;
        width: 100%;
        background-color: rgba(255, 255, 255, 0.95);
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        z-index: 999;
        opacity: 1;
    }

    .search-form {
        max-width: 70% !important;
        justify-content: center;
        align-items: center;
        margin: 0 auto;
    }

    .header-btn-group {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin:4% 0;
        width: 100%;
    }

    .header-login-button {
        padding: 6px 12px !important;
        font-size: 14px !important;
        white-space: nowrap;
        max-width: 180px;
        flex-shrink: 1;
    }
}


@media (max-width: 1137px) and (min-width: 992px) {
    .header-login-button {
        padding: 6px 12px !important;
        font-size: 14px !important;
        white-space: nowrap;
        max-width: 180px;
        flex-shrink: 1;
    }

    .header-btn-group {
        flex-wrap: wrap;
        justify-content: center;
    }

    .header-login-button {
        width: 100%;
        max-width: 180px;
        padding: 6px 10px;
        font-size: 14px;
        white-space: nowrap;
    }

    .header-login-button img {
        width: 16px !important;
    }
}

@media (min-width: 422px) {
  .category-select {
    width: 100%;
    max-width: none;
  }
  .custom-font1{
    font-size: 20px;
  }
} */
/* complete old web header */

/* nav bar */
/* Desktop: Show dropdown and submenus on hover */
@media (min-width: 989px) {
    .navbar-nav .dropdown:hover > .dropdown-menu,
    .dropdown-submenu:hover > .dropdown-menu {
        display: block;
    }
}
@media (max-width: 988px) {


  /* Make container vertical in mobile */
  .d-flex.align-items-center.justify-content-evenly.py-2 {
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 8px 12px;
  }

  /* Logo center & small */
  .navbar-brand {
    text-align: center;
  }
  .navbar-brand img {
    width:65%;
  }

  /* Search box full width */
  .search-form {
    display: none;
  }
  .search-form input,
  .search-form select {
    display: none;
  }

  .flex-grow-1.d-flex.justify-content-center{
    display:none !important;
  }
  .bg-transparent.custom-placeholder.custom-innersearch{
    display: none;
  }
  .input-group-text.border-0.bg-transparent{
    display:none;
  }
  .vr.bg-light{
    display:none;
  }

  /* Toggler (hamburger) center */
  .navbar-toggler {
    align-self: center;
    margin: 0 auto;
    border: none;
    outline: none;
    font-size: 20px;
  }

  .position-relative.custom-countbtn{
    display:none !important;
  }


  .rounded-pill.d-flex.align-items-center.gap-2.sign-in{
    display:none !important;
  }

  .text-dark.small.lang{
    display:none;
  }

  /* Dropdown when hamburger opens */
  .navbar-collapse.collapse.show {
    position: relative;   /* absolute → relative */
    top: 0;              /* remove overlap */
    left: 0;
    width: 100%;
    background: #fff;    /* solid background for menu */
    padding: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    z-index: 999;
}

  /* Make dropdown items smaller */
  .navbar-collapse .nav-link {
    font-size: 14px;
    padding: 6px 12px;
  }
  /* .dropdown-submenu.show .submenu-arrow {
  transform: rotate(-90deg); › becomes ^ 
} */
/* Hide the submenu initially */
    .offcanvas-body .sub-menu {
        display: none;
    }
    /* Show submenu when active */
    .offcanvas-body .submenu-toggle.show + .sub-menu {
        display: inline;
        list-style: none !important;
    }
    /* Rotate arrow icon when submenu is open */
.submenu-toggle.show .submenu-arrow,
.newAutosDropdown.show .submenu-arrow {
    transform: rotate(90deg); /* Change to -90deg if needed */
    transition: transform 0.3s ease;
}
    .offcanvas-body .nav-link {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
}
/* completed nav bar */



/* .image-container-medium {
    width: 50%;
}

.image-container-large {
    width: 200px;
}

.responsive-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.heading1{
    font-family: Bakbak One;
    font-size: 42px;
    font-weight: 400;
    line-height: 50px;
    letter-spacing: 0.01em;
}
.font-10{
    font-size:10px;
}
.white-color{
    color: #FFFFFF;
}
.heading1-color{
    color: #233158;
} */
/*.box7{*/
/*    width:83%;*/
/*}*/
/* .header-bg{
    background: #FFFFFF;
}
.header_text{
    font-family: Bakbak One;
    font-size: 30px;
    letter-spacing: 0.05em;
    color:#ffffff;
    display:flex;
    justify-content: start;
}
.header_top{
    padding:2% 0%;
} */


/*/ Extra small devices (phones, less than 576px) /*/

/* @media (min-width: 276px) and (max-width: 576px) {
    .image-container-small {
    width: 23%;
}

    .header_text{
    font-size: 22px;
}
.header_top{
    padding:0%;
}
    .box8{
     background: url(../image/home_images/1_banner_1.png);
     background-size: cover;
     height: 26rem;
    }
    .box-2 {

        visibility: hidden;

          height: 22rem;
  }
  .section1-content {
    position: relative;
    transform: translate(0px, 18px);
}
.box-3 .responsive-img {
    height: 37rem;
}
.box6 .section3-phone{
    display: none;
}
.box9{
    margin-top: 9rem;
}
.box11 img,.box12 img,.box13 img,.box14 img,.box15 img{
    width: 50%;
}
.strxt{
    font-size: 40px;
}
.section3-positon {
    position: relative;
    transform: translate(0px, 4px);
    left: 23%;
    width: 55%;
}
.section2{
    margin-top:7%;
}
.heading1 {
    font-size: 35px;
}
} */

/*/ Small devices (phones, 576px and up) /*/
/* @media (min-width: 576px) and (max-width: 767.98px) {
    .flex-block-between{
    display: block;
    }
    .box-2 {

          visibility: hidden;
            height: 24rem;
    }
    .box8{
     background: url(../image/home_images/1_banner_1.png);
     background-size: cover;
     height: 22rem;
    } */
    /* .box-3 .responsive-img {
        height: 46rem;
    } */

    /* .section1-content {
        position: relative;
        transform: translate(0px, 14px);
    } */
/* .box-3 .responsive-img {
height: 70rem;
}
.box6{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-content: center;
}

    .section3-heading {
        font-family: Bakbak One;
        font-size: 35px;
        font-weight: 400;
        line-height: 37px;
        letter-spacing: 0.01em;
        text-align: left;
        color: #F7F7F7;
    }
    .section3-phone {
        width: 50%;
        position: relative;
        max-width: 300px;
        margin-top: -18%;
    }
    .section3-positon {
        position: relative;
        transform: translate(0px, 30px);
        left: 33%;
        width: 55%;
    } */


    /*.section2{*/
    /*    margin-top:9%;*/
    /*}*/
    /* .heading1 {
        font-size: 35px;
    }
    .responsive-img {
        width: 60%;
    } */

/* } */

/*/ Medium devices (tablets, 768px and up) /*/
/* @media (min-width: 768px) and (max-width: 991.98px) {

    .box-2 {


        height: 24rem;

}
.box-1 .section1-content {
    width: 55%;
}
    .section1-content {
        position: relative;
        transform: translate(0px, 30px);
    }
    .box-3 .responsive-img {
        height: 27rem;
    }
    .section2{
        margin-top:11%;
    }
    .heading1 {
        font-size: 45px;
    }

} */


/* @media (min-width: 992px) and (max-width: 1199.98px) {


   .box-1 .section1-content{

        width: 45%;

    }
    .box-1 {
         height: 31rem;
    }
    .section1-content {
        position: relative;
        transform: translate(33px, 63px);
    }
    .box-3 .responsive-img {
        height: 24rem;
    }
    .section2{
        margin-top:6%;
    }

} */

/*/ Extra large devices (large desktops, 1200px and up) /*/
/* @media (min-width: 1200px) and (max-width: 1399.98px) {
    .section1-content{
        width: 55%;
    }

} */

/*/ Extra extra large devices (very large screens, 1400px and up) /*/
/* @media (min-width: 1400px) {

    .section2{
        margin-top:7%;
    }
.section1-content{

    width: 65%;
}
} */