/*

Lava Landing Page

https://templatemo.com/tm-540-lava-landing-page

*/

/* ---------------------------------------------
Table of contents
------------------------------------------------
01. font & reset css
02. reset
03. global styles
04. header
05. welcome
06. features
07. testimonials
08. contact
09. footer
10. preloader

--------------------------------------------- */
/*
---------------------------------------------
font & reset css
---------------------------------------------
*/
@import url("https://fonts.googleapis.com/css?family=Poppins:100,200,300,400,500,600,700,800,900");

/*
---------------------------------------------
reset
---------------------------------------------
*/
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
div pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
figure,
header,
nav,
section,
article,
aside,
footer,
figcaption {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
}

.clearfix:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

.clearfix {
    display: inline-block;
}

html[xmlns] .clearfix {
    display: block;
}

* html .clearfix {
    height: 1%;
}

ul,
li {
    padding: 0;
    margin: 0;
    list-style: none;
}

header,
nav,
section,
article,
aside,
footer,
hgroup {
    display: block;
}

* {
    box-sizing: border-box;
}

html,
body {
    font-family: 'Poppins', sans-serif;
    font-weight: 400;
    background-color: #fff;
    font-size: 16px;
    -ms-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    text-decoration: none !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-top: 0px;
    margin-bottom: 0px;
}

ul {
    margin-bottom: 0px;
}

p {
    font-size: 15px;
    line-height: 25px;
    color: #888;
}

/*
---------------------------------------------
global styles
---------------------------------------------
*/
html,
body {
    background: #97e5e5;
    font-family: 'Poppins', sans-serif;
}

::selection {
    background: #0f7873;
    color: #4b9a95;
}

::-moz-selection {
    background: #0f7873;
    color: #4b9a95;
}

@media (max-width: 991px) {

    html,
    body {
        overflow-x: hidden;
    }

    .mobile-top-fix {
        margin-top: 30px;
        margin-bottom: 0px;
    }

    .mobile-bottom-fix {
        margin-bottom: 30px;
    }

    .mobile-bottom-fix-big {
        margin-bottom: 60px;
    }
}

