/* ==================== Container ==================== */

/* Medium Screens (Tablets) */
@media (max-width: 1024px) {
    .container {
        width: 95%;
        /* Increase width slightly for better space usage */
    }
}

/* Small Screens (Mobile) */
@media (max-width: 768px) {
    .container {
        width: 100%;
        /* Utilize full width on smaller screens */
    }
}

/* Extra Small Screens */
@media (max-width: 480px) {
    .container {
        width: 100%;
        /* Full width for very small devices */
    }
}

/* ==================== Essentionals ==================== */

/* Tablets (≤991px) */
@media (max-width: 991px) {

    .title h3 {
        font-size: clamp(1.3rem, 4vw, 1.6rem);
    }

    .title b {
        font-size: clamp(1.1rem, 3vw, 1.3rem);
    }

    .title-dots {
        width: 100%;
        margin: 0.5rem 0;
    }
}

/* Mobile (≤767px) */
@media (max-width: 767px) {
    .title {
        text-align: center;
        align-items: center;
    }

    .title h3 {
        font-size: clamp(1.2rem, 3.5vw, 1.4rem);
    }

    .title b {
        font-size: clamp(1rem, 3vw, 1.2rem);
    }

    .title-dots {
        margin: 0.4rem 0;
        border-bottom: dotted 0.3rem rgba(135, 146, 164, 0.3);
    }
}

/* Extra Small Mobile (≤480px) */
@media (max-width: 480px) {

    .title h3 {
        font-size: 1.2rem;
    }

    .title b {
        font-size: 1rem;
    }

    .title-dots {
        width: 90%;
        margin: 0.3rem auto;
        border-bottom: dotted 0.2rem rgba(135, 146, 164, 0.3);
    }
}

@media (max-width: 1024px) {
    #topBtn {
        bottom: 4rem;
        right: 3rem;
        padding: 12px;
        font-size: 1rem;
    }
}

/* Small Screens (Mobile) */
@media (max-width: 768px) {
    #topBtn {
        bottom: 3rem;
        right: 2rem;
        padding: 10px;
        font-size: 0.9rem;
    }
}

/* Extra Small Screens */
@media (max-width: 480px) {
    #topBtn {
        bottom: 2.5rem;
        right: 1.5rem;
        padding: 8px;
        font-size: 0.8rem;
    }
}

/* ==================== Other-pages-hero ==================== */

