/*reset padding and margin on all elements*/
*,*:before,*:after{
padding:0px;
margin:0px;
outline:0px;
}

:root{
--bcolor:rgb(240,240,240);
}

html{
scroll-behavior: smooth;
}

@font-face{
src:url('../fonts/poppins-SemiBold.ttf');
font-family:poppins_semibold;
}

@font-face{
src:url('../fonts/Rubik-VariableFont_wght.ttf');
font-family:rubik;
}

@font-face{
src:url('../fonts/Roboto-Regular.ttf');
font-family:roboto_regular;
}

@font-face{
src:url('../fonts/notosans.ttf');
font-family: notosans;
}

@font-face{
src:url('../fonts/PlayfairDisplay-Bold.ttf');
font-family:Playfair;
}



div#index_body_wrapper{
position:relative;
/*border:1px solid red;*/
min-height:100%;
box-sizing:border-box;
}

header{
min-height:40px;
position:relative;
background:rgb(0, 0, 0);
box-sizing:border-box;
padding:5px 5px 5px 50px;
display:flex;
box-sizing:boder-box;
}

header > div{
display:flex;
flex-wrap:nowrap;
flex-direction:row;
box-sizing:boder-box;
padding-top:5px;
}

header > div h5{
color:white;
font:500 14px poppins_semibold;
padding-top:5px;
}

header > div h5 > p{
font:400 14px notosans;
}

nav#menu{
position:relative;
top:18px;
padding:0px 0px 0px 100px;
}

nav#menu ul{
position:relative;
}

nav#menu ul li{
display:block;
float:left;
margin:0px 40px;
transition:.2s all;
height:38px;
}

div#index_body_wrapper nav#menu ul li:hover,div#checker_body_wrapper nav#menu ul li:hover{
border-bottom:3px solid rgb(226, 170, 60);
}

nav#menu ul li a{
display:block;
text-decoration:none;
font:14px notosans;
color:white;
}

body#main_index nav#menu ul li:nth-child(1)/*,div#checker_body_wrapper nav#menu ul li:nth-child(2)*/{
border-bottom:3px solid rgb(226, 170, 60);
}

div#action_div{
position:absolute;
right:100px;
top:50%;
transform:translateY(-50%);
width:200px;
/*border:1px solid white;*/
display:flex;
}

div#action_div p{
display:flex;
flex-direction:row;
flex-wrap:nowrap;
gap:2px;
padding:11px 0px 0px 5px;
border-radius:5px;
background:rgb(232, 178, 71);
box-sizing:border-box;
height:40px;
width:100px;
text-align:center;
}

div#action_div p a{
display:block;
text-decoration:none;
text-align:center;
color:white;
padding:0px 0px 0px 0px;
font:14px notosans;
height:100%;
color:rgb(0,0,0);
}

div#action_div p svg{
color:rgb(0,0,0);
margin:-2px 0px 0px 0px;
}

/*-------------------------
    MOBILE NAVIGATION
--------------------------*/

div#mobile_menu_icon,
nav#mobile_menu{
	display:none;
}

/*HERO SECTION
-------------------------*/
div#hero_section{
position:relative;
/*border:1px solid red;*/
height:750px;
box-sizing:border-box;
}

div#slider_wrapper{
position:relative;
height:100%;
/*border:1px solid blue;*/
width:100%;
overflow:hidden;
}

@keyframes sliding{

    /* ---------------- Slide 1 ---------------- */
    0%{
        transform:translateX(0vw);
        opacity:1;
    }
	
	10%{
        transform:translateX(0vw);
        opacity:0;
    }

    /* Slide normally */
    15%{
        transform:translateX(-100vw);
        opacity:0;
    }

    /* ---------------- Slide 2 ---------------- */
    20%{
        transform:translateX(-100vw);
        opacity:1;
    }

    /* Slide normally */
    22%{
        transform:translateX(-200vw);
        opacity:1;
    }

    /* ---------------- Slide 3 ---------------- */
    25%{
        transform:translateX(-200vw);
        opacity:1;
    }
	
	30%{
        transform:translateX(-200vw);
        opacity:1;
    }

    /* Slide normally */
    33%{
        transform:translateX(-200vw);
        opacity:0;
    }

    /* ---------------- Slide 4 ---------------- */
    35%{
        transform:translateX(-300vw);
        opacity:0;
    }
	41%{
        transform:translateX(-300vw);
        opacity:1;
    }

    /* Fade out before Slide 5 */
    44%{
        transform:translateX(-300vw);
        opacity:1;
    }

    /* Fade in Slide 5 */
    47%{
        transform:translateX(-400vw);
        opacity:1;
    }

    /* ---------------- Slide 5 ---------------- */
    47%,55%{
        transform:translateX(-400vw);
        opacity:1;
    }

    /* Slide normally */
    58%{
        transform:translateX(-500vw);
        opacity:1;
    }

    /* ---------------- Slide 6 ---------------- */
    58%,66%{
        transform:translateX(-500vw);
        opacity:1;
    }

    /* Slide normally */
    69%{
        transform:translateX(-600vw);
        opacity:1;
    }

    /* ---------------- Slide 7 ---------------- */
    69%,77%{
        transform:translateX(-600vw);
        opacity:1;
    }

    /* Fade out before Slide 8 */
    80%{
        transform:translateX(-600vw);
        opacity:1;
    }

    /* Fade in Slide 8 */
    83%{
        transform:translateX(-700vw);
        opacity:1;
    }

    /* ---------------- Slide 8 ---------------- */
    83%,91%{
        transform:translateX(-700vw);
        opacity:1;
    }
	
	95%{
	transform:translateX(-800vw);
        opacity:1;
	}

    /* Smooth slide to final image */
    100%{
        transform:translateX(-800vw);
        opacity:1;
    }
}

