/* MORZO corrected components.css */

/* Buttons */
.btn {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:var(--space-2);
    padding:12px 24px;
    border-radius:var(--radius-md);
    font-size:var(--font-size-sm);
    font-weight:var(--font-weight-semibold);
    cursor:pointer;
    text-decoration:none;
}

.btn-primary {
    background:#003631;
    color:#ffffff;
}

.btn-secondary {
    background:#FFEDA8;
    color:#003631;
}

.btn-outline {
    border:2px solid #003631;
    color:#003631;
    background:#ffffff;
}



/* =========================================
   GLOBAL SECTION SYSTEM
========================================= */

.section{

    background:#FCFAF5;

}

.section-container{

    width:100%;

    max-width:1200px;

    margin:0 auto;

}

/* ---------- Heading Block ---------- */

.section-heading{

    max-width:900px;

    margin-bottom:30px;

}

.section-label{

    display:inline-block;

    margin-bottom:8px;

    font-size:13px;

    font-weight:700;

    letter-spacing:1px;

    text-transform:uppercase;

    color:#003631;

}

.section-title{

    margin:0 0 14px;

    font-size:34px;

    line-height:1.15;

    font-weight:800;

    letter-spacing:-1px;

    color:#003631;

}

.section-description{

    margin:0;

    max-width:900px;

    font-size:18px;

    line-height:1.7;

    color:#5E6472;
	
	margin-bottom:40px;

}

/* ---------- Content ---------- */

.section-content{

    margin-top:30px;

}



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

.public-header {

    width:100%;

    background:#ffffff;

    padding:10px 0;

    box-shadow:0 4px 20px rgba(0,0,0,0.08);

    position:relative;

    z-index:100;

}



.header-container {

    position:relative;
	
	width:100%;

    display:grid;

    grid-template-columns:1fr auto 1fr;

    align-items:center;

    padding:0 40px;

}


.logo {

    display:flex;

    flex-direction:column;

    justify-content:center;

    line-height:1;

}


.logo a {

    text-decoration:none;

    color:#003631;

    font-size:22px;

    font-weight:800;

    letter-spacing:-1px;

}


.logo strong {

    display:block;

    font-size:22px;

    font-weight:800;

    color:#003631;

    letter-spacing:-1px;

}


.logo span {

    display:block;

    margin-top:2px;

    font-size:11px;

    font-weight:600;

    color:#6b7280;

    letter-spacing:0.5px;

}



.public-nav {

    display:flex;

    align-items:center;

    justify-content:center;

    gap:30px;

}


.public-nav a {

    font-size:16px;

    font-weight:700;

    color:#003631;

    text-decoration:none;

}


.header-actions {

    display:flex;

    align-items:center;

    justify-content:flex-end;

    gap:16px;

}


.header-actions a,
.header-actions button {

    height:40px;

    padding:0 26px;

    border-radius:14px;

    font-size:16px;

    font-weight:700;

}

.public-nav a:hover {
    color:#FFB700;
}


/* Hero */
.hero {

    min-height:560px;

    display:flex;

    align-items:center;

    padding:60px 40px;

}

.hero h1 {

    font-size:56px;
    line-height:1.15;
    max-width:700px;
    letter-spacing:-1px;

}

.hero p {

    font-size:18px;

    max-width:680px;

    line-height:1.6;

    color:#d8e5e3;

}

.hero .btn {

    padding:14px 28px;

    font-size:15px;

    border-radius:14px;

}


.hero-layout {

    display:grid;

    grid-template-columns:

    1fr 1fr;

    align-items:center;

    gap:50px;

}


.hero-image img {

    width:100%;

    max-width:520px;

    height:520px;

    border-radius:24px;

    object-fit:cover;

}


.hero-image {

    display:flex;

    align-items:center;

    justify-content:center;

}


/* =====================================
   SOCIETY TOP BAR
===================================== */


.society-topbar {

    background:var(--morzo-primary);

    color:var(--morzo-white);

    font-size:13px;
	
	min-height:40px;

}



.topbar-container {


    width:100%;

    display:flex;

    align-items:center;

    justify-content:space-between;

    padding:8px 40px;



}



