/**

 =======================================================
    * Template Name: Nzamba Kitonga Advocates LLP
    * Updated: May 10 2024 
    * Author: tuktuk.media
    ======================================================== -
*/


body {
  overflow-x: hidden; /* Prevent vertical scrolling */
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}

/* Fonts */
:root {
  --default-font: "Open Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --heading-font: "Roboto", sans-serif;
  --nav-font: "Poppins", sans-serif;
}

/* Global Colors */
:root {
  /* Background Color - This color is applied to the background of the entire website as well as individual sections. */
  --background-color: #ffffff;

  /* Default Color - This is the default color used for the majority of the text content. */
  --default-color: #364d59;

  /* Heading Color - This color is used for titles, headings and secondary elements. */
  --heading-color: #52565e;

  /* Accent Color - This is the main accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out. */
  --accent-color: #feb900;

  /* Contrast Color - This is a color used for text when the background color is one of the heading, accent, or default colors. Its purpose is to ensure proper contrast and readability when placed over these more dominant colors. */
  --contrast-color: #ffffff;
}

/* Nav Menu Colors */
:root {
  /* Nav Color - This is the default color of the main navmenu links. */
  --nav-color: rgba(255, 255, 255, 0.55);

  /* Nav Hover Color - This color is applied to main navmenu links when they are hovered over. */
  --nav-hover-color: #ffffff;

  /* Nav Dropdown Background Color - This color is used as the background for dropdown boxes that appear when hovering over primary navigation items. */
  --nav-dropdown-background-color: #ffffff;

  /* Nav Dropdown Color - This color is used for navigation links of the dropdown items in the navigation menu. */
  --nav-dropdown-color: #212529;

  /* Nav Dropdown Hover Color - Similar to --nav-hover-color, this color is applied to dropdown navigation links when they are hovered over. */
  --nav-dropdown-hover-color: #feb900;
	--first-color: #092739;
	--second-color: #feb900;
	--third-color: #163c56;
	--text-color: #fff;

	--box-shadow: 0 5px 25px rgb(2, 2, 2, 0.1);
	--text-shadow: 0 5px 25px rgb(2, 2, 2, 0.1);
}


/* container root colors  */
:root {
  --gray-container: #D9D9D9;
  --white-container: #e8e4e4;
}

/* Smooth scroll */
:root {
  scroll-behavior: smooth;
}

/*--------------------------------------------------------------
  # General
  --------------------------------------------------------------*/
body {
  color: var(--default-color);
  background-color: var(--background-color);
  font-family: var(--default-font);
}

a {
  color: var(--accent-color);
  text-decoration: none;
  transition: 0.3s;
}

a:hover {
  color: color-mix(in srgb, var(--accent-color), transparent 25%);
  text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--heading-color);
  font-family: var(--heading-font);
}


P {
  line-height: 1.9rem;
}

/*--------------------------------------------------------------
  # Global Header
  --------------------------------------------------------------*/
.header {
  --background-color: rgba(255, 255, 255, 0);
  --default-color: #ffffff;
  --heading-color: #ffffff;
  color: var(--default-color);
  background-color: var(--background-color);
  /* padding: 20px 0; */
  transition: all 0.5s;
  z-index: 997;
}

.header .logo img {
  /* max-height: 32px; */
  margin-right: 8px;
}

.header .logo h1 {
  font-size: 24px;
  margin: 0;
  font-weight: 700;
  color: var(--heading-color);
}

.header .logo span {
  font-size: 24px;
  padding-left: 1px;
  font-family: var(--heading-font);
  color: var(--color-primary);
}

.scrolled .header {
  box-shadow: 0px 0 18px rgba(0, 0, 0, 0.1);
}

/* Global Header on Scroll
  ------------------------------*/
.scrolled .header {
  --background-color: rgba(10, 49, 77, 0.95);
  --heading-color: #ffcc66;
  --nav-color: #fff;
  --nav-hover-color: #ffcc66;
}

/*--------------------------------------------------------------
# Navigation Menu
--------------------------------------------------------------*/
/* Desktop Navigation */
@media (min-width: 1200px) {
  .navmenu {
    padding: 0;
  }

  .navmenu ul {
    margin: 0;
    padding: 0;
    display: flex;
    list-style: none;
    align-items: center;
  }

  .navmenu li {
    position: relative;
  }

  .navmenu>ul>li {
    white-space: nowrap;
    padding: 15px 14px;
  }

  .navmenu>ul>li:last-child {
    padding-right: 0;
  }

  .navmenu a,
  .navmenu a:focus {
    color: var(--nav-color);
    font-size: 14px;
    padding: 0 2px;
    font-family: var(--nav-font);
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    transition: 0.3s;
    position: relative;
    text-transform: uppercase;
  }

  .navmenu a i,
  .navmenu a:focus i {
    font-size: 12px;
    line-height: 0;
    margin-left: 5px;
    transition: 0.3s;
  }

  .navmenu>ul>li>a:before {
    content: "";
    position: absolute;
    height: 2px;
    bottom: -6px;
    left: 0;
    background-color: var(--accent-color);
    visibility: hidden;
    width: 0px;
    transition: all 0.3s ease-in-out 0s;
  }

  .navmenu a:hover:before,
  .navmenu li:hover>a:before,
  .navmenu .active:before {
    visibility: visible;
    width: 100%;
  }

  .navmenu li:hover>a,
  .navmenu .active,
  .navmenu .active:focus {
    color: var(--nav-hover-color);
  }

  .navmenu .dropdown ul {
    margin: 0;
    padding: 10px 0;
    background: var(--nav-dropdown-background-color);
    display: block;
    position: absolute;
    visibility: hidden;
    left: 14px;
    top: 130%;
    opacity: 0;
    transition: 0.3s;
    border-radius: 4px;
    z-index: 99;
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.1);
  }

  .navmenu .dropdown ul li {
    min-width: 200px;
  }

  .navmenu .dropdown ul a {
    padding: 10px 20px;
    font-size: 15px;
    text-transform: none;
    font-weight: 400;
    color: var(--nav-dropdown-color);
  }

  .navmenu .dropdown ul a i {
    font-size: 12px;
  }

  .navmenu .dropdown ul a:hover,
  .navmenu .dropdown ul .active:hover,
  .navmenu .dropdown ul li:hover>a {
    color: var(--nav-dropdown-hover-color);
  }

  .navmenu .dropdown:hover>ul {
    opacity: 1;
    top: 100%;
    visibility: visible;
  }

  .navmenu .dropdown .dropdown ul {
    top: 0;
    left: -90%;
    visibility: hidden;
  }

  .navmenu .dropdown .dropdown:hover>ul {
    opacity: 1;
    top: 0;
    left: -100%;
    visibility: visible;
  }
}

