@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400;500;600;700&display=swap');

:root{
   --main-color: #b75300;
   --light-bg:#eee;
   --black:#2c3e50;
   --white:#fff;
   --hover-color:#dadada;
   --red:#e74c3c;
   --orange:#ff8000;
   --light-color:#888;
   --bablu-color:#14cd1d; 
   --edit-btn:#008800;
   --light-bg:#eee;
   --border:.1rem solid rgba(0,0,0,.2);
   --optional-message: #c00000;
}

body.dark{
   --light-color:#aaa;
   --light-bg:#333;
   --black:#fff;
   --white:#222;
   --hover-color:#1a1a1a;
   --border:.1rem solid rgba(255,255,255,.2);
   --optional-message: #ff5959;
    --edit-btn:#008800;
}


*{
   font-family: 'Nunito', sans-serif;
   margin:0; padding:0;
   box-sizing: border-box;
   outline: none; border:none;
   text-decoration: none;
}

*::selection{
   background-color: var(--main-color);
   color:#fff;
}

html{
   font-size: 62.5%;
   overflow-x: hidden;
}

html::-webkit-scrollbar{
   width: 1rem;
   height: .5rem;
}

html::-webkit-scrollbar-track{
   background-color: transparent;
}

html::-webkit-scrollbar-thumb{
   background-color: var(--main-color);
}

body{
   background-color: var(--light-bg);
   padding-left: 30rem;
}


body.active{
   padding-left: 0;
}

section{
   padding:2rem;
   margin: 0 auto;
   max-width: 1500px;
   padding-bottom: 5rem;
}

.heading{
   font-size: 2.5rem;
   color:var(--black);
   margin-bottom: 2.5rem;
   border-bottom: var(--border);
   padding-bottom: 1.5rem;
   text-transform: capitalize;
}
.message{
   position: sticky;
   top: 0; left: 0; right:0;
   z-index: 1200;
   background-color: var(--main-color);
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 1.5rem;
   padding: 2rem;
   max-width: 1200px;
   margin: 0 auto;
}

.message.form{
   top:2rem;
   background-color: var(--white);
 
}

.message span{
   font-size: 2rem;
   color: white;
   font-weight: 700;
}

.message i{
   cursor:pointer;
   font-size: 2.5rem;
   color: white;
   transition: .2s linear;
}

.message i:hover{
  rotate: 90deg;
}


.inline-btn,
.inline-option-btn,
.inline-delete-btn,
.btn,
.delete-btn
{
   border-radius: .5rem;
   color:#fff;
   font-size: 1.8rem;
   cursor: pointer;
   text-transform: capitalize;
   padding:1rem 3rem;
   text-align: center;
   margin-top: .5rem;
 
}
.option-btn{
   border-radius: .5rem;
   color:#fff;
   font-size: 1.8rem;
   cursor: pointer;
   text-transform: capitalize;
   padding:1rem 3rem;
   text-align: center;
   margin-top: .5rem;
   width: 100%;
}


.btn,
.delete-btn
{
   display: block;
   width: 100%;
}


.inline-btn,
.inline-option-btn,
.inline-delete-btn{
   display: inline-block;
   
}

.btn,
.inline-btn{
   background-color: var(--main-color);
   margin-top: 1rem;
   font-weight: 600;
}

.option-btn,
.inline-option-btn{
   background-color:var(--main-color);
}

.delete-btn,
.inline-delete-btn{
   background-color: var(--red);
}

.inline-btn:hover,
.inline-option-btn:hover,
.inline-delete-btn:hover,
.btn:hover,
.delete-btn:hover,
.option-btn:hover{
   background-color: var(--black);
   color: var(--white);
}

.flex-btn{
   display: flex;
   gap: 1rem;
   margin-top: .5rem;
}

.header{
   position: sticky;
   top:0; left:0; right: 0;
   background-color: var(--white);
   /* background-color: var(--light-bg); */
   z-index: 1000;
   /* border-bottom: var(--border); */
   /* padding-left: 30rem; */
}

.header .flex{
   display: flex;
   align-items: center;
   justify-content: space-between;
   position: relative;
   padding: 1.5rem 2rem;
}

.header .flex .logo{
   font-size: 2.5rem;
   color: var(--black);
}

.header .flex .search-form{
   width: 50rem;
   border-radius: 3rem;
   background-color: var(--light-bg);
   padding:1.5rem 2rem;
   display: flex;
   /* border: var(--border); */
   gap:2rem;

}

.header .flex .search-form input{
   width: 100%;
   font-size: 1.8rem;
   color:var(--black);
   background:none;
}

.header .flex .search-form button{
   background:none;
   font-size: 2rem;
   cursor: pointer;
   color:var(--black);
}

.header .flex .search-form button:hover{
   color: var(--main-color);
}

.header .flex .icons div{
   font-size: 2rem;
   color:var(--black);
   background-color: var(--light-bg);
   border-radius: .5rem;
   height: 4.5rem;
   width: 4.5rem;
   line-height: 4.5rem;
   cursor: pointer;
   text-align: center;
   margin-left: .7rem;
}
.e-phone{
   display: flex;
   align-items: center;
   gap: 0.5rem;
}

.header .flex .icons div:hover{
   background-color: var(--black);
   color:var(--white);
}

.header .flex .profile{
   position: absolute;
   top:120%; right: 2rem;
   background-color: var(--white);
   border-radius: .5rem;
   padding: 1.5rem;
   text-align: center;
   overflow: hidden;
   transform-origin: top right;
   transform: scale(0);
   transition: .2s linear;
   width: 30rem;
}

.header .flex .profile.active{
   transform: scale(1);
}

.header .flex .profile .image{
   height: 10rem;
   width: 10rem;
   border-radius: 50%;
   object-fit: contain;
   margin-bottom: 1rem;
}

.header .flex .profile h3{
   margin-bottom: .5rem;
   font-size: 2rem;
   color: var(--black);
   text-overflow: ellipsis;
   overflow-x: hidden;
}

.header .flex .profile span{
   font-size: 1.5rem;
   color: var(--light-color);

}

.header .flex .profile img{
   margin-bottom: .5rem;
   height:  10rem;
   width: 10rem;
   border-radius: 50%;
   object-fit: cover;
}

.header .flex .profile .name{
   font-size: 2rem;
   color:var(--black);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
}

.header .flex .profile .role{
   font-size: 1.8rem;
   color: var(--light-color);
}

.header .flex .profile p{
   font-size: 1.5rem;
   color: var(--light-color);
   margin-top: 1rem;
}

.header .flex .profile p a{
   color: var(--light-color);
   margin-left: .5rem;
}

.header .flex .profile p a:hover{
   color: var(--main-color);
   transform: scale(1.2);
   transition: all .2s linear;
   text-shadow: #bfbfbf 0 0 10px;
}

#search-btn{
   display: none;
}

/* .side-bar{
   position: fixed;
   top: 0; left: 0;
   width: 30rem;
   background-color: var(--white);
   height: 100vh;
   border-right: var(--border);
   z-index: 1200;
     transition: left 0.3s ease;
   overflow: hidden;
} */

.side-bar{
   position: fixed;
   top: 0; left: 0;
   width: 30rem;
   background-color: var(--white);
   height: 100vh;
   /* border-right: var(--border); */
   z-index: 1200;
   transition: left 0.3s ease;
   overflow:hidden;
   padding-bottom: 20rem;
   /* margin-bottom: 5rem; */
   overscroll-behavior-block: none;
}

.sidebar-footer {
   position: absolute;
   bottom: 0;
   width: 100%;
   background: var(--white);
   text-align: center;
   padding: 1rem 1rem;
   font-size: 1.1rem;
   color: var(--light-color);
   overscroll-behavior-block: none;
} 
.sidebar-footer strong{
   color: var(--black);
}

.sidebar-footer p span{
   color: var(--main-color);
}

.sidebar-footer p a {
   color: var(--light-color);
}


.side-bar #close-btn{
   text-align: right;
   padding: 1rem;
   display: none;
   overscroll-behavior-block: none;
}

.side-bar #close-btn i{
   text-align: right;
   font-size: 2.5rem;
   background:var(--red);
   border-radius: .5rem;
   color:var(--white);
   cursor: pointer;
   height: 4.5rem;
   width: 4.5rem;
   line-height: 4.5rem;
   text-align: center;
   overscroll-behavior-block: none;
}

.side-bar #close-btn i:hover{
   background-color: var(--black);
   overscroll-behavior-block: none;
}

.side-bar .profile{
   padding:2.5rem 2rem 1rem 2rem;
   text-align: center;
   border-radius: .5rem;
   width: 30rem;
   overflow-x: hidden;
   overscroll-behavior-block: none;
}

.side-bar .profile .image{
   height: 10rem;
   width: 10rem;
   border-radius: 50%;
   object-fit: contain;
   margin-bottom: 1rem;
   overscroll-behavior-block: none;
}

.side-bar .profile img{
   margin-bottom: .5rem;
   height:  10rem;
   width: 10rem;
   border-radius: 50%;
   object-fit: contain;
   margin-bottom: 1rem;
   overscroll-behavior-block: none;
}

.side-bar .profile h3{
   margin-bottom: .5rem;
   font-size: 2rem;
   color: var(--black);
   text-overflow: ellipsis;
   overflow-x: hidden;
   overscroll-behavior-block: none;
}

.side-bar .profile span {
   font-size: 1.5rem;
   color: var(--light-color);
   overscroll-behavior-block: none;
}

.side-bar .profile .name{
   font-size: 2rem;
   color:var(--black);
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
   overscroll-behavior-block: none;
}

.side-bar .profile .role{
   font-size: 1.8rem;
   color: var(--light-color);
   overscroll-behavior-block: none;
}


.side-bar .navbar a{
   display: block;
   padding: 2rem;
   font-size: 2rem;
   font-weight: 600;
   background-color: var(--white);
   overscroll-behavior-block: none;
}
.side-bar .navbar a.active {
  background-color: var(--light-bg);
  color: #fff;
}

.navbar a.active i {
  color: #fff;
}

/* Optional: smoother feel */
.navbar a {
  transition: background-color 0.2s ease, color 0.2s ease;
}


.side-bar .navbar .dropdown-list a{
   padding: 2rem 1rem 2rem 4rem; /* extra left indent for dropdown */
   overscroll-behavior-block: none;
}

.side-bar .navbar a i{
   margin-right: 1.5rem;
   color:var(--main-color);
   transition: .2s linear;
   overscroll-behavior-block: none;
}

.side-bar .navbar a span{
   color:var(--light-color);
   overscroll-behavior-block: none;
}

.side-bar .navbar a:hover{
   background-color: var(--hover-color);
   overscroll-behavior-block: none;
}

.side-bar .navbar a:hover i{
   margin-right: 2.5rem;
   overscroll-behavior-block: none;
}

.side-bar.active{
   left: -30rem;
   overscroll-behavior-block: none;
}

/* Container for the dropdown */
.side-bar .navbar details {
  position: relative;
  overscroll-behavior-block: none;
}

/* “Home” summary styling */


/* Hide the default disclosure triangle */
.side-bar .navbar details summary::-webkit-details-marker {
  display: none;
  overscroll-behavior-block: none;
}

/* Icon inside summary */
.side-bar .navbar details summary i {
  margin-right: 1.5rem;
  color: var(--main-color);
  transition: 0.2s linear;
  overscroll-behavior-block: none;
}

/* Text inside summary */
.side-bar .navbar details summary span {
  color: var(--light-color);
  overscroll-behavior-block: none;
}



/* Hover on summary */
.side-bar .navbar details summary:hover {
  background-color: var(--light-bg);
  overscroll-behavior-block: none;
}
/* .side-bar .navbar details summary:hover i {
  margin-right: 2.5rem;
} */

/* The submenu list */
.side-bar .navbar .dropdown-list {
  display: none;                 /* hidden by default */
  padding: 0;
  margin: 0;
  list-style: none;
  background: var(--light-bg);   /* or inherit another bg */
   transition: .2s ease;
   overscroll-behavior-block: none;
}

/* Show submenu when <details> is open */
.side-bar .navbar details[open] .dropdown-list {
  display: block;
  transition: .4s ease;
  overscroll-behavior-block: none;
}


/* Submenu links styling */
.side-bar .navbar .dropdown-list li a {
  display: block;
  padding: 2rem 2rem 2rem 4rem;  /* extra left indent */
  font-size: 2rem;
  color: var(--light-color);
  text-decoration: none;
  background-color: var(--white);
  overscroll-behavior-block: none;
}

