@import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

body {
    opacity: 0;
    transition: opacity .5s;
    color: #fff;
}

* {
    font-family: "Poppins", sans-serif;
    --bs-primary-rgb: 131, 52, 235;
}

h1 {
    font-weight: 800;
}

.gradientH1 {
    font-weight: 700;
    background: linear-gradient(180deg, rgba(255, 255, 255, 1) 0%, rgba(165, 165, 165, 1) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}


.headerRow,
.bgMain {
    background: rgb(90, 55, 217);
    background: linear-gradient(217deg, rgba(90, 55, 217, 1) 0%, rgba(100, 101, 251, 1) 100%);
    color: #fff;
}

.bgMain {
    /*background: rgb(90,55,217);
    background: linear-gradient(217deg, rgba(90,55,217,1) 0%, rgba(100,101,251,1) 100%);*/
    background: rgb(0, 0, 0);
    background: linear-gradient(180deg, rgba(90, 50, 217, 1) 0%, rgba(100, 101, 251, 1) 50%, rgba(90, 50, 217, 1) 100%);
    color: #fff;
}

.headerRow .headerEffect {
    position: absolute;
    background-image: url("../src/imgs/products/bg_effect.webp");
    height: 100%;
    width: 100%;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
}

.servicesEffect {
    position: absolute;
    background-image: url("../src/imgs/services_effect2.webp");
    height: 100%;
    width: 100%;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
}

.servicesEffect2 {
    position: absolute;
    background-image: url("../src/imgs/services_effect.webp");
    left: 0;
    height: 100%;
    width: 100%;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
}

.servicesEffect3 {
    position: absolute;
    background-image: url("../src/imgs/services_effect3.webp");
    left: 0;
    height: 100%;
    width: 100%;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
}

#productDesc {
    font-weight: 400;
    opacity: .8;
}

.headerRow svg,
.bgMain svg {
    position: relative;
    bottom: 0;
    width: 100%;
    height: 10vw;
    margin: 0;
    padding: 0;
}

.betterButton,
.betterButton-outline:hover,
.betterButton-outline:focus {
    color: rgb(90, 55, 217);
    background-color: #fff;
    font-weight: 500;
    border-radius: 200px;
    border: 2px solid #fff;
}

.betterButton-color {
    background-color: rgb(90, 55, 217);
    color: #fff;
    font-weight: 500;
    border-radius: 200px;
    border: none;
}

.betterButton:hover,
.betterButton:focus,
.betterButton-outline {
    color: #fff;
    background-color: transparent;
    border: 2px solid #fff;
    font-weight: 500;
    border-radius: 200px;
}

.betterButton-outline-color {
    color: rgb(90, 55, 217);
    background-color: transparent;
    border: 2px solid rgb(90, 55, 217);
    font-weight: 500;
    border-radius: 200px;
}

.betterButton-outline-color:hover,
.betterButton-outline-color:focus {
    color: #fff;
    background-color: rgb(90, 55, 217);
    border: 2px solid rgb(90, 55, 217);
    font-weight: 500;
    border-radius: 200px;
}

.betterButton-outline-color::after {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    content: '\f178';
    margin-left: 10px;
    transition: margin-left .3s;
}

.betterButton-outline-color:hover::after {
    margin-left: 18px;
    transition: margin-left .3s;
}

.betterButton-color:hover,
.betterButton-color:focus,
.betterButton-color:active {
    color: rgb(90, 55, 217);
    background-color: #fff;
}


.betterButton-link {
    background-color: transparent;
    border: 0;
    border-bottom: 1px solid white;
    border-radius: 0;
    opacity: .7;
    transition: opacity .1s;
}

.betterButton-link-color {
    color: rgb(90, 55, 217);
    background-color: transparent;
    border: 0;
    border-bottom: 1px solid rgb(90, 55, 217);
    border-radius: 0;
    opacity: .7;
    transition: opacity .1s;
}

.betterButton-link-color:hover,
.betterButton-link-color:focus {
    color: rgb(90, 55, 217);
    background-color: transparent;
    border: 0;
    border-bottom: 1px solid rgb(90, 55, 217);
    border-radius: 0;
    opacity: 1;
    transition: opacity .1s;
}