.circle-icon {
  display: inline-block;
  width: 40px;
  /* Adjust the width as needed */
  height: 40px;
  /* Adjust the height as needed */
  line-height: 40px;
  border-radius: 50%;
  background-color: #007bff;
  /* Adjust the background color as needed */
  color: white;
  text-align: center;
}

/* Media query for mobile devices */
@media (max-width: 767px) {

  .phone-item,
  .consultation-btn {
    margin-top: 10px;
    margin-bottom: 10px;
  }
}

/* Mobile Navigation */
@media (max-width: 1199px) {
  .mobile-nav-toggle {
    color: var(--nav-color);
    font-size: 28px;
    line-height: 0;
    margin-right: 10px;
    cursor: pointer;
    transition: color 0.3s;
  }

  .navmenu {
    padding: 0;
    z-index: 9997;
  }

  .navmenu ul {
    display: none;
    position: absolute;
    inset: 60px 20px 20px 20px;
    padding: 10px 0;
    margin: 0;
    border-radius: 6px;
    background-color: var(--nav-dropdown-background-color);
    border: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
    box-shadow: none;
    overflow-y: auto;
    transition: 0.3s;
    z-index: 9998;
  }

  .navmenu a,
  .navmenu a:focus {
    color: var(--nav-dropdown-color);
    padding: 10px 20px;
    font-family: var(--nav-font);
    font-size: 17px;
    font-weight: 500;
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
    transition: 0.3s;
  }

  .navmenu a i,
  .navmenu a:focus i {
    font-size: 12px;
    line-height: 0;
    margin-left: 5px;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: 0.3s;
    background-color: color-mix(in srgb, var(--accent-color), transparent 90%);
  }

  .navmenu a i:hover,
  .navmenu a:focus i:hover {
    background-color: var(--accent-color);
    color: var(--contrast-color);
  }

  .navmenu a:hover,
  .navmenu .active,
  .navmenu .active:focus {
    color: var(--nav-dropdown-hover-color);
  }

  .navmenu .active i,
  .navmenu .active:focus i {
    background-color: var(--accent-color);
    color: var(--contrast-color);
    transform: rotate(180deg);
  }

  .navmenu .dropdown ul {
    position: static;
    display: none;
    z-index: 99;
    padding: 10px 0;
    margin: 10px 20px;
    background-color: var(--nav-dropdown-background-color);
    transition: all 0.5s ease-in-out;
  }

  .navmenu .dropdown ul ul {
    background-color: rgba(33, 37, 41, 0.1);
  }

  .navmenu .dropdown>.dropdown-active {
    display: block;
    background-color: rgba(33, 37, 41, 0.03);
  }

  .mobile-nav-active {
    overflow: hidden;
  }

  .mobile-nav-active .mobile-nav-toggle {
    color: #fff;
    position: absolute;
    font-size: 32px;
    top: 15px;
    right: 15px;
    margin-right: 0;
    z-index: 9999;
  }

  .mobile-nav-active .navmenu {
    position: fixed;
    overflow: hidden;
    inset: 0;
    background: rgba(33, 37, 41, 0.8);
    transition: 0.3s;
  }

  .mobile-nav-active .navmenu>ul {
    display: block;
  }
}

.hero {
  /* padding-bottom: 110px; */
  position: relative;
}

.hero_wrapper {
  margin-top: 40px;
}

.hero {
  background: #333;
  color: #fff;
  background: radial-gradient(rgba(68, 31, 31, 0.0), rgba(0, 0, 0, 0.6)), url('../img/Nzamba_Kitonga_Advocates_hero.png') no-repeat center center;
  background-size: cover;
  background-position: center;
  padding: 100px 0;
  color: white;
  text-align: center;
}


.hero_title {
  color: var(--white);
  margin-bottom: 0;
  font-size: 64px;
  font-weight: 600;
  line-height: 75px;
}



.title-span {
  font-style: italic;
  color: #ffcc66;
  font-weight: 700;
  font-size: 64px;
  font-family: "Playfair Display", serif;
}



.title-span-hd {
  color: #bb7b1f;
  font-weight: 400;
  font-size: 40px;

}

.title-span-head {
  font-style: italic;
  color: #173f5a;
  font-weight: 400;
  font-size: 40px;
  line-height: 42px;
  font-family: "Playfair Display", serif;
  text-transform: capitalize;
}

.title-team {
  font-style: italic;
  color: #173f5a;
  font-weight: 500;
  font-size: 45px;
  /* line-height: 42px; */
  font-family: "Playfair Display", serif;
  text-transform: capitalize;
}

.title-p {
  margin-bottom: 2rem;
}

.client-yrs {
  color: var(--accent-color);
}

.hero-content {
  max-width: 650px;
  text-align: left;
}


.product-wrapper {
  display: flex;
  padding-top: 7px;
  padding-right: 7px;
  padding-bottom: 7px;
  padding-left: 7px;
  justify-content: flex-end;
  grid-column-gap: 20px;
  grid-row-gap: 20px;
}

.product-card {
  width: 200px;
  padding: 9px 7px 7px 26px;
  border-radius: 30px;
  background-color: hsla(0, 38%, 6%, 0.7);
  backdrop-filter: blur(5px);
  text-align: start;
}

/* Media query for mobile devices */
@media (max-width: 767px) {
  .hero_title {
    font-size: 40px;
  }

  .title-span {
    font-size: 40px;

  }

  .title-p {
    display: none;

  }

  .product-card {

    padding: 0;
    text-align: center;
  }


  .product-card p {

    line-height: 1.6rem !important;
  }

  .product-card-p {
    padding: 5px;
    font-size: medium;



  }



}



/* Containers holding content  */

.section-container {
  padding: 20px;
  margin-bottom: -30px;
  /* Negative margin to create overlap */
  border-top-left-radius: 32px;
  border-top-right-radius: 32px;
  background-color: #fff;
  /* Light grey background */
  z-index: 1;
  position: relative;
  padding: 50px 20px 35px 20px;
}

.container-white {
  background-color: #D9D9D9;
  /* White background */
}

.aboutus {
  margin-top: -65px;
  /* Adjust this value to control the overlap */
}

.grey-back {
  background-color: #D9D9D9;
  border-top-left-radius: 32px;
  border-top-right-radius: 32px;
  position: absolute;
  top: 0%;
  bottom: 0%;
  left: 0%;
  right: 0%;
}

/* 
.white-back {
  background-color: #ffffff;
  border-top-left-radius: 32px;
  border-top-right-radius: 32px;
  position: absolute;
  top: 0%;
  bottom: 0%;
  left: 0%;
  right: 0%;
}



.white-back, .grey-back {
  height: calc(100% + 80px);
  top: -80px;
}


.grey-back.grey-back_120,
.white-back.white-back_120 {
  height: calc(100% + 120px);
  top: -120px;
} */


.img__back {
  z-index: -1;
  width: 615px;
  height: 838px;
  margin-top: -32px;
  /* margin-right: -260px; */
  position: absolute;
  top: 0%;
  bottom: 0%;
  left: auto;
  right: 0%;
}



