/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@400;500;700;900&display=swap');



@font-face {
    font-family: 'MontBold';
	src: url("https://app.getoccasion.com/helpscout/Mont-Bold.otf") format("opentype");
    font-weight: normal;
    font-style: normal;

}


/* Global */
body{
     scroll-behavior: smooth;
     font-family: 'Heebo', sans-serif;
}
*{
     box-sizing: border-box;
     margin: 0;
     padding: 0;
}
.container-fluid{
     max-width: 1080px;
     margin: 0 auto;
     padding: 0;
}
.container-fluid:before, .container-fluid:after {
     content: "";
     display: block;
}
@media (min-width: 1200px){
     .row:before, .row:after {
     display: none;
     content: "";
     line-height: 0;
     }
     .row:before, .row:after {
     display: none;
     content: "";
     line-height: 0;
     }
}

.modal #closeBtn {
    top: 27px;
    right: 25px;
}
#contactModal h2, .abuse h2 {
	    font-family: MontBold;
    color: #10109B;
    padding: 18px 20px;
    border-bottom-color: #f5f5f5;
}
#contactModal .control-label {
	 font-size: 14px;
    font-weight: 600;
}
#contactModal .controls input {
	height: auto;
    font-size: 16px;
	width: 350px;
}
.row{
     display: flex;
     flex-wrap: wrap;
}
.title, .helpdoccs h2{
     font-family: MontBold;
     font-style: normal;
     font-weight: 800;
     font-size: 30px;
     line-height: 38px;
     text-transform: capitalize;
     color: #10109B;
}
.helpdoccs h2 a{
     color: #10109B;
}
a{
     text-decoration: none;
}
a:hover{
     text-decoration: none;
}
input[type=text]{
     height: auto;
}
form{
     margin: 0;
}

/* Nav Bar */




.navbar{
     width: 100%;
}
.navbar .container-fluid{
     display: flex;
     align-items: center;
     flex-wrap: wrap; 
}
.navbar .navbar-inner{
     padding: 10px 0;
}
.navbar .nav>li>a   {
     margin: 0 0px;
     font-weight: 500;
     font-size: 16px;
     line-height: 32px;
     color: #0D0D58;
}
.navbar .nav li a:hover{
     color: #1E32C8;
}
.navbar .nav .active a{
     color: #ff0099;
}
.navbar .nav .active a:hover{
     color: #e164af;
}
.navbar .nav .active .caret {
	border-bottom: 5px solid #ff0099;
}
.navbar .nav .btn-nav{
     display: flex;
     flex-direction: row;
     justify-content: center;
     align-items: center;
     padding: 12px 20px;
     background: #FFFFFF;
     border: 2px solid #F3F5FD;
     box-sizing: border-box;
     border-radius: 10px;
     margin-bottom: 5px;
     padding-right: 0
}
.navbar .nav .btn-nav a{
     font-weight: 500;
     font-family: "Heebo";
     font-size: 16px;
     line-height: 24px;
     color: #0D0D58;
     text-decoration: none;
     padding-left: 12px;
	 padding-right: 20px;
}
.navbar .nav .btn-nav:hover{
     background-color: #F6F8FF;
}
.navbar .nav .btn-nav:hover a{
     color: #10109B;
}
.nav .nav-toggle{
     display: none;
}




/* Help-Docs Section */
.help-docs{
     background-color: #FAFBFF;
	 padding: 50px 0;
}
.help-docs .row{
     justify-content: flex-end;
}
.row.search{
     margin: 0;
}
.search-help{
     width: 50%;
     flex: 0 0 auto;
     height: 386px;
     display: flex;
     flex-direction: column;
     justify-content: center;
     margin-right: 35px;
}
.search-help h2{
     margin: 10px 0 24px 0;
}

