:root {
    --Background: #F7F7F7;
    --Input: #F4F4F4;
    --Dark: #1C1C1C;
    --Font_1: #343434;
    --Font_2: #D7D7D7;
    --Font_3: #748182;
}

@font-face {
    font-family: 'm-200';
    src: url(../fonts/Montserrat/static/Montserrat-ExtraLight.ttf);
}

@font-face {
    font-family: 'm-400';
    src: url(../fonts/Montserrat/static/Montserrat-Regular.ttf);
}

@font-face {
    font-family: 'm-500';
    src: url(../fonts/Montserrat/static/Montserrat-Medium.ttf);
}

@font-face {
    font-family: 'm-600';
    src: url(../fonts/Montserrat/static/Montserrat-SemiBold.ttf);
}

@font-face {
    font-family: 'm-700';
    src: url(../fonts/Montserrat/static/Montserrat-Bold.ttf);
}

@font-face {
    font-family: 'm-800';
    src: url(../fonts/Montserrat/static/Montserrat-ExtraBold.ttf);
}

@font-face {
    font-family: 'm-900';
    src: url(../fonts/Montserrat/static/Montserrat-Black.ttf);
}

@font-face {
    font-family: 'p-400';
    src: url(../fonts/Montserrat/static/Montserrat-Regular.ttf);
}

@font-face {
    font-family: 'p-600';
    src: url(../fonts/Montserrat/static/Montserrat-SemiBold.ttf);
}

@font-face {
    font-family: 'p-700';
    src: url(../fonts/Montserrat/static/Montserrat-Bold.ttf);
}

header {
    min-height: 100vh;
    background-image: linear-gradient(#0000009c, #0000009c),
        url(../images/header.jpg);
    background-size: cover;
    background-attachment: fixed;
    background-position: center center;
}

header .content11 .icons {
    width: 1.5rem;
    height: 1.5rem;
}

header .content11 .icons i {
    font-size: 0.8rem;
}

header .content11 .title {
    color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

header .content11 .title span {
    font-size: 50px;
}

a#Home {
    position: relative;
}

a#Home::after {
    position: absolute;
    left: 15%;
    bottom: 15%;
    content: "";
    height: 2px;
    width: 42px;
    background-color: #FFF;
}

.title {
    z-index: 10;
}

.m-900 {
    font-family: 'm-900';
}

.m-800 {
    font-family: 'm-800';
}

.m-700 {
    font-family: 'm-700';
}

.m-600 {
    font-family: 'm-600';
}

.m-500 {
    font-family: 'm-500';
}

.m-400 {
    font-family: 'm-400';
}

.m-200 {
    font-family: 'm-200';
}

.p-700 {
    font-family: 'p-700';
}

.p-600 {
    font-family: 'p-600';
}

.p-400 {
    font-family: 'p-400';
}

nav{
    background-color: #00000057;
}
/* ---------------- */
header p {
    font-size: 3rem;
  font-weight: 700;
    color: #D7D7D7;
}
.names {
    font-size: 1.6rem;
    font-weight: 400;
    text-align: center;
    color: #aaa;
    margin: 0;
}

#text {
    color: #fff;
    font-weight: 500;
    border-right: 3px solid #fff;
    padding-right: 5px;
    animation: blink 0.6s step-end infinite alternate;
}

@keyframes blink {
    50% {
        border-color: transparent;
    }
}

@media (max-width: 768px) {
    .headline {
        font-size: 2rem;
    }

    .names {
        font-size: 1.2rem;
    }
}

/* -------------- */

h1 {
    font-size: 5rem;
    color: #fff;
}

h1::after {
    content: "";
    animation: jops 10s infinite;
    font-family: 'm-400';
    font-size: inherit;
    color: #FFF;
}

/* Larry Daniels Developer Designer */
.ICONS {
    position: absolute;
    top: 120%;
    left: 50%;
    transform: translate(-50%, -50%);
}

header button {
    color: #FFF !important;
}

#text {
    border-right: 3px solid #fff;
    padding-right: 5px;
    animation: blink 0.6s step-end infinite alternate;
}

@keyframes blink {
    50% {
        border-color: transparent;
    }
}

.about .The-hero {
    background-image: url(../images/dots.png);
    background-repeat: repeat;

    z-index: -1;
}

.about .The-hero img {
    transform: translate(11%, -11%);
}

p.space {
    letter-spacing: 2px;
}

h2 {
    color: var(--Font_1);
}

p {
    color: var(--Font_3);
    font-size: 1.1rem;
}

.progress {
    box-shadow: 0 0 5px gray inset;
    height: 25px;
}

.b1 {
    background-color: var(--Dark);
    color: #fff;
    border: 1px solid #1C1C1C !important;
    font-size: 1rem;
}

.b2 {
    border: 1px solid #1C1C1C;
    background-color: transparent;
    color: #1C1C1C;
    font-size: 1rem;

}

.b1:hover {
    color: #1C1C1C;
    background-color: transparent;
}

.b2:hover {
    background-color: var(--Dark);
    color: #fff;
}

