/* global styles */

* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    background-color: var(--primary-color);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='306' height='306' viewBox='0 0 800 800'%3E%3Cg fill='none' stroke='%23DEE6E7' stroke-width='1'%3E%3Cpath d='M769 229L1037 260.9M927 880L731 737 520 660 309 538 40 599 295 764 126.5 879.5 40 599-197 493 102 382-31 229 126.5 79.5-69-63'/%3E%3Cpath d='M-31 229L237 261 390 382 603 493 308.5 537.5 101.5 381.5M370 905L295 764'/%3E%3Cpath d='M520 660L578 842 731 737 840 599 603 493 520 660 295 764 309 538 390 382 539 269 769 229 577.5 41.5 370 105 295 -36 126.5 79.5 237 261 102 382 40 599 -69 737 127 880'/%3E%3Cpath d='M520-140L578.5 42.5 731-63M603 493L539 269 237 261 370 105M902 382L539 269M390 382L102 382'/%3E%3Cpath d='M-222 42L126.5 79.5 370 105 539 269 577.5 41.5 927 80 769 229 902 382 603 493 731 737M295-36L577.5 41.5M578 842L295 764M40-201L127 80M102 382L-261 269'/%3E%3C/g%3E%3Cg fill='%23E0E1E2'%3E%3Ccircle cx='769' cy='229' r='5'/%3E%3Ccircle cx='539' cy='269' r='5'/%3E%3Ccircle cx='603' cy='493' r='5'/%3E%3Ccircle cx='731' cy='737' r='5'/%3E%3Ccircle cx='520' cy='660' r='5'/%3E%3Ccircle cx='309' cy='538' r='5'/%3E%3Ccircle cx='295' cy='764' r='5'/%3E%3Ccircle cx='40' cy='599' r='5'/%3E%3Ccircle cx='102' cy='382' r='5'/%3E%3Ccircle cx='127' cy='80' r='5'/%3E%3Ccircle cx='370' cy='105' r='5'/%3E%3Ccircle cx='578' cy='42' r='5'/%3E%3Ccircle cx='237' cy='261' r='5'/%3E%3Ccircle cx='390' cy='382' r='5'/%3E%3C/g%3E%3C/svg%3E");
}

:root {
    --primary-color: #fff;
    --secondary-color: #08163CE5;
    --accent-green: #01C177;
    --accent-purple:#6C43BF;
    --shade-green: #056C5A;
    --font-color: #222;
    --linear-gradient-color:linear-gradient(180deg, #FFF 20.31%, #6C43BF 100%);
    --heading-font-type: 'Baloo 2';

}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--heading-font-type);
}

h1,
h2,
h3,
.text-body-emphasis {
    color: var(--shade-green)!important;
}

.sub-heading {
    color: var(--accent-purple);
}


.margin-2 {
    margin-top: 15rem;
}



.bg-body-secondary {
    background-color: var(--secondary-color) !important;
}

a {
    color: var(--accent-green);
    text-decoration: var(--accent-green);
}

.fs-5 {
    font-size: 1.25rem;
}


/* Background styles*/

.blue {
    background-color: var(--secondary-color);
}

.purple {
    background-color: var(--accent-purple);
}

.green {
    background-color: var(--shade-green);
}

.bg,
.bg-2 {
    height: 200px;
    align-items: center;
    display: flex;
}


/* nav styles*/

.logo {
    width: 30%;
}

.logo img {
    width: 30%;
}

.winkit-logo {
    width: 180px;
    fill: var(--secondary-color);
}

.navbar {
    background-color: var(--primary-color);
}

.nav-item .nav-link {
    display: flex;
    width: 90px;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
    border-radius: 20px;
    cursor: pointer;
}

.nav-item:hover .nav-link {
    color: var(--primary-color);
    background-color: var(--accent-green);
    border-radius: 20px;
    /* dark shadow */
    box-shadow: 4px 4px 20px 0px rgba(0, 0, 0, 0.20);
    transition: 0.5s ease;
}

/* hero styles */

.hero {
    padding-top: 8rem;
}

.hero-main {
    padding-top: 5.75rem;
}


