/*===================== REUSABLE  CSS AREA START =====================*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  transition: all 0.2s ease-in-out;
}

body {
  font-family: 'Poppins', sans-serif;
}

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

button,
input {
  border: none;
  outline: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
}

p {
  margin: 0;
  padding: 0;
}

a {
  text-decoration: none;
  color: #814C98;
}

.btns {
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
}

.btns:hover {
  color: #ffca00;
}

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

.title {
  text-align: center;
}

main {
  overflow: hidden !important;
}

.container,
.container-lg,
.container-md,
.container-sm,
.container-xl,
.container-xxl {
  max-width: 1300px;
  margin: 0 auto;
}
/*===================== REUSABLE CSS AREA END =====================*/

/*===================== OFFCANVAS CSS AREA START =====================*/
.menu-close {
  font-size: 18px;
  color: #fff;
  position: absolute;
  top: 20px;
  right: 18px;
  cursor: pointer;
  transition: 0.4s;
  border: 1px solid #fff;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.menu-close:hover {
  color: #000;
  background: #fff;
}

.offcanvas-area {
  position: fixed;
  left: -100%;
  height: 100%;
  width: 318px;
  background: #814C98;
  z-index: 9999;
  padding-top: 35px;
  -webkit-transition: 0.4s;
  transition: 0.4s;
  visibility: hidden;
  top: 0;
  overflow-y: scroll;
}

.offcanvas-area.active {
  left: 0;
  visibility: visible;
}

.offcanvas-area .main-menu ul li a {
  font-size: 18px;
  color: #fff;
  display: block;
  transition: 0.3s;
  padding: 16px 22px;
  border-bottom: 1px solid #fff;
  text-decoration: none;
}
.offcanvas-area .main-menu ul li a:hover {
  color: #000 !important;
  background: #fff;
}
.offcanvas-area .main-menu ul li:first-child a {
  border-top: 1px solid #fff;
}

.offcanvas-area .main-menu ul li a:hover,
.offcanvas-area .main-menu ul li a[aria-expanded="true"] {
  color: #d5d5d5;
}

.offcanvas-menu .main-menu ul {
  display: block;
  padding-left: 0;
  margin-bottom: 35px;
  list-style: none;
}

.offcanvas-overlay {
  position: fixed;
  width: 100%;
  height: 100%;
  background-color: #000;
  opacity: 0;
  visibility: hidden;
  -webkit-transition: 0.4s;
  transition: 0.4s;
  z-index: 99;
}

.offcanvas-overlay.active {
  opacity: 0.4;
  visibility: visible;
}

.offcanvas-area {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.offcanvas-area::-webkit-scrollbar {
  display: none;
}
.offcanvas-menu {
  margin-top: 100px;
}

/*===================== OFFCANVAS CSS AREA END =====================*/

/*===================== HEADER CSS AREA START =====================*/
header#header__area {
  position: relative;
  background: #fff;
}

.header__wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 0px;
}

.header__nav {
  display: flex;
  align-items: center;
  gap: 77px;
}

.header__nav ul {
  display: flex;
  align-items: center;
  gap: 58px;
}

.header__nav > ul > li > a {
  color: #313131;
  font-size: 15px;
}

.header__nav > ul > li > a:hover {
  color: #814C98;
}

.header__nav > a {
  width: 144px;
  height: 45px;
  background: #814C98;
  border-radius: 9px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  color: #fff;
}

.header__nav > a img {
  width: 14px;
}

.header__bar > a {
  color: #814C98;
  font-size: 24px;
}

/*===================== HEADER CSS AREA END =====================*/

/*===================== HERO CSS AREA START =====================*/
#hero__area {
  background-image: url('../img/hero_bg-pta-events.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  position: relative;
  padding: 101px 0px 150px;
}

.hero__content {
  max-width: 575px;
  border-radius: 29px;
  padding: 41px 44px;
  background: #fff;
  opacity: .9;
}

.hero__content span {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 3px;
  color: #313131;
}

.hero__content h1 {
  font-size: 51px;
  font-weight: 600;
  line-height: 62px;
  color: #814C98;
  margin: 30px 0px;
}

.a_btn {
  width: 140px;
  height: 45px;
  background: #814C98;
  border-radius: 9px;
  font-size: 15px;
  color: #fff;
}

/*===================== HERO CSS AREA END =====================*/

/*===================== HERO CSS AREA START =====================*/
#hero__area__raffles {
  
}

.hero__content__raffles {
  max-width: 575px;
  padding: 0px 44px;
  margin-bottom: 50px;
}

.hero__content__raffles span {
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 3px;
  color: #313131;
}

.hero__content__raffles h1 {
  font-size: 40px;
  font-weight: 600;
  line-height: 62px;
  color: #814C98;
  margin: 30px 0px;
  text-align: left;
}

.hero__content__raffles p {
  text-align: left;
}

.a_btn {
  width: 140px;
  height: 45px;
  background: #814C98;
  border-radius: 9px;
  font-size: 15px;
  color: #fff;
}

/*===================== HERO CSS AREA END =====================*/

/*===================== WHY GAME CHANGER CSS AREA START =====================*/

.why__game__changer {
  margin-left: auto;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #313131;
}

section#why__game__changer {
  background: #F3F3F6;
  padding: 40px 0px;
  margin-bottom: 79px;
  position: relative;
}

.why__game__changer__borderdown {
  position: absolute;
  bottom: 0px;
  left: 0px;
}

.why__game__changer h2 {
  font-size: 35px;
  font-weight: 600;
  margin-bottom: 29px;
  text-align: center;

}

.why__game__changer p {
  margin-bottom: 24px;
}
/*===================== WHAT CSS AREA END =====================*/

/*===================== WHY GAME CHANGER CSS AREA START =====================*/

.start__area__raffles {
  margin-left: auto;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #313131;
}

section#start__area__raffles {
  padding: 20px 0px;
  margin-bottom: 79px;
  position: relative;
}

.start__area__card__raffles {
  background-color: #67AF55;
  padding: 20px 20px;
  border-radius: 12px;
}

.start__area__raffles h2 {
  font-size: 30px;
  font-weight: 600;
  margin-bottom: 29px;
  text-align: center;
}

