/*!
Theme Name: Associated Insurance
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: associated-insurance
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

Associated Insurance is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* Normalize
--------------------------------------------- */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
	 ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

 @media(min-width: 1400px) {
	.container {
	max-width:1338px!important;
	margin:0 auto;
	}
 }

 :root {
	--white-color: #FFFFFF;
	--yellow-color: #FFD700;
	--green-color: #5F9EA0;
	--green2-color: #40DDB6;
	--purple-color: #803D97;
  }

  .ibm-plex-sans-arabic-thin {
	font-family: "IBM Plex Sans Arabic", serif;
	font-weight: 100;
	font-style: normal;
  }
  
  .ibm-plex-sans-arabic-extralight {
	font-family: "IBM Plex Sans Arabic", serif;
	font-weight: 200;
	font-style: normal;
  }
  
  .ibm-plex-sans-arabic-light {
	font-family: "IBM Plex Sans Arabic", serif;
	font-weight: 300;
	font-style: normal;
  }
  
  .ibm-plex-sans-arabic-regular {
	font-family: "IBM Plex Sans Arabic", serif;
	font-weight: 400;
	font-style: normal;
  }
  
  .ibm-plex-sans-arabic-medium {
	font-family: "IBM Plex Sans Arabic", serif;
	font-weight: 500;
	font-style: normal;
  }
  
  .ibm-plex-sans-arabic-semibold {
	font-family: "IBM Plex Sans Arabic", serif;
	font-weight: 600;
	font-style: normal;
  }

html {
	line-height: 1.15;
	-webkit-text-size-adjust: 100%;
}

/* icons */


/* removed the justify since we updated the font */
/*p {
	text-align:justify!important;
}*/

/* fix and svg of the social media icons */

.bi-linkedin::before {
    content: '';
    display: inline-block;
    width: 1em; /* Adjust as needed */
    height: 1em;
    background: url('./html/images/icons/linkedin.svg') no-repeat center;
    background-size: contain;
}

.bi-facebook::before {
    content: '';
    display: inline-block;
    width: 1em; /* Adjust as needed */
    height: 1em;
    background: url('./html/images/icons/facebook.svg') no-repeat center;
    background-size: contain;
}


/* end the fix */

/* Sections
	 ========================================================================== */

/**
 * Remove the margin in all browsers.
 */
 /* Inter font styles with different weights */
.inter-heading {
	font-family: "IBM Plex Sans Arabic", serif;
	font-optical-sizing: auto;
	font-weight: 700; /* Bold weight for headings */
	font-style: normal;
	font-variation-settings:
	  "slnt" 0;
  }
  
  .inter-body {
	font-family: "IBM Plex Sans Arabic", serif;
	font-optical-sizing: auto;
	font-weight: 400; /* Regular weight for body text */
	font-style: normal;
	font-variation-settings:
	  "slnt" 0;
  }
  
  .inter-light {
	font-family: "IBM Plex Sans Arabic", serif;
	font-optical-sizing: auto;
	font-weight: 300; /* Light weight for special text */
	font-style: normal;
	font-variation-settings:
	  "slnt" 0;
  }
  
  /* Add more styles as needed */
  
body {
	margin: 0;
	font-family: "IBM Plex Sans Arabic", serif;
	font-optical-sizing: auto;
	font-weight: 400; /* Regular weight for body text */
	font-style: normal;
	font-variation-settings:
	  "slnt" 0;
	  padding-top: 127px; /* Adjust based on navbar height */
}

/**
 * Render the `main` element consistently in IE.
 */
main {
	display: block;
	font-family: "IBM Plex Sans Arabic", serif;
	font-optical-sizing: auto;
	font-weight: 400; /* Regular weight for body text */
	font-style: normal;
	font-variation-settings:
	  "slnt" 0;
}

.subscribe-container .wpcf7 form.invalid .wpcf7-response-output {
    border-color: #fff;
    color: #fff;
}

