@import"https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap";
@import"https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap";
@import"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css";
@import"https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap";

html,
body {
    min-height: 100%
}

html .form-control,
body .form-control {
    box-shadow: none !important
}

body {
    font-family: "Poppins", sans-serif;
    font-size: 14px
}

body a {
    display: inline-flex;
    text-decoration: none
}

body ul {
    padding: 0;
    margin: 0
}

body ul li {
    list-style-type: none
}

body .form-select {
    box-shadow: none !important
}

.page-banner {
    background-image: url("../images/about-bg.png");
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
    padding: 40px 0
}

.page-banner h1 {
    color: #fff;
    text-align: center;
    font-size: 40px;
    margin: 100px 0 50px;
    font-weight: 700
}

.tooltip {
    opacity: 1 !important
}

.tooltip .tooltip-inner {
    max-width: 265px;
    background-color: #14285c !important;
    color: #fff !important;
    border: 1px solid hsla(0, 0%, 100%, .3);
    border-radius: 8px;
    padding: 10px;
    font-size: 13px !important
}

.login-box {
    min-height: 100vh;
    background-image: url("../images/login-bg.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px 10px;
    font-family: "Figtree", sans-serif
}

.login-box .box {
    max-width: 440px
}

.login-box .box .inner {
    background: hsla(0, 0%, 100%, .5019607843);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    padding: 30px 25px;
    border-radius: 20px;
    margin-top: 20px
}

.login-box .box .inner h4 {
    font-size: 20px;
    color: #140f49;
    text-align: center;
    font-weight: 800;
    margin-bottom: 30px
}

.login-box .box .inner .sub-title {
    text-align: center;
    font-size: 14px;
    color: #140f49;
    font-weight: 400;
    margin-bottom: 30px
}

.login-box .box .inner label {
    font-size: 14px;
    color: #140f49;
    font-weight: 500;
    margin-bottom: 5px
}

.login-box .box .inner .form-control {
    border-radius: 8px;
    font-size: 14px;
    padding: 12px 15px;
    border: none;
    background: #f3f3f5
}

.login-box .box .inner .form-control::placeholder {
    color: #717182
}

.login-box .box .inner .relative {
    position: relative
}

.login-box .box .inner .relative .form-control {
    padding-right: 35px
}

.login-box .box .inner .relative i {
    font-size: 14px;
    color: #717182;
    position: absolute;
    top: 16px;
    right: 10px;
    cursor: pointer
}

.login-box .box .inner .forgot-password {
    font-size: 14px;
    color: #140f49;
    font-weight: 600
}

.login-box .box .inner .btn-submit {
    font-size: 14px;
    color: #fff;
    font-weight: 500;
    background: #3b83f6;
    width: 100%;
    border-radius: 40px;
    padding: 10px 20px;
    transition: .3s ease-in-out
}

.login-box .box .inner .btn-submit:hover {
    background-color: #140f49
}

.login-box .box .inner .radioBox {
    background: #f3f3f5;
    border: 1px solid #dbeafe;
    padding: 13px 15px;
    border-radius: 8px
}

.login-box .box .inner .radioBox .form-check-input {
    margin-left: 0;
    border-color: #140f49
}

.login-box .box .inner .radioBox .form-check-input:checked {
    background-color: #140f49
}

.login-box .box .inner .form-check {
    display: flex;
    align-items: center
}

.login-box .box .inner .form-check .form-check-input {
    width: 17px;
    height: 17px;
    box-shadow: none;
    margin-top: 0px
}

.login-box .box .inner .form-check .form-check-input:checked {
    background-color: #140f49;
    border-color: #140f49
}

.login-box .box .inner .form-check .form-check-label {
    margin: 0 0 0 10px
}

.login-box .box .inner .otp-box {
    display: grid;
    grid-template-columns: repeat(6, 40px);
    justify-content: center;
    gap: 15px
}

.login-box .box .inner .otp-box .form-control {
    padding: 5px;
    height: 40px;
    text-align: center;
    font-weight: 600
}

.login-box .box .inner .or {
    color: #fff;
    font-size: 20px;
    font-weight: 600;
    margin: 20px 0
}

.login-box .box .inner .btn-google,
.login-box .box .inner .btn-facebook {
    font-size: 14px;
    color: #140f49;
    font-weight: 500;
    background: #fff;
    width: 100%;
    border-radius: 40px;
    padding: 10px 20px;
    border: 1px solid #fff;
    transition: .3s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center
}

.login-box .box .inner .btn-google img,
.login-box .box .inner .btn-facebook img {
    height: 17px;
    margin-right: 6px
}

.login-box .box .inner .btn-google:hover,
.login-box .box .inner .btn-facebook:hover {
    border-color: #140f49
}

.login-box .box .inner .have-account {
    font-size: 14px;
    color: #140f49;
    font-weight: 600;
    text-align: center;
    margin: 30px 0 0
}

.login-box .box .inner .have-account a {
    color: #140f49;
    font-weight: 800;
    transition: .3s ease-in-out
}

.nav-banner {
    background-image: url("../images/home-bg.png");
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    padding: 40px 0
}

.navbar {
    border-radius: 32px;
    background: hsla(0, 0%, 100%, .1607843137);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    font-family: "Figtree", sans-serif;
    border: 1px solid hsla(0, 0%, 100%, .3);
    z-index: 9
}

.navbar .toggle-logo {
    display: flex;
    align-items: center;
    gap: 10px
}

.navbar .toggle-logo .toggle-btn {
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    display: none
}

.navbar .mob-logo {
    display: none
}

.navbar .navbar-nav {
    align-items: center
}

.navbar .navbar-nav .nav-item .dropdown-menu {
    padding: 0;
    min-width: 250px;
    overflow: hidden;
    border: 0;
    border-radius: 10px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, .1)
}

.navbar .navbar-nav .nav-item .dropdown-menu .title {
    display: flex;
    align-items: center;
    gap: 10px;
    justify-content: space-between;
    background: #140f49;
    padding: 10px;
    color: #fff;
    font-size: 13px;
    text-transform: uppercase;
    font-family: "Outfit", sans-serif
}

.navbar .navbar-nav .nav-item .dropdown-menu .title span {
    cursor: pointer;
    font-size: 12px;
    color: #717182;
    font-weight: 500
}

.navbar .navbar-nav .nav-item .dropdown-menu .scroll-list {
    padding: 5px;
    max-height: 200px;
    overflow-y: auto
}

.navbar .navbar-nav .nav-item .dropdown-menu li {
    padding: 10px;
    border: 1px solid #dad6d6;
    border-radius: 5px;
    margin-bottom: 5px
}

.navbar .navbar-nav .nav-item .dropdown-menu li a {
    display: block
}

.navbar .navbar-nav .nav-item .dropdown-menu li a h5 {
    font-size: 14px;
    font-weight: 500;
    color: #14285c;
    margin-bottom: 5px
}

.navbar .navbar-nav .nav-item .dropdown-menu li a p {
    font-size: 12px;
    font-weight: 400;
    color: #858585;
    margin-bottom: 0
}

.navbar .navbar-nav .nav-item .dropdown-menu .view-all {
    background: #3b83f6;
    color: #fff;
    padding: 5px 10px;
    width: 100%;
    text-align: center;
    margin-top: 10px;
    font-size: 12px;
    font-weight: 500;
    display: block
}

.navbar .navbar-nav .nav-item .nav-link {
    color: #fff;
    font-size: 14px;
    transition: .3s ease-in-out
}

.navbar .navbar-nav .nav-item .nav-link:hover {
    color: hsla(0, 0%, 100%, .7)
}

.navbar .navbar-nav .nav-item .nav-link.circle-link {
    border: 1px solid #fff;
    border-radius: 50%;
    padding: 10px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: hsla(0, 0%, 100%, .3);
    margin: 0 6px;
    position: relative
}

.navbar .navbar-nav .nav-item .nav-link.circle-link::after {
    display: none
}

.navbar .navbar-nav .nav-item .nav-link.circle-link span {
    position: absolute;
    right: -5px;
    top: -10px;
    background: #140f49;
    border-radius: 20px;
    font-size: 10px;
    font-weight: 500;
    color: #fff;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    text-align: center;
    line-height: 18px
}

.navbar .navbar-nav .nav-item .nav-link.circle-link img {
    height: 15px
}

.navbar .navbar-nav .nav-item .nav-link.contact-link {
    background: #3b83f6;
    color: #fff;
    padding: 10px 20px;
    border-radius: 40px;
    transition: .3s ease-in-out;
    margin-left: 10px
}

.navbar .navbar-nav .nav-item .nav-link.contact-link:hover {
    background: #140f49
}

.sub-menu {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 30px 0;
    gap: 20px;
    justify-content: space-between
}

.sub-menu li a {
    font-size: 14px;
    color: #fff;
    display: block;
    position: relative
}

.sub-menu li a.active::before {
    content: "";
    position: absolute;
    bottom: -5px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    height: 2px;
    background: #fff
}

.mob-nav {
    top: 0;
    left: -100%;
    position: fixed;
    width: 100%;
    height: 100vh;
    z-index: 9999;
    overflow-y: auto;
    padding: 40px 20px;
    transition: .2s ease-in-out;
    font-family: "Figtree", sans-serif;
    background-color: #001c34
}

.mob-nav.show {
    left: 0
}

.mob-nav .header {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.mob-nav .header span {
    color: #fff;
    font-size: 18px
}

.mob-nav ul {
    padding: 20px 0
}

.mob-nav ul li {
    border-bottom: 1px solid hsla(0, 0%, 100%, .4)
}

.mob-nav ul li a {
    display: block;
    font-size: 16px;
    color: #fff;
    font-weight: 500;
    line-height: 50px;
    letter-spacing: 4%
}

.mob-nav ul li.dropdown {
    border: 0
}

.mob-nav ul li.dropdown .dropdown-toggle {
    border-bottom: 1px solid hsla(0, 0%, 100%, .4);
    position: relative
}

.mob-nav ul li.dropdown .dropdown-toggle:after {
    display: none
}

.mob-nav ul li.dropdown .dropdown-toggle i {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%) rotate(0deg);
    transition: .2s ease-in-out
}

.mob-nav ul li.dropdown .dropdown-toggle.show {
    border: 0
}

.mob-nav ul li.dropdown .dropdown-toggle.show i {
    transform: translateY(-50%) rotate(-180deg)
}

.mob-nav ul li.dropdown .dropdown-menu {
    padding: 0;
    width: 100%;
    border-radius: 0;
    position: static !important;
    background-color: rgba(0, 0, 0, 0);
    transform: none !important
}

.mob-nav ul li.dropdown .dropdown-menu li {
    border: 0
}

.mob-nav ul li.dropdown .dropdown-menu li a {
    font-size: 14px;
    line-height: 24px;
    padding: 7px 0;
    opacity: .6
}

.footer {
    background: #14285c
}

.footer .box {
    padding: 70px 0 20px;
    gap: 50px;
    display: grid;
    justify-content: space-between;
    grid-template-columns: 1fr 1fr .7fr 1.3fr
}

.footer .box .logo-box img {
    max-width: 160px;
    width: 100%;
    margin: 20px 0
}

.footer .box .logo-box h3 {
    font-size: 28px;
    font-weight: 800;
    color: #fff
}

.footer .box .logo-box p {
    margin: 0;
    color: #fff;
    font-size: 14px;
    font-weight: 300;
    max-width: 350px
}

.footer .box .com-box h4,
.footer .box .quick-box h4,
.footer .box .pay-social h4 {
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 15px
}

.footer .box .com-box ul li,
.footer .box .quick-box ul li,
.footer .box .pay-social ul li {
    font-size: 14px;
    font-weight: 300;
    color: #fff;
    line-height: 20px;
    margin-bottom: 10px
}

.footer .box .com-box ul li a,
.footer .box .quick-box ul li a,
.footer .box .pay-social ul li a {
    color: #fff;
    display: block
}

.footer .box .com-box ul li a span,
.footer .box .quick-box ul li a span,
.footer .box .pay-social ul li a span {
    display: block;
    color: hsla(0, 0%, 100%, .6)
}

.footer .box .pay-social ul {
    display: flex;
    gap: 30px;
    margin-bottom: 30px
}

.footer .box .pay-social ul.social {
    margin-bottom: 0
}

.footer .box .pay-social ul.social li {
    margin: 0
}

.footer .box .pay-social ul li {
    line-height: 24px
}

.footer .copy-right {
    margin: 0;
    padding: 20px 0;
    color: #fff;
    font-size: 14px;
    font-weight: 300;
    text-align: center
}

.nav-banner {
    font-family: "Figtree", sans-serif
}

.nav-banner .boat-name {
    background: hsla(0, 0%, 100%, .2);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    padding: 30px;
    border-radius: 30px;
    border: 1px solid hsla(0, 0%, 100%, .3)
}

