/************* TABLE OF CONTENTS *************
1. Fonts
2. Reset
3. Global
4. Main Header
5. Banner Section
6. Services Section / Two
7. Welcome Section
8. Counter Section
9. Practice Section
10. Fluid Section One / Two
11. Team Section
12. Testimonail Section
13. Clients Section / Two
14. CTA Section
15. Main Footer Section
16. Page Title Section
17. Case Section
18. Case Study Section
19. Services Detail Section
20. Map Section
21. Contact Form Section
**********************************************/

@import url('/assets/css/new_css_2/font-awesome.css');
@import url('/assets/css/new_css_2/flaticon.css');
@import url('/assets/css/new_css_2/animate.css');
@import url('/assets/css/new_css_2/owl.css');

@import url('/assets/css/new_css_2/animation.css');
@import url('/assets/css/new_css_2/jquery-ui.css');
@import url('/assets/css/new_css_2/custom-animate.css');
@import url('/assets/css/new_css_2/jquery.fancybox.min.css');
@import url('/assets/css/new_css_2/jquery.mCustomScrollbar.min.css');
@import url('/assets/css/new_css_2/vendor.css');

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap');



:root {
  /* 🎨 Bộ màu tối ưu */
  --color-primary-bg-1: #0A1E3F;  /* Navy chính */
  --color-primary-bg-2: #0A1E3F; /*#133E87;  /* Navy nhấn */
  --color-secondary-bg: #0A1E3F;  /*#1C376C;  /* Tùy chọn: xanh đậm trung gian */
  --color-accent-warm-1: #F28C28; /* Cam vàng nổi bật */
  --color-accent-warm-2: #F28C28; /*#F2B705; /* Vàng nhẹ tạo gradient ấm */
  --color-text-highlight: #ffffff; 
  --color-text-warm-brown: #333333;
  --color-accent-pink: #D72638;   /* Đỏ đô cho cảnh báo / nhấn */
  --color-border-light: #9BBCEB;  /* Xanh sáng dùng cho border */
  --color-box-bg: #F5F7FA;        /* Nền sáng tinh tế */
  --color-success: #28A745;
  --color-white: #FFFFFF;
  --color-offwhite: #FAFAFA;
  --color-black: #000000;
  --color-shadow: rgba(0, 0, 0, 0.15);
  --glass-bg: rgba(255, 255, 255, 0.2);

  /* Gán lại các biến dẫn xuất */
  --color-primary-bg: var(--color-primary-bg-1);
  --color-accent-warm: var(--color-accent-warm-1);
  --color-accent-blue: var(--color-primary-bg);
  --color-text-dark-brown: var(--color-primary-bg);
  --color-text-muted: var(--color-text-warm-brown);
  --color-neutral-gray-brown: var(--color-text-warm-brown);
  --color-chatbox-bg: var(--color-box-bg);
  --color-bg-light-gray: var(--color-box-bg);
  --color-frame-beige: var(--color-box-bg);
  --color-frame-bg: var(--color-box-bg);
  --overlay-bg: var(--color-box-bg);
  --overlay-border: var(--glass-bg);

  --glass-blur: blur(10px);
  --font-main: 'Poppins', 'Segoe UI', sans-serif;
}




.map-outer {
    position: relative;
    z-index: 1;
}
#map_us, #map, #map-small {
    height: 400px;
    width: 100%;
}

.leaflet-popup-content-wrapper {
    background: var(--color-white);
    border: 1px solid var(--color-white);
    border-radius: 8px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
    padding: 8px 12px;
    max-width: 300px;
}

.leaflet-popup-content {
    font-size: 16px;
    font-weight: normal;
    color: var(--color-primary-bg);
    text-align: center;
    white-space: normal; 
    word-wrap: break-word; 
    min-width: 150px; 
}

.leaflet-popup-tip {
    background: var(--color-white);
}

@media screen and (max-width: 768px) {
    #map_us {
        height: 250px !important;
    }
    #map {
        display: none;
    }
    #map-small {
        display: block;
        height: 300px !important;
    }
}

@media screen and (min-width: 769px) {
    #map {
        display: block;
    }
    #map-small {
        display: none;
    }
}

.frame_image_1 {
  position: relative;
  width: 500px;
  height: 500px;
  max-width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rectangle_1 {
  position: absolute;
  box-sizing: border-box;
}

.main_1 {
  position: absolute;
  top: 20px; 
  left: 20px; 
  width: 420px;
  height: 420px;
  background: linear-gradient(45deg, #ffffff, #f4f4f4);
  z-index: 1;
  overflow: hidden;
}

.main_1 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.left_1 {
  position: absolute;
  top: calc(20px - 10px); 
  left: calc(20px - 10px); 
  width: calc(140px + 20px); 
  height: calc(420px + 20px); 
  background: linear-gradient(45deg, var(--color-primary-bg-1), var(--color-primary-bg-2));
}

.right_1 {
  position: absolute;
  top: calc(20px + 420px - 300px + 10px); 
  left: 370px;
  width: 100px;
  height: 300px;
  border: 3px solid var(--color-primary-bg);
  background-color: transparent;
}

@media (max-width: 768px) {
  .frame_image_1 {
    width: 90vw;
    height: 90vw;
  }

  .main_1 {
    top: 10px;
    left: 10px;
    width: 80%;
    height: 80%;
  }

  .left_1 {
    top: calc(10px - 10px);
    left: calc(10px - 10px);
    width: calc(30% + 20px);
    height: calc(80% + 20px);
  }

  .right_1 {
    top: calc(10px + 80% - 50% + 10px); 
    left: 75%;
    width: 15%;
    height: 50%;
  }
}

@media (max-width: 480px) {
  .frame_image_1 {
    width: 80vw;
    height: 80vw;
  }

  .main_1 {
    top: 5px;
    left: 5px;
    width: 75%;
    height: 75%;
  }

  .left_1 {
    top: calc(5px - 10px);
    left: calc(5px - 10px);
    width: calc(30% + 20px);
    height: calc(75% + 20px);
  }

  .right_1 {
    top: calc(5px + 75% - 35% + 10px); 
    left: 70%;
    width: 20%;
    height: 35%;
  }
}

.frame_image_2 {
  position: relative;
  width: 500px;
  height: 220px;
  max-width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rectangle_2 {
  position: absolute;
  box-sizing: border-box;
}

.main_2 {
  position: absolute;
  top: 20px; 
  left: 20px; 
  width: 400px;
  height: 160px;
  background: linear-gradient(45deg, #ffffff, #f4f4f4);
  z-index: 1;
  overflow: hidden;
}

.main_2 img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.left_2 {
  position: absolute;
  top: calc(20px - 10px); 
  left: calc(20px - 10px); 
  width: calc(140px + 20px); 
  height: calc(160px + 20px); 
  background: linear-gradient(45deg, var(--color-primary-bg-1), var(--color-primary-bg-2));
}

.right_2 {
  position: absolute;
  top: calc(20px + 160px - 140px + 10px); 
  left: 370px;
  width: 80px;
  height: 140px;
  border: 3px solid var(--color-primary-bg);
  background-color: transparent;
}

@media (max-width: 768px) {
  .frame_image_2 {
    width: 400px;
    height: 160px;
  }

  .main_2 {
    top: 10px;
    left: 10px;
    width: 80%;
    height: 80%;
  }

  .left_2 {
    top: calc(10px - 10px);
    left: calc(10px - 10px);
    width: calc(30% + 20px);
    height: calc(80% + 20px);
  }

  .right_2 {
    top: calc(10px + 80% - 50% + 10px); 
    left: 75%;
    width: 15%;
    height: 50%;
  }
}

@media (max-width: 480px) {
  .frame_image_2 {
    width: 360px;
    height: 130px;
  }

  .main_2 {
    top: 5px;
    left: 5px;
    width: 75%;
    height: 75%;
  }

  .left_2 {
    top: calc(5px - 10px);
    left: calc(5px - 10px);
    width: calc(30% + 20px);
    height: calc(75% + 20px);
  }

  .right_2 {
    top: calc(5px + 75% - 35% + 10px); 
    left: 70%;
    width: 20%;
    height: 35%;
  }
}

.preview {
	position: relative;
	display: inline-block;
	margin: 10px;
}
.preview img {
	width: 100px;
	height: 100px;
	margin-right: 10px;
}

.preview .delete {
	width: 24px;
	height: 24px;
	
	background-color: rgba(0, 0, 0, 0.5);
	position: absolute;
	top: 5px;
	right: 15px;
	text-align: center;
	line-height: 24px;
	z-index: 1;
	cursor: pointer;
}

.preview .delete:hover {
	background: linear-gradient(45deg, #DC143C, #FF5A5A);
}

.preview .delete:before {
	font-family: 'FontAwesome';
	content: '\2716';
	font-size: 16px;
	color: var(--color-white);
}

/* ======================
   Chatbox Button
   ====================== */
#chatbox-button {
    position: fixed;
    right: 15px;
    bottom: 70px;
    width: 42px;
    height: 42px;
    background: linear-gradient(45deg, var(--color-accent-warm-1) 0%, var(--color-accent-warm-2) 100%);
    color: var(--color-white);
    cursor: pointer;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
    font-size: 24px;
    transition: background-color 0.3s, transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    z-index: 1000;
    overflow: hidden;
}

#chatbox-button:hover {
    transform: scale(1.2);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
}

/* ======================
   Chatbox Container
   ====================== */
/* ======================
   Chatbox Container
   ====================== */
#chatbox-container {
  position: fixed;
  right: 15px;
  bottom: 110px;
  width: 400px;
  height: 580px;
  max-width: 95%;
  background: linear-gradient(45deg, #e8f3fc, #cce0f5);
  border: 1px solid var(--color-accent-warm, #c8dff5);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  z-index: 1000;

  /* Ẩn hoàn toàn khi chưa bật */
  transform: translateY(100%);
  opacity: 0;
  visibility: hidden;         /* ✅ Ẩn khỏi luồng hiển thị */
  pointer-events: none;       /* ✅ Không chặn thao tác */
  transition: transform 0.35s ease-in-out, opacity 0.35s ease-in-out, visibility 0.35s;
  overflow: hidden;

  min-width: 280px;
  min-height: 200px;
  max-width: 100vw;
  max-height: 100vh;
}

/* khi bật chat */
#chatbox-container.active {
  transform: translateY(0);
  opacity: 1;
  visibility: visible;        /* ✅ Cho phép hiển thị */
  pointer-events: auto;       /* ✅ Cho phép click */
}


/* fullscreen */
#chatbox-container.fullscreen {
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  border-radius: 0 !important;
  transform: none !important;
  resize: none;
}

/* ======================
   Resizer Handles (4 cạnh + 4 góc)
   ====================== */
.chatbox-resizer {
  position: absolute;
  z-index: 1001;
}

/* Cạnh */
.chatbox-resizer.top    { top: 0; left: 0; right: 0; height: 6px; cursor: ns-resize; }
.chatbox-resizer.bottom { bottom: 0; left: 0; right: 0; height: 6px; cursor: ns-resize; }
.chatbox-resizer.left   { top: 0; bottom: 0; left: 0; width: 6px; cursor: ew-resize; }
.chatbox-resizer.right  { top: 0; bottom: 0; right: 0; width: 6px; cursor: ew-resize; }

/* Góc */
.chatbox-resizer.tl { top: 0; left: 0; width: 12px; height: 12px; cursor: nwse-resize; }
.chatbox-resizer.tr { top: 0; right: 0; width: 12px; height: 12px; cursor: nesw-resize; }
.chatbox-resizer.bl { bottom: 0; left: 0; width: 12px; height: 12px; cursor: nesw-resize; }
.chatbox-resizer.br { bottom: 0; right: 0; width: 12px; height: 12px; cursor: nwse-resize; }

/* Ẩn handle khi fullscreen */
#chatbox-container.fullscreen .chatbox-resizer {
  display: none;
}

/* ======================
   Chatbox Header
   ====================== */
#chatbox-header {
    background: linear-gradient(90deg, var(--color-accent-warm-1) 0%, var(--color-accent-warm-2) 100%);
    color: var(--color-white);
    padding: 10px;
    font-weight: bold;
    display: flex;
    align-items: center;
    font-size: 16px;
    justify-content: space-between;
    cursor: move; /* cho phép kéo cả hộp chat */
}

.chatbox-header-logo {
    height: 30px;
    margin-right: 15px;
}

#chatbox-controls {
    display: flex;
    gap: 10px;
    align-items: center;
}

#chatbox-controls i,
#chatbox-close {
    font-size: 20px;
    cursor: pointer;
    color: var(--color-white);
    transition: color 0.3s;
}

#chatbox-close {
    font-size: 30px;
    font-weight: normal;
    background: linear-gradient(45deg, #DC143C, #FF5A5A);
    margin-left: auto;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#chatbox-close:hover {
    transform: scale(1.1);
}

/* ======================
   Chatbox Intro
   ====================== */
#chatbox-intro {
    background: linear-gradient(45deg, var(--color-primary-bg-1), var(--color-primary-bg-2));
    text-align: left;
    border-bottom: 1px solid #ccc;
    color: var(--color-white);
    padding-bottom: 10px;
}

.chatbox-intro-header {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    margin-bottom: 10px;
    padding: 10px;
    box-sizing: border-box;
}

.chatbox-logo {
    width: 50px;
    height: 50px;
    object-fit: contain;
    border: 1px solid var(--color-white);
    border-radius: 10%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.chatbox-intro-header p { font-size: 16px; }

#chatbox-intro a {
    background: linear-gradient(45deg, #ffffff, #f4f4f4);
    font-weight: bold;
    padding: 10px;
    border-radius: 20px;
    display: inline-block;
}
#chatbox-intro a:hover {
    background: linear-gradient(45deg, var(--color-accent-warm-1), var(--color-accent-warm-2));
    color: var(--color-white);
}
#chatbox-intro strong {
    font-size: 16px;
    font-weight: bold;
    color: var(--color-accent-warm);
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

/* ======================
   Messages
   ====================== */
#chatbox-content {
    padding: 10px;
    display: flex;
    flex-direction: column;
    height: calc(100% - 50px);
}

#chatbox-messages {
    flex-grow: 1;
    padding: 10px;
    border-radius: 5px;
    overflow-y: auto;
    border: 1px solid #ddd;
    background: linear-gradient(45deg, #ffffff, #f4f4f4);
    scroll-behavior: smooth;
    margin-bottom: 10px;
}

#chatbox-messages div {
    background: linear-gradient(45deg, #ffffff, #f4f4f4);
    color: var(--color-text-warm-brown);
    font-size: 16px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.message-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.message-content {
    flex: 1;
    padding: 8px 12px;
    border-radius: 10px;
    background: var(--color-text-muted);
    animation: fadeIn 0.5s ease-out;
}

/* ======================
   Input
   ====================== */
#chatbox-input-container {
    display: flex;
    align-items: center;
    background: white;
    padding: 8px;
    margin-top: auto;
    border-radius: 10px;
}

#chatbox-home-btn,
#chatbox-send-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background-color: #fff;
    color: var(--five-color);
    border: none;
    font-size: 20px;
    cursor: pointer;
}

#chatbox-home-btn:hover,
#chatbox-send-btn:hover {
    color: var(--color-accent-warm);
}

#chatbox-input {
    flex-grow: 1;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin: 0 8px;
    font-size: 16px;
    outline: none;
}

/* ======================
   Message Colors
   ====================== */
.user-message { color: var(--color-accent-blue); font-weight: bold; }
.lawconnect-message { color: var(--color-accent-warm); font-weight: bold; }

/* ======================
   Animation
   ====================== */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ======================
   Responsive
   ====================== */
@media (max-width: 768px) {
    #chatbox-container { width: 92%; right: 10px; bottom: 80px; height: 70vh; }
    #chatbox-header { font-size: 16px; padding: 8px; }
    #chatbox-input { font-size: 16px; padding: 8px; }
    #chatbox-messages { padding: 8px; }
}

@media (max-width: 480px) {
    #chatbox-container { width: 90%; height: 90%; }
    .chatbox-intro-header p, #chatbox-intro strong { font-size: 16px; }
    #chatbox-controls i { font-size: 16px; }
    #chatbox-close { font-size: 22px; }
    .chatbox-header-logo { height: 24px; }
    #chatbox-send-btn, #chatbox-home-btn { width: 30px; height: 30px; }
}


/* ===========================
   LAWYER CARDS IN CHATBOT
   =========================== */
.lawyer-cards-2 {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 10px 0;
    width: 100%;
}

.lawyer-cards-2-title {
    font-size: 14px;
    font-weight: 600;
    color: #444;
    margin: 4px 0 8px;
    padding-left: 4px;
}

.lawyer-card-2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 14px;
    padding: 12px;
    box-shadow: 0 3px 8px rgba(0,0,0,0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    animation: fadeIn 0.4s ease-in-out;
}

.lawyer-card-2:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 12px rgba(0,0,0,0.15);
}

.lawyer-card-2 img {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 12px;
    border: 2px solid var(--color-accent-warm, #f39c12);
    flex-shrink: 0;
}

.lawyer-card-2 .lawyer-info {
    flex-grow: 1;
    min-width: 0; /* tránh text bị tràn */
}

.lawyer-card-2 .lawyer-info h4 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--color-accent-blue, #0066cc);
    white-space: normal;   /* Cho phép xuống dòng */
    overflow: visible;     /* Không cắt tên */
    text-overflow: unset;
    display: block;
}

.lawyer-card-2 .lawyer-info p {
    margin: 2px 0 0;
    font-size: 13px;
    color: #555;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;      /* Giới hạn 2 dòng */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}


/* Nút xem chi tiết */
.lawyer-card-2 a {
    text-decoration: none;
    background: linear-gradient(45deg, var(--color-accent-warm-1, #ff9800), var(--color-accent-warm-2, #f44336));
    color: #fff;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    flex-shrink: 0;
    transition: background 0.3s ease, transform 0.2s ease;
}

.lawyer-card-2 a:hover {
    background: linear-gradient(45deg, #ff6a00, #e53935);
    transform: scale(1.05);
}

/* Hiệu ứng fade in khi load card */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Responsive: Thu gọn khi màn hình nhỏ */
@media (max-width: 400px) {
    .lawyer-card-2 {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
        gap: 8px;
    }

    .lawyer-card-2 img {
        margin: 0 0 6px 0;
    }

    .lawyer-card-2 a {
        align-self: flex-end;
    }
}




.arrow-down {
	text-align: center;
	margin-top: 10px;
}

.scroll-down {
	text-decoration: none;
}

.bounce {
	animation: bounce 3s infinite ease-in-out;
	display: inline-block;
}

@keyframes bounce {
	0%, 20%, 50%, 80%, 100% {
		transform: translateY(0);
	}
	40% {
		transform: translateY(8px);
	}
	60% {
		transform: translateY(4px);
	}
}

html {
	scroll-behavior: auto;
}

	.search-container {
	  display: flex; 
	  justify-content: center; 
	  align-items: center; 
	  height: auto; 
	  border: 1px solid var(--color-text-dark-brown);
	  border-radius: 10px;
	  padding: 20px;
	}

	.results-list {
		display: flex;
		flex-wrap: wrap;
		gap: 20px;
		margin: 5px;
	}

	.result-item {
		background-image: linear-gradient(to bottom, var(--color-frame-bg), var(--color-white));
		padding: 20px;

		box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); 
		border-radius: 12px;
		transition: transform 0.3s ease, box-shadow 0.3s ease;
		flex: 1 1 calc(50% - 20px);
	}

	.result-item:hover {
		transform: translateY(-5px);
		box-shadow: 0 6px 15px rgba(0, 0, 0, 0.5); 
	}

	.result-item h3 {
		margin-bottom: 10px;
	}

	.result-item a {
		color: var(--color-accent-warm);
		text-decoration: none;
		font-weight: 600;
		font-size: 16px;
	}

	.result-item a:hover {
		color: #0056b3;
		text-decoration: underline;
	}

	.result-item .content {
		color: #333;
		font-size: 16px;
		line-height: 1.6;
	}

	.result-item .content:after {
		content: "...";
	}

	.results-list .no_result {
	  color: #ff4d4d; 
	  background-color: #fff; 
	  border: 2px solid #ff0000; 
	  padding: 15px 20px; 
	  font-weight: bold; 
	  text-align: center; 
	  border-radius: 8px; 
	  box-shadow: 0 4px 10px rgba(255, 0, 0, 0.5); 
	  animation: pulse 1.5s infinite; 
	  text-transform: uppercase; 
	}

	
	@keyframes pulse {
	  0% {
		transform: scale(1);
		box-shadow: 0 0 10px rgba(255, 0, 0, 0.7);
	  }
	  50% {
		transform: scale(1.05);
		box-shadow: 0 0 20px rgba(255, 0, 0, 1);
	  }
	  100% {
		transform: scale(1);
		box-shadow: 0 0 10px rgba(255, 0, 0, 0.7);
	  }
	}

.dropdown-search-container {
    position: fixed; 
    top: 0;
    left: 0;
    right: 0;
    background: linear-gradient(45deg, var(--color-primary-bg-1), var(--color-primary-bg-2));
    box-shadow: 0 5px 15px var(--color-chatbox-bg);
    padding: 10px 20px;
    visibility: hidden; 
    opacity: 0; 
    transform: translateY(-100%); 
    z-index: 1;
    transition: all 0.4s ease-in-out;
}

.dropdown-search-container.active {
    visibility: visible;
    opacity: 1;
    transform: translateY(0); 
}

#search-input-container {
    display: flex;
    align-items: center;
    width: 100%; 
}

#search-input-field {
    flex: 1; 
    border: 1px solid #DDDDDD;
    outline: none;
    font-size: 16px;
    padding: 12px 15px;
    border-radius: 4px;
    transition: all 0.3s ease-in-out;
    background: linear-gradient(45deg, var(--color-primary-bg-1), var(--color-primary-bg-2));
    color: var(--color-white);
}

.submit-search-btn {
    background: linear-gradient(45deg, var(--color-accent-warm-1) 0%, var(--color-accent-warm-2) 100%);
    border: none;
    cursor: pointer;
    padding: 12px 20px;
    font-size: 16px;
    color: var(--color-white);
    border-radius: 4px;
    margin-left: 8px;
    transition: all 0.3s ease;
}

.submit-search-btn:hover {
    background-color: #E56A00;
}

#toggle-search-btn {
    display: inline-block;
    border: 1px solid var(--color-accent-warm);
    cursor: pointer;
    font-size: 16px;
    padding: 0px 10px;
    border-radius: 4px;
    transition: all 0.3s ease;
    position: relative; 
    
}

#toggle-search-btn:hover {
    background: linear-gradient(45deg, var(--color-accent-warm-1) 0%, var(--color-accent-warm-2) 100%);
    color: var(--color-white);
}

#toggle-search-btn:hover i {
	color: var(--color-white);
}

@media (max-width: 768px) {
    #search-input-field {
        font-size: 16px;
    }
    .submit-search-btn {
        padding: 10px 15px;
        font-size: 16px;
    }
}

.page-title-2{
	position:relative;
	padding:80px 0px 80px;
	background: url('/images/common/1.jpg') center center / cover no-repeat fixed;
	opacity: 0.85;
	background-size:cover;
	text-align:center;
	background-repeat:no-repeat;
	background-position:center;
	background-attachment: fixed;
}

.page-title-2.style-two{
	padding-bottom:120px;
}

.page-title-2:before{
	position:absolute;
	content:'';
	left:0px;
	top:0px;
	right:0px;
	bottom:0px;
	background: linear-gradient(45deg, var(--color-primary-bg-1), var(--color-primary-bg-2)); 
	opacity: 0.8;
}

.page-title-2 h1{
	color:var(--color-white);
	font-size: 50px;
	text-transform:uppercase;
}

.page-title-2 h3{
	color:var(--color-accent-warm);
	font-size:24px;
	text-align:left;
}

.page-title-2 p{
	color:var(--color-white);
	font-size:24px;
	text-align:left;
}

.container-sort-and-search-info {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: #f4f8fc; 
	padding: 15px 20px; 
	border: 1px solid var(--color-text-dark-brown); 
	border-radius: 0px; 
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); 
	margin-bottom: 20px; 
}

.sort-options label {
	font-weight: 600;
	margin-right: 10px;
	color: var(--color-text-dark-brown); 
}

