@import url('https://fonts.googleapis.com/css2?family=Aclonica&family=Aladin&family=Allura&family=Alumni+Sans+Pinstripe:ital@0;1&family=Euphoria+Script&family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap');

body, html {
    margin: 0;
    padding: 0;
    overflow-x: hidden; /* Prevent horizontal scroll */
    background: #e6dbc9;
    scroll-behavior: smooth;
}
ul {
    margin-top: 0;
    margin-bottom: 0;
    padding: 0 1rem;
}

nav {
    box-shadow: 1px 6px 21px -5px rgba(66, 68, 90, 1);
    padding: 1rem 2rem;
    display: flex;
    padding: 20px;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 1000;
    background: #1f2937;
  }

  .logo {
    font-size: 1.2rem;
    font-weight: bold;
    color: #FFEDDA;
    text-decoration: none;
  }

  .nav-links {
    display: flex;
    gap: 1.5rem;
  }
  .nav-links a {
    position: relative;
    display: inline-block;
    color: transparent; /* hide original text */
    text-decoration: none;
    font-size: 1rem;
    padding: 0 15px;
    perspective: 500px;
    font-family: 'Aclonica', cursive;
    overflow: hidden;
  }
  
  /* Flip layers */
  .nav-links a::before,
  .nav-links a::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    font-size: 1.2rem;
    transition: transform 0.3s ease;
    transform-origin: bottom;
    backface-visibility: hidden;
    text-align: center;
  }
  
  /* Normal state */
  .nav-links a::before {
    transform: rotateX(0deg);
    color: #FFEDDA;
  }
  
  /* Flip face */
  .nav-links a::after {
    transform: rotateX(-90deg);
    color: #f05a28;
  }
  
  /* Hover flip */
  .nav-links a:hover::before {
    transform: rotateX(90deg);
  }
  
  .nav-links a:hover::after {
    transform: rotateX(0deg);
  }
  
  .hamburger {
    display: none;
    flex-direction: column;
    cursor: pointer;
    gap: 5px;
  }

  .hamburger div {
    width: 25px;
    height: 3px;
    background-color: #007074;
    transition: all 0.3s ease;
}

  /* Hamburger Animation */
  .hamburger.toggle div:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
  }

  .hamburger.toggle div:nth-child(2) {
    opacity: 0;
  }

  .hamburger.toggle div:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
  }
  @media (max-width: 768px) {
    nav{
        padding: 20px;
    background: #EAD196;
    }
    .nav-links {
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      background-color: #5B2333;
      flex-direction: column;
      align-items: center;
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.4s ease-in-out;
    }
  
    .nav-links.open {
      min-height: 80vh;
    }
    .nav-links a{
        font-size: 2rem;
        padding: 10px;
        margin-top: 1.5rem;
    }
    .hamburger {
      display: flex;
    }
  }
.banner {
    background: url('./images/image2.jpg');
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    height: 90vh;
    display: flex;
    justify-content: space-around;
    align-items: center;
    text-align: center;
    color: #F7F4F3;
    position: relative;
    padding: 20px;
    flex-wrap: wrap; /* Allows better stacking on small screens */
}

/* Dark Overlay */
.banner::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5); /* Adjust overlay darkness */
    z-index: 1;
}

/* Container for Text */
.container {
    position: relative;
    z-index: 2; /* Keeps text above the overlay */
    text-align: center;
    max-width: 1120px; /* Prevents text from stretching too wide */
}

/* Heading Styles */
.container h1 {
    font-size: 4rem;
    font-family: 'Aclonica', cursive;
    margin: 3rem 0;
    color: #F7B733;
}

/* Paragraph Styles */
.container p {
    font-size: 1.8rem;
    margin: 0 auto;
    width: 80%;
    font-family: 'Alumni Sans Pinstripe', sans-serif;
    font-weight: 600;
    color: azure;
}

/* ✅ Responsive Adjustments */
@media (max-width: 1024px) {
    .container {
        width: 90%;
    }

    .container h1 {
        font-size: 3rem;
        margin: 2rem 0;
    }

    .container p {
        font-size: 1.8rem;
    }
}

@media (max-width: 768px) {
    .container h1 {
        font-size: 2.5rem;
    }

    .container p {
        font-size: 1.5rem;
    }
}

@media (max-width: 480px) {
    .container h1 {
        font-size: 2rem;
        margin: 1.5rem auto;
    }

    .container p {
        width: 100%;
        font-size: 1.2rem;
    }
}

