/***************************************
========================================

	Author Name   : Themeplaza
	This is HTML5 template
	Template Name : Farin Personal Portfolio Template
	Version: 1.0

****************************************
=======================================/

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

 ==> Table Of Content

	01 Basics
	02 Buttons
	03 Header
	04 Banner
	05 About
	06 Service
	07 cta
	08 Works
	09 Counter
	10 Resume
	11 Blog
	12 Contact
	13 Footer
	14 Top-control


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

/* ----------------------------------------------------------------
    [ 01 Start Basics ]
-----------------------------------------------------------------*/
* {
    margin: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    outline: none;
    list-style: none;
    word-wrap: break-word;
}

body {
    font-family: "Poppins", sans-serif;
    font-size: 15px;
    line-height: 26px;
    font-weight: 400;
    letter-spacing: 0.5px;
    color: #333333;
    overflow-x: hidden;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    color: #333333;
    font-weight: 600;
}
img {
    max-width: 100%;
    height: auto;
}
ul {
    padding: 0;
    list-style: none;
}
p {
    font-weight: 400;
    font-family: "Poppins", sans-serif;
    margin: 0;
    font-size: 15px;
    color: #333333;
    letter-spacing: 0;
}
a:hover {
    text-decoration: none;
    outline: none;
}
.text_white {
    color: #fff;
}
.padding_0 {
    padding: 0;
}
.gray_bg {
    background: #ebf4fa;
}
.dark_bg {
    background: #2b2344;
}
/* START PRELOADER DESIGN */
.preloader {
    position: fixed;
    left: 0;
    width: 0;
    height: 100%;
    width: 100%;
    text-align: center;
    z-index: 9999999;
    background-color: transparent;
    -webkit-transition: 0.9s;
    transition: 0.9s;
}

.preloader .loader {
    -webkit-transition: 0.5s;
    transition: 0.5s;
    position: absolute;
    width: 90px;
    height: 90px;
    border-radius: 50%;
    display: inline-block;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 45%;
    -webkit-transform: translateY(-45%);
    transform: translateY(-45%);
}

.preloader .loader .loader-outter {
    position: absolute;
    border: 4px solid #f95353;
    border-left-color: transparent;
    border-bottom: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    -webkit-animation: loader-outter 1s cubic-bezier(0.42, 0.61, 0.58, 0.41)
        infinite;
    animation: loader-outter 1s cubic-bezier(0.42, 0.61, 0.58, 0.41) infinite;
}

.preloader .loader .loader-inner {
    position: absolute;
    border: 4px solid #f95353;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    left: calc(50% - 30px);
    top: calc(50% - 30px);
    border-right: 0;
    border-top-color: transparent;
    -webkit-animation: loader-inner 1s cubic-bezier(0.42, 0.61, 0.58, 0.41)
        infinite;
    animation: loader-inner 1s cubic-bezier(0.42, 0.61, 0.58, 0.41) infinite;
}

.preloader .loader span {
    display: inline-block;
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    color: #f95353;
    font-size: 25px;
    font-weight: 700;
}

.preloader::before,
.preloader::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 60%;
    height: 100%;
    z-index: -1;
    background: #fff;
    -webkit-transition: 0.9s;
    transition: 0.9s;
}

.preloader::after {
    left: auto;
    right: 0;
}

.preloader.preloader-deactivate {
    visibility: hidden;
}

.preloader.preloader-deactivate::after,
.preloader.preloader-deactivate::before {
    width: 0;
}

.preloader.preloader-deactivate .loader {
    opacity: 0;
    visibility: hidden;
}

@-webkit-keyframes loader-outter {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes loader-outter {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@-webkit-keyframes loader-inner {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(-360deg);
        transform: rotate(-360deg);
    }
}

@keyframes loader-inner {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(-360deg);
        transform: rotate(-360deg);
    }
}
/* END PRELOADER DESIGN */

/* Start Section-Padding */
.section_padding {
    padding: 50px 0;
}
.section_padding1 {
    padding: 50px 0 100px;
}
/* End Section-Padding */

/* Start Section-Heading */
.section_heading {
    padding-bottom: 80px;
}

.section_heading h2 {
    font-size: 50px;
    font-weight: 900;
    text-transform: uppercase;
    color: #222;
    margin-top: 5px;
    margin-bottom: 10px;
}
.section_heading h2 span {
    color: #f95353;
    font-size: 50px;
    font-weight: 900;
}
.dark_bg .section_heading h2 {
    color: #fff;
}
.dark_bg .section_heading h2 span {
    color: #f95353;
    font-size: 50px;
    font-weight: 900;
}
.section_heading .sm_border {
    display: block;
    height: 2px;
    width: 70px;
    margin-bottom: 15px;
    bottom: -5px;
    position: relative;
    left: 50%;
    background-color: #f95353;
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
}
.section_heading span {
    font-weight: 400;
    color: #f95353;
}
/* End Section-Heading */

