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

/*====================================
Global
====================================*/

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

html{
    scroll-behavior:smooth;
}

body{
    font-family:'Outfit',sans-serif;
    background:#f7f9fc;
    color:#1b2330;
    overflow-x:hidden;
}

a{
    text-decoration:none;
}

ul{
    list-style:none;
}

img{
    max-width:100%;
    display:block;
}

.container{
    width:92%;
    max-width:1400px;
    margin:auto;
}


    /*==================================================
ABOUT PAGE
==================================================*/

.prm-page-banner{

    margin-top:130px;

    position:relative;

    padding:170px 0;

    overflow:hidden;

    background-image:
    linear-gradient(rgba(9, 31, 61, 0.55),rgba(9, 35, 69, 0.42)),
    url("assets/images/golden-elevators.avif");

    background-size:cover;

    background-position:center;

    background-repeat:no-repeat;

    background-attachment:fixed;

}

/* Optional Dark Overlay */

.prm-page-banner::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:100%;

    background:linear-gradient(
        90deg,
        rgba(8,27,52,.35),
        rgba(8,27,52,.10)
    );

}

/* Keep Content Above Overlay */

.prm-page-content{

    position:relative;

    z-index:2;

}

.prm-page-banner::before{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

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

    border-radius:50%;

    top:-220px;

    right:-180px;

}

.prm-page-banner::after{

    content:"";

    position:absolute;

    width:320px;

    height:320px;

    border-radius:50%;

    background:rgba(15,126,248,.12);

    left:-100px;

    bottom:-100px;

}

.prm-page-content{

    position:relative;

    z-index:5;

    text-align:center;

}

.prm-page-content h1{

    font-size:58px;

    color:#fff;

    font-weight:700;

    margin-bottom:20px;

    letter-spacing:-1px;

}

.prm-page-content ul{

    display:inline-flex;

    align-items:center;

    gap:15px;

    list-style:none;

    padding:0;

    margin:0;

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

    backdrop-filter:blur(10px);

    padding:14px 28px;

    border-radius:50px;

}

.prm-page-content ul li{

    color:#fff;

    font-size:15px;

    font-weight:500;

}

.prm-page-content ul li:not(:last-child)::after{

    content:"/";

    margin-left:15px;

    color:#BC9A75
;

}

.prm-page-content ul li a{

    color:#BC9A75
;

    text-decoration:none;

    transition:.35s;

}

.prm-page-content ul li a:hover{

    color:#fff;

}

/*==================================================
ABOUT SECTION
==================================================*/

.prm-inner-about{

    padding:40px 0;

    background:#ffffff;

    position:relative;

    overflow:hidden;

}

.prm-inner-about::before{

    content:"";

    position:absolute;

    width:600px;

    height:600px;

    background:#f5f9ff;

    border-radius:50%;

    right:-250px;

    top:-250px;

}

.prm-inner-wrap{

    position:relative;

    z-index:2;

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

    align-items:center;

}

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

.prm-inner-images{

    position:relative;

}

.prm-main-img{

    width:100%;

    display:block;

    border-radius:30px;

    box-shadow:0 30px 80px rgba(0,0,0,.12);

}

.prm-exp{

    position:absolute;

    bottom:35px;

    left:-35px;

    width:190px;

    padding:28px;

    text-align:center;

    border-radius:25px;

    background:#BC9A75
;

    color:#fff;

    box-shadow:#ce8c46
;

}

.prm-exp h2{

    margin:0;

    font-size:48px;

    font-weight:700;

}

.prm-exp span{

    display:block;

    margin-top:10px;

    font-size:15px;

    line-height:1.6;

}

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

.prm-inner-content{

    position:relative;

}

.prm-subtitle{

    display:inline-flex;

    align-items:center;

    gap:10px;

    padding:10px 22px;

    border-radius:50px;

    background:#EAF4FF;

    color:#BC9A75
;

    font-size:14px;

    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;

    margin-bottom:25px;

}

.prm-subtitle::before{

    content:"";

    width:10px;

    height:10px;

    border-radius:50%;

    background:#BC9A75;

}

.prm-inner-content h2{

    font-size:28px;

    line-height:1.2;

    font-weight:700;

    color:#1A314E
;

    margin-bottom:6px;

}

.prm-inner-content p{

    font-size:17px;

    color:#667085;

    line-height:1.9;

    margin-bottom:20px;

}

/*==================================================
FEATURES
==================================================*/

.prm-features{

    display:grid;

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

    gap:18px;

    margin:40px 0;

}

.prm-feature{

    display:flex;

    align-items:center;

    gap:15px;

    padding:18px 22px;

    background:#fff;

    border-radius:16px;

    border:1px solid #EEF3F9;

    transition:.35s;

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

}

.prm-feature:hover{

    transform:translateY(-8px);

    box-shadow:0 18px 45px rgba(0,0,0,.10);

    border-color:#BC9A75
;

}

.prm-feature i{

    width:48px;

    height:48px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#dfd9d3;

    color:#fff;

    font-size:18px;

    flex-shrink:0;

}

.prm-feature span{

    color:#1A314E
;

    font-size:16px;

    font-weight:600;

}

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

.prm-about-btn{

    display:inline-flex;

    align-items:center;

    gap:12px;

    padding:18px 38px;

    background:#BC9A75;

    color:#fff;

    text-decoration:none;

    border-radius:60px;

    font-size:16px;

    font-weight:600;

    transition:.35s;

    box-shadow:0 18px 40px #BC9A75;

}

.prm-about-btn::after{

    content:"\f061";

    font-family:"Font Awesome 6 Free";

    font-weight:900;

    transition:.35s;

}

.prm-about-btn:hover{

    color:#fff;

    transform:translateY(-5px);

    box-shadow:0 22px 50px rgba(15,126,248,.40);

}

.prm-about-btn:hover::after{

    transform:translateX(6px);

}

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

.prm-inner-content::before{

    content:"";

    position:absolute;

    top:-40px;

    right:-20px;

    width:100px;

    height:100px;

    border-radius:50%;

    background:rgba(15,126,248,.06);

    z-index:-1;

}

.prm-inner-content::after{

    content:"";

    position:absolute;

    bottom:-30px;

    left:-20px;

    width:60px;

    height:60px;

    border-radius:50%;

    background:rgba(34,200,255,.10);

    z-index:-1;

}

/*==================================================
MISSION & VISION
==================================================*/

.prm-mission{

    padding:120px 0;

    background:#F7FAFE;

    position:relative;

    overflow:hidden;

}

.prm-mission::before{

    content:"";

    position:absolute;

    width:500px;

    height:500px;

    border-radius:50%;

    background:rgba(15,126,248,.05);

    right:-180px;

    top:-180px;

}

.prm-box{

    background:#fff;

    padding:45px 35px;

    border-radius:25px;

    text-align:center;

    transition:.4s;

    height:100%;

    position:relative;

    overflow:hidden;

    border:1px solid #edf2f8;

    box-shadow:0 15px 40px rgba(0,0,0,.05);

}

.prm-box::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:5px;

    background:#BC9A75;

    transform:scaleX(0);

    transition:.4s;

}

.prm-box:hover{

    transform:translateY(-12px);

    box-shadow:0 25px 60px BC9A75;

}

.prm-box:hover::before{

    transform:scaleX(1);

}

