@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Rufina:wght@400;700&display=swap');

:root { 
  --default-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
  --background-color:#f2f2f2; /* Background color for the entire website, including individual sections */
  --default-color:#212529; /* Default color used for the majority of the text content across the entire website */
  --header-bg-color:#acf2c4;
  --footer-bg-color:#004751;
  --copyright-bg-color:#00D17D;
  --burger-color:#0e262e;
  --header-color:#fcefd9;
  --heading-color:#2d465e; /* Color for headings, subheadings and title throughout the website */
  --accent-color:#2986cc; /* Accent color that represents your brand on the website. It's used for buttons, links, and other elements that need to stand out */
  --surface-color:#ffffff; /* The surface color is used as a background of boxed elements within sections, such as cards, icon boxes, or other elements that require a visual separation from the global background. */
  --contrast-color:#ffffff; /* Contrast color for text, ensuring readability against backgrounds of accent, heading, or default colors. */
  --heading-font:"Montserrat",  sans-serif;
  
  --nav-font:"Raleway",  sans-serif;
  --nav-color:#000000;  /* The default color of the main navmenu links */
  --nav-hover-color:#2986cc; /* Applied to main navmenu links when they are hovered over or active */
  --nav-mobile-background-color:#ffffff; /* Used as the background color for mobile navigation menu */
  --nav-dropdown-background-color:#ffffff; /* Used as the background color for dropdown items that appear when hovering over primary navigation items */
  --nav-dropdown-color:#212529; /* Used for navigation links of the dropdown items in the navigation menu. */
  --nav-dropdown-hover-color:#2986cc; /* Similar to --nav-hover-color, this color is applied to dropdown navigation links when they are hovered over. */
}


