/* ----------------------------------------------------------------------------------------
* Author        : Awaiken
* Template Name : Weebix - IT Service And Technology HTML Template
* File          : CSS File
* Version       : 1.0
* ---------------------------------------------------------------------------------------- */
/* INDEX
----------------------------------------------------------------------------------------
01. Global Variables
02. General css
03. Button Styles
04. Header css
05. Hero css
06. About us css
07. Services css
08. Portfolio css
09. why choose us css
10. Our Clients css
11. Testimonials css
12. Latest Post css
13. Footer css
14. About us page css
15. Services Page css
16. Portfolio Page css
17. Blog Archive css
18. Contact Us Page css
19. Blog Single css
20. Services Single css
21. Portfolio Singe css
22. Faqs Page css
23. 404 Page css
24. Responsive css
-------------------------------------------------------------------------------------- */

/************************************/
/*** 	 01. Global Variables	  ***/
/************************************/

:root{
    --primary-color		: #15161B;
    --secondary-color	: #F7F8FD;
    --alt-bg-color	: #e6edff;
/* Alt background for section separation */
.alt-bg {
    background: var(--alt-bg-color);
}
	--text-color		: #9C9FA6;
	--accent-color		: #5D56F1;
    /* RGB version of accent for semi-transparent effects */
    --accent-rgb: 93,86,241;
	--white-color		: #FFFFFF;
	--divider-color		: #E1E4EB;
	--error-color		: rgb(230, 87, 87);
	--default-font		: "Manrope", sans-serif;
}

/************************************/
/*** 	   02. General css		  ***/
/************************************/

body {
    font-family: var(--default-font) !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    line-height: 1.5em !important;
    color: var(--text-color) !important;
    background: var(--white-color) !important;
}

p{
	line-height: 1.6em;
	margin-bottom: 1.5em;
}

/* Justify all <p> tags by default */
p {
    text-align: justify !important;
    text-justify: inter-word !important;
}

/* Except in Why Choose Us section: left align <p> tags */
.why-choose-us p {
    text-align: left !important;
    text-justify: initial !important;
}

h1,
h2,
h3,
h4,
h5,
h6{
	margin :0;
	font-weight: 700;
	color: var(--primary-color);
	line-height: 1.1em;
}

figure{
	margin: 0;
}

img{
	max-width: 100%;
}

a{
    text-decoration: none;
}

a:hover{
    text-decoration: none;
	outline: 0;
}

a:focus{
    text-decoration: none;
	outline: 0;
}

/* Remove underline from course titles and title bar navigation links globally */
.courses-layout-2__items__title a,
.title-bar__nav_list a {
    text-decoration: none !important;
}

html,
body{
	width: 100%;
	overflow-x: clip;
}

.container{
	max-width: 1300px;
}

.container,
.container-fluid,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl{
    padding-right: 15px;
    padding-left: 15px;
}

.image-anime{
	position: relative;
	overflow: hidden;
}

.image-anime:after{
	content: "";
	position: absolute;
    width: 200%;
    height: 0%;
    left: 50%;
    top: 50%;
    background-color: rgba(255,255,255,.3);
    transform: translate(-50%,-50%) rotate(-45deg);
    z-index: 1;
}

.image-anime:hover:after{
    height: 250%;
    transition: all 600ms linear;
    background-color: transparent;
}

.reveal{
	position: relative;
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    visibility: hidden;
    overflow: hidden;
}

.reveal img{
    height: 100%;
    width: 100%;
    -o-object-fit: cover;
    object-fit: cover;
    -webkit-transform-origin: left;
    transform-origin: left;
}

.row{
    margin-right: -15px;
    margin-left: -15px;
}

.row > *{
	padding-right: 15px;
	padding-left: 15px;
}

.row.no-gutters{
    margin-right: 0px;
    margin-left: 0px;
	padding-left: 0;

/* === Global override: Training stats layout ===
   Ensure the training stats (Students Trained, Expert Mentors,
   Courses Offered, Success Rate) are centered and bold wherever
   `global-training-stats.html` is included. This rule is scoped to
   .overview-company to avoid affecting other counters site-wide. */
.overview-company .counter-box {
    text-align: center !important;
    padding: 18px 12px;
}
.overview-company .counter-box h3 {
    font-size: 28px !important;
    font-weight: 800 !important;
    margin-bottom: 6px !important;
    color: var(--primary-color) !important;
}
.counter-box p {
    text-align: center !important;
    font-weight: 700 !important;
    margin: 0.25rem 0 0 0;
}

	padding-right: 0;
}

.btn-default{
	display: inline-block;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.1em;
	color: var(--white-color) !important;
	background: var(--accent-color) !important;
	text-transform: capitalize;
	padding: 15px 45px 15px 20px;
	border: 2px solid var(--accent-color);
	border-radius: 100px;
	transition: 0.3s ease-in-out;
	position: relative;
	overflow: hidden;
	z-index: 1;
}

.btn-default::before{
	content: '\f062';
	position: absolute;
	top: 50%;
	right: 0;
	bottom: 0;
	font-family: 'FontAwesome';
	font-size: 18px;
	font-weight: 900;
	transition: 0.3s ease-in-out;
	background: transparent;
    color: var(--white-color);
	transform: translate(-20px, -50%) rotate(45deg);
	display: flex;
	align-items: center;
	justify-content: center;
}

.btn-default:hover:before{
	color: var(--accent-color);
	transform: translate(-20px, -50%) rotate(90deg);
}

.btn-default::after{ 
	content: '';
    display: block;
    width: 0;
    position: absolute;
	top: 0;
    left: 0;
    bottom: 0;
    z-index: -1;
    background: var(--white-color);
    border-radius: 30px;
    transition: 0.3s ease-in-out;
}

.btn-default:hover::after{
	width: 100%;
}

.btn-default:hover{
	color: var(--accent-color) !important;
}

#magic-cursor{
	position: absolute;
    width: 10px !important;
    height: 10px !important;
    pointer-events: none;
    z-index: 1000000;
}

#ball{
	position: fixed;
	display: block;
	left: 0;
	top: 0;
	transform: translate(-50%, -50%);
	width: 10px !important;
	height: 10px !important;
	background: var(--accent-color);
	border-radius: 50%;
	pointer-events: none;
	opacity:1 !important;
}

.preloader{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1000;
	background-color: var(--accent-color);
	display: flex;
	align-items: center;
	justify-content: center;
}

.loading-container,
.loading{
	height: 100px;
	position: relative;
	width: 100px;
	border-radius: 100%;
}

.loading-container{
	margin: 40px auto
}

.loading{
	border: 1px solid transparent;
	border-color: transparent var(--white-color) transparent var(--white-color);
	animation: rotate-loading 1.5s linear 0s infinite normal;
	transform-origin: 50% 50%;
}

.loading-container:hover .loading,
.loading-container .loading{
	transition: all 0.5s ease-in-out;
}

#loading-icon{
	position: absolute;
	top: 50%;
	left: 50%;
	max-width: 66px;
	transform: translate(-50%, -50%);
}

@keyframes rotate-loading{
	0%{
		transform: rotate(0deg);
	}

	100%{
		transform: rotate(360deg);
	}
}

.section-row{
	margin-bottom: 60px;
}

.section-btn{
	text-align: end;
}

.section-title{
	text-align: left;
}

.section-title h3{
	font-size: 20px;
	font-weight: 700;
	text-transform: capitalize;
	color: var(--accent-color);
	margin-bottom: 10px;
}

.section-title h1,
.section-title h2{
	font-size: 70px;
	letter-spacing: -0.05em;
	font-weight: 700;
	margin-bottom: 0;
}

.section-title h1 span,
.section-title h2 span{
	color: var(--accent-color);
}

/* OWASP module: subtle active highlight for the right card when a topic is selected */
.owasp-card--active{
    border: 1px solid rgba(var(--accent-rgb), 0.12);
    box-shadow: 0 8px 24px rgba(var(--accent-rgb), 0.06);
    transition: box-shadow 220ms ease, border-color 220ms ease, transform 120ms ease;
}

.owasp-card--active .card-body{
        background: linear-gradient(rgba(93, 86, 241, 0.02), transparent);
    
    }

/* Hover and focus affordance for the card so mouse and keyboard interactions show the same accent */
#owasp-web .card:hover, #owasp-web .card:focus-within{
    border: 1px solid rgba(var(--accent-rgb), 0.14);
    box-shadow: 0 12px 30px rgba(var(--accent-rgb), 0.08);
}

/* Keyboard accessible ring for the card when focused */
#owasp-web .card:focus-within{
    outline: none;
    box-shadow: 0 12px 30px rgba(var(--accent-rgb), 0.08), 0 0 0 4px rgba(var(--accent-rgb), 0.06);
}

/* Left-side accent for OWASP module items when active or focused */
#owasp-web .module-item{
    transition: background 180ms ease, box-shadow 180ms ease, transform 120ms ease;
}
#owasp-web .module-item.active{
    /* When active, make the whole item the site accent and ensure readable text */
    background: var(--accent-color) !important;
    color: var(--white-color) !important;
    border-color: var(--accent-color) !important;
    box-shadow: none; /* remove inset accent since full background is applied */
}

/* Ensure headings and small meta text are visible on accent background */
#owasp-web .module-item.active strong{ color: var(--white-color) !important; }
#owasp-web .module-item.active .small{ color: rgba(255,255,255,0.95) !important; }

/* Keep the active visual while hovering or focusing the button (avoid Bootstrap overrides) */
#owasp-web .module-item.active:hover,
#owasp-web .module-item.active:focus{
    background: var(--accent-color) !important;
    color: var(--white-color) !important;
    border-color: var(--accent-color) !important;
}

