/* import font family is == Inter ==*/
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');


/*
Project Name:    COASTALSAFETY
    [Table of Content]

    01. Reset

    02. Global Style

      01. Index Page Style
        section Index Page
           1.1 header section
           1.2 Hero section
           1.3 Feature section
           1.4 AboutUs section
           1.5 ChooseUs section
           1.6 Services section
           1.7 Promise section
           1.8 Plan section
           1.9 Appointment section
           1.10 Specification section
           1.11 Experience section
           1.12 Gallery section
           1.13 Testimonial section
           1.14 Blogs section
           1.15 Information section
           1.16 footer section

*/

html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
a,
p,
blockquote,
pre,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
}


/* HTML5 display-role reset for older browsers */
/* =====  01. Reset  ====== */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
    display: block;
}

body {
    font-family: 'Inter';
    line-height: 1;
    background: #FFF;
}

ol,
ul {
    list-style: none;
}

blockquote,
q {
    quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
    content: "";
}

button:focus {
    outline: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

select {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

select::-ms-expand {
    display: none;
}

label {
    font-weight: normal;
}

iframe {
    width: 100%;
}

.fa-chevron-right {
    margin-left: 5px;
}

/* =====  End of 01. Reset  ====== */
/* ===== 02. Global Style ===== */
h1 {
    font-family: 'Inter';
    font-size: 61px;
    font-weight: 700;
    line-height: 70px;
}

h2 {
    font-family: 'Inter';
    font-size: 30px;
    font-weight: 700;
    line-height: 40px;
}

h3 {
    font-size: 17px;
    line-height: 28px;
    font-weight: 700;
    font-family: 'Inter';
}

h4 {
    font-family: 'Inter';
    font-size: 15px;
    line-height: auto;
    font-weight: 700;
}

h5 {
    font-family: 'Inter';
    font-size: 13px;
    line-height: 24px;
    font-weight: 700;
}

p {
    font-size: 15px;
    font-weight: 400;
    line-height: 28px;
    font-family: 'Inter';
}

button {
    font-size: 11px;
    font-weight: 500;
    line-height: 20px;
    font-family: 'Inter';
    z-index: 0;
}

a {
    font-size: 11px;
    font-weight: 500;
    line-height: 20px;
    font-family: 'Inter';
    text-decoration: none;
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    transition: background-color 5000s ease-in-out 0s;
    -webkit-text-fill-color: #FFFFFF !important;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

span {
    font-family: 'Inter';
}

.active {
    color: #FFFFFF;
}

#Succes-box {
    position: fixed;
    background-color: #ED315D;
    text-align: center;
    width: 60%;
    padding: 103px 0;
    font-size: 36px;
    font-weight: 400;
    line-height: 40px;
    text-align: center;
    top: 29%;
    z-index: 5;
    border-radius: 25px;
    display: none;
    right: 20%;
    color: #ED315D;
}

.hover1 {
    display: inline-block;
    position: relative;
    overflow: hidden;
    border: 1px solid #FCC300;
    background: #FCC300;
    border-radius: 8px;
    color: #0B1120;
    z-index: 1;
    padding: 10px 16px;
    transition: all 0.9s ease;
    text-align: center;
    font-weight: 500;
    line-height: 20px;
    font-size: 11px;
    box-shadow: 0px 10px 15px -3px #EAB30833;

}

.hover1:hover {
    border: 1px solid #FFFFFF4D;
    background-color: transparent;
    color: #FFF;
}

.hover2 {
    display: inline-block;
    position: relative;
    overflow: hidden;
    border: 1px solid;
    background: transparent;
    border: 1px solid #FFFFFF4D;
    color: #FFFFFF;
    padding: 17px 32px;
    z-index: 1;
    font-size: 15px;
    transition: all 0.9s ease;
    text-align: center;
    font-weight: 500;
    line-height: 20px;
    border-radius: 8px;
}

.hover2:hover {
    border: 1px solid #FCC300;
    background-color: #FCC300;
    color: #0B1120;

}

/* ===== End of 02. Global Style ===== */
/* ========= 1.1 header section ========= */
header {
    position: absolute;
    margin-top: 30px;
    width: 100%;
    z-index: 100;
}

header .navbar {
    padding: 0;
}

header .justify-content-between {
    padding: 10px;
}

header .navbar-collapse {
    justify-content: center;
}

header .navbar ul li a {
    color: #FFFFFF;
    font-size: 11px;
}

header .nav-link:hover,
header .page-btn:hover,
header .dropdown-item:hover,
header .nav-link:focus,
header aside a:hover,
header aside .fa-caret-down:hover {
    color: #FCC300;
}

header .nav-logo {
    z-index: 3;
}

header .nav-logo img {
    width: 185px;
}

header .right-sidbar {
    width: 280px;
    position: fixed;
    height: 100vh;
    top: 0;
    left: -355px;
    overflow-x: hidden;
    transition: 0.5s;
    padding: 20px 10px;
    z-index: 99;
    background: #131F56;
}

header .right-sidbar a .active,
.right-sidbar a .active:hover {
    color: #1D3557;
}

header .open-aside {
    display: none;
    z-index: 2;
    position: relative;
    padding: 9px 11px;
    background-color: #FFFFFF;
    border: 1px solid #FFFFFF;
    font-size: 25px;
    color: #00ABF3;
    border-radius: 10px;
}

header .open-aside:hover {
    color: #1D3557;
    background-color: #fff;
    border: 1px solid #FFF;
}

header aside .fa-xmark {
    padding: 8px 11px;
    background-color: #FFFFFF;
    color: #00ABF3;
    border: none;
    font-size: 22px;
    border-radius: 10px;
}

header aside .fa-xmark:hover {
    color: #1D3557;
    background-color: #fff;
    border: 1px solid #00ABF3;
}

header aside .fa-caret-down {
    color: #FFFFFF;
    font-size: 22px;
}

header aside a {
    color: #FFFFFF;
}

header aside li {
    padding: 12px;
}

header #slid-drop {
    display: none;
}

header #slid-drop li {
    padding: 12px 0px;
}