.side-bar .navbar .dropdown-list li{
   display: flex;
   background-color: var(--white);
   overscroll-behavior-block: none;
}
/* Inner-menu icon slid */
.side-bar .navbar .dropdown-list a i {
  margin-left: 1.5rem;
  transition: .2s linear;
  overscroll-behavior-block: none;
}
.side-bar .navbar .dropdown-list a:hover i {

  margin-right: 2.5rem;
  overscroll-behavior-block: none;
}



.side-bar .navbar summary:hover .summary-left span{
   margin-left: 1rem;
   transition: .3s ease;
   overscroll-behavior-block: none;
}

/* Hover on submenu links */
.side-bar .navbar .dropdown-list li a:hover {
  background-color: var(--light-bg);
  overscroll-behavior-block: none;
}


/* smooth rotation */
.toggle-icon {
  transition: transform 0.2s ease;
}

/* when <details> is open, rotate right-angle 90° → points down */
details[open] .toggle-icon {
  transform: rotate(90deg);

}

/* Hide entire sidebar when .active */
.side-bar.active {
  left: -30rem;
  overscroll-behavior-block: none;
}

/* 1. Make the whole sidebar navbar scrollable */
.side-bar .navbar {
  /* fill the viewport height (or whatever container height you use) */
  max-height: 100vh;
  overflow-y: auto;
  color: var(--main-color);
  overscroll-behavior-block: none;
  margin-bottom: 5rem;
}


/* (Optional) Style the scrollbar for WebKit browsers */
.side-bar .navbar::-webkit-scrollbar,
.side-bar .navbar .dropdown-list::-webkit-scrollbar {
  width: 8px;
}

.side-bar .navbar::-webkit-scrollbar-thumb,
.side-bar .navbar .dropdown-list::-webkit-scrollbar-thumb {
  background: var(--main-color);
  border-radius: 4px;
}

.side-bar .navbar details summary {
  display: flex;
  align-items: center;
  justify-content: space-between; /* Left content and right icon */
  padding: 2rem;
  font-size: 2rem;
  cursor: pointer;
  list-style: none;
   overscroll-behavior-block: none;
}

.side-bar .navbar .summary-left {
  display: flex;
  align-items: center;
  /* gap: 1.5rem; */
   overscroll-behavior-block: none;
}

.side-bar .navbar details summary .toggle-icon {
  transition: transform 0.2s ease;
}

/* Rotate icon on open */
.side-bar .navbar details[open] summary .toggle-icon {
  transform: rotate(90deg);
}



.home-grid .box-container{
   display: grid;
   grid-template-columns: repeat(auto-fit, 27.5rem);
   gap:1.5rem;
   justify-content: center;
   align-items: flex-start;
}

.home-grid .box-container .box{
   background-color: var(--white);
   border-radius: .5rem;
   padding:2rem;
}

.home-grid .box-container .box .title{
   font-size: 2rem;
   color: var(--black);
   text-transform: capitalize;
}

.home-grid .box-container .box .flex{
   display: flex;
   flex-wrap: wrap;
   gap: 1.5rem;
   margin-top: 2rem;
}

.home-grid .box-container .flex a{
   background-color: var(--light-bg);
   border-radius: .5rem;
   padding: 1rem 1.5rem;
   font-size: 1.5rem;
}

.home-grid .box-container .flex a i{
   margin-right: 1rem;
   color:var(--black);
}

.home-grid .box-container .flex a span{
   color:var(--light-color);
}

.home-grid .box-container .flex a:hover{
   background-color: var(--black);
}

.home-grid .box-container .flex a:hover span{
   color:var(--white);
}

.home-grid .box-container .flex a:hover i{
   color:var(--white);
}

.home-grid .box-container .tutor{
   padding: 1rem 0;
   font-size: 1.8rem;
   color:var(--light-color);
   line-height: 2;
}

.home-grid .box-container .likes{
   color:var(--light-color);
   font-size: 1.7rem;
   margin-top: 1.5rem;
}

.home-grid .box-container .likes span{
   color:var(--main-color);
}

.about .row{
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   gap:1.5rem;
}

.about .row .image{
   flex: 1 1 40rem;
}

.about .row .image img{
   width: 100%;
   height: 50rem;
}

.about .row .content{
   flex: 1 1 40rem;
}

.about .row .content p{
   font-size: 1.7rem;
   line-height: 2;
   color: var(--light-color);
   padding: 1rem 0;
}

.about .row .content h3{
   font-size: 3rem;
   color:var(--black);
   text-transform: capitalize;
}

.about .box-container{
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(27rem, 1fr));
   gap:1.5rem;
   justify-content: center;
   align-items: flex-start;
   margin-top: 3rem;
}

.about .box-container .box{
   border-radius: .5rem;
   background-color: var(--white);
   padding: 2rem;
   display: flex;
   align-items: center;
   gap: 2.5rem;
}

.about .box-container .box i{
   font-size: 4rem;
   color: var(--main-color);
}

.about .box-container .box h3{
   font-size: 2.5rem;
   color: var(--black);
   margin-bottom: .3rem;
}

.about .box-container .box p{
   font-size: 1.7rem;
   color:var(--light-color);
}

.reviews .box-container{
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
   gap:1.5rem;
   justify-content: center;
   align-items: flex-start;
}

.reviews .box-container .box{
   border-radius: .5rem;
   background-color: var(--white);
   padding: 2rem;
}

.reviews .box-container .box p{
   line-height: 1.7;
   font-size: 1.7rem;
   color: var(--light-color);
}

.reviews .box-container .box .student{
   margin-top: 2rem;
   display: flex;
   align-items: center;
   gap: 1.5rem;
}

.reviews .box-container .box .student img{
   height: 5rem;
   width: 5rem;
   object-fit: cover;
   border-radius: 50%;
}

.reviews .box-container .box .student h3{
   font-size: 2rem;
   color: var(--black);
   margin-bottom: .3rem;
}

.reviews .box-container .box .student .stars{
   font-size: 1.5rem;
   color:var(--orange);
}

.courses .box-container{
   display: grid;
  grid-template-columns: repeat(auto-fit, 35rem);
   gap:1.5rem;
   justify-content: center;
   align-items: flex-start;
}

.courses .box-container .box{
   border-radius: .5rem;
   background-color: var(--white);
   padding: 2rem;
}

.courses .box-container .box .tutors{
   display: flex;
   align-items: center;
   gap: 1.5rem;
   margin-bottom: 2.5rem;
}

.courses .box-container .box .tutors img{
   height: 5rem;
   width: 5rem;
   border-radius: 50%;
   object-fit: cover;
}

.courses .box-container .box .tutors h3{
   font-size: 1.8rem;
   color: var(--black);
   margin-bottom: .2rem;
}

.courses .box-container .box .tutors span{
   font-size: 1.3rem;
   color:var(--light-color);
}

.courses .box-container .box .thumb{
   position: relative;
}

.courses .box-container .box .thumb span{
   position: absolute;
   top:1rem; left: 1rem;
   border-radius: .5rem;
   padding: .5rem 1.5rem;
   background-color: rgba(0,0,0,.3);
   color: #fff;
   font-size: 1.5rem;
}

.courses .box-container .box .thumb img{
   width: 100%;
   height: 20rem;
   object-fit: cover;
   border-radius: .5rem;
}

.courses .box-container .box .title{
   font-size: 2rem;
   color: var(--black);
   padding-bottom: .5rem;
   padding-top: 1rem;
}

.courses .more-btn{
   text-align: center;
   margin-top: 2rem;
}

.playlist-details .row{
   display: flex;
   align-items: flex-end;
   gap:3rem;
   flex-wrap: wrap;
   background-color: var(--white);
   padding: 2rem;
}

.playlist-details .row .column{
   flex: 1 1 40rem;
}

.playlist-details .row .column .save-playlist{
   margin-bottom: 1.5rem;
}

.playlist-details .row .column .save-playlist button{
   border-radius: .5rem;
   background-color: var(--light-bg);
   padding:1rem 1.5rem;
   cursor: pointer;
}

.playlist-details .row .column .save-playlist button i{
   font-size: 2rem;
   color:var(--black);
   margin-right: .8rem;
}

.playlist-details .row .column .save-playlist button span{
   font-size: 1.8rem;
   color:var(--light-color);
}

.playlist-details .row .column .save-playlist button:hover{
   background-color: var(--black);
}

.playlist-details .row .column .save-playlist button:hover i{
   color:var(--white);
}

.playlist-details .row .column .save-playlist button:hover span{
   color:var(--white);
}

.playlist-details .row .column .thumb{
   position: relative;
}

.playlist-details .row .column .thumb span{
   font-size: 1.8rem;
   color: #fff;
   background-color: rgba(0,0,0,.3);
   border-radius: .5rem;
   position: absolute;
   top: 1rem; left: 1rem;
   padding: .5rem 1.5rem;
}

.playlist-details .row .column .thumb img{
   height: 30rem;
   width: 100%;
   object-fit: cover;
   border-radius: .5rem;
}

.playlist-details .row .column .tutor{
   display: flex;
   align-items: center;
   gap: 2rem;
   margin-bottom: 2rem;
}

.playlist-details .row .column .tutor img{
   height: 7rem;
   width: 7rem;
   border-radius: 50%;
   object-fit: cover;
}

.playlist-details .row .column .tutor h3{
   font-size: 2rem;
   color:var(--black);
   margin-bottom: .2rem;
}

.playlist-details .row .column .tutor span{
   font-size: 1.5rem;
   color: var(--light-color);
}

.playlist-details .row .column .details h3{
   font-size: 2rem;
   color: var(--black);
   text-transform: capitalize;
}

.playlist-details .row .column .details p{
   padding: 1rem 0;
   line-height: 2;
   font-size: 1.8rem;
   color: var(--light-color);
}

.playlist-videos .box-container{
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
   gap:1.5rem;
   justify-content: center;
   align-items: flex-start;
}

.playlist-videos .box-container .box{
   background-color: var(--white);
   border-radius: .5rem;
   padding: 2rem;
   position: relative;
}

.playlist-videos .box-container .box i{
   position: absolute;
   top: 2rem; left: 2rem; right: 2rem;
   height: 20rem;
   border-radius: .5rem;
   background-color: rgba(0,0,0,.3);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 5rem;
   color: #fff;
   display: none;
}

.playlist-videos .box-container .box:hover i{
   display: flex;
}

.playlist-videos .box-container .box img{
   width: 100%;
   height: 20rem;
   object-fit: cover;
   border-radius: .5rem;
}

.playlist-videos .box-container .box h3{
   margin-top: 1.5rem;
   font-size: 1.8rem;
   color: var(--black);
}

.playlist-videos .box-container .box:hover h3{
   color: var(--main-color);
}

.watch-video .video-container{
   background-color: var(--white);
   border-radius: .5rem;
   padding: 2rem;
}

.watch-video .video-container .video{
   position: relative;
   margin-bottom: 1.5rem;
}

.watch-video .video-container .video video{
   border-radius: .5rem;
   width: 100%;
   object-fit: contain;
   background-color: #000;
}

.watch-video .video-container .title{
   font-size: 2rem;
   color: var(--black);
}

.watch-video .video-container .info{
   display: flex;
   margin-top: 1.5rem;
   margin-bottom: 2rem;
   border-bottom: var(--border);
   padding-bottom: 1.5rem;
   gap: 2.5rem;
   align-items: center;
}

.watch-video .video-container .info p{
   font-size: 1.6rem;
}

.watch-video .video-container .info p span{
   color: var(--light-color);
}

.watch-video .video-container .info i{
   margin-right: 1rem;
   color: var(--main-color);
}

.watch-video .video-container .tutor{
   display: flex;
   align-items: center;
   gap: 2rem;
   margin-bottom: 1rem;
}

.watch-video .video-container .tutor img{
   border-radius: 50%;
   height: 5rem;
   width: 5rem;
   object-fit: cover;
}

.watch-video .video-container .tutor h3{
   font-size: 2rem;
   color: var(--black);
   margin-bottom: .2rem;
}

.watch-video .video-container .tutor span{
   font-size: 1.5rem;
   color: var(--light-color);
}

.watch-video .video-container .flex{
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 1.5rem;
}

.watch-video .video-container .flex button{
   border-radius: .5rem;
   padding: 1rem 1.5rem;
   font-size: 1.8rem;
   cursor: pointer;
   background-color: var(--light-bg);
}