.betterButton-link:hover,
.betterButton-link:focus {
    opacity: 1;
    background-color: transparent;
    border-bottom: 1px solid white;
    transition: opacity .1s;
}

.servicesSection h3 {
    font-weight: 700;
}

.servicesSection p {
    text-align: justify;
    font-size: 14px;
}

.aboutUsCard,
.partnerCard {
    height: 100%;
    background-color: #fff;
    position: relative;

    transform: scale(1);
    transition: transform 0.3s;
}



.aboutUsCard:hover,
.partnerCard:hover {
    transform: scale(1.05);
    transition: transform 0.3s;
}

.aboutUsCard img {
    position: relative;
    top: -40px;
}

.aboutUsCard img::after {
    display: block;
}

.aboutUsCard::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 30px;
    padding: 20px;
    position: relative;
    top: -25px;
    color: #fff;
    border-radius: 5px;
}


#aboutUsCard1::before {
    content: '\f390';
    filter: drop-shadow(0px 5px 10px rgba(246, 211, 101, .5));
    background-image: linear-gradient(120deg, #f6d365 0%, #fda085 100%);
}

#aboutUsCard2::before {
    content: '\f1fc';
    filter: drop-shadow(0px 5px 10px rgba(212, 252, 121, .5));
    background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%);
}

#aboutUsCard3::before {
    content: '\f002';
    filter: drop-shadow(0px 5px 10px rgba(22, 217, 227, .5));
    background-image: radial-gradient(circle 248px at center, #16d9e3 0%, #30c7ec 47%, #46aef7 100%);
}

#aboutUsCard4::before {
    content: '\f0b1';
    filter: drop-shadow(0px 5px 10px rgba(196, 113, 245, .5));
    background-image: linear-gradient(to top, #c471f5 0%, #fa71cd 100%);
}

#aboutUsCard5::before {
    content: '\f4c6';
    filter: drop-shadow(0px 5px 10px rgba(252, 96, 118, .5));
    background-image: linear-gradient(-20deg, #fc6076 0%, #ff9a44 100%);
}

#aboutUsCard6::before {
    content: '\f2db';
    filter: drop-shadow(0px 5px 10px rgba(150, 93, 233, .5));
    background-image: linear-gradient(83.2deg, rgba(150, 93, 233, 1) 10.8%, rgba(99, 88, 238, 1) 94.3%);
}


.text-justify {
    text-align: justify;
}

.planCard {
    border-radius: 15px;
}

.planCard .card-title,
.planCard .card-text-mini {
    font-size: 17px;
    opacity: .7;
}

.planCard .card-text-mini {
    font-weight: 300;
}

.planCard .card-text {
    font-size: 30px;
    font-weight: bold;
}

.planCardGreen {
    color: rgb(124, 255, 120);
    text-shadow: 0px 0px 15px rgba(124, 255, 120, 0.64);
}

.contact-card {
    background-color: rgba(100, 101, 251, 1);
    transition: .4s;
}

.contact-card:hover {
    background-color: #fff;
    color: rgb(90, 55, 217);
    transition: .4s;
}

.textPrimary {
    color: rgb(90, 55, 217);
}


/*Footer*/

.social_link {
    opacity: .2;
    transition: .3s;
}

.social_link:hover {
    opacity: .4;
    transition: .3s;
}

.footerTitle {
    text-transform: uppercase;
    letter-spacing: 2px;
    opacity: .4;
}




@media (max-width: 992px) {
    .navbar-light {
        background: rgb(90, 55, 217);
    }
}

/* Product page */


.fa-check {
    color: rgb(90, 55, 217);
    text-shadow: 0px 0px 10px rgba(90, 55, 217, 0.3);
    font-size: 25px;
}

.newBadge {
    background: rgb(90, 55, 217);
}

.velemeny span {
    font-weight: 900;
    font-size: 80px;
    opacity: .3;
}

.velemeny span:first-of-type {
    position: relative;
    top: 15px;
}

.velemeny span:last-of-type {
    position: relative;
    top: -20px;
}