.topbar-left,
.topbar-center,
.topbar-right {


    display:flex;

    align-items:center;

    gap:20px;


}



.topbar-center {


    color:var(--morzo-gold);

    font-weight:600;


}

/* =====================================
   NOTICE TICKER
===================================== */


.notice-ticker {

    height:40px;

    display:flex;

    align-items:center;

    background:#fffaf0;

    overflow:hidden;

}



.notice-label {

    height:100%;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    padding:0 18px;

    background:#FFEDA8;

    color:#003631;

    font-size:15px;

    font-weight:700;

    line-height:1;

    white-space:nowrap;

}



.notice-scroll {

    flex:1;

    overflow:hidden;

}



.notice-content {

    display:flex;

    gap:80px;

    width:max-content;

    white-space:nowrap;

    animation:notice-scroll 20s linear infinite;

}



.notice-item {

    display:flex;

    align-items:center;

    gap:6px;

    color:#003631;

    font-size:14px;

    font-weight:600;

    line-height:1.2;

}



@keyframes notice-scroll {


    from {

        transform:translateX(100%);

    }


    to {

        transform:translateX(-100%);

    }


}


/* =====================================
   SOCIETY UPDATES TICKER
===================================== */


.society-updates{

    display:flex;

    align-items:center;

    background:#fffaf0;

    border-bottom:1px solid #eee;

    height:40px;

    overflow:hidden;

    position:sticky;

    top:0;

    z-index:1100;

}



.updates-label{

    height:100%;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;

    padding:0 18px;

    background:#FFEDA8;

    color:#003631;

    font-size:15px;

    font-weight:700;

    line-height:1;

    white-space:nowrap;

}



.updates-scroll{

    overflow:hidden;

    flex:1;

}



.updates-content{

    display:flex;

    gap:80px;

    white-space:nowrap;

    animation:updateScroll 20s linear infinite;

}



.update-item{

    display:flex;

    align-items:center;

    gap:6px;

    color:#003631;

    font-size:14px;

    font-weight:600;

    line-height:1.2;

}



@keyframes updateScroll{


    from{

        transform:translateX(100%);

    }


    to{

        transform:translateX(-100%);

    }


}


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


.public-footer {

    background:var(--morzo-primary);

    color:var(--morzo-white);

    padding:5px 50px;

}



.footer-container {

    display:flex;

    justify-content:space-between;

    align-items:flex-end;

    gap:40px;

    max-width:1100px;

    margin:0 auto;

}



.footer-info {

    max-width:500px;

}



.footer-info h3 {

    font-size:18px;

    font-weight:700;

    margin-bottom:8px;

    color:var(--morzo-white);

}



.footer-info p {

    margin:3px 0;

    font-size:13px;

    line-height:1.4;

    color:rgba(252,250,245,0.85);

}



.footer-meta {

    text-align:left;
	padding-bottom:0;

}



.footer-meta p {

    margin:3px 0;

    font-size:13px;

    color:rgba(252,250,245,0.85);

}


/* =========================================
   FACILITY IMAGE SLIDER
========================================= */


.facilities-section{

    background:#FCFAF5;

    padding:80px 0;

}


.facility-slider-wrapper{

	overflow:hidden;

	width:100%;

	margin-top:40px;

}



.facility-slider{


	display:flex;


	gap:20px;

	
	will-change:transform;


	width:max-content;


	animation:facilityScroll 70s linear infinite;


}



.facility-slider:hover{

    animation-play-state: paused;

}



.facility-slide{


	width:320px;


	background:#ffffff;


	border-radius:20px;


	overflow:hidden;


	box-shadow:0 10px 30px rgba(0,0,0,0.08);
	
	
	transition:transform .35s ease,
               box-shadow .35s ease;


}



.facility-slide:hover{

    transform:translateY(-8px);

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

}



.facility-slide img{


	width:100%;


	height:220px;


	object-fit:cover;


	display:block;


}



.facility-slide-content{


	padding:24px;


}



.facility-slide-content h3{

    font-size:20px;

    font-weight:700;

    color:#003631;

    line-height:1.3;

    margin-bottom:12px;

}



.facility-slide-content p{


font-size:16px;


font-weight:400;


line-height:1.7;


color:#6b7280;


margin:0;


}




