nav {
   background-color: rgba(0, 0, 0, 0.9);


}

#DeepDropDownUL {
   background-color: white;
   position: absolute;
   left: -10em;
   top: 0em;
   padding-left: 20px;
   opacity: 0%;
   width: 200px;


   transition: all 500ms;
}

nav .container .collapse ul li a {
   color: white;
   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
   font-size: 17px;
   font-weight: 600;

}

.nav-item {
   position: relative;
   margin-top: 10px;
   
}

.nav-item::after {
   position: absolute;
   content: "";
   height: 2px;
   width: 0%;
   bottom: 0;
   left: 5px;

   background-color: white;
   transition: all 500ms;
}






.navbar .navbar-nav .nav-item .active {
   /*  M A I N  Section: nav ancors active style  */
   color: white;
   position: relative;
   
  
   
}

.navbar .navbar-nav .nav-item .active::after{
   position: absolute;
   content: "";
   height: 2px;
    width: 80%;
   bottom: 0;
   left: 5px;

   background-color: white;
   animation: activechange 500ms;
}

@keyframes activechange {
   0% {
      width: 0%;
   }
   100% {
      width: 80%;
   }
}



.floutingIcon{
  width: 40px;
  height: 40px;
  z-index: 200;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #0078ff;
  opacity: 0;
  transition: all 0.4s;
  cursor: pointer;
  bottom: 1em;
  right: 1em;
  border-radius: 50%;
}
.floutingIcon:hover{
   transform: scale(120%);
}







#DeepDropDownUL li {
   margin-bottom: 20px;

}

#DeepDropDownUL li a {
   text-decoration: none;
   margin-left: -0.6em;
   color: black;
}

#DeepDropDownLI:hover #DeepDropDownUL {

   opacity: 100%;
   left: -12.7em;
}

.dropdown-item {
   transition: all 500ms;
   cursor: pointer;
}

.dropdown-item:hover {
   color: #0078ff !important;
   background-color: white !important;
}

.nav-item:hover::after {
   width: 80%;
   
}

#navTitle {
   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
   font-size: 28px;
   font-weight: 600;
}

/* =============================================================================== */
body {
   font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* !====================================HeroSection=========================================== */

#HeroSection {
   background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(../images/hero-bg.jpg);
   height: 110vh;
   padding: 60px 0px;
   color: white;
   background-position: center;
   background-size: cover;
   background-attachment: fixed;

   display: flex;
   justify-content: center;
   align-items: center;
   text-align: center;

}

#HeroTitle {

   font-size: clamp(39px, 5vw, 90px);
   font-weight: 700;
   margin-bottom: 20px;
}

#move {
   /*  M A I N  Section: changeWights animation  */
   display: inline-block;
   overflow: hidden;


   font-size: clamp(20px, 2.5vw, 90px);
   font-weight: 600;





}

#slideStick {
   position: relative;
   top: -2px;
}

#move::before {
   content: "";
   animation: changeContant 12s 0s ease infinite;
}