.nav-banner .boat-name.img-preview {
    padding: 30px
}

.nav-banner .boat-name h4 {
    font-size: 18px;
    color: #fff;
    margin-bottom: 20px
}

.nav-banner .boat-name .type-btn {
    display: grid;
    grid-template-columns: 350px 1fr;
    gap: 10px
}

.nav-banner .boat-name .type-btn .camera-save {
    display: flex;
    justify-content: end;
    width: 100%;
    gap: 10px
}

.nav-banner .boat-name .type-btn .camera-save .btn {
    margin: 0;
    width: auto;
    max-width: fit-content
}

.nav-banner .boat-name .type-btn .camera-save .btn.camera-btn {
    font-size: 14px;
    color: #fff;
    font-weight: 400;
    background: #140f49;
    width: 100%;
    border-radius: 40px;
    padding: 10px 20px;
    transition: .3s ease-in-out;
    max-width: 400px
}

.nav-banner .boat-name .type-btn .camera-save .btn.ai-btn {
    font-size: 14px;
    color: #fff;
    font-weight: 400;
    background: #140f49;
    width: 100%;
    border-radius: 40px;
    padding: 10px 20px;
    transition: .3s ease-in-out;
    max-width: 250px
}

.nav-banner .boat-name .type-btn .camera-save .btn.camera-btn:hover,
.nav-banner .boat-name .type-btn .camera-save .btn.ai-btn:hover {
    background-color: #3b83f6
}

.nav-banner .boat-name .input-group {
    gap: 10px
}

.nav-banner .boat-name .input-group .form-control {
    border: 1px solid #fff;
    border-radius: 40px !important;
    font-size: 14px;
    padding: 10px 15px
}

.nav-banner .boat-name .input-group .btn-preview {
    border-radius: 40px !important;
    font-size: 14px;
    background: #3b83f6;
    transition: .3s ease-in-out;
    color: #fff;
    padding: 10px 25px
}

.nav-banner .boat-name .input-group .btn-preview:hover {
    background: #140f49
}

.nav-banner .boat-name .digital-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px
}

.nav-banner .boat-name .digital-info span {
    display: none
}

.nav-banner .boat-name .form-check {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    font-size: 18px
}

.nav-banner .boat-name .form-check .form-check-input {
    width: 20px;
    height: 20px;
    box-shadow: none;
    margin-top: 0px;
    background-color: rgba(0, 0, 0, 0)
}

.nav-banner .boat-name .form-check .form-check-input:focus {
    border-color: #fff
}

.nav-banner .boat-name .form-check .form-check-input:checked {
    background-color: #140f49;
    border-color: #140f49
}

.nav-banner .boat-name .form-check .form-check-label {
    margin: 0 0 0 10px;
    color: #fff
}

.nav-banner .boat-name p {
    color: #fff;
    font-size: 14px;
    font-weight: 300;
    margin: 0
}

.nav-banner .boat-name .text-box {
    margin: 20px 0
}

.nav-banner .boat-name .text-box textarea {
    border-radius: 20px;
    min-height: 250px;
    font-size: 14px;
    padding: 20px;
    resize: none
}

.nav-banner .boat-name .select-font {
    border-radius: 20px;
    padding: 15px 25px;
    background: #fff
}

.nav-banner .boat-name .select-font .title {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.nav-banner .boat-name .select-font .title h3 {
    color: #000;
    font-size: 22px;
    font-weight: 500;
    margin: 0;
    font-family: "Poppins", sans-serif
}

.nav-banner .boat-name .select-font .title .form-select {
    display: none;
    max-width: 105px;
    font-size: 13px;
    border-color: #000;
    border-radius: 9px
}

.nav-banner .boat-name .select-font .title .nav-tabs {
    border: 0
}

.nav-banner .boat-name .select-font .title .nav-tabs .nav-item .nav-link {
    border-radius: 8px;
    border-color: #fff;
    color: #000
}

.nav-banner .boat-name .select-font .title .nav-tabs .nav-item .nav-link.active {
    border: 1px solid #3165cb
}

.nav-banner .boat-name .select-font .tab-pane {
    margin-top: 0px;
    padding: 20px 15px
}

.nav-banner .boat-name .select-font .tab-pane ul {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0 30px;
    position: relative
}

.nav-banner .boat-name .select-font .tab-pane ul::before {
    content: "";
    width: 1px;
    height: 100%;
    position: absolute;
    background: #000;
    left: 32.33%;
    transform: translateX(-33.33%)
}

.nav-banner .boat-name .select-font .tab-pane ul::after {
    content: "";
    width: 1px;
    height: 100%;
    position: absolute;
    background: #000;
    left: 67.66%;
    transform: translateX(-67.66%)
}

.nav-banner .boat-name .select-font .tab-pane ul li {
    font-size: 20px;
    font-weight: 400;
    color: #000;
    cursor: pointer;
    line-height: 41.5px
}

.nav-banner .boat-name .select-box {
    margin-top: 20px
}

.nav-banner .boat-name .select-box h5 {
    color: #fff;
    font-size: 15px;
    font-weight: 400
}

.nav-banner .boat-name .select-box>ul {
    background: #fff;
    border-radius: 8px;
    box-shadow: 0px 4px 20px 0px rgba(49, 101, 203, .1019607843)
}

.nav-banner .boat-name .select-box .select-font-color {
    display: flex;
    flex-wrap: wrap;
    padding: 15px;
    gap: 10px
}

.nav-banner .boat-name .select-box .select-font-color li .main-color {
    display: flex;
    align-items: center;
    gap: 10px
}

.nav-banner .boat-name .select-box .select-font-color li .main-color .color-box {
    width: 68px;
    height: 38px;
    border-radius: 8px;
    border-width: 1px;
    border-style: solid
}

.nav-banner .boat-name .select-box .select-font-color li .main-color .info h5 {
    color: #000;
    font-weight: 500;
    font-size: 16px;
    margin: 0
}

.nav-banner .boat-name .select-box .select-font-color li .main-color .info p {
    margin: 0;
    color: rgba(0, 0, 0, .4);
    font-weight: 500;
    font-size: 14px
}

.nav-banner .boat-name .select-box .select-font-color li .color-list {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    border-width: 1px;
    border-style: solid;
    cursor: pointer
}

.nav-banner .boat-name .select-box .activate-outline,
.nav-banner .boat-name .select-box .shadow-color {
    display: flex;
    flex-wrap: wrap;
    padding: 15px;
    gap: 10px
}

.nav-banner .boat-name .select-box .activate-outline li .main-color,
.nav-banner .boat-name .select-box .shadow-color li .main-color {
    display: flex;
    align-items: center;
    gap: 10px
}

.nav-banner .boat-name .select-box .activate-outline li .main-color .form-check,
.nav-banner .boat-name .select-box .shadow-color li .main-color .form-check {
    margin: 0;
    padding: 0
}

.nav-banner .boat-name .select-box .activate-outline li .main-color .form-check .form-check-input,
.nav-banner .boat-name .select-box .shadow-color li .main-color .form-check .form-check-input {
    border: 1px solid #000;
    float: none;
    margin: 0
}

.nav-banner .boat-name .select-box .activate-outline li .main-color .color-box,
.nav-banner .boat-name .select-box .shadow-color li .main-color .color-box {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    border-width: 1px;
    border-style: solid
}

.nav-banner .boat-name .select-box .activate-outline li .main-color .info h5,
.nav-banner .boat-name .select-box .shadow-color li .main-color .info h5 {
    color: #000;
    font-weight: 500;
    font-size: 16px;
    margin: 0
}

.nav-banner .boat-name .select-box .activate-outline li .main-color .info p,
.nav-banner .boat-name .select-box .shadow-color li .main-color .info p {
    margin: 0;
    color: rgba(0, 0, 0, .4);
    font-weight: 500;
    font-size: 14px
}

.nav-banner .boat-name .select-box .activate-outline li .color-list,
.nav-banner .boat-name .select-box .shadow-color li .color-list {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    border-width: 1px;
    border-style: solid;
    cursor: pointer
}

.nav-banner .boat-name .select-box .shadow-arc-effect {
    display: flex;
    flex-wrap: wrap;
    gap: 50px;
    padding: 20px 25px
}

.nav-banner .boat-name .select-box .shadow-arc-effect li {
    cursor: pointer
}

.nav-banner .boat-name .add-to-cart {
    margin-top: 20px;
    font-size: 14px;
    color: #fff;
    font-weight: 400;
    background: #3b83f6;
    width: 100%;
    border-radius: 40px;
    padding: 10px 20px;
    transition: .3s ease-in-out;
    max-width: 400px
}

.nav-banner .boat-name .add-to-cart:hover {
    background-color: #140f49
}

.nav-banner .boat-name .select-info label {
    font-size: 14px;
    color: #fff;
    margin-bottom: 5px
}

.nav-banner .boat-name .select-info .form-select,
.nav-banner .boat-name .select-info .form-control {
    margin-bottom: 15px;
    font-size: 14px;
    padding: 10px 15px;
    border-radius: 8px
}

.nav-banner .boat-name .col-lg-3 .select-info {
    margin-top: 20px
}

.nav-banner .boat-name .select-size {
    border-radius: 8px;
    padding: 25px;
    background: #fff;
    margin-top: 20px
}

.nav-banner .boat-name .select-size .form-check {
    font-size: 14px
}

.nav-banner .boat-name .select-size .form-check:last-child {
    margin-bottom: 0
}

.nav-banner .boat-name .select-size .form-check .form-check-label {
    color: #000
}

.nav-banner .boat-name .select-size .form-check .form-check-input {
    border-color: rgba(0, 0, 0, .3)
}

.nav-banner .boat-name .prev-imgs {
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 10px
}

.nav-banner .boat-name .before-after {
    border-radius: 10px;
    margin-top: 50px;
    position: relative;
    display: flex;
    max-height: 95vh;
    aspect-ratio: 3/2
}

.nav-banner .boat-name .before-after .before-img,
.nav-banner .boat-name .before-after .after-img {
    position: absolute;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 10px
}

.nav-banner .boat-name .before-after .before-img img,
.nav-banner .boat-name .before-after .after-img img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.nav-banner .boat-name .before-after .after-img {
    clip-path: inset(0px 0px 0px 50%)
}

.nav-banner .boat-name .before-after .line {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: .2rem;
    height: calc(100% + 10px);
    background-color: #fafafa
}

.nav-banner .boat-name .before-after input {
    appearance: none;
    -webkit-appearance: none;
    background-color: rgba(0, 0, 0, 0);
    position: absolute;
    width: calc(100% + 2.25rem);
    left: -1.125rem;
    margin-top: -42px;
    background-color: rgba(0, 0, 0, 0)
}

.nav-banner .boat-name .before-after input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    height: 2rem;
    width: 2rem;
    border-radius: 50%;
    background-color: #fff;
    border: 1px solid #fff;
    background-size: cover;
    cursor: grab
}

.nav-banner .boat-name .before-after input::-moz-range-thumb {
    -webkit-appearance: none;
    appearance: none;
    height: 2rem;
    width: 2rem;
    border-radius: 50%;
    background-color: #fff;
    border: 1px solid #fff;
    background-size: cover;
    cursor: grab
}

.nav-banner .boat-name .before-after input:active::-webkit-slider-thumb {
    cursor: grabbing
}

.nav-banner .boat-name .before-after input:active::-moz-slider-thumb {
    cursor: grabbing
}

.turning-vision {
    padding: 100px 0;
    background-image: url("../images/turning-bg.png");
    background-position: center;
    background-size: cover
}

.turning-vision .title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30px
}

.turning-vision .title h2 {
    font-size: 44px;
    color: #14285c;
    font-weight: 800;
    letter-spacing: 2px;
    max-width: 355px;
    font-family: "Outfit", sans-serif
}

.turning-vision .title a {
    color: #fff;
    display: flex;
    border-radius: 40px;
    padding: 10px 20px;
    font-size: 14px;
    align-items: center;
    background: #3b83f6;
    transition: .3s ease-in-out;
    font-weight: 400
}

.turning-vision .title a i {
    margin-left: 7px
}

.turning-vision .title a:hover {
    background-color: #140f49
}

.turning-vision .img-box {
    margin-right: 30px
}

.turning-vision h4 {
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 15px;
    font-family: "Outfit", sans-serif
}

.turning-vision p {
    color: #193850;
    font-size: 14px
}

.boating {
    padding: 100px 0
}

.boating .title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30px
}

.boating .title h2 {
    font-size: 32px;
    color: #14285c;
    font-weight: 800;
    letter-spacing: 2px;
    font-family: "Outfit", sans-serif
}

.boating .title p {
    color: #193850;
    font-size: 14px;
    max-width: 500px
}

