:root {
    --brown: #897B71;
    --yellow: #F3A712;
    --text: #2F243A;
    --white:  #cfcece;
  }


body {
    font: Inria Sans;
    font-family: 'Inria Sans', Times, serif;
    font-style: normal;
    font-weight: 300;
    line-height: 28px;
    color: var(--text);
    font-size:1rem;
}

a {
    color:unset;
    text-decoration: none;
}

a:hover {
    color: var(--yellow);
    text-decoration: none;
}



body::after {
    content: "";
    background: url('../images/background.jpg');background-position: left top; background-size: cover; background-repeat: repeat; background-attachment: fixed; 
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    position: fixed;
    z-index: -1;   
    filter: opacity(0.5);
  }

.container {    
    max-width: 1180px;
}  


.vertical-center {
    display: flex;
    align-items: center;        
}

.vertical-top {
    display: flex;
    align-items: top;        
}

/* loader css */

.loader {
  display: inline-block;
  width: 30px;
  height: 30px;
  position: relative;
  border: 4px solid var(--white);
 /* top: 50%;*/
  animation: loader 2s infinite ease;
}

.loader-wrapper {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background-color: var(--brown);
    display:flex;
    justify-content: center;
    align-items: center;
    z-index: 100;
  }

.loader-inner {
  vertical-align: top;
  display: inline-block;
  width: 100%;
  background-color: var(--white);
  animation: loader-inner 2s infinite ease-in;
}

@keyframes loader {
  0% {
    transform: rotate(0deg);
  }
  
  25% {
    transform: rotate(180deg);
  }
  
  50% {
    transform: rotate(180deg);
  }
  
  75% {
    transform: rotate(360deg);
  }
  
  100% {
    transform: rotate(360deg);
  }
}

@keyframes loader-inner {
  0% {
    height: 0%;
  }
  
  25% {
    height: 0%;
  }
  
  50% {
    height: 100%;
  }
  
  75% {
    height: 100%;
  }
  
  100% {
    height: 0%;
  }
}


#main {
    overflow: hidden;
}

#header , #footer{
    height: 100px;
}

#project-header {
    background-color: rgba(137, 123, 113, 0.5);
    height: 4.125rem;
    /*color: var(--white);*/
    position: sticky;
    left: 0;
    top: 0;
    z-index: 100;
}


h1 { font-size: 2.3rem;}
h2 { font-size: 1.25rem;}





h1.title , h2.title   {
  margin-bottom:0px;
  font-weight: 600; 
  letter-spacing: 1.5px;    
  /*font-size: 1.3rem;  */
}


h1.title .title-next-word  {
    color:var(--yellow);
}

.section h2{
    margin-bottom:1.5rem;
    font-size: 1.3rem;
    line-height: 1.5rem;
    font-weight: 600;
}

.narrow {
    font-weight: 100;
}


.contact {
    float:right;    
}

.icon { 
    font-size:18px;
    margin:10px;
}
.carousel-container .card {
    height: auto;
    overflow: hidden;
}

.carousel-container .center .card{
    box-shadow: 0px 0px 9.3624px 4.6812px rgb(137 123 113 / 50%);
    opacity: 1;
    transform: scale(1.05);
    transition-duration: 0.5s;
}

.carousel-container .active {
    opacity: 1;    
}


.accordion-button:not(.collapsed) {
    color: #0c63e4;
    background-color: var(--white);
    box-shadow: inset 0 -1px 0 rgb(0 0 0 / 13%);
}

.btn-link {
    color: var(--yellow);
    /*color: var(--brown); */
}

.btn-link:hover {
    color: var(--yellow);
}

.btn.focus, .btn:focus {
    box-shadow: 0 0 0 0.2rem rgb(243 167 18 / 25%);
}

/*.carousel-inner {height: 500px;}*/
.carousel-item img {height: auto; width:100%;}  
.carousel-item {text-align: center; }  
.carousel-indicators li {
    width:15px;
    height: 15px;
    margin-left:5px;
    margin-right:5px;
    border-radius: 50%;
    background-color:var(--brown);
}    

.carousel-indicators .active {
    background-color: var(--yellow);
}


.carousel-indicators {position: relative;}

.card-header .btn-link {
  letter-spacing: 1.4px;
  text-transform:capitalize;
}

.modal img {max-width:100%;}
.modal-body{text-align: center;}

/** Project Layout **/
.right-content {margin:3rem;}
.left-content {margin:3rem;}
.section {
    margin-bottom: 3rem;
}


@media only screen and (max-width: 414px) {

    body {font-size: 0.95rem;}   

    h1 { font-size: 1.75rem;}
    h2 { font-size: 1.1rem;}    

    h1.title , h2.title   {
      margin-bottom:0px;
      font-weight: 600; 
      letter-spacing: 1.3px;    
    }

    .card-header .btn-link {
      letter-spacing: 1.2px;
    }

    #project-header {     
        height: 3.62rem;
    }

    .right-content {margin:1rem;}
    .left-content {margin:1rem;}
    .section {
        margin-bottom: 2rem;
    }

    .carousel-item img {height: 500px; width:auto; max-width:100%;}  


 }