header .aside-dropdwon {
    display: block !important;
    padding: 10px 0 0 0;
}

header .page-btn {
    padding: 0px;
    color: #FFFFFF;
    background-color: transparent;
    border: none;
    font-size: 16px;
    line-height: 22px;
    font-weight: 500;
}

header .join-btn {
    margin: 0px 0 0 30px;
}

header .fa-plus {
    padding-left: 3px;
    font-size: 10px;
}

/* ========= End of 1.1 header section ========= */
/* ========= 1.2 Hero section ========= */
.hero {
    background: url("../images/index/Hero.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
}


.hero h1 {
    color: #FFFFFF;
    padding: 30px 200px 0px 0px;
}

.hero .badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #FCC3004D;
    color: #FCC300;
    padding: 10px 20px;
    border-radius: 40px;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 600;
    margin-top: 100px;
}

.hero .badge .dot {
    width: 12px;
    height: 12px;
    background: #FCC300;
    border-radius: 50%;
    display: inline-block;
}

.hero .hero-text h1 {
    color: #FCC300;
    padding: 0px;
}

.hero p {
    color: #CBD5E1;
    padding: 20px 170px 20px 0px;
    font-size: 17px;
}

.hero .hover1 .fa-arrow-right {
    padding: 0px 0px 0px 20px;
}

.hero .hover1 {
    padding: 17px 32px;
    font-size: 15px;
    margin-right: 20px;
}

.hero .fa-circle-check {
    color: #FCC300;

}

.hero .mb-5 p {
    font-size: 11px;
    padding: 0 20px 0 10px;
    color: #CBD5E1;
}

/* ========= End of 1.2 Hero section ========= */
/* ========= 1.3 About section ========= */
.about {
    padding: 100px 0;
}

.about .m-0 {
    background: url("../images/index/aboutbg.png");
    background-repeat: no-repeat;
    background-position: right;
}

.about h5 {
    color: #FCC300;
}

.about p {
    color: #475569;
    padding: 20px 60px 20px 0px;
}

.about h2 {
    padding: 0px 119px 0px 0px;
    color: #0B1120;
}

.about img[alt='icons'] {
    width: 20px;
}

.about .text-start p {
    padding: 0;
    line-height: 16px;
    font-size: 11px;
    color: #64748B;
}

.about h3 {
    color: #0B1120;
}

.about .text-start {
    padding: 0px 20px 20px;
}

