*{
    box-sizing: border-box;
}
:root{
    -mo66-main-font:mo66-font;
    -mo66-general-font:mo66-general-font;
    -mo66-Divfoil-color:#0078FF;
    scroll-padding-top: 74px;
}
:root ,body{
    scroll-behavior: smooth;
}
.mo66-blue-line{
    width: 50px;
    background-color: #0078FF;
    height: 5px;
    margin: auto;
}
@font-face {
    font-family:mo66-font ;
    src: url("./fonts/Arvo,Caveat,Freeman,Lato,Montserrat,etc/Freeman/Freeman-Regular.ttf");
}
@font-face {
    font-family:mo66-general-font ;
    src: url("");
}



/* =======================================end general =============================================================== */

header{
    background-image:linear-gradient( rgba(6, 6, 6, 0.616)50%,rgba(6, 6, 6, 0.616)50%),url( "../images/hero-bg.jpg");
    background-size:cover;
    background-attachment: fixed;
}

a .mo66-line-stable{
    width: 45px;
    height: 3px;
    background-color: white;
    position: absolute;
    top: 70%;
}
a.mo66-line{
    position: relative;
}
a.mo66-line::after{
    content: '';
    width: 45px;
    height: 3px;
    background-color: white;
    position: absolute;
    top: 90%;
    right: 100%;
    overflow: hidden;
    transition-property: all;
    transition-duration: 0.7s;
}
a.mo66-line:hover::after{
    right: 0%;
}


.nav-item{
    padding: 0px 5px;
}

 header .mo66-content h2{
    position: relative;
}
.mo66-content h2::after{
    content: "45";
    position: absolute;
    transform: translate(-50% ,0%);
    animation:type 8s infinite;

}

@keyframes type {
    0%{content:"D"; }
    2%{content:"De|"; }
    3%{content:"Dev|"; }
    5%{content:"Deve|"; }
    6%{content:"Devel|"; }
    8%{content:"Develo|"; }
    9%{content:"Develop|"; }
    11%{content:"Develope|"; }
    12%{content:"Developer|"; }
    14%{content:"Develope|"; }
    15%{content:"Develop|"; }
    17%{content:"Develo|"; }
    18%{content:"Devel|"; }
    20%{content:"Deve|"; }
    21%{content:"Dev|"; }
    23%{content:"De|"; }
    24%{content:"D|"; }
    26%{content:"|"; }
    27%{content: "D|";}
    29%{content: "De|";}
    30%{content: "Des|";}
    32%{content: "Des|";}
    33%{content: "Desi|";}
    35%{content: "Desig|";}
    36%{content: "Design|";}
    38%{content: "Designe|";}
    39%{content: "Designer|";}
    41%{content: "Designe|";}
    43%{content: "Design|";}
    44%{content: "Desig|";}
    46%{content: "Desi|";}
    47%{content: "Des|";}
    49%{content: "De|";}
    50%{content: "D|";}
    52%{content: "|";}
    53%{content: "F|";}
    55%{content: "Fr|";}
    56%{content: "Fre|";}
    58%{content: "Free|";}
    59%{content: "Freel|";}
    61%{content: "Freela|";}
    62%{content: "Freelan|";}
    64%{content: "Freelanc|";}
    65%{content: "Freelance|";}
    67%{content: "Freelancer|";}
    68%{content: "Freelance|";}
    69%{content: "Freelanc|";}
    70%{content: "Freelan|";}
    71%{content: "Freela|";}
    72%{content: "Freel|";}
    73%{content: "Free|";}
    74%{content: "Fre|";}
    75%{content: "Fr|";}
    76%{content: "F|";}
    77%{content: "|";}
    78%{content: "P|";}
    79%{content: "Ph|";}
    80%{content: "Pho|";}
    81%{content: "Phot|";}
    82%{content: "Photo|";}
    83%{content: "Photog|";}
    84%{content: "Photogr|";}
    85%{content: "Photogra|";}
    86%{content: "Photograp|";}
    87%{content: "Photograph|";}
    88%{content: "Photographe|";}
    89%{content: "Photographer|";}
    90%{content: "Photographe|";}
    91%{content: "Photograph|";}
    92%{content: "Photograp|";}
    93%{content: "Photogra|";}
    94%{content: "Photog|";}
    95%{content: "Photo|";}
    96%{content: "Phot|";}
    97%{content: "Pho|";}
    98%{content: "Ph|";}
    99%{content: "P|";}
    100%{content: "|";}   
}



