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


:root{
  --main-color:#6db4f7;
  --red:#e74c3c;
  --orange:#f39c12;
  --light-color:#888;
  --light-bg:#eee;
  --black:#2c3e50;
  --white:#fff;
  --border:.1rem solid var(--light-bg);
  --bg-color: #c9d6ff;}

*{
  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;
}

::-webkit-scrollbar {
  width: 0;
}

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

::-webkit-scrollbar-thumb {
  background: transparent;
}

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

body{
  background-color: #c9d6ff;
  background:linear-gradient(to right,#e2e2e2,#c9d6ff); 
}

body.dark{
  --light-color:#aaa;
  --light-bg:#333;
  --black:#fff;
  --white:#222;
  --border:.1rem solid var(--white);
  --bg-color: #c9d6ff;
}

section {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}


section.active {
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

/* ----------------- header ----------------- */
.header{
  position: sticky;
  top:0; 
  left:0; 
  right: 0;
  z-index: 1000;
  border-bottom: var(--border);
  background: rgb(233, 231, 231);
}

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

.header .flex .logo img{
  height: 67px;
  width: auto;
}


.header .flex .icons div{
  font-size: 2rem;
  color:var(--black);
  background-color: var(--bg-color);
  border-radius: 3rem;
  height: 4.5rem;
  width: 4.5rem;
  line-height: 4.5rem;
  cursor: pointer;
  text-align: center;
  margin-left: .7rem;
}

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


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

.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: 23rem;
}

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

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

.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 .option-btn, 
.header .flex .profile .btn{
  background: var(--black);
}

.header .flex .profile .option-btn:hover,
.header .flex .profile .btn:hover{
  background: var(--main-color);
  color: var(--black);
  font-weight: 600;
}


/* ----------------- buttons -----------------*/

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

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

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

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

.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;
}

#toggle-btn{
   display: none;
}

/*----------------------sidebar----------------------*/
.side-bar{
  position: fixed;
  top: 0; left: 0;
  width: 10rem;
  background-color: var(--light-bg);
  height: 100vh;
  border-right: var(--border);
  z-index: 1200;
  left: -250px;
}

/* .side-bar #close-btn{
  text-align: right;
  padding: 2rem;
  display: 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;
} */

/* .side-bar #close-btn i:hover{
  background-color: var(--black);
} */

.side-bar .profile{
  padding:3rem 2rem;
  text-align: center;
}

.side-bar .profile .image{
  height: 6rem;
  width: 6rem;
  border-radius: 50%;
  object-fit: contain;
}

.side-bar .navbar a{
  display: block;
  padding: 2rem;
  font-size: 2rem;
}

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

.side-bar .navbar a span{
  color:var(--light-color);
  font-size: 1.5rem;
}

.side-bar .navbar a:hover{
  background-color: #e0dddd;
}

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

.side-bar.active{
  left: 0rem;
}

.sidebar.active ~ .body {
  margin-left: 250px; 
}


/* -----------------navbar -----------------*/
.navbar a{
  display: inline-flex;
  padding: .7rem 1rem 1rem 1.8rem;
  font-size: 2rem;
  
}

.navbar a span{
  color:var(--light-color);
  transition: all .40s ease;
}

.navbar a span:hover{
  color:var(--main-color);
  transform: scale(0.9) translateY(-5px);
}


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

.home-text{
  padding: 15rem 0;
}

.home-text h1 {
  font-size: 4rem;
  margin: 15px 0 15px;
  color: var(--black);
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

.home-text h4 {
  color: var(--light-color);
  font-size: 2.5rem;
  font-weight: 600;
}

.home-img img{
  width: 500px;
  height: auto;
  max-width: 100%;
  padding: 3rem 0;
  filter: drop-shadow(0 2rem 3rem rgba(0, 0, 0, 0.2));
}


/* -----------------about----------------- */
.about h3 {
  font-size: 4rem;
  color:var(--main-color);
  text-transform: capitalize;
  text-align: center;
  padding: 1.5rem;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}

.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: 100%;
  padding: 6rem;
}

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

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

.about .row .content h3{
  font-size: 2.8rem;
  color:var(--black);
  text-transform: capitalize;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
}

.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(--white);
  margin-bottom: .3rem;
}

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


/* -----------------view profile----------------- */

.user-profile {
  width: auto;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 3rem;
  padding-bottom: 5rem;
}


.user-profile .info{
  background-color: var(--black);
  border-radius: 1rem;
  padding: 4rem;
}

.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(--white);
}

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

.user-profile .info .box-container{
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}

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

.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 .flex p{
  color: var(--light-color);
  font-size: 1.7rem;
}



/* ----------------- profile update ----------------- */
.form-container form{
  background-color: var(--black);
  border-radius: .5rem;
  padding: 2rem;
  width: 50rem;
}

.form-container form h3{
  font-size: 2.5rem;
  text-transform: capitalize;
  color: var(--white);
  text-align: center;
}

