/*

TemplateMo 569 Edu Meeting

https://templatemo.com/tm-569-edu-meeting

*/

/* ---------------------------------------------
Table of contents
------------------------------------------------
01. font & reset css
02. reset
03. global styles
04. header
05. banner
06. features
07. testimonials
08. contact
09. footer
10. preloader
11. search
12. portfolio

--------------------------------------------- */
/* 
---------------------------------------------
font & reset css
--------------------------------------------- 
*/
@import url("https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900");
@import url("https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Poppins:wght@600&display=swap");

/* 
---------------------------------------------
reset
--------------------------------------------- 
*/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
div pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
figure,
header,
nav,
section,
article,
aside,
footer,
figcaption {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
}

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

.clearfix {
  display: inline-block;
}

html[xmlns] .clearfix {
  display: block;
}

* html .clearfix {
  height: 1%;
}

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

header,
nav,
section,
article,
aside,
footer,
hgroup {
  display: block;
}

* {
  box-sizing: border-box;
}

html,
body {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  background-color: #fff;
  font-size: 16px;
  -ms-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  text-decoration: none !important;
  color: #fc3;
}

a:hover {
  color: white;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0px;
  margin-bottom: 0px;
}

ul {
  margin-bottom: 0px;
}

p {
  font-size: 14px;
  line-height: 25px;
  color: #2a2a2a;
}

img {
  width: 100%;
  overflow: hidden;
}

/* 
---------------------------------------------
global styles
--------------------------------------------- 
*/
html,
body {
  background: #fff;
  font-family: "Poppins", sans-serif;
}

html {
  scroll-behavior: smooth;
}

::selection {
  background: #f5a425;
  color: #fff;
}

::-moz-selection {
  background: #f5a425;
  color: #fff;
}

@media (max-width: 991px) {

  html,
  body {
    overflow-x: hidden;
  }

  .mobile-top-fix {
    margin-top: 30px;
    margin-bottom: 0px;
  }

  .mobile-bottom-fix {
    margin-bottom: 30px;
  }

  .mobile-bottom-fix-big {
    margin-bottom: 60px;
  }
}

.main-button-red a {
  font-size: 13px;
  color: #fff;
  background-color: #1b3058;
  padding: 12px 30px;
  display: inline-block;
  border-radius: 22px;
  font-weight: 500;
  text-transform: uppercase;
  transition: all 0.3s;
}

.main-button-red a:hover {
  opacity: 0.9;
}

.main-button-yellow a {
  font-size: 13px;
  color: #fff;
  background-color: #f5a425;
  padding: 12px 30px;
  display: inline-block;
  border-radius: 22px;
  font-weight: 500;
  text-transform: uppercase;
  transition: all 0.3s;
}

.main-button-yellow a:hover {
  opacity: 0.9;
}

.section-heading h2 {
  line-height: 40px;
  margin-top: 0px;
  margin-bottom: 50px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(250, 250, 250, 0.15);
  font-size: 22px;
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
}

/* 
---------------------------------------------
header
--------------------------------------------- 
*/

.sub-header {
  background-color: #1b3058;
  position: relative;
  z-index: 1111;
}

.sub-header .left-content p {
  color: #fff;
  padding: 8px 0px;
  font-size: 13px;
}

.sub-header .right-icons {
  text-align: right;
  padding: 8px 0px;
}

.sub-header .right-icons ul li {
  display: inline-block;
  margin-left: 15px;
}

.sub-header .right-icons ul li a {
  color: #fff;
  font-size: 14px;
  transition: all 0.3s;
}

.sub-header .right-icons ul li a:hover {
  color: #f5a425;
}

.sub-header .left-content p em {
  font-style: normal;
  color: #f5a425;
}

.background-header {
  background-color: #fff !important;
  height: 80px !important;
  position: fixed !important;
  top: 0 !important;
  left: 0;
  right: 0;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15) !important;
}

.background-header .main-nav .nav li a {
  color: #1e1e1e !important;
}

.background-header .logo,
.background-header .main-nav .nav li a {
  color: #1e1e1e !important;
}

.background-header .main-nav .nav li:hover a {
  color: #fb5849 !important;
}

.background-header .nav li a.active {
  color: #fb5849 !important;
}

.header-area {
  background-color: rgba(250, 250, 250, 0.15);
  position: absolute;
  top: 40px;
  left: 0;
  right: 0;
  z-index: 100;
  -webkit-transition: all 0.5s ease 0s;
  -moz-transition: all 0.5s ease 0s;
  -o-transition: all 0.5s ease 0s;
  transition: all 0.5s ease 0s;
}

.header-area .main-nav {
  min-height: 80px;
  background: transparent;
}

.header-area .main-nav .logo {
  line-height: 100px;
  color: #fff;
  font-size: 28px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 2px;
  float: left;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
}

.background-header .main-nav .logo {
  line-height: 75px;
}

.background-header .nav {
  margin-top: 20px !important;
}

.header-area .main-nav .nav {
  float: right;
  margin-top: 30px;
  margin-right: 0px;
  background-color: transparent;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  position: relative;
  z-index: 999;
}

.header-area .main-nav .nav li {
  padding-left: 12px;
  padding-right: 11px;
}

.header-area .main-nav .nav li:last-child {
  padding-right: 0px;
}

.header-area .main-nav .nav li a {
  display: block;
  font-weight: 600;
  font-size: 13px;
  text-transform: uppercase;
  color: #fff;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  height: 40px;
  line-height: 40px;
  border: transparent;
  letter-spacing: 1px;
}

.header-area .main-nav .nav li:hover a,
.header-area .main-nav .nav li a.active {
  color: #f5a425 !important;
}

.background-header .main-nav .nav li:hover a,
.background-header .main-nav .nav li a.active {
  color: #f5a425 !important;
  opacity: 1;
}

.header-area .main-nav .nav li.has-sub {
  position: relative;
  padding-right: 15px;
}

.header-area .main-nav .nav li.has-sub:after {
  font-family: FontAwesome;
  content: "\f107";
  font-size: 12px;
  color: #fff;
  position: absolute;
  right: 5px;
  top: 12px;
}

.background-header .main-nav .nav li.has-sub:after {
  color: #1e1e1e;
}

.header-area .main-nav .nav li.has-sub ul.sub-menu {
  position: absolute;
  width: 320px;
  box-shadow: 0 2px 28px 0 rgba(0, 0, 0, 0.06);
  overflow: hidden;
  top: 40px;
  opacity: 0;
  transition: all 0.3s;
  transform: translateY(+2em);
  visibility: hidden;
  z-index: -1;
}

.header-area .main-nav .nav li.has-sub ul.sub-menu li {
  margin-left: 0px;
  padding-left: 0px;
  padding-right: 0px;
}

.header-area .main-nav .nav li.has-sub ul.sub-menu li a {
  opacity: 1;
  display: block;
  background: #f7f7f7;
  color: #2a2a2a !important;
  padding-left: 20px;
  height: 40px;
  line-height: 40px;
  -webkit-transition: all 0.3s ease 0s;
  -moz-transition: all 0.3s ease 0s;
  -o-transition: all 0.3s ease 0s;
  transition: all 0.3s ease 0s;
  position: relative;
  font-size: 13px;
  font-weight: 400;
  border-bottom: 1px solid #eee;
}

.header-area .main-nav .nav li.has-sub ul li a:hover {
  background: #fff;
  color: #f5a425 !important;
  padding-left: 25px;
}

.header-area .main-nav .nav li.has-sub ul li a:hover:before {
  width: 3px;
}

.header-area .main-nav .nav li.has-sub:hover ul.sub-menu {
  visibility: visible;
  opacity: 1;
  z-index: 1;
  transform: translateY(0%);
  transition-delay: 0s, 0s, 0.3s;
}

.header-area .main-nav .menu-trigger {
  cursor: pointer;
  display: block;
  position: absolute;
  top: 33px;
  width: 32px;
  height: 40px;
  text-indent: -9999em;
  z-index: 99;
  right: 40px;
  display: none;
}

.background-header .main-nav .menu-trigger {
  top: 23px;
}

.header-area .main-nav .menu-trigger span,
.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  background-color: #1e1e1e;
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  left: 0;
}

.background-header .main-nav .menu-trigger span,
.background-header .main-nav .menu-trigger span:before,
.background-header .main-nav .menu-trigger span:after {
  background-color: #1e1e1e;
}

.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  -moz-transition: all 0.4s;
  -o-transition: all 0.4s;
  -webkit-transition: all 0.4s;
  transition: all 0.4s;
  background-color: #1e1e1e;
  display: block;
  position: absolute;
  width: 30px;
  height: 2px;
  left: 0;
  width: 75%;
}

.background-header .main-nav .menu-trigger span:before,
.background-header .main-nav .menu-trigger span:after {
  background-color: #1e1e1e;
}

.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
  content: "";
}

.header-area .main-nav .menu-trigger span {
  top: 16px;
}

.header-area .main-nav .menu-trigger span:before {
  -moz-transform-origin: 33% 100%;
  -ms-transform-origin: 33% 100%;
  -webkit-transform-origin: 33% 100%;
  transform-origin: 33% 100%;
  top: -10px;
  z-index: 10;
}

.header-area .main-nav .menu-trigger span:after {
  -moz-transform-origin: 33% 0;
  -ms-transform-origin: 33% 0;
  -webkit-transform-origin: 33% 0;
  transform-origin: 33% 0;
  top: 10px;
}

.header-area .main-nav .menu-trigger.active span,
.header-area .main-nav .menu-trigger.active span:before,
.header-area .main-nav .menu-trigger.active span:after {
  background-color: transparent;
  width: 100%;
}

.header-area .main-nav .menu-trigger.active span:before {
  -moz-transform: translateY(6px) translateX(1px) rotate(45deg);
  -ms-transform: translateY(6px) translateX(1px) rotate(45deg);
  -webkit-transform: translateY(6px) translateX(1px) rotate(45deg);
  transform: translateY(6px) translateX(1px) rotate(45deg);
  background-color: #1e1e1e;
}

.background-header .main-nav .menu-trigger.active span:before {
  background-color: #1e1e1e;
}

.header-area .main-nav .menu-trigger.active span:after {
  -moz-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  -ms-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  -webkit-transform: translateY(-6px) translateX(1px) rotate(-45deg);
  transform: translateY(-6px) translateX(1px) rotate(-45deg);
  background-color: #1e1e1e;
}

.background-header .main-nav .menu-trigger.active span:after {
  background-color: #1e1e1e;
}

.header-area.header-sticky {
  min-height: 80px;
  /* border: 3px solid red; */
}

.header-area .nav {
  width: 83%;
  margin-top: 30px;
  /* border:3px solid green; */
}

.header-area.header-sticky .nav li a.active {
  color: #f5a425;
}

@media (max-width: 1200px) {
  .header-area .main-nav .nav li {
    padding-left: 7px;
    padding-right: 7px;
  }

  .header-area .main-nav:before {
    display: none;
  }
}

@media (max-width: 1200px) and (min-width: 766px) {
  .header-area .main-nav .nav {
    display: flex !important;
    flex-direction: row;
    /* Horizontal layout */
    align-items: center;
    /* Vertically centers items */
    justify-content: flex-start;
    /* Align items left */
    flex-wrap: nowrap;
    /* Prevent wrapping */
    float: none !important;
    /* Override float */
    width: auto !important;
    /* Prevent forced width */
  }

  .header-area .main-nav .nav li {
    padding: 0 7px;
    display: inline-flex;
    /* Keep li inline */
    white-space: nowrap;
    /* Prevent text wrapping */
    margin-top: 27px;
    margin-left: 2%;
  }
}

