/*
 Theme Name: Custom Theme
 Theme URI: https://brilliantdigital.com.au/
 Description: Custom Theme.
 Author: Brilliant
 Author URI: https://brilliantdigital.com.au/
 License: Everything copyrighted
 Version: 1.1
*/
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

@import 'assets/css/constants.css';
@import 'assets/css/reset.css';
@import 'assets/css/components/header.css';
@import 'assets/css/components/form.css';
@import 'assets/css/components/footer.css';
@import 'assets/css/components/hero.css';
@import 'assets/css/component.css';


html {scroll-behavior: smooth; scroll-padding-top: 120px;}
blockquote:before,blockquote:after,q:before,q:after {content: '';content: none;}
blockquote p{font-style: italic;}
table {border-collapse: collapse;border-spacing: 0;}
i,em {font-style: italic;}
b,strong {font-weight: 700;}
table {width: 100%;border-spacing: 0;border-collapse: collapse;}
table tr td {border: 1px solid #e5e5e5;}
table tr:hover {background-color: var(--primary);color: var(--white);}
table tr:hover p,table tr:hover span,table tr:hover li {color: var(--white);}
table tr:hover ul li:before {background-color: var(--white);}
table,tr,td,th {font-family: var(--heading);border: 1px solid var(--primary);}
th {font-family: var(--heading);font-weight: bold;}
td,th {padding: 10px;}
h1 {font-size: 80px;line-height: 54px;margin-bottom: 24px;}
h2 {font-size: 38px;line-height: 42px;margin-bottom: 24px;}
h3 {font-size: 32px;line-height: 38px;margin-bottom: 24px;}
h4 {font-size: 24px;line-height: 140%;margin-bottom: 24px;}
h5 {font-size: 22px;line-height: 120%;margin-bottom: 24px;}
h6 {font-size: 16px;line-height: 25px;margin-bottom: 24px;}
h1,h2 {line-height: 1.2em;}
h1,h2,h3,h4,h5,h6 {font-family: var(--heading);line-height: 1.3em;font-weight: 600;color:var(--secondary);}



p {
    margin-bottom: 24px;
    color: var(--color);

    /* Body/18px */
    font-family: var(--text);
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: 160%; /* 25.2px */
}

img {max-width: 100%;vertical-align: middle;}
a {text-decoration: none;color: var(--primary);}
a:has(h1,h2,h3,h4,h5,h6) {text-decoration: none;color: inherit;}
textarea {resize: none;}
button {cursor: pointer;border: none;}
button:focus {outline: none;}
 
.primary {color: var(--primary);}
.secondary {color: var(--secondary);}
.tertiary {color: var(--tertiary);}
.clearfix:after {clear: both;}
.clearfix:before,.clearfix:after {content: " ";display: table;}
.clear {clear: both;}
.visible-xs {display: none;}
.visible-lg {display: block;}
.visible-md{display: block;}
.visible-md-block {display: none;}
.inline-block {display: inline-block;}
.text-left {text-align: left;}
.text-right {text-align: right;}
.text-center {text-align: center;}
.alignnone {margin: 0 auto;}
.aligncenter {display: block;margin: 0 auto 20px auto;}
.alignright {float: right;margin: 0 0 15px 15px;}
.alignleft {float: left;margin: 0 30px 15px 0;}
.section a:focus,.section a:active {outline: none;}
.curl   {border-radius:8px;}
.curl24 {border-radius:24px;}
.curl32 {border-radius:32px;}
.curl50 {border-radius:50px;}
.curl1-2{border-radius: 32px 32px 0px 0px;}
input:focus,input:active {outline: none;}
form,fieldset {border-style: none;margin: 0;padding: 0;}
table {border-collapse: collapse;border-spacing: 0;}
sup {vertical-align: super;    font-size: smaller;}

.container-fluid {
    max-width: 90%;
    width: 90%;
    margin: 0 auto;
    padding: 0 15px;
}

.container-full {
    max-width: 100%;
    width: 100%;
    margin: 0 auto;
    padding: 0 0;
}

.container {
    max-width: 1320px;
    width: 100%;
    margin: 0 auto;
    padding: 0 15px;
}

.pb {
    padding-bottom: 60px !important;
}
p.br br{display: none;}
/* ======= Page ======== */
.section.page {padding: 100px 0 40px;}
.no-bg{  background: transparent!important;}
  .no-border{  border: none!important;}
/* ======= Page ======== */

.section .title.or h4,
.section .title.or h2,
.section .title.or p {
    margin-bottom: 0;
}

.section .title h1,
.section .title h2,
.section .title h3 {
    font-size: 48px;
    line-height: 120%;
    font-weight: 600;
    color: var(--secondary);
    font-family: var(--heading);
}

.section .title h2,
.section .title h3 {
    font-size: 48px;
    line-height: 120%;
}

.section .title h4 {
    color: var(--secondary);
    font-size: 24px;
    line-height: 160%;
    font-weight: 600;
}

.pppsection .title p {
    font-size: 18px;
    line-height: 140%;
    color: var(--color);
}

.section .title a.btn {
    margin-top: 20px;
}

.section .title .content {
    width: 80%;
    margin: 0 auto;
}

.section .title.h {
    margin-bottom: 0;
}

.section .title.h h1,
.section .title.h h2,
.section .title.h h3 {
    margin-bottom: 0;
}

.section ul li {
    list-style: none;
    font-family: var(--text);
    position: relative;
    padding-left: 18px;
}

.section ul {
    margin-bottom: 15px;
    padding-left: 15px;
}
.section .check.pl-0 ul{
    padding-left: 0;
}
.section.noli ul li:before,
.section ul.noli li:before{
    content:none!important;
}
.section ul li:before {
    content: '';
    width: 4px;
    height: 4px;
    position: absolute;
    left: 5px;
    border-radius: 50%;
    background-color: var(--color);
    top: 12px;
}

.section .check ul li:before,.check ul li:before {
    content: '';
    width: 26px;
    height: 26px;
    position: absolute;
    left: 0;
    background-color: transparent;
    background-repeat: no-repeat;
    background-image: url("assets/images/li.png")!important;
    top: 0;
}

.section .check.wh ul{
    padding-left: 0;
}
.section .check.wh ul li:before {
    background-image: url("assets/images/li2.png")!important;
    
}
.section .check ul li,.check ul li {
    padding-left: 45px;

    font-size: 18px;
    font-weight: 400;
    line-height: 140%; /* 25.2px */
}

.section li,.check li {
    font-size: 18px;
    line-height: 140%;
    color: var(--color);
    font-family: var(--text);
    font-weight: 400;
    margin-bottom: 16px;
}
.check ul li{
    position: relative;
}
.check ul{
    margin-bottom: 15px;
    padding-left: 15px;
}

.bgImage {
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.up         {transition: .3s ease-in-out all;}
.up:hover   {transform: translateY(-5px);}
.xxl-head   {font-size: 64px !important;}
.small      {font-size: 12px;font-weight: 400;}
.sm-font    {font-size: 16px;font-weight: 400;}
.xxxl{font-size: 42px;line-height: normal; text-transform: capitalize;}
.xxl{font-size: 32px;line-height: 150%;}
.xxl.imp{font-size: 32px !important;}
.sm-fz{font-size: 24px;text-transform: capitalize;}
.font-light     {font-weight: 300;}
.bold           {font-weight: 700 !important;}
.fw-400         {font-weight: 400 !important;}
.fw-300         {font-weight: 300 !important;}
.fw-600         {font-weight: 600 !important;}
.ttu            {text-transform: uppercase;}
.border-left    {border-left:8px solid;}
.border-right   {border-right:8px solid;}
.border-top     {border-top:1px solid rgba(255, 255, 255, 0.25);}
/* Grids
   ========================================================================== */

.grid       {display: grid;grid-gap: 2rem;}
.grid-auto  {grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));}
.grid-2     {grid-template-columns: 1fr 1fr;}
.grid-3     {grid-template-columns: 1fr 1fr 1fr;}
.grid-4     {grid-template-columns: 1fr 1fr 1fr 1fr;}
.grid-5     {grid-template-columns: 1fr 1fr 1fr 1fr 1fr;}
.grid-6     {grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;}
.grid-2-3   {grid-template-columns: 2fr 3fr;}
.grid-3_5   {grid-template-columns: 1fr 0.5fr 1fr}
.grid-4     {grid-template-columns: 1fr 1fr 1fr 1fr;}
.grid-2-1   {grid-template-columns: 2fr 1fr;}
.grid-1-2   {grid-template-columns: 1fr 2fr;}
.grid-1-1_3 {grid-template-columns: 1fr 1.3fr;}

