@font-face { font-family: 'Host Grotesk'; src: url('../fonts/HostGrotesk-Regular.woff2') format('woff2'), url('../fonts/HostGrotesk-Regular.woff') format('woff'), url('../fonts/HostGrotesk-Regular.ttf') format('truetype'), url('../fonts/HostGrotesk-Regular.svg#HostGrotesk-Regular') format('svg'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Host Grotesk'; src: url('../fonts/HostGrotesk-Bold.woff2') format('woff2'), url('../fonts/HostGrotesk-Bold.woff') format('woff'), url('../fonts/HostGrotesk-Bold.ttf') format('truetype'), url('../fonts/HostGrotesk-Bold.svg#HostGrotesk-Bold') format('svg'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Host Grotesk'; src: url('../fonts/HostGrotesk-ExtraBold.woff2') format('woff2'), url('../fonts/HostGrotesk-ExtraBold.woff') format('woff'), url('../fonts/HostGrotesk-ExtraBold.ttf') format('truetype'), url('../fonts/HostGrotesk-ExtraBold.svg#HostGrotesk-ExtraBold') format('svg'); font-weight: 800; font-style: normal; font-display: swap; } @font-face { font-family: 'Bricolage Grotesque 96pt'; src: url('../fonts/BricolageGrotesque-96ptExtraBold.woff2') format('woff2'), url('../fonts/BricolageGrotesque-96ptExtraBold.woff') format('woff'), url('../fonts/BricolageGrotesque-96ptExtraBold.ttf') format('truetype'), url('../fonts/BricolageGrotesque-96ptExtraBold.svg#BricolageGrotesque-96ptExtraBold') format('svg'); font-weight: bold; font-style: normal; font-display: swap; } /************************************************** BASIC STYLES **************************************************/ html, body { max-width: 100%; overflow-x: hidden; } /* Reset */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; line-height: 1.6; color: #333; background: #fff; margin: 0; padding: 0; font-family: 'Host Grotesk'!important; font-weight: 400; font-size: 1.2vw; line-height: 1.3vw; overflow-x: hidden; } p { margin: 0px; padding: 0px; font-weight: 400; color: #000; font-size: 1.2vw; line-height: 1.3vw; font-family: 'Host Grotesk'!important; } h1, h2, h3, h4 { font-weight: 800; margin: 0px; padding: 0px; font-family: 'Host Grotesk'!important; } a { text-decoration: none; color: #0066ff; } a, a:hover, a:focus { text-decoration: none; } ul, ol, li { list-style: none; margin: 0; padding: 0; margin-bottom: 0 !important; } figure { margin: 0; } img { max-width: 100%; } .auto-container { width: 90%; margin: 0 auto; padding: 0; } .equalHeight .owl-stage{ display:-ms-flexbox; display:-webkit-box; display:flex; -ms-flex-wrap:wrap; flex-wrap:wrap } .equalHeight .owl-stage .item{ height:100%; -ms-flex-wrap:wrap; flex-wrap:wrap; } /**********************************************/ /***************** OWL SLIDER START *********/ .owl-nav button { overflow: hidden; } .owl-nav{ position: absolute; top: 45%; width: 100%; font-size: 30px; color: #001aa4; } .owl-prev{ left: -2%; position: absolute; top: 0; z-index: 999; } .owl-next{ right: -3%; position: absolute; } /* Icon inside */ .owl-nav button i { position: relative; transition: all 0.3s ease; } /* Duplicate arrow base */ .owl-nav button::before { font-family: "Font Awesome 7 Free"; font-weight: 900; position: absolute; top: 50%; transform: translateY(-50%); opacity: 0; transition: all 0.3s ease; } .owl-prev::before { content: "\f053"; /* left icon */ left: -20px; } .owl-prev:hover::before { left: 15px; opacity: 1; } .owl-prev:hover i { transform: translateX(10px); opacity: 0; } .owl-next::before { content: "\f054"; /* right icon */ right: -20px; } .owl-next:hover::before { right: 15px; opacity: 1; } .owl-next:hover i { transform: translateX(-10px); opacity: 0; } /* .swiper-button-next::after, .swiper-button-prev::after { display: none; } */ .swiper-button-next, .swiper-button-prev { width: 40px; height: 40px; color: #000; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #fff; border-radius: 50%; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15); transition: all 0.3s ease; } .swiper-button-next i, .swiper-button-prev i { font-size: 14px; } /************************************************** SECTION TITLES **************************************************/ .sectionheading { position: relative; width: 100%; margin: 0 auto; padding-bottom: 2vw; } .sectionheading h2 { color: #000; font-weight: 800; text-align: center; text-transform: uppercase; font-size: 2.7vw; line-height: 3.2vw; font-family: 'Host Grotesk'!important; } .sectionheading h2.textwhite{ color:#fff; } .sectionheading h2 span{ background: linear-gradient(to right, #03bdd6, #0041b9); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .sectionheading p{ color: #000; font-family: 'Host Grotesk'!important; } /************************************************** CTA Buttons **************************************************/ /***Button Style 1 ****/ .buttonWrap { --h: clamp(44px, 2vw, 60px); display: inline-block; padding: calc(var(--h) * 0.08); border-radius: 999px; background: rgb(188 191 194 / 20%); } .themebtn-01 { height: var(--h); min-width: calc(var(--h) * 4); display: flex; align-items: center; justify-content: space-between; padding-left: calc(var(--h) * 0.65); padding-right: calc(var(--h) * 0.1); background: #C9FF00; border-radius: 999px; border: none; cursor: pointer; transition: all 0.3s ease; } .themebtn-01 .cta-text { font-size: calc(var(--h) * 0.325); font-weight: 600; color: #000; line-height: 1; white-space: nowrap; margin-right: calc(var(--h) * 0.6); text-transform: uppercase; transition: color 0.3s ease; } .themebtn-01 .cta-right { display: flex; align-items: center; gap: 0; } .themebtn-01 .cta-line { width: 1px; height: calc(var(--h) * 0.5); } .themebtn-01 .cta-circle { width: calc(var(--h) * 0.85); height: calc(var(--h) * 0.85); border-radius: 50%; background: #000; display: flex; align-items: center; justify-content: center; transition: background 0.3s ease; } .themebtn-01 .cta-circle svg { width: calc(var(--h) * 0.48); height: calc(var(--h) * 0.48); transform-origin: center; transition: transform 0.3s ease; } .themebtn-01 .cta-circle svg path { fill: #fff; stroke: #fff; transition: fill 0.3s ease, stroke 0.3s ease; } .buttonWrap:hover .themebtn-01 { transform: translateY(-2px); background: #fff; box-shadow: 0 8px 20px rgba(0,0,0,0.3); } .buttonWrap:hover .themebtn-01 .cta-text { color: #000; } .buttonWrap:hover .themebtn-01 .cta-circle { background: #C9FF00; } .buttonWrap:hover .themebtn-01 .cta-circle svg { transform: rotate(-90deg); } .buttonWrap:hover .themebtn-01 .cta-circle svg path { fill: #000; stroke: #000; } .themebtn-01:active { transform: translateY(1px) scale(0.98); box-shadow: 0 4px 10px rgba(0,0,0,0.2); } .themebtn-01.bluebtn01{ background: #17b9c0; } .themebtn-01.bluebtn01 .cta-text{ color:#fff; } /** Button Style 2 **/ .buttonWrap-02 { --h: clamp(44px, 2vw, 60px); display: inline-flex; align-items: center; gap: calc(var(--h) * 0.1); } .themebtn-02 { height: var(--h); padding: 0 calc(var(--h) * 0.8); display: flex; align-items: center; justify-content: center; background: #C9FF00; border-radius: 999px; border: none; cursor: pointer; transition: transform 0.2s ease, box-shadow 0.2s ease; } .themebtn-02 .btn-label { font-size: calc(var(--h) * 0.325); font-weight: 600; color: #000; text-transform: uppercase; white-space: nowrap; } .buttonWrap-02 .btn-icon { width: var(--h); height: var(--h); display: flex; align-items: center; justify-content: center; background: #C9FF00; border-radius: 50%; cursor: pointer; transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1); } .buttonWrap-02 .btn-icon svg { width: calc(var(--h) * 0.45); height: calc(var(--h) * 0.45); transform-origin: center; transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1); } .buttonWrap-02 .btn-icon svg path{ stroke: #000; } .buttonWrap-02:hover .btn-icon { transform: translateX(5px); } .buttonWrap-02:hover .btn-icon svg { transform: rotate(-45deg); } .themebtn-02:active, .buttonWrap-02 .btn-icon:active { transform: translateY(1px) scale(0.98); } .bluebtn02 .themebtn-02{ background: #17b9c0; } .bluebtn02 .btn-label{ color: #fff; } .buttonWrap-02.bluebtn02 .btn-icon{ background: #17b9c0; } .buttonWrap-02.bluebtn02 .btn-icon svg path{ stroke: #fff; } /******** Button Style 3 ***********/ .themebtn03 { --h: clamp(44px, 2vw, 60px); /* 👈add this */ display: inline-flex; align-items: center; justify-content: center; padding: 8px 30px; cursor: pointer; transition: all 0.3s ease; position: relative; z-index: 11; text-transform: capitalize; text-align: center; border-radius: 999px; min-width: calc(var(--h) * 2.5); height: var(--h); background: #000; color: #fff; font-weight: 600; text-transform: uppercase; font-size: calc(var(--h) * 0.325); /* ✅ now works */ line-height: 1; box-shadow: 0 4px 12px rgba(0,0,0,0.08); } .themebtn03.whitebtn03{ background: #fff; color: #000; border: 1px solid rgba(0,0,0,0.08); box-shadow: 0 4px 12px rgba(0,0,0,0.08); } .themebtn03.bluebtn03{ background: #17b9c0; color: #fff; box-shadow: 0 4px 10px rgba(0,0,0,0.10); box-shadow: 0 3px 8px rgba(0,0,0,0.08); } .themebtn03.greenbtn03{ background: #C9FF00; color: #000; } .themebtn03 { overflow: hidden; } /* LIGHT SWEEP */ .themebtn03::before { content: ""; position: absolute; top: 0; left: -120%; width: 100%; height: 100%; background: linear-gradient( 120deg, transparent, rgba(255,255,255,0.5), transparent ); transition: all 0.6s ease; } /* animate */ .themebtn03:hover::before { left: 120%; } /************* Dropdown Style ********************/ .dropdownWrap { position: relative; display: inline-block; /* z-index: 999; */ } .dropdownWrap .themebtn03 { --h: clamp(44px, 2vw, 60px); display: inline-flex; align-items: center; justify-content: center; height: var(--h); padding-left: calc(var(--h) * 0.6); padding-right: calc(var(--h) * 0.6); gap: calc(var(--h) * 0.28); border-radius: 999px; border: none !important; cursor: pointer; font-size: calc(var(--h) * 0.32); font-weight: 600; text-transform: uppercase; line-height: 1; transition: all 0.3s ease; } .dropdownWrap .btn-text { letter-spacing: 0.5px; } .dropdownWrap .btn-arrow { width: 0; height: 0; border-left: calc(var(--h) * 0.12) solid transparent; border-right: calc(var(--h) * 0.12) solid transparent; border-top: calc(var(--h) * 0.14) solid currentColor; margin-left: 14px; transform: translateY(1px); transition: transform 0.3s ease; } .themebtn03:hover .btn-arrow { transform: translateY(2px); } .dropdownWrap.active .btn-arrow { transform: rotate(180deg); } .dropdownMenu { position: absolute; top: 110%; left: 0; min-width: 200px; padding: 10px 5px; background: #fff; border-radius: 12px; border: none !important; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.12); opacity: 0; visibility: hidden; transform: translateY(10px); pointer-events: none; transition: all 0.3s ease; z-index: 9999; } .dropdownWrap.active .dropdownMenu { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; } .dropdownMenu a { display: block; padding: 10px 5px; border-radius: 8px; color: #000; text-decoration: none; font-size: 0.9vw; line-height: 1.2vw; transition: background 0.2s ease; font-weight: 600; text-transform: uppercase; text-align: left; } .dropdownMenu a:hover { /* background: rgba(0, 0, 0, 0.05); */ background: rgb(199 253 0); } .dropdownMenu::before { content: ""; position: absolute; top: -6px; left: 20px; width: 12px; height: 12px; background: #fff; transform: rotate(45deg); box-shadow: -2px -2px 6px rgba(0, 0, 0, 0.05); } /************************************************** STICKY SOCIAL **************************************************/ .socialSticky { position: fixed; left: 0; top: 50%; width: 42px; z-index: 99999; display: block; transform: translateY(-10%); -webkit-transform: translateY(-10%); -moz-transform: translateY(-10%); -ms-transform: translateY(-10%); -o-transform: translateY(-10%); } .socialSticky ul { position: relative; z-index: 99; margin: 0; padding: 0; list-style: none; background: #001aa4; border-radius: 0px 10px 10px 0px; -webkit-border-radius: 0px 10px 10px 0px; -moz-border-radius: 10px 0 0 10px; -ms-border-radius: 10px 0 0 10px; -o-border-radius: 10px 0 0 10px; background-image: linear-gradient(to top, #001ba4 0%, #0027aa 100%); } .socialSticky ul li { padding: 6px 6px; border-bottom: #0085b8 solid 0px; } .socialSticky ul li a { position: relative; display: block; width: 30px; height: 30px; color: #fff; font-size: 18px; line-height: 1.5; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; text-decoration: none; transition: 0.3s; -webkit-transition: 0.3s; -moz-transition: 0.3s; -ms-transition: 0.3s; -o-transition: 0.3s; } .socialSticky ul li a { transition: all 0.3s ease; } .socialSticky ul li a:hover { transform: translateX(4px) scale(1.08); } @media only screen and (min-width: 320px) and (max-width: 768px) { .socialSticky{ display: none; } } /************************************************** HEADER STYLE **************************************************/ .main-header{ position: absolute; width: 100%; top: 0; left: 0; padding: 10px 0px; z-index: 1000; } .main-header.fixed{ position: fixed; top: 0; left: 0; width: 100%; z-index: 99999; background: #fff; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); } .main-header .auto-container { display: flex; align-items: center; justify-content: space-between; } .logo { flex: 0 0 auto; width: 45vw; } .fixedlogo{ display: none; } .main-header.fixed .fixedlogo{ display: flex; width: 65%; } .main-header.fixed .staticlogo{ display: none; } .main-header .dropdownWrap .themebtn03{ display: inline-flex; align-items: center; justify-content: space-between; color: #000 !important; font-weight: 600; font-size: 0.98125vw; line-height: 1vw; padding: 8px 20px 8px 20px; border-radius: 23px; -moz-border-radius: 23px; -webkit-border-radius: 23px; min-width: 8vw; height: 2.395833vw; cursor: pointer; transition: all 0.3s ease; position: relative; z-index: 11; text-transform: capitalize; border-radius: 999px; border: none; text-transform: uppercase; gap: calc(var(--h) * 0.3); } .main-header .themebtn03{ display: inline-flex; align-items: center; justify-content: space-between; font-weight: 600; font-size: 0.98125vw; line-height: 1vw; padding: 8px 20px 8px 20px; border-radius: 23px; -moz-border-radius: 23px; -webkit-border-radius: 23px; min-width: 8vw; height: 2.395833vw; cursor: pointer; transition: all 0.3s ease; position: relative; z-index: 11; text-transform: capitalize; border-radius: 999px; border: none; text-transform: uppercase; gap: calc(var(--h) * 0.3); } .main-header .dropdownWrap .btn-arrow{ border-left: calc(var(--h) * 0.14) solid transparent; border-right: calc(var(--h) * 0.14) solid transparent; border-top: calc(var(--h) * 0.16) solid currentColor; font-weight: 900; margin-left: 0; } /************* Header **********************/ .main-header { position: absolute; width: 100%; top: 0; left: 0; padding: 10px 0px; z-index: 1000; } .main-header .auto-container { display: flex; align-items: center; justify-content: space-between; } /* Logo left */ .logo { flex: 0 0 auto; width: 45vw; } .main-header.fixed .logo { flex: 0 0 auto; width: 41vw; padding: 10px 0px; } .headerbtnwrap { display: flex; align-items: center; gap: 20px; } .inner-main-btns { display: flex; align-items: center; gap: 15px; } /* #menu-container { display: flex; align-items: center; } */ .stripmenu { width: 30px; cursor: pointer; } .stripmenu div { height: 3px; background: #000; margin: 6px 0; transition: 0.3s ease; } .main-header.fixed .stripmenu div{ background: #000!important; } @media (max-width: 768px) { .main-header{ padding: 10px 0px; } .inner-main-btns { gap: 10px; } .logo img { max-height: 45px; } } /* Hover effect */ .transparent-btn2:hover { background: #ccff00; border-color: #ccff00; } /* Arrow icon */ .transparent-btn2::after { content: "\f078"; /* chevron-down */ font-family: "Font Awesome 7 Free"; /* ✅ updated */ font-weight: 900; border: none; margin-left: 5px; transition: transform 0.3s ease; } /* Rotate arrow when open */ .dropdown.show .transparent-btn2::after { transform: rotate(180deg); } /* Dropdown menu */ .dropdown-menu { border: none; border-radius: 16px; padding: 10px; margin-top: 10px; box-shadow: 0px 10px 40px rgba(0, 0, 0, 0.1); min-width: 260px; animation: fadeIn 0.3s ease; } /* Dropdown items */ .dropdown-item { border-radius: 10px; padding: 10px 14px; font-size: 14px; transition: all 0.2s ease; } /* Hover item */ .dropdown-item:hover { background: #f5f5f5; padding-left: 18px; } /* Smooth animation */ @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /************ Menu ************************/ #hamburger-menu { color: rgb(255, 255, 255); position: relative; font-size: 18px; font-weight: 400; cursor: pointer; top: 0px; direction: rtl; margin: 15px; font-size: 15px; margin: 11px; } .stripmenu div { width: 2.1875rem; height: 3px; margin: 4px 0px; background: rgb(255, 255, 255); transition: 0.55s cubic-bezier(0.075, 0.82, 0.165, 1); border-radius: 2px; } .stripmenu div:first-child { width: 2.1875rem; } .stripmenu div { width: 2.1875rem; height: 3px; margin: 4px 0px; background: rgb(255, 255, 255); transition: 0.55s cubic-bezier(0.075, 0.82, 0.165, 1); border-radius: 2px; margin-bottom: 9px; } .stripmenu div:last-child { width: 2.725rem; } .stripmenu { width: 35px; cursor: pointer; } .stripmenu div { width: 100%; height: 3px; margin: 6px 0; background: #fff; border-radius: 2px; transition: 0.4s ease; } /* Make last line slightly longer (optional design) */ .stripmenu div:last-child { width: 120%; } /* ========================= OPEN STATE (CROSS) ========================= */ .stripmenu.open.active div:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); } .stripmenu.open.active div:nth-child(2) { opacity: 0; } .stripmenu.open.active div:nth-child(3) { width: 100%; /* normalize width for symmetry */ transform: rotate(-45deg) translate(6px, -6px); } #menu-wrapper { overflow: hidden; max-width: 100%; cursor: pointer } #menu-wrapper #hamburger-menu { position: relative; color: #000000; font-weight: 500; letter-spacing: 0.05rem; } #menu-wrapper #hamburger-menu i, #menu-wrapper #hamburger-menu em { margin-left: 5px } #menu-wrapper #hamburger-menu span { opacity: 1; left: 0; display: block; width: 100%; height: 2px; border-radius: 10px; color: #000000; background-color: #000000; position: absolute; transform: rotate(0); transition: 0.4s ease-in-out; -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0); -webkit-transition: 0.4s ease-in-out; -moz-transition: 0.4s ease-in-out; -ms-transition: 0.4s ease-in-out; -o-transition: 0.4s ease-in-out; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; } #menu-wrapper #hamburger-menu span:nth-child(1) { top: 0 } #menu-wrapper #hamburger-menu span:nth-child(2) { top: 9px } #menu-wrapper #hamburger-menu span:nth-child(3) { top: 18px } #menu-wrapper #hamburger-menu.open span:nth-child(1) { transform: translateY(9px) rotate(135deg); -webkit-transform: translateY(9px) rotate(135deg); -moz-transform: translateY(9px) rotate(135deg); -ms-transform: translateY(9px) rotate(135deg); -o-transform: translateY(9px) rotate(135deg) } #menu-wrapper #hamburger-menu.open span:nth-child(2) { opacity: 0; transform: translateX(-60px); -webkit-transform: translateX(-60px); -moz-transform: translateX(-60px); -ms-transform: translateX(-60px); -o-transform: translateX(-60px) } #menu-wrapper #hamburger-menu.open span:nth-child(3) { transform: translateY(-9px) rotate(-135deg); -webkit-transform: translateY(-9px) rotate(-135deg); -moz-transform: translateY(-9px) rotate(-135deg); -ms-transform: translateY(-9px) rotate(-135deg); -o-transform: translateY(-9px) rotate(-135deg) } #menu-container .menu-list .menu-submenu { padding-top: 0; padding-bottom: 10px } #menu-container .menu-list { padding-left: 0; display: block; position: absolute; right: -100%; display: none; width: 100%; max-width: 20vw; z-index: 999; overflow-y: auto; overflow-x: hidden; background-color: #fff; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); border-radius: 12px; padding: 10px; } #menu-container .menu-list.active { display: block; background: #000; } #menu-container .menu-list .menu-login, #menu-container .menu-list li.accordion-toggle { font-size: 16px; padding: 20px 10px; text-transform: uppercase; border-top: 1px solid rgba(185, 7, 7, 0.4); padding-left: 20px } #menu-container .menu-list li.accordion-toggle a { color: #fff; } #menu-container .menu-list li.accordion-toggle span { color: #fff; } #menu-container .menu-list li:first-of-type { border-top: 0 } #menu-container .menu-list li { color: #fff; padding: 3px 5px } #menu-container .menu-list li a { color: #ffffff; text-transform: uppercase; transition: all .4s; -webkit-transition: all .4s; -moz-transition: all .4s; -ms-transition: all .4s; -o-transition: all .4s; } #menu-container .menu-list li a:hover { color: #fff; padding-left: 15px } .accordion-content, .accordion-toggle { cursor: pointer; font-size: 16px; position: relative; letter-spacing: 1px } .accordion-content { display: none } .accordion-toggle a:after, .accordion-toggle a:before { content: ''; display: block; position: absolute; top: 50%; right: 30px; width: 15px; height: 2px; margin-top: -1px; background-color: #5a5858; -webkit-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; transform-origin: 50% 50%; transition: all .3s ease-out; -webkit-transition: all .3s ease-out; -moz-transition: all .3s ease-out; -ms-transition: all .3s ease-out; -o-transition: all .3s ease-out } .accordion-toggle a:before { transform: rotate(-90deg); opacity: 1; z-index: 2; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); -ms-transform: rotate(-90deg); -o-transform: rotate(-90deg) } .accordion-toggle.active-tab { background: #000; transition: all .3s ease; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; -ms-transition: all .3s ease; -o-transition: all .3s ease } .accordion-toggle a.active:before { transform: rotate(0); background: #000 !important; -webkit-transform: rotate(0); -moz-transform: rotate(0); -ms-transform: rotate(0); -o-transform: rotate(0) } .accordion-toggle a.active:after { transform: rotate(180deg); background: #000 !important; opacity: 0; -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -ms-transform: rotate(180deg); -o-transform: rotate(180deg) } #leftside-navigation ul { margin: 0; padding: 0; display: inline-block; width: 100% } #leftside-navigation ul li { display: block; width: 100%; list-style-type: none; border-bottom: 1px solid rgba(255, 255, 255, .1) } #menu-container .menu-list li a.headmenu:hover{ /* border-bottom: #0015a0 solid 1px; */ border-bottom: #01a4b9 solid 2px !important; border-radius: 10px; background: #f2f2f2; background: linear-gradient(to right, #03bdd6, #0041b9); } #menu-container .menu-list li.parent.open a.headmenu{ border-bottom: #01a4b9 solid 2px !important; border-radius: 10px; background: #f2f2f2; background: linear-gradient(to right, #03bdd6, #0041b9); font-weight: 600; } #menu-container .menu-list li ul li.parent a.headmenu2:hover{ background: #01a4b9; color: #fff !important; border-radius: 10px; } #menu-container .menu-list li ul li.parent.open a.headmenu2{ background: #01a4b9; color: #fff !important; border-radius: 10px; } #leftside-navigation ul li.open>a { padding: 10px 60px 10px 15px; margin-bottom: 10px; margin-top: 10px; width: 97%; margin: 0 auto; } #leftside-navigation ul li.open>a>i, #leftside-navigation ul li.open>a>em { transform: rotate(90deg); -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); -ms-transform: rotate(90deg); -o-transform: rotate(90deg) } #leftside-navigation ul li.open>a>i:not(:hover), #leftside-navigation ul li.open>a>em:not(:hover) { color: #fff; } #leftside-navigation ul li a { position: relative; display: block; font-size: 0.9vw; line-height: 1vw; font-weight: 600; text-decoration: none; color: #fff; text-transform: uppercase; width: 100%; padding: 12px 0; padding-right: 30px; -webkit-box-sizing: border-box; box-sizing: border-box; outline: 0; border-radius: 0.225rem; -webkit-border-radius: 0.225rem; -moz-border-radius: 0.225rem; -ms-border-radius: 0.225rem; -o-border-radius: 0.225rem; } #leftside-navigation ul li a span { display: inline-block } #leftside-navigation ul li a i, #leftside-navigation ul li a em { top: 0; right: 0; width: 50px; height: 50px; line-height: 50px; text-align: center; display: block; position: absolute; -ms-touch-action: manipulation; touch-action: manipulation } #leftside-navigation ul li a i:hover, #leftside-navigation ul li a em:hover { color: #fff; } #leftside-navigation ul li a i .fa-angle-left, #leftside-navigation ul li a i .fa-angle-right, #leftside-navigation ul li a em .fa-angle-left, #leftside-navigation ul li a em .fa-angle-right { padding-top: 3px } #leftside-navigation ul ul { display: none } #leftside-navigation ul ul ul { background-color: unset !important } #leftside-navigation ul ul li { border-bottom: none } #leftside-navigation ul ul li a { text-decoration: none; border-bottom: 1px solid rgba(0, 0, 0, 0.08); font-weight: 400; font-size: 0.8vw; line-height: 1vw; padding: 5px; } #leftside-navigation ul ul li a i, #leftside-navigation ul ul li a em { top: 0; right: 0; width: 20px; height: 100%; line-height: 34px; text-align: center; display: -webkit-box; display: -ms-flexbox; display: flex; position: absolute; -ms-touch-action: manipulation; touch-action: manipulation; -webkit-box-align: center; -ms-flex-align: center; align-items: center } #leftside-navigation li.parent ul.level-1 { max-height: 19.625rem; overflow-x: auto; margin: 10px 0px; box-shadow: 0 0 40px 5px rgb(0 0 0 / 7%); padding: 10px; border-radius: 10px; background: linear-gradient(to right, #068b9d, #015abf); } #leftside-navigation li.parent ul.level-1::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); background-color: #F5F5F5; } #leftside-navigation li.parent ul.level-1::-webkit-scrollbar { width: 0.5rem; background-color: #F5F5F5; } #leftside-navigation li.parent ul.level-1::-webkit-scrollbar-thumb { background-color: #000000; border: 2px solid #555555; } .menu-list .navfooter { padding-top: 0; padding-bottom: 0; background: -o-linear-gradient(to right, #03bdd6, #0041b9); background: linear-gradient(to right, #03bdd6, #0041b9); } .menu-list .soc-media { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; gap: 0.15rem; margin: 0; padding: 0 0.425rem; } .menu-list .soc-media li { padding: 4px 4px !important; display: inline-block; } .menu-list .soc-media a { font-size: 1.25rem; color: rgba(255, 255, 255, .65); transition: 0.4s ease-in; padding: 0 !important; -webkit-transition: 0.4s ease-in; -moz-transition: 0.4s ease-in; -ms-transition: 0.4s ease-in; -o-transition: 0.4s ease-in; } #menu-wrapper #hamburger-menu.blackborderbtn { padding-left: 1.425rem; padding-right: 3.15rem; } #menu-wrapper #hamburger-menu.blackborderbtn .down-arrow { position: absolute; right: 1rem; width: 1.625rem; height: 1.625rem; background: #0900AF; border-color: #0900AF; background: -o-linear-gradient(top, #6d3080 10%, #140fb5 100%); background: -o-linear-gradient(left, #6d3080 10%, #140fb5 100%); background: -webkit-gradient(linear, left top, right top, color-stop(10%, #6d3080), to(#140fb5)); background: linear-gradient(90deg, #6d3080 10%, #140fb5 100%); border-radius: 5rem; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; transition: 0.4s; -webkit-border-radius: 5rem; -moz-border-radius: 5rem; -ms-border-radius: 5rem; -o-border-radius: 5rem; -webkit-transition: 0.4s; -moz-transition: 0.4s; -ms-transition: 0.4s; -o-transition: 0.4s; } #menu-wrapper #hamburger-menu.blackborderbtn .down-arrow::after { content: ""; border-top: 0.625rem solid #fff; border-left: 0.375rem solid transparent; border-right: 0.375rem solid transparent; position: absolute; } #menu-wrapper #hamburger-menu.blackborderbtn.open { background: #0900AF; border-color: #0900AF; background: -o-linear-gradient(top, #6d3080 10%, #140fb5 100%); background: -o-linear-gradient(left, #6d3080 10%, #140fb5 100%); background: -webkit-gradient(linear, left top, right top, color-stop(10%, #6d3080), to(#140fb5)); background: linear-gradient(90deg, #6d3080 10%, #140fb5 100%); } #menu-wrapper #hamburger-menu.blackborderbtn:hover, #menu-wrapper #hamburger-menu.blackborderbtn.open { color: #FFFFFF; } #menu-wrapper #hamburger-menu.blackborderbtn:hover .down-arrow, #menu-wrapper #hamburger-menu.blackborderbtn.open .down-arrow { background: #FFFFFF; } #menu-wrapper #hamburger-menu.blackborderbtn:hover .down-arrow::after, #menu-wrapper #hamburger-menu.blackborderbtn.open .down-arrow::after { border-top-color: #0900AF; } .menu-list .soc-media li a { border: 2px solid transparent; width: 2rem; height: 2rem; font-size: 1.125rem; padding: 2px !important; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; border-radius: 5rem; transition: 0.3s; -webkit-border-radius: 5rem; -moz-border-radius: 5rem; -ms-border-radius: 5rem; -o-border-radius: 5rem; -webkit-transition: 0.3s; -moz-transition: 0.3s; -ms-transition: 0.3s; -o-transition: 0.3s; } .menu-list .soc-media li a:hover { border-color: #FFFFFF; transform: scale(1.1); -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); } @media only screen and (min-width: 320px) and (max-width: 768px) { .mobile-menu-right { display: inline-flex !important; } .mobile-menu-right .navbar-toggler { border: #000000 solid 1px; outline: none; box-shadow: none; position: absolute; top: 1.425rem; right: 12px; } .mobile-menu-right .navbar-toggler span { display: -webkit-box; display: -ms-flexbox; display: flex; width: 20px; height: 2px; margin: 6px 5px; margin-right: auto; -webkit-transition: all .5s ease-in-out; -o-transition: all .5s ease-in-out; transition: all .5s ease-in-out; border-radius: 45px; background-color: #000000; -moz-transition: all .5s ease-in-out; -ms-transition: all .5s ease-in-out; -webkit-border-radius: 45px; -moz-border-radius: 45px; -ms-border-radius: 45px; -o-border-radius: 45px; } .mobile-menu-right .navbar-toggler span:nth-child(1) { width: 14px; } .mobile-menu-right .navbar-toggler span:nth-child(3) { width: 26px; } .header-top-action { justify-content: center; } .header0 .nav-menu { position: static; top: 1rem; right: 0; width: 100%; flex-wrap: wrap; } .header-top-action a.blackborderbtn { font-size: 14px; padding: 3px 10px; } body .header0{position: sticky;} .header0 .navbar-brand { position: absolute; top: 3px; } #menu-container .menu-list { padding-top: 1rem; } #menu-wrapper #hamburger-menu.blackborderbtn .down-arrow { right: 0.625rem; width: 1.325rem; height: 1.325rem; } #menu-wrapper #hamburger-menu.blackborderbtn { padding-left: 1.125rem; padding-right: 2.425rem; } #leftside-navigation ul li a{ padding: 10px 60px 10px 10px; font-size: 12px; line-height: 15px; } #leftside-navigation ul li a i, #leftside-navigation ul li a em { top: -8px; } #leftside-navigation ul ul li a { font-size: 12px; } } /* Default arrow */ #leftside-navigation .parent > a i { transition: 0.3s ease; } /* Rotate when open */ #leftside-navigation .parent.open > a i { transform: rotate(90deg); } #leftside-navigation ul ul ul{ padding-top: 5px; } #leftside-navigation ul .level-1 li.parent.open a.headmenu2 .fa{ margin-right: 10px; display: flex; align-items: center; justify-content: center; color: #fff!important; } ul.level-2 { box-shadow: rgba(0, 0, 0, 0.07) 0px 0px 40px 5px; margin: 10px 5px; padding: 10px; border-radius: 10px; } @media only screen and (min-width: 320px) and (max-width: 768px) { #menu-container .menu-list{ max-width: 250px; } #leftside-navigation ul ul li a { font-size: 10px; line-height: 14px; } } /************************************************** HERO STYLE **************************************************/ .heroSection { position: relative; padding: 10vw 0px 0px 0px; background-size: cover; background-position: top; background-repeat: no-repeat; width: 100%; overflow: hidden; } .heroInnerWRap { position: relative; } .heroCircle { position: absolute; top: 42.5vw; left: 49%; transform: translate(-50%, -50%); width: 57%; z-index: 9; animation: smoothSwing 6s linear infinite; } @keyframes smoothSwing { 0% { transform: translate(-50%, -50%) translateX(0) rotate(0deg); } 25% { transform: translate(-50%, -50%) translateX(-15px) rotate(-5deg); } 50% { transform: translate(-50%, -50%) translateX(0) rotate(0deg); } 75% { transform: translate(-50%, -50%) translateX(15px) rotate(5deg); } 100% { transform: translate(-50%, -50%) translateX(0) rotate(0deg); } } .herotagline{ position: relative; text-align: center; z-index: 1; padding-top: 3.4vw; padding-bottom: 30vw; } .herotagline h3{ font-size: 3.8vw; line-height: 3.9vw; text-transform: uppercase; color: #fff; font-weight: 800; } .herotagline h2{ font-size: 8.5vw; line-height: 8.5vw; text-transform: uppercase; color: #fff; font-weight: 800; } .herotagline p{ font-size: 2.6vw; line-height: 1.7vw; text-transform: uppercase; color: #f1f1f1; font-weight: 400; } .heroBTNRG{ position: absolute; bottom: 21vw; color: #fff; width: 22vw; right: 3%; z-index: 99; } .heroBTNRG .button01 { border: 8px solid #0075b8e0 !important; } .slide-text { overflow: hidden; display: inline-block; } .slide-text span { display: inline-block; transform: translateY(100%); opacity: 0; } .subtaglineText22{ position: absolute; bottom: 17vw; color: #fff; width: 21vw; left: 6%; z-index: 999; } .subtaglineText22 p{ /* font-size: 1.197917vw; line-height: 1.8vw; */ color: #FFFFFF; text-align: right; } .globalpartnlogov343 { position: relative; right: -50px; margin-top: -4.5vw; width: 100%; background: transparent; display: flex; align-items: flex-start; justify-content: center; gap: 20px; } .heropartner-block { text-align: center; padding: 10px 20px; } .heropartner-block p { color: #000; text-align: center; text-transform: uppercase; font-size: 0.9vw; margin-bottom: 5px; font-weight: 600; } img.dgelogohost { width: 18.583333vw; } img.solutionsGlobal { width: 10.416667vw; } .aied-colocated { position: relative; width: 21vw; display: flex; align-items: center; justify-content: center; flex-direction: column; } .aied-colocated p { font-size: 1.0vw !important; line-height: 11px; padding-bottom: 5px; color: #fff; position: relative; text-align: center; margin: 0 auto; text-transform: uppercase; width: 100%; } .inlineLogo22 { display: flex; /* width: 0px; */ gap: 30px; width: 100%; align-items: center; justify-content: center; transition: transform 0.3s ease; } .aied-colocated figure { width: 10vw; margin-top: 1.2vw; margin-left: 0; } .aied-colocated figure:hover{ transform: scale(1.05); } .gqxlogoco { width: 10vw !important; } /**** News *******/ .newswraper.news-sec { padding: 5vw 0px 0vw 0; background-image: url(../images/whitelabel.png); background-position: center; background-repeat: no-repeat; position: absolute; display: flex; justify-content: start; align-items: center; margin-top: 0; padding-bottom: 2vw; z-index: 999; background-position: top; background-size: cover; bottom: 0; width: 100%; left: 0; } .news-ticker-slide{ position: relative; } .news-ticker-slide h3 { color: #0041B9; font-size: 1.510417vw; line-height: 1.8vw; font-weight: 700; } #ticker_slider { height: 58px; overflow: hidden; position: relative; top: 5px; } #ticker_slider .swiper-wrapper { display: flex; flex-direction: column; transition-timing-function: linear !important; } #ticker_slider .swiper-slide { display: flex; flex-direction: column; justify-content: center; padding: 6px 0; margin: 0; height: auto; } .news-ticker-slide .swiper-slide.swiper-slide-active p { font-weight: 400 !important; color: #000 !important; -webkit-text-stroke: none; } .latest-news-title { color: #0b5ed7; font-weight: 700; font-size: 0.833vw; margin-bottom: 4px; } .news-heading { font-size: 0.729vw; font-weight: 500; color: #222; margin: 0; line-height: 1.4; } .news-subtext { font-size: 0.625vw; color: #9aa0a6; margin-top: 2px; line-height: 1.3; } .news-ticker-slide .swiper { margin: 0 !important; padding: 0 !important; } @media (max-width: 768px) { #ticker_slider { height: 70px; } .latest-news-title { font-size: 0.729vw; } .news-heading { font-size: 0.677vw; } .news-subtext { font-size: 0.573vw; } } @media (max-width: 480px) { #ticker_slider { height: 60px; } .news-heading { font-size: 0.625vw; } .news-subtext { font-size: 0.521vw; } } div#ticker_slider:before { content: ''; width: 100%; height: 50%; bottom: 0; z-index: 9; position: absolute; background-image: linear-gradient(to top, #ffffffdb 0%, #ffffffa6 100%); } div#ticker_slider p { font-size: 0.9vw; font-weight: 600; color:#000; line-height: 1vw; } .mobilenewsstrip.desktopnewsstrip { position: relative; position: relative; margin-top: -3%; z-index: 999; } .mobilenewsstrip h2 { color: #000; color: #fff; font-size: 13px; display: inline-block; background: #000; /* clip-path: polygon(0 0, 100% 0, 20% 100%, 0% 100%, 0 80%); */ padding: 5px 20px 5px 10px; clip-path: polygon(0 0, 85% 0, 100% 100%, 0% 100%); } .stripmove0 { position: relative; width: -webkit-max-content; width: -moz-max-content; width: max-content; -webkit-animation: moveStrips 120s linear infinite; animation: moveStrips 120s linear infinite; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: .525rem 0; background: linear-gradient(to left, #c9ff00, #c9ff00); } .stripmove0 p { font-size: 1vw; line-height: 1.8vw; text-transform: capitalize; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding-left: 1rem; padding-right: 1rem; color: #000 !important; -webkit-text-stroke: 0; white-space: nowrap; margin: 0; border-right: 3px solid #000; } @-webkit-keyframes moveStrips { 0% { -webkit-transform: translateX(0); transform: translateX(0) } 100% { -webkit-transform: translateX(-50%); transform: translateX(-50%) } } @keyframes moveStrips { 0% { -webkit-transform: translateX(0); transform: translateX(0) } 100% { -webkit-transform: translateX(-50%); transform: translateX(-50%) } } @media only screen and (min-width: 320px) and (max-width: 768px) { .mobilenewsstrip.desktopnewsstrip{ display: none; } } /***********. HERO STYLE END *************/ /**********************************************/ /********** STATS START ***************/ /**********************************/ .statsWrap { position: relative; padding: 3vw 0; } .stats-line { position: relative; top: 43px; width: 100%; height: 2px; opacity: 0.2; background: #79938E; } .stat-item { position: relative; } .stat-item::before { content: ""; position: absolute; top: -14px; left: 50%; transform: translateX(-50%); width: 1vw; height: 1vw; /* border: 2px solid #e5e5e5; */ background: #003ca9; border-radius: 50%; z-index: 5; animation: dotPulse 2.5s infinite; box-shadow: 0 0 0 6px rgba(22, 119, 255, 0.18); } /* .stat-item::before { width: 14px; height: 14px; background: #ff7701; border-radius: 50%; position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); box-shadow: 0 0 0 6px rgba(22, 119, 255, 0.18); z-index: 3; } */ /* Optional pulse */ @keyframes dotPulse { 0% { box-shadow: 0 0 0 0 #003ba967; } 100% { box-shadow: 0 0 0 14px rgba(255, 119, 1, 0); } } .stat-box { position: relative; padding: 35px 10px; padding-bottom: 5px; overflow: hidden; transition: transform 0.3s ease; } .stat-box::before { content: ""; position: absolute; inset: 0; background: #ccff00; clip-path: polygon( 0 0, 100% 0, 100% 100%, 20% 100%, 0 80% ); transform: translateY(100%); transition: transform 0.35s ease; z-index: 0; } .stat-box::after { content: ""; position: absolute; top: 0; left: -100%; width: 40%; height: 100%; background: linear-gradient( 120deg, transparent, rgba(255, 255, 255, 0.5), transparent ); } .stat-box h2, .stat-box p { position: relative; z-index: 2; transition: color 0.3s ease; text-align: center; } /* Description */ .stat-box p { color: #666666; font-weight: 400; margin: 0; padding-top: 10px; margin: 0 auto; width: 92%; padding-bottom: 20px; } /* Count wrapper */ .count_inner { display: flex; justify-content: center; align-items: center; } .count-wrapper .count_inner { transition: 0.4s ease-in-out; } .count-wrapper h4 { font-size: 3.646vw; line-height: 3.6vw!important; font-weight: 600; color: var(--black-color) !important; } .count-wrapper .signs { font-size: 3.246vw!important; line-height: 3vw!important; font-weight: 600; line-height: 1; color: #000; z-index: 9; } /* Lift */ .stat-item:hover .stat-box { transform: translateY(-6px); } /* Background reveal */ .stat-item:hover .stat-box::before, .stat-item.active .stat-box::before { transform: translateY(0); } /* Text color change */ .stat-item:hover .stat-box p { color: #000; } /* Shine animation */ .stat-item:hover .stat-box::after { animation: shine 0.7s linear; } @keyframes shine { 100% { left: 120%; } } /********** STATS ENDS ***************/ /**********************************/ /********** sponsors SECTION ***************/ /**********************************/ .sponsorsWraper { position: relative; padding: 3vw 0; z-index: 99; } .sponsorsWraper:before { background-image: url(../images/headline-bg.png); background-size: 38%; background-repeat: no-repeat; position: absolute; z-index: -1; right: -14%; bottom: -54%; content: ''; width: 40vw; background-size: cover; background-position: top; height: 70%; } .sponsors-logo { position: relative; margin-top: 25px; text-align: center; } .logorowwidth{ width: 72%; margin: 0 auto; } .logorowwidth { width: 100%; margin: 0 auto; } .logorowwidth .col-6.col-md-3.col-sm-6 { width: 12%; /* margin: 0; */ padding: 0; padding: 0px 10px; } .sponsors-logo.right-border::before { content: ''; position: absolute; bottom: 0; right: -3%; width: 1px; height: 100%; background: #cbcbcb; } .sponsors-logo p { font-weight: 500; font-size: 0.9vw; line-height: 1.3; margin-bottom: 0.2vw; color: #000; height: 2.0vw; } .sponsors-logo figure { padding-bottom: 0; max-width: 10vw; display: flex; align-items: flex-end; justify-content: center; text-align: center; margin: 0 auto; min-height: 4vw; } .sponsors-logo figure img { max-width: 100%; max-height: 4vw; /* controls visual size */ width: auto; height: auto; object-fit: contain; transition: transform 0.3s ease; } .sponsors-logo figure img.dmclogo{ max-height: 2.8vw; } .sponsors-logo:hover img { transform: scale(1.05); } .hostpartnerLogo { max-width: 13vw!important; } /********************** SUMMIT/EXPO Section *************/ .exponationWrap{ padding: 3vw 0; background-position:top; background-size: cover; background-repeat: no-repeat; position: relative; overflow: hidden; display: flex; justify-content: start; align-items: center; z-index: 999; } .exponationWrap .col-md-6.col-sm-12.border-right { position: relative; } .exponationWrap .border-right::before { content: ""; background-image: linear-gradient(to top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.15) 15%, rgb(255, 255, 255) 35%, rgb(255, 255, 255) 52%, rgb(255, 255, 255) 71%, rgba(255, 255, 255, 0.18) 87%, rgba(255, 255, 255, 0) 100%); position: absolute; width: 1px; height: 100%; right: 3%; opacity: 0.6; } .summitLeftWrap{ position: relative; } .summitGreenBox{ margin-top: 40px; width: 70%; position: relative; background: rgb(201, 255, 0); padding: 3vw 13vw 5vw 1.4vw; } .summitGreenBox h3{ margin-bottom: 30px; font-size: 4.166667vw; line-height: 4.1vw; font-weight: 900; position: relative; } .summitGreenBox h3:before { content: ""; width: 45%; height: 1%; position: absolute; bottom: -10px; background: rgb(0, 0, 0); } .summitGreenBox h4{ font-size: 1.8vw; font-weight: 900; line-height: 2.9vw; } .summitGreenBox p{ line-height: normal; margin-top: 20px; font-size: 1.221354vw; line-height: 1.3vw; } .greenbox-arrow{ position: absolute; top: 29px; right: -24px; } .greenbox-arrow img{ width: 35%; } .greenbox-arrow img:hover{ width: 35%; animation: arrowFloat 2s ease-in-out infinite; } @keyframes arrowFloat { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(6px, -6px); } } .green-box-image { position: absolute; top: 28%; width: 20vw; right: 13%; height: 21.833333vw; overflow: hidden; } .green-box-image:before { opacity: 15%; content: ''; position: absolute; top: 0; width: 100%; height: 100%; z-index: 0; clip-path: polygon(15% 0%, 100% 0, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 20%); background: #000; } .green-box-image figure { margin: 0 0 0; padding: 15px 15px 15px 15px; } .green-box-image figure img { height: 19.833333vw; width: 100%; object-fit: cover; position: relative; object-position: center; clip-path: polygon(15% 0, 100% 1%, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0% 20%); } .exporightWrap{ position: relative; padding-top: 5vw; } .expoblueBox{ background: #00ffff; padding: 20px; width: 32vw; position: relative; margin-top: 2vw; margin-left: 10%; padding-top: 14vw; padding-bottom: 3vw; } .expoblueBox h3{ font-size: 4.166667vw; font-weight: 900; position: relative; /* margin-bottom: 20px; */ line-height: 4.1vw; } .expotextinline{ display: flex; gap: 20px; align-items: flex-start; } .expoblueBox h4{ font-size: 1.8vw; font-weight: 900; line-height: 2.9vw; } .expoblueBox p{ line-height: normal; border-left: 1px solid #000; padding-left: 20px; font-size: 1.221354vw; line-height: 1.3vw; } .bluebox-arrow{ position: absolute; bottom: 29px; right: -24px; } .bluebox-arrow img{ width: 35%; } .bluebox-arrow img:hover{ width: 35%; animation: arrowFloatBottom 2s ease-in-out infinite; } @keyframes arrowFloatBottom { 0%, 100% { transform: translate(0, 0); } 50% { transform: translate(6px, 6px); /* 👇 opposite direction */ } } .blue-box-image { position: absolute; top: 7%; width: 29.6875vw; right: 5%; z-index: 999; } .blue-box-image:before { opacity: 15%; content: ''; position: absolute; top: 0; width: 100%; height: 100%; z-index: 0; background: #000; clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0 0); } .blue-box-image figure { margin: 0 0 0; padding: 15px 15px 15px 15px; background-size: cover; background-position: center; } .blue-box-image figure img { width: 100%; object-position: center; clip-path: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 100% 100%, 0 100%, 0% 80%, 0 0); } /********************** SUMMIT/EXPO Section *************/ .summitDay0Wraper { padding: 3vw 0; background-position: center; background-size: cover; background-repeat: no-repeat; position: relative; display: flex; justify-content: start; align-items: center; height: 100%; width: 100%; z-index: 999; overflow: hidden; } .summitLeftTEXTITEM { position: relative; } .summitLeftTEXTITEM{ position: relative; } .summitLeftTEXTITEM h2{ font-size: 3.75vw; line-height: 3.8vw; color: #000; text-transform: uppercase; text-align: left; font-weight: 900; padding-bottom: 1vw; position: relative; } .summitLeftTEXTITEM h2:before { content: ''; background: #0d0d0d8f; width: 45%; height: 1%; position: absolute; bottom: 0px; font-weight: 100; } .summitLeftTEXTITEM h3{ font-size: 1.6875vw; line-height: 2vw; color: #000; text-transform: uppercase; text-align: left; font-weight: 600; padding-bottom: 1vw; padding-top: 2.4vw; } .summitLeftTEXTITEM p{ width: 70%; } /********************** SUMMIT/EXPO Section *************/ .aieverythingDay12Wrap { padding: 3vw 0; background-image: url(../images/AbuDhabi-text.png?v=1.3); background-size: 100%; background-repeat: no-repeat; position: relative; display: flex; justify-content: start; align-items: center; height: 100%; z-index: 999; padding: 5vw 0px; position: relative; /* overflow: hidden; */ display: flex; justify-content: start; align-items: center; height: 100%; z-index: 99990; } .aieverythingDay12Wrap:before { content: ''; background-image: url(../images/everything-overlay.png); position: absolute; width: 100%; height: 25vw; top: 0; z-index: -1; background-position: center; background-size: cover; } /* .aieverythingDay12Wrap:after { content: ""; position: absolute; top: -90%; left: 0%; width: 100%; height: 100%; background: radial-gradient(circle, rgb(0 236 236 / 89%) 0%, rgb(0 231 231 / 74%) 30%, rgb(0 236 236 / 56%) 55%, transparent 75%); filter: blur(60px); z-index: -1; } */ .dayssubtagItem12{ position: relative; text-align: center; } .dayssubtagItem12:before { content: ''; background: #000; width: 30%; height: 1%; position: absolute; top: -10%; left: 0; right: 0; display: flex; align-items: center; justify-content: center; margin: 0 auto; text-align: center; } .dayssubtagItem12 h3 { font-size: 1.6875vw; line-height: 2vw; font-weight: 900; text-transform: uppercase; padding-top: 10px; } .aieverythingDay12Wrap p { width: 80%; margin: 0 auto; text-align: center; padding-top: 2vw; font-weight: 400; } /********************************** ******* SECTORS SECTION ******* *********************************/ .sectorsWraper{ padding: 3vw 0; position: relative; width: 100%; height: 100%; z-index: 9; } section.sector_sec:before { content: ''; position: absolute; top: -10vw; left: 0; width: 100%; height: 122%; background: url(../images/sectorbgnew02.png) no-repeat; background-size: 100% 100%; z-index: -1; top: -10vw; } .sectorsWraper .col-md-3.col-sm-6.m-0.p-0.mb-4 { width: 22.4%; margin-bottom: 4vw !important; } .sector-logo { text-align: center !important; border-right: 1px solid #fff; display: flex; justify-content: center; align-items: center; margin-right: 0px !important; padding-right: 0; height: 13vw; display: flex !important; align-items: center; justify-content: center !important; flex-direction: column; } .sector-logo.tooltip { position: relative; display: inline-block; cursor: pointer; opacity: 1; --bs-tooltip-zindex: unset; border-bottom: 0px !important; } .sector-logo figure { width: 15vw; margin-bottom: 2vw; } .sector-logo .logow-80 { width: 80% !important; } .read-more-btn { display: inline-block; font-size: 0.9vw; padding: 3px 14px; border-radius: 50px; background: #c9ff00; color: #000000; text-decoration: none; font-weight: 500; transition: all 0.3s ease; margin-top: 10px; position: absolute; bottom: -0.5vw; z-index: 999; } .tooltiptext { visibility: hidden; opacity: 0; width: 21vw; background-color: #c9ff00; color: #000000; text-align: left; padding: 15px 20px; position: absolute; z-index: 1; top: 100%; left: 28%; margin-left: 0; font-size: 1vw; margin-top: 4%; transition: all 0.2s ease-in-out 0s; -webkit-transition: all 0.2s ease-in-out 0s; -moz-transition: all 0.2s ease-in-out 0s; -o-transition: all 0.2s ease-in-out 0s; max-width: 90vw; left: 50%; transform: translateX(-50%); } .tooltiptext::after { content: ""; position: absolute; bottom: 100%; left: 25%; margin-left: -5px; border-width: 22px; border-style: solid; border-color: transparent transparent #c9ff00 transparent; } .tooltip:hover .tooltiptext { visibility: visible; opacity:1; } .col-md-3:nth-child(4n+1) .tooltiptext { left: 0; transform: translateX(0); } .col-md-3:nth-child(4n) .tooltiptext { left: auto; right: 0; transform: translateX(0); } @media (max-width: 768px) { .tooltiptext { bottom: 110%; top: auto; left: 50%; transform: translateX(-50%); width: 80vw; font-size: 14px; } .tooltiptext::after { top: 100%; bottom: auto; border-color: #c9ff00 transparent transparent transparent; } } .no-border { border: 0px; } .headline-sponsors{ position: relative; z-index: 9999; padding: 3vw 0; } /********************************** ******* LOGO SECTION ******* *********************************/ .headline-sponsors{ position: relative; z-index: 9999; } .headline-sponsors:before { background-image: url(../images/headline-bg.png); background-size: 38%; background-repeat: no-repeat; /* background-position: 115% -50%; */ position: absolute; z-index: -1; left: -20%; top: -6vw; content: ''; width: 39vw; background-size: cover; background-position: top; height: 39vw; } .InnerShowLogoBox { margin-bottom: 10px; box-shadow: rgba(0, 0, 0, 0.24) 0px 4px 20px -8px; display: flex; align-items: center; justify-content: center; padding: 10px 0px; background: rgb(255, 255, 255); border-width: 1px; border-style: solid; border-color: rgb(254, 254, 254); border-image: initial; } .InnerShowLogoBox a { display: flex; height: 90px; /* your box height */ width: 100%; align-items: center; justify-content: center; padding: 10px; cursor: move ! Important; } /* 🔥 Key part */ .InnerShowLogoBox a img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; /* safe but optional here */ } /********************************** ******* SPEAKERS SECTION ******* *********************************/ .speakersWraper{ position: relative; padding: 3vw 0; z-index: 999; } .speakersWraper .sectionheading h2{ /* font-size: 2.447917vw; line-height: 2.6vw; */ } .speakersWraper .sectionheading span{ /* font-size: 4.1vw; line-height: 4.375vw; */ } .speakers26Item{ position: relative; } .speakers26Item figure { width: 100%; height: 18vw; position: relative; overflow: hidden; } .speakers26Item figure:before{ position: absolute; bottom: 0; left: 0; width: 100%; height: 35%; background: linear-gradient(181deg, #ffffff00, #ffffff96, #ffffff, #ffffff); content: ''; z-index: 999; } /* SHAPES (backgrounds) */ .speakers26Item figure .shape { position: absolute; inset: 0; background-size: contain; background-position: top; transition: opacity 0.4s ease; width: 100%; background-repeat: no-repeat; } .speakers26Item figure .shape-default { background-image: url('../images/speakerBG01.png'); opacity: 1; } .speakers26Item figure .shape-hover { background-image: url('../images/speakerBG02.png'); opacity: 0; } .speakers26Item figure .img { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; transition: opacity 0.4s ease; } .speakers26Item figure .img img { width: 100%; padding-left: 20px; } .speakers26Item figure .png-image { opacity: 1; } .speakers26Item figure .gif-image { opacity: 0; } .speakers26Item figure:hover .shape-default { opacity: 0; } .speakers26Item figure:hover .shape-hover { opacity: 1; } .speakers26Item figure:hover .png-image { opacity: 0; } .speakers26Item figure:hover .gif-image { opacity: 1; } .speakers26Item .speakerItemInfo{ position: relative; width: 100%; margin: 0 auto; text-align: left; margin-top: -1.5vw; z-index: 999; padding-left: 1.6vw; } .speakers26Item .speakerItemInfo h4.speakerName, .speakers26Item .speakerItemInfo p.speakerDesg, .speakers26Item .speakerItemInfo h3.speakerCompany, .speakers26Item .speakerItemInfo p.speakercountry{ font-size: 1.15vw; line-height: 1.3vw; text-transform: none; } .speakers26Item .speakerItemInfo h4.speakerName{ padding-top: 0.5vw; padding-bottom: 0.5vw; font-weight: 800; text-transform: uppercase; font-size: 1.15vw; line-height: 1.3vw; font-size: 1.25vw; line-height: 1.4vw; } .speakers26Item .speakerItemInfo p.speakerDesg{ padding-bottom: 0.5vw; /* font-weight:600; */ font-size: 1.15vw; line-height: 1.3vw; } .speakers26Item .speakerItemInfo h3.speakerCompany{ padding-bottom: 0.5vw; color: #0066ff; font-weight:600; text-transform: uppercase; font-size: 1.45vw; line-height: 1.6vw; } .speakers26Item .speakerItemInfo p.speakercountry{ font-weight:400; } .speakcountryTag { position: absolute; left: 3px; top: 30%; transform: translateY(-50%); z-index: 2; background: #c9ff00; color: #000; padding: 19px 8px; text-align: center; border-radius: 2px; text-align: center; overflow: hidden; } .speakcountryTag p { color: #000; text-transform: uppercase; transform: rotate(180deg) translate(-4px); writing-mode: vertical-lr; text-align: center; margin-bottom: 0; font-size: 1.0vw; width: 100%; line-height: 1.2vw; margin-left: -2px; } #speakerswiper .swiper-button-prev{ } #speakerswiper .swiper-button-prev, #speakerswiper .swiper-button-next { width: 45px; height: 45px; background: #fff; border-radius: 50%; box-shadow: 0 5px 15px rgba(0,0,0,0.15); transition: all 0.3s ease; } /* Remove default arrow */ #speakerswiper .swiper-button-prev::after, #speakerswiper .swiper-button-next::after { font-size: 18px; font-weight: bold; color: #000; transition: transform 0.3s ease; } /* Hover effect */ #speakerswiper .swiper-button-next:hover { transform: scale(1.1) translateX(5px); } #speakerswiper .swiper-button-prev:hover { transform: scale(1.1) translateX(-5px); } /*********** SPEAKER END *****************/ /**********************************************/ /*********** CAIO/INVESTOR/SUPERNOVA STYLE *****************/ /**********************************************/ .page-bg { width: 100%; padding: 5vw 0px 0px 0px; z-index: 99; position: relative; } .page-bg::before { position: absolute; content: ''; /* top: -5%; */ top:0; left: 0; width: 100%; height: 100%; background-size: cover; background-size: cover; background-repeat: no-repeat; background: url(../images/background02v4.jpg?v=1.2) no-repeat; background-size: cover; z-index: -1; background-position: top center; } .caiosWrapnew, .aistartxWraper, .supernovaWraper, .investorWraper18, .investorsLogoWrap { background: transparent !important; position: relative; } /***** CAIO*******/ .caiosWrapnew { position: relative; } .caiosWrapInner{ position: relative; padding: 20px; z-index: 99; width: 99%; margin: 0 auto; } .caiosWrapInner:before{ position: absolute; top:0; left:0; background : #000000; background : rgba(0, 0, 0, 1); opacity : 0.35; width: 100%; height: 100%; content: ''; z-index: 2; } .caiosWrapInner:after{ content: ''; position: absolute; top: 10px; left: 10px; right: 10px; bottom: 10px; background-image: url(../images/caiobg.jpg); background-position: center; background-size: cover; background-repeat: no-repeat; z-index: 1; } .caiosContentBox { position: relative; z-index: 999; height: 100%; display: block; padding: 2vw; } .caiosContentBox h2{ color: #fff; font-weight: 900; font-size: 3.75vw; line-height: 3.8vw; position: relative; text-transform: uppercase; } .caiosContentBox p{ color: #fff; /* font-size: 1.4vw; */ text-align: center; width: 80%; margin: 0 auto; } .inlinebtn76 { display: flex; gap: 30px; width: 100%; margin-top: 30px; } .caioStats { position: relative; display: flex; gap: 50px; align-items: center; justify-content: center; padding: 1vw 0px 0px 0; } .caioItem01 { width: 11vw; height: 11vw; border-radius: 50%; display: flex; flex-direction: column; justify-content: center; align-items: center; color: white; text-align: center; position: relative; background: #000; background-size: cover !important; padding: 10px; } .caioItem01:before { content: ""; position: absolute; width: 110%; height: 110%; border-radius: 50%; border: 2px solid rgba(255, 0, 0, 0.4); } .caioItem01.blueimg33 { background: radial-gradient(circle at top left, #1e90ff, #003366); background-size: cover !important; background-position: center!important; } .caioItem01.darkimg33 { background: radial-gradient(circle at top right, #330000, #000000); } .caioItem01 h3{ font-size: 1.9vw; line-height: 2.1vw; color: #fff; font-weight: 600; padding-bottom: 0.3vw; } .caioItem01 p{ color: #fff; font-size: 0.9vw!important; text-align: center; padding-top: 0.6vw!important; } /****** STARTX ********/ .aistartxWraper { position: relative; width: 100%; padding: 3vw 0px; } .aistartxWraper{ position: relative; padding: 3vw 0; width: 100%; } .startxbgimage{ position: absolute; top: -11%; right: -8%; width: 100%; height: 108%; background-size: cover !important; background-position: 100% 100% ! Important; background-repeat: no-repeat !important; } .aistartxWraper figure{ margin-bottom: 2vw; width: 28.645833vw; } .aistartxWraper h2{ font-weight: 900; position: relative; color: #C9FF00; text-transform: uppercase; font-size: 3.75vw; line-height: 3.8vw; width: 90%; } .aistartxWraper .count-wrapper p, .aistartxWraper .count-wrapper h4, .aistartxWraper .count-wrapper .signs{ color:#fff!important; } .aistartxWraper .count-wrapper:hover p, .aistartxWraper .count-wrapper:hover h4,.aistartxWraper .count-wrapper:hover .signs{ color:#000!important; } .aistartxWraper .stat-item::before{ background: #c9ff00; } /****** supernova ********/ .supernovaWraper{ position: relative; padding: 0px 0px 2vw 0; } .supernovaInner{ position: relative; background-size: cover; background-position: center; background-repeat: no-repeat; width: 100%; } .supernovaBox { position: relative; width: 100%; } .supernovaBox .innerImg { width: 100%; display: block; padding: 0.989583vw; box-sizing: border-box; border-radius: 40px; } .supernovaBox .outline { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } .SupernovacontentH{ position: absolute; top: 25%; left: 4%; width: 31%; height: 100%; } .SupernovacontentH h2{ font-weight: 900; font-size: 3.75vw; line-height: 3.8vw; color: #fff; padding-bottom: 2vw; } .SupernovacontentH p{ font-size: 1.197917vw; line-height: 1.458333vw; color: #fff; } /****** Investors ********/ .investorWraper18{ position: relative; padding: 9vw 0px 10vw 0; } .investorbackImg{ position: absolute; top: -5%; left: -9%; width: 91%; height: 100%; background-size: 100% 100%; background-repeat: no-repeat; z-index: -1; } .inveatorContentH{ position: relative; width: 42%; margin-left: 60%; z-index: 9991; } .inveatorContentH h2{ width: 100%; font-weight: 900; font-size: 3.25vw; line-height: 3.9vw; color: #fff; padding-bottom: 2vw; } .inveatorContentH p{ color: #fff; font-size: 1.3vw; line-height: 1.8vw; } .investorsLogoWrap{ position: relative; padding: 0vw 0px 5vw 0; z-index: 999; } .investorsLogoWrap .sectionheading h2{ width: 85%; margin: 0 auto; } .investorsLogoWrap:before{ z-index: -1; background-image: url(../images/investorlogobg.png); background-repeat: no-repeat; background-position: center; background-size: cover; position: absolute; top: -27vw; left: 0; width: 100%; content: ''; height: 100vh; opacity: 0.37; } .investorLogoStrip { display: flex; align-items: center; justify-content: space-between; gap: 30px; width: 90%; margin: 0 auto; } .investorLogoStrip figure { margin: 0; flex: 0 0 auto; } .investorLogoStrip img { height: 3.5vw; width: auto; object-fit: contain; transition: all 0.3s ease; } /****** AI ROBOTS Timeline ********/ .timelineWraper { position: relative; padding: 0; min-height: 59.583333vw; } .timelineWraper:after{ position: absolute; content: ''; width: 100%; background-image: url(../images/background02-btm.png); background-repeat: no-repeat; background-size: contain; background-position: center; bottom: 3%; left: 0; height: 10vw; } .robotsLEftInmg{ position: absolute; bottom: 10%; left: 0%; } .robotsLEftInmg figure{ width: 50vw; position: sticky; top: 0; height: 100%; } .robotsLEftInmg figure img{ width: 100%; height: 100%; object-fit: contain; } .timelineWraper h2{ color: #fff; width: 100%; z-index: 999; position: relative; padding-left: 1vw; padding-top: 10vw; text-transform: uppercase; font-weight: 900; font-size: 4.35vw; line-height: 4.6vw; } .dayTabContentArea{ position: relative; padding-top: 8vw; width: 91%; padding-left: 5vw; } .dayTabContentArea span{ font-size: 1.197917vw; background : #C9FF00; color: #000; border-radius : 25px; -moz-border-radius : 25px; -webkit-border-radius : 25px; padding: 4px 25px; font-weight: 400; } .dayTabContentArea h3{ font-size: 2.125vw; line-height: 2.4vw; position: relative; color: #fff; padding: 1vw 0; padding-top: 3vw; text-transform: uppercase; } .dayTabContentArea p{ color: #fff; font-size: 1.197917vw; line-height: 1.5vw; } .abutimeline { position: absolute; display: flex; justify-content: center; align-items: flex-start; padding: 4vw 2vw 4vw 6vw; color: #fff; margin-top: 12vw; bottom: 9vw; width: 100%; gap: 100px; left: 0; } .abutimeline:before{ content: ""; position: absolute; bottom: -40%; left: -2px; width: 100%; height: 24vw; -webkit-backdrop-filter: blur(20px); background: rgb(0 43 179); -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 60%, black 100%); mask-image: linear-gradient(to bottom, transparent 0%, #0275f3 60%, #0158e3 100%); z-index: -1; } .abutimeline-line { position: absolute; top: 1.6vw; left: 0; width: 100%; height: 2px; background: rgba(255, 255, 255, 0.25); z-index: 1; } .abutimeline-item { position: relative; text-align: left; width: 14%; z-index: 2; } .abutimeline-item .icon { width: 3vw; height: 3vw; /* margin: 0 auto 15px; */ background: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: 0.3s; margin-top: -4vw; margin-bottom: 1vw; padding: 9px; } .abutimeline-item .icon em, .abutimeline-item .icon i{ color: #000; } .abutimeline-item p { font-size: 1.1vw; line-height: 1.3vw; margin: 5px 0; /* opacity: 0.8; */ position: relative; color: #fff; padding-bottom: 0.5vw; } .abutimeline-item h4 { font-size: 1.1vw; font-weight: 500; line-height: 1.4; text-transform: capitalize; } .abutimeline-item.active .icon { background: #C9FF00; box-shadow: 0 0 20px rgba(201,255,0,0.6); } .abutimeline-item.active .icon i, .abutimeline-item.active .icon em, .abutimeline-item.active .icon img{ color: #000; filter: brightness(0); } .abutimeline-item.visited .icon { background: #ffffff; box-shadow: 0 0 10px rgba(255,255,255,0.4); } .abutimeline-item.visited .icon i, .abutimeline-item.visited .icon em,.abutimeline-item.visited .icon img { color: #000; filter: brightness(0); } .abutimeline-item .icon { background: #003399; /* or transparent if you want */ transition: all 0.3s ease; } .abutimeline-item .icon .abutimeline-item .icon i, .abutimeline-item .icon em, .abutimeline-item .icon img{ color: #fff; filter: brightness(0) invert(1); } .abutimeline-item.active p, .abutimeline-item.active h4 { opacity: 1; } .dayTabContentArea span, .dayTabContentArea h3, .dayTabContentArea p { transition: all 0.3s ease; } .dayTabContentArea { display: none; } .dayTabContentArea.active { display: block; } .abutimeline-item.active { opacity: 1; } .abutimeline-item { cursor: pointer; /* opacity: 0.5; */ transition: 0.3s; } .dayTabContentArea { display: none; } .dayTabContentArea.active { display: block; } .dayTabWrapper { position: relative; min-height: 150px; } .dayTabContentArea { position: absolute; left: 0; top: 0; width: 100%; opacity: 0; transform: translateY(20px); transition: all 0.4s ease; pointer-events: none; } .dayTabContentArea.active { opacity: 1; transform: translateY(0); position: relative; pointer-events: auto; } .abutimeline-item { cursor: pointer; transform: scale(0.95); transition: all 0.3s ease; } .abutimeline-item:hover { opacity: 0.8; } .abutimeline-item.active { opacity: 1; transform: scale(1.05); } .dayTabWrapper { position: relative; overflow: hidden; } .dayTabContentArea { position: absolute; width: 100%; top: 0; left: 0; opacity: 0; transform: translateY(30px) scale(0.96); transition: none; } .dayTabContentArea.active { position: relative; opacity: 1; transform: translateY(0) scale(1); transition: all 0.5s cubic-bezier(0.22, 1, 0.36, 1); } .dayTabContentArea.exit { opacity: 0; transform: translateY(-20px) scale(0.96); transition: all 0.3s ease; } /*********** TESTIMONIAL START *****************/ /**********************************************/ .testimonnialWraperNEW{ padding: 3vw 0; position: relative; z-index: 999; } .testimonnialWraperNEW .bg-heading { font-size: 2.083333vw; font-weight: 800; background: #00ffff; width: fit-content; padding: 5px 50px; border-radius: 40px; margin-top: 20px !important; margin: 0 auto; } .testimonnialWraperNEW .carousel { overflow-x: clip; z-index: 9999; padding-top: 0px; padding-top: 3vw; padding-bottom: 4vw; } .testimonnialWraperNEW .swiper22 .swiper-slide { display: flex; height: auto; /* important */ } .testimonnialWraperNEW .swiper22 .swiper-slide .single { display: flex; flex-direction: column; height: 100%; } .testimonnialWraperNEW .swiper22 { padding: 5rem 0; overflow: visible; padding-top: 1vw; } .testimonnialWraperNEW .swiper22 .swiper-slide { width: auto; display: flex; } .testimonnialWraperNEW .single { position: relative; pointer-events: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; box-shadow: rgba(255, 255, 255, 0.1) 0px 1px 1px 0px inset, rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px; position: relative; width: 100%; height: 100%; padding: 3vw 1vw 0.5vw 1vw !important; background: #eaeaea; border-radius: 20px; margin: 10px 0px 0 10px; } .testimonnialWraperNEW .single .leaders-arrow { position: absolute; top: -3%; right: 4%; width: 14%; } .leader-details figure img { border-radius: 50%; width: 50px; height: 50px; object-fit: cover; object-position: center; margin-top: 15px; margin-bottom: 10px; } .leader-details h3.leader-name { font-size: 1.1vw; font-weight: 400; line-height: 1.2vw; padding-bottom: 0.1vw; text-transform: uppercase; } .testimonnialWraperNEW .single p { color: #000; font-size: 1.0vw; line-height: 1.2vw; } .leader-details p.leader-designation span { font-size: 1.2vw; line-height: 1.4vw; font-weight: 600; color: #00a4b9; text-transform: uppercase; } .testimonnialWraperNEW .single { transition: all 0.4s ease; border-radius: 12px; /* overflow: hidden; */ } /* 👇 CENTER ACTIVE CARD */ .testimonnialWraperNEW .swiper-slide.swiper-slide-active .single { background: #ffffff; /* change as per your design */ transform: scale(1.05); /* slight highlight */ box-shadow: rgb(158 160 160 / 68%) -3px -20px 60px 0px; } /* 👇 SIDE CARDS */ .testimonnialWraperNEW .swiper-slide .single { background: #eaeaea; /* dim color */ box-shadow: none; /* opacity: 0.7; */ border-radius: 29px; } .testimonnialWraperNEW .circlebr01 { position: absolute; top: 40%; left: 0; overflow: hidden; width: 100%; height: 100%; z-index: 2; } .testimonnialWraperNEW .circlebr01::before, .testimonnialWraperNEW .circlebr01::after, .testimonnialWraperNEW .circlebr01 span { content: ""; display: block; position: absolute; top: 6vw; left: 0; z-index: -2; width: 150vw; height: 180vh; border-radius: 100%; border-top: 2px solid rgb(143 143 143); -webkit-border-radius: 100%; -moz-border-radius: 100%; -ms-border-radius: 100%; -o-border-radius: 100%; } .testimonnialWraperNEW .circlebr01::before { left: -25vw; } .testimonnialWraperNEW .circlebr01::after { top: 11vw; left: -25vw; border-top-color: rgb(133 133 133 / 50%); } .testimonnialWraperNEW .circlebr01 span { top: 16vw; left: -30vw; border-top-color: rgb(159 159 159 / 20%); transform: rotate(-4deg); -webkit-transform: rotate(-4deg); -moz-transform: rotate(-4deg); -ms-transform: rotate(-4deg); -o-transform: rotate(-4deg); } .testimonnialWraperNEW .swiper-pagination { bottom: -16% !important; top: unset !important; z-index: 99999; left: 0% !important; display: flex; right: 0 !important; align-items: center; justify-content: center; margin: 0 auto; text-align: center; } .testimonnialWraperNEW .swiper-pagination { display: flex; justify-content: center; align-items: center; gap: 2px; } .testimonnialWraperNEW .custom-line { width: 20px; height: 4px; background: #666; border-radius: 10px; transition: all 0.3s ease; } .testimonnialWraperNEW .swiper-pagination-bullet-active{ width: 50px; } .swiper-pagination-bullet { width: 30px; height: 6px; border-radius: 10px; background: #d3d3d3; opacity: 1; transition: all 0.3s ease; margin: 0 6px !important; } .swiper-pagination-bullet-active { width: 50px; /* longer active pill */ background: #555; /* darker active */ } .swiper-pagination { display: flex; justify-content: center; align-items: center; } .swiper-pagination-bullet { transform: scale(1); will-change: width; } .swiper-pagination-bullet-active { transform: scale(1); } /*********** TESTIMONIAL END *****************/ /**********************************************/ /*******. News Section START ***************/ /**********************************************/ .homenewsWraper { padding: 3vw 0; /* background-image: url(../images/radial-bg-img.png); */ background-position: 100% 50%; background-size: 100% 110%; background-repeat: no-repeat; position: relative; overflow-y: visible !important; height: 100%; z-index: 99; } .homenewsWraper:before{ background-image: url(../images/radial-bg-img.png); background-position: 100% 50%; background-size: 100% 110%; content: ''; top: 0; left: 0; position: absolute; z-index: -1; width: 100%; height: 100%; transform: scale(1.6); } .press-card { background: #ffffff; border-radius: 0 0 70px 0; /* overflow: hidden; */ position: relative; transition: 0.3s ease; height: 100%; } .press-img img { width: 100%; /* height: 220px; object-fit: cover; */ height: auto; } .press-content { padding: 2vw; position: relative; min-height: 140px; } .press-content p { font-size:1.1vw; line-height: 1.6; color: #000; margin: 0; } /* Arrow Button */ .homenewsWraper .arrow-btn { position: absolute; bottom: -10px; right: -15px; width: 60px; height: 60px; background: #c6ff00; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; cursor: pointer; transition: 0.3s ease; rotate: 180deg; } /* Hover Effects */ .press-card:hover .arrow-btn { transform: rotate(45deg) scale(1.1); } .press-card:hover { transform: translateY(-5px); } /* Owl spacing */ .press-slider .item { padding: 10px; } .homenewsWraper .arrow-btn img { width: 38% !important; } .homenewsWraper .swiper-button-next::after, .homenewsWraper .swiper-button-prev::after { display: none; } .homenewsWraper .swiper-button-next, .homenewsWraper .swiper-button-prev { width: 40px; height: 40px; color: #000; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #fff; border-radius: 50%; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15); transition: all 0.3s ease; } .homenewsWraper .swiper-button-next i, .homenewsWraper .swiper-button-prev i { font-size: 14px; } /*******. PRESS Section END ***************/ /**********************************************/ /*******. PARTNER START ***************/ /**********************************************/ .partnersWraperFull { position: relative; padding: 3vw 0; z-index: 999; } .partnersWraperFull .col-md-3.col-lg-3 { flex: 0 0 auto; width: 16.6666%; } .logoWrap26 { width: 100%; padding: 14px; background: #fff; border-radius: 18px; box-shadow: 0 4px 20px -8px rgba(0,0,0,0.15); transition: all 0.35s ease; position: relative; overflow: hidden; text-align: center; } .logoWrap26 .innerlogoItem { height: 110px; display: flex; align-items: center; justify-content: center; } .logoWrap26 .innerlogoItem img { max-width: 65%; max-height: 65%; object-fit: contain; transition: transform 0.35s ease, filter 0.35s ease; } .logoWrap26:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 12px 30px -10px rgba(0,0,0,0.25); } .logoWrap26:hover img { transform: scale(1.08); filter: brightness(1.1) contrast(1.1); } .logoWrap26::before { content: ""; position: absolute; inset: 0; border-radius: 18px; background: linear-gradient(120deg, transparent, rgba(255,255,255,0.6), transparent); opacity: 0; transition: opacity 0.4s ease; } .logoWrap26:hover::before { opacity: 1; } div#logoSwiper2 { padding-bottom: 20px; } /*******. PARTNER END ***************/ /**********************************************/ .visitPArtWRaper{ position: relative; padding: 2vw 0; } .visitpartnerlogo{ display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 20px; } .visitpartnerlogo h4 { font-size: 1.2vw; color: #000; font-weight: 400; margin: 0; padding: 0; text-transform: uppercase; text-align: center; } .visitpartnerlogo figure.organised-logo { height: 200px; width: 90%; border: 1px solid #eee; padding: 30px; border-radius: 20px; } .visitpartnerlogo figure.organised-logo img { width: 100%; height: 100%; object-fit: contain; } /********** VENU MAP **************/ .venueMApWrapH{ position: relative; padding: 3vw 0; } .venueMApInner { position: relative; /* border: #000 solid 1px; */ width: 80%; margin: 0 auto; border: 1px solid #eee; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 4px rgba(0, 0, 0, 0.04); } .venueMApInner .venueinforight{ padding: 2.5vw 2vw; text-align: center; width: 100%; height: 100%; } .venueMApInner .venueinforight h2{ color: #000; font-size: 2.1vw; line-height: 2.4vw; padding-bottom: 2vw; } .venueMApInner .venueinforight p{ color: #000; font-size: 1.2vw; line-height: 1.7vw; padding-bottom: 2vw; } .mapframe{ height: 100%; position: relative; } .mapframe iframe{ width: 600px; height: 350px; } .mapframe img{ height: 100%; } .smallvenueimg{ position: absolute; bottom:20px; left:20px; width: 200px; } .smallvenueimg img{ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25), 0 2px 10px rgba(0, 0, 0, 0.15); border-radius: 10px; } /********* FOOTER **************/ footer.mainfooter{ padding: 70px 0 50px 0px; background-image: url(../images/footer-bg.png); background-position: center; background-size: 100% 100%; background-repeat: no-repeat; position: relative; overflow: hidden; } .mainfooter { padding: 20px 0 15px 0; background: linear-gradient(200deg, #00a5ba, #0190a6, #027c91, #02697d, #025669, #014455, #013241, #00222e); } .BorderLine { width: 100%; border-bottom: 1px solid #FFFFFF; opacity: .6; margin: 0px 0 10px 0 !Important; height: 0px; } .FooterLogo { width: 50%; } .FooterMenu { margin: 0 0 10px 0; } .FooterMenu ul { margin: 0; padding: 0; } .FooterMenu ul li.mb-1 { margin-bottom: 0.325rem !important; } .FooterMenu ul li span.bi { font-size: 18px; line-height: 1.5; background: #00d7d4; -webkit-background-clip: text; -moz-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .footerTimeText { margin-top: 30px; } .footerTimeText h2 { font-size: 18px; margin: 0; padding: 0; color: #FFFFFF; margin-bottom: 10px; text-transform: capitalize; font-style: italic; font-weight: 400 !important; } .footer-social { margin-top: 40px; } .footer-social ul { margin: 0; padding: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .FooterMenu ul li { list-style: none; } .footer-social li { display: inline-block; margin: 0 10px; } .FooterMenu ul li a { padding-bottom: 2px; border-bottom: 1px solid transparent; transition: all .3s ease-in-out 0s; -webkit-transition: all .3s ease-in-out 0s; -o-transition: all .3s ease-in-out 0s; -moz-transition: all .3s ease-in-out 0s; -ms-transition: all .3s ease-in-out 0s; } .footer-social li a span { position: relative; color: #FFFFFF; font-size: 24px; } .FooterMenu h3 { font-size: 2.7vw; text-transform: uppercase; font-weight: 600; color: #c9ff00 !important; } .FooterMenu h4 { color: #FFFFFF; font-size: 1.2vw; letter-spacing: 1px; font-weight: 600; text-transform: capitalize; margin: 0 0 5px; } .FooterMenu ul li, .FooterMenu ul li a { color: #FFFFFF; font-size: 1.0vw; font-weight: 400; } .mainfooter .ctabutton01 { position: relative; text-align: center; margin-bottom: 1rem; } .mainfooter .ctabutton01 .redbutton01 { width: 90%; display: block; text-align: center; border: #FFFFFF solid 3px; background: transparent; border-radius: 5rem; -webkit-border-radius: 5rem; -moz-border-radius: 5rem; -ms-border-radius: 5rem; -o-border-radius: 5rem; font-size: 1.0vw; } .mainfooter .redbutton01 { position: relative; z-index: 1; display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; color: #FFFFFF; font-size: 1vw; line-height: 1.2vw; padding:13px 10px; font-weight: 400; text-transform: uppercase; transition: all 0.4s; border-radius: 8px; outline: none; -webkit-transition: all 0.4s; -moz-transition: all 0.4s; -ms-transition: all 0.4s; -o-transition: all 0.4s; -webkit-border-radius: 8px; -moz-border-radius: 8px; -ms-border-radius: 8px; -o-border-radius: 8px; } .footer-bottom { padding: 8px 15px 8px 15px; margin-top: 10px !important; } .copyrightText { text-align: left; } ul.quiklinks li { display: inline-block; list-style: none; font-size: 18px; color: #FFFFFF; } .quiklinks li a { color: #FFFFFF !important; } .designedby p { font-size: 18px; text-align: right; color: #FFFFFF; } .designedby p img { height: 20px; opacity: 0.7; -webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1); margin: 0px -3px 0px 3px; } .designedby p a { color: #FFFFFF; } .footer-bottom { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 15px 10px; background: #e5e4e436; border-radius: 50px; color: #FFFFFF !important; font-size: 0.9vw; -webkit-border-radius: 50px; -moz-border-radius: 50px; -ms-border-radius: 50px; -o-border-radius: 50px; } .FooterInnerWrapper .ctabutton01 .redbutton01 span { padding: 0; background: transparent; } @media(max-width:1500px) { .FooterMenu ul li, .FooterMenu ul li a, .ctabutton01 .redbutton01{font-size:12px} .FooterMenu h3 { font-size: 28px;} ul.quiklinks li{font-size:14px} .designedby p { font-size: 14px !important; } } @media(max-width:767px){ ul.quiklinks { text-align: center; } } .footer-btn-space { padding-top: 100px; } .three-col-space { padding-top: 50px; } .ft-organisedBy{ padding-top: 30px; } .ft-organisedBy h5{ font-size: 16px; font-weight: 700; text-transform: uppercase; color: #fff; padding-bottom: 10px; } .ft-organisedBy img{ width: 50%; } .logoSwiperTop .swiper-wrapper, .logoSwiperBottom .swiper-wrapper{ transition-timing-function: linear !important; } .swiper.logoSwiperTop { margin-bottom: 20px; } .logoSwiperTop .InnerShowLogoBox a, .logoSwiperBottom .InnerShowLogoBox a{ height: 8vw; } @media only screen and (min-width: 320px) and (max-width: 768px) { .logoSwiperTop .InnerShowLogoBox a, .logoSwiperBottom .InnerShowLogoBox a{ height: 90px; } }