/* @tailwind base;
@tailwind components;
@tailwind utilities; */

/**********
    FRONT-END SCRIPT
    by RD Cruz, IT Officer I
    Experience Design Division
***********/

/* @import '~bootstrap/dist/css/bootstrap.css'; */
/* @import 'node_modules/fontawesome/css/all.min.css'; */


:root {
    --black: #000000;
    --black25: #252525;
    --white: #ffffff;
    --whitef5: #f5f5f7;
    --lightgrey: #dad6cb;
    --darkgrey: #454545;
    --green: #09A852;
    --darkmaroon: #290204;
    --primary: #600e11;
    --secondary: #984848;
    --tertiary: #c27b3d;
    --red: #C12331;
    --error: #C12331;
}


/* CUSTOM CSS : TAGS */
* {
    font-family: 'Montserrat', sans-serif;
    color: var(--black25)
}

a { color: var(--secondary) }

a:hover {
    transition: .3s;
}

body { padding-top: 200px!important }

html, body {
    padding: 0;
    margin: 0;
    overflow-x: hidden;
    color: var(--black25);
    background-color: var(--whitef5);
    font-size: 16px
}

h1, h2, h3, h4, h5, h6 {
    font-weight: bold;
    color: var(--primary) 
}

hr {
    border-top: 2px solid var(--darkgrey);
    opacity: 1
}

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

div.row > ul, div.row > ol  { padding-left: 50px }

/* NAVIGATION */
nav.navbar {
    background-color: var(--lightgrey);
    padding-bottom:0
} 

nav .nav-item {
    padding-top: 15px;
    padding-bottom: 15px;
}

ul.nav { width: 100% }

li.nav-item > a.nav-link { 
    color: var(--black25);
    text-transform: uppercase;
}

.nav-item.active { background-color: var(--primary) }

.nav-item.active > a {
    color: var(--white)!important;
    font-weight: 900
}

.nav-item:hover > a.nav-link { text-decoration: underline }

.img-logo { height: 70px; }

/* FOOTER */
footer > div { padding: 3vw 5vw!important; }

footer > div:nth-child(1) { background-color: var(--white); }

footer a { color: var(--black25) }

.footer.nav { 
    display: block;
}

footer p, footer address { font-size: .8em; }

.footer.nav > li.nav-item { display: flex }

.social.nav > li.nav-item > a {
    font-size: 40px;
    color: var(--black25);
    cursor: pointer;
}

.social.nav > li.nav-item:hover > a {
    color: var(--secondary);
}

.no-gift {
    padding: 10px 20px;
    background-color: var(--error);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: var(--white);
    border-radius: 20px;
    font-size: 20px;
}

.no-gift > span {
    font-weight: bold;
    font-size: 35px;
    color: var(--white);
    margin-left: 10px
}

.footer-rp {
    display: flex;
    align-items: flex-start;
}

/* HOME PAGE Banner Carousel */

.carousel-item { 
    height: 700px;
    width: 100%;
    overflow: hidden;
    position: relative;
    background-repeat: no-repeat;
    background-size:contain;
    background-position: center center;
}
/* .carousel-item > img {
    height: inherit;
    width: 100%;
    margin: 0 auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    object-fit: cover;
    object-position: center;
} */

/* HOME PAGE */
.signature-event-list {
    column-count: 2;
    column-gap: 3vw;
    margin: 0 auto;
}

.signature-event-list > div {
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
    margin-bottom: 40px
}

.signature-event-list > div > img { margin-bottom: 30px }

.otf-event-list > div {
    display: flex;
    align-items: flex-start;
    margin-bottom: 40px
}

.otf-event-list > div > img {
    width: 10vw;
    border-radius: 20px;
    margin-right: 25px;
}

.announcement-box {
    padding: 10px;
    background-color: var(--white);
    border: 1px solid var(--darkgrey);
    border-radius: 20px;
}

.announcement-box > ul {
    padding-left: 20px;
    margin-bottom: 0;
    text-indent: -43px;
    margin-left: 43px;
}

.announcement-box > ul > li {
    list-style: none;
    margin-top:10px;
    margin-bottom:10px;
}

.announcement-box > ul > li:before {
    content: "NEW";
    color: var(--white);
    background-color: var(--green);
    padding: 4px;
    border-radius: 5px;
    font-size: 12px;
}

/* ABOUT */
.list-block-center {
    padding-left: 0;
    text-align: center;
}

.list-block-center > li {
    list-style: none;
    background-color: var(--darkgrey);
    display: inline-block;
    padding: 8px 16px;
    border-radius: 10px;
    margin: 0 20px;
}

.list-block-center > li > a {
    color: var(--white);
    text-decoration: none;
}

/* OPPORTUNITIES */
.procurement-item {
    border: 1px solid var(--darkgrey);
    padding: 20px;
    border-radius: 20px;
    background-color: var(--white);
}
.procurement-item > p:last-child { margin-bottom:0 }

ul.procurement-document-list { padding-left: 0 }

ul.procurement-document-list > li {
    list-style: none;
    display: inline-block;
    margin-right: 20px;
}

ul.procurement-document-list > li > .fa-square-check { color: var(--green) }

ul.procurement-document-list > li > .fa-square-xmark { color: var(--red) }

/* SERVICES */
.sub-heading {
    font-size: 35px;
    color: var(--primary);
    font-weight: 500;
}

/* PRESS RELEASE */
.press-release h2 {
    font-size: 20px
}

