/* globle style */
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    font-family: a-jannatR;
    text-transform: capitalize;
}
/* import fonts */
@font-face {
    font-family: a-jannatB;
    src: url(/font/AAjannatLB.ttf);
}
@font-face {
    font-family: a-jannatR;
    src: url(/font/AAJannatLTR-.ttf);
}
@font-face {
    font-family: Raleway-B;
    src: url(/font/Raleway-Bold.ttf);
}
@font-face {
    font-family: roboto-B;
    src: url(/font/robotoB.ttf);
}

/* color palette*/
:root {
    --body-bc: #f9f9f9;
    --main-color: #ed1e53;
    --font-color: #3b3b3b;
    --dark-font: #242424;
    --font-light: #8f8b8b;
    --border-color: #ebebeb;
    --fff: #ffffff;
    --shadow: 0px 10px 20px #9f9d9d29;
    --minbreak-list: 993px;
    --maxbreak-list: 992px;
}
body {
    min-height: 100vh;
    background-color: var(--body-bc);
    position: relative;
}
::-webkit-scrollbar {
    width: 5px;
}
::-webkit-scrollbar-track {
    background-color: #fff;
}
::-webkit-scrollbar-thumb {
    background-color: var(--main-color);
}
::selection {
    background-color: var(--dark-font);
    color: var(--border-color);
}
a {
    font-size: inherit;
    color: inherit;
    font-family: inherit;
    text-decoration: none;
    cursor: pointer;
}
html {
    scroll-behavior: smooth;
}
/* loader */
@keyframes rotate1 {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
@keyframes rotate2 {
    0% {
        stroke: #ffc00035;
    }
    20% {
        stroke: #9100ff35;
    }
    40% {
        stroke: #05d30935;
    }
    60% {
        stroke: #0082c935;
    }
    80% {
        stroke: #ed225435;
    }
    100% {
        stroke: #ffc00035;
    }
}
@keyframes rotate3 {
    0% {
        fill: #ffc00095;
    }
    20% {
        fill: #9100ff95;
    }
    40% {
        fill: #05d30995;
    }
    60% {
        fill: #0082c995;
    }
    80% {
        fill: #ed225495;
    }
    100% {
        fill: #ffc00095;
    }
}
@keyframes changebg {
    0% {
        background: #ed2254;
    }
    20% {
        background: #ffc000;
    }
    40% {
        background: #9100ff;
    }
    60% {
        background: #05d309;
    }
    80% {
        background: #0082c9;
    }
    100% {
        background: #ed2254;
    }
}
.loader {
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    align-content: center;
    width: 100%;
    height: 100%;
    z-index: 100000000000000000000;
    background: #f9f9f9 !important;
}
.loader * {
    position: absolute;
    align-self: center;
}
.loader2 {
    background: #ed2254;
    width: 170px;
    height: 170px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    animation: changebg 10s infinite;
    animation-delay: 2s;
}
.loader2 img {
    width: 60%;
}
.loader svg {
    position: absolute;
    background: transparent;
    height: 300px;
    width: 300px;
    z-index: -1;
    animation: rotate1 1s infinite;
}
.loader svg circle:nth-child(1) {
    fill: transparent;
    stroke: #0082c935;
    stroke-width: 2.5px;
    stroke-dasharray: 190;
    stroke-dashoffset: 19;
    animation: rotate2 10s infinite;
    animation-delay: 2s;
}
.loader svg circle:nth-child(2),
.loader svg circle:nth-child(3) {
    fill: #0082c9;
    stroke: 0;
    animation: rotate3 10s infinite;
    animation-delay: 2s;
}

#backgroundTop {
    right: 0;
    left: auto;
    transform: rotatey(180deg);
}
#backgroundBottom {
    right: auto;
    left: 0;
    transform: rotatey(180deg);
}