#searchBar{
     text-align: left;
     padding: 0 ;
     position: relative;
     width: 90%;
     margin: 0;
}
.search-help #searchBar .search-query{
     width: 100%;
     border-radius: 10px;
     padding: 15px;
     border: 1px solid rgba(13, 13, 88, 0.1);
     margin-bottom: 10px;
     font-family: Heebo;
     font-weight: 400;
     font-size: 18px;
     color: #0D0D58;
}
.input-search .search-query::placeholder{
     font-size: 17px;
     line-height: 26px;
     color: rgba(13, 13, 88, 0.5);
     margin: 0px 9px;
}
.input-search .search-query:focus{
     outline: rgba(13, 13, 88, 0.1);
}
#searchBar button{
     background: transparent;
     color:#0D0D58;
     right: 1px;
     text-shadow: none;
     padding: 0 20px;
     top: 0;
     border: none;
}
#searchBar button span {
	display: none;
}
#searchBar button:hover{
     background: transparent;
}
#searchBar button .icon-search{
     display: block;
}
.search-help .suggestion-search{
     display: flex;
     align-items: center;
}
.search-help .suggestion-search > span{
     margin:0 6px;
     font-weight: 500;
     font-size: 16px;
     line-height: 23px;
     color: #0D0D58;

}
.search-help .suggestion-search ul{
     display: flex;
     justify-content: space-between;
     align-items: center;
}
.search-help .suggestion-search ul li{
     background: #FFFFFF;
     border: 1px solid rgba(13, 13, 88, 0.1);
     border-radius: 10px;
     padding: 6px 12px;
     margin: 0 4px;
     color: #10109B;
     font-size: 15px;
     font-weight: 500;
     list-style: none;
     cursor: pointer;
     box-shadow: 0px 5px 9px rgba(35, 35, 144, 0.03);
}

.search-help .suggestion-search ul li:hover {
     background-color: #F6F8FF;
}

.search-help .suggestion-search ul li:hover a{
     color: #0D0D58;
}
.banner-search{
     width: 46.5%;
     flex: 0 0 auto;
     background: linear-gradient(
                              125deg, rgb(0, 255, 87) 0%, rgb(0 0 0) 40%, rgb(70, 0, 67) 70%, rgb(240, 255, 197) 100%), linear-gradient(
                              55deg, rgb(0, 20, 201) 0%, rgb(65, 0, 96) 100%), linear-gradient(
                              300deg, rgb(255, 199, 0) 0%, rgb(0, 26, 255) 100%), radial-gradient(135% 215% at 115% 40%, rgb(57, 57, 57) 0%, rgb(57, 57, 57) 40%, rgb(132, 149, 97) calc(40% + 1px), rgb(132, 149, 97) 60%, rgb(238, 214, 144) calc(60% + 1px), rgb(238, 214, 144) 80%, rgb(236, 239, 216) calc(80% + 1px), rgb(236, 239, 216) 100%), linear-gradient(
                              125deg, rgb(40, 45, 79) 0%, rgb(40, 45, 79) 40%, rgb(35, 16, 58) calc(40% + 1px), rgb(35, 16, 58) 70%, rgb(163 18 111) calc(70% + 1px), #b324a9 88%, #5c1d4e calc(88% + 1px), #a54890 100%);
     background-blend-mode: overlay, screen, overlay, overlay, normal;
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     padding: 50px 48px;
}
.banner-search .face-icon{
     display: flex;
     justify-content: center;
     align-items: center;
     padding: 12px;
     border-radius: 12px;
     border: none;
     outline: none;
     background-color: #fff;
     margin-bottom: 19px;
}
.banner-search .face-icon:hover{
     background-color: #F6F8FF;
}
.banner-search .banner-content .title{
     margin: 4px 0;
     color: #fff;
}
.banner-search .banner-content p{
     color: #FFFFFF;
     font-style: normal;
     font-weight: 500;
     font-size: 16px;
     margin-bottom: 36px;
     line-height: 23px;
}
.banner-search .banner-content .btn-banner{
     border: 2px solid #F3F5FD;
     border-radius: 10px;
     background: #FFFFFF;
     padding: 12px 20px;
}
.banner-search .banner-content .btn-banner:hover {
     background-color: #F6F8FF;
}
.banner-search .banner-content a button{
     color: #0D0D58;
     font-family: Heebo;
     font-style: normal;
     font-weight: 500;
     font-size: 16px;
     line-height: 24px;
     display: flex;
     justify-content: space-between;
     align-items: center;
}
.help-content{
     margin: 15px 0;
}
#serp-dd {
    top: 53px;
    border: 2px solid #f3f2f2;
    box-shadow: 0;
    border-radius: 5px;
	z-index: 999;
}
.desc{
     font-family: Heebo;
     font-style: normal;
     font-weight: normal;
     font-size: 16px;
     line-height: 160%;
     padding-bottom: 25px;
     border-bottom: 1px solid #F3F2F2;
     color: rgba(13, 13, 88, 0.8);
}
.help-content .row.content{
     display: flex;
     justify-content: flex-start;
     flex-wrap: wrap;
     margin-top: 60px;
}
.help-content .item-content{
     width: 33.3%;
     margin-bottom:80px ;
}
.help-content .item-content .item-title{
     font-family: MontBold;
     font-style: normal;
     font-weight: 800;
     font-size: 20px;
     line-height: 26px;
     color: #10109B;
     text-transform: capitalize;
     margin: 8px 0px;
}
.help-content .item-content .item-links a{
     font-family: Heebo;
     color: #0D0D58;
     font-weight: normal;
     font-size: 16px;
     line-height: 200%;
}
.help-content .item-content ul.item-links{
    margin-top: 24px;
}
.help-content .item-content .item-links li{
    line-height: 150%;
    margin: 6px 0;
}
.help-content .item-content .item-links a span{
     padding-right: 9px;
}
.help-content .item-content .item-links a:hover{
     color: #10109B;
}
.help-content .item-content .item-links .more, .category-list .article-count{
     font-weight: 500;
     font-size: 16px;
     color: #10109B;
     line-height: 37px;

}
#docsSearch {
	display: none !important;
}