/* Keep a keyboard focus ring but use a soft accent-based outline */
#owasp-web .module-item.active:focus-visible{
    box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.12);
}
#owasp-web .module-item:focus-visible{
    outline: none;
    box-shadow: inset 4px 0 0 rgba(var(--accent-rgb), 0.85), 0 0 0 4px rgba(var(--accent-rgb), 0.08);
}

/* Styling for the checklist rendered in the OWASP module */


/************************************/
/**** 	   03. Button Styles		 ****/
/************************************/

/* Default ENROL NOW button style for all course cards */
.enrol-btn {
    min-width: 176px;
    max-width: 264px;
    width: auto;
    padding: 16px 44px;
    font-weight: 700;
    gap: 10px;
    font-size: 1.1rem;
    white-space: nowrap;
    background: #5a5aff;
    color: #fff !important;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(90,90,255,0.08);
    border: none;
    transition: background 0.2s, color 0.2s;
}

.enrol-btn:focus, .enrol-btn:hover {
    background: #222;
    color: #fff !important;
    outline: 2px solid #5a5aff;
    outline-offset: 2px;
    text-decoration: none;
}

/* Cookie consent banner link styling - ensures visibility and accessibility */
#cookie-consent-banner .cookie-message a,
#cookie-consent-banner a {
    color: #6366f1 !important;
    text-decoration: underline !important;
}

/* Force no underline on primary CTA buttons (e.g., Get A Free Security Assessment) */
.btn-default,
.btn-default:hover,
.btn-default:focus,
.btn-default:active {

/* Strong, specific override: ensure the arrow stays white for the "Our Services" link
   regardless of other pseudo-element hover rules. Match common href variants. */
a.btn-default[href$="/services.html"]::before,
a.btn-default[href$="services.html"]::before,
a.btn-default[href$="./services.html"]::before,
li a.btn-default[href$="/services.html"]::before,
li a.btn-default[href$="services.html"]::before,
li a.btn-default[href$="./services.html"]::before {
    color: #ffffff !important;
}

a.btn-default[href$="/services.html"]:hover::before,
a.btn-default[href$="services.html"]:hover::before,
a.btn-default[href$="./services.html"]:hover::before,
li a.btn-default[href$="/services.html"]:hover::before,
li a.btn-default[href$="services.html"]:hover::before,
li a.btn-default[href$="./services.html"]:hover::before {
    color: #ffffff !important;
}

/* Very high-specificity target for the explore-item tags where the button appears */
.explore-item-tags ul li a.btn-default::before,
.explore-item-tags ul li a.btn-default:hover::before {
    color: #ffffff !important;
}
    text-decoration: none !important;
}

/* Main Button Default Styles */
.btn-default{
	display: inline-block;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.1em;
	color: var(--white-color);
	background: var(--accent-color);
	text-transform: capitalize;
	padding: 15px 45px 15px 20px;
	border: 2px solid var(--accent-color);
	border-radius: 100px;
	transition: 0.3s ease-in-out;
	position: relative;
	overflow: hidden;
	z-index: 1;
}

.btn-default::before{
	content: '\f062';
	position: absolute;
	top: 50%;
	right: 0;
	bottom: 0;
	font-family: 'FontAwesome';
	font-size: 18px;
	font-weight: 900;
	transition: 0.3s ease-in-out;
	background: transparent;
	color: var(--white-color);
	transform: translate(-20px, -50%) rotate(45deg);
	display: flex;
	align-items: center;
	justify-content: center;
}

.btn-default:hover:before{
	color: var(--accent-color);
	transform: translate(-20px, -50%) rotate(90deg);
}

.btn-default::after{ 
	content: '';
    display: block;
    width: 0;
    position: absolute;
	top: 0;
    left: 0;
    bottom: 0;
    z-index: -1;
    background: var(--white-color);
    border-radius: 30px;
    transition: 0.3s ease-in-out;
}

.btn-default:hover::after{
	width: 100%;
}

.btn-default:hover{
	color: var(--accent-color) !important;
}

/* Section Button Styles */
.section-btn{
	text-align: end;
}

/* SlickNav Button Styles */
.slicknav_btn{
	background: var(--accent-color);
	padding: 6px 0 0;
	width: 38px;
	height: 38px;
	margin: 0;
	border-radius: 10px;
	transition: all 0.3s ease;
}

.slicknav_btn:hover {
    background-color: rgba(0, 0, 0, 0.1);
}

.slicknav_icon .slicknav_icon-bar{
	display: block;
	width: 100%;
	height: 3px;
	width: 22px;
	background-color: var(--white-color);
	border-radius: 6px;
	margin: 4px auto !important;
	transition: all 0.1s ease-in-out;
}

.navbar-toggle a.slicknav_btn.slicknav_open .slicknav_icon span.slicknav_icon-bar:nth-child(1){
    transform: rotate(-45deg) translate(-5px, 5px);
}

.navbar-toggle a.slicknav_btn.slicknav_open .slicknav_icon span.slicknav_icon-bar:nth-child(2){
    opacity: 0;
}

.navbar-toggle a.slicknav_btn.slicknav_open .slicknav_icon span.slicknav_icon-bar:nth-child(3){
    transform: rotate(45deg) translate(-5px, -5px);
}

/* Default ENROL NOW button style for all course cards */
.enrol-btn {
    min-width: 176px;
    max-width: 264px;
    width: auto;
    padding: 16px 44px;
    font-weight: 700;
    gap: 10px;
    font-size: 1.1rem;
    white-space: nowrap;
    background: #5a5aff;
    color: #fff !important;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(90,90,255,0.08);
    border: none;
    transition: background 0.2s, color 0.2s;
}
.enrol-btn:focus, .enrol-btn:hover {
    background: #222;
    color: #fff !important;
    outline: 2px solid #5a5aff;
    outline-offset: 2px;
    text-decoration: none;
}

/************************************/
/**** 	   04. Header css		 ****/
/************************************/

header.main-header{
	background-color: var(--secondary-color);
	position: relative;
	z-index: 100;
}

header.main-header .header-sticky{
	padding: 25px 0;
	position: relative;
	top: 0;
	z-index: 100;
}

header.main-header .header-sticky.hide{
	transform: translateY(-100%);
	transition: transform 0.3s ease-in-out;
	padding: 20px 0;
	border-radius: 0;
	border-bottom: 1px solid var(--divider-color);
}

header.main-header .header-sticky.active{
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	border-radius: 0;
	border-bottom: 1px solid var(--divider-color);
    transform: translateY(0);
	background: var(--secondary-color);
	backdrop-filter: blur(30px);
}

.navbar{
	padding: 0;
	align-items: center;
}

.navbar-brand{
	padding: 0;
	margin: 0;
}

.navbar-brand img{
	min-width: 140px;
}

.main-menu .nav-menu-wrapper{
	flex: 1 !important;
	text-align: center !important;
}

.main-menu .nav-menu-wrapper > ul{
	align-items: center !important;
	display: inline-flex !important;
}

.main-menu ul li{
	margin: 0 10px !important;
	position: relative !important;
}

.main-menu ul li a{
	font-size: 16px !important;
	font-weight: 700 !important;
	padding: 10px 8px !important;
	color: var(--primary-color) !important;
	text-transform: capitalize !important;
	transition: all 0.3s ease-in-out !important;
}

.main-menu ul li.submenu > a:after{
	content: '\f107' !important;
	font-family: 'FontAwesome' !important;
	font-weight: 900 !important;
	font-size: 14px !important;
	margin-left: 8px !important;
	transition: transform 0.3s ease !important;
}

.main-menu ul li.submenu:hover > a:after{
	transform: rotate(180deg) !important;
}

.main-menu ul li a:hover,
.main-menu ul li a:focus{
	color: var(--accent-color) !important;
}

.main-menu ul ul{
	visibility: hidden !important;
	opacity: 0 !important;
	transform: scaleY(0.8) !important;
	transform-origin: top !important;
	padding: 0 !important;
	margin: 0 !important;
	list-style: none !important;
	width: 210px !important;
	border-radius: 15px !important;
	position: absolute !important;
	left: 0 !important;
	top: 100% !important;
	overflow: hidden !important;
	background-color: var(--accent-color) !important;
	transition: all .3s ease-in-out !important;
	text-align: left !important;
	box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15) !important;
}

.main-menu ul ul ul{
	left: 100% !important;
	top: 0 !important;
	text-align: left !important;
}

.main-menu ul ul li{
	margin: 0 !important;
	padding: 0 !important;
}

.main-menu ul ul li a{
	color: var(--white-color) !important;
	padding: 8px 20px !important;
}

.main-menu ul li:hover > ul{
	visibility: visible !important;
	opacity: 1 !important;
	transform: scaleY(1) !important;
    padding: 5px 0 !important;
}

.main-menu ul ul li a:hover{
	color: var(--primary-color) !important;
	background-color: transparent !important;
}

.main-menu ul li.highlighted-menu{
    display: none !important;
}

.responsive-menu,
.navbar-toggle{
	display: none;
}

.responsive-menu{
	top: 20px;
	position: relative;
}

.slicknav_btn{
	background: var(--accent-color);
	padding: 6px 0 0;
	width: 38px;
	height: 38px;
	margin: 0;
	border-radius: 10px;
	transition: all 0.3s ease;
}

.slicknav_btn:hover {
    background-color: rgba(0, 0, 0, 0.1);
}

.slicknav_icon .slicknav_icon-bar{
	display: block;
	width: 100%;
	height: 3px;
	width: 22px;
	background-color: var(--white-color);
	border-radius: 6px;
	margin: 4px auto !important;
	transition: all 0.1s ease-in-out;
}

