*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body{
    background-color: #f8fbff;
    font-family:  'DM Sans', sans-serif;
    overflow-x: hidden;
    max-width: 100%;
    scroll-behavior: smooth;
}

/* -----------value---------------- */

:root{
    --bg:#f8fbff;
    --black1: #090a1a;
    --bgspan: rgba(49, 92, 255, 0.12);
    --bgbtn: #090a1a;
    --hov : #315cff;
    --accent : #00c7d9;
    --shine : #5c7cff;
    --bgdoc : #eef5ff;
    --bgdiff : #e8f7ff;

    --navfont : 1.6rem;
    --logofont : 2rem;

    --headfont: 3.75rem;
    --headfont2: 2rem;
    --pfont: 1rem;
}


/* ----------------------common------------------ */

.maxsize{
    max-width: 1200px;
}

.diff-bold{
    padding: 0 1rem;
    border-radius: 8px;
    background-color: var(--bgdiff);
    color: var(--hov);
}

.btn{
    padding: 1.125rem 2.5rem;
    text-decoration: none;
    color: white;
    background: linear-gradient(135deg, var(--hov), var(--shine) 55%, var(--accent));
    border-radius: 50px;
    box-shadow: 0 18px 38px -18px rgba(49, 92, 255, 0.8);
}
section{
    padding: 3rem 0;
}

.section{
    flex-flow: column;
    margin-bottom: 6rem;
}

.doc-box-shadow{
    border-radius: 30px;
    transform-style: preserve-3d;
    box-shadow: 0 25px 55px -18px rgba(49, 92, 255, 0.28);
}
/* -----------header-------------- */
header{
    height: 75px;
    padding: 16px 30px;
    
    width: 100%;
}

#menu-icon{
    display: none;
    font-size: 2rem;
    z-index: 1001;
    color: var(--hov);
}
.sticky-head{
    position: sticky;
    top: 0;
    background-color: rgba(248, 251, 255, 0.92);
    backdrop-filter: blur(16px);
    box-shadow: 0 15px 50px -10px rgba(9, 10, 26, 0.14);
    z-index: 1000;
}
.container{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem 1.875rem;
}
.navbar{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    position: relative;
}
.logo{
    color: var(--black1);
    font-size: var(--logofont);
    font-weight: 700;
    white-space: nowrap;
}
.show.full{
    position: absolute;
    display: inline-flex;
    width: 100%;
    height: 100vh;
    top: 0;
    left: 0;
    background-color: black;
    overflow: hidden;
    z-index: 1000;
    animation: show-menu 0.5s ease-in-out both;
}
@keyframes show-menu {
    0%{
        width: 100%;
        height: 0%;
        opacity: 0;
    }
    100%{
        width: 100%;
        height: 100vh;
        opacity: 1;
    }
}

.show.full ul{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: column nowrap;
    width: 100%;
}
.show.full ul li a{
    color: white;
}
.join-btns{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.login{
    margin-right: 2rem;
}
.login a{
    text-decoration: none;
}
.signup{
    padding: .625rem 1.25rem;
    border: 2px solid var(--black1);
    border-radius: 50px;
}
.signup a{
    text-decoration: none;
}

 /* ---------for menu list -------------- */

.menu ul{
    display: flex;
    align-items: center;
    justify-content: center;
}
.menu ul li{
    list-style: none;
    margin: 2rem;
}

.menu ul li a{
    text-decoration: none;
    color: var(--black1);
    font-size: 1rem;
    font-weight: 500;
}

/* -------------header:hover---------------- */

.menu ul li:hover a{
    color: var(--hov);
}
.login:hover a{
    color: var(--hov);
}
.signup:hover{
    background-color: var(--black1);
}
.signup:hover a{
    color: white;
    transition: 0.5s;
}
.btn:hover{
    color: white;
    background: linear-gradient(135deg, var(--accent), var(--shine) 55%, var(--hov));
}


/* -----------section-hero---------------- */

.section-hero{
    padding: 2.5rem 1.875rem 6rem;
    background: radial-gradient(circle at top left, rgba(0, 199, 217, 0.28), transparent 32%),
        linear-gradient(180deg, #f8fbff 0%, #eef5ff 100%);
}
.content{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column nowrap;
}
.block-content{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column nowrap;
    padding: 1.25rem 0 3rem;
    z-index: 100;
}
.block-content h1{
    font-size: var(--headfont);
    margin-bottom: 2rem;
    text-align: center;
}

.block-content p{
    font-size: var(--pfont);
    text-align: center;
    max-width: 500px;
    letter-spacing: 2px;
    margin-bottom: 2rem;
}

/* ----------scroolling animation view------------------ */

.block-hero-img{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    min-height: 460px;
}
.block-hero-img div{
    position: absolute;
    transform-style: preserve-3d;
}

#doc2{
    right: 5%;
    top: 38px;
    z-index: 100;
    
}

#doc1{
    z-index: 95;
}

