:root {
    --main-font-color: #242d2d;
    --main-bg-color: #C1FEFC; /* lightest gradient color */
    --body-color: #f1ffff; /* middle gradient color */
    --back-body-color: #f5ffff; /* very background color */
    --second-bg-color: #DCF7E6; /* darkest gradient color */
    --button-color: #D9F8F7;
    --border-color:  #F7FEFD;
    --box-shadow: #C1FEFC;
    --gradient--1: linear-gradient(to bottom right, var(--main-bg-color) 0% , var(--body-color)15%, var(--body-color)85%, var(--second-bg-color) 100% );
    --gradient--2: linear-gradient(to bottom right, var(--second-bg-color) 0%, var(--body-color)15% , var(--body-color)85%, var(--main-bg-color) 100%);
    font-family: 'Roboto';
}

/* Reset some default styles and set the base font and color */
body {
    margin: 0;
    padding: 0;
    background-color: var(--back-body-color);
    display: flex;
    flex-direction: column;
}

span {
    color: var(--main-font-color);
    font-size: 1.5rem;
}

ul, li {
    font-size: 1.2rem;
}


a {
    text-decoration: none;
    color: var(--main-font-color);
    font-size: 1.5rem;
}

h1 {
    font-size: 2rem;
    color: var(--main-font-color);
    font-family: 'Roboto';
}

h2 {
    font-size: 1.5rem;
    color: var(--main-font-color);
    font-family: 'Roboto';
}

h3 {
    font-size: 1.25rem;
    color: var(--main-font-color);
    font-family: 'Roboto';
}

p {
    font-size: 1.2rem;
    color: var(--main-font-color);
    font-family: 'Roboto';
}

/* Style for the header element */
header {
    background-size: cover;
    background-position: center;
    height: auto;
    text-align: center;
    color: var(--main-bg-color);
    padding: 5px;
    background-image: var(--gradient--1);
}

#about,  #portfolio, #contact {
    background-image: var(--gradient--1);
}
 #services, #landing{
    background-image: var(--gradient--2);
}

/* Styles for the main content area */
main {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: center; /* Center content horizontally */
    padding: 20px; /* Add some padding for spacing */
}

/* Add border to all sections */
section {
    border: 1px solid var(--border-color); /* Example border style */
    margin: 10px;
    padding: 20px; /* Optional: Add padding inside the border */
    width: 80%;
    border-radius: 8px;
}

/* Style for the footer */
footer {
    background-image: var(--gradient--1);
    text-align: center;
    padding: 0.5rem;
}

/* Style for buttons */
button,
a.button {
    padding: 5px 10px;
    font-size: 23px;
    font-family: 'Roboto';
    border-radius: 12px;
    transition-duration: 0.4s;
    margin: 0 auto; 
    background-color: var(--button-color);
    text-align: center; /* Center the text */
    text-decoration: none; /* Remove underline */
}

button:hover,
a.button:hover {
    background-color: var(--button-color);
    color: white;
}

/* style for icon */
.icon {
    padding-top: 10px;
    width: 32px;
    height: 32px;
}

/* Styles for the contact form */
.contact-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 20px;
}

.contact-text,
.contact-form {
    flex: 1;
    margin: 10px;
}

.contact-form {
    max-width: 400px;
}

.contact-form form {
    display: flex;
    flex-direction: column;
}

.contact-form input,
.contact-form textarea,

.contact-form button {
border: none;
}

.contact-form textarea {
    height: 100px;
    resize: none;
}


/* Responsive Adjustments */
@media (max-width: 768px) {
    .contact-container {
        flex-direction: column;
        align-items: center;
    }
    
    .contact-text,
    .contact-form {
        max-width: 100%;
    }
}

#contactForm {
    display: flex;
    flex-direction: column;
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    background-color: var(--body-color); /* Adjust this to your form's background color */
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    font-family: 'Roboto', sans-serif;
}

#contactForm input,
#contactForm textarea {
    padding: 12px;
    margin-bottom: 16px;
    border: 1px solid var(--border-color); /* Adjust this to your form's border color */
    border-radius: 5px;
    font-size: 16px;
    font-family: 'Roboto', sans-serif;
    box-sizing: border-box;
}

#contactForm input:focus,
#contactForm textarea:focus {
    border-color: var(--main-bg-color); /* Adjust this to your form's focus border color */
    outline: none;
}

#contactForm textarea {
    resize: vertical;
    height: 150px;
}

/* Styles for boxes */
.box {
    flex: 1;
    padding: 2rem;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background-size: cover; /* Adjust as needed */
    background-position: center; /* Adjust as needed */
    box-shadow: 0 4px 8px var(--box-shadow);
    max-width: 300px;
    margin: 10px;
    flex-direction: column;
    align-items: center; /* Centers the image and text horizontally */
    text-align: center; /* Centers the text within the box */
}