@media (max-width: 767px) {
  .header-area .main-nav .logo {
    color: #1e1e1e;
  }

  .header-area.header-sticky .nav li a:hover,
  .header-area.header-sticky .nav li a.active {
    color: #f5a425 !important;
    opacity: 1;
  }

  .header-area.header-sticky .nav li.search-icon a {
    width: 100%;
  }

  .header-area {
    background-color: #f7f7f7;
    padding: 0px 15px;
    height: 100px;
    box-shadow: none;
    text-align: center;
  }

  .header-area .container {
    padding: 0px;
  }

  .header-area .logo {
    margin-left: 30px;
  }

  .header-area .menu-trigger {
    display: block !important;
  }

  .header-area .main-nav {
    overflow: hidden;
  }

  .header-area .main-nav .nav {
    float: none;
    width: 100%;
    display: none;
    -webkit-transition: all 0s ease 0s;
    -moz-transition: all 0s ease 0s;
    -o-transition: all 0s ease 0s;
    transition: all 0s ease 0s;
    margin-left: 0px;
  }

  .header-area .main-nav .nav li:first-child {
    border-top: 1px solid #eee;
  }

  .header-area.header-sticky .nav {
    margin-top: 100px !important;
  }

  .header-area .main-nav .nav li {
    width: 100%;
    background: #fff;
    border-bottom: 1px solid #eee;
    padding-left: 0px !important;
    padding-right: 0px !important;
  }

  .header-area .main-nav .nav li a {
    height: 50px !important;
    line-height: 50px !important;
    padding: 0px !important;
    border: none !important;
    background: #f7f7f7 !important;
    color: #191a20 !important;
  }

  .header-area .main-nav .nav li a:hover {
    background: #eee !important;
    color: #f5a425 !important;
  }

  .header-area .main-nav .nav li.has-sub ul.sub-menu {
    position: relative;
    visibility: inherit;
    opacity: 1;
    z-index: 1;
    transform: translateY(0%);
    top: 0px;
    width: 100%;
    box-shadow: none;
    height: 0px;
    transition: all 0s;
  }

  .header-area .main-nav .nav li.submenu ul li a {
    font-size: 12px;
    font-weight: 400;
  }

  .header-area .main-nav .nav li.submenu ul li a:hover:before {
    width: 0px;
  }

  .header-area .main-nav .nav li.has-sub ul.sub-menu {
    height: auto;
  }

  .header-area .main-nav .nav li.has-sub:after {
    color: #3b566e;
    right: 30px;
    font-size: 14px;
    top: 15px;
  }

  .header-area .main-nav .nav li.submenu:hover ul,
  .header-area .main-nav .nav li.submenu:focus ul {
    height: 0px;
  }
}

@media (min-width: 767px) {
  .header-area .main-nav .nav {
    display: flex !important;
  }
}

/* ----------------- User Profile ----------------- */
.user-profile {
  position: relative;
  display: inline-block;
}

.user-profile .profile-icon i {
  font-size: 22px;
  /* Default white icon for dark header */
  cursor: pointer;
  transition: all 0.3s;
}

.user-profile .profile-icon i:hover {
  color: #f5a425;
  /* Hover color */
}

/* ----------------- Dropdown ----------------- */
.user-profile .profile-dropdown {
  display: none;
  position: absolute;
  right: 0;
  top: 40px;
  background: #fff;
  min-width: 150px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  overflow: hidden;
  z-index: 1000;
}

.user-profile .profile-dropdown li {
  list-style: none;
  padding: 10px 15px;
  border-bottom: 1px solid #eee;
  font-size: 14px;
}

.user-profile .profile-dropdown li a {
  color: #333 !important;
  text-decoration: none;
  display: block;
}

.user-profile .profile-dropdown li a:hover {
  color: #f5a425;
}

/* ✅ Fix: match your HTML id="user-info" */
.user-profile .profile-dropdown li#user-info {
  font-weight: bold;
  cursor: default;
  border-bottom: 1px solid #eee;
}

/* Show dropdown when .active class is added */
.user-profile.active .profile-dropdown {
  display: block;
}

/* ----------------- Responsive ----------------- */
@media (max-width: 767px) {
  .user-profile .profile-icon i {
    color: #1e1e1e;
    /* Dark icon on light header */
  }

  .user-profile .profile-icon i:hover {
    color: #f5a425;
  }

  /* Full width dropdown on mobile */
  .user-profile .profile-dropdown {
    position: relative;
    top: 0;
    right: 0;
    width: 100%;
    display: none;
    box-shadow: none;
    border-radius: 0;
    background: #f7f7f7;
    margin-top: 0;
  }

  .user-profile .profile-dropdown li {
    border-bottom: 1px solid #eee;
    padding: 15px;
    font-size: 14px;
  }

  .user-profile.active .profile-dropdown {
    display: block;
  }
}


/*==============================
Teacher dhasboard
==============================*/



.teacher-dashboard-btn i {
  font-size: 22px;
  /* Make icon bigger */
}

.teacher-dashboard-btn .dashboard-text {
  max-width: 0;
  opacity: 0;
  white-space: nowrap;
  overflow: hidden;
  transition: all 0.4s ease;
}

/* Show text on hover */
.teacher-dashboard-btn:hover .dashboard-text {
  max-width: 200px;
  /* Enough space for text */
  opacity: 1;
}

.teacher-dashboard-btn:hover {
  /* Darker green */
  padding-right: 20px;
}

/* ✅ Desktop: show text on hover */
@media (min-width: 768px) {
  .teacher-dashboard-btn:hover .dashboard-text {
    max-width: 200px;
    opacity: 1;
  }

}

/* ✅ Mobile: always show text & center */
@media (max-width: 767px) {
  #teacher-dashboard-btn {
    text-align: center;
  }

  .teacher-dashboard-btn {
    width: 80%;
    justify-content: center;
    font-size: 16px;
    padding: 14px;
  }

  .teacher-dashboard-btn .dashboard-text {
    max-width: 200px;
    opacity: 1;
  }
}

/* 
---------------------------------------------
banner
--------------------------------------------- 
*/

.main-banner {
  position: relative;
  max-height: 100%;
  overflow: hidden;
  margin-bottom: -7px;
}

#bg-video {
  min-width: 100%;
  min-height: 100vh;
  max-width: 100%;
  max-height: 100vh;
  object-fit: cover;
  z-index: -1;
}

#bg-video::-webkit-media-controls {
  display: none !important;
}

.video-overlay {
  position: absolute;
  background-color: rgba(31, 39, 43, 0.75);
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
}

.main-banner .caption {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.main-banner .caption h6 {
  margin-top: 0px;
  font-size: 15px;
  text-transform: uppercase;
  font-weight: 600;
  color: #fff;
  letter-spacing: 1px;
}

.main-banner .caption h2 {
  margin-top: -200px;
  margin-bottom: 20px;
  font-size: 40px;
  font-weight: 900;
  font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
    "Lucida Sans Unicode", Geneva, Verdana, sans-serif;
  color: #fff;
  letter-spacing: 2px;
  margin-left: -5%;

  /* Yellow to Red gradient */
  -webkit-background-clip: text;
  background-clip: text;
  padding: 10px 20px;
  border-radius: 10px;
  transition: all 0.3s ease-in-out;
}

.main-banner .caption h2:hover {
  transform: scale(1.05);
}

.main-banner .caption p {
  margin-bottom: 20px;
  font-size: 30px;
  text-transform: uppercase;
  font-weight: 800;
  color: #fff;
  letter-spacing: 1px;
}

#changing-text {
  opacity: 1;
  transition: opacity 0.8s ease-in-out;
}

.main-banner .caption .main-button-red {
  margin-top: 30px;
}

@media screen and (max-width: 767px) {
  .main-banner .caption h6 {
    font-weight: 500;
  }

  .main-banner .caption h2 {
    font-size: 36px;
  }
}

/*
---------------------------------------------
services
---------------------------------------------
*/

.services {
  margin-top: -3%;
  position: absolute;
  width: 100%;
  background-color: #f4f4f4;
  padding-top: 2%;
  padding-bottom: 2%;
}

.services .item {
  /*background-image: url(../images/baby-blue-color-solid-background-1920x1080\ \(1\).png);*/

  background-color: #1b3058;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  border-radius: 20px;
  text-align: center;
  color: #fff;
  padding: 40px;
  height: 50vh;
}

.services .item .icon img {
  width: 48%;
  margin: 0 auto;
  border: 2px solid WHITE;
  border-radius: 50%;
  height: 17vh;
  cursor: pointer;
}

.services .item h4 {
  margin-top: 25px;
  margin-bottom: 15px;
  font-size: 18px;
  font-weight: 600;
}

.services .item h2 {
  margin-top: 25px;
  margin-bottom: 15px;
  font-size: 25px;
  font-weight: 300;
}

.services .item p {
  color: #fff;
  font-size: 12px;
}

.services .owl-nav {
  display: inline-block !important;
  text-align: center;
  position: absolute;
  width: 100%;
  top: 50%;
  transform: translateY(-25px);
}

.services .owl-nav .owl-prev {
  margin-right: 10px;
  outline: none;
  position: absolute;
  left: -80px;
}

.services .owl-nav .owl-prev span,
.services .owl-nav .owl-next span {
  opacity: 0;
}

.services .owl-nav .owl-prev:before {
  display: inline-block;
  font-family: "FontAwesome";
  color: #fff;
  font-size: 25px;
  font-weight: 700;
  content: "\f104";
  background-color: #1b3058;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  line-height: 50px;
}

.services .owl-nav .owl-prev {
  opacity: 1;
  transition: all 0.5s;
}

.services .owl-nav .owl-prev:hover {
  opacity: 0.9;
}

.services .owl-nav .owl-next {
  opacity: 1;
  transition: all 0.5s;
}

.services .owl-nav .owl-next:hover {
  opacity: 0.9;
}

.services .owl-nav .owl-next {
  margin-left: 10px;
  outline: none;
  position: absolute;
  right: -85px;
}

.services .owl-nav .owl-next:before {
  display: inline-block;
  font-family: "FontAwesome";
  color: #fff;
  font-size: 25px;
  font-weight: 700;
  content: "\f105";
  background-color: #1b3058;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  line-height: 50px;
}

/*
---------------------------------------------
upcoming meetings
---------------------------------------------
*/

section.upcoming-meetings {
  background-image: url(../images/meetings-bg.jpg);
  background-position: center center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  padding-top: 230px;
  padding-bottom: 110px;
}

section.upcoming-meetings .section-heading {
  text-align: center;
}

section.upcoming-meetings .categories {
  background-color: #fff;
  border-radius: 20px;
  padding: 40px;
  margin-right: 45px;
}

section.upcoming-meetings .categories h4 {
  font-size: 18px;
  font-weight: 600;
  color: #1f272b;
  margin-bottom: 30px;
  padding-bottom: 20px;
  border-bottom: 1px solid #eee;
}

section.upcoming-meetings .categories ul li {
  display: inline-block;
  margin-bottom: 15px;
}

section.upcoming-meetings .categories ul li a {
  font-size: 15px;
  color: #1f272b;
  font-weight: 500;
  transition: all 0.3s;
}

section.upcoming-meetings .categories ul li a:hover {
  color: #a12c2f;
}

section.upcoming-meetings .categories .main-button-red {
  border-top: 1px solid #eee;
  padding-top: 30px;
  margin-top: 15px;
}

section.upcoming-meetings .categories .main-button-red a {
  width: 100%;
  text-align: center;
}

.meeting-item {
  margin-bottom: 30px;
}

.meeting-item .thumb {
  position: relative;
}

.meeting-item .thumb img {
  border-top-right-radius: 20px;
  border-top-left-radius: 20px;
}

.meeting-item .thumb .price {
  position: absolute;
  left: 20px;
  top: 20px;
}

.meeting-item .thumb .price span {
  font-size: 16px;
  color: #1f272b;
  font-weight: 600;
  background-color: rgba(250, 250, 250, 0.9);
  padding: 7px 12px;
  border-radius: 10px;
}

.meeting-item .down-content {
  background-color: #fff;
  padding: 30px;
  border-bottom-right-radius: 20px;
  border-bottom-left-radius: 20px;
}

.meeting-item .down-content .date {
  float: left;
  text-align: center;
  display: inline-block;
  margin-right: 20px;
}

.meeting-item .down-content .date h6 {
  font-size: 13px;
  text-transform: uppercase;
  font-weight: 600;
  color: #a12c2f;
}

.meeting-item .down-content .date span {
  display: block;
  color: #1f272b;
  font-size: 22px;
  margin-top: 7px;
}

.meeting-item .down-content h4 {
  font-size: 18px;
  color: #1f272b;
  font-weight: 600;
  display: inline-block;
  margin-bottom: 15px;
}

.meeting-item .down-content p {
  margin-left: 50px;
  color: #1f272b;
  font-size: 14px;
}

/*
---------------------------------------------
apply now
---------------------------------------------
*/

section.apply-now {
  background-image: url(../images/apply-bg.jpg);
  background-position: center center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 140px 0px;
}

section.apply-now .item {
  background-color: rgba(250, 250, 250, 0.15);
  padding: 40px;
  margin-bottom: 30px;
}

section.apply-now .item h3 {
  color: #fff;
  text-transform: uppercase;
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 20px;
}

section.apply-now .item p {
  color: #fff;
  margin-bottom: 20px;
}

