@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;700&family=Bodoni+Moda:opsz,wght@6..96,400;6..96,500;6..96,600&family=Great+Vibes&family=Inter:wght@300;400;500;600;700;800&family=Libre+Bodoni:wght@400;500;600;700&family=PT+Serif:wght@400;700&family=Playfair+Display:wght@400;500;600;700;800;900&family=Poppins:wght@300;400;500;600;700;800;900&family=Public+Sans:ital,wght@0,200;0,300;0,400;0,500;0,700;1,400&family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Rancho&family=Roboto+Condensed:wght@400;700&family=Roboto+Mono:wght@300;400&family=Roboto:wght@500&family=Staatliches&family=Yeseva+One&display=swap');
@font-face{
    src: url(VECTOR_REGULAR_TTF.ttf);
    font-family: Vector;
}
@font-face{
    src: url(Blackpast.otf);
    font-family: blackpast;
}
::root{
    --bs-navbar-toggler-icon-bg-1:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2858, 78, 213, 1%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
*{
    margin: 0;
    padding: 0;
}
body{
    width: 100%;
    background: #000;
    display: flex;
    flex-direction: column;
    height:fit-content;
   
}
.header{
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(
        min(20rem,100%), 1fr));
    flex-wrap:wrap;
    height: 10dvh;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background: #fff;
    justify-content: space-evenly;
}
.header .header-child1{
    background: transparent;
    display: flex;
    justify-content:space-evenly;
    align-items: center;
}
.header-child1 a{
    text-decoration: none;
    color: #a586bc;
    letter-spacing: 1px;
    transition: .6s ease;
    
}
.header-child1 a:hover{
    color: #6f42c1;
}
.header .header-child2{
    background: transparent;
    display: flex;

    justify-content:center;
    align-items: center;
}
.header-child2 a{
    text-decoration: none;
    color: #a586bc;
    margin-left: 1.5rem;
    letter-spacing: 1px;
    transition: .6s ease;
}
.header-child2 a:hover{
    color: #6f42c1;
}
.mobile-nav-border {
    position:relative;
    z-index: 999;
        top: 0;
}
.navbar-sticky {
    position: sticky;
    z-index: 999;
    box-shadow: 0 2px 28px 0 rgba(0,0,0,.06);
    animation-name: fadein;
    animation-duration: .4s;
    top: 0;
}
@keyframes fadein{
    0%,50%{
        transform: translateY(-10px);
        opacity: 0;
    }
    100%{
        transform: translateY(0px);
        opacity: 1;

    }
}
.navbar-brand{
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: blackpast;
    
    gap: 0.5rem;
}
.head-logo{
    height: 2rem;
    width: 2rem;
    object-fit: contain;
}
.logo{
    color: transparent;
    background: linear-gradient(135deg,#f59e0b,#db2777);
    font-family: blackpast;
    font-size:1.2rem;
    font-weight: 600;
    -webkit-background-clip: text;
}
/* .logo .big{
    font-size: 1.5rem;
} */
.nav-img{
   
    height: 4.5rem;
    width: 4.5rem;
    aspect-ratio: 1/1;
    object-fit: contain;
}
.opti{
    font-family: 'Poppins',sans-serif;
    background: linear-gradient(135deg,#fff,#db2777);
    -webkit-background-clip: text;
    color: transparent;
    font-size: 1.3rem;
    font-weight: 600;
}
.navbar-nav .nav-item{
    position: relative;
    padding: 15px 0;

}
.navbar-nav .nav-item .nav-link{
    color: gray;
    opacity: 0.7;
    font-family: Vector;
    font-size: 0.93rem;
    height: fit-content;
    width: fit-content;
    display: flex;
    justify-content: start;
    align-items: first baseline;
    font-weight: 400;
    position: relative;
    padding: 0.8rem 0.8rem;
    transition: all .5s ease-in-out;
}
/* .navbar-nav .nav-item .nav-link:hover{
} */
.nav-item:hover .nav-link{
    color: transparent;
    background: linear-gradient(135deg,#db2777,#f59e0b);
    background-clip: text;
    opacity: 1;
}
.navbar-nav .nav-item .nav-link .nav-icon{
    font-size: 0.8rem;
}
.nav-item:hover  .nav-hover{
    opacity: 1;
    transform: translateY(0px);
    visibility: visible;
   
}
.nav-hover{
    width: fit-content;
    position: absolute;
    width: 14.375rem;
    padding: 1.25rem 1.56rem;
    display: flex;
    flex-direction: column;
    /* top: 80px; */
    visibility: hidden;
    gap: 0.5rem;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    z-index: 99;
    opacity: 0;
    transition: all .3s ease-in-out;
    transform: translateY(50px);
    background: #fff;
}
.nav-hover .nav-hover-first{
    color: transparent;
    background: linear-gradient(135deg,#db2777,#f59e0b);
    background-clip: text;
}
.nav-hover-link{
    color: #2a2a2a;
    transition: all .3s ease-in-out;
    text-decoration: none;
    font-family: Vector;
}
.nav-hover-link:hover{
    color: transparent;
    background: linear-gradient(135deg,#db2777,#f59e0b);
    background-clip: text;
}
/* .navbar-nav .nav-item .nav-link::after{
    content: '';
    position: absolute;
    left: 0;
    bottom: 0px;
    width: 100%;
    transition: .3s ease-in-out;
    height: 2px;
    transform: scaleX(0);
    background: linear-gradient(135deg,#f59e0b,#db2777);
}
.navbar-nav .nav-item .nav-link:hover::after{
   transform: scaleX(1);
} */
.navbar-nav .nav-item .active{
    color: #6610f2;
}
#active{
    color: transparent;
    opacity: 1;
    background: linear-gradient(135deg,#f59e0b,#db2777);
    -webkit-background-clip: text;

}
/* #active::after{
    content: '';
    position: absolute;
    left: 0;
    bottom: 0px;
    width: 100%;
    transition: .3s ease-in-out;
    height: 2px;
    transform: scaleX(1);
    background: linear-gradient(135deg,#f59e0b,#db2777);
} */
.navbar-toggler-i .toggle {
   background-image: none;
   color: transparent;
   font-size: 1.5rem;
   background: linear-gradient(to right,#db2777,#f59e0b);
   -webkit-background-clip: text;
}
.nav-right{
    display: flex;
    gap: 2rem;
}

.search-button{
    background: transparent;
    border: none;
    color: #fff;
    background: linear-gradient(to right,#db2777,#f59e0b);
    font-family: 'Poppins',sans-serif;
    font-size: 0.9rem;
    padding: 0.5rem 1.5rem;
    border-radius: 0.2rem;
}

.blob{
    /* background: linear-gradient(to right,rgb(245, 158, 11,0.05),rgb(245, 158, 11,0.05),rgb(219, 39, 119,0.05),rgb(219, 39, 119,0.05));  
    background-size: 400% 400%;
    backdrop-filter: blur(100px);
  
    animation: change 12s ease infinite; */
 
 background: #fff;
}
.service-main{
    width: 100%;
    height: fit-content;
    background: #eee;
    
      /* background: linear-gradient(to right,#db2777,#f59e0b,#db2777,#f59e0b);  
    background-size: 400% 400%;
    backdrop-filter: blur(100px);
  
    animation: change 12s ease infinite; */
    display: flex;
    padding: 3rem 1rem;
    flex-direction: column;
    justify-content: center;
   
    backdrop-filter: blur(20px);
    align-items: center;
    z-index: 0;
    margin-top: 0;
    position: relative;
    
}

.service-main::before{
    content:'';
    position: absolute;
    right: 0;
    bottom: 0%;
    /* transform: rotate(60deg); */
    opacity: 1;
    height: 10rem;
    z-index: 0;
    background:linear-gradient(135deg,#db2777,#f59e0b);
    border-top-left-radius: 50%;
    border-bottom-left-radius: 50%;
    width: 10rem;
}
.service-main::after{
    content:'';
    position: absolute;
    left: 0;
    top: 0%;
    transform: rotate(180deg);
    opacity: 1;
    height: 10rem;
    z-index: 0;
    background:linear-gradient(135deg,#db2777,#f59e0b);
    border-top-left-radius: 50%;
    border-bottom-left-radius: 50%;
    width: 10rem;
}
@keyframes change{
    0%,100%{
        background-position: 0% 50%;
    }
    50%{
        background-position: 100% 50%;
    }
}
.service-main .service-main-head-logo{
    width: fit-content;
    background: #fff;
    z-index: 1;
    padding: 1rem 1rem;
    position: relative;
    border-radius: 50%;
}
.service-main-head-logo .service-main-img{
    width: 4.5rem;
    height: 4.5rem;
    /* filter:brightness(0) invert(1); */
}
.service-main .service-main-head-heading{
    color: #2a2a2a;
    font-family: Vector;
    text-align: center;
    width: 100%;
    z-index: 1;
    margin-top: 4dvh;
    font-size:clamp(2.6rem,4vw,6rem);
}
.service-main .service-main-head-main{
    width: fit-content;
    text-align: center;
    z-index: 1;
    font-family: 'Poppins',sans-serif;
    font-size: 0.80rem;
    text-transform: capitalize;
    font-weight: 500;
    color: #2a2a2a;
    opacity: 0.7;
    /* font-family: Vector; */
}
.about-us{
    height: fit-content;
    width: 100%;
    background: url(templatemo_582_tale_seo_agency/assets/images/infos-bg.jpg);
    background-size: cover;
    background-position: center;
    position: relative;
    top: 0dvh;
    margin-top: 15dvh;
    left: 0;
    padding: 1rem 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background-repeat: no-repeat;
}
 .main-about{
    height: fit-content;
    width: 100%;
    /* background: url(templatemo_582_tale_seo_agency/assets/images/infos-bg.jpg); */
    background-size: cover;
    background-position: center;
    position: relative;
    top: 0dvh;
    margin-top: 15dvh;
    left: 0;
    padding: 1rem 1rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background-repeat: no-repeat;
    
}
.main-about .row{
    width: 100%;

    border-radius: 2rem;
    /* background: #fff; */
}
.row .left{
    background: transparent;
    background-size: contain;
    background-position: center;
    height:fit-content;
    background-repeat: no-repeat;
    background-position: center;
}
.left .about-img{
    max-width: 100%;
    /* height: 80dvh; */
    z-index: 10;
    object-fit: contain;
    aspect-ratio: 1/1;
}
.row .right{
    display: flex;
    flex-direction: column;
    padding: 1rem 1rem;
    justify-content: center;
   
    height: fit-content;
    align-items: center;

}
.right .right-sub-head{
        background: linear-gradient(135deg,#db2777, #f59e0b);
        -webkit-background-clip: text;
        color: transparent;
        font-weight: 500;
        font-size: 1rem;
        text-transform: capitalize;
        font-family: Vector;
        text-align: left;
        border-radius: 1rem;
        width: 100%;
    
}
.right .right-head{
  color: #2a2a2a;
  
    width: 100%;
    text-align: left;
    animation: gradient 1s ease-in-out linear infinite;
    font-weight: 500;
    font-family: Vector;
    position: relative;
    animation-duration: 1.5s;
  
}
.right-head::before{
    content: '';
    position: absolute;
    /* right: 3.1rem; */
    left: 0%;
    bottom: -0.5rem;
    width: 20%;
    height: 2px;
    margin: auto;
    opacity: 0.4;
    background: linear-gradient(to right,#db2777,#f59e0b);
}
.right-head::after{
    content: '';
    position: absolute;
  
   right: 72%;
   margin: 0 auto;
    bottom: -0.5rem;
    width: 7%;
    height: 2px;
    opacity: 0.9;
    background: linear-gradient(to left,#db2777,#f59e0b);
}
.right .right-main-txt{
    color: #2a2a2a;
    font-family: 'Poppins',sans-serif;
    text-transform: capitalize;
    margin-top: 3dvh;
    font-weight: 500;
    line-height: 1.4rem;
    font-size: 0.9rem;
}
.right-main-txt-brief{
    color: gray;
    opacity: 0.9;
    margin-top: 1rem;
    font-family: 'Poppins',sans-serif;
    font-weight: 400;
    font-size: 0.8rem;
}

.right .statistics{
    width: 100%;
    margin-top: 8dvh;
    display: flex;
    padding: 1rem 1rem;
    justify-content: left;
    gap: 30%;
    height: fit-content;
    align-items: center;
}
.statistics .projects-statistics{
    background: transparent;

    width: fit-content;
    height:fit-content,
}
.number{
    font-size:  clamp(1.4rem,4vw,3rem);
    background: linear-gradient(135deg,#db2777,#f59e0b);
    background-clip: text;
  
    color: transparent;
    font-weight: 500;
    font-family: Vector;
}
.plus{
    background: linear-gradient(135deg,#db2777,#f59e0b);
    background-clip: text;
    color: transparent;
}
.number-text{
   color: #2a2a2a;
 
   font-size: clamp(0.8rem,2vw,1rem);
   font-family: Vector;
   text-transform: capitalize;
   font-weight: 500;
 
}
.statistics .client-statistics{
    background: transparent;

    width: fit-content;
    height:fit-content,
}
.features{
    margin-top: 15dvh;
}
.features-box{
    height: fit-content;
    width: 100%;
    padding: 1rem 1rem;
    margin-top: 10dvh;
}
.features-boxes{
    width: 80%;
    height: fit-content;
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(min(20rem,100%), 1fr));
    place-items: center;
    }
.feature-left{
    display: flex;
    height: fit-content;
    margin-top: auto;
    width: 100%;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
}
.feature-left-sub{
    font-size: 1rem;
    background: linear-gradient(to right,#db2777,#f59e0b);
    color: transparent;
    font-family: Vector;
    background-clip: text;

}
.feature-left-head{
    color: #2a2a2a;
    width: fit-content;
    font-weight: 500;
    font-size:  clamp(1.5rem,2.7vw,2.5rem);
    position: relative;
    font-family: Vector;
}
.feature-left-head::before{
    content: '';
    position: absolute;
    /* right: 3.1rem; */
    left: 29%;
    bottom: -0.2rem;
    width: 30%;
    height: 2px;
    margin: auto;
    opacity: 0.4;
    background: linear-gradient(to right,#db2777,#f59e0b);
}
.feature-left-head::after{
    content: '';
    position: absolute;
  
   right: 29%;
   margin: 0 auto;
    bottom: -0.2rem;
    width: 10%;
    height: 2px;
    opacity: 0.9;
    background: linear-gradient(to left,#db2777,#f59e0b);
}
.feature-left-main{
    color: gray;
    font-family: 'Poppins',sans-serif;
    text-transform: capitalize;
    opacity: 0.8;
    margin-top: 3dvh;
    font-size: 0.8rem;
}
.details{
    width: 100%;
    margin-top: 3dvh;
    padding: 0.8rem 1.6rem;
    border: none;
    font-weight: 600;
    border-radius: 1.5rem;
    text-transform: capitalize;
    position: relative;
    color: #fff;
    font-size: 0.75rem;
    transition: .4s ease;
    background: linear-gradient(to right,#db2777,#f59e0b);
}
.details:hover{
    opacity: 0.7;
}
.feature-right{
    /* display: grid;
    grid-template-columns: repeat(auto-fit,minmax(
        min(15rem,100%), 1fr)); */
    height: fit-content;
    width: 100%;
    gap: 1rem;
    flex-direction: column;
}

.feature-right-box{
    min-height: 17rem;
    overflow: hidden;
    position: relative;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    display: block;
    flex-direction: column;
    justify-content: left;
    align-items: center;
    width: 100%;
    border-radius: 0.25rem;
    padding: 1rem 1rem;
    background: #fff;
    transition:.4s all ease;
    border: 1px solid #fff;
}
.feature-right-box:hover{
    transform: scale(1.05);
    border: 1px solid #db2777;
}
.feature-box-img-border{
    border: 2px dotted #db2777;
    height: fit-content;
    width: fit-content;

    padding: 1rem 1rem;
    border-radius: 50%;
}
.feature-box-img{
    color: #fff;
     transition: .7s ease-in-out;
     height: 2rem;
     width: 2rem;
     /* aspect-ratio: 1/1; */
     object-fit: contain;
     position: relative;
     z-index: 1;
  
 }
 .feature-box-head{
    font-size: 1rem;
    text-transform: capitalize;
    background: linear-gradient(135deg,#db2777,#f59e0b);
    background-clip: text;
    margin-top: 1rem;
    font-family: Vector;
    color: transparent;
 }
 .feature-box-main{
    color: gray;
    font-family: 'Poppins',sans-serif;
    opacity: 1;
    font-size: 0.8rem;
    text-transform: capitalize;
 }

.services{
    display: flex;
    flex-direction: column;
    flex-wrap:wrap;
    z-index: 0;
    position: relative;
    justify-content: center;
    align-items: center;
    top: 0dvh;
    margin-top: 10dvh;
    height: fit-content;
    padding: 1rem 1rem;
    width: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left;
}

.services .services-child2{
  background: transparent;
  display: flex;
  padding: 1rem 1rem;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  height: fit-content;
  width: 100%;
  gap: 0dvh;
  backdrop-filter: blur(1px);
    
}
.services-child2 .service-heading{
    color: #2a2a2a;
    text-align: center;
    font-family: Vector;
    animation: gradient 1s ease-in-out linear infinite;
    font-weight: 500;
    position: relative;
  
    	
/* -webkit-box-reflect: below -10px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(50%, transparent), to(rgba(255,255,255,0.2))); */

}
.service-heading::before{
    content: '';
    position: absolute;
    /* right: 3.1rem; */
    left: 29%;
    bottom: 0;
    width: 30%;
    height: 2px;
    margin: auto;
    opacity: 0.4;
    background: linear-gradient(to right,#db2777,#f59e0b);
}
.service-heading::after{
    content: '';
    position: absolute;
  
   right: 29%;
   margin: 0 auto;
    bottom: 0;
    width: 10%;
    height: 2px;
    opacity: 0.9;
    background: linear-gradient(to left,#db2777,#f59e0b);
}
.services-child2 .service-h3{
    background: linear-gradient(135deg,#db2777, #f59e0b);
    -webkit-background-clip: text;
    color: transparent;
    font-weight: 500;
    font-size: 1rem;
    text-transform: capitalize;
    font-family: Vector;
    text-align: center;
    border-radius: 1rem;
    width: 100%;
}
.services-child2 .service-boxes{
    width: 90%;
    height: fit-content;
display: grid;
gap: 2rem;
margin-top: 5dvh;
grid-template-columns: repeat(auto-fit,minmax(
        min(17rem,100%), 1fr));
}
.box{
    /* background: url(blob-2.gif); */
    background: #fff;
    background-repeat: no-repeat;
    background-position: bottom left;
    backdrop-filter: blur(6px);
    border: 1px solid #fff;
    border-radius: 0.25rem;
    transition: .4s ease-in-out;
    height: 15rem;
    display: flex;
    
    gap: 2rem;
  flex-direction: column;
    /* text-align: center; */
    padding: 1rem 1rem;
    position: relative;
    justify-content: start;
        box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    align-items: first baseline;
    overflow: hidden;
}
.box:hover{
    transform: scale(1.05);

}
/* .box:hover{
    transform: translateY(-30px);
    border-radius: 0.5rem;
}
.box:hover .box-i{
    background: transparent;
    border: 1px solid #fff;
}
.box:hover .box-i .box-icon{
    color: #fff;
}
.box:hover .box-text .box-h2{
    color: #fff;
}
.box:hover .box-text .service-box-main{
    color: #fff;
}
.box::before{
    content: '';
    background:#db2777;
    width: 100%;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    opacity: 0;
    transition: .5s ease-in-out;
}
.box:hover::before{
    opacity: 1;
} */

.box-i{
    width: fit-content;
    height: fit-content;
    border-radius: 50%;
    padding: 1rem 1rem;
    position: relative;
    border: 2px dotted #db2777;
    /* background: rgb(242, 242, 242,0.5); */
    
}
.box-i:hover .box-icon{
    color: #fff;

}
/* .box-i::before{
    content: '';
    width: 0%;
    height: 0%;
    background: linear-gradient(135deg,#f59e0b, #db2777);
    position: absolute;
    left: 50%;
    border-radius: 50%;
    transition: .3s ease-in-out;
    top: 50%;
    transform: translate(-50%,-50%);
} */
.box-i:hover::before{
    width: 100%;
    height: 100%;
}
/* .box-i:hover {
  background: linear-gradient(135deg,#f59e0b, #db2777);
}
.box-i:hover .box-icon{
  background: transparent;
  color: #eee;
} */
.box-i .box-icon{
   color: #fff;
    transition: .7s ease-in-out;
    height: 2.5rem;
    width: 2.5rem;
    /* aspect-ratio: 1/1; */
    object-fit: contain;
    position: relative;
    z-index: 1;
 
}
.box .box-text{
    height: fit-content;
    width: fit-content;
    display: flex;
    flex-direction: column;
    justify-content: left;
    align-items: center;
    gap: 0rem;
}
.box-text .box-h2{
    color: transparent;
    background:linear-gradient(125deg,#f59e0b, #db2777);
    -webkit-background-clip: text;
    text-transform: capitalize;
    font-family: Vector;
    width: 100%;
    z-index: 1;
    font-size: 1rem;
    transition: .5s ease;
}
.box-text .service-box-main{
    color: gray;
    font-family: 'Poppins',sans-serif;
    opacity: 1;
    text-transform: capitalize;
    font-size: 0.8rem;
    font-weight: 400;
    transition: .5s ease;
}
.pricing{
    display: flex;
    flex-direction: column;
    flex-wrap:wrap;
    z-index: 0;
    position: relative;
    justify-content: center;
    align-items: center;
    top: 0dvh;
    margin-top: 10dvh;
    height: fit-content;
    padding: 1rem 1rem;
    text-align: center;
    width: 100%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left;
}
.pricing-h2{
    background: linear-gradient(135deg,#db2777, #f59e0b);
    -webkit-background-clip: text;
    color: transparent;
    font-weight: 500;
    font-size: 1rem;
    text-transform: capitalize;
    font-family: Vector;
    text-align: center;
    border-radius: 1rem;
    width: 100%;
}
.pricing-h1{
    color: #2a2a2a;
    text-align: center;
width: fit-content;
    text-align: center;
    font-family: Vector;
    animation: gradient 1s ease-in-out linear infinite;
    font-weight: 500;
    position: relative;
}
.pricing-h1::before{
    content: '';
    position: absolute;
    /* right: 3.1rem; */
    left: 31%;
    bottom: -0.5rem;
    width: 30%;
    height: 2px;
    margin: auto;
    opacity: 0.4;
    background: linear-gradient(to right,#db2777,#f59e0b);
}
.pricing-h1::after{
    content: '';
    position: absolute;
  
   right: 31%;
   margin: 0 auto;
    bottom: -0.5rem;
    width: 7%;
    height: 2px;
    opacity: 0.9;
    background: linear-gradient(to left,#db2777,#f59e0b);
}
.pricing-plan-buttons{
    width: fit-content;
    margin-top: 5dvh;
    margin-left: auto;
    margin-right: auto;
    height: fit-content;
    /* background: linear-gradient(135deg,#db2777,#f59e0b); */
    background: radial-gradient(circle at 100% 100%, #ffffff 0, #ffffff 20px, transparent 20px) 0% 0%/21px 21px no-repeat,
            radial-gradient(circle at 0 100%, #ffffff 0, #ffffff 20px, transparent 20px) 100% 0%/21px 21px no-repeat,
            radial-gradient(circle at 100% 0, #ffffff 0, #ffffff 20px, transparent 20px) 0% 100%/21px 21px no-repeat,
            radial-gradient(circle at 0 0, #ffffff 0, #ffffff 20px, transparent 20px) 100% 100%/21px 21px no-repeat,
            linear-gradient(#ffffff, #ffffff) 50% 50%/calc(100% - 2px) calc(100% - 42px) no-repeat,
            linear-gradient(#ffffff, #ffffff) 50% 50%/calc(100% - 42px) calc(100% - 2px) no-repeat,
            linear-gradient(90deg, #db2777 0%, #f59e0b 100%);
border-radius: 1.9rem;
padding: 0px;
box-sizing: border-box;
   position: relative;
    display: flex;

    justify-content: center;
    z-index: 0;
    align-items: center;
}
/* .pricing-plan-buttons::before{
    content: '';
    position: absolute;
    left: 50%;
    z-index: 1;
    top: 50%;
    width: 99%;
    background: #fff;
    height: 97%;
    transform: translate(-50%,-50%);
} */
.pricing-plan-button-box{
    width: fit-content;
    
    height: fit-content;
}
.active{
    background: linear-gradient(135deg,#db2777,#f59e0b);
    background-clip: inherit;
    color: #fff;
    width: fit-content;
    height: 2.7rem;
    border-radius: 1.9rem;
    border: none;
    text-transform: capitalize;
    font-size: 0.9rem;
    font-weight: 500;
    display: block;  
    font-family: 'Poppins',sans-serif;
    text-align: center;
    padding: 0 1.8rem;
}
.monthly{
    width: fit-content;
    height: 2.7rem;
    background: linear-gradient(135deg,#db2777,#f59e0b);
    border: none;
    border-radius: 1.9rem;
    color: #fff;
    z-index: 1;
    text-transform: capitalize;
    font-size: 0.9rem;
    text-align: center;
    display: block;
    font-weight: 500;
    font-family: 'Poppins',sans-serif;
    text-align: center;
    padding: 0 1.8rem;
}
.yearly{
    width: fit-content;
    height: 2.7rem;
    background: linear-gradient(135deg,#db2777,#f59e0b);
    background-clip: text;
    border-radius: 1.9rem;
    border: none;
    color: transparent;
    text-transform: capitalize;
    font-size: 0.9rem;
    font-weight: 500;
    display: block;  
    font-family: 'Poppins',sans-serif;
    text-align: center;
    padding: 0 1.8rem;
}

.pricing-boxes{
    height: fit-content;
    width: 100%;
    margin-top: 5dvh;
    display: flex;
    justify-content: center;
    align-items: center;
}
.monthly-boxes{
    display: flex;
    /* animation-name: onclick;
    animation-duration: 1s; */
}
.yearly-boxes {
    display: none;
    /* animation-name: onclick;
    animation-duration: 1s; */
}

.pricing-box-head{

    font-size: clamp(1.5rem,2vw,2rem);
    font-family: Vector;
    color: #2a2a2a;
}
.middle-head{
    color: #fff;
}
/* @keyframes onclick{
    0%,50%{
        opacity: 0;
        transform: translateY(20px);
    }
    100%{
        opacity: 1;
        transform: translateY(0px);
       
    }
} */
.pricing-box-price{
    background: linear-gradient(135deg,#db2777,#f59e0b);
    background-clip: text;
    color: transparent;
    font-family: Vector;
    font-size: 2.5rem;

}
.dollar{
    font-size: 1.5rem;
}
.middle-price{
    background-clip: inherit;
    background: transparent;
    color: #fff;
}
.pricing-box-benfits{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 80%;
    height: fit-content;
    gap: 1rem;
}
.pricing-box-keys{
    width: fit-content;
    height: fit-content;
}
.pricing-keys-icon{
    background: linear-gradient(135deg,#db2777,#f59e0b);
    background-clip: text;
    color: transparent;
}
.pricing-keys-icon-middle{
    background: transparent;
    background-clip: inherit;
    color: #fff;
}
.pricing-keys-text{
    color: #2a2a2a;
    font-family: Vector;
    margin-left: 0.2rem;
    opacity: 0.9;
    font-size: 0.9rem;
    font-weight: 500;
    
}
.pricing-keys-text-middle{
    color: #fff;
    font-family: Vector;
    margin-left: 0.2rem;
    opacity: 0.9;
    font-size: 0.9rem;
    font-weight: 500;
    
}
.pricing-box-btn-box{
    width: fit-content;
    height: fit-content;
    margin-top: 3dvh;
}
.pricing-box-btn{
    width: fit-content;
    height: fit-content;
    padding: 0.5rem 1.5rem;
    height: 2.5rem;
    border-radius: 1.9rem;
    border: none;
    background: linear-gradient(135deg,#db2777,#f59e0b);
    color: #fff;
    font-family: 'Poppins',sans-serif;
    text-align: center;
    font-size: 0.8rem;
    text-transform: capitalize;
    font-weight: 400;
}
.pricing-box-btn-middle{
    position: relative;
    background: #fff;
    z-index: 1;
}
.pricing-box-btn-middle::before{
    content: 'Get Started';
    position: absolute;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.9rem;
    text-transform: capitalize;
    font-weight: 400;
    background: linear-gradient(135deg,#db2777,#f59e0b);
    background-clip: text;
    color: transparent;
    border-radius: 1.9rem;
    left: 0;
    z-index: 0;
    top: 0;

    width: 100%;
    height: 100%;
}
.monthly-box{
    width: 100%;
    display: flex;
    flex-direction: column;
    /* padding: 1rem 1rem; */
    align-items: center;
    justify-content: center;
    height: 70dvh;
    background: #fff;
    animation-name: onclick;
    animation-duration: 1s;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
.yearly-box{
    width: 100%;
    height: 70dvh;
    display: flex;
    flex-direction: column;
    /* padding: 1rem 1rem; */
    align-items: center;
    justify-content: center;
    background: #fff;
    animation-name: onclick;
    animation-duration: 1s;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
}
@keyframes onclick{
    0%,50%{
        opacity: 0;
        transform: translate(20px , 20px);
        transform: scale(0.95);
    }
    100%{
        opacity: 1;
        transform: translate(0px, 0px);
        transform: scale(1);
       
    }
}
.middle{
    background: linear-gradient(135deg,#db2777,#f59e0b);
    margin-top: -5dvh;
    overflow: hidden;
    position: relative;
}


.middle{
    background: linear-gradient(135deg,#db2777,#f59e0b);
}
.circle{
    position: absolute;
    right: 0;
    bottom: 0;
    width: fit-content;
    display: flex;
    justify-content: center;
    align-items: center;
    height: fit-content;
}
.circle-1{
    background: #eee;
    width: 10rem;
    height: 10rem;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    border-radius: 50%;
    opacity: 0.3;
}
.circle-2{
    background: #eee;
    width: 7rem;
    height: 7rem;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    border-radius: 50%;
    opacity: 0.5;
}
.circle-3{
    background: #eee;
    width: 4rem;
    height: 4rem;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    border-radius: 50%;
    opacity: 0.8;
}
.circle-4{
    background: #eee;
    width: 1rem;
    height: 1rem;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    border-radius: 50%;
    opacity: 1;
}
.portfolio{
    height: fit-content;
    width: 100%;
    margin-top: 15dvh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.portfolio-head{
    width: 100%;
}
.portfolio-main-head{
    color: #2a2a2a;
    text-align: center;
    font-family: Vector;
    animation: gradient 1s ease-in-out linear infinite;
    font-weight: 500;
    position: relative;
  
    	
/* -webkit-box-reflect: below -10px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(50%, transparent), to(rgba(255,255,255,0.2))); */

}
.portfolio-main-head::before{
    content: '';
    position: absolute;
    /* right: 3.1rem; */
    left: 29%;
    bottom: 0;
    width: 30%;
    height: 2px;
    margin: auto;
    opacity: 0.4;
    background: linear-gradient(to right,#db2777,#f59e0b);
}
.portfolio-main-head::after{
    content: '';
    position: absolute;
  
   right: 29%;
   margin: 0 auto;
    bottom: 0;
    width: 10%;
    height: 2px;
    opacity: 0.9;
    background: linear-gradient(to left,#db2777,#f59e0b);
}
.portfolio-sub-head{
    background: linear-gradient(135deg,#db2777, #f59e0b);
    -webkit-background-clip: text;
    color: transparent;
    font-weight: 500;
    font-size: 1rem;
    text-transform: capitalize;
    font-family: Vector;
    text-align: center;
    border-radius: 1rem;
    width: 100%;
}
.portfolio-boxes{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 5dvh;
    height: fit-content;
    background: transparent;
}
.portfolio-box{
    height: fit-content;
    background: transparent;
    position: relative;
    display: block;
    overflow: hidden;
    transition:  .6s ease-in-out;
}
.portfolio-box:hover{
    transform: translateY(-10px);
}
.portfolio-img{
    width: 100%;
    max-width: 100%;
    object-fit: contain;
    z-index: 0;
    height: auto;
}
.portfolio-img-hover{
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 0rem;
    opacity: 0;
    z-index: 1;
    font-family: 'Poppins',sans-serif;
    font-weight: 500;
    background: #fff;
    transition: all .6s ease-in-out;
    color: #2a2a2a;
}
.portfolio-box:hover .portfolio-img-hover{
    height: 5rem;
    opacity: 1;
    z-index: 1;

}
.portfolio-img-hover:hover{
    color: #db2777;
}
.team{
    height: fit-content;
    width: 100%;
    margin-top: 15dvh;
    display: flex;
    gap: 10dvh;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.team-headings{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: fit-content;
}
.team-sub-head{
    background: linear-gradient(135deg,#db2777, #f59e0b);
    -webkit-background-clip: text;
    color: transparent;
    font-weight: 500;
    font-size: 1rem;
    text-transform: capitalize;
    font-family: Vector;
    text-align: center;
    border-radius: 1rem;
    width: 100%;
}
.team-main-head{
    color: #2a2a2a;
  
   
    text-align: center;
    animation: gradient 1s ease-in-out linear infinite;
    font-weight: 500;
    font-family: Vector;
    position: relative;
    animation-duration: 1.5s;
}
.team-main-head::before{
    content: '';
    position: absolute;
    /* right: 3.1rem; */
    left: 14%;
    bottom: -0.5rem;
    width: 55%;
    height: 2px;
    margin: auto;
    opacity: 0.4;
    background: linear-gradient(to right,#db2777,#f59e0b);
}
.team-main-head::after{
    content: '';
    position: absolute;
  
   right: 14%;
   margin: 0 auto;
    bottom: -0.5rem;
    width: 15%;
    height: 2px;
    opacity: 0.9;
    background: linear-gradient(to left,#db2777,#f59e0b);
}
.team-boxes{
    justify-content: center;
    padding: 1rem 1rem;
    align-items: center;
    gap: 2rem;
}
.team-box{
    height: fit-content;
    box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
    background: #fff;
}
.team-box-img-box{
    height: 70%;
    width: 100%;
}
.team-box-img {
    width: 100%;
    max-width:100%;
    height: auto;
    /* object-fit: cover; */
    /* max-width: 100%; */

}
.team-box-text{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 1rem 1rem;
    width: 100%;
    height: 30%;
}
.team-box-text-h2{
    font-size: 1.3rem;
    color: #2a2a2a;
    font-family: Vector;
}
.team-box-text-h4{
    color: gray;
    font-family: Vector;
    font-size: 0.9rem;
}
.social-media{
    width: 100%;
    height: fit-content;
    display: flex;
    justify-content: center;
    gap: 1rem;
    align-items: center;
}
.social-media-box{
    height: 2rem;
    width: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background: linear-gradient(135deg,#db2777,#f59e0b);
    
    position: relative;
    border-radius: 50%;
}
.social-media-box::before{
    content: '';
    width: 95%;
    height: 95%;
    position: absolute;
    left: 50%;
    border-radius: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    background: #fff;
}

.social-media-icon{
    background: linear-gradient(135deg,#db2777,#f59e0b);
    background-clip: text;
    z-index: 1;
    font-size: 0.9rem;
    color: transparent;
}
.newsletter{
    width: 100%;
    height:60dvh;
    margin-top: 15dvh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem 1rem;
    z-index: 1;
    border-radius: 0.2rem;
    position: relative;
    top: 0dvh;
    margin-left: auto;
    margin-right: auto;
    background: url(page-banner-bg.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
    
}
.newsletter::before{
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 0;
    height: 100%;
    background: linear-gradient(135deg,#db2777,#f59e0b);
    opacity: 0.9;
}
.newsletter-left{
    width: 100%;
    display: flex;
    padding: 1rem 1rem;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: fit-content;
}
.newsletter-left-h2{
   color: #fff;
   z-index: 1;
   text-align: center;
   font-size:  clamp(1.4rem,4vw,3rem);
    font-family: Vector;
}
.newsletter-left-h4{
    color: #fff;
    z-index: 1;
    font-size:  clamp(0.9rem,2vw,1rem);
    font-family: Vector;
}
.newsletter-right{
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem 1rem;
    height: fit-content;
}
.newsletter-right-form{
    max-width: 830px;
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    gap: 1rem;
    align-items: center;
}
.newsletter-search{
    width: 100%;
    height: 3rem;
    z-index: 1;
    background: #fff;
    padding: 1rem 1rem;
    transition: .5s ease;
    display: block;
    border: 1px solid #fff;
    border: 1px solid rgb(128, 128, 128,0.2);
    border-radius: 2rem;
}

.newsletter-search:focus{
    outline: none;
}
.newsletter-btn{
    background: linear-gradient(135deg,#db2777,#f59e0b);
    height: 2.5rem;
    display: flex;
    justify-content: center;
    padding: 0 1.9rem;
    align-items: center;
    position: absolute;
    right:0.5%;
    z-index: 1;
    font-size: 0.9rem;
    font-family: 'Poppins',sans-serif;
    border-radius: 2rem;
    font-weight: 500;
    border: none;
    color: #fff;
    /* border: none;
    color: #fff;
    padding: 0.7rem 1rem;
    height: 3rem;
    width: fit-content;
    text-align: center;
    font-weight: 400;
    border-radius: 0.2rem;
    position: relative;
    background: linear-gradient(135deg,#db2777,#f59e0b);
    font-size: clamp(0.8rem,2vw,0.9rem); */
    
}
.footer{
    width: 100%;
    position: relative;
    top: 0dvh;
    z-index: 0;
    left: 0;
    margin-top: 15dvh;
    background: linear-gradient(135deg,rgb(245, 158, 11),#db2777);
    height: fit-content;
    padding: 1rem 1rem;
}
.footer-logo{
    display: flex;
    flex-direction: column;
    justify-content:start;
    align-items: center;
    color: #fff;
    text-align: center;
    font-family: Vector;
}
.footer-logo-img{
    width: 100%;
    display: flex;
    gap: 0.5rem;
    justify-content: left;
    position: relative;
    align-items: center;
}

.footer-logo .footer-opti-logo{
    filter:brightness(0) invert(1);
    height: 2rem;
    width: 2rem;
}
.footer-logo .footer-logo-text{
    width: fit-content;
    color: #fff;
    
    font-size: 1.2rem;
    font-weight: 600;
    font-family: blackpast;
    text-align: center;
    height: fit-content;
}
.footer-logo-main
{
    color: #fff;
    text-align: left;
    font-size: 0.8rem;
}
.footer-logo-social{
    width: 100%;
    display: flex;
    gap: 1rem;
    height: fit-content;
}
.footer-logo-social-box{
    height: 2rem;
    width: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff;
    position: relative;
    border-radius: 50%;
    transition: .4s ease;
}
.footer-logo-social-box:hover{
    transform: scale(1.05);
}

/* .social-media-box::before{
    content: '';
    width: 95%;
    height: 95%;
    position: absolute;
    left: 50%;
    border-radius: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    background: #fff;
} */

.footer-social-media-icon{
    background: linear-gradient(135deg,#db2777,#f59e0b);
    background-clip: text;
    z-index: 1;
    font-size: 0.9rem;
    color: transparent;
}
.footer-nav{
    display: flex;
    gap: 1rem;
    padding: 1rem 1rem;
    flex-direction: column;
}
.footer-nav-h2{
    color: #fff;
    font-size: 1.5rem;
    font-family: Vector;
    width: fit-content;
    
    position: relative;
}
.footer-nav-h2::after{
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background: #fff;
}
.Featured-Service-h2{
    color: #fff;
    width: fit-content;
    font-size: 1.5rem;
    font-family: Vector;
    position: relative;
}
.Featured-Service-h2::after{
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background:#fff;
}
.footer-nav .footer-nav-link{
    text-decoration: none;
    color: #fff;
    font-weight: 500;
    transition: .4s ease;
    font-size: 0.9rem;
    font-family: Vector;
}
.footer-nav-link:hover{
    opacity: 0.7;
}
.footer-nav-link-contact{
    width: 100%;
    display: flex;
    justify-content: left;
    align-items: center;
    gap: 1rem;
    height: fit-content;
}
.footer-nav-link-icon-box{
    display: flex;
    justify-content: start;
    align-items: first baseline;
    width: 1.5rem;
    height: 1.5rem;
}
.footer-nav-link-icon{
    font-size: 1.5rem;
}
.footer-nav-link-icon-txt{
    height: fit-content;
    width: fit-content;
    display: flex;
    justify-content: start;
    align-items: first baseline;
    flex-direction: column;
}
.phone{
    font-size: 1rem;
}
.footer-form-head{
    color: #fff;
    font-size: 1.2rem;
    font-size: 600;
    margin: auto;
    display: block;

    font-family: Vector;
}
.form-head-icon{
    font-size: 1.2rem;
}
.form-btn{
    border: none;
    color: #fff;
    font-family: 'Poppins',sans-serif;
    padding: 0.7rem 1rem;
    font-weight: 600;
    border-radius: 0.2rem;
    position: relative;
    background: #2a2a2a;
    font-size: 0.8rem;
    
}
.copyright-1{
    color: #eee;
    text-align: center;
    font-family: Vector;
    font-size: 0.9rem;
}
.copyright-2{
    text-align: center;
    color: #eee;
    font-family: Vector;
    font-size: 0.9rem;
}
.copyright-1-link{
    text-decoration: none;
    color: #eee;
}
.copyright-2-link{
    text-decoration: none;
    color: #eee;
}
@media screen and (max-width:992px){
    .middle{
        margin-top: 0;
       }
        
        
}

@media only screen and (min-width: 768px) and (max-width: 991px){
    .navbar-nav .nav-item .nav-link{
        font-size: 0.87rem;
    }
    .service-boxes{
        row-gap: 2rem;
    }
    .feature-right-box{
        min-height: 15rem;
    }
    .middle{
     margin-top: 0;
    }
    .box{
        flex-direction: column;
        justify-content: start;
        align-items: first baseline;
    }
    .monthly-box{
     height: fit-content;
     padding: 2rem 1rem;
    }
    .yearly-box{
     height: fit-content;
     padding: 2rem 1rem;
    }
    .services-child2 .service-boxes{
      width: 100%;
    }
    .box{
      flex-direction: column;
      justify-content: start;
      align-items: first baseline;
    }
    .newsletter-left{
      justify-content: left;
      align-items: left;
    }
    .newsletter-search{
      width: 100%;
    }
    .newsletter-right{
      flex-direction: column;
      justify-content: center;
      align-items: center;
    }
}

@media  screen and (max-width:767px) {
    .nav-hover{
        width: fit-content;
        position: relative;
        width: 80%;
        border: 1px solid #eee;
        padding: 0.8rem 0.8rem;
        display: flex;
        flex-direction: column;
        /* top: 80px; */
        visibility: visible;
        gap: 0.5rem;
        box-shadow: none;
        /* z-index: 99; */
        opacity: 1;
        transition: all .3s ease-in-out;
        transform: translateY(0px);
        border-radius: 0.25rem;
        
        background: transparent;
    }
   
    .nav-hover .nav-hover-first{
        color: transparent;
    
        background: linear-gradient(135deg,#db2777,#f59e0b);
        background-clip: text;
    }
    .nav-hover .nav-hover-link{
        color: gray;
        font-size: 0.8rem;
    }
    .navbar-nav .nav-item .nav-link{
        color: transparent;
        background: linear-gradient(135deg,#db2777,#f59e0b);
        background-clip: text;
        opacity: 1;
        font-family: Vector;
        font-size: 0.93rem;
        height: fit-content;
        width: fit-content;
        display: flex;
        justify-content: start;
        align-items: first baseline;
        font-weight: 400;
        position: relative;
        padding: 0.8rem 0.8rem;
        transition: all .5s ease-in-out;
    }
    .feature-right-box{
        min-height: 10rem;
    }
    .navbar-scroll {
        height: 70dvh;
        overflow-y: scroll;
    }
}




@media screen and (max-width:600px){
    .contact-right h1{
        font-size: 1.95rem;
    }
   .child-2 .child-2-cont{
    height: 100%;
    width: 75%;
   }
   .child-2 .child-2-img{
    height: 75%;
    width: 75%;
   }

}  
@media screen and (max-width:580px){
    .contact-right h1{
        font-size: 1.85rem;
    }
}  
@media screen and (max-width:565px){
    .contact-right h1{
        font-size: 1.80rem;
    }
    .footer-box a{
    
        font-size: 0.8rem;
       
    }
    .service-boxes {
        width: 100%;
    }
}  


@media screen and (max-width:550px){
    .header{
        display: none;
    }
    .projects-section{
        height: 100dvh;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
    }
    .projects-section .projects-box{
       height: 40dvh;
    }
    .about-us{
        position: relative;
        top: 0dvh;
      
        
    }
   
    
 
    
    
   
}
@media screen and (max-width:525px) {
    .child1 .container{
        height: 90%;
    }
  
  
    
}

@media screen and (max-width:395px) {
    /* .projects{
        top: 0dvh;
        margin-top: 15rem;
    } */
    
    
}
@media screen and (max-width:375px){
    .child1 .container{
        height: 100%;
    }
    
}  
@media screen and (max-width:340px) {
    /* .projects{
        top: 30dvh;
        margin-top: 20rem;
    } */
   
    
}