body {font-family:var(--default-font),sans-serif;background:var(--background-color);color:var(--default-color;)}
a,button {transition:.54s ease-in-out;-moz-transition:.54s ease-in-out;-o-transition:.54s ease-in-out;-webkit-transition:.54s ease-in-out;}
header{z-index:10000;position:relative;height:70px;}
footer{background:var(--footer-bg-color);margin:0;font-size:14px;color:#999999;}

button:focus{outline:none;}a{text-decoration:none;}img {max-width:100%;height:auto;}.p0{padding:0;}.m0{margin:0;}

section.top-slider,.cats-wrapper,.genshin,.sects-wrapper,.sects-wrapper{padding-bottom:10px;}
pre{margin:0;}

.btn-orange{background:#f04e23;background:linear-gradient(90deg,#f04e23 0,#f04e23 10%,#f26322 30%,#f6871f 77%,#f7941d 100%);color:#fff;font-size:16px;font-weight:700;padding:12px 15px;border-radius:24px;-webkit-border-radius:24px;-moz-border-radius:24px;-ms-border-radius:24px;-o-border-radius:24px;border:none}
.btn-orange:hover,.btn-orange:focus-visible {color:#fff;}
.rcbgwhite{border-radius:5px;background:#fff;}

/*--------------------------------------------------------------
# header
--------------------------------------------------------------*/
.top-stripe{background:var(--header-bg-color);padding:15px 0;transition:.54s ease-in-out;-moz-transition:.54s ease-in-out;-o-transition:.54s ease-in-out;-webkit-transition:.54s ease-in-out;}
.burger {float:left;font-size:28px;margin:0px 30px 0 0;line-height:36px;color:var(--burger-color)} 
.pointer {cursor:pointer;}
.logo {float:left;max-width:138px;}

.search-wrapper{width:500px;float:left;margin:0 0 0 4vw;}
.search-wrapper form{background:#fff;border-radius: 4px;}
form.search input[type=text] {background:none;padding:12px 8px;font-size:14px;float:left;width:calc(100% - 42px);line-height:20px;border:none;}
form.search button {background:none;float:left;width:42px;padding:10px 8px;color:#666666;font-size:24px;border: none;border-left:none;cursor:pointer;line-height:20px;}
form.search button i{transition: 0.3s;-webkit-transition: 0.3s;-moz-transition: 0.3s;-ms-transition: 0.3s;}
form.search button:hover i {transform:scale(1.2);-moz-transform:scale(1.2);-ms-transform: scale(1.2);-o-transform: scale(1.2);-webkit-transform:scale(1.2);}
form.search::after {content:"";clear:both;display:table;}

.head-right{font-size:14px;text-align:right;float:right;padding:8px 0;}
.head-right ul{list-style-type:none;margin:0;padding:0;}
.head-right ul li{display:inline-block;padding:0 10px 0 0;margin:0 10px 0 0;position:relative;}
.head-right > ul > li:after{background:#555555;content:"";position:absolute;width:1px;top:5px;bottom:5px;right:0;}
.head-right > ul > li:last-child:after{display:none;}
.head-right ul li:last-child{padding-right:0;}
.head-right ul li a{ color:#555555;line-height:24px;display:inline-block;}
.head-right > ul > li > .dropdown-toggle:after{display:none;}
.head-right ul li a:hover{text-decoration:none;}
.head-right ul li .icon{font-size:24px;float:left;padding:0 5px 0 0;}
.head-right > ul > li > ul.dropdown-menu{box-shadow:0 0 10px hsla(0,0%,80%,.77);border:1px solid #ededed;}
.head-right > ul > li > ul.dropdown-menu:before{content:"";position:absolute;right:24px;width:0;height:0;border-width:9px;border-style:solid;border-color:transparent transparent #fff;top:-18px;}
.head-right .dropdown-menu li{display:block;margin:0;padding:0 15px;border:none;}
.head-right .dropdown-menu li:last-child{padding:0 15px;}
.head-right .dropdown-menu li a{background:none;border-bottom:1px solid #ededed;position:relative;transition:all .3s ease 0s;-moz-transition:all .3s ease 0s;-o-transition:all .3s ease 0s;-webkit-transition:all .3s ease 0s;text-align:right; padding:0;line-height:45px;font-size:14px;color:#333;}
.main-head{margin:20px 0;text-align:center;}
.head-right .dropdown-menu > li > a:after {content:"";display:block;width:0;height:1px;transition:all .3s ease 0s;-moz-transition:all .3s ease 0s;-o-transition:all .3s ease 0s;-webkit-transition:all .3s ease 0s;position:absolute;bottom:-1px;left:0;}
.head-right .dropdown-menu > li > a:hover:after, .head-right .dropdown-menu > li.active > a:after{background:#de247f;width:100%;}
.head-right .dropdown-menu li a:hover, .head-right .dropdown-menu li.active a{color:#de247f;}

/*--------------------------------------------------------------
# Left Sidebar Menu
--------------------------------------------------------------*/
#sidenav{background-color:#fff;max-height:100vh;height:100vh;max-width:70vw;min-width:300px;overflow-x:hidden;overflow-y:auto;transition:.3s ease-in-out;transform:translate(-150%,0);-webkit-transform:translate(-150%,0);-ms-transform:translate(-150%,0);z-index:10001;left:0;top:0;position:fixed;padding:15px 0}
#sidenav.active{transition:.3s ease-in-out;transform:translate(0,0);-webkit-transform:translate(0,0);-ms-transform:translate(0,0);box-shadow:0 4px 6px rgba(0,0,0,.4)}
.navhead{padding:0 15px;display:flex;}
#overlay{background-color:rgba(0,0,0,.5);width:100vw;height:100vh;display:none;animation:5s fade;-webkit-animation:.5s fade;-moz-animation:.5s fade;-o-animation:.5s fade;z-index:10001;left:0;top:0;position:fixed}
#overlay.active {display:block;}

@keyframes fade {0% {opacity:0;}100% {opacity:1;}}
@-moz-keyframes fade {0% {opacity:0;}100% {opacity:1;}}
@-webkit-keyframes fade {0% {opacity:0;}100% {opacity:1;}}
@-o-keyframes fade {0% {opacity:0;}100% {opacity:1;}}

.close{width:23px;height:23px;position:relative;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;-ms-grid-row-align:center;align-items:center;display:-webkit-box;display:-ms-flexbox;display:flex}
.navhead .close.right{order:2;margin-left: auto;}
.cross{background-color:#aaa;position:absolute;height:23px;width:2px;border-radius:3px}
.cross.left {transform:rotate(45deg);float:left;}
.cross.right {transform:rotate(-45deg);float:right;}
.sidenav-logo{max-width:150px;margin:0 0 15px;}
.ham-menu-head{font-size:18px;color:#000;text-transform:uppercase;border-bottom:1px solid #d6d8da;padding:0 15px 5px;}
ul.list-reset{margin:0 0 15px;padding:0;list-style-type:none;}
ul.list-reset li{overflow:hidden;border-bottom:1px solid #d6d8da;}
ul.list-reset li a{font-size:13px;display:block;padding:5px 15px;color:rgba(0, 0, 0, 0.87);float:left;width:100%;}
ul.list-reset li a:hover, ul.list-reset li.active a{color:#1872ab;text-decoration:none;}
.list-reset > li > a > .menu-icon{ float: left;	width:16px;margin:3px 15px 3px 0;}

/*--------------------------------------------------------------
# footer
--------------------------------------------------------------*/
.footer-top{margin-top:10px;padding:20px 0;}
.footer-title-d{color:#cccccc;font-size:16px;margin:0 0 10px;font-weight:400;}
.foot-menu{ margin: 0; padding: 0; list-style-type: none;}
.foot-menu li a{display: block;position:relative;padding:6px 0 6px 15px;color:#999999;font-size:12px;}
.foot-menu li a:before{position:absolute;content:"\f104";font-family:'FontAwesome';left:0;
	transition:.54s ease-in-out;-moz-transition:.54s ease-in-out;-o-transition:.54s ease-in-out;-webkit-transition:.54s ease-in-out;}
.foot-menu li:hover a:before{left:3px;}
.foot-menu li:hover a:hover, .foot-menu li.active a{color:#fff;text-decoration:none;}

.copyright-wrapper{background:var(--copyright-bg-color);color:#fff;padding:10px 0;text-align:center;}

.go-top{position:fixed;bottom:12px;right:10px;display:none;cursor:pointer;-webkit-font-smoothing:antialiased;z-index:10000}
.go-top:after{background:#ACF2C4;font-family:FontAwesome;content:"\f106";color:#fff;font-size:24px;border-radius:50%;width:36px;height:36px;line-height:34px;display:block;text-align:center}
.go-top:hover{transition:.4s linear;transform:scale(1.1)}

/*--------------------------------------------------------------
# Breadcrumbs
--------------------------------------------------------------*/
.breadcrumb{background:none;font-size:14px;padding:15px 15px;margin:0;}
.breadcrumb li a{color:#999999;}
.breadcrumb li a:hover{text-decoration:none;color:#424242;}
.breadcrumb li.active{color:#424242;}
.breadcrumb-item + .breadcrumb-item:before{color:#999999;}

/*--------------------------------------------------------------
# Main Container
--------------------------------------------------------------*/
.main-container{min-height:calc(100vh - 308px);}
.genshin {margin-bottom:10px;text-align:center;background:linear-gradient(90deg, #004751 0%, #FCEAB2 50%, #F1F2F6 100%);}

.bx-wrapper .bx-controls-direction a{ background: #fff; box-shadow: 0 2px 7px rgba(0,0,0,.15); width: 40px; height: 80px; margin-top: -40px; text-indent: 0; font-size: 0;text-align: center;}
.bx-wrapper .bx-prev{ left: 0;border-radius:0 3px 3px 0; }
.bx-wrapper .bx-next{ right: 0; border-radius: 3px 0 0 3px;}
.arrow-outside .bx-wrapper .bx-prev{left: -50px;}
.arrow-outside .bx-wrapper .bx-next{right: -50px;}
.bx-wrapper .bx-prev:after, .bx-wrapper .bx-next:after{font-family:'FontAwesome'; content: "\f053"; color: #3f3f3f; font-size:18px; line-height:80px; }
.bx-wrapper .bx-prev:after{content: "\f053";}
.bx-wrapper .bx-next:after{content: "\f054";}

.top-slider{background:#f4f4f4;padding:0 0 10px;margin-top:10px;}
.top-slider .top-bxslider{background:none;border:none;box-shadow:none;margin:0 auto;margin-bottom:0;}
.red-ribbon{position:absolute;top:0;right:0;background:#da0325;color:#fff;font-size:11px;height:21px;line-height:20px;padding:0 8px; border-radius:0 10px 0 0;}
.red-ribbon:before, .red-ribbon:after{content:"";width:0;height:0;border-style: solid;border-width:6px 4px;position:absolute;}
.red-ribbon:before{border-color:#da0225 #da0225 transparent transparent;top:0;left:-7px;}
.red-ribbon:after{border-color:transparent #da0225 #da0225 transparent;bottom:0;left:-7px;}
.bestimg{width:100%;border-radius:10px 10px 0 0;overflow:hidden;position:relative;}

.custom-container{ max-width: 1600px;}
.cats-wrapper{background: #f4f4f4;padding: 0 0 10px;}
.cats-wrapper .bx-wrapper{background:none;box-shadow:none;border:none;margin: 0 auto;margin-bottom:0;}
.cats-wrapper .slide-item svg{ width: 100%; height: auto;}
.caegory-box{background:#fff;border-radius:10px;text-align:center;display:block;padding:10px;color:#2d2d2d;margin-bottom:5px;}
.caegory-box .icon{margin: 0 0 10px;}
.caegory-box .icon img{ margin:0 auto;}
.caegory-box .category-title{font-size:18px;text-transform:uppercase;}
.section-title .view-all {color: #000;font-size: 14px;float: right;margin: 0 30px 0 0;text-decoration: none; font-weight: 400; line-height: 24px; text-transform: uppercase; }
.section-title .view-all i{font-size: 21px;font-weight: 300;margin: 0 0 0 5px;float: right;}

.sects-wrapper{background:#f4f4f4;:0;text-align:center;}
.sects-wrapper a{ display: inline-block; border-radius: 10px;}
.sects-wrapper a img:{border-radius10px;}
.sects-wrapper .slides {text-align:center;display:block;padding:10px 10px 10px 10px;color:#2d2d2d;}
.sects-wrapper li::marker {content: "✔️ ";font-size:1.2rem;color:#ff5733;}


h2.title{color:#000;font-size:15px;font-weight:700;padding-left:10px;margin:0 0 5px;text-transform:uppercase;}
.cater {margin:5px;padding:5px;background:#fff;border-radius:5px;}

/*--------------------------------------------------------------
# Signin/Signout
--------------------------------------------------------------*/
.signin-wraper{padding:40px 0;}
.signin-wraper .registration-form-wrap{background:#fff;border-radius:10px;border:1px solid rgba(0, 0, 0, 0.4);}
.signin-wraper .registration-form{border-radius:0 10px 10px 0;}
.signin-wraper .not-login .registration-form{background:#d0e9e6;border-radius:10px;color:#333;}
.registration-img{padding:0 30px;text-align:center;}
.registration-form{background:#fcefd9;padding:30px 30px;}
.registration-form h5{margin: 0 0 15px;}
.registration-form .form-control{background:#fff;color:#000;}
.registration-form .form-floating label{color: #000;}

/*--------------------------------------------------------------
# Tutorial
--------------------------------------------------------------*/
.tutwrap{min-height:600px;padding:0 10px 0 10px;}
.tutmain{min-height:600px;margin:0 10px 0 10px;padding:0 10px 0 10px;}
.tutleft{min-height:600px;overflow-y:auto;padding:0 10px 0 10px;}
.tutleft ul {list-style-type:none;margin:0;padding:0;}
.tutleft ul li a{color:#636466;padding:5px 0;display:block;font-size:14px;} 
.tutleft ul li a i{margin-right:5px;}
.tutright{}
.content{padding:0 2rem 0 2rem;line-height:1.8;overflow-wrap:break-word;font-size:1.125rem;}
.content > table,th,td{border:1px solid #96897B;border-collapse:collapse;}
.content ul, .content ol {padding-left:1.5rem;padding-left:1.5rem;margin:0 0 1.125rem 0;}

.faqwrap{min-height:400px;padding:0 10px 0 10px;}
.faqmain{min-height:400px;margin:0 10px 10px 10px;padding:0 10px 0 10px;}
.faqleft{min-height:400px;overflow-y:auto;padding:0 10px 0 10px;}
.faqleft ul {list-style-type:none;margin:0;padding:0;}
.faqleft ul li a{color:#636466;padding:5px 0;display:block;font-size:14px;} 
.faqleft ul li a i{margin-right:5px;}
.faqright{padding:0 10px 10px 10px;}

/*color:#475569*/
h1.heading {font-size:20px;font-weight:600;color:#85430f;padding:10px;text-align:left;border-bottom:1px solid #475569;}
h2.heading {font-size:16px;font-weight:500;color:#85430f;padding:10px;text-align:left;border-bottom:1px solid #475569;}
.content > h2 {font-size:18px;font-weight:450;color:#85430f;padding:10px 10px 0 0;text-align:left;}
.content > h3 {font-size:16px;font-weight:400;color:#85430f;padding:10px 10px 0 0;text-align:left;}


.tutorial-wrapper{min-height:600px;padding:0 10px 0 10px;}
.question-wrapper{min-height:600px;padding:0 10px 0 10px;}
#tuteleft {min-height:600px;overflow-y:auto;}
#tuteleft ul {list-style-type:none;margin:0;padding:0;}
#tuteleft ul li a{color:#636466;padding:5px 0;display:block;font-size:14px;} 
#tuteleft ul li a i{margin-right:5px;}
.content-box{background:#fff;border:1px solid #dee0e1;padding:15px;border-radius:10px;margin:15px 0 15px;}
.content-box .top-head{ margin:0 0 5px; display: flex;font-size:14px;background:rgba(33, 37, 41, 0.03);padding: 5px;border-radius:5px; }
.content-box .top-head .name{font-weight:700;}
.content-box .left-img{align-self:center;border-radius: 50%;}
.content-box .left-img > img{border-radius:50%;}
.content-box .right-content{margin-left: 10px; align-self: center;}
.content-box .question{font-size:18px;font-weight:700;margin:0 0 15px;color:#85430f;}

.hrhead {margin-bottom:10px;}


.qtns{font-size:14px;font-weight:400;line-height:1.5;}

/*--------------------------------------------------------------
# Profile
--------------------------------------------------------------*/
.profile-left{ background: #fff; border-radius: 5px; padding: 1px; box-shadow: 0 0 4px 0 rgba(0,0,0,.08); margin: 0 0 30px;}
.my-profile{ text-align: center; margin: 30px 0; font-size: 12px;}
.profile-img{ width: 70px; height: 70px; margin: 0 auto 10px; border-radius: 50%; overflow: hidden;}
.profile-img > img{border-radius: 50%; width: 100%;}
.change-profile-img{ position: relative; color: #1872ab;}
.change-profile-img > input{display: block;height: 20px;position: absolute;right: 0;left: 0;width: 100%;opacity: 0; cursor: pointer;}
.my-profile .user-name{ font-size: 16px; font-weight: 700;}
.my-profile-wrapper{ margin: 0 0 60px;}
.profile-nav-pills > ul > li{ border-top: 1px solid #ededed;}
.profile-nav-pills > ul > li > a{ display: block; border-left: 3px solid transparent; line-height: 52px; padding: 0 25px; color: #333333;}
.profile-nav-pills > ul > li > a.active, .profile-nav-pills > ul > li > a:hover{ color: #de247f; border-left: 3px solid #de247f;}
.profile-right .card{ border: none;box-shadow: 0 0 4px 0 rgba(0,0,0,.08);}
.profile-right .card-header{ background: #fff; border-bottom: 1px solid #ededed;}
.profile-title-01{ font-size: 20px; font-weight: 700; padding: 0 0 15px; margin: 0 0 30px;border-bottom: 1px solid #ededed;}
.profile-cashback-box{ text-align: center; font-size: 14px; margin: 0 0 30px;}
.profile-cashback-box h6{ margin: 0 0 10px;}
.profile-cashback-box .confirmed-box{ margin: 0 0 20px;}
.profile-cashback-box .cb-amount{ font-size: 24px; font-weight: 700; margin: 0 0 10px; color: #50b052;}
.profile-cashback-box .cb-status .icon{color: #1872ab; }
.profile-right .btn-pink{ text-transform: uppercase; font-weight: 700;padding: 6px 30px; border-radius: 4px;}
.cashback-activity-table .brand-logo { display: inline-block; width: 54px; border-radius:5px; box-shadow:0 0 3px 0px #d6cbcb;}
.cashback-activity-table .brand-logo > img{border-radius:5px;}
.profile-right .card{ margin-top: 30px;}
.profile-right .card:first-child{ margin-top: 0;}
.settings-form .btn-outline-pink{text-transform: uppercase;font-weight: 700;padding: 6px 30px;border-radius: 4px; height: 45px;}
.settings-form .form-group{ position: relative;}
.settings-form .form-group label { font-weight: 700; margin: 0 0 10px;}
.settings-form .form-group .status{ position: absolute;right: 15px;top: 45px;} 
.settings-form .form-group .status ~ .form-control{ padding-right: 35px;}
.issue-qus{display: block;border:1px solid #ededed;padding: 10px;border-radius: 2px;text-align: center;margin-bottom: 15px;cursor: pointer;}
.issue-qus:hover{border:1px solid #de247f;}
.back-btn a{ color: #1872ab; display: inline-block;}
.suport-option > .form-select, .suport-option > .form-control{background-color: #f4f4f4;height: 45px;line-height: 31px;}
.suport-option > textarea.form-control{ height: auto; resize: none;}
.query-support label{ font-weight: 700;}
.suport-option > .message{background:#d0e9e6; border-radius:4px; font-size: 12px; padding:12px 10px;}
.suport-option > .btn-outline-pink{text-transform: uppercase;padding: 6px 30px;height: 45px;}
.profile-right .suport-option > .btn-pink{height: 45px;}
.suport-option > .note{ font-size: 12px; color: #838383;}
.support-work{font-size: 14px;}
.support-work ol {padding-left: 18px;}
.support-work ol li {margin: 0 0 3px;}
.profile-faq-pills ul li{ border-bottom:1px solid #ededed;}
.profile-faq-pills ul li > a{display: block;padding:10px 15px; color: #333; font-size: 14px;}
.profile-faq-pills ul li > a.active, .profile-faq-pills ul li > a:hover{ background: #d0e9e6;}
.profile-right .deals-accordion-wrapper .card{ margin-top: 0;}

.story{margin:10px;padding-bottom:5px;border-bottom:1px solid #f2f2f2;}
.story-img img{border-radius:10px;background:#FCEFD9;border:1px solid #333333;padding: 1px;vertical-align:middle;text-align:center;}
.story-heading h2{color:#21201f;font-size:16px;clear:both;width:100%;font-weight:500;line-height:20px;margin-bottom:10px}
.story-readtime{color:#424242;font-size:14px;float:left}

.qtn-box{padding:10px 0 10px;font-weight:700;}
.ans-box{margin-bottom:10px;border-radius:5px;border:1px solid #f2f2f2;padding:5px;}
.user-box {padding-bottom:10px;}
.user-icon{width:40px;border-radius:50%;object-fit:cover;padding:1px;border:1px solid #dee0e1;box-shadow:0 0 4px 0 rgba(0,0,0,.08);}
.user-icon:hover{border:1px solid #904A18;transform:scale(1.05);}
.user-name{font-size:14px;}
.user-role{font-size:12px;}

/*--------------------------------------------------------------
# Kebab Menu
--------------------------------------------------------------*/
.kebab-container{position:absolute;display:inline-block}
.kebab-button{background:0 0;border:none;cursor:pointer;display:flex;flex-direction:column;gap:3px;padding:8px;border-radius:50%}
.kebab-button:hover{background-color:#f0f0f0;}
.kebab-button span{width:4px;height:4px;background-color:#333;border-radius:50%}
.kebab-dropdown{display:none;position:absolute;top:100%;right:0;background-color:#fff;min-width:120px;box-shadow:0 4px 12px rgba(0,0,0,.15);border-radius:4px;z-index:10}
.kebab-dropdown.show{display:inline-block}
.kebab-dropdown ul{list-style:none;margin:0;padding:4px 0}
.kebab-dropdown li a{display:block;padding:8px 16px;text-decoration:none;color:#333;font-size:14px}
.kebab-dropdown li a:hover{background-color:#f5f5f5}
.kebab-dropdown li a.delete-action{color:#dc3545}

/*--------------------------------------------------------------
# Tutorial Ad Banner
--------------------------------------------------------------*/
.section-title{color:#000;font-size:15px;font-weight:700;margin:10px 0 5px;text-transform:uppercase;text-align:center;}
.adsdiv{margin:5px;text-align:center;}
.adshead{color:#000;font-size:15px;font-weight:700;text-transform:uppercase;text-align:center;}
.img1 {border:4px solid #808080;border-radius:8px;}
.img2 {background-color:#ffffff;padding:15px;border:1px solid #d3d3d3;box-shadow:0 4px 8px rgba(0, 0, 0, 0.1);}
.img3 {border:4px solid #666666;outline:4px solid #cccccc;outline-offset:4px;}
.img4 {box-shadow:0 0 0 4px #e0e0e0, 0 10px 20px rgba(0, 0, 0, 0.15);}
.img5 {filter: grayscale(100%);border:4px solid #999999;transition:all 0.4s ease;}
.img5:hover {filter:grayscale(0%);border-color:#333333;transform:scale(1.02);}
.img6 {border:0px solid #ffffff;box-shadow:0 0 0 0px #4a4a4a;transition:all 0.3s ease;}
.img6:hover {box-shadow:0 0 0 8px #4a4a4a;}