/* GLOBAL STYLES
-------------------------------------------------- */
/* Padding below the footer and lighter body text */

*{ /*Reset all default spacing given*/
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    scroll-behavior: smooth;
}

body {
    padding-top:2rem;
    color: #5a5a5a;
    background-color: #DEDEDE;
}

.navbar {
    font-family: 'PT Serif', serif;
    font-weight: 400;
    color: #D2D2D2;
    /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#3b679e+0,2b88d9+50,207cca+51,7db9e8+100;Blue+Gloss+%232 */
background: #3b679e; /* Old browsers */
background: -moz-linear-gradient(top,  #3b679e 0%, #2b88d9 50%, #207cca 51%, #7db9e8 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #3b679e 0%,#2b88d9 50%,#207cca 51%,#7db9e8 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #3b679e 0%,#2b88d9 50%,#207cca 51%,#7db9e8 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3b679e', endColorstr='#7db9e8',GradientType=0 ); /* IE6-9 */

    border-radius:0 0 30px ;
    box-shadow:0 5px 5px rgba(153,153,153,0.5); 
}

nav-link {
font-family: 'PT Serif', serif;
}

.navbar-brand img {
    max-height: 30px;
}

/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

/* Carousel base class */
.carousel {
  margin-bottom: 4rem;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
  bottom: 5rem;
  z-index: 10;
    background:rgba(255,255,255,0.6);
    border-radius:0 0 30px 0;
    border-left:10px solid #3b679e;
    margin-bottom: 2rem;
}

.carousel-caption h1 {
    font-family: 'PT Serif', serif;
    font-weight: 700;
    color: #020066;
    text-align:left;
}

.carousel-caption p {
    font-family: 'Nunito Sans', sans-serif;
    color: #000000;
    text-shadow: 1px 1px 4px #D2D2D2;
}

/* Declare heights because of positioning of img element */
.carousel-item {
  height: 30rem;
}
.carousel-item > img {
  position: absolute;
  top: 0;
  left: 0;
    max-width: 100%;
    background-repeat: no-repeat;
}

h1 {
    font-family: 'PT Serif', serif;
    font-weight: 700;
    color: #020066;
    text-align: center;
}

 .about-us .col-md-6 {
   padding-top: 4rem;
}
.about-us h6  {
    font-family: 'Nunito Sans', sans-serif;
    line-height:1.5em;
    padding-top: 2rem;
}
.about-us img {
    border-radius:0 0 0 60px;
    padding-top: 2rem;
}

.works {
   margin-top: 5rem; 
}


.works h1 {
    text-align: center;
}

.works-text h6 {
    padding: 2rem;
    font-family: 'Nunito Sans', sans-serif;
    background:#CCD3E3; 
    border-radius: 20px; 
    box-shadow: 2px 2px 5px #B1B1B1;
    line-height: 1.5em;
    margin-bottom:5rem;
}

.products {
    margin-top: 5rem;
}
.products .row div {
    background:#CCD3E3; border-radius: 20px; box-shadow: 4px 5px 5px #B1B1B1; padding-bottom: 2.5rem;"
}
.products h1 {
    text-align: center;
    font-family: 'PT Serif', serif;
    font-weight: 700;
    color: #000000;
    padding-top: 2rem;
padding-bottom: 1rem;
}

.products img {
    height: 10rem;
    display: block;
  margin-left: auto;
  margin-right: auto;
}

.products p {
    text-align: center;
       font-family: 'Nunito Sans', sans-serif;
        color: #020066;
    padding-left: 3rem;
    padding-right: 3rem;
    padding-top: 2rem;
    font-size: 0.9rem;
}

.btn-group-lg>.btn, .btn-lg {
        font-family: 'Nunito Sans', sans-serif;
    padding: .5rem 1rem;
    font-size: 1.25rem;
    line-height: 1.5;
    border-radius: 0.7rem;
}

.btn-primary {
    color: #fff;
    background-color: #020066;
}

.contact-us h1{
    font-family: 'PT Serif', serif;
    font-weight: 700;
    color: #020066;
padding-bottom: 2rem;
    padding-top: 5rem;
}

.contact-us h6 {
    font-family: 'Nunito Sans', sans-serif;
    color: #000000;
padding-bottom: 3rem;
    padding-left: 3rem;
}

.contact-us svg{
    float:left;
    margin-left: 20px;
}


/* RESPONSIVE CSS
-------------------------------------------------- */

/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media (max-width: 768px) { 
    .nav-link{
        padding-top:1rem;
        padding-bottom:1rem;
        border-bottom:1px solid rgba(255,255,255,0.5);
    }
 .carousel-item {
  height: 15rem;
}
    .carousel-caption {
  bottom: 4rem;
        padding:10px;
    }
    .carousel-caption h1 {
    font-size:1.2em;
}
    .map {
       height:300px;
    }
    .slider {
        width: 80%;
    }
}

/* Small devices (landscape phones, 576px and up) */
@media (max-width: 576px) {  
 .slick-slide img {
        max-width: 200px;
    }
    .slider {
        width:80%;
    }
}
/* Extra Small devices (portrait phones, 360px and up) */
@media (max-width: 360px) {  
 .slick-slide img {
        max-width: 150px;
    }
    .carousel {
        margin-bottom:0px;
    }
    .carousel-item {
  height: 12rem;
}
    .carousel-caption {
  bottom: 3rem;
        padding:5px;
        width:50%;
    }
    .carousel-caption h1 {
    font-size:1em;
}
.carousel-indicators {
    display:none;
}
}

@media screen and (orientation:portrait) { 
    carousel-item > img  { height:auto; width:100%; }
}

@media screen and (orientation:landscape) {
    carousel-item > img  { height:100%; width:auto; }
}