.help-content .helpdoccs {
	margin-top: 60px;
}



.category-list .category:hover {
	text-decoration: none;
    background: #f8faff;
}

.category-list .category {
    border: 1px solid #e7ebfb;
    border-radius: 8px;
}
.category-list .category p {
	color: #505064;
}

.category-list h3 {
color: #090964;
font-size: 20px;
font-family: 'MontBold';
line-height: 160%;
	
}
.nav-collapse li#contact {
display: none
}	


/* Style Videos Section */
.videos{
     margin: 36px 0;
     overflow-x: hidden;
}
.videos .row{
     margin-top: 50px;
     justify-content: flex-start;
     align-items: center;
}
.videos .videos-content{
     display: flex;
     justify-content: space-between;
     align-items: center;
}
.videos .videos-content .btn-videos-content{
     display: flex;
     flex-direction: row;
     justify-content: center;
     align-items: center;
     padding: 12px 20px;
     background: #FFFFFF;
     border: 2px solid #F3F5FD;
     border-radius: 10px;
}
.videos .videos-content .btn-videos-content:hover{
     background-color: #F6F8FF;
}
.videos .videos-content .btn-videos-content:hover a{
     color: #10109B;
}

.videos .videos-content .btn-videos-content a{
     font-family: Heebo;
     font-weight: 500;
     font-size: 16px;
     line-height: 24px;
     color: #0D0D58;     
}
.videos .item-video{
     width: 24%;
     margin: 0 0 30px 1%;
     overflow: hidden;
}
.videos .item-video:hover{
     box-shadow: 0px 5px 9px rgba(35, 35, 144, 0.03);
}
.videos .item-video:hover .card .play-icon{
     display: block;
}
.videos .item-video .card{
     position: relative;
     background: #FFFFFF;
     border: 1px solid #F3F5FD;
     border-radius: 10px;
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     padding: 12px;
     overflow: hidden;
}
.videos .item-video .card .play-icon{
     position: absolute;
     top: 20%;
     left: 38%;
     right: 62%;
     z-index: 66;
     display: none;
}
.videos .item-video .card::before{
     content: " ";
     position: absolute;
     width: 189.48px;
     height: 122.61px;
     background-color:#FFFFFF;
     right: -30%;
     top: -81px;
     transform: matrix(-0.99, 0.11, -0.11, -0.99, 0, 0);
     border-radius: 30.625px;
     z-index: 2;
}
.videos .item-video .card::after{
     content: " ";
     position: absolute;
     width: 189.48px;
     height: 122.61px;
     background: rgba(255, 255, 255, 0.5);
     right: -35%;
     top: -81px;
     transform: matrix(-0.98, 0.18, -0.18, -0.98, 0, 0);
     border-radius: 30.625px;
     z-index: 9;
}
.videos .item-video .card .img-card{
     height:  155px;
     width: 100%;
     position: relative;
     border-radius: 10px;
     margin-bottom: 15px;
     background :linear-gradient(117.41deg, #11037e -0.36%, rgba(16, 16, 233, 0.22) 102.14%), linear-gradient(111.9deg, rgba(179, 179, 255, 0) 0.72%, #1b034c 107.63%)
}

.videos .item-video .card.default .img-card{
     background :linear-gradient(117.41deg, #11037e -0.36%, rgba(16, 16, 233, 0.22) 102.14%), linear-gradient(111.9deg, rgba(179, 179, 255, 0) 0.72%, #1b034c 107.63%)
}

.videos .item-video .card.pink .img-card{
     background :linear-gradient(117.41deg, #dd14a0 -0.36%, rgba(16, 16, 233, 0.22) 102.14%), linear-gradient(111.9deg, rgba(179, 179, 255, 0) 0.72%, #a70c5d 107.63%)
}

.videos .item-video .card.blue .img-card{
     background :linear-gradient(117.41deg, #003eff -0.36%, #080581 102.14%), linear-gradient(111.9deg, rgba(179, 179, 255, 0) 0.72%, rgb(0 48 180 / 68%) 107.63%)
}




.videos .item-video .card .img-card p{
    font-family: MontBold;
    font-style: normal;
    font-weight: 800;
    font-size: 19px;
    line-height: 160%;
    color: #FFFFFF;
}
.videos .item-video .card .img-card  p{
    right: 54px;
    bottom: 5%;
    left: 10%;
    position: absolute;
}
.videos .item-video .card .img-card  span{
     position: absolute;
     right: 9px;
     bottom: 6px;
     font-family: Heebo;
     background: rgba(255, 255, 255, 0.1);
     border-radius: 6px;
     font-weight: 500;
     font-size: 14px;
     line-height: 21px;
	 color: #fff;
     padding: 4px 8px;
}
.videos .item-video .card .card-body{
     font-family: Heebo;

}
.videos .item-video .card .card-body .card-title{
    font-weight: 600;
    font-size: 14px;
    line-height: 150%;
    text-transform: uppercase;
    color: #10109B;
    margin: 2px 0px;
}
.videos .item-video .card .card-body .card-title.default{
     color: #10109B;
}
.videos .item-video .card .card-body .card-title.pink{
     color: #d13bc7;
}
.videos .item-video .card .card-body .card-title.blue{
     color: #1c9ded;
}

.videos .item-video .card .card-body .card-text{
     font-weight: 500;
     font-size: 15px;
     line-height: 150%;
     color: #0D0D58;
     margin: 2px 0px;
}
.videos .item-video .card .logo-card{
     width: 32%;
     position: absolute;
     top: 6%;
     right: 7%;
     z-index: 33;
}

.videos .row.see-more{
     align-items: center;
     flex-direction: column;
     font-family: Heebo;
     margin: 20px 0;
     box-sizing: border-box;
}
.row.see-more .video-title{
     font-weight: bold;
     font-size: 18px;
     line-height: 26px;
     color: #0D0D58;
     margin: 20px 0px;
}
.row.see-more .btn-video{
     background: #10109B;
     border-radius: 10px;
     display: flex;
     flex-direction: row;
     align-items: center;
     padding: 12px 20px;
     border: none;
     outline: none;
     cursor: pointer;

}
.row.see-more .btn-video a{
     color: #FFFFFF;
     font-weight: 500;
     font-size: 16px;
     line-height: 24px;
     font-family: 'Heebo';
}
.row.see-more .btn-video:hover{
     background-color:#F6F8FF;

}
.row.see-more .btn-video:hover a{
     color: #10109B;

}





/* Contact Style Section */
.app-statu{
     overflow-x: hidden;
}
.app-status .contact , .app-status .feature{
     background-color: #10109B;
     border-top:8px solid #E164AF ;
     height: 278px;
     display: flex;
     flex-direction: column;
     padding: 70px 0 60px 60px;
     width: 50%;
     justify-content: center;
     align-items: flex-start;
}
.app-status .feature{
     background-color: #0D0D58;
     border-top:8px solid #00B4FF ;
     
}
.app-status .title{
     font-family: MontBold;
     font-weight: 800;
     font-size: 30px;
     line-height: 38px;
     color: #FFFFFF;
     margin: 8px 0px;
}
.app-status .desc{
     font-family: Heebo;
     font-weight: 500;
     font-size: 16px;
     line-height: 23px;
     color: #FFFFFF;
     border: 0;
}
.app-status .btn-contact{
     border: 2px solid #F3F5FD;
     border-radius: 10px;
     background: #FFFFFF;
     padding: 12px 20px;
     display: flex;
     flex-direction: row;
     justify-content: center;
     align-items: center;
}
.app-status a .btn-contact {
     font-family: Heebo;
     color: #0D0D58;
     font-weight: 500;
     font-size: 16px;
     line-height: 24px;
}
.app-status .btn-contact:hover{
     background-color: #F6F8FF;
}
.app-status a .btn-contact:hover {
     color: #10109B;
}

/* Footer Style */
#footer{
     padding: 20px 0;
     font-family: Heebo;
     font-style: normal;
     font-weight: normal;
     font-size: 14px;
     overflow-x: hidden;
     line-height: 21px;
     background-color: #F2F4FB;
}
#footer .row{
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
}
#footer .Occasion-title{
     font-family: Heebo;
     font-size: 14px;
     line-height: 21px;
     color: rgba(13, 13, 88, 0.5);
     text-align: left;
     margin: 0;
}
#footer .links-footer {
     display: flex;
     justify-content: space-between;
     align-items: center; 
     list-style: none;
}
#footer .links-footer li a{
     color: rgba(13, 13, 88, 0.5);
     padding: 0 12px;
}
#footer .links-footer li a:hover{
     color:  #9733BC;;
}
#footer .up-scroll{
     background-color: #fff;
     border-radius: 7px;
     padding: 6px 12px;
     display: flex;
     align-items: center;
     justify-content: center;
     border: 0;
}
#footer .up-scroll a{
     font-family: Heebo;
     font-weight: 500;
     font-size: 14px;
     line-height: 21px;
     color: #10109B;
}


