/* general styles */
/* Colors pallet */
:root {
  --hero-text:#378cf4f8;
  --background-body: #090909;
  --dark-gray: #484f5c;
  --white: #fff;
  --hover-active:#007bff;
}

html{
  scroll-behavior: smooth;
}

*{
  margin: 0;
  box-sizing: border-box;
  font-family: 'Rubik', sans-serif;  
}

body{
  background-color:var(--background-body); 
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  overflow-x: hidden;  
}

/* Styles for back to top button */
#btn-back-to-top {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: none;
  z-index: 2200;
}

/* Styles for main headings */
h1{
  text-transform: uppercase;
}
    
h2,h3{
  text-transform:uppercase;
  font-weight: 700;
}

/* Styles for hover effect on active elements */
.active:hover{
  transform: scale(1.06)
}
/*end general styles */

/* Styles for authentication pages */
/* Styles for sign up and login */
.authentication-title{
  color:var(--background-body);
}

#account-body{
 background-image: url('https://res.cloudinary.com/dgzrzlcs4/image/upload/c_fill,q_100,w_1393/v1676765565/medxsi6zd4lih6pjn6xi.webp');
 background-position: center;
 background-repeat: no-repeat;
 background-size: cover;
 height: 100vh;
 width: 100vw;

}

#my{
  background-image: url('https://res.cloudinary.com/dgzrzlcs4/image/upload/v1674088519/static/images/greg-rosenke-mBCsft4274I-unsplash-flow.f84064bd479a.jpg');
}

.account{
  color: #01092def;

}
/* end sign up and login styles  */

/* profile delete styles */
.delete-profile{
  max-width: 350px;
}
/* end profile delete styles */
/* end authentication pages styles */

/* nav-bar styles */
.navbar-light .navbar-nav .nav-link{
  color: #ffffff;
}

.navbar-light .navbar-nav .nav-link:hover{
  color: #c4deef;
  font-weight: 700;
  transform: scale(1.05)
}
.navbar-light .navbar-nav .active>.nav-link{
  color: #ffffff;
}

.navbar .dropdown-item:hover {
  background-color:#131416 ;
} 

.navbar-light .navbar-brand {
  color: #ffffff;
  text-transform: uppercase;
  font-weight: 800;
}

.navbar-light .navbar-brand:hover{
  color: #c4deef;
  transform: scale(1.1)
}

#logo{
  color: #378cf4f8;
    
}
/* end nav-bar styles */

/* django messages */
#msg{
  position: absolute;
  left: 25%;
  right: 25%;
  z-index: 100;
}
/* home page styles-------------------*/
/* Hero section-------------------- */
#hero{
  height: 100vh;
}
.hero-text{
  color: var(--hero-text);
  font-size: 3.5rem;
  text-transform: uppercase;
}

.headline {
  left: 90px;  
} 
.clipped {
  clip-path: polygon(50% 0, 100% 0, 100% 100%, 0% 100%);
  background-image: url('https://res.cloudinary.com/dgzrzlcs4/image/upload/c_fit,w_900/v1675369377/static/images/greg-rosenke-mBCsft4274I-unsplash-flow.f042ad021dc9.webp');
  background-position: center;
  background-size: cover;
  height: 100%; 
}

/* animation for hero image */
.fadeIn {
  animation-name: fadeIn;
  animation-duration: 1.8s;
  animation-timing-function: ease-in-out;
  visibility: visible !important;
}

@keyframes fadeIn {
  0% {
    opacity: 0.0;
  }
 
  100% {
    opacity: 1;
  }
}
/* end animation styles */
/* End Hero section */

/* featurd section styles  */
.list-display li {
  margin-bottom:.4rem;
  font-size:1.1rem;
}

.list-checkmarks {
  padding-left:1.5rem;
}

.list-checkmarks li {
  list-style-type:none;
  padding-left:1rem;
}

.quote-card {
  background-color:#040831;
  border-radius: 15px;
 
}
/* end featured section styles */

