/***** general rules *****/
*{padding: 0;margin: 0;box-sizing: border-box;font-family: "Merriweather", serif;}

a{text-decoration: none;}

button{cursor: pointer;}
/***** general rules *****/
/***** my own framework *****/
/* [1]overlay */
.overlay{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(34, 34, 34 , .5);
}

/* [2]section heading */
.section{padding: 100px 0;}

.section .title-container{text-align: center;font-size: 30px;text-transform: capitalize;}

.section .title-container div{
  margin: 10px auto 50px;
  height: 5px;
  width: 150px;
  border-radius: 10px;
  background-color: #c77dff
}

/* [3]content container */
.content-container{max-width: 1200px;margin: auto;text-align: center;}

.content-container .inner-div{
  width: 31%;
  display: inline-block;
  position: relative;
  overflow: hidden;
  margin: 10px;
}

/* [4]animated overlay */
.animated-overlay{border: 1px solid #7209b7;border-radius: 5px;padding: 20px;transition: .5s;}

.animated-overlay::after{
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  background-color: rgba(199, 125, 255, .3);
}

.animated-overlay *{position: relative;z-index: 2;}

.animated-overlay:hover::after{transition: .5s;width: 100%;height: 100%;}

/* [5]hero img  */
.hero-img{position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);}
/***** my own framework *****/
/***** navbar section *****/
.navbar{
  width: 100%;
  height: 70px;
  background-color: rgba(114, 9, 183, .5);
  padding: 10px 20px;
  text-transform: capitalize;
  position: fixed;
  top: 0;
  z-index: 100;
}

/* navbar search */
.navbar .navbar-search{float: left;width: 20%;}

.navbar .navbar-search a{
  color: #fff;
  font-size: 25px;
  margin-right: 10px;
  position: relative;
  top: 5px;
}

.navbar .navbar-search .search-bar{position: relative;}

.navbar .navbar-search .search-bar input{
  width: 240px;
  padding: 5px 5px 5px 40px;
  height: 30px;
  border-radius: 20px;
  border: none;
}

.navbar .navbar-search .search-bar input:focus{outline: none}

.navbar .navbar-search .search-bar i.fa-magnifying-glass{
  margin-right: 10px;
  position: absolute;
  right: 200px;
  top: 5px;
  font-size: 14px;
  color: rgba(114, 9, 183, .5);
}

/* navbar links */
.navbar .navbar-links{float: right;width: 35%;margin: 10px -20px 0 45%;}

.navbar .navbar-links li{display: inline-block;font-weight: bold;}