.subscribe-container .wpcf7 form.sent .wpcf7-response-output {
	border-color: #fff;
    color: #fff;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
 h1,h2,h3,h4,h5,h6 {
	font-family: "IBM Plex Sans Arabic", serif;
	font-optical-sizing: auto;
	font-weight: 700; /* Bold weight for headings */
	font-style: normal;
	font-variation-settings:
	  "slnt" 0;
 }
h1 {
	font-size: 2em;
	margin: 0.67em 0;
	font-family: "IBM Plex Sans Arabic", serif;
	font-optical-sizing: auto;
	font-weight: 700; /* Bold weight for headings */
	font-style: normal;
	font-variation-settings:
	  "slnt" 0;
}

/* Grouping content
	 ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
	box-sizing: content-box;
	height: 0;
	overflow: visible;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
	font-family: "IBM Plex Sans Arabic", serif;
	font-size: 1em;
}

/* Text-level semantics
	 ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */
a {
	background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
	border-bottom: none;
	text-decoration: underline;
	text-decoration: underline dotted;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
	font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
	font-family: "IBM Plex Sans Arabic", serif;
	font-size: 1em;
}

/**
 * Add the correct font size in all browsers.
 */
small {
	font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

/* Embedded content
	 ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */
img {
	border-style: none;
}

/* Forms
	 ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
	font-family: "IBM Plex Sans Arabic", serif;
	font-size: 100%;
	line-height: 1.15;
	margin: 0;
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
	overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
	text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type="button"],
[type="reset"],
[type="submit"] {
	-webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
	border-style: none;
	padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
	outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
	padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *		`fieldset` elements in all browsers.
 */
legend {
	box-sizing: border-box;
	color: inherit;
	display: table;
	max-width: 100%;
	padding: 0;
	white-space: normal;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
	vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
	overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type="checkbox"],
[type="radio"] {
	box-sizing: border-box;
	padding: 0;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
	height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
	-webkit-appearance: textfield;
	outline-offset: -2px;
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
	-webkit-appearance: button;
	font: inherit;
}

/* Interactive
	 ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
	display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
	display: list-item;
}

/* Misc
	 ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */
template {
	display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
	display: none;
}

/* Box sizing
--------------------------------------------- */

/* Inherit box-sizing to more easily change it's value on a component level.
@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
*,
*::before,
*::after {
	box-sizing: inherit;
}

html {
	box-sizing: border-box;
}

/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/

/* Typography
--------------------------------------------- */
body,
button,
input,
select,
optgroup,
textarea {
	color: #404040;
	font-family: "IBM Plex Sans Arabic", serif;
	font-size: 1rem;
	line-height: 1.5;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	clear: both;
}

p {
	margin-bottom: 1.5em;
}

dfn,
cite,
em,
i {
	font-style: italic;
}

blockquote {
	margin: 0 1.5em;
}

address {
	margin: 0 0 1.5em;
}

pre {
	background: #eee;
	font-family: "IBM Plex Sans Arabic", serif;
	line-height: 1.6;
	margin-bottom: 1.6em;
	max-width: 100%;
	overflow: auto;
	padding: 1.6em;
}

code,
kbd,
tt,
var {
	font-family: "IBM Plex Sans Arabic", serif;
}

abbr,
acronym {
	border-bottom: 1px dotted #666;
	cursor: help;
}

mark,
ins {
	background: #fff9c0;
	text-decoration: none;
}

big {
	font-size: 125%;
}

/* Elements
--------------------------------------------- */
body {
	background: #fff;
}

hr {
	background-color: #ccc;
	border: 0;
	height: 1px;
	margin-bottom: 1.5em;
}

ul,
ol {
	margin: 0 0 1.5em 3em;
}

ul {
	list-style: disc;
}

ol {
	list-style: decimal;
}

li > ul,
li > ol {
	margin-bottom: 0;
	margin-left: 1.5em;
}

dt {
	font-weight: 700;
}

dd {
	margin: 0 1.5em 1.5em;
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
	max-width: 100%;
}

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

figure {
	margin: 1em 0;
}

table {
	margin: 0 0 1.5em;
	width: 100%;
}

/* Links
--------------------------------------------- */
a {
	color: var(--white-color);
}



a:hover,
a:focus,
a:active {
	color: var(--purple-color);
}

a:focus {
	outline: thin dotted;
}

a:hover,
a:active {
	outline: 0;
}

/* Forms
--------------------------------------------- */
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	border: 1px solid;
	border-color: #ccc #ccc #bbb;
	border-radius: 3px;
	background: #e6e6e6;
	color: rgba(0, 0, 0, 0.8);
	line-height: 1;
	padding: 0.6em 1em 0.4em;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
	border-color: #ccc #bbb #aaa;
}

button:active,
button:focus,
input[type="button"]:active,
input[type="button"]:focus,
input[type="reset"]:active,
input[type="reset"]:focus,
input[type="submit"]:active,
input[type="submit"]:focus {
	border-color: #aaa #bbb #bbb;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
	border: 1px solid #ddd;
	border-radius: 3px;
	padding: 15px;
	color: #37393F;
	font-family: "IBM Plex Sans Arabic", serif;
	font-size: 1.125rem;
	font-style: normal;
	font-weight: 400;
	line-height: normal;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {
	color: #111;
}

select {
	border: 1px solid #ccc;
}

textarea {
	width: 100%;
}

input#submit, button#load-more {
    background: #803D97;
    color: #fff;
    padding: 21px 61px 22px 61px;
}

button#load-more {
    background: #803D97;
    color: #fff;
	padding: 10px 50px;
}

.wpcf7 form.sent .wpcf7-response-output {
    border-color: #46b450;
    color: #46b450!important;
}

.wpcf7 form.invalid .wpcf7-response-output {
	border-color:red;
	color:red;
}

 .wpcf7 form.unaccepted .wpcf7-response-output, .wpcf7 form.payment-required .wpcf7-response-output {
    border-color: #803D97;
}