@media (max-width: 991px) {
    .sub-container {
        padding-top: 10rem;
        padding-bottom: 8rem;
    }

    .sub-parent {
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .sub-box1 {
        width: 100%;
        margin-bottom: 2rem;
    }

    .sub-box2 {
        width: 100%;
        display: flex;
        justify-content: start;
    }

    .sub-box-top ul {
        justify-content: center;
    }

    .sub-box-top a {
        font-size: 1rem;
    }
}

/* For Mobile (≤ 767px) */
@media (max-width: 767px) {
    .sub-container {
        padding-top: 6rem;
        padding-bottom: 6rem;
    }

    .sub-box1 {
        width: 100%;
        margin-bottom: 1.5rem;
    }

    .sub-box2 {
        width: 100%;
        display: flex;
        margin-bottom: 1.5rem;
    }

    .sub-box-top ul {
        align-items: center;
    }

    .sub-box-top a {
        font-size: 1rem;
        margin-bottom: 0.5rem;
    }

    .sub-box-top li:last-child a {
        color: #8792a4;
        pointer-events: none;
    }
}

/* ==================== Hero ==================== */

@media (max-width: 1400px) {
    .div3 {
        flex: 0 0 auto;
        width: calc(60% - 0.75rem);
    }

    .div4 {
        flex: 0 0 auto;
        width: calc(40% - 0.75rem);
    }

    .div5 {
        flex: 0 0 auto;
        width: 100%;
    }
}

/* Desktops (992px - 1199px) */
@media (max-width: 1199px) {
    .container {
        max-width: 960px;
    }

    .title-1 svg,
    .title-3 svg {
        display: none;
    }

    .hero-top {
        align-items: center;
        flex-direction: column;
        text-align: center;
    }

    .title-1 h1,
    .title-2 h1,
    .title-3 h1 {
        font-size: 6rem;
    }
}

/* Tablets (768px - 991px) */
@media (max-width: 991px) {
    .container {
        max-width: 85%;
    }

    .title-1 h1,
    .title-2 h1,
    .title-3 h1 {
        font-size: 5rem;
    }

    .div3,
    .div4,
    .div5 {
        flex: 0 0 100%;
        padding: 1.5rem;
        display: flex;
        flex-direction: column;
    }
}

/* Mobile (≤767px) */
@media (max-width: 767px) {
    .container {
        max-width: 95%;
        padding: 0 5%;
    }

    .title-1,
    .title-2,
    .title-3 {
        text-align: center;
    }

    .title-1 p {
        display: none;
    }

    .column-title {
        align-items: center;
    }

    .title-4 {
        display: block;
        width: 100%;
        text-align: center;
    }

    .div5-wrapper {
        display: block;
    }

    .div3,
    .div4,
    .div5 {
        flex: 0 0 100%;
        padding: 1rem;
        text-align: center;
    }

    img {
        /*max-width: 90%;*/
        height: auto;
        display: block;
        /*margin: 0 auto;*/
    }
}

/* Extra Small Mobile (≤480px) */
@media (max-width: 480px) {
    .container {
        padding: 0 5%;
    }

    .title-1 h1,
    .title-2 h1,
    .title-3 h1 {
        font-size: 3.2rem;
        text-align: center;
    }

    .title-2 img,
    .title-3 img {
        max-width: 40%;
        display: block;
        margin: 0 auto;
    }
}




@media (max-width: 768px) {

    .price-container img {
        max-width: 100%;
    }

    .price-container {
        height: 120px; /* Adjust height for smaller screens */
    }

    .price-container h1 {
        font-size: 3rem; /* Smaller font size */
    }

    .div5 h1 {
        font-size: 30px; /* Adjust font size in .div5 for smaller screens */
    }
}

/* Mobile screens */
@media (max-width: 480px) {
    .price-container {
        height: 100px; /* Adjust height further for smaller mobile screens */
    }

    .price-container h1 {
        font-size: 2.5rem; /* Even smaller font size */
    }

    .div5 h1 {
        font-size: 24px; /* Adjust font size in .div5 for mobile screens */
    }

    .sale {
        align-items: center;
    }
}



/* ==================== About ==================== */

@media (min-width: 1200px) {
    .about-card {
        flex: 0 0 calc(33.333% - 1.5rem);
        /* 3 cards per row */
    }

    .about-card:nth-child(2) h1 {
        font-size: 2.5rem;
    }

    .about-card:nth-child(4) h3,
    .about-card:nth-child(6) h3 {
        font-size: 2rem;
    }
}

/* Desktops (992px - 1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
    .about-card {
        flex: 0 0 calc(50% - 1.5rem);
        /* 2 cards per row */
    }

    .about-card:nth-child(2) h1 {
        font-size: 2.2rem;
    }

    .about-card:nth-child(4) h3,
    .about-card:nth-child(6) h3 {
        font-size: 1.8rem;
    }
}

/* Tablets (768px - 991px) */
@media (min-width: 768px) and (max-width: 991px) {
    .about-card {
        flex: 0 0 100%;
        /* 1 card per row */
    }

    .about-card:nth-child(2) h1 {
        font-size: 2rem;
    }

    .about-card:nth-child(4) h3,
    .about-card:nth-child(6) h3 {
        font-size: 1.6rem;
    }
}

/* Mobile (≤767px) */
@media (max-width: 767px) {
    .about-wrapper {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 1.5rem;
        /* Better spacing between stacked cards */
    }

    .about-card {
        flex: 0 0 100%;
        width: 90%;
        /* Prevents cards from stretching edge-to-edge */
        max-width: 500px;
        border-radius: 5px;
        text-align: center;
        border-radius: 10px;
        /* Slightly rounded edges for better aesthetics */
    }

    .about-card:nth-child(2) h1 {
        font-size: clamp(1.6rem, 5vw, 1.8rem);
    }

    .about-card:nth-child(4) h3,
    .about-card:nth-child(6) h3 {
        font-size: clamp(1.4rem, 4.5vw, 1.5rem);
    }
}

/* Extra Small Mobile (≤480px) */
@media (max-width: 480px) {
    .about-card {
        width: 95%;
    }

    .about-card:nth-child(2) h1 {
        font-size: clamp(1.4rem, 4vw, 1.6rem);
        line-height: 1.6rem;
    }

    .about-card:nth-child(4) h3,
    .about-card:nth-child(6) h3 {
        font-size: clamp(1.2rem, 3.5vw, 1.4rem);
        line-height: 1.6rem;
    }
}


