/*
Theme Name:

  1. >>> Header Style
  2. >>> Banner Style
  3. >>> About Style
  4. >>> Project Style
  5. >>> Footer Style

*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------*/

:root {
    --font_14: 0.875rem;
    --font_16: 1rem;
    --font_30: 1.875rem;
    --font_36: 2.25rem;
    --font_48: 3rem;
    --margin-54: 3.375rem;
    --margin-60: 3.75rem;
    --margin-100: 6.25rem;
    --margin-120: 7.5rem;
    --border-radius: 5px; /* Default border-radius for images */
    --red: #FF2400;
    --white: #FFF;
}

/*--------------------------------------------------------------
>>> Global Styles
----------------------------------------------------------------*/

.img-container {
    background-color: #f0f0f0; /* Light gray background color */
    width: 300px; /* Example width */
    height: 300px; /* Example height */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden; /* Ensure content doesn't overflow */
}

img, svg {
    max-width: 100%;
    height: auto;
}

img {
    border-radius: var(--border-radius); /* Apply border-radius to all corners */
    vertical-align: middle; /* Adjust vertical alignment */
    object-fit: cover; /* Controls how the image fits within the container */
}

html, body {
    font-family: 'Teachers', sans-serif;
    background-color: var(--white);
}

body {
    overflow-x: hidden;
    font-weight: 400;
    font-style: normal;
    color: #000;
    font-size: var(--font_14);
}

a, a:hover, a:focus, i, input, button, input:focus, .transition {
    text-decoration: none;
    outline: none;
    transition: all 0.4s ease;
    box-shadow: none;
    color: red; /* Change to make hyperlink text red */
}

iframe {
    border: 0;
    outline: none;
}

::-moz-selection, ::selection {
    background: var(--red);
    text-shadow: none;
    color: var(--white);
}

input, textarea {
    border-radius: 0;
    resize: none;
}

ul, figure {
    padding: 0;
    margin: 0;
}

@font-face {
    font-family: 'Teachers';
}

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
    background-color: white;
    background-image: none;
    color: #000;
}

.ds-border_text {
    position: relative;
    display: inline-block;
}

.ds-border_text span {
    position: relative;
    z-index: 1;
}

.ds-border_text:after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    background-color: #FF2400;
    height: 0.05rem;
    width: 100%;
}

.margin-60 {
    margin-bottom: var(--margin-60);
}

.padding-0 {
    padding-top: 0;
}

.ds-view-button {
    font-weight: 600;
    font-size: 1rem;
    color: #000;
}

.ds-view-button i {
    display: inline-block;
    vertical-align: middle;
    color: #FF2400;
    font-size: 1.625rem;
}

.ds-view-button:hover {
    color: #FF2400;
}

.text-left {
    text-align: left;
}

.ds-arrow {
    background: #FF2400;
    height: 0.125rem;
    width: 3.125rem;
    position: relative;
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
    transition: all 0.4s ease;
    margin-left: 0.5rem;
}

.ds-arrow:before, .ds-arrow:after {
    content: "";
    background: #FF2400;
    position: absolute;
    height: 0.125rem;
    width: 0.8125rem;
}

.ds-arrow:before {
    right: -0.25rem;
    bottom: -0.25rem;
    transform: rotate(-45deg);
}

.ds-arrow:after {
    right: -0.25rem;
    top: -0.25rem;
    transform: rotate(45deg);
}

.ds-button-arrow:hover .ds-arrow {
    margin-left: 0.9375rem;
}

.ds-back-to-home {
    display: inline-block;
    padding: 0.625rem 1.25rem;
    border-radius: 100%;
    border: 1px solid #000;
    font-size: 1.875rem;
    color: #000;
}

.ds-back-to-home:hover {
    color: #000;
}

/*--------------------------------------------------------------
>>> Header Style
----------------------------------------------------------------*/
.ds-header {
    padding-top: 3rem;
    padding-bottom: var(--margin-40);
}

.ds-logo:hover {
    color: #000;
}

/*--------------------------------------------------------------
>>> Banner Style
----------------------------------------------------------------*/
.ds-banner-section {
    text-align: left;
    margin-bottom: var(--margin-120);
}

.ds-heading, .ds-heading-inner {
    font-size: 4.375rem;
    line-height: 6rem;
    margin-bottom: 0rem;
}

.ds-heading span {
    border-bottom: 1px solid #FF2400;
}

.ds-banner-section figure {
    margin-bottom: var(--margin-54);
}

.ds-banner-section p {
    font-size: var(--font_16);
    line-height: var(--font_30);
    margin-bottom: var(--font_30);
}

.ds-button {
    display: inline-block;
    text-transform: uppercase;
    color: #FFF;
    background-color: #45CD86;
    border-radius: var(--font_30);
    padding: 1.125rem 3.625rem;
    font-weight: 700;
    letter-spacing: 1px;
}

.ds-button:hover {
    color: #FFF;
    background-color: #3bb173;
}

.ds-content-width p {
    width: 570px;
}

.ds-project-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* Changes number of columns */
    margin: 0 -0.75rem;
}

.ds-project-list-loop {
    padding: 0 0.75rem;
}

.ds-project-list-loop:nth-child(even) {
    margin-top: 0;
}

.ds-project-list-loop-inner {
    background-color: white;
    box-shadow: 0px 0px 0px #cecaca;
    transition: all 0.8s ease;
    transform: translateY(0);
}

.ds-project-list-loop-inner section {
    padding: 1.875rem;
}

.ds-project-list-loop a {
    color: #000;
}

