@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

body {
    background-color: black;
    font-family: "Montserrat", sans-serif;
    color: #ffffff;
}

a {
    color: rgb(255, 255, 255);
    text-decoration: none;
}

.text-logo {
    font-weight: 700;
}

.main-header {
    position: relative;
}

.header-inner {
    padding: 30px 8px;
}

.navbar-logo {
    font-size: 20px;
    font-weight: 800;
    color: white;
}

.selected i {
    font-size: 25px;
    color:  #b4b4b4;
}

.menu {
    font-weight: 500;
    opacity: 0;
    display: none;
    transition: 0.2s;
    z-index: 1;
    width: 100%;
    right: 50%;
}


.menu li {
    padding: 12px 20px 12px 0px;
}



@media screen and (min-width: 992px) { 
    .menu {
        font-weight: 500;
        opacity: 1;
        display: flex;
        justify-content: center;
    }

}

/* Dropdown menu */

.dropdown {
    position: relative;
    margin: 2px;
}

.dropdown * {
    box-sizing: border-box;
}


/* Open Styles */
@media screen and (max-width: 992px) {
    .menu-open {
        display: block;
        opacity: 1;
        position: relative;
        transform: translate(50%);
    }

    /* Menu mobile  */
    /* .header-inner {
        position: fixed;
        top: 0px;
        width: 100%;
        height: 100vh;
        text-align: center;
        background: rgb(241, 13, 13);
    } */
}



.grey {
    color: #cecece !important;
    transition: color 0.5s ease-out !important;
}

.grey:hover {
    color: rgb(121, 49, 255) !important;
}

.menu-btns .theme-btn {
    background:rgb(121, 49, 255);
    color: white;
    border: 1px solid rgba(128, 128, 128, 0.257);
    padding: 10px 20px;
    border-radius: 10px;
    transition: background 1s ease-out;

}

.menu-btns .theme-btn:hover {
    background:  #47474e6e;
    
}


.about-image-part  .theme-btn {
    background: #47474e6e;
    color: white;
    border: 1px solid rgba(128, 128, 128, 0.257);
    padding: 10px 20px;
    border-radius: 10px;
    transition: background 1s ease-out;
    
}

.about-image-part .theme-btn:hover {
    background: rgb(121, 49, 255);
    
}

.about-image-part {
    border: 1px solid rgba(128, 128, 128, 0.089);
    padding: 40px;
    text-align: center;
    border-radius: 20px;
    background-color: #121214;
    text-align: center;
    box-shadow: 0px 0px 3px rgba(180, 180, 180, 0.425);
    
}


.about-content-part {
    border: 1px solid rgba(128, 128, 128, 0.089);
    padding: 40px;
    text-align: left;
    border-radius: 20px;
    background-color: #121214;
    box-shadow: 0px 0px 3px rgba(180, 180, 180, 0.425);
   
}

.about-content-part  .theme-btn {
    background: #47474e6e;
    color: white;
    border: 1px solid rgba(128, 128, 128, 0.257);
    padding: 10px 20px;
    border-radius: 10px;
    transition: background 1s ease-out;
    
}

.about-content-part .theme-btn:hover {
    background: rgb(121, 49, 255);
    
}

.about-content-part h3 {
   margin-bottom: 0px;
}

.row {
    display: flex;
}



ul {
    list-style: none;
    padding: 0;
    margin:0;

}

img {
    max-width: 100%;
}

p {
    color: #b8b8b8;
}

.ri-circle-fill {
    color: rgb(0, 221, 0);
}

.about-social {
    display: flex;
    justify-content: space-around;
}

.image-social {
    border: 1px solid rgba(128, 128, 128, 0.089);
    padding: 40px;
    text-align: left;
    border-radius: 20px;
    background-color: #121214;
}

.scroller {
    overflow: hidden;
    mask-image: linear-gradient(90deg, transparent, white 20%, white 80%, transparent);
    -webkit-mask-position-x: 0%;
    -webkit-mask-position-y: 0%;
    mask-size: auto;
    mask-repeat: repeat;
    mask-origin: border-box;
    mask-clip: border-box;
    mask-composite: add;

}

