body {
  font-family: "Exo", sans-serif;
}
:root {
  --main-color: #7f22fe;
  --secondary-purpl: #9810fa;
  --secondry-color: #4a5565;
  --section-bg: #f9fafb;
  --light-gray: #ede9fe;
  --section-padding: 5rem;
  --transition-time: 0.4s;
}
:root::selection {
  background-color: #a684ff;
  color: #fff;
}
h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin: 0;
}
a,
button {
  text-decoration: none;
  color: inherit;
  font-family: inherit;
}
ul,
li,
a {
  list-style: none;
  margin: 0;
  padding: 0;
}
.h-16 {
  height: 35px;
}
/* & start section head */
.section-head {
  margin-bottom: 3.75rem;
}
.section-head span {
  font-size: 0.75rem;
  line-height: 1rem;
  color: #7008e7;
  border: 0.1rem solid oklch(0.894 0.057 293.283);
  background: linear-gradient(
    to right,
    oklch(0.969 0.016 293.756) 0%,
    oklch(0.977 0.014 308.299) 100%
  );
}
.section-head span::after {
  background: linear-gradient(
    to right,
    rgba(0, 0, 0, 0) 0%,
    oklch(0.606 0.25 292.717) 50%,
    oklch(0.541 0.281 293.009) 100%
  );
  position: absolute;
  width: 4rem;
  height: 1.5px;
  top: 50%;
  left: -80px;
  content: "";
}
.section-head span::before {
  background: linear-gradient(
    to left,
    rgba(0, 0, 0, 0) 0%,
    oklch(0.627 0.265 303.9) 50%,
    oklch(0.541 0.281 293.009) 100%
  );
  position: absolute;
  width: 4rem;
  height: 1.5px;
  top: 50%;
  right: -80px;
  content: "";
}
.section-head h2 {
  background-image: linear-gradient(
    to right,
    oklch(0.541 0.281 293.009) 0%,
    oklch(0.558 0.288 302.321) 50%,
    oklch(0.769 0.188 70.08) 100%
  );
  color: transparent;
  background-clip: text;
  font-weight: 900;
  font-size: 1.875rem;
  line-height: 2.25rem;
}
.section-head p {
  font-size: 1.25rem;
  line-height: 2.0625rem;
  color: var(--secondry-color);
  max-width: 41.875rem;
}

/* & end section head */

/* & start nav */
nav span.navbar-brand {
  font-size: 1.5rem;
  line-height: 2rem;
  color: #1d293d;
}

nav.navbar-expand-lg .navbar-nav .nav-link {
  padding: 0;
  transition: all var(--transition-time);
  font-weight: 500;
}
nav .navbar-nav .nav-link:hover,
nav .navbar-nav .nav-link.active {
  color: #7c3aed;
}
nav .navbar-nav .nav-link.active {
  font-weight: 700;
}
nav .navbar-nav li:hover {
  background-color: #f5f3ff;
}
nav button.navbar-toggler {
  border: none;
}
nav button.navbar-toggler:focus {
  box-shadow: none;
}
nav button.navbar-toggler:hover {
  color: var(--main-color);
}
nav.navbar-expand-lg .navbar-nav .nav-item .dropdown-menu {
  max-height: 70vh;
  overflow-y: auto;
  border: none;
  border-radius: 0;
}

/*****& Mega Menu *****/ 

