:root{
    --accent-color:#ecf2ff ;
}


section [class^="container"] {
    padding: 4rem 2rem;
}

a{
    color: #000000;
    font-family: "Montserrat", sans-serif;
}


/* NAVBAR */



.navbar {
    background-color: #ffffff; 
    padding: 1rem 2rem;
}



.navbar .btn-outline-dark{
    border: 2px solid #000000;
    box-shadow: 4px 4px 0 #000000;
    font-family: "Montserrat", sans-serif;
    transition: all 0.5s;
}

.navbar .btn-outline-dark:hover{
    transform: scale(1.1);
}


.navbar-nav .nav-link {
    color: #adadad ;
    font-size: 1.2rem;
    transition: all 0.5s;
}

.nav-link:hover{
    transform: scale(1.1); 
}


.navbar-brand {
    font-size: 2rem;
    color: #000000;
    transition: all 0.5s;
}
.navbar-brand:hover{
    transform: scale(1.1); 
}



.navbar-nav .nav-item{
    padding: 0 10px ;
}

section:nth-child(2n){
    background-color: #ecf2ff; 
}


@media  screen and (min-width: 1024px) {
    .navbar-nav .nav-item {
        padding: 0 1rem;
    }

    .navbar-brand {
        font-size: 1.5rem;
    }
}

/* HERO SECTION */
section.hero {
    background-color: #ecf2ff; 
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 5rem; 
    font-family: "Montserrat", sans-serif;
    font-size: 1.1rem;
}

@media screen and (min-width: 576px) {
    section.hero {
        text-align: center;
        padding-top: 50px;
    }
}


section.hero .btn-outline-dark{
    border: 2px solid #000000;
    box-shadow: 4px 4px 0 #000000;
    font-family: "Montserrat", sans-serif;
    transition: all 0.5s;
}

section.hero .btn-outline-dark:hover{
    transform: scale(1.1); 
}

/* SERVICES */
section.services {
    font-family: "Montserrat", sans-serif;
    font-size: 1.1rem;
}

 section.services i {
    font-size: 2rem;
    margin: 1rem auto 0;
    border: 2px solid #000000;
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    
}

section .card{
    max-width: 22rem;
    height: 300px;
    margin-inline: auto;
  
}

section .card 
.btn-outline-dark {
    border: 2px solid #000000;
    box-shadow: 4px 4px 0 #000000;
    font-family: "Montserrat", sans-serif;
    transition: all 0.5s;
}

section .card 
.btn-outline-dark:hover{
    transform: scale(1.1);
}


section:not(:bi-cast){
    text-align: center;
}

/* ABOUT */
@media screen and (min-width: 1024px) {
    section.about .container, section.testimonials .container{
        width: 60%;
    }
    
}

section.about .container{
    font-family: "Montserrat", sans-serif;
}

section.about p {
    font-size: 1.2rem;
    line-height: 1.5;
    margin: 2rem auto;
}


/* PROJECTS */

.card-img-top {
  border: 2px solid #000000;
  border-radius: 8px;
}

section.project {
  padding: 60px 0; 
  font-family: "Montserrat", sans-serif;
}

section.project .card {
  max-width: 100%;
  text-align: left;
  margin: auto;
  height: 100%;
}

section.project .card img {
  max-width: 100%;
  height: auto;
  margin: 1rem auto;
  display: block;
}

@media (max-width: 576px) {
  section.project .card {
    margin-bottom: 1.5rem;
  }
}


/* Faq */

section.testimonials .carousel-inner {
    min-height: 220px; 
    justify-content: center;
}



#testimonials h5 {
  color: #5c5c5c;
}

section.testimonials .container{
    max-height: 600px;
}

section.testimonials {
 
    padding: 4rem 0;
    font-family: "Montserrat", sans-serif;
    font-size: 1.1rem;
    max-height: 600px;
}

section.testimonials .carousel-control-prev,
  .carousel-control-next{
    width: 5%;
    
}

section.testimonials.carousel-item p{
    max-width: 80%;
}

.carousel slide carousel-dark .carousel-item {
    background-color: #000000;
    padding: 2rem;
    border-radius: 1rem;
}

 .social-media a i {
    color: black;
  }

  .social-media a i:hover {
    color: gray; 
  }

  /* Contact */

  .form-control {
    border: 2px solid #ecf2ff;
    box-shadow: 4px 4px 0 #ecf2ff;
    font-family: "Montserrat", sans-serif;
    transition: all 0.5s;
  }

   .col-12 button{
    border: 2px solid #000000;
    box-shadow: 4px 4px 0 #000000;
    font-family: "Montserrat", sans-serif;
    transition: all 0.5s;
  }

   .col-12 button:hover{
    transform: scale(1.1);
   }

  section.contact a{
    color:#000000
  }


  section.contact a:hover{
    color: #8d8d8d;
  }