/* Help Docs Page */



/* Side Bar */
#sidebar{
     margin: 45px 0 0;
}
#sidebar form .search-query{
     border: 1px solid rgba(13, 13, 88, 0.1);
     border-radius: 10px;
     color: #0D0D58;
     padding: 12px 10px;
     width: 100%;   
     height: 50px;
     font-size: 14px;
}
#sidebar form .search-query::placeholder{
     font-family: Heebo;
     color: rgba(13, 13, 88, 0.5);
     font-size: 18px;
     line-height: 26px;
     padding: 12px 0;
}
#searchBar.sm button{
     height: 40px;
     padding: 12px;
     right: 0;
     top: 5px;
}

.icon-search::before{
     content: "\e601";
     color: #10109B;
     font-size: 19px;
}
#searchBar.sm {
     margin-bottom: 16px ;
}
#sidebar h3{
     font-family: Heebo;
     font-weight: 700;
     font-size: 18px;
     line-height: 26px;
     color: #0D0D58;
     margin: 6px 0px 10px 0;
}
#sidebar .nav-list li{
     margin: 6px 0;
}
#sidebar .nav-list li a {
     font-family: Heebo;
     font-style: normal;
     font-weight: normal;
     line-height: 160%;
     font-size: 16px;
     color: rgba(13, 13, 88, 0.8);
     margin: 6px 0px;
     text-shadow: none;
     padding: 0;

}
#sidebar .nav-list .active a .icon-arrow::before{
     color: rgba(13, 13, 88, 0.8);
}
#sidebar .nav-list li a:hover{
     color: #0D0D58;
     font-weight: normal;
}
#sidebar .nav-list .active a{
     font-weight: 700;
     color: #0D0D58;
}
/* Main Content */
#main-content{
     margin: 45px 0 20px 0;
     padding: 0 0 0 49px;
     box-sizing: border-box;
     background: none;

}
.contentWrapper{
     padding: 30px;
     background: #FFFFFF;
     box-shadow: 0px 5px 14px rgba(35, 35, 144, 0.04);
     border: none;
     font-size: 16px;
}
.articleList a:hover span{
     text-decoration: none;
}
#fullArticle h1 ,.contentWrapper h1{
     font-family: MontBold;
     font-style: normal;
     font-weight: 800;
     font-size: 30px;
     color: #10109B;
     line-height: 150%;
     margin: 0 30px 0.5em 0;
}
#fullArticle h2 , #fullArticle  h3{
     font-family: MontBold;
     font-style: normal;
     font-weight: 800;
     font-size: 20px;
     line-height: 26px;
     color: #0D0D58;
     text-transform: capitalize;
     margin: 16px 0px;
}
#fullArticle ul{
     margin: 0;
     line-height: 0;
}
#player{
     width: 100%;
}
#fullArticle .printArticle{
     top: 30px;
     padding: 10px 10px;
     background: #F3F5FD;
     border-radius: 10px;
     display: flex;
     text-decoration: none;
}
#fullArticle .printArticle .icon-print:before{
     color: rgba(13, 13, 88, 0.8);;
}
#fullArticle p{
     font-family: Heebo;
     font-size: 16px;
     color: rgba(13, 13, 88);
     line-height: 150%;
    margin-top: 0.8em;
    margin-bottom: 0.8em;
}
#fullArticle li{
     font-family: Heebo;
     font-size: 16px;
	 margin-left: 32px;
     color: rgba(13, 13, 88);
     line-height: 150%;
}
#fullArticle ul li a{
     font-size: 16px;
     font-family: "Heebo";
     line-height: 160%;
     text-decoration: none;
}
#fullArticle .inarticle{
     background: rgba(243, 245, 253, 0.28);
     border-radius: 0px 10px 10px 0px;
     border-width: 8px 8px 8px 0;
     border-style: solid inset;
     border-color: #F3F5FD;
     padding: 24px 36px 16px;
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     position: relative;
     box-sizing: border-box;
     margin: 30px 0;
}
#fullArticle .inarticle::before {
     position: absolute;
     content: "";
     top: -8px;
     left: 0;
     width: 5.61px;
     height: calc(100% + 16px);
     background-color: #E164AF;
}
#fullArticle .inarticle h2{
     margin: 0 0 16px 0;
}