.property-menu h3 {
  font-size: .875rem;
  line-height: 1.25rem;
  font-weight: 700;
  color: #101828;
}
.property-menu .featured-properties .item {
  padding: 0.75rem;
  border-radius: 0.5rem;
  transition: all 0.3s;
}
.property-menu .featured-properties .item:hover {
  background-color: #F5F3FF;
}
.property-menu .featured-properties .img-holder {
  border-radius: 0.5rem;
  overflow: hidden;
  height: 4rem;
  width: 4rem;
}
.property-menu .featured-properties .img-holder img {
  object-fit: cover;
}
.property-menu .featured-properties .title {
  font-size: .875rem;
  line-height: 1.25rem;
  font-weight: 500;
  color: #101828;
}
.property-menu .featured-properties p {
  font-size: .75rem;
  line-height: 1rem;
  color: #6a7282;
}
.property-menu .property-types i {
  color: #99a1af;
}
.property-menu .property-types ul {
  gap: 0.75rem;
}
.property-menu .property-types ul li {
  color: var(--secondry-color);
  margin-block: 0.375rem;
}
.property-menu .property-types ul li span {
  transition: all var(--transition-time);
}
.property-menu .property-types ul li:hover span {
  color: var(--main-color);
}

.property-menu .popular-locations ul li.first .location {
  background-image:
    linear-gradient(
      to right,
      oklab(0.38 0.0761041 -0.173 / 0.6) 0%,
      oklab(0.381 0.100917 -0.144194 / 0.6) 100%
    ),
    url(../images/photo-1522083165195-3424ed129620.jfif);
}
.property-menu .popular-locations ul li.second .location {
  background-image:
    linear-gradient(
      to right,
      oklab(0.38 0.0761041 -0.173 / 0.6) 0%,
      oklab(0.381 0.100917 -0.144194 / 0.6) 100%
    ),
    url(../images/photo-1501594907352-04cda38ebc29.jfif);
}
.property-menu .popular-locations ul li.third .location {
  background-image:
    linear-gradient(
      to right,
      oklab(0.38 0.0761041 -0.173 / 0.6) 0%,
      oklab(0.381 0.100917 -0.144194 / 0.6) 100%
    ),
    url(../images/photo-1537996194471-e657df975ab4.jfif);
}
.property-menu .popular-locations ul li .location {
  background-position: center;
  background-size: cover;
}
.property-menu .popular-locations ul li {
  border-radius: 0.75rem;
  overflow: hidden;
  height: 5rem;
}
.property-menu .popular-locations ul li.first .location:hover {
  background-image:
    linear-gradient(to right, rgba(76, 29, 149, 0.7), rgba(88, 28, 135, 0.7)),
    url(../images/photo-1522083165195-3424ed129620.jfif);
}
.property-menu .popular-locations ul li.second .location:hover {
  background-image:
    linear-gradient(to right, rgba(76, 29, 149, 0.7), rgba(88, 28, 135, 0.7)),
    url(../images/photo-1501594907352-04cda38ebc29.jfif);
}
.property-menu .popular-locations ul li.third .location:hover {
  background-image:
    linear-gradient(to right, rgba(76, 29, 149, 0.7), rgba(88, 28, 135, 0.7)),
    url(../images/photo-1537996194471-e657df975ab4.jfif);
}
.property-menu .popular-locations ul li .location span {
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 400;
}
.property-menu .popular-locations ul li .location p {
  font-size: 0.75rem;
  line-height: 1rem;
  color: #ddd6ff;
}
.property-menu .resources .resource {
  padding: 1.25rem;
  border: 0.0625rem solid var(--light-gray);
  border-radius: 0.75rem;
  transition: all var(--transition-time);
}
.property-menu .resources a .resource .circle-design {
  display: none;
}
.property-menu .resources a.first .resource .circle-design {
  background-color: #f5f3fe;
}
.property-menu .resources a.second .resource .circle-design {
  background-color: #edfdf3;
}
.property-menu .resources a.third .resource .circle-design {
  background-color: #f9f4ff;
}
.property-menu .resources a.first:hover .resource {
  border-color: #ddd6ff;
}
.property-menu .resources a.second:hover .resource {
  border-color: #dcfce7;
}
.property-menu .resources a.third:hover .resource {
  border-color: #f3e8ff;
}
.property-menu .resources a.first:hover .resource h4 {
  color: var(--main-color);
}
.property-menu .resources a.second:hover .resource h4 {
  color: #00a63e;
}
.property-menu .resources a.third:hover .resource h4 {
  color: var(--secondary-purpl);
}
.property-menu .resources a:hover .resource span:last-child i {
  transform: translateX(0.25rem);
}
.property-menu .resources .resource div {
  margin-bottom: 0.75rem;
}
.property-menu .resources .resource h4 {
  font-size: .875rem;
  line-height: 1.25rem;
  font-weight: 600;
  transition: all var(--transition-time);
}
.property-menu .resources .resource span:last-child {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
  color: var(--main-color);
  margin-top: 0.75rem;
  transition: all var(--transition-time);
}
.property-menu .resources a.first .resource span:last-child {
  color: var(--main-color);
}
.property-menu .resources a.second .resource span:last-child {
  color: #00a63e;
}
.property-menu .resources a.third .resource span:last-child {
  color: var(--secondary-purpl);
}
.property-menu .resources .resource p {
  color: var(--secondry-color);
    font-size: .75rem;
  line-height: 1.rem;

}
.property-menu .resources a .resource span:first-child {
  background-color: var(--light-gray);
  width: 2.5rem;
  height: 2.5rem;
  transition: all var(--transition-time);
}
.property-menu .resources a .resource span:first-child i {
  color: var(--main-color);
  font-size: 1rem;
}
.property-menu .resources a.first .resource span:first-child {
  background-color: var(--light-gray);
}
.property-menu .resources a.first .resource span:first-child i {
  color: var(--main-color);
}
.property-menu .resources a.second .resource span:first-child {
  background-color: #dbfce7;
}
.property-menu .resources a.second .resource span:first-child i {
  color: #00a63e;
}
.property-menu .resources a.third .resource span:first-child {
  background-color: #f3e8ff;
}
.property-menu .resources a.third .resource span:first-child i {
  color: var(--secondary-purpl);
}

