@font-face {
    font-family: 'Calibri';
    src: url('../fonts/Calibri-Bold.woff2') format('woff2'),
        url('../fonts/Calibri-Bold.woff') format('woff'),
        url('../fonts/Calibri-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Calibri';
    src: url('../fonts/Calibri-Light.woff2') format('woff2'),
        url('../fonts/Calibri-Light.woff') format('woff'),
        url('../fonts/Calibri-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Calibri';
    src: url('../fonts/Calibri.woff2') format('woff2'),
        url('../fonts/Calibri.woff') format('woff'),
        url('../fonts/Calibri.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

* {box-sizing: border-box;  -webkit-box-sizing: border-box }
html {font-family: 'Calibri'; -ms-text-size-adjust: 100%;   scroll-behavior: smooth; overflow-x: hidden;}
body{margin: 0; padding: 0; box-sizing: border-box; font-family: 'Calibri';  font-size: 18px; font-weight: 300;  line-height: 1.4; color:#455461; background-image: url(../images/deep-crc-background.svg); background-repeat: no-repeat; background-size: cover; }

main {max-width: 93%;  margin: 0 auto;  padding: 70px;  background: #fff;}
.wrap{max-width: 100%; margin: 0 auto; }
img{max-width: 100%; height: auto; display: block;}
ul , ol{list-style: none; margin: 0; padding: 0;}
p{margin-top: 0; margin-bottom: 20px;}
p:last-child{margin-bottom: 0;}
h1,h2,h3,h4,h5,h6 {font-family: 'Calibri';  font-style: normal;  margin: 0;}

a{text-decoration:none; transition: 0.4s;-moz-transition: 0.4s; text-decoration: none !important; -webkit-transition: 0.4s; cursor: pointer;}
a:hover{color:#fff; transition: 0.4s; -moz-transition: 0.4s; -webkit-transition: 0.4s; text-decoration: none !important;}
a:focus, button:focus {outline:none; color:#fff; text-decoration: none;}
b{font-weight: bold;}   

input[type="submit"]:focus {outline: none; border-radius: 0;}
select {outline:none ; border-radius: 0;}
button,input,optgroup,select,textarea {font-family: inherit;   font-size: 100%;   line-height: 1.15;   margin: 0}
button,input {overflow: visible;}
button,select {text-transform: none;}
.mb0{margin-bottom: 0 !important;}
.text-center {text-align: center;}
.pb-100{padding-bottom: 80px;}
.btn-main {border-radius: 30px; background-color: #445460; color: #fff; border: 1px solid #445460; outline: none;  padding: 10px 35px;  font-size: 18px; font-weight:bold; line-height:normal; transition: all 0.4s ease;  display: inline-block;	cursor: pointer;}
.btn-main:hover{background-color: #fff; color:#445460;}

.font48 {font-size:48px; font-family:'Calibri';  font-weight:400; line-height: 1.2; margin-bottom: 10px; }

.icon-title{position: relative;}
.icon-title:after {content: '';  position: absolute;  top: -50px;  background-image: url('../images/deep-crc-icons5.svg');  height: 40px;  background-repeat: no-repeat;  background-size: contain;  background-position: center;  left: 0;  width: 40px;}

/*header*/
.header-info {padding-bottom: 80px;}
.header-navbar {display: flex;  justify-content: space-between; grid-gap: 50px;}
.header-logo {width: 375px;}
.header-text p {font-size: 20px;  font-weight: 400;     text-transform: uppercase;}

/*overview*/
.overview-info{padding: 100px 0 80px;  border-top: 1px solid #c7ccd0;  border-bottom: 1px solid #c7ccd0;}
.overview-inner {display: grid;  grid-template-columns: repeat(2,1fr);  grid-gap: 100px;}
.overview-images {display: flex;  grid-gap: 50px;}
.overview-images img {border-radius: 20px;}

/*key focus*/
.key-focus-info{padding-top: 80px;}
.key-focus-inner{display: grid;  grid-template-columns: repeat(2,1fr);  grid-gap: 60px;}
.focus-list li {display: flex;  margin-bottom: 30px;}
.focus-list li:nth-child(2) {margin-bottom: 50px;}
.focus-list li:nth-child(2) .focus-icon {width: 50%;  height: 19px;  margin-top: 10px;}
.focus-list li:last-child{margin-bottom: 0;}
.focus-icon {width: 50%;  height: 120px;}
.focus-icon img {height:100%;}
.focus-list p {font-size: 22px;  width: 50%;  font-weight: 400;  text-transform: uppercase;  position: relative;}
.focus-list p::after {content: '';  position: absolute;  top: 0;  left: -70px;   background-image: url(../images/deep-crc-icons4.svg);  height: 55px;  width: 55px;   background-repeat: no-repeat;  background-size: contain;   background-position: left -10px;   padding-left: 0px;}
.key-focus-left {padding: 40px;  border: 1px solid #c7ccd0;   border-radius: 20px;}
.key-focus-right .btn-main {margin-top: 20px;}  
.key-focus-last-li img {margin-top: -30px;}


/*Responsive*/

@media (min-width:1921px) {

    main {width:1850px; max-width:100%;}

}

@media (max-width:1800px) {

    .focus-list li:nth-child(2) .focus-icon {height: 17px;}

}

@media (max-width:1700px) {

    .focus-list li:nth-child(2) .focus-icon {height: 15px;}

}

@media (max-width:1600px) {
    
    .pb-100 {padding-bottom: 70px;}

    .header-logo {width: 350px;}
    .focus-list p {font-size: 20px;}
    .focus-list li:nth-child(2) .focus-icon {height: 13px;}

}

@media (max-width:1534px) {

    main {padding: 50px;}

    .key-focus-inner {grid-gap: 50px;}
    .icon-title::after {top: -45px;  height: 35px;   width: 35px;}

}

@media (max-width:1439px) {

    .focus-list p::after {top: 7px;    left: -45px;    height: 40px;    width: 40px;}
    .overview-inner {grid-gap: 60px;}
    .overview-images {grid-gap: 30px;}

}

@media (max-width:1365px) {

    .pb-100 {padding-bottom: 50px;}

    .header-info {padding-bottom: 70px;}
    .overview-info {padding: 90px 0 70px;}
    .key-focus-info {padding-top: 70px;}
    .focus-list li:nth-child(2) .focus-icon {height: 12px;    margin-top: 12px;}
    .focus-icon {height: 100px;}
    .icon-title::after {top: -40px;	height: 30px;	width: 30px;}
    .key-focus-right .btn-main {margin-top: 15px;}

}

@media (max-width:1279px) {

    .header-logo {width: 300px;}
    .header-info {padding-bottom: 60px;}
    .overview-info {padding: 80px 0 60px;}
    .key-focus-info {padding-top: 60px;}
    .overview-images {grid-gap: 20px;}
    .overview-inner {grid-gap: 50px;}
    .key-focus-inner {grid-gap: 40px;}
    .key-focus-left {padding: 30px;}
    .key-focus-right .btn-main {margin-top: 10px;}
    .focus-list li:nth-child(2) {margin-bottom: 40px;}

}

@media (max-width:1199px) {

    .font48 {font-size: 42px;}

    main {max-width: 90%;}

    .header-info {padding-bottom: 50px;}
    .overview-inner {grid-template-columns: repeat(1,1fr);}
    .overview-info {padding: 80px 0 50px;}
    .focus-icon {width: 40%;}
    .focus-list li:nth-child(2) .focus-icon {width: 40%;}
    .key-focus-inner {grid-template-columns: repeat(1,1fr);}
    .key-focus-info {padding-top: 50px;}
    .focus-list li:nth-child(2) .focus-icon {height: 15px;}

}

@media (max-width:1023px) {

    .font48 {font-size: 38px;}

    main {padding: 40px;  max-width: 85%;}

    .header-navbar {grid-gap: 30px;}
    .focus-icon {width: 50%;}
    .focus-list li:nth-child(2) .focus-icon {width: 50%; height: 14px;}

}

@media (max-width:767px) {

    body{font-size: 16px;}
    main {padding: 30px;}

    .header-info {padding-bottom: 30px;}
    .overview-inner {grid-gap: 30px;}
    .overview-info {padding: 70px 0 30px;}
    .key-focus-info {padding-top: 30px;}
    .key-focus-inner {grid-gap: 30px;}
    .focus-list li:nth-child(2) .focus-icon {height: 12px;}
    .key-focus-last-li img {margin-top: -20px;}

}

@media (max-width:575px) {

    .font48 {font-size: 32px;}
    .pb-100 {padding-bottom: 30px;}

    main {padding: 20px; max-width: 90%;}

    .header-logo {width: 100%;}
    .header-navbar {grid-gap: 15px;}
    .header-text p {font-size: 14px;}
    .overview-info {padding: 60px 0 30px;}
    .icon-title::after {top: -30px;  height: 20px;  width: 20px;}
    .key-focus-left {padding: 15px;}
    .focus-list li {flex-wrap: wrap;  margin-bottom: 20px;}
    .focus-list p {font-size: 14px;   width: 57%;}
    .focus-icon {width: 43%;}
    .focus-list li:nth-child(2) .focus-icon {width: 43%;  height: 6px;  margin-top: 8px;}
    .focus-list li:nth-child(2) {margin-bottom: 30px;}
    .focus-icon {height: 55px;   margin-bottom: 5px;}
    .focus-list p::after {top: -5px;  left: -30px;  height: 30px;  width: 30px;  background-size: 20px;   background-position: center;}
    .key-focus-last-li img {margin-top: 0px;}

}

@media (max-width:320px) {

    .font48 {font-size: 28px;}
    .focus-list li:nth-child(2) .focus-icon {height: 4.5px;}

}