.boating .title a {
    color: #fff;
    display: flex;
    border-radius: 40px;
    padding: 10px 20px;
    font-size: 14px;
    align-items: center;
    background: #3b83f6;
    transition: .3s ease-in-out;
    font-weight: 400
}

.boating .title a i {
    margin-left: 7px
}

.boating .title a:hover {
    background-color: #140f49
}

.boating .boat-img-slider {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    box-sizing: border-box;
    position: relative
}

.boating .boat-img-slide {
    display: flex;
    align-items: center;
    gap: 20px;
    animation: boat-img 20s linear infinite
}

.boating .boat-img-slide img {
    height: 250px;
    border-radius: 10px
}

@keyframes boat-img {
    from {
        transform: translateX(0)
    }

    to {
        transform: translateX(-50%)
    }
}

.boating .reverse-slide {
    margin-top: 20px
}

@keyframes boat-img-reverse {
    from {
        transform: translateX(0)
    }

    to {
        transform: translateX(50%)
    }
}

.works {
    padding: 70px 0;
    background: #14285c;
    position: relative;
    overflow: hidden
}

.works::before {
    content: "";
    background: rgba(15, 86, 136, .4);
    position: absolute;
    background-color: rgba(15, 86, 136, .4);
    top: 50%;
    left: -20%;
    transform: translateY(-50%);
    width: 1150px;
    height: 1150px;
    border-radius: 50%
}

.works::after {
    content: "";
    background: rgba(15, 86, 136, .4);
    position: absolute;
    background-color: rgba(15, 86, 136, .4);
    bottom: -450px;
    right: -350px;
    width: 800px;
    height: 800px;
    border-radius: 50%
}

.works .title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30px;
    position: relative
}

.works .title h2 {
    font-size: 32px;
    color: #fff;
    font-weight: 800;
    letter-spacing: 2px;
    font-family: "Outfit", sans-serif
}

.works .title p {
    color: #fff;
    font-size: 14px;
    max-width: 500px;
    font-weight: 400
}

.works .title a {
    color: #fff;
    display: flex;
    border-radius: 40px;
    padding: 10px 20px;
    font-size: 14px;
    align-items: center;
    background: #3b83f6;
    transition: .3s ease-in-out;
    font-weight: 400
}

.works .title a i {
    margin-left: 7px
}

.works .title a:hover {
    background-color: #140f49
}

.works .img-box {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    margin-left: 30px;
    z-index: 1
}

.works .img-box a {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 40px;
    color: #fff
}

.works ul {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 50px
}

.works ul li {
    gap: 15px;
    display: flex;
    align-items: center
}

.works ul li span {
    font-size: 80px;
    color: hsla(0, 0%, 100%, .1);
    font-family: "Outfit", sans-serif;
    font-weight: 700;
    line-height: 80px
}

.works ul li h5 {
    font-size: 14px;
    color: #fff;
    font-weight: 500
}

.works ul li p {
    font-size: 14px;
    color: #fff;
    font-weight: 200;
    margin: 0
}

.services {
    padding: 100px 0
}

.services .title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30px
}

.services .title h2 {
    font-size: 32px;
    color: #14285c;
    font-weight: 800;
    letter-spacing: 2px;
    font-family: "Outfit", sans-serif
}

.services .title p {
    color: #193850;
    font-size: 14px;
    max-width: 500px
}

.services .title a {
    color: #fff;
    display: flex;
    border-radius: 40px;
    padding: 10px 20px;
    font-size: 14px;
    align-items: center;
    background: #3b83f6;
    transition: .3s ease-in-out;
    font-weight: 400
}

.services .title a i {
    margin-left: 7px
}

.services .title a:hover {
    background-color: #140f49
}

.services .box {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: 20px;
    display: block
}

.services .box:hover .info {
    opacity: 1
}

.services .box .info {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 20px;
    opacity: 0;
    transition: .3s ease-in-out
}

.services .box .info h4 {
    color: #fff;
    font-size: 20px;
    font-family: "Outfit", sans-serif
}

.services .box .info p {
    color: #fff;
    font-size: 14px;
    font-family: "Outfit", sans-serif;
    margin: 0
}

.turning-vision .mob-btn,
.boating .mob-btn,
.works .mob-btn,
.services .mob-btn {
    color: #fff;
    display: none;
    justify-content: center;
    border-radius: 40px;
    padding: 10px 20px;
    font-size: 13px;
    align-items: center;
    background: #3b83f6;
    transition: .3s ease-in-out;
    font-weight: 400
}

.turning-vision .mob-btn i,
.boating .mob-btn i,
.works .mob-btn i,
.services .mob-btn i {
    margin-left: 7px
}

.turning-vision .mob-btn:hover,
.boating .mob-btn:hover,
.works .mob-btn:hover,
.services .mob-btn:hover {
    background-color: #140f49
}

.about-banner {
    background-image: url("../images/about-bg.png")
}

.who-mission {
    padding: 100px 0;
    background-image: url("../images/turning-bg.png");
    background-position: center;
    background-size: cover
}

.who-mission .mob-title {
    display: none
}

.who-mission .img-box {
    overflow: hidden
}

.who-mission .img-box.we-are {
    border-radius: 40px 40px 40px 0
}

.who-mission .img-box.mission {
    border-radius: 40px 0 40px 40px
}

.who-mission .img-box img {
    width: 100%
}

.who-mission .content {
    padding: 50px
}

.who-mission .content h2 {
    font-size: 32px;
    color: #14285c;
    font-weight: 700
}

.who-mission .content p {
    color: #193850;
    font-size: 16px
}

.sail {
    background-image: url("../images/sail.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 150px 0;
    text-align: center
}

.sail .anchar {
    margin-bottom: 30px
}

.sail h2 {
    font-size: 24px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 30px
}

.sail p {
    font-family: "Figtree", sans-serif;
    font-size: 18px;
    color: #fff;
    margin: 0 auto 30px;
    font-weight: 300;
    max-width: 600px
}

.sail a {
    color: #000;
    display: inline-flex;
    justify-content: center;
    border-radius: 40px;
    padding: 15px 30px;
    font-size: 14px;
    align-items: center;
    background: #fff;
    transition: .3s ease-in-out;
    font-weight: 300;
    margin: auto
}

.sail a i {
    margin-left: 7px
}

.sail a:hover {
    color: #fff;
    background-color: #3b83f6
}

.nav-banner .boat-name .upload-btn {
    margin-top: 20px;
    gap: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff
}

.nav-banner .boat-name .upload-btn .upload-text {
    text-align: left
}

.nav-banner .boat-name .upload-btn .upload-text p {
    margin: 0;
    color: #000;
    font-size: 14px
}

.nav-banner .boat-name .upload-btn .upload-text span {
    font-size: 14px;
    color: rgba(0, 0, 0, .5)
}

.boat-stencils {
    background-image: url("../images/boat-stencils.png")
}

.boat-stencils .sub-menu {
    margin: 40px 0 0
}

.lettering {
    padding: 100px 0;
    background-image: url("../images/turning-bg.png");
    background-position: center;
    background-size: cover
}

.lettering .title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30px
}

.lettering .title h2 {
    font-size: 32px;
    color: #14285c;
    font-weight: 800;
    letter-spacing: 2px;
    font-family: "Outfit", sans-serif;
    margin: 0
}

.lettering .title p {
    color: #193850;
    font-size: 14px;
    max-width: 500px
}

.lettering .title a {
    color: #fff;
    display: flex;
    border-radius: 40px;
    padding: 10px 20px;
    font-size: 14px;
    align-items: center;
    background: #3b83f6;
    transition: .3s ease-in-out;
    font-weight: 400
}

.lettering .title a i {
    margin-left: 7px
}

.lettering .title a:hover {
    background-color: #140f49
}

.lettering .img-box {
    margin-right: 30px
}

.lettering h4 {
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 15px;
    font-family: "Outfit", sans-serif
}

.lettering p {
    color: #193850;
    font-size: 14px
}

.lettering .mt-5 h2 {
    font-size: 32px;
    color: #14285c;
    font-weight: 800;
    letter-spacing: 2px;
    font-family: "Outfit", sans-serif;
    margin: 0 0 20px
}

.lettering .mt-5 .find-out-btn {
    color: #fff;
    display: inline-flex;
    border-radius: 40px;
    padding: 10px 20px;
    font-size: 14px;
    align-items: center;
    background: #3b83f6;
    transition: .3s ease-in-out;
    font-weight: 400
}

.lettering .mt-5 .find-out-btn i {
    margin-left: 7px
}

.lettering .mt-5 .find-out-btn:hover {
    background-color: #140f49
}

.lettering .mt-5 .img-box {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    margin-left: 30px;
    margin-right: 0;
    z-index: 1
}

.lettering .mt-5 .img-box a {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 40px;
    color: #fff
}

.projects {
    padding: 100px 0 0
}

.projects .title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30px
}

.projects .title h2 {
    font-size: 32px;
    color: #14285c;
    font-weight: 800;
    letter-spacing: 2px;
    font-family: "Outfit", sans-serif;
    margin: 0
}

.projects .title p {
    color: #193850;
    font-size: 14px;
    max-width: 500px
}

.projects .title a {
    color: #fff;
    display: flex;
    border-radius: 40px;
    padding: 10px 20px;
    font-size: 14px;
    align-items: center;
    background: #3b83f6;
    transition: .3s ease-in-out;
    font-weight: 400
}

.projects .title a i {
    margin-left: 7px
}

.projects .title a:hover {
    background-color: #140f49
}

.projects .box {
    margin-bottom: 20px;
    display: block
}

.lettering .mob-btn,
.projects .mob-btn {
    color: #fff;
    display: none;
    justify-content: center;
    border-radius: 40px;
    padding: 10px 20px;
    font-size: 13px;
    align-items: center;
    background: #3b83f6;
    transition: .3s ease-in-out;
    font-weight: 400
}

.lettering .mob-btn i,
.projects .mob-btn i {
    margin-left: 7px
}

.lettering .mob-btn:hover,
.projects .mob-btn:hover {
    background-color: #140f49
}

.contact-banner {
    background-image: url("../images/contact.png")
}

.contact {
    padding: 100px 0
}

.contact p {
    color: #140f49;
    font-size: 18px;
    font-weight: 500
}

.contact h2 {
    color: #140f49;
    font-size: 40px;
    max-width: 600px;
    line-height: 55px;
    margin-bottom: 30px
}

.contact ul li {
    font-size: 16px;
    font-weight: 700;
    color: #140f49;
    line-height: 25px;
    margin-bottom: 15px
}

.contact ul li a {
    color: #140f49;
    display: block
}

.contact ul li a span {
    display: block;
    font-weight: 500
}

.contact .col-lg-5 ul {
    display: none
}

.contact .card {
    border-color: #dbeafe;
    border-radius: 15px
}