/* & end nav */

/* & start home */
.home {
  background-image:
    linear-gradient(to right, #4d179acc, #59168bcc), url(../images/hero.png);
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
}
.home h1 {
  font-size: 3rem;
  line-height: 3.75rem;
}
.home p {
  font-size: 1.25rem;
  line-height: 2.0625rem;
  max-width: 41.875rem;
}
.home .stat span:first-child {
  font-size: 1.875rem;
  line-height: 2.25rem;
}
.home .stat span:last-child {
  color: #ddd6ff;
}
.home form {
  background-color: #fff;
  border-radius: 1rem;
  max-width: 50rem;
}
.home form label {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
  color: #364153;
}
.home form select {
  cursor: pointer;
}
.home form input#location {
  padding-left: 2.5rem;
}
.home form input::placeholder {
  color: #99a1b4;
}
.home form i.fa-location-dot {
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  color: #99a1b4;
}
.home form input:focus,
.home form select:focus {
  box-shadow:
    rgb(255, 255, 255) 0px 0px 0px 2px,
    0px 0px 0px 4px oklch(0.606 0.25 292.717),
    0px 10px 15px -3px rgba(0, 0, 0, 0.1),
    0px 10px 15px -3px rgba(0, 0, 0, 0.1);
    border-color: #8e51ff;
}
.home form button {
  background: linear-gradient(
    to right,
    oklch(0.541 0.281 293.009) 0%,
    oklch(0.558 0.288 302.321) 100%
  );
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.75rem;
  padding: 1rem 2rem;
  border: none;
  border-radius: 0.5rem;
  transition: all 1s;
}
.home form button:hover {
  background: linear-gradient(
    to right,
    rgb(112, 8, 231) 0%,
    oklch(0.496 0.265 301.924) 100%
  );
}
/* & end home */

