/* ====== Font : Nunito ====== */
@import url('css2.css');
/*
Theme Name:     Hostoso
Theme URI:      
Author:         
Author URI:     
Description:    
Version:        1.0
License:        
License URI:    


	Navigation Files

	01. Reset
	02. Global Style

	    [Table of Content]

	01. Index Page Style
        section Index Page
            1.1.Header section
            1.2 hero section
            1.3 domain section
            1.4 services section
            1.5 about section
            1.6 get started section
            1.7 clients section
            1.8 advance feature section
            1.9 web hosting package section
            1.10  30 day money back section
            1.11 integrated with more than 100 section
            1.12 Our Achievement section
            1.13 FAQ section
            1.14 blog section
            1.15 logoipsum section
            1.16 footer section
    02. About Page Style
        section Index Page
            2.2 hero section
            2.3 counter section
    03. Services Page Style
    04. Pricing Page Style
    05 . Blog Page Style      
    06 . Contact Page Style
            section Index Page        
            6.1 contact section
    07 . FAQ Page Style
    08 . coming soon Page Style 
    09 . FAQ Page Style
 */


/* ============= 01. Reset section ============= */

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
}


/* HTML5 display-role reset for older browsers */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}

body {
    line-height: 1;
    background-color: rgba(247, 247, 247, 0.9843137255);
}

ol,
ul {
    list-style: none;
}

blockquote,
q {
    quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: "";
}

button:focus {
    outline: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

select {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

select::-ms-expand {
    display: none;
}

label {
    font-weight: normal;
}

iframe {
    width: 100%;
}


/* =====  End of 01. Reset  ====== */


/* ===== 02. Global Style ===== */

h1 {
    font-size: 70px;
    font-weight: 700;
    line-height: 76px;
    font-family: 'Nunito', sans-serif;
}

h2 {
    font-size: 45px;
    font-weight: 600;
    line-height: 51px;
    font-family: 'Nunito', sans-serif;
}

h3 {
    font-size: 35px;
    font-weight: 600;
    line-height: 41px;
    font-family: 'Nunito', sans-serif;
}

h4 {
    font-size: 26px;
    font-weight: 600;
    line-height: 32px;
    font-family: 'Nunito', sans-serif;
}

h5 {
    font-size: 22px;
    font-weight: 700;
    line-height: 28px;
    font-family: 'Nunito', sans-serif;
}

h6 {
    font-size: 18px;
    font-weight: 600;
    line-height: 26px;
    font-family: 'Nunito', sans-serif;
}

p {
    font-size: 18px;
    font-weight: 400;
    line-height: 24px;
    font-family: 'Nunito', sans-serif;
}

button {
    font-size: 18px;
    font-weight: 600;
    line-height: 22px;
    padding: 16px 38px 16px 38px;
    font-family: 'Nunito', sans-serif;
}

a {
    font-size: 18px;
    font-weight: 400;
    line-height: 24px;
    padding: 16px 38px 16px 38px !important;
    text-decoration: none;
    transition: all 0.3s ease;
    font-family: 'Nunito', sans-serif;
}

/* button back to top */

#backToTopBtn {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 30px;
    z-index: 99;
    border: none;
    padding: 17px 20px;
    border-radius: 10px;
    transition: all 0.3s ease;
}
#backToTopBtn:hover{
    background-color: #4F80FF;
    color: #ffffff;
}

/* =====  End of 02. Global style  ===== */

/* ====== 1.1 Header section ====== */
header .dropdown {
    padding-right: 18px !important;
}
.dropdown-menu li{
    padding: 10px 14px !important;
}
.dropdown-menu a{
    font-size: 16px;
    color: #505050;
}
.dropdown-item:focus, .dropdown-item:hover {
    background-color: transparent;
    color: #4F80FF;
}
.navbar-brand img {
    width: 200px;
}

.navbar-toggler {
    border: 2px solid #505050;
    color: #505050;
    font-size: 30px;
    padding: 7px 12px 6px 12px !important;
}

.navbar-toggler-icon {
    color: #505050;
}

.navbar-brand hr {
    color: #BFBFBF !important;
    margin: 0;
    color: inherit;
    border: 0;
    border-top: var(--bs-border-width) solid;
    opacity: 1.25;
    rotate: 90deg;
    width: 66px;
    position: absolute;
    right: -90px;
    top: 23px;
}

.navbar-collapse hr {
    color: #BFBFBF !important;
    margin: 0;
    color: inherit;
    border: 0;
    border-top: var(--bs-border-width) solid;
    opacity: 1.25;
    rotate: 90deg;
    right: 280px;
    width: 66px;
    top: 50px;
    position: absolute;
}

.navbar {
    padding-top: 25px;
}
.navbar-nav li{
    padding: 0 5px;
}
.navbar-nav a {
    padding: 0 !important;
    color: #505050;
    font-weight: 400;
    position: relative;
}
.navbar-expand-lg .navbar-nav .nav-link:hover {
    color: #4F80FF !important;
}
.navbar-nav a.active::after {
    content: '';
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: -38px;
    border-bottom: #4F80FF 3px solid;
    color: #4F80FF !important;
  }
  .navbar-nav .nav-link.active, .navbar-nav .nav-link.show {
    color: #4F80FF;
}
.navbar-text a:first-child {
    color: #505050;
    border-radius: 35px;
    padding: 14px 35px !important;
}
.navbar-text a:first-child:hover{ 
        box-shadow: 0px 26px 40px 0px rgba(172, 172, 172, 0.25);
}