.prm-box i{

    width:90px;

    height:90px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin:0 auto 25px;

    border-radius:50%;

    background:linear-gradient(135deg,#BC9A75);

    color:#fff;

    font-size:34px;

    box-shadow:0 15px 35px BC9A75(15,126,248,.30);

}

.prm-box h3{

    font-size:28px;

    color:#BC9A75;

    margin-bottom:18px;

    font-weight:700;

}

.prm-box p{

    color:#667085;

    font-size:16px;

    line-height:1.9;

    margin:0;
    

}

/*==================================================
COUNTER
==================================================*/

.prm-counter-area{

    padding:110px 0;

    background:linear-gradient(135deg#BC9A75);

}

.prm-counter-grid{

    display:grid;

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

    gap:30px;

}

.prm-counter{

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

    backdrop-filter:blur(12px);

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

    border-radius:22px;

    text-align:center;

    padding:45px 25px;

    transition:.35s;

}

.prm-counter:hover{

    transform:translateY(-10px);

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

}

.prm-counter h2{

    font-size:52px;

    color:#fff;

    margin-bottom:10px;

    font-weight:700;

}

.prm-counter p{

    color:rgba(255,255,255,.85);

    margin:0;

    font-size:16px;

}

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

@media(max-width:1200px){

    .prm-inner-wrap{

        gap:60px;

    }

    .prm-inner-content h2{

        font-size:42px;

    }

}

@media(max-width:991px){

    .prm-page-banner{

        margin-top:100px;

        padding:90px 0;

    }

    .prm-page-content h1{

        font-size:44px;

    }

    .prm-inner-wrap{

        grid-template-columns:1fr;

        gap:60px;

    }

    .prm-inner-content{

        text-align:center;

    }

    .prm-features{

        grid-template-columns:1fr;

    }

    .prm-exp{

        left:20px;

        bottom:20px;

    }

    .prm-counter-grid{

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

    }

    .prm-box{

        margin-bottom:30px;

    }

}

@media(max-width:768px){

    .prm-page-banner{

        padding:80px 0;

    }

    .prm-page-content h1{

        font-size:36px;

    }

    .prm-inner-about{

        padding:80px 0;

    }

    .prm-mission{

        padding:80px 0;

    }

    .prm-counter-area{

        padding:80px 0;

    }

    .prm-inner-content h2{

        font-size:34px;

    }

    .prm-counter h2{

        font-size:40px;

    }

}

@media(max-width:576px){

    .prm-page-banner{

        margin-top:90px;

        padding:70px 0;

    }

    .prm-page-content h1{

        font-size:30px;

    }

    .prm-page-content ul{

        padding:10px 20px;

        font-size:14px;

        gap:10px;

    }

    .prm-exp{

        width:140px;

        padding:18px;

    }

    .prm-exp h2{

        font-size:30px;

    }

    .prm-exp span{

        font-size:13px;

    }

    .prm-counter-grid{

        grid-template-columns:1fr;

    }

    .prm-box{

        padding:35px 25px;

    }

    .prm-box i{

        width:75px;

        height:75px;

        font-size:28px;

    }

    .prm-box h3{

        font-size:24px;

    }

    .prm-counter{

        padding:35px 20px;

    }

    .prm-counter h2{

        font-size:34px;

    }

    .prm-counter p{

        font-size:15px;

    }

}






/*=========================================
PRIME RISE HEADER
=========================================*/

.prm-header{

    position:fixed;

    top:20px;

    left:50%;

    transform:translateX(-50%);

    width:94%;

    max-width:1400px;

    z-index:9999;

    transition:.4s ease;

}

.prm-container{

    display:flex;

    align-items:center;

    justify-content:space-between;

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

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.65);

    border-radius:18px;

    padding:14px 30px;

    box-shadow:
    0 15px 45px rgba(8,27,52,.10);

    transition:.4s;

}

/* Sticky */

.prm-header.sticky .prm-container{

    padding:12px 30px;

    box-shadow:
    0 20px 60px rgba(0,0,0,.12);

}

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

.prm-logo{

    flex-shrink:0;

}

.prm-logo img{

    height:60px;

    width:auto;

    display:block;

    transition:.35s;

}

.prm-header.sticky .prm-logo img{

    height:54px;

}

/*=========================================
DESKTOP NAVIGATION
=========================================*/

.prm-navbar{

    margin:auto;

}

.prm-menu{

    display:flex;

    align-items:center;

    gap:38px;

    list-style:none;

    margin:0;

    padding:0;

}

.prm-menu>li{

    position:relative;

}

.prm-menu>li>a{

    position:relative;

    display:flex;

    align-items:center;

    gap:6px;

    color:#1A314E
;

    font-size:16px;

    font-weight:600;

    text-decoration:none;

    transition:.35s;

}

.prm-menu>li>a:hover{

    color:#BC9A75;

}

/* Premium Underline */

.prm-menu>li>a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-8px;

    width:0;

    height:3px;

    border-radius:20px;

    background:linear-gradient(90deg,#BC9A75);

    transition:.35s;

}

.prm-menu>li:hover>a::after{

    width:100%;

}

/*=========================================
RIGHT SIDE
=========================================*/

.prm-header-right{

    display:flex;

    align-items:center;

    gap:15px;

}

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

.prm-call-btn{

    display:flex;

    align-items:center;

    gap:12px;

    text-decoration:none;

    color:#fff;

    padding:14px 26px;

    border-radius:60px;

    background:#BC9A75;

    font-size:15px;

    font-weight:600;

    transition:.35s;

    box-shadow:0 15px 35px #f9be7f
;

}

.prm-call-btn i{

    width:42px;

    height:42px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

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

    font-size:15px;

}

.prm-call-btn:hover{

    color:#fff;

    transform:translateY(-4px);

    box-shadow:0 22px 45px rgba(15,126,248,.38);

}

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

.prm-toggle{

    display:none;

    width:48px;

    height:48px;

    border:none;

    background:linear-gradient(135deg,#BC9A75);

    border-radius:12px;

    cursor:pointer;

    padding:10px;

    flex-direction:column;

    justify-content:center;

    gap:6px;

    transition:.35s;

}

.prm-toggle span{

    width:100%;

    height:3px;

    background:#fff;

    border-radius:20px;

    transition:.35s;

}

.prm-toggle:hover{

    transform:scale(1.05);

}

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

.prm-dropdown{
    position:relative;
}

.prm-dropdown>a i{
    font-size:12px;
    transition:.35s;
}

.prm-dropdown:hover>a i{
    transform:rotate(180deg);
}

/* Dropdown Menu */

.prm-dropdown-menu{

    position:absolute;

    top:115%;

    left:0;

    width:290px;

    background:#fff;

    border-radius:18px;

    padding:12px 0;

    list-style:none;

    margin:0;

    opacity:0;

    visibility:hidden;

    transform:translateY(20px);

    transition:.35s;

    box-shadow:0 20px 60px rgba(0,0,0,.12);

    border:1px solid rgba(0,0,0,.05);

    z-index:999;

}

.prm-dropdown:hover .prm-dropdown-menu{

    opacity:1;

    visibility:visible;

    transform:translateY(0);

}

.prm-dropdown-menu li{

    display:block;

}

.prm-dropdown-menu li a{

    display:block;

    padding:14px 25px;

    color:#1A314E
;

    text-decoration:none;

    font-size:15px;

    font-weight:500;

    transition:.3s;

}

.prm-dropdown-menu li a:hover{

    background:#BC9A75;

    color:#fff;

    padding-left:35px;

}

/* Arrow */

.prm-dropdown-menu::before{

    content:"";

    position:absolute;

    top:-8px;

    left:35px;

    width:16px;

    height:16px;

    background:#fff;

    transform:rotate(45deg);

}

/*=========================================
OVERLAY
=========================================*/

.prm-overlay{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.55);

    opacity:0;

    visibility:hidden;

    transition:.35s;

    z-index:9998;

}

.prm-overlay.active{

    opacity:1;

    visibility:visible;

}

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

.prm-mobile-menu{

    position:fixed;

    top:0;

    right:-380px;

    width:360px;

    max-width:100%;

    height:100vh;

    background:#fff;

    z-index:9999;

    transition:.4s;

    overflow-y:auto;

    box-shadow:-10px 0 40px rgba(0,0,0,.12);

}

.prm-mobile-menu.active{

    right:0;

}

/* Mobile Header */

.prm-mobile-header{

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:25px;

    border-bottom:1px solid #eee;

}

.prm-mobile-header img{

    height:55px;

}

.prm-close{

    width:45px;

    height:45px;

    border:none;

    background:#BC9A75;

    color:#fff;

    border-radius:10px;

    cursor:pointer;

    font-size:18px;

}

/* Menu */

.prm-mobile-menu ul{

    list-style:none;

    padding:25px;

    margin:0;

}

.prm-mobile-menu ul li{

    border-bottom:1px solid #f1f1f1;

}

.prm-mobile-menu ul li:last-child{

    border:none;

}

.prm-mobile-menu ul li a{

    display:block;

    padding:16px 0;

    color:#1A314E
;

    font-size:16px;

    font-weight:600;

    text-decoration:none;

    transition:.3s;

}

.prm-mobile-menu ul li a:hover{

    color:#BC9A75;

}

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

.prm-mobile-drop-btn{

    width:100%;

    display:flex;

    justify-content:space-between;

    align-items:center;

    border:none;

    background:none;

    padding:16px 0;

    font-size:16px;

    font-weight:600;

    color:#1A314E
;

    cursor:pointer;

}

.prm-mobile-drop-btn i{

    transition:.3s;

}

.prm-mobile-dropdown.active .prm-mobile-drop-btn i{

    transform:rotate(180deg);

}

.prm-mobile-submenu{

    display:none;

    padding-left:18px !important;

    padding-top:0 !important;

    padding-bottom:12px !important;

}

.prm-mobile-dropdown.active .prm-mobile-submenu{

    display:block;

}

.prm-mobile-submenu li{

    border:none !important;

}

.prm-mobile-submenu li a{

    padding:10px 0;

    font-size:15px;

    font-weight:500;

    color:#666;

}

.prm-mobile-submenu li a:hover{

    color:#BC9A75;

}

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

.prm-mobile-contact{

    padding:25px;

    border-top:1px solid #eee;

}

.prm-mobile-contact a{

    display:flex;

    align-items:center;

    gap:12px;

    padding:15px 20px;

    margin-bottom:15px;

    border-radius:12px;

    text-decoration:none;

    font-weight:600;

    color:#1A314E
;

    background:#f8f9fc;

    transition:.35s;

}

.prm-mobile-contact a:last-child{

    background:#25D366;

    color:#fff;

}

.prm-mobile-contact a:hover{

    transform:translateX(5px);

}

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

/* Large Laptop */

@media (max-width:1200px){

    .prm-container{

        padding:14px 22px;

    }

    .prm-menu{

        gap:24px;

    }

    .prm-menu>li>a{

        font-size:15px;

    }

    .prm-call-btn{

        padding:12px 20px;

    }

}

/* Tablet */

@media (max-width:991px){

    .prm-header{

        width:96%;

        top:12px;

    }

    .prm-container{

        padding:14px 18px;

        border-radius:16px;

    }

    /* Hide Desktop Menu */

    .prm-navbar{

        display:none;

    }

    /* Hide Desktop Call Button */

    .prm-header-right{

        display:none;

    }

    /* Show Toggle */

    .prm-toggle{

        display:flex;

    }

    .prm-logo img{

        height:52px;

    }

}

/* Mobile */

@media (max-width:768px){

    .prm-header{

        width:96%;

        top:10px;

    }

    .prm-container{

        padding:12px 16px;

        border-radius:14px;

    }

    .prm-logo img{

        height:46px;

    }

    .prm-mobile-menu{

        width:320px;

    }

    .prm-mobile-header{

        padding:20px;

    }

    .prm-mobile-header img{

        height:45px;

    }

    .prm-mobile-menu ul{

        padding:20px;

    }

    .prm-mobile-contact{

        padding:20px;

    }

}

/* Small Mobile */

@media (max-width:480px){

    .prm-header{

        width:98%;

    }

    .prm-container{

        padding:10px 14px;

    }

    .prm-logo img{

        height:40px;

    }

    .prm-toggle{

        width:44px;

        height:44px;

    }

    .prm-mobile-menu{

        width:100%;

    }

}

/*=========================================
TOGGLE ANIMATION
=========================================*/

.prm-toggle.active span:nth-child(1){

    transform:translateY(9px) rotate(45deg);

}

.prm-toggle.active span:nth-child(2){

    opacity:0;

}

.prm-toggle.active span:nth-child(3){

    transform:translateY(-9px) rotate(-45deg);

}

/*=========================================
SMOOTH LINKS
=========================================*/

.prm-menu a,
.prm-mobile-menu a,
.prm-call-btn{

    transition:all .35s ease;

}

/*=========================================
STICKY HEADER EFFECT
=========================================*/

.prm-header.sticky{

    top:10px;

}

.prm-header.sticky .prm-container{

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

    backdrop-filter:blur(20px);

    box-shadow:0 20px 60px rgba(0,0,0,.12);

}

/*=========================================
SCROLLBAR
=========================================*/

.prm-mobile-menu::-webkit-scrollbar{

    width:6px;

}

.prm-mobile-menu::-webkit-scrollbar-thumb{

    background:#BC9A75;

    border-radius:20px;

}

.prm-mobile-menu::-webkit-scrollbar-track{

    background:#f5f5f5;

}

.prm-mobile-menu{
    display:block !important;
    right:0 !important;
    transform:translateX(100%) !important;
    transition:transform .4s ease !important;
}

.prm-mobile-menu.active{
    transform:translateX(0) !important;
}
/*=========================================
PRIME RISE PREMIUM HERO
=========================================*/

.prm-hero-section{
    position:relative;
    min-height:100vh;
    display:flex;
    align-items:center;
    overflow:hidden;

    /* Leave space for sticky icons */
    padding:130px 70px 80px;

    background:#081B34;
}

/*==============================
Background Image
==============================*/

.prm-hero-bg{
    position:absolute;
    inset:0;
    z-index:1;
}

.prm-hero-bg img{

    width:100%;

    height:100%;

    object-fit:cover;

}

/*==============================
Dark Overlay
==============================*/

.prm-hero-overlay{
    position:absolute;
    inset:0;
    z-index:2;
    background:linear-gradient(
        90deg,
        rgba(5,20,40,.92) 0%,
        rgba(5,20,40,.85) 45%,
        rgba(5,20,40,.55) 100%
    );
}

/* Decorative Shapes */

.prm-hero-section::before{

    content:"";

    position:absolute;

    width:520px;

    height:520px;

    border-radius:50%;

    background:#BC9A75;

    opacity:.08;

    left:-220px;

    top:-220px;

    z-index:2;

}

.prm-hero-section::after{

    content:"";

    position:absolute;

    width:380px;

    height:380px;

    border-radius:50%;

    background:#23C6FF;

    opacity:.08;

    right:-150px;

    bottom:-150px;

    z-index:2;

}

/*==============================
Container
==============================*/

.prm-hero-section .container{

    position:relative;

    z-index:10;

    max-width:1320px;

    width:100%;

    margin:auto;

    padding:0 15px;

}

/*==============================
Layout
==============================*/

.prm-hero-wrap{

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:center;

    gap:60px;

    min-height:650px;

}

/*==============================
Left Content
==============================*/

.prm-hero-content{

    color:#fff;

}

.prm-hero-tag{

    display:inline-flex;

    align-items:center;

    gap:10px;

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

    border:1px solid rgba(255,255,255,.15);

    backdrop-filter:blur(10px);

    padding:12px 24px;

    border-radius:50px;

    font-size:14px;

    font-weight:600;

    margin-bottom:30px;

}

.prm-hero-tag i{

    color:#22C8FF;

}

/*==============================
Heading
==============================*/

.prm-hero-content h1{

    font-size:34px;

    font-weight:700;

    line-height:1;

    margin:0 0 25px;

    color:#fff;

    letter-spacing:-1px;

}

.prm-hero-content h1 span{

    display:block;
 
    color:#BC9A75
;

}

/*==============================
Description
==============================*/

.prm-hero-content p{

    font-size:12px;

    line-height:1.5;

    color:rgba(255,255,255,.82);

    margin-bottom:40px;

    max-width:620px;

}

/*=========================================
HERO BUTTONS
=========================================*/
.prm-hero-buttons{

    display:flex;

    gap:20px;

    margin-top:10px;

}

.prm-btn-primary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:18px 40px;

    background:linear-gradient(135deg,#BC9A75);

    color:#fff;

    text-decoration:none;

    font-size:16px;

    font-weight:700;

    border-radius:60px;

    transition:.4s;

    box-shadow:0 15px 40px rgba(15,126,248,.35);

}

.prm-btn-primary:hover{

    transform:translateY(-6px);

    color:#fff;

    box-shadow:0 25px 50px rgba(15,126,248,.45);

}

.prm-btn-secondary{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:18px 40px;

    border:2px solid rgba(255,255,255,.35);

    color:#fff;

    text-decoration:none;

    font-size:16px;

    font-weight:700;

    border-radius:60px;

    transition:.4s;

    backdrop-filter:blur(12px);

}

.prm-btn-secondary:hover{

    background:#fff;

    color:#BC9A75;

    border-color:#fff;

}

/*=========================================
COUNTERS
=========================================*/

.prm-hero-counter{

    display:flex;

    gap:22px;

    flex-wrap:wrap;

}

.prm-counter-box{

    min-width:150px;

    padding:22px 26px;

    border-radius:18px;

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

    backdrop-filter:blur(12px);

    border:1px solid rgba(255,255,255,.10);

    transition:.35s;

}

.prm-counter-box:hover{

    transform:translateY(-8px);

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

}

.prm-counter-box h3{

    color:#22C8FF;

    font-size:36px;

    font-weight:800;

    margin-bottom:8px;

}

.prm-counter-box p{

    color:#fff;

    font-size:15px;

    margin:0;

    line-height:1.5;

}

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

.prm-hero-image{

    display:flex;

    justify-content:center;

    align-items:center;

}

.prm-hero-image img{

    width:100%;

    max-width:650px;

    height:auto;

}

/*=========================================
FLOATING CARDS
=========================================*/

.prm-floating-card{

    position:absolute;

    display:flex;

    align-items:center;

    gap:15px;

    padding:18px 22px;

    min-width:240px;

    border-radius:18px;

    background:#fff;

    box-shadow:0 25px 60px rgba(0,0,0,.18);

    animation:floatCard 4s ease-in-out infinite;

}

.prm-floating-card i{

    width:55px;

    height:55px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:linear-gradient(135deg,#BC9A75);

    color:#fff;

    font-size:22px;

}

.prm-floating-card h4{

    margin:0 0 5px;

    color:#1A314E
;

    font-size:18px;

    font-weight:700;

}

.prm-floating-card p{

    margin:0;

    color:#666;

    font-size:14px;

}

/* Card Positions */

.card-one{

    top:12%;

    left:-40px;

}

.card-two{

    bottom:12%;

    right:0;

}

/*=========================================
ANIMATIONS
=========================================*/

@keyframes heroFloat{

    0%{

        transform:translateY(0px);

    }

    50%{

        transform:translateY(-18px);

    }

    100%{

        transform:translateY(0px);

    }

}

@keyframes floatCard{

    0%{

        transform:translateY(0px);

    }

    50%{

        transform:translateY(-10px);

    }

    100%{

        transform:translateY(0px);

    }

}
/*=========================================
SCROLL INDICATOR
=========================================*/

.prm-scroll{

    position:absolute;

    left:50%;

    bottom:35px;

    transform:translateX(-50%);

    z-index:20;

}

.prm-scroll a{

    display:flex;

    justify-content:center;

    align-items:flex-start;

    width:34px;

    height:58px;

    border:2px solid rgba(255,255,255,.45);

    border-radius:30px;

    text-decoration:none;

    padding-top:10px;

}

.prm-scroll span{

    width:6px;

    height:12px;

    background:#22C8FF;

    border-radius:10px;

    animation:scrollMove 2s infinite;

}

@keyframes scrollMove{

    0%{

        transform:translateY(0);

        opacity:1;

    }

    100%{

        transform:translateY(20px);

        opacity:0;

    }

}

/*=========================================
LARGE SCREEN
=========================================*/

@media(max-width:1400px){

    .prm-hero-content h1{

        font-size:60px;

    }

    .prm-hero-image img{

        max-width:620px;

    }

}

/*=========================================
LAPTOP
=========================================*/

@media(max-width:1200px){

    .prm-hero-wrap{

        gap:3px;

    }

    .prm-hero-content h1{

        font-size:52px;

    }

    .prm-hero-image img{

        max-width:560px;

    }

    .card-one{

        left:0;

    }

}

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

@media(max-width:991px){

    .prm-hero-section{

        padding:120px 0 80px;

        min-height:auto;

    }

    .prm-hero-wrap{

        grid-template-columns:1fr;

        gap:60px;

        text-align:center;

        min-height:auto;

    }

    .prm-hero-content p{

        margin:0 auto 40px;

    }

    .prm-hero-buttons{

        justify-content:center;

    }

    .prm-hero-counter{

        justify-content:center;

    }

    .prm-hero-image{

        justify-content:center;

    }

    .prm-hero-image img{

        max-width:500px;

    }

    .card-one{

        top:5%;

        left:20px;

    }

    .card-two{

        bottom:5%;

        right:20px;

    }

}

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

@media (max-width:1200px){

.prm-hero-section{

padding:120px 50px 70px;

}

.prm-hero-content h1{

font-size:48px;

}

.prm-hero-image img{

max-width:520px;

}

}

@media (max-width:992px){

.prm-hero-section{

padding:120px 40px 70px;

}

.prm-hero-wrap{

grid-template-columns:1fr;

text-align:center;

gap:40px;

}

.prm-hero-content{

order:2;

}

.prm-hero-image{

order:1;

}

.prm-hero-content p{

margin:auto auto 35px;

}

.prm-hero-buttons{

justify-content:center;

}

.prm-hero-image img{

max-width:450px;

}

}

@media (max-width:768px){

.prm-hero-section{

padding:110px 30px 60px;

}

.prm-hero-content h1{

font-size:38px;

}

.prm-hero-content p{

font-size:16px;

}

.prm-hero-image img{

max-width:330px;

}

.prm-hero-buttons{

justify-content:center;

}

}

@media (max-width:576px){

.prm-hero-section{

padding:100px 22px 50px;

}

.prm-hero-content h1{

font-size:32px;

}

.prm-hero-content p{

font-size:15px;

line-height:1.7;

}

.prm-btn-secondary{

width:100%;

text-align:center;

}

.prm-hero-image img{

max-width:280px;

}

}

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

@media(max-width:480px){

    .prm-hero-section{

        padding:100px 0 60px;

    }

    .prm-hero-content h1{

        font-size:34px;

    }

    .prm-hero-image img{

        max-width:320px;

    }

    .prm-hero-counter{

        gap:15px;

    }

}

/*=========================================
PREMIUM ABOUT SECTION
=========================================*/

.prm-about-section{

    padding:120px 0;

    background:#fff;

    overflow:hidden;

}

.prm-about-wrapper{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:80px;

    align-items:center;

}

/* Images */

.prm-about-images{

    position:relative;

}

.prm-main-image img{

    width:100%;

    border-radius:25px;

    display:block;

    box-shadow:0 25px 60px rgba(0,0,0,.12);

}

.prm-small-image{

    position:absolute;

    right:-40px;

    bottom:40px;

    width:240px;

}

.prm-small-image img{

    width:100%;

    border-radius:20px;

    border:8px solid #fff;

    box-shadow:0 20px 50px rgba(0,0,0,.15);

}

/* Experience */

.prm-exp-box{

    position:absolute;

    left:-25px;

    top:40px;

    width:170px;

    background:linear-gradient(135deg,#BC9A75);

    border-radius:20px;

    text-align:center;

    color:#fff;

    padding:28px 20px;

    box-shadow:0 25px 50px rgba(15,126,248,.35);

}

.prm-exp-box h2{

    font-size:44px;

    margin:0;

    font-weight:800;

}

.prm-exp-box span{

    display:block;

    margin-top:8px;

    font-size:15px;

}

/* Content */

.prm-about-tag{

    display:inline-block;

    background:#EAF4FF;

    color:#BC9A75
;

    padding:10px 22px;

    border-radius:40px;

    font-weight:700;

    margin-bottom:20px;

}

.prm-about-content h2{

    font-size:34px;

    line-height:1.1;

    color:#1A314E
;

    margin-bottom:10px;

}

.prm-about-content p{

    font-size:17px;

    line-height:1.5;

    color:#667085;

    margin-bottom:10px;

}

/* Features */

.prm-about-features{

    display:grid;

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

    gap:20px;

    margin-bottom:40px;

}

.prm-feature{

    display:flex;

    align-items:center;

    gap:12px;

    font-weight:600;

    color:#1A314E
;

}

.prm-feature i{

    color:#BC9A75
;

    font-size:20px;

}

/* Bottom */

.prm-about-bottom{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:30px;

    flex-wrap:wrap;

}

.prm-about-btn{

    background:#BC9A75;

    color:#fff;

    text-decoration:none;

    padding:18px 38px;

    border-radius:50px;

    font-weight:700;

    transition:.35s;

    box-shadow:0 20px 40px #efc89d;

}

.prm-about-btn:hover{

    transform:translateY(-5px);

    color:#fff;

}

.prm-about-call{

    display:flex;

    align-items:center;

    gap:15px;

}

.prm-about-call i{

    width:60px;

    height:60px;

    border-radius:50%;

    background:#BC9A75;

    color:#fff;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:22px;

}

.prm-about-call span{

    display:block;

    color:#777;

    font-size:14px;

}

.prm-about-call h4{

    margin:4px 0 0;

    color:#1A314E
;

    font-size:22px;

}

.prm-about-section {
        padding: 30px 0px;
    background: rgb(255, 255, 255);
    overflow: hidden;
}

/* Responsive */

@media(max-width:991px){

    .prm-about-wrapper{

        grid-template-columns:1fr;

        gap:60px;

    }

    .prm-small-image{

        right:0;

        width:180px;

    }

    .prm-about-content{

        text-align:center;

    }

    .prm-about-features{

        grid-template-columns:1fr;

    }

    .prm-about-bottom{

        justify-content:center;

    }

}

@media(max-width:576px){

    .prm-about-section{

        padding:80px 0;

    }

    .prm-about-content h2{

        font-size:34px;

    }

    .prm-small-image{

        display:none;

    }

    .prm-exp-box{

        width:130px;

        left:10px;

        top:10px;

        padding:18px;

    }

    .prm-exp-box h2{

        font-size:30px;

    }

}
/*=====================================
PRODUCTS SECTION
======================================*/

.products-section{

    padding:20px 0;

    background:#f7f9fc;

}

.products-grid{

    display:grid;

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

    gap:25px;

    margin-top:60px;

}

/* Card */

.product-card{

    position:relative;

    background:#fff;

    padding:35px 28px;

    border-radius:22px;

    overflow:hidden;

    text-align:center;

    transition:.4s;

    border:1px solid #edf2f8;

    box-shadow:0 12px 30px rgba(0,0,0,.05);

}

.product-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:5px;

    transform:scaleX(0);

    transform-origin:left;

    transition:.4s;

    background:#BC9A75;

}

.product-card:hover::before{

    transform:scaleX(1);

}

.product-card:hover{

    transform:translateY(-10px);

    box-shadow:0 25px 60px rgba(15,126,248,.18);

}

/* Icon */

.product-icon{

    width:82px;

    height:82px;

    margin:auto;

    border-radius:22px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:linear-gradient(135deg,#BC9A75);

    color:#fff;

    font-size:32px;

    transition:.4s;

    margin-bottom:25px;

}

.product-card:hover .product-icon{

    transform:rotate(-8deg) scale(1.08);

}

/* Title */

.product-card h3{

    font-size:22px;

    color:#1A314E
;

    margin-bottom:15px;

    font-weight:700;

}

/* Text */

.product-card p{

    color:#6d7786;

    line-height:1.8;

    font-size:15px;

}

/* Responsive */

@media(max-width:1200px){

.products-grid{

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

}

}

@media(max-width:991px){

.products-grid{

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

}

}

@media(max-width:576px){

.products-grid{

grid-template-columns:1fr;

}

.products-section{

padding:80px 0;

}

.product-card{

padding:30px 22px;

}

}

/*==================================
Section Heading
==================================*/

.section-title{

    width:100%;

    max-width:850px;

    margin:0 auto 70px;

    text-align:center;

}

.section-title span{

    display:inline-block;

    padding:10px 24px;

    border-radius:50px;

    background:#EAF4FF;

    color:#BC9A75;

    font-size:14px;

    font-weight:700;

    letter-spacing:1px;

    margin-bottom:20px;

}

.section-title h2{

    font-size:34px;

    font-weight:800;

    line-height:1.2;

    color:#1A314E
;

    margin:0 auto 20px;

    max-width:700px;

    text-align:center;

}

.section-title p{

    max-width:700px;

    margin:0 auto;

    color:#6C7685;

    font-size:17px;

    line-height:1.9;

    text-align:center;

    padding: 27px;

}


/*==================================================
WHY CHOOSE US
==================================================*/

.why-choose{
    position:relative;
    padding:60px 0;
    background:#ffffff;
    overflow:hidden;
    z-index:1;
}

/* Background Shapes */

.why-choose::before{
    content:"";
    position:absolute;
    width:450px;
    height:450px;
    border-radius:50%;
    background:linear-gradient(135deg,#BC9A75);
    opacity:.05;
    top:-180px;
    right:-180px;
    z-index:-1;
}

.why-choose::after{
    content:"";
    position:absolute;
    width:350px;
    height:350px;
    border-radius:50%;
    background:#BC9A75;
    opacity:.04;
    left:-140px;
    bottom:-140px;
    z-index:-1;
}

/*==================================
Container
==================================*/

.why-choose .container{

    width:100%;

    max-width:1320px;

    margin:auto;

    padding-left:15px;

    padding-right:15px;

}

/*==================================
Grid
==================================*/

.why-wrapper{

    display:grid;

    grid-template-columns:46% 54%;

    gap:70px;

    align-items:center;

}

/*==================================
Left Side
==================================*/

.why-image{

    position:relative;

}

.why-image img{

    width:100%;

    display:block;

    border-radius:30px;

    object-fit:cover;

    box-shadow:
    0 30px 70px rgba(0,0,0,.12);

}

/*==================================
Floating Badge
==================================*/

.experience-badge{

    position:absolute;

    right:-35px;

    bottom:40px;

    width:220px;

    background:#ffffff;

    border-radius:24px;

    text-align:center;

    padding:35px 20px;

    box-shadow:
    0 30px 70px rgba(0,0,0,.12);

    overflow:hidden;

}

.experience-badge::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:5px;

    background:linear-gradient(90deg,#BC9A75);

}

.experience-badge h2{

    font-size:56px;

    color:#BC9A75;

    font-weight:800;

    margin-bottom:10px;

    line-height:1;

}

.experience-badge span{

    display:block;

    color:#666;

    font-size:15px;

    line-height:1.6;

    font-weight:500;

}

/*==================================
Right Content
==================================*/

.why-content{

    position:relative;

}

.why-content .section-subtitle{

    display:inline-flex;

    align-items:center;

    padding:10px 22px;

    border-radius:50px;

    background:#EEF5FF;

    color:#BC9A75;

    font-size:14px;

    font-weight:700;

    letter-spacing:1px;

    margin-bottom:20px;

}

.why-content h2{

    font-size:30px;

    line-height:1.18;

    color:#1A314E
;

    font-weight:800;

    margin-bottom:25px;

}

.why-content>p{

    font-size:15px;

    line-height:1.9;

    color:#6F7886;

    margin-bottom:45px;

}

/*==================================
Feature Grid
==================================*/

.why-list{

    display:grid;

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

    gap:25px;

}

/*==================================
Feature Card
==================================*/

.why-item{
    position: relative;
    background: #fff;
    padding: 22px 18px;
    border-radius: 18px;
    border: 1px solid #EDF2F8;
    box-shadow: 0 10px 25px rgba(0,0,0,.05);
    text-align: center;
    transition: .4s;
    overflow: hidden;

    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 150px;
}

/* Animated Top Border */

.why-item::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:0;

    height:5px;

    background:linear-gradient(90deg,#BC9A75);

    transition:.45s;

}

.why-item:hover::before{

    width:100%;

}

.why-item:hover{

    transform:translateY(-10px);

    box-shadow:

    0 25px 60px rgba(15,126,248,.18);

}

/*==================================
Icon
==================================*/

.why-icon{

    width:72px;

    height:72px;

    min-width:72px;

    border-radius:20px;

    background:linear-gradient(135deg,#BC9A75);

    display:flex;

    justify-content:center;

    align-items:center;

    color:#fff;

    font-size:28px;

    transition:.45s;

    box-shadow:

    0 12px 30px rgba(15,126,248,.25);

}

.why-item:hover .why-icon{

    transform:rotate(-10deg) scale(1.08);

}

/*==================================
Text
==================================*/

.why-item h4{
    font-size: 24px;
    color: #1A314E;
    font-weight: 700;
    margin: 0 0 10px;
    line-height: 1.3;
}

.why-item p{
    margin: 0;
    font-size: 15px;
    color: #6F7886;
    line-height: 1.6;
}

/* Small Gradient Decoration */

.why-item::after{

    content:"";

    position:absolute;

    width:120px;

    height:120px;

    border-radius:50%;

    background:linear-gradient(135deg,#BC9A75);

    opacity:.05;

    right:-60px;

    bottom:-60px;

    transition:.4s;

}

.why-item:hover::after{

    transform:scale(1.3);

}

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

@media (max-width:1400px){

    .why-choose .container{
        max-width:1140px;
    }

    .why-content h2{
        font-size:44px;
    }

}

@media (max-width:1200px){

    .why-wrapper{

        grid-template-columns:1fr;

        gap:70px;

    }

    .why-image{

        max-width:700px;

        margin:auto;

    }

    .why-content{

        text-align:center;

    }

    .why-content .section-subtitle{

        margin:0 auto 20px;

    }

    .why-content p{

        max-width:750px;

        margin:0 auto 45px;

    }

    .why-list{

        max-width:900px;

        margin:auto;

    }

}

@media (max-width:991px){

    .why-choose{

        padding:90px 0;

    }

    .why-content h2{

        font-size:38px;

    }

    .why-list{

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

        gap:20px;

    }

    .experience-badge{

        width:180px;

        padding:25px;

        right:20px;

        bottom:20px;

    }

    .experience-badge h2{

        font-size:42px;

    }

}

@media (max-width:767px){

    .why-choose{

        padding:80px 0;

    }

    .why-content h2{

        font-size:32px;

        line-height:1.3;

    }

    .why-item p{
        font-size:14px;
    }

    .why-list{

        grid-template-columns:1fr;

    }

      .why-item{
        padding:20px 16px;
        min-height:140px;
    }

    .why-icon{

        width:65px;

        height:65px;

        min-width:65px;

        font-size:24px;

    }

      .why-item h4{
        font-size:20px;
    }

}

@media (max-width:576px){

    .why-wrapper{

        gap:45px;

    }

    .why-image img{

        border-radius:20px;

    }

    .experience-badge{

        position:relative;

        right:auto;

        bottom:auto;

        margin:20px auto 0;

        width:170px;

        border-radius:18px;

    }

    .experience-badge h2{

        font-size:36px;

    }

    .why-content{

        text-align:left;

    }

    .why-content .section-subtitle{

        margin:0 0 15px;

    }

    .why-content h2{

        font-size:28px;

    }

     .why-item{
        text-align:center;
        justify-content:center;
        align-items:center;
    }

    .why-icon{

        margin-bottom:15px;

    }

}

@media (max-width:400px){

    .why-content h2{

        font-size:24px;

    }

   .why-item{
        padding:18px 14px;
        min-height:130px;
    }

}

/*=========================================
WORK PROCESS SECTION
=========================================*/

.process-section{
    position:relative;
    padding:10px 0;
    background:#f8fbff;
    overflow:hidden;
}

.process-section::before{
    content:"";
    position:absolute;
    width:500px;
    height:500px;
    top:-220px;
    right:-220px;
    border-radius:50%;
    background:linear-gradient(135deg,#BC9A75,#f2cba1);
    opacity:.05;
}

.process-section::after{
    content:"";
    position:absolute;
    width:350px;
    height:350px;
    left:-150px;
    bottom:-150px;
    border-radius:50%;
    background:#BC9A75;
    opacity:.04;
}

.process-section .container{
    position:relative;
    z-index:2;
}

/*=============================
Grid
=============================*/

.process-grid{

    display:grid;

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

    gap:30px;

    margin-top:70px;

    position:relative;

}

/* Connecting Line */

.process-grid::before{

    content:"";

    position:absolute;

    top:58px;

    left:10%;

    width:80%;

    height:2px;

    background:#d7e8ff;

    z-index:0;

}

/*=============================
Card
=============================*/

.process-card{

    position:relative;

    background:#fff;

    border-radius:24px;

    padding:70px 30px 35px;

    text-align:center;

    overflow:hidden;

    transition:.45s;

    border:1px solid #edf2f8;

    box-shadow:0 18px 40px rgba(0,0,0,.05);

    z-index:2;

}

.process-card:hover{

    transform:translateY(-12px);

    box-shadow:0 30px 60px rgba(15,126,248,.16);

}

.process-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:5px;

    background:linear-gradient(90deg,#BC9A75,#e8bf92);

    transform:scaleX(0);

    transform-origin:left;

    transition:.45s;

}

.process-card:hover::before{

    transform:scaleX(1);

}

/*=============================
Step Number
=============================*/

.process-number{

    position:absolute;

    top:20px;

    right:20px;

    font-size:46px;

    font-weight:800;

    color:#eef5ff;

    line-height:1;

}

/*=============================
Icon
=============================*/

.process-icon{

    width:95px;

    height:95px;

    margin:auto;

    border-radius:50%;

    background:linear-gradient(135deg,#BC9A75,#e8bf92);

    display:flex;

    justify-content:center;

    align-items:center;

    color:#fff;

    font-size:34px;

    margin-bottom:28px;

    position:relative;

    transition:.45s;

    box-shadow:0 18px 35px rgba(15,126,248,.28);

}

.process-icon::before{

    content:"";

    position:absolute;

    width:115px;

    height:115px;

    border:2px dashed rgba(15,126,248,.18);

    border-radius:50%;

}

.process-card:hover .process-icon{

    transform:rotate(-10deg) scale(1.08);

}

/*=============================
Title
=============================*/

.process-card h3{

    font-size:25px;

    color:#1A314E
;

    margin-bottom:15px;

    font-weight:700;

}

/*=============================
Paragraph
=============================*/

.process-card p{

    color:#6d7786;

    line-height:1.9;

    margin:0;

    font-size:15px;

}

/*=============================
Responsive
=============================*/

@media(max-width:1200px){

.process-grid{

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

}

.process-grid::before{

display:none;

}

}

@media(max-width:767px){

.process-grid{

grid-template-columns:1fr;

}

.process-section{

padding:90px 0;

}

.process-card{

padding:60px 25px 30px;

}

.process-icon{

width:80px;

height:80px;

font-size:28px;

}

.process-icon::before{

width:100px;

height:100px;

}

.process-card h3{

font-size:22px;

}

.process-number{

font-size:36px;

padding: 22px;

}

}

/*=========================================
FEATURED PROJECTS
=========================================*/

.projects-section{
    position:relative;
    padding:50px 0;
    background:#ffffff;
    overflow:hidden;
}

.projects-section::before{
    content:"";
    position:absolute;
    width:450px;
    height:450px;
    top:-180px;
    right:-180px;
    border-radius:50%;
    background:linear-gradient(135deg,#BC9A75,#e8bf92);
    opacity:.05;
}

.projects-section::after{
    content:"";
    position:absolute;
    width:320px;
    height:320px;
    bottom:-140px;
    left:-140px;
    border-radius:50%;
    background:#BC9A75;
    opacity:.04;
}

.projects-section .container{
    position:relative;
    z-index:2;
}

/*=========================
Grid
=========================*/

.projects-grid{

    display:grid;

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

    gap:30px;

    margin-top:70px;

}

/*=========================
Card
=========================*/

.project-card{

    position:relative;

    overflow:hidden;

    border-radius:24px;

    height:380px;

    cursor:pointer;

    box-shadow:0 18px 45px rgba(0,0,0,.08);

    transition:.45s;

}

.project-card:hover{

    transform:translateY(-10px);

    box-shadow:0 35px 70px rgba(15,126,248,.18);

}

/*=========================
Image
=========================*/

.project-card img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.7s;

}

.project-card:hover img{

    transform:scale(1.12);

}

/*=========================
Overlay
=========================*/

.project-overlay{

    position:absolute;

    left:0;

    bottom:0;

    width:100%;

    padding:35px;

    background:linear-gradient(to top,
    rgba(8,20,45,.95),
    rgba(8,20,45,.60),
    transparent);

    color:#fff;

    transition:.45s;

}

.project-card:hover .project-overlay{

    padding-bottom:50px;

}

/* Category */

.project-overlay span{

    display:inline-block;

    background:#BC9A75;

    padding:8px 18px;

    border-radius:30px;

    font-size:13px;

    font-weight:600;

    margin-bottom:15px;

    letter-spacing:.5px;

}

/* Title */

.project-overlay h3{

    font-size:28px;

    line-height:1.3;

    font-weight:700;

    margin:0;

}

/*=========================
Blue Accent
=========================*/

.project-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:5px;

    background:linear-gradient(90deg,#BC9A75,#e8bf92);

    transform:scaleX(0);

    transform-origin:left;

    transition:.45s;

    z-index:5;

}

.project-card:hover::before{

    transform:scaleX(1);

}

/*=========================
Shine Effect
=========================*/

.project-card::after{

    content:"";

    position:absolute;

    top:-120%;

    left:-40%;

    width:45%;

    height:250%;

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

    transform:rotate(25deg);

    transition:.7s;

}

.project-card:hover::after{

    left:140%;

}

/*=========================
Responsive
=========================*/

@media(max-width:1200px){

.projects-grid{

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

}

}

@media(max-width:768px){

.projects-section{

padding:90px 0;

}

.projects-grid{

grid-template-columns:1fr;

gap:25px;

}

.project-card{

height:330px;

}

.project-overlay{

padding:25px;

}

.project-overlay h3{

font-size:24px;

}

}

@media(max-width:576px){

.project-card{

height:300px;

}

.project-overlay{

padding:20px;

}

.project-overlay span{

font-size:12px;

padding:22px 0px;

}

.project-overlay h3{

font-size:20px;

}

}

/*=========================================
TESTIMONIAL SECTION
=========================================*/

.testimonial-section{
    position:relative;
    padding:50px 0;
    background:#f8fbff;
    overflow:hidden;
}

.testimonial-section::before{
    content:"";
    position:absolute;
    width:450px;
    height:450px;
    top:-180px;
    left:-180px;
    border-radius:50%;
    background:linear-gradient(135deg,#BC9A75,#e8bf92);
    opacity:.05;
}

.testimonial-section::after{
    content:"";
    position:absolute;
    width:320px;
    height:320px;
    right:-150px;
    bottom:-150px;
    border-radius:50%;
    background:#BC9A75;
    opacity:.04;
}

.testimonial-section .container{
    position:relative;
    z-index:2;
}

/*=================================
Grid
=================================*/

.testimonial-grid{

    display:grid;

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

    gap:30px;

    margin-top:70px;

}

/*=================================
Card
=================================*/

.testimonial-card{

    position:relative;

    background:#fff;

    border-radius:24px;

    padding:40px 35px;

    overflow:hidden;

    transition:.4s;

    border:1px solid #edf2f8;

    box-shadow:0 15px 40px rgba(0,0,0,.06);

}

.testimonial-card:hover{

    transform:translateY(-10px);

    box-shadow:0 30px 70px rgba(15,126,248,.18);

}

.testimonial-card::before{

    content:"";

    position:absolute;

    left:0;

    top:0;

    width:100%;

    height:5px;

    background:linear-gradient(90deg,#BC9A75,#e8bf92);

    transform:scaleX(0);

    transform-origin:left;

    transition:.4s;

}

.testimonial-card:hover::before{

    transform:scaleX(1);

}

/*=================================
Quote Icon
=================================*/

.quote-icon{

    width:70px;

    height:70px;

    border-radius:20px;

    display:flex;

    justify-content:center;

    align-items:center;

    background:linear-gradient(135deg,#BC9A75,#e8bf92);

    color:#fff;

    font-size:28px;

    margin-bottom:30px;

    transition:.4s;

    box-shadow:0 15px 30px rgba(15,126,248,.25);

}

.testimonial-card:hover .quote-icon{

    transform:rotate(-10deg);

}

/*=================================
Text
=================================*/

.testimonial-card p{

    font-size:16px;

    color:#6b7685;

    line-height:1.9;

    margin-bottom:35px;

}

/*=================================
User
=================================*/

.testimonial-user{

    display:flex;

    align-items:center;

    gap:18px;

}

.testimonial-user img{

    width:70px;

    height:70px;

    border-radius:50%;

    object-fit:cover;

    border:4px solid #EAF4FF;

}

.testimonial-user h4{

    font-size:21px;

    color:#1A314E
;

    margin-bottom:6px;

    font-weight:700;

}

.testimonial-user span{

    color:#BC9A75;

    font-size:15px;

    font-weight:600;

}

/*=================================
Floating Decoration
=================================*/

.testimonial-card::after{

    content:"";

    position:absolute;

    width:140px;

    height:140px;

    border-radius:50%;

    background:linear-gradient(135deg,#BC9A75,#e8bf92);

    opacity:.05;

    right:-70px;

    bottom:-70px;

    transition:.4s;

}

.testimonial-card:hover::after{

    transform:scale(1.3);

}

/*=================================
Responsive
=================================*/

@media(max-width:1200px){

.testimonial-grid{

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

}

}

@media(max-width:768px){

.testimonial-section{

padding:90px 0;

}

.testimonial-grid{

grid-template-columns:1fr;

gap:25px;

}

.testimonial-card{

padding:35px 28px;

}

.quote-icon{

width:60px;

height:60px;

font-size:24px;

}

.testimonial-user img{

width:60px;

height:60px;

}

.testimonial-user h4{

font-size:18px;

}

}

@media(max-width:576px){

.testimonial-card{

padding:22px 22px;

}

.testimonial-card p{

font-size:15px;

}

}

/*=========================================
CTA SECTION
=========================================*/

.cta-section{
    position:relative;
    padding:90px 0;
    overflow:hidden;
    background:linear-gradient(135deg,#e8bf92 0%,#BC9A75 55%,#e8bf92 100%);
}

.cta-section::before{
    content:"";
    position:absolute;
    width:500px;
    height:500px;
    background:rgba(255,255,255,.06);
    border-radius:50%;
    top:-220px;
    left:-180px;
}

.cta-section::after{
    content:"";
    position:absolute;
    width:380px;
    height:380px;
    background:rgba(255,255,255,.05);
    border-radius:50%;
    bottom:-170px;
    right:-150px;
}

.cta-section .container{
    position:relative;
    z-index:2;
}

/*=================================
Wrapper
=================================*/

.cta-wrapper{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:60px;

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

    backdrop-filter:blur(18px);

    -webkit-backdrop-filter:blur(18px);

    border:1px solid rgba(255,255,255,.15);

    border-radius:30px;

    padding:70px;

    box-shadow:0 30px 80px rgba(0,0,0,.15);

}

/*=================================
Left
=================================*/

.cta-left{

    max-width:700px;

}

.cta-left span{

    display:inline-block;

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

    color:#fff;

    padding:10px 22px;

    border-radius:50px;

    font-size:14px;

    font-weight:700;

    letter-spacing:1px;

    margin-bottom:20px;

}

.cta-left h2{

    font-size:50px;

    line-height:1.2;

    color:#fff;

    font-weight:800;

    margin-bottom:20px;

}

.cta-left p{

    color:rgba(255,255,255,.85);

    font-size:17px;

    line-height:1.9;

    margin:0;

}

/*=================================
Right Buttons
=================================*/

.cta-right{

    display:flex;

    flex-direction:column;

    gap:18px;

    min-width:300px;

}

/*=================================
Buttons
=================================*/

.cta-btn{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:12px;

    padding:18px 30px;

    border-radius:60px;

    font-size:16px;

    font-weight:700;

    transition:.4s;

    text-decoration:none;

}

/* Primary */

.primary-btn{

    background:#fff;

    color:#BC9A75;

}

.primary-btn:hover{

    background:#1A314E
;

    color:#fff;

    transform:translateY(-5px);

}

/* Secondary */

.secondary-btn{

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

    color:#fff;

    border:1px solid rgba(255,255,255,.2);

}

.secondary-btn:hover{

    background:#fff;

    color:#BC9A75;

    transform:translateY(-5px);

}

/* Outline */

.outline-btn{

    border:2px solid #fff;

    color:#fff;

    background:transparent;

}

.outline-btn:hover{

    background:#fff;

    color:#BC9A75;

    transform:translateY(-5px);

}

/*=================================
Responsive
=================================*/

@media(max-width:1200px){

.cta-wrapper{

padding:55px;

}

.cta-left h2{

font-size:42px;

}

}

@media(max-width:991px){

.cta-wrapper{

flex-direction:column;

text-align:center;

padding:50px 40px;

}

.cta-left{

max-width:100%;

}

.cta-right{

width:100%;

max-width:420px;

}

}

@media(max-width:767px){

.cta-section{

padding:70px 0;

}

.cta-wrapper{

padding:40px 25px;

border-radius:22px;

}

.cta-left h2{

font-size:32px;

}

.cta-left p{

font-size:15px;

}

.cta-btn{

padding:16px 22px;

font-size:15px;

}

}

@media(max-width:480px){

.cta-left h2{

font-size:28px;

}

.cta-left span{

font-size:12px;

padding:8px 18px;

}

}

/*==================================================
FOOTER
==================================================*/

.footer{
    position:relative;
    background:#081629;
    overflow:hidden;
    color:#fff;
    margin-top:0;
}

.footer::before{
    content:"";
    position:absolute;
    width:500px;
    height:500px;
    top:-220px;
    right:-220px;
    border-radius:50%;
    background:linear-gradient(135deg,#BC9A75,#e8bf92);
    opacity:.06;
}

.footer::after{
    content:"";
    position:absolute;
    width:380px;
    height:380px;
    bottom:-180px;
    left:-180px;
    border-radius:50%;
    background:#BC9A75;
    opacity:.05;
}

.footer .container{
    position:relative;
    z-index:2;
}

/*==================================
Top Area
==================================*/

.footer-top{

    display:grid;

    grid-template-columns:1.5fr 1fr 1fr 1.2fr;

    gap:60px;

    padding:90px 0 70px;

}

/*==================================
Widget
==================================*/

.footer-widget{

    position:relative;

}

.footer-widget h3{

    font-size:24px;

    font-weight:700;

    color:#fff;

    margin-bottom:30px;

    position:relative;

    padding-bottom:15px;

}

.footer-widget h3::after{

    content:"";

    position:absolute;

    left:0;

    bottom:0;

    width:55px;

    height:3px;

    border-radius:30px;

    background:linear-gradient(90deg,#BC9A75,#e8bf92);

}

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

.footer-logo{

    display:inline-block;

    margin-bottom:30px;

}

.footer-logo img{

    max-width:180px;

}

/*==================================
About Text
==================================*/

.footer-about p{

    color:#B8C2D3;

    line-height:1.9;

    font-size:15px;

    margin-bottom:30px;

}

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

.footer-widget ul{

    margin:0;

    padding:0;

    list-style:none;

}

.footer-widget ul li{

    margin-bottom:16px;

}

.footer-widget ul li:last-child{

    margin-bottom:0;

}

.footer-widget ul li a{

    color:#B8C2D3;

    text-decoration:none;

    transition:.35s;

    display:inline-block;

    position:relative;

    padding-left:18px;

}

.footer-widget ul li a::before{

    content:"›";

    position:absolute;

    left:0;

    color:#BC9A75;

    transition:.35s;

}

.footer-widget ul li a:hover{

    color:#fff;

    transform:translateX(6px);

}

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

.footer-social{

    display:flex;

    align-items:center;

    gap:14px;

}

.footer-social a{

    width:46px;

    height:46px;

    border-radius:50%;

    display:flex;

    justify-content:center;

    align-items:center;

    text-decoration:none;

    color:#fff;

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

    transition:.35s;

    font-size:18px;

}

.footer-social a:hover{

    background:linear-gradient(135deg,#BC9A75,#e8bf92);

    transform:translateY(-6px);

    box-shadow:0 15px 35px rgba(15,126,248,.35);

}

/*==================================
CONTACT INFO
==================================*/

.footer-contact ul li{

    display:flex;

    align-items:flex-start;

    gap:15px;

    margin-bottom:25px;

}

.footer-contact ul li i{

    width:45px;

    height:45px;

    min-width:45px;

    border-radius:50%;

    background:linear-gradient(135deg,#BC9A75,#e8bf92);

    display:flex;

    justify-content:center;

    align-items:center;

    color:#fff;

    font-size:18px;

    box-shadow:0 10px 25px rgba(15,126,248,.25);

}

.footer-contact ul li span{

    color:#B8C2D3;

    line-height:1.8;

    font-size:15px;

}

.footer-contact ul li a{

    color:#B8C2D3 !important;

    text-decoration:none;

    line-height:1.8;

    transition:.35s;

    padding-left:0 !important;

}

.footer-contact ul li a::before{

    display:none;

}

.footer-contact ul li a:hover{

    color:#fff !important;

    transform:none !important;

}

/*==================================
BOTTOM BAR
==================================*/

.footer-bottom{

    border-top:1px solid rgba(255,255,255,.08);

    padding:25px 0;

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

}

.footer-bottom-wrapper{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

    flex-wrap:wrap;

}

.footer-bottom p{

    margin:0;

    color:#B8C2D3;

    font-size:15px;

    line-height:1.7;

}

.footer-bottom a{

    color:#22C8FF;

    text-decoration:none;

    font-weight:600;

    transition:.35s;

}

.footer-bottom a:hover{

    color:#fff;

}

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

@media (max-width:1200px){

    .footer-top{

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

        gap:50px;

    }

}

@media (max-width:768px){

    .footer{

        text-align:center;

    }

    .footer-top{

        grid-template-columns:1fr;

        gap:40px;

        padding:70px 0 50px;

    }

    .footer-widget h3::after{

        left:50%;

        transform:translateX(-50%);

    }

    .footer-social{

        justify-content:center;

    }

    .footer-contact ul li{

        justify-content:center;

        text-align:left;

    }

    .footer-bottom-wrapper{

        flex-direction:column;

        text-align:center;

    }

}

@media (max-width:576px){

    .footer{

        padding-bottom:0;

    }

    .footer-logo img{

        max-width:150px;

    }

    .footer-widget h3{

        font-size:22px;

    }

    .footer-about p,

    .footer-widget ul li a,

    .footer-contact ul li span,

    .footer-bottom p{

        font-size:14px;

    }

    .footer-social a{

        width:42px;

        height:42px;

        font-size:16px;

    }

    .footer-contact ul li i{

        width:40px;

        height:40px;

        min-width:40px;

        font-size:16px;

    }

}

/*=============================
 Gallery Section
=============================*/

.gallery-section{
    padding:60px 0;
    background:#f8fafc;
}

.gallery-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:25px;
    margin-top:10px;
}

.gallery-item{
    position:relative;
    overflow:hidden;
    border-radius:18px;
    cursor:pointer;
    box-shadow:0 12px 35px rgba(0,0,0,.12);
}

.gallery-item img{
    width:100%;
    height:320px;
    object-fit:cover;
    transition:.6s;
    display:block;
}

.gallery-overlay{
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
    padding:30px 25px;
    background:linear-gradient(to top,rgba(0,0,0,.92),rgba(0,0,0,.05));
    color:#fff;
    transform:translateY(100%);
    transition:.45s;
}

.gallery-overlay h4{
    color:#fff;
    font-size:24px;
    margin-bottom:8px;
}

.gallery-overlay p{
    margin:0;
    color:#f5f5f5;
}

.gallery-item:hover img{
    transform:scale(1.12);
}

.gallery-item:hover .gallery-overlay{
    transform:translateY(0);
}

/* Tablet */

@media(max-width:991px){

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

.gallery-item img{
    height:280px;
}

}

/* Mobile */

@media(max-width:767px){

.gallery-section{
    padding:70px 0;
}

.gallery-grid{
    grid-template-columns:1fr;
    gap:20px;
    margin-top:40px;
}

.gallery-item img{
    height:260px;
}

.gallery-overlay{
    transform:translateY(0);
    padding:20px;
}

.gallery-overlay h4{
    font-size:20px;
}

}

/*=========================================
PRODUCTS SECTION
=========================================*/

.prm-products-section{
    padding:35px 0;
    background:#f7f9fc;
    position:relative;
    overflow:hidden;
}

.prm-products-section::before{
    content:"";
    position:absolute;
    top:-250px;
    right:-250px;
    width:600px;
    height:600px;
    border-radius:50%;
    background:rgba(15,126,248,.05);
}

.prm-products-section::after{
    content:"";
    position:absolute;
    bottom:-220px;
    left:-220px;
    width:500px;
    height:500px;
    border-radius:50%;
    background:rgba(0,0,0,.03);
}

.prm-products-section .container{
    position:relative;
    z-index:2;
}

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

.prm-section-title{
    text-align:center;
    max-width:760px;
    margin:0 auto 70px;
}

.prm-section-title span{
    display:inline-block;
    padding:8px 22px;
    background:#e9f3ff;
    color:#BC9A75;
    border-radius:50px;
    font-size:14px;
    font-weight:600;
    letter-spacing:1px;
    text-transform:uppercase;
    margin-bottom:15px;
}

.prm-section-title h2{
    font-size:24px;
    font-weight:700;
    color:#1A314E
;
    margin-bottom:7px;
    line-height:1.3;
}

.prm-section-title p{
    font-size:17px;
    color:#6c757d;
    line-height:1.6;
}

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

.prm-products-grid{

    display:grid;

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

    gap:30px;

}

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

.prm-product-card{

    background:#fff;

    border-radius:22px;

    overflow:hidden;

    position:relative;

    transition:.4s;

    box-shadow:0 12px 35px rgba(0,0,0,.08);

    border:1px solid #edf2f7;

    height:100%;

    display:flex;

    flex-direction:column;

}

.prm-product-card::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:5px;

    background:linear-gradient(90deg,#BC9A75,#e8bf92);

    transform:scaleX(0);

    transform-origin:left;

    transition:.4s;

}

.prm-product-card:hover{

    transform:translateY(-12px);

    box-shadow:0 25px 60px rgba(0,0,0,.15);

}

.prm-product-card:hover::before{

    transform:scaleX(1);

}

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

.prm-product-img{

    overflow:hidden;

    height:200px;

}

.prm-product-img img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.6s;

    display:block;

}

.prm-product-card:hover .prm-product-img img{

    transform:scale(1.08);

}
/*=========================================
PRODUCT CONTENT
=========================================*/

.prm-product-info{

    padding:17px;

    display:flex;

    flex-direction:column;

    flex:1;

}

.prm-product-info h3{

    font-size:24px;

    color:#1A314E
;

    font-weight:700;

    margin-bottom:15px;

    line-height:1.35;

    transition:.35s;

}

.prm-product-card:hover h3{

    color:#BC9A75;

}

.prm-product-info p{

    font-size:15px;

    color:#667085;

    line-height:1.8;

    margin-bottom:1px;

    flex:1;

}

/*=========================================
READ MORE BUTTON
=========================================*/

.prm-read-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:14px 28px;

    width:max-content;

    border-radius:50px;

    background:linear-gradient(135deg,#BC9A75,#e8bf92);

    color:#fff;

    text-decoration:none;

    font-size:15px;

    font-weight:600;

    transition:.35s;

    overflow:hidden;

    position:relative;

    box-shadow:0 10px 25px rgba(15,126,248,.25);

}

.prm-read-btn i{

    transition:.35s;

    font-size:14px;

}

.prm-read-btn:hover{

    color:#fff;

    transform:translateY(-4px);

    box-shadow:0 18px 40px rgba(15,126,248,.35);

}

.prm-read-btn:hover i{

    transform:translateX(6px);

}

/* Shine Effect */

.prm-read-btn::before{

    content:"";

    position:absolute;

    top:0;

    left:-100%;

    width:100%;

    height:100%;

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

    transform:skewX(-25deg);

    transition:.6s;

}

.prm-read-btn:hover::before{

    left:120%;

}

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

.prm-product-card::after{

    content:"";

    position:absolute;

    width:80px;

    height:80px;

    right:-35px;

    bottom:-35px;

    border-radius:50%;

    background:rgba(15,126,248,.05);

    transition:.35s;

}

.prm-product-card:hover::after{

    transform:scale(1.5);

}

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

.prm-product-img{

    position:relative;

}

.prm-product-img::before{

    content:"";

    position:absolute;

    inset:0;

    background:linear-gradient(to top,
    rgba(0,0,0,.25),
    rgba(0,0,0,0));

    opacity:0;

    transition:.35s;

    z-index:1;

}

.prm-product-card:hover .prm-product-img::before{

    opacity:1;

}

/*=========================================
SMOOTH TRANSITIONS
=========================================*/

.prm-product-card,
.prm-product-card img,
.prm-product-info h3,
.prm-read-btn{

    transition:all .35s ease;

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

@media (max-width:1400px){

    .prm-products-grid{

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

        gap:25px;

    }

}

@media (max-width:1200px){

    .prm-products-grid{

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

        gap:25px;

    }

    .prm-product-img{

        height:220px;

    }

    .prm-product-info{

        padding:24px;

    }

    .prm-product-info h3{

        font-size:22px;

    }

}

@media (max-width:991px){

    .prm-products-section{

        padding:90px 0;

    }

    .prm-products-grid{

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

        gap:25px;

    }

    .prm-section-title{

        margin-bottom:50px;

    }

    .prm-section-title h2{

        font-size:36px;

    }

    .prm-product-img{

        height:230px;

    }

}

@media (max-width:768px){

    .prm-products-section{

        padding:70px 0;

    }

    .prm-products-grid{

        gap:20px;

    }

    .prm-section-title h2{

        font-size:30px;

    }

    .prm-section-title p{

        font-size:15px;

    }

    .prm-product-info{

        padding:22px;

    }

    .prm-product-info h3{

        font-size:20px;

    }

    .prm-product-info p{

        font-size:14px;

        margin-bottom:22px;

    }

    .prm-read-btn{

        width:100%;

        justify-content:center;

    }

}

@media (max-width:576px){

    .prm-products-section{

        padding:60px 0;

    }

    .prm-products-grid{

        grid-template-columns:1fr;

    }

    .prm-section-title{

        margin-bottom:40px;

    }

    .prm-section-title span{

        font-size:12px;

        padding:8px 18px;

    }

    .prm-section-title h2{

        font-size:26px;

        line-height:1.4;

    }

    .prm-section-title p{

        font-size:14px;

    }

    .prm-product-img{

        height:240px;

    }

    .prm-product-info{

        padding:20px;

    }

    .prm-product-info h3{

        font-size:22px;

    }

    .prm-product-info p{

        font-size:14px;

        line-height:1.8;

    }

    .prm-read-btn{

        width:100%;

        padding:14px;

        font-size:14px;

    }

}

/*=========================================
PREMIUM HOVER EFFECTS
=========================================*/

.prm-product-card{

    will-change:transform;

}

.prm-product-card:hover{

    border-color:#BC9A75;

}

.prm-product-card:hover .prm-product-info{

    background:linear-gradient(to bottom,#ffffff,#fbfdff);

}

.prm-product-card:hover .prm-product-img img{

    filter:brightness(1.05);

}

/* Nice smooth scrolling */

html{

    scroll-behavior:smooth;

}
/*=========================================
PREMIUM CARD EFFECTS
=========================================*/

.prm-product-card{
    position: relative;
    overflow: hidden;
}

/* Floating Product Badge */

.prm-product-img::after{
    content: "Prime Rise";
    position: absolute;
    top: 18px;
    left: 18px;
    background: rgba(255,255,255,.95);
    color: #BC9A75;
    padding: 8px 18px;
    border-radius: 30px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .5px;
    z-index: 10;
    box-shadow: 0 8px 20px rgba(0,0,0,.08);
}

/* Hover Gradient */

.prm-product-card::before{
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
        rgba(15,126,248,.06),
        rgba(34,200,255,.02));
    opacity: 0;
    transition: .45s;
    z-index: 0;
}

.prm-product-card:hover::before{
    opacity: 1;
}

/* Content */

.prm-product-info{
    position: relative;
    z-index: 2;
}

/* Button */

.prm-read-btn{
    transition: .35s;
}

.prm-product-card:hover .prm-read-btn{

    background: #1A314E
;

    transform: translateY(-3px);

}

/* Image Zoom */

.prm-product-card:hover img{

    transform: scale(1.12) rotate(2deg);

}

/* Title Animation */

.prm-product-info h3{

    transition: .35s;

}

.prm-product-card:hover h3{

    letter-spacing: .5px;

}

/* Bottom Line */

.prm-product-info::after{

    content: "";

    display: block;

    width: 55px;

    height: 3px;

    background: linear-gradient(90deg,#BC9A75,#e8bf92);

    margin-top: 20px;

    transition: .4s;

}

.prm-product-card:hover .prm-product-info::after{

    width: 100px;

}

/*=========================================
CONTACT SECTION
=========================================*/

.prm-contact-section{
    padding:120px 0;
    background:#f8fbff;
    position:relative;
    overflow:hidden;
}

.prm-contact-section::before{
    content:"";
    position:absolute;
    width:500px;
    height:500px;
    border-radius:50%;
    background:rgba(15,126,248,.05);
    top:-180px;
    right:-180px;
}

.prm-contact-section::after{
    content:"";
    position:absolute;
    width:400px;
    height:400px;
    border-radius:50%;
    background:rgba(34,200,255,.05);
    left:-180px;
    bottom:-180px;
}

.prm-contact-section .container{
    position:relative;
    z-index:2;
}

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

.prm-contact-section .prm-section-title{
    text-align:center;
    max-width:750px;
    margin:0 auto 70px;
}

.prm-contact-section .prm-section-title span{
    display:inline-block;
    padding:8px 24px;
    border-radius:30px;
    background:#eaf4ff;
    color:#BC9A75;
    font-size:14px;
    font-weight:700;
    letter-spacing:1px;
    text-transform:uppercase;
    margin-bottom:15px;
}

.prm-contact-section .prm-section-title h2{
    font-size:44px;
    color:#1A314E
;
    margin-bottom:18px;
    font-weight:700;
}

.prm-contact-section .prm-section-title p{
    font-size:17px;
    line-height:1.8;
    color:#667085;
}

/*=========================================
LAYOUT
=========================================*/

.prm-contact-wrapper{

    display:grid;

    grid-template-columns:420px 1fr;

    gap:40px;

    align-items:start;

}

/*=========================================
LEFT BOX
=========================================*/

.prm-contact-info{

    background:#fff;

    padding:40px;

    border-radius:25px;

    box-shadow:0 20px 60px rgba(0,0,0,.08);

}

.prm-contact-info h3{

    font-size:32px;

    color:#1A314E
;

    margin-bottom:15px;

}

.prm-contact-info>p{

    color:#667085;

    line-height:1.8;

    margin-bottom:35px;

}

/*=========================================
CONTACT ITEM
=========================================*/

.prm-contact-box{

    display:flex;

    align-items:flex-start;

    gap:18px;

    margin-bottom:22px;

    padding:18px;

    border-radius:18px;

    background:#f8fbff;

    transition:.35s;

}

.prm-contact-box:last-child{

    margin-bottom:0;

}

.prm-contact-box:hover{

    transform:translateY(-5px);

    background:#fff;

    box-shadow:0 12px 30px rgba(15,126,248,.12);

}

.prm-contact-icon{

    min-width:60px;

    width:60px;

    height:60px;

    border-radius:50%;

    background:linear-gradient(135deg,#BC9A75,#e8bf92);

    display:flex;

    align-items:center;

    justify-content:center;

    color:#fff;

    font-size:22px;

    box-shadow:0 10px 25px rgba(15,126,248,.25);

}

.prm-contact-box h4{

    font-size:18px;

    color:#1A314E
;

    margin-bottom:6px;

}

.prm-contact-box p{

    color:#667085;

    line-height:1.7;

    margin:0;

}

.prm-contact-box a{

    color:#667085;

    text-decoration:none;

    transition:.3s;

}

.prm-contact-box a:hover{

    color:#BC9A75;

}/*=========================================
CONTACT FORM
=========================================*/

.prm-contact-form{

    background:#fff;

    padding:45px;

    border-radius:25px;

    box-shadow:0 20px 60px rgba(0,0,0,.08);

    position:relative;

    overflow:hidden;

}

.prm-contact-form::before{

    content:"";

    position:absolute;

    top:0;

    left:0;

    width:100%;

    height:5px;

    background:linear-gradient(90deg,#BC9A75,#e8bf92);

}

.prm-contact-form h3{

    font-size:34px;

    color:#1A314E
;

    margin-bottom:35px;

    font-weight:700;

}

/*=========================================
FORM ROW
=========================================*/

.prm-form-row{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:20px;

    margin-bottom:20px;

}

/*=========================================
INPUTS
=========================================*/

.prm-contact-form input,
.prm-contact-form select,
.prm-contact-form textarea{

    width:100%;

    border:1px solid #E5EAF1;

    background:#F8FBFF;

    border-radius:15px;

    padding:17px 20px;

    font-size:15px;

    color:#1A314E
;

    transition:.35s;

    outline:none;

}

.prm-contact-form input::placeholder,
.prm-contact-form textarea::placeholder{

    color:#98A2B3;

}

.prm-contact-form textarea{

    height:180px;

    resize:none;

    margin-bottom:25px;

}

/*=========================================
FOCUS
=========================================*/

.prm-contact-form input:focus,
.prm-contact-form select:focus,
.prm-contact-form textarea:focus{

    border-color:#BC9A75;

    background:#fff;

    box-shadow:0 0 0 4px rgba(15,126,248,.12);

}

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

.prm-contact-form button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    padding:17px 38px;

    border:none;

    border-radius:60px;

    background:linear-gradient(135deg,#BC9A75,#e8bf92);

    color:#fff;

    font-size:16px;

    font-weight:600;

    cursor:pointer;

    transition:.35s;

    box-shadow:0 15px 35px rgba(15,126,248,.25);

}

.prm-contact-form button i{

    transition:.35s;

}

.prm-contact-form button:hover{

    transform:translateY(-5px);

    box-shadow:0 20px 45px rgba(15,126,248,.35);

}

.prm-contact-form button:hover i{

    transform:translateX(5px);

}

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

@media(max-width:991px){

    .prm-contact-wrapper{

        grid-template-columns:1fr;

    }

    .prm-contact-info{

        margin-bottom:35px;

    }

}

@media(max-width:768px){

    .prm-contact-form{

        padding:30px;

    }

    .prm-form-row{

        grid-template-columns:1fr;

        gap:15px;

    }

    .prm-contact-form h3{

        font-size:28px;

    }

}

@media(max-width:576px){

    .prm-contact-section{

        padding:70px 0;

    }

    .prm-contact-info,
    .prm-contact-form{

        padding:25px;

        border-radius:18px;

    }

    .prm-contact-form h3{

        font-size:24px;

    }

    .prm-contact-form button{

        width:100%;

        padding:16px;

    }

}

/*=========================================
PREMIUM CONTACT EFFECTS
=========================================*/

/* Floating Background Shapes */

.prm-contact-section .shape-1{

    position:absolute;

    width:180px;

    height:180px;

    border-radius:50%;

    background:rgba(15,126,248,.08);

    top:8%;

    right:6%;

    filter:blur(10px);

    animation:floatOne 8s ease-in-out infinite;

}

.prm-contact-section .shape-2{

    position:absolute;

    width:120px;

    height:120px;

    border-radius:50%;

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

    bottom:8%;

    left:5%;

    animation:floatTwo 6s ease-in-out infinite;

}

/*=========================================
INFO CARD EFFECT
=========================================*/

.prm-contact-info{

    border:1px solid rgba(15,126,248,.08);

    transition:.4s;

}

.prm-contact-info:hover{

    transform:translateY(-8px);

    box-shadow:0 25px 60px rgba(0,0,0,.10);

}

/*=========================================
FORM CARD EFFECT
=========================================*/

.prm-contact-form{

    border:1px solid rgba(15,126,248,.08);

    transition:.4s;

}

.prm-contact-form:hover{

    transform:translateY(-8px);

    box-shadow:0 30px 70px rgba(0,0,0,.12);

}

/*=========================================
INPUT ICON EFFECT
=========================================*/

.prm-contact-form input:hover,
.prm-contact-form select:hover,
.prm-contact-form textarea:hover{

    border-color:#BC9A75;

    background:#fff;

}

/*=========================================
BUTTON SHINE EFFECT
=========================================*/

.prm-contact-form button{

    position:relative;

    overflow:hidden;

}

.prm-contact-form button::before{

    content:"";

    position:absolute;

    top:0;

    left:-100%;

    width:60%;

    height:100%;

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

    transform:skewX(-25deg);

    transition:.7s;

}

.prm-contact-form button:hover::before{

    left:130%;

}

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

.prm-contact-box:hover .prm-contact-icon{

    transform:rotate(360deg);

    transition:.7s;

}

/*=========================================
LINK ANIMATION
=========================================*/

.prm-contact-box a{

    position:relative;

}

.prm-contact-box a::after{

    content:"";

    position:absolute;

    left:0;

    bottom:-3px;

    width:0;

    height:2px;

    background:#BC9A75;

    transition:.35s;

}

.prm-contact-box a:hover::after{

    width:100%;

}

/*=========================================
FLOAT ANIMATION
=========================================*/

@keyframes floatOne{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(-20px);

    }

}

@keyframes floatTwo{

    0%,100%{

        transform:translateY(0);

    }

    50%{

        transform:translateY(20px);

    }

}

/*=========================================
SMOOTH APPEAR
=========================================*/

.prm-contact-info,
.prm-contact-form{

    animation:fadeUp .8s ease;

}

@keyframes fadeUp{

    from{

        opacity:0;

        transform:translateY(40px);

    }

    to{

        opacity:1;

        transform:translateY(0);

    }

}

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

@media(max-width:576px){

    .prm-contact-box{

        padding:15px;

        gap:15px;

    }

    .prm-contact-icon{

        width:52px;

        height:52px;

        min-width:52px;

        font-size:18px;

    }

    .prm-contact-box h4{

        font-size:16px;

    }

    .prm-contact-box p,
    .prm-contact-box a{

        font-size:14px;

    }

}

/*====================================================
PRODUCT DETAILS PAGE
====================================================*/

.prm-product-details{
    padding:35px 0;
    background:#f7f9fc;
}

.prm-product-layout{
    display:grid;
    grid-template-columns:2fr 380px;
    gap:40px;
    align-items:start;
}

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

.prm-product-main{
    background:#fff;
    border-radius:25px;
    overflow:hidden;
    box-shadow:0 20px 60px rgba(0,0,0,.08);
}

.prm-product-image{
    position:relative;
    overflow:hidden;
}

.prm-product-image img{
    width:100%;
    height:500px;
    object-fit:cover;
    display:block;
    transition:.6s;
}

.prm-product-main:hover .prm-product-image img{
    transform:scale(1.08);
}

.prm-product-content{
    padding:45px;
}

.prm-product-tag{
    display:inline-block;
    background:#eef6ff;
    color:#BC9A75;
    padding:8px 22px;
    border-radius:50px;
    font-size:14px;
    font-weight:600;
    margin-bottom:20px;
}

.prm-product-content h1{
    font-size:44px;
    color:#1A314E
;
    margin-bottom:20px;
    line-height:1.2;
}

.prm-product-intro{
    font-size:17px;
    line-height:1.9;
    color:#666;
    margin-bottom:35px;
}

.prm-product-btns{
    display:flex;
    gap:20px;
    flex-wrap:wrap;
}

.prm-btn-primary,
.prm-btn-secondary{

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

    padding:16px 36px;

    border-radius:60px;

    text-decoration:none;

    font-weight:600;

    transition:.35s;

}

.prm-btn-primary{
    background:#BC9A75;
    color:#fff;
}

.prm-btn-primary:hover{
    background:#1A314E
;
    color:#fff;
    transform:translateY(-5px);
}

.prm-btn-secondary{
    background:#25D366;
    color:#fff;
}

.prm-btn-secondary:hover{
    background:#1cb654;
    color:#fff;
    transform:translateY(-5px);
}

/*========================================
SIDEBAR
========================================*/

.prm-product-sidebar{

    position:sticky;

    top:140px;

}

.prm-sidebar-box{

    background:#fff;

    border-radius:25px;

    padding:35px;

    box-shadow:0 18px 50px rgba(0,0,0,.08);

    margin-bottom:30px;

}

.prm-sidebar-box h3{

    font-size:28px;

    color:#1A314E
;

    margin-bottom:25px;

}

.prm-sidebar-box ul{

    list-style:none;

    padding:0;

    margin:0;

}

.prm-sidebar-box ul li{

    margin-bottom:12px;

}

.prm-sidebar-box ul li:last-child{

    margin-bottom:0;

}

.prm-sidebar-box ul li a{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:15px 18px;

    border-radius:12px;

    text-decoration:none;

    color:#444;

    font-weight:500;

    background:#f5f8fc;

    transition:.35s;

}

.prm-sidebar-box ul li a:hover{

    background:#BC9A75;

    color:#fff;

    padding-left:28px;

}

.prm-sidebar-box ul li.active a{

    background:#1A314E
;

    color:#fff;

}
/*====================================================
PRODUCT FEATURES
====================================================*/

.prm-product-features{
    padding:10px 0;
    background:#fff;
}

.prm-detail-grid{
    display:grid;
    grid-template-columns:2fr 420px;
    gap:45px;
    align-items:start;
}

.prm-title{
    margin-bottom:35px;
}

.prm-title span{
    display:inline-block;
    padding:1px 1px;
    border-radius:50px;
    background:#eef6ff;
    color:#BC9A75;
    font-size:14px;
    font-weight:700;
    letter-spacing:1px;
    margin-bottom:15px;
}

.prm-title h2{
    font-size:25px;
    color:#1A314E
;
    line-height:1.2;
   
}

.prm-detail-content>p{
    color:#666;
    line-height:1.5;
    margin-bottom:12px;
    font-size:17px;
}

/*=========================================
FEATURE LIST
=========================================*/

.prm-feature-list{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:22px;
}

.prm-feature-item{
    display:flex;
    align-items:flex-start;
    gap:18px;
    padding:22px;
    background:#fff;
    border-radius:18px;
    border:1px solid #edf2f7;
    transition:.35s;
    box-shadow:0 10px 30px rgba(0,0,0,.05);
}

.prm-feature-item:hover{
    transform:translateY(-8px);
    box-shadow:0 20px 40px rgba(0,0,0,.08);
}

.prm-feature-item i{
    width:60px;
    height:60px;
    border-radius:50%;
    background:linear-gradient(135deg,#BC9A75,#e8bf92);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:22px;
    flex-shrink:0;
}

.prm-feature-item h4{
    font-size:20px;
    margin-bottom:8px;
    color:#1A314E
;
}

.prm-feature-item p{
    margin:0;
    color:#666;
    line-height:1.7;
}

/*=========================================
SPECIFICATION BOX
=========================================*/

.prm-specification-box{
    background:#1A314E
;
    color:#fff;
    border-radius:22px;
    overflow:hidden;
    position:sticky;
    top:140px;
    box-shadow:0 20px 50px rgba(0,0,0,.15);
}

.prm-specification-box h3{
    background:#BC9A75;
    padding:22px 30px;
    font-size:26px;
    margin:0;
}

.prm-specification-box table{
    width:100%;
    border-collapse:collapse;
}

.prm-specification-box td{
    padding:18px 30px;
    border-bottom:1px solid rgba(255,255,255,.08);
}

.prm-specification-box tr:last-child td{
    border-bottom:none;
}

.prm-specification-box td:first-child{
    color:#9fc9ff;
    width:45%;
    font-weight:600;
}

.prm-specification-box td:last-child{
    color:#fff;
}

/*=========================================
APPLICATIONS
=========================================*/

.prm-product-application{
    padding:20px 0;
    background:#f7f9fc;
}

.prm-app-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
    margin-top:50px;
}

.prm-app-card{
    background:#fff;
    border-radius:22px;
    padding:9px 5px;
    text-align:center;
    transition:.35s;
    box-shadow:0 15px 40px rgba(0,0,0,.06);
}

.prm-app-card:hover{
    transform:translateY(-10px);
}

.prm-app-card i{
    width:85px;
    height:85px;
    margin:auto;
    border-radius:50%;
    background:linear-gradient(135deg,#BC9A75,#e8bf92);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:34px;
    margin-bottom:22px;
}

.prm-app-card h4{
    font-size:22px;
    color:#1A314E
;
    margin:0;
}

/*=========================================
BENEFITS
=========================================*/

.prm-product-benefits{
    padding:100px 0;
    background:#fff;
}

.prm-benefit-box{
    background:#fff;
    border-radius:22px;
    padding:45px 30px;
    text-align:center;
    transition:.35s;
    border:1px solid #edf2f7;
    box-shadow:0 15px 40px rgba(0,0,0,.05);
    height:100%;
}

.prm-benefit-box:hover{
    transform:translateY(-10px);
    border-color:#BC9A75;
}

.prm-benefit-box i{
    width:80px;
    height:80px;
    margin:auto;
    border-radius:50%;
    background:linear-gradient(135deg,#BC9A75,#e8bf92);
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    font-size:30px;
    margin-bottom:25px;
}

.prm-benefit-box h4{
    color:#1A314E
;
    margin-bottom:15px;
    font-size:22px;
}

.prm-benefit-box p{
    color:#666;
    line-height:1.8;
    margin:0;
}

/*====================================================
PREMIUM HOVER EFFECTS
====================================================*/

.prm-product-main,
.prm-sidebar-box,
.prm-sidebar-contact,
.prm-feature-item,
.prm-app-card,
.prm-benefit-box,
.prm-specification-box{
    transition:all .35s ease;
}

.prm-sidebar-box:hover,
.prm-sidebar-contact:hover{
    transform:translateY(-8px);
    box-shadow:0 25px 60px rgba(0,0,0,.12);
}

.prm-product-main:hover{
    box-shadow:0 30px 70px rgba(0,0,0,.12);
}

.prm-product-main:hover .prm-product-image img{
    transform:scale(1.06);
}

.prm-sidebar-contact{

    background:linear-gradient(135deg,#BC9A75,#e8bf92);

    border-radius:22px;

    padding:35px;

    color:#fff;

    text-align:center;

    box-shadow:0 20px 45px rgba(15,126,248,.20);

}

.prm-sidebar-contact h4{

    font-size:28px;

    color:#fff;

    margin-bottom:15px;

}

.prm-sidebar-contact p{

    color:rgba(255,255,255,.90);

    line-height:1.8;

    margin-bottom:25px;

}

.prm-sidebar-contact a{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:10px;

    text-decoration:none;

    border-radius:50px;

    padding:16px;

    margin-bottom:15px;

    font-weight:600;

    transition:.35s;

}

.prm-sidebar-contact a:first-of-type{

    background:#fff;

    color:#1A314E
;

}

.prm-sidebar-contact .whatsapp{

    background:#25D366;

    color:#fff;

}

.prm-sidebar-contact a:hover{

    transform:translateY(-4px);

}

/*====================================================
SECTION SPACING
====================================================*/

.prm-product-features,
.prm-product-application,
.prm-product-benefits{

    position:relative;

}

.prm-product-features::before{

    content:"";

    position:absolute;

    width:220px;

    height:220px;

    border-radius:50%;

    background:rgba(15,126,248,.05);

    top:40px;

    right:40px;

    z-index:0;

}

.prm-product-features .container,
.prm-product-application .container,
.prm-product-benefits .container{

    position:relative;

    z-index:2;

}

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

@media(max-width:1200px){

.prm-product-layout{

grid-template-columns:1fr 330px;

gap:30px;

}

.prm-detail-grid{

grid-template-columns:1fr 350px;

}

}

@media(max-width:991px){

.prm-product-layout{

grid-template-columns:1fr;

}

.prm-product-sidebar{

position:relative;

top:0;

margin-top:40px;

}

.prm-detail-grid{

grid-template-columns:1fr;

}

.prm-specification-box{

position:relative;

top:0;

margin-top:40px;

}

.prm-app-grid{

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

}

.prm-feature-list{

grid-template-columns:1fr;

}

}

@media(max-width:767px){

.prm-product-details{

padding:70px 0;

}

.prm-product-content{

padding:30px;

}

.prm-product-content h1{

font-size:34px;

}

.prm-product-image img{

height:300px;

}

.prm-product-btns{

flex-direction:column;

}

.prm-btn-primary,
.prm-btn-secondary{

width:100%;

}

.prm-app-grid{

grid-template-columns:1fr;

}

.prm-title h2{

font-size:30px;

}

.prm-feature-item{

padding:18px;

}

.prm-specification-box h3{

font-size:24px;

}

.prm-specification-box td{

padding:15px 20px;

font-size:14px;

}

}

@media(max-width:576px){

.prm-product-content{

padding:25px;

}

.prm-product-content h1{

font-size:28px;

}

.prm-product-intro{

font-size:15px;

}

.prm-sidebar-box{

padding:25px;

}

.prm-sidebar-box h3{

font-size:24px;

}

.prm-sidebar-contact{

padding:25px;

}

.prm-sidebar-contact h4{

font-size:24px;

}

.prm-title h2{

font-size:26px;

}

.prm-app-card{

padding:30px 20px;

}

.prm-benefit-box{

padding:30px 20px;

}

.prm-feature-item i{

width:50px;

height:50px;

font-size:18px;

}

}

/*====================================================
SMOOTH SCROLL
====================================================*/

html{

scroll-behavior:smooth;

}

/*=========================================
INSTALLATION SERVICE
=========================================*/

.prm-service-details{
    padding:30px 0;
    background:#f8fbff;
}

.prm-service-top{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:70px;
    align-items:center;
}

/* Image */

.prm-service-image{
    position:relative;
}

.prm-service-image img{
    width:100%;
    border-radius:24px;
    display:block;
    box-shadow:0 25px 60px rgba(0,0,0,.12);
}

/* Floating Badge */

.prm-service-badge{

    position:absolute;
    bottom:30px;
    left:30px;

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

    background:#fff;
    padding:18px 25px;

    border-radius:18px;

    box-shadow:0 20px 45px rgba(0,0,0,.15);

}

.prm-service-badge i{

    width:55px;
    height:55px;

    background:#BC9A75;
    color:#fff;

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

    border-radius:50%;
    font-size:22px;

}

.prm-service-badge span{

    font-size:17px;
    font-weight:700;
    color:#1A314E
;

}

/* Right Content */

.prm-service-tag{

    display:inline-block;

    background:#e8f3ff;

    color:#BC9A75;

    padding:8px 18px;

    border-radius:40px;

    font-size:13px;
    font-weight:700;
    letter-spacing:1px;
    text-transform:uppercase;

}

.prm-service-content h1{

    margin:10px 0 18px;

    font-size:34px;
    line-height:1.2;

    color:#1A314E
;
    font-weight:800;

}

.prm-service-intro{

    color:#666;
    line-height:1.9;
    font-size:17px;
    margin-bottom:35px;

}

/* Highlight Grid */

.prm-highlight-grid{

    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:20px;
    margin-bottom:40px;

}

.prm-highlight-box{

    display:flex;
    gap:16px;
    align-items:flex-start;

    background:#fff;
    padding:22px;

    border-radius:18px;

    transition:.35s;

    box-shadow:0 12px 30px rgba(0,0,0,.06);

}

.prm-highlight-box:hover{

    transform:translateY(-8px);

    box-shadow:0 20px 45px rgba(15,126,248,.18);

}

.prm-highlight-box i{

    width:55px;
    height:55px;

    background:#BC9A75;
    color:#fff;

    border-radius:50%;

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

    font-size:22px;

    flex-shrink:0;

}

.prm-highlight-box h4{

    margin-bottom:8px;

    color:#1A314E
;

    font-size:18px;

}

.prm-highlight-box p{

    margin:0;

    color:#666;

    font-size:15px;

    line-height:1.6;

}

/* Buttons */

.prm-service-buttons{

    display:flex;
    gap:18px;
    flex-wrap:wrap;

}

.prm-btn-primary,
.prm-btn-secondary{

    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:10px;

    padding:16px 32px;

    border-radius:50px;

    font-weight:700;

    transition:.35s;

    text-decoration:none;

}

.prm-btn-primary{

    background:#BC9A75;
    color:#fff;

}

.prm-btn-primary:hover{

    background:#1A314E
;

    transform:translateY(-4px);

}

.prm-btn-secondary{

    border:2px solid #BC9A75
;
    color:#BC9A75
;
    background:#fff;

}

.prm-btn-secondary:hover{

    background:#BC9A75
;
    color:#fff;

}

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

.prm-section-title{

    text-align:center;
    margin-bottom:60px;

}

.prm-section-title span{

    color:#BC9A75;

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

    letter-spacing:2px;

    text-transform:uppercase;

}

.prm-section-title h2{

    font-size:42px;

    margin:15px 0;

    color:#1A314E
;

}

.prm-section-title p{

    max-width:760px;
    margin:auto;

    color:#666;

    line-height:1.5;

}

/*=========================================
WHY CHOOSE US
=========================================*/

.prm-installation-features{
    padding:30px 0;
    background:#ffffff;
}

.prm-feature-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:25px;
}

.prm-feature-card{
    background:#fff;
    border-radius:20px;
    padding:35px 25px;
    text-align:center;
    box-shadow:0 12px 35px rgba(0,0,0,.08);
    transition:.35s;
    border:1px solid #eef2f7;
}

.prm-feature-card:hover{
    transform:translateY(-10px);
    box-shadow:0 20px 45px rgba(15,126,248,.18);
}

.prm-feature-card .icon{
    width:75px;
    height:75px;
    margin:0 auto 20px;
    border-radius:50%;
    background:linear-gradient(135deg,#BC9A75,#e8bf92);
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:30px;
}

.prm-feature-card h3{
    font-size:22px;
    color:#1A314E
;
    margin-bottom:12px;
}

.prm-feature-card p{
    color:#666;
    line-height:1.8;
}

/*=========================================
PROCESS
=========================================*/

.prm-installation-process{
    padding:30px 0;
    background:#f7f9fc;
}

.prm-process-wrapper{
    max-width:900px;
    margin:auto;
    position:relative;
}

.prm-process-wrapper::before{
    content:"";
    position:absolute;
    left:32px;
    top:0;
    bottom:0;
    width:3px;
    background:#BC9A75;
}

.prm-process-item{
    display:flex;
    gap:30px;
    margin-bottom:35px;
    position:relative;
}

.prm-process-number{
    width:65px;
    height:65px;
    background:#BC9A75;
    color:#fff;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:22px;
    font-weight:700;
    flex-shrink:0;
    z-index:2;
}

.prm-process-content{
    background:#fff;
    padding:28px;
    border-radius:18px;
    flex:1;
    box-shadow:0 10px 30px rgba(0,0,0,.08);
}

.prm-process-content h3{
    margin-bottom:12px;
    color:#1A314E
;
}

.prm-process-content p{
    color:#666;
    line-height:1.8;
}

/*=========================================
CAPABILITIES
=========================================*/

.prm-service-capabilities{
    padding:30px 0;
    background:#fff;
}

.prm-capability-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:25px;
}

.prm-capability-card{
    background:#f8fbff;
    padding:30px 20px;
    border-radius:18px;
    text-align:center;
    transition:.35s;
    border:1px solid #edf2f8;
}

.prm-capability-card:hover{
    background:#BC9A75;
    color:#fff;
    transform:translateY(-8px);
}

.prm-capability-card i{
    font-size:34px;
    margin-bottom:18px;
}

.prm-capability-card h4{
    font-size:18px;
    font-weight:700;
}

/*=========================================
FAQ
=========================================*/

.prm-service-faq{
    padding:30px 0;
    background:#f8fbff;
}

.prm-faq-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:25px;
}

.prm-faq-card{
    background:#fff;
    padding:30px;
    border-radius:20px;
    transition:.35s;
    box-shadow:0 12px 30px rgba(0,0,0,.07);
}

.prm-faq-card:hover{
    transform:translateY(-8px);
}

.prm-faq-icon{
    width:60px;
    height:60px;
    background:#BC9A75;
    color:#fff;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:24px;
    margin-bottom:20px;
}

.prm-faq-card h4{
    color:#1A314E
;
    margin-bottom:12px;
}

.prm-faq-card p{
    color:#666;
    line-height:1.8;
}

/*=========================================
CTA
=========================================*/

.prm-installation-cta{
    padding:30px 0;
}

.prm-cta-box{
    background:linear-gradient(135deg,#BC9A75,#e8bf92);
    border-radius:25px;
    padding:60px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:40px;
}

.prm-cta-content span{
    color:#cfe7ff;
    text-transform:uppercase;
    letter-spacing:2px;
    font-size:14px;
    font-weight:700;
}

.prm-cta-content h2{
    color:#fff;
    margin:18px 0;
    font-size:42px;
}

.prm-cta-content p{
    color:#e8f4ff;
    line-height:1.9;
    max-width:700px;
}

.prm-cta-buttons{
    display:flex;
    flex-wrap:wrap;
    gap:18px;
}

.prm-cta-buttons .prm-btn-primary{
    background:#fff;
    color:#BC9A75;
}

.prm-cta-buttons .prm-btn-primary:hover{
    background:#1A314E
;
    color:#fff;
}

.prm-cta-buttons .prm-btn-secondary{
    border:2px solid #fff;
    color:#fff;
    background:transparent;
}

.prm-cta-buttons .prm-btn-secondary:hover{
    background:#fff;
    color:#BC9A75;
}

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

@media(max-width:991px){

.prm-service-top,
.prm-cta-box{
    grid-template-columns:1fr;
    display:grid;
}

.prm-feature-grid,
.prm-capability-grid{
    grid-template-columns:repeat(2,1fr);
}

.prm-highlight-grid{
    grid-template-columns:1fr;
}

.prm-faq-grid{
    grid-template-columns:1fr;
}

.prm-service-content h1{
    font-size:38px;
}

.prm-section-title h2{
    font-size:34px;
}

.prm-cta-content h2{
    font-size:34px;
}

}

@media(max-width:767px){

.prm-service-details,
.prm-installation-features,
.prm-installation-process,
.prm-service-capabilities,
.prm-service-faq,
.prm-installation-cta{
    padding:70px 0;
}

.prm-feature-grid,
.prm-capability-grid{
    grid-template-columns:1fr;
}

.prm-service-content h1{
    font-size:30px;
}

.prm-section-title h2{
    font-size:28px;
}

.prm-cta-content h2{
    font-size:28px;
}

.prm-service-buttons,
.prm-cta-buttons{
    flex-direction:column;
}

.prm-btn-primary,
.prm-btn-secondary{
    width:100%;
    justify-content:center;
}

.prm-process-wrapper::before{
    display:none;
}

.prm-process-item{
    flex-direction:column;
}

.prm-service-badge{
    position:static;
    margin-top:20px;
}

.prm-cta-box{
    padding:35px 25px;
}

}



/* =========================================================
   PRODUCT SECTION
========================================================= */

.pr-products {
    width: 100%;
    padding: 55px 0 70px;
    background: #ffffff;
}


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

.pr-products-heading {
    position: relative;

    margin-bottom: 25px;
    padding-left: 18px;
}


.pr-products-heading::before {
    content: "";

    position: absolute;

    top: 0;
    bottom: 0;
    left: 0;

    width: 4px;

    background: #253c56;
}


.pr-products-heading h2 {
    margin: 0;

    color: #242424;

    font-size: 29px;
    font-weight: 700;
    line-height: 1.25;
}


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

.pr-products-grid {
    display: grid;

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

    gap: 20px;
}


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

.pr-product-card {
    position: relative;

    display: block;

    width: 100%;
    height: 375px;

    overflow: hidden;

    background: #eeeeee;

    border: 1px solid #bcbcbc;
    border-radius: 2px;

    box-shadow:
        0 2px 5px rgba(0, 0, 0, 0.28);

    text-decoration: none;

    isolation: isolate;
}


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

.pr-product-image {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    overflow: hidden;
}


.pr-product-image img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center;

    transition: transform 0.55s ease;
}


/* =========================================================
   BOTTOM BLUE TITLE
========================================================= */

.pr-product-title {
    position: absolute;

    left: 0;
    right: 0;
    bottom: 0;

    min-height: 55px;

    padding: 10px 15px;

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

    background: rgb(200 166 121);

    overflow: hidden;

    z-index: 2;
}


/* Diagonal shape like reference */

.pr-product-title::before {
    content: "";

    position: absolute;

    width: 95px;
    height: 100px;

    left: -25px;
    bottom: -55px;

    background: rgb(200 166 121);

    transform: rotate(33deg);

    pointer-events: none;
}


.pr-product-title::after {
    content: "";

    position: absolute;

    width: 90px;
    height: 100px;

    right: -30px;
    bottom: -55px;

    background: rgb(200 166 121);

    transform: rotate(-33deg);

    pointer-events: none;
}


.pr-product-title h3 {
    position: relative;

    margin: 0;

    color: #ffffff;

    font-size: 17px;
    font-weight: 400;
    line-height: 1.3;

    text-align: center;

    z-index: 3;
}


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

.pr-product-card:hover .pr-product-image img {
    transform: scale(1.06);
}


.pr-product-card:hover .pr-product-title {
    background: rgb(200 166 121);
}


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

@media (max-width: 991px) {

    .pr-products {
        padding: 45px 0 55px;
    }


    .pr-products-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));

        gap: 18px;
    }


    .pr-product-card {
        height: 390px;
    }


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

}


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

@media (max-width: 575px) {

    .pr-products {
        padding: 35px 0 45px;
    }


    .pr-products-heading {
        margin-bottom: 20px;
        padding-left: 14px;
    }


    .pr-products-heading::before {
        width: 3px;
    }


    .pr-products-heading h2 {
        font-size: 24px;
    }


    .pr-products-grid {
        grid-template-columns: 1fr;

        gap: 18px;
    }


    .pr-product-card {
        height: 390px;
    }


    .pr-product-title {
        min-height: 55px;
    }


    .pr-product-title h3 {
        font-size: 17px;
    }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media (max-width: 380px) {

    .pr-product-card {
        height: 350px;
    }

}