.color { 
  --background-color: #ffffff; /* Background color for the entire website, including individual sections */
  --default-color: #342c26; /* Default color used for the majority of the text content across the entire website */
  --heading-color: #2c1607; /* Color for headings, subheadings and title throughout the website */
  --accent-color: #e96308; /* Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */
  --surface-color: #ffffff; /* The surface color is used as a background of boxed elements within sections, such as cards, icon boxes, or other elements that require a visual separation from the global background. */
  --contrast-color: #ffffff; /* Contrast color for text, ensuring readability against backgrounds of accent, heading, or default colors. */
}

body{
    font-family: sans-serif;
    background-color: whitesmoke;
}
.hback{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  overflow: hidden;
}

/* - video - */
.hback video{
  width: 100%;
  height: 120%;
  object-fit: cover;
}

.overlay{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 120%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 0;
}

.logo h1{
    color: white;
    margin-left: -80%;
}

.hero{
    text-align: center;
    color: white;
}

.hero h1{
    margin-top: 5%;
}

.hero p{
    font-size: 18px;
}

.hero-cta{
    padding: 20px 20px;
    margin-top: 20%;
}
.hero-cta a{
    color: white;
    padding: 15px;
    text-decoration: none;
    border-radius: 10px;
}

.hr-q a{
    background-color: #e96308;
}

.hr-p{
    margin-top: 14%;
}
.hr-p a{
    border: 2px solid white;
}

.navbar{
    display: flex;
    justify-content: center;
}

.nav-links{
    display: flex;
    gap: 40px;
    list-style-type: none;
    margin-top: 2.5%;
    margin-left: -10%;
}


.nav-links a{
    text-decoration: none;
    color:#e96308;
    font-size: 20px;
}

.nav-links a:hover{
    color: white;
}
@media(max-width:767px){
    .nav-links{
        display: none;
    }

    .logo h1{
    margin-left: -30%;
}

   .hero{
    margin-top: 20%;
}

  .hero-cta{
    margin-top: 2%;
  }
}

@media(min-width:768px){
     .hero{
        position: relative;
        z-index: 10;
        margin-top: 0;
        text-align: center;
     }

     .hero h1{
        font-size: 55px;
     }

     .hero p{
        font-size: 22px;
     }

    .hback video ,  .overlay{
        height: 150%;
    } 

    .hero-cta{
        position: relative;
        display: flex;
        margin-top: 5%;
        align-items: center;
        gap: 20px;
        margin-left: 32%;
     }

     .hr-p{
        margin-top: 0;
     }

     .hr-p a:hover{
        color:#e96308;
        border: 2px solid #e96308;
     }
}

@media (max-width: 1024px) {
    .hback {
        height: 70%; /* Punguza urefu kidogo kwenye tablet */
    }
    
    .hero-content h1 {
        font-size: 2.5rem; /* Maandishi yawe saizi ya wastani */
    }
    
     .nav-links{
        display: none;
    }

    .logo h1{
    margin-left: -10%;
    color:#e96308;
    font-size: 43px;
}
    
}
/*==================  ABOUT ===================*/
.about{
    margin-top: 5%;
    text-align: center;
    padding: 20px;
}
.abt-image img{
    border-radius: 20px;
    width: 100%;
}

.abt-img-desc{
    background-color: white;
    border-radius: 10px;
    width: 45%;
    padding: 5px 20px;
    margin-top: 130%;
}

.abt-contents h1, .abt-contents h4{
    color:#2c1607;
}

.abt-contents p{
    color: #342c26;
}

.abt-cnt{
    text-align: left;
    margin-top: -5%;
}

.abt-cnt h1{
    font-size: 40px;
    margin-bottom: 20px;
}

.abt-cnt p, .abt-cnt h4{
    font-size: 20px;
    margin-bottom: 20px;
}

.abt-awr{
    background-color:  transparent grey;
    text-align: center;
}

.abt-awr h1{
    color: #e96308;
}
.abt-awr p{
    font-size: 16px;
    color:#342c26;
}