.ds-project-list-loop:hover .ds-project-list-loop-inner {
    /*box-shadow: 0px 0px 20px #cecaca;*/
    transform: translateY(-2rem);
}

/*--------------------------------------------------------------
>>> About Style
----------------------------------------------------------------*/
.custom-font {
    font-family: 'Teachers', sans-serif;
}

.ds-proj-heading {
    font-size: 1.625rem;
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.ds-tools {
    font-weight: 400;
    font-size: 1.125rem;
    display: block;
}

.ds-about-section {
    margin-top: 8.8125rem;
}

.ds-about-section .ds-heading-inner, .ds-back-home {
    margin-bottom: var(--margin-54);
}

.ds-left-right-section .ds-heading {
    font-size: 3rem;
    position: relative;
    margin-bottom: 0.875rem;
}

.ds-left-right-section {
    margin-bottom: var(--margin-120);
}

.ds-left-right-section figure {
    margin-bottom: var(--margin-60);
}

.ds-left-right-section .ds-tools {
    font-weight: 700;
}

.ds-left-right-section p {
    font-size: 1.375rem;
    line-height: var(--font_36);
    margin-bottom: 2.5rem;
}

/*--------------------------------------------------------------
>>> Project Style
----------------------------------------------------------------*/
.ds-case-studies-list {
    margin-bottom: var(--margin-120);
}

.ds-case-studies-list figure {
    margin-bottom: var(--margin-60);
}

.ds-heading {
    font-size: var(--font_48);
    margin-bottom: var(--font_14);
}

.ds-tools {
    font-weight: 700;
}

.ds-case-studies-list p {
    font-size: 1.375rem;
    line-height: var(--font_36);
    margin-bottom: 2.5rem;
}

.ds-case-studies-details {
    padding-bottom: 5.25rem;
}

.ds-case-studies-details .ds-case-studies-list {
    margin-bottom: 2.75rem;
}

.ds-case-studies-details .ds-tools {
    margin-bottom: var(--margin-60);
    display: block;
}

/*--------------------------------------------------------------
>>> Footer Style
----------------------------------------------------------------*/
.hover-text {
    position: relative;
    display: inline-block;
}

.hover-text::after {
    content: "full-time human.";
    font-family: 'Teachers', sans-serif;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    color: transparent;
    white-space: nowrap;
    overflow: hidden;
    text-align: left;
    transition: color 0.3s ease;
    pointer-events: none;
}

.hover-text:hover::after {
    color: red;
}

.ds-lets_section {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.ds-right-text {
    margin: 0;
}

.ds-email {
    text-decoration: none;
    border-bottom: 1px solid #FF2400; /* Red underline for the link */
}

.ds-email-text {
    font-size: 15px; /* Adjust the font size for "Let's talk" */
}

.ds-footer {
    background-color: white;
    padding: var(--margin-120) 0;
}

.ds-padding-0-about.ds-footer {
    padding-top: 0;
}

.ds-lets_section h4 {
    color: #000;
    font-weight: 700;
    font-size: 4.375rem;
    margin-bottom: 1.0625rem;
}

.ds-lets_section span {
    color: #000;
    font-size: 1rem;
}

.ds-email_social {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6.375rem 0;
    padding-bottom: 2.5rem;
}

.ds-email:hover {
    color: #000;
}

.ds-social {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
}

.ds-social li {
    margin-right: 4rem;
}

.ds-social li:last-child {
    margin-right: 0;
}

.ds-social a {
    color: #797979;
    font-size: 2.5625rem;
}

.ds-social a:hover {
    color: #000;
}

.ds-copyright {
    display: block;
    text-align: right;
    color: #2B2B2B;
    font-size: 1.125rem;
}

.ds-copyright a {
    color: #2B2B2B;
}

.ds-copyright a:hover {
    color: #2B2B2B;
    text-decoration: underline;
}

/*--------------------------------------------------------------
>>> Responsive Styles
----------------------------------------------------------------*/

@media (max-width: 767px) {
    .row {
        margin-left: 0;
        margin-right: 0;
    }

    .container {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }

    .ds-header {
        padding: 3.75rem 0;
    }

    .ds-heading {
        font-size: 2.375rem;
        line-height: 4rem;
    }

    .ds-heading-inner {
        font-size: 3.375rem;
        line-height: 6rem;
    }

    .ds-about-section .ds-heading-inner {
        margin-bottom: 3.75rem;
    }

    .ds-about-section {
        margin-top: 5.8125rem;
    }

    .ds-case-studies-details .ds-tools {
        margin-bottom: 1.875rem;
    }

    .ds-heading span br {
        display: none;
    }

    .ds-banner-section {
        margin-bottom: var(--margin-30);
    }

    .ds-content-width p {
        width: 100%;
    }

    .ds-lets_section h4 {
        font-size: 3.375rem;
    }

    .ds-project-list {
        grid-template-columns: auto;
    }

    .ds-project-list-loop {
        margin: 0;
        margin-bottom: 1.875rem;
    }

    .ds-case-studies-details .ds-case-studies-list {
        margin-bottom: -0.25rem;
    }

    .d-flex {
        flex-wrap: wrap;
    }

    .ds-left-right-section section {
        margin-bottom: 1.875rem;
    }

    .ds-left-right-section {
        margin-bottom: 1.875rem;
    }

    .ds-footer {
        padding-top: 1.875rem;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    /* Add styles for medium devices */
}

@media (min-width: 992px) and (max-width: 1199px) {
    /* Add styles for large devices */
}