@keyframes changeContant {
   0% {
      content: "D";
   }

   1% {
      content: "De";
   }

   2% {
      content: "Dev";
   }

   3% {
      content: "Deve";
   }

   4% {
      content: "Devel";
   }

   5% {
      content: "Develo";
   }

   6% {
      content: "Develop";
   }

   7% {
      content: "Develope";
   }

   8% {
      content: "Developer";
   }

   9% {
      content: "Develope";
   }

   10% {
      content: "Develop";
   }

   11% {
      content: "Develo";
   }

   12% {
      content: "Devel";
   }

   13% {
      content: "Deve";
   }

   14% {
      content: "De";
   }

   15% {
      content: "De";
   }

   16% {
      content: "D";
   }

   17% {
      content: "";
   }

   18% {
      content: "F";
   }

   19% {
      content: "Fr";
   }

   20% {
      content: "Fre";
   }

   21% {
      content: "Free";
   }

   22% {
      content: "Freel";
   }

   23% {
      content: "Freela";
   }

   24% {
      content: "Freelan";
   }

   25% {
      content: "Freelanc";
   }

   26% {
      content: "Freelance";
   }

   27% {
      content: "Freelancer";
   }

   28% {
      content: "Freelance";
   }

   29% {
      content: "Freelanc";
   }

   30% {
      content: "Freelan";
   }

   31% {
      content: "Freela";
   }

   32% {
      content: "Freel";
   }

   33% {
      content: "Free";
   }

   34% {
      content: "Fre";
   }

   35% {
      content: "Fr";
   }

   36% {
      content: "Fr";
   }

   37% {
      content: "F";
   }

   38% {
      content: "";
   }

   39% {
      content: "P";
   }

   40% {
      content: "Ph";
   }

   41% {
      content: "Pho";
   }

   42% {
      content: "Phot";
   }

   43% {
      content: "Photo";
   }

   44% {
      content: "Photog";
   }

   45% {
      content: "Photogr";
   }

   46% {
      content: "Photogra";
   }

   47% {
      content: "Photograp";
   }

   48% {
      content: "Photograph";
   }

   49% {
      content: "Photographe";
   }

   50% {
      content: "Photographer";
   }

   51% {
      content: "Photographe";
   }

   52% {
      content: "Photograph";
   }

   53% {
      content: "Photograp";
   }

   54% {
      content: "Photogra";
   }

   55% {
      content: "Photogr";
   }

   56% {
      content: "Photog";
   }

   57% {
      content: "Photo";
   }

   58% {
      content: "Phot";
   }

   59% {
      content: "Pho";
   }

   60% {
      content: "Ph";
   }

   62% {
      content: "P";
   }

   64% {
      content: "";
   }

   66% {
      content: "D";
   }

   68% {
      content: "De";
   }

   70% {
      content: "Des";
   }

   72% {
      content: "Desi";
   }

   74% {
      content: "Desig";
   }

   76% {
      content: "Design";
   }

   78% {
      content: "Designe";
   }

   80% {
      content: "Designer";
   }

   82% {
      content: "Designe";
   }

   84% {
      content: "Design";
   }

   86% {
      content: "Desig";
   }

   89% {
      content: "Desi";
   }

   92% {
      content: "Des";
   }

   95% {
      content: "De";
   }

   98% {
      content: "D";
   }

   100% {
      content: "";
   }
}

/* !=============================================================================== */



/* ?====================================AboutMeSection=========================================== */

#AboutMeSection {
   background-color: #f5f5f5;
   height: 100%;
}

#AboutMeSection .row {
   background-color: #ffffff;
   border-radius: 10px;
   box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.06), 0 2px 5px 0 rgba(0, 0, 0, 0.2);
}

#AboutMePhoto {
   max-width: 150%;
}

#SecendColumnContant {
   display: flex;
   justify-content: space-around;
   align-items: center;
}

#AboutMeFirstColumn .AboutMeList {
   width: 100%;
   margin-top: 30px;
   display: flex;
   justify-content: center;


}

#AboutMeFirstColumn .AboutMeList ul li {
   margin-bottom: 18px;
   color: #1e1e1e;
   font-weight: 600;
   font-size: clamp(14px, 1.22vw, 40px);
}

#AboutMeFirstColumn .AboutMeList ul li span {
   color: #525252;
}

#progressTitle {

   font-size: clamp(14px, 1.4vw, 40px);
   font-weight: 600;

}

#AboutMeSecondColumn h5 {



   font-size: clamp(15px, 2vw, 40px);
   font-weight: 600;
}

#AboutMeSecondColumn h5::after {
   content: "";
   position: absolute;
   height: 2px;
   width: 80%;
   left: 0;
   bottom: 0em;
   background-color: #0078ff;
}

#AboutMeSecondColumn p {
   font-size: 1.2rem;
   font-weight: 300;
   color: #4e4e4e;
   width: 94.3%;
   margin-left: -0.1em;
}








/* ?====================================SERVICESSection=========================================== */
#SERVICESSection {
   background-color: #f5f5f5;

   padding: 50px 0px;
   text-align: center;

}



#TitleColumn h3 {
   font-size: 3em;
   font-weight: 700;

}