/* header */
@media (max-width: 1003px) {
    header {
        padding-block: 0 !important;
        border-bottom: 1px solid var(--border-color);
    }
    header #sm{
        width: 71px;
        height: 76px;
        border: 1px solid var(--border-color);
        background: url(/img/darkmenu.png) no-repeat center;
        background-size: 17px;
    }
    header #sm.active{
        background: url(/img/close-button.png) no-repeat center;
        background-size: 14px;
    }
    header a,
    header li > span {
        display: block;
        width: 100%;
        height: 100%;
        padding: 20px 15px;
    }
    header a.active {
        background-color: var(--body-bc);
        font-weight: bold;
    }
    header #collapse {
        max-height: 0;
        overflow: hidden;
        background-color: var(--fff);
        box-shadow: var(--shadow);
        flex-direction: column;
        gap: 0;
        width: 100%;
        padding: 0;
        transition: 0.4s;
        -webkit-transition: 0.4s;
        -moz-transition: 0.4s;
        -ms-transition: 0.4s;
        -o-transition: 0.4s;
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        -o-transform: translateX(-50%);
        border-radius: 5px;
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        -ms-border-radius: 5px;
        -o-border-radius: 5px;
        opacity: 0;
    }
    header #collapse.active {
        max-height: 1000px;
        opacity: 1;
        box-shadow: none;
    }
    header #collapse li {
        border-top: 1px solid var(--border-color);
        transition: 0.3s;
        -webkit-transition: 0.3s;
        -moz-transition: 0.3s;
        -ms-transition: 0.3s;
        -o-transition: 0.3s;
    }
}
header #lm-languge .icon {
    width: 43px;
    height: 43px;
    background: var(--main-color) url("/img/menu_hamburger.svg") no-repeat center;
    padding: 11px;
    background-size: 60%;
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    cursor: pointer;
    transition: 0.2s;
    -webkit-transition: 0.2s;
    -moz-transition: 0.2s;
    -ms-transition: 0.2s;
    -o-transition: 0.2s;
    box-shadow: 0 10px 30px #ff366929;
}
@media (max-width: 773px) {
    header #lm-languge .icon {
        width: 30px;
        height: 30px;
    }
}
header #lm-languge .icon.active {
    background: var(--main-color) url("/img/closex.svg") no-repeat center;
}
header .languge {
    margin-left: auto;
}
header .nav-item * {
    position: relative;
}

header .nav-item *::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0%;
    height: 2px; /* Thickness of the line */
    background-color: var(--main-color); /* Color of the line */
    transition: width 0.3s ease;
}

header .nav-item:hover {
    color: var(--main-color);
}

header .nav-item:hover *::after{
    width: 100%;
}

header .nav-item.active {
    color: var(--main-color);
    font-weight: bold;
}
.dropdown-menu.active {
    max-height: fit-content;
    opacity: 1;
    padding-block: 20px;
}
.dropdown-menu .nav-item {
    margin: 10px 0;
}
.dropdown-menu::after {
    content: "";
    width: 0;
    height: 0;
    border: 10px solid;
    border-color: transparent transparent var(--fff) transparent;
    position: absolute;
    top: -17px;
    right: 10px;
    z-index: 165;
}

/* aside style */
aside {
    height: 100vh;
    display: flex;
    flex-direction: column-reverse;
    justify-content: center;
    position: fixed;
    z-index: 10000;
    right: 50px;
    color: var(--font-color);
    font-size: 18px;
    gap: 9vh;
}
@media (max-width: 1003px) {
    aside {
        display: none !important;
    }
}
aside a {
    font-weight: bold;
    writing-mode: vertical-lr;
    -webkit-writing-mode: vertical-lr;
    -ms-writing-mode: vertical-lr;
}
aside a:hover {
    color: var(--main-color);
}

/* home */
#main .container,
#about .container {
    min-height: 70vh;
}
@media (max-width: 1536px) {
    #main .container,
    #about .container {
        min-height: 34vw;
    }
}
@media (max-width: 1004px){
    #main{
        padding-top: 20px;
    }
}
#main .img {
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
}
.rosy {
    color: var(--main-color);
}
.bold {
    font-weight: bold;
}

/* order tap */
.offcanvas-start.open {
    left: 0 !important;
}
#close {
    background: var(--main-color) url(/img/closex.svg) no-repeat center;
}
@media (min-width: 1513px) {
    #close {
        top: 50px;
    }
}
.offcanvas-start .cont .input {
    width: 100%;
    color: #707070;
    position: relative;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}