.contact .card .card-header {
    font-size: 24px;
    color: #1c398e;
    background-image: linear-gradient(90deg, #EFF6FF 0%, #ECFEFF 100%);
    border: 0;
    padding: 15px;
    border-radius: 15px 15px 0 0
}

.contact .card .card-header img {
    height: 22px
}

.contact .card .card-body label {
    font-size: 16px;
    font-weight: 600;
    font-family: "Figtree", sans-serif;
    color: #1c398e;
    margin-bottom: 5px
}

.contact .card .card-body .form-control {
    padding: 10px 15px;
    background: #f3f3f5;
    border-color: #dbeafe
}

.contact .card .card-body .form-control::placeholder {
    color: #717182
}

.contact .card .card-body textarea {
    min-height: 120px;
    resize: none
}

.contact .card .card-body .send-msg {
    color: #fff;
    border-radius: 40px;
    padding: 12px 20px;
    font-size: 18px;
    background: #3b83f6;
    transition: .3s ease-in-out;
    font-weight: 400;
    width: 100%
}

.contact .card .card-body .send-msg i {
    margin-left: 7px
}

.contact .card .card-body .send-msg:hover {
    background-color: #140f49
}

.contact .frame-box {
    margin-top: 40px;
    border-radius: 20px;
    overflow: hidden
}

.contact .frame-box iframe {
    width: 100%;
    height: 450px
}

.sticker {
    padding: 60px 0 0
}

.sticker .title {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.sticker .title h2 {
    font-size: 32px;
    color: #14285c;
    font-weight: 800;
    letter-spacing: 2px;
    font-family: "Outfit", sans-serif
}

.sticker .title .filter {
    display: grid;
    grid-template-columns: 200px 120px 120px;
    align-items: center;
    gap: 10px
}

.sticker .title .filter .form-select {
    border: 0;
    font-size: 14px;
    color: #000;
    background-color: #f3f3f5;
    padding: 10px 15px
}

.sticker .sticker-list {
    display: grid;
    gap: 30px 20px;
    margin-top: 30px;
    justify-content: center;
    grid-template-columns: repeat(5, 1fr)
}

.sticker .sticker-list li {
    position: relative
}

.sticker .sticker-list li .img-box {
    border: 1px solid #cfcfcf;
    border-radius: 20px
}

.sticker .sticker-list li .content {
    display: flex;
    justify-content: space-between;
    padding: 10px 0
}

.sticker .sticker-list li .content .info h5 {
    font-size: 14px;
    color: #000;
    margin: 0;
    font-weight: 600;
    font-family: "Outfit", sans-serif
}

.sticker .sticker-list li .content .info h4 {
    font-size: 18px;
    color: #000;
    margin: 0;
    font-weight: 700;
    font-family: "Outfit", sans-serif
}

.sticker .sticker-list li .content .qty {
    display: flex;
    align-items: center
}

.sticker .sticker-list li .content .qty span {
    background: #e1e1e1;
    display: block;
    width: 27px;
    height: 27px;
    border-radius: 7px;
    text-align: center;
    line-height: 27px;
    font-size: 18px;
    color: #000;
    cursor: pointer
}

.sticker .sticker-list li .content .qty input {
    font-weight: 700;
    font-family: "Outfit", sans-serif;
    color: #000;
    font-size: 16px;
    width: 40px;
    text-align: center;
    outline: none;
    border: none
}

.sticker .sticker-list li .add-to-cart {
    width: 100%;
    color: #fff;
    border-radius: 40px;
    padding: 10px 20px;
    text-align: center;
    font-size: 14px;
    background: #3b83f6;
    transition: .3s ease-in-out;
    font-weight: 400
}

.sticker .sticker-list li .add-to-cart:hover {
    background-color: #140f49
}

.pro-detail {
    padding: 60px 0 0
}

.pro-detail .title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30px
}

.pro-detail .title h2 {
    font-size: 32px;
    color: #14285c;
    font-weight: 800;
    letter-spacing: 2px;
    font-family: "Outfit", sans-serif;
    display: flex;
    align-items: center;
    gap: 20px
}

.pro-detail .title h2 a {
    color: #14285c
}

.pro-detail .img-box {
    border: 1px solid #cfcfcf;
    border-radius: 20px
}

.pro-detail h4 {
    font-size: 24px;
    color: #000;
    font-weight: 700;
    font-family: "Outfit", sans-serif
}

.pro-detail p {
    color: #193850;
    font-size: 14px
}

.pro-detail .qty {
    display: flex;
    align-items: center
}

.pro-detail .qty span {
    background: #e1e1e1;
    display: block;
    width: 27px;
    height: 27px;
    border-radius: 7px;
    text-align: center;
    line-height: 27px;
    font-size: 18px;
    color: #000;
    cursor: pointer
}

.pro-detail .qty input {
    font-weight: 700;
    font-family: "Outfit", sans-serif;
    color: #000;
    font-size: 16px;
    width: 40px;
    text-align: center;
    outline: none;
    border: none
}

.pro-detail .pro-box {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 20px
}

.pro-detail .pro-box button {
    color: #fff;
    display: flex;
    justify-content: center;
    border-radius: 40px;
    padding: 10px 20px;
    font-size: 14px;
    align-items: center;
    background: #3b83f6;
    transition: .3s ease-in-out;
    font-weight: 400;
    width: 100%
}

.pro-detail .pro-box button i {
    margin-left: 7px
}

.pro-detail .pro-box button:hover {
    background-color: #140f49
}

.account {
    padding: 100px 0
}

.account ul {
    display: flex;
    flex-direction: column;
    gap: 20px
}

.account ul li hr {
    margin: 5px 0;
    border-color: #c2c2c3
}

.account ul li a {
    position: relative;
    display: flex;
    align-items: center;
    gap: 15px;
    border: 2px solid #dbeafe;
    padding: 12px 40px 12px 30px;
    background: #f3f3f5;
    border-radius: 20px
}

.account ul li a i {
    color: #14285c;
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px
}

.account ul li a h4 {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
    color: #14285c
}

.account ul li a p {
    margin: 0;
    color: #4a5565;
    font-size: 14px;
    font-weight: 400
}

.account ul li.profile .img-box {
    width: 60px;
    min-width: 60px;
    height: 60px;
    border-radius: 50%;
    overflow: hidden
}

.account ul li.profile .img-box img {
    object-fit: cover;
    width: 100%;
    height: 100%
}

.account ul li.profile h3 {
    font-size: 18px;
    font-weight: 700;
    color: #14285c;
    margin: 0
}

.account ul li.profile p {
    font-size: 16px
}

.account ul li.logout h4 {
    color: #e7000b
}

.profile {
    padding: 60px 0
}

.profile .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    margin-bottom: 25px
}

.profile .title h2 {
    font-size: 22px;
    font-weight: 700;
    color: #14285c
}

.profile .title p {
    font-size: 14px;
    font-weight: 400;
    color: #4a5565
}

.profile .title .save-btn {
    display: block
}

.profile .save-btn {
    display: none;
    color: #fff;
    border-radius: 40px;
    padding: 10px 20px;
    font-size: 14px;
    background: #3b83f6;
    transition: .3s ease-in-out;
    font-weight: 500;
    width: 100%
}

.profile .save-btn:hover {
    background-color: #140f49
}

.profile .box {
    padding: 40px;
    background: #f3f3f5;
    border-radius: 20px
}

.profile .box .img-box {
    position: relative;
    width: 100px;
    height: 100px;
    margin-bottom: 15px;
    border-radius: 50%;
    border: 2px solid #dbeafe
}

.profile .box .img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%
}

.profile .box .img-box label {
    cursor: pointer;
    background: #14285c;
    color: #fff;
    width: 30px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    font-size: 12px;
    border-radius: 50%;
    position: absolute;
    right: -5px;
    bottom: -5px;
    transition: .3s ease-in-out
}

.profile .box .img-box label:hover {
    background-color: #3b83f6
}

.profile .box label {
    font-size: 16px;
    font-weight: 600;
    font-family: "Figtree", sans-serif;
    color: #1c398e;
    margin-bottom: 5px
}

.profile .box .form-control {
    padding: 10px 15px;
    background: #f3f3f5;
    border-color: #dbeafe;
    background: #fff;
    font-size: 14px
}

.profile .box .form-control::placeholder {
    color: #717182
}

.nav-banner .boat-name .upload-btn {
    margin-top: 20px;
    gap: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff
}

.nav-banner .boat-name .upload-btn .upload-text {
    text-align: left
}

.nav-banner .boat-name .upload-btn .upload-text p {
    margin: 0;
    color: #000;
    font-size: 14px
}

.nav-banner .boat-name .upload-btn .upload-text span {
    font-size: 14px;
    color: rgba(0, 0, 0, .5)
}

.order-confirm {
    background-image: none;
    background-color: #001c34
}

.order-confirm .sub-menu {
    margin: 40px 0 0
}

.order-info {
    background-color: #001c34;
    padding-bottom: 100px
}

.order-info .box {
    background-color: #fff;
    padding: 40px;
    border-radius: 30px
}

.order-info .box .tick-box {
    text-align: center
}

.order-info .box .tick-box h2 {
    font-size: 20px;
    color: #000;
    margin: 20px 0 5px;
    font-weight: 700
}

.order-info .box .tick-box p {
    font-size: 16px;
    color: #000;
    margin-bottom: 20px
}

.order-info .box .order-detail {
    padding: 25px;
    border-radius: 16px;
    border: 1px solid #dbeafe;
    background: #f3f3f5
}

.order-info .box .order-detail h3 {
    font-size: 20px;
    font-family: "Figtree", sans-serif;
    font-weight: 700;
    color: rgba(28, 57, 142, .7)
}

.order-info .box .order-detail .info-list {
    margin-bottom: 25px
}

.order-info .box .order-detail .info-list li {
    font-size: 14px;
    color: rgba(28, 57, 142, .7);
    display: flex;
    justify-content: space-between;
    font-family: "Figtree", sans-serif;
    border-bottom: 1px solid #dbeafe;
    padding: 10px 0
}

.order-info .box .order-detail .info-list li span {
    font-weight: 700
}

.order-info .box .order-detail .download-btn {
    text-align: center;
    width: 100%;
    margin: 0 0 20px;
    padding: 15px;
    border-radius: 12px;
    background: #fff;
    font-size: 14px;
    color: rgba(28, 57, 142, .7)
}

.order-info .box .order-detail .download-btn img {
    display: block;
    margin: 0 auto;
    width: 40px
}

.order-info .box .order-detail .print-mail li a {
    font-size: 14px;
    color: rgba(28, 57, 142, .7);
    display: block;
    margin: 10px 0 0
}

.order-info .box .order-detail .btn-box {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 20px
}

.order-info .box .order-detail .btn-box .btn {
    width: 100%;
    color: #fff;
    border-radius: 40px;
    padding: 7px 20px;
    font-size: 14px;
    background: #3b83f6;
    transition: .3s ease-in-out;
    font-weight: 400
}

.order-info .box .order-detail .btn-box .btn i {
    margin-left: 7px
}

.order-info .box .order-detail .btn-box .btn:hover {
    background-color: #140f49
}

.cart-banner {
    background-image: none;
    background-color: #001c34
}

.cart-banner .sub-menu {
    margin: 40px 0 0
}

.cart-info {
    background-color: #001c34;
    padding-bottom: 100px
}

.cart-info .box {
    background-color: #fff;
    padding: 40px;
    border-radius: 30px
}

.cart-info .box .col-lg-7 .card {
    height: 100%
}

.cart-info .box .col-lg-7 .card>div:nth-child(2) {
    height: 100%;
    max-height: 400px;
    overflow-y: auto
}

.cart-info .box .col-lg-5 .place-order {
    display: none
}

.cart-info .box .card {
    border-color: #dbeafe;
    border-radius: 15px
}