.navbar-text a:last-child {
    background-color: #4F80FF;
    color: #fff;
    border-radius: 35px;
    transition: 0.3s ease;
    padding: 14px 35px !important;
}
.navbar-text a:last-child:hover{
    background-color: #FFFFFF;
    color: #4F80FF;
        box-shadow: 0px 26px 40px 0px rgba(172, 172, 172, 0.25);
    -ms-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

/* sidebar */
.sidebar::-webkit-scrollbar {
    width: 3px;
}
.sidebar::-webkit-scrollbar-thumb {
    background: #9a9b9a;
    border-radius: 10px;
}
aside {
    position: relative;
    z-index: 10;
}

.sidebar {
    padding: 25px 0;
    background-color: white;
    display: inline-block;
    position: fixed;
    top: 0;
    width: 320px;
    left: -500px;
    transition: 0.6s ease-in-out;
    height: 100vh;
    overflow: scroll;
}

.sidebar img {
    width: 170px;
}

.sidebar button {
    padding: 10px 20px;
    margin: 18px 12px 0 0;
    color: #fff !important;
    border: 1px solid black;
    background-color: #4F80FF;
    font-size: 17px;
}

.sidebar ul {
    padding: 14px 0;
}
.sidebar ul li:last-child{
    padding-bottom: 0 !important;
}
.sidebar li {
    padding: 10px 0px !important;
    color: #4F80FF;
}

.sidebar a {
    padding-left: 16px !important;
}

.sidebar-toggle {
    left: 0;
}

.more {
    display: flex;
    justify-content: space-between;
}
.more a:first-child{
    padding: 7px 0 0 16px !important;
}

.btn-outline-primary {
    margin: 7px 14px 0 0;
    padding: 0 14px 0 0 !important;
    height: 30px;
    width: 30px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

#collapseExample a {
    padding: 7px 0 !important;
}

.sidebar .card {
    border: none;
}

/* ====== End of 1.1 Header section ====== */


/* ====== 1.2 hero section ====== */
#hero{
    margin: 50px 0;
}
#hero .row {
    align-items: center;
    margin: 40px auto;
}

#hero h1 {
    color: #031D5B;
    font-weight: 700;
    padding: 30px 0 10px 0;
}
#hero p {
    color: #626262;
    margin-top: 10px;
}

#hero img {
    width: 100%;
}

.heroBtn a:first-child {
    background-color: #4F80FF;
    color: #fff;
    padding: 12px 35px 12px 10px !important;
    border-radius: 35px;
    border: 2px solid #ffffff;
}
.heroBtn a:first-child:hover{
    background-color: #ffffff;
    color: #001789;
    border: 2px solid #001789;
    -ms-transform: scale(0.9);
  -webkit-transform: scale(0.9);
  transform: scale(0.9);
      box-shadow: 0px 26px 40px 0px rgba(172, 172, 172, 0.25);
}
.heroBtn a:first-child i {
    background-color: #fff;
    color: #4F80FF;
    padding: 7px 12px;
    border-radius: 35px;
    margin-right: 10px;
}
.heroBtn a:first-child:hover i{
    background-color: #001789;
    color: #ffffff;
}
.b-btn{
    background-color: #4F80FF;
    color: #fff;
    padding: 14px 35px 14px 10px !important;
    border-radius: 35px;
    border: 2px solid #ffffff;
}
.b-btn:hover{
    background-color: #ffffff;
    color: #001789;
    border: 2px solid #001789;
    -ms-transform: scale(0.9);
  -webkit-transform: scale(0.9);
  transform: scale(0.9);
      box-shadow: 0px 26px 40px 0px rgba(172, 172, 172, 0.25);
}
.b-btn i{
    background-color: #fff;
    color: #4F80FF;
    padding: 7px 12px;
    border-radius: 35px;
    margin-right: 10px;
}
.b-btn i:hover{
    background-color: #001789;
    color: #ffffff;
}
.heroBtn {
    margin-top: 40px;
}
.heroBtn a:last-child {
    border: 2px solid #031D5B;
    border-radius: 35px;
    color: #031D5B;
}
.heroBtn a:last-child:hover{
    border: none;
    background-color: #4F80FF;
    color: #FFFFFF;
    border: 2px solid #4F80FF;
    -ms-transform: scale(0.9);
    -webkit-transform: scale(0.9); 
    transform: scale(0.9);
        box-shadow: 0px 26px 40px 0px rgba(172, 172, 172, 0.25);
}

/* ====== End of 1.2 hero section ====== */


/* ====== 1.3 domain section ====== */
#domain{
    margin: 70px 0;
}
#domain .container{
    background-color: #031D5B;
    padding: 70px 0;
    border-radius: 20px;
    position: relative;
    box-shadow: 15px 15px 40px 0px rgba(0, 0, 0, 0.15);
}
.search-domain{
    background-color: #fff;
    padding: 0 2px 0 12px;
    width: 70%;
    margin: 20px auto;
    border-radius: 50px;
    position: relative;
    z-index: 2;
}
.search-domain input{
    border: none;
    outline: none;
    padding: 0 0 0 15px;
    width: 100%;
    margin: 0 60px 0 0;
}

