/*!
Theme Name: Student Point Sikar
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: student-point-sikar
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.
.features h3
Student Point Sikar is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

@import "css/custom.css";
@import "css/woccom.css";
body, * {
   font-family: "Archivo", sans-serif;
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}
ul {
    padding-left: 25px;
}
.pl-0 {
    padding-left: 0px ! important;
}
.pr-0 {
    padding-right: 0px ! important;
}
.container {
   max-width: 1380px;
   margin: 0 auto;
   width: 100%;
   padding: 0 10px;
   box-sizing: border-box;
}
.blue_txt{
    color: #004276;
}
.orange_txt{
   color: #F68712;
}
.orangebtn{
   background: #F68712;
   color: #fff;
}
.header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 10px 0;
   /*background: white;*/
}
.logo img {
   width: 100%;
   max-width: 220px;
}
header nav ul {
   padding: 0;
   list-style: none;
   display: flex;
   gap:30px;
}
header nav ul li a {
   color: #004276;
   font-size: 20px;
   text-decoration: none;
   font-weight: 600;
   letter-spacing: 0.3px
}
.login-btn {
   color: #fff;
   padding: 15px 32px;
   border-radius: 100px;
   text-decoration: none;
   font-weight: 600;
   font-size: 20px;
}
.hero-wraper {
    background-image: url("assets/hero-sec-bg.webp");
}
.home header {
    background: #ffffffba;
}

.home .header {
    background: transparent;
}