.cart-info .box .card .card-header {
    font-size: 22px;
    color: #1c398e;
    background-image: linear-gradient(90deg, #EFF6FF 0%, #ECFEFF 100%);
    border: 0;
    padding: 15px;
    border-radius: 15px 15px 0 0
}

.cart-info .box .card .card-header.sec-header {
    border-radius: 0
}

.cart-info .box .card .card-header img {
    height: 22px
}

.cart-info .box .card .card-body label {
    font-size: 14px;
    font-weight: 600;
    font-family: "Figtree", sans-serif;
    color: #1c398e;
    margin-bottom: 5px
}

.cart-info .box .card .card-body .form-control,
.cart-info .box .card .card-body .form-select {
    padding: 9px 15px;
    background-color: #f3f3f5;
    border-color: #dbeafe;
    font-size: 14px
}

.cart-info .box .card .card-body .form-control::placeholder,
.cart-info .box .card .card-body .form-select::placeholder {
    color: #717182
}

.cart-info .box .card .card-body h2 {
    font-size: 20px;
    color: #1c398e
}

.cart-info .box .card .card-body .place-order {
    color: #fff;
    border-radius: 40px;
    padding: 10px 20px;
    font-size: 14px;
    background: #3b83f6;
    transition: .3s ease-in-out;
    font-weight: 400;
    width: 100%
}

.cart-info .box .card .card-body .place-order i {
    margin-left: 7px
}

.cart-info .box .card .card-body .place-order:hover {
    background-color: #140f49
}

.cart-info .box .card .card-body .order-list {
    display: flex;
    flex-direction: column;
    gap: 15px
}

.cart-info .box .card .card-body .order-list li {
    display: flex;
    align-items: center;
    position: relative
}

.cart-info .box .card .card-body .order-list li.cart-details {
    display: block;
    border-bottom: 1px solid #e1e1e1;
    padding-bottom: 15px;
    margin-bottom: 40px
}

.cart-info .box .card .card-body .order-list li.cart-details:last-child {
    margin-bottom: 0;
    border: 0
}

.cart-info .box .card .card-body .order-list li.cart-details>div {
    gap: 5px;
    width: 100%;
    display: flex;
    justify-content: space-between
}

.cart-info .box .card .card-body .order-list li.cart-details .pro-info-box {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
    width: 100%
}

.cart-info .box .card .card-body .order-list li.cart-details .pro-info-box .img-box {
    width: 60px;
    border: 1px solid #d7d7d7;
    border-radius: 5px
}

.cart-info .box .card .card-body .order-list li.cart-details .pro-info-box .img-box img {
    width: 100%
}

.cart-info .box .card .card-body .order-list li.cart-details .text-end {
    margin-right: 30px
}

.cart-info .box .card .card-body .order-list li .btn-danger {
    font-size: 10px;
    padding: 5px 7px;
    position: absolute;
    top: 0;
    right: -10px
}

.cart-info .box .card .card-body .order-list li .order-nub h5 {
    font-size: 16px;
    color: #1c398e;
    margin: 0
}

.cart-info .box .card .card-body .order-list li .order-nub p {
    color: rgba(21, 93, 252, .6);
    font-size: 14px;
    margin: 4px 0 0
}

.cart-info .box .card .card-body .order-list li .price {
    font-size: 16px;
    color: #1c398e;
    font-weight: 700
}

.cart-info .box .card .card-body .order-list li .qty {
    display: flex;
    align-items: center;
    min-width: 95px
}

.cart-info .box .card .card-body .order-list li .qty span {
    background: #e1e1e1;
    display: block;
    width: 27px;
    height: 27px;
    border-radius: 7px;
    text-align: center;
    line-height: 27px;
    font-size: 18px;
    color: #000;
    cursor: pointer
}

.cart-info .box .card .card-body .order-list li .qty input {
    font-weight: 700;
    font-family: "Outfit", sans-serif;
    color: #000;
    font-size: 16px;
    width: 40px;
    text-align: center;
    outline: none;
    border: none
}

.cart-info .box .card .card-body .pricing {
    margin-bottom: 20px
}

.cart-info .box .card .card-body .pricing li {
    font-size: 14px;
    color: rgba(28, 57, 142, .6980392157);
    font-weight: 400;
    padding: 0 0 10px;
    display: flex;
    justify-content: space-between
}

.cart-info .box .card .card-body .pricing li span {
    font-weight: 600
}

.cart-info .box .card .card-body .pricing li.total {
    padding-top: 10px;
    color: #1c398e;
    border-top: 1px solid #dbeafe
}

.cart-info .box .card .card-body .form-check {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    font-size: 18px
}

.cart-info .box .card .card-body .form-check .form-check-input {
    width: 18px;
    height: 18px;
    box-shadow: none;
    margin-top: 0px;
    background-color: rgba(0, 0, 0, 0)
}

.cart-info .box .card .card-body .form-check .form-check-input:focus {
    border-color: rgba(28, 57, 142, .6980392157)
}

.cart-info .box .card .card-body .form-check .form-check-input:checked {
    background-color: rgba(28, 57, 142, .6980392157);
    border-color: rgba(28, 57, 142, .6980392157)
}

.cart-info .box .card .card-body .form-check .form-check-label {
    margin: 0 0 0 10px;
    color: #717182;
    font-size: 14px;
    font-weight: 500
}

.cart-info .box .card .card-body .add-note,
.cart-info .box .card .card-body .coupon {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: #1c398e;
    font-size: 14px;
    font-weight: 500
}

.policy {
    padding: 80px 0
}

.policy h2 {
    font-size: 24px;
    color: #14285c;
    margin-bottom: 10px;
    font-weight: 600
}

.policy p {
    font-size: 14px;
    color: #717182;
    margin-bottom: 15px;
    line-height: 26px
}

.policy ul {
    margin-bottom: 15px;
    padding-left: 20px
}

.policy ul li {
    font-size: 14px;
    color: #717182;
    line-height: 26px;
    list-style-type: disc
}

.faq {
    padding: 80px 0
}

.faq .accordion .accordion-item {
    margin-bottom: 20px;
    border: none;
    border-radius: 10px;
    border: 2px solid #dbeafe;
    background: #f3f3f5;
    overflow: hidden
}

.faq .accordion .accordion-item .accordion-header .accordion-button {
    padding: 20px;
    box-shadow: none;
    background-color: rgba(0, 0, 0, 0);
    font-size: 16px;
    font-weight: 500;
    color: #14285c
}

.faq .accordion .accordion-item .accordion-collapse {
    background-color: #fff
}

.faq .accordion .accordion-item .accordion-collapse p {
    color: #193850;
    font-size: 14px;
    margin-bottom: 10px
}

.faq .accordion .accordion-item .accordion-collapse p:last-child {
    margin-bottom: 0
}

.change-pass {
    padding: 80px 0;
    background-image: url("../images/turning-bg.png");
    background-position: center;
    background-size: cover
}

.change-pass .card {
    border-color: #dbeafe;
    border-radius: 15px
}

.change-pass .card .card-body {
    padding: 20px
}

.change-pass .card .card-body .title {
    margin-bottom: 30px;
    text-align: center
}

.change-pass .card .card-body .title h3 {
    margin: 0 0 10px 0;
    font-size: 20px;
    font-weight: 600;
    color: #14285c
}

.change-pass .card .card-body .title p {
    margin: 0;
    color: #193850;
    font-size: 14px;
    line-height: 1.4
}

.change-pass .card .card-body label {
    font-size: 16px;
    font-weight: 600;
    font-family: "Figtree", sans-serif;
    color: #1c398e;
    margin-bottom: 5px
}

.change-pass .card .card-body .relative {
    position: relative
}

.change-pass .card .card-body .form-control {
    padding: 10px 15px;
    background: #f3f3f5;
    border-color: #dbeafe
}

.change-pass .card .card-body .form-control::placeholder {
    color: #717182
}

.change-pass .card .card-body i {
    font-size: 14px;
    color: #717182;
    position: absolute;
    top: 16px;
    right: 10px;
    cursor: pointer
}

.change-pass .card .card-body .send-msg {
    color: #fff;
    border-radius: 40px;
    padding: 12px 20px;
    font-size: 14px;
    background: #3b83f6;
    transition: .3s ease-in-out;
    font-weight: 600;
    width: 100%
}

.change-pass .card .card-body .send-msg i {
    margin-left: 7px
}

.change-pass .card .card-body .send-msg:hover {
    background-color: #140f49
}

.orders {
    padding: 60px 0
}

.orders .title {
    margin-bottom: 25px
}

.orders .title h2 {
    font-size: 22px;
    font-weight: 700;
    color: #14285c
}

.orders .title p {
    font-size: 14px;
    font-weight: 400;
    color: #4a5565
}

.orders .order-table {
    border: 1px solid #dbeafe;
    background-color: #f3f3f5;
    border-radius: 20px
}

.orders .order-table .table-responsive {
    padding: 20px
}

.orders .order-table .table-responsive .table tr th,
.orders .order-table .table-responsive .table tr td {
    background-color: rgba(0, 0, 0, 0);
    padding: 15px;
    font-size: 14px
}

.orders .order-table .table-responsive .table tr th {
    color: #1c398e;
    font-weight: 600;
    border: 0;
    min-width: 150px
}

.orders .order-table .table-responsive .table tr td {
    color: #4a5565;
    font-weight: 400;
    border-color: #dbeafe
}

.orders .order-table .table-responsive .table tr td span {
    padding: 7px 15px;
    border-radius: 30px;
    font-size: 13px;
    font-weight: 500
}

.orders .order-table .table-responsive .table tr td .shipped {
    background-color: #fed100
}

.orders .order-table .table-responsive .table tr td .delivered {
    background-color: #0bb33b;
    color: #fff
}

.orders .order-table .table-responsive .table tr td .processing {
    background-color: #f05c3c;
    color: #fff
}

.orders .order-detail {
    border: 1px solid #dbeafe;
    background-color: #f3f3f5;
    border-radius: 20px
}

.orders .view-order {
    border: 1px solid #dbeafe;
    background-color: #f3f3f5;
    border-radius: 20px;
    padding: 30px
}

.orders .view-order h4 {
    font-size: 18px;
    font-weight: 600;
    color: #14285c;
    margin: 10px 0 20px
}

.orders .view-order .inp-box {
    background-color: #fff;
    border-radius: 8px;
    padding: 12px
}

.orders .view-order .inp-box label {
    color: #4a5565;
    font-size: 14px;
    font-weight: 700
}

.orders .view-order .inp-box input {
    border: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0);
    padding: 0;
    color: #4a5565;
    outline: none;
    font-size: 14px;
    font-weight: 300
}

.orders .view-order .inp-box input::placeholder {
    color: #4a5565
}

.orders .view-order .inp-box ul {
    display: grid;
    grid-template-columns: 80px 80px 100px 100px calc(100% - 460px) 100px
}

.orders .view-order .inp-box ul li {
    color: #4a5565;
    font-size: 14px;
    font-weight: 300;
    border-right: 1px solid #d7d7d7;
    padding: 0 14px
}

.orders .view-order .inp-box ul li:first-child {
    padding-left: 0
}

.orders .view-order .inp-box ul li:last-child,
.orders .view-order .inp-box ul li:nth-child(4) {
    border: 0
}

.gallery {
    padding: 60px 0 0
}

.gallery .title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30px
}

.gallery .title h2 {
    font-size: 32px;
    color: #14285c;
    font-weight: 800;
    letter-spacing: 2px;
    font-family: "Outfit", sans-serif
}

.gallery .filters {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 30px;
    gap: 10px
}

.gallery .filters li {
    color: #fff;
    border-radius: 40px;
    padding: 6px 20px;
    font-size: 14px;
    align-items: center;
    background: #3b83f6;
    transition: .3s ease-in-out;
    font-weight: 400;
    cursor: pointer
}

.gallery .filters li:hover {
    background-color: #140f49
}

.gallery .grid .grid-item {
    margin-bottom: 20px
}

.gallery .grid .grid-item .img-box {
    border-radius: 20px;
    overflow: hidden
}

.gallery .grid .grid-item .img-box img {
    object-fit: cover;
    height: 100%;
    width: 100%
}

.instruction {
    padding: 60px 0
}

.instruction h4 {
    font-size: 24px;
    color: #14285c;
    font-weight: 600;
    margin-bottom: 30px
}

.instruction .instruction-box {
    text-align: center;
    background-color: #f3f3f5;
    padding: 30px 20px;
    border-radius: 20px;
    margin-bottom: 20px
}

.instruction .instruction-box p {
    font-size: 18px;
    color: #000;
    font-weight: 400;
    margin: 0 0 10px
}

.instruction .instruction-box a {
    font-size: 18px;
    color: #000;
    font-weight: 600;
    text-decoration: underline
}

.instruction h5 {
    color: #14285c;
    font-size: 18px;
    font-weight: 600;
    margin: 30px 0
}

.instruction .img-box {
    position: relative
}

.instruction .img-box a {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #fff;
    font-size: 32px;
    font-weight: 600
}

