/*
Theme Name: 1stCompanySA
Theme URI: https://eadsontechnologies.com/
Author: Eadson Technologies
Author URI: https://alexanderubokwe.eadsontechnologies.com
Description: 1stCompanySA emphasizes simplicity and adaptability. It is a special theme built specifically for 1st Company South Africa. The theme offers flexible design options, supported by a variety of patterns for different page types, such as services and landing pages, making it ideal for building personal blogs, professional portfolios, online magazines, or business websites. Its templates cater to various blog styles, from text-focused to image-heavy layouts. Additionally, it supports international typography and diverse color palettes, ensuring accessibility and customization for users worldwide.
Requires at least: 6.7
Tested up to: 6.7
Requires PHP: 7.2
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: 1stcompanysa
Tags: one-column, custom-menu, custom-logo, featured-images, threaded-comments, translation-ready, wide-blocks, block-styles, style-variations, accessibility-ready, blog, portfolio, news
*/

:root {
    --primaryColor: #2C507A;
    --primaryColorDark: #08213d;
    --accentColor: #CAAE5B;
    --headingColor: #111111;
    --bodyTextColor: #747171;
    --white: #fff;
    --borderRadius: 0.25rem;
    --transition: 0.3s ease-in-out all;
    --maxWidth: 1120px;
    --fixedWidth: 600px;
    --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --shadow2: 0 2px 6px 0 rgba(0, 0, 0, 0.2), 0 2px 4px 0 rgba(0, 0, 0, 0.12);
}

*,
::after,
::before {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: "Roboto", serif;
    font-weight: 400;
    font-style: normal;
    line-height: 1.75;
    color: var(--bodyTextColor);
}

h1,
h2,
h3,
h4,
h5 {
    margin: 0;
    margin-bottom: 1.38rem;
    font-weight: 400;
    line-height: 1.3;
    color: var(--headingColor);
}

h1 {
    margin-top: 0;
    font-size: 3.052rem;
}

h2 {
    font-size: 2.441rem;
}

h3 {
    font-size: 1.953rem;
}

h4 {
    font-size: 1.563rem;
}

h5 {
    font-size: 1.25rem;
}

a {
    text-decoration: none;
}

a:active {
    color: var(--accentColor);
}

ul {
    list-style: none;
    padding: 0;
}

img:not(.logo) {
    width: 100%;
    display: block;
    object-fit: cover;
}
 
.logo {
    width: 100px;
    height: 100px;
} 

.logo img{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.btn {
    background: var(--primaryColor);
    color: var(--white);
    border: transparent;
    border-radius: var(--borderRadius);
    cursor: pointer;
    padding: 0.375rem 0.75rem;
    box-shadow: var(--shadow);
    display: inline-block;
}

.btn:hover {
    box-shadow: var(--shadow2);
    background: var(--primaryColorDark);
}

.underline {
    background: var(--primaryColor);
    width: 7rem;
    height: 0.25rem;
    margin: 0 auto;
}

/* nav */

.navbar-fixed {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    box-shadow: var(--shadow);
    z-index: 34;
    background: var(--white);
}

.job-btn {
    display: none;
}

.job-btn a {
    color: var(--white);
    font-size: 1.2rem;
}

.nav-center {
    width: 100%;
    max-width: 1170px;
    margin: 0 auto;
}

.nav-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 2rem;
}

.nav-toggle {
    background: transparent;
    border: transparent;
    font-size: 3rem;
    color: var(--primaryColor);
}

#menu-main-menu .menu-item {
    display: block;
    padding: 1rem 2rem;
    transition: var(--transition);
    cursor: pointer;
    font-size: 1rem;
}

.nav-link:hover {
    color: var(--accentColor);
}

.nav-links {
    height: 0;
    overflow: hidden;
    transition: var(--transition);
}

.nav-links a {
    color: black;
}

.show-links {
    height: 280px;
}

@media screen and (min-width: 992px) {
    .nav-toggle {
        display: none;
    }

    .job-btn {
        display: block;
    }

    .nav-center {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    #menu-main-menu {
        display: flex;
        justify-content: space-between;
    }

    .nav-links {
        height: auto;
        display: flex;
    }
}