/* =======================================end header =============================================================== */
.section1{
    background-color: #F5F5F5;
}
.section1 article{
    font-size: 1.3rem;
}

/* =======================================end section1 =============================================================== */
.section2{
    background-color: #F5F5F5;
}
.mo66-s2-icon{
    width: 120px;
    height: 120px;
    border: #0078FF 10px solid ;
    transition-property: all;
    transition-duration: 0.7s;
}
.mo66-s2-item{
    padding-top: 25px;
}

.mo66-s2-icon:hover{
    background-color:#0078FF;
    border: #CDE1F8 10px solid;
}
/* =======================================end section2 =============================================================== */

.section3{
    background-image:linear-gradient(#4088dbe3 50% ,#4088dbe3 50%), url(../images/counters-bg.jpg);
    background-size: 100% 100%;
    background-attachment: fixed;
}





/* =======================================end section3 =============================================================== */
.mo66-s3-icon{
    width: 80px;
    height: 80px;
    border: #CDE1F8 10px solid ;
}
.mo66-s3-item{
    padding-top: 15px;
}
/* =======================================end section3 =============================================================== */

.section4{
    background-color: #F5F5F5;
}
.mo66-s4-icon{
    bottom:5% ;
    right: 10%;
}
.mo66-s4-part figure img{
    transition-property: all;
    transition-duration: 1s;
}
.mo66-s4-part:hover figure img{
    transform: scale(125%);

}
.mo66-s4-border{
    border-color: transparent;
}
.mo66-s4-border-2{
    border-color: transparent;
}



/* =======================================end section4 =============================================================== */



.section5{
    background-image:linear-gradient(#0479ffde 50% ,#0479ffde 50%  ), url(../images/overlay-bg.jpg);
    background-size: 100% 100%;
    background-attachment: fixed;

    padding: 160px 0px;
}

.section5-content img{
    width: 13%;
}
.carousel-indicators .mo66-s5-button{
    width: 15px;
    height:15px;
}


/* =======================================end section5 =============================================================== */

.mo66-s6-button{
    width: fit-content;
    font-size: 1rem;
    font-weight: 500;
    top: 60%;
    left: 50%;
    transform: translateX(-50%);
}
.mo66-s6-blue-hover{
    transition-property: all;
    transition-duration: 0.7s;
}
.mo66-s6-blue-hover:hover{
    color: #0062D3;
}
.mo66-s6-item21{
    transition-property: all;
    transition-duration: 0.7s;
}
.mo66-s6-item21:hover{
    color: #0062D3;
}


.mo66-ws6-item{
    width: 12%;
}

/* =======================================end section6 =============================================================== */

.footer{
    background-image:linear-gradient(#0479ffde 50% ,#0479ffde 50%  ), url(../images/overlay-bg.jpg);
    background-size: 100% 100%;
    background-attachment: fixed;

    padding: 160px 0px;
}

.mo66-fo-icon{
    width: 50px;
    height: 50px;
    border: #0078FF 5px solid ;
    
}

.mo66-fo-end{
    background-color: #0062D3;
}
.mo66-fo-span{
    font-weight: 700;
}

.mo66-button-footer{
    transition-property: all;
    transition-duration: 0.2s;
    border:var(--bs-primary) 5px solid;
}
.mo66-button-footer:hover{
    background-color: #3393FF;
    border:#CDE1F8 5px solid;
}


.mo66-article-footer{
    font-size: 1.2rem;
}
.mo66-i-footer{
    font-size: 1.1rem;
    list-style-type: none;
}

.mo66-fo-icon{
    transition-property: all;
    transition-duration: 0.2s;
    border:var(--bs-primary) 5px solid;
}
.mo66-fo-icon:hover{
    background-color: #3393FF;
    border:#CDE1F8 5px solid;
 }


/* =======================================end footer =============================================================== */
   /* md */
   @media screen and (min-width: 1550px ){
    a .mo66-line-stable{
        width: 45px;
        height: 3px;
        background-color: transparent;
        position: absolute;
        top: 70%;
    }

   }
   @media screen and (max-width: 990px ){
    a .mo66-line-stable{
        width: 45px;
        height: 3px;
        background-color: transparent;
        position: absolute;
        top: 70%;
    }

   }