html,
body {
height: 100%;
margin: 0;
}
body {
margin: 0;
padding: 0;
font-family: "Outfit", serif;
font-optical-sizing: auto;
font-style: normal;
color: #212121;
/* background-color: #f7f7f4;*/
display: flex;
flex-direction: column;
/*background-color: #f0f0f0;*/
background-color: #ffffff;
font-size: 15px;
}
/* Typography */
.gxcpl-headline-1 {
font-family: "Outfit", serif;
font-weight: 300;
font-size: 96px;
letter-spacing: -1.5px;
}
.gxcpl-headline-2 {
font-family: "Outfit", serif;
font-weight: 300;
font-size: 60px;
letter-spacing: -0.5px;
}
.gxcpl-headline-3 {
font-family: "Outfit", serif;
font-weight: 400;
font-size: 48px;
letter-spacing: 0px;
}
.gxcpl-headline-4 {
font-family: "Outfit", serif;
font-weight: 400;
font-size: 34px;
letter-spacing: 0.25px;
}
.gxcpl-headline-5 {
font-family: "Outfit", serif;
font-weight: 400;
font-size: 24px;
letter-spacing: 0px;
}
.gxcpl-headline-6 {
font-family: "Outfit", serif;
font-weight: 500;
font-size: 20px;
letter-spacing: 0.15px;
}
.gxcpl-subtitle-1 {
font-family: "Outfit", serif;
font-weight: 400;
font-size: 17px;
letter-spacing: 0.15px;
}
.gxcpl-subtitle-2 {
font-family: "Outfit", serif;
font-weight: 500;
font-size: 15px;
letter-spacing: 0.1px;
}
.gxcpl-body-1 {
font-family: "Outfit", serif;
font-weight: 400;
font-size: 16px;
letter-spacing: 0.5px;
}
.gxcpl-body-2 {
font-family: "Outfit", serif;
font-weight: 400;
font-size: 15px;
letter-spacing: 0.25px;
}
.gxcpl-button {
font-family: "Outfit", serif;
font-weight: 600;
font-size: 14px;
letter-spacing: 1.25px;
text-transform: uppercase;
}
.gxcpl-caption {
font-family: "Outfit", serif;
font-weight: 400;
font-size: 12px;
letter-spacing: 0.4px;
}
.gxcpl-overline {
font-family: "Outfit", serif;
font-weight: 400;
font-size: 10px;
letter-spacing: 1.5px;
text-transform: uppercase;
}
/* Typography */
/* Shadow */
.gxcpl-shadow-1 {
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
transition: all 0.3s cubic-bezier(.25,.8,.25,1);
}
.gxcpl-shadow-1:hover {
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
.gxcpl-shadow-2 {
box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
}
.gxcpl-shadow-3 {
box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}
.gxcpl-shadow-4 {
box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
}
.gxcpl-shadow-5 {
box-shadow: 0 19px 38px rgba(0,0,0,0.30), 0 15px 12px rgba(0,0,0,0.22);
}
/* Ripple */
.gxcpl-rpl {
position: relative;
overflow: hidden;
width: 40px;
height: 40px;
padding: 8px 0 8px 8px;
/*margin: 8px;*/
border-radius: 50%;
}
.gxcpl-rpl-spacer {
margin:0;
margin-bottom:10px;
}
.ripple {
position: absolute;
width: 2px;
height: 2px;
animation-name: ripple;
animation-duration: 1s;
opacity: 0;
border-radius: 50%;
}
@keyframes ripple {
0% {
opacity: .4;
transform: scale(0);
background: #000;
}
100% {
opacity: 0;
transform: scale(100);
background: #000;
}
}
/* Ripple */
/* Shadow */
/* Color Theme */
.gxcpl-bg-dark-primary {
/*background-color: #D32F2F;*/
background-color: #980008;
color: #ffffff !important;
}
.gxcpl-bg-light-primary {
background-color: #FFCDD2;
}
.gxcpl-bg-primary {
background-color: #F44336;
}
.gxcpl-bg-accent {
background-color: #FFC107;
}
hr.gxcpl-hr {
border-color: rgba(0,0,0,0.15);
opacity: 1;
box-shadow: none;
}
hr.gxcpl-hr::before {
content: "";
width: 10%;
display: block;
height: 3px;
background-color: #FFC107;
opacity: 1;
}
/* Color Theme */
/* Global Content Spacing */
main > .container {
/*padding-top: 60px;*/
}
/* Global Content Spacing */
/* App Bar: Top */
.gxcpl-top-app-bar {
height: 56px;
padding: 16px;
display: flex;
align-items: center;
justify-content: start;
}
.gxcpl-me-24 {
margin-right: 24px;
}
.material-symbols-outlined {
font-size: 24px; /* Adjust icon size if necessary */
line-height: 28px; /* Ensures the icon is vertically centered */
display: inline-block; /* Keeps the icon aligned within the flexbox */
}
/* App Bar: Top */
/* Navigation Drawer */
.offcanvas {
width: 300px !important;
}
img.gxcpl-drawer-logo {
max-width: 100%;
}
.offcanvas-header {
border-bottom: 1px solid rgba(0,0,0,0.1);
}
.offcanvas-body {
padding: 8px;
}
ul.gxcpl-drawer-items {
list-style: none;
padding: 0;
}
ul.gxcpl-drawer-items > a {
text-decoration: none;
color: #212121;
}
ul.gxcpl-drawer-items > a > li {
width: 100%;
height: 48px;
line-height: 48px;
padding: 0px 8px;
border-radius: 6px;
margin-bottom: 10px;
}
ul.gxcpl-drawer-items > a > li.active {
background-color: #980008;
color: #ffffff;
}
ul.gxcpl-drawer-items > a > li:hover {
background-color: #980008;
color: #ffffff;
}
/*.gxcpl-menu-drawer {
display: inline-flex;
vertical-align: top;
padding: 12px 12px 12px 8px;
cursor: pointer;
}*/
/* Single Link */
/* Dropdown */
.accordion-button {
height: 48px;
line-height: 48px;
margin-bottom: 10px;
border-radius: 6px !important;
padding: 0 8px 0 8px;
}
.accordion-button:focus {
outline:0 !important;
box-shadow: none;
border-color: rgba(0,0,0,0);
background-color: #980008;
color: #ffffff;
}
.accordion-button:hover {
background-color: #980008;
color: #ffffff;
}
.accordion-button:after {
background-image: url("data:image/svg+xml,") !important;
}
.accordion-button:not(.collapsed) {
background-color: #980008;
color: #ffffff;
}
.list-group-item {
max-width: 95%;
height: 48px;
/*line-height: 31px;*/
line-height: normal;
margin-left: 13px;
margin-bottom: 10px;
border-radius: 6px !important;
border-width: 0px !important;
display: flex;
align-items: center;
}
.list-group-item-action:hover,
.list-group-item-action:focus {
background-color: #980008;
color: #ffffff;
}
.list-group-item.active {
background-color: #980008;
}
/* Dropdown */
/* Navigation Drawer */
/* Header Logo and Social */
section#logo-social {
width: 100%;
margin-top: 56px;
}
.gxcpl-social-icons {
display: flex;
flex-wrap: wrap;
justify-content: center;
padding: 0;
list-style: none;
margin: 0;
}
.gxcpl-social-icons li {
margin: 5px;
}
.gxcpl-social-icons a {
display: flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
background-color: #f5f5f5; /* or any background color of your choice */
border-radius: 50%;
text-align: center;
text-decoration: none;
transition: background-color 0.3s ease;
color: #a7a7a7;
}
.gxcpl-social-icons a:hover {
background-color: #ececec; /* or any hover color of your choice */
}
@media (max-width: 768px) {
.gxcpl-social-icons li {
margin: 5px;
}
.gxcpl-social-icons a {
width: 48px;
height: 48px;
}
}
/* Header Logo and Social */
/* Banner */
section#banner {
/*margin-top: 56px !important;*/
}
.gxcpl-text-shadow {
text-shadow: 2px 2px 4px rgba(0,0,0,0.35);
}
.gxcpl-nav-bg {
width: 42px;
height: 42px;
background-color: #ffffff;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
}
.carousel-control-prev > .material-symbols-outlined,
.carousel-control-next > .material-symbols-outlined {
color: #212121 !important;
}
/* Page Banner */
.gxcpl-page-banner {
margin-top: 56px !important;
color: #ffffff;
}
.hero-section {
position: relative;
width: 100%;
height: 300px; /* Adjust height as needed */
background-image: url(../images/global-page-banner-dark.jpg); /* Replace with your hero image */
background-size: cover;
background-position: center;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
z-index: 1;
}
.hero-content {
position: relative;
text-align: center;
color: #ffffff;
text-shadow: 2px 2px 4px rgba(0,0,0,1);
z-index: 2;
}
.hero-section::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
/*background: rgba(0, 0, 0, 0.5);*/
z-index: 1;
}
.breadcrumb {
background-color: transparent;
margin-top: 10px;
color: #c5c6cb;
text-shadow: 0px 0px 4px rgba(0,0,0,1);
}
.breadcrumb a {
text-decoration: none;
color: inherit;
border-bottom: 1px solid #ffffff;
}
.breadcrumb .active {
color: #ffffff; /* Active breadcrumb color */
}
.breadcrumb-item + .breadcrumb-item::before {
content: "\f105"; /* Replace with your desired Font Awesome icon code */
font-family: "Font Awesome 5 Free"; /* Ensure you have Font Awesome loaded */
font-weight: 900; /* Make sure to use the solid style if needed */
color: #ffffff; /* Adjust the color of the icon */
margin: 0 5px; /* Space between the icon and text */
}
/* Optional: Hide the default slash */
.breadcrumb-item + .breadcrumb-item {
}
@media (max-width: 768px) {
.hero-section {
height: 200px;
}
}
/* Page Banner */
/* Banner */
/* Home Page */
/* Client Logo Carousel */
section#gxcpl-client-hp {
background-color: #eeeeee;
}
/*@keyframes scroll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(calc(-250px * 7));
}
}
.slider {
height: 100px;
margin: auto;
overflow: hidden;
position: relative;
width: auto;
opacity: 0.2;
filter: brightness(1) grayscale(1);
}
.slider .slide-track {
animation: scroll 40s linear infinite;
display: flex;
}
.slider .slide {
height: 100px;
width: 250px;
}*/
@keyframes scroll {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-100%);
}
}
.slider {
height: 100px;
margin: auto;
overflow: hidden;
position: relative;
width: 100%; /* Full width of the screen */
opacity: 0.2;
filter: brightness(1) grayscale(1);
}
.slider .slide-track {
display: flex;
animation: scroll 40s linear infinite;
}
.slider .slide {
/*height: 100px;*/
width: 250px;
display: flex;
justify-content: center;
align-items: center;
}
.slider .slide img {
height: auto;
max-width: 250px;
}
.slider:hover .slide-track {
animation-play-state: paused; /* Optional: pause the animation on hover */
}
/* Client Logo Carousel */
/* Service Section */
.gxcpl-service-card {
position: relative;
width: 100%;
height: 400px;
overflow: hidden;
}
.gxcpl-service-card::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: var(--bg-image);
background-size: cover;
filter: grayscale(100%);
transition: filter 0.3s ease-in-out;
z-index: 0;
}
.gxcpl-service-card:hover::before {
filter: grayscale(0%) blur(5px);
}
.gxcpl-service-card > .card-body {
position: relative;
z-index: 1;
}
h2.gxcpl-headline-5 {
text-shadow: 2px 2px 4px rgba(0,0,0,1);
}
.gxcpl-service-card > .card-body > p.gxcpl-display-hover {
opacity: 0;
transition: all 0.3s ease-in-out;
position: absolute;
bottom: 20px;
width: 80% !important;
/*text-shadow: 2px 2px 4px rgba(0,0,0,1);*/
}
.gxcpl-service-card:hover > .card-body > p.gxcpl-display-hover {
opacity: 1;
color: #ffffff;
}
@media (max-width: 768px) {
.gxcpl-service-card {
max-width: 261px;
margin: 0 auto;
margin-bottom: 1rem;
}
.gxcpl-service-card::before {
filter: grayscale(0%) blur(5px);
}
.gxcpl-service-card > .card-body > p.gxcpl-display-hover {
opacity: 1;
color: #ffffff;
}
}
/* Service Section */
section#gxcpl-about,
section#gxcpl-join-whatsapp {
background-color: #eeeeee;
}
img.gxcpl-whatsapp-community-image {
width: 150px;
height: 150px;
margin: auto;
display: block;
border-radius: 8px;
}
/* About */
.gxcpl-misvis-icon {
width: 50px;
height: 50px;
border-radius: 50%;
background-color: rgba(0,0,0,0.25);
display: flex;
justify-content: center;
align-items: center;
}
.gxcpl-misvis-hover {
transition: all 0.5s ease !important;
}
.gxcpl-misvis-hover:hover {
background: url(../images/home/why-us-bg.png);
background-size: cover;
box-shadow: inset 0 -120px 378px -70px #000, inset 0 -120px 198px -100px #000;
transition: all 0.5s ease !important;
}
@media (max-width: 768px) {
.gxcpl-misvis-hover {
background: url(../images/home/why-us-bg.png);
background-size: cover;
box-shadow: inset 0 -120px 378px -70px #000, inset 0 -120px 198px -100px #000;
}
}
/* About */
/* Why Us */
.sucess_storySec {}
.why-us {
display: flex;
flex-direction: row;
align-items: center;
overflow: hidden;
}
.why-us .options {
display: flex;
flex-direction: row;
align-items: stretch;
overflow: hidden;
min-width: 100%;
max-width: 100%;
height: 400px;
margin-bottom: 60px;
}
.why-us .options .option {
position: relative;
overflow: hidden;
flex: 1;
margin: 10px;
background: var(--optionBackground, #e6e9ed);
background-size: cover;
background-position: center;
cursor: pointer;
border-radius: 30px;
transition: all 0.5s ease-out; /* Ensure this is set */
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
.why-us .options .option.active {
flex-grow: 3;
transform: scale(1);
transition: all 0.5s ease-out; /* Ensure this is set */
}
.why-us .options .option.active .why-us-shadow {
box-shadow: inset 0 -120px 378px -70px #000, inset 0 -120px 198px -100px #000;
}
.why-us .options .option .why-us-shadow {
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 100%;
transition: all 0.5s ease-out; /* Ensure this is set */
}
.why-us .options .option .label {
position: absolute;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
top: 0;
left: 0;
right: 0;
bottom: 0;
color: #fff;
text-align: center;
transition: all 0.5s ease-out; /* Ensure this is set */
padding: 20px; /* Ensuring content has some padding */
}
.why-us .options .option .label .icon {
position: absolute;
top: 20px;
left: 50%;
transform: translateX(-50%);
width: 100%; /* Ensures the icon stays centered */
text-align: center; /* Centers the h2 within the icon container */
}
.why-us .options .option .label .icon h2 {
font-weight: 600;
font-size: 60px;
margin: 0;
text-shadow: 3px 7px 4px rgba(10, 10, 10, 0.47);
}
.why-us .options .option .label .info .main {
/* font-weight: 600;*/
text-shadow: 3px 2px 1px rgba(0, 0, 0, 0.4);
opacity: 0;
transition: all 0.5s ease-out; /* Ensure this is set */
margin-top: 10px; /* Adding some spacing between elements */
white-space: pre-wrap; /* Ensuring text breaks properly */
}
.why-us .options .option.active .label .info .main {
opacity: 1;
}
/* Why Us */
/* Why Us: Mobile */
.why-us-mobile-bg {
/* background:url(../images/home/why-us-bg.png);*/
background-size: cover;
background-repeat: no-repeat;
box-shadow: inset 0 -120px 378px -70px #000, inset 0 -120px 198px -100px #000;
}
.why-us-mobile {
color: #ffffff;
display: flex;
flex-direction: row;
align-items: stretch;
overflow: hidden;
min-width: 100%;
max-width: 100%;
height: 300px;
margin-bottom: 60px;
}
.why-us-mobile-shadow {
box-shadow: inset 0 -120px 378px -70px #000, inset 0 -120px 198px -100px #000;
}
.why-us-mobile .label {
position: absolute;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
top: 0;
left: 0;
right: 0;
bottom: 0;
color: #fff;
text-align: center;
padding: 20px;
}
.why-us-mobile .label .icon {
position: absolute;
top: 20px;
left: 50%;
transform: translateX(-50%);
width: 100%;
text-align: center;
}
.why-us-mobile .label .icon h2 {
font-weight: 600;
font-size: 60px;
margin: 0;
text-shadow: 3px 7px 4px rgba(10, 10, 10, 0.47);
}
.why-us-mobile .label .info .main {
text-shadow: 3px 2px 1px rgba(0, 0, 0, 0.4);
margin-top: 10px;
white-space: pre-wrap;
}
/* Why Us: Mobile */
/* Blog */
.gxcpl-blog-card {
}
.gxcpl-blog-card:hover {
}
.gxcpl-blog-card > img {
height: 137px;
}
a.gxcpl-blog-title,
.gxcpl-blog-title {
text-decoration: none;
color: #d32f2f;
}
/* Blog */
/* Sectors */
section#gxcpl-sector {
background-color: #eeeeee;
}
.gxcpl-custom-carousel {
height: 261px;
}
.carousel-item.gxcpl-carousel-item {
display: flex;
align-items: stretch;
justify-content: center;
min-height: 261px;
}
.carousel-item.gxcpl-carousel-item img {
height: 261px;
object-fit: cover;
max-width: 100%;
}
@media (max-width: 768px) {
.gxcpl-custom-carousel, .gxcpl-carousel-item {
height: auto;
width: 100%;
}
}
/* Sectors */
/* Client Testimonials */
.gxcpl-profile-container {
display: flex;
align-items: center;
}
.gxcpl-image-holder {
position: relative;
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
background-color: #e0e0e0;
border-radius: 50%;
overflow: hidden;
margin-right: 10px;
}
.gxcpl-image-holder img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.gxcpl-image-holder.gxcpl-no-image .gxcpl-initials {
display: block;
color: rgba(0,0,0,0.5);
}
.gxcpl-image-holder .gxcpl-initials {
display: none;
font-size: 16px;
}
.gxcpl-text-holder {
display: flex;
flex-direction: column;
}
.gxcpl-person-name {
color: #980008;
margin: 0;
}
.gxcpl-date {
color: #aaaaaa;
margin: 0;
}
/* Custom scrollbar styles */
.gxcpl-testimonial-container {
height: 100px;
overflow-y: scroll;
/* Firefox */
scrollbar-width: thin;
scrollbar-color: #888 transparent;
padding-right: 20px;
}
/* WebKit Browsers (Chrome, Safari, etc.) */
.gxcpl-testimonial-container::-webkit-scrollbar {
width: 8px;
}
.gxcpl-testimonial-container::-webkit-scrollbar-track {
background: transparent;
}
.gxcpl-testimonial-container::-webkit-scrollbar-thumb {
background: #888;
border-radius: 4px;
}
.gxcpl-testimonial-container::-webkit-scrollbar-thumb:hover {
background: #555;
}
/* Hide scrollbar buttons in WebKit-based browsers */
.gxcpl-testimonial-container::-webkit-scrollbar-button {
display: none;
}
.gxcpl-review-star {
color: #f2b806;
}
/* Client Testimonials */
/* Home Page */
/* About Page */
section#gxcpl-technology-stack {
}
.parallax-section {
background-attachment: fixed;
background-size: cover;
background-position: center;
padding: 50px 0;
color: #fff;
}
.tech-logo {
text-align: center;
/*margin-bottom: 30px;*/
text-shadow: 2px 2px 4px rgba(0,0,0,0.35);
}
.tech-logo img {
max-width: 100px;
height: auto;
}
@media (max-width: 768px) {
.tech-logo img {
max-width: 80px;
}
}
/* Management */
section#gxcpl-management-team {
}
.card.gxcpl-team-image {
position: relative;
overflow: hidden;
height: 100%;
}
.gxcpl-team-image-wrapper {
position: relative;
width: 100%;
padding-top: 100%; /* This creates a square aspect ratio container */
overflow: hidden;
}
.gxcpl-team-image-wrapper > img.gxcpl-team-member {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
filter: grayscale(100%);
transition: all 0.5s ease;
}
.gxcpl-team-image:hover .gxcpl-team-image-wrapper > img.gxcpl-team-member {
filter: grayscale(0%);
transform: scale(1.02);
cursor: pointer;
transition: all 0.5s ease;
}
.gxcpl-team-image-wrapper > img.gxcpl-college-logo,
img.gxcpl-college-logo {
width: auto;
height: 45px;
bottom: 10px;
right: 10px;
filter: brightness(0) invert(0.5) !important;
}
.card > .gxcpl-team-read-more {
position: absolute;
top: 0;
right: 0;
background-color: rgba(0,0,0,0.05);
color: rgba(0,0,0,0.5);
padding: 10px 15px;
z-index: 99;
}
.card > .gxcpl-team-read-more:hover {
cursor: pointer;
}
/* Management */
/* Advisory Committee */
ul.gxcpl-ab-social {
list-style: none;
padding-left: 0;
}
ul.gxcpl-ab-social > li {
display: inline-block;
}
ul.gxcpl-ab-social > li > a {
color: #212121;
}
/* Advisory Committee */
/* Team */
.gxcpl-team-card {
height: 300px;
width: 100%;
transform-style: preserve-3d;
perspective: 600px;
transition: 0.5s;
}
.gxcpl-team-card:hover .gxcpl-team-card-front {
transform: rotateX(-180deg);
}
.gxcpl-team-card:hover .gxcpl-team-card-back {
transform: rotateX(0deg);
}
.gxcpl-team-card-front {
height: 100%;
width: 100%;
background-position: 50% 50%;
background-size: cover;
position: absolute;
top: 0;
left: 0;
background-color: #000000;
backface-visibility: hidden;
transform: rotateX(0deg);
transition: 0.5s;
border: 1px solid rgba(0, 0, 0, 0.25);
}
.gxcpl-team-card-back {
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
background-color: #980008;
box-shadow: inset 0 -120px 378px -70px #000, inset 0 -120px 198px -100px #000;
backface-visibility: hidden;
transform: rotateX(180deg);
transition: 0.5s;
color: #ffffff;
text-align: center;
}
.gxcpl-team-card-back > img {
width: 80px;
height: 80px;
border-radius: 50%;
box-shadow: 0 10px 20px #000;
}
.gxcpl-team-card-back h2 {
margin: 20px auto 20px auto;
font-size: 26px;
}
.gxcpl-team-card-back h2 span {
font-size: 20px;
}
.gxcpl-team-card-back a {
height: 20px;
width: 20px;
padding: 5px 15px;
border-radius: 4px;
line-height: 20px;
text-decoration: none;
color: #ffffff;
}
@media (max-width: 768px) {
.gxcpl-team-card {
transform: none; /* Disable the perspective and flipping */
}
.gxcpl-team-card-front {
display: none; /* Hide the front side */
}
.gxcpl-team-card-back {
transform: none; /* Reset any transformations, show back side as normal */
position: relative; /* Re-position for natural flow */
width: 80%;
margin: auto;
}
}
/* Team */
/* About Page */
/* Client Page */
/* List View */
.gxcpl-client-card {
overflow: hidden;
transition: all ease 0.3s !important;
}
.gxcpl-client-card > div > img,
.gxcpl-client-card > div > .triangle {
transition: all ease 0.3s;
}
.gxcpl-client-card:hover > div > img {
overflow: hidden;
transform: scale(1.05);
transition: all ease 0.3s;
}
.gxcpl-client-card:hover > div > .triangle {
border-width: 0 0 50px 356px;
transition: all ease 0.3s;
}
.triangle {
width: 0;
height: 0;
border-style: solid;
border-width: 0 0 60px 356px; /* Adjust these values for the triangle size */
border-color: transparent transparent #ffffff transparent;
position: absolute;
bottom: 0; /* Aligns the triangle with the bottom of the image */
left: 0; /* Aligns the triangle with the left edge of the image */
z-index: 10; /* Ensures the triangle is above the image */
}
/* List View */
/* Page View */
section#gxcpl-client-project-details {
}
img.gxcpl-client-company-logo {
width: 50%;
height: auto;
}
img.gxcpl-client-company-logo-approach {
width: 75%;
height: auto;
}
section#gxcpl-client-project-solution {
background-color: #eeeeee;
}
section#gxcpl-client-project-display {
}
/* Page View */
/* Client Page */
/* Product Page */
/* Product List */
section#gxcpl-product-list {
padding-top: 75px;
padding-bottom: 75px;
}
section#gxcpl-product-list-alt {
background-color: #eeeeee;
padding-top: 75px;
padding-bottom: 75px;
}
@media (max-width: 768px) {
section#gxcpl-product-list {
padding-top: 25px;
padding-bottom: 25px;
}
section#gxcpl-product-list-alt {
background-color: #eeeeee;
padding-top: 25px;
padding-bottom: 25px;
}
}
ul.gxcpl-product-features {
padding-left: 0;
list-style: none;
}
ul.gxcpl-product-features > li {
}
/* Product List */
/* Product Page */
section#gxcpl-product-details {
}
section#gxcpl-product-details-alt {
background-color: #eeeeee;
}
section#gxcpl-product-client {
background: #ffffff;
}
.gxcpl-product-banner {
background-size: cover;
}
#prod_enq_query {
height: 150px;
}
/* Product Page */
/* Blog */
/* Blog List */
/* Blog List */
/* Blog Page */
ul.gxcpl-blog-siderbar-list {
padding-left: 0;
list-style: none;
}
ul.gxcpl-blog-siderbar-list > li {
border-bottom: 1px solid rgba(0, 0, 0, 0.15);
transition: background-color ease 0.5s;
}
ul.gxcpl-blog-siderbar-list > li > a {
color: #212121;
padding: 15px 20px;
display: flex;
justify-content: space-between;
align-items: center;
text-decoration: none;
}
ul.gxcpl-blog-siderbar-list > li > a:hover {
background-color: #f4f5f6;
}
ul.gxcpl-blog-siderbar-list > li:last-child {
border-bottom: 0;
}
/* Blog Page */
/* Blog */
/* Policy Content */
section#gxcpl-policy-content {
}
/* List View */
.file {
width: 100%;
max-width: 150px; /* Adjust as needed */
height: 200px; /* Adjust as needed */
position: relative;
perspective: 1000px; /* Adds perspective to make the flip effect look more realistic */
background-color: #f8f9fa; /* Subtle shade of grey for the file */
margin: auto;
display: block;
}
.file-cover {
width: 100%;
height: 100%;
background-color: #eeeeee;
border: 2px solid #cccccc;
border-radius: 5px;
position: absolute;
top: 0;
left: 0;
transition: transform 0.6s ease;
transform-origin: left;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
z-index: 2; /* Ensure cover is above content */
display: flex;
justify-content: center;
align-items: center;
color: #333333;
font-size: 16px;
flex-direction: column; /* Stack image and text vertically */
}
.file-content {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
position: relative;
z-index: 1; /* Ensure content is behind the cover */
background-color: #eeeeee;
border: 2px solid #cccccc; /* Border around the page */
border-radius: 5px;
}
.file-name {
height: 75px;
margin: 0;
text-align: center;
font-size: 16px;
display: flex;
justify-content: center;
align-items: center;
}
.file-image {
height: 125px;
display: flex;
justify-content: center;
align-items: center;
}
.file-image img {
max-height: auto;
max-width: 75%;
}
.file-page {
width: calc(100% - 20px); /* Slightly smaller than the file content */
height: calc(100% - 20px); /* Slightly smaller than the file content */
background-color: #ffffff; /* White color for the page */
border: 1px solid rgba(0,0,0,0.15); /* Border around the page */
padding: 5px;
position: absolute;
top: 5px; /* Positioned inside the file */
left: 5px; /* Positioned inside the file */
box-sizing: border-box;
margin: 5px 0px 5px 0;
}
.file-page-lines {
height: 100%;
width: 100%;
padding: 10px;
box-sizing: border-box;
position: relative;
}
.file-page-lines::before {
content: "";
display: block;
width: 100%;
height: 10px; /* Height of the broad lines */
background-color: #ccc; /* Color of the broad lines */
margin-bottom: 5px; /* Spacing after the broad lines */
}
.file-page-lines::after {
content: "";
display: block;
height: calc(100% - 40px); /* Remaining height for the repeating lines */
width: 100%;
background: repeating-linear-gradient(
to bottom,
#ccc,
#fff 3px,
#ccc 3px,
#fff 6px
);
position: absolute;
top: 30px; /* Positioning the repeating lines after the broad lines and spacing */
left: 0;
}
.file:hover .file-cover {
transform: rotateY(-45deg); /* Rotate cover to simulate opening effect */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Adjust shadow to match the open state */
}
/* List View */
/* Policy Content */
/* Services Page */
/* List View */
/* List View */
/* Page View */
section#gxcpl-service-details {
}
section#gxcpl-service-package {
background-color: #eeeeee;
}
/* Page View */
/* Services Page */
/* Contact Us Page */
section#gxcpl-contact-map {
}
#map {
width: 100%;
height: 450px;
}
#contact_message {
height: 150px;
}
section#gxcpl-contact-form {
background-color: #eeeeee;
}
.nav-pills .nav-link {
background-color: #a1a2a3 !important;
border-radius: 0;
margin-right: 10px;
color: #212121;
}
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
background-color: rgba(0,0,0,0.15) !important;
border-left: 4px solid #980008;
color: #212121;
}
.tab-pane {
background: rgba(0,0,0,0.15);
}
.nav-scroller {
overflow-x: auto;
white-space: nowrap;
}
.nav-scroller .nav {
display: flex;
flex-wrap: nowrap;
}
.nav-link {
flex: 0 0 auto;
margin-right: 0.5rem;
}
@media (max-width: 767.98px) {
.nav-link {
margin-right: 0.25rem;
font-size: 0.875rem; /* Optional: Adjust font size for mobile */
}
}
/* Contact Form */
#f_contact_message {
height: 150px;
}
.gxcpl-error {
color: #980008;
}
/* Contact Form */
/* Contact Us Page */
/* Cetificate */
section#certificate {
background-color: #eeeeee;
}
img.gxcpl-cert-img {
width: 100%;
height: 150x;
border: 1px solid #c6c7c8;
border-radius: 4px;
padding: 4px;
object-fit: cover;
object-position: 0 0;
}
/* Cetificate */
/* Cookie Consent */
.cookie-consent {
position: fixed;
bottom: 40px;
left: 40px;
background-color: #efa61f;
padding: 10px;
/*box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);*/
width: 200px;
height: 200px;
border-radius: 50% 50% 50% 0;
z-index: 1000;
/*display: flex;*/
align-items: center;
}
#toggle {
position: absolute;
right: -10px;
top: -10px;
color: #980008;
}
.close-btn {
background-color: transparent;
border: none;
font-size: 20px;
cursor: pointer;
color: #888;
}
/* Cookie Consent */
/* Paginator */
div.pagination {
padding: 3px;
margin: 3px;
}
div.pagination a {
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
margin: 2px;
border: 1px solid #e0a800;
border-radius: 4px;
zoom: 100%;
text-decoration: none; /* no underline */
color: #212121;
background-color: #e0a800;
font-weight: bold;
}
div.pagination a:hover, div.pagination a:active {
border: 1px solid #980008;
background-color: #980008;
color: #ffffff;
}
div.pagination span.page_current {
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
margin: 2px;
border: 1px solid #980008;
border-radius: 4px;
* zoom: 100%;
font-weight: bold;
background-color: #980008;
color: #FFF;
}
div.pagination span.page_disabled {
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
margin: 2px;
border-radius: 4px;
border: 1px solid #a4a5a6;
* zoom: 100%;
color: #a4a5a6;
cursor: not-allowed;
}
* span.elipsis {zoom:100%}
/* Paginator */
/* Newsletter */
.gxcpl-heartbeat-timer {
font-size: 2rem;
color: #333;
animation: heartbeat 1s infinite;
}
@keyframes heartbeat {
0% { transform: scale(1.2); }
25% { transform: scale(1.4); }
50% { transform: scale(1.2); }
75% { transform: scale(1.4); }
100% { transform: scale(1.2); }
}
/* Newsletter */
/* Footer */
a.gxcpl-footer {
text-decoration: none;
color: #ffffff;
}
a.gxcpl-footer:hover {
border-bottom: 1px dotted rgba(255,255,255,1);
}
section#gxcpl-footer {
background-color: #282828;
color: rgba(255,255,255,1);
}
section#gxcpl-copyright {
background-color: #171717;
color: rgba(255,255,255,1);
}
hr.gxcpl-footer {
margin: 1rem 0;
color: inherit;
border: 0;
border-top-width: 0px;
border-top-style: none;
border-top-color: currentcolor;
border-top: var(--bs-border-width) solid;
opacity: 0.25;
}
/* Registrations, Certifications, etc */
@media (max-width: 768px) {
img.gxcpl-img-fluid {
width: 50% !important;
margin: 0 auto;
display: block;
}
}
/* Registrations, Certifications, etc */
/* Other Company Concerns */
ul.gxcpl-footer-concerns {
padding-left: 0;
list-style: none;
}
ul.gxcpl-footer-concerns > li {
margin: 0 40px 10px 0;
display: inline-block;
}
/* Other Company Concerns */
/* Legal, Links and Newsletter */
ul.gxcpl-footer-links {
padding-left: 0;
list-style: none;
}
ul.gxcpl-footer-links > li {
margin-bottom: 10px;
}
.gxcpl-btn-accent {
background-color: #FFC107;
color: #212529; /* Default Bootstrap text color */
border-color: #FFC107;
font-weight: 500;
transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.gxcpl-btn-accent:hover,
.gxcpl-btn-accent:focus {
background-color: #e0a800;
border-color: #d39e00;
color: #212529;
}
.gxcpl-btn-accent:active {
background-color: #d39e00 !important;
border-color: #c69500 !important;
color: #212529;
}
.gxcpl-btn-accent:disabled,
.gxcpl-btn-accent.disabled {
background-color: #FFC107;
border-color: #FFC107;
opacity: 0.65;
color: #212529;
cursor: not-allowed;
}
/* Legal, Links and Newsletter */
/* Social Media */
/* Footer Social Icons Container */
ul.gxcpl-footer-social-icons {
padding-left: 0;
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 20px; /* Space between each icon */
align-items: center; /* Vertically center align items */
}
/* Each as an individual social media icon container */
ul.gxcpl-footer-social-icons > li {
display: flex;
flex-direction: column;
align-items: center;
text-align: center; /* Center align text and icons */
}
/* Social media icon styling */
ul.gxcpl-footer-social-icons > li > a {
width: 48px;
height: 48px;
border-radius: 50%;
background-color: #1e1e1e;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 10px; /* Space between icon and social handle */
transition: background-color 0.3s ease, color 0.3s ease;
}
/* The inside the link, centering icons */
ul.gxcpl-footer-social-icons > li > a > i {
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
/* Social media handles styling */
.social-handle {
color: #ffffff; /* Adjust color if needed */
text-align: center;
}
/* Hover effects for social media icons */
a.facebook:hover {
background-color: #3b5998 !important;
color: #ffffff;
}
a.twitter:hover {
background-color: #1da1f2 !important;
color: #ffffff;
}
a.instagram:hover {
background-color: #e4405f !important;
color: #ffffff;
}
a.linkedin:hover {
background-color: #0077b5 !important;
color: #ffffff;
}
a.youtube:hover {
background-color: #ff0000 !important;
color: #ffffff;
}
a.github:hover {
background-color: #6e5494 !important;
color: #ffffff;
}
a.medium:hover {
background-color: #000000 !important;
color: #ffffff;
}
a.whatsapp:hover {
background-color: #25d366 !important;
color: #ffffff;
}
a.pinterest:hover {
background-color: #bd081c !important;
color: #ffffff;
}
a.threads:hover {
background-color: #000000 !important;
color: #ffffff;
}
/* Responsive layout for smaller screens */
@media (max-width: 768px) {
ul.gxcpl-footer-social-icons {
justify-content: space-between;
}
}
/* Social Media */
/* Badges */
ul.gxcpl-footer-badges {
padding-left: 0;
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 20px; /* Space between each icon */
align-items: center; /* Vertically center align items */
}
/* Each as an individual social media icon container */
ul.gxcpl-footer-badges > li {
display: flex;
flex-direction: column;
align-items: center;
text-align: center; /* Center align text and icons */
}
/* Social media icon styling */
ul.gxcpl-footer-badges > li > a {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 10px; /* Space between icon and social handle */
}
/* Badges */
/* Footer */
/* Floating Action Button */
.gxcpl-fab {
z-index: 100;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
color: #ffffff;
}
.gxcpl-whatsapp {
position: fixed;
bottom: 120px;
right: 24px;
width: 48px;
height: 48px;
background-color: #0cc143;
}
.gxcpl-calling {
position: fixed;
bottom: 25px;
right: 25px;
width: 48px;
height: 48px;
background-color: #2962FF;
animation: heartbeat 2.4s linear infinite;
}
@keyframes heartbeat {
0% {
transform: scale(1);
}
25% {
transform: scale(1);
}
30% {
transform: scale(1.3);
}
50% {
transform: scale(1.1);
}
70% {
transform: scale(1.3);
}
100% {
transform: scale(1);
}
}
/* Floating Action Button */
/* Downloads */
/* Instructions Accordion */
.gxcpl-accordion-button {
background-color: #980008 !important;
color: #fff !important;
}
.gxcpl-accordion-button:not(.collapsed) {
background-color: #980008 !important;
color: #fff !important;
box-shadow: none;
}
.gxcpl-accordion-button:focus {
box-shadow: 0 0 0 0.25rem rgba(152,0,8,0.25);
background-color: #980008 !important;
color: #fff !important;
}
/* Downloads */