#TitleColumn p {
   font-size: 1em;
   font-weight: 400;
   color: #212529;
}

#TitleColumn::after {
   content: "";
   position: absolute;
   height: 5px;
   width: 50px;
   left: 0;
   right: 0;
   margin: auto;
   background-color: #0078ff;
}






.cardcolumns {
   background-color: #ffffff;
   min-height: 18em;

   display: flex;
   justify-content: space-around;
   align-items: center;
   align-items: center;
   flex-direction: column;



   margin-bottom: 40px;
   transform: scaleX(96%);
   box-shadow: 0 13px 8px -10px rgba(0, 0, 0, 0.1);

}

.cardIconBody {
   height: 98px;
   width: 100px;

   display: flex;
   justify-content: center;
   align-items: center;
   border: 8px #0078ff solid;
   border-radius: 50%;
   margin-top: 20px;
   transition: all 500ms;


}

.cardIconBody i {
   transition: all 500ms;
   color: black;
}

.cardcolumns:hover .cardIconBody {
   background-color: #0078ff;
   border: 8px #cde1f8 solid;
}

.cardcolumns:hover i {
   color: #ffffff;
}

.cardIconBody i::after {
   content: "";
   border: 2px 2px 2px 2px solid #0078ff;




}




.cardtext h2 {

   font-size: 1.4em;
   font-weight: 600;
   margin-bottom: 15px;
}

.cardtext p {

   font-size: 0.95em;
   font-weight: 500;
   color: #4e4e4e;
   margin-bottom: 25px;
}




/* ?====================================countersSection=========================================== */


#countersSection {
   background: linear-gradient(rgba(0, 119, 255, 0.736)), url("../images/post-3.jpg");
   background-position: center center;
   background-size: cover;
   background-attachment: fixed;
   min-height: 55dvh;
   padding: 50px 0px;
   display: flex;
   justify-content: center;
   align-items: center;
}

#countersSection .container .row .col-md-3 {
   display: flex;
   justify-content: center;
   align-items: center;
   flex-direction: column;
   color: #ffffff;

}

#countersSection .container .row .col-md-3 .circleBody {
   height: 98px;
   width: 100px;
   margin-bottom: 30px;

   border: 10px rgb(255, 255, 255) solid;
   border-radius: 50%;
   display: flex;
   justify-content: center;
   align-items: center;
}

#countersSection .container .row .col-md-3 .counterBody {
   display: flex;
   justify-content: center;
   align-items: center;
   text-align: center;
   flex-direction: column;
}

#countersSection .container .row .col-md-3 .counterBody p {
   font-size: 2em;
   font-weight: 500;
}

/* ?====================================PortfolioSection=========================================== */

#PortfolioSection {
   background-color: #f5f5f5;

   padding: 50px 0px;
   text-align: center;

}


#PortfolioSection .container .row {
   margin-bottom: 20px;
}

#PortfolioSectionHeader::after {
   content: " ";
   position: absolute;
   height: 3px;
   width: 50px;
   left: 0;
   right: 0;
   margin: auto;
   z-index: 8;
   background-color: #0078ff;
}

#PortfolioSection .container .row .col-lg-12 h3 {
   font-size: 3em;
   font-weight: 700;
   margin-bottom: 20px;


}

#PortfolioSection .container .row .col-lg-12 p {
   font-size: 1em;
   font-weight: 400;
   margin-bottom: 20px;
   color: #212529;


}


/* ====== */



#PortfolioSection .container .row .col-md-4 {
   box-shadow: 0 13px 8px -10px rgba(0, 0, 0, 0.1);
   transform: scale(98%);
   margin-bottom: 40px;


}

#PortfolioSection .container .row .col-md-4 .imgContent {
   display: block;
   overflow: hidden;
}

#PortfolioSection .container .row .col-md-4 .imgContent img {
   max-width: 100%;
   cursor: pointer;
   transition: all 500ms;
}

#PortfolioSection .container .row .col-md-4:hover .imgContent img {
   transform: scale(1.3);



}