.miniText {
    opacity: .7;
    font-style: italic;
}

.error404 {
    font-size: 100px;
}

/* Reference card */
.referenceLink {
    height: 300px;
    border-radius: 10px;
    background-size: cover;
    background-position: center;
    transition: .3s;
    text-decoration: none;
    overflow: hidden;
}

.referenceLink h2 {
    color: #fff;
    transition: .3s;
    opacity: .1;
}

.referenceLink:hover h2 {
    opacity: 1;
    font-weight: 800;
}

.referenceLink h6 {
    color: #fff;
    transition: .3s;
    opacity: 0;
    margin: -11px;

}

.referenceLink:hover h6 {
    margin-bottom: 30px;
    opacity: .7;
    display: block;
}

.referenceLink:hover {
    box-shadow: inset 0 -90px 30px -40px rgba(0, 0, 0, 0.5);
    transition: .3s;
}

/* Testimotionals */
.testimonialCard {
    display: inline-block;
    border-radius: 10px;
    background-color: #fff;
    color: #000 !important;
    max-width: 350px;
    padding: 10px;
}



.testimonialCard h6 {
    font-weight: 600;
    color: #000 !important;
    opacity: .7;
}

.testimonialCard h5 {
    color: #000 !important;
}

.testimonialText {
    opacity: .7;
    z-index: 5;
    color: #000 !important;
}

#testimonial_1 {
    transform: rotate(-13deg) translate(20px, 0);
    opacity: .9;
    z-index: -1;
}

#testimonial_2 {
    transform: rotate(10deg) translate(30px, 30px);
    z-index: 1000;
    opacity: .95;
}

#testimonial_3 {
    transform: rotate(-5deg) translate(30px, 30px);
    z-index: 800;
}

#testimonial_4 {
    opacity: 0;
}

/* Borders */
.dashedBorder {
    /*border: 5px dashed rgb(90,55,217);*/
    border: 2px dashed rgb(90, 55, 217);
    box-shadow: inset 0 0 15px rgb(90, 55, 217);
    border-radius: 15px;
    transition: .3s;
}



.dashedBorder h3 {
    color: rgb(90, 55, 217);
}

.dashedBorder .number,
.filledBorder .number,
.lightBorder .number {
    font-weight: 400;
}

.filledBorder {
    border-radius: 15px;
    background: rgb(90, 55, 217);
    background: linear-gradient(217deg, rgba(90, 55, 217, 1) 0%, rgba(100, 101, 251, 1) 100%);
    color: #fff;
    transition: .3s;
}


.lightBorder {
    border-radius: 15px;
    border: 2px solid rgb(90, 55, 217);
    background: rgba(100, 101, 251, .2);
    /*color: rgb(90,55,217);*/
    color: #fff;
    transition: .3s;
}

/*.lightBorder:hover{
    background: rgba(100,101,251, .6);
    color: rgb(100,101,251);
    transition: .3s;
}*/

.dashedBorder .textMark {
    color: rgb(90, 55, 217);
    font-weight: 700;
}

.filledBorder .textMark {
    font-weight: 800;
}

.lightBorder .textMark {
    background-color: rgba(100, 101, 251, .2);
    font-size: 13px;
}

.colorPurple {
    background: linear-gradient(180deg, rgba(124, 89, 237, 1) 0%, rgba(90, 50, 217, 1) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 700;
}

/* Decor */
#decorIMG-1 {
    width: 360px;
}

.glassBG {

    background: rgba(255, 255, 255, 0.25);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(4.9px);
    -webkit-backdrop-filter: blur(4.9px);
    border: 1px solid rgba(255, 255, 255, 0.16);
}

/* cookies */
.cookiesPopup {
    position: fixed;
    width: 40%;
    left: 30%;
    top: 30%;

    background: rgba(255, 255, 255, .1);
    border-radius: 10px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.21);

    z-index: 9999;
    padding: 15px;
    text-align: center;

    color: #fff;
}

.cookiesPopup h2 {
    font-weight: 800;
}

.cookiesPopup h4 {
    font-weight: 200;
    font-size: 20px;
}


