/* General Styles */
body {
    margin: 0;
    padding: 0;
    max-width: 100%;
    overflow-x: hidden;
    font-family: 'Inter', sans-serif;
    background-color: #0d0d0d;
}

html::-webkit-scrollbar{
    width: 0.3rem;
}
html{
    scroll-behavior: smooth;
}

/* common for color green text */

.text_green{
    color: #08a021;
}


/* Video Background */

.video-background{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  z-index: -1;
  opacity: .4;
}

.video-background video{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 100%;
  min-height: 100%;
}


/* Navbar Styles */
.navbar{
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(52, 58, 64,);
  backdrop-filter: blur(5px);
  box-shadow: 0px 5px 8px rgba(0, 0, 0, .5);
  border-radius: 50px;
  position: sticky !important;
  width: 50%;
  padding: 1rem;
  margin: 0 auto;
  top: 15px;
  left: 25%;
  right: 0;
  font-weight: 700;
  z-index: 10 !important;
}

.container-fluid{
  margin: -10px;
  margin-left: 3px;
}

.navbar-brand:hover{
    color: red !important;
    transition: 1.5s;

}

.navbar-brand span{
    color: rgb(8, 160, 33);
}

.nav-item {
  margin: 0 1rem;
}

.nav-item span{
    color: red !important;
}
.nav-link {
    text-align: center
    !important;
    border-radius: 15px;
}

.nav-link:hover{
    color: rgb(59, 194, 25) !important;
    text-shadow: 0 0 20px whitesmoke;
    transition: 1.5s;
}

/* .nav-link.active {
  color: #00ff80;
} */

/* Hero Section */
.hero {
    position: relative;
    z-index: 2;
    color: white;
    text-shadow: 0px 0px 15px rgba(0, 0, 0, 0.8);
    margin: 30px;
}


.hero .social-icon :hover{
  color: #ff0707;
}

.hero h1 {
    font-size: 3.2rem;
    font-weight: bold;
    text-shadow: 0px 0px 15px rgba(49, 46, 31, 0.8);
}

.hero p {
    font-size: 1.2rem;
    font-weight: bold;
    background: linear-gradient(to left , rgb(18, 222, 18),rgb(146, 146, 254));
    -webkit-background-clip: text;
    color: transparent;
    max-width: 600px;
}

.hero span{
  background: linear-gradient(to top , rgb(18, 222, 18),rgb(146, 146, 254));
    -webkit-background-clip: text;
    color: transparent;
}

.hero button{
    border-radius: 20px;
    border-color: #07ff8c;
    color: #07ff8c;
    font-weight: 700 !important;
}

.hero button:hover{
    color: #fff !important;
    transition: 1.5s !important;
    font-size: 16px;;
    box-shadow: 0 0 5px 5px rgb(168, 224, 247);
}

/* Quick about */

section h3{
    margin-left:10px;
    background: linear-gradient(to right , rgb(18, 222, 18),rgb(146, 146, 254)) !important;
    -webkit-background-clip: text !important;
    color: transparent;
}

section{
    color: whitesmoke;
    width: 100%;
    border-radius: 30px ;
    backdrop-filter: blur(15px);
}

.img-fluid{
  width:30% !important;
  height: 30% !important;
  margin-left: 30%;
  display: flex;
  
}

.im .row {
  background-color:rgb(0, 0, 0);
  border-radius: 30px;
  backdrop-filter: blur(10%);
}

/* About profile */

#About{
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(5px);
}

.abt p{
  justify-content: center;
  align-items: center;
  margin-top: 2%;
  width: 80%;
  margin-left: 10%;
}

.abt{
  display: flex;
  flex-direction: column; /* Arrange items vertically */
  align-items: center;
}

.abt img{
  max-width: 100%;
  display: block; /* Prevents inline spacing issues */
  margin-bottom: 20px;
  border-radius: 35%;
  width: 300px;
  height: 400px;
  margin-top: 2%;
  filter: drop-shadow(0px 30px 15px rgba(48, 47, 47, 0.8));
}


.ac h5{
  background: linear-gradient(to bottom , rgb(18, 222, 18),rgb(146, 146, 254));
  -webkit-background-clip: text;
  color: transparent;
}

.abt:hover p{
    color: whitesmoke;
    font-size: medium;
    font-weight: 200;
    transition: 2.5s;
}

/* About card */


.card {
    margin-bottom: 20px;
    margin-top: 30px;
    height: 95%;
    margin-left: 35px;
    backdrop-filter: blur(20px);
    background: transparent;
    border-radius: 20px;
}

.row {
    display: flex;
    flex-wrap: wrap;
}
  
/* card */