/* & start properties */
.properties {
  padding-block: var(--section-padding);
  background-color: var(--section-bg);
}
.properties .item {
  background-color: #fff;
  border-radius: 1rem;
  box-shadow:
    rgba(0, 0, 0, 0.1) 0px 10px 15px -3px,
    0 10px 15px -3px #0000001a,
    0 4px 6px -4px #0000001a;
}
.properties .item .img-holder {
  height: 16rem;
  overflow: hidden;
}
.properties .item .img-holder img {
  cursor: pointer;
  transition: all 0.3s;
}
.properties .item:hover .img-holder img {
  transform: scale(1.1);
}
.properties .item .content {
  padding: 1.25rem;
}
.properties .item .content > div {
  margin-bottom: 0.75rem !important;
}
.properties .item .content .price {
  font-size: 1.875rem;
  line-height: 2.25rem;
  color: var(--main-color);
}
.properties .item .content .price-description {
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: #6a7282;
}
.properties .item .content .spicifity {
  margin-bottom: 0.75rem;
}
.properties .item .content .spicifity span {
  font-weight: 500;
  color: var(--secondry-color);
}
.properties .item .content p.status {
  font-weight: 500;
  color: #1e2939;
}
.properties .item .content p.address {
  font-weight: 500;
  color: var(--secondry-color);
  font-weight: normal;
}
.properties .item .content .account-details span {
  font-size: 0.875rem;
  font-weight: 1.25rem;
  color: var(--secondry-color);
}

.properties .item .content .account-details .img-account-holder {
  width: 2rem;
  height: 2rem;
}
.properties .item .content .account-details button {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.25rem;
  color: var(--main-color);
  padding: 0.5rem 1rem;
  background-color: var(--light-gray);
  border-radius: 0.5rem;
  border: none;
}
.properties .item .num-photos {
  font-size: 0.875rem;
  line-height: 1.25rem;
  background-color: oklab(0 0 0 / 0.7);
  padding: 0.25rem 0.75rem;
  left: 1rem;
  bottom: 1rem;
}
.properties .item .features {
  font-size: 0.875rem;
  line-height: 1.25rem;
  padding: 0.25rem 0.75rem;
  left: 1rem;
  top: 1rem;
}
.properties .item.one .features {
  background-color: var(--main-color);
}
.properties .item.two .features {
  background-color: #00a63e;
}

.properties .item.three .features {
  background-color: #e17100;
}
.properties .item .wishlist {
  font-size: 1rem;
  background-color: oklab(0.999994 0.0000455678 0.0000200868 / 0.9);
  padding: 0.5rem 0.4rem;
  right: 1rem;
  top: 1rem;
  cursor: pointer;
  transition: all var(--transition-time);
}
.properties .item .wishlist:hover span {
  color: #fb2c36;
}
.properties .item .wishlist:hover {
  background-color: #e8e9ea;
}
.properties .item .wishlist span {
  color: var(--secondry-color);
  transition: all var(--transition-time);
}
.properties button.view-all {
  background: linear-gradient(
    to right,
    oklch(0.541 0.281 293.009) 0%,
    oklch(0.558 0.288 302.321) 100%
  );
  padding: 1rem 2rem;
  font-weight: 600;
  border: none;
  border-radius: 0.5rem;
  transition: all 1s;
}
.properties button.view-all:hover {
  background: linear-gradient(
    to right,
    oklch(0.491 0.27 292.581) 0%,
    rgb(130, 0, 219) 100%
  );
}

/* & end properties */
/* & start services */
.services {
  padding-block: var(--section-padding);
}
.services .nav-tabs {
  margin-bottom: 2rem;
}
.services .nav-tabs .nav-link {
  padding: 1rem 1.5rem;
  border-radius: 0;
  color: var(--secondry-color);
  font-weight: 600;
  border: none;
  transition: all var(--transition-time);
}
.services .nav-tabs .nav-link:hover {
  color: var(--main-color);
}
.services .nav-tabs .nav-link.active {
  background-color: #f5f3ff;
  color: var(--main-color);
}

.services .nav-tabs .nav-link::after {
  position: absolute;
  bottom: 0rem;
  left: 0;
  content: "";
  width: 0%;
  height: 1.5px;
  background-color: var(--main-color);
}
.services .nav-tabs .nav-link.active::after {
  width: 100%;
  transition: all var(--transition-time);
}