.offcanvas-start .cont .input.notfull {
    width: calc(50% - 42px);
}
@media (max-width: 1088px) {
    .offcanvas-start .cont .input.notfull {
        width: 100%;
    }
}
.offcanvas-start.offcanvas-start .cont .input input,
.offcanvas-start.offcanvas-start .cont .input textarea,
.offcanvas-start.offcanvas-start .cont .input.files label {
    width: 100%;
    padding: 24px;
    background-color: #f6f6f6;
    color: inherit;
    font-size: inherit;
    border: none;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
}
@media (max-width: 773px) {
    .offcanvas-start.offcanvas-start .cont .input input,
    .offcanvas-start.offcanvas-start .cont .input textarea,
    .offcanvas-start.offcanvas-start .cont .input.files label {
        padding: 0.75em;
        font-weight: normal !important;
    }
}
@media (max-width: 375px) {
    .offcanvas-start.offcanvas-start .cont .input input,
    .offcanvas-start.offcanvas-start .cont .input textarea {
        border-radius: 30px;
        -webkit-border-radius: 30px;
        -moz-border-radius: 30px;
        -ms-border-radius: 30px;
        -o-border-radius: 30px;
    }
}
.offcanvas-start.offcanvas-start .cont .input label {
    font-size: 14px;
}
.offcanvas-start .cont .input input:focus,
.offcanvas-start .cont .input textarea:focus {
    border: none;
    outline: none;
}
.offcanvas-start .cont .input input::placeholder,
.offcanvas-start .cont .input textarea::placeholder {
    font-size: 14px;
    opacity: 0.48;
}
.offcanvas-start .cont .input label,
.offcanvas-start .cont .input.files > span {
    width: 100%;
    font-weight: bold;
    color: #707070;
    line-height: 38px;
}
@media (max-width: 773px) {
    .offcanvas-start .cont .input label,
    .offcanvas-start .cont .input.files > span {
        font-weight: normal;
    }
}
.offcanvas-start .cont .input.files label {
    display: grid;
    place-items: center;
    font-weight: 500;
    padding-inline: 10px;
    gap: 20px;
}
.offcanvas-start .cont .input.serv input,
.offcanvas-start .cont .input.budget input {
    cursor: pointer;
    width: calc(100% - 50px);
    border-radius: 20px 0 0 20px;
    -webkit-border-radius: 20px 0 0 20px;
    -moz-border-radius: 20px 0 0 20px;
    -ms-border-radius: 20px 0 0 20px;
    -o-border-radius: 20px 0 0 20px;
}
.offcanvas-start .cont .input #options {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 400%;
    max-height: 0px;
    overflow: hidden;
    border: 1px solid transparent;
    font-size: 14px;
    line-height: 38px;
    background-color: var(--fff);
    color: var(--font-color);
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
    z-index: 100;
    transition: 0.4s;
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    -ms-transition: 0.4s;
    -o-transition: 0.4s;
}
.offcanvas-start .cont .input.open #options {
    max-height: 100vh;
    border-color: var(--border-color);
}
.offcanvas-start .cont .input #options .option {
    width: 100%;
    padding: 10px;
    text-align: center;
    cursor: pointer;
    margin-bottom: 0;
    transition: 0.3s;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    -ms-transition: 0.3s;
    -o-transition: 0.3s;
}
.offcanvas-start .cont .input #options .option:hover {
    background-color: #f6f6f6;
    padding-inline-start: 20px;
}
.offcanvas-start .cont .input #closeArr {
    width: 50px;
    background-color: #f6f6f6;
    bottom: 17px;
    right: 2%;
    display: grid;
    place-items: center;
    cursor: pointer;
    border-radius: 0 20px 20px 0;
}
.offcanvas-start .cont .input #closeArr img {
    transition: 0.4s;
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    -ms-transition: 0.4s;
    -o-transition: 0.4s;
}
.offcanvas-start .cont .input.open #closeArr img {
    rotate: -180deg;
}
@media (min-width: 1367px) {
    .offcanvas-start.offcanvas-start .cont .input label {
        font-size: 13px;
    }
    .offcanvas-start .cont .input input::placeholder,
    .offcanvas-start .cont .input input,
    .offcanvas-start .cont .input textarea::placeholder {
        font-size: 11px;
    }
    .offcanvas-start .cont .input #options {
        font-size: 11px;
    }
}
@media (min-width: 1537px) {
    .offcanvas-start.offcanvas-start .cont .input label {
        font-size: 20px;
    }
    .offcanvas-start .cont .input input::placeholder,
    .offcanvas-start .cont .input input,
    .offcanvas-start .cont .input textarea::placeholder {
        font-size: 16px;
    }
    .offcanvas-start .cont .input #options {
        font-size: 16px;
    }
}

