@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Hind+Madurai:wght@300;400;500;600;700&family=Lora:ital,wght@0,400..700;1,400..700&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

@font-face {
    font-family: 'Calvous Spurs';
    font-style: normal;
    font-weight: normal;
    src: url('fonts/calvous_woff/Calvous-Spurs-Stamp-DEMO.woff') format('woff');  
 }
 
:root {
    --priFont: "Poppins", serif;
    --secFont: 'Calvous Spurs', sans-serif;;
    --thirdFont: "Lora", serif;

    /* Color */
    --priColor: #000;
    --secColor: #FF6210;
    --thirdColor: #862218;
    --fourthColor: #FF5544;
    --bgColor: #FEF1E4;
    --textColor: #fff;
    --headingColor: #413d3d;

    /* Others */
    --lHeight: ;
    --fSize: ;
    --radious: 2rem;
}


/* CSS RESET */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }

body, html { overflow-x: hidden; }

body { line-height: 1.5;  -webkit-font-smoothing: antialiased; font-family: var(--priFont); color: var(--priColor);margin: 0 auto;position: relative;padding: 0;overflow-x: hidden; max-width: 100%; width: 100%;}
.wrapper { width: 100%; max-width: 100%; position: relative; margin: 0 auto; padding: 0 14rem; }
ol, ul { list-style: none; }
li { color: var(--textColor); font-size: clamp(0.95rem, 0.9219rem + 0.125vw, 1rem);}
a {text-decoration: none; cursor: pointer; font-size: clamp(0.95rem, 0.9219rem + 0.125vw, 1rem);}
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }
h1, h2, h3, h4, h5, h6 { text-wrap: balance; color: var(--textColor); font-weight: 600; font-family: var(--secFont);}
h1 {font-size: 3.5rem; margin: 0 0 3rem;}
h2 { font-size: clamp(2.3rem, 1.9842rem + 1.4035vw, 3.3rem);}
h3 { font-size: clamp(1.3rem, 1.1875rem + 0.5vw, 1.5rem); margin: 0 0 1.5rem;}
span { display: block; }
img, picture, video, canvas, svg { display: block; max-width: 100%; }
input, button, textarea, select { font: inherit; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
p {  color: var(--textColor); font-size: clamp(0.95rem, 0.9219rem + 0.125vw,.97rem);font-weight: 300;line-height: 1.5rem;padding: 0 0 1.2rem;}
h1 span { font-family: var(--secFont); font-size: clamp(2.6rem, 1.9684rem + 2.807vw, 4.6rem); color: var(--textColor); }

.button { position: relative; display: inline-block; padding: .7rem 1.5rem; border-radius: var(--radious); background: var(--secColor); color: var(--textColor); text-decoration: none; overflow: hidden; z-index: 1; transition: transform 0.3s ease, color 0.3s ease; }
  
.button:before, .button-transpa:before { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, #FF5544, #862218); transition: left 0.5s ease; z-index: -1; }
.button:hover, .button-transpa:hover { color: #fff; transform: scale(1.1); }  
.button:hover::before, .button-transpa:hover::before { left: 0; }

.button-transpa { background: transparent; padding: 1rem 2rem; border-radius: var(--radious); color: var(--textColor); border: 1px solid var(--secColor);  overflow: hidden; z-index: 1; transition: transform 0.3s ease, color 0.3s ease; position: relative; display: inline-block;}


.btn { background: var(--fourthColor); color: var(--textColor); padding: .7rem 1.5rem; border-radius: var(--radious);  }
#nav-menu .active a { color: var(--secColor); }

/* header */
header {padding: 1.5rem;background: var(--priColor);}
.header-con { display: flex; justify-content: space-between; align-items: center;}
.main-logo { width: 5rem;display: block;}
.main-logo figure{ }
.main-logo figure img{ }
.header-info { display: flex; flex-direction: row-reverse; align-items: center;gap: 4rem;}
.header-info .social-media{display: flex;gap: 1rem;}
.header-info .social-media li{}
.header-info .social-media li a{}
.header-info .social-media li figure{}
.header-info .social-media li figure img{}

header .contact-info { }
header .contact-info li{ position: relative;padding: 0 0 0 3rem;color: var(--headingColor);}
header .contact-info li::after{ content: url('images/icon/phone.png');position: absolute;left: 0;}
header .contact-info li:nth-child(2)::after{ content: url('images/icon/mail.png');position: absolute;left: 0;}


/* Navigation  */
nav {overflow: hidden;}
.nav-con { }
#hamburger{ width: 50px; height: 45px; position: relative;  -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .5s ease-in-out; -moz-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; transition: .5s ease-in-out; cursor: pointer; caret-color: transparent; position: relative; top: 1em;  z-index: 1001;display: none;}
#hamburger span { display: block; position: absolute; height: 4px; width: 67%; background:var(--secColor); border-radius: 9px; opacity: 1; right: 0; -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: .25s ease-in-out; -moz-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out; }
#hamburger span:nth-child(1) { top: 0px; }
#hamburger span:nth-child(2),#hamburger span:nth-child(3) { top: 11px; width: 40%; right: 0; text-align: right; margin: 0 0 0 auto;}
#hamburger span:nth-child(4) { top: 23px; }
#hamburger.open span:nth-child(1) { top: 18px; width: 0%; left: 50%; }
#hamburger.open span:nth-child(2) { -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); transform: rotate(45deg); width: 67%; }
#hamburger.open span:nth-child(3) { -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); transform: rotate(-45deg); width: 67%; }
#hamburger.open span:nth-child(4) { top: 18px; width: 0%; left: 50%; }
#nav-menu { display: flex;justify-content: center;gap: 3rem;}
#nav-menu li{ }
#nav-menu li a{ color: var(--textColor);}

.order ul { display: flex; gap: 2rem; }


/* Banner */
#banner {position: relative;height: 52.88rem;display: flex;align-items: center;}
#banner::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.6); z-index: 0; }
#banner video { position: absolute; width: 100%; height: 100%; object-fit: cover; }
.bnr-info { width: 50%; margin: 0 auto; text-align: center; position: relative;z-index: 2;}
.bnr-info h1 { font-size: clamp(1.8rem, 1.6737rem + 0.5614vw, 2.2rem); color: var(--secColor); font-weight: 400; }
.bnr-info h1 span { font-family: var(--secFont); font-size: clamp(2.6rem, 1.9684rem + 2.807vw, 4.6rem); color: var(--textColor); }
.bnr-btn { margin: 2rem 0 0; display: flex; justify-content: center; gap: 2rem; }
.bnr-btn .button { padding: 1rem 2rem; }

/* middle */
#middle {background: var(--priColor);}
.middle-con { padding: 5rem 0; display: flex;align-items: center;}
.middle-info, .sidebar {width: 50%;}
.laptop-mockup { position: relative; width: 70%; /* Adjust based on actual laptop image */ height: auto; margin: 20px auto; }
.laptop-frame { width: 100%; height: auto; display: block; filter: brightness(100) }
.laptop-screen { position: absolute; top: 46%; left: 50.5%; width: 77%; height: 82%; overflow: hidden; background: black;  transform: translate(-50%, -50%); }
.sidebar-slider { width: 100%; height: 100%; }
/* .desktop-slider img {width: 100%; height: 16rem; display: block; object-fit: cover;} */
.slick-list { cursor: pointer; }


.desktop-slider figure {
    margin: 0;
    padding: 0;
    width: 100%;
    max-width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative;
  }
.desktop-slider figure img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    object-position: center;
    max-width: 100%;
    transition: transform 0.3s ease;
    margin: 0 auto; 
  }


.middle-info h2 { font-size: clamp(1.6rem, 1.3158rem + 1.2632vw, 2.5rem); font-family: var(--priFont); font-weight: 800; margin: 0 0 3rem;}
.middle-info h2 span { font-size: clamp(2.3rem, 2.1421rem + 0.7018vw, 2.8rem); font-family: var(--secFont);}
.middle-info p { margin: 0 0 3rem; }


/* Main Area */
.main-menu { position: relative; }
.main-menu::after { content: ''; position: absolute; top: -12rem; left: -5rem; background: url('images/main/menu-left.webp') no-repeat; background-size: auto; width: 30%; height: 38%; background-size: cover; }

.main-menu::before { content: ''; position: absolute; top: 8rem; right: -16rem; background: url('images/main/menu-right.webp') no-repeat; background-size: auto; width: 30%; height: 38%; /*! background-size: cover; */ }

.main-heading {background: url('images/main/main-bg.png');background-attachment: fixed;}
.main-con { padding: 5rem 0; position: relative; z-index: 2; text-align: center;}
.main-heading { position: relative; }
.main-con { padding: 5rem 0;}
.main-heading { position: relative; }
.main-heading-info h2 span { font-family: var(--secFont); font-style: normal; width: 70%; margin: 2rem auto 3rem; color: var(--secColor); text-shadow: -7px -1px 10px rgba(136, 44.22203708353025, 9.100543478260866, 0.87); font-size: clamp(2.3rem, 2.1421rem + 0.7018vw, 2.8rem);}
.main-heading::after { content: ''; position: absolute; top: 0; left: 0; background: rgba(0, 0, 0, 0.7); width: 100%; height: 100%; }
.main-heading h2 { font-family: var(--thirdFont); font-style: italic; text-align: center; font-size: clamp(1.6rem, 1.3158rem + 1.2632vw, 2.5rem);}

.main-menu { background: var(--thirdColor); }
.menu-section { display: flex; flex-wrap: wrap;gap: 3rem; width: 100%;margin: 0 auto;justify-content: space-between;}
.menu-section section { width: 45%; display: flex; gap: 3rem; align-items: center;}
.menu img { width: 70%; margin: 0 auto; }
main .menu-info, main.menu {width: 50%;}
.menu-info h3 { color: var(--secColor); }
.menu p { font-family: var(--secFont); }
.main-menu { padding: 10rem 0; }


/* Buttom */
#bottom {}
#bottom-top {background: url('images/bottom/bottom-bg.webp'); position: relative; padding: 10rem 0; background-attachment: fixed;}
#bottom-top::after{ content: ''; position: absolute; top: 0; left: 0; background: rgba(0, 0, 0, 0.6);width: 100%;height: 100%;}
.btm-top-con { position: relative; z-index: 1; }
.header-icon img { margin: 0 auto; width: 5rem; }
.header-icon {position: relative;}
.header-icon::after { content: ''; position: absolute; top: 50%; left: 17rem; width: 25%; height: 2px; background: var(--textColor); transform: translateY(-50%); }
.header-icon::before { content: ''; position: absolute; top: 50%; right: 17rem; width: 25%; height: 2px; background: var(--textColor); transform: translateY(-50%); }
.btm-top-con { text-align: center; }
.btm-top-con h3 { margin: 3rem 0; font-family: var(--priFont); font-weight: 400; }
.btm-top-con h3 span { font-size: 3.5rem; font-family: var(--secFont); color: var(--secColor); margin: 1rem 0 0;}
#wave { position: absolute; bottom: 0; }

#bottom-middle {background: var(--priColor);}
.btm-middle-info {display: flex; flex-wrap: wrap; align-items: center;justify-content: space-between;margin: 3rem 0 0;}
.testimonials, .btm-middle-con .sidebar {width: 40%;}
.testimonials section { display: flex !important; align-items: center;background: #161515;padding: 2rem;}
.testimonials section p { text-align: left; padding: .1rem 0 0;}
.testimonial-heading { display: flex;  gap: 2rem; margin: 0 0 2rem;}
.testimonials section img { border-radius: 50%;  }
.testimonial-heading h4 { font-family: var(--thirdFont); font-style: italic; font-size: 1.2rem; }
.testimonials .info { position: relative; }
.testimonials .info::before { content: '\275D'; top: -2rem; color: var(--textColor); font-size: 3rem; left: -1rem; position: absolute; }
.testimonials .info::after { content: '\275E'; bottom: -3rem; color: var(--textColor); font-size: 3rem; right: 0px; position: absolute; }
.btm-middle-con h2 { color: var(--secColor); text-align: center;font-size: 2.5rem;}
.testimonial-heading figure { width: 14%; }
#bottom-middle { padding: 5rem 0; }

/* footer */
footer {}
.ftr-con { padding: 5rem 0;display: flex;justify-content: space-between;gap: 7rem;}
.ftr-info { }
.footer-logo { width: 40%; margin: 0 0 3rem; }
.ftr-info h3{ }
.ftr-info ul{ }
.ftr-info ul li{ font-size: 1.1rem;font-weight: 600;}
.ftr-info ul li span{ }
.ftr-info ul li a{ color: var(--textColor);font-weight: 400;}
.map { }
.map iframe{ }
.copyright { margin: 6rem 0 0 0; font-size: clamp(1rem, 0.9437rem + 0.25vw, 1.1rem); font-weight: 600; }
main .menu { display: flex; flex-direction: column; justify-content: center; text-align: center; gap: 2rem; }


/* Footer */
footer { background: var(--priColor); }
.ftr-logo { display: flex; align-items: center; gap: 2rem;}
.ftr-logo figure { width: 4rem; }
.ftr-logo h3 { font-family: var(--priFont); }
.ftr-logo-info p { font-size: .9rem; margin: 1rem 0 0; }
.ftr-left-sidebar { width: 35%; }
.location iframe { width: 100%; height: auto; object-fit: cover; display: block; }
.ftr-left-sidebar .social-media { display: flex; gap: .6rem; }
.useful-link { width: 15%; }
.ftr-con h4 { font-family: var(--priFont); }
.ftr-con ul { margin: 1rem 0 0; }
.ftr-con ul li{font-size: .9rem;}
.ftr-con ul li a { color: var(--secColor); }
.contact-info ul { margin: 1rem 0 2rem; }
.contact-info ul li { position: relative; padding: 0 0 0 2.5rem; }
.contact-info ul li::after { content: ''; position: absolute; background: url('images/icon/call.png') no-repeat; width: 2rem; height: 2rem; left: 0; }
.contact-info ul li:nth-child(2):after { content: ''; position: absolute; background: url('images/icon/email.png') no-repeat; width: 2rem; height: 2rem; left: 0; }
.contact-info ul li:nth-child(3):after { content: ''; position: absolute; background: url('images/icon/location.png') no-repeat; width: 2rem; height: 2rem; left: 0; top: 50%; transform: translateY(-50%);}
.contact-info ul li:nth-child(4):after { content: ''; position: absolute; background: url('images/icon/web.png') no-repeat; width: 2rem; height: 2rem; left: 0; }
.location h4 { margin: 0 0 1rem; }
.contact-info .button { padding: .6rem 1rem; font-size: .9rem; }
.toggle-icon {display: none;}
#status-message { margin-top: 20px; padding: 10px; border-radius: 4px; display: none; }
.success { background-color: #d4edda; color: #155724; }
.error { background-color: #f8d7da; color: #721c24; }



/* Nonhome-pages */
#breadcrumbs { font-size: 17px;  border-bottom: 1px dotted var(--fourthColor); padding: 0 0 18px; color: var(--fourthColor); margin: 0 0 3rem;}
#breadcrumbs span { display: inline-block; }
#breadcrumbs a { color: var(--fourthColor); }
.nh-main-con { padding: 3rem 0; }

#nh-bnr { background-size: cover; background-position: center center; position:  relative;}
#nh-bnr::after {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5);}
.nh-bnr-con {height: 32rem; display: flex; align-items: center; justify-content: center; position: relative; z-index: 2;}
.nh-bnr-con h1 { font-size: clamp(1.8rem, 1.6737rem + 0.5614vw, 2.2rem); color: var(--secColor); font-weight: 400; text-align: center;}



/* About us  */
#nonhome { background: var(--priColor); }
.about-section-1 { position: relative; padding: 0 0 3rem; text-align: center; height: 35rem;}       
/* .about-section-1::after { content: ''; position: absolute; top: 0; left: 50%; width: 1920px; max-width: 1920px; margin: 0 auto; background: var(--priColor); height: 100%; transform: translateX(-50%); z-index: -1; } */
.about-section-1 h2 { color: var(--secColor); margin: 0 0 1rem;}
.about-section-1 figure { width: 43rem; margin: 0 auto; position: absolute; left: 50%; transform: translateX(-50%); z-index: 1;}
.about-section-1 p { margin: 0 0 3rem; }


.about-section-2 { position: relative;padding: 15rem 0 7rem; display: flex; gap: 13rem}
.about-section-2::after { content: ''; position: absolute; top: 0; left: 50%; width: 1920px; max-width: 1920px; margin: 0 auto; background: #FEF1E4; height: 100%; transform: translateX(-50%);  }
.about-section-2 .content { position: relative; z-index: 1; }
.about-section-2 h2 { color: var(--secColor); font-size: 2.2rem;  margin: 0 0 3rem; position: relative; }
.about-section-2 h2::after { content: ''; position: absolute; bottom: -1rem; left: 0; width: 6rem; height: .3rem; background: var(--secColor); }
.about-section-2 h2 span { color: var(--secColor); font-size: clamp(2.3rem, 1.9842rem + 1.4035vw, 3.3rem); }
.about-section-2 p { color: var(--priColor); }
.about-section-2 .content,  .about-section-2 .sidebar {width: 50%; position: relative; z-index: 1;}
.about-section-2 .content p:last-of-type { margin: 0 0 2rem; }


.about-section-3 { position: relative; padding: 5rem 0; }
.about-section-3::after { content: ''; position: absolute; top: 0; left: 50%; width: 1920px; max-width: 1920px; margin: 0 auto; background: url('images/au-bg.jpg') no-repeat center / cover; height: 100%; transform: translateX(-50%);  }

.about-section-3::before { content: ''; position: absolute; top: 0; left: 50%; width: 1920px; max-width: 1920px; margin: 0 auto; background:rgba(0, 0, 0, 0.7); height: 100%; transform: translateX(-50%); z-index: 1;  }
.au-section-3-con { position: relative; z-index: 1; display: flex; justify-content: space-evenly; }
.au-section-3-con section { background: #000000d6; padding: 2rem; width: 40%; position: relative; }
.au-section-3-con section h3 { color: var(--secColor); }
.au-section-3-con section::after { content: ''; position: absolute; top: 0; left: 0; width: .5rem; height: 6rem; background: var(--secColor); }


/* Menu */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

.header {
    padding: 20px;
    color: #FFF;
    margin-bottom: 20px;
}

.header h1 {
    font-size: 32px;
    margin: 0;
    text-transform: uppercase;
    color: #FF5733;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.controls {
    margin: 15px 0;
    display: flex;
    justify-content: center;
    gap: 20px;
}

.controls button {
    background: #FF5733;
    color: white;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 5px;
    font-weight: bold;
    transition: background 0.3s;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.controls button:hover {
    background: #E64A19;
}

#flipbook {
    width: 800px;
    height: 600px;
    margin: 0 auto;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.7);
    cursor: pointer;
}

#flipbook .page {
    background: #F7F7F7;
    background-size: 100% 100%;
    position: relative;
}

.page-wrapper {
    -webkit-perspective: 2000px;
    perspective: 2000px;
}

.click-area {
    position: absolute;
    top: 0;
    width: 30%;
    height: 100%;
    z-index: 10;
}

.page.back.turn-page.p8 { background: var(--fourthColor) !important; display: flex; flex-direction: column; align-items: center; position: relative;}

.page.back.turn-page.p8 p {position: relative;}

.page.back.turn-page.p8 p::after { content: ''; position: absolute; background: url('images/icon/location.png') no-repeat; width: 2rem; height: 2rem; left: 0; top: 50%; transform: translateY(-50%);}

.click-area.left {
    left: 0;
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23FF5733" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 18l-6-6 6-6"/></svg>'), auto;
}

.click-area.right {
    right: 0;
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="%23FF5733" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 18l6-6-6-6"/></svg>'), auto;
}

.page-corner {
    position: absolute;
    width: 50px;
    height: 50px;
    bottom: 0;
    right: 0;
    background: linear-gradient(135deg, transparent 50%, rgba(255,87,51,0.3) 50%);
    z-index: 20;
    cursor: grab;
    border-radius: 0 0 0 10px;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { opacity: 0.5; }
    50% { opacity: 1; }
    100% { opacity: 0.5; }
}

.hard {
    background: #C93A27 !important;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    text-transform: uppercase;
    padding: 20px;
    box-sizing: border-box;
}
#page-num { color: white; margin-top: 15px; font-size: 16px; display: flex; justify-content: center; }

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

.footer {
    margin-top: 20px;
    color: #FFF;
    font-size: 14px;
    padding: 10px;
}

/* Add responsive styles */
@media (max-width: 850px) {
    #flipbook {
        width: 600px;
        height: 450px;
    }
}

@media (max-width: 650px) {
    #flipbook {
        width: 400px;
        height: 300px;
    }
}

@media (max-width: 450px) {
    #flipbook {
        width: 300px;
        height: 225px;
    }
    .header h1 {
        font-size: 24px;
    }
    .controls button {
        padding: 8px 16px;
        font-size: 12px;
    }
}

/* Loading indicator */
.loader {
    border: 5px solid #f3f3f3;
    border-top: 5px solid #FF5733;
    border-radius: 50%;
    width: 50px;
    height: 50px;
    animation: spin 1s linear infinite;
    margin: 20px auto;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Contact Us  */
.section-ctc-1 { padding: 0 0 3rem; }
.ctc-header-info { width: 50%; margin: 0 auto; text-align: center; }
.ctc-header-info h2 { text-align: center; }
.section-ctc-1 .contact-info { display: flex; justify-content: center; gap: 4rem; position: relative;}
.section-ctc-1 .contact-info::after { content: ''; position: absolute; top: 0; left: 50%; width: .3rem; height: 7rem; background: var(--secColor); transform: translateX(-50%); }
.section-ctc-1 h2 { color: var(--secColor); } 
.section-ctc-1 .contact-info h3 { text-align: right; }
.section-ctc-1 .contact-info section { width: 20%; text-align: right; }
.section-ctc-1 .contact-info section + section h3 { text-align: left; }
.section-ctc-1 .contact-info section + section { text-align: left; }
.section-ctc-1 .contact-info a { color: var(--textColor); }
.section-ctc-1 .ctc-header-info p { margin: 0 0 2rem; }
.ctc-header-info h2 span { font-size: clamp(1.5rem, 1.3421rem + 0.7018vw, 2rem); color: var(--textColor); margin: 0 0 2rem; }
.section-ctc-1 section li::after { all: unset; }
.section-ctc-1 section li:nth-child(2)::after { all: unset; }
.section-ctc-1 section li:nth-child(3)::after { all: unset; }
.section-ctc-1 .contact-info ul li{padding: 0;}
.section-ctc-1 .contact-info ul { display: flex; flex-wrap: wrap; }

/* Form */
.section-ctc-2 {display: flex; position: relative; padding: 5rem 0;}
.section-ctc-2::after { content: ''; position: absolute; top: 0; left: 50%; width: 1920px; max-width: 1920px; margin: 0 auto; background: #FEF1E4; height: 101%; transform: translateX(-50%); }
.ctc-contact-details, form { width: 50%; position: relative; z-index: 1;}
label {display: block; color: var(--priColor); margin: 0 0 1rem;}
.form-con {display: flex; gap: 2rem; margin: 0; }
form input { width: 100%; padding: .8rem 1rem; border-radius: .5rem; border: 1px solid #e3d4d4;} 
form textarea {width: 100%; border-radius: .5rem; border: 1px solid #e3d4d4; padding: .5rem 1rem}
.form-con .form-group { width: 50%; }
form div { margin: 0 0 1.5rem; }
.section-ctc-2 h3 { color: var(--secColor); }
.ctc-contact-details p, .ctc-contact-details li { color: var(--secFont); }
button { background: var(--secColor); border: unset; padding: 1rem 3rem; border-radius: 2rem; color: var(--textColor); text-align: center; cursor: pointer; }
.ctc-info { display: flex; width: 100%; margin:0 0 3rem; }
.ctc-info section { width: 50%; }
.ctc-info section ul { display: flex; flex-wrap: wrap; }
.ctc-info section a {color: var(--priColor)}
.ctc-info section p a {font-weight: 400;}
.map-con { display: flex; position: relative; z-index: 1;}
.map-con section { width: 50%; }
.map-con { gap: 2rem; }
.ctc-contact-details .map { width: 90%; }
.map-con section { display: flex; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5); background: var(--fourthColor); border-radius: 1rem; overflow: hidden;}
.map-info, .map {width: 50%;}
.map-info { padding: 2rem; }
.map-con .map iframe { width: 100%; height: 100%; }
.open-hours { display: flex; justify-content: space-between; position: relative; }
.section-3-header figure { width: 4rem; margin: 0 auto 1rem; }
.section-3-header { position: relative; z-index: 1;}
.open-hours::after { content: ''; position: absolute; top: -.7rem; left: 0; width: 100%; background: var(--bgColor); height: 1px; }
.section-ctc-3 {  position: relative; padding: 0 0 5rem;}
.section-ctc-3::after {content: ''; position: absolute; top: 0; left: 50%; width: 1920px; max-width: 1920px; margin: 0 auto; background: #FEF1E4; height: 100%; transform: translateX(-50%); }
.open-hours-h3 {text-align: center; color: var(--secColor); margin: 0 0 3rem; position: relative; z-index: 1; font-size: 2rem;}

iframe { display: none; }
#successMessage, #errorMessage { padding: 1rem; margin-top: 1rem; display: none; text-align: center; }
#successMessage { background-color: #d4edda; color: #155724; }
#errorMessage { background-color: #f8d7da; color: #721c24; }

/* History */
.history { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; }
.history-info, .history .sidebar { width: 48%; } 
.history-info h3 { color: var(--secColor); }
.history-info .second { margin: 2.5rem 0 1.5rem; position: relative; padding: 0 0 0 1rem; }
.history-info .second::after { content: ''; position: absolute; top: 50%; left: 0; width: .5rem; height: 60%; background: var(--thirdColor); transform: translateY(-50%); }
.middle-info, .sidebar { width: 50%; }
.history .sidebar img {border-radius: .5rem;}


/* Admin */
.display-name { display: contents; }