.services .nav-tabs .nav-link:hover::after {
  width: 100%;
  height: 1px;
}
.services .nav-tabs .nav-link.active:hover::after {
  height: 0.0938rem;
}

.services .tab-content h3 {
  font-size: 1.875rem;
  line-height: 2.0625rem;
}
.services .tab-content p {
  font-size: 1.125rem;
  line-height: 1.75rem;
  margin-bottom: 2rem;
  color: var(--secondry-color);
}
.services .tab-content .item {
  margin-bottom: 1.5rem;
}
.services .tab-content .item .content h4 {
  font-size: 1.25rem;
  line-height: 1.75rem;
  font-weight: 600;
  color: #101828;
}
.services .tab-content .item .content p {
  font-size: 1rem;
  line-height: 1.5rem;
  color: var(--secondry-color);
}
.services .tab-content .item span {
  padding: 0.75rem;
  border-radius: 0.5rem;
}

.services .tab-content .item span i {
  font-size: 1rem;
}
.services .tab-content #buying-tab-pane .item span {
  background-color: var(--light-gray);
}
.services .tab-content #selling-tab-pane .item span {
  background-color: #dbfce7;
}
.services .tab-content #renting-tab-pane .item span {
  background-color: #f3e8ff;
}
.services .tab-content #investing-tab-pane .item span {
  background-color: #fef9c2;
}
.services .tab-content #commercial-tab-pane .item span {
  background-color: #e0e7ff;
}
.services .tab-content #buying-tab-pane .item span i {
  color: var(--main-color);
}
.services .tab-content #selling-tab-pane .item span i {
  color: #00a63e;
}
.services .tab-content #renting-tab-pane .item span i {
  color: var(--secondary-purpl);
}
.services .tab-content #investing-tab-pane .item span i {
  color: #d08700;
}
.services .tab-content #commercial-tab-pane .item span i {
  color: #4f39f6;
}
.services .tab-content #buying-tab-pane button {
  background-color: var(--main-color);
}
.services .tab-content #buying-tab-pane button:hover {
  background-color: #7008e7;
}
.services .tab-content #selling-tab-pane button {
  background-color: #00a63e;
}
.services .tab-content #selling-tab-pane button:hover {
  background-color: #008236;
}
.services .tab-content #renting-tab-pane button {
  background-color: var(--secondary-purpl);
}
.services .tab-content #renting-tab-pane button:hover {
  background-color: #8200db;
}
.services .tab-content #investing-tab-pane button {
  background-color: #d08700;
}
.services .tab-content #investing-tab-pane button:hover {
  background-color: #a65f00;
}
.services .tab-content #commercial-tab-pane button {
  background-color: #4f39f6;
}
.services .tab-content #commercial-tab-pane button:hover {
  background-color: #432dd7;
}

.services .tab-content button {
  padding: 1rem 2rem;
  background-color: var(--secondary-purpl);
  border-radius: 0.5rem;
  border: none;
  font-weight: 600;
  transition: all var(--transition-time);
}
.services .tab-content .img-holder {
  height: 23.75rem;
}
.services .tab-content .img-holder img {
  border-radius: 1rem;
}
.services .tab-content .img-holder .stat {
  background: #fff;
  box-shadow:
    rgba(0, 0, 0, 0.1) 0px 10px 15px -3px,
    rgba(0, 0, 0, 0.1) 0px 4px 6px -4px;
  padding: 1.5rem;
  border-radius: 0.5rem;
}
.services .tab-content .tab-pane:nth-child(odd) .img-holder .stat {
  left: -4%;
  bottom: -6%;
}
.services .tab-content .tab-pane:nth-child(even) .img-holder .stat {
  right: -5%;
  bottom: -6%;
}
.services .tab-content .img-holder .stat span:first-child {
  font-size: 1.5rem;
  line-height: 2rem;
}
.services .tab-content #buying-tab-pane .img-holder .stat span:first-child {
  color: var(--main-color);
}
.services .tab-content #selling-tab-pane .img-holder .stat span:first-child {
  color: #00a63e;
}
.services .tab-content #renting-tab-pane .img-holder .stat span:first-child {
  color: var(--main-color);
}
.services .tab-content #investing-tab-pane .img-holder .stat span:first-child {
  color: #d08700;
}
.services .tab-content #commercial-tab-pane .img-holder .stat span:first-child {
  color: #4f39f6;
}