.grid-1_5-2 {grid-template-columns: 1.5fr 2fr;}
.grid-1_5-1 {grid-template-columns: 1.5fr 1fr;}
.grid-3-1   {grid-template-columns: 3fr 1fr; grid-gap: 1rem;}
.grid-1-3   {grid-template-columns: 1fr 3fr; grid-gap: 1rem;}
.grid-1-4   {grid-template-columns: 1fr 4fr; grid-gap: 1rem;}
.grid-1-5   {grid-template-columns: 1fr 5fr; grid-gap: 1rem;}
.grid-1-6   {grid-template-columns: 1fr 6fr; grid-gap: 1rem;}
.grid-10-1  {grid-template-columns: 10fr 1fr;} 
.grid-1-1-2 {grid-template-columns: 1fr 1fr 2fr; grid-gap: 134px;}
.grid-2-1-1 {grid-template-columns: 2fr 1fr 1fr; }
.grid-3-1-1 {grid-template-columns: 3fr 1fr 1fr; }
.grid.grid-1-2.no-grid {grid-template-columns: 1fr;}
.swap{order:2;}

.gap-0      {gap: 0;}
.gap-0.imp  {gap: 0 !important;}
.grid-gap-1 {grid-gap:1rem}
.swap       {order:2;}
.gap-1      {gap: 10;}
.gap        {row-gap: 64px;column-gap: 48px;}
.grid-gap-1 {grid-gap:1rem}
.gap-2 {grid-gap:48px}
.gap-4      {grid-gap:4rem}
.gap-8      {gap: 8rem;}

.flex-container {
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
    width: 100%;
    align-items: center;
}
.display-block,.block{display: block;}
.inline-block {display: inline-block;}
.display-flex,.flex {display: flex;}
.flex-row {flex-flow: row wrap;}
.column {flex-flow: column;}
.flex-row-reverse {flex-flow: row-reverse;}
.justify-center {justify-content: center;}
.justify-start {justify-content: flex-start;}
.justify-end {justify-content: flex-end;}
.align-center {align-items: center;}
.align-start {align-items: flex-start;}
.align-end {align-items: flex-end;}
.align-stretch {align-items: stretch;}    
.flex-start {justify-content: flex-start;}
.flex-end {justify-content: flex-end;}
.center {justify-content: center;}
.space-between {justify-content: space-between;}
.space-around {justify-content: space-around;}
.space-evenly {justify-content: space-evenly;}
.inline-align-top {vertical-align: top;}
.inline-block {display: inline-block;}
.float-left {float: left;}
.float-right {float: right;}

