html,body{
   margin-top: 0px;
   margin-left: 0px;
   margin-right: 0px;
   font-family: sans-serif;
   font-size: 11px;
}
.body{
   width: 84.7%;
   float: right;
   margin-top:50px;
}
a {
   /* color: #0d6efd; */
  text-decoration: none; 
}
.fa {
   font-family: var(--fa-style-family, "Font Awesome 6 Free");
   font-weight: var(--fa-style, 900);
   margin-left: 50px;
   margin-top:10px;
}




#header{
   background-color: white;
   width: 100%;
   position: fixed;
   border-bottom: 1px solid #f0f0f0;
   float: left;

   margin-top:0px;
}
.header{
   background-color: white;
   width: 100%;
   position: fixed;
   border-bottom: 1px solid #f0f0f0;
   float: left;

   margin-top:0px;
}
.logo{

  height: 30px; 
  margin-top: -10px;
  margin-left: 10px;
  margin-bottom: 10px;
  position: fixed;
}

.explore{
   /*background-color: rgb(59 130 246);*/
   color:black;
   width: 100%;
   height:auto;
   float: left;
   /*padding: 120px;*/
   text-align: center;
   /*margin-bottom: 50px;*/
   clear:both;
}

.explore h1{
  
   text-align: center;
   font-size:30;
   font-weight: bold;
}
.explore input{
   width: 20%;
   padding: 6px;
   border-radius: 6px;
   margin-top:10px;
   margin-bottom: 10px;
   color: black;
   
}
.explore button{
   padding: 6px;
   margin-left: -7px;
   background-color: white;
   border-top-right-radius: 6px;
   border-bottom-right-radius: 6px;
   box-shadow: 2px 2px orange;
}


.subjectview{
background-color:#51c2d2;
   float: left;
   margin:20px 20px 20px 20px;
  width:20%;
  height:10%;
  font-weight:700;
  font-size:16px;
   border-radius: 12px;
   text-align: center;
   padding: 30px 20px 20px 20px;
   margin-left: 10px;
   color: white; /* Set text color to white */
   justify-content:space-between;
}

   .subjectview:hover {
       background-color: #9b4c00; /* Change background color on hover */
               color:white;

   }
.subjectview img{
   text-align: center;
}
.subjectview h3{
   font-weight: bold;
}


 /*  .leftpanel{
       display: none;
   }/*
.leftpanel{
   width: 15%;
   float: left;
   border-right: 1px solid #007FFF;
   height: 90vh;
   position:fixed;
   background-color: #f0f0f0;
   overflow:auto;
   margin-top:55px;

}
.leftpanel h2{
   font-size: 15;
   font-weight: bold;
   text-align: center;
   margin-top: 10px;
   color: grey;
}
.leftpanel li{

   margin-left: -20px;
   margin-top:10px;
   list-style-type: none;
}
.leftpanel li a{
   color:#012169;
   text-decoration: none;
}
.leftpanel li a:hover .sticky{
   color:#0044cc;
}
*/
#pdf-container {
   position: relative;
   width: 100%;
   height: 90vh;
   float: left;
   margin-left: 10px;
   overflow:hidden;
}

#overlay {
   position: fixed;
   z-index: 999; /* Make sure this value is higher than the z-index of your modal */
   top: 0;
   left: 0;
   width: 81.5%;
   margin-top:4%;
   margin-left:15%;
   height: 96vh;
   background-color: rgba(0, 0, 0, 0.9); /* Semi-transparent black overlay */
   pointer-events: auto;
   overflow: auto; /* Allow scrolling through the div */
}
   #examoverlay {
      /* position: fixed;*/
       z-index:0; /* Make sure this value is higher than the z-index of your modal */
       top: 0;
       left: 0;
       width: 45%;
       margin-top:4%;
       margin-left:80%;
       height: 100px;
       background-color: rgba(255, 255, 255, 0.8); /* Semi-transparent black overlay */
       pointer-events: auto;
       overflow: auto; /* Allow scrolling through the div */
       float: right;
       backdrop-filter: blur(10px);
       
   }

