.cp-header {
   padding: 0 15px !important;
}
.container {
   max-width: 100% !important;
   padding: 0px !important;
}

.zoo-main-content-area {
   padding: 0px !important;
}

.containercscs {
   padding: 0%;
   font-family: 'Inter';
}

.cscsnav {
   font-family: 'Inter';
   background: #16A34A;
   padding: 20px 0px;
   text-align: center;
   justify-items: center;
   height: 75px;
}

.cscsnav ul {
   list-style: none;
   margin: 0px;
   padding: 0px;
   gap: 10px;
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
}

.cscsnav li {
   margin: 0px;
   background: #ffffff;
   padding: 5px 10px;
   border-radius: 5px;
}

.cscsnav li:hover {
   margin: 0px;
   background: #16A34A;
   padding: 5px 10px;
   border-radius: 5px;
   border: 1px solid #ffffff;
}

.cscsnav a {
   color: #047035;
   text-decoration: none;
   font-size: 14px;
   padding: 5px 10px;
}

.cscsnav a:hover {
   color: #ffffff;
   text-decoration: none;
   font-size: 14px;
}

.final-container {
   max-width: 1200px;
   margin: auto;
   justify-items: center;
}

.cscs-hero {
   background-image: url('../images/card_category/hero-desktop.png');
   background-color: #145f36;
   /* background-size: cover; */
   background-position: center;
   background-repeat: no-repeat;
   width: 100%;
   height: 520px;
   border-radius: 27px;
}


.cscs-hero {
   display: flex;
   align-items: center;
   justify-content: space-between;
   /* background: linear-gradient(to right, #046630, #051645); */
   padding: 10px 40px;
   /* border-radius: 20px; */
   margin: 40px 10px;
   color: #ffffff;
   overflow: hidden;
}

.hero-content {
   max-width: 50%;
   z-index: 2;
   padding: 20px;
   padding-top: 0px;
   font-family: "Inter";
   padding-top: 28px;
}

.hero-content h1 {
   font-size: 36px;
   font-weight: bold;
   line-height: 32px;
   margin-bottom: 20px;
   line-height: 150%;
}

.hero-content p {
   font-size: 16px;
   line-height: 22px;
   font-family: "Inter";
   padding-top: 18px;
}

.hero-buttons {
   margin: 18px 0px;
}

.hero-buttons a {
   color: #16A34A;
}

.hero-buttons .btn-secondary {
   color: #fff;
}
.hero-button-c{
   padding-top: 25px;
}
.hero-button.btn-primary {
   padding: 10px 10px;
   margin-right: 10px;
   font-size: 16px;
   font-weight: 600;
   border: 1px solid #ffffff;
   cursor: pointer;
   color: #145F36;
   background-color: #ffffff;
   transition: background-color 0.3s ease;
}
.hero-button .icon-spacing-12{
margin-right: 12px;
}
.btn-primary:hover {
   border: 1px solid #ffffff;
   color: #ffffff;
   background: transparent;
}

.btn-secondary {
   padding: 10px 20px;
   font-size: 14px;
   border: 1px solid #ffffff;
   border-radius: 10px;
   cursor: pointer;
   color: #ffffff;
   background-color: transparent;
   transition: background-color 0.3s ease;
}

.btn-secondary:hover {
   color: #16A34A;
   background: #ffffff;
}

.hero-images {
   position: relative;
   max-width: 50%;
   display: flex;
   justify-content: flex-end;
   align-items: flex-start;
}

.worker-img {
   position: relative;
   max-height: 300px;
   object-fit: contain;
   top: 20px;
   right: 250px;
}

.card-img {
   position: absolute;
   z-index: 1;
   top: 50%;
   right: -10px;
   transform: translateY(-50%);
   max-height: 200px;
   object-fit: contain;
}

.cscs-steps {
   margin: 0px 10px;
   text-align: center;
   justify-content: center;
   justify-items: center;
}

.centered-heading h2 {
   font-size: 27px;
   line-height:40.5px
   font-weight: 600;
   max-width: 750px;
   margin: 40px 0px;
   font-family: "Inter";
}