.home section.hero {
    background-image: linear-gradient(#ffffffba 60%, #f68712 100%);
}
div#page {
    background-image: url(https://studentpointsikar.com/wp-content/themes/student-point-sikar/assets/hero-bg.webp);
    background-position: bottom;
    background-size: cover;
    background-repeat: no-repeat;
}

section.hero.no-bg {
    background-image: none;
}

.home div#page {
    background-image: none;
}
.hero {
   text-align: center;
   padding: 150px 0px 200px;
   text-align: center;
   padding: 150px 0px 250px;
   background-image: linear-gradient(#fff 60%, #F68712 100%);}
.hero h1 {
   font-size: 65px;
   font-weight: 700;
   margin: 0;
   line-height: 69px;
}
.hero p {
   font-size: 28px;
   line-height: 35px;
   font-weight: 700;
   margin: 0;
   padding-top: 10px;
   padding-bottom: 60px;
}
.hero .cta-btn {
   padding: 16px 40px;
   font-size: 20px;
   font-weight: 600;
   border-radius: 100px;
   text-decoration: none;
}
.features {
   padding: 60px 0;
}
.feature_parts .image-content {
   text-align: right;
}
.features h2 {
   font-size: 65px;
   line-height: 1.2;
   margin: 0px;
   text-align: center;
}
.features h3 {
   font-size: 48px;
   font-weight: 500;
   letter-spacing: 0.32px;
   margin: 0;
   padding-top: 20px;
   margin-bottom:10px;
}
.step p {
   font-size: 25px;
   line-height: 1.3;
}
.feature_parts {
   display: flex;
   justify-content: space-between;
   align-items: center;
   width: 100%;
   padding: 60px 0 0;
}
.feature_parts>div {
   width: 50%;
}
.feature_parts div p {
   font-size: 18px;
   font-weight: 300;
   line-height: 32px;
}
.feature_parts div ul li {
   font-size: 18px;
   font-weight: 400;
   line-height: 1.5;
   position: relative;
   margin-bottom: 5px;
}
.feature_parts div ul li:before {
   content: '';
   background-image: url(assets/check-icon.svg);
   background-position: center;
   background-size: 18px;
   width: 18px;
   height: 18px;
   position: absolute;
   left: -24px;
   top: 5px;
}
.feature_parts div ul {
   padding-left: 20px;
   list-style: none;
   margin-top: 8px;
   margin-left: 15px;
}
.divider_sec img {
   width: 100%;
}
section.divider_sec {
   display: flex;
}
.how-it-works {
   background: #0042760D;
   color: white;
   text-align: center;
   margin-top: -1px;
}
.how-it-works h2 {
   font-size: 48px;
   font-weight: 500;
   text-align: left;
   line-height: 1.2;
   margin: 0;
}
.how-it-works .how_inside {
   background-color: #F68712;
   border-radius: 50px;
   padding: 73px;
   box-sizing: border-box;
   text-align: left;
   position: relative;
   z-index: 1;
}
.how_inside:after {
   content: '';
   background-image: url(assets/how-it-works.png);
   background-position: right center;
   background-size: 445px 100%;
   background-repeat: no-repeat;
   width: 445px;
   height: 100%;
   POSITION: ABSOLUTE;
   TOP: 0;
   right: 0;
   z-index: -1;
   border-radius: 20px;
}
.steps {
   display: flex;
   justify-content: center;
   gap: 30px;
   margin-top: 20px;
   width: 100%;
   padding: 40px 40px 0 25px;
   box-sizing: border-box;
}
.step img {
   width: 100%;
   max-width: 100px;
}
.step p {
   font-size: 25px;
   line-height: 1.3;
   margin: 0px;
   padding-top: 35px;
}
.step {
   background: white;
   border-radius: 20px;
   text-align: center;
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
   width: 33%;
   padding: 50px 35px;
}
.preview_res .how_inside:after {content: none !important;
}
.preview_res .how_inside {
   display: flex;
   justify-content: space-between;
   width: 100%;
   padding: 0;
   overflow: hidden;
}
.slide_img {
   width: 28%;
}
.ressource_slider {
   width: 72%;
   padding-left: 60px !important;
   display: flex;
   flex-direction: column;
   justify-content: center;
   padding: 50px 0;
}
.ressource_slider .step{
   width: 100%;
}
.ressource_slider .step img {
   max-width: 100px !important;
   margin: 0 auto;
}
.ressource_slider .slider {
   padding-top: 60px;
   margin-right: -80px !important;

}
.ressource_slider .step h3 {
   font-size: 25px;
   line-height: 1.2;
   font-weight: 700;
   padding: 20px 0 30px;
}
.ressource_slider .step a {
   text-decoration: none;
   padding: 16px 30px;
   display: inline-block;
   border-radius: 50px;
}
.ressource_slider ul.slick-dots {
   bottom: -44px;
   left: -33px;
}
.slide_img img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   border-radius: 50px;
}
.ressource_slider .slick-prev,.ressource_slider .slick-next {
   display: none !important;
}
.ressource_slider .slick-dots li button:before {
   font-size: 55px;
   color: #fff;
}
/* -----slick css----- */
.slick-slide {
 margin: 0px 10px;
}

.slick-prev:before,
.slick-next:before {
 color: black;
}
.slick-slide {
 transition: all ease-in-out .3s;
}
/* -----slick css----- */

.success_stories {
   background: #F2F6F8;
   text-align: center;
   padding: 100px 0 150px;
}
.success_stories {
   background: #F2F6F8;
   text-align: center;
   padding: 100px 0;
}
.success_stories h2,.blog_sec h2,.video-showcase h2 {
   font-size: 65px;
   line-height: 1.2;
   padding-bottom: 12px;
}
.success_stories .slick-slide {
   background: #F687121C;
   padding: 0 30px 60px;
   border-radius: 20px;
   border: 1px solid #F68712;
}
.success_stories .slick-slide img {
   margin: auto;
   margin-top: -55px;
   z-index: 99999;
   overflow: visible;
   border: 3px solid #ffffff;
    border-radius: 999px;
}

.success_stories .slider {
   width: 70%;
   margin: 0 auto;
}
.success_stories .slick-slide p {
   margin: 47px 20px;
   font-size: 30px;
   color: #727272;
   line-height: 1.3;
   position: relative;
}
.success_stories .slick-list {
   padding-top: 56px;
}
.success_stories .slick-prev:before,.success_stories .slick-next:before {
   content: '' !important;
   background-image: url(assets/orangenav.svg);
   background-repeat: no-repeat;
   position:absolute;
   top: 0;
   left: 0;
   background-size: 40px;
   width: 40px;
   height: 40px;
   opacity: 1;
}
.success_stories .slick-slide p:before {
   content: '' !important;
   background-image: url(assets/fancyquotesa.svg);
   background-repeat: no-repeat;
   position: absolute;
   top: -54px;
   left: 0;
   background-size: 120px;
   width: 120px;
   height: 100%;
   opacity: 1;
   z-index: 999;
}
.success_stories p.auth:before {
   content: none !important;
}
.success_stories .slick-prev:before {
   left: -35px;
}
.success_stories  .slick-next {
   right: -45px;
}
.success_stories .slick-next:before {
   transform: rotate(180deg);
}
.success_stories .slick-dots li button:before{
   font-size: 55px;
   color: #F68712;
}
.success_stories .slick-dots li {
   margin: 0px;
}
.success_stories  .slick-dots {
   bottom: -58px;
}
.blog_sec {
   text-align: center;
   background: #D9D9D9;
   padding: 80px 0;
}
.blog-posts {
   display: flex;
   justify-content: center;
   gap: 40px;
   flex-wrap: wrap;
   padding: 50px 80px 50px;
   width: 100%;
}
.blog-card {
   background: white;
   border-radius: 10px;
   overflow: hidden;
   width: 300px;
   box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.1);
   text-align: center;
   background: #ff8000;
   width: calc(100% / 3 - 27px);
}
.blog-card img {
   width: 100%;
   height: auto;
}

