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

body {
    font-family: 'SF Pro', sans-serif; 
}

.banner_content {}

.banner_buttons {}

/* common classes  */
.container {
    width: 1297px;
    margin: 112px auto;
}

.secondaryContainer {
    width: 1297px;
    padding: 112px 0px;
    margin: 0 auto;
}
.commonBannerContainer {
    background-image: url('../images/bannerBackground.jpg');
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat; 
}
.childContainer {

}

.contactHeading {
    margin-bottom: 24px;
}

.contactDescription {
    color: #242424;
    font-size: 48px;
    font-weight: 500;
    line-height: normal;
    margin-bottom: 32px;
}

.mainHeading {
    color: #242424;
    text-align: center;
    font-size: 56px;
    font-weight: 700;
    line-height: normal;
    position: relative;
}

.btnContainer {
    display: flex;
    gap: 16px;
}

.primaryBtn {
    background: #242424;
    /* Black background */
    padding: 12px 16px;
    text-decoration: none;
    text-align: center;
    color: #FFF;
    font-size: 18px;
    font-weight: 500;
    display: inline-block;
    position: relative;
    transition: padding 0.3s ease, background-color 0.3s ease, color 0.3s ease;
}

.primaryBtn::after {
    content: '';
    position: absolute;
    opacity: 0;
    height: 20px;
    width: 20px;
    right: 16px;
    top: 48%;
    transform: translateY(-50%);
    background-image: url('../icons/rightArrow.svg'); /* Replace with the actual image path */
    background-size: contain;
    background-repeat: no-repeat;
    transition: opacity 0.3s ease, right 0.3s ease;
}

.primaryBtn:hover {
    padding-right: 36px;
    /* Expanding the button smoothly on hover */
    background-color: #FFD700;
    /* Change background to yellow on hover */
    color: #242424;
    /* Change text color to black on hover */
}

.primaryBtn:hover::after {
    opacity: 1;
    right: 12px;
    /* Arrow moves closer on hover */
}

.secondaryBtn {
    border: 1px solid #242424;
    text-decoration: none;
    padding: 12px 16px;
    color: #242424;
    text-align: center;
    font-size: 18px;
    font-weight: 500;
    display: inline-block;
    position: relative;
    transition: padding 0.3s ease, background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.secondaryBtn::after {
    content: '';
    position: absolute;
    opacity: 0;
    height: 20px;
    width: 20px;
    right: 16px;
    top: 49%;
    transform: translateY(-50%);
    background-image: url('../icons/rightArrow.svg'); /* Replace with the actual image path */
    background-size: contain;
    background-repeat: no-repeat;
    transition: opacity 0.3s ease, right 0.3s ease;
}

.secondaryBtn:hover {
    padding-right: 36px;
    /* Expanding the button smoothly on hover */
    background-color: #32CD32;
    /* Change background to green on hover */
    color: black;
    /* Change text color to white on hover */
    border-color: #32CD32;
    /* Change border color to match the green background */
}

.secondaryBtn:hover::after {
    opacity: 1;
    right: 12px;
    /* Arrow moves closer on hover */
    font-weight: bold;
    /* Bold arrow on hover */
}


/* navbar css starts here  */
.navbarContainer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 0px;
    width: 1297px;
    margin: 0 auto;
}

.navbar {
    display: flex;
    gap: 40px;
    align-items: center;
}

.navbar li {
    list-style: none;
    position: relative;
}

.navbar li a {
    text-decoration: none;
    color: #242424;
    text-align: right;
    font-size: 18px;
    font-weight: 500;
    padding-left: 20px;
}

.navbar a {
    text-decoration: none;
}
.navbar li a:hover::before,
.navbar li a:active::before {
    content: "•";
    position: absolute;
    left: 0;
    color: black;
    font-size: 18px;
    line-height: 1;
    font-size: 24px;
}

/* about us pages css starts here  */
.bannerContent {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}
.aboutUsBanner {
    margin-bottom: -112px;
}
.bannerContent p {
    color: #242424;
    text-align: center;
    font-size: 24px;
    font-weight: 500;
    margin-top: 32px;
    margin-bottom: 32px;
}

.bannerContent h1 span {
    color: #9747FF;
}

