@import 'reset.css';
@import 'helpers.css';
@import 'cursor.css';
@import 'fonts.css';
@import 'header.css';

:root {
    --white: #fff; 
    --bodyText: #7B6E66;
}
html.has-scroll-smooth {
    overflow: hidden;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;  
}

body {
    font-family: 'D-DIN-PRO';
    font-size:  18px;
    color: var(--bodyText) ;
    overflow-x:hidden; 
    min-width: 360px;
    font-weight: 400;
    line-height: 1;
}

::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
::-webkit-scrollbar {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}


a {
    color: #CE2030;
}
.d-none {
    display: none;
}
.d-block {
    display: block;
}
.wrapper {
    position: relative;
    transition: all .5s ease-in-out;
}
body.no-scroll {
    overflow: hidden !important;
}

.head1 {
    font-size: 9.4vw;
    line-height: .9;
}
.head2 {
    font-size: 46px;
    line-height: 1.1;
    position: relative;
}
.head3 {
    font-size: 32px;
    line-height: 1;
    position: relative;
}
.head4 {
    font-size: 54px !important;
    line-height: 1.17;
    position: relative;
}
.head5 {
    font-size: 36px;
    line-height: 1.17;
    position: relative;
}
.cw {
    color: #fff  !important;
}
.cb {
    color: #262262 !important;
}
.clb {
    color: #18A0DB;
}
.cp {
    color: #6F499D;
}

.para {
    font-size: 28px;
    line-height: 1.2;
}
.para2 {
    font-size: 22px;
    line-height: 1.3;
}

.radius10 {
    border-radius: 10px;
}
.img {
    margin-bottom: 20px;
}
.img img{
    width: 100%;
}

ul li {
    margin-bottom: 20px;
}
.hr {
    background: #262262;
    border: 0;
    width: 100%;
    height: 1px;
    margin-bottom: 30px;
}
.web_page {
    overflow: hidden;
}

.main-banner {
    padding: 0;
    text-align: center;
    position: relative;
    margin-bottom: 6%;
}
.main-banner > img {
    width: 100%;
    object-fit: cover;
    height: 100%;
}
.video-holder {
    position: absolute;
    top: -3%;
    left: 0;
    width: 100%;
    height: auto;
    z-index: 1;
}
.video-holder .inner {
    margin: 0 auto;
    width: 57%;
}
.video-holder .inner img{
    width: 100%;
}
.main-banner .infos {
    position: absolute;
    left: 0;
    bottom: 5%;
    width: 100%;
    z-index: 2;
}
.heading {
    display: flex;
    align-items:center;
}
.heading span{
    color: #18A0DB;
    margin-right: 10px;
}
.heading h2 {
    font-size: 20px;
    color: #262262;
    font-weight: bold;
    margin-right: 20px;
}
.heading .line {
    flex:1;
    background: #262262;
    height: 1px;
}
.about-gasco {
    display: flex;
}
.about-gasco .left{
    width: 32%;
}
.about-gasco  .right{
    width: 68%;
}

.btns {
    position: relative;
    width: 100%;
    display: flex;
}
.btns a{
    font-weight: bold;
    color: #262262;
    padding: 10px 20px;
    border: 1px solid #262262;
    transition: all .7s ease;
    border-radius: 50px;
}
.btns a:hover{
    background: #262262;
    color: #fff;
}

.btns.white a{
    color: #fff;
    border: 1px solid #fff;
}
.btns.white a:hover{
    background: #fff;
    color: #262262;
}
.chairman-home{
    background: url('../images/chairman-bg.jpg') no-repeat bottom left;
    padding: 0 0 6vw;
    background-size: cover;
}
.chairman-home .inner {
    width: 67%;
    margin: 0 auto;
}
.chairman-home .infos {
    display: flex;
    justify-content: space-between;
}
.chairman-home .infos .left{
    width: 40%;
}
.chairman-home .infos .right{
    width: 48%
    /*padding-right: 4vw;*/
}
.chairman-home .infos p {
    font-size: 34px;
    color: #262262;
    line-height: 1.1;
    padding-right: 4vw;
}