.form-container form .input-box p{
  font-size: 1.2rem;
  color: var(--main-color);
  padding-top: 1rem;
}

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

.form-container form .input-box label span{
  color: var(--red);
}

.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;
}


/* -----------------courses----------------- */
.courses .box-container{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(23rem, 1fr));
  gap: 3rem;
  justify-content: center;
  align-items: flex-start;
  padding: 8rem 9rem;
}

.courses .box-container .box{
  border-radius: .5rem;
  background-color: var(--white);
  transition: all .40s ease;
  padding: 1rem;
}

.courses .box-container .box:hover{
  color: var(--white);
  transform: translateY(-20px);
}

.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: 30rem;
  object-fit: cover;
  border-radius: .5rem;
  padding: 0 0 2rem 0;
}

.courses .box-container .box .title{
  font-size: 2.6rem;
  color: var(--black);
  padding-bottom: .3rem;
}

.courses .more-btn{
  text-align: center;
  margin: 1rem 10rem;
}

.courses h1{
  font-size: 4rem;
  color:var(--main-color);
  text-transform: capitalize;
  text-align: center;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
}


/* ----------------- mentorship ----------------- */
.mentorship {
  text-align: center;
}

.mentorship .row{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2rem;
}

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

.mentorship .row .image img{
  width: auto;
  height: 60rem;
  padding: 0 0 0 5rem;
  filter: drop-shadow(0 6rem 6rem rgba(0, 0, 0, 0.1));
}

.mentorship .row .content{
  flex: 1 1 55rem;
}

.mentorship .row .content p{
  font-size: 1.8rem;
  line-height: 1.2;
  color: var(--light-color);
  padding: 1.2rem 5rem 1rem 1rem;
  text-align: justify;
}

.mentorship h3{
  font-size: 4rem;
  color:var(--main-color);
  text-transform: capitalize;
  text-align: center;
  padding: 2rem;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.15);
}

.mentorship .row .content h4{
  font-size: 2rem;
  color:var(--black);
  text-transform: capitalize;
  text-align: justify;
}

.mentorship .row .content a{
  margin: 2.5rem 0rem;
}

.mentorship .row .content .inline-btn{
  padding: 1.3rem 1.5rem;
}

/* -----------------contact ----------------- */
.contact {
  padding: 40px 8%;
  background: var(--black);
}

.main-contact {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, auto));
  align-items: center;
  gap: 2rem;
}

.contact-content img{
  height: auto;
  width: 80px;
  margin-bottom: 30px;
  max-width: 100%;
}

.contact-content .cont-details {
  color: var(--main-color);
  font-size: 18px;
  text-decoration: none;
  cursor: pointer;
  margin-bottom: 1rem;
  transition: all .40s ease;
}

.contact-content .cont-details:hover { 
  transform: translateX(-10px);
  color: darkgoldenrod;
}

.contact-content a {
  display: block;
  font-size: 17px;
  color: var(--white);
  font-weight: 600;
  transition: all .40s ease;
  padding: 1rem 1rem;
}

.contact-content a:hover { 
  transform: scale(0.9) translateY(-5px);
  color: #06a8f3;
}

.contact-content a i {
  color: #06a8f3;
  border-radius: 10px;
  border: 1px solid #06a8f3;
  background: var(--text-color);
  padding: 4px;
  margin-right: 5px;
  cursor: pointer;
  transition: all .40s ease;
}

.contact-content a i:hover {
  color: #09a8f1;
  border-radius: 10px;
  border: 1px solid #18a2e2;
  background: var(--text-color);
  transform: scale(0.9) translateY(-5px);
}

.last-text p {
  text-align: center;
  color: var(--black);
  border-top: 1px solid #535169;
  font-size: 14px;
  padding: 30px;
  font-weight: 500;
  letter-spacing: 1px;
  /* background: #06a8f3; */
}


/* ------------------------responsiveness------------------------- */


@media (max-width:1200px){

  body{
     padding-left: 0;
  }

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

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

  .mentorship .row .image img{
    height: 60rem;
  }

  .mentorship .content h4,
  .mentorship .content p {
    text-align: center;
  }

}

@media (max-width:991px){

  html{
    font-size: 55%;
  }

  .mentorship .content h4,
  .mentorship .content p {
    text-align: center;
  }

  .mentorship .row .image img{
    height: 75rem;
  }

}

@media (max-width:768px){

  #search-btn{
     display: inline-block;
  }

  .mentorship .row .image img{
    height: 55rem;
  }

  .mentorship h3, 
  .mentorship .content h4,
  .mentorship .content p {
    text-align: center;
  }

  .about .row .content h3, 
  .about .row .content p{
    text-align: center;
  } 


  .navbar {
    display: none;
  }


  /* .side-bar {
    display: none;
  } */ */

}

@media (max-width:450px){

  html{
     font-size: 50%;
  }

  .flex-btn{
     gap: 0;
     flex-flow: column;
  }

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

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

}