@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700&display=swap');

body {
    font-family: "Barlow", sans-serif;
    line-height: 1.7;
    color: #516171;
}

h1,h2,h3,h4,h5,h6 {
    font-weight: 700 !important;
    color: #092032;
}

a {
    color: #092032;
    text-decoration: none;
    transition: all 0.4s ease;
    font-weight: 500;
}

section {
    padding-top: 80px;
    padding-bottom: 80px;
}

img {
    width: 100%;
}

.bg-cover {
    background-position: center !important;
    background-size: cover !important;
    background-position: center !important;
}

.intro {
    margin-bottom: 40px;
}

.intro h6 {
    font-weight: 400;
    color: #89CFF0;
}

.intro p {
    max-width: 500px;
    margin: auto;
}

.btn-readmore{
    color: white;
}

.btn-readmore:hover{
    color: rgba(72,134,31,1);
    background-color: white;
}

/*navbar*/

.navbar {
    background-color: #fff;
    box-shadow: 0px 6px 30px rgba(0, 0, 0, 0.08);
}

.navbar a {
    color: #092032;
    text-decoration: none;
    transition: all 0.4s ease;
    font-weight: 500;
}

.navbar .navbar-nav .nav-link:hover, 
.navbar .navbar-nav .nav-link:active {
    color: #89CFF0;
}

.navbar-brand {
    font-weight: 700;
    font-size: 26px;
    color: #092032;
}

.navbar-brand span {
    color: #89CFF0;
}

/*Button*/
.btn {
    padding: 9px 24px;
}

.btn-brand {
    background-color: #89CFF0;
    color: #fff;
    border-color: #89CFF0;
}

.btn-brand:hover {
    background-color: #0047AB;
    border-color: #0047AB;
}

/*Slider*/

.slide1 {
    background: linear-gradient(rgba(177, 234, 247,0.4), rgba(125, 180, 235,0.4)), url(../img/bg1.png);
}

.slide2 {
    background: linear-gradient(rgba(177, 234, 247, 0.8), rgba(125, 180, 235, 0.8) 75%, rgba(36, 128, 205, 1) 75%), url(../img/bg3.jpg);
}

.slide2 p,
.slide2 i,
.slide2 h2 {
    color: white;
}

.slide2 i {
    font-size: 30px;
}

/*ABOUT*/
.about {
    background: linear-gradient(rgba(177, 234, 247,0.4), rgba(125, 180, 235,0.4)), url(../img/bg6.jpg);
}

.about h2,
.about p {
    color: white;
}

.about p {
    font-size: 20px;
}

/*SERVICES*/
.services {
    background: linear-gradient(rgba(15, 82, 186,0.4), rgba(125, 180, 235,0.4)), url(../img/bg11.jpg);
}

.services h2,
.services p {
    color: white;
}

.services p {
    font-size: 20px;
}

.cooperative {
    background: linear-gradient(rgba(15, 82, 186,0.4), rgba(125, 180, 235,0.4)), url(../img/cooperative.jpg);
}

.cooperative h2,
.cooperative p {
    color: white;
}

.cooperative p {
    font-size: 20px;
}

/*INFOBOX*/
.info-box{
    display: flex;
    align-items: center;
}

.info-box img {
    width: 50px;
    margin-right: 24px;
}

/*Milestone*/
#milestone {
    color: white;
}

#milestone .display-4 {
    font-weight: 700;
}

#description {
    color: white;
}

#description .display-4 {
    font-weight: 700;
}

.service-box {
    padding: 32px;
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.2);
    text-align: center;
}

.service-box img {
    width: 100px;
    margin-bottom: 12px;
}

/*Mission Vision Values*/
.mvv .service-box {
    padding: 32px;
    box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.2);
    text-align: center;
}

.mvv .service-box img {
    width: 100px;
    margin-bottom: 12px;
}

