/* CSS Document */

@font-face { font-family: 'Yekan'; src: url('//cdn.farsiblog.com/temp/templates/2theme/32/fonts/Yekan.eot?#') format('eot'),  url('//cdn.farsiblog.com/temp/templates/2theme/32/fonts/Yekan.woff') format('woff'),  url('//cdn.farsiblog.com/temp/templates/2theme/32/fonts/Yekan.ttf') format('truetype'),  url('//cdn.farsiblog.com/temp/templates/2theme/32/fonts/Yekan.svg') format('svg'); }
* { box-sizing: border-box; }
html { }
body { direction: rtl; margin: 0px; margin-top: 10px; padding: 0px; font-family: 'Yekan'; font-size: 12pt; line-height: 1.8em; background-color: #eee; color: #333; }
h1, h2, h3, h4, h5, h6 { font-family: Yekan; font-weight: normal; line-height: 2em; margin: 0px; font-size:large;}
a { text-decoration: none; }
a:link, a:visited { color: #ff7819; }
a:hover { color: #333; transition: all ease 0.3s; }
img { max-width: 100%; height: auto; }
/***********************************    header & title   ******************************************/
.header { margin-bottom: 20px; background: url(//cdn.farsiblog.com/temp/templates/2theme/32/images/header.jpg) top center no-repeat; background-size: cover; border-radius: 6px; min-height: 200px; }
.site-title { padding: 40px 10px 30px 10px; text-align: center; }
.site-title h1 { font-size: 30px; font-weight: normal; background-color: rgba(0,0,0,0.3); display: inline-block; padding: 10px 10px; line-height: 1em; border-radius: 4px; }
.site-title h3 { font-size: 15pt; color: #ffffff; font-family: Yekan;background-color:  rgba(0, 0, 0, 0.3);    border-radius: 4px;}
.site-title a { color: #fff; }
/*****************************************    Navbar     ****************************************/
.topbar { background-color:rgba(255, 120, 25, 1); border-radius: 6px; padding: 7px 5px; margin-bottom: 10px; }
.navi { font-family: Yekan; font-size: 14px; }
.nav > li > a { padding: 3px 7px; }
.navi a { display: inline-block; margin-left: 5px; border-radius: 4px; }
.navi a:link, .navi a:visited { color: #000; background: bisque;}
.navi a:hover { color: #444; }
#homeactive { }
.navbar-default .navbar-toggle { border-color: #000; }
.navbar-default .navbar-toggle:hover, .navbar-default .navbar-toggle:focus { background-color: transparent; border-color: #000; }
.navbar-default .navbar-toggle .icon-bar { background-color: #888888; }
span.resmenu:after { content: '\e0ca'; font-family: General; font-size: 30px; }
/****************************************   ُSearch & Todaytime  ********************************/

.searchbox { }
.searchbox:after { content: ''; clear: both; display: table; }
.searchbox form { float: left; }
.searchbox input[type="text"] { font-family: Tahoma; font-size: 11px; margin-left: 5px; height: 25px; float: right; background: none; margin-right: 5px; color: #000; border: 1px solid #000; border-radius: 20px; padding: 5px; }
.searchbox input[type="submit"] { border: 0px; background-color: #000; font-family: Tahoma; font-size: 11px; padding: 3px 10px 5px 10px; border-radius: 30px; color: #fff; height: 25px; }
.searchbox input[type="submit"]:hover { background-color: #555; color: #fff; }
.todaytime { font-family: Yekan; font-size: 11px; text-align: left; color: #000; }
span.tticon { }
.tticon:before { content: '\e031'; font-family: General; font-size: 30px; display: inline-block; margin-left: 3px; vertical-align: middle; color: #000; }
/********************************************  Posts  ***************************************/
.content { margin-bottom: 10px; }
.messages-box { margin-bottom: 15px; background-color: #fff; border: 1px solid #ccc; border-radius: 4px; }
.messages-text { padding: 10px; text-align: center; }
.post { margin-bottom: 15px; background-color: #fff; border-radius: 4px; }
.post-title { background-color: rgba(255, 120, 25, 1);; padding: 10px 10px; border-radius: 4px 4px 0px 0px; }
.post-title:after { clear: both; display: table; content: ''; }
.post-title h2 { font-size: 16px; display: inline-block; line-height: 1em; }
.post-title h2 a:link, .post-title h2 a:visited { color: #000; }
.post-title h2 a:hover { color: #000; }
.post-body { padding: 15px; }
.post-thumb { overflow: hidden; }
.post-thumb img { margin-bottom: 10px; -ms-transition: all .2s ease-in-out; -webkit-transition: all .2s ease-in-out; transition: all .2s ease-in-out; }
.post-thumb img:hover { -ms-transform: scale(1.04); -webkit-transform: scale(1.04); transform: scale(1.04); }
.post-cnt { line-height: 2em; margin-bottom: 10px;  font-size: large; font-family: 'Yekan'; text-align:justify;}
.post-cnt a { }
.post-cnt a:link, .post-cnt a:visited { }
.post-cnt a:hover { }
.post-cnt img { }
.post-tags { margin-bottom: 10px; }
span.tag { vertical-align: middle; width: 30px; height: 30px; display: inline-block; text-align: center; padding-top: 3px; border-radius: 50%; }
span.tag:before { content: '\e0aa'; font-family: 'General'; font-size: 25px; vertical-align: middle; color: #000; }
.post-tags a { margin-left: 5px; }
.post-tags a:link, .post-tags a:visited { color: #ff7819; }
.post-tags a:hover { color: #000; }
.post-details { margin-bottom: 10px; }
span.postdate { }
span.postdate:before { content: '\e03f'; font-family: 'General'; font-size: 30px; vertical-align: middle; color: #999; display: inline-block; }
span.postviews { display: inline-block; margin-left: 3px; vertical-align: middle; }
span.postviews:before { content: '\e06e'; font-family: 'General'; font-size: 25px; vertical-align: middle; color: #999; margin-right: 5px; display: inline-block; }
.post-info { border-top: 1px solid #eee; font-size: 11px; font-family: Tahoma; border-radius: 0px 0px 4px 4px; }
.post-info a { }
.post-info a:link, .post-info a:visited { color: #666; }
.post-info a:hover { color: #000; }
.post-info ul { margin: 0px; padding: 0px; }
.post-info li { list-style-type: none; list-style-position: inside; display: inline-block; margin-left: 0px; border-left: 1px solid #eee; padding: 5px 7px; }
.post-info li:last-child { float: left; margin-left: 0px; margin-right: 0px; border-left: none; }
.post-info ul:after { content: ''; display: table; clear: both; }
.post-info span { display: inline-block; margin-left: 3px; vertical-align: middle; }
span.postauthor { }
span.postauthor:before { content: '\e170'; font-family: 'General'; font-size: 25px; vertical-align: middle; color: #999; display: inline-block; margin-left: 3px; }
span.postcmnt { }
span.postcmnt:before { content: '\e148'; font-family: 'General'; font-size: 30px; vertical-align: middle; color: #999; display: inline-block; margin-left: 3px; }
span.postmore { }
span.postmore:before { content: '\e013'; font-family: 'General'; font-size: 30px; vertical-align: middle; color: #999; display: inline-block; margin-left: 3px; }
li.postlike { padding: 5px 5px; }
li.postlike a.downlike { }
li.postlike a.uplike { }
li.postlike span.like-down, li.postlike span.like-up { width: auto; }
li.postlike span.down-result, li.postlike span.up-result { width: auto; }
span.like-up { }
span.like-up:before { content: '\e00c'; font-family: 'General'; font-size: 26px; vertical-align: middle; color: #749EF3; display: inline-block; }
span.like-down { }
span.like-down:before { content: '\e014'; font-family: 'General'; font-size: 26px; vertical-align: middle; color: #F41717; display: inline-block; }
span.down-result { vertical-align: middle; }
span.up-result { vertical-align: middle; }
/**************************************************  Pageination  ******************************/
.pagination { padding: 10px; margin-bottom: 20px; text-align: center; font-family: Yekan; font-size: 16px; }
.pagination a { display: inline-block; padding: 5px 10px; margin-left: 5px; margin-right: 5px; border-radius: 5px; }
.pagination a:link, .pagination a:visited { background-color: rgba(255, 120, 25, 1);; color: #000; }
.pagination a:hover { background-color: #000; color: #fff; }
/********************************************* Comments Box **********************************************/
.comment-block { margin-bottom: 10px; }
.comments-cunt-box { margin-bottom: 15px; border: 1px solid #ccc; background-color: #fff; border-radius: 4px; }
.comments-cunt-text { padding: 20px 10px; text-align: center; font-family: Yekan; font-size: 16px; }
.comment-list { margin-bottom: 10px; }
.comment-box { margin-bottom: 10px; border: 1px solid #ccc; background-color: #fff; border-radius: 4px; }
.comment-details { padding: 5px 10px; }
.comment-user { }
span.comment-avatar { float: right; }
.comment-avatar img { width: 40px; height: auto; border-radius: 4px; margin-left: 10px; }
span.comment-sender { font-family: Yekan; font-size: 14px; font-weight: normal; }
.comment-info { padding: 5px; }
a.comment-web { display: inline-block; height: 30px; width: 30px; margin-left: 10px; vertical-align: middle; }
a.comment-web:before { content: '\e0bb'; font-family: 'General'; font-size: 30px; vertical-align: middle; color: rgba(255, 120, 25, 1);; }
a:hover.comment-web:before { content: '\e0bb'; font-family: 'General'; font-size: 30px; vertical-align: middle; color: #000; }
a.comment-email { display: inline-block; height: 35px; width: 35px; margin-left: 10px; vertical-align: middle; }
a.comment-email:before { content: '\e064'; font-family: 'General'; font-size: 35px; vertical-align: middle; color: rgba(255, 120, 25, 1);; }
a:hover.comment-email:before { content: '\e064'; font-family: 'General'; font-size: 35px; vertical-align: middle; color: #000; }
a.comment-date { }
.comment-text { padding: 10px; }
.comment-replay { padding: 10px; border-top: 1px dashed #ccc; }
.comment-replay-date { font-family: Tahoma; font-size: 12px; border-right: 1px solid #ccc; }
.comment-replay-date:before { content: '\e03f'; font-family: 'General'; font-size: 24px; vertical-align: middle; margin-left: 5px; color: #000; }
.comment-replay-name { font-family: Yekan; font-size: 14px; font-weight: normal; }
.comment-replay-name:before { content: '\e107'; font-family: 'General'; font-size: 24px; vertical-align: middle; margin-left: 5px; color: #000; }
/************************************************* Sidebar ***************************************/
.sidebar { }
.menu-block { margin-bottom: 15px; background-color: #fff; border-radius: 4px; border-bottom: 3px solid #ddd }
.menu-title { background-color: rgba(255, 120, 25, 1);; border-radius: 4px 4px 0px 0px; padding: 7px 10px; }
.menu-title h3 { color: #000; font-weight: normal; font-size: 14px; display: inline; line-height: 1em; }
/*********    Menu content    *********/
.menu-cnt { padding: 5px; font-size: 12pt;font-family: 'Yekan';text-align:justify;}
.menu-cnt ul { margin: 0px; padding: 0px; }
.menu-cnt li { list-style-type: none; list-style-position: inside; }
.menu-cnt li a { display: block; padding: 8px 8px; }
.menu-cnt li a:link, .menu-cnt li a:visited { color: #666; }
.menu-cnt li a:hover { color: #000; }
.menu-cnt a:link, .menu-cnt a:visited { color: #D4C609; }
.menu-cnt a:hover { color: #000; }
.menu-cnt img { margin-bottom: 5px; }
/***********   list menu    ***************/
.menu-list { }
.menu-list ul { margin: 0px; padding: 0px; }
.menu-list li { list-style-type: none; list-style-position: inside; border-bottom: 1px solid #eee; }
.menu-list li a { display: block; padding: 5px 8px; }
.menu-list li a:before { content: '\e0ae'; font-family: General; font-size: 12px; margin-left: 5px; vertical-align: middle; }
.menu-list li:last-child { border-bottom: none; }
.menu-list li a:link, .menu-list li a:visited { color: #666; }
.menu-list li a:hover { color: #000; }
.menu-list a:link, .menu-list a:visited { color: #D4C609; }
.menu-list a:hover { color: #000; }
.menu-list img { margin-bottom: 5px; }
/***********   Profile menu box   ****************/
.blogprofile img { max-width: 150px; height: auto; }
/***********   Category Menu box   **************/
.catbox { }
.catbox .menu-cnt li a { display: block; padding: 3px 5px; }
.catbox .menu-cnt ul { margin: 0px; padding: 0px; }
.catbox .menu-cnt li { list-style-type: none; list-style-position: inside; border-bottom: none; }
.catbox .menu-cnt ul li { }
.catbox .menu-cnt ul li ul { }
.catbox .menu-cnt ul li a:before { content: '\e103'; font-family: General; font-size: 20px; margin-left: 7px; vertical-align: middle; }
.catbox .menu-cnt ul li ul a:before { }
.catbox .menu-cnt ul li ul li { margin-right: 20px; }
.catbox .menu-cnt ul li ul li a:before { content: '\e0dc'; font-family: General; font-size: 22px; margin-left: 7px; vertical-align: middle; }
.catbox .menu-cnt li span { margin-right: 2px; vertical-align: middle; }
/*************** Archive menu box ***************/
.archivebox { }
.archivebox .menu-list ul { }
.archivebox .menu-list li { }
.archivebox .menu-list li a { }
.archivebox .menu-list li a:hover { }
.archivebox .menu-list li span { margin-right: 2px; vertical-align: middle; }
.archivebox .menu-list li a:before { }
.archivebox .menu-list li:last-child { border-bottom: none; }
/*************** Last COMMENT menu box ***************/
.lastcmnt { }
.lastcmnt .menu-list ul { }
.lastcmnt .menu-list li { }
.lastcmnt .menu-list li a { }
.lastcmnt .menu-list li a:hover { }
.lastcmnt .menu-list li span { margin-right: 2px; vertical-align: middle; }
.lastcmnt .menu-list li a:before { }
.lastcmnt .menu-list li:last-child { border-bottom: none; }
/*************** Author menu box ***************/
.authorbox { }
.authorbox .menu-list ul { }
.authorbox .menu-list li { }
.authorbox .menu-list li a { }
.authorbox .menu-list li a:hover { }
.authorbox .menu-list li span { margin-right: 2px; vertical-align: middle; }
.authorbox .menu-list li a:before { }
.authorbox .menu-list li:last-child { border-bottom: none; }
/*************** OUTE Links box ***************/
.linkbox { }
.linkbox .menu-list ul { }
.linkbox .menu-list li { }
.linkbox .menu-list li a { }
.linkbox .menu-list li a:hover { }
.linkbox .menu-list li span { margin-right: 2px; vertical-align: middle; }
.linkbox .menu-list li a:before { }
.linkbox .menu-list li:last-child { border-bottom: none; }
/***************  Tags Menu Box    ***********/
.tagsbox { }
.tagsbox .menu-cnt ul { text-align: center; }
.tagsbox .menu-cnt li { display: inline; border-bottom: none; }
.tagsbox .menu-cnt li a { display: inline-block; padding: 3px 7px; background: rgba(255, 120, 25, 1);; margin: 0px 3px 5px 2px; border-radius: 4px; color: #000; }
.tagsbox .menu-cnt li a:hover { background: #000; color: #fff; }
.tagsbox .menu-cnt li a:before { content: none; }
/*********** SOCIAL  menu box  ****************/
.socialbox { }
.socialbox .menu-cnt ul { text-align: center; }
.socialbox .menu-cnt li { display: inline-block; border: none; margin: 0px 0px 5px 3px; }
.socialbox .menu-cnt li a { text-align: center; background-color: #fff; color: #000; padding: 0px; font-size: 30px; width: 30px; height: 30px; line-height: 1em; margin: 0px; border: 1px solid #000; display: inline-block; }
.socialbox .menu-cnt li a:hover { background-color: #000; color: #fff; }
.socialbox .menu-cnt li a:before { margin: 0px; }
#social-rss:before { content: '\e11a'; font-family: General; }
#social-facebook:before { content: '\e06f'; font-family: General; }
#social-instagram:before { content: '\e0a3'; font-family: General; }
#social-telegram:before { content: '\e054'; font-family: General; }
#social-twitter:before { content: '\e162'; font-family: General; }
#social-google:before { content: '\e093'; font-family: General; }
#social-linkedin:before { content: '\e0bd'; font-family: General; }
#social-youtube:before { content: '\e18e'; font-family: General; }
#social-vimeo:before { content: '\e177'; font-family: General; }
#social-pinterest:before { content: '\e0ee'; font-family: General; }
#social-flickr:before { content: '\e083'; font-family: General; }
#social-yahoo:before { content: '\e188'; font-family: General; }
/******************* Poll ********************/
.poll { }
.poll .menu-cnt { }
.poll .menu-cnt ul { margin: 0px; padding: 0px; }
.poll .menu-cnt li { margin-bottom: 5px; padding: 5px 10px; }
.poll-question { font-weight: bold; border-bottom: 1px solid #999; }
.poll-answer { border-bottom: 1px dashed #ccc; }
li.poll-send { text-align: center; }
.poll-send input[type="submit"] { border: 1px solid #ccc; background-color: #fff; font-family: Tahoma; font-size: 11px; padding: 5px 10px; border-radius: 30px; }
.poll-send input[type="submit"]:hover { border: 1px solid #000; background-color: #666; color: #fff; font-family: Tahoma; font-size: 11px; padding: 5px 10px; border-radius: 30px; }
/*************  Stats Menu box  ****************/
.blogstats { }
.blogstats .menu-cnt li span { float: left; }
.blogstats .menu-cnt li { padding: 5px 10px; border-bottom: 1px dashed #ccc; }
.blogstats .menu-cnt li:last-child { border-bottom: none; }
/*******************  FOLOWERS menu box ***********/

.followers { }
.followers .menu-cnt ul { text-align: center; }
.followers .menu-cnt li { display: inline-block; width: 50px; height: 50px; border-bottom: none; }
.followers .menu-cnt li a { padding: 0px; }
.followers .menu-cnt li a:before { content: none; }
.followers .menu-cnt li img { width: 50px; height: 50px; border-radius: 4px; border: 1px solid #ccc; }
span.followers-cunt { border-radius: 30px; background-color: rgba(255, 120, 25, 1);; color: #fff; float: left; font-size: 12px; font-weight: normal; padding: 5px; line-height: 1.5em; margin: -2px 10px 5px 0px; }
a.followers-plus { font-family: Yekan; font-size: 16px; font-weight: normal; display: block; margin: 10px auto; padding: 7px 10px; background-color: #f7eb47; color: #fff; border-radius: 4px; }
a:link.followers-plus, a:visited.followers-plus { background-color: rgba(255, 120, 25, 1);; color: #fff; border-bottom: 3px solid #D4C609; }
a:hover.followers-plus { background-color: #000; color: #fff; border-bottom: 3px solid #666; }
.followers-plus span { font-size: 30px; font-weight: bold; vertical-align: middle; }
/****************************************  Footer  **************************************/
.btmbar { background-color: rgba(255, 120, 25, 1);; margin-bottom: 20px; border-radius: 8px; }
.footer { color: #000; }
.copyright { padding: 5px; font-family: Yekan; font-size: 16px; }
.copyright a:link, .copyright a:visited { color: #000; }
.copyright a:hover { color: #555; }
a.fblogo { display: inline-block; width: 57px; height: 50px; background: url(//cdn.farsiblog.com/temp/templates/2theme/32/images/logo_farsiblog.png) center center no-repeat; vertical-align: middle; margin-left: 10px; }
.dashboard { text-align: left; }
.dashboard ul { }
.dashboard li { display: inline-block; border: none; margin: 0px 0px 5px 3px; }
.dashboard li a { display: inline-block; text-align: center; color: #000; font-size: 28px; width: 35px; height: 35px; line-height: 1em; margin: 0px; border: 1px solid #000; padding: 0px; border-radius: 50%; }
.dashboard li a:hover { background-color: #000; color: rgba(255, 120, 25, 1);; border: 1px solid #000; }
.dashboard li a:before { text-align: center; margin: 0px; line-height: 1em; }
#farsiblog-ico:before { content: '\e0e6'; font-family: General; }
#uploadcenter-ico:before { content: '\e16d'; font-family: General; }
#cartcharg-ico:before { content: '\e04e'; font-family: General; }
#datetime-ico:before { content: '\e030'; font-family: General; }
#videoshare-ico:before { content: '\e077'; font-family: General; }
#blogtemp-ico:before { content: '\e044'; font-family: General; }


.menu-cnt span, .menu-list span { display: inline-block;}
.menu-list a:before, .menu-cnt a:before {display: inline-block;}

/*
Responsive
*/
@media (max-width: 768px) {
.todaytime { margin-bottom: 10px; }
.searchbox { margin-bottom: 10px; }
.post-info li { width: 49%; border-bottom: 1px solid #eee; }
.post-info li:nth-child(even) { border-left: none; }
#cmtblock { float: none; margin-right: 0px; border-bottom: none; }
.copyright { text-align: center; }
.dashboard { text-align: center; }
}

@media (max-width: 992px) {
.todaytime { margin-bottom: 10px; }
.searchbox { margin-bottom: 10px; }
}


	
/*faq
*/
*{
direction:RTL;
}
.main_faq_section{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 100%;
    height: auto;
    /* padding: 60px; */
    min-height: 200px;
    overflow: hidden;
}
.faq_content{
    display: block;
    width: 96%;
    min-height: 150px;
    height: auto;
    position: relative;
}
input {
    position: absolute;
    opacity: 0;
    z-index: -1;
}
.accordion-wrapper {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 4px -2px rgba(0, 0, 0, 0.5);
    width: 100%;
    margin:0 auto;
}
.accordion {
    width: 100%;
    color: white;
    overflow: hidden;
    margin-bottom: 10px;
}
.accordion:last-child{
    margin-bottom: 0;
}
.accordion-label {
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
    padding: 16px;
    background: linear-gradient(0deg, #ff7819 0%, #fdc058 100%);
    font-weight: bold;
    cursor: pointer;
    font-size: 16px;
    border-radius: 5px;
}
.accordion-label:hover {
    background: linear-gradient(0deg, #fdc058 0%, #ff7819  100%);
}
.accordion-label::after {
    content: ">";
    width: 20px;
    height: 20px;
    font-size:20px;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}
.accordion-content {
    max-height: 0;
    padding: 0 16px;
    color: rgba(4,57,94,1);
    background: white;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
}
.accordion-content p{
    margin: 0;
    color: rgba(4,57,94,.7);
    font-size: 18px;
}
input:checked + .accordion-label {
    background: linear-gradient(0deg, #ff7819 0%, #fdc058 100%);
}
input:checked + .accordion-label::after {
transform-origin: right center;
transform-box: fill-box;
    -webkit-transform:translate(-25px, 7px) rotateZ(-90deg);
    transform:translate(-25px, 7px) rotateZ(-90deg);
}
input:checked ~ .accordion-content {
    max-height: 100vh;
    padding: 16px;
}

.box-faq{
    background: linear-gradient(0deg, rgba(225, 99, 236, 1) 0%, rgba(77, 135, 147, 1) 100%);
    border: 1px solid #ddd;
    border-bottom: 2px solid #bbb;
    border-top: 1px solid #ddd;
    box-shadow: rgb(50 50 93 / 25%) 0 0 8px -23px, rgb(0 0 0 / 30%) 0 10px 0 -30px, rgb(10 37 64 / 35%) 0 -2px 6px 0 inset;
    border-radius: 6px;
    padding: 10px;
    font-size: 18px;
    text-align: center;
    color: #ffffff;
    margin-bottom: 20px;
}
  .sec-faq{
        border: 1px solid #ddd;
        border-bottom: 2px solid #bbb;
        border-top: 1px solid #ddd;
        box-shadow: rgb(50 50 93 / 25%) 0 0 8px -23px, rgb(0 0 0 / 30%) 0 10px 0 -30px, rgb(10 37 64 / 35%) 0 -2px 6px 0 inset;
        border-radius: 6px;
        backdrop-filter: blur(10px);
        overflow-x: auto;
        padding: 20px;
        width: fit-content;
        font-size: 18px;
        text-align: center;
        margin: auto;
        min-height: 100px;
        height: fit-content;
        line-height: 50px;
  }

/*
important border
*/
.tip {
    background: linear-gradient(0deg, #e163ec 0, #4d8793 100%);
    border: 1px solid #ddd;
    border-bottom: 2px solid #bbb;
    border-top: 1px solid #ddd;
    box-shadow: rgb(50 50 93 / 25%) 0 0 8px -23px, rgb(0 0 0 / 30%) 0 10px 0 -30px, rgb(10 37 64 / 35%) 0 -2px 6px 0 inset;
    border-radius: 6px;
    padding: 10px;
    font-size: 18px;
    text-align: center;
    color: #fff;
    margin-bottom: 20px;
}


.btn1 {
  --color: rgba(255, 120, 25, 1);
  padding: 0.8em 1.7em;
  background-color: transparent;
  border-radius: .3em;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: .5s;
  font-weight: 800;
  font-size: 17px;
  border: 2px solid;
  font-family: inherit;
  text-transform: uppercase;
  color: var(--color);
  z-index: 1;
}

.btn1::before, .btn1::after {
  content: '';
  display: block;
  width: 50px;
  height: 50px;
  transform: translate(-50%, -50%);
  position: absolute;
  border-radius: 50%;
  z-index: -1;
  background-color: var(--color);
  transition: 1s ease;
}

.btn1::before {
  top: -1em;
  left: -1em;
}

.btn1::after {
  left: calc(100% + 1em);
  top: calc(100% + 1em);
}

.btn1:hover::before, .btn1:hover::after {
  height: 410px;
  width: 410px;
}

.btn1:hover {
  color: rgb(10, 25, 30);
  color: #fff;
}

.btn1:active {
  filter: brightness(.8);
}