.services .tab-content .img-holder .stat span:last-child {
  color: var(--secondry-color);
}
/* & end services */

/* & start testmonials */
.testmonials {
  background-image: linear-gradient(
    to right,
    oklch(0.38 0.189 293.745) 0%,
    oklch(0.381 0.176 304.987) 100%
  );
  padding-block: var(--section-padding);
  overflow: hidden;
}
.testmonials .section-head span {
  background-color: #faf5ff;
  border: 0.1rem solid #ddd6ff;
}
.testmonials .section-head span::after {
  background: linear-gradient(
    to right,
    rgba(0, 0, 0, 0) 0%,
    oklch(0.828 0.189 84.429) 50%,
    oklch(0.769 0.188 70.08) 100%
  );
}
.testmonials .section-head span::before {
  background-image: linear-gradient(
    to left,
    rgba(0, 0, 0, 0) 0%,
    oklch(0.74 0.238 322.16) 50%,
    oklch(0.769 0.188 70.08) 100%
  );
}
.testmonials .section-head h2 {
  color: #fff;
}
.testmonials .section-head p {
  color: #ddd6ff;
}
.carousel-control-prev,
.carousel-control-next {
  top: 50%;
  transform: translateY(-50%);
  background-color: rgba(255, 255, 255, 0.5);
  width: 3rem;
  height: 3rem;
}
.testmonials .carousel .carousel-indicators button {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: #cbd5e1;
}
.testmonials .carousel .carousel-item >div{
  padding: 2rem;
  border-radius: 1rem;
}
.testmonials .carousel .carousel-item .rate i {
  color: #ffb900;
}
.testmonials .carousel .carousel-item .message {
  color: #364153;
  font-size: 1.25rem;
  line-height: 2.0625rem;
}

.testmonials .carousel .carousel-item .img-holder {
  width: 4rem;
  height: 4rem;
}
.testmonials .carousel .carousel-item .info h3 {
  font-size: 1.125rem;
  line-height: 1.75rem;
}
.testmonials .carousel .carousel-item .info p {
  color: var(--secondry-color);
  font-size: 1rem;
  line-height: 1.5rem;
}
.testmonials .carousel .carousel-item .info p:last-child {
  color: #6a7282;
  font-size: 0.875rem;
  line-height: 1.25rem;
}
/* & end testmonials */

/* & start faq */

.faq {
  padding-block: var(--section-padding);
  background-color: var(--section-bg);
}
.faq .section-head h2 {
  background-image: linear-gradient(
    to right,
    oklch(0.541 0.281 293.009) 0%,
    oklch(0.491 0.27 292.581) 50%,
    oklch(0.558 0.288 302.321) 100%
  );
}
.faq .accordion {
  max-width: 876px;
  margin: auto;
}
.faq .accordion .accordion-item {
  box-shadow:
    0 10px 15px -3px #0000001a,
    0 4px 6px -4px #0000001a;
  border: 1px solid transparent;
  border-radius: 1rem;
  overflow: hidden;
}
.faq .accordion .accordion-item .accordion-header button {
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.75rem;
  color: #101828;
  padding: 1.5rem 2rem;
  transition: background-color var(--transition-time);
}
.faq .accordion .accordion-item .accordion-header button:hover {
  background-color: #fbf9fa;
}

.accordion-button:focus {
  box-shadow: none;
}
.accordion-button:not(.collapsed) {
  background: #fff;
}
.accordion-body {
  color: var(--secondry-color);
  padding: 1.5rem 2rem;
}

/* & end faq */

