@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'BDO Grotesk';
    font-style: normal;
    font-weight: 300;
    src: url('./font/BDOGrotesk-Light.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'BDO Grotesk';
    font-style: normal;
    font-weight: 400;
    src: url('./font/BDOGrotesk-Regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'BDO Grotesk';
    font-style: normal;
    font-weight: 500;
    src: url('./font/BDOGrotesk-Medium.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'BDO Grotesk';
    font-style: normal;
    font-weight: 600;
    src: url('./font/BDOGrotesk-DemiBold.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'BDO Grotesk';
    font-style: normal;
    font-weight: 700;
    src: url('./font/BDOGrotesk-Bold.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'BDO Grotesk';
    font-style: normal;
    font-weight: 800;
    src: url('./font/BDOGrotesk-ExtraBold.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
@font-face {
    font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
    font-family: 'BDO Grotesk';
    font-style: normal;
    font-weight: 900;
    src: url('./font/BDOGrotesk-Black.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

*{margin: 0px;padding: 0px;box-sizing: border-box;}
html, body{margin: 0px;padding: 0px;background-color: var(--background-color);font-family: var(--font-family);font-weight: 400;overflow-x: hidden;}

:root{
    --background-color: #f3f0eb;
    --black-color: #231f20;
    --green-color: #c4f3c4;
    --yellow-color: #ffff97;
    --orange-color: #ff832c;
    --beige-color: #e6e4dd;
    --blue-color: #bde2f8;
    --white-color: #fff;
    --grey-color: #484344;
    --red-color: #ff847e;
    --light-gray-color: #F3F4F6;
    --font-family: 'BDO Grotesk';
    --btn-size: 14px;
    --text-14px: 14px;
    --text-16px: 16px;
}

h1 {font-size: clamp(50px, 5vw, 72px);line-height: clamp(58px, 7vw, 82px);font-weight: 700; letter-spacing: -2px;}
h2 {font-size: clamp(28px, 3.5vw, 42px);line-height: clamp(36px, 5vw, 52px);font-weight: 700;}
h3 {font-size: clamp(24px, 2.8vw, 32px);line-height: clamp(32px, 4vw, 42px);font-weight: 700;}
h4 {font-size: clamp(20px, 2vw, 22px);line-height: clamp(26px, 3vw, 32px);font-weight: 700;}
h5 {font-size: clamp(18px, 1.8vw, 20px);line-height: clamp(22px, 2.5vw, 28px);font-weight: 700;}
h6 {font-size: clamp(16px, 1.5vw, 16px);line-height: clamp(20px, 2vw, 26px);font-weight: 700;}

p, ul li, ol li{font-size: 19px;line-height: 28px;font-weight: 400;}
.btn{font-size: 16px;line-height: 22px;font-weight: 400;}
.text-10px{font-size: 10px;line-height: 14px;font-weight: 400;}
.text-14px{font-size: 14px;line-height: 18px;font-weight: 400;}
.text-16px{font-size: 16px;line-height: 24px;font-weight: 400;letter-spacing: 0.2px;}

.gray-color{color: #8f8f8f;}

.super-big-text{font-size: 250px;line-height: 250px;padding: 20px 0px;}

.product-grid-2-elements{display: grid;grid-template-columns: repeat(2,1fr);gap: 80px;}
.grid-2-elements{display: grid;grid-template-columns: repeat(2,1fr);gap: 20px;}
.grid-2-element{display: grid;grid-template-columns: 1fr 0.7fr;gap: 20px;}
.grid-3-elements{display: grid;grid-template-columns: repeat(3,1fr);gap: 20px;}
.grid-4-elements{display: grid;grid-template-columns: repeat(4,1fr);gap: 20px;}

.pagewrap{width: 100%;max-width: 1200px;margin: auto;position: relative;padding: 0px 20px;}

.black-button{width: 200px;height: 58px;background-color: var(--black-color);border-radius: 12px;display: flex;flex-direction: column;justify-content: center;align-items: center;color: var(--white-color);font-size: var(--btn-size);text-decoration: none;transition: 0.2s ease;font-weight: 500;}
.black-button:hover{opacity: 0.7;transition: 0.2s ease;}

.transparent-button{width: 200px;height: 58px;background-color: transparent;border: 1px solid var(--black-color);border-radius: 12px;display: flex;flex-direction: column;justify-content: center;align-items: center;color: var(--black-color);font-size: var(--btn-size);text-decoration: none;transition: 0.2s ease;font-weight: 500;}
.transparent-button:hover{opacity: 0.7;transition: 0.2s ease;}

.green-button{width: 200px;height: 58px;background-color: var(--green-color);border-radius: 12px;display: flex;flex-direction: column;justify-content: center;align-items: center;color: var(--black-color);font-size: var(--btn-size);text-decoration: none;border: 1px solid var(--black-color);transition: 0.2s ease;font-weight: 500;}
.green-button:hover{opacity: 0.7;transition: 0.2s ease;}

.message-text{max-width: fit-content;padding: 10px;border-top-left-radius: 80px;border-bottom-left-radius: 80px;border-top-right-radius: 24px;border-bottom-right-radius: 4px;background-color: var(--beige-color);}

#section{margin-top: 100px;}
#section-small{margin-top: 50px;}

.section-title{max-width: 752px;margin: auto;text-align: center;}

.content{display: flex;flex-direction: column;gap: 20px;}
.content-inside{display: flex;flex-direction: column;gap: 20px;}
.content ul, .content-inside ul, .content ol, .content-inside ol{padding-left: 20px;}
.content ul li, .content-inside ul li, .content ol li, .content-inside ol li{padding-bottom: 5px;}
.content iframe{max-width: 100%;}

.small-title{width: fit-content;margin: auto;padding: 5px 10px;background-color: var(--beige-color);border-radius: 8px;}
.small-title, .small-title p{font-size: 14px;line-height: 18px;}

.price-button{width: 100%;height: 45px;display: flex;justify-content: center;align-items: center;background-color: var(--black-color);border-radius: 12px;color: var(--white-color);font-weight: 400;text-decoration: none;}
.price-button:hover{opacity: 0.7;}

.breacrumbs{max-width: 1440px;margin: auto;padding: 0px 20px;}
.breacrumbs p{font-size: 14px;line-height: 18px;}
.breacrumbs a{color: var(--black-color);text-decoration: none;}
.breacrumbs a:hover{opacity: 0.7;}

.page-id-9 main{padding-top: 40px;}
main{padding-top: 100px;}

.hiddenscrollontoggle{overflow: hidden!important;}

@media screen and (max-width:600px) and (min-width:200px){
    main{padding-top: 70px;}
}

/*Header code starts*/
header{position: fixed;top: 0px;padding: 20px 20px 0px 20px;z-index: 100;width: 100%;display: block;transition: top 0.3s;}
.header-inside{max-width: 1440px;margin: auto;position: relative;background-color: var(--white-color);padding: 5px;border-radius: 18px;}
.header-left{margin: auto 0px;}
.header-left a{display: flex;justify-content: start;align-items: center;padding: 5px 0px 0px 15px;}
.header-left a img{max-width: 120px;}
.header-center{margin: auto;}
.header-center ul{list-style: none;display: flex;gap: 40px;}
.header-center ul li a{color: var(--black-color);text-decoration: none;font-size: var(--text-14px);font-weight: 500;transition: 0.1s ease;}
.header-center ul li a.active{background-color: var(--background-color);padding: 10px 8px;border-radius: 8px;}
.header-center ul li a:hover{opacity: 0.7;transition: 0.1s ease;}
.header-right{margin: 0px 0px 0px auto;display: flex;gap: 20px;align-items: center;}
.header-right .mobile-button{display: none;width: 40px;height: 40px;flex-direction: column;gap: 5px;justify-content: center;align-items: center;border-radius: 12px;cursor: pointer;transition: 0.2s ease;}
.header-right .mobile-button span{width: 27px;height: 2px;background-color: var(--black-color);transition: 0.2s ease;}
.header-right .access-element{display: none;}
.access-element .black-button{max-width: 100%;width: 140px;height: 36px;}

.header-overlay{width: 100%;max-width: 100%;height: 0dvh;position: fixed;top: 0px;left: 0px;background-color: var(--white-color);border: 0px;padding: 12px 25px;opacity: 0;visibility: hidden;z-index: 99;;transition: 0.7s ease;}
.header-overlay #menu-overlay-menu{margin-top: 100px;}
.header-overlay ul{list-style: none;}
.header-overlay ul li{text-align: left;border-bottom: 1px solid var(--grey-color);padding-bottom: 10px;margin-bottom: 10px;}
.header-overlay ul li a{font-size: 22px;line-height: 30px;color: var(--black-color);font-weight: 500;text-decoration: none;}
.header-overlay .overlay-button{padding-top: 20px;}
.header-overlay .overlay-button .black-button{width: 170px;height: 48px;}
.header-overlay .overlay-button li a{color: var(--white-color);}
.overlay-button li{border-bottom: 0px!important;}
.overlay-button li a{font-size: 16px!important;line-height: 20px!important;}

.header-overlay.open{height: 100dvh;opacity: 1;visibility: visible;transition: 0.7s ease;}
header.open .header-right .mobile-button span{transform: rotate(45deg) translateX(3px) translateY(2px);transition: 0.1s ease;}
header.open .header-right .mobile-button span:nth-child(2){transform: rotate(-45deg) translateX(3px) translateY(-2px);transition: 0.1s ease;}


@media screen and (max-width:920px) and (min-width:700px){
    .header-right .black-button{width: 170px;}
}
@media screen and (max-width:699px) and (min-width:200px){
    .header-right{gap: 10px;}
    .header-right .desktop-button{display: none;}
    .header-right .mobile-button{display: flex;}
    .header-center ul{display: none;}
    .header-left img{max-width: 120px;}
    .header-right .access-element{display: flex;}
}
@media screen and (max-width:500px) and (min-width:421px){
    .header-right{gap: 5px;}
}
@media screen and (max-width:420px) and (min-width:200px){
    .header-right{gap: 10px;}
    .access-element .black-button{width: 110px;}
    .header-left a img{max-width: 90px;}
}
/*Header code ends*/

/*Main code starts*/
.hero-section{width: 100%;position: relative;margin-top: 140px!important;}
.hero-titles{position: relative;max-width: 900px;margin: auto;display: flex;flex-direction: column;gap: 20px;text-align: center;}
.hero-titles p{max-width: 700px;margin: auto;}
.hero-titles h6, .hero-titles h1, .hero-titles p{opacity: 0;}
.hero-buttons{display: flex;gap: 20px;justify-content: center;opacity: 0;}
.hero-titles-after{
    position: absolute;
    bottom: 59px;
    right: 160px;
    opacity: 0;
}
.hero-titles-after img{ width: 70px;height: 67px;}

@media screen and (max-width: 937px) and (min-width: 200px){
    .hero-titles-after{display: none;}
}

.hero-image{width: 100%;position: relative;margin-top: 50px;opacity: 0;max-width: 1200px;margin: auto;}
.hero-image img{width: 100%;height: 100%;object-fit: cover;}

/*.hero-bottom-animation{position: relative;max-width: 720px;height: 448px;max-height: 448px;margin: 50px auto 0px auto;padding: 20px;background-color: var(--white-color);border-radius: 24px;border: 8px solid var(--beige-color);}*/
.hero-bottom-animation{position: relative;max-width: 720px;height: auto;max-height: auto;margin: 50px auto 0px auto;padding: 20px;border-radius: 24px;border: 8px solid var(--beige-color);background-color: var(--white-color);overflow: hidden;}
.hero-bottom-animation-inside{display: flex;flex-direction: column;gap: 20px;}
.hero-bottom-animation-inside-top{height: 310px;border: 1px dashed var(--beige-color);border-radius: 8px;border-width: 2px;}
.hero-bottom-animation-inside-top a{width: 100%;height: 100%;display: flex;flex-direction: column;justify-content: center;align-items: center;gap: 10px;text-align: center;color: var(--black-color);text-decoration: none;}
.hero-bottom-animation-inside-top a p{font-weight: 300;}
.hero-bottom-animation-inside-top .icon-element{width: 80px;}
.hero-bottom-animation-inside-bottom{display: flex;flex-direction: column;gap: 10px;align-items: center;}
.hero-bottom-animation-inside-bottom p{font-weight: 300;}
.hero-bottom-animation .hero-bottom-buttons{display: flex;gap: 10px;}
.hero-bottom-animation .hero-bottom-buttons a{color: var(--black-color);text-decoration: none;transition: 0.1s ease;}
.hero-bottom-animation .hero-bottom-buttons a:hover{opacity: 0.7;transition: 0.1s ease;}
.hero-bottom-animation .hero-bottom-buttons .button{width: fit-content;height: 26px;display: flex;justify-content: center;align-items: center;gap: 10px;border: 1px solid var(--black-color);border-radius: 80px;background: transparent;padding: 0px 10px;font-weight: 400;}
.hero-bottom-animation .hero-bottom-buttons .button img{width: 14px;}
.hero-bottom-animation .hero-bottom-buttons .button:nth-child(1) img{width: 9px;}
.hero-bottom-animation .hero-bottom-buttons a p{font-weight: 400;}

.hero-bottom-animation .titles{position: absolute;top: 0px;left: 0px;width: 100%;display: flex;justify-content: space-between;padding: 10px 140px 0px 60px;}
.hero-bottom-animation .client-text p, .hero-bottom-animation .designer-text p{max-width: fit-content;height: auto;position: absolute;padding: 10px;border-top-left-radius: 80px;border-bottom-left-radius: 80px;border-top-right-radius: 24px;border-bottom-right-radius: 4px;background-color: var(--beige-color);}
.hero-bottom-animation .client-text p:nth-child(1){top: 40px;left: -115px;}
.hero-bottom-animation .client-text p:nth-child(2){top: 90px;left: -140px;}
.hero-bottom-animation .client-text p:nth-child(3){bottom: 30px;left: -116px;}
.hero-bottom-animation .client-text p:nth-child(4){bottom: -20px;left: -156px;}

.hero-bottom-animation .designer-text p:nth-child(1){top: 40px;right: -64px;background-color: var(--green-color);}
.hero-bottom-animation .designer-text p:nth-child(2){top: 90px;right: -64px;background-color: var(--yellow-color);}

.hero-bottom-animation,
.hero-bottom-animation .client-text p,
.hero-bottom-animation .designer-text p{opacity: 0;}

@media screen and (max-width:1038px) and (min-width:992px){
    .hero-bottom-animation .titles{padding: 10px 60px 0px 60px;}
    .hero-bottom-animation .client-text p:nth-child(1){left: -90px;}
    .hero-bottom-animation .client-text p:nth-child(2){left: -120px;}
    .hero-bottom-animation .client-text p:nth-child(3){left: -91px;}
    .hero-bottom-animation .client-text p:nth-child(4){left: -134px;}
}
@media screen and (max-width:991px) and (min-width:926px){
    .hero-bottom-animation .titles{padding: 10px 60px 0px 60px;}
    .hero-bottom-animation .client-text p:nth-child(1){left: -60px;}
    .hero-bottom-animation .client-text p:nth-child(2){left: -90px;}
    .hero-bottom-animation .client-text p:nth-child(3){left: -61px;}
    .hero-bottom-animation .client-text p:nth-child(4){left: -104px;}
}
@media screen and (max-width:925px) and (min-width:870px){
    .hero-bottom-animation .titles{padding: 10px 60px 0px 60px;}
    .hero-bottom-animation .client-text p:nth-child(1){left: -30px;}
    .hero-bottom-animation .client-text p:nth-child(2){left: -60px;}
    .hero-bottom-animation .client-text p:nth-child(3){left: -31px;}
    .hero-bottom-animation .client-text p:nth-child(4){left: -74px;}
}
@media screen and (max-width:869px) and (min-width:808px){
    .hero-bottom-animation .titles{padding: 10px 60px 0px 60px;}
    .hero-bottom-animation .client-text p:nth-child(1){left: 0px;}
    .hero-bottom-animation .client-text p:nth-child(2){left: -30px;}
    .hero-bottom-animation .client-text p:nth-child(3){left: 1px;}
    .hero-bottom-animation .client-text p:nth-child(4){left: -44px;}

    .hero-bottom-animation .designer-text p:nth-child(1){right: -34px;}
    .hero-bottom-animation .designer-text p:nth-child(2){right: -34px;}
}
@media screen and (max-width:807px) and (min-width:200px){
    .hero-bottom-animation .titles{padding: 10px 60px 0px 60px;}
    .hero-bottom-animation .client-text p:nth-child(1){left: 0px;}
    .hero-bottom-animation .client-text p:nth-child(2){left: 0px;}
    .hero-bottom-animation .client-text p:nth-child(3){left: 0px;}
    .hero-bottom-animation .client-text p:nth-child(4){left: 0px;}

    .hero-bottom-animation .designer-text p:nth-child(1){right: 0px;}
    .hero-bottom-animation .designer-text p:nth-child(2){right: 0px;}
}
@media screen and (max-width:652px) and (min-width:200px){
    .hero-bottom-animation .titles{padding: 10px 30px 0px 30px;}
    .hero-bottom-animation .images{justify-content: center;align-items: end;}
}
@media screen and (max-width:610px) and (min-width:200px){
    .hero-bottom-animation .designer-text p:nth-child(1){top: 190px;right: 0px;}
    .hero-bottom-animation .designer-text p:nth-child(2){top: 240px;right: 0px;}
}

.featureson-section{margin-bottom: 100px;}
.featureson-section-title{width: 100%;position: relative;margin-bottom: 30px;text-align: center;}
.featureson-section-title h2{text-align: center;}
.featureson-section-bottom{width: 100%;position: relative;display: flex;gap: 20px;justify-content: center;flex-wrap: wrap;}
.featureson-section-bottom a img{max-width: 220px;height: 65px;object-fit: cover;}

.clients{width: 100%;position: relative;text-align: center;overflow: hidden;}
.clients-inside{border-top: 1px solid var(--black-color);border-bottom: 1px solid var(--black-color);padding: 20px 0px;}
.clients-inside #client-logo{--width: max(10vw, 9rem);width: var(--width);aspect-ratio: 16 / 9;text-align: center;display: flex;justify-content: center;align-items: center;padding: 20px;background-color: var(--beige-color);border-radius: 12px;}
.clients-inside #client-logo img{width: 100%;height: 100%;object-fit: contain;}
/*.swiper-wrapper{-webkit-transition-timing-function:linear!important; -o-transition-timing-function:linear!important;transition-timing-function:linear!important;}*/

.swiper-slide{padding-bottom: 20px!important;}
.swiper-pagination-bullet-active{background-color: var(--black-color)!important;}
.swiper-pagination{top: 97%!important;height: 20px!important;}

.before-and-after-section{width: 100%;position: relative;}
.before-and-after-section .flex-elements{display: grid;grid-template-columns: repeat(2,1fr);border-bottom: 1px solid var(--black-color);border-top: 1px solid var(--black-color);}
.before-and-after-section .before-elements{border-right: 1px solid var(--black-color);}
.before-and-after-section .before-elements,
.before-and-after-section .after-elements{padding-top: 150px;padding-bottom: 150px;}
.before-and-after-section .before-elements{padding-right: 50px;}
.before-and-after-section .after-elements{padding-left: 50px;}
.before-and-after-section .before-elements .titles,
.before-and-after-section .after-elements .titles{display: flex;flex-direction: column;gap: 20px;margin-bottom: 70px;}
.before-and-after-section .before-elements .small-title,
.before-and-after-section .after-elements .small-title{margin: 0px;}
.before-and-after-section .before-elements ul,
.before-and-after-section .after-elements ul{padding-left: 20px;list-style: none;}
.before-and-after-section .before-elements ul li,
.before-and-after-section .after-elements ul li{position: relative;display: flex;align-items: center;gap: 20px;padding-bottom: 20px;}
.before-and-after-section .before-elements ul li::before{content: "×";
    width: 30px;
    height: 30px;
    background-color: var(--red-color);
    border-radius: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    /*background-image: url(./svg/check-grey.svg);*/
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;}
.before-and-after-section .after-elements ul li::before{content: "✓";
    width: 30px;
    height: 30px;
    background-color: var(--green-color);
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    /*background-image: url(./svg/check-grey.svg);*/
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;}

@media screen and (max-width:900px) and (min-width:700px){
    .before-and-after-section .before-elements{padding-right: 20px;}
    .before-and-after-section .after-elements{padding-left: 20px;}
    .before-and-after-section .before-elements, .before-and-after-section .after-elements {
        padding-top: 100px;
        padding-bottom: 100px;
    }
}
@media screen and (max-width:699px) and (min-width:200px){
    .before-and-after-section .flex-elements{grid-template-columns: repeat(1,1fr);}
    .before-and-after-section .before-elements{padding-right: 20px;border-right: 0px;border-bottom: 1px solid var(--black-color);}
    .before-and-after-section .after-elements{padding-left: 0px;}
    .before-and-after-section .before-elements, .before-and-after-section .after-elements {
        padding-top: 70px;
        padding-bottom: 70px;
    }
    .before-and-after-section .before-elements ul, .before-and-after-section .after-elements ul{padding-left: 0px;}
    .before-and-after-section .before-elements .titles, .before-and-after-section .after-elements .titles{margin-bottom: 40px;}
}

.features-section{margin-top: 150px!important;}
.features-section .features-title{max-width: 752px;margin: auto;text-align: center;}
.features-section .features-bottom{max-width: 1000px;margin: 60px auto 0px auto;}
.feature-card{width: 100%;position: relative;border-radius: 24px;border: 1px solid var(--black-color);overflow: hidden;}
.feature-card .feature-card-title{display: flex;flex-direction: column;gap: 40px;padding: 20px 20px 0px 20px;}
.feature-card p{font-size: 16px;line-height: 22px;}
.feature-card .feature-image{width: 100%;margin-top: 40px;position: relative;}
.feature-card .feature-image .image-inside{position: relative;}
.feature-card .feature-image img{width: 70%;}
.feature-card .feature-image .image-inside img:nth-child(2){position: absolute;width: 100%;height: auto;aspect-ratio: 243/112;object-fit: cover;max-width: 243px;right: 20px;top: -16px;}

@media screen and (max-width:958px) and (min-width:751px){
    .feature-card .feature-image .image-inside img:nth-child(2){max-width: 173px;right: 40px;}
}
@media screen and (max-width:750px) and (min-width:660px){
    .feature-card .feature-image .image-inside img:nth-child(2){max-width: 243px;right: 90px;}
}
@media screen and (max-width:659px) and (min-width:474px){
    .feature-card .feature-image .image-inside img:nth-child(2){max-width: 173px;right: 40px;}
}
@media screen and (max-width:473px) and (min-width:416px){
    .feature-card .feature-image .image-inside img:nth-child(2){max-width: 173px;right: 10px;}
}
@media screen and (max-width:415px) and (min-width:200px){
    .feature-card .feature-image .image-inside img:nth-child(2){max-width: 133px;right: 10px;}
}

.feature-card:nth-child(1){background-color: var(--black-color);color: var(--white-color);}
.feature-card:nth-child(1) .feature-image{padding: 0px 20px 0px 20px;display: flex;justify-content: end;}
.feature-card:nth-child(2){background-color: var(--orange-color);}

.features-section .features-bottom .grid-2-element{padding-top: 30px;}
.features-section .features-bottom .grid-2-element .feature-card:nth-child(1){background-color: var(--beige-color);color: var(--black-color);}
.features-section .features-bottom .grid-2-element .feature-card:nth-child(1) .feature-image{display: flex;justify-content: start;padding: 0px 20px 20px 20px;}

.feature-card-right{position: relative;max-width: 390px;}

.feature-card-right .feature-card{background-color: var(--white-color)!important;height: 70%!important;}
.feature-card-right .feature-card h4{position: relative;display: flex;justify-content: space-between;gap: 10px;}
.feature-card-right .feature-card h4:after{content: "+ Add";border: 1px solid #dcdcdc;border-radius: 8px;padding: 10px;font-size: 12px;line-height: 14px;display: flex;align-items: center;justify-content: center;}
.feature-card-right .feature-card .feature-image{padding: 0px 20px 20px 20px;margin-top: 20px;}
.feature-card-right .feature-card .feature-image img{width: 100%;}

.feature-card-bottom{position: absolute;bottom: -110px;right: 0px;left: 0px;}
.ellipse{max-width: 100%;margin: auto;position: relative;}
.ellipse-container{width: 612px;max-width: 100%;margin: auto;}
.ellipse-container img{width: 100%;height: 100%;object-fit: cover;}
.ellipse-title{position: absolute;left: 50%;top: -25px;width: 60px;height: 60px;display: flex;flex-direction: column;justify-content: center;align-items: center;border: 1px solid var(--black-color);border-radius: 80px;background-color: var(--background-color);}
.ellipse-text{position: absolute;top: 50%;transform: translate(0%,-50%);text-align: center;}
.ellipse-text span:nth-child(1){background-color: var(--yellow-color);border-radius: 12px;padding: 2px 5px;}
.ellipse-text span:nth-child(2){background-color: var(--orange-color);border-radius: 12px;padding: 2px 5px;}
.ellipse-text span:nth-child(3){background-color: var(--blue-color);border-radius: 12px;padding: 2px 5px;}

.features-button{margin-top: 140px;display: flex;justify-content: center;}

.benefits-section{background-color: var(--beige-color);}
.benefits-inside{width: 100%;background: url(./svg/benefits-background.svg);background-position: center;background-repeat: no-repeat;background-size: cover;padding: 100px 0px;}
.benefits-section .small-title{background-color: var(--background-color);}
.benefits-section .benefits-title{text-align: center;}
.benefits-section .benefits-bottom{padding-top: 80px;}
.benefit-card{width: 100%;position: relative;padding: 20px 20px 40px 20px;border: 1px solid var(--black-color);border-radius: 24px;background-color: var(--white-color);}
.benefit-card .benefit-card-top{position: relative;display: flex;justify-content: space-between;align-items: center;gap: 20px;}
.benefit-card .benefit-card-top img{width: 25px;height: 25px;}
.benefit-card .benefit-card-bottom{padding: 40px 0px 0px 0px;}
.benefit-card .benefit-card-bottom ul{list-style: none;}
.benefit-card .benefit-card-bottom ul li{display: flex;align-items: center;gap: 20px;border-bottom: 1px solid var(--black-color);padding: 0px 0px 10px 40px;margin-bottom: 10px;}
.benefit-card .benefit-card-bottom ul li:last-child{border-bottom: 0px;}

.benefit-card-image{width: 100%;position: relative;display: grid;grid-template-columns: 0.4fr 1fr;gap: 20px;align-items: center;border: 1px solid var(--black-color);border-radius: 24px;background-color: var(--orange-color);padding: 10px 20px;}
.benefit-card-image img{width: 100%;max-width: 129px;}

.benefits-left, .benefits-right{display: flex;flex-direction: column;gap: 30px;}
.benefits-left ul li{position: relative;}
.benefits-left ul li::before{content: "";position: absolute;left: 0px;width: 25px;height: 25px;background: url(./svg/check-grey.svg);background-position: center;background-repeat: no-repeat;background-size: cover;}
.benefits-right ul li{position: relative;}
.benefits-right ul li::before{content: "";position: absolute;left: 0px;width: 25px;height: 25px;background: url(./svg/check-white.svg);background-position: center;background-repeat: no-repeat;background-size: cover;}

.benefits-right .benefit-card-image{grid-template-columns: 1fr 0.7fr;background-color: var(--yellow-color);}
.benefits-right .benefit-card-image img{width: 100%;max-width: 286px;}
.benefits-right .benefit-card{background-color: var(--black-color);color: var(--white-color);}
.benefits-right .benefit-card .benefit-card-bottom ul li{border-bottom: 1px solid var(--white-color);}
.benefits-right .benefit-card .benefit-card-bottom ul li:last-child{border-bottom: 0px;}

.pricing-section{background-color: var(--white-color);margin-top: 0px!important;}
.pricing-section .pricing-inside{padding: 100px 0px;}
.pricing-section .pricing-inside .pricing-title{max-width: 752px;margin: auto;text-align: center;}

.pricing-center{padding: 40px 0px;}
.pricing-card{width: 100%;position: relative;display: flex;flex-direction: column;gap: 40px;border: 1px solid var(--black-color);padding: 20px 20px 40px 20px;border-radius: 12px;}
.pricing-card-title{display: flex;flex-direction: column;gap: 15px;}
.pricing-card .pricing-card-center .price{padding-bottom: 27px;}
.pricing-card:last-child .pricing-card-center .price{padding-bottom: 20px;}
.pricing-card-center .price .price-top{display: flex;align-items: end;}
.pricing-card-center .price .price-top h2{font-weight: 700;line-height: 40px;}
.pricing-card-center .price .price-top h4{font-weight: 700;}
.pricing-card-bottom h6{padding-bottom: 20px;}
.pricing-card-bottom ul{list-style: none;}
.pricing-card-bottom ul li{display: flex;align-items: center;gap: 20px;font-size: 14px;line-height: 22px;padding-bottom: 10px;position: relative;}
.pricing-card-bottom ul li .check{width: 20px;height: 20px;display: flex;justify-content: center;align-items: center;background-image: url(./svg/check-grey.svg);background-position: center;background-repeat: no-repeat;background-size: cover;}
.pricing-card-bottom ul li::before{content: "";width: 20px;height: 20px;display: flex;justify-content: center;align-items: center;background-image: url(./svg/check-grey.svg);background-position: center;background-repeat: no-repeat;background-size: cover;}
.pricing-card:last-child .pricing-card-bottom ul li::before{content: "";width: 20px;height: 20px;display: flex;justify-content: center;align-items: center;background-image: url(./svg/check-white.svg);background-position: center;background-repeat: no-repeat;background-size: cover;}

.pricing-card:nth-child(2){background-color: var(--yellow-color);}
.pricing-card:nth-child(3){background-color: var(--green-color);}
.pricing-card:last-child{background-color: var(--black-color);color: var(--white-color);}
.pricing-card:last-child .price-button{border: 1px solid var(--white-color);}

.pricing-card .price-top .month,
.pricing-card .price-top .year{display: flex;align-items: end;}
.pricing-card .price-top .month h2,
.pricing-card .price-top .year h2{font-size: 42px!important;line-height: 40px;}

.pricing-card .price-top .month{display: none;}
.pricing-card.open .price-top .month{display: flex;}
.pricing-card.open .price-top .year{display: none;}
.pricing-card .price-top .last{display: none;}

.pricing-card:last-child .price-top .month{display: none;}
.pricing-card:last-child .price-top .year{display: none;}
.pricing-card:last-child .price-top .last{display: flex;max-width: 170px;}
.pricing-card:last-child .price-top .last h4{font-weight: 400;}

.pricing-bottom{max-width: 600px;margin: auto;display: flex;flex-direction: column;gap: 20px;}
.pricing-bottom-button{display: grid;grid-template-columns: repeat(2,1fr);gap: 10px;}
.pricing-bottom-button button{width: 50%;height: 48px;display: flex;flex-direction: column;justify-content: center;align-items: center;background-color: var(--background-color);border-radius: 12px;border: none;color: var(--black-color);}
.pricing-bottom-button button:nth-child(1){margin-left: auto;}
.pricing-section-page .pricing-bottom-button button{background-color: var(--white-color);}
.pricing-bottom-content{text-align: center;}
.pricing-bottom-content p{font-size: 14px;line-height: 20px;}

.faq-container{max-width: 920px;margin: 40px auto 0px auto;display: flex;flex-direction: column;gap: 20px;}
.faq{width: 100%;position: relative;padding: 20px;background-color: var(--white-color);border-radius: 12px;border: 1px solid var(--black-color);}
.faq .question{display: flex;gap: 20px;justify-content: space-between;align-items: center;cursor: pointer;}
.faq-button{width: 30px;height: 30px;display: flex;justify-content: center;align-items: center;}
.faq-button span{width: 20px;height: 2px;background-color: var(--black-color);transition: 0.2s ease;}
.faq-button span:nth-child(2){position: absolute;transform: rotate(90deg);transition: 0.2s ease;}
.faq_answer_container{display: none;}
.faq_answer{padding: 20px;}
.faq.open .faq-button span:nth-child(2){display: none;transition: 0.2s ease;}
.faq-buttons{display: flex;justify-content: center;padding-top: 40px;}

.started-section{margin-top: 140px!important;}
.started-inside{width: 100%;position: relative;padding: 100px 20px 50px 20px;background-color: var(--black-color);border-radius: 24px;color: var(--white-color);}
.started-inside .started-top{display: flex;flex-direction: column;gap: 20px;justify-content: center;align-items: center;padding-bottom: 50px;text-align: center;}
.started-inside .started-bottom{text-align: center;}

.all-page-hero-inside{padding: 40px 0px;border-bottom: 1px solid var(--beige-color);}
.all-page-hero-inside .grid-2-elements{gap: 50px;}
.all-page-hero-inside .content{max-width: 530px;gap: 20px;}
.all-page-hero-inside .element-left{margin: auto 0px;}
.all-page-hero-inside .element-right img{width: 100%;max-width: 419px;aspect-ratio: 419/364;object-fit: cover;display: block;float: right;}

.all-page-hero-inside h1, .all-page-hero-inside p, .all-page-hero-inside img{opacity: 0;}

.fun-section-inside{border-bottom: 1px solid var(--beige-color);padding-bottom: 50px;}
.fun-section-inside h2, .fun-section-inside h5{opacity: 0;}
.fun-section-bottom{padding-top: 40px;}
.fun-card{width: 100%;position: relative;background-color: var(--white-color);border: 1px solid var(--black-color);border-radius: 24px;padding: 20px 20px 60px 20px;}
.fun-card .fun-card-top{padding-bottom: 120px;}
.fun-card .fun-card-bottom{max-width: 449px;}
.fun-card .fun-card-bottom p,
.fun-card .fun-card-bottom ul li,
.fun-card .fun-card-bottom ol li{font-size: 16px;line-height: 24px;}

.product-features-element{margin-top: 100px;}
.product-features-element .product-features-image{width: 100%;position: relative;}
.product-features-element .product-features-image .image{width: 100%;position: relative;padding: 40px 20px;background-color: var(--beige-color);border-radius: 24px;}
.product-features-element .product-features-image .image img{width: 100%;height: auto;aspect-ratio: 500/330;object-fit: contain;display: block;}
.product-features-element .product-features-content{width: 100%;position: relative;}
.product-features-element .product-features-content .content-inside{width: 90%;}
.product-features-element .product-features-content .content-inside p{font-size: var(--text-16px);line-height: 24px;font-weight: 400;letter-spacing: 0.2px;}
.product-features-element .product-features-content .content-inside ul{list-style: none;}
.product-features-element .product-features-content .content-inside ul li{position: relative;padding-left: 40px;font-size: var(--text-16px);line-height: 24px;font-weight: 400;letter-spacing: 0.2px;border-bottom: 1px solid var(--black-color);padding-bottom: 15px;margin-bottom: 15px;}
.product-features-element .product-features-content .content-inside ul li:before{content: "";position: absolute;left: 0px;background-image: url(./svg/check-grey.svg);background-position: center;width: 20px;height: 20px;display: flex;justify-content: center;align-items: center;}
.product-features-element .product-features-content .content-inside ul li:last-child{border: 0px;}
.product-features-element .product-features-content button{width: 100%;position: relative;background-color: var(--black-color);border: 0px;border-radius: 8px;height: auto;color: var(--white-color);font-size: var(--text-16px);padding: 20px;}

.product-features-element.reverse .product-features-content .content-inside ul{list-style: disc;padding-left: 20px;}
.product-features-element.reverse .product-features-content .content-inside ul li{padding: 0px;border-bottom: 0px;margin-bottom: 0px;}
.product-features-element.reverse .product-features-content .content-inside ul li:before{display: none;}

#upload-feature .product-features-image img:nth-child(2){position: absolute;width: 100%;aspect-ratio: 250/140;max-width: 250px;left: 50%;top: 63%;transform: translate(-10%);}
#upload-feature .product-features-image img:nth-child(3){position: absolute;top: 64%;left: 10%;max-width: 120px;}

#dashboard-feature .product-features-image img:nth-child(2){max-width: 200px;position: absolute;top: 4%;right: 2%;aspect-ratio: 200/200;}

#profile-feature .product-features-image img:nth-child(2){position: absolute;bottom: 0px;right: 12px;max-width: 300px;}

#collaboration-feature .product-features-image img:nth-child(2){max-width: 300px;aspect-ratio: 300/80;position: absolute;right: 20px;bottom: 135px;}
#collaboration-feature .product-features-image img:nth-child(3){max-width: 300px;aspect-ratio: 300/100;position: absolute;right: 20px;bottom: 37px;}

.sharing-and-client{width: 100%;position: relative;margin-top: 100px;}
.sharing-and-client .flex-elements{display: flex;max-width: 1440px;margin: auto;}
.sharing-element{width: 100%;background-color: var(--white-color);}
.client-element{width: 100%;background-color: var(--green-color);}
.sharing-and-client .inside-element{max-width: 600px;padding: 100px 20px;display: flex;flex-direction: column;gap: 30px;}
.sharing-and-client .client-element .inside-element{padding: 100px 20px 100px 40px;}
.sharing-and-client .sharing-element .inside-element{margin-left: auto;}
.sharing-and-client .inside-element .image{max-width: 300px;margin: auto;position: relative;padding: 20px;border-radius: 12px;background-color: var(--white-color);}
.sharing-and-client .inside-element .image img{width: 100%;max-width: 264px;height: auto;aspect-ratio: 264/362;object-fit: cover;display: block;}
.sharing-and-client .sharing-element .inside-element .image{background-color: var(--orange-color);}
.sharing-and-client .content{max-width: 520px;}
.sharing-and-client .content p{font-size: var(--text-16px);line-height: 24px;letter-spacing: 0.2px;}

.use-section{width: 100%;position: relative;margin-top: 100px!important;}
.use-inside{border-top: 1px solid var(--beige-color);border-bottom: 1px solid var(--beige-color);padding: 50px 0px;}
.use-box{width: 100%;position: relative;border: 1px solid var(--black-color);border-radius: 24px;background-color: var(--green-color);padding: 40px;margin-top: 30px;}
.use-box-image{position: relative;}
.use-box-image .orange{width: 40px;height: 40px;position: absolute;left: -10px;top: -10px;}
.use-box-image img{width: 100%;max-width: 422px;height: auto;aspect-ratio: 422/314;object-fit: contain;display: block;}
.use-box-content{margin: auto;}
.use-box-content ul{padding-left: 20px;}
.use-box-content ul li{font-size: var(--text-16px);line-height: 24px;font-weight: 400;letter-spacing: 0.2px;}


.first-section-blog-inside{width: 100%;position: relative;background-color: var(--beige-color);padding: 40px;border-radius: 24px;display: grid;grid-template-columns: 0.7fr 1fr;gap: 40px;}
.first-section-blog-left a{color: var(--black-color);text-decoration: none;}
.first-section-blog-left a:hover{opacity: 0.7;}
.first-section-blog-right .image{border-radius: 12px;overflow: hidden;}
.first-section-blog-right .image img{width: 100%;height: auto;aspect-ratio: 654/460;object-fit: cover;display: block;transition: 0.2s ease;}
.first-section-blog-right .image img:hover{transform: scale(1.1);transition: 0.2s ease;}

.first-section-blog-left .author{margin-top: 40px;}
.author{display: flex;gap: 10px;align-items: center;}
.author .logo{width: 32px;height: 32px;border-radius: 32px;background-color: var(--green-color);display: flex;justify-content: center;align-items: center;}
.author .logo img{width: 15px;}

.blog-elements{padding-top: 20px;}
.blog-elements .grid-3-elements{row-gap: 60px;}
.blog-card{width: 100%;position: relative;}
.blog-image{width: 100%;position: relative;padding: 20px;background-color: var(--beige-color);border-radius: 24px;overflow: hidden;}
.blog-image a{display: block;overflow: hidden;transition: 0.2s ease;}
.blog-image img{width: 100%;height: auto;aspect-ratio: 340/210;object-fit: cover;display: block;border-radius: 12px;overflow: hidden;transition: 0.2s ease;}
.blog-image img:hover{transform: scale(1.1);transition: 0.2s ease;}
.blog-details{padding-top: 20px;display: flex;flex-direction: column;gap: 20px;}
.blog-details a{color: var(--black-color);text-decoration: none;}

.blog-inside{max-width: 800px;margin: auto;}
.blog-inside-elements{display: flex;flex-direction: column;gap:0px;padding-bottom: 70px;}
.blog-inside-elements .content{width: 800px;max-width: 100%;margin: auto;}
.blog-inside-elements .image{width: 100%;max-width: 1200px;margin: 20px auto 40px auto;position: relative;border-radius: 24px;overflow: hidden;}
.blog-inside-elements .image img{width: 100%;height: auto;aspect-ratio: 1200/720;object-fit: cover;display: block;overflow: hidden;}
.blog-inside-elements .content{font-weight: 400;}
.blog-inside-elements .content ul, .blog-inside .content ol{padding-left: 20px;}
.blog-inside-elements .content p, .blog-inside .content ul li, .blog-inside .content ol li{font-size: 19px;line-height: 28px;font-weight: 400;}
.blog-inside-elements .content .author p{font-size: 14px!important;line-height: 20px!important;font-weight: 400!important;}
.blog-inside-elements .content a{color: var(--black-color);}
.blog-inside-elements .content a:hover{opacity: 0.7;}
.blog-inside-elements .content ul li, .blog-inside .content ol li{padding-bottom: 5px;}
.blog-inside-elements .content img{width: 100%;position: relative;height: auto;}
.blog-inside-elements .content .author img{width: 15px;}

.blog-elements-inside-page{border-top: 1px solid var(--beige-color);padding-top: 20px;}
.blog-elements-inside-page .title{padding-bottom: 60px;}

.billing-packages{max-width: 400px;height: 50px;padding: 5px;background-color: var(--beige-color);border-radius: 12px;display: grid;grid-template-columns: repeat(2,1fr);margin: 20px auto 0px auto;}
.billing-packages button{display: flex;flex-direction: column;justify-content: center;align-items: center;border-radius: 7px;border: 0px;background-color: transparent;cursor: pointer;color: var(--black-color);}
.billing-packages button.active{background-color: var(--white-color);}

.compare-plans-section .pagewrap{padding-top: 40px;}
.compare-plans-section .title{padding: 40px 0px;text-align: left;border-top: 1px solid var(--beige-color);}
.compare-plans-section{overflow: hidden;}
.compare-plans-section .section-table{overflow: auto;}
table{width: 100%;position: relative;overflow: hidden;}
table tbody{width: 100%;display: flex;flex-direction: column;overflow: auto;padding-bottom: 20px;}
table tr{width: 100%;position: relative;display: grid;grid-template-columns: 1fr 0.4fr 0.4fr 0.4fr 0.4fr;gap: 30px;border-bottom: 1px solid var(--beige-color);padding: 20px 0px;}
.table-titles{border-bottom: 1px solid var(--black-color);padding: 0px 0px 10px 0px;}

#studio-pricing-element .product-features-image{display: flex;flex-direction: column;gap: 20px;padding: 50px;background-color: var(--black-color);border-radius: 24px;}
#studio-pricing-element .product-features-image .studio-image img{width: 48px;}
#studio-pricing-element .product-features-image .text{max-width: 400px;padding-top: 50px;color: var(--white-color);}
#studio-pricing-element .product-features-image .text h2{font-size: 42px!important;line-height: 52px!important;}

.how-it-works{background-color: var(--white-color);padding: 150px 0px;}
.how-it-works .section-title .content{padding: 20px 0px 40px 0px;max-width: 715px;margin: auto;}
.how-it-works .section-title .content p{font-size: 16px;line-height: 24px;}
.how-it-works .box-elements{position: relative;height: auto;margin-bottom: 200px;}
.how-it-works .box-elements-top{display: grid;grid-template-columns: repeat(5,1fr);gap: 10px;}
.how-it-works .box-elements-top .box{display: flex;justify-content: center;align-items: center;text-align: center;padding: 40px 30px;background-color: var(--white-color);border: 1px solid var(--black-color);border-radius: 12px;}
.how-it-works .box-elements-top .box p{color: var(--black-color);}
.how-it-works .box-elements-top .box.black{background-color: var(--black-color);color: var(--white-color);}
.how-it-works .box-element-small-line{width: 42%;margin: auto;}
.how-it-works .box-element-small-line img{width: 100%;}
.how-it-works .box-element-big-line{width: 81%;margin: auto;position: absolute;left: 10%;bottom: 0%;}
.how-it-works .box-element-big-line img{width: 100%;}
.how-it-works .box-element-row-line{position: absolute;left: 50%;transform: translate(-50%);top: 37%;height: 144%;}
.how-it-works .box-element-row-line img{width: 100%;height: 100%;object-fit: cover;}
.how-it-works .box-element-details{position: absolute;left: 50%;transform: translate(-50%);top: 33%;display: flex;flex-direction: column;align-items: center;}
.how-it-works .small-detail{width: fit-content;padding: 5px 10px;background-color: var(--light-gray-color);border-radius: 12px;}
.how-it-works .small-detail.green{background-color: var(--green-color);}
.how-it-works .small-details{display: flex;flex-direction: column;align-items: center;gap: 10px;padding: 75px 0px 40px 0px;}
.how-it-works .small-details .small-detail{width: fit-content;padding: 5px 20px;}
.how-it-works .big-details{position: relative;display: flex;flex-direction: column;gap: 20px;padding-top: 40px;z-index: 1;}
.how-it-works .big-details .big-detail{padding: 12px 50px;border: 1px solid var(--black-color);border-radius: 12px;background-color: var(--white-color);}
.how-it-works .big-details .big-detail.black{background-color: var(--black-color);color: var(--white-color);}

.team-mode-on .section-title p{font-size: 14px;line-height: 24px;}
.team-mode-on .grid-2-elements{gap: 40px;}
.team-mode-bottom{padding-top: 50px;}
.team-mode-card{width: 100%;position: relative;}
.team-mode-card-top{margin-bottom: 25px;border-radius: 12px;}
.team-mode-card-top{width: 100%;position: relative;margin-bottom: 20px;padding: 40px 0px;}
.team-mode-card-top img{width: 100%;}
.team-mode-card.white .team-mode-card-top{background-color: var(--white-color);}
.team-mode-card.orange .team-mode-card-top{background-color: var(--orange-color);}
.team-mode-card.gray .team-mode-card-top{background-color: var(--beige-color);}
.team-mode-card.black .team-mode-card-top{background-color: var(--black-color);}
.team-mode-card-bottom p{font-size: 16px;line-height: 24px;}
.team-mode-more .title{text-align: center;}
.team-mode-more .grid-3-elements{padding-top: 30px;}
.team-mode-more-card{width: 100%;position: relative;padding: 20px;background-color: var(--beige-color);border-radius: 12px;display: flex;flex-direction: column;gap: 20px;}
.team-mode-more-card p{font-size: 16px;line-height: 24px;}

@media screen and (max-width:730px) and (min-width:200px){
    table tbody{width: 1000px;padding-right: 20px;}
    table tr{grid-template-columns: 250px 150px 150px 150px 150px;}
}

@media screen and (max-width:700px) and (min-width:200px){
    .all-page-hero-inside .grid-2-elements{grid-template-columns: 1fr;}
    .all-page-hero-inside .element-right img{width: 100%;aspect-ratio: 419/264;object-fit: contain;}
}

@media screen and (max-width:885px) and (min-width:751px){
    .benefit-card .benefit-card-bottom ul li{font-size: 16px;}
}

@media screen and (max-width:750px) and (min-width:200px){
    .feature-card-right{max-width: 100%;}
    .feature-card-bottom{position: relative;bottom: 0px;}
    .ellipse-section{padding-top: 45px;}
    .ellipse{max-width: 360px;}

    .features-section .features-bottom .grid-2-elements, .features-section .features-bottom .grid-2-element{grid-template-columns: 1fr;}
    .features-section .features-bottom .grid-2-element .feature-card:nth-child(1){height: auto;}
    .feature-card-right .feature-card{height: auto!important;}
    .features-section .features-bottom .grid-2-element .feature-card:nth-child(1) .feature-image{margin-top: 40px;}
    .features-section .features-bottom .grid-2-element .feature-card:nth-child(1) .feature-image img{width: 70%;}

    .benefits-section .benefits-bottom .grid-2-elements{grid-template-columns: 1fr;}
    .benefits-right .benefit-card-image{order: 1;}
    .benefits-right .benefit-card{order: 0;}
}

@media screen and (max-width:950px) and (min-width:600px){
    .pricing-elements .grid-4-elements{grid-template-columns: repeat(2,1fr);}
}
@media screen and (max-width:599px) and (min-width:200px){
    .pricing-elements .grid-4-elements{grid-template-columns: repeat(1,1fr);}
}

@media screen and (max-width:700px) and (min-width:200px){
    .fun-section-bottom .grid-2-elements{grid-template-columns: 1fr;}
}

@media screen and (max-width:850px) and (min-width:715px){
    .product-features-element .product-grid-2-elements{gap: 30px;}

    .sharing-and-client .client-element .inside-element{padding: 100px 20px;}

    .use-box .product-grid-2-elements{gap: 30px;}
}
@media screen and (max-width:714px) and (min-width:200px){
    .product-features-element .product-grid-2-elements{grid-template-columns: 1fr;gap: 30px;}
    .product-features-element .product-features-content .content-inside{width: 100%;}
    .product-features-element.reverse .product-features-content{order: 1;}

    .sharing-and-client .flex-elements{flex-direction: column;}
    .sharing-and-client .client-element .inside-element{margin-left: auto;}

    .use-box{padding: 40px 20px;}
    .use-box .product-grid-2-elements{grid-template-columns: 1fr;gap: 50px;}
}

@media screen and (max-width:784px) and (min-width:200px){
    .first-section-blog-inside{grid-template-columns: 1fr;}
    .first-section-blog-left{order: 1;}
    .first-section-blog-right{order: 0;}
}
@media screen and (max-width:580px) and (min-width:200px){
    .first-section-blog-inside{gap: 20px;padding: 20px;}
    .first-section-blog-left .author{margin-top: 20px;}
}

@media screen and (max-width:840px) and (min-width:581px){
    .blog-elements .grid-3-elements{grid-template-columns: repeat(2,1fr);}
    .blog-elements-inside .grid-3-elements{grid-template-columns: repeat(2,1fr);gap: 40px;}
}
@media screen and (max-width:580px) and (min-width:200px){
    .blog-elements{padding-top: 50px;}
    .blog-elements .grid-3-elements{grid-template-columns: repeat(1,1fr);}
    .blog-elements-inside .grid-3-elements{grid-template-columns: repeat(1,1fr);gap: 40px;}
}

@media screen and (max-width:470px) and (min-width:200px){
    #studio-pricing-element .product-features-image{padding: 50px 20px;}
}

@media screen and (max-width:1112px) and (min-width:1003px){
    .how-it-works .box-elements-top .box{padding: 40px 10px;}
}
@media screen and (max-width:1002px) and (min-width:976px){
    .how-it-works .box-elements-top .box{padding: 40px 10px;}
    .how-it-works .box-element-row-line{height: 160%;}
}
@media screen and (max-width:975px) and (min-width:864px){
    .how-it-works .box-element-details{top: 36%;}
    .how-it-works .box-elements-top .box{padding: 40px 10px;}
    .how-it-works .box-element-row-line{height: 160%;}
}
@media screen and (max-width:863px) and (min-width:200px){
    .how-it-works .box-element-details{top: 38%;}
    .how-it-works .box-elements-top .box{padding: 40px 10px;}
    .how-it-works .small-details{padding: 40px 0px 20px 0px;}
    .how-it-works .box-element-row-line{height: 160%;}
}
@media screen and (max-width:847px) and (min-width:731px){
    .how-it-works .box-element-details{top: 45%;}
    .how-it-works .box-elements-top .box h4{font-size: 16px;}
}
@media screen and (max-width:730px) and (min-width:668px){
    .how-it-works .box-element-details{top: 36%;}
    .how-it-works .box-elements-top .box{padding: 30px 10px;}
    .how-it-works .box-elements-top .box p, .how-it-works .box-elements-top .box h4{font-size: 14px;}
    .how-it-works .box-element-row-line{height: 187%;}
}
@media screen and (max-width:667px) and (min-width:200px){
    .how-it-works{padding: 70px 0px;}
    .how-it-works .box-elements{margin-bottom: 352px;}
    .how-it-works .box-elements-top{grid-template-columns: repeat(3,1fr);}
    .how-it-works .box-elements-top .box:nth-child(1),
    .how-it-works .box-elements-top .box:last-child{display: none;}
    .how-it-works .box-element-small-line{display: none;}
    .how-it-works .box-element-big-line{top: 100%;}
    .how-it-works .box-element-details {top: 83%;}
    .how-it-works .box-element-row-line {height: 370%;width: 1px;}
    .how-it-works .small-details {padding: 40px 0px 0px 0px;}
}
@media screen and (max-width:523px) and (min-width:451px){
    .how-it-works .box-elements-top .box p, .how-it-works .box-elements-top .box h4{font-size: 14px;}
}
@media screen and (max-width:450px) and (min-width:200px){
    .how-it-works .box-elements-top{grid-template-columns: repeat(3,1fr);gap: 2px;}
    .how-it-works .box-elements-top .box:nth-child(1),
    .how-it-works .box-elements-top .box:last-child{display: none;}
    .how-it-works .box-elements-top .box p, .how-it-works .box-elements-top .box h4{font-size: 14px;}
    .how-it-works .box-element-big-line{display: none;}
    .how-it-works .big-details{width: 220px;max-width: 100%;}
    .how-it-works .big-details .big-detail{text-align: center;}
    .how-it-works .big-details .big-detail .btn{font-size: 14px;}
}
@media screen and (max-width:386px) and (min-width:356px){
    .how-it-works .box-elements-top .box {padding: 30px 5px;}
}
@media screen and (max-width:355px) and (min-width:200px){
    .how-it-works .box-elements-top .box {padding: 30px 5px;}
    .how-it-works .box-elements-top .box p, .how-it-works .box-elements-top .box h4{font-size: 12px;}
}

@media screen and (max-width:837px) and (min-width:200px){
    .team-mode-on .grid-2-elements{grid-template-columns: repeat(1,1fr);}
}

@media screen and (max-width:720px) and (min-width:561px){
    .team-mode-more .grid-3-elements{grid-template-columns: repeat(2,1fr);}
    .team-mode-more .grid-3-elements .team-mode-more-card:last-child{grid-column: 1/3;}
}
@media screen and (max-width:560px) and (min-width:200px){
    .team-mode-more .grid-3-elements{grid-template-columns: repeat(1,1fr);}
}
/*Main code ends*/

/*Footer code starts*/
footer{width: 100%;position: relative;margin-top: 100px;}
.footer-top .top-button{width: 24px;height: 24px;display: flex;justify-content: center;align-items: center;background-color: var(--beige-color);border-radius: 4px;margin: auto 0px auto auto;}

.footer-center{padding: 40px 0px 10px 0px;border-bottom: 1px solid var(--black-color);}
.footer-center .footer-center-right ul{width: 60%;margin-left: auto;list-style: none;columns: 2;}
.footer-center .footer-center-right ul li a{font-size: 16px;line-height: 22px;color: var(--black-color);text-decoration: none;font-weight: 500;transition: 0.1s ease;}
.footer-center .footer-center-right ul li a:hover{opacity: 0.7;transition: 0.1s ease;}
.footer-center .footer-center-bottom{display: flex;gap: 10px;align-items: center;padding-top: 30px;transition: 0.2s ease;}
.footer-center .footer-center-bottom a{transition: 0.2s ease;}
.footer-center .footer-center-bottom a img{width: 35px;height: 35px;object-fit: contain;transition: 0.2s ease;}
.footer-center .footer-center-bottom a img:hover{transform: scale(1.1);transition: 0.2s ease;}

.footer-bottom{padding: 30px 0px 15px 0px;}
.footer-bottom p{font-size: 12px;line-height: 18px;color: var(--black-color);font-weight: 500;}
.footer-bottom a{font-size: 12px;line-height: 18px;color: var(--black-color);font-weight: 500;text-decoration: none;}
.footer-bottom a:hover{opacity: 0.7;}
.footer-bottom-right{margin: auto 0px auto auto;}

@media screen and (max-width:750px) and (min-width:200px){
    .footer-center .footer-center-right ul{width: 80%;}
}

@media screen and (max-width:571px) and (min-width:200px){
    .footer-center{padding: 50px 0px;text-align: left;}
    .footer-center .grid-2-elements{grid-template-columns: 1fr;}
    .footer-center .footer-center-right ul{width: 100%;columns: 1;}
    .footer-center .footer-center-bottom{justify-content: start;}
}

@media screen and (max-width:471px) and (min-width:200px){
    .footer-bottom-right{margin-left: auto;}
}
/*Footer code ends*/

/*All page media query starts*/
@media screen and (max-width:526px) and (min-width:412px){
    .super-big-text{font-size: 200px;line-height: 200px;}
}
@media screen and (max-width:411px) and (min-width:200px){
    .super-big-text{font-size: 170px;line-height: 170px;}
}

@media screen and (max-width:640px) and (min-width:200px){
    #section, .hero-section{margin-top: 70px!important;}
    .features-section { margin-top: 70px !important;}
    .features-section .features-bottom .grid-2-element{padding-top: 20px;}
    .features-button{margin-top: 70px;}
    .benefits-inside{padding: 70px 0px;}
    .benefits-left, .benefits-right{gap: 20px;}
    .pricing-section .pricing-inside{padding: 70px 0px;}
    .started-section{margin-top: 70px!important;}
    .product-features-element{margin-top: 70px;}
    .blog-inside-elements{padding-bottom: 0px;}
}

@media screen and (max-width:450px) and (min-width:200px){
    .feature-card .feature-image img {
        width: 90%;
    }
    .features-section .features-bottom .grid-2-element .feature-card:nth-child(1) .feature-image img {
        width: 90%;
    }
} 

@media screen and (max-width:528px) and (min-width:200px){
    .pricing-bottom-button button{width: 100%;}
}
/*All page media query ends*/

/*Features product page code starts*/
@media screen and (max-width:1086px) and (min-width:986px){
    #upload-feature .product-features-image img:nth-child(2){aspect-ratio: 250/120;transform: translate(-15%);}
}
@media screen and (max-width:985px) and (min-width:798px){
    #upload-feature .product-features-image img:nth-child(2){max-width: 200px;aspect-ratio: 200/100;transform: translate(-15%);}
}
@media screen and (max-width:797px) and (min-width:715px){
    #upload-feature .product-features-image img:nth-child(2){max-width: 170px;aspect-ratio: 200/100;transform: translate(-15%);}
    #upload-feature .product-features-image img:nth-child(3){max-width: 100px;top: 62%;}
}
@media screen and (max-width:714px) and (min-width:616px){
    #upload-feature .product-features-image img:nth-child(2){max-width: 400px;aspect-ratio: 400/150;left: 44%;transform: translate(-15%);}
    #upload-feature .product-features-image img:nth-child(3){max-width: 140px;top: 62%;}
}
@media screen and (max-width:615px) and (min-width:549px){
    #upload-feature .product-features-image img:nth-child(2){max-width: 250px;aspect-ratio: 0;left: 53%;transform: translate(-15%);}
    #upload-feature .product-features-image img:nth-child(3){max-width: 140px;top: 63%;}
}
@media screen and (max-width:548px) and (min-width:480px){
    #upload-feature .product-features-image img:nth-child(2){max-width: 220px;aspect-ratio: 0;left: 53%;transform: translate(-15%);}
    #upload-feature .product-features-image img:nth-child(3){max-width: 120px;top: 63%;}
}
@media screen and (max-width:479px) and (min-width:424px){
    #upload-feature .product-features-image img:nth-child(2){max-width: 190px;aspect-ratio: 0;left: 53%;transform: translate(-15%);}
    #upload-feature .product-features-image img:nth-child(3){max-width: 100px;top: 63%;}
}
@media screen and (max-width:423px) and (min-width:344px){
    #upload-feature .product-features-image img:nth-child(2){max-width: 150px;aspect-ratio: 0;left: 53%;transform: translate(-15%);}
    #upload-feature .product-features-image img:nth-child(3){max-width: 80px;top: 63%;}
}
@media screen and (max-width:343px) and (min-width:200px){
    #upload-feature .product-features-image img:nth-child(2){max-width: 120px;aspect-ratio: 0;left: 53%;transform: translate(-15%);}
    #upload-feature .product-features-image img:nth-child(3){max-width: 60px;top: 60%;}
}

@media screen and (max-width:1110px) and (min-width:960px){
    #dashboard-feature .product-features-image img:nth-child(2){max-width: 170px;}
}
@media screen and (max-width:959px) and (min-width:782px){
    #dashboard-feature .product-features-image img:nth-child(2){max-width: 150px;}
}
@media screen and (max-width:781px) and (min-width:715px){
    #dashboard-feature .product-features-image img:nth-child(2){max-width: 135px;}
}
@media screen and (max-width:714px) and (min-width:655px){
    #dashboard-feature .product-features-image img:nth-child(2){max-width: 250px;}
}
@media screen and (max-width:654px) and (min-width:582px){
    #dashboard-feature .product-features-image img:nth-child(2){max-width: 220px;}
}
@media screen and (max-width:581px) and (min-width:504px){
    #dashboard-feature .product-features-image img:nth-child(2){max-width: 190px;}
}
@media screen and (max-width:503px) and (min-width:432px){
    #dashboard-feature .product-features-image img:nth-child(2){max-width: 160px;}
}
@media screen and (max-width:431px) and (min-width:384px){
    #dashboard-feature .product-features-image img:nth-child(2){max-width: 140px;}
}
@media screen and (max-width:383px) and (min-width:314px){
    #dashboard-feature .product-features-image img:nth-child(2){max-width: 110px;}
}
@media screen and (max-width:313px) and (min-width:200px){
    #dashboard-feature .product-features-image img:nth-child(2){max-width: 80px;}
}

@media screen and (max-width:1050px) and (min-width:882px){
    #profile-feature .product-features-image img:nth-child(2){max-width: 250px;}
}
@media screen and (max-width:881px) and (min-width:730px){
    #profile-feature .product-features-image img:nth-child(2){max-width: 220px;}
}
@media screen and (max-width:729px) and (min-width:715px){
    #profile-feature .product-features-image img:nth-child(2){max-width: 200px;}
}
@media screen and (max-width:714px) and (min-width:620px){
    #profile-feature .product-features-image img:nth-child(2){max-width: 400px;right: 8px;}
}
@media screen and (max-width:619px) and (min-width:474px){
    #profile-feature .product-features-image img:nth-child(2){max-width: 300px;right: 11px;}
}
@media screen and (max-width:473px) and (min-width:390px){
    #profile-feature .product-features-image img:nth-child(2){max-width: 240px;right: 13px;}
}
@media screen and (max-width:389px) and (min-width:318px){
    #profile-feature .product-features-image img:nth-child(2){max-width: 190px;right: 15px;}
}
@media screen and (max-width:317px) and (min-width:200px){
    #profile-feature .product-features-image img:nth-child(2){max-width: 130px;right: 16px;}
}

@media screen and (max-width:976px) and (min-width:810px){
    #collaboration-feature .product-features-image img:nth-child(2){max-width: 250px;aspect-ratio: 250/50;bottom: 130px;}
    #collaboration-feature .product-features-image img:nth-child(3){max-width: 250px;}
}
@media screen and (max-width:809px) and (min-width:714px){
    #collaboration-feature .product-features-image img:nth-child(2){max-width: 200px;bottom: 110px;}
    #collaboration-feature .product-features-image img:nth-child(3){max-width: 200px;}
}
@media screen and (max-width:713px) and (min-width:514px){
    #collaboration-feature .product-features-image img:nth-child(2){max-width: 300px;bottom: 145px;}
    #collaboration-feature .product-features-image img:nth-child(3){max-width: 300px;}
}
@media screen and (max-width:513px) and (min-width:410px){
    #collaboration-feature .product-features-image img:nth-child(2){max-width: 250px;bottom: 125px;}
    #collaboration-feature .product-features-image img:nth-child(3){max-width: 250px;}
}
@media screen and (max-width:409px) and (min-width:200px){
    #collaboration-feature .product-features-image img:nth-child(2){max-width: 150px;bottom: 92px;}
    #collaboration-feature .product-features-image img:nth-child(3){max-width: 150px;}
}
/*Features product page code ends*/