/*Business*/  
.container-carousel1 {
    width: 100%;
    display: flex;
    justify-content: center;
    height: 125px;
    gap: 10px;
  
    > div {
        flex: 0 0 120px;
        border-radius: 0.5rem;
        transition: 0.5s ease-in-out;
        cursor: pointer;
        box-shadow: 1px 5px 15px rgba(0, 0, 0, 0.2);
        position: relative;
        overflow: hidden;
  
        &:nth-of-type(1) {
            background: url("../img/business/ayusinko.jpg")
            no-repeat 0 / cover;
        }
        &:nth-of-type(2) {
            background: url("../img/business/Bills\ Payment\ Remittance\ V2.png")
            no-repeat 50% / cover;
        }
        &:nth-of-type(3) {
            background: url("../img/business/collective\ skilled.png")
            no-repeat 50% / cover;
        }
        &:nth-of-type(4) {
            background: url("../img/business/Cosmetics\ pink.png")
            no-repeat 0 / cover;
        }
        &:nth-of-type(5) {
            background: url("../img/business/CREMPCO-AGRI.png")
            no-repeat 0 / cover;
        }
        &:nth-of-type(6) {
            background: url("../img/business/CREMPCO-CONSTRUCTION-UPDATED.png")
            no-repeat 0 / cover;
        }
        &:nth-of-type(7) {
            background: url("../img/business/CREMPCO-DAIRY.png")
            no-repeat 0 / cover;
        }
        &:nth-of-type(8) {
            background: url("../img/business/CREMPCO-electrical\ contractor\ &\ installation\ coop.jpg")
            no-repeat 0 / cover;
        }
    
        .content {
            font-size: 1.5rem;
            color: #fff;
            display: flex;
            align-items: center;
            padding: 15px;
            opacity: 0;
            flex-direction: column;
            height: 100%;
            justify-content: flex-end;
            transform: translatey(100%);
            transition: opacity 0.5s ease-in-out, transform 0.5s 0.2s;
            visibility: hidden;
    
            span {
            display: block;
            margin-top: 5px;
            font-size: 1.2rem;
            }
        }
    
        &:hover {
            flex: 0 0 250px;
            box-shadow: 1px 3px 15px rgba(0, 0, 0, 0.3);
            transform: translatey(-30px);
        }
    
        &:hover .content {
            opacity: 1;
            transform: translatey(0%);
            visibility: visible;
        }
    }
}

.container-carousel1-4 {
    width: 100%;
    display: flex;
    justify-content: center;
    height: 125px;
    gap: 10px;
       
  
    > div {
        flex: 0 0 120px;
        border-radius: 0.5rem;
        transition: 0.5s ease-in-out;
        cursor: pointer;
        box-shadow: 1px 5px 15px rgba(0, 0, 0, 0.2);
        position: relative;
        overflow: hidden;
  
        &:nth-of-type(1) {
            background: url("../img/business/ayusinko.jpg")
            no-repeat 0 / cover;
        }
        &:nth-of-type(2) {
            background: url("../img/business/Bills\ Payment\ Remittance\ V2.png")
            no-repeat 50% / cover;
        }
        &:nth-of-type(3) {
            background: url("../img/business/collective\ skilled.png")
            no-repeat 50% / cover;
        }
        &:nth-of-type(4) {
            background: url("../img/business/Cosmetics\ pink.png")
            no-repeat 0 / cover;
        }
    
        .content {
            font-size: 1.5rem;
            color: #fff;
            display: flex;
            align-items: center;
            padding: 15px;
            opacity: 0;
            flex-direction: column;
            height: 100%;
            justify-content: flex-end;
            transform: translatey(100%);
            transition: opacity 0.5s ease-in-out, transform 0.5s 0.2s;
            visibility: hidden;
    
            span {
            display: block;
            margin-top: 5px;
            font-size: 1.2rem;
            }
        }
    
        &:hover {
            flex: 0 0 250px;
            box-shadow: 1px 3px 15px rgba(0, 0, 0, 0.3);
            transform: translatey(-30px);
        }
    
        &:hover .content {
            opacity: 1;
            transform: translatey(0%);
            visibility: visible;
        }
    }
}