.pdfbody{
   width: 74%;
   float: right;
   margin-top:0px;
   height:76vh;
   overflow:hidden;
}
.subjectmenu{
   width: 100%;
   height: 76vh;
   
}
.subjectmenu li{
   margin-left: 10px;
   margin-top:10px;
}
.subjectmenu li a{
   color: green;
   
}
.subjectmenu li a:hover{
   color: blue;  
}
.subjectmenu li a:active{
   color: blue;  
}

.topmenu {
 width: 80%;
   height: 50px;
   background-color: none;
   text-align: center;
   margin-top: 220px;
   margin-left:45px;
   /* Add the following properties */
   /*position: -webkit-sticky; /* For Safari */
   position: absolute;
   top: 0; /* Stick to the top of the viewport */
}

.sticky{
   top:-130px;
   position:fixed;
   z-index:1000;
   background-color:white;
}
.content {
 /* Add padding-top to prevent content from being overlapped by the fixed menu */
 padding-top: 90px; /* Adjust this value according to your needs */
}

.topmenu a{
   color:#0E3386;
   font-size:15px;
   padding:10px;
   text-decoration: none;
   
}
.topmenu a:hover{
background: radial-gradient(60.63% 60.63% at 57.15% 51.07%, #09acbe 0%, #37474f 100%);
background-size: cover;
background-position: center;
   color:white;
   border-radius:8px;
}
.loginform{
   width: 30%;
   height: auto;
   padding-top: 8px;
   padding-bottom:8px;
   margin-left: 35%;
   margin-top: 18%;
   border: 1px solid #ffb471;
   border-radius: 6px;
}
.loginform input,label,select{
   width: 90%;
   margin-left: 5%;
   padding-top:6px;
   padding-bottom: 6px;
   margin-top: 5px;
   margin-bottom: 5px;
}
input{
   border:1px solid #ffb471;
   padding-left:5px;
   padding-right:5px;
}
.login-logo{
   margin-top:-100px;
   position:fixed;
   text-align: center;
   margin-left: 43%;
   width:150px;
   height:150px;
}
.login-error{
   width: 20%;
   margin-left: 40%;
   padding: 6px;
   background-color: crimson;
   border: 1px solid #ffb471;
   color: white;
   margin-top:-50px;
   position: fixed;
   z-index: 10;
   border-radius: 6px;
}
.information{
   width: 30%;
   margin-top: 10px;
   margin-left: 35%;
   padding: 6px;
   color: coral;
}
.profile{
   float:right;
   margin-right:10px;
   margin-top:-10px;
}
button{
   
   padding-left: 6px;
   padding-right: 6px;
   background-color: #54C1D1;
   color: white;
   border-radius: 5px;
   text-align:center;
   font-size:18px;
   font-weight:500;
}
button:hover{
   background-color: chocolate;
}
.paymentview{
   width:25%;
   margin-left:35%;
   text-align:left;
   border:1px solid;
}
.paymentview label{
   width:100%;
   text-align:left;
}
.mobilemenu{
   display:none;
}
.menu {
   /*background-color: #F6EDFA;*/
   padding: 1px;
}

.menu-list {
   list-style-type: none;
   margin: 0;
   padding: 0;
   list-style: none;
}

.menu-list a {
   text-decoration: none;
   color: black;
   font-size: 12px;
   display: block;
   padding: 1px;
   transition: background-color 0.3s;
}

.menu-list a:hover {
   background-color: #F6EDFA;
   color:blue;
}

.submenu-list {
   display: none;
   background-color: #F6EDFA;
}

.submenu-list li {
   padding: 1px;
}
.submenu-list a[href*="t=<?php echo $t; ?>"] {
   color: blue; /* Change this to the desired highlight color */
}
.menu-list .submenu:hover .submenu-list {
   display: block;
}

.profilediv{
   width: 30%;
   border: 1px solid #ffb471;
   padding-left: 6px;
   padding-top: 6px;
   margin-left: 10px;
   margin-top: 10px;
   float: left;
}
.profilediv td{
   padding: 6px;
}
.popup {
   display: none;
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-color: rgba(0,0,0,0.7);
}

.popup-content {
   position: absolute;
   top: 20%;
   left: 50%;
   transform: translate(-50%, -50%);
   background-color: #fff;
   padding: 20px;
   border-radius: 5px;
   box-shadow: 0 4px 8px rgba(0,0,0,0.1);
   text-align: center;
   width: 40%;
}

.close {
   position: absolute;
   top: 10px;
   right: 10px;
   font-size: 20px;
   cursor: pointer;
}
.questions{
   width: 100%;
   margin-left: 10px;
}
.answers{
   width: 45%;
   float:right;
}
.subjects{
   width:80%;
   margin-left:10%;
}
.pkgs{
   width:90%;
   margin: 0 10% 0 10%;
  
   
   text-align:center;
}
@media only screen and (max-width: 760px) {
   
.body {
       width:90%;
  
}
   body {
 font-size: 14px;
     /* Adjust other styles for tablets */
   }

   .header {
   position: fixed;
   background-color: white;
   background-image: url('../images/whitebg.PNG');
   background-size: 100% auto; 
   background-repeat: no-repeat; 
   background-position: center;
   width: 100%;
   height: auto;
}
#header {
   position: fixed;
   background-color: white;
   background-image: url('../images/whitebg.PNG');
   background-size: 100% auto; 
   background-repeat: no-repeat;
   background-position: center; 
   width: 100%; 
   height: auto; 
}

.pkgs{
   width:100%;
   margin-left:2%;
}
   div{
       width: 90%;
       margin-top: 10px;
      
   }
   .subjects{
       width: 90%;
       margin-left: 2%;
   }
   .subjectview{
       width: 94%;
       margin-top:10px;
   }

   #pdf-container{
       width: 100%;
       height: 100vh;
       margin-left: 0px;
   }
   #overlay{
       display: none;
   }
   .pdfbody{
       width: 100%;
       margin-left: 0px;
   }
   .loginform{
       width: 96%;
       margin-left: 2%;
       margin-top:22%;
   }
   h1{
       font-size: 18;
   }
   .explore{
       padding-top:30%;
       padding-bottom: 80%;
       text-align: left;
   }
   .information{
       width:100%;
       margin-left:0px;
   }
   .login-logo{
       text-align: left;
       margin-left: 35%;
       margin-top:-20%;
       width : 30%;
       height:15%;
       
       
   }
   .paymentview{
       width:130%;
       margin-left:2%;
   }
   .profile{
       display:none;
   }
   .darkoverlay{
       z-index:1002;
       width:100%;
       height:100vh;
       position: fixed;
       top: 0;
       left: 0;
       background: rgba(0, 0, 0, 0.7);
       color: white;
   }
   .darkoverlay li{
       list-style:none;
       text-align:left;
       padding-top:5px;
       padding-bottom:5px;
   }
   .topmenu{
       display:none;
   }
   .mobilemenu{
       display:block;
   }
 }
 
 