#domain select{
    border: navajowhite;
    border-left: 1px solid;
    outline: none;
    padding: 0 3px;
    height: 44px;
}
#domain select option{
    padding: 7px 10px !important;
}
.search-Btn{
    justify-content: end;
    gap: 14rem;
}
.search-Btn {
    width: 70%;
    gap: 0;
}
.search-Btn hr {
    margin: 1rem 0;
    color: inherit;
    opacity: 2.25 !important;
    background-color: #8E8E8E;
    height: 35px !important;
}
#domain h3{
    color: #fff;
    text-align: center;
    margin-bottom: 10px;
}
.domain-btn button{
    background-color: #4F80FF;
    color: #fff;
    padding: 14px 35px 14px 10px !important;
    border-radius: 35px;
    border: 2px solid #ffffff;
    transition: 0.4s ease;
}
.domain-btn button:hover{
    background-color: #ffffff;
    color: #001789;
    border: 2px solid #001789;
    -ms-transform: scale(0.9);
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
}

.domain-btn i {
    background-color: #fff;
    color: #4F80FF;
    padding: 7px 12px;
    border-radius: 35px;
    margin-right: 10px;
}
.domain-btn:hover i{
    background-color: #001789;
    color: #ffffff;
}
.domain-names {
    flex-wrap: wrap;
    margin-top: 20px;
    display: flex;
    justify-content: center;
    gap: 20px;
}
.domain-names h6 {
    color: #fff;
    padding-top: 10px;
}

.domain-names div:first-child h4 {
    color: #7DE8FF;
}

.domain-names div:nth-child(3) h4 {
    color: #FF4A3F;
}
.domain-names div:nth-child(5) h4 {
    color: #45E355;
}
.domain-names div:nth-child(7) h4 {
    color: #A310F2;
}

.domain-names div:nth-child(9) h4{
    color: #FAC600;
}
.domain-names div:nth-child(11) h4 {
    color: #4F80FF;
}
#domain hr {
    margin: 1rem 0;
    color: inherit;
    border-top: var(--bs-border-width) solid;
    opacity: .25;
    border: 1px solid #d5bcbc;
    height: 50px;
}
.span-box span:first-child{
    width: 40px;
    height: 40px;
    background-color: #4F80FF;
    position: absolute;
    top: 50px;
    left: 80px;
    rotate: 60deg;
}
.span-box span:last-child{
    width: 80px;
    height: 80px;
    border: 2px dashed #4F80FF;
    position: absolute;
    top: 110px;
    left: 110px;
    rotate: 60deg;
    z-index: 0;
}

/* ====== End of 1.3 domain section ====== */

/* ====== 1.4 services section ====== */
#service .container{
    position: relative;
}
#service .container{
    z-index: 2;
}
.service-bg img{
    width: 210px;
    position: absolute;
    top: 5px;
    right: 0px;
    z-index: -2;
}
#service{
    padding: 30px 0;
}
#service h2{
    color: #031D5B;
    text-align: center;
    margin: 15px 0;
}
#service .content p{
    margin: 0 auto;
    color: #626262;
    text-align: center;
    padding: 0 200px 35px 200px;
}
.cards div{
    width: 100%;
    background-color: #ffffff;
    margin: 0 auto 35px auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    border: 1px solid #BEBEBE;
    border-radius: 20px;
    padding: 50px 25px 40px 25px;
    transition: all 0.3s ease;
    min-height: 333px;
}
.cards div:hover{
    border-bottom: 8px solid #4F80FF;
}
.cards img{
width: 65px;
z-index: 3;
transition: all 2000ms ease;
}
.cards h4{
    color: #001789;
    margin-top: 25px;
    z-index: 3;
    transition:all 600ms ease-in;
}
.cards p{
    color: #626262;
    text-align: center;
    margin-top: 15px;
    z-index: 3;
    transition:all 600ms ease-in;
}

.w-btn{
     border-radius: 35px;
    border: 2px solid #4F80FF;
}
.w-btn:hover{
     color: #ffffff;
    border: 2px solid #4F80FF;
    background-color: #4F80FF;
    -ms-transform: scale(0.9);
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
        box-shadow: 0px 26px 40px 0px rgba(172, 172, 172, 0.25);

}
.cards div {
    position: relative;
    overflow: hidden;
} 

 .cards div:hover::before {
    height: 100%;
    opacity: 1
}

/* ====== End of 1.4 services section ====== */

