/* ============================= */
/* SHARED BASE STYLE */
/* ============================= */

html {
    scroll-behavior: smooth;
  
}

.leftyes,
.leftyes3,
.leftyes4,
.leftyes5,
.leftyes6,
.leftyes7,
.leftyes8,
.leftyes1 {
    position: relative;
    display: inline-block;
    padding: 0px;
    z-index: 999;
}

.leftyes::before,
.leftyes3::before,
.leftyes4::before,
.leftyes5::before,
.leftyes6::before,
.leftyes7::before,
.leftyes8::before,
.leftyes1::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;

    width: 520px;
    height: 550px;
    border-radius: 120px;

    background-size: 600% 600%;
    filter: blur(50px);
    opacity: 0.85;
}

/* Keep text above animation */
.section-subtitle,
.section-title {
    position: relative;
    z-index: 2;
}

/* ============================= */
/* LEFTYES - TECH / ENERGETIC */
/* ============================= */

.leftyes::before {
    background: linear-gradient(
    135deg,
    #0B3B2A, #1A4F3A, #29644A, #38785A, #478D6A,
    #56A27A, #65B68A, #74CB9A, #83DFAA, #92F4BA,
    #A0F7C0, #AFF5C5, #BEF3CA, #CDF1CF, #DCEFD4,
    #EBEDD9, #F0EBC5, #F5E9B1, #FAE79D, #FFE589
    );

    animation:
        rotateBlobA 15s linear infinite,
        gradientFlowA 25s ease infinite,
        blobMorphA 20s ease-in-out infinite alternate;
}