.attorneys__back {
  width: 818px;
  height: 1394px;
  /* margin-top: -123px; */
  margin-left: -196px;
  position: absolute;
  top: 0%;
  bottom: 0%;
  left: 0%;
  right: auto;

}

.container_rel {
  z-index: 3;
  position: relative;
}

/* legal Services  */

.legal-services {
  padding-bottom: 80px;
  position: relative;
}




/* ===== Tab navigation content ===== */
.tab-nav-bar {
	position: relative;
	margin: 38px 10px 18px 10px; 
}

.tab-navigation {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	max-width: fit-content;
	margin: 0 auto;
}

.tab-menu {
	color: var(--text-color);
	list-style: none;
	/* background-color: var(--third-color); */
	/* max-width: 800px; */
	padding: 10px;
	white-space: nowrap;
	/* border-bottom: 1px solid var(--third-color); */
	border-radius: 50px;
	/* box-shadow: var(--box-shadow); */
	scroll-behavior: smooth;

	user-select: none;
	overflow-x: auto;
}

.tab-menu.dragging {
	scroll-behavior: unset;
	cursor: grab;
}

.tab-menu::-webkit-scrollbar {
	display: none;
}

.tab-btn {
	display: inline-block;
	color: var(--text-color);
  	background-color: var(--third-color);
	font-size: 1em;
	font-weight: 400;
	margin: 0 2px;
	padding: 10px 20px;
	border-radius: 30px;
	cursor: pointer;
	user-select: none;
	transition: background-color .3s ease;
}

.tab-menu.dragging .tab-btn {
	pointer-events: none;
}

.tab-btn:hover {
	background-color: #9cb4c3;
}

.tab-btn.active {
	background-color: var(--second-color);
}

.left-btn,
.right-btn {
	position: absolute;
	color: var(--default-color);
	font-size: 1.8em;
	padding: 10px;
	cursor: pointer;
  top: 6px;
}

.left-btn {
	left: 0;
	background: linear-gradient(to left, transparent, var(--contrast-color) 80%);
	/* border-top-left-radius: 30px;
	border-bottom-left-radius: 30px; */
	display: none;
}

.right-btn {
	right: 0;
	background: linear-gradient(to right, transparent, var(--contrast-color) 80%);
	/* border-top-right-radius: 30px;
	border-bottom-right-radius: 30px; */
}




/* ===== Tab content ===== */
.tab-content {	
	width: 100%;
}

.tab {
	position: relative;
	top: 0;
	right: auto;
	bottom: 0;
	left: auto;
	max-width: 1100px;
	/* padding: 15px 50px; */
	opacity: 0;
	transform: translateX(25px);
	content-visibility: hidden;
  display: none; /* Hide the element */
}

.tab.active {
	transform: translateX(0);
	content-visibility: visible;
	opacity: 1;
	transition: opacity 1s ease, transform 1s ease;
}

.tab .row-test {
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	/* margin: 50px 0; */
	gap: 30px;
}

.tab .img-card {
	position: relative;
	width: 100%;
	/* max-width: 450px; */
	height: 100%;
	/* max-height: 300px; */
	border-radius: 20px;
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
	box-shadow: var(--box-shadow);
}

.tab .img-card img {
	width: 100%;
	object-fit: cover;
}

.right-column {
	max-width: 800px;
}

.info .city,
.info .description p {
	color: var(--default-color);
	margin-bottom: 10px;
}

.info .city {
	font-size: 2em;
}

.country {
	color: var(--third-color);
	font-size: 5em;
	font-weight: 700;
	text-align: center;
	text-shadow: var(--text-shadow);
}



/* ===== Media queries (max-width: 1050px;) ===== */
@media screen and (max-width: 1050px) {
	section {
		margin: 0 0;
	}

	.tab-nav-bar {
		margin: 38px 10px 18px 10px; 
	}

	.tab {
		/*padding: 15px 25px;*/
	}

	.tab .row-test {
		flex-direction: column;
	}

	.tab .img-card {
		width: auto;
		max-width: 600px;
	}

	.country {
		font-size: 10vw;
		padding-bottom: 50px;
	}

}



.legal-services .bg-image {
  background-image: url('assests/img/');
  background-size: cover;
  background-position: right;
  flex: 1;
}

ul.custom-bullets {
  list-style-type: none;
  padding-left: 10px;
}

ul.custom-bullets li::before {
  content: "\2713"; /* Unicode for checkmark */
  color: green; /* Color for the checkmark */
  margin-right: 10px; /* Space between checkmark and text */
}

.custom-bullets a {
  color: #bb7b1f;
  transition: all 0.3s;

}

.custom-bullets a:hover {
  color: #878787;
  transition: all 0.3s;

}


.custom-box {
  background: linear-gradient(to right, #587592, #DCB977);
  border-radius: 44px;
  padding: 30px;
  color: white;
  margin-top: 65px;
  /* display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap; */
  /* text-align: center; Center-align text */
}

.custom-box .contact-info {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  /* Allow flex items to wrap */
}


.features-image img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.custom-box .contact-info div {
  display: flex;
  align-items: center;
  margin-right: 20px;
  flex-wrap: wrap;
  /* Allow text to wrap */
}

.custom-box .contact-info i {
  background-color: #DCB977;
  border-radius: 50%;
  padding: 13px;
  margin-left: 14px;
}

.btn-custom {
  background-color: #0A314D;
  color: #fff;
  border: none;
  border-radius: 29px;
  padding: 17px 22px;
  /* margin-top: 20px; */
  /* Add margin to separate from previous content */
}

.btn-custom:hover {
  border: 1px solid #D9D9D9;
  background-color: #587592;
  color: #DCB977;
}

@media (max-width: 768px) {
  
  .custom-box {
    border-radius: 0;
    padding: 20px;
    justify-content: center;
    /* Center-align all content */
    text-align: left;
    /* Center-align text */
  }

  .custom-box .contact-info {
    margin-bottom: 15px;
    margin-left: 3px;
  }

  .custom-box .contact-info div {
    margin-right: 0;
    margin-bottom: 10px;
  }

  .custom-box .contact-info i {
    margin-right: 0;
    display: none;
  }

  .btn-custom {
    margin-top: 10px;
    /* Adjust margin for mobile */
  }
}




.nav-tabs .nav-link {
  margin-right: 5px;
  border-radius: 5px;
  background-color: #fff;
  border: 1px solid #ddd;
  color: #333;
}

.nav-tabs .nav-link.active {
  background-color: #ffd700;
  color: #fff;
}

.tab-content {
  margin-top: 20px;
 
}

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

.nav-tabs .nav-item {
  margin: 3px 2px 4px 3px;


}

.nav-tabs {
  border-bottom: 0px solid #dee2e6;
}






@media screen and (min-width: 1280px) {
  .services__head {
    max-width: 377px;
    position: absolute;
    top: 0%;
    bottom: auto;
    left: 0%;
    right: auto;
  }
}


.bg-image-why {
  background-size: cover;
  background-position: right;
  background-color: #333;
  color: #fff;
  background-image: linear-gradient(0deg, rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
    linear-gradient(356.18deg, #000000 0.21%, rgba(0, 0, 0, 0) 72.27%),
    url('/assets/img/Trust-Our-Legal.jpg');
  background-repeat: no-repeat;
  background-position: center center;


}


.why-us-wrapper {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 50px;
  /* Adjust as needed for spacing */

}


/* our team */



/* our team detail  */

.profile-image {

  width: 540px;
  height: 100%;
  object-fit: cover;
}

.contact-info p {
  margin: 0;
}



.center {
  /* display: table; */
  /* width: 100%;
  height: 10vh;
  padding: 20px; */
}

#social {
  display: table-cell;
  vertical-align: middle;
}

#social ul {
  text-align: center;
  padding-left: 0px;
  margin: 0 auto;
}

#social li {
  display: inline-block;
  list-style-type: none;
  margin-left: 5px;
}

