*,html{
  scroll-behavior: smooth;
  }
  *, *:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  }
  :root{
  scrollbar-color: rgb(210,210,210) rgb(46,54,69) !important;
  scrollbar-width: thin !important;
  --white:#fff;
  --black:#1e1e1e;
  --pink:#e30846;
  --secondary:#202124;
  --gray:#b8bca7;
  --blue:#061221;
  }
  ::-webkit-scrollbar {
  height: 12px;
  width: 8px;
  background: #000;
  }
  ::-webkit-scrollbar-thumb {
  background: gray;
  -webkit-box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.75);
  }
  ::-webkit-scrollbar-corner {
  background: #000;
  }
  
  
  
/* ============================================================================== */
  /*===============================DEFAULT==============================*/
  body{
  margin:0;
  overflow-x:hidden !important;
  font-family: 'Source Sans Pro', sans-serif;
  }
  
  a{
  text-decoration:none;
  color:var(--white);
  }
  
  a,button{
  transition:0.5s;
  }
  
  p{
  line-height:1.8em;
  letter-spacing:0.06em;
  }
  
  fieldset{
  border:0;
  }
  
  a, button, select{
  outline:none !important;
  }
  
  img{
  width:99%;
  }
  
  .title{
  font-family: 'Playfair Display', serif;
  }
  
  .cursive{
  font-family: 'Dancing Script', cursive;
  }
  
  em{
  font-style:normal;
  color:var(--pink);
  }
  
  p{
  line-height:1.6em;
  letter-spacing:0.06em;
  }
  
  .title{
  font-family: 'Playfair Display', serif;
  }
  
  .title_header{
  width:60%;
  text-align:center;
  margin:auto;
  }
  
  .title_header h1{
  font-size:2em;
  }
  
  .title_header h3{
  font-size:1.2em;
  font-weight:400;
  color:rgba(1,1,1,0.7);
  }
  
  .btn1{
  padding:20px;
  text-align:center;
  display:inline-block;
  width:200px;
  background-color:var(--pink);
  border-radius:40px;
  font-weight:600;
  }
  
  .btn1:hover{
  background-color:var(--secondary);
  }
  
  .btn2{
  padding:20px;
  text-align:center;
  display:inline-block;
  width:250px;
  border-radius:40px;
  font-weight:600;
  }
  
  .btn1:hover{
  background-color:var(--secondary);
  }
  
  .border-shape {
  background: var(--secondary) none repeat scroll 0 0;
  color: #fff;
  display: block;
  height: 3px;
  left: 0;
  margin: 20px auto;
  position: relative;
  right: 0;
  text-align: center;
  top: 0;
  width: 80px;
  }
  
  .border-shape::before {
  background: var(--pink) none repeat scroll 0 0;
  bottom: 0;
  content: "";
  height: 1px;
  left: 80px;
  margin: 0 auto;
  position: absolute;
  text-align: center;
  top: 1px;
  width: 100%;
  }
  
  .border-shape::after {
  background: var(--pink) none repeat scroll 0 0;
  bottom: 0;
  content: "";
  height: 1px;
  margin: 0 auto;
  position: absolute;
  right: 80px;
  text-align: center;
  top: 1px;
  width: 100%;
  }
  
  @media (max-width:820px){
  .btn1,.btn2{
  padding:10px 15px;
  width:150px;
  }
  .title_header{
  width:100%;
  }
  .title_header h1{
  font-size:1.5em;
  }
  
  .title_header h3{
  font-size:1em;
  }
  }
  
  /*ANIMATION*/
  @keyframes arrows {
  0%,
  100% {
  color: black;
  transform: translateY(0);
  }
  50% {
  color: #3AB493;
  transform: translateY(20px);
  }
  }
  
  .animate {
  -webkit-animation: animatezoom 0.6s;
  animation: animatezoom 0.6s
  }
  
  @-webkit-keyframes animatezoom {
  from {-webkit-transform: scale(0)} 
  to {-webkit-transform: scale(1)}
  }
  
  @keyframes animatezoom {
  from {transform: scale(0)} 
  to {transform: scale(1)}
  }
  
  
  
  

  /* ******************================================================********************* */
  /*========================*********HEADER************************==========================*/
  .header{
  width:100%;
  position:relative;
  display:flex;
  align-items:center;
  background-color:var(--pink);
  padding:1rem 0;
  padding-bottom:3rem;
  }
  
  .header section{
  width:100%;
  text-align:center;
  padding:1rem 2rem;
  display:flex;
  align-items:center;
  justify-content:center;
  }
  
  .header section span{
  margin:0 20px;
  }
  
  .header section span a{
  color:var(--white);
  white-space:nowrap;
  }
  
  .header section span a:hover{
  color:var(--dark);
  }
  
  @media (max-width:820px){
  .header section:nth-child(1){
  display:none;
  }
  }
  /************===========TOP NAVIGATION=========*************/
  #header{
  position:fixed;
  top:5rem;
  width:100%;
  z-index:99999;
  transition:0.5s;
  }
  
  .topnav {
  overflow: hidden;
  background-color: var(--blue);
  width:80%;
  margin:auto; 
  box-shadow:0px 6px 16px -6px rgba(1,1,1,0.7);
  transition:0.5s;
  }
  
  .topnav a {
  float: left;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 16px 16px;
  margin:auto 1rem;
  text-decoration: none;
  font-size: 17px;
  position:relative;
  top:10px;
  }
  
  #logo{
  width:120px;
  position:relative;
  top:-10px;
  }
  
  #icon{
  float:right;
  }
  
  #active{
  display:flex;
  }
  
  #active img{
  width:130px;
  }
  
  #active:hover{
  color:#fff;
  }
  
  .topnav .icon {
  display: none;
  }
  
 
  .topnav a:hover {
  color: #cd2027;
  }

  
  @media screen and (max-width: 1120px) {
  .logo{
  width:20px;
  position:static;
  }

  .topnav a:not(:first-child) {
  display: none;
  }
  .topnav a.icon {
  float: right;
  display: block;
  }
  #active{
  display:none;
  }
  }
  
  @media screen and (max-width: 1120px) {
  .topnav.responsive {position: relative;}
  .topnav.responsive .icon {
  position: absolute;
  right: 0;
  top: 0;
  }
  .topnav.responsive a {
  float: none;
  display: block;
  text-align: left;
  padding: 14px 16px;
  }
  }
  
  
  
  
  
  
  
  
  
  /******************================BANNER====================***********************/
  .banner{
  width:100%;
  height:100vh;
  background: linear-gradient(rgba(1,1,1,.7), rgba(1,1,1,.7)), url("building/equpt.avif");
  background-size:cover;
  background-position:center;
  display:flex;
  align-items:center;
  justify-content:center;
  color:white;
  position:relative;
  }
  
  .banner:after{
  content:"";
  background-image:url("https://i.ibb.co/8zB1N3z/wave.png");
  background-size:cover;
  width:100%;
  height:100px;
  position:absolute;
  bottom:0;
  }
  
  .banner section{
  width:100%;
  text-align:center;
  }
  
  .banner section .cursive{
  font-size:5em;
  line-height:0;
  }
  
  .banner section h2{
  font-weight:200;
  line-height:1.6em;
  }
  
  .banner .btn1{
  display:inline-block;
  margin:2vh 20px;
  }
  
  @media (max-width:820px){
  .banner section{
  width:95%;
  }
  .banner section h2{
  font-size:1.3em;
  }
  .banner section .cursive{
  font-size:50px !important;
  width: 100%;
  line-height: 1;
  font-weight: 900 !important;
  }
  .banner .btn1{
  margin:2vh 10px;
  }
  }
  
  
  
  
  

  
  
  
  
  
  /*=======================ABOUT Blessed japhet=======================*/
  .about_Blessed{
  display:flex;
  align-items:center;
  margin:2rem 0;
  }
  
  .about_Blessed section{
  position:relative;
  width:100%;
  padding:4rem;
  }
  
  .about_Blessed section:nth-child(2){
  padding:4rem 2rem;
  }
  
  .about_Blessed section:nth-child(1){
  background-image:url("https://i.ibb.co/1v2CTjz/shape.png");
  background-repeat:no-repeat;
  background-position:center;
  background-size:50% 99%;
  }
  
  .about_Blessed section img:nth-child(1){
  width:70%;
  border:5px solid var(--white);
  border-radius:5px;
  }
  
  .about_Blessed section img:nth-child(2){
  position:absolute;
  right:15%;
  bottom:5%;
  width:40%;
  border:5px solid var(--white);
  }
  
  .about_Blessed .title{
  font-size:3em;
  line-height:0em;
  }
  
  .about_Blessed h3{
  font-weight:400;
  }
  
  .about_Blessed p{
  font-size:20px;
  color:rgba(1,1,1,0.7);
  }
  
  .about_Blessed .btn1{
  display:block;
  }
  
  @media (max-width:820px){
  .about_Blessed{
  display:block;
  line-height: 1;
  }
  
  .about_Blessed section{
  padding:1rem;
  }
  
  .about_Blessed section:nth-child(2){
  padding:4rem 1rem;
  }
  
  .about_Blessed .title{
  font-size:1.8em;
  line-height: 1;
  }
  
  .about_Blessed p{
  font-size:18px;
  color: rgb(20, 19, 19);
  text-transform:capitalize;
  }
  }
   
  
   /* ==================================================================== */
    /*========================== section1.section1 =========================*/
    .section1{
      align-items:top;
      padding:3rem;
      background-color:#f3f7f6;
      background: linear-gradient(rgba(255,255,255,.8), rgba(255,255,255,.8)), url(".https://i.ibb.co/1v2CTjz/shape.png");
      background-repeat:no-repeat;
      }
      
      .section1 .title_header{
      padding:3rem;
      width:60%;
      font-family: "Roboto", sans-serif;
      }
  
      .section1 section{
      width:100%;
      }
      
      .section1 .cards {
      width: calc(100% - 2em);
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: 1fr 1fr; 
      grid-gap: 2em;
      grid-template-areas: "a b c e" "a d e";
      width: 100%;
      }
      
     
  .section1 .card {
    width: 100%;
    position: relative;
    transition: all 0.25s ease;
    cursor: pointer;
    font-family: "Roboto", sans-serif;
    font-weight: 300;
    }
    .section1 .card:last-child {
    margin-bottom: 0;
    }
    .section1 .card:before {
    height: 0;
    content: "";
    display: block;
    padding-bottom: 47.36%;
    }
    .section1 .card.content:after {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50%;
    content: "";
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0), black);
    }
  
      .section1 .card-content{
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      }
  
      .section1 .card-img{
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      }
  
      .section1 .card-img img {
      width: 100%;
      height: 100%;
      -o-object-fit: cover;
      object-fit: cover;
      }
  
      .section1 .card-label {
      position: absolute;
      top: 0.45rem;
      left: 0.45rem;
      background: #089f8a;
      text-transform: uppercase;
      font-weight: 300;
      font-size: 0.7em;
      color: white;
      padding: 0.5em;
      }
  
      .section1 .card-title {
      position: absolute;
      left: 1em;
      bottom: 1em;
      color: #d6dbeb;
      z-index: 5;
      font-size: 0.8em;
      }
  
      .section1 .card:nth-child(2) .card-label {
      background: #ef4e7b;
      }
      .section1 .card:nth-child(3) .card-label {
      background: #1098ad;
      }
      .section1 .card:hover {
      transform: scale(1.05);
      box-shadow: 0 0 30px rgba(0, 0, 0, 0.35);
      }
      .section1 .card:hover .form-title:before {
      filter: blur(3px);
      opacity: 0.7;
      }
      
      @media (max-width:820px){
      .section1{
      padding:1rem;
      }
      .section1 .title_header{
      padding:1rem;
      width:100%;
      }
      .section1 .cards {
      width: calc(100% - 2em);
      display: grid;
      grid-template-columns: 1fr;
      grid-template-rows: 1fr 1fr 1fr 1fr;
      grid-gap: 1em 0em;
      grid-template-areas: "a" "b" "c" "d" "e";
      width: 100%;
      font-size: 18px;
      }
      }


  /* .section4{
  align-items:top;
  padding:3rem;
  background-color:#f3f7f6;
  background: linear-gradient(rgba(255,255,255,.8), rgba(255,255,255,.8)), url(".https://i.ibb.co/1v2CTjz/shape.png");
  background-repeat:no-repeat;
  }
  
  .section4 .title_header{
  padding:3rem;
  width:60%;
  }
  
  .section4 section{
  width:100%;
  }
  
  
  .section4 .cards {
  width: calc(100% - 2em);
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-gap: 1em;
  grid-template-areas: "a a b c e" "a a d d e";
  width: 100%;
  }
  
  .section4 .card {
  width: 100%;
  position: relative;
  transition: all 0.25s ease;
  cursor: pointer;
  font-family: "Roboto", sans-serif;
  font-weight: 300;
  }
  .section4 .card:last-child {
  margin-bottom: 0;
  }
  .section4 .card:before {
  height: 0;
  content: "";
  display: block;
  padding-bottom: 47.36%;
  }
  .section4 .card.content:after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50%;
  content: "";
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0), black);
  }
  .section4 .card:nth-child(1) {
  grid-area: a;
  }
  .section4 .card:nth-child(2) {
  grid-area: b;
  }
  .section4 .card:nth-child(3) {
  grid-area: c;
  }
  .section4 .card:nth-child(4) {
  grid-area: d;
  }
  .section4 .card:nth-child(5) {
    grid-area: e;
    }
  .section4 .card-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  }
  .section4 .card-img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  }
  .section4 .card-img img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
  object-fit: cover;
  }
  .section4 .card-label {
  position: absolute;
  top: 0.45rem;
  left: 0.45rem;
  background: #089f8a;
  text-transform: uppercase;
  font-weight: 300;
  font-size: 0.7em;
  color: white;
  padding: 0.5em;
  }
  .section4 .card-title {
  position: absolute;
  left: 1em;
  bottom: 1em;
  color: #d6dbeb;
  z-index: 5;
  font-size: 0.8em;
  }
  .section4 .card.form {
  position: relative;
  }
  .section4 .card.form:before {
  background: linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);
  }
  .section4 .card.form:after {
  position: absolute;
  top: 0.5em;
  left: 0.5em;
  width: calc(100% - 1em);
  height: calc(100% - 1em);
  content: "";
  background: #252833;
  }
  .section4 .card.form .form-title {
  position: absolute;
  top: 3rem;
  left: 3rem;
  font-size: 7vw;
  font-weight: 900;
  z-index: 5;
  text-transform: uppercase;
  background: linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  }
  .section4 .card.form .form-title:before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  content: "More";
  opacity: 0.5;
  filter: blur(10px);
  transition: all 0.25s ease;
  z-index: 2;
  background: linear-gradient(60deg, #f79533, #f37055, #ef4e7b, #a166ab, #5073b8, #1098ad, #07b39b, #6fba82);
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  transform: translateX(-50%) translateY(-50%);
  }
  .section4 .card:nth-child(2) .card-label {
  background: #ef4e7b;
  }
  .section4 .card:nth-child(3) .card-label {
  background: #1098ad;
  }
  .section4 .card:hover {
  transform: scale(1.05);
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.35);
  }
  .section4 .card:hover .form-title:before {
  filter: blur(3px);
  opacity: 0.7;
  }
  
  @media (max-width:820px){
  .section4{
  padding:1rem;
  }
  .section4 .title_header{
  padding:1rem;
  width:100%;
  }
  .section4 .cards {
  width: calc(100% - 2em);
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr 1fr 1fr;
  grid-gap: 1em 0em;
  grid-template-areas: "a" "a" "b" "c" "d";
  width: 100%;
  }
  }
  
   */
  
  
  
  
  
  
  
  
  
  
  /*CONTACT FORM*/
  .contact{
  padding:3rem;
  background-color:#f3f7f6;
  background-size:cover;
  display:flex;
  position:relative;
  }
  
  .contact section{
  width:100%;
  margin:auto;
  position:relative;
  }
  
  .contact section form{
  width:80%;
  background-color:var(--white);
  padding:2rem 1rem;
  box-shadow: 0 0 20px 0 #dddddd8c;
  border-radius:30px;
  
  }
  
  .contact section input{
  width:100%;
  padding:1rem;
  background-color:#f3f7f6;
  border:0;
  }
  
  .contact section textarea{
  width:100%;
  padding:1rem;
  resize:none;
  background-color:#f3f7f6;
  border:0;
  }
  
  .contact section button{
  margin:auto;
  border:0;
  display:block;
  color:var(--white);
  }
  
  .contact_info ul{
  display:flex;
  align-items:center;
  width:90%;
  margin:auto;
  }
  
  .contact_info ul li{
  padding:1rem;
  list-style:none;
  line-height:1.8em;
  } 
  
  .contact_info ul li .fa{
  color:var(--secondary);
  padding:15px;
  background-color:var(--white);
  border-radius:10px;
  font-size:2em;
  box-shadow: 0 0 20px 0 #dddddd8c;
  width:60px;
  text-align:Center;
  }
  
  @media (max-width:820px){
  .contact{
  display:block;
  padding:1rem;
  }
  .contact section form{
  width:100%;
  }
  .contact_info ul{
  width:100%;
  }
  }
  
  
  
  
  
  
  
  
  
  /*FOOTER*/
  footer{
  width:100%;
  background-color:#000 ;
  background-size:cover;
  background-repeat:no-repeat;
  background-position:center;
  background-attachment:local;
  color:var(--white);
  padding:3rem 0;
  }
  
  footer a{
  color:var(--white);
  }
  
  footer a:hover{
  color:var(--primary);
  }
  
  footer .top_section{
  padding:1rem;
  display:flex;
  align-items:center;
  }
  
  footer .top_section section{
  width:33%;
  display:flex;
  align-items:center;
  justify-content:center;
  }
  
  footer .top_section section span{
  padding:1rem;
  }
  
  footer .top_section section span .fa{
  font-size:2em;
  color:var(--primary);
  }
  
  footer .middle_section{
  padding:1rem;
  display:flex;
  align-items:center;
  justify-content:center;
  }
  
  footer .middle_section span{
  display:block;
  padding:1rem 0;
  text-align:center;
  }
  
  footer .middle_section span a{
  margin:0 20px;
  }
  
  footer .middle_section span a .fa{
  font-size:1.5em;
  }
  
  footer .bottom_section{
  
  text-align:center;
  font-size:13px;
  padding:1rem 0;
  }
  
  @media (max-width:820px){
  footer{
  background-attachment:local;
  }
  
  footer .middle_section{
  display:block;
  }
  footer .middle_section span a{
  white-space:nowrap;
  margin:10px ;
  }
  }
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  /*ADDITIONAL*/
  #roll_back{
  position:fixed;
  bottom:2rem;
  right:2rem;
  background-color:var(--pink);
  border-radius:5px;
  border:2px solid var(--white);
  padding:5px 10px;
  display:none;
  align-items:center;
  justify-content:center;
  z-index:999999;
  box-shadow:0px 6px 16px -6px rgba(1,1,1,0.5);
  color:var(--white);
  font-weight:900;
  }
  