/* ----------------------------------------------------------------
    [ End Basics ]
-----------------------------------------------------------------*/

/* ----------------------------------------------------------------
    [ 02 Start Buttons ]
-----------------------------------------------------------------*/
/* Start Btn-Style */
.main_btn {
    color: #fff;
    font-size: 12px;
    margin-top: 25px;
    text-transform: capitalize;
    padding: 15px 20px;
    letter-spacing: 0.5px;
    font-weight: 600;
    border: 3px solid #f95353;
    border-radius: 20px;
    background: #f95353;
    line-height: 10px;
    -webkit-transition: all 0.4s ease-in-out;
    transition: all 0.4s ease-in-out 0s;
}
.main_btn:hover {
    color: #222;
    background: #fff;
    border: 3px solid #f95353;
}
.blog-info .blog_btn {
    padding: 20px 30px;
}
/* ----------------------------------------------------------------
    [ End Buttons ]
-----------------------------------------------------------------*/

/* ----------------------------------------------------------------
    [ 03 Start Header ]
-----------------------------------------------------------------*/

/* Style for other pages navbar */
.other-navbar {
    background-color: #333;
    color: #333;
    box-shadow: 0 10px 15px rgba(25, 25, 25, 0.1);
    position: sticky;
}
.sticky-navbar {
    position: -webkit-sticky; /* For Safari */
    position: sticky;
    top: 0;
    z-index: 1000; /* Ensures navbar is on top of other elements */
    background-color: #333; /* Navbar background */
    color: #fff; /* Navbar text color */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    padding: 15px 0; /* Padding for spacing */
}

.sticky-navbar .navbar-nav > li > a {
    color: #fff; /* Link color */
}

.other-navbar .navbar-nav > li > a {
    color: black !important; /* Use !important to override other styles */
}
@media (max-width: 768px) {
    .other-navbar .navbar-nav > li > a {
        color: white !important;
    }
}

.other-navbar .navbar-brand p {
    color: #f95353;
}
/* Styling for active link inside the .other-navbar */
.other-navbar .navbar-nav > li.active > a {
    color: #f95353 !important; /* Set the active link text color */
    font-weight: bold; /* Make the active link text bold */


}



.navbar-default {
    border: none;
    border-radius: 0;
    margin-bottom: 0;
    width: 100%;
    padding: 20px 0;
    background: #fff;
    transition: all 0.4s ease-in-out;
    -webkit-transition: all 0.4s ease-in-out;
}
.navbar-brand p {
    font-size: 23px;
    font-weight: 800;
    text-transform: capitalize;
    letter-spacing: 1px;
    color: #f95353;
    font-family: "Poppins", sans-serif;
}
.navbar-default .navbar-collapse,
.navbar-default .navbar-form {
    border-color: #fff;
}
.menu-top {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
}
.navbar-default .navbar-nav > li > a {
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    text-transform: capitalize;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
}
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
    color: #f95353;
}
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
    color: #fff;
    background-color: transparent;
}
.mobile-nav {
    display: none;
}
.navbar-default.menu-shrink {
    background-color: #fff;
    box-shadow: 0 10px 15px rgba(25, 25, 25, 0.1);
    padding: 10px 0;
    width: 100%;
    animation: fadeInDown 1s both 0.2s;
}
.navbar-default.dark_bg_menu.menu-shrink {
    background-color: #2b2344;
    box-shadow: 0 10px 15px rgba(25, 25, 25, 0.1);
    padding: 10px 0;
    width: 100%;
    animation: fadeInDown 1s both 0.2s;
}
.navbar-default.dark_bg_menu.menu-shrink li a {
    color: #fff !important;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
}
.navbar-default.menu-shrink .navbar-brand p {
    color: #f95353;
}
.navbar-default.menu-shrink li a {
    color: #333333;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
}
.navbar-default.menu-shrink li a:hover {
    color: #f95353 !important;
}
.navbar-default.menu-shrink .navbar-nav > .active > a,
.navbar-default.menu-shrink .navbar-nav > .active > a:hover,
.navbar-default.menu-shrink .navbar-nav > .active > a:focus {
    color: #f95353 !important;
    background-color: transparent;
}
.navbar-default .navbar-toggle {
    background: #fff none repeat scroll 0 0;
}
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
    background-color: #fff;
}
.navbar-default .navbar-toggle .icon-bar {
    background-color: #f95353;
}
/* ----------------------------------------------------------------
     [ End Header ]
-----------------------------------------------------------------*/