/** Facebook **/

.facebook {
  width: 50px;
  height: 50px;
}

.facebook .border {
  background: #787171;
  outline: none;
  color: #ffcc66;
  width: 50px;
  height: 50px;
  -webkit-border-radius: 100px;
  -moz-border-radius: 100px;
  border-radius: 100px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  transition: all .2s ease-in-out;
}

.facebook .border:hover {
  background: #3b5998;
  border-color: #436aaf;
  color: rgba(255, 255, 255, 0.9);
  transform: scale(1.2);
}

.fa.fa-facebook {
  font-size: 25px;
}

/** Twitter **/

.twitter {
  width: 50px;
  height: 50px;
}

.twitter .border {
  background: #787171;
  outline: none;
  color: #ffcc66;
  width: 50px;
  height: 50px;
  -webkit-border-radius: 100px;
  -moz-border-radius: 100px;
  border-radius: 100px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  transition: all .2s ease-in-out;
}

.twitter .border:hover {
  background: #00aced;
  border-color: #72c6e6;
  color: rgba(255, 255, 255, 0.9);
  transform: scale(1.2);
}

.fa.fa-twitter {
  font-size: 25px;
}

/** Instagram **/

.instagram {
  width: 50px;
  height: 50px;
}

.instagram .border {
  background: #787171;
  outline: none;
  color: #ffcc66;
  width: 50px;
  height: 50px;
  -webkit-border-radius: 100px;
  -moz-border-radius: 100px;
  border-radius: 100px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  transition: all .2s ease-in-out;
}

.instagram .border:hover {
  background: #517fa4;
  border-color: #7495af;
  color: rgba(255, 255, 255, 0.9);
  transform: scale(1.2);
}

.fa.fa-instagram {
  font-size: 25px;
}

/** dribbble **/

.dribbble {
  width: 50px;
  height: 50px;
}

.dribbble .border {
  background: #787171;
  outline: none;
  color: #ffcc66;
  width: 50px;
  height: 50px;
  -webkit-border-radius: 100px;
  -moz-border-radius: 100px;
  border-radius: 100px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  transition: all .2s ease-in-out;
}

.dribbble .border:hover {
  background: #0a66c2;
  border-color: #0a66c2;
  color: rgba(255, 255, 255, 0.9);
  transform: scale(1.2);
}

.fa.fa-dribbble {
  font-size: 25px;
}

#social ul li {
  transition: ease .3s;
}

#social ul:hover>li {
  opacity: 0.5;
}

#social ul:hover>li:hover {
  opacity: 1;
}


.qualifications, .memberships {
  margin-top: 20px;
}

.container-qr {
  height: 100%;
  display: flex;
  align-items: stretch;
}


.divider {
  border-right: 1px solid #000;
  height: 100%;
}

@media (max-width: 768px) {
  .divider {
    border-right: none;
    border-bottom: 1px solid #000;
    margin-bottom: 20px;
  }

  .profile-image {
    width: 100%;
    margin-bottom: 28px;
    height: auto;
  }
}

.see-all-lawyers {
  text-align: left;
  margin: 20px 0;
}

.see-all-lawyers a {
  color: #000;
  text-decoration: none;
  font-weight: bold;
}

/* .OurTeam{
  z-index: 0;
} */



.banner .landing-img {
  width: 100%;
  max-height: 70vh;

  object-fit: cover;
}

.banner .page-title {
  position: absolute;
  z-index: 20;
  font-family: BaskervilleItalicBT;
  font-style: italic;
  font-size: 60px;
  color: #fff;
  left: 10%;
  top: 50%;
}

.banner:after {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: rgba(0, 0, 0, 0.5);
}

.OurTeam .card {
  transition: transform 0.2s, filter 0.2s;
}

.OurTeam .card:hover {
  transform: scale(1.05);
  filter: grayscale(100%);
}

.expertise-section img {
  display: block;
  margin: 0 auto;
}

.card-text-title {
  font-size: 16px;
}

.card-text-p {
  font-size: 12px;
}

.rounded-card {
  border-radius: 20px;
  /* Adjust the value as needed */
}

.team__title {
  color: #ffcc66
}

.card__title_white {
  color: #bb7b1f;
}

.why__text {
  color: white;
}


/* Media query for mobile devices */
@media (max-width: 767px) {
  .card__title_white {
    padding-top: 25px;
  }

}

/* Testimonial Section Styles */

.testimonial-bg {
  border: 10px solid rgba(10, 49, 77, 0.95);
  padding: 80px 70px;
  text-align: center;
  position: relative;
  margin: 17px 70px 80px
  /* background-color: #eee7e7; Added for clarity */
}

.testimonial-bg:before {
  content: "\f10d";
  font-family: "fontawesome";
  width: 75px;
  height: 75px;
  line-height: 75px;
  background: #d9d9d9;
  text-align: center;
  font-size: 50px;
  color: #3c414c;
  position: absolute;
  top: -40px;
  left: 2%;
}

.testimonial {
  padding: 0 15px;
}

.testimonial .description {
  font-size: 20px;
  font-weight: 400;
  font-style: italic;
  line-height: 30px;
  padding-bottom: 25px;
  margin-bottom: 15px;
  position: relative;
}

.testimonial .description:before {
  content: "";
  width: 75%;
  border-top: 1px solid var(--accent-color);
  margin: 0 auto;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}

.testimonial .description:after {
  content: "";
  width: 20px;
  height: 20px;
  background: var(--accent-color);
  position: absolute;
  bottom: -10px;
  left: 50%;
  border-bottom: 1px solid var(--accent-color);
  border-right: 1px solid var(--accent-color);
  transform: translateX(-50%) rotate(45deg);
}

.testimonial .pic {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin: 25px auto;
  overflow: hidden;
}