.agency-photo{
    display: block;
    object-fit: cover;
}

.hero-main{
    width: min(86%, 980px);
    height: 460px;
}

.hero-float{
    width: 300px;
    height: 210px;
}

.mini-photo{
    width: 220px;
    height: 160px;
}
/* -------circle-1----------- */
#circle1{
    width: 12%;
    top: 40px;
    left: 30px;
}

#circle1 img{
    width: 100%;
}

/* -------circle-2------------- */

#circle2{
    width: 8%;
    top: -50px;
    left: 0;
}
#circle2 img{
    width: 100%;
}

/* -------circle-3------------- */

#circle3{
    width: 6%;
    top: -80px;
    left: 100px;
}

#circle3 img{
    width: 100%;
}

/* -------circle-4------------- */

#circle4{
    width: auto;
    top: auto;
    right: 6%;
    bottom: -48px;
}

#circle4 img{
    width: 220px;
}

/* -------circle-5------------- */

#circle5{
    width: 12%;
    top: -100px;
    right: 30px;
}

#circle5 img{
    width: 100%;
}

/* -------circle-6------------- */

#circle6{
    width: 8%;
    top: -150px;
    right: 150px;
}

#circle6 img{
    width: 100%;
}

/* -------circle-7------------- */

#circle7{
    width: 20%;
    bottom: -150px;
    right: 150px;
    z-index: 96;
}

#circle7 img{
    width: 100%;
}

/* -------circle-8------------- */

#circle8{
    width: 8%;
    bottom: -20px;
    right: 350px;
    z-index: 98;
}

#circle8 img{
    width: 100%;
}

/* -------circle-9------------- */

#circle9{
    width: 7%;
    bottom: -90px;
    right: 150px;
    z-index: 96;
}

#circle9 img{
    width: 100%;
}

/* -----------features page------------------ */

.main-features-box{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: auto;
    grid-gap: 1.875rem;
}
.feature-box{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column nowrap;
}
.featues-icon{
    background-color: #ffffff;
    border-radius: 20px;
    padding: 1.5rem;
    margin-bottom: 1rem ;
    box-shadow: 0 25px 50px -18px rgba(49, 92, 255, 0.25);
    position: relative;
}
.featues-icon i{
    font-size: 2.5rem;
    color: var(--hov);

}
.feat-head h2{
    font-size: 1.3rem;
    text-align: center;
    margin-bottom: .75rem;
}
.feat-p p{
    font-size: var(--pfont);
    text-align: center;
    line-height: 2rem;
    font-weight: 200;
}


/* ------------------section-full--------------------- */
/* .section-full{
    padding: 5rem 0;
} */
.section-full{
    overflow: hidden;
}

.section-grid{
    display: grid;
    grid-template-columns: 1fr 1.25fr;
    grid-template-rows: auto;
    min-height: 100vh;
    align-items: center;
}

.section-full-img{
    position: relative;
}
.section-content{
    z-index: 900;
}

.section-content h1{
    font-size: var(--headfont);
    margin-bottom: 2rem;
}
.section-content p{
    font-size: var(--pfont);
    line-height: 2rem;
    margin-bottom: 2rem;
}
.section-content .btn{
    width: fit-content;
}
.section-animate-grid{
    display: grid;
    justify-content: center;
    align-items: center;
    grid-template-columns: 1fr 2.2fr;
    grid-template-rows: auto;
    grid-row-gap: 3vw;
    grid-column-gap: 2vw;
    position: absolute;
    top: -260px;
    left: -40px;
    transform-style: preserve-3d;
    transition: 4s;
    overflow: auto;
}

.section-animate-grid img{
    width: 100%;
    height: 260px;
    object-fit: cover;
}