/* ==================== Sub ==================== */

/* Large Screens (1200px and up) */
@media (min-width: 1200px) {
    .sub-btn {
        gap: 40px;
    }

    .sub-btn .btn.right {
        font-size: 14px;
    }
}

/* Desktops (992px - 1199px) */
@media (max-width: 1199px) {

    .sub-content.left,
    .sub-content.right {
        width: 100%;
        text-align: center;
    }

    .sub-btn {
        gap: 20px;
    }

    .sub-btn .btn.left {
        padding: 1rem 1rem;
    }

    .sub-content.right img {
        display: none;
    }
}

/* Tablets (768px - 991px) */
@media (max-width: 991px) {
    .main-sub {
        flex-direction: column;
        padding: 3rem 1rem;
        text-align: center;
    }

    .sub-content.left {
        width: 100%;
        padding: 3.5rem 2rem;
    }

    .sub-btn {
        gap: 15px;
        justify-content: center;
    }

    .sub-btn .btn.left,
    .sub-btn .btn.right {
        padding: 0.9rem 1rem;
    }
}

/* Mobile (≤767px) */
@media (max-width: 767px) {
    .main-sub {
        padding: 2.5rem 1rem;
    }

    .sub-content.left,
    .sub-content.right {
        width: 95%;
        max-width: 450px;
        padding: 3rem 1.5rem;
    }

    .sub-top {
        flex-direction: column;
        align-items: center;
    }

    .sub-btn {
        flex-direction: column;
        gap: 10px;
        width: 100%;
    }

    .sub-btn .btn.left,
    .sub-btn .btn.right {
        width: 100%;
        max-width: 300px;
        padding: 1rem;
    }

    .sub-title p {
        font-size: 0.95rem;
    }

    .sub-title h1 {
        line-height: 2.4rem;
    }
}