@keyframes facilityScroll{


from{

transform:translateX(0);

}


to{

transform:translateX(-50%);

}


}


/* =========================================
   GALLERY IMAGE SLIDER
========================================= */


.gallery-slider-wrapper{

    overflow:hidden;

    width:100%;
	
	margin-top:40px;

}



.gallery-slider{

    display:flex;


	gap:20px;

	
	will-change:transform;


	width:max-content;


	animation:galleryScroll 70s linear infinite;

}



.gallery-slider:hover{

    animation-play-state:paused;

}



.gallery-slide{


    width:320px;


    background:#ffffff;


    border-radius:20px;


    overflow:hidden;


    box-shadow:
    0 10px 30px rgba(0,0,0,0.08);
	
	
	transition:transform .35s ease,
               box-shadow .35s ease;


}



.gallery-slide img{


    width:100%;


    height:220px;


    object-fit:cover;


    display:block;


}



.gallery-title{


    padding:25px 0 0;


    text-align:center;


    font-size:20px;


    font-weight:700;


    color:#003631;


}



.gallery-slide:hover{

    transform:translateY(-8px);

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

}


.gallery-slide h3 {
    font-size: 18px;
    font-weight: 700;
    text-align: center;
}


.gallery-slide p {
    font-size: 14px;
    text-align: center;
    color: #6b7280;
}





@keyframes galleryScroll{


    from{

        transform:translateX(-50%);

    }


    to{

        transform:translateX(0);

    }


}




/* =========================================
   STICKY PUBLIC HEADER
========================================= */


.sticky-header{

    position:sticky;

    top:0;

    z-index:1000;

}

/* =====================================
   MORZO STICKY PUBLIC HEADER STACK
===================================== */


.society-topbar {

    position:sticky;

    top:0;

    z-index:3000;

}



.society-updates {

    position:sticky;

    top:40px;

    z-index:2000;

}



.public-header {

    position:sticky;

    top:80px;

    z-index:1000;

    background:#ffffff;

}

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

.gallery-section{
	
	background:#FCFAF5;

    padding:80px 0;

}

.mobile-menu-btn {

    display:none;

    background:none;

    border:none;

    font-size:26px;

    color:#003631;

    cursor:pointer;

}

.mobile-menu {

    display:none;

    position:absolute;

    top:100%;

    left:0;

    width:100%;

    background:#ffffff;

    padding:20px;

    box-shadow:0 10px 30px rgba(0,0,0,0.15);

    z-index:1200;

}


.mobile-menu a {

    display:block;

    padding:12px 0;

    color:#003631;

    text-decoration:none;

    font-size:16px;

    font-weight:700;

}


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


.about-section {

    padding:40px 0 80px;

    background:#fcfaf5;

}



.about-container {

    max-width:1200px;

    margin:0 auto;

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:center;

    gap:60px;

}



/* About Content */

.about-content h2 {

    font-size:48px;

    line-height:1.15;

    font-weight:800;

    color:#003631;

    margin-bottom:25px;

    letter-spacing:-1px;

}



.about-content p {

    font-size:17px;

    line-height:1.8;

    color:#374151;

    margin-bottom:18px;

}



/* Small Label */

.about-label {

    display:inline-block;

    margin-bottom:15px;

    font-size:13px;

    font-weight:700;

    letter-spacing:1px;

    color:#003631;

    text-transform:uppercase;

}



/* About Image */

.about-image {

    display:flex;

    justify-content:center;

}



.about-image img {

    width:100%;

    max-width:560px;

    height:420px;

    object-fit:cover;

    border-radius:24px;

    box-shadow:0 15px 35px rgba(0,0,0,0.12);

}



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


@media(max-width:768px){


    .about-section {

        padding:50px 50px;

    }



    .about-container {

        grid-template-columns:1fr;

        gap:20px;

        text-align:left;

    }



    .about-content h2 {

        font-size:34px;

    }



    .about-content p {

        font-size:15px;

        line-height:1.7;

    }



    .about-image {

        order:-1;

    }



    .about-image img {

        height:280px;

        border-radius:18px;

    }
	
	
	.society-highlights-card {

        flex:0 0 280px;

    }


    .society-highlights-card img {

        height:180px;

    }
	
	
	.timeline-wrapper::before{

    left:14px;

	}
	
	

	.timeline-item{

    flex-direction:column;

    padding-left:45px;

	}
	
	

	.timeline-year{

    width:auto;

	}
	
	

	.timeline-dot{

    position:absolute;

    left:6px;

    top:12px;

	}

}