/* Rotation A */
@keyframes rotateBlobA {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to   { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Gradient Flow A */
@keyframes gradientFlowA {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Morph A */
@keyframes blobMorphA {
    0%   { width: 520px; height: 150px; border-radius: 120px; }
    30%  { width: 100px; height: 460px; border-radius: 250px; }
    60%  { width: 320px; height: 340px; border-radius: 320px; }
    100% { width: 250px; height: 130px; border-radius: 180px; }
}

/* ============================= */
/* LEFTYES1 - CORPORATE / LUXURY */
/* ============================= */

.leftyes1::before {
    background: linear-gradient(
#17aaf5, #39b1f5c2, #2dddfb, #35c2fd, #3bfff5, #58feff, #76ff90, #9dfeff, #FFF9C4, #FFFDE7);
    );

    animation:
        rotateBlobB 42s linear infinite,
        gradientFlowB 35s ease infinite,
        blobMorphB 50s ease-in-out infinite alternate;
}

/* Rotation B (reverse direction) */
@keyframes rotateBlobB {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to   { transform: translate(-50%, -50%) rotate(-360deg); }
}

/* Gradient Flow B (reverse direction) */
@keyframes gradientFlowB {
    0%   { background-position: 100% 50%; }
    50%  { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}

/* Morph B (different shape pattern) */
@keyframes blobMorphB {
    0%   { width: 0px; height: 0px; border-radius: 200px; }
    25%  { width: 550px; height: 120px; border-radius: 350px; }
    75%  { width: 600px; height: 600px; border-radius: 80px; }
    100% { width: 80px; height: 150px; border-radius: 250px; }
}




/* ============================= */
/* LEFTYES3 - CORPORATE / LUXURY */
/* ============================= */

.leftyes3::before {
    background: linear-gradient(
135deg, #8B0000, #B22222, #DC143C, #FF4500, #FF6347, #FF7F50, #FF8C00, #FFA500, #FFD700, #FFDB58
    );

    animation:
        rotateBlob3 20s linear infinite,
        gradientFlow3 30s ease infinite,
        blobMorph3 10s ease-in-out infinite alternate;
}

/* Rotation B (reverse direction) */
@keyframes rotateBlob3 {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to   { transform: translate(-50%, -50%) rotate(-360deg); }
}

/* Gradient Flow B (reverse direction) */
@keyframes gradientFlow3 {
    0%   { background-position: 100% 50%; }
    50%  { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}

/* Morph B (different shape pattern) */
@keyframes blobMorph3 {
    0%   { width: 120px; height: 500px; border-radius: 200px; }
    25%  { width: 550px; height: 20px; border-radius: 350px; }
    75%  { width: 480px; height: 180px; border-radius: 380px; }
    100% { width: 80px; height: 450px; border-radius: 250px; }
}






/* ============================= */
/* LEFTYES3 - CORPORATE / LUXURY */
/* ============================= */

.leftyes4::before {
    background: linear-gradient(
    135deg,
    #03045E, #023E8A, #0077B6, #0096C7, #00B4D8,
    #48CAE4, #90E0EF, #ADE8F4, #CAF0F8, #FFDAB9,
    #FFC8A2, #FFB68B, #FFA474, #FF925D, #FF8046,
    #FF6E2F, #FF5C18, #FF4A01, #FF3D00, #FF3000,
    #FF2300, #FF1600
    );

    animation:
        rotateBlob3 60s linear infinite,
        gradientFlow3 70s ease infinite,
        blobMorph3 30s ease-in-out infinite alternate;
}

/* Rotation B (reverse direction) */
@keyframes rotateBlob4 {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to   { transform: translate(-50%, -50%) rotate(-360deg); }
}

/* Gradient Flow B (reverse direction) */
@keyframes gradientFlow4 {
    0%   { background-position: 100% 50%; }
    50%  { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}

/* Morph B (different shape pattern) */
@keyframes blobMorph4 {
    0%   { width: 220px; height: 400px; border-radius: 200px; }
    25%  { width: 550px; height: 20px; border-radius: 350px; }
    75%  { width: 280px; height: 180px; border-radius: 380px; }
    100% { width: 540px; height: 550px; border-radius: 250px; }
}





/* ============================= */
/* LEFTYES5 - CORPORATE / LUXURY */
/* ============================= */

.leftyes5::before {
    background: linear-gradient(
    135deg,
    #004D40, #00695C, #00897B, #00A896, #00BFA5,
    #1ABC9C, #2ED8B5, #42F5CE, #56FFE7, #6AFFFF,
    #7EFFF0, #92FFE1, #A6FFD2, #BAFFC3, #CEFFB4,
    #E2FFA5, #F6FF96, #FFFF87, #FFF09C, #FFE1B1,
    #FFD2C6
    );

    animation:
        rotateBlob5 40s linear infinite,
        gradientFlow5 30s ease infinite,
        blobMorph5 20s ease-in-out infinite alternate;
}

/* Rotation B (reverse direction) */
@keyframes rotateBlob5 {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to   { transform: translate(-50%, -50%) rotate(-360deg); }
}

/* Gradient Flow B (reverse direction) */
@keyframes gradientFlow5 {
    0%   { background-position: 100% 50%; }
    50%  { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}

/* Morph B (different shape pattern) */
@keyframes blobMorph5 {
    0%   { width: 520px; height: 500px; border-radius: 200px; }
    25%  { width: 550px; height: 20px; border-radius: 350px; }
    75%  { width: 480px; height: 480px; border-radius: 380px; }
    100% { width: 580px; height: 450px; border-radius: 250px; }
}




/* ============================= */
/* LEFTYES6 - CORPORATE / LUXURY */
/* ============================= */

.leftyes6::before {
    background: linear-gradient(
    135deg,
    #001F3F, #003153, #004766, #005F79, #00798C,
    #2E9A9E, #5CBCB0, #7AD0C0, #98E4D0, #B6F8E0,
    #C4F0D9, #D2E8D2, #E0E0CB, #EED8C4, #FCCFBD,
    #F0B8B0, #E4A1A3, #D88A96, #CC7389, #C05C7C,
    #B4456F, #A82E62
    );

    animation:
        rotateBlob6 30s linear infinite,
        gradientFlow6 50s ease infinite,
        blobMorph6 20s ease-in-out infinite alternate;
}

/* Rotation B (reverse direction) */
@keyframes rotateBlob6 {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to   { transform: translate(-50%, -50%) rotate(-360deg); }
}

/* Gradient Flow B (reverse direction) */
@keyframes gradientFlow6 {
    0%   { background-position: 100% 50%; }
    50%  { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}

/* Morph B (different shape pattern) */
@keyframes blobMorph6 {
    0%   { width: 0px; height: 0px; border-radius: 200px; }
    25%  { width: 550px; height: 120px; border-radius: 350px; }
    75%  { width: 480px; height: 180px; border-radius: 380px; }
    100% { width: 180px; height: 450px; border-radius: 250px; }
}




/* ============================= */
/* LEFTYES7 - CORPORATE / LUXURY */
/* ============================= */

.leftyes7::before {
    background: linear-gradient(
135deg, #000428, #001C4A, #00346C, #004C8E, #0064B0, #1A7CC2, #3494D4, #4EACE6, #68C4F8, #82DCFF, #9CF0FF, #B6FFFF, #D0FFFF, #EAFFFF, #FFFFFF, #FFEAFF, #FFD0FF, #FFB6FF, #FF9CFF, #FF82FF
    );

    animation:
        rotateBlob6 30s linear infinite,
        gradientFlow6 50s ease infinite,
        blobMorph6 20s ease-in-out infinite alternate;
}

/* Rotation B (reverse direction) */
@keyframes rotateBlob7 {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to   { transform: translate(-50%, -50%) rotate(-360deg); }
}

/* Gradient Flow B (reverse direction) */
@keyframes gradientFlow7 {
    0%   { background-position: 100% 50%; }
    50%  { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}

/* Morph B (different shape pattern) */
@keyframes blobMorph7 {
    0%   { width: 120px; height: 70px; border-radius: 200px; }
    25%  { width: 50px; height: 120px; border-radius: 350px; }
    75%  { width: 80px; height: 180px; border-radius: 380px; }
    100% { width: 180px; height: 350px; border-radius: 250px; }
}




/* ============================= */
/* LEFTYES7 - CORPORATE / LUXURY */
/* ============================= */

.leftyes8::before {
    background: linear-gradient(
135deg, #120016, #24002B, #360040, #480055, #5A006A, #6C007F, #7E0094, #9000A9, #A200BE, #B400D3
    );

    animation:
        rotateBlob6 30s linear infinite,
        gradientFlow6 50s ease infinite,
        blobMorph6 20s ease-in-out infinite alternate;
}

/* Rotation B (reverse direction) */
@keyframes rotateBlob8 {
    from { transform: translate(-50%, -50%) rotate(0deg); }
    to   { transform: translate(-50%, -50%) rotate(-360deg); }
}

/* Gradient Flow B (reverse direction) */
@keyframes gradientFlow8 {
    0%   { background-position: 100% 50%; }
    50%  { background-position: 0% 50%; }
    100% { background-position: 100% 50%; }
}

/* Morph B (different shape pattern) */
@keyframes blobMorph8 {
    0%   { width: 120px; height: 70px; border-radius: 200px; }
    25%  { width: 50px; height: 120px; border-radius: 350px; }
    75%  { width: 80px; height: 180px; border-radius: 380px; }
    100% { width: 180px; height: 350px; border-radius: 250px; }
}




.rounded-image {
    width: 900px !important;
    height: auto;
    border-radius: 10px;
}




.indi-web {
    width: 200px !important;
    height: 200px !important;
    margin-left: -20px;
 
}




.problem ul  li {
    color: #fff;
    font-size: 20px;
    line-height: 34px !important;
    font-weight: 300;
    margin-bottom: 0;

}



.problem ul  li i , .project-area .project-left-details ul li i{
    width: 28px;
    height: 28px;
    border-radius: 50%;
    text-align: center;
    line-height: 30px;
    background: var(--primary_color);
    color: #ffffff;
    font-size: 18px;
    margin-right:10px;
}


.problem1 ul  li {
    color: rgb(28 28 28 / 80%) !important;
    font-size: 20px;
    line-height: 34px !important;
    font-weight: 300;
    margin-bottom: 0;

}

.problem1 ul  li i {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    text-align: center;
    line-height: 30px;
    background: var(--primary_color);
    color: #fff !important;
    font-size: 18px;
    margin-right:10px;
}

#problem2 ul li {
    display: flex;
    align-items: flex-start;
    gap: 10px; /* space between icon and text */
    
    color: #fff !important;
    font-size: 20px;
    line-height: 34px !important;
    font-weight: 300;
    margin-bottom: 10px;
}

#problem2 ul li i {
    flex-shrink: 0; /* prevents icon from shrinking */
    width: 28px;
    height: 28px;
    border-radius: 50%;
    text-align: center;
    line-height: 28px;
    background: var(--primary_color);
    color: #fff !important;
    font-size: 18px;
     margin-right:15px;
}


#problem3 ul li {
    display: flex;
    align-items: flex-start;
    gap: 10px; /* space between icon and text */
    
    color: #000 !important;
    font-size: 20px;
    line-height: 34px !important;
    font-weight: 300;
    margin-bottom: 10px;
}

#problem3 ul li i {
    flex-shrink: 0; /* prevents icon from shrinking */
    width: 28px;
    height: 28px;
    border-radius: 50%;
    text-align: center;
    line-height: 28px;
    background: var(--primary_color);
    color: #fff !important;
    font-size: 18px;
     margin-right:15px;
}

.about-service3-area ul {
    display: flex;
    margin-top: 50px;
    gap: 0px !important;
}

.about-service3-style-2 .content-box ul {
    flex-direction: column;
    gap: 0px !important;
}


.project-area .project-left-details ul li + li {
   margin-top: 0px; 
}



.about-service7-area {
    padding: 0px 0 0px 0 !important;
}




.theme-btn {
    font-size: 18px !important;
    font-weight: 400 !important;

    color: var(--light_white);
    display: inline-flex;
    align-items: center;
    position: relative;
    cursor: pointer;
    z-index: 1;
    background: var(--primary_color);
    padding: 13px 26px !important;
    border-radius: 30px !important;
    transition: 0.3s;
    overflow: hidden;
    gap: 10px !important;
    text-decoration: none !important;
}



.phone-number{
    display:inline-flex;
    align-items:center;
}

.face{
    width:30px;
    height:auto;
    margin-right:6px;
}

.phone-number a{
margin-top:10px;
    color:#000;
    text-decoration:none;
}




.menu-title, .menu-title h3 {
    position: relative;
    display: inline-block;
    font-size:16px !important;
}

.menu-title::after {
    content: "";
    display: block;
    width: 100%;
    height: 1px;
    background: #cfcfcf;
    margin-top: 8px;
}

h3.menu-hed {

font-size:16px !important;
font-weight:700 !important;

}


.footer-links h3 {
 font-size:16px !important;
 line-height:22px !important;
 border-bottom: 1px solid #fff;
}




/* #webapp-preis-tabelle */
/* #webapp-preis-tabelle */
/* #webapp-preis-tabelle */
/* #webapp-preis-tabelle */
/* #webapp-preis-tabelle */

.webapp-table-container {
    width: 100%;
    margin-bottom:200px;

}

#webapp-preis-tabelle {
    width: 100%;
    max-width: 1300px;
    margin: 0 auto 100px;
    border-collapse: separate;   /* important */
    border-spacing: 0;           /* removes gaps */
    font-size: 20px !important;
    padding:20px;

    border: 2px solid #007bff;
    border-radius: 10px;
    overflow: hidden;            /* makes radius work properly */
}

    #webapp-preis-tabelle th,
    #webapp-preis-tabelle td {
        padding: 12px;
        text-align: left;
        border-bottom: 1px solid #ddd;
            width: 100px;
    }
    


    #webapp-preis-tabelle th {
        background-color: #f5f5f5;
    }

    #webapp-preis-tabelle tr:hover {
        background-color: #f9f9f9;
    }

    .webapp-table-container {
        overflow-x: auto;
    }

    /* Mobile */
    @media (max-width: 600px) {
        #webapp-preis-tabelle,
        #webapp-preis-tabelle thead,
        #webapp-preis-tabelle tbody,
        #webapp-preis-tabelle th,
        #webapp-preis-tabelle td,
        #webapp-preis-tabelle tr {
            display: block;
        }

        #webapp-preis-tabelle thead {
            display: none;
        }

        #webapp-preis-tabelle tr {
            margin-bottom: 15px;
            border: 1px solid #ddd;
            padding: 10px;
        }

        #webapp-preis-tabelle td {
            border: none;
            position: relative;
            padding-left: 50%;
        }

        #webapp-preis-tabelle td::before {
            position: absolute;
            left: 10px;
            top: 12px;
            font-weight: bold;
        }

        #webapp-preis-tabelle td:nth-of-type(1)::before { content: "Webanwendungen"; }
        #webapp-preis-tabelle td:nth-of-type(2)::before { content: "Preise"; }
        #webapp-preis-tabelle td:nth-of-type(3)::before { content: "Beschreibung"; }
    }