/* ----------------------------------------------------------------
     [ 04 Start Banner ]
-----------------------------------------------------------------*/
#particles-js {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
}
.main_banner {
    height: 700px;
    background-size: cover;
    background-repeat: no-repeat;
}
.banner_bg {
    background-image: url(../images/banner1.jpg);
    background-size: cover;
    background-position: center center;
    position: relative;
}
.banner_bg:before {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.1);
}
.banner_content {
    margin-top: 230px;
}
.banner_content h1 {
    font-weight: 600;
    color: #fff;
    font-size: 50px;
    margin: 5px 0 10px;
    text-transform: capitalize;
}
.dark_bg .banner_content h1 {
    color: #fff;
}
.banner_content h3 {
    color: #f95353;
    
    font-size: 25px;
}
.banner_content h1 span .fw_600 {
    font-weight: 600;
}
.cd-headline.clip .cd-words-wrapper::after {
   
    position: absolute;
    top: 0;
    right: 0;
    width: 2px;
    height: 100%;
    background-color: #fff;
}
.banner_content p {
    color: #fff;
    font-size: 14px;
    padding-bottom: 40px;
    max-width: 100%;
}
.dark_bg .banner_content p {
    color: #fff;
}
.banner_btn {
    background: #f95353;
    border-color: #f95353;
    color: #fff;
    border-radius: 30px;
    text-transform: capitalize;
    margin: 25px 10px 0px 0px;
    padding: 10px 32px;
}
.banner_btn:hover {
    box-shadow: 1px 5px 12px rgba(0, 0, 0, 0.15);
}
#round {
    position: absolute;
    top: 85px;
    bottom: 0;
    z-index: 9;
}
/* ----------------------------------------------------------------
    [ End Banner ]
-----------------------------------------------------------------*/

/* ----------------------------------------------------------------
    [ 05 Start About ]
-----------------------------------------------------------------*/
.about_image img {
    box-shadow: 0 5px 14px 0 rgb(0 0 0 / 6%);
    padding: 10px;
    background: #ffffff;
}
.about_content_area {
    margin-top: 20px;
}
.single_about h4 {
    font-size: 32px;
    text-transform: capitalize;
    margin: 0 0 20px;
    color: #222;
}
.single_about h4 span {
    color: #f95353;
}
.dark_bg .single_about h4 {
    color: #fff;
}
.dark_bg .about_content_area p {
    color: #fff;
}
.about_details {
    margin-top: 15px;
}
.about_details li {
    color: #333;
    display: inline-block;
    margin-top: 15px;
    width: 49%;
}
.about_details span {
    color: #222;
    font-weight: 600;
    text-transform: capitalize;
    display: inline-block;
    width: 25%;
}
.dark_bg .about_details span {
    color: #fff;
}
.ct_about {
    margin: 10px 0;
}
.dark_bg .ct_about {
    color: #fff;
}
.ct_about span i {
    margin-right: 5px;
}
/* .single_about a i {
    margin-right: 20px;
    padding-right: 20px;
    border-right: 1px solid #ddd;
} */
/* ----------------------------------------------------------------
    [ End About ]
-----------------------------------------------------------------*/

/* ----------------------------------------------------------------
    [ 06 Start Service ]
-----------------------------------------------------------------*/
.single-service {
    overflow: hidden;
    padding: 45px 25px;
    background: #fff;
    border-radius: 3px;
    box-shadow: 0px 0px 20px rgb(0 0 0 / 10%);
    border-bottom: 4px solid #f95353;
    margin-bottom: 30px;
    transition: all 0.4s ease;
}
.dark_bg .single-service {
    background: #1d1730;
}
.single-service:hover {
    -webkit-transform: translateY(-5px);
    transform: translateY(-5px);
}
.single-service i {
    background: #f95353;
    width: 60px;
    height: 60px;
    line-height: 60px;
    border-radius: 50%;
    text-align: center;
    transition: all 0.4s ease;
    font-size: 25px;
    display: inline-block;
    color: #fff;
}
.single-service h4 {
    font-size: 20px;
    margin-top: 30px;
    text-transform: capitalize;
    color: #222;
    transition: all 0.4s ease;
}
.dark_bg .single-service h4 {
    color: #fff;
}
.single-service p {
    transition: all 0.4s ease;
    color: #333333;
    margin-top: 15px;
}
.dark_bg .single-service p {
    color: #fff;
}
/* ----------------------------------------------------------------
    [ End Service ]
-----------------------------------------------------------------*/

/* ----------------------------------------------------------------
    [ 07 Start Cta ]
-----------------------------------------------------------------*/
.cta_section {
    background: url(../images/cta-action.jpg);
    position: relative;
    background-size: cover;
    background-attachment: fixed;
}
.cta_section:before {
    position: absolute;
    content: "";
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: rgba(245, 84, 34, 0.4);
}
.cta_content h3 {
    color: #fff;
    font-size: 30px;
    text-transform: capitalize;
    margin-top: 0;
    margin-bottom: 20px;
}
/* ----------------------------------------------------------------
    [ End Cta ]
-----------------------------------------------------------------*/