.pd-0 {padding: 0;}
.pd-5 {padding: 5px;}
.pd-10 {padding: 10px;}
.pd-15 {padding: 15px;}
.pd-20 {padding: 20px;}
.pd-24 {padding: 24px;}
.pd-25 {padding: 25px;}
.pd-30 {padding: 30px;}
.pd-40 {padding: 40px;}
.pd-50 {padding: 50px;}
.pd-60 {padding: 60px;}
.pd-65 {padding: 65px;}
.pd-80 {padding: 80px;}
.pd-100 {padding: 100px;}
.pd-50-30{padding: 50px 30px;}

.pt-0 {padding-top: 0 !important;}
.pt-5 {padding-top: 5px;}
.pt-10 {padding-top: 10px;}
.pt-15 {padding-top: 15px;}
.pt-20 {padding-top: 20px;}
.pt-24 {padding-top: 24px;}
.pt-25 {padding-top: 25px;}
.pt-30 {padding-top: 30px;}
.pt-40 {padding-top: 40px;}
.pt-50 {padding-top: 50px;}
.pt-60 {padding-top: 60px;}
.pt-65 {padding-top: 65px;}
.pt-80 {padding-top: 80px;}
.pt-100 {padding-top: 100px;}
.pt-120 {padding-top: 120px;}

.pl-0 {padding-left: 0;}
.pl-5 {padding-left: 5px;}
.pl-10 {padding-left: 10px;}
.pl-15 {padding-left: 15px;}
.pl-20 {padding-left: 20px;}
.pl-24 {padding-left: 24px;}
.pl-25 {padding-left: 25px;}
.pl-30 {padding-left: 30px;}
.pl-40 {padding-left: 40px;}
.pl-50 {padding-left: 50px;}
.pl-60 {padding-left: 60px;}
.pl-65 {padding-left: 65px;}
.pl-80 {padding-left: 80px;}
.pl-100 {padding-left: 100px;}

.pr-0 {padding-right: 0;}
.pr-5 {padding-right: 5px;}
.pr-10 {padding-right: 10px;}
.pr-15 {padding-right: 15px;}
.pr-20 {padding-right: 20px;}
.pr-24 {padding-right: 24px;}
.pr-25 {padding-right: 25px;}
.pr-30 {padding-right: 30px;}
.pr-40 {padding-right: 40px;}
.pr-50 {padding-right: 50px;}
.pr-60 {padding-right: 60px;}
.pr-65 {padding-right: 65px;}
.pr-80 {padding-right: 80px;}
.pr-100 {padding-right: 100px;}

.pb-0 {padding-bottom: 0 !important;}
.pb-5 {padding-bottom: 5px;}
.pb-10 {padding-bottom: 10px;}
.pb-15 {padding-bottom: 15px;}
.pb-20 {padding-bottom: 20px;}
.pb-24 {padding-bottom: 24px;}
.pb-25 {padding-bottom: 25px;}
.pb-30 {padding-bottom: 30px;}
.pb-40 {padding-bottom: 40px;}
.pb-50 {padding-bottom: 50px;}
.pb-60 {padding-bottom: 60px;}
.pb-65 {padding-bottom: 65px;}
.pb-80 {padding-bottom: 80px;}
.pb-100 {padding-bottom: 100px;}
.pb-120 {padding-bottom: 120px;}

.mt-0 {margin-top: 0 !important;}
.mt-5 {margin-top: 5px;}
.mt-10 {margin-top: 10px;}
.mt-15 {margin-top: 15px;}
.mt-20 {margin-top: 20px;}
.mt-25 {margin-top: 25px;}
.mt-30 {margin-top: 30px;}
.mt-40 {margin-top: 40px;}
.mt-50 {margin-top: 50px;}
.mt-60 {margin-top: 60px;}
.mt-65 {margin-top: 65px;}
.mt-80 {margin-top: 80px;}
.mt-100 {margin-top: 100px;}

.ml-0 {margin-left: 0;}
.ml-5 {margin-left: 5px;}
.ml-10 {margin-left: 10px;}
.ml-15 {margin-left: 15px;}
.ml-20 {margin-left: 20px;}
.ml-25 {margin-left: 25px;}
.ml-30 {margin-left: 30px;}
.ml-40 {margin-left: 40px;}
.ml-50 {margin-left: 50px;}
.ml-60 {margin-left: 60px;}
.ml-65 {margin-left: 65px;}
.ml-80 {margin-left: 80px;}
.ml-100 {margin-left: 100px;}

.mr-0 {margin-right: 0;}
.mr-5 {margin-right: 5px;}
.mr-10 {margin-right: 10px;}
.mr-15 {margin-right: 15px;}
.mr-20 {margin-right: 20px;}
.mr-25 {margin-right: 25px;}
.mr-30 {margin-right: 30px;}
.mr-40 {margin-right: 40px;}
.mr-50 {margin-right: 50px;}
.mr-60 {margin-right: 60px;}
.mr-65 {margin-right: 65px;}
.mr-80 {margin-right: 80px;}
.mr-100 {margin-right: 100px;}
.mb-0 {margin-bottom: 0 !important;}