@media(min-width:768px){
    .about{
        display: grid;
        grid-template-columns: repeat(2,1fr);
    }

    .abt-image, .abt-contents{
        display: grid;
        grid-column: span 1;
    }

    .abt-image{
        float: left;
    }

    .abt-contents{
        padding: 20px;
        float: right;
    }

    .abt-awr{
        display: flex;
    }

    .abt-img-desc{
        width: 30%;
        margin-top: -40%;
        margin-left: 10%;
        height: auto;
        background-color: white;
    }

    .about-cont{
        margin-top: 20%;
        display: grid;
    }
}

@media (max-width: 1024px) {
    .abt-img-desc {
        width: 60%; 
        margin-top: 100%;
    }

    .about {
        grid-template-columns: 1fr;
    }
}
/* =========================== SERVICES ==============================*/
.services{
    text-align: center;
    margin-top: 30%;
}

.services h1{
    color: #2c1607;
}
.services p{
    color:#342c26;
}

.service-container{
    gap: 20px;
    padding: 20px;
}

.serv{
    text-align: left;
    background-color: white;
    padding: 20px;
    border-radius: 10px;
    border: 1px solid lightgrey;

    margin-top: 7%;
}

.serv a{
    color: #e96308;
    text-decoration: none;
}

@media(min-width:768px){
    .services{
    margin-top: 5%;
}
    .service-container{
        display: grid;
        grid-template-columns: repeat(6,1fr);
    }

    .serv{
        display: grid;
        grid-column: span 2;
    }
}
/* ===================== PROJECTS =====================*/
.projects{
    text-align: center;
    margin-top: 20%;
}

.projects h1{
    color: #2c1607;
}

.projects p{
    color: #342c26;
}

.proj{
    padding: 20px;
    border-radius: 10px;
    text-align: left;
}

.proj img{
    width: 100%;
    border-radius: 10px 10px 0 0;
    padding: none;

}

.proj-cont{
    background-color: white;
    padding: 20px;
    margin-top: -8%;
    border-radius: 0 0 10px 10px;
}

.proj-cont h5{
    color: #e96308;
    font-size: 15px;
}

.proj-cont h3{
    color: #2c1607;
    font-size:20px;
}

.proj-cont p{
    color:#342c26;
}


@media(min-width:768px){
    .projects{
    margin-top: 10%;
}

    .projects-container{
        display: grid;
        grid-template-columns: repeat(6,1fr);
    }

    .proj{
        display: grid;
        grid-column: span 2;
    }
}
/* ================  AWARDS =================*/
.awards{
    text-align: center;
    margin-top: 20%;
}

.awards h1 , .contacts h1{
    color: #2c1607;
}

.awards p{
    color: #342c26;
}
.awr img{
    width: 20%;
    border-radius: 20px;
}

.awr {
    margin-top: 20%;
}

.awr h4{
    color: #342c26;
}
.awr p{
    color: gray;
}

@media(min-width:768px){
    .awards{
    margin-top: 10%;
}

   .award-container{
    display: flex;
    margin-top: -15%;
   }

   .awr img{
    width: 30%;
    border-radius: 20px;
}

   .awr h4{
    font-size: 18px;
   }
}
/*========================= FOOTER ==============================*/
.footer{
    background-color: black;
    color: grey;
    margin: -8;
}

.footer h1{
    color: white;
    
}

.footerr{
    padding: 20px;
}

.footerr a{
    color: grey;
    text-decoration: none;
}

.footerr h4{
    color: white;
    font-size: 20px;
}

.QuickLinks , .contact-info{
    display: flex;
    flex-direction:column;
}

.QuickLinks a:hover{
    color: white;
}

.contact-info a:hover{
    color: white;
}

.QuickLinks a{
    padding: 10px;
}

.copyright{
    text-align: center;
}

