@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
/* @import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap'); */
@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&display=swap');

/*==================== VARIABLES CSS ====================*/
:root {  
    /*========== Colors ==========*/
    --first-color: #800020;
    --first-color-lighter: #c2164f;
    --second-color: #e5c25a;

    --body-color: #fcf1dc;
    --text-color: #111111d2;
    --second-title-color: #800020;
    
    --first-title-color: #D4AF37;
    --scroll-bar-color: #d5a68d;
    --scroll-thumb-color: #D4AF37;
    --scroll-thumb-color-light: #f7b500;

    /*========== Font and typography ==========*/
    --body-font: 'Poppins', sans-serif;
    /* --logo-font: 'Pacifico', cursive; */
    --logo-font: "Lora", serif;
}

/*==================== BASE - Starts ====================*/
* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

html {
    scroll-behavior: smooth;
    font-size: 14px;
}

body {
    font-family: var(--body-font);
    background-color: var(--body-color);
    color: var(--text-color);
    font-size: 1rem;
}

ul {
    list-style: none;
}

a {
    text-decoration: none;
    color: var(--text-color);
}

p {
    line-height: 1.5rem;
}

li {
    list-style: none;
}

/*==================== BASE - Ends ====================*/


/* ------ header css starts ----- */

.header_tev {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--first-color);
    font-family: var(--logo-font);
    padding: 15px;
    cursor: pointer;
    width: 100%;
    height: 4.5rem;
    position: fixed;
    top: 0;
    z-index: 999;
}

.logo {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 9999999;
    cursor: pointer;
}

.tev_logo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.tev_logo_img {
    height: 2.5rem;
}

.tev_logo_name { 
    font-size: 1.5rem;
    color: var(--first-title-color);
    text-shadow: 0 0 5px var(--first-title-color);
}

.ham_close {
    position: fixed;
    z-index: 9999;
    height: 4.5rem;
    width: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 0;
    right: 0;
}

.theme-icon {
    position: fixed;
    z-index: 9999;
    height: 4.5rem;
    width: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 0;
    left: 0;
}

.ham_close>div>i,
.theme-icon>i {
    font-size: 1.5rem;
    color: var(--first-title-color);
    cursor: pointer;
}

.active {
    display: block;
}

.not_active {
    display: none;
}

#nav_links {
    transition: ease-in-out 0.4s;
    position: fixed;
    top: 4.5rem;
    width: 100%;
    height: 100%;
    z-index: 999;
    background-color: var(--second-color);
}

.show_menu {
    left: 0%;
}

.hide_menu {
    left: -100%;
}

.nav_items {
    background-color: var(--second-color);
    border-bottom: 1px solid var(--body-color);
    height: 4rem;
    display: flex;
    padding: 1rem;
}

.nav_items:hover {
    color: var(--scroll-thumb-color-light);
}

.nav_items a {
    font-size: 1rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 1rem;
    color: var(--first-color);
    width: 100%;
}

.nav_items .nav_items_icon {
    width: 3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: var(--first-color);
}

/* ------ header css ends ----- */


/* ------ main section - slider css starts ----- */

#main_section {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.tev_section {
    padding-top: 4.5rem;
    width: 100%;
}

.container {
    padding: 0rem 1rem;
    width: 100%;
}