.mb-5 {margin-bottom: 5px;}
.mb-10 {margin-bottom: 10px;}
.mb-15 {margin-bottom: 15px;}
.mb-20 {margin-bottom: 20px;}
.mb-25 {margin-bottom: 25px;}
.mb-30 {margin-bottom: 30px;}
.mb-40 {margin-bottom: 40px;}
.mb-50 {margin-bottom: 50px;}
.mb-60 {margin-bottom: 60px;}
.mb-65 {margin-bottom: 65px;}
.mb-80 {margin-bottom: 80px;}
.mb-100 {margin-bottom: 100px;}
.ml--30 {margin-left: -30px;}
.box-shadow{box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.08);}
.shadow:hover{
    border-radius: 16px;
    background: var(--white, #FFF);
    /* Dropdown */
    box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.08);
}

.mgo{margin: 0 auto;}

.bg-primary {background: var(--primary);}
.color {color:var(--color);}
.bg-secondary {background-color: var(--secondary);}
.bg-tertiary {background: var(--tertiary);}
.bg-white {background: var(--white);}
.bg-offwhite {background: var(--bg);}
.bg-white.imp {background-color: var(--white)!important;}
.text-primary {color: var(--primary);}
.text-color {color: var(--color)!important;}
.text-white {color: var(--white);}
.text-white.imp {color: var(--white)!important;}


.w-20   {width: 20%;}
.w-30   {width: 30%;}
.w-40   {width: 40%;}
.w-50   {width: 50%;}
.w-60   {width: 60%;}
.w-65   {width: 65%;}
.w-70   {width: 70%;}
.w-80   {width: 80%;}
.w-90   {width: 90%;}
.w-100  {width: 100%;}
.w-900  {width: 900px;}
.fu-ht  {height: 100%;}
.w-auto  {width: auto !important;}
.w-30px {width: 30px;}
.place-center{display: grid;place-content: center;}

.text-white.all *:not(a){color: var(--white)!important;}
.all.text-white *{color: var(--white)!important;}

.wp-pagenavi a, .wp-pagenavi span {
    text-decoration: none;
    padding: 8px 14px!important;
    margin: 2px;
    height: 40px;
    width: 40px;
    border-color:none;
    border-radius:8px;
    background-color:transparent;
    color:var(--text);
}
.wp-pagenavi a, .wp-pagenavi span {
    border-color: transparent!important;
}
.wp-pagenavi a.previouspostslink,
.wp-pagenavi  a.nextpostslink{
    border:none;
}
.wp-pagenavi span.current {
    font-weight: normal;
    background-color:var(--primary);
    color:var(--white);
}
.relative{position: relative;}

.design {
        position: relative;
    }

    .design::before {
        content: '';
        position: absolute;
        border-radius: 810px;
        background: rgba(0, 174, 255, 0.20);
        filter: blur(200px);
        width: 810px;
        height: 800px;
        top: 50%;
        left: -400px;
        -webkit-transform: translate3d(0, -20%, 0);
        transform: translate3d(0, -20%, 0);
		z-index: 1;
    }
	.section.stock-wrap,
	.section.about-wrapper {
		position: relative;
		z-index: 2
	}

    .design::after {
        content: '';
        position: absolute;
        border-radius: 810px;
        background: rgba(41, 73, 118, 0.50);
        filter: blur(200px);
        width: 810px;
        height: 800px;
        top: 50%;
        right: -400px;
        -webkit-transform: translate3d(0, -60%, 0);
        transform: translate3d(0, -60%, 0);
    }
