/* Edges By TeamXcel */

/*  ==========================================================================
    Table of Contets
    ==========================================================================

    1.0 Common Styles
    2.0 Header Section
    3.0 Hero Section
    4.0 Service Section
    5.0 Content Section
    6.0 Working Process Section
    7.0 Testimonial Section
    8.0 Download Section
    9.0 Sponsor Section
    10.0 Subscribe Section
    11.0 Widget Section
    12.0 Footer Section
    13.0 Scroll To Top

    ==========================================================================
    Enros - Bitcoin & Cryptocurrency Landing Page
    ========================================================================== */

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

/*  ==========================================================================
    Common Styles
    ========================================================================== */
* {
    padding: 0;
    margin: 0;
}

body {
    background-color: #f2ebde;
    /*background-color:#bd974c;
    background-color: #fff; orginal color*/
    font-family: 'Roboto', sans-serif;
    font-size: 17px;
    line-height: 28px;
    color: #555;
    font-weight: 400;
    letter-spacing: -0.2px;
    position: relative;
    overflow-x: hidden;
}

/*==================*/
.whatsapp-icon {
    width: 20px;
    /* Adjust icon size as needed */
    height: 20px;
    position: relative;

}


.m_img-fluid {
    max-width: 90%;
}

.slide_coust {
    padding-top: 300px;
    padding: 90px;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .container-top {
        padding: 30px !important;

    }
}

/***list**/
/* Ensure the header is positioned and has a high z-index */
#header {
    position: fixed;
    /* Or absolute/fixed depending on your layout */
    z-index: 1000;
    /* Set a high value to ensure it's on top */
}

/* Ensure the nav menu is on top of other elements */
#header .mainmenu {
    position: relative;
    z-index: 1001;
    /* Slightly higher than the header if needed */
}

/* For dropdown menus, ensure they also appear above other content */
#header .dropdown-content {
    position: absolute;
    /* Higher than the mainmenu to ensure it's on top */
}

.dropdown a {
    text-decoration: none;
}

/**endlist**/

/**product.html*/
.special-page {
    background-color: #f2ebde;
}

/**end product.html**/


.coustomhead {
    padding: 40px;
    text-align: center;
    position: relative;


    font-weight: bold;
}

.coustomhead::after {
    content: '';
    display: block;
    width: 100%;
    /* Adjust width if needed */
    height: 10px;
    /* Adjust height based on the SVG size */
    background-image: url('/coustom_img/cross-out-underline.svg');
    /* Path to your SVG */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    position: absolute;
    /* bottom: -15px; */
    /* Adjust based on spacing between text and the underline */
    left: 0;
}