.watch-video .video-container .flex button i{
   margin-right: 1rem;
   color: var(--black);
}

.watch-video .video-container .flex button span{
   color: var(--light-color);
}

.watch-video .video-container .flex button:hover{
   background-color: var(--black);
}

.watch-video .video-container .flex button:hover i{
   color: var(--white);
}

.watch-video .video-container .flex button:hover span{
   color: var(--white);
}

.watch-video .video-container .description{
   line-height: 1.5;
   font-size: 1.7rem;
   color: var(--light-color);
   margin-top: 2rem;
}

.comments .add-comment{
   background-color: var(--white);
   border-radius: .5rem;
   padding: 2rem;
   margin-bottom: 3rem;
}

.comments .add-comment h3{
   font-size: 2rem;
   color: var(--black);
   margin-bottom: 1rem;
}

.comments .add-comment textarea{
   height: 20rem;
   resize: none;
   background-color: var(--light-bg);
   border-radius: .5rem;
   border: var(--border);
   padding: 1.4rem;
   font-size: 1.8rem;
   color: var(--black);
   width: 100%;
   margin: .5rem 0;
}

.comments .box-container{
   display: grid;
   gap: 2.5rem;
   background-color: var(--white);
   padding: 2rem;
   border-radius: .5rem;
}

.comments .box-container .box .user{
   display: flex;
   align-items: center;
   gap: 1.5rem;
   margin-bottom: 2rem;
}

.comments .box-container .box .user img{
   height: 5rem;
   width: 5rem;
   border-radius: 50%;
}

.comments .box-container .box .user h3{
   font-size: 2rem;
   color: var(--black);
   margin-bottom: .2rem;
}

.comments .box-container .box .user span{
   font-size: 1.5rem;
   color: var(--light-color);
}

.comments .box-container .box .comment-box{
   border-radius: .5rem;
   background-color: var(--light-bg);
   padding:1rem 1.5rem;
   white-space: pre-line;
   margin: .5rem 0;
   font-size: 1.8rem;
   color: var(--black);
   line-height: 1.5;
   position: relative;
   z-index: 0;
}

.comments .box-container .box .comment-box::before{
   content: '';
   position: absolute;
   top: -1rem; left: 1.5rem;
   background-color: var(--light-bg);
   height: 1.2rem;
   width: 2rem;
   clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

.teachers .search-tutor{
   margin-bottom: 2rem;
   border-radius: .5rem;
   background-color: var(--white);
   padding: 1.5rem 2rem;
   display: flex;
   align-items: center;
   gap: 1.5rem;
}

.teachers .search-tutor input{
   width: 100%;
   background: none;
   font-size: 1.8rem;
   color: var(--black);
}

.teachers .search-tutor button{
   font-size: 2rem;
   color: var(--black);
   cursor: pointer;
   background:none;
}

.teachers .search-tutor button:hover{
   color: var(--main-color);
}

.teachers .box-container{
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
   gap:1.5rem;
   justify-content: center;
   align-items: flex-start;
}

.teachers .box-container .box{
   background-color: var(--white);
   border-radius: .5rem;
   padding: 2rem;
}

.teachers .box-container .offer{
   text-align: center;
}

.teachers .box-container .offer h3{
   font-size: 2.5rem;
   color: var(--black);
   text-transform: capitalize;
   padding-bottom: .5rem;
}

.teachers .box-container .offer p{
   line-height: 1.7;
   padding: .5rem 0;
   color: var(--light-color);
   font-size: 1.7rem;
}

.teachers .box-container .box .tutor{
   display: flex;
   align-items: center;
   gap:2rem;
   margin-bottom: 1.5rem;
}

.teachers .box-container .box .tutor img{
   height: 5rem;
   width: 5rem;
   border-radius: 50%;
}

.teachers .box-container .box .tutor h3{
   font-size: 2rem;
   color: var(--black);
   margin-bottom: .2rem;
}

.teachers .box-container .box .tutor span{
   font-size: 1.6rem;
   color: var(--light-color);
}

.teachers .box-container .box p{
   padding: .5rem 0;
   font-size: 1.7rem;
   color: var(--light-color);
}

.teachers .box-container .box p span{
   color: var(--main-color);
}

.teacher-profile .details{
   text-align: center;
   background-color: var(--white);
   border-radius: .5rem;
   padding: 2rem;
}

.teacher-profile .details .tutor img{
   height: 10rem;
   width: 10rem;
   border-radius: 50%;
   object-fit: cover;
   margin-bottom: 1rem;
}

.teacher-profile .details .tutor h3{
   font-size: 2rem;
   color: var(--black);
}

.teacher-profile .details .tutor span{
   color: var(--light-color);
   font-size: 1.7rem;
}

.teacher-profile .details .flex{
   display: flex;
   flex-wrap: wrap;
   gap: 1.5rem;
   margin-top: 2rem;
}

.teacher-profile .details .flex p{
   flex: 1 1 20rem;
   border-radius: .5rem;
   background-color: var(--light-bg);
   padding: 1.2rem 2rem;
   font-size: 1.8rem;
   color: var(--light-color);
}

.teacher-profile .details .flex p span{
   color: var(--main-color);
}

.user-profile .info{
   background-color: var(--white);
   border-radius: .5rem;
   padding: 2rem;
}

.user-profile .info .user{
   text-align: center;
   margin-bottom: 2rem;
   padding: 1rem;
}

.user-profile .info .user img{
   height: 10rem;
   width: 10rem;
   border-radius: 50%;
   object-fit: cover;
   margin-bottom: 1rem;
}

.user-profile .info .user h3{
   font-size: 2rem;
   color: var(--black);
}

.user-profile .info .user p{
   font-size: 1.7rem;
   color: var(--light-color);
   padding: .3rem 0;
}

.user-profile .info .user span{
   font-size: 1.7rem;
   color: var(--light-color);
   display: flex;
   justify-content: center;
}

.user-profile .info .user .verify img{
   height: 2.1rem;
   width: 2.1rem;
   margin-left: .5rem;
   margin-bottom: 0;
}

.user-profile .info .user .verify p{
   font-size: 1.5rem;
   color: #e16c5f;
  
}

.user-profile .info .user .verify p a{

   color: #3896e7;
   text-decoration: none;
}

.user-profile .info .box-container{
   /* display: flex;
   flex-wrap: wrap;
   gap: 1.5rem; */
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
   gap: 1.5rem;
}

.user-profile .info .box-container .box{
   background-color: var(--light-bg);
   border-radius: .5rem;
   padding: 2rem;
   flex: 1 1 25rem;
}

.user-profile .info .box-container .box .flex{
   display: flex;
   align-items: center;
   gap: 2rem;
   margin-bottom: 1rem;
}

.user-profile .info .box-container .box .flex i{
   font-size:2rem;
   color: var(--white);
   background-color: var(--black);
   text-align: center;
   border-radius: .5rem;
   height: 5rem;
   width: 5rem;
   line-height: 4.9rem;
}

.user-profile .info .box-container .box .flex span{
   font-size: 2.5rem;
   color: var(--main-color);
}

.user-profile .info .box-container .box  p{
   color: var(--light-color);
   font-size: 1.7rem;
}

.user-profile .info .box-container .box h3{
   color: var(--black);
   font-size: 1.8rem;
}

.contact .row{
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   gap: 1.5rem;
}

.contact .row .image{
   flex: 1 1 50rem;
}

.contact .row .image img{
   width: 100%;
}

.contact .row form{
   flex: 1 1 30rem;
   background-color: var(--white);
   padding: 2rem;
   text-align: center;
}

.contact .row form h3{
   margin-bottom: 1rem;
   text-transform: capitalize;
   color:var(--black);
   font-size: 2.5rem;
}

.contact .row form .box{
   width: 100%;
   border-radius: .5rem;
   background-color: var(--light-bg);
   margin: 1rem 0;
   padding: 1.4rem;
   font-size: 1.8rem;
   color: var(--black);
}

.contact .row form textarea{
   height: 20rem;
   resize: none;
}

.contact .box-container{
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
   gap:1.5rem;
   justify-content: center;
   align-items: flex-start;
   margin-top: 3rem;
}

.contact .box-container .box{
   text-align: center;
   background-color: var(--white);
   border-radius: .5rem;
   padding: 3rem;
}

.contact .box-container .box i{
   font-size: 3rem;
   color: var(--main-color);
   margin-bottom: 1rem;
}

.contact .box-container .box h3{
   font-size: 2rem;
   color:var(--black);
   margin: 1rem 0;
}

.contact .box-container .box a{
   display: block;
   padding-top: .5rem;
   font-size: 1.8rem;
   color: var(--light-color);
}

.contact .box-container .box a:hover{
   text-decoration: underline;
   color:var(--black);
}

.form-container{
   min-height: calc(100vh - 20rem);
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 3rem;
}

.form-container form{
   background-color: var(--white);
   border-radius: .5rem;
   padding: 3rem;
   width: 50rem;
}

.form-container form .flex .user_name span{
   color: var(--optional-message);
   font-size: 1.2rem;
}

.form-container form.login .big-dot h3{
   font-size: 3rem;
   text-align: left;
   color: var(--black);
   margin-bottom: 1rem;
   text-transform: capitalize;
} 

.form-container form p{
   font-size: 1.7rem;
   color: var(--light-color);
   padding-top: 1rem;
}


.form-container form .image{
   margin-bottom: -1.5rem;
   margin-top: -1.5rem;
}

.form-container form p span{
   color: var(--red);
}
.form-container .login .forget-password a{
   align-items: right;
   color: red;
}

.form-container .login .link {
   text-align: center;
   font-size: 1.5rem;
}

.form-container form .box{
   font-size: 1.8rem;
   color: var(--black);
   border-radius: .5rem;
   padding: 1.4rem;
   background-color: var(--light-bg);
   width: 100%;
   margin: 1rem 0;
}

.form-container form .question-container .secret{
   display: flex;
  gap: 1.5rem;
   margin-bottom: 1.5rem;
}

.form-container form .question-container .secret .col{
   flex: 1 1 35rem;;
}

.form-container form .question-container .secret .box{
   width: 100%;
    border-radius: .5rem;
    margin: 1rem 0;
    padding: 1.4rem;
    font-size: 1.8rem;
    color: var(--black);
    background-color: var(--light-bg);
}
/* .form-container form .question-container p{
   margin-top: 1rem;;
} */

.form-container form .question-container {
   /* margin-top: 1.5rem;
   margin-bottom: 1.5rem; */
   padding: 0;
   /* border-bottom: var(--border);
 border-top: var(--border); */
}

.quick-select .home-container .box-container{
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(28rem, 1fr));
   gap:1.5rem;
   justify-content: center;
   align-items: flex-start;
}

.quick-select .home-container .box-container .box{
   background-color: var(--white);
   border-radius: .5rem;
   padding: 2rem;
}

.quick-select .home-container .box-container .box p{
   padding-top: 1rem;
   font-size: 1.8rem;
   color: var(--light-color);
   line-height: 1.5;
}

.quick-select .home-container .box-container .box p span{
   color: var(--main-color);
}

.quick-select .home-container .box-container .box .title{
   text-transform: capitalize;
   font-size: 2.2rem;
   color: var(--black);
 padding-bottom: .5rem;
}

.quick-select .home-container .box-container .box .flex{
   display: flex;
   flex-wrap: wrap;
   gap: 1.5rem;
   margin-top: 1.5rem;
}

.quick-select .home-container .box-container .box .flex a{
   border-radius: .5rem;
   background-color: var(--light-bg);
   padding: 1rem 1.5rem;
   font-size: 1.6rem;
   color: var(--light-color);
   cursor: pointer;;
}

.quick-select .home-container .box-container .box .flex a i{
   margin-right: 1rem;
   color:var(--black);
}

.quick-select .home-container .box-container .box .flex a:hover{
   background-color: var(--black);
}

.quick-select .home-container .box-container .box .flex a:hover i{
   color:var(--white);
}

.quick-select .home-container .box-container .box .flex a:hover span{
   color:var(--white);
}

.quick-select .home-container .box-container .box.tutor{
   text-align: center;;
}

.quick-select .home-container .box-container .box.tutor a{
   margin-top: 1.7rem;
}
.quick-select .home-container .box-container .box.tutor .social-icons{
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 1.5rem;
   margin-top: 1rem;
}