/* Mobile View */
@media (max-width: 768px) {
  /* Reset font size and line height for mobile devices */
  body {
    font-size: 14px;
    line-height: 1.6em;
    font-size: 1rem;

  }

h1 {
    font-size: 1.5rem;
}

p {
    font-size: 0.875rem;
}

h2, h3{
  font-size: 0.875rem;
}

header {
  padding: 2px;
  text-align: center;
  font-size: 20px;
}

.banner{
  height: 90vh;
  font-size: 20px;
}

.title {
  color: #333;
  margin-bottom: 10px;
}

.subtitle {
  color: #666;
}

main {
  padding: 20px;
}

section {
  margin-bottom: 20px;
}

h2 {
  color: #f6f5f5;
  margin-bottom: 10px;
  font-weight: 400;
}

p {
  color: #eae4e4;
  font-weight: 400;
}

.btn1{
  display: inline-block;
  background-color: #e30846;;
  color: #fff;
  padding: 10px 20px;
  text-decoration: none;
  margin-top: 10px;
  font-size: 20px;
}

footer {
    background-color: #061221;
  color: #fff;
  padding: 20px;
  text-align: center;
}

.border-shape {
  border-top: 1px solid #fff;
  margin-bottom: 10px;
}

  /* Adjust banner section */
  .banner section h1 {
    font-size: 30px !important;
    line-height: 1;
    padding: 2px 3px;
  }

  .banner section h2 {
    font-size: 18px;
    line-height: 1.5;
    padding: 10px 0;
  }

  /* Adjust about-japhet section */
  .about-japhet .title {
    font-size: 2.3em;
    line-height: 1.5;
  }

  .about-japhet h3 {
    font-size: 18px;
    line-height: 1.5;
  }

  .about-japhet h3 {
    font-size: 16px;
  }

  .about-japhet .btn1 {
    margin: 10px 20px;
    font-size: 14px;
  }

  /* Adjust section1 section */
  .section1 .title_header {
    font-size: 20px;
    line-height: 1.5;
  }

  .section1 .card {
    font-size: 16px;
  }
}