@media(max-width: 1536px) {
    .login-box .box {
        max-width: 400px
    }

    .login-box .box .inner {
        margin-top: 10px
    }

    .login-box .box .inner h4 {
        font-size: 18px
    }

    .login-box .box .inner label,
    .login-box .box .inner .sub-title,
    .login-box .box .inner .forgot-password,
    .login-box .box .inner .btn-submit {
        font-size: 13px
    }

    .login-box .box .inner .form-control {
        font-size: 13px;
        padding: 10px 12px
    }

    .login-box .box .inner .relative i {
        top: 14px;
        font-size: 13px
    }

    .login-box .box .inner .or {
        font-size: 18px;
        margin: 10px 0
    }

    .login-box .box .inner .btn-google,
    .login-box .box .inner .btn-facebook {
        font-size: 13px
    }

    .login-box .box .inner .have-account {
        font-size: 13px;
        margin-top: 20px
    }

    .navbar {
        border-radius: 20px;
        padding: 4px 0
    }

    .navbar .navbar-brand img {
        max-width: 200px
    }

    .navbar .navbar-nav .nav-item .nav-link {
        font-size: 13px
    }

    .navbar .navbar-nav .nav-item .nav-link.circle-link {
        width: 30px;
        height: 30px;
        padding: 0;
        margin: 0 3px
    }

    .navbar .navbar-nav .nav-item .nav-link.circle-link img {
        height: 12px
    }

    .navbar .navbar-nav .nav-item .nav-link.contact-link {
        padding: 8px 15px;
        font-size: 13px;
        margin-left: 5px
    }

    .sub-menu {
        margin: 15px 0;
        gap: 10px
    }

    .sub-menu li a {
        font-size: 13px
    }

    .nav-banner {
        padding: 20px 0 40px
    }

    .nav-banner.boat-stencils {
        padding: 20px 0 30px
    }

    .nav-banner.boat-stencils .sub-menu {
        margin: 30px 0 0
    }

    .nav-banner .boat-name {
        padding: 20px
    }

    .nav-banner .boat-name h4 {
        font-size: 16px;
        margin-bottom: 15px
    }

    .nav-banner .boat-name p {
        font-size: 13px;
        line-height: 18px
    }

    .nav-banner .boat-name .text-box textarea {
        font-size: 13px;
        min-height: 170px;
        padding: 15px
    }

    .nav-banner .boat-name .input-group .form-control {
        font-size: 13px;
        padding: 7px 15px
    }

    .nav-banner .boat-name .input-group .btn-preview {
        font-size: 13px;
        padding: 7px 25px
    }

    .nav-banner .boat-name .form-check {
        margin-bottom: 10px;
        font-size: 16px
    }

    .nav-banner .boat-name .form-check .form-check-label {
        font-size: 16px
    }

    .nav-banner .boat-name .form-check .form-check-input {
        width: 16px;
        height: 16px
    }

    .nav-banner .boat-name .select-font .title h3 {
        font-size: 18px
    }

    .nav-banner .boat-name .select-font .title .nav-tabs .nav-item .nav-link {
        font-size: 13px;
        padding: 4px 10px
    }

    .nav-banner .boat-name .select-font .tab-pane ul li {
        font-size: 16px;
        line-height: 35px
    }

    .nav-banner .boat-name .select-info label {
        font-size: 13px;
        line-height: 14px
    }

    .nav-banner .boat-name .select-info .form-control,
    .nav-banner .boat-name .select-info .form-select {
        font-size: 13px;
        padding: 7px 10px;
        margin-bottom: 10px
    }

    .nav-banner .boat-name .select-box h5 {
        font-size: 14px
    }

    .nav-banner .boat-name .select-box .shadow-arc-effect li img {
        height: 35px
    }

    .nav-banner .boat-name .select-box .select-font-color li .main-color .color-box {
        width: 60px;
        height: 35px
    }

    .nav-banner .boat-name .select-box .select-font-color li .main-color .info h5 {
        font-size: 14px
    }

    .nav-banner .boat-name .select-box .select-font-color li .main-color .info p {
        font-size: 13px
    }

    .nav-banner .boat-name .select-box .select-font-color li .color-list {
        height: 35px;
        width: 35px
    }

    .nav-banner .boat-name .select-box .activate-outline li .main-color .color-box,
    .nav-banner .boat-name .select-box .shadow-color li .main-color .color-box {
        width: 35px;
        height: 35px
    }

    .nav-banner .boat-name .select-box .activate-outline li .main-color .info h5,
    .nav-banner .boat-name .select-box .shadow-color li .main-color .info h5 {
        font-size: 14px
    }

    .nav-banner .boat-name .select-box .activate-outline li .main-color .info p,
    .nav-banner .boat-name .select-box .shadow-color li .main-color .info p {
        font-size: 13px
    }

    .nav-banner .boat-name .select-box .activate-outline li .color-list,
    .nav-banner .boat-name .select-box .shadow-color li .color-list {
        height: 35px;
        width: 35px
    }

    .nav-banner .boat-name .upload-btn {
        padding: 7px 10px
    }

    .nav-banner .boat-name .upload-btn img {
        height: 30px
    }

    .nav-banner .boat-name .upload-btn .upload-text p,
    .nav-banner .boat-name .upload-btn .upload-text span {
        font-size: 13px
    }

    .nav-banner .boat-name .select-size .form-check .form-check-label {
        font-size: 13px
    }

    .nav-banner .boat-name .add-to-cart {
        font-size: 13px;
        padding: 7px 20px;
        max-width: 300px
    }

    .nav-banner .boat-name .prev-imgs {
        font-size: 14px
    }

    .nav-banner .boat-name .before-after .line {
        width: .15rem
    }

    .nav-banner .boat-name .before-after input {
        margin-top: -34px
    }

    .nav-banner .boat-name .before-after input::-webkit-slider-thumb {
        height: 1.5rem;
        width: 1.5rem
    }

    .nav-banner .boat-name .before-after input::-moz-range-thumb {
        height: 1.5rem;
        width: 1.5rem
    }

    .turning-vision {
        padding: 50px 0
    }

    .turning-vision .title h2 {
        font-size: 36px;
        max-width: 350px
    }

    .turning-vision .title a {
        font-size: 13px
    }

    .turning-vision h4 {
        font-size: 16px
    }

    .turning-vision p {
        font-size: 13px
    }

    .boating {
        padding: 50px 0
    }

    .boating .title h2 {
        font-size: 28px
    }

    .boating .title p {
        font-size: 13px;
        max-width: 450px;
        margin: 0
    }

    .boating .title a {
        font-size: 13px
    }

    .boating .reverse-slide {
        margin-top: 10px
    }

    .boating .boat-img-slide {
        gap: 10px
    }

    .boating .boat-img-slide img {
        height: 200px
    }

    .works {
        padding: 50px 0
    }

    .works::before {
        width: 950px;
        height: 950px
    }

    .works::after {
        bottom: -200px;
        right: -220px;
        width: 500px;
        height: 500px
    }

    .works .title h2 {
        font-size: 28px
    }

    .works .title p {
        font-size: 13px;
        margin: 0
    }

    .works .title a {
        font-size: 13px
    }

    .works ul li span {
        font-size: 72px
    }

    .works ul li h5 {
        font-size: 13px;
        margin-bottom: 5px
    }

    .works ul li p {
        font-size: 13px;
        margin: 0;
        line-height: 18px
    }

    .services {
        padding: 50px 0
    }

    .services .title h2 {
        font-size: 28px
    }

    .services .title p {
        font-size: 13px;
        margin: 0
    }

    .services .title a {
        font-size: 13px
    }

    .services .box .info {
        padding: 15px
    }

    .services .box .info h4 {
        font-size: 16px;
        margin-bottom: 6px
    }

    .services .box .info p {
        font-size: 13px;
        line-height: 18px
    }

    .footer .box {
        grid-template-columns: 1fr .8fr .7fr 1fr;
        gap: 25px
    }

    .footer .box .logo-box h3 {
        font-size: 22px
    }

    .footer .box .logo-box p {
        font-size: 13px;
        line-height: 18px
    }

    .footer .box .com-box h4,
    .footer .box .pay-social h4 {
        font-size: 16px
    }

    .footer .box .com-box ul,
    .footer .box .pay-social ul {
        gap: 20px
    }

    .footer .box .com-box ul li,
    .footer .box .pay-social ul li {
        font-size: 13px
    }

    .footer .box .com-box ul.payment li a img,
    .footer .box .pay-social ul.payment li a img {
        height: 30px
    }

    .footer .box .com-box ul.social li a img,
    .footer .box .pay-social ul.social li a img {
        height: 35px
    }

    .page-banner {
        padding: 20px 0 40px
    }

    .page-banner h1 {
        font-size: 36px
    }

    .who-mission {
        padding: 50px 0
    }

    .who-mission .content h2 {
        font-size: 28px
    }

    .who-mission .content p {
        font-size: 13px
    }

    .sail {
        padding: 100px 0
    }

    .sail h2 {
        font-size: 20px;
        margin-bottom: 20px
    }

    .sail p {
        font-size: 13px;
        margin: 0 auto 20px
    }

    .sail a {
        font-size: 13px
    }

    .contact {
        padding: 50px 0
    }

    .contact p {
        font-size: 13px
    }

    .contact h2 {
        font-size: 36px;
        max-width: 530px;
        line-height: 45px
    }

    .contact .card .card-header {
        font-size: 18px;
        padding: 12px 15px
    }

    .contact .card .card-header img {
        height: 17px
    }

    .contact .card .card-body label,
    .contact .card .card-body .form-control {
        font-size: 13px
    }

    .contact .card .card-body .btn {
        font-size: 14px
    }

    .contact ul li {
        font-size: 13px
    }

    .lettering {
        padding: 50px 0
    }

    .lettering .title h2 {
        font-size: 28px
    }

    .lettering .title p {
        font-size: 13px;
        max-width: 450px;
        margin: 0
    }

    .lettering .title a {
        font-size: 13px
    }

    .lettering p {
        font-size: 13px
    }

    .lettering .mt-5 h2 {
        font-size: 28px
    }

    .lettering .mt-5 p {
        font-size: 13px
    }

    .lettering .mt-5 .find-out-btn {
        font-size: 13px
    }

    .projects {
        padding: 50px 0 0
    }

    .projects .title h2 {
        font-size: 28px
    }

    .projects .title p {
        font-size: 13px;
        max-width: 450px;
        margin: 0
    }

    .projects .title a {
        font-size: 13px
    }

    .sticker {
        padding: 30px 0 0
    }

    .sticker .title h2 {
        font-size: 28px;
        margin: 0
    }

    .sticker .title .filter .form-select {
        font-size: 13px;
        padding: 8px 15px
    }

    .sticker .sticker-list {
        margin-top: 20px;
        gap: 20px 15px
    }

    .sticker .sticker-list li .content .info h5 {
        font-size: 13px
    }

    .sticker .sticker-list li .content .info h4 {
        font-size: 16px
    }

    .sticker .sticker-list li .content .qty input {
        font-size: 13px;
        width: 35px
    }

    .sticker .sticker-list li .content .qty span {
        height: 24px;
        width: 24px;
        line-height: 24px;
        font-size: 16px
    }

    .sticker .sticker-list li .add-to-cart {
        font-size: 13px;
        padding: 7px 15px
    }

    .account ul li a img {
        width: 45px
    }

    .account ul li a h4 {
        font-size: 14px
    }

    .account ul li a p {
        font-size: 13px
    }

    .account ul li a i {
        font-size: 14px
    }

    .account ul li.profile a .img-box {
        width: 50px;
        height: 50px;
        min-width: 50px
    }

    .account ul li.profile a h3 {
        font-size: 16px
    }

    .account ul li.profile a p {
        font-size: 14px
    }

    .order-info .box .tick-box img {
        width: 70px
    }

    .order-info .box .tick-box h2 {
        font-size: 16px;
        margin: 10px 0 5px
    }

    .order-info .box .tick-box p {
        font-size: 13px
    }

    .order-info .box .order-detail h3 {
        font-size: 16px
    }

    .order-info .box .order-detail .info-list li {
        font-size: 13px
    }

    .order-info .box .order-detail .download-btn {
        font-size: 13px;
        padding: 10px
    }

    .order-info .box .order-detail .download-btn img {
        width: 30px
    }

    .order-info .box .order-detail .print-mail li a {
        font-size: 13px
    }

    .order-info .box .order-detail .btn-box .btn {
        font-size: 13px;
        padding: 10px 15px
    }

    .cart-info .box .card .card-header {
        font-size: 18px
    }

    .cart-info .box .card .card-header img {
        height: 18px
    }

    .cart-info .box .card .card-body .order-list li .order-nub h5 {
        font-size: 14px
    }

    .cart-info .box .card .card-body .order-list li .order-nub p {
        font-size: 13px
    }

    .cart-info .box .card .card-body .order-list li .price {
        font-size: 14px
    }

    .cart-info .box .card .card-body .pricing li {
        font-size: 13px
    }

    .cart-info .box .card .card-body .place-order {
        font-size: 13px
    }

    .cart-info .box .card .card-body h2 {
        font-size: 18px
    }

    .cart-info .box .card .card-body label,
    .cart-info .box .card .card-body .form-control,
    .cart-info .box .card .card-body .form-select {
        font-size: 13px
    }

    .faq .accordion .accordion-item {
        margin-bottom: 10px
    }

    .faq .accordion .accordion-item .accordion-header .accordion-button {
        padding: 15px;
        font-size: 16px
    }

    .faq .accordion .accordion-item .accordion-collapse p {
        font-size: 13px
    }

    .change-pass {
        padding: 50px 0
    }

    .change-pass .card .card-body .title p {
        font-size: 13px
    }

    .change-pass .card .card-body .title h3 {
        font-size: 18px
    }

    .change-pass .card .card-body label,
    .change-pass .card .card-body .form-control {
        font-size: 13px
    }

    .change-pass .card .card-body .btn {
        font-size: 14px
    }

    .profile .title h2 {
        font-size: 20px
    }

    .profile .title p {
        font-size: 13px
    }

    .profile .save-btn {
        font-size: 13px
    }

    .profile .box {
        padding: 30px
    }

    .profile .box label,
    .profile .box .form-control {
        font-size: 13px
    }

    .profile .box .btn {
        font-size: 14px
    }

    .orders .title h2 {
        font-size: 20px
    }

    .orders .title p {
        font-size: 13px
    }

    .orders .order-table .table-responsive .table tr th,
    .orders .order-table .table-responsive .table tr td {
        font-size: 13px;
        padding: 10px
    }

    .orders .order-table .table-responsive .table tr td span {
        font-size: 12px;
        padding: 5px 15px
    }

    .pro-detail {
        padding: 50px 0
    }

    .pro-detail .title h2 {
        font-size: 28px
    }

    .pro-detail h4 {
        font-size: 20px
    }

    .pro-detail p {
        font-size: 13px
    }

    .pro-detail .pro-box button {
        font-size: 13px
    }

    .gallery {
        padding: 50px 0
    }

    .gallery .title h2 {
        font-size: 28px
    }

    .instruction {
        padding: 50px 0
    }
}