.quick-select .home-container .box-container .box.tutor .social_icons p{
   display: flex;
   align-items: center;
   justify-content: center;
   gap: .5rem;
}
.quick-select .home-container .box-container .box.tutor .social_icons p span{
   color: var(--light-color);
   font-size: 2rem;
}

.quick-select .home-container .box-container .box.tutor .social_icons a{
   height: 4rem;
   width: 4rem;
   font-size: 2.5rem;
   border: 1px solid var(--light-bg);
   color: var(--light-color);
   border-radius: .5rem;
   align-items: center;
   justify-content: center;
   padding: .2rem;
   margin: 0 ;
}

.quick-select .home-container .box-container .box.tutor .social_icons a i:hover{
   scale: 1.2;
   transition: .2s linear;
   color: var(--black);
}

.course .box-container{
   display: grid;
   grid-template-columns: repeat(auto-fit, 35rem);
   gap:1.5rem;
   justify-content: center;
   align-items: flex-start;
}

.course .box-container .box{
   overflow-x: hidden;
   border-radius: .5rem;
   background-color: var(--white);
   padding: 2rem;
}

.course .box-container .box .thumb{
   height: 20rem;
   position: relative;

}

.course .box-container .box .thumb img{
   width: 100%;
   height: 100%;
   object-fit: cover;
   border-radius: .5rem;

}

.about .row{
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   gap:1.5rem;
}

.about .row .image{
   flex: 1 1 40rem;
}

.about .row .image img{
   height: 50rem;
   width: 100%;
}

.about .row .content{
   flex: 1 1 40rem;
   text-align: center;
}

.about .row .content h3{
   font-size: 2.5rem;
   color:var(--black);
   margin-bottom: .5rem;
}

.about .row .content p{
   font-size: 1.5rem;
   line-height: 2;
   color: var(--light-color);
   padding: 1rem 0;
}

.about .box-container{
   display: flex;
   flex-wrap: wrap;
   gap:1.5rem;
   margin-top: 3rem;
}

.about .box-container .box{
   border-radius: .5rem;
   background-color: var(--white);
   padding: 2rem 3rem;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 2.5rem;
   flex: 1 1 25rem;
}

.about .box-container .box i{
   font-size: 3rem;
   color: var(--black)
}

.about .box-container .box h3{
   color: var(--main-color);
   font-size: 2rem;
   margin-bottom: .2rem;
}

.about .box-container .box span{
   font-size: 1.7rem;
   color: var(--light-color);
}

.reviews .box-container{
   display: flex;
   flex-wrap: wrap;
   gap: 1.5rem;
   justify-content: center;
   align-items: flex-start;
}

.reviews .box-container .box{
   padding: 2rem;
   border-radius: .5rem;
   background-color: var(--white);
   flex:1 1 30rem;
}

.reviews .box-container .box .user{
   display: flex;
   align-items: center;
   gap: 2rem;
   margin-bottom: 2rem;
}

.reviews .box-container .box .user img{
   height: 5rem;
   width: 5rem;
   border-radius: 50%;
   object-fit: cover;
}

.reviews .box-container .box .user h3{
   font-size: 2rem;
   color: var(--black);
   margin-bottom: .2
}

.reviews .box-container .box .user .stars i{
   font-size: 1.5rem;
   color: var(--orange);
}

.reviews .box-container .box p{
   line-height:1.5 ;
   font-size: 1.7rem; 
   padding-top: 1rem;
   color: var(--light-color);
}

.playlist-details .row{
  background-color: var(--white);
  border-radius: .5rem;
  padding: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 3rem;
  overflow-x: hidden;
}

.playlist-details .row .col{
   flex: 1 1 40rem;
}

.playlist-details .row .col .thumb{
   height: 30rem;
   position: relative;
   margin-top: 2rem;
}

.playlist-details .row .col .thumb img{
   width: 100%;
   height: 100%;
   object-fit: cover;
   border-radius: .5rem;
}

.playlist-details .row .col .thumb span{
   position: absolute;
   top: 1rem; left: 1rem;
   padding: .5rem 1.5rem;
   background-color: rgba(0,0,0,.3);
   border-radius: .5rem;
   font-size: 1.5rem;
}

.playlist-details .row .mcol button{
   margin-top: 0;
}

.playlist-details .row .mcol button i{
   margin-right: 1.5rem;
}

.playlist-details .row .col .tutor{
   display: flex;
   align-items: center;
   gap: 2rem;
   margin-bottom: 2rem;
}

.playlist-details .row .col .tutor img{
   height: 7rem;
   width: 7rem;
   border-radius: 50%;
   object-fit: cover;
}

.playlist-details .row .col .tutor h3{
   font-size: 2rem;
   color: var(--black);
   margin-bottom: .2rem;
}

.playlist-details .row .col .tutor span{
   font-size: 1.5rem;
   color: var(--light-color);
}

.playlist-details .row .col .title{
   text-overflow: ellipsis;
   overflow-x: hidden;
   color: var(--black);
   font-size: 2rem;
   padding: .5rem 0;
}

.playlist-details .row .col .description{
   padding: 1rem 0;
   line-height: 2;
   font-size: 1.8rem;
   color: var(--light-color);
}

.playlist-details .row .col .date{
   font-size: 1.5rem;
   margin-top: .5rem;
   background-color: var(--light-bg);
   border-radius: .5rem;
   padding: .5rem 1.5rem;
  display: inline-block;margin-bottom: 1.5rem;
}

.playlist-details .row .col .date i{
   margin: 1rem;
   color: var(--main-color);
}

.playlist-details .row .col .date span{
   color: var(--light-color);

}

.playlist-video .box-container{
   display: grid;
   grid-template-columns: repeat(auto-fit, 35rem);
   gap:1.5rem;
   justify-content: center;
   align-items: flex-start;
}

.playlist-video .box-container .box{
   position: relative;
   border-radius: .5rem;
   padding: 2rem;
   background-color: var(--white);
}

.playlist-video .box-container .box img{
   width: 100%;
   height: 20rem;
   object-fit: cover;
   border-radius:.5rem;
   margin-bottom: 1.5rem;
}

.playlist-video .box-container .box i{
   position: absolute;
   top: 2rem; left: 2rem; right: 2rem;
   height: 20rem;
   background-color: rgba(0,0,0,.3);
   display: none;
   align-items:center;
   justify-content: center;
   font-size: 5rem;
   color: #fff;
   border-radius: .5rem;
}

.playlist-video .box-container .box:hover i{
   display: flex;
}

.playlist-video .box-container .box h3{
   font-size: 2rem;
   color: var(--black);
   text-overflow: ellipsis;
   overflow-x: hidden;
}

.playlist-video .box-container .box:hover h3{
   color: var(--orange);
}

.watch-video .content{
   background-color: var(--white);
   border-radius: .5rem;
   padding: 2rem;
}

.watch-video .content .video{
   height: 40rem;
   width: 100%;
   object-fit: contain;
   border-radius: .5rem;
   background: #000;
}

.watch-video .content .title{
   margin: 1.7rem 0;
   font-size: 2.5rem;
   color: var(--black);
   text-overflow: ellipsis;
   overflow-x: hidden;
}

.watch-video .content .info{
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 1rem;
   flex-wrap: wrap;
   padding: .5rem 0;
}

.watch-video .content .info p{
  padding: .5rem 1.5rem;
  font-size: 1.7rem;
  background-color: var(--light-bg);
  border-radius: .5rem;
}

.watch-video .content .info p i{
   margin-right: 1rem;
   color: var(--light-color);
}

.watch-video .content .info p span{
   color: var(--light-color);
}

.watch-video .content .tutor{
   display: flex;
   align-items: center;
   gap: 1.5rem;
   margin-top: 2rem;
   margin-bottom: 1.5rem;
}

.watch-video .content .tutor h3{
   font-size: 1.8rem;
   color: var(--black);
   margin-bottom: .1rem;
}

.watch-video .content .tutor span{
   font-size: 1.5rem;
   color: var(--light-color);
}

.watch-video .content .tutor img{
   height: 5rem;
   width: 5rem;
   border-radius: 50%;
   object-fit: cover;
}

.watch-video .content .flex {
   display: flex;
   gap: 1.5rem;
   justify-content: space-between;
}

.watch-video .content .flex  i{
  margin-right: 1rem;;
}

.watch-video .content .description{
   line-height: 1.5;
   padding-top: 2rem;
   font-size: 1.7rem;
   color: var(--light-color);
   word-spacing: pre-line;
}

.teachers .box-container{
   display: grid;
   grid-template-columns: repeat(auto-fit, 35rem);
   gap:1.5rem;
   justify-content: center;
   align-items: flex-start;
}

.teachers .box-container .box{
   background-color: var(--white);
   border-radius: .5rem;
   padding: 2rem;
   overflow-x: hidden;
}

.teachers .box-container .box .tutor{
   display: flex;
   align-items: center;
   gap: 2rem;
  margin-bottom: 1.5rem;
}

.teachers .box-container .box .tutor img{
   height: 7rem;
   width: 7rem;
   border-radius: 50%;
}

.teachers .box-container .box .tutor h3{
   font-size: 2rem;
   color: var(--black);
   margin-bottom: .2rem;
   text-overflow: ellipsis;
   overflow-x: hidden;
}

.teachers .box-container .box .tutor span{
   color: var(--light-color);
   font-size: 1.5rem;
}

.teachers .box-container .box p{
   padding: .5rem 0;
   font-size: 1.7rem;
   color: var(--light-color);

}

.teachers .box-container .box p span{
   color: var(--main-color);
}

.teachers .box-container .box.offer.flex h3{
  font-size:2.5rem ;
  color: var(--black);
}

.teachers .box-container .box.offer.p{
   line-height: 2;
   font-size: 1.8rem;
   padding: 1rem;
}

.teachers .tutor-search{
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 1.5rem;
   padding: 1.5rem 2rem;
   background-color: var(--white);
   border-radius: 3rem;
   margin-bottom: 2.5rem;
}

.teachers .tutor-search input{
   width: 100%;
   font-size: 1.8rem;
   color: var(--black);
   background-color: var(--white);
}

.teachers .tutor-search button{
   font-size: 2.5rem;
   cursor: pointer;
   color: var(--black);
   background: none;
}


.teachers .tutor-search button:hover{
   color: var(--main-color);
}

.teachers .box-container{
   display: grid;
}

.tutor-profile .details{
   background-color: var(--white);
   border-radius: .5rem;
   padding: 2rem;
   text-align: center;
}

.tutor-profile .details .tutor{
   margin-bottom: 2.5rem;
   overflow-x: hidden;
}

.tutor-profile .details .tutor img{
   height: 10rem;
   width: 10rem;
   border-radius: 50%;
   object-fit: cover;
}

.tutor-profile .details .tutor .name{
padding: 1rem 0;
font-size: 2rem;
   color: var(--black);
   overflow-x: hidden;
   text-overflow: ellipsis;
}

.tutor-profile .details .tutor .profession{
   font-size: 1.5rem;
   color: var(--light-color);
}

.tutor-profile .details .tutor .email{
   font-size: 1.7rem;
   color: var(--main-color);
   padding: .5rem 0;
   padding-top: .5rem;
   overflow-x: hidden;
   text-overflow: ellipsis;
}

.tutor-profile .details .box-container{
   display: flex;
   flex-wrap: wrap;
   gap: 1.2rem;
}

.tutor-profile .details .box-container p{
   border-radius: .5rem;
   background-color: var(--light-bg);
   font-size: 1.7rem;
   color: var(--light-color);
   flex: 1 1 25rem;
   padding: 1rem;
}

.tutor-profile .details .box-container p span{
   color: var(--main-color);
}

.form-container{
   min-height: clac(100vh - 17rem);
   display: flex;
   align-items: center;
   justify-content: center;
   padding-bottom: 5rem;
} 


.form-container form{
   width: 80rem;
   background-color: var(--white);
   border-radius: 1rem;
   padding: 3rem;
   padding-top: 3rem;
} 



.form-container form .flex{
   display: flex;
   gap: 1.5rem;
   flex-wrap: wrap;;
}


.form-container form .flex .col{
   flex:1 1 35rem;
}

/* .form-container form .col .box p{
   font-size: 1.7rem;
   color: var(--light-color);
} */
.form-container form p{
   padding-top: 1rem;
   font-size: 1.7rem;
   color: var(--light-color);
}


.login-links{
   display: flex;
   align-items: center;
   margin-top: 1.5rem;
}

