/*
Theme Name: Corez TNB
Theme URI: http://underscores.me/
Author: Divy
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: coreztnb
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready
*/

/*
** Theme Variables
*/
:root {
    --green: #399c39;
    --red: #dc3232;
    --blue: #29A2E6;
    --white: #ffffff;
    --black: #000000;

    --primary:   #005C93;
    --primary-a: #0167A1;

    --secondary:   #444444;
    --secondary-a: #2A2C39;

    --body: var(--secondary);

    --lightgreen: rgba(1, 103, 161, 0.08);
   
    --link: var(--primary);
    --link-a: var(--primary-a);

    --formfieldbg: var(--white);
    --formfieldplaceholder: rgba(68, 68, 68, 0.3);
    --formtextcolor: var(--body);
    --formfieldborder: rgba(68, 68, 68, 0.2);

    --siteradius: 16px;

    scroll-behavior: smooth;
}

:target {
    scroll-margin-top: 100px;
}

/*
** Fonts
*/
@font-face {
    font-family: 'gsans';
    src: url('./assets/fonts/GeneralSans-Regular.woff2') format('woff2'),
        url('./assets/fonts/GeneralSans-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'gsans-md';
    src: url('./assets/fonts/GeneralSans-Medium.woff2') format('woff2'),
        url('./assets/fonts/GeneralSans-Medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

/*
** Custom Reset
*/
*,:after,:before { -webkit-box-sizing: border-box; box-sizing: border-box }
img { max-width: 100%; height: auto; vertical-align: top; }
a, span, i, label { display: inline-block; }
a { color: var(--link); text-decoration: none; transition: 0.3s ease-in-out; }
a:hover { color: var(--link-a); }
a:focus { outline: none; }
strong, b { font-family: 'gsans-md', sans-serif; font-weight: 500; }

header ul,
footer ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

p:last-child,
ul:last-child,
li:last-child {
  margin-bottom: 0;
}

button,
button:focus {
    font-family: 'gsans', sans-serif;
    border: 0;
    outline: 0;
    box-shadow: none;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
}

input:focus {
    outline: none;
    box-shadow: none;
}

ul, ol { padding-left: 20px; }

li { margin-bottom: 10px; }

/*
** Globals
*/

/*Typo*/
body {
    font-family: 'gsans', sans-serif;
    font-size: 20px;
    line-height: calc(1em + 6px);
    color: var(--body);
    margin: 0;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: 'gsans-md', sans-serif;
    font-weight: normal;
    font-style: normal;
    margin-top: 0;
    color: var(--primary);
}

h1, .h1 { font-size: 48px; line-height: calc(1em + 12px); margin-bottom: 30px; }
h2, .h2 { font-size: 40px; line-height: calc(1em + 10px); margin-bottom: 16px; }
h3, .h3 { font-size: 24px; line-height: calc(1em + 6px); margin-bottom: 20px; }
h4, .h4 { font-size: 18px; line-height: calc(1em + 6px); margin-bottom: 16px; }
h5, .h5 { font-size: 16px; line-height: calc(1em + 6px); margin-bottom: 14px; }
h6, .h6 { font-size: 18px; line-height: 1.55em; margin-bottom: 14px; }

h1:last-child, .h1:last-child { margin-bottom: 0; }

p { margin-top: 0; }

/* Form Fields */
input[type="text"],
input[type="search"],
input[type="email"],
input[type="password"],
input[type="num"],
input[type="tel"],
input[type="url"],
select,
textarea {
    font-family: 'gsans', sans-serif;
    font-size: 14px;
    line-height: 40px;
    width: 100%;
    height: 42px;
    padding: 0 12px;
    vertical-align: top;
    color: var(--formtextcolor);
    border: 1px solid var(--formfieldborder);
    border-radius: 0;
    outline: 0 !important;
    background-color: var(--formfieldbg);
}

input::placeholder,
textarea::placeholder {
    color: var(--formfieldplaceholder);
}

textarea {
    line-height: 24px;
    min-height: 100px;
    max-height: 100px;
    padding-top: 12px;
    resize: none;
}

select {
    width: 100%;
    padding-right: 42px;
    background-image: url('../images/angle-down.svg');
    background-size: 10px;
    background-position: right 14px center;
    background-repeat: no-repeat;
    -webkit-appearance: none;
    appearance: none;
}

/*Background Utilities*/
.bg--primary { background-color: var(--primary); color: var(--white); }

/*Text Utilities*/
.text-rg { font-family: 'gsans', sans-serif; }
.text-md { font-family: 'gsans-md', sans-serif; }

.text-ucase { text-transform: uppercase; }

.text--primary { color: var(--primary); }
.text--body { color: var(--body); }
.text--dark { color: var(--secondary-a); }
.text--green { color: var(--green); }
.text--red { color: var(--red); }
.text--white { color: var(--white); }
.text--black { color: var(--black); }

.font-30 { font-size: 30px; line-height: calc(1em + 10px); }
.font-24 { font-size: 24px; line-height: calc(1em + 8px); }
.font-20 { font-size: 20px; line-height: calc(1em + 6px); }
.font-18 { font-size: 18px; line-height: calc(1em + 6px); }
.font-16 { font-size: 16px; line-height: calc(1em + 6px); }
.font-14 { font-size: 14px; line-height: calc(1em + 6px); }
.font-12 { font-size: 12px; line-height: calc(1em + 4px); }

/*
** Buttons
*/
.bttn {
    font-family: 'gsans', sans-serif;
    font-size: 20px;
    line-height: 63px;
    min-width: 260px;
    height: 65px;
    padding: 0 24px;
    text-align: center;
    border: 1px solid transparent;
    border-radius: 20px;
    transition: all 0.3s ease-in-out;
}

.bttn-primary {
    color: var(--white);
    background-color: var(--primary);
    border-color: var(--blue);
}

.bttn-primary:hover {
    color: var(--white);
    background-color: var(--primary-a);
}

/*Other Utilities*/
.list-unstyled, .list-unstyled ul, .list-unstyled ol { padding: 0; margin: 0; list-style: none; }
.transition { transition: 0.3s ease-in-out; }
.unlink { pointer-events: none; cursor: none; }
.siteradius { border-radius: var(--siteradius); }

/*
** Bootstrap Extends & Overrides
*/
.container, .container-fluid, .row>* { padding-left: 15px; padding-right: 15px; }
.row { margin-left: -15px; margin-right: -15px; }
.gx-0.row>* { padding-left: 0; padding-right: 0; }
.gx-0.row { margin-left: 0; margin-right: 0; }

.visually-hidden,
.sr-only {
    position: absolute!important;
    width: 1px!important;
    height: 1px!important;
    padding: 0!important;
    margin: -1px!important;
    overflow: hidden!important;
    clip: rect(0,0,0,0)!important;
    white-space: nowrap!important;
    border: 0!important;
}

.overflow-hidden { overflow: hidden; }

/*
** WP Overrides
*/
.screen-reader-text { position: absolute; margin: 0; padding: 0; visibility: hidden; opacity: 0; }

/*
** Header
*/
.site-header{
    position: sticky;
    top: 0;
    padding: 15px 0;
    border-bottom: 1px solid #D7D7D7;
    background: var(--white);
    z-index: 10;
}


.hero {
    position: relative;
    padding: 48px 0 100px;
}

.hero-container {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    transform: translateY(-50%);
}

.hero-wrap {
    width: 478px;
    max-width: 100%;
}

.hero-img img { width: 50%; }

/*Common*/
section.section { padding: 56px 0; }

/*Standout / Intro*/
.cozstand-ul {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 24px;
    width: 798px;
    max-width: 100%;
    margin: 38px auto 0;
}

.cozstand-li {
    padding: 32px 24px;
    color: var(--primary);
    border: 2px solid #B7E5FF;
    border-radius: var(--siteradius);
    background-color: var(--white);
    box-shadow: 1.11111px 2.22222px 6.66667px rgba(0, 0, 0, 0.14);
}

.cozstand-li img {
    margin-bottom: 24px;
}

.cozstand-li h3 {
    margin-bottom: 7px;
}

.cozstand-li p {
    font-family: 'gsans', sans-serif;
    color: var(--secondary);
}

/*Industries*/
.cozind-ul {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 80px;
    text-align: center;
    margin-top: 40px;
}

.cozind-li img {
    height: 56px;
    width: 56px;
    object-fit: contain;
    object-position: center;
    margin-bottom: 24px;
}

.cozind-li h3 {
    font-size: 20px;
    line-height: 27px;
    color: var(--black);
}

/*Process*/
.proc-ul {
    position: relative;
    display: flex;
    gap: 58px;
    align-items: center;
    width: 994px;
    max-width: 100%;
    padding: 30px 0 44px;
    margin: 40px auto 0;
    background-image: url('./assets/images/our-process-line.svg');
    background-position: right 37px bottom;
    background-repeat: no-repeat;
}

.proc-ul::before {
    --csize: 111px;
    content: "";
    position: absolute;
    top: 0px;
    left: -31px;
    width: var(--csize);
    height: var(--csize);
    background-image: url('./assets/images/our-process-circle.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100%;
    z-index: -1;
}

.proc-li {
    flex: 1 0 246px;
    min-width: 246px;
    padding: 20px;
    border: 1px solid #D8F1FF;
    border-radius: var(--siteradius);
    background-color: var(--white);
    box-shadow: 2px 4px 8px rgba(0, 0, 0, 0.04);
}

.proc-liv {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1 0 164px;
    min-width: 164px;
    height: 221px;
}

.proc-li h3 {
    font-size: 18px;
    line-height: 22px;
    color: var(--black);
    margin-bottom: 12px;
}

/*Contact*/
.cozcf-ul {
    display: flex;
    gap: 30px;
    align-items: center;
    justify-content: space-between;
    width: 940px;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.cozcf-txt {
    --ctxtwid: 331px;
    flex: 0 0 var(--ctxtwid);
    width: var(--ctxtwid);
    min-width: var(--ctxtwid);
}

.cozcf-form {
    --fwid: 524px;
    flex: 0 0 var(--fwid);
    width: var(--fwid);
    min-width: var(--fwid);
}

.cozcf-txt--sub {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 172px;
}

.cozcf-txt--sub::after {
    content: "";
    flex: 1 0 auto;
    height: 1px;
    background-color: var(--primary);
}

.cdlist {
    display: grid;
    gap: 30px;
    padding-top: 4px;
}

.cditem {
    --cdicon: 36.67px;
    display: flex;
    gap: 12.5px;
    align-items: flex-start;
}

.cditem-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 var(--cdicon);
    width: var(--cdicon);
    min-width: var(--cdicon);
    height: var(--cdicon);
    border-radius: 100%;
    background: rgba(1, 103, 161, 0.08);
}

.cditem-info {
    flex: 0 0 calc(100% - 12.5px - var(--cdicon));
    width: calc(100% - 12.5px - var(--cdicon));
    min-width: calc(100% - 12.5px - var(--cdicon));
}

.cditem-info h3 {
    font-size: 16px;
    line-height: 20px;
    margin-bottom: 3px;
    color: var(--black);
}

.cditem-info a { color: var(--body); }

.cditem-info a:hover { color: var(--primary); }

.cditem-val {
    font-size: 14px;
    line-height: 22px;
}

.cozcf-form .row { margin: 0 -8px; row-gap: 22px; }

.cozcf-form .row>* { padding-left: 8px; padding-right: 8px; }

.cozcf-form .wpcf7-form-control-wrap {
    display: block;
}

.wpcf7-not-valid-tip {
    font-size: 12px;
    line-height: 1.3;
    padding: 6px 5px 3px;
    margin-top: -4px;
    color: var(--white);
    background: var(--red);
    border-radius: 0px 0px 10px 10px;
}

.wpcf7 form .wpcf7-response-output {
    font-size: 14px;
    line-height: 1.4em;
    padding: 8px 10px;
    margin: 20px 0 0 0;
    border: 0;
    border-radius: 5px;
    background: var(--white);
}

.wpcf7 form.sent .wpcf7-response-output {
    background: var(--green);
    color: var(--white);
}

.wpcf7 form.invalid .wpcf7-response-output {
    display: none;
    background: var(--red);
    color: var(--white);
}

.wpcf7-spinner {
    display: block;
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    right: 0;
    margin: 0 auto;
}

.bttn.bttn-form {
    font-family: 'gsans-md', sans-serif;
    font-size: 16px;
    line-height: 43px;
    height: 45px;
    width: 100%;
    max-width: 100%;
    cursor: pointer;
}

/*Footer*/
.site-footer {
    padding: 20px 0;
    margin-top: 50px;
}

.site-footer hr {
    margin: 17px 0;
    height: 1px;
    border: 0;
    outline: none;
    background-color: var(--white);
}

/*
** Responsive
*/
@media screen and (max-width: 1399px) {
    .hero .container-fluid { width: 100%; max-width: 100%; }
    .hero-wrap { width: 529px; padding-left: 30px; }
}
/*1399 ENDS*/

@media screen and (max-width: 1199px) {
    h1, .h1 { font-size: 38px; line-height: calc(1em + 10px); }
    h2, .h2 { font-size: 36px; }
    .hero-wrap p { font-size: 22px; }

    .cozind-ul { display: flex ; flex-wrap: wrap; justify-content: center; gap: 40px 30px; }

    .cozind-li { --cozindw: calc(33.33% - 27px); width: var(--cozindw); flex: 1 0 var(--cozindw); max-width: var(--cozindw); }

    .proc-ul { gap: 18px; }
}
/*1199 ENDS*/

@media screen and (max-width: 991px) {
    h1, .h1 { font-size: 36px; margin-bottom: 20px; line-height: calc(1em + 8px); }
    h2, .h2 { font-size: 32px; }
    .hero-wrap { width: 50%; max-width: 100%; padding-left: 10px; }
    .hero-img img { padding-left: 20px; }

    .bttn { font-size: 18px; line-height: 52px; height: 55px; }
    .hero-wrap p { font-size: 20px; }

    .cozcf-form { --fwid: 329px; }
    .cozstand-ul { gap: 20px; }

    .proc-ul { flex-wrap: wrap; align-items: stretch; padding-top: 15px; background-size: 92%; }
    .proc-ul::before { --csize: 70px; left: -20px; }
    .proc-liv { height: auto; }
}
/*991 ENDS*/

@media screen and (max-width: 767px) {
    body { font-size: 18px; line-height: 26px; }
    .hero { display: flex; flex-direction: column-reverse; gap: 40px; align-items: center; padding: 48px 0 60px; }
    .hero-container { position: static; transform: none; }
    .hero-wrap { width: 460px; padding-left: 0; text-align: center; margin: 0 auto; }
    .hero-img img { padding: 0; }

    .bttn { line-height: 47px; height: 50px; border-radius: 10px; }
    
    .cozstand-ul { grid-template-columns: 1fr; }
    .cozstand-li p br { display: none; }
    .cozcf-ul { flex-wrap: wrap; }
    .cozind-li { --cozindw: calc(50% - 15px); }
    .cozcf-txt, .cozcf-form { flex: 1 0 100%; width: 100%; min-width: 0; max-width: 100%; }
    .site-footer { margin-top: 20px; }

    .proc-ul { padding-bottom: 30px; }
}
/*767 ENDS*/

@media screen and (max-width: 575px) {
    body { font-size: 16px; line-height: 24px; }
    h1, .h1 { font-size: 32px; line-height: calc(1em + 6px); margin-bottom: 20px; }
    h2, .h2 { font-size: 28px; }
    h3, .h3 { font-size: 22px; }
    .site-header .custom-logo-link, .foo-logo img { width: 130px; }
    section.section { padding: 50px 0; }
    .bttn { font-size: 16px; }

    .proc-li { flex: 1 0 239px; min-width: 239px; }
    .proc-liv { flex: 1 0 172px; min-width: 172px; }
}
/*575 ENDS*/

@media screen and (max-width: 459px) {
    h2, .h2 { font-size: 26px; }
    .cozind-li { --cozindw: 100% }
    .cozind-li img { height: 40px; width: 40px; margin-bottom: 18px; }
    .cozind-li h3 { margin-bottom: 14px; }
    .proc-ul { display: grid; background-image: none; padding: 0; }
    .proc-ul::before { display: none; }
    .proc-li, .proc-liv { flex: 1 0 100%; min-width: 0; max-width: 100%; }
}

@media screen and (max-width: 375px) {
    h1, .h1 { font-size: 28px; }
    .hero-wrap p { font-size: 18px; }
    .bttn { line-height: 47px; height: 50px; }
    .cozstand-li { padding: 20px; }
}
/*375 ENDS*/