html, body {
  height: 100%;
  margin: 0;
  scroll-behavior: smooth;
}


#scrollTopBtn {
  opacity: 0;
  visibility: hidden;
  transition: all 0.5s ease;
}

.cont
{
    background-image:linear-gradient(rgba(0,0,0,0.5),rgba(0,0,0,0.6)),url("../hero-bg.jpg");
     background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 100vh; 
}
.progress {
  height: 10px;
  background-color: #e9ecef;
  border-radius: 5px;
  overflow: hidden;
  margin-bottom: 1.5rem;
}
section, div[id] {
  scroll-margin-top: 100px; 
}

a.nav-link
{
    font-size: 18px;
    margin-inline: 10px;
}
.progress-bar {
  height: 100%;
  width: 0;
  background-color: #007bff;
  transition: width 1.5s ease-in-out;
}
.ahmed h2 {
  font-weight: bold;
  transition: color 0.3s ease-in-out;
}
.dropdown-menu
{
    transition: all 0.5s;
}
.dropdown:hover > .dropdown-menu
{
    display: block;
   
}
.dropdown-item:hover
{
  color: #0078ff;
}
.as:hover
{
  color: #0078ff !important;
}
.ahmed
{
    background-image:linear-gradient(rgba(13, 110, 253,0.7),rgba(13, 110, 253,0.7)), url("../counters-bg.jpg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding-block:180px;
    background-attachment: fixed;
   
}
 i
{
    font-size: 50px;
    cursor: pointer;
    
}

.section-3-content .i-in-section3
{
    transition: all 0.5s;
}
.i-in-section3
{
    width: 30%;
    height: 120px;
    border-radius: 100px;
    border: 10px solid;
}
.line
{
    height: 6px;
    width: 4%;
}
.line-under-about-me
{
    width: 20%;
    height: 3px;
}
.section-3-content .morgan:hover .i-in-section3
{
    background-color: #0078ff !important;
    border:5px solid #e9ecef !important ;  
} 
.card img
{
    cursor: pointer;
}
.scale-sec .zoom img
{
    transition: all 1.5s;
}
.scale-sec .zoom 
{
    flex-basis: calc(100% / 3 - 30px);
   margin-left: 30px;
}
.scale-sec .zoom:hover img
{
    scale: 130%; 
}
#carouselExampleIndicators
{
    background-image:linear-gradient(rgba(13, 109, 253, 0.766),rgba(13, 110, 253,0.7)), url("../overlay-bg.jpg");
    background-attachment: fixed;
    background-position: center;
    padding-block: 130px !important;
}
.carousel-indicators [data-bs-target]
{
   height: 10px;
   width: 10px;
}
.bt-in-section-6
{
    margin-bottom: 130px;
}
.card-footer img
{
  width: 10%;
}
.like-s
{
   transform: translateY(-50%);
}
.last-section
{
    background-image:linear-gradient(rgba(13, 109, 253, 0.766),rgba(13, 110, 253,0.7)), url("../overlay-bg.jpg");
    background-attachment: fixed;
    background-position: top;
}
.last-section i
{
    transition: all 0.5s;
   
}
.i-in-last-section
{
    border: solid 3.5px ;
    width: 7%;
    height: 40px;
    border-radius: 100px;
   
}
.i-in-last-section:hover
{
    background-color: #0078ff !important;
   border: 3.5px solid #e9ecef !important ;
}
.last-section button
{
   transition: all 0.5s;
}
.last-section button:hover
{
    border: 5px solid #e9ecef !important ;
}
.ss
{
    background-color:#0062d3   ;
}
.line-under-send-message
{
    width: 15%;
    height: 3px;
}

.navbar-nav .nav-link {
    position: relative;
}

    
     .navbar-nav .l-under-link::before{ 
        content: "";
        position: absolute;
        left:0;
        bottom: 10px;
        width: 0;
        height: 2px;
        background-color: white;
        transition: all 0.5s;
      
    }

.l-under-link-Home::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 10px;
  width: 0;         
  height: 2px;
  background-color: white;
  transition: all 0.5s;
}

    .zooms img
    {
        transition: all 1s;
    }
   
    .zooms:hover img
    {
       scale: 130%;
    }
    
    .navbar-nav .l-under-link:hover::before {
        width: 100%;
     } 

    h3::before { 
    content: "|"; 
    font-size: 2.5rem;
    line-height: 85px;
    animation: animate infinite 10s; 
} 

.navbar-nav .nav-link::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 10px;
  width: 0;
  height: 2px;
  background-color: white;
  transition: width 0.5s;
}


.navbar-nav .nav-link.active::before {
  width: 100%;
}