*/ .hero-img {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hero-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/**logo**/

.navbar-brand img {
    /* width: 135px; */
    height: 65px;

}

@media (min-width: 1024px) {
    .navbar-brand img {
        padding-bottom: 10px;
    }
}

@media (min-width: 768px) {
    .navbar-brand img {
        padding-bottom: 10px;
    }
}


/**endlogo**/



/**map*/

.map {
    text-align: center;
    /* Center the h1 text */
    padding-top: 20px;

    justify-content: center;
    /* Center the iframe */
}

iframe {
    max-width: 90%;
    /* height: 100%;  */
    border: 0;
}

/* Media query for screens smaller than 768px */
@media (max-width: 768px) {
    iframe {
        width: 100%;
        height: 300px;
        /* Adjust height as needed */
    }
}

/**end map**/


.coustomhead {
    padding: 40px;
    text-align: center;
}

article {
    --img-scale: 1.001;
    --title-color: black;
    --link-icon-translate: -20px;
    --link-icon-opacity: 0;
    position: relative;
    border-radius: 16px;
    box-shadow: none;
    background: #e4e3e0;
    transform-origin: center;
    transition: all 0.4s ease-in-out;
    overflow: hidden;
}

article a::after {
    position: absolute;
    inset-block: 0;
    inset-inline: 0;
    cursor: pointer;
    content: "";
}

article h2 {
    margin: 0 0 18px 0;
    font-size: 1.5rem;
    letter-spacing: 0.06em;
    color: var(--title-color);
    transition: color 0.3s ease-out;
}

figure {
    margin: 0;
    padding: 0;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

article img {
    max-width: 100%;
    width: 100%;
    height: auto;
    transform-origin: center;
    transform: scale(var(--img-scale));
    transition: transform 0.4s ease-in-out;
}

.article-body {
    padding: 16px;
}

article a {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    color: #28666e;
}

article a:focus {
    outline: 1px dotted #28666e;
}

article a .icon {
    min-width: 24px;
    width: 24px;
    height: 24px;
    margin-left: 5px;
    transform: translateX(var(--link-icon-translate));
    opacity: var(--link-icon-opacity);
    transition: all 0.3s;
}

article:has(:hover, :focus) {
    --img-scale: 1.1;
    --title-color: #28666e;
    --link-icon-translate: 0;
    --link-icon-opacity: 1;
    box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px, rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    article h2 {
        font-size: 1.2rem;
    }

    .article-body {
        padding: 12px;
    }

    figure {
        aspect-ratio: 4 / 3;
    }
}

/* General styles for article and images */
figure {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    border-radius: 8px;
}

article img {
    max-width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    /* Ensures images are cropped to fit */
    border-radius: 8px;
    transition: transform 0.3s ease-in-out;
}

/* Tablet-specific styles */
@media (min-width: 768px) and (max-width: 1024px) {
    figure {
        aspect-ratio: 16 / 9;
        height: auto;
        /* Let the height adjust dynamically */
    }

    article img {
        width: 100%;
        /* Ensure images are responsive within their containers */
        object-fit: contain;
        /* Keep the entire image visible without cropping */
    }

    .article-body {
        padding: 16px;
        /* Adjust padding to fit the tablet layout */
    }
}



/************************ 
  Generic layout (demo looks)
  **************************/

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



.articles {
    display: grid;
    max-width: 1200px;
    margin-inline: auto;
    padding-inline: 15px;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 24px;
}

@media screen and (max-width: 960px) {
    article {
        container: card/inline-size;
    }


    .article-body p {
        /* display: none; */
    }
}

@container card (min-width: 380px) {
    .article-wrapper {
        display: flex;
        grid-template-columns: 100px 1fr;
        gap: 16px;
    }

    .article-body {
        padding-left: 0;
    }

    figure {
        width: 100%;
        height: 100%;
        overflow: hidden;
    }

    figure img {
        height: 100%;
        aspect-ratio: 1;
        object-fit: cover;
    }
}

.sr-only:not(:focus):not(:active) {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

.container-top {
    padding-top: 300px;
    padding: 90px;
    box-sizing: border-box;

}



main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 50px;

}

/**index card**/

.hero-service {
    text-align: center;
    margin-bottom: 30px;
}

.hero-service h1 {
    font-size: 2.5rem;
    color: #253050;
    font-weight: 600;
}

.card-container {
    gap: 10%;
    /* Add gap between cards */
}

.card {
    width: 23rem;
    height: 30rem;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    position: relative;
    color: black;
    box-shadow: 5px 5px 5px 5px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    background-color: #fefcfb;
    margin-bottom: 2rem;
}

.card img {
    position: absolute;
    object-fit: cover;
    width: 30%;
    height: auto;
    top: 5%;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0.9;
    transition: opacity 0.2s ease-out;
}

.card h2 {
    position: absolute;
    bottom: 30px;
    left: 20px;
    margin: 0;
    text-transform: uppercase;

}

.card p {
    position: absolute;
    opacity: 0;
    max-width: 90%;
    /* text-align: justify; */
    bottom: 25px;
    left: 30px;
    line-height: 1.01em;
}

/* Hover effects for desktop */
.card:hover h2 {
    bottom: 230px;
    transition: bottom 0.3s ease-out;
}

.card:hover p {
    opacity: 1;
    transition: opacity 0.5s 0.1s ease-in;
}

.card:hover img {
    transition: opacity 0.3s ease-in;
    opacity: 1;
}

/* Responsive adjustments */
@media (max-width: 750px) {
    .card {
        width: calc(100% - 10%);
        height: 25rem;
    }

    .card h2 {
        bottom: 220px;
        transition: bottom 0.3s ease-out;
        transform: translateY(30px);
        /* Initial state */
        transition: opacity 0.5s ease-out, transform 0.5s ease-out;
    }

    .card p {
        opacity: 0;
        transform: translateY(20px);
        /* Initial state */
        transition: opacity 0.5s ease-out, transform 0.5s ease-out;
        line-height: 1.5em;
    }

    .card.in-view h2,
    .card.in-view p {
        opacity: 1;
        transform: translateY(0);
        /* Slide up to this position */
        animation: slideUp 0.5s ease-out forwards, fadeIn 0.5s ease-out forwards;
    }
}

@media (max-width: 768px),
(max-width:820px) {
    .card p {
        opacity: 0;
        transform: translateY(20px);
        /* Initial state */
        transition: opacity 0.5s ease-out, transform 0.5s ease-out;
        /* line-height: 1em; */
    }

}






/* Keyframes for sliding and fading in the h2 and p elements */
@keyframes slideUp {
    from {
        transform: translateY(20px);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

/**index card end**/

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Roboto', sans-serif;
    -webkit-font-smoothing: antialiased;
    color: #253050;
    font-weight: 500;
}

h1 {
    font-size: 45px;
    font-weight: 500;
    line-height: 55px;
    margin: 0 0 10px;
    color: #253050;
    text-transform: capitalize;
}

h2 {
    font-size: 40px;
    color: #253050;
    margin: 0 0 10px;
    font-weight: 500;
    line-height: 1.3;
    letter-spacing: -0.5px;
    text-transform: capitalize;
}

h3,
h4 {
    margin: 0 0 10px;
    font-weight: 400;
    line-height: 1.7;
    color: #253050;
    letter-spacing: -0.01em;
    font-weight: 500;
}

h3 {
    font-size: 25px;
    font-weight: 500;
}

h4 {
    font-size: 16px;
}

h5,
h6 {
    font-size: 14px;
    margin: 0 0 10px;
}

img {
    border: none;
    outline: none;
    max-width: 100%;
}

ul {
    display: block;
    list-style: none;
    padding: 0;
    margin: 0;
}

p,
li,
a,
span {}

p {
    font-size: 17px;
    margin-bottom: 15px;
}

a,
a:hover {
    text-decoration: none;
}

a:focus {
    outline: 0;
    text-decoration: none;
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
    color: #ddd !important;
}

input:-moz-placeholder,
textarea:-moz-placeholder {
    /* Firefox 18- */
    color: #ddd !important;
}

input::-moz-placeholder,
textarea::-moz-placeholder {
    /* Firefox 19+ */
    color: #ddd !important;
}

input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
    color: #ddd !important;
}

button {
    border: none;
    background: none;
}

section {
    overflow-y: hidden;
}

/* Helper Class */
.padding {
    padding: 60px 0;
}

.pd-bottom {
    /* padding-bottom: 80px; */
    padding-top: 150px;
}

.no-padding {
    padding: 0;
}

.padding-15 {
    padding: 15px;
}

.padding-20 {
    padding: 20px;
}

.bg-white {
    background-color: #fff;
}

.bg-grey {
    background-color: #eef3f9;
}

.bg-dark {
    background-color: #232323;
}

.bd-top {
    border-top: 1px solid #eaeaea;
}

.bd-bottom {
    border-bottom: 1px solid #eaeaea;
}

.mb-10 {
    margin-bottom: 10px;
}

.mb-15 {
    margin-bottom: 15px;
}

.mb-20 {
    margin-bottom: 20px;
}

.mb-25 {
    margin-bottom: 25px;
}

.mb-30 {
    margin-bottom: 30px;
}

.mb-35 {
    margin-bottom: 35px;
}

.mb-40 {
    margin-bottom: 40px;
}

.mb-45 {
    margin-bottom: 45px;
}

.mb-50 {
    margin-bottom: 50px;
}

.ml-15 {
    margin-left: 15px;
}

.ml-20 {
    margin-left: 20px;
}

.ml-25 {
    margin-left: 25px;
}

.ml-30 {
    margin-left: 30px;
}

.ml-35 {
    margin-left: 35px;
}

.fz-28 {
    font-size: 28px;
}

.fz-24 {
    font-size: 24px;
}

.fz-22 {
    font-size: 22px;
}

.fz-20 {
    font-size: 20px;
}

.fz-18 {
    font-size: 18px;
}

.fz-16 {
    font-size: 16px;
}

.text-black {
    color: #253050;
}

.text-white {
    color: #ffffff;
}

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

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

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

.fl-right {
    float: right;
}

.fl-left {
    float: left;
}

.display-table {
    width: 100%;
    height: 100%;
    display: table;
}

.table-cell {
    display: table-cell;
    vertical-align: middle;
}

.overlay {
    width: 100%;
    position: relative;
    z-index: 1;
}

.overlay:before {
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: -1;
}

/* Preloader Styles */
#preloader {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    background: #fff;
    height: 100%;
    width: 100%;
    -webkit-transition: all .5s .5s ease;
    -moz-transition: all .5s .5s ease;
    transition: all .5s .2s ease;
}

.loader {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    width: 50px;
    height: 50px;
    display: block;
    margin: auto;
    margin-top: -30px;
}

body.loaded #preloader {
    opacity: 0;
    visibility: hidden;
}