/* ====== 1.5 about section ====== */
#about{
    margin: 70px 0;
    padding: 30px 0;
}
#about .container{
    position: relative;
}
#about span:first-child{
    position: absolute;
    height: 40px;
    width: 40px;
    border: 1px dashed #031D5B;
    right: 20px;
    top: -60px;
    rotate: 45deg;
}
#about span:nth-child(2) {
    position: absolute;
    height: 40px;
    width: 40px;
    border: 1px dashed #031D5B;
    left: 356px;
    top: -40px;
    border-radius: 50%;
}
#about span:nth-child(3) {
    position: absolute;
    height: 40px;
    width: 40px;
    background-color: #4F80FF;
    left: 466px;
    top: 48px;
    border-radius: 50%;
}
#about span:nth-child(4) {
    position: absolute;
    height: 30px;
    width: 30px;
    border: 1px dashed #031D5B;
    left: 35px;
    top: -89px;
    rotate: 45deg;
}
#about span:nth-child(5) {
    position: absolute;
    height: 50px;
    width: 50px;
    background-color: #48A1E7;
    left: 260px;
    bottom: 110px;
    border-radius: 10px;
}
.about-img img{
    width: 100%;
}
#about .row h2{
    color: #031D5B;
    padding-bottom: 10px;
}
#about p{
    color: #626262;
    margin: 5px 0;
}
.about-box{
    border: 1px solid #BEBEBE;
    display: flex;
    align-items: flex-start;
    padding: 25px 30px 25px 25px;
    margin: 15px 0;
    border-radius: 20px;
    gap: 30px;
    background-color: #FFFFFF;
    min-height: 154px;
}
.about-box:hover{
    border-bottom: 6px solid #4F80FF;
    transition: all 0.3s ease;
}
.about-box img{
    width: 70px;
}
.about-box h4{
    color: #001789;
}

.aboutBtn{
    margin-top: 40px !important;
}
#about figure img:first-child{
    width: 15px;
    position: absolute;
    right: 0;
    bottom: -59px;
}
#about figure img:nth-child(2) {
    position: absolute;
    bottom: 121px;
    left: 447px;
    z-index: -1;
}
/* ====== End of 1.5. about section ====== */

/* ====== 1.6 get started section ====== */
#started{
    margin: 50px 0;
}
#started .row {
    padding: 15px 50px 25px 45px;
    background-color: #031D5B;
    border-radius: 20px;
}
#started h3{
    color: #fff;
}
#started p{
    color: #fff;
    margin: 20px 0 40px 0;
}
#started img{
    width: 100%;
}
#started a{
    background-color: #4F80FF;
    color: #fff;
    padding: 14px 35px 14px 10px !important;
    border-radius: 35px;
}
#started a:hover{
    background-color: #ffffff;
    color: #001789;
    -ms-transform: scale(0.9); 
  -webkit-transform: scale(0.9);  
  transform: scale(0.9);
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.started-btn{
    transition: 0.3s ease;
    display: inline-block;
}
.started-btn:hover{
    -ms-transform: scale(0.9);
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
}
#started a:hover i{
    background-color: #001789;
    color: #ffffff;
}
#started a i{
    background-color: #fff;
    color: #4F80FF;
    padding: 7px 11px;
    border-radius: 35px;
    margin-right: 10px;
}
/* ====== End of 1.6 get started section ====== */

/* ====== 1.7 clients section ====== */
#clients .container{
    position: relative;
}
#clients span {
    position: absolute;
    height: 40px;
    width: 40px;
    background-color: #4F80FF;
    right: 0px;
    top: -5px;
    border-radius: 50%;
}
#clients figure img {
    width: 15px;
    position: absolute;
    left: -18px;
    top: 72px;
}
#clients{
    margin: 100px 0;
}
.c-image img{
    width: 100%;
}
.client-box{
    display: flex;
    gap: 20px;
    margin: 20px 0;
}
.client-box .counter{
    width: 250px;
    border: 1px solid #BEBEBE;
    background-color: #FFFFFF;
    padding: 50px 10px;
    min-height: 259px;
    border-radius: 20px;
    text-align: center;
    cursor: pointer;
    position: relative;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.client-box .counter:hover{
    border-bottom: 5px solid #4F80FF;
}
.client-box h3{
    color: #001789;
    margin-top: 15px;
}
.client-box p{
    color: #626262;
}
.client-box div img{
    width: 70px;
}

/* ====== End of 1.7 clients section ====== */

/* ====== 1.8 advance feature section ====== */
#feature img{
    width: 100%;
}
#feature .accordion img{
    width: 50px !important ;
}
#feature{
    background-color: #031D5B;
    padding: 100px 0;
}
#feature h2{
    color: #fff;
    padding-bottom: 15px;
}
#feature p{
    color: #fff;
    padding-bottom: 20px;
}
#feature .accordion-button{
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(79, 128, 255, 0.3);
  padding: 2px 10px 0px 2px !important;
}
button.accordion-button.advance_btn.collapsed, button.accordion-button.advance_btn {
  border-radius: 50% !important;
  background-color: #4862a3;
}

#feature .accordion-item {
  background: rgba(79, 128, 255, 0.3);
  width: 100%;
  border: none;
  border-radius: 20px;
  padding: 0 30px;
}
#feature .accordion-body{
    padding: 5px 0;
}
#feature .accordion-button:not(.collapsed)::after{
    background-image: url("../image/drop-down-25.png");
    filter: brightness(0) invert(1);
}
#feature .accordion-button::after{
    background-image: url("../image/drop-down-25.png");
    filter: brightness(0) invert(1);
}
.accordion-button:not(.collapsed) {
    box-shadow: none;
}