/* END #webapp-preis-tabelle */
/* END #webapp-preis-tabelle */



/* leistungen-section */
/* leistungen-section */
/* leistungen-section */
/* leistungen-section */
/* leistungen-section */

#leistungen-section {
    font-size:20px !important;
    width: 100%;
}

#leistungen-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}

.leistung-box {
    border: 1px solid #ddd;
    padding: 16px;
    border-radius: 8px;
    background: #fff;

}

#leistungen-section .leistung-box {
    scroll-margin-top: 150px; /* adjust based on your header height */
}
.leistung-box a {
    text-decoration: none;
    color: #000;
    font-weight: bold;
    display: inline-block;
    margin-bottom: 10px;
}

.leistung-box ul {
    padding-left: 18px;
    margin: 0;
}

.leistung-box li {
    margin-bottom: 6px;
}

#leistungen-section ul {
    list-style: disc;
    padding-left: 20px;
}

#leistungen-section li {
    margin-bottom: 6px;
}


.about-service3-area h2  {
    color: #ffffff;
    font-family: var(--font_yantramanv);
    font-size: 60px !important;!important;
    font-weight: 700;
    line-height: 60px;
    letter-spacing: -2px;
    margin-bottom: 40px;
}

 h2.section-title {
    color: #000;
    font-family: var(--font_yantramanv);
    font-size: 60px !important;!important;
    font-weight: 700;
    line-height: 60px;
    letter-spacing: -2px;
    margin-bottom: 40px;
}