/*========== Buttons Form ===========*/
.btn {
    padding: 12px 24px 12px 12px;
    cursor: pointer;
    font-size: 18px;
    line-height: 140%;
    font-weight: 600;
    font-family: var(--text);
    color: var(--white);
    text-decoration: none;
    display: inline-block;
    text-align: center;
    border-style: solid;
    border-color: transparent;
    border-width: 2px;
    border-radius:50px;
    -webkit-transition: all 0.2s ease-in 0s;
    -moz-transition: all 0.2s ease-in 0s;
    -o-transition: all 0.2s ease-in 0s;
    transition: all .3s ease-in 0s;
}
.btn.no:hover {
    transform: translateY(0px);
    box-shadow: 0 0 0 rgba(32, 52, 85, 1);
}
.abs{position: absolute;}
.btn span {
    height: 24px;
    width: 24px;
    background-color: transparent;
    display: inline;
    padding: 5px 10px;
    border-radius: 50%;
}
.btn span svg {
    color: var(--tertiary);
    transform: rotate(320deg);
}
.btn.link:has(span) {padding: 0 !important;}
.btn span.primary   {background-color: var(--primary);}
.btn span.secondary {background-color: #4BA1D8;}
.btn span.tertiary  {background-color: var(--tertiary);}

.tag{
    display: inline-block;
    margin-right: 12px;
    margin-bottom: 12px;
    padding: 8px 24px;
    border: 1px solid #BDBDBD;
    border-radius: 50px;
    color: #828282;
    text-align: center;
    font-family:var(--text);
    font-size: 14px;
    font-weight: 600;
    line-height: 140%; /* 19.6px */
    text-transform: uppercase;
}
.readmore,.learn-more{
    color: var(--primary);

    /* Body/18px bold */
    font-family: var(--text);
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    padding: 0;
    line-height: 140%; /* 25.2px */
    font-weight: 700;}
.btn:hover {
    box-shadow: 0 15px 20px rgb(0 105 64 / 30%);
    transform: translateY(3px);
}
.circle {
    border-radius: 100%;
    background: var(--tertiary);
    height: 64px;
    width: 64px;
    padding: 0;
}
.circle span svg {
    color: var(--white);
    position: relative;
    top: 17px;
    font-size: 26px;
}

.circle.wh.abs {
    bottom: auto;
    right: 30px;
    opacity: 0;
    top: 30px;
}
.circle.wh span svg {
    color: var(--primary);
    top: 4px;
    font-size: 18px;
}
.circle.wh {
    background: var(--white);
    height: 36px;
    width: 36px;
} 
.circle.abs {
    position: absolute;
    bottom: 30px;
    right: 30px;
    opacity: 0;
    transition: .3s ease-in-out all;
}

/*========= Vision Box link ==========*/
.circle.abs.op1{
    opacity: 1;
}
.vision-box:hover .abs{
    opacity: 1;
    transition: .3s ease-in-out all;
}
/*========= Vision Box link ==========*/
/*========= Projects link ==========*/
.project-box:hover .abs {
    opacity: 1;
    transition: .3s ease-in-out all;
}
/*========= Vision Box link ==========*/
.z2{
    z-index: 2 !important;
}

.default-btn {
    background-color: transparent;
    color: var(--white);
    border-color: transparent;
}
.default-btn span{background-color: var(--tertiary);}
.default-btn span svg{color: var(--white);}

.default-btn:hover {
    background-color: var(--secondary);
    color: var(--white);
    border-color: var(--secondary);
}

.primary-btn {
    background-color: transparent;
    color: var(--primary);
    border-color: var(--primary);
}
.primary-btn span{background-color: var(--primary);}
.primary-btn span svg{color: var(--white);}

.primary-btn:hover {
    background-color: var(--primary);
    color: var(--white);
    border-color: var(--primary);
}

.secondary-btn {
    background-color: transparent;
    color: var(--tertiary);
    border-color: var(--tertiary);
}
.secondary-btn.blue {
    color: var(--tertiary)!important;
}
.secondary-btn.blue:hover {
    color: var(--white)!important;
}
.secondary-btn span{background-color: var(--tertiary);}
.secondary-btn span svg{color: var(--white);}

.secondary-btn:hover {
    background-color: var(--tertiary);
    color: var(--white);
    border-color: var(--tertiary);
}


.tertiary-btn {
    background-color: var(--tertiary);
    color: var(--white);
    border-color: var(--tertiary);
}
.tertiary-btn span{background-color: var(--white);}
.tertiary-btn span svg{color: var(--tertiary);}

.tertiary-btn:hover {
    background-color: transparent;
    color: var(--tertiary);
    border-color: var(--tertiary);
}


.primary-btn.wh:hover {
   background-color: var(--white);
    color: var(--primary);
    border-color: var(--white)f;
}

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

.white-btn:hover {
    background-color: transparent;
    color: var(--white);
    border-color: var(--white);
}

.white-btn.trs {
    background-color: transparent;
    color: var(--white);
    border-color: var(--white);
}

.white-btn.trs:hover {
    background-color: var(--white);
    color: var(--primary);
    border-color: var(--white);
}



/* ========slider============= */

ul.slick-dots{
    padding-left: 0!important;
    margin-bottom: 0!important;
}
.section ul.slick-dots li:before {
    content: none!important;
}
.slick-dots li button:before {
    color: var(--primary);
}
.slick-dots li.slick-active button:before {
    color: var(--primary);
}
.slick-dots {
    bottom: -70px;
}

.logos-wrap{
    padding: 80px 0 64px;
}
#logo-slider .slick-dots {
    bottom: -60px;
}
#logo-slider .slick-slide {
    height: 100px;
    display: grid;
    place-items: center;
}

