@import url("./../../stylesheets/commons.css");



:root {

  --ex-gray: #f0f2f7;

}



.link.gray:hover,

.link.gray.active,

.link.gray:focus {

  color: var(--theme-color);

}



.user-review-card {

  background-color: var(--color-white);

  padding: 4rem;

  border-radius: 3.2rem;

}



.user-review-card img.user-review-avtar {

  margin-right: 20px;

}



.user-review-card h3 {

  margin-bottom: 8px;

}



.user-review-slider {

  padding: 10rem 0;

}



.user-review-slider .user-review-card {

  transition: 0.5s all;

}



.user-review-slider .swiper-slide-active .user-review-card {

  filter: drop-shadow(30px 30px 100px rgba(0, 0, 0, 0.07));

}



.user-review-slider .swiper-slide:not(.swiper-slide-active, .swiper-slide-next) .user-review-card {

  opacity: 0;

}



.theme-swiper-nav-btn {

  border-radius: 50%;

  width: 48px;

  height: 48px;

  background-color: var(--theme-color);

  color: var(--color-white);

  border: 1px solid var(--theme-color);

  display: flex;

  align-items: center;

  justify-content: center;

  transition: 0.3s all;

}



.app-screenshot-navigation {

  position: absolute;

  top: 50%;

  transform: translateY(-50%);

  width: 100%;

  display: flex;

  align-items: center;

  justify-content: space-between;

  z-index: 1;

}



.theme-swiper-nav-btn:hover {

  color: var(--theme-color);

  background-color: transparent;

}



.theme-swiper-nav-btn:active {

  background-color: rgba(14, 66, 50, 0.1);

}



.app-slider-wrapper {

  margin-top: 40px;

}



.app-ss-slider {

  filter: drop-shadow(-20px 0px 50px rgba(0, 0, 0, 0.07));

}



.app-ss img {

  border-radius: 24px;

}



.app-ss-slider .swiper-slide {

  perspective: 800px;

}



.app-ss-slider .app-ss {

  max-width: 295px;

  width: 100%;

  transition: 0.3s all;

  transform: scale(0.85) rotateY(-40deg);

  transform-origin: right;

  margin: 0 auto;

}



.swiper-slide-prev .app-ss {

  transform: scale(0.9) rotateY(-15deg);

  transform-origin: left;

}



.swiper-slide-active .app-ss {

  transform: scale(1) rotateY(0);

  transform-origin: center;

}



.swiper-slide-next .app-ss {

  transform: scale(0.9) rotateY(15deg);

  transform-origin: right;

}



.swiper-slide-next + .swiper-slide .app-ss {

  transform: scale(0.85) rotateY(40deg);

  transform-origin: left;

}



.phone-mockup {

  position: absolute;

  max-width: 300px;

  left: 50%;

  transform: translate(-50%, -50%);

  top: 50%;

  z-index: 1;

  pointer-events: none;

}