/* success */
#success {
    transition: opacity 0.4s;
    -webkit-transition: opacity 0.4s;
    -moz-transition: opacity 0.4s;
    -ms-transition: opacity 0.4s;
    -o-transition: opacity 0.4s;
}
#success.active {
    display: flex;
    opacity: 1;
    z-index: 10000000000000;
}
#success p {
    font-family: a-jannatB;
    font-size: 24px;
    color: var(--font-color);
    text-align: center;
}
#success p:first-of-type {
    font-size: 30px;
    margin-top: 18px;
}
.offcanvas.offcanvas-start.unscroll {
    overflow: hidden;
}

/* serv */
#serv .content {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 40px;
}
@media (min-width: 1537px) {
    #serv .content {
        grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
        gap: 51px;
    }
}
#serv .card-s {
    position: relative;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
}
#serv .card-s:nth-of-type(4)::after {
    content: url(/img/square.svg);
    position: absolute;
    bottom: -24px;
    left: -18px;
}
#serv .card-s:last-of-type::after {
    content: url(/img/circle1.svg);
    position: absolute;
    width: 48px;
    height: 48px;
    top: -24px;
    right: -18px;
}
#serv .card-s .cont {
    width: 100%;
    height: 100%;
    color: var(--font-color);
    padding: 15%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-color: transparent;
    transition: 0.4s;
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    -ms-transition: 0.4s;
    -o-transition: 0.4s;
    box-shadow: 0px 10px 20px #9f9d9d00;
    filter: grayscale(10);
    -webkit-filter: grayscale(10);
    border: 1px solid var(--border-color);
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
}
#serv .card-s:hover .cont {
    filter: grayscale(0);
    -webkit-filter: grayscale(0);
    box-shadow: var(--shadow);
    border-color: transparent;
    background-color: var(--fff);
}
#serv .card-s:last-of-type .cont p {
    font-size: 18px;
}
#serv .card-s h3 {
    font-size: 18px;
    margin-block: 26px 10px;
}
#serv .card-s p {
    font-size: 11px;
    font-weight: bold;
}
#serv .card-s img {
    max-width: 100%;
}
@media (min-width: 773px) {
    #serv .sectionTitle {
        font-size: 30px;
    }
    #serv .sectionptitle,
    #serv .card-s h3,
    #serv .card-s:last-of-type .cont p {
        font-size: 22px;
    }
    #serv .card-s p {
        font-size: 12px;
    }
}
@media (min-width: 1537px) {
    #serv .sectionTitle {
        font-size: 45px;
    }
    #serv .sectionptitle,
    #serv .card-s h3,
    #serv .card-s:last-of-type .cont p {
        font-size: 30px;
    }
    #serv .card-s p {
        font-size: 18px;
    }
}
@media (max-width: 704px) {
    #main button {
        padding: 0.6em 1em !important;
        box-shadow: 0 0 20px #fc285e29;
    }
    #serv {
        padding-top: 0;
        margin-top: 90px;
    }
    #serv .content {
        width: 100%;
        max-width: 267px;
        height: 236px;
        margin-inline: auto;
    }
    #serv .content::after {
        content: "";
        background: url("/img/circle1.svg") no-repeat center;
        background-size: cover;
        width: 29px;
        height: 29px;
        position: absolute;
        left: -13px;
        bottom: -14px;
        z-index: -1;
    }
    #serv .content::before {
        content: "";
        background: url("/img/x.png") no-repeat center;
        background-size: cover;
        width: 22px;
        height: 22px;
        position: absolute;
        right: -10px;
        top: -10px;
        z-index: -1;
    }
    #serv #popsServ {
        left: 50%;
        bottom: -42px;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        -o-transform: translateX(-50%);
    }
    #serv #popsServ span {
        width: 10px;
        height: 10px;
        background-color: var(--border-color);
        border-radius: 50%;
        -webkit-border-radius: 50%;
        -moz-border-radius: 50%;
        -ms-border-radius: 50%;
        -o-border-radius: 50%;
        transition: background 0.3s;
        -webkit-transition: background 0.3s;
        -moz-transition: background 0.3s;
        -ms-transition: background 0.3s;
        -o-transition: background 0.3s;
    }
    #serv #popsServ span.active {
        background-color: var(--main-color);
    }
    #serv .sectionptitle {
        margin-block: 3px 19px;
    }
    #serv .card-s::after {
        display: none;
    }
    #serv .card-s {
        width: 100%;
        height: 100%;
        position: absolute;
        background: var(--fff);
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        -o-transform: translateX(-50%);
        opacity: 0;
        transition: 0.3s;
        -webkit-transition: 0.3s;
        -moz-transition: 0.3s;
        -ms-transition: 0.3s;
        -o-transition: 0.3s;
        box-shadow: none !important;
    }
    #serv .card-s.active {
        opacity: 1;
    }
    #serv .card-s .cont {
        filter: grayscale(0);
        -webkit-filter: grayscale(0);
        box-shadow: none !important;
    }
    #serv .card-s img {
        max-width: 86.6px;
    }
}

