/*** The new CSS reset - version 1.7.2 (last updated 23.6.2022) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug */ *:where(:not(html, iframe, canvas, img, svg, video):not(svg *, symbol *)) { all: unset; display: revert; } @font-face { font-family: 'Sofia Pro Bold'; src: url('assets/fonts/sofia_pro_bold-webfont.woff2') format('woff2'), url('assets/fonts/sofia_pro_bold-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Sofia Pro'; src: url('assets/fonts/sofia_pro_regular-webfont.woff2') format('woff2'), url('assets/fonts/sofia_pro_regular-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Sofia Pro Light'; src: url('assets/fonts/sofiapro-light-webfont.woff2') format('woff2'), url('assets/fonts/sofiapro-light-webfont.woff') format('woff'); font-weight: normal; font-style: normal; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } body{ width: 100%; height: 100%; font-family: "Sofia Pro"; overflow: scroll; background-image: url("assets/img/Group 1.png"); background-size: cover; } body::-webkit-scrollbar{ display: none; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu { list-style: none; } /* For images to not be able to exceed their container */ /*img {*/ /* max-width: 100%;*/ /*}*/ /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; appearance: revert; } /* reset default text opacity of input placeholder */ ::placeholder { color: unset; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable="false"])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable="true"]) { -webkit-user-drag: element; } .clear{ clear: both; } #arrow-down{ position: absolute; right: 130px; bottom: -320px; } #main_container{ /*background-image: url("assets/img/Group 1.png");*/ width: 1920px; height: 1080px; padding: 50px 125px; } #title{ float: right; text-align: left; color: #151C38; letter-spacing: 0px; padding-right:125px; } #title .name{ font-family:"Sofia Pro Bold"; font-size: 125px; font-weight: bold; margin-top: -40px; } #title .pos{ font-family:"Sofia Pro"; font-size: 40px; margin: -20px 0 0 10px; } #left_container{ width: 335px; float: left; } #left_container .thumb{ } #left_container .navs{ background: rgba(12, 22, 43, 0.6); border-radius: 10px; margin-top: 30px; } #left_container .navs p{ font-family:"Sofia Pro Bold"; color: #FFFFFF; text-align: center; font-size: 30px; padding: 20px; } #left_container .navs .links{ padding: 0 45px 30px 45px; } #left_container .navs .links li{ padding: 21px 43px; background: #00FF99; text-align: center; margin-bottom: 10px; opacity: 1; } .TUIr4b{ font-family:"Sofia Pro Bold"; } #left_container .navs .links li a{ font-family:"Sofia Pro Bold"; font-size: 14px; text-transform: uppercase; opacity: 1; } #content{ background: rgba(12, 22, 43, 0.6); width: 1272px; height: 1045px; border-radius: 10px; overflow: scroll; float: right; margin-top: 45px; padding: 55px; } #content::-webkit-scrollbar{ display: none; } #content p{ color: #FFFFFF; font-size: 24px; } #content .biography p{ padding-bottom:20px ; } #content p.title{ font-family: "Sofia Pro Bold"; color: #FFFFFF; font-size: 50px; margin-bottom: 40px; } #content .content-wrap{ width: 90%; } #content .section{ padding-bottom: 120px; } #content .board-com ul li{ float: left; color: #FFFFFF; font-family: "Sofia Pro Bold"; font-size: 24px; background: #151C38; margin-right: 20px; margin-bottom: 18px; height: 185px; width: 23%; text-align: center; vertical-align: middle; display: flex; justify-content: center; align-items: center; } #content .comm-service ul li{ float: left; width: 50%; padding-right: 45px; } #content .comm-service ul li img{ width: 100%; padding-bottom: 30px; } #content .comm-service ul li p{ border: 1px #FFFFFF solid; text-align: center; padding:20px 30px; font-family: "Sofia Pro Light"; font-size: 18px; height: 180px; } #content .comm-service ul li p b{ font-family: "Sofia Pro Bold"; font-size: 22px; } #content .pro-org li{ float: left; width: 50%; } #content .pro-org li .conts{ font-size: 22px; font-family: "Sofia Pro Bold"; color: #FFFFFF; border: 1px #FFFFFF solid; text-align: center; height: 131px; vertical-align: middle; display: flex; justify-content: center; align-items: center; margin: 0 45px 45px 0; } #content .contact{ font-family: "Sofia Pro Bold"; color: #FFFFFF; font-size: 22px; } #content .contact ul li{ float: left; width: 30%; height: 180px; border: 1px #FFFFFF solid; margin-right: 30px; } #content .contact ul li .contact-wrap .con-info-left{ float: left; margin: 10px 10px 0 10px; padding-bottom: 60px; } #content .contact ul li .contact-wrap{ padding: 30px; } #btn-pay{ position: absolute; top: 50%; left: 48%; font-family: "Sofia Pro Bold"; color: #FFFFFF; font-size: 30px; padding: 21px 43px; background: #00FF99; border-radius: 10px; cursor: pointer; } @media only screen and (max-width: 1920px){ #main_container{ width:100%; padding: 70px; } #left_container{ width:20%; padding-right: 30px; } #left_container img{ width:100%; } #content{ width: 79%; } } @media only screen and (max-width: 900px){ #arrow-down{ position: absolute; right: 60px; bottom: -280px; } #main_container{ width:100%; height: 100%; padding: 20px; background-image: url("assets/img/Group 55@2x.png"); background-size: cover; background-position: center; background-repeat: no-repeat; } #content p.title{ font-size: 35px; } #content p{ font-size: 20px; } #content .board-com ul li{ width: 100%; height: auto; padding: 20px 0; } #title{ width: 100%; padding: 0; text-align: center; } #title .name{ font-size: 50px; margin-top: 30px; } #title .pos{ font-size: 18px; margin: 0; } #left_container{ width:100%;display: flex;flex-wrap: wrap;padding: 0;} #left_container img{ max-width:100%; } #content{ width: 100%; } #left_container .navs, #left_container .thumb{width: 48%;margin-left: 1%;margin-right: 1%;} #left_container .navs{margin-top: 7px;} #left_container .navs p{font-size: 16px;padding: 11px 0;} #left_container .navs .links{ padding:0 10px; } #left_container .navs .links li{ padding:10px; } #left_container .navs .links li a{ font-size:12px; } #content .comm-service ul li{ width: 100%; margin-bottom: 40px; padding: 0; } #content .contact ul li{ width: 100%; height: auto; margin-bottom: 30px; text-align: center; } #content .contact ul li .contact-wrap .con-info-left{ margin: 0; width: 100%; } } @media only screen and (max-width: 820px){ #arrow-down{ bottom: -220px; } }