.login-links .text{
   font-size: 1.4rem;
   color: var(--light-color);
   padding: 0 1rem;
}

.line{
       height: 1px;
    flex-grow: 1;
    background-color: var(--light-bg);
}

.line1{
       height: 1px;
    flex-grow: 1;
    background-color: var(--light-bg);
    margin-top: 2rem;
}
.social-icons .icons {
  display: flex;
  justify-content: center;
  gap: 2rem;
  color: var(--light-color);
 margin-top: 2rem;
}

.social-icons .icons a{
   font-size: 3rem;
   color: var(--light-color);
}
.social-icons .icons a:hover{
   color: var(--black);
   transform: scale(1.2);
   transition: color .5s ease;
}


.form-container form p span{
   color: var(--red);
}

.form-container form .box{
   width: 100%;
   border-radius: .5rem;
   margin: 1rem 0;
   padding: 1.4rem;
   font-size: 1.8rem;
   color: var(--black);
   background-color: var(--light-bg);
}

.phone {
  display: flex;
  gap: 9px; /* space between dropdown and input */
}

.phone select {
  flex: 0 0 29%;   /* fixed 30% width */
}

.phone input[type="tel"] {
  flex: 0 0 70%;   /* fixed 70% width */
}

/* make sure both look same height */
.phone .box {
  box-sizing: border-box;
}


.form-container form .link{
   padding-top: 2rem;
   text-align: center;
   font-size: 2rem;

}

.form-container form .link a{
   /* color: var(--main-color); */
   color: #C05700;;
}
.form-container form .link a:hover{
       text-decoration: underline;
}


.social-icons .link{
   padding-top: 2rem;
   text-align: center;
   font-size: 1.2rem;
   color: var(--light-color);
}


.social-icons .link a{
   color: var(--main-color);
   font-size: 1.2rem;
}
.link a:hover{
       text-decoration: underline;
}

.form-container form.login{
   width: 50rem;
   padding: 3rem;
   border-radius: 1rem;
}


.profile .details{
   background-color: var(--white);
   border-radius:.5rem ;
   padding: 2rem;
}

.profile .details .user{
   margin-bottom: 3rem;
   text-align: center;

}

.profile .details .user img{
   height: 10rem;
   width: 10rem;
   border-radius: 50%;
   object-fit: cover;
   margin-bottom: 1rem;
}

.profile .details .user h3{
   margin:  .5rem 0;
   font-size: 2rem;
   color: var(--black);
}

.profile .details .user span{
   font-size: 1.7rem;
   color: var(--light-color);
   display: block;
}

.comment-form{
   max-width: 1100px;;
}

.comment-form form{
   border-radius: .5rem;;
   background-color: var(--white);
   padding: 2rem;
}

.comment-form  form .box{
   width: 100%;
   border-radius: 1rem;
   padding: 1.4rem;
   font-size: 1.8rem;
   color: var(--black);
   background-color: var(--light-bg);
   height: 20rem;
   resize: none;
   margin-bottom: .5rem;
}



.comments .box-container{
   display: grid;
   gap:2.5rem;
   background-color: var(--white);
   padding:2rem;
}

.comments .box-container .box .user{
   display: flex;
   align-items: center;
   gap: 1.5rem;
  
}
.comments .box-container .box .user{
   margin-bottom: .5rem;
   padding-bottom: 1rem;
}

.comments .box-container .box .user img{
   height: 5rem;
   width: 5rem;
   border-radius: 50%;
   object-fit: cover;
}

.comments .box-container .box .user h3{
   font-size: 1.8rem;
   color: var(--black);
   margin-bottom: .2rem;
}

.comments .box-container .box .user span{
   font-size: 1.5rem;
   color: var(--light-color);
}

.comments .box-container .box .comment-box{
  background-color: var(--light-bg);
  border-radius: .5rem;
  position: relative;
  font-size: 1.7rem;
  color: var(--black);
  padding: .5rem;
  margin-top: 3rem;
  white-space: pre-line;
}

.comments .box-container .box .comment-box::before{
   content: '';
   position: absolute;
   top: -1.1rem; left: 1.1rem;
   height: 2rem;
   width: 2rem;
   border-radius: .1rem;
   transform: rotate(45deg);
   background-color: var(--light-bg);
}

.comments .box-container .box .comment-content{
   background-color: var(--light-bg);
   padding: 1rem 2rem;
   border-radius: .5rem;
   margin-bottom: 2.7rem;
   display: flex;
   gap: 1rem;
   align-items: center;
   justify-content: space-between;
   font-size: 1.7rem;
   flex-wrap: wrap;
}
.comments .box-container .box .comment-content p{
   color: var(--black);
   margin: 0;
   flex: 1 1 60%;
}
.comments .box-container .box .comment-content .inline-btn{
   display: flex;
   align-items: center;
   margin-bottom: 10px;
}

.comments .box-container .box .comment-content a{
   color: var(--white);
}

.comments .box-container .box .comment-content a:hover{
   color: var(--white);
}


/* admin section css */

.dashboard .box-container{
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(30rem, 1fr));
   gap: 1.5rem;
   justify-content: center;
   align-items: flex-start;
}


.dashboard .box-container .box{
   border-radius: .5rem;
   background-color: var(--white);
   padding: 1.5rem;
   text-align: center;
}

.dashboard .box-container .box h3{
   font-size: 2.5rem;
   color: var(--black);
   margin-bottom: .5rem;
}

.dashboard .box-container .box p{
  margin: .5rem 0;
  border-radius: .5rem;
  padding: 1rem;
  background-color: var(--light-bg);
  font-size: 2rem;
  color: var(--light-color);
}


.playlists .box-container{
   display: grid;
   grid-template-columns: repeat(auto-fit,30rem);
   gap: 1.5rem;
   justify-content: center;
   align-items: flex-start;
}
.playlists .box-container .box{
   background-color:var(--white) ;
   border-radius: .5rem;
   padding: 2rem;
}


.playlists .box-container .box .thumb{
   position: relative;
   /* height:20rem; */
   margin: 1.5rem 0; 
}

.playlists .box-container .thumb span{
   position: absolute;
   top: 1rem; left: 1rem;
   background-color: rgba(0,0,0,.3);
   color: #fff;
   font-size: 2rem;
   padding: .5rem 1.5rem;
   border-radius: .5rem;
}
.playlists .box-container .thumb img {
   height: 100%;       /* Or whatever fixed height you want */
   width: 100%;         /* Makes it full width of its container */
   object-fit: contain; /* Shows the whole image, may leave empty space */
   border-radius: .5rem;
   background-color: #f0f0f0; /* Optional: gives a neutral background if image doesn't fill box */
}

.playlists .box-container .flex{
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 1.5rem;;
   margin-bottom: 1.5rem;
}

.playlists .box-container .flex i{
   font-family: 1.7rem;
   color: var(--main-color);
   margin-right: 1rem;
}

.playlists .box-container .flex span{
   font-size: 1.6rem;
   color: var(--light-color);

} 

.playlists .box-container .title{
   font-size: 2rem;
   color: var(--black);
}

.playlists .box-container .description{
   padding: 1rem 0;
   font-size: 1.3rem;
   color: var(--light-color);
   line-height: 1.2;
}

.playlists .box-container .description::after{
   content: '...';
}

.playlist-details .row{
   background-color: var(--white);
   border-radius: 1rem;
   padding: 2rem;
   display: flex;
   align-items: flex-end;
   gap: 2.5rem;
   flex-wrap: wrap;
}

.playlist-details .row .thumb{
   flex: 1 1 40rem;
}

.playlist-details .row .details{
   flex: 1 1 40rem;

}

.playlist-details .row .thumb img{
   height: 30rem;
   width: 100%;
   object-fit: cover;
   border-radius: .5rem;
   
}

.playlist-details .row .thumb .flex{
   display: flex;
   align-items: center;
   gap: 1.5rem;
   margin-top: 1rem;
   justify-content: space-between;
   padding: 1.5rem 2rem;
   background-color: var(--light-bg);
   border-radius: .5rem;
}

.playlist-details .row .thumb .flex p{
   font-size: 1.7rem;
}

.playlist-details .row .thumb .flex p span{
   color: var(--light-color);
}

.playlist-details .row .thumb .flex i{
   color: var(--main-color);
   margin-right: 1rem;
}

.playlist-details .row .details .title{
   font-size: 2rem;
   color: var(--black);
}

.playlist-details .row .details .description{
   font-size: 1.7rem;
   color: var(--light-color);
   line-height: 1.5;
   padding-top:1rem;
   padding-bottom: .5rem;
}

.contents{
   align-items: center;
   justify-content: center;
   padding: 2rem;
   margin-top: 3rem;
   margin-bottom: auto;
}


.contents .box-container{
   display: grid;
   grid-template-columns: repeat(auto-fit, 35rem);
   gap: 1.5rem;
   justify-content: center;
   align-items: flex-start;
}

.contents .box-container .box{
   background-color: var(--white);
   border-radius: .5rem;
   padding: 2rem;
   overflow-x: hidden;
}

.contents .box-container .box img{
   height: 20rem;
   width: 100%;
   object-fit: cover;
   border-radius: .5rem;
   margin: 1.5rem 0 .5rem 0;

}

.contents .box-container .box .flex{
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 1.5rem;
   margin-bottom: .5rem;

}
.contents .box-container .box h2{
   font-size: 1.5rem;
   color: grey;
   margin-bottom: 1rem;
   font-weight: 300;
}

.contents .box-container .box .likes{
   display: flex;
   justify-content: space-between;
   align-items: center;
}

.contents .box-container .box .likes span{
   font-size: 1.6rem;
   color: var(--light-color);
   margin-bottom: 1rem;
}

.contents .box-container .box .likes span i{
   margin-right: 1rem;
   color: var(--red);
}

.contents .box-container .box .title{
   font-size: 2rem;
   color: var(--black);;
}

.contents .box-container .box .flex p{
   font-size: 1.6rem;
   display: flex;

}
   
.contents .box-container .box .flex p span{
   color: var(--light-color);

}
.contents .box-container .box .flex p i{
   margin-right: 1rem;
   color: var(--black);
   padding: .5rem 0;
   text-overflow: ellipsis;
   overflow-x: hidden;
}



.crud-form form{
   max-width: 50rem;
   margin: auto;
   background-color: var(--white);
   border-radius: .5rem;
   padding: 2rem;
   padding-top: 1rem;
   padding-top: 1rem;
}

.crud-form form img{
   height: 100%;
   width: 100%;
}

.crud-form form select.box{
   width: 100%;
   font-size: 1.8rem;
   color: var(--black);
}

.crud-form form p{
   padding-top: 1rem;
   font-size: 1.7rem;
   color: var(--light-color);
}

.crud-form form p span{
   color: var(--red);
}

.crud-form form .box{
 width: 100%;
 background-color: var(--light-bg);
 border-radius: .5rem;
 padding: 1.4rem;
 color: var(--black);
 margin: 1rem 0;
 font-size: 1.8rem;
}

.crud-form .media{
   height: 20rem;
   border-radius: .5rem;
   margin: 1rem ;
   width: 100%;
   object-fit: contain;
   background-color: #000;
}

.crud-form form textarea{
   height: 20rem;
   resize: none;;
}



.view-content .content{
   background: var(--white);
   border-radius: .5rem;
   padding: 2rem;
}

.view-content .content video{
   width: 100%;
   background-color: #000;
   height: 40rem;
   border-radius: .5rem;
   object-fit: contain;
   border-radius: .5rem;
}

.view-content .content .date{
   margin: 1.5rem 0;
   font-size: 1.7rem;
}

.view-content .content i{
   color: var(--main-color);
   margin-right: .7rem;
}

.view-content .content .date span{
   color: var(--light-color);

}

.view-content .content .title{
   font-size: 2rem;
   color: var(--black);
   padding-bottom: 1rem;
   word-spacing: ellipse;
   overflow: hidden;;
}

.view-content .content .flex{
   margin: 1rem 0;
   display: flex;
   align-items: center;
   justify-content: space-between;;
   gap: 1.5rem;
   flex-wrap: wrap;
}

.view-content .content .flex div{
   background-color: var(--light-bg);
   border-radius: .5rem;
   padding: .5rem 1.5rem;
   font-size: 1.8rem;
}

.view-content .content .flex div i{
   margin-right: .7rem;
   color: var(--black);

}

.view-content .content .flex div span{
   color: var(--light-color);
}

