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

Name: main.css
Version: 1.0

-------------------------------------

Table of contents
        
    01. Navbar
    02. Slider
    03. About us
    04. Services
    05. Some Facts
    06. Portfolio
    07. Testimonials
    08. Blog
    09. Contact
    10. Footer
*/

:root{
    --primary-color:white ;
    --secondary-color:  #888888;
    --hover-color: #c4c4c4 ;
    --blellow-color: #009fde ;
    

 
  } 
  
    

  @font-face {
    font-family: 'Mainfont';
    src: url(fontsme1/Benzin-Regular.ttf); }
    
    @font-face { font-family: 'navnormalfont';
    src: url(fontsme1/BritanicaExpandedBlack.ttf);
}


@font-face { font-family: 'navboldfont';
    src: url(fontsme1/Dreadnoughtus.ttf);
}

body { 
        overflow-x: hidden;  
    font-family:"Mainfont", sans-serif;
    height: 600px;
}

/* ==========================
   [01]. Navbar
========================== */
 

.lexal_tm_loader-wrapper {
    position: fixed;
    width: 100%;
    height: 100%;
    margin-top: -80px;
    background-color: rgb(255, 255, 255);
    z-index: 11111111;
}
.lexal_tm_loader-wrapper .loader {
    height: 1px;
    background-color: rgb(17, 17, 17);
    z-index: 11111111;
	position: absolute;
}