.navbar-toggle a.slicknav_btn.slicknav_open .slicknav_icon span.slicknav_icon-bar:nth-child(1){
    transform: rotate(-45deg) translate(-5px, 5px);
}

.navbar-toggle a.slicknav_btn.slicknav_open .slicknav_icon span.slicknav_icon-bar:nth-child(2){
    opacity: 0;
}

.navbar-toggle a.slicknav_btn.slicknav_open .slicknav_icon span.slicknav_icon-bar:nth-child(3){
    transform: rotate(45deg) translate(-5px, -5px);
}

.slicknav_menu{
	padding: 0;
	background: var(--accent-color);
}

.slicknav_menu ul{
	margin: 5px 0;
}

.slicknav_menu ul ul{
	margin: 0;
}

.slicknav_nav .slicknav_row,
.slicknav_nav li a{
	position: relative;
	font-size: 16px;
	font-weight: 700;
	text-transform: capitalize;
	padding: 10px 20px;
	color: var(--white-color);
	line-height: normal;
	margin: 0;
	border-radius: 0 !important;
}

.slicknav_nav a:hover,
.slicknav_nav .slicknav_row:hover{
	background-color: #f5f5f5;
	color: #0056b3;
}

.slicknav_menu ul ul li a{
    padding: 10px 20px 10px 30px;
}

.slicknav_arrow{
	font-size: 0 !important;
}

.slicknav_arrow:after{
	content: '\f107';
	font-family: 'FontAwesome';
	font-weight: 900;
	font-size: 12px;
	margin-left: 8px;
	color: var(--white-color);
	position: absolute;
	right: 15px;
    top: 15px;
	transition: all 0.3s ease-out;
}

.slicknav_open > a .slicknav_arrow:after{
    transform: rotate(-180deg);
}

/* Standard logo size for header */
header.main-header img {
  width: 250px;
  height: 80px;
  object-fit: contain;
}

/* Dropdown animations */
.main-dropdown-menu__sub {
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease !important;
}