.start__area__raffles h3 {
  font-size: 25px;
  font-weight: 600;
  margin-bottom: 29px;
  text-align: center;
  color: #ffffff;
}

.start__area__raffles p {
  margin-bottom: 24px;
  color: #ffffff;
}
/*===================== WHY CSS AREA END =====================*/

/*===================== GUIDE AREA CHANGER CSS AREA START =====================*/

.guide__area__raffles {
  margin-left: auto;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #313131;
}

section#guide__area__raffles {
  background: #F3F3F6;
  padding: 60px 0px;
  margin-bottom: 79px;
  position: relative;
}

.guide__area__raffles h2 {
  font-size: 30px;
  font-weight: 600;
  margin-bottom: 29px;
  text-align: center;
}

.guide__area__raffles h3 {
  font-size: 25px;
  font-weight: 600;
  margin-bottom: 29px;
  text-align: center;
}

.guide__area__raffles p {
  margin-bottom: 24px;
}
/*===================== WHAT CSS AREA END =====================*/

/*===================== WHAT CSS AREA START =====================*/
.what__img {
  max-width: 526px;
}

.what__content {
  max-width: 558px;
  margin-left: auto;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  color: #313131;
}

section#what__area {
  background: #F3F3F6;
  padding: 121px 0px;
  margin-bottom: 79px;
  position: relative;
}

section#what__area__onboarding {
  margin-bottom: 79px;
  position: relative;
}

.what__borderdown {
  position: absolute;
  bottom: 0px;
  left: 0px;
}

.what__content h2 {
  font-size: 35px;
  font-weight: 600;
  margin-bottom: 29px;
}

.what__content p {
  margin-bottom: 24px;
}
/*===================== WHAT CSS AREA END =====================*/

/*===================== CLUB CSS AREA START =====================*/
.club__title {
  margin-bottom: 67px;
}

.title h2 {
  color: #313131;
  font-size: 35px;
  line-height: 41px;
  text-align: center;
}

.club__card {
  text-align: center;
}

.club__wrap, .feature__cards, .count__wrap {
  max-width: 1100px;
  margin: 0 auto;
}

.club__wrap {
  display: grid;
  grid-template-columns: repeat(4,1fr);
  column-gap: 66px;
  row-gap: 60px;
}

.club__card img {
  max-width: 218px;
}

.club__card h6 {
  font-size: 24px;
  font-weight: 600;
  color: #313131;
  margin-top: 14px;
}

section#club__area {
  margin-bottom: 97px;
}
/*===================== CLUB CSS AREA END =====================*/

/*===================== FEATURE CSS AREA START =====================*/
.feature__title {
  margin-bottom: 42px;
}

.feature__cards {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  column-gap: 39px;
  row-gap: 15px;
}

.feature__cards  img {
  width: 123px;
}

section#feature__area {
  background: #F3F3F6;
  padding: 107px 0px;
  margin-bottom: 99px;
  position: relative;
}

img.borderup {
  position: absolute;
  top: 0;
  left: 0;
}

img.borderdown {
  position: absolute;
  bottom: 0;
  left: 0;
}
/*===================== FEATURE CSS AREA END =====================*/

/*===================== WORK CSS AREA START =====================*/
.work__img {
  max-width: 526px;
  margin-left: auto;
}

.work__title.title h2 {
  text-align: left;
}

.work__title.title {
  margin-bottom: 71px;
}

.work__card img {
  width: 85px;
}

.work__card {
  display: flex;
  align-items: start;
  gap: 29px;
}

.work__card__content {
  color: #313131;
}

.work__card__content h6 {
  font-size: 24px;
  font-weight: 600;
  line-height: 41px;
}

.work__content {
  max-width: 559px;
  display: flex;
  flex-direction: column;
  gap: 31px;
}

.work__card__content p {line-height: 27px;}

.work__content > a {
  margin-top: 43px;
}

section#work__area {
  margin-bottom: 93px;
}
/*===================== WORK CSS AREA END =====================*/

/*===================== COUNT CSS AREA START =====================*/
section#count__area {
  position: relative;
  background: #F3F3F6;
  padding: 95px;
  margin-bottom: 87px;
}

.count__title.title {
  margin-bottom: 41px;
}

.count__cards {
  display: grid;
  grid-template-columns: repeat(4,1fr);
}

.count__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: #313131;
  padding: 16px 10px;
  border-left: 1px solid #C6C6C8;
}

.count__card:first-child {
  border-left: none;
}

.count__card h5 {
  font-size: 28px;
  font-weight: 600;
}

.count__card p {
  line-height: 27px;
  text-align: center;
}
/*===================== COUNT CSS AREA END =====================*/

/*===================== WORLD CSS AREA START =====================*/
.world__single__card img {
  width: 85px;
}

.world__single__card {
  display: flex;
  align-items: start;
  gap: 18px;
  max-width: 504px;
}

.world__card__content {
  color: #313131;
}

.world__card__content h6 {
  font-size: 24px;
  font-weight: 600;
  line-height: 41px;
}

.world__card__content p {
  line-height: 27px;
}

.world__card {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

.world__wrap {
  display: flex;
  flex-direction: column;
  gap: 50px;
}

.world__title {
  margin-bottom: 78px;
}

section#world__area {
  margin-bottom: 110px;
}
/*===================== WORLD CSS AREA END =====================*/

/*===================== DIFFERENCE CSS AREA START =====================*/
section#difference__area {
  position: relative;
  background: #F3F3F6;
  padding: 118px 0px;
  margin-bottom: 100px;
}

.difference__single__card {
  display: flex;
  align-items: start;
  gap: 18px;
  max-width: 500px;
}

.difference__card__content {
  color: #313131;
}

.difference__card__content h6 {
  font-size: 24px;
  font-weight: 600;
  line-height: 41px;
}

.difference__card__content p {
  line-height: 27px;
}

.difference__single__card img {
  width: 85px;
}

.difference__card {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

.difference__wrap {
  display: flex;
  flex-direction: column;
  gap: 50px;
  margin-bottom: 78px;
}

.diference__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 49px;
}

.diference__btn h3 {
  font-size: 28px;
  font-weight: 600;
}

.difference__title.title {
  margin-bottom: 65px;
}
/*===================== DIFFERENCE CSS AREA END =====================*/

/*===================== PLAN CSS AREA START =====================*/
.plan__title.title {
  margin-bottom: 72px;
}

