/* 
* Template Name             : Bondi
* Start Date                : 7-3-2022 7:00 AM
* End Date                  : 17-3-2022 2:00 PM
* Last Update               : 17-3-2022 2:00 PM
* Version                   : 1.0.0
* URL                       : https://mohammedmodather2020.github.io/bondi-ui
* GitHub URL                : https://github.com/MohammedModather2020/bondi-ui.git
* Contact US                : mohammedmodather144@gmail.com
*/
/* 
* 1- General Style
   1.0- Universal Selector
   1.1- Root Element
   1.2- Body Element
* 2- Section Style
   2.0- NavBar
   2.1- Landing 
   2.2- Features
   2.3- Works
   2.4- Stuff
   2.5- Teams
   2.6- Projects
   2.7- Blogs
   2.8- Subscribe
   2.9- Footer
* 3- Common Style
   3.0- Button Primary
   3.1- Form Control
   3.2- PlaceHolder
   3.3- Section Title
   3.4- Scroll Top 
   3.5- Scroll Bar 
   3.6- Loading 
*/
/* 
/** 1- Genral Style */
/**  1.0- Universal Selector */
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
/** 1.1- Root Element */
:root{
  scroll-behavior: smooth;
  overflow-x: hidden !important;
}
/** 1.2- Body Element */
body{
  --darkColor: #19283f;
  --greenColor: #33d1cc;
  --redColor: #ff3150;
  --yellowColor: #ffc400;
  --sectionColor: #eff7fa;
  font-family: 'Roboto', sans-serif;
  overflow-x: hidden !important;
}
/** 2- Section Style */
/**  2.0- Navbar */
.navbar{
  background-color: var(--darkColor);
}
.navbar .navbar-nav .nav-link{
  color: #FFF;
  font-size: .9rem;
}
.navbar .navbar-nav .nav-item.active .nav-link,
.navbar .navbar-nav .nav-item:hover .nav-link,
.navbar .navbar-nav .nav-item:focus .nav-link{
  color: var(--greenColor);
}
.navbar .nav-search svg{
  cursor: pointer;
}
.navbar .nav-search .form-control{
  left: -125px;
  right: 0;
  top: 120%;
  z-index: 99999;
  transform-origin: center;
  opacity: 0;
  visibility: hidden;
  width: 250px;
  border-radius: 1rem;
  height: 45px;
  -webkit-border-radius: 1rem;
  -moz-border-radius: 1rem;
  -ms-border-radius: 1rem;
  -o-border-radius: 1rem;
  transform: scale(0);
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  -o-transform: scale(0);
  transition: opacity .5s , visibility , .5s transform .5s;
  -webkit-transition: opacity .5s , visibility , .5s transform .5s;
  -moz-transition: opacity .5s , visibility , .5s transform .5s;
  -ms-transition: opacity .5s , visibility , .5s transform .5s;
  -o-transition: opacity .5s , visibility , .5s transform .5s;
}
.navbar .nav-search::after{
  content: "";
  position: absolute;
  bottom: -10px;
  opacity: 0;
  visibility: hidden;
  left: 50%;
  border-style: solid;
  border-color: white transparent;
  border-width: 0 15px 15px 15px;
  transform: translateX(-50%) scale(0);
  -webkit-transform: translateX(-50%) scale(0);
  -moz-transform: translateX(-50%) scale(0);
  -ms-transform: translateX(-50%) scale(0);
  -o-transform: translateX(-50%) scale(0);
  transition: opacity .5s , visibility , .5s transform .5s;
  -webkit-transition: opacity .5s , visibility , .5s transform .5s;
  -moz-transition: opacity .5s , visibility , .5s transform .5s;
  -ms-transition: opacity .5s , visibility , .5s transform .5s;
  -o-transition: opacity .5s , visibility , .5s transform .5s;
}
.navbar .nav-search:hover::after,
.navbar .nav-search:hover .form-control{
  visibility: visible;
  opacity: 1;
}
.navbar .nav-search:hover::after{
  transform: translateX(-50%) scale(1);
  -webkit-transform: translateX(-50%) scale(1);
  -moz-transform: translateX(-50%) scale(1);
  -ms-transform: translateX(-50%) scale(1);
  -o-transform: translateX(-50%) scale(1);
}
.navbar .nav-search:hover .form-control{
  transform: scale(1);
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
}
/** 2.1- Landing */
.landing{
  background-color: var(--darkColor);
  min-height: calc(100vh);
}
.landing .title{
  color: var(--sectionColor);
}
.landing .desc{
  font-size: .9rem;
  width: 55%;
  line-height: 1.7;
  margin-block: 1rem;
}
/** 2.2- Features */
.features .feature .icon{
  height: 200px;
}
.features .feature .icon svg{
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
}
.features .feature .icon svg:first-of-type{
  font-size: 12rem;
  color: var(--sectionColor);
}
.features .feature .icon svg:last-of-type{
  color: var(--greenColor);
}
.features .feature .title{
  font-size: 1.4rem;
  color: var(--yellowColor);
}
.features .feature .desc{
  font-size: .85rem;
}
/** 2.3- Works */
.works{
  background-color: var(--sectionColor);
}
.works .list-item li{
  font-size: .9rem;
  cursor: pointer;
}
.works .list-item li.active{
  background-color: var(--redColor);
  color: var(--sectionColor);
  padding: .5rem 2rem;
  border-radius: .5rem;
  -webkit-border-radius: .5rem;
  -moz-border-radius: .5rem;
  -ms-border-radius: .5rem;
  -o-border-radius: .5rem;
}
.works .list-item li:not(.active):hover{
  color: var(--redColor);
}
.works .work{
  padding: .5rem;
  border-radius: .4rem;
  -webkit-border-radius: .4rem;
  -moz-border-radius: .4rem;
  -ms-border-radius: .4rem;
  -o-border-radius: .4rem;
}
.works .work .image{
  overflow: hidden;
  position: relative;
}
.works .work .image img{
  border-radius: .4rem;
  -webkit-border-radius: .4rem;
  -moz-border-radius: .4rem;
  -ms-border-radius: .4rem;
  -o-border-radius: .4rem;
}
.works .work .image::before{
  position: absolute;
  content: attr(data-work);
  font-weight: bold;
  text-transform: uppercase;
  width: calc(100%);
  height: calc(100%);
  background-color: rgb(51 209 204 / 76%);
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  color: white;
  transform: translateX(calc(-100% - 8px));
  -webkit-transform: translateX(calc(-100% - 8px));
  -moz-transform: translateX(calc(-100% - 8px));
  -ms-transform: translateX(calc(-100% - 8px));
  -o-transform: translateX(calc(-100% - 8px));
  border-radius: .4rem;
  -webkit-border-radius: .4rem;
  -moz-border-radius: .4rem;
  -ms-border-radius: .4rem;
  -o-border-radius: .4rem;
  transition:  transform.5s ease-in-out ;
  -webkit-transition:  transform.5s ease-in-out ;
  -moz-transition:  transform.5s ease-in-out ;
  -ms-transition:  transform.5s ease-in-out ;
  -o-transition:  transform.5s ease-in-out ;
}
.works .work:hover .image::before{
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
  -webkit-transform: translateX(0);
  -moz-transform: translateX(0);
  -ms-transform: translateX(0);
  -o-transform: translateX(0);
}
.works .b-primary{
  font-size: .85rem;
  padding-block: .7rem;
  padding-inline: 1.5rem;
}
/** 2.4- Stuff */
.stuff .container > .desc{
  width: 55%;
  line-height: 1.8;
  font-size: .95rem;
}
.stuff .text .desc{
  font-size: .95rem;
  line-height: 1.8;
}
.stuff .text .b-primary a{
  font-size: .85rem;
}
/** 2.5- Teams */
.teams{
  background-color: var(--sectionColor);
}
.teams .title{
  color: var(--yellowColor);
}
.teams .container > .desc{
  font-size: .85rem;
  line-height: 1.8;
  width: 55%;
}
.teams .team .name{
  font-size: 1.3rem;
  background-color: var(--greenColor);
  padding-block: .7rem;
}
.teams .team .desc{
  line-height: 1.8;
  font-size: .8rem;
  text-align-last: center;
  text-align: justify;
  padding-inline: 1rem;
  padding-bottom: .7rem;
}
/** 2.6- Projects */
.projects{
  background-color: var(--darkColor);
}
.projects .desc{
  font-size: .9rem;
}
/** 2.7- Blogs */
.blogs .card{
  color: #19283f;
  box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
  border: 0 !important;
}
.blogs .card .time{
  font-size: .8rem;
  margin-top: -.3rem;
  display: block;
}
.blogs .card .card-title{
  font-size: .9rem;
  font-weight: bolder;
}
.blogs .card .desc{
  font-size: .8rem;
  color: #888;
  line-height: 1.8;
}
/** 2.8- Subscribe */
.subscribe{
  background-color: var(--yellowColor);
}
.subscribe .title{
  font-size: 1.2rem;
}
.subscribe input{
  border: none;
  border-bottom: 1px solid white;
}
.subscribe input:focus{
  outline: none;
}
.subscribe .btn.b-primary{
  background-color: var(--redColor);
}
/** 2.9- Footer */
.footer{
  background-color: var(--darkColor);
}
.footer .desc{
  line-height: 1.8;
  font-size: .85rem;
}
.footer .copyright a{
  text-decoration: none;
  font-size: .9rem;
}
.footer .copyright a:first-of-type{
  color: var(--greenColor);
}
.footer .copyright a:last-of-type{
  color: var(--yellowColor);
}
.footer .links li a{
  text-decoration: none;
  color: #ccc;
  display: block;
  margin-bottom: .5rem;
  font-size: .9rem;
}
.footer .contact-us .btn.b-primary{
  background-color: var(--redColor);
}
.footer .contact-us .btn.b-primary a{
  font-size: .9rem;
}
.footer .contact-us .social-links li svg{
  width: 25px;
  height: 25px;
}
.footer .contact-us .social-links li svg.facebook{
  background-color: #1877f2;
}
.footer .contact-us .social-links li svg.twitter{
  background-color: #1da1f2;
}
.footer .contact-us .social-links li svg.linkedin{
  background-color: #0077b5;
}
.footer .contact-us .social-links li svg.whatsapp{
  background-color: rgb(37, 211, 102);
}
.footer .contact-us .social-links li svg.instagram{
  background-color: rgb(228, 64, 95);
}
.footer .contact-us .social-links li svg.youtube{
  background-color: #ff0000;
}
/** 3- Common Style */
/**  3.0- Button Primary */
.b-primary{
  background-color: var(--yellowColor);
  color: #FFF;
  font-family: inherit;
  transition: opacity .5s ease-in-out;
  -webkit-transition: opacity .5s ease-in-out;
  -moz-transition: opacity .5s ease-in-out;
  -ms-transition: opacity .5s ease-in-out;
  -o-transition: opacity .5s ease-in-out;
}
.b-primary:hover{
  opacity: .9;
  color: #FFF;
}
/** 3.1- Form Control */
.form-control{
  border-color: transparent;
}
.form-control:focus{
  box-shadow: unset;
  border-color: var(--yellowColor);
}
/** 3.2 PlaceHolder */
::placeholder{
  font-size: .7rem;
  color: #eee !important;
}
/** 3.3- Section Title */
.section-title::after{
  position: absolute;
  content: "";
  width: 120px;
  height: 2px;
  background-color: var(--greenColor);
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -moz-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  -o-transform: translateX(-50%);
}
.section-title .desc{
  font-size: .85rem;
}
/** 3.4- Scroll Top */
#scroll-top{
  display: none;
  width: 40px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  color: white;
  background-color: var(--greenColor);
  position: fixed;
  z-index: 9999;
  right: 15px;
  bottom: 10px;
  cursor: pointer;
  border-radius: 50%;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -ms-border-radius: 50%;
  -o-border-radius: 50%;
}
#scroll-top svg{
  line-height: 35px;
}
#scroll-top:hover{
  background-color:var(--greenColor);
}
/** 3.5- Scroll Bar */
::-webkit-scrollbar {
  background-color: var(--darkColor);
  width: 8px;
}
::-webkit-scrollbar-thumb {
  background-color: var(--greenColor);
  border-radius: 7px
}
::-moz-scrollbar {
  background-color: var(--darkColor);
  width: 8px;
}
::-moz-scrollbar-thumb {
  background-color: var(--greenColor);
  border-radius: 7px
}
::-o-scrollbar {
  background-color: var(--darkColor);
  width: 8px;
}
::-o-scrollbar-thumb {
  background-color: var(--greenColor);
  border-radius: 7px;
}
/** 3.6- Loading */
.loading-overlay{
  color: white;
  position: absolute;
  top: 0px;
  left: 0px;
  background: linear-gradient(105deg,rgba(51,204,197,1) 0%, rgba(8,141,195,1) 100%);
  width: 100%;
  height: 100%;
  z-index: 99999;
}
.spinner {
  top: 25%;
  margin: 100px auto;
  width: 40px;
  text-align: center;
  font-size: 14px;
  height: 40px;
  position: relative;
}
.cube1, .cube2 {
  background-color: #ffffff;
  width: 15px;
  height: 15px;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-animation: sk-cubemove 1.8s infinite ease-in-out;
  animation: sk-cubemove 1.8s infinite ease-in-out;
}
.cube2 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}
@-webkit-keyframes sk-cubemove {
  25% { -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5) }
  50% { -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg) }
  75% { -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5) }
  100% { -webkit-transform: rotate(-360deg) }
}
@keyframes sk-cubemove {
  25% { 
    transform: translateX(42px) rotate(-90deg) scale(0.5);
    -webkit-transform: translateX(42px) rotate(-90deg) scale(0.5);
  } 50% { 
    transform: translateX(42px) translateY(42px) rotate(-179deg);
    -webkit-transform: translateX(42px) translateY(42px) rotate(-179deg);
  } 50.1% { 
    transform: translateX(42px) translateY(42px) rotate(-180deg);
    -webkit-transform: translateX(42px) translateY(42px) rotate(-180deg);
  } 75% { 
    transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
    -webkit-transform: translateX(0px) translateY(42px) rotate(-270deg) scale(0.5);
  } 100% { 
    transform: rotate(-360deg);
    -webkit-transform: rotate(-360deg);
  }
}