/*-----------------------------------------------------------------------------------

    Template Name: Appson
    Template URI: 
    Description: Appson || App Landing Html Template
    Author: Rashadul Islam
    Author URI: http://rashadulislam.com/
    Version: 1.0

-----------------------------------------------------------------------------------
    
    CSS INDEX
    ===================
  
    1. Theme default CSS
    2. Home Page
        2.1 Header Area
        2.2 Slider Area
            2.2.1 background video
            2.2.2 background-image
            2.2.3 bg-gradiant
            2.2.4 Raindrops Background
            2.2.5 Slider
        2.3 about-area
        2.4 Feature Area
        2.5 Screen Slider
        2.6 Download Area
        2.7 Pricing Area
        2.8 Subscribe Area
        2.9 Team Area
       2.10 Achivement Area
       2.11 Testimonial Area
       2.12 Letest Blog
       2.13 Map Area
       2.14 Contact Area
       2.15 Footer Area
   3. Blog Details
    

-----------------------------------------------------------------------------------*/


/*----------------------------------------*/
/*  1. Theme default CSS
/*----------------------------------------*/


/*google font*/

@import url('https://fonts.googleapis.com/css?family=Montserrat:300,400,500,600,700');

.clear {
    clear: both
}

::-moz-selection {
    background: #00b0ff;
    color: #fff;
    text-shadow: none;
}

::selection {
    background:  #00ACEA;
    color: #fff;
    text-shadow: none;
}

.no-mar {
    margin: 0!important;
}

.no-pad {
    padding: 0!important;
}

.no-top-pad {
    padding-top: 0!important;
}

.text-left {
    text-align: left;
}

.text-center {
    text-align: center;
}

.text-right {
    text-align: right;
}

.bg-theme {
    background-color:  #0D0F23;
}