.main-menu ul li:hover > .main-dropdown-menu__sub {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Dropdown arrow indicators */
.menu-item-has-children > a::after {
    content: '\f107';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    margin-left: 5px;
    transition: transform 0.3s ease;
}

.menu-item-has-children:hover > a::after {
    transform: rotate(180deg);
}

/* Mobile dropdown styling */
@media (max-width: 991px) {
    .main-dropdown-menu__sub {
        max-height: 0;
        overflow: hidden;
        transform: none;
        transition: max-height 0.4s ease !important;
    }
    
    .dropdown-open + .main-dropdown-menu__sub {
        opacity: 1;
        visibility: visible;
    }

    /* Mobile dropdown arrows */
    .menu-item-has-children > a {
        position: relative;
    }
    
    .dropdown-toggle {
        position: absolute;
        right: 0;
        top: 0;
        height: 40px;
        width: 40px;
        text-align: center;
        line-height: 40px;
        cursor: pointer;
        z-index: 10;
    }
    
    .dropdown-toggle::before {
        content: '\f107';
        font-family: 'Font Awesome 5 Free';
        font-weight: 900;
        transition: transform 0.3s ease;
    }
    
    .dropdown-toggle.active::before {
        transform: rotate(180deg);
    }
}

/* Enhanced Dropdown Menu Styling */
.sub-menu {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #fff;
    min-width: 200px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    border-radius: 4px;
    padding: 10px 0;
    transition: all 0.3s ease;
    transform: translateY(10px);
    z-index: 1000;
}

.menu-item-has-children:hover > .sub-menu {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    animation: fadeInDown 0.3s ease forwards;
}

/* Dropdown Arrow Styling */
.dropdown-arrow {
    margin-left: 5px;
    font-size: 12px;
    transition: transform 0.3s ease;
}

.dropdown-arrow.rotated {
    transform: rotate(180deg);
}

/* Additional Dropdown Animation */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translate3d(0, -10px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

/* Improve accessibility focus styles */
.menu-item a:focus {
    outline: 2px solid #0056b3;
    outline-offset: 2px;
}

/* Sub-sub menu styling */
.sub-menu .sub-menu {
    left: 100%;
    top: 0;
}

@media (max-width: 991px) {
    .sub-menu .sub-menu {
        left: 0;
        top: 100%;
        padding-left: 15px;
    }
}

/* Mobile dropdown menu styles */
@media (max-width: 991px) {
    .sub-menu {
        position: static;
        visibility: visible;
        opacity: 1;
        height: 0;
        overflow: hidden;
        box-shadow: none;
        background-color: rgba(0,0,0,0.02);
        border-radius: 0;
        padding: 0;
        margin: 0;
        transform: none;
        transition: height 0.3s ease;
    }
    
    .sub-menu.open {
        height: auto;
    }
    
    .sub-menu li a {
        padding-left: 30px;
    }
    
    .menu-item-has-children > a {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
}

/* Enhanced Dropdown Menu Styles */
.main-menu .nav-item.submenu {
    position: relative;
}

.main-menu .nav-item.submenu > a:after {
    content: '\f107';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    margin-left: 5px;
    transition: transform 0.3s ease;
}

.main-menu .nav-item.submenu:hover > a:after {
    transform: rotate(-180deg);
}

.main-menu .nav-item.submenu ul {
    position: absolute;
    top: 100%;
    left: 0;
    width: 220px;
    background: #fff;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    border-radius: 4px;
    padding: 10px 0;
    z-index: 999;
}

.main-menu .nav-item.submenu:hover ul {
    opacity: 1;
    visibility: visible;
    top: 100%;
}

.main-menu .nav-item.submenu ul li {
    display: block;
    margin: 0;
    padding: 0;
}

.main-menu .nav-item.submenu ul li a {
    display: block;
    padding: 8px 20px;
    color: #333;
    transition: all 0.2s ease;
    font-size: 14px;
}

.main-menu .nav-item.submenu ul li a:hover {
    background: #f8f9fa;
    color: #007bff;
    padding-left: 25px;
}

/* Mobile Dropdown Enhancements */
.slicknav_nav .slicknav_row:hover {
    background: #f8f9fa;
    border-radius: 4px;
}

.slicknav_nav .slicknav_item a:hover {
    color: #007bff;
}

.slicknav_nav .slicknav_arrow {
    margin-left: 5px;
    font-size: 0.8em;
    transition: transform 0.3s ease;
}

.slicknav_nav .slicknav_open > a > .slicknav_arrow {
    transform: rotate(-180deg);
}

.slicknav_nav ul {
    margin: 0 0 0 20px;
    padding-top: 5px;
    padding-bottom: 5px;
}

.slicknav_nav ul li a {
    padding: 8px 10px;
}

/* Accessibility Improvements */
.nav-link:focus-visible {
    outline: 2px solid #007bff;
    outline-offset: 2px;
}

/* Arrow Animation */
@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
    40% {transform: translateY(-5px);}
    60% {transform: translateY(-3px);}
}

.main-menu .nav-item.submenu:hover > a:after {
    animation: bounce 1s ease;
}

/* Enhanced Dropdown Menu Animation */
.main-menu ul li.submenu > ul {
    visibility: hidden !important;
    opacity: 0 !important;
    transform: translateY(20px) !important;
    transform-origin: top !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
    width: 210px !important;
    border-radius: 15px !important;
    position: absolute !important;
    left: 0 !important;
    top: 100% !important;
    overflow: hidden !important;
    background-color: var(--accent-color) !important;
    transition: all .3s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
    text-align: left !important;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15) !important;
    z-index: 1000 !important;
}

.main-menu ul li:hover > ul {
    visibility: visible !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    padding: 5px 0 !important;
    animation: fadeInUp 0.3s ease forwards !important;
}

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

/* Improved dropdown arrow indicators */
.main-menu ul li.submenu > a:after {
    content: '\f107' !important;
    font-family: 'FontAwesome' !important;
    font-weight: 900 !important;
    font-size: 14px !important;
    margin-left: 8px !important;
    transition: transform 0.3s ease !important;
    display: inline-block !important;
}

.main-menu ul li.submenu:hover > a:after {
    transform: rotate(180deg) !important;
}

/* Mobile dropdown enhancements */
@media (max-width: 991px) {
    .slicknav_nav .slicknav_row,
    .slicknav_nav li a {
        transition: all 0.3s ease !important;
    }
    
    .slicknav_arrow:after {
        transition: transform 0.3s ease !important;
    }
    
    .slicknav_open > a .slicknav_arrow:after {
        transform: rotate(-180deg) !important;
    }
    
    .slicknav_nav ul {
        transition: max-height 0.4s ease !important;
    }
}

/* Accessibility improvements for dropdown menu */
.main-menu ul li a:focus + ul,
.main-menu ul li a:focus-within + ul,
.main-menu ul li ul:focus-within {
    visibility: visible !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    padding: 5px 0 !important;
}

/* Improved hover effect for menu items */
.main-menu ul ul li a {
    position: relative !important;
    transition: all 0.3s ease !important;
    padding-left: 20px !important;
}

.main-menu ul ul li a:hover {
    padding-left: 25px !important;
    background-color: rgba(255, 255, 255, 0.1) !important;
}

/* Improved multi-level dropdown support */
.main-menu ul ul ul {
    left: 100% !important;
    top: 0 !important;
    margin-left: 1px !important;
}

/************************************/
/***        05. Hero css	      ***/
/************************************/

.hero{
	position: relative;
	background: var(--secondary-color);
	padding: 140px 0;
}

.hero-content{
	margin-right: 95px;
}

.hero-content .section-title{
	margin-bottom: 30px;
}

.hero-body{
	width: 100%;
	max-width: 568px;
	margin-bottom: 40px;
}

.hero-body p{
    margin: 0;
    text-align: left !important;
    text-justify: initial !important;
}

.hero-image img{
	border-radius: 40px;
}

.hero-video-image{
	position: relative;
}

.hero-play-button{
	position: absolute;	top: 50%;
	left: 0;
	transform: translate(-50%, -50%);
	z-index: 1;
}

.hero-play-button i{
	font-size: 26px;
	background-color: var(--accent-color);
	color: var(--white-color);
	width: 90px;
	height: 90px;
	border: 7px solid var(--secondary-color);
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 50%;
}

.hero-slider-image img{
    border-radius: 40px;
}

.hero-slider .swiper-pagination {
    position: relative;
    bottom: 0px;
    margin-top: 20px;
}

.hero-slider .swiper-pagination .swiper-pagination-bullet {
  width: 15px;
  height: 15px;
  background: #ccc;
  opacity: 1;
  margin: 0 8px !important;
  border-radius: 50%;
  transition: background 0.3s;
}

.hero-slider .swiper-pagination .swiper-pagination-bullet-active {
  background: #333;
}

.hero-layout-2{
    text-align: center;
}

.hero-layout-2 .hero-content {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
}

.hero-layout-2 .section-title{
    text-align: center;
}

.hero-layout-2 .section-title h1{
    font-size: 100px;
}

.hero-layout-2 .hero-body{
    width: 100%;
    max-width: 568px;
    margin: 0 auto;
    margin-bottom: 40px;
}

.hero-layout-2 .hero-footer .btn-default{
    margin-right: 20px;
}

.hero-layout-2 .hero-footer .btn-default:last-child{
    margin-right: 0;
}

.hero-footer .swiper-pagination {
    position: relative;
    top: -1cm;
}

/************************************/
/***       06. About us css	      ***/
/************************************/

.about-us{
	padding: 100px 0;
}

.about-image{
	position: relative;
    padding-right: 70px;
}

.about-img img{
	border-radius: 40px;
}

.about-consultation{
	position: absolute;
	top: 50%;
	right: -1%;
	transform: translateY(-50%);
	z-index: 1;
}

.about-consultation img{
	animation: rotate 30s infinite linear;
}

@keyframes rotate{
	from{
		transform: rotate(0deg);
	  }
	to{
		transform: rotate(360deg);
	}
}

.about-content ul{
	padding: 0;
    margin: 0 0 20px;
    display: flex;
    flex-wrap: wrap;
    list-style: none;
}

.about-content ul li{
    width: 48%;
    margin-right: 2%;
    position: relative;
    padding-left: 30px;
    margin-bottom: 20px;
	font-size: 18px;
    font-weight: 700;
    color: var(--primary-color);
}

.about-content ul li:before{
    content: '\f138';
    font-family: "Font Awesome 6 Free";
    color: var(--accent-color);
    font-size: 20px;
    font-weight: 900;
    position: absolute;
    top: 1px;
    left: 0;
}

/************************************/
/***        07. Services css	  ***/
/************************************/

.our-services{
	background-color: var(--secondary-color);
	padding: 100px 0 70px;
}

.service-item{
	background-color: var(--white-color);
	border-radius: 40px;
	padding: 20px;
	height: calc(100% - 30px);
    margin-bottom: 30px;
}

.service-content{
	padding: 20px;
}

.service-content-title{
	display: flex;
	flex-direction: row;
	align-items: center; /* Center align items vertically within the container */
	justify-content: flex-start;
	border-bottom: 1px solid var(--divider-color);
	padding-bottom: 25px;
	margin-bottom: 25px;
}

.service-content-title h2{
	font-size: 26px;
	width: 100%;
	max-width: 200px;
	text-transform: capitalize;
	margin-top: 0;
	margin-left: 30px; /* Increased from 15px to 30px to add more space between number and title */
}

/* Style for the service number */
.service-content-title span {
	font-size: 80px; /* Increased from 60px to 80px to make the numbers larger */
	font-weight: 700;
	color: var(--accent-color);
	line-height: 1;
	display: flex;
	align-items: center;
}

.service-image{
	border-radius: 30px;
	overflow: hidden;
}

.service-image img{
	border-radius: 30px;
	transition: all 0.5s ease-out;
}

.service-item:hover .service-image img{
	transform: scale(1.1)
}

.service-content-title a{
	background-color: var(--accent-color);
	color: var(--white-color);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 60px;
	height: 60px;
}

.service-content-title a img{
	transition: all 0.3s ease-in-out;
}

.service-item:hover .service-content-title img{
	transform: rotate(45deg);
}

.service-content p{
	margin: 0;
}

.service-image{
	border-radius: 30px;
	overflow: hidden;
}

.service-image img{
	border-radius: 30px;
	transition: all 0.5s ease-out;
}

.service-item:hover .service-image img{
	transform: scale(1.1)
}


/************************************/
/***      08. Portfolio css	      ***/
/************************************/

.our-work{
	padding: 100px 0 70px;
}

.works-item{
	background-color: var(--secondary-color);
	border-radius: 40px;
	padding: 20px 20px 40px 20px;
	height: calc(100% - 30px);
    margin-bottom: 30px;
}

.works-image{
	margin-bottom: 30px;
	border-radius: 30px;
	overflow: hidden;
}

.works-image img{
	border-radius: 30px;
	transition: all 0.5s ease-out;
}

.works-item:hover .works-image img{
	transform: scale(1.1);
}

.works-content{
	padding: 0 20px;
}

.works-content h2{
	font-size: 26px;
	text-transform: capitalize;
	margin-bottom: 20px;
}

.works-content p{
	margin: 0;
}

/************************************/
/***    09. Why Choose us css	  ***/
/************************************/

.why-choose-us{
	background-color: var(--secondary-color);
	padding: 100px 0;
}

.why-choose-us-item{
    margin-bottom: 30px;
    background-color: #f7f8fd;
    border-radius: 40px;
    padding: 40px;
    height: calc(100% - 30px);
    margin-bottom: 30px;
}

.why-choose-us-item .icon-box{
	margin-bottom: 30px;
}

.why-choose-us-item h3{
	font-size: 26px;
	text-transform: capitalize;
	margin-bottom: 20px;
}

.why-choose-us-item p{
	margin: 0;
}

.why-us-explore-item{
    position: relative;
    background-color: #f7f8fd;
    border-radius: 40px;
    padding: 70px;
}

.why-us-explore-item .section-title{
	width: 100%;
	max-width: 800px;
	margin-bottom: 60px;
}

.explore-item-icon{
	position: absolute;
	top: 70px;
	right: 70px;
}

.explore-item-content p{
	margin: 0;
}

.explore-item-tags{
    text-align: end;
}

.explore-item-tags ul{
	list-style: none;
	padding: 0;
	margin: 0;
}

.explore-item-tags ul li{
	display: inline-block;
	margin-right: 20px;
}

.explore-item-tags ul li:last-child{
	margin-right: 0;
}

.explore-item-tags ul li .btn-default{
	background-color: var(--secondary-color);
	color: var(--primary-color);
	border: none;
}

.explore-item-tags ul li .btn-default:hover{
	color: var(--white-color);
}

.explore-item-tags ul li .btn-default::before{
	color: var(--primary-color);
}

.explore-item-tags ul li .btn-default:hover:before{
	color: var(--white-color);
}

.explore-item-tags ul li .btn-default::after{
    background: var(--accent-color);
}

/************************************/
/***    10. Our Clients css       ***/
/************************************/

.exclusive-partners{
	padding: 100px 0;
}

.partners-logo{
	background-color: var(--secondary-color);
	border-radius: 20px;
	margin-bottom: 30px;
}

/************************************/
/***    11. Testimonials css      ***/
/************************************/

.clients-testimonials{
	background-color: var(--secondary-color);
	padding: 100px 0;
}

.testimonial-item{
    background-color: var(--white-color);
	border-radius: 40px;
    padding: 50px;
	height: 100%;
}

.testimonial-rating{
	margin-bottom: 20px;
}

.testimonial-content{
    margin-bottom: 20px;
}

.testimonial-body{
	display: flex;
	align-items: center;
}

.testimonial-body img{
	width: 60px;
	height: 60px;
	border-radius: 50%;
	margin-right: 20px;
}

.testimonial-author-title h2{
	font-size: 22px;
	text-transform: capitalize;
	margin-bottom: 10px;
}

.testimonial-author-title p{
	margin: 0;
}

.testimonial-slider .swiper-pagination{
  position: fixed !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  bottom: 1cm !important;
  z-index: 9999;
  width: auto;
  display: flex;
  justify-content: center;
}

.hero-carousel,
.hero-slider,
.testimonial-slider .swiper-container {
  position: relative;
}

.testimonial-slider .swiper-pagination .swiper-pagination-bullet{
  width: 16px;
  height: 16px;
  background: #ccc;
  opacity: 1;
  margin: 0 8px !important;
  border-radius: 50%;
  transition: background 0.3s;
}

.testimonial-slider .swiper-pagination .swiper-pagination-bullet-active{
  background: #333;
}

/************************************/
/***    12. Latest Post css       ***/
/************************************/

.latest-news{
	padding: 100px 0 70px;
}

.blog-item{
	position: relative;
	overflow: hidden;
	background-color: var(--secondary-color);
	border-radius: 40px;
	padding: 10px;
	height: calc(100% - 30px);
    margin-bottom: 30px;
}

.post-featured-image{
	border-radius: 40px;
	overflow: hidden;
}

.post-featured-image img{
	border-radius: 40px;
	transition: all 0.5s ease-out;
}

.blog-item:hover .post-featured-image img{
	transform: scale(1.1);
}

.post-item-body{
	margin: 20px
}

.post-item-body h2{
	display: block;
	line-height: 1.4em;
	font-size: 22px;
}

.post-item-body p{
	margin-bottom: 15px;
}

.post-item-body p a,
.post-item-body h2 a{
	color: inherit;
}

.post-item-body .btn-readmore{
	position: relative;
	color: var(--accent-color);
	text-transform: capitalize;
	font-weight: 700;
	transition: 0.3s ease-in-out;
}

.post-item-body .btn-readmore:hover{
	color: var(--primary-color);
}

.post-item-body .btn-readmore::before{
	content: '\f062';
    position: absolute;
    top: 50%;
    right: 0;
    bottom: 0;
    font-family: 'FontAwesome';
    font-size: 16px;
    font-weight: 900;
    transition: 0.3s ease-in-out;
    background: transparent;
    color: var(--accent-color);
    transform: translate(20px, -50%) rotate(45deg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.post-item-body .btn-readmore:hover:before{
	color: var(--primary-color);
	transform: translate(20px, -50%) rotate(90deg);
}

/************************************/
/***        13. Footer css        ***/
/************************************/

.main-footer{
	background-color: var(--secondary-color);
	padding: 80px 0 0 !important;
}

.mega-footer{
	margin-bottom: 40px !important;
}

.footer-about img{
	margin-bottom: 0 !important;
	display: block;
}

/* Standard logo size for footer */
.main-footer img {
  width: 250px;
  height: 80px;
  object-fit: contain;
}

.footer-about p{
	margin-top: 0 !important;
}

.footer-about ul{
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
}

.footer-about ul li{
	margin-bottom: 15px !important;
}

.footer-about ul li:last-child{
	margin-bottom: 0 !important;
}

.footer-about ul li a{
	font-size: 22px !important;
	font-weight: 700 !important;
	color: var(--primary-color) !important;
	text-transform: capitalize !important;
	margin-bottom: 20px !important;
}

.footer-links h2{
	font-size: 22px !important;
	color: var(--primary-color) !important;
	text-transform: capitalize !important;
	margin-bottom: 20px !important;
}

.footer-links ul{
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
}

.footer-links ul li{
	margin-bottom: 15px !important;
	color: var(--text-color) !important;
	text-transform: capitalize !important;
	transition: all 0.3s ease-in-out !important;
}

.footer-links ul li:hover{
	color: var(--accent-color) !important;
}

.footer-links ul li:last-child{
	margin-bottom: 0 !important;
}

.footer-links ul li a{
	color: inherit !important;
}

.footer-links p {
  margin-bottom: 10px !important;
  color: inherit !important;
  font-size: 16px !important;
}

.footer-copyright{
	padding: 20px 0 !important;
	border-top: 1px solid var(--divider-color) !important;
}

.footer-copyright-text p{
	margin: 0 !important;
}

.footer-policy-links ul{
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	text-align: end !important;
}

.footer-policy-links ul li{
	display: inline-block !important;
	text-transform: capitalize !important;
	margin-right: 30px !important;
}

.footer-policy-links ul li:last-child{
	margin-right: 0 !important;
}

.footer-policy-links ul li.highlighted{
	font-weight: 700 !important;
}

.footer-policy-links ul li a{
	color: var(--text-color) !important;
}

/* Additional Footer Styles */
.main-footer .footer-links ul li:hover {
    color: #5D56F1 !important;
}
.main-footer .footer-links p, .main-footer .footer-links ul li, .main-footer .footer-about p {
    color: #9C9FA6 !important;
}
.main-footer address, #footer address {
    text-align: left !important;
    text-justify: initial !important;
    color: inherit !important;
}
.main-footer .footer-links address, #footer .footer-links address {
    color: inherit !important;
    font-style: normal;
}

/************************************/
/***    14. About us page css     ***/
/************************************/

.page-header{
	position: relative;
	background: var(--secondary-color);
	padding: 180px 0;
}

.page-header::before{
	content: '';
	position: absolute;
	background-image: url(../images/page-header-bg.png);
	background-repeat: no-repeat;
	background-position: top right;
	right: 0;
	top: 0;
	width: 100%;
	height: 100%;
}

.page-header-box{
	position: relative;
	z-index: 1;
	text-align: center;
}

.page-header-box h1{
    font-size: 70px;
	letter-spacing: -0.05em;
    margin-bottom: 20px;
}

.page-header-box ol{
	display: inline-flex;
    margin-bottom: 0;
	justify-content: center;
	border: 2px solid var(--accent-color);
	border-radius: 100px;
	padding: 6px 20px;
}

.page-header-box ol li.breadcrumb-item{
    color: var(--accent-color);
	text-transform: capitalize;
}

.page-header-box ol li.breadcrumb-item a{
    color: inherit;
}

.page-header-box ol .breadcrumb-item+.breadcrumb-item::before{
    color: var(--accent-color);
}

.page-about{
	padding: 100px 0;
}

.page-about-image{
	position: relative;
	margin-right: 20px;
	padding-bottom: 75px;
}

.about-img-2{
	position: absolute;
	bottom: 0;
	right: 0;
}

.about-img-1 img{
	border-radius: 40px;
}

.about-img-2 img{
	border-radius: 40px;
	border: 5px solid var(--white-color);
}

.work-experience{
	position: absolute;
	top: 30px;
	left: -50px;
	background-color: var(--accent-color);
	border-radius: 20px;
	display: inline-flex;
	align-items: center;
	padding: 20px;
}

.work-experience-icon{
	margin-right: 15px;
}

.work-experience-content h3{
	font-size: 40px;
	color: var(--white-color);
	text-align: left;
	margin-bottom: 5px;
}

.work-experience-content p{
	font-size: 18px;
	color: var(--white-color);
	margin: 0;
}

.page-about .about-content .section-title{
	margin-bottom: 30px;
}

.overview-company{
	background-color: var(--secondary-color);
	padding: 100px 0 70px;
}

.counter-box{
	background-color: var(--white-color);
	border-radius: 40px;
	text-align: center;
	padding: 30px;
	margin-bottom: 30px;
}

.counter-box h3{
	font-size: 28px;
	margin-bottom: 10px;
    line-height: 1.7em;
}

.counter-box h3 em,
.counter-box h3 span{
	font-size: 56px;
	font-style: normal;
    padding: 0;
    margin: 0;
}

.counter-box p{
	margin: 0;
}

.our-team{
	padding: 100px 0 70px;
}

.team-member-item{
	margin-bottom: 30px;
}

.team-member-item .team-image{
    position: relative;
    overflow: hidden;
	border-radius: 40px;
	margin-bottom: 20px;
}

.team-member-item .team-image img{
	width: 100%;
	border-radius: 40px;
	transition: all 0.5s ease-in-out;
}

.team-member-item:hover .team-image img{
    transform: scale(1.1);
}

.team-image .our-team-social-icon{
    position: absolute;
    left: 0;
    right: 0;
    bottom: -30px;
    opacity: 0;
    transition: all 0.3s ease-out;
    z-index: 2;
}

.team-member-item:hover .team-image .our-team-social-icon{
    bottom: 0;
    opacity: 1;
}

.our-team-social-icon ul{
    list-style-type: none;
    padding: 0 20px 30px;
    margin: 0;
    text-align: center;
}

.our-team-social-icon ul li{
    display: inline-block;
    text-align: center;
    margin-right: 10px;
}

.our-team-social-icon ul li:last-child{
	margin-right: 0;
}

.our-team-social-icon ul li a{
    display: block;
}

.our-team-social-icon ul li a i{
    background: var(--accent-color);
    border-radius: 8px;
    color: var(--white-color);
    font-size: 22px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
	transition: all 0.3s ease-out;
}

.our-team-social-icon ul li a i:hover{
	background: var(--white-color);
    color: var(--accent-color);
}

.team-body{
	display: flex;
    flex-wrap: wrap;
    align-items: center;
	justify-content: space-between;
}

.team-content{
	width: calc(100% - 60px);
}

.team-content h3{
	font-size: 24px;
	margin-bottom: 5px;
}

.team-content p{
	margin: 0;
}

.team-icon a{
    background: var(--accent-color);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
	transition: all 0.3s ease-out;
}

.scrolling-ticker{
    border-top: 3px solid #e1e4eb;
                padding: 8px 0;
        color: var(--white-color);
        background-color: var(--accent-color);
                position: sticky;
                top: 80px;
                z-index: 9999;
                margin-top: 16px;
}

.scrolling-ticker-box{
	--gap: 20px;
	position: relative;
	display: flex;
	overflow: hidden;
	user-select: none;
	gap: var(--gap);
}

.scrolling-content{
	flex-shrink: 0;
	display: flex;
	gap: var(--gap);
	min-width: 100%;
        animation: scroll 43s linear infinite;
}

.scrolling-content span{
	display: inline-flex;
	align-items: center;
	font-family: var(--accent-font);
            font-size: 23px;
	line-height: 1.4em;
	font-weight: 700;
}

@keyframes scroll{
	from{
		transform: translateX(0);
	}

	to{
		transform: translateX(calc(-100% - var(--gap)));
	}
}

.scrolling-content span i{
	font-size: 8px;
	color: var(--white-color);
	margin-right: 20px;
}

.clients-testimonials.about-testimonials{
	background-color: var(--white-color);
}

.clients-testimonials.about-testimonials .testimonial-item{
    background-color: var(--secondary-color);
}

.clients-testimonials.about-testimonials .testimonial-slider .swiper-pagination .swiper-pagination-bullet{
    background: var(--secondary-color);
}

.clients-testimonials.about-testimonials .testimonial-slider .swiper-pagination .swiper-pagination-bullet-active{
    background-color: var(--accent-color);
}

/************************************/
/***    15. Services Page css     ***/
/************************************/

.our-services.page-service{
    background-color: var(--white-color);
}

.our-services.page-service .service-item{
    background-color: var(--secondary-color);
}

.our-services.service-page{
	background-color: var(--white-color);
}

.our-services.service-page .service-item{
	background-color: var(--secondary-color);
}

/************************************/
/***    16. Portfolio Page css    ***/
/************************************/

.our-projects{
	padding: 100px 0 70px;
}

.our-projects-nav{
	margin-bottom: 50px;
}

.our-projects-nav ul{
	list-style: none;
	text-align: center;
	padding: 0;margin: 0;
}

.our-projects-nav ul li{
	display: inline-block;
	background: var(--secondary-color);
	color: var(--primary-color);
    text-transform: capitalize;
    padding: 15px 20px 15px 20px;
	margin-right: 20px;
    border-radius: 100px;
    transition: 0.4s ease-in-out;
}

.our-projects-nav ul li:last-child{
	margin-right: 0;
}

.our-projects-nav ul li:hover{
	background-color: var(--accent-color);
	color: var(--white-color);
}

.our-projects-nav ul li a{ 
    font-size: 16px;
    font-weight: 700;
    line-height: 1.1em;
    color: inherit;    
}

/************************************/
/***     17. Blog Archive css     ***/
/************************************/

.latest-news.our-blog{
    padding: 100px 0;
}

.post-pagination {
    margin-top: 30px;
    text-align: center;
}

.post-pagination ul {
    justify-content: center;
    padding: 0;
    margin: 0;
}

.post-pagination ul li a, .post-pagination ul li span {
    display: flex;
    text-decoration: none;
    justify-content: center;
    align-items: center;
    background: var(--accent-color);
    color: var(--white-color);
    width: 40px;
    height: 40px;
    margin: 0 4px;
    border-radius: 10px;
    font-weight: 700;
    transition: all 0.3s ease-out;
}

.post-pagination ul li.active a, 
.post-pagination ul li a:hover {
    background: var(--secondary-color);
    color: var(--accent-color);
}

/************************************/
/***   18. Contact Us Page css    ***/
/************************************/

.contact-information{
	padding: 100px 0 50px;
}

.contact-item{
	background-color: var(--secondary-color);
	border-radius: 40px;
	padding: 20px;
	height: 100%;
}

.contact-content{
	padding: 20px;
}

.contact-content-title{
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--divider-color);;
    padding-bottom: 25px;
    margin-bottom: 25px;
}

