/**
Theme Name: Octopus Outsourcing
Author: Octopus Outsourcing
Author URI: https://octopusoutsourcing.com/
Description: Astra is the fastest, fully customizable & beautiful theme suitable for blogs, personal portfolios and business websites. It is very lightweight (less than 50KB on frontend) and offers unparalleled speed. Built with SEO in mind, Astra comes with schema.org code integrated so search engines will love your site. Astra offers plenty of sidebar options and widget areas giving you a full control for customizations. Furthermore, we have included special features and templates so feel free to choose any of your favorite page builder plugin to create pages flexibly. Some of the other features: # WooCommerce Ready # Responsive # Compatible with major plugins # Translation Ready # Extendible with premium addons # Regularly updated # Designed, Developed, Maintained & Supported by Brainstorm Force. Looking for a perfect base theme? Look no further. Astra is fast, fully customizable and beautiful theme!
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: octopus-outsourcing
Template: astra
*/

/* Blog post display styling */
/* === Variables (change to suit your brand) === */
:root {
    --card-bg: #ffffff;
    --text-primary: #222222;
    --text-secondary: #555555;
    --accent: #1b1b7f;
    --radius: 12px;
}

/* === Grid Container === */
.custom-blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

/* === Card === */
.custom-blog-post {
    background: var(--card-bg);
    border-radius: var(--radius);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.custom-blog-post:hover {
    transform: translateY(-6px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

/* === Featured Image (if you output one) === */
.custom-blog-post img {
    width: 100%;
    height: 300px !important;
    /* Fixed height - adjust as needed */
    object-fit: cover;
    display: block;
}

/* === Inner Content Wrapper === */
.custom-blog-post .content {
    padding: 1.25rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

/* === Title === */
.custom-blog-post h3 {
    margin: 0 0 0.5rem;
    color: var(--text-primary);
    font-size: 1.3rem !important;
    line-height: 1.2;
}

/* === Meta (date/author) === */
.custom-blog-post .meta {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin-bottom: 1rem;
}

/* === Excerpt === */
.custom-blog-post p {
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: 1.5rem;
    flex-grow: 1;
}

/* === Read More Link === */
.custom-blog-post a.read-more {
    align-self: flex-start;
    padding: 0;
    color: var(--accent);
    font-weight: 500;
    text-decoration: none;
    transition: color 0.2s;
}

.custom-blog-post a.read-more:hover {
    color: darken(var(--accent), 10%);
    text-decoration: underline;
}

/* Responsive Image Height */
@media (max-width: 1024px) {
    .custom-blog-post img {
        height: 240px !important;
    }
}

@media (max-width: 767px) {
    .custom-blog-post img {
        height: 180px !important;
    }
}

/* End of styling */




/* Breadcrumb styling */
.rank-math-breadcrumb {
    font-size: 14px;
    color: #e0e0e0;
    margin: 16px 0 0 0;
    text-align: left;
    font-family: system-ui, sans-serif;
}

/* Breadcrumb links */
.rank-math-breadcrumb a {
    color: #fafafa;
    text-decoration: none;
    opacity: 0.9;
    transition: color 0.2s ease, opacity 0.2s ease;
}

/* Link hover effect */
.rank-math-breadcrumb a:hover {
    color: #ffffff;
    /* Optional accent (gold) */
    opacity: 1;
    text-decoration: none;
}

/* Separator styling */
.rank-math-breadcrumb .separator {
    margin: 0 6px;
    color: #fafafafa;
    opacity: 0.6;
}

/* Current item (last breadcrumb) */
.rank-math-breadcrumb span:last-child {
    font-weight: 500;
    color: #fff;
    pointer-events: none;
    opacity: 1;
}

/*End breadcrumb styling*/




/*Contact Us form styling*/
.my-contact-form-section {
    background-color: #ffffff;
    /* Light blue/off-white background */
    padding: 30px;
    /* Add some padding around the form */
    border-radius: 8px;
    /* Slightly rounded corners for the form box */
    box-shadow: 0px 4px 15px rgba(0, 0, 0, 0.05);
    /* Optional subtle shadow */
}

/* --- Contact Form 7 Field and Button Styling --- */

/* General container for rows (from previous steps) */
.my-cf7-row {
    margin-bottom: 20px;
    /* Space between rows */
}

/* Flexbox for columns (from previous steps) */
.my-cf7-row:has(.my-cf7-column) {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    /* Space between columns */
}

/* Column sizing (from previous steps) */
.my-cf7-column {
    flex: 1 1 calc(50% - 10px);
    box-sizing: border-box;
}

/* Input fields, select, and textarea styling */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form select,
.wpcf7-form textarea {
    width: 100%;
    padding: 12px 18px;
    /* Slightly more padding for a softer look */
    border: 1px solid #E0E4EB;
    /* Very subtle light gray border (similar to old site) */
    border-radius: 8px;
    /* More rounded corners for inputs */
    font-size: 16px;
    line-height: 1.5;
    color: #333;
    background-color: #ffffff;
    /* Light blue/off-white background for fields */
    transition: border-color 0.3s ease, background-color 0.3s ease;
    box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.05);
    /* Subtle inner shadow for depth */
}

.wpcf7-form input[type="text"]:focus,
.wpcf7-form input[type="email"]:focus,
.wpcf7-form input[type="tel"]:focus,
.wpcf7-form select:focus,
.wpcf7-form textarea:focus {
    border-color: #1b1b7f;
    /* Slightly more noticeable border on focus */
    background-color: #FFFFFF;
    /* White background on focus */
    outline: none;
    box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.08);
}

/* Placeholder text color */
.wpcf7-form ::placeholder {
    color: #99A1AF;
    /* Softer, slightly darker grey placeholder */
    opacity: 1;
}

.wpcf7-form :-ms-input-placeholder {
    color: #99A1AF;
}

.wpcf7-form ::-ms-input-placeholder {
    color: #99A1AF;
}

/* Labels */
.wpcf7-form label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #555;
    /* Keep label color for readability */
}

/* Specific styling for the phone number input (Country & Phone Field CF7 plugin) */
/* Targetting the container the plugin creates */
.wpcf7-form .iti--allow-dropdown {
    /* This targets the outer container of the international telephone input */
    width: 100%;
    /* Ensure it takes full width of its column */
    background-color: #F8FCFF;
    /* Match the input field background */
    border: 1px solid #E0E4EB;
    /* Match the input field border */
    border-radius: 8px;
    /* Match the input field border-radius */
    box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.05);
}