.plan__title.title p {
  line-height: 27px;
  margin-top: 12px;
}

.plan__card__list > ul > li > img {
  width: 18px;
  margin-right: 12px;
}

.plan__card__list > ul > li {
  display: flex;
  align-items: center;
  justify-content: center;
}

.plan__card__list > ul > li span {
  font-size: 11px;
  padding-top: 2px;
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #313131;
  border-radius: 50%;
  margin-right: 12px;
}

.plan__card__list > ul {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  margin-bottom: 40px;
}

.plan__card__list > a {
  border: 1px solid #000000;
  border-radius: 9px;
  width: 243px;
  height: 45px;
  font-size: 15px;
  font-weight: 500;
  color: #000;
  margin: 0 auto 43px;
}

.plan__card {
  position: relative;
  background: #FFFFFF 0% 0% no-repeat padding-box;
  border: 1px solid #BDBEBE;
  border-radius: 15px;
  overflow: hidden;
}

.plan__card.plan__card2 > img {
  width: 91px;
  position: absolute;
  top: 0px;
  right: 0px;
}

.plan__card.plan__card2 h2 > b {
  color: #814C98;
  font-size: 26px;
  display: inline;
}

.plan__card.plan__card2 h2 {
  color: #814C98;
}

.plan__card h3 {
  padding: 16px 0;
  text-align: center;
  font-size: 46px;
  font-weight: 600;
}

.plan__card h2 {
  background: #F7F7F7;
  padding: 31px 0px;
  font-size: 83px;
  font-weight: 900;
  text-align: center;
  margin-bottom: 32px;
}

.plan__card.plan__card2 h3 {
  color: #fff;
  background: #814C98;
}

section#plan__area {
  margin-bottom: 139px;
}
/*===================== PLAN CSS AREA END =====================*/

/*===================== CHARITY CSS AREA START =====================*/
section#charity__area {
  position: relative;
  background: #F3F3F6;
  margin-bottom: 71px;
  padding: 119px 0px 129px;
}

.charity__title.title {
  margin-bottom: 84px;
}

.charity__cards {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
}

.charity__card__img {max-width: 270px;}
/*===================== CHARITY CSS AREA END =====================*/

/*===================== QUESTION CSS AREA START =====================*/
.question__wrap .accordion .accordion-item {
  margin-bottom: 9px;
}

.accordion-button {
  position: relative;
  display: flex;
  align-items: center;
  gap: 20px;
  width: 100%;
  padding: 16px 29px;
  font-size: 24px;
  font-weight: 600;
  color: #fff;
  text-align: left;
  background-color: #814C98;
  border: 0;
  border-radius: 12px !important;
  overflow-anchor: none;
  transition: var(--bs-accordion-transition);
}

.accordion-button::after {
  content: '\f067';
  font-family: "Font Awesome 5 Free";
  color: #fff;
  font-size: 18px;
  background-image: none;
}

.accordion-button:not(.collapsed)::after {
  content: '\f068';
  font-family: "Font Awesome 5 Free";
  color: #fff;
  font-size: 18px;
  background-image: none;
}

.accordion-button:focus {
  z-index: 3;
  border-color: none;
  outline: 0;
  box-shadow: none;
}

.accordion-button:not(.collapsed) {
  color: #fff;
  background-color: #814C98;
  box-shadow: none;
}

.accordion-body {
  padding: 29px;
}

.accordion__content p {
  line-height: 27px;
  margin-bottom: 25px !important;
}

.accordion__content h6 {
  font-size: 16px;
  font-weight: bold;
}

.accordion__content {
  color: #313131;
}

.accordion-item {
  border: none;
}

.question__wrap > a {margin: 24px auto 0px;}

section#question__area {
    margin-bottom: 115px;
}
/*===================== QUESTION CSS AREA END =====================*/

/*===================== BLOG-DISCOVER CSS AREA START =====================*/
section#blog__discover {
  padding-top: 200px;
}

.blog__discover__title {
  position: relative;
}

.blog__discover__title span {
  position: relative;
  color: #814c98;
  font-size: 14px;
  padding-left: 45px;
}

.blog__discover__title span:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0px;
  width: 35px;
  height: 1px;
  background: #814c98;
}

.blog__discover__title h2 {
  color: #313131;
  font-size: 51px;
  font-weight: 600;
  line-height: 61px;
  margin: 20px 0px 50px;
}

section#blog__discover {
  padding: 200px 0px 100px;
}

.blog__discover__title {
  position: relative;
}

.blog__discover__title span {
  position: relative;
  color: #814c98;
  font-size: 14px;
  padding-left: 45px;
}

.blog__discover__title span:before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0px;
  width: 35px;
  height: 1px;
  background: #814c98;
}

.blog__discover__title h2 {
  color: #313131;
  font-size: 51px;
  font-weight: 600;
  line-height: 61px;
  margin: 20px 0px 50px;
}

.blog__discover__wrap {
  padding-right: 150px;
}

.blog__discover__cards {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  align-items: start;
  gap: 50px;
}

.blog__discover__single__card > a {
  max-width: 415px;
  display: inline-block;
  margin-bottom: 20px;
}

.blog__discover__card__content h4 a {
  color: #000000;
}

.blog__discover__card__content h4 {
  margin-bottom: 15px;
}

.blog__discover__card__content p {
  color: rgba(0, 0, 0, 0.5);
  font-size: 18px;
  font-weight: 300;
  line-height: 27px;
  margin-bottom: 10px;
}

.blog__discover__card__content > a {
  color: #814c98;
  font-size: 12px;
  font-weight: 500;
}

.blog__discover__card__content {
  max-width: 480px;
}



.blog__discover__wrap .nav-pills .nav-link.active, .blog__discover__wrap .nav-pills .show>.nav-link {
  color: var(--bs-nav-pills-link-active-color);
  background-color: #29b2a1 !important;
}

.blog__filter > ul {
  border-bottom: 1px solid #000;
  padding-bottom: 8px;
}

.nav-link {
  display: block;
  padding: var(--bs-nav-link-padding-y) var(--bs-nav-link-padding-x);
  font-size: 15px;
  font-weight: var(--bs-nav-link-font-weight);
  color: #313131;
  text-decoration: none;
  transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out;
}