.sort-options select {
	padding: 5px 10px;
	border: 1px solid #ccc;
	border-radius: 5px; 
	background: linear-gradient(45deg, #ffffff, #f4f4f4); 
	transition: border 0.3s ease, box-shadow 0.3s ease; 
}

.sort-options select:hover {
	border: 1px solid #007bff; 
	box-shadow: 0 2px 4px rgba(0, 123, 255, 0.2); 
}

.search-info {
	font-weight: 500;
	color: var(--color-text-dark-brown); 
	font-size: 16px; 
}

.search-info span {
	font-weight: bold;
	color: var(--color-accent-warm); 
}

@media (max-width: 768px) {
	.container-sort-and-search-info {
		flex-direction: column; 
		text-align: center; 
	}

	.sort-options, .search-info {
		margin-bottom: 10px; 
	}
}

.button-group {
	display: flex;
	justify-content: center; 
	flex-wrap: wrap; 
	gap: 20px; 
}

.button-group a {
	flex: 1; 
	text-align: center;
	padding: 10px 20px;
	background: linear-gradient(45deg, var(--color-primary-bg-1), var(--color-primary-bg-2)); 
	color: var(--color-white); 
	border-radius: 5px;
	text-decoration: none;
	font-weight: 500;
	transition: background-color 0.3s ease, transform 0.2s ease;
}

.button-group a:hover {
	background-color: #007bff; 
	transform: scale(1.05); 
}

.loginForm {
	background: linear-gradient(45deg, var(--color-primary-bg-1), var(--color-primary-bg-2)); 
	padding: 20px;
	border-radius: 8px;
	color: var(--color-white); 
}

@media (max-width: 768px) {
	.button-group a {
		flex: 1 0 100%; 
		margin: 5px 0; 
	}
}

.lawyer-details {
	background-image: linear-gradient(to bottom, var(--color-frame-bg), var(--color-white));
	padding: 20px;
	max-width: 100%;
	border-radius: 0px;
	box-shadow: 0 0 10px var(--color-shadow);
	max-width: 100%;
	font-family: 'Montserrat', sans-serif;
	margin: 20px auto;
}

.lawyer-details p {
	font-size: 16px;
	font-weight: normal;
	margin-bottom: 20px;
	line-height: 1.5;
	color: var(--color-primary-bg);
	text-align: justify;
	white-space: pre-line;
}

.info-item {
	display: flex;
	align-items: center;
	margin-bottom: 15px;
}

.info-item i {
	font-size: 16px;
	color: var(--color-white);
	background-color: var(--color-primary-bg);
	border-radius: 50%;
	padding: 12px;
	margin-right: 15px;
	flex-shrink: 0;
	width: 25px;
	height: 25px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.info-item .label {
	font-weight: bold;
	color: var(--color-primary-bg);
	min-width: 200px;
}

.info-item .value {
	color: var(--color-primary-bg);
	text-align: justify;
}

.info-item a {
	color: var(--color-accent-warm);
	text-decoration: none;
}

.info-item a:hover {
	color: #007bff;
}

.fee-item {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 15px;
	border: 1px solid var(--color-text-dark-brown);
	border-radius: 8px;
	margin-bottom: 10px;
	transition: background-color 0.3s ease, color 0.3s ease; 
}

.fee-item:hover {
	background: linear-gradient(45deg, var(--color-primary-bg-1), var(--color-primary-bg-2));
	color: var(--color-white);
}

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

.fee-item .label {
	font-weight: bold;
	color: var(--color-text-dark-brown);
	flex: 1; 
	transition: color 0.3s ease; 
}

.fee-item:hover .label {
	color: var(--color-white); 
}

.fee-item .value {
	color: var(--color-text-dark-brown);
	text-align: right; 
	min-width: 100px; 
	transition: color 0.3s ease; 
}

.fee-item:hover .value {
	color: var(--color-white); 
}

.filter-left {
    display: flex;
    flex-direction: column;
    gap: 15px; 
}

.filter-row {
    display: flex;
    gap: 15px; 
}

.filter-item {
    flex: 1; 
}

.filter-item:last-child {
    width: 100%;
}

.label-filter {
	font-family: 'Montserrat', sans-serif;
	font-size: 16px;
	font-weight: 500;
	color: var(--color-white);
	line-height: normal;
}

.lawyer-profile-wrapper {
	overflow: hidden; 
}

.lawyer-profile {
	border-radius: 0px;
	transition: transform 0.3s ease;
	margin-bottom: 20px;
	background-image: linear-gradient(to bottom, #F5F5F5, var(--color-white));
	opacity: 1;
}

.lawyer-profile:hover {
	box-shadow: 0 4px 8px var(--color-shadow), 0 6px 20px var(--color-shadow);
	transform: scale(1);
	background-image: linear-gradient(to bottom, var(--color-frame-bg), var(--color-white));
}

.lawyer-profile .outer-box {
	position: relative;
	padding: 10px; 
	border: 1px solid var(--color-box-bg); 
	border-radius: 10px;
	box-sizing: border-box;
	margin-bottom: 20px;
}

.profile-box {
	border: 2px solid #ccc; 
	border-radius: 10px;    
	padding: 15px;          
	background: linear-gradient(45deg, #ffffff, #f4f4f4); 
	text-align: center;     
	box-shadow: 0px 4px 8px var(--color-shadow); 
}

.image img {
	max-width: 100%;        
	height: auto;
	border-radius: 0px;
}

.icon-group {
	margin-top: 20px;       
	display: flex;
	justify-content: center;
}

.social-icons{
  position:relative;
  z-index:2;
  text-align:center;
  background: none;
}

.social-icons li{
  position:relative;
  margin:5px;
  display: inline-block;
}

.social-icons li a{
  position:relative;
  width:35px;
  height:35px;
  color:var(--color-accent-warm);
  font-size: 16px;
  line-height:33px;
  background: linear-gradient(45deg, #ffffff, #f4f4f4);
  border-radius:50px;
  text-align:center;
  display:inline-block;
  border:1px solid var(--color-accent-warm);
  -webkit-transition:all 300ms ease;
  -ms-transition:all 300ms ease;
  -o-transition:all 300ms ease;
  -moz-transition:all 300ms ease;
  transition:all 300ms ease;
}

.social-icons li a:hover{
  color: var(--color-white);
  background: linear-gradient(45deg, var(--color-accent-warm-1) 0%, var(--color-accent-warm-2) 100%);
  border-color:var(--color-accent-warm);
}

.icon {
  transition: color 0.3s ease; 
}

.icon:hover {
  color: var(--color-accent-warm); 
}

.ScrollStyle {
  max-height: auto;
  overflow-y: auto; /* dùng auto thay scroll để chỉ hiển thị khi cần */
  scrollbar-color: var(--color-border-light) var(--color-white); /* Firefox */
  scrollbar-width: thin; /* Firefox */
}

/* Chrome, Edge, Safari */
.ScrollStyle::-webkit-scrollbar {
  width: 8px;
}

.ScrollStyle::-webkit-scrollbar-track {
  background: var(--color-white);
}

.ScrollStyle::-webkit-scrollbar-thumb {
  background: linear-gradient(45deg, #5aa6dc, #007ACC);
  border-radius: 4px;
  border: 2px solid var(--color-white); /* tạo khoảng cách cho track */
}



[data-title] {
  position: relative;
  cursor: not-allowed;
  display: inline-block;
  width: auto;
  transition: width 0.3s ease-in-out; 
  display: flex; 
  justify-content: center; 
  align-items: center; 
}

[data-title]:hover {
  width: 100%; 
}

[data-title]:hover::before {
  content: attr(data-title);
  position: absolute;
  left: 0%;
  top: 0px; 
  transform: translateX(-50%);
  z-index: 10;
  background: linear-gradient(45deg, #ffffff, #f4f4f4);
  color: var(--color-accent-pink);
  padding: 12px 12px;
  border-radius: 0px;
  white-space: nowrap;
  font-size: 16px;
  font-family:'Montserrat', sans-serif;
  text-align: center;
  vertical-align: middle;
  visibility: visible;
  opacity: 1;
  transition: opacity 0.3s ease-in-out, top 0.3s ease-in-out, visibility 0.3s;
}

[data-title]:hover .txt {
  visibility: hidden;
  transition: visibility 0s 0.3s;
}

button:disabled {
  cursor: not-allowed;
  pointer-events: all !important;
}

.aboutus{
  border: 1px solid #f8f8f8;
  
}

[type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button {
  height: 30px;
}

.chart {
  height: 400px;
  width: 100%; 
  background: linear-gradient(45deg, var(--color-primary-bg-1), var(--color-primary-bg-2));
}


/* Biography -------------------------------------------------------------*/
.biography {
  z-index: 1;
  background: var(--color-offwhite);
  position: relative;
  padding: 200px 0 100px;
}

.biography:after {
  content: "";
  position: absolute;
  z-index: -2;
  height: 200px;
  bottom: 0;
  left: 0;
  width: 100%;
  background-image: url(/images/common/2.jpg);
  background-position: left top;
  background-repeat: repeat;
}

.biography .overlay {
  position: absolute;
  z-index: -1;
  height: 200px;
  bottom: 0;
  left: 0;
  width: 100%;
  background: linear-gradient(45deg, var(--color-primary-bg-1), var(--color-primary-bg-2));
  opacity: 0.85;
}


.biography figure {
  z-index: -1;
  width: 100%;
  background-size: 50%;
  height: calc(100% - 110px);
  background-repeat: no-repeat;
  background-position: right top;
  position: absolute;
  top: 0;
  left: 0;
}

.biography .biography-info {
  border-left: 5px solid var(--color-accent-warm);
  margin-bottom: 50px;
  padding: 0 0 0 40px;
}

.biography .biography-info h1,
.biography .biography-info h2,
.biography .biography-info h3 {
  font-family:'Montserrat', sans-serif;
  font-weight: bold;
  line-height: 1.2;
}

.biography .biography-info h1 {
  font-size: 30px;
  letter-spacing: 2.5px;
  color: var(--color-accent-warm);
  text-transform: uppercase;
}

.biography .biography-info h2 {
  font-size: 28px;
  color: var(--color-text-highlight);
}

.biography .biography-info h3 {
  font-family: 'SF_Regular', sans-serif;
  font-size: 25px;
  color: var(--color-text-dark-brown);
}

.biography .biography-info ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.biography .biography-info ul li {
  display: inline-block;
}

.biography .biography-info ul li + li {
  margin-left: 20px;
  line-height: 2em;
}

.biography .biography-info ul li i,
.biography .biography-info ul li a {
  color: var(--color-text-dark-brown);
}

.biography .biography-info ul li a {
  font-weight: bold;
}

.biography .biography-info ul li a:hover {
  color: var(--color-accent-warm);
}

.biography .social-icons-2 {
  position: relative;
  z-index: 2;
  text-align: left;
}

.biography .biography-info .social-icons-2 li {
  position: relative;
  margin: 10px 0 10px 0;
  display: inline;
  margin-right: 10px;
}

.biography .biography-info .social-icons-2 li a {
  position:relative;
  width: 35px;
  height: 35px;
  color: var(--color-accent-warm);
  font-size: 16px;
  line-height: 33px;
  background: linear-gradient(45deg, #ffffff, #f4f4f4);
  border-radius: 50%;
  text-align: center;
  display: inline-block;
  border: 1px solid var(--color-accent-warm);
  transition: all 300ms ease;
}

.biography .biography-info .social-icons-2 li a:hover {
  color: var(--color-white);
  background: linear-gradient(45deg, var(--color-accent-warm-1) 0%, var(--color-accent-warm-2) 100%);
  border-color: var(--color-accent-warm);
}

.biography .biography-align {
  max-width: 75%;
  height: 100%;
}

.biography .biography-align > ol {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

.biography .biography-align > ol > li {
  flex: 1;
  display: flex;
}

.biography .biography-align > ol > li > a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%; /* Đảm bảo chiều cao 100% theo li */
  width: 100%;
  font-weight: bold;
  text-transform: uppercase;
  color: var(--color-white);
  background: var(--color-primary-bg);
  border-right: 1px solid var(--color-white);
  
  font-size: 16px;
  padding: 10px 20px; /* Giảm padding bottom để tránh lệch dọc */
  transition: background 0.25s ease, color 0.25s ease;
  text-align: center;
}

.biography .biography-align > ol > li.is-active > a,
.biography .biography-align > ol > li:hover > a {
  background: var(--color-accent-warm);
}

.biography .biography-align > ol > li.is-active > a:before,
.biography .biography-align > ol > li:hover > a:before {
  width: 100%;
}

.biography .biography-content {
  z-index: 1;
  background: var(--color-frame-bg);
  position: relative;
  border-top: 2px solid var(--color-white);
  padding: 45px 40px 65px;
}

.biography .biography-tab {
  display: none;
}

.biography .biography-tab h3 {
  text-transform: uppercase;
  display: flex;
  justify-content: space-between;
  font-size: 16px;
  color: var(--color-accent-warm);
  font-weight: bold;
  margin-bottom: 35px;
}

.biography .biography-tab h3 a {
  z-index: 1;
  opacity: 0.5;
  font-weight: bold;
  align-items: center;
  display: inline-flex;
  color: var(--color-accent-pink);
  text-transform: uppercase;
  font-family:'Montserrat', sans-serif;
  transition: 0.25s ease-in-out;
  font-size: 11px;
  position: relative;
  margin-left: 10px;
}

.biography .biography-tab h3 a i {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--color-black);
  font-size: 16px;
  margin-right: 8px;
  padding-left: 2px;
}

.biography .biography-tab h3 a:hover {
  opacity: 1;
}

.biography .biography-tab p {
  margin-bottom: 40px;
}

.biography .biography-tab p:last-of-type {
  margin-bottom: 0;
}

.biography .biography-tab .js-scrollbar {
  height: 100%; 
}

.biography .biography-tab .js-scrollbar>div {
  padding-right: 20px;
}

.biography .biography-tab .mCSB_scrollTools a+.mCSB_draggerContainer {
  margin-top: 0;
  margin-bottom: 35px;
}

.biography .biography-tab.is-active {
  display: block;
}

.biography .biography-area:before {
  z-index: -1;
  content: '';
  width: 63.6%;
  height: 100%;
  display: block;
  background: var(--color-accent-warm);
  position: absolute;
  top: 0;
  left: 0;
}

.biography .biography-list {
  z-index: 1;
  position: relative;
  padding: 40px 0;
}

.biography .biography-list:after {
  z-index: -1;
  content: '';
  display: block;
  box-shadow: -10px 20px 150px rgba(0, 0, 0, 0.3);
  position: absolute;
  top: 0;
  right: -2000px;
  bottom: 0;
  left: 0;
  background-image: url(/images/common/pattern.png);
  background-position: left top;
  background-repeat: repeat;
}

.biography .biography-list h3 {
  margin-bottom: 40px;
}

.biography .biography-list > ul {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  margin: 0;
}

.biography .biography-list > ul > li {
  width: 33.3%;
  padding: 0 16px;
  margin-bottom: 17px;
}

.biography .biography-list > ul > li > a {
  display: block;
  font-weight: bold;
  color: var(--color-black);
  background: var(--color-accent-warm);
  font-size: 17px;
  position: relative;
  padding: 17px 10px 13px 33px;
  z-index: 1;
}

.biography .biography-list > ul > li > a:before {
  content: '\f0da';
  color: var(--color-accent-warm);
  font-family: "FontAwesome";
  position: absolute;
  top: 15px;
  left: 17px;
}

.biography .biography-list > ul > li > a:after {
  z-index: -1;
  content: '';
  width: 0;
  height: 100%;
  background: var(--color-accent-warm);
  transition: 0.25s ease-in-out;
  position: absolute;
  top: 0;
  left: 0;
}

.biography .biography-list > ul > li > a:hover {
  background: var(--color-accent-warm);
}

.biography .biography-list > ul > li > a:hover:before {
  color: var(--color-white);
}

.biography .biography-list > ul > li > a:hover:after {
  width: 100%;
}

.biography .biography-accordion {
	background: var(--color-white);
	padding: 15px;
}

.biography .biography-accordion > ul {
	list-style: none;
	margin: 0;
}

.biography .biography-accordion > ul > li {
	margin-bottom: 1px;
}

.biography .biography-accordion > ul > li > a {
	display: block;
	color: var(--color-black);
	background: var(--color-bg-light-gray);
	padding: 12px 25px 9px 15px;
	font-weight: bold;
	text-transform: uppercase;
	position: relative;
}

.biography .biography-accordion > ul > li > a:after {
	content: '\f107';
	font-family: "FontAwesome";
	position: absolute;
	top: 12px;
	right: 10px;
}

.biography .biography-accordion > ul > li.is-active > a:after {
	content: '\f106';
}

.biography .biography-accordion > ul > li.is-active > a {
	background: var(--color-accent-warm);
}

.biography .biography-accordion > ul > li.is-active > a:hover {
	background: var(--color-accent-warm);
}

.biography .biography-accordion .accordion-content {
	display: none;
	padding: 25px 25px 20px 25px;
	background: var(--color-primary-bg);
	color: var(--color-white);
}

.biography .biography-accordion > ul > li.is-active .accordion-content {
	display: block;
}


@media screen and (max-width: 1499px) {
	.biography figure {
		background-position: 70% top;
		height: calc(100% - 400px);
	}
	.biography .biography-info h1 {
		font-size: 30px;
	}
}

@media screen and (max-width: 1396px) {
	.biography:after {
		width: 63.6%;
	}
	.biography .biography-list {
		padding-left: 20px;
	}
}

@media screen and (max-width: 1023px) {
	.biography {
		padding-top: 200px;
	}
	.biography:after {
		width: 100%;
	}
	.biography figure {
		height: 100%;
		background-position: 80% top
	}
	.biography .biography-info {
		padding-left: 30px;
	}
	.biography .biography-info h3 {
		font-size: 24px;
	}
	.biography .biography-info h1 {
		font-size: 30px;
	}
	.biography .biography-info ul li {
		width: 100%;
	}
	.biography .biography-info ul li+li {
		margin-left: 0;
	}
	.biography .biography-align {
		width: 100%;
	}
	.biography .biography-content {
		padding-right: 0;
	}
	.biography .biography-content:before {
		right: -100px;
	}
	.biography .biography-list {
		padding-left: 0;
	}
	.biography .biography-list:after {
		left: -50px;
	}
	.biography .biography-list>ul>li {
		width: 50%;
	}
}

@media screen and (max-width: 639px) {
	.biography {
		padding-top: 200px;
		padding-bottom: 40px;
	}
	.biography:after {
		display: none;
	}
	.biography .biography-info {
		border-left: 0;
		margin-bottom: 0;
		padding-top: 10px;
		padding-left: 0;
	}

	.biography .biography-info h1 {
		font-size: 30px;
		margin-bottom: 10px;
	}
	.biography .biography-info h3 {
		font-size: 25px;
	}
	.biography .biography-align>ol {
		display: none;
	}
	.biography .biography-list {
		padding-bottom: 15px;
	}
	.biography .biography-list>ul>li {
		width: 100%;
	}
}


/* Chart--------------------------------------------------------------------*/
.chart-container {
  position: relative;
  width: 50%;  /* chiếm 50% khung cha, có thể điều chỉnh */
  margin: 0 auto;
}
.chart-container::before {
  content: "";
  display: block;
  padding-top: 100%; /* giữ tỉ lệ 1:1 */
}
.chart-container canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100% !important;
  height: 100% !important;
}

@media screen and (min-width: 1400px) {
  .chart-container {
    max-width: 800px;
  }
}

.chart-container-2 {
  width: 100%;
  max-width: 400px; /* hoặc 800px tùy ý bạn */
  aspect-ratio: 1 / 1; /* Giữ hình vuông */
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.chart-container-2 canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
}


.chart-title {
	text-align: center;
	margin-top: 10px;
}


.map-button {
  position:relative;
  width:100%;
  margin-top:10px;
  color: var(--color-white);
  background: linear-gradient(45deg, var(--color-primary-bg-1), var(--color-primary-bg-2));
}

.x-twitter {
   mask-image: url('/img/new_img/icon/x-twitter.svg');
   display: block;
   width: 20px;
   height: 20px;
   background-color: none;
  }

.trx_addons_dropcap {
	float: left;
	display: block;
	font-size: 2em;
	padding: 0;
	margin: .25em .5em 0 0;
	width: 2em;
	height: 2em;
	line-height: 2em;
	text-align: center;
	overflow: hidden;
	color: var(--color-white);
	background-color: none;
	-webkit-border-radius: 50%;
	-ms-border-radius: 50%;
	border-radius: 50%
}

.trx_addons_dropcap_style_2 {
	background: linear-gradient(45deg, var(--color-accent-warm-1) 0%, var(--color-accent-warm-2) 100%);
}


.txtretroshadow {
	background-color: none;
	/*
	text-shadow: 
	1px 1px 0 var(--color-primary-bg), 
	2px 2px 0 var(--color-accent-warm), 
	3px 3px 0 var(--color-primary-bg), 
	4px 4px 2px rgba(0, 0, 0, 0.5);
	*/
	color: var(--color-white);
}




/*
.txtretroshadow {
  background: linear-gradient(90deg, #6a0dad, #FF3D7F);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  font-weight: bold;
  display: inline-block;
  animation: fadeIn 1.5s ease-in-out;
}
*/

/*
.txtretroshadow {
  background: linear-gradient(90deg, #6a0dad, #FF3D7F);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;

  text-shadow: 
    1px 1px 0 var(--color-white), 
    2px 2px 0 var(--color-accent-warm), 
    3px 3px 0 var(--color-white), 
    4px 4px 2px rgba(0, 0, 0, 0.5);

  font-weight: bold;
  display: inline-block;
  animation: fadeIn 1.5s ease-in-out;
}
*/




.headline-and {
    font-size: 75px;
    font-weight: bold;
    color: var(--color-accent-warm);
    line-height: 1;
    font-family: 'Georgia', serif;
    margin-left: 10px;
    margin-right: 10px;
}


mark {
  background: var(--color-white);
  color: var(--color-accent-warm);
}

.padding-10 {
  padding-top: 10px;
  padding-bottom: 10px;
}

.padding-20 {
  padding-top: 20px;
  padding-bottom: 20px;
}

.padding-30 {
  padding-top: 30px;
  padding-bottom: 30px;
}

.padding-50 {
  padding-top: 50px;
  padding-bottom: 50px;
}

.padding-65 {
  padding-top: 65px;
  padding-bottom: 65px;
}

.padding-75 {
  padding-top: 70px;
  padding-bottom: 70px;
}

.padding-top-50 {
  padding-top: 50px;
}

.padding-top-75 {
  padding-top: 75px;
}

.padding-bottom-20 {
  padding-bottom: 20px;
}

.padding-bottom-50 {
  padding-bottom: 50px;
}

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

table, th, td {
  border: 1px solid var(--color-text-dark-brown);
  border-collapse: collapse;
  margin-top: 20px;
  margin-bottom: 20px;
}

tr:nth-child(even){background-color: #f2f2f2;}

tr:hover {background-color: #ddd;}

th {
  border:1px solid var(--color-white);
  padding: 12px 5px 12px;
  text-align: center;
  background: linear-gradient(45deg, var(--color-primary-bg-1), var(--color-primary-bg-2));
  color: var(--color-white);
}

td {
  border:1px solid var(--color-white);
  padding: 10px;
  text-align: left;
}

.separator {
  position: relative;
  width: 100px;
  margin: 10px 0;
  border-bottom: 3px solid; 
  border-image: linear-gradient(to right, var(--color-accent-pink) 50%, var(--color-border-light) 50%);
  border-image-slice: 1; 
}

.separator.centered {
  margin: 10px auto;
  width: 100px;
  border-bottom: 3px solid;
  border-image: linear-gradient(to right, var(--color-accent-pink) 50%, var(--color-border-light) 50%);
  border-image-slice: 1;
}

a, a:active, a:focus {
  outline: 0 !important; 
  text-decoration: none !important;
}

.case-carousel .slick-dots {
  margin-top: 30px;
}

.case-carousel .slick-dots li {
  width: 25%;
  max-width: 170px;
  float: left;
  margin-right: 30px;
}

.case-carousel .slick-dots li img {
  width: 100%;
  opacity: 0.7;
  -webkit-transition: 0.4s;
  -moz-transition: 0.4s;
  -ms-transition: 0.4s;
  -o-transition: 0.4s;
  transition: 0.4s;
}

.case-carousel .slick-dots li.slick-active img {
  opacity: 1;
}
@media only screen and (min-width: 993px) and (max-width: 1150px) {
	.case-carousel .slick-dots li {
	max-width: 125px;
  }
}
@media only screen and (min-width: 768px) and (max-width: 992px) {
	.case-carousel .slick-dots li {
	max-width: 125px;
  }
}
@media only screen and (min-width: 250px) and (max-width: 767px) {
	.case-carousel .slick-dots li {
	width: 22%;
	margin-right: 2%;
  }
}

.heading-title {
  position: relative;
  color: var(--color-white);
  font-size: 28px;
  font-weight: bold;
  line-height: 45px;
  margin: -12px 0 40px;
  font-family: 'Montserrat', sans-serif;
  background-image: url(/images/common/header_single_lawyer.jpg);
  background-size: cover; 
  background-position: center; 
  padding: 0; 
}

.heading-title::before {
  content: ""; 
  position: absolute; 
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, var(--color-primary-bg-1), var(--color-primary-bg-2)); 
  opacity: 0.85;
  z-index: 0; 
}

.search {
	display: block;
	width: 100%;
	height: 34px;
	padding: 6px 12px;
	margin-bottom: 20px;
	font-size: 16px;
	line-height: 1.6em;
	color: var(--color-neutral-gray-brown);
	background: linear-gradient(45deg, #ffffff, #f4f4f4);
	background-image: none;
	border: 1px solid #ccc;
	border-radius: 4px;
	-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
	box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
	-webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
	-o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
	transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s
}

.search:focus {
	border-color: 1px solid #66afe9;
	width: 100%;
	outline: 0;
	-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
	box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6)
}

.search::-moz-placeholder {
	color: #333;
	opacity: 1
}

.search:-ms-input-placeholder {
	color: #333
}

.search::-webkit-input-placeholder {
	color: #333
}

.search::-ms-expand {
	background-color: transparent;
	border: 0
}

.search[disabled],.search[readonly],fieldset[disabled] .search {
	background-color: #eee;
	opacity: 1
}

.search[disabled],fieldset[disabled] .search {
	cursor: not-allowed
}

textarea.search {
	height: auto
}

input[type=search] {
	-webkit-appearance: none
}

@media screen and (-webkit-min-device-pixel-ratio: 0) {
	input[type=date].search,input[type=time].search,input[type=datetime-local].search,input[type=month].search {
		line-height:34px
	}

	.input-group-sm input[type=date],.input-group-sm input[type=time],.input-group-sm input[type=datetime-local],.input-group-sm input[type=month],input[type=date].input-sm,input[type=time].input-sm,input[type=datetime-local].input-sm,input[type=month].input-sm {
		line-height: 30px
	}

	.input-group-lg input[type=date],.input-group-lg input[type=time],.input-group-lg input[type=datetime-local],.input-group-lg input[type=month],input[type=date].input-lg,input[type=time].input-lg,input[type=datetime-local].input-lg,input[type=month].input-lg {
		line-height: 46px
	}
}

.attorney-item {
  margin-bottom: 30px;
}

.attorney-item .attorney-title {
  font-size: 24px;
  margin: 23px 0 9px;
}

.attorney-item cite {
  color: #909090;
  margin-bottom: 10px;
  display: block;
  height: 50px;
}

.attorney-item:hover .attorney-thumb:after {
  opacity: 1;
}

.attorney-item:hover .attorney-thumb ul {
  opacity: 1;
  transform: translateY(-50%);
}

.attorney-thumb {
  position: relative;
}

.attorney-thumb:after {
  content: "";
  background: rgba(0, 0, 0, 0.7);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: 11;
  -webkit-transition: 0.4s;
  -moz-transition: 0.4s;
  -ms-transition: 0.4s;
  -o-transition: 0.4s;
  transition: 0.4s;
}

.attorney-thumb ul {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  margin: 0 auto;
  text-align:center;  
  transform: translateY(-80%);
  opacity: 0;
  z-index: 44;
  -webkit-transition: 0.4s;
  -moz-transition: 0.4s;
  -ms-transition: 0.4s;
  -o-transition: 0.4s;
  transition: 0.4s;
}

.attorney-thumb ul li {
  margin: 0 2px;
  display: inline-block;
}

.attorney-thumb ul li a {
  width: 42px;
  height: 42px;
  -webkit-border-radius: 21px;
  -moz-border-radius: 21px;
  border-radius: 21px;
  background: linear-gradient(45deg, #ffffff, #f4f4f4);
  display: table;
  color: #27496c;
  font-size: 16px;
  text-align: center;
  line-height: 42px;
}

.attorney-thumb ul li a:hover {
  background: var(--color-accent-warm);
  color: var(--color-white);
}

.attorney-thumb img {
  width: 100%;
  height: auto;
  
}

.attorney-info img {
  width: 100%;
  height: auto;
 
}

.attorney-info h5 {
  font-size: 20px;
  font-family:'Montserrat', sans-serif;
  line-height: 40px;
  font-weight: 700;
  color: var(--color-white);
  background: linear-gradient(45deg, var(--color-primary-bg-1), var(--color-primary-bg-2));
  text-align: center;
  text-transform: uppercase;
}

.attorney-info span {
  font-size: 16px;
  font-weight: 700;
  line-height: 40px;
}

.attorney-info .social-nav{
  position:relative;
  z-index:2;
  text-align:center;
  background: #EEEEEE;
}

.attorney-info .social-nav li{
  position:relative;
  margin:2px;
  display: inline-block;
}

.attorney-info .social-nav li a{
  position:relative;
  width:35px;
  height:35px;
  color:var(--color-accent-warm);
  font-size: 16px;
  line-height:33px;
  background: linear-gradient(45deg, #ffffff, #f4f4f4);
  border-radius:50px;
  text-align:center;
  display:inline-block;
  border:1px solid var(--color-accent-warm);
  -webkit-transition:all 300ms ease;
  -ms-transition:all 300ms ease;
  -o-transition:all 300ms ease;
  -moz-transition:all 300ms ease;
  transition:all 300ms ease;
}

.attorney-info .social-nav li a:hover{
  color: var(--color-white);
  background: linear-gradient(45deg, var(--color-accent-warm-1) 0%, var(--color-accent-warm-2) 100%);
  border-color:var(--color-accent-warm);
}

.attorney-info p{
  color:var(--color-text-dark-brown);
  font-size: 16px;
  line-height:20px;
}

.attorney-thumb ul li a {
	width: 30px;
	height: 30px;
	line-height: 30px;
  }

  .attorney-thumb img {
	width: 100%;
  }

.plan-list {
  background: none;
}

.plan-list h4 {
  height: 139px;
  text-align: center;
  font-size: 30px;
  line-height: 35px;
  font-family: 'Montserrat', sans-serif;
  text-transform: uppercase;
  padding-top: 40px;
  font-weight: 500;
}

.plan-list ul li {
  line-height: 40px;
  border-bottom: 1px solid #e7e7e7;
  padding: 0 29px;
}

.plan-list ul li:last-of-type {
  border-bottom: none;
  margin-bottom: 0px;
}

.plan-list ul li {
  font-size: 16px;
  padding: 0 20px;
}

.email {
  word-wrap: break-word;
  word-break: break-all;
  overflow-wrap: break-word;
  white-space: normal;
  max-width: 100%;
}

@media only screen and (min-width: 768px) and (max-width: 992px) {

  .plan-list ul li {
	font-size: 10px;
	padding: 0 10px;
  }

  .plan-list h4 {
	font-size: 21px;
	line-height: 32px;
  }
}

.plan-info {
  background: none;
  border-right: 1px solid var(--color-text-highlight);
}

.plan-info h4 {
  font-size: 25px;
  color: var(--color-accent-warm);
  font-weight: bold;
}

.plan-info p {
  text-align: justify;
}

.plan-info ul li {
  line-height: 40px;
  border-bottom: 1px solid #e7e7e7;
  padding: 0 29px;
  color: var(--color-text-dark-brown);
  font-size: 12px;
}

.plan-info ul li:last-of-type {
  border-bottom: none;
}

.plan-info .plan-name {
  font-size: 16px;
  color: var(--color-text-dark-brown);
  font-weight: bold;
  margin-bottom: 10px;
}

.plan-info .plan-name em {
  font-size: 20px;
  vertical-align: top;
  position: relative;
  margin-right: 3px;
}

.plan-info .plan-name span {
  font-size: 22px;
  color: var(--color-accent-warm);
  text-transform: uppercase;
}

.element-info {
  margin-bottom: 35px;
}

.element-info span {
  color: var(--color-text-dark-brown);
}

.side-contact-clients {
  background: var(--color-primary-bg); 
  padding: 37px 30px 30px;
}
.side-contact-clients .text-center {
  color: var(--color-white);
}

.side-contact-clients p {
  font-size: 24px;
  margin-bottom: 26px;
}

.side-contact-clients input {
  background: var(--color-white);
}

.side-contact-clients .custom-select {
  background: var(--color-white);
}

.side-contact-clients textarea {
  background: var(--color-white);
  height: 85px;
  margin-bottom: 30px;
}

.side-contact-clients button {
  min-width: 170px;
}

.modal-header h4 {line-height: 20px;}

.modal-header button.close {
  width: 70px;
  height: 70px;
  padding-top: 10px;
}

.modal-body img { margin-bottom: 20px; }
.modal-body h4, #portfolio .modal-body p {text-align: left;}
.modal-body p.project-description {margin-top: 20px;}
.modal-body p.subtitle {
	color: var(--color-neutral-gray-brown);
	text-transform: uppercase;
	font-size: 1em;
}
.modal-body a {margin: 10px;}
.interested {margin-top: 40px; margin-bottom: 40px;}
.interested a {margin-top: 20px;}

.modal-header {
	padding: 10px;
	background: var(--color-primary-bg);
	border-bottom: 5px solid var(--color-accent-warm);
}
.modal-title {
	margin: 10px;
	font-family:'Montserrat', sans-serif;
	font-size: 16px;
	color: var(--color-white);
	line-height:1.5em;
}

.modal-body {
	position: relative;
	padding: 20px;
}

.modal-body p {
	color: var(--color-neutral-gray-brown);
	font-size: 1em;
}

.modal-footer {
	padding: 16px;
	text-align: right;
	border-top: 1px solid #e5e5e5
}

.modal-footer .btn+.btn {
	margin-bottom: 0;
	margin-left: 5px
}

.modal-footer .btn-group .btn+.btn {
	margin-left: -1px
}

.modal-footer .btn-block+.btn-block {
	margin-left: 0
}

.pagination {
    display: flex;
    flex-wrap: wrap; 
    justify-content: center;
    align-items: center;
    margin-top: 50px;
    margin-bottom: 50px;
    gap: 25px 5px;
}

.pagination a {
    color: var(--color-text-dark-brown);
    padding: 10px 15px;
    margin: 0 5px;
    border: 1px solid var(--color-primary-bg);
    border-radius: 4px;
    text-decoration: none;
    transition: background-color 0.3s ease, color 0.3s ease;
    white-space: nowrap; 
}

.pagination a:hover,
.pagination a:focus {
    background: linear-gradient(45deg, var(--color-primary-bg-1), var(--color-primary-bg-2));
    color: var(--color-white);
    outline: none;
}

.pagination a.active {
    background: linear-gradient(45deg, var(--color-primary-bg-1), var(--color-primary-bg-2));
    color: var(--color-white);
    border: 1px solid var(--color-primary-bg);
}

.pagination a.disabled {
    color: #aaa;
    cursor: not-allowed;
    border-color: #aaa;
}

.pagination li.active a,
.pagination li:hover a {
    color: var(--color-white);
    background: linear-gradient(45deg, var(--color-primary-bg-1), var(--color-primary-bg-2));
}

@media (max-width: 600px) {
    .pagination a {
        padding: 8px 12px; 
        font-size: 16px; 
    }
    .pagination {
    flex-wrap: wrap; 
}
}

@media (max-width: 900px) {
    .pagination a {
        padding: 10px 12px; 
        font-size: 16px; 
    }
}

@media (min-width: 1200px) {
    .pagination a {
        padding: 12px 18px; 
        font-size: 16px; 
    }
}

.menu_lang {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 5px;
    z-index: 99;
    transition: var(--transition);
}

.menu_lang ul {
    list-style: none;
    padding: 5px;
    margin: 0;
    display: flex;
}

.menu_lang ul li, 
.menu_lang-item, 
.sticky-menu-lang .lang-item {
    margin-right: 5px;
    padding-right: 5px;
    border-right: 1px solid var(--color-white);
    line-height: 12px;
}

.menu_lang ul li:last-child,
.menu_lang-item:last-child,
.sticky-menu-lang .lang-item:last-child {
    margin-right: 0;
    padding-right: 0;
    border-right: none;
}

.menu_lang a {
    color: var(--color-white);
    position: relative;
    font-size: 16px;
}

.menu_lang .current-lang a::after,
.menu_lang-item.menu-item-current a::after {
    position: absolute;
    bottom: -5px;
    right: 0;
    content: '';
    display: block;
    z-index: 1;
    width: 100%;
    height: 1px;
    background: var(--color-accent-warm);
}

.sticky-menu-lang .lang-item {
    border-right-color: var(--color-text-dark-brown);
}

.mobile-menu-lang {
    text-align: left;
    margin: 15px 10px;
    display: none;
}

.mobile-menu-lang .menu-lang {
    list-style: none;
    padding: 0;
    margin: 0;
    display: inline-block;
}

.mobile-menu-lang .menu-lang .lang-item {
    display: inline-block;
    margin: 0 10px;
}

.mobile-menu-lang .menu-lang .lang-item img {
    width: 24px;
    height: 16px;
    vertical-align: middle;
    cursor: pointer;
}

@media screen and (max-width: 768px) {
    .menu_lang {
        display: none;
    }
    .mobile-menu-lang {
        display: block;
    }
}

.about-info .nav-tabs {

  position:relative;
  padding:35px 30px;
  background: linear-gradient(45deg, #ffffff, #f4f4f4);
  border:1px solid #cccccc;

}

.about-info .nav-tabs > li > a {
  margin-right: 5px;
  margin-bottom: 5px;
  border-radius: 0;
  background: #27496c !important;
  color: var(--color-white) !important;
  font-size: 16px;
  text-transform: uppercase;
  border: none !important;
  line-height: 45px;
  padding: 0 28px;
}

.about-info .nav-tabs > li.active > a {
  background: var(--color-accent-warm) !important;
  color: var(--color-white);
}

.about-info .tab-content {
  background: linear-gradient(45deg, #ffffff, #f4f4f4);
  -webkit-box-shadow: 0 3px 10px #ededed;
  -moz-box-shadow: 0 3px 10px #ededed;
  box-shadow: 0 3px 10px #ededed;
  
}

nav {
	display: block
}

.nav {
	padding-left: 0;
	margin-bottom: 0;
	list-style: none
}

.nav>li {
	position: relative;
	display: block
}

.nav>li>a {
	position: relative;
	display: block;
	padding: 10px 15px
}

.nav>li>a:focus,.nav>li>a:hover {
	text-decoration: none;
	background-color: #eee
}

.nav>li.disabled>a {
	color: #777
}

.nav>li.disabled>a:focus,.nav>li.disabled>a:hover {
	color: #777;
	text-decoration: none;
	cursor: not-allowed;
	background-color: transparent
}

.nav .open>a,.nav .open>a:focus,.nav .open>a:hover {
	background-color: #eee;
	border-color: #337ab7
}

.nav .nav-divider {
	height: 1px;
	margin: 9px 0;
	overflow: hidden;
	background-color: #e5e5e5
}

.nav>li>a>img {
	max-width: none
}

.nav-tabs {
	border-bottom: 1px solid #ddd
}

.nav-tabs>li {
	float: left;
	margin-bottom: -1px
}

.nav-tabs>li>a {
	margin-right: 2px;
	line-height: 1.5em;
	border: 1px solid transparent;
	border-radius: 4px 4px 0 0
}

.nav-tabs>li>a:hover {
	border-color: #eee #eee #ddd
}

.nav-tabs>li.active>a,.nav-tabs>li.active>a:focus,.nav-tabs>li.active>a:hover {
	color: var(--color-neutral-gray-brown);
	cursor: default;
	background: linear-gradient(45deg, #ffffff, #f4f4f4);
	border: 1px solid #ddd;
	border-bottom-color: transparent
}

.nav-tabs.nav-justified {
	width: 100%;
	border-bottom: 0
}

.nav-tabs.nav-justified>li {
	float: none
}

.nav-tabs.nav-justified>li>a {
	margin-bottom: 5px;
	text-align: center
}

.nav-tabs.nav-justified>.dropdown .dropdown-menu {
	top: auto;
	left: auto
}

@media (min-width: 768px) {
	.nav-tabs.nav-justified>li {
		display:table-cell;
		width: 1%
	}

	.nav-tabs.nav-justified>li>a {
		margin-bottom: 0
	}
}

.nav-tabs.nav-justified>li>a {
	margin-right: 0;
	border-radius: 4px
}

.nav-tabs.nav-justified>.active>a,.nav-tabs.nav-justified>.active>a:focus,.nav-tabs.nav-justified>.active>a:hover {
	border: 1px solid #ddd
}

@media (min-width: 768px) {
	.nav-tabs.nav-justified>li>a {
		border-bottom:1px solid #ddd;
		border-radius: 4px 4px 0 0
	}

	.nav-tabs.nav-justified>.active>a,.nav-tabs.nav-justified>.active>a:focus,.nav-tabs.nav-justified>.active>a:hover {
		border-bottom-color: var(--color-white)
	}
}

.nav-pills>li {
	float: left
}

.nav-pills>li>a {
	border-radius: 4px
}

.nav-pills>li+li {
	margin-left: 2px
}

.nav-pills>li.active>a,.nav-pills>li.active>a:focus,.nav-pills>li.active>a:hover {
	color: var(--color-white);
	background-color: #337ab7
}

.nav-stacked>li {
	float: none
}

.nav-stacked>li+li {
	margin-top: 2px;
	margin-left: 0
}

.nav-justified {
	width: 100%
}

.nav-justified>li {
	float: none
}

.nav-justified>li>a {
	margin-bottom: 5px;
	text-align: center
}

.nav-justified>.dropdown .dropdown-menu {
	top: auto;
	left: auto
}

@media (min-width: 768px) {
	.nav-justified>li {
		display:table-cell;
		width: 1%
	}

	.nav-justified>li>a {
		margin-bottom: 0
	}
}

.nav-tabs-justified {
	border-bottom: 0
}

.nav-tabs-justified>li>a {
	margin-right: 0;
	border-radius: 4px
}

.nav-tabs-justified>.active>a,.nav-tabs-justified>.active>a:focus,.nav-tabs-justified>.active>a:hover {
	border: 1px solid #ddd
}

@media (min-width: 768px) {
	.nav-tabs-justified>li>a {
		border-bottom:1px solid #ddd;
		border-radius: 4px 4px 0 0
	}

	.nav-tabs-justified>.active>a,.nav-tabs-justified>.active>a:focus,.nav-tabs-justified>.active>a:hover {
		border-bottom-color: var(--color-white)
	}
}

.tab-content>.tab-pane {
	display: none
}

.tab-content>.active {
	display: block
}

.nav-tabs .dropdown-menu {
	margin-top: -1px;
	border-top-left-radius: 0;
	border-top-right-radius: 0
}

.fade {
	opacity: 0;
	-webkit-transition: opacity .15s linear;
	-o-transition: opacity .15s linear;
	transition: opacity .15s linear
}

.fade.in {
	opacity: 1
}

.tab-content p.lead {
  margin-bottom: 15px;
  font-size: 16px;
  text-align: justify;
}

.tab-content p.lead b {
  font-weight: 500 !important;
}

* {
	margin:0px;
	padding:0px;
	border:none;
	outline:none;
}

body {
	/*font-family: 'Montserrat', 'Segoe UI', 'Roboto', sans-serif;*/
	/*font-family: 'Source Sans Pro', sans-serif;*/
	/*font-family: Helvetica, sans-serif;*/
	/*font-family: var(--font-body);*/
	/*font-family: 'Poppins', sans-serif;*/
	/*font-family: 'Montserrat', sans-serif;*/
	font-family: 'SF_Regular', sans-serif;
	font-size: 16px;
	color: var(--color-text-dark-brown);
	line-height: 1.5em;
    font-weight: normal;
    overflow-x: hidden;
}

/*
p, li, a {
  font-family: var(--font-body);
}
*/

.bordered-layout .page-wrapper{
	padding:0px 50px 0px;
}

a {
	text-decoration:none;
	cursor:pointer;
	color: var(--color-accent-warm);
}

button,
a:hover,a:focus,a:visited{
	text-decoration:none;
	outline:none !important;
}

h1,h2,h3,h4,h5,h6 {
	position:relative;
	font-weight: normal;
	margin:0px;
	background:none;
	/*font-family: 'Bellefair', serif;*/
	/*font-family: 'Montserrat', sans-serif;*/
	font-family: 'SF_Bold', sans-serif;
	/*font-family: var(--font-heading);
	font-weight: 700;*/
    /*letter-spacing: 0.5px;*/
	/*font-family: 'Source Sans Pro', sans-serif;*/
	/*font-family: Arial, sans-serif;*/
	/*font-family: 'Poppins', sans-serif;*/
	text-shadow: 5px 5px 5px rgba(0, 0, 0, 0.2);
}

textarea{
	overflow:hidden;
}

p {
	position:relative;
	line-height:1.5em; 
	font-size: 16px;
	font-weight: normal;
}

.text{
	position:relative;
	font-family: 'SF_Regular', sans-serif;
	font-size: 16px;
	line-height:1.5em;
	font-weight: normal;
}


.bg-color-light{
	background: linear-gradient(45deg, #ffffff, #f4f4f4);
}

h1{
	font-size: 50px;
	font-weight: normal;
	line-height:1em;
}

h2{
	font-size:30px;
	font-weight: bold;
	line-height:1.2em;
}

h3{
	font-size:25px;
	line-height:1.3em;
}

h4{
	font-size:24px;
	font-weight: normal;
	text-transform: uppercase;
	line-height:1.3em;
}

h5{
	font-size:22px;
	font-weight: normal;
}

h6{
	font-size: 16px;
}

.text-box{
	color: var(--color-accent-pink);
	font-weight: normal;
	line-height: 30px;
}

.auto-container{
	position:static;
	max-width:1200px;
	padding:0 15px;
	margin:0 auto;
}

.child-container{
  position:static;
  max-width:1000px;
  padding:0 15px;
  margin:0 auto;
}

.medium-container{
	max-width:850px;
}

.page-wrapper{
	position:relative;
	margin:0 auto;
	width:100%;
	min-width:300px;
}

ul,li{
	list-style:none;
}

img{
	display:inline-block;
	max-width:100%;
}

.theme-btn{
	cursor:pointer;
	font-size: 16px;
	display:inline-block;
	transition:all 0.3s ease;
	-moz-transition:all 0.3s ease;
	-webkit-transition:all 0.3s ease;
	-ms-transition:all 0.3s ease;
	-o-transition:all 0.3s ease;
  text-align: center;
}

.centered{
	text-align:center;	
}

.txt_h3{
	font-size:30px;
	color: #ff4d4d;
	line-height:1.3em;
	margin: 20px 0;
}

.error-logo {
	margin: 20px 0;
}

.error_img {
	max-width: 200px;
	height: auto;
	border-radius: 5px;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.scroll-to-top{
	position:fixed;
	bottom:15px;
	right:15px;
	width:40px;
	height:40px;
	color: var(--color-accent-warm);
	font-size:20px;
	line-height:38px;
	text-align:center;
	z-index:9999;
	cursor:pointer;
	background:var(--color-white);
	display:none;
	border-radius:50px;
	box-shadow:0 0 10px rgba(0,0,0,0.15);
	transition:all 300ms ease;
}

.scroll-to-top:hover{
	color:var(--color-white);
	background:var(--color-accent-warm);
}

.list-style-one{
	position:relative;
}

.list-style-one li{
	position:relative;
	color:var(--color-text-dark-brown);
	font-size: 16px;
	padding-left:30px;
	line-height:1.5em;
	margin-bottom:12px;
}

.list-style-one li:before{
	position:absolute;
	content: "\f1a3";
	left:0;
	top:5px;
	color:var(--color-accent-warm);
	font-size: 16px;
	line-height:1em;
	font-family: "Flaticon";
}

.btn-style-one{
	position: relative;
	display: inline-block;
	line-height: 30px;
	color: var(--color-white);
	font-weight: 600;
	overflow: hidden;
	background:none;
	padding: 12px 35px 12px;
	text-transform: uppercase;
	background: linear-gradient(45deg, var(--color-accent-warm-1) 0%, var(--color-accent-warm-2) 100%);
  margin-bottom: 10px;
}

.btn-style-one:before{
	position: absolute;
	content: '';
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	opacity: 0;
	-webkit-transition: all 0.4s;
	-moz-transition: all 0.4s;
	-o-transition: all 0.4s;
	transition: all 0.4s;
	-webkit-transform: scale(0.2, 1);
	transform: scale(0.2, 1);
	background: linear-gradient(45deg, #ffffff, #f4f4f4);
}

.btn-style-one .txt{
	position:relative;
	z-index:1;
}

.btn-style-one .arrow{
	margin-left:6px;
}

.btn-style-one:hover::before{
	opacity: 1;
	-webkit-transform: scale(1, 1);
	transform: scale(1, 1);
}

.btn-style-one:hover{
	color: var(--color-accent-warm);
}

.btn-style-two{
	position: relative;
	display: inline-block;
	line-height: 30px;
	color: var(--color-white);
	font-weight: 600;
	overflow: hidden;
	background:none;
	border-radius:0;
	padding: 12px 35px 12px;
	text-transform: uppercase;
	background: linear-gradient(45deg, var(--color-accent-warm-1) 0%, var(--color-accent-warm-2) 100%); 
  margin-bottom: 10px;
}

.btn-style-two:before{
	position: absolute;
	content: '';
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	opacity: 0;
	-webkit-transition: all 0.4s;
	-moz-transition: all 0.4s;
	-o-transition: all 0.4s;
	transition: all 0.4s;
	-webkit-transform: scale(0.2, 1);
	transform: scale(0.2, 1);
	background: linear-gradient(45deg, var(--color-primary-bg-1), var(--color-primary-bg-2));
}

.btn-style-two .txt{
	position:relative;
	z-index:1;
}

.btn-style-two .arrow{
	margin-left:6px;
}

.btn-style-two:hover::before{
	opacity: 1;
	-webkit-transform: scale(1, 1);
	transform: scale(1, 1);
}

.btn-style-two:hover{
	color: var(--color-white);
}

.btn-style-three{
  position: relative;
  display: inline-block; 
  line-height: 30px;
  color: var(--color-primary-bg);
  padding: 12px 35px 12px;
  overflow: hidden;
  background: none;
  letter-spacing: 1px;
  border-radius: 0;
  font-weight: 600;
  text-transform: uppercase;
  border: 1px solid var(--color-primary-bg);
  margin-bottom: 10px;
}

.btn-style-three:before{
	position: absolute;
	content: '';
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	opacity: 0;
	background: linear-gradient(45deg, var(--color-primary-bg-1), var(--color-primary-bg-2));
	-webkit-transition: all 0.4s;
	-moz-transition: all 0.4s;
	-o-transition: all 0.4s;
	transition: all 0.4s;
	-webkit-transform: scale(0.2, 1);
	transform: scale(0.2, 1);
}

.btn-style-three .txt{
	position:relative;
	z-index:1;
}

.btn-style-three:hover::before{
	opacity: 1;
	-webkit-transform: scale(1, 1);
	transform: scale(1, 1);
}

.btn-style-three:hover{
	color: var(--color-white);
	border-color:var(--color-primary-bg);
}

.btn-style-four{
  position: relative;
  display: inline-block;
  line-height: 30px;
  color: var(--color-text-dark-brown);
  padding: 12px 25px 12px;
  overflow: hidden;
  background:none;
  letter-spacing:1px;
  border-radius:0;
  font-weight:600;
  text-transform: uppercase;
  border:1px solid var(--color-text-dark-brown);
  margin-bottom: 10px;
  width: auto; 
}

.btn-style-four:before{
  position: absolute;
  content: '';
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	opacity: 0;
	background: linear-gradient(45deg, var(--color-primary-bg-1), var(--color-primary-bg-2));
	-webkit-transition: all 0.4s;
	-moz-transition: all 0.4s;
	-o-transition: all 0.4s;
	transition: all 0.4s;
	-webkit-transform: scale(0.2, 1);
	transform: scale(0.2, 1);
}

.btn-style-four .txt{
  position:relative;
  z-index:1;
}

.btn-style-four:hover::before{
	opacity: 1;
	-webkit-transform: scale(1, 1);
	transform: scale(1, 1);
}

.btn-style-four:hover{
  color: var(--color-white);
  border-color: var(--color-text-dark-brown);
}

@media (max-width: 991px) { 
  .btn-style-four {
	display: block;
	width: 100%;
  }
}

@media (max-width: 767px) { 
  .btn-style-four {
	display: block;
	width: 100%;
  }
}

.btn-style-five{
  position: relative;
  display: inline-block;
  line-height: 30px;
  color: var(--color-success);
  padding: 12px 25px 12px;
  overflow: hidden;
  background:none;
  letter-spacing:1px;
  border-radius:0;
  font-weight:600;
  text-transform: uppercase;
  border:1px solid var(--color-success);
  margin-bottom: 10px;
  width: auto; 
}

.btn-style-five:before{
  position: absolute;
  content: '';
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	opacity: 0;
	background: linear-gradient(45deg, #009400, #006400);
	-webkit-transition: all 0.4s;
	-moz-transition: all 0.4s;
	-o-transition: all 0.4s;
	transition: all 0.4s;
	-webkit-transform: scale(0.2, 1);
	transform: scale(0.2, 1);
}

.btn-style-five .txt{
  position:relative;
  z-index:1;
}

.btn-style-five:hover::before{
	opacity: 1;
	-webkit-transform: scale(1, 1);
	transform: scale(1, 1);
}

.btn-style-five:hover{
  color: var(--color-white);
  border-color:var(--color-success);
}

@media (max-width: 991px) { 
  .btn-style-five {
	display: block;
	width: 100%;
  }
}

@media (max-width: 767px) { 
  .btn-style-five {
	display: block;
	width: 100%;
  }
}

.btn-style-six{
  position: relative;
  display: inline-block;
  line-height: 30px;
  color: var(--color-accent-pink);
  padding: 12px 25px 12px;
  overflow: hidden;
  background:none;
  letter-spacing:1px;
  border-radius:0;
  font-weight:600;
  text-transform: uppercase;
  border:1px solid var(--color-accent-pink);
  margin-bottom: 10px;
  width: auto; 
}

.btn-style-six:before{
  position: absolute;
  content: '';
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	opacity: 0;
	background: linear-gradient(45deg, #DC143C, #FF5A5A);
	-webkit-transition: all 0.4s;
	-moz-transition: all 0.4s;
	-o-transition: all 0.4s;
	transition: all 0.4s;
	-webkit-transform: scale(0.2, 1);
	transform: scale(0.2, 1);
}

.btn-style-six .txt{
  position:relative;
  z-index:1;
}

.btn-style-six:hover::before{
	opacity: 1;
	-webkit-transform: scale(1, 1);
	transform: scale(1, 1);
}

.btn-style-six:hover{
  color: var(--color-white);
  border-color:var(--color-accent-pink);
}

@media (max-width: 991px) { 
  .btn-style-six {
	display: block;
	width: 100%;
  }
}

@media (max-width: 767px) { 
  .btn-style-six {
	display: block;
	width: 100%;
  }
}

.btn-style-seven{
  position: relative;
  display: inline-block;
  line-height: 30px;
  color: var(--color-primary-bg);
  padding: 12px 35px 12px;
  overflow: hidden;
  background:none;
  letter-spacing:1px;
  border-radius:0;
  font-weight:600;
  text-transform: uppercase;
  border:1px solid var(--color-primary-bg);
  margin-bottom: 10px;
}

.btn-style-seven:before{
  position: absolute;
  content: '';
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	opacity: 0;
	background: linear-gradient(45deg, var(--color-primary-bg-1), var(--color-primary-bg-2));
	-webkit-transition: all 0.4s;
	-moz-transition: all 0.4s;
	-o-transition: all 0.4s;
	transition: all 0.4s;
	-webkit-transform: scale(0.2, 1);
	transform: scale(0.2, 1);
}

.btn-style-seven .txt{
  position:relative;
  z-index:1;
}

.btn-style-seven:hover::before{
	opacity: 1;
	-webkit-transform: scale(1, 1);
	transform: scale(1, 1);
}

.btn-style-seven:hover{
  color: var(--color-white);
  border-color:var(--color-primary-bg);
}

@media (max-width: 991px) { 
  .btn-style-seven {
	display: block;
	width: 100%;
  }
}

@media (max-width: 767px) { 
  .btn-style-seven {
	display: block;
	width: 100%;
  }
}

.social-icon-one{
	position: relative;
	display: block;
}

.social-icon-one .title{
	position: relative;
	font-size: 20px;
	line-height: 26px;
	color: var(--color-white);
	font-weight: 700;
	margin-right: 15px;
}

.social-icon-one li{
	position: relative;
	display: inline-block;
	font-size: 16px;
	line-height: 24px;
	color: var(--color-white);
	margin-right: 22px;
}

.social-icon-one li:last-child{
	margin-right: 0;
}

.social-icon-one li a{
	position: relative;
	display: block;
	font-size: 16px;
	line-height: 24px;
	color: var(--color-white);
	-webkit-transition: all 300ms ease;
	-moz-transition: all 300ms ease;
	-ms-transition: all 300ms ease;
	-o-transition: all 300ms ease;
	transition: all 300ms ease;
}

.social-icon-one li a:hover{
	color: var(--color-accent-warm); 
}

.theme_color{
	color:var(--color-accent-warm); 
}

.preloader{ position:fixed; left:0px; top:0px; width:100%; height:100%; z-index:999999; background: linear-gradient(45deg, #ffffff, #f4f4f4); background-position:center center; background-repeat:no-repeat; background-image:url(/images/common/loader.gif); background-size:150px; }

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

.sec-title{
	position:relative;
	z-index:2;
	margin-bottom:40px;
}

.sec-title h2{
	color:var(--color-primary-bg);
	padding-bottom:20px;
	text-transform:uppercase;
}

.sec-title h2:before{
	position:absolute;
	content:'';
	left:0;
	bottom:0;
	width:100px;
	border-bottom: 3px solid; 
	border-image: linear-gradient(to right, var(--color-accent-pink) 50%, var(--color-border-light) 50%);
	border-image-slice: 1; 
}

.sec-title.centered h2:before{
	left:50% !important;
	margin-left:-50px;
}

.sec-title .text{
  font-weight: 400;
	margin-top:22px;
}

.sec-title.light .text,
.sec-title.light .title,
.sec-title.light h2{
	color:var(--color-white);
}

.sec-title.centered{
	text-align: center !important;
}



.main-header{
	position:absolute;
	z-index:99;
	width:100%;
	padding-top:20px;
}

.main-header .main-box{
	position:relative;
	padding:0px 0px;
	left:0;
	top:0;
	width:100%;
	background:none;
	transition:all 300ms ease;
}

.main-header .main-box .outer-container{
	position:relative;
	padding:0 40px;
}

.main-header .main-box .logo-box{
	position:relative;
	float:left;
	left:0;
	z-index:10;
	padding:30px 0;
}

.main-header .main-box .logo-box .logo img{
	display:inline-block;
	max-width:100px;
	transition:all 300ms ease;	
}

.main-header .header-upper{
	position:relative;
	background-color: var(--color-accent-warm);
}

.main-header .header-upper .auto-container{
	max-width:1200px;
}

.main-header .header-upper .upper-right{
	position:relative;
	padding-top:22px;
}

.main-header .nav-outer{
	position:relative;
	float:right;
}

.main-header .header-upper .logo-box{
	position: relative;
	padding:5px 0 0 0;
}

.main-header .header-upper .logo-box .logo{
	position:relative;
	max-width:75px; 
}

.main-header .outer-box{
	position: relative;
	float:right;
	margin-left:20px;
	padding: 10px 0; 
}

.main-header .btn-box{
	position:relative;
	float:left;
	margin-left:20px;
}

.main-header .phone-box{
	position:relative;
	float:left;
	top:-4px;
	margin-left:12px;
}

.main-header .phone-box .box-inner{
	position:relative;
	padding-left:50px;
	color:var(--color-white);
	font-size: 16px;
	text-transform:uppercase;
}

.main-header .phone-box .box-inner .icon{
	position:absolute;
	left:0;
	top:6px;
	color:var(--color-white);
	font-size:50px;
	line-height:1em;
}

.main-header .phone-box .box-inner strong{
	position:relative;
	display:block;
	font-size:20px;
	font-weight:500;
	margin-top:10px;
	font-family: 'Montserrat', sans-serif;
}

.main-menu {
  position: relative;
  float: left;
  transition: all 300ms ease;
}

.main-menu .navbar-collapse {
  padding: 0;
  float: left;
  display: block !important;
}

.main-menu .navigation {
  position: relative;
  margin: 0;
  list-style: none;
  display: flex;
  justify-content: center;  
  align-items: center;      
  height: 100%;             
}

.main-menu .navigation > li {
  position: relative;
  margin: 0 10px;  
  transition: all 300ms ease-in-out;
}

.main-menu .navigation > li:last-child {
  margin-right: 0px;
}

.main-menu .navigation > li > a {
  position: relative;
  display: block;
  color: var(--color-primary-bg) !important;
  text-align: center;
  /*padding: 25px 0;*/
  padding: 25px 0 25px 10px;
  /*font-family: 'Montserrat', sans-serif;*/
  /*font-family: 'Source Sans Pro', sans-serif;*/
  /*font-family: 'Poppins', sans-serif;*/
  font-family: 'SF_Bold', sans-serif;
  font-size: 16px;
  font-weight: bold;
  text-transform: uppercase; /*-------------------------------------*/
  transition: all 300ms ease;
  letter-spacing: 1px;
}

.main-menu .navigation > li:hover > a,
.main-menu .navigation > li.current > a {
  color: var(--color-primary-bg) !important;                           /*var(--color-accent-warm) !important;*/
}

.sticky-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: var(--color-white);
  box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3);
  transform: translateY(-100%);
  transition: transform 300ms ease-out;
  z-index: 999;
}

.fixed-header .sticky-header {
  transform: translateY(0);
}

.sticky-header .logo img {
  max-width: 75px;
}

.main-menu .navigation > li > ul {
  position: absolute;
  top: 100%;
  left: 0;
  margin-left: 15px;
  min-width: 300px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 300ms ease, transform 300ms ease;
  background: linear-gradient(45deg, #ffffff, #f4f4f4);
  border-radius: 5px;
  padding: 15px;
  border: 1px solid var(--color-chatbox-bg);
  border-bottom: 3px solid var(--color-accent-warm);
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
  z-index: 100;
}

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

.main-menu .navigation > li > ul > li {
  position: relative;
  margin-bottom: 0;
}

.main-menu .navigation > li > ul > li:last-child {
  margin-bottom: 0;
}

.main-menu .navigation > li > ul > li > a {
  display: block;
  padding: 12px 15px;
  /*font-family: 'Source Sans Pro', sans-serif;*/
  /*font-family: 'Poppins', sans-serif;*/
  font-family: 'SF_Bold', sans-serif;
  font-size: 16px;
  font-weight: bold;
  color: var(--color-primary-bg);
  text-transform: uppercase; /*--------------------------------------*/
  transition: all 300ms ease;
  position: relative;
}

.main-menu .navigation > li > ul > li:hover > a {
  /*color: var(--color-accent-warm);
  background: linear-gradient(45deg, #ffffff, #f4f4f4);*/
  color: var(--color-white);
  background-color: var(--color-accent-warm);
  padding-left: 25px;
}

.main-menu .navigation > li > ul > li > a::before {
  content: "\f105"; 
  font-family: 'FontAwesome';
  position: absolute;
  left: 10px;
  top: 12px;
  opacity: 0;
  color: var(--color-white);
  transition: opacity 300ms ease;
}

.main-menu .navigation > li > ul > li:hover > a::before {
  opacity: 1;
}

.main-menu .navigation > li > ul.from-right {
  left: auto;
  right: 0;
}

.main-menu .navigation > li > ul > li.dropdown > a::after {
  content: "\f105";
  font-family: 'FontAwesome';
  position: absolute;
  right: 15px;
  top: 12px;
  color: var(--color-accent-warm);
  font-size: 16px;
}

.main-menu .navigation > li > ul > li.dropdown:hover > a::after {
  color: var(--color-white);
}

.main-menu .navigation > li > ul > li > ul {
  position: absolute;
  top: 0;
  left: 100%;
  width: 220px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: all 300ms ease;
  background: linear-gradient(45deg, var(--color-primary-bg-1), var(--color-primary-bg-2));
  padding: 10px;
  border-radius: 5px;
  box-shadow: 0px 4px 8px rgba(0,0,0,0.2);
  z-index: 99;
}

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

.main-menu .navigation > li > ul > li > ul > li {
  margin-bottom: 8px;
}

.main-menu .navigation > li > ul > li > ul > li:last-child {
  margin-bottom: 0;
}

.main-menu .navigation > li > ul > li > ul > li > a {
  padding: 10px 15px;
  font-size: 16px;
  font-weight: 700;
  color: var(--color-accent-warm);
  transition: all 300ms ease;
  position: relative;
  padding-left: 10px;
}

.main-menu .navigation > li > ul > li > ul > li:hover > a {
  color: var(--color-white);
  padding-left: 25px;
}

.main-menu .navbar-collapse > ul li.dropdown .dropdown-btn {
  position: absolute;
  right: 10px;
  top: 6px;
  width: 30px;
  height: 30px;
  text-align: center;
  line-height: 28px;
  border: 1px solid var(--color-accent-warm);
  color: var(--color-accent-warm);
  background-size: 20px;
  cursor: pointer;
  z-index: 5;
  display: none;
}

.main-menu .navigation > li > a::after {
  content: "";
  position: absolute;
  left: 15px; /* ← Canh trái theo padding-left của <a> */
  right: 0;
  bottom: 15px;
  height: 3px; /*----------------------------Do day bottom----------------------------*/
  background: linear-gradient(45deg, #DC143C, #FF5A5A);
  width: 0;
  transition: width 0.4s ease-in-out;
}

.main-menu .navigation > li:hover > a::after {
  width: calc(100% - 15px); /* ← trừ đi phần đã dịch trái để gạch không bị dài quá */
}


.nav-outer .mobile-nav-toggler{
	position: relative;
	float: right;
	font-size: 40px;
	line-height: 50px;
	cursor: pointer;
	color:var(--color-white);
	display: none;
}

.mobile-menu{
	position: fixed;
	right: 0;
	top: 0;
	width: 300px;
	padding-right:30px;
	max-width:100%;
	height: 100%;
	visibility: hidden;
	z-index: 999999;
}

.mobile-menu .nav-logo{
	position:relative;
	padding:20px 20px;
	text-align:left;	
}

.mobile-menu .nav-logo img{
	max-width:75px;
}

.mobile-menu-visible{
	overflow: hidden;
}

.mobile-menu-visible .mobile-menu{
	visibility: visible;
}

.mobile-menu .menu-backdrop{
	position: fixed;
	right: 0;
	top: 0;
	width: 0%;
	height: 100%;
	z-index: 1;
	background: rgba(0,0,0,0.90);
	transform: translateX(101%);
	transition: all 900ms ease;
}

.mobile-menu-visible .mobile-menu .menu-backdrop{
	opacity: 1;
	width:100%;
	visibility: visible;
	transition: all 900ms ease;
	transform: translateX(0%);
}

.mobile-menu .menu-box{
	position: absolute;
	right: -400px;
	top: 0px;
	width: 100%;
	height: 100%;
	max-height: 100%;
	overflow-y: auto;
	background: var(--color-white);
	padding: 0px 0px;
	z-index: 5;
	border-radius: 0px;
	transition: all 900ms ease;
}

.mobile-menu-visible .mobile-menu .menu-box{
	right:0px;
	transition-delay: 600ms;
}

.mobile-menu .close-btn{
	position: absolute;
	right: 15px;
	top: 15px;
	line-height: 30px;
	width: 30px;
	text-align: center;
	font-size: 16px;
	color: #202020;
	cursor: pointer;
	z-index: 10;
	transition:all 0.5s ease;
	transform: translateY(-50px);
}

.mobile-menu-visible .mobile-menu .close-btn{
	transform: translateY(0px);
	transition-delay: 900ms;
}

.mobile-menu .close-btn:hover{
	opacity: 0.50;
}

.mobile-menu .navigation{
	position: relative;
	display: block;
	width:100%;
	border-top: 1px solid rgba(0,0,0,0.10);
}

.mobile-menu .navigation li{
	position: relative;
	display: block;
	border-bottom: 1px solid rgba(0,0,0,0.10);
}

.mobile-menu .navigation li > ul > li:last-child{
	border-bottom: none;
}

.mobile-menu .navigation li > ul > li:first-child{
	border-top: 1px solid rgba(0,0,0,0.10);
}

.mobile-menu .navigation li > a{
	position: relative;
	display: block;
	line-height: 24px;
	padding: 10px 20px;
	font-size: 16px;
	color: #404040;
	text-transform: capitalize;
}

.mobile-menu .navigation li:hover > a,
.mobile-menu .navigation li.current > a{
	color:#111111;
}

.mobile-menu .navigation li.dropdown .dropdown-btn{
	position:absolute;
	right:0px;
	top:0px;
	width:44px;
	height:44px;
	text-align:center;
	font-size: 16px;
	line-height:44px;
	color:#404040;
	cursor:pointer;
	z-index:5;
}

.mobile-menu .navigation li.dropdown .dropdown-btn:after{
	content:'';
	position:absolute;
	left:0px;
	top:10px;
	width:1px;
	height:24px;
	border-left:1px solid rgba(0,0,0,0.10);
}

.mobile-menu .navigation li > ul,
.mobile-menu .navigation li > ul > li > ul{
	display: none;
}

.sticky-header .navbar-header{
	display:none;
}

.main-header .sticky-header .outer-box{
	margin-left:20px;
	padding:10px 0px; 
}

.sticky-header .mobile-nav-toggler{
	position:relative;
	float:left;
	color:#111111;
	display:none;
	cursor:pointer;
	font-size:32px;
	margin-left:25px;
	padding:15px 0px;
}

.banner-section {
	position: relative;
	overflow: hidden;
}

.banner-section .social-nav {
	position: absolute;
	left: 50px;
	top: 40%;
	z-index: 2;
}

.banner-section .social-nav li {
	margin-bottom: 15px;
}

.banner-section .social-nav li a {
	display: inline-block;
	width: 46px;
	height: 46px;
	line-height: 46px;
	text-align: center;
	color: var(--color-white);
	font-size: 16px;
	border: 1px solid rgba(255, 255, 255, 0.5);
	border-radius: 50%;
	transition: all 0.3s ease;
}

.banner-section .social-nav li a:hover {
	color: var(--color-white);
	border-color: var(--color-white);
	background: linear-gradient(45deg, var(--color-accent-warm-1) 0%, var(--color-accent-warm-2) 100%);
}

/*
.banner-section .slide {
	position: relative;
	overflow: hidden;
	padding: 160px 0; 
	height: 800px; 
	
	background-size: cover;
    background-position: center center;
    /*
    background-repeat: no-repeat;
    min-height: 100vh;
    display: flex;
    align-items: center;
    *
}

.banner-section .slide:before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-image: linear-gradient(to bottom, var(--color-primary-bg), var(-color-white), var(--color-primary-bg));
	opacity: 0.9;
	z-index: 1;
}
*/


.banner-section .slide {
    position: relative;
    overflow: hidden;
    padding: 160px 0;
    height: 800px;
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
}

.banner-section .slide::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(45deg, var(--color-primary-bg-1), var(--color-primary-bg-2));
    opacity: 0.8;
    z-index: 1;
}

.banner-section .slide::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: radial-gradient(
        circle at center,
        var(--color-accent-warm-light, rgba(255,126,0,0.1)) 0%,
        transparent 60%
    );
    z-index: 2;
}


.banner-section .content-column {
	position: relative;
	z-index: 10;
}

.banner-section .content-column .inner-column {
	position: relative;
}

.banner-section .content-column .title,
.banner-section .content-column h1,
.banner-section .content-column .text,
.banner-section .content-column .btns-box {
	position: relative;
	transform: scaleY(0);
	transform-origin: top;
	opacity: 0;
	transition: transform 1s ease, opacity 1s ease;
}

.banner-section .content-column .title {
	color: var(--color-accent-warm);
	font-size: 25px;
	line-height: 1.6em;
	margin-bottom: 22px;
	font-weight: 400;
	letter-spacing: 7px;
	text-transform: uppercase;
	font-family:'Montserrat', sans-serif;
	display: inline-block;
	padding-right: 70px;
}

.banner-section .content-column .title::before {
	content: '';
	position: absolute;
	top: 20px;
	right: 0;
	height: 2px;
	width: 60px;
	background: linear-gradient(45deg, var(--color-accent-warm-1) 0%, var(--color-accent-warm-2) 100%);
}

.banner-section .active .content-column .title {
	transform: scaleY(1);
	opacity: 1;
	transition-delay: 0.3s;
}

.banner-section .content-column h1 {
	max-width: 1200px;
	color: var(--color-text-highlight);
	text-transform: uppercase;
	font-size: 50px !important;
    font-weight: bold;
}

.banner-section .active .content-column h1 {
	transform: scaleY(1);
	opacity: 1;
	transition-delay: 0.6s;
}

.banner-section .content-column .text {
	font-size: 16px;
	color: var(--color-white);
	margin: 15px 0;
	font-weight: normal;
	max-width: 1200px;
	text-align: justify;
}

.banner-section .active .content-column .text {
	transform: scaleY(1);
	opacity: 1;
	transition-delay: 0.9s;
}

.banner-section .content-column .btns-box {
	margin-top: 35px;
}

.banner-section .active .content-column .btns-box {
	transform: scaleY(1);
	opacity: 1;
	transition-delay: 1.2s;
}

.banner-section .owl-dots {
	position: absolute;
	bottom: 40px;
	left: 0;
	right: 0;
	text-align: center;
	display: none;
}

.banner-section .owl-dots .owl-dot {
	width: 30px;
	height: 6px;
	margin: 0 5px;
	display: inline-block;
	background: linear-gradient(45deg, #ffffff, #f4f4f4);
	border-radius: 0;
	transition: background-color 0.3s ease;
}

.banner-section .owl-dots .owl-dot.active,
.banner-section .owl-dots .owl-dot:hover {
	background: linear-gradient(45deg, var(--color-accent-warm-1) 0%, var(--color-accent-warm-2) 100%);
}

.banner-section .owl-nav {
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	margin-top: -10px;
	opacity: 0;
	transition: opacity 0.3s ease;
}

.banner-section:hover .owl-nav {
	opacity: 1;
}

.banner-section .owl-nav .owl-prev,
.banner-section .owl-nav .owl-next {
	position: absolute;
	width: 60px;
	height: 60px;
	line-height: 56px;
	text-align: center;
	font-size: 16px;
	color: var(--color-white);
	border: 0px solid rgba(255, 255, 255, 0.6);
	border-radius: 50%;
	transition: all 0.5s ease;
}

.banner-section .owl-nav .owl-prev {
	left: 100px;
}

.banner-section .owl-nav .owl-next {
	right: 100px;
}

.banner-section .owl-nav .owl-prev:hover,
.banner-section .owl-nav .owl-next:hover {
	color: var(--color-white);
	border-color: var(--color-accent-warm);
	background: linear-gradient(45deg, var(--color-accent-warm-1) 0%, var(--color-accent-warm-2) 100%);
}

@media (max-width: 768px) {
	.banner-section .owl-nav .owl-prev {
		top: -350px;
		left: 20px;
	}

	.banner-section .owl-nav .owl-next {
		top: -350px;
		right: 20px;
	}
}

.services-section{
	position:relative;
	background: linear-gradient(45deg, #f9f9f9, #d8d8d8);
}

.services-section .inner-container{
	position:relative;
	z-index:10;
	margin-top:-110px;
	padding-bottom: 70px;
}

.services-block {
  position: relative;
  margin-bottom: 30px;
  overflow: hidden; 
  transition: all 0.3s ease;
}

.services-block .inner-box {
  position: relative;
  height: auto;
  min-height: 670px;
  padding: 40px 25px;
  overflow: hidden;
  background-image: linear-gradient(to bottom, var(--color-frame-bg), var(--color-white));
  transition: all 0.3s ease;
}

.services-block .inner-box .content {
	position: relative;
	padding-left: 70px;
}

.services-block .inner-box .content .icon {
	position: absolute;
	left: 0;
	top: 0;
	color: var(--color-primary-bg);
	font-size: 50px;
	transition: all 0.6s ease;
}

.services-block .inner-box:hover .content .icon {
	color: var(--color-accent-warm);
	transform: scale(-1) rotate(180deg);
}

.services-block .inner-box h4 {
	position: relative;
	color: var(--color-primary-bg);
	text-transform: uppercase;
	background: linear-gradient(45deg, #ffffff, #f4f4f4);
	/*line-height: 50px;*/
	padding: 0 10px;
	box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.15);
}

.services-block .inner-box h4 a {
    font-weight: bold;
	color: var(--color-primary-bg);
	transition: all 0.5s ease;
}

.services-block .inner-box:hover h4 a {
	color: var(--color-accent-warm);
}

.services-block .inner-box .content .text {
	margin-top: 8px;
	font-size: 1rem;
	line-height: 1.6em;
	color: var(--color-text-dark-brown);
}

.services-block .inner-box .arrow {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 65px;
	height: 48px;
	z-index: 1;
	color: var(--color-white);
	font-size: 22px;
	line-height: 48px;
	text-align: center;
}

.services-block .inner-box .arrow:after {
	position: absolute;
	content: '';
	left: -5px;
	top: -5px;
	width: 82px;
	height: 82px;
	background: linear-gradient(45deg, var(--color-accent-warm-1) 0%, var(--color-accent-warm-2) 100%);
	transition: all 0.5s ease;
	border-radius: 50%; 
}

.services-block .inner-box:hover .arrow:after {
	background: linear-gradient(45deg, var(--color-primary-bg-1), var(--color-primary-bg-2));
}

.services-block .image {
	opacity: 0.9;
}

.services-block .corner-box {
  position: absolute;
  display: flex;
  pointer-events: none;
  transition: all 0.3s ease;
  opacity: 0.5;
}

.services-block .corner-box.square-group {
  z-index: 2;
}

.services-block .corner-box.square-group.top-right {
  top: 5px;
  right: 0;
  width: 100px;
  height: 100px;
  display: grid;
  grid-template-areas: 
    "a b"
    "c d";
  gap: 5px;
  z-index: -1;
}

.services-block .corner-box.square-group.bottom-left {
  bottom: 10px;
  left: 5px;
  width: 100px;
  height: 100px;
  display: grid;
  grid-template-areas: 
    "e f"
    "g h";
  gap: 5px;
  z-index: -1;
}

.services-block .corner-box .square {
  position: relative;
  border-radius: 4px; 
  transition: all 0.3s ease;
}

.services-block .corner-box.square-group.top-right .square:nth-child(1) {
  grid-area: a;
  width: 50px;
  height: 50px;
  background-color: #DCEEF2;
  z-index: -2;
}

.services-block .corner-box.square-group.top-right .square:nth-child(2) {
  grid-area: b;
  width: 30px;
  height: 30px;
  background-color: #F5F9FA;
  border: 1px solid #B2C6D2;
  z-index: -2;
}

.services-block .corner-box.square-group.top-right .square:nth-child(3) {
  grid-area: c;
  width: 40px;
  height: 40px;
  background-color: #B2C6D2;
  z-index: -2;
}

.services-block .corner-box.square-group.top-right .square:nth-child(4) {
  grid-area: d;
  width: 30px;
  height: 30px;
  background-color: #9EB9C6;
  z-index: -2;
}

.services-block .corner-box.square-group.top-right .square:nth-child(5) {
  grid-area: b;
  width: 60px;
  height: 60px;
  background-color: transparent;
  border: 2px solid #87BEFA;
  z-index: 3; 
  position: absolute;
  top: 10px; 
  right: 30px; 
  transform: translate(10px, 10px); 
}

.services-block .corner-box.square-group.top-right .square.extra-square-1 {
    width: 35px;
    height: 35px;
  	background-color: transparent;
  	border: 2px solid var(--color-accent-warm);
    position: absolute;
    top: 0px; 
    right: 90px; 
    z-index: 2;
}

.services-block .corner-box.square-group.top-right .square.extra-square-2 {
    width: 35px;
    height: 35px;
  	background-color: transparent;
  	border: 2px solid var(--color-primary-bg);
    position: absolute;
    top: 90px; 
    right: 10px; 
    z-index: 2;
}

.services-block .corner-box.square-group.bottom-left .square:nth-child(1) {
  grid-area: e;
  width: 40px;
  height: 40px;
  background-color: #E0E0E0;
}

.services-block .corner-box.square-group.bottom-left .square:nth-child(2) {
  grid-area: f;
  width: 30px;
  height: 30px;
  background-color: #C6D9E2;
}

.services-block .corner-box.square-group.bottom-left .square:nth-child(3) {
  grid-area: g;
  width: 60px;
  height: 60px;
  background-color: #D0E3EC;
}

.services-block .corner-box.square-group.bottom-left .square:nth-child(4) {
  grid-area: h;
  width: 40px;
  height: 40px;
  background-color: #A3C1D1;
}

.services-block .corner-box.square-group.bottom-left .square:nth-child(5) {
  grid-area: e;
  width: 60px;
  height: 60px;
  background-color: transparent;
  border: 2px solid #87BEFA;
  z-index: 3; 
  position: absolute;
  bottom: 0; 
  left: 0; 
  transform: translate(25px, 40px); 
}

.services-block .corner-box.square-group.bottom-left .square.extra-square-1 {
    width: 35px;
    height: 35px;
    background-color: transparent;
  	border: 2px solid var(--color-primary-bg);
    position: absolute;
    bottom: 0px; 
    left: 90px; 
    z-index: 2;
}

.services-block .corner-box.square-group.bottom-left .square.extra-square-2 {
    width: 35px;
    height: 35px;
    background-color: transparent;
  	border: 2px solid var(--color-accent-warm);
    position: absolute;
    bottom: 90px; 
    left: 10px; 
    z-index: 2;
}

.full-content {
	display: none; 
}

.read-more-btn {
	color: var(--color-primary-bg) !important;
	cursor: pointer;
	font-size: 16px;
	font-weight: bold;
	text-transform: uppercase;
    border: 1px dotted;
    padding: 10px;
}

.read-more-btn:hover {
	color: var(--color-accent-warm) !important;
}

.welcome-section{
	position:relative;
	padding-top:50px;
	padding-bottom:50px;
	background: linear-gradient(45deg, #f9f9f9, #d8d8d8);
	background-position:right bottom;
	background-repeat:no-repeat;
}

.welcome-section .inner-container{
	position:relative;
	z-index:10;
	background: linear-gradient(45deg, #ffffff, #f4f4f4);
}

.welcome-section .image-column{
	position:relative;
	float:left;
	padding:0px;
}

.welcome-section .image-column .inner-column{
	position:relative;
}

.welcome-section .image-column .image{
	position:relative;
}

.welcome-section .image-column .image img{
	position:relative;
	width:100%;
	display:block;
}

	.image-container {
		position: relative;
		display: inline-block;
		width: 100%; 
		text-align: center;
	}

	.image_register {
		width: 100%;
		height: auto;
		display: block;
		transition: transform 0.5s ease;
	}

	.text_register {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%); 
		font-size: 60px;
		font-weight: bold;
		text-transform:uppercase;
		color: var(--color-accent-pink);
		text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7); 
		pointer-events: none; 
	}

	.image-container:hover .register-image {
		transform: scale(1.05); 
	}

	@media (max-width: 768px) {
		.text_register {
			font-size: 40px;
		}
	}

.welcome-section .image-column .inner-column .case-box {
  position: relative;
  left: 0px;
  bottom: 90px;
  padding: 0px;
  width: 240px;
  height: 212px;
  color: var(--color-white);
  font-size: 75px;
  padding-top: 60px;
  text-align: center;
  background: linear-gradient(45deg, var(--color-accent-warm-1) 0%, var(--color-accent-warm-2) 100%);
  font-family:'Montserrat', sans-serif;
  overflow: hidden; 
}

.welcome-section .image-column .inner-column .case-box::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%; 
  width: 100%;
  height: 100%;
  background-image: linear-gradient(90deg, transparent 0%, var(--overlay-bg) 50%, transparent 100%);
  transform: skewX(-30deg); 
  animation: sweep 2.5s infinite; 
}

@keyframes sweep {
  0% {
	left: -100%; 
  }
  100% {
	left: 100%; 
  }
}

.welcome-section .image-column .inner-column .case-box span {
  display: block;
  color: var(--color-white);
  font-size: 23px;
  font-weight: 700;
  line-height: 1.3em;
  margin-top: 35px;
  font-family:'Montserrat', sans-serif;
}

.welcome-section .content-column{
	position:relative;
	float:left;
	padding:0px;
}

.welcome-section .content-column .inner-column{
	position:relative;
	padding:90px 40px 50px;
}

.welcome-section .content-column .btns-box{
	position:relative;
	margin-top:40px;
}

.welcome-section .content-column .btns-box .theme-btn{
	margin-right:14px;
}

.welcome-section.style-two{
	padding-top:0px;
	padding-bottom:120px;
	background:none;
}

.welcome-section.style-two .content-column .inner-column{
	padding-top:50px;
}

.welcome-section.style-two .inner-container{
	margin-top:-160px;
	padding:20px;
	box-shadow:0px 0px 15px rgba(0,0,0,0.05);
}

.welcome-section.style-two:before{
	position:absolute;
	content:'';
	left:0px;
	top:160px;
	right:0px;
	bottom:0px;
	background: linear-gradient(45deg, #ffffff, #f4f4f4);
}

.counter-section{
	position:relative;
	padding-top:90px;
	background: linear-gradient(45deg, #f9f9f9, #d8d8d8);
}

.counter-section .image-layer{
	position:absolute;
	left:0px;
	top:0px;
	right:0px;
	height:500px;
	background-attachment:fixed;
	background-position:center center;
	background-repeat:no-repeat;
}

.counter-section .image-layer:before{
	position:absolute;
	content:'';
	left:0px;
	top:0px;
	right:0px;
	bottom:0px;
	opacity:0.8;
	z-index:1;
	background: linear-gradient(45deg, var(--color-primary-bg-1), var(--color-primary-bg-2));
}

.counter-section .fact-counter{
	margin-bottom:100px;
}

.fact-counter{
	position:relative;
}

.fact-counter .counter-column{
	position:relative;
	z-index:1;
	margin-bottom:30px;
}

.fact-counter .counter-column .inner{
	position:relative;
	text-align:left;
	padding:40px 20px;
	border:1px solid  var(--overlay-border);
	background: linear-gradient(45deg, var(--color-primary-bg-1), var(--color-primary-bg-2));
	-webkit-transition:all 300ms ease;
	-ms-transition:all 300ms ease;
	-o-transition:all 300ms ease;
	-moz-transition:all 300ms ease;
	transition:all 300ms ease;
}

.fact-counter .counter-column .inner:hover{
	border-color:var(--color-accent-warm); 
}

.fact-counter .counter-column .inner .content{
	position:relative;
	padding-left:64px;
}

.fact-counter .counter-column .count-box{
	position:relative;
	color:var(--color-white);
	font-size:45px;
	line-height:1em;
	font-family:'Montserrat', sans-serif;
}

.fact-counter .counter-column .count-box sup{
	position:relative;
	color:var(--color-white);
}

.fact-counter .counter-column .icon{
	position:absolute;
	left:0px;
	top:0px;
	color:var(--color-accent-warm); 
	font-size:44px;
	line-height:1em;transition: all 600ms ease;
	-moz-transition: all 600ms ease;
	-webkit-transition: all 600ms ease;
	-ms-transition: all 600ms ease;
	-o-transition: all 600ms ease;
}

.fact-counter .counter-column .inner:hover .icon{
	-webkit-transform: scale(-1) rotate(180deg);
	-moz-transform: scale(-1) rotate(180deg);
	-ms-transform: scale(-1) rotate(180deg);
	-o-transform: scale(-1) rotate(180deg);
	transform: scale(-1) rotate(180deg);
}

.fact-counter .counter-column .count-text{
	display:inline-block;
	color:var(--color-accent-warm);
	line-height:1em;
}

.fact-counter .counter-column .count-outer{
	position:relative;
	font-size:48px;
	line-height:1em;
}

.fact-counter .counter-column .counter-title{
	margin-top:10px;
	color:var(--color-white);
	font-family:'Montserrat', sans-serif;
}

.fact-counter.style-two .counter-column .inner{
	background:none;
	border:0px;
	padding:40px 0px;
}

.video-boxed{
	position:relative;
	z-index:1;
}

.video-boxed .video-image{
	position:relative;
	margin:0px;
}

.video-boxed .video-image img{
	position:relative;
	width:100%;
	z-index:3;
	box-shadow:0px 0px 15px rgba(0,0,0,0.05);
}

.video-boxed .overlay-box{
	position:absolute;
	left:0px;
	top:0px;
	width:100%;
	height:100%;
	text-align:center;
	overflow:hidden;
	line-height: 45px;
	transition:all 0.3s ease;
	-moz-transition:all 0.3s ease;
	-webkit-transition:all 0.3s ease;
	-ms-transition:all 0.3s ease;
	-o-transition:all 0.3s ease;
}

.video-boxed .overlay-box:before{
	position:absolute;
	content:'';
	left:0px;
	top:0px;
	width:100%;
	height:100%;
	z-index:10;
	background: linear-gradient(45deg, var(--color-primary-bg-1), var(--color-primary-bg-2));
	opacity: 0.8;
	border: 1px solid rgba(255,255,255,0.10);
}

.video-boxed .overlay-box span{
	position: absolute;
	width:120px;
	height: 120px;
	left:50%;
	top: 50%;
	z-index:10;
	color: var(--color-accent-warm); 
	font-weight:400;
	font-size:30px;
	text-align: center;
	border-radius:50%;
	padding-left:4px;
	display: inline-block;
	margin-top: -60px;
	margin-left:-60px;
	line-height:120px;
	transition: all 900ms ease;
	-moz-transition: all 900ms ease;
	-webkit-transition: all 900ms ease;
	-ms-transition: all 900ms ease;
	-o-transition: all 900ms ease;
	background: linear-gradient(45deg, #ffffff, #f4f4f4);
}

.video-boxed .ripple,
.video-boxed .ripple:before,
.video-boxed .ripple:after {
	position: absolute;
	top: 50%;
	left: 50%;
	width:120px;
	height: 120px;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	-ms-border-radius: 50%;
	-o-border-radius: 50%;
	border-radius: 50%;
	-webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, .6);
	-moz-box-shadow: 0 0 0 0 rgba(255, 255, 255, .6);
	-ms-box-shadow: 0 0 0 0 rgba(255, 255, 255, .6);
	-o-box-shadow: 0 0 0 0 rgba(255, 255, 255, .6);
	box-shadow: 0 0 0 0 rgba(255, 255, 255, .6);
	-webkit-animation: ripple 3s infinite;
	-moz-animation: ripple 3s infinite;
	-ms-animation: ripple 3s infinite;
	-o-animation: ripple 3s infinite;
	animation: ripple 3s infinite;
}

.video-boxed .ripple:before {
	-webkit-animation-delay: .9s;
	-moz-animation-delay: .9s;
	-ms-animation-delay: .9s;
	-o-animation-delay: .9s;
	animation-delay: .9s;
	content: "";
	position: absolute;
}

.video-boxed .ripple:after {
	-webkit-animation-delay: .6s;
	-moz-animation-delay: .6s;
	-ms-animation-delay: .6s;
	-o-animation-delay: .6s;
	animation-delay: .6s;
	content: "";
	position: absolute;
}

@-webkit-keyframes ripple {
	70% {box-shadow: 0 0 0 70px rgba(255, 255, 255, 0);}
	100% {box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);}
}

@keyframes ripple {
	70% {box-shadow: 0 0 0 70px rgba(255, 255, 255, 0);}
	100% {box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);}
}

.practice-section{
	position:relative;
	padding:100px 0px 100px;
	background: linear-gradient(45deg, #f9f9f9, #d8d8d8);
	background-position:left bottom;
	background-repeat:no-repeat;
}

.practice-section .inner-container{
	position:relative;
	border:1px solid #e1e1e1;
}

.practice-section .inner-container:before{
	position:absolute;
	content:'';
	left:-1px;
	top:-1px;
	right:-2px;
	bottom:-2px;
	border:3px solid var(--color-white);
}

.practice-section .inner-container:after{
	position:absolute;
	content:'';
	left:0px;
	top:50%;
	height:1px;
	width:100%;
	border-bottom:1px solid #e1e1e1;
}

.practice-section .inner-container .practice-block{
	padding:0px;
	float:left;
}

.practice-section .inner-container .practice-block:nth-child(4n + 0) .inner-box{
	border-right:0px;
}

.practice-block{
	position:relative;
}

.practice-block .inner-box{
	position:relative;
	text-align:center;
	padding:40px 15px;
	background: linear-gradient(45deg, #ffffff, #f4f4f4);
	border-right:1px solid #e1e1e1;
}

.practice-block .inner-box:before{
	position:absolute;
	content:'';
	left:0px;
	top:0px;
	bottom:0px;
	height:100%;
	width:40%;
	opacity:0;
	background: linear-gradient(45deg, var(--color-accent-warm-1) 0%, var(--color-accent-warm-2) 100%);
	transition:all 500ms ease;
	-moz-transition:all 500ms ease;
	-webkit-transition:all 500ms ease;
	-ms-transition:all 500ms ease;
	-o-transition:all 500ms ease;
}

.practice-block .inner-box:hover::before{
	opacity:1;
	width:100%;
}

.practice-block .inner-box .icon{
	position:relative;
	font-size:60px;
	color:var(--color-primary-bg);
	line-height:1em;
	margin-bottom:28px;
	display:inline-block;
	transition:all 500ms ease;
	-moz-transition:all 500ms ease;
	-webkit-transition:all 500ms ease;
	-ms-transition:all 500ms ease;
	-o-transition:all 500ms ease;
}

.practice-block .inner-box:hover .icon{
	color:var(--color-white);
	transform:rotateY(180deg);
}

.practice-block .inner-box h5{
	position:relative;
	margin-bottom:12px;
	text-transform:uppercase;
}

.practice-block .inner-box h5 a{
	position:relative;
	color:var(--color-primary-bg);
	transition:all 500ms ease;
	-moz-transition:all 500ms ease;
	-webkit-transition:all 500ms ease;
	-ms-transition:all 500ms ease;
	-o-transition:all 500ms ease;
}

.practice-block .inner-box:hover .arrow,
.practice-block .inner-box:hover .text,
.practice-block .inner-box:hover h5 a{
	color:var(--color-white);
}

.practice-block .inner-box .text{
	color:var(--color-text-dark-brown);
	margin-bottom:15px;
	transition:all 500ms ease;
	-moz-transition:all 500ms ease;
	-webkit-transition:all 500ms ease;
	-ms-transition:all 500ms ease;
	-o-transition:all 500ms ease;
}

.practice-block .inner-box .arrow{
	position:relative;
	color:var(--color-accent-warm); 
	font-size:20px;
	transition:all 500ms ease;
	-moz-transition:all 500ms ease;
	-webkit-transition:all 500ms ease;
	-ms-transition:all 500ms ease;
	-o-transition:all 500ms ease;
}

.fluid-section-one{
	position:relative;
	padding:0px 0px 0px;
}

.fluid-section-one .outer-container{
	position:relative;
	min-height:250px;
	background: linear-gradient(45deg, #f9f9f9, #d8d8d8);
}

.fluid-section-one .image-column{
	position:relative;
	float:left;
	width:50%;
	height:100%;
    background-image: url('/images/home/customer.jpg');
    background-size: cover;
    background-position: center; 
}

.fluid-section-one .image-column:before{
	position:absolute;
	content:'';
	left:0px;
	top:0px;
	width:100%;
	height:100%;
	opacity:0.80;
	background: linear-gradient(45deg, var(--color-primary-bg-1), var(--color-primary-bg-2));
}

.fluid-section-one .image-column .inner-column{
	position:relative;
	max-width:600px;
	width:100%;
	float:right;
	padding:100px 65px 80px 15px;
}

.fluid-section-one .side-icon{
	position:absolute;
	right:0px;
	bottom:80px;
	z-index:1;
	background-repeat:no-repeat;
}

.accordion-box{
	position:relative;
}

.accordion-box .block{
	position: relative;
	margin-bottom:20px;
	border-top:1px solid rgba(255,255,255,0.20);
	border-bottom:1px solid rgba(255,255,255,0.20);
}

.accordion-box .block.active-block{
	
}

.accordion-box .block .acc-btn{
	position:relative;
	font-size:20px;
	cursor:pointer;
	line-height:34px;
	color:var(--color-white);
	font-weight:400;
	background:none;
	border-radius:0px;
	padding:16px 50px 11px 0px;
	transition:all 500ms ease;
	-ms-transition:all 500ms ease;
	-o-transition:all 500ms ease;
	-moz-transition:all 500ms ease;
	-webkit-transition:all 500ms ease;
	font-family:'Montserrat', sans-serif;
	text-transform:uppercase;
}

.accordion-box .block .acc-btn.active{
	color:var(--color-white);
}

.accordion-box .block .icon-outer{
	position:absolute;
	right:0px;
	top:15px;
	width:34px;
	height:34px;
	font-size: 16px;
	color:var(--color-white);
	border-radius:50px;
	transition:all 500ms ease;
	-moz-transition:all 500ms ease;
	-webkit-transition:all 500ms ease;
	-ms-transition:all 500ms ease;
	-o-transition:all 500ms ease;
}

.accordion-box .block .icon-outer .icon{
	position: absolute;
	right: 0px;
	width:34px;
	height:34px;
	color:var(--color-white);
	font-size: 12px;
	padding-left:2px;
	text-align: center;
	line-height:32px;
	border-radius:0%;
}

.accordion-box .block .icon-outer .icon-plus{
	opacity:1;
}

.accordion-box .block .icon-outer .icon-minus{
	opacity:0;
}

.accordion-box .block .acc-btn.active .icon-outer .icon-minus{
	opacity:1;
	color:var(--color-white);
}

.accordion-box .block .acc-btn.active .icon-outer .icon-plus{
	opacity:0;
}

.accordion-box .block .acc-content{
	position:relative;
	display:none;
}

.accordion-box .block .acc-content .content-text{
	padding-bottom:6px;
}

.accordion-box .block .acc-content.current{
	display:block;  
}

.accordion-box .block .content{
	position:relative;
	font-size: 16px;
	color:var(--color-neutral-gray-brown);
	line-height: 1.6em;
	padding:0px 0px 25px 0px;
}

.accordion-box .block .content .accordian-text{
	position:relative;
	color:var(--color-white);
	line-height: 1.6em;
}

.accordion-box .block .content p:last-child{
	margin-bottom:0px;  
}

.fluid-section-one .content-column{
	position:relative;
	float:right;
	width:50%;
}

.fluid-section-one .content-column .inner-column{
	position:relative;
	max-width:600px;
	width:100%;
	padding:90px 15px 75px 90px;
}

.default-form{
	position:relative;
	padding: 20px;
	z-index:2;
}

.default-form .form-group{
	position:relative;
	margin-bottom:20px;
}

.default-form .form-group input[type="text"],
.default-form .form-group input[type="number"],
.default-form .form-group input[type="date"],
.default-form .form-group input[type="email"],
.default-form .form-group input[type="password"],
.default-form .form-group input[type="tel"],
.default-form .form-group input[type="file"],
.default-form .form-group input[type="url"],
.default-form .form-group input[type="radio"],
.default-form .form-group textarea,
.default-form .form-group select,
.default-form .form-group option{
	position:relative;
	display:block;
	width:100%;
	line-height:28px;
	padding:10px 20px;
	color:var(--color-text-muted);
	height:55px;
	font-size: 16px;
	background:var(--color-white);
	font-weight:400;
	border-radius:2px;
	border:1px solid transparent;
	-webkit-transition:all 300ms ease;
	-ms-transition:all 300ms ease;
	-o-transition:all 300ms ease;
	-moz-transition:all 300ms ease;
	transition:all 300ms ease;
}

.default-form .form-group input:focus,
.default-form .form-group select:focus,
.default-form .form-group option:focus,
.default-form .form-group textarea:focus{
  border-color:var(--color-accent-warm);
}

.default-form .form-group textarea{
	position:relative;
	display:block;
	width:100%;
	line-height:22px;
	padding:15px 20px;
	color:var(--color-text-muted);
	height:110px;
	background:var(--color-white);
	resize:none;
	font-size: 16px;
	font-weight:400;
	border-radius:0px;
	border:1px solid transparent;
	-webkit-transition:all 300ms ease;
	-ms-transition:all 300ms ease;
	-o-transition:all 300ms ease;
	-moz-transition:all 300ms ease;
	transition:all 300ms ease;
}

.default-form .form-group .btn-detail{
	
}

.form-group .ui-selectmenu-button.ui-button{
	width:100%;
	font-size: 16px;
	font-style:normal;
	height:55px;
	padding:12px 20px 10px 20px;
	line-height:28px;
	color:var(--color-neutral-gray-brown);
	border: none;
	border-radius:0px;
	background:var(--color-white);
	border:1px solid transparent;
}

.form-group .ui-button .ui-icon{
	background:none;
	position:relative;
	top:2px;
	text-indent:0px;
	color:var(--color-text-muted);	
}

.form-group .ui-button .ui-icon:before{
	font-family: 'FontAwesome';
	content: "\f107";
	position:absolute;
	right:0px;
	top:2px !important;
	top:13px;
	width:10px;
	height:20px;
	display:block;
	color:#9999;
	line-height:20px;
	font-size: 16px;
	font-weight:normal;
	text-align:center;
	z-index:5;
	font-weight:800;
}

.ui-widget.ui-widget-content{
	
}

.ui-menu .ui-menu-item{
	font-size: 16px;
}

.ui-menu .ui-menu-item:last-child{
	border:none;	
}

.ui-state-active, .ui-widget-content .ui-state-active{
	background:var(--color-accent-warm);
	border-color:var(--color-accent-warm); 
}

.ui-menu .ui-menu-item-wrapper{
	position:relative;
	display:block;
	padding:8px 20px;
	font-size: 16px;
	line-height:24px;
}

.ui-menu-item:hover{
	background: linear-gradient(45deg, var(--color-accent-warm-1) 0%, var(--color-accent-warm-2) 100%); 
}

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

.theme-btn.disabled,.theme-btn[disabled],fieldset[disabled] .theme-btn {
	cursor: not-allowed;
	filter: alpha(opacity=65);
	-webkit-box-shadow: none;
	box-shadow: none;
	opacity: .65
}

.team-section{
	position:relative;
	padding:80px 0px 50px;
	background-color:transparent;
}

.team-block{
	position:relative;
	z-index:1;
	margin-top:10px;
  margin-bottom:20px;
}

.team-block .inner-box{
	position:relative;
  display: grid;
  grid-template-columns:16% 52% 30%;
  
  background: linear-gradient(45deg, #ffffff, #f4f4f4);
  column-gap: 1%;
  padding: 10px;
  border: 1px solid rgba(0, 0, 0, 0.1);
}

.team-block .inner-box:hover{
	background: linear-gradient(45deg, #ffffff, #f4f4f4);
	box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.5);
}

.team-block .inner-box .image{
	position:relative;
	overflow:hidden;
}

.team-block .inner-box .image:before{
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 2;
	display: block;
	content: '';
	width: 0;
	height: 0;
	background: rgba(255,126,0,.5);
	border-radius: 100%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	opacity: 0;
}

.team-block .inner-box:hover .image:before{
	-webkit-animation: circle .75s;
	animation: circle .75s;
}

@-webkit-keyframes circle {
	0% {
		opacity: 1;
	}
	40% {
		opacity: 1;
	}
	100% {
		width: 200%;
		height: 200%;
		opacity: 0;
	}
}
@keyframes circle {
	0% {
		opacity: 1;
	}
	40% {
		opacity: 1;
	}
	100% {
		width: 200%;
		height: 200%;
		opacity: 0;
	}
}

.team-block .inner-box .image img{
	position:relative;
	width:100%;
	display:block;
}

.team-block .inner-box .lower-box{
	position:relative;
	text-align:left;
	padding:10px 15px 0px;
  background: #EEEEEE;
}

.team-block .inner-box .lower-box h5{
  font-size: 20px;
  font-family:'Montserrat', sans-serif;
  line-height: 40px;
  font-weight: 700;
  color: var(--color-text-dark-brown);
  text-transform: uppercase;
}

.team-block .inner-box .lower-box h5 a{
	position:relative;
	color:var(--color-primary-bg);
	text-transform:uppercase;
	transition:all 300ms ease;
}

.team-block .inner-box .lower-box h5 a:hover{
	color:var(--color-accent-warm); 
}

.team-block .inner-box .lower-box .designation{
	position:relative;
	color:var(--color-text-dark-brown);
	font-size: 16px;
	margin-top:8px;
	margin-bottom:12px;
}

.team-block .inner-box .lower-box .arrow{
	position:relative;
	color:var(--color-accent-warm); 
	font-size:20px;
	transition:all 300ms ease;
}

.team-block .inner-box .lower-box .arrow:hover{
	color:#111111;
}

.team-block .inner-box .social-nav{
  position:relative;
  z-index:2;
  text-align:center;
  background: #EEEEEE;
}

.team-block .inner-box .social-nav li{
  position:relative;
  margin:2px;
  display: inline-block;
}

.team-block .inner-box .social-nav li a{
  position:relative;
  width:35px;
  height:35px;
  color:var(--color-accent-warm);
  font-size: 16px;
  line-height:33px;
  background: linear-gradient(45deg, #ffffff, #f4f4f4);
  border-radius:50px;
  text-align:center;
  display:inline-block;
  border:1px solid var(--color-accent-warm);
  transition:all 300ms ease;
}

.team-block .inner-box .social-nav li a:hover{
  color: var(--color-white);
  background: linear-gradient(45deg, var(--color-accent-warm-1) 0%, var(--color-accent-warm-2) 100%);
  border-color:var(--color-accent-warm);
}

#customer-list {
	display: grid;
	gap: 10px;
	padding: 0;
}

.team-block-2 {
	border-radius: 0px;
	overflow: hidden;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); 
	transition: transform 0.3s ease, box-shadow 0.3s ease;
	padding: 0px 0px; 
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.team-block-2:hover {
	transform: scale(1.03);
	box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); 
}

.team-block-2:hover th {
	background: linear-gradient(45deg, var(--color-primary-bg-1), var(--color-primary-bg-2)); 
	color: var(--color-white); 
}

.team-block-2:hover td {
	color: var(--color-text-dark-brown); 
}

.table-borderless {
	border: 1px solid var(--color-primary-bg);
	border-radius: 0px;
	padding: 15px; 
	margin: 0 0; 
	background: linear-gradient(45deg, #ffffff, #f4f4f4); 
}

.team-block-2:hover .table-borderless {
	background-color: var(--color-frame-bg); 
	border-color: var(--color-primary-bg); 
	color: var(--color-white); 
	transition: background-color 0.3s ease, color 0.3s ease; 
}

.team-block-2 .table {
	width: 100%;
	border-collapse: separate;
}

.team-block-2 th,
.team-block-2 td {
	padding: 12px 15px;
	vertical-align: middle;
}

.team-block-2 th {
	color: var(--color-accent-warm);
	font-weight: 600;
	font-size: 1.2rem;
	background-color: var(--color-bg-light-gray); 
}

.team-block-2 td {
	color: var(--color-text-dark-brown); 
	background-color: var(--color-bg-light-gray); 
	font-size: 1rem;
}

.team-block-2 tr:last-child td {
	border-bottom: none;
}

.truncate-text {
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.file a {
	color: blue;
	text-decoration: none;
	transition: color 0.3s ease;
}

.file a:hover {
	text-decoration: underline;
	color: var(--color-accent-warm); 
}

.team-block-2 .col-25 {
	width: 25%;
}

.team-block-2 .col-75 {
	width: 75%;
}

.team-block-2 .heading-text {
	font-size: 1.4em;
	color: var(--color-white);
	font-weight: bold;
	white-space: nowrap;
}

.team-block-2 .victimName {
	font-size: 1.4em;
	color: var(--color-accent-warm);
	font-weight: bold;
}

.team-block-2:hover .victimName {
	background: linear-gradient(45deg, var(--color-accent-warm-1) 0%, var(--color-accent-warm-2) 100%); 
	color: var(--color-white) !important 
}

.testimonial-section{
	position:relative;
	padding:0px 0px 50px;
	background-color:var(--overlay-bg);
	background-size:cover;
	background-position:center bottom;
}

.testimonial-section h2{
	padding-top: 80px;
	color: var(--color-text-dark-brown);
}

.testimonial-section .inner-container{
	position:relative;
	max-width:1200px;
	margin:0 auto;
	
}

.testimonial-section .inner-container .owl-dots{
	position:relative;
	text-align:center;
	margin-top:30px;
}

.testimonial-section .inner-container .owl-dots .owl-dot{
	position:relative;
	width:18px;
	height:18px;
	opacity:0.50;
	margin:0px 5px;
	border-radius:50%;
	display:inline-block;
	background: linear-gradient(45deg, var(--color-accent-warm-1) 0%, var(--color-accent-warm-2) 100%); 
	-webkit-transition:all 300ms ease;
	-ms-transition:all 300ms ease;
	-o-transition:all 300ms ease;
	-moz-transition:all 300ms ease;
	transition:all 300ms ease;
}

.testimonial-section .inner-container .owl-dots .owl-dot:hover,
.testimonial-section .inner-container .owl-dots .owl-dot.active{
	opacity:1;
}

.testimonial-section .inner-container .owl-nav{
	position:absolute;
	left:-120px;
	top:50%;
	right:-120px;
	margin-top:-40px;
}

.testimonial-section .inner-container .owl-nav .owl-prev,
.testimonial-section .inner-container .owl-nav .owl-next {
    position: absolute;
    width: 60px;
    height: 60px;
    color: var(--color-white);
    font-size: 35px;
    text-align: center;
    line-height: 50px; 
    border: 2px solid var(--color-white);
    border-radius: 50%;
    display: inline-block;
    background: linear-gradient(45deg, var(--color-primary-bg-1), var(--color-primary-bg-2));
    transition: all 300ms ease;
}

.testimonial-section .inner-container .owl-nav .owl-prev {
    left: 0px;
}

.testimonial-section .inner-container .owl-nav .owl-next {
    right: 0px;
}

.testimonial-section .inner-container .owl-nav .owl-prev:hover,
.testimonial-section .inner-container .owl-nav .owl-next:hover{
	background: linear-gradient(45deg, var(--color-accent-warm-1) 0%, var(--color-accent-warm-2) 100%); 
	border-color:var(--color-accent-warm); 
}

.testimonial-block{
	position:relative;
}

.testimonial-block .inner-box{
	position:relative;
	text-align:center;
	padding:0px 50px 50px;
	min-height: 450px;
	background: linear-gradient(45deg, var(--color-primary-bg-1), var(--color-primary-bg-2));
}

.testimonial-block .inner-box .quote-icon{
	position:absolute;
	left:50px;
	top:100px;
	opacity:0.50;
	color:var(--color-frame-beige);
	line-height:1em;
	font-size:40px;
}

.testimonial-block .inner-box:before{
	position:absolute;
	content:'';
	left:0px;
	top:60px;
	right:0px;
	bottom:0px;
	background-image:linear-gradient(to bottom, var(--color-frame-bg), var(--color-white));
}

.testimonial-block .inner-box .author-image{
	position:relative;
	width:117px;
	height:117px;
	margin:0 auto;
	overflow:hidden;
	margin-bottom:25px;
	border-radius:50%;
	display:inline-block;
	border:8px solid var(--color-white);
}

.testimonial-block .inner-box .text{
	position:relative;
	font-size: 16px;
	color:var(--color-text-dark-brown);
}

.testimonial-block .inner-box .name{
	position:relative;
	color:var(--color-accent-warm); 
	font-size:25px;
	font-weight: bold;
	letter-spacing:1px;
	margin-top:20px;
	margin-bottom:20px;
	text-transform:uppercase;
	font-family: 'Montserrat', sans-serif;
}

.testimonial-block .corner-box {
  position: absolute;
  display: flex;
  pointer-events: none;
  transition: all 0.3s ease;
  opacity: 0.5;
}

.testimonial-block .corner-box.square-group {
  z-index: 2;
}

.testimonial-block .corner-box.square-group.top-right {
  top: 67px;
  right: 0;
  width: 100px;
  height: 100px;
  display: grid;
  grid-template-areas: 
    "a b"
    "c d";
  gap: 5px;
  z-index: 0;
}

.testimonial-block .corner-box.square-group.bottom-left {
  bottom: 10px;
  left: 5px;
  width: 100px;
  height: 100px;
  display: grid;
  grid-template-areas: 
    "e f"
    "g h";
  gap: 5px;
  z-index: 0;
}

.testimonial-block .corner-box .square {
  position: relative;
  border-radius: 4px; 
  transition: all 0.3s ease;
}

.testimonial-block .corner-box.square-group.top-right .square:nth-child(1) {
  grid-area: a;
  width: 50px;
  height: 50px;
  background-color: #DCEEF2;
  z-index: -2;
}

.testimonial-block .corner-box.square-group.top-right .square:nth-child(2) {
  grid-area: b;
  width: 30px;
  height: 30px;
  background-color: #F5F9FA;
  border: 1px solid #B2C6D2;
  z-index: -2;
}

.testimonial-block .corner-box.square-group.top-right .square:nth-child(3) {
  grid-area: c;
  width: 40px;
  height: 40px;
  background-color: #B2C6D2;
  z-index: -2;
}

.testimonial-block .corner-box.square-group.top-right .square:nth-child(4) {
  grid-area: d;
  width: 30px;
  height: 30px;
  background-color: #9EB9C6;
  z-index: -2;
}

.testimonial-block .corner-box.square-group.top-right .square:nth-child(5) {
  grid-area: b;
  width: 60px;
  height: 60px;
  background-color: transparent;
  border: 2px solid #87BEFA;
  z-index: 3; 
  position: absolute;
  top: 10px; 
  right: 30px; 
  transform: translate(10px, 10px); 
}

.testimonial-block .corner-box.square-group.top-right .square.extra-square-1 {
    width: 35px;
    height: 35px;
  	background-color: transparent;
  	border: 2px solid var(--color-accent-warm);
    position: absolute;
    top: 0px; 
    right: 90px; 
    z-index: 2;
}

.testimonial-block .corner-box.square-group.top-right .square.extra-square-2 {
    width: 35px;
    height: 35px;
  	background-color: transparent;
  	border: 2px solid var(--color-primary-bg);
    position: absolute;
    top: 90px; 
    right: 10px; 
    z-index: 2;
}

.testimonial-block .corner-box.square-group.bottom-left .square:nth-child(1) {
  grid-area: e;
  width: 40px;
  height: 40px;
  background-color: #E0E0E0;
}

.testimonial-block .corner-box.square-group.bottom-left .square:nth-child(2) {
  grid-area: f;
  width: 30px;
  height: 30px;
  background-color: #C6D9E2;
}

.testimonial-block .corner-box.square-group.bottom-left .square:nth-child(3) {
  grid-area: g;
  width: 60px;
  height: 60px;
  background-color: #D0E3EC;
}

.testimonial-block .corner-box.square-group.bottom-left .square:nth-child(4) {
  grid-area: h;
  width: 40px;
  height: 40px;
  background-color: #A3C1D1;
}

.testimonial-block .corner-box.square-group.bottom-left .square:nth-child(5) {
  grid-area: e;
  width: 60px;
  height: 60px;
  background-color: transparent;
  border: 2px solid #87BEFA;
  z-index: 3; 
  position: absolute;
  bottom: 0; 
  left: 0; 
  transform: translate(25px, 40px); 
}

.testimonial-block .corner-box.square-group.bottom-left .square.extra-square-1 {
    width: 35px;
    height: 35px;
    background-color: transparent;
  	border: 2px solid var(--color-primary-bg);
    position: absolute;
    bottom: 0px; 
    left: 90px; 
    z-index: 2;
}

.testimonial-block .corner-box.square-group.bottom-left .square.extra-square-2 {
    width: 35px;
    height: 35px;
    background-color: transparent;
  	border: 2px solid var(--color-accent-warm);
    position: absolute;
    bottom: 90px; 
    left: 10px; 
    z-index: 2;
}

.clients-section{
	position:relative;
	padding:80px 0px 80px;
	background: linear-gradient(45deg, #ffffff, #f4f4f4);
}

.clients-section.style-two{
	padding-top:0px;
}

.clients-section .image-box{
	position:relative;
	text-align:center;
	padding:10px 0px;
	border:1px solid #e1e1e1;
	-webkit-transition:all 300ms ease;
	-ms-transition:all 300ms ease;
	-o-transition:all 300ms ease;
	-moz-transition:all 300ms ease;
	transition:all 300ms ease;
}

.clients-section .image-box:hover{
	border-color:var(--color-accent-warm); 
}

.clients-section .image-box img{
	position:relative;
	width:auto;
	display:inline-block;
	filter: grayscale(100%);
	-webkit-transition:all 300ms ease;
	-ms-transition:all 300ms ease;
	-o-transition:all 300ms ease;
	-moz-transition:all 300ms ease;
	transition:all 300ms ease;
}

.clients-section .image-box:hover img{
	filter: grayscale(0%);
}

.clients-section .owl-dots,
.clients-section .owl-nav{
	display:none;
}


.cta-section{
	position:relative;
	background: linear-gradient(45deg, #ffffff, #f4f4f4);
}

.cta-section .inner-container{
	position:relative;
	padding-left:580px;
	padding-right:15px;
	min-height:350px;
	z-index: 3;
	margin-bottom:-150px;
	background: linear-gradient(45deg, #f9f9f9, #d8d8d8);
}

.cta-section .inner-container:before{
	position:absolute;
	content:'';
	right:0px;
	bottom:0px;
	border-bottom: 150px solid var(--color-accent-warm); 
	border-left: 150px solid transparent;
}

.cta-section .inner-container .hammer-image{
	position:absolute;
	right:-80px;
	bottom:-80px;
	transform:rotate(-2deg);
}

.cta-section .inner-container .image{
	position:absolute;
	left:0px;
	top:0px;
	width:502px;

}

.cta-section .inner-container .content{
	position:relative;
	padding:60px 0px;
}

.cta-section .inner-container .content h2{
	position:relative;
	color:var(--color-primary-bg);
	font-size:30px;
	font-weight: bold;
	margin-bottom:22px;
	text-transform:uppercase;
}

.main-footer {
	position: relative;
    background: linear-gradient(45deg, var(--color-primary-bg-1), var(--color-primary-bg-2));
	background-image: url('/images/footer/bg_6.jpg');
	background-size: cover;
	background-position: center;
}
.main-footer::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: linear-gradient(45deg, var(--color-primary-bg-1), var(--color-primary-bg-2));
	opacity: 0.85; 
	pointer-events: none; 
}
.main-footer > * {
	position: relative;
	z-index: 2; 
}
.main-footer .widgets-section{
	position:relative;
	padding: 200px 0px 10px;
}
.main-footer .footer-column{
	position:relative;
	margin-bottom:30px;
}
.main-footer .footer-widget{
	position:relative;
	margin-bottom:20px;
}
.main-footer .footer-widget h5{
	color:var(--color-white);
	margin-bottom:20px;
	letter-spacing:1px;
	text-transform:uppercase;
	font-weight: bold;
}
.main-footer .logo-widget{
	position:relative;
}
.main-footer .logo-widget .logo{
	position:relative;
	margin-bottom:26px;
	max-width: 100px;
}
.main-footer .logo-widget .text{
	position:relative;
	color:var(--color-white);
	font-weight:400;
	margin-bottom:20px;
}
.main-footer .logo-widget .social-nav{
	position:relative;
	float:left;
}
.main-footer .logo-widget .social-nav li{
	position:relative;
	margin-right:6px;
	display:inline-block;
}
.main-footer .logo-widget .social-nav li a{
	position:relative;
	width:44px;
	height:44px;
	color:var(--color-white);
	font-size: 16px;
	text-align:center;
	line-height:42px;
	border-radius:50px;
	display:inline-block;
	transition:all 300ms ease;
	border:1px solid var(--overlay-border);
}
.main-footer .logo-widget .social-nav li a:hover{
	background: linear-gradient(45deg, var(--color-accent-warm-1) 0%, var(--color-accent-warm-2) 100%); 
	border-color:var(--color-accent-warm); 
}

.main-footer .footer-list{
	position:relative;
}
.main-footer .footer-list hr{
  position:relative;
  border-bottom: 1px solid var(--overlay-border);
}
.main-footer .footer-list li{
	position:relative;
	margin-bottom:10px;
}
.main-footer .footer-list li:last-child{
	margin-bottom:0px;
}
.main-footer .footer-list li a{
	position:relative;
	color:var(--color-white);
	/*font-size: 15px;
	font-weight:normal;*/
	padding-left:0;
	transition:all 300ms ease;
}

.main-footer .footer-list li a:before{
  content: '\f101';
  font-family: 'FontAwesome';
  display: inline-block;
  margin-right: 10px;
  font-size: 14px;
  color: var(--color-accent-warm);
}

.main-footer .footer-list li a:hover{
	color:var(--color-accent-warm);
}
.main-footer .contact-widget{
	position:relative;
}
.main-footer .contact-widget ul{
	position:relative;
}
.main-footer .contact-widget ul li{
	position:relative;
	color:var(--color-white);
	/*font-size: 15px;*/
	text-align: justify;
	padding-left:35px;
	margin-bottom:20px;
	line-height: 1.6em;
}
.main-footer .contact-widget ul li .icon{
	position:absolute;
	left:0px;
	top:5px;
	/*font-size: 15px;*/
	line-height:1em;
	color:var(--color-accent-warm);
}
.main-footer .contact-widget ul li a{
	position:relative;
	color:var(--color-white);
	transition:all 300ms ease;
}
.main-footer .contact-widget ul li a:hover{
	color:var(--color-accent-warm); 
}

.main-footer .contact-widget .logo{
	padding-left:35px; 
}


.main-footer .newsletter-widget .text{
	position: relative;
	color:var(--color-white);
	font-weight: normal;
	text-align:justify;
	margin-bottom: 20px;
}
.main-footer .newsletter-form{
	margin-bottom:35px;
}
.main-footer .newsletter-form .form-group{
	position:relative;
	display:block;
	margin-bottom:10px;
}
.main-footer .newsletter-form .form-group input[type="text"],
.main-footer .newsletter-form .form-group input[type="email"]{
	position:relative;
	display:block;
	width:100%;
	line-height:26px;
	padding:10px 25px 10px 25px;
	height:55px;
	/*font-size:15px;*/
	color:var(--color-white);
	background:none;
	border-radius:0px;
	border:1px solid rgba(255,255,255,0.3);
	transition:all 300ms ease;	
}
.main-footer .newsletter-form .form-group input::-webkit-input-placeholder,
.main-footer .newsletter-form .form-group textarea::-webkit-input-placeholder{
	color:var(--color-border-light);
}
.main-footer .newsletter-form .form-group button{
	position:relative;
	width:100%;
	margin-top:10px;
}

.main-footer .footer-bottom{
	position: relative;
	padding: 5px 0px;
	border-top: 1px solid rgba(255,255,255,0.1);
	background: linear-gradient(45deg, var(--color-primary-bg-1), var(--color-primary-bg-2));
}
.main-footer .footer-bottom .copyright{
	position:relative;
	/*font-size: 15px;*/
	color:var(--color-white);
	text-align:center;
}

.footer-bottom.modern-footer {
  background-color: #f8f9fa;
  border-top: 1px solid #ddd;
  padding: 20px 0;
  /*font-size: 15px;*/
  color: #555;
}

.footer-bottom-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}

.footer-left {
  display: flex;
  align-items: center;
  gap: 10px;
}

.footer-logo {
  height: 24px;
}

.menu_lang .lang-list {
  display: flex;
  gap: 15px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.lang-list .lang-item a {
  display: flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: #333;
  transition: color 0.3s ease;
}

.lang-list .lang-item a:hover {
  color: #007bff;
}

.lang-list .lang-item img {
  width: 20px;
  height: 14px;
}

.lang-list .current-lang a {
  font-weight: bold;
  color: #007bff;
}


.page-title {
    position: relative;
    overflow: hidden;
    padding: 80px 0;
    text-align: center;
    background: url('/images/common/1.jpg') center center / cover no-repeat fixed;
    z-index: 0;
}

/* Hiệu ứng overlay gradient */
.page-title::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: linear-gradient(45deg, var(--color-primary-bg-1), var(--color-primary-bg-2));
    opacity: 0.85;
    z-index: 1;
}

/* Hiệu ứng ánh sáng mờ từ tâm */
.page-title::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: radial-gradient(
        circle at center,
        var(--color-accent-warm-light, rgba(255, 126, 0, 0.1)) 0%,
        transparent 60%
    );
    z-index: 2;
}

/* Nội dung trong banner nên nằm trên cùng */
.page-title > * {
    position: relative;
    z-index: 3;
}


.page-title h1 {
  color: var(--color-text-highlight);
  font-size: 50px !important;
  line-height: 50px !important;
  font-weight: bold;
  text-transform: uppercase;
  position: relative;
  animation: fadeIn 1.5s ease-in-out;
}

.page-title h2 {
  color: var(--color-text-highlight);
  font-size: 25px !important;
  font-weight: bold;
  /*text-transform: uppercase;*/
  position: relative;
  animation: fadeIn 1.5s ease-in-out;
}

.page-title.style-two { padding-bottom: 260px; }


/* Nền breadcrumb overlay mờ khi có ảnh nền */
.modern-breadcrumb-section {
    position: relative;
    background: none;
    padding: 30px 20px;
}

/*
.modern-breadcrumb-section h1 {
  color: var(--color-accent-warm);
  font-size: 40px !important;
  font-family: 'Montserrat', serif;
  text-align: left;
}
*/
.modern-breadcrumb-section h1 {
  font-size: 40px !important;
  font-family: 'Montserrat', serif;
  text-align: left;
  
  /* Gradient từ xanh lam đậm sang xám */
  background: var(--color-white);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text; /* cho Firefox */
}




/* Breadcrumb hiện đại */
.modern-page-breadcrumb {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 16px;
    font-weight: bold;
    color: var(--color-accent-warm);
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
}

.modern-page-breadcrumb li {
    display: inline;
}

.modern-page-breadcrumb li a {
    color: var(--color-white);
    text-decoration: none;
    font-weight: bold;
    transition: color 0.3s;
}

.modern-page-breadcrumb li a:hover {
    color: var(--color-accent-warm);
}

.modern-page-breadcrumb .separator_2 {
    color: var(--color-white);
    font-weight: bold;
}

/* Responsive xử lý xuống mobile */
@media (max-width: 767.98px) {
    .modern-breadcrumb-section {
        text-align: center;
    }

    .page-main-title {
        font-size: 28px;
    }

    .modern-page-breadcrumb {
        justify-content: center;
        font-size: 14px;
        margin-top: 10px;
    }
}


@keyframes fadeIn {
    0% { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}

.case-section{
	position:relative;
	padding-bottom:110px;
}

.case-section:before{
	position:absolute;
	content:'';
	left:0px;
	top:160px;
	right:0px;
	bottom:0px;
	background: linear-gradient(45deg, #f9f9f9, #d8d8d8);
	background-image: url(/images/common/pattern-3.png);
}

.case-section .inner-container{
	position:relative;
	margin-top:-180px;
	padding:20px 20px;
	background: var(--color-frame-bg);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.case-section .inner-column{
    position:relative;
}

.case-section .image{
    position:relative;
}

.case-section .image img{
    position:relative;
    width:auto;
    height: 100%;
    display:block;
}

.case-section .inner-column{
    position:relative;
    padding:5px 0px 5px;
}

.case-section .text-box{
    position:relative;
    background: linear-gradient(45deg, var(--color-accent-warm-1) 0%, var(--color-accent-warm-2) 100%);
    color:var(--color-white);
    font-size: 16px;
    line-height:1.2em;
    padding:25px 25px;
    overflow:hidden;
    border:1px solid var(--color-white); 
    font-family: 'Montserrat', sans-serif;
}

.case-section .text-box .arrow{
    position:absolute;
    right:0px;
    bottom:0px;
    width:65px;
    height:48px;
    z-index:1;
    color:var(--color-accent-warm);
    font-size:22px;
    line-height:54px;
    text-align:center;
}

.case-section .text-box .arrow:after{
    position:absolute;
    content:'';
    left:0px;
    top:0px;
    width:82px;
    height:82px;
    z-index:-1;
    border-radius:0%;
    background: linear-gradient(45deg, var(--color-accent-warm-1) 0%, var(--color-accent-warm-2) 100%); 
    transition:all 500ms ease;
}

.services-section-two{
	position:relative;
	padding:100px 0px 70px;
	background: linear-gradient(45deg, #f9f9f9, #d8d8d8);
}

.services-section-two h2{
	padding-top: 80px;
}

.services-section-two.style-two{
	padding-top:0px;
}

.services-section-two .inner-container{
	position:relative;
}

.services-block-two .outer-box {
	position: relative;
	padding: 20px; 
	border: 2px solid var(--color-box-bg); 
	box-sizing: border-box;
	margin-bottom: 50px;
}

.services-block-two .outer-box::before {
	content: "1"; 
	position: absolute;
	top: -30px; 
	left: 50%;
	transform: translateX(-50%);
	width: 60px;
	height: 60px;
	background: linear-gradient(45deg, var(--color-primary-bg-1), var(--color-primary-bg-2)); 
	color: #fff; 
	font-size: 40px;
	font-weight: bold;
	display: flex; 
	align-items: center; 
	justify-content: center; 
	text-align: center;
	border-radius: 50%;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
	border: 2px solid #fff; 
	z-index: 2;
}

.services-block-two .outer-box.option-1::before {
	content: "1";
	background: linear-gradient(45deg, var(--color-accent-warm-1) 0%, var(--color-accent-warm-2) 100%);
}

.services-block-two .outer-box.option-2::before {
	content: "2";
	background: linear-gradient(45deg, var(--color-accent-warm-1) 0%, var(--color-accent-warm-2) 100%);
}

.services-block-two .outer-box.option-3::before {
	content: "3";
	background: linear-gradient(45deg, var(--color-accent-warm-1) 0%, var(--color-accent-warm-2) 100%);
}

.services-block-two .inner-box {
	position: relative;
	height: 500px;
	text-align: center;
	padding: 50px 30px 40px;
	background-image: linear-gradient(to bottom, var(--color-frame-bg), var(--color-white));
	box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.2);
}

.services-block-two .inner-box .icon {
	position: relative;
	font-size: 64px;
	color: var(--color-primary-bg);
	line-height: 1em;
	margin-bottom: 32px;
	display: inline-block;
	transition: all 500ms ease;
	-moz-transition: all 500ms ease;
	-webkit-transition: all 500ms ease;
	-ms-transition: all 500ms ease;
	-o-transition: all 500ms ease;
}

.services-block-two .inner-box:hover .icon {
	color: var(--color-accent-warm);
	transform: rotateY(180deg);
}

.services-block-two .inner-box h5 {
	position: relative;
	margin-bottom: 12px;
	text-transform: uppercase;
}

.services-block-two .inner-box h5 a {
	position: relative;
	color: var(--color-primary-bg);
	transition: all 500ms ease;
	font-weight: bold;
	-moz-transition: all 500ms ease;
	-webkit-transition: all 500ms ease;
	-ms-transition: all 500ms ease;
	-o-transition: all 500ms ease;
}

.services-block-two .inner-box:hover h5 a {
	color: var(--color-accent-warm);
}

.services-block-two .inner-box .text {
	color: var(--color-text-dark-brown);
	margin-bottom: 20px;
	transition: all 500ms ease;
	-moz-transition: all 500ms ease;
	-webkit-transition: all 500ms ease;
	-ms-transition: all 500ms ease;
	-o-transition: all 500ms ease;
}

.services-block-two .inner-box .arrow {
	position: relative;
	color: var(--color-accent-warm);
	font-size: 20px;
	transition: all 500ms ease;
	-moz-transition: all 500ms ease;
	-webkit-transition: all 500ms ease;
	-ms-transition: all 500ms ease;
	-o-transition: all 500ms ease;
}

.services-block-two .corner-box {
  position: absolute;
  display: flex;
  pointer-events: none;
  transition: all 0.3s ease;
  opacity: 0.5;
}

.services-block-two .corner-box.square-group {
  z-index: 2;
}

.services-block-two .corner-box.square-group.top-right {
  top: 5px;
  right: 0;
  width: 100px;
  height: 100px;
  display: grid;
  grid-template-areas: 
    "a b"
    "c d";
  gap: 5px;
  z-index: -1;
}

.services-block-two .corner-box.square-group.bottom-left {
  bottom: 10px;
  left: 5px;
  width: 100px;
  height: 100px;
  display: grid;
  grid-template-areas: 
    "e f"
    "g h";
  gap: 5px;
  z-index: -1;
}

.services-block-two .corner-box .square {
  position: relative;
  border-radius: 4px; 
  transition: all 0.3s ease;
}

.services-block-two .corner-box.square-group.top-right .square:nth-child(1) {
  grid-area: a;
  width: 50px;
  height: 50px;
  background-color: #DCEEF2;
  z-index: -2;
}

.services-block-two .corner-box.square-group.top-right .square:nth-child(2) {
  grid-area: b;
  width: 30px;
  height: 30px;
  background-color: #F5F9FA;
  border: 1px solid #B2C6D2;
  z-index: -2;
}

.services-block-two .corner-box.square-group.top-right .square:nth-child(3) {
  grid-area: c;
  width: 40px;
  height: 40px;
  background-color: #B2C6D2;
  z-index: -2;
}

.services-block-two .corner-box.square-group.top-right .square:nth-child(4) {
  grid-area: d;
  width: 30px;
  height: 30px;
  background-color: #9EB9C6;
  z-index: -2;
}

.services-block-two .corner-box.square-group.top-right .square:nth-child(5) {
  grid-area: b;
  width: 60px;
  height: 60px;
  background-color: transparent;
  border: 2px solid #87BEFA;
  z-index: 3; 
  position: absolute;
  top: 10px; 
  right: 30px; 
  transform: translate(10px, 10px); 
}

.services-block-two .corner-box.square-group.top-right .square.extra-square-1 {
    width: 35px;
    height: 35px;
  	background-color: transparent;
  	border: 2px solid var(--color-accent-warm);
    position: absolute;
    top: 0px; 
    right: 90px; 
    z-index: 2;
}

.services-block-two .corner-box.square-group.top-right .square.extra-square-2 {
    width: 35px;
    height: 35px;
  	background-color: transparent;
  	border: 2px solid var(--color-primary-bg);
    position: absolute;
    top: 90px; 
    right: 10px; 
    z-index: 2;
}

.services-block-two .corner-box.square-group.bottom-left .square:nth-child(1) {
  grid-area: e;
  width: 40px;
  height: 40px;
  background-color: #E0E0E0;
}

.services-block-two .corner-box.square-group.bottom-left .square:nth-child(2) {
  grid-area: f;
  width: 30px;
  height: 30px;
  background-color: #C6D9E2;
}

.services-block-two .corner-box.square-group.bottom-left .square:nth-child(3) {
  grid-area: g;
  width: 60px;
  height: 60px;
  background-color: #D0E3EC;
}

.services-block-two .corner-box.square-group.bottom-left .square:nth-child(4) {
  grid-area: h;
  width: 40px;
  height: 40px;
  background-color: #A3C1D1;
}

.services-block-two .corner-box.square-group.bottom-left .square:nth-child(5) {
  grid-area: e;
  width: 60px;
  height: 60px;
  background-color: transparent;
  border: 2px solid #87BEFA;
  z-index: 3; 
  position: absolute;
  bottom: 0; 
  left: 0; 
  transform: translate(25px, 40px); 
}

.services-block-two .corner-box.square-group.bottom-left .square.extra-square-1 {
    width: 35px;
    height: 35px;
    background-color: transparent;
  	border: 2px solid var(--color-primary-bg);
    position: absolute;
    bottom: 0px; 
    left: 90px; 
    z-index: 2;
}

.services-block-two .corner-box.square-group.bottom-left .square.extra-square-2 {
    width: 35px;
    height: 35px;
    background-color: transparent;
  	border: 2px solid var(--color-accent-warm);
    position: absolute;
    bottom: 90px; 
    left: 10px; 
    z-index: 2;
}

.fluid-section-two{
	position:relative;
	overflow:hidden;
	padding:0px 0px 0px;
}

.fluid-section-two .side-icon{
	position:absolute;
	left:0px;
	bottom:80px;
	z-index:1;
	background-repeat:no-repeat;
}

.fluid-section-two .outer-container{
	position:relative;
	min-height:250px;
	background: linear-gradient(45deg, var(--color-primary-bg-1), var(--color-primary-bg-2));
}

.fluid-section-two .image-column{
	position:absolute;
	right:0px;
	top:0px;
	width:50%;
	height:100%;
	background-repeat:no-repeat;
	background-position:center center;
	background-size:cover;	
}

.fluid-section-two .image-column .video-box{
	position:absolute;
	left:50%;
	top:50%;
	z-index:1;
	width:90px;
	height:90px;
	color:var(--color-accent-warm); 
	font-size:24px;
	text-align:center;
	border-radius:50px;
	line-height: 90px;
	margin-top:-45px;
	margin-left:-45px;
	display:inline-block;
	transition:all 0.3s ease;
	-moz-transition:all 0.3s ease;
	-webkit-transition:all 0.3s ease;
	-ms-transition:all 0.3s ease;
	-o-transition:all 0.3s ease;
	background: linear-gradient(45deg, #ffffff, #f4f4f4);
}

.fluid-section-two .image-column .video-box .overlay-box span{
	position: absolute;
	width:90px;
	height: 90px;
	left:50%;
	top: 50%;
	z-index:99;
	color: var(--color-white);
	font-weight:400;
	font-size: 16px;
	text-align: center;
	border-radius:50%;
	padding-left:7px;
	display: inline-block;
	margin-top: -45px;
	margin-left:-45px;
	transition: all 900ms ease;
	-moz-transition: all 900ms ease;
	-webkit-transition: all 900ms ease;
	-ms-transition: all 900ms ease;
	-o-transition: all 900ms ease;
	box-shadow:0px 0px 15px rgba(0,0,0,0.10);
}

.fluid-section-two .image-column .video-box .ripple,
.fluid-section-two .image-column .video-box .ripple:before,
.fluid-section-two .image-column .video-box .ripple:after {
	position: absolute;
	top: 50%;
	left: 50%;
	height: 90px;
	width: 90px;
	margin-left:.5px;
	-webkit-transform: translate(-50%, -50%);
	-moz-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	-o-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	-ms-border-radius: 50%;
	-o-border-radius: 50%;
	border-radius: 50%;
	-webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, .4);
	-moz-box-shadow: 0 0 0 0 rgba(255, 255, 255, .4);
	-ms-box-shadow: 0 0 0 0 rgba(255, 255, 255, .4);
	-o-box-shadow: 0 0 0 0 rgba(255, 255, 255, .4);
	box-shadow: 0 0 0 0 rgba(255, 255, 255, .4);
	-webkit-animation: ripple 3s infinite;
	-moz-animation: ripple 3s infinite;
	-ms-animation: ripple 3s infinite;
	-o-animation: ripple 3s infinite;
	animation: ripple 3s infinite;
}

.fluid-section-two .image-column .video-box .ripple:before {
	-webkit-animation-delay: .9s;
	-moz-animation-delay: .9s;
	-ms-animation-delay: .9s;
	-o-animation-delay: .9s;
	animation-delay: .9s;
	content: "";
	position: absolute;
}

.fluid-section-two .image-column .video-box .ripple:after {
	-webkit-animation-delay: .6s;
	-moz-animation-delay: .6s;
	-ms-animation-delay: .6s;
	-o-animation-delay: .6s;
	animation-delay: .6s;
	content: "";
	position: absolute;
}

.fluid-section-two .image-column .image-box{
	position:relative;
	display:none;	
}

.fluid-section-two .image-column .image-box img{
	position:relative;
	display:block;
	width:100%;
}

.fluid-section-two .content-column{
	position:relative;
	float:left;
	width:50%;
}

.fluid-section-two .content-column .inner-column{
	position:relative;
	max-width:600px;
	width:100%;
	float:right;
	padding:110px 65px 110px 20px;
}

.fluid-section-two .content-column .counter-boxed{
	position:relative;
}

.fluid-section-two .content-column .counter-boxed:before{
	position:absolute;
	content:'';
	left:0px;
	top:50%;
	right:0px;
	height:1px;
	background-color:rgba(255,255,255,0.2);
}

.fluid-section-two .content-column .counter-boxed .fact-counter.style-two .counter-column{
	margin-bottom:0px;
}

.fluid-section-two .content-column .counter-boxed .fact-counter.style-two .counter-column:nth-child(2n + 0) .inner{
	border-right:0px;
}

.fluid-section-two .content-column .counter-boxed .fact-counter.style-two .counter-column .inner{
	border-right:1px solid rgba(255,255,255,0.2);
}

.services-page-section{
	position:relative;
	padding:110px 0px 70px;
}

.services-block-three{
	position:relative;
	margin-bottom:30px;
}

.services-block-three .inner-box{
	position:relative;
	background: linear-gradient(45deg, #f9f9f9, #d8d8d8);
}

.services-block-three .inner-box .row{
	margin:0px;
}

.services-block-three .inner-box .content-column{
	position:relative;
	padding:0px;
	float:left;
}

.services-block-three .inner-box .content-column .inner-column{
	position:relative;
	padding:65px 50px 60px;
}

.services-block-three .inner-box .content-column h2{
	position:relative;
	letter-spacing:1px;
	padding-bottom:18px;
	margin-bottom:28px;
	text-transform:uppercase;
}

.services-block-three .inner-box .content-column h2 a{
	position:relative;
	color:var(--color-primary-bg);
	transition:all 0.3s ease;
	-moz-transition:all 0.3s ease;
	-webkit-transition:all 0.3s ease;
	-ms-transition:all 0.3s ease;
	-o-transition:all 0.3s ease;
}

.services-block-three .inner-box .content-column h2 a:hover{
	color:var(--color-accent-warm); 
}

.services-block-three .inner-box .content-column h2:before{
	position:absolute;
	content:'';
	left:0px;
	bottom:0px;
	height:2px;
	width:60px;
	background: linear-gradient(45deg, var(--color-accent-warm-1) 0%, var(--color-accent-warm-2) 100%); 
}

.services-block-three .inner-box .content-column .text{
	margin-top:28px;
	margin-bottom:32px;
}

.services-block-three .inner-box .image-column{
	position:relative;
	padding:0px;
	float:left;
}

.services-block-three .inner-box .image-column .inner-column{
	position:relative;
}

.services-block-three .inner-box .image-column .image{
	position:relative;
	overflow:hidden;
	background: linear-gradient(45deg, var(--color-accent-warm-1) 0%, var(--color-accent-warm-2) 100%); 
}

.services-block-three .inner-box .image-column .image img{
	position:relative;
	width:100%;
	display:block;
	transition: all 900ms ease;
	-moz-transition: all 900ms ease;
	-webkit-transition: all 900ms ease;
	-ms-transition: all 900ms ease;
	-o-transition: all 900ms ease;
}

.services-block-three .inner-box:hover .image-column .image img{
	opacity:0.7;
	transform:scale(1.07,1.07) rotate(3deg);
}

.services-detail-section{
	position:relative;
	padding-bottom:90px;
}

.services-detail-section:before{
	position:absolute;
	content:'';
	left:0px;
	top:160px;
	right:0px;
	bottom:0px;
	background: linear-gradient(45deg, #f9f9f9, #d8d8d8);
}

.services-detail-section .inner-container{
	position:relative;
	margin-top:-160px;
}

.services-detail-section .image{
	position:relative;
	padding:20px 20px;
	background: linear-gradient(45deg, #ffffff, #f4f4f4);
	box-shadow:0px 0px 15px rgba(0,0,0,0.05);
}

.services-detail-section .image img{
	position:relative;
	width:100%;
	display:block;
}

.services-detail-section .lower-content{
	position:relative;
	padding-top:65px;
}

.services-detail-section .lower-content h2{
	position:relative;
	color:var(--color-primary-bg);
	padding-bottom:20px;
	text-transform:uppercase;
}

.services-detail-section .lower-content h2:before{
	position:absolute;
	content:'';
	left:0px;
	bottom:0px;
	width:50px;
	height:2px;
	background: linear-gradient(45deg, var(--color-accent-warm-1) 0%, var(--color-accent-warm-2) 100%); 
}

.services-detail-section .lower-content p{
	position:relative;
	color:var(--color-text-dark-brown);
	margin-top:30px;
	margin-bottom:25px;
}

.services-detail-section .lower-content .btn-box{
	position:relative;
	margin-top:25px;
	margin-bottom:70px;
}

.services-detail-section .lower-content .service-gallery-box{
	position:relative;
	z-index:1;
}

.services-detail-section .lower-content .service-gallery-box .image-column{
	position:relative;
}

.services-detail-section .lower-content .service-gallery-box .image-two{
	position:relative;
}

.services-detail-section .lower-content .service-gallery-box .image-two img{
	position:relative;
	width:100%;
	display:block;
}

.case-study-section{
	position:relative;
	padding-bottom:90px;
}

.case-study-section:before{
	position:absolute;
	content:'';
	left:0px;
	top:160px;
	right:0px;
	bottom:0px;
	background: linear-gradient(45deg, #f9f9f9, #d8d8d8);
}

.case-study-section .inner-container{
	position:relative;
	margin-top:-160px;
}

.case-block{
	position:relative;
	margin-bottom:30px;
}

.case-block .outer-box {
	position: relative;
	padding: 10px; 
	border: 0px solid var(--color-box-bg); 
	box-sizing: border-box;
}

.case-block .inner-box{
	position:relative;
	min-height: 550px;
	height: auto;
	padding:25px 25px 45px;
	
	background-image: linear-gradient(to bottom, var(--color-frame-bg), var(--color-white));
	box-shadow:0px 0px 20px rgba(0,0,0,0.2);
}

.case-block .inner-box .image{
	position:relative;
	overflow:hidden;
	background: linear-gradient(45deg, var(--color-accent-warm-1) 0%, var(--color-accent-warm-2) 100%);
}

.case-block .inner-box .image img{
	position:relative;
	width:100%;
	display:block;
	transition: all 900ms ease;
	-moz-transition: all 900ms ease;
	-webkit-transition: all 900ms ease;
	-ms-transition: all 900ms ease;
	-o-transition: all 900ms ease;
}

.case-block .inner-box:hover .image img{
	opacity:0.50;
	transform:scale(1.05,1.05);
}

.case-block .inner-box .image .tag{
	position:absolute;
	left:0px;
	top:0px;
	z-index:1;
	color:var(--color-white);
	font-size: 16px;
	padding:6px 18px;
	letter-spacing:1px;
	text-transform:uppercase;
	background-color:rgba(0,0,0,0.30);
	transition:all 0.3s ease;
	-moz-transition:all 0.3s ease;
	-webkit-transition:all 0.3s ease;
	-ms-transition:all 0.3s ease;
	-o-transition:all 0.3s ease;
	box-shadow:0px 0px 10px rgba(0,0,0,0.10);
}

.case-block .inner-box:hover .image .tag{
	color:var(--color-white);
	background: linear-gradient(45deg, var(--color-primary-bg-1), var(--color-primary-bg-2));
}

.case-block .inner-box .lower-content{
	position:relative;
	padding-top:30px;
	text-align: right;
}

.case-block .inner-box .lower-content h3{
	position:relative;
	margin-bottom:25px;
	text-transform:uppercase;
}

.case-block .inner-box .lower-content h3 a{
	position:relative;
	color:var(--color-primary-bg);
	transition:all 0.3s ease;
	-moz-transition:all 0.3s ease;
	-webkit-transition:all 0.3s ease;
	-ms-transition:all 0.3s ease;
	-o-transition:all 0.3s ease;
}

.case-block .inner-box .lower-content h3 a:hover{
	color:var(--color-accent-warm); 
}

.case-block .corner-box {
  position: absolute;
  display: flex;
  pointer-events: none;
  transition: all 0.3s ease;
  opacity: 0.5;
}

.case-block .corner-box.square-group {
  z-index: 2;
}

.case-block .corner-box.square-group.top-right {
  top: 5px;
  right: 0;
  width: 100px;
  height: 100px;
  display: grid;
  grid-template-areas: 
    "a b"
    "c d";
  gap: 5px;
  z-index: 0;
}

.case-block .corner-box.square-group.bottom-left {
  bottom: 10px;
  left: 5px;
  width: 100px;
  height: 100px;
  display: grid;
  grid-template-areas: 
    "e f"
    "g h";
  gap: 5px;
  z-index: 0;
}

.case-block .corner-box .square {
  position: relative;
  border-radius: 4px; 
  transition: all 0.3s ease;
}

.case-block .corner-box.square-group.top-right .square:nth-child(1) {
  grid-area: a;
  width: 50px;
  height: 50px;
  background-color: #DCEEF2;
  z-index: -2;
}

.case-block .corner-box.square-group.top-right .square:nth-child(2) {
  grid-area: b;
  width: 30px;
  height: 30px;
  background-color: #F5F9FA;
  border: 1px solid #B2C6D2;
  z-index: -2;
}

.case-block .corner-box.square-group.top-right .square:nth-child(3) {
  grid-area: c;
  width: 40px;
  height: 40px;
  background-color: #B2C6D2;
  z-index: -2;
}

.case-block .corner-box.square-group.top-right .square:nth-child(4) {
  grid-area: d;
  width: 30px;
  height: 30px;
  background-color: #9EB9C6;
  z-index: -2;
}

.case-block .corner-box.square-group.top-right .square:nth-child(5) {
  grid-area: b;
  width: 60px;
  height: 60px;
  background-color: transparent;
  border: 2px solid #87BEFA;
  z-index: 3; 
  position: absolute;
  top: 10px; 
  right: 30px; 
  transform: translate(10px, 10px); 
}

.case-block .corner-box.square-group.top-right .square.extra-square-1 {
    width: 35px;
    height: 35px;
  	background-color: transparent;
  	border: 2px solid var(--color-accent-warm);
    position: absolute;
    top: 0px; 
    right: 90px; 
    z-index: 2;
}

.case-block .corner-box.square-group.top-right .square.extra-square-2 {
    width: 35px;
    height: 35px;
  	background-color: transparent;
  	border: 2px solid var(--color-primary-bg);
    position: absolute;
    top: 90px; 
    right: 10px; 
    z-index: 2;
}

.case-block .corner-box.square-group.bottom-left .square:nth-child(1) {
  grid-area: e;
  width: 40px;
  height: 40px;
  background-color: #E8F3F7;
}

.case-block .corner-box.square-group.bottom-left .square:nth-child(2) {
  grid-area: f;
  width: 30px;
  height: 30px;
  background-color: #C6D9E2;
}

.case-block .corner-box.square-group.bottom-left .square:nth-child(3) {
  grid-area: g;
  width: 60px;
  height: 60px;
  background-color: #D0E3EC;
}

.case-block .corner-box.square-group.bottom-left .square:nth-child(4) {
  grid-area: h;
  width: 40px;
  height: 40px;
  background-color: #A3C1D1;
}

.case-block .corner-box.square-group.bottom-left .square:nth-child(5) {
  grid-area: e;
  width: 60px;
  height: 60px;
  background-color: transparent;
  border: 2px solid #87BEFA;
  z-index: 3; 
  position: absolute;
  bottom: 0; 
  left: 0; 
  transform: translate(25px, 40px); 
}

.case-block .corner-box.square-group.bottom-left .square.extra-square-1 {
    width: 35px;
    height: 35px;
    background-color: transparent;
  	border: 2px solid var(--color-primary-bg);
    position: absolute;
    bottom: 0px; 
    left: 90px; 
    z-index: 2;
}

.case-block .corner-box.square-group.bottom-left .square.extra-square-2 {
    width: 35px;
    height: 35px;
    background-color: transparent;
  	border: 2px solid var(--color-accent-warm);
    position: absolute;
    bottom: 90px; 
    left: 10px; 
    z-index: 2;
}

.map-section{
	position:relative;
}

.map-section:before{
	position:absolute;
	content:'';
	left:0px;
	bottom:0px;
	right:0px;
	height:385px;
	background: linear-gradient(45deg, #f9f9f9, #d8d8d8);
}

.map-section .inner-container{
	position:relative;
	margin-top:-160px;
}

.map-section .inner-container .map-boxed{
	position:relative;
	padding:20px 20px 15px;
	background: linear-gradient(45deg, #ffffff, #f4f4f4);
	box-shadow:0px 0px 15px rgba(0,0,0,0.08);
}

.map-section .inner-container .map-boxed iframe{
	width:100%;
	height:500px;
}

.contact-form-section{
	position:relative;
	padding:100px 0px 90px;
	background: linear-gradient(45deg, #f9f9f9, #d8d8d8);
}

.contact-form{
	position:relative;
	z-index:2;
}

.contact-form .form-group{
	position:relative;
	margin-bottom:20px;
}

.contact-form .form-group input[type="text"],
.contact-form .form-group input[type="tel"],
.contact-form .form-group input[type="email"],
.contact-form .form-group select{
	position:relative;
	display:block;
	width:100%;
	line-height:28px;
	padding:10px 22px;
	color:#222222;
	height:55px;
	font-size: 16px;
	background:var(--color-white);
	font-weight:400;
	border-radius:2px;
	border:1px solid transparent;
	-webkit-transition:all 300ms ease;
	-ms-transition:all 300ms ease;
	-o-transition:all 300ms ease;
	-moz-transition:all 300ms ease;
	transition:all 300ms ease;
}

.contact-form .form-group input[type="text"]:focus,
.contact-form .form-group input[type="tel"]:focus,
.contact-form .form-group input[type="email"]:focus,
.contact-form .form-group textarea:focus{
	border-color:var(--color-accent-warm); 
}

.contact-form .form-group textarea{
	position:relative;
	display:block;
	width:100%;
	line-height:22px;
	padding:15px 20px;
	color:#222222;
	height:160px;
	background:var(--color-white);
	resize:none;
	font-size: 16px;
	font-weight:400;
	border-radius:0px;
	border:1px solid transparent;
	-webkit-transition:all 300ms ease;
	-ms-transition:all 300ms ease;
	-o-transition:all 300ms ease;
	-moz-transition:all 300ms ease;
	transition:all 300ms ease;
}

.contact-form .form-group .theme-btn{
	margin-top:15px;
}

.contact-form input.error,
.contact-form select.error,
.contact-form textarea.error{
	border-color:#ff0000 !important;	
}

.contact-form label.error{
	display:block;
	line-height:24px;
	padding:5px 0px 0px;
	margin:0px;
	text-transform:uppercase;
	font-size:12px;
	color:#ff0000;
	font-weight:500;	
}

.contact-info-section {
    position: relative;
    padding: 100px 0px 70px;
    background: linear-gradient(45deg, #f9f9f9, #d8d8d8);
    overflow: hidden; 
}

.contact-info-section .image-layer {
    position: absolute;
    left: 0px;
    top: 0px;
    right: 0px;
    min-height: 100%; 
    height: auto; 
    background-attachment: fixed;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover; 
    z-index: 0; 
}

.contact-info-section .image-layer:before {
    position: absolute;
    content: '';
    left: 0px;
    top: 0px;
    right: 0px;
    bottom: 0px;
    opacity: 0.8;
    z-index: 1;
    background: linear-gradient(45deg, var(--color-primary-bg-1), var(--color-primary-bg-2));
}

@media screen and (max-width: 768px) {
    .contact-info-section .image-layer {
        background-attachment: fixed;
        height: auto; 
    }
}

.contact-info-section h2 {
    color: var(--color-white);
}

.info-block {
    position: relative;
    margin-bottom: 30px;
    z-index: 1;
}

.info-block .inner-box {
    position: relative;
    text-align: center;
    padding: 50px 20px 50px;
    border: 1px solid var(--overlay-border);
    background: linear-gradient(45deg, var(--color-primary-bg-1), var(--color-primary-bg-2));
    transition: all 300ms ease;
    height: 300px;
    overflow: hidden;
}

.info-block .inner-box:hover {
    border-color: var(--color-accent-warm);
}

.info-block .inner-box .icon {
    position: relative;
    color: var(--color-accent-warm);
    font-size: 60px;
    line-height: 1em;
    margin-bottom: 28px;
    transition: all 600ms ease;
}

.info-block .inner-box:hover .icon {
    transform: scale(-1) rotate(180deg);
}

.info-block .inner-box h5 {
    color: var(--color-white);
    margin-bottom: 15px;
    text-transform: uppercase;
}

.info-block .inner-box .text {
    position: relative;
    color: var(--color-white);
    font-size: 16px;
}

.info-block .inner-box .info-list {
    position: relative;
}

.info-block .inner-box .info-list li {
    position: relative;
    margin-bottom: 4px;
}

.info-block .inner-box .info-list li a {
    position: relative;
    color: var(--color-white);
    font-size: 16px;
    transition: all 300ms ease;
}

.info-block .inner-box .info-list li a:hover {
    color: var(--color-accent-warm);
}

.main-header .header-style-one {
  position:relative;
  padding:0px;
  background: var(--color-primary-bg);
}

.header-style-one .auto-container {
	max-width: 1200px;
}

.header-style-one .header-top {
	border-bottom: 1px solid #e5e5e5;
	padding: 11px 0px;
	position:relative;
	display:block;
}

.header-style-one .header-top .info-box li {
	position: relative;
	display: inline-block;
	padding: 0px 21px 0px 28px;
	margin-right: 15px;
}

.header-style-one .header-top .info-box li:last-child {
	margin-right: 0px;
}

.header-style-one .header-top .info-box li i {
	position: absolute;
	left: 0px;
	top: 0px;
	font-size: 16px;
	color:var(--color-accent-warm); 
}

.header-style-one .header-top .info-box li a {
	position: relative;
	display: inline-block;
	font-size: 16px;
	color: var(--color-white);
}

.header-style-one .header-top .request-btn {
	position: relative;
	float: left;
	margin-left: 35px;
}

.header-style-one  .header-top .request-btn i {
	font-size: 16px;
	font-weight: 400;
	color:var(--color-accent-warm); 
	position: relative;
	display: inline-block;
	margin-right: 10px;
}

.header-style-one  .header-top .request-btn a {
	position: relative;
	display: inline-block;
	font-size: 16px;
	color: var(--color-white);
}

.header-style-one .search-box-outer {
	position: relative;
	float: left;
}

.header-style-one .search-box-outer .search-btn {
	position: relative;
	padding-left: 21px;
	margin-left: 21px;
}

.header-style-one .search-box-outer .search-btn:before {
	position: absolute;
	content: '';
	background: #e5e5e5;
	width: 1px;
	height: 19px;
	left: 0px;
	top: 5px;
}

.header-style-one .search-box-outer .search-toggler {
	position: relative;
	font-size: 16px;
	font-weight: 400;
	background: transparent;
	cursor: pointer;
	display: inline-block;
	transition: all 500ms ease;
	color: var(--color-white);
}

.header-style-one .search-box-outer .search-toggler i {
	position: relative;
	margin-right: 10px;
	color: var(--color-accent-warm);
	transition: all 500ms ease;
}

.header-style-one .header-upper .logo-box{
	padding:5px 0;
}

.header-style-one .main-menu .navigation > li > a{
	color:var(--color-white);
}

.main-header.header-style-two{
	position:relative;
	padding:0px;
	background: var(--color-white);
}

.header-style-two .auto-container {
	max-width: 1200px;
}


.header-style-two .header-top {
  background: linear-gradient(45deg, var(--color-primary-bg-1), var(--color-primary-bg-2));
  color: var(--color-white);
  padding: 10px 185px;
  width: 100vw;          
  position: relative;
  left: 50%;              
  right: 50%;
  margin-left: -50vw;     
  margin-right: -50vw;
  padding-top: 10px;
  padding-bottom: 10px;
}


/*
.header-style-two .header-top {
  background: linear-gradient(45deg, var(--color-primary-bg-1), var(--color-primary-bg-2));
  color: var(--color-white);
  padding: 10px 20px;
}
*/

@media (max-width: 991px) {
  .header-style-two .header-top {
    padding: 10px 60px;
  }
}

@media (max-width: 576px) {
  .header-style-two .header-top {
    padding: 10px 20px;
  }
}

.header-style-two .header-top .info-box li {
	position: relative;
	display: inline-block;
	padding: 0px 21px 0px 28px;
	margin-right: 15px;
}

.header-style-two .header-top .info-box li:last-child {
	margin-right: 0px;
}

.header-style-two .header-top .info-box li i {
	position: absolute;
	left: 0px;
	top: 0px;
	font-size: 16px;
	color:var(--color-accent-warm); 
}

.header-style-two .header-top .info-box li a {
	position: relative;
	display: inline-block;
	font-size: 16px;
	color: var(--color-white);
}

.header-style-two .header-top .request-btn {
	position: relative;
	float: left;
	margin-left: 35px;
}

.header-style-two  .header-top .request-btn i {
	font-size: 16px;
	font-weight: 400;
	color:var(--color-accent-warm); 
	position: relative;
	display: inline-block;
	margin-right: 10px;
}

.header-style-two  .header-top .request-btn a {
	position: relative;
	display: inline-block;
	font-size: 16px;
	color: var(--color-white);
}

.header-style-two .search-box-outer {
	position: relative;
	float: left;
}

.header-style-two .search-box-outer .search-btn {
	position: relative;
	padding-left: 21px;
	margin-left: 21px;
}

.header-style-two .search-box-outer .search-btn:before {
	position: absolute;
	content: '';
	background: linear-gradient(45deg, #ffffff, #f4f4f4);
	width: 1px;
	height: 16px;
	left: 0px;
	top: 5px;
}

.header-style-two .search-box-outer .search-toggler {
	position: relative;
	font-size: 16px;
	font-weight: 400;
	background: transparent;
	cursor: pointer;
	display: inline-block;
	transition: all 500ms ease;
	color: var(--color-white);
}

.header-style-two .search-box-outer .search-toggler i {
	position: relative;
	margin-right: 10px;
	color: var(--color-accent-warm); 
	transition: all 500ms ease;
}

.header-style-two .header-upper .logo-box{
	padding:5px 0;
}

.header-style-two .main-menu .navigation > li > a{
	color:var(--color-primary-bg);
}

.banner-section .banner-carousel .slide-item .image-layer{
  position:absolute;
  top:0;
  height:100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  -webkit-transform:scale(1);
  -ms-transform:scale(1);
  transform:scale(1);
  -webkit-transition: all 6000ms linear;
  -moz-transition: all 6000ms linear;
  -ms-transition: all 6000ms linear;
  -o-transition: all 6000ms linear;
  transition: all 6000ms linear;
}

.banner-section .banner-carousel .active .slide-item .image-layer{
  -webkit-transform:scale(1.15);
  -ms-transform:scale(1.15);
  transform:scale(1.15);
}

.banner-section.style-one .banner-carousel .slide-item.style-two .image-layer{
  right: inherit;
  left: 0;
}

.banner-section.style-three{
  overflow: hidden;
}

.banner-section.style-three .slide-item{
  position: relative;
  padding: 250px 0px 250px 0px;
  overflow: hidden;
}

.banner-section.style-three .slide-item:before{
  position: absolute;
  content: '';
  background:  var(--color-primary-bg);
  width: 100%;
  height: 100%;
  left: 0px;
  top: 0px;
  right: 0px;
  opacity: 0.6;
  z-index: 1;
}

.banner-section.style-three .banner-carousel .slide-item .image-layer{
  left: 0;
  right: 0;
}

.banner-section.style-three .banner-carousel .content-box{
  max-width: 650px;
  width: 100%;
}

.banner-section.style-three .slide-item .pattern-layer .pattern-3{
  position: absolute;
  left: 0px;
  bottom: 0px;
  width: 294px;
  height: 295px;
  background-repeat: no-repeat;
  z-index: 1;
}

.banner-section.style-three .slide-item .pattern-layer .pattern-4{
  position: absolute;
  left: 0px;
  bottom: 0px;
  width: 695px;
  height: 691px;
  background-repeat: no-repeat;
  z-index: 1;
}

.banner-section.style-three .social-nav li a{
	color:var(--color-accent-warm); 
	border-color:var(--color-accent-warm); 
}
.banner-section.style-three .social-nav li a:hover{
	color:var(--color-white);
}

.chooseus-section{
	position:relative;
	padding:110px 0px 90px;
	background:var(--color-offwhite);
}

.chooseus-block-one{
	margin-bottom:30px;
}

.chooseus-block-one .inner-box{
  position: relative;
  display: block;
  background: #3f262f;
  padding: 50px 30px 42px 30px;
  border-radius: 10px;
  box-shadow: 0 0px 30px rgba(0, 0, 0, 0.1);
  z-index: 1;
}

.chooseus-block-one:before{
  position: absolute;
  display: block;
  content: '';
  background: rgba(255,255,255,0.05);
  width: 100%;
  height: 100%;
  left: 0px;
  top: 3px;
  border-radius: 10px;
}

.chooseus-block-one:after{
  position: absolute;
  content: '';
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  border: 1px solid var(--color-accent-warm); 
  border-radius: 10px;
  opacity: 0;
  transition: all 500ms ease;
}

.chooseus-block-one:hover:after{
  opacity: 1;
  left: -10px;
  top: -10px;
}

.chooseus-block-one .inner-box .icon-box{
  position: relative;
  display: block;
  margin-bottom: 24px;
}

.chooseus-block-one .inner-box .icon-box .icon{
	color: #001f4b;
	font-size: 60px;
	line-height: 1em;
	display: inline-block;
	transition: all 600ms ease;
	-moz-transition: all 600ms ease;
	-webkit-transition: all 600ms ease;
	-ms-transition: all 600ms ease;
	-o-transition: all 600ms ease;
	position:relative;
}

.chooseus-block-one .inner-box:hover .icon-box .icon {
	color: var(--color-accent-warm); 
	-webkit-transform: scale(-1) rotate(180deg);
	-moz-transform: scale(-1) rotate(180deg);
	-ms-transform: scale(-1) rotate(180deg);
	-o-transform: scale(-1) rotate(180deg);
	transform: scale(-1) rotate(180deg);
}

.chooseus-block-one .inner-box h4{
  position: relative;
  display: block;
  color: var(--color-primary-bg);
  text-transform: uppercase;
  margin-bottom: 15px;
}

.chooseus-block-one .inner-box p{
  color: var(--color-text-dark-brown);
  margin-bottom: 24px;
}

.chooseus-block-one .inner-box a{
  position: relative;
  display: inline-block;
  font-size: 16px;
  font-family:'Montserrat', sans-serif;
  line-height: 24px;
  font-weight: 700;
  color: #001f4b;
  text-transform: uppercase;
}

.chooseus-block-one .inner-box a i{
  position: relative;
  margin-right: 8px;
  top: 2px;
  font-size: 20px;
  font-weight: 400;
  transition: all 500ms ease;
  color:#001f4b;
}

.chooseus-section .chooseus-block-one .inner-box a:hover,
.chooseus-section .chooseus-block-one .inner-box a:hover i {
	color: var(--color-accent-warm); 
}

.chooseus-section .pattern-layer{
  position: absolute;
  left: 0px;
  top: 0px;
  right: 0px;
  width: 100%;
  height: 100%;
  background-repeat: repeat-x;
  background-size: cover;
  background-position: center;
  animation: slide 100s linear infinite;
  -webkit-animation: slide 100s linear infinite;
}

.chooseus-section.alternet-2 .chooseus-block-one .inner-box{
  background: var(--color-white);
  box-shadow: 0 10px 50px rgba(0, 0, 0, 0.1);
}

.recruitment-technology{
  position: relative;
  padding: 100px 0px 20px 0px;
  background:var(--color-offwhite);
}

.recruitment-technology .image-box{
  position: relative;
  display: block;
}

.recruitment-technology .image-box img{
  max-width: none;
  float: right;
  opacity: 1;
}

#content_block_4 .content-box .inner-box .single-item {
  position: relative;
  display: block;
  height: 100%;
  background-image: linear-gradient(to bottom, var(--color-frame-bg), var(--color-white));
  box-shadow: 0 5px 30px rgba(0, 0, 0, 0.1);
  margin-bottom: 30px;
  padding: 27px 30px 33px 30px;
  border-radius: 10px;
  transition: all 0.3s ease;
}

@media screen and (max-width: 768px) {
  #content_block_4 .content-box .inner-box .single-item {
    height: auto; 
    padding: 20px 20px 25px 20px;
    margin-bottom: 20px;
  }
}

@media screen and (max-width: 480px) {
  #content_block_4 .content-box .inner-box .single-item {
    padding: 15px 15px 20px 15px;
    border-radius: 8px;
    box-shadow: 0 3px 20px rgba(0, 0, 0, 0.08);
  }
}

#content_block_4 .content-box .inner-box .single-item:last-child{
  margin-bottom: 0px;
}

#content_block_4 .content-box .inner-box .single-item .inner{
  position: relative;
  padding-left: 100px;
}

#content_block_4 .content-box .inner-box .single-item .inner .icon-box{
  position: absolute;
  left: 0px;
  top: 3px;
}

#content_block_4 .content-box .inner-box .single-item .inner h4{
  position: relative;
  display: block;
  padding-left: 82px;
  margin-bottom: 8px;
  transition: all 500ms ease;
}

#content_block_4 .content-box .inner-box .single-item .inner h4 a{
  display: inline-block;
  color: var(--color-primary-bg); 
}

#content_block_4 .content-box .inner-box .single-item .inner h4 a:hover{
  color: var(--color-accent-warm); 
}

#content_block_4 .content-box .inner-box .single-item .inner h4 a i{
  position: relative;
  font-size: 20px;
  margin-left: 8px;
  font-weight: 400;
  top: 2px;
  opacity: 0;
  transition: all 500ms ease;
}

#content_block_4 .content-box .inner-box .single-item:hover .inner h4 a i{
  opacity: 1;
}

#content_block_4 .content-box .inner-box .single-item .inner p{
  color:var(--color-text-dark-brown);
}

#content_block_4 .content-box .inner-box .single-item .inner h4 span{
  position: absolute;
  left: 0px;
  top: 6px;
  font-size: 20px;
  transition: all 500ms ease;
  color:var(--color-accent-warm); 
}

#content_block_4 .content-box .inner-box .single-item:hover .inner h4 span{
  opacity: 0;
}

#content_block_4 .content-box .inner-box .single-item:hover .inner h4{
  padding-left: 0px;
}

#content_block_4 .content-box .inner-box .single-item .inner h4:before{
  position: absolute;
  content: '';
  width: 40px;
  height: 2px;
  left: 32px;
  top: 19px;
  transition: all 500ms ease;
  background: linear-gradient(45deg, var(--color-accent-warm-1) 0%, var(--color-accent-warm-2) 100%);
}

#content_block_4 .content-box .inner-box .single-item:hover .inner h4:before{
  opacity: 0;
}

#content_block_4 .content-box .sec-title{
  margin-bottom: 43px;
}

#content_block_4 .content-box .sec-title p{
	margin:30px 0 0;
}

.video-section{
  position: relative;
}

.video-section #image_block_1 .image-box .video-inner{
  position: relative;
  max-width: 100%;
  width:100%;
  text-align:center;
  padding: 185px 0px 175px 0px;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.video-section #image_block_1 .image-box .video-inner .video-btn{
  width: 100px;
  height: 100px;
  line-height: 100px;
  font-size: 30px;
  position:relative;
  display:inline-block;
  text-align: center;
  background: var(--color-offwhite);
  border-radius: 50%;
  color: var(--color-accent-warm); 
  z-index: 1;
}

.video-section #image_block_1 .image-box .video-inner .border{
  width: 100px;
  height: 100px;
}

.video-section #image_block_1 .image-box{
  padding: 0px;
  margin: 0px;
  position: relative;
	display: block;
}

.video-section .video-content{
  position: relative;
  margin-bottom: -330px;
  z-index: 1;
}

.video-section .video-content .pattern-layer .pattern-1{
  position: absolute;
  top: -60px;
  right: -55px;
  width: 105px;
  height: 215px;
  background-repeat: no-repeat;
}

.video-section .video-content .pattern-layer .pattern-2{
  position: absolute;
  top: 50px;
  right: -140px;
  width: 195px;
  height: 195px;
  border-radius: 50%;
  background: var(--color-accent-warm); 
  opacity:0.7;
}

.video-section .video-content .pattern-layer .pattern-3{
  position: absolute;
  top: 170px;
  right: -150px;
  width: 80px;
  height: 80px;
  background: var(--color-accent-warm); 
  border-radius: 50%;
  -webkit-animation: zoom-fade 5s infinite linear;
  animation: zoom-fade 5s infinite linear;
}
#image_block_1 .image-box .video-inner .video-btn:after, 
#image_block_1 .image-box .video-inner .video-btn:before {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: transparent;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -webkit-animation-delay: .9s;
  animation-delay: .9s;
  content: "";
  position: absolute;
  -webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.6);
  box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.6);
  -webkit-animation: ripple 3s infinite;
  animation: ripple 3s infinite;
  -webkit-transition: all .4s ease;
  transition: all .4s ease;
}

#image_block_1 .image-box .video-inner .video-btn:after {
  -webkit-animation-delay: .6s;
  animation-delay: .6s;
}

@-webkit-keyframes ripple {
  70% {
	-webkit-box-shadow: 0 0 0 40px rgba(255, 255, 255, 0);
			box-shadow: 0 0 0 40px rgba(255, 255, 255, 0);
  }
  100% {
	-webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
			box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}
@keyframes ripple {
  70% {
	-webkit-box-shadow: 0 0 0 40px rgba(255, 255, 255, 0);
			box-shadow: 0 0 0 40px rgba(255, 255, 255, 0);
  }
  100% {
	-webkit-box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
			box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
  }
}

#image_block_1 .image-box .video-inner .border{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  margin-top: -10px;
  margin-left: 10px;
  width: 80px;
  height: 80px;
  border-radius: 50%;
}

.service-section{
  position: relative;
  padding: 95px 0px 90px 0px;
}

.service-block-one{
  margin-top: 20px;
}

.service-block-one .inner-box{
  position: relative;
  display: block;
  text-align: center;
}

.service-block-one .inner-box .image-box{
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.service-block-one .inner-box .image-box img{
  width: 100%;
  border-radius: 10px;
  transition: all 500ms ease;
}

.service-block-one .inner-box:hover .image-box img{
  transform: scale(1.1);
}

.service-block-one .inner-box .lower-content{
  position: relative;
  padding: 0px 70px;
}

.service-block-one .inner-box .lower-content .content-box{
  position: relative;
  margin-top: -117px;
  transition: all 500ms ease;
}

.service-block-one .inner-box:hover .lower-content .content-box{
  opacity: 0;
}

.service-block-one .inner-box .lower-content .content-box .inner{
  position: relative;
  display: block;
  background: var(--color-white);
  border-radius: 10px;
  padding: 30px 15px 22px 15px;
  margin-bottom: 21px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.service-block-one .inner-box .lower-content .content-box .inner .icon-box{
  position: relative;
  display: inline-block;
  margin-bottom: 12px;
  font-size:54px;
  line-height:1em;
}

.service-block-one .inner-box .lower-content .content-box .link a{
  position: relative;
  display: inline-block;
  font-size: 16px;
  line-height: 26px;
  color: var(--color-primary-bg);
  text-transform: uppercase;
}

.service-block-one .inner-box .lower-content .overlay-content{
  position: absolute;
  left: 30px;
  top: 30px;
  background: var(--color-primary-bg);
  border-radius: 10px;
  width: calc(100% - 60px);
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
  transition: all 500ms ease;
}

.service-block-one .inner-box:hover .lower-content .overlay-content{
  top: 0px;
  opacity: 1;
  visibility: visible;
}

.service-block-one .inner-box .lower-content .overlay-content p{
  color: var(--color-white);
  padding: 25px 15px 15px 15px;
}

.service-block-one .inner-box .lower-content .overlay-content a{
  position: relative;
  display: block;
  padding: 10px 15px 10px 15px;
  font-size: 16px;
  line-height: 26px;
  color: var(--color-white);
  text-transform: uppercase;
  background:var(--color-accent-warm); 
}

.service-block-one .inner-box .lower-content .overlay-content a i{
  position: relative;
  font-size: 20px;
  margin-right: 8px;
  font-weight: 400;
  top: 2px;
}

.service-section .pattern-layer{
  position: absolute;
  left: 0px;
  bottom: 0px;
  right: 0px;
  width: 100%;
  height: 580px;
  background-size: cover;
  background-repeat: no-repeat;
}

.service-section .sec-title{
  margin-bottom: 33px;
}

.service-section .owl-dots-none .owl-dots,.service-section  .owl-nav-none .owl-nav {
	display: none !important;
}

.service-section .owl-dots{
  position: relative;
  display: block;
  text-align: center;
  margin-top: 40px;
}

.service-section .owl-dot-style-one .owl-dots .owl-dot{
	display:inline-block;
}

.owl-dot-style-one .owl-dots .owl-dot span{
  position: relative;
  display: inline-block;
  width: 3px;
  height: 10px;
  background: #c2b3aa;
  margin: 0px 5px;
  cursor: pointer;
  transition: all 500ms ease;
}

.owl-dot-style-one .owl-dots .owl-dot.active span,
.owl-dot-style-one .owl-dots .owl-dot span:hover{
  height: 20px;
  background:var(--color-accent-warm); 
}

.service-section .anim-icon{
  position: absolute;
  left: 0px;
  top: 0px;
  right: 0px;
  max-width: 1200px;
  width: 100%;
  height: 100%;
  margin: 0 auto;
}

.service-section .anim-icon .icon-1{
  position: absolute;
  left: -25px;
  top: 45px;
  width: 170px;
  height: 250px;
  background-repeat: no-repeat;
}

.service-section .anim-icon .icon-2{
  position: absolute;
  top: 140px;
  right: 130px;
  background: #f0e6e0;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  -webkit-animation: zoom-fade 5s infinite linear;
  animation: zoom-fade 5s infinite linear;
}
.service-section.alternet-2{
  padding-top: 445px;
}

.service-section .sec-title.light .top-title:before,
.service-section .sec-title.light .top-title:after{
  background: #624b52;
}

.service-section .sec-title.light .top-title:after{
  border-left: 2px solid #462b34;
  border-bottom: 2px solid #462b34;
}

.service-section .sec-title.light p{
  color: #ae979f;
}

.service-section.alternet-2 .pattern-layer{
  position: absolute;
  left: 0px;
  top: 0px;
  right: 0px;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
}

.project-style-two{
  position: relative;
  padding: 110px 0 80px;
}

.project-style-two .outer-container{
  position: relative;
  padding:0px 15px;
}

.protfolio-page.project-style-two .project-block-one{
	margin-bottom:30px;
}

.project-block-one .inner-box{
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 10px;
}

.project-block-one .inner-box .image-box{
  position: relative;
  overflow: hidden;
  background: var(--color-primary-bg);
  border-radius: 10px;
  margin-bottom: 20px;
}

.project-block-one .inner-box .image-box img{
  width: 100%;
  height: 200px;
  border-radius: 10px;
  transition: all 500ms ease;
}

.project-block-one .inner-box:hover .image-box img{
  opacity: 0.03;
}

.project-block-one .inner-box .content-box{
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  padding: 15px 50px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.project-block-one .inner-box .content-box .view-btn{
  position: absolute;
  right: 0px;
  bottom: 0px;
}

.project-block-one .inner-box .content-box .text span{
  position: relative;
  display: block;
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  text-transform: uppercase;
  margin-bottom: 8px;
  color:var(--color-accent-warm); 
  top: -15px;
  opacity: 0;
  transition: all 500ms ease;
}

.project-block-one .inner-box:hover .content-box .text span,
.project-block-one .inner-box:hover .content-box .text h4{
  top: 0px;
  opacity: 1;
}

.project-block-one .inner-box .content-box .text h4{
  position: relative;
  display: block;
  color: var(--color-white);
  top: 15px;
  opacity: 0;
  transition: all 500ms ease;
}

.project-block-one .inner-box .content-box .text h4 a{
  display: inline-block;
  color: var(--color-white);
}

.project-block-one .inner-box .content-box .text h4 a:hover{

}

.project-block-one .inner-box .content-box .view-btn a{
  position: relative;
  display: inline-block;
  font-size: 25px;
  color: var(--color-white);
  width: 60px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-radius: 10px 0px 10px 0px;
  z-index: 1;
  opacity: 0;
  transition:all 0.3s ease;
	-moz-transition:all 0.3s ease;
	-webkit-transition:all 0.3s ease;
	-ms-transition:all 0.3s ease;
	-o-transition:all 0.3s ease;
  background:var(--color-accent-warm); 
}

.project-block-one .inner-box:hover .content-box .view-btn a{
  opacity: 1;
  margin-bottom: 20px;
  margin-right: 0px;
}

.project-block-one .inner-box .pattern-layer .pattern-2{
  
  position: absolute;
  left: 50%;
  margin-left: -75px;
  top: 50%;
  margin-top: -85px;

  width: 152px;
  height: 173px;
  background-repeat: no-repeat;
  opacity: 0;
  transition: all 500ms ease;
}

.project-block-one .inner-box:hover .pattern-layer .pattern-2{
  opacity: 1;
}

.project-style-two .project-block-one .inner-box:hover .image-box img{
  opacity: 0.15;
}

.project-style-two .more-text p{
  position: relative;
  display: block;
  font-size: 16px;
  margin-bottom:0px;
}

.project-style-two .more-text{
  position: relative;
  margin-top: 53px;
}

.project-style-two .more-text p a{
  display: inline-block;
  color: var(--color-accent-warm); 
  border-bottom: 1px solid var(--color-accent-warm); 
}

.facts-section-three {
  position: relative;
  padding: 110px 0 80px;
	background-position:center center;
	background-repeat:no-repeat;
	background-size:cover;
}

.facts-section-three:before {
	position: absolute;
	content: '';
	left: 0px;
	top: 0px;
	right: 0px;
	bottom: 0px;
	z-index: 1;
	background: linear-gradient(45deg, var(--color-primary-bg-1), var(--color-primary-bg-2));
    opacity: 0.85;
}

.fact-counter-style-three{
	position:relative;
	z-index:1;
}

.facts-section-three .content {
	position: relative;
	
	padding-left:120px;
	align-items: center;
	margin-bottom: 30px;
}

.facts-section-three .content:before {
	position: absolute;
	content: '';
	left: 0;
	top: 0;
	width: 70px;
	height: 150px;
	border: 1px solid var(--color-accent-warm); 
	transition: .5s;
}

.facts-section-three .inner:hover .content:before {
	border-color: var(--color-white);
}

.facts-section-three .icon {
	position: absolute;
	left:0px;
	width: 80px;
	height: 80px;
	line-height: 78px;
	border: 1px solid var(--color-accent-warm); 
	border-radius: 50%;
	text-align: center;
	font-size: 40px;
	background: linear-gradient(45deg, var(--color-accent-warm-1) 0%, var(--color-accent-warm-2) 100%);
	margin-left: 30px;
	margin-right: 20px;
	margin-top: 30px;
	margin-bottom: 30px;
	transition: .5s;
	color:var(--color-white);
}

.facts-section-three .inner:hover .icon {
	color: var(--color-accent-warm); 
	background:var(--color-white);
	border-color:var(--color-white);
}

.facts-section-three .count-box {
	position: relative;
	font-family: 'Montserrat', sans-serif;
	font-size: 50px;
	margin-bottom: 15px;
	line-height:1em;
	color:var(--color-white);
}

.facts-section-three .count-box .count-text {
	color:var(--color-accent-warm);
}

.facts-section-three h4 {
	position: relative;
	font-size: 16px;
	color: var(--color-white);
	margin-bottom: 15px;
	font-family: 'Montserrat', sans-serif;
}

.facts-section-three .text {
	position: relative;
	color: #bebec2;
	margin-bottom: 0;
}

.case-style-three{
	position: relative;
	padding: 110px 0px 80px 0px;
}

.case-block-two .inner-box{
	position: relative;
	display: block;
}

.case-block-two .inner-box .image-box{
	position: relative;
	display: block;
	overflow: hidden;
	border-radius: 3px;
	margin-bottom:0px;
}

.case-block-two .inner-box .image-box img{
	width: 100%;
	border-radius: 3px;
}

.case-block-two .inner-box .image-box .client-box{
	position: absolute;
	top: 20px;
	right: 20px;
	z-index: 1;
	transition: all 500ms ease;
}

.case-block-two .inner-box .image-box .client-box .client-logo{
	position: relative;
	display: inline-block;
	background: var(--color-white);
	width: 72px;
	height: 72px;
	text-align: center;
	border-radius: 50%;
	padding: 15px;
	cursor: pointer;
}

.case-block-two .inner-box .image-box .client-box span{
	position: absolute;
	top: 16px;
	right: 70px;
	width: 128px;
	display: inline-block;
	background: var(--color-white);
	font-size: 16px;
	line-height: 26px;
	font-family: 'Montserrat', sans-serif;
	padding: 7px;
	text-align: center;
	border-radius: 3px;
	opacity: 0;
	visibility: hidden;
	transition: all 500ms ease;
}

.case-block-two .inner-box .image-box .client-box:hover span{
	right: 90px;
	opacity: 1;
	visibility: visible;
}

.case-block-two .inner-box .image-box .client-box span:before{
	position: absolute;
	content: '';
	background: var(--color-white);
	width: 12px;
	height: 12px;
	top: 14px;
	right: -5px;
	transform: rotate(45deg);
}

.case-block-two .inner-box .image-box .client-box .client-logo img{
	width: auto;
	border-radius: 50%;
}

.case-block-two .inner-box .image-box .link{
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	z-index: 1;
}

.case-block-two .inner-box .image-box .link a{
	position: relative;
	display: inline-block;
	font-size: 35px;
	line-height: 35px;
	color: var(--color-white);
	transform: scale(0,0);
}

.case-block-two .inner-box:hover .image-box .link a{
	transform: scale(1,1);
}

.case-block-two .inner-box .image-box .overlay-layer{
	position: absolute;
	left: 0px;
	top: 0px;
	right: 0px;
	width: 100%;
	height: 100%;
	transform: scale(0,0);
	transition: all 500ms ease;
	background:rgba(0, 32, 76, 0.6);
}

.case-block-two .inner-box:hover .image-box .overlay-layer{
	transform: scale(1,1);
}

.case-block-two .inner-box .lower-content{
	position: relative;
	padding-top: 22px;
}

.case-block-two .inner-box .lower-content .box{
	position: relative;
	padding-left: 70px;
}

.case-block-two .inner-box .lower-content .box h4 a{
	color:var(--color-primary-bg);
	transition:all 0.3s ease;
	-moz-transition:all 0.3s ease;
	-webkit-transition:all 0.3s ease;
	-ms-transition:all 0.3s ease;
	-o-transition:all 0.3s ease;
}

.case-block-two .inner-box .lower-content .box h4 a:hover{
	color:var(--color-accent-warm); 
}

.case-block-two .inner-box .lower-content .box .icon-box{
	position: absolute;
	left: 0px;
	top: 8px;
	font-size: 50px;
	line-height: 50px;
	color: var(--color-primary-bg);
}

.case-block-two .inner-box .lower-content .box p{
	position: relative;
	font-size: 16px;
	line-height: 26px;
	margin-bottom: 6px;
}

.case-style-three .case-block-two .inner-box{
	background: var(--color-white);
	border-radius: 5px;
	padding:0px;
	overflow: hidden;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.case-style-three .case-block-two .inner-box .image-box{
	border-radius: 0px;
}

.case-style-three .case-block-two .inner-box .image-box img{
	border-radius: 0px;
}

.case-style-three .case-block-two .inner-box .lower-content .box{
	margin-bottom: 15px;
}

.case-style-three .case-block-two .inner-box .lower-content{
	padding:30px 30px 16px 30px;
}

.case-style-three .case-block-two .inner-box .lower-content .text{
	position: relative;
	padding-bottom: 23px;
	margin-bottom: 18px;
	border-bottom: 1px solid #e5e5e5;
}

.case-style-three .case-block-two .inner-box .lower-content .text p{
	margin-bottom:0px;
}

.case-style-three .case-block-two .inner-box .lower-content .link{
	position: relative;
}

.case-style-three .case-block-two .inner-box .lower-content .link i{
	position: absolute;
	left: 0px;
	top: 0px;
	font-size: 16px;
	font-weight: 400;
	opacity: 0;
	transition: all 500ms ease;
}

.case-style-three .case-block-two .inner-box .lower-content .link a:hover i{
	opacity: 1;
}

.case-style-three .case-block-two .inner-box .lower-content .link a{
	position: relative;
	display: inline-block;
	font-size: 16px;
	font-weight: 600;
	color: var(--color-primary-bg);
	transition: all 500ms ease;
}

.case-style-three .case-block-two .inner-box .lower-content .link a:hover{
	padding-left: 22px;
}

.consult-form{
	position:relative;
	z-index:2;
}

.consult-form .form-group{
	position:relative;
	margin-bottom:20px;
}

.consult-form .form-group input[type="text"],
.consult-form .form-group input[type="tel"],
.consult-form .form-group input[type="email"],
.consult-form .form-group select{
	position:relative;
	display:block;
	width:100%;
	line-height:28px;
	padding:10px 22px;
	color:#222222;
	height:55px;
	font-size: 16px;
	background:var(--color-white);
	font-weight:400;
	border-radius:2px;
	border:1px solid transparent;
	-webkit-transition:all 300ms ease;
	-ms-transition:all 300ms ease;
	-o-transition:all 300ms ease;
	-moz-transition:all 300ms ease;
	transition:all 300ms ease;
}

.consult-form .form-group input[type="text"]:focus,
.consult-form .form-group input[type="tel"]:focus,
.consult-form .form-group input[type="email"]:focus,
.consult-form .form-group textarea:focus{
	border-color:var(--color-accent-warm); 
}

.consult-form .form-group textarea{
	position:relative;
	display:block;
	width:100%;
	line-height:22px;
	padding:15px 20px;
	color:#222222;
	height:160px;
	background:var(--color-white);
	resize:none;
	font-size: 16px;
	font-weight:400;
	border-radius:0px;
	border:1px solid transparent;
	transition:all 300ms ease;
}

.consult-form .form-group .theme-btn{
	margin-top:15px;
}


.sidebar-page-container {
  position: relative;
  padding: 50px 0 0;
}

.sidebar-page-container .content-side,
.sidebar-page-container .sidebar-side{
    padding-top: 20px;
    padding-bottom: 20px;
	margin-bottom:0px;
	background-color: #f8f8f8;
}

.sidebar-page-container .sidebar-side .sidebar-inner{
	position:relative;
	padding-left:20px;
}

.sticky-top{
	top:140px;
	z-index:1;
}

.sidebar .search-box .form-group{
	position:relative;
	margin:0px;	
}

.sidebar .search-box .form-group input[type="text"],
.sidebar .search-box .form-group input[type="search"]{
	position:relative;
	line-height:28px;
	padding:10px 50px 10px 25px;
	border:1px solid #cccccc;
	background:var(--color-white);
	display:block;
	width:100%;
	height:50px;
	border-radius:0px;
	transition:all 500ms ease;
}

.sidebar .search-box .form-group button{
	position:absolute;
	right:0px;
	top:0px;
	height:50px;
	width:50px;
	display:block;
	font-size: 16px;
	color:var(--color-white);
	line-height:100%;
	font-weight:normal;
	background:var(--color-accent-warm); 
	border-radius:0px 5px 5px 0px;
}

.sidebar .search-box .form-group button:hover,
.sidebar .search-box .form-group button:hover .fa {
  color: var(--color-white) !important;
}

.sidebar .search-box .form-group button:hover {
  background: var(--color-accent-warm);
  opacity: 0.9;
}

.sidebar-widget{
	margin-bottom:50px;
}

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

.sidebar-widget .widget-content{
	position:relative;
	padding:35px 30px;
	background: linear-gradient(45deg, #ffffff, #f4f4f4);
	border:1px solid #cccccc;
}

.sidebar-title{
	position:relative;
	margin-bottom:20px;
}

.sidebar-title h5{
	color: linear-gradient(45deg, var(--color-primary-bg-1), var(--color-primary-bg-2));
	font-weight: bold;
	text-transform: uppercase;
}

.cat-list-two{
	position:relative;
}

.cat-list-two li{
	position:relative;
	margin-bottom:1px;
}

.cat-list-two li a{
	position:relative;
	color:var(--color-neutral-gray-brown);
	font-size: 16px;
	display:block;
	padding:18px 25px;
	background-color:#dddddd;
	transition:all 500ms ease;
	-moz-transition:all 500ms ease;
	-webkit-transition:all 500ms ease;
	-ms-transition:all 500ms ease;
	-o-transition:all 500ms ease;
}

.cat-list-two li a span{
	position:absolute;
	right:25px;
}

.cat-list-two li a:hover{
	color:var(--color-white); 
	background: linear-gradient(45deg, var(--color-primary-bg-1), var(--color-primary-bg-2));
}

.popular-posts .post{
	position:relative;
	font-size: 16px;
	color:#666666;
	min-height:105px;
	padding-left:80px;
	margin-bottom:20px;
	border-bottom:1px solid #dddddd;
}

.popular-posts .post:last-child{
	margin-bottom:0px;
	min-height:60px;
	border:0px;
}

.popular-posts .post .post-thumb{
	 position:absolute;
	 left:0px;
	 top:4px;
	 width:60px;
	 height:60px;
}

.popular-posts .post .post-thumb img{
	display:block;
	width:100%;
	transition:all 0.3s ease;
	-moz-transition:all 0.3s ease;
	-webkit-transition:all 0.3s ease;
	-ms-transition:all 0.3s ease;
	-o-transition:all 0.3s ease;
}

.popular-posts .post .text{
	position:relative;
	top:0px;
	margin:0px 0px 3px;
	font-weight:600;
	color:#222222;
	text-align: justify;
	/*text-transform:capitalize;*/
}

.popular-posts .post .text a{
	color:#222222;
	transition:all 0.3s ease;
	-moz-transition:all 0.3s ease;
	-webkit-transition:all 0.3s ease;
	-ms-transition:all 0.3s ease;
	-o-transition:all 0.3s ease;
}

.popular-posts .post a:hover{
	color:var(--color-accent-warm); 
}

.popular-posts .post-info{
	position:relative;
	font-size: 16px;
	color:var(--color-neutral-gray-brown);
	font-weight:400;
	padding-left:20px;
	margin-top:6px;
}

.popular-posts .post-info:before{
	position:absolute;
	content: "\f073";
	left:0px;
	top:2px;
	color:var(--color-accent-warm); 
	font-size: 16px;
	line-height:1em;
	font-family: 'FontAwesome';
}

.sidebar .popular-tags a{
	position:relative;
	display:inline-block;
	line-height:24px;
	padding:8px 20px 10px;
	margin:0px 6px 8px 0px;
	color:var(--color-text-dark-brown);
	text-align:center;
	font-size: 16px;
	background:var(--color-white);
	font-weight:400;
	border-radius:0px;
	border:1px solid #cccccc;
	border-left:3px solid #222222;
	text-transform: uppercase; 
	transition:all 300ms ease;
}

.sidebar .popular-tags a:hover{
	border-color:var(--color-accent-warm); 
	background: linear-gradient(45deg, var(--color-accent-warm-1) 0%, var(--color-accent-warm-2) 100%);
	color:var(--color-white);
}

.news-block{
	position:relative;
	margin-bottom:50px;
}

.news-block .inner-box{
	position:relative;
}

.news-block .inner-box .pattern-layer{
	position:absolute;
	right:0px;
	top:0px;
	width:750px;
	height:440px;
}

.news-block .inner-box .image{
	position:relative;
	overflow:hidden;
}

.news-block .inner-box .image:before{
	position:absolute;
	content:'';
	left:0px;
	top:-150px;
	width:100%;
	height:100px;
	opacity:0.3;
	z-index:1;
	background: linear-gradient(45deg, var(--color-accent-warm-1) 0%, var(--color-accent-warm-2) 100%);
	transition: all 600ms ease;
}

.news-block .inner-box:hover .image:before{
	top:150%;
}

.news-block .inner-box .image img{
	position:relative;
	width:100%;
	display:block;
}

.news-block .inner-box .image .category{
	position:absolute;
	right:0px;
	z-index:2;
	bottom:0px;
	color:var(--color-white);
	font-size:20px;
	padding:16px 30px;
	display:inline-block;
	background: linear-gradient(45deg, var(--color-accent-warm-1) 0%, var(--color-accent-warm-2) 100%);
	font-family:'Montserrat', sans-serif;
}

.news-block .inner-box .lower-content{
	position:relative;
	padding-top:15px;
}

.news-block .inner-box .image .post-meta{
	position:absolute;
	left:0px;
	right:0px;
	z-index:1;
	bottom:0px;
	padding:15px 20px;
	background: linear-gradient(45deg, var(--color-primary-bg-1), var(--color-primary-bg-2));
}

.news-block .inner-box .image .post-meta li{
	position:relative;
	color:var(--color-white);
	font-size: 16px;
	padding-left:26px;
	padding-right:18px;
	margin-right:15px;
	display:inline-block;
	font-family:'Montserrat', sans-serif;
}

.news-block .inner-box .image .post-meta li:before{
	position:absolute;
	content:'/';
	right:0px;
	top:0px;
}

.news-block .inner-box .image .post-meta li:last-child::before{
	display:none;
}

.news-block .inner-box .image .post-meta li .fa{
	position:absolute;
	top: 3px;
	left:0px;
	color:var(--color-accent-warm); 
	font-size: 16px;
}

.news-block .inner-box .image .post-meta li a{
	position:relative;
	color:var(--color-white);
	padding-left:26px;
}

.news-block .inner-box .image .post-meta li:last-child{
	margin-right:0px;
}

.news-block .inner-box .lower-content h3{
	line-height:1.3em;
	margin-top:12px;
}

.news-block .inner-box .lower-content h3 a{
	position:relative;
	color: var(--color-primary-bg);
	font-weight: bold;
	transition: all 300ms ease;
}

.news-block .inner-box .lower-content h3 a:hover{
	color:var(--color-accent-warm); 
}

.news-block .inner-box .lower-content .btn-box{
	position:relative;
	margin-top:25px;
}

.news-block .inner-box .lower-content .text{
	margin-top:18px;
}

.our-blogs .news-block-three{
	margin-bottom:50px;
}

.our-blogs .styled-pagination{
	margin-top:40px;
}

.blog-classic .styled-pagination{
	margin-top:80px;
}

.styled-pagination{
	position:relative;
}

.styled-pagination li{
	position:relative;
	margin:0px 4px 10px;
	display:inline-block;
}

.styled-pagination li a{
	position:relative;
	width:50px;
	height:50px;
	color:#222222;
	font-size:20px;
	font-weight:400;
	line-height:50px;
	text-align:center;
	display:inline-block;
	background-color:#ebebeb;
	transition:all 0.3s ease;
	font-family: 'Montserrat', sans-serif;
}

.styled-pagination li.active a,
.styled-pagination li:hover a{
	color:#111111;
	background: linear-gradient(45deg, var(--color-accent-warm-1) 0%, var(--color-accent-warm-2) 100%); 
}

.styled-pagination li.prev a{
	top:-2px;
	font-size: 16px;
	color:var(--color-white);
	font-weight:600;
	border-radius:0px;
	background-color:var(--color-neutral-gray-brown);
	transition:all 0.3s ease;
}

.styled-pagination li.next a{
	top:-2px;
	font-size: 16px;
	color:var(--color-white);
	font-weight:600;
	background-color:var(--color-neutral-gray-brown);
	border-radius:0px;
	transition:all 0.3s ease;
}

.styled-pagination li.prev a:hover,
.styled-pagination li.next a:hover{
	background-color:#222222;
}

.blog-detail{
	position:relative;
}

.blog-detail .inner-box{
	position:relative;
}

.blog-detail .inner-box .pattern-layer{
	position:absolute;
	right:0px;
	top:0px;
	width:750px;
	height:440px;
}

.blog-detail .inner-box .image{
	position:relative;
	overflow:hidden;
}

.blog-detail .inner-box .image:before{
	position:absolute;
	content:'';
	left:0px;
	top:-150px;
	width:100%;
	height:100px;
	opacity:0.3;
	z-index:1;
	background: linear-gradient(45deg, var(--color-accent-warm-1) 0%, var(--color-accent-warm-2) 100%);
	transition: all 600ms ease;
}

.blog-detail .inner-box:hover .image:before{
	top:150%;
}

.blog-detail .inner-box .image img{
	position:relative;
	width:100%;
	display:block;
}

.blog-detail .inner-box .image .category{
	position:absolute;
	right:0px;
	z-index:2;
	bottom:0px;
	color:var(--color-white);
	font-size:20px;
	padding:16px 30px;
	display:inline-block;
	background: linear-gradient(45deg, var(--color-accent-warm-1) 0%, var(--color-accent-warm-2) 100%);
	font-family: 'Montserrat', sans-serif;
}

.blog-detail .inner-box .lower-content{
	position:relative;
	padding-top:15px;
}

.blog-detail .inner-box .image .post-meta{
	position:absolute;
	left:0px;
	right:0px;
	z-index:1;
	bottom:0px;
	padding:15px 20px;
	background: linear-gradient(45deg, var(--color-primary-bg-1), var(--color-primary-bg-2));
}

.blog-detail .inner-box .image .post-meta li{
	position:relative;
	color:var(--color-white);
	font-size: 16px;
	padding-left:26px;
	padding-right:18px;
	margin-right:15px;
	display:inline-block;
	font-family: 'Montserrat', sans-serif;
}

.blog-detail .inner-box .image .post-meta li:before{
	position:absolute;
	content:'/';
	right:0px;
	top:0px;
}

.blog-detail .inner-box .image .post-meta li:last-child::before{
	display:none;
}

.blog-detail .inner-box .image .post-meta li .fa{
	position:absolute;
	top: 3px;
	left:0px;
	right:0px;
	color:var(--color-accent-warm); 
	font-size: 16px;
}

.blog-detail .inner-box .image .post-meta li:last-child{
	margin-right:0px;
}

.blog-detail .inner-box .lower-content h3{
	margin-top:12px;
	color: var(--color-primary-bg);
	font-weight: bold;
	margin-bottom:20px;
}

.blog-detail .inner-box .lower-content p{
	position:relative;
	color:var(--color-neutral-gray-brown);
	margin-bottom:12px;
	margin-top:0px;
}

.blog-detail .inner-box .lower-content blockquote{
	position:relative;
	text-align:center;
	margin-top:35px;
	margin-bottom:25px;
}

.blog-detail .inner-box .lower-content blockquote:before{
	position:absolute;
	content:'';
	left:50%;
	top:25px;
	width:310px;
	height:2px;
	margin-left:-155px;
	background: linear-gradient(45deg, var(--color-accent-warm-1) 0%, var(--color-accent-warm-2) 100%);
}

.blog-detail .inner-box .lower-content blockquote .quote-icon{
	position:relative;
	width:50px;
	height:50px;
	color:#111111;
	font-size:20px;
	margin-bottom:30px;
	line-height:48px;
	display:inline-block;
	background: linear-gradient(45deg, #ffffff, #f4f4f4);
	border:1px solid #e3e3e3;
}

.blog-detail .inner-box .lower-content blockquote .quote-text{
	position:relative;
	color:#222222;
	font-size:30px;
	font-weight:bold;
	line-height: 1.6em;
}

.blog-detail .inner-box .lower-content blockquote .quote-author{
	position:relative;
	color:var(--color-accent-warm); 
	font-size: 16px;
	font-weight:700;
	margin-top:20px;
}

.blog-detail .inner-box .lower-content .two-column{
	position:relative;
	margin-top:30px;
}

.blog-detail .post-share-options{
	position:relative;
	margin-top: 40px;
	padding:30px 0px 0px;
	border-top:1px solid #e1e1e1;
}

.blog-detail .post-share-options .tags span{
	font-size:16px;
	color:#f7941d;
	font-weight:400;
	margin-right:10px;
	text-transform: capitalize;
}

.blog-detail .post-share-options .tags a{
	position:relative;
	color:var(--color-neutral-gray-brown);
	font-size: 16px;
	font-weight:400;
	line-height: 1em;
	margin-right: 10px;
	display: inline-block;
	text-transform:capitalize;
	transition:all 500ms ease;
	-moz-transition:all 500ms ease;
	-webkit-transition:all 500ms ease;
	-ms-transition:all 500ms ease;
	-o-transition:all 500ms ease;
}

.blog-detail .post-share-options .tags a:last-child{
	border-right:none;
	margin-right: 0px;
	padding-right: 0px;
}

.blog-detail .post-share-options .tags{
	position:relative;
	color:#222222;
	font-size: 16px;
	font-weight:700;
	margin-right:5px;
	text-transform:uppercase;
}

.blog-detail .post-share-options .tags a:hover{
	color:var(--color-accent-warm); 
}

.blog-author-box{
	position:relative;
	padding: 30px 30px;
	margin-top:60px;
	min-height: 225px;
	margin-bottom: 55px;
	border:1px solid #dddddd;
}

.blog-author-box .author-inner{
	position:relative;
	padding-right:15px;
	padding-left: 110px;
}

.blog-author-box .thumb{
	position:absolute;
	left:0px;
	top:0px;
	height: 80px;
	width: 80px;
	overflow: hidden;
}

.blog-author-box .thumb img{
	display: block;
	width: 100%;
	height: auto;
}

.blog-author-box .name{
	position: relative;
	display: block;
	line-height: 30px;
	color: var(--color-text-dark-brown);
	font-size: 16px;
	font-weight: bold;
	margin-bottom: 5px;
}

.blog-author-box .text{
	display: block;
	color: var(--color-neutral-gray-brown);
	font-weight: 400;
	margin-bottom: 18px;
	margin-top:6px;
}

.blog-author-box .social-icon{
	position: relative;
}

.blog-author-box .social-icon li{
	position: relative;
	display: inline-block;
	margin-right: 15px;
}

.blog-author-box .social-icon li:last-child{
	margin-right: 0;
}

.blog-author-box .social-icon li a{
	position:relative;
	display: block;
	font-size: 16px;
	font-weight:400;
	line-height: 34px;
	color:var(--color-neutral-gray-brown);
	display:inline-block;
	transition: all 300ms ease;
}

.blog-author-box .social-icon li a:hover{
	color: var(--color-accent-warm); 
}

.sidebar-page-container .comments-area {
  position: relative;
  padding: 20px;
  background: linear-gradient(45deg, #ffffff, #f4f4f4);
}

.sidebar-page-container .group-title {
  position: relative;
  margin-top: 30px;
  margin-bottom: 10px;
}

.sidebar-page-container .group-title h5 {
  text-transform: uppercase;
  color: var(--color-text-dark-brown);
  font-weight: bold;
  font-size: 20px;
  letter-spacing: 1px;
}

.sidebar-page-container .group-title h5 strong {
  font-weight: bold;
  color: var(--color-neutral-gray-brown);
}

.average-rating {
  margin-bottom: 40px;
}

.average-rating h5 {
  font-size: 20px;
  margin-bottom: 15px;
  color: var(--color-text-dark-brown);
}

.average-rating span {
  font-size: 20px;
}

.fa-star {
  font-size: 16px;
  color: lightgray;
}

.fa-star.checked, .fa-star-half.checked, .fa-star-half-o.checked{
  color: gold;
}

.stars-wrapper {
  display: inline-block;
  color: gold;
  vertical-align: middle;
  letter-spacing: 10px;
}

.sidebar-page-container .comments-area .comment-box {
  position: relative;
  padding-top: 20px;
  margin-bottom: 20px;
  border-radius: 8px;
  transition: all 0.3s ease;
}

.sidebar-page-container .comments-area .comment-box:last-child {
  margin-bottom: 0;
}

.see-more {
	background: linear-gradient(45deg, var(--color-accent-warm-1) 0%, var(--color-accent-warm-2) 100%);
	color: var(--color-white);
	padding: 15px 25px;
	border-radius: 5px;
	border: none;
	cursor: pointer;
	transition: box-shadow 0.3s ease, transform 0.3s ease;
	box-shadow: 0 4px 8px var(--color-shadow);
}

.see-more:hover {
	background: linear-gradient(45deg, var(--color-primary-bg-1), var(--color-primary-bg-2));
	color: var(--color-white);
}

.sidebar-page-container .comments-area .comment-box .user-comment-box{
  display: none;
  position:relative;
  padding:10px 0px 10px;
  margin-bottom: 10px;
}

.sidebar-page-container .comments-area .comment {
	position: relative;
	min-height: 50px;
	padding: 5px 0 0 100px;
}

.sidebar-page-container .comments-area .comment-box .author-thumb {
  position: absolute;
  left: 0;
  top: 0;
  margin-bottom: 20px;
  width: 75px;
  height: 75px;
  border: 2px solid var(--color-white);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  overflow: hidden;
}

.sidebar-page-container .comments-area .comment-box .author-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.sidebar-page-container .comments-area .comment-box strong {
  font-size: 16px;
  color: var(--color-text-dark-brown);
  font-weight: 600;
  line-height: 1.3;
  text-transform: capitalize;
}

.sidebar-page-container .comments-area .comment-box .text {
  margin-bottom: 15px;
  color: var(--color-neutral-gray-brown);
  line-height: 1.6;
}

.comment-container {
  margin-bottom: 20px;
}

.comment-info, .comment-time, .comment-rating, .comment-message {
  font-size: 16px;
  color: var(--color-text-dark-brown);
  text-align: justify;
}

.comment-info b {
  color: var(--color-accent-warm);
}

.comment-rating {
  display: inline;
  vertical-align: middle;
  align-items: center;
}

.comment-info i, .comment-rating i, .comment-message i{
  margin-right: 10px;
}

.comment-time b {
  color: var(--color-neutral-gray-brown);
}

.comment-time:before {
  font-family: 'FontAwesome';
  content: "\f073";
  margin-right: 7px;
}

.comment-message b {
  color: var(--color-neutral-gray-brown);
  font-weight: 500;
}

.comment-actions {
  display: flex;
  gap: 15px;
  margin-top: 15px;
}

.comment-actions button {
  background: none;
  color: var(--color-text-dark-brown);
  padding: 8px 15px;
  border: 1px solid var(--color-text-dark-brown);
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease;
  font-size: 16px;
}

.comment-actions button:hover {
  background: linear-gradient(45deg, var(--color-primary-bg-1), var(--color-primary-bg-2));
  color: var(--color-white);
}

.comment-actions .like-btn,
.comment-actions .reply-btn {
  display: flex;
  align-items: center;
  gap: 0;
}

.comment-actions .like-btn .fa-thumbs-up {
  color: var(--color-text-dark-brown);
  transition: color 0.3s ease;
}

.comment-actions button:hover .fa-thumbs-up {
  color: var(--color-white);
}

.reply-section {
  margin-top: 15px;
  display: none;
}

.reply-input {
  width: 100%;
  border: 1px solid #ddd;
  padding: 10px;
  border-radius: 4px;
  margin-bottom: 10px;
  font-size: 16px;
  resize: vertical;
  background-color: #fff;
  color: #333;
}

.submit-reply {
  background: linear-gradient(45deg, var(--color-primary-bg-1), var(--color-primary-bg-2));
  color: var(--color-white);
  padding: 8px 15px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s ease;
  font-size: 16px;
}

.submit-reply:hover {
  background: linear-gradient(45deg, var(--color-accent-warm-1) 0%, var(--color-accent-warm-2) 100%);
}

.replies {
  padding: 10px;
  background: linear-gradient(45deg, #f9f9f9, #d8d8d8);
  border-left: 3px solid var(--color-border-light);
  border-radius: 8px;
}

.reply {
  color: var(--color-text-dark-brown);
  margin-bottom: 5px;
  border-bottom: 1px solid var(--color-border-light);
  padding: 5px 0;
}

.reply:last-child {
  border-bottom: none;
}

.replies .reply-title {
  font-size: 16px;
  color: var(--color-text-dark-brown);
  text-align: justify;
}

.replies .reply-title span {
  color: var(--color-neutral-gray-brown);
}

.replies .reply-time {
  font-size: 16px;
  color: var(--color-neutral-gray-brown);
}

.like-count,
.reply-count {
  color: var(--color-accent-warm);
  font-weight: bold;
  font-size: 16px;
}

.form-section {
  margin-bottom: 20px;
  padding: 15px;
  border: 1px solid var(--color-border-light);
  border-radius: 5px;
}

.form-section fieldset {
	border: 2px solid var(--color-white);
	padding: 5px;
	margin: 5px;
}

.form-section legend {
	background: var(--color-primary-bg);
	font-size: 1.2rem;
	font-weight: bold;
	color: var(--color-white);
	padding: 0 10px;  
	margin: 0;   
	display: inline;  
	width: auto;  
	white-space: nowrap; 
	text-align: left; 
}

.comment-form{
	position: relative;
	z-index:1;
}

.comment-form form {
  background: var(--color-white);
  padding: 20px;
}

.comment-form .form-group{
	position:relative;
	margin-bottom:15px;
}

.ui-selectmenu-button.ui-button,
.comment-form .form-group input[type="text"],
.comment-form .form-group input[type="number"],
.comment-form .form-group input[type="date"],
.comment-form .form-group input[type="email"],
.comment-form .form-group input[type="password"],
.comment-form .form-group input[type="tel"],
.comment-form .form-group input[type="file"],
.comment-form .form-group input[type="url"],
.comment-form .form-group input[type="radio"],
.comment-form .form-group textarea,
.comment-form .form-group select,
.comment-form .form-group option{
	position: relative;
	display: block;
	width: 100%;
	font-size: 16px;
	line-height: 20px;
	color: var(--color-neutral-gray-brown);
	font-weight: 400;
	padding: 14px 28px;
	  z-index:1;
	  height:55px;
	  border:1px solid #cccccc;
	background: linear-gradient(45deg, #ffffff, #f4f4f4);
	-webkit-transition: all 300ms ease;
	-ms-transition: all 300ms ease;
	-o-transition: all 300ms ease;
	-moz-transition: all 300ms ease;
	transition: all 300ms ease;
}

.comment-form .form-group input:focus,
.comment-form .form-group select:focus,
.comment-form .form-group option:focus,
.comment-form .form-group textarea:focus{
	border-color:var(--color-accent-warm);
}

.comment-form .form-group textarea{
	height: 110px;
	resize: none;
	border-radius:0px;
}

.comment-form .form-group input[type="submit"],
.comment-form button{
	margin-top:5px;
}

.comment-form .form-group input[type="submit"]:hover,
.comment-form button:hover{
	
}

@media (max-width: 768px) {
  .lawyer-details p {
    font-size: 16px;
    line-height: 1.6;
  }

  .info-item {
    flex-direction: column;
    align-items: flex-start;
  }

  .info-item .label {
    min-width: unset;
    margin-bottom: 6px;
  }

  .fee-item {
    flex-direction: column;
    align-items: flex-start;
  }

  .fee-item .value {
    text-align: left;
    margin-top: 6px;
  }

  .profile-box {
    padding: 10px;
  }

  .lawyer-profile .outer-box {
    padding: 10px;
  }
}

.lawyer-profile {
  border-radius: 10px;
}

.fee-item, .info-item {
  border-radius: 10px;
  padding: 12px;
}

.image img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
}


.info-item {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 6px 12px; /* icon ↔ nội dung nhỏ hơn */
  padding: 8px 0; /* Giảm khoảng cách dọc */
  border-bottom: 1px solid #eee;
}

.info-item:last-child {
  border-bottom: none;
}

.info-item .label {
  font-weight: bold;
  color: var(--color-text-dark-brown);
  min-width: 150px;
  font-size: 16px;
}

.info-item .value {
  flex: 1;
  color: var(--color-text-warm-brown);
  line-height: 1.4;
  font-size: 16px;
}

.lawyer-details {
  padding: 20px;
  background: var(--color-white);
  border-radius: 10px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}

@media (max-width: 768px) {
  .info-item {
    flex-direction: column;
    align-items: flex-start;
    padding: 10px 0;
  }

  .info-item .label {
    min-width: unset;
    margin-bottom: 2px;
    font-size: 16px;
  }

  .info-item .value {
    font-size: 16px;
    line-height: 1.5;
  }

  .lawyer-details {
    padding: 16px;
  }
}


.center-block {
  display: flex;
  justify-content: flex-start; /* canh trái */
  flex-wrap: wrap;             /* cho nút tự xuống dòng nếu chật */
  gap: 10px;                   /* khoảng cách giữa các nút */
}



/* Đảm bảo các <a> là block để button nằm đúng */
.center-block a {
  display: inline-block;
}

/* Responsive: chỉ giãn 100% khi màn hình nhỏ */
@media (max-width: 768px) {
  .center-block {
    flex-direction: column;
    align-items: stretch;
  }

  .center-block a {
    width: 100%;
  }

  .center-block button {
    width: 100%;
  }
}

    
/* Tooltip hiển thị */
.custom-tooltip-wrapper { 
  position: relative;
  display: block;
  width: 100%;
}

.custom-tooltip-wrapper::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(45deg, #DC143C, #FF5A5A);
  color: var(--color-white);
  font-size: 15px;
  font-weight: normal;
  padding: 6px 12px;
  border-radius: 6px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 1000;

  /* ✨ Chỉnh cho ngắt dòng hợp lý */
  white-space: normal;                   /* Cho phép ngắt dòng khi cần */
  max-width: 320px;                      /* Giới hạn tối đa hợp lý */
  width: max-content;                    /* Tooltip tự giãn theo nội dung */
  word-wrap: break-word;                 /* Ngắt từ nếu quá dài */
  box-sizing: border-box;
  text-align: center;
}


.custom-tooltip-wrapper:hover::after {
  opacity: 1;
}


/* Mặc định: nút không giãn toàn màn hình */
.btn-responsive {
  width: auto;
  display: inline-block;
}

/* Khi màn hình nhỏ hơn hoặc bằng 768px: giãn toàn chiều rộng */
@media (max-width: 768px) {
  .btn-responsive {
    width: 100%;
    display: block;
    box-sizing: border-box;
  }

  .btn-fullwidth-link {
    display: block;
    width: 100%;
  }
}


/* ------------------- Menu ------------------- */

.main-menu.bessen-style {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 30px;
}

.main-menu.bessen-style ul {
  list-style: none;
  display: flex;
  gap: 25px;
  margin: 0;
  padding: 0;
}

.main-menu.bessen-style ul li a {
  font-size: 16px;
  font-weight: 500;
  color: var(--color-text-dark-brown);
  text-transform: uppercase;
  padding: 10px 5px;
  position: relative;
  transition: color 0.3s ease;
  text-decoration: none;
}

.main-menu.bessen-style ul li a::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  width: 0%;
  background: linear-gradient(45deg, var(--color-accent-warm-1) 0%, var(--color-accent-warm-2) 100%);
  transition: width 0.3s ease-in-out;
}

.main-menu.bessen-style ul li a:hover,
.main-menu.bessen-style ul li.current a {
  color: var(--color-accent-warm);
}

.main-menu.bessen-style ul li a:hover::after,
.main-menu.bessen-style ul li.current a::after {
  width: 100%;
}

/* Contact button */
.main-menu.bessen-style .contact-btn {
  background: linear-gradient(45deg, var(--color-accent-warm-1) 0%, var(--color-accent-warm-2) 100%);
  color: white !important;
  padding: 8px 16px;
  border-radius: 5px;
  font-weight: 600;
  margin-left: 15px;
  transition: background-color 0.3s ease;
}

.main-menu.bessen-style .contact-btn:hover {
  background-color: #E56A00;
}

/* Responsive */
@media (max-width: 768px) {
  .main-menu.bessen-style {
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
  }

  .main-menu.bessen-style ul {
    flex-direction: column;
    gap: 10px;
  }

  .main-menu.bessen-style .contact-btn {
    margin-left: 0;
  }
}


input.has-value,
textarea.has-value,
select.has-value {
  background-color: #ffffe0;
  transition: background-color 0.3s ease;
}






/* === CÁC CHỈNH SỬA ĐÃ ÁP DỤNG: BÓNG MỜ & NÚT PHONG CÁCH CPANEL === *


/* Nâng cấp cho các button chính *
.button-group a,
.submit-search-btn,
#toggle-search-btn,
#chatbox-button,
#chatbox-close,
.biography .biography-info .social-icons-2 li a,
.attorney-info .social-nav li a,
.social-icons li a,
.pagination a {
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: all 0.3s ease;
}

.button-group a:hover,
.submit-search-btn:hover,
#toggle-search-btn:hover,
#chatbox-button:hover,
#chatbox-close:hover,
.biography .biography-info .social-icons-2 li a:hover,
.attorney-info .social-nav li a:hover,
.social-icons li a:hover,
.pagination a:hover,
.pagination li:hover a,
.pagination a.active {
  background: linear-gradient(45deg, var(--color-accent-warm-1) 0%, var(--color-accent-warm-2) 100%);
  color: var(--color-white);
  box-shadow: 0 6px 18px rgba(255, 153, 0, 0.45);
  transform: translateY(-1px);
}

/* Bổ sung hiệu ứng bóng nhẹ cho các khối nội dung *
.lawyer-profile,
.result-item,
.fee-item,
.container-sort-and-search-info,
.loginForm,
.biography .biography-content,
.biography .biography-accordion,
.attorney-item,
.chart-container,
.chart-container-2 {
  box-shadow: 0 6px 16px var(--color-shadow);
  background: linear-gradient(45deg, #ffffff, #f4f4f4);
  border-radius: 12px;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.lawyer-profile:hover,
.result-item:hover,
.fee-item:hover,
.attorney-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
}

/* Đảm bảo các text shadow cho tiêu đề nổi bật *
.page-title-2 h1,
.page-title-2 h3,
.page-title-2 p,
.heading-title,
.attorney-info h5 {
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.25);
}

/* Cập nhật hiệu ứng glow nhẹ cho các nút hoặc badge có màu vàng *
.badge-button,
.btn-yellow-glow {
  background-color: #fff8e1;
  border: 2px solid var(--color-accent-warm);
  box-shadow: 0 4px 14px rgba(255, 153, 0, 0.4);
  color: var(--color-primary-bg);
  padding: 10px 20px;
  font-weight: 600;
  font-size: 16px;
  border-radius: 999px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.badge-button:hover,
.btn-yellow-glow:hover {
  background: linear-gradient(45deg, var(--color-accent-warm-1) 0%, var(--color-accent-warm-2) 100%);
  color: var(--color-white);
  box-shadow: 0 6px 20px rgba(255, 153, 0, 0.6);
}
*/



/* File gốc được chỉnh sửa để làm tròn tất cả các button *

/* Button chung: làm tròn 2 đầu (bo tròn 1/2 chiều cao) *
button,
input[type="button"],
input[type="submit"],
.button,
.btn,
.submit-search-btn,
#chatbox-button,
#chatbox-close,
#toggle-search-btn,
.button-group a,
.pagination a,
.comment-form button,
.register-button,
.send-btn,
.badge-button,
.btn-yellow-glow {
  border-radius: 999px !important; /* tạo 2 đầu hình tròn *
  padding: 10px 20px;
  transition: all 0.3s ease;
}

/* Hover effect giữ nguyên form và thêm glow *
button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
.button:hover,
.btn:hover,
.submit-search-btn:hover,
#chatbox-button:hover,
#chatbox-close:hover,
#toggle-search-btn:hover,
.button-group a:hover,
.pagination a:hover,
.comment-form button:hover,
.register-button:hover,
.send-btn:hover,
.badge-button:hover,
.btn-yellow-glow:hover {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
  transform: translateY(-1px);
}

/* Responsive hoặc fallback cho nút nhỏ *
.small-button,
.btn-sm,
input[type="submit"].small {
  font-size: 13px;
  padding: 6px 14px;
  border-radius: 999px;
}

/* Gợi ý bổ sung nếu dùng thêm thẻ a đóng vai trò nút *
a.btn,
a.button,
a.submit-search-btn {
  display: inline-block;
  text-align: center;
  border-radius: 999px;
  padding: 10px 20px;
  text-decoration: none;
}

/* Đảm bảo thừa kế màu sắc nếu có trong biến màu *
.btn,
.button,
.button-group a {
  background-color: var(--color-accent-warm, #ff9900);
  color: #fff;
  border: none;
}
*/

/* ============================= */
/*  Làm tròn tất cả các button   */
/* ============================= */


/*
button,
input[type="button"],
input[type="submit"],
.button,
.btn,
[class*="btn-style"],
.submit-search-btn,
#chatbox-button,
#chatbox-close,
#toggle-search-btn,
.button-group a,
.pagination a,
.comment-form button,
.register-button,
.send-btn,
.badge-button,
.btn-yellow-glow {
  border-radius: 999px !important; /* Bo tròn 2 đầu đẹp hiện đại *
  padding: 10px 24px;
  transition: all 0.3s ease;
}

/* Hover effect thêm bóng nhẹ *
button:hover,
input[type="button"]:hover,
input[type="submit"]:hover,
.button:hover,
.btn:hover,
[class*="btn-style"]:hover,
.submit-search-btn:hover,
#chatbox-button:hover,
#chatbox-close:hover,
#toggle-search-btn:hover,
.button-group a:hover,
.pagination a:hover,
.comment-form button:hover,
.register-button:hover,
.send-btn:hover,
.badge-button:hover,
.btn-yellow-glow:hover {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
  transform: translateY(-1px);
}

/* Responsive fallback cho nút nhỏ *
.small-button,
.btn-sm,
input[type="submit"].small {
  font-size: 13px;
  padding: 6px 16px;
  border-radius: 999px;
}

/* Đảm bảo thẻ <a> dạng button cũng đẹp *
a.btn,
a.button,
a.submit-search-btn {
  display: inline-block;
  text-align: center;
  border-radius: 999px;
  padding: 10px 24px;
  text-decoration: none;
}
*/

/*
body {
    font-family: 'SF_Regular', sans-serif;
}

h1, h2, h3, h4 {
    font-family: 'SF_Semibold', sans-serif;
}

strong, b {
    font-family: 'SF_Bold', sans-serif;
}
*/

/*
body {
    font-family: 'SF_Regular', sans-serif;
}


h1, h2, h3, h4 {
    font-family: 'SF_Bold', sans-serif;
}
*/

strong, b {
    font-family: 'SF_Bold', sans-serif;
}



/* Menu chính - cấp 1 - màu trắng */
.header-upper .navigation > li > a {
    color: #ffffff !important;

}
.header-upper .navigation > li > a i {
    color: #ffffff !important;
}

/* Menu chính - cấp 1 - khi cuộn đổi sang màu xanh */
.header-upper.scrolled .navigation > li > a,
.header-upper.scrolled .navigation > li > a i {
    color: var(--color-primary-bg) !important;
}

/* Menu con (dropdown) giữ nguyên màu XANH */
.header-upper .navigation li ul li a {
    color: var(--color-primary-bg) !important;
    opacity: 1 !important;
}

/* Màu chữ dropdown mặc định */
.header-upper .navigation li ul li a {
    color: var(--color-primary-bg) !important; /* Xanh gốc */
}

/* Khi hover dropdown → chữ trắng */
.header-upper .navigation li ul li:hover > a {
    color: #ffffff !important;
}

/* TRANG CHỦ (menu active) – màu trắng khi chưa cuộn */
.header-upper .navigation > li.current > a,
.header-upper .navigation > li.current > a i {
    color: #ffffff !important;
}

/* Hover vào TRANG CHỦ → chuyển sang màu xanh */
.header-upper .navigation > li.current > a:hover,
.header-upper .navigation > li.current > a:hover i {
    color: var(--color-primary-bg) !important;
}

/* Khi cuộn trang, TRANG CHỦ đổi sang màu xanh */
.header-upper.scrolled .navigation > li.current > a,
.header-upper.scrolled .navigation > li.current > a i {
    color: var(--color-primary-bg) !important;
}

/* Icon menu mobile giữ nguyên màu, không đổi khi hover */
.mobile-nav-toggler .flaticon-menu:before {
    color: #000 !important;     /* màu icon gốc */
}

/* Ngăn hover đổi màu cam */
.mobile-nav-toggler:hover .flaticon-menu:before {
    color: #000 !important;
}

/* Icon đóng menu (dấu X) giữ nguyên màu */
.close-btn .flaticon-multiply:before {
    color: #000 !important;
}

.close-btn:hover .flaticon-multiply:before {
    color: #000 !important;
}