/* =========================================
   SOCIETY HIGHLIGHTS SLIDER
========================================= */



.society-highlights-section {

    background:#fcfaf5;
	
	padding:80px 0;

}


.society-highlights-slider-wrapper {

    overflow:hidden;

    display:block;
	
	margin-top:40px;
	
	width:100%;

}



.society-highlights-card img {

    width:100%;

    height:300px;

    object-fit:cover;

}




.society-highlights-slider {

    display:flex;

	gap:20px;

	width:max-content;

	will-change:transform;
	
	animation: societyScroll 70s linear infinite;

}



.society-highlights-card{

    flex:0 0 320px;

    width:320px;

    background:#fff;

    border-radius:20px;

    overflow:hidden;

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

    transition:transform .35s ease,
               box-shadow .35s ease;

}



.society-highlights-card:hover{

    transform:translateY(-8px);

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

}



.society-highlights-slider:hover {

    animation-play-state:paused;

}



@keyframes societyScroll {

    from {
        transform:translateX(-50%);
    }

    to {
        transform:translateX(0);
    }

}


.society-highlights-content {
	
	padding:24px;

	text-align:left;

}


.society-highlights-content h3 {

    font-size:20px;

    font-weight:700;

    color:#003631;

    margin-bottom:12px;

}


.society-highlights-content p {

    font-size:16px;

    line-height:1.7;

    color:#6b7280;

}




/* =========================================
   MANAGING COMMITTEE
========================================= */


.committee-section{

    background:#fcfaf5;
	
	padding:80px 0;

}



.committee-slider-wrapper{

	overflow:hidden;

	width:100%;
	
	display:block;
	
	margin-top:40px;

}



.committee-slider{

	display:flex;

	gap:20px;

	width:max-content;

	will-change:transform;

	animation: committeeScroll 70s linear infinite;

}



.committee-slider::-webkit-scrollbar{

display:none;

}



.committee-card{

	flex:0 0 320px;
	
	width:320px;

    flex-shrink:0;

    background:#ffffff;

    border-radius:20px;

    overflow:hidden;

    box-shadow:0 10px 30px rgba(0,0,0,0.10);
	
	transition:transform .35s ease,
               box-shadow .35s ease;

}



.committee-card img{

width:100%;

height:300px;

object-fit:cover;

}



.committee-card-content{

padding:24px;

text-align:left;

}



.committee-card-content h3{

    margin:0;

    font-size:20px;

    font-weight:700;

    color:#003631;
	
	margin-bottom:10px;

}



.committee-role{

    margin-top:4px;

    color:#6b7280;

    font-size:16px;

    font-weight:500;

}


.committee-card:hover{

    transform:translateY(-8px);

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

}


.committee-slider:hover{

	animation-play-state:paused;

}


@keyframes committeeScroll {

	from {
    transform:translateX(0);
	}

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

}


/*======================================
  Society Timeline
======================================*/

.society-timeline{

    background:#FCFAF5;
	
	padding:80px 0;

}


/*======================================
  Timeline Section Header
======================================*/

.society-timeline .section-heading{

    max-width:900px;

}


.timeline-wrapper{

    position:relative;

    max-width:1100px;
	
	width:100%;

    margin:40px auto 0;

}

.timeline-wrapper::before{

    content:"";

    position:absolute;

    left:100px;

    top:0;

    bottom:0;

    width:3px;

    background:rgba(0,54,49,.18);

    opacity:.15;

}

.timeline-item{

    display:flex;

    gap:20px;

    margin-bottom:20px;

    position:relative;

}

.timeline-year{

    width:80px;
	
	text-align:right;

    flex-shrink:0;

    font-size:34px;

    font-weight:700;

    color:var(--color-primary);
	
	letter-spacing:-1px;

}