/* Button Style */
.btn_group {}

.btn_group a {
    margin: 5px;
}

.btn_group_left a {
    margin-right: 15px;
    margin-bottom: 15px;
}

.default-btn {
    background: #b87333;
    /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #b87333, #ffd200);
    /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #b87333, #ffd200);
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    text-transform: uppercase;
    color: #fff;
    font-size: 12px;
    border-radius: 2px;
    line-height: 50px;
    font-weight: 600;
    display: inline-block;
    letter-spacing: 0.5px;
    padding: 0 30px;
    -webkit-box-shadow: 0 3px 10px rgba(71, 44, 173, 0.2);
    box-shadow: 0 3px 10px rgba(71, 44, 173, 0.2);
    transition: all 0.3s ease-in-out;
}

.default-btn:hover {
    background: #ffa713;
    /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #ffd200, #ffa713);
    /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #ffd200, #ffa713);
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    color: #fff;
    transition: all 0.3s ease-in-out;
}

/* Transition Effect */
a,
a:hover,
.overlay,
img,
.form-control,
.form-control:hover,
button {
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
}

/*dropdown*/
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 250px;
    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
    z-index: 1;
}

/* Style the links inside the dropdown */
.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {
    background-color: #f1f1f1;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display: block;
}

/* Style the dropdown button */
.dropdown {
    display: inline-block;
}