/* & start contact */
.contact {
  padding-block: var(--section-padding);
}
.contact .header .item {
  border: 0.1rem solid oklch(0.967 0.003 264.542);
  transition: all var(--transition-time);
}
.contact .header .item:hover {
  transform: translateY(-4%);
}
.contact .header .item.phone:hover {
  border-color: var(--main-color);
}
.contact .header .item.email:hover {
  border-color: #dab2ff;
}
.contact .header .item.location:hover {
  border-color: #f4a8ff;
}
.contact .header .item.live-chat:hover {
  border-color: #a3b3ff;
}
.contact .header .item h3 {
  line-height: 1.75rem;
  font-size: 1.125rem;
}
.contact .header .item p {
  color: var(--secondry-color);
  line-height: 1.25rem;
  font-size: 0.875rem;
}
.contact .header .item a {
  font-weight: 600;
}
.contact .header .item:hover span {
  transform: scale(1.1);
}
.contact .header .item:hover {
  border-color: var(--main-color);
  transform: translateY(-4%);
}
.contact .header .item span {
  width: 4rem;
  height: 4rem;
  color: #fff;
  background-color: #7008e7;
  font-size: 1.5rem;
  transition: all var(--transition-time);
}
.contact .header .item.phone span {
  background: linear-gradient(
    to right bottom,
    oklch(0.606 0.25 292.717) 0%,
    oklch(0.541 0.281 293.009) 100%
  );
}
.contact .header .item.phone span ~ a {
  color: var(--main-color);
}
.contact .header .item.email span {
  background: linear-gradient(
    to right bottom,
    oklch(0.627 0.265 303.9) 0%,
    oklch(0.558 0.288 302.321) 100%
  );
}
.contact .header .item.email span ~ a {
  color: var(--secondary-purpl);
}

.contact .header .item.location span {
  background: linear-gradient(
    to right bottom,
    oklch(0.667 0.295 322.15) 0%,
    oklch(0.769 0.188 70.08) 100%
  );
}
.contact .header .item.location span ~ a {
  color: #e60076;
}

.contact .header .item.live-chat span {
  background: linear-gradient(
    to right bottom,
    oklch(0.585 0.233 277.117) 0%,
    oklch(0.511 0.262 276.966) 100%
  );
}
.contact .header .item.live-chat span ~ a {
  color: #4f39f6;
}
.contact .contact-info {
  background-color: #f6f7f9;
  padding: 2rem;
}
.contact .contact-info .item {
  margin-bottom: 1.25rem;
}
.contact .contact-info h3 {
  font-size: 1.5rem;
  line-height: 2rem;
}
.contact .contact-info span {
  background-color: #ffffff;
  width: 50px;
  height: 48px;
  border-radius: 0.75rem;
}
.contact .contact-info .info h4 {
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.5rem;
  margin-bottom: 0.25rem;
}
.contact .contact-info .info p,
.contact .contact-info .info a {
  color: var(--secondry-color);
  max-width: 11.25rem;
  font-size: 0.875rem;
  line-height: 1.25rem;
}
.contact .contact-info span.location {
  color: var(--main-color);
}
.contact .contact-info span.phone {
  color: var(--secondary-purpl);
}
.contact .contact-info span.email {
  color: #e60076;
}
.contact .contact-info span.clock {
  color: #4f39f6;
}
.contact .contact-links {
  padding: 2rem;
  background: linear-gradient(
    to right bottom,
    oklch(0.541 0.281 293.009) 0%,
    oklch(0.558 0.288 302.321) 100%
  );
  border-radius: 1rem;
}
.contact .contact-links li {
  background-color: oklab(0.999994 0.0000455678 0.0000200868 / 0.2);
  width: 48px;
  height: 48px;
  backdrop-filter: blur(0.5rem);
  font-size: 1.25rem;
  transition: all var(--transition-time);
  border-radius: 0.75rem;
}
.contact .contact-links li:hover {
  transform: scale(1.125);
  background-color: #b25dfc;
}
.contact .contact-links h3 {
  font-size: 1.25rem;
  line-height: 1.75rem;
}
.contact .contact-links p {
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: var(--light-gray);
}
.contact form {
  border: 0.125rem solid #f6f3f4;
  padding: 2.5rem;
  border-radius: 1rem;
}
.contact form h3 {
  font-size: 1.875rem;
  line-height: 2.25rem;
  margin-bottom: 0.75rem;
}
.contact form p {
  color: var(--secondry-color);
  margin-bottom: 2rem;
}