.contact-content-title h2{
    font-size: 26px;
	text-transform: capitalize;
}

.contact-content-title a{
    background-color: var(--accent-color);
    color: var(--white-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
}

.contact-item p{
	width: 100%;
	max-width: 280px;
	margin: 0;
}

.contact-image{
    border-radius: 30px;
    overflow: hidden;
}

.contact-image img{
    border-radius: 30px;
    transition: all 0.5s ease-out;
}

.contact-item:hover .contact-image img{
    transform: scale(1.1);
}

.contact-us{
	padding: 50px 0;
}

.contact-details .section-title{
	margin-bottom: 30px;
	width: 100%;
	max-width: 525px;
}

.contact-detail-body p{
	margin-bottom: 35px;
}

.contact-detail-body h3{
	font-size: 40px;
	text-transform: capitalize;
	letter-spacing: -0.05em;
	margin-bottom: 25px;
}

.contact-detail-body ul{
	list-style: none;
	padding: 0;
	margin: 0;
}

.contact-detail-body ul li{
	display: inline-block;
	margin-right: 12px;
}

.contact-detail-body ul li:last-child{
	margin-right: 0;
}

.contact-detail-body ul li a{
	background-color: var(--accent-color);
	border: 2px solid var(--accent-color);
	width: 50px;
	height: 50px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease-in-out;
}

.contact-detail-body ul li a:hover{
	background-color: var(--white-color);
}

.contact-detail-body ul li a i{
    font-size: 22px;
    color: var(--white-color);
    transition: all 0.3s ease-in-out;
}

.contact-detail-body ul li a:hover i{
	color: var(--accent-color);
}

.contact-form-box{
	background-color: var(--secondary-color);
	border-radius: 40px;
	padding: 40px;
}

.contact-form .form-control{
	background-color: var(--white-color);
	border-radius: 10px;
	border: none;
	box-shadow: none;
	padding: 12px 20px;
}

.contact-form .form-control::placeholder{
	font-size: 16px;
	font-weight: 500;
	text-transform: capitalize;
}

.help-block.with-errors ul{
	margin-bottom: 0;
}

.help-block.with-errors ul li{
    color: var(--error-color);
    font-weight: 500;
    font-size: 14px;
}

.google-map{
	padding: 50px 0 100px;
}

.google-map iframe{
	width: 100%;
	height: 400px;
	border-radius: 40px;
    filter: grayscale(100%);
    transition: all 0.3s ease-out;
}

.google-map iframe:hover{
    filter: grayscale(0%);
}

/************************************/
/***     19. Blog Single css      ***/
/************************************/

.post-single-meta ul{
	padding: 0;
	margin: 0;
	list-style: none;
}

.post-single-meta ul li{
	display: inline-block;
	margin-right: 30px;
}

.post-single-meta ul li:last-child{
	margin-right: 0;
}

.post-single-meta ul li i{
	font-size: 16px;
	color: var(--accent-color);
	margin-right: 10px;
}

.page-single-post{
	padding: 100px 0 50px;
}

.post-single-image{
	max-width: 1200px;
	margin: 0 auto 40px;
	overflow: hidden;
}

.post-single-image img{
    border-radius: 40px;
}

.post-content{
	max-width: 1100px;
	margin: 0 auto;
}

.post-entry{
	border-bottom: 1px solid var(--divider-color);;
	margin-bottom: 30px;
}

.post-entry h2{
	font-size: 40px;
	margin-bottom: 30px;
}

.post-entry ul{
	padding: 0;
	margin: 0 0 30px;
	list-style: none;
}

.post-entry ul li{
	position: relative;
	padding-left: 30px;
	margin-bottom: 20px;
	font-size: 18px;
	font-weight: 700;
	color: var(--primary-color);
}

.post-entry ul li:before{
	content: '\f138';
	font-family: "Font Awesome 6 Free";
	color: var(--accent-color);
	font-size: 20px;
	font-weight: 700;
	position: absolute;
	top: 0;
	left: 0;
}

.post-entry ul li:last-child{
	margin-bottom: 0;
}

.post-entry blockquote{
	background: var(--secondary-color);
	border-radius: 30px;
	padding: 40px;
	margin-bottom: 30px;
}

.post-entry blockquote p{
	background: url(../images/icon-blockquote.svg) no-repeat 0px 6px;
	font-size: 26px;
	color: var(--primary-color);
	font-weight: 700;
	line-height: 1.3em;
	padding-left: 70px;
}

.post-entry blockquote p:last-child{
	margin-bottom: 0;
}

.post-tags .btn-default{
	padding: 12px 20px;
	font-weight: 500;
	margin-right: 15px;
	border: none;
	background-color: var(--secondary-color);
	color: var(--primary-color);
}

.post-tags .btn-default:hover{
	color: var(--white-color);
}

.post-tags .btn-default:last-child{
	margin-right: 0;
}

.post-tags .btn-default::before{
	display: none;
}

.post-tags .btn-default::after{
	background-color: var(--accent-color);
}

.post-social-links{
	text-align: right;
}

.post-social-links ul{
    list-style: none;
    padding: 0;
    margin: 0;
}

.post-social-links ul li{
    display: inline-block;
    margin-right: 12px;
}

.post-social-links ul li:last-child{
	margin-right: 0;
}

.post-social-links ul li a{
    background-color: var(--accent-color);
    border: 2px solid var(--accent-color);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease-in-out;
}

.post-social-links ul li a:hover{
    background-color: var(--white-color);
}

.post-social-links ul li a i{
    font-size: 22px;
    color: var(--white-color);
    transition: all 0.3s ease-in-out;
}

.post-social-links ul li a:hover i{
	color: var(--accent-color);
}

.latest-news.related-articles{
	padding: 50px 0 70px;
}

/************************************/
/***   20. Services Single css    ***/
/************************************/

.page-service-single{
	padding: 100px 0;
}

.service-featured-image{
	margin-bottom: 30px;
}

.service-featured-image img{
	border-radius: 40px;
}

.services-list-box{
	background-color: var(--bs-light-bg-subtle);
	border-radius: 40px;
	padding: 40px;
}

.services-list-box .icon-box{
	margin-bottom: 20px;
}

.services-list-box h3{
	font-size: 26px;
	margin-bottom: 30px;
    text-transform: capitalize;
}

.services-list-box ul{
    padding: 0;
    margin: 0 0 30px;
    list-style: none;
}

.services-list-box ul li{
    position: relative;
    padding-left: 25px;
    margin-bottom: 20px;
}

.services-list-box ul li:before{
    content: '\f138';
    font-family: "Font Awesome 6 Free";
    color: var(--accent-color);
    font-size: 14px;
    font-weight: 900;
    position: absolute;
    top: 1px;
    left: 0;
}

.services-list-box ul li:last-child{
	margin-bottom: 0;
}

.services-list-box ul li a{
	color: var(--text-color);
	transition: all 0.3s ease-in-out;
}

.services-list-box ul li:hover a{
	color: var(--accent-color);
}

.services-list-box .btn-default{
	width: 100%;
}

.why-choose-us.why-services{
    background-color: var(--bs-light-bg-subtle);
    padding: 100px 0 70px;
}

.why-choose-us.why-services .section-title p{
	margin-bottom: 0;
	margin-top: 30px;
}

.your-choice{
	padding: 100px 0 70px;
}

.your-choice-item{
	background-color: var(--bs-light-bg-subtle);
	border-radius: 40px;
	padding: 40px;
	height: calc(100% - 30px);
	margin-bottom: 30px;
}

.your-choice-title{
	display: flex;
    align-items: center;
    justify-content: flex-start;
    border-bottom: 1px solid var(--divider-color);;
    padding-bottom: 25px;
    margin-bottom: 25px;
}

.your-choice-title h2{
    font-size: 26px;
    width: 100%;
    max-width: 200px;
}

.your-choice-item ul{
	list-style: none;
    padding: 0;
    margin: 0;    
}

.your-choice-item ul li{
    position: relative;
    padding-left: 25px;
    margin-bottom: 15px;
}

.your-choice-item ul li:before{
    content: '\f138';
    font-family: "Font Awesome 6 Free";
    color: var(--accent-color);
    font-size: 14px;
    font-weight: 900;
    position: absolute;
    top: 1px;
    left: 0;
}

.your-choice-item ul li:last-child{
	margin-bottom: 0;
}

.your-choice-item ul li a{
	color: inherit;
}

.service-faqs{
	padding: 100px 0;
}

.ask-question{
	background-color: var(--secondary-color);
	border-radius: 40px;
	padding: 40px 30px;
    position: sticky;
    top: 110px;
}

.ask-question-content{
	margin-bottom: 30px;
}

.ask-question-content h3{
	font-size: 28px;
	margin-bottom: 20px;
}

.ask-question-content p{
	margin: 0;
}

.ask-contact-list{
	display: flex;
	align-items: center;
	background-color: var(--white-color);
	border-radius: 100px;
	padding: 10px;
	margin-bottom: 20px;
}

.ask-contact-list:last-child{
	margin-bottom: 0;
}

.ask-contact-list .icon-box a{
	background-color: var(--accent-color);
	border-radius: 50%;
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
}

.ask-contact-list .icon-box a img{
	width: 14px;
}

.ask-contact-list a{
	margin: 0;
	font-weight: 700;
	color: var(--text-color);
	width: calc(100% - 40px);
	margin-left: 10px;
}

.ask-contact-list a span{
	color: var(--primary-color);
}

/******************************************/
/****     21. Portfolio Singe css      ****/
/******************************************/

.page-project-single{
	padding: 100px 0 50px;
}

.project-feature-image{
	
	margin-bottom: 50px;
}

.project-feature-image img{
	border-radius: 40px;
}

.project-sidebar{
	padding-right: 50px;
    position: sticky;
    top: 120px;
}

.about-project-box{
	background: var(--secondary-color);
    text-align: center;
	padding: 40px;
	border-radius: 30px;
}

.about-project-box h2{
	font-size: 24px;
	margin-bottom: 30px;
}

.project-info-box{
	border-bottom: 1px solid var(--divider-color);;
	padding-bottom: 30px;
	margin-bottom: 30px;
}

.project-info-box:last-child{
	border-bottom: none;
	padding-bottom: 0;
	margin-bottom: 0;
}

.project-info-box .project-icon{
	margin-bottom: 15px;
}

.project-info-box p{
	margin-bottom: 10px;
}

.project-info-box h3{
	font-size: 20px;
}

.project-entry h2{
	font-size: 40px;
	text-transform: capitalize;
	margin-bottom: 40px;
}

.project-entry ul{
	padding: 0;
	margin: 0;
	list-style: none;
}

.project-entry ul li{
	position: relative;
	padding-left: 30px;
	margin-bottom: 20px;
	font-size: 18px;
	font-weight: 700;
	color: var(--primary-color);
}

.project-entry ul li:before{
	content: '\f138';
	font-family: "Font Awesome 6 Free";
	color: var(--accent-color);
	font-size: 20px;
	font-weight: 700;
	position: absolute;
	top: 0;
	left: 0;
}

.project-entry ul li:last-child{
	margin-bottom: 0;
}

.project-details-gallery{
	padding: 50px 0 100px;
}

.project-gallery-items{
	display: flex;
	flex-wrap: wrap;
}

.project-gallery-items .project-gallery-item{
	width: calc(33.33% - 14px);
	margin-right: 20px;
}

.project-gallery-items .project-gallery-item:nth-of-type(3n + 3){
	margin-right: 0;
}

/************************************/
/***      22. Faqs Page css       ***/
/************************************/

.faq-section{
	padding: 100px 0;
}

.faq-accordion .accordion-item{
	margin-bottom: 30px;
}	

.faq-accordion .accordion-item:last-child{
	margin-bottom: 0;
}

.accordion-header .accordion-button{
	font-size: 22px;
	font-weight: 700;
	background-color: var(--secondary-color);
	color: var(--primary-color);
	padding: 12px 60px 12px 20px;
	border-radius: 15px !important;
	transition: all 0.3s ease-in-out;
}

.faq-accordion .accordion-button:not(.collapsed){
   background-color: var(--accent-color);
   color: var(--white-color);
}

.accordion-header .accordion-button.collapsed{
	background-color: var(--secondary-color);
	transition: all 0.3s ease-in-out;
}

.accordion-header .accordion-button::after {
	content: '\f106'; /* up arrow */
	font-family: 'Font Awesome 6 Free';
	font-weight: 900;
	font-size: 18px;
	background-image: none; /* Remove default background image */
	width: auto;
	height: auto;
	position: absolute;
	right: 30px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--white-color);
	transition: transform 0.2s ease-in-out, color 0.2s ease-in-out;
}