.accordions {
  border-radius: 20px;
  padding: 40px;
  background-color: #fff;
  margin-left: 45px;
}

.accordions .accordion {
  border-bottom: 1px solid #eee;
}

.accordions .last-accordion {
  border-bottom: none;
}

.accordion-head {
  padding: 20px;
  font-size: 18px;
  font-weight: 700;
  color: #1f272b;
  cursor: pointer;
  transition: color 200ms ease-in-out;
  border-bottom: 1px solid #fff;
}

@media screen and (min-width: 768px) {
  .accordion-head {
    padding: 1rem;
    font-size: 1.2rem;
  }
}

.accordion-head .icon {
  float: right;
  transition: transform 200ms ease-in-out;
}

.accordion-head.is-open {
  color: #f5a425;
  border-bottom: none;
}

.accordion-head.is-open .icon {
  transform: rotate(45deg);
}

.accordion-body {
  overflow: hidden;
  height: 0;
  transition: height 300ms ease-in-out;
  border-bottom: 1px solid #fff;
}

.accordion-body>.content {
  padding: 20px;
  padding-top: 0;
}

/* 
---------------------------------------------
courses
--------------------------------------------- 
*/

section.our-courses {
  background-image: url(../images/meetings-bg.jpg);
  background-position: center center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  padding-top: 140px;
  padding-bottom: 130px;
}

.our-courses .item .down-content {
  background-color: #fff;
}

.our-courses .item .down-content h4 {
  padding: 25px;
  font-size: 18px;
  color: #1f272b;
  text-align: center;
  border-bottom: 1px solid #eee;
}

.our-courses .item .down-content .info {
  padding: 25px;
}

.our-courses .item .down-content .info ul li {
  display: inline-block;
  margin-right: 1px;
}

.our-courses .item .down-content .info ul li i {
  color: #f5a425;
  font-size: 14px;
}

.our-courses .item .down-content .info span {
  color: #a12c2f;
  font-size: 15px;
  font-weight: 600;
  text-align: right;
  display: inline-block;
  width: 100%;
}

.our-courses .owl-nav {
  text-align: center;
  position: absolute;
  width: 100%;
  top: 50%;
  transform: translateY(-45px);
}

.our-courses .owl-dots {
  display: inline-block;
  text-align: center;
  width: 100%;
  margin-top: 40px;
}

.our-courses .owl-dots .owl-dot {
  transition: all 0.5s;
  width: 7px;
  height: 7px;
  background-color: #fff;
  margin: 0px 5px;
  border-radius: 50%;
  outline: none;
}

.our-courses .owl-dots .active {
  width: 24px;
  height: 8px;
  border-radius: 4px;
}

.our-courses .owl-nav .owl-prev {
  margin-right: 10px;
  outline: none;
  position: absolute;
  left: -80px;
}

.our-courses .owl-nav .owl-prev span,
.our-courses .owl-nav .owl-next span {
  opacity: 0;
}

.our-courses .owl-nav .owl-prev:before {
  display: inline-block;
  font-family: "FontAwesome";
  color: #1e1e1e;
  font-size: 25px;
  font-weight: 700;
  content: "\f104";
  background-color: #fff;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  line-height: 50px;
}

.our-courses .owl-nav .owl-prev {
  opacity: 1;
  transition: all 0.5s;
}

.our-courses .owl-nav .owl-prev:hover {
  opacity: 0.9;
}

.our-courses .owl-nav .owl-next {
  opacity: 1;
  transition: all 0.5s;
}

.our-courses .owl-nav .owl-next:hover {
  opacity: 0.9;
}

.our-courses .owl-nav .owl-next {
  margin-left: 10px;
  outline: none;
  position: absolute;
  right: -85px;
}

.our-courses .owl-nav .owl-next:before {
  display: inline-block;
  font-family: "FontAwesome";
  color: #1e1e1e;
  font-size: 25px;
  font-weight: 700;
  content: "\f105";
  background-color: #fff;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  line-height: 50px;
}

/*
---------------------------------------------
our facts
---------------------------------------------
*/

section.our-facts {
  background-image: url(../images/facts-bg.jpg);
  background-position: center center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 140px 0px 125px 0px;
}

section.our-facts h2 {
  font-size: 38px;
  color: #fff;
  line-height: 50px;
  font-weight: 700;
  letter-spacing: 0.5px;
  margin-bottom: 50px;
}

.count-area-content {
  text-align: center;
  background-color: rgba(250, 250, 250, 0.15);
  border-radius: 20px;
  padding: 25px 30px 35px 30px;
  margin: 15px 0px;
}

.percentage .count-digit:after {
  content: "%";
  margin-left: 3px;
}

.count-digit {
  margin: 5px 0px;
  color: #f5a425;
  font-weight: 700;
  font-size: 36px;
}

.count-title {
  font-size: 18px;
  font-weight: 500;
  color: #fff;
  letter-spacing: 0.5px;
}

.new-students {
  margin-top: 45px;
}

section.our-facts .video {
  text-align: center;
  margin-left: 70px;
  background-image: url(../images/video-item-bg.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  border-radius: 20px;
}

section.our-facts .video img {
  padding: 170px 0px;
  max-width: 56px;
}

/* 
---------------------------------------------
contact us
--------------------------------------------- 
*/

section.contact-us {
  background-image: url(../images/meetings-bg.jpg);
  background-position: center center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  padding: 140px 0px 0px 0px;
}

section.contact-us #contact {
  background-color: #fff;
  border-radius: 20px;
  padding: 40px;
}

section.contact-us #contact h2 {
  text-transform: uppercase;
  color: #1f272b;
  border-bottom: 1px solid #eee;
  margin-bottom: 40px;
  padding-bottom: 20px;
  font-size: 22px;
  font-weight: 700;
}

section.contact-us #contact input {
  width: 100%;
  height: 40px;
  border-radius: 20px;
  background-color: #f7f7f7;
  outline: none;
  border: none;
  box-shadow: none;
  font-size: 13px;
  font-weight: 500;
  color: #7a7a7a;
  padding: 0px 15px;
  margin-bottom: 30px;
}

section.contact-us #contact textarea {
  width: 100%;
  min-height: 140px;
  max-height: 180px;
  border-radius: 20px;
  background-color: #f7f7f7;
  outline: none;
  border: none;
  box-shadow: none;
  font-size: 13px;
  font-weight: 500;
  color: #7a7a7a;
  padding: 15px;
  margin-bottom: 30px;
}

section.contact-us #contact button {
  font-size: 13px;
  color: #fff;
  background-color: #a12c2f;
  padding: 12px 30px;
  display: inline-block;
  border-radius: 22px;
  font-weight: 500;
  text-transform: uppercase;
  transition: all 0.3s;
  border: none;
  outline: none;
}

section.contact-us #contact button:hover {
  opacity: 0.9;
}

section.contact-us .right-info {
  background-color: #a12c2f;
  border-radius: 20px;
  padding: 40px;
}

section.contact-us .right-info ul li {
  display: inline-block;
  border-bottom: 1px solid rgba(250, 250, 250, 0.15);
  margin-bottom: 30px;
  padding-bottom: 30px;
}

section.contact-us .right-info ul li:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

section.contact-us .right-info ul li h6 {
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 10px;
}

section.contact-us .right-info ul li span {
  display: block;
  font-size: 18px;
  color: #fff;
  font-weight: 700;
}

.footer {
  background: #222;
  color: white;
  padding: 20px;
  text-align: center;
  text-transform: uppercase;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 15px;
  margin-bottom: 20px;
}

.footer-links a {
  color: white;
  text-decoration: none;
  font-size: 16px;
  transition: 0.3s;
}

.footer-links a:hover {
  color: #ffcc00;
  border-bottom: 1px solid #ffcc00;
}

.footer-contact-update-section {
  /* display: flex; */
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20px;
}

.update-section,
.contact-us-section {
  flex: 1;
  min-width: 280px;
  padding: 20px;
  border-radius: 10px;
  text-align: center;
}

.update-section textarea {
  width: 100%;
  height: 80px;
  padding: 10px;
  border-radius: 5px;
  border: none;
  font-size: 14px;
}

.update-section button {
  text-decoration: none;
  font-size: 13px;
  color: #fff;
  background-color: #a12c2f;
  padding: 12px 30px;
  display: inline-block;
  border-radius: 22px;
  font-weight: 500;
  text-transform: uppercase;
  transition: all 0.3s;
  border: none;
  outline: none;
}

.update-section button:hover {
  opacity: 0.9;
  color: yellow;
}