@media(min-width:768px){
    .footerr{
        display: grid;
        grid-template-columns: repeat(6,1fr);
    }

    .QuickLinks, .contact-info, .ftr{
        display: grid;
        grid-column: span 2;
    }

     .QuickLinks{
        margin-left: 50%;
     }
      .contact-info{
         margin-left: 30%;
      }

       .ftr{
         margin-left: 20%;
       }
    .ftr p{
        margin-top: -25%;
    }
}
/*//// =================== PROJECT =========================////*/
.section-top img{
    width: 100%;
    height: 47%;
    object-fit: cover;
    margin: -8px;
    z-index: -1;
    position: absolute;
} 

.section-title .logo, .section-title .intro, .section-top-link , .section-top-link span, .navbar{
    position: relative;
    z-index: 10;
}

.section-top .overlay{
    height: 47%;
}

.section-title .intro{
    margin-top: 30%;
    text-align: center;
}

.section-title .intro h1{
    color: white;
}

.section-title .intro p{
    color: white;
}

.section-top-link{
    text-align: center;
}
.section-top-link a{
    color: #e96308;
    text-decoration: none;
}

.section-top-link{
    color: white;
}

.section-top-link span{
    color: grey;
}

.projects .projects-cont{
    margin-top: 35%;
}

@media(min-width:768px){
    .section-top img{
        height: 60%;
    }

    .section-title .intro{
    margin-top: 5%;
}

   
   .section-title .intro h1{
    color: white;
    font-size: 40px;
}

   .section-top .overlay{
    height: 60%;
}

   .projects .projects-cont{
    margin-top: 10%;
   }
}

/* ///// ============== SERVICE \\\\\\\ */
.service-cont{
    margin-top: 30%;
}

.service-cont h1{
    display: none;
}

@media(min-width:768px){
    .service-cont{
    margin-top: 10%;
}
}

/* //// ============= TEAM ========== \\\\\\\\ */
.team{
    margin-top: 30px;
    text-align: center;
}

.team h1{
    color: #2c1607;
    font-size: 25px;
}

.team h3{
    color: #e96308;
}

.team p{
    color: #342c26;
}
.team-prof{
    padding: 20px;
}

.team-prof img{
    width: 100%;
    border-radius: 20px 20px 0 0;
}

.team-cont{
    background-color: white;
    padding: 20px;
    border-radius: 0 0 20px 20px;
}

@media(min-width:768px){
    .team{
    margin-top: 15%;
    }
    .team-container{
        display: grid;
        grid-template-columns: repeat(6,1fr);
    }

    .team-prof{
        display: grid;
        grid-column: span 2;
    }
}

/* ////// ====== CONTACTS ======== \\\\\\\\ */
.contacts{
    margin-top: 40%;
}

.map{
    padding: 20px;
    border-radius: 20px;
}

.contact-cont{
    margin-top: -20%;
}
.contacts h1{
    text-align: center;
}
.contact-form{
    background-color: white;
    border-radius: 20px;
    padding: 20px;
    border: 1px solid lightgray;
}

.contact-form h2{
    color: #2c1607;
    border-left: 2px solid #e96308;
}

.contact-form h2 span{
    margin-left: 3%;
}

.contact-form p{
    color: #342c26;
}

.contact-form input, .contact-form select , .contact-form textarea{
    padding: 15px;
    border-radius: 20px;
    border: 1px solid lightgray;
    width: 100%;
    margin-top: 10px;
}

.contact-form button{
    background-color: #e96308;
    border-radius: 20px;
    padding: 15px;
    border: none;
    width: 60%;
    text-align: center;
    color: white;
    font-size: 20px;
    margin-top: 4%;
    margin-left: 15%;
}


.map iframe{
    width: 100%;
    height: 100%;
   }

@media(min-width:768px){
    .contact-cont{
    margin-top: -30%;
    display: grid;
    grid-template-columns: repeat(2,1fr);
}

   .contact-form, .map{
    display: grid;
    grid-column: span 1;
   }
}

@media (max-width: 1024px) {
    .map iframe {
        height: 400px; /* Punguza urefu wa ramani kwenye tablet na simu */
    }
}