#feature .accordion p{
  padding: 0 5px 0 5px;
  text-align: left;
  color: #FFFFFF;
}
#feature ul{
    padding: 15px 0;
}
#feature li{
    list-style: none;
    padding: 0 5px 0 5px;
  text-align: left;
  color: #FFFFFF;
  line-height: 25px;
}
.advance_btn{
    margin-top: 50px;
}
 .advance_btn a{
    border: 2px solid #FFFFFF;
    color: #FFFFFF;
    padding: 14px 35px;
 }
#feature .w-btn:hover{
    box-shadow: none;
}
  #feature .accordion{
    display: flex;
    flex-direction: column;
    gap: 20px;
  }
  #feature h4{
    text-align: left;
    padding: 9px 0;
    color: #FFFFFF;
  }
  #feature .container{
    position: relative;
  }
  #feature span:first-child{
    position: absolute;
    height: 40px;
    width: 40px;
    background-color: #4F80FF;
    left: 74px;
    top: 48px;
    border-radius: 50%;
  }
  #feature span:nth-child(2) {
    position: absolute;
    height: 40px;
    width: 40px;
    background-color: #4F80FF;
    right: -21px;
    bottom: -40px;
    border-radius: 50%;
}
#feature span:nth-child(3) {
    position: absolute;
    height: 30px;
    width: 30px;
    border: 1px dashed #FFFFFF;
    right: -30px;
    top: 271px;
    rotate: 45deg;
}
#feature .adv-bg img {
    position: absolute;
    bottom: 60px;
    left: 191px;
    width: 100px;
}

  
/* ====== End of 1.8 advance feature section ====== */

/* ======1.9 web hosting package section ====== */

#hosting{
    margin: 80px 0;
    padding: 40px 0;
}
#hosting h2{
    color: #031d5b;
    padding: 0 200px;
    margin: 0 auto;
    text-align: center;
}
#hosting .container{
    position: relative;
}
.pricing_plan{
    margin-top: 40px;
    position: relative;
}

.plan-card{
    background-color: #ffffff;
    width: 100%;
    border-radius: 20px;
    padding: 45px 30px;
    box-shadow: 0px 26px 40px 0px rgba(172, 172, 172, 0.25);
    transition:all 0.5s ease;
}
#hosting figure img {
    width: 300px;
    position: absolute;
    top: 84px;
    left: -102px;
    z-index: -1;
}
.plan-card figure img{
    width: 335px;
}
.plan-card h5{
    color: #031D5B;
    font-weight: bold;
    padding-bottom: 15px;
}
.zoom-out{
    -ms-transform: scale(1.150);
  -webkit-transform: scale(1.150);
  transform: scale(1.150);
}
.plan-card h3{
    color: #FF004D;
    padding-bottom: 15px;
}
.plan-card p{
    color: #000000;
}

.domain-feature div{
    padding: 4px 0;
    display: flex;
    gap: 15px;
    align-items:  center;
}
.domain-feature div i{
    background-color: #4F80FF;
    color: #ffffff;
    font-size: 12px;
    padding: 4px 4px 3px 3px;
    border-radius: 35px;
}
.domain-feature a i{
    background-color: #4F80FF;
    color: #fff;
    padding: 8px 11px;
    border-radius: 35px;
    margin-right: 10px;
}
.pricing_Btn{
    margin-top: 10px;
    display: inline-block;
}
.domain-feature a{
    border: 2px solid #031D5B;
    border-radius: 35px; 
    padding: 12px 35px 12px 10px !important;
    color: #4F80FF;
    font-weight: bold;
    transition: 0.3s ease;
}
.domain-feature a:hover i{
   background-color: #001789;
    color: #ffffff;
}
.domain-feature a:hover{
    border: 2px solid #FFFFFF;
    color: #FFFFFF;
    background-color: #4F80FF;
    -ms-transform: scale(0.955); 
    -webkit-transform: scale(0.955);
    transform: scale(0.955);
        box-shadow: 0px 26px 40px 0px rgba(172, 172, 172, 0.25);
}
/* Style the tab */
.tab {
    overflow: hidden;
    flex-wrap: wrap;
  }
  
  /* Style the buttons that are used to open the tab content */
  .tab button {
    background-color: inherit;
    float: left;
    border: none;
    outline: none;
    cursor: pointer;
    transition: 0.3s;
    color: #001789;
    font-weight: bold;
    padding: 12px 0;
    margin: 0 17px;
  }
  .tab button.active{
    border-bottom: 3px solid #4F80FF;
  }
  /* Style the tab content */
  .tabcontent {
    display: none;
    padding: 10px 12px;
    border-top: none;
  }
  #hosting .container{
    position: relative;
  }
  #hosting span{
    height: 40px;
    width: 40px;
    border-radius: 50%;
    background-color: #4F80FF;
    position: absolute;
    top: 537px;
    right: -40px;
}

.hosting-bg {
    position: absolute;
    bottom: -103px;
    right: -33px;
    z-index: -1;
}
/* ====== End of 1.9 web hosting package section ====== */

/* ====== 1.10  30 day money back section ====== */
#m-back{
    padding-bottom: 100px;
}

#m-back h3 {
    background-image: url(../image/30_day_bg.png);
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    color: #fff;
    width: 30%;
    padding: 40px 10px 40px 35px;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
}
#m-back .m-main{
   
    box-shadow: 0px 26px 40px 0px rgba(172, 172, 172, 0.25);
    border-radius: 20px;
    padding: 0 30px 0 0;
    background-color: #FFFFFF;
}
#m-back .d-flex div{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    margin-right: 25px;
}
#m-back .m-main img{
    width: 60px;
}