#PortfolioSection .container .row .col-md-4 .PortfolioSectionCardBody {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   text-align: left;
   background-color: #ffffff;
   padding: 22px;

}

#PortfolioSection .container .row .col-md-4 .PortfolioSectionCardBody .PortfolioSectionCardBodyText h2 {

   font-size: 1.2em;
   font-weight: 500;
   margin-bottom: 10px;
}

#PortfolioSection .container .row .col-md-4 .PortfolioSectionCardBody .PortfolioSectionCardBodyText .span1 {

   font-size: 0.8em;
   font-weight: 400;
   color: #0078ff;
}

#PortfolioSection .container .row .col-md-4 .PortfolioSectionCardBody .PortfolioSectionCardBodyText .span2 {
   font-size: 0.8em;
   font-weight: 400;
}


#PortfolioSection .container .row .col-md-4 .PortfolioSectionCardBody .PortfolioSectionCardBodyIcon {
   display: flex;
   justify-content: center;
   align-items: center;
   width: 8%;
   color: #0078ff;

   font-size: 1.5em;
   margin-top: 2px;
   transition: all 500ms;
}





#hidededImgDiv {
   background-color: rgba(0, 0, 0, 0.9);
   height: 100%;
   width: 100%;
   position: fixed;
   display: none;
   z-index: 12;
   top: 0;

}



#hidededImgDiv .container .row .col-lg-12 {
   display: flex;
   justify-content: center;
   align-items: center;
   margin-bottom: 40px;

}

#hidededImgDiv .container .row .col-lg-12 img {
   max-width: 80%;
   animation: myAnim 600ms ease 0s 1 alternate forwards;

   border-radius: 10px;
   box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.06), 0 2px 5px 0 rgba(0, 0, 0, 0.2);
}

#closeBtn {
   position: relative;
   top: 2em;
   left: 5em;

}

@keyframes myAnim {
   0% {
      transform: scale(0.5);
   }

   100% {
      transform: scale(1);
   }
}



/* ?====================================slidersSection=========================================== */


#slidersSection {
   background: linear-gradient(rgba(0, 119, 255, 0.736)), url("../images/overlay-bg.jpg");
   background-position: center center;
   background-size: cover;
   min-height: 500px;
   display: flex;
   justify-content: center;
   align-items: center;
}


#slidersSection .carousel-inner .carousel-item img {
   max-width: 20%;
   margin-left: auto;
   margin-right: auto;
   margin-bottom: 30px;
}

#slidersSection .carousel-inner .carousel-item span {
   font-size: 1.5em;
   font-weight: 700;
   color: #ffffff;
   margin-bottom: 20px;
}

#slidersSection .carousel-inner .carousel-item p {
   font-size: 1.2em;
   font-weight: 400;

   color: #ffffff;
   margin-left: auto;
   margin-right: auto;
   margin-bottom: 20px;

}


/* ===================================================blogSection=================================================================== */

#blogSection {
   background-color: #f5f5f5;
   padding: 50px 0px;

   text-align: center;
}

#blogSectionHeader h3 {
   font-size: 3em;
   font-weight: 700;
   margin-bottom: 20px;
}

#blogSectionHeader p {
   font-size: 1em;
   font-weight: 400;
   margin-bottom: 20px;
   color: #212529;
}

#blogSectionHeader::after {
   content: " ";
   position: absolute;
   height: 3px;
   width: 50px;
   left: 0;
   right: 0;
   margin: auto;
   z-index: 8;
   background-color: #0078ff;
}



/* ==== */


.blogCard {
   box-shadow: 0 13px 8px -10px rgba(0, 0, 0, 0.1);
   margin-bottom: 30px;
}

.blogCard .BlogImgContent img {

   max-width: 100%;
}



.BlogCardBody {
   background-color: #ffffff;
   border: 1px solid rgba(128, 128, 128, 0.379);
}

.BlogCardBody a {
   text-decoration: none;
   color: black;
   font-size: 1em;

   font-weight: 500;
   cursor: pointer;
   transition: all 500ms;
}

.BlogCardBody a:hover {
   color: #0078ff;
}