.future-main {
    position: relative;
}
.future-main .img {
    margin-bottom: 0;
}
.future-main .infos {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}
.future-main {
    margin-bottom: 15%;
}

.financial-performance-main {
    
position: relative;
    
overflow: hidden;
}
.financial-performance-main .numbers-main {
    width: 67%;
    margin: 0 auto;
}
.financial-performance-main .numbers-main .infos{
    display: flex;
    justify-content: space-between;
}
.financial-performance-main .numbers-main .left{
    width: 30%;
}
.financial-performance-main .numbers-main .right{
    width: 45%;
    text-align: end;
}

.financial-performance-main .numbers-main .head1{
    font-size: 8vw;
}
.financial-performance-main .increase-box {
    display: flex;
    justify-content: end;
    align-items: center;
}
.financial-performance-main .increase-box img{
    margin-right: 16px;
}
.financial-performance-main .increase-box p {
    font-size: 30px;
}
.financial-graph .svg-holder {
    padding-bottom:20px;
    border-bottom:1px solid #C1C3C2;
    margin-bottom: 40px;
    position: relative;
}
.financial-graph .svg-holder  svg{
    width: 100%;
}
.years {
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
}
.years span{
    font-size: 30px;
    color: #262262;
}
.financial-performance-section .img{
    margin-bottom: -6px;
    position: relative;
    top: -20%;
}
.financial-performance-section {
    position: relative;
}
.financial-performance-section .infos{
    position: absolute;
    left: 0;
    bottom: 5%;
    /* display: flex; */
    color: #fff;
    width: 100%;
}
.financial-performance-section .infos .swiper-slide  .box{
    /* width: 33.33%; */
    border-right: 1px solid #fff;
    padding: 0 15% 80px;
    position: relative;
    height: 100%;
}
.financial-performance-section .infos .swiper-slide:last-child .box{
    border: 0;
}
.financial-performance-section .infos .box .head1 {
    font-size: 8vw;
}
.financial-performance-section .infos .box .btns {
    position: absolute;
    left: 15%;
    bottom: 30px;
    width: 85%;
}

.financialSwiper .swiper-slide {
    display: flex;
    flex-direction: column;
}

.swiper-arrows{
    display: flex;
    /* flex-direction: column; */
    position: absolute;
    top: 22%;
    right: 20px;
    z-index: 10;
    grid-gap: 10px;
}
.swiper-arrows .swiper-button-next{
    right: auto;
}
.swiper-arrows .swiper-button-prev,
.swiper-arrows .swiper-button-next{
    background: transparent;
    width: 4vw;
    height: 4vw;
    position: relative;
    margin: 0;
    left: 0;
    border-radius: 50px;
    transition: all 1s ease;
    border: 1px solid rgba(38,34,98,.4);
}
.swiper-arrows .swiper-button-prev{
    right: 10px;
    left: auto;
}
.swiper-arrows .swiper-button-prev{
    margin-bottom: 10px !important;
    right: 0;
}
.swiper-arrows .swiper-button-prev svg{}
.swiper-button-next:after,
.swiper-button-prev:after {
    display: none;
}
.swiper-arrows .swiper-button-prev svg,
.swiper-arrows .swiper-button-next svg{
    fill: #262262;
    width: 25px;
    height: 25px;
    transition: all 1s easae;
}

.swiper-arrows .swiper-button-prev:hover,
.swiper-arrows .swiper-button-next:hover {
    border-color: #262262;
    background: #262262;
}
.swiper-arrows .swiper-button-prev:hover svg,
.swiper-arrows .swiper-button-next:hover svg{
    fill: #fff;
}

.hover-reveal {
    position: absolute;
    z-index: -1;
    width: 220px;
    height: 320px;
    top: 0;
    left: 12vw;
    pointer-events: none;
    opacity: 0;
}

.hover-reveal__inner {
    overflow: hidden;
}

.hover-reveal__inner,
.hover-reveal__img {
    width: 100%;
    height: 100%;
    position: relative;
}

.hover-reveal__img {
    background-size: cover;
    background-position: 50% 50%;
}

.page-links {
    padding: 0;
    position: absolute;
    top: 44px;
    left: 130px;
    z-index: 100;
}