.about .fa-arrow-trend-down {
    color: #FCC300;
    font-size: 20px;
}

.about img {
    width: 100%;
}

.about .testimonial-card {
    width: 100%;
    background: #ffffff;
    padding: 25px 30px;
    border-radius: 8px;
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.08);
    border-left: 6px solid #FCC300;
    font-family: 'Inter', sans-serif;
}

.about .testimonial-card .quote {
    font-size: 18px;
    font-weight: 600;
    color: #0B1120;
    margin-bottom: 10px;
    line-height: 1.4;
}

.about .testimonial-card .author {
    font-size: 14px;
    color: #64748B;
    margin: 0;
}

.about .position-absolute {
    padding: 0px;
    margin-top: 50%;
    margin-left: 10%;
}

/* ========= End of 1.3 About section ========= */
/* ========= 1.4 services section ========= */
.services {
    background: #F0F4F8;
    padding: 50px 0 100px;
}

.services h5 {
    color: #FCC300;
}

.services h2 {
    color: #0B1120;
}

.services .gap-2 p {
    color: #475569;
    width: 60%;
    padding-bottom: 50px;
}

.services img[alt="sericon"] {
    width: 50px;
    background: #FEFCE8;
    padding: 10px;
    border-radius: 8px;

}

.services .gap-3 p {
    color: #475569;
    width: 95%;
}

.services a {
    color: #FCC300;
    font-size: 13px;
}

.services a i {
    padding-left: 5px;
}

.services .gap-3 {
    background: #fff;
    border: 1px solid #F1F5F9;
    box-shadow: 0px 1px 2px 0px #0000000D;
    padding: 30px 25px;
    border-radius: 12px;
    flex-grow: 1;
    width: 100%;
    height: 100%;
    transition: all 0.3s ease;
}

.services .gap-3:hover {
    background: transparent;
    border-color: #E2E8F0;
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.08);
    transform: translateY(-3px);
    cursor: pointer;
}

.services a:hover {
    color: #3b2a25;
}

/* ========= End of 1.4 services section ========= */
/* ========= 1.5 choose section ========= */
.choose {
    background: #0B1120;
    padding: 100px 0;
}

.choose h5 {
    color: #FCC300;
}

.choose h2 {
    color: #FFFFFF;
}

.choose p {
    color: #CBD5E1;
    padding: 0 0 20px 0;
}

.choose img[alt="icon"] {
    width: 50px;
    height: 50px;
    background: #FCC3001A;
    padding: 10px;
    border-radius: 8px;
}

.choose h4 {
    color: #FFFFFF;
}

.choose .gap-1 p {
    font-size: 11px;
}

.choose img {
    width: 100%;
    border-radius: 8px;
}

.choose .testimonial-card {
    width: 80%;
    backdrop-filter: blur(16.200000762939453px);
    padding: 25px 30px;
    border-radius: 12px;
    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.08);
    font-family: 'Inter', sans-serif;
}

.choose .testimonial-card .quote {
    font-size: 30px;
    font-weight: 600;
    color: #FCC300;
    line-height: 36px;
}

.choose .testimonial-card .author {
    font-size: 16px;
    color: #E2E8F0;
    margin: 0;
}

.choose .position-absolute {
    padding: 0px;
    margin-top: 60%;
    margin-left: 10%;
    margin-right: 5%;
}

.choose .testimonial-card p {
    padding: 0px;
}

/* ========= End of 1.5 choose section ========= */
/* =========  1.6 challenge section ========= */
.challenge {
    background: #FFFFFF;
    padding: 50px 0 100px;
}

.challenge h5 {
    color: #FCC300;
}

.challenge h2 {
    color: #0B1120;
}

.challenge .gap-2 p {
    color: #475569;
    width: 60%;
    padding-bottom: 50px;
}

.challenge img[alt="icon"] {
    width: 65px;
    height: 65px;
    background: #FEE2E2;
    padding: 15px;
    border-radius: 30px;

}

.challenge .custom-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.challenge .custom-list li {
    font-size: 13px;
    margin: 30px 0;
    padding-left: 20px;
    position: relative;
}

/* Custom red bullet */
.challenge .custom-list li::before {
    content: "";
    width: 8px;
    height: 8px;
    background: #F87171;
    border-radius: 50%;
    position: absolute;
    left: 0;
    top: 6px;
}