.blog-content {
   background: #ff8000;
   color: white;
   padding: 10px 20px 35px;
}

.blog-content h3 {
   font-size: 24px;
   line-height: 1.2;
   padding: 10px 0;
}
.blog-content h3 a {
    font-size: inherit;
    color: inherit;
    text-decoration: none;
}
.blog-content p {
   font-size: 18px;
   line-height: 1.5;
   font-weight: 300;
}
/* Read More Button */
.read-more {
   padding: 14px 35px;
   font-size: 15px;
   border-radius: 5px;
   cursor: pointer;
   margin-top: 30px;
   border: none;
   border-radius: 50px;
}
p.auth {
   margin: 0px !important;
   color: #F68712 !important;
   font-size: 22px !important;
   line-height: 1.3 !important;
   font-weight: 700 !important;
}
p.auth span {
   font-size: 16px;
   line-height: 1.2;
   font-weight: 400;
}
.success_stories p {
   font-size: 18px;
   line-height: 1.2;
   font-weight: 300;
   margin-bottom: 50px;
}
.footer-bottom {
   background: #F68712;
   text-align: center;
   padding: 14px 0;
}
.footer-bottom p {
   font-size: 18px;
   line-height: 25px;
   font-weight: 300;
   letter-spacing: 4px;
   margin: 0px;
   color: #fff;
}
.footer {
   background-color: #D9D9D9;
   padding: 60px 0px;
   margin-top: 40px;
}
.footer img {
   width: 100%;
   max-width: 200px;
}
.footer p {
   font-size: 18px;
   line-height: 1.4;
   font-weight: 300;
}
.footer-content {
   display: flex;
   flex-wrap: nowrap;
}
.footer h4 {
   font-size: 18px;
   font-weight: 600;
   margin-bottom: 20px;
}
.contact_foot p {
   padding-bottom: 10px;
}
.footer ul li a, .contact_foot p a, .contact_foot p {
   text-decoration: none;
   font-size: 14px;
   color: #000;
   font-weight: 500;
}
.footer-content>div {
   width: 20%;
}
.foot_info {
   width: 34% !important;
   padding-right: 78px;
}
.social_img {
    max-width: 30px;
    padding-top: 10px;
    max-height: 30px;
    width: 30px;
    height: 30px;
    margin-top: 20px;
}
.social_img_wrap {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
}
.footer ul {
padding: 0;   
list-style: none;
}
.footer ul li {
 margin-bottom: 10px;
   }