.docs3-1 img{
    height: 460px;
}

.docb3 img,
.docs3-2 img{
    height: 210px;
}
.docs3-1{
    grid-row: 1/ span 2;
}

.section-full-circle{
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

.section-full-circle div{
    position: absolute;
}

/* ------------circle-10--------------- */
#circle10{
    width: 14%;
    top: 90%;
    left: 60%;
}
#circle10 img{
    width: 100%;
}

/* ------------circle-11--------------- */
#circle11{
    width: 14%;
    bottom: 40%;
    left: 90%;
}
#circle11 img{
    width: 100%;
}

/* ------------circle-12--------------- */
#circle12{
    width: 14%;
    top: 50%;
    left: 40%;
}
#circle12 img{
    width: 100%;
}



/* ------------------work-section------------ */
.work-section{
    padding: 5rem 0;
}

.work-grid{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto;
    align-items: center;
    grid-column-gap: 2rem;
    margin-bottom: 1.5rem;
}

.work-content{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-flow: column wrap;
}
.work-content h1{
    font-size: var(--headfont);
    margin-bottom: 3rem;
}
.work-not{
    position: absolute;
    top: -5px;
    right: -5px;
    padding: 0.25rem .75rem;
    background: linear-gradient(135deg, var(--hov), var(--accent));
    color: white;
    border-radius: 50%;
}

/* -------------section-idea------------ */

.section-idea{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto;
    grid-column-gap: 3rem;
    align-items: center;
}

.idea-doc img{
    width: 100%;
    height: 520px;
    object-fit: cover;
}

.section-content ul li {
    list-style: none;
    font-size: var(--pfont);
    font-weight: 600;
    margin-bottom: 1.5rem;
}
.section-content ul li i{
    color: var(--hov);
    margin-right: 2rem;
    padding: 1rem;
    background-color: #ffffff;
    border-radius: 50%;
}

/* ------------section-review-------------- */

.section-review{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto;
    grid-column-gap: 2rem;
}

.review{
    background: linear-gradient(135deg, #ffffff, var(--bgdiff));
    border-radius: 24px;
    padding: 30px 40px 35px;
    display: flex;
    align-items: center;
    flex-flow: column nowrap;
    margin-bottom: 2rem;
    box-shadow: 0 25px 55px -26px rgba(49, 92, 255, 0.32);
}

.review p{
    font-size: var(--pfont);
    line-height: 2rem;
    margin-bottom: 2rem;
}
.lower-review-section{
    display: flex;
    justify-content: center;
    align-items: center;
}
.user-log{
    padding: 1rem;
    border-radius: 50%;
    background-color: #ffffff;
    margin-right: 1rem;
}
.review-name{
    font-size: 1rem;
    font-weight: 700;
}

/* ---------footer------------- */


.section-footer{
    width: 100%;
    display: grid;
    grid-template-columns: 2.4fr 1fr 1fr 1.5fr;
    grid-template-rows: auto;
    grid-column-gap: 2rem;
    padding: 6rem 0;
    border-top: 5px solid black;
}

.office .logo{
    margin-bottom: 2rem;
}


.footerlinks h4{
    color: var(--black1);
    font-weight: 400;
    margin-bottom: 2rem;
    opacity: .7;
}
.footerlinks li{
    list-style: none;
    margin-bottom: 1rem;
}
.footerlinks li a{
    text-decoration: none;
    color: var(--black1);
}

.footerlinks li:hover a{
    color: var(--hov);
}

.footer-form{
    display: flex;
    flex-direction: column;
    gap: .75rem;
    margin-top: 1.25rem;
}

.footer-form input,
.footer-form textarea{
    width: 100%;
    border: 1px solid rgba(9, 10, 26, 0.18);
    border-radius: 16px;
    padding: .9rem 1rem;
    color: var(--black1);
    background-color: white;
    font-family: inherit;
    outline: none;
}

.footer-form textarea{
    min-height: 86px;
    resize: vertical;
}

.footer-form button{
    border: none;
    border-radius: 50px;
    padding: .9rem 1rem;
    color: white;
    background: linear-gradient(135deg, var(--hov), var(--shine) 55%, var(--accent));
    font-family: inherit;
    font-weight: 700;
    cursor: pointer;
}



/* ----------------animation--------------- */


.animate-circle.slide-top.rotategrid{
    animation: rotategrid 4s ease-in-out both;
    -webkit-animation: rotategrid 4s ease-in-out both;
    
}
@keyframes rotategrid {
    0%{
        -webkit-transform: rotate3d(0,0,0,0) translate3d(0,0,0);
        transform: rotate3d(0,0,0,0) translate3d(0,0,0);
    }
    100%{
        -webkit-transform: rotate3d(1,1,1,-20deg) translate3d(20px,40px,50px);
        transform: rotate3d(1,1,1,-20deg) translate3d(20px,40px,50px);
    }
}

@-webkit-keyframes fade-in-up {
    0%{
        -webkit-transform: rotate3d(0,0,0,0) translate3d(0,0,0);
        transform: rotate3d(0,0,0,0) translate3d(0,0,0);
    }
    100%{
        -webkit-transform: rotate3d(1,1,1,-20deg) translate3d(20px,40px,50px);
        transform: rotate3d(1,1,1,-20deg) translate3d(20px,40px,50px);
    }
}



.scrolled.fade-in-up{
    animation: fade-in-bottom 2s ease-in-out both;
    -webkit-animation: fade-in-bottom 2s ease-in-out both;
}
.js-scroll{
    opacity: 0;
}
.js-scroll.scrolled{
    opacity: 1;
}

@keyframes fade-in-up {
    0%{
        -webkit-transform: translate3d(0, 100%, 0);
        transform: translate3d(0, 100%, 0);
        opacity: 0;
    }
    100%{
        -webkit-transform: none;
        transform: none;
        opacity: 1;
    }
}

@-webkit-keyframes fade-in-up {
    0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
    }
    100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none;
    }
}


