:root {
     --color_one: #0d4c40;
     --color_two: #f58220;
     --color_three: #DBE9E6;
     --color_four: #f58220;
     --color_five: #707070;
     --color_six: #f6f6f6;
     --color_seven: #cccccc;
     --color_eight: #0A4C40;
     --color_nine: #000000;
     --color_ten: #ffffff;
 }

 /* --------------------DEFAULT STYLES--------------------  */
 .btn-primary {
     color: white;
     font-weight: 600;
     background: linear-gradient(to right,
             #f58220 0%, #f58220 40px,
             #0d4c40 40px, #0d4c40 100%);
     border: none;
     border-radius: 50px;
     transition: all 0.3s ease;
     box-shadow: 0 3px 8px rgba(0, 0, 0, 0.14);
     padding: 5px 30px;
 }

 .btn-primary:hover,
 .btn-primary:focus-visible {
     background: linear-gradient(to right,
             #f58220 0%, #f58220 100%,
             #0d4c40 28%, #0d4c40 100%);
     transition: all 0.5s ease;
     box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22);
     color: white;
 }

 .btn-primary:active {
     transform: translateY(1px);
     box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
 }

 /* Optional: even sharper contrast on text */
 .btn-primary {
     text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
 }

 .section_title .title {
     font-size: 36px;
     font-weight: bold;
 }

 .section_bg_alter {

     background: #E7EDEC;


 }

 a {
     text-decoration: none;
 }

 a:hover {
     text-decoration: none;
     color: var(--color_two);
 }

 .singlish_page_img {
     border-radius: 15px;
 }

 main {
     padding-bottom: 0px !important;
 }

 /* ----------------------------------Top Area---------------------  */
 .top_area {
     background: var(--color_one);
     padding: 5px;
     color: var(--color_ten);
     border-bottom: 4px solid var(--color_one);
 }

 .top_area .contact_icon i {
     color: var(--color_ten);
     color: var(--color_ten);

 }

 .top_social_icon a {
     margin: 3px;
 }

 .top_social_icon i {
     background: var(--color_two);
     color: var(--color_ten);
     font-size: 18px;
     height: 30px;
     border-radius: 50%;
     width: 29px;
     padding: 6px 4px;
     text-align: center;
 }

 /* ------------------------------------------Menu Area ----------------------- */
 .menu_area {

     background: #f6fdfc;
     border-bottom: 4px solid var(--color_two);
 }

 .menu_area .nav-link {
     color: var(--color_nine);
     font-size: 24px;
 }

 .shopping_card {
     padding: 4px;
 }

 .shopping_card a {
     margin: 10px;
     color: var(--color_one);
 }

 .shopping_card .counde {
     position: absolute;
     margin-top: -11px;
     color: var(--color_two);
     font-weight: bold;
 }

 /* ----------------------------our_expert ---------------------  */
 .watch_our {
     background-color: var(--color_one);
     color: var(--color_ten);

 }

 .video_image iframe {
     border: 5px solid var(--color_ten);
     width: 100%;
     height: 315px;
 }

 /* =============================================================Banner ============================================= */

 .banner_area {
     position: relative;
 }

 .carousel-item {
     position: relative;
 }



 /* Overlay text box */
 .carousel-caption-custom {
     position: absolute;
     top: 50%;
     left: 13%;
     transform: translateY(-50%);
     max-width: 500px;
     color: #fff;
     z-index: 10;
 }

 /* Dark gradient overlay (optional but recommended) */
 .carousel-item::before {
     content: "";
     position: absolute;
     inset: 0;
     background: linear-gradient(90deg,
             rgba(9, 70, 60, 0.85) 0%,
             rgba(9, 70, 60, 0.6) 40%,
             rgba(0, 0, 0, 0) 70%);
     z-index: 1;
 }

 .carousel-caption-custom h1 {
     font-size: 42px;
     font-weight: 700;
     margin-bottom: 15px;
 }

 .carousel-caption-custom p {
     font-size: 16px;
     line-height: 1.7;
     margin-bottom: 20px;
 }

 /* Mobile responsive */
 @media (max-width: 768px) {
     .banner-img {
         height: 380px;
     }

     .carousel-caption-custom {
         left: 5%;
         right: 5%;
         max-width: 100%;
     }

     .carousel-caption-custom h1 {
         font-size: 26px;
     }
 }



 /* =============================================== About us ======================================== */
 .about_us .section_title .title {
     color: var(--color_one);
 }

 .about_detiles p {
     padding: 10px;
     line-height: 36px;
     text-align: justify;
     font-size: 19px;
 }





 /* ====================================== Blog ============================ */
 .blog .section_title .title {
     color: var(--color_one);
 }



 .blog_items {
     border-radius: 10px;
     border: 1px solid #b8ceca;
     background-color: var(--color_ten);
 }

 .blog_img {
     position: relative;
     width: 100%;
     height: 220px;
     /* 🔒 fix height */
     overflow: hidden;
     /* 🔒 overflow hide */
     border-radius: 10px 10px 0 0;
 }

 .blog_img a img {
     width: 100%;
     height: 100%;
     /* 🔒 same height */
     object-fit: cover;
     /* 🔥 image crop nicely */
     display: block;
     transition: transform 0.5s ease;
 }

 .blog_items:hover .blog_img a img {
     transform: scale(1.1);
 }

 .blog_icon,
 .blog_user,
 .blog_timedate {
     color: #707070;
 }

 .blog_user .sub_name {
     font-size: 14px;
 }

 .blog_timedate .tag_section {

     padding: 2px 17px;
     border-radius: 15px;
     border: 1px solid var(--color_five);
 }

 .blog_items:hover .blog_title a {
     color: var(--color_two);
 }



 .blog_items:hover {
     border: 1px solid #3fa794;
     box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15) !important;

 }

 .blog_details {
     padding: 15px;

     border-radius: 0px 0px 10px 10px;

 }

 .blog_title {
     font-size: 20px;
     font-weight: bold;
     margin-bottom: 10px;
     color: var(--color_nine);
     min-height: 60px;
 }

 .blog_details p,
 .blog_details a {
     color: var(--color_nine);
 }

 /* ================================blog list search =========================== */


 .filter-box {
     background: #fff;
     padding: 18px 20px;
     border-radius: 16px;
     box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
     border: 1px solid #eef1f4;
 }

 /* Search input with icon */
 .search-input {
     position: relative;
 }

 .search-input i {
     position: absolute;
     left: 16px;
     top: 50%;
     transform: translateY(-50%);
     color: #9ca3af;
     font-size: 14px;
 }

 .search-input input {
     padding-left: 42px;
     height: 52px;
     border-radius: 12px;
     border: 1px solid #e5e7eb;
 }

 /* Select */
 .form-select {
     height: 52px;
     border-radius: 12px;
     border: 1px solid #e5e7eb;
 }

 /* Button */
 .apply-btn {
     height: 52px;
     border-radius: 12px;
     font-weight: 600;
 }

 /* ================================.vitaboost==================== */
 .vitaboost {
     background-image: url(../img/highlight_products.png);
     color: var(--color_ten);
     background-position: center;
     background-repeat: no-repeat;
 }

 .vitaboost_title h2 {
     color: var(--color_ten);
     font-weight: bold;
     font-size: 50px;
 }

 /* =======================mission_title==================== */
 .mission_vission .section_title {
     color: var(--color_one);

 }

 .mission_list h4 {
     font-weight: bold;
     color: var(--color_one);
 }









 /* =========================Footer area====================== */
 .footer_area {
     background-image: url(../img/Footer.png);
     padding: 60px 0px 30px 0px;
 }

 .address_link i {
     color: var(--color_two);
 }

 footer {
     padding-bottom: 0px !important;
 }

 .footer_area .footer_title h4 {
     color: var(--color_ten);
     font-weight: bold;
     font-size: 20px;
 }

 .footer_link a {
     color: var(--color_ten);
 }

 .copyright {
     border-top: 1px solid #087762;
 }

 /* =========================================================================Shopping====================================================================== */



 /* =========================================================Items section ====================================================================== */
 .items {
     overflow: hidden;
     margin-bottom: 40px;
 }

 .items_img {
     height: 350px;
     position: relative;
     background-position: center center;
 }

 .items_img .label {
     color: #111111;
     font-size: 11px;
     font-weight: 700;
     letter-spacing: 2px;
     text-transform: uppercase;
     display: inline-block;
     padding: 4px 15px 2px;
     background: #ffffff;
     position: absolute;
     left: 0;
     top: 20px;
 }

 .items_img .items_hover {
     position: absolute;
     right: -200px;
     top: 20px;
     -webkit-transition: all, 0.8s;
     -o-transition: all, 0.8s;
     transition: all, 0.8s;
 }

 .items_img .items_hover li {
     list-style: none;
     margin-bottom: 10px;
     position: relative;
 }

 .items_text {
     padding-top: 25px;
     position: relative;
 }

 .items_text h6 {
     color: #111111;
     font-size: 15px;
     font-weight: 600;
     margin-bottom: 5px;
     -webkit-transition: all, 0.3s;
     -o-transition: all, 0.3s;
     transition: all, 0.3s;
 }

 .items_text a {
     font-size: 15px;
     color: #e53637;
     font-weight: 700;
     position: absolute;
     left: 0;
     top: 0;
     opacity: 0;
     visibility: hidden;
     -webkit-transition: all, 0.3s;
     -o-transition: all, 0.3s;
     transition: all, 0.3s;
 }

 .items_text .rating {
     margin-bottom: 6px;
 }

 .items_text .rating i {
     font-size: 14px;
     color: #b7b7b7;
     margin-right: -5px;
 }

 .items_text h5 {
     color: #0d0d0d;
     font-weight: 700;
 }

 .items_text .items_select {
     position: absolute;
     right: 0;
     bottom: 0;
     opacity: 0;
     -webkit-transition: all, 0.5s;
     -o-transition: all, 0.5s;
     transition: all, 0.5s;
 }

 .items_text .items_select label {
     display: inline-block;
     height: 12px;
     width: 12px;
     background: #5e64d1;
     border-radius: 50%;
     margin-bottom: 0;
     margin-right: 5px;
     position: relative;
     cursor: pointer;
 }

 .items_text .items_select label input {
     position: absolute;
     visibility: hidden;
 }

 .items_text .items_select label:after {
     position: absolute;
     left: -3px;
     top: -3px;
     height: 18px;
     width: 18px;
     border: 1px solid #b9b9b9;
     content: "";
     border-radius: 50%;
     opacity: 0;
 }

 .items_text .items_select label.black {
     background: #404a47;
 }

 .items:hover .items_img .items_hover {
     right: 20px;
     opacity: 1;
 }

 .items:hover .items_text a {
     top: 22px;
     opacity: 1;
     visibility: visible;
 }

 .items:hover .items_text h6 {
     opacity: 0;
 }

 .items_img .items_hover li i {
     background: #ffffff;
     padding: 10px;
     color: #000;
     display: inline-block;
 }

 .items:hover .items_text .items_select {
     opacity: 1;
 }

 .items_text .items_select label.active:after {
     opacity: 1;
 }

 .item_price .sale {
     color: #0d0d0d;
     font-weight: 700;
     font-size: 1.25rem;
     text-align: justify;
 }



 /* =========================================================Items section ====================================================================== */
 .items {
     overflow: hidden;
     margin-bottom: 40px;
 }

 .items_img {
     height: 350px;
     position: relative;
     background-position: center center;
 }

 .items_img .label {
     color: #111111;
     font-size: 11px;
     font-weight: 700;
     letter-spacing: 2px;
     text-transform: uppercase;
     display: inline-block;
     padding: 4px 15px 2px;
     background: #ffffff;
     position: absolute;
     left: 0;
     top: 20px;
 }

 .items_img .items_hover {
     position: absolute;
     right: -200px;
     top: 20px;
     -webkit-transition: all, 0.8s;
     -o-transition: all, 0.8s;
     transition: all, 0.8s;
 }

 .items_img .items_hover li {
     list-style: none;
     margin-bottom: 10px;
     position: relative;
 }

 .items_text {
     padding-top: 25px;
     position: relative;
 }

 .items_text h6 {
     color: #111111;
     font-size: 15px;
     font-weight: 600;
     margin-bottom: 5px;
     -webkit-transition: all, 0.3s;
     -o-transition: all, 0.3s;
     transition: all, 0.3s;
 }

 .items_text a {
     font-size: 15px;
     color: #e53637;
     font-weight: 700;
     position: absolute;
     left: 0;
     top: 0;
     opacity: 0;
     visibility: hidden;
     -webkit-transition: all, 0.3s;
     -o-transition: all, 0.3s;
     transition: all, 0.3s;
 }

 .items_text .rating {
     margin-bottom: 6px;
 }

 .items_text .rating i {
     font-size: 14px;
     color: #b7b7b7;
     margin-right: -5px;
 }

 .items_text h5 {
     color: #0d0d0d;
     font-weight: 700;
 }

 .items_text .items_select {
     position: absolute;
     right: 0;
     bottom: 0;
     opacity: 0;
     -webkit-transition: all, 0.5s;
     -o-transition: all, 0.5s;
     transition: all, 0.5s;
 }

 .items_text .items_select label {
     display: inline-block;
     height: 12px;
     width: 12px;
     background: #5e64d1;
     border-radius: 50%;
     margin-bottom: 0;
     margin-right: 5px;
     position: relative;
     cursor: pointer;
 }

 .items_text .items_select label input {
     position: absolute;
     visibility: hidden;
 }

 .items_text .items_select label:after {
     position: absolute;
     left: -3px;
     top: -3px;
     height: 18px;
     width: 18px;
     border: 1px solid #b9b9b9;
     content: "";
     border-radius: 50%;
     opacity: 0;
 }

 .items_text .items_select label.black {
     background: #404a47;
 }

 .items:hover .items_img .items_hover {
     right: 20px;
     opacity: 1;
 }

 .items:hover .items_text a {
     top: 22px;
     opacity: 1;
     visibility: visible;
 }

 .items:hover .items_text h6 {
     opacity: 0;
 }

 .items_img .items_hover li i {
     background: #ffffff;
     padding: 10px;
     color: #000;
     display: inline-block;
 }

 .items:hover .items_text .items_select {
     opacity: 1;
 }

 .items_text .items_select label.active:after {
     opacity: 1;
 }

 .item_price .sale {
     color: #0d0d0d;
     font-weight: 700;
     font-size: 1.25rem;
     text-align: justify;
 }


 /* ======================================================.latest_news========================================================================= */
 .blog__item {
     margin-bottom: 45px;
 }

 .blog__item__pic {
     height: 270px;

 }

 .set-bg {
     background-repeat: no-repeat;
     background-size: cover;
     background-position: top center;
 }

 .blog__item__text {
     padding: 30px 30px 25px;
     margin: 0 30px;
     margin-top: -35px;
     background: #ffffff;
     -webkit-transition: all, 0.3s;
     -o-transition: all, 0.3s;
     transition: all, 0.3s;
 }

 .blog__item__text span {
     color: #3d3d3d;
     font-size: 13px;
     display: block;
     margin-bottom: 10px;
 }

 .blog__item__text h5 {
     color: #0d0d0d;
     font-weight: 700;
     line-height: 28px;
     margin-bottom: 10px;
 }

 .blog__item__text a {
     display: inline-block;
     color: #111111;
     font-size: 13px;
     font-weight: 700;
     letter-spacing: 4px;
     text-transform: uppercase;
     padding: 3px 0;
     position: relative;
 }



 /* ====================================================.Side Bare =========================================================================== */
 .shop__sidebar__search form input {
     width: 100%;
     font-size: 15px;
     color: rgb(183, 183, 183);
     padding-left: 20px;
     height: 42px;
     border-width: 1px;
     border-style: solid;
     border-color: rgb(229, 229, 229);
     border-image: initial;
 }


 .shop__sidebar__search form button {
     color: rgb(183, 183, 183);
     font-size: 15px;
     position: absolute;
     right: 69%;
     top: 13%;
     height: 111%;
     border-width: initial;
     border-style: none;
     border-color: initial;
     border-image: initial;
     background: transparent;
     padding: 0px 15px;
 }

 .shop__sidebar__accordion .card {
     border: none;
     border-radius: 0;
     margin-bottom: 25px;
 }

 .shop__sidebar__accordion .card-heading {
     cursor: pointer;
 }

 .shop__sidebar__accordion .card-heading a {
     color: #111111;
     font-size: 16px;
     font-weight: 700;
     text-transform: uppercase;
     display: block;
 }

 .shop__sidebar__accordion .card-heading a:after,
 .shop__sidebar__accordion .card-heading>a.active[aria-expanded=false]:after {
     content: "";
     font-family: "FontAwesome";
     font-size: 24px;
     font-weight: 700;
     color: #111111;
     position: absolute;
     right: 0;
     top: 2px;
     line-height: 20px;
 }

 .shop__sidebar__accordion .card-body {
     padding: 0;
     padding-top: 10px;
     padding-bottom: 20px;
     border-bottom: 1px solid #e5e5e5;
 }


 .shop__sidebar__categories ul li,
 .shop__sidebar__price ul li,
 .shop__sidebar__brand ul li {
     list-style: none;
 }

 .shop__sidebar__categories ul li a:hover,
 .shop__sidebar__price ul li a:hover,
 .shop__sidebar__brand ul li a:hover {
     color: #111111;
 }

 .shop__sidebar__categories ul li a,
 .shop__sidebar__price ul li a,
 .shop__sidebar__brand ul li a {
     color: #b7b7b7;
     font-size: 15px;
     line-height: 32px;
     -webkit-transition: all, 0.3s;
     -o-transition: all, 0.3s;
     transition: all, 0.3s;
 }

 ul,
 ol {
     padding: 0;
     margin: 0;
 }

 /* size  */

 .shop__sidebar__size label {
     color: #111111;
     font-size: 15px;
     font-weight: 700;
     text-transform: uppercase;
     display: inline-block;
     border: 1px solid #e5e5e5;
     padding: 6px 25px;
     margin-bottom: 10px;
     margin-right: 5px;
     cursor: pointer;
 }

 .shop__sidebar__size label input {
     position: absolute;
     visibility: hidden;
 }

 /* color  */

 .shop__sidebar__color label.c-1 {
     background: #0b090c;
 }

 .shop__sidebar__color label.c-2 {
     background: #20315f;
 }

 .shop__sidebar__color label.c-3 {
     background: #f1af4d;
 }

 .shop__sidebar__color label.c-4 {
     background: #636068;
 }

 .shop__sidebar__color label.c-5 {
     background: #57594d;
 }

 .shop__sidebar__color label.c-6 {
     background: #e8bac4;
 }

 .shop__sidebar__color label.c-7 {
     background: #d6c1d7;
 }

 .shop__sidebar__color label.c-8 {
     background: #ed1c24;
 }

 .shop__sidebar__color label.c-9 {
     background: #ffffff;
 }

 .shop__sidebar__color label {
     height: 30px;
     width: 30px;
     border-radius: 50%;
     position: relative;
     margin-right: 10px;
     display: inline-block;
     margin-bottom: 10px;
     cursor: pointer;
 }

 .shop__sidebar__color label:after {
     position: absolute;
     left: -3px;
     top: -3px;
     height: 36px;
     width: 36px;
     border: 1px solid #e5e5e5;
     content: "";
     border-radius: 50%;
 }

 .shop__sidebar__color label input {
     position: absolute;
     visibility: hidden;
 }

 /* tags  */

 .shop__sidebar__tags a {
     color: #404040;
     font-size: 13px;
     font-weight: 700;
     background: #f1f5f8;
     padding: 5px 18px;
     display: inline-block;
     text-transform: uppercase;
     margin-right: 6px;
     margin-bottom: 10px;
     -webkit-transition: all, 0.3s;
     -o-transition: all, 0.3s;
     transition: all, 0.3s;
 }





 /* ========================================Mobile Viwe============================================= */
 /* Responsive */
 @media (max-width: 480px) {
     .video_image iframe {

         width: 100%;
         height: 315px;

     }
 }