/* chairmain page */
.chairman-sec {
    height: 100vh;
    padding: 0;
} 
.chairman-home.chairman-sec .inner {
    width: 100%;
    padding: 5% 25px 0;
    display: flex;
    position: relative;
    justify-content: end;
    height: 100%;
    align-items: center;
}
.chairman-home.chairman-sec .inner .left {
    width: 55%;
    position: absolute;
    top: 19%;
    left: 15px;
    z-index: 1;
    height: 100%;
    padding: 0;
}
.chairman-sec .left .head1 {
    font-size: 10.1vw;
    line-height: .8;
}
.chairman-home.chairman-sec .inner .right .img{
    margin-bottom: 0;
    width: 70%;
}
.chairman-home.chairman-sec .inner .right .img-info {
    width: 50%;
}

.gradient-text {
   background: rgb(0, 174, 195);
   background: linear-gradient(90deg, rgba(0, 174, 195, 1) 0%, rgba(24, 160, 219, 1) 9%, rgba(166, 142, 194, 1) 42%, rgba(90, 38, 107, 1) 74%);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
}
.chairman-home.chairman-sec .inner .right {
    width: 54.5%;
    display: flex;
    grid-gap: 2vw;
}

.fixed-container {
    position: relative;
    padding-top:7vw;
}
.fixed-container .fixed-div{
    width: 190px;
    position: absolute;
    top: 0;
    left: 2.8%;
    height: 100vh;
    z-index: 1;
    padding: 0;
}
.fixed-container .fixed-div .img {
    margin-bottom: 0;
}

.fixed-container .fixed-div .inner {
    height: 100%;
    display: flex;
    justify-content: space-between;
    flex-direction: column;
    padding-top: 15vh;
    padding-bottom: 10%;
}

.fixed-container .fixed-div .inner .side-links li {
    margin-bottom: 10px;
}
.fixed-container .fixed-div .inner .side-links li a{
    font-size: 18px;
    color: #6AA8D6;
    transition: all .6s ease;
}
.fixed-container .fixed-div .inner .side-links li a.active,
.fixed-container .fixed-div .inner .side-links li a:hover{
    color:#6F499D;
    text-shadow: 1px 1px 1px #6F499D;
}

.sub-inner-section.ligth-bg {
    background: #E0EDF6;
}
.sub-inner-section .inner {
    width: 63%;
    margin: 0 auto;
}


.bus-gasco {
    display: flex;
    justify-content: space-between;
}
.bus-gasco .left{
    width: 30%;
}
.bus-gasco  .right{
    width: 60%;
}

.bus-num {
    display: flex;
    justify-content: space-between;
}
.bus-num .box {
     width: 54%;
}
.bus-num .box.text {
     width: 43%;
}
.bus-num .box .head1 {
    font-size: 7vw;
    white-space: nowrap;
}