.panel {
   padding: 0 18px;
   display: none;
   background-color: white;
   overflow: hidden;
 }
 .accordion {
   background-color: #fff;
   color: #444;
   cursor: pointer;
   padding: 18px;
   width: 100%;
   border: navajowhite;
   text-align: left;
   outline: none;
   transition: 0.4s;
   display: flex;
   align-items: center;
   justify-content: space-between;
   border-bottom: 1px solid transparent;
   border-radius: 20px;
}
button.accordion.active {
   border-color: #C2C2C2;
}
span.accordion_subject {
   font-size: 18px;
   color: #F68712;
   line-height: 1.5;
   font-weight: 600;
}
.accordion .icon_holder {
   width: 30px;
   height: 30px;
   display: flex;
   align-items: center;
   justify-content: center;
   border-radius: 50%;
   background: #F1F5EB;
}
.accordion .icon_holder img.minus_icon {
   display: none;
}
button.accordion.active img.plus_icon {
   display: none;
}

button.accordion.active img.minus_icon {
   display: block;
}
.accordion_main {
   max-width: 850px;
   margin: 40px auto 0;
}
button.accordion.active .icon_holder {
   background: #F68712;
}
.accordion_single:not(:last-child) {
   margin: 0 0 20px;
}
.accordion_single{
   border: 1px solid #F68712;
   border-radius: 20px;
   overflow: hidden;
}
section.faq_sec h2 {
   font-size: 65px;
   line-height: 1.2;
   padding-bottom: 12px;
   text-align: center;
}
section.faq_sec {
   padding: 80px 0;
}
.accordion_single .panel {
   padding: 20px 30px;
}
.accordion_single .panel {color: #727272;}
.accordion_single .panel p {
   font-size: 16px;
   line-height: 1.6;
}
.our_apps {
   background: url('./assets/last_section_bg.png') center / 122% 100% no-repeat #fff;
   padding: 80px 0;
}
.our_apps h2 {
   font-size: 65px;
   line-height: 1.2;
   padding-bottom: 12px;
   text-align: center;
}
.our_apps h5 {
   font-size: 25px;
   font-weight: 700;
   line-height: 1.4;
   color: #00000099;
   text-align: center;
}
.our_apps .play_buttons_row {
   display: flex;
   justify-content: space-between;
   max-width: 750px;
   margin: 70px auto 130px;
}
.our_apps .play_buttons_row img {max-height: 100px;width: auto;}

.our_apps .play_buttons_col {
   display: flex;
}
img.big_image {
   width: 100%;
}
.subscription {
   text-align: center;
   padding: 60px 20px;
}
.subscription-content li {
    text-align: left;
    line-height: 1.2;
    margin-bottom: 6px;
    list-style-type: disclosure-closed;
    color: #F68712;
    
}

.subscription-content li:not(:last-child) {
    border-bottom: dashed 1px #ffd8b1;
    padding-bottom: 14px;
    padding-top: 6px;
}

.subscription-content li::marker {
    color: #F68712;
}

.subscription-content {
   padding: 30px;
}
.subscription-content a {
   background: #ff8000;
   color: white;
   border: none;
   padding: 15px 20px;
   font-size: 18px;
   margin-top: 80px;
   display: inline-block;
   text-decoration: none;
   border-radius: 50px;
}

.subscription-content a:hover {
   background: #e66f00;
}
.subscription h2 {
   font-size: 48px;
   color: #F68712;
   font-weight: 500;
   margin: 0;
   line-height: 1.4;
}
.subscription-card { /* ------------- repeated -------------- */
   background: white;
   border-radius: 20px;
   box-shadow: 0px 0px 60px 0px #00000021;
   max-width: 1200px;
   margin: 60px auto 0;
   overflow: hidden;
   padding: 0;
   border: none;
   width:30%;
}
.subscription-header { /* ------------- repeated -------------- */
   background: #ff8000;
   padding: 30px;
}
.subscription-header h3{
   color: white;
   font-family: "Plus Jakarta Sans", sans-serif;
   font-size: 30px;
   font-weight: 500;
   line-height: 1.4;
   margin: 0;
}
.subscription-content h2 { /* ------------- repeated -------------- */
   font-size: 50px !important;
   margin: 0 0 44px;
   font-weight: 700;
   color: #ff8000;
   font-family: "Plus Jakarta Sans", sans-serif;
   line-height: 1.2;
   padding: 0 0 30px;
   position: relative;
}
.subscription-content span { /* ------------- repeated -------------- */
   font-size: 22px;
   color: #F68712;
}
.subscription-content h2::after {
   content: '';
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   margin: 0 auto;
   height: 1px;
   background: #E3DBD8;
   max-width: 300px;
}
.subscription-content p {
   line-height: 1.8;
   margin: 0;
   color: #F68712;
   font-weight: 700;
}
.subscription-content button {
   border-radius: 50px !important;
   font-size: 15px;
   line-height: 1.8;
   padding: 12px 30px;
   font-family: 'Archivo';
   font-weight: 400;
   letter-spacing: 0.5px;
   margin-top: 80px;
}
img.subscription_divider {
   width: 100%;
   display: block;
   margin-bottom: -1px;
}
/* Responsive Design */
@media only screen and (max-width:1024px){
   .hero {
      padding: 65px 0px 100px;
  }
  .hero h1 {
   font-size: 50px;
   line-height: 53px;
}
.hero p {
   font-size: 22px;
   line-height: 33px;
   padding-bottom: 40px;
}
.features h2,.how-it-works h2,.subscription h2,.subscription .subscription-content h2,.success_stories h2, .blog_sec h2,section.faq_sec h2,.our_apps h2 {
   font-size: 45px !important;
}
.our_apps {
   padding: 55px 0;
}
.our_apps .play_buttons_row {
   margin: 50px auto 40px;
}
.subscription-content h2 {
   margin: 0 0 25px !important;
   padding: 0 0 15px !important;
}
.features h3 {
   font-size: 35px;
}
.feature_parts div p {
   font-size: 16px;
   line-height: 27px;
   margin-bottom: 20px;
}
.feature_parts div ul li {
   font-size: 16px;
   line-height: 1.5;
}
.how-it-works .how_inside {
   padding: 25px 0px;
}
.steps {
   padding: 10px 40px 0 25px;
}
.step {
   padding: 40px 20px;
}
.step p {
   font-size: 18px;
   padding-top: 14px;
}
   header nav ul li a {
      font-size: 14px;
  }
  header nav ul {
      gap: 15px;
  }
  .login-btn {
   padding: 8px 15px;
   font-size: 14px;
}
.logo img {
   max-width: 120px;
}
.subscription-card {
   margin: 35px auto 0;
}
.subscription-header {
   padding: 12px !important; 
}
.subscription-content a {
   margin-top: 25px !important;
}
.ressource_slider .slider {
   padding-top: 25px;
   margin-right: -80px !important;
}
.ressource_slider {
   padding-left: 25px !important;
}
.ressource_slider .step h3 {
   font-size: 18px;
   padding: 15px 0 10px;
}
.success_stories {
   padding: 60px 0 100px;
}
.success_stories .slick-slide p {
   margin: 30px 20px;
   font-size: 20px;
}
.blog_sec {
   padding: 40px 0;
}
.blog-posts {
   gap: 20px;
   padding: 50px 0px 10px;
}
.blog-content h3 {
   font-size: 22px;
   padding: 10px 0;
}
.blog-content p {
   font-size: 15px;
}
section.faq_sec {
   padding: 60px 0;
}
}
@media only screen and (max-width:1380px){
.container{
   max-width: 94%;
}
}
@media (max-width: 768px) {
    .subscription-card{ width:100%;}
   .how-it-works .how_inside {
      padding: 25px 15px;
   }
   .steps {
       gap: 10px;
       margin-top: 20px;
       padding: 40px 40px 0 25px;
    }
    .how_inside:after {
       background-size: 340px 100%;
       width: 340px;
    }
   .feature_parts {
      padding: 20px 0 0;
      gap: 12px;
   }
   .blog-posts {
       flex-direction: column;
       align-items: center;
   }

   .blog-card {
       width: 90%;
   }
   .how-it-works h2 {
      font-size: 35px !important;
   }
   .ressource_slider .step a {
      padding: 10px 12px;
   }
    .footer p {
       font-size: 14px;
    }
    .foot_info {
       padding-right: 30px;
    }
}
@media only screen and (max-width:767px){
   .success_stories .slick-slide {
      padding: 0 0px 16px;
  }
  .success_stories .slider {
   width: 90%;
}
.success_stories .slick-next {
   right: -24px;
}
.success_stories  .slick-prev {
   left: 0px;
}
.foot_info,.footer-content>div   {
   width: 100% !important;
}
.footer-content>div {
   padding-top: 40px;
}
.footer-content{
   flex-direction: column;
}
.footer {
   padding: 0px 0px 40px;
}
.foot_info {
   padding-right: 0;
}
.footer-bottom p {
   font-size: 14px;
   letter-spacing: 1px;
}

.success_stories .slick-prev:before, .success_stories .slick-next:before {
   background-size: 30px;
   width: 30px;
   height: 30px;
}
.success_stories .slick-slide p {
   margin: 30px 10px 15px;
   font-size: 16px;
}
   .container{
      max-width: 90%;
   }
   .hero h1 {
      font-size: 35px;
      line-height: 38px;
  }
  .hero p {
   font-size: 16px;
   line-height: 25px;
   padding-bottom: 40px;
}
.hero .cta-btn {
   padding: 15px 25px;
   font-size: 15px;
}
.hero {
   padding: 65px 0px 65px;
}
.features h2, .how-it-works h2, .subscription h2, .subscription .subscription-content h2, .success_stories h2, .blog_sec h2, section.faq_sec h2, .our_apps h2 {
   font-size: 30px !important;
}
.feature_parts>div,.step,.slide_img,.ressource_slider {
   width: 100%;
}
.steps {
   padding: 40px 5px 0 5px;
}
.feature_parts{
   padding: 5px 0 0;
}
.steps,.feature_parts,.how-it-works .how_inside{
   flex-wrap: wrap;
}
.features h3 {
   font-size: 22px;
   margin-bottom: 7px;
}
.feature_parts .image-content img {
   width: 100%;
}
.subscription-header h3 {
   font-size: 20px;
}
.subscription {
   padding: 35px 20px;
}
.ressource_slider .slider {
   padding-top: 15px;
   margin-right: 0 !important;
}
.ressource_slider {
   padding-left: 0px !important;
}
.our_apps .play_buttons_row img {
   max-width: 140px;
}
.ressource_slider ul.slick-dots {
   left: 0;
}
}

@media (max-width: 991px){
   .hidden_on_mobile{
      display: none;
   }
   .off_canvas__menu {
      position: fixed;
      left: 0;
      top: 0;
      height: 100%;
      width: 100%;
      background: linear-gradient(320deg, #fff 2%, #F68712 100%);
      z-index: 10;
      padding: 60px 50px;
      opacity: 0;
      transform: translate(-100%, 0) scale(.5);
      transition: transform 0.6s cubic-bezier(0, 0, 0.35, 0.83), opacity 0.5s ease-in;
      /* transition: transform 1s ease, border-radius 1.3s ease; */
  }
  .off_canvas__trigger {
      display: flex;
      flex-flow: column;
      gap: 5px;
      cursor: pointer;
   }

   .off_canvas__trigger .line {
      height: 4px;
      width: 30px;
      display: flex;
      border-radius: 50px;
      background: linear-gradient(45deg, #004276, #f68712);
   }
   body.menu_opened {
      overflow-y: hidden;
   }
   
   .off_canvas__menu.visible {
      transform: translate(0%, 0%);
      opacity: 1;
   }
   .off_canvas__menu .close_trigger .close_line {
      height: 4px;
      width: 30px;
      display: flex;
      border-radius: 50px;
      background: #004276;
      position: absolute;
  }
  
  .off_canvas__menu span.close_line.line_1 {
      transform: rotate(45deg);
  }
  
  .off_canvas__menu .close_trigger {
      position: absolute;
      right: 30px;
      top: 30px;
      width: 30px;
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
  }
  
  .off_canvas__menu span.close_line.line_2 {
      transform: rotate(135deg);
  }
  .off_canvas__menu ul {
   list-style: none;
   margin: 40px 0 30px;
}
.off_canvas__menu ul li a {
   text-decoration: none;
   color: #004276;
   font-weight: 700;
   font-size: 18px;
   line-height: 1.2;
}
.off_canvas__menu ul li:not(:last-child) {margin: 0 0 20px;}
}

@media (min-width: 992px){
   .off_canvas__menu{
      display: none;
   }
}
.tab-button {
    padding: 15px 40px;
    border-radius: 38px;
    font-size: 25px;
    letter-spacing: 1px;
    border: none;
    background-color: #F68712;
    color: white;
    opacity: 0.5;
    margin: 30px 20px 0px 20px;
    cursor: pointer;
}

.tab-button.active {
    border: 3px solid #f5acac;
    opacity: 1;
}

.blog-posts.active {}

.plans.active {
    display: flex;
}

.plans {
    display: none;
}

/* Service section */
.services-section {
    padding: 88px 0 110px;
}
.service-section-inner {
    display: flex;
    justify-content: center !important;
    gap: 18px;
}
.service-item {
    position: relative;
    border: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.5s ease-in-out;
}
@media screen and (min-width: 1025px) {
    .service-item {
        position: relative;
        border: 12px;
        overflow: hidden;
        max-width: 180px;
        min-width: 180px;
        height: 500px;
        cursor: pointer;
        transition: all 0.5s ease-in-out;
    }
}
@media screen and (min-width: 1200px) {
    .service-item {
        max-width: 200px;
        min-width: 200px;
    }
}
@media screen and (min-width: 1400px) {
    .service-item {
        max-width: 236px;
        min-width: 236px;
    }
}
@media screen and (min-width: 1025px) {
    .service-item.active {
        width: 100%;
        max-width: 532px;
    }
}
@media screen and (min-width: 1025px) {
    .service-item {
        position: relative;
        border: 12px;
        overflow: hidden;
        max-width: 180px;
        min-width: 180px;
        height: 500px;
        cursor: pointer;
        transition: all 0.5s ease-in-out;
    }
}

.service-image {
    height: 100%;
    border-radius: 12px;
    overflow: hidden;
}
.service-title {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    text-align: center;
    transition: opacity 0.3s ease-in-out;
    transition-delay: 0s;
}
@media screen and (min-width: 1025px) {
    .service-title {
        display: none;
        opacity: 0;
    }
}
@media screen and (min-width: 1025px) {
    .service-item.active .service-title {
        opacity: 1;
        display: block;
        transition-delay: 0.3s;
    }
}
.service-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
section.services-section .content {
    margin-bottom: 50px;
}
section.services-section .content p {
    line-height: 40px;
    font-size: 18px;
    font-weight: 300;
    letter-spacing: 0;
    margin-bottom: 15px;
}

/* Video section */
 .video-showcase {
    text-align: center;
    padding: 80px 0;
    max-width: 1200px;
    margin: 0 auto;
}

.section-header {
    text-align: center;
    margin-bottom: 50px;
}

.section-title {
    font-size: 2.5rem;
    color: #2c5aa0;
    margin-bottom: 15px;
    font-weight: 700;
}

.section-subtitle {
    font-size: 1.2rem;
    color: #666;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

.video-container {
    background: white;
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
    overflow: hidden;
    margin-bottom: 30px;
    position: relative;
}

.main-video {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    background: #f0f0f0;
}

.main-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.video-info {
    padding: 20px 30px;
    background: linear-gradient(135deg, #2c5aa0 0%, #1e3a72 100%);
    color: white;
    text-align: center;
}

.video-title {
    font-size: 1.4rem;
    margin-bottom: 8px;
    font-weight: 600;
}

.video-description {
    opacity: 0.9;
    line-height: 1.5;
}

.video-thumbnails {
    display: flex;
    gap: 15px;
    padding: 25px;
    overflow-x: auto;
    background: #f8f9fa;
    scrollbar-width: thin;
    scrollbar-color: #ff6b35 #e0e0e0;
}

.video-thumbnails::-webkit-scrollbar {
    height: 8px;
}

.video-thumbnails::-webkit-scrollbar-track {
    background: #e0e0e0;
    border-radius: 10px;
}

.video-thumbnails::-webkit-scrollbar-thumb {
    background: #ff6b35;
    border-radius: 10px;
}

.video-thumbnails::-webkit-scrollbar-thumb:hover {
    background: #e55a2b;
}

.thumbnail {
    min-width: 160px;
    height: 90px;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 3px solid transparent;
    position: relative;
    background: white;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.thumbnail:hover {
    transform: translateY(-5px);
    border-color: #ff6b35;
    box-shadow: 0 8px 25px rgba(255, 107, 53, 0.3);
}

.thumbnail.active {
    border-color: #2c5aa0;
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 8px 25px rgba(44, 90, 160, 0.4);
}

.thumbnail img {
    width: 100%;
    height: 70px;
    object-fit: cover;
}

.thumbnail-title {
    padding: 5px 8px;
    font-size: 11px;
    color: #333;
    text-align: center;
    font-weight: 500;
    line-height: 1.2;
    height: 20px;
    overflow: hidden;
}

.play-overlay {
    position: absolute;
    top: 25px;
    left: 50%;
    transform: translateX(-50%);
    width: 35px;
    height: 35px;
    background: rgba(255, 107, 53, 0.9);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 14px;
    transition: all 0.3s ease;
}

.thumbnail:hover .play-overlay {
    transform: translateX(-50%) scale(1.2);
    background: rgba(255, 107, 53, 1);
}

.view-all-section {
    text-align: center;
    padding: 30px;
    background: white;
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.view-all-btn {
    background: linear-gradient(135deg, #ff6b35 0%, #f7931e 100%);
    color: white;
    border: none;
    padding: 15px 40px;
    border-radius: 50px;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
}

.view-all-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 15px 35px rgba(255, 107, 53, 0.4);
}

.entry-content.container h2 {
    font-size: 160%;
    margin-bottom: 10px;
    margin-top: 15px;
    font-weight: 500;
}
.entry-content.container h3 {
    font-size: 140%;
    margin-bottom: 10px;
    margin-top: 15px;
    font-weight: 500;
}
.post-thumbnail img {
    max-width: 100%;
    object-fit: contain;
    max-height: max-content;
}
article.post {
    line-height: 1.5;
}
article.post h2{
    font-size: 160%;
    font-weight: 600;
    margin-bottom: 10px;
}
article.post h3{
    font-size: 150%;
    font-weight: 500;
    margin-bottom: 10px;
}

article.post p{
    font-weight: 200;
    margin-bottom: 15px;
}
article.post footer.entry-footer {
    display: grid;
    gap: 12px;
}

article.post footer.entry-footer a {
    background-color: #ffeedc;
    padding: 5px 10px;
    border-radius: 4px;
    color: #000000;
    text-decoration: none;
    width: auto;
    margin: auto 2px auto 5px;
}

article.post footer.entry-footer span {
    display: flex;
    flex-wrap: wrap;
    row-gap: 10px;
}
.blog .pagination .page-numbers {
    padding: 10px 15px;
    background: #004276;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    opacity:0.8;
}
.blog .pagination .page-numbers.current {
    opacity:1;
}
.blog .pagination a.page-numbers:hover{
    opacity:1;
}
@media (max-width: 768px) {
    .section-title {
        font-size: 2rem;
    }
    
    .thumbnail {
        min-width: 140px;
        height: 80px;
    }
    
    .thumbnail img {
        height: 60px;
    }
    
    .video-info {
        padding: 15px 20px;
    }
    
    .video-title {
        font-size: 1.2rem;
    }
}

@media (max-width: 480px) {
    .thumbnail {
        min-width: 120px;
        height: 70px;
    }
    
    .thumbnail img {
        height: 50px;
    }
    
    .thumbnail-title {
        font-size: 10px;
        padding: 3px 5px;
    }
}