@font-face { font-family: 'Helvetica';src: url('../fonts/HelveticaNeue.ttc')format('truetype'); }

html { scroll-behavior: smooth; }
body{
    font-family: 'Helvetica', sans-serif;
    color: #000000;
    overflow-x: hidden;
    letter-spacing: 1.3px;
}

a {
    color: #000;
    text-decoration: underline;
}

/* Fonts */
/*.roboto-black { font-family: RobotoBlack;letter-spacing: 1.5px; }*/

/* Color */
.color-primary { color: #27255F }
.color-secondary { color: #DB5078 }
.color-red { color: #EA1818; }
.color-black { color: #000000; }

/* Background */
.bg-blue { background-color: #27255F }
.bg-red { background-color: #EA1818; }
.bg-black { background-color: #000000; }


.navbar-nav.menu-nav a {
    font-size: 1rem;
    font-weight: bold;
    font-style: italic;
    margin: 0 10px;
    color: #000000 !important;
    text-decoration: none;
}
.navbar-nav.menu-nav a:hover, .navbar-nav.menu-nav a.active {
    border-bottom: 3px solid #27255F;
}

.btn-badge-catha {
    color: #fff !important;
    background-color: #27255F;
    text-decoration: none;
}

.row {
    margin: 1rem 0;
}

.parallax {
  /* The image used */
  /*background-image: url("img_parallax.jpg");*/

  /* Set a specific height */
  min-height: 500px; 

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.bg-style-1 {
  /* The image used */
  background-image: url("../images/img-style-1.png");
  /*background-color: #fff;*/

  /* Set a specific height */
  min-height: 600px; 

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: left 80%;
  background-repeat: no-repeat;
  background-size: 70%;
}

.section-1 { height: 600px }
.section-3 { height: 850px }
.section-6 { height: 400px }

.img-style-1 {
    position: absolute;
    width: 70%;
    top: 7rem;
    left: -7%;
}
.img-style-2 {
    position: absolute;
    height: 50rem;
    top: 8%;
    right: -1%;
}
.img-style-3 {
    position: absolute;
    height: 80%;
    top: 7rem;
    left: -2%;
}
.img-style-4 {
    position: absolute;
    height: 20rem;
    right: -1%;
    top: 50%;
}
.img-style-5 {
    position: absolute;
    height: 15rem;
    left: -8%;
    bottom: 3.5%;
}
.img-style-6 {
    position: absolute;
    height: 25rem;
    right: 10%;
    bottom: -4.4%;
}

.caption-1 {
    position: absolute;
    font-size: 4.5rem;
    font-weight: bold;
    top: 4rem;
    left: 13%;
}
.caption-2 {
    position: absolute;
    font-size: 3rem;
    font-style: italic;
    font-weight: bold;
    top: 13rem;
    right: 12%
}

.icon-bussiness {
    padding: 1rem;
    height: 7rem;
    border-radius: 15px;
    -webkit-box-shadow: 1px 0px 5px 6px #f7f7f7;  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
    -moz-box-shadow: 1px 0px 5px 6px #f7f7f7;  /* Firefox 3.5 - 3.6 */
    box-shadow: 1px 0px 5px 6px #f7f7f7;  /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
}

.our-works {
    margin-bottom: 5rem;
}

.item-our-works {
    border-radius: 15px;
    -webkit-box-shadow: 1px 0px 5px 6px #f7f7f7;  /* Safari 3-4, iOS 4.0.2 - 4.2, Android 2.3+ */
    -moz-box-shadow: 1px 0px 5px 6px #f7f7f7;  /* Firefox 3.5 - 3.6 */
    box-shadow: 1px 0px 5px 6px #f7f7f7;  /* Opera 10.5, IE 9, Firefox 4+, Chrome 6+, iOS 5 */
}

.list-our-works { 
    overflow-x: scroll;
    /* We don't want vertical scrolling */
    overflow-y: hidden;
    /* Make an auto-hiding scroller for the 3 people using a IE */
    -ms-overflow-style: -ms-autohiding-scrollbar;
    /* For WebKit implementations, provide inertia scrolling */
    -webkit-overflow-scrolling: touch;
    /* We don't want internal inline elements to wrap */
    white-space: nowrap;
    /* Remove the default scrollbar for WebKit implementations */
}
.list-our-works::-webkit-scrollbar {
    display: none;
}

.our-clients img { width: 20%;height: auto; }


footer {
    background-color: #000A3C
}
    .footer a { color: #ffffff; font-weight: bold; padding: 1rem 0 }
    .footer .icon-social { padding: 0 .3rem }
    .footer .icon-social i { font-size: 1.5rem; color:#000000; padding: .2rem .3rem; background-color: #fff; }
    footer .logo { width: 40% }

@media (max-width: 575.98px) {
    .section-1 { height: 300px; }
    .section-3 { height: 300px; }
    .section-6 { height: 100px }

    .img-style-1 { width: 85%; top: 35%; left: -13% }
    .img-style-2 { height: 80%; right: -4.4% }
    .img-style-3 { height: 45%;top: 30%;left: -10%; }
    .img-style-4 { height: 30%; top: 50%; right: -4.4%; }
    .img-style-5 { height: 50%; left: -10% }
    .img-style-6 { width: 100%; height: auto; right: -2%; bottom: -17% }

    .caption-1 { font-size: 1.5rem;left: 6%; }
    .caption-2 { font-size: 1.3rem;top: 10%;right: 10%; }
    .caption-2 p { line-height: 1 }
    .caption-2 .h4 { font-size: .8rem }

    .our-works h3 { font-size: 1.5rem }

    .our-clients { margin-bottom: 5rem }
    .our-clients img { width: 50% }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) and (max-width: 991.98px) {
    .section-1 { height: 400px; }
    .section-3 { height: 500px; }
    .section-6 { height: 300px }

    .img-style-1 { width:80%; top: 40%; left: -10% }
    .img-style-2 { height: 35rem; right: -2% }
    .img-style-3 { height: 75%;top: 10% }
    .img-style-4 { height: 15rem; top: 20%; right: -2%; }
    .img-style-6 { height: 15rem }
    .img-style-5 { height: 10rem; left: -10% }

    .caption-1 { font-size: 3.5rem;left: 6%; }
    .caption-2 { font-size: 1.3rem;top: 15%;right: 20%; }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) and (max-width: 1280px) {
    .caption-1 { font-size: 4rem }
    .caption-2 { right: 9% }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    #services { margin-top: 10rem }
}