/* Common for all */
body {
    font-size: 15px;
    font-family: "Raleway", sans-serif;
    color: #52565e;
    font-weight: 500;
}

a {
    text-decoration: none;
}

#main {
    margin-top: 3rem;
    padding: 0;
}

.navbar-toggler-icon,
.navbar .nav-link:hover,
.brand-slogan,
.brand-slogan:hover,
.navbar .nav-link.active,
.btn.link-btn,
.btn.learn-link-btn,
.btn.learn-link-btn:hover,
.site-clr,
footer a,
footer a:hover {
    color: #f96332;
}

.navbar .nav-link:before,
.main-btn-clr,
footer a:hover,
#scrollBtn,
.btn {
    background-color: #f96332;
}

/* header css */

.navbar {
    box-shadow: 0 0 29px 0 rgb(68 88 144 / 12%);
}

.navbar-brand img {
    height: 45px;
}

@media screen and (max-width: 767px) {
    img.mobile-view-logo {
        display: block !important;
    }

    img.web-view-logo,
    .brand-slogan {
        display: none;
    }

    .navbar .nav-link:hover:before {
        content: unset
    }
}

.navbar .nav-link {
    color: #52565e;
    border-radius: 4px;
    position: relative;
    margin: 0 12px;
    padding-bottom: 0 !important;
    font-weight: 500;
}

.navbar .nav-link:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: -5px;
    left: 0;
    visibility: hidden;
    width: 0px;
    transition: all 0.3s ease-in-out 0s;
}

.navbar .nav-link:hover:before {
    visibility: visible;
    width: 100%;
}

.brand-slogan {
    text-decoration: none;
}

.navbar-toggler:focus,
.btn:focus {
    box-shadow: none;
}

/* Common btn css */

.btn {
    text-transform: uppercase;
    font-weight: 600;
    display: inline-block;
    padding: 11px 20px;
    border-radius: 4px;
    transition: 0.5s;
    margin-top: 30px;
    color: #fff;
    font-size: 13px;
}

.btn:hover {
    color: #fff;
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
    transition: all .5s;
    -webkit-transform: translateY(-6px);
    transform: translateY(-6px);
}

.btn.link-btn {
    display: inline-block;
    padding: 0;
}

.btn.learn-link-btn {
    background: #fff;
    border: 2px solid #f96332;
}

.icon-box:hover .btn.link-btn,
.btn.link-btn {
    background-color: transparent;
}

.icon-box:hover .btn.link-btn,
.btn.link-btn,
.form-control:focus {
    box-shadow: none;
}

.form-control:focus {
    border-color: #f96332;
}

.icon-box:hover .btn.link-btn {
    color: #fff;
}

/* Common css for heading, color scheme and spacings */
h1.main-h {
    margin: 0;
    font-size: 50px;
    font-weight: 700;
    line-height: 56px;
}

section {
    padding: 3rem 1rem;
}

/* Footer css */

footer {
    border-top: 1px solid #d9dce2;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
    position: relative;
    z-index: 10;
    background: #fff;
}

/* Scroll to top btn css */

#scrollBtn {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 30px;
    z-index: 99;
    font-size: 20px;
    border: none;
    outline: none;
    color: #fff;
    cursor: pointer;
    padding: 6px 12px;
    border-radius: 4px;
    animation: wiggle 2s linear infinite;
    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
}

/* Keyframes */
@keyframes wiggle {

    0%,
    7% {
        transform: rotateZ(0);
    }

    15% {
        transform: rotateZ(-15deg);
    }

    20% {
        transform: rotateZ(10deg);
    }

    25% {
        transform: rotateZ(-10deg);
    }

    30% {
        transform: rotateZ(6deg);
    }

    35% {
        transform: rotateZ(-4deg);
    }

    40%,
    100% {
        transform: rotateZ(0);
    }
}