/* about */
#about .container > img {
    transform: rotateY(180deg);
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
}
@media (min-width: 1000px){
    #about .container > img {
        transform: rotateY(180deg) scale(1.1);
    }
}
@media (min-width: 1537px) {
    #about .container > img {
        top: 30px;
        right: 100px;
    }
}
#about h2 {
    border-bottom: 3px solid var(--border-color);
}
@media (max-width: 1004px) {
    #about h2:not(#smallscreenTitle){
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
        -o-transform: translateX(-50%);
    }
}
#about .text img {
    position: absolute;
    z-index: 10;
}
#about .text img#x {
    top: -15px;
    left: 100px;
}
#about .text img#s {
    bottom: -32px;
    left: 22%;
}
#about .text img#c {
    left: 50%;
    bottom: -65px;
}
#about .text{
    position: relative;
}
@media (min-width: 1004px){
    #about .text::after{
        content: "";
        width: 150%;
        height: calc(100% + 60px);
        background: var(--fff);
        position: absolute;
        top: -25px;
        left: -15px;
        box-shadow: var(--shadow);
        border: 1px solid var(--border-color);
        z-index: -1;
    }
}
@media (max-width: 1004px){
    #about .text img#x {
        top: 100%;
        left: auto;
        right: 0;
    }
    #about .text img#s {
        display: none;
    }
    #about .text img#c {
        left: auto;
        right: 30px;
    }
    #about{
        margin-bottom: 109px;
    }
}
#smallscreenTitle::before{
    content: url(/img/square.svg);
    position: absolute;
    margin-inline-start: -65px;
    bottom: -22px;
}