.hero {
    width: 100%;
    min-height: 100vh;
    padding: 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    position: relative;
    background: url("./images/bg38.jpg") no-repeat center;
    background-size: cover;
    background-attachment: fixed;
}

/* Glassmorphism effect */
.glass-container {
    background: rgba(255, 255, 255, 0.15); /* Transparent white */
    backdrop-filter: blur(30px) saturate(75%);
    -webkit-backdrop-filter: blur(10px) saturate(150%);
    border-radius: 10px;
    padding: 60px;
    text-align: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Title */
.title {
    margin: auto;
    width: fit-content;
    text-align: center;
    color: #F7F4F3;
    position: relative;
}

.title h1 {
    font-size: 6rem;
    position: relative;
    z-index: 1;
    color: #FC4A1A;
    font-family: 'Aladin', cursive;
}

.title p {
    color: #FFEDDA;
    font-size: 1.5rem;
    position: relative;
    z-index: 1;
    font-family: 'Arial', cursive;
}

/* Background Text */
.back-text {
    width: max-content;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.back-text span {
    display: inline-block;
    font-size: 10rem;
    font-weight: 700;
    color: rgb(28, 21, 21);
    transform: translateY(-5%);
    z-index: 2;
    opacity: 40%;
}

/* Story Text */

.story p {
    width: 80%;
    margin: 10px auto;
    padding: 20px;
    font-size: 1.5rem;
    text-align: center;
    color: #0c0a09;
}

/* Buttons */
.button {
    width: 50%;
    margin: 20px auto;
    display: flex; /* Ensures buttons align properly */
    justify-content: center; /* Centers buttons */
    gap: 10px; /* Adds spacing between buttons */
    flex-wrap: wrap; /* Ensures responsiveness */
}

.button a {
    display: inline-flex; /* Ensures proper alignment of icons */
    align-items: center; /* Centers text & icon vertically */
    text-decoration: none;
    padding: 10px 20px;
    font-size: 1.2rem;
    font-weight: bold;
    background: #ff5733;
    color: white;
    border-radius: 8px;
    transition: all 0.3s ease-in-out;
    will-change: transform;
    border: none;
}

.button a:nth-child(1) {
    color: #fff;
    background-color: #FC4A1A;
}

.button a:nth-child(2) {
    color: #333;
    background: rgba(255, 255, 255, 0.3);
    backdrop-filter: blur(5px); /* Glass effect */
}

.button i {
    margin-right: 8px;
}

.button a:hover {
    animation: jello-vertical 0.9s ease 0s 1 normal both;
}

/* Jello Vertical Animation */
@keyframes jello-vertical {
    0% { transform: scale3d(1, 1, 1); }
    30% { transform: scale3d(0.75, 1.25, 1); }
    40% { transform: scale3d(1.25, 0.75, 1); }
    50% { transform: scale3d(0.85, 1.15, 1); }
    65% { transform: scale3d(1.05, 0.95, 1); }
    75% { transform: scale3d(0.95, 1.05, 1); }
    100% { transform: scale3d(1, 1, 1); }
}


/* ✅ Responsive Adjustments */
@media (max-width: 1024px) {
    .title h1 {
        font-size: 3.5rem;
    }

    .back-text span {
        font-size: 8rem;
    }

    .story p {
        font-size: 1.3rem;
    }

    .button {
        width: 40%;
    }
}

@media (max-width: 768px) {
    .title h1 {
        font-size: 3rem;
    }

    .title p {
        font-size: 0.9rem;
    }

    .back-text span {
        font-size: 6rem;
    }

    .story p {
        width: 85%;
        font-size: 1.2rem;
    }

    .button {
        width: 90%;
    }

    .button a {
        font-size: 1rem;
        padding: 8px 16px;
    }

    .button i {
        margin-right: 5px;
    }
}

@media (max-width: 480px) {
    .title h1 {
        font-size: 2.5rem;
        color: #5B2333;
    }
    .hero{
        padding: 10px 20px;
    }
    .glass-container{
        padding: 10px;
    }
    .back-text span {
        display: none;
    }
    .story p {
        font-size: 1rem;
        width: 100%;
        padding: 10px;
    }
    .button {
        width: 100%;
    }

    .button a {
        font-size: 0.9rem;
        padding: 6px 12px;
    }

    .button i {
        margin-right: 4px;
    }
}


.hire{
    width: 100%;
    min-height: 40vh;
    padding-top: 50px;
    background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('./images/bg6.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}
.hero-text{
    width: 70%;
    margin: 0 auto;
    text-align: center;
    color: #F7F4F3;
}
.hero-text h2{
    font-size: 4rem;
    font-family: 'Aladin', cursive;
    margin: 1rem;
    color: #F9F9F9;
}
.hero-text p{
    font-size: 2.1rem;
    font-family: "Alumni Sans Pinstripe", cursive;
    font-weight: 700;
    margin-bottom: 20px;
    color: azure;
}
.skill {
    width: 100%;
    transform: translate(20%, -20%);
}

.skill h1 {
    font-size: 8rem;
    font-family: 'Aclonica', cursive;
    margin: 7rem 0rem 0rem 2rem;
    color: #FCF6B1;
    left: 0;
    position: relative;
    z-index: 1;
}

@keyframes bounce {
    0% { transform: translateY(0); }
    30% { transform: translateY(-10px); }
    60% { transform: translateY(5px); }
    100% { transform: translateY(0); }
  }
.back-text-service {
    width: max-content;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-70%, -47%);
}

.back-text-service span {
    display: inline-block;
    font-size: 15rem;
    font-weight: 700;
    color: #ccc;
    transform: translateY(-20%);
    z-index: 2;
    opacity: 30%;
}

/* Media query for screens 800px or smaller */
@media (max-width: 800px) {
    .back-text-service span {
        display: none; /* Hide the span text on smaller screens */
    }
}

/* Media query for screens 1024px or smaller (tablets and smaller desktops) */
@media (max-width: 1024px) {
    .skill h1 {
        font-size: 6rem; /* Reduce font size for tablets */
        margin: 5rem 1rem 0rem 2rem; /* Adjust margins */
    }

    .back-text-service span {
        font-size: 12rem; /* Adjust the size of the span text */
    }
}

/* Media query for screens 768px or smaller (tablets and smaller screens) */
@media (max-width: 768px) {
    .skill h1 {
        font-size: 5rem; /* Further reduce font size for smaller screens */
        margin: 4rem 1rem 0rem 1rem; /* Adjust margins */
    }

    .back-text-service {
        transform: translate(-50%, -50%); /* Center text better on mobile */
    }

    .back-text-service span {
        font-size: 8rem; /* Further reduce the span text size */
    }
}

/* Media query for screens 480px or smaller (mobile devices) */
@media (max-width: 480px) {
    .skill h1 {
        border-radius: 20px;
        font-size: 2rem;
        color: #FFB22C;
        padding: 20px;
        background-color: black;
    }
    .hire{
        background:url('./images/bg19.jpg') no-repeat;
        background-size: cover;
        background-attachment: fixed;
        height: 70vh;
    }
    .hero-text h2{
        font-size: 2.5rem;
        color: #FFB22C;
    }
    .hero-text p{
        font-size: 1.5rem;
        color: #FEF9E1;
    }
    .back-text-service span {
        font-size: 6rem; /* Smaller font size for mobile screens */
    }
}
/**Slider styles starts**/
.container-card-slider{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}
.card__container{
    padding-block: 5rem;
}
.card__content{
    margin-inline: 1.75rem;
    border-radius: 1.25rem;
    overflow: hidden;
}
.card__article{
    width: 300px;
    border-radius: 1.25rem;
    overflow: hidden;
}
.card__image{
    position: relative;
    margin-bottom: -.75rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.card__img{
    width: 360px;
    height: 260px;
    object-fit: cover;
    border-radius: 20px;
    z-index: 5;
}
.card__name{
    font-size: 1.6rem;
    font-family: 'Aladin', sans-serif;
    color: #FFB22C;
}
.card__description{
    font-size: 1.3rem;
    font-family: "Alumni Sans Pinstripe", sans-serif;
    font-weight: bold;
    color: #F7F7F7;
}
.work-button{
    display: inline-block;
    background: linear-gradient(to right, #2dd4bf, #1f2937);
    color: #FFEDDA;
    padding: 10px 20px;
    font-weight: bold;
    border-radius: .25rem;
    text-decoration: none;
}
/* ----------------------------------------------
* Generated by Gradienty on 2025-04-01 23:48
* animation shake-horizontal-normal
* ----------------------------------------
*/
@keyframes shake-horizontal {0%, 100% { transform: translateX(0); } 10%, 30%, 50%, 70% { transform: translateX(-10px); } 20%, 40%, 60% { transform: translateX(10px); } 80% { transform: translateX(8px); } 90% { transform: translateX(-8px);} }

.left-side-card a:hover{
    animation: shake-horizontal 0.8s cubic-bezier(0.455, 0.030, 0.515, 0.955) 0s 1 normal both; 
    color: #FFEDDA;
    background: #ff5733;
}
.card__data{
    height: 220px;
    background-color: #27548A;
    padding: 1.5rem 2rem;
    border-radius: 1rem;
    text-align: center;
    position: relative;
    z-index: 10;
}
.swiper-button-prev::after,
.swiper-button-next::after{
    content: '';
}
.swiper-button-next::after,
.swiper-button-prev::after{
    width: initial;
    height: initial;
    font-size: 3rem;
    color: #FC4A1A;
    display: none;
}

.swiper-button-prev{
    left: 0;
}
.swiper-button-next{
    right: 0;
}
.swiper-pagination-bullet{
    background-color: hsl(212, 32%, 40%);
    opacity: 1;
}
.swiper-pagination-bullet-active{
    background-color: #FC4A1A;
}

@media screen and (max-width:480px){
    
    .card__data{
        padding: 1rem;
    }
    .card__img{
        width: 90%;
        left: 5%;
    }
}
@media screen and (max-width:768px){
    .card__content{
        margin-inline: 3rem;
    }
    .swiper-button-next,
    .swiper-button-prev{
        display: block;
    }
}
@media screen and (max-width:1024px){
    .card__container{
        max-width: 1120px;
    }
    .swiper-button-next{
        right: -1rem;
    }
    .swiper-button-prev{
        left: -1rem;
    }
}


.skill-container {
    width: 100%;
    margin: 0 auto;
    height: auto; /* Changed from 60vh to auto for better responsiveness */
    text-align: center;
    padding: 20px;
}

.skill-container h1 {   
    font-family: 'Aladin', cursive;
    font-size: 4rem;
    color: #084C61;
    margin-bottom: 2rem;
}
/* Skill content responsive layout */
.skill-content {
    width: 100%;
    display: flex;
    flex-wrap: wrap; /* Allows wrapping on smaller screens */
    justify-content: center; /* Centers items when stacked */
    gap: 20px; /* Adds space between cards */
    margin: 20px auto;
}

.skill-card {
    background-color: #084C61;
    padding: 20px;
    border-radius: 10px;
    flex: 1; /* Allows equal distribution */
    max-width: 250px; /* Adjust based on number of items */
    text-align: center;
    min-width: 200px; /* Prevents shrinking too much */
    white-space: normal; /* Allows text wrapping inside */
}

.skill-card h2 {
    padding: 10px;
    font-size: 1.5rem;
    color: chocolate;
    font-family: 'Aclonica', sans-serif;
}

.skill-card li {
    list-style: none;
    color: #E5D0AC;
    font-size: 1.5rem;
    font-family: "Alumni Sans Pinstripe", cursive;
    font-weight: bolder;   
}
/* Responsive Adjustments */
@media screen and (max-width: 1024px) {
    .skill-container h1 {
        font-size: 3rem;
    }
}

@media screen and (max-width: 768px) {
    .skill-container h1 {
        font-size: 2.5rem;
    }

    .skill-content {
        flex-direction: column;
        align-items: center;
    }

    .skill-card {
        width: 100%; /* Full width on small screens */
        max-width: 90%;
    }
}

@media screen and (max-width: 480px) {
    .skill-container h1 {
        font-size: 2rem;
    }

    .skill-card li {
        font-size: 1.2rem;
    }
}

.get-started {
    width: 100%;
    height: 100vh;
    display: flex;
    background-image: url('./images/bg24.jpg');
    background-position: center;
    background-size: cover;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap; /* Allows stacking on small screens */
}

/* Container for Text & Image */
.border-panels {
    width: 90%;
    height: 70vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap; /* Stacks on smaller screens */
    gap: 20px; /* Adds spacing */
}

/* Left Side Text */
.left-side-card {
    flex: 1; /* Makes it take available space */
    min-width: 300px; /* Ensures it doesn’t shrink too much */
    max-width: 50%;
    padding: 2rem;
    text-align: center;
}

.left-side-card h1 {
    font-family: 'Aladin', cursive;
    color: #0F7173;
    font-size: 2.5rem;
}

.left-side-card p {
    color: #9e363a;
    font-weight: bolder;
    font-size: 1.5rem;
    font-family: "Alumni Sans Pinstripe", cursive;
    width: 90%;
    margin: 0 auto;
}

/* Right Side Image */
.right-side-cards {
    flex: 1; /* Takes remaining space */
    min-width: 300px; /* Ensures it doesn’t shrink too much */
    max-width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.right-side-cards img {
    width: 100%;
    max-height: 80vh;
    /*max-height: 500px;  Keeps image from getting too tall */
    object-fit: cover; /* Prevents distortion */
    border-radius: 10px; /* Optional: Adds rounded corners */
}

/* Choose Card Info */
.choose-card-info {
    width: 90%;
    display: flex;
    justify-content: space-between;
    margin: 20px auto;
    flex-wrap: wrap;
}

.small-card-info {
    flex: 1 1 45%; /* Allows two per row on medium screens */
    text-align: center;
    margin-bottom: 20px;
}

.small-card-info h2 {
    font-size: 1.2rem;
    color: #0F7173;
    font-family: 'Aclonica', sans-serif;
}

.small-card-info p {
    color: #9e363a;
    width: 95%;
}

/* ✅ Responsive Adjustments */
@media (max-width: 1024px) {
    .get-started {
        height: auto; /* Adjust height dynamically */
        padding: 40px 20px;
    }

    .border-panels {
        flex-direction: column; /* Stack text & image */
        height: auto;
    }

    .left-side-card, .right-side-cards {
        max-width: 100%; /* Full width on smaller screens */
        text-align: center;
    }

    .right-side-cards img {
        max-height: 400px;
        padding: 0;
    }

    .choose-card-info {
        flex-direction: column;
        align-items: center;
    }

    .small-card-info {
        flex: 1 1 100%;
    }
}

@media (max-width: 768px) {
    .left-side-card h1 {
        font-size: 2rem;
    }

    .left-side-card p {
        font-size: 1.3rem;
    }

    .right-side-cards img {
        max-height: 300px;
    }

    .small-card-info h2 {
        font-size: 1rem;
    }
}

@media (max-width: 480px) {
    .left-side-card h1 {
        font-size: 1.8rem;
    }

    .left-side-card p {
        font-size: 1.2rem;
    }

    .small-card-info h2 {
        font-size: 0.9rem;
    }

    .small-card-info p {
        font-size: 0.9rem;
    }
    .right-side-cards img{
        display: none;
    }
}

footer {
    position: relative;
    width: 100%;
    background: #5B2333;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: 20px; /* Added padding for better spacing */
}

/* Social Links & Menu */
.social-links-footer, .menu {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    margin: 20px 0;
    gap: 15px; /* Ensures spacing between items */
}

.social-links-footer li, .menu li {
    list-style: none;
}

.social-links-footer a, .menu a {
    text-decoration: none;
    font-size: 1.8rem; /* Slightly smaller for responsiveness */
    color: #F7F4F3;
    margin: 0 8px;
    display: inline-block;
    transition: 0.3s;
}
.menu a{
    text-decoration: none;
    color: #F7F4F3;
    margin: 0 10px;
    font-size: 1.4rem;
    opacity: 0.7;
    display: inline-block;
}
.social-links-footer a:hover {
    color: #F7F4F3;
    transform: translateY(-5px); /* Keeps the slight bounce effect */
    text-shadow: 0 0 10px rgba(247, 244, 243, 0.8), 
                 0 0 20px rgba(247, 244, 243, 0.6), 
                 0 0 30px rgba(247, 244, 243, 0.4);
}
.menu a:hover {
    opacity: 1;
    transform: translateY(-5px); /* Keeps the slight bounce effect */
    text-shadow: 0 0 10px rgba(247, 244, 243, 0.8), 
                 0 0 20px rgba(247, 244, 243, 0.6), 
                 0 0 30px rgba(247, 244, 243, 0.4);
}

/* Footer Text */
footer p {
    color: #F7F4F3;
    font-family: "Alumni Sans Pinstripe", cursive;
    font-weight: bolder;
    font-size: 1.3rem;
    margin: 20px;
    text-align: center;
}

/* Responsive Design */
@media (max-width: 768px) {
     .menu {
        flex-direction: column; /* Stack elements on smaller screens */
        gap: 20px;
    }
    .social-links-footer a, .menu a {
        font-size: 1.5rem;
        margin: 5px 0;
    }
    footer p {
        font-size: 1.2rem;
        margin: 15px;
    }
}

@media (max-width: 480px) {
     .menu a {
        font-size: 1.3rem;
    }
    footer p {
        font-size: 1rem;
    }
}