.container-carousel5-8 {
    margin-top: 50px;
    width: 100%;
    display: flex;
    justify-content: center;
    height: 125px;
    gap: 10px;
  
    > div {
        flex: 0 0 120px;
        border-radius: 0.5rem;
        transition: 0.5s ease-in-out;
        cursor: pointer;
        box-shadow: 1px 5px 15px rgba(0, 0, 0, 0.2);
        position: relative;
        overflow: hidden;
  
        &:nth-of-type(1) {
            background: url("../img/business/CREMPCO-AGRI.png")
            no-repeat 0 / cover;
        }
        &:nth-of-type(2) {
            background: url("../img/business/CREMPCO-CONSTRUCTION-UPDATED.png")
            no-repeat 0 / cover;
        }
        &:nth-of-type(3) {
            background: url("../img/business/CREMPCO-DAIRY.png")
            no-repeat 0 / cover;
        }
        &:nth-of-type(4) {
            background: url("../img/business/CREMPCO-electrical\ contractor\ &\ installation\ coop.jpg")
            no-repeat 0 / cover;
        }
    
        .content {
            font-size: 1.5rem;
            color: #fff;
            display: flex;
            align-items: center;
            padding: 15px;
            opacity: 0;
            flex-direction: column;
            height: 100%;
            justify-content: flex-end;
            transform: translatey(100%);
            transition: opacity 0.5s ease-in-out, transform 0.5s 0.2s;
            visibility: hidden;
    
            span {
            display: block;
            margin-top: 5px;
            font-size: 1.2rem;
            }
        }
    
        &:hover {
            flex: 0 0 250px;
            box-shadow: 1px 3px 15px rgba(0, 0, 0, 0.3);
            transform: translatey(-30px);
        }
    
        &:hover .content {
            opacity: 1;
            transform: translatey(0%);
            visibility: visible;
        }
    }
}

.container-carousel2 {
    margin-top: 50px;
    width: 100%;
    display: flex;
    justify-content: center;
    height: 125px;
    gap: 10px;
  
    > div {
        flex: 0 0 120px;
        border-radius: 0.5rem;
        transition: 0.5s ease-in-out;
        cursor: pointer;
        box-shadow: 1px 5px 15px rgba(0, 0, 0, 0.2);
        position: relative;
        overflow: hidden;
    
        &:nth-of-type(1) {
            background: url("../img/business/CREMPCO-FARMING.png")
            no-repeat 0 / cover;
        }
        &:nth-of-type(2) {
            background: url("../img/business/CREMPCO-HOGS.png")
            no-repeat 0 / cover;
        }
        &:nth-of-type(3) {
            background: url("../img/business/CREMPCO-LENDINGv1(1).png")
            no-repeat 0 / cover;
        }
        &:nth-of-type(4) {
            background: url("../img/business/CREMPCO\ food\ manufacturing.png")
            no-repeat 0 / cover;
        }
        &:nth-of-type(5) {
            background: url("../img/business/crempco\ realty\ &\ property\ v3.2-01_1(1).png")
            no-repeat 50% / cover;
        }
        &:nth-of-type(6) {
            background: url("../img/business/doctor\ cleaners\ circular\ V2\ w\ crempco\ logo.png")
            no-repeat 0 / cover;
        }
        &:nth-of-type(7) {
            background: url("../img/business/job\ access.png")
            no-repeat 0 / cover;
        }
        &:nth-of-type(8) {
            background: url("../img/business/kasambahay-logo.png")
            no-repeat 50% / cover;
        }
    
        .content {
            font-size: 1.5rem;
            color: #fff;
            display: flex;
            align-items: center;
            padding: 15px;
            opacity: 0;
            flex-direction: column;
            height: 100%;
            justify-content: flex-end;
            transform: translatey(100%);
            transition: opacity 0.5s ease-in-out, transform 0.5s 0.2s;
            visibility: hidden;
    
            span {
            display: block;
            margin-top: 5px;
            font-size: 1.2rem;
            }
        }
    
        &:hover {
            flex: 0 0 250px;
            box-shadow: 1px 3px 15px rgba(0, 0, 0, 0.3);
            transform: translatey(-30px);
        }
    
        &:hover .content {
            opacity: 1;
            transform: translatey(0%);
            visibility: visible;
        }
    }
}