.BlogCardBody p {
   font-size: 0.9em;
   font-weight: 400;
   margin-top: 10px;
   color: #4e4e4e;

}

.btnContainer {
   position: absolute;
   z-index: 1;
   bottom: -0.7em;
   left: 0em;
   right: 0em;

}

.mycardbtn {
   background-color: #0078ff;
   color: white;
   width: 23%;
   height: 30px;
   border-radius: 5%;
   font-size: 0.73em;
   margin: auto;

   display: flex;
   justify-content: center;
   align-items: center;




}


/* ==== */

.blogCardFooter {
   background-color: #f8f8f8;
   border: 1px solid rgba(128, 128, 128, 0.379);
   min-height: 50px;
}

.blogCardFooter img {
   width: 10%;
   margin-top: 1px;
   margin-right: 5px;
}

.blogCardFooter span {
   font-size: 0.9em;
   font-weight: 400;
   margin-left: 4px;
   transition: all 500ms;
   cursor: pointer;
}

.blogCardFooter span:hover {
   color: #0078ff;
}

.blogCardFooter .span2 span {

   width: 100%;
}

/* =======================================================contactsection======================================================================== */

#contactsection {
   background: linear-gradient(rgba(0, 119, 255, 0.736)), url("../images/overlay-bg.jpg");
   background-position: center center;
   background-size: cover;
   padding: 100px 0px;
}

#contactsection .container .row {
   background-color: #ffffff;

}

#FirstCardHeader {
   height: 10%;
}

#FirstCardHeader h5 {
   font-size: 2em;
   font-weight: 500;
   margin-bottom: 10px;

}

#FirstCardHeader::after {
   content: " ";
   position: absolute;
   height: 3px;
   width: 120px;
   left: 0.6em;

   margin: auto;
   z-index: 8;
   background-color: #0078ff;
}

#MyFooterBtn {
   color: white;
   background-color: #0078ff;
}

/* ==== */
#SecondCardHeader {
   margin-bottom: -1.5em;
}

#SecondCardHeader h5 {
   font-size: 2em;
   font-weight: 500;
   margin-bottom: 10px;
}

#SecondCardHeader::after {
   content: " ";
   position: absolute;
   height: 3px;
   width: 120px;
   left: 0.6em;

   margin: auto;
   z-index: 8;
   background-color: #0078ff;
}

.secondFooterCardBody .secondFooterCardBodyText p {
   font-size: 1.1em;
   font-weight: 400;
   margin-top: 10px;
   margin-bottom: 30px;
   color: #4e4e4e;
   line-height: 30px;
}

.secondFooterCardBodyList {


   color: #4e4e4e;
   display: flex;
   justify-content: center;
   align-items: left;
   flex-direction: column;
}

.secondFooterCardBodyList li {
   margin-bottom: 10px;
}

.secondFooterCardBodyList i {
   color: #0078ff;


}

/* =========== */




.secondFooterCardSocialList ul div {
   border: 2px solid #0078ff;
   width: 40px;
   height: 40px;
   overflow: hidden;
   cursor: pointer;
   display: flex;
   justify-content: center;
   align-items: center;
   margin-right: 16px;
   border-radius: 50%;

   transition: all 500ms;


}

.secondFooterCardSocialList ul div:hover {
   background-color: #0078ff;
   border: 8px #cde1f8 solid;
}

.secondFooterCardSocialList ul div:hover i {
   color: #ffffff;
}

.secondFooterCardSocialList ul {
   display: flex;
   justify-content: left;
   flex-direction: row;
   margin-left: -10px;

}

.secondFooterCardSocialList ul li {

   color: black;
}



/* =======================================================MyFooter======================================================================== */


#MyFooter {

   text-align: center;
   color: #fff;
   padding: 25px 0;
   background: #0062d3;
   box-shadow: -2px 4px 11px 4px rgba(0, 0, 0, 0.19) inset;
   -webkit-box-shadow: -2px 4px 11px 4px rgba(0, 0, 0, 0.19) inset;
   -moz-box-shadow: -2px 4px 11px 4px rgba(0, 0, 0, 0.19) inset;
}