/* ====== End of 1.10 30 day money back section ====== */

/* ====== 1.11 integrated with more than 100 section ====== */
#integrate{
    position: relative;
    margin: 0  0 50px 0;
    background-color: #ffffff;
}
.integ-first{
    padding: 100px 0 0 0;
    position: relative;
}
.integrate-logo{
    margin-bottom: 100px;
    padding-bottom: 100px;
}
.integ-first h2{
    color: #031D5B;
    text-align: center;
    margin: 0 auto;
    width: 60%;
}
.integ-first div img{
    width: 70px !important;
}
.integ-slider{
    margin: 0 auto;
}
.integ-first div{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 48px;
    padding: 0;
    margin: 0 auto;
    margin-top: 75px;
    flex-wrap: wrap;
}
.integ-first img[alt="spring"]{
    width: 13px;
    position: absolute;
    top: 17%;
    right: 15%;
}
/* ready */
#integrate .row{
    position: relative;
}
.ready{
    background-color: #4F80FF;
    padding: 20px 60px 35px 60px;
    border-radius: 20px;
    margin: 0 auto;
    width: 70%;
    position: absolute;
    top: 31%;
    left: 17%;
}
.ready h3{
    color: #fff;
}
.ready p{
    color: #fff;
    padding: 15px 0;
}
.ready img{
    width: 100%;
}
.ready a i{
    background-color: #4F80FF;
    color: #fff;
    padding: 8px 13px;
    border-radius: 35px;
    margin-right: 10px;
}
.ready a{
    background-color: #fff;
    border-radius: 35px;
    padding: 14px 35px 14px 10px !important;
    color: #4f80ff;
    font-weight: bold;
}
.ready a:hover{
    background-color: #001789;
    color: #ffffff;
        box-shadow: 0px 26px 40px 0px rgba(172, 172, 172, 0.25);

}
.ready a:hover i{
    background-color: #ffffff;
    color: #001789;
}
.ready_Btn{
    transition: 0.3s ease;
    display: inline-block;
    background-color: transparent;
}
.ready_Btn:hover{
    -ms-transform: scale(0.9);
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
}
/* slider */
.slider{
    background-image: url("../image/background-img.png");
    background-size: cover;
    background-repeat: no-repeat;
    overflow: hidden;
    min-height: 600px;
    padding: 300px 0 60px 0;
    margin-top: 200px;
}
.slider h2{
    color: #fff;
    padding: 0 0 15px 0;
}
.slider p{
    color: #fff; 
}
.slider-content{
    padding: 0 10px;
}
.slider-box{
    background-color: #ffffff;
    border-radius: 20px;
    padding: 30px 35px;
    width: 97% !important;
}
.slider .d-flex{
    padding: 0 50px 50px 110px;
    margin-top: 70px;
    gap: 70px;
}
.slider-box i{
    color: rgb(255, 217, 0);
}
.slider-box div:first-child{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px 0 0;   
}
.slider-box div:nth-child(2){
    margin-left: 20px;
    display: flex;
    gap: 10px;
    margin-top: 25px;
}
.slider-box div:nth-child(2) img{
    width: 25px;
}
.slider-box div img:first-child{
    width: 100px;
    border-radius: 15px;
    margin-left: 15px;
}
.slide-para p:first-child{
    padding: 19px 17px;
    color: #505050;
}
.slide-para p:nth-child(2){
    color: #000;
    font-weight: bold;
    padding-left: 17px;
}
.slide-para p:nth-child(3){
    color: #0B8FC1;
    font-weight: bold;
    padding-left: 17px;
}
.slider figure{
    margin-left: 30px;
    margin-bottom: 40px;
}
.slider figure img{
    width: 110px;
}
/* ====== End 1.11 integrated with more than 100 section ====== */

/* ======1.12 Our Achievement section ====== */
#achievement{
    padding: 50px 0;
}
#achievement h2{
    color: #031D5B;
    margin: 5px auto;
    text-align: center;
    padding-bottom: 13px;
}
#achievement hr{
    max-width: 1140px;
    margin: auto;
}
#achievement .container{
    padding-bottom: 100px;
}
#achievement p{
    color: #626262;
    width: 60%;
    margin: 0 auto;
    text-align: center;
    padding-bottom: 10px;
}
.achieve-cards hr{
        color: inherit;
        background-color: #BEBEBE;
        opacity: 0.5;
        rotate: 90deg;
        width: 150px;
        height: 0.5px;
}
.achieve-cards img{
    width: 85px;
}
.achieve-cards{
    margin-top: 40px;
}
.achieve-cards div{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 20px;
    width: 400px;
    text-align: center;
}
.achieve-cards h5{
    color: #031D5B;
    font-weight: bold;
}

/* ======End 1.12 Our Achievement section ====== */

