@font-face {
    font-family: 'Segoe UI';
    src: url('../fonts/segoe-ui/Segoe\ UI.ttf') format('tff'),
}

* {
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
}

:root {


    /* font size */
    --heading-1-font-size: 40px;
    --h1-font-size: 32px;
    --h2-font-size: 16px;
    --h3-font-size: 20px;
    --para2-font-size: 15px;
    --address-font-size: 28px;
    --andriod-para-font-size: 14px;
    --snd-message-font-size: 22px;

    /* font size */




    /* font weight */
    --h1-font-weight: 700;
    --h2-font-weight: 600;
    --h3-font-weight: 600;
    --para1-font-weight: 400;


    /* color */
    --heading1-color: #fff;
    --h1-color: #000;
    --feedback-color: #f86f03;
    --feedback-background-color: #f86f03;
    --form-control-color: rgba(0, 0, 0, 0.30);
    --form-control-border: 1px solid rgba(0, 0, 0, 0.50);
    --font-awesome1-color: #525FE1;
    --para1-color: rgba(0, 0, 0, 0.84);
    --para2-color: rgba(0, 0, 0, 0.72);
    --para3-color: rgba(0, 0, 0, 0.50);
    --para4-color: rgba(0, 0, 0, 0.67);
    --para4-colora: rgba(0, 0, 0, 0.55);
    --navbar-button-color: #525fe1;
    --button1-background-color: #fff6f4;
    --button2-background-color: #525fe1;
    --footer-bg: rgba(255, 255, 255, 0.99);
    --inputColor: rgba(82, 95, 225, 0.33);
    --fBtn: #FFA41B;
    /*  color  end */


    /* boxshadow */
    --box-box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.25);
    --box2-box-shadow: 0px 1px 4px 1px rgba(0, 0, 0, 0.25);
    --box4-box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, 0.25);
    --box3-box-shadow: 0px 2px 7px 0px rgba(0, 0, 0, 0.25);
    --view-guide-box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.25);

    /* by ikram  */


    /* Replace with your desired color */

    --border-color: rgba(0, 0, 0, 0.52);
    --border: rgba(0, 0, 0, 0.12);
    --line-color: rgba(248, 111, 3, 0.51);
    --para-border: rgba(0, 0, 0, 0.42);
    --backgroundhover: #f1f1f1;
    --hover-color: #666;
    --input-color: rgba(0, 0, 0, 0.56);


    /* ###########>Header variable start<############# */
    --header-bg: #fff6f4;
    --nav-color: 18px;
    /* ###########>Header variable End <############# */

    /* ###########>pay-form variable start<############# */
    --form-color: #575757;
    --form-color1: rgba(0, 0, 0, 0.37);


    /* ###########>pay-form variable End <############# */





    /* ###########>Footer variable start<############# */
    --footer-bg: #fdfdfd;
    --twitter-color: #1D9BF0;
    /* ###########>Footer variable End <############# */

    /* ###########>book now variable start<############# */
    --book-color: rgba(0, 0, 0, 0.55);
    --book-color1: rgba(0, 0, 0, 0.70);
    --book-color2: rgba(0, 0, 0, 0.52);
    --book-color3: #F3F1F1;
    --book-color4: 0px 0px 4px 0px rgba(0, 0, 0, 0.25);
    --book-color5: rgba(0, 0, 0, 0.25);
    /* ###########>book now variable End <############# */

    /* ###########>book now submit variable start<############# */
    --book-color6: rgba(0, 0, 0, 0.41);
    --book-color7: #FCFCFC;
    --book-color8: rgba(0, 0, 0, 0.53);
    --book-color9: rgba(0, 0, 0, 0.18);

    /* ###########>book now submit variable End <############# */
}

.heading-1 {
    color: var(--heading1-color);
    font-size: var(--heading-1-font-size);

}

.header-contactus {
    background: url(../images/contacus.jpg) no-repeat;
    background-size: cover;
    background-position: bottom;
    height: 100vh;


}


.heading-2 {
    color: var(--h1-color);
    font-size: var(--h1-font-size);
    font-weight: var(--h1-font-weight);
}

.social-icon {
    color: var(--font-awesome1-color);
    cursor: pointer;
    font-size: 16px;

}

.social-icon:hover {
    transform: scale(1.3);
    transition: .5s;

}

.media-icon {
    display: flex;
    gap: 31px;
    flex-direction: column;

}

.media-icon li {
    color: var(--para3-color);
    font-family: Segoe UI;
    font-size: var(--h2-font-size) !important;
    font-weight: var(--para1-font-weight);

}

.input-form {

    box-shadow: none;
    outline: none;
    color: var(--form-control-color);
    font-size: var(--h3-font-size);
    font-weight: var(--para1-font-weight);
    border: 1px solid rgba(0, 0, 0, 0.10);
}

.input-form:focus {
    border: 2px solid #000;
}

.form-button {
    background-color: var(--button2-background-color);
    width: 142px;
    height: 60px;
    outline: none;
    border: none;
    box-shadow: 0px 2px 7px 0px rgba(0, 0, 0, 0.25);
    border-radius: 9px;
    color: var(--heading1-color);
    font-size: var(--h3-font-size);
}

.form-button:hover {
    cursor: pointer;
    background-color: var(--feedback-color);
    transition: .2s;
}