html, body {
  overflow-x: hidden;
}

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

:root {
  --body-dark: #2B2B2B;
  --first: #003187;
  --second: #F4F7FF;
  --third: #1946DA; 
  --fourth: #dee4f0;
  --fifth: #1db5ca;
  --sixth: rgb(250, 250, 250);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

@font-face {
  font-family: 'Public Sans';
  src: url('../fonts/PublicSans-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900; /* variable range */
  font-style: normal;
  font-display: swap;
}

body {
  margin: 0;
  background-color: var(--bg-body);
  font-family: 'Public Sans', sans-serif;
}

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

.bg-first   { background-color: var(--first) !important; }
.bg-second  { background-color: var(--second) !important; }
.bg-third   { background-color: var(--third) !important; }
.bg-fourth  { background-color: var(--fourth) !important; }
.bg-fifth  { background-color: var(--fifth) !important; }
.bg-sixth  { background-color: var(--sixth) !important; }
.body-dark  { background-color: var(--body-dark) !important; }

.bg-gradient-first {
  background-color: linear-gradient(#7BA1CD, #1946DA);
}

.text-first   { color: var(--first) !important; }
.text-second  { color: var(--second) !important; }
.text-third   { color: var(--third) !important; }
.text-fourth  { color: var(--fourth) !important; }

.border-first   { border-color: var(--first) !important; }
.border-second  { border-color: var(--second) !important; }
.border-third   { border-color: var(--third) !important; }
.border-fourth  { border-color: var(--fourth) !important; }

.border-top-1 { border-top-width: 1px !important; }
.border-top-2 { border-top-width: 2px !important; }
.border-top-3 { border-top-width: 3px !important; }
.border-top-4 { border-top-width: 4px !important; }
.border-top-5 { border-top-width: 5px !important; }

.border-bottom-1 { border-bottom-width: 1px !important; }
.border-bottom-2 { border-bottom-width: 2px !important; }
.border-bottom-3 { border-bottom-width: 3px !important; }
.border-bottom-4 { border-bottom-width: 4px !important; }
.border-bottom-5 { border-bottom-width: 5px !important; }

.border-start-1 { border-left-width: 1px !important; }
.border-start-2 { border-left-width: 2px !important; }
.border-start-3 { border-left-width: 3px !important; }
.border-start-4 { border-left-width: 4px !important; }
.border-start-5 { border-left-width: 5px !important; }

.border-end-1 { border-right-width: 1px !important; }
.border-end-2 { border-right-width: 2px !important; }
.border-end-3 { border-right-width: 3px !important; }
.border-end-4 { border-right-width: 4px !important; }
.border-end-5 { border-right-width: 5px !important; }

.btn-first {
  background-color: var(--first);
  color: var(--fourth);
  border: 2px solid var(--first);
}
.btn-first:hover {
  background-color: transparent;
  color: var(--first);
  border: 2px solid var(--first);
}

.btn-second {
  background-color: var(--second);
  color: var(--fourth);
  border: 2px solid var(--second);
}
.btn-second:hover {
  background-color: transparent;
  color: var(--second);
  border: 2px solid var(--second);
}

.btn-third {
  background-color: var(--third);
  color: var(--fourth);
  border: 2px solid var(--third);
}
.btn-third:hover {
  background-color: transparent;
  color: var(--third);
  border: 2px solid var(--third);
}

.btn-fourth {
  background-color: var(--fourth);
  color: var(--third);
  border: 2px solid var(--fourth);
}
.btn-fourth:hover {
  background-color: transparent;
  color: var(--fourth);
  border: 2px solid var(--fourth);
}

.btn-outline-first {
  background-color: transparent;
  color: var(--first);
  border: 2px solid var(--first);
  transition: all 0.3s ease;
}
.btn-outline-first:hover {
  background-color: var(--first);
  color: var(--fourth);
}

.btn-outline-second {
  background-color: transparent;
  color: var(--second);
  border: 2px solid var(--second);
  transition: all 0.3s ease;
}
.btn-outline-second:hover {
  background-color: var(--second);
  color: var(--fourth);
}

.btn-outline-third {
  background-color: transparent;
  color: var(--third);
  border: 2px solid var(--third);
  transition: all 0.3s ease;
}
.btn-outline-third:hover {
  background-color: var(--third);
  color: var(--fourth);
}

.btn-outline-fourth {
  background-color: transparent;
  color: var(--fourth);
  border: 2px solid var(--fourth);
  transition: all 0.3s ease;
}
.btn-outline-fourth:hover {
  background-color: var(--fourth);
  color: var(--third);
}

.p-50 { padding: 50px; }
.p-100 { padding: 100px; }
.p-150 { padding: 150px; }
.p-200 { padding: 200px; }

@media (min-width: 768px) {
  .p-md-100 {
      padding: 100px;
  }
}

.pt-50   { padding-top: 50px; }
.pt-100  { padding-top: 100px; }
.pt-150  { padding-top: 150px; }

.pb-50   { padding-bottom: 50px; }
.pb-100  { padding-bottom: 100px; }
.pb-150  { padding-bottom: 150px; }

.pl-50   { padding-left: 50px; }
.pl-100  { padding-left: 100px; }

.pr-50   { padding-right: 50px; }
.pr-100  { padding-right: 100px; }

.mt-50   { margin-top: 50px; }
.mt-100  { margin-top: 100px; }
.mt-150  { margin-top: 150px; }

@media (min-width: 768px) {
  .mt-md-100 {
      margin-top: 100px !important;
  }
}

.mb-50   { margin-bottom: 50px; }
.mb-100  { margin-bottom: 100px; }
.mb-150  { margin-bottom: 150px; }

.ml-50   { margin-left: 50px; }
.ml-100  { margin-left: 100px; }

.mr-50   { margin-right: 50px; }
.mr-100  { margin-right: 100px; }

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

.px-50   { padding-left: 50px; padding-right: 50px; }
.px-100  { padding-left: 100px; padding-right: 100px; }

.my-50   { margin-top: 50px; margin-bottom: 50px; }
.my-100  { margin-top: 100px; margin-bottom: 100px; }

.mx-50   { margin-left: 50px; margin-right: 50px; }
.mx-100  { margin-left: 100px; margin-right: 100px; }

.mt-n1 { margin-top: -0.25rem !important; }
.mt-n2 { margin-top: -0.5rem !important; }
.mt-n3 { margin-top: -1rem !important; }
.mt-n4 { margin-top: -1.5rem !important; }
.mt-n5 { margin-top: -3rem !important; }

.cus-mt-n50 {
  margin-top: -50px;
}

.cus-mt-n100 {
  margin-top: -100px;
}

.cus-mt-n150 {
  margin-top: -150px;
}

.cus-mt-n200 {
  margin-top: -200px;
}

.cus-mt-n250 {
  margin-top: -250px;
}

.max-w-100  { max-width: 100px; }
.max-w-150  { max-width: 150px; }
.max-w-200  { max-width: 200px; }
.max-w-250  { max-width: 250px; }
.max-w-300  { max-width: 300px; }
.max-w-400  { max-width: 400px; }
.max-w-500  { max-width: 500px; }
.max-w-600  { max-width: 600px; }
.max-w-700  { max-width: 700px; }
.max-w-800  { max-width: 800px; }
.max-w-900  { max-width: 900px; }
.max-w-1000 { max-width: 1000px; }
.max-w-1100 { max-width: 1100px; }
.max-w-1200 { max-width: 1200px; }
.max-w-1300 { max-width: 1300px; }
.max-w-1400 { max-width: 1400px; }

.max-h-100  { max-height: 100px; }
.max-h-150  { max-height: 150px; }
.max-h-200  { max-height: 200px; }
.max-h-250  { max-height: 250px; }
.max-h-300  { max-height: 300px; }
.max-h-400  { max-height: 400px; }
.max-h-500  { max-height: 500px; }
.max-h-600  { max-height: 600px; }
.max-h-700  { max-height: 700px; }
.max-h-800  { max-height: 800px; }
.max-h-900  { max-height: 900px; }
.max-h-1000 { max-height: 1000px; }

.min-h-100  { min-height: 100px; }
.min-h-150  { min-height: 150px; }
.min-h-200  { min-height: 200px; }
.min-h-250  { min-height: 250px; }
.min-h-300  { min-height: 300px; }
.min-h-400  { min-height: 400px; }
.min-h-500  { min-height: 500px; }
.min-h-600  { min-height: 600px; }
.min-h-700  { min-height: 700px; }
.min-h-800  { min-height: 800px; }
.min-h-900  { min-height: 900px; }
.min-h-1000 { min-height: 1000px; }

.w-150 {
    width: 150px !important;
}

.w-200 {
    width: 200px !important;
}

.w-250 {
    width: 250px !important;
}

.w-300 {
    width: 300px !important;
}

.w-350 {
    width: 350px !important;
}

.h-150 {
    height: 150px !important;
}

.h-200 {
    height: 200px !important;
}

.h-250 {
    height: 250px !important;
}

.h-300 {
    height: 300px !important;
}

.h-350 {
    height: 350px !important;
}

.fs-70 { font-size: 70px; }
.fs-60 { font-size: 60px; }
.fs-54 { font-size: 54px; }
.fs-50 { font-size: 50px; }
.fs-42 { font-size: 42px; }
.fs-40 { font-size: 40px; }
.fs-36 { font-size: 36px; }
.fs-32 { font-size: 32px; }
.fs-26 { font-size: 26px; }
.fs-24 { font-size: 24px; }
.fs-20 { font-size: 20px; }
.fs-16 { font-size: 16px; }

.shadow-first {
    box-shadow: 0 4px 6px rgba(0, 49, 135, 0.3),
                0 1px 3px rgba(0, 49, 135, 0.2);
}

.container-narrow { max-width: 720px; margin: 0 auto; }
.container-medium { max-width: 960px; margin: 0 auto; }
.container-wide   { max-width: 1200px; margin: 0 auto; }

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

.banner-content {
  position: relative;
  z-index: 2;
}

.banner-content .left-img,
.banner-content .right-img {
  position: absolute;
  bottom: -10%;
  z-index: 1;
}

@media (max-width: 1024px) {
  .banner-content .left-img,
  .banner-content .right-img {
    display: none;
  }
}

.banner-content .left-img {
  left: 0%;
  animation: object1 5s infinite alternate;
}

.banner-content .right-img {
  right: 0%;
  animation: object1 5s infinite alternate;
}

.banner-content img {
  width: 280px;
  display: block;
}

.banner-content > .z-3,
.banner-content h2,
.banner-content p,
.banner-content .btn {
  position: relative;
  z-index: 3;
}


@keyframes object1 {
  0% {
    transform: rotate(45deg) scale(1);
  }
  100% {
    transform: rotate(0) scale(1.15);
  }
}

.obj3 {
  position: relative;
  z-index: 2;
}

.obj3 img {
  position: absolute;
  right: 0%;
  bottom: 0%;
  z-index: 1;
}

#headingCarousel {
  min-height: 168px;
}

.icon-box {
  width: 64px;
  height: 64px;
  border: 1px solid var(--third);
  border-radius: 16px;
  padding: 15px;
  display: flex;
  align-items: center;
  justify-items: center;
}

.icon-box img {
  width: 100%;
  filter: drop-shadow(0 0 0 var(--third));
}

.rotate-img {
  width: 100%;
  animation: rotate 15s ease-in-out infinite alternate;
}

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

.up-down {
  width: 100%;animation: updown 15s ease-in-out infinite alternate;
}

@keyframes updown {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(70px);
  }
}

.bg-about {
  background: url(../images/about/2.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: bottom center;
  padding: 50px;
  border-radius: 25px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  gap: 20px;
}

@media (max-width: 768px) {
  .bg-about {
    flex-direction: column;
    text-align: center;
    padding: 30px;
    background-position: center center;
  }

  .bg-about > * {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .bg-about {
    padding: 20px;
    border-radius: 15px;
  }
}

.bg-about1 {
  background: url(../images/about/3.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top center;
  padding: 100px 50px;
  border-radius: 25px;
}

.bg-services {
  background: url(../images/services/1.png);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: bottom center;
  padding: 50px;
  border-radius: 25px;
  display: flex;
  justify-content: space-between;
  align-items: end;
  width: 100%;
  gap: 20px;
}

@media (max-width: 768px) {
  .bg-services {
    flex-direction: column;
    text-align: center;
    padding: 30px;
    background-position: center center;
  }

  .bg-services > * {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .bg-services {
    padding: 20px;
    border-radius: 15px;
  }
}

.bg-contact {
  background: url(../images/contact/1.jpg);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top center;
  padding: 100px 50px;
  border-radius: 25px;
}

.bg-transparent-1 {
  background: rgba(217, 217, 217, 0.2);
  border: 1px solid #fff;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 15px;
}

.bg-transparent-2 {
  background: rgba(217, 217, 217, 0.2);
  border: 1px solid #fff;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: 15px;
}


.bg-founder {
  background: url(../images/bg-founder.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.owl-dots {
  text-align: center;
  margin-top: 30px;
  position: relative;
  z-index: 10;
}

.owl-dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin: 5px;
  background: #fff !important;
  border-radius: 50%;
  border: 2px solid #000;
  transition: all 0.3s ease;
}

.owl-dot.active {
  background: var(--first) !important;
  border-color: var(--first);
  transform: scale(1.2);
}

.form-light ::placeholder {
  color: rgba(255, 255, 255, 0.6);
  font-size: 20px;
  font-weight: bold;
}

/* For better cross-browser support */
.form-light :-ms-input-placeholder {
  color: rgba(255, 255, 255, 0.6);
  font-size: 20px;
  font-weight: bold;
}
.form-light ::-ms-input-placeholder {
  color: rgba(255, 255, 255, 0.6);
  font-size: 20px;
  font-weight: bold;
}

.accordion-button {
    transition: all 0.3s ease;
}

.accordion-button.collapsed {
    background-color: #fff;
}

.accordion-button:not(.collapsed) {
    display: none !important;
}

.accordion-button::after {
    background-color: var(--third);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23ffffff' viewBox='0 0 16 16'%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.708L8.354 11.707a.5.5 0 0 1-.708 0L1.646 5.354a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 50% 50%;
    border: 2px solid var(--third);
    border-radius: 50%;
    width: 33px;
    height: 33px;
}

.accordion-body .btn-link {
    background: #fff;
    border: 2px solid var(--third);
    border-radius: 50%;
    width: 33px;
    height: 33px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.toast-container {
    top: auto;
    bottom: 1rem;
    right: 1rem;
    z-index: 1080;
}

.features {
  position: relative;
}

.features-image {
  position: absolute;
  right: 0;
  bottom: 0;
}

.features-image img {
  width: 500px;
}

@media (max-width: 768px) {
  .features-image {
    display: none;
  }
}