.navbar-nav .nav-link:hover::before {
  width: 100%;
}
@keyframes animate {
    1% {
        content: "D|";
    }
    2% {
        content: "De|";
    }
    3% {
        content: "Des|";
    }
    4% {
        content: "Desi|";
    }
    5% {
        content: "Desig|";
    }
    6% {
        content: "Design|";
    }
    7% {
        content: "Designe|";
    }
    8% {
        content: "Designer|";
    }
    9% {
        content: "Designer|";
    }
    10% {
        content: "Designer|";
    }
    11% {
        content: "Designer|";
    }
    12% {
        content: "Designer|";
    }
    13% {
        content: "Designe|";
    }
    14% {
        content: "Design|";
    }
    15% {
        content: "Desig|";
    }
    16% {
        content: "Desi|";
    }
    17% {
        content: "Des|";
    }
    18% {
        content: "De|";
    }
    19% {
        content: "Dev|";
    }
    20% {
        content: "Deve|";
    }
    21% {
        content: "Devel|";
    }
    22% {
        content: "Develo|";
    }
    23% {
        content: "Develop|";
    }
    24% {
        content: "Develope|";
    }
    25% {
        content: "Developer|";
    }
    26% {
        content: "Developer|";
    }
    27% {
        content: "Developer|";
    }
    28% {
        content: "Developer|";
    }
    29% {
        content: "Developer|";
    }
    30% {
        content: "Develope|";
    }
    31% {
        content: "Develop|";
    }
    32% {
        content: "Develo|";
    }
    33% {
        content: "Devel|";
    }
    34% {
        content: "Deve|";
    }
    35% {
        content: "Dev|";
    }
    36% {
        content: "De|";
    }
    37% {
        content: "D|";
    }
    38% {
        content: "|";
    }
    39% {
        content: "F|";
    }
    40% {
        content: "Fr|";
    }
    41% {
        content: "Fre|";
    }
    42% {
        content: "Free|";
    }
    43% {
        content: "Freel|";
    }
    44% {
        content: "Freela|";
    }
    45% {
        content: "Freelan|";
    }
    46% {
        content: "Freelanc|";
    }
    47% {
        content: "Freelance|";
    }
    48% {
        content: "Freelancer|";
    }
    49% {
        content: "Freelancer|";
    }
    50% {
        content: "Freelancer|";
    }
    51% {
        content: "Freelancer|";
    }
    52% {
        content: "Freelancer|";
    }
    53% {
        content: "Freelance|";
    }
    54% {
        content: "Freelanc|";
    }
    55% {
        content: "Freelan|";
    }
    56% {
        content: "Freela|";
    }
    57% {
        content: "Freel|";
    }
    58% {
        content: "Free|";
    }
    59% {
        content: "Fre|";
    }
    60% {
        content: "Fr|";
    }
    61% {
        content: "F|";
    }
    62% {
        content: "|";
    }
    63% {
        content: "P|";
    }
    64% {
        content: "Ph|";
    }
    65% {
        content: "Pho|";
    }
    66% {
        content: "Phot|";
    }
    67% {
        content: "Photo|";
    }
    68% {
        content: "Photog|";
    }
    69% {
        content: "Photogr|";
    }
    70% {
        content: "Photogra|";
    }
    71% {
        content: "Photograp|";
    }
    72% {
        content: "Photograph|";
    }
    73% {
        content: "Photographe|";
    }
    74% {
        content: "Photographer|";
    }
    75% {
        content: "Photographer|";
    }
    76% {
        content: "Photographer|";
    }
    77% {
        content: "Photographer|";
    }
    78% {
        content: "Photographer|";
    }
    79% {
        content: "Photographe|";
    }
    80% {
        content: "Photograph|";
    }
    
    81% {
        content: "Photogrp|";
    }
    82% {
        content: "Photogra|";
    }
    83% {
        content: "Photogr|";
    }
    84% {
        content: "Photog|";
    }
    85% {
        content: "Photo|";
    }
    86% {
        content: "Phot|";
    }
    87% {
        content: "Pho|";
    }
    88% {
        content: "Ph|";
    }
    89% {
        content: "P|";
    }
    90% {
        content: "|";
    }
   
}





@media (max-width: 991px) {
  .dropdown-menu .dropdown-menu {
    position: absolute !important;
    left: 25% !important;   
    top: 0 !important;
    margin-left: 0 !important;
    padding-left: 0;
    width: max-content;       
    min-width: 150px;         
    background-color: #fff;  
    z-index: 1050;            
    display: none;         
  }


  .dropdown-menu .dropdown-toggle.show + .dropdown-menu {
    display: block !important;
  }

  .dropdown-menu .dropdown-menu[data-bs-popper] {
    left: auto !important;
    right: 100% !important; 
  }
}






@media screen and (max-width: 670px) {

    .morgan
    {
        width: 100%;
       margin-top: 20px;

    }
    .m-image
    {
        padding: 10px !important;
    }
    .i-in-section3
    {
        padding: 50px !important;
    }
    .i-in-last-section
    {
        padding: 20px !important;
    }
    .morgan-2
    {
        width: 100%;
    }
    .morgan-3
    {
        width: 100%;
    }
    .morgan-4
    {
        width: 100%;
    }
     .morgan-6
    {
        width: 20%;
    }
    
  .section-5
  {
    width: 100%;
  }
  .zoom
  {
    width: 100%;
  }

  }
  .card-2
  {
    margin-top: 10px ;
  }
  .pp-p
  {
    padding-left: 0 !important;
  }
  @media  (670px < width < 900px) 
  {
    .morgan
    {
        width: 100%;
      
    }
    .morgan-3
    {
        width: 50%;
    }
    .morgan-4
    {
        width: 25%;
    }
    .morgan-5
    {
        width: 20%;
    }
    .morgan-6
    {
        width: 80%;
    }

    
   
  }