.view-content .content .description{
   padding: .5rem 0;
   line-height: 2;
   font-size: 1.7rem;
   color: var(--light-color);
   color: var(--light-color);
}

.form-contianer{
   min-height: clac(100vh - 17rem);
   display: flex;
   align-items: center;
   justify-content: center;

} 


.form-contianer form{
   background-color: var(--white);
   border-radius: 1rem;
   padding: 3rem;
   width: 50rem;
}

.form-contianer form h3{
   font-size: 3rem;
   text-transform: capitalize;
   color: var(--black);
   text-align: left;
   padding-left: 1rem;
   padding-bottom: 1.2rem;
}

.form-contianer form p{
   font-size: 1.7rem;
   color: var(--light-color);
   padding-top: 1rem;
}

.form-contianer form p span{
   color: var(--red);
}
.form-contianer form .box{
   width: 100%;
   border-radius: .5rem;
   margin: 1rem 0;
   padding: 1.4rem;
   font-size: 1.8rem;
   color: var(--black);
   background-color: var(--light-bg);
}

.form-contianer form .forgot-password a{
   color: var(--light-color);
}

.form-contianer form .forgot-password a:hover{
   /* cursor: pointer; */
   color: var(--black);
   cursor:pointer;
}

.form-contianer form .forgot-password{
   font-size: 1.5rem;
   text-align: right;
   margin-top: -10px;
   margin-bottom: 1.5rem;
}

.form-container form .forgot-password a{
   color: var(--light-color);
}

.form-container form .forgot-password a:hover{
   /* cursor: pointer; */
   color: var(--black);
   cursor:pointer;
}

.form-container form .forgot-password{
   font-size: 1.5rem;
   text-align: right;
   margin-top: -10px;
   margin-bottom: 1.25rem;
}

.form-contianer form .link{
   padding-top: 2rem;
   text-align: center;
   font-size: 1.5rem;
}

.form-contianer form .link a{
   color: var(--main-color);
}
.form-contianer form .link a:hover{
   color:#008cff;;
       text-decoration: underline;
}

.form-contianer form.login{
   width: 50rem;
}

.form-container #captcha{
   display: flex;
}


#captchaQuestion{
   margin-top: 10px;
   color: var(--light-color)
}

#refreshCaptcha{
   margin-left: 1rem;
   background-color: var(--white);
   color: var(--black);
}

#captchaInput{
   width: 30%;
   font-size: 1.4rem;
   padding: .5rem;
   margin-left: 1rem;
   border-radius: .5rem;;
}

#captchaB{
   text-align: right;
   margin-top: -1rem;
}

.big-dot{
   display: flex;

}
.big-dot i{
   padding-right: 1.5rem;
   margin-top: 17px;
   color: var(--main-color);
   font-size: 1.6rem;
}

.big-dot h2{
   font-size: 3rem;
   color: var(--black);
   margin-bottom: 1rem;
   text-transform: capitalize;
}

.forgot-container{
   min-height: clac(100vh - 17rem);
   /* display: block; */
   align-items: center;
   justify-content: center;
   padding: 3rem;
   width: 50rem;
   border-radius: 1rem;
   margin: 0 auto;
   max-width: 1200px;
   padding-bottom: 5rem;
} 

.forgot-container form{
   background-color: var(--white);
   border-radius: .5rem;
   padding: 3rem;
   border-radius: 1rem;
}

.forgot-container form .link{
   padding-top: 1rem;
   text-align: right;
   font-size: 1.5rem;
   padding-right: 1rem;
}

.forgot-container form .link a{
   color: var(--main-color);

}

.forgot-container form .link a:hover{
   color:#008cff;;
}

.forgot-container form .btn{
   margin-top: 2rem;
}
.forgot-container form h3{
   font-size: 3rem;
   text-align: left;
   color: var(--black);
   margin-bottom: 1rem;
   text-transform: capitalize;
}

.forgot-container form p{
   padding-top: 1rem;
   font-size: 1.7rem;
   color: var(--light-color);

}

.forgot-container form p span{
   color: var(--red);
}

.forgot-container form .box{
   width: 100%;
   border-radius: .5rem;
   margin: 1rem 0;
   padding: 1.4rem;
   font-size: 1.8rem;
   color: var(--black);
   background-color: var(--light-bg);
}

.reset-box {
   width: 300px;
   margin: 50px auto;
   padding: 20px;
   border: 1px solid #ccc;
   border-radius: 5px;
   background-color: var(--white);
   text-align: center;
 }
 
 .reset-box p {
   margin: 0;
   font-family: Arial, sans-serif;
   font-size: 16px;
   color: var(--black);
 }
 
 .reset-box a {
   color: var(--main-color);
   text-decoration: none;
   font-weight: bold;
 }

  .article-container .box-container {
            display: flex;
            gap: 1rem;
            justify-content: center;
            align-items: flex-start;
            width: 100%;
        }

        .article-container .box-container #article-form{
          flex: 0 0 74%;
          flex-wrap: wrap;
            background-color: var(--white);
            padding: 2rem;
            justify-content: center;
            border-radius: .5rem;
        }

         .article-container .box-container .box{
              flex: 0 0 25%;
  background-color: var(--white);
  padding: 10px;
  justify-content: center;
  border-radius: .5rem;
  height: auto;

         }


        .button-column .flex{
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 1rem;
            align-items: center;
            justify-content: center;
            margin-bottom: 2rem;
        }
        .button-column .flex i{
         color: var(--black);
        
        }

        .article-heading{
            font-size: 2rem;
            color: var(--black);
            margin-bottom: 1.5rem;
        }


        .action-btn {
            background-color: var(--light-bg);
            color: var(--light-color);
            border: none;
            border-radius: 5px;
            padding: 1rem 1rem;
            cursor: pointer;
            font-size: 1.8rem;
            width: 100%;
        }

        .action-btn:hover {
            background-color: var(--black);
            color: var(--white);

        }

         .action-btn:hover i {
            color: var(--white);

        }

        /* .article-container .box-container .input-row {
            display: flex;
            flex-direction: column;
            gap: 15px;
            width: 100%;
        } */

        .article-container .box-container .box .box-header{
         color: var(--black);
         font-size: 2rem;
         padding: 1rem;
         border-bottom: var(--border);
        }

        .article-container .box-container .box ul{
            list-style: none;
      
            font-size: 1.7rem;
            color: var(--black);
        }

        .article-container .box-container #article-form textarea {
            height: 150px; /* Increase height for paragraph box */
            width: 100%;
            background-color: var(--light-bg);
            color: var(--black);
            padding: 10px;
            margin-bottom: 1rem;
        }
         .article-container .box-container #article-form .box{
            width: 100%;
            background-color: var(--light-bg);
            color: var(--black);
            padding: 10px;
            border-radius: .5rem;
            font-size: 20px;
            margin-bottom: 1rem;
        }
        .article-container .box-container #article-form p{
            font-size: 1.8rem;
            color: var(--light-color);
            margin-top: 1rem;
            margin-bottom: .5rem;

        }
        .article-container .box-container #article-form p span{
            color: var(--red);
        }
        .toolbar #input{
    padding: 6px;
    border: none;
    border-radius: 4px;
    background-color: #ecf0f1;
    color: #2c3e50;
}


        .article-container .box-container #article-form .form-section input{
            width: 100%;
            background-color: var(--light-bg);
            color: var(--black);
            padding: 10px;
            border-radius: .5rem;
            font-size: 20px;
            margin-bottom: 1.5rem;
        }

        .article-container .box-container #article-form .button-column input[type="color"]{
            padding: 0;
            border: none;
            width: 40px;
            height: 40px;
            border-radius: 5px;
            cursor: pointer;
        }
        .toolbar #input{
    padding: 6px;
    border: none;
    border-radius: 4px;
    background-color: #ecf0f1;
    color: #2c3e50;
}

       

        .remove-btn {
            background-color: #9c0f1d;
            margin-top: -15px;
            margin-bottom: 2rem;
            font-weight: 900;
            color:rgb(215, 214, 214);
            border: none;
            padding: 4px 8px;
            border-radius: 5px;
            cursor: pointer;
        }

        .remove-btn:hover {
            background-color: #9c0f1d;
        }

        .move-btn {
            background-color: var(--edit-btn);
            color: #fff;
            border: none;
            padding: 4px 8px;
            border-radius: 5px;
            cursor: pointer;
            margin-top: -15px;
            margin-bottom: 2rem;
            font-size: 1.5rem;
            margin-right: 5px;
        }

        .move-btn:hover {
            background-color: var(--black);
            color: var(--white);
        }

        .article-container .box-container .box ul li a{
            color: var(--black);
            text-decoration: none;
            font-size: 1.7rem;
        }
     

      .project .project-container{
         display: flex;
         gap: 1.5rem;
         height: 100px;
         width: 120px;
      
      }

      .project .project-container .project-form form{
         width: 450px;
         background-color: var(--white);
         border-radius: .5rem;
         background-color: var(--white);
         border-radius: .5rem;
         padding: 2rem; 
         justify-content: center;
      }
      .project .project-container .project-form form .box{
         width: 100%;
         border-radius: .5rem;
         margin: 1rem 0;
         padding: 1.4rem;
         font-size: 1.8rem;
         color: var(--black);
         background-color: var(--light-bg);
      }

      .project .project-container .project-form form h3{
         font-size: 2.5rem;
         color: var(--black);
         margin-bottom: 1rem;
        
      }
      .project .project-container .project-form form p{
         color: var(--light-color);
         font-size: 1.2rem;
      }

      .project .project-container .project-form form p span{
         color: var(--red);
      }

      /* article card section */
   .article-container .articles-grid{
      display: grid;
      grid-template-columns: repeat(auto-fit, 35rem);
      gap: 1.5rem;
      justify-content: center;
      align-items: flex-start;
   }   


   .article-card{
      background-color: var(--white);
      border-radius: .5rem;
      padding: 2rem;
      overflow-x: hidden;

   }      
   .article-card img{
      height: 20rem;
      width: 100%;
      object-fit: cover;
      border-radius: .5rem;
      margin-bottom: .5rem;
   }   
   .article-card h4{
      font-size: 2rem;
      color: var(--black);
      margin-bottom: 1.5rem;

   }

   .article-card .tutor{
      font-size: 1.7rem;
      color: var(--light-color);

   }
   .article-card .date{
      font-size: 1.4rem;
      color: var(--light-color);
      margin-bottom: .7rem;
      text-align: right;

   }
   .article-card .flex-btn{
      display: flex;
      gap: 1rem;
      margin-top: 1rem;
    
   }



   /* text-editor-section */
 
.editor-container {
    max-width: 900px;
    margin-bottom: 1.5rem;
    background-color: var(--white);
    border-radius: .5rem;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    position: relative;
}

.toolbar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(35px, 1fr));
   background-color: var(--white);
   gap: 1rem;
   
}

/* .toolbar button,
.toolbar select,
[type="color"] {
  
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px; 
    border: none;
    background: none;
    cursor: pointer;
    padding: 0;
    vertical-align: middle;
}  */

/* Style the color swatch itself */
 [type="color"]::-webkit-color-swatch-wrapper {
    padding: 0;
}
[type="color"]::-webkit-color-swatch {
    border: 1px solid var(--light-color);
    border-radius: 3px;
}
[type="color"]::-moz-color-swatch-wrapper {
    padding: 0;
}
[type="color"]::-moz-color-swatch {
    border: 1px solid var(--light-color);
    border-radius: 3px;
}


.toolbar .action-btn {
      background-color: var(--light-bg);
      color: var(--light-color);
      font-size: 18px;
      font-weight: 600;
      text-align: center;
      border: none;
      border-radius: .4rem;
      cursor: pointer;
      position: relative;
      height: 40px;
      width: 100%;
}

.toolbar .action-btn title{
      font-size: 1.4rem;
      color: var(--black);
       position: absolute;
      top: 100%;
      left: 50%;  
      transform: translateX(-50%);
      background-color: var(--white);
      padding: 0.5rem 1rem;
      border-radius: .4rem;
}

.toolbar .action-btn:hover {
  
    background-color: var(--black);
   color: var(--white);
}

.toolbar select {
    background-color: #ecf0f1;
}

.editor {
    padding: 2rem;
    margin-top: 1rem;
    background-color: var(--light-bg);
   color: var(--black);
    min-height: 250px;
    outline: none;
    font-size: 16px;
}