.container-carousel9-12 {
    margin-top: 50px;
    width: 100%;
    display: flex;
    justify-content: center;
    height: 125px;
    gap: 10px;
       
  
    > div {
        flex: 0 0 120px;
        border-radius: 0.5rem;
        transition: 0.5s ease-in-out;
        cursor: pointer;
        box-shadow: 1px 5px 15px rgba(0, 0, 0, 0.2);
        position: relative;
        overflow: hidden;
  
        &:nth-of-type(1) {
            background: url("../img/business/CREMPCO-FARMING.png")
            no-repeat 0 / cover;
        }
        &:nth-of-type(2) {
            background: url("../img/business/CREMPCO-HOGS.png")
            no-repeat 0 / cover;
        }
        &:nth-of-type(3) {
            background: url("../img/business/CREMPCO-LENDINGv1(1).png")
            no-repeat 0 / cover;
        }
        &:nth-of-type(4) {
            background: url("../img/business/CREMPCO\ food\ manufacturing.png")
            no-repeat 0 / cover;
        }
    
        .content {
            font-size: 1.5rem;
            color: #fff;
            display: flex;
            align-items: center;
            padding: 15px;
            opacity: 0;
            flex-direction: column;
            height: 100%;
            justify-content: flex-end;
            transform: translatey(100%);
            transition: opacity 0.5s ease-in-out, transform 0.5s 0.2s;
            visibility: hidden;
    
            span {
            display: block;
            margin-top: 5px;
            font-size: 1.2rem;
            }
        }
    
        &:hover {
            flex: 0 0 250px;
            box-shadow: 1px 3px 15px rgba(0, 0, 0, 0.3);
            transform: translatey(-30px);
        }
    
        &:hover .content {
            opacity: 1;
            transform: translatey(0%);
            visibility: visible;
        }
    }
}

.container-carousel13-16 {
    margin-top: 50px;
    width: 100%;
    display: flex;
    justify-content: center;
    height: 125px;
    gap: 10px;
  
    > div {
        flex: 0 0 120px;
        border-radius: 0.5rem;
        transition: 0.5s ease-in-out;
        cursor: pointer;
        box-shadow: 1px 5px 15px rgba(0, 0, 0, 0.2);
        position: relative;
        overflow: hidden;
  
        &:nth-of-type(1) {
            background: url("../img/business/crempco\ realty\ &\ property\ v3.2-01_1(1).png")
            no-repeat 50% / cover;
        }
        &:nth-of-type(2) {
            background: url("../img/business/doctor\ cleaners\ circular\ V2\ w\ crempco\ logo.png")
            no-repeat 0 / cover;
        }
        &:nth-of-type(3) {
            background: url("../img/business/job\ access.png")
            no-repeat 0 / cover;
        }
        &:nth-of-type(4) {
            background: url("../img/business/kasambahay-logo.png")
            no-repeat 50% / cover;
        }
    
        .content {
            font-size: 1.5rem;
            color: #fff;
            display: flex;
            align-items: center;
            padding: 15px;
            opacity: 0;
            flex-direction: column;
            height: 100%;
            justify-content: flex-end;
            transform: translatey(100%);
            transition: opacity 0.5s ease-in-out, transform 0.5s 0.2s;
            visibility: hidden;
    
            span {
            display: block;
            margin-top: 5px;
            font-size: 1.2rem;
            }
        }
    
        &:hover {
            flex: 0 0 250px;
            box-shadow: 1px 3px 15px rgba(0, 0, 0, 0.3);
            transform: translatey(-30px);
        }
    
        &:hover .content {
            opacity: 1;
            transform: translatey(0%);
            visibility: visible;
        }
    }
}

.container-carousel3 {
    margin-top: 50px;
    width: 100%;
    display: flex;
    justify-content: center;
    height: 125px;
    gap: 10px;
  
    > div {
        flex: 0 0 120px;
        border-radius: 0.5rem;
        transition: 0.5s ease-in-out;
        cursor: pointer;
        box-shadow: 1px 5px 15px rgba(0, 0, 0, 0.2);
        position: relative;
        overflow: hidden;

      &:nth-of-type(1) {
        background: url("../img/business/Lgistics.png")
          no-repeat 0 / cover;
      }
      &:nth-of-type(2) {
        background: url("../img/business/manpowev1.png")
          no-repeat 0 / cover;
      }
      &:nth-of-type(3) {
        background: url("../img/business/Partynfun\ v5.png")
          no-repeat 0 / cover;
      }
      &:nth-of-type(4) {
        background: url("../img/business/PEST-CONTROL.png")
          no-repeat 0 / cover;
      }
      &:nth-of-type(5) {
        background: url("../img/business/position_textAsset-2@4x-768x203.png")
          no-repeat 50% / cover;
      }
      &:nth-of-type(6) {
        background: url("../img/business/travel\ &\ tours.png")
          no-repeat 0 / cover;
      }
      &:nth-of-type(7) {
        background: url("../img/business/WORK-GLOBAL.png")
          no-repeat 0 / cover;
      }
      &:nth-of-type(8) {
        background: url("../img/business/yallamovers-logo.png")
          no-repeat 50% / cover;
      }
    
        .content {
            font-size: 1.5rem;
            color: #fff;
            display: flex;
            align-items: center;
            padding: 15px;
            opacity: 0;
            flex-direction: column;
            height: 100%;
            justify-content: flex-end;
            transform: translatey(100%);
            transition: opacity 0.5s ease-in-out, transform 0.5s 0.2s;
            visibility: hidden;
    
            span {
            display: block;
            margin-top: 5px;
            font-size: 1.2rem;
            }
        }
    
        &:hover {
            flex: 0 0 250px;
            box-shadow: 1px 3px 15px rgba(0, 0, 0, 0.3);
            transform: translatey(-30px);
        }
    
        &:hover .content {
            opacity: 1;
            transform: translatey(0%);
            visibility: visible;
        }
    }
}