/* ====== 1.13 FAQ section ====== */
#faq{
    padding: 20px 0;
}
#faq img{
    width: 80%;
}
.faq-content{
    margin-top: 30px;
    padding-left: 21px;
}
.faq-content h2{
    color: #031d5b;
}
.faq-content p{
    color: #626262;
    padding: 10px 0 20px 0;
}
#faq .accordion-item{
    border: none;
    outline: none;
    border-radius: 0;
}
#faq .accordion button{
    background-color: rgba(247, 247, 247, 0.9843137255);
    color: #031D5B;
}
#faq .accordion button{
    font-size: 18px;
    color: #031D5B;
    font-weight: bold;
    background-color: rgba(247, 247, 247, 0.9843137255);
}
#faq .accordion-body{
    font-size: 18px;
    padding: 0px 41px 15px 21px;
}
#faq .accordion-body p{
    font-size: 18px;
    padding: 10px 0;
}
#faq .accordion-body{
    color: #505050;
    background-color: rgba(247, 247, 247, 0.9843137255);
}
#faq .accordion-button:not(.collapsed) {
    color: #031D5B;
    background-color: rgba(247, 247, 247, 0.9843137255);
}
#faq .accordion-button:not(.collapsed)::after{
    background-image: url("../image/faq-1.png");
    margin-left: 5px;
}
#faq .accordion-button::after{
    background-image: url("../image/faq-2.png");
    margin-left: 5px;
}
#faq .accordion-button:focus {
    box-shadow: none;
}
/* ====== End of 1.13 FAQ section ====== */

/* ====== 1.14 blog section ====== */
#informed{
    margin: 70px 0;
}
#informed h2{
    color: #031D5B;
    text-align: center;
}
#informed p{
    color: #626262;
    margin: 10px auto;
    padding-bottom: 25px;
    padding: 5px 200px 20px 200px;
}
.info-date{ 
    background-color: #4f80ff;
    height: 48px;
    width: 50px;
    text-align: center;
    color: #fff;
    line-height: 20px;
    padding: 4px 3px;
    position: absolute;
    left: -15px;
    top: 210px;
}
.inform-cards img{
    width: 100%;
    object-fit: cover;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
}
.inform-cards .blog{
    padding: 0;
    border-radius: 20px;
    border: 2px solid #E4E4E4;
    position: relative;
    padding-bottom: 50px;
}
.inform-cards .blog:hover{
    
    box-shadow: 0px 26px 40px 0px rgba(172, 172, 172, 0.25);
}
.inform-cards p{
    color: #505050;
    font-weight: bold;
     padding: 20px 8px 25px 20px !important;
}
.inform-cards a{
    margin-left: 20px;
}

/* ======End 1.14 blog section ====== */

/* ======1.15 logoipsum section ====== */
#logoipsum {
    margin: 70px auto;
    padding: 50px 0;
}
#logoipsum img{
    width: 190px !important;
    margin: 0 auto;
}
.logoipsum-slider{
    display: flex;
    gap: 35px;
    width: 90%;
}

.logo-main{
    display: flex;
    justify-content: center;
    align-items: center;
}
/* ====== End 1.15 logoipsum section ====== */