div#slider{
position:absolute;
/*border:1px solid yellow;*/
width:900vw;
height:100%;
box-sizing:border-box;
  animation:sliding 40s infinite cubic-bezier(.45,.05,.55,.95);
    will-change:transform,opacity;
}

div#slider figure{
position:relative;
float:left;
height:100%;
width:100vw;
overflow:hidden;
/*border:2px dotted red;*/
}

div#slider figure img{
position:relative;
top:-80px;
display:block;
/*object-fit:cover;*/
height:120%;
width:100%;
}

div#hero_info_wrapper{
position:absolute;
z-index:2;
top:0px;
left:0px;
bottom:0px;
right:0px;
/*border:1px solid brown;*/
}

div#hero_info_wrapper > div:nth-child(1){
position:relative;
padding:200px 0px 0px 100px;
}

div#hero_info_wrapper > div:nth-child(1) h5{
font:22px notosans;
color:rgb(232, 178, 71);
}

div#hero_info_wrapper > div:nth-child(1) h2{
font:58px Playfair;
color:rgb(255,255,255);
}

div#hero_info_wrapper > div:nth-child(1) span{
display:block;
height:2px;
width:100px;
background:rgb(232, 178, 71);
}

div#hero_info_wrapper > div:nth-child(1) h4{
font:48px Playfair;
color:rgb(232, 178, 71);
}

div#hero_info_wrapper > div:nth-child(2){
position:absolute;
width:500px;
height:200px;
right:100px;
bottom:200px;
background:rgba(10,10,10,.8);
backgrop-filter:blur(10px);
padding:20px 10px 10px 20px;
}

div#hero_info_wrapper > div:nth-child(2) svg{
color:rgb(232, 178, 71);
height:40px;
width:40px;
}

div#hero_info_wrapper > div:nth-child(2) h5{
font:22px notosans;
color:rgb(255,255,255);
margin:5px 0px 10px 0px;
}

div#hero_info_wrapper > div:nth-child(2) span{
display:block;
height:2px;
width:100px;
background:rgb(232, 178, 71);
margin:0px 0px 5px 0px;
}

div#hero_info_wrapper > div:nth-child(2) p{
font:16px notosans;
color:rgb(232, 178, 71);
margin:0px 0px 5px 0px;
}

div#hero_info_wrapper > div:nth-child(2) h4{
font:16px notosans;
color:rgb(232, 178, 71);
display:flex;
box-sizing:border-box;
padding:5px 0px 0px 0px;
margin-top:10px;
}

div#hero_info_wrapper > div:nth-child(2) h4 > svg{
margin-top:-10px;
}


/*==========================
    DESIGNER / MODEL PORTAL
==========================*/

#designer_model_div{
    padding:80px 7%;
    background:#faf9f7;
}

#designer_model_div h4{
    text-align:center;
    font-size:2.4rem;
    font-weight:700;
    color:#111;
    margin-bottom:60px;
    position:relative;
    letter-spacing:.5px;
}

#designer_model_div h4::after{
    content:"";
    position:absolute;
    left:50%;
    bottom:-18px;
    transform:translateX(-50%);
    width:80px;
    height:2px;
    background:#c9992c;
}

#designer_model_div h4::before{
    content:"";
    position:absolute;
    left:50%;
    bottom:-22px;
    transform:translateX(-50%) rotate(45deg);
    width:10px;
    height:10px;
    background:#c9992c;
}

/*==========================
        CONTAINER
==========================*/

.portal_container{
    display:flex;
    justify-content:space-between;
    align-items:stretch;
    gap:30px;
}

/*==========================
          CARD
==========================*/

.portal_card{
    flex:1;
    display:flex;
    align-items:flex-start;
    gap:25px;
    position:relative;
    overflow:hidden;
    padding:40px;
    border-radius:18px;
    background:#fff;
    border:1px solid rgba(0,0,0,.08);
    transition:.35s ease;
}

.portal_card:hover{
    transform:translateY(-8px);
    box-shadow:0 18px 35px rgba(0,0,0,.12);
}