.blog__discover__wrap .nav-pills .nav-link:focus, .blog__discover__wrap .nav-pills .nav-link:hover {
  color: #ffffff;
  color: var(--bs-nav-pills-link-active-color);
  background-color: #29b2a1 !important;
  
}
/*===================== BLOG-DISCOVER CSS AREA END =====================*/

/*===================== BLOG-READY CSS AREA START =====================*/
section#blog__ready {
  padding: 50px 0px 100px;
}
/*===================== BLOG-READY CSS AREA END =====================*/

/*===================== FAQ-HERO CSS AREA END =====================*/
#post__hero__area {
  background-image: url('../img/faq_hero_bg.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  position: relative;
  padding: 300px 0px;
  margin-bottom: 45px;
}

.post__hero__overlay {
  height: 100%;
  width: 100%;
  top: 0px;
  left: 0px;
  position: absolute;
  background-color: transparent;
  background-image: linear-gradient(rgb(0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
  opacity: 0.8;
  transition: background 0.3s ease 0s, border-radius 0.3s ease 0s, opacity 0.3s ease 0s;
}

.post__hero__wrap {
  position: relative;
  z-index: 1;
}

.post__hero__wrap h1 {
  color: #fff;
  font-size: 43px;
  font-weight: 700;
  line-height: 43px;
  max-width: 600px;
  text-align: center;
  margin: 0 auto;
}

/*===================== FAQ-HERO CSS AREA END =====================*/

/*===================== POST-CONTENTS CSS AREA START =====================*/
.post__content__wrap {
  padding: 0px 20px;
}

.post__content__social a {
  padding: 10px;
  color: #fff;
  font-size: 17px;
  max-width: 66px;
  text-align: center;
}

.post__content__social a:hover {
  filter: saturate(1.5) brightness(1.2);
}

.post__content__social {
  display: grid;
  gap: 10px;
}

.post__content > p {
  font-size: 16px;
  font-weight: 700;
  line-height: 32px;
  color: #fff;
  background: #814c98;
  padding: 5px 5px 1px 10px;
  margin-bottom: 25px;
}

.post__content > h2 {
  font-size: 35px;
  font-weight: 600;
  color: #814c98;
  padding: 20px 0px;
  margin-bottom: 40px;
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
}

.post__content {
  padding: 0px 28px 0px 18px;
}

.post_event > h6 {
  color: #313131;
  font-size: 16px;
  font-weight: 700;
  margin-bottom: 30px;
}

.post_event p {
  line-height: 32px;
  color: #313131;
  margin-top: 20px;
}

.post_event {
  padding-bottom: 50px;
  margin-bottom: 40px;
  border-bottom: 1px solid #000;
}

.post_event p a {
  color: #c36;
}

.post_event p a:hover {
  color: #333366;
}

.post_event_b p {
  color: #000000;
  font-weight: 700;
  margin-bottom: 30px;
}

.post_event_a {
  text-align: center;
}

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

.post_event_a a {
  font-weight: 700;
  color: #c36;
}

.post_event_a a:hover {
  color: #333366;
}

.post__adds {
  display: grid;
  gap: 20px;
}

.angle__btn {
  width: 18px;
}

.post__single__btn:first-child .angle__btn {
  transform: rotate(180deg);
}

.post__btns {
  max-width: 780px;
  margin: 110px auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.post__single__btn {
  display: flex;
  align-items: center;
  gap: 18px;
}

.post__single__btn:last-child {
  flex-direction: row-reverse;
}

.post__single__btn:last-child a {
  text-align: end;
}

.post__single__btn > a {
  color: #29b2a1;
  font-size: 15px;
}

.post__single__btn > a span {
  color: #313131;
  font-size: 13px;
}
/*===================== FAQ-CONTENTS CSS AREA END =====================*/

/*===================== FAQ-ABOUT CSS AREA START =====================*/
.post__about__single__img {
  max-width: 335px;
}

.post__wrap {
  padding: 0px 40px;
}

section#post__about__area {
  background: #f3f3f6;
  margin-bottom: 30px;
  padding: 100px 0px 100px 0px;
}

.post__about__content h2 {
  color: #313131;
  font-size: 35px;
  font-weight: 600;
  line-height: 34px;
  margin-bottom: 20px;
}

.post__about__content p {
  font-weight: 300;
  color: #313131;
  line-height: 29px;
  margin-bottom: 35px;
}

.post__about__content {
  max-width: 574px;
  margin-left: 55px;
}

.post__about__content a {
  width: 200px;
  background: #e51187;
  border-radius: 10px;
  padding: 15px 40px 15px 40px;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
}
/*===================== FAQ-ABOUT CSS AREA END =====================*/

/*===================== SERVEY CSS AREA START =====================*/
section#servey__content__area {
  padding-top: 200px;
}

.servey__content__title h1 {
  font-size: 51px;
  font-weight: 600;
  color: #313131;
  line-height: 61px;
  text-align: center;
  margin-bottom: 25px;
}

.servey__content__wrap {
  padding-right: 400px;
}

.servey__content {
  color: #313131;
}

.servey__content p {
  font-size: 20px;
  line-height: 30px;
}

.servey__content__video {
  margin: 75px auto 50px;
  max-width: 495px;
  height: 280px;
}

.servey__content__video iframe {
  width: 100%;
  height: 100%;
}

.servey__content a {
  display: inline-block;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0px;
  fill: #ffffff;
  color: #ffffff;
  background-color: #814C98;
  border-radius: 10px;
  padding: 15px 40px 15px 40px;
  margin: 40px 0px 48px;
}

.servey__content a:hover {
  background: #29b2a1;
}

.servey__thanks {
  margin-bottom: 50px;
}

.servey__thanks p span {
  display: inline-block;
  margin-top: 15px;
}

section#servey__newsletter__area {
  padding: 100px 0px 100px 0px;
  background: #814c98;
}

.newsletter__title h2 {
  font-size: 35px;
  line-height: 35px;
  font-weight: 600;
  text-align: center;
  color: #fff;
}

.newsletter__title {
  margin-bottom: 55px;
}

.servey__form {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 14px;
}

.servey__input {
  position: relative;
}

.servey__input > input {
  width: 100%;
  background: transparent;
  font-size: 15px;
  font-weight: 600;
  padding: 10px;
  color: #ffffff;
}