/* contact forms styles */
.formlabel{
  color: #ffffff;
}

.formlabel  a{
  color: #378cf4f8;
  font-weight: bold;
}

.contact{
  background-color: #01092def;
}
/* end contact form styles */
/* end  home page styles */

/* blog  styles */
#blog-body{
  margin-top: -10px;
}
/* end blog styles */

/*  profile page syles */
#top-plate{
  background-color: rgb(14, 14, 88);
  height: 45px;
  display: flex; 
  flex-wrap: wrap;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem; 
  border-radius: .25rem;
} 

.my-profile-card{
  height: 520px;
  overflow: auto;
}

.small-profile-card{
  overflow:hidden;
  height: 520px;
}
/* end profile page syles */

/* set role page syles */
.card-img-top {
  width: 100%;
  height: 30vh;
  object-fit: cover;
}
/* end set role page syles */

/* team cards styles */
.social-link {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #dde1e7;
  border-radius: 50%;
  transition: all 0.3s;
  font-size: 1.2rem;
}

.social-link:hover{
  background: rgb(12, 12, 14);
  text-decoration: none;
  color: rgb(20, 103, 228);
}
/*  end team cards styles */

/* background img styles */
#mycard{
  background-color: rgb(14, 39, 60);   
}
/* end  background img styles */

/* learning categories styles */
.main-content {
	padding-top: 40px;
	padding-bottom: 100px;
}

.flex-center {
	align-items: center;
}

#accordion .accordion-card {
	background: transparent;
	border: 0;
	margin-bottom: 30px;
}

#accordion .accordion-card__header {
	padding: 15px;
	border-radius: 5px;
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

#accordion .accordion-card__header.collapsed .drop-icon {
	transform: rotate(0deg);
}

#accordion .accordion-card__header h5 {
	display: flex;
	align-items: center;
}

#accordion .accordion-card__header h5 span {
	margin-left: 10px;
}

#accordion .accordion-card__header .drop-icon {
	margin-right: 15px;
	transform: rotate(180deg);
	transition: all 0.2s;
}

#accordion .accordion-card__body {
	padding: 25px;
	border-radius: 5px;
	box-shadow: 0 2px 25px -3px rgba(0, 0, 0, 0.1);
}

/* mentor category card section */
.user-info {
	display: flex;
	align-items: center;
}
.user-info__img img {
	margin-right: 15px;
	height: 55px;
	width: 55px;
	border-radius: 45px;
	border: 3px solid rgb(10, 10, 10);
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
/*  end mentor category card section*/
/* end learning categories styles */

/* media queries */
@media screen and (max-width: 900px){

  /*  hero section */
  .headline {
    left: 40px;
   
  } 
  .hero-text{
    font-size: 2.5rem;
  }
}

/* 404,403,500 page styles */
#main{
  width: 100%;
  height: 100vh;
  text-align: center;
}

.fof{
  display: table-cell;
  vertical-align: middle;
}

.fof h1{
  display: inline-block;
  padding-right: 12px;
  animation: type .5s alternate infinite;
}

@keyframes type{
  from{box-shadow: inset -3px 0px 0px #f19304;}
  to{box-shadow: inset -3px 0px 0px transparent;}
}

@media screen and (max-width: 650px){
  /* hero section */
  .clipped {
    background-image: url('https://res.cloudinary.com/dgzrzlcs4/image/upload/c_scale,h_420,w_630/v1674088519/static/images/greg-rosenke-mBCsft4274I-unsplash-flow.f84064bd479a.webp');
    clip-path: none;
    height: 40%; 
  }

  h1{
    font-size: 2rem;
  }

  /* account pages background */
  #account-body{
    background-image: url('https://res.cloudinary.com/dgzrzlcs4/image/upload/c_fill,h_900,q_100,w_670/v1676765565/medxsi6zd4lih6pjn6xi.webp');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
 
  }
}