.marquee {
    width: max-content;
    overflow: hidden;
    white-space: nowrap;
    box-sizing: border-box;
    animation: marquee 60s linear infinite;
   
}

.marquee-item {
    display: inline-block;
}

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

.projects-area {
    padding-top: 30px;
}

.container-inner {
    border: 1px solid rgba(128, 128, 128, 0.089);
    padding: 40px;
    border-radius: 20px;
    background-color: #121214;
    box-shadow: 0px 0px 3px rgba(180, 180, 180, 0.425);

}

.section-title  {
    text-align: center;
    margin-bottom: 40px;
    
}
.section-title p {
    padding: 0px 300px;
    margin-bottom: 20px;
    
}

.section-title h1 {
    margin-bottom: 20px;
}


@media screen and (min-width:992px) and (max-width:1400px) {
    .section-title p {
        padding: 0px 100px;
    }
}

@media screen and (max-width:992px) {
    .section-title p {
        padding: 0px;
    }
}

.project-filter {
    text-align: left;
    display: flex;
    flex-wrap: wrap;
}

.projects {
    margin-right: 30px;
    margin-bottom: 30px;
}

.project-item {
    border: 1px solid rgba(172, 172, 172, 0.089);
    border-radius: 20px;
    background-color: #121214;
 
   
}

.project-item img {
    width: 100%;
}

.project-content {
    text-align: left;
    padding-left: 20px;
    padding-bottom: 20px;

}


.project-filter li {
    color: #cecece;
    font-weight: 500;
}

.call-to-action {
    padding-top: 30px;
}

.call-to-action-part {
    border: 1px solid rgba(128, 128, 128, 0.089);
    text-align: center;
    border-radius: 20px;
    background-color: #121214;
    padding: 40px 200px;
    box-shadow: 0px 0px 3px rgba(180, 180, 180, 0.425);

}



@media screen and (max-width:1160px) {
    .call-to-action-part {
        padding: 50px 100px;
    }
}

@media screen and (max-width:900px) {
    .call-to-action-part {
        padding: 30px;
    }
}

.footer-bottom {
    padding: 40px;
}


.call-to-action-part .theme-btn {
    background:rgb(121, 49, 255);
    color: white;
    border: 1px solid rgba(128, 128, 128, 0.257);
    padding: 10px 20px;
    border-radius: 10px;

}


.contact-content-part {
    border: 1px solid rgba(172, 172, 172, 0.089);
    border-radius: 20px;
    background-color: #121214;
    padding: 50px 30px 20px 40px ;
    
}

.contact-icon {
    font-size: 20px;
    color: rgb(121, 49, 255);
}

.single-contact {
    padding-bottom: 20px;
}
.single-contact h2 {
    font-size: 16px;
    margin: 5px 0 5px 0;
}

.contact-form-area {
    border: 1px solid rgba(172, 172, 172, 0.089);
    border-radius: 20px;
    background-color: #121214;
    padding: 40px ;
  
}


@media screen and (max-width:991px) {
    .contact-form-area {
        margin-top: 30px;
    }
    
}


.form-control {
    border-radius: 10px;
    background-color: white;
    padding: 20px 19px;
}


.form-group {
    margin-bottom: 32px;
}
.form-group label {
    margin-bottom: 20px;
}


.form-group  .theme-btn {
    background: #47474e6e;
    color: white;
    border: 1px solid rgba(128, 128, 128, 0.257);
    padding: 10px 20px;
    border-radius: 10px;
    transition: background 1s ease-out;

}

.project-image  {
    margin-bottom: 20px;

}

.project-image img {
    width: 100%;

}



.single-project-page-left, .single-project-page-right {
    height: 100%;
    border: 1px solid rgba(128, 128, 128, 0.089);
    text-align: left;
    border-radius: 20px;
    background-color: #121214;
    box-shadow: 0px 0px 3px rgba(180, 180, 180, 0.425);
    padding: 50px 30px 20px 40px ;

}

.single-project-page-left h3 {
font-size: 20px;

}

.single-info {
   padding-bottom: 30px;
}

.single-info p {
    margin-bottom: 0px;
}

.single-image {
    margin-bottom: 30px;
}