.editor u {
    text-decoration: underline;
}

.editor s,
.editor strike {
    text-decoration: line-through;
}

.paragraph-add-menu{
   display: none;
   position: absolute;
   top: 100%;
   left: 0;
   background-color: var(--white);
   border: 1px solid var(--light-color);
   border-radius: .5rem;
}


.status-bar {
    background-color: var(--main-color);
    padding: 10px;
    text-align: right;
    font-weight: 800;
    font-size: 14px;
    color:white;
}

/* project section */

.projects .box-container{
   display: grid;
   grid-template-columns: repeat(auto-fit,30rem);
   gap: 1.5rem;
   justify-content: center;
   align-items: flex-start;
}
.projects .box-container .box{
   background-color:var(--white) ;
   border-radius: .5rem;
   padding: 2rem;
}

.projects .box-container .box .date{
   font-size: 1.3rem;
   color: var(--light-color);
   margin-bottom: .5rem;
}


.projects .box-container .box .link{
   text-decoration: none;
   color: var(--light-color);
   font-size: 1.5rem;

}
.projects .box-container .box a i{
   color: var(--border);
}

.add-btn{
   border-radius: .5rem;
   color:#fff;
   font-size: 1.8rem;
   cursor: pointer;
   text-transform: capitalize;
   padding:1rem 3rem;
   text-align: center;
   margin-top: 1rem;
   background-color: #076800ff;

}

.add-btn{
   display: block;
   width: 100%;
}

.add-butn{
       background-color: var(--light-bg);
    color: var(--black);
    border: none;
    padding: 4px 8px;
    border-radius: 5px;
    cursor: pointer;
    margin-top: -15px;
    margin-bottom: 2rem;
    font-size: 1.5rem;
    margin-right: 4px;
}

.add-butn:hover{
   background-color: var(--black);
   color: var(--white);
}
.add-btn:hover{
   color: var(--white);
   background-color: var(--black);
}

.projects .box-container .thumb span{
   position: absolute;
   top: 1rem; left: 1rem;
   background-color: rgba(0,0,0,.3);
   color: #fff;
   font-size: 2rem;
   padding: .5rem 1.5rem;
   border-radius: .5rem;
}
.projects .box-container img {
   height: 100%;       /* Or whatever fixed height you want */
   width: 100%;         /* Makes it full width of its container */
   object-fit: contain; /* Shows the whole image, may leave empty space */
   border-radius: .5rem;
   background-color: #f0f0f0; /* Optional: gives a neutral background if image doesn't fill box */
   margin-bottom: 1rem;
}

.projects .box-container .flex{
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 1.5rem;;
   margin-bottom: 1.5rem;
}

.projects .box-container .flex i{
   font-family: 1.7rem;
   color: var(--main-color);
   margin-right: 1rem;
}

.projects .box-container .flex span{
   font-size: 1.6rem;
   color: var(--light-color);

} 

.projects .box-container .title{
   font-size: 2rem;
   color: var(--black);
   margin-bottom: 1rem;
}


/* delete profile  */

.delete-profile-container{
   min-height: calc(100vh - 17rem);
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 3rem;
   width: 50rem;
   border-radius: 1rem;
   margin: 0 auto;
   max-width: 400px;
   padding-bottom: 5rem;
   background-color: var(--white);
}

.delete-profile-container form{
   background-color: var(--white);
   border-radius: .5rem;
   padding: 3rem;
   border-radius: 1rem;
}

.delete-profile-container form p{
   padding-top: 1rem;
   font-size: 1.7rem;
   color: var(--light-color);
}

.delete-profile-container form .flex{
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: space-between;
   gap: 1.5rem;
   margin-bottom: 1.5rem;
}

.delete-profile-container form .flex .box{
   width: 100%;
   border-radius: .5rem;
   margin: 1rem 0;
   padding: 1.4rem;
   font-size: 1.8rem;
   color: var(--black);
   background-color: var(--light-bg);
}

.delete-profile-container .back-btn{
   width: 100%;
   background-color: var(--main-color);
   color: var(--white);
   padding: 1rem;
   border-radius: .5rem;
   font-size: 1.8rem;
   cursor: pointer;
   text-align: center;
   margin-top: 1rem;
}

.question-row{
   display: flex;
   align-items: center;
   gap: .75rem;
}

.refresh-btn{
   background-color: var(--white);
   color: var(--light-color);
   padding: .5rem .5rem 0rem .5rem;
   border: none;
   border-radius: .5rem;
   font-size: 2rem;
   cursor: pointer;
   transition: background-color .3s;
}

.refresh-button:hover{
   background-color: var(--dark-color);
}


.complete-container{
   margin-top: 3rem;
   background-color: var(--white);
   border-radius: 1rem;
   padding: 3rem;
   width: 50rem;
   margin-bottom: 3rem;
}

.complete-container .flex{
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
   gap: 1rem;
   align-items: center;
   justify-content: center;
   margin-bottom: 2rem;
}
.complete-container .flex .cp-input .user_name{
   font-size: 1.7rem;
   color: var(--light-color);
   margin-bottom: 1rem;
   margin-top: 1rem;
}

.complete-container .flex .cp-input .user_name span{
   font-size: 1.2rem;
   color: var(--red);
}


.complete-container .flex .cp-box{
   background-color: var(--light-bg);
   padding: 1rem 1rem;
   font-size: 1.8rem;
   color: var(--black);
   width: 100%;
   border-radius: .5rem;
}

.complete-container .flex .phone {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 1.3rem;
}

.complete-container .flex .phone > :first-child {
  flex: 0 0 27%;   /* fixed 20% */
}

.complete-container .flex .phone > :last-child {
  flex: 0 0 73%;   /* fixed 80% */
}

.add_project_btn{
   display: block;
   width: 100%;
   background-color: #076800ff;
   color:#fff;
   font-size: 1.8rem;
   cursor: pointer;
   text-transform: capitalize;
   padding:1rem 3rem;
   text-align: center;
   margin-top: 1rem;
   border-radius: .5rem;
}

.add_project form{
   max-width: 100%;
   background-color: var(--white);
   border-radius: .5rem;
   padding: 2rem;
   padding-top: 1rem;
   padding-top: 1rem;

}
.upload_editor{
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(45rem, 2fr));
   gap: .5rem;
}

.form-editor{
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(45rem, 2fr));
   gap: .5rem;
}

.add_project_con1{
   display: flex;
   gap: 1rem;
}

.form-editor form .upload_section .col .flex{
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(20rem, 2fr));
   gap: 1rem; 
   justify-content: center;
   margin-bottom: 2rem;
}

.code-editor-modal {
   display: none;
   right: 0;
   top: 0;
   height: 100vh;
   border: 2px solid var(--white);
   border-radius: .5rem;
}

.code-editor-modal .editor-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 1rem;
   background: var(--white);
   border-bottom: var(--border);
}

.code-editor-modal .editor-header .editor-header-title{
   font-size: 1.5rem;
   color: var(--black);
   text-transform: capitalize;
}

.code-editor-modal .editor-header .editor-header-buttons{
   display: flex;
   gap: 1.5rem;
}

.code-editor-modal .editor-header button{
   background: none;
   border: none;
   cursor: pointer;
   font-size: 1.5rem;
   color: var(--black);
   padding: 0;
   margin: 0;
   transition: all 0.1s ease-in-out;
}

.code-editor-modal .editor-header button:hover{
   transform: scale(1.05);
   color: var(--light-color);
}

.code-editor-modal .editor-tabs {
   display: flex;
   color: var(--black);
   gap: 1rem;
   border-bottom: var(--border);
   padding: 0;
   background: var(--white);
   overflow: auto;
   white-space: nowrap;
   height: 35px;
}

.code-editor-modal .monaco-editor {
   width: 100%; 
   height: calc(100% - 90px);

}


.add_project .form-editor form .project_form_con{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(45rem, 2fr));
  gap: 2rem; 
   justify-content: center;
   margin-bottom: 2rem;
   /* display: flex;
   gap: 1rem; */
}

.add_project .form-editor form .project_form_con .template_details{
   display: flex;
   flex-direction: column;
   gap: 1rem;
}

.template_preview_con{
   margin-top: 1rem;
   margin-bottom: 2rem;
   padding: 1rem;
   background-color: var(--light-bg);
}
.template_preview_con h3{
   font-size: 1.5rem;
   color:var(--black);
   margin-bottom: 1rem;
   border-bottom: var(--border);
   padding-bottom: 1.5rem;
   text-transform: capitalize;
   margin-left: 1rem;
   margin-top: 2rem;
   margin-right: 1rem;
}

.template_preview{
   display : grid;
   grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
   gap: .5rem;
   justify-content: center;
   align-items: center;
   border-radius: .5rem;
   overflow: hidden;
   margin-bottom: 1rem;
   margin-top: 1rem;
   padding: 1rem;
}



.template_preview p{
   font-size: 1.5rem;
   color: var(--light-color);
}
 
.template_preview .template_card{
   background-color: transparent;
   border-radius: .5rem;
   display: flex;
   align-items: center;
   justify-content: center;
}

.template_preview .template_card p{
   font-size: 1.2rem;
   color: var(--light-color);
   text-align: center;
   margin-top: .5rem;
}

.template_preview .template_card :hover{
   cursor: pointer;
   transform: scale(1.05);
   transition: all 0.3s ease-in-out;
}

.template_preview .template_card .info{
   padding: 0.5rem;
   text-align: center;
   font-size: 1.4rem;
   border-bottom-left-radius: .5rem;
   border-bottom-right-radius: .5rem;
}

.template_preview .template_card .info img{
   color: var(--main-color);
     max-width: 100%;
   max-height: 100%;
   object-fit: contain;
   overflow: hidden;
   text-overflow: ellipsis;
   border-radius: 1rem;
}


.add_project .form-editor form .project_form_con .col{
   padding-top: 1rem;
   display: flex;
   flex-direction: column;
   gap: 1rem;
}
.add_project .form-editor form .project_form_con .col .flex{
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(20rem, 1fr));
   gap: 2rem; 
   justify-content: center;
   margin-bottom: 2rem;
}

.add_project .form-editor form .project_form_con .col .flex p{
   display: flex;
   padding: .5rem 1rem .5rem 1rem;
   justify-content: space-between;
   align-items: center;
   font-size: 12px;
}

.div-sub-heading{
   border-bottom: var(--border);
}

.div-sub-heading .inline-zip-btn{
   background-color: #004d79ff;
   color: #ebeaea;
   border: none;
   padding: .5rem 1rem;
   border-radius: .5rem;
   font-size: 1.5rem;
   cursor: pointer;
   margin-bottom: 5px;
}

.sub-heading-1{
   font-size: 1.5rem;
   color:var(--black);
   text-transform: capitalize;
   margin-top: .4rem;
   margin-right: 1rem;
}

.sub-heading{
   margin-top: 1rem;
   margin-left: 1rem;

}

.project_heading{
   display: flex;
   justify-content: space-between;
   align-items: center;
   font-size: 2.5rem;
   color:var(--black);
   margin-bottom: 2.5rem;
   border-bottom: var(--border);
   padding: 1.5rem;
   text-transform: capitalize;
}

.add_project .form-editor form select.box{
   width: 100%;
   font-size: 1.8rem;
   color: var(--black);
}

.add_project .form-editor form p{
   display:flex;
   padding-top: 1rem;
   font-size: 1.5rem;
   color: var(--light-color);
   border-radius: .5rem;
}

.add_project p span{
   color: var(--red);
}

.add_project .form-editor form .box{
 width: 100%;
 background-color: var(--light-bg);
 border-radius: .5rem;
 padding: 1.4rem;
 color: var(--black);
 /* margin: 1rem 0; */
 font-size: 1.8rem;
}

.uploadFilesBtn{
   background: transparent;
        border: none;
        padding: 1px 10px;
        border-radius: 50%;
        cursor: pointer;
        margin-right: 1px;
}
.uploadFilesBtn i{
   color:rgb(0, 195, 0);
   font-size: 2rem;
}

.createFilesBtn{
   background: transparent;
}

.createFilesBtn i{
    color:rgb(0, 195, 0);
   font-size: 2rem;
}

.createFilesBtn i:hover{
   cursor: pointer;

}

.add_project .form-editor form .col .flex div{
   background-color: var(--light-bg);
   border-radius: .5rem;
   margin-top: 1rem;
   height: fit-content;
}