video#home_mb {
    display: none;
}
video#home_video {
    position: relative;
    width: 100%;
    object-fit: cover;
    display: block;
}
video#non-ios-video {
    position: relative;
    width: 100%;
    object-fit: cover;
}
.table-responsive {
    display: block;
    width: 100%;
    overflow-x: auto;
}
.table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
}
.table th {
    background-color: #B2EBF2;
    color: #2E368C;
    font-size: 24px;
    font-weight: 900;
    border-bottom: 2px solid #2E368C;
}
.table th.thbg {
    background-color: #45B4E2;
}
.table th.thbg2 {
    background-image: linear-gradient(to right, #74c6ea 0%, #74c6ea 21%, #5dbde6 100%);
}
.table th.thbg3 {
    background-image: linear-gradient(to right, #a2d9f1 0%, #a2d9f1 21%, #8bd0ed 100%);
}
.table td,
.table th {
    padding: 1.5vw;
}
.table td {
    border-left: 1px solid #D4D3DF;
    text-align: center;
    color: #575757;
    font-size: 22px;
}
.table tr td:last-child{
    border-right: 1px solid #D4D3DF;
}
.table tr:nth-child(even) {
    background-color: #EEEEEE;
}


.table.table2 th {
    color: #fff;
    background-color: #262262;
    font-weight: 400;
    text-align: center;
    border-bottom: 0;
    vertical-align: middle;
}
.table.table2 td,
.table.table2 th {
    padding: 1vw;
}
.table.table2 td{
    color: #575757;
}
.table.table2 tr td:first-child {
    border-left: 0;
}

.table.table3 th {
    color: #fff;
    background-color: #704A9E;
    font-weight: 400;
    text-align: center;
    border-bottom: 0;
    vertical-align: middle;
    border-spacing: 50px;
}
.table.table3 th:first-child {
    text-align: left;
} 
.table.table3 td,
.table.table3 th {
    padding: 2vw 1vw;
}
.table.table3 td{
    color: #575757;
    border: 0 !important;
}
.table.table3 tr td:first-child {
    border-left: 0;
    text-align: left;
    padding-left: 0;
}
.table.table3 tbody tr {
    border-bottom: 2px solid #704A9E;
}
.table.table3 tbody tr:first-child {
    border-bottom: 0;
}
.table.table3 tbody tr:first-child td{
/*    padding-bottom: 4vw;*/
}
.table.table3 tr:nth-child(even) {
    background-color:transparent;
}
.table.table3 tfoot {
    
}
.table.table3 tfoot td {
    color: #2985CC;
    font-size: 2vw;
    font-weight: bold
}
.table.table3 tfoot tr {
    border-bottom: 2px solid #2985CC;
}
.performanceSwiper .swiper-slide {
    position: relative;
    height: auto;
}

.acc.acc-performance .acc__panel {
    padding-left: 0;
}
.acc.acc-performance .acc__title {
    margin-bottom: 0;
}

.acc__panel.pl0 {
    padding-left: 0 !important;
}

.acc__title {
    padding-right:5vw;
}

.dropdown {
    position: relative;
}
.dropdown .dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: #fff;
    opacity: 0;
    visibility: hidden;
    transition: all .7s ease;
}
.dropdown.active .dropdown-menu{
    opacity: 1;
    visibility: visible;
}

.loading-screen {
    position: relative;
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
    background: rgb(0, 174, 195);
    background: linear-gradient(120deg, rgba(0, 174, 195, 1) 0%, rgba(24, 160, 219, 1) 16%, rgba(166, 142, 194, 1) 72%, rgba(90, 38, 107, 1) 100%);
    width: 0%;
    height: 100%;
}

.load-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    z-index: 10;
    pointer-events: none;
}
.page-step{
    display: flex;
    justify-content: space-between;
    padding: 1vw;
}
.page-step a{
    display: flex;
    position: relative;
    overflow: hidden;
    align-items: center;
    grid-gap: 1vw;
    transition: all .6s ease-in-out;
}
.page-step a span{
    font-size: 18px;
    color: #262262;
    transition: all .6s ease-in-out;
    font-weight: 500;
}
.page-step a .icon
{
    background: transparent;
    width: 3vw;
    height: 3vw;
    position: relative;
    margin: 0;
    left: 0;
    border-radius: 50px;
    transition: all .5s ease;
    border: 1px solid rgba(38, 34, 98, .4);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.page-step a:hover span {
    color: #18A0DB;
}
.page-step a .icon svg
{
    fill: #262262;
}

.page-step a .icon::after
{
    content: "";
    background-color: #18A0DB;
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0;
    border-radius: 100%;
    transform: translate(0, 50%);
    /*transition: opacity 1s cubic-bezier(0.215, 0.61, 0.355, 1), border-radius 0s 1s, transform 0s 1s*/
}
.page-step a:hover .icon::after
{
    opacity: 1;
    border-radius: 50%;
    transform: translate(0);
    transition: border-radius .5s cubic-bezier(0.215, 0.61, 0.355, 1), transform .5s cubic-bezier(0.215, 0.61, 0.355, 1)
}
.page-step a:hover .icon
{
    border-color: #18A0DB;
}
.page-step a .icon.first svg
{
    transform: rotateY(180deg);
}
.page-step a:hover .icon svg
{
    z-index: 1;
    fill: #fff;
}
.page-step a .icon svg{}