.top-filter{text-align:center;margin-bottom:40px;}
select{padding:8px 12px;min-width:220px;}
.category-section{display:none;}
.category-section.active{display:block;}
.category-section h2{font-size:28px;color:#282828;font-weight:bold;padding-bottom:40px;}
.cards{display:flex;justify-content:center;gap:20px;flex-wrap:wrap;}
.card{width:300px;
/* border:1px solid #d7c7ff; */
padding:30px;box-sizing:border-box;}
.card {border-radius: 15px;background: rgb(252, 253, 253);box-shadow: 0px 0px 18px 0px rgba(47, 98, 140, 0.14);}
.card h3{font-size:18px;margin-bottom:15px;}
.card ul{min-height:120px;}
.card ul li{padding-left:18px;position:relative;font-size:14px;color:#4a4545;line-height:22px;}
.price{font-size:46px;color:#fc3838;text-align:center;margin:15px 0 40px;font-weight:600;}
.btn{display:block;width:100%;border:none;padding:12px;margin-top:10px;border-radius:5px;cursor:pointer;}
.cart-btn{background:#e9ecef;}
.buy-btn{background:#ffd400;}
.top-filter select {border: 1px solid rgb(109, 117, 120);border-radius: 10px;background: rgb(255, 255, 255);box-shadow: 0px 0px 18px 0px rgba(47, 98, 140, 0.14);width: 260px;height: 38px;margin-left:10px;}
.offer-bg {border-radius: 1px; background-image: -moz-linear-gradient( 90deg, rgb(253,228,225) 0%, rgb(242,200,214) 100%);background-image: -webkit-linear-gradient( 90deg, rgb(253,228,225) 0%, rgb(242,200,214) 100%);background-image: -ms-linear-gradient( 90deg, rgb(253,228,225) 0%, rgb(242,200,214) 100%);height: 366px;text-align:center;padding-top:50px;margin-top: 60px;}
.offer-bg h3 {background: rgb(234, 180, 194);width: 272px;height: 36px; margin:0 auto;line-height: 36px;border-radius: 35px;margin-bottom:30px;color:#211f1f;font-size:17px;font-weight:bold;}
.offer-bg h1{font-size:54px;color:#211f1f;font-weight:bold;padding-bottom:20px;}
.offer-bg h1 span{color:#ef2222;}
.offer-bg p{font-size:18px;color:#3e3939;font-weight:600;}
.offer-bg a {background-image: -moz-linear-gradient( 90deg, rgb(182,50,95) 0%, rgb(252,120,107) 100%);background-image: -webkit-linear-gradient( 90deg, rgb(182,50,95) 0%, rgb(252,120,107) 100%);background-image: -ms-linear-gradient( 90deg, rgb(182,50,95) 0%, rgb(252,120,107) 100%);width: 170px;height: 44px;display: inline-block;line-height:44px;font-size:17px;color:#fff;font-weight:600;border-radius: 40px;margin-top: 40px;}
.top-filter {border-radius: 1px;  height: 100px;line-height: 100px;background:url(/template/default/images/offers_select_bg.png),rgb(247, 246, 253);background-repeat: no-repeat;background-size: contain;}
.note {border-radius: 1px;background: rgb(246, 250, 253);height: 60px;line-height:60px;text-align: center;margin-top:80px;}
.note p{font-size:16px;color:#282828;}
.note p a{color:#2c81f5;}
.lets_talk {border-radius: 1px;background-image: -moz-linear-gradient( 90deg, rgb(253,228,225) 0%, rgb(242,200,214) 100%); background-image: -webkit-linear-gradient( 90deg, rgb(253,228,225) 0%, rgb(242,200,214) 100%);background-image: -ms-linear-gradient( 90deg, rgb(253,228,225) 0%, rgb(242,200,214) 100%);box-shadow: 0px 0px 18px 0px rgba(47, 98, 140, 0.14);padding: 40px 0px;}
.lets_talk a {background-image: -moz-linear-gradient( 90deg, rgb(252,120,107) 0%, rgb(182,50,95) 100%);background-image: -webkit-linear-gradient( 90deg, rgb(252,120,107) 0%, rgb(182,50,95) 100%);background-image: -ms-linear-gradient( 90deg, rgb(252,120,107) 0%, rgb(182,50,95) 100%);width: 228px;height: 54px;border-radius:40px;display:inline-block;font-size:18px;color:#fff;font-weight:bold;text-align: center;line-height: 54px;}
.lets_talk h4{font-size:42px;color:#000000;font-weight:bold;}
.lets_talk_flex {display: flex;align-items: center;justify-content: space-between;}
.card ul li:before{content: '';background: url(/template/default/images/offers-green-dot.png);background-repeat: no-repeat;width: 6px;height: 6px;display: block;position: absolute;top: 8px;left: 0;}
.cart-btn {border: 1px solid rgb(237, 242, 244);border-radius: 8px;background:#edf2f4;height: 42px;font-size:16px;color:#222222;font-weight:600;padding:0px;}
.buy-btn{border-radius: 8px;background-image: -moz-linear-gradient( 90deg, rgb(233,182,5) 0%, rgba(250,209,38,0.99608) 100%);background-image: -webkit-linear-gradient( 90deg, rgb(233,182,5) 0%, rgba(250,209,38,0.99608) 100%);background-image: -ms-linear-gradient( 90deg, rgb(233,182,5) 0%, rgba(250,209,38,0.99608) 100%);height: 42px; font-size:16px;color:#222222;font-weight:600;padding:0px;}

.recovery-tabs{display:grid;grid-template-columns:repeat(3,1fr);justify-content:center;gap:0;}
.recovery-tab{border: none;background: transparent;padding:0;cursor: pointer;font-size:17px;color:#000000;}
.recovery-tab.active{border-radius: 8px;background-image: -moz-linear-gradient( 90deg, rgb(232,119,174) 0%, rgb(124,115,243) 100%);background-image: -webkit-linear-gradient( 90deg, rgb(232,119,174) 0%, rgb(124,115,243) 100%);background-image: -ms-linear-gradient( 90deg, rgb(232,119,174) 0%, rgb(124,115,243) 100%);box-shadow: 0px 0px 18px 0px rgba(47, 98, 140, 0.14);width: 150px;height: 36px;font-size:17px;color:#fff;font-weight:600;padding: 0;}
.recovery-content{display:none;}
.recovery-content.active{ /* display:block; */ display: flex;flex-wrap: wrap;align-items: center;justify-content: center;gap: 15px;margin: 0 70px;}
.recovery-content .card{width: 250px;padding: 30px 20px;background: linear-gradient(#fff, #fff) padding-box, linear-gradient(0deg, rgb(232, 119, 174) 0%, rgb(124, 115, 243) 100%) border-box;border: 1px solid transparent;}
.recovery-tabs {border-radius: 10px;background: rgb(255, 255, 255);box-shadow: 0px 0px 18px 0px rgba(47, 98, 140, 0.14);width: 470px;height: 44px;margin: 40px auto;background: linear-gradient(#fff, #fff) padding-box, linear-gradient(-90deg, rgb(232, 119, 174) 0%, rgb(124, 115, 243) 100%) border-box;border: 1px solid transparent;border-radius: 12px;padding: 3px 3px;}
.card p{color:#4a4545;font-size:16px;
    /* font-style: italic; */
    padding-bottom: 15px;}
.strike_price{
    /* border: 1px solid rgb(231, 239, 247); */
    border-radius: 11px;
    /* background: rgb(244, 249, 254); */
    width: 60px;height: 24px;text-align: center;font-size: 15px;color: #4a4545;font-weight: 400;line-height: 22px;margin: 0 auto;margin-bottom: 30px;text-decoration: line-through;}

/* #personalTab .strike_price{margin-bottom:15px;
    margin-top: 60px;
} */
#personalTab .card ul{min-height:auto;}

/* #corporateTab .strike_price{margin-bottom:15px;margin-top: 60px;} */
#corporateTab .card ul{min-height:auto;}

/* #technicalTab .strike_price{margin-bottom:15px;margin-top: 20px;} */
#technicalTab .card ul{min-height:auto;    margin-bottom: 25px;}

.priority_support{border: 1px solid rgb(116, 209, 151);border-radius: 9px;background: rgb(224, 254, 234);width: 105px;height: 20px;font-size:11px;color:#2c9854;font-weight:600;text-align: center;line-height: 18px;margin: 0 auto;}

#sharepointOnedriveTeamsSection .card{width: 400px;background: linear-gradient(#fff, #fff) padding-box, linear-gradient(0deg, rgb(232, 119, 174) 0%, rgb(124, 115, 243) 100%) border-box;border: 1px solid transparent;}
#office365Section .card,#imapSection .card,#backupSection .card{background: linear-gradient(#fff, #fff) padding-box, linear-gradient(0deg, rgb(232, 119, 174) 0%, rgb(124, 115, 243) 100%) border-box;border: 1px solid transparent;}
.migration_number{font-size: 16px;color:#4a4545;font-weight: 600;text-align: center;padding-top: 25px;padding-bottom: 40px;display: inline-block;width: 100%;}

.input_number input{width: 80px;height: 31px;padding: 0 10px;}
.input_number{text-align: center;}

#removeduplicateSection .card{
    width: 400px;background: linear-gradient(#fff, #fff) padding-box, linear-gradient(0deg, rgb(232, 119, 174) 0%, rgb(124, 115, 243) 100%) border-box;border: 1px solid transparent;
}

#removeduplicateSection .cards .card:last-child{
  /* background: rgb(254, 249, 249); */
   background:
        linear-gradient(rgb(254, 249, 249), rgb(254, 249, 249)) padding-box,
        linear-gradient(0deg, rgb(232, 119, 174) 0%, rgb(124, 115, 243) 100%) border-box;

    border: 1px solid transparent;
  box-shadow: 0px 0px 18px 0px rgba(47, 98, 140, 0.14);
}

.buy-row{
    text-align: center;
    padding-top: 25px;
    /* padding-bottom: 40px; */
    display: inline-block;
    width: 100%;
}

.buy-row img {
    margin-bottom: 30px;
}

.buy-row label{
    font-size: 24px;
    color: #129af0;font-weight: 600;
}


#gsuiteSection .card{
    width: 440px;background: linear-gradient(#fff, #fff) padding-box, linear-gradient(0deg, rgb(232, 119, 174) 0%, rgb(124, 115, 243) 100%) border-box;border: 1px solid transparent;

}

#windowsrecoverySection .card{
    width: 500px;background: linear-gradient(#fff, #fff) padding-box, linear-gradient(0deg, rgb(232, 119, 174) 0%, rgb(124, 115, 243) 100%) border-box;border: 1px solid transparent;

}




.migration-options1 {
  border-radius: 10px;
  background: rgb(233, 242, 251);
  width: 398px;
  height: 58px;    line-height: 58px;
    margin: 0 auto;
    text-align: center;    margin-top: 30px;    padding: 0 25px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}


#windowsrecoverySection .price span{
    font-size: 18px;color: #384154;line-height: 26px;
}

#windowsrecoverySection .input_number {
    text-align: center;
    font-size: 17px;
    color: #4a4545;
    font-weight: 600;
}

.migration-options1 label{
    font-size: 17px;
    color: #4a4545;
    font-weight: 600;
}


#windowsrecoverySection .cards .card:last-child{
     background:
        linear-gradient(rgb(254, 249, 249), rgb(254, 249, 249)) padding-box,
        linear-gradient(0deg, rgb(232, 119, 174) 0%, rgb(124, 115, 243) 100%) border-box;

    border: 1px solid transparent;
  box-shadow: 0px 0px 18px 0px rgba(47, 98, 140, 0.14);
}

.cards-flex{
    display: flex;align-items: center;
}.cards-flex1 {
    display: flex;
    gap: 15px;
}


.cards-flex2 p{
       background: url(/template/default/images/offer_plus_round_icon.png);
    background-repeat: no-repeat;
    width: 45px;
    height: 45px;
    background-position: center center;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;    margin: 0 30px;
}

#office365Section .cards{
    gap: 0px;
}

#office365Section .card{
    width: 250px;
}


#office365Section .cards-flex3 .card {
  border-radius: 15px;
  background: rgb(254, 249, 249);
  box-shadow: 0px 0px 18px 0px rgba(47, 98, 140, 0.14);
  width: 384px;
   background:
        linear-gradient(rgb(254, 249, 249), rgb(254, 249, 249)) padding-box,
        linear-gradient(0deg, rgb(232, 119, 174) 0%, rgb(124, 115, 243) 100%) border-box;

    border: 1px solid transparent;
}


.calulate_flex2 p {
        background: url(/template/default/images/offer_plus_round_icon.png);
    background-repeat: no-repeat;
    width: 22px;
    height: 22px;
    background-position: center center;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 0;
    background-size: 22px;
}

.calulate_flex{
       display: flex;
    align-items: end;
    justify-content: space-between;
}

#office365Section .cards-flex3 .card{
    padding: 30px 20px;
}
#office365Section .cards{
    align-items: center;
}

.calulate_flex1 .migration_number,
.calulate_flex3 .migration_number{
    padding-bottom: 30px;
}

.calulate_flex2 p img{
        height: 13px;
    width: 13px;
    margin: 13px 0 0 0;
}

#office365Section .cards{
    align-items: center;
}



#backupSection .cards-flex3 .card {
  border-radius: 15px;
  background: rgb(254, 249, 249);
  box-shadow: 0px 0px 18px 0px rgba(47, 98, 140, 0.14);
  width: 384px;
   background:
        linear-gradient(rgb(254, 249, 249), rgb(254, 249, 249)) padding-box,
        linear-gradient(0deg, rgb(232, 119, 174) 0%, rgb(124, 115, 243) 100%) border-box;

    border: 1px solid transparent;
}

#backupSection .cards-flex3 .card{
    padding: 30px 20px;
}
#backupSection .cards{
    align-items: center;
}
#backupSection .cards{
    gap: 0px;
}

#backupSection .card{
    width: 250px;    padding: 30px 20px;
}



#backupSection .calulate_flex1 .migration_number,#backupSection .calulate_flex3 .migration_number {
    padding-bottom: 20px;
}


/* RESPONSIVE DESIGN */
/* RESPONSIVE DESIGN */
/* RESPONSIVE DESIGN */

@media only screen and (max-width:600px){
    
.offer-bg{height: auto; padding-bottom: 30px;}    
.offer-bg h1, .office365Section{width: 95% !important; margin: 0 auto !important;}
.offer-bg p{font-size: 16px;}    
.cards-flex1{width: 100%;}
}

.product-tabs{
    display:flex;
    justify-content:center;
    gap:10px;
    /* margin:40px 0; */
    padding: 30px 0;
    flex-wrap:wrap;
    background-color: #f5f3f3;
}

.product-tab{
    border:none;
    background:#fff;
    padding:14px 28px;
    border-radius:30px;
    cursor:pointer;
    font-size:16px;
    font-weight:500;
    transition:.3s;
}
.product-tab{
    color: #000;
    border: 1px solid rgb(232, 119, 174);

}
.product-tab.active{
    /* background: #0078d4;
    color: #ffffff; */
    /* background:  rgb(232, 119, 174); */
    background-image: -webkit-linear-gradient(90deg, rgb(232, 119, 174) 0%, rgb(124, 115, 243) 100%);
    color: #fff;
    /* border: 1px solid transparent; */
}

.offer-bg{
    display: flex;
    justify-content: center;
    gap: 90px;
}
.first p{
    font-size: 18px;
    line-height: 1.5;
}
.first ul{
    display: flex;
        gap: 25px;
    padding: 23px 0;
}
.first ul li {
    position: relative;
    list-style: none;
    padding-left: 25px;
}
.second{
    padding: 25px 0 0;
}

.first ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    
    width: 11px;
    height: 11px;

    background-image: url('/template/default/images/offer-dot.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;

    display: block;
}
.category-section{
    display:none;
}

.category-section.active{
    display:block;
}
.card-container{
    display: flex;
    flex-wrap: wrap;
    /* gap: 20px; */
    justify-content: center;
    padding: 30px 60px 0;
    gap: 35px;

}
.card{
    background: linear-gradient(#fff, #fff) padding-box, linear-gradient(0deg, rgb(232, 119, 174) 0%, rgb(124, 115, 243) 100%) border-box;
    border: 1px solid transparent;
}
.card ul {
    min-height: 20px;

}
.price {
    margin: 0px 0 10px;
}
.strike_price {
    margin: 0;
    font-size: 28px;
    /* background: #daeafb; */
    text-decoration: none;
    font-style: oblique;
}
.category-section .card-heading{
    padding: 35px 0 20px;
    font-size: 28px;
    text-align: center;
}
.price-offer{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 0;
}
.strike_price .doller{
    font-size: 15px;
    
}
.strike_price .nums{
    text-decoration: line-through;
    text-decoration-color: #ff4d4f;
    text-decoration-thickness: 2px;
}
.price .doller-1{
    font-size: 30px;
}

.recovery-content{
    display:none;
    grid-template-columns:repeat(4,1fr);
    gap:24px;
}

.recovery-content.active{
    display:grid;
}


.mailboxes{
    font-weight: 600;
	font-weight: 600;
    text-align: center;
    padding: 13px 0 0;
}

#migrationSection .cards:nth-child(-n+3) .price-offer, 
#duplicateSection .cards:nth-child(-n+3) .price-offer,
#backupSection .cards:nth-child(-n+3) .price-offer  {
    gap: 30px;  
}
.note p{
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
}
.note img{
    width: 400px;
}
.buy-btn:hover {
    background-image: -webkit-linear-gradient(90deg,rgba(250, 209, 38, 0.99608)  0%, rgb(233, 182, 5) 100%);
}
.lets_talk a:hover {
    background-image: -webkit-linear-gradient(90deg, rgb(182, 50, 95) 0%,  rgb(252, 120, 107) 100%);
}
@media(max-width:1200px){
    .recovery-content{
        grid-template-columns:repeat(3,1fr);
    }
}

@media(max-width:768px){
    .recovery-content{
        grid-template-columns:repeat(2,1fr);
    }
}

@media(max-width:576px){
    .recovery-content{
        grid-template-columns:1fr;
    }
}


.category-section{
    display:none;
}

.category-section.active{
    display:block;
}

.recovery-content{
    display:none;
}

.recovery-content.active{
    display:flex;
    flex-wrap:wrap;
    gap:20px;
}

#migrationSection .card, #duplicateSection .card {
    width: 250px;
    padding: 30px 20px;
}
@media(max-width:1280px){
    .card-container{
      padding: 30px 30px 0;
    }
}
@media(max-width:1024px){
    .card-container{
      padding: 30px 10px 0;
      gap: 10px;
    }
}
@media(max-width:980px){
    .card-container{
      gap: 30px;
    }
    .second{
        display: none;
    }
}