a.main-button-slider {
    font-size: 14px;
    border-radius: 25px;
    padding: 15px 25px;
    background-color: #fba70b;
    text-transform: uppercase;
    color: #fff;
    font-weight: 600;
    letter-spacing: 1px;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

a.main-button-slider:hover {
    background-color: #f1556a;
}

a.main-button {
    font-size: 14px;
    border-radius: 25px;
    padding: 15px 25px;
    background: #0f7873;
    color: #4b9a95;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 1px;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

a.main-button:hover {
    background: #0f7873;
}

button.main-button {
    outline: none;
    border: none;
    cursor: pointer;
    font-size: 14px;
    border-radius: 25px;
    padding: 15px 25px;
    background: #0f7873;
    color: #fff;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 1px;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

button.main-button:hover {
    background: #0f7873;
}


.center-heading {
    margin-bottom: 70px;
}

.center-heading h2 {
    margin-top: 0px;
    text-align: center;
    font-size: 42px;
    font-weight: 700;
    color: #1e1e1e;
    margin-bottom: 25px;
}

.center-heading h2 em {
    font-style: normal;
    color: #181cc8;
}

.center-heading p {
    font-size: 15px;
    color: #888;
    text-align: center;
}


/*
---------------------------------------------
header
---------------------------------------------
*/

.background-header {
    background-color: #fff;
    height: 80px !important;
    position: fixed !important;
    top: 0px;
    left: 0px;
    right: 0px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.15) !important;
}

.background-header .logo,
.background-header .main-nav .nav li a {
    color: #1e1e1e !important;
}

.background-header .main-nav .nav li:hover a {
    color: #fba70b !important;
}

.background-header .nav li a.active {
    color: #fba70b !important;
}

.header-area {
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0px;
    z-index: 100;
    height: 100px;
    -webkit-transition: all .5s ease 0s;
    -moz-transition: all .5s ease 0s;
    -o-transition: all .5s ease 0s;
    transition: all .5s ease 0s;
}

.header-area .main-nav {
    min-height: 80px;
    background: transparent;
}

.header-area .main-nav .logo {
    line-height: 80px;
    color: #191a20;
    font-size: 28px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    float: left;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}


.header-area .main-nav .nav {
    float: left;
    margin-top: 27px;
    margin-left: 15%;
    margin-right: 0px;
    background-color: #fff;
    padding: 0px 20px;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    position: relative;
    z-index: 999;
}

.header-area .main-nav .nav li {
    padding-left: 20px;
    padding-right: 20px;
}

.header-area .main-nav .nav li:last-child {
    padding-right: 0px;
}

.header-area .main-nav .nav li a {
    display: block;
    font-weight: 500;
    font-size: 13px;
    color: #7a7a7a;
    text-transform: uppercase;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    height: 40px;
    line-height: 40px;
    border: transparent;
    letter-spacing: 1px;
}

.header-area .main-nav .nav li:hover a {
    color: #fba70b;
}

.header-area .main-nav .nav li.submenu {
    position: relative;
    padding-right: 35px;
}

.header-area .main-nav .nav li.submenu:after {
    font-family: FontAwesome;
    content: "\f107";
    font-size: 12px;
    color: #7a7a7a;
    position: absolute;
    right: 18px;
    top: 12px;
}

.header-area .main-nav .nav li.submenu ul {
    position: absolute;
    width: 200px;
    box-shadow: 0 2px 28px 0 rgba(0, 0, 0, 0.06);
    overflow: hidden;
    top: 40px;
    opacity: 0;
    transform: translateY(-2em);
    visibility: hidden;
    z-index: -1;
    transition: all 0.3s ease-in-out 0s, visibility 0s linear 0.3s, z-index 0s linear 0.01s;
}

.header-area .main-nav .nav li.submenu ul li {
    margin-left: 0px;
    padding-left: 0px;
    padding-right: 0px;
}

.header-area .main-nav .nav li.submenu ul li a {
    display: block;
    background: #fff;
    color: #7a7a7a !important;
    padding-left: 20px;
    height: 40px;
    line-height: 40px;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    position: relative;
    font-size: 13px;
    border-bottom: 1px solid #f5f5f5;
}

.header-area .main-nav .nav li.submenu ul li a:before {
    content: '';
    position: absolute;
    width: 0px;
    height: 40px;
    left: 0px;
    top: 0px;
    bottom: 0px;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
    background: #fba70b;
}

.header-area .main-nav .nav li.submenu ul li a:hover {
    background: #fff;
    color: #fba70b !important;
    padding-left: 25px;
}

.header-area .main-nav .nav li.submenu ul li a:hover:before {
    width: 3px;
}

.header-area .main-nav .nav li.submenu:hover ul {
    visibility: visible;
    opacity: 1;
    z-index: 1;
    transform: translateY(0%);
    transition-delay: 0s, 0s, 0.3s;
}

.header-area .main-nav .menu-trigger {
    cursor: pointer;
    display: block;
    position: absolute;
    top: 23px;
    width: 32px;
    height: 40px;
    text-indent: -9999em;
    z-index: 99;
    right: 40px;
    display: none;
}

.header-area .main-nav .menu-trigger span,
.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
    -moz-transition: all 0.4s;
    -o-transition: all 0.4s;
    -webkit-transition: all 0.4s;
    transition: all 0.4s;
    background-color: #1e1e1e;
    display: block;
    position: absolute;
    width: 30px;
    height: 2px;
    left: 0;
}

.background-header .main-nav .menu-trigger span,
.background-header .main-nav .menu-trigger span:before,
.background-header .main-nav .menu-trigger span:after {
    background-color: #1e1e1e;
}

.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
    -moz-transition: all 0.4s;
    -o-transition: all 0.4s;
    -webkit-transition: all 0.4s;
    transition: all 0.4s;
    background-color: #1e1e1e;
    display: block;
    position: absolute;
    width: 30px;
    height: 2px;
    left: 0;
    width: 75%;
}

.background-header .main-nav .menu-trigger span:before,
.background-header .main-nav .menu-trigger span:after {
    background-color: #1e1e1e;
}

.header-area .main-nav .menu-trigger span:before,
.header-area .main-nav .menu-trigger span:after {
    content: "";
}

.header-area .main-nav .menu-trigger span {
    top: 16px;
}

.header-area .main-nav .menu-trigger span:before {
    -moz-transform-origin: 33% 100%;
    -ms-transform-origin: 33% 100%;
    -webkit-transform-origin: 33% 100%;
    transform-origin: 33% 100%;
    top: -10px;
    z-index: 10;
}

.header-area .main-nav .menu-trigger span:after {
    -moz-transform-origin: 33% 0;
    -ms-transform-origin: 33% 0;
    -webkit-transform-origin: 33% 0;
    transform-origin: 33% 0;
    top: 10px;
}

.header-area .main-nav .menu-trigger.active span,
.header-area .main-nav .menu-trigger.active span:before,
.header-area .main-nav .menu-trigger.active span:after {
    background-color: transparent;
    width: 100%;
}

.header-area .main-nav .menu-trigger.active span:before {
    -moz-transform: translateY(6px) translateX(1px) rotate(45deg);
    -ms-transform: translateY(6px) translateX(1px) rotate(45deg);
    -webkit-transform: translateY(6px) translateX(1px) rotate(45deg);
    transform: translateY(6px) translateX(1px) rotate(45deg);
    background-color: #1e1e1e;
}

.background-header .main-nav .menu-trigger.active span:before {
    background-color: #1e1e1e;
}

