:root {
	--primary: #152440;
	--secondary: #F6F6F6;
	--light: #FFFFFF;
	--dark: #195099;
}

a {
	color: var(--primary);
	text-decoration: none;
}

a:hover {
	color: var(--dark);
}

.text-primary {
	color: var(--primary) !important;
}

.bg-primary {
	background-color: var(--primary) !important;
}

.btn-dark {
	color: #fff;
	background-color: var(--primary);
	border-color: var(--primary);
}

.btn-dark:hover {
	color: #fff;
	background-color: var(--dark);
	border-color: var(--dark);
}

.w-10 {
	width: 10% !important;
}

.site-logo {
	height: 97px;
}

.footer-logo {
	height: 110px;
}

.dropdown-item.active, .dropdown-item:active {
	color: #fff;
	text-decoration: none;
	background-color: var(--primary) !important;
}

.navbar.sticky-top .site-logo {
	height: 67px;
}

#profile {
	height: calc(100vh - 137px);
}

.choose-us-detail-left {
	padding-left: 130px;
}

.choose-us-detail-right {
	padding-right: 130px;
}

.quick-links a, .footer-contact a {
	transition: 0.3s;
}

.quick-links a:hover, .footer-contact a:hover {
	color: var(--bs-gray) !important;
}

.footer-logos img {
	height: 110px;
}

.footer-contact a {
	color: var(--light);
	transition: 0.3s;
}

.footer-contact a:hover {
	color: var(--primary);
}

.form-control:focus {
	color: #6B6A75;
	background-color: #fff;
	border-color: #738097;
	outline: 0;
	box-shadow: 0 0 0 .25rem #04318640;
}

.form-select:focus {
	border-color: #738097;
	outline: 0;
	box-shadow: 0 0 0 .25rem #04318640;
}

.accordion-button:not(.collapsed) {
	color: var(--secondary);
	background-color: var(--primary);
	box-shadow: inset 0 -1px 0 rgba(0,0,0,0.125);
}

.accordion-button:not(.collapsed)::after {
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23738097'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
	transform: rotate(-180deg);
}

.accordion-button:focus {
	border-color: #738097;
	box-shadow: 0 0 0 .25rem #04318640;
}

#accordionFaq .accordion-body {
	background-color: #3f506f;
	color: var(--secondary);
}

	/*pagination*/

.page-link {
	color: var(--primary);
}

.page-link:hover {
	color: var(--dark);
}

.page-item.active .page-link {
	color: var(--light);
	background-color: var(--primary);
	border-color: var(--primary);
}

/*hero section*/


.profile {
  display: flex;
  justify-content: center;
  align-items: center;
  /*min-height: 100vh;*/
  /*max-height: 600px;*/
  overflow-x: clip;
}

.profile .hero { 
  display: grid;
  grid-template-columns: 4fr 1fr 4fr; 
  grid-template-rows: 1fr 6fr 1fr;
  gap: 0px 0px;
  grid-auto-flow: row;
  max-width: 1000px;
  width: 90%;
  margin: 0 auto;
}

/* LEFT PART */
.left { 
  grid-area: 1 / 1 / 4 / 3;
  border: 10px solid var(--primary);
  padding: 30px;
  background-color: #FFFFFF;
  position: relative;
}
.left h1{
  text-transform: uppercase;
  font-size: clamp(20px, 5vw ,30px);
  font-weight: 700;
  white-space: normal;
}
.left h1 span{
  color: #F1C50E;
}
.left p{
  margin-top: 25px;
  margin-bottom: 50px;
  font-size: 16px;
}
.left a{
  padding: 10px;
  text-transform: uppercase;
  text-decoration: none;
  border: 2px solid #F1C50E;
  color: #000;
  font-weight: 700;
}
.left a:hover{
  color: #FFFFFF;
  background-color: #F1C50E;
}


/* RIGHT PART */
.right { 
  grid-area: 1 / 3 / 4 / 4;
  border: 10px solid var(--primary);
  z-index: -1;
  position: relative;
}

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

/* LEFT AND RIGHT BANDS */
.left::before,
.right::before{
  content: '';
  position: absolute;
  top: 50%;
  height: 50%;
  width: 50vw;
  background: var(--primary);
}
.left::before{
  left: 0;
  transform: translateY(-50%) translateX(-100%);
}
.right::before{
  right: 0;
  transform: translateY(-50%) translateX(100%); 
}

/*hero section end*/
@media (max-width: 899.98px) {

	.choose-us-detail-left {
		padding-left: 0;
	}

	.choose-us-detail-right {
		padding-right: 0;
	}

}

@media (max-width: 499.98px) {

	.site-logo {
		height: 80px;
	}

	.navbar.sticky-top .site-logo {
		height: 80px;
	}
	
	#profile {
	height: calc(100vh - 137px);
	}

	.service-item {
		height: 385px;
	}

	.footer-logo {
		height: 110px;
	}

	.back-to-top {
		right: 15px;
	}

	#aboutUs {
		flex-direction: column-reverse;
	}

  .profile .hero { 
    grid-template-rows: 6fr 1fr 6fr;
    display: flex;
    flex-direction: column;
  }
  
  .left{
    grid-area: 2 / 1 / 3 / 4;
  }

  .right{
    grid-area: 1 / 1 / 4 / 4
  }
}