.navbar .navbar-links li a{color: #fff;position: relative;margin: 10px;}

.navbar .navbar-links li a::after{
  content: '';
  opacity: 0;
  width: 0;
  height: 2px;
  background-color:#c77dff;
  position: absolute;
  left: 0;
  bottom: -5px;
  transition: .5s;
}

.navbar .navbar-links li a:hover:after{width: 100%;opacity: 1;}

.navbar .navbar-links .list .list-dropdown{
  visibility: hidden;
  opacity: 0;
  z-index: 5;
  background-color: #fff;
  color: #7209b7;
  position: absolute;
  top: 50px;
  padding: 0 5px;
  border-radius: 10px;
  transition: .5s;
  width: 150px;
  height: 150px;
}

.navbar .navbar-links .list:hover .list-dropdown{visibility: visible;opacity: 1;}

.navbar .navbar-links .list .list-dropdown li{display: block;position: relative;margin: 20px 0;}

.navbar .navbar-links .list .list-dropdown li a{color: #7209b7;}
/***** navbar section *****/
/***** header section *****/
.header{position: relative;height: 100vh;text-align: center;overflow: hidden;}

.header video{object-fit: cover;z-index: -1;}

.header .header-overlay .header-container h1{text-transform: uppercase;font-size: 48px;word-spacing: 5px;color: #fff;}

.header .header-overlay .header-container p{margin: 10px 0;line-height: 20px;font-size: 14px;color: #adadad;}

.header .header-overlay .header-container button{
  text-transform: capitalize;
  padding: 15px;
  border-radius: 10px;
  border: none;
  font-size: 18px;
  margin: 3px;
  transition: .5s;
}

.header .header-overlay .header-container button:hover{background-color: rgba(255, 255, 255, .5)}

.header .header-overlay .header-container button.special-button{background-color: #7209b7;color: #fff;}

.header .header-overlay .header-container button.special-button:hover{background-color: rgba(114, 9, 183, .5);}
/***** header section *****/
/***** features section *****/
.features .features-container .feature{text-transform: capitalize;}

.features .features-container .feature::after{top: 0;left: 0;}

.features .features-container .feature *{position: relative;z-index: 2;}

.features .features-container .feature:hover *{color: #7209b7;transition: .5s;}

.features .features-container .feature i{color: #c77dff;font-size: 30px;}

.features .features-container .feature h3{margin-top: 20px;font-size: 25px;}

.features .features-container .feature:hover h3{color: #fff;}

.features .features-container .feature p{color: #585858;margin: 20px 0;font: normal 300 15px "Merriweather", serif;line-height: 20px;}

.features .features-container .feature:hover p{color: black;}

.features .features-container .feature a{color: #c77dff;font-weight: bold;}
/***** features section *****/
/***** gallery section *****/
.gallery{background-color: #7209b7;}

.gallery .section-title{color: #fff;}

.gallery .gallery-overlay{display: inline-block;}

.gallery .gallery-overlay .gallery-img{width: 300px;height: 300px;position: relative;margin: 10px;}

.gallery .gallery-overlay .gallery-img img , .gallery .gallery-overlay .gallery-img .gallery-text{width: 100%;height: 100%;border-radius: 10px;}

.gallery .gallery-overlay .gallery-img .gallery-text{
  display: none;
  background-color: rgba(34, 34, 34 , .5);
  position: absolute;
  top: 0px;
  left: 0px;
}

.gallery .gallery-overlay .gallery-img:hover .gallery-text{display: block;}

.gallery .gallery-overlay .gallery-img .gallery-text .text-center{overflow: hidden;}

.gallery .gallery-overlay .gallery-img .gallery-text .text-center h3{font-size: 30px;color: #adadad;text-transform: uppercase;}

.gallery .gallery-overlay .gallery-img .gallery-text .text-center p{font-size: 14px;color: #fff;margin: 10px auto 20px;}

.gallery .gallery-overlay .gallery-img .gallery-text .text-center a{
  width: 50px;
  background-color: #fff;
  color: #adadad;
  display: inline-block;
  padding: 5px;
  border-radius: 10px;
  font-size: 20px;
}
/***** gallery section *****/
/***** offer section *****/
.offers .offers-container .offer{text-align: left;height: auto;transition: .5s;}

.offers .offers-container .offer::after{top: 0;left: 0;}

/* offers left side */
.offers .offers-container .offer .left{float: left;width: 10%;font-size: 30px;color: #c77dff;}

.offers .offers-container .offer:hover .left{color: #7209b7;}

/* offers right side */
.offers .offers-container .offer .right{float: right;width: 85%;}

.offers .offers-container .offer .right h3{font-size: 20px;margin-bottom: 15px;line-height: 30px;text-transform: capitalize;}

.offers .offers-container .offer:hover .right h3{color: #7209b7;}

.offers .offers-container .offer .right p{color: #585858;}

.offers .offers-container .offer:hover .right p{color: black}
/***** offer section *****/
/***** why choose us section *****/
.why-choose-us{overflow: hidden;}

.why-choose-us > div{float: left;}

/* why choose us left side */
.why-choose-us .left{text-align: left;width: 60%;}

.why-choose-us .left .title-container{text-align: left;}

.why-choose-us .left .title-container div{margin: 10px 0 50px;}

.why-choose-us .left p{margin: 20px 0;}

.why-choose-us .left .reasons .reason{margin-bottom: 20px;}

.why-choose-us .left .reasons .reason i{color: #7209b7;margin-right: 5px;}

.why-choose-us .left .reasons .reason span{color: #585858;font-size: 14px;}
/* why choose us right side */
.why-choose-us .right {width: 40%;}

.why-choose-us .right .img-container img{width: 400px;height: 500px;border-radius: 10px;}

.why-choose-us .right .bullets{text-align: right;position: relative;left: 35px;margin-top: 10px;}

.why-choose-us .right .bullets div{
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color:#adadad;
  float: left;
  margin: 5px;
  transition: .5s;
  cursor: pointer;
}

.why-choose-us .right .bullets div:hover , .why-choose-us .right .bullets div.checked{background-color:#7209b7;}
/***** why choose us section *****/
/***** statistics section *****/
.stats{background: url(./images/background-images/background-statistics.jpg) center / cover no-repeat fixed;height: 50vh;position: relative;}

.stats .stats-overlay .content-container{color: #fff;position: relative;top: 40%;text-transform: capitalize;}

.stats .stats-overlay .content-container .stat{width: 23%;margin: 0 10px;}

.stats .stats-overlay .content-container .stat i{color: #c77dff;font-size: 40px;}

.stats .stats-overlay .content-container .stat h3{font-size: 20px;margin: 15px 0 5px;}

.stats .stats-overlay .content-container .stat p{font-size: 14px}
/***** statistics section *****/
/***** pricing section *****/
.pricing{font-weight: bold;text-transform: capitalize;}

.pricing .pricing-container .pricing-offer::after{width: 100%;}

.pricing .pricing-container .pricing-offer h3{text-transform: uppercase;}

.pricing .pricing-container .pricing-offer:hover h3{color: #7209b7;}

.pricing .pricing-container .pricing-offer .price{
  width: 100px;
  height: 100px;
  padding: 5px;
  border-radius: 50%;
  border: 2px solid #c77dff;
  margin: 20px auto;
  position: relative;
}

.pricing .pricing-container .pricing-offer:hover .price{border: 2px solid #7209b7;} 

.pricing .pricing-container .pricing-offer .price .price-container h4{font-size: 30px;}

.pricing .pricing-container .pricing-offer .price .price-container sub{font-size: 15px;text-transform: uppercase;}

.pricing .pricing-container .pricing-offer p{margin-bottom: 20px;font-size: 14px}

.pricing .pricing-container .pricing-offer button{
  background-color:#f0f0f0;
  border: 2px solid #7209b7;
  padding: 5px 15px;
  border-radius: 10px;
  text-transform: capitalize;
}

.pricing .pricing-container .pricing-offer button:hover , .pricing .pricing-container .pricing-offer .price:hover{
  background-color: #7209b7;
  color: #fff;
  transition: .5s;
}
/***** pricing section *****/
/***** best employees section *****/
.best-employees{
  background: url(./images/background-images/background-best-employees.jpg) center / cover no-repeat fixed;
  height: 50vh;
  position: relative;
  text-transform: capitalize;
}

.best-employees .best-employees-overlay .content-container .employer-profile{width: 48%;padding-top: 150px;text-align: left;}

.best-employees .best-employees-overlay .content-container .employer-profile .main-info{margin-bottom: 100px;}

.best-employees .best-employees-overlay .content-container .employer-profile .main-info .left{width: 25%;float: left;}

.best-employees .best-employees-overlay .content-container .employer-profile .main-info .left img{width: 75px;height: 75px;border-radius: 50%;}

.best-employees .best-employees-overlay .content-container .employer-profile .main-info .right{width: 75%;float: right;font-weight: bold;}

.best-employees .best-employees-overlay .content-container .employer-profile .main-info .right h3{
  color: #fff;
  font-size: 30px;
  margin: 0 0 15px -50px;
}

.best-employees .best-employees-overlay .content-container .employer-profile .main-info .right p{
  color: #c77dff;
  font-size: 20px;
  margin-left: -50px;
}

.best-employees .best-employees-overlay .content-container .employer-profile p{font-size: 15px;color: #adadad;line-height: 20px;}
/***** best employees section *****/
/***** our team section *****/
.team .content-container .team-member{background-color: #f0f0f0;border: 0;}

.team .content-container .team-member::after{width: 100%;}

/* our team team-overlay */
.team .content-container .team-member .team-overlay img{width: 100%;height: 100%;border-radius: 5px;}

.team .content-container .team-member .team-overlay .team-overlay-links{
  position: absolute;
  display: none;
  top: 0;
  left: 0;
  width: 100%;
  height: 98.5%;
  background-color: rgba(34, 34, 34 , .5);
  border-radius: 5px;
}

.team .content-container .team-member:hover .team-overlay .team-overlay-links{display: block;}

.team .content-container .team-member .team-overlay .team-overlay-links a{
  display: block;
  padding: 10px;
  color: #fff;
  background-color: #7209b7;
  border-bottom: 1px solid #fff;
  font-size: 20px;
  width: fit-content;
  height: fit-content;
}

.team .content-container .team-member .team-overlay .team-overlay-links .first-of-type{border-radius: 5px 5px 0 0;}

.team .content-container .team-member .team-overlay .team-overlay-links .last-of-type{border-radius: 0 0 5px 5px;border-bottom: none;}

/* our team team-info */
.team .content-container .team-member .team-info h3{font-size: 20px;margin: 10px 0;text-transform: capitalize;}

.team .content-container .team-member:hover .team-info h3{color: #fff;transition: .5s;}

.team .content-container .team-member .team-info p{font-size: 15px;margin: 10px 0;text-transform: uppercase;color: #585858;}

.team .content-container .team-member:hover .team-info p{color: #7209b7;transition: .5s;}
/***** our team section *****/
/***** recent news section *****/
.recent-news .content-container .new{text-transform: capitalize;}

.recent-news .content-container .new::after{width: 100%;}

.recent-news .content-container .new img{width: 250px;height: 250px;border-radius: 5px;}

.recent-news .content-container .new .social-media-info{margin: 15px auto;}

.recent-news .content-container .new .site-info{margin: 0 5px;}

.recent-news .content-container .new h3{font-size: 20px;margin: 10px auto;}

.recent-news .content-container .new:hover h3{color: #fff;transition: .5s;}

.recent-news .content-container .new p{
  font-size: 15px;
  line-height: 15px;
  color: #585858;
  margin: 20px auto;
  word-spacing: 2px;
}

.recent-news .content-container .new a{color: #c77dff;}

.recent-news .content-container .new:hover .site-info span ,
.recent-news .content-container .new:hover p , 
.recent-news .content-container .new:hover > a{color: #7209b7;transition: .5s;}
/***** recent news section *****/
/***** footer section *****/
.footer{background-color: rgba(199, 125, 255,.5);padding: 15px 0;}

.footer img{width: 250px;height: 250px;border-radius: 20px;margin-bottom: 30px;}

.footer .social-media a{
  padding: 10px;
  margin-right: 5px;
  border-radius: 50%;
  font-size: 25px;
  color: #fff;
  background-color: rgba(114, 9, 183, .5);
}

.footer .social-media a:hover{background-color: rgb(114, 9, 183);transition: .5s;}

.footer p{text-transform: uppercase;margin-top: 20px;font-size: 12px;}
/***** footer section *****/