/*dropdown end*/

.navbar-fixed-top.header-section {
    background-color: #fff;
    -moz-box-shadow: 0 2px 5px rgba(16, 16, 16, .07);
    -webkit-box-shadow: 0 2px 5px rgba(16, 16, 16, .07);
    box-shadow: 0 2px 5px rgba(16, 16, 16, .07);
    height: 70px;
    border-bottom: 0;
    padding: 0;
}

.navbar-fixed-top ul.nav>li>a {
    color: #253050;
}

.navbar-fixed-top ul.nav>li>a:hover,
.navbar-fixed-top ul.nav>li>a:focus,
.navbar-fixed-top ul.nav>li.active>a {
    color: #ffa713;
}

.logo-light,
.navbar-fixed-top .logo-light,
.logo-dark,
.navbar-fixed-top .logo-dark,
.navbar-fixed-top.header-section,
.header-section {
    transition: all 0.3s ease-in-out;
}

.navbar {
    border: medium none;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    -ms-border-radius: 0;
    border-radius: 0;
    margin: 0;
    /* position: relative; */
    position: fixed;
    padding: 0;
}

.sticky {
    position: fixed;


}

/* ==========================================================================
   Header Section
   ========================================================================== */
.header-section {
    background-color: transparent;
    width: 100%;
    height: 80px;
    z-index: 999;
    position: fixed;
    left: 0;
    top: 0;
    padding: 10px 0;
}

.navbar-fixed-top.header-section {
    background-color: #fff;
    -moz-box-shadow: 0 2px 5px rgba(16, 16, 16, .07);
    -webkit-box-shadow: 0 2px 5px rgba(16, 16, 16, .07);
    box-shadow: 0 2px 5px rgba(16, 16, 16, .07);
    height: 70px;
    border-bottom: 0;
    padding: 0;
}

.navbar-fixed-top ul.nav>li>a {
    color: #253050;
}

.navbar-fixed-top ul.nav>li>a:hover,
.navbar-fixed-top ul.nav>li>a:focus,
.navbar-fixed-top ul.nav>li.active>a {
    color: #ffa713;
}

.logo-light,
.navbar-fixed-top .logo-light,
.logo-dark,
.navbar-fixed-top .logo-dark,
.navbar-fixed-top.header-section,
.header-section {
    transition: all 0.3s ease-in-out;
}

.navbar {
    border: medium none;
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    -ms-border-radius: 0;
    border-radius: 0;
    margin: 0;
    position: relative;
    padding: 0;
}

.navbar-header {
    padding: 17px 0;
}