.yesshadow {
box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
}

.hero {
    background-image: url('http://localhost/projects/mywebsite/assets/imgs/bghub.png');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    height: 100vh;
    width: 100%;
}

.himg1 {
width: 120px !important;
}

.himg2 {
width: 140px !important;
}

.himg3 {
width: 110px !important;
}


/* #pricing-unique-8472 */
/* #pricing-unique-8472 */
/* #pricing-unique-8472 */

#pricing-unique-8472 {
  padding: 60px 20px;
  background: #f5f7fa;
  font-family: Arial, sans-serif;
}

/* Container */
#pricing-unique-8472 .pricing-container {
  max-width: 1200px;
  margin: auto;
  display: flex;
  gap: 30px;
}

/* Card */
#pricing-unique-8472 .pricing-box {
  flex: 1;
  background: #fff;
  padding: 35px 25px;
  border-radius: 14px;
  border: 1px solid #e6e6e6;
  text-align: center;
  transition: all 0.3s ease;
  box-shadow: 0 10px 25px rgba(0,0,0,0.05);
}

/* Hover effect */
#pricing-unique-8472 .pricing-box:hover {
  transform: translateY(-8px);
  box-shadow: 0 15px 35px rgba(0,0,0,0.12);
}

/* Featured card */
#pricing-unique-8472 .featured {
  border: 2px solid #007bff;
  background: #f0f7ff;
  transform: scale(1.03);
}