.hero-img {
    position: absolute;
    width: 35%;
    top: 0;
    left: 0;
    margin-top: 300px;
    margin-left: 5rem;
}

.hero-service {
    position: absolute;
    width: 28%;
    top: 0;
    left: 0;
    margin-top: 160px;
    margin-left: -1rem;
}

.hero-about {
    position: absolute;
    width: 14%;
    top: 0;
    left: 0;
    margin-top: 11rem;
    margin-left: 8rem;
}

.hero-contact {
    position: absolute;
    width: 45%;
    top: 0;
    left: 0;
    margin-top: 174px;
    margin-left: -6rem;
}


.ellipse {
    width: 18%;
    position: absolute;
    top: 0;
    right: 0;
    padding: 0;
}

/* card styles */

.card-footer {
    display: flex;
}

.image-wrapper {
    width: 100%;
    display: flex;
    justify-content: center;
}

.img-top {
    width: 12%;
}

.service-1{
    cursor: pointer;
}

.winkit-1 {
    fill: var(--accent-purple);
}


.Features-card:hover .service-1 {
    background-color: var(--accent-purple);
    color: var(--primary-color);
    transition: 0.5s ease;
}

.Features-card:hover .winkit-1 {
    fill: var(--primary-color);
    transition: 0.5s ease;
}

.service-2{
    cursor: pointer;
}

.winkit-2 {
    fill: var(--shade-green);
}

.Features-card:hover .service-2 {
    background-color: var(--shade-green);
    color: var(--primary-color);
    transition: 0.5s ease;
}

.Features-card:hover .winkit-2 {
    fill: var(--primary-color);
    transition: 0.5s ease;
}

.cta-right {
    width: 30%;
    z-index: 1;
    position: absolute;
    right: 100px;
}

.cta-left {
    width: 30%;
    z-index: 1;
    position: absolute;
    left: 100px;
}

.cta-button {
    display: flex;
    justify-content: center;
}

.cta {
    padding-left: 6rem !important;
    
}

.cta-contact {
    width: 15%;
    z-index: 1;
    position: absolute;
    right: 140px;
    margin-top: 90px;
}

/* Buttons styles */

.btn-primary {
    background-color: var(--secondary-color);
    color: var(--primary-color);
    border-color: var(--secondary-color);
    width: 50%;
}

.btn-outline-primary {
    color: var(--primary-color);
    border-color: var(--primary-color);
    background-color: var(--secondary-color);
    font-size: 1rem;
}

.btn-outline-secondary {
    color: var(--primary-color);
    border-color: var(--primary-color);
    background-color: var(--shade-green);
}

.btn-outline-info {
    color: var(--primary-color);
    border-color: var(--accent-purple);
    background-color: var(--accent-purple);
}

.btn-outline-info:hover {
    color: var(--primary-color);
    border-color: var(--accent-purple);
    background-color: var(--accent-purple);
    transition: 0.5s ease;
}

.whatsapp-btn {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9999;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: #25D366;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
    animation: breathe 2s ease-in-out infinite;
}


@keyframes breathe {
    0% {
        box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.5);
    }

    70% {
        box-shadow: 0 0 0 15px rgba(37, 211, 102, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(0, 0, 0, 0);
    }
}

.bi-whatsapp {
    font-size: x-large;
    color: var(--primary-color);
}




/* sevices styles */

.service-img {
    width: 15%;
    z-index: 1;
    position: absolute;
    right: 230px;
}

.carousel {
    width: -webkit-fill-available;
}

.carousel-inner {
    padding: 1em;
    margin-top: 3rem;
  }

.service-card {
    margin: 0 0.5em;
    box-shadow: 2px 6px 8px 0 rgba(22, 22, 26, 0.18);
    border: none;
    height: 490px;
}
.carousel-control-prev,
.carousel-control-next {
    background-color: #6d6c6c;
    width: 6vh;
    height: 6vh;
    border-radius: 50%;
    top: 65%;
    transform: translateY(-50%);
}


.wrapper {
    max-width: 100%;
    padding: 1rem;
    display: flex;
    justify-content: center;
    align-items: flex-start;
}
.service-card img {
    max-height: 100%;
    border-radius: .5rem;
}

