:root {

  --cream: rgb(255,245,233);
  --salmon: rgb(230,191,171);
  --red: rgb(126,46,60);

  --light-grey: rgb(238,238,238);
  --grey: rgb(126,126,126);
  --black80: #373737;

  --bs-font-sans-serif: 'Sofia Sans Extra Condensed', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

}
.navbar {
    --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255,245,233, 0.99%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.row-flex {
    display: flex;
    flex-wrap: wrap;
}

html {
    height:100%;
    font-family: var(--bs-font-sans-serif);
    max-width: 768px;
    margin: 0 auto !important;
}

body {
    padding-top:50px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    background-color: #fff;
    height:100%;
    color: var(--cream);
    font-family: var(--bs-font-sans-serif);
}

.dc-text-col-salmon, .dc-text-col-salmon a {
    color: var(--salmon) !important;
    text-decoration: none;
}
.dc-text-col-salmon a:hover {
    color: var(--cream) !important;
}

.navbar-toggler {
    color: var(--cream);
}

.navbar-toggler, .navbar-toggler:focus {
    border:0;
    box-shadow:none;
}
.navbar-collapse .navbar-toggler {
    padding-left: 0;
}
.navbar-close-icon {
  display: inline-block;
  width: 2.4em;
  height: 2.4em;
  vertical-align: middle;
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-x' viewBox='0 0 16 16'><path d='M4.646 4.646a.5.5 0 0 1 .708 0L8 7.293l2.646-2.647a.5.5 0 0 1 .708.708L8.707 8l2.647 2.646a.5.5 0 0 1-.708.708L8 8.707l-2.646 2.647a.5.5 0 0 1-.708-.708L7.293 8 4.646 5.354a.5.5 0 0 1 0-.708z'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
}
.navbar-toggler-icon {
    fill: var(--cream);
}

.dc-clients-page {
    padding-top:75px;
}

.dc-clients-page .navbar-toggler {
    background-color: var(--cream);
}

.dc-clients-page .navbar-toggler-icon {
    color: var(--grey);
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'><path stroke='currentColor' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/></svg>");
}
.nav-link {
    font-size: 21px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--grey);
    margin: 4px 0;
    padding-top:5px;
    padding-bottom:5px;
}

.navbar-collapse {
    position:fixed;
    top:15px;
    bottom:15px;
    left:15px;
    right:15px;
    padding:15px;
    background-color: var(--cream);
    color: var(--grey);

    -webkit-box-shadow: -7px 7px 5px 0px var(--salmon);
    -moz-box-shadow: -7px 7px 5px 0px var(--salmon);
    box-shadow: -7px 7px 5px 0px  var(--salmon);

    font-size: 21px;
    font-weight: 800;
    letter-spacing: .14em;
}

.nav-item {
    padding-left: 25px;
}

.navbar-text {
    letter-spacing: .07em;
    padding-left: 15px;
}

.navbar-collapse hr {
    color: var(--bs-navbar-active-color);
    height: 1px;
}
.navbar-text a {
    text-decoration: none;
    letter-spacing: .14em;
    display: block;
    margin-top: 10px;
}



.home-text {
    position: fixed;
    bottom: 45px;
    left:30px;
    right:30px;

}
.home-text h2 {
    color:var(--cream);
    /*color:var(--salmon);*/
    font-size: 21px;
    font-weight: 600;
    font-style: italic;
    letter-spacing: 0.14em;
    text-shadow: 1px 1px 2px #000;
    padding:4px 7px;
    border-bottom: 1px solid var(--red); 
}
.home-text h1 {
    margin-top:15px;
    text-transform: uppercase;
    text-align: right;
    color:var(--light-grey);
    font-weight:800;
    font-size:16px;
    letter-spacing:0.1em;
}

/** boxing the website on larger screens 88

@media(min-width:800px) {
    html {
        margin: 0 auto;
        background-color: #000;
    }
    body {
        border: 1px solid #ddd;
    }
    main {
        height:100%;
        overflow-y:auto;
    }
    div {
        max-width:768px !important;
    }

    .navbar-collapse, .home-text {
        left:50%;
        right: auto;
        width: 708px;
        transform: translateX(-50%);
    }

    .modal {
        left:50%;
        transform: translateX(-50%);   
    }

}/**/