@media(max-width: 1199px) {
    .nav-banner .boat-name .select-box .shadow-arc-effect {
        gap: 25px
    }

    .nav-banner .boat-name .select-box .select-font-color {
        gap: 5px
    }

    .nav-banner .boat-name .select-box .select-font-color li .main-color .color-box {
        width: 50px;
        height: 30px
    }

    .nav-banner .boat-name .select-box .select-font-color li .color-box,
    .nav-banner .boat-name .select-box .select-font-color li .color-list {
        width: 30px;
        height: 30px
    }

    .nav-banner .boat-name .select-box .activate-outline,
    .nav-banner .boat-name .select-box .shadow-color {
        gap: 5px
    }

    .nav-banner .boat-name .select-box .activate-outline li .main-color .color-box,
    .nav-banner .boat-name .select-box .shadow-color li .main-color .color-box {
        width: 30px;
        height: 30px
    }

    .nav-banner .boat-name .select-box .activate-outline li .color-list,
    .nav-banner .boat-name .select-box .shadow-color li .color-list {
        width: 30px;
        height: 30px
    }

    .nav-banner .boat-name .select-size {
        padding: 15px
    }

    .works::before {
        width: 650px;
        height: 650px
    }

    .works::after {
        bottom: -100px;
        right: -120px;
        width: 300px;
        height: 300px
    }

    .works ul {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 25px
    }

    .who-mission .content {
        padding: 25px
    }

    .sticker .sticker-list {
        grid-template-columns: repeat(4, 1fr)
    }
}

@media(max-width: 992px) {

    .page-banner .container,
    .nav-banner .container {
        max-width: 100%
    }

    .turning-vision .img-box,
    .lettering .img-box {
        margin: 0 0 20px
    }

    .footer .box {
        padding: 50px 0 0;
        grid-template-columns: 1fr 1fr;
        gap: 25px
    }

    .footer .box .quick-box {
        order: 0
    }

    .footer .box .com-box {
        order: 1
    }

    .footer .box .pay-social {
        order: 2
    }

    .footer .box .pay-social ul.social {
        margin-bottom: 0
    }

    .account {
        padding: 50px 0
    }
}

@media(max-width: 991px) {
    .cart-info .box>.row {
        display: block
    }

    .cart-info .box .col-lg-7 .place-order {
        display: none
    }

    .cart-info .box .col-lg-5 .place-order {
        display: block;
        margin-top: 15px
    }

    .cart-info .box .card {
        margin-bottom: 15px
    }

    .faq {
        padding: 50px 0
    }

    .faq .accordion .accordion-item .accordion-header .accordion-button {
        padding: 15px;
        font-size: 14px
    }

    .faq .accordion .accordion-item .accordion-collapse .accordion-body {
        padding: 15px
    }

    .faq .accordion .accordion-item .accordion-collapse p {
        font-size: 13px
    }

    .lettering .row.mt-5 {
        flex-direction: column-reverse
    }

    .lettering .row.mt-5 .img-box {
        margin-left: 0
    }

    .pro-detail .img-box {
        margin-bottom: 20px
    }
}

@media(max-width: 768px) {
    .nav-banner .boat-name {
        margin-top: 20px
    }

    .nav-banner .boat-name .order-row .col-lg-6:nth-child(2) {
        order: 1
    }

    .nav-banner .boat-name .order-row .select-info {
        margin-top: 15px
    }

    .nav-banner .boat-name .order-row .order-last {
        order: 1
    }

    .nav-banner .boat-name .type-btn {
        display: grid;
        grid-template-columns: 1fr;
        gap: 10px
    }

    .nav-banner .boat-name .input-group {
        flex-wrap: wrap
    }

    .nav-banner .boat-name .input-group .form-control,
    .nav-banner .boat-name .input-group .btn-preview {
        width: 100%
    }

    .works::before {
        width: 450px;
        height: 450px;
        bottom: 0;
        top: auto;
        transform: translateY(0)
    }

    .works::after {
        display: none
    }

    .works .row {
        flex-direction: column-reverse
    }

    .works .row .img-box {
        margin: 0 0 20px
    }

    .who-mission .img-box.we-are {
        border-radius: 20px;
        margin-left: 12px
    }

    .who-mission .img-box.mission {
        border-radius: 20px;
        margin-right: 12px
    }

    .who-mission .content {
        padding: 10px 0
    }

    .contact h2 {
        font-size: 30px;
        line-height: 40px
    }

    .contact .card .card-body .btn {
        padding: 10px 20px
    }

    .contact .frame-box iframe {
        height: 300px
    }

    .sticker .sticker-list {
        grid-template-columns: repeat(3, 1fr)
    }

    .account ul li a {
        padding: 10px 35px 10px 15px
    }

    .change-pass .card .card-body {
        padding: 15px
    }

    .change-pass .card .card-body .title p {
        font-size: 13px
    }

    .change-pass .card .card-body .title h3 {
        font-size: 18px
    }

    .change-pass .card .card-body label,
    .change-pass .card .card-body .form-control,
    .change-pass .card .card-body i {
        font-size: 13px
    }

    .change-pass .card .card-body .form-control {
        padding: 8px 15px
    }

    .change-pass .card .card-body i {
        top: 12px
    }

    .change-pass .card .card-body .btn {
        font-size: 13px;
        padding: 8px 20px
    }

    .instruction h4 {
        font-size: 20px
    }

    .instruction h5 {
        font-size: 16px;
        margin: 20px 0
    }

    .instruction .instruction-box {
        padding: 20px
    }

    .instruction .instruction-box p,
    .instruction .instruction-box a {
        font-size: 14px
    }
}

@media(max-width: 767px) {
    .navbar {
        backdrop-filter: blur(0);
        border: 0;
        background-color: rgba(0, 0, 0, 0)
    }

    .navbar .toggle-logo .toggle-btn {
        display: block
    }

    .navbar .container-fluid {
        flex-wrap: nowrap;
        padding: 0
    }

    .navbar .mob-logo {
        display: block
    }

    .navbar .desk-logo {
        display: none
    }

    .navbar .navbar-collapse {
        flex-grow: inherit;
        flex-basis: auto
    }

    .navbar .navbar-collapse .navbar-nav {
        flex-direction: row
    }

    .navbar .navbar-collapse .navbar-nav .nav-item .nav-link {
        display: none
    }

    .navbar .navbar-collapse .navbar-nav .nav-item .nav-link.circle-link {
        display: flex;
        height: 35px;
        width: 35px;
        background: rgba(243, 243, 245, .2);
        border-color: hsla(0, 0%, 100%, .3)
    }

    .sub-menu {
        display: none
    }

    .nav-banner .boat-name h4 {
        font-weight: 300
    }

    .nav-banner .boat-name h4 span {
        display: none
    }

    .nav-banner .boat-name .col-lg-8 p {
        display: none
    }

    .nav-banner .boat-name .col-lg-8 .digital-info span {
        display: inline-block
    }

    .nav-banner .boat-name .col-lg-8 .form-check {
        margin-top: 15px;
        margin-bottom: 0;
        font-weight: 300
    }

    .nav-banner .boat-name .col-lg-3 .select-info {
        margin-top: 10px
    }

    .nav-banner .boat-name .select-size {
        margin-top: 10px
    }

    .who-mission h2 {
        display: none
    }

    .who-mission .mob-title {
        display: block;
        font-weight: 600
    }

    .who-mission .row:first-child {
        flex-direction: column-reverse
    }

    .who-mission .img-box.we-are {
        margin-left: 0;
        margin-bottom: 20px
    }

    .who-mission .img-box.mission {
        margin-right: 0;
        margin: 20px 0
    }

    .who-mission .content {
        padding: 0
    }

    .sticker .title {
        flex-direction: column;
        align-items: flex-start
    }

    .sticker .title .filter {
        width: 100%;
        margin-top: 20px;
        grid-template-columns: repeat(2, 1fr)
    }

    .sticker .sticker-list {
        grid-template-columns: repeat(2, 1fr)
    }

    .contact ul {
        display: none
    }

    .contact .col-lg-5 ul {
        display: block
    }

    .profile .save-btn {
        min-width: 140px
    }

    .profile .box {
        padding: 15px
    }

    .profile .box label,
    .profile .box .form-control {
        font-size: 13px
    }

    .profile .box .btn {
        font-size: 14px
    }

    .orders .view-order {
        padding: 12px
    }

    .orders .view-order .inp-box ul {
        grid-template-columns: 1fr 1fr 1fr 1fr
    }

    .orders .view-order .inp-box ul li {
        margin-bottom: 10px
    }

    .orders .view-order .inp-box ul li:nth-child(5) {
        display: none
    }

    .orders .view-order .inp-box ul li:nth-child(6) {
        padding-left: 0
    }

    .gallery .filters {
        flex-wrap: wrap;
        gap: 5px
    }

    .gallery .grid .grid-item {
        margin-bottom: 12px
    }
}