/* ----------------------------------------------------------------
    [ 08 Start Works ]
-----------------------------------------------------------------*/
.work_filter ul {
    padding: 0;
    list-style: none;
    margin-bottom: 30px;
}
.work_filter ul li {
    font-weight: 600;
    text-transform: capitalize;
    display: inline-block;
    cursor: pointer;
    font-size: 15px;
    padding: 7px 25px;
    border-radius: 30px;
    border: 1px solid #f95353;
    color: #333333;
    letter-spacing: 1px;
    margin: 0 5px 20px;
    transition: all 0.5s ease-in-out;
}
.work_filter .active {
    color: #fff;
    border: 1px solid #f95353;
    background: #f95353;
}
.dark_bg .work_filter ul li {
    border: 1px solid #f95353;
    color: #fff;
}
.work_filter ul li:hover {
    color: #fff;
    border: 1px solid #f95353;
    background: #f95353;
}
.work_content_area .item-img {
    position: relative;
    margin-bottom: 30px;
    -webkit-transition: all 0.4s;
    transition: all 0.4s;
}
.work_content_area .item-img:hover {
    -webkit-box-shadow: -10px 10px 30px rgba(0, 0, 0, 0.1);
    box-shadow: -10px 10px 30px rgba(0, 0, 0, 0.1);
}
.work_content_area .item-img:hover .item-img-overlay {
    visibility: visible;
    opacity: 1;
}
.overlay-info {
    margin-top: 50px;
}
.work_content_area .item-img-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    padding: 30px;
    background: rgba(245, 84, 34, 0.6) none repeat scroll 0 0;
    opacity: 0;
    visibility: hidden;
    transition: 2s;
}
.work_content_area .item-img-overlay .icon {
    position: absolute;
    right: 155px;
    bottom: 120px;
    width: 40px;
    height: 40px;
    line-height: 40px;
    border-radius: 50%;
    text-align: center;
    font-size: 20px;
    color: #fff;
}
.work_content_area:hover a {
    animation: fadeInDown 700ms ease-in-out;
}
/* ----------------------------------------------------------------
    [ End Works ]
-----------------------------------------------------------------*/

/* ----------------------------------------------------------------
    [ 09 Start Counter ]
-----------------------------------------------------------------*/

#counter_area {
    background: url(../images/counter.jpg);
    position: relative;
    background-size: cover;
    background-attachment: fixed;
}
#counter_area:before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    right: 0;
    bottom: 0;
    background: rgba(245, 84, 34, 0.4);
}
.single_counter {
    padding: 15px 15px 15px 15px;
}
.single_counter h3 {
    font-size: 38px;
    font-weight: 600;
    color: #fff;
}
.single_counter span {
    font-size: 38px;
    font-weight: 600;
    color: #f95353;
}
.single_counter h5 {
    font-size: 18px;
    color: #fff;
    font-weight: 600;
    margin-bottom: 0;
}
/* ----------------------------------------------------------------
    [ End Counter ]
-----------------------------------------------------------------*/