.wpcf7 form .wpcf7-response-output.wpcf7-validation-errors {
    margin: 2em 0.5em 1em;
    padding: 0.8em 1em;
    border: 2px solid #FF0000; /* Bright red border for error */
    color: #D8000C!important; /* Slightly darker red for readability */
    background-color: #FFBABA!important; /* Light red background for emphasis */
    border-radius: 4px; /* Smooth border edges */
    font-weight: bold; /* Bold text for visibility */
    font-size: 1rem; /* Slightly larger text for readability */
}


.wpcf7 form .wpcf7-response-output.wpcf7-mail-sent-ok {
    margin: 2em 0.5em 1em;
    padding: 0.2em 1em;
    border: 2px solid #4CAF50; /* Green border for success */
    color: #4CAF50!important; /* Green text for success */
    background-color: #f6fff4; /* Light green background */
}


.contact-info .bi::before {
	background: #F4F4F4;
    padding: 20px;
    border-radius: 50%;
}

/*--------------------------------------------------------------
# Layouts
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Components
--------------------------------------------------------------*/

/* Navigation
--------------------------------------------- */
.main-navigation {
	display: block;
	width: 100%;
}

.main-navigation ul {
	display: none;
	list-style: none;
	margin: 0;
	padding-left: 0;
}

.main-navigation ul ul {
	box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
	float: left;
	position: absolute;
	top: 100%;
	left: -999em;
	z-index: 99999;
}

.main-navigation ul ul ul {
	left: -999em;
	top: 0;
}

.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul {
	display: block;
	left: auto;
}

.main-navigation ul ul a {
	width: 200px;
}

.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
	left: auto;
}

.main-navigation li {
	position: relative;
}

.main-navigation a {
	display: block;
	text-decoration: none;
}

/* Small menu. */
.menu-toggle,
.main-navigation.toggled ul {
	display: block;
}

@media screen and (min-width: 37.5em) {

	.menu-toggle {
		display: none;
	}

	.main-navigation ul {
		display: flex;
	}
}

.site-main .comment-navigation,
.site-main
.posts-navigation,
.site-main
.post-navigation {
	margin: 0 0 1.5em;
}

.comment-navigation .nav-links,
.posts-navigation .nav-links,
.post-navigation .nav-links {
	display: flex;
}

.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
	flex: 1 0 50%;
}

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
	text-align: end;
	flex: 1 0 50%;
}

/* Posts and pages
--------------------------------------------- */
.sticky {
	display: block;
}

.post,
.page {
	margin: 0 0 1.5em;
}

.updated:not(.published) {
	display: none;
}

.page-content,
.entry-content,
.entry-summary {
	margin: 1.5em 0 0;
}

.page-links {
	clear: both;
	margin: 0 0 1.5em;
}

/* Comments
--------------------------------------------- */
.comment-content a {
	word-wrap: break-word;
}

.bypostauthor {
	display: block;
}

/* Widgets
--------------------------------------------- */
.widget {
	margin: 0 0 1.5em;
}

.widget select {
	max-width: 100%;
}

/* Media
--------------------------------------------- */
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
	border: none;
	margin-bottom: 0;
	margin-top: 0;
	padding: 0;
}

/* Make sure logo link wraps around logo image. */
.custom-logo-link {
	display: inline-block;
}

/* Captions
--------------------------------------------- */
.wp-caption {
	margin-bottom: 1.5em;
	max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.wp-caption .wp-caption-text {
	margin: 0.8075em 0;
}

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

/* Galleries
--------------------------------------------- */
.gallery {
	margin-bottom: 1.5em;
	display: grid;
	grid-gap: 1.5em;
}

.gallery-item {
	display: inline-block;
	text-align: center;
	width: 100%;
}

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

.gallery-columns-3 {
	grid-template-columns: repeat(3, 1fr);
}

.gallery-columns-4 {
	grid-template-columns: repeat(4, 1fr);
}

.gallery-columns-5 {
	grid-template-columns: repeat(5, 1fr);
}

.gallery-columns-6 {
	grid-template-columns: repeat(6, 1fr);
}

.gallery-columns-7 {
	grid-template-columns: repeat(7, 1fr);
}

.gallery-columns-8 {
	grid-template-columns: repeat(8, 1fr);
}

.gallery-columns-9 {
	grid-template-columns: repeat(9, 1fr);
}

.gallery-caption {
	display: block;
}

/*--------------------------------------------------------------
# Plugins
--------------------------------------------------------------*/

/* Jetpack infinite scroll
--------------------------------------------- */

/* Hide the Posts Navigation and the Footer when Infinite Scroll is in use. */
.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer {
	display: none;
}

/* Re-display the Theme Footer when Infinite Scroll has reached its end. */
.infinity-end.neverending .site-footer {
	display: block;
}

/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/

/* Accessibility
--------------------------------------------- */

/* Text meant only for screen readers. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: #21759b;
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* Do not show the outline on the skip link target. */
#primary[tabindex="-1"]:focus {
	outline: 0;
}

/* Alignments
--------------------------------------------- */
.alignleft {

	/*rtl:ignore*/
	float: left;

	/*rtl:ignore*/
	margin-right: 1.5em;
	margin-bottom: 1.5em;
}

