/* ------------------------------------------------
  Project:   Sofeland - Modern Software & SaaS Landing Page Template
  Author:    ThemeHt
------------------------------------------------ */
/* ------------------------
    Table of Contents

  1. General
  2. Transition
  3. Transform translate
  4. Box Shadow
  5. Custom Margin
  6. Custom Padding  
  7. Padding
  8. Margin
  9. Pre Loader
  10. Row Eq Height
  11. Background Overlay
  12. Scroll to Top
  13. Subscribe Form
  14. Header
  15. Footer
  16. Page Title
  17. Flat Icon

 
/* ------------------------
    General
------------------------*/
a { text-decoration: none; }
a:focus { text-decoration: none !important; }
a:focus, a:hover { color:#4222e0; text-decoration: none !important; }
a, button, input { outline: medium none !important; color:#4222e0; }

*::-moz-selection { background:#4222e0; color: #fff; text-shadow: none; }
::-moz-selection { background:#4222e0; color: #fff; text-shadow: none; }
::selection { background:#4222e0; color: #fff; text-shadow: none; }


/* ------------------------
    Transition
------------------------*/
a,
i,
.btn,
.btn span,
button,
img,
span,
.nav-link,
.dropdown-item,
.social-icons li:hover a,
.owl-item,
.featured-item:after,
.featured-item::before,
.featured-item,
.featured-icon,
.featured-item .featured-icon i,
.service-item:after,
.service-item::before,
.service-item,
.service-icon,
.service-item .service-icon i,
.price-table,
.post,
.post .post-image::before,
.post .post-image::after,
.post .post-desc,
.team-description,
.team-social-icon,
.team-member.style-3:before,
.team-member.style-3:after,
.timeline-content:before,
.timeline-content:after {
    -webkit-transition: all 0.5s ease-in-out 0s;
    -moz-transition: all 0.5s ease-in-out 0s;
    -ms-transition: all 0.5s ease-in-out 0s;
    -o-transition: all 0.5s ease-in-out 0s;
    transition: all 0.5s ease-in-out 0s;
}

/* ------------------------
    Transform translate
------------------------*/

/*--translate-X--*/
.transform-x, .hexagon-bg{transform: translateX(-50%); -webkit-transform: translateX(-50%); -o-transform: translateX(-50%); -ms-transform: translateX(-50%); -moz-transform: translateX(-50%);}

/*--translate-Y--*/
.transform-y, .align-center, .footer-1 .subscribe-box, .widget-searchbox .search-btn{transform: translateY(-50%); -webkit-transform: translateY(-50%); -o-transform: translateY(-50%); -ms-transform: translateY(-50%); -moz-transform: translateY(-50%);}

/*--translate-XY--*/
.clear-loader, .title-effect-2 i, .featured-item .featured-icon span, .blink-img, .hexagon-bg.style-2, .video-btn-pos, .video-btn .spinner-eff{transform: translateX(-50%) translateY(-50%); -webkit-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%);}

/*--translate-X-5--*/
.navbar-nav .dropdown-menu .nav-link:focus, .navbar-nav .dropdown-menu .nav-link:hover{transform: translateX(5px); -webkit-transform: translateX(5px); -o-transform: translateX(5px); -ms-transform: translateX(5px); -moz-transform: translateX(5px);}


/* ------------------------
    Box Shadow
------------------------*/
.box-shadow,
#site-header.fixed-header,
.navbar-nav ul,
.header-1 #header-wrap:before,
.header-1 #header-wrap:after,
.btn,
.icon-btn,
.owl-carousel .owl-nav button.owl-prev,
.owl-carousel .owl-nav button.owl-next,
#mc-form input[type="email"],
.timeline-content,
.timeline-title h2,
.contact-media,
.accordion .accordion-button,
.counter,
.img-box,
.tab.style-2,
.price-table,
.testimonial.style-1 .testimonial-content,
.testimonial.style-4 .testimonial-img,
.testimonial.style-5 .testimonial-content,
.team-member.style-1,
.team-link,
.team-member.style-2 .team-description,
.team-member.style-3,
.testimonial.style-2 .testimonial-content,
.testimonial.style-2 .testimonial-content:before,
.testimonial.style-2 .testimonial-content:after,
.testimonial.style-3 .testimonial-img,
.team-member.style-4 .team-description,
.team-description .team-icon li i,
.featured-item,
.featured-item:hover,
.featured-item.style-1 .featured-icon i,
.featured-item.style-2,
.featured-item.style-6 .featured-icon i,
.service-item.style-1,
.post,
.post.style-3 .post-image,
.post.style-3:hover,
.post.style-4 .post-desc,
.comment-reply a,
.clients-logo {
    -webkit-box-shadow: 0 4px 12px rgba(20, 108, 240, 0.08);
    -moz-box-shadow: 0 4px 12px rgba(20, 108, 240, 0.08);
    box-shadow: 0 4px 12px rgba(20, 108, 240, 0.08);
}

.featured-item.style-2:hover,
.service-item.style-1:hover,
.price-table:hover {
    -webkit-box-shadow: 0 12px 24px rgba(20, 108, 240, 0.17);
    -moz-box-shadow: 0 12px 24px rgba(20, 108, 240, 0.17);
    box-shadow: 0 12px 24px rgba(20, 108, 240, 0.17);
    transform: translateY(-6px);
}

/* ------------------------
    Custom Margin
------------------------*/
.custom-mt-5{z-index: 99; position: relative; margin-top: -50px;}
.custom-mt-7{z-index: 99; position: relative; margin-top: -70px;}
.custom-mt-10{z-index: 99; position: relative; margin-top: -100px;}
.custom-mt-12{z-index: 99; position: relative; margin-top: -120px;}
.custom-mt-15{z-index: 99; position: relative; margin-top: -150px;}
.custom-mt-20{z-index: 99; position: relative; margin-top: -200px;}
.custom-mt-25{z-index: 99; position: relative; margin-top: -250px;}
.custom-mt-30{z-index: 99; position: relative; margin-top: -300px;}


/* ------------------------
    Custom Padding
------------------------*/
.custom-pt-18{ padding-top: 180px;}
.custom-pb-18{ padding-bottom: 180px;}

/* ------------------------
    Padding
------------------------*/
.py-10{padding-top: 100px !important; padding-bottom: 100px !important;}
.py-15{padding-top: 150px !important; padding-bottom: 150px !important;}
.custom-py-1 { padding-top: 10rem !important; padding-bottom: 10rem !important; }
.custom-py-2 { padding-top: 15rem !important; padding-bottom: 15rem !important; }
.custom-py-3 { padding-top: 20rem !important; padding-bottom: 20rem !important; }
.custom-py-4 { padding-top: 25rem !important; padding-bottom: 25rem !important; }
.custom-py-5 { padding-top: 30rem !important; padding-bottom: 30rem !important; }


/* ------------------------
    Margin
------------------------*/
.mt-8{margin-top: 80px !important;}
.mt-10{margin-top: 100px !important;}
.mt-15{margin-top: 150px !important;}

.my-8{margin-top: 80px !important; margin-bottom: 80px !important;}
.my-10{margin-top: 100px !important; margin-bottom: 100px !important;}
.my-15{margin-top: 150px !important; margin-bottom: 150px !important;}
.my-20{margin-top: 200px !important; margin-bottom: 200px !important;}


/* ------------------------
    Pre Loader
------------------------*/
#ht-preloader { background: var(--themeht-white-color); bottom: 0; height: 100%; left: 0; overflow: hidden !important; position: fixed; right: 0; text-align: center; top: 0; width: 100%; z-index: 99999; }
.clear-loader { z-index: 999; box-sizing: border-box; display: inline-block; left: 50%; position: absolute; text-align: center; top: 50%; }
.loader-inner { position: relative; width: 96px; height: 96px; transform: rotate(45deg); }
.loader-square { position: absolute; top: 0; left: 0; width: 28px; height: 28px; margin: 2px; border-radius: 0px; background:#4222e0; background-size: cover; background-position: center; background-attachment: fixed; animation: square-animation 10s ease-in-out infinite both; }
.loader-square:nth-of-type(0) { animation-delay: 0s; }
.loader-square:nth-of-type(1) { animation-delay: -1.4285714286s; }
.loader-square:nth-of-type(2) { animation-delay: -2.8571428571s; }
.loader-square:nth-of-type(3) { animation-delay: -4.2857142857s; }
.loader-square:nth-of-type(4) { animation-delay: -5.7142857143s; }
.loader-square:nth-of-type(5) { animation-delay: -7.1428571429s; }
.loader-square:nth-of-type(6) { animation-delay: -8.5714285714s; }
.loader-square:nth-of-type(7) { animation-delay: -10s; }


/* ------------------------
    Background Overlay
------------------------*/
[data-overlay] {position:relative; z-index:0;}
[data-overlay]:before, .slide-overlay:before {position: absolute;  content: '';  background-color: #000000;  width: 100%;  height: 100%;  top: 0;  left: 0; z-index:-1;}
[data-overlay].white-overlay:before{background-color:#fff;}
[data-overlay].theme-overlay:before{background-color:#4222e0;}
[data-overlay].grediant-overlay:before{background: rgb(0,91,234); background: linear-gradient(90deg, rgba(0,91,234,1) 0%, rgba(37,117,252,1) 80%);}
[data-overlay="1"]:before{opacity:0.1;}
[data-overlay="2"]:before{opacity:0.2;}
[data-overlay="3"]:before{opacity:0.3;}
[data-overlay="4"]:before{opacity:0.4;}
[data-overlay="5"]:before{opacity:0.5;}
[data-overlay="6"]:before{opacity:0.6;}
[data-overlay="7"]:before{opacity:0.7;}
[data-overlay="8"]:before{opacity:0.8;}
[data-overlay="9"]:before{opacity:0.9;}
[data-overlay="10"]:before{opacity:1;}
[data-overlay="0"]:before{opacity:0;}


/* ------------------------
    Scroll to Top
------------------------*/
.scroll-top {position: fixed; bottom: 30px; right: 30px; z-index: 600; opacity: 0; visibility: hidden; -webkit-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out; -webkit-transform: translate3d(0, 200%, 0); -ms-transform: translate3d(0, 200%, 0); transform: translate3d(0, 200%, 0);}
.scroll-top a, .scroll-top a:visited {display: block; height: 60px; width: 60px; line-height: 60px; text-align: center; border-radius: 10px; -webkit-box-shadow: 0 0 15px 6px rgba(0,0,0,0.1); -moz-box-shadow: 0 0 15px 6px rgba(0,0,0,0.1); box-shadow: 0 0 15px 6px rgba(0,0,0,0.1); -webkit-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out; font-size:32px; color: var(--themeht-white-color); background:#4222e0;}
.scroll-top a:hover, .scroll-top a:focus {color:#4222e0; background: var(--themeht-white-color);}
.scroll-top.scroll-visible {opacity: 1; visibility: visible; -webkit-transform: translate3d(0, 0, 0); -ms-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0);}


 /* ------------------------
    Subscribe Form
------------------------*/
.subscribe-form {margin: 0; padding: 0; position: relative;}
#mc-form {width: 100%;}
#mc-form input[type="email"] {width: 100%; border: none; background: var(--themeht-white-color); border-radius: 10px; color: var(--themeht-text-color); font-size: 14px; padding: 0 20px; height: 60px;}
#mc-form input[type="email"]::-webkit-input-placeholder {color: var(--themeht-text-color);}
#mc-form input[type="email"]::-moz-placeholder {color: var(--themeht-text-color);}
#mc-form input[type="email"]:-ms-input-placeholder {color: var(--themeht-text-color);}
#mc-form input[type="email"].placeholder {color: var(--themeht-text-color) !important;}
#mc-form .btn {position: absolute; border-radius: 0px; top: 5px; right: 5px; padding: 0 25px; transition: 0.20s; height: 50px; border-radius: 10px;}
#mc-form .btn:hover{transform: translateX(-3px);}
.footer-1 .subscribe-box{position: absolute; top: 0; width: 100%;}
.subscribe-inner {border-radius: 10px; -webkit-box-shadow: 0 0 75px rgba(0,0,0,.1); -moz-box-shadow: 0 0 75px rgba(0,0,0,.1); box-shadow: 0 0 75px rgba(0,0,0,.1); padding: 40px 25px; background: #fff; position: relative; z-index: 1;}


/* ------------------------
    Header
------------------------*/
.logo img {height: 50px;}
#site-header.fixed-header .logo img {height: 45px;}
.header {position: absolute; top: 0; width: 100%; z-index: 1200;}
.header.header-1 {top: 30px; }
#header-wrap {padding: 20px 0; position: relative;}
.header-1 #header-wrap {border-radius: 10px; background: var(--themeht-white-color); box-shadow: rgba(0, 0, 0, 0.05) 0px 10px 50px;}
.header-1 #header-wrap{padding: 10px 20px;}
#site-header.fixed-header {animation: smoothScroll 1s forwards; position: fixed; top:0; left:0; width: 100%; z-index: 999 !important; background: var(--themeht-white-color) !important;}
.header-1 #header-wrap:before{content: ""; border-radius: 10px; box-shadow: rgba(0, 0, 0, 0.05) 0px 10px 50px; background: #ffffff; width: 96%; height: 40px; position: absolute; left: 2%; bottom: -15px; z-index: -1}
.header-1 #header-wrap:after{content: ""; border-radius: 10px; box-shadow: rgba(0, 0, 0, 0.05) 0px 10px 50px; background: #ffffff; width: 92%; height: 40px; position: absolute; left: 4%; bottom: -30px; z-index: -9}
#site-header.fixed-header #header-wrap:before, #site-header.fixed-header #header-wrap:after{display: none;}
.header-2 #header-wrap, .header-3 #header-wrap{background: none;}
.header-2 #header-wrap:before, .header-2 #header-wrap:after{display: none;}


.navbar { padding: 0; }
.navbar-nav .nav-item{margin: 0 15px;}
.navbar-nav .nav-item.dropdown .dropdown-menu { padding: 10px; background: var(--themeht-white-color); top: 100%; border: none; margin-top: 0; left: 0;}
.navbar-brand {margin-right: 0;}
.nav-item.dropdown .dropdown-menu li:last-child{margin-bottom: 0;}
.nav-item.dropdown .dropdown-menu a {display: block; padding: 10px 20px; white-space: nowrap; position: relative; background: none; color: var(--themeht-text-color); font-size: 14px; font-weight: 500;}
.nav-item.dropdown .dropdown-menu a:hover{color:#4222e0; padding-left: 35px;}
.navbar-nav .dropdown-menu .dropdown-submenu .dropdown-toggle.show,
.navbar-nav .dropdown-menu .dropdown-submenu .dropdown-toggle:focus{color:#4222e0; padding-left: 35px;}


.nav-item.dropdown .dropdown-menu a::before {position: absolute; top: 0; left: 10px; color: transparent; content: '.'; text-shadow: 0 0 transparent; font-size: 2em; line-height: 1em; -webkit-transition: text-shadow 0.3s, color 0.3s; -moz-transition: text-shadow 0.3s, color 0.3s; transition: text-shadow 0.3s, color 0.3s; pointer-events: none; animation: opacitychange 1s ease-in-out infinite;}
.nav-item.dropdown .dropdown-menu a:hover::before,
.nav-item.dropdown .dropdown-menu a:focus::before {color:#4222e0; text-shadow: 10px 0 var(--themeht-text-color), -10px 0 var(--themeht-text-color);}
.nav-link.dropdown-toggle::after, .navbar-nav .dropdown-submenu .dropdown-toggle::after { border: none; content: '\F282'; font-family: bootstrap-icons !important; vertical-align: middle; font-size: 12px; line-height: 1; width: 10px; font-weight: 700; }

@media (min-width:992px) {
    .navbar-nav .dropdown-menu { min-width: 12em !important; max-width: 20em !important; }
    .navbar-nav .dropdown > .dropdown-menu { opacity: 0; visibility: hidden; transform: translateY(10px); transition: all 0.8s ease; position: absolute; display: block; pointer-events: none; background: var(--themeht-white-color); }
    .navbar-nav .dropdown:hover > .dropdown-menu { opacity: 1; transform: translateY(0); display: block; opacity: 1; pointer-events: auto; visibility: visible; }
    .navbar-nav .dropdown-submenu:hover .dropdown-menu { top: 0; }
    .navbar-nav.ms-auto .nav-item.dropdown .dropdown-menu { right: 0; }
    .navbar-nav.ms-auto .dropdown-menu .dropdown-submenu .dropdown-menu { left: auto; right: 100%; }
    .navbar-nav .dropdown-submenu .dropdown-toggle::after { content: '\F285'; position: absolute; right: 15px; top: 16px; font-size: 10px; }
}
@media (max-width:991.98px) {
    .navbar-nav .dropdown-submenu .dropdown-menu { padding: 0; top: 0; }
    .navbar-nav .dropdown-toggle::after { position: absolute; top: 50%; right: 15px; transform: translateY(-50%); }
}

.navbar-nav .dropdown-menu .dropdown-submenu .dropdown-menu {background: var(--themeht-white-color); left: 100%; margin: 0; right: auto; top: 0; }
.navbar-nav .dropdown-submenu { display: block; position: relative; }

.navbar-nav .nav-link { color: var(--themeht-text-color); font-size: 16px; line-height: 1.2; letter-spacing: 0.02em; font-weight: 500; padding: 0 !important; border-radius: 0; text-transform: capitalize; position: relative; }
.navbar-nav .nav-link:hover, .navbar-nav .nav-item .nav-link.active { color:#4222e0; }
.navbar-nav .nav-link::before { position: absolute; bottom: -15px; left: 50%; color: transparent; content: '.'; text-shadow: 0 0 transparent; font-size: 2em; -webkit-transition: text-shadow 0.3s, color 0.3s; -moz-transition: text-shadow 0.3s, color 0.3s; transition: text-shadow 0.3s, color 0.3s; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); transform: translateX(-50%); pointer-events: none; animation: opacitychange 1s ease-in-out infinite; line-height: 1; }
.navbar-nav .nav-link:hover::before, .navbar-nav .nav-item .nav-link.show::before, .navbar-nav .nav-item .nav-link.active::before, .navbar-nav .nav-link:focus::before { color:#4222e0; text-shadow: 10px 0 var(--themeht-text-color), -10px 0 var(--themeht-text-color); }
.header-3 .navbar-nav .nav-link { color: var(--themeht-white-color); }
.header-3 .navbar-nav .nav-link:hover, .header-3 .navbar-nav .nav-item .nav-link.active { color: var(--themeht-white-color); }
.header-3 .navbar-nav .nav-link:hover::before, .header-3 .navbar-nav .nav-item .nav-link.active::before, .header-3 .navbar-nav .nav-link:focus::before { color: var(--themeht-white-color); }
.header-3.fixed-header .navbar-nav .nav-link { color: var(--themeht-text-color) }
.header-3.fixed-header .navbar-nav .nav-link:hover, .header-3.fixed-header .navbar-nav .nav-item .nav-link.active { color:#4222e0 }
.header-3.fixed-header .navbar-nav .nav-link:hover::before, .header-3.fixed-header .navbar-nav .nav-link.active::before { color:#4222e0; }
.logo .sticky-logo { display: none !important; }
.header-2.fixed-header .logo > img, .header-3.fixed-header .logo > img { display: none !important; }
.header-2.fixed-header .logo .sticky-logo, .header-3.fixed-header .logo .sticky-logo { display: block !important; }

/* ------------------------
    Footer
------------------------*/
.footer{padding: 80px 0; }
.footer-pattern {bottom: 0; position: absolute;}
.primary-footer{position: relative; z-index: 99; font-size: 16px;}
.secondary-footer{color: var(--themeht-body-color); font-weight: normal;}
.copyright{margin-top: 50px;}
.copyright span a{font-weight: 600;}
.theme-bg .copyright{border-top: 2px solid rgba(255,255,255,0.030); padding-top: 50px;}
.footer-logo img{height: 60px;}
.primary-footer, .primary-footer a{color: var(--themeht-text-color);}
.primary-footer h4{margin-bottom: 20px;}
.footer-1{margin-top: 100px; padding-top: 150px;}
.footer-2{padding-top: 250px;}
.footer-3{padding-top: 220px;}
.footer-4{padding-left: 10rem; padding-right: 10rem}

.media-icon.list-inline li{display: inline-block;}
.media-icon li{margin-bottom: 15px; font-size: 16px; font-weight: 400;}
.media-icon li:last-child{margin-bottom: 0;}
.media-icon li a{color:#4222e0}
.media-icon li a:hover{text-decoration: underline !important;}

.footer-list li{margin-bottom: 15px; text-transform: capitalize;}
.footer-list li:last-child{margin-bottom: 0;}
.footer-list li a{position: relative; font-size: 16px; font-weight: 400; color: var(--themeht-text-color)}
.footer-list .list-inline li{display: inline-block; margin: 0 10px;}

.footer-logo{margin-bottom: 15px;}
.footer-social ul li{display: inline-block;}
.footer-social ul li a{color: var(--themeht-text-color)}
.footer-social ul li a:hover{color:#4222e0}

.theme-bg .primary-footer, .theme-bg .primary-footer a,
.theme-bg .secondary-footer,
.theme-bg .footer-social ul li a,
.theme-bg .footer-list li a,
.theme-bg .primary-footer h4,
.dark-bg .primary-footer, .dark-bg .primary-footer a,
.dark-bg .secondary-footer,
.dark-bg .footer-social ul li a,
.dark-bg .footer-list li a,
.dark-bg .primary-footer h4{color: var(--themeht-white-color)}

.footer h4{display: block;}

#footer-wave {position: absolute; height: 100px; top: 0; left: 0; width: 100%;}
#footer-wave svg path {fill: var(--themeht-white-color);} 
#footer-wave svg {-webkit-transform: scale(1.2); transform: scale(1.2);} 


/* ------------------------
    Page Title
------------------------*/
.page-title {position: relative; overflow: hidden; clip-path: polygon(0 0, 100% 0, 100% 85%, 75% 100%, 25% 85%, 0 100%); display: block; padding: 250px 0 200px; z-index: 1; background-image: radial-gradient(circle at 60% 40%, #ffffff 0%, #f7f7f7 100%);}
.page-title h1{font-size: 50px; color: var(--themeht-text-color); line-height: 60px; font-weight: 400; margin-bottom: 20px;}
.page-title span{ font-weight: 600;}
.page-title p{margin-bottom: 0; color: var(--themeht-text-color);}
.breadcrumb {padding: 0; background:none; display: inline-block; border-radius: 0; margin: 0; text-transform: capitalize; color: var(--themeht-text-color); font-weight: 500;}
.breadcrumb-item{display: inline-block;}
.breadcrumb-item a{color: var(--themeht-text-color)}
.breadcrumb-item.active, .breadcrumb-item a:hover{color:#4222e0;}