.boxes {
    /* align boxes in a row horizontally */
    display: flex;
    flex-wrap: wrap; /* Allow boxes to wrap to the next line */
    justify-content: center; /* Center boxes horizontally */
    gap: 2rem;
}

.box h2 {
    background-color: var(--second-bg-color);
    color: var(--main-font-color);
    margin: -2rem -2rem 2rem -2rem;
    padding: 1rem 0;
    border-radius: 8px 8px 0 0;
}

/* scroll to top button */
.scrollToTop {
    position: fixed;
    bottom: 20px;
    right: 20px;
    font-size: 24px;
    text-decoration: none;
    color: var(--main-font-color);
}

/* Pricing section */
.pricing-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2rem;
}

.pricing-box {
    background-color: var(--back-body-color);
    border: 2px solid   var(--border-color);
    border-radius: 8px;
    padding: 2rem;
    width: 250px;
    text-align: center;
    transition: transform 0.3s, box-shadow 0.3s;
    box-shadow: 0 4px 8px var(--box-shadow);
}

.pricing-box:hover {
    transform: translateY(-10px);
    box-shadow: var(--box-shadow);
}

.pricing-box h2 {
    background-color: var(--second-bg-color);
    color: var (--main-font-color);
    margin: -2rem -2rem 1rem -2rem;
    padding: 1rem 0;
    border-radius: 8px 8px 0 0;
}

.pricing-box .price {
    font-size: 2rem;
    color: var(--main-font-color);
    margin: 1rem 0;
}

.pricing-box ul {
    list-style: none;
    padding: 0;
    text-align: center;
}

.pricing-box ul li {
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--border-color);
}

.pricing-logo {
    margin-top: 1rem; /* Space above the logo */
}

.hidden {
    opacity: 0;
    filter: blur(0.5px);
    transition: all 2s;
}

.visible {
    opacity: 1;
    filter: blur(0);
}

@media(prefers-reduced-motion: reduce) {
    .visible {
        transition: none;
    }
}

.box:nth-child(2) {
    transition-delay: 400ms;
}

.box:nth-child(3) {
    transition-delay: 800ms;
}

.box:nth-child(4) {
    transition-delay: 1000ms;
}

/* Transition delay for .price elements */
.pricing-box:nth-of-type(2) {
    transition-delay: 400ms;
}

.pricing-box:nth-of-type(3) {
    transition-delay: 800ms;
}

.pricing-box:nth-of-type(4) {
    transition-delay: 800ms;
}


/* Blog and signature */
.blog-post-content {
    padding-left: 20px; /* Space between text and border */
    padding-right: 20px; /* Space between text and border */
    box-sizing: border-box; /* Ensures padding doesn't affect the width */
    max-width: 800px; /* Optional: Set a maximum width */
    margin: 0 auto; /* Center the content */
}

.signature {
    font-style: italic; /* Optional for styling the text */
}

/* about section */
#landing h2 {
    font-size: 3rem; /* Adjust this value as needed */
}
#landing h3 {
    font-size: 2rem; /* Adjust this value as needed */
    margin: 0%;
}


/* Landing section */
#landing {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Center content horizontally */
    align-items: center; /* Center content vertically */
    background-image: var(--gradient--2);
    height: 68vh; /* Ensure it takes the full viewport height */
}

.text-content {
    min-width: 300px; /* Ensure it doesn't shrink too small */
    flex-direction: column; /* Stack elements vertically */
    justify-content: center; /* Center content vertically */
    align-items: center; /* Center content horizontally */
    text-align: center; /* Center text inside the content */
}

#image-container {
    flex: 1; /* Adjust to take up to 35% of the space */
    min-width: 200px; /* Ensure it doesn't shrink too small */
    display: flex;
    flex-direction: column; /* Stack images vertically */
    gap: 10px; /* Space between images */
    align-items: center; /* Center images horizontally */
    justify-content: center; /* Center images vertically */
    order: 2; /* Ensure it comes after the text content */
}

#image-container img {
    width: auto; /* Adjust the size as needed */
    height: auto; /* Maintain aspect ratio */
}

/* Responsive adjustments */
@media (max-width: 768px) {
    #landing {
        flex-direction: column; /* Stack content vertically on small screens */
        align-items: center;
    }
    
    #landing .text-content, #image-container {
        flex: 1 1 100%; /* Take full width */
        text-align: center; /* Center the text */
        min-width: 0; /* Allow shrinking */
    }
    
    #image-container {
        align-items: center; /* Center images */
    }
}