.accordion-header .accordion-button.collapsed::after {
	content: '\f107'; /* down arrow */
	color: var(--accent-color);
}

/* Remove default bootstrap styling */
.accordion-button:not(.collapsed)::after {
	background-image: none;
	transform: translateY(-50%);
}

.accordion-button::after {
	background-image: none;
}

.accordion-body{
	padding: 10px 60px 20px 20px;
}

.accordion-body p{
	margin: 0;
}

/************************************/
/***        23. 404 Page css      ***/
/************************************/

.error-page{
    text-align: center;
    padding: 100px 0;
}

.error-page-image{
    margin-bottom: 40px;
}

.error-page-content-heading{
    margin-bottom: 40px;
}

.error-page-content-heading h2{
    font-size: 70px;
    margin-bottom: 30px;
}

/************************************/
/***      24. Responsive css      ***/
/************************************/

@media only screen and (max-width: 1024px){
	.main-menu ul li{
		margin-left: 0;
	}

    .service-content-title a{
        width: 60px;
        height: 50px;
    }
}

@media only screen and (max-width: 991px){

    .section-row{
        margin-bottom: 40px;
    }

    .section-title h3{
        font-size: 18px;
    }

    .section-title h1,
    .section-title h2{
        font-size: 46px;
    }

    .btn-default::before{
        font-size: 16px;
    }

    #magic-cursor{
        display: none !important;
    }

    .slicknav_nav li, .slicknav_nav ul{
        display: block;
    }

	.responsive-menu,
    .navbar-toggle{
        display: block;
    }

	header.main-header .header-sticky{
		padding: 20px 0;
	}

    .header-btn .btn-default{
        display: none;
    }

    .hero{
        background-image: none;
        padding: 50px 0;
    }

    .hero-video-image{
        text-align: center;
        margin-top: 40px;
    }

    .hero-play-button{
        left: 50%;
        transform: translate(-50%, -50%);
        top: 0;
    }

    .hero-layout-2 .hero-content {
        margin-bottom: 0px;
        max-width: 100%;
    }

    .hero-content .section-title{
        margin-bottom: 20px;
    }

    .hero-body{
        margin-bottom: 20px;
        max-width: 100%;
    }

    .hero-layout-2 .section-title h1 {
        font-size: 60px;
    }

    .hero-layout-2 .hero-body {
        margin-bottom: 20px;
    }

    .about-us{
        padding: 50px 0;
    }

    .about-image{
        text-align: center;
        margin-bottom: 90px;
        padding-right: 0;
    }

    .about-consultation{
        right: 50%;
        top: auto;
        transform: translate(50%, -50%);
    }

    .about-content ul{
        margin: 0 0 10px;
    }

    .about-content ul li{
        font-size: 16px;
    }
    
    .about-content ul li:before{
        font-size: 18px;
    }

    .our-services{
        padding: 50px 0 20px;
    }

    .service-content{
        padding: 10px 10px 20px;
    }

    .service-content-title h2{
        font-size: 24px;
        max-width: 180px;
    }

    .service-content-title a{
        width: 50px;
        height: 50px;
    }

    .service-content-title a img{
        width: 18px;
    }

    .service-content-title{
        padding-bottom: 20px;
        margin-bottom: 20px;
    }

    .our-work{
        padding: 50px 0 20px;
    }

    .works-item{
        padding: 20px 20px 30px 20px;
    }

    .works-image{
        margin-bottom: 20px;
    }

    .works-content h2{
        font-size: 24px;
        margin-bottom: 10px;
    }

    .works-content{
        padding: 0 0 0 10px;
    }

    .why-choose-us{
        padding: 50px 0;
    }

    .why-choose-us-item{
        padding: 30px;
    }

    .why-choose-us-item .icon-box{
        margin-bottom: 20px;
    }

    .why-choose-us-item h3{
        font-size: 24px;
        margin-bottom: 10px;
    }

    .why-us-explore-item{
        padding: 40px;
    }

    .why-us-section-title{
        padding-right: 20px;
    }

    .why-us-explore-item .section-title{
        margin-bottom: 20px;
        max-width: 100%;
    }

    .explore-item-icon{
        top: 70px;
        right: 10px;
    }

    .explore-item-icon img{
        width: 50px;
    }

    .explore-item-content p{
        margin-bottom: 20px;
    }

    .explore-item-tags {
        text-align: start;
    }

    .exclusive-partners{
        padding: 50px 0 20px;
    }

    .partners-logo{
        padding: 20px 30px;
    }

    .clients-testimonials{
        padding: 50px 0;
    }

    .testimonial-item{
        padding: 30px;
    }

    .testimonial-author-title h2{
        font-size: 20px;
        margin-bottom: 5px;
    }

    .latest-news{
        padding: 50px 0 20px;
    }

    .post-item-body h2{
        font-size: 20px;
    }

    .main-footer{
        padding: 40px 0 0;
    }

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

    .footer-about p,
    .footer-about img{
        margin-bottom: 15px;
    }

    .footer-about ul li a{
        font-size: 20px;
    }

    .footer-links h2{
        font-size: 20px;
    }

    .footer-links ul li{
        margin-bottom: 10px;
    }

    .footer-copyright-text{
        text-align: center;
        margin-bottom: 10px;
    }

    .footer-policy-links ul{
        text-align: center;
    }

    .page-header{
        padding: 100px 0;
    }

    .page-header::before{
        background-size: cover;
    }

    .page-header-box h1{
        font-size: 56px;
        margin-bottom: 10px;
    }

    .page-about{
        padding: 50px 0 20px;
    }

    .page-about-image{
        margin-right: 0;
        padding-bottom: 60px;
        margin-bottom: 20px;
        text-align: center;
    }

    .about-img-2 img{
        width: 300px;
    }

    .work-experience{
        left: 0;
        padding: 15px;
    }

    .work-experience-content h3{
        font-size: 34px;
    }

    .work-experience-content p{
        font-size: 16px;
    }

    .overview-company{
        padding: 50px 0 20px;
    }

    .counter-box h3{
        font-size: 24px;
    }

    .counter-box h3 em, 
    .counter-box h3 span{
        font-size: 40px;
    }

    .our-team{
        padding: 50px 0 20px;
    }

    .team-content h3{
        font-size: 22px;
    }

    .scrolling-content span{
        font-size: 34px;
    }

	.our-projects{
        padding: 50px 0 20px;
    }

    .our-projects-nav{
        margin-bottom: 20px;
    }

    .our-projects-nav ul{
        text-align: start;
    }

    .our-projects-nav ul li{
        margin-bottom: 20px;
    }

    .latest-news.our-blog{
        padding: 50px 0;
    }

    .our-projects-nav ul li:nth-child(3n + 3){
        margin-right: 0px;
    }

    .post-pagination {
        margin-top: 10px;
    }

    .contact-information{
        padding: 50px 0 25px;
    }

    .contact-item{
        padding: 10px;
    }
    
    .contact-content{
        padding: 10px 10px 20px;
    }

    .contact-content-title{
        padding-bottom: 20px;
        margin-bottom: 20px;
    }

    .contact-content-title h2{
        font-size: 24px;
    }
    
    .contact-content-title a{
        width: 50px;
        height: 50px;
    }

    .contact-content-title a img{
        width: 18px;
    }

    .contact-item p{
        max-width: 100%;
    }

    .contact-us{
        padding: 25px 0;
    }

    .contact-details{
        max-width: 100%;
        margin-bottom: 30px;
    }

    .contact-details .section-title{
        margin-bottom: 20px;
        max-width: 100%;
    }

    .contact-detail_body p{
        margin-bottom: 20px;
    }

    .contact-detail_body h3{
        font-size: 34px;
        margin-bottom: 20px;
    }

    .contact-detail_body ul li a{
        width: 40px;
        height: 40px;
    }

    .contact-detail_body ul li a i{
        font-size: 20px;
    }

    .contact-form-box{
               padding: 30px;
    }

   

    .google-map{
        padding: 25px  0 50px;
    }

    .google-map iframe{
        height: 250px;
    }

	.page-single-post{
        padding: 50px 0 25px;
    }

    .post-featured-image{
        max-width: 100%;
        margin-bottom: 20px;
    }

    .post-content{
        max-width: 100%;
    }

    .post-entry h2{
        font-size: 34px;
        margin-bottom: 20px;
    }

    .post-entry blockquote p{
        font-size: 22px;
    }

    .post-entry blockquote{
        padding: 30px;
    }

    .post-entry ul li:before{
        font-size: 18px;
    }

    .post-entry ul li{
        margin-bottom: 15px;
        font-size: 16px;
    }

    .post-tags{
        margin-bottom: 20px;
    }

    .post-social-links{
        text-align: left;
    }

    .post-social-links ul li a{
        width: 40px;
        height: 40px;
    }

    .post-social-links ul li a i{
        font-size: 20px;
    }

    .latest-news.related-articles{
        padding: 25px 0 20px;
    }

	.page-service-single{
        padding: 50px 0;
    }

    .services-list-box{
        padding: 20px;
    }

    .services-list-box h3{
        font-size: 22px;
    }

    .why-choose-us.why-services .section-title p{
        margin-bottom: 0;
        margin-top: 20px;
    }

    .your-choice-title h2{
        font-size: 22px;
        max-width: 180px;
    }

    .ask-question-content h3{
        font-size: 20px;
        margin-bottom: 10px;
    }

    .ask-contact-list a{
        display: inline-grid;
    }

    .project-info-box h3{
        font-size: 16px;
    }

    .project-entry h2{
        font-size: 28px;
    }

    .project-gallery-items{
        display: block;
    }

    .project-gallery-items .project-gallery-item{
        width: 100%;
        margin-right: 0px;
        margin-bottom: 20px;
    }

    .project-gallery-items .project-gallery-item:nth-child(3n + 3){
        margin-bottom: 0;
    }

	.accordion-header .accordion-button{
        font-size: 18px;
    }

    .error-page-content-heading h2{
        font-size: 30px;
        margin-bottom: 20px;
    }

    .error-page-content-heading{
        margin-bottom: 30px;
    }
}

