/* ===============================
   Developed by Zemzem Labs Team
   Version: 1.0.0 | Responsive

   🌐 https://www.zemzemlabs.com
================================= */
:root {
  --primary: #5aa779;
  --accent: #62bf87;
  --bg: #fefefe;
  --nav-bg: linear-gradient(to right, #f7ecff50, #ffffff);
  --hero-bg: linear-gradient(to right, #dbb7ff50, #fbfbfb);
  --footer-bg: linear-gradient(to right, #8bffb150, #ebffe0);
  --hero-border-bottom: rgb(224, 224, 224);
  --black: #121212;

  --nav-height: 60px;
  --transition: all 300ms ease-in-out;
  --card: #ffffff;
  --card-border: #e7e7e7;
  --card-shadow: 0 2px 20px rgb(248, 248, 248);
  --container: 950px;
}

/* Dark Mode */
.darkmode {
  --primary: #5aa779;
  --bg: #2a2a2a;
  --nav-bg: linear-gradient(to right, #36484b50, #2a2a2a);
  --hero-bg: linear-gradient(to right, #36484b50, #2a2a2a);
  --footer-bg: linear-gradient(to right, #36484b50, #2a2a2a);
  --hero-border-bottom: rgb(56, 56, 56);
  --black: #949494;
  --card: rgb(60, 60, 60);
  --card-shadow: 0 2px 20px rgb(52, 52, 52);
}


*{
  list-style: none;
}


html{
  scroll-behavior: smooth;
}

body {
  background: var(--bg);
  color: var(--black);
  font-family: jos-r;
}

/* ==================== MY CUSTOM RULES ==================== */

.cursor{
  background-color: var(--primary);
  width: 20px;
  height: 20px;
  top: 0;
  z-index: 999;
  position: absolute;
  border-radius: 50px;
}

.my-pr-text{
  color: var(--primary);
}
.my-pr-bg{
  background-color: var(--primary);
}

i{
  color: var(--black);
}




/* ==================== NAVIGATION SECTION ==================== */

.nav-bg{
  background: var(--nav-bg);
  backdrop-filter: blur(15px);
}
.navbar-brand{
  color: var(--black);
  transition: var(--transition);
}

.navbar-brand:hover{
  color: var(--primary);
}

.navbar-brand:hover span{
  color: var(--black);
}

.nav-links a{
  margin: 0 10px;
  transition: var(--transition);
  color: var(--black);
}

.nav-links a:hover{
  color: var(--primary);
}


.get-in,
.learn-more{
  color: var(--black);
  transition: var(--transition);
}
.get-in:hover,
.learn-more:hover{
  color: var(--primary);
}

#themeSwitch i:last-child{
  display: none;
}

.darkmode #themeSwitch i:first-child{
  display: none;
}

.darkmode #themeSwitch i:last-child{
  display: block;
}

/* ==================== HERO SECTION ==================== */
#hero{
  padding-top: 7rem;

}

.hero-img{
  background-color: #c9ffdf;
  border-radius: 20px;
  height: 550px;
}

#hero h1{
  font-size: 6rem;
  line-height: .9;
}
#hero h1 .word{
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
}
#hero p{
  padding-bottom: 1rem;
}

.contact-btn{
  padding: 0.9rem 1.5rem;
  border-radius: 50px;
  transition: var(--transition);
}
.contact-btn i{ 
 transition: var(--transition);
 color: var(--bg);
 display: inline-block;
}

.contact-btn:hover,
.contact-btn:hover i{
  transform: translateX(2px);
}

/* ==================== ABOUT SECTION ==================== */
#about{
  background-color: #f0fff6;
  padding-top: 2rem;
}

#about .col-md-6 {
  opacity: 0;
}

#about h4{
  font-size: 2rem;
  text-wrap: wrap;
}

#about .accordion-button{
  font-weight: 500;
  border-bottom-left-radius: 5rem;
  border-bottom-right-radius: 5rem;
  transition: var(--transition);
}


.accordion .accordion-button:not(.collapsed){
  background-color: var(--primary);
  color: var(--bg);
}
.accordion .accordion-button:not(.collapsed) i{
  color: var(--bg);
}
.accordion .accordion-button:focus{
  box-shadow: none;
}



/* ==================== SERVICES SECTION ==================== */
#services .texts h2{
  font-size: 4rem;
  line-height: 1.1;
}

#services .img-container{
  background: url('../../di1.png') center/cover no-repeat;
  height: 100vh;
  border-radius: 20px;
}

#services .card,
#all-services .card{
  background-color: var(--card);
  box-shadow: var(--card-shadow);
  border: 1px solid var(--card-border);
  border-radius: 20px;
  transition: var(--transition);
  padding: 20px;
}
#services .card:hover{
  transform: translateY(5px);
}

#services .card i{
  margin-bottom: 1rem;
  font-size: 2rem;
  background-color: rgb(253, 253, 253);
  width: 50px;
  height: 50px;
  border-radius: 50px;
  text-align: center;
  vertical-align: middle;
}

#services .card-title{
  font-size: 1.1rem;
}

/* ----------------------------------------------------------------
----------------------------------------------------------------
---------------------------------------------------------------- */
/* 
#all-services{
  background-color: #6d4d95;
} */

#all-services .texts,
#our-pillars .texts{
  width: 60%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  margin: 0 auto;
}

#all-services .texts h1,
#our-pillars .texts h1{
  font-size: 3.5rem;
  font-weight: 900;
}

#all-services .texts p,
#our-pillars .texts p{
  margin-top: 1rem;
  font-size: 0.9rem;
}

#all-services .card:hover{
  transform: translateY(-5px);
}

#all-services .card .card-body h5{
  font-weight: 600;
}

#all-services .card .card-body p{
  font-size: 0.9rem;
}

#all-services .card .card-body i{
  font-size: 2rem;
  background-color: #f4f4f4;
  border-radius: 50px;
  width: 70px;
  height: 70px;
}

/* ==================== OUR PILLARS SECTION ==================== */


/* ==================== CONTACT SECTION ==================== */

/* ==================== FOOTER SECTION ==================== */

.footer-container {
  margin-top: 5rem;
  background: var(--footer-bg);
}
/* 
.footer-content {
  max-width: var(--container);
} */

.footer-text a,
.footer-links a{
  color: var(--black);
  text-decoration: none;
  transition: var(--transition);
}
.footer-text a:hover,
.footer-links a:hover{
  color: var(--primary);
}

.footer-line{
  color: #999999;
}


/* ==================== RESPONSIVENESS ==================== */

@media(max-width: 512px){
  #services .texts h2{
    font-size: 2rem;
    line-height: 1.1;
  }

  #all-services .texts{
    width: 100%;
  }
  #all-services .texts h1{
    font-size: 2rem;
  }
}

@media(max-width: 768px){
  #hero h1{
    font-size: 4rem;
  }

  #all-services .texts{
    width: 80%;
  }
}