.navbar-header .brand {
    font-size: 25px;
    color: #253050;
    font-family: 'Roboto', sans-serif;
    letter-spacing: -1px;
    font-weight: 600;
    margin-left: 13px;
}

.navbar-header .nav-btn {
    padding: 8px;
    border-radius: 1px;
}

.navbar-header .nav-btn .icon-bar {
    background-color: #fff;
    width: 18px;
}

.navbar-fixed-top .navbar-header .nav-btn .icon-bar {
    background-color: #777;
}

.navbar-header .nav-btn:hover,
.navbar-header .nav-btn:focus {
    opacity: 0.8;
}

/* Nav Menu */
#navbar {
    z-index: 999;
    padding: 0 15px;
}

ul.nav {}

ul.nav li {}

ul.nav li a {
    color: #253050;
    font-family: 'Roboto', sans-serif;
    display: inline-block;
    vertical-align: middle;
    padding: 0 20px;
    letter-spacing: 0;
    font-size: 15px;
    font-weight: 400;
    line-height: 70px;
    z-index: 1;
}

ul.nav li a:hover,
ul.nav li a:focus,
ul.nav li a.active {
    background: none;
    color: #ffa713;
    opacity: 1;
}

.mainmenu ul.nav li a.signup-btn {
    background: #ffa713;
    /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #ffa713, #ffd200);
    /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #ffa713, #ffd200);
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    border-radius: 2px;
    display: inline-block;
    padding: 10px 30px;
    text-transform: uppercase;
    font-size: 12px;
    color: #fff !important;
    font-weight: 600;
    line-height: 25px;
    margin: 14px 0 14px 20px;
    letter-spacing: 0.5px;
}

.mainmenu ul.nav li a.signup-btn:hover {
    color: #fff !important;
    -webkit-box-shadow: 0 3px 10px rgba(71, 44, 173, 0.2);
    box-shadow: 0 3px 10px rgba(71, 44, 173, 0.2);
    opacity: 0.8;

}