.testimonial .pic img {
  width: 100%;
  height: auto;
}

.testimonial .title {
  display: inline-block;
  font-size: 23px;
  font-weight: 700;
  color: #848484;
  text-transform: capitalize;
  margin: 0;
}

.testimonial .post {
  display: inline-block;
  font-size: 20px;
  color: #848484;
}

.owl-theme .owl-controls {
  background: #d9d9d9;
  margin-top: 10px;
  position: absolute;
  bottom: -34%;
  right: 0;
}

.owl-theme .owl-controls .owl-buttons div {
  width: 30px;
  height: 30px;
  line-height: 30px;
  border-radius: 50%;
  background: #34363b;
  opacity: 1;
  padding: 0;
}

.owl-prev:before,
.owl-next:before {
  content: "\f104";
  font-family: "fontawesome";
  font-size: 23px;
  font-weight: 700;
  color: #fff;
}

.owl-next:before {
  content: "\f105";
}

@media only screen and (max-width: 767px) {
  .testimonial-bg {
    padding: 50px 40px;
    margin: 50px 40px;
  }
  .testimonial-bg:before {
    width: 55px;
    height: 55px;
    line-height: 55px;
    font-size: 40px;
    margin: 21px 0px;
  }
  .testimonial .title,
  .testimonial .post {
    font-size: 18px; /* Adjusted for better readability */
  }
  .owl-theme .owl-controls {
    bottom: -16%;
  }
}

@media only screen and (max-width: 480px) {
  .testimonial-bg {
    padding: 30px 10px;
    margin: 30px 10px;
  }
  .testimonial-bg:before {
    width: 45px;
    height: 45px;
    line-height: 45px;
    font-size: 35px;
    margin: 15px 0px;
  }
  .testimonial .title,
  .testimonial .post {
    font-size: 16px;
  }
  .owl-theme .owl-controls {
    bottom: -11%;
  }

  .title-span-head{
    font-size: 37px;

  }

  .title-span-hd {
    font-size: 28px;
  }

}
}

@media only screen and (max-width: 360px) {
  .testimonial .title,
  .testimonial .post {
    font-size: 14px; /* Adjusted for smaller screens */
  }
  .owl-theme .owl-controls {
    bottom: -7%;
  }
}



/* footer section  */

.dk-footer {
  padding: 75px 0 0;
  background-color: #031C2E;
  position: relative;
  z-index: 2;
}

.dk-footer .contact-us {
  margin-top: 0;
  margin-bottom: 30px;
  padding-left: 15px;
}

.dk-footer .contact-us .contact-info {
  margin-left: 0;
}

.dk-footer .contact-us.contact-us-last {
  margin-left: 0;
}

.dk-footer .contact-icon i {
  font-size: 24px;
  top: -15px;
  position: relative;
  color: #007bff;
}

.footer-img {
  width: 100%;
  max-width: 207px;
  height: auto;
  background-color: #fff;
}

.dk-footer-box-info {
  position: relative;
  background: #032137;
  padding: 40px;
  z-index: 2;
  top: -122px;

}

.dk-footer-box-info .footer-social-link h3 {
  color: #fff;
  font-size: 24px;
  margin-bottom: 25px;
}

.dk-footer-box-info .footer-social-link ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.dk-footer-box-info .footer-social-link li {
  display: inline-block;
}

.dk-footer-box-info .footer-social-link a i {
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  text-align: center;
  line-height: 40px;
  background: #000;
  margin-right: 5px;
  color: #fff;
}

.dk-footer-box-info .footer-social-link a i.fa-facebook {
  background-color: #3B5998;
}

.dk-footer-box-info .footer-social-link a i.fa-twitter {
  background-color: #55ACEE;
}

.dk-footer-box-info .footer-social-link a i.fa-google-plus {
  background-color: #DD4B39;
}

.dk-footer-box-info .footer-social-link a i.fa-linkedin {
  background-color: #0976B4;
}

.dk-footer-box-info .footer-social-link a i.fa-instagram {
  background-color: #B7242A;
}

.footer-awarad {
  margin-top: 30px;
  display: flex;
  align-items: center;
}

.footer-awarad p {
  color: #fff;
  font-size: 24px;
  font-weight: 700;
  margin-left: 20px;
  padding-top: 15px;
}

.footer-info-text {
  margin: 26px 0 32px;
  color: #e3d8d8;
}

.footer-left-widget {
  padding-left: 15px;
}

.footer-widget .section-heading {
  margin-bottom: 35px;
}

.footer-widget h3 {
  font-size: 24px;
  color: #fff;
  position: relative;
  margin-bottom: 15px;
  max-width: fit-content;
}

