* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Roboto', sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f9f9f9;
}

:root {
    /* Colours */
    --white-color: #fff;
    --lightWhite-color: #f8fafc;
    --powBlue-color: #0b8bd6;;
    --skBlue-color: #38b6ff;
    --lightBlue2Grey-color: #718096;
    --blue-color: #0d47a1;
    --darkBlue-color: #062644;
    --liGrey-color: #ededed;
    --liGrey2-color: #b4b4b4;
    --black-color: #000000;
    --midGrey-color: #ffffff94;
    --liMidGrey-color: #e2e2e2;
    --liPink-color: #ffe8ec;
    --medGrey2-color: #ccc;
    --dark-grey: #333;
    --light-grey: #f5f5f5;
    --border-color: #e0e0e0;
    --primary-color: #38b6ff;
    --secondary-color:  #1da1f2;
    --text-color: #333;
    --text-light: #666;
    --shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* nav bar section handled from home.css*/

/* price plans */ 
section.price_container {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: linear-gradient(to bottom, #38b6ff 20%, #f8faff 120%, #062644 10%);
  position: relative;
  
  & > .main-container {
    width: 100%;
    max-width: 90rem;
    margin: 0 auto;
    padding: 8px;
    
    & > .title_container {
      padding: clamp(1.8rem, 6vw, 4rem) 0;
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      position: relative;
      
      & > div {
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        max-width: 50rem;
        padding: 0 clamp(0.9rem, 4vw, 1.8rem);
        text-align: center;
        
        & > h1 { 
          font-size: clamp(1.6rem, 5vw, 3rem);
          color: #f3f3f3;
          margin-bottom: clamp(0.4rem, 2vw, 0.9rem);
        }
        
        & > p {
          font-size: clamp(0.95rem, 2.5vw, 1.1rem);
          color: #ededed;
          line-height: 1.5;
        }
      }
    }
    
    & > .plans_container {
      width: 100%;
      margin: 0 auto;
      position: relative;
      display: flex;
      justify-content: center;
      padding: 0 clamp(0.9rem, 4vw, 1.8rem);
      
      & > .container {
        position: relative;
        width: 100%;
        max-width: 90rem;
        margin: 0 auto;
        
        & > .card-grid {
          display: flex;
          flex-direction: column;
          align-items: center;
          
          & > .container-grid {
            width: 100%;
            max-width: calc(3 * 17rem + 2 * 1.1rem);
            display: grid;
            grid-template-columns: 1fr;
            justify-content: center;
            justify-items: center;
            align-items: center;
            gap: clamp(0.9rem, 3vw, 1.1rem);
            padding: clamp(0.9rem, 3vw, 1.4rem) 0;
            
            @media (min-width: 768px) {
              grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
            }
            
            .row2-container {
              grid-column: 1 / -1;
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              gap: clamp(0.9rem, 3vw, 2.2rem);
              width: 100%;
              
              @media (min-width: 768px) {
                flex-direction: row;
                flex-wrap: wrap;
                justify-content: center;
              }
              
              @media (min-width: 1024px) {
                gap: clamp(1.3rem, 4vw, 2.2rem);
              }
            }
            
            & > .card_container, 
            .row2-container > .card_container {
              width: 100%;
              max-width: 17.5rem; 
              position: relative;
              display: flex;
              overflow: hidden;
              justify-content: center;
              
              &.row2 {
                margin: 0;
                max-width: 22.5rem;
                
                @media (min-width: 768px) {
                  max-width: calc(50% - 1.1rem);
                }
                
                @media (min-width: 1024px) {
                  max-width: 22.5rem;
                }
              }
              
              & > .card {
                background: #fafafa;
                padding: clamp(0.4rem, 2vw, 0.56rem);
                border-radius: clamp(0.9rem, 3vw, 1.1rem);
                width: 100%;
                height: clamp(18rem, 60vw, 25rem);
                transition: all 0.3s ease-in-out;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                
                &.card-2 {
                  height: clamp(22rem, 75vw, 31rem);
                  
                  &::after {
                    /* content: 'Premium'; */
                    position: absolute;
                    top: clamp(0.4rem, 2vw, 0.9rem);
                    right: clamp(-2.2rem, -5vw, -2.2rem);
                    background-color: var(--skBlue-color);
                    color: var(--white-color);
                    padding: clamp(0.2rem, 1vw, 0.28rem) clamp(2.2rem, 5vw, 2.8rem);
                    font-size: clamp(0.65rem, 2vw, 0.72rem);
                    font-weight: 600;
                    transform: rotate(45deg);
                    z-index: 1;
                  }
                }
                
                .row2 & {
                  height: clamp(13.5rem, 45vw, 17rem);
                }
                
                &:hover {
                  transform: scale(1.01);
                  border-radius: clamp(0.9rem, 3vw, 1.1rem);
                  
                  & > .bttn button,
                  & > .subscription-trigger button {
                    background-color: #38b6ff;
                    color: #fafafa;
                  }
                }
                
                & > .plan_title {
                  padding: clamp(0.4rem, 2vw, 0.84rem);
                  text-align: center;
                  
                  & > h2 {
                    color: #38b6ff;
                    font-size: clamp(1.1rem, 3vw, 1.35rem);
                  }
                }
                
                & > .icon {
                  height: clamp(3.6rem, 10vw, 4.5rem);
                  width: clamp(3.6rem, 10vw, 4.5rem);
                  background-color: #38b6ff;
                  border-radius: 50% 60% 40% 70% / 60% 40% 70% 50%;
                  animation: blob 2s infinite ease-in-out;
                  overflow: hidden;
                  
                  & > img {
                    height: 100%;
                    width: 100%;
                    object-fit: cover;
                  }
                }
                
                & > .price {
                  padding: clamp(0.4rem, 2vw, 0.56rem) 0;
                  text-align: center;
                  
                  & > p {
                    font-size: clamp(1.1rem, 3.5vw, 1.5rem);
                    color: #252525;
                    font-weight: 600;
                    
                    & > span > .context {
                      font-family: "Schoolbell", sans-serif;
                      font-size: clamp(0.55rem, 2vw, 0.72rem);
                      color: #12567d;
                      margin: 0;
                      font-weight: 100;
                      
                      &.sub {
                        font-size: clamp(0.27rem, 1.5vw, 0.36rem);
                      }
                    }
                    
                    & > .dur {
                      margin: 0 clamp(0.22rem, 1vw, 0.56rem);
                      font-weight: 200;
                      font-size: clamp(0.55rem, 2vw, 0.67rem);
                    }
                  }
                }
                
                & > .dscpt_container {
                  width: 100%;
                  margin: clamp(0.4rem, 2vw, 0.9rem) 0;
                  
                  & > .dscpt {
                    display: flex;
                    width: 100%;
                    padding: clamp(0.22rem, 1vw, 0.39rem) clamp(0.9rem, 3vw, 1.7rem);
                    flex-direction: row;
                    align-items: center;
                    justify-content: flex-start;
                    
                    & > .tick {
                      height: clamp(0.9rem, 3vw, 1.1rem);
                      width: clamp(0.9rem, 3vw, 1.1rem);
                      
                      & > img {
                        height: 100%;
                        width: 100%;
                        object-fit: cover;
                      }
                    }
                    
                    & > .dscpt-p {
                      & > p {
                        font-size: clamp(0.72rem, 2.5vw, 0.81rem);
                        color: #252525;
                        margin: 0 clamp(0.22rem, 1vw, 0.56rem);
                      }
                    }
                  }
                }
                
                & > .bttn, 
                & > .subscription-trigger {
                  width: 100%;
                  margin-top: auto;
                  padding: clamp(0.4rem, 2vw, 1.4rem) 0;
                  display: flex;
                  flex-wrap: wrap;
                  justify-content: center;
                  
                  & > button, 
                  & > a.btn {
                    padding: clamp(0.36rem, 1.5vw, 0.84rem) clamp(0.9rem, 3vw, 1.7rem);
                    border: clamp(0.11rem, 0.5vw, 0.17rem) solid #38b6ff;
                    background-color: #ffffff;
                    cursor: pointer;
                    color: #38b6ff;
                    margin: 0 auto;
                    font-weight: 450;
                    transition: all 0.3s ease-in-out;
                    text-decoration: none;
                    text-align: center;
                    border-radius: 45px;
                    font-size: clamp(0.72rem, 2.3vw, .81rem);
                    
                    &:hover {
                      background-color: #38b6ff;
                      color: #fafafa;
                    }
                    
                    &.btn-primary {
                      background-color: #38b6ff;
                      color: #fafafa;
                      
                      &:hover {
                        background-color: #2a8fd6;
                        border-color: #2a8fd6;
                      }
                    }
                    
                    &:disabled {
                      opacity: 0.6;
                      cursor: not-allowed;
                    }
                  }
                  
                  /* Specific styles for row2 buttons */
                  .row2 & {
                    gap: clamp(0.4rem, 2vw, 0.56rem);
                    padding: clamp(0.4rem, 2vw, 0.84rem) 0;
                    
                    & > button, 
                    & > a.btn {
                      padding: clamp(0.45rem, 2vw, 0.67rem) clamp(0.67rem, 2vw, 1.1rem);
                      margin: 0;
                      flex: 1;
                      max-width: clamp(7.2rem, 25vw, 8.4rem);
                      font-size: clamp(0.63rem, 2vw, 0.81rem);
                    }
                  }
                }
              }
            }
            
            /* Bottom Row Styles */
            & > .bottom-row {
              grid-column: 1 / -1;
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;
              gap: clamp(0.9rem, 3vw, 1.1rem);
              width: 100%;
              padding: clamp(0.9rem, 3vw, 1.4rem) 0;
              
              @media (min-width: 768px) {
                flex-direction: row;
                flex-wrap: wrap;
                justify-content: center;
              }
              
              & > .card_container.row2 {
                flex: 1 1 100%;
                max-width: 22.5rem;
                
                @media (min-width: 768px) {
                  flex: 0 1 calc(50% - 0.9rem);
                }
                
                @media (min-width: 1024px) {
                  flex: 0 1 22.5rem;
                }
                
                & > .card {
                  height: clamp(13.5rem, 45vw, 17rem);
                  width: 100%;
                  
                  &:hover {
                    transform: scale(1.03);
                  }
                  
                  & > .bttn, 
                  & > .subscription-trigger {
                    display: flex;
                    gap: clamp(0.4rem, 2vw, 0.56rem);
                    justify-content: center;
                    
                    & > button {
                      padding: clamp(0.45rem, 2vw, 0.67rem) clamp(0.67rem, 2vw, 1.1rem);
                      margin: 0;
                      flex: 1;
                      max-width: clamp(7.2rem, 25vw, 8.4rem);
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}

@keyframes fadeIn {
  from { opacity: 0; } 
  to { opacity: 1; }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(clamp(0.9rem, 3vw, 1.7rem)); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes blob {
  0% { border-radius: 50% 60% 40% 70% / 60% 40% 70% 50%; }
  50% { border-radius: 40% 50% 60% 50% / 50% 60% 50% 60%; }
  100% { border-radius: 50% 60% 40% 70% / 60% 40% 70% 50%; }
}

/* Responsive adjustments */
@media (max-width: 1024px) {
    section.price_container {
        & > .main-container {
            & > .plans_container {
                & > .container {
                    & > .card-grid {
                        & > .container-grid {
                            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
                            
                            & > .card_container {
                                grid-column: span 1;
                                
                                &.row2 {
                                    grid-column: span 1;
                                }
                            }
                            & > .card_container, .row2-container > .card_container {
                                & > .card {
                                    &.card-2 {
                                        height: 420px;
                                        width: 290px;
                                    }
                                }
                            }
                            & > .bottom-row {
                                flex-direction: column;
                                align-items: center;
                                
                                & > .card_container.row2 {
                                    width: 100%;
                                    max-width: 380px;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

@media (max-width: 768px) {
    section.price_container {
        & > .main-container {
            & > .title_container {
                height: 230px;
                padding: 35px 18px;
                
                & > div {
                    & > h1 {
                        font-size: 2.2em;
                        text-align: center;
                    }
                    
                    & > p {
                        font-size: 0.95em;
                    }
                }
            }
            & > .plans_container {
                height: auto;
                padding-bottom: 25px;
                & > .container {
                    & > .card-grid {
                        & > .container-grid {
                            grid-template-columns: 1fr;
                            padding-left: 18px;
                            padding-right: 18px;
                            & > .card_container {
                                width: 100%;
                                & > .card {
                                    width: 100%;
                                    max-width: 310px;
                                    margin: 0 auto;
                                    height: fit-content;
                                    .row2 & {
                                        width: 310px;
                                    }
                                }
                            }
                            & > .card_container, .row2-container > .card_container {
                                & > .card {
                                    height: fit-content;
                                    .row2 & {
                                        width: 310px;
                                    }
                                    & > .bttn, .subscription-trigger {
                                        & > button {
                                            padding: 13px;
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}
@media (max-width: 480px) {
    section.price_container {
        & > .main-container {
            & > .plans_container {
                & > .container {
                    & > .card-grid {
                        & > .container-grid {
                            & > .card_container {
                                & > .card {
                                    max-width: 280px;
                                    .row2 & {
                                        width: fit-content;
                                    }
                                }
                            }
                            & > .card_container, .row2-container > .card_container {
                                & > .card {
                                    .row2 & {
                                        width: 280px;
                                       & > .bttn {
                                        & > a.btn {
                                            padding: 11px 0;
                                            font-weight: 400;
                                        }
                                    } 
                                    }
                                    & > .bttn, .subscription-trigger {
                                        & > button {
                                            padding: 9px;
                                        }
                                        & > a.btn {
                                            &.btn-primary {
                                            font-weight: 400;}
                                        }
                                    }
                                    
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}

/* Portfolio Showcase Styles */
.portfolio-showcase {
    position: relative;
    padding: clamp(2.7rem, 8vw, 5.6rem) clamp(0.9rem, 4vw, 1.1rem);
    background-color: #f8fafc;
    overflow: hidden;
}

.portfolio-showcase .background-elements {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.portfolio-showcase .blue-wave {
    position: absolute;
    top: 0;
    right: 0;
    width: 40%;
    height: 100%;
    background: linear-gradient(135deg, rgba(11, 139, 214, 0.1) 0%, transparent 100%);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 30% 100%);
}

.portfolio-showcase .light-circle {
    position: absolute;
    width: clamp(13.5rem, 40vw, 22.5rem);
    height: clamp(13.5rem, 40vw, 22.5rem);
    background: radial-gradient(circle, rgba(56, 182, 255, 0.1) 0%, transparent 70%);
    border-radius: 50%;
    bottom: clamp(-4.5rem, -15vw, -5.6rem);
    left: clamp(-4.5rem, -15vw, -5.6rem);
    filter: blur(clamp(0.9rem, 3vw, 1.7rem));
}

.portfolio-container {
    position: relative;
    max-width: 75rem;
    margin: 0 auto;
    z-index: 1;
}

.portfolio-header {
    text-align: center;
    margin-bottom: clamp(1.8rem, 5vw, 3.4rem);
}

.portfolio-header .section-badge {
    display: inline-block;
    background-color: rgba(56, 182, 255, 0.1);
    color: var(--skBlue-color);
    padding: 0.34rem 0.67rem;
    border-radius: 1.1rem;
    font-size: clamp(0.67rem, 2vw, 0.78rem);
    font-weight: 600;
    margin-bottom: 0.9rem;
}

.portfolio-header h2 {
    font-size: clamp(1.35rem, 4vw, 2.25rem);
    color: var(--darkBlue-color);
    margin-bottom: clamp(0.9rem, 3vw, 1.1rem);
    line-height: 1.3;
}

.portfolio-description {
    font-size: clamp(0.9rem, 2.5vw, 1.1rem);
    color: var(--text-light);
    max-width: 48.75rem;
    margin: 0 auto;
    line-height: 1.6;
}

/* Showcase Sections */
.showcase-section {
    margin-bottom: clamp(2.7rem, 8vw, 4.5rem);
}

.showcase-header {
    text-align: center;
    margin-bottom: clamp(1.35rem, 4vw, 2.25rem);
}

.showcase-header h3 {
    font-size: clamp(1.1rem, 3vw, 1.6rem);
    color: var(--darkBlue-color);
    margin-bottom: 0.45rem;
}

.showcase-header p {
    color: var(--text-light);
    font-size: clamp(0.81rem, 2.5vw, 1rem);
}

/* Poster Grid */
.poster-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
    gap: clamp(0.9rem, 3vw, 1.35rem);
    margin-bottom: 1.8rem;
}

.poster-item {
    position: relative;
    border-radius: clamp(0.67rem, 2vw, 0.9rem);
    overflow: hidden;
    box-shadow: 0 clamp(0.22rem, 1vw, 0.67rem) clamp(0.45rem, 2vw, 1.35rem) rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.poster-item:hover {
    transform: translateY(-0.28rem);
    box-shadow: 0 clamp(0.45rem, 2vw, 1.1rem) clamp(0.67rem, 3vw, 1.8rem) rgba(0, 0, 0, 0.15);
}

.poster-frame {
    position: relative;
    aspect-ratio: 3/4;
    overflow: hidden;
}

.poster-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.poster-item:hover .poster-image {
    transform: scale(1.05);
}

.poster-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, transparent 0%, rgba(6, 38, 68, 0.8) 100%);
    display: flex;
    align-items: flex-end;
    padding: clamp(0.9rem, 3vw, 1.35rem);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.poster-item:hover .poster-overlay {
    opacity: 1;
}

.overlay-content h4 {
    color: white;
    font-size: clamp(0.9rem, 2.5vw, 1.1rem);
    margin-bottom: 0.45rem;
}

.overlay-content p {
    color: rgba(255, 255, 255, 0.8);
    font-size: clamp(0.72rem, 2vw, 0.81rem);
}

/* Website Showcase */
.website-showcase {
    background: white;
    border-radius: clamp(0.9rem, 3vw, 1.1rem);
    padding: clamp(1.35rem, 4vw, 2.25rem);
    box-shadow: 0 clamp(0.22rem, 1vw, 0.67rem) clamp(0.45rem, 2vw, 1.35rem) rgba(0, 0, 0, 0.08);
}

.website-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(19.7rem, 100%), 1fr));
    gap: clamp(1.35rem, 4vw, 2.25rem);
}

.website-item {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}

.browser-mockup {
    border-radius: clamp(0.45rem, 1.5vw, 0.67rem);
    overflow: hidden;
    box-shadow: 0 clamp(0.22rem, 1vw, 0.67rem) clamp(0.45rem, 2vw, 1.35rem) rgba(0, 0, 0, 0.1);
    background: white;
}

.browser-header {
    background: #f1f3f4;
    padding: 0.67rem;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #e0e0e0;
}

.browser-dots {
    display: flex;
    gap: 0.45rem;
}

.browser-dots span {
    width: 0.67rem;
    height: 0.67rem;
    border-radius: 50%;
    background: #ddd;
}

.browser-dots span:nth-child(1) { background: #ff5f57; }
.browser-dots span:nth-child(2) { background: #ffbd2e; }
.browser-dots span:nth-child(3) { background: #28ca42; }

.website-image {
    width: 100%;
    height: auto;
    display: block;
}

.website-info {
    text-align: center;
}

.website-info h4 {
    font-size: clamp(1rem, 2.5vw, 1.2rem);
    color: var(--darkBlue-color);
    margin-bottom: 0.45rem;
}

.website-info p {
    color: var(--text-light);
    font-size: clamp(0.81rem, 2.5vw, 0.9rem);
    margin-bottom: 0.9rem;
    line-height: 1.5;
}

.tech-tags {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.45rem;
}

.tech-tags span {
    background: rgba(56, 182, 255, 0.1);
    color: var(--skBlue-color);
    padding: 0.22rem 0.67rem;
    border-radius: 1.1rem;
    font-size: 0.72rem;
    font-weight: 500;
}

/* Call to Action */
.portfolio-cta {
    background: linear-gradient(135deg, var(--skBlue-color) 0%, var(--blue-color) 100%);
    border-radius: clamp(0.9rem, 3vw, 1.1rem);
    padding: clamp(1.8rem, 5vw, 3.4rem);
    text-align: center;
    color: white;
    margin-top: 1.8rem;
}

.cta-content h3 {
    font-size: clamp(1.35rem, 4vw, 1.8rem);
    margin-bottom: 0.9rem;
}

.cta-content p {
    font-size: clamp(0.9rem, 2.5vw, 1.1rem);
    margin-bottom: 1.8rem;
    opacity: 0.9;
}

.cta-buttons {
    display: flex;
    gap: 0.9rem;
    justify-content: center;
    flex-wrap: wrap;
}

.btn {
    padding: clamp(0.67rem, 2vw, 0.9rem) clamp(1.35rem, 3vw, 1.8rem);
    border: none;
    border-radius: 0.45rem;
    font-size: clamp(0.81rem, 2.5vw, 0.9rem);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-primary {
    background: white;
    color: var(--skBlue-color);
}

.btn-primary:hover {
    background: #f5f9ff;
    transform: translateY(-0.11rem);
    box-shadow: 0 0.45rem 1.35rem rgba(255, 255, 255, 0.2);
}

.btn-secondary {
    background: transparent;
    color: white;
    border: 2px solid white;
}

.btn-secondary:hover {
    background: white;
    color: var(--skBlue-color);
    transform: translateY(-0.11rem);
}

/* Responsive Design */
@media (max-width: 768px) {
    .poster-grid {
        grid-template-columns: repeat(auto-fit, minmax(min(13.5rem, 100%), 1fr));
    }
    
    .website-grid {
        grid-template-columns: 1fr;
    }
    
    .cta-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .btn {
        width: 100%;
        max-width: 16.9rem;
    }
}

@media (max-width: 480px) {
    .portfolio-showcase {
        padding: 1.8rem 0.9rem;
    }
    
    .showcase-section {
        margin-bottom: 2.25rem;
    }
    
    .website-showcase {
        padding: 1.35rem 0.9rem;
    }
}

/* Ask Questions Section */
.question-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: clamp(27rem, 70vh, 45rem);
  font-family: 'Roboto', sans-serif;
  padding: 0.9rem;

  .question-box {
    position: relative;
    background: linear-gradient(135deg, #2dc6ff 0%, #3aa8ff 100%);
    width: 100%;
    max-width: 100%;
    padding: clamp(1.8rem, 5vw, 3.4rem) clamp(1.35rem, 4vw, 2.25rem);
    border-radius: clamp(1.8rem, 5vw, 3.4rem);
    overflow: hidden;
    box-shadow: 0 0.56rem 1.7rem rgba(42, 158, 255, 0.2);
    z-index: 1;

    @media (min-width: 768px) {
      width: 90%;
    }

    @media (min-width: 1024px) {
      width: 70%;
    }

    .question-title {
      margin-bottom: clamp(1.35rem, 4vw, 1.7rem);
      font-size: clamp(1.1rem, 3vw, 1.35rem);
      font-weight: 700;
      color: var(--white-color);
      text-align: center;
      position: relative;
      z-index: 3;
    }

    #questionForm {
      display: none;
    }

    .input-group {
      position: relative;
      z-index: 3;
      width: 100%;
      max-width: 25.3rem;
      margin: 0 auto;

      @media (min-width: 768px) {
        width: 60%;
      }
    }

    .input-field {
      display: block;
      width: 100%;
      margin-bottom: clamp(0.67rem, 2vw, 0.84rem);
      padding: clamp(0.78rem, 2vw, 0.9rem) clamp(1.1rem, 3vw, 1.4rem);
      border: none;
      border-radius: clamp(1.35rem, 4vw, 1.7rem);
      font-size: clamp(0.78rem, 2vw, 0.9rem);
      outline: none;
      background: rgba(255, 255, 255, 0.95);
      box-shadow: 0 0.22rem 0.56rem rgba(0, 0, 0, 0.05);
      transition: all 0.3s ease;

      &:focus {
        box-shadow: 0 0.22rem 0.84rem rgba(0, 0, 0, 0.1);
        transform: translateY(-0.11rem);
      }

      &::placeholder {
        color: #aaa;
        font-size: clamp(0.73rem, 2vw, 0.78rem);
      }

      &.message-field {
        min-height: clamp(4.5rem, 15vw, 6.75rem);
        resize: vertical;
      }
    }

    .arrow {
      position: absolute;
      left: calc(64.5% - 2.8rem);
      bottom: clamp(4.5rem, 15vw, 6.75rem);
      width: clamp(4.5rem, 12vw, 6.75rem);
      height: clamp(2.25rem, 6vw, 3.4rem);
      z-index: 2;
      display: none;

      @media (min-width: 1024px) {
        display: none;
      }
    }

    .send-btn {
      position: relative;
      padding: clamp(0.67rem, 2vw, 0.84rem) clamp(1.1rem, 3vw, 1.7rem);
      background: var(--white-color);
      color: var(--secondary-color);
      border: none;
      border-radius: clamp(1.35rem, 4vw, 1.7rem);
      cursor: pointer;
      font-weight: 600;
      font-size: clamp(0.78rem, 2vw, 0.9rem);
      z-index: 3;
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 0.45rem;
      box-shadow: 0 0.22rem 0.84rem rgba(0, 0, 0, 0.1);
      width: 100%;
      margin-top: 0.9rem;

      @media (min-width: 768px) {
        right: clamp(1.35rem, 4vw, 2.25rem);
        width: auto;
        margin: 0 auto;
      }

      &:hover {
        background: #f5f9ff;
        transform: scale(1.02);
        box-shadow: 0 0.34rem 1.1rem rgba(0, 0, 0, 0.15);

        @media (max-width: 767px) {
          transform: none;
        }
      }

      svg {
        transition: transform 0.3s ease;
        width: clamp(0.9rem, 2vw, 1rem);
        height: clamp(0.9rem, 2vw, 1rem);
      }

      &:hover svg {
        transform: translateX(0.17rem);
      }
    }

    /* Background circles */
    .circle {
      position: absolute;
      border-radius: 50%;
      background: rgba(47, 255, 211, 0.7);
      z-index: 1;
      animation: float 8s infinite ease-in-out;
    }

    .circle1 {
      width: clamp(3.6rem, 10vw, 6.75rem);
      height: clamp(3.6rem, 10vw, 6.75rem);
      top: -1.7rem;
      left: -1.7rem;
      animation-delay: 0s;
    }

    .circle2 {
      width: clamp(4.5rem, 12vw, 8.4rem);
      height: clamp(4.5rem, 12vw, 8.4rem);
      bottom: -2.25rem;
      right: -1.1rem;
      animation-delay: 1s;
    }

    .circle3 {
      width: clamp(2.7rem, 8vw, 4.5rem);
      height: clamp(2.7rem, 8vw, 4.5rem);
      bottom: 1.7rem;
      left: 40%;
      animation-delay: 2s;
    }

    @keyframes float {
      0%, 100% {
        transform: translateY(0) translateX(0);
      }
      50% {
        transform: translateY(-0.84rem) translateX(0.56rem);
      }
    }
  }
}

/* Session registration modal */
.session-registration-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: none;
    justify-content: center;
    align-items: center;
}

.modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
}

.modal-content {
    position: relative;
    background: white;
    padding: 1.8rem;
    border-radius: 9px;
    max-width: 450px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    z-index: 10000;
}

.close-modal {
    position: absolute;
    top: 9px;
    right: 9px;
    font-size: 1.35rem;
    background: none;
    border: none;
    cursor: pointer;
}

.no-scroll {
    overflow: hidden;
}

/* Footer Section */
/* applied form global CSS - footer.css */