html{
    scroll-behavior: smooth;
}
body{
    background-color: #f5f5f5;
}
.home{
    background-image: url(../img/hero-bg.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    height: 100vh;
}
.bg{
    background-color: rgba(0, 0, 0, 0.5);
    height: 100%;
}
h1{
    display: flex;
    flex-direction: column;
    text-align: center;
}
h1::after{
    content:"|";
    animation-name: typing;
    animation-duration: 10s;
    animation-iteration-count: infinite;
}
@keyframes typing{
    0%,25% {content: "|";}
    1.4%,23.6% {content: " D|";}
    2.8%,22.2% {content: " De|";}
    4.2%,20.8% {content: "Des|";}
    5.6%,19.4% {content: " Desi|";}
    7%,18% {content: "Desig|";}
    8.4%,16.6% {content: "Design|";}
    9.8%,15.2% {content: "Designe|";}
    11.2%,13.8% {content: "Designer|";}

    25%,50% {content: "|";}
    26.4%,48.6% {content: "D|";}
    27.8%,47.2% {content: "De|";}
    29.2%,45.8% {content: "Dev|";}
    30.6%,44.4% {content: "Deve|";}
    32%,43% {content: "Devel|";}
    33.4%,41.6% {content: "Develo|";}
    34.8%,40.2% {content: "Develop|";}
    36.2%,38.8% {content: "Developer|";}

     50%,75% {content: "|";}
    50.6%,74.4% {content: "F|";}
    51.2%,73.8% {content: "Fr|";}
    51.8%,73.2% {content: "Fre|";}
    52.4%,72.6% {content: "Free|";}
    53%,72% {content: "Freel|";}
    53.6%,71.4% {content: "Freela|";}
    54.2%,70.8% {content: "Freelan|";}
    54.8%,70.2% {content: "Freelanc|";}
    55.4%,69.6% {content: "Freelance|";}
    56%,69% {content: "Freelancer|";}

    75%,100% {content: "|";}
    75.6%,99.4% {content: "P|";}
    76.2%,98.8% {content: "Ph|";}
    76.8%,98.2% {content: "Pho|";}
    77.4%,97.6% {content: "Phot|";}
    78%,97% {content: "Photo|";}
    78.6%,96.4% {content: "Photog|";}
    79.2%,95.8% {content: "Photogr|";}
    79.8%,95.2% {content: "Photogra|";}
    80.4%,94.6% {content: "Photograp|";}
    81%,94% {content: "Photograph|";}
    81.6%,93.4% {content: "Photographe|";}
    82.2%,92.8% {content: "Photographer|";}
}
.servicesIcons {
    width: 95px;
    height: 95px;
    font-size: 35px;
    border-width: 8px !important;
}
.borderPlus{
    width: 40px;
    height: 40px;
}
.counterBorder{
    width: 70px;
    height: 70px;
    font-size: 25px;
    border-width: 8px !important;
}
.sendMessageButton{
    border-radius: 40px;
    width: 55%;
}
.bgCard{
    background-color: #F7F7F7;
}
.navbarItem {
    position: relative;
}
.navbarItem::after{
    position: absolute;
    content: "";
    left: 0px;
    bottom: 0px;
    width: 0%;
    background-color: white;
    transition: all 0.5s;
}
.navbarItem:hover::after ,.homeNavbarItem::after{
    position: absolute;
    content: "";
    left: 0px;
    bottom: 0px;
    width: 70%;
    height: 3px;
    background-color: white;
}
.hover-icon{
    transition: all 1s;
}
.hover-icon:hover{
background-color: #0078ff !important;
color: white !important;
border-color: #b8cbe0 !important;
}
.hover-zoom{
    transition: all 1s;
}
.hover-zoom:hover{
    transform:scale(1.2);
}
.text-hover{
    transition: all 1;
}
.text-hover:hover{
    color: #0062d3;
}
.textColor{
    color: gray;
}
button{
    transition: all 1s;
    
}
.sendMessageButton:hover{
    background-color: #7ea6d4 !important;
    outline: 4px solid #b8cbe0 !important;
}
.countersBG{
    background-image: url(../img/counters-bg.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    height: 400px;
    background-attachment: fixed;
    background-position: center; 
}
.bgBlue{
    background-color: rgba(20, 111, 196, 0.8);
    height: 100%;
}
.padding{
    padding: 12% 23%;
}
.overlay{
    background-image: url(../img/overlay-bg.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    background-position: center; 
}
.overlay img{
    border-radius: 50%;
}
.getInTouch{
    background-image: url(../img/overlay-bg.jpg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    background-position: center; 
}
.unfinishedLine{
    position: relative;
    display: flex;
}
.unfinishedLine::after{
    content: "";
    position: absolute;
    width: 60px;
    height: 3px;
    background-color: #0062d3;
    top: 35px;
    justify-content: center;
}
.title{
    display: flex;
    flex-direction: column;
    align-items: center;
}
.title::after{
    content: "";
    width: 40px;
    height: 4px;
    background-color: #0062d3;
}
.img{
    border-radius: 50%;
    width: 30px;
}
.shadowBox{
        box-shadow: 0 .5rem 1rem rgba(0,0,0,1.15)!important;
    }

.servicesInsightNum{
    font-size: 25px;
}
.sectionTitle{
    font-size: 45px;
    font-weight: bold;
}

.carouselCircle{
    border: 0px;
    height: 10px;
    width: 10px;
    border-radius: 50%;
}
.cardCategory{
    display: inline-block;
    color: #fff;
    background-color: #0078ff;
    border-radius: 4px;
    padding:6px 15px;
}
.cardCategoryBox{
    position: absolute;
    text-align: center;
    top: -16px;
    transition: middle;
     left: 15px;
    right: 15px; 
}
.aboutTravel{
    position: relative;
}

h6{
    margin: 0;
}
.navbarContainer{
    padding-right: 7rem;
    padding-left: 7rem;
}
.navbarItem{
    font-weight: bold;
}
.textBold{
    font-weight: bold;
}

/* ============ desktop view ============ */
@media all and (min-width: 992px) {
	.dropdown-menu li{ position: relative; 	}
	.nav-item .submenu{ 
		display: none;
		position: absolute;
		left:100%; top:-7px;
	}
	.nav-item .submenu-left{ 
		right:100%; left:auto;
	}
	.dropdown-menu > li:hover{ background-color: #f1f1f1 }
	.dropdown-menu > li:hover > .submenu{ display: block; }
}	
/* ============ desktop view .end// ============ */

/* ============ small devices ============ */
@media (max-width: 991px) {
  .dropdown-menu .dropdown-menu{
      margin-left:0.7rem; margin-right:0.7rem; margin-bottom: .5rem;
  }
}