.timeline-dot{

    width:22px;

    height:22px;

    background:#003631;
	
	border:6px solid #ffffff;

    border-radius:50%;

    margin-top:10px;

    position:relative;

    left:-11px;

    flex-shrink:0;

    box-shadow:0 0 0 4px rgba(0,54,49,.12);

}

.timeline-card{

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

    border-radius:18px;

    padding:24px 30px;

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

    flex:1;
	
	transition:
        transform .35s ease,
        box-shadow .35s ease;

}


.timeline-card:hover{

    transform:translateY(-5px);

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

}


.timeline-card h3{

    margin:0 0 10px;

    font-size:24px;

    font-weight:700;

    color:#003631;

}

.timeline-card p{

    margin:0;

    font-size:16px;

    line-height:1.6;

    color:#6B7280;

}



/* =========================================
   STAT WIDGET
========================================= */

.widget{

    background:#ffffff;

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

    border-radius:20px;

    padding:36px 28px;

    text-align:center;

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

    transition:all .35s ease;

    height:100%;

}

.widget:hover{

    transform: translateY(-8px);

    box-shadow: 0 22px 45px rgba(0,0,0,.12);

    border-color:#FFEDA8;

}

.widget-icon{

    width:72px;

    height:72px;

    margin:0 auto 22px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:#F6F8F7;

    border-radius:18px;

    font-size:34px;

    transition:all .35s ease;

}

.widget:hover .widget-icon{

    background:#FFEDA8;

    transform:scale(1.08);

}



/* =========================================
   GADGETS PAGE
========================================= */


/* =========================================
   POPULAR GADGETS GRID
========================================= */

.popular-gadgets-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

    gap:30px;

}



/* =========================================
   ALL GADGETS GRID
========================================= */

.gadgets-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(280px,1fr));

    gap:30px;

}



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

.gadget-category-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(260px,1fr));

    gap:30px;

}



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

.gadget-card{

    background:#ffffff;

    border:1px solid rgba(0,54,49,.08);

    border-radius:24px;

    padding:30px;

    display:flex;

    flex-direction:column;

    justify-content:space-between;

    min-height:300px;

    transition:all .35s ease;

    box-shadow:0 8px 24px rgba(0,0,0,.05);

}



.gadget-card:hover{

    transform:translateY(-8px);

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

}



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

.gadget-card-icon{

    width:72px;

    height:72px;

    border-radius:20px;

    background:#f5f8f7;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:34px;

    margin-bottom:24px;

}



/* =========================================
   BODY
========================================= */

.gadget-card-body{

    flex:1;

}



.gadget-card-title{

    font-size:24px;

    font-weight:700;

    color:var(--morzo-primary);

    margin:0 0 15px;

}



.gadget-card-description{

    font-size:16px;

    line-height:1.8;

    color:#6b7280;

    margin:0;

}



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

.gadget-card-footer{

    margin-top:30px;

    padding-top:20px;

    border-top:1px solid rgba(0,54,49,.08);

    display:flex;

    justify-content:space-between;

    align-items:center;

}



/* =========================================
   STATUS
========================================= */

.gadget-status{

    display:inline-flex;

    align-items:center;

    padding:8px 16px;

    border-radius:999px;

    background:#eef7f5;

    color:var(--morzo-primary);

    font-size:13px;

    font-weight:700;

}



.gadget-status.available{

    background:#dcfce7;

    color:#166534;

}

.gadget-status.coming-soon{

    background:#fef3c7;

    color:#92400e;

}



/* =========================================
   ARROW
========================================= */

.gadget-arrow{

    font-size:22px;

    color:var(--morzo-primary);

    transition:transform .3s ease;

}



.gadget-card:hover .gadget-arrow{

    transform:translateX(6px);

}



/* =========================================
   GADGET CATEGORY CARD
========================================= */

.gadget-category-card{

    background:#ffffff;

    border:1px solid rgba(0,54,49,.08);

    border-radius:24px;

    padding:28px;

    display:flex;

    align-items:center;

    gap:20px;

    transition:all .35s ease;

    box-shadow:0 8px 24px rgba(0,0,0,.05);

}



.gadget-category-card:hover{

    transform:translateY(-6px);

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

}



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