.header-area .main-nav .menu-trigger.active span:after {
    -moz-transform: translateY(-6px) translateX(1px) rotate(-45deg);
    -ms-transform: translateY(-6px) translateX(1px) rotate(-45deg);
    -webkit-transform: translateY(-6px) translateX(1px) rotate(-45deg);
    transform: translateY(-6px) translateX(1px) rotate(-45deg);
    background-color: #1e1e1e;
}

.background-header .main-nav .menu-trigger.active span:after {
    background-color: #1e1e1e;
}

.header-area.header-sticky {
    min-height: 80px;
}

.header-area.header-sticky .nav {
    margin-top: 20px !important;
}

.header-area.header-sticky .nav li a.active {
    color: #fba70b;
}

@media (max-width: 1200px) {
    .header-area .main-nav .nav li {
        padding-left: 12px;
        padding-right: 12px;
    }

    .header-area .main-nav:before {
        display: none;
    }
}

@media (max-width: 991px) {
    .logo {
        text-align: center;
        float: none !important;
    }

    .header-area {
        background-color: #f7f7f7;
        padding: 0px 15px;
        height: 80px;
        box-shadow: none;
        text-align: center;
    }

    .header-area .container {
        padding: 0px;
    }

    .header-area .logo {
        margin-left: 30px;
    }

    .header-area .menu-trigger {
        display: block !important;
    }

    .header-area .main-nav {
        overflow: hidden;
    }

    .header-area .main-nav .nav {
        float: none;
        width: 100%;
        margin-top: 0px !important;
        display: none;
        -webkit-transition: all 0s ease 0s;
        -moz-transition: all 0s ease 0s;
        -o-transition: all 0s ease 0s;
        transition: all 0s ease 0s;
        margin-left: 0px;
    }

    .header-area .main-nav .nav li:first-child {
        border-top: 1px solid #eee;
    }

    .header-area .main-nav .nav li {
        width: 100%;
        background: #fff;
        border-bottom: 1px solid #eee;
        padding-left: 0px !important;
        padding-right: 0px !important;
    }

    .header-area .main-nav .nav li a {
        height: 50px !important;
        line-height: 50px !important;
        padding: 0px !important;
        border: none !important;
        background: #f7f7f7 !important;
        color: #191a20 !important;
    }

    .header-area .main-nav .nav li a:hover {
        background: #eee !important;
        color: #fba70b !important;
    }

    .header-area .main-nav .nav li.submenu ul {
        position: relative;
        visibility: inherit;
        opacity: 1;
        z-index: 1;
        transform: translateY(0%);
        transition-delay: 0s, 0s, 0.3s;
        top: 0px;
        width: 100%;
        box-shadow: none;
        height: 0px;
    }

    .header-area .main-nav .nav li.submenu ul li a {
        font-size: 12px;
        font-weight: 400;
    }

    .header-area .main-nav .nav li.submenu ul li a:hover:before {
        width: 0px;
    }

    .header-area .main-nav .nav li.submenu ul.active {
        height: auto !important;
    }

    .header-area .main-nav .nav li.submenu:after {
        color: #3B566E;
        right: 25px;
        font-size: 14px;
        top: 15px;
    }

    .header-area .main-nav .nav li.submenu:hover ul,
    .header-area .main-nav .nav li.submenu:focus ul {
        height: 0px;
    }
}

@media (min-width: 992px) {
    .header-area .main-nav .nav {
        display: flex !important;
    }
}














.button-container {
    position: absolute;
    bottom: 10px;
    /* Adjusted to ensure visibility */
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 1;
}

.prev-btn,
.next-btn {
    background: linear-gradient(135deg, rgba(255, 0, 0, 0.7), rgba(255, 173, 0, 0.7));
    color: white;
    border: 2px solid #4c136f;
    padding: 15px;
    font-size: 30px;
    cursor: pointer;
    border-radius: 50%;
    box-shadow: 0px 0px 15px rgba(0, 123, 255, 0.3);
    transition: background-color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    outline: none;
}

.prev-btn:focus,
.next-btn:focus {
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.5);
}

.prev-btn:hover,
.next-btn:hover {
    background: linear-gradient(135deg, rgba(255, 0, 0, 0.7), rgba(255, 173, 0, 0.7));
    transform: scale(0.90);
}

.prev-btn span,
.next-btn span {
    font-size: 30px;
}

@media (max-width: 768px) {
    .testi-item {
        display: none;
    }

    .testi-item:first-child {
        display: block;
    }

    .button-container {
        display: flex;
        /* Ensure buttons are displayed on mobile */
    }
}

@media (max-width: 480px) {
    .testi-video {
        height: 150px;
    }
}









/*
---------------------------------------------
welcome
---------------------------------------------
*/





.welcome-area {
    display: flex;
    /* Use flexbox for layout */
    align-items: center;
    /* Center items vertically */
    justify-content: space-between;
    /* Space out elements */
    padding: 20px;
    /* Add padding for spacing */
    flex-wrap: wrap;
    /* Allow elements to wrap on smaller screens */
}