.alignright {

	/*rtl:ignore*/
	float: right;

	/*rtl:ignore*/
	margin-left: 1.5em;
	margin-bottom: 1.5em;
}

.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1.5em;
}



/* nav bar */

.associated-top-sidebar {
    height: 40px;
    background-color:#000;
    color:#fff;
}

.associated-header-container {
    height: 200px;
    
}

.location {
    color: #FFF;
    font-family: "IBM Plex Sans Arabic", serif;
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.top-header {
    background-color: #343a40; /* Dark background color */
}

.top-header .bi {
    margin-right: 5px;
}

.navbar-brand {
    display: flex;
    align-items: center;
    font-size: 1.5rem;
    color: #803D97; /* Brand color */
}

.navbar-brand img {
    margin-right: 10px;
}

.navbar-nav .nav-link {
    color: #333;
    font-weight: 500;
    padding: 15px 10px;
}

.navbar-nav .nav-link:hover {
    color: #803D97; /* Brand color */
}

.btn-primary {
    background-color: #803D97; /* Brand color */
    border-color: #803D97; /* Brand color */
}

.btn-primary:hover {
    background-color: #692C7A; /* Darker shade of brand color */
    border-color: #692C7A; /* Darker shade of brand color */
}
.footer {
    background-color: #343a40; /* Dark background color */
}

.footer-title {
    color: #803D97; /* Footer title color */
    margin-bottom: 1rem;
    border-left: 4px solid #803D97; /* Left border color */
    padding-left: 10px;
}

.footer a {
    color: #803D97; /* Footer links color */
}

.footer a:hover {
    color: #692C7A; /* Footer links hover color */
}

.form-control {
    border-radius: 0;
}

.btn-primary {
    background-color: #803D97; /* Brand color */
    border-color: #803D97; /* Brand color */
    border-radius: 0;
}

.btn-primary:hover {
    background-color: #692C7A; /* Darker shade of brand color */
    border-color: #692C7A; /* Darker shade of brand color */
}

.social-icons i {
    font-size: 1.25rem;
}

.social-icons a {
    text-decoration: none;
}

.social-icons a:hover {
    color: #692C7A; /* Hover color for social icons */
}
.error-404-section {
    background: url('background-image.jpg') no-repeat center center;
    background-size: cover;
    color: white;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.error-404-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6); /* Dark overlay */
    z-index: 1;
}

.container {
    position: relative;

}

.error-code {
    font-size: 10rem;
    font-weight: bold;
    margin-bottom: 20px;
}

.error-message {
    font-size: 2rem;
    margin-bottom: 20px;
}

.error-description {
    font-size: 1.2rem;
    margin-bottom: 30px;
    color: #ddd;
}

.btn-primary {
    background-color: #803D97; /* Button color */
    border-color: #803D97;
    padding: 10px 20px;
    font-size: 1rem;
}

.btn-primary:hover {
    background-color: #692C7A; /* Hover color */
    border-color: #692C7A;
}
.product-card {
    cursor: pointer;
    transition: transform 0.3s;
}

.product-card:hover {
    transform: scale(1.05);
}

.product-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    justify-content: center;
    align-items: center;
    background: rgba(0, 0, 0, 0.7);
    transition: opacity 0.3s;
}

.product-modal .modal-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
}

.product-modal .modal-content {
    position: relative;
    background: white;
    padding: 20px;
    border-radius: 5px;
    max-width: 800px;
    width: 90%;
    z-index: 10;
    opacity: 0;
    transition: opacity 0.3s;
}

.product-modal.show .modal-content {
    opacity: 1;
}

.close-modal {
    position: absolute;
    top: 10px;
    left: 10px;
    background: none;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
}

.post-meta {
    color: #6c757d;
    font-size: 0.9rem;
    margin-bottom: 10px;
	border-bottom: 1px solid #ddd;
}

.post-meta svg {
	margin-right: 5px;
}

span.post-date {
    display: flex;
    background: #803D97;
    width: 100%;
	padding:20px;
    justify-content: left;
	color:#fff;
}

.card.post-card {
	background-color: #fff;
	border-bottom: 1px solid #ddd;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.post-meta a, .post-meta a:visited {
	color: #000;

}

.post-meta a:hover {
	color: var(--purple-color);
}

span.post-author {
    display: flex;
    justify-content: center;
	width: 220px;
	height: 65px;
    align-items: center;
	color:#000;
	border-right:2px solid #ddd;
}



span.post-category {
	display: flex;
	justify-content: center;
	width: 220px;
	height: 65px;
	align-items: center;
	color:#000;
}

.card-title {
    font-size: 1.25rem;
    font-weight: bold;
    margin-bottom: 15px;
    color: #333;
}

.card-text {
    font-size: 1rem;
    color: #666;
}

.btn-primary {
    background-color: #803D97; /* Button color */
    border-color: #803D97;
}