.cscs-steps #numb1 {
   display: none;
}

#hero-tablet {
   display: none;
}

.tablet-banner {
   /* background-image: url(); */
   background-image: url(https://tls.mage360.co.uk/static/version1737027544/frontend/JohnThomas/learningstation/en_GB/images/card_category/hero-tablet.png) !important;
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
   width: 50%;
   height: 650px;
}

.tablet-banner {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   /* background: linear-gradient(to top, #046630, #051645); */
   padding: 40px;
   border-radius: 20px;
   /* width: 80%; */
   max-width: 1200px;
   margin: 40px auto;
   color: #ffffff;
}

.tablet-content {
   max-width: 100%;
   text-align: center;
}

.tablet-content h1 {
   font-size: 28px;
   line-height: 32px;
}

.tablet-content p {
   font-size: 18px;
   line-height: 22px;
   font-family: "Inter";
}

.hero-image1 {
   text-align: center;
}

.stpe {
   display: flex;
   flex-direction: column;
   max-width: 80%;
}

.steps {
   display: grid;
   grid-auto-flow: column;
   gap: 10px;
   justify-content: center;
   font-family: "Inter";

}

.steps .step {
   text-align: left;
   padding: 20px;
   border: 1px solid #e2e8f0;
   background-color: #f8fafc;
   border-radius: 10px;
}

.step p {
   font-size: 16px;
   line-height: 24px;
   font-family: "Inter";
}

.booking {
   width: 90%;
   justify-items: center;
   margin: 35px 20px;
   padding: 20px;
   border: 1px solid #e2e8f0;
   background-color: #f8fafc;
}

.btn-1 {
   margin: 10px 0px;
   display: flex;
   flex-direction: row;
   gap: 15px;
}

.btn-1 a {
   font-size: 14px;
   background: #eab308;
   color: #ffffff;
   border-radius: 10px;
   padding: 15px;
}

.btn-1 a:hover {
   background: #16A34A;
   color: #ffffff;
}

.booking-section #btn-b {
   font-size: 14px;
   margin: 10px 0px;
   background: #16A34A;
   color: #ffffff;
   border-radius: 10px;
   padding: 15px;
   width: 100%;
   display: block;
}

.booking-section #btn-b:hover {
   background: #eab308;
   color: #ffffff;
}

.cards-section {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 25px;
   margin: 70px auto;
   max-width: 1200px;
   padding: 30px;
}

.card-row {
   font-family: Inter;
   padding: 20px;
   margin: 20px 0px;
   border: 1px solid #e2e8f0;
   background-color: #f8fafc;
   border-radius: 10px;
   box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.card-row img {
   margin-top: -35px;
   border: none;
   border-radius: 10px;
   width: 100%;
}

.card-row h2 {
   font-size: 18px;
   font-weight: 600;
}

.card-row p {
   font-size: 16px;
   line-height: 24px;
   font-family: "Inter";
}
.card-row p.price{
  font-size:14px;
  padding-left: 20px;
  padding-top: 11px;
}
.price span {
   font-size: 20px;
   font-weight: 700;
} 
.cards-buttons {
   display: flex;
   gap: 20px;
   margin: 10px 0px;
}

.cards-buttons .card-button,
.cards-buttons .card-button1 {
   font-size: 14px;
   width: 50%;
   color: #000000;
   background: transparent;
   padding: 10px 20px;
   text-align: center;
   border: 1px solid #000000 !important;
   border-radius: 10px;
}

.cards-buttons .card-button:hover {
   color: #fff !important;
   background:#16A34A;
}

.cards-buttons .card-button1 {
   font-size: 14px;
   background: #16A34A;
   text-align: center;
   padding: 10px 20px;
   border: 1px solid #16A34A !important;
   color: #ffffff;
   border-radius: 10px;
}
.cards-buttons .card-button1:hover {
   color: #000 !important;
   background:#fff;
}
a.card-button.question {
  padding: 11px 20px !important;
   width: 47%;
   height: 42px;
}

.cards-buttons .card-button1:hover {
   background: #16A34A;
   color: #ffffff;
   border-radius: 10px;
}

.price p {
   font-size: 16px;
   font-family: "Inter";
}

.card-types {
   display: flex;
   width: 85%;
   padding: 50px;
   justify-items: center;
   align-items: center;
}

.types {
   width: 55%;
   justify-items: left;
   font-family: "Inter";
}

.types-img {
   margin: 0px;
}

.types h2 {
   font-size: 36px;
   line-height:54px;
   font-weight: 700;
}

.types h4 {
   font-size: 17px;
   font-weight: 600;
   margin: 20px 0px;
}

.types p {
   font-size: 17px;
   line-height: 24px;
   margin: 20px 0px;
   font-family: "Inter";
}

.types button, .types .phone {
  background: #16A34A;
   min-width:205px;
   border: 1px solid #16A34A !important;
   border-radius: 10px;
   padding: 10px 20px;
   font-size: 16px;
   color: #fff;
}
.types .phone span {
  display: inline-block;
  padding-left: 15px;
}
}
.types i {
   font-size: 16px;
   padding: 0px 10px;
   color: #ffffff;
}