.header-text {
    flex: 1;
    /* Allow the header text to take available space */
    max-width: 50%;
    /* Limit the width */
    padding-right: 20px;
    /* Add space between text and image */
}

.banner {
    width: 50%;
    /* Set width for banner container */
    height: auto;
    /* Automatic height based on image */
}

.banner img {
    max-width: 100%;
    /* Ensure the image is responsive */
    height: auto;
    /* Maintain aspect ratio */
}

/* Media Queries for Responsiveness */
@media (max-width: 768px) {
    .welcome-area {
        flex-direction: column;
        /* Stack elements vertically on smaller screens */
        align-items: center;
        /* Center elements horizontally */
    }

    .header-text {
        max-width: 100%;
        /* Allow full width on smaller screens */
        padding-right: 0;
        /* Remove padding */
        text-align: center;
        /* Center text */
    }

    .banner {
        width: 100%;
        /* Make the banner full width */
        margin-top: 20px;
        /* Add some space above the image */
    }
}

@media (max-width: 480px) {
    .header-text h1 {
        font-size: 28px;
        /* Adjust font size for smaller screens */
    }

    .header-text h4 {
        font-size: 22px;
        /* Adjust font size for smaller screens */
    }

    .button {
        font-size: 16px;
        /* Adjust button font size */
        padding: 10px 20px;
        /* Adjust padding for buttons */
    }
}







/*
---------------------------------------------
about
---------------------------------------------
*/

#about {
    padding: 100px 0px;
    position: relative;
    z-index: 9;
}

@media (max-width: 992px) {
    .features-item {
        margin-bottom: 45px;
    }
}

.features-item {
    border-radius: 5px;
    padding: 60px 30px;
    text-align: center;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}

.features-item h2 {
    z-index: 9;
    position: absolute;
    top: 15px;
    left: 45px;
    font-size: 100px;
    font-weight: 600;
    color: #fdefe9;
}

.features-item img {
    z-index: 10;
    position: relative;
    max-width: 100%;
    margin-bottom: 40px;
}

.features-item h4 {
    margin-top: 0px;
    font-size: 22px;
    color: #1e1e1e;
    margin-bottom: 25px;
}

.features-item .main-button {
    margin-top: 35px;
    display: inline-block;
}


/*
---------------------------------------------
promotion
---------------------------------------------
*/

.left-image-decor {
    background-image: url(../images/left-bg-decor.png);
    background-repeat: no-repeat;
    position: absolute;
    width: 100%;
    display: inline-block;
    height: 110%;
    margin-top: -200px;
}

#promotion {
    padding: 100px 0px;
}

#promotion .left-image {
    align-self: center;
}

#promotion .right-text ul {
    padding: 0;
    margin: 0;
}

#promotion .right-text ul li {
    display: inline-block;
    margin-bottom: 60px;
}

#promotion .right-text ul li:last-child {
    margin-bottom: 0px;
}

#promotion .right-text img {
    display: inline-block;
    float: left;
    margin-right: 30px;
}

#promotion .right-text h4 {
    font-size: 22px;
    color: #1e1e1e;
    margin-bottom: 15px;
    margin-top: 3px;
}


/*
--------------------------------------------
testimonials
--------------------------------------------
*/

.right-image-decor {
    background-image: url(../images/right-bg-decor.png);
    background-repeat: no-repeat;
    background-position: right center;
    position: absolute;
    width: 100%;
    display: inline-block;
    height: 110%;
    margin-top: -200px;
}

#testimonials {
    padding-top: 100px;
    position: relative;
    z-index: 9;
}

#testimonials .item {
    position: relative;
}

#testimonials .item .testimonial-content {
    border: 4px solid #4c136f;
    background: rgb(244, 129, 63);
    background: linear-gradient(135deg, rgba(255, 0, 0, 0.7), rgba(255, 173, 0, 0.7));
    padding: 40px 30px;
    /* Default padding for larger screens */
    text-align: center;
    border-radius: 50px;
}

/* Media query for mobile devices */
@media only screen and (max-width: 768px) {
    #testimonials .item .testimonial-content {
        padding: 14px 10px;
        /* Reduced padding for mobile */
    }
}


#testimonials .item .testimonial-content ul li {
    display: inline-block;
    margin: 0px 1px;
}

#testimonials .item .testimonial-content ul li i {
    color: #fff;
    font-size: 13px;
}

#testimonials .item .testimonial-content h4 {
    font-size: 22px;
    margin-top: 20px;
    color: #fff;
}

#testimonials .item .testimonial-content p {
    color: #fff;
    font-style: italic;
    font-weight: 200;
    margin: 20px 0px 15px 0px;
}