.wpcf7-form .iti--allow-dropdown.iti--focus {
    border-color: #B5D2F2;
    /* Focus color */
    background-color: #FFFFFF;
    /* White background on focus */
    box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.08);
}

/* Ensure the actual input inside the phone field gets the correct styling too */
.wpcf7-form .iti__tel-input {
    padding-left: 15px !important;
    /* Adjust if needed based on flag/dropdown */
    border: none !important;
    /* Remove individual input border as parent handles it */
    background-color: transparent !important;
    /* Transparent background as parent handles it */
    box-shadow: none !important;
    /* Remove any default box shadow */
    font-size: 16px;
    color: #333;
}

.wpcf7-form input[type="submit"]:hover {
    background-color: #222244;
    /* Darker blue on hover */
    transform: translateY(-1px);
    /* Slight lift on hover */
}

.my-cf7-row:has(input[type="submit"]) {
    /* Targets the row specifically with a submit button */
    text-align: center;
}

/* Responsive adjustments for smaller screens (from previous steps) */
@media (max-width: 767px) {
    .my-cf7-column {
        flex: 1 1 100%;
    }

    .my-cf7-row:has(.my-cf7-column) {
        gap: 0;
    }

    .my-cf7-row {
        margin-bottom: 15px;
        /* Slightly less space on mobile */
    }
}

/*---- End Contact Us form styling ----*/




/* Loading spinner for custom blog posts displayer */
.spinner {
    border: 4px solid #f3f3f3;
    border-top: 4px solid #333;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    animation: spin 1s linear infinite;
    margin: 0 auto;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* End styling of spinner */



/* Our Solutions Container Styling */
.our-solutions-container {
    transition: transform 0.4s ease;
}

.our-solutions-container:hover {
    transform: scale(1.015);
}

/* End of our solutions container styling */



/* Footer CTA Styling */

.cta-content {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
.cta-glass {
	position: relative;
	background: linear-gradient(135deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0));
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(16px);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 16px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
	padding: 3rem 2rem;
	max-width: 1400px;
	margin: 4rem auto 0;
	text-align: left;
	color: #ffffff;
	background-color: rgba(255, 255, 255, 0.01); /* fallback for transparency */
	transition: transform 0.4s ease, box-shadow 0.4s ease, border 0.4s ease;
}

.cta-inner {
	position: relative;
	z-index: 1;
	max-width: 800px;
	margin: 2rem 0;
	transition: transform 0.4s ease, opacity 0.4s ease;
	flex: 1 1 50%;
}


.cta-title {
	margin-bottom: 1.5rem;
	color: #ffffff !important;
}

.cta-text {
	margin-bottom: 1.5rem;
}

.cta-glass:hover {
	transform: scale(1.02);
	box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
	border: 1px solid rgba(255, 255, 255, 0.3);
}

.cta-image {
	flex: 1 1 40%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.cta-image img {
	max-width: 100% !important;
	height: 300px !important;
	border-radius: 12px;
	object-fit: cover;
}
.cta-inner button {
	background-color: #E6A537;
	border-color: #E6A537;
}

.cta-inner button:hover {
	background-color: #E6A537;
}

@media(max-width: 1024px) {
	.cta-image {
		display: none;
	}
}

/* End of Footer CTA Styling */



/* Lazy loading styling */
/* PART 1 - Before Lazy Load */
img[data-lazyloaded]{
    opacity: 0;
}
/* PART 2 - Upon Lazy Load */
img.litespeed-loaded{
    -webkit-transition: opacity .5s linear 0.2s;
    -moz-transition: opacity .5s linear 0.2s;
    transition: opacity .5s linear 0.2s;
    opacity: 1;
}
/* End of lazy loading styling */




/* Entrance effect CSS */
/* Hero Text Entrance Animation */
@keyframes fadeInFloatUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
    filter: blur(8px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

.hero-fade-in {
  animation: fadeInFloatUp 1s ease-out both;
}
/* End of entrance effect CSS */


/* Scroll to top */
#ast-scroll-top {
	margin-bottom: 20px !important;
}
/* End */

/* Sticky header */
#masthead {
  position: sticky;
  top: 0;
  z-index: 999;
  background: white; /* Or your preferred background */
  transition: all 0.3s ease-in-out;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.ast-mobile-header-content {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  z-index: 9999;
  background: white; /* match your theme or use transparent if needed */
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.15); /* optional */
}

.ast-header-break-point .main-header-bar {
  position: relative;
}
/* End of sticky header */