@media(max-width: 576px) {
    .login-box {
        padding: 20px 10px
    }

    .login-box .box .inner {
        padding: 20px 15px
    }

    .login-box .box .inner .otp-box {
        gap: 6px
    }

    .nav-banner {
        padding: 25px 0 40px
    }

    .nav-banner.boat-stencils,
    .nav-banner.order-confirm,
    .nav-banner.cart-banner {
        padding: 10px 0
    }

    .nav-banner .boat-name {
        background-color: rgba(0, 0, 0, 0);
        border: none;
        padding: 0;
        backdrop-filter: blur(0px)
    }

    .nav-banner .boat-name.img-preview {
        padding: 10px 0
    }

    .nav-banner .boat-name .text-box textarea {
        min-height: 120px
    }

    .nav-banner .boat-name .type-btn .camera-save {
        display: block
    }

    .nav-banner .boat-name .type-btn .camera-save .btn {
        width: 100%;
        max-width: 100%
    }

    .nav-banner .boat-name .type-btn .camera-save .camera-btn {
        margin-bottom: 10px
    }

    .nav-banner .boat-name .select-font .title .nav-tabs {
        display: none
    }

    .nav-banner .boat-name .select-font .title .form-select {
        display: block
    }

    .nav-banner .boat-name .select-font .tab-pane {
        margin-top: 20px;
        padding: 0px 0 20px;
        overflow-y: auto;
        max-height: 150px
    }

    .nav-banner .boat-name .select-font .tab-pane ul {
        grid-template-columns: repeat(2, 1fr)
    }

    .nav-banner .boat-name .select-font .tab-pane ul::after {
        display: none
    }

    .nav-banner .boat-name .select-font .tab-pane ul::before {
        left: 50%;
        transform: translateX(-50%)
    }

    .nav-banner .boat-name .input-group {
        flex-wrap: nowrap
    }

    .nav-banner .boat-name .input-group .btn-preview {
        font-size: 13px;
        padding: 7px 20px;
        max-width: 100px
    }

    .nav-banner .boat-name .select-box.mt-0 {
        margin-bottom: 12px
    }

    .nav-banner .boat-name .select-box.mt-0 .shadow-arc-effect {
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 0
    }

    .nav-banner .boat-name .select-box.mt-0 .shadow-arc-effect li {
        border: 0
    }

    .nav-banner .boat-name .select-box .select-font-color,
    .nav-banner .boat-name .select-box .activate-outline,
    .nav-banner .boat-name .select-box .shadow-color {
        display: grid;
        grid-template-columns: repeat(10, 1fr)
    }

    .nav-banner .boat-name .select-box .select-font-color li:first-child,
    .nav-banner .boat-name .select-box .activate-outline li:first-child,
    .nav-banner .boat-name .select-box .shadow-color li:first-child {
        grid-area: 1/span 10
    }

    .nav-banner .boat-name .select-box .select-font-color li .color-list,
    .nav-banner .boat-name .select-box .activate-outline li .color-list,
    .nav-banner .boat-name .select-box .shadow-color li .color-list {
        width: auto
    }

    .nav-banner .boat-name .select-box .shadow-arc-effect {
        gap: 15px;
        display: grid;
        padding: 15px;
        grid-template-columns: repeat(2, 1fr)
    }

    .nav-banner .boat-name .select-box .shadow-arc-effect li {
        border: 1px solid rgba(0, 0, 0, .5);
        text-align: center;
        padding: 15px 5px;
        border-radius: 7px
    }

    .nav-banner .boat-name .select-box .shadow-arc-effect li img {
        height: 30px
    }

    .nav-banner .boat-name .select-info .row .col-md-12 {
        order: 0
    }

    .nav-banner .boat-name .select-info .row .col-md-6 {
        order: 1
    }

    .nav-banner .boat-name .add-to-cart {
        max-width: 100%
    }

    .turning-vision {
        padding: 30px 0
    }

    .turning-vision .title {
        margin-bottom: 20px
    }

    .turning-vision .title h2 {
        font-size: 24px;
        max-width: 250px
    }

    .turning-vision .title a {
        display: none
    }

    .turning-vision h4 {
        font-size: 20px
    }

    .turning-vision p p {
        font-size: 16px
    }

    .boating {
        padding: 30px 0
    }

    .boating .title {
        margin-bottom: 20px
    }

    .boating .title h2 {
        font-size: 24px;
        max-width: 250px
    }

    .boating .title p,
    .boating .title a {
        display: none
    }

    .boating .boat-img-slide {
        animation: boat-img 8s linear infinite
    }

    .works {
        padding: 30px 0
    }

    .works::before {
        width: 500px;
        height: 500px;
        left: -250px;
        bottom: 75px
    }

    .works .title {
        margin-bottom: 20px
    }

    .works .title h2 {
        font-size: 24px;
        max-width: 250px
    }

    .works .title p,
    .works .title a {
        display: none
    }

    .works ul li {
        flex-wrap: wrap;
        gap: 0
    }

    .works ul li span {
        font-size: 60px;
        line-height: 60px
    }

    .works ul li h5 {
        font-size: 16px;
        margin-bottom: 10px
    }

    .works ul li p {
        font-size: 16px
    }

    .services {
        padding: 30px 0
    }

    .services .title {
        margin-bottom: 20px
    }

    .services .title h2 {
        font-size: 24px;
        max-width: 250px
    }

    .services .title p,
    .services .title a {
        display: none
    }

    .services .row .col-lg-4:nth-child(6) .box {
        margin: 0
    }

    .footer .box {
        display: block
    }

    .footer .box .logo-box img {
        margin-bottom: 0
    }

    .footer .box .logo-box h3 {
        font-size: 18px
    }

    .footer .box .logo-box p {
        font-size: 14px;
        max-width: 100%;
        line-height: 24px
    }

    .footer .box .com-box h4,
    .footer .box .quick-box h4,
    .footer .box .pay-social h4 {
        font-size: 18px;
        margin-top: 30px
    }

    .footer .box .com-box ul li,
    .footer .box .quick-box ul li,
    .footer .box .pay-social ul li {
        font-size: 14px
    }

    .footer .box .com-box ul li a,
    .footer .box .quick-box ul li a,
    .footer .box .pay-social ul li a {
        font-size: 14px
    }

    .turning-vision .mob-btn,
    .boating .mob-btn,
    .works .mob-btn,
    .services .mob-btn {
        display: flex;
        max-width: 200px;
        margin: 20px auto 0
    }

    .page-banner {
        padding: 25px 0 40px
    }

    .page-banner h1 {
        font-size: 30px;
        margin: 70px 0 0px
    }

    .who-mission {
        padding: 30px 0
    }

    .who-mission h2 {
        font-size: 20px
    }

    .who-mission .img-box {
        border-radius: 10px !important
    }

    .sail {
        padding: 50px 0
    }

    .sail .anchar {
        width: 50px;
        margin-bottom: 10px
    }

    .sail a {
        padding: 10px 20px
    }

    .contact {
        padding: 30px 0
    }

    .contact p {
        font-size: 20px;
        font-weight: 400
    }

    .contact h2 {
        font-size: 20px;
        line-height: 28px
    }

    .contact .frame-box {
        margin: 0
    }

    .contact .frame-box iframe {
        height: 400px
    }

    .lettering,
    .projects {
        padding: 30px 0
    }

    .lettering .title,
    .projects .title {
        margin-bottom: 20px
    }

    .lettering .title h2,
    .projects .title h2 {
        font-size: 24px;
        max-width: 290px
    }

    .lettering .title a,
    .projects .title a {
        display: none
    }

    .mt-5 h2 {
        font-size: 24px
    }

    .mt-5 .mob-btn {
        display: flex;
        max-width: 200px;
        margin: 20px auto 0
    }

    .sticker {
        padding: 30px 0
    }

    .sticker .title h2 {
        font-size: 24px
    }

    .account ul {
        gap: 10px
    }

    .account ul li a {
        padding: 10px 30px 10px 10px;
        gap: 10px
    }

    .account ul li a i {
        right: 10px
    }

    .order-info {
        background: #f3f3f5;
        padding-bottom: 30px
    }

    .order-info .box {
        background: #f3f3f5;
        padding: 20px 0 0
    }

    .order-info .box .order-detail {
        padding: 0;
        border: none
    }

    .order-info .box .order-detail .btn-box .btn {
        width: auto
    }

    .cart-info {
        background-color: rgba(0, 0, 0, 0);
        padding: 30px 0 20px
    }

    .cart-info .box {
        padding: 0
    }

    .cart-info .box .card {
        border: none
    }

    .cart-info .box .card .card-header {
        border-radius: 0
    }

    .cart-info .box .card .card-body {
        padding: 15px 0
    }

    .cart-info .box .card .card-body .order-list li.cart-details {
        margin-bottom: 0px
    }

    .profile {
        padding: 30px 0
    }

    .profile .title {
        margin-bottom: 15px
    }

    .profile .title .save-btn {
        display: none
    }

    .profile .save-btn {
        min-width: auto;
        display: block
    }

    .orders {
        padding: 30px 0
    }

    .pro-detail {
        padding: 50px 0
    }

    .pro-detail .title {
        margin-bottom: 15px
    }

    .pro-detail .title h2 {
        font-size: 24px
    }

    .pro-detail h4 {
        font-size: 18px
    }

    .orders .view-order {
        padding: 12px
    }

    .orders .view-order .inp-box ul {
        grid-template-columns: 1fr 1fr
    }

    .orders .view-order .inp-box ul li {
        margin-bottom: 10px
    }

    .orders .view-order .inp-box ul li:nth-child(5) {
        display: none
    }

    .orders .view-order .inp-box ul li:nth-child(2) {
        border: 0
    }

    .orders .view-order .inp-box ul li:nth-child(3),
    .orders .view-order .inp-box ul li:nth-child(6) {
        padding-left: 0
    }

    .cart-info .box .card .card-body .order-list {
        padding-right: 10px
    }

    .cart-info .box .card .card-body .order-list li.cart-details .pro-info-box {
        margin-bottom: 15px;
        padding-right: 50px
    }

    .cart-info .box .card .card-body .order-list li.cart-details>div {
        display: block
    }

    .cart-info .box .card .card-body .order-list li.cart-details .text-end {
        margin: 0;
        display: flex;
        justify-content: space-between
    }

    .cart-info .box .card .card-body .order-list li.cart-details .btn-danger {
        right: 0px
    }

    .gallery {
        padding: 30px 0
    }

    .gallery .title h2 {
        font-size: 24px
    }

    .gallery .filters li {
        font-size: 13px;
        width: calc(50% - 5px);
        text-align: center;
        padding: 6px 10px
    }

    .gallery .grid .grid-item {
        padding: 0 6px;
        margin-bottom: 6px
    }

    .instruction {
        padding: 30px 0
    }

    .instruction h4 {
        margin: 0 0 15px
    }

    .instruction .instruction-box {
        margin: 0
    }
}

@media(max-width: 410px) {

    .nav-banner .boat-name .select-box .select-font-color,
    .nav-banner .boat-name .select-box .activate-outline,
    .nav-banner .boat-name .select-box .shadow-color {
        grid-template-columns: repeat(8, 1fr)
    }

    .nav-banner .boat-name .select-box .select-font-color li:first-child,
    .nav-banner .boat-name .select-box .activate-outline li:first-child,
    .nav-banner .boat-name .select-box .shadow-color li:first-child {
        grid-area: 1/span 8
    }

    .sticker .sticker-list {
        grid-template-columns: 1fr
    }
}

@media(max-width: 350px) {

    .nav-banner .boat-name .select-box .select-font-color,
    .nav-banner .boat-name .select-box .activate-outline,
    .nav-banner .boat-name .select-box .shadow-color {
        grid-template-columns: repeat(7, 1fr)
    }

    .nav-banner .boat-name .select-box .select-font-color li:first-child,
    .nav-banner .boat-name .select-box .activate-outline li:first-child,
    .nav-banner .boat-name .select-box .shadow-color li:first-child {
        grid-area: 1/span 7
    }
}

.custom-modal .modal-dialog {
    max-width: 850px;
}

.ai-boat.custom-modal .modal-dialog{
max-width: 950px;
}

.custom-modal .btn-close {
    position: absolute;
    right: 15px;
    top: 15px;
    opacity: 1;
    width: 24px;
    height: 24px;
    padding: 0;
    z-index: 9;
}

.custom-modal .modal-content {
    border-radius: 20px;
    padding: 10px;
}

.custom-modal .modal-content .col-md-12>h4 {
    font-weight: 700;
    font-size: 20px;
    line-height: 16px;
    letter-spacing: -0.31px;
    text-transform: capitalize;
}

.custom-modal .modal-content .col-md-12>p {
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: -0.31px;
    max-width: 455px;
    margin: 0 auto 20px;
}

.custom-modal .modal-content .col-md-12>h5 {
    font-weight: 700;
    font-size: 16px;
    line-height: 16px;
    letter-spacing: -0.31px;
    margin-bottom: 20px;
}

.custom-modal .modal-content .grid-box {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
}

.ai-boat.custom-modal .modal-content .grid-box{
    grid-template-columns: 1fr 1fr 1fr;
    gap: 7px;
}

.custom-modal .modal-content .grid-box .item {
    border: 1px solid rgba(218, 218, 218, 1);
    border-radius: 16px;
    padding: 15px;
    text-align: left;
}

.custom-modal .modal-content .grid-box .item h4 span {
    width: 24px;
    height: 24px;
    display: inline-block;
    border-radius: 60px;
    background: rgba(0, 102, 249, 1);
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: -0.31px;
    text-align: center;
    color: #fff;
    position: absolute;
    left: 0;
    top: -5px;
}

.ai-boat.custom-modal .modal-content .grid-box .item h4 {
    text-align: center;
    padding: 0;
}

.ai-boat.custom-modal .modal-content .grid-box .item h4 span{
    position: static;
    margin-right: 6px;
}

.custom-modal .modal-content .grid-box .item h4 {
    font-weight: 700;
    font-size: 16px;
    line-height: 16px;
    letter-spacing: -0.31px;
    text-transform: capitalize;
    position: relative;
    padding-left: 35px;
}

.custom-modal .modal-content .grid-box .item img {
    width: 100%;
    max-width: 100%;
    margin: 7px 0;
}

/* .custom-modal .modal-content .grid-box .item:nth-child(2) img,
.custom-modal .modal-content .grid-box .item:nth-child(3) img {
    max-width: 80%;
} */

.custom-modal .modal-content .grid-box .item p {
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
    letter-spacing: -0.31px;
}

.custom-modal .modal-content .grid-box .item>span {
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: -0.31px;
    display: block;
    padding: 10px;
    color: rgba(0, 28, 52, 1);
    background: rgba(230, 239, 253, 1);
    margin: 0;
}

.custom-modal .modal-content .grid-box .item ul {
    padding-left: 15px;
}

.custom-modal .modal-content .grid-box .item ul li {
    list-style-type: disc;
}

.custom-modal .btn-box {
    margin-bottom: 10px;
}

.custom-modal .btn-box .btn {
    border-radius: 80px;
    padding: 10px 20px;
    font-size: 14px;
    align-items: center;
    transition: .3s ease-in-out;
    border: none;
}

.custom-modal .btn-box .btn-primary {
    color: #fff;
    border-radius: 40px;
    background: #3b83f6;
    font-weight: 400;
}

.custom-modal .btn-box .btn-primary:hover {
    background-color: #140f49;
}

.custom-modal .btn-box .btn-secondary {
    background: rgba(241, 241, 241, 1);
    color: #000;
}

@media(max-width: 991px) { 
    .ai-boat.custom-modal .modal-content .grid-box {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media(max-width: 576px) {
    .custom-modal .modal-content {
        padding: 30px 0 15px;
    }
    .custom-modal .modal-content .modal-body{
        padding: 10px;
    }

    .custom-modal .modal-content .grid-box {
        grid-template-columns: 1fr;
    }

    .ai-boat.custom-modal .modal-content .grid-box {
        grid-template-columns: 1fr;
    }

    .custom-modal .modal-content .col-md-12>h4 {
        font-size: 16px;
    }

    .custom-modal .modal-content .col-md-12>p,
    .custom-modal .modal-content .grid-box .item p {
        font-size: 14px;
        line-height: 16px;
    }

    .custom-modal .modal-content .col-md-12>h5,
    .custom-modal .modal-content .grid-box .item h4 {
        font-size: 14px;
    }

    .custom-modal .modal-content .grid-box .item h4 span {
        width: 22px;
        height: 22px;
        display: inline-block;
        border-radius: 60px;
        background: rgba(0, 102, 249, 1);
        font-weight: 400;
        font-size: 14px;
        line-height: 23px;
        letter-spacing: -0.31px;
        text-align: center;
        color: #fff;
        position: absolute;
        left: 0;
        top: -5px;
    }

    .custom-modal .modal-content .grid-box .item>span {
        font-size: 13px;
        line-height: 15px;
    }
}