.contact form input.form-control,
.contact form textarea.form-control,
.contact form select {
  padding: 0.75rem 1rem;
  background-color: #fbf9fa;
  border: 0.0625rem solid #ebe6e7;
  border-radius: 0.75rem;
}
.contact form input.form-control:focus,
.contact form textarea.form-control:focus,
.contact form select:focus {
  box-shadow:
    0px 0px 0px 2px rgb(255, 255, 255),
    0px 0px 0px 4px oklch(0.606 0.25 292.717),
    0px 10px 15px -3px rgba(0, 0, 0, 0.1);
      border-color:  #8e51ff;

}
.contact form input.form-control::placeholder,
.contact form textarea.form-control::placeholder {
  color: #7d7c7d;
}
.contact form textarea.form-control {
  resize: none;
}
.contact form label {
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: #364153;
  font-weight: 600;
}
.contact form label span {
  color: #fb2c36;
}
.contact form .form-check {
  background-color: #f5f3ff;
  cursor: pointer;
  border-radius: 0.75rem;
}
.contact form .form-check [type="checkbox"] {
  width: 20px;
  height: 20px;
 accent-color: var(--main-color);
}
.contact form .form-check label {
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: #364153;
  font-weight: 400;
  cursor: pointer;
}
.contact form button {
  padding: 1rem 2rem;
  background: linear-gradient(
    to right,
    oklch(0.541 0.281 293.009) 0%,
    oklch(0.558 0.288 302.321) 100%
  );
  border-radius: 0.75rem;
  border: none;
  transition: all var(--transition-time);
}
.contact form button:hover {
  transform: translateY(-8%);
}
.contact form p:last-child {
  font-size: 0.875rem;
  line-height: 1.25rem;
  color: #6a7282;
}
.circle {
  background-color: #f5f3fe;
  width: 300px;
  height: 300px;
  border: 1px solid transparent;
  border-radius: 50%;
  z-index: -2;

}
.circle.top {
  top: -100px;
  right: -100px;
}
.circle.bottom {
  bottom: -100px;
  left: -100px;
}
.holo-circle {
  background-color: transparent;
  width: 130px;
  height: 130px;
  border: 5px solid #ddd6ff;
  border-radius: 50%;
  z-index: -1;

}
.holo-circle.top {
  top: 90px;
  right: 70px;
}
.holo-circle.bottom {
  bottom: 70px;
  left: 90px;
}
/* & end contact */

/* & start footer */
footer {
  background: linear-gradient(
    to right,
    oklch(0.38 0.189 293.745) 0%,
    oklch(0.381 0.176 304.987) 100%
  );
}
footer .links {
  color: #fff;
}
footer .links h2 {
  font-size: 1.5rem;
  line-height: 2rem;
}
footer .links p {
  color: #ddd6ff;
}
footer .links li {
  width: 2.5rem;
  height: 2.5rem;
  background-color: oklab(0.999994 0.0000455678 0.0000200868 / 0.1);
  transition: all var(--transition-time);
}
footer .links li:hover {
  background-color: var(--main-color);
  transform: scale(1.1);
}
footer .links li a i {
  font-size: 1rem;
}
footer .message {
  border-top: 0.0625rem solid oklab(0.999994 0.0000455678 0.0000200868 / 0.1);
}
footer .message p {
  color: #c4b4ff;
  font-size: 0.875rem;
  line-height: 1.25rem;
}
/* & end footer */