@font-face {
    font-family: ClashDisplay-Variable;
    src: url(../fonts/ClashDisplay-Variable.ttf);
}

@font-face {
    font-family: Arlita;
    src: url(../fonts/Arlita.otf);
}

@font-face {
    font-family: ClashGrotesk-Variable;
    src: url(../fonts/ClashGrotesk-Variable.ttf);
}

:root {
    --bg-body: #000000;
    --bg-dark: #080806;
    --primary-color: #DDCA67;
    --text-color: #FFFFFF;
    --clash-font: ClashDisplay-Variable;
    --arlita-font: Arlita;
    --ClashGrotest: ClashGrotesk-Variable;
}

body {
    /* background: var(--bg-body); */
    background: url("../assets/body-bg.png");
    background-position: center;
    background-size: cover;
    background-color: rgba(0, 0, 0, 0.9);
    background-blend-mode: darken;
}



ul {
    list-style-type: none
}

a {
    display: inline-block;
    text-decoration: none;
}


.row {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -12px;
}

.col-50 {
    width: 50%;
    padding: 0 12px;
}

.primary-btn {
    padding: 21px 31px;
    border: 2px solid var(--text-color);
    border-radius: 50px;
    font-size: 24px;
    font-weight: 400;
    color: var(--primary-color);
    font-family: var(--arlita-font);
    background: rgba(8, 8, 8, 48%);
    transition: all 2s linear;
}

.primary-btn:hover {
    background: var(--primary-color);
    border: 2px solid transparent;
    color: var(--bg-dark);
}


.primary-btn:hover svg {
    stroke: var(--bg-dark);
}



.secondary-btn {
    color: var(--text-color);
    font-family: var(--arlita-font);
    background: linear-gradient(331deg, #F1E28C, #090601, #F1E28C);
    width: fit-content;
    height: fit-content;
    border-radius: 50px;
    padding: 1px;
    font-size: 24px;
    font-weight: 400;
    text-transform: capitalize;
    font-family: var(--arlita-font);
    margin-top: 70px;

}

.secondary-btn:hover {
    background-size: 300%;
    animation: moveGradient 3s linear infinite;
}

.secondary-btn span {
    padding: 21px 35px;
    border-radius: 50px;
    display: inline-block;
    color: var(--text-color);
    background: var(--bg-dark);
}

.secondary-btn svg {
    margin-left: 21px;
}

.btn-border {
    background: linear-gradient(344deg, #F1E28C, #090601, #F1E28C);
    width: fit-content;
    height: fit-content;
    border-radius: 16px;
    padding: 1px;
    background-size: 300%;
    text-transform: capitalize;
    animation: moveGradient 3s linear infinite;
}

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

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

.btn-border>span {
    padding: 14px 58px;
    border-radius: 16px;
    display: inline-block;
    color: var(--text-color);
    background: var(--bg-dark);
    font-size: 25px;
    font-weight: 400;
    font-family: var(--ClashGrotest);
    text-wrap: nowrap;
}


.title-2 {
    font-size: 60px;
    font-weight: 400;
    color: var(--text-color);
    text-transform: capitalize;
    font-family: var(--arlita-font);
}

.title-2 span {
    color: var(--primary-color);
}


/* 
###########################################
Bootstrap Classes 
###########################################
*/
.container {
    max-width: 1571px !important;
}




/* 
###########################################
Navbar Section 
###########################################
*/
.nav-link {
    color: var(--text-color);
    font-size: 20px;
    font-weight: 500;
    font-family: var(--clash-font);
    position: relative;
    transition: 0.3s linear;
}



.nav-link::before {
    content: "";
    background: url("../assets/nav-hover-img-01.png");
    width: 17px;
    height: 10px;
    top: 9;
    left: 0;
    position: absolute;
    transition: 0.5s linear;
    opacity: 0;
}


.nav-link::after {
    content: "";
    background: url("../assets/nav-hover-img-02.png");
    width: 17px;
    height: 10px;
    bottom: 9px;
    right: 0;
    position: absolute;
    transition: 0.5s linear;
    opacity: 0;
}

.nav-link:hover::after,
.nav-link:hover::before,
.active::after,
.active::before {
    opacity: 1;
}



.nav-link:hover,
.active {
    color: var(--primary-color) !important;
}

.nav-item {
    margin-right: 60px;
}

.li:last-child {
    margin: 0;
}

.navbar-brand {
    width: 100px;
}

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

.user:hover svg path,
.search:hover svg path {
    stroke: var(--primary-color);
}

.user {
    margin-left: 44px;
}

.header-sec {
    position: sticky;
    top: 0px;
    z-index: 999;
    background: var(--bg-body);
}


.offcanvas {
    flex-direction: row;
}






/* 
###########################################
Banner Section 
###########################################
*/
.banner-sec {
    min-height: 100vh;
    background: url("../assets/hero-bg.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    position: relative;
    -webkit-mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 85%, transparent 100%);
    background-attachment: fixed;
}

.title-1 {
    max-width: 828px;
    font-size: 80px;
    font-weight: 400;
    text-transform: capitalize;
    font-family: var(--arlita-font);
}

.banner-wrapper p {
    max-width: 661px;
    font-size: 22px;
    font-weight: 400;
    letter-spacing: 0.44px;
    text-transform: capitalize;
    font-family: var(--ClashGrotest);
    margin: 15px 0 51px;
}

.banner-wrapper {
    position: relative;
    z-index: 1;
}

.banner-sec::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to left, transparent, rgba(0, 0, 0, 0.8));
}