.ac{
    margin-bottom: 5% !important;
}
.card-body{
    text-align: center;
    color: whitesmoke;
    font-weight: 200;
    text-shadow: #0d0d0d;
    font-size: larger;
}

.card-body p{
  background: linear-gradient(to bottom , rgb(18, 222, 18),rgb(146, 146, 254));
  -webkit-background-clip: text;
  color: transparent;
  font-weight: 400;
  font-size: large;
}
.card:hover {
    transform: translateY(-10px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
    background: transparent;
    transition: 2s;
}

.ac  img{
    opacity: .2;
}

.ac img:hover{
    opacity: 1;
    transition: 1.5s;
}
  

/* Course */
/* Course Layout */
.course {
  gap: 20px;
  margin-top: 7% !important;
  margin-bottom: 10% !important;
}

/* Card Style */
.course .card {
  flex: 1 1 calc(33.33% - 20px);  /* Three cards per row */
  border: 1px solid #ddd;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  background: #252323cf;
  height: auto;
  margin-bottom: 10px;
}

.course.card:hover {
  /* transform: translateY(-10px); */
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.course .card-body {
  padding: 20px;

}

.card-title {
  font-size: 1.5rem;
  font-weight: bold;
  color: #fff;
}

.course .card-text {
  font-size: 14px;
  color: #e7f7e3;
}

.course .card-text strong{
    color: #fff;
    font-weight: 700;
    font-size: 16px;
  }

.course .card-text ul {
  padding-left: 10px;
}

.course ul{
    opacity: 0;
    background: linear-gradient(to left , rgb(18, 222, 18),rgb(196, 93, 93));
    -webkit-background-clip: text;
    color: transparent;
    text-align: start;
}

.course ul:hover{
    opacity: 1;
    transition: 2s;
}

h2 {
  text-align: center;
  color: aliceblue; /* Define color here */
  z-index: 1 !important;
}

.course h3 {
  font-size: 1.2rem;
  font-weight: bold;
  color: #E74C3C;
}

.course h5 {
  font-size: 1rem;
  color: #27AE60;
}

/* Strikethrough for original price */
.course .original-price {
  text-decoration: line-through;
  color: #999;
  margin-right: 10px;
}

/* Button Styling */
.course .btn {
  display: inline-block;
  padding: 10px 20px;
  background: transparent;
  color: white;
  text-align: center;
  text-decoration: none;
  border-radius: 20px;
  border-color: #E74C3C;
  font-size: 1rem;
  margin-top: 10px;
  transition: background-color 0.3s ease;
}

.course .btn:hover {
  background-color: #54b929;
  transition: 2s;
}



/* FAQ section */

.subnav-items{
    min-width: 150px;
    border-radius: 5px;
    padding: 5px 10px;
    font-size: 14px;
    background-color: #171717;
}

.subnav-items .items{
    padding: 2px 9px;
    color: #fff;
    font-weight: 500;
    cursor: pointer;
}

.subnav-items .items.active{
    background-color: #07ff8c;
    border-radius: 7px;
}

.question-grid{
    width: 100%;
    transition: all 0.3s ease-in-out;   
}

.question-grid .questions{
   border-radius: 8px;
   background-color: #171717;
   overflow: hidden;
   padding: 15px;
}

.accordion-item, .accordion-item .top-div {
    background-color: #171717;
    border-radius: 8px !important;
}

.btn-check:focus+.btn, .btn:focus{
    box-shadow: none !important;
}


.ans-sec{
  color: #ddd;
}

.accordion-collapse {
    transition: height 0.3s ease-in-out;
}

.list-unstyled li a {
    color: white;
}

.list-unstyled li a:hover{
    color: #E74C3C;
}

.social-icons i:hover{
    color: red;
}

/* Footer Section */

footer h5,h4{
  color: #24d063;
}

.floa-start p{
  color: #a1a1a1;
}

/* Modal Background Blur */
.modal-backdrop.show {
  background-color: rgba(0, 0, 0, 0.8);
  
}

/* Modal Custom Styles */
.modal-content {
  background-color: #000 !important;
  color: white !important;
  border-radius: 10px;
  padding: 20px;
  max-height: 80vh;
  overflow-y: auto;
}

/* Scrollable Content */
.modal-body {
  max-height: 100vh !important;
  overflow-y: auto;
  padding-right: 10px
}
.modal-body::-webkit-scrollbar {
  width: 4px; /* Scrollbar width */
}

.modal-body::-webkit-scrollbar-thumb {
  background-color: #29ad25; /* Scrollbar color */
  border-radius: 10px;
}

.modal-body::-webkit-scrollbar-thumb:hover {
  background-color: #d20202; /* Scrollbar hover effect */
}

/* Body Overlay (Blurred Background) */
body.modal-open {
  overflow: hidden;
}

/* media query */

@media (max-width: 768px) {
  .video-background{
    width: 100%;
    height: 100%;
  }
  .navbar-nav {
      flex-direction: column; 
      text-align: center; 
  }

  .nav-item {
      margin: 0.5rem 0; 
  }

  .navbar-toggler {
      margin-left: auto; 
  }
}

@media (max-width:450px){
  .video-background{
    width: 100%;
    height: 100%;
  }
  .circle img{
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 15%;
      width: 200px;
      height: 300px;
      margin-left: 25%;
      margin-top: 20%;
      filter: drop-shadow(0px 30px 15px rgba(48, 47, 47, 0.8));
      transition: 4s;

  }

  .circle .cont {
      opacity: 0;
  }
  
  .circle:hover .cont{
      position: relative;
      opacity: 1;
      color: rgb(146, 244, 241);
      width: 180px;
      top: 15%;
      right: -15em;
      transition: 2s;
  }

  #Skills img,p{
      display: flex;
      justify-content: center;
      align-items: center;
      text-align: center;
      margin-left: 10%;
      margin-top: -10%;
  }

  #Skills:hover img,p{
      margin-top: 10%;
  }

  #contact iframe{
      position: relative;
      width: 300px;
      height: 300px;
      left: -10%;
      border-radius: 10%;
      box-shadow: 0 0 10px 5px;
  }

  #contact .mb-3{
      position: relative;
      right: -10%;
      margin-top: 10%;
      border-radius: 8%;
      box-shadow: 0 0 10px 5px ;
  }

  #contact button{
      position: relative;
      left: 10%;
  }

  #About p{
    margin-left: -30px;
    width: 120%;
    font-size: 14px;
  }

  #About img{
    width: 150px;
    height: 200px;
  }

}