#testimonials .item .testimonial-content span {
    color: #fff;
    font-weight: 200;
    font-size: 13px;
}

#testimonials .author img {
    max-width: 120px;
    margin-bottom: -60px;
}

.owl-carousel .owl-nav button.owl-next span {
    border: 4px solid #4c136f;
    z-index: 10;
    top: 45%;
    border-radius: 10px;
    font-size: 46px;
    color: #fff;
    right: -210px;
    width: 80px;
    height: 80px;
    line-height: 80px;
    text-align: center;
    display: inline-block;
    background: rgb(244, 129, 63);
    background: linear-gradient(135deg, rgba(255, 0, 0, 0.7), rgba(255, 173, 0, 0.7));
    position: absolute;
}

.owl-carousel .owl-nav button.owl-prev span {
    border: 4px solid #4c136f;
    z-index: 9;
    top: 30%;
    border-radius: 10px;
    font-size: 46px;
    color: #fff;
    right: -150px;
    width: 80px;
    height: 80px;
    line-height: 80px;
    text-align: center;
    display: inline-block;
    background: rgb(244, 129, 63);
    background: linear-gradient(135deg, rgba(255, 0, 0, 0.7), rgba(255, 173, 0, 0.7));
    position: absolute;
}

@media screen and (max-width: 1060px) {
    .owl-carousel .owl-nav {
        display: none !important;
    }
}





/*
---------------------------------------------
footer
---------------------------------------------
*/

@media (max-width: 992px) {
    footer {
        padding-top: 0px !important;
        margin-top: 0px !important;
    }

    .contact-form {
        margin-bottom: 45px;
    }

    footer .right-content {
        text-align: center;
    }

    footer .footer-content {
        padding: 60px 0px !important;
    }
}

footer {
    margin-top: 200px;
    padding-top: 120px;
    /*background-image: url(../images/footer-bg.png);*/
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    width: 100%;
}

footer .footer-content {
    padding: 120px 0px;
}

.contact-form {
    position: relative;
    z-index: 10;
    padding: 45px;
    border-radius: 5px;
    background-color: #fff;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);

}

footer .right-content {
    align-self: center;
}

.contact-form input,
.contact-form textarea {
    color: #777;
    font-size: 13px;
    border: 1px solid #eee;
    background-color: #f7f7f7;
    border-radius: 5px;
    width: 100%;
    height: 50px;
    outline: none;
    padding-left: 20px;
    padding-right: 20px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin-bottom: 30px;
}

.contact-form textarea {
    height: 150px;
    resize: none;
    padding: 20px;
}

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

.contact-form ::-webkit-input-placeholder {
    /* Edge */
    color: #7a7a7a;
}

.contact-form :-ms-input-placeholder {
    /* Internet Explorer 10-11 */
    color: #7a7a7a;
}

.contact-form ::placeholder {
    color: #7a7a7a;
}

.footer-content .right-content {
    color: #fff;
}

.footer-content .right-content h2 {
    margin-top: 0px;
    margin-bottom: 30px;
    font-size: 42px;
    text-transform: capitalize;
    font-weight: 700;
    letter-spacing: 1px;
}

.footer-content .right-content h2 em {
    font-style: normal;
    color: #181cc8;
}

.footer-content .right-content p {
    color: #FFF;
}

.footer-content .right-content a {
    color: #FFF;
}

.footer-content .right-content a:hover {
    color: #FC3;
}

footer .social {
    overflow: hidden;
    margin-top: 30px;
}

footer .social li:first-child {
    margin-left: 0px;
}

footer .social li {
    margin: 0px 7.5px;
    display: inline-block;
}

footer .social li a {
    color: #fff;
    text-align: center;
    background-color: transparent;
    border: 1px solid #fff;
    width: 44px;
    height: 44px;
    line-height: 44px;
    border-radius: 50%;
    display: inline-block;
    font-size: 16px;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
    transition: all 0.3s ease 0s;
}

footer .social li a:hover {
    background-color: #fba70b;
    border-color: #fba70b;
    color: #fff;
}

footer .copyright {
    margin-top: 10px;
    font-weight: 400;
    font-size: 15px;
    color: #4a4a4a;
    letter-spacing: 0.88px;
    text-transform: capitalize;
}

footer .sub-footer {
    padding: 60px 0px;
    border-top: 1px solid rgba(250, 250, 250, 0.3);
    text-align: center;
}

footer .sub-footer a {
    color: #FFF;
}

footer .sub-footer a:hover {
    color: #FC3;
}

footer .sub-footer p {
    color: #fff;
    font-size: 15px;
    font-weight: 300;
    letter-spacing: 0.5px;
}

@media (max-width: 991px) {
    footer .copyright {
        text-align: center;
    }

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

/*
---------------------------------------------
preloader
---------------------------------------------
*/
#preloader {
    overflow: hidden;
    background: linear-gradient(145deg, rgb(15, 120, 115) 0%, rgb(75, 154, 149) 100%);
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    position: fixed;
    z-index: 9999;
    color: #fff;
}