/* ====== OWASP module styles (moved from services.html) ====== */
/* Inherit application defaults (font, color) */
#owasp-web { font-family: inherit; color: var(--primary-color); }
#owasp-web .module-list { max-height:520px; overflow:auto; border-right:1px solid rgba(0,0,0,0.06); padding-right:12px; }
#owasp-web .module-list .module-item { width:100%; }

@media (min-width:768px) {
    /* Grid: fixed left column for list, flexible right column for content */
    #owasp-web .row { display:grid; grid-template-columns: 320px 1fr; align-items:start; gap:20px; }
    #owasp-web .col-lg-4, #owasp-web .col-md-12 { width:100%; max-width:100%; }
    /* Ensure right card fills available vertical space in the grid column */
    #owasp-web .card { height: 100%; display: flex; flex-direction: column; align-self: stretch; }
    /* Make card-body expand so content uses full right column area */
    #owasp-web .card-body { flex: 1 1 auto; color: var(--text-color) !important; }

    /* On small screens, stack columns and allow card to be full width */
    @media (max-width: 767px) {
        #owasp-web .row { display:block; }
        #owasp-web .module-list { max-height: none; }
        #owasp-web .card { margin-top: 16px; }
    }
}

#owasp-web .module-item { display:flex; align-items:flex-start; gap:12px; padding:12px; border-radius:6px; cursor:pointer; background:transparent; margin-bottom:8px; border:1px solid rgba(0,0,0,0.04); transition:background .12s, transform .08s; }
#owasp-web .module-item:hover, #owasp-web .module-item:focus { background:rgba(0,0,0,0.02); transform:translateY(-2px); outline:none; }
/* Active state: no forced visual highlight. Keep appearance consistent with surrounding UI. */
#owasp-web .module-item.active { background:transparent; color:inherit; border-color:rgba(0,0,0,0.04); box-shadow:none; }