.servey__input input::placeholder {
  color: #ffffff;
}

.servey__input input:focus {
  border: 1px solid #000;
  border-bottom: none;
  outline: none;
}

.border__input__area {
  position: absolute;
  bottom: 0px;
  left: 0px;
  width: 100%;
  border-bottom: 1px solid #fff;
}

.serveyform__checkmark {
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.newsletter__check label {
  color: #ffffff;
  font-weight: 600;
}

.newsletter__check label input {
  margin-right: 5px;
  display: inline-block;
}

.serveyform__checkmark button {
  padding: 11px;
  border-radius: 10px;
  max-width: 330px;
  width: 100%;
  color: #814c98;
  font-size: 15px;
  font-weight: 500;
}

.serveyform__checkmark button:hover {
  background: #29b2a1;
  color: #ffffff;
}

.serveyform__checkmark button i {
  display: inline-block;
  margin-left: 8px;
}
/*===================== SERVEY CSS AREA END =====================*/

/*===================== START CSS AREA START =====================*/
.start__content__rule img {
  width: 14px;
}

.start__content__rule {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 8px;
}

.start__content__rule p {
  text-transform: uppercase;
  font-size: 14px;
}

.back__btn > a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 18px;
  color: #000;
  position: relative;
}

.back__btn > a img {
  filter: brightness(0.5);
  transform: rotate(180deg);
  width: 16px;
  margin-top: 2px;
  margin-bottom: 0px;
}

.back__btn > a:after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 0px;
  width: 100%;
  height: 1px;
  background: #000;
}

.start__content h3 {
  margin: 32px 0px 24px;
  font-weight: bold;
  font-size: 24px;
}

.start__content > span {
  font-size: 12px;
  margin-bottom: 24px;
  display: inline-block;
}

.start__content > a {
  background: #0FB3A2;
  border-radius: 8px;
  width: 195px;
  height: 40px;
  color: #fff;
  gap: 6px;
  margin: 24px 0px;
}

.start__content a img {
  width: 22px;
}

.start__content > p {
  font-size: 12px;
  line-height: 16px;
  width: 186px;
  text-decoration: underline;
}

.hint__single__card {
  max-width: 376px;
  padding: 24px 24px 18px;
  box-shadow: 2px 2px 24px 0px #7A519152;
  border-radius: 15px;
  margin-left: auto;
  background: #fff;
}

.hint__single__card__content h5 {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 16px;
}

.hint__single__card__content h5 img {
  width: 20px;
}

.hint__single__card__content h6 {
  color: #333333;
  font-size: 14px;
  font-weight: 400;
  text-transform: uppercase;
  margin-bottom: 8px;
}

.hint__single__card__content > p {
  font-size: 14px;
  line-height: 21px;
  color: #4F4F4F;
  margin-bottom: 29px;
}

.hint__card__img {
  border-top: 1px solid #7A5191;
  padding-top: 18px;
  display: flex;
  justify-content: center;
}

.hint__card__img img {
  width: 128px;
}

section#start__area {
  padding: 40px 0px 258px;
}

.pta__wrap {
  padding: 0px 50px 0px 115px;
}

.hint__card {
  margin-top: 68px;
  position: relative;
}

img.subtract {
  position: absolute;
  right: 119px;
  bottom: -95px;
  z-index: -4;
  width: 335px;
}

img.sms__info {
  position: absolute;
  top: -65px;
  right: -32px;
  width: 77px;
}
/*===================== START CSS AREA END =====================*/

/*===================== TERMS CONTENT AREA START =====================*/

.hero__content p {
  font-size: 51px;
  font-weight: 600;
  line-height: 62px;
  color: #814C98;
  margin: 30px 0px;
}

/*===================== PTA-LOACTION CSS AREA START =====================*/
.loaded {
  max-width: 422px;
  position: relative;
  background: #F6E0F6;
  height: 8px;
  border-radius: 8px;
  overflow: hidden;
}

.requirement__loaded h6 {
  color: #E90084;
  margin-bottom: 8px;
  font-weight: 400;
}

.requirement__loaded {
  margin-top: 24px;
}

.loaded1:after {
  content: '';
  position: absolute;
  top: 0px;
  left: 0px;
  width: 17%;
  height: 100%;
  background: #E90084;
  border-radius: 8px;
}

.location__cards {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 16px;
}

.location__single__card {
  box-shadow: 0px 0px 16px 0px #00000014;
  padding: 10px 15px;
  border-radius: 8px;
  border: 2px solid #fff;
}

.location__single__card:hover,.location__single__card.active {
  border: 2px solid #E90084;
}

.location__card__content h6 {
  font-weight: 400;
  font-size: 14px;
  margin-top: 8.2px;
}
/*===================== PTA-LOACTION CSS AREA END =====================*/

/*===================== SCHOOL-DETAILS CSS AREA START =====================*/
.label__img img {
  width: 18px;
}

.label__img {
  display: flex;
  align-items: center;
  gap: 11px;
}

.label__img button.btn.btn-primary,.upload__titles button.btn.btn-primary,.pta__url__title button.btn.btn-primary,.package__platform ul li button.btn.btn-primary {
  background-color: transparent;
  border: none;
  padding: 0px;
  margin-top: -2px;
}

.label__img label {
  font-size: 14px;
  font-weight: bold;
}

.modal.fade.show > .modal-dialog {
  max-width: 320px !important;
  width: 100%;
}

.modal.fade.show > .modal-dialog > .modal-content {
  padding: 16px;
  background: #E90084;
  color: #fff;
  border-radius: 8px;
  max-width: 320px;
  margin: 0 auto;
}

.modal-header {
  padding: 0px 0px 8px;
  border-bottom: none;
}

.modal-title {
  font-size: 18px;
  font-weight: bold;
}

.field__name p {
  font-size: 14px;
  line-height: 16px;
  padding-right: 41px;
}

.modal-backdrop.fade.show {
  z-index: 111;
}
 
.header__popup .modal.fade.show .modal-dialog .modal-content {
  box-shadow: 0px 0px 16px 0px #00000014;
  max-width: 711px !important;
  width: 100% !important;
  padding: 40px;
  color: #333333;
  background: #fff !important;
  text-align: center;
}