.types i::before {
   padding-right: 10px;
   justify-items: center;
}

.aboutus {
   justify-content: center;
}

.aboutus h1 {
   font-size: 32px;
   font-weight: 600;
   text-align: center;
   margin: 0px;
}

.aboutus p {
   font-size: 14px;
   text-align: center;
   margin: 10px 0px;
   font-family: "Inter";
}

.experience h1 {
   font-size: 32px;
   font-weight: 600;
   text-align: center;
   margin: 0px;
}

.styled-divider {
   border: none;
   height: 1px;
   background-color: #d2d2d287;
}

.faq h1 {
   font-size: 32px;
   font-weight: 600;
   text-align: center;
   margin: 0px;
}

.faq {
   font-size: 14px;
   text-align: center;
   margin: 10px 0px;
}

.quaries {
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 0px;
   border-radius: 10px;
   margin: 40px auto;
   color: #ffffff;
   overflow: hidden;
   position: relative;
   background-image: url(../images/card_category/Action-desktop.png);
   background-size: contain;
   background-position: center;
   background-repeat: no-repeat;
   width: 100%;
   height: 400px;
}

.quaries-img {
   margin-left: 50px;
   position: relative;
   z-index: 1;
   flex: 1;
}

.quaries-img img {
   max-width: 100%;
   height: auto;
   border-radius: 10px;
}

.quaries-content {
   flex: 2;
   margin-left: 390px;
   text-align: left;
   z-index: 2;
   font-family: "Inter";
}

.quaries-content h2 {
   font-size: 28px;
   font-weight: bold;
   margin-bottom: 15px;
}

.quaries-content p {
   font-size: 16px;
   line-height: 24px;
   margin-bottom: 20px;
   font-family: "Inter";
}

.quaries-content .phone {
  font-family: "Inter";
   display: inline-flex;
   min-width: 205px;
   align-items: center;
   background: #ffffff;
   color: #145F36;
   font-size: 16px;
   font-weight: normal;
   padding: 10px 20px;
   border: none;
   border-radius: 10px;
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
   cursor: pointer;
   transition: background 0.3s ease;
}
.quaries-content .phone span{
  display: inline-block;
  padding-left: 15px;
}

.quaries-content .phone:hover {
   background: #f1f1f1;
}

.quaries i {
   font-size: 16px;
   padding: 0px 10px;
   color: #16A34A;
}

.quaries i::before {
   padding-right: 10px;
   justify-items: center;
}