/* Title */
#pricing-unique-8472 h2 {
  font-size: 24px;
  margin-bottom: 10px;
}

/* Price */
#pricing-unique-8472 .price {
  font-size: 28px;
  font-weight: bold;
  color: #007bff;
  margin: 15px 0;
}

/* Description */
#pricing-unique-8472 .desc {
  font-size: 16px;
  color: #666;
  margin-bottom: 20px;
}

/* ========================= */
/* UL LIST (CUSTOM BULLETS) */
/* ========================= */

#pricing-unique-8472 ul {
  list-style: none;
  padding: 0;
  margin: 25px 0;
  text-align: left;
}

#pricing-unique-8472 ul li {
  position: relative;
  padding-left: 30px;
  font-size: 16px;
  padding-top: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid #eee;
}

/* Custom bullet */
#pricing-unique-8472 ul li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  font-size: 18px;     /* 👉 BULLET SIZE CONTROL */
  color: #007bff;      /* 👉 BULLET COLOR */
  font-weight: bold;
}

/* Button */
#pricing-unique-8472 .btn {
  display: inline-block;
  margin-top: 20px;
  padding: 12px 20px;
  background: #007bff;
  color: #fff;
  text-decoration: none;
  border-radius: 8px;
  transition: 0.3s;
}

#pricing-unique-8472 .btn:hover {
  background: #0056b3;
}