.header__popup .modal.fade.show .modal-dialog {
  max-width: 711px !important;
  width: 100%;
}

.modal__contents h3 {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 16px;
}

.modal__contents p:nth-child(2) {
  margin-bottom: 15px;
}

.modal__content__btn {
  margin-top: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 17px;
}

.modal__content__btn a {
  padding: 8px 32px;
  border-radius: 8px;
}

.modal__content__btn a:last-child {
  border: 2px solid #0FB3A2;
  color: #0FB3A2;
}

.modal__content__btn a:first-child {
  background: #0FB3A2;
  color: #fff;
}

div#exampleModal {
  z-index: 99999999;
}

.btn-close {
  border: 0;
  opacity: 1;
}

.modal-dialog {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) !important;
}

/* div#exampleModal {
  display: flex !important;
  align-items: center;
  justify-content: center;
  height: 100%;
  width: 100%;
} */

.btn-close:focus {
  outline: 0;
  box-shadow: none;
  opacity: 1;
}

.input__label > img {
  width: 11px;
}

.input__label {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.input__field input {
  padding: 13px 24px;
  color: #828282;
  font-size: 14px;
  border: 1px solid #333333;
  border-radius: 8px;
  width: 100%;
}

.input__field__area {
  display: flex;
  width: 100%;
  gap: 32px;
}

.input__field {
  width: 100%;
}

.input__field__area:not(:last-child) {
  margin-bottom: 32px;
}

form > .input__field {
  margin-bottom: 32px;
}

.school__form {
  padding-right: 40px;
}

.input__field.input__field2 {
  width: 47%;
}

.scholl__details__area {
  padding-bottom: 34px !important;
}

.loaded.loaded2:after {
  content: '';
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 35%;
  background: #E90084;
  border-radius: 8px;
}
/*===================== SCHOOL-DETAILS CSS AREA END =====================*/

/*===================== PTA-BRANDING CSS AREA START =====================*/
.upload__titles img, .upload__titles img {
  width: 18px;
}

.upload__titles {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 11px;
  font-size: 14px;
  font-weight: bold;
}

.upload__logo {
  border: 1px dashed #E90084;
  border-radius: 8px;
  background: #E9008414;
  max-width: 342px;
  height: 129px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 8px;
  margin-bottom: 34px;
}

.upload__logo p {
  font-size: 12px;
  line-height: 15px;
  max-width: 160px;
}

.pta__single__color {
  border-radius: 8px;
  box-shadow: 0px 0px 16px 0px #00000014;
  width: 51px;
  height: 48px;
  background: #fff;
  padding: 6px 4px;
  position: relative;
}

.color__field {
  width: 100%;
  height: 100%;
  border-radius: 8px;
}

.color__mark {
  width: 14px;
  position: absolute;
  top: 23%;
  left: 39%;
  transform: scale(0);
  opacity: 0;
}

.pta__single__color input {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
}

.pta__single__color input:focus ~ .color__mark {
  opacity: 1;
  transform: scaleZ(1);
}

.pta__single__color {
  border-radius: 8px;
  box-shadow: 0px 0px 16px 0px #00000014;
  width: 51px;
  height: 48px;
  background: #fff;
  padding: 6px 4px;
  position: relative;
  box-shadow: 2px 2px 24px 0px #7A519152;
}

.pta__all__color {
  display: grid;
  grid-template-columns: repeat(6,1fr);
  gap: 8px;
  max-width: 343px;
  margin-bottom: 24px;
}

.choose__color p > a {
  color: #4F4F4F;
  font-size: 12px;
  text-decoration: underline;
}

.loaded.loaded3:after {
  content: '';
  position: absolute;
  width: 50%;
  height: 100%;
  background: #E90084;
  border-radius: 8px;
}

/*===================== PTA-BRANDING CSS AREA END =====================*/

/*===================== PTA-URL CSS AREA START =====================*/
.pta__url input {
  padding: 13px 24px;
  color: #828282;
  font-size: 14px;
  border: 1px solid #333333;
  border-radius: 8px;
  width: 100%;
}

.suggestion__url {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 24px;
}

.suggestion__url a {
  color: #373A36;
}

.pta__url {
  max-width: 343px;
}

.suggestion__url > h6 {
  color: #828282;
  font-weight: 400;
  font-size: 16px;
  margin-bottom: 0px;
}

.pta__url > p {
  display: flex;
  align-items: center;
  gap: 13px;
  font-size: 14px;
  color: #219653;
  text-transform: uppercase;
  margin-top: 16px;
}

.pta__url p img {
  width: 14px;
}

.url__content h3 {
  max-width: 343px;
}

.pta__url__title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.pta__url > label span img {
  width: 18px;
}

.pta__url__title span {
  font-size: 14px;
  font-weight: bold;
  text-transform: uppercase;
}

.loaded.loaded4:after {
  content: '';
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 67%;
  background: #E90084;
  border-radius: 8px;
}
/*===================== PTA-URL CSS AREA END =====================*/

/*===================== PERSONAL-DETAILS CSS AREA START =====================*/
select.form-select {
  border: 1px solid #333333;
  border-radius: 8px;
  padding: 13px 24px;
  color: #828282;
  font-size: 14px;
  background-image: url(../img/drop_angle.svg);
  background-size: 18px 14px;
}

.loaded.loaded6:after {
  content: '';
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 82%;
  border-radius: 8px;
  background: #E90084;
}
/*===================== PERSONAL-DETAILS CSS AREA END =====================*/

/*===================== PACKAGE CSS AREA START =====================*/
.package__platform ul li .b_check {
  width: 14px;
}

.package__platform ul li .faq {
  width: 18px;
}

.package__platform ul li {
  display: flex;
  align-items: center;
  gap: 11px;
  color: #333333;
  font-size: 15px;
}

.package__platform ul {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 12px;
}

.package__cards {
  display: flex;
  gap: 16px;
  padding-right: 42px;
}

.package__single__card:first-child {
  border: 2px solid #0FB3A2;
  box-shadow: 2px 2px 24px 0px #7A519152;
}

.package__single__card {
  border-radius: 8px;
  padding: 16px 0px;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  background: #fff;
}

.package__card__title {
  text-align: center;
  width: 100%;
}

.package__single__card:last-child {
  border: 1px solid #E0E0E0;
}

.package__card__title > span {
  background: #0FB3A2;
  border-radius: 48px;
  color: #fff;
  font-size: 10px;
  padding: 1px 8px;
}

.package__card__title > h2 {
  font-size: 24px;
  font-weight: bold;
  margin: 8px 0px;
}

.vat {
  background: #0FB3A214;
  width: 100%;
  padding: 8px;
  margin-bottom: 16px;
}

.vat h2 {
  font-weight: 400;
  font-size: 24px;
  color: #333333;
}

.vat h2 span {
  font-weight: bold;
}

.package__platform h6 {
  background: #7A519114;
  border: 1px solid #7A5191;
  border-radius: 8px;
  padding: 8px;
  width: 203px;
  margin: 0 auto 8px;
  font-size: 14px;
  font-weight: bold;
  color: #7A5191;
}

.package__platform.package__platform1 a {
  border: 2px solid #0FB3A2;
  background: #0FB3A229;
  border-radius: 8px;
  font-weight: bold;
  color: #0FB3A2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 13px;
  padding: 8px 0px;
  max-width: 305px;
  margin: 16px auto 0px;
}

.package__platform.package__platform1 a img {
  width: 14px;
}

.package__card__title2 > h2 {
  margin-bottom: 32px;
}

.package__platform2 a {
  color: #0FB3A2;
  max-width: 277px;
  border: 2px solid #0FB3A2;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  padding: 8px;
  margin: 16px auto 0px;
}
.loaded.loaded7:after {
  content: '';
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background: #E90084;
}

.package__area {
  padding-bottom: 159px !important;
}

.hint__single__card__content1 img {
  width: 18px;
}

.hint__single__card__content1 {
  display: flex;
  align-items: start;
  gap: 11px;
}

.ticket__content > h6 {
  color: #333333;
  font-weight: bold;
  font-size: 14px;
  margin-bottom: 4px;
}

.ticket__content > p {
  line-height: 18px;
  font-size: 12px;
  color: #333333;
  margin-bottom: 28px;
  padding-right: 30px;
}

.tickets {
  max-width: 240px;
  display: flex;
  flex-direction: column;
  position: relative;
  gap: 15px;
}

.ticket__row {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  text-align: center;
  align-items: center;
  color: #333333;
}

.tickets:after {
  content: '';
  position: absolute;
  bottom: 0px;
  right: 84px;
  width: 1px;
  height: 100%;
  background: #000;
}

.tickets:before {
  content: '';
  position: absolute;
  bottom: 0px;
  left: 80px;
  width: 1px;
  height: 81%;
  background: #0000001a;
}

.hint__card:last-child {
  margin-top: 32px;
}

img.subtractpackage {
  position: absolute;
  right: 101px;
  bottom: -140px;
  z-index: -4;
  width: 335px;
}
/*===================== PACKAGE CSS AREA END =====================*/

/*===================== PACKAGE CSS AREA START =====================*/
.success__card {
  background-color: #fff;
  box-shadow: 2px 2px 24px 0px #7A519152;
  border-radius: 16px;
  max-width: 667px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 55px;
  padding: 40px 0px;
}

img.success_shadow {
  position: absolute;
  bottom: 0px;
  z-index: -1;
}

.success__area {
  height: 100vh;
}

a.btns.header_login {
  background: #0FB3A2;
  color: #fff;
  border-radius: 8px;
  gap: 6px;
  width: 137px;
  height: 40px;
}

a.btns.header_login img {
  width: 22px;
}

.success__card img {
  width: 247px;
}

.success__card__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.success__card__content h2,.success__card__content h3 {
  font-size: 24px;
  line-height: 36px;
}

.success__card__content h2 {
  font-weight: 700;
}

.success__card__content h3 {
  font-weight: 400;
  margin-bottom: 32px;
}

.success__card__content p {
  max-width: 320px;
  line-height: 20px;
  margin-bottom: 32px;
  color: #373A36;
}

.seccess__mail__send {
  display: flex;
  flex-direction: column;
}

.seccess__mail__send a:first-child {
  margin-bottom: 16px;
}

.seccess__mail__send a {
  font-size: 14px;
  color: #373A36;
}

.seccess__mail__send a:nth-child(2) {
  text-decoration: underline;
}

.seccess__mail__send a:nth-child(3) {
  background: #0FB3A2;
  width: 150px;
  height: 40px;
  margin: 32px auto 0px;
  border-radius: 8px;
  font-size: 16px;
  color: #fff;
  gap: 7px;
}

.seccess__mail__send a:nth-child(3) img {
  width: 20px;
}

/*===================== PACKAGE CSS AREA END =====================*/

/*===================== PLATFORM CSS AREA START =====================*/
.header__dashboard {
  display: flex;
  align-items: center;
  gap: 32px;
}

a.h_dashboard, .logout a {
  color: #0FB3A2;
  font-size: 16px;
}
 
.logout {
  width: 200px;
  position: absolute;
  top: 148%;
  right: 0px;
  padding: 8px 16px;
  display: flex;
  flex-direction: column;
  align-items: end;
  gap: 12px;
  background: #fff;
  box-shadow: 0px 0px 16px 0px #00000014;
  opacity: 0;
  visibility: hidden;
  z-index: 9999;
  transition: 0s;
  border-radius: 8px;
}

.logout:after {
  content: '';
  position: absolute;
  top: -20px;
  right: 7px;
  background-color: #fff;
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  width: 24px;
  height: 21px;
  box-shadow: 0px 0px 16px 0px #00000014;
  z-index: -10;
  border-radius: 4px;
}

.header__dashboard > button.btn.btn-primary {
  background: transparent;
  border: none;
  color: #0FB3A2;
}

#header__tc:hover .logout {
  opacity: 1;
  visibility: visible;
}