.footer-widget ul {
  width: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-widget li {
  margin-bottom: 18px;
  width: 50%;
  float: left;
}

.footer-widget p {
  margin-bottom: 27px;
}

.footer-widget a {
  color: #878787;
  transition: all 0.3s;
}

.footer-widget a:hover {
  color: #007bff;
}

.dk-footer-form {
  position: relative;
}

.dk-footer-form input[type=email] {
  padding: 14px 28px;
  border-radius: 50px;
  background: #2E2E2E;
  border: 1px solid #2E2E2E;
}

.dk-footer-form input::placeholder {
  color: #878787;
  font-size: 14px;
}

.dk-footer-form button[type=submit] {
  position: absolute;
  top: 0;
  right: 0;
  padding: 12px 24px 12px 17px;
  border-top-right-radius: 25px;
  border-bottom-right-radius: 25px;
  border: 1px solid #007bff;
  background: #007bff;
  color: #fff;
}

.dk-footer-form button:hover {
  cursor: pointer;
}

@media (max-width: 767px) {
  .dk-footer .contact-us {
    padding-left: 15px;
  }

  .footer-widget ul {
    width: 100%;
  }

  .dk-footer-box-info {
    margin-bottom: 1px;
    top: -50px;
  }

  .footer-awarad {
    margin-top: 20px;
  }

  .footer-widget li {
    width: 100%;
  }


}


/* ==========================

    Contact

=============================*/
.contact-us {
  position: relative;
  z-index: 2;
  margin-top: 65px;
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  align-items: center;
}

.contact-icon {
  position: absolute;
}

.contact-icon i {
  font-size: 36px;
  top: -5px;
  position: relative;
  color: #007bff;
}

.contact-info {
  margin-left: 18px;
  color: #fff;

}

.contact-info h3 {
  font-size: 20px;
  color: #fff;
  margin-bottom: 0;
}

.copyright {
  padding: 28px 0;
  margin-top: 55px;
  background-color: #202020;
}

.copyright span,
.copyright a {
  color: #878787;
  -webkit-transition: all 0.3s linear;
  -o-transition: all 0.3s linear;
  transition: all 0.3s linear;
}

.copyright a:hover {
  color: #007bff;
}

.copyright-menu ul {
  text-align: right;
  margin: 0;
}

.copyright-menu li {
  display: inline-block;
  padding-left: 20px;
}

.back-to-top {
  position: relative;
  z-index: 2;
}

.back-to-top .btn-dark {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  padding: 0;
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: #2e2e2e;
  border-color: #2e2e2e;
  display: none;
  z-index: 999;
  -webkit-transition: all 0.3s linear;
  -o-transition: all 0.3s linear;
  transition: all 0.3s linear;
}

.back-to-top .btn-dark:hover {
  cursor: pointer;
  background: #FA6742;
  border-color: #FA6742;
}


/* our team page  */


section .bg-watermark {
  color: #1f1f1f;
  font-size: clamp(6rem, 1.3333rem + 14.9333vw, 20rem);
  font-weight: 800;
  position: absolute;
  z-index: -1;
  left: 50%;
  transform: translatex(-50%) translatey(-15%);
  user-select: none;
  letter-spacing: 0.5rem;
}

section span {
  text-transform: uppercase;
  display: block;
  /* font-size: 1.2rem; */
  color: #a3a3a3;
}

section h2 {
  font-size: clamp(3.5rem, 3rem + 1.6vw, 5rem);
  margin-top: -0.625rem;
  color: #fff;
}

section .cards {
  /* margin-top: 7rem; */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
  gap: 2rem;
}

@media screen and (min-width: 51rem) {
  section .cards {
    gap: 0;
    /* padding-bottom: 2.5rem; */
  }
}

section .cards .card {
  position: relative;
  cursor: pointer;
}

section .cards .card h3,
section .cards .card p {
  text-transform: capitalize;
}

section .cards .card h3 {
  font-size: clamp(1rem, 0.9167rem + 0.2667vw, 1.25rem);
  font-weight: 400;
  color: #f6f6f6;
}

section .cards .card p {
  font-size: clamp(0.85rem, 0.75rem + 0.32vw, 1.15rem);
  letter-spacing: 0.12rem;
  font-weight: 300;
  max-width: 100%;
}

section .cards .card::before {
  position: absolute;
  content: "";
  width: 5rem;
  height: 6.25rem;
  z-index: 0;
  transition: 0.3s ease-in-out;
  background: #f2709c;
  background: -webkit-linear-gradient(to left, #ff9472, #f2709c);
  background: linear-gradient(to left, #ff9472, #f2709c);
  top: -0.375rem;
  left: -0.375rem;
}

section .cards .card::after {
  position: absolute;
  inset: 0;
  content: "";
  width: 100%;
  height: 100%;
  background: #232526;
  background: -webkit-linear-gradient(to bottom, rgba(65, 67, 69, 0.2), rgba(8, 8, 8, 0.9));
  background: linear-gradient(to bottom, rgba(65, 67, 69, 0.2), rgba(8, 8, 8, 0.9));
}

section .cards .card img {
  filter: grayscale(100%);
  transition: 0.5s ease;
}

section .cards .card-content {
  position: absolute;
  bottom: 0;
  z-index: 99;
  left: 0;
  color: #fff;
  width: 100%;
  padding: 1.875rem 1.25rem;
  text-align: center;
}

section .cards .card-content ul {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.625rem;
  margin-top: 1.25rem;
  list-style: none;
}

section .cards .card:hover img {
  filter: grayscale(0%);
  transform: scale(1.05);
}

section .cards .card:hover::before {
  transform: scale(1.03);

}

section .cards .card:nth-child(1)::before {
  top: -0.375rem;
  left: -0.375rem;
}

@media screen and (min-width: 31.25rem) {
  section .cards .card:nth-child(2) {
    transform: translatey(15%);
  }
}

section .cards .card:nth-child(2)::before {
  bottom: -0.375rem;
  left: -0.375rem;
  top: auto;
}

section .cards .card:nth-child(3)::before {
  top: -0.375rem;
  left: -0.375rem;
}

.bttm {
  height: auto;
  margin-bottom: 10rem;
}

/* Capacity  */


.capabilities {
  padding: 70px 0px;
  /* background: #f8f8f8; */
}

.capabilities .card {
  border: none;
  height: 100%;
  padding: 10%;
  transition-duration: 300ms;
}

.capabilities .card .img-wrapper {
  height: 110px;
  display: flex;
  align-items: end;
}

.capabilities .card h3 {

  padding: 31px 0px 26px 0px;
  /* font-size: 35px; */
  color: #013d5b;
  min-height: 66px;
}

.capabilities .card a {
  font-size: 22px;
  font-weight: 600;
  padding-top: 30px;
}

.capabilities .card img {
  max-width: 90px;
}

.capsvg {
  max-width: 90px;
  max-height: 90px;
}





.capabilities .card:hover {
  transform: scale(1.05);
  box-shadow: 5px 5px 17px 7px rgba(0, 0, 0, 0.1);
}

.progress {
  height: 8px;
  border-radius: 8px
}

.progress div {
  background-color: lightcoral;
}



/*--------------------------------------------------------------
# Services Section
--------------------------------------------------------------*/
.services {
  background-color: color-mix(in srgb, var(--default-color), transparent 95%);
}

.services .service-item {
  padding: 25px;
  box-shadow: 0px 0 30px color-mix(in srgb, var(--default-color), transparent 90%);
  background-color: var(--contrast-color);
  height: 100%;
}

.services .service-item .icon {
  width: 45px;
  height: 45px;
  position: relative;
  margin-bottom: 30px;
}

.services .service-item .icon i {
  color: var(--heading-color);
  font-size: 50px;
  transition: ease-in-out 0.3s;
  z-index: 2;
  position: relative;
}

.services .service-item .icon:before {
  position: absolute;
  content: "";
  height: 100%;
  width: 100%;
  background: color-mix(in srgb, var(--heading-color), transparent 95%);
  border-radius: 50px;
  z-index: 1;
  top: 10px;
  right: -20px;
  transition: 0.3s;
}

.services .service-item h3 {
  color: color-mix(in srgb, var(--heading-color), transparent 20%);
  font-weight: 700;
  margin: 0 0 20px 0;
  padding-bottom: 8px;
  font-size: 20px;
  position: relative;
  display: inline-block;
  border-bottom: 4px solid color-mix(in srgb, var(--heading-color), transparent 90%);
  transition: 0.3s;
}

.services .service-item p {
  line-height: 24px;
  font-size: 14px;
  margin-bottom: 0;
}

.services .service-item .readmore {
  margin-top: 15px;
  display: inline-block;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
}

.services .service-item:hover .icon i {
  color: var(--heading-color);
}

.services .service-item:hover .icon:before {
  background: var(--accent-color);
}

.services .service-item:hover h3 {
  border-color: var(--accent-color);
  color: var(--heading-color);
}

.services .service-item:hover .readmore {
  color: var(--accent-color);
}



/*--------------------------------------------------------------
# Blog Posts Section
--------------------------------------------------------------*/
.blog-posts article {
  box-shadow: 0px 2px 20px color-mix(in srgb, var(--default-color), transparent 90%);
  transition: 0.3s;
  background-color: #ffffff;
}



.h-100 {
  height: 0%;
}

.blog-posts .post-img img {
  transition: 0.5s;
}

.blog-posts .post-date {
  background-color: #4c483ba3;
  color: var(--contrast-color);
  position: absolute;
  right: 0;
  bottom: 0;
  text-transform: uppercase;
  font-size: 13px;
  padding: 6px 12px;
  font-weight: 500;
}

.blog-posts .post-content {
  padding: 30px;
}

.blog-posts .post-title {
  font-size: 19px;
  color: var(--heading-color);
  font-weight: 700;
  transition: 0.3s;
  margin-bottom: 15px;
}

.blog-posts .meta i {
  font-size: 16px;
  color: var(--accent-color);
}

.blog-posts .meta span {
  font-size: 15px;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
}

/* 
.blog-posts p {
  margin-top: 20px;
} */

.blog-posts hr {
  color: color-mix(in srgb, var(--default-color), transparent 60%);
  margin-bottom: 15px;
}

.blog-posts .readmore {
  display: flex;
  align-items: center;
  font-weight: 600;
  line-height: 1;
  transition: 0.3s;
  color: color-mix(in srgb, var(--heading-color), transparent 20%);
}

.blog-posts .readmore i {
  line-height: 0;
  margin-left: 6px;
  font-size: 16px;
}

.blog-posts article:hover .post-title,
.blog-posts article:hover .readmore {
  color: var(--accent-color);
}

.blog-posts article:hover .post-img img {
  transform: scale(1.1);
}

/*--------------------------------------------------------------
# Pagination 2 Section
--------------------------------------------------------------*/
.pagination-2 {
  padding-top: 0;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
}

.pagination-2 ul {
  display: flex;
  padding: 0;
  margin: 0;
  list-style: none;
}

.pagination-2 li {
  margin: 0 5px;
  transition: 0.3s;
}

.pagination-2 li a {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  padding: 7px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pagination-2 li.active,
.pagination-2 li:hover {
  background: var(--accent-color);
  color: var(--contrast-color);
}

.pagination-2 li.active a,
.pagination-2 li:hover a {
  color: var(--contrast-color);
}

/*--------------------------------------------------------------
# Blog Details Section
--------------------------------------------------------------*/
.blog-details {
  padding-bottom: 30px;
}

.blog-details .article {
  /* padding: 30px; */
  /* box-shadow: 0 4px 16px color-mix(in srgb, var(--default-color), transparent 90%); */
}

.blog-details .post-img {
  margin: -30px -30px 20px -30px;
  overflow: hidden;
}

.blog-details .title {
  color: var(--heading-color);
  font-size: 28px;
  font-weight: 700;
  padding: 0;
  margin: 30px 0;
}

.blog-details .content {
  margin-top: 20px;
}

.blog-details .content h3 {
  font-size: 22px;
  margin-top: 30px;
  font-weight: bold;
}

.blog-details .content blockquote {
  overflow: hidden;
  background-color: color-mix(in srgb, var(--default-color), transparent 95%);
  padding: 60px;
  position: relative;
  text-align: center;
  margin: 20px 0;
}

.blog-details .content blockquote p {
  color: var(--default-color);
  line-height: 1.6;
  margin-bottom: 0;
  font-style: italic;
  font-weight: 500;
  font-size: 22px;
}

.blog-details .content blockquote:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background-color: var(--accent-color);
  margin-top: 20px;
  margin-bottom: 20px;
}

.blog-details .meta-top {
  margin-top: 20px;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
}

.blog-details .meta-top ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  align-items: center;
  padding: 0;
  margin: 0;
}

.blog-details .meta-top ul li+li {
  padding-left: 20px;
}

.blog-details .meta-top i {
  font-size: 16px;
  margin-right: 8px;
  line-height: 0;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
}

.blog-details .meta-top a {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  font-size: 14px;
  display: inline-block;
  line-height: 1;
}

.blog-details .meta-bottom {
  padding-top: 10px;
  border-top: 1px solid color-mix(in srgb, var(--default-color), transparent 90%);
}

.blog-details .meta-bottom i {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  display: inline;
}

.blog-details .meta-bottom a {
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  transition: 0.3s;
}

.blog-details .meta-bottom a:hover {
  color: var(--accent-color);
}

.blog-details .meta-bottom .cats {
  list-style: none;
  display: inline;
  padding: 0 20px 0 0;
  font-size: 14px;
}

.blog-details .meta-bottom .cats li {
  display: inline-block;
}

.blog-details .meta-bottom .tags {
  list-style: none;
  display: inline;
  padding: 0;
  font-size: 14px;
}

.blog-details .meta-bottom .tags li {
  display: inline-block;
}

.blog-details .meta-bottom .tags li+li::before {
  padding-right: 6px;
  color: var(--default-color);
  content: ",";
}

.blog-details .meta-bottom .share {
  font-size: 16px;
}

.blog-details .meta-bottom .share i {
  padding-left: 5px;
}

/*--------------------------------------------------------------
# Blog Author Section
--------------------------------------------------------------*/
.blog-author {
  padding: 10px 0 40px 0;
}

.blog-author .author-container {
  padding: 20px;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--default-color), transparent 90%);
}