.navbar-fixed-top .mainmenu ul.nav li a.signup-btn {
    background: #b87333;
    /* fallback for old browsers */
    background: -webkit-linear-gradient(to right, #b87333, #ffd200);
    /* Chrome 10-25, Safari 5.1-6 */
    background: linear-gradient(to right, #b87333, #ffa713);
    /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
    color: #fff;
}

/*Mobile Menu */
.menu-wrap {
    position: relative;
}

.slicknav_menu {
    background: none;
    padding: 4px 0;
    display: none;
    width: 100%;
    position: absolute;
    right: 0;
    top: 0;
}

.slicknav_nav {
    background-color: #fff;
}

.slicknav_btn {
    background-color: transparent;
    margin: 17px 5px 19px;
}

.slicknav_nav .slicknav_row:hover,
.slicknav_nav .slicknav_row,
.slicknav_nav a,
.slicknav_nav a:hover {
    -moz-border-radius: 0;
    -webkit-border-radius: 0;
    -o-border-radius: 0;
    border-radius: 0;
}

.slicknav_nav .slicknav_row,
.slicknav_nav a {
    padding: 10px 15px;
    margin: 0;
    color: #777;
}

.slicknav_nav a .caret {
    display: none;
}

.slicknav_nav ul {
    margin: 0;
}

.slicknav_nav ul li a {
    padding-left: 30px;
    font-size: 12px;
}

.slicknav_nav .slicknav_row:hover,
.slicknav_nav a:hover {
    background-color: transparent;
    color: #253050;
}

/* ==========================================================================
   Hero Section
   ========================================================================== */
.hero-section {
    height: 100vh;
    position: relative;
}

.hero-content p {
    margin-bottom: 30px;
}

.bg-shape {
    background-image: url(../img/bg-shape-1.png);
    background-repeat: no-repeat;
    background-position: top right;
    position: absolute;
    width: 762px;
    height: 875px;
    right: 0;
    top: 0;
    z-index: -1;
}

.hero-wrap {
    align-items: center;
}

/* ==========================================================================
   Service Section
   ========================================================================== */
.service-section {
    padding-top: 0;
    z-index: 2;
    display: block;
    margin-top: -80px;
}

.service-content {}

.service-content img {
    margin-bottom: 15px;
}

/* ==========================================================================
   Content Section
   ========================================================================== */
.content-section {
    position: relative;
    padding-top: 150px;
}

.content-wrap img {
    width: 100%;
}

.content-section .bg-shape {
    background-image: url(../img/bg-shape-2.png);
    background-repeat: no-repeat;
    background-position: top right;
    position: absolute;
    width: 500px;
    height: 607px;
    left: 0;
    top: 0;
    z-index: -1;
}

.content-list {
    margin-bottom: 30px;
}

.content-list li {
    position: relative;
    padding-left: 25px;
    line-height: 40px;
}

.content-list li:before {
    position: absolute;
    content: "";
    background: #ffa713;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    left: 0;
    top: 15px;
    border: 3px solid #ffd200;
    padding: 5px;
}

/* ==========================================================================
   Working Process Section
   ========================================================================== */
.work-process-content {
    position: relative;
}

.work-process-content img {
    margin-bottom: 15px;
}

.work-process-content h3 {
    font-size: 22px;
    text-transform: capitalize;
}

.arrows {
    background-image: url(../img/working-arows.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 60%;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 140px;
    top: -10px;
}


/* ==========================================================================
   Testimonial Section
   ========================================================================== */
.testimonial-section {
    position: relative;
    z-index: 1;
}

.testimonial-item {
    display: flex;
    align-items: center;
}

.testimonial-section .bg-shape {
    background-image: url(../img/bg-shape-3.png);
    background-repeat: no-repeat;
    background-position: left top;
    position: absolute;
    width: 500px;
    height: 607px;
    right: 0;
    top: 0;
    z-index: -1;
}

.testimonial-item .clients-thumb img {
    max-width: 80px;
    width: 80px;
    height: 80px;
    border-radius: 50%;
}

.testimonial-item .testi-content {
    padding-left: 30px;
}

.testimonial-item .testi-content h4 {
    font-size: 20px;
}

.testimonial-item .testi-content h4 span {
    display: block;
    font-size: 14px;
}

.testimonial-carousel .owl-nav {
    width: 100%;
    text-align: center;
}

.testimonial-carousel .owl-nav div {
    display: inline-block;
    margin: 10px;
    background-color: #f2f2f2;
    padding: 8px 30px;
    border-radius: 30px;
}

.testimonial-carousel .owl-nav div:hover {
    color: #ffa713;
}

/* ==========================================================================
   Download Section
   ========================================================================== */
.download-section {
    position: relative;
    z-index: 1;
}

.download-section .row {
    position: relative;
    z-index: 1;
}

.download-section .bg-shape {
    background-image: url(../img/bg-shape-4.png);
    background-repeat: no-repeat;
    background-position: left top;
    position: absolute;
    width: 600px;
    height: 642px;
    left: 0;
    top: 0;
    z-index: -1;
}

.download-content {}

.download-content span {
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 1px;
}

.download-content h2 {
    margin-bottom: 20px;
}

.download-content .dl-btn {
    margin-top: 20px;
}

.download-content .dl-btn a:hover {
    opacity: 0.8;
}

.dl-moc {
    background-image: url(../img/download-moc.png);
    background-repeat: no-repeat;
    background-position: right top;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: -1;
}

/* ==========================================================================
   Sponsor Section
   ========================================================================== */
.sponsor-section {}

.sponsor-section .sponsor-carousel img {
    opacity: 0.8;
    max-width: 100%;
    width: inherit !important;
    margin: 0 auto;
}

.sponsor-section .sponsor-carousel img:hover {
    opacity: 1;
    cursor: pointer;
}

/* ==========================================================================
   Subscribe Section
   ========================================================================== */
.subscribe-section {
    position: relative;
    z-index: 1;
}

.subscribe-section .bg-shape {
    background-image: url(../img/bg-shape-3.png);
    background-repeat: no-repeat;
    background-position: top right;
    position: absolute;
    width: 600px;
    height: 637px;
    right: 0;
    top: 0;
    z-index: -1;
}

.subscribe-wrap {
    background-color: #fff;
    -moz-box-shadow: 0 2px 5px rgba(16, 16, 16, .10);
    -webkit-box-shadow: 0 2px 5px rgba(16, 16, 16, .10);
    box-shadow: 0 2px 5px rgba(16, 16, 16, .10);
    padding: 40px 20px
}

.subscribe-form {
    position: relative;
}

.subscribe-form .form-input {
    border: 1px solid #eaeaea;
    width: 100%;
    height: 50px;
    padding: 10px;
    padding-right: 140px;
    border-radius: 2px;
}

.subscribe-form .submit-btn {
    background-color: #ffa713;
    text-transform: uppercase;
    color: #fff;
    font-size: 12px;
    border-radius: 2px;
    line-height: 50px;
    font-weight: 600;
    display: inline-block;
    letter-spacing: 0.5px;
    padding: 0 30px;
    -webkit-box-shadow: 0 3px 10px rgba(71, 44, 173, 0.2);
    box-shadow: 0 3px 10px rgba(71, 44, 173, 0.2);
    position: absolute;
    top: 0;
    right: 0;
}

#subscribe-result {
    display: none;
    margin-top: 15px;
    padding: 10px;
    border: 1px solid #ffa713;
}

#subscribe-result.subs-result {
    display: block;
}

.subscription-success,
.subscription-error {
    color: #fff;
}

/* ==========================================================================
   Widget Section
   ========================================================================== */
.widget-section {
    position: relative;
    z-index: 1;
}

.widget-content a {
    text-decoration: none;

}

.widget-content.mid-content {
    padding-left: 130px;
}

.widget-content img {
    margin-bottom: 30px;
}

.widget-link {}

.widget-link li {
    line-height: 35px;
}

.widget-link li a {
    color: #555;
}

.widget-link li a:hover {
    color: #ffa713;
    text-decoration: underline;
}

.widget-link li i {
    margin-right: 10px;
    color: #ffa713;
}

.widget-social {
    margin-top: 20px;
}

.widget-social li {
    display: inline-block;
}

.widget-social li a {
    display: inline-block;
    background-color: #f2f2f2;
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border-radius: 50%;
    color: #ffa713;
    font-size: 12px;
    margin-right: 5px;
}

.widget-social li a:hover {
    background-color: #ffa713;
    color: #fff;
}

/* ==========================================================================
   Footer Section
   ========================================================================== */
.footer-section {
    background-color: #fff;
    display: block;
    color: #fff;
    text-align: center;
    padding: 30px 0;
}

.footer-section p {
    font-size: 14px;
    color: #555;
    margin: 0;
}

/* ==========================================================================
   Scroll To Top
   ========================================================================== */
#scroll-to-top {
    background-color: #b87333;
    display: none;
    width: 45px;
    height: 45px;
    text-align: center;
    font-size: 14px;
    border-radius: 50%;
    line-height: 45px;
    color: #fff;
    position: fixed;
    bottom: 50px;
    right: 50px;
    z-index: 999;
}

