/* Base CSS */
@import url("https://fonts.cdnfonts.com/css/satoshi");
@import url(https://db.onlinewebfonts.com/c/84522f3271f4b7de4a04b4a57cf507e6?family=F21+Cent+Condensed);
@import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");

* {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}

a:focus {
   outline: 0 solid;
}

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

h1,
h2,
h3,
h4,
h5,
h6 {
   margin: 0;
   color: #242424;
}

body {
   font-weight: 400;
   font-family: "F21 Cent Condensed";
   margin: 0;
   background-color: #f7f5f1;
}

li {
   list-style: none;
}

a {
   text-decoration: none;
}

ul {
   margin: 0;
   padding: 0;
}

p {
   color: #667085;
   font-family: "Inter", sans-serif;
}

a:hover {
   text-decoration: none;
}

a,
button,
input,
textarea {
   outline: none !important;
   transition: all 0.3s ease-in-out;
   font-family: "Inter", sans-serif;
}

.main__area {
   overflow: hidden;
}

/* ----------------------------- HEADER AREA START ------------------------ */
.header__area {
   left: 0;
   right: 0;
   top: 24px;
   z-index: 333;
}

.header__inner__block {
   box-shadow: 0px 4px 4px 0px #00000005;
   background-color: #fff;
   border-radius: 100px;
   padding: 12px 12px 12px 32px;
}

.main__menu ul li a {
   font-weight: 500;
   font-size: 16px;
   line-height: 20px;
   color: #000000b2;
}

.main__menu ul {
   gap: 44px;
}

.header__btn a {
   font-size: 18px;
   font-weight: 500;
   color: #ffffff;
   background-color: #1a443d;
   padding: 21px 49px;
   border-radius: 100px;
   line-height: 1;
   display: inline-block;
}

.header__btn a:hover {
   background-color: #1e98f3;
   color: #fff;
}

.main__menu ul li a:hover {
   color: #1e98f3;
}

.offcanvas__menu ul li {
   padding: 5px 0;
   border-bottom: 1px solid #1a443d;
}

.offcanvas__menu ul li a {
   padding: 5px 0;
   display: block;
   color: #1a443d;
}

.offcanvas__menu ul li a:hover {
   color: #d1ea34;
   padding-left: 5px;
}
/* ----------------------------- HEADER AREA START ------------------------ */

/* ----------------------------- HERO AREA START ------------------------ */

.hero__area {
   padding-top: 248px;
   padding-bottom: 142px;
}

.hero__right__thumb {
   max-width: 1292px;
   top: -15px;
   right: 0;
}

.hero__content h1 {
   margin-top: 20px;
   font-size: 74px;
   line-height: 100%;
   letter-spacing: -2%;
   margin-bottom: 36px;
   background: linear-gradient(to right, #101828 30%, #326f4e 100%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
}

.hero__content p {
   font-size: 18px;
   color: #667085;
   line-height: 22px;
   margin: 0;
}

.hero__content {
   margin-bottom: 40px;
   max-width: 520px;
}

.common__btn {
   box-shadow: 0px 4px 7.3px 0px #0000000a;
   border: 1px solid #d1ea34;
   border-radius: 40px;
   background-color: #fff;
   padding: 5px 6px 5px 12px;
   color: #1a443d;
   font-size: 16px;
   font-weight: 500;
   line-height: 20px;
   display: flex;
   align-items: center;
   justify-content: space-between;
}

.common__btn span {
   background-color: #d1ea34;
   font-size: 12px;
   padding: 3px 8px;
   border-radius: 50px;
   box-shadow: 0px 4px 4px 0px #00000014;
   margin-left: 12px;
   display: flex;
   justify-content: center;
   align-items: center;
   transition: all 0.3s ease-in-out;
}

.common__btn:hover {
   border-color: #1a443d;
}

.common__btn:hover span {
   background-color: #1a443d;
   color: #fff;
}

.hero__form__field {
   gap: 20px;
}

.hero__form__field input {
   border: 1px solid #d1ea34;
   background-color: #fff;
   border-radius: 60px;
   padding: 17px 24px;
   color: #868c98;
   font-size: 16px;
   max-width: 365px;
   width: 100%;
   font-family: "Satoshi", sans-serif;
}

.mail__btn {
   color: #fff;
   font-size: 18px;
   font-weight: 500;
   border: 0;
   background-color: #1a443d;
   padding: 21px 35px;
   line-height: 1;
   border-radius: 60px;
}

.mail__btn:hover {
   background-color: #1e98f3;
   color: #fff;
}

::placeholder {
   color: #868c98;
   opacity: 1;
}

/* ----------------------------- HERO AREA END ------------------------ */

/* ----------------------------- ABOUT AREA START ------------------------ */
.about__area {
   z-index: 1;
   padding-bottom: 150px;
}

.common__title h2 {
   margin-bottom: 20px;
   font-size: 60px;
}

.common__title p {
   font-size: 18px;
   line-height: 22px;
   margin: 0;
}

/*------- Bootstrap Navs Tabs -------*/
.tabs__menu {
   margin-top: 32px;
   margin-bottom: 44px;
}

.tabs__menu .nav-pills {
   border: 1px solid #f1f1f1;
   border-radius: 100px;
   padding: 6px;
   max-width: 526px;
   background-color: #fff;
   width: 100%;
   display: flex;
   justify-content: space-between;
}

.tabs__menu .nav-pills .nav-link {
   border-radius: 100px;
   font-size: 16px;
   font-weight: 500;
   letter-spacing: -2%;
   color: #707070;
   padding: 8px 25px;
}

.tabs__menu .nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
   color: #fff;
   background-color: #1a443d;
}

.about__thumb {
   height: 100%;
}
.about__thumb img {
   border-radius: 28px;
   height: 100%;
   width: 100%;
   object-fit: cover;
}

.about__wrapper .row {
   --bs-gutter-x: 20px;
   --bs-gutter-y: 20px;
}

/*------- Bootstrap Accordion -------*/
.about__accordion .accordion-item {
   border-radius: 16px;
   margin-bottom: 16px;
}

.about__accordion .accordion-button {
   background: transparent;
   font-size: 22px;
   color: #242424;
   font-weight: 400;
   letter-spacing: -1%;
   line-height: 26px;
   padding: 21px 21px;
   font-family: "F21 Cent Condensed";
   transition: all 0.3s ease-in;
}

.about__accordion .accordion-button:not(.collapsed) {
   margin-bottom: 12px;
   padding-bottom: 0;
}

.about__accordion .accordion-body {
   padding-top: 0;
   padding-bottom: 20px;
}

.accordion__content p {
   margin: 0;
   font-size: 15px;
   color: #656565;
   line-height: 24px;
   letter-spacing: 2%;
   font-weight: 400;
   text-align: left;
}

.accordion__content {
   margin-top: 12px;
}

.accordion__progress .progress-bar {
   background-color: #40635e;
   width: 36%;
   border-radius: 8px;
}

.accordion__progress {
   background-color: #1a443d29;
   height: 8px;
}

.about__accordion__filed {
   max-width: 602px;
}

/* ----------------------------- ABOUT AREA END ------------------------ */

/* ----------------------------- INTEGRATION  AREA START ------------------------ */
.integration__area {
   padding-bottom: 148px;
}

.integration__inner__block .row {
   --bs-gutter-x: 0;
   --bs-gutter-y: 30px;
}

.secondary__btn {
   padding: 5px 16px;
   margin-bottom: 20px;
}

.integration__inner__block .common__title {
   max-width: 670px;
}

.integration__inner__block .common__title h2 {
   margin-bottom: 36px;
}

/* ----------------------------- INTEGRATION  AREA END ------------------------ */

/* ----------------------------- DISCOVER  AREA START ------------------------ */
.discover__area {
   padding-bottom: 120px;
}

.discover__inner__block .common__title {
   margin-bottom: 48px;
}

.discover__card {
   padding: 28px;
   background-color: #fff;
   box-shadow: 0px 4px 4px 0px #00000003;
   border-radius: 16px;
}

.discover__wrapper .row {
   --bs-gutter-x: 20px;
   --bs-gutter-y: 22px;
}

.discover__icon {
   background-color: #1a443d;
   display: flex;
   justify-content: center;
   align-items: center;
   width: 56px;
   height: 56px;
   border-radius: 14px;
   margin-bottom: 28px;
}

.discover__content h4 {
   font-size: 24px;
   line-height: 28px;
   letter-spacing: 1%;
   margin-bottom: 13px;
}

.discover__content p {
   font-size: 16px;
   line-height: 20px;
   color: ;
   margin: 0;
   letter-spacing: 2%;
}

/* ----------------------------- DISCOVER  AREA END ------------------------ */

/* ----------------------------- PRICING  AREA START ------------------------ */
.pricing__area {
   margin-bottom: 95px;
}

.pricing__inner__block .common__title {
   margin-bottom: 48px;
}

.pricing__wrapper .row {
   --bs-gutter-x: 32px;
   --bs-gutter-y: 32px;
}

.single__pricing__card {
   padding: 8px;
   border: 1px solid #f4f1f2;
   border-radius: 18px;
}

.pricing__card__right {
   background-color: #f6f8f7;
   padding: 28px 24px;
   border-radius: 10px;
   border: 1px solid #eeeeee;
}

.pricing__card__left {
   padding: 17px 16px;
   margin-right: 45px;
}

.pricing__badge {
   border: 1px solid #eae8e9;
   border-radius: 8px;
   background-color: #ffffff;
   max-width: 80px;
   height: 25px;
   display: flex;
   justify-content: center;
   align-items: center;
   color: #242424;
   font-size: 12px;
   font-weight: 500;
   font-family: "Inter", sans-serif;
   line-height: 100%;
   margin-bottom: 18px;
}

.pricing__card__left h2 {
   font-size: 30px;
   font-weight: 500;
   font-family: "Inter", sans-serif;
   margin-bottom: 12px;
}

.pricing__card__left h2 small {
   font-size: 13px;
   position: relative;
   bottom: -3px;
}

.pricing__card__left p {
   font-size: 12px;
   color: #727272;
   line-height: 14px;
   margin-bottom: 18px;
}

.pricing__btn {
   gap: 12px;
   background-color: #d1ea34;
   padding: 14px;
   border-radius: 10px;
   color: #1a443d;
   font-size: 14px;
   font-weight: 500;
   letter-spacing: -1%;
   max-width: 113px;
   line-height: 1;
   border: 1px solid transparent;
}

.pricing__btn:hover {
   background: transparent;
   border-color: #eae8e9;
   color: #242424;
}

.secondary__pricing__btn {
   background: transparent;
   color: #242424;
   border-color: #eae8e9;
}

.secondary__pricing__btn:hover {
   background-color: #d1ea34;
   color: #1a443d;
   border-color: #d1ea34;
}

.pricing__card__right h6 {
   font-size: 14px;
   line-height: 16px;
   margin-bottom: 12px;
   font-family: "Inter", sans-serif;
}

.pricing__card__right ul li {
   gap: 8px;
   font-size: 13px;
   font-weight: 400;
   color: #242424;
   font-family: "Inter", sans-serif;
   margin-bottom: 12px;
}

/* ----------------------------- PRICING  AREA END ------------------------ */

/* ----------------------------- ACCOUNT AREA START ------------------------ */

.account__inner__block {
   background-color: #fff;
   border-radius: 20px;
   box-shadow: 0px 6px 80px 0px #1a443d1a;
   padding-block: 40px;
   margin-bottom: -150px;
   position: relative;
   z-index: 222;
}

.account__inner__block .common__title h2 {
   font-size: 40px;
   margin-bottom: 14px;
}

.account__inner__block .common__title p {
   font-size: 20px;
   letter-spacing: -1%;
   margin-bottom: 25px;
   line-height: 32px;
   color: #656565;
}

.account__btn {
   padding: 15px 27px;
   color: #1a443d;
   border-radius: 10px;
   background-color: #d1ea34;
   font-size: 15px;
   font-weight: 600;
   display: inline-block;
}

.account__btn:hover {
   background-color: #1a443d;
   color: #fff;
}

/* ----------------------------- ACCOUNT AREA END ------------------------ */

/* ----------------------------- EVENTS AREA START ------------------------ */

.events__area {
   padding-block: 250px;
   background-color: #f1f0ec;
}

.events__inner__block {
   border-radius: 20px;
   background-size: cover;
   background-position: 100% 100%;
   padding: 102px 62px 0 62px;
   height: 748px;
}

.events__inner__fields {
   background-color: #fcfbf9;
   padding: 24px 45px 45px 45px;
   border-radius: 20px;
}

.event__logo {
   margin-bottom: 25px;
}

.event__logo a img {
   height: 43px;
}

.event__logo a {
   display: inline-block;
}

.event__tabs .nav-pills {
   background-color: #fff;
   padding: 12px 30px 0px 30px;
   border: 1.5px solid #e0e0e0;
   border-top-left-radius: 12px;
   border-top-right-radius: 12px;
   border-bottom: 2px solid #e3e3e3;
   display: flex;
   gap: 28px;
}

.event__tabs .nav-pills .nav-item {
   max-width: 152px;
   width: 100%;
}

.event__tabs .nav-pills .nav-link {
   background: transparent;
   color: #525866;
   display: flex;
   align-items: center;
   gap: 8px;
   font-size: 15px;
   font-weight: 500;
   padding: 0;
   padding-bottom: 18px;
   border-bottom: 4px solid transparent;
   border-radius: 0;
}

.event__tabs .nav-pills .nav-link span {
   width: 30px;
   height: 30px;
}

.event__tabs .nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
   border-color: #1a443d;
   color: #1a443d;
}