/* -------------circles-animation-slide-top--------------- */
.animate-circle.slide-top{
    -webkit-animation: slide-top 6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: slide-top 6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@-webkit-keyframes slide-top {
    0%{
        -webkit-transform: translateY(0) translateX(0);
        transform: translateY(0);
    }
    100% {
        -webkit-transform: translateY(-100px) translateX(100px);
        transform: translateY(-100px);
      }
}
@keyframes slide-top {
    0% {
        -webkit-transform: translateY(0) translateX(0);
        transform: translateY(0);
    }
    100% {
         -webkit-transform: translateY(-100px) translateX(100px);
        transform: translateY(-100px);
    }
}





/* -------------circles-animation-slide-right-------------- */

.animate-circle.slide-right{
    -webkit-animation: slide-right 6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    animation: slide-right 6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@-webkit-keyframes slide-right {
    0%{
        -webkit-transform: translateY(0) translateX(0);
        transform: translateX(0);
    }
    100% {
        -webkit-transform: translateX(100px);
        transform: translateX(100px);
      }
}
@keyframes slide-right {
    0% {
        -webkit-transform: translateY(0) translateX(0);
        transform: translateX(0);
    }
    100% {
         -webkit-transform: translateX(100px);
        transform: translateX(100px);
    }
}

/* -------------circles-animation-slide-left-------------- */

.animate-circle.slide-back{
    -webkit-animation: slide-back 6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	animation: slide-back 6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@-webkit-keyframes slide-back {
    0% {
        -webkit-transform: translateY(0) translateX(0);
        transform: translateY(0) translateX(0);
    }
    100% {
        -webkit-transform: translateY(100px);
        transform: translateY(100px);
    }
}
  @keyframes slide-back {
    0% {
        -webkit-transform: translateY(0) translateX(0);
        transform: translateY(0) translateX(0);
    }
    100% {
        -webkit-transform: translateY(100px);
        transform: translateY(100px);
    }
}

/* -------------circles-animation-slide-back--------------- */

.animate-circle.slide-left {
	-webkit-animation: slide-left 6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
	animation: slide-left 6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@-webkit-keyframes slide-left {
    0% {
        -webkit-transform: translateY(0) translateX(0);
        transform: translateY(0) translateX(0);
    }
    100% {
        -webkit-transform: translateX(-100px);
        transform: translateX(-100px);
    }
}
  @keyframes slide-left {
    0% {
        -webkit-transform: translateY(0) translateX(0);
        transform: translateY(0) translateX(0);
    }
    100% {
        -webkit-transform: translateX(-100px);
        transform: translateX(-100px);
    }
}


/* ----------animate-circle--------------- */

.circle{
    transition: 6s;
}





/* -------------------- for tablet------------------- */

@media screen and (max-width: 1300px) {
    .section-grid{
        display: grid;
        align-items: center;
        justify-content: center;
        grid-template-columns: 1fr;
        
    }
    .section-grid .section-content {
        justify-self: center;
        text-align: center;
    }
    .section-idea .idea-doc{
        width: 100%;
        
    }
    .section-idea .idea-doc img{
        width: 100%;
        height: 360px;

    }
}

@media screen and (max-width: 1000px) {
    :root{
        --navfont : 1.6rem;
        --logofont : 2rem;
    
        --headfont: 2rem;
        --headfont2: 1.5rem;
        --pfont: 1rem;
    }

    .menu, .join-btns{
        display: none;

    }
    #menu-icon{
        display: inline-block;
    }
    .cross{
        display: none;
    }
    #menu-icon.hide .bars{
        display: none;
    }
    #menu-icon.hide .cross{
        display: block;
    }
    .navbar{
        padding: 16px 50px;
    }
    .block-content{
        max-width: 500px;
    }
    .section-hero {
        padding: 2rem 1.875rem 4rem 1.875rem;
    }
    .block-hero-img{
        width: 100%;
        min-height: 360px;
    }
    .block-hero-img img{
        width: 100%;
    }
    .hero-main{
        width: 88%;
        height: 360px;
    }
    #doc2{
        right: 2%;
        top: 24px;
    }
    #doc2 img,
    .hero-float{
        width: 210px;
        height: 150px;
    }
    #circle4{
        right: 4%;
        bottom: -30px;
    }
    #circle4 img,
    .mini-photo{
        width: 170px;
        height: 120px;
    }
    .section-animate-grid{
        width: 86%;
        justify-self: center;
        left: 7%;
        top: -170px;
    }
    .section-animate-grid img{
        width: 100%;
        height: 180px;
    }
    .docs3-1 img{
        height: 330px;
    }
    /* .section-full-circle{
        top: 50%;
        left: 50%;
    } */
    .section-full-circle div{
        width: 40%;
    }
    #circle10,#circle11,#circle12{
        width: 10%;
    }
    .docs3-2{
        width: 50%;
    }
    .section-review{
        grid-template-columns: 1fr 1fr;
    }
    .review-content{
        grid-column: 1/span 2;
        display: flex;
        align-items: center;
        flex-flow: column nowrap;
        justify-content: center;
        margin-bottom: 4rem;
    }
    .review-content h1,.review-content p,.review-content a{
        text-align: center;
    }
}