.btn-primary:hover {
    background-color: #692C7A; /* Hover color */
    border-color: #692C7A;
}

/* top bar */
.top-header {
	font-size:0.875rem;
}

.top-header a, .top-header a:visited {
	color:var(--white-color);
}

.top-header a:hover {
	color:var(--yellow-color);
}

/* footer */
.footer h5::before {
    content: "";
    display: inline-block;
    width: 13px;
    height: 13px;
    background-color: #803D97;
    margin-right: 8px; /* Adjust as needed for spacing between the square and the text */
    vertical-align: middle; /* Align the square with the middle of the text */
	border-radius: 8px;
}
.footer h5 {
	font-size:1rem;
}

.footer  .subscribe-newsletter {
	background:transparent;
	color: #fff;
	position: relative;
}
.footer  .subscribe-newsletter::before {
	content: "";
	position: absolute;
	background-color: var(--white-color); /* Badge background color */
	opacity: 0.1;
	width: 100%;
	height:100%;
	
}

.footer .subscribe-newsletter .subscribe-container {
	padding: 20px;
}
.footer  .subscribe-newsletter h5::before {
	display: none;
}
.footer  .subscribe-newsletter h5 {
	font-size: 1.125rem;
	margin-bottom: 10px;
}
.footer  .subscribe-newsletter p {
	margin-bottom: 15px;
}
.footer .input-group {
	display: flex;
}
.footer  .form-control {
	border-radius: 0;
	border: none;
	padding: 10px;
}
.footer  .subscribe-button {
	background-color: #803D97; /* Button color */
	color: #fff;
	border: none;
	padding: 10px 20px;
	border-radius: 0;
}
.footer  .subscribe-button:hover {
	background-color: #682b79; /* Hover color */
}


.footer {
	background-color: #2C2C2C;
	color: #fff;
	padding: 40px 0;
}
.footer a {
	color: #fff;
	text-decoration: none;
}
.footer a:hover {
	color: var(--yellow-color);
}
.footer .list-unstyled {
	margin: 0;
	padding: 0;
	list-style: none;
}

.footer .list-unstyled li {
	margin-left:25px;
}
.footer .list-unstyled li a:hover {
	color: var(--yellow-color);
}
.footer .subscribe-button {
	background-color: #803D97;
	border: none;
	color: #fff;
	float: right;
	margin-top:10px;
}
.footer .subscribe-button:hover {
	background-color: #682b79;
}
.footer .social-icons a {
	color: #fff;
}
.footer .social-icons a:hover {
	color: var(--yellow-color);
}

.footer-contact {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	height: 100%;
	text-align: left;
	margin-bottom: 20px;
}
.footer-contact svg {
	margin-right: 10px;
}
.footer-contact .contact-text {
	display: innline-block;
	white-space: pre-line;
}

/* main hero */
.yellow {
	color: var(--yellow-color);
}

.green {
	color: var(--green2-color);
}

.navbar-toogler {
	border:none;
	box-shadow: none;	
}

#qlwapp.qlwapp-rounded.qlwapp-button .qlwapp-toggle {
    border-radius: 50px;
    background: #803D97;
}

#qlwapp.qlwapp-button .qlwapp-toggle .qlwapp-icon {
	margin:0!important;
}

@media (max-width: 768px) {
	
	.post-header .post-meta {
		position:relative;
	}
	
	section.contact-us-section.py-5 {
    padding-top:1.5rem!important;
    padding-bottom:1.5rem!important;
    padding:20px;
}

section.contact-us-section.py-5 .title {
	font-size:1.5rem;
}

.footer .subscribe-newsletter {
	margin-top:20px;
}

form.wpcf7-form.init {
    margin:0 auto!important;
}

input#submit, button#load-more {
    width:100%!important;
}
	
	
	.operations-country {
		padding:50px 25px!important;
	}
	
	.operations-country .title {
		font-size:1.5rem!important;
	}
	
	.latest-posts {
		padding:10px;
	}
	
	.top-header div div {
		padding: 5px;
		font-size:0.625rem;
	}
	
	.footer {
		padding:40px 10px;
	}
	
	span.post-category, span.post-date , span.post-date {
		width:auto;
	}
	span.post-date {
		padding:0;
		width: 200px;
		padding:20px;
	}
	
	section.work-process-section.py-5 {
        padding-top:1.5rem!important;
        padding-bottom: 1.5rem!important;
        padding:20px;
    }
    
    .highlights-section .highlights {
    	justify-content:center!important;
    	
    }
    
    .highlights-section {
    	background-size:cover!important;
    }
    
    .highlights-section .highlight {
    	max-width: 100%!important;
    }
    
    .team-member {
    	flex:none!important;
    }
    
    
.navbar>.container {
	display: flex;
	align-items: center;
}
.navbar-toogler, .navbar-toogler:focus, .navbar-toogler {
	border:none;
	box-shadow: none;
}

.navbar-brand {
	width: 50%;
}

button.navbar-toggler.collapsed {
	border:none;
}