.contact-us-section {
  background: url("../images/service-item-bg.jpg") center/cover;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.contact-us-section a {
  color: #ffcc00;
  font-weight: bold;
  font-size: 18px;
  text-decoration: none;
  transition: 0.3s;
}

.contact-us-section a:hover {
  color: #fff;
  border-bottom: 1px solid #ffcc00;
}

.social-media-links {
  display: flex;
  justify-content: center;
  gap: 15px;
  padding: 10px;
  border-radius: 5px;
}

.social-media-links a {
  color: white;
  font-size: 30px;
  transition: color 0.3s;
}

.social-media-links a:hover {
  color: #ffcc00;
  /* Hover color */
}

@media (max-width: 768px) {
  .social-media-links {
    gap: 10px;
    padding: 5px;
  }

  .social-media-links a {
    font-size: 25px;
  }
}

@media (max-width: 480px) {
  .social-media-links {
    gap: 8px;
    padding: 5px;
  }

  .social-media-links a {
    font-size: 20px;
  }
}

/* Responsive */
@media (max-width: 768px) {
  .footer-contact-update-section {
    flex-direction: column;
    align-items: center;
  }

  .update-section,
  .contact-us-section {
    width: 100%;
  }
}

/*
---------------------------------------------
heading page
---------------------------------------------
*/

section.heading-page {
  background-image: url(../images/heading-bg.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  padding-top: 230px;
  padding-bottom: 110px;
  text-align: center;
}

section.heading-page h6 {
  margin-top: 0px;
  font-size: 15px;
  text-transform: uppercase;
  font-weight: 600;
  color: #fff;
  letter-spacing: 1px;
}

section.heading-page h2 {
  margin-top: 1px;
  margin-bottom: 20px;
  font-size: 25px;
  text-transform: uppercase;
  font-weight: 800;
  color: #fff;
  letter-spacing: 1px;
}

/*
---------------------------------------------
upcoming meetings page
---------------------------------------------
*/

section.meetings-page {
  background-image: url(../images/meetings-page-bg.jpg);
  background-position: center center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  padding-top: 140px;
  padding-bottom: 0px;
}

section.meetings-page .filters {
  text-align: center;
  margin-bottom: 60px;
}

section.meetings-page .filters li {
  font-size: 13px;
  color: #a12c2f;
  background-color: #fff;
  padding: 11px 30px;
  display: inline-block;
  border-radius: 22px;
  font-weight: 600;
  text-transform: uppercase;
  transition: all 0.3s;
  cursor: pointer;
  margin: 0px 3px;
}

section.meetings-page .filters ul li.active,
section.meetings-page .filters ul li:hover {
  background-color: #a12c2f;
  color: #fff;
}

section.meetings-page .pagination {
  text-align: center;
  width: 100%;
  margin-top: 30px;
  display: inline-block;
}

section.meetings-page .pagination ul li {
  display: inline-block;
}

section.meetings-page .pagination ul li a {
  width: 40px;
  height: 40px;
  background-color: #fff;
  border-radius: 10px;
  color: #1f272b;
  display: inline-block;
  text-align: center;
  line-height: 40px;
  font-weight: 600;
  font-size: 15px;
  transition: all 0.3s;
}

section.meetings-page .main-button-red {
  text-align: center;
}

section.meetings-page .main-button-red a {
  padding: 12px 60px;
  text-align: center;
  margin-top: 30px;
}

section.meetings-page .pagination ul li.active a,
section.meetings-page .pagination ul li a:hover {
  background-color: #a12c2f;
  color: #fff;
}

.meeting-single-item .thumb {
  position: relative;
}

.meeting-single-item .thumb img {
  border-top-right-radius: 20px;
  border-top-left-radius: 20px;
}

.meeting-single-item .thumb .price {
  position: absolute;
  left: 20px;
  top: 20px;
}

.meeting-single-item .thumb .price span {
  font-size: 16px;
  color: #1f272b;
  font-weight: 600;
  background-color: rgba(250, 250, 250, 0.9);
  padding: 7px 12px;
  border-radius: 10px;
}

.meeting-single-item .down-content {
  background-color: #fff;
  padding: 40px;
  border-bottom-right-radius: 20px;
  border-bottom-left-radius: 20px;
}

.meeting-single-item .thumb .date {
  position: absolute;
  background-color: rgba(250, 250, 250, 0.9);
  width: 80px;
  height: 80px;
  text-align: center;
  padding: 15px 0px;
  border-radius: 10px;
  right: 20px;
  top: 20px;
}

.meeting-single-item .thumb .date h6 {
  font-size: 13px;
  text-transform: uppercase;
  font-weight: 600;
  color: #a12c2f;
}

.meeting-single-item .thumb .date span {
  display: block;
  color: #1f272b;
  font-size: 22px;
  margin-top: 7px;
}

.meeting-single-item .down-content h4 {
  font-size: 22px;
  color: #1f272b;
  font-weight: 600;
  display: inline-block;
  margin-bottom: 15px;
}

.meeting-single-item .down-content h5 {
  font-size: 18px;
  color: #1f272b;
  font-weight: 700;
  display: inline-block;
  margin-bottom: 15px;
}

.meeting-single-item .down-content p {
  color: #1f272b;
  font-size: 14px;
}

.meeting-single-item .down-content p.description {
  margin-top: 40px;
  padding-top: 40px;
  border-top: 1px solid #eee;
  margin-bottom: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid #eee;
}

.meeting-single-item .down-content .share {
  margin-top: 40px;
  padding-top: 40px;
  border-top: 1px solid #eee;
}

.meeting-single-item .down-content .share h5 {
  float: left;
  margin-right: 10px;
  margin-bottom: 0px;
}

.meeting-single-item .down-content .share ul li {
  display: inline;
}

.meeting-single-item .down-content .share ul li a {
  font-size: 14px;
  color: #1f272b;
  transition: all 0.3s;
}

.meeting-single-item .down-content .share ul li a:hover {
  color: #f5a425;
}

/* Meeting item column */
.templatemo-item-col {
  width: 31%;
}

@media (max-width: 992px) {
  .templatemo-item-col {
    width: 45%;
  }
}

@media (max-width: 767px) {
  .templatemo-item-col {
    width: 100%;
  }
}

/* 
---------------------------------------------
responsive
--------------------------------------------- 
*/

@media (max-width: 1300px) {
  .services .owl-nav .owl-next {
    right: -30px;
  }

  .services .owl-nav .owl-prev {
    left: -25px;
  }

  .our-courses .owl-nav .owl-next {
    right: -30px;
  }

  .our-courses .owl-nav .owl-prev {
    left: -25px;
  }
}

@media (max-width: 1200px) {
  .services .owl-nav .owl-next {
    right: -70px;
  }

  .services .owl-nav .owl-prev {
    left: -65px;
  }

  .our-courses .owl-nav .owl-next {
    right: -70px;
  }

  .our-courses .owl-nav .owl-prev {
    left: -65px;
  }
}

@media (max-width: 1085px) {
  .services .owl-nav .owl-next {
    right: -30px;
  }

  .services .owl-nav .owl-prev {
    left: -25px;
  }

  .our-courses .owl-nav .owl-next {
    right: -30px;
  }

  .our-courses .owl-nav .owl-prev {
    left: -25px;
  }
}

@media (max-width: 1005px) {
  .services .owl-nav .owl-next {
    display: none;
  }

  .services .owl-nav .owl-prev {
    display: none;
  }

  .our-courses .owl-nav .owl-next {
    display: none;
  }

  .our-courses .owl-nav .owl-prev {
    display: none;
  }
}

@media (max-width: 992px) {
  .main-banner .caption {
    top: 60%;
  }

  .main-banner .caption h2 {
    margin-top: 10px;
    margin-bottom: 10px;
    font-size: 22px;
    width: 55%;
  }

  .main-banner .caption .main-button-red {
    margin-top: 15px;
  }

  .services {
    margin-top: -3%;

    padding-top: 3%;
    padding-bottom: 3%;
  }

  section.upcoming-meetings {
    padding-top: 400px;
  }

  section.upcoming-meetings .categories {
    margin-right: 0px;
    margin-bottom: 30px;
  }

  .accordions {
    margin-left: 0px;
  }

  .new-students {
    margin-top: 15px;
  }

  section.our-facts .video {
    margin-left: 0px;
    margin-top: 15px;
  }

  section.contact-us #contact {
    margin-bottom: 30px;
  }
}

@media (max-width: 767px) {
  .sub-header .left-content p {
    display: none;
  }

  .sub-header .right-icons {
    text-align: center;
  }

  .main-nav .nav .sub-menu {
    display: none;
  }

  .header-area .main-nav .nav li ul.sub-menu li a {
    color: #1f272b;
  }
}

/*******Coding section**/
section.codingpage {
  position: relative;
  background-image: url(../images/freelance-software-engineer.jpeg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  padding-top: 230px;
  padding-bottom: 1px;
  text-align: center;
}

section.codingpage::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  /* Adjust opacity as needed */
  z-index: 1;
}

.codingpage .container {
  position: relative;
  z-index: 2;
  /* Ensures text remains unaffected */
  color: white;
  /* Adjust text color if necessary */
}

.coding-problem-section {
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.coding-container {
  background: rgba(255, 255, 255, 0.9);
  width: 80%;
  max-width: 900px;
  border-radius: 8px;
  border: 1px solid rgb(201, 199, 199);
  padding: 20px;
}

.coding-container .label {
  font-weight: 500;
  font-size: 18px;
  margin-bottom: 10px;
  display: block;
}

.coding-container textarea {
  width: 100%;
  min-height: 150px;
  max-height: 300px;
  resize: vertical;
  padding: 10px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.coding-problem-section .coding-container .language {
  width: 100%;
  display: inline;
}

.coding-problem-section .coding-container .language label {
  margin-bottom: 3%;
  margin-right: 2%;
}

.coding-problem-section .coding-container .language input {
  width: 30%;
  margin-right: 2%;
  padding: 10px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.solve-code-btn {
  font-size: 13px;
  color: #fff;
  background-color: #1b3058;
  padding: 12px 30px;
  display: inline-block;
  font-weight: 500;
  text-transform: uppercase;
  transition: all 0.3s;
}

.solve-code-btn:hover {
  background-color: white;
  color: #1b3058;
}

/******************************/
.coding-search-results {
  background-color: #f4f6f8;
  width: 90%;
  margin: auto;
  border: 1px solid #ddd;
  padding: 3%;
}

.coding-search-results .problem-list .problem-card {
  color: #1b3058;
}

.coding-search-results .problem-title {
  margin-top: 2%;
  font-size: 18px;
}

.coding-search-results .problem-title:hover {
  color: #1b3058;
  font-weight: 600;
}

/******************************/
/* Responsive adjustments */
@media screen and (max-width: 570px) {
  .coding-problem-section .coding-container .language {
    flex-direction: column;
    align-items: flex-start;
  }

  .coding-problem-section .coding-container .language input {
    width: 100%;
    /* Makes inputs full width on smaller screens */
    margin-bottom: 10px;
  }
}

/* Responsive Design */
@media (max-width: 768px) {
  .coding-container {
    width: 90%;
    padding: 15px;
  }

  .coding-container .label {
    font-size: 16px;
  }

  .coding-container textarea {
    font-size: 14px;
  }

  .coding-container .output-button button {
    font-size: 12px;
    padding: 8px 20px;
  }
}

@media (max-width: 480px) {
  .coding-container {
    width: 95%;
    padding: 10px;
  }

  .coding-container .label {
    font-size: 14px;
  }

  .coding-container textarea {
    min-height: 100px;
    font-size: 12px;
  }

  .coding-search-results h3 {
    font-size: 22px;
  }

  .coding-search-results .problem-title {
    font-size: 15px;
  }
}

/**view full code in coding.php***/
/* Code area styling */
/* Styling for the code area */
.coding-code-area {
  background-color: #fafafa;
  /* Light gray background for the code area */
  color: #333;
  /* Dark text color for readability */
  font-family: "Courier New", Courier, monospace;
  /* Monospace font for code */
  padding: 20px;
  /* Padding around the code */
  border-radius: 8px;
  /* Rounded corners for the code block */
  white-space: pre-wrap;
  /* Maintain the whitespace formatting */
  word-wrap: break-word;
  /* Break long lines of code */
  font-size: 14px;
  /* Clear, readable font size */
  line-height: 1.6;
  /* Add space between lines for better readability */
  overflow: auto;
  /* Add scrollbars if the code is too long */
  border: 1px solid #ddd;
  /* Light border around the code block */
  margin-top: 20px;
  /* Add space above the code block */
}

/* Optional: Hover effect to highlight the code block */
.coding-code-area:hover {
  background-color: #f0f0f0;
  /* Slightly darken the background when hovered */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  /* Subtle shadow effect on hover */
}

/* Syntax highlighting colors */
.token.comment {
  color: #6a9955;
  /* Green color for comments */
}

.token.punctuation {
  color: #333;
  /* Dark color for punctuation like semicolons */
}

.token.selector {
  color: #1e1e1e;
  /* Dark color for selectors (e.g., function names) */
}

.token.property,
.token.function {
  color: #0000ff;
  /* Blue for properties and function names */
}

.token.keyword {
  color: #d73a49;
  /* Red for keywords (e.g., if, else, while) */
}

.token.string {
  color: #50a14f;
  /* Green for strings */
}

.token.number {
  color: #005cc5;
  /* Blue for numbers */
}

.token.operator {
  color: #333;
  /* Dark color for operators like +, -, *, etc. */
}

.token.variable {
  color: #e5a300;
  /* Yellow for variables */
}

.token.class-name {
  color: #e5a300;
  /* Orange color for class names */
}

/*********ALL CODING BACKBUTTON CSS **********************/
.All-coding-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
}

.All-coding-header h2 {
  font-size: clamp(1.5rem, 2.5vw, 2.5rem);
  text-align: center;
  font-weight: bold;
  margin: 0;
}

.back-button {
  background: #1b3058;
  color: white;
  padding: 3px;
  border-radius: 5%;
  font-size: 25px;
  cursor: pointer;
  border: none;
  width: 5%;
  font-weight: 900;
}

.back-button:hover {
  background: #f5a425;
  color: white;
}

@media (max-width: 836px) {
  .back-button {
    width: 12%;
  }
}

@media (max-width: 400px) {
  .back-button {
    width: 19%;
  }
}

/* Optional: Style for inline code */
code {
  background-color: #f5f5f5;
  padding: 3px 5px;
  border-radius: 5px;
  font-size: 14px;
  color: #333;
}

/* Optional: Style for function definitions */
.token.function {
  font-weight: bold;
  /* Make functions bold */
}

/***********
************/
.footer {
  /*background-image: url(../images/meetings-bg.jpg);*/
  background-color: #1b3058;
  margin-top: 0%;
  border-top: 6px solid #ffb400;
}

/************Student project Section*******/
section.student-project {
  position: relative;
  background-image: url(../images/Student-software-project.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  padding-top: 230px;
  padding-bottom: 1px;
  text-align: center;
}

.student-project-section {
  /* background-image: url(../images/meetings-bg.jpg); */
  background-color: #1b3058;
  background-position: center center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  padding-top: 230px;
  padding-bottom: 110px;
}

.coding-problem-section {
  background-image: url(../images/meetings-bg.jpg);
  background-position: center center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  padding-top: 95px;
  padding-bottom: 110px;
}

/* Outer container for form */
.student-project-section {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

/* Form container */
.student-project-section .student-project {
  background: #f4f6f8;
  /* Light background for better contrast */
  width: 50%;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  margin-top: 3%;
}

/* Form Heading */
.student-project h1 {
  margin-bottom: 20px;
  font-size: 24px;
  text-align: center;
}

/* Form Labels */
.student-project label {
  display: block;
  font-weight: bold;
  margin-bottom: 5px;
  text-align: left;
}

/* Input Fields */
.student-project input {
  width: 100%;
  padding: 10px;
  margin-bottom: 15px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 16px;
}

.student-project .output-button {
  text-align: center;
  margin-top: 20px;
}

.student-project .student-project-form textarea {
  width: 100%;
  min-height: 150px;
  max-height: 300px;
  resize: vertical;
  padding: 10px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.student-project .output-button button {
  font-size: 14px;
  color: #1b3058;
  background-color: #fff;
  padding: 10px 25px;

  font-weight: 600;
  text-transform: uppercase;
  transition: all 0.3s ease;
  cursor: pointer;
  border: 2px solid #1b3058;
}

.student-project .output-button button:hover {
  background-color: #1b3058;
  color: #fff;
}

/* Make it responsive */
@media (max-width: 768px) {
  .student-project-section .student-project {
    width: 90%;
    /* Adjust form width for smaller screens */
  }

  .student-project-section .student-project h1 {
    font-size: 20px;
  }

  .student-project-section .student-project input {
    font-size: 14px;
    padding: 8px;
  }
}

/******BLOG IMAGE*************/

section.blog-image-banner {
  position: relative;
  background-image: url(../images/Blog-banner-image.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  padding-top: 230px;
  padding-bottom: 1px;
  text-align: center;
}

.blog-slider-section .blog-slider img {
  height: 15vh;
  border-radius: 50%;
  display: block;
  width: 150%;
  margin-left: -17%;
}

.blog-banner-image {
  background-image: url(../images/meetings-bg.jpg);
  background-position: center center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
  padding-top: 230px;
  padding-bottom: 110px;
}

.blog-banner-image h1 {
  color: white;
  width: 65%;
  text-align: center;
  /* Center text properly */
  margin: 15% auto 1%;
  /* Adjust margins for responsiveness */
  border-bottom: 1px solid rgb(141, 141, 141);
  padding-bottom: 1%;
}

.blog-slider-section {
  margin-top: 0%;
  padding-top: 3%;
  background-color: #f4f6f8;
  /*background: url(../images/meetings-bg.jpg);*/
}

/* Make it more responsive for smaller screens */
@media (max-width: 768px) {
  .blog-banner-image h1 {
    width: 90%;
    /* Adjust width for smaller screens */
    font-size: 1.8rem;
    /* Reduce font size for better readability */
    margin-top: 90%;
  }

  .blog-banner-image .blog-section {
    width: 90%;
    padding: 15px;
    margin-top: 0%;
  }
}

@media (max-width: 480px) {
  .blog-banner-image h1 {
    width: 95%;
    font-size: 1.5rem;
    margin-top: 100%;
  }
}

.blog-section .blog-form {
  margin-top: 5%;
}

.coding-problem-section .output-button {
  text-align: center;
  margin-top: 20px;
}

.coding-problem-section .output-button button {
  font-size: 14px;
  color: #a12c2f;
  background-color: #fff;
  padding: 10px 25px;
  border-radius: 22px;
  font-weight: 600;
  text-transform: uppercase;
  transition: all 0.3s ease;
  cursor: pointer;
  border: 2px solid #a12c2f;
}

.coding-problem-section .output-button button:hover {
  background-color: #a12c2f;
  color: #fff;
}

/*********Discussion board************/

section.discussion-board {
  position: relative;
  background-image: url(../images/discussion-board.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  padding-top: 230px;
  padding-bottom: 1px;
  text-align: center;
}

/*********Admission section************/

section.admission {
  position: relative;
  background-image: url(../images/admission.jpeg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  padding-top: 230px;
  padding-bottom: 1px;
  text-align: center;
}

/*********Carrer section************/

section.carrer {
  position: relative;
  background-image: url(../images/Carrer.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  padding-top: 230px;
  padding-bottom: 1px;
  text-align: center;
}

/*********Contact us section************/

section.contactus {
  position: relative;
  background-image: url(../images/contactus.jpeg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  padding-top: 230px;
  padding-bottom: 1px;
  text-align: center;
}

/*****************Professional Section ****************************/

section.professional-section {
  position: relative;
  background-image: url(../images/professional-image.jpeg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  padding-top: 230px;
  padding-bottom: 110px;
  text-align: center;
}

.professional-form textarea {
  width: 100%;
  min-height: 150px;
  max-height: 300px;
  resize: vertical;
  padding: 10px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

/*****************Latest Innovation***************************/

section.latest-innovation {
  position: relative;
  background-image: url(../images/latest_innovation.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  padding-top: 230px;
  padding-bottom: -15px;
  text-align: center;
}

/*************BLog Container**************/

/*.blog-container-section {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  max-width: 1200px;
  margin: auto;
  margin-top: 3%;
} */

.blog-container .blog-card {
  background: white;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  /* transition: transform 0.3s ease; */
  cursor: pointer;
  /* flex: 2; */
  flex: 0 0 75%;
  /* Fixed to 75% width */
}

.blog-card:hover {
  transform: translateY(-5px);
}

.blog-card img {
  width: 100%;
  height: 290px;
  object-fit: cover;
}

.blog-content {
  padding: 15px;
}

.blog-content h3 {
  font-size: 18px;
  margin-bottom: 10px;
  font-weight: 700;
}

.blog-content p {
  font-size: 15px;
  color: #555;
  line-height: 1.5;
  padding: 1% 2% 2%;
}

.blog-date {
  font-size: 14px;
  color: #999;
  margin-top: 10px;
  padding-left: 3%;
}

.blog-content h3:hover {
  background-position: -200% center;
  background-image: linear-gradient(90deg, grey, white, rgb(95, 94, 94));
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: background-position 1.5s ease-in-out;
  /* Slower effect */
}

.label {
  font-weight: bold;
  color: #333;
}

.code-box {
  background: #1e1e1e;
  color: #fff;
  padding: 10px;
  border-radius: 5px;
  font-family: "Courier New", monospace;
  overflow-x: auto;
  white-space: pre-wrap;
  word-wrap: break-word;
}

textarea,
input {
  width: 100%;
  padding: 8px;
  margin-top: 5px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 14px;
}

/*************All blog section********************************/
section.all-blog {
  position: relative;
  background-image: url(../images/all_blog.jpeg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  padding-top: 230px;
  padding-bottom: 110px;
  text-align: center;
}

.blog-container {
  display: flex;
  flex-wrap: row;
  /* Allows wrapping on smaller screens */
  gap: 20px;
  background-color: #f4f6f8;
  padding: 2%;
  border-bottom: 1px solid rgb(238, 236, 236);
  margin-top: -3%;
}

.blog-container h2 {
  cursor: pointer;
  font-weight: 600;
  padding-left: 3%;
  margin-top: 2%;
}

.blog-container h3 {
  padding-left: 3%;

  font-size: 1.5rem;

  color: rgb(80, 79, 79);

  margin-top: 3%;
}

.blog-container h2:hover {
  background-position: -200% center;
  background-image: linear-gradient(90deg, grey, white, rgb(95, 94, 94));
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: background-position 1.5s ease-in-out;
  /* Slower effect */
}

/* Featured Blog Section */
/* Featured Blog */
.featured-section {
  background: white;
  padding: 15px;
  border-radius: 10px;
  overflow: hidden;
  width: 100%;
}

.wrap-img {
  float: left;
  /* allow text to wrap */
  margin: 0 20px 20px 0;
  /* spacing around image */
}

.wrap-img img {
  display: block;
  max-width: 500px;
  /* shrink image to max 250px */
  height: auto;
  /* maintain aspect ratio */
  border-radius: 8px;
  /* rounded corners for better look */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  /* soft shadow */
}

/* Fullscreen modal */
#imageModal {
  display: none;
  position: fixed;
  z-index: 9999;
  inset: 0;
  background: rgba(0, 0, 0, 0.9);
  justify-content: center;
  align-items: center;
}

#imageModal img {
  max-width: 90%;
  max-height: 90%;
  object-fit: contain;
  /* fit full image in modal */
  border-radius: 10px;
}

#imageModal span {
  position: absolute;
  top: 20px;
  right: 30px;
  font-size: 40px;
  font-weight: bold;
  color: white;
  cursor: pointer;
}

/* Blog links container */
.blog-links-box {
  flex: 0 0 25%;
  min-width: 250px;
  max-height: 80vh;
  overflow-y: auto;
  border: 1px solid #ccc;
  padding: 20px;
  border-radius: 8px;
  background-color: #f9f9f9;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.05);
  scrollbar-width: thin;
  scrollbar-color: #1b3058 #eee;
}

/* Title styling */
.blog-links-box h2 {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 15px;
  color: #1b3058;
  border-bottom: 2px solid #1b3058;
  padding-bottom: 5px;
}

/* Blog links */
.blog-links-box a {
  display: block;
  margin-bottom: 12px;
  font-size: 16px;
  text-decoration: none;
  color: #333;
  transition: all 0.2s ease;
  text-transform: lowercase;
}

/* Hover effect */
.blog-links-box a:hover {
  color: #f5a425;
  text-decoration: underline;
  padding-left: 5px;
  border-bottom: 2px solid #f5a425;
}

/* Custom scrollbar for WebKit (Chrome, Safari) */
.blog-links-box::-webkit-scrollbar {
  width: 6px;
}

.blog-links-box::-webkit-scrollbar-track {
  background: #eee;
  border-radius: 10px;
}

.blog-links-box::-webkit-scrollbar-thumb {
  background-color: #a12c2f;
  border-radius: 10px;
}

/**Responsive of the log_link */
/* On smaller screens stack them */
@media (max-width: 1024px) {
  .blog-container {
    flex-direction: column;
  }

  .blog-container .blog-card,
  .blog-links-box {
    width: 100%;
  }
}

@media (max-width: 768px) {
  .blog-container {
    padding: 3% 2%;
    margin: 4%;
    border: 1px solid #ddd;
  }

  .blog-content h3 {
    font-size: 16px;
  }

  .blog-links-box a {
    font-size: 15px;
  }
}

@media (max-width: 480px) {
  .blog-content p {
    font-size: 14px;
  }

  .blog-container {
    margin-top: -25%;
  }

  .blog-links-box h2 {
    font-size: 18px;
  }

  .blog-links-box a {
    font-size: 14px;
  }
}

/* Sidebar (Search Section) */
/* Sidebar Styling */

/* Container to hold sidebar and blog links horizontally */

/* Main layout container */

.search-layout-container {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  margin: 40px auto;
  padding: 20px;
  max-width: 1200px;
  justify-content: space-between;
  align-items: flex-start;
  margin-top: 30%;
  margin-bottom: 1%;
  /* background-color:#f4f6f8; */
  /* background-color: rgb(251, 245, 245); */
}

/* Sidebar container */
.sidebar {
  flex: 1 1 65%;
  border: 1px solid #ddd;
  padding: 20px;
  padding-top: 3%;
  padding-bottom: 3%;
  background-color: whitesmoke;
}

/* Header row */
.sidebar .search-header {
  display: flex;
  /*justify-content: space-between; */
  align-items: center;
  margin-bottom: 20px;
}

.sidebar .search-header h4 {
  margin: 2px;
  font-size: 22px;
  color: #111;
  margin-left: 5%;
}

.sidebar .search-header h5 {
  margin: 0;
}

.sidebar .search-header h2 {
  margin-right: 10px;
  /* Add space to the right of "Search Blog" */
}

.sidebar .search-header a {
  margin-left: 15px;
  /* Optional: add space before "All Blog" */
}

.sidebar .search-header h5 a {
  text-decoration: none;
  color: white;
  font-weight: 500;
  font-size: 22px;
  background-color: #1b3058;
  padding: 10px 10px 10px;
}

.sidebar .search-header h5 a:hover {
  color: #fff;
  text-decoration: underline;
  background-color: #eb7e00;
}

/* Form layout */
.sidebar form {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  align-items: flex-end;
}

/* Input groups */
.sidebar .blog-category,
.sidebar .blog-topic {
  display: flex;
  flex-direction: column;
  flex: 1 1 78px;
}

.sidebar label {
  font-weight: bold;
  margin-bottom: 5px;
  color: #333;
}

.sidebar select {
  padding: 10px;
  font-size: 16px;
  border-radius: 5px;
  border: 1px solid #ccc;
  background-color: #f9f9f9;
  transition: 0.3s;
  width: 100%;
}

.sidebar select:hover,
.sidebar select:focus {
  border-color: #1b3058;
  background-color: #fff;
  outline: none;
}

/* Search button */
.sidebar button {
  padding: 10px 20px;
  background-color: #1b3058;
  color: white;
  border: none;
  font-weight: bold;
  font-size: 16px;
  cursor: pointer;
  white-space: nowrap;
  flex: 0 0 auto;
}

.sidebar button:hover {
  background-color: #eb7e00;
}

/* ----------------------------------------
   Responsive
---------------------------------------- */

@media (max-width: 1300px) {
  .search-layout-container {
    margin-top: 40%;
  }
}

@media (max-width: 1098px) {
  .search-layout-container {
    margin-top: 45%;
  }
}

@media (max-width: 1024px) {
  .search-layout-container {
    flex-direction: column;
    align-items: stretch;
  }

  .sidebar {
    width: 100%;
  }

  .blog-links-box {
    max-width: 100%;
    margin-top: 20px;
  }

  .sidebar form {
    flex-direction: column;
    align-items: stretch;
  }

  .sidebar .blog-category,
  .sidebar .blog-topic {
    width: 100%;
  }

  .sidebar button {
    width: 100%;
  }
}

@media (max-width: 992px) {
  .search-layout-container {
    margin-top: 38%;
  }
}

@media (max-width: 480px) {
  .search-layout-container {
    margin-top: 80%;
  }

  .sidebar {
    padding: 15px;
  }

  .sidebar select,
  .sidebar button {
    font-size: 14px;
    padding: 8px;
  }

  .sidebar label {
    font-size: 14px;
  }

  .sidebar .search-header h4,
  .sidebar .search-header h5 a {
    font-size: 16px;
  }
}

/**********Coding section *******************/
section.display-coding {
  position: relative;
  background-image: url(../images/freelance-software-engineer.jpeg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  padding-top: 230px;
  padding-bottom: 1px;
  text-align: center;
}

/* Background Styling */
.coding-display-section {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  /* Space between coding problems & search bar */
  align-items: flex-start;
  padding: 30px;
  background: #f4f6f8;
  /* Light background */
}

/* Coding List Container (Left Side) */
.coding-list-section {
  flex: 2;
  width: 75%;
  max-width: 1200px;
  background: #ffffff;
  padding: 15px;
  border-radius: 8px;
  box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.1);
  color: #333;
  margin: auto;
  margin-right: 2%;
}

/* Header */
.coding-list-section h2 {
  text-align: center;
  color: #a12c2f;
  margin-bottom: 15px;
  font-size: 20px;
}

/* Horizontal layout for Language and Topic */
.coding-meta {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.meta-item {
  flex: 1;
  min-width: 120px;
  font-weight: 500;
  color: #444;
}

/* Code area styling */
.code-content,
.coding-code-area {
  background-color: #1e1e1e;
  color: #dcdcdc;
  padding: 15px;
  border-radius: 6px;
  font-family: "Courier New", monospace;
  font-size: 14px;
  /* overflow-x: auto; */
  /* max-height: 300px; */
  /* limits height */
  white-space: pre;
}

/* Scrollbar styling */
.code-content::-webkit-scrollbar,
.coding-code-area::-webkit-scrollbar {
  height: 8px;
}

.code-content::-webkit-scrollbar-thumb,
.coding-code-area::-webkit-scrollbar-thumb {
  background-color: #555;
  border-radius: 4px;
}

.problem-statement-box {
  /* background-color: #f4f8ff; */
  border-left: 5px solid #f5a425;
  padding: 15px;
  border-radius: 6px;
  margin-bottom: 20px;
  /* display: flex; */
  width: 100%;
}

.problem-statement-box h3 {
  margin-top: 0;
  color: #2c3e50;
  font-size: 18px;
  margin-bottom: 10px;
  margin-left: 3%;
}

.problem-statement-box p {
  color: #333;
  font-size: 18px;
  margin-left: 8%;
  text-transform: uppercase;
}

/* Search Bar (Right Side) */

/* General styling for the search bar */
.search-layout-container-coding {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  margin: 40px auto;
  padding: 20px;
  max-width: 1200px;
  justify-content: space-between;
  align-items: flex-start;
  margin-top: 3%;
  margin-bottom: -3%;
}

/* Sidebar container */
.search-bar {
  flex: 1 1 65%;
  border: 1px solid #ddd;
  padding: 20px;
  border-radius: 5px;
  background-color: #f4f6f8;
  padding-top: 3%;
  padding-bottom: 3%;
}

/* Header row */
.search-bar .search-header {
  display: flex;
  /*justify-content: space-between; */
  align-items: center;
  margin-bottom: 20px;
}

.search-bar .search-header h4 {
  margin: 2px;
  font-size: 22px;
  color: #111;
  margin-left: 5%;
}

.search-bar .search-header h5 {
  margin: 0;
}

.search-bar .search-header h2 {
  margin-right: 10px;
  /* Add space to the right of "Search Blog" */
}

.search-bar .search-header a {
  margin-left: 15px;
  /* Optional: add space before "All Blog" */
}

.search-bar .search-header h5 a {
  text-decoration: none;
  color: white;
  font-weight: 500;
  font-size: 22px;
  background-color: #1b3058;
  padding: 10px 10px 10px;
}

.search-bar .search-header h5 a:hover {
  background-color: #f5a425;
  text-decoration: underline;
}

/* Form layout */
.search-bar form {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  align-items: flex-end;
}

/* Input groups */
.search-bar .coding-category,
.search-bar .coding-topic {
  display: flex;
  flex-direction: column;
  flex: 1 1 78px;
}

.search-bar label {
  font-weight: bold;
  margin-bottom: 5px;
  color: #333;
}

.search-bar select {
  padding: 10px;
  font-size: 16px;
  border-radius: 5px;
  border: 1px solid #ccc;
  background-color: #f9f9f9;
  transition: 0.3s;
  width: 100%;
}

.search-bar select:hover,
.search-bar select:focus {
  border-color: #1b3058;
  background-color: #fff;
  outline: none;
}

/* Search button */
.search-bar button {
  padding: 10px 20px;
  background-color: #1b3058;
  color: white;
  border: none;
  font-weight: bold;
  font-size: 16px;
  cursor: pointer;
  white-space: nowrap;
  flex: 0 0 auto;
}

.search-bar button:hover {
  background-color: #f5a425;
}

/* Add a little margin to the bottom */
.coding-display-section button {
  margin-top: 15px;
}

/* Adjustments for mobile screens */

/* ----------------------------------------
   Responsive
---------------------------------------- */
@media (max-width: 1098px) {
  .search-layout-container-coding {
    margin-top: 35%;
  }
}

@media (max-width: 1024px) {
  .search-layout-container-coding {
    flex-direction: column;
    align-items: stretch;
    margin-top: 5%;
  }

  .search-bar {
    width: 100%;
  }

  .blog-links-box {
    max-width: 100%;
    margin-top: 20px;
  }

  .search-bar form {
    flex-direction: column;
    align-items: stretch;
  }

  .search-bar .blog-category,
  .search-bar .blog-topic {
    width: 100%;
  }

  .search-bar button {
    width: 100%;
  }
}

@media (max-width: 992px) {
  .search-layout-container-coding {
    margin-top: 3%;
  }
}

@media (max-width: 480px) {
  .search-layout-container-coding {
    margin-top: 9%;
  }

  .search-bar {
    padding: 15px;
  }

  .search-bar select,
  .search-bar button {
    font-size: 14px;
    padding: 8px;
  }

  .search-bar label {
    font-size: 14px;
  }

  .search-bar .search-header h4,
  .search-bar .search-header h5 a {
    font-size: 10px;
  }
}

@media (max-width: 400px) {
  .search-header {
    width: 100%;
    display: flex;
  }

  .search-header h5 {
    width: 111%;
  }

  .search-header h5 a {
    font-size: 10px;
  }
}

/* all coding section css ***/
/* all coding section CSS */
.show-all-coding {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  margin: 30px 0;
  background-color: #f4f6f8;
}

.show-all-coding .coding-card {
  width: 300px;
  /* Fixed width */
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.2s ease-in-out;
  margin: 10px;
}

.show-all-coding .coding-card:hover {
  transform: scale(1.05);
}

.show-all-coding .coding-card-content {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.show-all-coding .coding-date {
  font-size: 14px;
  color: #888;
}

.show-all-coding .coding-category {
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

.show-all-coding .coding-topic {
  font-size: 16px;
  font-weight: 600;
  color: #333;
}

.show-all-coding .coding-card p {
  font-size: 14px;
  color: #555;
  margin: 0;
}

.show-all-coding pre {
  background-color: #f4f4f4;
  padding: 15px;
  font-family: "Courier New", monospace;
  border-radius: 5px;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.show-all-coding .read-more {
  margin-top: 5px;
  display: inline-block;
  padding: 8px 16px;
  background: transparent;
  border: 2px solid #000;
  border-radius: 6px;
  text-decoration: none;
  color: #000;
  transition: background 0.3s ease;
}

.show-all-coding .read-more:hover {
  background: #f5a425;
  color: #fff;
  border: 2px solid #f5a425;
}

/*******************************/
/* Responsive Design */
@media (max-width: 1024px) {
  .coding-card {
    width: 48%;
    /* Two cards per row */
  }
}

@media (max-width: 768px) {
  .coding-card {
    width: 48%;
    /* Two cards per row */
  }

  .show-all-coding {
    display: flex;
    flex-wrap: wrap;
  }
}

@media (max-width: 480px) {
  .coding-card {
    width: 100%;
    /* One card per row */
  }
}

/* Pagination controls */
.pagination-container {
  text-align: center;
  margin-top: 20px;
}

.pagination {
  display: inline-block;
  padding: 0;
}

.page-link {
  margin: 0 5px;
  font-size: 16px;
  color: #007bff;
  text-decoration: none;
}

.page-link:hover {
  text-decoration: underline;
}

.active-page {
  font-weight: bold;
  color: #333;
}

/* Section Header (Next Coding Problem) */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px;
  border-radius: 5px;
  font-size: 14px;
  color: #a12c2f;
  font-weight: bold;
}

/* "Next" Badge */
.next-badge {
  background: #a12c2f;
  color: white;
  padding: 4px 8px;
  border-radius: 3px;
  font-size: 12px;
  font-weight: bold;
  text-transform: uppercase;
}

/* Coding Box (Card Style) */
.coding-box {
  background: #ffffff;
  border-left: 4px solid #1b3058;
  border-radius: 6px;
  padding: 12px;
  margin-bottom: 15px;
  box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s, box-shadow 0.2s;
}

.coding-box .io-box {
  width: 100%;
  /* Fixed width container */
  max-width: 845px;
  /* You can adjust this */
  white-space: pre-wrap;
  /* ✅ Wrap long lines */
  word-wrap: break-word;
  /* ✅ Break words if needed */
  overflow-x: hidden;
  /* Hide horizontal scrollbar */
  overflow-y: auto;
  /* Add vertical scrollbar if content is long */
  background: #f7f7f7;
  padding: 10px;
  border-radius: 6px;
  border: 1px solid #ddd;
  font-family: monospace;
}

.coding-box:hover {
  transform: translateY(-3px);
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.15);
}

/* Labels */
.label {
  font-weight: bold;
  color: #a12c2f;
  margin-top: 8px;
  font-size: 13px;
}

/* Code Content */
.code-content {
  background-color: #f4f4f4;
  color: black;
  padding: 10px;
  border-radius: 4px;
  font-family: "Courier New", monospace;
  /* overflow-x: auto; */
  white-space: pre-wrap;
  word-wrap: break-word;
  border: 1px solid #ddd;
  font-size: 14px;
}

/* Responsive Adjustments */
@media (max-width: 1024px) {
  .coding-display-section {
    flex-direction: column;
    align-items: center;
    width: 97%;
    margin: auto;
  }

  .coding-list-section {
    width: 97%;
    margin: auto;
  }
}

@media (max-width: 768px) {
  .coding-display-section {
    flex-direction: column;
    padding: 15px;
  }

  .coding-list-section {
    max-width: 100%;
    padding: 10px;
  }

  .section-header {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .next-badge {
    margin-top: 5px;
  }
}

@media (max-width: 480px) {
  .coding-box {
    padding: 8px;
  }

  .code-content {
    font-size: 12px;
  }

  .coding-list-section h2 {
    font-size: 18px;
  }

  .problem-statement-box h3 {
    font-size: 15px;
  }
}

/********LOGIN REGISTER FORM *****************/
section.login-register {
  position: relative;
  background-image: url(../images/register-now.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  padding-top: 230px;
  padding-bottom: 1px;
  text-align: center;
}

.registration-form-container {
  height: auto;
  background: url(../images/meetings-page-bg.jpg);
  width: 100%;
  padding-top: 2%;
  padding-bottom: 5%;
}

.login-register-container {
  padding: 20px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  max-width: 400px;
  text-align: center;
  margin: auto;
  margin-top: 5%;
  background-color: white;
}

.form-box h2 {
  margin-bottom: 20px;
  color: #a12c2f;
}

.login-register-container input {
  width: 100%;
  padding: 10px;
  margin: 10px 0;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.login-register-container button {
  width: 100%;
  padding: 12px;
  background: url(../images/service-item-bg.jpg);
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 16px;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.3);
}

/* Hover 3D Effect */
.login-register-container button:hover {
  background-color: #a12c2f;
  transform: scale(1.05);
  /* Slightly enlarge */
  box-shadow: 0 10px 20px rgba(161, 44, 47, 0.7),
    0 15px 25px rgba(161, 44, 47, 0.5);
}

/* Shine Effect */
.login-register-container button::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  transform: skewX(-30deg);
  transition: left 0.5s ease-in-out;
}

/* Shine Moves on Hover */
.login-register-container button:hover::before {
  left: 100%;
}

/* Click Effect */
.login-register-container button:active {
  transform: scale(0.98);
  /* Slightly shrink */
  box-shadow: 0 3px 6px rgba(161, 44, 47, 0.5);
}

.login-register-container p {
  margin-top: 10px;
  color: black;
}

.login-register-container a {
  color: #a12c2f;
  text-decoration: none;
  cursor: pointer;
}

.login-register-container a:hover {
  text-decoration: underline;
}




/* Responsive Design */
@media (max-width: 768px) {
  .login-register-container {
    width: 90%;
  }
}

/* Role Selection Box */
.role-select-box {
  margin: 15px 0;
  text-align: left;
}

.role-select-box label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
  color: #a12c2f;
  text-align: left;
}

.role-select-box select {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: white;
  font-size: 14px;
  cursor: pointer;
  outline: none;
  transition: border-color 0.3s ease;
}

.role-select-box select:focus {
  border-color: #a12c2f;
  box-shadow: 0 0 5px rgba(161, 44, 47, 0.3);
}

/* Extra Fields Styling (Teacher/Student) */
.extra-fields input {
  width: 100%;
  padding: 10px;
  margin: 10px 0px 15px 0;
  border: 1px solid #ccc;
  border-radius: 5px;
  background: #fff;
  transition: border-color 0.3s ease;
}

.extra-fields input:focus {
  border-color: #a12c2f;
  box-shadow: 0 0 5px rgba(161, 44, 47, 0.3);
}

/* =============================
   Degree Input Box Styling
   ============================= */

.degree-input-box {
  width: 100%;
  margin-top: 10px;
  display: none;
  opacity: 0;
  transform: translateY(-5px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.degree-input-box.show {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

.degree-input-box input {
  width: 100%;
  padding: 10px;
  margin-top: 5px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background: #fff;
  font-size: 14px;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.degree-input-box input:focus {
  border-color: #a12c2f;
  box-shadow: 0 0 5px rgba(161, 44, 47, 0.3);
  outline: none;
}

.degree-input-box input::placeholder {
  color: #999;
}

/* Responsive */
@media (max-width: 768px) {
  .degree-input-box input {
    font-size: 13px;
    padding: 9px;
  }
}

@media (max-width: 480px) {
  .degree-input-box input {
    font-size: 12px;
    padding: 8px;
  }
}

/* =============================
   Qualification Dropdown Styling
   ============================= */

#teacher_qualf {
  width: 100%;
  padding: 10px;
  margin-top: 5px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #fff;
  font-size: 14px;
  color: #333;
  cursor: pointer;
  outline: none;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
  appearance: none;
  /* removes default arrow */
  -webkit-appearance: none;
  -moz-appearance: none;
  background-size: 18px;
}

#teacher_qualf:focus {
  border-color: #a12c2f;
  box-shadow: 0 0 5px rgba(161, 44, 47, 0.3);
}

#teacher_qualf option {
  color: #333;
}

/* Label styling for dropdown */
label[for="teacher_qualf"] {
  display: block;
  font-size: 14px;
  font-weight: bold;
  color: #a12c2f;
  text-align: left;
  margin-top: 10px;
  margin-bottom: 5px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  #teacher_qualf {
    font-size: 13px;
    padding: 9px;
    background-position: right 8px center;
  }
}

@media (max-width: 480px) {
  #teacher_qualf {
    font-size: 12px;
    padding: 8px;
    background-position: right 6px center;
  }
}



/*********Discussion  BOARD*************************/



/* Container */
.discussion-container {
  display: flex;
  gap: 20px;
  padding: 20px;
  max-width: 1200px;
  margin: auto;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  color: #333;
  background: #f9fafb;
  overflow-x: hidden;
  /* <-- Add this */
  box-sizing: border-box;
  /* <-- Ensure padding is included in width */
}


/* Sidebar */
.discussion-sidebar {
  flex: 0 0 250px;
  background: #ffffff;
  padding: 20px;
  border-radius: 10px;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  position: sticky;
  top: 20px;
}

.discussion-sidebar h3 {
  margin-top: 0;
  margin-bottom: 15px;
  font-size: 18px;
  color: #1b3058;
}

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

.discussion-sidebar ul li {
  margin-bottom: 10px;
}

.discussion-sidebar ul li a {
  text-decoration: none;
  color: #1b3058;
  font-weight: 500;
  display: block;
  padding: 8px 12px;
  transition: 0.3s;
}

.discussion-sidebar ul li a:hover {
  background: #e8f0fe;
  color: #1b3058;
  border-bottom: 1px solid #1b3058;
}

/* Main Content */
.discussion-main {
  flex: 1;
}

/* Each Question Card */
.discussion-board {
  background: #ffffff;
  border-radius: 10px;
  padding: 20px;
  margin-bottom: 20px;
  /* box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); */
  transition: transform 0.2s;
}


/* Question Box */
.question-box a {
  font-size: 30px;
  margin: 0 0 10px;
  color: #1b3058;
  font-weight: 700;
}

.question-box a:hover {
  color: #eb7e00;
}

.question-details {
  background: #f1f3f4;
  width: 100%;
  /* <-- Change from 90% */
  padding: 12px;
  border-left: 4px solid #1b3058;
  border-radius: 6px;
  margin: 12px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  color: #333;
}


.attempt {
  background: #e8f5e9;
  padding: 10px;
  border-left: 4px solid #1b3058;
  border-radius: 6px;
  font-style: italic;
  margin-bottom: 15px;
}

/* Code Blocks */
.ql-syntax {
  background-color: #f5f7fa;
  border: 1px solid #d1d5db;
  padding: 12px;
  margin-top: 15px;
  border-radius: 6px;
  font-family: "Courier New", monospace;
  font-size: 14px;
  overflow-x: auto;
  max-height: 300px;
}

/* Images in Questions */
.discussion-board p img {
  max-width: 100%;
  border-radius: 8px;
  margin: 12px 0;
  display: block;
  height: auto;
}

/* Asked By Section */
.asked-by {
  margin-top: 15px;
  padding: 12px 16px;
  background: #f1f3f4;
  border-left: 4px solid #1b3058;
  border-radius: 8px;
  font-size: 14px;
  color: #555;
  font-style: italic;
}

.asked-by strong {
  color: #1b3058;
  font-style: normal;
}

.asked-by .tag {
  display: inline-block;
  background-color: #ddeaff;
  color: #1b3058;
  padding: 4px 10px;
  margin: 5px 6px 0 0;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: 0.3s;
}

.asked-by .tag:hover {
  background-color: #d2e3fc;
}

/* Answer Box */
.answer-box {
  background: #f8f9fa;
  border: 1px solid #d1d5db;
  padding: 15px;
  border-radius: 8px;
  margin: 20px 0;
}

.answer-box h3 {
  font-size: 18px;
  margin-bottom: 10px;
}

.answer-box textarea {
  width: 100%;
  min-height: 150px;
  padding: 10px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-family: monospace;
  font-size: 14px;
  resize: vertical;
}

.answer-box button {
  margin-top: 10px;
  padding: 10px 16px;
  background-color: #1b3058;
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: 0.3s;
}

.answer-box button:hover {
  background-color: #1b3058;
}

/* Responsive */
@media (max-width: 768px) {
  .discussion-container {
    flex-direction: column;
  }

  .discussion-sidebar {
    position: static;
    max-height: none;
    margin-bottom: 20px;
  }
}

/***========Ask question ====================******/
.ask-question-form-box {
  height: auto;
  background: url(../images/meetings-page-bg.jpg);
  width: 100%;
  padding-top: 2%;
  padding-bottom: 5%;
}

.ask-question-container {
  max-width: 80%;
  margin: auto;
  background: white;
  padding: 20px 30px;
  border-radius: 8px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
  margin-top: 5%;
}

.ask-question-container h2 {
  margin-bottom: 10px;
}

.ask-question-container label {
  font-weight: bold;
  display: block;
  margin-top: 20px;
  margin-bottom: 5px;
}

.ask-question-container input[type="text"],
textarea {
  width: 100%;
  padding: 12px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 14px;
  resize: vertical;
}

.ask-question-container textarea {
  min-height: 120px;
}

.ask-question-container .tags-input {
  margin-top: 5px;
}

.ask-question-container button {
  font-size: 13px;
  color: #fff;
  background-color: #a12c2f;
  padding: 12px 30px;
  display: inline-block;
  border-radius: 22px;
  font-weight: 500;
  text-transform: uppercase;
  transition: all 0.3s;
}

.ask-question-container button:hover {
  background-color: #f5a425;
}

.ask-question-container .suggested-questions {
  margin-top: 20px;
  padding: 10px;
  background: #f1f1f1;
  border-left: 4px solid #0a95ff;
}

.ask-question-container .suggested-questions p {
  margin: 0;
}

@media (max-width: 600px) {
  .ask-question-container {
    padding: 15px;
  }

  .ask-question-container input[type="text"],
  textarea {
    font-size: 13px;
  }

  .discussion-board p img {
    max-width: 100%;
    height: auto;

  }
}

.ask-ques {
  font-size: 13px;
  color: #fff;
  background-color: #a12c2f;
  padding: 12px 30px;
  display: inline-block;
  border-radius: 22px;
  font-weight: 500;
  text-transform: uppercase;
  transition: all 0.3s;
}

.ask-ques a:hover {
  opacity: 0.9;
}

/* Make editor height expand or scroll */
#editor-container {
  min-height: 200px;
  /* initial height */
  max-height: 500px;
  /* adjust as you want */
  overflow-y: auto;
  /* allow scrolling */
  border: 1px solid #ccc;
  border-radius: 5px;
  background: #fff;
}

/* Ensure code block background stretches properly */
/* Put this after quill.snow.css */
.ql-editor pre.ql-syntax {
  background-color: #2d2d2d !important;
  color: #f8f8f2 !important;
  padding: 10px !important;
  border-radius: 6px !important;
  font-family: "Fira Code", monospace !important;
  line-height: 1.5 !important;

  white-space: pre-wrap !important;
  word-break: break-word !important;
  display: block !important;
  width: 100% !important;

  /* Scroll behavior */
  max-height: 400px;
  /* Set the maximum height you want */
  overflow: auto !important;
  /* Show scrollbar if content exceeds max height */
}







/******Asked question complete-data.html file ****************/

section.complete-asked-question-data {
  position: relative;
  background-image: url(../images/complete-asked-question.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  padding-top: 230px;
  padding-bottom: 1px;
  text-align: center;
}

.question-container {
  max-width: 1350px;
  margin: 40px auto;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  height: auto;
  /* Be cautious using 100vh, might be better as 'auto' or 'min-height' */
}

.question-container .question-header {
  background: #e8f0fe;
  padding: 20px;
}

.question-container .question-header h1 {
  margin: 0;
  font-size: 1.5em;
  margin-bottom: 2%;
}

.question-container .question-body {
  padding: 20px;
}

.question-container .question-body p {
  margin-bottom: 20px;
  font-size: 1.2em;
}

.question-container .code-block {
  background: #f5f5f5;
  border-left: 4px solid #a12c2f;
  padding: 15px;
  overflow-y: auto;
  /* Enables vertical scroll if content exceeds max-height */
  font-family: monospace;
  color: #333;
  max-height: 1000px;
}

/*********/
.question-container .tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 10px;
}

.question-container .tag {
  background-color: #e5f3fa;
  border-radius: 3px;
  padding: 2px 6px;
  font-size: 13px;
  color: #0077cc;
  border: 1px solid #d3eaf7;
  display: inline-block;
}

/*****all blog.php  file css *******/
.show-all-blog {
  display: flex;
  flex-direction: column;
  /* Stack children vertically */
  align-items: center;
  /* Center items horizontally */
  padding: 20px;
  gap: 40px;
  /* Add spacing between blog cards and pagination */
}

.show-all-blog .blog-card {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 8px;
  width: 100%;
  max-width: 350px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease;
}

.show-all-blog .blog-card:hover {
  transform: scale(1.02);
}

.show-all-blog .blog-card img {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.show-all-blog .blog-card-content {
  padding: 15px;
}

.show-all-blog .blog-card-content h2 {
  margin: 10px 0 5px;
}

.show-all-blog .blog-card-content p {
  margin: 5px 0;
  color: #555;
}

.show-all-blog .blog-date {
  font-size: 0.9rem;
  color: #888;
}

.show-all-blog .read-more {
  margin-top: 15px;
  display: inline-block;
  padding: 8px 16px;
  background: transparent;
  border: 2px solid #000;
  border-radius: 6px;
  text-decoration: none;
  color: #000;
  transition: background 0.3s ease;
}

.show-all-blog .read-more:hover {
  background: #f5a425;
  color: #fff;
  border: 2px solid #f5a425;
}

.show-all-blog .show-all-blog-heading {
  margin-top: 5%;
  font-size: 3rem;
}

/*****pagination *************/
.blog-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  justify-content: center;
  width: 100%;
}

.pagination-container {
  display: flex;
  justify-content: center;
  margin-top: 30px;
  width: 100%;
}

.pagination {
  display: flex;
  gap: 10px;
  background: #fff;
  padding: 10px 20px;
  border-radius: 10px;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
}

.page-link {
  padding: 8px 14px;
  border-radius: 6px;
  background-color: #f0f0f0;
  color: #333;
  text-decoration: none;
  font-weight: bold;
  transition: all 0.3s ease;
}

.page-link:hover {
  background-color: #f5a425;
  color: #fff;
}

.active-page {
  background-color: #f5a425;
  color: #fff;
}

@media (max-width: 768px) {
  .show-all-blog .blog-card {
    max-width: 100%;
  }
}

@media (min-width: 748px) and (max-width: 1064px) {
  .show-all-blog .show-all-blog-heading {
    font-size: 2rem;
  }
}

@media (min-width: 320px) and (max-width: 750px) {
  .show-all-blog .show-all-blog-heading {
    font-size: 2rem;
  }
}

/*****login sucess message box********/
/* Your existing styling for the message box */
#login-success-message-box {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  justify-content: center;
  align-items: center;
  animation: fadeInOverlay 0.3s ease forwards;
}

/* Fade in animation for overlay */
@keyframes fadeInOverlay {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* The alert box container */
#login-success-message-box>div {
  background: #fff;
  padding: 25px 35px;
  border-radius: 12px;
  max-width: 320px;
  width: 90%;
  text-align: center;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25),
    0 0 15px rgba(255, 255, 255, 0.2) inset;
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  animation: slideDown 0.3s ease forwards;
}

/* Fade and slide down animation for alert box */
@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Alert message text */
#login-success-message-box-message {
  font-size: 18px;
  color: #333;
  margin-bottom: 25px;
  font-weight: 600;
}

/* Styled OK button */
#login-success-message-box-ok-btn {
  padding: 10px 28px;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  background: linear-gradient(135deg, #f5a425, rgb(247, 178, 68));
  border: none;
  border-radius: 6px;
  cursor: pointer;
  box-shadow: 0 4px 8px rgba(54, 105, 217, 0.4);
  transition: background 0.3s ease;
}

/* Button hover effect */
#login-success-message-box-ok-btn:hover {
  background: linear-gradient(135deg, #f5a425, rgb(247, 178, 68));
}

/* Button focus outline */
#login-success-message-box-ok-btn:focus {
  outline: 2px solid #f5a425;
  outline-offset: 2px;
}

/******************* INDEX.HTML FILE CSS (SECTION-2) ********************************/
.section-2 {
  position: relative;
  z-index: 2;
  margin-top: 0;
  width: 100%;
  padding: 40px 20px;
  background: #fafafa;
}

.section-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  width: 95%;
  margin: 40px auto;
  border-radius: 15px;
  padding: 40px;
  background-color: #f4f6f8;
  border: 1px solid #e1e1e1;
  /* subtle border */
  /*box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08); 
  transition: transform 0.3s ease, box-shadow 0.3s ease; */
}

/* Hover effect 
.section-content:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12);
}

/* Alternate layout */
.section-content:nth-child(even) {
  flex-direction: row-reverse;
}

.section-content h2,
.section-content p {
  color: #1b3058;
}

.section-content h2 {
  text-transform: uppercase;
  font-size: 28px;
  margin-bottom: 15px;
  font-weight: 700;
  letter-spacing: 1px;
}

.section-content p {
  font-size: 18px;
  line-height: 1.7;
  color: #444;
  font-weight: 500;
}

.student-project-div,
.professional-project-div,
.technical-blog-div,
.solved-code-div {
  width: 55%;
}

.student-project-image,
.professional-project-image,
.technical-blog-image,
.solve-code-image {
  width: 40%;
  display: flex;
  justify-content: center;
}

.section-content img {
  width: 100%;
  max-width: 420px;
  height: auto;
  border-radius: 12px;
  object-fit: cover;
  border: 3px solid #f4f4f4;
  /* light border around image */
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15);
  /* soft image shadow */
  transition: transform 0.3s ease;
}

/* Image hover zoom */
.section-content img:hover {
  transform: scale(1.05);
}

/* Responsive */
@media (max-width: 768px) {
  .section-content {
    flex-direction: column !important;
    text-align: center;
    padding: 25px;
  }

  .student-project-div,
  .professional-project-div,
  .technical-blog-div,
  .solved-code-div,
  .student-project-image,
  .professional-project-image,
  .technical-blog-image,
  .solve-code-image {
    width: 100%;
  }

  .section-content img {
    max-width: 100%;
    margin-top: 20px;
  }
}

@media (max-width: 425px) {
  .section-content {
    width: 99%;
    padding: 20px;
  }

  .section-content p {
    font-size: 15px;
    line-height: 1.6;
    font-weight: 500;
  }
}

/********Home page slider working ****************/
.home-page-slider {
  position: relative;
  /* ensures slider stays in flow */
  z-index: 1;
  margin-bottom: -40px;
}

/* ==============================
   📂 PDF Library Scoped Styles
   ============================== */

/*******Coding section**/
section.pdfpage {
  position: relative;
  background-image: url(../images/pdf-image.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  padding-top: 230px;
  padding-bottom: 1px;
  text-align: center;
}

section.pdfpage::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  /* Adjust opacity as needed */
  z-index: 1;
}

.pdfpage .container {
  position: relative;
  z-index: 2;
  /* Ensures text remains unaffected */
  color: white;
  /* Adjust text color if necessary */
}

/* Scope all styles under .pdf-library-wrapper */
.pdf-library-wrapper {
  padding: 40px 20px;
  background: #f4f4f4;
  /* theme light background */
  border-radius: 12px;
}

.pdf-library-wrapper h1 {
  font-size: 2rem;
  font-weight: 600;
  color: #1b3058;
  /* theme dark */
  margin-bottom: 20px;
  text-align: center;
}

.pdf-library-wrapper .search-box {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 25px;
}

.pdf-library-wrapper .search-box select,
.pdf-library-wrapper .search-box button {
  padding: 10px 14px;
  font-size: 15px;
  border-radius: 6px;
  border: 1px solid #ddd;
  transition: all 0.3s ease;
  min-width: 150px;
}

.pdf-library-wrapper .search-box select:focus {
  outline: none;
  border-color: #1b3058;
  box-shadow: 0px 0px 6px rgba(27, 48, 88, 0.4);
}

.pdf-library-wrapper .search-box button {
  background-color: #1b3058;
  color: white;
  border: none;
  cursor: pointer;
}

.pdf-library-wrapper .search-box button:hover {
  background-color: #14223e;
}

/* 📄 PDF Card */
.pdf-library-wrapper .pdf-card {
  background: white;
  border: 1px solid #e1e1e1;
  border-radius: 10px;
  padding: 20px;
  margin: 15px auto;
  max-width: 700px;
  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.08);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.pdf-library-wrapper .pdf-card:hover {
  transform: translateY(-3px);
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.12);
}

.pdf-library-wrapper .pdf-card h2 {
  font-size: 20px;
  margin-bottom: 10px;
  color: #1b3058;
}

.pdf-library-wrapper .pdf-card p {
  font-size: 14px;
  margin: 5px 0;
  color: #555;
}

.pdf-library-wrapper .pdf-card a {
  display: inline-block;
  margin-top: 10px;
  margin-right: 10px;
  text-decoration: none;
  background: #1b3058;
  color: white;
  padding: 8px 14px;
  border-radius: 5px;
  font-size: 13px;
  transition: background 0.3s;
}

.pdf-library-wrapper .pdf-card a:hover {
  background: #14223e;
}

/* ==============================
   📱 Responsive Design
   ============================== */

/* Tablets */
@media (max-width: 992px) {
  .pdf-library-wrapper {
    padding: 30px 15px;
  }

  .pdf-library-wrapper h1 {
    font-size: 1.8rem;
  }

  .pdf-library-wrapper .pdf-card {
    max-width: 90%;
  }
}

/* Mobiles */
@media (max-width: 600px) {
  .pdf-library-wrapper h1 {
    font-size: 1.5rem;
  }

  .pdf-library-wrapper .search-box {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .pdf-library-wrapper .search-box select,
  .pdf-library-wrapper .search-box button {
    width: 100%;
  }

  .pdf-library-wrapper .pdf-card {
    padding: 15px;
    margin: 10px auto;
  }

  .pdf-library-wrapper .pdf-card h2 {
    font-size: 18px;
  }

  .pdf-library-wrapper .pdf-card p {
    font-size: 13px;
  }

  .pdf-library-wrapper .pdf-card a {
    display: block;
    width: 100%;
    text-align: center;
    margin: 8px 0;
  }
}

.error-message {
  color: red;
  font-size: 14px;
  margin-top: 4px;
  display: block;
}

/**===run code css=========*/
.runcode-button a {
  padding: 10px 20px;
  background-color: #1b3058;
  color: white;
  border: none;
  font-weight: bold;
  font-size: 16px;
  cursor: pointer;
  margin-left: 25%;

}

/** ==================== 
   One-compiler
======================= */
/* ===== TOPBAR ===== */
.topbar {
  display: flex;
  flex-wrap: wrap;
  /* ✅ Wrap on small screens */
  gap: 10px;
  padding: 12px;
  background-color: var(--panel-bg);
  align-items: center;
  justify-content: flex-start;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.topbar select,
.topbar button {
  padding: 8px 12px;
  border: none;
  cursor: pointer;
  border-radius: 4px;
  font-weight: bold;
  background-color: rgb(129, 17, 17);
  color: white;
  flex-shrink: 0;
}

.topbar button.reset-btn {
  background-color: #e74c3c;
}

.topbar button.run-btn {
  background-color: #27ae60;
}

.topbar button.clear-btn {
  background-color: #c0392b;
}

.topbar button.download-btn {
  background-color: #7f8c8d;
}

.theme-toggle {
  margin-left: auto;
  background-color: #6c5ce7;
}

/* ===== LAYOUT ===== */
.online-compiler-container {
  display: flex;
  flex-wrap: wrap;
  /* ✅ Stacks on smaller screens */
  gap: 15px;
  padding: 10px;
}

.editor {
  flex: 3;
  min-width: 300px;
  height: 400px;
  background-color: var(--editor-bg);
  color: var(--editor-text);
  border-radius: 6px;
  overflow: hidden;
}

.sidepanel {
  flex: 2;
  min-width: 250px;
  padding: 15px;
  background-color: var(--panel-bg);
  border-radius: 6px;
}

.sidepanel h3 {
  color: #0077ff;
  margin-bottom: 5px;
}

#output {
  height: 200px;
  white-space: pre-wrap;
  background-color: var(--output-bg);
  border: 1px solid #ccc;
  padding: 10px;
  overflow-y: auto;
  border-radius: 4px;
}

textarea#inputCode {
  width: 100%;
  height: 100px;
  border-radius: 4px;
  border: 1px solid #ccc;
  padding: 8px;
  font-family: Consolas, monospace;
  font-size: 14px;
  resize: vertical;
}

/* ===== RESPONSIVE BREAKPOINTS ===== */
@media (max-width: 768px) {
  .online-compiler-container {
    flex-direction: column;
  }

  .editor {
    height: 300px;
    /* Smaller height on mobile */
  }

  .sidepanel {
    width: 100%;
  }

  .topbar {
    justify-content: center;
  }

  .theme-toggle {
    margin-left: 0;
  }
}

@media (max-width: 480px) {

  .topbar select,
  .topbar button {
    flex: 1 1 100%;
    text-align: center;
  }

  .editor {
    height: 250px;
  }

  #output {
    height: 150px;
  }
}


section.online-compiler-section {
  position: relative;
  background-image: url(../images/compiler.png);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  padding-top: 230px;
  padding-bottom: 1px;
  text-align: center;
}