.subscription {
   background: linear-gradient(to top, #020c27, #051645);
   padding: 40px;
   width: 80%;
   margin: 20px auto;
   border-radius: 10px;
   display: flex;
   align-items: center;
   color: #ffffff;
}

.subscription-content {
   width: 50%;
   padding: 30px;
}

.subscription-content h2 {
   margin-bottom: 10px;
   font-size: 22px;
   line-height: 32px;
}

.subscription-content p {
   font-size: 16px;
   line-height: 22px;
   margin: 0;
   font-family: "Inter";
}

.subscription-form {
   display: flex;
   flex-direction: column;
   padding: 30px;
   gap: 15px;
   width: 50%;
}

.subscription-form input[type="email"] {
   flex: 1;
   padding: 10px;
   border: 1px solid #b0b0b0;
   border-radius: 5px;
   outline: none;
   background: transparent;
   font-size: 16px;
}

.subscription-form button {
   padding: 10px 20px;
   border-radius: 5px;
   background-color: #16A34A;
   color: white;
   font-size: 16px;
   cursor: pointer;
   transition: background-color 0.3s ease;
   text-align: center;
}

.subscription-form button:hover {
   background-color: #16A34A;
}

@media (min-width: 769px) and (max-width: 1027px) {
   .cscsnav a {
      font-size: 12px;
   }

   .cscs-hero {
      width: 100%;
      background-color: #145f36;
      
      background-image: url(../images/card_category/hero-tablet.png) !important;
      align-items: start;
      height: 720px;
   }

   .hero-content {
      max-width: 100% !important;
      padding: 20px !important;
      padding-top: 0px !important;
     
      
   }

   .stpe {
      flex-direction: row;
      margin: 20px;
      width:100%;
      max-width: 100%;
   }

   .stpe #numb1 {
      display: block;
   }

   .stpe #numb {
      display: none;
   }

   .steps {
      grid-auto-flow: row;
      margin: 10px 10px;
      width: 100%;
   }

   .step p {
      font-size: 16px;
      line-height: 28px;
      font-family: "Inter";
   }

   .btn-1 {
      flex-direction: column;
   }

   .card-types {
      flex-direction: column-reverse;
      margin: 0px;
      padding: 0px;
   }

   .types {
      justify-items: center;
      text-align: center;
      margin-top: 30px;
      width: 100%;
   }

   .subscription {
      flex-direction: column;
      justify-content: left;
      width: 90%;
   }

   .subscription-content {
      margin: 20px 0px;
   }

   .subscription-content {
      padding: 0%;
      max-width: 60%;
   }

   .subscription-form {
      padding: 0px;
   }

   .cards-section {
      grid-template-columns: repeat(2, 1fr);
   }

   .quaries {
      flex-direction: column-reverse;
      text-align: center;
      padding: 30px 30px 0px 30px;
      width: 90%;
   }

   .quaries-content {
      text-align: center;
      margin: 0px;
   }
}

@media (min-width: 750px) and (max-width: 768px) {
   .quaries-content {
      position: relative !important;
      bottom: 29% !important;
      right: 23% !important;
      text-align: center;
   }

   .quaries-content h2 {
      font-size: 22px;
      color: #ffffff;
   }
}