/* Header */
/* Header Styles */
header {
margin-top:-40px;

}
.header-container {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding-top:10px;
   border-radius: 8px; /* Optional for rounded corners */

}

.logo {
   height: 30px;
}
.login-button {
      background: radial-gradient(60.63% 60.63% at 57.15% 51.07%, #09acbe 0%, #37474f 100%);
   color: white;

   border: none;
   padding: 2px 5px 2px 5px;
   cursor: pointer;
   border-radius: 12px;

}
 .login-button:hover{
       background: radial-gradient(60.63% 60.63% at 57.15% 51.07%, #09acbe 0%, #37474f 100%);
 }
   


.curved-header {
 background: radial-gradient(circle at 57.15% 51.07%, #00aaff 0%, #51C2D2 30%, #D8E7FF 60%, #E1F3FF 80%, #E4D7FF 90%, #005b96 100%);
   color: white;
   text-align: center;
   padding: 35px 0; /* Reduced padding to make the header shorter */
   position: relative;
}

.header-content {
   position: relative;
   z-index: 2;
}

.curved-header::after {
   content: "";
   display: block;
   position: absolute;
   bottom: -30px; /* Adjusted to control the curve depth */
   left: 0;
   width: 100%;
   height: 60px; /* Adjusted to control the curve depth */
   background: radial-gradient(circle at 57.15% 51.07%, #00aaff 0%, #51C2D2 30%, #D8E7FF 60%, #E1F3FF 80%, #E4D7FF 90%, #005b96 100%);

   border-radius: 100%/60px; /* Creates the curved effect */
}

h1 {
   margin: 0;
   font-size: 24px;
   font-weight: bold;
}

 .curved-header p{
      margin: 10px 0 0;
   font-size: 16px;

           color:#333;

}



/* Intro Section */
/*
.intro {
  text-align: center;
  padding: 50px 20px;
  background: linear-gradient(
        to left,
        #51C2D2, 
        #D8E7FF, 
        #E1F3FF,
        #E4D7FF
    );
}

.intro h1 {
  font-size: 36px;
  margin-bottom: 20px;
}

.intro p {
  font-size: 18px;
  color: #666;
}
*/

/* Courses Section */
/* Courses Section */
.courses {
  text-align: center;
  padding: 20px 20px;
  margin-top:10px;
}

.courses h2 {
  font-size: 30px;
  margin-bottom: 40px;
}

.course-grid {
display:grid;
  grid-template-columns: repeat(4, 1fr); /* 4 columns */
  gap: 5px; /* Reduced gap */
  justify-items: center;
  margin-bottom: 40px; /* Adds space below each course-grid div */
}

.course-grid p{
   color:#000;
}

.course-item {
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 10px;
  padding: 10px;
  text-align: center;
  transition: transform 0.3s;
}

.course-item:hover {
  transform: translateY(-5px);
}

.course-item img {
  width: 100px;
  margin-bottom: 10px;
}

@media (max-width: 768px) {
       
    header {
margin-top:-60px;

} 
.courses h2 {
    margin-top:-10px;
  font-size: 24px;
  margin-bottom:20px;
}
   .login-button {
    background-color:transparent;
   color: white;
   border: none;
 
   cursor: pointer;
   border-radius: 12px;
margin-left:300px;
margin-top:-20px;
}

   
.intro h1 {
   font-size:24px;
}
.intro p{
   font-size:14px;
}
.intro{
    height:25vh;
}
  .course-grid {
      grid-template-columns: repeat(2, 1fr); /* 2 columns for medium screens */
  }
}

@media (max-width: 480px) {
 
       
header {
margin-top:-60px;

} 
.courses h2 {
    margin-top:-10px;
  font-size: 24px;
  margin-bottom:20px;
} 
     .login-button{
   background-color:transparent;
   color: white;
   border: 2px solid white;

   cursor: pointer;
   border-radius: 8px;
   margin-left:280px;
   margin-top:-20px;
}
 .login-button:hover{
       background: radial-gradient(60.63% 60.63% at 57.15% 51.07%, #09acbe 0%, #37474f 100%);
 }
   
.intro h1 {
   font-size:24px;
}
.intro p{
   font-size:14px;
}
.intro{
    height:30vh;
}
  .course-grid {
      grid-template-columns: repeat(2, 1fr); /* 2 columns for small screens */
      gap: 15px; /* Adjust gap if needed for better spacing */
  }
}






.list-inline {
   display: none; /* Hide the inline list on large screens */
}

/* Medium Screens */
@media (max-width: 768px) {
    a {
   /* color: #0d6efd; */
  text-decoration: none; 
  font-size:10px;
}
   .course-grid {
       grid-template-columns: repeat(2, 1fr); /* 2 columns for medium screens */
   }
}

/* Small Screens */
@media (max-width: 480px) {
      a {
   /* color: #0d6efd; */
  text-decoration: none; 
  font-size:10px;
}
   .course-grid {
       display: none; /* Hide the course grid on small screens */
   }

   .list-inline {
       display: flex; /* Show the inline list on small screens */
       padding: 0;
       margin: 0;
       flex-wrap: wrap;
       justify-content: space-between;
   }

   .list-inline-item {
      margin-top:-20px;
       width: 45%; /* Adjust the width to fit two items per row */
       margin-bottom: 10px;
     
   }

   .card {
       width: 100%;
   }
}

/* imported */
.card {
padding:10px;
  background-color: #fff;
  border-radius: 10px;
  color: white;
  border: none;
  position: relative;
  font-weight: 500;
  font-size: 12px;
  min-width: 100px;
  margin-bottom: 20px;
  transition: all 0.5s ease-out;
  text-decoration: none;
  box-shadow: 0 0.46875rem 2.1875rem rgba(90,97,105,0.1), 0 0.9375rem 1.40625rem rgba(90,97,105,0.1), 0 0.25rem 0.53125rem rgba(90,97,105,0.12), 0 0.125rem 0.1875rem rgba(90,97,105,0.1);
}

.card:hover{
  transform: scale(1.02);
  color: rgb(34, 34, 34); 

}
.l-bg-cherry {
  border: 2px solid lightsteelblue;
    background-color: #f9f9f2;
    box-shadow: aliceblue;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    /* background: linear-gradient(to right, #493240, #f09) !important; */
    color: #333;
}

.l-bg-blue-dark {
 /* background: linear-gradient(to right, #373b44, #4286f4) !important;*/
  border: 2px solid lightsteelblue;
    background-color: #f9f9f2;
    box-shadow: aliceblue;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    /* background: linear-gradient(to right, #493240, #f09) !important; */
    color: #333;
}

.l-bg-green-dark {
/*  background: linear-gradient(to right, #0a504a, #38ef7d) !important;*/
border: 2px solid lightsteelblue;
    background-color: #f9f9f2;
    box-shadow: aliceblue;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    /* background: linear-gradient(to right, #493240, #f09) !important; */
    color: #333;
}

.l-bg-orange-dark {
 /* background: linear-gradient(to right,rgb(175, 97, 24), rgb(161, 78, 0)) !important;*/
  border: 2px solid lightsteelblue;
    background-color: #f9f9f2;
    box-shadow: aliceblue;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    /* background: linear-gradient(to right, #493240, #f09) !important; */
    color: #333;
}

.l-bg-brown-dark {
 /*background: linear-gradient(to right,rgb(175, 52, 24), rgb(161, 29, 0)) !important;*/
 border: 2px solid lightsteelblue;
    background-color: #f9f9f2;
    box-shadow: aliceblue;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    /* background: linear-gradient(to right, #493240, #f09) !important; */
    color: #333;
}

.l-bg-red-dark {
/* background: linear-gradient(to right,rgb(175, 24, 37), rgb(161, 0, 0)) !important;*/
border: 2px solid lightsteelblue;
    background-color: #f9f9f2;
    box-shadow: aliceblue;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    /* background: linear-gradient(to right, #493240, #f09) !important; */
    color: #333;
}


.card-title{
    font-size:14px;
}
.card .card-statistic-3 .card-icon {
  text-align: center;
  /*line-height: 50px;*/
  margin-left: 10px;
  color: #000;
  position: absolute;
  right: 5px;
  top: 12% ;
  opacity: 0.5;
}

.l-bg-cyan {
  /*background: linear-gradient(135deg, #289cf5, #84c0ec) !important;*/
  color: #333;
}

.l-bg-green {
 /* background: linear-gradient(135deg, #23bdb8 0%, #43e794 100%) !important;*/
  color: #333;
}

.l-bg-orange {
  background: linear-gradient(to right,rgb(6, 54, 46), rgb(0 161 133)) !important;
  color: #fff;
}

.l-bg-cyan {
/*  background: linear-gradient(135deg, #289cf5, #84c0ec) !important;*/
  color: #fff;}

 
/* end impotred */
        /*--------------------------------------------------------------
# Footer
--------------------------------------------------------------*/

/* Footer at the bottom */
#footer-new {
  position: fixed;
  bottom: 0;
  width: 100%;
  background: radial-gradient(60.63% 60.63% at 57.15% 51.07%, #09acbe 0%, #37474f 100%);
  padding: 30px 0;
  color: white;
}

/* Packages section */
.packages-new {
  padding: 30px 0;
  color: white;
}

/* Footer title styling */
.title-new {
  color: white;
  text-align: center;
  font-size: 24px;
}

/* Footer container styling */
.footer-container-new {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 10px;
  flex-wrap: wrap;
  gap: 20px;
}

/* Social media links */
.footer-social-new {
  display: flex;
  gap: 20px;
  align-items: center;
}

.footer-social-new img {
  width: 30px;
  height: 30px;
}

/* Footer links */
.footer-links-new {
  display: flex;
  gap: 10px;
  align-items: center;
}

.footer-links-new a {
  color: #ffffff;
  text-decoration: none;
}

.footer-links-new a:hover {
  text-decoration: underline;
}

/* Copyright section */
.copyright-new {
  text-align: center;
  color: white;
  align-self: center;
}


@media (max-width: 575px) {
       .curved-header p{
           color:#333;
    font-size:16px;
     margin: 10px 20px 0;


}
.curved-header::after {
  display:none;
}
.curved-header h1{
    font-size:24px;
}


}
@media only screen and (max-width: 768px) {
      .curved-header{
           background: radial-gradient(60.63% 60.63% at 57.15% 51.07%, #00aaff 0%, #005b96 100%); 
    color: white;
      }
     .curved-header p {
        margin-left: 15%;
        color: lightyellow;
        font-size: 16px;
    }
   .curved-header h1{
       margin-top:10px;
    font-size:24px;
}
    .curved-header::after {
  display:none;
}
  #main {
    margin-left: 0;
    padding-bottom: 60px; /* Ensure space for footer */
  }

}
@media (max-width: 767.98px) { /* iPhone 7 portrait mode */

   
 }
  
  
@media (min-width: 1200px) {

  .toggle-sidebar #main,
  .toggle-sidebar #footer {
    margin-left: 0;
  }}
    .test-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}


@media (min-width: 1280px) and (max-width: 1366px) {
    .body {
        width: 84%;
        margin-top: 50px;
    }

    .header, #header {
        position: fixed;
        width: 100%;
        height: 70px;
    }

    .subjectview {
        width: 18%;
        height: auto;
        padding: 30px 10px;
    }

    .course-grid {
        grid-template-columns: repeat(4, 1fr); /* Ensure 4 columns */
    }

    .loginform {
        width: 30%;
        margin-left: 35%;
        margin-top: 15%;
    }

    .curved-header h1 {
        font-size: 24px;
    }

    .curved-header::after {
        height: 50px;
        border-radius: 100% / 50px;
    }
}
@media only screen and (max-width: 375px) { /* iPhone 7 */
    .body {
        width: 100%;
        float: left;
    }

    .header, #header {
        height: 60px;
        background-size: cover;
    }

    .course-grid {
        grid-template-columns: repeat(1, 1fr); /* 1 column */
    }

    .subjectview {
        width: 100%;
        margin-top: 10px;
    }

    .loginform {
        width: 90%;
        margin-left: 5%;
    }

    .curved-header h1 {
        font-size: 16px;
    }

    .toplinks {
        padding: 5px;
        font-size: 12px;
    }
}

@media only screen and (min-width: 390px) and (max-width: 430px) { /* iPhone 13, 14, 15 */
    .body {
        width: 100%;
        margin-top: 60px;
    }

    .header, #header {
        height: 70px;
        background-size: 100%;
    }

    .subjectview {
        width: 100%;
        padding: 20px;
    }

    .loginform {
        width: 85%;
        margin-left: 7.5%;
    }

    .curved-header h1 {
        font-size: 18px;
    }

    .topmenu a {
        font-size: 14px;
        padding: 8px;
    }

    .course-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columns for medium iPhone screens */
    }

    .subscribe {
        width: 90%;
        margin-left: 5%;
    }
}

@media only screen and (max-width: 768px) { /* Tablets and smaller devices */
    .body {
        width: 95%;
        float: left;
        margin-top: 70px;
    }

    .header, #header {
        height: 65px;
        background-size: cover;
    }

    .subjectview {
        width: 95%;
        margin-top: 10px;
    }

    .loginform {
        width: 90%;
        margin-left: 5%;
        margin-top: 20%;
    }

    .course-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columns for medium screens */
    }

    .curved-header h1 {
        font-size: 20px;
    }

    .subscribe {
        width: 100%;
        margin-left: 0;
    }
}

@media (max-width: 575px) { /* Small screens */
    .footer-links-new {
        flex-direction: column;
        align-items: flex-start;
        padding: 0 10px;
    }

    .footer-social-new {
        margin-bottom: 10px;
    }

    .subscribe {
        width: 95%;
        margin-left: 2.5%;
    }

    .breadcrumb {
        font-size: 12px;
    }

    .course-grid {
        display: none;
    }

    .list-inline {
        display: flex;
        justify-content: space-between;
    }
}