/* ----------------------------------------------------------------
    [ 10 Start Resume ]
-----------------------------------------------------------------*/
.education-container {
    position: relative;
    display: block;
    margin: 0;
}
.edu-list {
    position: relative;
    display: block;
    margin: 0 50px;
    list-style: none;
}
.edu-list > li {
    background: transparent;
    border: 1px solid #f95353;
    border-radius: 10px;
    position: relative;
    margin: 0 0 30px;
    padding: 25px 25px 25px 25px;
}
.dark_bg .edu-list > li {
    border: 1px solid #f95353;
}
.edu-list > li strong {
    color: #f95353;
    font-size: 14px;
}
.edu-list > li h5 {
    font-size: 16px;
}
.dark_bg .edu-list > li h5 {
    color: #fff;
}
.dark_bg .edu-list > li p {
    color: #fff;
}
.edu-list > li:not(:last-child)::before {
    content: "";
    position: absolute;
    top: 40px;
    left: -27px;
    width: 3px;
    height: 100%;
    background: #f95353;
}
.edu-list > li::after {
    content: "\e032";
    position: absolute;
    top: 0;
    left: -50px;
    width: 50px;
    height: 50px;
    line-height: 50px;
    border-radius: 100%;
    text-align: center;
    font-size: 20px;
    font-family: "et-line";
    background: #f95353;
    color: #fff;
    box-shadow: 2px 4px 15px rgba(0, 0, 0, 0.07);
    cursor: pointer;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.experience > li::after {
    content: "\e015";
    position: absolute;
    top: 0;
    left: -50px;
    width: 50px;
    height: 50px;
    line-height: 50px;
    border-radius: 100%;
    text-align: center;
    font-size: 20px;
    font-family: "et-line";
    background: #f95353;
    color: #fff;
    box-shadow: 2px 4px 15px rgba(0, 0, 0, 0.07);
    cursor: pointer;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
/* ----------------------------------------------------------------
    [ End Resume ]
-----------------------------------------------------------------*/

/* ----------------------------------------------------------------
    [ 12 Start Blog ]
-----------------------------------------------------------------*/

.single_blog {
    margin-bottom: 30px;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.single_blog:hover img {
    -moz-transform: scale(1.03);
    -webkit-transform: scale(1.03);
    transform: scale(1.09);
}

.single_blog .blog-image {
    overflow: hidden;
}

.single_blog img {
    width: 100%;
    border-radius: 3px 3px 0 0;
    -moz-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    transition: all 0.5s;
    height: 300px;
    object-fit: cover;
}

.blog-info h4{
font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-top:4px;
}

.blog-info1{
box-shadow: 0 1px 30px rgba(255, 255, 255, 0.2);
  padding: 20px 30px;
  flex-grow: 1;
}
.blog-info1 h4 {
    font-size: 18px;
    white-space: normal; /* Allow text to wrap */
    overflow: hidden; /* Hide overflow */
    text-overflow: ellipsis; /* Show ellipsis */
    padding-top: 4px;
    display: -webkit-box; /* Create a flexbox-like container */
    -webkit-line-clamp: 2; /* Limit to 2 lines */
    -webkit-box-orient: vertical; /* Set the box orientation to vertical */
}


.blog-thumb {
    background: transparent;
    box-shadow: 0 1px 30px rgba(0, 0, 0, 0.1);
    border-radius: 3px;
    text-align: left;
    margin-bottom: 30px;
    display: flex;
    flex-direction: column;
    height: 100%;
  
}

.blog-thumb small {
    color: #f95353;
    font-weight: 500;
    display: block;
}

.blog-thumb small .fa {
    margin-right: 5px;
}

.blog-thumb small,
.blog-thumb small + span {
    display: inline-block;
    vertical-align: middle;
}

.blog-thumb small + span {
    color: #777;
    font-size: 10px;
    font-weight: bold;
    text-transform: capitalize;
    margin-left: 2px;
}

.dark_bg .blog-thumb small + span {
    color: #fff;
}

.blog-thumb h4 {
    color: #222;
    
    text-transform: capitalize;
    font-size: 23px;
    transition: all 0.3s ease;
}

.dark_bg .blog-thumb h4 {
    color: #fff;
}

.dark_bg .blog-thumb p {
    color: #fff;
}

.blog-thumb h4:hover {
    color: #f95353;
}

.blog-info {
    box-shadow: 0 1px 30px rgba(255, 255, 255, 0.2);
    padding: 20px 30px;
    flex-grow: 1; /* Allow it to grow and fill available space */
}

.blog-info .blog_btn {
    color: #222;
    font-size: 14px;
    margin-top: 10px;
    text-transform: capitalize;
    background: transparent;
    border: none;
    font-weight: 500;
    transition: all 0.4s ease-in-out 0s;
    padding: 10px 0px;
}

.dark_bg .blog-info .blog_btn {
    color: #fff;
}

.blog-info .blog_btn:hover {
    color: #f95353;
}
.blog-title {
    font-size: 18px;
    
    overflow: hidden;
    text-overflow: ellipsis;
    padding-top: 6px;
}

.blog-description {
    font-size: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-top: 4px;
    line-height: 1.5;
}



/* ----------------------------------------------------------------
    [ End Blog ]
-----------------------------------------------------------------*/

/* ----------------------------------------------------------------
    [ 13 Start Contact ]
-----------------------------------------------------------------*/
.form .form-group input {
    background: transparent;
    border-color: #e3e3e3;
    height: 40px;
    border-radius: 0;
    box-shadow: none;
}
.form .form-group input:focus {
    border-color: #f95353;
}
.dark_bg .form .form-group input:focus {
    color: #fff;
}
.form .form-group textarea {
    background: transparent;
    border-color: #e3e3e3;
    margin-top: 10px;
    padding-bottom: 5%;
    border-radius: 0;
    box-shadow: none;
}
.form .form-group textarea:focus {
    border-color: #f95353;
}
.dark_bg .form .form-group textarea:focus {
    color: #fff;
}
/* ----------------------------------------------------------------
    [ End Contact ]
-----------------------------------------------------------------*/

/* ----------------------------------------------------------------
    [ 14 Start Footer ]
-----------------------------------------------------------------*/
.footer {
    padding: 30px 0 20px;
    background: #11141b;
}
.copy-text p {
    color: #fff;
}
/* ----------------------------------------------------------------
    [ End Footer ]
-----------------------------------------------------------------*/

/* ----------------------------------------------------------------
    [ 15 Start Top-control ]
-----------------------------------------------------------------*/
.topcontrol {
    background: #f95353 none repeat scroll 0 0;
    border-radius: 30px;
    bottom: 5px;
    margin-bottom: 80px;
    box-shadow: 0 1px 10px 0 rgba(0, 0, 0, 0.2);
    color: #fff;
    cursor: pointer;
    font-size: 22px;
    height: 40px;
    opacity: 1;
    filter: alpha(opacity=100);
    padding: 6px 10px;
    position: fixed;
    margin-right: 10px;
    -webkit-transition: all 0.2s ease 0s;
    transition: all 0.2s ease 0s;
    width: 40px;
    z-index: 99;
}
.topcontrol:hover {
    background: #fff;
    color: #f95353;
}

.banner_content h4 {
    color: white;
}
.top .responsive-cell-block {
    min-height: 75px;
}

.top .responsive-container-block {
    min-height: 75px;
    height: fit-content;
    width: 100%;
    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
    display: flex;
    flex-wrap: wrap;
    margin-top: 0px;
    margin-right: auto;
    margin-bottom: 0px;
    margin-left: auto;
    justify-content: flex-start;
}

.top .responsive-container-block.bigContainer {
    padding-top: 10px;
    padding-right: 30px;
    padding-bottom: 10px;
    padding-left: 30px;
}

.top .responsive-container-block.Container {
    max-width: 1320px;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    margin-top: 50px;
    margin-right: auto;
    margin-bottom: 50px;
    margin-left: auto;
}

.top .responsive-cell-block.wk-desk-6.wk-ipadp-6.wk-tab-12.wk-mobile-12 {
    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
}

.top .bigImg {
    width: 100%;
    object-fit: cover;
    height: 520px;
}

.top .responsive-container-block.sideImgContainer {
    width: 50%;
    height: auto;
    min-height: 100%;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
}

.top .responsive-cell-block.wk-desk-12.wk-ipadp-12.wk-tab-12.wk-mobile-12.side {
    height: 50%;
    min-height: auto;
    padding-top: 10px;
    padding-right: 10px;
    padding-bottom: 10px;
    padding-left: 10px;
}

.top .sideImg {
    color: black;
    width: 100%;
    height: 250px;
    padding-top: 0px;
    padding-right: 0px;
    padding-bottom: 0px;
    padding-left: 0px;
    object-fit: cover;
    display: block;
}

@media (max-width: 768px) {
    .top
        .responsive-cell-block.wk-desk-12.wk-ipadp-12.wk-tab-12.wk-mobile-12.side {
        margin-top: 0px;
        margin-right: 0px;
        margin-bottom: 10px;
        margin-left: 0px;
    }

    .top .responsive-container-block.sideImgContainer {
        width: 100%;
        flex-direction: column;
        flex-wrap: nowrap;
    }
}

@media (max-width: 500px) {
    .top .responsive-container-block.bigContainer {
        padding-top: 10px;
        padding-right: 20px;
        padding-bottom: 10px;
        padding-left: 20px;
    }

    .top .responsive-cell-block.wk-desk-6.wk-ipadp-6.wk-tab-12.wk-mobile-12 {
        padding-top: 10px;
        padding-right: 0px;
        padding-bottom: 10px;
        padding-left: 0px;
    }

    .top
        .responsive-cell-block.wk-desk-12.wk-ipadp-12.wk-tab-12.wk-mobile-12.side {
        padding-top: 0px;
        padding-right: 0px;
        padding-bottom: 0px;
        padding-left: 0px;
    }
}

.image-wrapper {
    position: relative;
    display: block; /* Ensures it's a block-level element for the anchor */
    overflow: hidden; /* Ensures the title box does not overflow */
}



.title-box {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0; /* Cover the entire image */
    background-color: rgba(249, 83, 83, 0.7); /* Semi-transparent background */
    color: white; /* Text color */
    display: flex; /* Center text */
    align-items: center; /* Vertically center the text */
    justify-content: center; /* Horizontally center the text */
    opacity: 0; /* Start hidden */
    transition: opacity 0.3s ease; /* Smooth transition */
    font-size: 24px;
    z-index: 2;
}

.image-wrapper:hover .title-box {
    opacity: 1; /* Show the title box on hover */
}
/* Gallery Section Styles */
.section-gallery {
    background-color: #f9f9f9; /* Light background for the gallery section */
    padding: 60px 0; /* Padding for spacing */
}

.section-gallery h2 {
    font-size: 2rem;
    color: #333; /* Darker color for better readability */
    margin-bottom: 40px;
}

.gallery-item {
    position: relative;
    overflow: hidden;
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Soft shadow for a lifted look */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.gallery-item:hover {
    transform: scale(1.05); /* Slight zoom effect on hover */
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15); /* Increase shadow on hover */
}
.gallery-img img {
    width: 100%;
    height: 300px; /* Make sure image scales properly */
    object-fit: cover;
    transition: opacity 0.3s ease;
}
.gallery-img img:hover {
    opacity: 0.85; /* Slight fade on hover */
}

.popup-gallery .gallery-item {
    cursor: pointer; /* Indicates the image is clickable */
}



.gallery-item a {
    display: block; /* Make the anchor tag fill the gallery item */
    width: 100%;
    height: 100%;
    text-decoration: none;
}

/* Blog Image Fix Size */
.fixed-image-size {
    width: 90%;
    height: 450px; /* Adjust as needed */
    object-fit: cover;
    margin-bottom: 10px;
}
.related-blog {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}

.related-blog-image img {
    width: 150px; /* Adjust size as needed */
    height: 100px; /* Adjust size as needed */
    object-fit: cover;
   padding: 8px; /* Space between image and title */
}

.related-blog-title h5 {

    margin-bottom: 0;
    font-weight: 500;
    font-size: 1.5rem;
}


/* Gallery Section Styles */
.gallery-section .responsive-cell-block {
    margin-bottom: 20px; /* Spacing between gallery items vertically */
}

/* For desktop and larger screens */
.gallery-section .side {
    width: 33.33%; /* 3 items per row */
    padding-right: 15px; /* Horizontal spacing between items */
}

/* Ensure proper wrapping and no overflow */
.gallery-section .responsive-container-block {
    display: flex;
    flex-wrap: wrap;
}

@media (max-width: 768px) {
    /* Mobile devices: 1 item per row */
    .gallery-section .side {
        width: 100%; /* 1 item per row */
        padding-right: 0;
    }

    /* Title Box Positioning on Mobile */
    .gallery-section .image-wrapper {
        position: relative;
        display: block;
    }

    .gallery-section .title-box {
        position: absolute;
        bottom: 0; /* Position it at the bottom of the image */
        left: 0;
        right: 0;
        background: rgba(0, 0, 0, 0.5); /* Same background color */
        color: white;
        padding: 10px;
        text-align: center;
        display: block; /* Always visible on mobile */
    }
}
.yoo{
    padding: 15px !important;
}

.section-gallery h2{
    font-size: 2.5rem;

  text-transform: uppercase;
  letter-spacing: 2px;
}
body
{
  margin:0;
  padding:0;
  font-family: 'Montserrat Alternates', sans-serif;
}
*
{
  padding:0;
  margin:0;
}
section {
    padding: 100px 0;
}

.shadow3 {
    background-image: url("http://www.commixturesoft.com/img/shadow3.png");
    background-repeat: no-repeat;
}

.height450{height:450px;}

.badge-info {
    background-color: rgba(23, 160, 184, 0.17);
    color: #17a2b8;
}

.section-title .badge {
    margin: 0 0 8px;
}
.badge {
    border-radius: 100px;
    font-size: 12px;
    font-stretch: normal;
    font-style: normal;
    font-weight: 500;
    letter-spacing: 1px;
    line-height: normal;
    padding: 4px 14px;
    text-transform: uppercase;
}



.social-overlap {
    width: 100%;
    transform: translateY(-50%);
}

.justify-content-center {
    -ms-flex-pack: center!important;
    justify-content: center!important;
}
.justify-content-center {
    -webkit-box-pack: center!important;
    -ms-flex-pack: center!important;
    justify-content: center!important;
}

.social-bar {
    display: flex;
    border-radius: 10px;

}
.iconpad {
    padding: 12px 0;
    width: 100%;
}
.mb-3, .my-3 {
    margin-bottom: 1rem!important;
}

.process-scetion .slider-nav-item {
    position: relative;
    flex-grow: 0;
    flex-shrink: 0;
    border-radius: 50%;
    text-align: center;
    background: #fff;
    cursor: pointer;
    transition: all .4s ease;
}

.social-icons a {
    border-radius: 50px;
    color: #3f345f;
    display: inline-block;
    line-height: 52px;
    height: 50px;
    width: 50px;
    box-shadow: 0 5px 25px rgba(93, 70, 232, 0.15);
    margin: 15px 15px;
    font-size: 22px;
}

a {
    text-decoration: none !important;
    color: #3f345f;
    transition: all 0.3s ease 0s;
}

.slider-nav-item:before {
    position: absolute;
    content: "";
    height: calc(100% + 16px);
    width: calc(100% + 16px);
    top: -8px;
    left: -8px;
    border-radius: 50%;
    border: 1px solid rgba(132, 132, 164, 0.35);
    animation: 1.5s linear 0s normal none infinite focuse;
}



/*socil*/
.slider-nav{
        display: flex;

}

.process-scetion .slider-nav-item {
    position: relative;
    flex-grow: 0;
    flex-shrink: 0;
    border-radius: 50%;
    text-align: center;
    background: #fff;
    cursor: pointer;
    transition: all .4s ease;

}
.slider-nav-item:before
{
        position: absolute;
    content: "";
    height: calc(100% + 16px);
    width: calc(100% + 16px);
    top: -8px;
    left: -8px;
    border-radius: 50%;
    border: 1px solid rgba(132, 132, 164, 0.35);
    animation: 1.5s linear 0s normal none infinite focuse;
}

    .process-scetion .slider-nav-item:nth-child(2) {
      color: #40beff; }
    .process-scetion .slider-nav-item:nth-child(3) {
      color: #311f9b; }
    .process-scetion .slider-nav-item:nth-child(4) {
      color: #ff9259; }
    .process-scetion .slider-nav-item:nth-child(5) {
      color: #38385f; }
    .process-scetion .slider-nav-item:after {
      position: absolute;
      top: 50%;
      left: 100%;
      height: 2px;
      content: '';
      width: 100%;
      background: url(http://demo.themenio.com/ico/assets/images/line.png) repeat 0 0;
      z-index: 0;
      animation: slide 1s linear infinite; }
    .process-scetion .slider-nav-item:last-child:after {
      display: none; }
    .process-scetion .slider-nav-item .ikon {
      font-size: 50px;
      line-height: 80px; }



      .process-scetion .slider-nav-item.active:before {
        position: absolute;
        content: "";
        height: calc(100% + 16px);
        width: calc(100% + 16px);
        top: -8px;
        left: -8px;
        border-radius: 50%;
        border: 1px solid rgba(132, 132, 164, 0.35);
        animation: 1.5s linear 0s normal none infinite focuse; }

@keyframes focuse {
  0% {
    transform: scale(0.8);
    opacity: 1; }
  75% {
    transform: scale(1.2);
    opacity: 0; }
  100% {
    transform: scale(1.2);
    opacity: 0; } }
@keyframes slide {
  from {
    background-position: 0 0; }
  to {
    background-position: 40px 0; } }

.shadow-img1{
    background-image:url("../img/shadow.png");
    background-repeat:no-repeat;
    background-position:bottom;
}

.shadow-img2{
        background-position: bottom;
    background-image: url("../img/shadow2.png");
    background-size: 100%;
    background-repeat: no-repeat;
}


.slider-nav-item:after {
    position: absolute;
    top: 50%;
    left: 100%;
    height: 2px;
    content: '';
    width: 100%;
    background: url(https://1.bp.blogspot.com/--Btu5p654jU/XYmrVd5IcYI/AAAAAAAATQ0/4bX8aZyFBgApbJUf90KrpCfO6RvAaZ6LgCLcBGAsYHQ/s1600/line.png) repeat 0 0;
    z-index: 0;
    animation: slide 1s linear infinite;
}
.mt100{margin-top:100px;}



/* ----------------------------------------------
 * Generated by Animista on 2019-9-24 11:37:28
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info.
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation jello-horizontal
 * ----------------------------------------
 */
@-webkit-keyframes jello-horizontal {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
            transform: scale3d(1.25, 0.75, 1);
  }
  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
            transform: scale3d(0.75, 1.25, 1);
  }
  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
            transform: scale3d(1.15, 0.85, 1);
  }
  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
            transform: scale3d(0.95, 1.05, 1);
  }
  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
            transform: scale3d(1.05, 0.95, 1);
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}
@keyframes jello-horizontal {
  0% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
  30% {
    -webkit-transform: scale3d(1.25, 0.75, 1);
            transform: scale3d(1.25, 0.75, 1);
  }
  40% {
    -webkit-transform: scale3d(0.75, 1.25, 1);
            transform: scale3d(0.75, 1.25, 1);
  }
  50% {
    -webkit-transform: scale3d(1.15, 0.85, 1);
            transform: scale3d(1.15, 0.85, 1);
  }
  65% {
    -webkit-transform: scale3d(0.95, 1.05, 1);
            transform: scale3d(0.95, 1.05, 1);
  }
  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
            transform: scale3d(1.05, 0.95, 1);
  }
  100% {
    -webkit-transform: scale3d(1, 1, 1);
            transform: scale3d(1, 1, 1);
  }
}


.jello-horizontal {
	-webkit-animation: jello-horizontal 0.9s both;
	        animation: jello-horizontal 0.9s both;
}

.social-bar a:hover i
{
  -webkit-animation: jello-horizontal 0.9s both;
	        animation: jello-horizontal 0.9s both;
}


@media only screen and (max-width: 300px) {
  .process-scetion .slider-nav-item
  {
    height: 30px;
    width: 30px;
    margin: 15px 10px;
    line-height: 28px;
  }
}
.social-overlap {
    padding: 0 !important;
}

.social-bar {
    text-align: center !important;
}

.social-icons {

    display: flex;
    justify-content: flex-end;
    margin-top: 50px;

}

.social-icons .slider-nav-item {
    display: inline-block !important;
    margin: 0 10px !important;
    font-size: 24px !important;
}

.social-icons .slider-nav-item i {
    margin: 0 !important;
}

.iconpad {
    padding: 0 !important;
}

.col-md-66{
    width: 60%;
}
/* For medium devices (md) and above */
@media (min-width: 768px) {
    .col-md-66 {
        width: 46%;
    }
}

/* For all other devices (smaller than md) */
@media (max-width: 767px) {
    .col-md-66 {
        width: 100%;
    }
}

.no-images img {
    display: none !important;
}