.navbar-toggler:focus {
	box-shadow: none;
}
#menu-main-menu{
	text-align: center;
}

.calltoaction-button-wrapper {
	display: flex;
	justify-content: center;
	flex-grow: 1;
}

}

/* Center the preloader */
.preloader {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f9f9f9; /* Adjust the background color as needed */
}

.loader {
    border: 12px solid #f3f3f3; /* Light grey */
    border-top: 12px solid #803D97; /* Purple color */
    border-radius: 50%;
    width: 60px;
    height: 60px;
    animation: spin 2s linear infinite;
}

span.social-icons {
	margin-left:13px;
}



/*p.intro:before {
	content: '';
    background: #803D97;
    width: 11px;
    height: 11px;
    position: absolute;
    margin-top: 5px;
    margin-left: -13px;
}*/

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}


/* single page design */

img.img-fluid.wp-post-image {
    /*object-fit: cover;*/
    width: 100%;
    /*height: 400px;*/
    margin: 0;
    padding: 0;
}

.post-header .post-meta {
    color: #6c757d;
    font-size: 0.9rem;
    margin-bottom: 0;
    border-bottom: 1px solid #ddd;
    background: #803D97;
}

.blockquote {
    background-color: #4b9fa6; /* Background color similar to the image */
    color: #ffffff; /* Text color */
    padding: 40px 20px; /* Padding to give space around the quote */
    position: relative;
    text-align: center;
    margin: 40px auto; /* Center the blockquote and add margin from the top */
    max-width: 80%; /* Ensure the blockquote does not span the entire width */
}