.featurette {
    display: flex;
    align-items: center;
}


.plans {
    display: flex;
    align-items: center;
}

.decoration {
    list-style-type: none;
    padding: 0;
}

.plans-card .btn-outline-dark {
    border-color: var(--primary-color);
    color: var(--primary-color);
    background-color: var(--accent-purple);
}

.bi-check-lg {
    padding: 1rem;
    font-size: x-large;
    color: var(--shade-green);
}

/* About styles */

.about-left {
    width: 18%;
    z-index: 1;
    position: absolute;
    left: 150px;
    margin-top: 2rem;
}

.text-box {
    display: inline-flex;
    height: 4.25rem;
    align-items: center;
}

/* expandable card */

.container .exp-card {
    max-width: 300px;
    height: 215px;
    margin: 30px 10px;
    padding: 20px 15px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.5);
    transition: 0.3s ease-in-out;
}

.container .exp-card .imgContainer {
    position: relative;
    width:250px;
    height:250px;
    top:-50px;
    left:10px;
    z-index: 1;
}
.container .exp-card .imgContainer img {
    width: -webkit-fill-available;
    border-radius: 4px;
    transition: opacity 0.3s ease; /* Adding a smooth transition effect */
    
}

.container .exp-card .imgContainer .back:hover {
    opacity: 0;
}

.container .exp-card .imgContainer .front {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0; /* Initially hiding the "front" image */
}

.container .exp-card .imgContainer:hover .front {
    opacity: 1; /* Displaying the "front" image on hover */
}

.content {
    background-color: var(--primary-color);
}

.exp-card .content {
    position: relative;
    margin-top: -140px;
    padding: 10px 15px;
    color:#111;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: 0.3s ease-in-out;
}

.exp-card:hover .content {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}



/* form styles */

.form-bg {
    padding: 3rem 0;
    background-color:#CED4E6 ;
}

.hidden {
    display:none;
}

.slide-up {
        animation: slideUp 0.5s ease-in-out;
    }

@keyframes slideUp {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0);
    }
}

/*footer styles */

.logo-footer {
    width: 100%;
}

.logo-footer img {
    width: 50%;
}

.footer-form {
    display: flex;
    justify-content: center;
}

.icon-container {
    margin-top: 1rem;
    height: 54px;
    width: 100%;
    display: flex;
    justify-content: center;
}

.bi-linkedin,
.bi-envelope,
.bi-instagram {
    padding: 1rem;
    font-size: x-large;
    color: var(--primary-color);
}

































/* sm */

@media (min-width: 576px ) {
    .bg {
        margin-top: 19rem;
    }

    .bg-2 {
        margin-top: 10rem;
    }

    .margin-2 {
        margin-top: 25rem;
    }

    .Features {
        margin-top: 18rem;
    }

    .carousel-item {
        margin-right: 0;
        display: block;
        flex: 0 0 34%;
    }
    .carousel-inner {
        display: flex;
    }

    .carousel-control-next {
        right: 0;
    }

}


@media (max-width: 576px) and (max-width: 800px) {

    .hero {
        padding-top: 7rem;
    }

    .hero-main {
        padding-bottom: 0!important;
    }

    .hero-img {
        width: 70%;
    }

    .hero-service {
        width: 67%;
        margin-top: 116px;
    }

    .hero-about {
        width: 35%;
        margin-top: 7rem;
        margin-left: 7rem;
    }

    .hero-contact {
        width: 90%;
        margin-top: 162px;
        margin-left: 0rem;
    }

    .bg,
    .bg-2 {
        height: fit-content;
    }

    .winkit-logo {
        fill: var(--primary-color);
    }



    .title {
        color: var(--primary-color) !important;
    }

    .service-1 {
        color: var(--primary-color);
        background-color:  var(--accent-purple);
    }

    .winkit-1 {
        fill: var(--primary-color);
    }

    .service-2 {
        color: var(--primary-color);
        background-color:  var(--shade-green);
    }

    .winkit-2 {
        fill: var(--primary-color);
    }

    .service-img {
        width: 36%;
        margin-right: -8rem 
    }
    .carousel-inner {
        margin-top: 0;
    }

    .service-card {
        margin-top: 0;
    }

    .bi-check-lg {
        display: none;
    }

    .dots {
        width: 10%;
    }

    .col-reverse {
        display: flex;
        flex-direction: column-reverse;
    }

    .vector-left {
        padding-left: 0;
    }

    .cta-right {
        margin-right: -3rem;
        width: 65%;
    }

    .cta-left {
        margin-left: -3rem;
        width: 65%;
    }

    .cta-button {
        padding: 0 !important;
    }

    .about-left {
        width: 50%;
        left: 92px;
        margin-top: -10px;
    }

    .cta-contact {
        width: 30%;
        right: 120px;
        margin-top: 65px;
    }

    .margin-2 {
        margin-top: 6rem;
    }

    .fs-5 {
        font-size: 1.10rem !important;
    }

    .team-height {
        height: 390vh;
    }

    .btn-primary {
        width: 100%;
    }

    

   

   


    


    


   

}