@media (max-width:400px){
  .video-background{
    width: 100%;
    height: 100%;
  }
  .circle:hover img{
      position: absolute;
      margin-top: 2.5%;
      margin-left: 20%;
      transition: 3s;
  }
  .circle img{
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 15%;
      width: 200px;
      height: 300px;
      margin-left: 20%;
      margin-top: 20%;
      filter: drop-shadow(0px 30px 15px rgba(48, 47, 47, 0.8));
      transition: 4s;

  }

  .circle .cont {
      opacity: 0;
  }
  
  .circle:hover .cont{
      position: relative;
      opacity: 1;
      color: rgb(146, 244, 241);
      width: 350px;
      top: 50%;
      right: -.5em;
      transition: 2s;
  }
}

@media (max-width:350px){
  .video-background{
    width: 100%;
    height: 100%;
  }
  .circle:hover img{
      position: absolute;
      margin-top: 2.5%;
      margin-left: 20%;
      transition: 3s;
  }
  .circle img{
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 15%;
      width: 200px;
      height: 300px;
      margin-left: 20%;
      margin-top: 20%;
      filter: drop-shadow(0px 30px 15px rgba(48, 47, 47, 0.8));
      transition: 4s;

  }

  .circle .cont {
      opacity: 0;
  }
  
  .circle:hover .cont{
      position: relative;
      opacity: 1;
      color: rgb(146, 244, 241);
      width: 300px;
      top: 50%;
      right: -1.25em;
      transition: 2s;
  }
}

@media (max-width:170px){
  .video-background{
    width: 100%;
    height: 100%;
  }
  .circle{
      width: 100px;
      height: 200px;
      background-color: rgb(23, 21, 21);
      border-radius: 50%;
      transition: 2s;
      box-shadow: 0 12px 50px rgba(223, 192, 192, 0.6);
  }
  .circle:hover img{
      position: absolute;
      margin-top: 2.5%;
      margin-left: 20%;
      transition: 3s;
  }
  .circle img{
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 15%;
      width: 50px;
      height: 150px;
      margin-left: 20%;
      margin-top: 20%;
      filter: drop-shadow(0px 30px 15px rgba(48, 47, 47, 0.8));
      transition: 4s;

  }

  .circle .cont {
      opacity: 0;
  }
  
  .circle:hover .cont{
      font-size: xx-small;
      position: relative;
      opacity: 1;
      color: rgb(146, 244, 241);
      width: 150px;
      top: 30%;
      right: -.5em;
      transition: 2s;
  }
  .navbar{
      position: absolute !important;
  }
  .circle:hover{
      width: 150px;
      height: 250px;
      border-radius: 15%;
      transition: 2s;
  }

}

#Skills{
  background-color: black;
  padding-top: 50px;
}

.text-center h2{
  color: dimgray;
  transition: 2s;
}

