/* Mobile styles go here: These are the base styles and are for mobiles */

body {
    /* font-family: Arial, sans-serif; */
    /* font-family: 'Electrolize', sans-serif; */
    /* font-family: 'Orbitron', sans-serif; */
    font-family: 'Russo One', sans-serif;
    margin: 0;
    padding: 0;
}

.container {
    max-width: 100%;
    padding: 0 20px;
    margin: 0 auto;
}

/**
** HEADER
**/


header {
    background-color: #333;
    color: #fff;
    padding: 10px 0;
    position: sticky;
    top: 0;
    z-index: 100;
}

header .logo a {
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    font-size: 24px;
}

/**
** NAV
**/

.sticky-nav ul {
    list-style: none;
    padding: 0;
    display: flex;
    justify-content: space-around;
}

.sticky-nav ul li {
    margin: 0 15px;
}

.sticky-nav ul li a {
    color: #fff;
    text-decoration: none;
    padding: 5px 10px;
    border-radius: 5px;
    transition: background-color 0.3s;
}

.sticky-nav ul li a:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

/**
** HERO
**/
.hero-section {
    padding: 100px 0;
    background-color: #f4f4f4;
    /* Light gray background for contrast; you can change as desired */
}

.hero-section h1 {
    font-size: 2.5em;
    margin-bottom: 20px;
}

.hero-section p {
    font-size: 1.2em;
}

/**
** SERVICES
**/

.services-section {
    position: relative;
    padding-top: 7em;
    padding-bottom:7em;
    /* This ensures the pseudo-element positions relative to the section */
}

.services-section h2 {
    color: #fff;
}

.services-section p {
    color: #fff;
}

.services-section::before {
    content: "";
    /* Necessary for the pseudo-element to display */
    position: absolute;
    /* top: 0; */
    top: 56px;
    right: 0;
    /* bottom: 0; */
    bottom: 56px;
    left: 0;
    /* This stretches the pseudo-element to cover the entire .services-section */
    background-color: #f4f4f4;
    background-image: url('../images/spaceman.jpg');
    background-size: cover;
    background-position: center center;
    z-index: -10;
    -webkit-transform: skewY(-4deg) scale(1);
    -moz-transform: skewY(-4deg) scale(1);
    -ms-transform: skewY(-4deg) scale(1);
    transform: skewY(-4deg) scale(1);
}


.services-section .card {
    background: rgba(255, 255, 255, 0.8);

    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    /* Adds a subtle shadow to the cards */
    transition: transform 0.3s;
}

.services-section .card:hover {
    transform: translateY(-10px);
    /* Lifts the card slightly on hover for a dynamic effect */
}



.services-section .notes{
    background-color: rgba(0, 0, 0, 0.8);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
    padding: 20px;
    border-radius: 5px;
    
    /* text-shadow: 1px 1px 2px red, 0 0 1em blue, 0 0 0.2em blue; */
}

.services-section .card ul {
    padding-left: 20px;
}

.services-section .card .card-text{
    color:#000;
}



/**
** PROCESS
**/



.process-section {
    position: relative;
    padding-top: 7em;
    padding-bottom:7em;
   
}

.process-section::before {
    content: "";
    /* Necessary for the pseudo-element to display */
    position: absolute;
    /* top: 0; */
    top: 0;
    right: 0;
    /* bottom: 0; */
    bottom: 56px;
    left: 0;
    /* This stretches the pseudo-element to cover the entire .services-section */
    background-color: #f4f4f4;
    background-image: url('../images/colorpen.jpg');
    background-size: cover;
    z-index: -10;
    -webkit-transform: skewY(-4deg) scale(1);
    -moz-transform: skewY(-4deg) scale(1);
    -ms-transform: skewY(-4deg) scale(1);
    transform: skewY(-4deg) scale(1);
}

.process-section .process-card {
    background-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 20px;
    border-radius: 5px;
    transition: transform 0.3s, box-shadow 0.3s;
}

.process-section .process-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}


/**
** SKEWS
**/

.skew-top, .footer-skew {
    position: relative;
    padding-top: 8em;
    padding-bottom: 3em;
    overflow: hidden;
}
.skew-top::before, .footer-skew::before {
    content: "";
    width: 100%;
    height: 130%;
    display: block;
    background-color: #1b252d;
    top: 60px;
    left: 0;
    position: absolute;
    -webkit-transform: skewY(-4deg) scale(1);
    -moz-transform: skewY(-4deg) scale(1);
    -ms-transform: skewY(-4deg) scale(1);
    transform: skewY(-4deg) scale(1);
}

.skew-section.with-border::before,.half-skew-section.with-border::before,.with-border.orange-img-border-bottom::before {
    border-bottom: 2px solid #f2f2f2
}

.skew-section.orange-bg::before,.skew-section.orange-img-border-bottom::before,.half-skew-section.orange-bg::before,.orange-img-border-bottom::before {
    background-color: #f15a2f;
}
.skew-section::before, .half-skew-section::before {
    content: "";
    width: 100%;
    height: 100%;
    display: block;
    background-color: ##f4f4f4;
    top: -2px;
    left: 0;
    position: absolute;
    -webkit-transform: skewY(-4deg) scale(1);
    -moz-transform: skewY(-4deg) scale(1);
    -ms-transform: skewY(-4deg) scale(1);
    transform: skewY(-4deg) scale(1);
}


/*half-skew-section orange-bg*/

/**
** FOOTER
**/
.footer-skew{
    color:#fff;
}

footer a:hover {
    text-decoration: none;
}

footer .fab {
    font-size: 1.5em;
}

/**
** WHATSAPP
**/

/* .whatsapp-button {
    display: inline-block;
    padding: 10px 20px;
    background-color: #25D366; 
    color: #ffffff;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
} */
.whatsapp-button {
    display: inline-block;
    padding: 7px 10px;
    background-color: #25D366; 
    color: #ffffff;
    text-decoration: none;
    font-weight: bold;
    position: fixed;
    left: 20px;
    bottom: 5px;
    border-radius:50px;
    box-shadow: 2px 2px 3px #999;
    z-index: 1000; /* Ensure it's above other elements */
}

.whatsapp-button:hover{
    color: #25D366;
    background:#f4f4f4;
}

/* Tablet styles */

@media (min-width: 768px) {
    .container {
        max-width: 720px;
        /* Adjust to your preference for tablets */
    }


}

/* Desktop styles */

@media (min-width: 992px) {
    .container {
        max-width: 960px;
    }

    .hero-section img {
        clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
    }

    /* .services-section::before {
        clip-path: polygon(49% 3%, 56% 4%, 62% 6%, 67% 8%, 71% 13%, 76% 17%, 78% 21%, 80% 26%, 81% 31%, 77% 35%, 72% 36%, 64% 39%, 61% 40%, 58% 44%, 56% 48%, 56% 53%, 54% 58%, 51% 61%, 47% 63%, 43% 65%, 39% 65%, 34% 65%, 30% 61%, 26% 58%, 22% 56%, 18% 52%, 15% 48%, 14% 44%, 13% 39%, 14% 35%, 14% 29%, 16% 24%, 17% 19%, 19% 16%, 22% 12%, 27% 9%, 32% 8%, 36% 5%, 41% 3%, 44% 3%);
        z-index: -1;
       
    } */

}

/* Large desktops: Bigger screens, usually wider than 1200px */

@media (min-width: 1200px) {
    .container {
        max-width: 1200px;
    }

}