.blog-author img {
  max-width: 120px;
  margin-right: 20px;
}

.blog-author h4 {
  font-weight: 600;
  font-size: 20px;
  margin-bottom: 0px;
  padding: 0;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.blog-author .social-links {
  margin: 0 10px 10px 0;
}

.blog-author .social-links a {
  color: color-mix(in srgb, var(--default-color), transparent 60%);
  margin-right: 5px;
}

.blog-author p {
  font-style: italic;
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  margin-bottom: 0;
}

/*--------------------------------------------------------------
# Blog Comments Section
--------------------------------------------------------------*/
.blog-comments {
  padding-top: 10px;
}

.blog-comments .comments-count {
  font-weight: bold;
}

.blog-comments .comment {
  margin-top: 30px;
  position: relative;
}

.blog-comments .comment .comment-img {
  margin-right: 14px;
}

.blog-comments .comment .comment-img img {
  width: 60px;
}

.blog-comments .comment h5 {
  font-size: 16px;
  margin-bottom: 2px;
}

.blog-comments .comment h5 a {
  font-weight: bold;
  color: var(--default-color);
  transition: 0.3s;
}

.blog-comments .comment h5 a:hover {
  color: var(--accent-color);
}

.blog-comments .comment h5 .reply {
  padding-left: 10px;
  color: color-mix(in srgb, var(--default-color), transparent 20%);
}

.blog-comments .comment h5 .reply i {
  font-size: 20px;
}

.blog-comments .comment time {
  display: block;
  font-size: 14px;
  color: color-mix(in srgb, var(--default-color), transparent 40%);
  margin-bottom: 5px;
}

.blog-comments .comment.comment-reply {
  padding-left: 40px;
}

.blog-comments .reply-form {
  margin-top: 30px;
  padding: 30px;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--default-color), transparent 90%);
}