@media (max-width: 750px) {

   #hero-tablet {
      display: block;
   }

   .tablet-banner {
      width: 90%;
      padding: 20px;
   }

   .tablet-content h1 {
      font-size: 22px;
      color: #ffffff;
   }

   .cscs-steps h2 {
      font-size: 24px;
      margin: 20px 20px;
   }

   .stpe {
      flex-direction: row;
      margin: 0px;
   }

   .stpe #numb1 {
      display: block;
      margin-top: 20px;
   }

   .stpe #numb {
      display: none;
   }

   .steps {
      grid-auto-flow: row;
      margin: 0px;
      width: 100%;
   }

   .steps .step {
      padding: 10px;
   }

   .step p {
      font-size: 12px;
      line-height: 18px;
      font-family: "Inter";
   }

   .cscsnav ul {
      gap: 20;
      width: 95%;
   }

   .cscsnav a {
      font-size: 10px !important;
   }

   .cscsnav li {
      padding: 5px;
   }

   .btn-1 {
      flex-direction: column;
   }

   .hero-buttons {
      display: flex;
      flex-direction: column;
      
   }

   .booking {
      padding: 0px;
      margin: 20px;
   }

   .card-types {
      flex-direction: column-reverse;
      margin: 0px;
      padding: 0px;
   }

   .types {
      justify-items: center;
      text-align: center;
      margin-top: 30px;
      width: 100%;
   }

   .types h2 {
      font-size: 24px;
   }
   .subscription {
      flex-direction: column !important;
   }

   .cards-section {
      grid-template-columns: 1fr;
   }

   .subscription {
      flex-direction: column;
      justify-content: left;
      padding: 0px;
      margin: 0px;
      width: 100%;
   }

   .subscription-form {
      padding: 0px;
      margin: 20px 0px;
   }

   .subscription-content {
      margin: 20px 0px;
      max-width: 100%;
   }

   .subscription-content {
      padding: 0%;
   }

   .subscription-content h2 {
      font-size: 20px;
      color: #ffffff;
   }

   .quaries {
      flex-direction: column-reverse;
      text-align: center;
      padding: 20px 20px 0px 20px;
      width: 90%;
   }

   .quaries-img {
      margin: 0px;
   }

   .quaries-content {
      text-align: center;
      margin: 0px;
   }


   .quaries-content h2 {
      font-size: 18px;
      color: #ffffff;
   }
}

@media (max-width: 783px) {
   .cscsnav {
      height: 100px;
   }
}

@media (max-width: 767px) {
   .cscs-hero {
      background-image: url(../images/card_category/hero-mobile.png) !important;
      background-color: #145f36;
      width: 100%;
      height: 834px;
      border-radius: 20px;
      margin-left:0;
      margin: 22px 10px;
      margin-right: 0px;
      padding: 10px 25px;
      align-items: start;
   }

   .hero-content {
      max-width: 100% !important;
      padding: 0px !important;
      /* margin-top: -120px !important; */
      text-align: center;
      position: relative;
     
      
   }

   .hero-content h1 {
      font-size: 30px;
      color: #fff;
      line-height: 130%;
      text-align: start;
   }
   .hero-content p{
      margin-top: 11px !important;
      text-align: left;
   }
   .hero-button-c{
      padding-top: 2px;
   }
   .stpe {
    width:100%; 
    max-width: 100%;
   }
   .card-types{
     width:100%;
   }
   .types-img {
       width: 100%;
       text-align:center;
    }
    .hero-button.btn-primary{
      display: flex;
      align-items: anchor-center;
      text-align: left;
      gap: 15px;
    }
}


@media only screen and (min-width: 1028px) {
   .quaries-content {
      margin-left: 550px !important;
   }

   .quaries-content p {
      max-width: 400px !important;
   }
}

@media only screen and (max-width: 480px) {

   .quaries-content {
      position: relative;
      top: 50px;
   }

}
@media only screen and (max-width: 403px) {
  a.card-button.question{
    padding: 11px 4px !important;
  }
  .cards-buttons .card-button, .cards-buttons .card-button1 {
    font-size: 13px;
  }
}

@media only screen and (max-width: 375px) {

   .hero-content h1 {
      font-size: 17px;
   }

   .quaries-content h2 {
      font-size: 15px;
      margin-top: 35px;
   }

   .quaries-content p {
      font-size: 13px;
      line-height: 19px;
      margin-bottom: 0px;
   }

   .quaries-content .phone {
      font-size: 14px;
      padding: 5px 10px;
   }
}



@media (min-width: 576px) and (max-width: 768px) {
   .cscs-hero {
      width: 100%;
      margin-left:0;
      background-color: #145f36;
      border-radius: 20px;
   }
}

@media only screen and (max-width: 1175px) {
   .quaries {
      background-image: url(../images/card_category/Action-tablet.png);
      background-size: contain;
      background-position: center;
      background-repeat: no-repeat;
      width: 100%;
      height: 530px;
   }

   .quaries-content p {
      max-width: 330px !important;
   }

   .hero-buttons {
      margin-top: 20px;
   }

}
@media only screen and (min-width: 1373px) {
   .cscs-hero {
      width: 1373px !important;
   }

}