.fontcolor {
color:#fff !important;
}

/* ========================= */
/* MOBILE */
/* ========================= */
@media (max-width: 768px) {
  #pricing-unique-8472 .pricing-container {
    flex-direction: column;
  }

  #pricing-unique-8472 .featured {
    transform: scale(1);
  }
}

/*  END #pricing-unique-8472 */
/*  END #pricing-unique-8472 */


/* Mobile */
@media (max-width: 768px) {
    #leistungen-grid {
        grid-template-columns: 1fr;
    }
}



/* Portfolio */
/* Portfolio */
/* Portfolio */

#portfolio-section {
  width: 100%;
}

/* Tabs */
.tabs {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 30px 10px;
}

.tabs button {
  background: #007bff;
  border: none;
  padding: 10px 18px;
  cursor: pointer;
  border-radius: 30px;
  font-size: 14px;
  transition: 0.3s;
  color: #fff;
}


.tabs button.active {
  background: #111;
  color: #fff;
}

/* Grid */
.gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  padding: 10px;
}

@media (max-width: 1024px) {
  .gallery { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 768px) {
  .gallery { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
  .gallery { grid-template-columns: 1fr; }
}

/* Item */
.item {
  position: relative;
  overflow: hidden;
  background: #fff;
}

.item img {
  width: 100%;
  display: block;
  transition: transform 0.5s ease;
}

/* Hover effect */
.item:hover img {
  transform: scale(1.08);
}

/* Bottom title bar */
.title {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgb(10 22 181 / 80%);
  color: #fff;
  padding: 10px;
  font-size: 14px;
  transform: translateY(100%);
  transition: 0.3s ease;
}

.item:hover .title {
  transform: translateY(0);
}

/* Smooth hide/show */
.item {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* END Portfolio */
/* END Portfolio */
/* END Portfolio */