/*
Theme Name: Astra Child
Description: Astra Child Theme
Author: Your Name
Template: astra
Version: 1.0.5
*/
/* ========================================
FONT DISPLAY FIX - Add to style.css
Saves 70ms on PageSpeed
======================================== */
/* Amazon Ember Font with font-display: swap */
@font-face {
font-family: 'Amazon Ember';
src: url('...10/Amazon-Ember-Bold.ttf');
font-weight: 700;
font-style: normal;
font-display: swap; /* CRITICAL - Forces immediate text display */
}
@font-face {
font-family: 'Amazon Ember';
src: url('...10/Amazon-Ember.ttf');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Amazon Ember';
src: url('...10/Amazon-Ember-Medium.ttf');
font-weight: 500;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: 'Amazon Ember';
src: url('...10/Amazon-Ember-Light.ttf');
font-weight: 300;
font-style: normal;
font-display: swap;
}
/* Preload most critical fonts */
/* Add this link tag to your theme's header.php, inside section:
*/
html {
scroll-behavior: smooth;
}
.aws-carousel img.swiper-slide-image {
height: 164px;
width: 155px !important;
object-fit: cover;
}
.aws-certification img.swiper-slide-image {
height: 129px;
width: 131px !important;
object-fit: cover;
}
.contact-info span.elementor-icon-list-icon {
background-color: #06156b;
width: 38px !important;
height: 38px;
padding: 4px 0px 0px 4px;
border-radius: 100px;
display: flex;
align-content: center;
justify-content: center;
align-items: center;
margin-right:10px;
}
.content-area .elementor-widget-theme-post-content h1, .content-area .elementor-widget-theme-post-content h2, .content-area .elementor-widget-theme-post-content h3, .content-area .elementor-widget-theme-post-content h4, .content-area .elementor-widget-theme-post-content h5, .content-area .elementor-widget-theme-post-content h6 {
margin-top: 0.5em;
margin-bottom: calc(0.3em + 10px);
}
.post-categoriese ul {
margin-left: 0px !important;
list-style: none;
}
.post-categoriese h5 {
display: none;
}
.post-categoriese li.cat-item {
margin-bottom: 7px;
color: #000 !important;
transition:.2s ease-in-out;
}
.post-categoriese a{
color:#000;
}
.post-categoriese li.cat-item:hover {
transform:translateX(-2px);
}
.e-n-tab-title {
position: relative;
z-index: 1;
border: 2px solid #178CE3 !important;
border-radius: 6px;
overflow: hidden;
border-radius: 100px !important;
}
/* Gradient text */
.e-n-tab-title-text {
background: linear-gradient(90deg, #178CE3, #7263E1);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
color: transparent;
}
.e-n-tabs-heading {
padding: 5px 0;
}
.featured-image a {
max-width: 100% !important;
min-width: 100% !important;
}
button.slick-next.slick-arrow{
height: 0;
width: 0;
right: -20px;
}
button.slick-prev.slick-arrow {
height: 0;
width: 0;
left: -20px;
}
.cstm_image-gallery div#gallery-1 {
display: flex !important;
}
a.ekit_close-side-widget {
position: relative;
z-index: 99999999 !important;
border: 0px !important;
}
.testimonial-carousel .elementor-testimonial-job {
font-size: 14px !important;
line-height: 24px !important;
}
.testimonial-carousel .elementor-testimonial-name {
font-size: 16px !important;
}
.faq_cstm .e-n-accordion-item-title-text::before {
content: '';
height: 30px;
width: 30px;
margin-right: 18px;
position: absolute;
top: 22;
left: 0;
display: block;
border-radius: 100px;
background-image: url(https://kotechnologies.co.uk/wp-content/uploads/2025/12/Group-1707484789.svg);
padding: 5px;
background-size: 85%;
background-position: center;
background-repeat: no-repeat;
}
.hover-box {
position: relative;
background: #f5f5f7;
border-radius: 16px;
transition: all 0.3s ease;
cursor:pointer;
}
.hover-box::before {
content: '';
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
border-radius: 20px;
opacity: 0;
transition: opacity 0.3s ease;
z-index: -1;
filter: blur(14px);
}
.aws-solutions .hover-box::before {
background: #ffbd59;
}
.datadog-solutions .hover-box::before {
background: #61c2f9;
}
.alibaba-cloud-solutions .hover-box::before {
background: #ffb885;
}
.hashicorp-solutions .hover-box::before {
background: #a5a6a8;
}
.devops-solutions .hover-box::before {
background: #1057aecc;
}
.htslider-slider .slick-dots li button{
background-color:#06156b61 !important;
}
.htslider-slider .slick-dots li.slick-active button {
background-color:#06156b !important;
}
/* .hover-box::before {
content: '';
position: absolute;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
background: #ffbd59;
border-radius: 20px;
opacity: 0;
transition: opacity 0.3s ease;
z-index: -1;
filter: blur(14px);
} */
.hover-box:hover::before {
opacity: 1;
}
.hover-box::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #f5f5f7;
border-radius: 14px;
z-index: -1;
}
.ekit_sidebar-textwidget {
padding-top: 0px !important;
padding-inline: 10px !important;
}
.ekit-wid-con .ekit-sidebar-group .ekit_widget-heading {
padding: 12px !important;
}
.gradient-title span {
font-size: 4rem;
font-weight: bold;
background: linear-gradient(135deg, #7263E1, #178CE3);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
display: inline-block;
}
.glass {
background: linear-gradient(
180deg,
rgba(255, 255, 255, 0.10) 0%,
rgba(255, 255, 255, 0.00) 100%
);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px); /* For Safari */
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.20);
border-radius: 12px; /* optional: smooth corners */
border: 1px solid rgba(255, 255, 255, 0.15); /* light border for definition */
}
.arrow-btn span.elementor-button-content-wrapper {
display: flex;
align-content: center;
align-items: center;
gap:10px;
}
.arrow-btn span.elementor-button-content-wrapper svg {
height: 30px !important;
width: 34px !important;
}
/* ==========================================================================
CASE STUDIES STYLES
========================================================================== */
/* Tabs */
.cs-filter-tabs {
display: flex;
justify-content: flex-start;
flex-wrap: wrap;
gap: 15px;
margin-bottom: 40px;
}
.cs-tab-btn {
background: #fff;
border: 1px solid #06156B;
border-radius: 50px;
padding: 17px 28px;
color: #06156B;
font-weight: 600;
cursor: pointer;
text-transform: uppercase;
font-size: 16px;
transition: all 0.3s ease;
position: relative;
z-index: 1;
}
.cs-tab-btn:hover,
.cs-tab-btn.active {
background: #E8F4FC;
color: #06156B;
box-shadow: 0 4px 10px rgba(6, 21, 107, 0.15);
}
/* Grid */
.cs-grid {
display: flex;
flex-direction: column;
gap: 30px;
}
/* Card */
.cs-card {
display: flex;
flex-direction: row;
background: linear-gradient(90deg, #E8F4FC 0%, #F2EFFC 100%);
border-radius: 12px;
overflow: hidden;
border: 1px solid rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
}
.cs-card:hover {
transform: translateY(-3px);
}
.cs-card.hidden {
display: none;
}
.cs-card-image {
width: 40%;
position: relative;
min-height: 300px;
}
.cs-card-image img {
width: 100%;
height: 350px;
object-fit: cover;
display: block;
}
.cs-no-image {
background: #ccc;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: #666;
}
.cs-card-content {
width: 60%;
padding: 40px;
position: relative;
display: flex;
flex-direction: column;
justify-content: center;
}
.cs-cat-pill {
position: absolute;
top: 30px;
right: 30px;
font-size: 11px;
text-transform: uppercase;
color: #06156B;
padding: 5px 15px;
border-radius: 20px;
background: #fff;
border: 1px solid transparent;
background-clip: padding-box;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
z-index: 2;
}
.cs-cat-pill::before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -1;
margin: -1px;
border-radius: inherit;
background: linear-gradient(180deg, #06156B 0%, #178CE3 100%);
}
.cs-title {
color: #06156B;
font-size: 34px;
margin: 0 0 15px 0;
font-weight: 700;
line-height: 1.2;
padding-right: 80px;
}
.cs-card-content a {
text-decoration: none;
}
.cs-excerpt {
color: #000000;
font-size: 16px;
line-height: 1.6;
margin-bottom: 25px;
opacity: 0.8;
text-transform: lowercase;
}
.cs-read-more {
color: #06156B;
text-decoration: none;
font-weight: 700;
font-size: 16px;
display: inline-flex;
align-items: center;
margin-top: auto;
}
.cs-read-more svg {
margin-left: 8px;
transition: transform 0.2s ease;
}
.cs-read-more:hover svg {
transform: translateX(5px);
}
/* Carousel */
.cs-carousel-wrapper {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
position: relative;
}
.cs-carousel-wrapper .cs-card {
box-shadow: 0 4px 4px 0 #98D2FC;
height: 100%;
width: 99%;
margin: 2px;
border: 1px solid rgba(0, 0, 0, 0.3);
}
.cs-carousel-wrapper .cs-card-image {
min-height: 320px;
}
.cs-carousel-wrapper .cs-card-image img {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
}
.cs-carousel-wrapper .cs-title {
font-size: 28px;
padding-right: 60px;
}
.cs-no-image-carousel {
background: #ddd;
width: 100%;
height: 100%;
}
.cs-carousel-wrapper .swiper {
padding: 5px 5px 50px 5px;
}
.cs-carousel-wrapper .swiper-button-next,
.cs-carousel-wrapper .swiper-button-prev {
color: #06156B;
background: rgba(255, 255, 255, 0.8);
width: 40px;
height: 40px;
border-radius: 50%;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
.cs-carousel-wrapper .swiper-button-next::after,
.cs-carousel-wrapper .swiper-button-prev::after {
font-size: 18px;
font-weight: bold;
}
.cs-carousel-wrapper .swiper-pagination-bullet-active {
background: #06156B;
}
.logo-boxes div#gallery-1 {
display: flex;
}
/* Responsive */
@media (max-width: 1024px) {
.cs-card-content {
padding: 30px;
}
.cs-title {
font-size: 24px;
}
}
@media screen and (max-width: 767px) {
.elementor-widget-n-accordion .e-n-accordion-item-title {
align-items: flex-start;
}
.img-carousel img.swiper-slide-image {
height: 26px;
width: 128px;
object-fit: contain;
}
button.slick-prev.slick-arrow {
height: 0;
width: 0;
left: 5px;
}
.aws-certification img.swiper-slide-image {
height: 100px;
width: 154px !important;
object-fit: cover;
}
.htslider-slider .slick-arrow.slick-next {
right: 5px;
left: auto;
}
.cs-excerpt {
color: #000000;
font-size: 14px;
margin-bottom: 15px;
}
}
.hero_section {
position: relative;
width: 100%;
overflow:hidden;
background: radial-gradient(circle at 82% -56%, /* 👈 center of color (right-top area) */ #178ce3b0 0%, /* vivid blue core */ #40a6f15e 30%, /* soft purple transition */ #ffffff 60%, /* light blue tint */ #fff 100% /* fades to white smoothly */);
}
.hero_section::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: radial-gradient(circle at 70% 25%, #d1fbff 0%, #0000001f 65%), radial-gradient(circle at 90% 10%, #ff8b8b 0%, #978aff 55%), radial-gradient(circle at 80% 90%, #E7F4FC 0%, transparent 75%);
background-blend-mode: screen;
animation: bg-shift 10s ease-in-out infinite alternate;
opacity: 1;
}
@keyframes bg-shift {
0% {
background-position: 60% 20%, 90% 10%, 80% 100%;
filter: hue-rotate(0deg) brightness(1);
transform: scale(1);
}
25% {
background-position: 65% 25%, 85% 20%, 75% 95%;
filter: hue-rotate(60deg) brightness(1.1);
}
50% {
background-position: 70% 30%, 80% 10%, 85% 90%;
filter: hue-rotate(120deg) brightness(1.15);
transform: scale(1.03);
}
75% {
background-position: 75% 20%, 70% 25%, 80% 95%;
filter: hue-rotate(180deg) brightness(1.1);
}
100% {
background-position: 80% 15%, 65% 10%, 85% 100%;
filter: hue-rotate(360deg) brightness(1);
transform: scale(1);
}
}
.logo-boxes div#gallery-1 {
display: flex;
}
/* === STACK SECTION BASE === */
.stack-section {
position: relative;
--card-height: 640px;
--stack-slides: 4;
height: calc(var(--card-height) * (var(--stack-slides)));
overflow: visible;
}
.stack-wrapper {
position: sticky;
top: 0;
height: var(--card-height);
overflow: visible;
}
/* === CARD === */
.stack-card {
cursor:pointer;
position: absolute !important;
top: 0;
left: 0;
width: 100%;
height: var(--card-height);
border-radius: 30px; /* ← bigger radius */
overflow: hidden;
background-size: cover;
background-position: center;
will-change: transform;
/* box-shadow: 0 18px 40px rgba(0, 0, 0, 0.45); */
transition: transform 0.25s ease-out; /* ← less smooth (snappier) */
}
/* Default visible offset stack */
.stack-card:nth-child(1) { transform: translateY(0); z-index: 1000; }
.stack-card:nth-child(2) { transform: translateY(60px); z-index: 900; }
.stack-card:nth-child(3) { transform: translateY(120px); z-index: 800; }
.stack-card:nth-child(4) { transform: translateY(180px); z-index: 700; }
.stack-card.past {
pointer-events: none;
}
.stack-card .stack-content {
position: absolute;
left: 50px;
bottom: 60px;
color: #fff;
text-shadow: 0 4px 14px rgba(0, 0, 0, 0.6);
max-width: 800px;
}
@media (max-width: 767px) {
.stack-section {
--card-height: 520px;
}
.elementor-heading-title br {
display: none;
}
.stack-card {
border-radius: 20px !important; /* ← bigger radius */
}
.hover-box {
border-radius: 10px;
}
}
@media (max-width: 768px) {
.cs-card {
flex-direction: column;
}
.cs-card-image {
width: 100%;
min-height: auto;
}
.cs-card-content {
width: 100%;
padding: 30px 25px;
}
.cs-title {
font-size: 22px;
padding-right: 0;
margin-top: 5px;
}
.cs-cat-pill {
position: relative;
top: auto;
right: auto;
display: inline-block;
margin-bottom: 12px;
font-size: 10px;
padding: 4px 12px;
width: max-content;
}
.cs-carousel-wrapper .cs-card {
flex-direction: column;
}
.cs-carousel-wrapper .cs-card-image {
width: 100%;
height: 250px;
min-height: auto;
position: relative;
}
.cs-carousel-wrapper .cs-card-content {
width: 100%;
padding: 30px 20px;
}
}
@media (max-width: 480px) {
.cs-filter-tabs {
gap: 10px;
margin-bottom: 30px;
}
.cs-tab-btn {
padding: 8px 18px;
font-size: 12px;
flex-grow: 1;
text-align: center;
}
.cs-card-content {
padding: 20px;
}
.cs-card-image img {
height: 280px;
}
.cs-excerpt {
font-size: 16px;
line-height: 1.4;
margin-bottom: 15px;
}
.cs-title {
font-size: 18px;
text-transform: uppercase;
}
}