#scroll-to-top:hover {
    background-color: #ffa713;
    color: #fff;
    opacity: 0.8;
}

@media (max-width: 600px) {
    #scroll-to-top {
        bottom: 20px;
        right: 20px;
    }
}


@media (max-width) {

    .dropdown-content ul {
        display: none;
    }

    .dropdown .slicknav_parent .slicknav_open {
        display: none;
    }

    .dropdown .slicknav_parent .slicknav_collapsed .slicknav_arrow {
        display: none;
    }

}



/* General mobile view styles */
@media (max-width: 768px) {
    .navbar {
        flex-direction: column;
    }

    /* Make sure the dropdown arrow is visible */
    .dropdown>a::after {
        display: none;
    }

    /* Ensure the dropdown content is hidden by default */
    .dropdown-content {
        display: none;

        list-style-type: none;
    }

    /* Show dropdown when the parent is active */
    .dropdown.active .dropdown-content {
        display: block;
    }

    /* Block format for dropdown items in mobile */
    .dropdown-content li {
        width: 100%;
        /* Full width for mobile */
        border-bottom: 1px solid #ddd;
        display: none;
    }

    .dropdown-content a {
        display: block;
        padding: 10px;
        color: #333;
        text-decoration: none;
        width: 100%;
    }

}


@media (max-width:490px) {
    .navbar-brand {
        padding: 0px !important;
    }
}



.scrollable-container {
    overflow-x: auto;
    white-space: nowrap;
}

body,
html {
    overflow-x: hidden;
    width: 100%;
}

.svg-container {
    z-index: 1001;
    position: fixed;
    bottom: 20px; /* Initial position */
    right: 20px;
    width: 40px;
    height: 40px;
    transition: bottom 0.5s ease-in-out; /* Smooth transition */
}


.svg-container svg {
   
    width: 100%;
    height: auto;
}





@media (min-width: 768px) {
    .svg-container {
        right: 51px; 
    }
}


