/*CSS STYLES FOR: UON GLOBAL WEBSITE - ABOUT*/ @import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700;1,900&display=swap'); /*CSS RESETS*/ * { font-family: 'Source Sans Pro', sans-serif; margin: 0; padding: 0; box-sizing: border-box; text-decoration: none; outline: none; border: none; list-style: none; scroll-behavior: smooth; text-rendering: optimizeLegibility; } *::before, *::after { box-sizing: border-box; } /*VARIABLES*/ :root { --background-color: #FFFFFF; --color-text-1: #3A4A5B; /*Grey Normal*/ --color-text-2: #607B8B; /*Grey Light*/ --color-text-3: #F26722; /*Orange Normal*/ --color-text-4: #F58C58; /*Orange Light*/ --color-element-1: #F26722; /*Orange*/ --color-element-2: #798F9D; /*Grey Border*/ --color-element-3: rgb(226, 75, 0); /*Orange on Hover*/ --color-element-4: #EDEFF0; /*Grey Shadow*/ --color-element-5: #FEF2EA; /*Orange Shadow*/ --transition: all 0.3s ease-in-out; /*-- text-main-normal color-text-1 : #3A4A5B;*/ /*Grey Normal*/ /*-- text-main-light color-text-2 : rgb(96, 123, 139); *//*Light Gray*/ /*-- text-nav: color-text-3 #F58C58 ;*/ /*Orange*/ /*-- border-color-1 color-element-2 : rgba(96,123,139,.6)*/ ; /*Gray*/ /*-- elements-colour-1 color-text-3 : rgb(242, 103, 34);*/ /*Orange*/ /*-- elements-colour-1-hover color-element-3 : rgb(226, 75, 0);*/ /*Orange*/ /*-- text-highlight-1 color-text-3 : #F58C58;*/ /*Orange Text*/ } html { overflow-x: hidden; scroll-behavior: smooth; scroll-padding-top: 2rem; } /****************************************************************************************START SECTION 1A - HEADER - NAV BAR - DESKTOP*/ /*[1.1] HEADER NAV BAR DESKTOP CONTAINER*/ .header { width: 92vw; min-height: 4rem; margin: 0 auto 0; overflow: hidden; } /*[1.1A] HEADER NAV BAR DESKTOP*/ .header .navbar-desktop { width: 92vw; display: flex; min-height: 4rem; align-items: center; flex-wrap: wrap; align-content: center; justify-content: space-evenly; position: fixed; z-index: 100; background-color: rgba(256,256,256, .9); border-bottom: 1.6px solid var(--color-element-2); } /*[1.2A] HIDE HEADER NAV BAR MOBILE*/ .header .navbar-mobile { display: none; } /*[1.3A] HEADER NAV BAR DESKTOP LOGO*/ .header .navbar-desktop .nav-logo { background-image: url('../elements/Top Nav Bar/UON Logo.svg'); background-size: contain; background-repeat: no-repeat; background-position: center; min-width: 7rem; max-width: 7rem; height: 2rem; cursor: pointer; } /*[1.4A] ANIMATE HEADER NAV BAR DESKTOP*/ .header .navbar-desktop .nav-logo:hover { background-image: url('../elements/Top Nav Bar/UON Logo.svg'); } /****************************************************************************************START TOP NAV MENU - DESKTOP*/ /*[1.5A] HEADER NAV BAR MENU DESKTOP*/ .header .navbar-desktop .nav-menu { display: flex; align-content: space-around; flex-wrap: wrap; } /*[1.6A] HEADER NAV BAR MENU ITEMS DESKTOP*/ .header .navbar-desktop .nav-menu .nav-item { margin-left: 1rem; margin-right: 1rem; } /*[1.7A] HEADER NAV BAR MENU LINKS DESKTOP*/ .header .navbar-desktop .nav-menu .nav-item .nav-link { color: var(--color-text-1); font-size: .8rem; font-weight: 600; display: flex; align-items: center; justify-content: space-between; position: relative; /*NEEDED FOR NAV LINK UNDERLINE HOVER EFFECT*/ } /*[1.8A] HEADER NAV BAR MENU LINKS ACTIVE DESKTOP*/ .header .navbar-desktop .nav-menu .nav-item .nav-link.active { color: var(--color-text-3); } /*[1.9A] ANIMAGE HEADER NAV BAR MENU ITEMS DESKTOP*/ .header .navbar-desktop .nav-menu .nav-item .nav-link:hover { color: var(--color-text-3); } /*[1.10A] STYLE ANIMATION HEADER NAV BAR MENU LINKS DESKTOP*/ .header .navbar-desktop .nav-menu .nav-item .nav-link:after { content: ""; background-color: var(--color-text-3); width: 0; height: .125rem; border-radius: 50px; position: absolute; left: 0; bottom: -.2rem; transition: width 200ms ease-in; } /*[1.11A] ANIMATE HEADER NAV BAR MENU LINKS DESKTOP*/ .header .navbar-desktop .nav-menu .nav-item .nav-link:hover:after { width: 100%; } /*[1.12A] HEADER NAV BAR MENU LINK ARROW DESKTOP*/ .header .navbar-desktop .nav-menu .nav-item .nav-link .navlink-arrow { margin-left: 1.125rem; font-size: .5rem; font-weight: 900; transform: rotate(0deg); transition: transform .3s; } /*[1.13A] ANIMATE HEADER NAV BAR MENU LINK ARROW DESKTOP*/ .header .navbar-desktop .nav-menu .nav-item .nav-link:hover .navlink-arrow { transform: rotate(90deg); } /****************************************************************************************END TOP NAV MENU - DESKTOP*/ /****************************************************************************************START TOP NAV BAR DEMO BUTTON - DESKTOP*/ /*[1.14A] HEADER NAV BAR DEMO BUTTON DESKTOP*/ .header .navbar-desktop #btn-demo { display: inline-block; width: 8rem; height: 2.08rem; color: white; background-color: var(--color-element-1); border-radius: 9px; font-weight: 400; font-size: .8rem; cursor: pointer; padding-left: 1rem; transition: background-color .3s, padding-left .3s; } /*[1.15A] HEADER NAV BAR DEMO BUTTON ARROW DESKTOP*/ .header .navbar-desktop #btn-demo > i { visibility: hidden; font-weight: 600; margin-left: .5rem; transform: translateX(-.5rem); transition: transform .3s, margin-left .3s; } /*[1.16A] ANIMATE HEADER NAV BAR DEMO BUTTON ARROW DESKTOP*/ .header .navbar-desktop #btn-demo:hover > i { transform: translateX(.3rem); visibility: visible; margin-left: .6rem; } /*[1.17A] ANIMATE HEADER NAV BAR DEMO BUTTON DESKTOP*/ .header .navbar-desktop #btn-demo:hover { background-color: var(--color-element-3); padding-left: 0; padding-right: 0; } /****************************************************************************************END TOP NAV BAR DEMO BUTTON - DESKTOP*/ /****************************************************************************************START TOP NAV BAR DROP DOWN MENU - DESKTOP - SERVICES*/ /*[1.18A] HEADER NAV BAR DROP DOWN SERVICES DESKTOP*/ .header .navbar-desktop .nav-menu .nav-item .nav-desktop-dropdown-services { position: absolute; left: 0rem; width: 92vw; min-height: 25rem; visibility: hidden; opacity: 0; border-bottom: 1.5px solid var(--color-element-2); padding-bottom: 2.5rem; background: var(--color-element-1); padding-right: 4rem; padding-left: 4rem; top: 0rem; transition: visibility .2s, opacity 0s,background 0s, top .4s; } /*[1.19A] HIDE HEADER NAV BAR DROP DOWN SERVICES DESKTOP*/ .header .navbar-desktop .nav-menu .nav-item #check-nav-desktop-services { display: none; } /*[1.20A] SHOW NAV BAR DROP DOWN SERVICES DESKTOP*/ .header .navbar-desktop .nav-menu .nav-item #check-nav-desktop-services:checked ~ .nav-desktop-dropdown-services { visibility: visible; opacity: 1; background: #FFF; top: 4.5rem; } /*[1.21A] HEADER NAV BAR DROP DOWN SERVICES CARDS CONTAINER DESKTOP*/ .header .navbar-desktop .nav-menu .nav-item .nav-desktop-dropdown-services .container-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(2rem, 1fr)); gap: 4rem; padding-top: 4rem; justify-items: space-between; align-items: center; width: 100%; } /****************************************************************************************START DROP DOWN MENU CARD - DESKTOP - SERVICES*/ /*[1.22A] HEADER NAV BAR DROP DOWN SERVICES CARDS DESKTOP*/ .header .navbar-desktop .nav-menu .nav-item .nav-desktop-dropdown-services .nav-card { box-shadow: 0 10px 20px 0 var(--color-element-4); border-radius: 15px; width: 14rem; min-height: 18rem; cursor: pointer; background: white; transition: transform .3s, box-shadow .3s; } /*[1.23A] ANIMATE HEADER NAV BAR DROP DOWN SERVICES CARDS DESKTOP*/ .header .navbar-desktop .nav-menu .nav-item .nav-desktop-dropdown-services .nav-card:hover { box-shadow: rgba(0, 0, 0, 0.2) 0px 12px 28px 0px, rgba(0, 0, 0, 0.1) 0px 2px 4px 0px, rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset; transform: translateY(-.5rem); } /*[1.24A] HEADER NAV BAR DROP DOWN SERVICES HEADING DESKTOP*/ .header .navbar-desktop .nav-menu .nav-item .nav-desktop-dropdown-services h3 { font-weight: 700; font-size: 2rem; color: var(--color-text-1); margin-top: 2rem; } /*[1.25A] HEADER NAV BAR DROP DOWN SERVICES ARROW DESKTOP*/ .header .navbar-desktop .nav-menu .nav-item .nav-desktop-dropdown-services .nav-card div { display: flex; justify-content: space-between; padding-bottom: 2rem; max-height: 6.250rem; margin-bottom: 1rem; } /*[1.26A] HEADER NAV BAR DROP DOWN SERVICES IMAGE DESKTOP*/ .header .navbar-desktop .nav-menu .nav-item .nav-desktop-dropdown-services .nav-card div > img { padding-top: 1.5rem; padding-left: 1.5rem; width: 40%; height:40%; } /*[1.27A] STYLE HEADER NAV BAR DROP DOWN SERVICES ARROW DESKTOP*/ .header .navbar-desktop .nav-menu .nav-item .nav-desktop-dropdown-services .nav-card div > i { padding-top: 1rem; padding-right: 1.250rem; font-size: 1.250rem; color: var(--color-text-2); visibility: hidden; transition: all .3s; } /*[1.28A] HEADER NAV BAR DROP DOWN SERVICES HEADING DESKTOP*/ .header .navbar-desktop .nav-menu .nav-item .nav-desktop-dropdown-services .nav-card > h4 { font-size: 1.250rem; font-weight: 600; color: var(--color-text-2); text-align: center; padding-bottom: .9rem; } /*[1.29A] HEADER NAV BAR DROP DOWN SERVICES TEXT DESKTOP*/ .header .navbar-desktop .nav-menu .nav-item .nav-desktop-dropdown-services .nav-card > p { font-size: .9rem; font-weight: 400; color: var(--color-text-2); text-align: center; line-height: 1.8rem; padding-left: .6rem; padding-right: .6rem; } /*[1.30A] ANIMATE HEADER NAV BAR DROP DOWN SERVICES ARROW DESKTOP*/ .header .navbar-desktop .nav-menu .nav-item .nav-desktop-dropdown-services .nav-card:hover div > i { visibility: visible; transform: translateX(.5rem); } /****************************************************************************************END DROP DOWN MENU CARD - DESKTOP - SERVICES*/ /****************************************************************************************END TOP NAV BAR DROP DOWN MENU - DESKTOP - SERVICES*/ /****************************************************************************************START TOP NAV BAR DROP DOWN MENU - DESKTOP - SOLUTIONS*/ /*[1.31A] HEADER NAV BAR DROP DOWN SOLUTIONS CONTAINER DESKTOP*/ .header .navbar-desktop .nav-menu .nav-item .nav-desktop-dropdown-solutions { position: absolute; left: 0rem; width: 92vw; opacity: 0; visibility: hidden; min-height: 18.128rem; border-bottom: 1.5px solid var(--color-element-2); padding-bottom: 2rem; padding-top: 2rem; background: var(--color-element-1); top: 0rem; transition: visibility .2s, opacity 0s, background 0s, top .4s; } /*[1.32A] HEADER NAV BAR DROP DOWN SOLUTIONS DESKTOP*/ .header .navbar-desktop .nav-menu .nav-item #check-nav-desktop-solutions { display: none; } /*[1.33A] SHOW HEADER NAV BAR DROP DOWN SOLUTIONS DESKTOP*/ .header .navbar-desktop .nav-menu .nav-item #check-nav-desktop-solutions:checked ~ .nav-desktop-dropdown-solutions { visibility: visible; opacity: 1; background: #FFF; top: 4.5rem; } /*[1.34A] HEADER NAV BAR DROP DOWN SOLUTIONS TABS AND PANELS DESKTOP*/ .header .navbar-desktop .nav-menu .nav-item .nav-desktop-dropdown-solutions .tabs-panels-container-desktop { width: 92vw; position: relative; margin: 0 auto; display: flex; flex-direction: row; justify-content: space-evenly; align-items: center; border-bottom: 1.5px solid var(--color-element-2); } /*[1.35A] HIDE HEADER NAV BAR DROP DOWN SOLUTIONS TABS AND PANELS RADIO DESKTOP*/ .header .navbar-desktop .nav-menu .nav-item .nav-desktop-dropdown-solutions .tabs-panels-container-desktop .radio-nav { display: none; } /*[1.36A] HEADER NAV BAR DROP DOWN SOLUTIONS TABS DESKTOP*/ .header .navbar-desktop .nav-menu .nav-item .nav-desktop-dropdown-solutions .tabs-panels-container-desktop .tabs-nav { display: flex; flex-direction: column; justify-content: space-evenly; margin-bottom: 2rem; } /*[1.37A] HEADER NAV BAR DROP DOWN SOLUTIONS TABS LABELS DESKTOP*/ .header .navbar-desktop .nav-menu .nav-item .nav-desktop-dropdown-solutions .tabs-panels-container-desktop .tabs-nav .lbl-nav-tabs { cursor: pointer; } /*[1.38A] ANIMATE HEADER NAV BAR DROP DOWN SOLUTIONS TABS LABELS DESKTOP*/ .header .navbar-desktop .nav-menu .nav-item .nav-desktop-dropdown-solutions .tabs-panels-container-desktop .tabs-nav .lbl-nav-tabs:hover { border-radius: 5px 5px 0 0; box-shadow: 0 0.5rem 0.8rem #00000080; border-left: 6px solid white; } /*[1.39A] HEADER NAV BAR DROP DOWN SOLUTIONS TABS TAB DESKTOP*/ .header .navbar-desktop .nav-menu .nav-item .nav-desktop-dropdown-solutions .tabs-panels-container-desktop .tabs-nav .tab { display: grid; grid-template-areas: 'lbl-tabs-image lbl-tabs-h1 lbl-tabs-icon' 'lbl-tabs-image lbl-tabs-h2 lbl-tabs-icon'; padding: .8rem 1.2rem; grid-column-gap: 1rem; justify-content: end; align-items: center; } /*[1.40A] HEADER NAV BAR DROP DOWN SOLUTIONS TABS TAB IMAGE DESKTOP*/ .header .navbar-desktop .nav-menu .nav-item .nav-desktop-dropdown-solutions .tabs-panels-container-desktop .tabs-nav .tab img { filter: grayscale(100%); width: 2rem; grid-area: lbl-tabs-image; } /*[1.41A] ANIMATE HEADER NAV BAR DROP DOWN SOLUTIONS TABS TAB IMAGE DESKTOP*/ .header .navbar-desktop .nav-menu .nav-item .nav-desktop-dropdown-solutions .tabs-panels-container-desktop .tabs-nav .tab:hover img { filter: grayscale(0%); } /*[1.42A] HEADER NAV BAR DROP DOWN SOLUTIONS TABS TAB HEADING 1 DESKTOP*/ .header .navbar-desktop .nav-menu .nav-item .nav-desktop-dropdown-solutions .tabs-panels-container-desktop .tabs-nav .tab h1 { font-size: 1.2rem; font-weight: 600; color: var(--color-text-1); grid-area: lbl-tabs-h1; } /*[1.43A] HEADER NAV BAR DROP DOWN SOLUTIONS TABS TAB HEADING 2 DESKTOP*/ .header .navbar-desktop .nav-menu .nav-item .nav-desktop-dropdown-solutions .tabs-panels-container-desktop .tabs-nav .tab h2 { font-size: .9rem; font-weight: normal; color: var(--color-text-1); grid-area: lbl-tabs-h2; } /*[1.44A] HEADER NAV BAR DROP DOWN SOLUTIONS TABS TAB ICON DESKTOP*/ .header .navbar-desktop .nav-menu .nav-item .nav-desktop-dropdown-solutions .tabs-panels-container-desktop .tabs-nav .tab i { grid-area: lbl-tabs-icon; font-size: .8rem; font-weight: 900; transform: translateX(-1.5rem); visibility: hidden; transition: transform .5s; } /*[1.45A] ANIMATE HEADER NAV BAR DROP DOWN SOLUTIONS TABS TAB ICON DESKTOP*/ .header .navbar-desktop .nav-menu .nav-item .nav-desktop-dropdown-solutions .tabs-panels-container-desktop .tabs-nav .tab:hover > i { visibility: visible; transform: translateX(0rem); } /*[1.46A] HEADER NAV BAR DROP DOWN SOLUTIONS PANELS DESKTOP*/ .header .navbar-desktop .nav-menu .nav-item .nav-desktop-dropdown-solutions .tabs-panels-container-desktop .panels-nav { overflow: hidden; animation: fadein .8s; display: inline-flex; justify-content: flex-start; align-items: center; flex-direction: row; width: 50%; } /*[1.47A] ANIMATE HEADER NAV BAR DROP DOWN SOLUTIONS PANELS DESKTOP*/ @keyframes fadein { from { opacity: 0; } to { opacity: 1; } } /*[1.48A] HEADER NAV BAR DROP DOWN SOLUTIONS PANELS PANEL DESKTOP*/ .header .navbar-desktop .nav-menu .nav-item .nav-desktop-dropdown-solutions .tabs-panels-container-desktop .panels-nav .panel-nav { display: none; } /*[1.49A] HEADER NAV BAR DROP DOWN SOLUTIONS PANELS PANEL CONTENTS DESKTOP*/ .header .navbar-desktop .nav-menu .nav-item .nav-desktop-dropdown-solutions .tabs-panels-container-desktop .panels-nav .panel-nav .contents { width: 90%; } /*[1.50A] HEADER NAV BAR DROP DOWN SOLUTIONS PANELS PANEL CONTENTS HEADING DESKTOP*/ .header .navbar-desktop .nav-menu .nav-item .nav-desktop-dropdown-solutions .tabs-panels-container-desktop .panels-nav .panel-nav .contents h1 { color: var(--color-text-1); font-size: 1rem; font-weight: 600; margin-bottom: 1rem; } /*[1.51A] HEADER NAV BAR DROP DOWN SOLUTIONS PANELS PANEL CONTENTS HEADING HIGHLIGHTS DESKTOP*/ .header .navbar-desktop .nav-menu .nav-item .nav-desktop-dropdown-solutions .tabs-panels-container-desktop .panels-nav .panel-nav .contents h1 .text-highlight-1 { color: var(--color-text-3); } /*[1.52A] HEADER NAV BAR DROP DOWN SOLUTIONS PANELS PANEL CONTENTS HEADING DETAIL DESKTOP*/ .header .navbar-desktop .nav-menu .nav-item .nav-desktop-dropdown-solutions .tabs-panels-container-desktop .panels-nav .panel-nav .contents p { color: var(--color-text-1); font-size: clamp(0.7rem, 0.6143rem + 0.1786vw, 0.9rem); font-weight: normal; line-height: 1.5em; margin-bottom: 0.5rem; } /*[1.53A] HEADER NAV BAR DROP DOWN SOLUTIONS PANELS PANEL CONTENTS CARDS CONTAINER DESKTOP*/ .header .navbar-desktop .nav-menu .nav-item .nav-desktop-dropdown-solutions .tabs-panels-container-desktop .panels-nav .panel-nav .contents .container-cards { display: flex; justify-content: space-between; padding-top: 1rem; padding-left: 0.5rem; align-items: center; } /*[1.54A] HEADER NAV BAR DROP DOWN SOLUTIONS PANELS PANEL CONTENTS BLANK CARD DESKTOP*/ .header .navbar-desktop .nav-menu .nav-item .nav-desktop-dropdown-solutions .tabs-panels-container-desktop .panels-nav .panel-nav .contents .container-cards #blank-card { visibility: hidden; } /*[1.55A] HEADER NAV BAR DROP DOWN SOLUTIONS PANELS PANEL CONTENTS CARDS CARD IMAGE CONTAINER DESKTOP*/ .header .navbar-desktop .nav-menu .nav-item .nav-desktop-dropdown-solutions .tabs-panels-container-desktop .panels-nav .panel-nav .contents .container-cards .card div { position: relative; max-width: 45%; min-height: 45%; margin-top: .9rem; margin-bottom: .9rem; } /*[1.56A] HEADER NAV BAR DROP DOWN SOLUTIONS PANELS PANEL CONTENTS CARDS CARD IMAGE DESKTOP*/ .header .navbar-desktop .nav-menu .nav-item .nav-desktop-dropdown-solutions .tabs-panels-container-desktop .panels-nav .panel-nav .contents .container-cards .card div > img { width: 100%; } /*[1.57A] HEADER NAV BAR DROP DOWN SOLUTIONS PANELS PANEL CONTENTS CARDS CARD DESKTOP*/ .header .navbar-desktop .nav-menu .nav-item .nav-desktop-dropdown-solutions .tabs-panels-container-desktop .panels-nav .panel-nav .contents .container-cards .card { box-shadow: 0 5px 20px 0 var(--color-element-4); border-radius: 15px; min-width: 7.5rem; max-width: 7.5rem; min-height: 9.5rem; max-height: 10rem; margin-bottom: .9rem; display: flex; justify-content: center; align-items: center; flex-direction: column; transition: transform .3s; } /*[1.58A] ANIMATE HEADER NAV BAR DROP DOWN SOLUTIONS PANELS PANEL CONTENTS CARDS CARD DESKTOP*/ .header .navbar-desktop .nav-menu .nav-item .nav-desktop-dropdown-solutions .tabs-panels-container-desktop .panels-nav .panel-nav .contents .container-cards .card:hover { box-shadow: rgba(0, 0, 0, 0.2) 0px 6px 12px 0px, rgba(0, 0, 0, 0.1) 0px 2px 4px 0px, rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset; transform: translateY(-.5rem); } /*[1.59A] HEADER NAV BAR DROP DOWN SOLUTIONS PANELS PANEL CONTENTS CARDS CARD CONTAINER DESKTOP*/ .header .navbar-desktop .nav-menu .nav-item .nav-desktop-dropdown-solutions .tabs-panels-container-desktop .panels-nav .panel-nav .contents .container-cards .card div { display: flex; justify-content: center; align-items: flex-start; } /*[1.60A] HEADER NAV BAR DROP DOWN SOLUTIONS PANELS PANEL CONTENTS CARDS CARD CONTAINER IMAGE DESKTOP*/ .header .navbar-desktop .nav-menu .nav-item .nav-desktop-dropdown-solutions .tabs-panels-container-desktop .panels-nav .panel-nav .contents .container-cards .card div > img { width: 100%; margin-left: 0.5rem; } /*[1.61A] HEADER NAV BAR DROP DOWN SOLUTIONS PANELS PANEL CONTENTS CARDS CARD CONTAINER ICON DESKTOP*/ .header .navbar-desktop .nav-menu .nav-item .nav-desktop-dropdown-solutions .tabs-panels-container-desktop .panels-nav .panel-nav .contents .container-cards .card div > i { font-size: 0.8rem; color: var(--color-text-2); visibility: hidden; transition: transform .3s; } /*[1.62A] ANIMATE HEADER NAV BAR DROP DOWN SOLUTIONS PANELS PANEL CONTENTS CARDS CARD CONTAINER ICON DESKTOP*/ .header .navbar-desktop .nav-menu .nav-item .nav-desktop-dropdown-solutions .tabs-panels-container-desktop .panels-nav .panel-nav .contents .container-cards .card:hover div > i { visibility: visible; transform: translateX(.5rem); } /*[1.63A] HEADER NAV BAR DROP DOWN SOLUTIONS PANELS PANEL CONTENTS CARDS CARD CONTAINER HEADING DESKTOP*/ .header .navbar-desktop .nav-menu .nav-item .nav-desktop-dropdown-solutions .tabs-panels-container-desktop .panels-nav .panel-nav .contents .container-cards .card h4 { color: var(--color-text-1); font-weight: 600; font-size: .9rem; margin-top: .5rem; margin-bottom: .5rem; } /*[1.64A] HEADER NAV BAR DROP DOWN SOLUTIONS PANELS PANEL CONTENTS CARDS CARD CONTAINER SUMMARY DESKTOP*/ .header .navbar-desktop .nav-menu .nav-item .nav-desktop-dropdown-solutions .tabs-panels-container-desktop .panels-nav .panel-nav .contents .container-cards .card p { color: var(--color-text-2); font-weight: 400; font-size: .6rem; padding-left: .6rem; padding-right: .6rem; margin-bottom: 1rem; flex-wrap: wrap; text-align: center; } /*[1.65A] HEADER NAV BAR DROP DOWN SOLUTIONS PANELS PANEL CONTENTS CARDS CARD CONTAINER TEXT DESKTOP*/ .header .navbar-desktop .nav-menu .nav-item .nav-desktop-dropdown-solutions .tabs-panels-container-desktop .panels-nav .panel-nav .contents .container-cards .text { display: grid; grid-template-areas: 'panel-content-text-counter panel-content-text'; color: var(--color-text-1); padding-bottom: 1rem; min-width: 15rem; max-width: 15rem; justify-content: start; align-items: flex-start; } /*[1.66A] HEADER NAV BAR DROP DOWN SOLUTIONS PANELS PANEL CONTENTS CARDS CARD CONTAINER TEXT HEADING DESKTOP*/ .header .navbar-desktop .nav-menu .nav-item .nav-desktop-dropdown-solutions .tabs-panels-container-desktop .panels-nav .panel-nav .contents .container-cards .text h1 { grid-area: panel-content-text-counter; font-size: 1.2rem; color: var(--color-text-1); font-weight: 500; margin-right: 1rem; } /*[1.67A] HEADER NAV BAR DROP DOWN SOLUTIONS PANELS PANEL CONTENTS CARDS CARD CONTAINER TEXT SUB HEADING DESKTOP*/ .header .navbar-desktop .nav-menu .nav-item .nav-desktop-dropdown-solutions .tabs-panels-container-desktop .panels-nav .panel-nav .contents .container-cards .text h2 { grid-area: panel-content-text; font-size: .9rem; color: var(--color-text-1); font-weight: normal; line-height: 1.5rem; } /*[1.68A] HEADER NAV BAR DROP DOWN SOLUTIONS PANELS PANEL CONTENTS CARDS CARD CONTAINER TEXT HEADING IN ROW FORM DESKTOP*/ .header .navbar-desktop .nav-menu .nav-item .nav-desktop-dropdown-solutions .tabs-panels-container-desktop .panels-nav .panel-nav .contents .container-cards .row { display: flex; flex-direction: row; } /*[1.69A] HEADER NAV BAR DROP DOWN SOLUTIONS PANELS PANEL CONTENTS TEXT IN ROW FORM DESKTOP*/ .header .navbar-desktop .nav-menu .nav-item .nav-desktop-dropdown-solutions .tabs-panels-container-desktop .text-row { display: flex; flex-direction: row; justify-content: flex-start; } /*[1.70A] HEADER NAV BAR DROP DOWN SOLUTIONS PRODUCT RANGE DESKTOP*/ .header .navbar-desktop .nav-menu .nav-item .nav-desktop-dropdown-solutions .product-range { max-width: 60vw; display: flex; justify-content: space-between; align-items: center; margin: 0 auto; margin-top: 1rem; margin-bottom: 0rem; padding-top: 0rem; padding-bottom: 0rem; } /*[1.71A] HEADER NAV BAR DROP DOWN SOLUTIONS PRODUCT RANGE IMAGE CONTAINER DESKTOP*/ .header .navbar-desktop .nav-menu .nav-item .nav-desktop-dropdown-solutions .product-range .image-box { width: 50%; text-align: initial; } /*[1.72A] HEADER NAV BAR DROP DOWN SOLUTIONS PRODUCT RANGE IMAGE DESKTOP*/ .header .navbar-desktop .nav-menu .nav-item .nav-desktop-dropdown-solutions .product-range .image-box img { width: 50%; background-size: contain; background-repeat: no-repeat; background-position: center; } /*[1.73A] HEADER NAV BAR DROP DOWN SOLUTIONS PRODUCT RANGE TEXT CONTAINER DESKTOP*/ .header .navbar-desktop .nav-menu .nav-item .nav-desktop-dropdown-solutions .product-range .text-box { width: 50%; } /*[1.74A] HEADER NAV BAR DROP DOWN SOLUTIONS PRODUCT RANGE TEXT HEADING DESKTOP*/ .header .navbar-desktop .nav-menu .nav-item .nav-desktop-dropdown-solutions .product-range .text-box h2 { color: var(--color-text-1); font-size: clamp(0.9rem, 0.8357rem + 0.3214vw, 1.35rem); font-weight: 700; padding-bottom: clamp(1.5rem, 1.4286rem + 0.3571vw, 2rem); } /*[1.75A] HEADER NAV BAR DROP DOWN SOLUTIONS PRODUCT RANGE TEXT DETAIL DESKTOP*/ .header .navbar-desktop .nav-menu .nav-item .nav-desktop-dropdown-solutions .product-range .text-box p { color: var(--color-text-2); font-size: clamp(0.9rem, 0.8571rem + 0.2143vw, 1.2rem); padding-bottom: clamp(1.5rem, 1.4286rem + 0.3571vw, 2rem); font-weight: normal; } /*[1.76A] HEADER NAV BAR DROP DOWN SOLUTIONS TOGGLE BUTTONS FOR TABS DESKTOP*/ #radio-nav-desktop-1:checked ~ .tabs-nav #lbl-nav-tab-1, #radio-nav-desktop-2:checked ~ .tabs-nav #lbl-nav-tab-2, #radio-nav-desktop-3:checked ~ .tabs-nav #lbl-nav-tab-3, #radio-nav-desktop-4:checked ~ .tabs-nav #lbl-nav-tab-4 { border-left: 6px solid var(--color-element-1); box-shadow: 0 5px 20px 0 var(--color-element-4); } /*[1.77A] ANIMATE HEADER NAV BAR DROP DOWN SOLUTIONS TOGGLE BUTTONS FOR TABS DESKTOP*/ #radio-nav-desktop-1:checked ~ .tabs-nav #lbl-nav-tab-1 * i, #radio-nav-desktop-2:checked ~ .tabs-nav #lbl-nav-tab-2 * i, #radio-nav-desktop-3:checked ~ .tabs-nav #lbl-nav-tab-3 * i, #radio-nav-desktop-4:checked ~ .tabs-nav #lbl-nav-tab-4 * i{ visibility: visible; transform: translateX(0rem); } /*[1.78A] HEADER NAV BAR DROP DOWN SOLUTIONS TOGGLE BUTTONS FOR PANELS DESKTOP*/ #radio-nav-desktop-1:checked ~ * #panel-nav-1, #radio-nav-desktop-2:checked ~ * #panel-nav-2, #radio-nav-desktop-3:checked ~ * #panel-nav-3, #radio-nav-desktop-4:checked ~ * #panel-nav-4 { display: block; } /****************************************************************************************END TOP NAV BAR DROP DOWN MENU - DESKTOP - SOLUTIONS*/ /****************************************************************************************END SECTION 1A - HEADER - NAV BAR - DESKTOP*/ /****************************************************************************************END SECTION 1A - HEADER - NAV BAR - DESKTOP*/ /****************************************************************************************END SECTION 1A - HEADER - NAV BAR - DESKTOP*/ /****************************************************************************************END SECTION 1A - HEADER - NAV BAR - DESKTOP*/ /****************************************************************************************START SECTION 1B - HEADER - NAV BAR - MOBILE*/ /****************************************************************************************START SECTION 1B - HEADER - NAV BAR - MOBILE*/ /****************************************************************************************START SECTION 1B - HEADER - NAV BAR - MOBILE*/ /****************************************************************************************START SECTION 1B - HEADER - NAV BAR - MOBILE*/ /*[1.1B] HEADER NAV BAR MOBILE CONTAINER*/ .header .navbar-mobile { position: fixed; top: 0; right: 0; left: 0; padding-left: 1rem; padding-right: 1rem; display: none; align-items: center; justify-content: space-between; z-index: 1000; background-color: rgba(256,256,256, .9); border-bottom: 1.6px solid var(--color-element-2); } /*[1.2B] HIDE HEADER NAV BAR DESKTOP*/ .header .navbar-desktop { display: flex; } /*[1.3B] HEADER NAV BAR MOBILE LOG*/ .header .navbar-mobile .nav-logo { background-image: url('../elements/Top Nav Bar/UON Logo.svg'); background-size: contain; background-repeat: no-repeat; background-position: center; min-width: 5rem; max-width: 5rem; height: 1.8rem; cursor: pointer; } /*[1.4B] ANIMATE HEADER NAV BAR MOBILE LOGO*/ .header .navbar-mobile .nav-logo:hover { background-image: url('../elements/Top Nav Bar/UON Logo (Hover State).svg'); } /****************************************************************************************START HAMBURGER MENU*/ /*[1.5B] HIDE HEADER NAV BAR MOBILE HAMBURGER ICON CHECKBOX*/ .header .navbar-mobile #check-nav-mobile { display: none; } /*[1.6B] HEADER NAV BAR MOBILE HAMBURGER ICON CONTAINER*/ #nav-mobile-icon { width: 30px; height: 45px; position: relative; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; transition: .5s ease-in-out; cursor: pointer; } /*[1.7B] HEADER NAV BAR MOBILE HAMBURGER ICON*/ #nav-mobile-icon span { display: block; position: absolute; height: 2px; width: 100%; background: var(--color-text-1);; border-radius: 9px; opacity: 1; left: 0; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out; } /*[1.8B] HEADER NAV BAR MOBILE HAMBURGER ICON LINE 1*/ #nav-mobile-icon span:nth-child(1) { top: 12px; } /*[1.9B] HEADER NAV BAR MOBILE HAMBURGER ICON LINE 2*/ #nav-mobile-icon span:nth-child(2),#nav-mobile-icon span:nth-child(3) { top: 24px; } /*[1.10B] ANIMATE HEADER NAV BAR MOBILE HAMBURGER ICON LINE 1 POSITION*/ #nav-mobile-icon.open span:nth-child(1) { top: 18px; width: 0%; left: 50%; } /*[1.11B] ANIMATE HEADER NAV BAR MOBILE HAMBURGER ICON LINE 1 POSITION*/ #nav-mobile-icon.open span:nth-child(2) { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); top: 18px; } /*[1.12B] ANIMATE HEADER NAV BAR MOBILE HAMBURGER ICON LINE 2 ANGLE*/ #nav-mobile-icon.open span:nth-child(3) { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); top: 18px; } /*[1.13B] ANIMATE HEADER NAV BAR MOBILE HAMBURGER ICON LINE 2 ANGLE*/ #nav-mobile-icon.open span:nth-child(4) { top: 18px; width: 0%; left: 50%; } /****************************************************************************************END HAMBURGER MENU*/ /****************************************************************************************START TOP NAV MENU - MOBILE*/ /*[1.14B] CREATE AND HIDE HEADER NAV BAR MOBILE CONTAINER*/ .header .navbar-mobile .nav-menu { position: absolute; height: 100vh; top: 100%; left: 0; right: 0; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; gap: 1.2rem; padding-top: 1.2rem; background-color: white; z-index: 1000; border-top: 1.6px solid var(--color-element-2); width: 0vw; transition: width 0.4s; } /*[1.15B] HIDE HEADER NAV BAR MENU ITEMS MOBILE NAV ITEMS*/ .header .navbar-mobile .nav-menu .nav-item { position: relative; display: none; transition: display 0.4s; } /*[1.16B] SHOW HEADER NAV BAR MOBILE*/ .header .navbar-mobile #check-nav-mobile:checked ~ .nav-menu { width: 100vw; } /*[1.17B] SHOW HEADER NAV BAR MOBILE*/ .header .navbar-mobile #check-nav-mobile:checked ~ .nav-menu .nav-item { display: block; } /*[1.18B] HEADER NAV BAR MENU LINKS MOBILE*/ .header .navbar-mobile .nav-menu .nav-item .nav-link { color: var(--color-text-1); font-size: 1.2rem; font-weight: 600; display: flex; flex-direction: row; align-items: center; justify-content: center; position: relative; /*NEEDED FOR NAV LINK UNDERLINE HOVER EFFECT*/ } /*[1.19B] HEADER NAV BAR MENU LINKS ACTIVE MOBILE*/ .header .navbar-mobile .nav-menu .nav-item .nav-link.active { color: var(--color-text-3); } /*[1.20B] ANIMAGE HEADER NAV BAR MENU ITEMS MOBILE*/ .header .navbar-mobile .nav-menu .nav-item .nav-link:hover { color: var(--color-text-3); } /*[1.21B] HEADER NAV BAR MENU LINK ARROW MOBILE*/ .header .navbar-mobile .nav-menu .nav-item .nav-link .navlink-arrow { margin-left: .8rem; font-size: .8rem; font-weight: 900; transform: rotate(0deg); transition: transform .3s; } /*[1.22B] ANIMATE HEADER NAV BAR MENU LINK ARROW MOBILE*/ .header .navbar-mobile .nav-menu .nav-item .nav-link:hover .navlink-arrow { transform: rotate(90deg); } /****************************************************************************************END TOP NAV MENU - MOBILE*/ /****************************************************************************************START TOP NAV BAR DEMO BUTTON - MOBILE*/ /*[1.23B] HEADER NAV BAR DEMO BUTTON MOBILE*/ .header .navbar-mobile #btn-demo { display: inline-block; width: 6rem; height: 1.8rem; color: white; background-color: var(--color-element-1); border-radius: 7px; font-weight: 400; font-size: .7rem; cursor: pointer; transition: background-color .3s, padding-left .3s; } /*[1.24B] ANIMATE HEADER NAV BAR DEMO BUTTON MOBILE*/ .header .navbar-mobile #btn-demo:hover { background-color: var(--color-element-3); padding-left: 0; padding-right: 0; } /****************************************************************************************END TOP NAV BAR DEMO BUTTON - MOBILE*/ /****************************************************************************************START TOP NAV BAR DROP DOWN MENU - MOBILE - SERVICES*/ /*[1.25B] HEADER NAV BAR DROP DOWN SERVICES MOBILE*/ .header .navbar-mobile .nav-menu .nav-item .nav-mobile-dropdown-services { position: relative; width: 100%; height: 0rem; opacity: 0; visibility: hidden; background: var(--color-element-1); top: 0rem; transition: visibility .2s, opacity 0s, background 0s, top .4s; } /*[1.26B] HIDE HEADER NAV BAR DROP DOWN SERVICES MOBILE*/ .header .navbar-mobile .nav-menu .nav-item #check-nav-mobile-services { display: none; } /*[1.27B] SHOW NAV BAR DROP DOWN SERVICES MOBILE*/ .header .navbar-mobile .nav-menu .nav-item #check-nav-mobile-services:checked ~ .nav-mobile-dropdown-services, .header .navbar-mobile .nav-menu .nav-item #check-nav-mobile-services:focus-within ~ .nav-mobile-dropdown-services { visibility: visible; opacity: 1; background: #FFF; height: 21rem; } /*[1.28B] HEADER NAV BAR DROP DOWN SERVICES CARDS CONTAINER MOBILE*/ .header .navbar-mobile .nav-menu .nav-item .nav-mobile-dropdown-services .container-cards { display: flex; flex-direction: row; padding-top: 0rem; width: 100%; margin-bottom: 2rem; } /*[1.29B] HEADER NAV BAR DROP DOWN SERVICES CARDS CONTAINER MOBILE*/ .header .navbar-mobile .nav-menu .nav-item .nav-mobile-dropdown-services .slick-slider .slick-track { padding-bottom: 3rem; } /****************************************************************************************START DROP DOWN MENU CARD - MOBILE - SERVICES*/ /*[1.30B] HEADER NAV BAR DROP DOWN SERVICES CARDS MOBILE*/ .header .navbar-mobile .nav-menu .nav-item .nav-mobile-dropdown-services .nav-card { box-shadow: 0 10px 20px 0 var(--color-element-4); border-radius: 15px; width: 14rem; height: 18rem; cursor: pointer; background: white; transition: transform .3s, box-shadow .3s; margin-top: 1rem; margin-left: 1.125rem; margin-right: 1.125rem; } /*[1.32B] ANIMATE HEADER NAV BAR DROP DOWN SERVICES CARDS MOBILE*/ .header .navbar-mobile .nav-menu .nav-item .nav-mobile-dropdown-services .nav-card:hover { box-shadow: rgba(0, 0, 0, 0.2) 0px 12px 28px 0px, rgba(0, 0, 0, 0.1) 0px 2px 4px 0px, rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset; transform: translateY(-.5rem); } /*[1.33B] HEADER NAV BAR DROP DOWN SERVICES HEADING MOBILE*/ .header .navbar-mobile .nav-menu .nav-item .nav-mobile-dropdown-services h3 { font-weight: 700; font-size: 1.6rem; color: var(--color-text-1); margin-top: 1rem; } /*[1.34B] HEADER NAV BAR DROP DOWN SERVICES ARROW MOBILE*/ .header .navbar-mobile .nav-menu .nav-item .nav-mobile-dropdown-services .nav-card div { display: flex; justify-content: space-between; padding-bottom: 1rem; max-height: 4rem; margin-bottom: 2rem; } /*[1.35B] HEADER NAV BAR DROP DOWN SERVICES IMAGE MOBILE*/ .header .navbar-mobile .nav-menu .nav-item .nav-mobile-dropdown-services .nav-card div > img { padding-top: 1.125rem; padding-left: 1.125rem; width: 40%; height:40%; } /*[1.36B] STYLE HEADER NAV BAR DROP DOWN SERVICES ARROW MOBILE*/ .header .navbar-mobile .nav-menu .nav-item .nav-mobile-dropdown-services .nav-card div > i { padding-top: 1rem; padding-right: 1.250rem; font-size: 1.125rem; color: var(--color-text-2); visibility: hidden; transition: all .3s; } /*[1.37B] HEADER NAV BAR DROP DOWN SERVICES HEADING MOBILE*/ .header .navbar-mobile .nav-menu .nav-item .nav-mobile-dropdown-services .nav-card > h4 { font-size: 1.250rem; font-weight: 600; color: var(--color-text-2); text-align: center; padding-bottom: .8rem; } /*[1.38B] HEADER NAV BAR DROP DOWN SERVICES TEXT MOBILE*/ .header .navbar-mobile .nav-menu .nav-item .nav-mobile-dropdown-services .nav-card > p { font-size: 1rem; font-weight: 400; color: var(--color-text-2); text-align: center; line-height: 1.6rem; padding-left: .6rem; padding-right: .6rem; } /*[1.39B] ANIMATE HEADER NAV BAR DROP DOWN SERVICES ARROW MOBILE*/ .header .navbar-mobile .nav-menu .nav-item .nav-mobile-dropdown-services .nav-card:hover div > i { visibility: visible; transform: translateX(.5rem); } /****************************************************************************************END DROP DOWN MENU CARD - MOBILE - SERVICES*/ /****************************************************************************************END TOP NAV BAR DROP DOWN MENU - MOBILE - SERVICES*/ /****************************************************************************************START TOP NAV BAR DROP DOWN MENU - MOBILE - SOLUTIONS*/ /*[1.40B] HEADER NAV BAR DROP DOWN SOLUTIONS CONTAINER MOBILE*/ .header .navbar-mobile .nav-menu .nav-item .nav-mobile-dropdown-solutions { position: relative; width: 100%; height: 0rem; opacity: 0; visibility: hidden; background: var(--color-element-1); top: 0rem; transition: visibility .2s, opacity 0s, background 0s, top .4s; } /*[1.41B] HEADER NAV BAR DROP DOWN SOLUTIONS MOBILE*/ .header .navbar-mobile .nav-menu .nav-item #check-nav-mobile-solutions { display: none; } /*[1.42B] SHOW HEADER NAV BAR DROP DOWN SOLUTIONS MOBILE*/ .header .navbar-mobile .nav-menu .nav-item #check-nav-mobile-solutions:checked ~ .nav-mobile-dropdown-solutions, .header .navbar-mobile .nav-menu .nav-item #check-nav-mobile-solutions:focus-within ~ .nav-mobile-dropdown-solutions { visibility: visible; opacity: 1; background: #FFF; height: 20.5rem; } /*[1.43B] HEADER NAV BAR DROP DOWN SOLUTIONS TABS AND PANELS MOBILE*/ .header .navbar-mobile .nav-menu .nav-item .nav-mobile-dropdown-solutions .tabs-panels-container-mobile { width: 100vw; position: relative; margin: 0 auto; display: flex; flex-direction: column; justify-content: space-evenly; align-items: center; } /*[1.44B] HIDE HEADER NAV BAR DROP DOWN SOLUTIONS TABS AND PANELS RADIO MOBILE*/ .header .navbar-mobile .nav-menu .nav-item .nav-mobile-dropdown-solutions .tabs-panels-container-mobile .radio-nav { display: none; } /*[1.45B] HEADER NAV BAR DROP DOWN SOLUTIONS TABS MOBILE*/ .header .navbar-mobile .nav-menu .nav-item .nav-mobile-dropdown-solutions .tabs-panels-container-mobile .tabs-nav { display: flex; flex-direction: row; justify-content: space-evenly; margin-top: 1rem; margin-bottom: 0.5rem; align-items: flext-start; } /*[1.46B] HEADER NAV BAR DROP DOWN SOLUTIONS TABS LABELS MOBILE*/ .header .navbar-mobile .nav-menu .nav-item .nav-mobile-dropdown-solutions .tabs-panels-container-mobile .tabs-nav .lbl-nav-tabs { cursor: pointer; padding-bottom: 0.2rem; } /*[1.47B] ANIMATE HEADER NAV BAR DROP DOWN SOLUTIONS TABS LABELS MOBILE*/ .header .navbar-mobile .nav-menu .nav-item .nav-mobile-dropdown-solutions .tabs-panels-container-mobile .tabs-nav .lbl-nav-tabs:hover { border-radius: 5px 5px 0 0; box-shadow: 0 0.5rem 0.8rem #00000080; border-bottom: 4px solid white; } /*[1.48B] HEADER NAV BAR DROP DOWN SOLUTIONS TABS TAB HEADING 1 MOBILE*/ .header .navbar-mobile .nav-menu .nav-item .nav-mobile-dropdown-solutions .tabs-panels-container-mobile .tabs-nav .tab h1 { font-size: 0.8rem; font-weight: 600; color: var(--color-text-1); padding-left: 0.9rem; padding-right: 0.9rem; } /*[1.49B] HEADER NAV BAR DROP DOWN SOLUTIONS PANELS MOBILE*/ .header .navbar-mobile .nav-menu .nav-item .nav-mobile-dropdown-solutions .tabs-panels-container-mobile .panels-nav { overflow: hidden; animation: fadein .8s; display: flex; justify-content: center; align-items: center; flex-direction: row; width: 100%; } /*[1.50B] ANIMATE HEADER NAV BAR DROP DOWN SOLUTIONS PANELS MOBILE*/ @keyframes fadein { from { opacity: 0; } to { opacity: 1; } } /*[1.51B] HEADER NAV BAR DROP DOWN SOLUTIONS PANELS PANEL MOBILE*/ .header .navbar-mobile .nav-menu .nav-item .nav-mobile-dropdown-solutions .tabs-panels-container-mobile .panels-nav .panel-nav { display: none; } /*[1.52B] HEADER NAV BAR DROP DOWN SOLUTIONS PANELS PANEL CONTENTS MOBILE*/ .header .navbar-mobile .nav-menu .nav-item .nav-mobile-dropdown-solutions .tabs-panels-container-mobile .panels-nav .panel-nav .contents { width: 100%; } /*[1.53B] HEADER NAV BAR DROP DOWN SOLUTIONS PANELS PANEL CONTENTS CARDS CONTAINER MOBILE*/ .header .navbar-mobile .nav-menu .nav-item .nav-mobile-dropdown-solutions .tabs-panels-container-mobile .panels-nav .panel-nav .contents .container-cards { display: flex; justify-content: center; padding-top: 0rem; align-items: center; gap: .1rem; column-gap: 3rem; flex-wrap: wrap; } /*[1.54B] HEADER NAV BAR DROP DOWN SOLUTIONS PANELS PANEL CONTENTS BLANK CARD MOBILE*/ .header .navbar-mobile .nav-menu .nav-item .nav-mobile-dropdown-solutions .tabs-panels-container-mobile .panels-nav .panel-nav .contents .container-cards #blank-card { visibility: hidden; } /*[1.55B] HEADER NAV BAR DROP DOWN SOLUTIONS PANELS PANEL CONTENTS CARDS CARD IMAGE CONTAINER MOBILE*/ .header .navbar-mobile .nav-menu .nav-item .nav-mobile-dropdown-solutions .tabs-panels-container-mobile .panels-nav .panel-nav .contents .container-cards .card div { position: relative; max-width: 45%; min-height: 45%; margin-top: .9rem; margin-bottom: .9rem; } /*[1.56B] HEADER NAV BAR DROP DOWN SOLUTIONS PANELS PANEL CONTENTS CARDS CARD IMAGE MOBILE*/ .header .navbar-mobile .nav-menu .nav-item .nav-mobile-dropdown-solutions .tabs-panels-container-mobile .panels-nav .panel-nav .contents .container-cards .card div > img { width: 100%; } /*[1.57B] HEADER NAV BAR DROP DOWN SOLUTIONS PANELS PANEL CONTENTS CARDS CARD MOBILE*/ .header .navbar-mobile .nav-menu .nav-item .nav-mobile-dropdown-solutions .tabs-panels-container-mobile .panels-nav .panel-nav .contents .container-cards .card { box-shadow: 0 2px 20px 0 var(--color-element-4); border-radius: 15px; min-width: 7rem; max-width: 7rem; min-height: 9rem; max-height: 9rem; margin-bottom: .8rem; display: flex; justify-content: center; align-items: center; flex-direction: column; transition: transform .3s; } /*[1.58B] ANIMATE HEADER NAV BAR DROP DOWN SOLUTIONS PANELS PANEL CONTENTS CARDS CARD MOBILE*/ .header .navbar-mobile .nav-menu .nav-item .nav-mobile-dropdown-solutions .tabs-panels-container-mobile .panels-nav .panel-nav .contents .container-cards .card:hover { box-shadow: rgba(0, 0, 0, 0.2) 0px 6px 12px 0px, rgba(0, 0, 0, 0.1) 0px 2px 4px 0px, rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset; transform: translateY(-.5rem); } /*[1.59B] HEADER NAV BAR DROP DOWN SOLUTIONS PANELS PANEL CONTENTS CARDS CARD CONTAINER MOBILE*/ .header .navbar-mobile .nav-menu .nav-item .nav-mobile-dropdown-solutions .tabs-panels-container-mobile .panels-nav .panel-nav .contents .container-cards .card div { display: flex; justify-content: center; align-items: flex-start; } /*[1.60B] HEADER NAV BAR DROP DOWN SOLUTIONS PANELS PANEL CONTENTS CARDS CARD CONTAINER IMAGE MOBILE*/ .header .navbar-mobile .nav-menu .nav-item .nav-mobile-dropdown-solutions .tabs-panels-container-mobile .panels-nav .panel-nav .contents .container-cards .card div > img { width: 100%; margin-left: 0.5rem; } /*[1.61B] HEADER NAV BAR DROP DOWN SOLUTIONS PANELS PANEL CONTENTS CARDS CARD CONTAINER ICON MOBILE*/ .header .navbar-mobile .nav-menu .nav-item .nav-mobile-dropdown-solutions .tabs-panels-container-mobile .panels-nav .panel-nav .contents .container-cards .card div > i { font-size: 0.8rem; color: var(--color-text-2); visibility: hidden; transition: transform .3s; } /*[1.62B] ANIMATE HEADER NAV BAR DROP DOWN SOLUTIONS PANELS PANEL CONTENTS CARDS CARD CONTAINER ICON MOBILE*/ .header .navbar-mobile .nav-menu .nav-item .nav-mobile-dropdown-solutions .tabs-panels-container-mobile .panels-nav .panel-nav .contents .container-cards .card:hover div > i { visibility: visible; transform: translateX(.5rem); } /*[1.63B] HEADER NAV BAR DROP DOWN SOLUTIONS PANELS PANEL CONTENTS CARDS CARD CONTAINER HEADING MOBILE*/ .header .navbar-mobile .nav-menu .nav-item .nav-mobile-dropdown-solutions .tabs-panels-container-mobile .panels-nav .panel-nav .contents .container-cards .card h4 { color: var(--color-text-1); font-weight: 600; font-size: .9rem; /* margin-top: .5rem;*/ margin-bottom: .5rem; } /*[1.64B] HEADER NAV BAR DROP DOWN SOLUTIONS PANELS PANEL CONTENTS CARDS CARD CONTAINER SUMMARY MOBILE*/ .header .navbar-mobile .nav-menu .nav-item .nav-mobile-dropdown-solutions .tabs-panels-container-mobile .panels-nav .panel-nav .contents .container-cards .card p { color: var(--color-text-2); font-weight: 400; font-size: .6rem; padding-left: .4rem; padding-right: .4rem; margin-bottom: .9rem; flex-wrap: wrap; text-align: center; } /*[1.65B] HEADER NAV BAR DROP DOWN SOLUTIONS PANELS PANEL CONTENTS CARDS CARD CONTAINER TEXT MOBILE*/ .header .navbar-mobile .nav-menu .nav-item .nav-mobile-dropdown-solutions .tabs-panels-container-mobile .panels-nav .panel-nav .contents .container-cards .text { display: grid; grid-template-areas: 'panel-content-text-counter panel-content-text'; color: var(--color-text-1); padding-bottom: 1rem; min-width: 15rem; max-width: 15rem; justify-content: start; align-items: flex-start; } /*[1.66B] HEADER NAV BAR DROP DOWN SOLUTIONS PANELS PANEL CONTENTS CARDS CARD CONTAINER TEXT HEADING MOBILE*/ .header .navbar-mobile .nav-menu .nav-item .nav-mobile-dropdown-solutions .tabs-panels-container-mobile .panels-nav .panel-nav .contents .container-cards .text h1 { grid-area: panel-content-text-counter; font-size: 1.2rem; color: var(--color-text-1); font-weight: 500; margin-right: 1rem; } /*[1.67B] HEADER NAV BAR DROP DOWN SOLUTIONS PANELS PANEL CONTENTS CARDS CARD CONTAINER TEXT SUB HEADING MOBILE*/ .header .navbar-mobile .nav-menu .nav-item .nav-mobile-dropdown-solutions .tabs-panels-container-mobile .panels-nav .panel-nav .contents .container-cards .text h2 { grid-area: panel-content-text; font-size: .9rem; color: var(--color-text-1); font-weight: normal; line-height: 1.5rem; } /*[1.68B] HEADER NAV BAR DROP DOWN SOLUTIONS PANELS PANEL CONTENTS CARDS CARD CONTAINER TEXT HEADING IN ROW FORM MOBILE*/ .header .navbar-mobile .nav-menu .nav-item .nav-mobile-dropdown-solutions .tabs-panels-container-mobile .panels-nav .panel-nav .contents .container-cards .row { display: flex; flex-direction: row; } /*[1.69B] HEADER NAV BAR DROP DOWN SOLUTIONS PANELS PANEL CONTENTS TEXT IN ROW FORM MOBILE*/ .header .navbar-mobile .nav-menu .nav-item .nav-mobile-dropdown-solutions .tabs-panels-container-mobile .text-row { display: flex; flex-direction: row; justify-content: flex-start; } /*[1.70B] HEADER NAV BAR DROP DOWN SOLUTIONS TOGGLE BUTTONS FOR TABS MOBILE*/ #radio-nav-mobile-1:checked ~ .tabs-nav #lbl-nav-tab-1, #radio-nav-mobile-2:checked ~ .tabs-nav #lbl-nav-tab-2, #radio-nav-mobile-3:checked ~ .tabs-nav #lbl-nav-tab-3, #radio-nav-mobile-4:checked ~ .tabs-nav #lbl-nav-tab-4 { border-bottom: 4px solid var(--color-element-1); box-shadow: 0 5px 20px 0 var(--color-element-4); } /*[1.71B] ANIMATE HEADER NAV BAR DROP DOWN SOLUTIONS TOGGLE BUTTONS FOR TABS MOBILE*/ #radio-nav-mobile-1:checked ~ .tabs-nav #lbl-nav-tab-1 * i, #radio-nav-mobile-2:checked ~ .tabs-nav #lbl-nav-tab-2 * i, #radio-nav-mobile-3:checked ~ .tabs-nav #lbl-nav-tab-3 * i, #radio-nav-mobile-4:checked ~ .tabs-nav #lbl-nav-tab-4 * i{ visibility: visible; transform: translateX(0rem); } /*[1.72B] HEADER NAV BAR DROP DOWN SOLUTIONS TOGGLE BUTTONS FOR PANELS MOBILE*/ #radio-nav-mobile-1:checked ~ * #panel-nav-mobile-1, #radio-nav-mobile-2:checked ~ * #panel-nav-mobile-2, #radio-nav-mobile-3:checked ~ * #panel-nav-mobile-3, #radio-nav-mobile-4:checked ~ * #panel-nav-mobile-4 { display: block; } /****************************************************************************************END TOP NAV BAR DROP DOWN MENU - MOBILE - SOLUTIONS*/ /****************************************************************************************END SECTION 1B - HEADER - NAV BAR - MOBILE*/ /****************************************************************************************END SECTION 1B - HEADER - NAV BAR - MOBILE*/ /****************************************************************************************END SECTION 1B - HEADER - NAV BAR - MOBILE*/ /****************************************************************************************END SECTION 1B - HEADER - NAV BAR - MOBILE*/ /****************************************************************************************START SECTION 2 - MAIN - TIMELINE*/ /****************************************************************************************START SECTION 2 - MAIN - TIMELINE*/ /****************************************************************************************START SECTION 2 - MAIN - TIMELINE*/ /****************************************************************************************START SECTION 2 - MAIN - TIMELINE*/ /*[2.1]* SECTION CONTAINER*/ main .main-timeline-container { width: 90vw; height: 90vh; margin: 0 auto 0; margin-bottom: 5rem; } /*[2.2] TIMELINE*/ main .main-timeline-container .timeline { display: flex; justify-content: space-between; align-items: center; width: 100%; height: 100%; background-image: url('../elements/About Page/Timeline/BG.png'); background-size: contain; background-repeat: no-repeat; text-align: center; margin: 0 auto 0; position: relative; } /*[2.3] TIMELINE LINE*/ main .main-timeline-container .timeline .timeline-line { position: absolute; width: 100%; height: 2.5px; background-color: var(--color-text-1); top: 50%; transform: translateY(-50%); } /*[2.4] TIMELINE TIMESTAMP DOWN*/ main .main-timeline-container .timeline .timestamp-down { position: relative; } /*[2.5] TIMELINE TIMESTAMP DOWN LINE*/ main .main-timeline-container .timeline .timestamp-down .vertical-line { border-left: 1px solid var(--color-text-2); height: 40px; margin-left: 50%; position: absolute; display: block; transition: height .5s; } /*[2.6] TIMELINE TIMESTAMP DOWN TEXT*/ main .main-timeline-container .timeline .timestamp-down .timestamp-text { position: absolute; display: flex; flex-direction: column; text-align: left; width: 10rem; transform: translate(1.5rem,1.5rem); padding-left: 0.5rem; } /*[2.7] ANIMATE TIMELINE TIMESTAMP DOWN TEXT*/ /*main .main-timeline-container .timeline .timestamp-down:hover .timestamp-text { display: block; }*/ /*[2.8] ANIMATE TIMELINE TIMESTAMP DOWN IMAGE*/ main .main-timeline-container .timeline .timestamp-down:hover .timestamp-image { transform: scale(1.2); transition: all .6s; } /*[2.9] ANIMATE TIMELINE TIMESTAMP DOWN*/ /*main .main-timeline-container .timeline .timestamp-down:hover .vertical-line { display: block; height: 40px; }*/ /*[2.10] TIMELINE TIMESTAMP DOWN TEXT*/ main .main-timeline-container .timeline .timestamp-down .timestamp-text h3 { color: var(--color-text-1); font-weight: 900; font-size: 1.6rem; margin-bottom: .6rem; } /*[2.11] TIMELINE TIMESTAMP DOWN TEXT*/ main .main-timeline-container .timeline .timestamp-down .timestamp-text h4 { color: var(--color-text-1); font-weight: 600; font-size: .9rem; margin-bottom: .6rem; } /*[2.12] TIMELINE TIMESTAMP DOWN TEXT*/ main .main-timeline-container .timeline .timestamp-down .timestamp-text h5 { color: var(--color-text-2); font-size: .8rem; font-weight: normal; margin-bottom: .6rem; } /*[2.13] TIMELINE TIMESTAMP UP*/ main .main-timeline-container .timeline .timestamp-up { position: relative; } /*[2.14] TIMELINE TIMESTAMP UP LINE*/ main .main-timeline-container .timeline .timestamp-up .vertical-line { border-left: 1px solid var(--color-text-2); height: 40px; margin-left: 50%; position: absolute; display: block; transform: translateY(-7rem); transition: height .5s; } /*[2.15] TIMELINE TIMESTAMP UP TEXT*/ main .main-timeline-container .timeline .timestamp-up .timestamp-text { position: absolute; display: flex; flex-direction: column; text-align: left; width: 10rem; transform: translate(1.5rem,-18rem); padding-left: 0.5rem; margin-bottom: 12rem; } /*[2.16] ANIMATE TIMELINE TIMESTAMP UP TEXT*/ /*main .main-timeline-container .timeline .timestamp-up:hover .timestamp-text { display: block; height: 40px; }*/ /*[2.17] ANIMATE TIMELINE TIMESTAMP UP IMAGE*/ main .main-timeline-container .timeline .timestamp-up:hover .timestamp-image { transform: scale(1.2); transition: all .6s; } /*[2.18] ANIMATE TIMELINE TIMESTAMP UP LINE*/ /*main .main-timeline-container .timeline .timestamp-up:hover .vertical-line { height: 40px; }*/ /*[2.19] TIMELINE TIMESTAMP UP TEXT*/ main .main-timeline-container .timeline .timestamp-up .timestamp-text h3 { color: var(--color-text-1); font-weight: 900; font-size: 1.6rem; margin-bottom: .6rem; } /*[2.20] TIMELINE TIMESTAMP UP TEXT*/ main .main-timeline-container .timeline .timestamp-up .timestamp-text h4 { color: var(--color-text-1); font-weight: 600; font-size: .9rem; margin-bottom: .6rem; } /*[2.21] TIMELINE TIMESTAMP UP TEXT*/ main .main-timeline-container .timeline .timestamp-up .timestamp-text h5 { color: var(--color-text-2); font-size: .8rem; font-weight: normal; margin-bottom: .6rem; } /*[2.22] TIMELINE LEGEND*/ main .main-timeline-container .main-timeline-legend h4 { color: #989898; font-size: 1.125rem; font-weight: 600; z-index: -5000; margin-top: 1rem; } /*[2.23] TIMELINE ARROW*/ main .main-timeline-container .timeline i { color: var(--color-text-1); font-weight: 900; font-size: 1.2rem; transform: translateX(2px); } /****************************************************************************************END SECTION 2 - MAIN - TIMELINE*/ /****************************************************************************************END SECTION 2 - MAIN - TIMELINE*/ /****************************************************************************************END SECTION 2 - MAIN - TIMELINE*/ /****************************************************************************************END SECTION 2 - MAIN - TIMELINE*/ /****************************************************************************************START SECTION 2 - MAIN*/ h1 { font-size: 54px; color: #3A4A5B; font-weight: 700; line-height: 1em; margin-top: 32px !important; margin-bottom: 32px !important; text-align: center; } h2 { font-size: 48px; color: #3A4A5B; font-weight: 700; line-height: 1em; margin-top: 10px; margin-bottom: 30px; } h3 { font-size: 32px; color: #3A4A5B; font-weight: 700; line-height: 1em; margin-top: 10px; margin-bottom: 30px; } h4 { font-size: 28px; color: #607B8B; font-weight: 400; line-height: 1em; margin-top: 10px; margin-bottom: 30px; padding-bottom: 0px !important; } h5 { font-size: 24px; color: #3A4A5B; font-weight: 700; line-height: 1em; margin-top: 10px; margin-bottom: 30px; } h6 { font-size: 20px; color: #607B8B; font-weight: 600; line-height: 1em; margin-top: 10px; margin-bottom: 14px; } p { font-size: 16px; color: #607B8B; font-weight: Normal; line-height: 1.8em; margin-top: 0px; margin-bottom: 25px; } /****************************************************************************************END SECTION 2 - MAIN*/ /****************************************************************************************START SECTION 3 - MAIN - PHILOSOPHY*/ /****************************************************************************************START SECTION 3 - MAIN - PHILOSOPHY*/ /****************************************************************************************START SECTION 3 - MAIN - PHILOSOPHY*/ /****************************************************************************************START SECTION 3 - MAIN - PHILOSOPHY*/ /*[3.1] SECTION CONTAINER*/ main .pholosophy-container { max-width: 92vw; margin: 0 auto 0; margin-top: 6rem; margin-bottom: 5rem; display: flex; justify-content: space-between; } /*[3.2] IMAGE CONTAINER*/ main .pholosophy-container .image-container { min-width: 50%; height: 100%; } /*[3.3] IMAGE*/ main .pholosophy-container .image-container img { width: 100%; height: 100%; background-size: contain; background-repeat: no-repeat; } /*[3.4] TEXT CONTAINER*/ main .pholosophy-container .text-container { min-width: 50%; padding-left: 4rem; padding-right: 7rem; } /*[3.5] TEXT HEADING*/ main .pholosophy-container .text-container h1 { color: var(--color-text-1); font-size: clamp(1.2rem, 0.9429rem + 1.2857vw, 3rem); font-weight: 700; margin-bottom: 2rem; } /*[3.6] TEXT DETAIL*/ /*main .pholosophy-container .text-container p { color: var(--color-text-1); font-size: clamp(0.9rem, 0.8571rem + 0.2143vw, 1.2rem); font-weight: 400; line-height: clamp(1.4rem, 1.3714rem + 0.1429vw, 1.6rem); } main .pholosophy-container .text-container p { margin-bottom: 30px; }*/ /****************************************************************************************END SECTION 3 - MAIN - PHILOSOPHY*/ /****************************************************************************************END SECTION 3 - MAIN - PHILOSOPHY*/ /****************************************************************************************END SECTION 3 - MAIN - PHILOSOPHY*/ /****************************************************************************************END SECTION 3 - MAIN - PHILOSOPHY*/ /****************************************************************************************START SECTION 4 - MAIN - PHILOSOPHY CARDS*/ /****************************************************************************************START SECTION 4 - MAIN - PHILOSOPHY CARDS*/ /****************************************************************************************START SECTION 4 - MAIN - PHILOSOPHY CARDS*/ /****************************************************************************************START SECTION 4 - MAIN - PHILOSOPHY CARDS*/ /*[4.1] SECTION CONTAINER*/ main .pholosophy-cards-container { max-width: 55vw; margin: 0 auto; margin-top: 5rem; margin-bottom: 5rem; display: grid; grid-template-columns: repeat(2, 1fr); grid-column-gap: 6rem; grid-row-gap: 3rem; justify-items: center; } /*[4.2] CARD*/ main .pholosophy-cards-container .pholosophy-card { display: flex; justify-content: center; align-items: center; max-width: 22rem; border-radius: 0 15px 15px 0; border-left: .6rem solid var(--color-text-3); padding-left: clamp(2rem, 1.8571rem + 0.7143vw, 3rem); padding-right: clamp(2rem, 1.8571rem + 0.7143vw, 3rem); padding-top: clamp(3rem, 2.8571rem + 0.7143vw, 4rem); padding-bottom: clamp(3rem, 2.8571rem + 0.7143vw, 4rem); box-shadow: 0 10px 20px 0 var(--color-element-4); transition: box-shadow .3s; } /*[4.3] ANIMATE CARD*/ main .pholosophy-cards-container .pholosophy-card:hover { box-shadow: rgba(0, 0, 0, 0.2) 0px 12px 28px 0px, rgba(0, 0, 0, 0.1) 0px 2px 4px 0px, rgba(255, 255, 255, 0.05) 0px 0px 0px 1px inset; } /*[4.4] CARD TEXT*/ main .pholosophy-cards-container .pholosophy-card h5 { color: var(--color-text-1); font-weight: 500; font-size: clamp(1.1rem, 1rem + 0.5vw, 1.8rem); } /****************************************************************************************END SECTION 4 - MAIN - PHILOSOPHY CARDS*/ /****************************************************************************************END SECTION 4 - MAIN - PHILOSOPHY CARDS*/ /****************************************************************************************END SECTION 4 - MAIN - PHILOSOPHY CARDS*/ /****************************************************************************************END SECTION 4 - MAIN - PHILOSOPHY CARDS*/ /****************************************************************************************START SECTION 5 - MAIN - PROPOSITION*/ /****************************************************************************************START SECTION 5 - MAIN - PROPOSITION*/ /****************************************************************************************START SECTION 5 - MAIN - PROPOSITION*/ /****************************************************************************************START SECTION 5 - MAIN - PROPOSITION*/ /*[5.1] SECTION CONTAINER*/ main .proposition-container { max-width: 75vw; margin: 0 auto 0; margin-top: 6rem; margin-bottom: 5rem; display: flex; justify-content: space-between; align-items: center; } /*[5.2] TEXT CONTAINER*/ main .proposition-container .text-container { width: 50%; } /*[5.3] TEXT*/ main .proposition-container .text-container h1 { color: var(--color-text-1); font-size: clamp(1.6rem, 1.5429rem + 0.2857vw, 2rem); font-weight: 700; margin-bottom: 2rem; margin-left: 2.2rem; } /*[5.4] TEXT LIST ITEMS*/ main .proposition-container .text-container li { color: var(--color-text-3); font-size: .8rem; font-weight: 700; display: flex; align-items: baseline; margin-bottom: 1rem; } /*[5.5] TEXT LIST ITEMS DETAIL*/ main .proposition-container .text-container li .proposition-items { color: var(--color-text-1); font-size: clamp(0.9rem, 0.8571rem + 0.2143vw, 1.2rem); font-weight: normal; line-height: clamp(1.4rem, 1.3714rem + 0.1429vw, 1.6rem); margin-left: 1.6rem; } /*[5.6] IMAGE CONTAINER*/ main .proposition-container .image-container { width: 50%; transform: translateX(-20%); } /*[5.7] IMAGE*/ main .proposition-container .image-container img { width: 150% } /****************************************************************************************END SECTION 5 - MAIN - PROPOSITION*/ /****************************************************************************************END SECTION 5 - MAIN - PROPOSITION*/ /****************************************************************************************END SECTION 5 - MAIN - PROPOSITION*/ /****************************************************************************************END SECTION 5 - MAIN - PROPOSITION*/ /****************************************************************************************START SECTION 6 - MAIN - CLIENT VALUE*/ /****************************************************************************************START SECTION 6 - MAIN - CLIENT VALUE*/ /****************************************************************************************START SECTION 6 - MAIN - CLIENT VALUE*/ /****************************************************************************************START SECTION 6 - MAIN - CLIENT VALUE*/ /*[6.1] SECTION CONTAINER*/ main .client-value-container { max-width: 62vw; margin: 0 auto; margin-top: 5rem; margin-bottom: 5rem; text-align: center; } /*[6.2] NORMAL TEXT*/ main .client-value-container h1 { color: var(--color-text-1); font-size: clamp(1.1rem, 0.9714rem + 0.6429vw, 2rem); font-weight: 600; line-height: clamp(1.5rem, 1.3571rem + 0.7143vw, 2.5rem); } /*[6.3] HIGHLIGHTED TEXT*/ main .client-value-container .text-highlight-1 { color: var(--color-text-3); } /****************************************************************************************END SECTION 6 - MAIN - CLIENT VALUE*/ /****************************************************************************************END SECTION 6 - MAIN - CLIENT VALUE*/ /****************************************************************************************END SECTION 6 - MAIN - CLIENT VALUE*/ /****************************************************************************************END SECTION 6 - MAIN - CLIENT VALUE*/ /****************************************************************************************START SECTION 7 - MAIN - MEET THE TEAM*/ /****************************************************************************************START SECTION 7 - MAIN - MEET THE TEAM*/ /****************************************************************************************START SECTION 7 - MAIN - MEET THE TEAM*/ /****************************************************************************************START SECTION 7 - MAIN - MEET THE TEAM*/ /*[5.1] STYLE TEAM CONTAINER*/ main .meet-team { width: 100%; max-height: 50rem; display: flex; align-items: center; flex-direction: column; justify-content: space-between; margin: 0 auto; margin-top: 6rem; margin-bottom: 8rem; text-align: center; } /*[5.2] STYLE TEAM CONTAINER HEADING*/ main .meet-team h1 { font-size: clamp(1.5rem, 1.3571rem + 0.7143vw, 2.5rem); font-weight: 700; color: var(--color-text-1); margin-bottom: 1.5rem; } /*[5.3] STYLE TEAM CARD CONTAINER*/ .slider { max-width: 100%; margin-top: 1.5rem; max-height: 100%; } /*[5.4] STYLE TEAM CARD CONTAINER*/ .slick-slider .slick-track,.slick-slider .slick-list { padding-top: 2rem; padding-bottom: 5rem; margin: 0 auto; text-align: center; } /*[5.5] TEAM CARD*/ .slick-slide { margin: 0 1.2rem; background: white; border: none; outline: none; max-width: 25rem; min-height: 30rem; transition: all .3s; cursor: pointer; text-align: center; max-height: 35rem; } /*[5.6] TEAM CARD - CURRENT*/ .slick-current { transform: scale(1.150); filter: grayscale(0%); } /*[5.7] TEAM SLIDER PREV BUTTON TEXT*/ .slick-prev { transform: translateX(70px); z-index: 1000; } /*[5.8] TEAM SLIDER PREV BUTTON - CHEVRON LEFT ARROW*/ .slick-prev:before { z-index: 1000; display: inline-block; border-right: 10px solid var(--color-text-2); border-bottom: 10px solid var(--color-text-2); max-width: 23px; max-height: 23px; transform: rotate(-225deg); opacity: 1; position: absolute; top: -150px; } /*[5.9] TEAM SLIDER NEXT BUTTON TEXT*/ .slick-next { transform: translateX(-70px); } /*[5.10] TEAM SLIDER NEXT BUTTON - CHEVRON RIGHT ARROW*/ .slick-next:before { z-index: 1000; display: inline-block; border-right: 10px solid var(--color-text-2); border-bottom: 10px solid var(--color-text-2); max-width: 23px; max-height: 23px; transform: rotate(315deg); opacity: 1; position: absolute; top: -150px; } /*[5.11] TEAM SLIDER PREV NEXT CARDS*/ .slick-active { opacity: .5; filter: grayscale(90%); } /*[5.12] TEAM SLIDER CURRENT CARD*/ .slick-current { opacity: 1; filter: grayscale(0%); } /*[5.13] STYLE TEAM CARD IMAGE CONTAINER*/ main .meet-team .solutions-card .image-container-solutions { position: relative; width: 100%; height: 50%; margin-bottom: .5rem; } /*[5.14] STYLE TEAM CARD IMAGE*/ main .meet-team .solutions-card .image-container-solutions img { width: 100%; text-align: center; } /*[5.15a] STYLE TEAM CARD MEMBER NAME*/ main .meet-team .solutions-card h4 { color: var(--color-text-1); font-weight: 700; font-size: clamp(1.1rem, 1.0571rem + 0.2143vw, 1.4rem); text-align: center; margin-bottom: 1rem; } /*[5.15b] STYLE TEAM CARD MEMBER NAME*/ main .meet-team .solutions-card .strong-character { color: var(--color-text-2); font-weight: 700; font-size: clamp(0.6rem, 0.4714rem + 0.6429vw, 1.5rem); } /*[5.15c] STYLE TEAM CARD MEMBER TITLE*/ main .meet-team .solutions-card .member-profile h5 { color: var(--color-text-2); font-weight: 400; font-size: clamp(0.9rem, 0.8485rem + 0.2197vw, 1.2rem); text-align: center; margin-bottom: 1.5rem; } /*[5.16] STYLE TEAM CARD MEMBER PROFILE*/ main .meet-team .solutions-card .member-profile p { color: var(--color-text-2); font-weight: 400; font-size: clamp(0.7rem, 0.6714rem + 0.1429vw, 0.9rem); text-align: center; line-height: clamp(1.3rem, 1.2714rem + 0.1429vw, 1.5rem); padding-left: 6%; padding-right: 6%; margin-top: 1.5rem; margin-bottom: 1rem; } /*[5.17] STYLE TEAM CONTAINER CARDS DOTS ACTIVE */ .slick-dots li.slick-active button:before { opacity: 1; font-size: 0; border: 3.5px solid var(--color-text-1); border-radius: 50%; width: 15px; height: 15px; background-color: var(--color-text-1); } /*[5.18] STYLE TEAM CONTAINER CARDS DOTS PREV NEXT*/ .slick-dots li button:before { opacity: 1; font-size: 0; border: 3.5px solid var(--color-text-1); border-radius: 50%; width: 15px; height: 15px; } /****************************************************************************************END SECTION 7 - MAIN - MEET THE TEAM*/ /****************************************************************************************END SECTION 7 - MAIN - MEET THE TEAM*/ /****************************************************************************************END SECTION 7 - MAIN - MEET THE TEAM*/ /****************************************************************************************END SECTION 7 - MAIN - MEET THE TEAM*/ /****************************************************************************************START SECTION 8 - MAIN - ARRANGE A DEMO*/ /****************************************************************************************START SECTION 8 - MAIN - ARRANGE A DEMO*/ /****************************************************************************************START SECTION 8 - MAIN - ARRANGE A DEMO*/ /****************************************************************************************START SECTION 8 - MAIN - ARRANGE A DEMO*/ /*[8.1]*/ main .arrange-demo { width: 92vw; height: 8rem; display: flex; justify-content: center; margin: 0 auto; align-items: center; margin-top: 1rem; flex-wrap: wrap; gap: clamp(2rem, 1.1429rem + 4.2857vw, 8rem); } /*[8.2] STYLE DEMO BUTTON */ main .arrange-demo #btn-demo-main { width: clamp(8rem, 7.3571rem + 3.2143vw, 12.5rem); height: clamp(2.4rem, 2.2071rem + 0.9643vw, 3.75rem); color: white; background-color: var(--color-text-3); border-radius: 12px; font-weight: 500; font-size: clamp(0.8rem, 0.7429rem + 0.2857vw, 1.2rem); cursor: pointer; padding-left: clamp(1.1rem, 1.0786rem + 0.1071vw, 1.25rem); transition: background-color .3s, padding-left .3s; } /*[8.3] HIDE DEMO BUTTON ARROW*/ main .arrange-demo #btn-demo-main > i { visibility: hidden; font-size: clamp(0.8rem, 0.7714rem + 0.1429vw, 1rem); transform: translateX(-1.2rem); transition: transform .3s, margin-left .3s; } /*[8.4] ANIMATE DEMO BUTTON */ main .arrange-demo #btn-demo-main:hover { background-color: var(--color-element-3); } /*[8.5] SHOW DEMO BUTTON ARROW */ main .arrange-demo #btn-demo-main:hover > i { transform: translateX(.5rem); visibility: visible; } /*[8.6] SHOW DEMO BUTTON ARROW */ main .arrange-demo #btn-demo-main:hover { padding-left: 0; padding-right: 0; } /*[8.7] STYLE SECTION TEXT*/ main .arrange-demo h4 { color: var(--color-text-2); font-weight: 700; font-size: clamp(1rem, 0.9143rem + 0.4286vw, 1.6rem); } /****************************************************************************************END SECTION 8 - MAIN - ARRANGE A DEMO*/ /****************************************************************************************END SECTION 8 - MAIN - ARRANGE A DEMO*/ /****************************************************************************************END SECTION 8 - MAIN - ARRANGE A DEMO*/ /****************************************************************************************END SECTION 8 - MAIN - ARRANGE A DEMO*/ /****************************************************************************************START SECTION 8 - FOOTER*/ /****************************************************************************************START SECTION 8 - FOOTER*/ /****************************************************************************************START SECTION 8 - FOOTER*/ /****************************************************************************************START SECTION 8 - FOOTER*/ /*[8.1] FOOTER CONTAINER*/ .footer { margin: 0 auto; margin-top: 2rem; padding-top: 2rem; width: 92vw; border-top: 1.6px solid var(--color-element-2); padding-bottom: 2rem; } /*[8.2] FOOTER LIST ITEMS SPACING*/ .footer .list-container { width: 79%; display: flex; flex-direction: row; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; margin: 0 auto; } /*[8.3] FOOTER LIST*/ .footer .list-container .list { display: flex; flex-direction: column; justify-content: space-evenly; line-height: clamp(1.8rem, 1.7714rem + 0.1429vw, 2rem); } /*[8.4] FOOTER LIST HEADING*/ .footer .list-container .list h3 { color: var(--color-text-1); font-weight: 700; font-size: clamp(1.438rem, 1.1929rem + 0.0357vw, 1.25rem); font-family: SourceSansPro-Bold, "Source Sans Pro"; margin: 0px 0px 4px 0px; } /*[8.5] FOOTER LIST LINKS*/ .footer .list-container .list a { color: var(--color-text-2); font-weight: 600; font-size: .9rem; font-family: SourceSansPro-SemiBold, "Source Sans Pro"; position: relative; /*NEEDED FOR NAV LINK UNDERLINE HOVER EFFECT*/ } /*[8.6] FOOTER LIST ACTIVE PAGE*/ .footer .list-container .list a.active { color: var(--color-text-3); } /*[8.7] FOOTER LIST BLANK SPACE*/ .footer .list-container .list .blank-content { visibility: hidden; } /*[8.8] FOOTER LIST SOCIAL ICONS*/ .footer .list-container .list .social-icons i { color: var(--color-text-2); margin-right: .6rem; font-size: clamp(1rem, 0.9786rem + 0.1071vw, 1.15rem); position: relative; /*NEEDED FOR NAV LINK UNDERLINE HOVER EFFECT*/ transition: color .2s; } /*[8.9] FOOTER LOGO*/ .footer .nav-logo { background-image: url('../elements/Top Nav Bar/UON Logo.svg'); background-size: contain; background-repeat: no-repeat; background-position: center; width: clamp(7rem, 6.8571rem + 0.7143vw, 8rem); height: clamp(2rem, 2rem + 0vw, 2rem); cursor: pointer; position: relative; /*NEEDED FOR NAV LINK UNDERLINE HOVER EFFECT*/ } /*[8.10a] FOOTER NAV MENU ITEMS LINKS*/ .footer .list-container .footer-nav-link:after { content: ""; background-color: var(--color-text-3); width: 0; height: .125rem; border-radius: 50px; position: absolute; left: auto; transition: width 200ms ease-in; display: flex; } /*[8.10b] ANIMATE FOOTER NAV MENU ITEMS LINKS*/ .footer .list-container .footer-nav-link:hover:after { width: 100%; } /*[8.11] FOOTER NAV MENU LINKS NESTED*/ .footer .link-nested { display: inline-block; position: relative; /*NEEDED FOR NAV LINK UNDERLINE HOVER EFFECT*/ } /*[8.12] ANIMATE FOOTER NAV MENU ITEMS SOCIAL LINKS*/ .footer .list-container .list .social-icons i:hover { color: var(--color-text-3); transform: scale(1.2); } /****************************************************************************************END SECTION 8 - FOOTER*/ /****************************************************************************************END SECTION 8 - FOOTER*/ /****************************************************************************************END SECTION 8 - FOOTER*/ /****************************************************************************************END SECTION 8 - FOOTER*/ /****************************************************************************************BEGIN RESPONSIVE DESIGN*/ /****************************************************************************************BEGIN RESPONSIVE DESIGN*/ /****************************************************************************************BEGIN RESPONSIVE DESIGN*/ /****************************************************************************************BEGIN RESPONSIVE DESIGN*/ /****************************************************************************************BEGIN RESPONSIVE DESIGN*/ /****************************************************************************************BEGIN RESPONSIVE DESIGN*/ /****************************************************************************************BEGIN RESPONSIVE DESIGN*/ /****************************************************************************************BEGIN RESPONSIVE DESIGN*/ /****************************************************************************************BEGIN RESPONSIVE DESIGN*/ /****************************************************************************************BEGIN RESPONSIVE DESIGN*/ /****************************************************************************************BEGIN RESPONSIVE DESIGN*/ /****************************************************************************************BEGIN RESPONSIVE DESIGN*/ /****************************************************************************************BEGIN RESPONSIVE DESIGN*/ /****************************************************************************************BEGIN RESPONSIVE DESIGN*/ /****************************************************************************************BEGIN RESPONSIVE DESIGN*/ /****************************************************************************************BEGIN RESPONSIVE DESIGN*/ /****************************************************************************************BEGIN RESPONSIVE DESIGN*/ /****************************************************************************************BEGIN RESPONSIVE DESIGN*/ /****************************************************************************************BEGIN RESPONSIVE DESIGN*/ /****************************************************************************************BEGIN RESPONSIVE DESIGN*/ /****************************************************************************************BEGIN RESPONSIVE DESIGN*/ /****************************************************************************************START SECTION 1 - HEADER - NAV BAR - DESKTOP*/ /****************************************************************************************START SECTION 1 - HEADER - NAV BAR - DESKTOP*/ /****************************************************************************************START SECTION 1 - HEADER - NAV BAR - DESKTOP*/ /****************************************************************************************START SECTION 1 - HEADER - NAV BAR - DESKTOP*/ /************************************************************************************START RESPONSIVE DESIGN - 1366px*/ @media (max-width: 1366px) { /**********************************************************************************START TOP NAV BAR DROP DOWN MENU - DESKTOP - SERVICES*/ /*[1.19] STYLE TOP NAV BAR DROP DOWN MENU*/ .header .navbar-desktop .nav-menu .nav-item .nav-desktop-dropdown-services { padding-left: 0rem; } /*[1.21] STYLE TOP NAV BAR DROP DOWN MENU*/ .header .navbar-desktop .nav-menu .nav-item .nav-desktop-dropdown-services .container-cards { gap: 5rem; padding-top: 3rem; } /**********************************************************************************END TOP NAV BAR DROP DOWN MENU - -DESKTOP - SERVICES*/ } /************************************************************************************END RESPONSIVE DESIGN - 1366px*/ /************************************************************************************START RESPONSIVE DESIGN - 1024px*/ @media (max-width: 1024px) { /**********************************************************************************START TOP NAV BAR DROP DOWN MENU - DESKTOP - SERVICES*/ /*[1.19] STYLE TOP NAV BAR DROP DOWN MENU*/ .header .navbar-desktop .nav-menu .nav-item .nav-desktop-dropdown-services { padding-right: 2rem; padding-left: 0rem; } /*[1.21] STYLE TOP NAV BAR DROP DOWN MENU*/ .header .navbar-desktop .nav-menu .nav-item .nav-desktop-dropdown-services .container-cards { gap: 4rem; padding-top: 2rem; } /**********************************************************************************START DROP DOWN MENU CARD - DESKTOP - SERVICES*/ /*[1.22] STYLE TOP NAV BAR DROP DOWN MENU CARD*/ .header .navbar-desktop .nav-menu .nav-item .nav-desktop-dropdown-services .nav-card { width: 11.5rem; min-height: 16rem; max-height: 16rem; } /*[1.24] STYLE TOP NAV BAR DROP DOWN MENU HEADINGS*/ .header .navbar-desktop .nav-menu .nav-item .nav-desktop-dropdown-services h3 { margin-top: .5rem; } /*[1.25] ANIMATE TOP NAV BAR DROP DOWN MENU CARD ARROW*/ .header .navbar-desktop .nav-menu .nav-item .nav-desktop-dropdown-services .nav-card div { max-height: 5rem; margin-bottom: 0rem; } /*[1.26] ANIMATE TOP NAV BAR DROP DOWN MENU CARD ARROW*/ .header .navbar-desktop .nav-menu .nav-item .nav-desktop-dropdown-services .nav-card div > img { padding-top: 1rem; } /*[1.27] ANIMATE TOP NAV BAR DROP DOWN MENU CARD ARROW*/ .header .navbar-desktop .nav-menu .nav-item .nav-desktop-dropdown-services .nav-card div > i { padding-top: .9rem; padding-right: 1.150rem; font-size: 1.150rem; } /*[1.28] STYLE TOP NAV BAR DROP DOWN MENU CARD TEXT*/ .header .navbar-desktop .nav-menu .nav-item .nav-desktop-dropdown-services .nav-card > h4 { font-size: 1.08rem; padding-bottom: .6rem; } /*[1.29] STYLE TOP NAV BAR DROP DOWN MENU CARD TEXT*/ .header .navbar-desktop .nav-menu .nav-item .nav-desktop-dropdown-services .nav-card > p { font-size: .8rem; line-height: 1.5rem; padding-left: .6rem; padding-right: .6rem; } /**********************************************************************************END DROP DOWN MENU CARD - DESKTOP - SERVICES*/ /**********************************************************************************END TOP NAV BAR DROP DOWN MENU - -DESKTOP - SERVICES*/ } /************************************************************************************END RESPONSIVE DESIGN - 1024px*/ /**************************************************************************************START RESPONSIVE DESIGN - 768px*/ /**************************************************************************************START RESPONSIVE DESIGN - 768px*/ /**************************************************************************************START RESPONSIVE DESIGN - 768px*/ /**************************************************************************************START RESPONSIVE DESIGN - 768px*/ @media (max-width: 768px) { /*[1.1B] HEADER NAV BAR MOBILE CONTAINER*/ .header .navbar-mobile { position: fixed; top: 0; right: 0; left: 0; padding-left: 1rem; padding-right: 1rem; display: flex; align-items: center; justify-content: space-between; z-index: 1000; background-color: rgba(256,256,256, .9); border-bottom: 1.6px solid var(--color-element-2); } /*[1.2B] HIDE HEADER NAV BAR DESKTOP*/ .header .navbar-desktop { display: none; } } /**************************************************************************************END RESPONSIVE DESIGN - 768px*/ /**************************************************************************************END RESPONSIVE DESIGN - 768px*/ /**************************************************************************************END RESPONSIVE DESIGN - 768px*/ /**************************************************************************************END RESPONSIVE DESIGN - 768px*/ /****************************************************************************************END SECTION 1 - HEADER - NAV BAR - DESKTOP*/ /****************************************************************************************END SECTION 1 - HEADER - NAV BAR - DESKTOP*/ /****************************************************************************************END SECTION 1 - HEADER - NAV BAR - DESKTOP*/ /****************************************************************************************END SECTION 1 - HEADER - NAV BAR - DESKTOP*/ /****************************************************************************************START SECTION 2 - MAIN - TIMELINE*/ /****************************************************************************************START SECTION 2 - MAIN - TIMELINE*/ /****************************************************************************************START SECTION 2 - MAIN - TIMELINE*/ /****************************************************************************************START SECTION 2 - MAIN - TIMELINE*/ /************************************************************************************START RESPONSIVE DESIGN - 1024px*/ @media (max-width: 1020px) { /*[2.1]* SECTION CONTAINER*/ main .main-timeline-container { max-width: 90%; height: 400%; padding-top: 2rem; } /*[2.2] TIMELINE*/ main .main-timeline-container .timeline { flex-direction: column; align-items: flex-start; max-width: 100%; min-height: 100%; background-image: none; gap: 8rem; height: 120rem; } /*[2.3] TIMELINE LINE*/ main .main-timeline-container .timeline .timeline-line { top: 55%; transform: translateY(-50%); width: 2.5px; height: 106%; left: 1.5rem; } /*[2.5] TIMELINE TIMESTAMP DOWN LINE*/ main .main-timeline-container .timeline .timestamp-down .vertical-line { transform: rotate(90deg); transition: left 2s; background-color: var(--color-text-2); width: 1.5px; height: 1rem; display: flex; top: 30%; left: 1.6rem; transition: left .4s; margin-left: 66%; } /*[2.6] TIMELINE TIMESTAMP DOWN TEXT*/ main .main-timeline-container .timeline .timestamp-down .timestamp-text { position: absolute; left: 9%; right: 0; min-width: 28rem; transform: translate(-6rem, -3.5rem); display: flex; padding-left: 10rem; } /*[2.9] ANIMATE TIMELINE TIMESTAMP DOWN*/ /*main .main-timeline-container .timeline .timestamp-down:hover .vertical-line { left: 7rem; }*/ /*[2.10] TIMELINE TIMESTAMP DOWN TEXT*/ main .main-timeline-container .timeline .timestamp-down .timestamp-text h3 { font-size: 1.6rem; margin-bottom: 0; } /*[2.11] TIMELINE TIMESTAMP DOWN TEXT*/ main .main-timeline-container .timeline .timestamp-down .timestamp-text h4 { font-size: .9rem; } /*[2.12] TIMELINE TIMESTAMP DOWN TEXT*/ main .main-timeline-container .timeline .timestamp-down .timestamp-text h5 { font-size: .8rem; } /*[2.14] TIMELINE TIMESTAMP UP LINE*/ main .main-timeline-container .timeline .timestamp-up .vertical-line { transform: rotate(-90deg); transition: left 2s; background-color: var(--color-text-2); width: 1.5px; height: 1rem; display: flex; top: 30%; transition: left .4s; left: 1.6rem; margin-left: 66%; } /*[2.15] TIMELINE TIMESTAMP UP TEXT*/ main .main-timeline-container .timeline .timestamp-up .timestamp-text { left: 16%; right: 0; min-width: 23rem; transform: translate(-6rem, -3.5rem); display: flex; padding-left: 10rem; } /*[2.16] ANIMATE TIMELINE TIMESTAMP UP TEXT*/ /*main .main-timeline-container .timeline .timestamp-up:hover .timestamp-text { display: block; height: 80px; }*/ /*[2.18] ANIMATE TIMELINE TIMESTAMP UP LINE*/ /*main .main-timeline-container .timeline .timestamp-up:hover .vertical-line { left: 7rem; display: block; }*/ /*[2.19] TIMELINE TIMESTAMP UP TEXT*/ main .main-timeline-container .timeline .timestamp-up .timestamp-text h3 { font-size: 1.6rem; margin-bottom: 0; } /*[2.20] TIMELINE TIMESTAMP UP TEXT*/ main .main-timeline-container .timeline .timestamp-up .timestamp-text h4 { font-size: 0.9rem; } /*[2.21] TIMELINE TIMESTAMP UP TEXT*/ main .main-timeline-container .timeline .timestamp-up .timestamp-text h5 { font-size: 0.8rem; } /*[2.22] TIMELINE LEGEND*/ main .main-timeline-container .main-timeline-legend h4 { font-size: 1.1rem; margin-top: 10rem; } /*[2.23] TIMELINE ARROW*/ main .main-timeline-container .timeline i { transform: rotate(90deg) translate(-178px,-19px); } } /************************************************************************************END RESPONSIVE DESIGN - 1024px*/ /****************************************************************************************END SECTION 2 - MAIN - TIMELINE*/ /****************************************************************************************END SECTION 2 - MAIN - TIMELINE*/ /****************************************************************************************END SECTION 2 - MAIN - TIMELINE*/ /****************************************************************************************END SECTION 2 - MAIN - TIMELINE*/ /****************************************************************************************START SECTION 3 - MAIN - PHILOSOPHY*/ /****************************************************************************************START SECTION 3 - MAIN - PHILOSOPHY*/ /****************************************************************************************START SECTION 3 - MAIN - PHILOSOPHY*/ /****************************************************************************************START SECTION 3 - MAIN - PHILOSOPHY*/ /************************************************************************************START RESPONSIVE DESIGN - 1024px greater*/ @media (max-width: 1024px) { /*[3.1] SECTION CONTAINER*/ main .pholosophy-container { flex-direction: column; align-items: center; margin-top: 12rem; } /*[3.2] IMAGE CONTAINER*/ main .pholosophy-container .image-container { max-width: 80%; } /*[3.4] TEXT CONTAINER*/ main .pholosophy-container .text-container { max-width: 100%; padding-left: 4rem; padding-right: 4rem; margin-top: 2rem; } } /************************************************************************************END RESPONSIVE DESIGN - 1024px greater*/ /************************************************************************************START RESPONSIVE DESIGN - 1920px greater*/ @media (min-width: 1920px) { /*[3.5] TEXT HEADING*/ main .pholosophy-container .text-container h1 { font-size: clamp(1.4rem, 1.1429rem + 1.2857vw, 3.2rem); } /*[3.6] TEXT DETAIL*/ main .pholosophy-container .text-container p { font-size: clamp(1.2rem, 1.1571rem + 0.2143vw, 1.5rem); line-height: clamp(1.8rem, 1.6286rem + 0.8571vw, 3rem); } } /************************************************************************************END RESPONSIVE DESIGN - 1920px greater*/ /****************************************************************************************END SECTION 3 - MAIN - PHILOSOPHY*/ /****************************************************************************************END SECTION 3 - MAIN - PHILOSOPHY*/ /****************************************************************************************END SECTION 3 - MAIN - PHILOSOPHY*/ /****************************************************************************************END SECTION 3 - MAIN - PHILOSOPHY*/ /****************************************************************************************START SECTION 4 - MAIN - PHILOSOPHY CARDS*/ /****************************************************************************************START SECTION 4 - MAIN - PHILOSOPHY CARDS*/ /****************************************************************************************START SECTION 4 - MAIN - PHILOSOPHY CARDS*/ /****************************************************************************************START SECTION 4 - MAIN - PHILOSOPHY CARDS*/ /************************************************************************************START RESPONSIVE DESIGN - 1024px*/ @media (max-width: 1024px) { /*[4.1] SECTION CONTAINER*/ main .pholosophy-cards-container { max-width: 65vw; grid-column-gap: 3rem; grid-row-gap: 3rem; } /*[4.2] CARD*/ main .pholosophy-cards-container .pholosophy-card { padding-left: clamp(1rem, 0.8571rem + 0.7143vw, 2rem); padding-right: clamp(1rem, 0.8571rem + 0.7143vw, 2rem); padding-top: clamp(2rem, 1.8571rem + 0.7143vw, 3rem); padding-bottom: clamp(2rem, 1.8571rem + 0.7143vw, 3rem); } } /************************************************************************************END RESPONSIVE DESIGN - 1024px*/ /************************************************************************************START RESPONSIVE DESIGN - 768px*/ @media (max-width: 768px) { /*[4.1] SECTION CONTAINER*/ main .pholosophy-cards-container { max-width: 60vw; grid-template-columns: repeat(1, 1fr); grid-row-gap: 2rem; } /*[4.2] CARD*/ main .pholosophy-cards-container .pholosophy-card { padding-left: clamp(1rem, 0.8571rem + 0.7143vw, 2rem); padding-right: clamp(1rem, 0.8571rem + 0.7143vw, 2rem); padding-top: clamp(2rem, 1.8571rem + 0.7143vw, 3rem); padding-bottom: clamp(2rem, 1.8571rem + 0.7143vw, 3rem); } /*[4.3] CARD TEXT*/ main .pholosophy-cards-container .pholosophy-card h1 { font-size: clamp(0.9rem, 0.8571rem + 0.2143vw, 1.2rem); } } /************************************************************************************END RESPONSIVE DESIGN - 768px*/ /****************************************************************************************END SECTION 4 - MAIN - PHILOSOPHY CARDS*/ /****************************************************************************************END SECTION 4 - MAIN - PHILOSOPHY CARDS*/ /****************************************************************************************END SECTION 4 - MAIN - PHILOSOPHY CARDS*/ /****************************************************************************************END SECTION 4 - MAIN - PHILOSOPHY CARDS*/ /****************************************************************************************START SECTION 5 - MAIN - PROPOSITION*/ /****************************************************************************************START SECTION 5 - MAIN - PROPOSITION*/ /****************************************************************************************START SECTION 5 - MAIN - PROPOSITION*/ /****************************************************************************************START SECTION 5 - MAIN - PROPOSITION*/ /************************************************************************************START RESPONSIVE DESIGN - 768px*/ @media (max-width: 768px) { /*[5.1] SECTION CONTAINER*/ main .proposition-container { flex-direction: column-reverse; } /*[5.2] TEXT CONTAINER*/ main .proposition-container .text-container { width: 100%; } /*[5.3] TEXT*/ main .proposition-container .text-container h1 { font-size: clamp(0.9rem, 0.8rem + 0.5vw, 1.6rem); } /*[5.4] IMAGE CONTAINER*/ main .proposition-container .image-container { width: 100%; transform: translateX(-30%); margin-bottom: 2rem; } /*[5.5] IMAGE*/ main .proposition-container .image-container img { width: 150% } } /************************************************************************************END RESPONSIVE DESIGN - 768px*/ /****************************************************************************************END SECTION 5 - MAIN - PROPOSITION*/ /****************************************************************************************END SECTION 5 - MAIN - PROPOSITION*/ /****************************************************************************************END SECTION 5 - MAIN - PROPOSITION*/ /****************************************************************************************END SECTION 5 - MAIN - PROPOSITION*/ /****************************************************************************************START SECTION 6 - MAIN - CLIENT VALUE*/ /****************************************************************************************START SECTION 6 - MAIN - CLIENT VALUE*/ /****************************************************************************************START SECTION 6 - MAIN - CLIENT VALUE*/ /****************************************************************************************START SECTION 6 - MAIN - CLIENT VALUE*/ /************************************************************************************START RESPONSIVE DESIGN - 768px*/ @media (max-width: 768px) { /*[6.1] SECTION CONTAINER*/ main .client-value-container { max-width: 75vw; } /*[6.2] NORMAL TEXT*/ main .client-value-container h1 { font-size: clamp(1.1rem, 0.9714rem + 0.6429vw, 2rem); line-height: clamp(1.5rem, 1.3571rem + 0.7143vw, 2.5rem); } } /************************************************************************************END RESPONSIVE DESIGN - 768px*/ /****************************************************************************************END SECTION 6 - MAIN - CLIENT VALUE*/ /****************************************************************************************END SECTION 6 - MAIN - CLIENT VALUE*/ /****************************************************************************************END SECTION 6 - MAIN - CLIENT VALUE*/ /****************************************************************************************END SECTION 6 - MAIN - CLIENT VALUE*/ /****************************************************************************************START SECTION 7 - MAIN - MEET THE TEAM*/ /****************************************************************************************START SECTION 7 - MAIN - MEET THE TEAM*/ /****************************************************************************************START SECTION 7 - MAIN - MEET THE TEAM*/ /****************************************************************************************START SECTION 7 - MAIN - MEET THE TEAM*/ /************************************************************************************START RESPONSIVE DESIGN - 768px*/ @media (max-width: 768px) { .slick-prev { left: -40px; } .slick-next { right: -40px; } } /************************************************************************************END RESPONSIVE DESIGN - 768px*/ /****************************************************************************************END SECTION 7 - MAIN - MEET THE TEAM*/ /****************************************************************************************END SECTION 7 - MAIN - MEET THE TEAM*/ /****************************************************************************************END SECTION 7 - MAIN - MEET THE TEAM*/ /****************************************************************************************END SECTION 7 - MAIN - MEET THE TEAM*/ /****************************************************************************************START SECTION 8 - MAIN - ARRANGE A DEMO*/ /****************************************************************************************START SECTION 8 - MAIN - ARRANGE A DEMO*/ /****************************************************************************************START SECTION 8 - MAIN - ARRANGE A DEMO*/ /****************************************************************************************START SECTION 8 - MAIN - ARRANGE A DEMO*/ /************************************************************************************START RESPONSIVE DESIGN - 1024px*/ @media (max-width: 1024px) { /*[8.3] HIDE DEMO BUTTON ARROW*/ main .arrange-demo #btn-demo-main > i { visibility: hidden; transform: translateX(-.5rem); font-size: .8rem; } /*[8.5] SHOW DEMO BUTTON ARROW */ main .arrange-demo #btn-demo-main:hover > i { transform: translateX(.4rem); margin-left: .4rem; } } /************************************************************************************END RESPONSIVE DESIGN - 1024px*/ /****************************************************************************************END SECTION 8 - MAIN - ARRANGE A DEMO*/ /****************************************************************************************END SECTION 8 - MAIN - ARRANGE A DEMO*/ /****************************************************************************************END SECTION 8 - MAIN - ARRANGE A DEMO*/ /****************************************************************************************END SECTION 8 - MAIN - ARRANGE A DEMO*/ /****************************************************************************************START SECTION 8 - FOOTER*/ /****************************************************************************************START SECTION 8 - FOOTER*/ /****************************************************************************************START SECTION 8 - FOOTER*/ /****************************************************************************************START SECTION 8 - FOOTER*/ /************************************************************************************START RESPONSIVE DESIGN - GREATER 1920px*/ @media (min-width: 1920px) { /*[8.2] SPACE OUT EACH MENU LIST*/ .footer .list-container { width: 70%; } } /************************************************************************************END RESPONSIVE DESIGN - GREATER 1920px*/ /************************************************************************************START RESPONSIVE DESIGN - 1024px*/ @media (max-width: 1024px) { /*[8.2] SPACE OUT EACH MENU LIST*/ .footer .list-container { width: 92%; } } /************************************************************************************END RESPONSIVE DESIGN - 1024px*/ /************************************************************************************START RESPONSIVE DESIGN - 768px*/ @media (max-width: 768px) { /*[8.2] FOOTER LIST ITEMS SPACING*/ .footer .list-container { flex-direction: column; gap: 2rem; } /*[8.3] FOOTER LIST*/ .footer .list-container .list { line-height: 2rem; } /*[8.4] FOOTER LIST HEADING*/ /*.footer .list-container .list h3 { font-size: 1.6rem; font-weight: 600; }*/ /*[8.5] FOOTER LIST LINKS*/ /*.footer .list-container .list a { font-size: 1.12rem; }*/ /*[8.7] FOOTER LIST BLANK SPACE*/ .footer .list-container .list .blank-content { display: none; } /*[8.8] FOOTER LIST SOCIAL ICONS*/ .footer .list-container .list .social-icons i { margin-right: 2rem; font-size: 2rem; margin-top: 2rem; } /*[8.9] FOOTER LOGO*/ .footer .nav-logo { margin-bottom: .6rem; } /*[8.12] ANIMATE FOOTER NAV MENU ITEMS SOCIAL LINKS*/ .footer .list-container .list .social-icons i:hover, .footer .list-container .list .social-icons i:focus-within { transform: scale(1.2); } } /*Slider css added*/ .reset { overflow-x: hidden; height: 100%; margin: 0; padding: 0; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; margin: 0; padding: 0; height: 100%; font-size: 13px; text-align: center; background: #FFFFFF; } .team-section{ float: left; position: relative; padding: 30px 0; background: #FFFFFF; z-index: 1; width: 100%; } .swiper-container { width: 100%; height: 100%; } .listing-carousel-button{ position: absolute; top: 50%; width: 80px; height: 50px; line-height: 50px; margin-top: -25px; z-index: 100; cursor: pointer; background: #F26722; box-shadow: 0 9px 26px rgba(58, 87,135,0.45); transition: all 200ms linear; outline: none; } .listing-carousel-button.listing-carousel-button-next{ right: -30px; padding-right: 20px; border-radius: 60px 0 0 60px; } .listing-carousel-button.listing-carousel-button-prev{ left: -30px; padding-left: 20px; border-radius: 0 60px 60px 0; } .listing-carousel-button.listing-carousel-button-next:hover{ right: -15px; background: rgba(6,27,65,0.4); } .listing-carousel-button.listing-carousel-button-prev:hover{ left: -15px; background: rgba(6,27,65,0.4); } .testi-item { transition: all .3s ease-in-out; transform: scale(0.9); opacity: 0.3; } .testimonials-text { padding: 275px 50px 75px; overflow:hidden; background: #fcfcfd; border:1ps solid #f1f1f1; border-radius: 10px; transition: all .3s ease-in-out; } .testimonials-text-after{ font-style: normal; font-weight: normal; text-decoration: inherit; position: absolute; color: #ccc; font-size: 35px; transition: all 400ms linear; bottom: 25px; right: 30px; } .testimonials-text-before{ font-style: normal; font-weight: normal; text-decoration: inherit; position: absolute; color: #ccc; font-size: 35px; transition: all 400ms linear; top: 25px; left: 30px; } .testimonials-avatar h3{ font-weight: 600; color: #3A4A5B; font-size: 28px; } .testimonials-avatar h4{ font-weight:400; font-size:18px; padding-top:6px; color:#607B8B;; } .testimonials-carousel .swiper-slide{ padding: 30px 0; } .testi-avatar{ position: absolute; left: 31%; top: 30px; width: 90px; height: 90px; margin-left: -45px; z-index: 2; } .testi-avatar img{ width: 230px; height: 230px; float: left; clip-path: polygon(60% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%); } .swiper-slide-active .testimonials-text { background: #FFFFFF; } .swiper-slide-active .testi-item{ transform: scale(1.0); opacity: 1; z-index: 3; } .tc-pagination{ float: left; margin-top: 10px; width: 100% !important; margin-top: 30px; } .tc-pagination_wrap { position: absolute; bottom: -40px; left: 0; width: 100%; } .tc-pagination2{ float: none; display: inline-block; padding: 14px 0; background: #fff; border-radius: 30px; min-width: 250px; border-bottom: 0; } .tc-pagination .swiper-pagination-bullet, .tc-pagination2.swiper-pagination-bullet{ background: #F26722;; margin:0 2px; width: 10px; height: 10px; transition: all 300ms ease-in-out; display: inline-block; } /*Queries*/ @media (max-width: 1022px ) { .testi-avatar { left: 43%; } } @media (max-width: 790px ) { .testi-avatar { left: 42%; } } @media (max-width: 522px ) { .testi-avatar { left: 38%; } } @media (max-width: 390px ) { .testi-avatar { left: 34%; } .swiper-pagination-bullet { display: none; } } @media (max-width: 270px ) { .testi-avatar { left: 30%; } } @media (max-width: 230px ) { .testi-avatar { left: 23%; } } /************************************************************************************END RESPONSIVE DESIGN - 768px*/ /****************************************************************************************END SECTION 8 - FOOTER*/ /****************************************************************************************END SECTION 8 - FOOTER*/ /****************************************************************************************END SECTION 8 - FOOTER*/ /****************************************************************************************END SECTION 8 - FOOTER*/ /****************************************************************************************END RESPONSIVE DESIGN*/ /****************************************************************************************END RESPONSIVE DESIGN*/ /****************************************************************************************END RESPONSIVE DESIGN*/ /****************************************************************************************END RESPONSIVE DESIGN*/ /****************************************************************************************END RESPONSIVE DESIGN*/ /****************************************************************************************END RESPONSIVE DESIGN*/ /****************************************************************************************END RESPONSIVE DESIGN*/ /****************************************************************************************END RESPONSIVE DESIGN*/ /****************************************************************************************END RESPONSIVE DESIGN*/ /*WEBSITE BUILD AND POWERED BY Krishan.Naidoo912@gmail.com and Mark.Davies@uon.global - March 2022*/ /* Back to top button css */ #back-to-top-btn { display: none; position: fixed; bottom: 20px; right: 20px; font-size: 26px; width: 50px; height: 50px; background-color: #fff; color: #F26722; cursor: pointer; outline: none; border: 3px solid #F26722; border-radius: 50%; transition-duration: 0.2s; transition-timing-function: ease-in-out; transition-property: background-color, color; z-index: 99; } #back-to-top-btn:hover, #back-to-top-btn:focus { background-color: #F26722; color: #fff; } @media(max-width: 992px) { .container { padding: 20px 100px; } #back-to-top-btn { font-size: 22px; width: 40px; height: 40px; bottom: 15px; right: 15px; } } @media(max-width:768px) { body { font-size: 16px; } .container { padding: 10px 50px; } h1 { font-size: 26px; } h2 { font-size: 22px; } hr { margin: 30px 0; } #back-to-top-btn { font-size: 18px; width: 32px; height: 32px; bottom: 6px; right: 6px; } } /* Animations */ .btnEntrance { animation-duration: 0.5s; animation-fill-mode: both; animation-name: btnEntrance; } /* fadeInUp */ @keyframes btnEntrance { from { opacity: 0; transform: translate3d(0, 100%, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } } .btnExit { animation-duration: 0.25s; animation-fill-mode: both; animation-name: btnExit; } /* fadeOutDown */ @keyframes btnExit { from { opacity: 1; } to { opacity: 0; transform: translate3d(0, 100%, 0); } } .hero { position: relative; width: 100vw; height: 60vh; } .hero::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url(../elements/HeroImage.png); background-repeat: no-repeat; background-size: cover; background-position: center center; filter: brightness(100%); /* elements/About Page/Group 305.png" */ } .hero-content { position: relative; } .TimeLine-Heading h1{ max-width: 92vw; margin: 0 auto; margin-top: 3rem; margin-bottom: 1rem; text-align: center; color: var(--color-text-3); font-size: 2rem; font-weight: 700; /* line-height: clamp(1.5rem, 1.3571rem + 0.7143vw, 2.5rem); */ }