/* Left item header (strong) should be black by default and accent on hover/focus */
#owasp-web .module-item strong { color: var(--primary-color); display:block; }
#owasp-web .module-item:hover strong, #owasp-web .module-item:focus strong, #owasp-web .module-item:focus-visible strong { color: var(--accent-color); }
#owasp-web .module-item strong { display:block; }
#owasp-web .module-item .small { margin-top:4px; }

#owasp-web .card { border-radius:8px; }
#owasp-web .card-body h4 { margin-top:0; color: var(--primary-color); margin-bottom:8px; }
/* Header hover color change to accent (subtle visual feedback) */
#owasp-web .card-body h4:hover { color: var(--accent-color); }
/* Ensure card body doesn't receive focus outline when JS focuses it */
#owasp-web .card-body:focus { outline: none; }
/* Make content occupy full width and render as block elements (three to four lines recommended by content) */
#owasp-web .card-body > * { width: 100%; display: block; }
#owasp-web .card-body .section-desc { margin-bottom:12px; color: var(--text-color) !important; }
#owasp-web .card-body .example div, #owasp-web .card-body .solution div { color: var(--text-color) !important; }
#owasp-web .card-body .example, #owasp-web .card-body .solution { margin-top:12px; }
#owasp-web .card-body .label { font-weight:700; margin-bottom:6px; display:block; }
#owasp-web .card-body .testcases { margin-top:12px; color: var(--text-color) !important; }
#owasp-web .card-body .testcases-list { padding-left:20px; margin:0; color: var(--text-color) !important; }
#owasp-web .card-body .testcases-list li { margin-bottom:4px; color: var(--text-color) !important; }

/* When a topic is selected, make the right-card header bold and accent-coloured with extra spacing */
#owasp-web .owasp-card--active .card-body h4 {
    color: var(--accent-color);
    font-weight: 800;
    margin-bottom: 18px; /* add a little extra breathing room after the header */
}

@media (max-width:767px){
    #owasp-web .module-list { border-right:none; padding-right:0; margin-bottom:16px; }
}

/* Courses section card equal height */
#all-courses .testimonial-item {
    height: 450px;
}