.event__tabs .nav-pills .nav-link.active,
.nav-pills .show > .nav-link span {
   filter: brightness(0) saturate(100%) invert(19%) sepia(10%) saturate(2657%)
      hue-rotate(120deg) brightness(98%) contrast(86%);
}

.event__bottom__shape {
   bottom: 0;
   left: 0;
   right: 0;
}

/* ----------------------------- EVENTS AREA END ------------------------ */

/* ----------------------------- FOOTER AREA START ------------------------ */
.footer__area {
   padding-top: 64px;
   background-color: #f9f7f3;
   padding-bottom: 48px;
}

.footger__identity a {
   display: inline-block;
}

.footger__identity {
   margin-bottom: 32px;
}

.footer__content p {
   font-size: 18px;
   margin: 0;
   line-height: 140%;
   color: #475467;
}

.footer__inner__block > .row {
   --bs-gutter-x: 100px;
   --bs-gutter-y: 35px;
}

.footer__bottom__block {
   margin-top: 60px;
   padding-top: 32px;
   border-top: 1px solid #eaecf0;
}

.footer__right__list__area {
   max-width: 765px;
   margin-left: auto;
}

.footer__widget h4 {
   font-size: 14px;
   line-height: 18px;
   font-weight: 600;
   font-family: "Inter", sans-serif;
   color: #667085;
   margin-bottom: 16px;
}

.footer__widget ul li a {
   color: #475467;
   font-family: "Inter", sans-serif;
   font-weight: 600;
   font-size: 16px;
   line-height: 24px;
}

.footer__widget ul li {
   margin-bottom: 12px;
}

.footer__widget ul li a:hover {
   color: #1e98f3;
}

.footer__social__icons a {
   font-size: 24px;
   color: #98a2b3;
}

.footer__social__icons a:hover {
   color: #1e98f3;
}

.footer__social__icons {
   display: flex;
   align-items: center;
   gap: 24px;
   padding-right: 10px;
}

.copyright__text p {
   font-size: 16px;
   line-height: 16px;
   margin: 0;
}

.copyright__text p b {
   color: #1a443d;
}

.footer__right__list__area .row {
   --bs-gutter-x: 32px;
   --bs-gutter-y: 32px;
}

.footer__right__list__area .row {
   --bs-gutter-x: 22px;
}

/* ------------------------------ FOOTER AREA END ------------------------ */