.find-us-section {
    padding: 60px 20px;
 text-align: center;
}


.underline svg {
 display: block;
 margin: 8px auto;
 width: 120px;
 height: 12px;
}

.underline-svg {
 display: block;
 margin: 8px auto;
 width: 120px;
}







.map-icon {
 font-size: 22px; 
 color: #c0994c;

 padding: 10px;
 border-radius: 50%;
 display: inline-block;
 margin-top: 12px;
}




.dot {
 width: 8px;
 height: 8px;
 background: linear-gradient(90deg, #b8860b, #cd7f32);
 border-radius: 50%;
 margin: 0 6px;
}

   
.gradient-line-container {
 display: flex;
 align-items: center;
 justify-content: center;
 margin-top: 20px;
}

.gradient-line {
 width: 200px;
 height: 4px;
 background: linear-gradient(90deg, #b8860b, #cd7f32); 
 border-radius: 2px;
 position: relative;
}








.parent {
         display: grid;
         grid-template-columns: repeat(2, 1fr);
         grid-template-rows: repeat(2, 1fr);
         gap: 16px;
         padding: 20px;
         
         max-width: 800px;
         margin: auto;
     }

     .parent div {
         background: #ffffff;
         padding: 20px;
         border-radius: 12px;
         box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
         transition: transform 0.3s ease, box-shadow 0.3s ease;
         text-align: center;
     }

    
     .parent div h3 {
         margin-bottom: 10px;
         color: #333;
         font-size: 1.2rem;
     }

 
     .parent div p {
         color: #555;
         font-size: 1rem;
         line-height: 1.5;
     }

     .parent div:hover {
         transform: translateY(-5px);
         box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.15);
     }


     @media (max-width: 600px) {
         .parent {
             grid-template-columns: 1fr;
         }

.pt-50m{
    padding-top: 50px;
}
        
     }
     .product-box-wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 40px 0;
  padding-left: 18%;
    padding-right: 18%;
}

.product-box {
  background: #e3e2de;
  border: 2px solid #ddd;
  padding: 30px;
  text-align: center;
  font-weight: 600;
  font-size: 30px;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);
  text-transform: capitalize;
  display: grid;
    max-width: 1200px;
   
    gap: 24px;
}
@media (max-width: 768px) {
  .product-box-wrapper {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .product-box-wrapper {
    grid-template-columns: repeat(1, 1fr);
  }
}
/* ===========================
   PRODUCT GRID (Default Desktop)
=========================== */
.product-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    padding: 20px;
    max-width: 1200px;
    margin: 40px auto; /* Center + Top Margin */
    padding-top: 10%;
}

.product-box {
    background: #f2f2f2;
    padding: 25px;
    text-align: center;
    font-size: 30px;
    font-weight: 600;
    border-radius: 10px;
    min-height: 120px;
    cursor: pointer;
    transition: 0.3s ease-in-out;
}

.product-box:hover {
    background: #e5e5e5;
    transform: translateY(-5px);
    box-shadow: 0 8px 18px rgba(0,0,0,0.15);
}

/* SECTION HIDDEN */
.hidden-section {
    display: none;
    padding: 40px 20px;
    animation: fadeIn 0.5s ease-in-out;
}

/* Fade Animation */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* ===========================
   ARTICLE GRID (Desktop)
=========================== */
.articles {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
    margin-top: 30px;
}

.article-wrapper {
    background: #fff;
    padding: 15px;
    border-radius: 12px;
    box-shadow: 0 3px 12px rgba(0,0,0,0.1);
}

.article-wrapper img {
    width: 100%;
    border-radius: 10px;
}

.article-body h2 {
    margin-top: 10px;
    font-size: 24px;
    text-align: center;
}

/* ===========================
   TABLET VIEW (max-width: 1024px)
=========================== */
@media (max-width: 1024px) {
    .product-container {
        grid-template-columns: repeat(2, 1fr);
        margin: 20px;
    }

    .articles {
        grid-template-columns: repeat(2, 1fr);
        margin: 10px;
    }
}

/* ===========================
   MOBILE VIEW (max-width: 768px)
=========================== */
@media (max-width: 768px) {
    .product-container {
        grid-template-columns: 1fr;  /* 1 by 1 */
        margin: 15px;
         padding-top: 20% !important;
    }

    .articles {
        grid-template-columns: 1fr;  /* 1 by 1 */
    }
}