/*============= Control System Elevate =================*/
.stock-slider .item{
    padding: 24px;
    border-radius: 24px;
    border: 2px solid transparent;
}
.stock-slider .item .img {
    height: 80px;
    margin: 0 auto 15px auto;
    -moz-transition: all 400ms ease-in-out;
    -o-transition: all 400ms ease-in-out;
    -webkit-transition: all 400ms ease-in-out;
    transition: all 400ms ease-in-out;
    display: grid;
    place-items: center;
}`

.stock-slider .item:hover img {
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
} 
.stock-slider .item h4{
    font-size: 24px;
    line-height: 140%;
    margin-bottom: 0;
    font-weight: 600;
}

.stock-slider .item:hover {
    border: 2px solid rgba(75, 161, 216, 0.40);
    /* drop-shadow */
    box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.08);
}
/*============= Control System Elevate =================*/
/*============= Project Inner Elevate =================*/
.page-template-services .project_elevate{
    background-color: var(--bg);
}
.section.boats .slick-arrow.slick-prev {
    left: auto;
    right: 100px;
}
.section.boats .slick-arrow.slick-next {
    right: 20px;
}
.section.boats .slick-arrow {
    bottom: 60px;
}
.caption.abs {
    position: relative;
    bottom: 70px;
    left: 30px;
    z-index: 2;
    color: #fff;
}
/*============= Project Inner Elevate =================*/
.page-template-contact .section.form .overlay {
    padding-top: 0 !important;
}
.section.client{
   
}
.section.client h2{
    color: var(--tertiary, #211951);

    /* Heading/H2 */
    font-family: var(--heading);
    font-size: 48px;
    font-style: normal;
    font-weight: 700;
    line-height: 120%; /* 57.6px */
    /* text-shadow: 2px 2px 3px; */
}
/*==============================*/

.section.about-steel .overlay {

}
.section.about-steel{
    position: relative;
}
.vision-box{
    transition: .3s ease-in-out all;
    margin-top:50px;
}
.vision-box:hover{
   border-radius: 32px;
}
.vision-box .image a img {
    display: block;
    width: 100%;
}

.vision-box .text{
    padding: 36px 24px;
}
.vision-box h3 {
    font-size: 28px;
    line-height: 120%;
    font-weight: 700;
    color:var(--tertiary);
    font-family: var(--text);
}
#vision .slick-track{
    margin-left: -50px;
}
.vision-box .text {
    transition: transform 0.3s ease-in-out; /* Smooth transition */
	min-height: 385px;
}
.page-template-home .vision-box .text {
	min-height: 385px;
}
.vision-box{
    transition: transform 0.3s ease-in-out; /* Smooth transition */
}
.vision-box:hover{
    transform: translate(0, -30px) !important; /* Increase the vertical scale t0 120% on hover */
    
}
.vision-box:hover .text{
    background-color: var(--primary);
    border-radius: 32px 32px 0 0;
    /*margin-top: -30px; */
    padding-bottom: 56px;
}
.vision-box:hover .text *{
    color:var(--white);
}
.vision-box:hover .text ul li:before{
    background-color: var(--white);
}
.vision-box .image img {
    /*transition: transform 0.3s ease-in-out; /* Smooth transition */
}
.vision-box:hover .image {
    background-color: var(--primary);
    border-radius: 0 0 32px 32px;
}

.vision-box:hover .image img {
    /*transform: scaleY(1.2) translate(0, -10px); /* Increase the vertical scale to 120% on hover */
}


#vision .slick-prev,#vision .slick-next{
    position: absolute;
    left: 0;
}
#vision .slick-prev {
    left: 0;
}
#vision .slick-next {
    left: 0;
}

.about-steel .cs-next-prev button {
  background: none;
}
/*=======================================*/
/*=======================================*/


/*=======  courses-wrap ========*/

.section.courses-wrap {
    
}

.courses-wrap .row-block {
    display: grid;
    align-items: stretch;
    justify-content: center;
    width: 100%;
    margin: 0 auto;
    padding: 20px 0;
    grid-template-columns: repeat(3, 1fr);
    grid-column-gap: 20px;
}

.courses-wrap .row-block .selector {
    width: 97%;
    overflow: hidden;
    position: relative;
    background-color: #D4D9E220;
    padding: 3rem 2rem;
}

.courses-wrap .row-block .selector:first-child {
    border-top: 5px solid var(--light-blue);
}

.courses-wrap .row-block .selector {
    border-top: 5px solid var(--blue);
    position: relative;
}

.courses-wrap .row-block .selector:last-child {
    border-top: 5px solid var(--orange);
}

.courses-wrap .row-block .selector:first-child .readmore {
    color: var(--light-blue);
}

.courses-wrap .row-block .selector .readmore {
    color: var(--blue);
}

.courses-wrap .row-block .selector:last-child .readmore {
    color: var(--orange);
}

.courses-wrap .row-block .selector {
    transition: .3s all ease-in-out;
}

.courses-wrap .row-block .selector:hover:after {
    border: 5px solid var(--blue);
    transition: .3s all ease-in-out;
    position: absolute;
    top: -5px;
    left: 0;
    right: 0;
    bottom: 0;
    content: "";
    z-index: -1;

}

.courses-wrap .row-block .selector .image {
    overflow: hidden;
}

.courses-wrap .row-block .selector .text {
    padding: 20px 0;
}

.selector .text h3 {
    font-family: var(--font-sans);
    color: var(--text-blue);
    font-size: 23px;
    line-height: 33px;
    font-weight: 700;
}

.selector .text h3 span {
    display: block;
    color: var(--light-blue);
}

.selector .text p {
    font-size: 20px;
    line-height: 26px;
    color: var(--text);
    font-weight: 300;
    margin-bottom: 0;
}

.selector .text span.btn {
    position: absolute;
    bottom: 5px;
    left: 0;
    right: 0;
    display: block;
    width: 200px;
    padding: 10px 20px;
}

.selector .text .readmore {
    color: var(--light-blue);
    font-size: 18px;
    line-height: 22px;
    display: block;
    /* float: right; */
    margin-right: 4px;
    position: absolute;
    right: 33px;
    bottom: 2rem;
}

.courses-wrap .row-block a.selector:hover .image {
    position: relative;
    transition: all .9s ease-in-out;
}

.courses-wrap .row-block a.selector:hover .image img {
    -webkit-transform: scale(1.1, 1.1);
    -ms-transform: scale(1.1, 1.1);
    transform: scale(1.1, 1.1);
    -webkit-transition: all 3s cubic-bezier(0.165, 0.84, 0.44, 1);
    transition: all 3s cubic-bezier(0.165, 0.84, 0.44, 1);
}

/*=======  courses-wrap ========*/
/* testimonials */
.testimonials p {
    color: var(--white, #FFF);
    font-family: "Nunito Sans";
    font-size: 24px;
    font-style: italic;
    font-weight: 400;
    line-height: 160%; /* 38.4px */
    margin-bottom: 40px;
}

.testimonials .quote {
    margin-bottom: 40px;
}

.testimonials .slick-next {
    right: 30px;
}

.testimonials .author span {
    color: var(--white, #FFF);

    display: block;
    /* Body/18px bold */
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 140%; /* 25.2px */
    margin-bottom: 40px;
}
/* testimonials */

.section.model {
    padding: 100px 0;
}

.section.model .title {}

.model-table {
    padding-left: 10%;
}

.model .left-wrap {
    width: 40%;
}

.model .right-wrap {
    width: 60%;
}

.model table tr th {
    background: var(--light-blue);
    color: var(--white);
    font-weight: 400;
}

.model table tr th,
.model table tr td {
    text-align: left;
    border: 1px solid #c5c6c7;
    padding: 30px;
}

.model table tr:nth-child(odd) {
    background-color: #f6f6f6;
}

.model table tr td {
    font-size: 18px;
    font-weight: 300;
}

.row-block {
    display: flex;
    flex-flow: row wrap;
    width: 100%;
    align-items: center;
    justify-content: space-between;
}


img.mobile-view {
    display: none;
}

/* ========= Responsive ========== */
@media screen and (max-width: 1230px) {
    .container {
        width: 100%;
        max-width: 100%;
        padding: 0 1%;
    }

    .container-fluid {
        max-width: 100%;
        padding: 0 1%;
        width: 100%;
    }

    .selector .text p {
        padding: 10px 1% 0;
    }

}

@media screen and (max-width: 1100px) {

    .section.context .title h4 {
        font-size: 28px;
        line-height: 40px;
    }

    .md-w-100{width: 100%;}
    
}

@media screen and (max-width: 1024px) {
    .md-grid-2{grid-template-columns:1fr 1fr;}
    .md-grid-1{grid-template-columns:1fr;}
    .md-gap-2{gap:2rem;}
    .visible-md{display: none;}
    .visible-md-block{display: block;}
    .md-pt-50{padding-top: 50px;}
    .md-pb-70{padding-bottom: 70px;}
    .w-900  {width: 80%;}
    .flex-row-reverse {flex-flow: column;} 
    .sm-pd0{padding-left: 0;padding-right: 0;}
    .sm-grid-2 {grid-template-columns: 1fr 1fr;}
    .sm-custom a, .sm-custom a:hover, .sm-custom a:focus, .sm-custom a:active {
        font-size: 16px;
    }
   
}

@media screen and (max-width: 990px) {
    .site-nav {margin-top: 0;}

    .section.hero .content h1 {
        font-size: 50px;
        line-height: 52px;
    }

     .boats .row-block {
        display: block;
    }

    .boats .row-block .left-wrap {
        width: 100%;
    }

    .boats .row-block .right-wrap {
        width: 100%;
        display: block;
        flex-flow: row;
        padding-left: 0;
    }

    .boats .row-block .right-wrap .content {
        width: 100%;
    }
    .about-steel .row .div-wrap .title h3 {
        font-size: 50px;
        line-height: 50px;
    }


   
    .footer-top .right-wrap .contact p,
    .footer-top .right-wrap .contact a {
        font-size: 14px;
    }
    .section.form .overlay .form {
        width: 70%;
    }
}

@media screen and (max-width: 880px) {
    .nav #menu>li>a {
        padding: 15px 2px;
        font-size: 12px;
    }

    .header .top-wrap .left-wrap {
        width: 300px;
        padding: 0;
    }

    .header .top-wrap .left-wrap .logo {
        width: 300px;
    }

    
    .section.courses-wrap .title .content {
        width: 100%;
    }

    .courses-wrap .row-block {
        display: block;
        flex-flow: unset;
        margin: 0 auto;
        width: 100%;
        padding: 0 1%;
    }

    .courses-wrap .row-block a.selector {
        width: 300px;
        margin: 0 auto 20px;
        display: block;
    }

    .courses-wrap .row-block a.selector:last-child {
        margin: 0 auto;
    }

    .section.context .title h4 {
        font-size: 22px;
        line-height: 36px;
    }

    .footer-top .right-wrap .contact {
        padding-left: 1%;
    }
    .section.form .overlay .form {
        width: 80%;
    }

   
}

@media screen and (max-width: 767px) {
    .container {padding: 0 20px;}
    .mobile-view {display: block;}
    img.mobile-view {display: block;}
    .pt-60,.pt-100 {padding-top: 20px;}
    .pb-60,.pb-100 {padding-bottom: 20px;}
    .sm-ptb-0{padding-top: 0;padding-bottom: 0;}
    .sm-pb-20{padding-bottom: 20px;}
    .sm-pb-0{padding-bottom: 0;}
    .sm-pr-0{padding-right: 0;}
    .sm-pt-20{padding-top: 20px;}
    .sm-pt-40{padding-top: 40px;}
    .sm-pb-40{padding-bottom: 40px;}
    .sm-mb-40{margin-bottom: 40px;}
    .sm-mb-36{margin-bottom: 36px;}
    .sm-pb-80{padding-bottom: 80px;}
    .sm-pl-0{padding-left: 0;}
    .sm-pr-0{padding-right: 0;}
    .sm-w-50{width: 70%;}
    .sm-fz h5{font-size: 16px;line-height: 26px;}
    .sm-fz p{font-size: 14px;line-height: 24px;}
    .sm-pd-50-20{padding: 50px 20px;}
    .sm-ptb-50{padding: 50px 0;}
    .sm-pb-50{padding-bottom: 50px;}
    .sm-pb-30 {padding-bottom: 30px;}
    .sm-pt-64{padding-top: 64px;}
    .sm-pt-36 {padding-top: 36px;}
    .sm-mg20{margin: 0 20px;}
    .sm-pd-0{padding: 0;}
    .sm-text-white,.sm-text-white p,.sm-text-white cite{color:var(--white)!important;}
    .sm-font{font-size: 24px!important;line-height: 140%;font-weight: 700;}
    .sm-table tr th ,
    .sm-table tr td {width: 100%;display: block;}
    .sm-btn-full {margin-bottom: 10px;width: 100%;}
    .pb {adding-bottom: 20px !important;}
    .sm-flex-row {flex-flow: column;gap:36px;}
    .sm-h-50 > div{
        aspect-ratio: 3/2;
        height: 250px;
        overflow: hidden;
        border-radius: 32px;
        width: 300px;
        margin: 0 auto;
    }
    .vision-box {margin: 35px 40px 0;}
    #vision .slick-track {margin-left: 0;}
    /* .btn {padding: 12px 20px;font-size: 16px;line-height: 26px;}   */
    
    .ml--30 {margin-left: auto;margin-right: auto;}
    .sm-w-100{width: 100%;}
    .float-right,.float-left {float: none;}
    .grid {display: grid;grid-gap: 2rem;}
    .grid-auto {grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));}
    .grid-2,.grid-3,.grid-2-1,.grid-1-2,.md-grid-2-imgr,.grid-2-3,.grid-3_5,.grid-10-1,.grid-4,.grid-1_5-2,.grid-5,.grid-1-1_3 {
        grid-template-columns: 1fr;
    }
    .sm-grid-2 {grid-template-columns: 1fr 1fr;}
	.sm-pt-0{padding-top:0;}
    .flex-container {display: block;}
    .visible-xs {display: block!important;}
    .visible-lg {display: none;}
    .sm-center-grid {width: 290px;margin: 0 auto;}
    .cbp-spmenu {background: var(--tertiary);}
    
    .section .title .content {width: 100%;margin: 0 auto;}
    .header .top-wrap .left-wrap,.header .top-wrap .left-wrap .logo {width: 200px;}
    .section.client h2 {font-size: 36px;}
    #logo-slider .slick-slide img {margin: 0 auto;}
    .logos-wrap {padding: 20px 0;}
    .sm-text-center{text-align: center;}
    .sm-w-220 {width: 220px;margin: 0 auto;}
    
    .sm-custom a,.sm-custom a:hover,.sm-custom a:focus,.sm-custom a:active,.sm-custom a.highlighted {
        padding: 12px 15px;border-bottom: 1px solid #fff;font-size: 18px;}
    .sm-custom ul a,.sm-custom ul a:hover,.sm-custom ul a:focus,.sm-custom ul a:active {border-bottom: 0;}
    .sm-custom>li {margin-left: 0px;margin-right: 0}

    
    #project_elevate .slick-arrow.slick-prev {left: 0 !important;right: auto !important;}
    #project_elevate .slick-arrow.slick-next {left: 100px;right: auto;}

    .courses-wrap .row-block .selector {width: 300px;margin: 0 auto 20px;}

    .boat-block {display: block;}
    .boat-block .colm {width: 300px;margin: 0 auto;}

    .industry {width: 300px;position: relative;overflow: hidden;height: auto;margin: 0 auto;}
    .industry.image-box.bgImage {background-image: none !important;}

    .row-block {display: block;flex-flow: unset;width: 100%;}

    .about-steel .row .right-wrap {display: block;}
    .about-steel .row {display: block;flex-flow: unset;}
    .about-steel .row .div-wrap {width: 100%;}
    
    .about-steel .row .right-wrap {width: 300px;margin: 0 auto 20px;}
    .about-steel .row>div {width: 100%;}
    .section.about-steel .overlay::before {height: 45%;width: 100%;}
    .section.about-steel .overlay::after {width: 0;}
    
    .section .title {margin-bottom: 20px;}
    .section .title h1,.section .title h2,.section .title h3 {font-size: 32px;line-height: 120%;}
    .section.about-steel .title h2,.section.form .title h2{font-size: 36px;line-height: 120%;}
    .section.courses-wrap .title h2{font-size: 36px;line-height: 120%;}
    
    /*  ======================    */
    
    .section.context {padding: 20px 0;}
    .section.courses-wrap {padding: 50px 0;}
    .section.courses-wrap .title {margin-bottom: 20px;}

    .courses-wrap .content {display: block;flex-flow: unset;margin: 0 auto;}
    .courses-wrap .content a.selector {display: block;width: 300px;margin: 0 auto 20px;}
    .section.context .text {width: 100%;text-align: center;margin: 0 auto;}
    .quote {right: 40px;}
    .testimonials .row-block .right-wrap .content p {font-size: 16px;line-height: 26px;}

    .section.context .layer {padding: 20px 0;}
    .section.context .text p {font-size: 16px;line-height: 26px;margin-bottom: 10px;}

    /*  ======================    */    

    .section.form.sm-pb-20{padding-bottom: 50px;}    
    .social-media {text-align: center;}
    .social-media {width: 100%;}
    .footer-logo {width: auto;margin: 0 0 20px;}
    .footer-nav ul {text-align: left;display: grid;grid-template-columns: 1fr;grid-gap: 0 20px;margin: 30px 0;}
    .footer .footer-top .nav-links .footer-nav ul li:first-child a {margin-bottom: 0;}
    .footer .footer-top {padding: 20px 0;display: block;flex-flow: unset;}
    .footer .footer-top>div,.footer .footer-top .col.nav {width: 100%;margin: 0 10px;display: block;}
    .footer .footer-top .col.contact {width: 200px !important;margin: 0 auto;}
    .footer-bottom .copyright p {font-size: 16px;}
    .footer-bottom p span {display: block;text-align: center;}
    .foverlay.pt-80{padding-top: 50px;}
    .footer-nav ul {margin: 15px 0;}
}

@media screen and (max-width: 600px) {
    .header .top-nav ul li a {font-size: 14px;}
}