@import url('https://fonts.googleapis.com/css?family=Poppins:400,700,900');
* {
    font-family: 'poppins' !important;
}

.text {
    font-family: 'poppins-light' !important;
}
.title {
    font-family: 'poppins-bold' !important;
}

/* Large Screens */

/* Default for large screens (PC screens) */
/* .image-hover-left {
    height: 250px;
}

.image-rotate {
    margin-right: -30px;
    height: 300px;
} */

/* For mobile screens */
@media (max-width: 768px) {
    .image-hover-left {
        height: 150px;
    }

    .image-rotate {
        margin-right: -20px;
        height: 100px;
    }
}

@media (min-width: 992px) {
    .cnx-ml {
        margin-left: 30px;
    }
    .ml-3 {
        margin-left: 15px;
    }
    .padding {
        padding: 10px;
    }
    .sec3-ml-img2 {
        margin-left: -150px
    }
    .sec3-img-height {
        height: 350px;
    }
}
.star-rating {
    direction: rtl;
    display: inline-flex;
}

.star-rating input {
    display: none;
}

.star-rating label {
    font-size: 2rem;
    color: #ddd;
    cursor: pointer;
}

.star-rating input:checked ~ label,
.star-rating input:hover ~ label,
.star-rating label:hover,
.star-rating label:hover ~ label {
    color: #f5c518;
}

.p-title {
    font-size: 40px;
}
.sec3bg {
    height: 350px;
}
.sec3img1 {
    height: 300px;
    margin-right: -400px;
    margin-top: 30px;
}
.sec4bg {
    height: 350px;
}
.sec4img2 {
    height: 250px;
    margin-left: -250px;
    margin-top: 30px;
}
.sec1mobile {
    height: 250px;
    margin-right: -30px;
    margin-top: 100px;
    margin-left: 100px;
}
.sec1pc {
    height: 300px;
    margin-top: 50px;
}
/* Sec 2 */
.sec2images {
    margin-left: -50px;
}
.sec2bg {
    height: 350px;
    margin-left: -300px;
}
.sec2rabat {
    height: 200px;
    margin-left: -350px;
    margin-top: 140px;
}
.sec2amtic {
    height: 200px;
    margin-left: -230px;
    margin-top: 30px;
}
.sec2woman {
    height: 250px;
    margin-left: 20px;
    margin-top: 150px;
}
.sec2insta {
    height: 30px;
    margin-left: -370px;
    margin-top: 100px;
}
.sec2fb {
    height: 30px;
    margin-left: 0px;
    margin-top: 100px;
}
.sec2link {
    height: 30px;
    margin-left: 0px;
    margin-top: 100px;
}
.sec2plus {
    height: 30px;
    margin-left: 0px;
    margin-top: 100px;
}

@media (max-width: 992px) {
    .sec2images {
        margin-left: 50px;
    }
    .sec2bg {
        height: 200px;
        margin-left: -150px;
    }
    .sec2rabat {
        height: 150px;
        margin-left: -250px;
        margin-top: 140px;
    }
    .sec2amtic {
        height: 150px;
        margin-left: -200px;
        margin-top: 30px;
    }
    .sec2woman {
        height: 150px;
        margin-left: 20px;
        margin-top: 150px;
    }
    .sec2insta {
        display: none;
    }
    .sec2fb {
        display: none;
    }
    .sec2link {
        display: none;
    }
    .sec2plus {
        display: none;
    }
    .sec1mobile {
        height: 100px;
        margin-top: 100px;
    }
    .sec1pc {
        height: 150px;
    }
    .sec4bg {
        height: 250px;
        margin-top: 30px;
    }
    .sec4img2 {
        height: 200px;
        margin-left: -180px;

    }
    .sec3bg {
        height: 250px;
        margin-left: 50px;
    }
    .sec3img1 {
        height: 200px;
        margin-right: -330px;
        margin-top: 30px;
    }
    .sec2bg {
        height: 230px;
        margin-left: -30px;
    }
    .sec2img2 {
        height: 200px;
        margin-left: -270px;
        margin-top: 30px;
    }
}

.about1 {
    height: 250px;
}
.about2 {
    height: 250px;
}

/* Mobile screen */