#fullArticle .inarticle p {
     font-family: Heebo;
     font-style: normal;
     font-weight: 500;
     color: #0D0D58;
     font-size: 16px;
     line-height: 21px;
     margin: 0 22px;
}
#fullArticle .inarticle p a{
     font-family: Heebo;
     font-style: normal;
     font-weight: 500;
     color: #0D0D58;
     font-size: 14px;
     line-height: 21px;
}
#fullArticle .inarticle ul li{
     position: relative;
}
#fullArticle .inarticle ul li::before{
     content: "\2794";
     color: #00B4FF;
     position: absolute;
}

#fullArticle strong{
     font-weight: 700;
     color: #0D0D58;
}

/* need-help */
.clearfix{
     clear: both;
}
#need-help{
     width: 100%;
     margin: 20px 0 30px 0;
     padding: 40px 30px;
     background-color: #10109B;
     border-radius: 0px 0px 10px 10px;
     color: #FFFFFF;
     border-top: 8px solid #E164AF;
}
#need-help .row{
     justify-content: space-between;
     align-items: center;
     padding: 0 30px;
}
#need-help .title{
     font-family: MontBold;
     font-weight: 800;
     font-size: 30px;
     line-height: 38px;
     color: #FFFFFF;
     margin: 8px 0px;
}
#need-help .desc{
     font-family: Heebo;
     font-weight: 500;
     font-size: 16px;
     line-height: 23px;
     color: #FFFFFF;
     border: 0;
	 padding: 0;
}
#need-help .btn-contact{
     border: 2px solid #F3F5FD;
     border-radius: 10px;
     background: #FFFFFF;
     padding: 12px 20px;
     display: flex;
     flex-direction: row;
     justify-content: center;
     align-items: center;
}
#need-help a .btn-contact {
     font-family: Heebo;
     color: #0D0D58;
     font-weight: 500;
     font-size: 16px;
     line-height: 24px;
}
#need-help .btn-contact:hover{
     background-color: #F6F8FF;
}
#need-help a .btn-contact:hover {
     color: #10109B;
}