/*==========================
          ICON
==========================*/

.portal_icon{
    width:90px;
    height:90px;

    display:flex;
    justify-content:center;
    align-items:center;

    flex-shrink:0;

    border-radius:50%;
}

.portal_icon svg{
    width:42px;
    height:42px;
    color:#fff;
    stroke-width:2;
}

/*==========================
         CONTENT
==========================*/

.portal_content{
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    z-index:2;
}

.portal_content h3{
    font-size:2rem;
    margin-bottom:12px;
}

.portal_content span{
    width:100px;
    height:3px;
    border-radius:20px;
    margin-bottom:20px;
}

.portal_content p{
    width:340px;
    font-size:1.05rem;
    line-height:1.8;
    color:#555;
    margin-bottom:30px;
}

/*==========================
          BUTTON
==========================*/

.portal_btn{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;

    padding:14px 30px;

    border-radius:8px;

    color:#fff;
    text-decoration:none;
    font-weight:600;

    transition:.3s ease;
}

.portal_btn svg{
    width:18px;
    height:18px;
}

/*==========================
      DESIGNER THEME
==========================*/

.designer_portal .portal_icon,
.designer_portal .portal_btn{
    background:#5327a8;
}

.designer_portal h3{
    color:#5327a8;
}

.designer_portal .portal_content span{
    background:#5327a8;
}

.designer_portal:hover{
    border-color:#5327a8;
}

.designer_portal .portal_btn:hover{
    background:#421d86;
}

/*==========================
        MODEL THEME
==========================*/

.model_portal .portal_icon,
.model_portal .portal_btn{
    background:#c78d1b;
}

.model_portal h3{
    color:#c78d1b;
}

.model_portal .portal_content span{
    background:#c78d1b;
}

.model_portal:hover{
    border-color:#c78d1b;
}

.model_portal .portal_btn:hover{
    background:#a97312;
}

/*==========================
     BACKGROUND IMAGE
==========================*/

.portal_bg{
    position:absolute;
    right:20px;
    top:50%;
    transform:translateY(-50%);
    opacity:.08;
    pointer-events:none;
}

.portal_bg img{
    width:180px;
    display:block;
}

/*==========================
        FOOTER
==========================*/

#footer{
    width:100%;
    background:#111827;
    color:#fff;
    padding-top:70px;
}

.footer_container{
    width:86%;
    margin:auto;

    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:60px;
}

.footer_section{
    flex:1;

    display:flex;
    flex-direction:column;
}

.footer_section h2{
    font-size:2rem;
    margin-bottom:20px;
    color:#fff;
}

.footer_section h3{
    font-size:1.35rem;
    margin-bottom:20px;
    color:#fff;
}

.footer_section p{
    color:#c8c8c8;
    line-height:1.8;
    margin-bottom:25px;
}

/*==========================
      QUICK LINKS
==========================*/

.footer_section ul{
    list-style:none;
}

.footer_section ul li{
    margin-bottom:15px;
}

.footer_section ul li a{
    text-decoration:none;
    color:#c8c8c8;
    transition:.3s;
}

.footer_section ul li a:hover{
    color:#c89b2b;
    padding-left:8px;
}

/*==========================
        SOCIALS
==========================*/

.footer_socials{
    display:flex;
    align-items:center;
    gap:15px;
}

.footer_socials a{
    width:45px;
    height:45px;

    display:flex;
    justify-content:center;
    align-items:center;

    border-radius:50%;

    background:#1f2937;

    color:#fff;

    transition:.3s;
}

.footer_socials a:hover{
    background:#c89b2b;
}

.footer_socials svg{
    width:20px;
    height:20px;
}

/*==========================
      WHATSAPP BUTTON
==========================*/

.whatsapp_btn{
    width:max-content;

    display:flex;
    align-items:center;
    gap:10px;

    padding:15px 28px;

    text-decoration:none;

    background:#25D366;
    color:#fff;

    border-radius:8px;

    font-weight:600;

    transition:.3s;
}

.whatsapp_btn:hover{
    background:#1fb85a;
}

.whatsapp_btn svg{
    width:22px;
    height:22px;
}

/*==========================
     FOOTER BOTTOM
==========================*/

.footer_bottom{
    margin-top:60px;
    padding:25px 7%;

    display:flex;
    justify-content:center;
    align-items:center;

    border-top:1px solid rgba(255,255,255,.08);
}

.footer_bottom p{
    color:#bdbdbd;
    font-size:.95rem;
}

.footer_bottom{
    margin-top:60px;
    padding:25px 7%;

    display:flex;
    justify-content:space-between;
    align-items:center;

    border-top:1px solid rgba(255,255,255,.08);
}

.footer_bottom p{
    color:#bdbdbd;
    font-size:.95rem;
}

.footer_bottom strong{
    color:#c89b2b;
    font-weight:600;
}