*,
*:before,
*:after {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

*:focus {
    outline: 0;
}

html {
    font-size: 62.5%;
    -webkit-font-smoothing: antialiased;
}

body {
    background: #F5F5F5;
    font-weight: normal;
    font-size: 15px;
    letter-spacing: 1.5px;
    color: #888;
    line-height: 30px;
    -webkit-font-smoothing: antialiased;
    /* Fix for webkit rendering */
    -webkit-text-size-adjust: 100%;
}

img {
    max-width: 100%;
    height: auto;
}

button,
input,
textarea {
    letter-spacing: 1px;
}

/*font use*/
/*

font-family: 'Roboto', sans-serif;
font-family: 'Open Sans', sans-serif;

*/

/*===========================
  2.1 Header Area
  ===========================*/

.header-area {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 99;
    transition: all 0.3s ease 0s;
}

.header-area.header_fix {
    background: rgba(0, 0, 0, 0) linear-gradient(130deg, #0D0F23, #00ACEA) repeat scroll 0 0;
    z-index: 9;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.3);
}

.menu-area {}

.logo {
    margin-top: 27px;
}

.logo a {
    display: inline-block;
}

.logo a img {
    max-width: 150px;
}

.main-menu {
    text-align: right;
}

.main-menu nav ul {}

.main-menu nav ul li {
    display: inline-block;
}

.main-menu nav ul li a {
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    display: block;
    padding: 33px 12px;
    letter-spacing: 0;
    text-transform: capitalize;
}

.main-menu nav ul li a:hover,
.main-menu nav ul li.active a {
    color: #0D0F23;
}

/*mobile menu*/

.slicknav_menu .slicknav_menutxt {
    display: none;
}

.slicknav_menu {
    background: transparent;
}

.slicknav_btn {
    background-color: transparent;
    position: relative;
    margin-top: -54px;
}

.slicknav_menu .slicknav_icon-bar {
    width: 28px;
    height: 2px;
    margin-bottom: 5px;
    transition: all 0.3s ease 0s;
}

.slicknav_menu .slicknav_open .slicknav_icon-bar:nth-child(1) {
    transform: rotate(-45deg)translate(-6px, 0px);
}

.slicknav_menu .slicknav_open .slicknav_icon-bar:nth-child(2) {
    opacity: 0;
}

.slicknav_menu .slicknav_open .slicknav_icon-bar:nth-child(3) {
    transform: rotate(45deg)translate(-10px, -3px);
}

.slicknav_nav a:hover {
    border-radius: 0;
}

/*===========================
  END Header Area
  ===========================*/


/*===========================
  2.2 Slider Area
  ===========================*/

.slider-area {
    height: 800px;
    width: 100%;
    display: flex;
    align-items: center;
    background: rgba(0, 0, 0, 0) linear-gradient(130deg, #0D0F23, #00ACEA) repeat scroll 0 0;
}

.slider-content {
    position: relative;
    z-index: 2;
}

.slider-content h2 {
    font-size: 60px;
    color: #fff;
    line-height: 73px;
    letter-spacing: 0;
    font-weight: 400;
}

.slider-content p {
    font-size: 18px;
    font-weight: 400;
    color: #fff;
    letter-spacing: 0;
    line-height: 30px;
    margin: 28px 0px 39px;
}

.btn-area a {
    height: 50px;
    width: 195px;
    border: 2px solid #fff;
    display: inline-block;
    text-align: center;
    line-height: 46px;
    border-radius: 20px;
    font-weight: 500;
    font-size: 14px;
    color: #fff;
    letter-spacing: 0;
}

.btn-area a:hover {
    background-color: #00ACEA;
    color: E0E0E0;
}

.slider-m-img {}

.slider-m-img img {
    max-width: 268px;
}

.d-flex {
    display: flex;
}

.flex-center {
    align-items: center;
}

/*===========================
  END Slider Area
===========================*/

/*===========================
2.2.1 background video
===========================*/

.video-gradiant:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    z-index: 1;
    opacity: 0.8;
    background: rgba(0, 0, 0, 0) linear-gradient(130deg, #0D0F23, #00ACEA) repeat scroll 0 0;
}

/*===========================
3.2 background-image
===========================*/

.background-image {
    background: url(../img/bg/img-background.jpg) center center/cover no-repeat;
    position: relative;
}

/*===========================
2.2.3 bg-gradiant
===========================*/

.bg-gradiant:before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    z-index: 1;
    opacity: 0.8;
    background: rgba(0, 0, 0, 0) linear-gradient(130deg, #0D0F23, #00ACEA) repeat scroll 0 0;
}

/*===========================
2.2.4 Raindrops Background
===========================*/

.raindrops-canvas canvas {
    margin-bottom: -10px;
}
/*===========================
2.2.5 Slider
===========================*/
.slider-screen-two{
    max-width: 200px;
    margin: auto;
    position: relative;
    z-index: 2;
}
.slider-screen-two:before{
    content: '';
    position: absolute;
    left: -27px;
    top: -54px;
    height: 460px;
    width: 254px;
    background-image: url(../img/mobile/slider-screen2.png);
    background-size: contain;
    background-position: center center;
    background-repeat: no-repeat;
}
.slider-screen-two img{
    width: 100%;
}
/*===========================
  2.3 about-area
  ===========================*/

.about-area {}

.about-left-thumb {}

.about-left-thumb img {
    max-width: 100%;
}

.about-content {}

.about-content span {
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 0;
    color: #696969;
}

.about-content h2 {
    font-size: 30px;
    font-weight: 500;
    color: #272727;
    letter-spacing: 0;
    margin: 19px 0px 22px;
}

.about-content p {
    color: #272727;
}

.about-ft {}

.ft-single {
    overflow: hidden;
    margin-top: 34px;
}

.ft-single .icon {
    float: left;
    margin-right: 23px;
    height: 70px;
    width: 70px;
    border: 1px solid rgba(0, 0, 0, 0) linear-gradient(130deg, #0D0F23, #00ACEA) repeat scroll 0 0;
    color:rgba(0, 0, 0, 0) linear-gradient(130deg, #0D0F23, #00ACEA) repeat scroll 0 0;
    text-align: center;
    line-height: 70px;
    border-radius: 50%;
    font-size: 22px;
}

.ft-single .ft-info {
    overflow: hidden;
}

.ft-single .ft-info h4 {
    font-size: 18px;
    font-weight: 500;
    color: #272727;
    letter-spacing: 0;
    margin-bottom: 10px;
}

/*===========================
  END about-area
  ===========================*/

/*===========================
  2.4 Feature Area
  ===========================*/

.section-title {
    margin-bottom: 50px;
    text-align: center;
}

.section-title h2 {
    font-size: 30px;
    font-weight: 500;
    color: #fff;
    letter-spacing: 0.01em;
    margin-bottom: 11px;
}

.section-title.text-black h2 {
    color: #272727;
}

.section-title p {
    color: #fff;
}

.section-title.text-black p {
    color: #272727;
}

.feature-area {}

.feature-content {}

.feature-list {
    margin-top: 82px;
}

.feature-item {
    position: relative;
    padding-top: 40px;
    z-index: 7;
    margin-top: 27px;
}

.feature-item::before {
    content: '';
    position: absolute;
    right: 34px;
    top: 0;
    height: 40px;
    width: 2px;
    background-color: #fff;
}

.feature-list-right .feature-item::before {
    right: auto;
    left: 34px;
}

.feature-item::after {
    content: '';
    position: absolute;
    right: -55px;
    top: 0;
    height: 2px;
    width: 90px;
    background-color: #fff;
}

.feature-list-right .feature-item::after {
    left: -55px;
    right: 0;
}

.feature-item .icon {
    height: 70px;
    width: 70px;
    display: inline-block;
    background: #fff;
    text-align: center;
    line-height: 70px;
    border-radius: 50%;
    font-size: 19px;
    color: rgba(0, 0, 0, 0) linear-gradient(130deg, #0D0F23, #00ACEA) repeat scroll 0 0;
    margin-bottom: 11px;
    position: relative;
}

.feature-item .icon::before {
    content: '';
    position: absolute;
    left: 50%;
    top: -10px;
    height: 11px;
    width: 11px;
    background: #fff;
    border: 1px solid #444;
    border-radius: 50%;
    transform: translateX(-50%);
}

.feature-item h4 {
    font-size: 18px;
    font-weight: 500;
    color: #fff;
    letter-spacing: 0;
}

.feature-item p {
    color: #fff;
}

.feature-mscreen {
    text-align: center;
}

.feature-mscreen img {
    max-width: 100%;
}

/*===========================
  END Feature Area
  ===========================*/
  .chatbot-toggler {
    position: fixed;
    bottom: 30px;
    right: 35px;
    outline: none;
    border: none;
    height: 50px;
    width: 50px;
    display: flex;
    cursor: pointer;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #00ACEA;
    transition: all 0.2s ease;
  }
  body.show-chatbot .chatbot-toggler {
    transform: rotate(90deg);
  }
  .chatbot-toggler span {
    color: #fff;
    position: absolute;
  }
  .chatbot-toggler span:last-child,
  body.show-chatbot .chatbot-toggler span:first-child  {
    opacity: 0;
  }
  body.show-chatbot .chatbot-toggler span:last-child {
    opacity: 1;
  }
  .chatbot {
    position: fixed;
    right: 35px;
    bottom: 90px;
    width: 420px;
    background: #fff;
    border-radius: 15px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transform: scale(0.5);
    transform-origin: bottom right;
    box-shadow: 0 0 128px 0 rgba(0,0,0,0.1),
                0 32px 64px -48px rgba(0,0,0,0.5);
    transition: all 0.1s ease;
  }
  body.show-chatbot .chatbot {
    opacity: 1;
    pointer-events: auto;
    transform: scale(1);
  }
  .chatbot header {
    padding: 16px 0;
    position: relative;
    text-align: center;
    color: #fff;
    background: #00ACEA;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  }
  .chatbot header span {
    position: absolute;
    right: 15px;
    top: 50%;
    display: none;
    cursor: pointer;
    transform: translateY(-50%);
  }
  header h2 {
    font-size: 1.4rem;
  }
  .chatbot .chatbox {
    overflow-y: auto;
    height: 510px;
    padding: 30px 20px 100px;
  }
  .chatbot :where(.chatbox, textarea)::-webkit-scrollbar {
    width: 6px;
  }
  .chatbot :where(.chatbox, textarea)::-webkit-scrollbar-track {
    background: #fff;
    border-radius: 25px;
  }
  .chatbot :where(.chatbox, textarea)::-webkit-scrollbar-thumb {
    background: #ccc;
    border-radius: 25px;
  }
  .chatbox .chat {
    display: flex;
    list-style: none;
  }
  .chatbox .outgoing {
    margin: 20px 0;
    justify-content: flex-end;
  }
  .chatbox .incoming span {
    width: 32px;
    height: 32px;
    color: #fff;
    cursor: default;
    text-align: center;
    line-height: 32px;
    align-self: flex-end;
    background: #00ACEA;
    border-radius: 4px;
    margin: 0 10px 7px 0;
  }
  .chatbox .chat p {
    white-space: pre-wrap;
    padding: 12px 16px;
    border-radius: 10px 10px 0 10px;
    max-width: 75%;
    color: #fff;
    font-size: 0.95rem;
    background: #00ACEA;
  }
  .chatbox .incoming p {
    border-radius: 10px 10px 10px 0;
  }
  .chatbox .chat p.error {
    color: #721c24;
    background: #f8d7da;
  }
  .chatbox .incoming p {
    color: #000;
    background: #f2f2f2;
  }
  .chatbot .chat-input {
    display: flex;
    gap: 5px;
    position: absolute;
    bottom: 0;
    width: 100%;
    background: #fff;
    padding: 3px 20px;
    border-top: 1px solid #ddd;
  }
  .chat-input textarea {
    height: 55px;
    width: 100%;
    border: none;
    outline: none;
    resize: none;
    max-height: 180px;
    padding: 15px 15px 15px 0;
    font-size: 0.95rem;
  }
  .chat-input span {
    align-self: flex-end;
    color: #00ACEA;
    cursor: pointer;
    height: 55px;
    display: flex;
    align-items: center;
    visibility: hidden;
    font-size: 1.35rem;
  }
  .chat-input textarea:valid ~ span {
    visibility: visible;
  }
  
  @media (max-width: 490px) {
    .chatbot-toggler {
      right: 20px;
      bottom: 20px;
    }
    .chatbot {
      right: 0;
      bottom: 0;
      height: 100%;
      border-radius: 0;
      width: 100%;
    }
    .chatbot .chatbox {
      height: 90%;
      padding: 25px 15px 100px;
    }
    .chatbot .chat-input {
      padding: 5px 15px;
    }
    .chatbot header span {
      display: block;
    }
  }
/*===========================
  2.5 Screen Slider
  ===========================*/

.screen-slider {}

.screen-slider .owl-dots {
    text-align: center;
    margin-top: 50px;
}

.screen-slider .owl-dots .owl-dot {
    height: 15px;
    width: 15px;
    border: 1px #00ACEA;
    display: inline-block;
    border-radius: 50%;
    margin: 0px 4px;
    transition: all 0.3s ease 0s;
}

.screen-slider .owl-dots .active {
    background-color: #00ACEA;
}

/*===========================
  END Screen Slider
  ===========================*/

/*===========================
  2.6 Download Area
  ===========================*/

.download-area {}

.download-btns {}

.download-btns a {
    margin: 0px 32px;
}

.download-btns a i {
    font-size: 19px;
    margin-right: 6px;
    vertical-align: middle;
}

/*===========================
END. Download Area
===========================*/

/*===========================
2.8 Subscribe Area
===========================*/

.subscribe-area {}

.subscribe_form {
    overflow: hidden;
    text-align: center;
}

.subscribe_form .input {}

.subscribe_form .input input {
    width: 100%;
    height: 50px;
    border: 2px solid #fff;
    background: transparent;
    color: #fff;
    padding-left: 15px;
    border-radius: 20px;
}

.subscribe_form .input input::-webkit-input-placeholder {
    /* Chrome/Opera/Safari */
    color: #fff;
    opacity: 1;
}

.subscribe_form .input input::-moz-placeholder {
    /* Firefox 19+ */
    color: #fff;
    opacity: 1;
}

.subscribe_form .input input:-ms-input-placeholder {
    /* IE 10+ */
    color: #fff;
    opacity: 1;
}

.subscribe_form .input input:-moz-placeholder {
    /* Firefox 18- */
    color: #fff;
    opacity: 1;
}

.subscribe_form .input i {}

.subscribe_form input[type='submit'] {
    width: 100%;
    height: 50px;
    border:  #fff;
    background: #00ACEA ;
    color: #fff;
    text-align: center;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0;
    transition: all 0.3s ease 0s;
}

.subscribe_form input[type='submit']:hover {
    box-shadow: rgba(0, 0, 0, 0) linear-gradient(130deg, #0D0F23, #00ACEA) repeat scroll 0 0;
}

/*===========================
END Subscribe Area
===========================*/

/*===========================
2.9 Team Area
===========================*/

.team-area {
   border: 1px solid magenta ;
}
.team-area .container{
    text-align: center;
}
.member-area {

}

.team-item {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    text-align: center;
    vertical-align: center;
    
    
}

.team-item img {
    max-width: 100%;
    position: relative;
    text-align: center;
    vertical-align:center;
   
}

.tmember-info {
    position: absolute;
    text-align: center;
    left: 0;
    bottom: -100%;
    background: rgba(0, 0, 0, 0) linear-gradient(130deg, #0D0F23, #00ACEA) repeat scroll 0 0;
    padding: 13px 20px 22px;
    opacity: 0;
    transition: all 0.3s ease 0s;
}

.team-item:hover .tmember-info {
    opacity: 1;
    bottom: 0;
}

.tmember-info h4 {
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 0;
    color: #fff;
}

.tmember-info span {
    display: block;
    font-size: 10px;
    color: #fff;
    letter-spacing: 0;
    text-transform: capitalize;
    line-height: 16px;
}

.tmember-info p {
    font-size: 12px;
    color: #fff;
    line-height: 18px;
    margin: 14px 0px 16px;
}

.social-btns {}

.social-btns a {
    height: 30px;
    width: 30px;
    border: 1px solid #fff;
    display: inline-block;
    text-align: center;
    line-height: 28px;
    border-radius: 50%;
    color: #fff;
    font-size: 13px;
    margin-right: 3px;
}

/*===========================
END Team Area
===========================*/

/*===========================
2.10 Achivement Area
===========================*/

.achivement-area {}

.achive-single {}

.achive-single .icon {
    font-size: 20px;
    color: #fff;
    margin-bottom: 12px;
}

.achive-single h2 {
    font-size: 20px;
    font-weight: 20;
    color: #fff;
    line-height: 20px;
}

.achive-single span {
    display: block;
    font-size: 20px;
    color: #fff;
    font-weight: 20;
    letter-spacing: 0;
    margin-top: 0px;
}


/*===========================
END Achivement Area
===========================*/

/*===========================
2.13 Map Area
===========================*/

#map {
    height: 600px;
}

/*===========================
END Map Area
===========================*/

/*===========================
2.14 Contact Area
===========================*/

.contact-area {}

.contact-inner {
    background: #fff;
    padding: 90px 0px 100px;
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.1);
    position: relative;
    margin-top: -400px;
}

.contact-flex-container {
    display: flex;
    padding: 0px 90px;
    flex-wrap: wrap;
    justify-content: space-between;
}

.contact-flex-container>div {
    box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.1);
    padding-top: 60px;
    padding-bottom: 60px;
}

.contact-address {
    flex-basis: calc(100% * (4/12));
    padding-left: 30px;
}

h4.contact-title {
    font-size: 20px;
    font-weight: 500;
    color: #272727;
    letter-spacing: 0;
    margin-bottom: 11px;
}

.contact-address p {
    color: #696969;
    margin-bottom: 18px;
}

.contact-address ul {}

.contact-address ul li {
    display: flex;
    margin-bottom: 30px;
    font-size: 14px;
    font-weight: 500;
    color: #696969;
    align-items: center;
    letter-spacing: 0.01em;
}

.contact-address ul li.h-addres {
    font-weight: 400;
    line-height: 25px;
}

.contact-address ul li i {
    height: 30px;
    width: 30px;
    border: 1px solid #00ACEA;
    color: #0D0F23;
    border-radius: 50%;
    text-align: center;
    line-height: 27px;
    font-size: 14px;
    margin-right: 10px;
}

.contact-form {
    flex-basis: calc(100% * (8/12) - 30px);
    padding-left: 70px;
    padding-right: 70px;
}

.contact-form form {}

.contact-form form .input {
    height: 33px;
    width: 100%;
    background: transparent;
    border: none;
    border-bottom: 1px solid #b4b4b4;
    font-size: 14px;
    font-weight: 500;
    color: #0D0F23;
    letter-spacing: 0;
    margin-bottom: 16px;
}

.contact-form form textarea#msg {
    height: 74px;
}

.contact-form form #send {
    width: 130px;
    height: 40px;
    background: #00ACEA ;
    border-radius: 20px;
    display: block;
    text-align: center;
    line-height: 40px;
    color: #fff;
    border: none;
    letter-spacing: 0.01em;
    transition: all 0.3s ease 0s;
}

.contact-form form #send:hover {
    box-shadow: 0px 5px 13px 0px rgba(0, 0, 0, 0.3);
}

/*===========================
END Contact Area
===========================*/

/*===========================
2.15 Footer Area
===========================*/

.footer-area {}

.footer-inner {
    text-align: center;
}

.footer-inner .fsocial {
    margin-bottom: 44px;
}

.footer-inner .fsocial li {
    display: inline-block;
}

.footer-inner .fsocial li a {
    display: block;
    height: 60px;
    width: 60px;
    border: 2px solid #fff;
    text-align: center;
    line-height: 60px;
    border-radius: 50%;
    color: #fff;
    font-size: 19px;
    margin: 0px 7px;
}

.footer-inner .fsocial li a:hover {
    background-color: #fff;
    color: #444;
}

.footer-inner p.copy-right {
    color: #fff;
}

/*===========================
END Footer Area
===========================*/