/* FONTS */
@import url('https://fonts.googleapis.com/css?family=Poppins&display=swap');
@import url('https://fonts.googleapis.com/css?family=Muli&display=swap');
/*<<<<<<<<<<<<TEXT LAYOUT>>>>>>>>>>>>>>>>*/
@media screen {

    html {
        font: 16px Poppins;
        font-weight: 300;
        box-sizing: border-box;
    }
    body {
        background-color: #ffffff;
     }
    h1 {
        font-size: 2.5rem;
        font-weight: 600;
        line-height: 3.125rem;
    }
    .lp_h1 {
        font-size: 3rem;
        color: #ffffff;
    }
    h2 {
        font-size: 3.4375rem;
        color: #ffffff;
        font-weight: 600;
        line-height: 3.75rem;
    }
    h3 {
        font-size: 1.5625rem;
        font-weight: 600;
        line-height: 3.125rem;
        color: color: #0e77ff;
    }
    h4 {
        color: black;
        font-size: 1.5rem;
        font-weight: 500;
        line-height: 1.875rem;
        margin-top: 2rem;
    }
    h6 {
        font-size: 1.6rem;
        color: #ffffff;
        line-height: 5rem;
        font-weight: 600;
    }
    p {
        font-size: 1rem;
        line-height: 1.875rem;
        margin-top: 1.5rem;
    }
    .p--blue {
        color: #9abfff;
    }
    a {
        font-size: 1.125rem;
        font-weight: 400px;
        color: #ffffff;
        text-decoration: none;
        height: 100%;
        margin: 0 2%;
        padding: 1.03125rem 0;
    }
    a:hover {
        color: #21b3ff;
    }
    .centered-text {
        text-align: center;
    }

}
/*<<<<<<<<<<<<FORMS>>>>>>>>>>>*/
@media screen {
    label {
        font-size: 1.25rem;
        font-family: "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
        margin: 0;
        display: inline block;
        text-align: right;
    }
    fieldset {
        border-bottom: 1px black solid;
    }
    legend {
        font: 2.25rem Poppins;
        line-height: 3.125rem;
    }
    input, textarea {
        border: none;
        font-size: 1.5rem;
        font-weight: 600;
        box-sizing: border-box;
        width: 60%;
    }
    input:hover, textarea:hover {
        background-color: rgba(14, 119, 255,.1);
    }
    input:focus, textarea:focus {
        border: #0e77ff solid 1px;
    }
    textarea {
        height: 9rem;
    }
    input {
        height: 2rem;
    }
}
/*<<<<<<<<<<<<BUTTONS & ARROWS>>>>>>>>>>>*/
@media screen {
    button {
        border: none;
    }
    .call-to-action-btn {
        width: 15rem;
        height: 4.5rem;
        border-radius: 2.25rem;
        border: none;
        font: 1.5625rem Muli;
        background-color: #ffffff;
        color: black;
        border: 1px solid #0e77ff;
        font-weight: 600;
    }
    .call-to-action-btn:hover {
        background-color: #0e77ff;
        border: #ffffff solid 2px;
        color: #ffffff;
    }
    .btn-square {
        width: 9.9375rem;
        height: 3.3125rem;
        font: 1.125rem Poppins;
        font-weight: 600;
        border-radius: 5px;
    }
    .btn-square:hover {
        border: 2px solid #21b3ff;
    }
    .services_nav_btn {
        padding: 1.25rem;
        margin-top: 1.25rem; 
        margin-right:  1.25rem;
        border-radius: 1rem;
        background-color: rgba(22, 178, 255, 0.09);
        color: #0e77ff;
        font-size: 1.25rem;
        font-weight: 600;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .services-card_nav .active {
        background-color: #0e77ff;
        color: #ffffff;
    }
    .services_nav_btn:hover {
        background-color: #0e77ff;
        color: #ffffff;
    }
    .workflow-card_button {
        width: 7.5rem;
        height: 3rem;
        border-radius: 1.5rem;
        text-transform: uppercase;
        font: 1.25rem Poppins;
        color: #0e77ff;
        font-weight: 600;
        background-color: rgba(22, 178, 255, 0.09);
        border: none;
        position: relative;
        top: -1rem;
    }
        .workflow-card_button--center {
            color: #ffffff;
            background-color: #0e77ff;
        }
    .nav-arrows {
        height: 3rem;
        width: 4rem;
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        justify-content: center;
    }
    .nav-arrows--left:hover {
        content: url("../images/layout/arrow-blue-left-lg.png");
    }
    .nav-arrows--right:hover {
        content: url("../images/layout/arrow-blue-right-lg.png");
    }
}
/*<<<<<<<<<<<<CARD STYLING>>>>>>>>>>>*/
@media screen {
    .card_wrapper {
        display: flex;
        flex-flow: column nowrap;
        width: 100%;
    }
    .card_name {
        color: #0e77ff;
    }
    .card_title {
        display: flex;
        flex-flow: row nowrap;
    }
    .card_title img {
        align-self: center;
        margin-right: 1rem;
    }
    .card_h2 {
        color: black;
        font-size: 1.375rem;
        line-height: 2rem;
        margin-top: 3rem;
    }
    .card_button {
        color: #0e77ff;
    }
    .line-break {
        width: 40%;
        border-top: #0e77ff solid 5px;
        margin: 1rem 0; 
    }
    .line-break--white {
        border-color: #ffffff;
    }
    .line-break--ltblue {
        border-color: #21b3ff;
    }
}
/* <<<<<<<<<<<<SCREEN LAYOUT>>>>>>>>>>>>> */
@media screen {
    .set-cover {
        object-fit: cover;
    }
    .hidden {
        display: none;
    }   
    .nowrap {
        display: flex;
        flex-flow: row nowrap;
    }
    .wrapper--large {
        max-width: 1900px;
        margin: 0 auto;
        display: grid;
        grid-template-rows: 3fr 4fr 3fr;
        grid-template-columns: repeat(12, 1fr);
        column-gap: 5px;
        overflow: hidden;
    }
    .wrapper-img {
        justify-self: stretch;
        align-self: start;
        grid-row: 1 / span 3;
        grid-column: 1 / span 12; 
        object-fit: cover;
        align-content: stretch;
    }
    .wrapper-img--bottom {
        justify-self: center;
        align-self: end;
        grid-row: 2 / span 2;
        grid-column: 1 / span 12;  
    }
    .wrapper-header {
        grid-area: head;
        display: flex;
        justify-content: space-between;
        align-items: center;
        z-index: 1;
    }
    .wrapper-header_nav {
        display: flex;
        flex-flow: row nowrap;
        justify-content: space-between;
    }
    .wrapper-header--centered {
        z-index: 1;
        display: flex;
        flex-flow: column nowrap;
        align-items: center;        
    }
    .wrapper-main--centered {
        /* grid-area: main; */
        grid-row: 3 / span 1;
        grid-column: 2 / span 10;
        display: flex;
        flex-flow: row nowrap;
        z-index: 1;
        justify-content: center;
    }
    .wrapper-main {
        grid-area: main;
        z-index: 1;
        display: flex;
        flex-flow: column nowrap;
    }
    .wrapper-footer {
        grid-area: foot;
        z-index: 1;
        display: flex;
        justify-content: center;
    }
    .card_wrapper {
        display: flex;
        flex-flow: column;
        justify-content: start;
    }
    .grid-left {
        grid-area: left;
        z-index: 1;
    }
    .grid-right {
        grid-area: right;
        z-index: 1;
    }
}
/*<<<<<<<<<<<<BODY NAV>>>>>>>>>>>*/
@media screen {
    .body-nav {
        grid-template-rows: auto;
        position: -webkit-sticky;
        position: sticky;
        top: -1px;
        background: #0e77ff;
        z-index: 2;
    }
    .body-wrapper_header {
        grid-column: 2 / span 10;
    }
}
/*<<<<<<<<<<<<LANDING PAGE>>>>>>>>>>>*/
@media screen {
    .lp_wrapper {
        grid-template-rows: 10% 4fr 3fr;
        grid-template-areas: 
            "left head head head head head head head head head head right"
            "left main main main main main main null null null null right"
            "left foot foot foot foot foot foot foot foot foot foot right";
        background-color: #0e77ff;
    }
    .lp_wrapper img {
        position: relative;
        bottom: -2px;
    }
}
/*<<<<<<<<<<<<ABOUT PAGE>>>>>>>>>>>*/
@media screen {
    .about_wrapper {
        grid-template-areas: 
            "left head head head head head head head head head head right"
            "left null null null null null null main main main main right"
            "left foot foot foot foot foot foot foot foot foot foot right";
        background: white;
    }
}
/*<<<<<<<<<<<<SERVICES PAGE>>>>>>>>>>>*/
@media screen {
    .services_wrapper {
        grid-template-rows: 8.875rem 3fr 8.875rem;
        grid-template-columns: repeat(12, 1fr);
        
        grid-template-areas: 
            "left head head head head head head head head head head ."
            "left null null null null null null main main main main main"
            "left foot foot foot foot foot foot foot foot foot foot .";
        background: rgba(14, 119, 255,.02);
    }
    .services-main: {
        grid-column: 8 / span 4;
        grid-row: 2 / span 1;
    }
    .services-aside {
        grid-column: 10 / span 3;
        grid-row: 1 / span 3;
        background-color: #0e77ff;
    }
    .services-card {
        grid-area: null;
        z-index: 1;
        width: 100%;
    }
    .services-card_nav {
        display: flex;
        flex-flow: row wrap;
        justify-content: start;
    }
     .services-section {
        display: none;
        /* margin-left: 3rem; */
        width: 80%;
        background-color: #ffffff;
        box-shadow: 0 30px 60px rgba(14, 119, 255, 0.15);
        padding: 3.125rem;
    }
    .services-section p {
        margin: 0;
    }
    .services-section div {
        margin-top: 1rem;
    }
    .services-main > .active {
        display: flex;
        flex-direction: column;
    }
    .services-section_header {
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        margin: 0 -1rem;
    }
    .services-section_header > * {
        margin: 0 1rem;
    }
}
/*<<<<<<<<<<<<WORKFLOW PAGE>>>>>>>>>>>*/
@media screen {
    .workflow-wrapper {
        grid-template-rows: 18.75rem 1fr auto 18.75rem 12.5rem auto auto 12.5rem;
        grid-template-columns: repeat(12, 1fr);
        background: #ffffff;
    }
    .workflow-img {
        grid-row: 4 / span 2;
        grid-column: 1 / span 2;
        object-fit: contain;
    }
    .workflow-header {
        grid-row: 2 / span 1;
        grid-column: 5 / span 4;
        padding-bottom: 10rem;
    }
    .workflow-card {
        width: 25%;
        text-align: justify;
        padding: 3rem;
    }
    .workflow-card--center {
        box-shadow: 0 30px 60px rgba(14, 119, 255, 0.15);
        background-color: #ffffff;
    }
    .coretech-wrapper {
        grid-row: 5 / span 4;
        grid-column: 1 / span 12;
        background-color: rgba(14, 119, 255,.02);
        z-index: 0;
    }
    .coretech-header {
        grid-row: 6 / span 1;
        grid-column: 5 / span 4;
        z-index: 1;
        display: flex;
        flex-flow: column nowrap;
        align-items: center;
    }
    .coretech-header_nav {
        color: black;
        align-items: center;
        height: 5rem;
        width: auto;
        border: none;
        border-radius: 2.5rem;
        margin: 4.5rem 0;
        padding: 0 1rem;
        background-color: #ffffff;
        font-size: 1.25rem;
        box-shadow: 0 40px 60px rgba(14, 119, 255, 0.15);
    }
    .coretech-header_nav:hover {
        border: none;
        background-color: #ffffff;
        color: black;
    }
        .coretech-header_nav_span {
            display: inline-block;
            height: 2rem;
            padding: 0 3rem;
            border-right: 1px solid #000000;
        }
        .coretech-header_nav_span:last-child {
            border: none;
        }
        .coretech-header_nav > .active {
            color: #0e77ff;
        }
    .coretech-aside {
        grid-row: 7 / span 1;
        grid-column: 3 / span 8;
        z-index: 1;
        display: flex;
        flex-flow: row wrap;
        justify-content: center;
        align-items: flex-start;
        align-content: flex-start;
    }
    .icon-box {
        margin: 1.5rem;
    }
}
/*<<<<<<<<<<<<TESTIMONIALS PAGE>>>>>>>>>>>*/
@media screen {
    .testimonials-wrapper {
        grid-template-rows: 1fr;
        grid-template-columns: [left] 1fr [right] 1fr;
        grid-template-areas: 
            "left right";
        background: white;
    }
    .testimonials-aside {
        display: flex;
        background: #0e77ff;
        justify-content: flex-end;
        /* align-content: center; */
    }
    .testimonials-aside-img-2 {
        align-self: flex-start;
        justify-self: flex-end;
        width: 25%;
    }
    .testimonials-aside-img {
        /* flex-grow: 1;  */
        border: #ffffff 3rem solid;
        border-radius: 50%;
        background: white;
        align-self: center;
    }
    .testimonials-aside-img, .testimonials-aside-img {
        /* object-fit: cover; */
    }
    .testimonials-main {
        display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-flow: row-reverse nowrap;
    }
    .testimonials-main_dots-img-2 {
        align-self: flex-end;
    }
    .testimonials-main_card {
        margin: 11.25rem 5rem;
    }
    .atom-icon {
        width: 5rem;
        margin: 3.125rem;
        margin-left: 0;
    }
}
/*<<<<<<<<<<<<CASES PAGE>>>>>>>>>>>*/
@media screen {
    .cases-wrapper {
        grid-template-rows: 23.75rem 1fr 23.75rem;
        background: rgba(14, 119, 255,.02);
    }
    .cases-wrapper_img {
        align-self: flex-end;
    }
    .cases-header {
        grid-row: 1 / span 1;
        grid-column: 5 / span 4;
        align-items: center;
        justify-content: center;
    }
    .cases-main {
        grid-row: 2 / span 1;
        grid-column: 2 / span 10;
        display: flex;
        flex-flow: row wrap;
        align-items: flex-start;
        justify-content: center;
    }
    .cases-img {
        object-fit: cover;
    }
    .cases-footer {
        grid-row: 3 / span 1;
        grid-column: 6 / span 2;
        margin-top: 5.5rem;
    }
    .cases-card {
        margin: 0 1rem;
        background-color: #ffffff;
        width: 30%
    }
    .cases-card:hover {
        box-shadow: 0 0 40px rgba(14, 119, 255, 0.15);
    }
    .cases-card--padding {
        padding-left: 2.25rem;
    }
    .cases-moreinfo {
        display: flex;
        align-items: center;
    }
    .cases-moreinfo a {
        font-size: 1.25rem;
        text-transform: uppercase;
        margin-left: .5rem;
    }
    .cases-moreinfo img {
        height: 1rem;
    }
}
/*<<<<<<<<<<<<CONTACT PAGE/FOOTER>>>>>>>>>>>*/
@media screen {
    .contact-wrapper {
        grid-template-rows: auto 25rem;
        background: #ffffff;
    }
    .contact-aside_img {
        grid-row: 1 / span 2;
        grid-column: 1 / span 12;
    }
    .contact-main {
        grid-row: 1;
        grid-column: 7 / span 6;
    }
    .contact-form {
        background: #ffffff;
        color: black;
        width: 30rem;
        margin-top: 6rem; 
        padding: 3rem;
        box-shadow: 0 40px 60px rgba(14, 119, 255, 0.15);
    }
    .contact-form .call-to-action-btn {
        margin: 1rem auto;
    }
    
    .contact-footer {
        /* grid-row: 2;
        grid-column: 2 / span 10; */
        grid-area: 2 / 2 / 2 / 12;
        z-index: 10;
        display: grid;
        grid-template-rows: auto;
        grid-template-columns: repeat(12, 1fr);
    }
    .contact-footer_aside {
        grid-column: 2 / span 3;
        color: #ffffff;
    }
    .contact-footer_aside_imgs {
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
    }
    .contact-footer_icon {
        margin-right: .5rem;
    }
    .contact-footer_nav {
        grid-column: 6 / span 7;
        display: flex;
        flex-flow: row nowrap;
        justify-content: flex-start;
    }
    .contact-footer_list_icon {
        position: relative;
        left: -1rem;
    }
    .contact-footer_card .nowrap, .contact-footer_card a {
        font-size: 1rem;
        color: #ffffff;
        font-weight: 300;
        line-height: 2.5rem;
        padding: 0;
        margin: 0;  
    } 
    
}


/* <<<<<<<<<<<<RESPONSIVE>>>>>>>>>>>>> */
/* Xtra small devices (portrait phones) */
@media screen and (max-width: 576px) {
    html {font-size: 12px}
    .wrapper--large,.wrapper--large > *,.wrapper--large > * > * {
        display: flex;
        flex-flow: column;
        width: 100%;
        align-items: center;
        text-align: center;
    }
    .body-nav, .lp_wrapper {
        position: unset;
    }
    .hide-on-small,.line-break, .cases-wrapper_img, .body-wrapper_header_logo, .call-to-action-btn, .testimonials-aside, .testimonials-main_dots-img-2 {
        display: none;
    }
    .sticky-on-small {
        display: flex;
        justify-content: center;
        position: -webkit-sticky;
        position: sticky;
        top: -1px;
        background-color: #0e77ff;
        z-index: 4;
    }
    .wrapper-header_nav {
        background-color: #ffffff;
        justify-content: center;
    }
    .wrapper-header_nav > * {
        width: 100%;
        border-radius: 1rem;
        text-align: center;
        font-size: 2rem;
        background-color: #0e77ff;
        border-top: 1px solid #ffffff;
    }
    .btn-square {
        background: white;
        border: 5px solid #0e77ff;
        margin: 1px 0;
        align-items: center;
        height: 4rem;;
    }
    h2 {
        font-size: 2rem;
        text-align: center;
    }
    
    .call-to-action-btn {
        flex-flow: row nowrap;
        justify-content: space-around;
    }
    .call-to-action-btn img {
        transform: rotate(90deg);
    }
    .card_title {
        display: flex;
        flex-flow: row nowrap;
        width: 100%;
        justify-content: space-around;
        border-bottom: #0e77ff solid 5px;
    }
    .card_icon  {
        font-size: 3rem;
    }
    .services-card_nav {
        flex-flow: row wrap;
        justify-content: space-evenly;
    }
    .services-section {
        display: none;
        margin: 0;
    }
    .services-section .active {
        /* margin: 0;
        padding: 2rem;
        width: 100%; */
    }
    .services-section .card_title {
        border: none;
    }
    .workflow-img {
        width: 80%;
        position: relative;
        bottom: -10rem;
    }
    .workflow-header {
        padding: 2rem;
        background: #0e77ff
    }
    .workflow-card {
        width: 80%;
    }
    .workflow-card_button {
        width: 100%;
    }
    .coretech-header {
        background: #0e77ff;
        border: none;
        padding-top: 1rem;
    }
    .coretech-aside {
        display: none;
    }
    #coretechAside-1, .coretech-aside .active {
        display: flex;
        flex-flow: row wrap;
        justify-content: space-evenly;
    }
    .coretech-header_nav {
        display: flex;
        margin: 2rem 0;
    }
    .icon-box {
        width: auto;
        margin: 1rem;
    }
    .testimonials-main_header {
        display: none;
    }
    .testimonials-main_card {
        margin: 3rem 0;
    }
    .testimonials-main_header {
        padding: 0 2rem;
    }
    .testimonials-main_header .card_name{
        display: flex;
        background:#0e77ff;
        color: white;
    }
    .atom-icon {
        display: none;
    }
    .testimonials-main_nav {
        margin: 2rem;
    }
    .cases-card--padding {
        padding: 0;
    }
    .contact-footer {
        background: #0e77ff;
    }
    .contact-footer_list_row .card_title {
        justify-content: center;
    }
}
  /* Medium devices (tablets, 768px and up) */
  @media screen and (min-width: 576px) and (max-width: 992px) {
    html {
        font-size: 12px;
    }
    h1 {
        font-size: 2.5rem;
        font-weight: 600;
        line-height: 3.125rem;
    }
    .card_title {
        flex-wrap: wrap;
    }
  }
  @media screen and (min-width: 992px) and (max-width: 1200px) {
    html {
        font-size: 16px;
    }
   
  }
  @media screen and (min-width: 1200px) {
    html {
        font-size: 18px;
    }
   
  }