/* Price cards / Packages */
[class*="price-card"] {
    border-radius: 25px;
    background-color: rgba(255, 255, 255, .07);
    border: 2px solid rgba(255, 255, 255, .05);
    backdrop-filter: blur(10px) saturate(100%) brightness(130%);
    transition: background-color .3s;
}

[class*="price-card"] h6,
.orderProcessTitle1 {
    font-weight: 800;
    font-size: 18px;
}

[class*="price-card"] h5 {
    font-weight: 600;
    font-size: 18px;
}

[class*="price-card"] h4,
.orderProcessTitle2 {
    color: inherit !important;
    font-weight: 800;
    font-size: 30px;
}

[class*="price-card"] h3 {
    font-weight: 700;
    font-size: 15px;
}

[class*="price-card"] hr {
    opacity: .1;
}

[class*="price-card"] .colorBadge,
.orderProcessBadge {
    padding: 5px;
    font-size: 13px;
    font-weight: 700;
    border-radius: 7px;
}

[class*="price-card"] .btn {
    font-weight: 700;
    border-radius: 17px;
    font-size: 15px;
    padding: 15px;
    border: 0;
    bottom: 0;
}

[class*="price-card"]:hover {
    background-color: rgba(255, 255, 255, .15);
    transition: background-color .3s;
}

/* 1 */
.price-card1 {
    background: linear-gradient(217deg, rgba(90, 55, 217, 1) 0%, rgba(100, 101, 251, 1) 100%);
    border: 0;
    color: #fff;
}

.price-card1 .colorBadge {
    background-color: rgba(255, 255, 255, .1);
}

.price-card1 .btn {
    background-color: #fff;
    color: #000;
}

.price-card1 .btn:hover,
.price-card1 .btn:focus {
    background-color: rgb(240, 240, 240);
    color: #000;
}

/* 2 */
.price-card2 h4,
.price-card2 i {
    color: #0088FF;
}

.price-card2 .colorBadge {
    color: #0088FF;
    background-color: rgba(0, 136, 255, .1);
}

.price-card2 .btn {
    background-color: #0088FF;
    color: #fff;
}

.price-card2 .btn:hover,
.price-card2 .btn:focus {
    background-color: rgb(9, 130, 235);
    color: rgb(240, 240, 240);
}

/* 3 */
.price-card3 h4,
.price-card3 i {
    color: rgb(153, 0, 255);
}

.price-card3 .colorBadge,
.orderProcessBadge {
    color: rgb(153, 0, 255);
    background-color: rgba(153, 0, 255, .1);
}

.price-card3 .btn,
.orderProcessButton1 {
    background-color: rgb(153, 0, 255);
    color: #fff;
}

.price-card3 .btn:hover,
.price-card3 .btn:focus,
.orderProcessButton1:hover,
.orderProcessButton1:focus {
    background-color: rgb(151, 19, 240);
    color: rgb(240, 240, 240);
}

/* 4 */
.price-card4 .colorBadge {
    color: #fff;
    background-color: rgba(255, 255, 255, .06);
}

.price-card4 .btn,
.orderProcessButton2 {
    background-color: #fff;
    color: #000;
}

.price-card4 .btn:hover,
.price-card4 .btn:focus,
.orderProcessButton2:hover,
.orderProcessButton2:focus {
    background-color: #fff;
    color: rgb(80, 80, 80);
}

/* Order process */
.modal-content {
    border-radius: 17px;
    border: 0;
}

.orderProcess-num {
    min-height: 30px;
    min-width: 30px;
    background-color: #fff;
    border-radius: 50%;
    display: inline-block;
}


.orderProcessTitle1 {
    color: rgb(153, 0, 255);
}

.orderProcessNumber {
    border-radius: 17px;
}

.orderProcessNumberCurrent {
    color: #fff;
    background: rgb(90, 55, 217);
}

/* Our works */
.ourWorkCard {
    background-color: #fff;
    padding: 15px;
    max-width: 450px;
    color: #000;
    border-radius: 2px;
}


.btn-link {
    background-color: transparent;
    text-decoration: none;
    color: rgb(90, 55, 217);
}

.btn-link span {
    padding: 0;
    color: rgb(90, 55, 217);
    text-decoration: none;
}