.blog-comments .reply-form h4 {
  font-weight: bold;
  font-size: 22px;
}

.blog-comments .reply-form p {
  font-size: 14px;
}

.blog-comments .reply-form input {
  background-color: var(--background-color);
  color: var(--default-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 70%);
  font-size: 14px;
  border-radius: 4px;
  padding: 10px 10px;
}

.blog-comments .reply-form input:focus {
  box-shadow: none;
  border-color: var(--accent-color);
}

.blog-comments .reply-form textarea {
  background-color: var(--background-color);
  color: var(--default-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 70%);
  border-radius: 4px;
  padding: 10px 10px;
  font-size: 14px;
  height: 120px;
}

.blog-comments .reply-form textarea:focus {
  box-shadow: none;
  border-color: var(--accent-color);
}

.blog-comments .reply-form .form-group {
  margin-bottom: 25px;
}

.blog-comments .reply-form .btn-primary {
  border-radius: 4px;
  padding: 10px 20px;
  border: 0;
  background-color: var(--accent-color);
  color: var(--contrast-color);
}

.blog-comments .reply-form .btn-primary:hover {
  color: var(--contrast-color);
  background-color: color-mix(in srgb, var(--accent-color), transparent 20%);
}


/*--------------------------------------------------------------
# Widgets
--------------------------------------------------------------*/

.sidebar {
  position: relative;
}


.widgets-container {
  position: -webkit-sticky;
  position: sticky;
  top: 0px;
  background-color: rgb(238, 233, 200);
  padding: 30px;
  margin: 60px 0 30px 0;
  border-radius: 30px;
  box-shadow: 0 4px 16px color-mix(in srgb, var(--default-color), transparent 90%);
}

.widget-title {
  color: var(--heading-color);
  font-size: 20px;
  font-weight: 700;
  padding: 0;
  margin: 0 0 20px 0;
}

.widget-item {
  margin-bottom: 40px;
}

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

.search-widget form {
  background: var(--background-color);
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 70%);
  padding: 3px 10px;
  position: relative;
}

.search-widget form input[type=text] {
  border: 0;
  padding: 4px;
  border-radius: 4px;
  width: calc(100% - 40px);
  background-color: var(--background-color);
  color: var(--default-color);
}

.search-widget form input[type=text]:focus {
  outline: none;
}

.search-widget form button {
  background: var(--accent-color);
  color: var(--contrast-color);
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  border: 0;
  font-size: 16px;
  padding: 0 15px;
  margin: -1px;
  transition: 0.3s;
  border-radius: 0 4px 4px 0;
  line-height: 0;
}

.search-widget form button i {
  line-height: 0;
}

.search-widget form button:hover {
  background: color-mix(in srgb, var(--accent-color), transparent 20%);
}

.categories-widget ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.categories-widget ul li {
  padding-bottom: 10px;
}

.categories-widget ul li:last-child {
  padding-bottom: 0;
}

.categories-widget ul a {
  color: color-mix(in srgb, var(--default-color), transparent 20%);
  transition: 0.3s;
}

.categories-widget ul a:hover {
  color: var(--accent-color);
}

.categories-widget ul a span {
  padding-left: 5px;
  color: color-mix(in srgb, var(--default-color), transparent 50%);
  font-size: 14px;
}

.recent-posts-widget .post-item {
  display: flex;
  margin-bottom: 15px;
}

.recent-posts-widget .post-item:last-child {
  margin-bottom: 0;
}

.recent-posts-widget .post-item img {
  width: 80px;
  margin-right: 15px;
}

.recent-posts-widget .post-item h4 {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 5px;
}

.recent-posts-widget .post-item h4 a {
  color: var(--default-color);
  transition: 0.3s;
}

.recent-posts-widget .post-item h4 a:hover {
  color: var(--accent-color);
}

.recent-posts-widget .post-item time {
  display: block;
  font-style: italic;
  font-size: 14px;
  color: color-mix(in srgb, var(--default-color), transparent 50%);
}

.tags-widget {
  margin-bottom: -10px;
}

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

.tags-widget ul li {
  display: inline-block;
}

.tags-widget ul a {
  color: color-mix(in srgb, var(--default-color), transparent 30%);
  font-size: 14px;
  padding: 6px 14px;
  margin: 0 6px 8px 0;
  border: 1px solid color-mix(in srgb, var(--default-color), transparent 60%);
  display: inline-block;
  transition: 0.3s;
}

.tags-widget ul a:hover {
  background: var(--accent-color);
  color: var(--contrast-color);
  border: 1px solid var(--accent-color);
}

.tags-widget ul a span {
  padding-left: 5px;
  color: color-mix(in srgb, var(--default-color), transparent 60%);
  font-size: 14px;
}


.blog-contact-box {
  /* background-color: #ad9c68;
   border-radius: 15px;
  padding: 20px;  */
  text-align: center;

}

.blog-contact-header {
  font-size: 1.5rem;
  font-weight: 600;
  margin-bottom: 10px;
}

.blog-contact-description {
  font-size: 1rem;
  margin-bottom: 20px;
}

.blog-contact-button {
  border-radius: 50px;
  width: 100%;
  padding: 10px;
  font-size: 1.2rem;
}

.blog-contact-info {
  display: flex;
  justify-content: center;
  align-items: center;
  /* gap: 20px; */
  margin-top: 20px;
}

.blog-contact-info i {
  margin-right: 5px;
  color: grey;
  transition: color 0.3s;
}

.blog-contact-info:hover i {
  color: blue;
}

.blog-contact-info {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.2rem;
  font-weight: bold;
}

.blog-contact-info i {
  margin-right: 10px;
  color: rgb(245, 244, 244);
  transition: color 0.3s;
  background-color: #000000;
  border-radius: 50%;
  padding: 10px;
}

.blog-contact-info:hover i {
  color: rgb(148, 148, 214);
  background-color: #d32929;

}

@media (max-width: 767px) {

  /* Adjust padding or margins */
  .hero {
    padding: 80px 0;
    /* Example adjustment */
  }

  /* Responsive font sizes or margins */
  h1 {
    font-size: 32px;
    /* Example adjustment */
  }


  .img__back {
    display: none;

  }

  .attorneys__back {

    display: none;

  }
}

/* Adjustments for medium devices */
@media (min-width: 768px) and (max-width: 991px) {
  /* Example adjustments */
}

/* Adjustments for large devices */
@media (min-width: 992px) and (max-width: 1199px) {
  /* Example adjustments */
}

/* Adjustments for extra large devices */
@media (min-width: 1200px) {
  /* Example adjustments */
}