#preloader .jumper {
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: block;
    position: absolute;
    margin: auto;
    width: 50px;
    height: 50px;
}

#preloader .jumper>div {
    background-color: #fff;
    width: 10px;
    height: 10px;
    border-radius: 100%;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    position: absolute;
    opacity: 0;
    width: 50px;
    height: 50px;
    -webkit-animation: jumper 1s 0s linear infinite;
    animation: jumper 1s 0s linear infinite;
}

#preloader .jumper>div:nth-child(2) {
    -webkit-animation-delay: 0.33333s;
    animation-delay: 0.33333s;
}

#preloader .jumper>div:nth-child(3) {
    -webkit-animation-delay: 0.66666s;
    animation-delay: 0.66666s;
}

@-webkit-keyframes jumper {
    0% {
        opacity: 0;
        -webkit-transform: scale(0);
        transform: scale(0);
    }

    5% {
        opacity: 1;
    }

    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 0;
    }
}

@keyframes jumper {
    0% {
        opacity: 0;
        -webkit-transform: scale(0);
        transform: scale(0);
    }

    5% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}















@keyframes heartbeat {

    0%,
    100% {
        transform: scale(1);
        box-shadow: 0 10px 25px rgba(0, 0, 0, 1.15), 0 0 20px rgba(102, 153, 255, 2.5);
        /* Initial light */
        background: linear-gradient(135deg, rgba(255, 0, 0, 0.7), rgba(255, 173, 0, 0.7));
        /* Initial background */
    }

    25% {
        transform: scale(1.1);
        /* Heartbeat expands */
        box-shadow: 0 15px 35px rgba(0, 0, 0, 1.25), 0 0 30px rgba(102, 153, 255, 3.5);
        /* Brighter light */
        background: linear-gradient(135deg, rgba(255, 0, 0, 0.9), rgba(255, 173, 0, 0.9));
        /* Brighter background */
    }

    50% {
        transform: scale(1);
        /* Returns to normal size */
        box-shadow: 0 10px 25px rgba(0, 0, 0, 1.15), 0 0 20px rgba(102, 153, 255, 2.5);
        /* Dimmer light */
        background: linear-gradient(135deg, rgba(255, 0, 0, 0.7), rgba(255, 173, 0, 0.7));
        /* Normal background */
    }

    75% {
        transform: scale(1.05);
        /* Slight contraction */
        box-shadow: 0 12px 30px rgba(0, 0, 0, 1.20), 0 0 25px rgba(102, 153, 255, 3.0);
        /* Medium brightness */
        background: linear-gradient(135deg, rgba(255, 0, 0, 0.8), rgba(255, 173, 0, 0.8));
        /* Medium brightness */
    }
}

.button {
    padding: 16px 50px;
    font-size: 24px;
    font-weight: bold;
    color: #ffffff;
    background: linear-gradient(135deg, rgba(255, 0, 0, 0.7), rgba(255, 173, 0, 0.7));
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 40px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 1.15), 0 0 20px rgba(102, 153, 255, 2.5);
    backdrop-filter: blur(8px);
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 1.3px;
    position: relative;
    overflow: hidden;
    animation: heartbeat 3s infinite;
    /* Slower pulse rate (changed from 1.5s to 3s) */
}

.button::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: linear-gradient(45deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
    transition: opacity 0.3s ease, transform 0.3s ease;
    opacity: 0;
    transform: rotate(45deg);
}

.button:hover::before {
    opacity: 1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(0deg);
}

.button:hover {
    transform: scale(1.08);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2), 0 0 30px rgba(102, 153, 255, 0.8);
    border-color: rgba(255, 255, 255, 0.4);
}

.button:active {
    transform: scale(0.95);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2), 0 0 10px rgba(102, 153, 255, 0.3);
}

.button:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(102, 153, 255, 0.4);
}








/* کانتینر اصلی */
.container {
    display: flex;
    max-width: 1200px;
    margin: auto;
    padding: 20px;
    /* flex-direction: column; */
    /* تغییر جهت به عمودی */
    /* align-items: center; */
}

/* کانتینر ویدیو */
.video-container {
    position: relative;
    border: 4px solid #4c136f;
    width: 100%;
    /* عرض تمام‌صفحه */
    max-width: 500px;
    /* حداکثر عرض */
    aspect-ratio: 16 / 9;
    /* نسبت تصویر استاندارد */
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(255, 0, 0, 0.7), rgba(255, 173, 0, 0.7));
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    margin-bottom: 20px;
}

/* ویدیو */
.video-container video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
}

/* دکمه‌های کنترل */
.button-container2 {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
    transform: translateY(-50%);
    pointer-events: none;
}

