/* ----------------------------------------------
   TABLE OF CONTENTS:
   1. GLOBAL & BASE
   2. HEADER TOP (social, lang, sign)
   3. NAVBAR / MAIN NAVIGATION
   4. DROPDOWN & MEGAMENU
   5. ATTR NAV - CART DROPDOWN
   6. SIDE MENU & SEARCH
   7. MOBILE MENU
   PRIMARY COLOR: #00b3ff
------------------------------------------------- */

	/* 1. GLOBAL */
	body {
	    font-family: 'Lato', sans-serif;
	    color: #434343;
	    overflow-x: hidden;
	    background-color: #fff;
	}

	h1,
	h2,
	h3,
	h4,
	h5,
	h6,
	.nav-link,
	.dropdown-item,
	.title {
	    font-family: 'Raleway', sans-serif;
	}

	ul li {
	    margin-left: 0 !important;
	}

	/* NEW PRIMARY COLOR #00b3ff */

	.bgc-thm {
	    background-color: #00b3ff;
	}

	.bgc-whitef5 {
	    background-color: #f5f5f5;
	}

	.color-fb {
	    color: #3b5998;
	}

	.color-lnkdn {
	    color: #0077b5;
	}

	.color-twtr {
	    color: #1da1f2;
	}

	.color-pint {
	    color: #bd081c;
	}

	.color-inst {
	    color: #c32aa3;
	}

	.color-green {
	    color: #25d366;
	}

	.color-utube {
	    color: #ff0000;
	}

	.color-behnc {
	    color: #1769ff;
	}

	.color-drbl {
	    color: #ea4c89;
	}

	/* Button with new color */
	.btn-dark {
	    background-color: #00b3ff;
	    border-color: #00b3ff;
	    color: #fff;
	    border-radius: 30px;
	    padding: 10px 25px;
	    font-weight: 600;
	    transition: 0.3s;
	}

	.btn-dark:hover {
	    background-color: #0099e6;
	    border-color: #0099e6;
	    color: #fff;
	}

	.modal-content {
	    border-radius: 10px;
	}

	.p30 {
	    padding: 30px;
	}

	.mt20 {
	    margin-top: 20px;
	}

	.mt10 {
	    margin-top: 10px;
	}

	.mb-0 {
	    margin-bottom: 0;
	}

	.list-inline-item {
	    margin-right: 8px;
	}

	/* 2. HEADER TOP */
	.header-top {
	    padding: 10px 0;
	    border-bottom: 1px solid #eaeaea;
	}

	.welcm-ht a {
	    color: #434343;
	    text-decoration: none;
	    font-size: 14px;
	    transition: 0.2s;
	}

	.welcm-ht a:hover {
	    color: #00b3ff;
	}

	.welcm-ht ul li i {
	    margin-right: 5px;
	}

	.dropbtn {
	    background: transparent;
	    border: none;
	    color: #434343;
	    cursor: pointer;
	    font-size: 14px;
	}

	.dropdown {
	    position: relative;
	    display: inline-block;
	}

	.dropdown-content {
	    display: none;
	    position: absolute;
	    background-color: #fff;
	    min-width: 90px;
	    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	    z-index: 1000;
	    padding: 8px 0;
	    border-radius: 6px;
	}

	.dropdown:hover .dropdown-content {
	    display: block;
	}

	.dropdown-content a {
	    color: #333;
	    padding: 6px 12px;
	    display: block;
	    font-size: 13px;
	    text-decoration: none;
	}

	.dropdown-content a:hover {
	    background-color: #f1f1f1;
	}

	.dropdown-content a img {
	    width: 20px;
	    margin-right: 6px;
	    border-radius: 2px;
	}

	/* 3. MAIN NAVBAR */
	.header-nav {
	    position: relative;
	    z-index: 99;
	}

	.main-header-nav {
	    background-color: #fff;
	    border-bottom: 1px solid #efefef;
	}

	.navbar.bootsnav {
	    padding: 0;
	    margin: 0;
	}

	.navbar.bootsnav .navbar-nav .nav-link {
	    font-size: 15px;
	    font-weight: 700;
	    text-transform: uppercase;
	    padding: 25px 15px;
	    color: #2c2c2c;
	    font-family: 'Raleway', sans-serif;
	}



	.navbar.bootsnav .navbar-nav .nav-link.active,
	.navbar.bootsnav .navbar-nav .nav-link:hover {
	    color: #00b3ff !important;
	}

	/* Dropdown menus - proper positioning */
	.dropdown-menu {
	    border-radius: 0 0 8px 8px;
	    border-top: 3px solid #00b3ff;
	    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
	    padding: 10px 0;
	    margin-top: 0;
	}

	/* Make dropdowns show on hover */
	.nav-item.dropdown:hover .dropdown-menu {
	    display: block;
	}

	.dropdown-menu .dropdown-item {
	    font-size: 13px;
	    padding: 8px 20px;
	    transition: all 0.2s;
	}

	.dropdown-menu .dropdown-item:hover {
	    background-color: #f8f9fa;
	    padding-left: 28px;
	    color: #00b3ff;
	}

	.dropdown-submenu {
	    position: relative;
	}

	.dropdown-submenu .dropdown-menu {
	    top: 0;
	    left: 100%;
	    margin-top: -5px;
	}

	/* Megamenu */
	.megamenu-fw {
	    position: static !important;
	}

	.megamenu-content {
	    width: 100%;
	    padding: 25px 20px;
	    left: 0;
	    right: 0;
	}

	.megamenu-content .col-menu h4 {
	    font-size: 16px;
	    font-weight: 700;
	    margin-bottom: 18px;
	    color: #1e2b3c;
	}

	.megamenu-content .col-menu .menu-col {
	    list-style: none;
	    padding-left: 0;
	}

	.megamenu-content .col-menu .menu-col li {
	    margin-bottom: 8px;
	}

	.megamenu-content .col-menu .menu-col li a {
	    color: #5a5a5a;
	    text-decoration: none;
	    font-size: 13px;
	    transition: 0.2s;
	}

	.megamenu-content .col-menu .menu-col li a:hover {
	    color: #00b3ff;
	    padding-left: 5px;
	}

	.project-sm-thumb iframe {
	    width: 100%;
	    height: 180px;
	    border: none;
	    border-radius: 8px;
	}

	/* 4. ATTR NAV - CART DROPDOWN */
	.attr-nav {
	    display: flex;
	    align-items: center;
	    margin-left: auto;
	}

	.attr-nav ul {
	    margin: 0;
	    padding: 0;
	    display: flex;
	    list-style: none;

	}

	.attr-nav > ul > li > a {
	    padding: 28px 15px;
	}

	.attr-nav ul li {
	    margin-left: 18px;
	    position: relative;
	}

	.attr-nav ul li a {
	    color: #2c2c2c;
	    font-size: 18px;
	    position: relative;
	    text-decoration: none;
	}

	.attr-nav ul li a .badge {
	    position: absolute;
	    top: 20px;
	    right: 0;
	    background: #00b3ff;
	    color: #fff;
	    font-size: 10px;
	    padding: 4px 5px;
	    border-radius: 5px;
	}

	/* Cart dropdown - hidden by default, appears on hover */
	.attr-nav ul li.dropdown .cart-list {
	    position: absolute;
	    top: 100%;
	    right: 0;
	    left: auto;
	    width: 280px;
	    background: #fff;
	    border: none;
	    border-top: 3px solid #00b3ff;
	    border-radius: 0 0 8px 8px;
	    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
	    padding: 12px;
	    margin-top: 10px;
	    display: none;
	    z-index: 1000;
	}

	.attr-nav ul li.dropdown:hover .cart-list {
	    display: block;
	}

	.attr-nav .cart-list li {
	    margin: 0;
	    border-bottom: 1px solid #eee;
	    padding: 10px 0;
	    list-style: none;
	}

	.attr-nav .cart-list .photo img {
	    width: 50px;
	    float: left;
	    margin-right: 12px;
	}

	.attr-nav .cart-list h6 {
	    margin-bottom: 5px;
	    font-size: 13px;
	}

	.attr-nav .cart-list h6 a {
	    font-size: 13px;
	    color: #333;
	    text-decoration: none;
	}

	.attr-nav .cart-list p {
	    margin-bottom: 0;
	    font-size: 12px;
	}

	.attr-nav .cart-list .total {
	    padding-top: 12px;
	    font-weight: bold;
	}

	.attr-nav .cart-list .total a.btn-cart {
	    background: #00b3ff;
	    color: #fff;
	    padding: 5px 12px;
	    border-radius: 20px;
	    font-size: 12px;
	    text-decoration: none;
	}

	.attr-nav .cart-list .total a.btn-cart:hover {
	    background: #0099e6;
	}

	/* Top Search */
	.top-search {
	    background: #00b3ff;
	    padding: 12px 0;
	    display: none;
	}

	.top-search .input-group {
	    max-width: 500px;
	    margin: 0 auto;
	}

	.top-search .form-control {
	    border-radius: 40px 0 0 40px;
	    border: none;
	}

	.top-search .input-group-addon {
	    background: #fff;
	    border-radius: 0 40px 40px 0;
	    padding: 0 15px;
	    display: flex;
	    align-items: center;
	    cursor: pointer;
	}

	/* SIDE MENU - with new color */
	.side {
	    position: fixed;
	    top: 0;
	    right: -350px;
	    width: 320px;
	    height: 100%;
	    background: #00b3ff;
	    z-index: 9999;
	    transition: 0.4s;
	    padding: 30px 20px;
	    color: #fff;
	    overflow-y: auto;
	}

	.side.open {
	    right: 0;
	}

	.side .close-side {
	    position: absolute;
	    top: 20px;
	    right: 20px;
	    font-size: 24px;
	    color: #fff;
	    text-decoration: none;
	}

	.side .widget .title {
	    color: #fff;
	    border-bottom: 2px solid rgba(255, 255, 255, 0.3);
	    padding-bottom: 10px;
	    margin-bottom: 15px;
	    font-size: 20px;
	}

	.side .widget .link {
	    list-style: none;
	    padding: 0;
	}

	.side .widget .link li a {
	    color: #fff;
	    text-decoration: none;
	    display: block;
	    padding: 8px 0;
	    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	}

	.side .widget .link li a:hover {
	    padding-left: 10px;
	    opacity: 0.9;
	}

	.side .footer-font-icon a {
	    color: #fff;
	    margin-right: 12px;
	    font-size: 18px;
	}

	.overlay-dark {
	    position: fixed;
	    top: 0;
	    left: 0;
	    width: 100%;
	    height: 100%;
	    background: rgba(0, 0, 0, 0.5);
	    z-index: 9990;
	    display: none;
	}

	/* MOBILE MENU - with new color */
	.stylehome1 .mobile-menu {
	    display: none;
	}

	@media (max-width: 991px) {
	    .stylehome1 .mobile-menu {
	        display: block;
	        background: #fff;
	        padding: 15px 20px;
	        border-bottom: 1px solid #eee;
	        position: fixed;
	        width: 100%;
	        z-index: 10005;
	        top: 0;
	        left: 0;
	    }

	    .header-nav,
	    .navbar.bootsnav,
	    .main-header-nav,
	    .header-top {
	        display: none;
	    }

	    .stylehome1 .menu_bar_home2 {
	        text-align: right;
	        margin: 0;
	        padding: 0;
	        list-style: none;
	    }

	    .stylehome1 .menu_bar_home2 a {
	        font-size: 28px;
	        color: #00b3ff;
	    }

	    #mobile-nav-panel {
	        display: block;
	        position: fixed;
	        top: 0;
	        left: -280px;
	        width: 280px;
	        height: 100%;
	        z-index: 10010;
	        overflow-y: auto;
	        transition: left 0.25s ease;
	        background: #00b3ff;
	        padding: 20px;
	        color: #fff;
	    }

	    #mobile-nav-panel.open {
	        left: 0;
	    }

	    #mobile-nav-panel .mobile-nav-close {
	        position: absolute;
	        top: 16px;
	        right: 16px;
	        font-size: 24px;
	        color: #fff;
	        text-decoration: none;
	    }

	    #mobile-nav-panel ul {
	        list-style: none;
	        padding: 0;
	        margin: 0;
	        margin-top: 24px;
	    }

	    #mobile-nav-panel li {
	        margin-bottom: 10px;
	    }

	    #mobile-nav-panel li > span,
	    #mobile-nav-panel li > a {
	        display: flex;
	        justify-content: space-between;
	        align-items: center;
	        color: #fff;
	        padding: 10px 0;
	        border-bottom: 1px solid rgba(255, 255, 255, .2);
	        cursor: pointer;
	        text-transform: uppercase;
	        font-weight: 700;
	    }

	    #mobile-nav-panel li > span::after {
	        content: '\25BC';
	        font-size: 12px;
	        transition: transform 0.2s ease;
	    }

	    #mobile-nav-panel li.open > span::after {
	        transform: rotate(180deg);
	    }

	    #mobile-nav-panel ul ul {
	        display: none;
	        padding-left: 16px;
	        margin-top: 6px;
	    }

	    #mobile-nav-panel li.open > ul {
	        display: block;
	    }

	    #mobile-nav-panel ul ul li {
	        margin-bottom: 8px;
	    }

	    #mobile-nav-panel ul ul li a {
	        color: rgba(255, 255, 255, .95);
	        font-weight: 500;
	        text-transform: none;
	    }

	    .navbar.bootsnav .dropdown-menu {
	        display: none;
	        position: static;
	        width: 100%;
	        background: #ffffff;
	        border: none;
	        box-shadow: none;
	        margin: 0;
	        padding: 0;
	    }

	    .navbar.bootsnav .dropdown.show > .dropdown-menu,
	    .navbar.bootsnav .dropdown-menu.show {
	        display: block;
	    }

	    .mobile-overlay {
	        position: fixed;
	        top: 0;
	        left: 0;
	        width: 100%;
	        height: 100%;
	        background: rgba(0, 0, 0, 0.5);
	        z-index: 10009;
	        display: none;
	    }

	    .mobile-overlay.show {
	        display: block;
	    }
	}

	@media (min-width: 992px) {
	    .stylehome1 {
	        display: none;
	    }

	    .navbar.bootsnav .nav-item.dropdown:hover > .dropdown-menu {
	        display: block;
	    }

	    .navbar.bootsnav .dropdown-menu {
	        position: absolute;
	        top: 100%;
	        left: 0;
	        min-width: 220px;
	        border-radius: 0 0 8px 8px;
	        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
	    }
	}

	.mobile-overlay.show {
	    display: block;
	}

	/* prevent hover on mobile for dropdowns */
	.navbar.bootsnav .nav-item.dropdown:hover .dropdown-menu,
	.navbar.bootsnav .nav-item.megamenu-fw:hover .dropdown-menu {
	    display: none !important;
	}

	@media (min-width: 992px) {
	    .stylehome1 {
	        display: none;
	    }

	    .navbar.bootsnav .nav-item.dropdown:hover > .dropdown-menu {
	        display: block;
	        opacity: 1;
	        visibility: visible;
	    }

	    .navbar.bootsnav .dropdown-menu {
	        position: absolute;
	        left: 0;
	        top: 100%;
	        width: auto;
	        min-width: 220px;
	    }
	}

	/* ==============================================
   MAIN BANNER WRAPPER - HERO SLIDER
   ============================================== */
	.main-banner-wrapper {
	    position: relative;
	    width: 100%;
	    overflow: hidden;
	}

	/* Slider Styling */
	.banner-style-one .slide {
	    padding: 280px 0;
	    background-repeat: no-repeat;
	    background-position: center center;
	    background-size: cover;
	    position: relative;
	}

	.banner-style-one .slide.slide-one::before {
	    bottom: 0;
	    background-color: rgba(0, 0, 0, 0.4);
	    content: "";
	    left: 0;
	    position: absolute;
	    right: 0;
	    top: 0;
	}

	.banner-style-one .owl-nav {
	    display: none;
	}

	.banner-style-one .banner-title {
	    font-size: 55px;
	    margin: 25px 0 10px;
	    font-weight: 800;
	    color: #ffffff;
	    text-transform: uppercase;
	}

	.banner-style-one .banner-title span {
	    background-color: rgba(0, 0, 0, 0.6);
	    border-radius: 45px;
	    padding: 10px 35px;
	    display: inline-block;
	}

	.banner-style-one .banner_top_title {
	    font-size: 28px;
	    color: #ffffff;
	    font-weight: bold;
	    line-height: 1.2;
	    text-transform: capitalize;
	}

	.banner-style-one .banner_top_title span {
	    border-radius: 25px;
	    padding: 10px 25px;
	    background-color: #00b3ff;
	    display: inline-block;
	}

	.banner-style-one p {
	    font-size: 18px;
	    line-height: 35px;
	    color: #ffffff;
	    font-weight: 300;
	}

	.banner-style-one .banner-btn {
	    display: inline-block;
	    vertical-align: middle;
	    color: #ffffff;
	    font-size: 18px;
	    font-weight: 600;
	    padding: 14px 45px;
	    border-radius: 40px;
	    background-color: #00b3ff;
	    transition: all 0.4s ease;
	    margin-top: 20px;
	    text-decoration: none;
	    border: 2px solid #00b3ff;
	}

	.banner-style-one .banner-btn:hover {
	    background-color: transparent;
	    color: #ffffff;
	    border-color: #ffffff;
	}

	/* Animation Classes */
	.animated {
	    animation-duration: 1s;
	    animation-fill-mode: both;
	}

	@keyframes fadeInUp {
	    from {
	        opacity: 0;
	        transform: translate3d(0, 40px, 0);
	    }

	    to {
	        opacity: 1;
	        transform: translate3d(0, 0, 0);
	    }
	}

	@keyframes fadeInDown {
	    from {
	        opacity: 0;
	        transform: translate3d(0, -40px, 0);
	    }

	    to {
	        opacity: 1;
	        transform: translate3d(0, 0, 0);
	    }
	}

	.fadeInUp {
	    animation-name: fadeInUp;
	}

	.fadeInDown {
	    animation-name: fadeInDown;
	}

	/* Active Slide Animations */
	.banner-style-one .active .banner-title,
	.banner-style-one .active .banner_top_title {
	    animation: fadeInUp 0.8s ease forwards;
	}

	.banner-style-one .active p {
	    animation: fadeInDown 0.8s ease forwards;
	    animation-delay: 0.3s;
	    opacity: 0;
	    animation-fill-mode: forwards;
	}

	.banner-style-one .active .banner-btn {
	    animation: fadeInUp 0.8s ease forwards;
	    animation-delay: 0.6s;
	    opacity: 0;
	    animation-fill-mode: forwards;
	}

	/* Carousel Navigation Buttons */
	.main-banner-wrapper .carousel-btn-block {
	    cursor: pointer;
	    position: absolute;
	    top: 50%;
	    transform: translateY(-50%);
	    width: 100%;
	    z-index: 9;
	    pointer-events: none;
	}

	.main-banner-wrapper .carousel-btn-block .carousel-btn {
	    border: 2px solid #ffffff;
	    border-radius: 50%;
	    color: #ffffff;
	    cursor: pointer;
	    display: inline-block;
	    font-size: 24px;
	    height: 50px;
	    width: 50px;
	    line-height: 46px;
	    text-align: center;
	    transition: all 0.3s ease;
	    vertical-align: middle;
	    z-index: 9;
	    pointer-events: auto;
	    background-color: rgba(0, 0, 0, 0.3);
	}

	.main-banner-wrapper .carousel-btn-block .carousel-btn:hover {
	    background-color: #00b3ff;
	    border-color: #00b3ff;
	    color: #ffffff;
	}

	.main-banner-wrapper .carousel-btn-block .carousel-btn.left-btn {
	    position: absolute;
	    left: 30px;
	}

	.main-banner-wrapper .carousel-btn-block .carousel-btn.right-btn {
	    position: absolute;
	    right: 30px;
	}

	/* Owl Dots Styling */
	.banner-style-one .owl-dots {
	    display: block !important;
	    margin: 0;
	    position: absolute;
	    bottom: 40px;
	    left: 0;
	    right: 0;
	    text-align: center;
	    z-index: 9;
	}

	.banner-style-one .owl-dots .owl-dot {
	    display: inline-block;
	    margin: 0 5px;
	}

	.banner-style-one .owl-dots .owl-dot span {
	    background-color: rgba(255, 255, 255, 0.5);
	    width: 12px;
	    height: 12px;
	    margin: 0;
	    border-radius: 50%;
	    transition: all 0.3s ease;
	    display: block;
	}

	.banner-style-one .owl-dots .owl-dot.active span {
	    background-color: #00b3ff;
	    width: 14px;
	    height: 14px;
	    box-shadow: 0 0 5px rgba(0, 179, 255, 0.5);
	}

	.banner-style-one .owl-dots .owl-dot:hover span {
	    background-color: #00b3ff;
	}

	/* Responsive Adjustments */
	@media (max-width: 1199px) {
	    .banner-style-one .slide {
	        padding: 220px 0;
	    }

	    .banner-style-one .banner-title {
	        font-size: 45px;
	    }

	    .banner-style-one .banner_top_title {
	        font-size: 24px;
	    }
	}

	@media (max-width: 991px) {
	    .banner-style-one .slide {
	        padding: 180px 0;
	    }

	    .banner-style-one .banner-title {
	        font-size: 36px;
	    }

	    .banner-style-one .banner_top_title {
	        font-size: 20px;
	    }

	    .banner-style-one .banner-title span {
	        padding: 8px 25px;
	    }

	    .main-banner-wrapper .carousel-btn-block .carousel-btn {
	        height: 40px;
	        width: 40px;
	        line-height: 36px;
	        font-size: 18px;
	    }

	    .main-banner-wrapper .carousel-btn-block .carousel-btn.left-btn {
	        left: 15px;
	    }

	    .main-banner-wrapper .carousel-btn-block .carousel-btn.right-btn {
	        right: 15px;
	    }
	}

	@media (max-width: 767px) {
	    .banner-style-one .slide {
	        padding: 140px 0;
	        text-align: center;
	    }

	    .banner-style-one .banner-title {
	        font-size: 28px;
	    }

	    .banner-style-one .banner_top_title {
	        font-size: 18px;
	    }

	    .banner-style-one .banner-btn {
	        padding: 10px 30px;
	        font-size: 16px;
	    }

	    .banner-style-one .banner-title span {
	        padding: 6px 18px;
	    }
	}

	/* Container */
	.container {
	    width: 100%;
	    max-width: 1200px;
	    margin: 0 auto;
	    padding: 0 15px;
	}

	.row {
	    display: flex;
	    flex-wrap: wrap;
	    margin: 0 -15px;
	}

	.home-content {
	    position: relative;
	    z-index: 2;
	}

	.text-right {
	    text-align: right;
	}

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

	.banner-btn {
	    transition: all 0.3s ease;
	    display: inline-block;
	}

	.carousel-btn {
	    transition: all 0.3s ease;
	    cursor: pointer;
	}

	/* Ensure slides have proper overlay for text readability */
	.slide-one {
	    position: relative;
	}

	/* Make sure the slider container doesn't overflow */
	.home-slider {
	    overflow-x: hidden;
	    position: relative;
	}

	.container-fluid {
	    width: 100%;
	    padding-right: 0;
	    padding-left: 0;
	    margin-right: auto;
	    margin-left: auto;
	}

	.col-lg-12 {
	    flex: 0 0 100%;
	    max-width: 100%;
	}

	.p0 {
	    padding: 0;
	}

	/* Fix for text alignment on mobile */
	@media (max-width: 767px) {
	    .text-right {
	        text-align: center;
	    }
	}

	/* Owl Carousel customization for fade effect */
	.owl-carousel .owl-item {
	    transition: opacity 0.5s ease;
	}

	.owl-carousel .owl-item:not(.active) {
	    opacity: 0;
	}

	.owl-carousel .owl-item.active {
	    opacity: 1;
	}

	/* Ensure smooth fade transition */
	.owl-carousel .animated {
	    animation-duration: 0.8s;
	    animation-fill-mode: both;
	}

	/* ==============================================
   FEATURE SECTION CSS
   ============================================== */

	/* Section Styling */
	.ulockd-divider {
	    padding: 50px 0;
	    position: relative;
	}

	/* Container */
	.container {
	    width: 100%;
	    max-width: 1200px;
	    margin: 0 auto;
	    padding: 0 15px;
	}

	/* .row {
	  display: flex;
	  flex-wrap: wrap;
	  margin: 0 -15px;
	} */

	/* .col-md-6,
	.col-xl-3 {
	  position: relative;
	  width: 100%;
	  padding: 0 15px;
	} */
	/* 
	@media (min-width: 768px) {
	  .col-md-6 {
	    flex: 0 0 50%;
	    max-width: 50%;
	  }
	}

	@media (min-width: 1200px) {
	  .col-xl-3 {
	    flex: 0 0 25%;
	    max-width: 25%;
	  }
	} */

	.px-3 {
	    padding-left: 1rem;
	    padding-right: 1rem;
	}

	@media (min-width: 1200px) {
	    .px-xl-0 {
	        padding-left: 0;
	        padding-right: 0;
	    }
	}

	/* Feature Box 2 */
	.feature-box2 {
	    border-radius: 5px 45px;
	    padding: 40px 25px;
	    position: relative;
	    z-index: 1;
	    margin-bottom: 30px;
	    transition: all 0.3s ease;
	}

	.feature-box2 .icon {
	    font-size: 30px;
	    text-align: center;
	}

	.feature-box2 h3 {
	    color: #ffffff;
	    margin-top: 0;
	    font-size: 24px;
	    font-weight: 700;
	}

	.feature-box2 p {
	    color: #ffffff;
	    margin-bottom: 22px;
	}

	.feature-box2 .list-group {
	    margin-bottom: 0;
	    list-style: none;
	}

	.feature-box2 .list-group li {
	    border-bottom: 1px solid #ffffff;
	    color: #ffffff;
	    line-height: 30px;
	    padding: 5px;
	}

	.feature-box2 .lead {
	    margin-bottom: 19px;
	    font-size: 18px;
	    font-weight: 300;
	}

	/* Background Colors */
	.bgc-thm {
	    background-color: #00b3ff;
	}

	.bgc-primary {
	    background-color: #337ab7;
	}

	.bgc-primary2 {
	    background-color: #145892;
	}

	.bgc-darkblue {
	    background-color: #004274;
	}

	.color-white {
	    color: #ffffff !important;
	}

	/* Margin Top */
	.mt-100 {
	    margin-top: 100px;
	}

	@media (max-width: 991px) {
	    .mt-100 {
	        margin-top: 50px;
	    }
	}

	@media (max-width: 767px) {
	    .mt-100 {
	        margin-top: 30px;
	    }
	}

	/* Buttons */
	.btn {
	    display: inline-block;
	    font-weight: 600;
	    text-align: center;
	    white-space: nowrap;
	    vertical-align: middle;
	    user-select: none;
	    border: 1px solid transparent;
	    padding: 10px 35px;
	    font-size: 16px;
	    line-height: 1.5;
	    border-radius: 0;
	    transition: all 0.3s ease;
	    text-decoration: none;
	    cursor: pointer;
	}

	.btn-default {
	    font-size: 14px;
	    padding: 8px 15px;
	}

	.btn-white {
	    background-color: #ffffff;
	    border-color: #ffffff;
	    color: #303030;
	    border-radius: 0px;
	}

	.btn-white:hover,
	.btn-white:active,
	.btn-white:focus {
	    color: #ffffff;
	    background-color: transparent;
	    border-color: #ffffff;
	}

	.btn-thm {
	    color: #ffffff;
	    border-radius: 4px;
	    background-color: #00b3ff;
	    border-color: #00b3ff;
	    transition: all 0.3s ease;
	}

	.btn-thm:hover,
	.btn-thm:active,
	.btn-thm:focus {
	    background-color: #004274;
	    border-color: #004274;
	    color: #ffffff;
	}

	.btn-lg {
	    padding: 12px 45px;
	    font-size: 18px;
	}

	/* List Group */
	.list-group {
	    display: flex;
	    flex-direction: column;
	    padding-left: 0;
	    margin-bottom: 0;
	    list-style: none;
	}

	.list-group li {
	    position: relative;
	    display: block;
	    padding: 10px 15px;
	    background-color: transparent;
	    border: none;
	}

	.d-flex {
	    display: flex;
	}

	.justify-content-between {
	    justify-content: space-between;
	}

	.align-items-center {
	    align-items: center;
	}

	/* Modal */
	.modal {
	    position: fixed;
	    top: 0;
	    left: 0;
	    z-index: 1050;
	    display: none;
	    width: 100%;
	    height: 100%;
	    overflow: hidden;
	    outline: 0;
	}

	.modal-dialog {
	    position: relative;
	    width: auto;
	    margin: 0.5rem;
	    pointer-events: none;
	}

	.modal-dialog-centered {
	    display: flex;
	    align-items: center;
	    min-height: calc(100% - 1rem);
	}

	.modal-dialog-scrollable {
	    height: calc(100% - 1rem);
	}

	.modal-dialog-scrollable .modal-content {
	    max-height: 100%;
	    overflow: hidden;
	}

	.modal-lg {
	    max-width: 800px;
	}

	.modal-content {
	    position: relative;
	    display: flex;
	    flex-direction: column;
	    width: 100%;
	    pointer-events: auto;
	    background-color: #fff;
	    background-clip: padding-box;
	    border: 1px solid rgba(0, 0, 0, .2);
	    border-radius: 10px;
	    outline: 0;
	}

	.modal-header {
	    display: flex;
	    align-items: flex-start;
	    justify-content: space-between;
	    padding: 1rem;
	    border-bottom: 1px solid #dee2e6;
	    border-top-left-radius: 10px;
	    border-top-right-radius: 10px;
	}

	.modal-header .btn-close {
	    padding: 0.5rem;
	    margin: -0.5rem -0.5rem -0.5rem auto;
	    background: transparent;
	    border: none;
	    font-size: 1.5rem;
	    cursor: pointer;
	}

	.modal-title {
	    margin-bottom: 0;
	    line-height: 1.5;
	    font-size: 1.5rem;
	}

	.modal-body {
	    position: relative;
	    flex: 1 1 auto;
	    padding: 1rem;
	}

	/* Appointment Form */
	.appointment_form {
	    background-color: #f3f3f3;
	    padding: 15px 35px;
	}

	.appointment_form input {
	    border-radius: 0;
	    box-shadow: none;
	    height: 40px;
	}

	.appointment_form .form-control {
	    display: block;
	    width: 100%;
	    padding: 0.375rem 0.75rem;
	    font-size: 1rem;
	    line-height: 1.5;
	    color: #495057;
	    background-color: #fff;
	    background-clip: padding-box;
	    border: 1px solid #ced4da;
	    border-radius: 0;
	    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
	}

	.appointment_form .form-control:focus {
	    color: #495057;
	    background-color: #fff;
	    border-color: #00b3ff;
	    outline: 0;
	    box-shadow: 0 0 0 0.2rem rgba(0, 179, 255, 0.25);
	}

	.text-thm {
	    color: #00b3ff;
	}

	.text-start {
	    text-align: left;
	}

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

	.mb-2 {
	    margin-bottom: 0.5rem;
	}

	.mb-3 {
	    margin-bottom: 1rem;
	}

	/* Responsive */
	@media (min-width: 576px) {
	    .modal-dialog {
	        max-width: 500px;
	        margin: 1.75rem auto;
	    }

	    .modal-dialog-centered {
	        min-height: calc(100% - 3.5rem);
	    }

	    .modal-dialog-scrollable {
	        height: calc(100% - 3.5rem);
	    }
	}

	@media (max-width: 767px) {
	    .feature-box2 {
	        padding: 30px 20px;
	    }

	    .feature-box2 h3 {
	        font-size: 20px;
	    }

	    .appointment_form {
	        padding: 15px 20px;
	    }
	}

	/* ==============================================
   ABOUT SECTION CSS
   ============================================== */

	/* Section Styling */
	.ulockd-about {
	    padding: 80px 0;
	    position: relative;
	    background-color: #ffffff;
	}

	/* Container */
	.container {
	    width: 100%;
	    max-width: 1200px;
	    margin: 0 auto;
	    padding: 0 15px;
	}

	/* .row {
	  display: flex;
	  flex-wrap: wrap;
	  margin: 0 -15px;
	}

	.col-lg-6 {
	  position: relative;
	  width: 100%;
	  padding: 0 15px;
	} */

	/* @media (min-width: 992px) {
	  .col-lg-6 {
	    flex: 0 0 50%;
	    max-width: 50%;
	  }
	}

	.col-sm-6 {
	  position: relative;
	  width: 100%;
	  padding: 0 15px;
	}

	@media (min-width: 576px) {
	  .col-sm-6 {
	    flex: 0 0 50%;
	    max-width: 50%;
	  }
	} */

	/* About Box */
	.about-box {
	    position: relative;
	}

	.title-bottom {
	    position: relative;
	    margin-bottom: 20px;
	    margin-top: 0;
	    font-size: 36px;
	    font-weight: 700;
	}

	.title-bottom:before {
	    bottom: -5px;
	    content: "";
	    height: 2px;
	    left: 0;
	    position: absolute;
	    width: 80px;
	    background-color: #00b3ff;
	}


	.lead {
	    font-size: 18px;
	    font-weight: 300;
	    margin-bottom: 20px;
	    color: #777777;
	}

	.about-box p {
	    margin-bottom: 20px;
	    font-size: 16px;
	    line-height: 1.7;
	    color: #777777;
	}

	/* List Style Circle */
	.list-unstyled {
	    list-style: none;
	    padding-left: 0;
	    margin-bottom: 20px;
	}

	.list-style-circle {
	    list-style: none;
	}

	.list-style-circle li {
	    color: #777777;
	    font-size: 16px;
	    list-style-type: circle;
	    margin-left: 18px;
	    margin-bottom: 10px;
	    position: relative;
	}

	/* Buttons */
	.btn {
	    display: inline-block;
	    font-weight: 600;
	    text-align: center;
	    white-space: nowrap;
	    vertical-align: middle;
	    user-select: none;
	    border: 1px solid transparent;
	    padding: 10px 35px;
	    font-size: 16px;
	    line-height: 1.5;
	    border-radius: 4px;
	    transition: all 0.3s ease;
	    text-decoration: none;
	    cursor: pointer;
	}

	.btn-lg {
	    padding: 12px 45px;
	    font-size: 18px;
	}

	.btn-thm {
	    color: #ffffff;
	    background-color: #00b3ff;
	    border-color: #00b3ff;
	}

	.btn-thm:hover,
	.btn-thm:active,
	.btn-thm:focus {
	    background-color: #004274;
	    border-color: #004274;
	    color: #ffffff;
	}

	.btn-blue {
	    background-color: #004274;
	    border-color: #004274;
	    color: #ffffff;
	}

	.btn-blue:hover,
	.btn-blue:active,
	.btn-blue:focus {
	    background-color: #002b4a;
	    border-color: #002b4a;
	    color: #ffffff;
	}

	.mt15 {
	    margin-top: 15px;
	}

	.mt0 {
	    margin-top: 0;
	}

	.mb20 {
	    margin-bottom: 20px;
	}

	.mb0 {
	    margin-bottom: 0;
	}

	/* About Thumb */
	.ab-thumb {
	    position: relative;
	    overflow: hidden;
	}

	.ovh {
	    overflow: hidden;
	}

	.img-fluid {
	    max-width: 100%;
	    height: auto;
	}

	.img-whp {
	    width: 100%;
	}

	.ab-thumb img {
	    transition: all 0.4s ease-in-out 0s;
	    border-radius: 0 80px;
	}

	.ab-thumb .doc-name-left,
	.ab-thumb .doc-name-right {
	    bottom: -73px;
	    color: #ffffff;
	    padding: 8px 30px;
	    position: absolute;
	    transition: all 0.4s ease-in-out 0s;
	    text-align: center;
	    background-color: #00b3ff;
	}

	.ab-thumb .doc-name-left {
	    left: 15%;
	}

	.ab-thumb .doc-name-right {
	    right: 15%;
	}

	.ab-thumb .doc-name-left h4,
	.ab-thumb .doc-name-right h4 {
	    color: #ffffff;
	    margin: 0;
	    font-size: 18px;
	    font-weight: 700;
	}

	.ab-thumb .doc-name-left p,
	.ab-thumb .doc-name-right p {
	    margin: 0;
	    font-size: 14px;
	}

	.ab-thumb:hover .doc-name-left,
	.ab-thumb:hover .doc-name-right {
	    bottom: 0;
	}

	/* ICON BOX FIXED */
	.icon_box {
	    display: flex;
	    align-items: flex-start;
	    gap: 15px;
	    margin-bottom: 30px;
	}

	/* ICON SQUARE */
	.icon_box .icon {
	    min-width: 55px;
	    height: 55px;
	    border: 2px solid #00b3ff;
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    color: #00b3ff;
	    font-size: 22px;
	    transition: 0.3s;
	}

	/* HOVER EFFECT */
	.icon_box:hover .icon {
	    background: #00b3ff;
	    color: #fff;
	}

	/* TEXT */
	.icon_box .ib_details h4 {
	    font-size: 18px;
	    margin-bottom: 6px;
	    font-weight: 600;
	    color: #333;
	}

	.icon_box .ib_details p {
	    font-size: 14px;
	    color: #777;
	    margin: 0;
	}

	@media (min-width: 992px) {
	    .float-lg-start {
	        float: left !important;
	    }
	}

	/* Responsive */
	@media (max-width: 991px) {
	    .ulockd-about {
	        padding: 60px 0;
	    }

	    .title-bottom {
	        font-size: 30px;
	    }

	    .ab-thumb {
	        margin-bottom: 30px;
	    }

	    .ab-thumb .doc-name-left,
	    .ab-thumb .doc-name-right {
	        bottom: 0;
	        padding: 5px 20px;
	    }

	    .ab-thumb .doc-name-left {
	        left: 10%;
	    }

	    .ab-thumb .doc-name-right {
	        right: 10%;
	    }

	    .icon_box {
	        margin-bottom: 20px;
	    }
	}

	@media (max-width: 767px) {
	    .ulockd-about {
	        padding: 40px 0;
	    }

	    .title-bottom {
	        font-size: 26px;
	    }

	    .btn-lg {
	        padding: 10px 25px;
	        font-size: 14px;
	    }


	    .icon_box .icon span {
	        font-size: 24px;
	        height: 45px;
	        line-height: 46px;
	        width: 45px;
	    }
	}

	/* Icon Box Styles - Already in your CSS */
	.icon_box {
	    padding: 20px 0 0;
	    position: relative;
	}

	.icon_box .icon {
	    margin-top: 6px;
	    transition: all 0.3s ease-in-out 0s;
	}

	.icon_box .icon span {
	    display: inline-block;
	    font-size: 30px;
	    height: 55px;
	    line-height: 56px;
	    text-align: center;
	    width: 55px;
	    background-color: #f5f5f5;
	    border-radius: 50%;
	    transition: all 0.2s ease-in-out 0s;
	}

	.icon_box:hover .icon span {
	    color: #ffffff !important;
	    background-color: #00b3ff;
	}


	.icon_box .ib_details h4 {
	    margin-top: 0;
	    margin-bottom: 10px;
	    font-size: 18px;
	    font-weight: 600;
	}

	.icon_box .ib_details h4 a {
	    color: #333333;
	    text-decoration: none;
	    transition: color 0.3s ease;
	}

	.icon_box .ib_details h4 a:hover {
	    color: #00b3ff;
	}

	.icon_box .ib_details p {
	    margin-bottom: 0;
	    font-size: 14px;
	    color: #777777;
	    line-height: 1.5;
	}

	.float-none {
	    float: none !important;
	}

	@media (min-width: 992px) {
	    .float-lg-start {
	        float: left !important;
	    }
	}

	/* FOOTER MAIN */
	.ulockd-footer {
	    background: #222;
	    color: #fff;
	    padding: 60px 0 0;
	}

	/* TEXT */
	.ulockd-ftr-text {
	    color: #aaa;
	    font-size: 14px;
	}

	/* HEADINGS */
	.ulockd-footer h3 {
	    color: #fff;
	    margin-bottom: 20px;
	    font-weight: bold;
	}

	/* LINKS */
	.ulockd-footer a {
	    color: #ccc;
	    text-decoration: none;
	}

	.ulockd-footer a:hover {
	    color: #00b3ff;
	}

	/* SOCIAL ICONS */
	.footer-font-icon a {
	    display: inline-block;
	    width: 35px;
	    height: 35px;
	    line-height: 35px;
	    background: #333;
	    text-align: center;
	    border-radius: 4px;
	    color: #fff;
	    transition: 0.3s;
	}

	.footer-font-icon a:hover {
	    background: #00b3ff;
	}

	/* MEDIA BOX */
	.media-box img {
	    border-radius: 5px;
	}

	.media-box h4 {
	    font-size: 14px;
	    margin: 0;
	}

	.media-box p {
	    font-size: 13px;
	    color: #aaa;
	}

	/* FLICKR */
	.flickr-images img {
	    width: 70px;
	    margin: 5px;
	    border-radius: 4px;
	}

	/* NEWSLETTER */
	.newsletter input {
	    width: 70%;
	    padding: 8px;
	    border: none;
	}

	.newsletter button {
	    width: 30%;
	    background: #00b3ff;
	    border: none;
	    color: #fff;
	}

	/* COPYRIGHT */
	.ulockd-copy-right {
	    background: #00b3ff;
	    padding: 15px;
	    margin-top: 40px;
	}

	.ulockd-copy-right p {
	    margin: 0;
	    color: #fff;
	}

	/* CTA SECTION */
	.ulockd-divider {
	    padding: 50px 0;
	}

	/* BLUE BACKGROUND */
	.bgc-thm {
	    background-color: #00b3ff;
	    /* your theme color */
	}

	/* TEXT */
	.color-white {
	    color: #fff;
	}

	/* CTA SECTION CUSTOM */
	.cta-section h2 {
	    font-size: 28px;
	    font-weight: 700;
	    margin: 0;
	}

	.cta-section p {
	    font-size: 15px;
	    opacity: 0.9;
	}

	/* BUTTONS */
	.btn {
	    padding: 10px 30px;
	    font-size: 15px;
	    border-radius: 3px;
	    transition: 0.3s;
	    text-decoration: none;
	}

	/* WHITE BUTTON */
	.btn-white {
	    background: #fff;
	    color: #303030;
	    border: 2px solid #fff;
	}

	.btn-white:hover {
	    background: transparent;
	    color: #fff;
	}

	/* DARK BUTTON */
	.btn-dark {
	    background: #303030;
	    color: #fff;
	    border: 2px solid #303030;
	}

	.btn-dark:hover {
	    background: transparent;
	    border-color: #fff;
	}

	/* RESPONSIVE */
	@media (max-width: 768px) {
	    .cta-section {
	        text-align: center;
	    }

	    .cta-section .btn {
	        display: block;
	        margin: 10px auto;
	    }
	}


	.mt-separator {
	    position: relative;
	}

	.mt-separator:before {
	    bottom: 0;
	    content: "";
	    height: 2px;
	    left: 0;
	    margin: 0 auto;
	    position: absolute;
	    right: 0;
	    width: 100px;
	    background-color: #00b3ff;
	}

	.mt-separator:after {
	    bottom: -5px;
	    content: "";
	    height: 2px;
	    left: 0;
	    margin: 0 auto;
	    right: 0;
	    position: absolute;
	    width: 50px;
	    background-color: #00b3ff;
	}

	/* SECTION BACKGROUND */
	.our-pricing {
	    position: relative;
	    padding: 80px 0;
	    background-image: url("https://unlockdesizn.com/html/health-and-beauty/hekim/images/pattern/4.png");
	}

	.our-pricing::before {
	    content: "";
	    position: absolute;
	    inset: 0;
	    background: rgba(255, 255, 255, 0.85);
	    /* adjust 0.8–0.9 */
	    z-index: 0;
	}

	.our-pricing .container {
	    position: relative;
	    z-index: 2;
	}

	/* CENTER ROW */
	.our-pricing .row {
	    justify-content: center;
	}

	.pricing-title {
	    position: relative;
	}

	/* BACKGROUND ICON */
	.pricing-title::before {
	    content: "\f0b1";
	    /* briefcase icon */
	    font-family: "Font Awesome 6 Free";
	    font-weight: 900;

	    position: absolute;
	    top: -30px;
	    left: 50%;
	    transform: translateX(-50%);

	    font-size: 70px;
	    color: #cfe5f2;
	    opacity: 0.5;

	    z-index: 0;
	}

	/* TITLE */
	.pricing-title h2 {
	    position: relative;
	    z-index: 2;
	    font-size: 30px;
	    font-weight: 700;
	}

	/* BLUE TEXT */
	.pricing-title span {
	    color: #00b3ff;
	    position: relative;
	}

	/* UNDERLINE */
	.pricing-title span::after {
	    content: "";
	    width: 50px;
	    height: 3px;
	    background: #00b3ff;
	    display: block;
	    margin: 6px auto 0;
	}

	/* CARD */
	.pricing_table {
	    text-align: center;
	    margin-bottom: 30px;
	    background: #fff;
	    border-radius: 0 60px 0 0;
	    overflow: hidden;
	    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.05);
	    transition: 0.3s;
	}

	.pricing_table:hover {
	    transform: translateY(-8px);
	    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
	}

	/* HEADER (BLUE PART) */
	.pricing_table_header {
	    background: #00b3ff;
	    padding: 30px 20px;
	    border-radius: 0 60px 0 0;
	}

	/* TITLE */
	.pricing_table_header .title {
	    color: #fff;
	    font-size: 18px;
	    font-weight: 700;
	    margin-bottom: 10px;
	}

	/* PRICE */
	.price-value {
	    color: #fff;
	    font-size: 34px;
	    font-weight: 700;
	}

	.price-value .month {
	    display: block;
	    font-size: 12px;
	    margin-top: 5px;
	}

	/* CONTENT */
	.pricing-content {
	    padding: 0;
	}

	/* LIST */
	.pricing-content ul {
	    list-style: none;
	    margin: 0;
	    padding: 0;
	}

	.pricing-content ul li {
	    padding: 12px 0;
	    font-size: 14px;
	    border-bottom: 1px solid #eee;
	}

	.pricing-content ul li del {
	    color: #bbb;
	}

	/* BUTTON */
	.pricing_table_signup {
	    padding: 20px 0;
	}

	.pricing_table_signup a {
	    border: 1px solid #555;
	    padding: 8px 20px;
	    font-size: 13px;
	    text-transform: uppercase;
	    border-radius: 4px;
	    display: inline-block;
	    color: #333;
	    transition: 0.3s;
	    text-decoration: none;
	}

	.pricing_table_signup a:hover {
	    background: #00b3ff;
	    color: #fff;
	    border-color: #00b3ff;
	}

	/* FIX COLUMN WIDTH (IMPORTANT) */
	.col-lg-4 {
	    display: flex;
	}

	/* MAKE CARDS SAME HEIGHT */
	.pricing_table {
	    width: 100%;
	}

	/* RESPONSIVE */
	@media (max-width: 991px) {
	    .col-lg-4 {
	        display: block;
	    }
	}

	.blog-section {
	    padding: 80px 0;
	    background: #f5f7fa;
	}

	/* TITLE BACKGROUND ICON */
	.blog-title {
	    position: relative;
	}

	.blog-title::before {
	    content: "\f0f6";
	    /* file/blog icon */
	    font-family: "Font Awesome 6 Free";
	    font-weight: 900;

	    position: absolute;
	    top: -40px;
	    left: 50%;
	    transform: translateX(-50%);

	    font-size: 70px;
	    color: #cfe5f2;
	    opacity: 0.5;
	    z-index: 0;
	}

	.blog-title h2 {
	    position: relative;
	    z-index: 2;
	    font-size: 30px;
	    font-weight: 700;
	}

	.blog-title span {
	    color: #00b3ff;
	}

	.blog-title span::after {
	    content: "";
	    width: 50px;
	    height: 3px;
	    background: #00b3ff;
	    display: block;
	    margin: 6px auto 0;
	}

	.blog-title p {
	    max-width: 600px;
	    margin: 10px auto 40px;
	    color: #777;
	}

	/* GRID */
	.blog-grid {
	    display: grid;
	    grid-template-columns: repeat(3, 1fr);
	    gap: 25px;
	}

	/* CARD */
	.blog-card {
	    background: #fff;
	    border-radius: 6px;
	    overflow: hidden;
	    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
	    transition: 0.3s;
	}

	.blog-card:hover {
	    transform: translateY(-5px);
	}

	/* IMAGE */
	.blog-img {
	    position: relative;
	}

	.blog-img img {
	    width: 100%;
	    display: block;
	}

	/* DATE */
	.date {
	    position: absolute;
	    bottom: 10px;
	    left: 10px;
	    background: #00b3ff;
	    color: #fff;
	    font-size: 12px;
	    padding: 5px 10px;
	    border-radius: 3px;
	}

	/* CONTENT */
	.blog-content {
	    padding: 20px;
	}

	.blog-content h3 {
	    font-size: 16px;
	    margin-bottom: 10px;
	}

	/* META */
	.meta {
	    font-size: 12px;
	    color: #777;
	    margin-bottom: 10px;
	}

	.meta span {
	    margin-right: 10px;
	}

	/* TEXT */
	.blog-content p {
	    font-size: 14px;
	    color: #777;
	    margin-bottom: 15px;
	}

	/* BUTTON */
	.blog-content a {
	    display: inline-block;
	    padding: 6px 15px;
	    background: #00b3ff;
	    color: #fff;
	    font-size: 12px;
	    text-decoration: none;
	    border-radius: 3px;
	}

	/* RESPONSIVE */
	@media (max-width: 991px) {
	    .blog-grid {
	        grid-template-columns: repeat(2, 1fr);
	    }
	}

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

	.custom-section {
	    padding: 80px 0;
	    background-color: #f9f9f9;
	}

	/* IMAGE */
	.image-box img {
	    width: 100%;
	    border-radius: 10px;
	}

	/* CONTENT */
	.content-box h3 {
	    font-size: 26px;
	    font-weight: 700;
	    margin-bottom: 15px;
	    color: #2c2c2c;
	}

	.content-box p {
	    color: #777;
	    margin-bottom: 20px;
	    line-height: 1.6;
	}

	/* LIST STYLE */
	.list-style-circle {
	    list-style: none;
	    padding-left: 0;
	}

	.list-style-circle li {
	    position: relative;
	    padding-left: 18px;
	    margin-bottom: 10px;
	    color: #777;
	    font-size: 15px;
	    list-style: none;
	}

	.list-style-circle li::before {
	    content: "○";
	    position: absolute;
	    left: 0;
	    top: 0;
	    color: #00b3ff;
	    font-size: 14px;
	}

	.service-section {
	    background: #f5f7fa;
	    padding: 80px 0;
	}

	/* TITLE */
	.section-title .icon {
	    font-size: 40px;
	    color: #cfe5f2;
	    margin-bottom: 10px;
	}

	.section-title h2 {
	    font-size: 32px;
	    font-weight: 700;
	}

	.section-title h2 span {
	    color: #00b3ff;
	    position: relative;
	}

	.section-title h2 span::after {
	    content: "";
	    display: block;
	    width: 50px;
	    height: 3px;
	    background: #00b3ff;
	    margin: 6px auto 0;
	}

	.section-title p {
	    max-width: 600px;
	    margin: 10px auto 40px;
	    color: #777;
	}

	/* GRID */
	.service-grid {
	    display: grid;
	    grid-template-columns: repeat(3, 1fr);
	    gap: 25px;
	}

	/* CARD */
	.service-card {
	    background: #fff;
	    border-radius: 15px;
	    padding: 25px;
	    display: flex;
	    gap: 18px;
	    align-items: flex-start;
	    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
	    transition: 0.3s;
	}

	.service-card:hover {
	    transform: translateY(-5px);
	}

	/* ICON */
	.service-card .icon {
	    font-size: 28px;
	    color: #00b3ff;
	    min-width: 40px;
	}

	/* TEXT */
	.service-card h4 {
	    margin: 0;
	    font-size: 16px;
	    font-weight: 600;
	}

	.service-card p {
	    margin: 5px 0 0;
	    font-size: 14px;
	    color: #777;
	}

	.service-card a {
	    color: #00b3ff;
	    text-decoration: none;
	}

	/* RESPONSIVE */
	@media (max-width: 991px) {
	    .service-grid {
	        grid-template-columns: repeat(2, 1fr);
	    }
	}

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

	.title-bg {
	    position: relative;
	    display: inline-block;
	    font-size: 32px;
	    font-weight: 700;
	    z-index: 1;
	}

	/* BACKGROUND ICON */
	.title-bg::before {
	    content: "\f0b1";
	    /* briefcase icon */
	    font-family: "Font Awesome 6 Free";
	    font-weight: 900;

	    position: absolute;
	    top: -30px;
	    left: 50%;
	    transform: translateX(-50%);

	    font-size: 70px;
	    color: #cfe5f2;
	    opacity: 0.6;
	    z-index: -1;
	}

	/* BLUE TEXT */
	.title-bg span {
	    color: #00b3ff;
	    position: relative;
	}

	/* UNDERLINE */
	.title-bg span::after {
	    content: "";
	    display: block;
	    width: 50px;
	    height: 3px;
	    background: #00b3ff;
	    margin: 6px auto 0;
	}

	.department-section {
	    padding: 80px 0;
	    background: #f5f7fa;
	}

	/* TITLE */
	.section-title h2 {
	    font-size: 30px;
	    font-weight: 700;
	}

	.section-title span {
	    color: #00b3ff;
	    position: relative;
	}

	.section-title span::after {
	    content: "";
	    display: block;
	    width: 50px;
	    height: 3px;
	    background: #00b3ff;
	    margin: 6px auto 0;
	}

	.section-title p {
	    max-width: 600px;
	    margin: 10px auto 40px;
	    color: #777;
	}

	/* GRID */
	.dept-grid {
	    display: grid;
	    grid-template-columns: repeat(3, 1fr);
	    gap: 25px;
	}

	/* CARD */
	.dept-card {
	    position: relative;
	    overflow: hidden;
	    border-radius: 8px;
	}

	/* IMAGE */
	.dept-card img {
	    width: 100%;
	    display: block;
	    transition: 0.4s;
	}

	/* OVERLAY */
	.overlay {
	    position: absolute;
	    bottom: -100%;
	    left: 0;
	    width: 100%;
	    height: 100%;
	    background: rgba(0, 179, 255, 0.9);
	    color: #fff;
	    padding: 20px;
	    text-align: center;
	    transition: 0.4s;

	    display: flex;
	    flex-direction: column;
	    justify-content: center;
	}

	/* TEXT */
	.overlay h4 {
	    margin-bottom: 10px;
	}

	.overlay p {
	    font-size: 14px;
	    margin-bottom: 15px;
	}

	/* BUTTON */
	.overlay a {
	    background: #fff;
	    color: #00b3ff;
	    padding: 8px 15px;
	    text-decoration: none;
	    border-radius: 4px;
	    font-size: 14px;
	}

	/* HOVER EFFECT */
	.dept-card:hover img {
	    transform: scale(1.1);
	}

	.dept-card:hover .overlay {
	    bottom: 0;
	}

	/* RESPONSIVE */
	@media (max-width: 991px) {
	    .dept-grid {
	        grid-template-columns: repeat(2, 1fr);
	    }
	}

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

	.dept-title {
	    position: relative;
	    text-align: center;
	}

	/* ICON BEHIND TITLE */
	.dept-title::before {
	    content: "\f0b1";
	    /* briefcase */
	    font-family: "Font Awesome 6 Free";
	    font-weight: 900;

	    position: absolute;
	    top: -30px;
	    /* IMPORTANT FIX */
	    left: 50%;
	    transform: translateX(-50%);

	    font-size: 70px;
	    color: #cfe5f2;
	    opacity: 0.7;

	    z-index: 0;
	}

	/* TITLE */
	.dept-title h2 {
	    position: relative;
	    z-index: 2;
	    font-size: 32px;
	    font-weight: 700;
	}

	/* BLUE TEXT */
	.dept-title h2 span {
	    color: #00b3ff;
	    position: relative;
	}

	/* UNDERLINE */
	.dept-title h2 span::after {
	    content: "";
	    display: block;
	    width: 50px;
	    height: 3px;
	    background: #00b3ff;
	    margin: 6px auto 0;
	}

	.counter-section {
	    background: #00b3ff;
	    padding: 40px 0;
	}

	/* GRID */
	.counter-grid {
	    display: grid;
	    grid-template-columns: repeat(4, 1fr);
	    text-align: center;
	}

	/* ITEM */
	.counter-item {
	    color: #fff;
	    position: relative;
	    padding: 10px 0;
	}

	/* VERTICAL LINE */
	.counter-item:not(:last-child)::after {
	    content: "";
	    position: absolute;
	    right: 0;
	    top: 20%;
	    height: 60%;
	    width: 1px;
	    background: rgba(255, 255, 255, 0.5);
	}

	/* ICON */
	.counter-item i {
	    font-size: 28px;
	    margin-bottom: 8px;
	}

	/* TEXT */
	.counter-item p {
	    margin: 5px 0;
	    font-size: 14px;
	}

	/* NUMBER */
	.counter-item h3 {
	    font-size: 20px;
	    font-weight: 700;
	    margin: 0;
	}

	.expert-section {
	    padding: 80px 0;
	    background: #f5f7fa;
	}

	/* TITLE */
	.section-title h2 {
	    font-size: 30px;
	    font-weight: 700;
	}

	.section-title span {
	    color: #00b3ff;
	    position: relative;
	}

	.section-title span::after {
	    content: "";
	    width: 50px;
	    height: 3px;
	    background: #00b3ff;
	    display: block;
	    margin: 6px auto 0;
	}

	.section-title p {
	    max-width: 600px;
	    margin: 10px auto 40px;
	    color: #777;
	}

	/* WRAPPER */
	.expert-wrapper {
	    display: grid;
	    grid-template-columns: 2fr 1fr;
	    gap: 30px;
	}

	/* TEAM */
	.team-card {
	    display: flex;
	    gap: 20px;
	    margin-bottom: 20px;
	    background: #fff;
	    padding: 15px;
	    border-radius: 8px;
	}

	.team-card img {
	    width: 120px;
	    border-radius: 6px;
	}

	.team-info h4 {
	    margin: 0;
	    font-size: 16px;
	    color: #00b3ff;
	}

	.team-info p {
	    font-size: 14px;
	    color: #777;
	    margin: 8px 0;
	}

	.team-info a {
	    color: #00b3ff;
	    text-decoration: none;
	    font-size: 14px;
	}

	/* FORM */
	.form-box {
	    background: #fff;
	    padding: 25px;
	    border-radius: 8px;
	    text-align: center;
	}

	.form-box h3 {
	    color: #00b3ff;
	    margin-bottom: 15px;
	}

	.form-box input,
	.form-box select,
	.form-box textarea {
	    width: 100%;
	    margin-bottom: 12px;
	    padding: 10px;
	    border: 1px solid #ddd;
	    font-size: 14px;
	}

	.form-box textarea {
	    height: 80px;
	    resize: none;
	}

	.form-box button {
	    background: #00b3ff;
	    color: #fff;
	    border: none;
	    padding: 10px;
	    width: 100%;
	    cursor: pointer;
	}

	/* RESPONSIVE */
	@media (max-width: 991px) {
	    .expert-wrapper {
	        grid-template-columns: 1fr;
	    }
	}

	.expert-title {
	    position: relative;
	}

	/* ICON BACKGROUND */
	.expert-title::before {
	    content: "\f0b1";
	    /* briefcase icon */
	    font-family: "Font Awesome 6 Free";
	    font-weight: 900;

	    position: absolute;
	    top: -30px;
	    left: 50%;
	    transform: translateX(-50%);

	    font-size: 65px;
	    color: #cfe5f2;
	    opacity: 0.6;

	    z-index: 0;
	}

	/* TITLE */
	.expert-title h2 {
	    position: relative;
	    z-index: 2;
	    font-size: 30px;
	    font-weight: 700;
	}

	/* BLUE TEXT */
	.expert-title h2 span {
	    color: #00b3ff;
	    position: relative;
	}

	/* UNDERLINE */
	.expert-title h2 span::after {
	    content: "";
	    width: 50px;
	    height: 3px;
	    background: #00b3ff;
	    display: block;
	    margin: 6px auto 0;
	}

	.gallery-section {
	    padding: 80px 0;
	    background: #f5f7fa;
	}

	/* TITLE BACKGROUND ICON */
	.gallery-title {
	    position: relative;
	}

	.gallery-title::before {
	    content: "\f0b1";
	    /* briefcase */
	    font-family: "Font Awesome 6 Free";
	    font-weight: 900;

	    position: absolute;
	    top: -30px;
	    left: 50%;
	    transform: translateX(-50%);

	    font-size: 70px;
	    color: #cfe5f2;
	    opacity: 0.5;
	    z-index: 0;
	}

	/* TITLE */
	.gallery-title h2 {
	    position: relative;
	    z-index: 2;
	    font-size: 30px;
	    font-weight: 700;
	}

	.gallery-title span {
	    color: #00b3ff;
	    position: relative;
	}

	/* UNDERLINE */
	.gallery-title span::after {
	    content: "";
	    width: 50px;
	    height: 3px;
	    background: #00b3ff;
	    display: block;
	    margin: 6px auto 0;
	}

	/* TEXT */
	.gallery-title p {
	    max-width: 600px;
	    margin: 10px auto 40px;
	    color: #777;
	}

	/* GRID */
	.gallery-grid {
	    display: grid;
	    grid-template-columns: repeat(5, 1fr);
	    gap: 15px;
	}

	/* ITEM */
	.gallery-item {
	    position: relative;
	    overflow: hidden;
	    border-radius: 6px;
	}

	.gallery-item img {
	    width: 100%;
	    transition: 0.4s;
	}

	/* OVERLAY */
	.overlay {
	    position: absolute;
	    inset: 0;
	    background: rgba(0, 179, 255, 0.8);
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    opacity: 0;
	    transition: 0.4s;
	}

	.overlay span {
	    color: #fff;
	    font-size: 24px;
	}

	/* HOVER */
	/*
.gallery-item:hover img {
  transform: scale(1.1);
}

.gallery-item:hover .overlay {
  opacity: 1;
}
*/

	/* RESPONSIVE */
	@media (max-width: 991px) {
	    .gallery-grid {
	        grid-template-columns: repeat(3, 1fr);
	    }
	}

	@media (max-width: 576px) {
	    .gallery-grid {
	        grid-template-columns: repeat(2, 1fr);
	    }
	}

	.testimonial-section {
	    padding: 80px 0;
	    background: #f5f7fa;
	}

	/* TITLE BACKGROUND ICON */
	.testimonial-title {
	    position: relative;
	}

	.testimonial-title::before {
	    content: "\f10d";
	    /* quote icon */
	    font-family: "Font Awesome 6 Free";
	    font-weight: 900;

	    position: absolute;
	    top: -30px;
	    left: 50%;
	    transform: translateX(-50%);

	    font-size: 70px;
	    color: #cfe5f2;
	    opacity: 0.5;
	    z-index: 0;
	}

	/* TITLE */
	.testimonial-title h2 {
	    position: relative;
	    z-index: 2;
	    font-size: 30px;
	    font-weight: 700;
	}

	.testimonial-title span {
	    color: #00b3ff;
	}

	.testimonial-title span::after {
	    content: "";
	    width: 50px;
	    height: 3px;
	    background: #00b3ff;
	    display: block;
	    margin: 6px auto 0;
	}

	/* GRID */
	.testimonial-grid {
	    display: grid;
	    grid-template-columns: repeat(3, 1fr);
	    gap: 25px;
	}

	/* CARD */
	.testimonial-card {
	    background: #fff;
	    padding: 25px;
	    text-align: center;
	    border-radius: 8px;
	    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
	    transition: 0.3s;
	}

	.testimonial-card:hover {
	    transform: translateY(-5px);
	}

	/* IMAGE */
	.testimonial-card img {
	    width: 80px;
	    height: 80px;
	    border-radius: 50%;
	    margin-bottom: 10px;
	}

	/* STARS */
	.stars {
	    color: #00b3ff;
	    margin-bottom: 8px;
	}

	/* TEXT */
	.testimonial-card h5 {
	    margin-bottom: 10px;
	}

	.testimonial-card p {
	    font-size: 14px;
	    color: #777;
	    margin-bottom: 15px;
	}

	.testimonial-card h4 span {
	    color: #00b3ff;
	    font-size: 13px;
	}

	/* RESPONSIVE */
	@media (max-width: 991px) {
	    .testimonial-grid {
	        grid-template-columns: repeat(2, 1fr);
	    }
	}

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

	.ulockd-footer {
	    background: #1f1f1f;
	    color: #ccc;
	    padding: 60px 0 0;
	    font-family: Arial;
	}

	/* GRID */
	.footer-grid {
	    display: grid;
	    grid-template-columns: repeat(4, 1fr);
	    gap: 30px;
	}

	/* LOGO */
	.footer-logo {
	    margin-bottom: 15px;
	}

	/* TEXT */
	.footer-col h3 {
	    color: #fff;
	    margin-bottom: 15px;
	    font-size: 16px;
	}

	.footer-col p {
	    font-size: 14px;
	    line-height: 1.6;
	}

	/* CONTACT */
	.contact {
	    list-style: none;
	    padding: 0;
	}

	.contact li {
	    margin-bottom: 8px;
	    font-size: 14px;
	}

	.contact i {
	    color: #00b3ff;
	    margin-right: 8px;
	}

	/* SOCIAL */
	.social {
	    margin-top: 15px;
	}

	.social i {
	    margin-right: 10px;
	    cursor: pointer;
	}

	/* POSTS */
	.post {
	    display: flex;
	    gap: 10px;
	    margin-bottom: 15px;
	}

	.post img {
	    width: 60px;
	}

	.post h4 {
	    font-size: 14px;
	    color: #fff;
	    margin: 0;
	}

	.post p {
	    font-size: 12px;
	    margin: 0;
	}

	/* FLICKR */
	.flickr {
	    display: grid;
	    grid-template-columns: repeat(3, 1fr);
	    gap: 5px;
	}

	.thumb {
	    position: relative;
	    overflow: hidden;
	}

	.thumb img {
	    width: 100%;
	    display: block;
	}

	/* NEWSLETTER */
	.newsletter h4 {
	    margin-top: 15px;
	    color: #fff;
	}

	.newsletter-box {
	    display: flex;
	    margin-top: 8px;
	}

	.newsletter-box input {
	    flex: 1;
	    padding: 8px;
	    border: none;
	}

	.newsletter-box button {
	    background: #00b3ff;
	    border: none;
	    padding: 8px 12px;
	    color: #fff;
	}

	/* BOTTOM */
	.footer-bottom {
	    background: #00b3ff;
	    text-align: center;
	    padding: 10px;
	    margin-top: 30px;
	}

	.footer-bottom p {
	    color: #fff;
	    font-size: 14px;
	}

	/* SCROLL */
	.scrollToHome {
	    position: fixed;
	    bottom: 20px;
	    right: 20px;
	    background: #00b3ff;
	    color: #fff;
	    padding: 10px;
	    border-radius: 4px;
	}

	/* RESPONSIVE */
	@media (max-width: 991px) {
	    .footer-grid {
	        grid-template-columns: repeat(2, 1fr);
	    }
	}

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

	.ctm-part {
	    margin-top: -150px;
	}

	/* ===============================
   GLOBAL FIX (IMPORTANT)
================================= */
	* {
	    box-sizing: border-box;
	}

	img {
	    max-width: 100%;
	    height: auto;
	}

	/* Fix row conflict with Bootstrap */
	.row {
	    display: flex;
	    flex-wrap: wrap;
	}

	/* ===============================
   HEADER RESPONSIVE
================================= */
	@media (max-width: 1199px) {

	    .header-top .col-md-5,
	    .header-top .col-md-4,
	    .header-top .col-md-3 {
	        flex: 0 0 100%;
	        max-width: 100%;
	        text-align: center;
	    }

	    .header-top .col-md-4 .list-inline {
	        justify-content: center;
	    }

	    .header-top .col-md-3 .list-inline {
	        justify-content: center;
	    }
	}

	@media (max-width: 991px) {
	    .header-top {
	        padding: 5px 0;
	    }

	    .header-top .welcm-ht ul li {
	        margin-bottom: 5px;
	    }

	    .header-top .welcm-ht a {
	        font-size: 12px;
	    }

	    .attr-nav {
	        display: none;
	    }

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

	    .navbar-toggler {
	        border: none;
	        background: transparent;
	    }

	    .navbar-toggler:focus {
	        box-shadow: none;
	    }
	}

	@media (max-width: 767px) {
	    .header-top {
	        display: none;
	    }

	    .navbar-brand img {
	        max-height: 35px;
	    }

	    .navbar-nav .nav-link {
	        padding: 15px 10px;
	        font-size: 14px;
	    }

	    .attr-nav {
	        display: none;
	    }
	}

	@media (max-width: 575px) {
	    .navbar-brand img {
	        max-height: 30px;
	    }

	    .navbar-nav .nav-link {
	        padding: 10px 8px;
	        font-size: 13px;
	    }

	    .dropdown-menu .dropdown-item {
	        padding: 6px 15px;
	        font-size: 12px;
	    }
	}

	/* ===============================
   HERO SLIDER RESPONSIVE
================================= */
	@media (max-width: 767px) {

	    .banner-style-one .banner-title {
	        font-size: 24px;
	        line-height: 1.3;
	    }

	    .banner-style-one .banner_top_title {
	        font-size: 16px;
	    }

	    .banner-style-one .slide {
	        padding: 120px 0;
	    }

	}

	/* ===============================
   FEATURE BOX RESPONSIVE
================================= */
	@media (max-width: 991px) {

	    .feature-box2 {
	        margin-bottom: 20px;
	        border-radius: 10px;
	    }

	}

	/* ===============================
   ABOUT SECTION RESPONSIVE
================================= */
	@media (max-width: 991px) {

	    .ulockd-about .row {
	        flex-direction: column;
	    }

	    .about-box {
	        margin-bottom: 30px;
	    }

	}

	@media (max-width: 767px) {

	    .title-bottom {
	        font-size: 26px;
	    }

	    .lead {
	        font-size: 16px;
	    }

	}

	/* ===============================
   ICON BOX (FIX BREAKING)
================================= */
	.icon_box {
	    display: flex;
	    gap: 15px;
	    align-items: flex-start;
	    margin-bottom: 20px;
	}

	.icon_box .icon {
	    font-size: 20px;
	    min-width: 40px;
	}

	@media (max-width: 576px) {

	    .icon_box {
	        flex-direction: column;
	        text-align: center;
	    }

	}

	/* ===============================
   SERVICE SECTION RESPONSIVE
================================= */
	.service-grid {
	    display: grid;
	    grid-template-columns: repeat(3, 1fr);
	    gap: 20px;
	}

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

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

	.service-card {
	    display: flex;
	    gap: 15px;
	    padding: 20px;
	    background: #fff;
	    border-radius: 10px;
	    transition: 0.3s;
	}

	.service-card:hover {
	    transform: translateY(-5px);
	}

	/* ===============================
   BUTTON FIX
================================= */
	.btn {
	    white-space: nowrap;
	}

	/* ===============================
   SPACING FIX (GLOBAL)
================================= */
	section {
	    padding: 60px 0;
	}

	@media (max-width: 767px) {
	    section {
	        padding: 40px 0;
	    }

	    .icon_box {
	        flex-direction: column;
	        align-items: center;
	        text-align: center;
	    }

	    .icon_box .icon {
	        margin-bottom: 10px;
	    }

	    .ctm-part {
	        margin-top: -110px;
	    }

	    .counter-grid {
	        grid-template-columns: repeat(2, 1fr);
	    }
	}

	/* ===============================
   MOBILE MENU FIX
================================= */
	#mobile-nav-panel {
	    background: #00b3ff;
	    padding: 20px;
	}

	#mobile-nav-panel ul li a,
	#mobile-nav-panel ul li span {
	    color: #fff;
	}

	/* ===============================
   OVERFLOW FIX (VERY IMPORTANT)
================================= */
	body {
	    overflow-x: hidden;
	}