@media screen and (max-width: 1000px) {
    .main-features-box{
        grid-template-columns: auto;
    }
    .work-grid{
        grid-template-columns: auto;
    }
    .section-idea{
        grid-template-columns: auto;
    }
    .idea-doc{
        order: 2;
    }
    .section-footer{
        grid-template-columns: auto;
        justify-content: center;
    }
    .section-footer> div{
        display: flex;
        justify-content: center;
        align-items: center;
        flex-flow: column nowrap;
        margin: 2rem 0;
    }
}

@media screen and (max-width: 1000px){
    :root{
        --navfont : 1rem;
        --logofont : 1.5rem;
    
        --headfont: 1.5rem;
        --headfont2: 1rem;
        --pfont: .75rem;
    }
    .reviewcontain1,.reviewcontain2{
        grid-column: 1/-1;
    }
}

@media screen and (max-width: 640px){
    .section-hero{
        padding: 1rem 1.25rem 3rem;
    }

    .block-content{
        padding: 1.5rem 0 2rem;
    }

    .block-content h1{
        margin-bottom: 1rem;
    }

    .block-content p{
        letter-spacing: 1px;
    }

    .block-hero-img{
        min-height: 300px;
    }

    .hero-main{
        width: 100%;
        height: 300px;
        border-radius: 22px;
    }

    #doc2{
        display: none;
    }

    #circle4{
        display: none;
    }

    .section-animate-grid{
        position: relative;
        top: 0;
        left: 0;
        width: 100%;
        grid-template-columns: 1fr;
        margin: 2rem 0;
    }

    .section-animate-grid img,
    .docs3-1 img,
    .docb3 img,
    .docs3-2 img{
        height: 240px;
    }

    .idea-doc img{
        height: 280px;
        border-radius: 22px;
    }
}