.blockquote:before {
    content: '';
    display: block;
    height: 10px;
    background-color: #800080; /* Top stripe color */
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.blockquote p {
    font-size: 1.5rem; /* Adjust font size as needed */
    font-style: italic;
    margin: 0;
}
.post-content ol {
    list-style: none; /* Remove default numbering */
    padding: 0;
    margin: 20px 0; /* Adjust margin as needed */
    counter-reset: custom-counter; /* Initialize counter */
}

.post-content ol li {
    position: relative;
    padding-left: 30px; /* Space for custom numbers */
    margin-bottom: 10px; /* Space between list items */
    font-size: 1rem; /* Adjust font size as needed */
    color: #333; /* Text color */
}

.post-content ol li:before {
    content: counter(custom-counter) ". "; /* Use counter for custom numbering */
    counter-increment: custom-counter; /* Increment counter */
    position: absolute;
    left: 0;
    top: 0;
    font-weight: bold; /* Bold number */
    color: #333; /* Number color */
    font-size: 1rem; /* Adjust font size as needed */
}

.post-content ul{
    list-style: none; /* Remove default bullet points */
    padding: 0;
    margin: 20px 0; /* Adjust margin as needed */
    color: #333; /* Text color */
    font-size: 1rem; /* Adjust font size as needed */
}

.post-content ul li {
    position: relative;
    padding-left: 25px; /* Space for custom bullet */
    margin-bottom: 10px; /* Space between list items */
}

.post-content ul li:before {
    content: '\2022'; /* Unicode for a bullet point */
    position: absolute;
    left: 0;
    color: #800080; /* Bullet color */
    font-size: 1.5rem; /* Adjust bullet size as needed */
    line-height: 1rem; /* Center bullet vertically with text */
}


/* end single page design */

/* adding icon moon */
@font-face {
	font-family: 'icomoon';
	src:  url('fonts/icomoon/fonts/icomoon.eot?dqou7n');
	src:  url('fonts/icomoon/fonts/icomoon.eot?dqou7n#iefix') format('embedded-opentype'),
	  url('fonts/icomoon/fonts/icomoon.ttf?dqou7n') format('truetype'),
	  url('fonts/icomoon/fonts/icomoon.woff?dqou7n') format('woff'),
	  url('fonts/icomoon/fonts/icomoon.svg?dqou7n#icomoon') format('svg');
	font-weight: normal;
	font-style: normal;
  }
  
  [class^="icon-"], [class*=" icon-"] {
	/* use !important to prevent issues with browser extensions that change fonts */
	font-family: 'icomoon' !important;
	speak: none;
	font-style: normal;
	font-weight: normal;
	font-variant: normal;
	text-transform: none;
	line-height: 1;
  
	/* Better Font Rendering =========== */
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
  }
  
  .icon-i1:before {
	content: "\e900";
  }
  .icon-i2:before {
	content: "\e901";
  }
  
  /* end code */
  .wpcf7 form.failed .wpcf7-response-output {
	border-color:#803D97;
	color:#fff;
  }

  /*.wpcf7 form.invalid .wpcf7-response-output {
	color: #fff!important;
  }*/

  .wpcf7-not-valid-tip {
    color: #fff;

}

/*i.fa {
    font-size: 3rem;
    color: #803D97;
    background: whitesmoke;
    border-radius: 50%;
    margin: 15px;
    padding: 15px;
}*/
i.fa {
	background-color:#803D97;
	border-radius: 50%;
	width: 34px;
	height: 34px;
	color: #fff;
}

i.fa.fa-map-marker, i.fa.fa-phone, i.fa.fa-fax, i.fa.fa-envelope-o {
	font-size: 1.2rem;
	text-align: center;
	padding-top: 6px;
}

p b {
	margin-left:20px;
	color:#803D97;
}

b.address, b.pobox {
	margin-left:0px;
	color:#000;
}

.wp-bootstrap-blocks-button.text-center {
	margin-bottom: 20px;
}

h2.wp-block-heading.company {
    color: #803D97;
}
.email a {
color:#803D97;
}

.contact-info p {
color:#6c757d;
}

iframe {
width:100%;
border:5px solid #803D97!important;
}

.contact-form {
display:none;
}

button.open-form {
    background: #803D97;
    color: #fff;
    padding: 21px 61px 22px 61px;
}
.contact-form h2 {
text-align:center;
text-transform:capitalize;
margin-bottom:3rem;
color:#803D97;
}

/* Ensure the dropdown has a higher z-index to sit above other elements */
nav .dropdown-menu {
    position: absolute; /* Make sure it's positioned relative to the parent */
    z-index: 1000; /* Set a high z-index to avoid being overlapped */
    top: 100%; /* Align the dropdown just below the parent */
    left: 0; /* Align it to the left of the parent */
    display: none; /* Initially hidden */
}

/* Show the dropdown when the parent is hovered or clicked */
nav .dropdown:hover .dropdown-menu, 
nav .dropdown:focus .dropdown-menu {
    display: block; /* Display dropdown when active */
}

/* You can also adjust padding/margin to ensure proper spacing */
nav .dropdown-menu li {
    padding: 10px; /* Adjust as per your design */
}


/* Basic styling for the navigation container */
.wp-block-navigation__container {
    display: flex;
    gap: 20px; /* Adjust the space between flags */
    justify-content: center;
    align-items: center;
}

/* Styling each navigation item (the flags) */
.wp-block-navigation-item {
    position: relative;
    text-align: center;
}

/* Ensure the flag images are displayed side by side */
.wp-block-navigation-item img {
    width: 250px; /* Set a suitable flag size */
    height: auto;
    transition: transform 0.3s ease; /* Smooth scale effect on hover */
}

/* Hover effect to scale the flag and show label */
.wp-block-navigation-item:hover img {
    transform: scale(1.1); /* Slightly enlarge the flag on hover */
}

/* Hide the label initially */
.wp-block-navigation-item__label {
    display: none;
    position: absolute;
    bottom: 0px; /* Position the label below the flag */
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent overlay background */
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 0.75rem;
    white-space: nowrap; /* Ensure the text stays on one line */
    z-index: 1;
    opacity: 0; /* Initially hidden */
    transition: opacity 0.3s ease; /* Smooth fade-in effect */
}

/* Show the label on hover */
.wp-block-navigation-item:hover .wp-block-navigation-item__label {
    display: block;
    opacity: 1;
}

/* Add a border to the active/current menu item */
.wp-block-navigation-item.current-menu-item img,
.wp-block-navigation-item:hover img {
    border: 3px solid #803D97; /* Active state border */
    /*border-radius: 50%; /* Optional: make the border circular */
}

/* Responsive design to stack items vertically on smaller screens */
@media (max-width: 600px) {
    .wp-block-navigation__container {
        flex-direction: column;
        gap: 10px; /* Reduce the gap in smaller screens */
    }
}


input.wpcf7-form-control.wpcf7-submit.has-spinner.btn.btn-primary {
    background: #803D97;
    color: #fff;
    padding: 21px 61px 22px 61px;
}

.query-complaint {
	margin-bottom: 5rem;
}

.query-complaint h1, .query-complaint h2 {
	color: #803D97;
}

.query-complaint strong {
		position: relative;
		font-weight: normal; /* Remove bolding from the strong tag */
	}

	.query-complaint p.email strong::before {
		content: '\f003'; /* FontAwesome Unicode for envelope icon (email) */
		font-family: FontAwesome;
		margin-right: 8px;
		font-size: 3rem;
		color: #803D97;
		background: whitesmoke;
		border-radius: 50%;
		margin: 15px;
		padding: 15px;
		
	}
	
	.query-complaint p.phone strong::before {
		content: '\f095'; /* FontAwesome Unicode for phone icon */
		font-family: FontAwesome;
		margin-right: 8px;
		font-size: 3rem;
		color: #803D97;
		background: whitesmoke;
		border-radius: 50%;
		margin: 15px;
		padding: 15px;
	}

	.query-complaint p.website strong::before {
		content: '\f0ac'; /* FontAwesome Unicode for globe icon (website) */
		font-family: FontAwesome;
		margin-right: 8px;
		font-size: 3rem;
		color: #803D97;
		background: whitesmoke;
		border-radius: 50%;
		margin: 15px;
		padding: 15px;
	}

	.query-complaint p {
		margin:0;
	}

	.query-complaint p.email, .query-complaint p.phone, .query-complaint p.website {
		margin:1.5rem 0;
	}
	.query-complaint p a {
		color: #803D97;
	}

	.footer .subscribe-newsletter::before {
		border-radius: 20px;
	}

	scroll-up-button {
		--scroll-btn-bg: #632398;
		--scroll-btn-hover-bg: #632398;
		--scroll-btn-color: #ffffff;
		--scroll-btn-size: 56px;
		--scroll-btn-radius: 12px;
		--scroll-btn-shadow: 0 6px 12px rgba(0,0,0,0.3);
	  }

	  .current_page_item > a {
		color: grey !important;
	}

	.service-item .modal.fade.show {
		background: grey;
	}

	#serviceModal1 .modal-header {
		background: #722DAE;
	}

	#serviceModal2 .modal-header {
		background: #A415A8;
	}

	#serviceModal3 .modal-header {
		background: #4C1E96;
	}

	#serviceModal4 .modal-header {
		background: #3526C6;
	}
	/* boostrap overwrites fixex */
	@media(max-width:991px ) {


		.navbar-collapse {
			border:1px solid #632398;
			border-radius: 20px;
			margin-top:20px;
			margin-bottom:10px;
		}
	
		.navbar-nav .nav-link {
			color: #632398;
			font-weight: 500;
			padding: 0.3rem 0.3rem;
		}

		.navbar-nav .nav-link:hover {
			color:grey;
			font-weight: 500;
			padding: 0.3rem 0.3rem;
		}
	
		#menu-main-menu{
			text-align: center;
			padding:20px;
		}
		.modal {
			--bs-modal-width:95%;
		}
		.container {
			max-width:100%;
		}
	}
	
	@media(max-width:767px) {
		.footer .subscribe-newsletter::before {
			width:80%;
		}

		.footer a img {
			width: 50%;
		}
	}
	
	@media(max-width:620px ) {
	.footer .subscribe-newsletter::before {
			width:100%;
		}
		.footer-contact svg {
			width:50px;
		}


	}
	
	/* Container to ensure items are displayed side by side and wrap based on viewport */