.hero-section {
    display: grid;
    place-items: center;
    text-align: center;
}

.hero {
    padding: 5rem 3rem;
}

.hero h1 {
    font-weight: bold;
    max-width: 50rem;
    margin-left: auto;
    margin-right: auto;
    color: var(--white);
}

.hero p {
    max-width: 38rem;
    margin-right: auto;
    margin-left: auto;
    color: var(--white);
}

.hero-btns {
    margin-top: 2rem;
    display: flex;
    justify-content: center;
    gap: 1.5rem;
}

.hero-btns .jobs a {
    background: var(--accentColor);
    color: black;
}

/* services */

.services-section {
    width: 90%;
    margin: auto;
}

.services-contents {
    text-align: center;
    margin: 1rem auto;
}

.services-section {
    margin: 5rem auto;
    text-align: center;
}

.service-card {
    box-shadow: var(--shadow2);
    padding: 3rem;
    position: relative;
    text-align: center;
    margin: 2rem auto;
    border-radius: 10px;
}

.service-img {
    width: 210px;
    height: 210px;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%);
    padding: 3rem;
}

.service-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.service-text {
    margin-top: 7rem;
}

.service-text h6 {
    color: var(--accentColor);
    margin-top: 0;
    margin-bottom: 0.5rem;
}

.service-text h3 {
    margin-bottom: 0.2rem;
}

@media screen and (min-width:768px) {
    .services-cards {
        display: flex;
        justify-content: center;
        gap: 1rem;
        flex-wrap: wrap;
    }

    .service-card {
        flex: 0 0 calc(50% - 1rem);
        margin-top: 1rem;
    }
}

/* cta */

.cta-section {
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.3)), url("../images/bg.jpg");
}

.btn-accent {
    background: var(--accentColor);
    color: black;
}

.cta-contents {
    padding: 3rem;
}

.businesses,
.job-seekers {
    margin: 2rem auto;
    background: #ecd0d0;
    box-shadow: var(--shadow);
    opacity: 0.8;
    padding: 2rem 3rem;
    border-radius: 10px;
}

.businesses h3 {
    font-weight: bolder;
}

.businesses p {
    font-size: 1.2rem;
    margin-bottom: 1rem;
}

.job-seekers h3 {
    color: var(--accentColor);
    font-weight: bolder;
}

.job-seekers p {
    color: var(--accentColor);
    font-size: 1.2rem;
}

@media screen and (min-width: 992px) {
    .cta-contents {
        display: flex;
        justify-content: space-between;
        gap: 1rem;
    }
}

/* why us */

.why-choose-us-section {
    margin: 5rem auto;
    text-align: center;
    padding: 3rem;
}

.why-us-card {
    padding: 2rem 3rem;
    box-shadow: var(--shadow);
    border-radius: 10px;
    margin: 3rem auto;
}

.why-us-icon i {
    font-size: 3rem;
    color: var(--primaryColor);
    margin-bottom: 1.5rem;
}

