* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --primary-color: #004472;
    --secondary-color: #ff3f88;
    --bg-color: #5aa7ff;
    --body-color: #FFFBF0;
    --box-shadow-1: rgba(0, 0, 0, 0.45) 0px 25px 20px -20px;
    --box-shadow-2: rgba(0, 0, 0, 0.05) 0px 0px 0px 1px;
    --pricing-btn: #dcffe1;
    --gray: rgb(104, 104, 104);

}

@import url('https://fonts.googleapis.com/css2?family=Fjalla+One&display=swap');

body {
    overflow-x: hidden;
}

.color1 {
    background-color: var(--primary-color);
}

.primary-color {
    color: var(--primary-color) !important;
}

.secondary-color {
    color: var(--secondary-color);
}

.bg-color {
    background-color: var(--bg-color);
}

.bg-2 {
    color: var(--bg-color);
}

.gray {
    color: var(--gray);
}

.pricing {
    background-color: var(--secondary-color);
}

.pricing-clr {
    color: var(--body-color);
}

.pricing-btn {
    background-color: var(--pricing-btn);
    padding: 6px 35px;
    color: var(--bg-color);
    cursor: pointer;
}

.body-color {
    background-color: var(--body-color);
}


li {
    list-style: none;
}

a {
    text-decoration: none;
    color: var(--body-color);
}



/* *********************
 === Navigation start ===
***********************  */
.object-fit {
    object-fit: cover;
}

.grand-brand-nowbab {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
    position: relative;
    -webkit-transition-property: color;
    transition-property: color;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
}

.grand-brand-nowbab:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 6px;
    background: var(--primary-color);
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: 0 50%;
    transform-origin: 0 50%;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}

.grand-brand-nowbab:hover,
.grand-brand-nowbab:focus,
.grand-brand-nowbab:active {
    color: var(--bg-color);
}

.grand-brand-nowbab:hover:before,
.grand-brand-nowbab:focus:before,
.grand-brand-nowbab:active:before {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
}

.shutter-out-horizontal {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(93, 168, 238, 0.911);
    position: relative;
    background: var(--bg-color);
    -webkit-transition-property: color;
    transition-property: color;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
}

.shutter-out-horizontal:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--body-color);
    color: var(--body-color);
    border-radius: 6px;
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: 50%;
    transform-origin: 50%;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-timing-function: ease-out;
    transition-timing-function: ease-out;
}

.shutter-out-horizontal:hover,
.shutter-out-horizontal:focus,
.shutter-out-horizontal:active {
    color: var(--body-color);
}

.shutter-out-horizontal:hover:before,
.shutter-out-horizontal:focus:before,
.shutter-out-horizontal:active:before {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
}

.box-shadow-1 {
    box-shadow: var(--box-shadow-1);
}

.box-shadow-2 {
    box-shadow: var(--box-shadow-2);
}

/* **********************
      === Navigation End ===
 === Carousel Templete Start ===
************************* */
.animate-charcter {
    text-transform: uppercase;
    background-image: linear-gradient(-225deg,
            var(--bg-color) 0%,
            var(--body-color) 29%,
            var(--secondary-color) 67%,
            var(--primary-color) 100%);
    background-size: auto auto;
    background-clip: border-box;
    background-size: 300% auto;
    color: var(--body-color);
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: textclip 2s linear infinite;
    display: inline-block;
    font-size: 38px;
    font-weight: 700;
    font-family: 'Fira Sans', sans-serif !important;
}

.my-btn-pulse-grow {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    box-shadow: 0 0 1px rgba(0, 0, 0, 0);
}

.my-btn-pulse-grow:hover,
.my-btn-pulse-grow:focus,
.my-btn-pulse-grow:active {
    -webkit-animation-name: my-btn-pulse-grow;
    animation-name: my-btn-pulse-grow;
    -webkit-animation-duration: 0.3s;
    animation-duration: 0.3s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-direction: alternate;
    animation-direction: alternate;
}



/* === packegs === */
.pakeges-bubble-effect {
    display: inline-block;
    vertical-align: middle;
    -webkit-transform: perspective(1px) translateZ(0);
    transform: perspective(1px) translateZ(0);
    border-top: .1px solid rgb(245, 245, 245);
    box-shadow: 0 0 1px rgba(73, 73, 73, 0);
    position: relative;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: transform;
    transition-property: transform;
}

.pakeges-bubble-effect:before {
    position: absolute;
    z-index: -100;
    content: '';
    left: calc(50% - 10px);
    top: 0;
    border-style: solid;
    border-width: 0 10px 10px 10px;
    border-color: transparent transparent transparent;
    -webkit-transition-duration: 0.3s;
    transition-duration: 0.3s;
    -webkit-transition-property: transform;
    transition-property: transform;
    opacity: 0.1;

}

.pakeges-bubble-effect:hover,
.pakeges-bubble-effect:focus,
.pakeges-bubble-effect:active {
    -webkit-transform: translateY(10px);
    transform: translateY(10px);
    opacity: 1;
}

.pakeges-bubble-effect:hover:before,
.pakeges-bubble-effect:focus:before,
.pakeges-bubble-effect:active:before {
    -webkit-transform: translateY(-10px);
    transform: translateY(-10px);
    opacity: 1;
    border-color: transparent transparent #adaaaa transparent;
}

/* === *** === Get in Touch  */
.top {
    top: -18px;
    left: 90px;
    margin-left: 90px;
    border-radius: 25px;
}

.circle {
    width: 50px;
    height: 50px;
    background: var(--bg-color);
    border-radius: 50%;
    margin-right: 15px;
    line-height: 50px;
    text-align: center;
    color: #fff;
    font-size: 0.8rem;
}



.contact-section textarea {
    grid-column: 1 / -1;
    resize: none;

}

.contact-section textarea,
.contact-section input[type=text],
.contact-section input[type=email] {
    background: #acd7f0;
    opacity: 0.7;
    padding: 10px;
    outline: none;
    border: none;
    border-radius: 7px;
    color: var(--body-color);
}



#contact {
    background-image: url(../images/aaron-burden-cEukkv42O40-unsplash.jpg);
    background-size: cover;
    background-repeat: no-repeat;

}





/*==================== 
	Widgets 
====================== */
.widget {
    padding: 20px;
    margin-bottom: 40px;
}

.widget.no-box {
    padding: 0;
    background-color: transparent;
    margin-bottom: 40px;
    box-shadow: none;
}

.widget li a:hover {
    color: var(--primary-color);
}

.widget-title span {
    background: #839FAD none repeat scroll 0 0;
    display: block;
    height: 1px;
    margin-top: 25px;
    position: relative;
    width: 20%;
}

.widget-title span::after {
    background: inherit;
    content: "";
    height: inherit;
    position: absolute;
    top: -4px;
    width: 50%;
}

.widget-title.text-center span,
.widget-title.text-center span::after {
    margin-left: auto;
    margin-right: auto;
    left: 0;
    right: 0;
}


/* === *** HAPPY CODEING *** ===  */