.aboutUsHeading {
    color: #242424;
    font-size: 48px;
    font-weight: 700;
    margin-bottom: 16px;
}

.aboutUsHeader {
    display: flex;
    justify-content: space-between;
    margin-bottom: 48px;
}

.aboutUs {
    background-color: #F3EFF5;
}

.descriptioHeading {
    margin: 16px 0px 24px 0px;
    color: #242424;
    font-size: 18px;
    font-weight: 500;
}

.descriptioContent {
    color: #242424;
    font-size: 40px;
    font-weight: 500;
    line-height: normal;
    margin-bottom: 32px;
}

.descriptioContent span:nth-child(1) {
    background-color: #FFC331;
}

.descriptioContent span:nth-child(2) {
    background-color: #9747FF;
    color: #FFFFFF;
}

.teamCardWrapper {
    display: flex;
    gap: 16px;
}

.teamCardWrapper a {
    text-decoration: none;
}

.teamCard {
    display: flex;
    width: 312px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.teamCard p {
    color: #242424;
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 4px;
    margin-top: 24px;
}

.teamCard span {
    color: #242424;
    font-size: 20px;
    line-height: normal;
}
.linkedInicon {
    background: #B27F00;
    width: 52px;
height: 51px;
display:flex;
align-items: center;
justify-content: center;
position: absolute;
bottom: 88px;
right: 27px;
opacity: 0;
}
.teamCard:hover .linkedInicon {
    opacity: 1; /* Show on hover */
}

/* FAQ section starts here  */
.faqContainer {
    background-color: #FFE299;
    padding: 1px;
}
.faqContainerSecondary {
    background-color: transparent;
}
.faqSecondary {
    background-color: transparent !important;
}

.faq-heading {
    color: #000;
    font-size: 24px;
    font-weight: 700;
    line-height: normal;
}

.faqDescription {
    color: #242424;
    font-size: 18px;
    font-weight: 500;
}

.faq-text {
    font-weight: 400;
    color: #000;
    font-size: 16px;
    max-height: 0;
    /* Initially hidden */
    overflow: hidden;
    /* Prevents overflow */
    transition: max-height 0.5s ease, padding 0.3s ease;
}

.faq {
    width: 100%;
    margin: 0 auto;
    background: #FFE299;
    border-radius: 4px;
    position: relative;
}

.faq label {
    display: block;
    cursor: pointer;
    background-color: #FFF1CC;
    border: 1px solid #242424;
    padding: 24px 20px;
    overflow: hidden;
    position: relative;
    transition: background-color 0.3s ease;
    margin-bottom: 10px;
}

.faq-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.faq-symbol::before {
    content: '+';
    font-size: 39px;
    font-weight: 600;
    transition: transform 0.3s ease, content 0.3s ease;
}

.faq input[type="checkbox"] {
    display: none;
}

.faq input[type="checkbox"]:checked+label .faq-symbol::before {
    content: '−';
    font-size: 39px;
    /* Changes to minus symbol */
}

.faq input[type="checkbox"]:checked+label .faq-text {
    max-height: 500px;
    /* Adjust based on the content length */
    padding-top: 12px;
    /* Optional padding for smoother expansion */
}

.faq input[type="checkbox"]:checked+label {
    background-color: #FFF1CC;
    color: black;
}

.faq input[type="checkbox"]+label .faq-symbol {
    transition: transform 0.3s ease;
}

@media (max-width: 768px) {
    .faq-heading {
        font-size: 20px;
    }

    .faq-text {
        font-size: 14px;
    }
}


/* General improvements for responsive */
/* .container {
    padding: 0 20px;
  } */

.faq {
    width: 100%;
}

.aboutUsHeading {
    font-size: 48px;
    margin-bottom: 20px;
    color: #242424;
    font-weight: 700;
}

.aboutUsHeader {
    text-align: center;
    margin-bottom: 40px;
}

/* .aboutUsHeader a {
    margin: 0 10px;
} */
.sliderdWrapper {
    border: 1px solid red;
    display: flex;
    align-items: center;
    
}

/* FAQ section ends here  */

/* footer css starts here  */
.footer {
    display: flex;
}

.primaryContainer {
    background-color: #FFC331;
    width: 50%;
    padding: 40px 72px 20px 72px;
}

.footerHeader {
    display: flex;
    align-items: center;
    gap: 10px;

}

.footerHeader img {
    padding-right: 10px;
}

.footerDescription {
    color: #242424;
    font-size: 18px;
    margin-top: 24px;
    margin-bottom: 40px;
}

.melonInfo {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 16px;
}

.melonInfo p {
    color: #242424;
    font-size: 18px;
    font-weight: 500;
}

.footerBottom {
    margin-top: 96px;
    border-top: 1px solid #FFF1D1;
    padding-top: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.footerBottom p {
    color: #242424;
    font-size: 14px;
    font-weight: 500;

}

.footerIcons {
    display: flex;
    gap: 16px;
}

.secondaryFooter {
    width: 50%;
    display: flex;
    flex-direction: column;

}

.secondaryFooter a {
    padding: 32px;
    color: #242424;
    font-size: 32px;
    font-weight: 500;
    text-decoration: none;
}
.secondaryFooter a:hover {
    background-color: #000 !important;
    color: #FFF;
}

.secondaryFooter a:nth-child(1) {
    background-color: #FFF8E5;
}

.secondaryFooter a:nth-child(2) {
    background-color: #FFF1CC;
}

.secondaryFooter a:nth-child(3) {
    background-color: #FFE299;
}

.secondaryFooter a:nth-child(4) {
    background-color: #FFD466;
}

.secondaryFooter a:nth-child(5) {
    background-color: #FCCB4D;
}

/* services page css starts here  */
.serviceBannerContainer {
    /* background-image: url('../images/bannerBackground.jpg');
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat;  */
    height: 940px;
    background-color: #FFF1CC;
    overflow: hidden;
}

.tabsSection {
    background-color: #F3EFF5;
}
.featureSubHeading {
    text-align: center;
    color: #242424;
font-size: 48px;
font-style: normal;
font-weight: 700;
line-height: normal;
}
.featureHeading{
    color: #242424;
font-family: "SF Pro";
font-size: 18px;
font-style: normal;
font-weight: 510;
line-height: normal;
text-align: center;
}
.featuresContainer {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    margin-top: 48px;
}

.featuresCard {
border: 1px solid #242424;
background: #EBDFF2;
display: flex;
width: 32%;
padding: 24px;
flex-direction: column;
align-items: center;
gap: 12px;
text-align: center;

}
.featuresCard h5 {
    color: #242424;
    font-weight: 500;
    font-size: 24px;
}
.featuresCard p {
    color: #4E4E4E;
    font-size: 16px;
}
.servicesBanner {
    margin-top: 62px;
}

.solutionHeader {
    margin-bottom: 16px;
    color: #242424;
    text-align: center;
    font-size: 48px;
    font-weight: 700;
    line-height: normal;
}

.solutionDescription {
    color: #242424;
    font-size: 18px;
    font-weight: 500;
    line-height: normal;
    text-align: center;
}
.soultionCardContainer {
    display: flex;
    gap: 16px;
    align-items: center;
    margin-top: 48px;
}
.solutionCard {
    border: 1px solid #000;
    width: 25%;
    height: 357px;
    padding: 24px;
    position: relative;
}
.solutionCard h4 {
    position: relative;
    top: 91%;
    color: #242424;
font-size: 25px;
font-weight: 500;
line-height: normal;

}
.solutionCard img {
    position: absolute;
    right: 10px;
}
.cardPrimary {
    display: block;
    position: relative;
    height: 100%;
}
.cardPrimary h4 {
    position: absolute;
    bottom: 0px;
}
.cardSecondary {
    display: none;
}
.solutionCard:hover .cardPrimary {
    display: none;
}
.solutionCard:hover .cardSecondary {
    display: block;
}
.cardSecondary h3 {
    margin-bottom: 24px;
    color: #242424;
    font-size: 32px;
    font-weight: 500;
}
.cardSecondary p {
    color: #4E4E4E;
    font-size: 16px;
    font-weight: 400;
}
/* tabs section starts here  */
.tab {
    overflow: hidden;
    display: flex;
    justify-content: center;
    gap: 88px;
    margin-top: 48px;
    border-bottom: 1px solid #DFC6FF;
  }
  
  /* Style the buttons inside the tab */
  .tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    transition: 0.3s;
    font-size: 17px;
    padding: 10px 15px; /* Adjust padding */
    border-bottom: 5px solid transparent; /* Make border transparent */
    background-color: transparent; /* Transparent background for inactive buttons */
    font-size: 16px; /* Adjust font size */
    transition: border-image 0.3s ease; /* Transition for smooth border change */
    border-radius: 5px; /* Optional: Add border-radius for rounded corners */
  }
  
  /* Change background color of buttons on hover */
  .tab button:hover {
    background-color: #ddd;
  }
  
  /* Create an active/current tablink class */
  .tab button.active {
    border-image: linear-gradient(270deg, #9747FF 39.18%, #5B2B99 82.35%) 1; /* Apply gradient to border */
    color: #4E4E4E;
    font-size: 16px;
    font-weight: 700;

  }
  
  /* Style the tab content */
  .tabcontent {
    display: none;
    border-top: none;
  }


  /* build section css starts here  */

  .buildLeft {
    width: 542px;
  }
  .buildLeft h2 {
    color: #242424;
    font-size: 48px;
    font-weight: 700;
    margin-bottom: 16px;
  }
  .buildLeft p {
    color: #242424;
    font-size: 18px;
    font-weight: 500;
    line-height: normal;
    margin-bottom: 32px;
    padding-right: 118px;   
  }
  .buildContainer {
    display: flex;
    justify-content: space-between;
  }
  .buildContainerSecondary {
    margin-bottom: 32px;
  }
  .buildRight {
    width: 627px;
  }
  .buildHeading {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
  }
  .buildHeading h3 {
    color: #242424;
    font-size: 32px;
    font-weight: 500;
  }
  .buildContainerSecondary p {
    color: #4E4E4E;
font-size: 16px;
line-height: normal;
  }

  /* home page css starts here  */

  .text {
    position: absolute;
    font-size: 56px;
    font-weight: 700;
    opacity: 0;
    left: 25%;
    animation-name: fade;
    animation-fill-mode: both;
    animation-iteration-count: infinite;
    animation-duration: 5s;
    animation-timing-function: ease-in-out;
}

.text:nth-of-type(1) {
    animation-delay: 0s;
    color: #A2767B;
}

.text:nth-of-type(2) {
    animation-delay: 2s;
    color: #F3BA2F;
}

.text:nth-of-type(3) {
    animation-delay: 4s;
    color: #9747FF;
}


@keyframes fade {
    0%, 25% {
        opacity: 0;
    }
    30%, 45% {
        opacity: 1;
    }
    50%, 100% {
        opacity: 0;
    }
}
.bannerAnimation {
 text-align: center;
}
.aboutUspara {
    margin-top: 80px !important;
}

.homeBannerContainer {
    background-image: url('../images/Homepage.png');
    background-size: cover; 
    background-position: center; 
    background-repeat: no-repeat; 
}
.statsContainer {
    background-color: #FFF8E5;

}
.statsContainerSecondary {
    display: flex;
    align-items: center;
}
.statsRight {
    width: 60%;
}
.statsRight h3 {
    color: #242424;
font-size: 48px;
font-weight: 700;
margin-bottom: 16px;
}
.statsRight p {
color: #242424;
font-size: 18px;
font-weight: 500;
}
.statsLeft {
    display: flex;
    justify-content: space-between;
    width: 40%;
}
.statsContent {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.statsContent p:nth-child(1) {
    color: #242424;
    font-size: 32px;
    font-weight: 700;
    line-height: 38px; 
}
.statsContent p:nth-child(2) {
    color: #716D8A;
    font-size: 18px;
    font-weight: 500;
    line-height: 22px; 
}
.homeCardsHeading {
color: #242424;
font-size: 48px;
font-weight: 700;
}
.homeCardHeader {
    display: flex;
    justify-content: space-between;
    margin-top: 16px;
}
.homeCardHeader p {
color: #242424;
font-size: 18px;
font-weight: 500;
}
.homeCardContiner {
    display: flex;
    gap: 20px;
    margin-top: 48px;
}
.homeCardWrapper {
    border: 1px solid #242424;
    background: #FFF;
    width: 417px;
    height: 489px;
    padding: 24px;
}
.homeCard h4 {
    color: #000;
font-size: 32px;
font-weight: 700;
line-height: normal;
margin-bottom: 12px;
}
.homeCard p {
    color: #302D44;
font-size: 20px;
font-weight: 500;
line-height: normal;
}
.homeCard {
    position: relative;
    overflow: hidden; /* Ensure that the image doesn't overflow the card */

}

.homeCard img {
    display: block; /* Ensure the image is visible by default */
    transition: opacity 0.6s ease; /* Smooth transition for opacity */
    opacity: 1; /* Fully visible */
    margin-top: -140px;
    margin-left: 50px;
}

.homeCard .details {
    opacity: 0; /* Hide the second p tag by default */
    transition: opacity 0.3s ease; /* Smooth transition for opacity */
    pointer-events: none; /* Prevent interactions when hidden */
}

.homeCard:hover img {
    opacity: 0; /* Fade out the image on hover */
}

.homeCard:hover .details {
    opacity: 1; /* Fade in the second p tag on hover */
    pointer-events: auto; /* Allow interactions when visible */
}


/* feature card css starts here  */
.skillsHeader {
    display: flex;
    justify-content: space-between;
}
.skillsHeader p {
    font-size: 18px;
    color: #242424;
    font-weight: 500;
}
.skillsHeading {
    color: #242424;
font-size: 48px;
font-weight: 700;
text-align: left;
margin-bottom: 16px;
}
.skillssCardWrapper {
    margin-top: 48px;
    display: flex;
    gap: 20px;
}
.skillssCard {
    display: flex;
    flex: 1 1 250px;
    min-width: 259px; /* Initial width */
    height: 200px !important;
    padding: 24px;
    flex-direction: column;
    gap: 24px;
    border: 1px solid #242424;
    background: rgba(243, 239, 245, 0.50);
    margin-right: 20px;
    transition: width 0.3s ease; /* Smooth transition for width */
}

/* .skillssCard:hover {
    width: 448px; /* Width on hover */
*/

.skillssCard p {
    color: #302D44;
font-size: 20px;
font-weight: 500;
line-height: normal;
text-align: left;
}
.skillsCradFooter {
    text-align: left;
    width: 100%;
    margin-top: 10px;
}
.skillsCradFooter p {
    color: #302D44;
font-size: 18px;
font-weight: 500;

}
.skillsCradFooter span {
    color: #716D8A;
font-size: 14px;
font-weight: 400;
}


/* animation css starts here  */
.animationContainer {
    display: flex;
    align-content: center;
    justify-content: space-between;
}
.scrolling-words-container {
    display: flex;
    align-items: center;
    font-size: 2rem;
    font-weight: 600; 
}

.scrolling-words-box {
    height: 10rem;
    margin: auto;
    overflow: hidden;
    background: linear-gradient(180deg, #F3EFF5 0%, rgba(243, 239, 245, 0.00) 100%);
}

.scrolling-words-box ul {
    margin: 0 0.625rem;
    padding: 0;
    animation: scrollUp 10s infinite;
    text-align: center;
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 30px;
}

.scrolling-words-box li {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 3rem;
    list-style: none;
    font-size: 64px;
    color: #242424;
    font-weight: 700;
}

/* Keyframes for scrolling animation */
@keyframes scrollUp {
    0% {
        transform: translateY(0);
    }
    20% {
        transform: translateY(0);
    }
    25% {
        transform: translateY(-20%);
    }
    45% {
        transform: translateY(-20%);
    }
    50% {
        transform: translateY(-40%);
    }
    70% {
        transform: translateY(-40%);
    }
    75% {
        transform: translateY(-60%);
    }
    95% {
        transform: translateY(-60%);
    }
    100% {
        transform: translateY(-80%);
    }
}


.commingSoonMain {
    background-color: #F3EFF5;
    height: 900px;
}

/* contactUs Form css starts here  */
.formContainer {
    border: 1px solid #242424;
background: #FFF;
width: 1036px;
padding: 32px;
margin-top: 56px;
}
.formContent {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 48px;
}

.inputFeild {
    width: 100%;
    border: none;
    border-bottom: 1px solid #CDCDCD;
    padding-bottom:4px ;
}
.inputFeildmsg {
    width: 100%;
    border: none;
    border-bottom: 1px solid #CDCDCD;
    padding-bottom: 50px;
}
.inputFeild :focus-visible {
    outline: none;
}