@media screen and (min-width: 768px) {
    .why-us-cards {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .why-us-card {
        flex: 0 0 calc(50% - 3rem);
    }
}

@media screen and (min-width: 992px) {
    .why-us-card {
        flex: 0 0 calc(25% - 0.3rem);
    }
}

.partners {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* footer */

.footer-section {
    background: #32373A;
    color: var(--white);
    padding: 5rem 3rem;
}

.footer-section a {
    color: var(--white);
}

#menu-footer-menu {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
}

.copyright-section {
    background: #292A2C;
    text-align: center;
    padding: 1.5rem 3rem;
}

.footer-social-icons {
    margin: 2rem auto;
}

.social-icons {
    display: flex;
    justify-content: center;
    gap: 1rem;
    margin-top: 1rem;
}

.social-icons li i {
    font-size: 2.5rem;
}

.about-page-info,
.job-page-info,
.job-list-page {
    margin: 4rem auto;
    padding: 2rem 3rem;
}

.about-us-details,
.job-details-overview,
.job-list-details {
    padding: 2rem 0;
	text-align: center;
}

.mission-vision {
    margin: 3.5rem auto;
}

.vision,
.mission {
    box-shadow: var(--shadow);
    padding: 2rem 0;
}

@media screen and (min-width:992px) {
    .mission-vision {
        display: flex;
        justify-content: center;
        gap: 1rem;
    }
	.mission,
	.vision {
		flex: 0 0 calc(50% - 1rem);
	}
}


.about-services {
    text-align: center;
}

.about-service-card {
    box-shadow: var(--shadow);
    padding: 2rem 1rem;
    margin: 2rem auto;
}

@media screen and (min-width: 992px) {
    .about-services-cards {
        display: flex;
        justify-content: center;
        gap: 1rem;
        flex-wrap: wrap;
    }

    .about-service-card {
        flex: 0 0 calc(50% - 1rem);
    }
}

@media screen and (min-width: 1200px) {
    .about-service-card {
        flex: 0 0 calc(25% - 1rem);
    }
}

.job-details,
.job-overview {
    margin: 1rem auto;
}

.job-details p span {
    font-weight: bold;
}

.job-overview p span {
    font-weight: 100;
    color: var(--primaryColor);
}

.job-overview .job-btn {
    margin-top: 1rem;
}

@media screen and (min-width: 992px) {
    .job-details-overview {
        display: flex;
        justify-content: space-between;
        gap: 1rem;
    }

    .job-overview {
        border: 1px solid var(--primaryColor);
        padding: 2rem;
        border-radius: 10px;
    }
}

.job-list-card {
    box-shadow: var(--shadow);
    padding: 2rem;
    margin: 2rem auto;
}

.job-list-card .job-btn {
    margin-top: 1rem;
}

@media screen and (min-width: 992px) {
    .job-list-cards {
        display: flex;
        justify-content: center;
        gap: 1rem;
    }
}

/* blog page */

.blog-contents {
    margin: 4rem auto;
    padding: 2rem 4rem;
}

.blog-post {
    box-shadow: var(--shadow);
    padding: 2rem 1rem;
}
.blog-meta-info {
    background: #cccaca;
    color: var(--white);
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin-bottom: 1rem;
}

.blog-meta-info a {
    color: var(--white);
}

@media screen and (min-width:768px) {
    .blog-contents-area {
        display: flex;
        justify-content: center;
        gap: 1rem;
        flex-wrap: wrap;
    }

    .blog-post {
        flex: 0 0 calc(50% - 1rem);
    }
    
}

.blog-post .thumbnail {
    width: 100%;
    height: 400px
}

.blog-post .thumbnail img{
height: 100%;
object-fit: cover;
}
/* contact page */

.contact-page-info {
    margin: 4rem auto;
    padding: 2rem 3rem;
}

.form-details .form,
.form-details .details {
    margin-top: 2rem;
}


.form-details .form .contact-form input,
.form-details .form .contact-form textarea {
    width: 100%;
    height: 2rem;
    border: none;
    background-color: #f7efdb;
    border-radius: 5px;
}

.form-details .form .contact-form textarea {
    height: 6rem;
}

.form-details .details p span i {
    font-size: 3rem;
    display: inline-block;
    margin-right: 1rem;
    color: var(--primaryColor);
}

.contact-us-details h1 {
	font-size: 2rem;
}

@media screen and (min-width:768px) {
    .form-details {
        display: flex;
        justify-content: space-between;
    }

    .form-details .form {
        flex: 0 0 calc(65% - 1rem);
    }

    .form-details .details {
        flex: 0 0 calc(35% - 1rem);
    }
}

/* single page  */

.page-contents {
    margin: 4rem auto;
    padding: 2rem 5rem;
}

.single-page-post {
    padding: 2rem 5rem;
}
.single-page-post .blog-content {
    margin-top: 1.5rem;
}

/* pagination */

.companysa-pagination {
    display: flex;
    justify-content: center;
    gap: 25rem;
    margin: 2rem auto;
}

/* 404 page */

.error-page-contents {
    margin: 4rem auto;
    padding: 2rem 5rem;
}