/**
 * title:      Restons Holdings
 * created:    28/04/2025
 * author:     Development Team <info@optiva.co.uk>
 * copyright:  Optiva Ltd

 * ========================================================================== */

body { font-family: 'Poppins', sans-serif; font-weight: 400; overflow-x: hidden; scroll-behavior: smooth; position: relative; }

h1 { color: #2d2d2d; font-size: 36px; line-height: 44px; font-weight: 400; }
h2 { color: #2d2d2d; font-size: 36px; line-height: 44px; font-weight: 400; }
h3 { color: #2d2d2d; font-size: 32px; line-height: 38px; font-weight: 400; }
h4 { color: #2d2d2d; font-size: 30px; line-height: 36px; font-weight: 400; }
h5 { color: #2d2d2d; font-size: 24px; line-height: 30px; font-weight: 400; }
h6 { color: #2d2d2d; font-size: 20px; line-height: 26px; font-weight: 400; }
p { color: #666666; font-size: 18px; line-height: 26px; font-weight: 400; }
li { color: #666666; font-size: 18px; line-height: 26px; font-weight: 400; }


.container { max-width: 1240px; }

.text-left { text-align: left; }
.text-center { text-align: center; }
.text-right { text-align: right; }

.uppercase { text-transform: uppercase; }

a { color: #333333; text-decoration: none; }
a:link { text-decoration: none; }
a:hover { color: #96ca50; text-decoration: none; }
a:active { text-decoration: none; }
a:visited { text-decoration: none; }

.btn { font-size: 16px; line-height: 18px; font-weight: 500; padding: 10px 42px; color: #333333; border: 1px #333333 solid; border-radius: 5px; filter: drop-shadow(0px); box-shadow: none; transition: 0.2s; transition-timing-function: ease-in; }
.btn:hover { transition: 0.2s; transition-timing-function: ease-in; }
.btn:focus { transition: 0.2s; transition-timing-function: ease-in; }

.btn.large { font-size: 21px; line-height: 23px; padding: 10px 45px; }

.btn-green { background: #96ca50; border-color: #96ca50; color: #ffffff; }
.btn-green:hover { background: #85b741!important; border-color: #85b741!important; color: #ffffff!important; }
.btn-green:focus { background: #85b741; border-color: #85b741; color: #ffffff; }
.btn-green:active { background: #85b741!important; border-color: #85b741!important; color: #ffffff!important; }

.btn-pink { background: #cc36a2; border-color: #cc36a2; color: #ffffff; }
.btn-pink:hover { background: #ba2f92!important; border-color: #ba2f92!important; color: #ffffff!important; }
.btn-pink:focus { background: #ba2f92; border-color: #ba2f92; color: #ffffff; }
.btn-pink:active { background: #ba2f92!important; border-color: #ba2f92!important; color: #ffffff!important; }


/**
 * Main Header/Navigation
 * ========================================================================== */	

header .header { background: #ffffff; padding: 25px 15px; position: fixed; top: 0px; width: 100%; margin: auto; z-index: 50; transition: 0.2s; transition-timing-function: ease-in; }
    header .header .col { font-size: 0px; }
    header .header img { width: 180px; margin-top: 0px; float: left; transition: 0.2s; transition-timing-function: ease-in; }
    header .header h5 { font-size: 30px; line-height: 36px; font-weight: 700; float: right; margin-top: 5px; margin-left: 50px; }
    header .header h5 a { color: #003366; }
    header .header .navigation { margin-top: 12px; margin-bottom: 0px; list-style: none; float: right; transition: 0.2s; transition-timing-function: ease-in;  }
        header .header .navigation li { font-size: 18px; font-weight: 400; display: inline-block; margin-left: 55px; }
        header .header .navigation li a { color: #333333; padding-bottom: 15px; }
        header .header .navigation li a:hover { color: #003366; }
        header .header .navigation .nav-item { font-size: 18px; font-weight: 400; display: inline-block; margin-left: 60px; }
        header .header .navigation .nav-item a { color: #333333; border-top-left-radius: 5px; border-top-right-radius: 5px; padding: 15px 0px; transition: 0.2s; transition-timing-function: ease-in; }
        header .header .navigation .nav-item a:hover { color: #cc36a2; transition: 0.2s; transition-timing-function: ease-in; }
        header .header .navigation .nav-item.dropdown:hover a { color: #cc36a2; background: #fff!important; }

    header .header .nav-elements { display: none; margin-top: 4px; margin-left: 60px; float: right; transition: 0.2s; transition-timing-function: ease-in; }
        header .header .nav-elements .nav-icon { color: #0e0048; border: 1px #0e0048 solid; border-radius: 50%; height: 45px; width: 45px; font-size: 23px; padding-top: 5px; margin-left: 12px; text-align: center; float: right; transition: 0.2s; transition-timing-function: ease-in; }
        header .header .nav-elements .nav-icon:hover { background: #0e0048; border-color: #0e0048; color: #ffffff; cursor: pointer; transition: 0.2s; transition-timing-function: ease-in; }
        header .header .nav-elements .btn { margin-left: 15px; }


header .header.scrolled { background: #ffffff; padding: 10px 15px 20px 15px; box-shadow: rgba(0,0,0,.117647) 0 1px 3px; transition: 0.2s; transition-timing-function: ease-in; }
    header .header.scrolled img { width: 160px; margin-top: 12px; transition: 0.2s; transition-timing-function: ease-in;  }
    header .header.scrolled .navigation { margin-top: 20px; transition: 0.2s; transition-timing-function: ease-in; }
    header .header.scrolled .nav-elements { margin-top: 14px; transition: 0.2s; transition-timing-function: ease-in; }


        

/* === Menu Modal =============================== */

.menu-modal { background: #ffffff; opacity: 0; visibility: hidden; position: fixed; width: 100%; height: 100%; min-height: 100vh; padding: 0px 0px 0px 0px; overflow: auto; top: 0px; transition: 0.4s; transition-timing-function: ease-in; z-index: 0; }
.menu-modal.active { z-index: 9998;  opacity: 1; visibility: visible; top: 0px; transition: 0.4s; transition-timing-function: ease-in; }

    .menu-modal .header-content { padding: 25px 27px; }
    .menu-modal.scrolled .header-content { padding-top: 18px; padding-bottom: 18px; }
        .menu-modal .header-content .logo { width: 180px; float: left; transition: 0.2s; transition-timing-function: ease-in; }

        .menu-modal .buttons { margin-top: 0px; }
            .menu-modal .buttons .icon-circle { width: 45px; height: 45px; border: 1px #0e0048 solid; border-radius: 50%; margin-top: 3px; margin-left: 15px; text-align: center; float: right; overflow: hidden; position: relative; transition: 0.2s; transition-timing-function: ease-in; }
            .menu-modal .buttons .icon-circle:hover { background: #0e0048; border-color: #0e0048; }
            .menu-modal .buttons .icon-circle i { color: #0e0048; font-size: 26px; top: 8px; left: 0px; right: 0px; position: absolute; transition: 0.2s; transition-timing-function: ease-in; } 
            .menu-modal .buttons .icon-circle:hover i { color: #ffffff; transition: 0.2s; transition-timing-function: ease-in; } 

            
    .menu-modal .link-content { padding: 0px 30px 20px 30px; }
    .menu-modal .link-content .accordion { background: none; border-radius: 0px; margin-bottom: 25px; }
        .menu-modal .link-content .accordion .accordion-item { background: none; border: 0px; border-bottom: 1px #7f7f7f solid; border-radius: 0px; }
        .menu-modal .link-content .accordion .accordion-item .accordion-header { background: none; font-size: 22px; line-height: 26px; }
        .menu-modal .link-content .accordion .accordion-item .accordion-header .accordion-button { background: none; color: #333333; font-size: 19px; line-height: 24px; font-weight: 600; box-shadow: none; padding: 15px 0px; }
        .menu-modal .link-content .accordion .accordion-item .accordion-header .accordion-button:hover { color: #cc36a2; }
        .menu-modal .link-content .accordion .accordion-item .accordion-header .accordion-button::after { background: none!important; font-family: "Font Awesome 5 Pro"; content: "\2b"; }
        .menu-modal .link-content .accordion .accordion-item .accordion-header .accordion-button:not(.collapsed)::after { background: none!important; font-family: "Font Awesome 5 Pro"; content: "\f068"; }
        .menu-modal .link-content .accordion .accordion-item .accordion-header .accordion-button.link::after { display: none!important; }
        .menu-modal .link-content .accordion .accordion-item .accordion-body { padding: 0px 0px 25px 0px; }
            .menu-modal .link-content .accordion .accordion-item .accordion-body ul { list-style: none; padding: 0px; margin: 0px; }
            .menu-modal .link-content .accordion .accordion-item .accordion-body ul li { font-size: 17px; line-height: 23px; padding: 5px 0px; font-weight: 500; }
            .menu-modal .link-content .accordion .accordion-item .accordion-body ul li a { color: #666666;}
            .menu-modal .link-content .accordion .accordion-item .accordion-body ul li a:hover { color: #cc36a2; }
            .menu-modal .link-content .accordion .accordion-item .accordion-body ul li.title { font-size: 18px; line-height: 24px; padding-top: 15px!important; margin-top: 15px; border-top: 1px #cccccc solid; }
            .menu-modal .link-content .accordion .accordion-item .accordion-body ul li.title a { color: #cc36a2; }
            .menu-modal .link-content .accordion .accordion-item .accordion-body ul li.title:first-child { border: 0px; padding-top: 5px!important; margin-top: 0px!important; }
            .menu-modal .link-content .accordion .accordion-item .accordion-body ul li:first-child { padding-top: 0px; }

        .menu-modal .link-content .btn { width: 100%; max-width: 400px; font-size: 18px; line-height: 19px; padding: 12px 18px; }

        .menu-modal .link-content .social-icons { margin: 38px 0px 0px 0px; }
            .menu-modal .link-content .social-icons li a { border-color: #ffffff; }
            .menu-modal .link-content .social-icons li a i { color: #ffffff; }
            .menu-modal .link-content .social-icons li a:hover { background: #ffffff; border-color: #ffffff; }
            .menu-modal .link-content .social-icons li a:hover i { color: #333333; }


/**
 * Hero Panel
 * ========================================================================== */

.hero-panel { position: relative; }

    .hero-panel .container { z-index: 1; position: relative; }
    .hero-panel .content h1 { color: #ffffff; margin-bottom: 0px; }
    .hero-panel .swiper-slide { background-color: #0e0048; padding: 90px 20px 150px 20px; margin-top: 101px; background-position: center -150px; background-repeat: no-repeat; overflow: hidden; position: relative; }

    .hero-panel .side-image { width: 620px; height: 620px; background-size: 620px; background-position: center 70px; border-radius: 50%; position: absolute; right: -30px; top: -200px; }

    .hero-panel .swiper { margin-top: 100px; z-index: 1; }
    .hero-panel .slider.container { position: relative; z-index: 1; }

    .hero-panel .swiper-pagination { top: -80px; left: 10px; position: absolute; text-align: left; z-index: 2; }
        .hero-panel .swiper-pagination .swiper-pagination-bullet { background: none; width: 40px; height: 9px; border: 1px #cccccc solid; border-radius: 0px; margin: 0px 12px 0px 0px; opacity: 1; }
        .hero-panel .swiper-pagination .swiper-pagination-bullet-active { background: #cc36a2; border-color: #cc36a2; width: 90px; }

/**
 * Content Panel
 * ========================================================================== */

.content-panel { padding: 40px 20px 40px 20px; text-align: center; position: relative; }
    .content-panel p { font-size: 20px; line-height: 28px; }

    
/**
 * Internal Header Panel
 * ========================================================================== */

.internal-header { background: #0e0048; min-height: 120px; padding: 60px 0px 60px 0px; margin-top: 101px; text-align: center; position: relative; }
    .internal-header h1 { color: #ffffff; margin: 0px; }

/**
 * Internal Panel
 * ========================================================================== */   

.internal-panel { background: #ffffff; padding: 70px 15px; position: relative; }
    .internal-panel .content.reduced { max-width: 900px; margin: auto; }
    .internal-panel .content { color: #666666; font-size: 24px; line-height: 32px; font-weight: 300; }
        .internal-panel .content h4 { color: #333366; margin-bottom: 12px; }
        .internal-panel .content p + h4 { margin-top: 30px; }
        .internal-panel .content h5 { color: #333366; margin-bottom: 12px; }
        .internal-panel .content h6 { color: #66ccff; font-size: 27px; line-height: 34px; margin-bottom: 8px; }
        .internal-panel .content p + h5 { margin-top: 30px; }
        .internal-panel .content p { font-size: 18px; line-height: 26px; margin-bottom: 20px; }
        .internal-panel .content ul { padding: 0px; margin-top: 10px; margin-bottom: 20px; list-style: none; }
        .internal-panel .content ol { padding: 0px; margin-top: 10px; margin-bottom: 20px; list-style-position: inside; }
        .internal-panel .content li:first-child { border-top: 1px #cccccc solid; }
        .internal-panel .content li { font-size: 24px; line-height: 32px; border-bottom: 1px #cccccc solid; padding: 12px 0px; }
        .internal-panel .content li::marker { display: inline-block; }
        .internal-panel .content .lightgreybg { background: #eeeeee; padding: 25px; margin-bottom: 30px; margin-top: 30px; }
        .internal-panel .content .table { margin-bottom: 35px; }
        .internal-panel .content .table td { color: #666666; font-size: 16px; line-height: 22px; border: 1px #e2e2e2 solid; }
        .internal-panel .content .table td.green { background: #96ca50; border-color: #e5e5e5; color: #ffffff; font-weight: 600; }
        .internal-panel .content p + .table-responsive { margin-top: 35px; }
        .internal-panel.form { padding-left: 20px; padding-right: 20px; padding-bottom: 100px; }

        .internal-panel .content .btn { margin: 10px auto auto auto; }

/**
 * Boxes Panel
 * ========================================================================== */

.boxes-panel { padding: 0px 20px 80px 20px; position: relative; }

    .boxes-panel .cards { display: flex; gap: 24px; margin: auto; }

    /* Base state */
    .boxes-panel .card { min-height: 500px; flex: 1; background: white; border-radius: 8px; overflow: hidden; transition: flex 0.5s ease; display: flex; align-items: flex-end; text-align: center; }
        .boxes-panel .card h2 { font-size: 24px; line-height: 30px; margin: 15px 0px 0px 0px; }
        .boxes-panel .card p { font-size: 16px; line-height: 24px; }
        .boxes-panel .card img { height: 60px; max-width: 100%; }
        .boxes-panel .card .btn { margin-top: 10px; }
        .boxes-panel .card .background-image { background-color: #000000; background-repeat: no-repeat; background-position: top center; background-size: cover; width: 100%; height: 390px; left: 0px; right: 0px; bottom: 0px; position: absolute; }

    /* 🔥 Middle card expanded by default */
    .boxes-panel .card.center { flex: 1.9; }

    /* When hovering the container */
    .boxes-panel .cards:hover .card { flex: 1; }

    /* Hovered card always wins */
    .boxes-panel .cards .card:hover {  flex: 1.9; }


    /* Content styling */
    .boxes-panel .main-content { background: #ffffff; width: 100%; padding: 34px 0px 40px 0px; position: relative; z-index: 1; 
        mask-image: url('../assets/box-mask.svg'); -webkit-mask-image: url('../assets/box-mask.svg'); mask-position: bottom center; -webkit-mask-position: bottom center; mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; mask-size: 100%; -webkit-mask-size: 100%; }
    .boxes-panel .card-content { width: 100%; padding: 0px 0px; }
    .boxes-panel .hover-content { width: 510px; top: 160px; left: 0px; right: 0px; margin: auto; position: absolute; visibility: hidden; opacity: 0; z-index: 2; transition: 0s; transition-timing-function: ease-in; transition-delay: 0s; }

    .boxes-panel .card.active .card-content { visibility: hidden; opacity: 0; transition: 0.6s; transition-timing-function: ease-in; }
    .boxes-panel .card.active .hover-content { visibility: visible; opacity: 1; transition: 0.6s; transition-timing-function: ease-in; transition-delay: 0.2s; }

    .boxes-panel .card.center .card-content { text-align: center; }
    .boxes-panel .card p { color: #555; line-height: 1.5; }


/**
 * Footer
 * ========================================================================== */
  
footer .footer-top { padding: 30px 20px 0px 20px; border-top: 1px #cccccc solid; }
    footer .footer-top p { font-size: 15px; line-height: 21px; margin-bottom: 0px; }

footer .footer-bottom { padding: 20px 20px 30px 20px; }
    footer .footer-bottom p { font-size: 17px; line-height: 23px; margin-bottom: 0px; }
        footer .footer-bottom p a { padding: 0px 12px; }
        footer .footer-bottom p a:hover { color: #cc36a2; }

/**
 *  Resolutions
 * ========================================================================== */

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

    .hero-panel .side-image { width: 520px; height: 520px; background-size: 520px; background-position: center 40px; right: 30px; top: -130px; }

}

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

    .boxes-panel .cards { display: block; gap: 24px; }

        .boxes-panel .card { min-height: auto; max-width: 600px; margin: auto auto 30px auto; }
        .boxes-panel .card .background-image { display: none; }
        .boxes-panel .main-content { padding: 34px 0px 20px 0px; }
        .boxes-panel .hover-content { padding: 0px 25px 34px 25px; width: auto; top: auto; left: auto; right: auto; margin: auto; position: relative; visibility: visible; opacity: 1; }

    .content-panel p { font-size: 16px; line-height: 24px; }

}

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

    .hero-panel .swiper-pagination { left: 32px; }

}


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

    .hero-panel .content h1 { font-size: 32px; line-height: 40px; }
    .hero-panel .swiper-slide { padding: 70px 20px 130px 20px; }

    .hero-panel .side-image { width: 460px; height: 460px; background-size: 460px; background-position: center 40px; right: 30px; top: -120px; }

}

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

    .hero-panel .side-image { right: -30px; }
        
}


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

    header .header .navigation { display: none; }
    header .header .nav-elements { display: block; }

    .hero-panel .content h1 { font-size: 28px; line-height: 38px; }
    .hero-panel .side-image { width: 400px; height: 400px; background-size: 410px; background-position: center 30px; right: -50px; top: -100px; }

    .content-panel p br { display: none; }

}

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

    .hero-panel .content h1 { font-size: 26px; line-height: 36px; }

    footer .footer-bottom p { font-size: 0px; line-height: 0px; }
    footer .footer-bottom p a { font-size: 17px; line-height: 23px; display: block; margin-bottom: 5px; }

}



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

    .hero-panel .content h1 { font-size: 24px; line-height: 32px; text-align: center; }
    .hero-panel .swiper-slide { padding: 60px 20px 320px 20px; }
    .hero-panel .swiper-pagination { left: 0px; right: 0px; top: -295px; text-align: center; }
    .hero-panel .side-image { width: 240px; height: 240px; background-size: cover; background-position: center 0px; left: 0px; right: 0px; top: auto; bottom: -350px; margin: auto; }

    .internal-header { padding: 50px 0px 50px 0px; }
        .internal-header h1 { font-size: 32px; line-height: 40px; }

    .internal-panel { padding: 60px 15px; }
        .internal-panel .content p { font-size: 16px; line-height: 24px; }

}

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

    footer .footer-top p { font-size: 14px; line-height: 20px; }

}



/**
 *  Slider
 * ========================================================================== */


 .swiper * { -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Edge, Opera and Firefox */ }

/* Very important for having a smooth transitions. */
.swiper-free-mode > .swiper-wrapper {
    transition-timing-function: linear;
}