*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family:sans-serif
}
body{
    margin: 0;
    /* background:linear-gradient(to bottom ,  #660fa021 10%,white ); */
}
.home{
    background: 
  radial-gradient(circle at top right, #e9d5f5 0%, transparent 50%),
  radial-gradient(circle at bottom right, #d4f5e9 0%, transparent 50%),
  white;
  display: flex;
  flex-flow: column;
  /* justify-content: center; */
  align-items: center;
}
.mainnav{
    position: sticky;
    top: 0;
    z-index: 1000;
}
.nav{
    background-color: rgb(255, 255, 255);
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30px;
}
.logo{
    color: #9c3ee4;
    font-size: 32px;
    font-weight: bolder;
}
.logo:hover{
    background-color: #9c3ee4;
    color: white;
    border-radius: 15px;
    width: 150px;
}
.links a{
    color:black;
    margin: 20px;
}
.nav_ul{
    list-style: none;
    display: flex;
    flex-wrap: wrap;
}
.nav_ul a{

    text-decoration: none;
    font-size: 16px; 
}
.nav_ul li:hover {
    background-color:#9c3ee4;
    border-radius: 10px;
    height: 50px;
    padding-top: 13px;
}
.nav_ul li:hover a {
    color: white;
}

.nav_Contact{
    background-color: #650FA0;
    height: 50px;
    width: 110px;
    padding-top: 13px;
    border-radius: 10px;
    text-align: center;
    margin-left: 10px;
}
.nav_Contact a {
    color: white;
    font-weight: bolder;
}

/* ===== Hero Section ===== */
.heroSection{
    display: grid;
    grid-template-columns: 1fr 1fr;
    position: relative;
    column-gap: 120px;
    padding: 100px;
    margin-top: 0;
}
.heroImg{
    display: flex;
    justify-content: center;
    background-color: white;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    width: 100%;
    max-width: 570px;
    height: 600px;
    border-radius: 10px;
    margin: 0 auto;
}
.heroImg img{
    width: 100%;
    max-width: 500px;
    height: 600px;
    object-fit: cover;
    padding-bottom: 0;
}
.heroText{
    display: flex;
    flex-flow: column;
    padding-top: 80px;
    padding-left: 40px;
}
.herop{
    position: relative;
    top: 40px;
    font-size: 18px;
    font-weight: bolder;
}
.phero{
    font-size: 60px;
    line-height: 1;
    font-weight: bolder;
}

/* ===== Cards ===== */
.cards{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 10px;
    grid-row:1/ 3;
}
.heroCards{
    background-color:#DBC7E9;
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    padding-top: 10px;
    line-height: 1;
    position: relative;
    top: 200px;
}
.heroCardsp1{
    font-weight: bolder;
    font-size: 24px;
}
.heroCardsp2{
    color:oklch(0.551 0.027 264.364) ;
}

.aboutImg img{
    width: 425px;
    height: 470px;
    border-radius: 10px;
}
.aboutText{
    width: 530px;
    height: 350px;
    display: flex;
    flex-flow: column;
    justify-content: center;
}
.aboutText h2{
    font-size: 39px;
    font-weight: bolder;
}
.aboutSection{
    background-color: white;
    display: flex;
    grid-template-columns: 1fr 1fr;
    justify-content: center;
    column-gap: 10vw;
    width: 80%;
    border-radius: 15px;
    padding: 80px;
    box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
    position: relative;
    top: 100px;
    z-index: 10;
}
.processSection{
    display: grid;
    grid-template-columns: 1fr 1fr;
    background-color: #F0F1F3;
    height: 140vh;
    justify-content: center;
    align-items: center;
    padding: 100px;
    column-gap: 10vw;
}
.leftProcess{
    position: relative;
}
.lprocessHead{
    font-size: 48px;
    font-weight: bolder;
}
.lprocesstext , .lprocesstext2{
    font-size: 18px;
    color: #6A7282;
}
.rightProcess{
    display: grid;
    grid-template-columns: 2fr 2fr;
    column-gap: 30px;
    row-gap: 30px;
    position: relative;
    top: 15vh;
}
.research , .analyze , .launch , .design{
    width: 300px;
    background-color: white;
    padding: 30px;
    border-radius: 15px;
}
.research , .design{
    position: relative;
    bottom: 40px;
}
.rightProcess i{
    font-size: 24px;
    font-weight: bolder;
    color:#9c3ee4;
    background-color: #EBD9F6;
    width: 70px;
    height: 70px;
    padding-top: 25px;
    margin-bottom: 20px;
    border-radius: 10px;
}
.analyzeHead , .designHead,.launchHead,.researchHead{
    font-size: 18px;
    font-weight: bolder;
}
.researchtext,.analyzetext,.designtext,.launchtext{
    color: #6A7282;
}
.research:hover i,.design:hover i,.launch:hover i,.analyze:hover i{
    color: white;
    background-color: #9c3ee4;
}
.research:hover ,.design:hover ,.launch:hover ,.analyze:hover {
    box-shadow: rgba(0, 0, 0, 0.3) 0px 4px 12px;
}
.aboutBtn{
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-content: center;
}
.aboutBtn .a1{
    background-color: #9c3ee4;
    text-decoration: none;
    color: white;
    padding: 13px;
    padding-left: 25px;
    width: 10vw;
    border-radius: 10px;
    font-weight: bolder;
    font-size: 18px;
    height: 50px;
}
.aboutBtn .a1:hover{
    background-color: #650FA0;
}
.aboutBtn button:hover{
    border-color:#9c3ee4;
    color:#9c3ee4;
}
.aboutBtn button{
    text-decoration: none;
    color: rgb(0, 0, 0);
    padding: 13px;
    padding-left: 10px;
    width: 12vw;
    border-radius: 10px;
    border: solid #868e9e 1px;
    font-weight: bolder;
    font-size: 18px;
    height: 50px;
    position: relative;
    background-color: white;
    right: 50px;
}
.aboutImg{
    display: flex;
    flex-flow: column;    
    justify-content: center;
    align-items: center;
}
.imgIcons i {
    width: 50px;
    height: 45px;
    padding-top: 10px;
}
.imgIcons a {
    color:#9c3ee4;
}
.imgIcons{
    padding: 10px;
    display: flex;
    justify-content: center;
    gap: 10px;
    background-color: white;
    color:#9c3ee4;
    position: relative;
    bottom: 40px;
    height: 80px;
    box-shadow: rgba(0, 0, 0, 0.3) 0px 4px 12px;
    width: 70%;
    align-items: center;
    font-size: 22px;
    border-radius: 10px;
}
.imgIcons i:hover{
    background-color:#9c3ee4;
    color: white;
    border-radius: 10px;
}
.portfolioHead{
    font-size: 48px;
    font-weight: bolder;
    text-align: center;
    color: #9c3ee4;
}
.portfolioCaption{
    color:#868e9e;
}
.portfolioText{
    display: flex;
    flex-flow: column;
}
.projectCaption{
    color: #868e9e;
}
.projectHead{
    font-weight: bolder;
    font-size: 18px;
    margin-top: 30px;
    color: #9c3ee4;
}
.portfolioSection{
    display: flex;
    flex-flow: column;
    align-items: center;
    padding: 100px;
}
.projectsCard img {
    width: 420px;
    height: 250px;
    border-radius: 10px 10px 0 0;
    width: 100%;
    border-bottom: solid #9c3ee4 1px;
}
.portfolioProjects{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 20px;
    margin-top: 60px;
}
.projectsCard{
    border: solid #9c3ee4 1px;
    border-radius: 10px;
}
.projecttext{
    padding: 30px;
    padding-top: 0px;
}
.projectCaption{
    margin-bottom: 40px;
}
.projecttext a {
    text-decoration: none;
    font-size: 18px;
    font-weight: bolder;
    border-radius: 10px;
    border: solid #9c3ee4 1px;
    padding: 10px;
    color:#9c3ee4;
}
.projecttext a:hover{
    color: #ffffff;
    border-color: #9c3ee4;
    background-color: #9c3ee4;
}
.projectsCard:hover{
    box-shadow: #9c3ee481 0px 4px 12px;
    border-color: #9c3ee4;
    scale: 1.02;
}
.discuss{
    text-align: center;
    background-color: #101828;
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    height: 70vh;
}
.discusshead{
    color: white;
    font-size: 50px;
    font-weight: bolder;
    line-height: 1;
    margin-bottom: 35px;
}
.discusscaption{
    color: #A5ACB5;
    line-height: 0.5;
    font-size: 18px;
}
.discussbtn{
    background-color: #9c3ee4;
    color: white;
    border-radius: 10px;
    padding: 15px;
    border: solid #9c3ee4 1px;
    margin-top: 40px;
    width: 15vw;
    justify-self: center;
    font-weight: bolder;
}
.discussbtn:hover{
    background-color: #650FA0;
}
.services{
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-content: center;
    align-items: center;
    padding: 100px;
    background-color: #f0f1f3;
    column-gap: 10vw;
}
.servicestexthead{
    font-weight: bolder;
    font-size: 48px;
}
.serviceCards{
    display: grid;
    grid-template-columns: 1fr;
    row-gap: 20px;
    
}
.servicestextcaption{
    font-size: 18px;
    color: #868e9e;
}
.scardhead{
    font-size: 24px;
    font-weight: bold;
}
.servicecard1{
    border-radius: 10px;
    background-color: white;
    padding: 20px;
}

.servicecard1:hover{
    border-left: solid 5px #9c3ee4 ;
    box-shadow: rgba(0, 0, 0, 0.3) 0px 4px 12px;

}
.contact{
    background-color: #F5F5F5;
    padding: 100px;
    padding-bottom: 0;
    padding-top: 50px;
   
}
.contact1{
    padding: 70px;
    display: grid;
    justify-content: center;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    column-gap: 5vw;
    background-color: white;
    border-radius: 15px;
    position: relative;
    top: 100px;
}

.contactDHead{
    font-weight: bolder;
    font-size: 32px;
    color: #9c3ee4;
}
.contactDCaption{
    color: #868e9e;
    width: 70%;
    margin-bottom: 60px;
    font-size: 18px;
}
.iconsdata i{
    height: 50px;
    width: 60px;
    font-size: 18px;
    padding-top: 15px;
    background-color: #EBD9F6;
    color: #9c3ee4;
    border-radius: 10px;
}
.iconsdata i:hover{
    background-color: #9c3ee4;
    color: white;
}
.iconsdata{
    display: flex;
    flex-flow: column;
    gap: 30px;
}
.icon1{
    display: flex;
    gap: 30px;
    padding: 20px;
    width: 70%;
}
.iconcontent{
    line-height: 0.5;
    padding-top: 5px;
}
.icon1head{
    color:#6A7282;
}
.icon1data{
    font-weight: bolder;
}
.icon1:hover{
    border-radius: 15px;
    box-shadow: rgba(0, 0, 0, 0.3) 0px 4px 12px;
}
.contactForm{
    display: flex;
    flex-flow: column;
}
.contactForm p {
    color: #6A7282;
    font-size: 20px;
    width: 80%;
}
form{
    display: flex;
    flex-flow: column;
}
input{
    height: 40px;
    margin-bottom: 20px;
    padding-left: 20px;
    border-radius: 10px;
    border: 0px ;
    background-color: #F5F5F5;
}
label{
    color: #9c3ee4;
    font-weight: bolder;
    margin-bottom: 10px;
}
textarea{
    border: 0px;
    padding-top: 10px;
    padding-left: 20px;
    background-color: #F5F5F5;
    border-radius: 10px;
}
form button{
    margin-top: 60px;
    width: 20%;
    height: 50px;
    border-radius: 10px;
    border: solid 1px #9c3ee4;
    background-color: #9c3ee4;
    color: white;
    font-weight: bolder;
}
.contacticons{
    padding: 20px;
}
.contacticons i{
    color: #9c3ee4;
    width: 40px;
    height: 50px;
    padding-top: 15px;
    font-size: 18px;
}
.contacticons i:hover{
    background-color: #9c3ee4;
    color: white;
    border-radius: 10px;
}
.footer{
    background-color:#2A374A;
    height: 50vh;
    display: grid;
    justify-content: center;
    align-items: center;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr ;
}
.mainfooter{
    display: grid;
    grid-template-columns: repeat(3,1fr);
    justify-content: space-evenly;
    align-items: center;
    padding: 100px;
    position: relative;
    top: 50px;
}
.linkes ul {
    list-style: none;
}
.linkes a {
    text-decoration: none;
    color: white;
    font-size: 18px;
}
.linkes ul{
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding-top: 10px;
}
.logo1{
    font-size: 48px;
    font-weight: bolder;
}
.copyrights{
    color: white;
    font-size: 18px;
    padding-top: 5px;
    justify-self: end;
}
.secondfooter{
    color: white;
    font-size: 18px;
    text-align: center;
    position: relative;
    bottom: 30px;
}
span{
    font-weight: bolder;
    font-size: 20px;
}

@media (max-width: 1024px) {

    .heroSection{
        margin: 60px 40px;
        column-gap: 60px;
        padding: 60px 40px;
    }
    .heroImg{
        height: 480px;
    }
    .heroImg img{
        height: 480px;
    }
    .phero{
        font-size: 46px;
    }
    .heroCards{
        top: 140px;
    }

    .aboutSection{
        width: 90%;
        padding: 50px;
        column-gap: 5vw;
    }
    .aboutImg img{
        width: 320px;
        height: 360px;
    }
    .aboutText{
        width: 100%;
        height: auto;
    }
    .aboutText h2{
        font-size: 30px;
    }
    .aboutBtn .a1,
    .aboutBtn button{
        width: auto;
        padding: 13px 20px;
        font-size: 16px;
        right: 0;
    }

    .processSection{
        height: auto;
        padding: 80px 40px;
        column-gap: 5vw;
    }
    .lprocessHead{
        font-size: 36px;
    }
    .rightProcess{
        top: 0;
        column-gap: 20px;
        row-gap: 20px;
    }
    .research,
    .analyze,
    .launch,
    .design{
        width: 100%;
        padding: 20px;
    }
    .research,
    .design{
        bottom: 0;
    }

    .portfolioSection{
        padding: 60px 40px;
    }
    .portfolioHead{
        font-size: 38px;
    }
    .portfolioProjects{
        grid-template-columns: 1fr 1fr;
    }

    .discusshead{
        font-size: 38px;
    }
    .discussbtn{
        width: 30vw;
    }
    .services{
        padding: 60px 40px;
        column-gap: 5vw;
    }
    .servicestexthead{
        font-size: 36px;
    }

    .contact{
        padding: 60px 40px;
        padding-top: 50px;
    }
    .contact1{
        padding: 40px;
        column-gap: 4vw;
    }
    .contactDCaption{
        width: 100%;
    }
    .icon1{
        width: 100%;
    }

    .mainfooter{
        padding: 60px 40px;
    }
}

@media (max-width: 768px) {

    .nav{
        flex-wrap: wrap;
        height: auto;
        padding: 15px;
        gap: 10px;
    }
    .nav_ul{
        flex-direction: column;
        width: 100%;
        text-align: center;
    }
    .nav_ul li{
        margin-bottom: 8px;
    }
    .nav_Contact{
        margin: 0 auto;
    }

    .heroSection{
        grid-template-columns: 1fr;
        margin: 30px 20px;
        padding: 30px 20px;
        row-gap: 40px;
    }
    .heroText{
        order: 1;
        padding: 0;
        text-align: center;
        align-items: center;
    }
    .heroImg{
        order: 2;
        max-width: 100%;
        height: auto;
    }
    .heroImg img{
        height: auto;
        max-width: 100%;
    }
    .herop{
        top: 0;
    }
    .phero{
        font-size: 34px;
    }
    .cards{
        grid-template-columns: 1fr;
        grid-row: auto;
        row-gap: 15px;
        order: 3;
    }
    .heroCards{
        top: 0;
        padding: 20px 10px;
        border-radius: 10px;
    }

    .aboutSection{
        flex-direction: column;
        width: 92%;
        padding: 30px;
        top: 60px;
        row-gap: 30px;
    }
    .aboutImg img{
        width: 100%;
        max-width: 320px;
        aspect-ratio: 425 / 470;
        height: auto;
        object-fit: cover;
    }
    .aboutText{
        text-align: center;
        align-items: center;
    }
    .aboutText h2{
        font-size: 26px;
    }
    .aboutBtn{
        grid-template-columns: 1fr;
        row-gap: 15px;
        width: 100%;
    }
    .aboutBtn .a1,
    .aboutBtn button{
        width: 100%;
        text-align: center;
        right: 0;
    }
    .imgIcons{
        width: 100%;
    }

    .processSection{
        grid-template-columns: 1fr;
        padding: 50px 20px;
        row-gap: 40px;
    }
    .lprocessHead{
        font-size: 30px;
    }
    .rightProcess{
        grid-template-columns: 1fr;
    }

    .portfolioSection{
        padding: 40px 20px;
    }
    .portfolioHead{
        font-size: 30px;
    }
    .portfolioCaption{
        text-align: center;
        font-size: 15px;
    }
    .portfolioProjects{
        grid-template-columns: 1fr;
    }

    .discuss{
        height: auto;
        padding: 60px 20px;
    }
    .discusshead{
        font-size: 28px;
    }
    .discusscaption{
        font-size: 16px;
        line-height: 1.4;
    }
    .discussbtn{
        width: 80%;
    }

    .services{
        grid-template-columns: 1fr;
        padding: 50px 20px;
        row-gap: 30px;
    }
    .servicestexthead{
        font-size: 28px;
    }

    .contact{
        padding: 50px 20px;
        padding-top: 40px;
    }
    .contact1{
        grid-template-columns: minmax(0, 1fr);
        justify-content: stretch;
        width: 100%;
        padding: 30px;
        top: 60px;
        row-gap: 30px;
    }
    .contactDCaption{
        width: 100%;
    }
    .icon1,
    .iconsdata{
        width: 100%;
    }
    .contactForm p{
        width: 100%;
    }
    .icon1data{
        word-break: break-word;
    }
    .iconcontent{
        line-height: 1.3;
    }
    input,
    textarea{
        max-width: 100%;
    }
    form button{
        width: 100%;
    }

    .footer{
        height: auto;
        padding: 40px 0;
    }
    .mainfooter{
        grid-template-columns: 1fr;
        padding: 40px 20px;
        row-gap: 20px;
        text-align: center;
        justify-content: center;
        justify-items: center;
    }
    .linkes ul{
        justify-content: center;
        flex-wrap: wrap;
    }
    .copyrights{
        justify-self: center;
    }
}


@media (max-width: 480px) {
    .logo{
        font-size: 24px;
    }
    .phero{
        font-size: 26px;
    }
    .herop{
        font-size: 15px;
    }
    .heroCardsp1{
        font-size: 18px;
    }

    .aboutText h2{
        font-size: 22px;
    }

    .lprocessHead{
        font-size: 26px;
    }

    .portfolioHead{
        font-size: 26px;
    }

    .discusshead{
        font-size: 22px;
    }
    .discussbtn{
        width: 100%;
        font-size: 15px;
    }

    .servicestexthead{
        font-size: 24px;
    }

    .contactDHead{
        font-size: 24px;
    }
    .secondfooter{
        position: relative;
        bottom: 0;
    }
}