.elementor-kit-4{--e-global-color-primary:#22204E;--e-global-color-secondary:#004063;--e-global-color-text:#121212;--e-global-color-accent:#95A9F7;--e-global-typography-primary-font-family:"Playfair Display";--e-global-typography-primary-font-weight:700;--e-global-typography-secondary-font-family:"Playfair Display";--e-global-typography-secondary-font-weight:700;--e-global-typography-secondary-font-style:italic;--e-global-typography-text-font-family:"Lato";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;color:var( --e-global-color-text );font-family:"Lato", Sans-serif;}.elementor-kit-4 button,.elementor-kit-4 input[type="button"],.elementor-kit-4 input[type="submit"],.elementor-kit-4 .elementor-button{background-color:var( --e-global-color-primary );font-size:15px;font-weight:400;text-transform:uppercase;letter-spacing:1.5px;color:#FFFFFF;border-radius:10px 10px 10px 10px;padding:20px 40px 20px 40px;}.elementor-kit-4 a{color:var( --e-global-color-secondary );font-family:var( --e-global-typography-text-font-family ), Sans-serif;font-weight:var( --e-global-typography-text-font-weight );}.elementor-kit-4 img{border-radius:10px 10px 10px 10px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1100px;}.e-con{--container-max-width:1100px;}.elementor-widget:not(:last-child){--kit-widget-spacing:0px;}.elementor-element{--widgets-spacing:0px 0px;--widgets-spacing-row:0px;--widgets-spacing-column:0px;}{}h1.entry-title{display:var(--page-title-display);}.elementor-lightbox{--lightbox-navigation-icons-size:2rem;}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}.elementor-kit-4{--e-page-transition-entrance-animation:e-page-transition-slide-out-right;--e-page-transition-exit-animation:e-page-transition-slide-in-left;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//* Root font size */
/* Setting the root font size to 62.5%, so 1rem equals 10px. This makes rem calculations easier. */
html {
    font-size: 62.5%; /* 1rem = 10px */
}

/* Shrinking header section */
/* This section handles the appearance of the header, particularly its background and transition effects when scrolling. */
.shrinker {
    background: transparent;
    transition: all 0.2s linear !important; /* Smooth transition for all properties */
}

.shrinker.elementor-sticky--effects {
    background: #fff; /* Changes background to white when sticky effect is applied */
    padding: 0.2rem 0 !important; /* Reduces padding to make the header smaller */
    box-shadow: 0px 6px 30px -4px rgba(0, 0, 0, 0.05); /* Adds a subtle shadow to the header */
}

/* Shrinking logo image */
/* This section adjusts the size of the logo image when the header shrinks. */
.shrinking-logo img {
    width: 15rem !important; /* Set initial logo width to 150px */
    transition: all 0.2s linear !important; /* Smooth transition for size change */
}

.shrinker.elementor-sticky--effects img {
    width: 12rem !important; /* Reduces the logo width to 120px when sticky */
}

/* Shrinking menu */
/* This section controls the font size of menu items during the shrinking header effect. */
.shrinker.elementor-sticky--effects ul li a {
    font-size: 0.9rem !important; /* Reduces the font size to make the menu more compact */
}

/* Tablet and Mobile Menu Shrinking */
/* This media query adjusts the header, logo, and menu specifically for screens smaller than 1024px. */
@media screen and (max-width: 1024px) {
    /* Shrinking header on mobile/tablet */
    .shrinker.elementor-sticky--effects {
        background: #fff; /* Sets the header background to white */
        padding: 0.2rem 0 !important; /* Maintains reduced padding for a compact look */
        box-shadow: 0px 6px 30px -4px rgba(0, 0, 0, 0.05); /* Adds shadow to the header */
    }

    /* Shrinking logo on mobile/tablet */
    .shrinker.elementor-sticky--effects img {
        width: 10rem !important; /* Further reduces the logo width to 100px on smaller screens */
    }

    /* Shrinking menu on mobile/tablet */
    .shrinker.elementor-sticky--effects ul li a {
        font-size: 1.2rem !important; /* Slightly increases font size for better readability on smaller screens */
    }

    /* Shrinking button on mobile/tablet */
    .shrinker.elementor-sticky--effects .elementor-button {
        padding: 1rem 3.2rem !important; /* Adjusts button padding for a more proportionate appearance */
    }
}

/* Font clamp settings */
/* This section uses the clamp() function to create responsive typography that scales between a minimum and maximum size. */
h1 {font-size: clamp(3.5rem, 0.88889rem + 5.55556vw, 7rem);}
h2 {font-size: clamp(2.4rem, 0.97500rem + 3.75000vw, 5.1rem);}
h3 {font-size: clamp(2rem, 1.05000rem + 2.50000vw, 3.8rem);}
h4 {font-size: clamp(1.7rem, 1.06667rem + 1.66667vw, 2.9rem);}
h5 {font-size: clamp(1.4rem, 0.97778rem + 1.11111vw, 2.2rem);}
h6 {font-size: clamp(1.2rem, 0.98889rem + 0.55556vw, 1.6rem);}
body {font-size: clamp(1.6rem, 1.17778rem + 1.11111vw, 2.4rem);}
p {font-size: clamp(1.2rem, 1.17778rem + 1.11111vw, 2rem);}/* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Playfair Display';
	font-style: normal;
	font-weight: bold;
	font-display: swap;
	src: url('https://chriskelechukwu.com/wp-content/uploads/2023/05/playfairdisplay-bold-webfont-1.woff2') format('woff2');
}
@font-face {
	font-family: 'Playfair Display';
	font-style: italic;
	font-weight: bold;
	font-display: swap;
	src: url('https://chriskelechukwu.com/wp-content/uploads/2023/05/playfairdisplay-bolditalic-webfont-1.woff2') format('woff2');
}
/* End Custom Fonts CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Lato';
	font-style: normal;
	font-weight: normal;
	font-display: swap;
	src: url('https://chriskelechukwu.com/wp-content/uploads/2023/05/lato-regular-webfont.woff2') format('woff2');
}
@font-face {
	font-family: 'Lato';
	font-style: italic;
	font-weight: normal;
	font-display: swap;
	src: url('https://chriskelechukwu.com/wp-content/uploads/2023/05/lato-italic-webfont-2.woff2') format('woff2');
}
/* End Custom Fonts CSS */