.banner-btn svg {
    margin-left: 21px;
}




/*
###########################################
Perfect Day Section
###########################################
 */
.perfect-day-sec {
    padding: 135px 0;
}

.perfect-day-sec .btn-border {
    margin: 0 auto;
}

.perfect-day-sec .perfect-head {
    text-align: center;
}

.perfect-day-sec .perfect-head .title-2 {
    max-width: 901px;
    margin: 60px auto 100px;
}

.video-wrapper {
    max-width: 1204px;
    border-radius: 30px;
    background: linear-gradient(to bottom, transparent, #F1E28C, #110E03);
    margin: 0 auto;
    padding: 1px;
    position: relative;
    background-size: 300% 300%;
    animation: movingGradient 3s linear infinite;
}

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

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

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

.video-wrapper .video-bg {
    height: 100%;
    background: #0F100E;
    border-radius: 30px;
    padding: 23px 26px;
}


.video-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 30px;
}


.video-wrapper::before {
    content: "";
    width: 90px;
    height: 90px;
    border: 1px solid var(--text-color);
    background: rgba(255, 255, 255, 10%);
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: wave 1s infinite ease-out;
}

.video-wrapper::after {
    content: "";
    width: 47px;
    height: 52px;
    position: absolute;
    background: url("../assets/play-btn.png");
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}


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

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





/*  
###########################################
Dream Come Section 
###########################################
*/
.dream-come-sec {
    padding: 135px 0;
}

.section-head {
    display: flex;
    align-items: center;
}

.sub-title {
    margin: 0 auto;
}

.left-line {
    max-width: 793px;
    margin-right: 6px;
}

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

.right-line {
    max-width: 793px;
    margin-left: 6px;
}

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

.main-head {
    text-align: center;
    margin: 25px 0 96px;
}

.dream-come-sec .title-2 {
    max-width: 879px;
    margin: 0 auto;
}

.main-head p {
    max-width: 479px;
    margin: 6px auto 0;
    font-size: 22px;
    font-weight: 400;
    letter-spacing: 0.44px;
    text-transform: capitalize;
    color: var(--text-color);
    font-family: var(--ClashGrotest);
}

.card {
    width: 451px;
    max-height: 425px;
    border-radius: 26px;
    background: transparent;
    position: relative;
    margin-bottom: 170px;
    transition: transform 0.3s ease;
}

.card:hover {
    transform: scale(1.05);
    /* box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15); */
}

.card-img {
    max-width: 451px;
}

.card img {
    width: 100%;
    height: 392px;
    object-fit: cover;
    border-radius: 26px;
}

.card-content {
    width: 451px;
    position: relative;
    top: -40px;
    left: 0px;
    right: 0px;
}