@media (max-width: 799px) {
    .about1 {
        height: 170px;
    }
    .about2 {
        height: 130px;
    }
    .contact {
        display: none;
    }
}

@media (max-width: 599px) {
    .sec3-ml-img2 {
        margin-left: -50px
    }
    .p-title {
        font-size: 30px;
    }
    .sec3-img-height {
        width: 100%;

    }
}

.sec3-ml-img2 {
    margin-left: -50px
}

.Raduis {
    border-radius: 20px;
}
.text-blue {
    color: #312783 !important;
}
.text-orange {
    color: #E23216 !important;
}
.link {
    color: #000; /* Initial color */
    font-size: 16px; /* Initial font size */
    transition: color 1s ease, transform 1s ease;
}
.link:hover {
    color: #4b4768 !important;
    transform: scale(1.25); /* Scale up the link */
    font-weight: bold; /* Make the link bold */
}
.btn-animation {
    transition: color 0.5s ease, transform 0.5s ease;
}
.btn-animation:hover {
    transform: scale(1.1); /* Scale up the link */
}

/* About */
.bg-card1 {
    background-color: #EBA3FD;
}
.bg-card2 {
    background-color: #FFA89B;
}
.bg-card3 {
    background-color: #C6C2EE;
}

.bg-orange {
    border-bottom: 2px solid #E23216;
    background: #ffffff;
}

.sec1 {
    height: 450px;
}
.sec2 {
    height: 450px;
}
.sec3 {
    height: 450px;
}
.sec4 {
    height: 450px;
}
.sec5 {
    height: 450px;
}

.bg-sec1 {
    background-color: #FFEFED;
}
.bg-sec2 {
    background-color: #EAF1F7;
}
.bg-sec4 {
    background-color: #FBF3FE;
}
.bg-sec5 {
    background-color: #6C5FD7 ;
}
.bg-gray {
    background-color: #f5f5f5;
}