.progress1 {
    animation: progress1 1s ease-out;
}

@keyframes progress1 {
    0% {
        width: 0%;
    }

    50% {
        width: 50%;

    }

    100% {
        width: 95%;

    }
}

.progress2 {
    animation: progress2 1s ease-out;
}

@keyframes progress2 {
    0% {
        width: 0%;
    }

    50% {
        width: 50%;

    }

    100% {
        width: 80%;

    }
}

.progress3 {
    animation: progress2 1s ease-out;
}

@keyframes progress3 {
    0% {
        width: 0%;
    }

    50% {
        width: 50%;

    }

    100% {
        width: 90%;

    }
}

#Contact .ICONs {
    background-color: var(--Background);
    transition: all 0.5s;
    width: 4rem;
    height: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    
}

.ICONs {
    background-color: var(--Background);
    transition: all 0.5s;
    width: 5rem;
    height: 5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

#Services .inner:hover .ICONs {
    background-color: var(--Dark);
    color: var(--Background);
}

#Contact .inner:hover .ICONs {
    background-color: var(--Dark);
    color: var(--Background);
}

.ddd {
    color: #ddd;
}

#Services,
#Weaknesses ,#Opportunities {
    background-color: var(--Background);
}

#Services h2,
#Works h2,
#SLIDER h2,
#Team h2,
#Contact h2 {
    width: 42%;
    background-image: url(../images/dots.png);
    background-repeat: repeat;
    z-index: -1;
}

.item {
    background-color: rgb(242, 255, 127);
    position: relative;
    overflow: hidden;
}

.item img {
    display: block;
}

.content {
    color: #000;
    text-align: center;
    background-color: #ffffffee;
    position: absolute;
    top: 4%;
    left: 2%;
    bottom: 0%;
    right: 2%;
    opacity: 0;
    transition: all 0.5s;
}

.item:hover .content {
    top: 2%;
    left: 2%;
    bottom: 2%;
    right: 2%;
    opacity: 100;
}

.content3 {
    padding: 2rem;
    transition: padding 0.5s;
}

.item:hover .content3 {
    padding: 0.5rem;
}

#Works i {
    border: 1px solid #000;
    font-size: 10px;
    background-color: #000;
    color: #FFF;
    transition: all 1s;
}

#Works i:hover {
    background-color: #fff;
    color: #000;
}

.content2 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.special button {
    background-color: transparent !important;
    border: 0px !important;
    color: #000 !important;
}

.carousel-indicators button,
.carousel-indicators button img {
    width: 0.7rem !important;
    height: 0.7rem !important;
    border-radius: 50%;
    text-indent: unset !important;
    background-color: var(--Dark) !important;
}

.text {
    background-color: #5B5B5B;
    color: #FFF;
}

/* *{
    border: #F00 1px solid;
} */
.inner-t .image {
    overflow: hidden;
}

.inner-t img {
    transition: all 1s;
}

.inner-t:hover img {
    transform: scale(1.3, 1.3);
}

.content-t {
    color: #000;
    text-align: center;
    background-color: #ffffffee;
    position: absolute;
    top: 25%;
    left: 25%;
    bottom: 25%;
    right: 25%;
    opacity: 0;
    transition: all 0.5s;
}

.inner-t:hover .content-t {
    transform: rotatey(360deg);
    top: 2%;
    left: 2%;
    bottom: 2%;
    right: 2%;
    opacity: 100;
}

.content3-t {
    width: 3rem;
    height: 3rem;
    border: 1px solid #1C1C1C;
    background-color: var(--Dark);
    color: #FFF;
    margin: 0.5rem;
}

.content3-t:hover {
    background-color: #fff;
    color: #000;
}

#Contact input,
textarea {
    background-color: var(--Background) !important;
    border: none !important;
    box-shadow: none !important;
}

footer {
    background-color: var(--Dark);
    color: var(--Background);
}
.ICON {
    border: #b30000b5 0.6rem solid;
    background-color: #fff;
    transition: all 0.5s;
    width: 7rem;
    height: 7rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ICON:hover {
    background-color: #b30000b5;
    border-color: #ffafba;
    color: #ffffff;
}
.ICON2 {
    border: #ddd 0.5rem solid;
    width: 5rem;
    height: 5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ddd {
    color: #ddd;
}
.inner-1 .image {
    overflow: hidden;
}
.inner-1 img {
    transition: all 1s;
}
.inner-1:hover img {
    transform: scale(1.3, 1.3);
}
#Threats p{
    font-size: 1.8rem !important;
    font-size: large;
    color: #000000 !important;
    background-color: #d7d7d7b5;
    padding: 1rem;
    /* border-radius: 20px; */
    border-left: #000 dashed 10px;
    
}
#Threats{
     background-image:
        /* linear-gradient(#0f0f109c, #0f0f109c), */
        url(../images/th.avif);
    background-size: cover;
    background-attachment: fixed;
    background-position: center center;
}

.inner22 {
  transition: background-color 200ms ease;
}

.inner22:hover {
  background-color: #8ffff67c; 
}