.col h3{
  color: rgb(154, 221, 222);
  text-align: center;
  font-weight: 900;
  margin-top: 20px;

}

.col p{
  color:gray;
  width: 300px;
  opacity: 0;
  transition: 2s;
}

.col img{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 300px;
  height: 250px;
  margin-top: 30px;
  filter: contrast(120%);
  transition: 2s;
}

.col:hover img , .col:hover h3{
  opacity: 0;
  transition: 2s;
}

.col:hover p{
  color: darkgrey;
  opacity: 1;
  transition: 3s;
  margin-top: -50%;
  text-align: center;
}

.carousel-fade{
  background-color: black;
}

.carousel-fade h3{
  color: grey;
  padding: 10px;
}

.carousel-item img{
  margin-top: 10px;
  margin-left:7.15%;
  max-width: 1300px;
  height: 500px
}

@media (max-width:450px){
  .video-background{
    width: 100%;
    height: 100%;
  }
  
.carousel-fade{
  background-color: black;
}

.carousel-fade h3{
  color: grey;
  padding: 10px;
}

.carousel-item img{
  margin-top: 10px;
  max-width: 100%;
  margin-left: -2px;
  height: 500px
}
}


@media (max-width:1120px){
  .video-background{
    width: 100%;
    height: 100%;
  }
  
  .carousel-fade{
      background-color: black;
  }
  
  .carousel-fade h3{
      color: grey;
      padding: 10px;
  }

  .carousel-item img{
      margin-left: -25px;
      width: fit-content;
      height: 500px;

  }
}

#contact{
  background-color: black;
  color: grey;
}

#contact .head{
  padding: 20px;
  margin-bottom: 30px ;
}

#contact iframe{
  margin-left: 10%;
  margin-bottom: 10%;
  border-radius: 15%;
  box-shadow: 0 0 30px 10px;
}

#contact .mb-3{
  margin-left: 10%;
  margin-right: 20%;
  border-radius: 8%;
  box-shadow: 0 0 10px 5px ;
}

#contact .btn{
  margin-left: 10%;
}


@media (max-width: 992px) {
  .video-background{
    width: 100%;
    height: 100%;
  }

  body {
    overflow-x: hidden; 
  }

  .container {
    max-width: 100%; 
    padding: 0 15px; 
  }
  .course .card {
    flex: 1 1 100%; 
    margin-bottom: 20px;
    margin-left: 0;
  }
  .ac .card{
    margin-left: 0;
  }
  .img-fluid{
    width: 80% !important;
    height: 80% !important;
    margin-left: 10%;
  }
  .hero h1 {
    font-size: 2rem; 
  }

  .hero p {
    font-size: 1rem; 
    max-width: 90%;
  }

  .hero button {
    font-size: 1rem; 
  }

  .course h2 {
    font-size: 1.2rem; 
  }

  .course h3, .course h5 {
    font-size: 1rem; 
  }
  .card-body p{
    font-size: medium;
  }

  #About p{
    width: 90%;
    margin-left: 5%;
    font-size: small;
  }

  .Review-card p{
    font-size: small;
  }

  .carousel-item img{
    margin-left: 0;
    max-width: 100%;
    height: auto;
  }

  #contact iframe, #contact .mb-3, #contact .btn {
    margin-left: 5%;
    margin-right: 5%;
    width: 90%;
  }
  .navbar{
    left: 0;
    right: 0;
  }
  .navbar-brand {
    font-size: 1.25rem;
  }
  .navbar-toggler {
    font-size: 1rem;
  }
  .nav-link {
    font-size: 1rem;
  }

}

@media (max-width: 768px) {
  .video-background{
    width: 100%;
    height: 100%;
  }

  .img-fluid{
    width: 90% !important;
    height: 90% !important;
    margin-left: 5%;
  }
  .hero h1 {
    font-size: 1.5rem; 
  }
  .hero p {
    font-size: 0.9rem; 
  }
  .hero button {
    font-size: 0.9rem; 
  }
  .course h2 {
    font-size: 1rem; 
  }
  .course h3, .course h5 {
    font-size: 0.9rem;
  }
  .card-body p{
    font-size: small;
  }
  #About p{
    width: 90%;
    margin-left: 5%;
    font-size: small;
  }
  .Review-card p{
    font-size: small;
  }
  .navbar-brand {
    font-size: 1rem;
  }
  .navbar-toggler {
    font-size: 0.9rem;
  }
  .nav-link {
    font-size: 0.9rem;
  }
}

@media (min-width: 992px){
  .navbar{
    width: fit-content;
  }
}

@media (max-width: 460px) {
  .navbar {
    width: 100%;
  }
}