.breadcrumb-item a { color:#0e68b2;  }

/* CISSP PAGE START */

/* HERO COVER SECTION START */

.hero-cover:after {

  content: "";

  position: absolute;

  top: 0;

  left: 0;

  background-image: url(../../assets/images/backgrounds/hero-bg-pattern.png);

  background-repeat: no-repeat;

  background-size: cover;

  height: 100%;

  width: 100%;

  z-index: -2;

}



.exam-img-wrapper,

.hero-cover h1 {

  margin-bottom: 2.4rem;

}



.hero-cover h1 {

  max-width: 70%;

}



.hero-cover h4,

.hero-counter-card {

  margin-bottom: 4.8rem;

}



.hero-counter-card {

  display: flex;

  align-items: center;

}



.hero-counter-card-items:first-child {

  margin-right: 8.8rem;

}



.hero-content-left {

  padding: 10rem 0;

}



.hero-cover .app-icon:first-child {

  margin-right: 24px;

}



.hero-cover-img {

  display: flex;

  align-items: flex-end;

  justify-content: center;

  margin-bottom: -23%;

}



.hero-cover-img img {

  -webkit-box-shadow: 0px -30px 100px 0px rgba(0, 204, 150, 0.7);

  -moz-box-shadow: 0px -30px 100px 0px rgba(0, 204, 150, 0.7);

  box-shadow: 0px -30px 100px 0px rgba(255, 255, 255, 0.7);

  border-radius: 4rem;

  width: 32.3rem;

  height: 70rem;

}



.hero-content-right:after {

  content: "";

  position: absolute;

  left: 0;

  right: 0;

  bottom: 0;

  min-height: 82rem;

  max-width: 68rem;

  background: linear-gradient(107.72deg, #00644a 0%, #004332 100%);

  border-radius: 400px 400px 0px 0px;

  z-index: -1;

  margin: auto;

}



.hero-cover .app-icon img {

  width: 19.1rem;

  height: 6.4rem;

}



/* HERO COVER SECTION END */



/* SUCCESS APP DESIGN SECTION START */

.app-design-card-wrapper {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  grid-gap: 4rem;

}



.app-design-card-items {

  background: var(--color-white);

  box-shadow: 0px 30px 100px rgba(127, 127, 127, 0.04);

  border-radius: 3.2rem;

  padding: 0 16px 50px;

  margin-top: 50px;

}



.app-design-icon {

  background: #ffffff;

  box-shadow: 0px 20px 16px rgba(204, 157, 0, 0.07);

  border-radius: 16px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 80px;

  height: 80px;

  margin-bottom: 24px;

  margin-top: -50%;

}



.app-design-icon svg {

  width: 70%;

  height: 70%;

}



.icon-gradient-yellow {

  box-shadow: 0px 20px 16px rgba(204, 157, 0, 0.07);

}



.icon-gradient-purple {

  box-shadow: 0px 20px 16px rgba(105, 0, 242, 0.05);

}



.icon-gradient-orange {

  box-shadow: 0px 20px 16px rgba(242, 121, 0, 0.07);

}



.icon-gradient-green {

  box-shadow: 0px 20px 16px rgba(0, 137, 153, 0.07);

}



/* SUCCESS APP DESIGN SECTION END */



/* APP CONTENT SECTION START */

.app-content-card-items {

  display: flex;

  align-items: center;

  padding: 4rem;

}



.app-content-image-box {

  height: 18rem;

  min-width: 18rem;

  background: #f8f8f8;

  border-radius: 24px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  margin-right: 24px;

}



.app-content-image-box:nth-child(1) img {

  width: 10.6rem;

  height: 13rem;

}



.app-content-image-box:nth-child(2) img {

  width: 9rem;

  height: 13rem;

}



.app-content-card-wrapper {

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  grid-gap: 4rem;

}



.app-content-text-wrap a {

  color: var(--theme-color);

}



.app-content-text-wrap a svg {

  margin-left: 6px;

  width: 2.4rem;

  height: 2.4rem;

}



.app-content-text-wrap p {

  margin-bottom: 25px;

}



/* APP CONTENT SECTION END */



/* APP AUTHOR SECTION START */

.app-authors .section-sub-title {

  margin-bottom: 80px;

}



.app-author-card-wrapper {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  grid-gap: 4rem;

}



.app-author-card-items {

  background: #ffffff;

  border-radius: 4rem;

  padding: 0 4rem 4rem;

  margin-top: 8rem;

}



.app-author-icon {

  margin-top: -8rem;

}



.app-author-icon img {

  width: 15.1rem;

  height: 15rem;

}



.app-author-text-wrap a {

  color: #0077b5;

}



/* APP AUTHOR SECTION END */



/* LEADING CERTIFICATE SECTION START */

.certificate-svg-icon {

  background-image: url("data:image/svg+xml,%3Csvg width='24' height='25' viewBox='0 0 24 25' fill='none' xmlns='http://www.w3.org/2000/svg' %3E%3Cpath d='M14.3371 3.31747L14.6152 3.02998L14.3371 3.31747C14.6475 3.61771 15.079 3.75793 15.5066 3.69745L18.1516 3.32334C18.472 3.27801 18.7707 3.49499 18.8266 3.81376L19.2881 6.44489C19.3627 6.87023 19.6294 7.23732 20.0109 7.43972L22.3706 8.69173C22.6565 8.84341 22.7706 9.19449 22.6285 9.48525L21.4553 11.8852C21.2657 12.2731 21.2657 12.7269 21.4553 13.1148L22.6285 15.5148C22.7706 15.8055 22.6565 16.1566 22.3706 16.3083L20.0109 17.5603C19.6294 17.7627 19.3627 18.1298 19.2881 18.5551L18.8266 21.1862C18.7707 21.505 18.472 21.722 18.1516 21.6767L15.5066 21.3025C15.079 21.2421 14.6475 21.3823 14.3371 21.6825L12.4172 23.5399C12.1846 23.7649 11.8154 23.7649 11.5828 23.5399L9.66289 21.6825C9.35252 21.3823 8.92097 21.2421 8.49341 21.3025L5.84842 21.6767C5.52798 21.722 5.22933 21.505 5.17342 21.1862L4.71188 18.5551C4.63727 18.1298 4.37056 17.7627 3.9891 17.5603L1.62936 16.3083C1.34348 16.1566 1.22941 15.8055 1.37153 15.5148L2.54468 13.1148C2.73433 12.7269 2.73433 12.2731 2.54468 11.8852L1.37153 9.48525C1.22941 9.19449 1.34348 8.84341 1.62936 8.69173L3.9891 7.43972C4.37056 7.23732 4.63727 6.87022 4.71188 6.44489L5.17342 3.81376C5.22933 3.49499 5.52798 3.27801 5.84842 3.32334L8.49341 3.69745C8.92097 3.75793 9.35252 3.61771 9.66289 3.31747L11.5828 1.46012C11.8154 1.2351 12.1846 1.2351 12.4172 1.46012L14.3371 3.31747Z' fill='%23E5F0FF' stroke='%2300A5E5' stroke-width='0.8' /%3E%3Cpath d='M15.1611 9.99624C15.0745 9.99882 14.9923 10.035 14.9319 10.0972L10.8343 14.1948L9.06993 12.4305C9.03922 12.3985 9.00243 12.373 8.96172 12.3554C8.92101 12.3378 8.8772 12.3285 8.83285 12.328C8.7885 12.3276 8.74451 12.336 8.70345 12.3527C8.6624 12.3695 8.62509 12.3943 8.59373 12.4256C8.56238 12.457 8.53759 12.4943 8.52082 12.5354C8.50406 12.5764 8.49566 12.6204 8.49611 12.6648C8.49656 12.7091 8.50586 12.7529 8.52345 12.7936C8.54105 12.8343 8.56659 12.8711 8.59858 12.9018L10.5986 14.9018C10.6611 14.9643 10.7459 14.9994 10.8343 14.9994C10.9226 14.9994 11.0074 14.9643 11.0699 14.9018L15.4033 10.5685C15.4514 10.5217 15.4843 10.4614 15.4977 10.3956C15.511 10.3297 15.5041 10.2614 15.4779 10.1995C15.4517 10.1377 15.4075 10.0852 15.3509 10.0489C15.2944 10.0126 15.2282 9.99426 15.1611 9.99624Z' fill='%2300A5E5' stroke='%2300A5E5' stroke-width='0.6' /%3E%3C/svg%3E");

  background-size: contain;

  background-repeat: no-repeat;

}



.leading-certificate p.section-sub-title {

  max-width: 50%;

}



.leading-certificate-card-wrapper-3 {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  grid-gap: 4rem;

}

.leading-certificate-card-wrapper-2 {

  display: grid;

  grid-template-columns: repeat(2, 1fr);

  grid-gap: 4rem;

}

.leading-certificate-card-wrapper-1 {

  display: grid;

  grid-template-columns: repeat(1, 1fr);

  grid-gap: 4rem;

}



.leading-certificate-card-items {

  border: 1px solid #e0e0e0;

  border-radius: 24px;

  padding: 4rem;

}



.leading-certificate-card-items h5 {

  margin-bottom: 24px;

}



.leading-certificate-card-items ul {

  padding: 0;

  margin-bottom: 24px;

}



li.certificate-list {

  list-style: none;

  display: flex;

  align-items: center;

  margin-bottom: 16px;

}



.certificate-list-icon {

  margin-right: 12px;

  height: 2.4rem;

  width: 2.4rem;

  object-fit: contain;

}



/* LEADING CERTIFICATE SECTION END */



/* FLEXIBLE PLANS SECTION START */

.flexible-plans-categories-card-wrap,

.flexible-plans-cards-wrap {

  width: 100%; /* Ensure full width */

}



.flexible-plans-categories-card {

  margin-bottom: 20px;

}



.flexible-plans-card-item {

  background: #ffffff;

  border-radius: 24px;

  padding: 24px;

}



.flexible-plans-wrap {

  border-radius: 40px;

  padding: 6.4rem;

}



.flexible-plans-categories-card-wrap {

  grid-template-columns: repeat(2, 1fr);

  grid-gap: 6.4rem;

}



.flexible-plans .section-title-wrap {

  display: flex;

  align-items: flex-start;

  justify-content: flex-start;

}



.flexible-plans-cards-wrap {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  grid-gap: 3.2rem;

}



.flexible-plans .link-arrow {

  color: var(--theme-color);

}





.section-title-icon {

  width: 11.2rem;

  height: 11.2rem;

  margin-right: 24px;

}



.section-title-icon img {

  width: 100%;

  height: 100%;

}



.section-title-wrap h3 {

  max-width: 60%;

}



.plan-card-title {

  color: var(--theme-color-title);

}











.link-arrow {

  width: 2.4rem;

  height: 2.4rem;

  object-fit: contain;

}



.link-arrow svg {

  width: 100%;

  height: 100%;

}



/* FLEXIBLE PLANS SECTION END */



/* WHAT YOU waiting FOR SECTION START */

.waiting-for-content-wrap {

  position: relative;

  min-height: 42rem;

  border-radius: 8rem;

  overflow: hidden;

  padding: 0 12rem;

  display: flex;

  justify-content: space-evenly;

}



.waiting-for-content-wrap:before {

  content: "";

  position: absolute;

  top: 0;

  left: 0;

  opacity: 0.25;

  background-image: url(../../assets/images/backgrounds/waiting-bg-pattern.png);

  background-repeat: no-repeat;

  background-size: cover;

  height: 100%;

  width: 100%;

  z-index: 1;

}



.mobile-img:last-child {

  margin-left: 50px;

}



.app-icons-wrap {

  display: flex;

  align-items: center;

}



.app-icon:first-child {

  margin-right: 15px;

}



.waiting-for-content-left {

  display: flex;

  align-items: start;

  flex-direction: column;

  justify-content: center;

  height: 100%;

}



/* WHAT YOU Waiting FOR SECTION END */

/* CISSP FOOTER START */

.main-footer {

  background-color: var(--theme-color);

}



.footer-bottom {

  background-color: var(--theme-color-dark);

}



.exam-prep-apps {

  columns: 3;

}

.store-badge {

  height: 65px; /* You can adjust this value as needed */

  object-fit: contain; /* This will ensure that the images are scaled correctly within the fixed height */

}



/* Custom CSS for the download buttons */

.download-btn {

  display: flex;

  align-items: center;

  padding: 10px 20px;

  border-radius: 30px;

  color: white;

  text-decoration: none;

  font-size: 14px;

  box-shadow: 0 4px 8px rgba(0,0,0,0.2);

  min-width: 200px;

}



.download-btn i {

  font-size: 35px;

  margin-right: 15px;

}



.download-btn .text {

  display: flex;

  flex-direction: column;

  text-align: left;

  justify-content: center;

}



.download-btn .text .download {

  font-size: 12px;

  line-height: 1;

  font-weight: normal;

}



.download-btn .text .app-store {

  font-size: 18px;

  line-height: 1.5;

  font-weight: bold;

}



.btn-container {

  display: flex;

  justify-content: flex-start;

  gap: 60px;

  padding: 20px 0;

}



.bg-black {

  background-color: #000000;

}

.bg-white {

  background-color: #FFFFFF;

}

.bg-theme {

  background-color: var(--theme-color);

}



.image-container {

  position: relative;

  overflow: hidden;

  border-radius: 20px;

  

  margin-top: 50px; /* Top padding */

  margin-bottom: 50px; /* Top padding */

  width: 300px; /* Width of the container */

  height: 225px; /* Height for 3/4 of the image */

}



.image-container img {

  position: absolute;

  top: -25%;

  left: 0;

  width: 100%;

  height: auto;

}



.tab-content {

  display: none;

}



.tab-content.active {

  display: block;

}



.tabs {

  display: flex;

  justify-content: center;

  margin-bottom: 30px;

}



.tab-button {

  flex: 1;

  padding: 10px 20px;

  cursor: pointer;

  background-color: #f1f1f1;

  border: none;

  outline: none;

  transition: background-color 0.3s ease;

  border-radius: 20px; /* Rounded corners */

  margin: 0 5px; /* Add some space between tabs */

  text-align: center;

  max-width: 300px;

}



.tab-button.active {

  background-color: #000;

  color: #fff;

}



.homepage-banner {

  background: linear-gradient(90deg, #ff7e5f, #feb47b);

  color: #fff;

  text-align: center;

  padding: 1rem 0;

  font-size: 1.2rem;

  font-weight: bold;

  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);

}

.homepage-banner a {

  color: #ffeb3b;

  text-decoration: none;

  font-weight: bold;

}

.homepage-banner a:hover {

  text-decoration: underline;

}

.homepage-banner span {

  display: inline-block;

  margin-left: 10px;

}

.homepage-banner img {

  vertical-align: middle;

}