/* Google Font */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Manrope:wght@600;700;800&display=swap');

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

/* =========================================================
   TYPOGRAPHY
========================================================= */

body{
    font-family:"Inter", sans-serif;
    font-weight:400;
    background:#ffffff;
}

h1,
h2,
h3,
h4,
h5,
h6{
    font-family:"Manrope", sans-serif;
    font-weight:700;
}

p,
a,
span,
li,
label,
input,
textarea,
button{
    font-family:"Inter", sans-serif;
}

/* ===========================
   HEADER
=========================== */

header{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    z-index:1000;
}

.navbar{
    width:100%;
    height:80px;
    background:#ffffff;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:0 8%;
    box-shadow:0 2px 10px rgba(0,0,0,.08);
}

/* ===========================
   LOGO
=========================== */

.logo{
    display:flex;
    align-items:center;
}

.logo img{
    height:60px;
    width:auto;
    cursor:pointer;
    transition:0.3s ease;
}

.logo img:hover{
    transform:scale(1.05);
}

/* ===========================
   NAV LINKS
=========================== */

.nav-links{
    display:flex;
    align-items:center;
    gap:35px;
    list-style:none;
}

.nav-links li a{
    position:relative;
    text-decoration:none;
    color:#333;
    font-size:16px;
    font-weight:500;
    padding:8px 0;
    transition:.3s ease;
}

/* Animated Underline */

.nav-links li a::after{

    content:"";

    position:absolute;

    left:0;
    bottom:-5px;

    width:0%;

    height:3px;

    background:#C1121F;

    transition:.3s ease;
}

.nav-links li a:hover{

    color:#C1121F;
}

.nav-links li a:hover::after,

.nav-links li a.active::after{

    width:100%;
}


/* ===========================
   HAMBURGER
=========================== */

.hamburger{

    display:none;

    font-size:28px;

    color:#333;

    cursor:pointer;
}

/* ===========================
   MOBILE
=========================== */

@media(max-width:768px){

.navbar{

    padding:0 30px;
}

.nav-links{

    position:absolute;

    top:80px;

    left:-100%;

    width:100%;

    background:#ffffff;

    flex-direction:column;

    gap:0;

    text-align:center;

    transition:.4s ease;

    box-shadow:0 8px 15px rgba(0,0,0,.08);

    overflow:hidden;
}

.nav-links.active{

    left:0;
}

.nav-links li{

    width:100%;
}

.nav-links li a{

    display:block;

    padding:20px;
}

.hamburger{

    display:block;
}

.logo img{
    height:50px;
}

}

/* =========================================================
   SERVICES HERO
========================================================= */

.services-hero {
    width: 100%;
    max-width: 1500px;

    margin: 0 auto;

    min-height: 650px;

    padding: 150px 4% 70px;

    display: grid;

    grid-template-columns: 0.95fr 1.3fr;

    align-items: center;

    gap: 70px;

    background: #ffffff;
}


/* =========================================================
   LEFT CONTENT
========================================================= */

.services-hero-content {
    width: 100%;
}


.services-label {
    display: flex;

    align-items: center;

    gap: 14px;

    margin-bottom: 30px;

    font-family: "Inter", sans-serif;

    font-size: 14px;

    font-weight: 600;

    letter-spacing: 2px;

    color: #0a0c3b;
}


.services-label span {
    width: 40px;

    height: 3px;

    background: #0a0c3b;
}


/* =========================================================
   HEADING
========================================================= */

.services-hero h1 {
    font-family: "Manrope", sans-serif;

    font-size: clamp(58px, 5.8vw, 90px);

    font-weight: 700;

    line-height: 1.08;

    letter-spacing: -3px;

    color: #111111;

    margin-bottom: 30px;
}


.services-hero h1 strong {
    color: #0a0c3b;

    font-weight: 700;
}


/* =========================================================
   PARAGRAPH
========================================================= */

.services-hero p {
    max-width: 620px;

    font-family: "Inter", sans-serif;

    font-size: 17px;

    line-height: 1.8;

    color: #555555;
}


/* =========================================================
   RIGHT IMAGE
========================================================= */

.services-hero-image {
    width: 100%;
}