.challenge .text-start {
    background: #FEF2F2;
    padding: 50px;
    border-radius: 16px;
}

.challenge .justify-content-start {
    background: #FEFCE8;
    padding: 50px;
    border-radius: 16px;
}

.challenge img[alt="icon1"] {
    width: 65px;
    height: 65px;
    background: #FEF9C3;
    padding: 15px;
    border-radius: 30px;

}

.challenge .list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.challenge .list li {
    font-size: 13px;
    margin: 30px 0;
    padding-left: 30px;
    position: relative;
}

.challenge .list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 2px;
    width: 18px;
    height: 18px;
    background: url("../images/icons/chalicon2.svg") no-repeat center;
    background-size: contain;
}

.challenge h3 {
    color: #0B1120;
    padding: 20px 0px 0px;
}

.challenge img[alt="chalimg1"] {
    position: absolute;
    right: -49px;
    top: -50px;
    border-radius: 12px;
}

/* ========= End of 1.6 challenge section ========= */
/* ========= 1.7 texas section ========= */
.texas {
    padding: 100px 0;
    background: #F0F4F8;
}

.texas h5 {
    color: #FCC300;
}

.texas h2 {
    color: #0B1120;
    padding-bottom: 50px;
}

.texas .testimonial-card {
    max-width: 420px;
    background: #FFFFFF;
    padding: 25px 30px;
    border-radius: 14px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
    border: 1px solid #eef1f6;
}

.texas .quote {
    font-size: 15px;
    line-height: 1.6;
    color: #4a4f58;
    position: relative;
    padding-left: 10px;
}

.texas .quote::before {
    content: "“";
    font-size: 40px;
    color: #f2e8c2;
    position: absolute;
    left: -5px;
    top: -10px;
}

.texas .quote::after {
    content: "”";
    font-size: 40px;
    color: #f2e8c2;
    position: absolute;
    right: -10px;
    bottom: -25px;
}

.texas .author {
    margin-top: 20px;
}

.texas .author h4 {
    font-size: #0B1120;
    margin: 0;
    font-size: 16px;
    font-weight: bold;
}

.texas .role {
    margin: 2px 0;
    color: #FCC300;
    font-size: 14px;
}

.texas .company {
    color: #94A3B8;
    font-size: 13px;
}

.texas .brand-section {
    width: 100%;
    padding: 80px 0 0 0;
    display: flex;
    justify-content: center;
    background: #f1f5f9;
}

.texas .brand-list {
    display: flex;
    gap: 80px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

.texas .brand-list span {
    font-size: 20px;
    letter-spacing: 1px;
    font-weight: 600;
    color: #94A3B8;
    text-transform: uppercase;
    transition: 0.3s ease;
}

.texas .brand-list span:hover {
    color: #6d7a8c;
    cursor: pointer;
}

/* ========= End of 1.7 texas section ========= */
/* =========  1.8 footer section ========= */
footer {
    background-color: #0B1120;
    padding: 50px 0;
    border-bottom: 1px solid #FFFFFF;
}

footer p {
    color: #FFFFFF;
    font-size: 11px;
    padding-right: 50%;
}

footer img {
    width: 199px;
}

footer .gap-2 i {
    color: #FFFFFF;
    font-size: 25px;

}

footer .gap-2 i:hover {
    color: #FCC300;
}

footer h3 {
    color: #FFFFFF;
}

footer .w-100 {
    width: 80% !important;
}

footer .w-100 a {
    color: #FFFFFF;
}

footer .w-100 a:hover {
    color: #FCC300;
    ;
}

footer .gap-3 i {
    color: #FCC300;
    ;
    border: none;
    font-size: 20px;
}

footer .gap-3 i:hover {
    color: #FFFFFF;
    border: none;
}

footer .gap-3 a {
    color: #FFFFFF;
}

footer .gap-3 a:hover {
    color: #FCC300;
}

footer .m-0 p {
    font-size: 11px;
    color: #FFFFFF;
}

footer .m-0 a {
    color: #FFFFFF;
}

footer .m-0 a:hover {
    color: #FCC300;
}

footer .m-0 {
    padding-top: 80px;
}

/* ========= End of 1.8 footer section ========= */