@media screen and (max-width: 1200px){
     .row{
          margin: 0;
     }
     .container-fluid {
          padding: 0 16px;
     }
     .help-docs .row{
          justify-content: space-between;
     }
     .search-help{
          width: 47%;

     }
     .search-help .input-search .input{
          width: 100%;
     }
     .input-search .icon-input a{
          right: 3%;
     }
     .videos .item-video{
          width: 30%;
     }
     .videos .item-video .card .logo-card{
          top: 6%;
          right: -4%;
     }
     .videos .item-video .card .logo-card img{
          width: 70%;
     }
}
@media screen and (min-width: 1100px){
     .videos .item-video .card .logo-card{
          top: 6%;
          right: 4%;
          width: 35%;
     }
     .videos .item-video .card .logo-card img{
          width: 94%;
     }
}
@media screen and (min-width: 835px){
     .navbar .nav{
     display: flex;
     justify-content: space-between;
     align-items: flex-start;
     flex-direction: row;
     margin: 0;
     }
     .row{
          margin: 0;
     }
}
@media screen and (max-width: 835px) {

     .navbar .navbar-inner {
          padding: 9px 4px 9px 10px;
     }
     .container-fluid {
          padding: 0 16px;
     }
     .navbar .container-fluid .brand{
          width: 80%;
          padding-left: 10px;
     }
     .navbar .nav {
          align-items: flex-start;
          margin: 15px 0;
          display: none;
     }
     .navbar .nav>li{
          padding-bottom: 5px ;
     }
     .navbar .nav>li>a {
          margin: 0;
          text-align: left;
          padding: 5px 4px;
     }
     .navbar .nav .btn-nav{
          border: none ;
          margin: 0;
          padding: 1px 0;
     }
     .navbar-button{
          padding: 5px 0;
     }
     .navbar .nav{
          flex-direction: column;
          padding: 0 16px;
     }
     .search-help{
          width: 47%;
          margin-right: 10px;

     }
     .search-help .input-search .input{
          width: 100%;
     }
     .banner-search{
          width: 43.5%;
     }
     .search-help .suggestion-search ul li{
          border: none;
          background-color: transparent;
          font-size: 14px;
     }
     .input-search .icon-input{
          right: 5%;
     }
     
     .app-status .bg1{
          display: none;
     }
     .app-status .bg2{
          display: none;
     }
     .app-status .contact , .app-status .feature{
          width: 50%;
     }
     .help-content .item-content{
     width: 50%;
     }
     .videos .item-video{
          width: 48%;
     }
     .videos .item-video .card::before{
          right: -20%;
          top: -81px;
     }
     .videos .item-video .card::after{
          right: -25%;
          top: -81px;
     }
     .videos .item-video .card .logo-card{
          top: 6%;
          right: -4%;
     }

}