.wp-block-navigation__container {
    display: flex;
    flex-wrap: wrap; /* Ensures items wrap to the next line if they overflow */
    justify-content: center; /* Center-align items */
    gap: 15px; /* Adds space between items */
    padding: 10px; /* Optional padding around the container */
}

/* Individual list items */
.wp-block-navigation-item {
    display: flex;
    flex-direction: column; /* Stack flag and label vertically */
    align-items: center; /* Center-align the content */
    justify-content: center;
    text-align: center;
    width: calc(100% / 6); /* Adjust the number of items per row */
    max-width: 150px; /* Optional max width for responsive design */
    flex: 1 1 auto; /* Allow items to grow and shrink */
    box-sizing: border-box; /* Ensure padding and borders are included in width/height */
}

/* Flag images */
.wp-block-navigation-item img {
    display: block;
    max-width: 100%; /* Ensure flags resize within their container */
    width: auto; /* Maintain aspect ratio */
    height: auto; /* Maintain aspect ratio */
    aspect-ratio: 4 / 3; /* Set an aspect ratio for consistency */
    object-fit: contain; /* Ensure the image fits within the container without distortion */
    max-height: 80px; /* Adjust as needed for consistent heights */
}

/* Country labels */
.wp-block-navigation-item__label {
    margin-top: 5px; /* Add space between the flag and the label */
    font-size: 14px; /* Adjust font size as needed */
    word-wrap: break-word; /* Ensure long labels don't overflow */
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .wp-block-navigation-item {
        width: calc(100% / 3); /* Show 3 items per row on tablets */
    }
}

@media (max-width: 480px) {
    .wp-block-navigation__container {
        flex-direction: column; /* Stack items vertically */
        align-items: center; /* Center-align the content */
    }

    .wp-block-navigation-item {
        width: 100%; /* Full width for each item */
        max-width: none; /* Remove max width to center properly */
        margin-bottom: 10px; /* Add space between items */
    }

    .wp-block-navigation-item img {
        max-height: 60px; /* Reduce flag height for mobile */
    }

    .wp-block-navigation-item__label {
        font-size: 12px; /* Reduce font size for mobile */
    }
}


.post-date a {
	color:#fff;
}

.post-date a:hover, .post-date a:visited {
	color:#fff!important;
	text-decoration:none;
}

.post-category {
	justify-content:end!important;
}

a.post-link, a:visited.post-link {
	text-decoration: none;
	color:#803D97!important;
}
a:hover.post-link {
	color:#803D97!important;
	text-decoration: underline;
}

#category-filter {
	border: 1px solid #803D97;
    width: auto;
    height: 25px;
    color: #803D97;
    font-size: large;
}

.content p {
	max-width:80%;
}

.content-info a {
	color:#803D97;
}

div#countryModal .modal-body {
    display: block;
}

.query-complaint p.email strong::before,
.query-complaint p.phone strong::before,
.query-complaint p.website strong::before {
font-size:1rem;
}