*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'saira',sans-serif;
}


/*--------- Custom Scrollbar -----------*/

::-webkit-scrollbar{
    width: 15px;
}
::-webkit-scrollbar-track{
    background: #f0cfee;
}
::-webkit-scrollbar-thumb{
    background: linear-gradient(#642bff,#ff22e6);
    border-radius: 10px;
    border: 6px solid transparent;
    background-clip: content-box;
}

/***** ------------  container starts here -------------- *****/

.container{
    max-width: 1000px;
    margin: auto;
    background-color: #fff;
    box-shadow: 1px 1px 18px 0.5px #666;
    overflow: hidden;
    overflow-x: hidden;
    padding: 0px 0px;   
}

.row{
    border: 1px salid red; margin: 0px 0px;
}

#logo{
    display: flex; 
    width: 150px;
    height: 50px;
    margin: 42px 0px 0px 26px;   
}

#moblogo{
    display:none;
}

/******** Logo part ends here   ************/


/*==================== menubar new style =========================*/

.menu-items {
    display: flex; 
    margin-bottom: 0px;  
    width: 508px; 
    list-style: none;
    justify-content: center; 
    z-index: 1000;
    align-items: center;
    background-color:#ccc; 
    height: 31px;
    border-radius:0px 0px 10px 10px;
    padding-left: 0px;
    position: relative;
}

.menu-items li a{
    text-decoration: none; 
    text-align: center; 
    /* color: #283442; */
    color: #202a35;
    padding: 6px 15px 3px 15px;
    border-radius: 0px 0px 10px 10px; 
    font-family: 'saira',sans-serif; 
    font-weight: 300; 
    font-size: 14px; 
    letter-spacing: 2px; 
    line-height: 32px; 
    -webkit-transition: background .3s ease, color .3s ease;
    -moz-transition: background .3s ease, color .3s ease;
    -o-transition: background .3s ease, color .3s ease;
    -ms-transition: background .3s ease, color .3s ease;
    transition: background .3s ease, color .3s ease;
    height: 0px;
    -wibkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    -o-transition: all 0.3s linear;
    -ms-transition: all 0.3s linear; 
    transition: all 0.3s linear; 
    top: 0px; 
    position: relative; 
    z-index: 1;
}

.menu-items li a::before{
    content: ''; 
    position: absolute; 
    left: 0; 
    top: 0; 
    width: 100%; 
    height: 0%; 
    font-weight: 300;
    z-index: 10;
    -webkit-transition: all .3s linear;
    -moz-transition: all .3s linear;
    -o-transition: all .3s linear;
    -ms-transition: all .3s linear; 
    transition: all .3s linear; 
    border-radius: 0px 0px 10px 10px; 
    color: #fff;
}
 
.menu-items li a:hover::before{
    background: rgb(245, 91, 173);  
    border-radius: 0px 0px 10px 10px;  
    z-index: -10; 
    position: absolute; 
    top: 0;
    height: 32px; 
}

.menu-items li a:hover{ 
    color: #fff;
    font-weight: bolder;
}

/** -- nav bar Lines starts here  ---------- ***********/

.menu-btn{
    display: flex; 
    position: relative; 
    justify-content: center; 
    align-items: center; 
    width: 1.5rem; 
    height: 1.5rem; 
    cursor: pointer;
}

.menu-btn_liens,
.menu-btn_liens::before,
.menu-btn_liens::after{ 
    width: 1.5rem; 
    height: 0.1rem; 
    background-color: deeppink;
    -webkit-transition: all 0.5s ease-in-out; 
    -moz-transition: all 0.5s ease-in-out;
    -o-transition: all 0.5s ease-in-out;
    -ms-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.menu-btn_liens::before,
.menu-btn_liens::after{ content: ""; position: absolute;}

.menu-btn_liens::before{
    -webkit-transform: translateY(-0.5rem);
    -o-transform: translateY(-0.5rem);
    -moz-transform: translateY(-0.5rem);
    -ms-transform: translateY(-0.5rem);
    transform: translateY(-0.5rem);

}
.menu-btn_liens::after{
    -webkit-transform: translateY(0.5rem);
    -o-transform: translateY(0.5rem);
    -moz-transform: translateY(0.5rem);
    -ms-transform: translateY(0.5rem);
    transform: translateY(0.5rem);
}
.menu-btn.open .menu-btn_liens{
    -webkit-transform: translateX(2rem);
    -moz-transform: translateX(2rem);
    -o-transform: translateX(2rem);
    -ms-transform: translateX(2rem);
    transform: translateX(2rem);
    background-color: transparent;
}

.menu-btn.open .menu-btn_liens::before{
        -webkit-transform: rotate(45deg) translate(-1.5rem, 1.5rem);
        -moz-transform: rotate(45deg) translate(-1.5rem, 1.5rem);
        -o-transform: rotate(45deg) translate(-1.5rem, 1.5rem);
        -ms-transform: rotate(45deg) translate(-1.5rem, 1.5rem);
        transform: rotate(45deg) translate(-1.5rem, 1.5rem); 
    background-color: deeppink;
}

.menu-btn.open .menu-btn_liens::after{
    -webkit-transform: rotate(-45deg) translate(-1.5rem,-1.5rem);
    -moz-transform: rotate(-45deg) translate(-1.5rem,-1.5rem);
    -o-transform: rotate(-45deg) translate(-1.5rem,-1.5rem);
    -ms-transform: rotate(-45deg) translate(-1.5rem,-1.5rem);
    transform: rotate(-45deg) translate(-1.5rem,-1.5rem); 
    background-color: deeppink;
}

.menu-items{
    top: -100px;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -o-transition: 0.3s;
    -ms-transition: 0.3s;
    transition: 0.3s;
}
.menu-items.open {
    top: 0px;
    -moz-top: 0px;
    -webkit-top:0px;
    -o-top:0px;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -o-transition: 0.3s;
    -ms-transition: 0.3s;
    transition: 0.3s;
}

/** -- nav bar ends here -- ***********/

#humb{
    padding: 45px 0px 0px 110px; 
    display: flex;}

/** -- 1st line / row ends here -- ***********/

.intro .square{
    margin: 0 auto; 
    margin-top: 100px; 
    margin-bottom: 120px;
}
.square{ 
    position: relative; 
    width: 200px; 
    height: 200px; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    margin: 40px 15px; 
    padding: 0px 0px;
}
.square span:nth-child(1){
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%;
    height: 100%; 
    border: 2px solid #B3D89C; 
    border: 2px solid #c9b1b1; 
    /*border-radius: 48% 72% 73% 57% / 41% 44% 56% 59%; */
    border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%;  
    -webkit-transition: 0.3s ease-in;
    -moz-transition: 0.3s;
    -o-transition: 0.3s;
    -ms-transition: 0.3s; 
    transition: 0.3s ease-in; 
    animation: animate 6s linear infinite;
}

.square:hover span:nth-child(1){
     border: none;
    /* background: rgb(247, 116, 247); */ 
     background: rgb(255, 96, 255);     
} 
 

.square span:nth-child(2){
   position: absolute; 
    top: 0; 
    left: 0;
    width: 100%; 
    height: 100%; 
    /*border: 2px solid #CCE6F4; */
    border: 2px solid #adc2ce;
    border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%; 
    -webkit-transition: 0.3s ease-in;
    -moz-transition: 0.3s;
    -o-transition: 0.3s;
    -ms-transition: 0.3s; 
    transition: 0.3s ease-in; 
    animation: animate2 4s linear infinite; 
} 

.square:hover span:nth-child(2){
    border: none; 
    background: rgb(191, 0, 255);
 
}
 
.square span:nth-child(3){ 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    border: 2px solid #F6C0D0; 
    border-radius: 38% 62% 63% 37% / 41% 44% 56% 59%;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -o-transition: 0.3s;
    -ms-transition: 0.3s; 
    transition: 0.3s ease-in; 
    animation: animate 10s linear infinite;
}

.square:hover span:nth-child(3){ 
    border: none; 
    background: rgb(255, 0, 128);
}


@keyframes animate{
    0%
    {
        transform: rotate(0deg);
    }
    100%
    {
        transform: rotate(360deg);
    }
}
@keyframes animate2{
        0%
        {
            transform: rotate(360deg);
        }
        100%
        {
            transform: rotate(0deg);
        }
}


.textds{
    position: relative; 
    padding: 40px 50px; 
   color: #695b5b;
    /* color: #574b4b; */
    text-align: center;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -o-transition: 0.3s;
    -ms-transition: 0.3s;
    transition: 0.3s ease-in; 
    z-index: 1; 
    font-family:'saira',sans-serif ; 
    overflow: hidden;
}
.square .textds:hover h2{
    color: #fff;
}
.square .textds:hover p{
    color: #fbff04;
    font-weight: bold;
    letter-spacing: 2px;
}

.textds p{color:deeppink; letter-spacing: 2px;}

/* ---- square part ends here ---- ********/


/**  --  STUDX  animation text box   --  **/
.contx{
    display: flex;
    align-items: center;
    justify-content: center;
    transform-style: preserve-3d;
    gap: 10px;
    margin-bottom: 110px;

}
.contx .tetx{
    position: relative;
    width: 60px;
    height: 60px;
    transform-style: preserve-3d;
    transition: 2.5s ease-in-out;
    transition-delay: calc(0.25s * var(--j));
}