.tev_brand_name {
    margin: 2rem 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.tev_brand_name_details {
    margin-bottom: 2rem;
}

.tev_brand_name_details h1 {
    text-align: center;
    font-family: var(--logo-font);
    font-size: 3.2rem;
    color: var(--first-title-color);
    animation: change_color 3s infinite;
}

@keyframes change_color {
    0% { 
      color: var(--first-title-color);
      text-shadow: 5px 5px 10px var(--second-title-color);
    }
  50% { 
    color: var(--second-title-color);
    text-shadow: 5px 5px 10px var(--first-title-color); 
  }
  100% { 
    color: var(--first-title-color); 
    text-shadow: 5px 5px 10px var(--second-title-color);
  }
}

.tev_brand_name_details p {
    text-align: center;
    font-size: 1rem;
    margin: 1rem 2rem;
}

.tev_nav_header {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: 3rem;
}

.tev_nav_header>h2 {
    color: var(--first-title-color);
    text-transform: uppercase;
    text-align: center;
    font-size: 1.5rem;
    margin: 1rem 0rem;
    position: sticky;
    top: 5rem;
}

.tev_nav_header>hr {
    height: 5px;
    background-color: var(--first-color);
    border-radius: 5px;
    border: none;
    width: 15rem;
}

.tev_form_submit_button,
.tev_contact_button {
    padding: 1rem;
    font-size: 1.1rem;
    font-weight: 600;
    text-transform: capitalize;
    background-color: var(--first-color);
    color: #fff;
    border-radius: 10px;
    border: none;
    outline: none;
    cursor: pointer;
}

.tev_down {
    display: none;
}

/* ------ main section - slider css ends ----- */

/* ------ main section - gallery css starts ----- */

/* gallery */

.tev_gallery_section {
    display: flex;
    align-items: center;
    justify-content: center;
}

.tev_gallery_row {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%; 
}

.tev_gallery_column {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    max-width: 100%;
}

.tev_gallery_portrait {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.tev_portrait_img {
    width: 50%;
    padding: 1px;
    cursor: pointer;
}

.tev_landscape_img {
    width: 100%;
    padding: 1px;
    cursor: pointer;
}

/* image viewer */

.imageViewer {
    width: 100vw;
    height: calc(100vh - 4.5rem);
    z-index: 999;
    position: fixed;
    top: 4.5rem;
    left: 0;
    /* filter: blur(8px); */
    padding: 2rem;
    display: none;
}

.bg-blur {
    width: 100vw;
    height: calc(100vh - 4.5rem);
    z-index: -1;
    position: fixed;
    top: 4.5rem;
    left: 0;
    background: rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(2px);
    border: 1px solid rgba(255, 255, 255, 0.3)
}

.closebtn {
    position: fixed;
    top: 6.5rem;
    right: 2rem;
    color: var(--first-title-color);
    font-size: 2rem;
    cursor: pointer;
    z-index: 9999;
    width: 2.5rem;
    height: 2.5rem;
    background: var(--first-color);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
}

.imageFrame {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.tev_imageViewer_landscape,
.tev_imageViewer_portrait {
    width: 100%;
}

/* highlight */

.tev_highlights {
    margin: 3rem 0;
}

.tev_highlight_text {
    color: var(--first-title-color);
    text-transform: uppercase;
    font-size: 1.5rem;
}

.tev_highlights>hr{
    height: 5px;
    background-color: var(--first-color);
    border-radius: 5px;
    border: none;
    width: 9rem;
    margin-top: 5px;
}

.tev_videos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin: 2rem 0;
    width: 100%;
}

.tev_videoLink {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 2px;
}

.tev_videoImage {
    width: 100%;
    border-radius: 8px;
}

.tev_videoBlur {
    position: absolute;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    background: #0000006b;
    display: none;
    border-radius: 8px;
    padding: 2px;
}

.tev_videoYTIcon {
    color: red !important;
    font-size: 4rem;
    background: white !important;
    height: 2rem !important;
    width: 3rem !important;
}

.tev_videoLink:hover .tev_videoBlur {
    display: flex;
}

/* ------ main section - gallery css ends ----- */


/* ------ main section - testimonial css starts ----- */

.tev_testimonial_cards_section {
    display: flex;
    align-items: center;
    justify-content: center;
}

.tev_testimonial_section {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.tev_testimonial_card {
    width: 90%;
    text-align: justify;
    gap: 1rem;
    display: flex;
    flex-direction: column;
    /* padding: 20px; */
    background: var(--second-color);
    border-radius: 10px;
    margin: 10px;
}

.tev_testimonial_stars_time {
    display: flex;
    justify-content: space-between;
    background: var(--first-color);
    border-radius:  10px 10px 0px 0px;
    padding: 10px 20px;
}

.tev_testimonial_stars_time p {
    color: var(--second-color);
}

.tev_testimonial_card>p {
    padding: 0px 20px 0px 20px;
}

.tev_testimonial_card>h3 {
    padding: 0px 20px 20px 20px;
    font-size: 1rem;
    color: var(--first-color);
}

/* ------ main section - testimonial css ends ----- */


/* ------ main section - contact css starts ----- */

iframe {
    height: 15rem;
    width: 100%;
    margin-bottom: 2rem;
}

.tev_contact_section {
    margin-bottom: 2rem;
}

.tev_add_num {
    display: flex;
    justify-content: space-around;
    flex-direction: column;
}

.contact_information {
    width: 100%;
    display: flex;
    gap: 1rem;
    margin: 10px 0;
}

.contact_icon {
    width: 2rem;
    height: 2rem;
    font-size: 1.5rem;
    color: var(--first-color);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
}

.contact_title {
    font-size: 1.2rem;
    margin-bottom: 0.2rem;
}

.branchTwo {
    margin-top: 5px;
}

.contact_subtitle {
    font-size: 1rem;
}

.tev_contact_form {
    margin: 1rem 0;
    gap: 1rem;
    display: flex;
    flex-direction: column;
}

.tev_contact_inputs {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.tev_contact_content {
    background-color: var(--second-color);
    padding: 0.5rem 1rem;
    border-radius: 10px;
}
.tev_contact_label {
    width: 100%;
    display: inline-block;
    font-size: 0.75rem;
    color: var(--first-color);
    text-transform: capitalize;
    font-weight: 600;
}
.tev_contact_input {
    width: 100%;
    margin: 0rem 0rem;
    padding: 0.5rem 0;
    background-color: transparent;
    border: none;
    outline: none;
    color: var(--text-color);
    font-size: 1rem;
    /* text-transform: capitalize; */
}
.tev_contact_input::placeholder{
    color: var(--text-color);
}
.tev_contact_input li {
    margin: 0.2rem 0;
}
.tev_contact_date {
    text-transform: uppercase;
}
.tev_checkbox_label,
.tev_contactTime_label {
    padding: 0 0.5rem;
}
.tev_contact_time {
    width: 100%;
    background-color: transparent;
    border: none;
    outline: none;
    color: var(--text-color);
    font-size: 1rem;
}
.tev_contactTime_option {
    background-color: var(--first-color-lighter);
    width: 100%;
}

/* ------ main section - contact css ends ----- */


/* ------ main section - about css starts ----- */

.tev_about_section {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    padding: 1rem;
    padding-bottom: 4.5rem;
}

.tev_about_img {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.tev_about_img>img {
    width: 15rem;
    border-radius: 10px;
    margin-bottom: 1rem;
}

.tev_about_img>p {
    text-align: center;
    font-size: 1rem;
}

.tev_about_img>p>span {
    font-weight: 700;
    font-size: 1rem;
}

.tev_about_description {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    width: 90%;
    gap: 2rem;
}

.tev_about_description>p {
    text-align: justify;
    font-size: 1rem;
}

.tev_highlihgt {
    color: var(--first-color);
    font-weight: 700;
}

.about_info {
    display: flex;
    justify-content: space-between;
}

.about_info_title {
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--text-color);
}

.tev_about_personal_links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    margin-top: 2rem;
}

.social_media_handles {
    font-size: 1.2rem;
}

/* ------ main section - about css ends ----- */

/* @media (max-width: 800px) {
    .tev_gallery_column {
      flex: 50%;
      max-width: 50%;
    }
  } */
  
  /* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
  /* @media (max-width: 600px) {
    .tev_gallery_column {
      flex: 50%;
      max-width: 50%;
    }
  } */

/* ------ footer section css starts ----- */

#footer_section {
    background-color: var(--first-color);
    color: #ffffff;
}

.tev_footer_section {
    padding: 2rem 0px 0px 0px;
}

.tev_footer_detail {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
    align-items: center;
}

.tev_footer_detail_logo {
    height: 4rem;
    width: 5rem;
}

.tev_footer_detail_heading {
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.tev_footer_detail_heading_title {
    font-family: var(--logo-font);
    font-size: 2rem;
    text-shadow: none;
    color: var(--second-color);
}

.tev_footer_detail_heading_subtitle {
    font-size: 1rem;
    text-transform: capitalize;
    color: var(--second-color);
}

.tev_footer_openingHour {
    margin-bottom: 2rem;
}

.tev_footer_openingHour_heading,
.tev_footer_socialMedia_heading {
    font-size: 1.2rem;
    margin-bottom: 0.7rem;
    color: var(--second-color);
}

td {
    line-height: 1.3rem;
    font-size: 1rem;
}

tr>td:nth-child(1) {
    font-weight: 500;
}

.tev_social_handles {
    display: flex;
    gap: 1.3rem;
    margin-bottom: 1rem;
}

.footer_social_media_handles {
    font-size: 1.2rem;
    color: #fff;
}

.rights_footer_details {
    font-size: 0.8rem;
    color: var(--first-title-color);
    text-align: center;
    padding: 0.5rem;
}

.fa-whatsapp {
    color: #fff !important;
    background: #25d366;
    border: none;
    width: 2rem;
    height: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 30%;
}

.fa-instagram {
    border-radius: 0px;
    color: #fff !important;
    background: #d6249f;
    background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%);
    border: none;
    width: 2rem;
    height: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 30%;
}

.fa-facebook-square {
    color: #fff !important;
    background: #3b5998;
    border: none;
    width: 2rem;
    height: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 30%;
}

.fa-youtube {
    background: #ff000040;
    color: red !important;
    border: none;
    width: 2rem;
    height: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 30%;
}

.youtube_icon {
    background-color: #fff;
}

/* ------ footer section css ends ----- */


/*========== SCROLL UP ==========*/
.scrollup {
    position: fixed;
    right: 1rem;
    bottom: -10%;
    background-color: var(--second-color);
    opacity: 0.8;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.4rem;
    z-index: 9999999;
    transition: 0.4s;
    display: flex;
    align-items: center;
    justify-content: center;
}
  
.scrollup_icon {
    font-size: 1.5rem;
    color: var(--first-color);
}
  
.show-scroll {
    bottom: 0rem;
}
  
/*========== SCROLL BAR ==========*/
::-webkit-scrollbar {
    width: 0.60rem;
    background-color: var(--scroll-bar-color);
    border-radius: 0.5rem;
}
  
::-webkit-scrollbar-thumb {
    background-color: var(--scroll-thumb-color);
    border-radius: 0.5rem;
}
  
::-webkit-scrollbar-thumb:hover {
    background-color: var(--scroll-thumb-color-light);
}

/*==================== MEDIA QUERIES ====================*/
/* For small devices */
@media screen and (max-width: 400px) {
}
  
/* For medium devices */
@media screen and (min-width: 600px) {
    .tev_brand_name_details h1 {
        font-size: 4rem;
    }
    .container {
        padding: 0 2rem;
    }
    .tev_brand_name_details {
        width: 75%;
    }
    .tev_about_description {
        width: 75%;
    }
    .tev_testimonial_card {
        width: 75%;
    }
    .tev_packages_section {
        width: 75%;
    }
    .tev_gallery_column {
        max-width: 50%;
    }
    .tev_videoLink {
        width: 50%;
    }
}
  
@media screen and (min-width: 768px) {
    .tev_brand_name_details h1 {
        font-size: 5rem;
    }
    .tev_about_section {
        flex-direction: row;
        align-items: flex-start;
        gap: 4rem;
    }
    .tev_about_description {
        width: 50%;
    }
    .tev_testimonial_section {
        flex-direction: row;
        align-items: flex-start;
        flex-wrap: wrap;
        max-width: 100%;
    }
    .tev_testimonial_card {
        width: 43%;
    }
    .tev_gallery_column {
        max-width: 50%;   
    }
    .tev_testimonial_cards_section {
        width: 100%;
    }
    .tev_packages_section {
        flex-direction: row;
        width: 100%;
        flex-wrap: wrap;
        display: flex;
    }
    .package_card {
        width: 50%;
    }
    .tev_contact_inputs {
        flex-direction: row;
    }
    .tev_contact_name,
    .tev_contact_number,
    .tev_contact_email,
    .tev_contact_functionDate,
    .tev_contact_functionCoverage,
    .tev_contact_contactTime,
    .tev_contact_functionVenue {
        flex: 1;
    }

    #expandedImg {
        padding: 3rem;
    }
    /* .tev_imageViewer_landscape, */
    .tev_imageViewer_portrait {
        height: 100%;
    }
}
  
/* For large devices */
@media screen and (min-width: 1024px) {
    #expandedImg {
        padding: 0rem;
    }
    .tev_imageViewer_landscape{
        height: 100%;
        width: auto;
    }
    .tev_imageViewer_portrait {
        height: 100%;
        width: auto;
    }
    .logo {
        justify-content: flex-start;
        padding-left: 2rem;
    }
    .theme-icon {
        position: inherit;
    }
    #nav_links {
        background-color: transparent;
        position: fixed;
        top: 0;
        height: 4.5rem;
        padding: 0 2rem;
    }
    #nav_links>ul {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        height: 4.5rem;
    }
    .nav_items {
        background-color: transparent;
        border: none;
    }
    .nav_items a {
        color: var(--first-title-color);
        font-size: 1rem;
        font-weight: 600;
    }
    .nav_items a:hover {
        color: var(--first-color-lighter-second);
        
    }
    .nav_items .nav_items_icon {
        display: none;
    }
    .ham_close {
        display: none;
    }
    .show_menu,
    .hide_menu {
        left: 0%;
    }
    #home {
        display: flex;
        flex-direction: column-reverse;
    }
    .tev_down {
        display: block;
    }
    .tev_down_arrow {
        height: 3rem;
        width: 100%;
        text-align: center;
        font-size: 2rem;
        margin-top: 5rem;
    }
    .tev_down_arrow:hover {
        color: var(--first-color);
        transform: scale(1.3);
        transition: 0.2s;
    }
    #tev_slider {
        padding-top: 5.5rem;
    }
    .tev_nav_header {
        margin-top: 1rem;
        margin-bottom: 5rem;
    }
    .container {
        padding: 0 5rem;
    }
    .tev_brand_name {
        height: calc(100vh - 5rem);
    }
    .tev_banner_slider {
        height: calc(100vh - 1rem);
        overflow: hidden;
    }
    .tev_brand_name_details {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        width: 100%;
    }
    .tev_brand_name_details h1 {
        font-size: 6.5rem;
        margin-bottom: 3rem;
    }
    .tev_brand_name_details p {
        width: 580px;
    }
    .tev_banner_slider {
        padding: 0 5rem;
    }
    .tev_about_section {
        gap: 5rem;
    }
    .tev_about_img>img {
        width: 17rem;
    }
    .tev_about_description {
        width: 55%;
    }
    .tev_gallery_column {
        max-width: 33%;
    }
    .tev_testimonial_card {
        width: 30%;
    }
    .package_card {
        width: 25%;
    }
    .tev_footer_section>article {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
    }
    .tev_contact_section {
        display: flex;
        gap: 2rem;
        align-items: flex-start;
    }
    .tev_add_num {
        flex: 2;
    }
    .tev_contact_form {
        flex: 3;
    }
    .social_media_handles:hover,
    .footer_social_media_handles:hover {
        transform: scale(1.2);
        transition: 0.2s;
    }
    .tev_videoLink {
        width: 32.9%;
    }
}