/* CONTACT US */
.contactUsMessage {
    min-height: 10rem !important;
    resize: none;
}
.google-map {
    border:1px solid var(--lightgrey);
    width:100%;
    height:400px;
    border-radius:30px
}

/* CUSTOM CSS : CLASS */
.accordion-item {
    background-color: transparent;
    border: 0;
}

.accordion-header {
    margin-bottom: 20px;
    background-color: var(--white);
    border: 1px solid var(--darkgrey);
    border-radius: 20px;
}

.accordion-button { border-radius: 20px; }

.accordion-item h2 { margin-bottom:0 } 

.accordion-item:first-of-type, .accordion-item:first-of-type .accordion-button {
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}
 
.accordion-item:last-of-type .accordion-button.collapsed {
    border-bottom-right-radius: 20px;
    border-bottom-left-radius: 20px;
}

.accordion-body {
    padding: 30px 40px;
    background-color: var(--white);
    border: 1px solid var(--darkgrey);
    border-radius: 40px;
    margin-bottom:20px
} 

.bg-whitef5 { background-color: var(--whitef5) }
.bg-darkgrey { background-color: var(--darkgrey); }
.bg-lightgrey { background-color: var(--lightgrey); }
.bg-maroon { background-color: var(--darkmaroon); }
.bg-maroon * { color:#ffffff }

.fit200px { height: 200px; }
.fit400px { height: 400px; }

.fit-image {
    margin-bottom: 30px;
    overflow: hidden;
    position: relative;
    border-radius: 30px;
}

.fit-image > img {
    height: inherit;
    width: 100%;
    margin: 0 auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    object-fit: cover;    
    object-position: center;
}

.text-red { color: var(--red) }

.clearfix {
    overflow: auto;
}

.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

.mt-20 { margin-top: 20px }
.mt-40 { margin-top: 40px }
.mt-60 { margin-top: 60px }
.mt-80 { margin-top: 80px }
.mb-20 { margin-bottom: 20px }
.mb-40 { margin-bottom: 40px }
.mb-60 { margin-bottom: 60px }
.mb-80 { margin-bottom: 80px }

.pt-20 { padding-top: 20px } 
.pt-40 { padding-top: 40px }
.pt-60 { padding-top: 60px }
.pt-80 { padding-top: 80px }
.pb-20 { padding-bottom: 20px }
.pb-40 { padding-bottom: 40px }
.pb-60 { padding-bottom: 60px }
.pb-80 { padding-bottom: 80px }

.round-corner {
    border-radius: 40px
}

.no-margin { margin: 0}

.page-banner {
    height: 300px;
    background-size:cover;
    background-repeat: no-repeat;
    background-position: center center;
}

.about-citem { background-image: url('https://staging.citem.com.ph/images/page-banners/about-citem.png') }
.about-key-officers { background-image: url('https://staging.citem.com.ph/images/page-banners/about-key-officers.png') }
.about-programs { background-image: url('https://staging.citem.com.ph/images/page-banners/about-programs.png') }
.about-useful-links { background-image: url('https://staging.citem.com.ph/images/page-banners/about-useful-links.png') }
.brand-design { background-image: url('https://staging.citem.com.ph/images/page-banners/brand-design.png') }
.brand-food { background-image: url('https://staging.citem.com.ph/images/page-banners/brand-food.png') }
.brand-lifestyle { background-image: url('https://staging.citem.com.ph/images/page-banners/brand-lifestyle.png') }
.brand-fashion { background-image: url('https://staging.citem.com.ph/images/page-banners/brand-fashion.png') }
.opportunities-career { background-image: url('https://staging.citem.com.ph/images/page-banners/opportunities-career.png') }
.opportunities-contracts { background-image: url('https://staging.citem.com.ph/images/page-banners/opportunities-contracts.png') }
.opportunities-job-order { background-image: url('https://staging.citem.com.ph/images/page-banners/opportunities-job-order.png') }
.opportunities-noa { background-image: url('https://staging.citem.com.ph/images/page-banners/opportunities-noa.png') }
.opportunities-procurement { background-image: url('https://staging.citem.com.ph/images/page-banners/opportunities-procurement.png') }
.se-create { background-image: url('https://staging.citem.com.ph/images/page-banners/se-create.png') }
.se-fame { background-image: url('https://staging.citem.com.ph/images/page-banners/se-fame.png') }
.se-ifex { background-image: url('https://staging.citem.com.ph/images/page-banners/se-ifex.png') }
.se-ssx { background-image: url('https://staging.citem.com.ph/images/page-banners/se-ssx.png') }
.services-buyers { background-image: url('https://staging.citem.com.ph/images/page-banners/services-buyers.png') } 
.services-exporters { background-image: url('https://staging.citem.com.ph/images/page-banners/services-exporters.png') }
.services-payment { background-image: url('https://staging.citem.com.ph/images/page-banners/services-payment.png') }
.tou-privacy { background-image: url('https://staging.citem.com.ph/images/page-banners/tou-privacy.png') } 
.contact { background-image: url('https://staging.citem.com.ph/images/page-banners/contact.png') }
.press { background-image: url('https://staging.citem.com.ph/images/page-banners/press.png') }

ul.list-images { padding-left:0 }
ul.list-images > li {
    list-style: none;
    display: inline-block;
    margin: 20px;
}
ul.list-images > li img { height: 140px }

@media only screen and (min-width: 1400px) {
    .navbar-expand-xxl {
        display: block;
    }
}