.button-container2 button {
    padding: 10px 15px;
    font-size: 14px;
    border: none;
    border-radius: 10px;
    background-color: #4c136f;
    color: white;
    cursor: pointer;
    opacity: 0.7;
    pointer-events: auto;
    transition: background-color 0.3s, opacity 0.3s;
}

.button-container2 button:hover {
    background-color: #751b96;
    opacity: 1;
}

.button-container2 button:disabled {
    background-color: #aaa;
    cursor: not-allowed;
}

/* استایل برای کپشن متحرک */
.caption-marquee {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    background: linear-gradient(90deg, #4c136f, #702c8a);
    color: #fff;
    padding: 10px 0;
    border-radius: 10px;
    margin-bottom: 20px;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    font-family: Arial, sans-serif;
}

.caption-content {
    display: inline-block;
    animation: scroll 10s linear infinite;
}

@keyframes scroll {
    from {
        transform: translateX(100%);
    }

    to {
        transform: translateX(-100%);
    }
}

@media (max-width: 768px) {
    .video-container {
        max-width: 100%;
    }

    .button-container2 {
        padding: 0 10px;
    }
}





.button-container button {
    padding: 10px 20px;
    font-size: 16px;
    border: none;
    border-radius: 10px;
    background-color: #4c136f;
    color: white;
    cursor: pointer;
    transition: background-color 0.3s;
}





.news-list {
    flex: 1;
}

.news-list h2 {
    margin-bottom: 20px;
}

.news-item {
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 15px;
    margin-bottom: 10px;
    transition: background-color 0.3s;
}

.news-item:hover {
    background-color: #f0f0f0;
    cursor: pointer;
}






.testi-section {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
    overflow: hidden;
}

.testi-container {
    position: relative;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.testi-wrapper {
    display: flex;
    flex-wrap: wrap;
    /* برای مدیریت بهتر در اندازه‌های کوچک‌تر */
    transition: transform 0.5s ease-in-out;
    margin-bottom: 60px;
    justify-content: center;
    /* آیتم‌ها در مرکز قرار بگیرند */
}

.testi-item {
    flex: 1 1 30%;
    box-sizing: border-box;
    padding: 15px;
    text-align: center;
    margin: 10px;
    overflow: hidden;
}

.testi-border {
    border: 4px solid #4c136f;
    padding: 5px;
    border-radius: 20px;
    background-color: white;
    background: linear-gradient(135deg, rgba(255, 0, 0, 0.7), rgba(255, 173, 0, 0.7));
    box-shadow: 0 4px 15px rgba(0, 123, 255, 0.1);
    margin-bottom: 15px;
}

.testi-video {
    width: 100%;
    height: auto;
    /* ارتفاع خودکار برای حفظ نسبت */
    border-radius: 15px;
    border: 2px solid #0056b3;
}

.testi-text {
    font-size: 1em;
    font-style: italic;
    color: #4c136f;
    margin-top: 10px;
    margin-bottom: 20px;
}

/* دکمه‌ها */
.button-container {
    display: flex;
    justify-content: center;
    gap: 10px;
}

button.prev-btn,
button.next-btn {
    background: none;
    border: none;
    font-size: 1.5rem;
    color: #4c136f;
    cursor: pointer;
}

button.prev-btn:hover,
button.next-btn:hover {
    color: #0056b3;
}

/* Media Queries برای صفحه‌های کوچک‌تر */
@media (max-width: 768px) {
    .testi-item {
        flex: 1 1 100%;
        /* اندازه بزرگ‌تر برای آیتم‌ها */
        margin: 5px;
    }

    .testi-video {
        height: 400px;
        /* ارتفاع ویدیوی کمتر */
    }

    .testi-text {
        font-size: 0.9em;
    }
}

@media (max-width: 480px) {
    .testi-item {
        flex: 1 1 100%;
        /* هر آیتم کل عرض را اشغال کند */
    }

    .testi-video {
        height: 300px;
        /* ارتفاع ویدیوی کمتر */
    }

    .testi-text {
        font-size: 0.8em;
    }
}







#contact-us {
    background: linear-gradient(to right, #4a90e2, #4c136f);
    color: #fff;
    padding: 30px 0;
    position: relative;
    overflow: hidden;
}

#contact-us::before {
    content: '';
    position: absolute;
    top: -20px;
    left: 0;
    right: 0;
    height: 60px;
    background: #97e5e5;
    clip-path: polygon(0 100%, 50% 0%, 100% 100%);
    z-index: 0;
}

#contact-us::after {
    content: '';
    position: absolute;
    bottom: -20px;
    left: 0;
    right: 0;
    height: 60px;
    background: #daf1f1;
    clip-path: ellipse(100% 100% at 50% 0%);
    z-index: 0;
}

.footer-content {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    z-index: 1;
    border-radius: 8px;
    overflow: hidden;
}

.footer-content .row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer-content p {
    margin: 5px 0;
    /* Adjusted margins for smaller height */
    line-height: 1.6;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}

