/* custom style */
:root
{
    --mainWhite: #ffffff;
    --mainBlack: #000000;
    --mainGrey: rgb(216, 214, 214);
    --mainBrown: rgb( 201, 0, 0); /* #c90000 */
    --mainYellow: #fdb40e;
    /*--mainBrown: #ff0000;*/
    --blackcoffee: rgb(48, 41, 47);
}

.js-cookie-consent {
    position: fixed;
    width: 25%;
    height: auto;
    font-size: 15px;
    bottom: 1%;
    right: 2%;
    padding: 10px;
    background: rgb(201, 0, 0);
    text-align: center;
    z-index: 9999;
    border: 2px solid white;
    border-radius: 10px;
    color: white;
    display: flex;
    flex-direction: column;

}

.cookie-consent__message {
    padding: 4px;
}
   

.js-cookie-consent-agree {
    margin: 4px 6px;
    padding: 4px 10px;
    background: white;
    border-radius: 10px;
    display: inline-block;
    width: fit-content;
    margin: auto;
}

/* Media Queries */

@media screen and (max-width: 420px) {
    .js-cookie-consent {
        width: 80%;
        height: auto;
        right: 10%;
        margin: 0 auto;
        align-items: center;
        text-align: center;
        max-width: none;
        padding: 10px;
    }

    .cookie-consent__message {
        font-size: 15px;
        padding-bottom: 0; 
    }

    .js-cookie-consent-agree {
        padding-top: 1px;
        margin: 2px;
    }

}

body
{
    font-family: 'Roboto', sans-serif;
    color: var(--mainBlack);
    background: var(--mainWhite);
}

.whitepaper h2{
    color:var(--mainBrown);
    font-weight: 500;
}

section h1{
    color: var(--mainBrown);
    font-weight: bold;
}

section p{
    font-size: 1.2rem;
    line-height: 1.8rem;
}

.theme{
    padding: 5px 0;
    color: var(--mainWhite);
    background-color: var(--mainBrown);
}

.theme h6{
    margin:0!important;
}

/*button style*/

.mailsafi-btn{
    border: 2px solid var(--mainBrown);
    background: var(--mainBrown);
    font-size: 1.2rem;
    border-radius: 50px;
    padding: 5px 20px;
    color: var(--mainWhite);
    text-decoration: none!important;
}

.mailsafi-btn:hover{
    background: transparent;
    border: 2px solid var(--mainBrown);
    color: var(--mainBrown);
    text-decoration: none!important;
}

.btn-mailsafi{
    background-color:#c90000!important;
    color:#ffffff!important;
    text-decoration: none!important;
}

.cta-small{
    background: var(--mainBrown);
    color: var(--mainWhite)!important;
    border: 2px solid var(--mainWhite)!important;
    font-size: 14px;
    transition: all .5s;
    border-radius: 10px;  
    text-decoration: none!important;
    display: inline-block;
    padding: 10px 15px;
}

/* navabr section */
.navbar-icon
{
    color: var(--mainBrown);
    font-size: 2rem;
}

.navbar-toggler
{
    border-color: var(--mainBrown)!important;
}

.navbar-brand img
{
    width:170px !important;
    height:50px !important; 
}

.nav-link
{
    color: var(--mainBlack);
    font-size: 16px;
    font-weight: bold;
}

.dropdown-item{
    color: var(--mainBlack);
    font-size: 16px;
    font-weight: bold;
}

.nav-link:hover
{
    color: var(--mainBrown)!important;
    opacity: 0.8;
}

.btn-box span
{
    font-size: 20px;
    color: var(--mainWhite);
    padding-left: 10px;
}

.dropdown-item:hover, .dropdown:focus{
    background-color: var(--mainBrown);
    color:#ffffff;
}