#header__tc {
  position: relative;
  z-index: 999;
}


a.btns.tc {
  border: 2px solid #0FB3A2;
  background: #0FB3A2;
  color: #fff;
  font-weight: bold;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  position: relative;
  z-index: 9999;
}


.overlay_body.active {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(128, 120, 120, 0.149);
  z-index: 99;
  transition: 0.5s;
}

.platform__single__card > img {
  width: 88px;
}

.platform__single__card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  background: #fff;
  box-shadow: 0px 0px 16px 0px #00000014;
  border-radius: 8px;
  border: 1px solid #fff;
  position: relative;
}

span#required {
  background: #3069AC;
  border-radius: 48px;
  color: #fff;
  width: 62px;
  height: 20px;
  font-size: 10px;
  position: absolute;
  top: -11px;
  left: 37px;
}

.platform__single__card a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.platform__card__content h6 {
  margin-bottom: 8px;
  color: #1C2129;
  font-size: 14px;
  font-weight: bold;
}

.platform__card__content p {
  font-size: 12px;
  color: #1C2129;
}

.platform__cards {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.platform__single__card:hover,.platform__single__card.active {
  border: 1px solid #3069AC;
}

.event__platform h2 {
  font-size: 24px;
  line-height: 36px;
  font-weight: bold;
}

.event__platform h2 span {
  font-weight: 400;
}

.event__platform p {
  line-height: 20px;
}

.event__platform {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.event__platform > a {
  color: #373A36;
  font-size: 14px;
  text-decoration: underline;
}

.welcome__area {
  padding-bottom: 113px !important;
}

.item__content h2 {
  margin: 24px 0px;
  font-weight: bold;
  font-size: 24px;
  line-height: 36px;
  max-width: 430px;
}

.item__single__card {
  padding: 10px 15px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0px 0px 16px 0px #00000014;
}

.item__card__content h6 {
  font-size: 14px;
  font-weight: 400;
  margin-top: 8px;
  color: #1C2129;
}

.item__cards {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  column-gap: 16px;
  row-gap: 24px;
  margin-bottom: 32px;
}

.item__content > a {
  color: #fff;
  background: #0FB3A2;
  border-radius: 8px;
  padding: 8px 48px;
}

.items__area {
  padding-bottom: 196px !important;
}

img.parish_logo {
  width: 107px !important;
}
/*===================== PLATFORM CSS AREA END =====================*/

/*===================== AGREE-SIGN CSS AREA START =====================*/
.lawful__check img {
  width: 28px;
}

.lawful__check {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: #333333;
  border-radius: 8px;
}

.lawful__single__card {
  font-size: 14px;
  position: relative;
}

.lawful__card__title > button {
  padding: 0px;
  background: transparent;
  border: none;
}

.lawful__card__title > button:hover {
  background: transparent;
}

.lawful__card__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.lawful__single__card p {
  line-height: 18px;
  margin-bottom: 8px;
}

.lawful__single__card p a {
  color: #000;
  text-decoration: underline;
}

.lawful__card {
  margin-bottom: 48px;
  padding-right: 34px;
}

.lawful__double__card {
  display: grid;
  grid-template-columns: repeat(2,1fr);
  gap: 32px;
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid #E0E0E0;
}

.pta__documents {
  position: relative;
  z-index: 1;
}

.lawful__double__card:last-child {
  border-bottom: none;
}
/*===================== AGREE-SIGN CSS AREA END =====================*/

/*===================== NOTIFICATION-CARD CSS AREA START =====================*/
.scree__bottom button.btn.btn-primary {
  padding: 16px 20px 18px;
  position: fixed;
  bottom: 0px;
  left: 0px;
  right: 0px;
  border-radius: 20px 20px 0px 0px;
  background: #fff;
  border: none;
  box-shadow: 2px 2px 24px 0px #7A519152;
  color: #000;
  z-index: 99;
}

.screen__btn__content > img {
  width: 18px;
}

.screen__btn > img {
  width: 14px;
}

.screen__btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.screen__btn__content {
  display: flex;
  align-items: start;
  gap: 7px;
}

.screen__btn__text {
  text-align: start;
}

.screen__btn__text h6 {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 4px;
}

.screen__btn__text span {
  font-size: 12px;
  color: #4F4F4F;
  text-transform: uppercase;
}

.scree__bottom .modal.fade .modal-content {
  background: #fff !important;
  color: #000 !important;
  max-width: 100% !important;
  padding: 16px 20px 20px !important;
  box-shadow: 2px 2px 24px 0px #7A519152 !important;
  border-radius: 20px 20px 0px 0px !important;
}

.scree__bottom .modal.fade .modal-dialog {
  max-width: 100% !important;
  width: 100%;
  position: absolute;
  bottom: -100%;
  left: 0px;
  right: 0px;
  transform: translate(0px, 0px) !important;
  margin: 0px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: end;
  transition: .4s ease-in-out;
}

.scree__bottom .modal.fade.show .modal-dialog {
  bottom: 0%;
}

.toggle__content__title h5 img {
  width: 18px;
}

.toggle__content__title h5 {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 16px;
  font-weight: bold;
}

.toggle__content__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.toggle__content__title > img {
  width: 14px;
}

.toggle__content h6 {
  margin: 12px 0px;
  font-size: 14px;
  color: #4F4F4F;
  text-transform: uppercase;
}

.toggle__content p {
  color: #4F4F4F;
  font-size: 13px;
  line-height: 19px;
  margin-bottom: 8px;
}

.toggle__content .hint__card__img {border-top: 1px solid #FEEFF5;}
/*===================== NOTIFICATION-CARD CSS AREA END =====================*/

/*===================== FOOTER CSS AREA START =====================*/
footer#footer__area {
  background: #313131;
  padding: 65px 0px 52px;
}

.footer__logo {
  width: 208px;
  margin-bottom: 24px;
}

.footer__content__list {
  color: #fff;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 52px;
}

.footer__content {
  max-width: 882px;
}

.footer__content p {
  line-height: 27px;
}

.footer__list h5 {
  font-size: 23px;
  font-weight: 600;
  margin-bottom: 20px;
}

.footer__list > ul > li > a {
  color: #fff;
  line-height: 36px;
}

.footer__list > ul > li > a:hover {
  color: #814C98;
}

.copygiht__social > a:first-child img {
  width: 15px;
}

.copygiht__social > a:last-child img {
  width: 30px;
}

.copygiht__social {
  display: flex;
  align-items: center;
  gap: 47px;
}

.copyright__content {
  color: #fff;
}

.copyright {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.copyright__content p {
  line-height: 27px;
  margin-top: 8px;
}

.copyright__content p a {
  color: #fff;
}
/*===================== FOOTER CSS AREA END =====================*/