/* slider section */
#works {
    width: 100%;
    min-height: 450px;
    background-color: var(--fff);
    padding-block: 34px;
    position: relative;
    margin-bottom: 85px;
    scroll-behavior: smooth;
    user-select: none;
}
@media (min-width: 1004px) {
    #works {
        height: auto;
    }
}
#works .slidCont {
    width: 100%;
    padding-bottom: 50px;
    white-space: nowrap;
    position: relative;
    scroll-behavior: smooth;
    direction: ltr !important;
    overflow: hidden;
    cursor: grab;
}
@media (min-width: 1567px) {
    #works .slidCont {
        padding-bottom: 100px;
    }
}
#works .slidCont.active {
    cursor: grabbing;
}
#works #title {
    font-size: 18px;
    color: var(--dark-font);
    line-height: 84px;
    z-index: 10;
}
@media (min-width: 1004px) {
    #works #title {
        top: 25px;
        font-size: 25px;
    }
}
@media (min-width: 1567px) {
    #works #title {
        font-size: 45px;
    }
}
#works .slidCont .row-w {
    height: 100%;
    white-space: nowrap;
}
#works .slidCont .row-w:first-of-type {
    margin-bottom: 20px;
}
#works .slidCont .row-w img {
    width: 100%;
    min-height: 100%;
    object-fit: cover;
    display: block;
    position: relative;
    background-color: #ddd;
    box-shadow: var(--shadow);
    filter: grayscale(0);
    transition: 0.4s;
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    -ms-transition: 0.4s;
    -o-transition: 0.4s;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
}
#works .row-w > div {
    height: 100%;
    display: inline-block;
    position: relative;
}
#works .row-w > div:nth-of-type(even) {
    top: 50px;
}
#works .row-w > div:not(:last-of-type) {
    margin-right: 20px;
}
#works .row-w.one > div:nth-of-type(odd),
#works .row-w.two > div:nth-of-type(even) {
    width: 280px;
}
@media (min-width: 773px) {
    #works .row-w.one > div:nth-of-type(odd),
    #works .row-w.two > div:nth-of-type(even) {
        width: 450px;
    }
}
@media (min-width: 1004px) {
    #works .row-w.one > div:nth-of-type(odd),
    #works .row-w.two > div:nth-of-type(even) {
        width: 650px;
    }
}
@media (min-width: 1567px) {
    #works .row-w.one > div:nth-of-type(odd),
    #works .row-w.two > div:nth-of-type(even) {
        width: 724px;
    }
    #works .row-w > div:nth-of-type(even) {
        top: 100px;
    }
}
#works .row-w.two > div:nth-of-type(odd),
#works .row-w.one > div:nth-of-type(even) {
    width: 164px;
}
@media (min-width: 773px) {
    #works .row-w.two > div:nth-of-type(odd),
    #works .row-w.one > div:nth-of-type(even) {
        width: 250px;
    }
}
@media (min-width: 1004px) {
    #works .row-w.two > div:nth-of-type(odd),
    #works .row-w.one > div:nth-of-type(even) {
        width: 350px;
    }
    #works .row-w > div .hover {
        font-size: 18px !important;
    }
}
@media (min-width: 1567px) {
    #works .row-w.two > div:nth-of-type(odd),
    #works .row-w.one > div:nth-of-type(even) {
        width: 426px;
    }
    #works .row-w > div .hover {
        font-size: 24px !important;
    }
}
#works .row-w > div .hover {
    width: 100%;
    height: 100%;
    background-color: #ed1e52b9;
    color: var(--fff);
    font-weight: 600;
    font-size: 14px;
    display: flex;
    align-items: flex-end; /* Changed 'end' to 'flex-end' */
    justify-content: flex-start; /* Changed 'start' to 'flex-start' */
    padding: 20px;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    cursor: pointer;
    transition: 0.4s;
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    -ms-transition: 0.4s;
    -o-transition: 0.4s;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
}
#works .row-w > div .hover::before {
    content: "≫";
    margin-inline-end: 0.5em;
}
#works .row-w > div:hover .hover {
    opacity: 1;
}