.dc-expertise-page .accordion {
    margin-top:30px;
}

.dc-expertise-page .accordion-item {
    color: var(--blck80);
    background-color: transparent;
    border: 0;
    padding-top:10px;
    padding-bottom:10px;
}
.dc-expertise-page button.accordion-button {
    text-transform: uppercase;
    font-weight: 800;
    font-size:21px;
    letter-spacing: 0.14em;
    padding-bottom: 10px;
    padding-top:10px;
    display:inline-block;
    width:auto;
    padding-left:10px;
    margin-left:15px;
    color: var(--red);
    background-color: var(--salmon);
    border-radius: 0;
    outline:0;
}
.dc-expertise-page button.accordion-button.collapsed {
    background-color: transparent;
    color:var(--cream);
}
.dc-expertise-page button.accordion-button:focus {
    z-index: 3;
    border-color: transparent;
    outline: 0;
    box-shadow: none;
}

.dc-expertise-page .accordion-item:first-of-type button.accordion-button {
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
.dc-expertise-page .accordion-body {
    padding-top:2px;
    padding-right: 0;
    padding-left:0;
    margin-top:5px;
    margin-left:15px;
    margin-right:15px;
    border-top: 1px solid var(--cream);
}

.dc-accordion-content {
    background-color: var(--cream);
    font-size: 17px;
    line-height: 23px;
    font-weight: 400;
    color:var(--black80);
    letter-spacing: 0.04em;
    padding: 10px 15px;
}

.dc-expertise-page .btn-dc {
    display: inline-block;
    width:auto;
    padding:7px 15px;
    background-color: var(--cream);
    text-transform: uppercase;
    font-size: 21px;
    letter-spacing: 0.07em;
    color: var(--grey);
    border-radius: 0; 
    margin-top:7px;
    margin-bottom:7px;
}

.dc-case-study .modal-content {
    top:15px;
    bottom:15px;
    left:15px;
    right:15px;/**/
    border:0;
    border-radius:0;
    background-color: var(--cream);
    width: auto;
    position: fixed;
}
@media (min-width: 1000px){
    .dc-case-study .modal-content {
        top:15px;
        bottom:15px;
        left:50%;
        -moz-transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        -o-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        transform: translateX(-50%);
        max-width: 768px;
    }
}
.dc-case-study .modal-content button {
    margin-left:5px;
    margin-top:5px;
}

.dc-case-study .modal-body {
    padding:30px 30px 15px;
    color:var(--black80);
    font-size: 17px;
    line-height: 24px;
    letter-spacing: 0.04em;
}

.dc-case-study h3 {
    font-weight: 700;
    color:#000;
    font-size:17px;
    text-transform:uppercase;
    letter-spacing: 0.1em;
}

.dc-client-list {
    padding: 30px 0; /*15px 30px 30px;*/
}
.dc-client-list li {
    margin: 7px 0 14px;
}
.dc-client-name {
    font-size: 18px;
    letter-spacing: 0.04em;
    color: var(--black80);
}
.dc-client-synopsis {
    font-weight: 400;
    font-size: 15px;
    letter-spacing: 0.07em;
    color: var(--cream);
}
.dc-case-image {
    width:auto;
    max-width:100%;
    height:auto;
}
.dc-social-list {
    min-height: 70vh;
    height: 400px;
    max-height: 84vh;
    padding:30px;
}
.social-holder {
    width: 100%;
}
.social-item {
    display: block;
    margin: 25px auto;
    padding: 5px 0;
}
.social-item a {
    color: #fff;
    text-decoration: none;
    line-height: 48px;
    font-size: 28px;
    letter-spacing: 0.1em;
}
.social-item a img {
    height: 48px;
    width: auto;
    display: block;
}

h1.page-header {
    border-bottom: 1px solid var(--red);
    text-transform: uppercase;
    font-size: 24px;
    font-weight: 800;
    letter-spacing: 0.2em;
    margin-left: 25px;
    margin-right: 25px;
    padding-bottom: 5px;
    text-shadow: 1px 1px 2px var(--red);
}
.dc-clients-page h1.page-header, .dc-social-list h1.page-header {
    margin-left:0;
    margin-right:0;
    margin-bottom: 15px;
}

.home-text p {
    letter-spacing: 0.1em;
}