.bg-default {
    background: linear-gradient(45deg, #312783, #E23216);
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1em;
    background-size: cover;
    background-attachment: fixed;
}

.bg-template1 {
    background: linear-gradient(45deg, #312783, #E23216);
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1em;
    background-size: cover;
    background-attachment: fixed;
}
/* *************************template 2************************ */
.bg-template2 {
    background: radial-gradient(circle at 20% 30%, rgba(0, 0, 50, 1), rgba(20, 0, 80, 0) 60%),
                radial-gradient(circle at 80% 20%, rgba(120, 0, 90, 1), rgba(40, 0, 40, 0) 70%),
                radial-gradient(circle at 40% 80%, rgba(40, 0, 40, 1), rgba(0, 0, 30, 0) 50%),
                radial-gradient(circle at 90% 70%, rgba(80, 0, 100, 1), rgba(120, 20, 100, 0) 80%);
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1em;
    background-size: cover;
    background-attachment: fixed;
}
/************************** template 3********************** */
.bg-template3 {
    background: radial-gradient(circle at 30% 40%, rgba(255, 50, 0, 1), rgba(255, 100, 50, 0) 60%), /* Red wave */
                radial-gradient(circle at 70% 30%, rgba(0, 150, 255, 1), rgba(0, 100, 255, 0) 70%), /* Blue wave */
                radial-gradient(circle at 40% 70%, rgba(255, 200, 0, 1), rgba(255, 150, 0, 0) 60%), /* Orange wave */
                radial-gradient(circle at 80% 70%, rgba(0, 255, 150, 1), rgba(0, 200, 100, 0) 70%), /* Greenish-cyan wave */
                radial-gradient(circle at 20% 80%, rgba(0, 0, 80, 1), rgba(10, 0, 100, 0) 80%),     /* Deep blue wave */
                radial-gradient(circle at 60% 90%, rgba(255, 0, 150, 1), rgba(255, 0, 100, 0) 60%);/* Pink wave */
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1em;
    background-size: cover;
    background-attachment: fixed;
}
/* Button Class */
.btn-t3 {
    color: #000000;
    background-color: #ffffff;
    border-color: #ffffff;
    box-shadow: 0 0.125rem 0.25rem 0 rgba(255, 255, 255, 0.4);
}

.btn-t3:hover {
    color: #fff;
    background-color: rgba(255, 243, 243, 0.5);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-1px);
}

.btn-check:focus+.btn-t3,
.btn-t3:focus,
.btn-t3.focus {
    color: #fff;
    background-color: #ffffff;
    border-color: #ffffff;
    transform: translateY(0);
    box-shadow: none;
}

.btn-check:checked+.btn-t3,
.btn-check:active+.btn-t3,
.btn-t3:active,
.btn-t3.active,
.show>.btn-t3.dropdown-toggle {
    color: #fff;
    background-color: #ffffff;
    border-color: #ffffff;
}

.btn-check:checked+.btn-t3:focus,
.btn-check:active+.btn-t3:focus,
.btn-t3:active:focus,
.btn-t3.active:focus,
.show>.btn-t3.dropdown-toggle:focus {
    box-shadow: none;
}

.btn-t3.disabled,
.btn-t3:disabled {
    box-shadow: none;
}

/************************** template 4********************** */

.bg-template4 {
    background: radial-gradient(circle at 30% 40%, rgba(255, 120, 0, 1), rgba(255, 180, 50, 0) 60%), /* Orange wave */
    radial-gradient(circle at 70% 30%, rgba(255, 0, 100, 1), rgba(200, 0, 50, 0) 70%), /* Pink wave */
    radial-gradient(circle at 40% 70%, rgba(200, 100, 0, 1), rgba(255, 150, 0, 0) 60%), /* Warm orange wave */
    radial-gradient(circle at 80% 70%, rgba(50, 0, 150, 1), rgba(0, 50, 100, 0) 70%), /* Purple wave */
    radial-gradient(circle at 20% 80%, rgba(0, 0, 100, 1), rgba(10, 0, 100, 0) 80%), /* Deep blue wave */
    radial-gradient(circle at 60% 90%, rgba(255, 0, 50, 1), rgba(255, 0, 0, 0) 60%); /* Red wave */
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1em;
    background-size: cover;
    background-attachment: fixed;

}


/* Button Class */
.btn-t4 {
    color: blue;
    background-color: #ffffff;
    border-color: #ffffff;
    box-shadow: 0 0.125rem 0.25rem 0 rgba(255, 255, 255, 0.4);
}

.btn-t4:hover {
    color: #fff;
    background-color: blue;
    border-color: blue;
    transform: translateY(-1px);
}

.btn-check:focus+.btn-t4,
.btn-t4:focus,
.btn-t4.focus {
    color: #fff;
    background-color: #ffffff;
    border-color: #ffffff;
    transform: translateY(0);
    box-shadow: none;
}

.btn-check:checked+.btn-t4,
.btn-check:active+.btn-t4,
.btn-t4:active,
.btn-t4.active,
.show>.btn-t4.dropdown-toggle {
    color: #fff;
    background-color: #ffffff;
    border-color: #ffffff;
}

.btn-check:checked+.btn-t4:focus,
.btn-check:active+.btn-t4:focus,
.btn-t4:active:focus,
.btn-t4.active:focus,
.show>.btn-t4.dropdown-toggle:focus {
    box-shadow: none;
}

.btn-t4.disabled,
.btn-t4:disabled {
    box-shadow: none;
}
.btn4{
    color: #ffffff;
    background-color: rgb(9, 145, 224);
    }

/************************** template 5********************** */

.bg-template5 {
    background: radial-gradient(circle at 30% 40%, rgba(50, 200, 150, 1), rgba(100, 255, 200, 0) 60%), /* Mint green wave */
    radial-gradient(circle at 70% 30%, rgba(0, 150, 120, 1), rgba(0, 255, 180, 0) 70%), /* Teal wave */
    radial-gradient(circle at 40% 70%, rgba(0, 220, 150, 1), rgba(0, 255, 200, 0) 60%), /* Seafoam green wave */
    radial-gradient(circle at 80% 70%, rgba(0, 255, 100, 1), rgba(0, 255, 150, 0) 70%), /* Bright green wave */
    radial-gradient(circle at 20% 80%, rgba(0, 200, 180, 1), rgba(0, 250, 200, 0) 80%), /* Aqua wave */
    radial-gradient(circle at 60% 90%, rgba(0, 180, 150, 1), rgba(0, 255, 200, 0) 60%); /* Cool green wave */
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1em;
    background-size: cover;
    background-attachment: fixed;

}


/* Button Class */
.btn5{
color: #ffffff;
background-color: rgb(53, 220, 50);
}
.btn-t5 {
    color: rgb(21, 157, 19);
    background-color: #ffffff;
    border-color: #ffffff;
    box-shadow: 0 0.125rem 0.25rem 0 rgba(255, 255, 255, 0.4);
}

.btn-t5:hover {
    color: #fff;
    background-color: rgb(53, 220, 50);
    border-color: rgb(53, 220, 50);
    transform: translateY(-1px);
}

.btn-check:focus+.btn-t5,
.btn-t5:focus,
.btn-t5.focus {
    color: #fff;
    background-color: #ffffff;
    border-color: #ffffff;
    transform: translateY(0);
    box-shadow: none;
}

.btn-check:checked+.btn-t5,
.btn-check:active+.btn-t5,
.btn-t5:active,
.btn-t5.active,
.show>.btn-t5.dropdown-toggle {
    color: #fff;
    background-color: #ffffff;
    border-color: #ffffff;
}

.btn-check:checked+.btn-t5:focus,
.btn-check:active+.btn-t5:focus,
.btn-t5:active:focus,
.btn-t5.active:focus,
.show>.btn-t5.dropdown-toggle:focus {
    box-shadow: none;
}

.btn-t5.disabled,
.btn-t5:disabled {
    box-shadow: none;
}

/************************** template 6********************** */

.bg-template6 {
    background:  radial-gradient(circle at 30% 40%, rgba(255, 105, 180, 1), rgba(255, 182, 193, 0) 60%), /* Pink wave */
    radial-gradient(circle at 70% 30%, rgba(255, 192, 203, 1), rgba(255, 255, 255, 0) 70%), /* Light pink wave */
    radial-gradient(circle at 40% 70%, rgba(255, 228, 225, 1), rgba(255, 240, 245, 0) 60%), /* Pale pink wave */
    radial-gradient(circle at 80% 70%, rgba(255, 240, 245, 1), rgba(255, 255, 255, 0) 70%), /* Blush wave */
    radial-gradient(circle at 20% 80%, rgba(255, 250, 250, 1), rgba(255, 255, 255, 0) 80%), /* Snow white wave */
    radial-gradient(circle at 60% 90%, rgba(255, 192, 203, 1), rgba(255, 255, 255, 0) 60%); /* Soft pink wave */
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1em;
    background-size: cover;
    background-attachment: fixed;

}


/* Button Class */
.btn6{
color: #ffffff;
background-color: rgb(239, 47, 159);
}
.btn-t6 {
    color: rgb(239, 47, 159);
    background-color: #ffffff;
    border-color: #ffffff;
    box-shadow: 0 0.125rem 0.25rem 0 rgba(255, 255, 255, 0.4);
}

.btn-t6:hover {
    color: #fff;
    background-color: rgba(255, 243, 243, 0.5);
    border-color: rgba(255, 255, 255, 0.5);
    transform: translateY(-1px);
}

.btn-check:focus+.btn-t6,
.btn-t6:focus,
.btn-t6.focus {
    color: #fff;
    background-color: #ffffff;
    border-color: #ffffff;
    transform: translateY(0);
    box-shadow: none;
}

.btn-check:checked+.btn-t6,
.btn-check:active+.btn-t6,
.btn-t6:active,
.btn-t6.active,
.show>.btn-t6.dropdown-toggle {
    color: #fff;
    background-color: #ffffff;
    border-color: #ffffff;
}

.btn-check:checked+.btn-t6:focus,
.btn-check:active+.btn-t6:focus,
.btn-t6:active:focus,
.btn-t6.active:focus,
.show>.btn-t6.dropdown-toggle:focus {
    box-shadow: none;
}

.btn-t6.disabled,
.btn-t6:disabled {
    box-shadow: none;
}

.typewriter {
    font-family: monospace;
    display: inline-block;
    white-space: nowrap; /* Ensures the text doesn't wrap */
    overflow: hidden;    /* Hides the overflow */
    border-right: 1px solid black; /* Simulates the cursor */
    width: 0;            /* Initially, no width */
    animation: typing 4s steps(30, end) forwards, blink-caret 0.75s step-end infinite;
}

@keyframes typing {
    from { width: 0; }   /* Starts with no text */
    to { width: 50%; }  /* Ends showing full text */
}

@keyframes blink-caret {
    from, to { border-color: transparent; }
    50% { border-color: #312783; }
}

/* Add this CSS to your linkPro-Style.css or any other CSS file */
.pop-in {
    opacity: 0;
    transform: scale(0.8); /* Slightly smaller */
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.pop-out {
    opacity: 1;
    transform: scale(1.2); /* Slightly larger */
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.pop-in.visible {
    opacity: 1;
    transform: scale(1); /* Resets to normal size */
}

.pop-out.visible {
    opacity: 0;
    transform: scale(0.8); /* Shrinks and fades out */
}
.fade-in-up {
    opacity: 0;
    transform: translateY(50px); /* Moves element down */
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.fade-in-down {
    opacity: 0;
    transform: translateY(-50px); /* Moves element up */
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.fade-in-left {
    opacity: 0;
    transform: translateX(-50px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.fade-in-right {
    opacity: 0;
    transform: translateX(50px);
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.fade-in-left.visible,
.fade-in-right.visible {
    opacity: 1;
    transform: translateX(0);
}
.fade-in-up.visible,
.fade-in-down.visible {
    opacity: 1;
    transform: translateY(0); /* Resets to original position */
}

.image-hover-left {
    transition: transform 0.5s ease-in-out;
}

.image-hover-left:hover {
    transform: rotateY(-180deg);
}

.image-hover-right {
    transition: transform 0.5s ease-in-out;
}

.image-hover-right:hover {
    transform: rotateY(180deg);
}

.image-3d-tilt {
    transition: transform 0.4s ease-in-out;
    transform-style: preserve-3d;
}

.image-3d-tilt:hover {
    transform: rotateX(25deg) rotateY(20deg);
}

.image-slide {
    transition: transform 0.4s ease-in-out;
}

.image-slide:hover {
    transform: translateX(10px); /* Slides right by 10px */
    /* transform: translateY(-10px); for sliding up */
}

.image-fade {
    transition: opacity 0.3s ease-in-out;
}

.image-fade:hover {
    opacity: 0.7;
}

.image-skew {
    transition: transform 0.4s ease-in-out;
}

.image-skew:hover {
    transform: skewX(15deg);
}
.image-rotate {
    transition: transform 0.5s ease-in-out;
}

.image-rotate:hover {
    transform: rotate(15deg);
}

 /* Initially hide the input */
 .form-group {
    opacity: 0;
    transition: opacity 0.3s ease, width 0.3s ease;
    width: 0;
    overflow: hidden;
  }

  /* Show the input on hover over the icon */
  .write-icon:hover + .form-group {
    opacity: 1;
    width: 300px; /* Desired width of the input field */
  }

.search-form-phone {
    position: relative;
    display: flex;
    display: inline-block;
}
/* @media (min-width: 1000px) {
    .search-form-phone {
        display: none;
    }
}

/* Show search form on smaller screens (phones) */
@media (max-width: 999px) {
    .search-form-phone {
        display: block;
    }
}

.btn-perpel {
    color: #d226a7;
    background-color: #ffffff;
    border-color: #ffffff;
    box-shadow: 0 0.125rem 0.25rem 0 rgba(255, 255, 255, 0.4);
}

.btn-perpel:hover {
    color: #fff;
    background-color: #f150ec;
    border-color: #f150ec;
    transform: translateY(-1px);
}

.btn-check:focus+.btn-perpel,
.btn-perpel:focus,
.btn-perpel.focus {
    color: #fff;
    background-color: #ffffff;
    border-color: #ffffff;
    transform: translateY(0);
    box-shadow: none;
}

.btn-check:checked+.btn-perpel,
.btn-check:active+.btn-perpel,
.btn-perpel:active,
.btn-perpel.active,
.show>.btn-perpel.dropdown-toggle {
    color: #fff;
    background-color: #ffffff;
    border-color: #ffffff;
}

.btn-check:checked+.btn-perpel:focus,
.btn-check:active+.btn-perpel:focus,
.btn-perpel:active:focus,
.btn-perpel.active:focus,
.show>.btn-perpel.dropdown-toggle:focus {
    box-shadow: none;
}

.btn-perpel.disabled,
.btn-perpel:disabled {
    box-shadow: none;
}