.container-carousel17-20 {
    margin-top: 50px;
    width: 100%;
    display: flex;
    justify-content: center;
    height: 125px;
    gap: 10px;
       
  
    > div {
        flex: 0 0 120px;
        border-radius: 0.5rem;
        transition: 0.5s ease-in-out;
        cursor: pointer;
        box-shadow: 1px 5px 15px rgba(0, 0, 0, 0.2);
        position: relative;
        overflow: hidden;
  
        &:nth-of-type(1) {
            background: url("../img/business/Lgistics.png")
              no-repeat 0 / cover;
          }
          &:nth-of-type(2) {
            background: url("../img/business/manpowev1.png")
              no-repeat 0 / cover;
          }
          &:nth-of-type(3) {
            background: url("../img/business/Partynfun\ v5.png")
              no-repeat 0 / cover;
          }
          &:nth-of-type(4) {
            background: url("../img/business/PEST-CONTROL.png")
              no-repeat 0 / cover;
          }
    
        .content {
            font-size: 1.5rem;
            color: #fff;
            display: flex;
            align-items: center;
            padding: 15px;
            opacity: 0;
            flex-direction: column;
            height: 100%;
            justify-content: flex-end;
            transform: translatey(100%);
            transition: opacity 0.5s ease-in-out, transform 0.5s 0.2s;
            visibility: hidden;
    
            span {
            display: block;
            margin-top: 5px;
            font-size: 1.2rem;
            }
        }
    
        &:hover {
            flex: 0 0 250px;
            box-shadow: 1px 3px 15px rgba(0, 0, 0, 0.3);
            transform: translatey(-30px);
        }
    
        &:hover .content {
            opacity: 1;
            transform: translatey(0%);
            visibility: visible;
        }
    }
}

.container-carousel21-24 {
    margin-top: 50px;
    width: 100%;
    display: flex;
    justify-content: center;
    height: 125px;
    gap: 10px;
  
    > div {
        flex: 0 0 120px;
        border-radius: 0.5rem;
        transition: 0.5s ease-in-out;
        cursor: pointer;
        box-shadow: 1px 5px 15px rgba(0, 0, 0, 0.2);
        position: relative;
        overflow: hidden;
  
            &:nth-of-type(1) {
            background: url("../img/business/position_textAsset-2@4x-768x203.png")
              no-repeat 50% / cover;
            }
            &:nth-of-type(2) {
                background: url("../img/business/travel\ &\ tours.png")
                no-repeat 0 / cover;
            }
            &:nth-of-type(3) {
                background: url("../img/business/WORK-GLOBAL.png")
                no-repeat 0 / cover;
            }
            &:nth-of-type(4) {
                background: url("../img/business/yallamovers-logo.png")
                no-repeat 50% / cover;
            }
    
        .content {
            font-size: 1.5rem;
            color: #fff;
            display: flex;
            align-items: center;
            padding: 15px;
            opacity: 0;
            flex-direction: column;
            height: 100%;
            justify-content: flex-end;
            transform: translatey(100%);
            transition: opacity 0.5s ease-in-out, transform 0.5s 0.2s;
            visibility: hidden;
    
            span {
            display: block;
            margin-top: 5px;
            font-size: 1.2rem;
            }
        }
    
        &:hover {
            flex: 0 0 250px;
            box-shadow: 1px 3px 15px rgba(0, 0, 0, 0.3);
            transform: translatey(-30px);
        }
    
        &:hover .content {
            opacity: 1;
            transform: translatey(0%);
            visibility: visible;
        }
    }
}

/*Contact Us*/
.form-control:focus {
    box-shadow: none;
    border-color: #89CFF0;
}