.services-hero-image img {
    width: 100%;

    height: 480px;

    object-fit: cover;

    display: block;

    border-radius: 7px;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

    .services-hero {
        grid-template-columns: 1fr 1fr;

        gap: 40px;

        padding: 130px 5% 60px;
    }


    .services-hero h1 {
        font-size: 55px;

        letter-spacing: -2px;
    }


    .services-hero-image img {
        height: 420px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {

    .services-hero {
        display: flex;

        flex-direction: column;

        align-items: stretch;

        min-height: auto;

        padding: 110px 20px 50px;

        gap: 40px;
    }


    .services-hero-content {
        width: 100%;
    }


    .services-label {
        font-size: 12px;

        margin-bottom: 20px;
    }


    .services-hero h1 {
        font-size: clamp(40px, 11vw, 54px);

        line-height: 1.1;

        letter-spacing: -1.5px;
    }


    .services-hero p {
        font-size: 15px;

        line-height: 1.7;
    }


    .services-hero-image img {
        height: 320px;

        border-radius: 7px;
    }

}


/* =========================================================
   SMALL PHONES
========================================================= */

@media (max-width: 480px) {

    .services-hero {
        padding: 95px 15px 40px;
    }


    .services-hero h1 {
        font-size: 38px;
    }


    .services-hero-image img {
        height: 260px;
    }

}
/*==================================================
                    SERVICES
==================================================*/

/* SERVICES */
.services {
    width: 100%;
    padding: 60px 4%;
    background: #fff;
}

.services .section-title{

    text-align:center;
    font-size:42px;
    margin-bottom:70px;
    color:#1f2d3d;

}

/*=========================
        GRID
==========================*/

.services-grid{

    display:grid;
    grid-template-columns:1fr 1fr;
    gap:30px;

    max-width:1500px;
    margin:auto;

}

/*=========================
        CARD
==========================*/

.service-card{

    position:relative;

    min-height:620px;

    padding:45px;

    color:#fff;
    

    overflow:hidden;

    display:flex;

    flex-direction:column;

    transition:.35s;

    height: auto;
}

/*=========================
      RED CARD
==========================*/

.service-card.red{

    background:#ff1010;
    text-align:left;
    clip-path:polygon(
        0 0,
        100% 0,
        90% 100%,
        0 100%
    );

}

/*=========================
      DARK CARD
==========================*/

.service-card.dark{

    background:#171330;
    text-align:right;
    clip-path:polygon(
        10% 0,
        100% 0,
        100% 100%,
        0 100%
    );
}

/*=========================
      HOVER
==========================*/

.service-card:hover{

    transform:translateY(-8px);

}

/*=========================
      ICON
==========================*/

.icon{

    margin:0 auto 30px;
    width:70px;
    height:70px;

    background:#fff;

    border-radius:50%;

    display:flex;
    align-items:center;
    justify-content:center;

    margin-bottom:30px;

}

.icon img{

    width:36px;

}

/*=========================
      TITLE
==========================*/

.service-card h3{

    font-size:28px;

    margin-bottom:25px;

    line-height:1.3;

}

/*=========================
      TEXT
==========================*/

.ideal{

    line-height:1.8;

    margin-bottom:25px;

}

.service-card.dark ul{

    list-style-position:inside;

    padding-left:0;

    text-align:right;

}

.service-card.dark li{

    margin-bottom:12px;

}
.service-card.dark .service-btn{

    margin-left:auto;

}
.service-card.dark .price{

    text-align:right;

}
.service-card li{

    margin-bottom:10px;

}

/*=========================
      PRICE
==========================*/

.price{

    margin-top:auto;

    font-size:18px;

}

.price span{

    display:block;

    font-size:36px;

    font-weight:700;

    margin-top:8px;

}

/*=========================
      BUTTON
==========================*/

.service-btn{

    margin-top:auto;

    display:inline-block;

    width:220px;

    text-align:center;

    padding:16px;

    background:#fff;

    color:#ff1010;

    text-decoration:none;

    border-radius:8px;

    font-weight:700;

    transition:.3s;

}

.service-btn:hover{

    background:#f2f2f2;

}

/*=========================
      RESPONSIVE
==========================*/

@media(max-width:992px){

.services-grid{

    grid-template-columns:1fr;

}

.service-card{

    clip-path:none;

    border-radius:0;

    min-height:auto;

}

}

/* =========================================================
   ADDITIONAL STANDALONE SERVICES
========================================================= */

.standalone-services {
    width: 100%;

    padding: 80px 4% 90px;

    background: #f8f9fb;
}


/* =========================================================
   HEADING
========================================================= */

.standalone-heading {
    text-align: center;

    max-width: 760px;

    margin: 0 auto 55px;
}


.standalone-heading h2 {
    position: relative;

    display: inline-block;

    font-family: "Manrope", sans-serif;

    font-size: 40px;

    font-weight: 700;

    color: #171330;

    margin-bottom: 22px;
}


.standalone-heading h2::after {
    content: "";

    position: absolute;

    left: 50%;

    bottom: -9px;

    transform: translateX(-50%);

    width: 85px;

    height: 4px;

    background: #ff0808;

    border-radius: 10px;
}


.standalone-heading p {
    max-width: 680px;

    margin: 0 auto;

    font-family: "Inter", sans-serif;

    font-size: 15px;

    line-height: 1.8;

    color: #666666;
}


/* =========================================================
   GRID
========================================================= */

.standalone-grid {
    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 26px;

    max-width: 1500px;

    margin: 0 auto;
}


/* =========================================================
   CARD
========================================================= */

.standalone-card {
    background: #ffffff;

    border-radius: 14px;

    overflow: hidden;

    border: 1px solid #ececf1;

    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.06);

    display: flex;

    flex-direction: column;

    min-height: 410px;

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}


.standalone-card:hover {
    transform: translateY(-7px);

    box-shadow: 0 16px 35px rgba(0, 0, 0, 0.10);
}


/* =========================================================
   IMAGE
========================================================= */

.standalone-image {
    width: 100%;

    height: 220px;

    overflow: hidden;

    background: #eeeeee;
}


.standalone-image img {
    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

    transition: transform 0.45s ease;
}


.standalone-card:hover .standalone-image img {
    transform: scale(1.04);
}


/* =========================================================
   CONTENT
========================================================= */

.standalone-content {
    padding: 26px 25px 28px;

    flex: 1;

    display: flex;

    flex-direction: column;
}


.standalone-content h3 {
    font-family: "Manrope", sans-serif;

    font-size: 21px;

    font-weight: 700;

    line-height: 1.3;

    color: #171330;

    margin-bottom: 13px;
}


.standalone-content p {
    font-family: "Inter", sans-serif;

    font-size: 14px;

    line-height: 1.7;

    color: #666666;

    margin: 0;
}


/* RED ACCENT */

.standalone-card::after {
    content: "";

    display: block;

    width: 100%;

    height: 4px;

    background: #ff0808;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1100px) {

    .standalone-grid {
        grid-template-columns: repeat(2, 1fr);

        gap: 24px;
    }


    .standalone-image {
        height: 230px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 768px) {

    .standalone-services {
        padding: 60px 20px;
    }


    .standalone-heading {
        margin-bottom: 40px;
    }


    .standalone-heading h2 {
        font-size: 31px;
    }


    .standalone-heading p {
        font-size: 14px;
    }


    .standalone-grid {
        grid-template-columns: 1fr;

        gap: 22px;
    }


    .standalone-card {
        min-height: auto;
    }


    .standalone-image {
        height: 240px;
    }


    .standalone-content {
        padding: 24px;
    }


    .standalone-content h3 {
        font-size: 21px;
    }

}


/* =========================================================
   SMALL PHONES
========================================================= */

@media (max-width: 480px) {

    .standalone-services {
        padding: 50px 15px;
    }


    .standalone-heading h2 {
        font-size: 27px;
    }


    .standalone-image {
        height: 205px;
    }


    .standalone-content {
        padding: 21px;
    }


    .standalone-content h3 {
        font-size: 19px;
    }


    .standalone-content p {
        font-size: 14px;
    }

}
/* =========================================================
   STANDALONE ENQUIRY BUTTON
========================================================= */

.standalone-btn {
    margin-top: auto;

    display: inline-flex;
    align-items: center;

    gap: 10px;

    width: fit-content;

    padding: 12px 18px;

    background: #171330;

    border: 2px solid #171330;

    border-radius: 7px;

    font-family: "Inter", sans-serif;

    font-size: 14px;
    font-weight: 600;

    color: #ffffff;

    text-decoration: none;

    transition: 0.3s ease;
}


.standalone-btn i {
    font-size: 12px;

    transition: transform 0.3s ease;
}


.standalone-btn:hover {
    background: #ef1b1b;

    border-color: #ef1b1b;

    transform: translateY(-2px);
}


.standalone-btn:hover i {
    transform: translateX(4px);
}
/*==================================================
                    FOOTER
==================================================*/

.footer{

    background:#0a0c3b;
    color:#fff;

    padding:70px 8% 25px;

}

.footer-container{

    max-width:1200px;
    margin:auto;

    display:grid;
    grid-template-columns:2fr 1fr 1fr 1.2fr;
    gap:50px;

    padding-bottom:35px;

    border-bottom:1px solid rgba(255,255,255,.12);

}

/*=========================
        Logo
=========================*/

.footer-logo{

    width:170px;
    margin-bottom:20px;

}

.footer-about p{

    color:#d8d8d8;
    line-height:1.8;
    font-size:15px;

}

/*=========================
      Titles
=========================*/

.footer-box h3{

    color:#fff;
    font-size:20px;
    margin-bottom:22px;

    position:relative;

}

.footer-box h3::after{

    content:"";

    position:absolute;

    left:0;
    bottom:-8px;

    width:40px;
    height:3px;

    background:#ef1b1b;
    border-radius:5px;

}

/*=========================
        Links
=========================*/

.footer-box a{

    display:block;

    color:#d8d8d8;

    text-decoration:none;

    margin-bottom:14px;

    transition:.3s;

}

.footer-box a:hover{

    color:#ef1b1b;
    transform:translateX(6px);

}

/*=========================
      Contact
=========================*/

.footer-contact p{

    color:#d8d8d8;
    margin-bottom:16px;

    display:flex;
    align-items:center;
    gap:10px;

}

.footer-contact i{

    color:#ef1b1b;
    width:18px;

}

/*=========================
      Social Icons
=========================*/

.footer-social{

    display:flex;
    gap:12px;

    margin-top:25px;

}

.footer-social a{

    width:42px;
    height:42px;

    border-radius:50%;

    background:rgba(255,255,255,.08);

    display:flex;
    align-items:center;
    justify-content:center;

    color:#fff;

    transition:.3s;

}

.footer-social a:hover{

    background:#ef1b1b;

    transform:translateY(-4px);

}

/*=========================
      Bottom
=========================*/

.footer-bottom{

    text-align:center;
    padding-top:25px;

}

.footer-bottom p{

    color:#cfcfcf;
    font-size:14px;

}
/*==================================================
                RESPONSIVE
==================================================*/

@media(max-width:992px){

    .footer-container{

        grid-template-columns:repeat(2,1fr);

        gap:40px;

    }

}

@media(max-width:768px){

    .footer{

        padding:60px 25px 20px;

    }

    .footer-container{

        grid-template-columns:1fr;

        text-align:center;

    }

    .footer-box h3::after{

        left:50%;
        transform:translateX(-50%);

    }

    .footer-contact p{

        justify-content:center;

    }

    .footer-social{

        justify-content:center;

    }

}
/* =========================================================
   SERVICES DROPDOWN
   SAME STYLE AS INDEX PAGE
========================================================= */

.nav-dropdown {
    position: relative;
}


/* =========================================================
   SERVICES + ARROW
========================================================= */

.dropdown-toggle {
    display: inline-flex !important;

    align-items: center;

    gap: 6px;
}


/* ARROW */

.dropdown-toggle i {
    display: inline-block !important;

    font-size: 10px;

    margin-left: 2px;

    transition:
        transform 0.3s ease;
}


/* Rotate desktop arrow */

.nav-dropdown:hover >
.dropdown-toggle i {

    transform: rotate(180deg);

}


/* =========================================================
   DESKTOP DROPDOWN MENU
========================================================= */

.dropdown-menu {
    position: absolute;

    top: calc(100% + 12px);

    left: 50%;


    min-width: 140px;


    padding: 8px 0;


    margin: 0;


    background: #ffffff;


    list-style: none;


    border-radius: 6px;


    box-shadow:
        0 8px 20px
        rgba(0, 0, 0, 0.12);


    opacity: 0;

    visibility: hidden;

    pointer-events: none;


    transform:
        translate(-50%, 8px);


    transition:
        opacity 0.3s ease,
        visibility 0.3s ease,
        transform 0.3s ease;


    z-index: 2000;
}


/* =========================================================
   SHOW DESKTOP DROPDOWN
========================================================= */

.nav-dropdown:hover >
.dropdown-menu {

    opacity: 1;

    visibility: visible;

    pointer-events: auto;


    transform:
        translate(-50%, 0);

}


/* =========================================================
   DROPDOWN ITEM
========================================================= */

.nav-links
.dropdown-menu
li {

    width: 100%;

}


.nav-links
.dropdown-menu
li a {

    display: block;


    width: 100%;


    padding:
        10px
        18px;


    color: #333333;


    font-size: 14px;

    font-weight: 500;


    text-align: center;


    white-space: nowrap;
}


/* Remove navbar underline */

.nav-links
.dropdown-menu
li a::after {

    display: none;

}


/* Hover */

.nav-links
.dropdown-menu
li a:hover {

    color: #C1121F;

    background: #f7f7f7;

}


/* =========================================================
   MOBILE SERVICES DROPDOWN
========================================================= */

@media (max-width: 768px) {

    /* Main mobile nav */

    .nav-links {

        overflow-y: auto;

        overflow-x: hidden;

        max-height:
            calc(100vh - 80px);

    }


    /* Dropdown wrapper */

    .nav-dropdown {

        position: relative;

        width: 100%;

    }


    /* =====================================================
       SERVICES BUTTON
    ===================================================== */

    .nav-dropdown >
    .dropdown-toggle {

        position: relative;


        width: 100%;


        display: flex !important;


        align-items: center;

        justify-content: center;


        gap: 8px;


        padding: 20px;


        cursor: pointer;
    }


    /* =====================================================
       MAKE ARROW VISIBLE
    ===================================================== */

    .nav-dropdown >
    .dropdown-toggle i {

        display: inline-block !important;


        font-size: 11px;


        margin-left: 4px;


        opacity: 1 !important;

        visibility: visible !important;


        transform: rotate(0deg);


        transition:
            transform 0.3s ease;
    }


    /* Arrow rotates when clicked */

    .nav-dropdown.open >
    .dropdown-toggle i {

        transform:
            rotate(180deg);

    }


    /* =====================================================
       DISABLE DESKTOP HOVER ON MOBILE
    ===================================================== */

    .nav-dropdown:hover >
    .dropdown-toggle i {

        transform: none;

    }


    .nav-dropdown.open:hover >
    .dropdown-toggle i {

        transform:
            rotate(180deg);

    }


    /* =====================================================
       MOBILE DROPDOWN
    ===================================================== */

    .nav-dropdown >
    .dropdown-menu {

        position: static;


        top: auto;

        left: auto;


        width: 100%;

        min-width: 0;


        margin: 0;


        padding: 0;


        display: none;


        background: #f7f7f7;


        border-radius: 0;


        box-shadow: none;


        opacity: 1;

        visibility: visible;

        pointer-events: auto;


        transform: none;


        transition: none;

    }


    /* =====================================================
       SHOW WHEN CLICKED
    ===================================================== */

    .nav-dropdown.open >
    .dropdown-menu {

        display: block;

    }


    /* Stop hover from forcing it open */

    .nav-dropdown:hover >
    .dropdown-menu {

        opacity: 1;

        visibility: visible;

        transform: none;

    }


    /* =====================================================
       PACKAGES LINK
    ===================================================== */

    .nav-links
    .dropdown-menu
    li {

        width: 100%;

    }


    .nav-links
    .dropdown-menu
    li a {

        width: 100%;


        display: block;


        padding:
            15px
            20px;


        color: #333333;


        font-size: 14px;

        font-weight: 500;


        text-align: center;


        background: #ffffff;


        border-top:
            1px solid #eeeeee;
    }


    .nav-links
    .dropdown-menu
    li a:hover {

        color: #C1121F;

        background: #eeeeee;

    }

}
/* =========================================================
   FOOTER CONTACT LINKS
========================================================= */

.footer-contact {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}

.footer-contact-link {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start;

    gap: 10px;

    width: 100%;

    color: #ffffff;
    text-decoration: none;

    font-size: 14px;
    line-height: 1.4;
}

.footer-contact-link i {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    width: 20px;
    min-width: 20px;

    margin: 0 !important;

    font-size: 15px;
    line-height: 1;
}

.footer-contact-link span {
    display: inline-block;
    margin: 0;
    padding: 0;
}

.footer-contact-link:hover {
    opacity: 0.75;
}