.card-content svg {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.card-txt {
    position: absolute;
    top: 21%;
    left: 0;
    right: 0;
    text-align: center;
}

.card-txt .title-3 {
    font-size: 30px;
    font-weight: 400;
    color: var(--text-color);
    text-transform: capitalize;
    font-family: var(--arlita-font);
}

.card-txt p {
    font-size: 22px;
    font-weight: 400;
    color: var(--text-color);
    letter-spacing: 0.44px;
    text-transform: capitalize;
    font-family: var(--ClashGrotest);
}

.card-btn {
    background: linear-gradient(331deg, #F1E28C, #090601, #F1E28C);
    /* max-width: 185px; */
    /* max-height: 55px; */
    max-width: fit-content;
    max-height: fit-content;
    border-radius: 33px;
    padding: 1px;
}

.card-btn:hover {
    background-size: 300%;
    animation: 3s linear 0s infinite normal none running moveGradient;
}

.card-btn span {
    padding: 10px 22px;
    border-radius: 50px;
    display: inline-block;
    color: var(--text-color);
    background: var(--bg-dark);
    font-size: 22px;
    letter-spacing: 0.44px;
    font-weight: 400;
    font-family: var(--arlita-font);
}


.card-btn span svg {
    width: 20px;
    height: 14px;
}

.card-explore-btn {
    text-align: center;
}



/* 
###########################################
Service Section  
###########################################
*/
.service-sec {
    padding: 135px 0;
}


.service-sec .main-head {
    margin: 43px 0 60px;
}


.service-sec .main-head .main-head-para {
    max-width: 639px;
}

.service-card {
    /* padding: 74px 80px; */
    padding: 38px 47px;
    /* border-radius: 70px; */
    color: var(--text-color);
    margin-bottom: 40px;
    background: var(--bg-body);
    border: 1px solid rgba(241, 226, 140, 20%);
}


.service-card-img {
    max-width: 673px;
}

.service-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 34px;
}


.service-card .btn-border span {
    padding: 7px 42px;
    font-size: 18px;
}

.service-card .title-3 {
    font-size: 50px;
    font-weight: 400;
    text-transform: capitalize;
    /* line-height: calc(108.5/50); */
    font-family: var(--arlita-font);
    margin: 43px 0 8px;
}


.service-card .title-3 span {
    color: var(--primary-color);
}



.service-card p {
    max-width: 540px;
    font-size: 25px;
    font-weight: 400;
    letter-spacing: 0.44px;
    text-transform: capitalize;
    font-family: var(--ClashGrotest);
}

.service-card .secondary-btn {
    margin-top: 54px;
}

.service-card .secondary-btn span {
    padding: 16px 26px;
    font-size: 22px;
}

.service-card {
    position: sticky;
    top: 130px;
}

.service-card::before {
    content: "";
    width: 155px;
    height: 4px;
    top: 0;
    background: #F1E28C;
    box-shadow: 0 0 10px #F1E28C;
    position: absolute;
}





/* 
###########################################
Predestined Section
###########################################
 */
.predestined-sec {
    /* background: url("../assets/body-bg.png"); */
    /* background-repeat: repeat-y; */
    /* background-position: center; */
    /* background-size: cover; */
    position: relative;
    /* background-color: rgba(0, 0, 0, 0.9); */
    /* background-blend-mode: darken; */
    overflow: hidden;
    padding: 135px 0;
}

.predestined-sec::after {
    content: "";
    position: absolute;
    inset: 0;
    /* background: linear-gradient(to top, #000000, transparent, transparent, #000000); */
    z-index: 1;
}

.predestined-wrapper {
    border-radius: 40px;
    padding: 3.177vw 2.917vw;
    box-shadow: 0px 0px 119.5px #39331e;
    background: var(--bg-dark);
    position: relative;
    z-index: 2;
}

.testimonials-wrapper {
    background: linear-gradient(to bottom, #F1E28C, #F1E28C, #f1e28c4c, #f1e28c48, #0A0702, transparent);
    border-radius: 40px;
    padding: 1px;
    position: relative;
}

.testimonials-wrapper .testimonials-cntn {
    height: 100%;
    background: var(--bg-dark);
    border-radius: 40px;
}

.testimonials-sub-title {
    position: absolute;
    width: fit-content;
    height: fit-content;
    border-radius: 16px;
    padding: 1px;
    background: linear-gradient(344deg, #F1E28C, #090601, #F1E28C);
    transform: translateX(-50%);
    left: 50%;
    top: -34px;
    background-size: 300%;
    animation: moveGradient 3s linear infinite;
}

.testimonials-sub-title span {
    padding: 14px 58px;
    border-radius: 16px;
    display: inline-block;
    color: var(--text-color);
    background: var(--bg-dark);
    font-size: 25px;
    font-weight: 400;
    font-family: var(--ClashGrotest);
}


.testimonials-cntn .col-6 .btn-border span {
    padding: 10px 42.5px;
    font-size: 20px;
}


.testimonials-cntn {
    padding: 121px 2.708vw;
}

.testimonials-img {
    max-width: 678px;
}

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

.testimonials-cntn .title-2 {
    max-width: 615px;
    font-size: 60px;
    font-weight: 400;
    color: var(--text-color);
    text-transform: capitalize;
    font-family: var(--arlita-font);
    margin: 30px 0 18px;
}

.testimonials-cntn .title-2 span {
    color: var(--primary-color);
}

.testimonials-card {
    padding: 25px 24px 24px;
    display: flex;
    align-items: center;
    color: var(--text-color);
    text-transform: capitalize;
    border: 1px solid rgba(241, 226, 140, 51%);
    border-radius: 10px;
    background-color: #0F0F0C;
    position: relative;
    transition: 0.3s linear;
}

.testimonials-card:hover {
    box-shadow: 0px 0px 12px #e4d89c;
}

.testimonials-card::after {
    content: "";
    width: 50px;
    height: 50px;
    background: url("../assets/star.png")no-repeat center/contain;
    position: absolute;
    top: -25px;
    right: -25px;
    transition: 0.3s linear;
    filter: drop-shadow(0px 0px 20px #F1E28C);
}


/* .testimonials-card::before {
    content: "";
    width: 50px;
    height: 50px;
    background: #F1E28C;
    position: absolute;
    top: -25px;
    right: -25px;
    filter: blur(30px);
} */



.testimonials-card div {
    margin-left: 20px;
}

.testimonials-card .title-5 {
    font-size: 20px;
    font-weight: 500;
    font-family: var(--ClashGrotest);
}

.testimonials-card p {
    max-width: 436px;
    font-size: 18px;
    letter-spacing: 0.36px;
    font-weight: 400;
    font-family: var(--ClashGrotest);
}


.client-card {
    color: var(--text-color);
    background: #100e07;
    border-radius: 15px;
    padding: 18px 20px;
    border: 1px solid rgba(241, 226, 140, 20%);
    margin-bottom: 20px;
    transition: 0.3s linear;

}

.client-card:hover {
    box-shadow: 0px 0px 12px #e4d89c;
}


.client-wrapper {
    background: var(--bg-dark);
    border-radius: 15px;
    padding: 3px 43px 29px 42px;
}

.inner-wrapper {
    padding: 34px 0 0px;
    position: relative;
}

.inner-wrapper::after {
    content: "";
    width: 80px;
    height: 3px;
    position: absolute;
    background: #F1E28C;
    top: 0;
    left: 0;
    box-shadow: 0 0 10px #F1E28C, 0 0 20px #F1E28C;
}



.inner-wrapper p {
    max-width: 519px;
    font-size: 18px;
    font-weight: 400;
    font-family: var(--ClashGrotest);
    margin-bottom: 16px;
    text-transform: capitalize;
}

.client-details-wrapper img {
    width: 56px;
    height: 56px;
    object-fit: cover;
}

.title-6 {
    font-size: 18px;
    font-weight: 500;
    text-transform: capitalize;
    font-family: var(--ClashGrotest);
    margin: 0;
}

.cleint-details p {
    font-size: 14px;
    font-weight: 400;
    text-transform: capitalize;
    font-family: var(--ClashGrotest);
    margin: 0;
}

.cleint-details {
    margin-left: 9px;
}

.client-row {
    margin-top: 37px;
}


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



/* Registration Section */
.registration-sec {
    padding: 135px 0;
}


.registration-sec .form-img {
    max-width: 696px;
}

.registration-sec .form-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.register-head .sub-title {
    margin: 0;
}

.register-head .sub-title span {
    padding: 7px 42px;
    font-size: 18px;
}

.register-head .title-2 {
    font-size: 60px;
    font-weight: 400;
    letter-spacing: -0.6px;
    color: var(--primary-color);
    font-family: var(--arlita-font);
}

.register-head .title-2 span {
    font-size: 200px;
    font-weight: 500;
    letter-spacing: -0.6px;
    font-family: var(--ClashGrotest);
}

.register-head p {
    max-width: 527px;
    font-size: 30px;
    font-weight: 400;
    color: var(--text-color);
    letter-spacing: -0.6px;
    font-family: var(--ClashGrotest);
}

.userInput {
    padding: 12px 44px 64px;
    border-radius: 50px;
    border: 2px solid #27220D;
    margin-top: 67px;
    background: var(--bg-body);
    box-shadow: 0px 0px 119.5px -73px #cab83fa3;
}

.registration-sec .userInput img {
    width: 206px;
    height: 35px;
    object-fit: cover;
    margin-bottom: 13px;
    mix-blend-mode: plus-lighter;
}

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


.form-head p {
    max-width: 435px;
    margin: 0 auto;
    font-size: 40px;
    font-weight: 400;
    margin-bottom: 37px;
    color: var(--text-color);
    font-family: var(--arlita-font);
}

.form-head p span {
    color: var(--primary-color);
}

.userInput label {
    display: block;
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 14px;
    color: var(--text-color);
    font-family: var(--ClashGrotest);
}

.userInput input {
    margin-bottom: 31px;
    width: 100%;
    background: transparent;
    border-radius: 16px;
    border: 1px solid rgba(221, 202, 103, 50%);
    outline: none;
    padding: 22px 20px;
    transition: 0.35s;
    cursor: pointer;
    color: white;
}

.userInput input:hover {
    box-shadow: 0 0px 24px #ddca6769
}

.userInput input::placeholder {
    font-size: 16px;
    font-weight: 400;
    color: var(--text-color);
    font-family: var(--ClashGrotest);
}

.userInput .secondary-btn {
    margin-top: 50px;
    position: relative;
}

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

.userInput .secondary-btn::after {
    content: "";
    background: url("../assets/btn-decorative-img.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    width: 45.63px;
    height: 77.43px;
    position: absolute;
    bottom: -15px;
}





/* 
###########################################
Footer Section
###########################################
 */
.footer-sec {
    padding: 66px 20 0;
    background: var(--bg-body);
    border: 1px solid #524B26;
}

.footer-sec ul {
    padding-left: 0;
    margin-bottom: 0px;
}

.footer-sec ul a {
    font-size: 25px;
    font-weight: 400;
    color: var(--text-color);
    text-transform: capitalize;
    font-family: var(--ClashGrotest);
    transition: 0.2s linear;
}

.footer-sec ul a:hover {
    color: var(--primary-color);
}

.footer-logo a {
    width: 169px;
}

.footer-logo a img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.company-about-para {
    /* max-width: 468px; */
    font-size: 25px;
    font-weight: 300;
    color: var(--text-color);
    text-transform: capitalize;
    font-family: var(--ClashGrotest);
    /* margin: 40px 0 37px */
    margin: 30px 0 50px
}


.footer-contact li span img {
    width: 28px;
    height: 26px;
    object-fit: cover;
}

.footer-contact {
    padding: 0;
}

.footer-contact li a {
    font-size: 25px;
    font-weight: 400;
    color: var(--text-color);
    font-family: var(--ClashGrotest);
    margin-left: 5px;
}


.our-service-list li {
    margin-bottom: 20px;
}

.our-service-list li:last-child {
    margin-bottom: 0px;
}

.latest-update-wrapper p {
    font-size: 25px;
    font-weight: 400;
    margin-bottom: 23px;
    color: var(--text-color);
    text-transform: capitalize;
    font-family: var(--ClashGrotest);
}

.latest-update-wrapper .subscribe-box {
    width: 100%;
    /* max-width: 402px; */
}

.subscribe-box input {
    flex: 1;
    min-width: 0;
}

.subscribe-box form {
    border: 1px solid var(--primary-color);
    border-radius: 20px;
    padding: 6px 6px 6px 31px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}


.subscribe-box form #email {
    background: transparent !important;
    border: none;
    outline: none;
    font-size: 22px;
    font-weight: 400;
    color: var(--text-color);
    font-family: var(--primary-color);
}

.subscribe-box input::placeholder {
    color: var(--text-color);
}

.subscribe-box button {
    padding: 9px 13.5px;
    background: var(--primary-color);
    border-radius: 16px;
    font-size: 22px;
    font-weight: 500;
    border: none;
    white-space: nowrap;
    font-family: var(--ClashGrotest);
}


.social-media-links {
    display: flex;
    align-items: center;
    justify-content: end;
    margin: 100px 0 38px !important;
}

.social-media-links li a {
    width: 50px;
    height: 50px;
    border: 2px solid var(--primary-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s linear;
}

.social-media-list {
    margin-right: 12px;
}

.social-media-links li a:hover {
    box-shadow: 0 0 10px var(--primary-color), 0 0 20px var(--primary-color);
}

.country-links ul li {
    margin-right: 20px;
}

.country-links ul li:last-child {
    margin: 0;
}

.country-links ul li a {
    font-size: 25px;
    font-weight: 400;
    font-family: var(--ClashGrotest);
}

.country-links .divider {
    position: relative;
}

.country-links .divider::after {
    content: "";
    width: 2px;
    height: 20px;
    top: 23%;
    left: -10px;
    position: absolute;
    background: var(--primary-color);

}

.line {
    /* border: none; */
    width: 100%;
    height: 2px;
    background: #F1E28C;
    margin: 50px 0 0px;
}

.footer-sec .copy-right-content {
    font-size: 25px;
    font-weight: 400;
    color: var(--text-color);
    text-transform: capitalize;
    display: flex;
    padding: 30px 0 50px;
    font-family: var(--ClashGrotest);
}

.footer-sec .copy-right-content a {
    color: var(--text-color);
    transition: 0.3s linear;
}

.footer-sec .copy-right-content a:hover {
    color: var(--primary-color);
}

.copy-right-content p {
    margin: 0;
}
























/* 
###########################################
Media Queries
###########################################
 */

@media screen and (min-width: 992px) and (max-width: 1440px) {

    /* Dream Come Section */
    .dream_row .col-xl-4 {
        width: 50% !important;
    }
}

@media screen and (max-width:1200px) {
    .offcanvas {
        flex-direction: column;
        padding-top: 150px;
        backdrop-filter: blur(16px);
        background: #00000033 !important;
    }

    .navbar-toggler {
        display: flex;
        align-items: center;
        position: relative;
        z-index: 9999;
    }

    .navbar-toggler-icon {
        background: none;
        width: 30px;
        height: 2px;
        background: var(--primary-color);
        transition: 0.5s linear;
    }

    .nav-item {
        margin: 0;
        text-align: center;
    }

    .nav-btn {
        justify-content: center;
        margin-top: 30px;
    }


    .navbar-toggler::after {
        content: "";
        width: 30px;
        height: 2px;
        background: var(--primary-color);
        position: absolute;
        top: -4px;
        transition: 0.5s linear;
    }

    .navbar-toggler::before {
        content: "";
        width: 30px;
        height: 2px;
        background: var(--primary-color);
        position: absolute;
        bottom: -4px;
        transition: 0.5s linear;
    }

    .navbar-toggler.active {
        color: transparent !important;
    }

    .navbar-toggler.active>.navbar-toggler-icon {
        transform: translateX(-10px);
        opacity: 0;
    }

    .navbar-toggler.active::before {
        transform: translate(3px, -6px) rotate(45deg);
    }

    .navbar-toggler.active::after {
        transform: translate(5px, 5px) rotate(-45deg);
    }

    .offcanvas .nav-link::after,
    .offcanvas .nav-link::before {
        display: none;
    }

    /* Registration Section */
    .form-head p {
        max-width: 100%;
    }


    /* footer-sec */
    .latest-update-wrapper .subscribe-box {
        max-width: 402px;
    }

    .social-media-links {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        margin: 55px 0 38px !important;
    }

    .country-links ul {
        justify-content: flex-start !important;
    }
}

@media screen and (max-width:992px) {

    /* Perfect Day Section */
    .video-wrapper::before {
        width: 60px;
        height: 60px;
    }

    .video-wrapper::after {
        /* content: ""; */
        width: 30px;
        height: 32px;
    }

    /* Predestined Section */
    .testimonials-img {
        margin: 0 auto 100px;

    }

    .predestined-sec .title-2 {
        font-size: 50px;
    }


    .inner-wrapper p {
        max-width: 100%;
    }

    .testimonials-cntn .btn-border {
        margin: 0 auto;
    }

    .testimonials-cntn .title-2 {
        max-width: 100%;

    }

    /* Service Section  */
    .service-card-img {
        max-width: 100%;
    }


    /* footer-sec */

    .footer-sec .copy-right-content {
        font-size: 18px;
        text-align: center;
    }
}

@media screen and (max-width:768px) {

    /* Navbar Section  */
    .navbar-brand {
        width: 70px;
    }


    /* Perfect Day Section */
    .perfect-day-sec .title-2 {
        font-size: 40px;
        margin: 38px auto 60px !important;
    }

    .perfect-day-sec {
        padding: 60px 0;
    }


    /* Dream Come Section */
    .dream-come-sec {
        padding: 60px 0;
    }

    .main-head .title-2 {
        font-size: 40px;
    }



    /* Service Section  */
    .service-sec {
        padding: 60px 0;
    }

    .service-sec .title-2 {
        font-size: 40px;
    }

    .main-head-para {
        font-size: 16px !important;
    }

    /* Predestined Section */
    .predestined-sec {
        padding: 60px 0;
    }


    /* Registration Section */
    .register-head .title-2 {
        font-size: 40px;
    }

    .register-head .title-2 span {
        font-size: 160px;
    }

    .register-head p {
        max-width: 100%;
        font-size: 20px;
    }

    .form-head p {
        font-size: 28px;
    }


    /* footer-sec */
    .footer-logo a {
        width: 80px;
    }

    .company-about-para {
        /* max-width: 468px; */
        font-size: 18px;
        margin: 30px 0 25px;
    }

    .footer-contact li a {
        font-size: 20px;
    }

    .footer-sec ul a {
        font-size: 20px;
    }

    .our-service-list li {
        margin-bottom: 14px;
    }

    .social-media-links {
        margin: 30px 0 30px !important;
    }

    .country-links ul li a {
        font-size: 20px;
    }

    .country-links .divider::after {
        content: "";
        width: 2px;
        height: 20px;
        top: 15%;
        left: -10px;
        position: absolute;
        background: var(--primary-color);
    }
}

@media screen and (max-width:576px) {

    /* Navbar Section  */
    .title-1 {
        font-size: 50px;
        max-width: 100%;
    }

    .banner-wrapper p {
        max-width: 100%;
    }

    .primary-btn {
        padding: 16px 24px;
        font-size: 18px;
    }

    .banner-btn svg {
        width: 20px;
        height: 19px;
    }


    /* Perfect Day Section */
    .video-wrapper .video-bg {
        padding: 10px 12px;
    }

    .video-wrapper::before {
        width: 30px;
        height: 30px;
    }

    .video-wrapper::after {
        /* content: ""; */
        width: 15px;
        height: 16px;
    }

    .perfect-day-sec .title-2 {
        font-size: 30px;
    }


    /* Dream Come Section */
    .card-explore-btn .secondary-btn {
        font-size: 16px;
        margin-top: 10px;
    }

    .card-explore-btn .secondary-btn svg {
        width: 18px;
    }



    /* Service Section  */
    .service-sec .title-2 {
        font-size: 36px;
    }

    .main-head-para {
        font-size: 12px !important;
    }

    .service-card .title-3 {
        font-size: 32px;
    }

    .service-card p {
        font-size: 13px;
    }

    .service-card .secondary-btn span {
        padding: 16px 26px;
        font-size: 16px;
    }

    .service-card .secondary-btn span svg {
        width: 20px;
    }

    .service-card .secondary-btn {
        margin-top: 24px;
    }

    .service-card::before {
        content: "";
        width: 53px;
    }

    .service-card {
        top: 95px;
    }




    /* Predestined Section */
    .testimonials-card {
        padding: 10px 15px;
    }

    .testimonials-card>div {
        margin-top: 30px;
        text-align: center;
    }

    .testimonials-card div {
        margin-left: 0px;
    }

    .predestined-sec .title-2 {
        font-size: 30px;
        max-width: 100%;
    }

    .client-wrapper {
        padding: 3px 15px 29px 15px;
    }

    .inner-wrapper p {
        font-size: 12px;
    }

    .cleint-details .title-6 {
        font-size: 14px;
    }

    .cleint-details p {
        font-size: 12px;
        margin-top: 3px;
    }

    .testimonials-sub-title span {
        font-size: 18px;
    }

    .btn-border>span {
        font-size: 16px;
    }

    .predestined-sec .secondary-btn {
        font-size: 18px;
        margin-top: 30px;
    }


    .predestined-sec .secondary-btn span {
        padding: 15px 19px;
    }

    .predestined-sec .secondary-btn span svg {
        width: 20px;
        height: 15px;
    }

    .secondary-btn svg {
        margin-left: 15px;
    }

    .testimonials-cntn {
        padding-bottom: 60px;
    }


    /* Registration Section */
    .registration-sec {
        padding: 60px 0;
    }

    .register-head .sub-title span {
        padding: 7px 20px;
        font-size: 12px;
    }

    .register-head .title-2 {
        font-size: 30px;
    }

    .register-head .title-2 span {
        font-size: 90px;
    }

    .register-head p {
        max-width: 100%;
        font-size: 14px;
    }

    .form-head p {
        font-size: 24px;
    }

    .userInput input {
        margin-bottom: 22px;
        padding: 12px 20px;
    }

    .userInput label {
        font-size: 16px;
        margin-bottom: 8px;
    }

    .subscribe-btn .secondary-btn {
        font-size: 16px;
        margin-top: 50px;
    }

    .subscribe-btn .secondary-btn span {
        padding: 14px 25px;
    }

    .subscribe-btn .secondary-btn span svg {
        width: 18px;
    }

    .userInput .secondary-btn::after {
        content: "";
        width: 36.63px;
        height: 55.43px;
    }


    /* footer-sec */
    .footer-sec .copy-right-content {
        padding: 18px 0 18px;
    }

    .footer-sec .copy-right-content {
        font-size: 14px;
    }

}

@media screen and (max-width: 490px) {

    /* Banner Section */
    .banner-sec {
        min-height: 80vh;
    }


    /* Dream Come Section */
    .card {
        width: 295px;
        margin-bottom: 0;
    }

    .card-img {
        width: 295px;
    }

    .card img {
        height: 260px;
    }

    .card-content {
        width: 296px;
    }

    .card-txt .title-3 {
        font-size: 20px;
        margin-bottom: 5px;
    }

    .card-txt p {
        font-size: 12px;
    }

    .card-btn span {
        font-size: 12px;
    }

    .card-btn span svg {
        width: 15px;
    }

    .card-btn span {
        padding: 10px 18px;
    }

    .main-head .title-2 {
        font-size: 30px;
    }

    .dream-come-sec .main-head p {
        font-size: 16px;
    }

    .dream-come-sec .main-head {
        text-align: center;
        margin: 25px 0 55px;
    }

    .dream-come-sec .secondary-btn span {
        padding: 15px 16px;
    }

    /* Registration Section */
    .form-head p {
        font-size: 18px;
    }

    .subscribe-btn .secondary-btn {
        margin-top: 28px;
    }
}

@media screen and (max-width:425px) {

    /* Navbar Section  */
    .title-1 {
        font-size: 36px;
    }

    .banner-wrapper p {
        font-size: 18px;
    }

    .primary-btn {
        padding: 16px 24px;
        font-size: 15px;
    }

    .banner-btn svg {
        width: 17px;
        height: 19px;
    }

    .banner-btn svg {
        margin-left: 10px;
    }



    /* Service Section  */
    .service-sec .title-2 {
        font-size: 25px;
    }

    .service-card .btn-border span {
        padding: 7px 31px;
        font-size: 16px;
    }

    .service-card .title-3 {
        font-size: 28px;
    }

    .service-card .secondary-btn span {
        padding: 13px 18px;
        font-size: 14px;
    }

    .service-card .secondary-btn span svg {
        width: 16px;
    }

    .service-card {
        padding: 38px 30px;
    }



    /* Predestined Section */
    .client-details-wrapper {
        flex-direction: column;
    }

    .cleint-details {
        margin-top: 10px;
        text-align: center;
        margin-left: 0px;
    }

    /* Registration Section */
    .form-head p {
        font-size: 15px;
    }


    /* footer-sec */
    .footer-sec .latest-update-wrapper .country-links ul li a {
        font-size: 18px;
    }

    .footer-sec .latest-update-wrapper .country-links ul li {
        margin-right: 16px;
    }

    .footer-sec .country-links .divider::after {
        content: "";
        width: 2px;
        height: 17px;
        top: 15%;
        left: -10px;
        position: absolute;
        background: var(--primary-color);
    }

    .subscribe-box form {
        padding: 6px 6px 6px 18px;
    }

    .subscribe-box form #email {
        font-size: 16px;
    }

    .subscribe-box button {
        font-size: 15px;
    }

    .footer-sec ul a {
        font-size: 16px;
    }

    .our-service-list li {
        margin-bottom: 6px;
    }

    .footer-sec .latest-update-wrapper p {
        font-size: 20px;
        font-weight: 400;
        margin-bottom: 12px;
        color: var(--text-color);
        text-transform: capitalize;
        font-family: var(--ClashGrotest);
    }
}