/* Small Mobile (≤480px) */
@media (max-width: 480px) {
    .main-sub {
        padding: 2rem 0.8rem;
    }

    .sub-content.left,
    .sub-content.right {
        max-width: 350px;
        padding: 2.5rem 1rem;
    }

    .sub-btn {
        width: 100%;
    }

    .sub-btn .btn.left,
    .sub-btn .btn.right {
        font-size: 0.85rem;
        padding: 0.9rem;
    }

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

/* Extra Small Mobile (≤375px) */
@media (max-width: 375px) {

    .sub-content.left,
    .sub-content.right {
        max-width: 300px;
        padding: 2rem 0.8rem;
    }

    .sub-btn .btn.left,
    .sub-btn .btn.right {
        font-size: 0.8rem;
        max-width: 250px;
        padding: 0.8rem;
    }

    .sub-title p {
        font-size: 0.85rem;
    }
}

/* Ultra Small Mobile (≤320px) */
@media (max-width: 320px) {

    .sub-content.left,
    .sub-content.right {
        max-width: 280px;
        padding: 1.5rem 0.5rem;
    }

    .sub-btn {
        gap: 5px;
    }

    .sub-btn .btn.left,
    .sub-btn .btn.right {
        font-size: 0.75rem;
        max-width: 220px;
        padding: 0.7rem;
    }

    .sub-title p {
        font-size: 0.75rem;
    }
}


/* ==================== FAQ ==================== */

/* Large screens (≥1200px) */
@media (min-width: 1200px) {
    .faq-content {
        width: calc(50% - 15px);
    }

    .faq-bottom {
        justify-content: space-between;
    }

    .faq-info {
        width: 50%;
    }

    .faq-btn .btn {
        width: 210px;
    }

    .faq-box button {
        font-size: 1.2rem;
        padding: 1.8rem;
    }
}

/* Desktops (992px - 1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
    .faq-content {
        width: calc(50% - 15px);
    }

    .faq-bottom {
        justify-content: space-between;
    }

    .faq-info {
        width: 50%;
    }

    .faq-btn .btn {
        width: 200px;
    }

    .faq-box button {
        font-size: 1.1rem;
        padding: 1.6rem;
    }
}

/* Tablets (768px - 991px) */
@media (min-width: 768px) and (max-width: 991px) {
    .main-faq {
        padding: 3rem 0;
    }

    .faq-content {
        width: 100%;
        margin-right: 0;
        margin-bottom: 1.5rem;
    }

    .faq-bottom {
        flex-direction: column;
        gap: 1rem;
    }

    .faq-info {
        display: flex;
        width: 100%;
        flex-direction: column;
    }

    .faq-info:first-child {
        margin-bottom: 2rem;
    }

    .faq-info p {
        text-align: center;
    }

    .faq-btn .btn {
        width: 100%;
    }

    .faq-box button {
        font-size: 1rem;
        padding: 1.2rem;
    }
}

/* Mobile (≤767px) */
@media (max-width: 767px) {
    .main-faq {
        padding: 2rem 0;
    }

    .faq-content {
        width: 100%;
        /* Full width for mobile screens */
        margin-right: 0;
        margin-bottom: 1rem;
    }

    .faq-bottom {
        flex-direction: column;
        gap: 1rem;
    }

    .faq-info {
        display: flex;
        width: 100%;
        flex-direction: column;
    }

    .faq-info:first-child {
        margin-bottom: 2rem;
    }

    .faq-info p {
        text-align: center;
    }

    .faq-btn .btn {
        width: 100%;
    }

    .faq-box button {
        font-size: 1rem;
        padding: 1.2rem;
    }
}

/* ==================== Blog ==================== */

/* Responsive Design */
@media (max-width: 1024px) {
    .blog-list {
        display: flex;
        flex-direction: column;
        gap: 20px;
        /* Adds space between blog cards */
    }

    .blog-card {
        flex-direction: column;
        align-items: center;
        /* Centers content for better appearance */
        width: 100%;
    }

    .blog-box-left,
    .blog-box-right {
        width: 100%;
    }

    .blog-box-left ul {
        display: none;
        /* Hides unnecessary elements */
    }

    .blog-box-right {
        padding: 20px;
        /* Adds padding for better spacing */
        text-align: center;
        /* Centers text for better mobile layout */
    }
}


/* ==================== Footer ==================== */

/* Large screens (≥1200px) */
@media (min-width: 1200px) {
    .footer1 {
        display: flex;
        justify-content: space-between;
        padding-top: 3rem;
        padding-bottom: 8rem;
    }

    .footer-news,
    .footer-links {
        display: flex;
        width: 48%;
    }

    .footer-logo h1 {
        font-size: 2.5rem;
    }

    .footer2 {
        display: flex;
        justify-content: space-between;
        padding-top: 3rem;
        padding-bottom: 3rem;
    }

    .footer-social {
        width: 60%;
    }

    .footer-address {
        width: 35%;
    }

    .footer-location {
        width: 45%;
    }
}

/* Desktops (992px - 1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
    .footer1 {
        padding-top: 2rem;
        padding-bottom: 6rem;
    }

    .footer-logo h1 {
        font-size: 2.2rem;
    }

    .footer-news,
    .footer-links {
        width: 48%;
    }

    .footer-link.left a {
        font-size: 1.2rem;
    }

    .footer2 {
        display: flex;
        justify-content: space-between;
        padding-top: 3rem;
        padding-bottom: 2rem;
    }

    .footer-social {
        width: 60%;
    }

    .footer-address {
        width: 35%;
    }

    .footer-copy p {
        font-size: 0.9rem;
    }
}

/* Tablets (768px - 991px) */
@media (min-width: 768px) and (max-width: 991px) {
    .footer1 {
        flex-direction: column;
        padding-top: 2rem;
        padding-bottom: 4rem;
    }

    .footer-news,
    .footer-links {
        width: 100%;
        margin-bottom: 2rem;
    }

    .footer-logo {
        flex-direction: column;
    }

    .footer-logo h1 {
        font-size: 2rem;
    }

    .footer-link.left a,
    .footer-link.right a {
        font-size: 1rem;
    }

    .footer2 {
        flex-direction: column-reverse;
        padding-top: 2rem;
        padding-bottom: 2rem;
    }

    .footer-social {
        width: 100%;
        margin-bottom: 2rem;
    }

    .footer-address {
        width: 100%;
        margin-bottom: 2rem;
        display: block;
    }

    .footer-location {
        width: 100%;
    }

    .footer-copy {
        flex-direction: column;
        text-align: center;
    }
}

/* Mobile (≤767px) */
@media (max-width: 767px) {
    footer {
        min-height: 100vh;
    }

    .footer1 {
        flex-direction: column;
        padding-top: 2rem;
        padding-bottom: 4rem;
    }

    .footer-news,
    .footer-links {
        width: 100%;
        margin-bottom: 2rem;
    }

    .footer-logo h1 {
        font-size: 1.8rem;
    }

    .footer-link.left a,
    .footer-link.right a {
        font-size: 1rem;
    }

    .footer2 {
        flex-direction: column;
        padding-top: 2rem;
        padding-bottom: 2rem;
    }

    .footer-social {
        width: 100%;
        margin-bottom: 2rem;
    }

    .footer-address {
        width: 100%;
        margin-bottom: 2rem;
        justify-content: flex-start;
    }

    .footer-location {
        width: 100%;
    }

    .footer-copy {
        flex-direction: column;
        text-align: center;
    }

    .footer-copy p {
        font-size: 0.9rem;
    }

    .input-group {
        width: 70%;
    }
}

/* ======================================== Page-Service ======================================== */

/* ==================== Process ==================== */

@media screen and (max-width: 1024px) {
    .process-parent {
        flex-wrap: wrap;
        gap: 20px;
    }

    .process-box {
        width: calc(50% - 10px);
        margin-right: 0;
    }

    .process-box::after {
        display: none;
    }
}

@media screen and (max-width: 600px) {
    .process-box {
        width: 100%;
    }
}

/* ==================== Info ==================== */

@media screen and (max-width: 1024px) {
    .info-box {
        width: calc(50% - 1rem);
    }

    .info-box::after {
        display: none;
    }
}

@media screen and (max-width: 600px) {
    .info-box {
        width: 100%;
    }
}

/* ==================== Abonnemang ==================== */

@media screen and (max-width: 1024px) {
    .abonnemang-box {
        width: 100%;
    }

    .abonnemang-btn {
        width: 100%; /* make button container stretch */
        text-align: center;
    }

    .abonnemang-btn .btn {
        width: 100%; /* make button itself full width if desired */
    }
}

@media screen and (max-width: 767px) {
    .abonnemang-box {
        padding: 1.5rem;
    }

    .abonnemang-title h1 {
        font-size: 1.6rem;
        line-height: 2.2rem;
    }

    .abonnemang-price h1 {
        font-size: 3rem; /* more readable on mobile */
        line-height: 1.4rem;
    }

    .abonnemang-price span {
        margin-left: 0;
    }
}

/* ==================== Price-list ==================== */

@media screen and (max-width: 1200px) {
    .price-parent {
        flex-direction: column;
    }

    .price-box {
        width: 100%;
        padding: 1rem;
    }
}

@media screen and (max-width: 767px) {

    .price-title h3 {
        margin-top: 2rem;
        font-size: 1.4rem;
    }

    .price-price h3 {
        font-size: 1.6rem;
        line-height: 2.2rem;
    }

    .price-price span {
        display: block;
        font-size: 1rem;
        margin-top: 0.3rem;
    }

    .price-under p,
    .price-list p,
    .price-text p {
        font-size: 14px;
    }

    .price-border {
        width: 100%;
    }
}

/* ======================================== Page-About ======================================== */

@media screen and (max-width: 1024px) {
    .story-content {
        flex-direction: column;
    }

    .story-box.left,
    .story-box.right {
        width: 100%;
        margin-left: 0;
        height: auto;
    }

    .story-img {
        display: none;
    }

    .story-box p {
        padding: 1.4rem;
        font-size: 1rem;
    }

    .story-main {
        padding: 3rem 0;
    }
}

/* ======================================== Page-Kontakta ======================================== */

@media (max-width: 991px) {

    .form-grid {
        display: flex;
        grid-template-columns: 1fr 1fr;
        gap: 30px;
        flex-direction: column;
    }
}

@media (max-width: 768px) {

    /* Adjust the main contact section layout */
    .contact-main {
        flex-direction: column;
        align-items: center;
    }

    .half-width-group {
        display: flex;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
        flex-direction: column;
        margin-bottom: 1rem;
    }

    /* Make the form stack in one column instead of two */
    .form-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    /* Adjust the price section */
    .contact-box.left {
        width: 100%;
    }

    .contact-box:first-child select {
        margin-bottom: 1rem;
    }

    /* Adjust button and form spacing */
    .btn-group {
        flex-direction: column;
        align-items: center;
    }

    .btn-group p {
        text-align: center;
    }

    .contact-box button {
        width: 100%;
    }

    .contact-price ul li {
        display: block;
    }

    .contact-price-info ul li {
        padding-right: 10px;
    }
}

@media (max-width: 480px) {

    /* Adjust fonts for smaller screens */
    .contact-box label {
        font-size: 14px;
    }

    .form-group input,
    .form-group select,
    .form-group textarea {
        font-size: 14px;
    }

    .contact-box {
        padding: 2rem;
    }

    .contact-price ul li {
        font-size: 0.9rem;
    }

    .contact-price-info ul p {
        font-size: 0.9rem;
    }

    .contact-price ul p {
        line-height: 1.4rem;
        margin-bottom: 10px;
    }

}

/* ==================== Special-Why ==================== */

@media (max-width: 1024px) {

    /* Adjust padding for slightly smaller screens */
    .why-box {
        padding: 4rem 6rem;
    }

    /* Adjust the width of .why-card elements for medium screens */
    .why-card {
        width: 250px;
        height: auto;
        /* Allow height to adjust based on content */
    }

    .why-card img {
        width: 70px;
    }

    .why-card h3 {
        font-size: 1.6rem;
    }
}

@media (max-width: 768px) {

    /* Make the .why-box stack vertically on small screens */
    .why-box {
        flex-direction: column;
        align-items: center;
        padding: 3rem 4rem;
    }

    /* Adjust the width and remove height limit for cards */
    .why-card {
        width: 100%;
        max-width: 350px;
        /* Prevent it from growing too wide */
        height: auto;
        margin-bottom: 3rem;
        /* Add more space between stacked cards */
    }

    .why-card img {
        width: 60px;
    }

    .why-card h3 {
        font-size: 1.4rem;
    }
}

@media (max-width: 480px) {

    /* Further reduce padding and size for mobile */
    .why-box {
        padding: 2rem 3rem;
    }

    /* Make sure cards take up most of the width and stack properly */
    .why-card {
        width: 100%;
        max-width: 300px;
        margin-bottom: 2rem;
    }

    .why-card img {
        width: 50px;
        margin-bottom: 20px;
    }

    .why-card h3 {
        font-size: 1.2rem;
    }
}

/* ==================== Team-addon ==================== */

@media (max-width: 1024px) {
    .team-add {
        height: auto;
        /* Allow content to adapt to height */
        flex-direction: column;
        justify-content: center;
        padding: 3rem 0;
    }

    /* Adjust the widths for the content sections */
    .add-content.left,
    .add-content.right {
        width: 100%;
        margin-right: 0;
        margin-bottom: 1.5rem;
        /* Add space between stacked content */
    }

    .add-details1 {
        flex-direction: column;
        gap: 20px;
    }

    /* Adjust text sizes for better readability */
    .add-details1 h3 {
        font-size: 1rem;
    }

    .add-details2 h3 {
        font-size: 0.9rem;
    }
}

/* Small screens and mobile devices */
@media (max-width: 768px) {
    .team-add {
        padding: 2rem 0;
        flex-direction: column;
        height: auto;
    }

    .add-content.left,
    .add-content.right {
        width: 100%;
        margin-right: 0;
        margin-bottom: 2rem;
        /* Add more space between stacked content */
        padding: 2rem;
        /* Reduce padding on mobile devices */
    }

    .add-details1 h3 {
        font-size: 1rem;
        line-height: 1.4rem;
        /* Make text more readable on smaller screens */
    }

    .add-details2 h3 {
        font-size: 0.9rem;
        line-height: 1.4rem;
        /* Adjust line height for mobile */
    }

    .add-details1 .btn {
        padding: 0.8rem 1.2rem;
    }

    .add-details2 .btn {
        font-size: 13px;
        letter-spacing: 0.05rem;
    }

    .add-details1 .btn i,
    .add-details2 .btn i {
        width: 40px;
        height: 40px;
        font-size: 16px;
        padding: 4px;
    }
}

/* Extra small screens */
@media (max-width: 480px) {
    .team-add {
        padding: 1.5rem 0;
    }

    .add-content.left,
    .add-content.right {
        padding: 1.5rem;
        /* Reduce padding further for mobile screens */
        margin-bottom: 1rem;
    }

    .add-details1 h3,
    .add-details2 h3 {
        font-size: 0.9rem;
        line-height: 1.3rem;
        /* Adjust font size and line height */
    }

    .add-details1 .btn,
    .add-details2 .btn {
        font-size: 12px;
        padding: 0.6rem 1rem;
    }

    .add-details1 .btn i,
    .add-details2 .btn i {
        width: 35px;
        height: 35px;
        font-size: 14px;
    }
}