/* ====== 1.16 footer section ====== */
footer{
    background-image: url("../image/background-img.png");
    background-repeat: no-repeat;
    background-size: cover;
    padding: 130px 0 0 0;
    background-position-y: 1px ;
}
.newsletter{
    position: relative;
    padding: 30px 0 20px 0;
}
.newsletter figure {
    position: absolute;
    top: -73px;
    left: -92px;
}
.newsletter figure img{
    width: 300px;
}
.newsletter span {
    height: 50px;
    width: 50px;
    border: 1px dashed #FFFFFF;
    rotate: 45deg;
    position: absolute;
    right: 20px;
    top: 76px;
}
.newsletter h2{
    text-align: center;
    color: #FFFFFF;
}
.newsletter p{
    color: #FFFFFF;
    padding: 0 240px;
    text-align: center;
    margin: 10px auto;
}
.newsletter input{
    width: 40%;
    padding: 15px 12px 13px 20px;
    border-radius: 35px;
    outline: none;
    border: none;
}
.newsletter button{
    border: none;
    padding: 10px 35px 10px 10px !important;
}
.newsletter button:hover{
    border: none;
}
.newsletter button:hover i{
    color: #FFFFFF ;
    background-color: #001789;
}
.email-btn{
    transition: 0.3s ease;
    display: inline-block;
}
.email-btn:hover{
    -ms-transform: scale(0.9);
    -webkit-transform: scale(0.9);
    transform: scale(0.9);
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
footer hr{
    background-color: white !important;
    margin: 30px 0;
    color: white;
    opacity: 0.50;
}
.footer-links figure img {
    width: 159px;
}
.footer-links{
    padding: 20px 15px 0 15px;
    color: #ffffff;
}
.footer-links span {
    height: 50px;
    width: 50px;
    border-radius: 50%;
    background-color: #4F80FF;
    position: absolute;
    right: 18px;
}
.s-icon i{
    transition: 0.2s all ease-in-out;
    font-size: 7px;
}
.s-icon a:hover i{
    color: #4F80FF;
}

.s-icon a{
    border: 1px solid white;
    height: 38px;
    width: 40px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.s-icon a:hover{
    background-color: #FFFFFF;
}
.footer-links a{
    color: #ffffff;
}
.footer-links h5{
    font-weight: bold;
    padding-bottom: 12px;
    margin-bottom: 15px;
}
.footer-links h5{
    position: relative;
}
.footer-links h5::after{
    content: '';
    position: absolute;
    left: 0px;
    right: 0px;
    bottom: 0;
    width: 55px;
    border-bottom: #4F80FF 3px solid;
  }
.footer-links ul li{
    padding: 7px 0;
}
.footer-links a{
    padding: 0 !important;
    word-break: break-all;
}
.footer-links p{
    padding: 25px 0;
}
.footer-links i {
    font-size: 21px;
}
.address div{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 12px;
    padding: 12px 0;
}
.address h5{
    margin-left: 27px;
}
.address i {
    color: #4F80FF;
    font-size: 22px;
}
.copyright p{
    color: #ffffff;
    padding-bottom: 10px;
    font-size: 16px;
}
.copyright {
    padding-bottom: 15px;
}
/* ====== End 1.16 footer section ====== */

/* 02. About Page Style */
/* ====== 2.2 hero section ====== */
.about {
    background: #FFF;
    padding: 50px 0;
    margin: 0;
}
.about .container{
    position: relative;
}
.about h2{
    color: #031D5B;
}
.about p {
    padding: 15px 135px 0 0;
    color: #626262;
}
.about img {
    width: 80%;
    display: block;
    margin: 0 0 0 auto;
}
.about-span span:first-child {
    width: 30px;
    height: 30px;
    background-color: #4F80FF;
    position: absolute;
    top: 57px;
    left: -68px;
    rotate: 60deg;
}
.about-span span:last-child {
    width: 55px;
    height: 55px;
    border: 2px dashed #4F80FF;
    position: absolute;
    top: 107px;
    left: -72px;
    rotate: 60deg;
    z-index: 0;
}
/* ====== End 2.2 hero section ====== */
/* ====== 2.3 counter section ====== */
#counter{
    padding: 50px 150px;
}
#counter hr{
    color: inherit;
    background-color: #BEBEBE;
    opacity: 0.5;
    rotate: 90deg;
    width: 100px;
    height: 0.5px;
}
#counter hr{
    max-width: 1140px;
    margin: auto;
}
.counter-cards img{
    width: 65px;
}
.counter-cards{
    margin-top: 40px;
}
.counter-cards div{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 5px;
    width: 200px;
    text-align: center;
}
/* ======End 2.3 counter section ====== */
/* ====== 2.9 integrated with more than 100 section ====== */
#integrate .pb-5{
    padding-bottom: 78px !important; 
}
/* ======End 2.9 integrated with more than 100 section ====== */

/* 02. End About Page Style */

/* 03. Service Page Style */
/* ====== 3.3 services section ====== */
#service img[alt="wordpress"]{
    width: 79px;
}
/* ======End 3.3 services section ====== */

/* 03. End Service Page Style */
/* 05. blog Page Style */
#informed .pt{
    padding-top: 28px;
    padding-bottom: 30px;
}

/* End 05. blog Page Style */
/* 06. Contact Page Style */
/* ====== 6.1 contact section ====== */
#contact{
    padding: 70px 0;
}
#contact img{
    padding-bottom: 30px;
}
#contact .col-md-3 div{
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        padding: 10px 10px;
        text-align: center;
        color: #031D5B;
}
#contact .container{
    position: relative;
}

#contact span{
    position: absolute;
    width: 60px;
    height: 60px;
    border: 1px dashed #031D5B;
    rotate: 45deg;
    top: 30px;
}
#contact h3{
    color: #262626;
    text-align: center;
}

#contact .justify-content-end img{
    width: 400px;
    position: absolute;
    right: 0;
    z-index: -1;
}
#contact form p{
    color: #2D2D2D;
    text-align: center;
    padding: 10px 200px 30px 200px;
}
#contact form{
    width: 80%;
    margin: 40px auto;
    border-radius: 20px;
    border: 1px solid #E4E4E4;
    background: #FFF;
    box-shadow: 3px 15px 25px 0px rgba(0, 0, 0, 0.15);
    padding: 30px 10px;
}
#contact form input{
    padding: 12px 7px 13px 7px;
    font-size: 12px;
    color: #878787;
    font-size: 13px;
    font-weight: 400;
    text-transform: capitalize;
}
#contact form textarea{
    padding: 12px 7px 13px 7px;
    font-size: 12px;
    color: #878787;
    font-size: 13px;
    font-weight: 400;
    text-transform: capitalize;
    width: 100%;
}
#contact form input,textarea{
    border-radius: 10px;
    border: 1px solid #BEBEBE;
    background: #FFF;
}
#contact form button{
    color: #4F80FF;
    width: 90%;
    transition: 0.3s ease;
    background-color: #FFF;
}
#contact form button:hover{
    color: #ffffff;
    border: 2px solid #4F80FF;
    background-color: #4F80FF;
    transform: scale(0.9);
    box-shadow: 0px 26px 40px 0px rgba(172, 172, 172, 0.25);

}
#contact form .col-md-10 {
    flex: 0 0 auto;
    width: 85.333333%;
}
/* ====== End 6.1 contact section ====== */
/* ====== 6.4 location section ====== */
#location .container-fluid {
    padding-bottom: 100px;
}
/* ====== End 6.4 location section ====== */