.btn-link i {
    font-size: 15px;
    color: rgb(90, 55, 217);
}


.btn-link::before {
    content: ' ';
    position: absolute;
    width: 0px;
    margin-top: 30px;
    height: 2px;
    background-color: rgb(90, 55, 217);
    transition: .3s;
}

.btn-link:hover::before {
    width: 115px;
    transition: .3s;
}

.btn-link:hover {
    color: rgb(90, 55, 217);
}

.referenceBadge {
    border: 2px solid rgb(90, 55, 217);
    background-color: rgb(90, 55, 217);
    font-weight: 600;
    font-size: 12px;
    padding: 3px 5px;
    border-radius: 10px;
}

.referenceBadgeLow {
    border: 2px dashed rgb(90, 55, 217);
    background-color: rgba(90, 55, 217, .5);
    font-weight: 600;
    font-size: 12px;
    padding: 3px 5px;
    border-radius: 10px;
}


.referenceText {
    opacity: .8;
    text-align: left;
}

.referenceDate {
    opacity: .5;
}

/* image gallery */
.imageGallery {
    display: none;
    position: fixed;
    top: 0;
    height: 100%;
    width: 100%;
    background-color: rgba(0, 0, 0, .8);
    z-index: 9999;
    color: #fff;
}

.imageGallery h4 {
    position: absolute;
    top: 30px;
    left: 30px;
    font-weight: 700;
}

.imageGallery h5 {
    position: absolute;
    top: 60px;
    left: 30px;
}

.imageMain {
    position: absolute;
    top: 5%;
    width: 80%;
    max-width: 1342px;
    left: calc((100% - min(80%, 1342px))/2);
    height: 80%;
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
    margin: auto;
    border-radius: 9px;
}

.imageList {
    position: absolute;
    top: 75%;
    width: 100%;
}

.galleryMiniImage {
    opacity: .6;
    max-width: 200px;
    width: 200px;
}

.galleryMiniImage-active {
    opacity: 1;
}

.galleryMiniImage img {
    border-radius: 9px;
    border: 2px solid rgba(0, 0, 0, .5);
}

.galleryMiniImage-active img {
    border: 2px solid rgba(90, 55, 217, .5);
}

.closeButton {
    position: absolute;
    right: 10px;
    top: 10px;
}

.closeButton i {
    color: #fff;
    opacity: .3;
    transition: opacity .3s;
}

.closeButton i:hover {
    opacity: .7;
    transition: opacity .3s;
}

/* maintenance */
.maintenanceCard {
    margin-top: 100vh;
}

.maintenanceCard:nth-last-child(1) {
    margin-bottom: 100vh;
}

.maintenanceCard h4 {
    font-size: 6vw;
    font-weight: 900;
    text-transform: uppercase;
}

#color1text {
    background: -webkit-linear-gradient(270deg, rgba(166, 7, 247, 1) 0%, rgba(74, 2, 160, 1) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    text-shadow: 0px 0px 120px rgba(166, 7, 247, 1);
}

#color2text {
    background: -webkit-linear-gradient(270deg, rgba(7, 165, 247, 1) 0%, rgba(2, 90, 160, 1) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    text-shadow: 0px 0px 120px rgba(7, 165, 247, 1);
}

#color3text {
    background: -webkit-linear-gradient(270deg, rgba(166, 7, 247, 1) 0%, rgba(74, 2, 160, 1) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    text-shadow: 0px 0px 120px rgba(166, 7, 247, 1);
}

#color4text {
    background: -webkit-linear-gradient(270deg, rgba(7, 165, 247, 1) 0%, rgba(2, 90, 160, 1) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

    text-shadow: 0px 0px 120px rgba(7, 165, 247, 1);
}

/* UPDATE: 2025. 07. 21.*/
.marquee-mask {
    mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);

}

.marquee-track {
    animation: scroll-marquee 80s linear infinite;
    display: flex;
    gap: .2rem;
    width: max-content;
}

@keyframes scroll-marquee {
    0% {
        transform: translateX(0%);
    }

    100% {
        transform: translateX(-50%);
    }
}