.gadget-category-icon{

    width:70px;

    height:70px;

    flex-shrink:0;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:34px;

    border-radius:20px;

    background:#f5f8f7;
	
	transition: all .35s ease;

}


.gadget-category-card:hover .gadget-category-icon{

    background: #FFEDA8;

    transform: scale(1.08);

}



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

.gadget-category-content{

    flex:1;

}



.gadget-category-content h3{

    margin:0 0 10px;

    font-size:22px;

    color:var(--morzo-primary);

    font-weight:700;

}



.gadget-category-content p{

    margin:0 0 14px;

    font-size:15px;

    line-height:1.7;

    color:#6b7280;

}



/* =========================================
   GADGET COUNT
========================================= */

.gadget-count{

    display:inline-block;

    padding:6px 14px;

    border-radius:999px;

    background:#eef7f5;

    color:var(--morzo-primary);

    font-size:13px;

    font-weight:700;

}



/* =========================================
   CATEGORY ARROW
========================================= */

.gadget-category-arrow{

    font-size:28px;

    color:var(--morzo-primary);

    transition:transform .3s ease;

}



.gadget-category-card:hover .gadget-category-arrow{

    transform:translateX(6px);

}



/* =========================================
   EMERGENCY DIRECTORY
========================================= */

.emergency-grid{

    display:grid;

    grid-template-columns:repeat(auto-fill,minmax(200px,200px));

    gap:20px;

    justify-content:center;

}



/* =========================================
   EMERGENCY TILE
========================================= */

.emergency-tile{

    background:#ffffff;

    border:1px solid rgba(0,54,49,.08);

    border-radius:18px;

    padding:14px;

    min-height:135px;

    display:flex;

    flex-direction:column;

    align-items:center;

    justify-content:space-between;

    text-align:center;

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

    transition:.25s ease;

}

.emergency-tile:hover{

    transform:translateY(-8px);

    box-shadow:0 22px 45px rgba(0,0,0,.12);

    border-color:#FFEDA8;

}



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

.emergency-tile-icon{

    width:54px;

    height:54px;

    border-radius:16px;

    background:#eef5f3;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:28px;
	
	transition:all .35s ease;

}


.emergency-tile:hover .emergency-tile-icon{

    background:#FFEDA8;

    transform:scale(1.08);

}


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

.emergency-tile-title{

    margin:12px 0;

    font-size:18px;

    font-weight:700;

    color:var(--morzo-primary);

}



/* =========================================
   PHONE
========================================= */

.emergency-tile-phone{

    font-size:18px;

    font-weight:700;

    color:var(--morzo-primary);

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

}



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

.emergency-tile-btn{

    width:auto;

    min-width:90px;

    padding:8px 16px;

    border-radius:999px;

    font-size:14px;

    margin-top:12px;

}



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

@media(max-width:992px){

    .emergency-grid{

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

    }

}

@media(max-width:640px){

    .emergency-grid{

        grid-template-columns:1fr;

    }

}



@media(max-width:768px){

    .form-row{

        grid-template-columns:1fr;

    }

}



/* =========================================
   GADGET SEARCH
========================================= */

.gadget-search-section{

	
	margin-top:70px;

    margin-bottom:40px;

}

.gadget-search-box{

    display:flex;

    align-items:center;
	
	justify-content:space-between;

    gap:12px;
	
	width:100%;

    max-width:850px;

    margin:0;

    background:#ffffff;

    border:1px solid rgba(0,54,49,.12);

    border-radius:16px;

    padding:14px 20px;

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

}

.gadget-search-icon{

    font-size:22px;

}

#gadget-search{

    flex:1;

    border:none;

    outline:none;

    background:transparent;

    font-size:16px;

    color:var(--morzo-primary);

}

#gadget-search::placeholder{

    color:#8b949e;

}


/* =========================================
   CLEAR SEARCH BUTTON
========================================= */

.clear-search-btn{

    display:none;

    align-items:center;

    justify-content:center;

    width:34px;

    height:34px;

    border:none;

    border-radius:50%;

    background:transparent;

    color:#6b7280;

    font-size:20px;

    cursor:pointer;

    transition:all .25s ease;

}

.clear-search-btn:hover{

    background:#eef7f5;

    color:#003631;

}