.footer-content a {
    text-decoration: none;
    color: whitesmoke;
    transition: color 0.3s;
}

.footer-content a:hover {
    color: #fff;
}

.rtl {
    direction: rtl;
}

.matan {
    color: #ffdd57;
    font-size: 24px;
    margin-top: 10px;
    /* Reduced margin for smaller height */
}

.footer-content h2 {
    margin: 10px 0;
    /* Adjusted margin for smaller height */
    font-size: 24px;
}

.social-icons {
    margin-top: 10px;
    /* Reduced margin */
}

.social-icons a {
    color: #fff;
    margin: 0 8px;
    /* Adjusted spacing for smaller height */
    font-size: 20px;
    transition: color 0.3s;
}

.social-icons a:hover {
    color: #ffdd57;
}

@keyframes gradient-animation {
    0% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }

    100% {
        background-position: 0% 50%;
    }
}

#contact-us {
    background: linear-gradient(to right, #0e2231, #4c136f);
    background-size: 400% 400%;
    animation: gradient-animation 15s ease infinite;
}

.footer-content {
    transition: transform 0.3s ease;
}

#contact-us:hover .footer-content {
    transform: translateY(-10px);
}


@media (max-width: 768px) {
    #contact-us {
        padding: 15px 0;
        /* Reduced vertical padding */
    }

    .footer-content {
        padding: 10px 5px;
        /* Adjusted padding for smaller screens */
    }

    .footer-content .row {
        gap: 8px;
        /* Reduced gap */
    }

    .footer-content p {
        font-size: 12px;
        /* Smaller text for mobile */
        margin: 2px 0;
        /* Further reduced margins */
    }

    .social-icons a {
        font-size: 16px;
        /* Smaller icons */
        margin: 0 4px;
        /* Adjusted spacing */
    }
}






.styled-button {
    background-color: #4CAF50;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 18px;
    margin: 10px 0;
    cursor: pointer;
    border-radius: 8px;
    transition: background-color 0.3s, transform 0.3s;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

.styled-button:hover {
    background-color: #45a049;
    transform: scale(1.05);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
}

.styled-button:active {
    transform: scale(0.95);
}











.loginButton {
    font-family: Lalezar;
    padding: 12px 40px;
    font-size: 20px;
    color: white;
    border: none;
    border-radius: 50px;
    background: linear-gradient(45deg, #db04bf, #592f72, purple, #592f72, purple, #592f72, #db04bf);
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
    background-size: 300%;
    animation: gradientMove 10s linear infinite;
}

.loginButton::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 300%;
    height: 300%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.5), transparent);
    transform: translate(-50%, -50%) scale(0.2);
    border-radius: 50%;
    pointer-events: none;
    animation: pulseLight 3s ease-in-out infinite;
}

@keyframes pulseLight {
    0% {
        transform: translate(-50%, -50%) scale(0.2);
        opacity: 0.2;
    }

    50% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.3;
    }

    100% {
        transform: translate(-50%, -50%) scale(0.2);
        opacity: 0.2;
    }
}


@keyframes gradientMove {
    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 100% 50%;
    }
}

.loginButton:hover {
    transform: scale(1.1);
    box-shadow: 0 12px 20px rgba(0, 0, 0, 0.2);
}

.fixed-login-button {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1000;
}

/* Styles for smaller button when fixed */
.fixed-login-button .loginButton {
    padding: 8px 20px;
    /* Smaller padding */
    font-size: 16px;
    /* Smaller font size */

}








.ostanButton {
    font-family: Lalezar;
    padding: 12px 40px;
    font-size: 15px;
    color: white;
    border: none;
    border-radius: 50px;
    background: linear-gradient(#0040a3, #0b3564, #000c86, #0b3564, #000c86, #001a52);
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
    background-size: 300%;
    animation: gradientMove 10s linear infinite;
}

.ostanButton::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 300%;
    height: 300%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.5), transparent);
    transform: translate(-50%, -50%) scale(0.2);
    border-radius: 50%;
    pointer-events: none;
    animation: pulseLight 3s ease-in-out infinite;
}

@keyframes pulseLight {
    0% {
        transform: translate(-50%, -50%) scale(0.2);
        opacity: 0.2;
    }

    50% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.3;
    }

    100% {
        transform: translate(-50%, -50%) scale(0.2);
        opacity: 0.2;
    }
}


@keyframes gradientMove {
    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 100% 50%;
    }
}

.ostanButton:hover {
    transform: scale(1.1);
    box-shadow: 0 12px 20px rgba(0, 0, 0, 0.2);
}

.fixed-login-button {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 1000;
}

/* Styles for smaller button when fixed */
.fixed-login-button .ostanButton {
    padding: 8px 20px;
    /* Smaller padding */
    font-size: 16px;
    /* Smaller font size */

}