API tools faq
paste
Advertisement
andiahmads

Untitled

andiahmads
May 18th, 2025
359
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 51.11 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE html>
  2. <html lang="id">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.     <title>Royal Umroh - Perjalanan Spiritual Mewah</title>
  7.     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  8.     <link href="https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600;700&family=Montserrat:wght@300;400;500;600&display=swap" rel="stylesheet">
  9.     <style>
  10.         :root {
  11.             --gold: #D4AF37;
  12.             --gold-light: #F0E6C2;
  13.             --navy: #0A2342;
  14.             --navy-light: #1C3D6B;
  15.             --cream: #F8F4E9;
  16.             --dark: #1A1A1A;
  17.             --light: #FFFFFF;
  18.             --gray: #8B8B8B;
  19.         }
  20.  
  21.         * {
  22.             margin: 0;
  23.             padding: 0;
  24.             box-sizing: border-box;
  25.         }
  26.  
  27.         body {
  28.             font-family: 'Montserrat', sans-serif;
  29.             color: var(--dark);
  30.             line-height: 1.7;
  31.             background-color: var(--cream);
  32.             overflow-x: hidden;
  33.         }
  34.  
  35.         h1, h2, h3, h4, h5 {
  36.             font-family: 'Cormorant Garamond', serif;
  37.             font-weight: 600;
  38.             color: var(--navy);
  39.             letter-spacing: 0.5px;
  40.         }
  41.  
  42.         a {
  43.             text-decoration: none;
  44.             color: inherit;
  45.         }
  46.  
  47.         img {
  48.             max-width: 100%;
  49.             height: auto;
  50.             display: block;
  51.         }
  52.  
  53.         .container {
  54.             max-width: 1400px;
  55.             margin: 0 auto;
  56.             padding: 0 2rem;
  57.         }
  58.  
  59.         .section {
  60.             padding: 8rem 0;
  61.         }
  62.  
  63.         .section-title {
  64.             text-align: center;
  65.             margin-bottom: 5rem;
  66.         }
  67.  
  68.         .section-title h2 {
  69.             font-size: 3rem;
  70.             margin-bottom: 1.5rem;
  71.             position: relative;
  72.             display: inline-block;
  73.         }
  74.  
  75.         .section-title h2::after {
  76.             content: '';
  77.             position: absolute;
  78.             bottom: -15px;
  79.             left: 50%;
  80.             transform: translateX(-50%);
  81.             width: 100px;
  82.             height: 3px;
  83.             background: linear-gradient(to right, var(--gold), transparent);
  84.         }
  85.  
  86.         .section-title p {
  87.             max-width: 700px;
  88.             margin: 0 auto;
  89.             color: var(--gray);
  90.             font-size: 1.1rem;
  91.             font-weight: 300;
  92.         }
  93.  
  94.         .btn {
  95.             display: inline-block;
  96.             padding: 1rem 2.5rem;
  97.             border-radius: 0;
  98.             font-weight: 500;
  99.             transition: all 0.4s ease;
  100.             text-align: center;
  101.             letter-spacing: 1px;
  102.             text-transform: uppercase;
  103.             font-size: 0.9rem;
  104.         }
  105.  
  106.         .btn-primary {
  107.             background-color: var(--gold);
  108.             color: var(--navy);
  109.             box-shadow: 0 5px 15px rgba(212, 175, 55, 0.3);
  110.             border: 1px solid var(--gold);
  111.         }
  112.  
  113.         .btn-primary:hover {
  114.             background-color: transparent;
  115.             color: var(--gold);
  116.             transform: translateY(-3px);
  117.             box-shadow: 0 8px 25px rgba(212, 175, 55, 0.4);
  118.         }
  119.  
  120.         .btn-secondary {
  121.             background-color: transparent;
  122.             color: var(--gold);
  123.             border: 1px solid var(--gold);
  124.         }
  125.  
  126.         .btn-secondary:hover {
  127.             background-color: var(--gold);
  128.             color: var(--navy);
  129.         }
  130.  
  131.         /* Header Styles */
  132.         header {
  133.             position: fixed;
  134.             top: 0;
  135.             left: 0;
  136.             width: 100%;
  137.             z-index: 1000;
  138.             background-color: var(--navy);
  139.             transition: all 0.4s ease;
  140.             border-bottom: 1px solid rgba(212, 175, 55, 0.1);
  141.         }
  142.  
  143.         .header-container {
  144.             display: flex;
  145.             justify-content: space-between;
  146.             align-items: center;
  147.             padding: 1.5rem 0;
  148.         }
  149.  
  150.         .logo {
  151.             display: flex;
  152.             align-items: center;
  153.             gap: 1rem;
  154.         }
  155.  
  156.         .logo-icon {
  157.             width: 50px;
  158.             height: 50px;
  159.             background-color: var(--gold);
  160.             display: flex;
  161.             align-items: center;
  162.             justify-content: center;
  163.             color: var(--navy);
  164.             font-size: 1.5rem;
  165.             font-weight: 700;
  166.             font-family: 'Cormorant Garamond', serif;
  167.         }
  168.  
  169.         .logo-text {
  170.             font-size: 1.8rem;
  171.             font-weight: 700;
  172.             color: var(--gold-light);
  173.             font-family: 'Cormorant Garamond', serif;
  174.         }
  175.  
  176.         nav ul {
  177.             display: flex;
  178.             list-style: none;
  179.             gap: 3rem;
  180.         }
  181.  
  182.         nav ul li a {
  183.             font-weight: 400;
  184.             font-size: 1rem;
  185.             color: var(--gold-light);
  186.             position: relative;
  187.             padding: 0.5rem 0;
  188.             transition: all 0.3s ease;
  189.             letter-spacing: 1px;
  190.         }
  191.  
  192.         nav ul li a:hover {
  193.             color: var(--gold);
  194.         }
  195.  
  196.         nav ul li a::after {
  197.             content: '';
  198.             position: absolute;
  199.             bottom: 0;
  200.             left: 0;
  201.             width: 0;
  202.             height: 1px;
  203.             background-color: var(--gold);
  204.             transition: width 0.3s ease;
  205.         }
  206.  
  207.         nav ul li a:hover::after {
  208.             width: 100%;
  209.         }
  210.  
  211.         .mobile-menu-btn {
  212.             display: none;
  213.             background: none;
  214.             border: none;
  215.             color: var(--gold-light);
  216.             font-size: 1.5rem;
  217.             cursor: pointer;
  218.             z-index: 1001;
  219.         }
  220.  
  221.         /* Hero Section */
  222.         .hero {
  223.             min-height: 100vh;
  224.             display: flex;
  225.             align-items: center;
  226.             position: relative;
  227.             overflow: hidden;
  228.             padding-top: 100px;
  229.             background: linear-gradient(rgba(10, 35, 66, 0.7), rgba(10, 35, 66, 0.7)),
  230.                         url('https://images.unsplash.com/photo-1518639192441-8fce0a366e2e?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80');
  231.             background-size: cover;
  232.             background-position: center;
  233.             color: var(--gold-light);
  234.         }
  235.  
  236.         .hero-content {
  237.             max-width: 1200px;
  238.             margin: 0 auto;
  239.             position: relative;
  240.             z-index: 2;
  241.             animation: fadeInUp 1s ease;
  242.             padding: 2rem;
  243.         }
  244.  
  245.         .hero h1 {
  246.             font-size: 4.5rem;
  247.             margin-bottom: 2rem;
  248.             color: var(--gold-light);
  249.             line-height: 1.2;
  250.             text-transform: uppercase;
  251.             letter-spacing: 2px;
  252.         }
  253.  
  254.         .hero p {
  255.             font-size: 1.25rem;
  256.             max-width: 600px;
  257.             margin-bottom: 3rem;
  258.             opacity: 0.9;
  259.             font-weight: 300;
  260.             letter-spacing: 0.5px;
  261.         }
  262.  
  263.         .hero-buttons {
  264.             display: flex;
  265.             gap: 2rem;
  266.         }
  267.  
  268.         /* Features Section */
  269.         .features {
  270.             background-color: var(--light);
  271.             position: relative;
  272.             overflow: hidden;
  273.         }
  274.  
  275.         .features::before {
  276.             content: '';
  277.             position: absolute;
  278.             top: 0;
  279.             left: 0;
  280.             width: 100%;
  281.             height: 100%;
  282.             background: url('https://www.transparenttextures.com/patterns/cream-paper.png');
  283.             opacity: 0.1;
  284.             z-index: 1;
  285.         }
  286.  
  287.         .features-content {
  288.             position: relative;
  289.             z-index: 2;
  290.         }
  291.  
  292.         .features-grid {
  293.             display: grid;
  294.             grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  295.             gap: 3rem;
  296.         }
  297.  
  298.         .feature-card {
  299.             background-color: var(--light);
  300.             padding: 3rem 2.5rem;
  301.             transition: all 0.4s ease;
  302.             text-align: center;
  303.             border: 1px solid rgba(212, 175, 55, 0.2);
  304.             position: relative;
  305.             overflow: hidden;
  306.         }
  307.  
  308.         .feature-card::before {
  309.             content: '';
  310.             position: absolute;
  311.             top: 0;
  312.             left: 0;
  313.             width: 100%;
  314.             height: 5px;
  315.             background-color: var(--gold);
  316.             transform: scaleX(0);
  317.             transform-origin: left;
  318.             transition: transform 0.4s ease;
  319.         }
  320.  
  321.         .feature-card:hover::before {
  322.             transform: scaleX(1);
  323.         }
  324.  
  325.         .feature-card:hover {
  326.             box-shadow: 0 15px 40px rgba(0, 0, 0, 0.05);
  327.         }
  328.  
  329.         .feature-icon {
  330.             width: 80px;
  331.             height: 80px;
  332.             margin: 0 auto 2rem;
  333.             color: var(--gold);
  334.             font-size: 2rem;
  335.             display: flex;
  336.             align-items: center;
  337.             justify-content: center;
  338.             position: relative;
  339.         }
  340.  
  341.         .feature-icon::after {
  342.             content: '';
  343.             position: absolute;
  344.             width: 100%;
  345.             height: 100%;
  346.             border: 1px solid var(--gold);
  347.             transform: rotate(45deg);
  348.             opacity: 0.3;
  349.         }
  350.  
  351.         .feature-card h3 {
  352.             font-size: 1.8rem;
  353.             margin-bottom: 1.5rem;
  354.             color: var(--navy);
  355.         }
  356.  
  357.         .feature-card p {
  358.             color: var(--gray);
  359.             font-weight: 300;
  360.         }
  361.  
  362.         /* Packages Section */
  363.         .packages {
  364.             background-color: var(--cream);
  365.             position: relative;
  366.         }
  367.  
  368.         .packages::before {
  369.             content: '';
  370.             position: absolute;
  371.             top: 0;
  372.             left: 0;
  373.             width: 100%;
  374.             height: 100%;
  375.             background: url('https://www.transparenttextures.com/patterns/gold-scale.png');
  376.             opacity: 0.03;
  377.             z-index: 1;
  378.         }
  379.  
  380.         .packages-content {
  381.             position: relative;
  382.             z-index: 2;
  383.         }
  384.  
  385.         .packages-grid {
  386.             display: grid;
  387.             grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  388.             gap: 3rem;
  389.         }
  390.  
  391.         .package-card {
  392.             background-color: var(--light);
  393.             transition: all 0.4s ease;
  394.             position: relative;
  395.             box-shadow: 0 5px 25px rgba(0, 0, 0, 0.05);
  396.         }
  397.  
  398.         .package-card:hover {
  399.             transform: translateY(-10px);
  400.             box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
  401.         }
  402.  
  403.         .package-badge {
  404.             position: absolute;
  405.             top: 2rem;
  406.             right: 2rem;
  407.             background-color: var(--gold);
  408.             color: var(--navy);
  409.             padding: 0.5rem 1.5rem;
  410.             font-size: 0.8rem;
  411.             font-weight: 600;
  412.             letter-spacing: 1px;
  413.             z-index: 2;
  414.         }
  415.  
  416.         .package-image {
  417.             height: 250px;
  418.             overflow: hidden;
  419.             position: relative;
  420.         }
  421.  
  422.         .package-image img {
  423.             width: 100%;
  424.             height: 100%;
  425.             object-fit: cover;
  426.             transition: transform 1s ease;
  427.         }
  428.  
  429.         .package-card:hover .package-image img {
  430.             transform: scale(1.1);
  431.         }
  432.  
  433.         .package-content {
  434.             padding: 2.5rem;
  435.             border-top: 5px solid var(--gold);
  436.         }
  437.  
  438.         .package-content h3 {
  439.             font-size: 1.8rem;
  440.             margin-bottom: 1rem;
  441.         }
  442.  
  443.         .package-price {
  444.             font-size: 2rem;
  445.             font-weight: 700;
  446.             color: var(--gold);
  447.             margin-bottom: 1.5rem;
  448.             font-family: 'Cormorant Garamond', serif;
  449.         }
  450.  
  451.         .package-price span {
  452.             font-size: 1rem;
  453.             font-weight: 400;
  454.             color: var(--gray);
  455.             font-family: 'Montserrat', sans-serif;
  456.         }
  457.  
  458.         .package-duration {
  459.             display: inline-block;
  460.             color: var(--navy);
  461.             padding: 0.3rem 1.5rem;
  462.             border: 1px solid var(--gold);
  463.             font-size: 0.8rem;
  464.             margin-bottom: 2rem;
  465.             letter-spacing: 1px;
  466.         }
  467.  
  468.         .package-features {
  469.             margin-bottom: 3rem;
  470.         }
  471.  
  472.         .package-features li {
  473.             margin-bottom: 1rem;
  474.             display: flex;
  475.             align-items: flex-start;
  476.         }
  477.  
  478.         .package-features i {
  479.             color: var(--gold);
  480.             margin-right: 1rem;
  481.             margin-top: 0.2rem;
  482.             font-size: 0.9rem;
  483.         }
  484.  
  485.         /* Gallery Section */
  486.         .gallery {
  487.             background-color: var(--light);
  488.             padding: 8rem 0 5rem;
  489.         }
  490.  
  491.         .gallery-grid {
  492.             display: grid;
  493.             grid-template-columns: repeat(4, 1fr);
  494.             grid-template-rows: repeat(2, 250px);
  495.             gap: 1.5rem;
  496.         }
  497.  
  498.         .gallery-item {
  499.             position: relative;
  500.             overflow: hidden;
  501.             transition: all 0.4s ease;
  502.         }
  503.  
  504.         .gallery-item:first-child {
  505.             grid-column: span 2;
  506.             grid-row: span 2;
  507.         }
  508.  
  509.         .gallery-item:nth-child(2),
  510.         .gallery-item:nth-child(3) {
  511.             grid-row: span 1;
  512.         }
  513.  
  514.         .gallery-item:nth-child(4),
  515.         .gallery-item:nth-child(5) {
  516.             grid-row: span 1;
  517.         }
  518.  
  519.         .gallery-item img {
  520.             width: 100%;
  521.             height: 100%;
  522.             object-fit: cover;
  523.             transition: transform 1s ease;
  524.         }
  525.  
  526.         .gallery-item:hover img {
  527.             transform: scale(1.1);
  528.         }
  529.  
  530.         .gallery-overlay {
  531.             position: absolute;
  532.             top: 0;
  533.             left: 0;
  534.             width: 100%;
  535.             height: 100%;
  536.             background: linear-gradient(to top, rgba(10, 35, 66, 0.8), transparent);
  537.             display: flex;
  538.             align-items: flex-end;
  539.             padding: 2rem;
  540.             opacity: 0;
  541.             transition: all 0.4s ease;
  542.         }
  543.  
  544.         .gallery-item:hover .gallery-overlay {
  545.             opacity: 1;
  546.         }
  547.  
  548.         .gallery-caption {
  549.             color: white;
  550.             transform: translateY(20px);
  551.             transition: all 0.4s ease;
  552.         }
  553.  
  554.         .gallery-item:hover .gallery-caption {
  555.             transform: translateY(0);
  556.         }
  557.  
  558.         .gallery-caption h4 {
  559.             color: white;
  560.             font-size: 1.5rem;
  561.             margin-bottom: 0.5rem;
  562.             font-family: 'Cormorant Garamond', serif;
  563.         }
  564.  
  565.         .gallery-caption p {
  566.             font-size: 0.9rem;
  567.             opacity: 0.9;
  568.             font-weight: 300;
  569.         }
  570.  
  571.         /* Ustadz Section */
  572.         .ustadz {
  573.             background-color: var(--cream);
  574.             position: relative;
  575.         }
  576.  
  577.         .ustadz::before {
  578.             content: '';
  579.             position: absolute;
  580.             top: 0;
  581.             left: 0;
  582.             width: 100%;
  583.             height: 100%;
  584.             background: url('https://www.transparenttextures.com/patterns/gold-scale.png');
  585.             opacity: 0.03;
  586.             z-index: 1;
  587.         }
  588.  
  589.         .ustadz-content {
  590.             position: relative;
  591.             z-index: 2;
  592.         }
  593.  
  594.         .ustadz-grid {
  595.             display: grid;
  596.             grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  597.             gap: 3rem;
  598.         }
  599.  
  600.         .ustadz-card {
  601.             background-color: var(--light);
  602.             transition: all 0.4s ease;
  603.             position: relative;
  604.             box-shadow: 0 5px 25px rgba(0, 0, 0, 0.05);
  605.         }
  606.  
  607.         .ustadz-card:hover {
  608.             transform: translateY(-10px);
  609.             box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
  610.         }
  611.  
  612.         .ustadz-image {
  613.             height: 350px;
  614.             overflow: hidden;
  615.             position: relative;
  616.         }
  617.  
  618.         .ustadz-image img {
  619.             width: 100%;
  620.             height: 100%;
  621.             object-fit: cover;
  622.             transition: transform 1s ease;
  623.         }
  624.  
  625.         .ustadz-card:hover .ustadz-image img {
  626.             transform: scale(1.1);
  627.         }
  628.  
  629.         .ustadz-info {
  630.             padding: 2.5rem;
  631.             text-align: center;
  632.             border-top: 5px solid var(--gold);
  633.         }
  634.  
  635.         .ustadz-info h3 {
  636.             font-size: 1.8rem;
  637.             margin-bottom: 0.5rem;
  638.         }
  639.  
  640.         .ustadz-info p {
  641.             color: var(--gray);
  642.             margin-bottom: 1.5rem;
  643.             font-weight: 300;
  644.         }
  645.  
  646.         .ustadz-social {
  647.             display: flex;
  648.             justify-content: center;
  649.             gap: 1rem;
  650.         }
  651.  
  652.         .ustadz-social a {
  653.             width: 40px;
  654.             height: 40px;
  655.             border-radius: 0;
  656.             background-color: var(--cream);
  657.             color: var(--navy);
  658.             display: flex;
  659.             align-items: center;
  660.             justify-content: center;
  661.             transition: all 0.3s ease;
  662.             border: 1px solid rgba(212, 175, 55, 0.3);
  663.         }
  664.  
  665.         .ustadz-social a:hover {
  666.             background-color: var(--gold);
  667.             color: var(--navy);
  668.         }
  669.  
  670.         /* Testimonials Section */
  671.         .testimonials {
  672.             background-color: var(--light);
  673.             position: relative;
  674.             overflow: hidden;
  675.         }
  676.  
  677.         .testimonials::before {
  678.             content: '';
  679.             position: absolute;
  680.             top: 0;
  681.             left: 0;
  682.             width: 100%;
  683.             height: 100%;
  684.             background: url('https://www.transparenttextures.com/patterns/cream-paper.png');
  685.             opacity: 0.1;
  686.             z-index: 1;
  687.         }
  688.  
  689.         .testimonials-content {
  690.             position: relative;
  691.             z-index: 2;
  692.         }
  693.  
  694.         .testimonials-grid {
  695.             display: grid;
  696.             grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  697.             gap: 3rem;
  698.         }
  699.  
  700.         .testimonial-card {
  701.             background-color: var(--light);
  702.             padding: 3rem;
  703.             transition: all 0.4s ease;
  704.             position: relative;
  705.             box-shadow: 0 5px 25px rgba(0, 0, 0, 0.05);
  706.             border: 1px solid rgba(212, 175, 55, 0.1);
  707.         }
  708.  
  709.         .testimonial-card:hover {
  710.             transform: translateY(-10px);
  711.             box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
  712.         }
  713.  
  714.         .testimonial-rating {
  715.             color: var(--gold);
  716.             margin-bottom: 2rem;
  717.             font-size: 1.25rem;
  718.         }
  719.  
  720.         .testimonial-text {
  721.             font-style: italic;
  722.             margin-bottom: 2.5rem;
  723.             position: relative;
  724.             padding: 0 1rem;
  725.             color: var(--dark);
  726.             font-weight: 300;
  727.             font-size: 1.1rem;
  728.         }
  729.  
  730.         .testimonial-text::before,
  731.         .testimonial-text::after {
  732.             content: '"';
  733.             font-size: 4rem;
  734.             color: rgba(212, 175, 55, 0.1);
  735.             position: absolute;
  736.             font-family: serif;
  737.             line-height: 1;
  738.         }
  739.  
  740.         .testimonial-text::before {
  741.             top: -20px;
  742.             left: -5px;
  743.         }
  744.  
  745.         .testimonial-text::after {
  746.             bottom: -50px;
  747.             right: -5px;
  748.         }
  749.  
  750.         .testimonial-author {
  751.             display: flex;
  752.             align-items: center;
  753.         }
  754.  
  755.         .testimonial-author img {
  756.             width: 70px;
  757.             height: 70px;
  758.             border-radius: 50%;
  759.             object-fit: cover;
  760.             margin-right: 1.5rem;
  761.             border: 2px solid var(--gold);
  762.         }
  763.  
  764.         .author-info h4 {
  765.             font-size: 1.5rem;
  766.             margin-bottom: 0.5rem;
  767.             font-family: 'Cormorant Garamond', serif;
  768.         }
  769.  
  770.         .author-info p {
  771.             color: var(--gray);
  772.             font-size: 0.9rem;
  773.             font-weight: 300;
  774.         }
  775.  
  776.         /* CTA Section */
  777.         .cta {
  778.             background: linear-gradient(rgba(10, 35, 66, 0.9), rgba(10, 35, 66, 0.9)),
  779.                         url('https://images.unsplash.com/photo-1520250497591-112f2f40a3f4?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80');
  780.             background-size: cover;
  781.             background-position: center;
  782.             color: white;
  783.             text-align: center;
  784.             padding: 8rem 2rem;
  785.             position: relative;
  786.             overflow: hidden;
  787.         }
  788.  
  789.         .cta-content {
  790.             position: relative;
  791.             z-index: 2;
  792.             max-width: 800px;
  793.             margin: 0 auto;
  794.         }
  795.  
  796.         .cta h2 {
  797.             font-size: 3rem;
  798.             margin-bottom: 2rem;
  799.             color: var(--gold-light);
  800.         }
  801.  
  802.         .cta p {
  803.             font-size: 1.25rem;
  804.             margin-bottom: 3rem;
  805.             opacity: 0.9;
  806.             font-weight: 300;
  807.             max-width: 700px;
  808.             margin-left: auto;
  809.             margin-right: auto;
  810.         }
  811.  
  812.         /* Footer */
  813.         footer {
  814.             background-color: var(--navy);
  815.             color: var(--gold-light);
  816.             padding: 8rem 0 3rem;
  817.             position: relative;
  818.         }
  819.  
  820.         .footer-container {
  821.             display: grid;
  822.             grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  823.             gap: 4rem;
  824.             margin-bottom: 5rem;
  825.             position: relative;
  826.             z-index: 2;
  827.         }
  828.  
  829.         .footer-col h3 {
  830.             font-size: 1.8rem;
  831.             margin-bottom: 2rem;
  832.             position: relative;
  833.             padding-bottom: 1rem;
  834.             color: var(--gold-light);
  835.             font-family: 'Cormorant Garamond', serif;
  836.         }
  837.  
  838.         .footer-col h3::after {
  839.             content: '';
  840.             position: absolute;
  841.             bottom: 0;
  842.             left: 0;
  843.             width: 50px;
  844.             height: 2px;
  845.             background-color: var(--gold);
  846.         }
  847.  
  848.         .footer-about p {
  849.             opacity: 0.8;
  850.             margin-bottom: 2rem;
  851.             line-height: 1.7;
  852.             font-weight: 300;
  853.         }
  854.  
  855.         .footer-links {
  856.             list-style: none;
  857.         }
  858.  
  859.         .footer-links li {
  860.             margin-bottom: 1.5rem;
  861.         }
  862.  
  863.         .footer-links a {
  864.             color: var(--gold-light);
  865.             opacity: 0.8;
  866.             transition: all 0.3s ease;
  867.             display: flex;
  868.             align-items: center;
  869.             gap: 1rem;
  870.             font-weight: 300;
  871.             letter-spacing: 0.5px;
  872.         }
  873.  
  874.         .footer-links a:hover {
  875.             opacity: 1;
  876.             color: var(--gold);
  877.             padding-left: 5px;
  878.         }
  879.  
  880.         .footer-links i {
  881.             font-size: 0.9rem;
  882.             color: var(--gold);
  883.         }
  884.  
  885.         .footer-contact p {
  886.             display: flex;
  887.             align-items: flex-start;
  888.             gap: 1rem;
  889.             margin-bottom: 1.5rem;
  890.             opacity: 0.8;
  891.             font-weight: 300;
  892.         }
  893.  
  894.         .footer-contact i {
  895.             color: var(--gold);
  896.             margin-top: 0.3rem;
  897.             font-size: 0.9rem;
  898.         }
  899.  
  900.         .footer-social {
  901.             display: flex;
  902.             gap: 1.5rem;
  903.             margin-top: 2rem;
  904.         }
  905.  
  906.         .footer-social a {
  907.             width: 45px;
  908.             height: 45px;
  909.             border-radius: 0;
  910.             background-color: rgba(212, 175, 55, 0.1);
  911.             color: var(--gold-light);
  912.             display: flex;
  913.             align-items: center;
  914.             justify-content: center;
  915.             transition: all 0.3s ease;
  916.             border: 1px solid rgba(212, 175, 55, 0.3);
  917.         }
  918.  
  919.         .footer-social a:hover {
  920.             background-color: var(--gold);
  921.             color: var(--navy);
  922.         }
  923.  
  924.         .copyright {
  925.             text-align: center;
  926.             padding-top: 3rem;
  927.             margin-top: 3rem;
  928.             border-top: 1px solid rgba(212, 175, 55, 0.1);
  929.             opacity: 0.7;
  930.             font-size: 0.9rem;
  931.             font-weight: 300;
  932.             position: relative;
  933.             z-index: 2;
  934.         }
  935.  
  936.         /* Animations */
  937.         @keyframes fadeInUp {
  938.             from {
  939.                 opacity: 0;
  940.                 transform: translateY(30px);
  941.             }
  942.             to {
  943.                 opacity: 1;
  944.                 transform: translateY(0);
  945.             }
  946.         }
  947.  
  948.         @keyframes fadeIn {
  949.             to {
  950.                 opacity: 1;
  951.                 transform: translateY(0);
  952.             }
  953.         }
  954.  
  955.         /* Responsive Styles */
  956.         @media (max-width: 1200px) {
  957.             .hero h1 {
  958.                 font-size: 4rem;
  959.             }
  960.            
  961.             .section {
  962.                 padding: 6rem 0;
  963.             }
  964.         }
  965.  
  966.         @media (max-width: 992px) {
  967.             .hero h1 {
  968.                 font-size: 3.5rem;
  969.             }
  970.            
  971.             .section-title h2 {
  972.                 font-size: 2.5rem;
  973.             }
  974.  
  975.             .gallery-grid {
  976.                 grid-template-columns: repeat(3, 1fr);
  977.                 grid-template-rows: repeat(3, 200px);
  978.             }
  979.  
  980.             .gallery-item:first-child {
  981.                 grid-column: span 3;
  982.             }
  983.         }
  984.  
  985.         @media (max-width: 768px) {
  986.             .mobile-menu-btn {
  987.                 display: block;
  988.             }
  989.  
  990.             nav {
  991.                 position: fixed;
  992.                 top: 0;
  993.                 left: 0;
  994.                 width: 100%;
  995.                 height: 100vh;
  996.                 background-color: var(--navy);
  997.                 display: flex;
  998.                 align-items: center;
  999.                 justify-content: center;
  1000.                 clip-path: circle(0% at 100% 0);
  1001.                 transition: all 0.6s ease;
  1002.                 z-index: 1000;
  1003.             }
  1004.  
  1005.             nav.active {
  1006.                 clip-path: circle(150% at 100% 0);
  1007.             }
  1008.  
  1009.             nav ul {
  1010.                 flex-direction: column;
  1011.                 align-items: center;
  1012.                 gap: 2.5rem;
  1013.             }
  1014.  
  1015.             nav ul li a {
  1016.                 font-size: 1.2rem;
  1017.             }
  1018.  
  1019.             .hero h1 {
  1020.                 font-size: 3rem;
  1021.             }
  1022.  
  1023.             .hero p {
  1024.                 font-size: 1.1rem;
  1025.             }
  1026.  
  1027.             .hero-buttons {
  1028.                 flex-direction: column;
  1029.                 gap: 1.5rem;
  1030.             }
  1031.  
  1032.             .section-title h2 {
  1033.                 font-size: 2.2rem;
  1034.             }
  1035.  
  1036.             .gallery-grid {
  1037.                 grid-template-columns: repeat(2, 1fr);
  1038.                 grid-template-rows: repeat(4, 200px);
  1039.             }
  1040.  
  1041.             .gallery-item:first-child {
  1042.                 grid-column: span 2;
  1043.             }
  1044.         }
  1045.  
  1046.         @media (max-width: 576px) {
  1047.             .hero h1 {
  1048.                 font-size: 2.5rem;
  1049.             }
  1050.  
  1051.             .hero p {
  1052.                 font-size: 1rem;
  1053.             }
  1054.  
  1055.             .section-title h2 {
  1056.                 font-size: 2rem;
  1057.             }
  1058.  
  1059.             .packages-grid,
  1060.             .testimonials-grid {
  1061.                 grid-template-columns: 1fr;
  1062.             }
  1063.  
  1064.             .gallery-grid {
  1065.                 grid-template-columns: 1fr;
  1066.                 grid-template-rows: repeat(6, 250px);
  1067.             }
  1068.  
  1069.             .gallery-item:first-child {
  1070.                 grid-column: span 1;
  1071.             }
  1072.         }
  1073.  
  1074.         /* Fade-in animation for sections */
  1075.         .section {
  1076.             opacity: 0;
  1077.             transform: translateY(20px);
  1078.             transition: opacity 0.6s ease, transform 0.6s ease;
  1079.         }
  1080.  
  1081.         .section.visible {
  1082.             opacity: 1;
  1083.             transform: translateY(0);
  1084.         }
  1085.     </style>
  1086. </head>
  1087. <body>
  1088.     <!-- Header -->
  1089.     <header>
  1090.         <div class="container header-container">
  1091.             <div class="logo">
  1092.                 <div class="logo-icon">RU</div>
  1093.                 <div class="logo-text">Royal Umroh</div>
  1094.             </div>
  1095.             <button class="mobile-menu-btn" id="mobileMenuBtn">
  1096.                 <i class="fas fa-bars"></i>
  1097.             </button>
  1098.             <nav id="mainNav">
  1099.                 <ul>
  1100.                     <li><a href="#home">Beranda</a></li>
  1101.                     <li><a href="#features">Keunggulan</a></li>
  1102.                     <li><a href="#packages">Paket</a></li>
  1103.                     <li><a href="#gallery">Galeri</a></li>
  1104.                     <li><a href="#ustadz">Pembimbing</a></li>
  1105.                     <li><a href="#testimonials">Testimoni</a></li>
  1106.                     <li><a href="#contact" class="btn btn-primary">Kontak</a></li>
  1107.                 </ul>
  1108.             </nav>
  1109.         </div>
  1110.     </header>
  1111.  
  1112.     <!-- Hero Section -->
  1113.     <section class="section hero" id="home">
  1114.         <div class="hero-content">
  1115.             <h1>Pengalaman Umroh Mewah & Penuh Makna</h1>
  1116.            <p>Royal Umroh menghadirkan perjalanan spiritual eksklusif dengan akomodasi mewah, bimbingan ustadz ternama, dan pelayanan premium untuk pengalaman ibadah yang tak terlupakan.</p>
  1117.            <div class="hero-buttons">
  1118.                <a href="#packages" class="btn btn-primary">Lihat Paket</a>
  1119.                <a href="#contact" class="btn btn-secondary">Konsultasi</a>
  1120.            </div>
  1121.        </div>
  1122.    </section>
  1123.  
  1124.    <!-- Features Section -->
  1125.    <section class="section features" id="features">
  1126.        <div class="container">
  1127.            <div class="section-title">
  1128.                <h2>Keistimewaan Royal Umroh</h2>
  1129.                <p>Kami memberikan pengalaman umroh yang berbeda dengan pelayanan eksklusif dan fasilitas premium</p>
  1130.            </div>
  1131.            <div class="features-content">
  1132.                <div class="features-grid">
  1133.                    <div class="feature-card">
  1134.                        <div class="feature-icon">
  1135.                            <i class="fas fa-kaaba"></i>
  1136.                        </div>
  1137.                        <h3>Bimbingan Eksklusif</h3>
  1138.                        <p>Dibimbing langsung oleh ustadz-ustadz ternama dengan pengalaman puluhan tahun memandu jamaah umroh</p>
  1139.                    </div>
  1140.                    <div class="feature-card">
  1141.                        <div class="feature-icon">
  1142.                            <i class="fas fa-hotel"></i>
  1143.                        </div>
  1144.                        <h3>Akomodasi Mewah</h3>
  1145.                        <p>Hotel bintang 5 dengan jarak hanya 200 meter dari Masjidil Haram dan pemandangan langsung Ka'bah</p>
  1146.                    </div>
  1147.                    <div class="feature-card">
  1148.                        <div class="feature-icon">
  1149.                            <i class="fas fa-utensils"></i>
  1150.                        </div>
  1151.                        <h3>Katering Premium</h3>
  1152.                        <p>Menu makanan gourmet halal dengan chef khusus dari Indonesia untuk memanjakan lidah jamaah</p>
  1153.                    </div>
  1154.                    <div class="feature-card">
  1155.                        <div class="feature-icon">
  1156.                            <i class="fas fa-bus"></i>
  1157.                        </div>
  1158.                        <h3>Transportasi VIP</h3>
  1159.                        <p>Bus eksklusif dengan kapasitas terbatas untuk kenyamanan maksimal selama perjalanan ziarah</p>
  1160.                    </div>
  1161.                    <div class="feature-card">
  1162.                        <div class="feature-icon">
  1163.                            <i class="fas fa-user-tie"></i>
  1164.                        </div>
  1165.                        <h3>Pelayanan Personal</h3>
  1166.                        <p>Dedicated tour leader untuk setiap kelompok kecil (maksimal 15 jamaah) untuk perhatian lebih personal</p>
  1167.                    </div>
  1168.                    <div class="feature-card">
  1169.                        <div class="feature-icon">
  1170.                            <i class="fas fa-headset"></i>
  1171.                        </div>
  1172.                        <h3>Concierge Service</h3>
  1173.                        <p>Layanan concierge 24 jam untuk memenuhi segala kebutuhan khusus jamaah selama di Tanah Suci</p>
  1174.                    </div>
  1175.                </div>
  1176.            </div>
  1177.        </div>
  1178.    </section>
  1179.  
  1180.    <!-- Packages Section -->
  1181.    <section class="section packages" id="packages">
  1182.        <div class="container">
  1183.            <div class="section-title">
  1184.                <h2>Paket Eksklusif</h2>
  1185.                <p>Pilihan paket perjalanan umroh mewah dengan fasilitas terbaik untuk pengalaman ibadah yang sempurna</p>
  1186.            </div>
  1187.            <div class="packages-content">
  1188.                <div class="packages-grid">
  1189.                    <div class="package-card">
  1190.                        <div class="package-badge">Early Bird</div>
  1191.                        <div class="package-image">
  1192.                            <img src="https://images.unsplash.com/photo-1518639192441-8fce0a366e2e?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Paket Royal Silver">
  1193.                        </div>
  1194.                        <div class="package-content">
  1195.                            <h3>Royal Silver</h3>
  1196.                            <div class="package-price">Rp 49.500.000 <span>/orang</span></div>
  1197.                            <span class="package-duration">9 Hari 8 Malam</span>
  1198.                            <ul class="package-features">
  1199.                                <li><i class="fas fa-check"></i> Tiket pesawat kelas ekonomi premium</li>
  1200.                                <li><i class="fas fa-check"></i> Akomodasi hotel bintang 5</li>
  1201.                                <li><i class="fas fa-check"></i> Makan prasmanan 3x sehari</li>
  1202.                                <li><i class="fas fa-check"></i> Bimbingan ustadz berpengalaman</li>
  1203.                                <li><i class="fas fa-check"></i> Ziarah ke tempat bersejarah</li>
  1204.                                <li><i class="fas fa-check"></i> Free baggage 30kg</li>
  1205.                            </ul>
  1206.                            <a href="#" class="btn btn-primary">Pesan Sekarang</a>
  1207.                        </div>
  1208.                    </div>
  1209.                    <div class="package-card">
  1210.                        <div class="package-badge">Best Seller</div>
  1211.                        <div class="package-image">
  1212.                            <img src="https://images.unsplash.com/photo-1520250497591-112f2f40a3f4?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Paket Royal Gold">
  1213.                        </div>
  1214.                        <div class="package-content">
  1215.                            <h3>Royal Gold</h3>
  1216.                            <div class="package-price">Rp 65.000.000 <span>/orang</span></div>
  1217.                            <span class="package-duration">12 Hari 11 Malam</span>
  1218.                            <ul class="package-features">
  1219.                                <li><i class="fas fa-check"></i> Tiket pesawat kelas bisnis</li>
  1220.                                <li><i class="fas fa-check"></i> Akomodasi hotel bintang 5 premium</li>
  1221.                                <li><i class="fas fa-check"></i> Makan gourmet 3x sehari</li>
  1222.                                <li><i class="fas fa-check"></i> Bimbingan ustadz ternama</li>
  1223.                                <li><i class="fas fa-check"></i> Ziarah eksklusif</li>
  1224.                                <li><i class="fas fa-check"></i> Free baggage 40kg</li>
  1225.                            </ul>
  1226.                            <a href="#" class="btn btn-primary">Pesan Sekarang</a>
  1227.                        </div>
  1228.                    </div>
  1229.                    <div class="package-card">
  1230.                        <div class="package-badge">Premium</div>
  1231.                        <div class="package-image">
  1232.                            <img src="https://images.unsplash.com/photo-1518639192441-8fce0a366e2e?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Paket Royal Platinum">
  1233.                        </div>
  1234.                        <div class="package-content">
  1235.                            <h3>Royal Platinum</h3>
  1236.                            <div class="package-price">Rp 85.000.000 <span>/orang</span></div>
  1237.                            <span class="package-duration">15 Hari 14 Malam</span>
  1238.                            <ul class="package-features">
  1239.                                <li><i class="fas fa-check"></i> Tiket pesawat kelas utama</li>
  1240.                                <li><i class="fas fa-check"></i> Suite hotel bintang 5</li>
  1241.                                <li><i class="fas fa-check"></i> Makan gourmet 3x sehari</li>
  1242.                                <li><i class="fas fa-check"></i> Bimbingan ustadz eksklusif</li>
  1243.                                <li><i class="fas fa-check"></i> Ziarah premium</li>
  1244.                                <li><i class="fas fa-check"></i> Free baggage 50kg</li>
  1245.                            </ul>
  1246.                            <a href="#" class="btn btn-primary">Pesan Sekarang</a>
  1247.                        </div>
  1248.                    </div>
  1249.                </div>
  1250.            </div>
  1251.        </div>
  1252.    </section>
  1253.  
  1254.    <!-- Gallery Section -->
  1255.    <section class="section gallery" id="gallery">
  1256.        <div class="container">
  1257.            <div class="section-title">
  1258.                <h2>Galeri Perjalanan</h2>
  1259.                <p>Jelajahi momen-momen indah dari perjalanan umroh bersama Royal Umroh</p>
  1260.            </div>
  1261.            <div class="gallery-grid">
  1262.                <div class="gallery-item">
  1263.                    <img src="https://images.unsplash.com/photo-1518639192441-8fce0a366e2e?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Masjidil Haram">
  1264.                    <div class="gallery-overlay">
  1265.                        <div class="gallery-caption">
  1266.                            <h4>Masjidil Haram</h4>
  1267.                            <p>Ibadah di jantungan kota suci Makkah</p>
  1268.                        </div>
  1269.                    </div>
  1270.                </div>
  1271.                <div class="gallery-item">
  1272.                    <img src="https://images.unsplash.com/photo-1520250497591-112f2f40a3f4?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Ziarah Madinah">
  1273.                    <div class="gallery-overlay">
  1274.                        <div class="gallery-caption">
  1275.                            <h4>Ziarah Madinah</h4>
  1276.                            <p>Kunjungan ke Masjid Nabawi yang penuh berkah</p>
  1277.                        </div>
  1278.                    </div>
  1279.                </div>
  1280.                <div class="gallery-item">
  1281.                    <img src="https://images.unsplash.com/photo-1518639192441-8fce0a366e2e?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Jamaah Berdoa">
  1282.                    <div class="gallery-overlay">
  1283.                        <div class="gallery-caption">
  1284.                            <h4>Jamaah Berdoa</h4>
  1285.                            <p>Momen spiritual yang mendalam</p>
  1286.                        </div>
  1287.                    </div>
  1288.                </div>
  1289.                <div class="gallery-item">
  1290.                    <img src="https://images.unsplash.com/photo-1520250497591-112f2f40a3f4?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Hotel Mewah">
  1291.                    <div class="gallery-overlay">
  1292.                        <div class="gallery-caption">
  1293.                            <h4>Akomodasi Mewah</h4>
  1294.                            <p>Kenyamanan hotel bintang 5</p>
  1295.                        </div>
  1296.                    </div>
  1297.                </div>
  1298.                <div class="gallery-item">
  1299.                    <img src="https://images.unsplash.com/photo-1518639192441-8fce0a366e2e?ixlib=rb-1.2.1&auto=format&fit=crop&w=1350&q=80" alt="Ziarah Bersejarah">
  1300.                    <div class="gallery-overlay">
  1301.                        <div class="gallery-caption">
  1302.                            <h4>Ziarah Bersejarah</h4>
  1303.                            <p>Kunjungan ke situs bersejarah</p>
  1304.                        </div>
  1305.                    </div>
  1306.                </div>
  1307.            </div>
  1308.        </div>
  1309.    </section>
  1310.  
  1311.    <!-- Ustadz Section -->
  1312.    <section class="section ustadz" id="ustadz">
  1313.        <div class="container">
  1314.            <div class="section-title">
  1315.                <h2>Pembimbing Spiritual</h2>
  1316.                <p>Perjalanan Anda akan dipandu oleh ustadz-ustadz berpengalaman untuk pengalaman ibadah yang mendalam</p>
  1317.            </div>
  1318.            <div class="ustadz-content">
  1319.                <div class="ustadz-grid">
  1320.                    <div class="ustadz-card">
  1321.                        <div class="ustadz-image">
  1322.                            <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Ustadz Ahmad">
  1323.                        </div>
  1324.                        <div class="ustadz-info">
  1325.                            <h3>Ustadz Ahmad Al-Hafidz</h3>
  1326.                            <p>Pengajar ilmu fiqih dan tafsir dengan pengalaman 15 tahun memandu umroh</p>
  1327.                            <div class="ustadz-social">
  1328.                                <a href="#"><i class="fab fa-facebook-f"></i></a>
  1329.                                <a href="#"><i class="fab fa-instagram"></i></a>
  1330.                                <a href="#"><i class="fab fa-youtube"></i></a>
  1331.                            </div>
  1332.                        </div>
  1333.                    </div>
  1334.                    <div class="ustadz-card">
  1335.                        <div class="ustadz-image">
  1336.                            <img src="https://images.unsplash.com/photo-1500648767791-00dcc994a43e?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Ustadz Hasan">
  1337.                        </div>
  1338.                        <div class="ustadz-info">
  1339.                            <h3>Ustadz Hasan Basri</h3>
  1340.                            <p>Ahli hadits dan sejarah Islam, pembimbing umroh selama 20 tahun</p>
  1341.                            <div class="ustadz-social">
  1342.                                <a href="#"><i class="fab fa-facebook-f"></i></a>
  1343.                                <a href="#"><i class="fab fa-instagram"></i></a>
  1344.                                <a href="#"><i class="fab fa-youtube"></i></a>
  1345.                            </div>
  1346.                        </div>
  1347.                    </div>
  1348.                    <div class="ustadz-card">
  1349.                        <div class="ustadz-image">
  1350.                            <img src="https://images.unsplash.com/photo-1492562080023-ab3db95bfbce?ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=80" alt="Ustadz Yusuf">
  1351.                        </div>
  1352.                        <div class="ustadz-info">
  1353.                            <h3>Ustadz Yusuf Mansur</h3>
  1354.                            <p>Ulama karismatik dengan pengalaman memimpin ribuan jamaah</p>
  1355.                            <div class="ustadz-social">
  1356.                                <a href="#"><i class="fab fa-facebook-f"></i></a>
  1357.                                <a href="#"><i class="fab fa-instagram"></i></a>
  1358.                                <a href="#"><i class="fab fa-youtube"></i></a>
  1359.                            </div>
  1360.                        </div>
  1361.                    </div>
  1362.                </div>
  1363.            </div>
  1364.        </div>
  1365.    </section>
  1366.  
  1367.    <!-- Testimonials Section -->
  1368.    <section class="section testimonials" id="testimonials">
  1369.        <div class="container">
  1370.            <div class="section-title">
  1371.                <h2>Testimoni Jamaah</h2>
  1372.                <p>Pengalaman nyata dari jamaah yang telah menjalani perjalanan spiritual bersama Royal Umroh</p>
  1373.            </div>
  1374.            <div class="testimonials-content">
  1375.                <div class="testimonials-grid">
  1376.                    <div class="testimonial-card">
  1377.                        <div class="testimonial-rating">
  1378.                            <i class="fas fa-star"></i>
  1379.                            <i class="fas fa-star"></i>
  1380.                            <i class="fas fa-star"></i>
  1381.                            <i class="fas fa-star"></i>
  1382.                            <i class="fas fa-star"></i>
  1383.                        </div>
  1384.                        <p class="testimonial-text">Perjalanan umroh terbaik yang pernah saya alami. Pelayanan sangat personal, dan ustadz sangat mendampingi setiap langkah ibadah.</p>
  1385.                        <div class="testimonial-author">
  1386.                            <img src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=80" alt="Siti Aminah">
  1387.                            <div class="author-info">
  1388.                                <h4>Siti Aminah</h4>
  1389.                                <p>Ibu Rumah Tangga, Jakarta</p>
  1390.                            </div>
  1391.                        </div>
  1392.                    </div>
  1393.                    <div class="testimonial-card">
  1394.                        <div class="testimonial-rating">
  1395.                            <i class="fas fa-star"></i>
  1396.                            <i class="fas fa-star"></i>
  1397.                            <i class="fas fa-star"></i>
  1398.                            <i class="fas fa-star"></i>
  1399.                            <i class="fas fa-star"></i>
  1400.                        </div>
  1401.                        <p class="testimonial-text">Akomodasi mewah dan transportasi nyaman membuat ibadah saya fokus dan khusyuk. Terima kasih Royal Umroh!</p>
  1402.                        <div class="testimonial-author">
  1403.                            <img src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=80" alt="Budi Santoso">
  1404.                            <div class="author-info">
  1405.                                <h4>Budi Santoso</h4>
  1406.                                <p>Pengusaha, Surabaya</p>
  1407.                            </div>
  1408.                        </div>
  1409.                    </div>
  1410.                    <div class="testimonial-card">
  1411.                        <div class="testimonial-rating">
  1412.                            <i class="fas fa-star"></i>
  1413.                            <i class="fas fa-star"></i>
  1414.                            <i class="fas fa-star"></i>
  1415.                            <i class="fas fa-star"></i>
  1416.                            <i class="fas fa-star"></i>
  1417.                        </div>
  1418.                        <p class="testimonial-text">Makanan lezat dan bimbingan spiritual yang luar biasa. Saya merasa sangat terbantu selama di Tanah Suci.</p>
  1419.                        <div class="testimonial-author">
  1420.                            <img src="https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=80" alt="Fatimah Zahra">
  1421.                            <div class="author-info">
  1422.                                <h4>Fatimah Zahra</h4>
  1423.                                <p>Guru, Bandung</p>
  1424.                            </div>
  1425.                        </div>
  1426.                    </div>
  1427.                </div>
  1428.            </div>
  1429.        </div>
  1430.    </section>
  1431.  
  1432.    <!-- CTA Section -->
  1433.    <section class="section cta" id="contact">
  1434.        <div class="cta-content">
  1435.            <h2>Wujudkan Perjalanan Spiritual Anda Sekarang</h2>
  1436.            <p>Hubungi kami untuk informasi lebih lanjut atau konsultasi gratis mengenai paket umroh eksklusif kami</p>
  1437.            <a href="#" class="btn btn-primary">Hubungi Sekarang</a>
  1438.        </div>
  1439.    </section>
  1440.  
  1441.    <!-- Footer -->
  1442.    <footer>
  1443.        <div class="container footer-container">
  1444.            <div class="footer-col footer-about">
  1445.                <h3>Tentang Royal Umroh</h3>
  1446.                <p>Royal Umroh adalah penyedia layanan umroh premium yang berkomitmen memberikan pengalaman ibadah mewah dan bermakna dengan pelayanan terbaik.</p>
  1447.                <div class="footer-social">
  1448.                    <a href="#"><i class="fab fa-facebook-f"></i></a>
  1449.                    <a href="#"><i class="fab fa-instagram"></i></a>
  1450.                    <a href="#"><i class="fab fa-youtube"></i></a>
  1451.                    <a href="#"><i class="fab fa-whatsapp"></i></a>
  1452.                </div>
  1453.            </div>
  1454.            <div class="footer-col">
  1455.                <h3>Link Cepat</h3>
  1456.                <ul class="footer-links">
  1457.                    <li><a href="#home"><i class="fas fa-chevron-right"></i> Beranda</a></li>
  1458.                    <li><a href="#features"><i class="fas fa-chevron-right"></i> Keunggulan</a></li>
  1459.                    <li><a href="#packages"><i class="fas fa-chevron-right"></i> Paket</a></li>
  1460.                    <li><a href="#gallery"><i class="fas fa-chevron-right"></i> Galeri</a></li>
  1461.                    <li><a href="#ustadz"><i class="fas fa-chevron-right"></i> Pembimbing</a></li>
  1462.                    <li><a href="#testimonials"><i class="fas fa-chevron-right"></i> Testimoni</a></li>
  1463.                </ul>
  1464.            </div>
  1465.            <div class="footer-col footer-contact">
  1466.                <h3>Kontak Kami</h3>
  1467.                <p><i class="fas fa-map-marker-alt"></i> Jl. Sudirman No. 123, Jakarta Selatan, Indonesia</p>
  1468.                <p><i class="fas fa-phone"></i> +62 21 1234 5678</p>
  1469.                <p><i class="fas fa-envelope"></i> [email protected]</p>
  1470.                <p><i class="fas fa-clock"></i> Senin - Jumat, 09:00 - 17:00</p>
  1471.            </div>
  1472.        </div>
  1473.        <div class="copyright">
  1474.            &copy; 2025 Royal Umroh. All Rights Reserved.
  1475.         </div>
  1476.     </footer>
  1477.  
  1478.     <script>
  1479.         // Mobile Menu Toggle
  1480.         const mobileMenuBtn = document.getElementById('mobileMenuBtn');
  1481.         const mainNav = document.getElementById('mainNav');
  1482.  
  1483.         mobileMenuBtn.addEventListener('click', () => {
  1484.             mainNav.classList.toggle('active');
  1485.             const isActive = mainNav.classList.contains('active');
  1486.             mobileMenuBtn.innerHTML = `<i class="fas fa-${isActive ? 'times' : 'bars'}"></i>`;
  1487.         });
  1488.  
  1489.         // Smooth Scroll for Navigation Links
  1490.         document.querySelectorAll('nav a[href^="#"]').forEach(anchor => {
  1491.             anchor.addEventListener('click', function(e) {
  1492.                 e.preventDefault();
  1493.                 const targetId = this.getAttribute('href');
  1494.                 const targetElement = document.querySelector(targetId);
  1495.                 if (targetElement) {
  1496.                     targetElement.scrollIntoView({
  1497.                         behavior: 'smooth',
  1498.                         block: 'start'
  1499.                     });
  1500.                 }
  1501.                 // Close mobile menu after clicking a link
  1502.                 if (mainNav.classList.contains('active')) {
  1503.                     mainNav.classList.remove('active');
  1504.                     mobileMenuBtn.innerHTML = '<i class="fas fa-bars"></i>';
  1505.                 }
  1506.             });
  1507.         });
  1508.  
  1509.         // Section Fade-In Animation
  1510.         const sections = document.querySelectorAll('.section');
  1511.         const observerOptions = {
  1512.             root: null,
  1513.             rootMargin: '0px',
  1514.             threshold: 0.1
  1515.         };
  1516.  
  1517.         const sectionObserver = new IntersectionObserver((entries, observer) => {
  1518.             entries.forEach(entry => {
  1519.                 if (entry.isIntersecting) {
  1520.                     entry.target.classList.add('visible');
  1521.                     observer.unobserve(entry.target);
  1522.                 }
  1523.             });
  1524.         }, observerOptions);
  1525.  
  1526.         sections.forEach(section => {
  1527.             sectionObserver.observe(section);
  1528.         });
  1529.     </script>
  1530. </body>
  1531. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!