/* =========================================
   MOBILE HEADER NAVIGATION
========================================= */

.mobile-menu-button{

    display:none;

    background:none;

    border:none;

    font-size:28px;

    color:#003631;

    cursor:pointer;

    padding:8px;

}

/* Tablet & Mobile */

@media (max-width: 992px){

    .mobile-menu-button{

        display:block;

    }

    .main-navigation{

        display:none;

        position:absolute;

        top:100%;

        left:0;

        width:100%;

        background:#ffffff;

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

        padding:20px;

        z-index:1200;

    }

    .main-navigation.active{

        display:flex;

        flex-direction:column;

        gap:16px;

    }

    .main-navigation a{

        display:block;

        padding:10px 0;

        font-size:16px;

    }

}


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

.mobile-menu{

    display:none;

    position:absolute;

    top:100%;

    left:0;

    width:100%;

    background:#ffffff;

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

    padding:16px;

    z-index:9999;

}

.mobile-menu a{

    display:block;

    padding:12px 0;

    text-decoration:none;

    color:#003631;

    font-weight:600;

    border-bottom:1px solid #eeeeee;

}

.mobile-menu a:last-child{

    border-bottom:none;

}



/* ==========================================
   CONTACT CARDS
========================================== */


.contact-card:hover{

    transform:translateY(-6px);

}

.contact-card .widget-icon{

    margin:0 auto 24px;

}



/* ==========================================
   GADGET CARD HOVER
========================================== */

.gadget-card:hover .gadget-card-icon{

    background: #FFEDA8;

    transform: scale(1.08);

}


.gadget-card-icon{

    transition: all .35s ease;

}



/* =========================================
   MORZO FORM SYSTEM
========================================= */

.morzo-form{

    display:flex;

    flex-direction:column;

    gap:24px;

}

.form-row{

    display:grid;

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

    gap:20px;

}

.form-group{

    display:flex;

    flex-direction:column;

    gap:10px;

}

.form-label{

    font-size:15px;

    font-weight:600;

    color:#003631;

}

.input{

    width:100%;

    min-height:54px;

    padding:0 18px;

    border:1px solid rgba(0,54,49,.15);

    border-radius:14px;

    background:#ffffff;

    font-size:16px;

    color:#003631;

    transition:all .30s ease;

    outline:none;

    box-sizing:border-box;

}

textarea.input{

    min-height:160px;

    padding:16px 18px;

    resize:vertical;

    line-height:1.6;

}

select.input{

    cursor:pointer;

}

.input::placeholder{

    color:#9ca3af;

}

.input:focus{

    border-color:#003631;

    box-shadow:0 0 0 4px rgba(0,54,49,.08);

}

.form-actions{

    margin-top:12px;

}

.form-actions .btn{

    min-width:200px;

}


.container-wide{

    max-width:1400px;

    margin:0 auto;

    padding:0 24px;

}


.map-placeholder{

    height:220px;

    border-radius:16px;

    background:#F6F8F7;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#003631;

    margin-bottom:24px;

}


.office-card{

    transform:none !important;

}

.office-card:hover{

    transform:none !important;

}



/* =========================================
   CONTACT MAP
========================================= */

.map-placeholder{

    width:100%;

    height:260px;

    overflow:hidden;

    border-radius:16px;

    background:#F6F8F7;

}

.map-placeholder iframe{

    width:100%;

    height:100%;

    display:block;

    border:0;

}


/* =========================================
   CONTACT PAGE STATIC CARDS
========================================= */

.contact-form-card {
    height: 100%;
    transform: none !important;
}

.contact-form-card:hover {
    transform: none !important;
}

.office-card {
    transform: none !important;
}

.office-card:hover {
    transform: none !important;
}



/* =========================================
   OFFICE CONTACT BUTTONS
========================================= */

.office-contact-buttons {

    display:flex;

    flex-wrap:wrap;

    gap:12px;

}

.office-contact-btn {

    font-size:14px;

    padding:9px 14px;

    border-radius:12px;

    text-decoration:none;

}


@media(max-width:640px){

    .office-contact-buttons{

        flex-direction:column;

    }

    .office-contact-btn{

        width:100%;

    }

}


.office-contact-section {
    margin-top: 24px;
}