@media screen and (max-width: 740px){
     iframe{
          max-width: 100%;
          height: 100%;
     }
     #fullArticle h1{
     font-size: 24px;
     
     }
     #fullArticle h2 , #fullArticle  h3{
          font-size: 17px;
     }
     body {
          padding: 0;
     }
     .navbar {
          margin: 0;
     }
     .navbar .navbar-inner {
          padding:  9px 0px 9px 1px;
          box-shadow: none;
          margin: 0;
     }
     .navbar .container-fluid .btn-navbar{
          top: 8px;
          right: 0px;
          width: 12%;
          margin: 0;
     }
     .container-fluid {
          padding: 0 16px;
     }
     .title{
          font-size: 24px;
     }
     .help-docs .container-fluid{
          padding: 0;
     }
     .row.search{
          margin: 0;
          margin-bottom: 50px;
     }
     .search-help{
          width: 100%;
          order: 1;
          height: 272px;
          padding: 0px 10px;
          margin: 0;
          justify-content: flex-end;
     }
     #searchBar{
          width: 100%;
     }
     .banner-search{
          width: 100%;
          order: 0;
          padding-left: 24px;
     }
     .banner-search .banner-content p{
          font-size: 15px;
     }
     .banner-search .title{
          font-size: 20px;
          margin: 0;
     }
     .banner-search .face-icon{
          display: none;
     }
     .input-search .icon-input a {
          top: 28%;
          right: 3%;
     }
     .search-help .suggestion-search ul li {
          padding: 6px 4px;
          font-size: 13px;
     }
     
     .help-content .item-content{
          width: 100%;
          margin-right: 16px;
     }
     .row.content.container-fluid{
          padding: 0;
     }
     .videos .item-video{
          width: 48%;
     }
     .videos .item-video .card::before{
     width: 189.48px;
     height: 122.61px;
     right: -30%;
     top: -81px;

     }
     .videos .item-video .card::after{
     content: " ";
     position: absolute;
     width: 189.48px;
     height: 122.61px;
     background: rgba(255, 255, 255, 0.5);
     right: -35%;
     top: -81px;
     transform: matrix(-0.98, 0.18, -0.18, -0.98, 0, 0);
     border-radius: 30.625px;
     z-index: 9;
     }
     .videos .item-video .card .logo-card{
          position: absolute;
          width: 30%;
          z-index: 11;
          top: 6%;
          right: -1%;
          }
     .videos .item-video .card .logo-card img{
          width: 80%;
     }
     .app-status .contact , .app-status .feature{
          width: 100%;
          padding: 0px 0 0px 22px;
     }
     #main-content{
          padding: 0;
          width: 100%;
     }
     .contentWrapper{
          padding: 30px 25px;
     }
     #sidebar{
          padding: 0 16px;
     }
     .player{
          max-width: 100%;
     }
}
@media screen and (max-width: 650px){
     .container-fluid {
          padding: 0 16px;
     }
     #contentArea.container-fluid{
          padding: 0;
     }
     .videos .item-video .card .logo-card{
          position: absolute;
          z-index: 11;
          top: 6%;
          right: -2%;
          width: 39%;
     }
}
@media screen and (max-width: 560px){
     .navbar .container-fluid .btn-navbar{
          width: 12%;
          top: 8px;
          right: 14px;
          margin: 0;
     }
     .videos .container-fluid , .app-status .container-fluid{
          padding: 0;
     }
     .videos .container-fluid .title , .videos .container-fluid .desc{
          padding: 0 16px;
     }
     .videos .container-fluid .btn-videos-content{
          margin: 12px 16px;
     }
     .title{
          line-height: 160%;
     }
     .help-content .desc{
          padding: 0;
     }
     .desc{
          border: 0;
     }
     .input-search .icon-input a {
          top: 28%;
          right: 4%;
     }
     .videos .videos-content{
          flex-direction: column;
          align-items: flex-start;
     }
     .videos .videos-content .btn-videos-content{
          padding-top: 12px;
     }
     .videos .item-video{
          width: 100%;
     }
     .videos .item-video .card .card-body .card-title{
     font-weight: 800;
     font-size: 14px;
     line-height: 21px;
     text-transform: uppercase;
     color: #10109B;
     margin: 4px 0px;
     }
     .videos .item-video .card::before{
          width: 189.48px;
          height: 122.61px;
          right: -17%;
          top: -81px;
          transform: matrix(-0.99, 0.1, -0.11, -0.99, 0, 0);
     }
     .videos .item-video .card::after{
          content: " ";
          width: 189.48px;
          height: 122.61px;
          right: -20%;
          top: -81px;
          transform: matrix(-0.98, 0.18, -0.18, -0.98, 0, 0);
          border-radius: 30.625px;
     }
     .videos .item-video .card .img-card{
          height: 200px;
     }

     .videos .item-video .card .play-icon{
          top: 25%;
          left: 40.5%;
          right: 59.5%;
          bottom: 75%;
     }

     .videos .item-video .card .img-card  p{
          right: 42.5%;
          top: 56.53%;
          bottom: 11.03%;
          left: 9.38%;
          position: absolute;
          font-size: 22px;
     }
     .videos .item-video .card .logo-card{
          position: absolute;
          z-index: 11;
          width: 20%;
          top: 5%;
          right: 7%;
     }
     .videos .item-video .card .logo-card img{
          width: 100%;
     }
     .videos .row.see-more{
          border-bottom: 2px solid #F3F2F2;
          padding: 0px 0 35px 0;
     }
     .app-status .contact , .app-status .feature{
          width: 100%;   
     }
     #need-help .row{
          justify-content: flex-start;
          padding: 0px;
     }
     .contentWrapper #need-help .btn-help{
          order: 2;
     }
     .contentWrapper #need-help .content-help{
          order: 1;
     }
     #footer .row{
          flex-direction: column-reverse;
          flex-wrap:wrap;
          justify-content: center;
          padding: 0 16px;
          align-items: center;

     }
     #footer .Occasion-title{
          padding-top: 24px;
          font-size: 13px;
          color: #10109B;
          font-weight: 500;
     }
     #footer .links-footer {
          flex-direction: row;
          flex-wrap: wrap;
          justify-content: center;
     }
     #footer .links-footer li{
          padding: 4px 0;
          font-size: 14px;
     }
     #footer .up-scroll{
          margin-bottom: 10px;
     }
}