/* feedbak section */
#feedback {
    overflow: hidden;
    padding-inline: 19px;
}
#feedback .container {
    margin-inline: auto;
    max-width: 1088px;
}
@media (min-width: 1567px) {
    #feedback .container {
        max-width: 1355px;
    }
}
#feedback .content {
    width: 100%;
    display: flex;
    justify-content: center;
    display: flex;
    align-items: start;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px 3%;
    color: var(--font-color);
}
#feedback .content .card-f {
    width: calc((100% / 3) - (2%));
    position: relative;
}
@media (max-width: 1003px) {
    #feedback .content .card-f {
        width: 100%;
        max-width: 400px;
    }
    #feedback .content .card-f.two {
        display: none;
    }
}
@media (min-width: 1004px) {
    #feedback .content .card-f .cont .border {
        padding: 47px 20px;
    }
}
#feedback .content .flex {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
}
#feedback .content .card-f.two {
    align-items: center;
}
#feedback .content .card-f:last-of-type::after {
    content: url(/img/circle1.svg);
    position: absolute;
    bottom: -15px;
    left: -25px;
    z-index: -1;
}
#feedback .content .card-f.six::after {
    content: url(/img/circle1.svg);
    position: absolute;
    bottom: 5px;
    right: -25px;
    z-index: -1;
}
#feedback .content .card-f .slide-f {
    margin-block: 19px;
    font-family: a-jannatB;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px 10px;
    gap: 24px;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
}
#feedback .content .card-f .slide-f.blue {
    max-width: 283px;
    background-image: linear-gradient(100deg, #5793ce, #173d7a);
    color: var(--fff);
    position: relative;
}
#feedback .content .card-f .slide-f.blue::after {
    z-index: -1;
    content: url(/img/square.svg);
    position: absolute;
    bottom: -30px;
    right: -8px;
}
#feedback .content .card-f .slide-f.blue::before {
    content: url(/img/circle2.svg);
    position: absolute;
    top: -11px;
    right: -30px;
    z-index: -1;
}
#feedback .content .card-f .slide-f.blue.small {
    max-width: 167px;
}
@media (min-width: 1004px) {
    #feedback .content .card-f .slide-f.blue.small {
        max-width: 202px;
    }
}
#feedback .content .card-f .slide-f.blue.small::after {
    right: -27px;
    bottom: -41px;
}
#feedback .content .card-f .slide-f.blue.small::before {
    right: -60px;
    top: -4px;
}
#feedback .content .card-f .slide-f.rosy {
    font-weight: bold;
    color: var(--dark-font);
    border: 1px solid var(--main-color);
    gap: 4px;
}
#feedback .content .card-f .slide-f.rosy-bc {
    background-image: linear-gradient(97deg, #ed1e53, #770f2a);
    color: var(--fff);
    gap: 5px;
}
#feedback .content .border {
    padding: 20px;
    border: 1px solid var(--border-color);
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    -ms-border-radius: 5px;
    -o-border-radius: 5px;
}
@media (min-width: 1004px) {
    #feedback .content .borderx {
        min-height: 377px;
        padding: 25px;
    }
    #feedback .content .top {
        top: -135px;
    }
}
#feedback .content img {
    width: 100%;
}
#feedback .content .card-f .smallp {
    max-width: 397px;
    color: var(--font-color);
    margin-top: 19px;
}
#feedback .content .medium {
    font-size: 36px;
}
#feedback .content .larg {
    font-size: 39px;
}
#feedback .content .rosy {
    color: var(--main-color);
}
#feedback .content .bold {
    font-family: a-jannatB;
}
#feedback .content .card-f span:not(#more500) {
    font-size: 18px;
    padding: 10px;
    border-top: 1px solid var(--border-color);
    text-align: center;
}
#feedback .content .card-f .lastp {
    font-size: 25px;
    font-family: a-jannatB;
    margin-bottom: 0.9em;
}
@media (max-width: 1004px){
    #feedback .content .card-f.two{
        order: 7;
    }
    #feedback .content .card-f.eight{
        order: 1000;
    }
    #feedback .content .card-f.three{
        order: 2;
    }
    #feedback .content .card-f.four{
        order: 5;
    }
    #feedback .content .card-f.five{
        order: 4;
    }
    #feedback .content .card-f.six{
        order: 3;
    }
    #feedback .content .card-f.seven{
        order: 6;
    }
    #feedback .content .card-f.none{
        order: 8;
    }


    #feedback .content .card-f.three::after{
        content: url(/img/x.png);
        width: 21px;
        position: absolute;
        top: -10px;
        right: -5px;
    }
    #feedback .content .card-f .slide-f.blue::before{
        top: -46px;
        right: -62px;
    }
    #feedback .content .card-f .slide-f.blue::after{
        right: -39px;
        bottom: -30px;
    }
    #feedback .content .card-f .slide-f.blue{
        max-width: 231px;
    }
    #feedback .content .card-f.six::after{
        right: 8px;
        bottom: -28px;
    }
    #feedback .content .card-f.six::before{
        content: url(/img/square.svg);
        position: absolute;
        right: 30px;
        bottom: -67px;
    }
}
/* responsive font size */
#feedback .content .span20 {
    font-size: 20px;
}
#feedback .content .slide {
    font-size: 15px;
}
@media (min-width: 1005) {
    #feedback .content .border {
        min-height: 333px;
    }
    #feedback .content .larg {
        font-size: 40px;
    }
}
@media (min-width: 1567px) {
    #feedback .content .slide {
        font-size: 20px;
    }
    #feedback .content .larg {
        font-size: 50px;
    }
    #feedback .content .medium {
        font-size: 45px;
    }
}