.add_project .form-editor form .col .flex div ol{
   margin-left:3px;
   margin-right: 3px;
   margin-bottom: 3px;
   justify-content: center;
   background-color: var(--white);
   color: var(--black);
   list-style: none;
   counter-reset:file-counter; 
   border-bottom-left-radius: .5rem;
   border-bottom-right-radius: .5rem;
   padding: 5px;
}
.add_project .form-editor form .col .flex div ol li{
   counter-increment: file-counter; /* increment counter */
   align-items: center;
   height: 2.5rem;
   padding: 5px;
   width: 100%;
   padding-left: 5px;
   font-size: 1.35rem;
   position: relative;
   margin-bottom: 5px;
   margin-top: 5px;
   padding-left: 2.5rem; /* space for number */
}


.add_project .form-editor form .col .flex div ol li::before {
   content: counter(file-counter) ".";
   position: absolute;
   left: 0;
   background: transparent;
   /* background-color: var(--white); */
   color: var(--light-color);
   width: 2rem;
   height: 2rem;
   line-height: 2rem;
   text-align: center;
   border-radius: .5rem;
   margin-left: 5px;
   font-size: 1.3rem;
   padding-top: .1rem;
}

.fileList li {
  display: flex;
  align-items: center;
  margin-bottom: 6px;
  white-space: nowrap;       /* Keep text on one line */
  overflow: hidden;          /* Hide overflow text */
  text-overflow: ellipsis;   /* Add "..." at the end */
}

.fileList li a {
  flex-grow: 1;    
  color: var(--light-color);          /* File name takes remaining space */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fileList li a:hover {
  color: var(--black);
  text-decoration: underline;
   cursor: pointer;
   transform: scale(1.3rem);
   transition: all 0.2s ease-in-out;
}

.fileList li i {
  flex-shrink: 0;            /* Prevent icon from shrinking */
  margin-left: 10px;
  color: red;
  cursor: pointer;
}





.add_project .media{
   height: 20rem;
   border-radius: .5rem;
   margin: 1rem ;
   width: 100%;
   object-fit: contain;
   background-color: #000;
}

.add_project form textarea{
   height: 20rem;
   resize: none;;
}

.template_section{
   display: flex;
   gap: 1rem;
   overflow-x: auto;
   padding-bottom: 1rem;
   margin-bottom: 2rem;
}

.template_section .col{
   flex: 0 0 auto;
   background-color: var(--white);
   border-radius: .5rem;
   padding: .5rem;
   cursor: pointer;
   border: 2px solid transparent;
}

.template_section .col:hover{
   border: 2px solid var(--primary);
}

.template_section .col.active{
   border: 2px solid var(--primary);
   background-color: var(--light-bg);
}































.footer{
   position: fixed;
   /* position: sticky; */
   background-color: var(--light-bg);
   bottom: 0; left: 0; right: 0;
   text-align: center;
   font-size: 1.3rem;
   padding:.5rem .5rem;
   padding-right: 2.5rem;;
   padding-left: 30rem;
   color:var(--black);
   margin-top: 1rem;
   z-index: 1000;
   /* padding-bottom: 9.5rem; */
}
 .footer.active{
   padding-left: 2rem;
 }

.footer span{
   color:var(--light-color);
  
}

.empty{
   padding: 1.5rem;
   font-size: 1.8rem;
   color: var(--black);
   text-align: center;
   align-items: center;
   height: auto;
   width: 30rem;
   background-color: var(--white);
}



@media (max-width:1200px){

   body{
      padding-left: 0;
   }

   .side-bar{
      left: -30rem;
      transition: .2s linear;
   }

   .side-bar #close-btn{
      display: block;
   }

   
   .footer{
      padding-left: 2rem;
  }

   .side-bar.active{
      left: 0;
      box-shadow: 0 0 0 100vw rgba(0,0,0,.8);
      border-right: 0;
   }

   /* add_article_responcive */
    .article-container {
                flex-direction: column;
            }

    .article-container .box-container {
                width: 100%;
            }

            .article-form, .preview-box {
                width: 100%;
                margin-bottom: 20px;
            }

}



/* @media (max-width:991px){

   html{
      font-size: 55%;
   }

} */

@media (max-width:768px){

   #search-btn{
      display: inline-block;
   }
   .html{
      font-size: 200%;
   }
   .side-bar .profile{
          padding: .5rem 2rem 1rem 2rem;
   }

   .header .flex .search-form{
      position: absolute;
      top: 99%; left: 0; right: 0;
      border-top: var(--border);
      border-bottom: var(--border);
      background-color: var(--white);
      border-radius: 0;
      width: auto;
      padding: 2rem;
      clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
      transition: .2s linear;
   }
   .phone {
      flex-direction: column;
   } 

   .heading{
      font-size: 2rem;
   }

   .header .flex .search-form.active{
      clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
   }

   .watch-video .content .video{
      height: auto;
   }
   
   /* add_article_responcive */

   .button-column {
                flex-direction: column;
                gap: 5px;
            }

   .article-container .box-container{
      flex-direction: column;
      gap: 1rem;
   }         

   .article-container .box-container #article-form .form-section .input-row {
                flex-direction: column;
                gap: 10px;
            }

   .article-container .box-container .box {
                width: 100%;
            }

            .article-container .box-container #article-form {
               width: 100%;
            }

            textarea.box {
                height: 120px;
            }
     
  
}

@media (max-width:600px){
     html{
      font-size: 70%;
   }
   .side-bar .profile{
          padding: .5rem 2rem 1rem 2rem;
   }

   .add_project form .project_form_con{
      display: flex;
      flex-direction: column;
      gap: 2rem; 
      justify-content: center;
      margin-bottom: 2rem;
}

   .add_project form .project_form_con .col{
      padding-top: 1rem;
      display: flex;
      flex-wrap: wrap;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 1rem;
   }

   .add_project form .project_form_con .col p{
      align-items: flex-start;
      width: 100%;
      padding: .5rem 0;
   }

   .add_project form .project_form_con .col .flex{
      padding-top: 1rem;
      display: flex;
      flex-wrap: wrap;
      gap: 1rem;
      
   }

   .add_project form .col .flex div{
      width: 100%;
   }

   .flex-btn{
      gap: .5rem;
      flex-flow: column;
   }

   .home-grid .box-container{
      grid-template-columns: 1fr;
   }

   .about .row .image img{
      height: 27rem;
   }

   .course .box-container{
      grid-template-columns: 1fr;
   }

   .about .row .image img{
      height: auto;
   }

   .playlist-details .row .col .thumb{
      height: 25rem;
   }

   .teachers .box-container{
      grid-template-columns: 1fr;
   }

   .footer{
      align-items: center;
   }

    .article-container .box-container {
      flex-direction: column;
      gap: 1rem;
      width: 100%;
      align-items: center;
      justify-content: center;

    }
    .toolbar{
      grid-template-columns: repeat(auto-fit, minmax(30px, 1fr));
      gap: 1rem;
    }

   .button-column .flex{
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
      gap: 1rem;
      font-size: 1rem;

   }
   .button-column .flex i{
      font-size: 1.8rem;
      padding: 0;
   }

   /* add_article_rsponcive */
     .action-btn {
            display: flex;
            flex-direction: column;
            gap: 10px;
                font-size: 15px;
                padding: 8px 10px;
                text-align: center;
   
            }

            .remove-btn {
                font-size: 10px;
                padding: 5px 8px;
            }

            .move-btn {
                font-size: 1.5rem;
                padding: 5px 8px;
            }

            .box {
                font-size: 10px;
            }
 
}
   

@media (max-width:450px){

   html{
      font-size: 75%;
   }
  
   .side-bar .profile{
          padding: .5rem 2rem 1rem 2rem;
   }
   .form-container{
      padding: 2.5rem 1.5rem 3rem 1.5rem;
   }

   .form-container form.login{
      padding: 2rem 1.5rem 2rem 1.5rem;
   }

   #captchaB{
      text-align: center;
      display: flex;
      justify-content: right;
   }
   #captchaQuestion{
      padding-top: .5rem;
      font-size: 1.4rem;
   }
   #refreshCaptcha{
      font-size: 2rem;
   }

   #captchaInput {
    width: 40%;
    font-size: 1.2rem;
    padding: .5rem;
    margin-left: 1rem;
    margin-bottom: 1rem;
    border-radius: .5rem;
}
.form-container form{
   padding: 2rem 1.8rem 2rem 1.8rem;
}

    .header .flex {
        padding: 1rem 1rem;
    }


   .flex-btn{
      gap: .5rem;
      flex-flow: column;
   }

   .home-grid .box-container{
      grid-template-columns: 1fr;
   }

   .about .row .image img{
      height: 27rem;
   }

   .course .box-container{
      grid-template-columns: 1fr;
   }

   .about .row .image img{
      height: auto;
   }     

   .playlist-details .row .col .thumb{
      height: 25rem;
   }

   .teachers .box-container{
      grid-template-columns: 1fr;
   }

   .footer{
      align-items: center;
   }

    .article-container .box-container {
      flex-direction: column;
      gap: 1rem;
      width: 100%;
      align-items: center;
      justify-content: center;

    }
    .toolbar{
      grid-template-columns: repeat(auto-fit, minmax(30px, 1fr));
      gap: 1rem;
    }

   .button-column .flex{
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
      gap: 1rem;
      font-size: 1rem;

   }
   .button-column .flex i{
      font-size: 1.8rem;
      padding: 0;
   }

   /* add_article_rsponcive */
     .action-btn {
            display: flex;
            flex-direction: column;
            gap: 10px;
                font-size: 15px;
                padding: 8px 10px;
                text-align: center;
   
            }

            .remove-btn {
                font-size: 10px;
                padding: 5px 8px;
            }

            .move-btn {
                font-size: 10px;
                padding: 5px 8px;
            }

            .box {
                font-size: 10px;
            }
 
}

.table-preview{
      width: 100%;
      max-height: 400px;
      overflow-y: auto;
      background-color: var(--white);
      border-radius: .5rem;
      margin-bottom: 2rem;
}

.excel-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
}

.excel-table th,
.excel-table td {
    border: 1px solid var(--light-color); /* Changed border color to be more prominent */
    padding: 8px;
    text-align: left;
    font-size: 1.6rem;
    color: var(--black);
}

.excel-table th {
    background-color: var(--light-bg);
    font-weight: bold;
}

.excel-table td[contenteditable="true"]:focus {
    outline: 2px solid var(--light-color);
}

.table-manipulation-controls {
  display: grid;
   grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
   gap: 1rem;
   margin-top: 1rem;
}

.table-creation-controls{
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
   gap: 1rem;

}

.table-manipulation-controls .action-btn {
    padding: 0.8rem 1.2rem;
    font-size: 1.6rem;
}

@media (max-width:400px){

  .header .flex {
      padding: 1rem 1.2rem 1rem 1.2rem;
  }
  .header .flex .icons div{
   margin-left: .4rem;
  }
  .side-bar .navbar a{
   padding: 1.7rem;
  }
  .side-bar .profile{
          padding: .5rem 2rem 1rem 2rem;
   }
    .header .flex .icons div{
   margin-left: .2rem;
  }

}

@media (max-width:350px){
   .side-bar .profile{
          padding: .5rem 2rem 1rem 2rem;
   }

  .header .flex {
      padding: 1rem 1rem;
  }
  html{
      font-size: 65%;
  }
  

}





  .popup-overlay {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0,0,0,0.6);
  justify-content: center;
  align-items: center;
  z-index: 1000;
}
.popup-content {
  background: var(--white);
  color: var(--light-color);
  padding: 20px;
  border-radius: 12px;
  width: 400px;
  height: auto;
  text-align: center;
  position: relative;
}

.popup-content .phone_update{
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 1.5rem;
   margin-bottom: 1rem;
   margin-top: 1rem;
   font-size: 1.5rem;
}

.popup-content .password_update{
   display: flex;
   gap: 1.5rem;
   align-items: center;
   justify-content: center;
}

.popup-content .password_update label{
   font-size: 1.5rem;
   color: var(--light-color);
   align-items: center;
   justify-content: center;

}

.popup-content form .box{
   border-radius: .5rem;
   margin: 1rem 0;
   padding: .5rem 1.4rem;
   font-size: 1.5rem;
   color: var(--black);
   background-color: var(--light-bg);
}
.close-btn {
  position: absolute;
  top: 10px; right: 15px;
  font-size: 2.5rem;
  cursor: pointer;
  color: var(--red);
}