.contx .tetx span{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(#9d1f45,#eb4a7a);

    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 20px;
    transform-style: preserve-3d;
    transform: rotateX(calc(90deg * var(--i))) translateZ(30px);     
}

.contx .tetx::before{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background: #781f44;
    transform-origin: left;
    transform: rotateY(90deg) translateX(-30px);  
}

.contx .tetx:last-child span{
    background :linear-gradient(#5d2536, #f11f5e);   
}   
.contx:hover .tetx{
    transform: rotateX(-360deg);
}

.contx:hover .tetx:last-child{
    transform: rotateX(630deg);
}

/**   -- studx Home  part1 ends here  --   **/



/**  --- studx  PRODUCT  part --- page2 -- stats here  --- **/
.headerp{
    background:  #9a3a68;  
    font-family: 'saira',sans-serif;
    width: 100%; 
    margin: auto; 
    display: block; 
    position: relative;
    top: 0px; 
    z-index: 9; 
    align-items: center;
    
}

.roww{ display: flex; flex-wrap: wrap;}

.v-center{align-items: center;}
.headerp .item-left{ display: flex; flex: 0 0 15%; }
.headerp .item-center{display: flex; flex: 0 0 84%;}
.headerp .item-right{display: flex; flex: 0 0 1%; justify-content: flex-end;}

.headerp .plogo{padding: 0 0 0 20px;}

.headerp .plogo a{
    display: flex; 
    color: #FFF; 
    font-size: 20px; 
    font-weight: 300;
    letter-spacing: 2px; 
    padding: 0px 0px;
    text-transform: capitalize; 
    text-decoration: none;
}
.headerp .mennu .menu-main{ 
    list-style: none; 
    margin: 0;
    padding: 12px 0px 10px 45px;
}
    
.headerp .mennu .menu-main .menuu-item{ 
    display: inline-block; 
    margin-left: 23px;

}
.headerp .mennu .menu-main .menuu-item > a{
    letter-spacing: 2px;
}

.headerp .mennu .menu-main .menuu-item > a{ 
    font-size: 18px; 
    font-weight: 200; 
    color: #FFBEEF;
    text-decoration: none;
    letter-spacing: 0px; 
    text-transform: capitalize; 
    transition: color 0.3s ease; 
    padding: 6px 0px 3px 15px;
    
}

.headerp .mennu .menu-main .menuu-item:hover > a{color: #fff;}

.headerp .item-right > a{
    text-decoration: none; 
    font-size: 20px; 
    color: #FFF; 
    display: none; 
    cursor: pointer;
    align-items: center;
}

/*** PLUS ****/

.headerp .mennu .menu-main > .menuu-item > a .plus{
    display: inline-block; 
    height: 12px; 
    width: 12px; 
    position: relative;
    margin-left: 5px; 
    padding: 10px 0px 0px 0px;
}

.headerp .mennu .menu-main > .menuu-item > a .plus:before,
.headerp .mennu .menu-main > .menuu-item > a .plus:after{
    content: ''; 
    position: absolute; 
    box-sizing: border-box; 
    left: 50%; 
    top: 50%; 
    background-color:#FFBEEF; 
    height: 2px; 
    width: 100%; 
    transform: translate(-50%,-50%);
    transition: all 0.3s ease;
}

.headerp .mennu .menu-main > .menuu-item > a .plus:after{
    transform: translate(-50%,-50%) rotate(-90deg);}

.headerp .mennu .menu-main > .menu-item-has-children:hover > a .plus:after{
    transform: translate(-50%,-50%) rotate(0deg);
}
/***** PLUS END *****/


/***** mega menu items box *******/
.headerp .mennu .menu-main .menuu-item > .mega-column-4{
    display:flex; 
    flex-wrap: wrap; 
    z-index: 500; 
    background-color: #fff;  
    box-shadow:0 0 10px rgba(0, 0, 0, 0.2); 
    left: 0;
    top: 100%; 
    padding: 10px 0px; 
    border-top: 3px solid #fa42cc; 
    transform: translateY(10px); 
    transition: all 0.3s ease; 
    border-bottom: 4px solid #00d0f5;  
    visibility:hidden; 
    opacity: 0; 
    width: 530px; 
    padding: 10px 15px; 
    height: 530px; 
    position: absolute; 
    margin-left: 233px;
}

.headerp .mennu .menu-main .menuu-item > .design-column-menu{
    display:flex; 
    flex-wrap: wrap; 
    z-index: 500; 
    background-color: #fff; 
    box-shadow:0 0 10px rgba(0, 0, 0, 0.2); 
    left: 0;
    top: 100%; 
    padding: 10px 0px; 
    border-top: 3px solid #fa42cc; 
    transform: translateY(10px); 
    transition: all 0.3s ease; 
    border-bottom: 4px solid #00d0f5;  
    visibility: hidden; 
    opacity: 0; 
    width: 400px; 
    padding: 10px 15px; 
    height: auto; 
    position: absolute; 
    margin-left: 350px;
}

.headerp .mennu .menu-main > .menuu-item > .dev-column-menu{
    position: absolute; 
    z-index: 500; 
    background-color: #FFF; 
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    left: 0; 
    top: 100%; 
    padding: 10px 0px;
    border-top: 3px solid #fa42cc; 
    transform: translateY(10px); 
    transition: all 0.3s ease; 
    border-bottom: 4px solid #00d0f5;  
    visibility: hidden; 
    opacity: 0;
    width: 360px; 
    display:flex ; 
    flex-wrap: wrap; 
    padding: 10px 15px; 
    height: auto; 
    margin-left:472px;
}

.headerp .mennu .menu-main > .menuu-item > .single-column-menu{
    position: absolute; 
    z-index: 500; 
    background-color: #FFF; 
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
    left:151; 
    top: 100%; 
    padding: 10px 0px;
    border-top: 3px solid #fa42cc; 
    transform: translateY(10px); 
    transition: all 0.3s ease; 
    border-bottom: 4px solid #00d0f5; 
    visibility: hidden; 
    opacity: 0;
    width:140px; 
    margin-left: 13px; 
    display: flex;
}

.headerp .mennu .menu-main > .menu-item-has-children:hover > .mega-column-4,
.headerp .mennu .menu-main > .menu-item-has-children:hover > .design-column-menu,
.headerp .mennu .menu-main > .menu-item-has-children:hover > .dev-column-menu, 
.headerp .mennu .menu-main > .menu-item-has-children:hover > .single-column-menu{
        transform: translateY(0); 
        opacity: 1; 
        visibility: visible;    
}

            
.headerp .mennu .menu-main > .menuu-item > .mega-column-4 .listitem{ flex: 0 0 25%; padding: 0px 15px;}    
.headerp .mennu .menu-main > .menuu-item > .mega-column-4 .listitem .tit-le{
    color: #fa42cc; 
    font-weight: bolder; 
    line-height: 1; 
    padding: 0 0 2px 0px; 
    font-family:'saira',sans-serif;
}

.headerp .mennu .menu-main > .menuu-item > .design-column-menu .listitem,
.headerp .mennu .menu-main > .menuu-item > .dev-column-menu .listitem{ 
    flex: 0 0 50%; padding: 0px 0px;}

.headerp .mennu .menu-main > .menuu-item > .mega-column-4 > .listitem > ul{padding-left: 0px;}
.headerp .mennu .menu-main > .menuu-item > .design-column-menu > .listitem > ul,
.headerp .mennu .menu-main > .menuu-item > .dev-column-menu > .listitem > ul{
    padding-left: 10px;}

.headerp .mennu .menu-main > .menuu-item > .mega-column-4 > .listitem > ul .menuu-item,
.headerp .mennu .menu-main > .menuu-item > .design-column-menu > .listitem > ul .menuu-item, 
.headerp .mennu .menu-main > .menuu-item > .dev-column-menu > .listitem > ul .menuu-item,
.headerp .mennu .menu-main > .menuu-item > .single-column-menu > .listitem > ul .menuu-item{
    display: block; margin-left: 0px;}

.headerp .mennu .menu-main > .menuu-item > .mega-column-4 > .listitem > ul > .menuu-item > a,
.headerp .mennu .menu-main > .menuu-item > .design-column-menu > .listitem > ul > .menuu-item > a,
.headerp .mennu .menu-main > .menuu-item > .dev-column-menu > .listitem > ul > .menuu-item > a{
    display: inline-block; 
    padding: 10px 0 2px 0; 
    font-size: 14px; 
    font-weight: 300; 
    /*color: #283442; */
    /*color: #202a35; */
    color: #000;
    text-decoration: none; 
    transition: color 1s ease; 
    transition: transform 1s ease;
}

.headerp .mennu .menu-main > .menuu-item > .single-column-menu > .listitem > ul > .menuu-item > a{
    display: block; 
    padding: 6px 36px 6px 0px; 
    font-size: 14px; 
    color: #000; 
    font-weight: 300; 
    text-decoration: none; 
    text-transform: capitalize; 
    transition: transform 1s ease;
}

.headerp .mennu .menu-main > .menuu-item > .mega-column-4 > .listitem > ul > .menuu-item:hover > a,
.headerp .mennu .menu-main > .menuu-item > .design-column-menu > .listitem > ul > .menuu-item:hover > a,
.headerp .mennu .menu-main > .menuu-item > .dev-column-menu > .listitem > ul > .menuu-item:hover > a,
.headerp .mennu .menu-main > .menuu-item > .single-column-menu > .listitem > ul > .menuu-item:hover > a{
    color: #e91e63;}

.headerp .mennu .menu-main > .menuu-item > .mega-column-4 > .listitem > ul > .menuu-item:hover > a,    
.headerp .mennu .menu-main > .menuu-item > .design-column-menu > .listitem > ul > .menuu-item:hover > a,
.headerp .mennu .menu-main > .menuu-item > .dev-column-menu > .listitem > ul > .menuu-item > a:hover,
.headerp .mennu .menu-main > .menuu-item > .single-column-menu > .listitem > ul > .menuu-item > a:hover{
    transform: scale(1.2);}


/******* Banner PRODUCT  *******/

.sunlight{
    display: flex;
    width: 100%;
    height: 610px;
    background: #e7d7e8;
    background: linear-gradient(#e7d7e8 ,#e6acc2);    
}
.mount{
    width: 1000px;
    height: 606px;
    opacity: calc(18%);
    
    /*
     visibility: hidden; */

    background-position: center;
    background-size: cover;
    background-repeat: no-repeat; 
       
}

.pinkdarkbox{
    display: flex;
    width: 100%;
    height: 32px;
    background-image: linear-gradient(#c58e8d,#fff);
    margin-bottom: 12px;
    z-index: 1111;
}

/*----   PROUDCT page ends here   ----*/

/*** ---- studx part page2 banner ends here  ---- ***/

/****       STUDX BOX      ****/


/*******  2nd Part line / row ends here   ******/



.hr-style{ 
    border: 6px double #b13434;  
    border-bottom: none;
    width: 10%;
    margin: 0 auto; 
    margin-bottom: 5px;
}

.section-title h6{
    font: weight 100px; 
    margin-bottom: 5px;
    letter-spacing: 2px; 
    color: #202a35;
    font-weight: bolder;

}

/* lighting starts here */

.lightinga{
    margin: 0; 
    padding: 0;}

.lightinga P{
    font-family:'saira',sans-serif; 
    color: deeppink; 
    font-size: 24px; 
    margin-bottom: 0px; 
    text-indent: 20px; 
    letter-spacing: 2px;
    padding-top: 16px; 
    font-weight: bold;}

.lightinga ul{
    position:absolute; 
    display: flex; 
    margin: 0 auto; 
    padding: 0px 0px 5px 0px; 
    margin-top: -35px; 
    margin-left: 35px; 
    margin-bottom: 0px;}

.lightinga ul li{
    list-style: none; 
    width: 15px; 
    height: 15px; 
    background: #666; 
    border-radius: 50%; 
    animation: animate3 1.6s ease-in-out infinite;}

@keyframes animate3
{
    0%, 40%, 100% 
    {
    transform : scale(0.2);
    }
    20%
    {
    transform : scale(1);
    }
}
.lightinga ul li:nth-child(1)
{
    animation-delay: -1.4s;
    background: #f062f0;
    box-shadow: 0 0 50px #f062f0;
}
.lightinga ul li:nth-child(2)
{
    animation-delay: -1.2s;
    background: #ec0865;
    box-shadow: 0 0 50px #ec0865;
    
}
.lightinga ul li:nth-child(3)
{
    animation-delay: -1s;
    background:#FF3562;
    box-shadow: 0 0 50px #FF3562;
}
.lightinga ul li:nth-child(4)
{
    animation-delay: -0.8s;
    background: #9e1ef3;
    box-shadow: 0 0 50px #1e2cf3;
}
.lightinga ul li:nth-child(5)
{
    animation-delay: -0.6s;
    background: #00d0f5;
    box-shadow: 0 0 50px #00d0f5;
}
.lightinga ul li:nth-child(6)
{
    animation-delay: -0.4s;
    background: #fff;
    box-shadow: 0 0 50px #00d0f5;
}
.lightinga ul li:nth-child(7)
{
    animation-delay: -0.2s;
    background: #fff;
    box-shadow: 0 0 50px white;
}

hi P{
    font-family:'saira',sans-serif; 
    color: deeppink; 
    font-size: 24px;
}

/*----------------- studx text part -------------------*/

.stextpart p{ 
    font-family:'saira',sans-serif; 
    font-size: 20px; 
    color: #000;
    letter-spacing: 2px;
    line-height: 36px; 
    font-weight: 500; 
    align-items: center;
    justify-content: center; 
}

.stextpart p span{ 
    color: deeppink; 
    font-size: 18px; 
    font-weight: 600;
}

.join p{
    font-family:'saira',sans-serif; 
    font-size: 18px; 
    letter-spacing: 2px; 
    font-weight: 600; 
    justify-content: center; 
    align-items: center;
    color: #000;
}

.join p span{ 
    color: deeppink; 
    font-size: 18px; 
    font-weight: bold;
}

.stextpart2 p{
    font-family:'saira',sans-serif; 
    font-size: 18px;
     /* color: #202a35; */
     /* color: #12171d; */
     color: #000;   
    letter-spacing: 2px;
    line-height: 35px; 
    font-weight: 500; 
    text-align: justify;
    padding:0px 69px 0px 69px; 
    text-indent: 40px;
}

.stextpart2 p span{
    color: deeppink; 
    font-size: 18px; 
    font-weight: bold;
}

.midla{ 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    padding: 40px 0px 30px 0px;
}
/***  ----   studx part ends here   ----    ***/

/**   --  stand part starts here  --  ***/
.std {
    position: relative; 
    width: 160px; 
    height: 60px; 
    left: 20px; 
    transform-style: preserve-3d; 
    transform: perspective(500px) rotateY(25deg);  
    transition: 2s; 
    margin-bottom: 30px; 
    animation-name: animate4;
    animation-duration: 4s;
    animation-delay: 1s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

.std span{
    position: absolute; 
    top: 0px; 
    left: 0px; 
    font-size: 24px;
    font-family: 'saira',sans-serif; 
    width: 100%; 
    height: 100%; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    color: #FFF; 
    box-sizing: border-box; 
    background: #e75c5c;
    letter-spacing: 2px;
}

.std span:nth-child(1){
    transform: translateZ(20px); 
    border-left: 6px solid #e6acc2; 
    border-right: 6px solid #e6acc2;
}

.std span:nth-child(4){
    transform: translateZ(-20px); 
    border-left: 6px solid #e6acc2; 
    border-right: 6px solid #e6acc2;
}
.std span:nth-child(2),
.std span:nth-child(3){
    width: 40px; 
    height: 100%; 
    background: #a30d47;
}
    
.std span:nth-child(2){
    transform: rotateY(90deg) translateZ(-20px);
}

.std span:nth-child(3){
    transform: rotateY(90deg) translateZ(140px);
}

@keyframes animate4 {
    0%
     {
        transform: rotatey(0deg);
    } 
    100%
     {
        transform: rotatey(360deg);
    }
}

.pandgr{
    margin-bottom: 25px;
}
/********  stand textpart here  ********/

.standpart1 {
    font-family:'saira',sans-serif; 
    font-size: 20px; 
    letter-spacing: 2px;
    line-height: 40px; 
    font-weight: 300; 
    text-align: justify; 
    padding:0px 69px 5px 69px; 
    text-indent: 40px;
    
}
.standpart1 p{
    color: #000;
}
.standpart1  p span{
    color:rgb(255, 20, 147); 
    font-size: 18px; 
    font-weight: bold;
}


.standrow1{ 
    padding: 10px 0px 20px 36px;
}
.standrow2{ 
    padding: 10px 0px 20px 36px;
}

.stpart1 p{
    display: flex; 
    font-family:'saira',sans-serif;
    font-weight: bolder; 
    letter-spacing: 2px;
    line-height: 30px; 
    padding-left: 34px; 
    font-size: 18px;
}

.sticon p{
    padding: 0px 0px 0px 28px; 
    display: flex;
    font-family:'saira',sans-serif; 
    font-size: 16px; 
    letter-spacing: 2px; 
    font-weight:300; 
    text-indent: 0px;
    color: #000000;
}

.sticon  #prm {
    color: #4d4d56;
    /*color: #4f4f57;*/
    /*color: #7f7f83; */
    font-size: 15px; 
    font-weight: bolder;
    letter-spacing: 2px;
    font-family:'saira',sans-serif; 
} 

.sticon i {
    color: rgb(245, 6, 134);
    margin: 0px 8px 0px 12px;
}

/********  stand part-2 | starts here  ********/

.km{
    position: sticky;
    margin-top: 20px;
    top: 2100px;
    right: 0px;
    display: flex;
    align-items: center;
    justify-content: right;
}
.km a{ 
    text-decoration: none;}

.km a span{ 
    padding: 8px;
    position: relative;
    transition: .5s;
    }
.km a span:nth-child(1){
    color: #fff;
    background:#010718;
}
.km a span:nth-child(2){
    color: #fff;
    background: #b42857;
}
 a span:nth-child(1)::before{
    content: attr(data-attr);
    padding: 8px;
    position: absolute;
    top:0;
    left:0;
    background: #b42857;
    transform-origin: top;
    transform: rotatex(90deg) translateY(-50%);
    transition: .5s;
}
 a:hover span:nth-child(1)::before{
    transform: rotatex(0deg) translateY(0%);
}
a span:nth-child(2)::before{
    content: attr(data-attr);
    padding: 8px;
    position: absolute;
    top:0;
    left:0;
    background:#010718;
    transform-origin: bottom;
    transform: rotatex(90deg) translateY(50%);
    transition: .5s;
}
 a:hover span:nth-child(2)::before{
    transform: rotatex(0deg) translateY(0%);
}

a span:nth-child(1)::after{
    content: attr(data-attr);
    padding: 8px;
    position: absolute;
    top:0;
    left:0;
    background:#010718;
    transform-origin: bottom;
    transform: rotatex(0deg) translateY(0%);
    transition: .5s;
}
a:hover span:nth-child(1)::after{
    transform: rotatex(90deg) translateY(50%); 
}

a span:nth-child(2)::after{
    content: attr(data-attr);
    padding: 8px;
    position: absolute;
    top:0;
    left:0;
    background: #b42857;
    transform-origin: top;
    transform: rotatex(0deg) translateY(0%);
    transition: .5s;
}
a:hover span:nth-child(2)::after{
    transform: rotatex(90deg) translateY(-50%); 
}

.midlatwo{ 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    padding: 40px 0px 30px 0px;
}

/***  ---- stand part ends here  ----  ***/


/***  ----    savvy starts here ----  ***/

#SAVVY{ margin: 0px;}

.svybox{ 
    width: 165px;
    height: 50px;
    margin-left: 20px;
    margin-bottom: 18px;
    background-color: #fa94bc;
    /* background-color: lightpink; */
    box-shadow:inset 1px -1px 2px rgba(0, 0, 0, 0.2),
                2px 18px 10px rgba(0, 0, 0, 0.2);}
    
.svybox h3{
    position: relative;
    color: rgb(18, 13, 97);
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    margin: 0;
    font-family: 'saira',sans-serif;
    font-weight: 300;
    padding: 5px 24px;
    text-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
} 

.svybox h3 span{
    display: inline-block;
    position: relative;
} 

.svybox h3 span:nth-child(3){
    color: #fff;
    animation: anisavy 3s alternate infinite;
} 
    @keyframes anisavy{
        0%
            {
            transform: translateY(0px) rotate(0deg);
            }
        40%
            {
            transform: translateY(0px) rotate(0deg);
            }
        50%
            {
            transform: translateY(-8px) rotate(180deg);
            }
        60%
            {
            transform: translateY(0px) rotate(360deg);
            }
        100%
            {
            transform: translateY(-8px) rotate(360deg);
            }
        }

.svybox h3 span:nth-child(1){
    animation: anisavy 3s alternate infinite;
    animation-delay: 0.1s;}
.svybox h3 span:nth-child(2){
    animation: anisavy 3s alternate infinite;
    animation-delay: 0.2s;}
.svybox h3 span:nth-child(4){
    animation: anisavy 3s alternate infinite;
    animation-delay: 0.3s;}
.svybox h3 span:nth-child(5){
    animation: anisavy 3s alternate infinite;
    animation-delay: 0.4s}

/******** savvy box part starts here  **********/

/*******  savvy typing part starts here  **********/

.typetext{
    min-height: 60px;
    width: 100%; 
    /* background: #010718; */
    background: #777;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
} 

.typetext .textty{
    position: absolute;
    /* color:#4070f4; */
    color: #fff;
    font-size: 20px; 
    text-transform: uppercase; 
    font-family: 'saira',sans-serif ;
    margin-right: 10px;
    margin-top: 0px;
    font-weight: 300;
}

.typetext .textty.first-text{
    color: #fff;
} 

.textty.sec-text:before{
    content:'';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;  
    /* background-color: #010718; */
    background-color: #777;
    border-left: 2px solid deeppink;
    animation: anitype 4s steps(12) infinite;
} 
    
@keyframes anitype{
    40%, 60% {
        left: calc(100% + 11px);
    }
     100% {
        left: 0%;
    }
}
/******* savvy typing text part ends here  ******** /

/******  savvy cotainer2 box starts here  ********/

.container2{
    max-width: 1000px;
    margin: auto;
    background-color: #fff;
    box-shadow: 1px 0px 4px 0px #666;
    overflow: hidden;
    padding: 0px 0px; 
    margin-bottom: 0px;
}

.rowsv{
    display: flex; 
    justify-content: center;
    align-items: center; 
    min-height: 15vh;
    padding-top: 10px; 
    background: lightpink;
}

.rowsv ul{
    position:relative; 
    display:flex; 
    gap:25px; 
    justify-content: center; 
    align-items: center;
}
    
.rowsv ul li{
    position: relative; 
    display:flex; 
    list-style: none; 
    width: 60px; 
    height: 60px; 
    background: #fff; 
    box-shadow: 0 16px 5px rgba(0, 0, 0,0.1); 
    border-radius: 60px; 
    cursor: pointer; 
    justify-content: center; 
    align-items: center; 
    transition: 0.5s;
} 

.rowsv ul li:hover{
    width: 280px; 
    box-shadow:0 16px 5px rgba(0, 0, 0,0);
} 

.rowsv ul li::before{
    content: ''; 
    position: absolute; 
    inset: 0; 
    border-radius: 60px; 
    background: linear-gradient(45deg,var(--i),var(--j));
    opacity: 0; 
    transition: 0.5s;
} 

.rowsv ul li:hover::before{opacity:1;}

.rowsv ul li::after{
    content: ''; 
    top: 10px; 
    position: absolute; 
    width: 100%; 
    height: 100%; 
    border-radius: 60px; 
    background: linear-gradient(45deg,var(--i),var(--j));
    transition: 0.5s; 
    filter: blur(15px); 
    z-index: -1; 
    opacity: 0;
} 

.rowsv ul li:hover::after{
    opacity: 0.5;
} 

.rowsv ul li ion-icon{
    color: #777; 
    font-size: 1.75rem; 
    transition: 0.5s; 
    transition-delay:0.25s;
} 

.rowsv ul li:hover ion-icon{
    transform: scale(0); 
    color: #fff; 
    transition-delay: 0s;
}
 
.rowsv ul li span{
    position: absolute;
} 

.rowsv ul li .title{
    color: #fff; 
    font-size: 1.1em; 
    text-transform: uppercase; 
    letter-spacing: 0.1em; 
    transform: scale(0); 
    transition: 0.5s; 
    transition-delay: 0s;
} 

.rowsv ul li:hover .title{
    transform: scale(1); 
    transition-delay: 0.25s;
} 
.sykdarkbox{
    display: flex;
    width: 100%;
    height: 32px;
    background-image:linear-gradient(lightpink,white);
    margin-bottom: 12px;
} 
    
/**** ----  savvy part ends here  ---- ****/

/***  scope part starts here  ***/

#SCOPE{ margin-top: 50px;}

.scopr1 p{
    font-family:'saira',sans-serif; 
    font-size: 20px; 
    letter-spacing: 2px;
    line-height: 40px; 
    font-weight: 300; 
    text-align: justify; 
    padding:50px 69px 5px 69px; 
    text-indent: 40px;
    margin-bottom: 65px;
    color: #000;
} 

.scopr1 p span{
    color: deeppink; 
    font-weight: bold;
}

.sbox1{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: 26px;
} 
.sbox1 ul{
    list-style: none;
    padding-left: 0px;
} 

.sbox1 ul li a{
    position: relative;
    width: 232px;
    height: 34px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'saira',sans-serif;
    letter-spacing: 0px;
    margin: 4px 0px;
    font-size: 12px;
    color: #000;
    text-decoration: none;
    border-radius: 8px 8px 0px 0px;
    box-shadow:inset 1px -1px 2px rgba(0, 0, 0, 0.2),
                     2px 2px 5px rgba(0, 0, 0, 0.2);
    transition: 0.3s;
} 

.sbox1 ul li a:hover{
    transform: translatex(-30px);
    font-size: 20px;
    box-shadow:inset 1px -1px 2px rgba(0, 0, 0, 0.2),
                2px 24px 10px rgba(0, 0, 0, 0.2);
} 

.sbox1 ul li:nth-child(1) a{
    background:#525050; 
    font-size: px; 
    color: #fff; 
    transform: translatey(-0px);
} 

.sbox1 ul li:nth-child(2) a{
    background:#E9F1F7;}
.sbox1 ul li:nth-child(3) a{
    background:#E9F1F7;}
.sbox1 ul li:nth-child(4) a{
    background:#E9F1F7;}
.sbox1 ul li:nth-child(5) a{
    background:#E9F1F7;}
.sbox1 ul li:nth-child(6) a{
    background:#D8FFDD;}               
.sbox1 ul li:nth-child(7) a{
    background:#E9F1F7;}
    

.sbox2{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: -34px;
} 

.sbox2 ul{ list-style: none;}

.sbox2 ul li a{
    position: relative;
    width: 232px;
    height: 34px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'saira',sans-serif;
    letter-spacing: 0px;
    margin: 4px 0px;
    font-size: 12px;
    color: #000;
    text-decoration: none;
    border-radius: 8px 8px 0px 0px;
    box-shadow:inset 1px -1px 2px rgba(0, 0, 0, 0.2),
                     2px 2px 5px rgba(0, 0, 0, 0.2);
    transition: 0.3s;
} 

.sbox2 ul li a:hover{
    transform: translatex(-30px) rotateX('0deg');
    font-size: 17px;
    box-shadow:inset 1px -1px 2px rgba(0, 0, 0, 0.2),
                2px 24px 10px rgba(0, 0, 0, 0.2);
} 

.sbox2 ul li:nth-child(1) a{
    background-image:linear-gradient(to top,#e2cdd4 , white 4% , #e9abc0);}

.sbox2 ul li:nth-child(2) a{
    background:#f5f3e8;}
.sbox2 ul li:nth-child(3) a{
    background:#f5f3e8;}
.sbox2 ul li:nth-child(4) a{
    background:#f5f3e8;}
.sbox2 ul li:nth-child(5) a{
    background:#f5f3e8;}
.sbox2 ul li:nth-child(6) a{
    background:#f5f3e8;}
.sbox2 ul li:nth-child(7) a{
    background:#f5f3e8;}


.sbox3{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-left: -30px;
} 

.sbox3 ul{ list-style: none;}

.sbox3 ul li a{
    position: relative;
    width: 232px;
    height: 34px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: 'saira',sans-serif;
    letter-spacing: 0px;
    margin: 4px 0px;
    font-size: 12px;
    color: #000;
    text-decoration: none;
    border-radius: 8px 8px 0px 0px;
    box-shadow:inset 1px -1px 2px rgba(0, 0, 0, 0.2),
                     2px 2px 5px rgba(0, 0, 0, 0.2);
    transition: 0.3s;
} 

.sbox3 ul li a:hover{
    transform: translatex(-30px);
    font-size: 17px;
    box-shadow:inset 1px -1px 2px rgba(0, 0, 0, 0.2),
                2px 24px 10px rgba(0, 0, 0, 0.2);
} 

.sbox3 ul li:nth-child(1) a{
    background:#525050; 
    color: #fff;
    transform: translatey(-0px);
} 

.sbox3 ul li:nth-child(2) a{
    background:#E9F1F7;}      
.sbox3 ul li:nth-child(3) a{
    background:#E9F1F7;}    
.sbox3 ul li:nth-child(4) a{
    background:#E9F1F7;}    
.sbox3 ul li:nth-child(5) a{
    background:#E9F1F7;}  
.sbox3 ul li:nth-child(6) a{
    background:#D8FFDD;}               
.sbox3 ul li:nth-child(7) a{
    background:#E9F1F7;}

.midlathree{ 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    padding: 40px 0px 30px 0px;
}
    
/*****  ----  scope part ends here  ------- ******/

/**** ------  space part starts here -----  *********/

.countryInD{ 
    width: 100%;
    height: 36px;
    background-color: #061541;
    /* background-color: #bab2b2; */
    margin-top: 24px;   
} 

.countryInD p{
    font-size: 18px;
    font-weight: 300;
    color: #fff;
    letter-spacing: 2px;
    padding: 5px 10px 3px 45px;
} 

/***********  space part starts here  **************/

.country{ 
    width: 100%;
    height: 36px;
    background-color: #061541;
    margin-top: 24px;    
} 

.country p{
    font-size: 18px;
    font-weight: 300;
    color: #fff;
    letter-spacing: 2px;
    padding: 5px 10px 3px 45px;
} 

/* ******** space header part ******** */

.headerzx{
    position: sticky;
    left: 0;
    top: 4255px;
    width: 100%;
    z-index: 1000;
}

.containerzx{
    max-width: 1000px;
    margin: auto;
    padding: 1px 15px;
    background-color: #fff;
    z-index: 1000;
}

.headerzx .containerzx{
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 1px 1px 10px #999;
}

.headerzx .menuzx ul{
    list-style: none;
    margin-bottom: 2px;
    padding-left: 0px;
    
}
.headerzx .menuzx > ul > li{
    display: inline-block;
}
.headerzx .menuzx > ul > li:not(:last-child){
    margin-right: 50px;
}
.headerzx .menuzx .dropdownz{
    position: relative;

}
.headerzx .menuzx ul li a{
    color: #f500c0;
    font-size: 16px;   
}

.headerzx .menuzx ul li:hover a{
    color: #000;   
}

.headerzx .menuzx a{
    text-decoration: none;
    color: #fff;
    line-height: 1.5;
    letter-spacing: 1px;
    display: block;
    transition: 0.5s;
}
.headerzx .menuzx > ul > li > a{
    padding-right: 25px;
    
}
.headerzx .menuzx > ul .dropdownz > a{
    padding-right: 35px;
}
.headerzx .menuzx svg{
    pointer-events: none;
    user-select: none;
    position: absolute;
    top: 7px;   
}
.headerzx .menuzx > ul > li > svg{
    right: 10px;
    top: 12px;
}

.headerzx .menuzx .sub-menuz{
    position: absolute;
    top: 100%;
    left: 0;
    width: 166px;
    padding: 2px 0px;
    background-color: #FFF;
    box-shadow: 0px 0px 5px #666;
    z-index: 1;
    transform-origin: left;
    transform: scalex(0);
    visibility: hidden;
    opacity: 0;
}
.headerzx .menuzx .sub-menuz-right{
    left: 100%;
    top: 0;
}
.headerzx .menuzx .sub-menuz-left{
    top: 0;
    left: auto;
    right: 100%;
}

.headerzx .menuzx li:hover > .sub-menuz{
    opacity: 1;
    transform: none;
    visibility: visible;
    transition: all 0.5s ease;
}
.headerzx .menuzx .sub-menuz a{
    padding: 5px 4px 5px  10px;
    border-radius: 0px 0px;
    text-align: left;
}
.headerzx .menuzx .sub-menuz svg{
    transform: rotate(-90deg);
    right: 10px;
    top: 11px;
}
.headerzx .menuzx .sub-menuz li:hover > a{
    /*background-color:  rgb(241, 193, 193);*/
    background-color: #eed0d0;
    color: #000;
}

/**********  image part *********/
.hero {
    display: flex;
    top: 0px;
    left: 0;
    height: 465px;
     background-image: linear-gradient(rgb(233, 232, 232) 5%, #fff 20%);    
}
.hero img{
    margin: 0 auto;
    display: none;
}

/********** Gobal part **************/

.blackbox{
    display: flex;
    max-width: 1000px;
    background-color: #061541;
    height: 36px;
} 
.blackbox p{
    color: #FFF;
    font-size: 18px;
    font-weight: 300;
    position: absolute;
    padding: 5px 0px 1px 44px;
    margin-bottom: 0;
    text-transform: capitalize;
    letter-spacing: 2px;
}
.containerzx2{
    max-width: 1000px;
    margin: auto;
    padding: 1px 15px;
    background-color: #fff;
    z-index: 1000;
}



.jone{
    display: flex;
    width: 100%;
    height: 265px;
    margin-bottom: 0px;
}

.jone p{
    /* color: #182139; */
    color: #e935e0;
    font-size: 18PX;
    font-weight: bolder;
    align-items: center;
    letter-spacing: 0PX;
    padding: 285px 0px 0px 108px;
    margin-bottom: 1rem;
}


.midlafour{ 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    padding: 40px 0px 30px 0px;
}

/****  ----------   Global part  ends here   ---------  *******/

/*********   service part box 1   **********/
.fotbox{
    display: flex;
    width: 100%;
    height: 238px;
    background-color: #fcfcfc;
    backdrop-filter: blue(8px);
    padding: 0px 0px 25px 0px;
    margin: 40px 0px 40px 0px;
}
.fotm p{
    display: flex;
    align-items: center;
    padding-left: 131px;
    padding-top: 16px;
    color:#100977;
    font-size: 15px;
    font-weight: bold;
    letter-spacing: 2px;
}
.fotmenu{
    display: flex;
    align-items: center;   
}
.fotmenu ul{ 
    margin: 0px;
    padding-left: 131px;}

.fotmenu ul li{
    list-style: none;
    
}
.fotmenu ul li a{
    text-decoration: none;
    color: #000;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: 300;
    letter-spacing: 2px;
    padding: 6px 0px 10px 0px;
    line-height: 6px;
    text-transform: capitalize;
    transition: 0.5s ease;   
}

.fotmenu ul li a:hover{
    color:#100977;
    font-weight: bold;
    padding-left: 9px;    
}

/**** 2nd part ******/

.fots P{
    display: flex;
    align-items: center;
    padding-top: 16px;
    padding-left: 34px;
    color: #e6129f;
    font-size: 15px;
    font-weight: bold;
    letter-spacing: 2px;  
}

.fotserv{
    display: flex;
    align-items: center;
}
.fotserv ul{
    margin: 0px 0px;
    padding-left: 34px;
}
.fotserv ul li{
    list-style: none;
}
.fotserv ul li a{
    text-decoration: none;
    color: #000000;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14px;
    font-weight: 300;
    letter-spacing: 2px;
    line-height: 6px;
    text-transform: capitalize;
    text-align: left;
    transition: 0.5s ease;   
}
.fotserv ul li a:hover{
    color:#e6129f;
    font-weight: bold;
    padding-left: 13px;   
}

/****** 3rd part ********/

.fotleg P{
    display: flex;
    align-items: center;
    padding-top: 16px;
    padding-left: 32px;
    color: red;
    font-size: 15px;
    font-weight: bold;
    letter-spacing: 2px;
    line-height: 3;
    
}
.flegal Ul{
    margin: 0px -12px;
    padding-left: 45px; 
}
.flegal ul li{
    list-style: none; 
}
.flegal ul li a{
    text-decoration: none;
    color: #000000;
    font-size: 14px;
    font-family: Arial, Helvetica, sans-serif;
    font-weight: 300;
    letter-spacing: 2px;
    line-height: 6px;
    text-transform: capitalize;
    text-align: left;
    transition: 0.5s ease;
}
.flegal ul li a:hover{
    color:#e61212;
    font-weight: bold;
    padding-left: 14px; 
}


/*********   Form part box 1   **********/

.footerfour{
    display: flex;
    /* background: #c26173; */
    /* background: #fff; */
    /* background: #eee7e7; */
    width: 100%;
    height: 464px;
    margin: 40px 0px 50px 0px;
    position: relative;
}

.rightoask{
    width: 50%;
    margin: 0 auto;
}
.rightoask p{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 10px 0px 26px 0px;
    color: #000;
    text-transform: capitalize;
    font-weight: bolder;
    letter-spacing: 2px;   
}

/*=========== profile area oval =============== */

.profile-area{
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 300px;
    padding: 05px 0px 0px 0px;
}
.profile-area .outer-circle{
    width: 300px;
    height: 300px;
    border: 1px solid #666;
    border-radius: 50%;
    position: relative;
    animation: move 30s linear infinite
}
@keyframes move{
    to{
      transform: rotate(360deg);
    }
}
  
.profile-area .outer-circle span{
    display: block;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    position: absolute;
    background: #fff;
    color: lightcoral;
    font-size: 23px;
    display: flex;
    align-items: center;
    justify-content: center;   
}
  
.profile-area .outer-circle span .ion-icon{
    font-size: 38px;
}
.profile-area .outer-circle span:nth-child(1){
    left: 125px;
    top: -25px; 
}
.profile-area .outer-circle span:nth-child(2){
    right: -25px;
    top: 125px;
}
.profile-area .outer-circle span:nth-child(3){
    left: -25px;
    top: 125px;
}
.profile-area .outer-circle span:nth-child(4){
    bottom:-25px;
    left: 125px;
}

/********** Right to ask now shadow part  *************/

.fourcolors{
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100%;
}

.fourbgcolor {
    position: relative;
    top: -345px;
    left: 94px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.fourbgcolor span{
    position: absolute;
    top: 75px;
    /* left: 123px; */
    width: 80px;
    height: 80px;
    display: block;
    background: #000;
    border-radius: 50%;
    transform-origin: 125px 0;
    transform: rotate(calc(90deg * var(--i)));
    filter: blur(80px);
    opacity: 0.75;
}

.fourbgcolor span:nth-child(1)
{
    background: #01b2fe;
    /* background: #0497f8; */
    /* background: #04f839; */
}
.fourbgcolor span:nth-child(2)
{
    background: #ff008c;
}
.fourbgcolor span:nth-child(3)
{
    background: #ffcd00;
}
.fourbgcolor span:nth-child(4)
{
    background: #00c456;
}

/********** Right to ask now  part  *************/

.now h1{
    margin: -477px auto;
    text-align: center;
    font-size: 40px; 
    border-style: 2px salid;
    font-weight: bold;
    transition: .5s;
    /* text-shadow: 0 1px 0 #f14444 , 0 2px 0 #f14444 , 0 3px 0 #f14444 , 0 4px 0 #f14444 ,0 5px 0 #f14444 , 0 6px 0 #f14444 , 0 7px 0 #f14444 , 0 8px 0 #f14444 , 0 9px 0 #f14444 , 0 10px 0 #f14444 , 0 11px 0 #f14444 ,0 12px 0 #f14444 , 0 13px 0 #f14444 , 0 14px 0 #f14444 , 0 15px 0 #f14444  ; */
}
.dropwater{
    position: relative;
    margin: 350px auto;
    width: 200px;
    height: 200px;
    box-shadow: inset 10px 10px 10px rgb(0,0,0,0.05),
    15px 25px 10px rgb(0,0,0,0.05),
    15px 20px 20px rgb(0,0,0,0.05),
    inset -10px -10px 15px rgba(255, 255, 255, 0.9);
    border-radius: 50%;
    box-shadow: 0px 20px 15px #666;   
}

/******* moving text starts here *********/

.movingtext{
    display: flex;
    align-items: center;
    justify-items: center;
    position: absolute;
    background: #FFF;
    white-space: nowrap;
    width: 358px;
    height: 35px;
    top:420px;
    margin-left: 108px;
    overflow: hidden;
}
.movingtext p{
    display: inline-block;
    margin: 30px 0px;
    width: 358px;
    height: 26px;
    color: #666;
    color: #504e4e;
    color: #474444;
    color: #000;
    font-weight: 300;
    animation: mobe 20s linear infinite;
}
.movingtext p span{
    color: deeppink;
    font-weight: bold;
}
 @keyframes mobe{
    0%{
        transform: translateX(0%);
    }
    100%{
        transform: translateX(-100%);
    }
}   
.blur-left{
    position: absolute;
    top: 0;
    left: 0;
    height: 26px;
    width: 60px;
    background:linear-gradient(to left,transparent,white);
    z-index: 1;
}
.blur-right{
    position: absolute;
    top: 0;
    right: 0;
    height: 26px;
    width: 60px;
    background: linear-gradient(to right,transparent,white);
}

/***  --------------------------------------------  ***/

/******** Get In Touch part ************/

/*------------ gmail box --------------------*/

.gtboxm{
    width: 50%;
    margin: 0 auto;
}
.gtboxm p{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 10px 0px 26px 0px;
    color: #000;
    text-transform: capitalize;
    font-weight: bolder;
    letter-spacing: 2px;   
}

.Contact-left{
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 100%;
    gap: 20px;   
}

.contact-input{
    width: 295px;
    height: 50px;
    background: transparent;
    border: 2px solid #796a72;
    border-radius: 6px;
    outline: none;
    padding-left: 25px;
    color: black;
    margin-left: 0 auto;
}

.contact-input::placeholder{
    color: #666;
}

.Contact-left textarea{
    height: 120px;
    padding-top: 15px;
    border-radius: 6px;
}

.contact-input:focus{
    border: 2px solid #f802a6;
}

.Contact-left button{
    display: flex;
    align-items: center;
    width: 150px;
    padding: 5px 50px;
    margin: 0px 0px 0px 150px;
    color: #fff;
    letter-spacing: 2px;
    border: none;
    outline: none;
    text-transform: uppercase;
    border-radius: 6px;
    background-color: #f802a6;
    cursor: pointer;
    transition: 1s linear;
    overflow: hidden;
    position: relative;
    z-index: 1;
}

.Contact-left button:hover{
    color: #fff;
    background:  #02adfc;
    transition: 1s linear;
    box-shadow: inset 200px 000 #02adfc;
}

/******* -------------------------------- *******/
.pslastline{ 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    padding: 0px 0px 40px 0px;
}
.lightpink{
    width: 100%;
    height: 4px;
    /* background-color:#eccccc; */
    background-color:#706d6d;
    margin: 40px 0px 0px 0px;
    box-sizing: border-box;
    box-shadow: 0 3px 2px 0.5px #9e9e9e;
    border-radius: 0 0 6px 6px;
}

/****************************************************************/
/****************************************************************/

.bgbrown{
    margin: 40px  0px 0px 0px;
    padding: 0;
    width: 1000px;
    height: 400px;
    /* background:#eccccc; */
    position: relative; 
    display: flex;
}
.bgbrown .svcard{
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    margin-top: 0px;   
}
.bgbrown .svcard .face{
    width: 250px;
    height: 200px;
    transition: 0.5s;
}
/*  ------------------------------  */
.bgbrown .svcard .face.face1{
    position: relative;
    background: #333;
    margin: 0px 0px 0px 65px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    transform: translateY(-100px);
}
.bgbrown .svcard:hover .face.face1{
    background: #ff0057;
    transform: translateY(-100px); 
}
.bgbrown .svcard .face.face1 .conft .imgft{
    max-width: 35px;
    display: flex;
    color: white;
    margin: 0 auto;
}
.bgbrown .svcard .face.face1 .conft .pri{
    color: white;
    text-align: justify;
    font-weight: 300;
    font-size: 28px;
}
.bgbrown .svcard .face.face1 .conft{
    opacity: 0.2;
    transition: 0.5s;
}
.bgbrown .svcard:hover .face.face1 .conft{
    opacity: 1;
    
}

/*  ------------F! Ends here------------------  */


/*  ------------F2 Starts here ------------------  */
.bgbrown .svcard .face.face21{
    position: relative;
    background: #333;
    margin: 0px 0px 0px 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    transform: translateY(-100px);
}

.bgbrown .svcard:hover .face.face21{
    background: #D64550;
    transform: translateY(-100px); 
}
.bgbrown .svcard .face.face21 .conft .imgft{
    max-width: 35px;
    display: flex;
    color: white;
    margin: 0 auto;
}
.bgbrown .svcard .face.face21 .conft .pri{
    color: white;
    text-align: justify;
    font-weight: 300;
    font-size: 28px;
}
.bgbrown .svcard .face.face21 .conft{
    opacity: 0.2;
    transition: 0.5s;
}
.bgbrown .svcard:hover .face.face21 .conft{
    opacity: 1;
}

.bgbrown .svcard .face.face2two{
    position: relative;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
    box-shadow: 0 3px 2px 0.5px rgba(0, 0, 0);
    border-radius: 0 0 6px 6px;
    transform: translateY(-100px);
    margin: 100px 0px 100px -250px;
}
.bgbrown .svcard:hover .face.face2two{
    box-shadow: 01 03px 4px  0.5px rgb(49, 49, 49); 
    border-radius: 0 0 6px 6px;
    margin: 299px 0px 100px -250px;
    transform: translateY(0px);
}
/*  ------------------------------  */

/*  ------------------------------  */

.bgbrown .svcard .face.face1 .conft .imgft{
    max-width: 35px;
    display: flex;
    color: white;
    margin: 0 auto;
}
.bgbrown .svcard .face.face1 .conft .pri{
    color: white;
    text-align: center;
    font-size: 28px;
}

.bgbrown .svcard:hover .face.face1 .conft{
    opacity: 1;
}

.bgbrown .svcard .face.face1 .conft .imgft{
     max-width: 35px; 
} 

 .bgbrown .svcard .face.face2{
    position: relative;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
    box-shadow: 0 3px 2px 0.5px rgba(0, 0, 0);
    border-radius: 0 0 6px 6px;
    transform: translateY(-100px);
    margin: 100px 0px 100px -250px;
} 

.bgbrown .svcard .face.face2 .conft p{
    margin: 0px 0px 0px 0px;
    padding: 0;
    font-weight: bolder;
    color: #061541; 
    letter-spacing: 1px;
    line-height:1.8; font-size: 13px;     
}

.bgbrown .svcard:hover .face.face2{
    box-shadow: 01 03px 4px  0.5px rgb(49, 49, 49); 
    border-radius: 0 0 6px 6px;
    margin: 299px 0px 100px -250px;
    transform: translateY(0px);
}

.bgbrown .svcard .face.face2 .conft p .conven{font-size: 15px; font-weight: 300; color: #04133f; }

/*  ------------F3 Starts here ------------------  */

.bgbrown .svcard .face.face23{
    position: relative;
    background: #333;
    margin: 0px 0px 0px 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
    transform: translateY(-100px);
}
.bgbrown .svcard:hover .face.face.face23{
    /* background: #ff0057; */
    background:#FF69EB;
    transform: translateY(-100px); 
}
.bgbrown .svcard .face.face23 .conft .imgft{
    max-width: 35px;
    display: flex;
    color: white;
    margin: 0 auto;
}
.bgbrown .svcard .face.face23 .conft .pri{
    color: white;
    text-align: justify;
    font-weight: 300;
    font-size: 28px;
}
.bgbrown .svcard .face.face23 .conft{
    opacity: 0.2;
    transition: 0.5s;
}
.bgbrown .svcard:hover .face.face23 .conft{
    opacity: 1;
}

.bgbrown .svcard .face.face2two .conft p{
    margin: 0px 0px 0px 0px;
    padding: 0;
    font-weight: bolder;
    color: #3a0911; 
    letter-spacing: 1px;
    line-height:1.8; font-size: 13px;     
}

/* ----------------------------------------------------------- */

.bgbrown .svcard .face.face2three{
    position: relative;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
    box-shadow: 0 3px 2px 0.5px rgba(0, 0, 0);
    /* box-shadow: 1px 1px 18px 0.5px #000; */
    border-radius: 0 0 6px 6px;
    transform: translateY(-100px);
    margin :100px 0px 100px -250px;
}
.bgbrown .svcard:hover .face.face2three{
    /* box-shadow: 0 3px 20px rgba(0, 0, 0, 0.2); */
    box-shadow: 01 03px 4px  0.5px rgb(49, 49, 49); 
    /* box-shadow: 1px 1px 18px 0.5px #333; */
    border-radius: 0 0 6px 6px;
    margin: 299px 0px 100px -250px;
    transform: translateY(0px);
}

.bgbrown .svcard .face.face2three .conft p{
    margin: 0px 0px 0px 0px;
    padding: 0;
    font-weight: bolder;
    color: #2a2b2b; 
    letter-spacing: 1px;
    line-height:1.8; font-size: 13px;     
}

/******** Grab it now text *********/
.ginow{
    position: relative;
    margin-top: 950px;
    top: 40%;
    left: 40%;
    width: 473px;
    height: 130px;
    transform: translate(-40%, -40%);
}

.ginow .face{
    position: relative;
    width: 300px;
    height: 70px;
    font-size: 50px;
    text-align: center;
    line-height: 70px;
    overflow: hidden;    
}

.ginow .face span{
    width: 100%;
    height: 100%;
    display: block;
    transition: .5s;
}
.ginow .face.face1{
    background: #d80045;
    color: #fff;
    transform-origin: left;
    left: 0;
    transform: perspective(601px) rotateY(-53.2deg);
}

.ginow .face.face2{
    background: #F10044;
    color: #fff;
    transform-origin: right;
    top: -70px;
    right: 0;
    left: 298px;
    transform: perspective(601px) rotateY(53.2deg);
}

.ginow .face.face1 span{
    position: relative;
    animation: animatez 10s linear infinite;
}
@keyframes animatez{
    0%{
        left: 200%;
    }
    100%{
        left: -100%;
    }
}

.ginow .face.face2 span{
    position: relative;
    animation: animatez2 10s linear infinite;
}
@keyframes animatez2{
    0%{
        left: 100%;
    }
    100%{
        left: -200%;
    }
}


/******* moving text starts here *********/
.mqtext{
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    top: 0;
    left: 0;
}
.movtext{
    position: absolute;
    top: 404px;
    left: 0;
}

.mqtext marquee p{
    position: relative;
    color: #e61212;
    white-space: nowrap;
    letter-spacing: 2px;
    font-size: 18px;
    z-index: -0;
}
.blur-leftz{
    position: absolute;
    top: 0;
    left: 0;
    height: 36px;
    width: 60px;
    background:linear-gradient(to left,white,transparent);
    /* border: 1px solid red; */
    z-index: 222;

}
.blur-rightz{
    position: absolute;
    top: 0;
    right: 0;
    height: 36px;
    width: 60px;
    background:linear-gradient(to right,transparent,white);
    /* border: 1px solid red; */
    z-index: 222;
}

.midlalastline{ 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    padding: 0px 0px 10px 0px;
}

/*------------ gmail box after part  --------------------*/

.fourcolors{
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100%;
}

.fourbgcolor {
    position: relative;
    /* top: 386px; */
    top: -435px;
    left: 94px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1;
}

.fourbgcolor span{
    position: absolute;
    top: 75px;
    /* left: 123px; */
    width: 80px;
    height: 80px;
    display: block;
    background: #000;
    border-radius: 50%;
    transform-origin: 125px 0;
    transform: rotate(calc(90deg * var(--i)));
    filter: blur(80px);
    opacity: 0.75;
}

.fourbgcolor span:nth-child(1)
{
    background: #01b2fe;
    /* background: #0497f8; */
    /* background: #04f839; */
}
.fourbgcolor span:nth-child(2)
{
    background: #ff008c;
}
.fourbgcolor span:nth-child(3)
{
    background: #ffcd00;
}
.fourbgcolor span:nth-child(4)
{
    background: #00c456;
}

/**************************  anoter text *********/
.ginow{
    position: relative;
    margin-top: 160px;
    top: 40%;
    left: 40%;
    width: 473px;
    height: 130px;
    transform: translate(-40%, -40%);
}

.ginow .face{
    position: relative;
    width: 300px;
    height: 70px;
    font-size: 50px;
    text-align: center;
    line-height: 70px;
    overflow: hidden;    
}

.ginow .face span{
    width: 100%;
    height: 100%;
    display: block;
    transition: .5s;
}
.ginow .face.face1{
    background: #d80045;
    color: #fff;
    transform-origin: left;
    left: 0;
    transform: perspective(601px) rotateY(-53.2deg);
}


.ginow .face.face2{
    background: #F10044;
    color: #fff;
    transform-origin: right;
    top: -70px;
    right: 0;
    left: 298px;
    transform: perspective(601px) rotateY(53.2deg);
}

.ginow .face.face1 span{
    position: relative;
    animation: animatez 10s linear infinite;
}
@keyframes animatez{
    0%{
        left: 200%;
    }
    100%{
        left: -100%;
    }
}

.ginow .face.face2 span{
    position: relative;
    animation: animatez2 10s linear infinite;
}
@keyframes animatez2{
    0%{
        left: 100%;
    }
    100%{
        left: -200%;
    }
}

/****************************************************/

.logo44{
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 8px 0px 0px 0px;  
  }

/****************************************************/
.copyy p{
    display: flex;
    align-items: center;
    justify-content: center;
    color:#333;
    font-weight: 300;
    padding:15px 0px 0px 0px;
    letter-spacing: 2px;
    font-weight: bold;
}
.copyy p span{
    color: #d80045;
    position: relative;
    left: 10px;
    margin-right: 17px;
    font-weight: 300;
    font-weight: bold;
} 

/****************************************************/
.to-top{
    background: #b42857;
    border: 3px solid #ee8a8a;
    position: fixed;
    bottom: 16px;
    right: 32px;
    width: 30px;
    height: 30px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #f1f1f1;
    text-decoration: none;
    opacity: 1;
    cursor: pointer;
    transition: all .4s;
    z-index: 1000;
}
.to-top:hover{color: #f1f1f1;}
.to-top.active{
    bottom: 32px;
    pointer-events: auto;
    opacity: 0;
}

hr{
    display: block;
    position: relative;
    margin: 0px 0px 0px 0px;
    border-style: inset;
    unicode-bidi: isolate;
    border: 1px solid #e0dbdb;
    opacity: 1;
}

/*------------- Big  or full Screen -----------------*/


@media (min-width:992px) and (max-width:2561px){

    .row{ 
        border: 6px salid red; 
        margin: 0px 0px;}

    .logorow{
        margin: 0px 0px; 
        display: flex;}

    .mainbar{
        display: flex; 
        padding: 0px 0px 0px 80px;}

    .menu-items{
        top: -100px;
        -webkit-transition: 0.3s ease-in-out;
        -o-transition: 0.3s ease-in-out;
        -moz-transition: 0.3s ease-in-out;
        -ms-transition: 0.3s ease-in-out;
        transition: 0.3s ease-in-out;
    }
    .menu-items.open{ 
        top: 0px;
        -webkit-transition: 0.3s ease-in-out;
        -o-transition: 0.3s ease-in-out;
        -moz-transition: 0.3s ease-in-out;
        -ms-transition: 0.3s ease-in-out;
        transition: 0.3s ease-in-out; 
    }

    #humb{
        padding: 45px 0px 0px 110px; 
        display: flex;}

}

@media (min-width:768px) and (max-width:991px){

    .row{ border: 6px salid red; margin: 0px 0px;}
    .logorow{display: flex;}

    #logo{margin: 39px 0px 0px 20px;}

    .mainbar{padding: 0px 0px 0px 43px;}

    #humb{padding: 35px 0px 0px 65px;}

    .sbox1 {
    margin-left: 15px;}

    .sbox3 {
    margin-left: -17px;}

    .movingtext {
    margin-left: 20px;
    overflow: hidden;}

    .headerzx .menuzx > ul > li:not(:last-child){
        margin-right: 22px;
    }
    .headerp .mennu .menu-main .menuu-item > .mega-column-4{
    display: flex;
    flex-wrap: wrap;
    z-index: 500;
    background-color: #fff;
    box-shadow: 0 0 10px rgb(0 0 0 / 20%);
    left: 0;
    top: 100%;
    padding: 10px 0px;
    border-top: 3px solid #fa42cc;
    transform: translateY(10px);
    transition: all 0.3s ease;
    border-bottom: 4px solid #00d0f5;
    visibility: hidden;
    opacity: 0;
    width: 530px;
    padding: 10px 15px;
    height: 530px;
    position: absolute;
    margin-left: 194px;
    }
    .headerp .mennu .menu-main .menuu-item > .design-column-menu{
        margin-left: 313px;
    }
    .headerp .mennu .menu-main > .menuu-item > .dev-column-menu{
        margin-left: 432px;
    }
    .headerp .mennu .menu-main > .menuu-item > .single-column-menu{
        margin-left: 13px;
    } */

    /*------------- serve -------------*/
    .bgbrown{
        margin: 40px 0px 0px 0px;
        padding: 0;
        width: 768px;
        height: 400px;
        position: relative;
        display: flex;
    }
    .bgbrown .svcard .face.face1 {
        margin: 0px 0px 0px 0px;
    }
    
    
    .bgbrown .svcard .face.face21{
    position: relative;
    background: #333;
    margin: 0px 0px 0px 3px;
    display: flex;
    }
    
    .bgbrown .svcard .face.face23{
        position: relative;
        background: #333;
        margin: 0px 0px 0px 3px;
    }
}



/* @media (min-width:576px) and (max-width:767px){
    .row{ border: 6px salid red; margin: 0px 0px;}
    .logorow{padding: 0px 0px 0px 0px;}

    #logo{display:flex; margin: 0px 0px 0px 10px;}

    #humb{padding: 0px 16px 5px 0px;}

}  */


@media (min-width:230px) and (max-width:575px){

    .row{ border: 6px salid red; 
        margin: 0px 0px; 
        padding: 0px 0px;}

    .logorow{width: 50%;}

    #logo{ display:none;}

    #moblogo{display:flex; 
        margin: 10px 0px 0px 0px; 
        padding: 0px 10px; 
        position:static;}

    .mainbar{
        position: absolute; 
        top: 80px;}

    .menu-items{
        flex-direction: column; 
        border-radius: 0px 0px; 
        padding: 0xp 0px;
        justify-content: space-around; 
        align-items: center;
        position: absolute;
        background-color: #5a4d70; 
        color: #fff;
        top: 1px; 
        left: -100dvw; 
        right:0; 
        z-index: 1000;
        height: 60vw; 
        width: 100%; 
        transition: 0.3s ease-in-out;}
        
    .menu-items.open{ left: 0;}

    .menu-items li{
        width: 100vw; 
        height: 100%;}

    .menu-items li a{
        background-color:#5a4d70; 
        color: #fff; 
        justify-content: center; 
        align-items: center; 
        display: flex; 
        width: 100%; 
        height: 100%;}

    .menu-items li a:hover{ 
        background-color:deeppink; 
        color: #fff;
        border-radius: 0px 0px 0px 0px; 
        transition: background 0.3s ease-in-out , 
        color 0.3s ease-in-out;
        -webkit-transition: background 0.3s ease-in-out , color 0.3s ease-in-out;}

    #humb{ 
        padding: 0px 52px 15px 0px; 
        justify-content: end; 
        align-items: end;}

    /******* 2nd part *******/

    .intro .square{
        margin-top: 30px; 
        position: relative; 
        top: 10px;}
    .square span:nth-child(1){
        border: none;
        background: rgba(255, 96, 255);}
    .square span:nth-child(2){
        border: none;
        background: rgba(191, 0, 255);}
    .square span:nth-child(3){
        border: none;
        background: rgb(255, 0, 128);}
    .square .textds h2{
        color: #fff;}
    .square .textds p{
        color: #fbff04; 
        font-weight: bold;
        letter-spacing: 2px;}

    /****** First Part ends here *********/

    /****** Product Part *********/
    .roww{ flex-direction: column; align-items: center;}
    .headerp .item-left {width: 100%; padding: 10px 0px 0px 0px;}
    .headerp .plogo a{font-size: 20px;}
    .headerp .item-center {width: 100%;}
    .headerp .mennu .menu-main{padding: 0px 0px;}
    .headerp .mennu .menu-main .menuu-item{display: flex; flex-direction: column; flex-wrap: wrap;}
    .headerp .mennu .menu-main .menuu-item > a {text-align: left;}
    .headerp .mennu .menu-main .menuu-item > .mega-column-4{
        margin-left:0px; width: 320px; padding:10px 6px;}
    .headerp .mennu .menu-main > .menuu-item > .mega-column-4 .listitem {padding: 0px 1px;}
    .headerp .mennu .menu-main > .menuu-item > .mega-column-4 > .listitem > ul > .menuu-item > a{
        font-size: 12px;}
    .headerp .mennu .menu-main .menuu-item > .design-column-menu{ margin-left: 0px; width: 280px;}
    .headerp .mennu .menu-main > .menuu-item > .dev-column-menu{margin-left: 0px; width: 280px;}

    /******* studex line statrs here **********/
    .stextpart2 p{
        padding: 0px 20px 5px 20px;}


    /******* Stand line starts here ********/
    .standpart1 {padding: 0px 20px 5px 20px;}



    /******* Savvy line starts here *******/
    .typetext .textty {
        position: absolute;
        /* color: #4070f4; */
        color: #fff;
        font-size: 20px;
        text-transform: uppercase;
        font-family: 'saira',sans-serif;
        margin-right: 10px;
        margin-top: 0px;
        font-weight: 300;}



    /******* scope line starts here ********/
    .scopr1 p {
        padding: 40px 20px 5px 20px;}

    .sbox1{
        flex-direction: column;
        margin: 0px 0px 0px 105px;}
    .sbox2{ 
        flex-direction: column;
        margin-left: 86px;}
            
    .sbox3{ 
        flex-direction: column;
        margin: 0px 0px 0px 84px;}


    /******* Space line starts here *******/

    .headerzx{
        position: sticky;
        left: 1px;
        top: 4260px;
        width: 120px;
        z-index: 1000;
    }
    .hero {
        display: flex;
        position: relative;
        top: -235px;
        left: 1px;
        width: auto;
        height: 455px;
    }

    .containerzx{ 
        background-color: #fff;
        z-index: 1000;
    }
    .headerzx .containerzx{
        flex-direction: column;
        box-shadow: 1px 1px 10px #999;
    }
    .headerzx .menuzx .sub-menuz {
        width: 126px;
    }
    .headerzx .menuzx .sub-menuz svg {
        right: 5px; top:20px;
    }

    .headerzx .menuzx .sub-menuz .sub-menuz-right {
        width: 170px;
    }

    .headerzx .menuzx .sub-menuz .sub-menuz-right .sub-menuz-bottom {
        left: 22px; top: 50px;
    }
    
    .headerzx .menuzx > ul .dropdownz > a {
        padding-right: 0px;
    }

    .headerzx .menuzx > ul > li:not(:last-child) {
        margin-right: 0px;
    }
    .headerzx .menuzx a {
        line-height: 50px;
    }
    .headerzx .menuzx > ul > li > svg {
        right: -20px; 
        top: 20px;
    }
    .headerzx .menuzx .sub-menuz li:hover > a{
        background-color:  rgb(241, 193, 193);
        color: #000;
        width: 165px;
    }
    .headerzx .menuzx .sub-menuz a{
        width: 130px;
        padding: 0px 0px 0px 2px;
    }
    .headerzx .menuzx .sub-menuz .sub-menuz-right a{
       padding: 0px 0px 0px 8px;
    }
    .headerzx .menuzx .sub-menuz .sub-menuz-right{
        width: 160px;
        background-color:  rgb(241, 193, 193);
     }

    .headerzx .menuzx .sub-menuz .sub-menuz-right .sub-menuz-bottom{
        left: 25px;
        top: 50px;
        background-color:  rgb(243, 248, 196);   
    }
    
    .headerzx .menuzx .sub-menuz .sub-menuz-left{
        left: 110px;
        right: 300px;
    }
    .headerzx .menuzx .sub-menuz .sub-menuz-left .sub-menuz-bottom{
        left: 50px;
        top: 50px;
        background-color:  rgb(243, 248, 196); 
    }

    .blackbule {
        padding-top: 160px;
        
    }
    
    .jone p {
        color: #e935e0;
        font-size: 18PX;
        font-weight: bolder;
        align-items: center;
        letter-spacing: 0PX;
        padding: 680px 0px 0px 170px;
    }

    .midlafour {
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 380px 0px 30px 0px;
    }

    

    /*********** Space part ends here ************/
    

    /********** Serve part starts here *********/
    #SERVE{margin-top: 45px;}


    .servo{ width: 100%; height: 738px;}

    .bgbrown {
        margin: 40px 20px 900px -25px;    
    }
    
    
    .bgbrown .svcard .face.face21{
        margin: 200px 0px -640px -250px;
    }
    .bgbrown .svcard .face.face2two {
        margin: 200px 0px -640px -250px;
    }
    .bgbrown .svcard:hover .face.face2two{
        margin: 400px 0px -640px -250px;
    }



    .bgbrown .svcard .face.face23{
        margin: 1026px 0px -640px -250px;
    }

    .bgbrown .svcard .face.face2three{
        margin: 1366px 0px -300px -250px;
    }
    .bgbrown .svcard:hover .face.face2three{
        margin: 1566px 0px -300px -250px;
    }

    /********** Serve part starts here *********/
    .lightpink {
        margin: 0px 0px 0px 0px;
    }
    /**************************  anoter text *********/
    .ginow{
    position: relative;
    margin-top: 160px;
    top: 40%;
    left: 40%;
    width: 473px;
    height: 130px;
    transform: translate(-40%, -40%);
    }
    .ginow .face.face1{
        position: relative;
        
        left: 61px; 
        width: 170px;
        height: 70px;
        font-size: 50px;
        text-align: center;
        line-height: 70px;
        overflow: hidden;    
    }
    .ginow .face.face2{
        position: relative;
        justify-content: center;
        left: 153px;
        width: 170px;
        height: 70px;
        font-size: 50px;
        text-align: center;
        line-height: 70px;
        overflow: hidden;    
    }

    .fotbox{
        flex-direction: column;
        padding: 0px  0px 0px 0px;
        font-weight: bolder;
        margin: 28px 0px 0px 0px;
        background-color: #e8ecf2;
        height: 738px;
    }

    .fotm{width: 100%; height: 230px;}
    .fotm p{align-items: center; justify-content: center; padding-left: 0px;}
    .fotm ul{padding-left: 0px;}


    .fots{width: 100%; height: 230px;}
    .fots p{align-items: center; justify-content: center; padding-left: 0px;}
    .fots ul{padding-left: 0px;}
    .fotmenu {flex-direction: column; align-items: center; justify-content: center;}
    
    .fotserv {flex-direction: column; align-items: center; justify-content: center;}
    .fotserv ul{padding-left: 0px;}

    .fotleg{width: 100%; height: 230px;}
    .fotleg P{align-items: center; justify-content: center; padding-left: 0px;}
    .flegal{flex-direction: column; align-items: center; justify-content: center;}
    .flegal ul{margin: 0px 0px 0px 45px;}



    .formpage{padding-top: 0px;}
    .fourbgcolor {
        position: relative;
        top: -320px; 
        left: 94px;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 1;
    }
    .now h1 {
        margin: -467px auto;
        text-align: center;
        font-size: 40px;
    }
    .movingtext {
        margin-left: 0px;
    }
    .rightoask p {
        align-items: center;
        justify-content: center;
        width: 100%;
        margin: 10px 0px 26px 0px;
        color: #000;
        text-transform: capitalize;
        font-weight: bolder;
        letter-spacing: 2px;
    }
    .gtboxm p {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        margin: -84px 0px 26px 0px;
    }
    .pslastline {
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 490px 0px 0px 0px;
    }

    

    .footerfour {
        flex-direction: column;
         margin: 40px 0px 60px 0px;
    }
    .rightoask {width: 100%;}
    .rightoask p {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        margin: 10px 0px 26px 0px;
        color: #000;
        text-transform: capitalize;
        font-weight: bolder;
        letter-spacing: 2px;
    }

    .profile-area .outer-circle {
        width: 250px;
        height: 250px;}

    .movingtext {margin-left: 0px;}
    .gtboxm {width: 100%; height: 100%;}
    .gtboxm p{margin: -134px 0px 28spx 0px;}
    .lastline{ padding: 500px 0px 0px 0px;}

    .logo44{
        display: flex;
        align-items: center;
        justify-content: center;
        margin: 16px 0px 10px 0px;  
    }

    /********* to-top-btn starts here *****/
    .to-top-btn{
        position: fixed;
        bottom: 8px;
        right: 30px;
        border-radius: 50%;
        cursor: pointer;
        width: 30px;
        height: 30px;
        background: #b42857;
        border: 3px solid #ee8a8a;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #f1f1f1;

    }
    .to-top-btn:hover{
        color: #f1f1f1;
    }
    /********* to-top-btn ends here *****/
    
    hr{
        display: block;
        position: relative;
        margin: 0px 0px 0px 0px;
        border-style: inset;
        unicode-bidi: isolate;
        border: 0.1px solid #e0dbdb;
        opacity: 1;
    }
    
    
    .mqtext {padding-top: 800px;}
    .opento{padding-top: 0px 0px 0px 0px;}
    .opento span {color: #e91e63; position: relative;}
    
    .fotbox{
    display: flex;
    width: 100%;
    background-color: #e8ecf2;
   }
   .movingtext {
    display: flex;
    align-items: center;
    justify-items: center;
    position: absolute;
    background: #FFF;
    white-space: nowrap;
    width: 320px;}
}