/* md */

@media (min-width: 768px) {
    
    .carousel-item {
        margin-right: 0;
        display: block;
        flex: 0 0 25%;
    }
    .carousel-inner {
        display: flex;
    }
    
    .margin-2 {
        margin-top: 15rem;
    }

    

}

@media (max-width: 800px){
    .hero {
        padding-top: 6rem;
    }

    .logo {
        display: flex;
        width: 50%;
    }

    .logo img {
        width: 90%;
        align-self: center;
    }

    .sm-text {
        display: none;
    }

    .navbar-nav {
        margin-top: 1rem;
    }

    .nav-item .nav-link {
        border-radius: 0;
    }

    .nav-item:hover .nav-link{
        background-color: var(--accent-green);
        width: 100%;
        border-radius: 0;
    }

    .hero-img {
        margin-top: 12rem;
        margin-left: 1rem;
    }

    .ellipse {
        top: 60px;
        padding: 0;
    }

    .cta {
        padding-left: 0 !important;
        padding-right: 1.5rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }

    .service-card .wrapper {
        height: 10em;
    }

    .container .exp-card {
        height: 620px;
    }

    .container .exp-card .content {
        visibility: visible;
        opacity: 1;
        margin-top: -40px;
    }

    .container .exp-card .imgContainer .back {
        opacity: 1; 
    }

    .container .exp-card .imgContainer .front {
        display: none; 
    }

    .container .exp-card .imgContainer:hover .back,
    .container .exp-card .imgContainer:hover .front {
        opacity: 1; 
    }
   

}

/* Lg */

@media (min-width: 992px) {
   
 
    .plans-card:hover .plans  {
        cursor: pointer;
        background: var(--linear-gradient-color);
        transition: 0.5s ease;
        color: #FFF;
    }

    .plans-card:hover .btn-outline-dark {
        color: var(--accent-purple);
        background-color: var(--primary-color);
        transition: 0.5s ease;
    }

    .margin-2 {
        margin-top: 15rem;
    }

    .btn-outline-primary {
        background-color: var(--primary-color);
        border-color: var(--secondary-color);
        color: var(--secondary-color);
    }

    .btn-outline-primary:hover {
        background-color: var(--secondary-color);
        border-color: var(--secondary-color);
        color: var(--primary-color);
        transition: 0.5s ease;
    }

    .btn-outline-secondary {
        background-color:  var(--primary-color);
        border-color: var(--shade-green);
        color: var(--shade-green);
    }
    
    .btn-outline-secondary:hover {
        background-color: var(--shade-green);
        border-color: var(--shade-green);
        color: var(--primary-color);
        transition: 0.5s ease;
    }

    .container .exp-card:hover {
        height: 600px;
    }
    
    .container .exp-card:hover .content {
        visibility: visible;
        opacity: 1;
        margin-top: -40px;
        transition-delay: 0.3s;
    }
    
    .team-height {
        height: 90vh;
    }

    .btn-outline-info {
        color: var(--accent-purple);
        border-color: var(--accent-purple);
        background-color: var(--primary-color);
        cursor: pointer;
    }

    
    

   

  


}