/*navbar background color*/
.navbar
{
    /*position: fixed;*/
    /*top: 0;
    right: 0;
    left: 0;
    z-index: 1030;*/
    background-color: var(--mainWhite);
    border-bottom: 3px solid var(--mainBrown);
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* fixed navbar section */
.fixed-navbar{
    background-color: var(--mainPurple);
}

.fixed-navbar .nav-link:hover
{
    color: var(--mainBlack);
}

/*banner section*/
.cta{
    margin-top:5%;
}

.banner{
    position: relative;
}

.banner img
{
    max-width: 100%;
}

.emails-banner{
    background: url(../images/mailsafi-emailhosting.jpg);
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center;
    min-height: 60vh;
}

.archiving-banner{
    background: url(../images/emails-hosting-mailsafi.jpg);
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center;
    min-height: 60vh;
}

.banner-text-main{
    /* background:rgba(255,255,255, 0.8); */
    display:inline-block;
    color:red;
    position: absolute;
    top: 15%;
    left: 5%;
}

.banner-text{
    /* background:rgba(255,255,255, 0.8); */
    display:inline-block;
    color:red;
    position: absolute; 
}

/* price section */
.price{
    background-image: linear-gradient(var(--blackcoffee), var(--mainBrown));
    padding-top: 6rem;
    padding-bottom: 3rem;
}

.card-price{
    background-image: linear-gradient(var(--mainBrown), var(--blackcoffee));
    border: 2px solid #fff;
    box-shadow: 5px 5px 10px #222;
    transition: all .5s;
}

.card-security
{
    background-color: var(--mainGrey);
}

.hosting-card
{
    padding-left: 0;
    padding-right: 0;
}

.security-card
{
    padding-left: 0;
    padding-right: 0;
    padding-top: 0;
}

.card-price-hosting{
    background: #fff;
    border: 2px solid #000;
    box-shadow: 5px 5px 10px #222;
    transition: all .5s;
}

.card-price:hover{
    transform: translateY(-2px);
}

.sangari-body hr{
    background-color: #ffffff;
    width: 100px;
}

.card-title.hosting
{
    color: #000;
    text-shadow: none;
}

.top-hosting-features
{
    background: var(--mainGrey);
    color: #000;
    margin-top:1rem;
    margin-bottom:1rem;
}

.hosting-features
{
    color: #000;
    font-size: 14px;
}

.hosting-features p
{
    font-size: 17px;
}

.cat{
    font-weight: bold;
    font-size: 1.2rem;
}

.card-title.hosting h4
{
    text-shadow: 1px 1px 2px #000;
}

.card-title h4{
    font-size: 2.3rem;
    text-shadow: 2px 2px 5px #000;
}


.sangari-price h3{
    font-size: 1.6rem;
    color: #fff;
    text-shadow: 2px 2px 5px #000;
}

.sangari-price h3 span{
    font-size: 1.2rem;
}

.popular{
   background: var(--blackcoffee);
}

.popularcard{
    margin-top: -50px;
} 

/*button style*/
.cta-btn{
    background-color: var(--mainBrown);
    color: #ffffff;
    border: 2px solid var(--mainBrown);
    padding: 7px 20px;
    transition: all .5s;
    border-radius: 50px;  
    text-decoration: none!important;
}

.cta-btn:hover{
    opacity: 0.7;
    color: #ffffff;
}

.cta-white{
    background: var(--mainBrown);
    color: var(--mainWhite);
    border: 2px solid var(--mainWhite)!important;
    font-size: 14px;
    transition: all .5s;
    border-radius: 10px;  
    text-decoration: none!important;
    display: inline-block;
}

.cta-sidebar{
    background: var(--mainBrown);
    color: var(--mainWhite);
    border: 2px solid var(--mainWhite)!important;
    font-size: 14px;
    transition: all .5s;
    border-radius: 10px;  
    text-decoration: none!important;
    display: inline-block;
}

.cta-sidebar:hover{
    background: transparent;
    color: var(--mainBrown)!important;
    border: 2px solid var(--mainBrown)!important;
}

.mailsafi-btn-blue{
    background: #272C6E!important;
    color: var(--mainWhite);
    border: 2px solid #272C6E!important;
    font-size: 1.5rem;
    transition: all .5s; 
    text-decoration: none!important;
    padding: 8px 30px;
    text-transform: uppercase;
    text-decoration: none!important;
}

.mailsafi-btn-two{
    background: var(--mainBrown);
    color: var(--mainWhite);
    border: 2px solid var(--mainBrown)!important;
    font-size: 1.5rem;
    transition: all .5s; 
    text-decoration: none!important;
    padding: 8px 30px;
    text-transform: uppercase;
    text-decoration: none!important;
}

.mailsafi-btn-two:hover
{
    color: var(--mainWhite);
}

.mailsafi-btn-cta{
    background: var(--mainBrown);
    color: var(--mainWhite);
    border: 2px solid var(--mainBrown)!important;
    font-size: 1rem;
    transition: all .5s; 
    text-decoration: none!important;
    padding: 8px 30px;
    text-transform: uppercase;
    text-decoration: none!important;
}

.mailsafi-btn-cta:hover
{
    color: var(--mainWhite);
}

.mailsafi-btn-solution{
    background: var(--mainBrown);
    color: var(--mainWhite);
    border: 2px solid var(--mainBrown)!important;
    font-size: 1rem;
    transition: all .5s; 
    text-decoration: none!important;
    padding: 8px 30px;
    text-transform: uppercase;
    text-decoration: none!important;
}

.mailsafi-btn-solution:hover
{
    color: #ffffff;
}

.responsivecta
{
    display: none;
}

.selected-btn{
    background: green;
    color: var(--mainWhite);
    border: 2px solid green!important;
    font-size: 1.3rem;
    transition: all .5s; 
    text-decoration: none!important;
    padding: 8px 30px;
    text-transform: uppercase;
}

.mailsafi-btn-two:hover
{
    color:var(--mainWhite);
}

a.nav-link.cta-white{
    color: var(--mainWhite);
}

.cta-white:hover{
    background: transparent;
    border: 2px solid var(--mainBrown)!important;
}



.features-title::after{
    content: "";
    background: var(--blackcoffee);
    display: block;
    height: 3px;
    width: 170px;
    margin: 8px auto 1px;
}

h2.features-title{
    color: var(--mainBrown);
    font-weight: bold;
}

.solution-bg{
    background-color:#F6F6F6;
}

/*sec grey section*/
.sec-grey{
    background-color: #eee;;
}


/*----case study---*/
.testimonials{
    background-image: linear-gradient(var(--blackcoffee), var(--mainBrown));
}

.img-area{
    overflow: hidden;
    width: 200px;
    height: 100px;
    margin: auto;
}

.img-area img{
    width: 100%;
}

.carousel-caption{
    position: static;
    padding-top: 0;
    padding-bottom: 15px;
}

.carousel-caption h3{
    font-size: 26px;
    margin-bottom: 15px;
    margin-top: 5px;
}

.carousel-caption h4{

}

.carousel-caption p{
    font-size: 18px;
    margin: auto;
    width: 70%;
    margin-bottom: 10px;
}

.carousel-indicators{
    bottom: -35px;
}
 
/*---footer section---*/
#footer h3
{
    margin-top: 10px;
    font-size: 22px;
    color: var(--mainBrown);
    font-weight: bold;
}

.social
{
    margin-top: 15px;
}

.social a
{
    padding-right: 15px;
    transition: all 1s ease;
    color: #061a74;
}

.social a:hover
{
    color: black;
}

.top-social a
{
    padding-right: 15px;
    transition: all 1s ease;
    color: #061a74;
}

.top-social a:hover
{
    color: black;
}

.quicklinks p a
{
    color: black;
    font-size: 18px;
}

.quicklinks a
{
    display: block;
    font-size: 17px;
    color: black;
}

.contact a
{
    display: block;
    font-size: 16px;
    color: black;
    text-decoration: none !important;
}

.contact a svg
{
    color: #061a74;
    font-size: 24px;
    transition: all 1s ease;
}

.contact a:hover svg
{
    color: var(--mainBrown);
}

.banner-contact{
    margin-top: 5px;
    border-bottom: 3px solid var(--mainBrown)!important;
}


.top-contact a
{
    color: black;
    text-decoration: none !important;
}

.top-contact a svg
{
    color: #061a74;
    font-size: 1.2rem;
    transition: all 1s ease;
}

.top-contact a:hover svg
{
    color: var(--mainBrown);
}

#copyright
{
 background: var(--blackcoffee);
 color: #ffffff;
}

#copyright p
{
    font-size: 18px;
    text-align: center;
    font-weight: bold;
}

#copyright #terms-link
{
    color: var(--mainwhite);
    font-size: 15px;
}

#copyright p#terms-link:hover
{
    color: var(--mainwhite)
}

.fdb-icon{
    width:100px;
    height: 100px;
}

.hideSegment{
    display: none;
}

.hidebilling
{
    display: none;
}

/*contact page*/
.contact-banner{
    background-image: linear-gradient(var(--blackcoffee), var(--mainBrown));
    min-height: 40vh;
    color:var(--mainWhite);
    clip-path: polygon(0 0, 100% 0, 100% 80%, 50% 100%, 0 80% );
}

/*featured section*/
.featured{
    background: var(--mainGrey);
}

.featured-item{
    background-color: var(--mainWhite);
    border-radius: 0.5rem;
    opacity: 0.5;
    cursor: pointer;
    transition: all 1s ease-in;
}

.featured-item:hover{
    opacity: 1;
    transform: scale(1.05);
}

.featured-icon{
    font-size:1.5rem;
    color:var(--mainBrown);
    cursor:pointer;
    transition: all 0.5s ease-in-out;
}

.featured-icon:hover{
    color:var(--mainBlack);
}

.contact-icon::after{
    content: "";
    background: var(--blackcoffee);
    display: block;
    height: 3px;
    width: 170px;
    margin: 8px auto 1px;
}

.callback-request{
    background-color: var(--mainGrey);
}

.callback-button{
    background-color: var(--mainBrown)!important;
    color: var(--mainWhite)!important;
    padding: 20px 40px;
    border-radius:50px;
    border:2px solid var(--mainBrown);
    text-decoration: none!important;
}

.callback-button-blue{
    background-color:#272C6E!important;
    color: var(--mainWhite)!important;
    padding: 20px 40px;
    border-radius:20px;
    text-decoration: none!important;
}

.btn-mailsafi{
    background-color:#c90000!important;
    color:#ffffff!important;
    text-decoration: none;
}

.list-fas{
    color: #c90000!important;
}

.subscribers p span{
    color: #c90000!important;
    font-size: 20px;
}

.hideSegment{
    display: none;
}

.hidePackage{
    display: none;
}

.hideNoOfEmailAccounts{
    display: none;
}

.hidePaymentInterval {
    display: none;
}

.strikeprice
{
    text-decoration: line-through;
    text-decoration-color: red;
    text-decoration: red double line-through;
    color: var(--mainGrey);
}

a.genlinks{
    text-decoration: none!important;
    color: var(--mainWhite)!important;
}

a.footerlinks
{
    text-decoration: none;
}

a.footerlinks:hover
{
    color:var(--mainBrown);
}

.bannersignup
{
    background:  linear-gradient(rgb( 0, 0, 0, 1), rgb( 0, 0, 0, 0.3)), url(../images/mailsafi-signup.jpg);
    background-size: cover;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center;
    min-height: 100vh;
    color: var(--mainWhite);
}

.internallink
{
    color:var(--mainBrown);
}


@media (max-width: 576px) { 
    .mailsafi-btn-blue{
        font-size: 0.8rem;
    }

    .mailsafi-btn-two, .mailsafi-btn-cta{
        font-size: 0.8rem;
    }

 }

 @media (max-width: 700px)
 {
    .banner img
    {
        height: 400px!important;
    }

    .banner-text-main{
        align-items: center;
    }
 }

 @media (min-width: 931px) and (max-width: 1063px)
 {
    .banner .home-img
    {
        height: 450px!important;
    }
 }


 @media (max-width: 930px)
 {
    .banner .home-img
    {
        height: 500px!important;
    }
}

@media (max-width: 767px)
{
    .display-sm-none
    {
        display: none!important;
    }

    .banner .home-img
    {
        height: 300px!important;
    }
}

@media (max-width: 1154px)
 {
    .home-btn{
        font-size: 0.8rem;
    }
 }

 @media (max-width: 800px)
 {

    .banner-text-main{
        top: 10%;
    }

    .mailsafi-btn-blue{
        font-size: 0.8rem;
    }

    .mailsafi-btn-two, .mailsafi-btn-cta{
        font-size: 0.8rem;
    }
 }

 .home-font
{
    color: var(--mainBrown);
}

section .home-solution p
{
    font-size: 16px;
}

.home-solution:hover
{
    background-color: var(--mainWhite);
    padding-top: 8px;
    border: 1px solid var(--mainBrown);
    margin-bottom:5px;
}

.modal-backdrop
{
    opacity:1!important;
}

.steps
{
    font-size: 1.4rem;
    color: var(--mainBrown)!important;
}

.glossary
{
    font-size: 2.5rem;
    font-weight: bold;
    color: var(--mainBrown)!important;
}

#glossarytab
{
    background-color: rgb(216, 214, 214);
    width: 100%;
}

#glossarytab.sticktop
{
    position: fixed;
    top:100px;
    background-color: rgb(216, 214, 214);
    width: 100%;
    z-index: 1000;
    padding-bottom: 5px;
}

.glossary-navlinks
{
    font-size: 1.2rem;
    font-weight: 600;
    color: #000;
    padding: 10px;
}


.glossary-navlinks a
{
    color: #000;
    text-decoration: none!important;
}

.glossary-navlinks a:hover
{
    color: var(--mainWhite);
    background-color: var(--mainBrown);
    padding: 7px;
    border-radius: 50%;
    border: 1px solid var(--mainBrown);
}

.glossary-navlinks-grey 
{
    font-size: 1.2rem;
    font-weight: 600;
    padding: 10px;
    color: var(--mainGrey);
    text-decoration: none!important;
}

.glossary-navlinks-grey a
{
    color: grey;
    text-decoration: none!important;
}


.glossary-link
{
    font-size: 1.3rem;
    color: #000;
    text-decoration: none!important;
    display: block;
}

.glossary-link:hover
{
    color:var(--mainBrown);
}


.subtitle
{
    font-size: 1.4rem;
    color: #262C6D!important;
}


.resource-link
{
    font-size: 1.2rem;
    color: var(--mainWhite)!important;    
    background-color:#282B50!important;;
    border: 2px solid #282B50!important;
    padding: 5px 8px;
    text-decoration: none;
    border-radius: 10px;
}

.resource-link:hover
{
    text-decoration: none;
    color: var(--mainBrown)!important;    
}

/*--------------------------------
pricing section
---------------------------------*/
.pricing .card{
  padding-top: 30px;
  padding-bottom: 30px;
}

.pricing h2{
  color:#c9000c;
  font-size: 2.1rem;
  font-weight: 700;
}

.pricing p{
  font-size: 1.1rem;
  float: none;
  text-align: center;
}

.pricing .card h4{
  color: #071E55;
  font-weight: 700;
}

.pricing .card .cost{
  color: #071E55;
  font-weight: 500;
  font-size: 4.5rem;
  margin-bottom: 0!important;
  padding-bottom: 0!important;
}

.pricing .card .duration{
  margin-top: 40px!important;
  margin-bottom: 15px!important;
}

.pricing ul{
    list-style: none!important;
}

.pricing ul li {
  margin-bottom: 10px;
}

.pricing ul li .svg-inline--fa{
  font-size: 20px;
  color: #071E55;
}

.trial-btn {
  margin-left: 20%;
  padding: 10px 20px;
  color: #c9000c;
  border: 1px solid #c9000c;
  background: #fff;
  font-weight: 700;
  font-size: 1.2rem;
  margin-top: 20px;
  border-radius: 10px;
  text-decoration: none!important;
}

.trial-btn:hover{
  color: #fff;
  border: 1px solid #c9000c;
  background:#c9000c;
}

.trial-btn-popular {
  margin-left: 20%;
  padding: 10px 20px;
  color: #fff!important;
  border: 1px solid #c9000c;
  background: #c9000c;
  font-weight: 700;
  font-size: 1.2rem;
  margin-top: 20px;
  border-radius: 10px;
}

.trial-btn-popular:hover{
  color: #c9000c!important;
  border: 1px solid #c9000c;;
  background: #fff;
}

/* FAQ Styles*/

  .answer {
    height: 0px;
    overflow: hidden;
    transition: height 0.5s ease-in-out;
    border-radius: 0px;
    padding: 0;
    background: rgb(242, 242, 242);
    border-radius: 10px;
  }

  .toggle-answer {
      cursor: pointer;
      display: inline-block;
      font-weight: bold;
      color: rgb(201, 0, 0);
      float: right;
      background: blanchedalmond;
      padding: 1px 5px 1px 4px;
      border-radius: 20px;
  }

  .opened {
      height: auto;
      padding: 2px;
  }