@font-face { font-family: 'Amnesia'; src: url('./amnegia.ttf') format('truetype'); font-weight: normal; font-style: normal; } @font-face { font-family: 'Montserrat'; src: url('./Montserrat-VariableFont_wght.ttf') format('truetype'); font-weight: 100 900; font-style: normal; } /* Footer contact icon rows */ .footer-section .contact .text, .footer-section .contact .text a { color: #fff !important; } .footer-section .contact .badge { width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #e75d3c !important; } .footer-section .contact .badge i { font-size: 1.15rem; color: #fff !important; } .footer-section .contact .d-flex.align-items-center:nth-child(1) .badge { background: #e75d3c !important; } .footer-section .contact .d-flex.align-items-center:nth-child(2) .badge { background: #16a085 !important; } .footer-section .contact .d-flex.align-items-center:nth-child(3) .badge { background: #f1c40f !important; } .footer-section .contact .d-flex.align-items-center:last-child .badge { background: #f1c40f !important; } .footer-section .contact .d-flex.align-items-center { gap: 10px; } /* Custom borders for specific about images using logo colors */ .about-section img[src*="about.jpg"] { border: clamp(10pt, 4vw, 15pt) solid #e75d3c; /* box-shadow: 0 0 0 6px #0E0E57, 0 0 0 12px #fff; */ border-radius: 18px; } .about-section img[src*="presentation.jpg"] { border: clamp(10pt, 4vw, 15pt) solid #fec23f; /* box-shadow: 0 0 0 6px #0E0E57, 0 0 0 12px #fff; */ border-radius: 18px; } .about-section img[src*="founder.jpg"] { border: clamp(10pt, 4vw, 15pt) solid #65a69c; /* box-shadow: 0 0 0 6px #0E0E57, 0 0 0 12px #fff; */ border-radius: 18px; } /* About section image border using logo colors */ .about-section p { font-size: 20px; ; } .about-section img { border: 4px solid #f7d64a; /* logo yellow */ box-shadow: 0 0 0 6px #0E0E57, 0 0 0 12px #fff; /* dark blue, then white */ border-radius: 18px; } /* Adjust space between centered logo and nav links */ .navbar-nav>.nav-item.menu-logo { width: 200px; min-width: 200px; max-width: 200px; display: flex; align-items: center; justify-content: center; padding-left: 0; padding-right: 0; } .navbar-nav>.nav-item.menu-logo+.nav-item { margin-left: 16px; } .navbar-nav>.nav-item:not(.menu-logo):not(:first-child):not(:last-child) { margin-right: 8px; } /* Centered logo in navbar menu */ .navbar-logo-center img { height: 40px; width: auto; display: block; margin: 0 auto; padding: 0 8px; } .navbar-nav .navbar-logo-center { pointer-events: none; /* Prevents tab/hover/focus, logo is decorative in menu */ } /* 🔥 MOBILE NAV FIX (ADD BELOW EXISTING MOBILE NAV CODE) */ /*------------------------ Theme Name: Thinking Elephents Ad Fims version: 1.0 -----------------------------*/ @import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap'); /*------------------------------------------ +++++ Basic settings+++++ -------------------------------------------*/ html { scroll-behavior: smooth; } body { font-family: 'Open Sans', sans-serif; /*---Basic Font family------*/ background-color: #ffffff; /* global page background */ color: #000000; /* regular font color */ } h1, h2, h3, h4, h5, h6 { font-family: "Noto Sans", sans-serif; /*---Basic Title Font family------*/ } a, a:hover { text-decoration: none; /*---Link underline remove------*/ } /* Professional section separators on white background */ .philosophy-section, .mission-section, .founder-section, .offer-section, .presentation-section, .team-section, .team-profile-section, .testimonial-section, .sponsor-section, .blog-section, .portfolio-section, .contact-section, .faq-section, .social-section, .pricing-section, .service-section, .services-section { background-color: #ffffff; border-top: 1px solid #eeeeee; border-bottom: 1px solid #f4f4f4; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03); } .about-intro-hero, .about-vision-hero { border-top: none !important; border-bottom: none !important; box-shadow: none !important; } /* Force white hero backgrounds across pages */ .other-hero-section, .portfolio-hero, .services-hero { background: #ffffff !important; background-image: none !important; } /*---------------------------------------- ++++Fix the Container Width+++ -----------------------------------------*/ .container { width: 100%; max-width: 1200px; margin: auto; padding: 0 15px; } /*------------------------------------------ +++++ Menu Background +++++ Top Menu -------------------------------------------*/ /*------------------------------------------------------------------------ ***Menu Background, Dropdown menu Background,Dropdow Item Background will be Affected only for Big Screen ( minimum 768px ) ***This Background Color will be changed after Scroll ------------------------------------------------------------------------*/ .navbar, /*--Menu Background Color--*/ .navbar .dropdown-menu, /*--dropdown menu Background---*/ .navbar .dropdown-menu a:hover { /*---dropdown Menu item background color when hover -----*/ background-color: #ffffff !important; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25); /*----Menu Background Color (default)-----------*/ z-index: 9999 !important; } /*--------------------------------------------------------------- +++++ Menu Background only for big screen +++++ -----------------------------------------------------------------*/ /*------------------------------------------------------------------------ ***for Menu Background only for Big Screen ( minimum 768px ) add some padding and Bottom Border ***for Dropdown Menu only for Big Screen ( minimum 768px ) remove all Border ------------------------------------------------------------------------*/ /*-----Media Quary End-------*/ /*--------------------------------------------------------------- +++++ Menu Background only for small screen +++++ -----------------------------------------------------------------*/ /*------------------------------------------------------------------------ ***Menu only for small Screen ( maximum 992px ) i)Menu will be fixed in top ii)Menu Item will stay in center iii)Menu Background Color will be like after scroll Backround Color iv)Add some padding and margin ------------------------------------------------------------------------*/ /*-----Media Quary End-------*/ /*--------------------------------------------------------------- +++++ Menu Background when scrolled and available for only big screen +++++ -----------------------------------------------------------------*/ .navbar:is(.scrolled), /*----Menu Background color when scrolled |scrolled class is defined in j-query -----------*/ .navbar:is(.scrolled) .dropdown-menu, /*---- dropdown Menu Background and border when scroll-----------*/ .navbar:is(.scrolled) .dropdown-menu a:hover { background-color: #ffffff !important; /*-----on scrolled background color---*/ border: none; /*----on scrolled remove border ------*/ } /*------------------------------------------ ++++ Menu Logo +++ -------------------------------------------*/ .navbar img { height: clamp(46px, 8vw, 64px); /* fill the existing header height without expanding it */ max-height: 64px; /* guardrail to avoid growing the header */ width: auto; /* let width follow aspect ratio */ object-fit: contain; /* keep proportions without cropping */ display: block; } /* add a soft background behind the logo so it stays visible */ .navbar .navbar-brand { display: flex; align-items: center; justify-content: center; background: #FFF; /* logo yellow */ padding: 6px 10px; border-radius: 12px; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15); } /*------------------------------------------ +++ Menu Item +++ -------------------------------------------*/ .navbar a, .navbar .dropdown .show { font-size: clamp(10pt, 2vw, 11pt); /*----Menu font size-----*/ color: black; /* default text color */ text-transform: capitalize; /*----Menu font style----*/ font-weight: 700; /* bolder for visibility */ letter-spacing: 0.5pt; /*---Menu font letter spacing----*/ padding: -10px; /* button-like padding */ margin: auto; border-radius: 999px; /* pill shape */ background: transparent; /* default: no fill */ box-shadow: none; transition: background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease; } /* add breathing room between menu buttons */ .navbar .navbar-nav .nav-item { margin: 0 6px; width: 120px; text-align: center; } .navbar a:hover, .navbar a:focus { color: #050505; background: rgba(247, 214, 74, 0.35); /* subtle logo yellow tint on hover */ box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18); transform: translateY(-1px); } .navbar .active:not(.dropdown-toggle) { color: #050505; /* dark text on yellow */ background: #f7d64a; /* logo yellow when selected */ box-shadow: 0 10px 24px rgba(247, 214, 74, 0.35); } /*------------------------------------------------------------------- ++++ Dropdown Menu only available for small screen +++ -------------------------------------------------------------------*/ /*-----Media Quary End-------*/ /*-------------------------------------------------------------- Small Screen Button | Button to show menu | button only available in small screen ---------------------------------------------------------------*/ /*------------------------------------------------------------------------ ***Ham berger Button ( maximum 768px )*** i)Remove Button Border,Remove shadow ii)'X' button will be available after clicking Hamberger Button ------------------------------------------------------------------------*/ .navbar .navbar-toggler { border: none; /*--on small screen collapse button border remove---*/ } .navbar .navbar-toggler i { color: #F2707E !important; /*----On small screen collapse button color-----*/ font-size: 18pt; /*------On small screen Collapse button size------*/ } .navbar .navbar-toggler .close { display: none; /*----On small screen 'X' button is invisible | after clicking 'Hamburger' button 'X' button will be displayed-------*/ } .navbar .navbar-toggler:focus { outline: none !important; /*------remove outline of Collapse button On small screen ---------*/ box-shadow: none !important; /*----remove shadow of collapse button on small screen-----*/ } /*----------------------------------------- Menu Social Icon ------------------------------------------*/ /*------------------------------------------ Right Side Social media is only available in Big Screen --------------------------------------------*/ .navbar .btn-square { border: 2px solid rgba(14, 14, 87, 0.2); /* softer border */ color: #0E0E57; /* default fallback */ transition: all cubic-bezier(0.455, 0.03, 0.515, 0.955); /*-------Social button transform on click animation---------*/ display: flex; justify-content: center; align-items: center; width: 25pt; height: 25pt; margin-right: 5pt; } .navbar .btn-square:hover { background-color: rgba(14, 14, 87, 0.08); /* subtle hover */ color: inherit; /* keep brand color */ } .navbar .btn-square i { font-size: clamp(8pt, 1vw, 9pt); /*-------Social Icon font size---------*/ } /* brand colors for header social icons */ .navbar .btn-square .fa-facebook-f { color: #1877F2; } .navbar .btn-square .fa-x-twitter { color: #000000; } .navbar .btn-square .fa-linkedin-in { color: #0A66C2; } .navbar .btn-square .fa-instagram { color: #E1306C; } .navbar .btn-square .fa-youtube { color: #FF0000; } .navbar .btn-square .fa-tiktok { color: #000000; } /*--------------------------------------------- +++Hero Section ( Front Page )+++ -----------------------------------------------*/ /*---------------------------- Fix the slide position -----------------------------*/ .HeroSection .carousel-item { /*----adjust Slide Height and Width-----*/ transition: opacity ease-out 0.5s; /*----slide image change with opacity-----*/ height: clamp(250pt, 60vw, 550pt); /*---- Slide Height -----*/ width: 100%; /*--Slide Full Width---*/ position: relative; text-align: center; isolation: isolate; z-index: 1; } /*-------------------------------- fix slide Image position -----------------------------------*/ .HeroSection img { /*---- Slide Image|| every image act like a background iamge-----*/ width: 100%; /*----Slide Image full width-----*/ height: 100%; /*----Slide image take full width-----*/ position: absolute; /*-----Slide Image take absolute position----------*/ top: 0; left: 0; object-fit: cover; } /*-------------------------------- Change slide Image Color -----------------------------------*/ .HeroSection .slide-bg::after { /*-----------Backround over slide image || Slide bg is the div that contain slide image---------------*/ content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.5); background-blend-mode: multiply; } /*------------------------------------------------------------- +++ Slide Text ( Hero Section--Front Page )+++ --------------------------------------------------------------*/ /*-------------------------------- Text Holder fix slide Text position -----------------------------------*/ .HeroSection .text-box { /*----Slide Text Holder----*/ position: absolute; top: 55%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); width: 100%; padding: 18px 24px; background: rgba(255, 0, 0, 0.65); /* red translucent background layer */ border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); } /*-------------------------------- Slide Title-1 -----------------------------------*/ .HeroSection h4 { /*-----Section title-1 -------*/ font-size: clamp(8pt, 2vw, 11pt); font-family: "Montserrat", sans-serif; text-transform: capitalize; font-weight: normal; text-align: center; color: #0dd3ff; width: clamp(156pt, 65%, 700pt); display: block; margin: 5pt auto; letter-spacing: 2pt; text-wrap: pretty; } /*-------------------------------- Slide Title-2 -----------------------------------*/ .HeroSection h1 { /*-----Section title-2 -------*/ font-size: clamp(12pt, 5vw, 42pt); text-transform: uppercase; font-weight: bolder; padding-bottom: 0.5vw; text-align: center; color: #ffffff; width: clamp(156pt, 65%, 700pt); display: block; margin: auto; letter-spacing: 2pt; text-wrap: pretty; } /* Hero video banner brand highlight */ .hero-video-section .text-box h1 { display: inline-block; background: rgba(247, 214, 74, 0.9); /* logo yellow with slight opacity */ color: #0E0E57; padding: 10px 16px; border-radius: 12px; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25); } /*-------------------------------- Slide Text -----------------------------------*/ .HeroSection p { /*-----Section text-------*/ font-weight: normal; font-size: clamp(6pt, 2vw, 10pt); color: #cccccc; width: clamp(212pt, 65%, 800pt); display: block; margin: auto; padding-bottom: 2vw; text-wrap: balance; } .HeroSection .btn { /*-----Section Button---------*/ font-size: clamp(6pt, 2vw, 12pt); padding: clamp(4pt, 1vw, 10pt) clamp(15pt, 3vw, 30pt); border: none; border-radius: 30px; text-transform: uppercase; font-weight: bolder; box-shadow: 6px 6px 12px rgba(0, 0, 0, 0.1), -6px -6px 12px rgba(0, 0, 0, 0.15) inset, 6px 6px 12px rgba(255, 255, 255, 0.25) inset, -6px -6px 12px rgba(255, 255, 255, 0.05); } .HeroSection .btn1, .HeroSection .btn1:hover, .HeroSection .btn1:active { /*-----hero section Button 1 ---------*/ border: none; background-color: #ffffff; box-shadow: 6px 6px 12px rgba(0, 0, 0, 0.1), -6px -6px 12px rgba(0, 0, 0, 0.15) inset, 6px 6px 12px rgba(255, 255, 255, 0.25) inset, -6px -6px 12px rgba(255, 255, 255, 0.05); } .HeroSection .btn1 a, .HeroSection .btn1 a :hover { /*-----hero section Button 1 when hover---------*/ color: #F2707E; } .HeroSection .btn2, .HeroSection .btn2:hover, .HeroSection .btn2:active { /*-----hero section Button 2 ---------*/ border: none; background-color: #F2707E; box-shadow: 6px 6px 12px rgba(0, 0, 0, 0.1), -6px -6px 12px rgba(0, 0, 0, 0.15) inset, 6px 6px 12px rgba(255, 255, 255, 0.25) inset, -6px -6px 12px rgba(255, 255, 255, 0.05); } .HeroSection .btn2 a, .HeroSection .btn2 a:hover { /*-----hero section Button 2 when hover---------*/ color: #ffffff; } /*------------------------------------------------- +++About Section++ ( For Front page and About us page ) --------------------------------------------------*/ .about-section { overflow: hidden; /*-----Not item can exit this section ( Left or right margin) ----------*/ background-color: #A1C2FA; /* Google Blue 50% lighter */ } /*--------------------------------------------------------------- main Row ( About Section -- available in Front Page and about us page ) ----------------------------------------------------------------*/ .about-section .g-5 { /*-----row style only if has image-------------*/ display: flex; justify-content: center; padding: 6vw 0pt; } /*--------------------------------------------------------------- Main Column ( About Section -- available in Front Page and about us page ) ----------------------------------------------------------------*/ .about-section .col-12:not(.img-block) { /*-----Column padding not for image-------------*/ padding-left: 4vw; } /*-----Media Quary for maximum 1200px but more than 768px End here---------*/ /*--------------------------------------------------------------- Section Title and Text ( About Section -- available in Front Page and about us page ) ----------------------------------------------------------------*/ .about-section h4:not(.count-number) { /*-----Title1-------------*/ text-transform: uppercase; color: #000000; font-weight: normal; font-size: clamp(10pt, 2vw, 11pt); font-family: "Montserrat", sans-serif; text-wrap: pretty; } .about-section h1:not(.count-number) { /*-----Title2-------------*/ font-size: clamp(21pt, 3vw, 36pt); text-transform: capitalize; color: #000000; font-weight: bolder; padding-bottom: 1vw; text-wrap: pretty; } .about-section p:not(.count-number) { /*-----Text-------------*/ font-weight: normal; font-size: 20px; color: #000000; text-wrap: pretty; } .full-screen-section { height: 100vh; /* 🔥 exact screen fit */ display: flex; align-items: center; /* vertical center */ position: relative; overflow: hidden; } /* About intro (new first section on About page) */ /* ═══════════════════════════════════════ ABOUT PAGE HERO INTRO SECTION ═══════════════════════════════════════ */ .about-intro-hero { position: relative; height: 95vh; background-color: #f5f0ed; background-image: url('../img/paper-texture.jpeg'); background-size: cover; background-position: center; background-repeat: no-repeat; overflow: hidden; padding: 120px 0 60px 0; margin-top: 70px; box-shadow: none !important; } .about-intro-hero::before { content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, 0.6); /* soft paper fade */ z-index: 0; } .about-intro-hero .container { position: relative; z-index: 2; } /* ── Decorative blobs ── */ .blob-teal { position: absolute; border-radius: 50%; background: rgba(101, 166, 156, 0.45); pointer-events: none; } .blob-teal-1 { width: 120px; height: 120px; top: 60px; right: 60px; } .blob-teal-2 { width: 80px; height: 80px; top: 200px; right: 30px; background: rgba(101, 166, 156, 0.30); } .blob-pink { position: absolute; width: 220px; height: 220px; border-radius: 50%; background: rgba(242, 178, 163, 0.50); bottom: 60px; left: -60px; pointer-events: none; } /* ── Subtitle "About Us" ── */ .aih-subtitle { font-family: 'Amnesia', Georgia, serif !important; font-size: clamp(22px, 3vw, 32px); font-weight: 400; color: #65a69c !important; margin-bottom: 12px; letter-spacing: 1px; } /* ── Main title ── */ .aih-title { font-family: 'Amnesia', Georgia, serif !important; font-size: clamp(38px, 5.5vw, 72px); font-weight: 700; color: #e75d3c !important; line-height: 1.1; margin-bottom: 18px; white-space: nowrap; /* 🚀 prevents breaking */ overflow: visible; text-transform: none !important; letter-spacing: 1.5px; } /* ── Red underline beneath title ── */ .aih-underline { width: 180px; height: 3px; background: #e75d3c; margin-bottom: 50px; } /* ── Body text ── */ .aih-text { font-family: 'Open Sans', sans-serif; font-size: clamp(15px, 1.5vw, 18px) !important; color: #2c2c2c !important; line-height: 1.85; max-width: 900px; margin-bottom: 50px; font-weight: 400; } /* ── Colored keywords in text ── */ .aih-brand { color: #e75d3c; font-weight: 700; } .aih-highlight { color: #e75d3c; font-weight: 600; } /* ── Bottom decorative line (orange solid + dashed) ── */ .aih-bottom-line { display: flex; align-items: center; gap: 6px; margin-top: 10px; } .aih-bottom-line .line-solid { display: inline-block; width: 60px; height: 3px; background: #e75d3c; border-radius: 2px; } .aih-bottom-line .line-dashed { display: inline-block; width: 60px; height: 3px; background: repeating-linear-gradient(to right, #65a69c 0px, #65a69c 8px, transparent 8px, transparent 14px); } /* COLUMN */ .aih-illustration-col { display: flex; justify-content: flex-end; align-items: flex-end; } .aih-illustration { max-width: 520px; width: 100%; display: block; margin-left: auto; position: relative; bottom: -180px; /* 🔥 pushes image DOWN without affecting text */ } /* ============================== BLOB ANIMATIONS ============================== */ /* LEFT SIDE (pink blob) */ @keyframes slideFromLeft { 0% { transform: translateX(-150px); opacity: 0; } 100% { transform: translateX(0); opacity: 1; } } /* RIGHT SIDE (teal blobs) */ @keyframes slideFromRight { 0% { transform: translateX(150px); opacity: 0; } 100% { transform: translateX(0); opacity: 1; } } .about-intro-section { padding: 6vw 0; } .about-intro-section h4 { margin-top: 1.5rem; } .about-intro-section .about-list { padding-left: 1.2rem; margin: 0.8rem 0 1.5rem 0; } .about-intro-section .about-list li { margin-bottom: 0.6rem; line-height: 1.5; } /* =============================== VISION & MISSION HERO SECTION ================================ */ .about-vision-hero { position: relative; height: 95vh; /* 🔥 EXACT SCREEN HEIGHT */ display: flex; align-items: center; padding: 0; /* ❌ remove extra space */ background: url('../img/paper-texture.jpeg') center/cover no-repeat; overflow: hidden; } /* overlay (same as hero) */ .about-vision-hero::before { content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, 0.65); z-index: 0; } .about-vision-hero .row { padding: 0 !important; margin: 0; } .about-vision-hero .container { position: relative; z-index: 2; } .about-vision-hero .container, .about-vision-hero .row { height: 100%; } /* TITLE */ .avh-title { font-family: 'Amnesia', serif; letter-spacing: 1.5px; font-size: clamp(38px, 5.5vw, 72px); font-weight: 700; margin-bottom: 20px; } .avh-green { color: #65a69c; } .avh-orange { color: #e75d3c; } /* underline */ .avh-underline { width: 180px; height: 3px; background: #e75d3c; margin-bottom: 40px; } /* TEXT */ .avh-text { font-size: 18px; line-height: 1.8; color: #333; margin-bottom: 20px; } /* bottom line */ .avh-bottom-line { display: flex; gap: 6px; margin-top: 20px; } .avh-bottom-line .line-solid { width: 60px; height: 3px; background: #e75d3c; } .avh-bottom-line .line-dashed { width: 60px; height: 3px; background: repeating-linear-gradient(to right, #65a69c 0px, #65a69c 8px, transparent 8px, transparent 14px); } /* IMAGE */ .avh-image-col { display: flex; justify-content: flex-end; align-items: flex-end; height: 100%; /* 🔥 IMPORTANT */ } .avh-image { max-width: 700px; /* 🔥 increase size */ width: 110%; /* slightly bigger than container */ display: block; margin-left: auto; position: relative; right: -100px; /* 🔥 move RIGHT */ } /* ===== SCREEN 2 BLOB ANIMATION ===== */ /* LEFT (pink) */ /* MOBILE */ /*--------------------------------------------------------------- Image ( About Section -- available in Front Page and about us page ) ----------------------------------------------------------------*/ .about-section .img-block { /*---- left column image holder or div-----*/ position: relative; height: clamp(250pt, 60vh, 420pt); } .about-section .img-block img { height: 100%; width: 100%; position: absolute; object-fit: cover; top: 0; left: 0; border: none; padding: 0; border-radius: 0; } /*---Media Quary only for ( Small Screen->maximum 768px ) End here-----------*/ /*--------------------------------------------------------------- Create a box behind the image ( About Section -- available in Front Page and about us page ) ----------------------------------------------------------------*/ .about-section .box { /*------rectangle behind the image|| Create a rectangle before the Image-------*/ top: 3%; height: 110%; width: 50%; background-color: #3B9FE5; border: clamp(10pt, 4vw, 15pt) solid #0748A7; position: absolute; z-index: -1; } /*---Media Quary only for ( Small Screen->maximum 768px ) End here-----------*/ /*--------------------------------------------------------------- About Button ( About Section -- available only in Front Page ) ----------------------------------------------------------------*/ .about-section .btn { margin-top: 1vw; padding: clamp(4pt, 1vw, 10pt) clamp(15pt, 3vw, 30pt); border: none; border-radius: 30px; background-color: #F2707E; color: #ffffff; font-size: clamp(8pt, 2vw, 11pt); text-transform: uppercase; font-weight: bolder; box-shadow: 6px 6px 12px rgba(0, 0, 0, 0.1), -6px -6px 12px rgba(0, 0, 0, 0.15) inset, 6px 6px 12px rgba(255, 255, 255, 0.25) inset, -6px -6px 12px rgba(255, 255, 255, 0.05); } .about-section .btn:hover, .about-section .btn:active { color: #ffffff; background-color: #F2707E; } /*--------------------------------------------------------------- Count number Row ( About Section -- available in Front Page and about us page ) ----------------------------------------------------------------*/ /*---------------------------- Number Counter Row ------------------------------*/ .about-section .g-5 .row { display: flex; display: -webkit-flex; justify-content: center; -webkit-justify-content: center; margin-top: 20pt; text-align: center; } /*--------------------------------------------------------------- Count Number ( About Section -- available in Front Page and about us page ) ----------------------------------------------------------------*/ /*---------------------------- Number Counter Digit ------------------------------*/ .about-section .count-number .count { font-size: clamp(16pt, 3vw, 21pt); text-align: center; color: #ffffff; font-weight: bolder; } /*--------------------------------------------------------------- Count Number Title ( About Section -- available in Front Page and about us page ) ----------------------------------------------------------------*/ /*---------------------------- Number Counter Title ------------------------------*/ .about-section .count-number .text { font-size: clamp(8pt, 2vw, 10pt); text-transform: capitalize; text-align: center; color: #f0f0f0; font-family: "Montserrat", sans-serif; text-wrap: pretty; } /* Count icons styling with animation */ .about-section .count-icon { font-size: clamp(24pt, 4vw, 36pt); text-align: center; display: block; margin-bottom: 10px; animation: iconBounce 2s ease-in-out infinite; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2)); } .about-section .col:nth-child(1) .count-icon { background: linear-gradient(135deg, #FF5252 0%, #FF9100 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: #FF5252; font-weight: 900; } .about-section .col:nth-child(2) .count-icon { background: linear-gradient(135deg, #42A5F5 0%, #00BCD4 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: #42A5F5; font-weight: 900; } .about-section .col:nth-child(3) .count-icon { background: linear-gradient(135deg, #66BB6A 0%, #1DE9B6 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: #66BB6A; font-weight: 900; } /* We Listen Louder Section - Creative Header Styling */ .listen-header { display: flex; align-items: center; gap: 12px; margin-bottom: 15px; animation: fadeInDown 0.8s ease-out; } .listen-header i { font-size: 28px; color: #FF5252; animation: pulse 2s ease-in-out infinite; } .listen-header h4 { margin: 0 !important; text-transform: uppercase; letter-spacing: 1px; background: linear-gradient(135deg, #FF5252 0%, #FF1744 50%, #FF9100 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; font-weight: 900 !important; font-size: clamp(10pt, 2vw, 14pt); } /* Creative Badges Section */ .creative-badges { display: flex; flex-wrap: wrap; gap: 12px; margin: 20px 0; animation: slideInUp 0.8s ease-out; } .badge-creative { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; background: linear-gradient(135deg, rgba(66, 165, 245, 0.15), rgba(156, 39, 176, 0.15)); border: 2px solid; border-radius: 25px; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); cursor: default; } .badge-creative:nth-child(1) { border-color: #FF5252; color: #FF5252; } .badge-creative:nth-child(1) i { color: #FF5252; } .badge-creative:nth-child(2) { border-color: #42A5F5; color: #42A5F5; } .badge-creative:nth-child(2) i { color: #42A5F5; } .badge-creative:nth-child(3) { border-color: #66BB6A; color: #66BB6A; } .badge-creative:nth-child(3) i { color: #66BB6A; } .badge-creative:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15); } .badge-creative:nth-child(1):hover { background: rgba(255, 82, 82, 0.1); border-color: #FF1744; } .badge-creative:nth-child(2):hover { background: rgba(66, 165, 245, 0.1); border-color: #1976D2; } .badge-creative:nth-child(3):hover { background: rgba(102, 187, 106, 0.1); border-color: #388E3C; } .badge-creative i { font-size: 14px; transition: transform 0.3s ease; } .badge-creative:hover i { transform: scale(1.2) rotate(5deg); } @keyframes iconBounce { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } } /*----------------------------------------------- +++ offer-section ( Front Page)+++ -------------------------------------------------*/ .offer-section { overflow: hidden; /*------Section Item Cant exit left and right Margin------------*/ background-color: #F5A19A; /* Google Red 50% lighter */ } /*---Media Quary end here---------*/ /*--------------------------------------------------------------- Section Title ( offer-section -- available in Front page ) ----------------------------------------------------------------*/ .offer-section .section-title1 { /*-----Section Title1-------------*/ text-transform: uppercase; color: #FFFFFF; font-weight: 900; font-size: clamp(10pt, 2vw, 11pt); font-family: "Montserrat", sans-serif; text-wrap: pretty; background-color: rgba(0, 0, 0, 0.3); padding: 12px 24px; border-radius: 50px; display: inline-block; letter-spacing: 2px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); } .offer-section .section-title2 { /*-----section Title2-------------*/ font-size: clamp(21pt, 3vw, 36pt); text-transform: capitalize; color: #000000; font-weight: bolder; padding-bottom: 1vw; text-wrap: pretty; } /*--------------------------------------------------------------- Section Text ( offer-section -- available in Front page ) ----------------------------------------------------------------*/ .offer-section .section-text { /*-----Section text-------------*/ font-weight: normal; font-size: clamp(9pt, 2vw, 10pt); color: #FFFFFF; padding-bottom: 1vw; text-wrap: pretty; } /*--------------------------------------------------------------- Section main Row ( offer-section -- available in Front page ) ----------------------------------------------------------------*/ .offer-section .row { /*-----all item under Row will take center position------------*/ display: flex; display: -webkit-flex; align-items: center; -webkit-align-items: center; justify-content: center; -webkit-justify-content: center; padding-top: 4vw; } /*--------------------------------------------------------------- Section main Column ( offer-section -- available in Front page ) ----------------------------------------------------------------*/ .offer-section .col-12 { position: relative; overflow: hidden; transition: all 0.5s; min-height: clamp(300pt, 65vh, 350pt); max-width: 250pt; border-radius: 20px; border-top-left-radius: 70px; margin: 10pt; background-color: #F2707E; } /*--------------------------------------------------------------- Card ( offer-section -- available in Front page ) ----------------------------------------------------------------*/ .offer-section .card { border: none !important; border-top: none !important; position: absolute; inset: 10px; border-radius: 10px; transition: all 0.4s ease; } .offer-section .col-12:nth-child(1) .card { background: linear-gradient(135deg, #FF5252 0%, #FF1744 100%); border: 3px solid #FF1744 !important; } .offer-section .col-12:nth-child(2) .card { background: linear-gradient(135deg, #FF9100 0%, #FF6F00 100%); border: 3px solid #FF6F00 !important; } .offer-section .col-12:nth-child(3) .card { background: linear-gradient(135deg, #26C6DA 0%, #00BCD4 100%); border: 3px solid #00BCD4 !important; } .offer-section .col-12:nth-child(4) .card { background: linear-gradient(135deg, #1DE9B6 0%, #00C853 100%); border: 3px solid #00C853 !important; } .offer-section .col-12:nth-child(5) .card { background: linear-gradient(135deg, #FF5252 0%, #FF1744 100%); border: 3px solid #FF1744 !important; } .offer-section .col-12:nth-child(6) .card { background: linear-gradient(135deg, #AB47BC 0%, #7E57C2 100%); border: 3px solid #7E57C2 !important; } .offer-section .col-12:nth-child(7) .card { background: linear-gradient(135deg, #EC407A 0%, #E91E63 100%); border: 3px solid #E91E63 !important; } .offer-section .col-12:nth-child(8) .card { background: linear-gradient(135deg, #42A5F5 0%, #1976D2 100%); border: 3px solid #1976D2 !important; } .offer-section .col-12:hover .card { transform: translateY(-15px) scale(1.03); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4); } .offer-section .col-12:nth-child(1):hover .card { box-shadow: 0 20px 50px rgba(255, 23, 68, 0.5), 0 0 30px rgba(255, 23, 68, 0.3) !important; } .offer-section .col-12:nth-child(2):hover .card { box-shadow: 0 20px 50px rgba(255, 111, 0, 0.5), 0 0 30px rgba(255, 111, 0, 0.3) !important; } .offer-section .col-12:nth-child(3):hover .card { box-shadow: 0 20px 50px rgba(0, 188, 212, 0.5), 0 0 30px rgba(0, 188, 212, 0.3) !important; } .offer-section .col-12:nth-child(4):hover .card { box-shadow: 0 20px 50px rgba(0, 200, 83, 0.5), 0 0 30px rgba(0, 200, 83, 0.3) !important; } .offer-section .col-12:nth-child(5):hover .card { box-shadow: 0 20px 50px rgba(255, 23, 68, 0.5), 0 0 30px rgba(255, 23, 68, 0.3) !important; } .offer-section .col-12:nth-child(6):hover .card { box-shadow: 0 20px 50px rgba(126, 87, 194, 0.5), 0 0 30px rgba(126, 87, 194, 0.3) !important; } .offer-section .col-12:nth-child(7):hover .card { box-shadow: 0 20px 50px rgba(233, 30, 99, 0.5), 0 0 30px rgba(233, 30, 99, 0.3) !important; } .offer-section .col-12:nth-child(8):hover .card { box-shadow: 0 20px 50px rgba(25, 118, 210, 0.5), 0 0 30px rgba(25, 118, 210, 0.3) !important; } /*--------------------------------------------------------------- Icon Holder ( offer-section -- available in Front page ) ----------------------------------------------------------------*/ .offer-section .icon-box { position: absolute; top: 0; left: 0; border-bottom-right-radius: 50%; height: 140px; width: 140px; background-color: rgba(255, 255, 255, 0.2); } .offer-section .col-12:nth-child(1) .icon-box { background-color: rgba(255, 23, 68, 0.3); } .offer-section .col-12:nth-child(2) .icon-box { background-color: rgba(255, 111, 0, 0.3); } .offer-section .col-12:nth-child(3) .icon-box { background-color: rgba(0, 188, 212, 0.3); } .offer-section .col-12:nth-child(4) .icon-box { background-color: rgba(0, 200, 83, 0.3); } .offer-section .col-12:nth-child(5) .icon-box { background-color: rgba(255, 23, 68, 0.3); } .offer-section .col-12:nth-child(6) .icon-box { background-color: rgba(126, 87, 194, 0.3); } .offer-section .col-12:nth-child(7) .icon-box { background-color: rgba(233, 30, 99, 0.3); } .offer-section .col-12:nth-child(8) .icon-box { background-color: rgba(25, 118, 210, 0.3); } .offer-section .icon-box::before { /*-----Before Card Icon---------*/ content: ''; position: absolute; bottom: -30px; left: 0; height: 30px; width: 30px; border-top-left-radius: 30px; background: transparent; box-shadow: -5px -5px 0 5px rgba(255, 255, 255, 0.1); } .offer-section .icon-box::after { /*-----After Card Icon---------*/ content: ''; position: absolute; right: -30px; top: 0; height: 30px; width: 30px; border-top-left-radius: 30px; background: transparent; box-shadow: -5px -5px 0 5px rgba(255, 255, 255, 0.1); } /*--------------------------------------------------------------- Icon ( offer-section -- available in Front page ) ----------------------------------------------------------------*/ .offer-section .icon { position: absolute; inset: 10px; border-radius: 10px; border-top-left-radius: 50%; border-bottom-right-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: clamp(42pt, 3vw, 60pt); transition: all 0.5s ease; background-color: rgba(255, 255, 255, 0.15); color: #FFFFFF; animation: floatIcon 3s ease-in-out infinite; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3); } @keyframes floatIcon { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-10px); } } /*--------------------------------------------------------------- Icon when hover ( offer-section -- available in Front page ) ----------------------------------------------------------------*/ .offer-section .card :hover .icon { /*-----Col1 Icon holder when hover---------*/ background-color: rgba(255, 255, 255, 0.25); color: #FFFFFF; transform: scale(1.2) rotate(10deg); box-shadow: 0 0 40px rgba(255, 255, 255, 0.6); animation: none; } /*--------------------------------------------------------------- Card Body ( offer-section -- available in Front page ) ----------------------------------------------------------------*/ .offer-section .card-body { position: absolute; top: 150px; padding: 20px; text-align: center; display: flex; justify-content: center; flex-direction: column; color: #FFFFFF; } .offer-section .card-title { font-size: clamp(12pt, 2vw, 14pt); font-weight: 900; letter-spacing: 2px; text-transform: uppercase; color: #FFFFFF; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); } .offer-section .card-text { font-size: clamp(8pt, 2vw, 10pt); color: #FFFFFF; text-wrap: pretty; font-weight: 600; line-height: 1.5; } /*--------------------------------------------------------------- Offer Button ( offer-section -- available in Front page ) ----------------------------------------------------------------*/ .offer-section a { display: inline-flex; align-self: center; padding: 10px 25px; text-decoration: none; text-transform: uppercase; font-size: clamp(8pt, 2vw, 11pt); font-weight: 600; border-radius: 30px; box-shadow: 6px 6px 12px rgba(0, 0, 0, 0.1), -6px -6px 12px rgba(0, 0, 0, 0.15) inset, 6px 6px 12px rgba(255, 255, 255, 0.25) inset, -6px -6px 12px rgba(255, 255, 255, 0.05); border: 2px solid #F2707E; background-color: #F2707E; color: #ffffff; margin-bottom: 10pt; } /*--------------------------------------------- *Presentation Section* available in Front page -----------------------------------------------*/ .presentation-section { /*-----Background Style-------------*/ background-image: url(../img/presentation.jpg); background-position: center center; background-attachment: fixed; background-repeat: no-repeat; background-size: cover; background-color: #FDDE82; /* Google Yellow 50% lighter */ background-blend-mode: multiply; object-fit: cover; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); margin: 2vw; border: 10px solid #ffffff; overflow: hidden; position: relative; padding: 8vw 0pt; } /*--------------------------------------------------------------- Section main Row ( presentation-section -- available in Front page ) ----------------------------------------------------------------*/ .presentation-section .row { /*-----Row Style-------------*/ display: flex; display: -webkit-flex; align-items: center; -webkit-align-items: center; justify-content: center; -webkit-justify-content: center; } /*--------------------------------------------------------------- Section Column ( presentation-section -- available in Front page ) ----------------------------------------------------------------*/ .presentation-section .col-12 { /*-----Column Style-------------*/ margin-bottom: 1vw; } .presentation-section .offer-col { text-align: right; } .presentation-section .presentation-col { text-align: left; } .presentation-section .video-col { display: flex; display: -webkit-flex; align-items: center; -webkit-align-items: center; justify-content: center; -webkit-justify-content: center; } .presentation-section h2 { /*-----Title left side Style-------------*/ font-size: clamp(11pt, 3vw, 21pt); color: #ffffff; font-weight: bolder; padding-bottom: 1vw; text-wrap: pretty; text-transform: capitalize; letter-spacing: 1pt; word-spacing: 3pt; } .presentation-section p { /*-----Text right side Style-------------*/ text-transform: initial; font-size: clamp(9pt, 2vw, 14pt); color: #ffffff; } .presentation-section .video { position: absolute; left: 0; top: 0; min-width: 100%; min-height: 100%; } .presentation-section .video { display: none; height: 100%; width: 100%; object-fit: cover; } .presentation-section .play-btn { /*-----Video display button--------*/ width: clamp(40pt, 5vw, 100pt); height: clamp(40pt, 5vw, 100pt); background-color: #F2707E; border-radius: 50%; position: relative; display: block; margin: auto; box-shadow: 0px 0px 25px 3px rgba(255, 235, 255, 0.8); transition: all 0.3s ease; animation: playPulse 2s infinite; cursor: pointer; } .presentation-section .play-btn:hover { transform: scale(1.15); box-shadow: 0px 0px 40px 8px rgba(242, 112, 126, 1); } @keyframes playPulse { 0%, 100% { box-shadow: 0px 0px 25px 3px rgba(255, 235, 255, 0.8); } 50% { box-shadow: 0px 0px 40px 10px rgba(242, 112, 126, 0.9); } } .presentation-section .play-btn::after { /* create triangle */ content: ""; position: absolute; left: 50%; top: 50%; -webkit-transform: translateX(-40%) translateY(-50%); transform: translateX(-50%) translateY(-50%); transform-origin: center center; width: 0; height: 0; border-top: 15px solid transparent; border-bottom: 15px solid transparent; border-left: 25px solid #fff; z-index: 100; -webkit-transition: all 400ms cubic-bezier(0.55, 0.055, 0.675, 0.19); transition: all 400ms cubic-bezier(0.55, 0.055, 0.675, 0.19); } .presentation-section .play-btn:before { /* pulse wave */ content: ""; position: absolute; width: 150%; height: 150%; -webkit-animation-delay: 0s; animation-delay: 0s; -webkit-animation: pulse_animate 2s; animation: pulse_animate 2s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; opacity: 1; border-radius: 50%; border: 5px solid rgba(255, 255, 255, .75); top: -25%; left: -25%; background: rgba(121, 96, 254, .08); } /*------------------------------------------------- +++Team section++ ( For Front page) --------------------------------------------------*/ /*-------------------------------- Team section ------------------------------------*/ .team-section { padding: 2vw 0pt; /*---------Team Section Top and Bottom have some padding-----------------*/ overflow: hidden; background-color: #9AD4A9; /* Google Green 50% lighter */ } /*------------------------------------------- Row and Column ( Team section ) available in Front page ---------------------------------------------*/ .team-section .main-row { margin-top: 4vw; } .team-section .row { /*-------all item under row will take center position------------*/ display: flex; display: -webkit-flex; align-items: center; -webkit-align-items: center; justify-content: center; -webkit-justify-content: center; } .team-section .col-12 { margin-bottom: 1.5vw; /*------All column bottom has some margin---------*/ } /*------------------------------------------------------------ Top position Title and text ( Team section ) available in Front page ------------------------------------------------------------*/ .team-section .section-title1 { /*-----Section Title1-------------*/ text-transform: uppercase; color: #FFFFFF; font-weight: 900; font-size: clamp(10pt, 2vw, 11pt); font-family: "Montserrat", sans-serif; text-wrap: pretty; background-color: rgba(0, 0, 0, 0.3); padding: 12px 24px; border-radius: 50px; display: inline-block; letter-spacing: 2px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); } .team-section .section-title2 { /*-----section Title2-------------*/ font-size: clamp(21pt, 3vw, 36pt); text-transform: capitalize; color: #000000; font-weight: bolder; padding-bottom: 1vw; text-wrap: pretty; } .team-section .section-text { /*-----Section text-------------*/ font-weight: normal; font-size: clamp(9pt, 2vw, 10pt); color: #6a737b; padding-bottom: 1vw; text-wrap: pretty; } /*---------------------------------------------- Profile Card ( Team section ) available in Front page -----------------------------------------------*/ .team-section .g-0 { /*------Profle Card--------*/ color: #ffffff; border: clamp(10pt, 4vw, 15pt) solid #F27280; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); border-radius: 5pt; display: flex; justify-content: center; align-items: center; text-align: center; background-color: #0045A6; overflow: hidden; padding: 10pt 5pt; transition: all 0.4s ease; } .team-section .g-0:hover { transform: translateY(-10px) scale(1.02); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3); border-color: #13B2D4; } .team-section .g-0 .col-lg-12 { padding: clamp(15pt, 2vw, 30pt) 0pt; } .team-section img { /*------team member photo-----------*/ /*---Photo Height----*/ width: 150pt; /*------Photo width---------*/ height: 150pt; object-fit: cover; /*--------Photo adjust height and width-------------*/ border-radius: 50%; transition: all 0.4s ease; border: 5px solid #13B2D4; } .team-section .g-0:hover img { transform: scale(1.1) rotate(5deg); border-color: #F27280; box-shadow: 0 0 20px rgba(19, 178, 212, 0.6); } .team-section .reponsibility { /*-----Staff's Deignation | Title -------------*/ text-transform: uppercase; color: #13B2D4; font-weight: normal; font-size: clamp(7pt, 2vw, 9pt); padding-top: 20pt; } .team-section .card-title { /*----Team member name--------*/ font-size: clamp(19pt, 2vw, 21pt); font-weight: bolder; text-transform: uppercase; text-align: center; color: #ffffff; padding-bottom: 5pt; } .team-section .card-text { /*------About Team member || Information about team member------*/ font-size: clamp(8pt, 2vw, 10pt); color: #ffffff; text-wrap: pretty; padding: 0.5vw; } /* Process Card Styling - From Trunk to Tail */ .team-section .process-card { padding: 30px; border-radius: 15px; border: 3px solid; color: #ffffff; transition: all 0.4s ease; position: relative; overflow: hidden; min-height: 320px; display: flex; flex-direction: column; align-items: center; text-align: center; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); } /* Elephant-themed borders for each step */ .team-section .ear-card { border-color: #FF1744; background: linear-gradient(135deg, #FF5252 0%, #FF1744 100%); } .team-section .trunk-card { border-color: #FF6F00; background: linear-gradient(135deg, #FF9100 0%, #FF6F00 100%); } .team-section .craft-card { border-color: #00BCD4; background: linear-gradient(135deg, #26C6DA 0%, #00BCD4 100%); } .team-section .tail-card { border-color: #00C853; background: linear-gradient(135deg, #1DE9B6 0%, #00C853 100%); } /* Process step number with icon */ .team-section .process-step-number { font-size: 60px; margin-bottom: 20px; transition: all 0.4s ease; animation: iconFloat 3s ease-in-out infinite; color: #ffffff; text-shadow: 0 4px 10px rgba(0, 0, 0, 0.3); filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2)); } @keyframes iconFloat { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-15px); } } .team-section .process-card:hover .process-step-number { transform: scale(1.2) rotate(10deg); filter: drop-shadow(0 0 15px currentColor); } /* Process step label */ .team-section .process-step { text-transform: uppercase; font-size: clamp(10pt, 2vw, 12pt); letter-spacing: 3px; font-weight: 900; margin-bottom: 10px; opacity: 1; } .team-section .process-card.ear-card .process-step { color: #ffffff; text-shadow: 2px 2px 4px rgba(255, 23, 68, 0.5); } .team-section .process-card.trunk-card .process-step { color: #ffffff; text-shadow: 2px 2px 4px rgba(255, 111, 0, 0.5); } .team-section .process-card.craft-card .process-step { color: #ffffff; text-shadow: 2px 2px 4px rgba(0, 188, 212, 0.5); } .team-section .process-card.tail-card .process-step { color: #ffffff; text-shadow: 2px 2px 4px rgba(0, 200, 83, 0.5); } /* Process card title */ .team-section .process-card .card-title { font-size: clamp(18pt, 2.5vw, 24pt); font-weight: 900; text-transform: uppercase; margin-bottom: 15px; letter-spacing: 2px; color: #ffffff; text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3); } /* Process card content */ .team-section .process-content { width: 100%; } .team-section .process-card .card-text { font-size: clamp(9pt, 1.8vw, 11pt); color: #ffffff; text-wrap: pretty; padding: 15px 0; font-weight: 600; line-height: 1.6; } /* Hover effects */ .team-section .process-card:hover { transform: translateY(-20px) scale(1.05); box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5); border-width: 4px; } .team-section .ear-card:hover { box-shadow: 0 30px 60px rgba(255, 23, 68, 0.6), 0 0 30px rgba(255, 23, 68, 0.4); } .team-section .trunk-card:hover { box-shadow: 0 30px 60px rgba(255, 111, 0, 0.6), 0 0 30px rgba(255, 111, 0, 0.4); } .team-section .craft-card:hover { box-shadow: 0 30px 60px rgba(0, 188, 212, 0.6), 0 0 30px rgba(0, 188, 212, 0.4); } .team-section .tail-card:hover { box-shadow: 0 30px 60px rgba(0, 200, 83, 0.6), 0 0 30px rgba(0, 200, 83, 0.4); } .team-section .btn { /*-----Team member 'See Profile' Button---------*/ margin-top: 1vw; padding: clamp(10pt, 1vw, 20pt) clamp(15pt, 3vw, 20pt); border: none; border-radius: 30px; background-color: #F2707E; color: #ffffff; font-size: clamp(8pt, 2vw, 11pt); text-transform: uppercase; font-weight: bolder; box-shadow: 6px 6px 12px rgba(0, 0, 0, 0.1), -6px -6px 12px rgba(0, 0, 0, 0.15) inset, 6px 6px 12px rgba(255, 255, 255, 0.25) inset, -6px -6px 12px rgba(255, 255, 255, 0.05); } /*-------------------------------------------------------------- * testimonial-section * --------------------------------------------------------------*/ .testimonial-section { padding-top: 10pt; padding: 80px 0 !important; overflow: hidden; background-color: #ffffff; position: relative; } .testimonial-section::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url('../img/paper-texture.jpeg'); background-size: cover; background-position: center; background-repeat: no-repeat; opacity: 0.3; z-index: 0; } .testimonial-section .container { position: relative; z-index: 1; } .testimonial-section .row { display: flex; display: -webkit-flex; justify-content: center; -webkit-justify-content: center; align-items: center; -webkit-align-items: center; } .testimonial-section .row>.col-lg-6:first-child { transform: translateY(-80px); /* 🔥 move up */ } /* Hide pill label */ .testimonial-section .section-title1 { display: none; } /* Main title — large serif, teal/orange per word */ .testimonial-section .section-title2 { font-size: clamp(30pt, 4vw, 50pt); font-family: 'Amnesia', Georgia, serif; letter-spacing: 1.5px; font-kerning: none; /* 🔥 IMPORTANT */ font-feature-settings: "kern" 0; /* 🔥 IMPORTANT */ font-weight: 600; margin-bottom: 30px !important; text-transform: none; line-height: 1.1; padding-bottom: 0; text-wrap: pretty; background: none; -webkit-text-fill-color: unset; color: #000; } /* Short red line ABOVE title */ .testimonial-section .section-title2::before { content: ''; display: block; width: 60px; height: 2px; background: #e75d3c; margin-bottom: 14px; } /* Longer red line BELOW title */ .testimonial-section .section-title2::after { content: ''; display: block; width: 120px; height: 2px; background: #e75d3c; margin-top: 14px; margin-bottom: 65px; } /* Quote block */ .testimonial-section .quote-wrapper { position: relative; padding-left: 20px; } /* ✅ Red line */ .testimonial-section .quote-wrapper::after { content: ''; position: absolute; left: -10px; width: 3px; background: #e75d3c; top: 25px; bottom: 25px; } /* ✅ Keep quote symbol separate */ .testimonial-section .quote-wrapper::before { content: '\201C'; font-size: 120px; color: rgba(0, 0, 0, 0.06); position: absolute; top: -20px; left: -10px; z-index: 0; } /* Faded large quote mark behind text */ .testimonial-section .quote-wrapper::before { content: '\201C'; font-size: 120px; color: rgba(0, 0, 0, 0.06); position: absolute; top: -20px; left: -10px; font-family: Georgia, serif; line-height: 1; z-index: 0; } /* Quote text */ .testimonial-section .quote-wrapper p { font-family: 'Montserrat', sans-serif !important; font-size: clamp(11pt, 1.4vw, 14pt); color: #2c2c2c; font-weight: -350; line-height: 1.35; min-height: auto; text-wrap: balance; position: relative; z-index: 1; margin-left: -10px; margin-bottom: 70px; text-decoration: none; } /* Remove old quote marks */ .testimonial-section .quote-wrapper p::before { content: none; } .testimonial-section .quote-wrapper p::after { content: none; } /* Client name */ .testimonial-section .quote-wrapper span { display: block; padding-top: 8pt; font-size: clamp(10pt, 1.3vw, 12pt); font-weight: 700; font-family: "Montserrat", sans-serif; color: #e75d3c; text-transform: capitalize; } /* Carousel item padding */ .testimonial-section .carousel-item { padding: 0 10pt; } /* Bottom indicator dots — red solid + teal dashes like screenshot */ .testimonial-section .carousel .carousel-indicators { all: unset; display: flex; align-items: center; list-style: none; gap: -3px; /* ← reduced gap, closer together */ margin-top: 30px; } .testimonial-section .carousel .carousel-indicators li { height: 4px; width: 15px; border-radius: 2px; border: none; transition: all 0.3s ease; cursor: pointer; background: linear-gradient(to right, #4db8a8 0%, transparent 100%); } .testimonial-section .carousel .carousel-indicators li:nth-child(2) { opacity: 1; /* ← was 0.85, slightly more visible */ } .testimonial-section .carousel .carousel-indicators li:nth-child(3) { opacity: 0.95; /* ← was 0.60 */ } .testimonial-section .carousel .carousel-indicators li:nth-child(4) { opacity: 0.75; /* ← was 0.40 */ } .testimonial-section .carousel .carousel-indicators li:nth-child(5) { opacity: 0.2; /* ← was 0.20 */ } .testimonial-section .carousel .carousel-indicators li:nth-child(6), .testimonial-section .carousel .carousel-indicators li:nth-child(7), .testimonial-section .carousel .carousel-indicators li:nth-child(8) { opacity: 0.10; /* ← barely visible at end */ } .testimonial-section .carousel .carousel-indicators .active { background-color: #e75d3c; background-image: none; height: 4px; width: 50px; border-radius: 2px; transition: all 0.3s ease; opacity: 1; } /*------------Column right side----------------------*/ .testimonial-section .img-container { padding: clamp(30pt, 3vw, 50pt) 0pt; display: flex; align-items: center; justify-content: center; } .testimonial-section .scene-wrap { position: relative; width: 800px; height: 800px; transform-origin: center center; transform: scale(0.70); margin: -150px auto; flex-shrink: 0; } .testimonial-section .icon-node { position: absolute; top: 400px; left: 400px; pointer-events: none; } /* Orbital icon circular stroke frames */ .testimonial-section .icon-node svg { border-radius: 50%; background: #fff; padding: 6px; box-shadow: 0 0 0 3px #e75d3c, 0 0 0 6px #ffc43f, 0 0 0 9px #65a69c, 0 6px 18px rgba(0, 0, 0, 0.2); transition: all 0.3s ease; animation: orbitPulse 3s ease-in-out infinite; } /* Dashed ring - thicker & animated */ #ring-1-dashed { stroke-width: 3.5 !important; stroke: #e75d3c !important; opacity: 0.85 !important; stroke-dasharray: 12 18 !important; filter: drop-shadow(0 0 4px rgba(231, 93, 60, 0.4)); animation: dashFlow 20s linear infinite, dashGlow 3s ease-in-out infinite !important; } @keyframes dashFlow { to { stroke-dashoffset: -600; } } @keyframes dashGlow { 0%, 100% { stroke: #e75d3c; filter: drop-shadow(0 0 4px rgba(231, 93, 60, 0.3)); opacity: 0.8; } 33% { stroke: #ffc43f; filter: drop-shadow(0 0 6px rgba(255, 196, 63, 0.5)); opacity: 1; } 66% { stroke: #65a69c; filter: drop-shadow(0 0 6px rgba(101, 166, 156, 0.5)); opacity: 1; } } /* Thick orange ring - add subtle glow pulse */ #ring-2-thick-orange { stroke-width: 6 !important; filter: drop-shadow(0 0 6px rgba(232, 80, 58, 0.35)); animation: ringPulseOrange 4s ease-in-out infinite; } @keyframes ringPulseOrange { 0%, 100% { stroke-width: 5; filter: drop-shadow(0 0 4px rgba(232, 80, 58, 0.3)); } 50% { stroke-width: 7; filter: drop-shadow(0 0 12px rgba(232, 80, 58, 0.6)); } } /* Yellow ring - shimmer effect */ #ring-3-thin-yellow { stroke-width: 4 !important; filter: drop-shadow(0 0 5px rgba(245, 192, 48, 0.4)); animation: ringShimmerYellow 3.5s ease-in-out infinite; } @keyframes ringShimmerYellow { 0%, 100% { stroke: #f5c030; filter: drop-shadow(0 0 3px rgba(245, 192, 48, 0.3)); } 50% { stroke: #ffe066; filter: drop-shadow(0 0 10px rgba(255, 224, 102, 0.6)); } } /* Teal ring - breathing glow */ #ring-4-thin-teal { stroke-width: 4 !important; filter: drop-shadow(0 0 5px rgba(77, 184, 168, 0.4)); animation: ringBreatheTeal 4.5s ease-in-out infinite; } @keyframes ringBreatheTeal { 0%, 100% { stroke: #4db8a8; filter: drop-shadow(0 0 3px rgba(77, 184, 168, 0.3)); } 50% { stroke: #7dddd0; filter: drop-shadow(0 0 10px rgba(125, 221, 208, 0.6)); } } /* Small orbiting dots - make larger & glow */ #b1, #b3 { r: 14 !important; filter: drop-shadow(0 0 6px rgba(232, 80, 58, 0.6)); animation: dotPulseRed 2s ease-in-out infinite; } #b2, #b4 { r: 9 !important; filter: drop-shadow(0 0 6px rgba(245, 192, 48, 0.6)); animation: dotPulseYellow 2.5s ease-in-out infinite; } #b5 { r: 7 !important; filter: drop-shadow(0 0 5px rgba(232, 80, 58, 0.5)); animation: dotPulseRed 3s ease-in-out infinite; } @keyframes dotPulseRed { 0%, 100% { opacity: 0.9; filter: drop-shadow(0 0 4px rgba(232, 80, 58, 0.4)); } 50% { opacity: 1; filter: drop-shadow(0 0 10px rgba(232, 80, 58, 0.8)); } } @keyframes dotPulseYellow { 0%, 100% { opacity: 0.85; filter: drop-shadow(0 0 4px rgba(245, 192, 48, 0.4)); } 50% { opacity: 1; filter: drop-shadow(0 0 10px rgba(245, 192, 48, 0.8)); } } /* Stagger the pulse per node */ #oa svg { animation-delay: 0s; } #ob svg { animation-delay: 0.4s; } #oc svg { animation-delay: 0.8s; } #od svg { animation-delay: 1.2s; } #ia svg { animation-delay: 0.2s; } #ib svg { animation-delay: 0.6s; } #ic svg { animation-delay: 1.0s; } #id svg { animation-delay: 1.4s; } @keyframes orbitPulse { 0%, 100% { box-shadow: 0 0 0 3px #e75d3c, 0 0 0 6px #ffc43f, 0 0 0 9px #65a69c, 0 6px 18px rgba(0, 0, 0, 0.2); } 50% { box-shadow: 0 0 0 4px #e75d3c, 0 0 0 8px #ffc43f, 0 0 0 12px #65a69c, 0 8px 25px rgba(0, 0, 0, 0.3); } } .testimonial-section .circle1 { /*-------Big Circle || Outer Circle---------*/ height: 100%; width: 100%; border: 10px solid #65a69c; outline: 10px solid #ffc43f; border-radius: 50%; display: flex; display: -webkit-flex; align-items: center; -webkit-align-items: center; justify-content: center; -webkit-justify-content: center; animation: Rotate 20s linear infinite; -webkit-animation: Rotate 20s linear infinite; box-shadow: 0 0 0 20px #e75d3c; /* Added new color (teal) as outer ring */ } .testimonial-section .circle2 { /*-------small Circle || 2nd Circle---------*/ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(45deg); -webkit-transform: translate(-50%, -50%) rotate(45deg); width: 80%; height: 80%; border: 10px solid #65a69c; outline: 10px solid #ffc43f; box-shadow: 0 0 0 20px #e75d3c; /* Added new color (teal) as outer ring */ border-radius: 50%; animation: circle-rotate 20s linear infinite; -webkit-animation: circle-rotate 20s linear infinite; } .testimonial-section .img-block { /*----Image Div || div that contain image ( client photo )-------*/ position: absolute; display: flex; display: -webkit-flex; align-items: center; -webkit-align-items: center; justify-content: center; -webkit-justify-content: center; } .testimonial-section .img-block img { /*----Image || Client Photo------*/ width: clamp(40pt, 6vw, 60pt); height: clamp(40pt, 6vw, 60pt); object-fit: cover; border: clamp(5pt, 0.6vw, 10pt) solid #ffffff; border-radius: 50%; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); animation: Rotate-reverse 20s linear infinite; -webkit-animation: Rotate-reverse 20s linear infinite; } .testimonial-section .circle-container .active img { /*---client photo that is selected-----*/ border: clamp(5pt, 0.6vw, 10pt) solid #00aeff; } /*----------------------------------------- Every circle have 4 image (client photo) -----------------------------------------*/ .testimonial-section .img-block:first-child { /*---Client-1 Photo for both Circle1 and circle2--------*/ top: 0; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); } .testimonial-section .img-block:nth-child(2) { /*---Client-2 Photo for both Circle1 and circle2--------*/ top: 50%; right: 0; transform: translate(50%, -50%); -webkit-transform: translate(50%, -50%); } .testimonial-section .img-block:nth-child(3) { /*---Client-3 Photo for both Circle1 and circle2--------*/ bottom: 0; left: 50%; transform: translate(-50%, 50%); -webkit-transform: translate(-50%, 50%); } .testimonial-section .img-block:nth-child(4) { /*---Client-4 Photo for both Circle1 and circle2--------*/ top: 50%; left: 0; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); } .testimonial-section .circle2 .img-block img { /*--Animation for only circle2----*/ animation: img-rotate 20s linear infinite; -webkit-animation: img-rotate 20s linear infinite; } /*------------------------------ Center Circle -------------------------------*/ .testimonial-section .center-circle { /*-------Circle take center position------------*/ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%); width: 240px; height: 240px; } .testimonial-section .center-circle :nth-child(1) { /*-----Center most circle ----------*/ background: #F2707E; border-radius: 50%; box-shadow: 0px 3px 7px .7px rgba(0, 0, 0, .5); box-sizing: content-box; height: 78px; width: 78px; position: absolute; top: 35%; left: 35%; } .testimonial-section .center-circle :nth-child(1):before { content: ""; background: rgba(0, 0, 0, 0.07); position: absolute; width: 168px; height: 2px; left: -60%; top: 50%; transform: rotate(45deg); z-index: -2; } .testimonial-section .center-circle :nth-child(2) { border: 15px solid; border-color: rgba(105, 138, 172, 0.8) rgba(105, 138, 172, 0.8) transparent transparent; border-radius: 50%; box-sizing: content-box; height: 98px; width: 98px; position: absolute; top: 25%; left: 25%; z-index: -1; animation: circle-move 10s ease infinite; } .testimonial-section .center-circle :nth-child(3) { background: rgba(0, 0, 0, .017); border: 25px solid; border-color: #74d2e7 transparent transparent; border-radius: 50%; box-shadow: 0px 0px 25px -10px rgba(0, 0, 0, 0.65); box-sizing: content-box; height: 90px; width: 90px; position: absolute; top: 22%; left: 22%; z-index: -2; animation: circle-move 14s ease infinite; } .testimonial-section .center-circle :nth-child(4) { background: rgba(0, 0, 0, .012); border: 2px solid; border-color: #0085ad transparent; border-radius: 50%; box-sizing: content-box; height: 168px; width: 168px; position: absolute; z-index: -3; top: 15%; left: 15%; animation: circle-move 15s ease infinite; } /* This is the thin line to centre */ .testimonial-section .center-circle :nth-child(5):before { content: ""; background: rgba(0, 0, 0, 0.1); position: absolute; width: 220px; height: 2px; left: 0%; top: 50%; transform: rotate(-45deg); z-index: -2; } .testimonial-section .center-circle :nth-child(5) { background: rgba(0, 0, 0, .012); border: 10px solid; border-color: #146eb4 #8aa4be; border-radius: 50%; box-sizing: content-box; height: 220px; width: 220px; position: absolute; z-index: -3; top: 1%; left: 1%; animation: circle-spin 10s ease infinite; } .testimonial-section .center-circle :nth-child(6) { background: rgba(0, 0, 0, .012); border: 4px dotted; border-color: #2c3e50 #8aa4be; border-radius: 50%; box-sizing: content-box; height: 203px; width: 203px; position: absolute; z-index: -3; top: 7%; left: 7%; animation: circle-spin 15s linear infinite; } .testimonial-section .center-circle :nth-child(7) { background: rgba(0, 0, 0, .012); border: 1px none; border-radius: 50%; box-sizing: content-box; height: 249px; width: 249px; position: absolute; z-index: -3; top: -1%; left: -1%; box-shadow: 0px 10px 20px 0.7px rgba(0, 0, 0, 0.4); } /* Exact center logo orbital rings */ /* ===== CENTER LOGO ORBITAL RINGS ===== */ /* REPLACE entire .center-circle-new section with this */ .testimonial-section .scene-wrap .center-circle-new { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 0; height: 0; pointer-events: none; z-index: 0; } .center-circle-new .cr { position: absolute; border-radius: 50%; box-sizing: border-box; transform-origin: center center; } .center-circle-new .cr-1 { border: 8px solid; border-color: rgba(105, 138, 172, 0.8) rgba(105, 138, 172, 0.8) transparent transparent; height: 150px; width: 150px; top: -75px; left: -75px; z-index: -1; animation: circle-move 10s ease infinite; } .center-circle-new .cr-2 { background: rgba(0, 0, 0, .017); border: 18px solid; border-color: #74d2e7 transparent transparent; height: 140px; width: 140px; top: -70px; left: -70px; box-shadow: 0px 0px 25px -10px rgba(0, 0, 0, 0.65); z-index: -2; animation: circle-move 14s ease infinite; } .center-circle-new .cr-3 { background: rgba(0, 0, 0, .012); border: 2px solid; border-color: #0085ad transparent; height: 186px; width: 186px; top: -93px; left: -93px; z-index: -3; animation: circle-move 15s ease infinite; } .center-circle-new .cr-4 { background: rgba(0, 0, 0, .012); border: 8px solid; border-color: #146eb4 #8aa4be; height: 216px; width: 216px; top: -108px; left: -108px; z-index: -3; animation: circle-spin 10s ease infinite; } .center-circle-new .cr-4::before { content: ""; background: rgba(0, 0, 0, 0.07); position: absolute; width: 216px; height: 2px; left: 0; top: 50%; transform: rotate(-45deg); z-index: 7; } .center-circle-new .cr-5 { background: rgba(0, 0, 0, .012); border: 3px dotted; border-color: #2c3e50 #8aa4be; height: 204px; width: 204px; top: -102px; left: -102px; z-index: -3; animation: circle-spin 15s linear infinite; } .center-circle-new .cr-6 { background: rgba(0, 0, 0, .012); border: 1px solid transparent; height: 240px; width: 240px; top: -120px; left: -120px; z-index: -3; box-shadow: 0px 10px 20px 0.7px rgba(0, 0, 0, 0.35); } /*--------------------------------------------- *pricing-section* -----------------------------------------------*/ /*------------------------------------------------ top section title and text --------------------------------------------------*/ .pricing-section .section-title1 { /*-----Section Title1 || Top center title1----------- --*/ text-transform: uppercase; color: #FFFFFF; font-weight: 900; font-size: clamp(10pt, 2vw, 11pt); font-family: "Montserrat", sans-serif; background-color: rgba(0, 0, 0, 0.3); padding: 12px 24px; border-radius: 50px; display: inline-block; letter-spacing: 2px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); } .pricing-section .section-title2 { /*-----section Title2 || Top center title2-------------*/ font-size: clamp(21pt, 3vw, 36pt); text-transform: capitalize; color: #000000; font-weight: bolder; padding-bottom: 1vw; } .pricing-section .section-text { /*-----Section text-|| Top center text------------*/ font-weight: normal; font-size: clamp(9pt, 2vw, 10pt); color: #6a737b; padding-bottom: 1vw; text-wrap: pretty; } /*------------------------------------------------ section row and column --------------------------------------------------*/ .pricing-section .row { /*-----Row Style || all item under row will take center position-------------*/ display: flex; display: -webkit-flex; align-items: center; -webkit-align-items: center; justify-content: center; -webkit-justify-content: center; padding-top: clamp(70pt, 10vw, 90pt); } .pricing-section .col-12 { /*------all colum's margin and width--------*/ margin-bottom: clamp(80pt, 10vw, 90pt); max-width: 450pt; } /*------------------------------------------------ Pricing table || every column table --------------------------------------------------*/ .pricing-section .pricing-table { background-color: #0045A6; color: #fff; text-align: center; position: relative; padding-top: 20px; margin: 0 30px 0; } .pricing-section .pricing-table:after { content: " "; background-color: #0045A6; position: absolute; display: block; width: 100%; height: 100%; left: 0; top: 0; transform: skew(0deg, -7deg); transform-origin: left bottom 0; z-index: -1; } /*------------------------------------------------ Pricing header --------------------------------------------------*/ .pricing-section .pricing-table .pricing-header { margin: 0 -10px; padding: 15pt 0; position: relative; } .pricing-section .pricing-table .pricing-header:before, .pricing-section .pricing-table .pricing-header:after { content: ""; height: 100%; left: -20px; position: absolute; top: 50%; width: 30px; z-index: -1; } .pricing-section .pricing-table .pricing-header:after { left: auto; right: -20px; } .pricing-section .pricing-header, .pricing-section .pricing-header::before, .pricing-section .pricing-header::after { /*-----Pricing Table-1 title background color---*/ background-color: #F2707E; } /*------------------------------------------------ Offer list || a list of different condition --------------------------------------------------*/ .pricing-section .pricing-content { /*-----Pricing content || offer detials || all option------*/ font-size: clamp(8pt, 2vw, 10pt); color: #fff; letter-spacing: 1px; line-height: clamp(30pt, 4vw, 50pt); text-wrap: pretty; } .pricing-section .pricing-content ul { /*----remove list style '.'----*/ list-style-type: none; margin: 30pt 0pt 0pt 0pt; padding: 0; background-color: #0045A6; border-top: 1px solid rgba(255, 255, 255, 0.2); } .pricing-section .pricing-content ul li { /*---every list item bottom have border----*/ border-bottom: 1px solid rgba(255, 255, 255, 0.2); } .pricing-section .pricing-content ul li:last-child { /*---remove last list item bottom border----*/ border-bottom: none; } /*--------------------------------- Pricing Table Plan Name -----------------------------------*/ .pricing-section .pricing-table .title { /*----Plan Nmae-----*/ position: relative; font-size: clamp(12pt, 2vw, 16pt); margin: 0; font-weight: bolder; text-transform: uppercase; } .pricing-section .pricing-table .title:before, .pricing-section .pricing-table .title:after { border-bottom: 28px solid transparent; border-left: 10px solid #fff; border-top: 28px solid transparent; top: 50%; content: ""; left: -20px; position: absolute; } .pricing-section .pricing-table .title:after { border-left: medium none; border-right: 10px solid #fff; left: auto; right: -20px; } /*--------------------------------- Pricing Table Offer Price -----------------------------------*/ .pricing-section .price-value { /*------Offer Price--------*/ padding: 10pt 0pt; position: relative; font-size: clamp(16pt, 3vw, 28pt); } .pricing-section .price-value:before { content: ""; position: absolute; top: 0; left: -12px; border-top: 12px solid rgba(0, 0, 0, 0.6); border-left: 12px solid transparent; border-bottom: 12px solid transparent; } .pricing-section .pricing-table .price-value:after { content: ""; position: absolute; top: 0; right: -12px; border-top: 12px solid rgba(0, 0, 0, 0.6); border-right: 12px solid transparent; border-bottom: 12px solid transparent; } .pricing-section .price-value sup { font-size: clamp(10pt, 2vw, 12pt); color: #fff; text-transform: capitalize; display: block; margin: auto; padding-top: 10pt; } /*--------------------------------- Pricing Table submit || order button -----------------------------------*/ .pricing-section .pricing-table .pricingTable-Sign-Up { background-color: #F2707E; padding: 20px 0 20px; position: relative; } .pricing-section .pricing-table .pricingTable-Sign-Up:before { content: " "; background-color: #F2707E; position: absolute; display: block; width: 100%; height: 100%; left: 0; bottom: 0; transform: skew(0deg, 7deg); transform-origin: left bottom 0; z-index: -1; } .pricing-section .pricing-table .pricingTable-Sign-Up a { display: inline-block; font-size: clamp(12pt, 2vw, 16pt); text-transform: capitalize; letter-spacing: 1px; color: #fff; position: relative; padding: 0.5vw 2vw; transition: all 0.3s ease 0s; } .pricing-section .pricing-table .pricingTable-Sign-Up a:before, .pricing-section .pricing-table .pricingTable-Sign-Up a:after { content: ""; position: absolute; top: 0; left: 0; background-color: #fff; height: 2px; width: 0; transition: all 0.3s ease 0s; } .pricing-section .pricing-table .pricingTable-Sign-Up a:after { top: auto; bottom: 0; right: 0; left: auto; } .pricing-section .pricing-table:hover .pricingTable-Sign-Up a { letter-spacing: 3px; } .pricing-section .pricing-table:hover .pricingTable-Sign-Up a:before, .pricing-section .pricing-table:hover .pricingTable-Sign-Up a:after { width: 100%; } /*-------------------------------------------------------------- # sponsor --------------------------------------------------------------*/ .sponsor-section { padding: 2vw 0pt; background-color: #F5A19A; /* Google Red 50% lighter */ } .sponsor-section .section-title { /*-----Section Title1-------------*/ text-transform: capitalize; color: #1A8DFF; font-weight: normal; font-size: clamp(16pt, 2vw, 21pt); padding-bottom: 1vw; } .sponsor-section .col-4 { min-height: 4vw; margin-bottom: 10pt; } .sponsor-section img { width: 100%; height: 100%; object-fit: cover; border: clamp(6px, 1vw, 10px) solid #F27280; box-shadow: 0 3px 6px #DFDFDF, 0 3px 6px #DFDFDF; border-radius: 50% 10%; } .sponsor-section i { color: #F2707E; font-size: clamp(21pt, 3vw, 32pt); } .sponsor-section .carousel-control-prev i { margin-left: -20vw; } .sponsor-section .carousel-control-next i { margin-right: -20vw; } /*------------------------------------------------- +++ Other Page +++ --------------------------------------------------*/ /*------------------------------------------------- +++other Hero Section++ Applicable for all other page except Front page ( Hero section of other page ) --------------------------------------------------*/ .other-hero-section { display: none; } /*------------------------------------------------------------ +++++Background Image++++++ ( other Hero Section--> Hero section of other page ) --------------------------------------------------------------*/ .other-hero-section img { /*---Background Image-----------*/ width: 100%; /*----Backround Image will take 100% width of total background width-----*/ height: 100%; /*----Backround Image will take 100% height of total background height-----*/ position: absolute; /*-----Backround Image will be fixed in his position----------*/ top: 0; left: 0; object-fit: cover; } /*------------------------------------------------------------ +++++overlay over Background Image++++++ ( other Hero Section--> Hero section of other page ) --------------------------------------------------------------*/ .other-hero-section .img-bg::after { /*------Hero section Background color over background image---------*/ content: ''; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.5); background-blend-mode: multiply; } /*------------------------------------------------------------ +++++ Page Title ++++++ ( other Hero Section--> Hero section of other page ) --------------------------------------------------------------*/ .other-hero-section .section-title { /*----Page Title holder position ----*/ position: absolute; top: 55%; left: 50%; transform: translate(-50%, -50%); width: 100%; } .other-hero-section .section-title h1 { /*----Page Title ----*/ font-size: clamp(16pt, 5vw, 42pt); text-align: center; color: #ffffff; text-transform: capitalize; font-weight: bolder; } .other-hero-section .section-title p { /*-----Section text-------*/ font-weight: normal; font-size: clamp(9pt, 2vw, 11pt); color: #cccccc; width: clamp(212pt, 65%, 800pt); display: block; margin: auto; padding: 1vw 0; text-wrap: pretty; } /*------------------------------------------------------ Goal section ( available in about page ) -------------------------------------------------------*/ /* =============================== WHAT MAKES US DIFFERENT HERO ================================ */ .approach-hero { position: relative; height: calc(100vh - 350px); width: 100%; overflow: hidden; } .approach-bg { position: absolute; width: 100%; height: 100%; object-fit: cover; top: 0; left: 0; } .approach-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.35); } .approach-content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; color: white; width: 90%; } .approach-question-img { width: 350px; margin-bottom: 15px; } .approach-title { font-size: clamp(40px, 4.5vw, 90px); font-weight: 800; margin-bottom: 5px; } .approach-subtitle { font-size: 18px; margin-bottom: 0px; margin-top: -10px; font-weight: 900; } .approach-desc { font-size: 15px; line-height: 1.5; margin-bottom: -10px; } /* =============================== APPROACH ANIMATION (SAFE) =============================== */ /* Initial state */ .approach-question-img, .approach-title, .approach-subtitle, .approach-desc { opacity: 0; transform: scale(1.2); } /* Animate when active */ .approach-content.active .approach-question-img, .approach-content.active .approach-title, .approach-content.active .approach-subtitle, .approach-content.active .approach-desc { animation: approachZoom 1s ease forwards; } /* Stagger effect (VERY IMPORTANT 🔥) */ .approach-content.active .approach-question-img { animation-delay: 0.1s; } .approach-content.active .approach-title { animation-delay: 0.2s; } .approach-content.active .approach-subtitle { animation-delay: 0.3s; } .approach-content.active .approach-desc { animation-delay: 0.4s; } /* Keyframes */ @keyframes approachZoom { 0% { opacity: 0; transform: scale(1.2); } 60% { opacity: 1; transform: scale(0.98); } 100% { opacity: 1; transform: scale(1); } } /* =============================== /* ═══════════════════════════════════════ OUR VALUES SECTION - COMPLETE FIX ═══════════════════════════════════════ */ /* SECTION */ /* SECTION */ .goal-section { background-color: #f5f0ed; background-image: url('../img/paper-texture.jpeg'); background-size: cover; background-position: center; background-repeat: no-repeat; background-blend-mode: multiply; padding: 80px 0; text-align: center; position: relative; } .goal-section::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.7); } .goal-section .container { position: relative; z-index: 1; } /* TITLE */ .values-title { font-family: 'Amnesia', serif; font-size: clamp(42px, 7vw, 90px); color: #e75d3c; margin-bottom: 20px; } /* SUBTEXT */ .values-subtext { font-family: 'Open Sans', sans-serif; font-size: 18px; font-weight: 600; max-width: 750px; margin: 0 auto 60px; line-height: 1.6; } /* WRAPPER */ .values-wrapper { display: flex; justify-content: center; gap: 30px; flex-wrap: wrap; margin-top: 50px; } /* CARD */ .value-item { position: relative; width: 260px; height: 340px; border-radius: 20px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); transition: transform 0.3s ease; } .value-item:hover { transform: translateY(-5px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2); } /* CARD BACKGROUND */ .card-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; } .card-bg img { width: 100%; height: 100%; object-fit: contain; } /* CARD CONTENT */ .card-content { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding-top: 35px; padding: 30px; text-align: center; z-index: 2; } /* ICON */ .card-icon { width: 60px; height: 60px; margin-bottom: 15px; animation: floatIcon 3s ease-in-out infinite; } /* TITLE */ .card-content h3 { font-family: 'Amnesia', serif; font-weight: 600; font-size: 18px; letter-spacing: 1px; color: #e75d3c; margin-bottom: 10px; } /* TEXT */ .card-content p { font-family: 'Open Sans', sans-serif; font-size: 14px; line-height: 1.6; color: #333; } /* FLOAT ANIMATION */ @keyframes floatIcon { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-6px); } } /* BUTTON */ .values-btn { margin-top: 50px; } .values-btn img { height: 55px; transition: 0.3s; } .values-btn img:hover { transform: scale(1.05); } .goal-section { padding-top: 4vw; /*-----Section Top side padding-----*/ overflow: hidden; } /*---Media Quary end here---------*/ /*--------------------------------------------------------------- Section Title & Text ( Goal-section -- available in About page ) ----------------------------------------------------------------*/ .goal-section .section-title2 { /*-----section Title2-------------*/ font-size: clamp(21pt, 3vw, 36pt); text-transform: capitalize; color: #000000; font-weight: bolder; padding-bottom: 1vw; text-wrap: pretty; } .goal-section .section-text { /*-----Section text-------------*/ font-weight: normal; font-size: 20px; color: #6a737b; padding-bottom: 1vw; text-wrap: pretty; } /* Professional typography tuning for About page only */ .about-page .other-hero-section .section-title h1 { font-size: clamp(28px, 4.2vw, 52px); line-height: 1.1; letter-spacing: 0.2px; font-weight: 800; } .about-page .other-hero-section .section-title p { font-size: clamp(15px, 1.6vw, 20px); line-height: 1.45; color: #f1f1f1; } .about-page .about-section h1:not(.count-number) { font-size: clamp(30px, 3.2vw, 44px); line-height: 1.2; font-weight: 800; letter-spacing: 0.1px; } .about-page .about-section h2, .about-page .about-section h3, .about-page .goal-section .section-title2, .about-page .philosophy-section .section-title-big { font-size: clamp(24px, 2.4vw, 34px); line-height: 1.25; font-weight: 700; letter-spacing: 0.1px; } .about-page .about-section p:not(.count-number), .about-page .goal-section .section-text, .about-page .about-list li, .about-page .value-point p, .about-page .philosophy-item p { font-size: clamp(16px, 1.15vw, 18px); line-height: 1.7; color: #202020; } /*--------------------------------------------------------------- Section main Row ( Goal-section -- available in About page ) ----------------------------------------------------------------*/ .goal-section .row { /*-----all item under Row will take center position------------*/ display: flex; display: -webkit-flex; align-items: center; -webkit-align-items: center; justify-content: center; -webkit-justify-content: center; padding-top: 4vw; } /*--------------------------------------------------------------- Section main Column ( Goal-section -- available in About page ) ----------------------------------------------------------------*/ .goal-section .col-12 { position: relative; overflow: hidden; transition: all 0.5s; min-height: clamp(250pt, 55vh, 400pt); max-width: 250pt; border-radius: 20px; border-top-left-radius: 70px; margin: 10pt; background-color: #F2707E; } /*--------------------------------------------------------------- Card ( Goal-section -- available in About page ) ----------------------------------------------------------------*/ /*--------------------------------------------------------------- Icon Holder ( Goal-section -- available in About page ) ----------------------------------------------------------------*/ .goal-section .icon-box { position: absolute; top: 0; left: 0; border-bottom-right-radius: 50%; height: 140px; width: 140px; background-color: #F2707E; } .goal-section .icon-box::before { /*-----Before Card Icon---------*/ content: ''; position: absolute; bottom: -30px; left: 0; height: 30px; width: 30px; border-top-left-radius: 30px; background: transparent; /* box-shadow: -5px -5px 0 5px #F2707E; */ } .goal-section .icon-box::after { /*-----After Card Icon---------*/ content: ''; position: absolute; right: -30px; top: 0; height: 30px; width: 30px; border-top-left-radius: 30px; background: transparent; /* box-shadow: -5px -5px 0 5px #F2707E; */ } /*--------------------------------------------------------------- Icon ( Goal-section -- available in About page ) ----------------------------------------------------------------*/ .goal-section .icon { position: absolute; inset: 10px; border-radius: 10px; border-top-left-radius: 50%; border-bottom-right-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: clamp(42pt, 3vw, 60pt); transition: 1s; background-color: #0748A7; color: #F2707E; } /*--------------------------------------------------------------- Icon when hover ( Goal-section -- available in About page ) ----------------------------------------------------------------*/ .goal-section .card :hover .icon { /*-----Col1 Icon holder when hover---------*/ background-color: #F2707E; color: #ffffff; } /*--------------------------------------------------------------- Card Body ( Goal-section -- available in About page ) ----------------------------------------------------------------*/ .goal-section .card-body { position: absolute; top: 150px; padding: 20px; text-align: center; display: flex; justify-content: center; flex-direction: column; gap: 15px; color: #FFFFFF; } .goal-section .card-title { font-size: clamp(12pt, 2vw, 14pt); font-weight: bolder; letter-spacing: 2px; text-transform: uppercase; } .goal-section .card-text { font-size: clamp(8pt, 2vw, 10pt); color: #0dd3ff; text-wrap: pretty; } /*--------------------------------------------- +++founder-section ( About Page)+++ -----------------------------------------------*/ .founder-section { overflow: hidden; padding: 6vw 0pt 8vw 0pt; /*------Top and bottom will take some margin------*/ } .founder-section .row { /*-------All item under row will take center position-----------*/ display: flex; display: -webkit-flex; align-items: center; -webkit-align-items: center; justify-content: center; -webkit-justify-content: center; } /*--------------------------------------------------------------- Section Title and Text on Top ( founder Section -- available in about us page ) ----------------------------------------------------------------*/ .founder-section h4 { /*-----Title1-------------*/ text-transform: uppercase; color: #3369e7; font-weight: normal; font-size: clamp(10pt, 2vw, 11pt); font-family: "Montserrat", sans-serif; } .founder-section h1 { /*-----Title2-------------*/ font-size: clamp(21pt, 3vw, 36pt); text-transform: capitalize; color: #000000; font-weight: bolder; padding-bottom: 1vw; text-wrap: pretty; } .founder-section h5 { /*-----Title2-------------*/ font-size: clamp(12pt, 2vw, 16pt); text-transform: capitalize; color: #F27280; padding-top: 1vw; text-wrap: pretty; } .founder-section p { /*-----Text-------------*/ font-weight: normal; font-size: clamp(8pt, 2vw, 10pt); text-wrap: pretty; color: #6a737b; } /*--------------------------------------------------------------- Image ( founder-section -- available in Front Page and about us page ) ----------------------------------------------------------------*/ .founder-section .img-block { /*---- left column image holder or div-----*/ position: relative; height: clamp(250pt, 60vh, 420pt); } .founder-section img { /*----- Image of left column-------------*/ height: 85%; width: 80%; position: absolute; object-fit: cover; top: 15%; right: 15%; border: clamp(10pt, 4vw, 15pt) solid #F27280; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); } /*---Media Quary only for ( Small Screen->maximum 768px ) End here-----------*/ /*--------------------------------------------------------------- Create a box behind the image ( founder-section -- available in Front Page and about us page ) ----------------------------------------------------------------*/ .founder-section .box { /*------rectangle behind the image|| Create a rectangle before the Image-------*/ top: 3%; right: 5%; height: 110%; width: 50%; background-color: #3B9FE5; border: clamp(10pt, 4vw, 15pt) solid #0748A7; position: absolute; z-index: -1; } /*---Media Quary only for ( Small Screen->maximum 768px ) End here-----------*/ /*----------------------------------------------------------- Our Team Page +++team profile Section ( our team Page)++++ --------------------------------------------------------------*/ .team-profile-section { /*-----Team profile section will take some padding on Top and bottom--------*/ padding-top: 7vw; } .team-profile-section .g-0 { /*-------Team Profile Card---------*/ border: clamp(10pt, 4vw, 15pt) solid #F27280; /*----Make a border for Card--------*/ box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); /*-----A shadow for card----------*/ } .team-profile-section .profile { /*----all Profile card column bottom margin || all main column bottom margin------*/ margin-bottom: 1.5vw; } .team-profile-section img { /*----Staff Photo------*/ width: clamp(50pt, 100%, 150pt); /*---Avator Image width-------------*/ height: 150pt; /*----Avator image height---------*/ border-radius: 50%; /*----Rounded corner || make a image like circle------*/ object-fit: cover; display: block; margin: 10pt auto; } /*----------------------------------------------------------- +++profile left side ( team profile Section)++++ --------------------------------------------------------------*/ .team-profile-section .profile-left { background: #0748A7; /*---------Profile Card left side background color------------------*/ } .team-profile-section .d-inline-flex { /*------List item make center || Icon and Text || contact Info, Social, Hobby-------*/ display: flex; justify-content: center; align-items: center; padding: 10pt 20pt 0pt 20pt; } .team-profile-section .profile-left .d-inline-flex .text { /*------Text of Icon || contact Info, Social, Hobby----------*/ font-weight: normal; font-size: clamp(9pt, 2vw, 10pt); color: #ffffff; } .team-profile-section .profile-left .badge { /*--------Icon----------*/ width: 30px; /*-----Icon background width-------*/ height: 30px; /*-----Icon background height-------*/ background: #fff; /*-----Icon background Color-------*/ font-size: clamp(9pt, 2vw, 10pt); /*-----Icon size-------*/ color: #0748A7; /*-----Icon Color-------*/ border-radius: 50%; /*-----circle background of Icon------*/ margin-right: 15px; /*-----make a margin right side of Icon -------*/ display: flex; justify-content: center; align-items: center; } .team-profile-section .profile-left .title { /*---Profile Card left side Title || 'Social' , 'Hobby'-----------*/ text-transform: capitalize; color: #ffffff; font-weight: normal; font-size: clamp(11pt, 2vw, 14pt); padding: 30pt 0pt 0pt 20pt; } /*----------------------------------------------------------- +++profile Right side ( team profile Section)++++ --------------------------------------------------------------*/ .team-profile-section .reponsibility { /*-----Staff's Deignation || Profile Card Right Side-------------*/ text-transform: uppercase; color: #1A8DFF; font-weight: normal; font-size: clamp(10pt, 2vw, 11pt); padding-top: 20pt; } .team-profile-section .name { /*-----Staff's Name || Profile Card Right Side-------------*/ font-size: clamp(21pt, 3vw, 36pt); text-transform: capitalize; color: #000000; font-weight: bolder; padding-bottom: 1vw; } .team-profile-section .details { /*-----Staff's details || Profile Card Right Side-------------*/ font-weight: normal; font-size: clamp(8pt, 2vw, 10pt); color: #6a737b; text-wrap: pretty; text-align: justify; } .team-profile-section .profile-right .title { font-size: clamp(11pt, 2vw, 14pt); color: #1A8DFF; text-transform: capitalize; position: relative; padding-top: 20pt; } .team-profile-section .profile-right .avator-text { border-left: 1px solid #F2707E; padding-left: 20px; font-size: clamp(8pt, 2vw, 10pt); } .team-profile-section .profile-right .title::after { content: ''; width: 5pt; height: 5pt; border-radius: 50%; background-color: #F2707E; display: block; margin-top: 20pt; margin-left: -2pt; margin-bottom: -3pt; } /*--------------------------------------------- +++faq-section ( Faq Page)+++ -----------------------------------------------*/ .faq-section { margin: 10vw 0pt; /*------Top and bottom will take some margin------*/ overflow: hidden; } .faq-section .row { /*-------All item under row will take center position-----------*/ display: flex; display: -webkit-flex; align-items: center; -webkit-align-items: center; justify-content: center; -webkit-justify-content: center; } /*--------------------------------------------------------------- Left side image ( Faq section -- available in Faq page ) ----------------------------------------------------------------*/ .faq-section img { width: 100%; /*-----Image will take 100% of the column----*/ object-fit: cover; /*-----All size of Image will be adjusted-----*/ } /*--------------------------------------------------------------- Faq Card Background ( Faq section -- available in Faq page ) ----------------------------------------------------------------*/ .faq-section .faq { /*-----Faq box || Question box or Card-----*/ border: clamp(10pt, 4vw, 15pt) solid #F27280; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); padding: 2vw; background-color: #0748A7; } .faq-section .accordion-item { /*-----Make a gap between two item------*/ border: 0.5pt solid rgba(0, 0, 0, .25); /*------Item border-------*/ } .faq-section .accordion-body, /*-----Answers || text that show as a answer------*/ .faq-section .accordion-button { /*----Questions || Title that show as a question-----*/ text-wrap: pretty; border-radius: 0 !important; } .faq-section .accordion-button { font-size: clamp(11pt, 2vw, 12pt); color: #0748A7; } .faq-section .accordion-body { font-size: clamp(9pt, 2vw, 11pt); color: #3896DA } .faq-section .accordion-button:not(.collapsed) { /*----item Title or question when it show the answer-----*/ color: #ffffff; background-color: #F27280; text-transform: capitalize; box-shadow: 6px 6px 12px rgba(0, 0, 0, 0.1), -6px -6px 12px rgba(0, 0, 0, 0.15) inset, 6px 6px 12px rgba(255, 255, 255, 0.25) inset, -6px -6px 12px rgba(255, 255, 255, 0.05); } .faq-section .accordion-button:focus { /*---Remove item hover border || Box Shadow----*/ z-index: 3; border: none; outline: 0 !important; box-shadow: none; } /*--------------------------------------------------------------- Up and Down Arrow ( Faq section -- available in Faq page ) ----------------------------------------------------------------*/ .faq-section .accordion-button::after { /*------Arrow down color||from %23103AD1 '103AD1' (%23 || 3179C3) is Color Code-------*/ background-image: url("data:image/svg+xml,") !important; } .faq-section .accordion-button:not(.collapsed)::after { /*------Arrow Up color||from %23ffffff 'ffffff' (%23 || ffffff) is Color Code-------*/ background-image: url("data:image/svg+xml,") !important; } /*--------------------------------------------------------------- ( service Section -- available in Service page ) ----------------------------------------------------------------*/ .service-section { overflow: hidden; text-align: center; padding-top: 8vw; } /*--------------------------------------------------------------- Section main Row ( service-section -- available in service page ) ----------------------------------------------------------------*/ .service-section .row { /*-----all item under Row will take center position------------*/ display: flex; display: -webkit-flex; justify-content: center; -webkit-justify-content: center; padding-top: 4vw; } /*--------------------------------------------------------------- Section main Column ( service-section -- available in service page ) ----------------------------------------------------------------*/ .service-section .col-12 { max-width: 350pt; margin-bottom: 2vw; } /*--------------------------------------------------------------- Card ( service-section -- available in service page ) ----------------------------------------------------------------*/ .service-section .card { border-radius: 20pt; background-color: #0748A7; width: 100%; min-height: 400px; padding: 30px 10px; border: 10px solid #F2707E; box-shadow: 6px 6px 12px rgba(0, 0, 0, 0.1), -6px -6px 12px rgba(0, 0, 0, 0.15) inset, 6px 6px 12px rgba(255, 255, 255, 0.25) inset, -6px -6px 12px rgba(255, 255, 255, 0.05); } /*--------------------------------------------------------------- Card Body ( service-section -- available in service page ) ----------------------------------------------------------------*/ .service-section .card-title { font-size: clamp(12pt, 2vw, 16pt); font-weight: 700; text-transform: capitalize; text-align: center; color: #ffffff; text-wrap: pretty; } .service-section .card-text { font-size: clamp(9pt, 2vw, 10pt); color: #c4dff6; text-align: left; text-wrap: pretty; } .service-section img { width: 100%; height: 150pt; margin: 10pt 0 20pt 0; object-fit: cover; border: 5px solid #ffffff; } /*--------------------------------------------------------------- Offer Button ( service-section -- available in Front page ) ----------------------------------------------------------------*/ .service-section a { display: inline-flex; align-self: center; padding: 10px 25px; text-decoration: none; text-transform: uppercase; font-size: clamp(8pt, 2vw, 11pt); font-weight: 600; border-radius: 30px; box-shadow: 6px 6px 12px rgba(0, 0, 0, 0.1), -6px -6px 12px rgba(0, 0, 0, 0.15) inset, 6px 6px 12px rgba(255, 255, 255, 0.25) inset, -6px -6px 12px rgba(255, 255, 255, 0.05); border: 2px solid #F2707E; background-color: #F2707E; color: #ffffff; } /*--------------------------------------------- *PortFolio Section* -----------------------------------------------*/ .portfolio-section { margin: 8vw 0; } .portfolio-section #container { margin: auto; } /*-------------------------------------------------- *Filter ( gallery Section )* where image is selected according to their name or title --------------------------------------------------*/ .portfolio-section .filters { /*----Item Choose section------*/ width: 100%; text-align: center; padding: 1vw 0; } .portfolio-section .filters ul { /*-----Item filter area where we can change background color-------*/ list-style: none; padding: 5pt 10pt; margin: 0 4vw; } .portfolio-section .filters li { display: inline-block; padding: 10pt 5pt; cursor: pointer; } .portfolio-section .filters li a { /*-----Filter Item normal font------*/ color: #3586FF; text-decoration: none; text-transform: capitalize; font-size: clamp(10pt, 2vw, 12pt); transition: 0.65s; } .portfolio-section .filters li a:hover, .portfolio-section .filters .active a { /*-----Filter Item when hover and active------*/ color: #ff4c4c; letter-spacing: 0.5pt; } /*-------------------------------------------------- *Filter ( gallery Image )* --------------------------------------------------*/ .portfolio-section .grid-item { display: inline-block; height: 259px; overflow: hidden; text-align: center; width: 400px; border: clamp(10pt, 4vw, 15pt) solid #F27280; box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19); margin: 5pt; } .portfolio-section .grid-item img { width: 100%; height: 100%; object-fit: cover; } /*-------------------------------------------------- *Filter ( gallery Image overlay )* --------------------------------------------------*/ .portfolio-section .overlay { position: absolute; bottom: 0; left: 0; right: 0; background-color: #0748A7; overflow: hidden; width: 0; height: 100%; transition: .1s ease; color: #ffffff; text-transform: capitalize; font-size: clamp(12pt, 2vw, 14pt); display: flex; display: -webkit-flex; align-items: center; -webkit-align-items: center; justify-content: center; -webkit-justify-content: center; } .portfolio-section .grid-item:hover .overlay { width: 100%; } .portfolio-section .overlay .text { padding: 10pt 20pt; text-align: left; } .portfolio-section .overlay h4 { font-size: clamp(11pt, 2vw, 13pt); color: #FFFFFF; } .portfolio-section .overlay p { font-size: clamp(8pt, 2vw, 10pt); color: #0dd3ff; text-wrap: pretty; } /*-------------------------------------------------- *Filter ( gallery pager )* --------------------------------------------------*/ .portfolio-section .isotope-pager .pager { display: inline-block; } .portfolio-section .isotope-pager a { margin: 6px 10px; display: inline-block; line-height: 31px; color: #3586FF; text-transform: capitalize; font-size: clamp(10pt, 2vw, 12pt); font-weight: bolder; transition: 0.3s; } .portfolio-section .isotope-pager a:hover, .portfolio-section .isotope-pager a:is(.active) { color: #ff4c4c; } .portfolio-section .isotope-pager a::before, .portfolio-section .isotope-pager a:after { content: ""; position: absolute; border-top: 30px solid transparent; border-bottom: 30px solid transparent; } /*----------------------------------------------------------- +++Blog Section++++ --------------------------------------------------------------*/ .blog-section { margin: 10vw 0pt 15vw 0pt; } .blog-section .row:has(.blog) { /*-----Row Style || all item under row will take center position-------------*/ display: flex; display: -webkit-flex; justify-content: center; -webkit-justify-content: center; } .blog-section .blog { /*------all colum's margin and width--------*/ margin-bottom: 10pt; max-width: 450pt; } /*------------------------------------ Blog Background -------------------------------------*/ .blog-section .card { width: 100%; background-color: #0748A7; border: 10px solid #F2707E; border-radius: 10pt; height: 100%; } /*------------------------------------------------ Blog Content creator || Author|| post creator -------------------------------------------------*/ .blog-section .blog-author { font-weight: normal; font-size: clamp(8pt, 2vw, 10pt); color: #D0EFFF; padding-top: 5pt; text-transform: capitalize; } /*------------------------------------ Blog feature Image -------------------------------------*/ .blog-section .blog img { height: 150pt; object-fit: cover; width: 100%; margin-bottom: 10pt; } /*------------------------------------ Blog Category -------------------------------------*/ .blog-section .category a, .blog-section .category a:hover { text-transform: uppercase; color: #F2707E; font-weight: normal; font-size: clamp(8pt, 2vw, 10pt); font-family: "Montserrat", sans-serif; } /*------------------------------------ Blog Title -------------------------------------*/ .blog-section .blog-title a, .blog-section .blog-title a:hover { /*-----section Title2 || Top center title2-------------*/ font-size: clamp(8pt, 2vw, 12pt); text-transform: capitalize; color: #ffffff; font-weight: bolder; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; } /*------------------------------------ Blog text -------------------------------------*/ .blog-section .blog-text { /*-----Section text-|| Top center text------------*/ font-size: clamp(8pt, 2vw, 12pt); color: #0dd3ff; text-wrap: balance; font-weight: normal; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; } .blog-section .card-body:has(img) .blog-text { /*-----Section text-|| Top center text------------*/ -webkit-line-clamp: 3; /* number of lines to show */ } .blog-section .card-body:not(:has(img)) .blog-text { /*-----Section text-|| Top center text------------*/ -webkit-line-clamp: 8; /* number of lines to show */ } /*------------------------------------ Blog Read More Button -------------------------------------*/ .blog-section .btn { /*----- section Button---------*/ display: inline-flex; align-self: center; padding: 10px 25px; text-decoration: none; text-transform: uppercase; font-size: clamp(8pt, 2vw, 11pt); font-weight: 600; border-radius: 30px; box-shadow: 6px 6px 12px rgba(0, 0, 0, 0.1), -6px -6px 12px rgba(0, 0, 0, 0.15) inset, 6px 6px 12px rgba(255, 255, 255, 0.25) inset, -6px -6px 12px rgba(255, 255, 255, 0.05); border: 2px solid #F2707E; background-color: #F2707E; color: #ffffff; } /*------------------------------------ Blog all Tags -------------------------------------*/ .blog-section .tag { font-weight: normal; font-size: clamp(8pt, 2vw, 10pt); color: #D0EFFF; padding-top: 15pt; text-transform: capitalize; } /*------------------------------------ Blog tag Title -------------------------------------*/ .blog-section .tag b { color: #F7ADAD; } /*------------------------------------ Blog sidebar -------------------------------------*/ /*------------------------------------ Blog sidebar Title -------------------------------------*/ .blog-section .side-bar h4 { /*--------Sidebar Title---------------*/ font-size: clamp(11pt, 2vw, 16pt); text-transform: capitalize; color: #0748A7; font-weight: bolder; margin: 15pt 0 10pt 0; } /*------------------------------------ Blog sidebar list item -------------------------------------*/ .blog-section .side-bar ul { list-style: none; } .blog-section .side-bar ul li { counter-increment: index; margin-bottom: 5pt; font-size: clamp(8pt, 2vw, 10pt); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; /* number of lines to show */ } .blog-section .side-bar ul li:before { box-shadow: 6px 6px 12px rgba(0, 0, 0, 0.1), -6px -6px 12px rgba(0, 0, 0, 0.15) inset, 6px 6px 12px rgba(255, 255, 255, 0.25) inset, -6px -6px 12px rgba(255, 255, 255, 0.05); background-color: #3793D6; color: #ffffff; margin-right: 5px; padding: 1pt 5pt; content: counter(index, decimal); border-radius: 50%; } /*------------------------------------ Blog sidebar post -------------------------------------*/ .blog-section .side-bar .row { /*-------Sidebar Post Row--------------*/ display: flex; display: -webkit-flex; justify-content: center; -webkit-justify-content: center; margin-bottom: 2.5pt; } .blog-section .side-bar .col-7 { /*-------Sidebar Post rightside text--------------*/ padding: 0 5pt; } .blog-section .side-bar img { /*-------Post Image--------------*/ width: 100%; height: 80pt; object-fit: cover; } .blog-section .side-bar h5 { /*-------Sidebar Post Title-------------*/ text-wrap: balance; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; /* number of lines to show */ font-size: clamp(9pt, 2vw, 10pt); text-transform: capitalize; font-weight: bolder; color: #12171B; } .blog-section .side-bar .author { /*-------Sidebar Post author-------------*/ font-size: clamp(8pt, 2vw, 9pt); color: #F2707E; } .blog-section .side-bar .cat { /*-------Sidebar Post Category-------------*/ font-size: clamp(8pt, 2vw, 10pt); color: #3691D2; text-transform: capitalize; line-height: 0.5pt; } /*----------------------------------------------------------- +++Contact Section++++ --------------------------------------------------------------*/ /* ONLY ORANGE CONTAINER STYLES - NO OTHER CODE CHANGED */ .contact-section { position: relative; /* 🔥 VERY IMPORTANT */ background-image: url("../img/paper-texture.jpeg"); background-size: cover; background-position: center; background-repeat: no-repeat; background-color: #f5f0ed; border: none; box-shadow: none; padding: 110px 0 100px; /* 🔥 remove bottom gap */ overflow: hidden; /* 🔥 prevents overlay issues */ } .contact-section::before { content: ""; position: absolute; inset: 0; background: rgba(255, 255, 255, 0.65); /* 🔥 same softness */ z-index: 0; } .contact-content-row { display: flex; align-items: flex-start; } .contact-info-wrapper, .contact-form-wrapper { height: 100%; } /*------------------------------------------------ section row and column --------------------------------------------------*/ .contact-section .row { /*-----Row Style || all item under row will take center position-------------*/ display: flex; display: -webkit-flex; align-items: center; -webkit-align-items: center; justify-content: center; -webkit-justify-content: center; } .contact-section .col-12 { /*------all colum's margin and width--------*/ margin-bottom: 0pt; } .contact-section .section-title { /*-----section Title2-------------*/ font-size: clamp(21pt, 3vw, 36pt); text-transform: capitalize; color: #000000; font-weight: bolder; padding-bottom: 1vw; text-wrap: pretty; } /*--------------------------------------------------------------- Section Text ( offer-section -- available in Front page ) ----------------------------------------------------------------*/ .contact-section .section-text { /*-----Section text-------------*/ font-weight: normal; font-size: clamp(9pt, 2vw, 10pt); color: #6a737b; padding-bottom: 1vw; text-wrap: pretty; } /*------------------------------------- Contact information ---------------------------------------*/ .contact-section .d-inline-flex { /*------List item make center-------*/ display: flex; justify-content: center; align-items: center; padding: 10pt 0pt 0pt 0pt; } .contact-section .d-inline-flex .text { font-weight: normal; font-size: clamp(10pt, 2vw, 12pt); color: #3586FF; margin-left: 10pt; } /*------------------------------------- Contact information Title ---------------------------------------*/ .contact-section .d-inline-flex h4 { /*--------Contact info Title----------*/ font-size: clamp(10pt, 2vw, 18pt); text-transform: capitalize; color: #0748A7; font-weight: bolder; } /*------------------------------------- Contact information Text ---------------------------------------*/ .contact-section .d-inline-flex p { /*--------Contact info Text----------*/ font-weight: normal; font-size: clamp(8pt, 2vw, 10pt); color: #098CD2; } /*------------------------------------------- Contact Form Input Place holder ----------------------------------------------*/ .contact-section input::placeholder { color: gray; } /* Contact Page - New Styling */ .contact-info-wrapper { background: #ffffff; padding: 2rem; border-radius: 16px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08); border: 1px solid #e5e7eb; border-top: 4px solid #FF5252; } .contact-form-wrapper { background: #ffffff; padding: 2rem; border-radius: 16px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08); border: 1px solid #e5e7eb; border-top: 4px solid #4CAF50; } .contact-section .contact-content-row { align-items: stretch; } .contact-section .contact-content-row>[class*="col-"] { display: flex; } .contact-info-wrapper, .contact-form-wrapper { width: 100%; height: 100%; } .contact-info-wrapper .section-title1 { color: #1f2937; margin-bottom: 1.2rem; font-size: clamp(18pt, 3vw, 24pt); font-weight: 800; } .contact-form-wrapper .section-title1 { color: #1f2937; margin-bottom: 1.2rem; font-size: clamp(18pt, 3vw, 24pt); font-weight: 800; } .contact-info-wrapper .section-text { margin-bottom: 1.75rem; } .contact-info-item { display: flex; align-items: flex-start; margin-bottom: 2.5vw; padding-bottom: 2vw; border-bottom: 2px solid rgba(0, 0, 0, 0.05); transition: all 0.3s ease; } .contact-info-item:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; } .contact-info-item:hover { transform: translateX(8px); } .contact-info-item h5 { font-size: clamp(12pt, 2vw, 18pt); font-weight: 900; text-transform: uppercase; margin: 0 0 0.5vw 0; letter-spacing: 1px; } .contact-info-item .badge { width: 60px; height: 60px; min-width: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; margin-right: 1.5vw; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.12); } .badge-location { background: linear-gradient(135deg, #FF5252 0%, #FF1744 100%); color: #ffffff; } .badge-location:hover { transform: scale(1.1) rotate(-5deg); } .badge-phone { background: linear-gradient(135deg, #A1C2FA 0%, #2196F3 100%); color: #ffffff; } .badge-phone:hover { transform: scale(1.1) rotate(-5deg); } .badge-email { background: linear-gradient(135deg, #9AD4A9 0%, #4CAF50 100%); color: #ffffff; } .badge-email:hover { transform: scale(1.1) rotate(-5deg); } .contact-info-item .text { flex: 1; } .contact-info-item p { margin: 0; font-size: clamp(10pt, 1.8vw, 12pt); color: #666; line-height: 1.6; } .contact-info-item a { color: #4a5568; text-decoration: none; font-weight: 600; transition: all 0.3s ease; } .contact-info-item a:hover { color: #FF9100; } /* Update Contact Form Styling */ .contact-form-wrapper form { padding: 0; box-shadow: none; border: none; border-radius: 0; background: transparent; margin: 0; } .contact-form-wrapper form label { font-size: clamp(11pt, 2vw, 14pt); text-transform: uppercase; color: #0E0E57; font-weight: 900; padding-bottom: 0.8vw; letter-spacing: 1px; } .contact-form-wrapper input { background: #ffffff; padding: 1vw 1.5vw; height: auto; font-size: clamp(9pt, 2vw, 11pt); border-radius: 10px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); border: 2px solid #ff9800; transition: all 0.3s ease; } .contact-form-wrapper input:focus { border-color: #f57c00; box-shadow: 0 4px 15px rgba(245, 124, 0, 0.2); outline: none; } .contact-form-wrapper textarea { background: #ffffff; font-size: clamp(9pt, 2vw, 11pt); border-radius: 10px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); border: 2px solid #ff9800; padding: 1vw 1.5vw; transition: all 0.3s ease; font-family: inherit; } .contact-form-wrapper textarea:focus { border-color: #f57c00; box-shadow: 0 4px 15px rgba(245, 124, 0, 0.2); outline: none; } .contact-form-wrapper .form-control { border: 1.5px solid #ff9800; box-shadow: none; } .contact-form-wrapper .form-control:focus { border-color: #f57c00; box-shadow: 0 0 0 0.2rem rgba(245, 124, 0, 0.2); } .contact-form-wrapper .btn { display: inline-flex; align-self: center; padding: 1.2vw 3vw; text-decoration: none; text-transform: uppercase; font-size: clamp(10pt, 2vw, 12pt); font-weight: 900; border-radius: 10px; border: none; background: linear-gradient(135deg, #4CAF50 0%, #9AD4A9 100%); color: #ffffff; box-shadow: 0 6px 20px rgba(76, 175, 80, 0.3); cursor: pointer; transition: all 0.3s ease; letter-spacing: 1px; margin-top: 1vw; } .contact-form-wrapper .btn:hover { transform: translateY(-2px); box-shadow: 0 10px 30px rgba(76, 175, 80, 0.4); background: linear-gradient(135deg, #9AD4A9 0%, #4CAF50 100%); } .contact-form-wrapper .invalid-feedback { color: #FF5252; font-size: clamp(8pt, 1.8vw, 10pt); display: block; margin-top: 0.5vw; } .contact-section #messages { border-radius: 10px; background: linear-gradient(135deg, #4CAF50 0%, #9AD4A9 100%); padding: 2vw; color: #ffffff; margin-top: 2vw; border: 2px solid #2E7D32; box-shadow: 0 4px 15px rgba(76, 175, 80, 0.3); } .contact-section #messages_content p { color: #ffffff; margin: 0; font-size: clamp(12pt, 2vw, 14pt); font-weight: 600; text-align: center; letter-spacing: 0.5px; } .contact-section .map { background: #ffffff; padding: 0; border-radius: 0; box-shadow: none; border: none; overflow: hidden; margin-top: 30px; /* avoid overlap under fixed header */ min-height: 500px; } .contact-section .map iframe { width: 100%; height: 100%; min-height: 500px; border: none; } .contact-section .map .ratio { aspect-ratio: 16 / 9; min-height: 500px; } /* Floating WhatsApp button styles */ /* Mobile: raise button above footer */ /* Favicon fly-by animation */ .favicon-fly { position: fixed; bottom: 20px; left: -64px; width: 48px; height: 48px; z-index: 9999; pointer-events: none; filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.2)); animation: faviconFly 9s ease-out forwards; } @keyframes faviconFly { 0% { transform: translateX(0) rotate(0deg); opacity: 0; } 10% { opacity: 1; } 50% { transform: translateX(50vw) rotate(6deg); opacity: 1; } 100% { transform: translateX(calc(100vw + 96px)) rotate(0deg); opacity: 0; } } /* Divider under full-width map */ .contact-divider { border: 0; border-top: 1px solid rgba(0, 0, 0, 0.12); margin: 0; } /*----------------------------------------------------------- +++Footer Section+++++ --------------------------------------------------------------*/ .footer-section { margin-top: 0; position: relative; width: 100%; /* background: #0E0E57; */ background: #F77E2D; padding: 20px 50px; } .footer-section .copntainer { overflow: hidden; } .footer-section .row { /*----Footer Row-----*/ display: flex; justify-content: center; } .footer-section .col-12 { padding: 3vw 0.5vw; } .footer-section h4, .footer-section h3, /*------Footer title------------*/ .footer-section h2, .footer-section h1 { font-size: clamp(14pt, 2vw, 18pt); color: #ffffff; text-transform: uppercase; font-weight: bolder; padding-bottom: 5pt; } .footer-section p, /*------Footer Text----------*/ .footer-section a, .footer-section a:hover, .footer-section .nav-link, .footer-section .nav-link:hover { font-size: clamp(11pt, 2vw, 12pt); text-wrap: balance; } .footer-section p, /*------Footer Text----------*/ .footer-section a, .footer-section a:hover, .footer-section .contact .badge i, .footer-section .d-inline-flex .text, .footer-section .nav-link, .footer-section .nav-link:hover { color: #D0EFFF; } .footer-section .nav-link { margin-left: 10pt; } /*----------------------------------------------------------- +++Subscribe form ( Footer Section)++++ --------------------------------------------------------------*/ /*----------------------------------------------------------- +++Contact information ( Footer Section)++++ --------------------------------------------------------------*/ .footer-section .contact .d-inline-flex { /*------List item make center-------*/ display: flex; justify-content: center; align-items: center; padding: 10pt 0pt 0pt 0pt; } .footer-section .contact .d-inline-flex .text { font-weight: normal; font-size: clamp(9pt, 2vw, 11pt); text-wrap: pretty; } .footer-section .contact .badge { width: 30pt; height: 30pt; margin-right: 15px; font-size: clamp(14pt, 2vw, 18pt); display: flex; justify-content: center; align-items: center; border-radius: 50%; } /*----------------------------------------------------------- +++Social media ( Footer Section)++++ --------------------------------------------------------------*/ .footer-section .social-links .btn-square { /*-----Social Icon Background-------*/ border: 2px solid #e74c3c; /*-----Social Icon border------*/ transition: all cubic-bezier(0.455, 0.03, 0.515, 0.955); /*-------Social button transform on click animation---------*/ display: flex; justify-content: center; align-items: center; width: 30pt; height: 30pt; margin-right: 5pt; margin-bottom: 10pt; } .footer-section .social-links i { /*-----Social Icon -------*/ font-size: clamp(9pt, 2vw, 11pt); /*-------Social Icon font size---------*/ color: #ffffff; /*----Social Icon Color--------*/ } .footer-section .social-links .btn-square:hover { /*-----Social Icon Background when hover-------*/ background-color: #ffffff; /*-----Social button background color on hover------*/ } .footer-section .social-links .btn-square:hover i { /*------Social icon color on hover------------*/ color: #0E0E57; } /*----------------------------------------------------------- +++Footer layout normalization++++ keep all footer sections aligned and typography consistent --------------------------------------------------------------*/ .footer-section .container { max-width: 1220px; } .footer-section .row { align-items: flex-start; row-gap: 14px; } .footer-section .row>[class*="col-"] { display: flex; flex-direction: column; justify-content: flex-start; padding-top: 1.2rem; padding-bottom: 1.2rem; } .footer-section .footer-title, .footer-section .footer-widget h3, .footer-section h3 { font-size: 1.25rem !important; line-height: 1.3; margin-bottom: 0.75rem; } .footer-section p, .footer-section .nav-link, .footer-section .contact .text, .footer-section .contact .text a, .footer-section .footer-text p, .footer-section .subscribe-form input[type="text"] { font-size: 1rem !important; line-height: 1.55; } .footer-section .nav-link { padding-top: 0.25rem; padding-bottom: 0.25rem; margin-left: 0; } .footer-section .contact .d-flex.align-items-center { min-height: 50px; } .footer-section .social-links { width: 100%; flex-wrap: wrap; } /*----------------------------------------------------------- +++Wave animation ( Footer Section)++++ Create some wave animation --------------------------------------------------------------*/ .footer-section .wave { /*-------all wave have same behavior-------------*/ position: absolute; top: -100px; left: 0; width: 100%; height: 100px; background: url('../img/wave.png'); background-size: 1000px 100px; } /*----Create wave (Wave_Water) and reverse wave (Reverse_Wave_Water) animtion in animate.css-----*/ .footer-section .waves :nth-child(1) { /*-----Wave1-------*/ z-index: 1000; opacity: 1; bottom: 0; animation: Wave_Water 4s linear infinite; } .footer-section .waves :nth-child(2) { /*----Wave2-----*/ z-index: 999; opacity: 0.5; bottom: 10px; animation: Reverse_Wave_Water 4s linear infinite; } .footer-section .waves :nth-child(3) { /*-----Wave3---------*/ z-index: 1000; opacity: 0.2; bottom: 0; animation: Wave_Water 3s linear infinite; } .footer-section .waves :nth-child(4) { /*------Wave4--------*/ z-index: 999; opacity: 0.7; bottom: 20px; animation: Reverse_Wave_Water 3s linear infinite; } /*----------------------------------------------------------- +++Bubble ( Footer Section)++++ create a bubble animation --------------------------------------------------------------*/ .footer-section .dots div { height: clamp(35px, 5vw, 70px); width: clamp(35px, 5vw, 70px); position: absolute; pointer-events: none; animation-iteration-count: infinite; animation-timing-function: linear; /* 🔥 SMOOTH LINEAR MOVEMENT */ animation-fill-mode: forwards; bottom: -50px; } .footer-section .dots { position: absolute; bottom: 0; left: 0; right: 0; top: 0; overflow: hidden; pointer-events: none; z-index: 1; } .footer-section .dots .elephant-float { width: 100%; height: 100%; display: block; object-fit: contain; overflow: hidden; opacity: 0.85; } .footer-section .dots div:nth-child(1) { top: 12%; left: 8%; animation: floatRandom1 3.5s infinite linear; animation-delay: 0s; } .footer-section .dots div:nth-child(2) { top: 85%; left: 92%; animation: floatRandom2 4s infinite linear; animation-delay: 0.5s; } .footer-section .dots div:nth-child(3) { top: 35%; left: 15%; animation: floatRandom3 3.8s infinite linear; animation-delay: 1s; } .footer-section .dots div:nth-child(4) { top: 72%; left: 45%; animation: floatRandom4 4.5s infinite linear; animation-delay: 0.3s; } .footer-section .dots div:nth-child(5) { top: 18%; left: 75%; animation: floatRandom5 3.2s infinite linear; animation-delay: 1.5s; } .footer-section .dots div:nth-child(6) { top: 55%; left: 88%; animation: floatRandom1 5s infinite linear; animation-delay: 0.8s; } .footer-section .dots div:nth-child(7) { top: 8%; left: 48%; animation: floatRandom2 3.6s infinite linear; animation-delay: 2s; } .footer-section .dots div:nth-child(8) { top: 42%; left: 5%; animation: floatRandom3 4.2s infinite linear; animation-delay: 0.1s; } .footer-section .dots div:nth-child(9) { top: 92%; left: 28%; animation: floatRandom4 2.8s infinite linear; animation-delay: 1.2s; } .footer-section .dots div:nth-child(10) { top: 65%; left: 68%; animation: floatRandom5 4.8s infinite linear; animation-delay: 0.6s; } .footer-section .dots div:nth-child(11) { top: 28%; left: 55%; animation: floatRandom1 5.5s infinite linear; animation-delay: 1.8s; } .footer-section .dots div:nth-child(12) { top: 78%; left: 18%; animation: floatRandom2 3.3s infinite linear; animation-delay: 0.2s; } .footer-section .dots div:nth-child(13) { top: 48%; left: 35%; animation: floatRandom3 4.6s infinite linear; animation-delay: 0.9s; } .footer-section .dots div:nth-child(14) { top: 5%; left: 98%; animation: floatRandom4 3.9s infinite linear; animation-delay: 2.2s; } .footer-section .dots div:nth-child(15) { top: 62%; left: 12%; animation: floatRandom5 4.1s infinite linear; animation-delay: 1.3s; } /* Random float keyframes - each with different movement patterns */ /* UPWARD FLOATING BUBBLES - RANDOM MOVEMENTS */ /* FASTER UPWARD FLOATING BUBBLES */ /* STRAIGHT UPWARD FLOATING BUBBLES - NO SIDE MOVEMENT */ /* SMOOTH CONTINUOUS UPWARD BUBBLES - NO STOPPING */ @keyframes floatRandom1 { 0% { transform: translateY(0px) scale(1); opacity: 0.6; } 25% { transform: translateY(-35px) scale(1.05); opacity: 0.8; } 50% { transform: translateY(-70px) scale(1.1); opacity: 0.9; } 75% { transform: translateY(-105px) scale(1.15); opacity: 0.7; } 100% { transform: translateY(-140px) scale(1.2); opacity: 0; } } @keyframes floatRandom2 { 0% { transform: translateY(0px) scale(1); opacity: 0.7; } 25% { transform: translateY(-30px) scale(1.08); opacity: 0.9; } 50% { transform: translateY(-65px) scale(1.12); opacity: 1; } 75% { transform: translateY(-100px) scale(1.18); opacity: 0.6; } 100% { transform: translateY(-130px) scale(1.25); opacity: 0; } } @keyframes floatRandom3 { 0% { transform: translateY(0px) scale(1); opacity: 0.8; } 25% { transform: translateY(-28px) scale(1.03); opacity: 0.95; } 50% { transform: translateY(-60px) scale(1.08); opacity: 1; } 75% { transform: translateY(-95px) scale(1.12); opacity: 0.65; } 100% { transform: translateY(-125px) scale(1.18); opacity: 0; } } @keyframes floatRandom4 { 0% { transform: translateY(0px) scale(1); opacity: 0.5; } 25% { transform: translateY(-32px) scale(1.06); opacity: 0.85; } 50% { transform: translateY(-68px) scale(1.12); opacity: 0.95; } 75% { transform: translateY(-102px) scale(1.18); opacity: 0.55; } 100% { transform: translateY(-135px) scale(1.22); opacity: 0; } } @keyframes floatRandom5 { 0% { transform: translateY(0px) scale(1); opacity: 0.75; } 25% { transform: translateY(-25px) scale(1.04); opacity: 0.9; } 50% { transform: translateY(-55px) scale(1.1); opacity: 1; } 75% { transform: translateY(-88px) scale(1.15); opacity: 0.6; } 100% { transform: translateY(-118px) scale(1.2); opacity: 0; } } .footer-section.footer-compact { padding: 30px 50px 15px !important; } .footer-section.footer-compact .col-12 { padding: 10px 0 !important; } /* Title */ .footer-compact-title { font-size: clamp(13pt, 2vw, 16pt) !important; text-transform: uppercase; letter-spacing: 4px; color: #fff !important; margin-bottom: 22px !important; padding-bottom: 0 !important; position: relative; display: inline-block; } .footer-compact-title::after { content: ''; position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%); width: 50px; height: 2px; background: #fff; border-radius: 2px; animation: titleLineGrow 1.5s ease forwards; } @keyframes titleLineGrow { from { width: 0; opacity: 0; } to { width: 50px; opacity: 1; } } /* Contact Grid - horizontal cards */ /* Contact Grid - single row */ .footer-contact-grid { display: flex; justify-content: center; gap: 12px; flex-wrap: nowrap; margin: 0 auto; max-width: 1100px; } .footer-contact-card { display: flex; align-items: center; gap: 10px; flex: 1 1 0; min-width: 0; justify-content: center; background: rgba(255, 255, 255, 0.12); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 50px; padding: 7px 14px 7px 7px; text-decoration: none !important; color: #fff !important; transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1); cursor: pointer; animation: cardFadeUp 0.6s ease backwards; } .footer-contact-card:nth-child(1) { animation-delay: 0.1s; } .footer-contact-card:nth-child(2) { animation-delay: 0.2s; } .footer-contact-card:nth-child(3) { animation-delay: 0.3s; } .footer-contact-card:nth-child(4) { animation-delay: 0.4s; } @keyframes cardFadeUp { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } } .footer-contact-card:hover { background: rgba(255, 255, 255, 0.22); transform: translateY(-3px); box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15); } /* Contact Icons */ .footer-contact-icon { width: 32px; height: 32px; min-width: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; color: #fff; transition: transform 0.3s ease, box-shadow 0.3s ease; } .footer-contact-card:hover .footer-contact-icon { transform: scale(1.15) rotate(-8deg); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25); } .icon-phone { background: #e74c3c; } .icon-email { background: #16a085; } .icon-web { background: #f1c40f; color: #333 !important; } .icon-location { background-color: #8E978E; color: white; } /* Contact Text */ .footer-contact-label { display: none; } .footer-contact-value { white-space: nowrap !important; overflow: hidden; text-overflow: ellipsis; font-size: clamp(8pt, 1.2vw, 10pt) !important; font-weight: 600; } /* Mobile: stack on small screens */ /* Divider */ .footer-divider { width: 80px; height: 1px; background: rgba(255, 255, 255, 0.3); margin: 18px auto; } /* Social Icons Row */ .footer-social-row { display: flex; justify-content: center; gap: 14px; margin-bottom: 5px; } .footer-social-btn { width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; background: rgba(255, 255, 255, 0.95); text-decoration: none !important; transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); position: relative; overflow: hidden; animation: socialPop 0.5s ease backwards; } .footer-social-btn:nth-child(1) { animation-delay: 0.5s; } .footer-social-btn:nth-child(2) { animation-delay: 0.6s; } .footer-social-btn:nth-child(3) { animation-delay: 0.7s; } .footer-social-btn:nth-child(4) { animation-delay: 0.8s; } @keyframes socialPop { from { opacity: 0; transform: scale(0.3) rotate(-20deg); } to { opacity: 1; transform: scale(1) rotate(0deg); } } .footer-social-btn::before { content: ''; position: absolute; inset: 0; border-radius: 50%; opacity: 0; transition: opacity 0.3s ease; } .footer-social-btn:hover { transform: translateY(-5px) scale(1.12); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2); } /* Brand colors per platform */ .social-linkedin i { color: #0A66C2; } .social-instagram i { color: #E1306C; } .social-youtube i { color: #FF0000; } .social-facebook i { color: #1877F2; } .social-linkedin:hover { background: #0A66C2; box-shadow: 0 10px 25px rgba(10, 102, 194, 0.4); } .social-instagram:hover { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); box-shadow: 0 10px 25px rgba(225, 48, 108, 0.4); } .social-youtube:hover { background: #FF0000; box-shadow: 0 10px 25px rgba(255, 0, 0, 0.4); } .social-facebook:hover { background: #1877F2; box-shadow: 0 10px 25px rgba(24, 119, 242, 0.4); } .footer-social-btn:hover i { color: #fff !important; } /* Mobile adjustments */ /*--------------------------------------------------------------- PORTFOLIO PAGE REDESIGN STYLING ---------------------------------------------------------------*/ /* Portfolio Hero Section */ .portfolio-hero .section-title h1 { font-size: clamp(32pt, 5vw, 54pt); font-weight: 900; text-transform: uppercase; letter-spacing: 2px; } .hero-subtitle { font-size: clamp(16pt, 2.5vw, 24pt) !important; font-weight: 700; color: #FFB800 !important; margin: 15px 0; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); } .hero-description { font-size: clamp(12pt, 1.5vw, 16pt) !important; color: rgba(255, 255, 255, 0.95) !important; max-width: 800px; margin: 0 auto; line-height: 1.6; } /* Portfolio Stats Section */ .portfolio-stats { display: flex; justify-content: center; gap: 30px; flex-wrap: wrap; padding: 60px 0; margin-bottom: 40px; } .stat-card { flex: 1; min-width: 200px; max-width: 250px; padding: 30px 20px; background: linear-gradient(135deg, #FFFFFF, #F8F9FA); border-radius: 15px; text-align: center; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1); transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); border: 2px solid transparent; } .stat-card:hover { transform: translateY(-10px); box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15); border-color: #FF5252; } .stat-card i { font-size: 48px; color: #FF5252; margin-bottom: 15px; display: block; } .stat-card h3 { font-size: 42px; font-weight: 900; color: #000000; margin: 10px 0; } .stat-card p { font-size: 14px; color: #666666; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; margin: 0; } /* Filter Buttons Redesign */ .portfolio-section .filters { text-align: center; margin: 40px 0 60px; padding: 0 15px; } .portfolio-section .filters ul { display: inline-flex; flex-wrap: wrap; justify-content: center; gap: 15px; padding: 0; margin: 0; list-style: none; } .portfolio-section .filters li { list-style: none; } .portfolio-section .filter-btn { padding: 12px 30px; background: linear-gradient(135deg, #FFFFFF, #F5F5F5); border: 2px solid #E0E0E0; border-radius: 50px; font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: #333333; cursor: pointer; transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); } .portfolio-section .filter-btn:hover { transform: translateY(-3px); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.15); border-color: #FF5252; color: #FF5252; } .portfolio-section .filters li.active .filter-btn { background: linear-gradient(135deg, #FF5252 0%, #FF9100 100%); border-color: #FF5252; color: #FFFFFF; box-shadow: 0 5px 20px rgba(255, 82, 82, 0.3); } /* Portfolio Grid Enhancement */ .portfolio-section .grid { max-width: 1400px; margin: 0 auto; padding: 0 15px; } .portfolio-section .grid-item { margin-bottom: 30px; transition: all 0.4s ease; } .portfolio-section .grid-item:hover { transform: translateY(-5px); } .portfolio-section .grid-item img { transition: all 0.4s ease; } .portfolio-section .grid-item:hover img { transform: scale(1.05); } .portfolio-section .overlay { background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.85) 100%); } .portfolio-section .overlay .text h4 { font-size: 20px; font-weight: 900; color: #FFFFFF; margin-bottom: 8px; letter-spacing: 0.5px; } .portfolio-section .overlay .text p { font-size: 14px; color: rgba(255, 255, 255, 0.9); font-weight: 500; line-height: 1.5; } .portfolio-section .icon { width: 60px; height: 60px; background: linear-gradient(135deg, #FF5252 0%, #FF9100 100%); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 24px; color: #FFFFFF; box-shadow: 0 5px 20px rgba(255, 82, 82, 0.4); transition: all 0.3s ease; } .portfolio-section .grid-item:hover .icon { transform: scale(1.2); box-shadow: 0 8px 30px rgba(255, 82, 82, 0.6); } .portfolio-section .icon.play { background: linear-gradient(135deg, #42A5F5 0%, #00BCD4 100%); box-shadow: 0 5px 20px rgba(66, 165, 245, 0.4); } .portfolio-section .grid-item:hover .icon.play { box-shadow: 0 8px 30px rgba(66, 165, 245, 0.6); } /* Responsive Design for Portfolio */ .footer-section .dots div:nth-child(11) { top: 10%; left: 90%; animation: bubble 9s linear infinite; } .footer-section .dots div:nth-child(12) { top: 20%; left: 70%; animation: bubble 7s linear infinite; } .footer-section .dots div:nth-child(13) { top: 20%; left: 20%; animation: bubble 8s linear infinite; } .footer-section .dots div:nth-child(14) { top: 60%; left: 5%; animation: bubble 6s linear infinite; } .footer-section .dots div:nth-child(15) { top: 90%; left: 80%; animation: bubble 9s linear infinite; } /*----------------------------------------------------------- +++ Copyright++++ --------------------------------------------------------------*/ .copyright { background: #F77E2D; /* same as footer background */ border: 1px solid #F77E2D; } .copyright .container { border-top: 1px solid rgba(255, 255, 255, .25); padding: 5pt 0; } .copyright p { /*-----Copyright Text-----*/ font-size: clamp(10pt, 2vw, 12pt); text-transform: capitalize; text-align: center; color: #FFE5D0; padding: 15pt 0pt 3pt 0pt; } /* Navigation video overlay */ .nav-video-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; display: flex; align-items: center; /* vertical center */ justify-content: center; /* horizontal center */ height: 100vh; /* ensure overlay fills viewport vertically */ width: 100vw; padding: 0; background: #1c1a1abd; /* black background */ z-index: 2147483647; /* very high to outrank other fixed elements */ pointer-events: auto; box-sizing: border-box; } .nav-video-overlay[aria-hidden="true"] { display: none; } /* absolutely center the video so it's always in the middle of the viewport */ .nav-video-overlay .nav-video { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: block; max-width: 500px; /* increased to 500px as requested */ width: 200px; /* preserve aspect ratio */ height: auto; max-height: 80vh; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6); border-radius: 8px; } /* Ensure the video remains responsive on small screens */ /* Skip button no longer participates in flex flow so it won't offset the video */ .nav-video-overlay .nav-video-skip { position: absolute; top: 16px; right: 16px; z-index: 2147483648; background: rgba(255, 255, 255, 0.06); border: none; color: #fff; padding: 8px 12px; border-radius: 4px; cursor: pointer; } /*--------------------------------------------------------------- ABOUT PAGE REDESIGN STYLING ---------------------------------------------------------------*/ /* About Hero Tagline */ .hero-tagline { font-size: clamp(14pt, 2.5vw, 22pt) !important; font-weight: 700; color: #FFB800 !important; margin-top: 15px; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); } /* Value Points Section */ .value-points { margin: 25px 0; display: flex; flex-direction: column; gap: 15px; } .value-point { display: flex; align-items: center; gap: 15px; padding: 15px; background: rgba(255, 255, 255, 0.05); border-radius: 10px; border-left: 4px solid #FF5252; transition: all 0.3s ease; } .value-point:hover { background: rgba(255, 255, 255, 0.1); transform: translateX(5px); } .value-point i { font-size: 28px; color: #FF5252; min-width: 40px; } .value-point p { margin: 0; font-size: 16px; font-weight: 600; color: #333333; } .closing-statement { margin-top: 25px; font-size: 18px; line-height: 1.6; color: #FF5252; } /* Philosophy Section */ .philosophy-section { padding: 80px 0; background: linear-gradient(135deg, #F8F9FA 0%, #FFFFFF 100%); } .section-subtitle { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; color: #666666; margin-bottom: 15px; } .section-title-big { font-size: clamp(28pt, 4vw, 48pt); font-weight: 900; color: #000000; margin-bottom: 40px; letter-spacing: 1px; } .philosophy-grid { display: flex; justify-content: center; gap: 40px; margin: 40px 0; flex-wrap: wrap; } .philosophy-item { text-align: center; flex: 1; min-width: 150px; max-width: 200px; } .philosophy-item i { font-size: 56px; color: #FF5252; margin-bottom: 15px; display: block; transition: all 0.3s ease; } .philosophy-item:hover i { transform: scale(1.1); color: #FF9100; } .philosophy-item p { font-size: 18px; font-weight: 600; color: #333333; margin: 0; } .philosophy-tagline { font-size: 20px; color: #FF5252; margin-top: 30px; } /* Mission Section */ .mission-section { padding: 80px 0; background: linear-gradient(135deg, #FF5252 0%, #FF9100 100%); color: #FFFFFF; } .mission-statement { font-size: clamp(24pt, 3.5vw, 40pt); font-weight: 900; color: #FFFFFF; margin: 20px 0 40px; line-height: 1.3; } .btn-mission { background: linear-gradient(135deg, #FFFFFF, #F0F0F0); color: #FF5252 !important; font-weight: 900; border: none; padding: 15px 40px; border-radius: 50px; transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1); box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2); text-transform: uppercase; letter-spacing: 1px; } .btn-mission:hover { transform: translateY(-3px); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3); background: #FFFFFF; } /* Responsive Design for About Page */ /* prevent background scrolling while nav video overlay is open */ body.nav-video-open { overflow: hidden; } .nav-video-skip { position: absolute; top: 18px; right: 18px; background: rgba(255, 255, 255, 0.95); color: #111; border: none; padding: 8px 12px; border-radius: 6px; cursor: pointer; font-weight: 600; z-index: 10000; } .nav-video-skip:focus { outline: 2px solid #fff; outline-offset: 3px; } /* Force white backgrounds for all main sections across pages */ .philosophy-section, .mission-section, .founder-section, .offer-section, .presentation-section, .team-section, .team-profile-section, .sponsor-section, .blog-section, .portfolio-section, .faq-section, .social-section, .pricing-section, .service-section, .services-section, .other-hero-section, .portfolio-hero, .services-hero { background-color: #ffffff !important; background-image: none !important; background: #ffffff !important; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.03); } /* 3px section separators with alternating navy/gold */ .about-section, .goal-section, .about-intro-hero, .founder-section, .presentation-section, .blog-section, .contact-section, .social-section, .service-section, .other-hero-section { border-top: 3px solid #0E0E57; border-bottom: 3px solid #0E0E57; } .philosophy-section, .mission-section, .offer-section, .team-section, .team-profile-section, .sponsor-section, .portfolio-section, .faq-section, .pricing-section, .services-section, .portfolio-hero, .services-hero { border-top: 3px solid #f7d64a; border-bottom: 3px solid #f7d64a; } /* Global typography consistency across pages */ html { font-size: 16px; } body { font-size: 1rem; line-height: 1.6; letter-spacing: 0.1px; color: #1f1f1f; } h1, h2, h3, h4 { line-height: 1.25; letter-spacing: 0.15px; } p, li, a, label, input, textarea, select, button { font-size: 1rem; line-height: 1.6; } .other-hero-section .section-title h1 { font-size: clamp(2rem, 5vw, 3.2rem); } .other-hero-section .section-title p, .hero-tagline { font-size: clamp(1rem, 2vw, 1.2rem); line-height: 1.5; } .section-title2, .section-title-big { font-size: clamp(1.8rem, 3.5vw, 2.5rem); line-height: 1.25; } .section-text { font-size: clamp(0.98rem, 1.4vw, 1.08rem); line-height: 1.7; } /* ============================================================ THINKING ELEPHANTS - COMPLETE MOBILE CSS Works on ALL mobile devices worldwide Portrait + Landscape ============================================================ */ /* ===== CSS VARIABLES FOR FLUID SIZING ===== */ :root { --navbar-h: 60px; --navbar-h-land: 44px; } /* ============================================================ PORTRAIT MODE (all phones) ============================================================ */ @media screen and (max-width: 991.98px) { html, body { overflow-x: hidden !important; width: 100% !important; max-width: 100vw !important; } /* ===== NAVBAR ===== */ /* ===== NAVBAR - ALL PAGES ALL MOBILES ===== */ /* ===== NAVBAR - ALL PAGES ALL MOBILES ===== */ /* ===== NAVBAR - ALL PAGES ALL MOBILES ===== */ .navbar, .navbar.show, .navbar:not(.show) { position: fixed !important; top: 0 !important; left: 0 !important; width: 100% !important; background: #ffffff !important; z-index: 9999 !important; padding: 0 !important; margin: 0 !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: none !important; transition: none !important; box-shadow: 0 2px 10px rgba(0,0,0,0.12) !important; height: auto !important; min-height: unset !important; } .navbar > .d-flex.d-lg-none { display: none !important; } .navbar .navbar-toggler { display: none !important; } .navbar .btn-square, .navbar .h-100.d-lg-inline-flex { display: none !important; } .navbar-collapse { display: flex !important; visibility: visible !important; padding: 0 !important; margin: 0 !important; border: none !important; background: #ffffff !important; width: 100% !important; height: auto !important; min-height: unset !important; } .navbar-collapse > div { padding: 0 !important; margin: 0 !important; width: 100% !important; } .navbar-nav { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; flex-wrap: nowrap !important; width: 100% !important; padding: 0 8px !important; margin: 0 !important; min-height: 44px !important; gap: 0 !important; } .navbar-nav .nav-item { flex: 0 1 auto !important; text-align: center !important; margin: 0 !important; padding: 0 !important; width: auto !important; display: flex !important; align-items: center !important; justify-content: center !important; height: 60px !important; } .navbar-nav .nav-link { font-size: clamp(7px, 1.8vw, 10px) !important; padding: 0 2px !important; white-space: nowrap !important; letter-spacing: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; width: 100% !important; height: 100% !important; line-height: 1.2 !important; } .navbar .menu-logo { display: flex !important; flex: 1 !important; justify-content: center !important; align-items: center !important; height: 44px !important; padding: 0 !important; margin: 0 !important; } .navbar .menu-logo img { height: clamp(22px, 4vw, 30px) !important; width: auto !important; display: block !important; } .navbar-nav.mx-auto { padding-right: 0 !important; } .nav-link.active { background: #f7d64a !important; border-radius: 999px !important; padding: 4px 10px !important; font-size: clamp(7px, 1.8vw, 10px) !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; width: auto !important; height: auto !important; } /* FORCE NAVBAR ITEMS TO STAY INSIDE - NO OVERFLOW */ .navbar, .navbar-collapse, .navbar-nav { overflow-x: auto !important; overflow-y: hidden !important; transform: none !important; -webkit-overflow-scrolling: touch !important; scrollbar-width: none !important; /* Hide scrollbar on Firefox */ } .navbar-nav::-webkit-scrollbar { display: none !important; /* Hide scrollbar on Chrome/Safari */ } .navbar-nav { flex-wrap: nowrap !important; min-width: 100% !important; width: max-content !important; gap: 6px !important; } .navbar-nav .nav-item { flex-shrink: 0 !important; /* PREVENT SHRINKING */ min-width: 0 !important; /* ALLOW TIGHT PACKING */ } .navbar-nav .nav-link { white-space: nowrap !important; padding: 8px 8px !important; /* balanced padding */ font-size: clamp(8px, 7vw, 11px) !important; font-weight: 600 !important; } /* ACTIVE PILL - TIGHTER */ .nav-link.active { padding: 7px 8px !important; font-size: clamp(8px, 7vw, 11px) !important; } /* LOGO - SMALLER TO FIT */ .navbar .menu-logo { flex-shrink: 0 !important; min-width: auto !important; } .navbar .menu-logo img { height: clamp(20px, 3.5vw, 28px) !important; max-width: 100px !important; } /* Kill ALL click circles on navbar - COMPLETE */ .navbar .nav-link, .navbar a, .navbar button, .navbar .nav-link:active, .navbar a:active, .navbar button:active, .navbar .nav-link:focus, .navbar a:focus, .navbar button:focus, .navbar .nav-link:focus-visible, .navbar a:focus-visible, .navbar button:focus-visible, .navbar .nav-link:focus-within, .navbar a:focus-within, .navbar button:focus-within { -webkit-tap-highlight-color: rgba(0,0,0,0) !important; tap-highlight-color: rgba(0,0,0,0) !important; outline: none !important; outline-style: none !important; box-shadow: none !important; -webkit-appearance: none !important; appearance: none !important; background-clip: padding-box !important; } @media screen and (max-width: 991.98px) and (orientation: landscape) { .navbar-nav { overflow-x: auto !important; scrollbar-width: none !important; -webkit-overflow-scrolling: touch !important; } .navbar-nav::-webkit-scrollbar { display: none !important; } .nav-link.active { padding: 3px 6px !important; font-size: clamp(8px, 1.5vw, 11px) !important; border-radius: 20px !important; background: #f7d64a !important; display: inline-flex !important; align-items: center !important; white-space: nowrap !important; width: auto !important; height: auto !important; } .navbar-nav .nav-item { flex-shrink: 0 !important; height: auto !important; padding: 4px 0 !important; } .navbar-nav .nav-link { height: auto !important; padding: 4px 4px !important; } } /* Kill tap highlight completely - portrait mobile */ @media screen and (max-width: 991.98px) { .navbar *, .navbar *:before, .navbar *:after { -webkit-tap-highlight-color: transparent !important; -webkit-touch-callout: none !important; -webkit-user-select: none !important; user-select: none !important; outline: none !important; } .navbar .nav-link:active, .navbar .nav-link:focus, .navbar .nav-link:focus-visible, .navbar .nav-link:focus-within, .navbar a:active, .navbar a:focus, .navbar a:focus-visible { -webkit-tap-highlight-color: transparent !important; background-color: transparent !important; outline: none !important; box-shadow: none !important; border-radius: 0 !important; } /* Only active pill keeps its yellow background */ .navbar .nav-link.active:active, .navbar .nav-link.active:focus { background: #f7d64a !important; border-radius: 999px !important; box-shadow: none !important; outline: none !important; } } /* ===== INDEX - HERO VIDEO ===== */ .hero-video-section { height: 50vh !important; min-height: 200px !important; max-height: 320px !important; margin-top: var(--navbar-h) !important; } .hero-video-section video { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center !important; } .hero-video-section .text-box { padding: 12px !important; } .hero-video-section .text-box h4 { font-size: clamp(8pt, 3vw, 11pt) !important; margin-top: 0 !important; letter-spacing: 1px !important; } .text-box-buttons { position: static !important; padding-left: 0 !important; justify-content: center !important; width: 100% !important; flex-wrap: wrap !important; gap: 10px !important; } #videoControlsPanel { right: 8px !important; height: auto !important; width: 36px !important; padding: 6px 4px !important; gap: 6px !important; } .control-btn { width: 28px !important; height: 28px !important; font-size: 11px !important; } /* ===== ABOUT SECTION (index page) ===== */ .about-section { padding: 0 !important; } .about-section .g-5 { padding: 30px 0 !important; flex-direction: column !important; } .about-section .img-block { height: auto !important; min-height: 200px !important; } .about-section .img-block img { position: relative !important; width: 100% !important; height: 200px !important; object-fit: cover !important; } .about-section .col-12:not(.img-block) { padding-left: 20px !important; padding-right: 20px !important; } .about-section h1:not(.count-number) { font-size: clamp(22px, 6vw, 32px) !important; } .about-section p:not(.count-number) { font-size: clamp(14px, 4vw, 17px) !important; } /* ===== ABOUT PAGE - INTRO HERO ===== */ .about-intro-hero { height: auto !important; min-height: auto !important; padding: calc(var(--navbar-h) + 30px) 0 30px 0 !important; margin-top: 0 !important; } .aih-title { font-size: clamp(28px, 7vw, 44px) !important; white-space: normal !important; line-height: 1.2 !important; } .aih-subtitle { font-size: clamp(16px, 4vw, 22px) !important; } .aih-text { font-size: clamp(14px, 3.5vw, 16px) !important; line-height: 1.7 !important; margin-bottom: 20px !important; } .aih-underline { margin-bottom: 20px !important; } .aih-illustration-col { justify-content: center !important; margin-top: 20px !important; } .aih-illustration { position: relative !important; bottom: auto !important; width: 65% !important; max-width: 240px !important; margin: 0 auto !important; display: block !important; } /* Blobs - smaller on mobile */ .blob-teal-1 { width: 70px !important; height: 70px !important; top: 20px !important; right: 15px !important; } .blob-teal-2 { display: none !important; } .blob-pink { width: 120px !important; height: 120px !important; left: -30px !important; } /* ===== ABOUT PAGE - VISION HERO ===== */ .about-vision-hero { height: auto !important; min-height: auto !important; padding: 40px 0 !important; } .avh-title { font-size: clamp(28px, 7vw, 44px) !important; line-height: 1.2 !important; } .avh-text { font-size: clamp(14px, 3.5vw, 16px) !important; line-height: 1.7 !important; margin-bottom: 15px !important; } .avh-underline { margin-bottom: 20px !important; } .avh-image-col { justify-content: center !important; height: auto !important; margin-top: 20px !important; } .avh-image { position: relative !important; bottom: auto !important; right: auto !important; width: 65% !important; max-width: 240px !important; margin: 0 auto !important; display: block !important; } /* ===== APPROACH SECTION ===== */ .approach-hero { height: auto !important; min-height: 260px !important; padding: 50px 20px 40px !important; } .approach-question-img { width: clamp(160px, 60vw, 240px) !important; margin-bottom: 10px !important; } .approach-title { font-size: clamp(22px, 6vw, 36px) !important; margin-bottom: 8px !important; } .approach-subtitle { font-size: clamp(12px, 3.5vw, 16px) !important; margin-bottom: 6px !important; } .approach-desc { font-size: clamp(11px, 3vw, 14px) !important; line-height: 1.5 !important; } /* ===== GOAL / VALUES SECTION ===== */ .goal-section { padding: 80px 15px !important; } .values-title { font-size: clamp(36px, 10vw, 56px) !important; } .values-subtext { font-size: clamp(14px, 3.5vw, 16px) !important; margin-bottom: 30px !important; } .values-wrapper { gap: 20px !important; justify-content: center !important; } .value-item { width: clamp(220px, 80vw, 280px) !important; height: 320px !important; } /* ===== SERVICE PAGE ===== */ .services-content { margin-top: var(--navbar-h) !important; } .service-card { min-height: auto !important; height: auto !important; padding: 50px 0 40px !important; } .service-card .col-lg-6 { padding: 20px 16px !important; } .service-visual-left { height: clamp(240px, 55vw, 320px) !important; } .srv-main-visual { width: 75% !important; } .srv-main-title { font-size: clamp(22px, 6vw, 34px) !important; white-space: normal !important; line-height: 1.2 !important; } .srv-subtitle-clean { font-size: clamp(10pt, 3vw, 13pt) !important; } .srv-desc-clean { font-size: clamp(14px, 3.5vw, 17px) !important; line-height: 1.7 !important; } .srv-focus-title { font-size: clamp(15px, 4vw, 19px) !important; } .srv-focus-list li { font-size: clamp(13px, 3.5vw, 16px) !important; } .srv-focus-list strong { font-size: clamp(14px, 4vw, 18px) !important; } .srv-focus-list span { font-size: clamp(13px, 3.5vw, 16px) !important; } .service-card:nth-of-type(3) .col-lg-6.order-lg-1 { transform: none !important; } .work-title { font-size: clamp(8px, 8vw, 48px) !important; } .work-subtitle { font-size: clamp(15px, 4vw, 20px) !important; } /* ===== SERVICE CTA SECTION MOBILE ===== */ .cta-bg-logo { width: clamp(700px, 100vw, 350px) !important; } .work-cta-section { padding: 40px 20px !important; min-height: auto !important; } .cta-wrapper { padding: 70px 0 !important; } /* ===== FLOWER DIVIDERS MOBILE ===== */ .service-divider { height: 0 !important; position: relative !important; } .divider-flower-img { width: clamp(60px, 15vw, 100px) !important; right: 20px !important; } .left-flower { width: clamp(60px, 15vw, 100px) !important; left: 20px !important; } /* ===== CONTACT PAGE ===== */ .contact-section { padding: calc(var(--navbar-h) + 20px) 0 40px 0 !important; } .contact-content-row { flex-direction: column !important; } .orange-info-card { padding: 16px 16px 16px 90px !important; margin-bottom: 10px !important; border-radius: 12px !important; } .orange-logo { width: 85px !important; top: 8px !important; left: -5px !important; } .company-name { font-size: clamp(16px, 4.5vw, 20px) !important; } .address-line { font-size: clamp(12px, 3.5vw, 15px) !important; } .contact-info-wrapper { padding: 20px 16px !important; margin-bottom: 10px; } .contact-info-wrapper .section-title1 { font-size: clamp(18px, 5vw, 24px) !important; } .contact-info-item h5 { font-size: clamp(14px, 4vw, 17px) !important; } .contact-info-item p, .contact-info-item a { font-size: clamp(13px, 3.5vw, 15px) !important; } .contact-info-item .badge { width: 48px !important; height: 48px !important; min-width: 48px !important; font-size: 20px !important; } .contact-form-wrapper { padding: 20px 16px !important; margin-bottom: 15px; } @media screen and (min-width: 768px) and (max-width: 991.98px) { .contact-content-row { display: flex !important; flex-direction: row !important; align-items: stretch !important; flex-wrap: nowrap !important; gap: 20px !important; } .contact-content-row > .col-12 { flex: 0 0 calc(50% - 10px) !important; max-width: calc(50% - 10px) !important; width: calc(50% - 10px) !important; display: flex !important; flex-direction: column !important; padding-left: 0 !important; padding-right: 0 !important; } .contact-info-wrapper, .contact-form-wrapper { width: 100% !important; height: 100% !important; flex: 1 !important; padding: 20px 16px !important; } } /* ===== UNIVERSAL TABLET FIX (ALL TABLETS) ===== */ /* ===== PERFECT TABLET FIX (ALL SIZES INCLUDING iPad Pro) ===== */ /* ===== iPad Pro manual footer shift ===== */ @media screen and (min-width: 1024px) and (max-width: 1366px) { html, body { height: auto !important; overflow: auto !important; padding-bottom: 0 !important; margin-bottom: 0 !important; } .contact-section { padding-bottom: 100px !important; margin-bottom: 0 !important; height: auto !important; min-height: unset !important; } .contact-section .map { min-height: 300px !important; max-height: 350px !important; } .contact-section .map iframe { min-height: 300px !important; height: 300px !important; } .footer-section { margin-top: 0 !important; padding-bottom: 15px !important; } .copyright { margin: 0 !important; padding-bottom: 5px !important; } } /* ===== TABLET FIX (iPad, iPad Pro, Air) ===== */ @media screen and (min-width: 768px) and (max-width: 1100px) { /* REMOVE extra space from contact section */ .contact-section { padding-bottom: 0 !important; margin-bottom: 0 !important; } /* FIX footer position */ .footer-section { margin-top: 0 !important; padding-top: 20px !important; } /* REMOVE gap completely */ body, html { height: auto !important; } } /* ============================================================ CONTACT PAGE - FOOTER SPACE FIX - TABLETS ONLY ============================================================ */ @media screen and (min-width: 768px) and (max-width: 1180px) { /* Fix contact section bottom */ .contact-section { padding-bottom: 100px !important; margin-bottom: 0 !important; min-height: unset !important; height: auto !important; } /* Fix map height */ .contact-section .map { min-height: 300px !important; max-height: 350px !important; margin-bottom: 0 !important; } .contact-section .map iframe { min-height: 300px !important; max-height: 350px !important; height: 300px !important; } .contact-section .map .ratio { min-height: 300px !important; max-height: 350px !important; } /* Kill white space after footer */ .footer-section { margin-top: 0 !important; margin-bottom: 0 !important; padding-bottom: 15px !important; } .copyright { margin-top: 0 !important; margin-bottom: 0 !important; padding-bottom: 0 !important; } html, body { padding-bottom: 0 !important; margin-bottom: 0 !important; height: auto !important; min-height: unset !important; } } /* ===== TESTIMONIAL SECTION ===== */ .testimonial-section { padding: 40px 0 !important; overflow: hidden !important; } .testimonial-section .row > .col-lg-6:first-child { transform: none !important; width: 100% !important; flex: 0 0 100% !important; max-width: 100% !important; padding: 0 15px !important; } /* ===== TESTIMONIAL SCENE - ALL MOBILES ===== */ .testimonial-section .img-container { display: flex !important; align-items: center !important; justify-content: center !important; overflow: hidden !important; padding: 0 !important; width: 100% !important; max-width: 100vw !important; height: clamp(260px, 80vw, 340px) !important; } .testimonial-section .col-12.col-lg-6.img-container { overflow: hidden !important; max-width: 100% !important; } .testimonial-section .scene-wrap { width: 800px !important; height: 800px !important; transform: scale(0.34) !important; transform-origin: center center !important; margin-top: -360px !important; margin-bottom: -360px !important; flex-shrink: 0 !important; position: relative !important; } .testimonial-section .section-title2 { font-size: clamp(22pt, 6vw, 36pt) !important; } #ClientReview { margin-top: 30px !important; } /* ===== OFFER SECTION ===== */ .offer-section .col-12 { max-width: 90vw !important; margin: 10px auto !important; } /* ===== SPONSOR SECTION ===== */ .sponsor-section .col-4 { padding: 5px !important; } /* ===== FOOTER ===== */ .footer-section.footer-compact { padding: 20px 15px 12px !important; } .footer-section .col-12 { padding: 8px 0 !important; } .footer-contact-grid { flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 10px !important; flex-wrap: wrap !important; width: 100% !important; padding: 0 16px !important; margin: 0 auto !important; box-sizing: border-box !important; } .footer-contact-card { width: 100% !important; max-width: 300px !important; margin: 0 auto !important; justify-content: flex-start !important; flex: unset !important; box-sizing: border-box !important; } .footer-contact-value { font-size: clamp(10px, 3vw, 13px) !important; } .footer-compact-title { font-size: clamp(13pt, 4vw, 16pt) !important; } .footer-social-row { gap: 12px !important; flex-wrap: wrap !important; justify-content: center !important; } .footer-social-btn { width: 40px !important; height: 40px !important; font-size: 15px !important; } /* ===== GLOBAL FIXES ===== */ .row { margin-left: 0 !important; margin-right: 0 !important; } .container { padding-left: 15px !important; padding-right: 15px !important; } section, .service-card { overflow: visible !important; } } /* ============================================================ LANDSCAPE MODE (rotated phone) ============================================================ */ @media screen and (max-width: 991.98px) and (orientation: landscape) { :root { --navbar-h: var(--navbar-h-land); } /* ===== NAVBAR LANDSCAPE ===== */ /* ===== NAVBAR LANDSCAPE — scroll-reveal like desktop ===== */ /* ===== NAVBAR LANDSCAPE — scroll-reveal ONLY on home page ===== */ .home-page .navbar { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transform: translateY(-80px) !important; transition: opacity 0.5s ease, transform 0.5s ease, visibility 0.5s ease !important; } .home-page .navbar.show { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: translateY(0) !important; } /* All other pages — navbar always visible in landscape */ body:not(.home-page) .navbar { opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: none !important; transition: none !important; box-shadow: 0 2px 10px rgba(0,0,0,0.12) !important; } /* Show horizontal nav instead of hamburger in landscape */ .navbar > .d-flex.d-lg-none { display: none !important; } .navbar .navbar-toggler { display: none !important; } .navbar-collapse { display: flex !important; visibility: visible !important; height: auto !important; padding: 0 !important; border-top: none !important; background: #fff !important; } .navbar-collapse > div { padding: 0 !important; width: 100% !important; } .navbar-nav { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-evenly !important; flex-wrap: nowrap !important; gap: 0 !important; width: 100% !important; padding: 4px 0 !important; } .navbar-nav .nav-item { flex: 1 !important; text-align: center !important; margin: 0 !important; width: auto !important; } .navbar-nav .nav-link { font-size: clamp(8px, 1.5vw, 11px) !important; padding: 4px 2px !important; white-space: nowrap !important; letter-spacing: 0 !important; display: block !important; text-align: center !important; } .navbar .menu-logo { flex: 1 !important; display: flex !important; justify-content: center !important; align-items: center !important; } .navbar .menu-logo img { height: 26px !important; width: auto !important; } .nav-link.active { border-radius: 20px !important; padding: 3px 6px !important; font-size: clamp(8px, 1.5vw, 11px) !important; } .navbar-nav.mx-auto { padding-right: 0 !important; } /* ===== HERO VIDEO LANDSCAPE ===== */ /* ===== HERO VIDEO LANDSCAPE ===== */ /* ===== HERO VIDEO LANDSCAPE — home page only ===== */ .home-page .hero-video-section { height: 100vh !important; max-height: 100vh !important; margin-top: 0 !important; } /* Other pages keep their original video/hero margin */ body:not(.home-page) .hero-video-section { height: calc(100vh - var(--navbar-h-land)) !important; max-height: 380px !important; margin-top: var(--navbar-h-land) !important; } /* ===== ABOUT INTRO HERO LANDSCAPE ===== */ .about-intro-hero { height: auto !important; min-height: auto !important; padding: calc(var(--navbar-h-land) + 20px) 0 20px 0 !important; margin-top: 0 !important; } .aih-title { font-size: clamp(24px, 4vw, 36px) !important; } .aih-text { font-size: clamp(12px, 2vw, 15px) !important; margin-bottom: 12px !important; } .aih-underline { margin-bottom: 15px !important; } .aih-illustration { width: 45% !important; max-width: 180px !important; } /* ===== VISION HERO LANDSCAPE ===== */ .about-vision-hero { height: auto !important; min-height: auto !important; padding: 30px 0 !important; } .avh-title { font-size: clamp(24px, 4vw, 36px) !important; } .avh-text { font-size: clamp(12px, 2vw, 15px) !important; margin-bottom: 10px !important; } .avh-image { width: 45% !important; max-width: 180px !important; } /* ===== APPROACH LANDSCAPE ===== */ .approach-hero { height: auto !important; min-height: 200px !important; padding: 30px 20px !important; } .approach-title { font-size: clamp(20px, 4vw, 30px) !important; } /* ===== SERVICE LANDSCAPE ===== */ .services-content { margin-top: var(--navbar-h-land) !important; } .service-card { padding: 30px 0 !important; min-height: auto !important; } .service-visual-left { height: clamp(160px, 35vw, 240px) !important; display: flex !important; align-items: center !important; justify-content: center !important; overflow: hidden !important; padding: 0 !important; margin: 0 auto !important; width: 100% !important; } .service-visual-left img, .service-visual-left .srv-main-visual { width: clamp(120px, 28vw, 190px) !important; height: auto !important; max-height: clamp(150px, 32vw, 220px) !important; object-fit: contain !important; display: block !important; margin: 0 auto !important; } .srv-main-visual { width: clamp(120px, 28vw, 190px) !important; max-width: 190px !important; height: auto !important; object-fit: contain !important; margin: 0 auto !important; display: block !important; } .srv-main-title { font-size: clamp(18px, 3vw, 26px) !important; } .srv-desc-clean { font-size: clamp(12px, 2vw, 15px) !important; line-height: 1.6 !important; margin-bottom: 12px !important; } /* ===== CONTACT LANDSCAPE ===== */ .contact-section { padding: calc(var(--navbar-h-land) + 15px) 0 30px 0 !important; } .orange-info-card { padding: 12px 12px 12px 75px !important; margin-bottom: 10px !important; } .orange-logo { width: 70px !important; } .company-name { font-size: 15px !important; } .address-line { font-size: 12px !important; } .contact-info-wrapper { padding: 12px !important; } .contact-info-item { padding-bottom: 8px !important; margin-bottom: 8px !important; } .contact-info-item h5 { font-size: 13px !important; } .contact-info-item p, .contact-info-item a { font-size: 12px !important; } .contact-info-item .badge { width: 38px !important; height: 38px !important; min-width: 38px !important; font-size: 16px !important; } /* ===== FOOTER LANDSCAPE ===== */ .footer-section.footer-compact { padding-top: 50px !important; } .footer-contact-grid { flex-direction: row !important; flex-wrap: wrap !important; justify-content: center !important; gap: 8px !important; } .footer-contact-card { width: auto !important; flex: 1 1 200px !important; max-width: 280px !important; } /* ===== GLOBAL LANDSCAPE ===== */ html, body { overflow-x: hidden !important; } .row { margin-left: 0 !important; margin-right: 0 !important; } } /* ============================================================ EXTRA SMALL PHONES (< 380px like iPhone SE) ============================================================ */ @media screen and (max-width: 380px) { .aih-title, .avh-title { font-size: 26px !important; } .srv-main-title { font-size: 20px !important; } .work-title { font-size: 24px !important; } .footer-contact-card { width: 95% !important; } .orange-info-card { padding: 12px 12px 12px 70px !important; } .orange-logo { width: 65px !important; } .value-item { width: 90vw !important; height: 300px !important; } } /* ============================================================ LARGE PHONES / SMALL TABLETS (768px - 991px) Like iPad mini, Galaxy Tab ============================================================ */ @media screen and (min-width: 768px) and (max-width: 991.98px) { .hero-video-section { max-height: 420px !important; } .aih-title { font-size: 42px !important; } .avh-title { font-size: 42px !important; } .srv-main-title { font-size: 32px !important; } .service-visual-left { height: 360px !important; } .values-wrapper { gap: 25px !important; } .value-item { width: 240px !important; } .footer-contact-grid { flex-direction: row !important; flex-wrap: wrap !important; } .footer-contact-card { flex: 1 1 200px !important; max-width: 300px !important; } } /* ============================================================ iPAD PRO & ALL TABLETS - CONTACT PAGE FOOTER FIX MUST BE LAST IN FILE TO OVERRIDE EVERYTHING ============================================================ */ @media screen and (min-width: 992px) and (max-width: 1400px) { html { height: auto !important; overflow-y: auto !important; } body { height: auto !important; min-height: unset !important; padding-bottom: 0 !important; } .contact-section { padding: 265px 0 40px 0 !important; height: auto !important; min-height: unset !important; max-height: none !important; } .contact-section .map, .contact-section .map .ratio, .contact-section .map iframe { min-height: 280px !important; max-height: 280px !important; height: 280px !important; } .footer-section { position: relative !important; margin-top: 0 !important; bottom: auto !important; padding-bottom: 20px !important; } .copyright { margin: 0 !important; padding-bottom: 0 !important; } /* Remove any ghost space after copyright */ .copyright + * { display: none !important; height: 0 !important; margin: 0 !important; padding: 0 !important; } } /* Global tap highlight kill */ * { -webkit-tap-highlight-color: rgba(0,0,0,0) !important; tap-highlight-color: rgba(0,0,0,0) !important; } .navbar a:hover, .navbar a:focus { box-shadow: none !important; transform: none !important; }