.animated{-webkit-animation-duration:1s;-moz-animation-duration:1s;-o-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-o-animation-fill-mode:both;animation-fill-mode:both;}
@-webkit-keyframes flipInX {
    0% {
        -webkit-transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }
    
    40% {
        -webkit-transform: perspective(400px) rotateX(-10deg);
    }
    
    70% {
        -webkit-transform: perspective(400px) rotateX(10deg);
    }
    
    100% {
        -webkit-transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
}
@-moz-keyframes flipInX {
    0% {
        -moz-transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }
    
    40% {
        -moz-transform: perspective(400px) rotateX(-10deg);
    }
    
    70% {
        -moz-transform: perspective(400px) rotateX(10deg);
    }
    
    100% {
        -moz-transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
}
@-o-keyframes flipInX {
    0% {
        -o-transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }
    
    40% {
        -o-transform: perspective(400px) rotateX(-10deg);
    }
    
    70% {
        -o-transform: perspective(400px) rotateX(10deg);
    }
    
    100% {
        -o-transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
}
@keyframes flipInX {
    0% {
        transform: perspective(400px) rotateX(90deg);
        opacity: 0;
    }
    
    40% {
        transform: perspective(400px) rotateX(-10deg);
    }
    
    70% {
        transform: perspective(400px) rotateX(10deg);
    }
    
    100% {
        transform: perspective(400px) rotateX(0deg);
        opacity: 1;
    }
}

.flipInX {
	-webkit-backface-visibility: visible !important;
	-webkit-animation-name: flipInX;
	-moz-backface-visibility: visible !important;
	-moz-animation-name: flipInX;
	-o-backface-visibility: visible !important;
	-o-animation-name: flipInX;
	backface-visibility: visible !important;
	animation-name: flipInX;
}

.nav-item ul{
flex:1;
text-align: right;

}
 
.navbar .nav-item a {
     
    position: relative;
  }

  .navbar .nav-item  a:after {    
    background: none repeat scroll 0 0 transparent;
    bottom: 0;
    content: "";
    display: block;
    height: 2px;
    left: 50%;
    position: absolute;
    background: var(--blellow-color);
    transition: width 0.3s ease 0s, left 0.3s ease 0s;
    width: 0;
    margin-top: 200px;
  }
  .navbar .nav-item a:hover:after { 
    width: 100%; 
    left: 0; 
  }

.navbar {
    background:  #2b2b2b !important;
    padding: 15px 0; 
    /* box-shadow: 3px 3px 10px #2b2b2b;  */
   
    
}

#icon{
width:30px ;
cursor:pointer;



}
.navbar .h1 { 
     font-family:"navboldfont", sans-serif;
     font-size: 23px;
    color:var(--primary-color);
    padding-top: 5px;
    margin: 0 20px; }

.navbar .nav-item {
    font-size: 14px;
    margin: 0 20px; 
   
   
}



.navbar .nav-item .nav-link {
    color: var(--primary-color);
}

.navbar .nav-item .nav-link:hover { 
  
   
    -webkit-text-stroke: .5px ;
    color: var(--primary-color);
    
     
    
}
.navbar .navbar-nav .dropdown .dropdown-menu {
    margin-top: 25px;
    background:#212222;
}

.navbar .navbar-nav .dropdown span {
    font-size: 10px;
    margin-left: 3px;
}

.navbar .navbar-nav .dropdown .dropdown-menu a {
    font-size: 16px;
    color: var(--primary-color);
    margin-bottom: 10px;
}

.navbar .navbar-nav .dropdown .dropdown-menu a:hover {
    background:var(--blellow-color);
}


/* ==========================
   [02]. Slider 
========================== */
 
      .mouse-wrapper {
        position: absolute;
        top: 90%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
      }
      
      .mouse-icon {
        height: 35px;
        width: 22px;
        border-radius: 12px;
        border: 2px solid #fff;
        position: relative;
      }
      
      .mouse-icon:after {
        content: '';
        height: 5px;
        width: 3px;
        display: block;
        margin: 5px auto;
        border: 2px solid #fff;
        -webkit-border-radius: 8px;
        border-radius: 8px;
        -webkit-animation: mouse-wheel 0.6s linear infinite;
        -moz-animation: mouse-wheel 0.6s linear infinite;
      }
      
      .mouse-arrow {
        display: block;
        -ms-transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
        border-right: 2px solid #fff;
        border-bottom: 2px solid #fff;
        margin: 2px 0 3px 6px;
        width: 8px;
        height: 8px;
        -webkit-animation: mouse-scroll 1s infinite;
        -moz-animation: mouse-scroll 1s infinite;
        -webkit-animation-delay: 100ms;
        -moz-animation-delay: 100ms;
        -webkit-animation-direction: alternate;
      }
      
      .mouse-arrow:after,
      .mouse-arrow:before {
        position: absolute;
        content: '';
        display: block;
        border-right: 2px solid #fff;
        border-bottom: 2px solid #fff;
        width: 8px;
        height: 8px;
        -webkit-animation: mouse-scroll 1s infinite;
        -moz-animation: mouse-scroll 1s infinite;
      }
      
      .mouse-arrow:after {
        margin: 7px 0 3px 7px;
        -webkit-animation-delay: 200ms;
        -moz-animation-delay: 200ms;
        -webkit-animation-direction: alternate;
      }
      
      .mouse-arrow:before {
        margin: 14px 0 3px 14px;
        -webkit-animation-delay: 300ms;
        -moz-animation-delay: 300ms;
        -webkit-animation-direction: alternate;
      }
      
      @-webkit-keyframes mouse-wheel {
        0% {
          opacity: 1;
          -webkit-transform: translateY(0);
          -ms-transform: translateY(0);
          transform: translateY(0);
        }
        100% {
          opacity: 0;
          -webkit-transform: translateY(6px);
          -ms-transform: translateY(6px);
          transform: translateY(6px);
        }
      }
      
      @-webkit-keyframes mouse-scroll {
        0% {
          opacity: 0;
        }
        50% {
          opacity: 0.5;
        }
        100% {
          opacity: 1;
        }
      }
       
    
.area{
    
    height: calc(100vh - 92px);
    background-attachment: fixed;
    
   
}

.circles{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.circles li{
    position: absolute;
    display: block;
    list-style: none;
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.2);
    animation: animate 25s linear infinite;
    bottom: -150px;
    
}

.circles li:nth-child(1){
    left: 25%;
    width: 80px;
    height: 80px;
    animation-delay: 0s;
}


.circles li:nth-child(2){
    left: 10%;
    width: 20px;
    height: 20px;
    animation-delay: 2s;
    animation-duration: 12s;
}

.circles li:nth-child(3){
    left: 70%;
    width: 20px;
    height: 20px;
    animation-delay: 4s;
}

.circles li:nth-child(4){
    left: 40%;
    width: 60px;
    height: 60px;
    animation-delay: 0s;
    animation-duration: 18s;
}

.circles li:nth-child(5){
    left: 65%;
    width: 20px;
    height: 20px;
    animation-delay: 0s;
}

.circles li:nth-child(6){
    left: 75%;
    width: 110px;
    height: 110px;
    animation-delay: 3s;
}

.circles li:nth-child(7){
    left: 35%;
    width: 150px;
    height: 150px;
    animation-delay: 7s;
}

.circles li:nth-child(8){
    left: 50%;
    width: 25px;
    height: 25px;
    animation-delay: 15s;
    animation-duration: 45s;
}

.circles li:nth-child(9){
    left: 20%;
    width: 15px;
    height: 15px;
    animation-delay: 2s;
    animation-duration: 35s;
}

.circles li:nth-child(10){
    left: 85%;
    width: 150px;
    height: 150px;
    animation-delay: 0s;
    animation-duration: 11s;
}



@keyframes animate {

    0%{
        transform: translateY(0) rotate(0deg);
        opacity: 1;
        border-radius: 0;
    }

    100%{
        transform: translateY(-1000px) rotate(720deg);
        opacity: 0;
        border-radius: 50%;
    }

}





.slider a {
     
    position: relative;
  }
  .slider a:after {    
    background: none repeat scroll 0 0 transparent;
    bottom: 0;
    content: "";
    display: block;
    height: 2px;
    left: 50%;
    position: absolute;
    background: var(--secondary-color);
    transition: width 0.3s ease 0s, left 0.3s ease 0s;
    width: 0;
  }
  .slider a:hover:after { 
    width: 0%; 
    left: 0; 
  }

  .btn{ margin-right:10px;}
  
.slider .left-content .btn {
    border: 2px solid var(--blellow-color);
    border-radius: 25px;
    padding: 10px 30px;
    font-size: 15px;
    color: var(--primary-color);
    margin-top: 20px;
    text-decoration: none;
     cursor: pointer;
    z-index: 200;

  overflow: hidden;
   
}

  .slider .left-content .btn:hover {
    border: 2px solid var(--primary-color);
    border-radius: 30px;
    padding: 10px 30px;
     
     
    text-decoration: none;
     cursor: pointer;  
    
   
      
      
}




/* Effect */
.blob {
    z-index: -1;
    position: absolute;
    width: 2px;
    height: 2px;
    margin-left: 0;
    margin-top: 0;
    background: rgb(80, 29, 29) !important; /* define your color here */
    border-color: var(--blellow-color); /* define your color here */
    border-radius: 50%;
    border: 2px solid var(--blellow-color);
    border-radius: 30px;
    border-style: solid;
    transition: border-width 0.5s ease-in-out, margin-left 0.5s ease-in-out,
      margin-top 0.5s ease-in-out;
  }
  .expand {
    border-color: var(--blellow-color); !important; /* define your color here */
    border-width: 500px;
    border-style: solid;
    transition: border-width 0.5s ease-in-out, margin-left 0.5s ease-in-out,
      margin-top 0.5s ease-in-out;
    margin-left: -500px;
    margin-top: -500px;
  }
  

  
.slider {
     
    background: url('../img/bg/slider-bg.jpg') center center no-repeat;
    height: calc(100vh - 71px);
    background-attachment: fixed;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 80px;
   
}



.slider .particels {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; 
    height: 100%;
}

.animated-headlines .cd-headline span {
    font-size: 50px;
    font-family: "Navboldfont", sans-serif;s
    text-transform: uppercase;
    color: var(--blellow-color);
}




.slider .left-content .hello {
    font-size: 20px;
    font-weight: lighter;
    color: var(--primary-color);
    margin: 0;
    padding: 0;
}

.slider .left-content h2 {
    font-size: 12px;
    font-weight: 600;
    color: var(--primary-color);
    padding: 10px 0;
    border-top: 1px solid var(--secondary-color);
    border-bottom: 1px solid var(--secondary-color);
    display: inline-block;
    margin: 5px 0 20px 0;
}

.slider .left-content .paragraph {
    font-size: 14px;
    font-weight: 400;
    color: var(--primary-color);
    line-height: 28px;
    padding-right: 20px;
}



/* ==========================
   [03]. About Me 
========================== */

 

.about-me {
    padding-top: 120px;
       
    margin-top: -10px; 
    padding-bottom: 10px;
    background: #212222;
}




.about-me img {


    mix-blend-mode: luminosity;
    padding-left: 60px;
    width: 100%;
  max-width: 400px;
  height: auto;
}


.about-me img:hover {
    mix-blend-mode: normal;

      
      
}

.about-me h2 {
    padding-top: 0px; 
    font-size: 30px;
    font-family:"navboldfont", sans-serif;
    font-weight: 800;
    color: var(--blellow-color);
    margin-bottom: 30px;
}

.about-me p {
    font-size: 15px;
    font-weight: 400;
    color: #bac8d3;
    line-height: 28px;
    margin: 20px 0 40px 0;
}

.about-me .btn-1 {
    background: var(--blellow-color);
    border-radius: 35px;
    padding: 10px 30px;
    font-size: 14px;
    color: #ffffff;
    font-weight: 500;
    margin-right: 10px;
    text-decoration: none;
}

.about-me .btn-1:hover {
     
    background: #0d7cb8;  
     
}

.about-me .btn-2 {
    border: 2px solid var(--blellow-color);
    border-radius: 35px;
    padding: 10px 30px;
    font-size: 14px;
    color: #ffffff;
    font-weight: 500;
    text-decoration: none; }
 
    .about-me .btn-2:hover {
     
        background: #2b2c2c;  
         
    }
      
    .social-icons-own ul {
        display: flex;
        position: absolute;
        top: 100%;
        left: 47%;

        transform: translate(-50%, -50%);
      }
      
  

      .social-icons-own ul li {
        list-style: none;
      }
      
      .social-icons-own ul li a {
        width: 60px;
        height: 60px;
        background-color: rgb(255, 255, 255);
        text-align: center;
        line-height: 60px;
        font-size: 30px;
        
        padding: 0 5px;
        margin: 0 5px;
        display: block;
        border-radius: 50%;
        position: relative;
        overflow: hidden;
        border: 3px solid #fff;
        z-index: 1;
      }
      
      .social-icons-own ul li a .icon {
        position: relative;
        color: var(--blellow-color);
        transition: .5s;
        z-index: 3;
      }
      
      .social-icons-own ul li a:hover .icon {
        color: #fff;
        transform: rotateY(360deg);
      }
      
      .social-icons-own ul li a:before {
        content: "";
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        height: 100%;
        background: #f00;
        transition: .5s;
        z-index: 2;
      }
      
      .social-icons-own ul li a:hover:before {
        top: 0;
      }
      
      .social-icons-own ul li:nth-child(1) a:before{
        background: #075E54;
      }
      
      .social-icons-own ul li:nth-child(2) a:before{
        background: #55acee;
      }
      
      .social-icons-own ul li:nth-child(3) a:before {
        background: #0077b5;
      }
      
      .social-icons-own ul li:nth-child(4) a:before {
        background:#E4405F;    
      }

   
 
/* ==========================
   [04]. Services
========================== */


 
.services {
    background: url('../img/bg/some-facts-bg.png') center center no-repeat;
    background-size: cover;
    background-attachment: fixed;
    padding-top: 30px; 
    background: #212222;
    
   
}

.services h2 {
    padding-top: 30px;
    font-family:"navboldfont", sans-serif;
    font-size: 30px;
    font-weight: 800;
    color: var(--blellow-color);
    margin-bottom: 60px;
}

.services .box {
    padding: 40px;
    margin-bottom: 30px;
    background: #2d2e2e;;;
    border-top-right-radius: 7%;
    border-bottom-left-radius: 7%;  
    box-shadow: 0px 0px  ;
    transition: box-shadow 0.3s ease-in-out;
}

.services .box:hover {
    box-shadow: 5px 10px var(--blellow-color);
  }

.single-portfolio-item{
    position: relative;
  }
  .single-portfolio-item::before, .single-portfolio-item::after { 
      content: ""; 
      position: absolute; 
      animation: borde_giro 8s linear infinite; 
      top: 0; 
      left: 0; 
      width: 80%; 
      height: 0%; 
      border-width: 0; 
      border-color:#2d2e2e;
      border-style: solid; 
      box-sizing: border-box; 
      
  } 
  .single-portfolio-item::after { 
      animation-delay: -4s; 
  } 
   
  @keyframes borde_giro { 
    0%, 100% { 
      top: 0; left: 0; 
      width: 100%; height: 0%; 
      border-top-width: 1px; 
      border-left-width: 0; 
      border-right-width: 0; 
    } 
    1%{ border-left-width: 1px; } 
   
    24%{ border-top-width: 1px; } 
   
    25% { 
      top: 0; left: 0; bottom: initial; 
      width: 0%; height: 100%; 
      border-top-width: 0; 
      border-bottom-width: 0; 
    } 
   
    26%{ 
      top: initial; bottom: 0; 
      border-bottom-width: 1px; 
    } 
   
    49%{ border-left-width: 1px; } 
    50% { 
      left: 0; 
      width: 100%; height: 0%; 
      border-right-width: 0; 
      border-left-width: 0; 
    } 
   
    51%{  
      left: initial; right: 0; 
    border-right-width:1px; 
    } 
   
    74%{ 
      top: initial; bottom: 0; 
      border-bottom-width: 1px; 
    } 
    75% { 
      top: 0; left: initial;
      bottom: initial; right: 0; 
      width: 0; height: 100%; 
      border-top-width: 0; 
      border-bottom-width: 0; 
    } 
    76%{ border-top-width: 1px; } 
    99%{ border-right-width: 1px; } 
   
    100% { 
      top: 0; left: initial; right: 0; 
      width: 100%; height: 0%; 
      border-top-width: 1px; 
      border-left-width: 0; 
      border-right-width: 0; 
    } 
  } 
  
 
  
  
  
.services .box span {
    font-size: 30px;
    color: var(--blellow-color);
}

.services .box h3 {
    font-size: 18px;
    font-weight: 700;
    color: #eee;
    margin: 0;
    padding: 0;
    margin: 20px 0;
}

.services .box p {
    font-size: 14px;
    color: #bac8d3;
    font-weight: 400;
    line-height: 26px;
    padding: 0;
    margin: 0;
}




 

/* ==========================
   [06]. Portfolio
========================== */







.text-muted {
    color: #777;
}

.portfolio {
    padding: 90px 0 25px 0;
    background: #212222;
}

.portfolio h2 {
    font-family:"navboldfont", sans-serif;
    font-size: 30px;
    font-weight: 800;
    color: var(--blellow-color);
    margin-bottom: 60px;
}

.portfolio .button-group {
    margin-bottom: 30px;
}



.portfolio .single-portfolio-item .portfolio-caption {
    margin: 0 auto;
    padding: 25px; 
    text-align: center;
    background-color: #fff;
}

.portfolio .single-portfolio-item .portfolio-caption h4 {
    margin: 0;
    text-transform: none;
}

.portfolio .single-portfolio-item .portfolio-caption p {
    margin: 0;
    
    font-size: 14px;    }





.portfolio .button-group button {
    border: 0;
    background: transparent;
    font-size: 15px;
    font-weight: 600;
    margin-right: 10px;
    color: #bac8d3;
    text-transform: uppercase;
    cursor: pointer;
    padding: 10px 20px;
    border-radius: 35px;
    transition: all .2s ease-in-out;
}
 

.portfolio .button-group button:hover  {
    color: #ffffff;
    background:var(--blellow-color);
    
    border: 2px solid var(--primary-color);
    border-radius: 30px;
    padding: 10px 30px;
     
     
    text-decoration: none;
     cursor: pointer;  
     box-shadow: 0px 10px 16px px rgba(97, 97, 97, 0.06);
}



.portfolio .single-portfolio-item {
    position: relative;
    margin-bottom: 30px;
}

.portfolio .single-portfolio-item .overlay{
    position: absolute;
    top: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: var(--blellow-color);
    color: #c40d0d;
    opacity: 0;
    transition: all .7s ease-in-out;
}

.portfolio .single-portfolio-item .overlay .content {
    font-size: 20px;
    position: absolute;
    text-decoration: none;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    color: #ffffff;
    transition: all .3s ease-in-out;
    
}

.portfolio .single-portfolio-item .overlay .content h3 {
    font-size: 18px;
    font-weight: 500;
    cursor: default;
}

.portfolio .single-portfolio-item .overlay .content p {
    font-size: 14px;
    font-weight: 200;
    cursor: default;
}

.portfolio .single-portfolio-item .overlay .content a {
    color: #ffffff;
    text-decoration: none;
    font-size: 20px;
    
}

.portfolio .single-portfolio-item:hover .overlay {
    opacity: .85;
}


/* ==========================
   [09]. Contact
========================== */

.contact {
    padding: 40px 0 10px 0;
    background: #212222;
} 
.contact h2 {
    font-family:"navboldfont", sans-serif;
    font-size: 30px;
    font-weight: 800;
    color: var(--blellow-color);
    margin-bottom: 60px;
}

.contact .form-control {
    padding: 25px;
    font-size: 13px;
    margin-bottom: 10px;
    background: #fcf2f2;
    border: 0;
    border-radius: 20px;
}
.contact button.btn:hover {
    
      
    -webkit-text-stroke: .5px ;
    background: #2e2e2e; 
    border-radius: 100px;  
    border: 3px solid  var(--blellow-color);
}


.contact button  {
    padding-top: 10px;
    border-radius: 10px;
    display:flex;
    height:50px;
    width:200px ;
    justify-content:center ;
    align-items:right  ;      
    font-size: 16px;
    font-weight: 800;
    color: var(--blellow-color);
    border: 3px solid var(--blellow-color);;  
display: grid;  
    
    margin-bottom: 50px;
    background: var(--blellow-color);
    color: #ffffff; 
    transition-duration: .3s;
    transition-property: border-radius; }
  
.contact .info {
    padding-left: 40px;
}

.contact .info span {
    font-size: 20px;
    color: var(--blellow-color);
}

.contact .info p {
    font-size: 14px;
    margin: 10px 0 20px 0;
    color: #eee;
}
/* Popup container - can be anything you want */
.popup {
    position: relative;
    display: inline-block;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none; 
    
  }
  
  /* The actual popup */
  .popup .popuptext {
    visibility: hidden;
    width: 190px;
    background-color: #555;
    color: #fff;
    text-align: center;
    font-size: 14px;
    border-radius: 6px;
    padding: 10px 0;
    position: absolute;
    z-index: 1;
    bottom: 130%;
    left: 43%;
    margin-left: -80px;
    cursor: default;
   
  }
  
  /* Popup arrow */
  .popup .popuptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent; 
  } 
  
  
  /* Toggle this class - hide and show the popup */
  .popup .show {
    visibility: visible;
    -webkit-animation: fadeIn 1s;
    animation: fadeIn 1s;
    transition-duration: 3s;
    transition-property: visibility; 
  }

  
  /* Add animation (fade in the popup) */
  @-webkit-keyframes fadeIn {
    from {opacity: 0;} 
    to {opacity: 1;}
  }
  
  @keyframes fadeIn {
    from {opacity: 0;}
    to {opacity:1 ;} 
  }
  
  

/* ==========================
   [07]. Testimonials
========================== */
.testimonials {
    background: url('../img/bg/testimonials-bg.png') center center no-repeat;
    background-size: cover;
    background-attachment: fixed;
    padding: 50px 0 70px 0;
}

.testimonials h2 {
    font-size: 30px;
    font-weight: 800;
    color: var(--blellow-color);
}

/* Image */
.testimonials .carousel-inner .carousel-item .colon {
    margin: 30px 0 20px 0;
}

.testimonials .carousel-inner .carousel-item .team {
    width: 100px;
    height: 100px;
    border: 2px solid var(--blellow-color);
    border-radius: 100%;
    padding: 5px;
    margin: 20px 0 15px;
}

.testimonials .carousel-inner .carousel-item h3 {
    font-size: 20px;
    color: #ffffff;
    font-weight: 600;
}

.testimonials .carousel-inner .carousel-item h4 {
    font-size: 14px;
    font-weight: 300;
    color:var(--blellow-color);
    margin-bottom: 20px;
}

.testimonials .carousel-inner .carousel-item p {
    font-size: 15px;
    line-height: 26px;
    font-weight: 400;
    color: #ffffff;
}

.testimonials .carousel-indicators {
    bottom: -40px;
}

.testimonials .carousel-indicators li {
    background-color: #b8b7b7;
    border-radius: 30px;
    height: 4px;
    width: 40px;
}


.testimonials .carousel-indicators .active {
    background-color: #ffffff;
}

.testimonials .icon {
  height: 40px;
  width: 40px;
  background-size: 100%, 100%;
  border-radius: 50%;
  font-size: 30px;
  background-image: none;
  color: #ffffff
}

   

/* ==========================
   [10]. Footer
========================== */
.footer {
    
    padding: 40px 0 40px 0;
    background: #242527;
    
}

 .footer .social-icons span{
    color: var(--primary-color);
    padding: 0 5px;
    font-size: 30px;
}

.footer .social-icons span:hover {
    color: var(--blellow-color);
}

.about-me .social-icons {  
    padding: 10px;
    
    display:flex;
    height:50px;
    width:200px ;
    justify-content:center ;
    align-items:center  ;      
    font-size: 14px;
    font-weight: 800;
    color: var(--blellow-color);
}


.about-me .social-icons span{
    color: var(--blellow-color);
    padding: 0 5px;
    font-size: 30px;
}

 
 
.footer p {
    color: #ffffff;
    font-size: 19px;
    font-weight: 300;
    margin: 0;
    margin-top: 15px;
}


/* ==========================
   [05]. Some Facts
========================== */

.some-facts {
    padding: 130px 0;
    color: #ffffff;
    background: url('../img/bg/some-facts-bg.png') center center no-repeat;
    background-size: cover;
    background-attachment: fixed;
}


.some-facts .items span {
    font-size: 30px;
    color: var(--blellow-color);
    margin: 0;
    padding: 0;
}

.some-facts .items h3 {

    
    font-size: 40px;
    font-weight: 800;
    color: #ffffff !important;
    margin: 0;
    padding: 0;
    margin: 10px 0;
}


/* ==========================
   [11]. Media
========================== */
/*Small devices (landscape phones, 576px and up) 
@media (min-width: 0px) and (max-width: 991.98px)
{ .mouse-wrapper { display: none;} } */


@media (max-width: 575.99px) {
    /* Slider*/
    

.cd-words-wrapper b {
  font-size: 26px;
}

    body{
         margin-bottom: 0px;
         padding-bottom: 0px;
    }
   

    .slider {
        height: calc(100vh - 80px);
        margin-top: 80px;
    }

    .slider img {
        display: none;
    }

 
    .navbar {
        padding: 20px;
    }

    .animated-headlines .cd-headline span {
        font-size: 30px;
    }




    .navbar .nav-item a:hover:after { 
        width: 9%; 
        left: 0; 
      }

    /* About Me */
    .about-me {
        padding: 70px 25px; 
        
    }

    

.about-me h2 {
    padding-top: 40px;  
    padding-left: 20px;  
       
}

    .about-me img {
        padding-right: 30px;
        
    }
    .about-me .btn-1 {
        margin-bottom: 0px;
    }




    .about-me .col-md-7 {
        text-align: center; 
    }
    .social-icons-own ul li a {
        width: 40px;
        height: 40px;
        background-color: rgb(255, 255, 255);
        text-align: center;
        line-height: 40px;
        font-size: 20px;  }


    .some-facts .items h4 {
        margin-bottom: 30px;
    }

    .blog .box {
        margin-bottom: 30px;
    }

    .contact .info {
        padding: 0;
        text-align: center;
        margin-top: 40px;
    }


    


}

/* Small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) {

   
    body{ overflow-x: hidden;}
    
    .navbar .h1 { 
    
    font-size: 17px; }
    
    
    
.cd-words-wrapper b {
  font-size: 26px;
}

     /* Slider*/
     .slider {
         text-align: center;
        height: calc(100vh - 80px);
        margin-top: 80px;
     }


     .social-icons-own ul li a {
        margin-bottom:-66%; 
        margin-right: 10%; 
        
        width: 200px;
        height: 200px;
        
        text-align: center; 
        font-size: 20px;  }   


        

.about-me h2 {
    padding-top: 70px;  
    padding-left: 20px;  
       
}

    
    .slider .left-content {
        padding: 0;
        margin: 0;
    }

    .animated-headlines .cd-headline span {
        font-size: 30px;
    }

    

    /* About Me */
    
     
    .navbar .nav-item a:hover:after { 
        width: 9%; 
        left: 0; 
      }

    .some-facts .items h4 {
        margin-bottom: 30px;
    }



    .blog .box {
        margin-bottom: 30px;
    }

    .contact .info {
        padding: 0;
        text-align: center;
        margin-top: 40px;
    }
}

/* Medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {

   
    .animated-headlines .cd-headline span {
        font-size: 30px;
    }

    .navbar .nav-item a:hover:after { 
        width: 9%; 
        left: 0; 
      }


      .social-icons-own ul li a {
        top: -200%;
        left: 0%;
        width: 40px;
        height: 40px;
        background-color: rgb(255, 255, 255);
        text-align: center;
        line-height: 40px;
        font-size: 20px;  }

        .about-me img {
        padding-right: 30px;
        
    }


      
.mousescroll{opacity: 0%; }

    .slider .left-content {
        padding: 140px 0;
    }

    

    .some-facts .items h4 {
        margin-bottom: 30px;
    }

    .blog .box {
        margin-bottom: 30px;
    }

    .blog {
        padding-bottom: 90px;
    }
 
}


/* Large devices (desktops, less than 1200px) */
@media (max-width: 1199.98px) {
    
    .contact .info {
        margin-bottom: 0px;
} }